/* ===================================================================================== EventsHub public /features page. Standalone: this page is served as static HTML without the app's stylesheets, so nothing here needs to fight style.css or custom.css. Every animation lives under .fx-anim, which features.js puts on only when the visitor has not asked for reduced motion; without it (no script, reduced motion, a crawler) every element sits in its final, complete state. ===================================================================================== */ :root { --ink: #16123A; --ink-2: #433E6B; --muted: #5F5A86; --brand: #512BD4; --brand-deep: #3F1FB3; --iris: #8C74F2; --mist: #F4F1FF; --soft: #EDE8FF; --line: #E3DDFB; --paper: #FFFFFF; --mint: #0FA37F; --mint-soft: #E3F6F0; --display: "Bricolage Grotesque", "Instrument Sans", system-ui, sans-serif; --body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --shadow-1: 0 1px 2px rgba(42, 26, 122, .06), 0 8px 24px -8px rgba(42, 26, 122, .16); --shadow-2: 0 2px 4px rgba(42, 26, 122, .06), 0 28px 60px -20px rgba(42, 26, 122, .28); --ease-out: cubic-bezier(.22, 1, .36, 1); --ease-spring: cubic-bezier(.34, 1.56, .64, 1); --gutter: clamp(16px, 4vw, 40px); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--mist); color: var(--ink); font-family: var(--body); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img, svg { display: block; max-width: 100%; } a { color: var(--brand); text-underline-offset: 3px; } a:hover { color: var(--brand-deep); } p { margin: 0; } :focus-visible { outline: 3px solid var(--iris); outline-offset: 3px; border-radius: 6px; } .fx-wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); } .fx-skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: var(--r-sm); transition: top .2s var(--ease-out); } .fx-skip:focus { top: 12px; color: #fff; } /* ---------------------------------------------------------------- type */ .fx-h1, .fx-h2, .fx-h3 { font-family: var(--display); color: var(--ink); margin: 0; font-optical-sizing: auto; } .fx-h1 { font-size: clamp(2.5rem, 5vw, 4.15rem); font-weight: 750; line-height: 1.0; letter-spacing: -0.038em; text-wrap: balance; } .fx-h2 { font-size: clamp(2rem, 3.6vw, 3.1rem); font-weight: 720; line-height: 1.05; letter-spacing: -0.03em; text-wrap: balance; } .fx-h3 { font-size: 1.6rem; font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; } .fx-sub { color: var(--ink-2); font-size: 1.1rem; max-width: 60ch; margin-top: 16px; text-wrap: pretty; } /* ---------------------------------------------------------------- buttons */ .fx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1.5px solid transparent; font: 600 15px/1 var(--body); text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform .18s var(--ease-out), background-color .2s, color .2s, border-color .2s, box-shadow .2s; } .fx-btn:active { transform: scale(.97); } .fx-btn svg { width: 20px; height: 20px; } .fx-btn-lg { min-height: 54px; padding: 0 26px; font-size: 16px; } .fx-btn-primary { background: var(--brand); color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 10px 24px -10px rgba(81, 43, 212, .8); } .fx-btn-primary:hover { background: var(--brand-deep); color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 14px 30px -10px rgba(81, 43, 212, .9); } .fx-btn-ghost { color: var(--ink); } .fx-btn-ghost:hover { color: var(--brand); background: rgba(81, 43, 212, .07); } .fx-btn-quiet { color: var(--ink); background: rgba(255,255,255,.7); border-color: var(--line); } .fx-btn-quiet:hover { color: var(--brand); border-color: #CFC4F7; background: #fff; } /* ---------------------------------------------------------------- nav */ .fx-nav { position: sticky; top: 0; z-index: 50; background: rgba(244, 241, 255, .72); -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5); border-bottom: 1px solid transparent; transition: border-color .3s, background-color .3s; } .fx-nav[data-scrolled="true"] { border-bottom-color: var(--line); background: rgba(255, 255, 255, .78); } .fx-nav-inner { display: flex; align-items: center; gap: 24px; height: 68px; } .fx-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); margin-right: auto; } .fx-brand:hover { color: var(--ink); } .fx-mark { width: 30px; height: 30px; } .fx-brand-name { font: 750 20px/1 var(--display); letter-spacing: -0.02em; } .fx-brand-by { font-size: 13px; color: var(--muted); padding-top: 3px; } .fx-links { display: flex; gap: 4px; } .fx-links a { color: var(--ink-2); text-decoration: none; font-weight: 500; font-size: 15px; padding: 10px 12px; border-radius: 999px; transition: color .2s, background-color .2s; } .fx-links a:hover { color: var(--brand); background: rgba(81, 43, 212, .07); } .fx-nav-cta { display: flex; gap: 6px; } @media (max-width: 860px) { .fx-links { display: none; } } @media (max-width: 480px) { .fx-brand-by { display: none; } .fx-nav-cta .fx-btn { padding: 0 14px; font-size: 14px; } } /* ---------------------------------------------------------------- hero */ .fx-hero { position: relative; padding: clamp(40px, 7vw, 96px) 0 clamp(56px, 8vw, 112px); overflow: hidden; isolation: isolate; } /* The same lattice the illustrations are drawn on, fading out from behind the badge. */ .fx-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(circle at 1px 1px, #D3C8FA 1.1px, transparent 1.4px); background-size: 24px 24px; -webkit-mask-image: radial-gradient(ellipse 70% 80% at 72% 40%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 70% 80% at 72% 40%, #000 20%, transparent 75%); } .fx-hero::after { content: ""; position: absolute; z-index: -2; width: 900px; height: 900px; right: -260px; top: -320px; background: radial-gradient(closest-side, rgba(140, 116, 242, .30), rgba(140, 116, 242, 0)); } .fx-hero-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(24px, 5vw, 72px); align-items: center; } .fx-hero-copy { max-width: 640px; } .fx-lede { margin-top: 24px; font-size: clamp(1.05rem, 1.35vw, 1.2rem); color: var(--ink-2); max-width: 56ch; text-wrap: pretty; } .fx-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; } .fx-proof { list-style: none; padding: 0; margin: 32px 0 0; display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--ink-2); font-size: 14.5px; } .fx-proof li { display: flex; align-items: center; gap: 8px; } .fx-proof li::before { content: ""; width: 16px; height: 16px; flex: none; border-radius: 50%; background: var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat; } /* The badge. Everything is sized from --u so the whole object scales as one. */ .fx-hero-art { --u: clamp(0.78px, 0.1vw + 0.62px, 1px); position: relative; height: calc(600 * var(--u)); min-height: 470px; } .fx-lanyard, .fx-pass { position: absolute; left: 50%; } .fx-lanyard { top: -140px; width: 0; height: 320px; transform-origin: 50% 0; } .fx-strap { position: absolute; top: 0; width: 30px; height: 300px; background: linear-gradient(180deg, #6A45EA, #4222B8); border-radius: 3px; } .fx-strap-l { right: -2px; transform-origin: 100% 100%; transform: skewX(17deg); } .fx-strap-r { left: -2px; transform-origin: 0 100%; transform: skewX(-17deg); filter: brightness(.9); } .fx-clip { position: absolute; top: 286px; left: -21px; width: 42px; height: 34px; border-radius: 9px; background: #CFC6F2; box-shadow: 0 2px 0 #B7A8F4; } .fx-clip::after { content: ""; position: absolute; left: 11px; top: 22px; width: 20px; height: 26px; border-radius: 6px; background: #B7A8F4; } .fx-pass { top: 168px; width: 290px; margin-left: -145px; transform-origin: 50% -308px; background: var(--paper); border-radius: 24px; box-shadow: var(--shadow-2); overflow: hidden; } .fx-pass-head { display: flex; align-items: center; gap: 10px; height: 84px; padding: 22px 22px 0; background: linear-gradient(135deg, #5B34E0, #4222B8); color: #fff; font: 700 15px/1 var(--display); letter-spacing: -0.01em; position: relative; } .fx-pass-head::before { content: ""; position: absolute; top: 12px; left: 50%; width: 64px; height: 8px; margin-left: -32px; border-radius: 4px; background: rgba(255,255,255,.32); } .fx-pass-dot { width: 18px; height: 18px; border-radius: 50%; background: rgba(255,255,255,.9); } .fx-pass-body { padding: 22px 26px 26px; text-align: center; } .fx-pass-name { font: 750 30px/1.1 var(--display); letter-spacing: -0.03em; color: var(--ink); white-space: nowrap; } .fx-pass-org { margin-top: 6px; font-size: 14px; color: var(--muted); } .fx-pass-role { display: inline-block; margin-top: 12px; padding: 5px 14px; border-radius: 999px; background: var(--soft); color: var(--brand); font-weight: 700; font-size: 13.5px; } .fx-pass-qr { position: relative; width: 138px; height: 138px; margin: 20px auto 0; } .fx-pass-qr svg { width: 100%; height: 100%; fill: var(--ink); } .fx-pass-qr .fd-in { fill: #fff; } .fx-scan-frame { position: absolute; inset: -12px; } .fx-scan-frame, .sc-corners { --c: var(--mint); background: linear-gradient(var(--c), var(--c)) top left / 26px 4px, linear-gradient(var(--c), var(--c)) top left / 4px 26px, linear-gradient(var(--c), var(--c)) top right / 26px 4px, linear-gradient(var(--c), var(--c)) top right / 4px 26px, linear-gradient(var(--c), var(--c)) bottom left / 26px 4px, linear-gradient(var(--c), var(--c)) bottom left / 4px 26px, linear-gradient(var(--c), var(--c)) bottom right / 26px 4px, linear-gradient(var(--c), var(--c)) bottom right / 4px 26px; background-repeat: no-repeat; border-radius: 6px; } .fx-scan-line { position: absolute; left: -6px; right: -6px; top: 50%; height: 3px; border-radius: 2px; background: var(--mint); box-shadow: 0 0 14px rgba(15, 163, 127, .7); opacity: 0; } .fx-verdict { position: absolute; left: calc(50% + 96px); top: calc(168px + 380px); display: flex; align-items: center; gap: 12px; padding: 12px 20px 12px 12px; border-radius: 999px; background: #fff; box-shadow: var(--shadow-1); white-space: nowrap; } .fx-verdict b { display: block; font: 700 16px/1.2 var(--display); color: var(--ink); } .fx-verdict small { display: block; font-size: 13px; color: var(--muted); } .fx-tick { width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.4l3.6 3.6 7.4-7.6' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/70% no-repeat; } .fx-hero-note { position: absolute; padding: 10px 16px; border-radius: 14px; background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, .9); box-shadow: var(--shadow-1); } .fx-hero-note b { display: block; font: 700 14px/1.2 var(--display); } .fx-hero-note small { display: block; font-size: 12.5px; color: var(--muted); } .fx-note-a { left: calc(50% - 250px); top: 250px; } .fx-note-b { left: calc(50% - 230px); top: 470px; } /* hero motion */ @keyframes fx-swing { 0%, 100% { transform: rotate(1.4deg); } 50% { transform: rotate(-1.4deg); } } @keyframes fx-word { from { opacity: 0; transform: translateY(.45em); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } } @keyframes fx-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } } @keyframes fx-fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes fx-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } } @keyframes fx-module { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: none; } } @keyframes fx-frame { from { opacity: 0; transform: scale(1.25); } to { opacity: 1; transform: none; } } @keyframes fx-sweep { 0% { opacity: 0; transform: translateY(-70px); } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(70px); } } @keyframes fx-verdict-in { from { opacity: 0; transform: translateY(14px) scale(.85); } to { opacity: 1; transform: none; } } @keyframes fx-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .fx-anim .fx-word { display: inline-block; animation: fx-word .9s var(--ease-out) calc(var(--i) * 55ms + 80ms) both; } .fx-anim .fx-lede, .fx-anim .fx-hero-cta, .fx-anim .fx-proof { animation: fx-fade-up .8s var(--ease-out) both; } .fx-anim .fx-lede { animation-delay: .45s; } .fx-anim .fx-hero-cta { animation-delay: .6s; } .fx-anim .fx-proof { animation-delay: .75s; } .fx-anim .fx-lanyard, .fx-anim .fx-pass { animation: fx-swing 7s ease-in-out infinite; } .fx-anim .fx-note-a { animation: fx-bob 6s ease-in-out infinite; } .fx-anim .fx-note-b { animation: fx-bob 7s ease-in-out -2s infinite; } .fx-anim [data-hero].is-run .fx-pass-name { animation: fx-type .7s steps(12, end) .25s both; } .fx-anim [data-hero].is-run .fx-pass-org { animation: fx-fade-up .5s var(--ease-out) .95s both; } .fx-anim [data-hero].is-run .fx-pass-role { animation: fx-pop .5s var(--ease-spring) 1.15s both; } .fx-anim [data-hero].is-run .fx-pass-qr rect { transform-box: fill-box; transform-origin: center; animation: fx-module .35s var(--ease-out) calc(1.35s + var(--d, 0) * 38ms) both; } .fx-anim [data-hero].is-run .fx-pass-qr .fd { animation-delay: 1.3s; } .fx-anim [data-hero].is-run .fx-scan-frame { animation: fx-frame .45s var(--ease-out) 2.3s both; } .fx-anim [data-hero].is-run .fx-scan-line { animation: fx-sweep .9s ease-in-out 2.6s both; } .fx-anim [data-hero].is-run .fx-verdict { animation: fx-verdict-in .6s var(--ease-spring) 3.45s both; } .fx-anim [data-hero]:not(.is-run) .fx-verdict, .fx-anim [data-hero]:not(.is-run) .fx-scan-frame, .fx-anim [data-hero]:not(.is-run) .fx-pass-role { opacity: 0; } @media (max-width: 960px) { .fx-hero-grid { grid-template-columns: 1fr; } .fx-hero-copy { max-width: none; } /* Stacked under the copy: the straps start at the art's own top edge instead of reaching up into the text. */ .fx-hero-art { height: 560px; min-height: 0; margin-top: 8px; clip-path: inset(0 -60px -60px -60px); } } @media (max-width: 520px) { .fx-hero-art { height: 540px; } .fx-pass { scale: .9; } .fx-verdict { left: auto; right: 0; top: 500px; } .fx-note-a, .fx-note-b { display: none; } } /* ---------------------------------------------------------------- sections */ .fx-section { padding: clamp(72px, 10vw, 128px) 0; position: relative; } .fx-section-head { max-width: 760px; margin-bottom: clamp(36px, 5vw, 56px); } [data-reveal] { transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); } .fx-anim [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(24px); } /* ---------------------------------------------------------------- walkthrough */ .fx-wt-section { background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .fx-wt { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(24px, 4vw, 48px); align-items: start; } .fx-wt-stage { position: sticky; top: 96px; } .fx-win { container-type: inline-size; background: linear-gradient(180deg, #FBFAFF, #F4F1FF); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-2); overflow: hidden; } .fx-win-bar { display: flex; align-items: center; gap: 7px; height: 42px; padding: 0 16px; border-bottom: 1px solid var(--line); background: #fff; } .fx-win-bar i { width: 11px; height: 11px; border-radius: 50%; background: #E3DDFB; } .fx-win-bar i:nth-child(1) { background: #F4B4C0; } .fx-win-bar i:nth-child(2) { background: #F6D79A; } .fx-win-bar i:nth-child(3) { background: #A8DCC9; } .fx-win-url { margin-left: 14px; padding: 4px 14px; border-radius: 999px; background: var(--mist); color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fx-scenes { position: relative; aspect-ratio: 16 / 10; font-size: 1.68cqi; background-image: radial-gradient(circle at 1px 1px, #DDD4FB 1px, transparent 1.3px); background-size: 2.2em 2.2em; } .fx-scene { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 3em; padding: 3.5em 4em; opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility 0s linear .45s; } .fx-scene.is-on { opacity: 1; visibility: visible; transition: opacity .45s ease .1s, visibility 0s; } /* shared scene parts */ .sc-card, .sc1-canvas, .sc2-summary, .sc3-invoice, .sc3-mail, .sc4-queue, .sc5-count, .sc6-dash, .sc-ticket, .sc-person, .sc-meet { background: #fff; border-radius: 1.1em; box-shadow: 0 .1em .2em rgba(42,26,122,.06), 0 1.2em 2.6em -1em rgba(42,26,122,.2); } .sc-title { font: 700 1.35em/1.2 var(--display); letter-spacing: -0.02em; color: var(--ink); margin-bottom: .8em; } .fx-scene em { font-style: normal; color: var(--muted); } .sc-row { display: flex; justify-content: space-between; gap: 1em; padding: .55em 0; border-bottom: 1px solid var(--line); font-size: 1.05em; } .sc-muted { color: var(--muted); } /* 1 build */ .sc1-palette { display: flex; flex-direction: column; gap: .7em; } .sc1-palette span { padding: .6em 1.1em; border-radius: .7em; background: #fff; border: 1px dashed #C9BDF7; font-weight: 600; font-size: 1.05em; color: var(--ink-2); } .sc1-canvas { width: 28em; padding: 1.8em; } .sc-field { margin-bottom: 1em; } .sc-field em { display: block; font-size: .95em; margin-bottom: .35em; } .sc-field b { display: block; height: 2.5em; border: 1.5px solid var(--line); border-radius: .6em; } .sc-chips { display: flex; gap: .5em; } .sc-chips i { font-style: normal; padding: .45em .9em; border-radius: 99em; border: 1.5px solid var(--line); font-weight: 600; font-size: .95em; } .sc-chips i:first-child { background: var(--brand); border-color: var(--brand); color: #fff; } .sc1-publish { display: flex; align-items: center; gap: .7em; margin-top: 1.3em; font-weight: 700; } .sc-toggle { position: relative; width: 2.8em; height: 1.6em; border-radius: 99em; background: var(--mint); } .sc-toggle::after { content: ""; position: absolute; top: .2em; left: 1.4em; width: 1.2em; height: 1.2em; border-radius: 50%; background: #fff; } .sc-url { margin-left: auto; padding: .35em .8em; border-radius: 99em; background: var(--mint-soft); color: #0B7A5F; font-weight: 600; font-size: .9em; } @keyframes sc-drop { from { opacity: 0; transform: translateX(-4em) scale(.96); } to { opacity: 1; transform: none; } } @keyframes sc-flash { 0%, 100% { background: #fff; border-color: #C9BDF7; } 30% { background: var(--soft); border-color: var(--brand); color: var(--brand); } } @keyframes sc-in { from { opacity: 0; transform: translateY(1.2em); } to { opacity: 1; transform: none; } } @keyframes sc-pop { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } } @keyframes sc-out { from { opacity: 1; } to { opacity: 0; } } @keyframes sc-knob { from { left: .2em; } to { left: 1.4em; } } @keyframes sc-toggle-bg { from { background: #D9D2F5; } to { background: var(--mint); } } .fx-anim .sc1.is-on .sc1-canvas { animation: sc-in .6s var(--ease-out) both; } .fx-anim .sc1.is-on .sc-title { animation: sc-in .5s var(--ease-out) .15s both; } .fx-anim .sc1.is-on .sc-field { animation: sc-drop .55s var(--ease-out) both; } .fx-anim .sc1.is-on .f1 { animation-delay: .5s; } .fx-anim .sc1.is-on .f2 { animation-delay: 1.0s; } .fx-anim .sc1.is-on .f3 { animation-delay: 1.5s; } .fx-anim .sc1.is-on .f4 { animation-delay: 2.0s; } .fx-anim .sc1.is-on .sc1-palette span { animation: sc-flash .7s ease both; } .fx-anim .sc1.is-on .sc1-palette span:nth-child(1) { animation-delay: .35s; } .fx-anim .sc1.is-on .sc1-palette span:nth-child(2) { animation-delay: .85s; } .fx-anim .sc1.is-on .sc1-palette span:nth-child(3) { animation-delay: 1.35s; } .fx-anim .sc1.is-on .sc1-palette span:nth-child(4) { animation-delay: 1.85s; } .fx-anim .sc1.is-on .sc1-publish { animation: sc-in .5s var(--ease-out) 2.5s both; } .fx-anim .sc1.is-on .sc-toggle { animation: sc-toggle-bg .3s ease 3.0s both; } .fx-anim .sc1.is-on .sc-toggle::after { animation: sc-knob .3s var(--ease-out) 3.0s both; } .fx-anim .sc1.is-on .sc-url { animation: sc-pop .5s var(--ease-spring) 3.3s both; } /* 2 register and pay */ .sc2-tickets { display: flex; flex-direction: column; gap: 1em; width: 16em; } .sc-ticket { position: relative; padding: 1.2em 1.4em; border: 2px solid transparent; } .sc-ticket em { display: block; font-weight: 600; } .sc-ticket strong { display: block; font: 750 2em/1.1 var(--display); letter-spacing: -0.02em; margin: .15em 0; } .sc-ticket small { color: var(--muted); font-size: .9em; } .sc-ticket.t1 { border-color: var(--brand); box-shadow: 0 0 0 .3em rgba(81,43,212,.12), 0 1.2em 2.6em -1em rgba(42,26,122,.2); } .sc2-summary { width: 24em; padding: 1.8em; } .sc-price s { color: var(--muted); margin-right: .6em; } .sc-price b { color: var(--ink); } .sc-coupon { display: flex; align-items: center; justify-content: space-between; margin: .8em 0; padding: .6em .9em; border: 1.5px dashed #C9BDF7; border-radius: .6em; } .sc-typed { font-weight: 700; letter-spacing: .06em; color: var(--brand); } .sc-coupon em { color: #0B7A5F; font-weight: 600; font-size: .95em; } .sc-pay { position: relative; display: grid; place-items: center; height: 3.2em; margin-top: 1.2em; border-radius: .8em; background: var(--mint); color: #fff; font-weight: 700; overflow: hidden; } .sc-pay > * { grid-area: 1 / 1; } .sc-pay-label { opacity: 0; } .sc-spin { width: 1.3em; height: 1.3em; border-radius: 50%; border: .2em solid rgba(255,255,255,.35); border-top-color: #fff; opacity: 0; } .sc-paid { display: flex; align-items: center; gap: .5em; } .sc-paid::before { content: ""; width: 1.2em; height: 1.2em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; } .sc-gw { display: flex; justify-content: center; gap: .6em; margin-top: 1em; } .sc-gw i { font-style: normal; font-size: .85em; color: var(--muted); padding: .25em .7em; border: 1px solid var(--line); border-radius: 99em; } @keyframes sc-select { from { border-color: transparent; box-shadow: 0 .1em .2em rgba(42,26,122,.06), 0 1.2em 2.6em -1em rgba(42,26,122,.2); } to { border-color: var(--brand); box-shadow: 0 0 0 .3em rgba(81,43,212,.12), 0 1.2em 2.6em -1em rgba(42,26,122,.2); } } @keyframes sc-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } } @keyframes sc-pay-bg { from { background: var(--ink); } to { background: var(--mint); } } @keyframes sc-press { 0%, 100% { transform: none; } 50% { transform: scale(.95); } } @keyframes sc-spin { to { transform: rotate(1turn); } } @keyframes sc-spin-life { 0% { opacity: 0; } 5%, 95% { opacity: 1; } 100% { opacity: 0; } } .fx-anim .sc2.is-on .sc-ticket { animation: sc-in .5s var(--ease-out) both; } .fx-anim .sc2.is-on .t2 { animation-delay: .15s; } .fx-anim .sc2.is-on .t1 { animation: sc-in .5s var(--ease-out) both, sc-select .35s ease 1.0s both; } .fx-anim .sc2.is-on .sc2-summary { animation: sc-in .6s var(--ease-out) .5s both; } .fx-anim .sc2.is-on .sc-typed { animation: sc-type .8s steps(7, end) 1.5s both; } .fx-anim .sc2.is-on .sc-coupon em { animation: sc-in .4s var(--ease-out) 2.35s both; } .fx-anim .sc2.is-on .sc-price s { animation: sc-in .3s ease 2.5s both; } .fx-anim .sc2.is-on .sc-price b { animation: sc-pop .45s var(--ease-spring) 2.6s both; } .fx-anim .sc2.is-on .sc-pay { animation: sc-pay-bg .3s ease 4.0s both, sc-press .3s ease 3.2s both; } .fx-anim .sc2.is-on .sc-pay-label { animation: sc-out .2s ease 3.35s both; } .fx-anim .sc2.is-on .sc-spin { animation: sc-spin .7s linear infinite, sc-spin-life .7s linear 3.35s both; } .fx-anim .sc2.is-on .sc-paid { animation: sc-pop .45s var(--ease-spring) 4.05s both; } /* 3 confirm and invoice */ .sc3-invoice { width: 22em; padding: 1.8em; transform: rotate(-2.5deg); } .sc-inv-no { display: block; font-size: .95em; margin: -.5em 0 .8em; } .sc-total { border-bottom: 0; font: 700 1.15em/1.4 var(--display); } .sc3-mail { width: 24em; padding: 1.6em; margin-top: 4em; } .sc-mail-head { display: flex; gap: .9em; align-items: center; } .sc-mail-head b { display: block; font-size: 1.05em; line-height: 1.25; } .sc-mail-head em { font-size: .9em; } .sc-av { width: 2.6em; height: 2.6em; flex: none; border-radius: 50%; background: linear-gradient(135deg, var(--iris), var(--brand)); } .sc-mail-lines { margin: 1.2em 0; display: grid; gap: .55em; } .sc-mail-lines i { display: block; height: .6em; border-radius: 1em; background: var(--soft); transform-origin: left; } .sc-mail-lines i:nth-child(2) { width: 82%; } .sc-mail-lines i:nth-child(3) { width: 60%; } .sc-attach { display: flex; gap: .6em; } .sc-attach span { padding: .45em .9em; border-radius: .6em; background: var(--mist); border: 1px solid var(--line); font-weight: 600; font-size: .9em; } .sc-attach span:first-child { background: var(--mint-soft); border-color: #BFE8DA; color: #0B7A5F; } @keyframes sc-drop-rot { from { opacity: 0; transform: translateY(-3em) rotate(-8deg); } to { opacity: 1; transform: rotate(-2.5deg); } } @keyframes sc-slide-l { from { opacity: 0; transform: translateX(5em); } to { opacity: 1; transform: none; } } @keyframes sc-grow-x { from { transform: scaleX(0); } to { transform: none; } } .fx-anim .sc3.is-on .sc3-invoice { animation: sc-drop-rot .7s var(--ease-out) .1s both; } .fx-anim .sc3.is-on .sc3-invoice .sc-row { animation: sc-in .4s var(--ease-out) both; } .fx-anim .sc3.is-on .r1 { animation-delay: .6s !important; } .fx-anim .sc3.is-on .r2 { animation-delay: .8s !important; } .fx-anim .sc3.is-on .r3 { animation-delay: 1.0s !important; } .fx-anim .sc3.is-on .r4 { animation-delay: 1.3s !important; } .fx-anim .sc3.is-on .sc3-mail { animation: sc-slide-l .7s var(--ease-out) 1.8s both; } .fx-anim .sc3.is-on .sc-mail-lines i { animation: sc-grow-x .6s var(--ease-out) 2.3s both; } .fx-anim .sc3.is-on .sc-mail-lines i:nth-child(2) { animation-delay: 2.4s; } .fx-anim .sc3.is-on .sc-mail-lines i:nth-child(3) { animation-delay: 2.5s; } .fx-anim .sc3.is-on .sc-attach span { animation: sc-pop .45s var(--ease-spring) 2.9s both; } .fx-anim .sc3.is-on .sc-attach span:last-child { animation-delay: 3.1s; } /* 4 print */ .sc4-queue { width: 22em; padding: 1.8em; } .sc-q { display: flex; justify-content: space-between; align-items: center; padding: .7em 0; border-bottom: 1px solid var(--line); font-weight: 600; } .sc-q:last-child { border-bottom: 0; } .sc-q em { display: grid; font-size: .9em; } .sc-q em i { grid-area: 1 / 1; font-style: normal; text-align: right; } .sc-q .on { opacity: 0; } .sc-q .done { color: #0B7A5F; } .sc-q.q2 .on, .sc-q.q3 .on { opacity: 1; } .sc4-printer { position: relative; width: 17em; height: 26em; } .sc-printer-body { position: absolute; top: 0; left: 0; right: 0; height: 6em; z-index: 2; border-radius: 1.2em; background: linear-gradient(180deg, #2A2458, var(--ink)); box-shadow: 0 1.4em 2.4em -1.2em rgba(22, 18, 58, .6); } .sc-slot { position: absolute; left: 1.6em; right: 1.6em; bottom: 1.1em; height: .5em; border-radius: 1em; background: #0A0820; } .sc-led { position: absolute; right: 1.4em; top: 1.3em; width: .7em; height: .7em; border-radius: 50%; background: var(--mint); box-shadow: 0 0 .8em var(--mint); } .sc-paper { position: absolute; top: 5.3em; left: 2.3em; right: 2.3em; bottom: 0; overflow: hidden; } .sc-mini-pass { height: 100%; border-radius: 0 0 1em 1em; background: #fff; text-align: center; padding-top: 3.8em; position: relative; box-shadow: 0 1em 2em -1em rgba(42,26,122,.3); } .sc-mini-pass .h { position: absolute; top: 0; left: 0; right: 0; height: 2.6em; background: linear-gradient(135deg, #5B34E0, #4222B8); } .sc-mini-pass b { display: block; font: 750 1.4em/1.1 var(--display); letter-spacing: -0.02em; } .sc-mini-pass small { display: inline-block; margin-top: .5em; padding: .2em .8em; border-radius: 99em; background: var(--soft); color: var(--brand); font-weight: 700; } .sc-mini-pass .q { display: block; width: 6em; height: 6em; margin: 1.1em auto 0; } .sc-mini-pass .q svg { width: 100%; height: 100%; fill: var(--ink); } .sc-mini-pass .q .fd-in { fill: #fff; } @keyframes sc-feed { from { transform: translateY(-100%); } to { transform: none; } } @keyframes sc-blink { 0%, 100% { opacity: 1; } 50% { opacity: .2; } } .fx-anim .sc4.is-on .sc4-queue { animation: sc-in .5s var(--ease-out) both; } .fx-anim .sc4.is-on .sc-printer-body { animation: sc-in .5s var(--ease-out) .15s both; } .fx-anim .sc4.is-on .sc-mini-pass { animation: sc-feed 1.9s cubic-bezier(.45, 0, .2, 1) .9s both; } .fx-anim .sc4.is-on .sc-led { animation: sc-blink .35s linear .9s 6; } .fx-anim .sc4.is-on .sc-q.q1 .on { animation: sc-out .2s ease 2.75s both; } .fx-anim .sc4.is-on .sc-q.q1 .done { animation: sc-pop .45s var(--ease-spring) 2.9s both; } .fx-anim .sc4.is-on .sc-q.q2 .on { animation: sc-in .4s var(--ease-out) .5s both; } /* 5 check in */ .sc5-phone { width: 16em; padding: 1em; border-radius: 2em; background: var(--ink); box-shadow: 0 1.6em 3em -1.4em rgba(22, 18, 58, .7); } .sc-cam { position: relative; aspect-ratio: 1; border-radius: 1.3em; background: #231D4F; overflow: hidden; display: grid; place-items: center; } .sc-qr { width: 55%; padding: .7em; border-radius: .6em; background: #fff; } .sc-qr svg { width: 100%; height: 100%; fill: var(--ink); } .sc-qr .fd-in { fill: #fff; } .sc-corners { position: absolute; inset: 14%; } .sc-sweep { position: absolute; left: 12%; right: 12%; top: 50%; height: .25em; border-radius: 1em; background: var(--mint); box-shadow: 0 0 1em var(--mint); opacity: 0; } .sc-verdict { display: flex; align-items: center; gap: .8em; margin-top: 1em; padding: .9em 1em; border-radius: 1.1em; background: var(--mint); color: #fff; } .sc-verdict .fx-tick { width: 2.3em; height: 2.3em; background-color: rgba(255,255,255,.2); } .sc-verdict b { display: block; font-size: 1.1em; } .sc-verdict em { color: rgba(255,255,255,.85); font-size: .9em; } .sc5-count { width: 20em; padding: 1.8em; } .sc-odo { position: relative; display: block; height: 1.1em; overflow: hidden; font: 750 3.4em/1.1 var(--display); letter-spacing: -0.03em; margin: .1em 0 .4em; } .sc-odo span { display: block; } .sc-odo .a { position: absolute; transform: translateY(-110%); } .sc-hist { display: flex; align-items: flex-end; gap: .45em; height: 6em; } .sc-hist i { flex: 1; height: calc(var(--h) * 100%); border-radius: .3em .3em .1em .1em; background: var(--iris); opacity: .5; transform-origin: bottom; } .sc-hist i:nth-child(5) { background: var(--brand); opacity: 1; } @keyframes sc-show { from { opacity: 0; transform: translate(3em, 4em) rotate(8deg) scale(.9); } to { opacity: 1; transform: none; } } @keyframes sc-scan { 0% { opacity: 0; transform: translateY(-5em); } 15%, 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(5em); } } @keyframes sc-odo-out { from { transform: none; } to { transform: translateY(-110%); } } @keyframes sc-odo-in { from { transform: translateY(110%); } to { transform: none; } } @keyframes sc-grow-y { from { transform: scaleY(0); } to { transform: none; } } .fx-anim .sc5.is-on .sc5-phone { animation: sc-in .5s var(--ease-out) both; } .fx-anim .sc5.is-on .sc-qr { animation: sc-show .8s var(--ease-out) .35s both; } .fx-anim .sc5.is-on .sc-corners { animation: fx-frame .4s var(--ease-out) 1.2s both; } .fx-anim .sc5.is-on .sc-sweep { animation: sc-scan .9s ease-in-out 1.45s both; } .fx-anim .sc5.is-on .sc-verdict { animation: sc-in .5s var(--ease-spring) 2.45s both; } .fx-anim .sc5.is-on .sc5-count { animation: sc-in .5s var(--ease-out) .2s both; } .fx-anim .sc5.is-on .sc-odo .a { animation: sc-odo-out .45s var(--ease-out) 2.7s both; } .fx-anim .sc5.is-on .sc-odo .b { animation: sc-odo-in .45s var(--ease-out) 2.7s both; } .fx-anim .sc5.is-on .sc-hist i { animation: sc-grow-y .6s var(--ease-out) .5s both; } /* 6 connect and measure */ .sc6-net { position: relative; width: 24em; height: 26em; } .sc-person { position: absolute; display: flex; align-items: center; gap: .9em; padding: 1em 1.4em 1em 1em; width: 14em; } .sc-person b { display: block; font: 700 1.2em/1.2 var(--display); } .sc-person em { font-size: .95em; } .sc-person.p1 { left: 0; top: 1em; } .sc-person.p2 { right: 0; bottom: 1em; } .sc-person.p2 .sc-av { background: linear-gradient(135deg, var(--brand), var(--ink)); } .sc-link { position: absolute; left: 4em; top: 5em; width: 14em; height: 16em; overflow: visible; } .sc-link path { fill: none; stroke: var(--brand); stroke-width: 1.4; stroke-linecap: round; } .sc-meet { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: .6em; padding: .6em 1.2em .6em .6em; border-radius: 99em; font-weight: 700; white-space: nowrap; } .sc-meet .fx-tick { width: 2em; height: 2em; } .sc6-dash { width: 22em; padding: 1.8em; } .sc-kpis { display: flex; gap: 2em; margin-bottom: 1em; } .sc-kpis em { display: block; font-size: .9em; } .sc-kpis b { font: 750 1.9em/1.1 var(--display); letter-spacing: -0.02em; } .sc-bars { display: flex; align-items: flex-end; gap: .4em; height: 8em; border-bottom: 1px solid var(--line); } .sc-bars i { flex: 1; height: calc(var(--h) * 100%); border-radius: .3em .3em 0 0; background: linear-gradient(180deg, var(--iris), var(--brand)); transform-origin: bottom; } @keyframes sc-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } } @keyframes sc-meet-in { from { opacity: 0; transform: translate(-50%, -50%) scale(.6); } to { opacity: 1; transform: translate(-50%, -50%); } } .fx-anim .sc6.is-on .p1 { animation: sc-pop .5s var(--ease-spring) .15s both; } .fx-anim .sc6.is-on .p2 { animation: sc-pop .5s var(--ease-spring) .4s both; } .fx-anim .sc6.is-on .sc-link path { stroke-dasharray: 1; animation: sc-draw 1s var(--ease-out) .8s both; } .fx-anim .sc6.is-on .sc-meet { animation: sc-meet-in .5s var(--ease-spring) 1.8s both; } .fx-anim .sc6.is-on .sc6-dash { animation: sc-in .6s var(--ease-out) 2.2s both; } .fx-anim .sc6.is-on .sc-bars i { animation: sc-grow-y .6s var(--ease-out) calc(2.5s + var(--i) * 60ms) both; } /* steps rail */ .fx-wt-side { position: relative; } .fx-wt-steps { list-style: none; margin: 0; padding: 0; counter-reset: none; } .fx-wt-step { position: relative; padding: 16px 0 18px 0; border-bottom: 1px solid var(--line); } .fx-wt-btn { display: flex; align-items: center; gap: 14px; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; font: 700 18px/1.25 var(--display); letter-spacing: -0.01em; color: var(--ink-2); min-height: 44px; } .fx-wt-num { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--line); font: 700 14px/1 var(--body); color: var(--muted); transition: background-color .3s, color .3s, border-color .3s; } .fx-wt-text { margin: 6px 0 0 48px; color: var(--ink-2); font-size: 15px; line-height: 1.55; } .fx-wt-step.is-active .fx-wt-btn { color: var(--ink); } .fx-wt-step.is-active .fx-wt-num { background: var(--brand); border-color: var(--brand); color: #fff; } .fx-wt-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; overflow: hidden; } .fx-wt-progress i { display: block; height: 100%; background: var(--brand); transform: scaleX(0); transform-origin: left; } .fx-wt-step.is-active .fx-wt-progress i { transform: none; } @keyframes fx-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } } .fx-anim .fx-wt-step.is-active .fx-wt-progress i { animation: fx-progress var(--dur, 5.4s) linear both; } .fx-anim .fx-wt-step:not(.is-active) .fx-wt-text { color: var(--muted); } .fx-wt-toggle { display: inline-flex; align-items: center; gap: 10px; margin-top: 20px; min-height: 44px; padding: 0 16px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font: 600 14px/1 var(--body); cursor: pointer; } .fx-wt-toggle:hover { border-color: #CFC4F7; color: var(--brand); } .fx-wt-toggle svg { width: 14px; height: 14px; fill: currentColor; } .fx-wt-toggle .i-play { display: none; } .fx-wt-toggle[aria-pressed="true"] .i-play { display: block; } .fx-wt-toggle[aria-pressed="true"] .i-pause { display: none; } .fx-wt.is-paused *, .fx-wt.is-paused *::before, .fx-wt.is-paused *::after { animation-play-state: paused !important; } @media (max-width: 960px) { .fx-wt { grid-template-columns: 1fr; } .fx-wt-stage { position: relative; top: 0; } } @container (max-width: 620px) { .fx-scenes { aspect-ratio: 4 / 4.6; font-size: 2.55cqi; } .fx-scene { flex-direction: column; gap: 1.4em; padding: 2em 1.6em; } .sc1-palette { flex-direction: row; flex-wrap: wrap; justify-content: center; } .sc1-canvas, .sc2-summary, .sc3-invoice, .sc3-mail, .sc4-queue, .sc5-count, .sc6-dash { width: 100%; } .sc2-tickets { flex-direction: row; width: 100%; } .sc-ticket { flex: 1; } .sc3-mail { margin-top: 0; } .sc4-printer { width: 13em; height: 17em; } .sc4-queue { order: 2; } .sc5-phone { width: 13em; } .sc5-count { padding: 1.2em; } .sc-hist { height: 3.5em; } .sc6-net { width: 100%; height: 14em; } .sc-link { left: 25%; top: 3.6em; width: 50%; height: 7em; } .sc3-invoice .sc-row.r2, .sc3-invoice .sc-row.r3 { display: none; } } /* ---------------------------------------------------------------- features */ .fx-feat { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 72px); } .fx-feat-art { position: relative; } .fx-feat-frame { position: sticky; top: 100px; aspect-ratio: 4 / 3; border-radius: var(--r-lg); overflow: hidden; background: var(--mist); box-shadow: var(--shadow-2); border: 1px solid #fff; } .fx-feat-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity .7s var(--ease-out), transform 1.2s var(--ease-out), clip-path .9s var(--ease-out); clip-path: inset(0 0 0 0 round var(--r-lg)); } .fx-feat-img.is-on { opacity: 1; transform: none; } .fx-anim .fx-feat-img:not(.is-on) { clip-path: inset(12% 12% 12% 12% round var(--r-lg)); } .fx-group { padding: 8px 0 clamp(56px, 12vh, 120px); border-top: 1px solid var(--line); } .fx-group:first-child { border-top: 0; padding-top: 0; } .fx-group-fig { display: none; margin: 0 0 24px; } .fx-group-fig img { width: 100%; height: auto; border-radius: var(--r-md); box-shadow: var(--shadow-1); } .fx-group .fx-h3 { position: relative; padding-top: 28px; transition: color .4s; } .fx-group:first-child .fx-h3 { padding-top: 0; } .fx-group.is-active .fx-h3 { color: var(--brand); } .fx-group-intro { margin-top: 10px; color: var(--ink-2); font-size: 1.05rem; } .fx-items { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 14px; } .fx-items li { position: relative; padding-left: 28px; color: var(--ink-2); font-size: 16px; line-height: 1.55; } .fx-items li::before { content: ""; position: absolute; left: 0; top: .5em; width: 12px; height: 12px; border-radius: 4px; background: var(--soft); border: 2px solid var(--iris); transition: background-color .4s, border-color .4s; } .fx-group.is-active .fx-items li::before { background: var(--brand); border-color: var(--brand); } .fx-items strong { color: var(--ink); font-weight: 650; } @media (max-width: 900px) { .fx-feat { grid-template-columns: 1fr; } .fx-feat-art { display: none; } .fx-group-fig { display: block; } .fx-group .fx-h3, .fx-group:first-child .fx-h3 { padding-top: 0; } .fx-group { padding-top: 40px; } .fx-group:first-child { padding-top: 0; } } /* ---------------------------------------------------------------- india */ .fx-india { background: var(--ink); color: #fff; overflow: hidden; isolation: isolate; } .fx-india::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(circle at 1px 1px, rgba(140,116,242,.35) 1px, transparent 1.3px); background-size: 24px 24px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%); mask-image: linear-gradient(90deg, transparent, #000 60%); } .fx-india .fx-h2 { color: #fff; } .fx-india-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: start; } .fx-india-list { margin: 0; display: grid; gap: 0; } .fx-india-list div { padding: 24px 0; border-top: 1px solid rgba(255,255,255,.14); } .fx-india-list div:first-child { border-top: 0; padding-top: 0; } .fx-india-list dt { font: 700 1.3rem/1.25 var(--display); letter-spacing: -0.015em; } .fx-india-list dd { margin: 8px 0 0; color: #C9C4E8; max-width: 56ch; } .fx-india-list a { color: #fff; text-decoration-color: rgba(201, 189, 255, .6); } .fx-india-list a:hover { color: #C9BDFF; } @media (max-width: 860px) { .fx-india-grid { grid-template-columns: 1fr; } } /* ---------------------------------------------------------------- faq */ .fx-faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: start; } .fx-faq-grid > div:first-child { position: sticky; top: 110px; } .fx-faq { border-top: 1px solid var(--line); } .fx-qa { border-bottom: 1px solid var(--line); interpolate-size: allow-keywords; } .fx-qa summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; cursor: pointer; list-style: none; min-height: 44px; } .fx-qa summary::-webkit-details-marker { display: none; } .fx-q { margin: 0; font: 650 1.15rem/1.35 var(--display); letter-spacing: -0.01em; color: var(--ink); transition: color .2s; } .fx-qa summary:hover .fx-q { color: var(--brand); } .fx-qa-icon { position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--line); transition: transform .35s var(--ease-out), background-color .25s, border-color .25s; } .fx-qa-icon::before, .fx-qa-icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 2px; background: var(--ink); transition: transform .35s var(--ease-out), background-color .25s; } .fx-qa-icon::after { transform: rotate(90deg); } .fx-qa[open] .fx-qa-icon { transform: rotate(180deg); background: var(--brand); border-color: var(--brand); } .fx-qa[open] .fx-qa-icon::before, .fx-qa[open] .fx-qa-icon::after { background: #fff; } .fx-qa[open] .fx-qa-icon::after { transform: rotate(0); } .fx-qa::details-content { height: 0; overflow: clip; transition: height .4s var(--ease-out), content-visibility .4s allow-discrete; } .fx-qa[open]::details-content { height: auto; } .fx-a { padding: 0 52px 24px 0; color: var(--ink-2); } @media (max-width: 860px) { .fx-faq-grid { grid-template-columns: 1fr; } .fx-faq-grid > div:first-child { position: static; } .fx-a { padding-right: 0; } } /* ---------------------------------------------------------------- demo */ .fx-demo-section { background: var(--paper); border-top: 1px solid var(--line); overflow: hidden; isolation: isolate; } .fx-demo-section::after { content: ""; position: absolute; z-index: -1; width: 800px; height: 800px; left: -300px; bottom: -420px; background: radial-gradient(closest-side, rgba(140, 116, 242, .22), transparent); } .fx-demo-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 88px); align-items: start; } .fx-signin { margin-top: 28px; color: var(--ink-2); } .fx-signin a { font-weight: 600; } .fx-form { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(20px, 3.4vw, 36px); box-shadow: var(--shadow-2); display: grid; gap: 6px; } .fx-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; } .fx-field { display: grid; gap: 6px; min-width: 0; border: 0; padding: 0; margin: 0; } .fx-field label, .fx-field legend { font-weight: 600; font-size: 14.5px; color: var(--ink); padding: 0; } .fx-opt { font-weight: 400; color: var(--muted); } .fx-field input, .fx-field textarea { width: 100%; min-height: 48px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; font: 16px/1.4 var(--body); color: var(--ink); transition: border-color .2s, box-shadow .2s; } .fx-field textarea { resize: vertical; min-height: 96px; } .fx-field input::placeholder, .fx-field textarea::placeholder { color: #8C87AE; } .fx-field input:hover, .fx-field textarea:hover { border-color: #CFC4F7; } .fx-field input:focus, .fx-field textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(81, 43, 212, .14); } .fx-field [aria-invalid="true"] { border-color: #C62F4B; } .fx-err { min-height: 20px; font-size: 13.5px; color: #B4233F; } .fx-band-opts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; } .fx-band { position: relative; cursor: pointer; } .fx-band input { position: absolute; opacity: 0; width: 1px; height: 1px; } .fx-band span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--line); font-size: 14.5px; font-weight: 500; color: var(--ink-2); transition: background-color .2s, color .2s, border-color .2s; } .fx-band:hover span { border-color: #CFC4F7; } .fx-band input:checked + span { background: var(--brand); border-color: var(--brand); color: #fff; } .fx-band input:focus-visible + span { outline: 3px solid var(--iris); outline-offset: 2px; } .fx-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .fx-form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 8px; } .fx-submit { position: relative; } .fx-submit-spin { display: none; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.35); border-top-color: #fff; animation: sc-spin .7s linear infinite; } .fx-submit[aria-busy="true"] .fx-submit-spin { display: block; } .fx-submit[aria-busy="true"] { pointer-events: none; opacity: .85; } .fx-form-status { font-size: 15px; color: var(--ink-2); } .fx-form-status[data-kind="ok"] { color: #0B7A5F; font-weight: 600; } .fx-form-status[data-kind="error"] { color: #B4233F; } .fx-form.is-sent .fx-field, .fx-form.is-sent .fx-form-row, .fx-form.is-sent .fx-submit { display: none; } .fx-sent { display: none; text-align: center; padding: 32px 8px; } .fx-form.is-sent .fx-sent { display: block; } .fx-sent .fx-tick { width: 64px; height: 64px; margin: 0 auto 18px; } .fx-sent h3 { margin: 0 0 8px; font: 700 1.5rem/1.2 var(--display); } .fx-sent p { color: var(--ink-2); } .fx-anim .fx-form.is-sent .fx-tick { animation: fx-pop .6s var(--ease-spring) both; } .fx-noscript { color: var(--ink-2); font-size: 14px; } @media (max-width: 900px) { .fx-demo-grid { grid-template-columns: 1fr; } } @media (max-width: 560px) { .fx-form-row { grid-template-columns: 1fr; } } /* ---------------------------------------------------------------- footer */ .fx-footer { padding: 48px 0 40px; background: var(--mist); border-top: 1px solid var(--line); } .fx-footer-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: start; } .fx-footer-brand img { width: 108px; height: auto; mix-blend-mode: multiply; } .fx-footer-brand p { margin-top: 12px; color: var(--ink-2); font-size: 14.5px; max-width: 46ch; } .fx-footer-links { display: grid; grid-template-columns: repeat(2, auto); gap: 4px 32px; } .fx-footer-links a { color: var(--ink-2); text-decoration: none; font-size: 14.5px; padding: 6px 0; } .fx-footer-links a:hover { color: var(--brand); } .fx-copy { grid-column: 1 / -1; color: var(--muted); font-size: 13.5px; padding-top: 20px; border-top: 1px solid var(--line); } @media (max-width: 640px) { .fx-footer-grid { grid-template-columns: 1fr; } }