/* ============================================================ CARDIER · Website stylesheet — v2 (elevated) Midnight-dominant editorial fintech. Real device renders, real card art, film grain, gold anchor. Warm-paper interludes. ============================================================ */ :root { --bg: #04060C; /* page base — deepest midnight */ --bg-1: #070B14; /* raised */ --bg-2: #0B1120; /* card */ --bg-3: #0F1626; --line: rgba(255,255,255,0.08); --line-2: rgba(255,255,255,0.14); --ink: #F2F3F8; --ink-2: rgba(242,243,248,0.64); --ink-3: rgba(242,243,248,0.60); --ink-4: rgba(242,243,248,0.30); --gold: #D4AF7A; --gold-deep: #B8924A; --gold-soft: rgba(212,175,122,0.16); --accent: #5B8DEF; --accent-soft: rgba(91,141,239,0.16); --sage: #6FBF8A; --amber: #E4A752; --urgent: #E66B5C; /* paper interlude */ --paper: #F4F2EC; --paper-2: #E8E4DA; --paper-ink: #0B1020; --paper-ink-2: rgba(11,16,32,0.62); --paper-ink-3: rgba(11,16,32,0.40); --paper-line: rgba(11,16,32,0.12); --paper-gold: #9C7637; --font-display: "Instrument Serif", "Cormorant Garamond", Georgia, serif; --font-sans: "Inter Tight", "Inter", -apple-system, system-ui, sans-serif; --font-mono: "JetBrains Mono", "SF Mono", Menlo, monospace; --maxw: 1240px; --pad: clamp(22px, 5vw, 72px); --ease: cubic-bezier(.22,1,.36,1); /* Elevation — for raised cards, sticky surfaces, modals */ --elev-1: 0 1px 2px rgba(0,0,0,0.18); --elev-2: 0 4px 12px rgba(0,0,0,0.24); --elev-3: 0 12px 28px -8px rgba(0,0,0,0.42); --elev-4: 0 28px 56px -16px rgba(0,0,0,0.55); /* Animation timing */ --dur-micro: 150ms; --dur-std: 250ms; --dur-emph: 350ms; --ease-out: cubic-bezier(0.215, 0.61, 0.355, 1); --ease-io: cubic-bezier(0.455, 0.03, 0.515, 0.955); /* Spacing scale — 8px base, named for use alongside existing ad-hoc spacing */ --sp-xs: 4px; --sp-sm: 8px; --sp-md: 16px; --sp-lg: 24px; --sp-xl: 32px; --sp-2xl: 48px; --sp-3xl: 64px; /* Elevation spec — Section 4 foundation */ --bg-0: #05080F; /* deepest — hero, footer */ /* --bg-1: #070B14 alias exists as --bg-1 above */ /* Type scale — Section 4 spec */ --text-hero: clamp(3rem, 8vw, 6.5rem); --text-h2: clamp(2rem, 5vw, 3.5rem); --text-h3: clamp(1.4rem, 3vw, 2rem); --text-body-lg: 1.25rem; --text-body: 1rem; --text-mono: 0.8125rem; /* Signature easing — expo out (polish standard) */ --ease-expo: cubic-bezier(0.16, 1, 0.3, 1); /* Section rhythm */ --section-py: clamp(96px, 12vw, 160px); --prose-w: 65ch; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-sans); font-feature-settings: "ss01","cv11"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* IMPORTANT: overflow-x: hidden on silently breaks position:sticky for all descendants in Chromium (any descendant sticky becomes a stationary scroll — see #story phone in 'What Cardier watches'). 'overflow-x: clip' prevents horizontal scrollbars WITHOUT creating a scroll container, so sticky continues to work. Fallback stays for Safari < 16 which doesn't understand 'clip' — 'clip' wins where supported. If you re-introduce 'hidden' alone, retest sticky everywhere. */ overflow-x: hidden; /* Safari < 16 fallback */ overflow-x: clip; /* sticky-safe modern browsers */ } /* film grain — premium texture across everything (Section 4 spec: 2%, fixed, pointer-events none) */ body::after { content: ""; position: fixed; inset: 0; z-index: 9000; pointer-events: none; opacity: 0.02; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ::selection { background: rgba(212,175,122,0.34); color: #fff; } /* ---------- type ---------- */ .eyebrow { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; } .display { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.012em; line-height: 1.02; } .num { font-family: var(--font-mono); font-feature-settings: "tnum","zero"; letter-spacing: -0.02em; } h1,h2,h3,h4 { margin: 0; font-weight: 400; } p { margin: 0; } /* ---------- layout ---------- */ .wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); } .section { position: relative; padding: clamp(84px,12vw,168px) 0; } .sec-dark { background: var(--bg); } .sec-raise { background: var(--bg-1); position: relative; } .sec-raise::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(212,175,122,0.18) 38%, rgba(212,175,122,0.18) 62%, transparent); pointer-events: none; z-index: 1; } .sec-raise::after { content: ""; position: absolute; top: 0; right: 0; width: 60%; height: 280px; background: radial-gradient(ellipse at 80% 0%, rgba(212,175,122,0.04), transparent 70%); pointer-events: none; z-index: 0; } .sec-paper { background: var(--paper); color: var(--paper-ink); position: relative; } .sec-paper::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(156,118,55,0.28) 38%, rgba(156,118,55,0.28) 62%, transparent); pointer-events: none; z-index: 1; } .sec-raise > .wrap, .sec-paper > .wrap { position: relative; z-index: 2; } .divider-fade { height: 1px; background: linear-gradient(90deg, transparent, var(--line-2), transparent); border: 0; margin: 0; } /* ---------- brand ---------- */ .brand { display: inline-flex; align-items: center; gap: 11px; } .sigil { width: 30px; height: 30px; border-radius: 50%; border: 1.4px solid var(--gold); display: grid; place-items: center; font-family: var(--font-display); font-style: italic; font-size: 18px; line-height: 1; color: var(--gold); padding-bottom: 1px; flex: none; } .wordmark { font-weight: 500; font-size: 15px; letter-spacing: 0.36em; text-transform: uppercase; padding-left: 5px; } .brand-logo { height: 30px; width: auto; display: block; flex: none; filter: drop-shadow(0 3px 7px rgba(0,0,0,0.5)); } .footer .brand-logo { height: 34px; } .sec-paper .sigil { border-color: var(--paper-gold); color: var(--paper-gold); } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-family: var(--font-sans); font-size: 14px; font-weight: 500; letter-spacing: 0.01em; padding: 14px 24px; border-radius: 999px; border: 1px solid transparent; cursor: pointer; transition: all .4s var(--ease); white-space: nowrap; } .btn-gold { background: var(--gold); color: #221808; } .btn-gold:hover { background: #E3C281; } .btn-ghost { background: rgba(255,255,255,0.03); color: var(--ink); border-color: var(--line-2); } .btn-ghost:hover { border-color: var(--gold); color: var(--gold); } .sec-paper .btn-ghost { background: transparent; color: var(--paper-ink); border-color: var(--paper-line); } .sec-paper .btn-ghost:hover { border-color: var(--paper-gold); color: var(--paper-gold); } .btn-ink { background: var(--paper-ink); color: var(--paper); } .btn-ink:hover { transform: translateY(-2px); } .btn-lg { padding: 17px 30px; font-size: 15px; } .btn-sm { padding: 9px 16px; font-size: 13px; gap: 6px; } .btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; pointer-events: none; } .btn .btn-spinner { width: 14px; height: 14px; border: 1.6px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: btn-spin .8s linear infinite; flex: none; } @keyframes btn-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .btn .btn-spinner { animation: none; opacity: 0.6; } } /* app-store badges */ .badges { display: flex; gap: 12px; flex-wrap: wrap; } .store-badge { display: inline-flex; align-items: center; gap: 12px; padding: 11px 19px 11px 16px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(255,255,255,0.04); transition: all .4s var(--ease); } .store-badge:hover { border-color: var(--gold); background: rgba(255,255,255,0.07); transform: translateY(-2px); } .store-badge svg { width: 23px; height: 23px; flex: none; } .store-badge .sb-top { font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); line-height: 1.2; } .store-badge .sb-main { font-size: 16px; font-weight: 600; line-height: 1.15; } /* ---------- nav ---------- */ .nav { position: fixed; inset: 0 0 auto 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; gap: clamp(40px,5vw,64px); padding: 20px var(--pad); border-bottom: 1px solid transparent; transition: background .35s var(--ease), backdrop-filter .35s var(--ease), border-bottom-color .35s var(--ease), padding .35s var(--ease), transform .38s var(--ease-expo, cubic-bezier(0.16, 1, 0.3, 1)); } .nav.scrolled { background: rgba(4,6,12,0.7); backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%); border-bottom-color: var(--line); padding-top: 14px; padding-bottom: 14px; } .nav.nav-hidden { transform: translateY(-100%); } @media (prefers-reduced-motion: reduce) { .nav.nav-hidden { transform: none; } } .nav-links { display: flex; gap: 30px; align-items: center; } .nav-links a { font-size: 13.5px; color: var(--ink-2); transition: color .3s; white-space: nowrap; display: inline-flex; align-items: center; min-height: 32px; padding: 4px 0; } .nav-links a:hover { color: var(--ink); } .nav-cta { display: flex; align-items: center; gap: 14px; } @media (max-width: 1024px) { .nav-links { display: none; } } /* ---------- mobile nav ---------- */ .nav-toggle { display: none; } @media (max-width: 1024px) { .nav-cta { display: none; } .nav-toggle { display: inline-flex; flex-direction: column; gap: 5px; align-items: center; justify-content: center; width: 44px; height: 44px; background: rgba(255,255,255,0.03); border: 1px solid var(--line-2); border-radius: 12px; cursor: pointer; } .nav-toggle span { display: block; width: 18px; height: 1.6px; background: var(--ink); border-radius: 2px; transition: transform .35s var(--ease), opacity .25s var(--ease); } .nav-toggle.open span:nth-child(1) { transform: translateY(6.6px) rotate(45deg); } .nav-toggle.open span:nth-child(2) { opacity: 0; } .nav-toggle.open span:nth-child(3) { transform: translateY(-6.6px) rotate(-45deg); } } .mobile-menu { position: fixed; inset: 0; z-index: 99; display: flex; flex-direction: column; justify-content: center; padding: 88px var(--pad) 48px; background: rgba(4,6,12,0.97); backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%); transform: translateY(-12px); opacity: 0; pointer-events: none; transition: opacity .4s var(--ease), transform .5s var(--ease); } .mobile-menu.open { transform: none; opacity: 1; pointer-events: auto; } .mobile-menu .mm-link { font-family: var(--font-display); font-size: clamp(30px,8vw,40px); color: var(--ink); padding: 15px 0; border-bottom: 1px solid var(--line); transition: color .3s; } .mobile-menu .mm-link:hover { color: var(--gold); } .mobile-menu .mm-cta { display: flex; flex-direction: column; gap: 12px; margin-top: 36px; } .mobile-menu .mm-cta .btn { width: 100%; } @media (min-width: 1025px) { .mobile-menu { display: none; } } /* ---------- scroll progress + active nav + type finesse ---------- */ .scroll-prog { position: fixed; top: 0; left: 0; height: 2px; width: 0; z-index: 200; background: linear-gradient(90deg, var(--gold-deep), var(--gold)); box-shadow: 0 0 12px rgba(212,175,122,0.5); pointer-events: none; } .nav-links a.active { color: var(--gold); } .hero h1, .sec-head h2, .feat-text h3, .cta-final h2, .bento-cell h3, .calc-head h2 { text-wrap: balance; } .sec-head .lead, .hero-sub, .feat-text p { text-wrap: pretty; } /* ============================================================ Device frame — modern smartphone mockup Refined frame: single-tone titanium, edge highlights, inner bezel ring, refined island, layered ambient shadow. ============================================================ */ .device { position: relative; width: 300px; aspect-ratio: 390 / 844; flex: none; border-radius: 14% / 6.6%; padding: 1.6%; background: linear-gradient(178deg, #2A2D35 0%, #1A1C24 12%, #1A1C24 88%, #2A2D35 100%); box-shadow: /* top edge highlight (light catching the top metal) */ 0 1px 0 rgba(255,255,255,0.22) inset, /* bottom edge shadow */ 0 -1px 0 rgba(0,0,0,0.45) inset, /* hairline outer edge (the dark seam where the metal frame meets the world) */ 0 0 0 0.5px rgba(0,0,0,0.7), /* layered ambient drop shadows */ 0 2px 4px rgba(0,0,0,0.25), 0 12px 24px -6px rgba(0,0,0,0.30), 0 36px 72px -20px rgba(0,0,0,0.45), 0 80px 140px -32px rgba(0,0,0,0.40); } /* Side-edge highlights on the metal frame — what light does to a real titanium band */ .device::before { content: ""; position: absolute; top: 14%; bottom: 14%; left: 0; right: 0; border-left: 0.5px solid rgba(255,255,255,0.08); border-right: 0.5px solid rgba(255,255,255,0.08); border-radius: inherit; pointer-events: none; z-index: 1; } /* Subtle physical-button indicators on the right edge */ .device::after { content: ""; position: absolute; right: -1px; top: 22%; height: 9%; width: 1.5px; background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.08)); border-radius: 1px 0 0 1px; box-shadow: 0 18% 0 -0.5px rgba(255,255,255,0.10), 0 calc(11% + 28%) 0 -0.5px rgba(255,255,255,0.10); pointer-events: none; z-index: 1; } .device-screen { position: relative; width: 100%; height: 100%; border-radius: 12.4% / 5.85%; overflow: hidden; background: #06080f; /* Inner bezel ring — the dark transition between metal frame and screen glass */ box-shadow: 0 0 0 1px rgba(0,0,0,0.95), 0 0 0 2px rgba(20,22,28,0.6), 0 1px 2px rgba(0,0,0,0.4) inset; } .device-screen img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; } /* Refined glass sheen — asymmetric, with a soft top reflection */ .device-screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(118deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 14%, transparent 32%, transparent 70%, rgba(255,255,255,0.04) 100%), radial-gradient(ellipse 70% 25% at 50% 0%, rgba(255,255,255,0.06), transparent 70%); z-index: 5; } /* Specular sweep — diagonal white gradient strip tracking cursor via --spec-pos */ .device-screen::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 5; background: linear-gradient( 115deg, transparent 0%, transparent 42%, rgba(255, 245, 220, 0.08) 48%, rgba(255, 245, 220, 0.12) 50%, rgba(255, 245, 220, 0.08) 52%, transparent 58%, transparent 100%); background-size: 240% 100%; background-position: var(--spec-pos, 50%) 50%; transition: background-position .4s var(--ease-expo, cubic-bezier(0.16, 1, 0.3, 1)); mix-blend-mode: screen; } @media (prefers-reduced-motion: reduce) { .device-screen::before { transition: none; } } /* Dynamic-island-style notch */ .device .island { position: absolute; top: 2.4%; left: 50%; transform: translateX(-50%); width: 31.5%; height: 3.4%; min-height: 26px; background: #000; border-radius: 999px; z-index: 6; box-shadow: 0 0 0 0.5px rgba(0,0,0,0.6), 0 1px 2px rgba(0,0,0,0.5) inset, 0 -0.5px 1px rgba(255,255,255,0.06) inset; } .device-halo { position: absolute; width: 140%; height: 64%; left: -20%; top: 16%; z-index: -1; background: radial-gradient(ellipse at center, rgba(212,175,122,0.06), transparent 68%); filter: blur(50px); } /* ---------- real card art ---------- */ .cardart { filter: drop-shadow(0 30px 50px rgba(0,0,0,0.55)); border-radius: 12px; } .cc-slot { position: relative; display: block; flex: none; } /* ============================================================ HERO — Signature "screenshot moment" Full-viewport dark. Layered atmosphere. Word-by-word reveal. ============================================================ */ .hero { position: relative; min-height: 100svh; overflow: hidden; display: flex; align-items: center; padding: 132px 0 90px; background: var(--bg-0); isolation: isolate; } /* Layer 2 — breathing gold radial spotlight behind the card */ .hero-glow { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .hero-glow::before { content: ""; position: absolute; width: 800px; height: 800px; top: 50%; right: -80px; transform: translateY(-50%); border-radius: 50%; filter: blur(140px); background: radial-gradient(circle, rgba(212,175,122,0.14), rgba(212,175,122,0.04) 40%, transparent 68%); animation: heroBreath 8s ease-in-out infinite; } @keyframes heroBreath { 0%, 100% { opacity: 0.8; transform: translateY(-50%) scale(0.98); } 50% { opacity: 1; transform: translateY(-50%) scale(1.04); } } @media (prefers-reduced-motion: reduce) { .hero-glow::before { animation: none; opacity: 1; } } /* Layer 4 — subtle grid lines with radial mask fading from center */ .hero-grid-lines { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(to right, rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.03) 1px, transparent 1px); background-size: 80px 80px; -webkit-mask-image: radial-gradient(ellipse 65% 55% at 60% 50%, black 20%, transparent 80%); mask-image: radial-gradient(ellipse 65% 55% at 60% 50%, black 20%, transparent 80%); } .hero .wrap { position: relative; z-index: 2; width: 100%; } .hero-grid { display: grid; grid-template-columns: 3fr 2fr; gap: clamp(30px,5vw,88px); align-items: center; } .hero h1 { font-family: var(--font-display); font-weight: 400; font-size: var(--text-hero); line-height: 0.95; letter-spacing: -0.03em; margin-top: 22px; color: var(--ink); text-wrap: balance; } .hero h1 em { font-style: italic; color: var(--gold); letter-spacing: -0.024em; } .hero-sub { margin-top: 26px; font-size: clamp(16px,1.6vw,19px); line-height: 1.62; color: var(--ink-2); max-width: 460px; } .hero-eyebrow { color: var(--gold); } .hero-actions { margin-top: 38px; display: flex; flex-direction: column; gap: 20px; align-items: flex-start; } .hero-cta-row { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; } /* Hero "Get the app" compact block */ .hero-getapp { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; gap: clamp(18px,2.5vw,32px); align-items: center; flex-wrap: wrap; } .hero-getapp .hga-copy { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-width: 160px; } .hero-getapp .hga-eyebrow { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); } .hero-getapp .hga-tag { font-family: var(--font-display); font-size: 17px; line-height: 1.25; letter-spacing: -0.005em; color: var(--ink); } .hero-getapp .hga-badges { display: flex; gap: 10px; flex-wrap: wrap; } .hero-getapp .hga-badge { display: inline-flex; align-items: center; gap: 10px; padding: 12px 16px 12px 12px; min-height: 48px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(255,255,255,0.03); color: var(--ink); transition: all .3s var(--ease); position: relative; text-decoration: none; } .hero-getapp .hga-badge:hover { border-color: var(--gold-soft); background: rgba(255,255,255,0.05); transform: translateY(-1px); } .hero-getapp .hga-badge svg { width: 22px; height: 22px; flex: none; color: var(--ink); } .hero-getapp .hga-meta { display: flex; flex-direction: column; gap: 1px; line-height: 1.1; } .hero-getapp .hga-top { font-size: 8.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); } .hero-getapp .hga-main { font-size: 13px; font-weight: 500; color: var(--ink); letter-spacing: -0.003em; } .hero-getapp .hga-stack { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; } .hero-getapp .hga-placeholder { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); } @media (max-width: 540px) { .hero-getapp .hga-stack { width: 100%; align-items: stretch; } .hero-getapp .hga-badges { width: 100%; } .hero-getapp .hga-badge { flex: 1 1 auto; justify-content: center; } .hero-getapp .hga-placeholder { text-align: center; } } .hero-trust { display: flex; align-items: center; gap: 14px; margin-top: 4px; font-size: 13px; color: var(--ink-2); flex-wrap: wrap; } .stars { color: var(--gold); letter-spacing: 2px; font-size: 13px; } .dot-sep { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-4); } /* hero visual: device + floating cards */ .hero-stage { position: relative; display: grid; place-items: center; min-height: 600px; } .hero-stage .device { width: clamp(248px, 24vw, 300px); z-index: 3; } .hero-stage .float-card { position: absolute; z-index: 4; } .hero-stage .fc-1 { top: 1%; right: 1%; transform: rotate(9deg); width: 188px; } .hero-stage .fc-2 { bottom: 1%; left: -1%; transform: rotate(-11deg); width: 178px; } .hero-chip { position: absolute; z-index: 5; background: rgba(11,17,32,0.86); backdrop-filter: blur(14px); border: 1px solid var(--line-2); border-radius: 14px; padding: 12px 15px; box-shadow: 0 20px 44px -16px rgba(0,0,0,0.7); } .hero-chip .hc-l { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); } .hero-chip .hc-v { font-family: var(--font-mono); font-size: 19px; font-weight: 600; margin-top: 3px; } .hero-chip.c-a { top: 17%; left: -3%; } .hero-chip.c-b { bottom: 20%; right: -4%; } /* ============================================================ HERO — Word-by-word reveal Each word wraps in .word-line (overflow:hidden). Inner .word translates from 110% to 0 with expo-out easing, staggered 80ms via inline --i custom property. ============================================================ */ /* Mask wrapper: extra padding-bottom for descenders (g y p j q + swash italics), negative margin keeps the visual box unchanged. Horizontal padding zero so letters don't get horizontally shaved. Once the reveal is done we drop the clip entirely so italic swashes and accents can never be trimmed at rest. Bottom bumped 0.22em -> 0.26em to match the gold-word's italic-y swash requirement (see .word.gold-word below); mask must be at least as tall as the descender space its content needs. */ .hero h1 .word-line { display: inline-block; overflow: hidden; padding: 0.14em 0 0.26em; margin: -0.14em 0 -0.26em; vertical-align: baseline; line-height: inherit; } .hero h1.reveal-done .word-line, .hero h1 .word-line.done { overflow: visible; padding: 0; margin: 0; } .hero h1 .word { display: inline-block; transform: translateY(110%); animation: heroWord 0.72s var(--ease-expo, cubic-bezier(0.16, 1, 0.3, 1)) both; animation-delay: calc(var(--i, 0) * 80ms + 120ms); } @keyframes heroWord { from { transform: translateY(110%); } to { transform: translateY(0); } } /* The gold word ("money") — shimmer sweep after reveal completes. Extended paint box: background-clip:text only paints the gradient inside the element's paint box. At tight line-height, the italic "y" descender extends below the box and renders invisible (transparent text-fill with nothing painting there). Padding pushes the paint box down to cover the full swash; matching negative margin keeps layout unchanged. Right padding slightly larger than left because italic glyphs overhang right. Bottom 0.26em covers the italic-y descender in Instrument Serif. */ .hero h1 .word.gold-word { color: var(--gold); font-style: italic; background: linear-gradient(120deg, var(--gold) 0%, var(--gold) 30%, #F0DFB5 50%, var(--gold) 70%, var(--gold) 100%); background-size: 260% 100%; background-position: 100% 50%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding: 0.1em 0.08em 0.26em 0.02em; margin: -0.1em -0.08em -0.26em -0.02em; animation: heroWord 0.72s var(--ease-expo, cubic-bezier(0.16, 1, 0.3, 1)) both, heroGoldSweep 2.8s ease-in-out 1.1s; animation-delay: calc(var(--i, 0) * 80ms + 120ms), calc(var(--i, 0) * 80ms + 900ms); } @keyframes heroGoldSweep { 0% { background-position: 100% 50%; } 60% { background-position: 0% 50%; } 100% { background-position: -60% 50%; } } @media (prefers-reduced-motion: reduce) { .hero h1 .word { animation: none; transform: none; } .hero h1 .word.gold-word { animation: none; -webkit-text-fill-color: var(--gold); background: none; } } /* Editorial eyebrow — mono, gold, letter-spacing 0.2em */ .hero-editorial-eyebrow { display: inline-flex; align-items: center; gap: 14px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.20em; text-transform: uppercase; color: var(--gold); opacity: 0; animation: heroEyebrow 0.9s var(--ease-expo, cubic-bezier(0.16, 1, 0.3, 1)) 0.06s both; } .hero-editorial-eyebrow .rule { width: 32px; height: 1px; background: currentColor; opacity: 0.55; } @keyframes heroEyebrow { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .hero-editorial-eyebrow { animation: none; opacity: 1; } } /* Deferred reveal — subhead + CTAs + proof strip fade up after headline */ .hero .hero-sub, .hero .hero-actions, .hero .hero-proof, .hero .hero-getapp { opacity: 0; animation: heroFadeUp 0.8s var(--ease-expo, cubic-bezier(0.16, 1, 0.3, 1)) both; } .hero .hero-sub { animation-delay: 0.62s; } .hero .hero-actions{ animation-delay: 0.74s; } .hero .hero-getapp { animation-delay: 0.86s; } .hero .hero-proof { animation-delay: 0.98s; } @keyframes heroFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .hero .hero-sub, .hero .hero-actions, .hero .hero-proof, .hero .hero-getapp { animation: none; opacity: 1; transform: none; } } /* Scroll indicator — thin vertical line under content */ .hero-scroll { position: absolute; left: 50%; bottom: 32px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.20em; text-transform: uppercase; color: var(--ink-3); z-index: 3; pointer-events: none; opacity: 0; animation: heroFadeUp 0.9s var(--ease-expo, cubic-bezier(0.16, 1, 0.3, 1)) 1.2s both; } .hero-scroll .rail { width: 1px; height: 48px; background: var(--line-2); position: relative; overflow: hidden; } .hero-scroll .rail::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 100%; background: linear-gradient(180deg, var(--gold), transparent); transform-origin: top center; transform: scaleY(0); animation: heroScrollPulse 2.4s ease-in-out infinite; } @keyframes heroScrollPulse { 0% { transform: scaleY(0); opacity: 0; } 40% { transform: scaleY(1); opacity: 1; } 70% { transform: scaleY(1); opacity: 1; transform-origin: top; } 70.01% { transform-origin: bottom; } 100% { transform: scaleY(0); opacity: 0; transform-origin: bottom; } } @media (prefers-reduced-motion: reduce) { .hero-scroll .rail::after { animation: none; transform: scaleY(0.6); opacity: 0.6; } } /* ============================================================ HERO CARD — the signature floating element ============================================================ */ .hero-card-stage { position: relative; display: block; aspect-ratio: 1.586 / 1; width: 100%; max-width: 460px; margin: 0 auto; perspective: 1400px; transform-style: preserve-3d; opacity: 0; animation: heroCardEnter 1.2s var(--ease-expo, cubic-bezier(0.16, 1, 0.3, 1)) 0.4s both; } @keyframes heroCardEnter { from { opacity: 0; transform: translateY(24px) rotateZ(-2deg); } to { opacity: 1; transform: translateY(0) rotateZ(0); } } @media (prefers-reduced-motion: reduce) { .hero-card-stage { animation: none; opacity: 1; } } .hero-card { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transform: rotateY(15deg) rotateX(-8deg); /* default resting pose — scrub handler overrides */ will-change: transform; } @media (prefers-reduced-motion: reduce) { .hero-card { transform: rotateY(15deg) rotateX(-8deg); } } /* separate drop shadow — scrub handler sets opacity/transform */ .hero-card-shadow { position: absolute; left: 6%; right: 6%; bottom: -6%; height: 28%; background: radial-gradient(ellipse 55% 55% at 50% 40%, rgba(0,0,0,0.55), transparent 65%); filter: blur(24px); transform-origin: center; will-change: transform, opacity; z-index: 0; } .hcx-face { position: absolute; inset: 0; border-radius: 22px; background: /* subtle brushed pattern */ repeating-linear-gradient(115deg, rgba(255,255,255,0.012) 0 1px, transparent 1px 5px), /* main metal gradient */ linear-gradient(148deg, #1D2233 0%, #0E1220 40%, #06090F 100%); overflow: hidden; box-shadow: /* inner rim highlight */ 0 1px 0 rgba(255,255,255,0.14) inset, 0 -1px 0 rgba(0,0,0,0.5) inset, /* edge seam */ 0 0 0 0.5px rgba(255,255,255,0.06), /* subtle inner glow */ 0 0 60px rgba(212,175,122,0.05) inset; padding: 8.5% 8% 7%; color: var(--ink); } /* hairline gold border */ .hcx-border { position: absolute; inset: 5.5%; border: 1px solid rgba(212,175,122,0.28); border-radius: 14px; pointer-events: none; box-shadow: 0 0 0 0.5px rgba(212,175,122,0.05) inset; } .hcx-row { display: flex; align-items: center; justify-content: space-between; } .hcx-top { position: relative; z-index: 3; padding-bottom: 6%; } .hcx-wordmark { font-family: var(--font-sans); font-size: clamp(11px, 1.4vw, 15px); font-weight: 600; letter-spacing: 0.32em; color: var(--gold); } .hcx-edition { font-family: var(--font-mono); font-size: clamp(9px, 0.9vw, 11px); letter-spacing: 0.18em; color: rgba(212,175,122,0.62); } /* chip */ .hcx-chip { position: relative; z-index: 3; width: 15%; aspect-ratio: 4 / 3; border-radius: 5px; background: linear-gradient(135deg, #E6C892 0%, #C9A268 45%, #8E6D2F 100%); display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; padding: 8%; gap: 8%; box-shadow: 0 1px 2px rgba(0,0,0,0.5), 0 0 0 0.5px rgba(0,0,0,0.4) inset, 0 1px 0 rgba(255,255,255,0.4) inset; margin: 5% 0 8%; } .hcx-chip span { background: rgba(0,0,0,0.28); border-radius: 1px; } /* identity */ .hcx-identity { position: relative; z-index: 3; } .hcx-eyebrow { font-family: var(--font-mono); font-size: clamp(8px, 0.8vw, 10px); letter-spacing: 0.20em; text-transform: uppercase; color: rgba(255,255,255,0.36); margin-bottom: 4px; } .hcx-name { font-family: var(--font-sans); font-size: clamp(11px, 1.2vw, 14px); font-weight: 500; letter-spacing: 0.14em; color: rgba(255,255,255,0.86); } /* italic C monogram — the editorial signature */ .hcx-monogram { position: absolute; bottom: 4%; right: 6%; z-index: 3; font-family: var(--font-display); font-style: italic; font-size: clamp(48px, 8vw, 92px); line-height: 1; letter-spacing: -0.04em; background: linear-gradient(160deg, #F0DFB5 0%, var(--gold) 45%, #8E6D2F 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 2px 4px rgba(0,0,0,0.3); pointer-events: none; /* Precautionary paint-box extension — italic serif at 92px with line-height:1 + text-shadow can clip if the glyph ever changes to a descender letter. Absolute-positioned so bottom offset compensates for the padding-bottom. */ padding: 0.04em 0.06em 0.16em 0.02em; margin-bottom: -0.16em; } .hcx-fineprint { position: absolute; bottom: 7%; left: 8%; z-index: 3; font-family: var(--font-mono); font-size: clamp(6.5px, 0.65vw, 8px); letter-spacing: 0.16em; color: rgba(255,255,255,0.22); max-width: 60%; line-height: 1.5; } /* specular highlight — shifts with tilt */ .hcx-specular { position: absolute; inset: 0; border-radius: 22px; pointer-events: none; background: linear-gradient( 115deg, transparent 0%, transparent 30%, rgba(255, 245, 220, 0.10) 45%, rgba(255, 245, 220, 0.22) 50%, rgba(255, 245, 220, 0.10) 55%, transparent 70%, transparent 100% ); background-size: 260% 100%; background-position: var(--spec-pos, 50%) 50%; mix-blend-mode: screen; z-index: 4; } /* ============================================================ HERO CARD — front + back faces (preserve-3d flip) ============================================================ */ .hcx-face { backface-visibility: hidden; -webkit-backface-visibility: hidden; } .hcx-front { /* natural default face at rotateY(0) */ } .hcx-back { transform: rotateY(180deg); background: repeating-linear-gradient(115deg, rgba(255,255,255,0.008) 0 1px, transparent 1px 6px), linear-gradient(155deg, #0F1524 0%, #060A14 55%, #0B111F 100%); padding: 0; overflow: hidden; box-shadow: 0 1px 0 rgba(255,255,255,0.10) inset, 0 -1px 0 rgba(0,0,0,0.5) inset, 0 0 0 0.5px rgba(255,255,255,0.05); } .hcx-back-inner { position: absolute; inset: 5.5%; display: flex; flex-direction: column; border: 1px solid rgba(212,175,122,0.20); border-radius: 14px; padding: 8% 8% 8%; background: linear-gradient(160deg, rgba(212,175,122,0.02), transparent 60%); } .hcx-back-eyebrow { font-family: var(--font-sans); font-weight: 600; letter-spacing: 0.32em; font-size: clamp(11px, 1.4vw, 15px); color: var(--gold); } .hcx-back-line { font-family: var(--font-mono); font-size: clamp(9px, 0.9vw, 11px); letter-spacing: 0.18em; color: rgba(212,175,122,0.62); margin-top: 8px; } .hcx-magstripe { height: 22%; margin: 10% 0 auto; background: linear-gradient(180deg, #04070C 0%, #0E1320 50%, #04070C 100%); border-top: 1px solid rgba(0,0,0,0.55); border-bottom: 1px solid rgba(0,0,0,0.55); box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset; border-radius: 1px; } .hcx-signature { margin-top: auto; background: rgba(240, 232, 214, 0.06); border: 1px solid rgba(240, 232, 214, 0.08); padding: 14% 10% 8%; border-radius: 3px; position: relative; display: flex; flex-direction: column; min-height: 22%; } .hcx-sig-label { font-family: var(--font-mono); font-size: 7.5px; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(255,255,255,0.30); position: absolute; top: 6px; left: 10px; } .hcx-sig-mark { font-family: var(--font-mono); font-size: 7.5px; letter-spacing: 0.14em; color: rgba(255,255,255,0.22); margin-top: auto; } .hcx-back-monogram { position: absolute; bottom: 4%; right: 6%; font-family: var(--font-display); font-style: italic; font-size: clamp(48px, 8vw, 92px); color: rgba(212,175,122,0.15); line-height: 1; letter-spacing: -0.04em; pointer-events: none; z-index: 1; } /* ============================================================ HERO SCRUB STAGE — 300vh outer, sticky inner ============================================================ */ .hero-outer { position: relative; height: 300vh; } .hero-outer > .hero { position: sticky; top: 0; height: 100vh; min-height: 100svh; overflow: hidden; padding-top: 132px; padding-bottom: 90px; } @media (max-width: 767px) { .hero-outer { height: 200vh; } .hero-outer > .hero { padding-top: 108px; padding-bottom: 60px; } } /* Reduced-motion / no-JS: fall back to a normal-flow hero */ .hero-outer.rm { height: auto; } .hero-outer.rm > .hero { position: relative; height: auto; min-height: 100svh; } html:not(.js) .hero-outer { height: auto; } html:not(.js) .hero-outer > .hero { position: relative; height: auto; min-height: 100svh; } /* Feature copy — fades in as the card docks (segment 4, p 0.80→1.00) */ .hero-feature-copy { position: absolute; left: clamp(20px, 8%, 96px); top: 50%; transform: translateY(calc(-50% + 24px)); max-width: 380px; opacity: 0; z-index: 2; pointer-events: none; will-change: opacity, transform; } .hero-feature-copy .hfc-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); } .hero-feature-copy h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 3.6vw, 44px); line-height: 1.06; letter-spacing: -0.02em; color: var(--ink); margin: 18px 0 14px; text-wrap: balance; } .hero-feature-copy p { font-size: 15px; line-height: 1.6; color: var(--ink-2); max-width: 320px; margin: 0; } @media (max-width: 767px) { .hero-feature-copy { display: none; } } @media (prefers-reduced-motion: reduce) { .hero-feature-copy { position: relative; left: auto; top: auto; transform: none; opacity: 1; margin: 32px auto 0; pointer-events: auto; } } @media (max-width: 920px) { .hero-card-stage { max-width: 380px; } } @media (max-width: 520px) { .hero-card-stage { max-width: 320px; } } @media (max-width: 920px) { .hero-grid { grid-template-columns: 1fr; gap: 48px; } .hero-stage { min-height: 540px; } .hero-actions { align-items: stretch; } } @media (max-width: 520px) { .hero-stage .float-card, .hero-chip { display: none; } } /* waitlist */ .waitlist { display: flex; gap: 8px; max-width: 430px; } .waitlist input { flex: 1; min-width: 0; padding: 14px 19px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255,255,255,0.04); color: var(--ink); font-family: var(--font-sans); font-size: 14px; outline: none; transition: border-color .3s; } .waitlist input::placeholder { color: var(--ink-3); } .waitlist input:focus { border-color: var(--gold); } .waitlist-note { font-size: 12px; color: var(--ink-3); margin-top: 11px; } .hero-jump { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); border: 1px solid var(--gold-soft); background: rgba(212,175,122,0.06); padding: 11px 18px; border-radius: 999px; transition: gap .3s var(--ease), color .3s, border-color .3s, background .3s; } .hero-jump:hover { color: #E3C281; gap: 12px; border-color: var(--gold); background: rgba(212,175,122,0.12); } .hero-jump span { transition: transform .3s var(--ease); } .sec-paper .waitlist input { background: #fff; border-color: var(--paper-line); color: var(--paper-ink); } /* ============================================================ Section heading ============================================================ */ .sec-head { max-width: 760px; } .sec-head .eyebrow { color: var(--gold); display: inline-flex; align-items: center; gap: 14px; } .sec-head .eyebrow::before { content: ""; width: 32px; height: 1px; background: currentColor; opacity: 0.4; flex: none; } .sec-head.center .eyebrow::after { content: ""; width: 32px; height: 1px; background: currentColor; opacity: 0.4; flex: none; } .sec-head h2 { font-family: var(--font-display); font-size: clamp(38px,5.2vw,68px); line-height: 0.98; letter-spacing: -0.02em; margin-top: 20px; } .sec-head h2 em { font-style: italic; color: var(--gold); letter-spacing: -0.014em; } .sec-head .lead { margin-top: 22px; font-size: 19px; line-height: 1.6; color: var(--ink-2); max-width: 600px; } .sec-paper .sec-head .eyebrow { color: var(--paper-gold); } .sec-paper .sec-head h2 em { color: var(--paper-gold); } .sec-paper .sec-head .lead { color: var(--paper-ink-2); } .center { margin-inline: auto; text-align: center; } .center .lead { margin-inline: auto; } /* ============================================================ Stat strip (proof) ============================================================ */ .proof { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; } .proof .cell { background: var(--bg-1); padding: 36px 28px; } .proof .sv { font-family: var(--font-mono); font-size: clamp(28px,3.2vw,40px); font-weight: 500; letter-spacing: -0.03em; color: var(--ink); } .proof .sv .g { color: var(--gold); font-weight: 400; } .proof .sl { margin-top: 12px; font-size: 13.5px; color: var(--ink-2); line-height: 1.45; } @media (max-width: 760px) { .proof { grid-template-columns: repeat(2,1fr); } } /* ============================================================ Feature rows (editorial, real screens) ============================================================ */ .feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px,6vw,96px); align-items: center; margin-top: clamp(72px,10vw,140px); } .feature:first-of-type { margin-top: clamp(48px,6vw,80px); } .feature.flip .feat-media { order: -1; } .feat-text .eyebrow { color: var(--gold); } .feat-text h3 { font-family: var(--font-display); font-size: clamp(30px,3.8vw,48px); line-height: 1.02; letter-spacing: -0.014em; margin-top: 16px; } .feat-text h3 em { font-style: italic; color: var(--gold); letter-spacing: -0.01em; } .feat-text p { margin-top: 20px; font-size: 17px; line-height: 1.62; color: var(--ink-2); max-width: 470px; } .feat-list { margin-top: 28px; display: flex; flex-direction: column; gap: 15px; } .feat-list .fi { display: flex; gap: 13px; align-items: flex-start; font-size: 15.5px; color: var(--ink); } .feat-list .fi .tick { color: var(--gold-deep); font-family: var(--font-mono); font-size: 13px; flex: none; margin-top: 2px; opacity: 0.9; } .sec-paper .feat-text .eyebrow, .sec-paper .feat-text h3 em, .sec-paper .feat-list .fi .tick { color: var(--paper-gold); } .sec-paper .feat-text p { color: var(--paper-ink-2); } .sec-paper .feat-list .fi { color: var(--paper-ink); } .feat-media { display: grid; place-items: center; position: relative; } @media (max-width: 860px) { .feature { grid-template-columns: 1fr; gap: 44px; } .feature.flip .feat-media { order: 0; } } /* ============================================================ "Living wallet" — fanned real cards ============================================================ */ .wallet-fan { position: relative; height: clamp(320px,38vw,460px); display: grid; place-items: center; } .wallet-fan .cc-slot { position: absolute; transition: transform .5s var(--ease); } .wallet-fan .w1 { transform: rotate(-16deg) translate(-26%, 8%); z-index: 1; } .wallet-fan .w2 { transform: rotate(-6deg) translate(-12%, -4%); z-index: 2; } .wallet-fan .w3 { transform: rotate(4deg) translate(6%, -2%); z-index: 3; } .wallet-fan .w4 { transform: rotate(14deg) translate(24%, 10%); z-index: 2; } .wallet-fan:hover .w1 { transform: rotate(-20deg) translate(-40%, 10%); } .wallet-fan:hover .w4 { transform: rotate(18deg) translate(38%, 12%); } /* ============================================================ How it works (paper) ============================================================ */ .steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 30px; margin-top: 62px; } .step { padding-top: 30px; border-top: 1px solid var(--paper-line); } .step .step-no { font-family: var(--font-display); font-style: italic; font-size: 42px; color: var(--paper-gold); line-height: 1; } .step h4 { font-family: var(--font-display); font-size: 27px; margin-top: 16px; } .step p { margin-top: 13px; font-size: 15px; line-height: 1.58; color: var(--paper-ink-2); } @media (max-width: 760px) { .steps { grid-template-columns: 1fr; gap: 10px; } } /* ============================================================ Supported cards marquee ============================================================ */ .marquee { position: relative; overflow: hidden; margin-top: 48px; min-height: 155px; contain: layout; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .marquee-track { display: flex; gap: 30px; width: max-content; animation: marq 38s linear infinite; } .marquee:hover .marquee-track { animation-play-state: paused; } .marquee .cc-slot { filter: drop-shadow(0 18px 30px rgba(0,0,0,0.4)); } @keyframes marq { to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } } .bank-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 38px; } .bank-chip { display: inline-flex; align-items: center; gap: 9px; padding: 11px 19px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg-2); font-size: 14px; color: var(--ink); } .bank-chip .bdot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); } /* ============================================================ Compare showcase (bento) ============================================================ */ .bento { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 24px; margin-top: 56px; } .bento-cell { background: var(--bg-2); border: 1px solid var(--line); border-radius: 24px; padding: clamp(26px,3vw,40px); position: relative; overflow: hidden; } .bento-cell h3 { font-family: var(--font-display); font-size: clamp(26px,3vw,38px); } .bento-cell p { margin-top: 14px; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); max-width: 420px; } .bento-tall { display: flex; flex-direction: column; } .bento-tall .device { width: clamp(220px,22vw,270px); margin: 28px auto 0; } .bento-split { display: grid; grid-template-rows: auto auto; gap: 24px; } @media (max-width: 860px) { .bento { grid-template-columns: 1fr; } } .bento-cell h3 em { font-style: italic; color: var(--gold); } .bento-tall { position: relative; } .bento-tall .eyebrow { color: var(--ink-3); position: relative; z-index: 1; } .bento-tall .device { position: relative; z-index: 1; } /* ============================================================ Value calculator (interactive — your real number) ============================================================ */ .calc { position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr 0.8fr; gap: clamp(30px,4.5vw,60px); align-items: center; background: var(--bg-2); border: 1px solid var(--line); border-radius: 28px; padding: clamp(28px,4vw,52px); } .calc::before { content: ""; position: absolute; width: 520px; height: 520px; right: -180px; top: -220px; border-radius: 50%; background: radial-gradient(circle, rgba(212,175,122,0.10), transparent 70%); filter: blur(44px); pointer-events: none; } .calc-head { position: relative; z-index: 1; } .calc-head .eyebrow { color: var(--gold); } .calc-head h2 { font-family: var(--font-display); font-size: clamp(30px,3.4vw,44px); line-height: 1.04; letter-spacing: -0.014em; margin-top: 16px; } .calc-head h2 em { font-style: italic; color: var(--gold); } .calc-hint { margin-top: 14px; font-size: 12.5px; color: var(--ink-3); font-family: var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; } .calc-cards { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 22px; } .calc-chip { display: inline-flex; align-items: center; gap: 11px; padding: 9px 14px 9px 9px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(255,255,255,0.03); cursor: pointer; transition: border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease); } .calc-chip:hover { transform: translateY(-2px); } .calc-chip img { width: 44px; border-radius: 5px; filter: drop-shadow(0 6px 12px rgba(0,0,0,0.5)); } .calc-chip .cc-t { text-align: left; } .calc-chip .cc-n { display: block; font-size: 13px; font-weight: 600; line-height: 1.2; color: var(--ink); } .calc-chip .cc-f { display: block; font-size: 10.5px; color: var(--ink-3); font-family: var(--font-mono); margin-top: 3px; } .calc-chip .cc-check { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; color: transparent; font-size: 11px; transition: all .3s var(--ease); margin-left: 2px; flex: none; } .calc-chip[aria-pressed="true"] { border-color: var(--gold); background: var(--gold-soft); } .calc-chip[aria-pressed="true"] .cc-check { background: var(--gold); border-color: var(--gold); color: #25190a; } .calc-result { position: relative; z-index: 1; text-align: center; border: 1px solid var(--gold-soft); border-radius: 20px; background: radial-gradient(130% 130% at 100% 0%, #0e1729, var(--bg)); padding: clamp(26px,3vw,38px); } .calc-result .cr-l { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); } .calc-result .cr-amt { font-family: var(--font-mono); font-size: clamp(46px,5.8vw,72px); font-weight: 600; letter-spacing: -0.04em; line-height: 1; margin-top: 12px; } .calc-result .cr-amt .cur { color: var(--gold); } .calc-result .cr-net { font-family: var(--font-display); font-style: italic; font-size: 21px; color: var(--ink-2); margin-top: 14px; } .calc-result .cr-net b { color: var(--sage); font-style: normal; font-family: var(--font-mono); font-weight: 600; } .calc-result .cr-capture { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--ink-2); line-height: 1.5; } .calc-result .cr-capture b { color: var(--gold); font-family: var(--font-mono); font-weight: 600; } .calc-result .cr-sub { font-size: 12.5px; color: var(--ink-3); margin-top: 10px; line-height: 1.5; } .calc-result .btn { margin-top: 24px; width: 100%; } @media (max-width: 860px) { .calc { grid-template-columns: 1fr; } } /* coming-soon row (honest pre-launch app treatment) */ .soon-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 2px; } .soon-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); } .soon-badge { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-2); } .soon-badge svg { width: 15px; height: 15px; opacity: 0.7; flex: none; } /* ============================================================ Security / trust grid ============================================================ */ .trust-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; margin-top: 56px; } .trust-cell { background: var(--bg-1); padding: 36px 30px; } .trust-cell .tdot { width: 9px; height: 9px; background: var(--gold); transform: rotate(45deg); } .trust-cell h4 { font-family: var(--font-display); font-size: 25px; margin-top: 22px; } .trust-cell p { margin-top: 12px; font-size: 14px; line-height: 1.56; color: var(--ink-2); } @media (max-width: 880px) { .trust-grid { grid-template-columns: repeat(2,1fr); } } @media (max-width: 520px) { .trust-grid { grid-template-columns: 1fr; } } /* ============================================================ Pricing (toggle) ============================================================ */ .price-toggle { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--bg-2); margin: 30px auto 0; } .price-toggle button { font-family: var(--font-sans); font-size: 13.5px; font-weight: 500; color: var(--ink-2); background: none; border: 0; padding: 9px 20px; border-radius: 999px; cursor: pointer; transition: all .3s var(--ease); } .price-toggle button.on { background: var(--gold); color: #25190a; } .price-toggle .save { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; color: var(--sage); margin-left: 6px; } .plans { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 48px auto 0; max-width: 900px; } .plan { border-radius: 24px; padding: 38px; border: 1px solid var(--line); background: var(--bg-2); position: relative; display: flex; flex-direction: column; } .plan.pro { background: var(--bg-3); border-color: var(--gold-soft); } .plan .pname { font-family: var(--font-display); font-style: italic; font-size: 30px; } .plan.pro .pname { color: var(--gold); } .plan .pprice { font-family: var(--font-mono); font-size: 46px; font-weight: 600; letter-spacing: -0.03em; margin-top: 16px; display: flex; align-items: baseline; gap: 6px; } .plan .pprice .per { font-size: 14px; color: var(--ink-3); font-weight: 500; letter-spacing: 0; } .plan .pdesc { margin-top: 8px; font-size: 14px; color: var(--ink-2); min-height: 20px; } .plan ul { list-style: none; margin: 28px 0 30px; padding: 0; display: flex; flex-direction: column; gap: 14px; flex: 1; } .plan li { display: flex; gap: 12px; font-size: 14.5px; line-height: 1.4; color: var(--ink); } .plan li .tick { color: var(--gold); font-family: var(--font-mono); flex: none; } .plan-badge { position: absolute; top: 24px; right: 24px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); border: 1px solid var(--gold); padding: 5px 11px; border-radius: 999px; } @media (max-width: 760px) { .plans { grid-template-columns: 1fr; } } /* ============================================================ Testimonials ============================================================ */ .quotes { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; margin-top: 56px; } .quote { background: var(--bg-2); border: 1px solid var(--line); border-radius: 20px; padding: 30px; display: flex; flex-direction: column; } .quote .qstars { color: var(--gold); letter-spacing: 2px; font-size: 13px; } .quote blockquote { margin: 16px 0 0; font-family: var(--font-display); font-size: 22px; line-height: 1.34; flex: 1; } .quote .qwho { margin-top: 24px; display: flex; align-items: center; gap: 12px; } .quote .qav { width: 40px; height: 40px; border-radius: 50%; background: transparent; border: 1px solid var(--line-2); flex: none; display: grid; place-items: center; color: var(--ink-2); font-weight: 500; font-size: 12px; font-family: var(--font-mono); } .quote .qn { font-size: 13.5px; font-weight: 600; } .quote .qr { font-size: 12px; color: var(--ink-3); } @media (max-width: 880px) { .quotes { grid-template-columns: 1fr; } } /* ============================================================ FAQ ============================================================ */ .faq { max-width: 820px; margin-top: 50px; } .faq-item { border-bottom: 1px solid var(--line-2); } .faq-q { width: 100%; text-align: left; background: none; border: 0; cursor: pointer; padding: 26px 0; display: flex; align-items: center; justify-content: space-between; gap: 20px; font-family: var(--font-sans); font-size: 18.5px; font-weight: 500; color: var(--ink); } .faq-q .pm { font-family: var(--font-mono); font-size: 22px; color: var(--gold); transition: transform .35s var(--ease); flex: none; } .faq-item.open .faq-q .pm { transform: rotate(45deg); } .faq-a { max-height: 0; overflow: hidden; transition: max-height .45s var(--ease); } .faq-a p { padding: 0 0 26px; font-size: 15.5px; line-height: 1.64; color: var(--ink-2); max-width: 660px; } /* ============================================================ Final CTA ============================================================ */ .cta-final { position: relative; overflow: hidden; text-align: center; background: var(--bg); } .cta-final .wrap { position: relative; z-index: 2; } .cta-final h2 { font-family: var(--font-display); font-size: clamp(44px,7vw,92px); line-height: 0.96; letter-spacing: -0.022em; } .cta-final h2 em { font-style: italic; color: var(--gold); letter-spacing: -0.016em; } .cta-final .lead { color: var(--ink-2); font-size: 19px; margin: 24px auto 0; max-width: 500px; line-height: 1.6; } .cta-actions { margin-top: 42px; display: flex; flex-direction: column; align-items: center; gap: 22px; } /* ============================================================ Footer ============================================================ */ /* ============================================================ Sticky Product Story — the centerpiece 300vh container. Left sticky phone crossfades 3 screens. Right column stacks 3 text blocks. Progress rail beside text. Mobile: stacked static. ============================================================ */ .sticky-story { position: relative; background: var(--bg-1); padding: clamp(64px, 9vw, 120px) 0 0; border-top: 1px solid var(--line); /* Explicit reservation so scrub math + CLS are stable regardless of font swap. NOTE: 'contain: layout paint' was previously added here for CLS isolation but was silently killing position:sticky on .ss-phone-sticky (contain: paint establishes a containing block that clips sticky descendants). Removed — the min-height alone gives us the CLS reservation we need. */ min-height: calc(3 * 92vh + 200px); } @media (max-width: 820px) { .sticky-story { min-height: 0; } } .sticky-story .ss-head { max-width: 720px; margin: 0 auto clamp(48px, 6vw, 80px); text-align: center; } .sticky-story .ss-head h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1.05; letter-spacing: -0.02em; margin-top: 18px; } .sticky-story .ss-head h2 em { font-style: italic; color: var(--gold); } .sticky-story .ss-container { position: relative; } /* align-items: stretch (grid default) so .ss-phone-col grows to the full row height set by the tall text column — otherwise the sticky child has no travel and unpins immediately. */ .ss-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: stretch; } /* Left column — sticky phone */ .ss-phone-col { position: relative; padding-bottom: clamp(80px, 10vw, 120px); } .ss-phone-sticky { position: sticky; top: 20vh; display: flex; justify-content: center; height: 60vh; align-items: center; perspective: 1400px; -webkit-perspective: 1400px; perspective-origin: 50% 42%; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; } /* ============================================================ 3D DEVICE — sticky story upgrade Real 3D object built from front + back + 4 edge faces plus a decoupled ground shadow. Rotation is scroll-driven from the 'story' scrub handler; idle micro-float is a CSS keyframe on an inner layer that composes cleanly with the JS transform. ============================================================ */ /* Ground shadow — NOT a child of the rotating device, so its scale and opacity can be driven independently (narrows at edge-on). */ .ss-device-shadow { position: absolute; left: 50%; bottom: 8%; width: clamp(220px, 22vw, 280px); height: 22px; transform: translateX(-50%); background: radial-gradient(ellipse 60% 100% at 50% 50%, rgba(0, 0, 0, 0.55), transparent 65%); filter: blur(20px); will-change: transform, opacity; pointer-events: none; z-index: 1; } /* The rotating device — JS applies rotateY / rotateX inline. preserve-3d so the faces stay in their true 3D positions. */ .ss-device { position: relative; width: clamp(240px, 24vw, 300px); aspect-ratio: 390 / 844; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; will-change: transform; z-index: 3; transform: rotateY(0deg); } /* Idle micro-float — CSS animation on an inner layer so it composes with the JS-driven rotation on the parent. */ .ss-device-float { position: absolute; inset: 0; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; animation: ssDeviceFloat 5s ease-in-out infinite; } @keyframes ssDeviceFloat { 0%, 100% { transform: translateY(-6px); } 50% { transform: translateY(6px); } } /* Faces — absolute in same 3D space, backface-visibility hides the one facing away so we only paint what's visible. */ .ss-device-face { position: absolute; inset: 0; border-radius: 44px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; } /* FRONT face — screen + bezel */ .ss-device-front { background: #04070C; border: 8px solid #0B0F1B; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), /* top rim light */ inset 0 -1px 0 rgba(0, 0, 0, 0.4), /* bottom shadow */ 0 0 0 0.5px rgba(0, 0, 0, 0.7); /* edge seam */ } /* App screen imgs — one per screen. Opacity toggled by JS via .on. */ .ss-app-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; opacity: 0; transition: opacity 0.15s ease; z-index: 3; border-radius: 36px; } .ss-app-img.on { opacity: 1; } .ss-app-img[data-err="1"] { display: none; } /* Fallback DOM mockup container — shows through when imgs are absent or errored. The existing .ss-screen crossfade continues to work inside. */ .ss-device-screen-inner { position: absolute; inset: 0; background: #06080f; overflow: hidden; border-radius: 36px; z-index: 1; } /* Glass specular — background-position tracks --spec-pos, JS-set from current rotateY. mix-blend-mode: screen so it doesn't wash out screen. */ .ss-device-specular { position: absolute; inset: 0; border-radius: 36px; background: linear-gradient(115deg, transparent 0%, transparent 32%, rgba(255, 245, 220, 0.08) 46%, rgba(255, 245, 220, 0.20) 50%, rgba(255, 245, 220, 0.08) 54%, transparent 68%, transparent 100%); background-size: 260% 100%; background-position: var(--spec-pos, 50%) 50%; mix-blend-mode: screen; pointer-events: none; z-index: 5; } /* BACK face — matte navy, gold C mark ripple, mono wordmark. */ .ss-device-back { transform: rotateY(180deg); background: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.008) 0 1px, transparent 1px 6px), linear-gradient(155deg, #0B101C 0%, #060A14 55%, #0F1424 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -1px 0 rgba(0, 0, 0, 0.5), 0 0 0 0.5px rgba(0, 0, 0, 0.7); } .ss-device-back-inner { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; } .ss-device-back-mark { font-family: var(--font-display); font-style: italic; font-size: clamp(110px, 22vw, 200px); line-height: 1; letter-spacing: -0.04em; color: rgba(212, 175, 122, 0.06); text-shadow: 0 4px 24px rgba(212, 175, 122, 0.04); } .ss-device-back-wordmark { position: absolute; bottom: 12%; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(212, 175, 122, 0.30); } .ss-device-back-camera { position: absolute; top: 8%; left: 50%; transform: translateX(-50%); width: 22%; height: 6%; border-radius: 12px; background: rgba(0, 0, 0, 0.4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); } /* EDGES — 4 thin faces (12px deep) forming the object's thickness. Titanium gradient with a 1px lighter seam to sell the machined feel. */ .ss-device-edge { position: absolute; background: linear-gradient(135deg, #2A2F3A 0%, #454B58 50%, #2A2F3A 100%); box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.18), inset 0 -0.5px 0 rgba(0, 0, 0, 0.5); backface-visibility: hidden; -webkit-backface-visibility: hidden; } .ss-device-edge-left { top: 0; bottom: 0; left: 0; width: 12px; transform: translateX(-6px) rotateY(-90deg); transform-origin: right center; border-radius: 44px 0 0 44px; } .ss-device-edge-right { top: 0; bottom: 0; right: 0; width: 12px; transform: translateX(6px) rotateY(90deg); transform-origin: left center; border-radius: 0 44px 44px 0; } .ss-device-edge-top { left: 0; right: 0; top: 0; height: 12px; transform: translateY(-6px) rotateX(90deg); transform-origin: center bottom; border-radius: 44px 44px 0 0; } .ss-device-edge-bottom { left: 0; right: 0; bottom: 0; height: 12px; transform: translateY(6px) rotateX(-90deg); transform-origin: center top; border-radius: 0 0 44px 44px; } /* Mobile — skip the full 3D scene, use the existing stacked layout. */ @media (max-width: 767px) { .ss-phone-sticky.ss-device-stage { perspective: none; transform-style: flat; } .ss-device { transform: none !important; transform-style: flat; } .ss-device-float { transform-style: flat; animation: none; } .ss-device-back, .ss-device-edge, .ss-device-shadow, .ss-device-specular { display: none; } } /* Reduced motion — no rotation, no float; existing screen crossfade remains */ @media (prefers-reduced-motion: reduce) { .ss-device { transform: none !important; } .ss-device-float { animation: none; } } .ss-screens { position: relative; width: 100%; height: 100%; overflow: hidden; } .ss-screen { position: absolute; inset: 0; opacity: 0; transform: translateY(6px); transition: opacity 0.45s var(--ease-expo, cubic-bezier(0.16, 1, 0.3, 1)), transform 0.45s var(--ease-expo, cubic-bezier(0.16, 1, 0.3, 1)); pointer-events: none; } .ss-screen.on { opacity: 1; transform: translateY(0); pointer-events: auto; } .ss-screen .ha-body { position: relative; padding: 12px 20px 22px; height: 100%; overflow: hidden; } /* Right column — 3 text blocks + progress rail */ .ss-text-col { position: relative; padding-left: clamp(28px, 3vw, 44px); } .ss-rail { position: absolute; left: 0; top: 8vh; bottom: 8vh; width: 1px; background: var(--line); overflow: hidden; border-radius: 1px; } .ss-rail i { display: block; width: 100%; height: 100%; background: linear-gradient(180deg, var(--gold) 0%, var(--gold-deep) 100%); transform-origin: top center; transform: scaleY(0); will-change: transform; } .ss-block { min-height: 92vh; display: flex; flex-direction: column; justify-content: center; padding: clamp(32px, 5vw, 64px) 0; opacity: 0.25; transition: opacity 0.5s var(--ease-expo, cubic-bezier(0.16, 1, 0.3, 1)); } .ss-block.active { opacity: 1; } .ss-block .ss-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); margin-bottom: 22px; } .ss-block h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 3.4vw, 2.6rem); line-height: 1.06; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 22px; text-wrap: balance; } .ss-block h3 em { font-style: italic; color: var(--gold); } .ss-block p { font-size: clamp(15px, 1.4vw, 17px); line-height: 1.62; color: var(--ink-2); max-width: 480px; margin: 0; } /* Mobile — stacked, static */ @media (max-width: 820px) { .ss-grid { grid-template-columns: 1fr; gap: 40px; } .ss-phone-col { padding-bottom: 24px; } .ss-phone-sticky { position: relative; top: 0; height: auto; padding: 24px 0; } .ss-rail { display: none; } .ss-text-col { padding-left: 0; } .ss-block { min-height: unset; padding: 24px 0; opacity: 1; } } @media (prefers-reduced-motion: reduce) { .ss-screen { transition: none; } .ss-block { transition: none; opacity: 1; } .ss-rail i { transition: none; transform: scaleY(0.4); } } /* ============================================================ Card cursor glow — gold radial gradient tracks cursor Applied to any element with [data-cursor-glow]. --gx/--gy set by JS on mousemove; ::before overlay reads them. ============================================================ */ [data-cursor-glow] { position: relative; isolation: isolate; } [data-cursor-glow]::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(300px circle at var(--gx, 50%) var(--gy, 50%), rgba(212, 175, 122, 0.08), transparent 42%); opacity: 0; transition: opacity .32s var(--ease-expo, cubic-bezier(0.16, 1, 0.3, 1)); z-index: 1; } [data-cursor-glow]:hover::before { opacity: 1; } @media (prefers-reduced-motion: reduce) { [data-cursor-glow]::before { transition: none; } } @media (pointer: coarse) { [data-cursor-glow]::before { display: none; } } .footer { background: var(--bg-0, var(--bg-1)); padding: 70px 0 42px; border-top: 1px solid var(--line); position: relative; overflow: hidden; isolation: isolate; } .footer .wrap { position: relative; z-index: 2; } .footer-wordmark { position: absolute; left: 50%; bottom: -12%; transform: translateX(-50%); font-family: var(--font-display); font-weight: 400; font-style: normal; font-size: clamp(8rem, 15vw, 16rem); line-height: 0.85; letter-spacing: -0.04em; color: rgba(255, 255, 255, 0.04); white-space: nowrap; user-select: none; pointer-events: none; z-index: 0; } .footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 36px; } .footer-brand p { margin-top: 18px; font-size: 14px; color: var(--ink-2); line-height: 1.6; max-width: 280px; } .footer h5 { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 18px; font-weight: 500; } .footer-col a { display: block; font-size: 14px; color: var(--ink-2); padding: 6px 0; margin-bottom: 4px; transition: color .3s; } .footer-col a:hover { color: var(--gold); } .footer-getapp { margin-top: 52px; padding-top: 28px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; } .footer-getapp .fga-copy { display: flex; flex-direction: column; gap: 6px; } .footer-getapp .fga-eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); } .footer-getapp .fga-tag { font-family: var(--font-display); font-size: 22px; line-height: 1.2; letter-spacing: -0.005em; color: var(--ink); } .footer-getapp .fga-badges { display: flex; gap: 12px; flex-wrap: wrap; } .footer-getapp .fga-badge { display: inline-flex; align-items: center; gap: 12px; padding: 13px 18px 13px 14px; min-height: 48px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(255,255,255,0.03); color: var(--ink); transition: all .3s var(--ease); position: relative; text-decoration: none; } .footer-getapp .fga-badge:hover { border-color: var(--gold-soft); background: rgba(255,255,255,0.05); transform: translateY(-1px); } .footer-getapp .fga-badge svg { width: 22px; height: 22px; flex: none; color: var(--ink); } .footer-getapp .fga-meta { display: flex; flex-direction: column; gap: 2px; line-height: 1.1; } .footer-getapp .fga-top { font-size: 8.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); } .footer-getapp .fga-main { font-size: 14px; font-weight: 500; color: var(--ink); letter-spacing: -0.005em; } .footer-getapp .fga-stack { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; } .footer-getapp .fga-placeholder { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); } @media (max-width: 540px) { .footer-getapp .fga-stack { width: 100%; align-items: stretch; } .footer-getapp .fga-placeholder { text-align: center; } } .footer-bottom { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-3); } @media (max-width: 760px) { .footer-top { grid-template-columns: 1fr 1fr; } } /* ---------- reveal ---------- */ /* Progressive enhancement: content is visible by default; only the .js class (set synchronously in ) opts into the hidden-then-reveal animation. With JS disabled the page never gets stuck blank. */ .reveal { opacity: 1; transform: none; } .js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s var(--ease-expo, cubic-bezier(0.16, 1, 0.3, 1)), transform .6s var(--ease-expo, cubic-bezier(0.16, 1, 0.3, 1)); } .js .reveal.in { opacity: 1; transform: none; } html:not(.js) .fp-bar, html:not(.js) .fp-cat .tr i { transform: none; } .reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; } .reveal.d3 { transition-delay: .24s; } .reveal.d4 { transition-delay: .32s; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } } /* ============================================================ STATS PAGE specifics ============================================================ */ .stats-hero { position: relative; overflow: hidden; padding: 124px 0 56px; background: var(--bg); } .sh-greet { font-size: 15px; color: var(--ink-2); } .sh-title { font-family: var(--font-display); font-size: clamp(42px,6vw,80px); line-height: 1; letter-spacing: -0.016em; margin-top: 12px; } .sh-title em { font-style: italic; color: var(--gold); } .marq2 { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(28px,5vw,64px); align-items: center; margin-top: 34px; } .big-capture .eyebrow { color: var(--gold); } .big-capture .amt { font-family: var(--font-mono); font-weight: 600; font-size: clamp(54px,9vw,108px); letter-spacing: -0.04em; line-height: 0.95; margin-top: 10px; } .big-capture .amt .cur { color: var(--gold); } .bc-bar { height: 10px; border-radius: 999px; background: rgba(255,255,255,0.08); overflow: hidden; margin-top: 28px; max-width: 500px; } .bc-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--sage), var(--gold)); width: 0; transition: width 1.6s var(--ease); } .bc-cap { display: flex; justify-content: space-between; max-width: 500px; margin-top: 11px; font-size: 13px; color: var(--ink-2); } .bc-cap .num { color: var(--ink); } .score-block { display: flex; align-items: center; gap: 22px; } .big-ring { --pct: 68; width: 168px; height: 168px; border-radius: 50%; flex: none; position: relative; background: conic-gradient(var(--gold) calc(var(--pct)*1%), rgba(255,255,255,0.07) 0); } .big-ring::after { content: ""; position: absolute; inset: 13px; border-radius: 50%; background: var(--bg); } .big-ring .rc { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; } .big-ring .rc b { font-family: var(--font-mono); font-size: 46px; font-weight: 600; letter-spacing: -0.04em; line-height: 1; } .big-ring .rc span { display: block; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); margin-top: 4px; } .score-side .ss-state { color: var(--sage); font-size: 18px; font-weight: 600; } .score-side .ss-note { font-size: 13.5px; color: var(--ink-2); margin-top: 8px; line-height: 1.5; max-width: 210px; } @media (max-width: 760px) { .marq2 { grid-template-columns: 1fr; } } .kpis { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; } .kpi { background: var(--bg-1); padding: 28px 24px; } .kpi .k-l { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); } .kpi .k-v { font-family: var(--font-mono); font-size: 30px; font-weight: 600; letter-spacing: -0.03em; margin-top: 10px; } .kpi .k-v.pos { color: var(--sage); } .kpi .k-s { font-size: 12px; color: var(--ink-2); margin-top: 6px; } @media (max-width: 760px) { .kpis { grid-template-columns: repeat(2,1fr); } } .panel { background: var(--bg-2); border: 1px solid var(--line); border-radius: 24px; padding: clamp(26px,4vw,40px); } .panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .panel-head h3 { font-family: var(--font-display); font-size: 30px; } .panel-head .ph-note { font-size: 13px; color: var(--ink-2); font-family: var(--font-mono); } .breakdown { margin-top: 28px; display: flex; flex-direction: column; gap: 22px; } .bd-row { display: grid; grid-template-columns: 210px 1fr auto; gap: 20px; align-items: center; } .bd-card { display: flex; align-items: center; gap: 14px; } .bd-card img { width: 58px; border-radius: 5px; filter: drop-shadow(0 6px 12px rgba(0,0,0,0.5)); } .bd-card .n { font-size: 14.5px; font-weight: 600; } .bd-card .b { font-size: 11px; color: var(--ink-3); font-family: var(--font-mono); margin-top: 2px; } .bd-track { height: 30px; border-radius: 8px; background: rgba(255,255,255,0.05); overflow: hidden; } .bd-fill { height: 100%; border-radius: 8px; background: linear-gradient(90deg, rgba(116,196,150,0.85), rgba(212,175,122,0.92)); width: 0; transition: width 1.4s var(--ease); } .bd-val { text-align: right; font-family: var(--font-mono); font-size: 14px; min-width: 120px; } .bd-val .cap { font-weight: 600; } .bd-val .avail { color: var(--ink-3); font-size: 12px; } @media (max-width: 680px) { .bd-row { grid-template-columns: 1fr; gap: 8px; } .bd-val { text-align: left; } } .chart { display: grid; grid-template-columns: repeat(12,1fr); gap: clamp(4px,1vw,12px); align-items: end; height: 240px; margin-top: 30px; } .bar { display: flex; flex-direction: column; align-items: center; gap: 10px; height: 100%; justify-content: flex-end; } .bar .col { width: 100%; max-width: 34px; border-radius: 7px 7px 3px 3px; background: linear-gradient(180deg, var(--gold), rgba(212,175,122,0.22)); height: 0; transition: height 1.2s var(--ease); } .bar.peak .col { background: linear-gradient(180deg, var(--sage), rgba(116,196,150,0.28)); box-shadow: 0 0 24px -4px rgba(116,196,150,0.5); } .bar .m { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); } .bar { cursor: pointer; outline: none; } .bar .v { font-family: var(--font-mono); font-size: 10px; color: var(--ink-2); opacity: 0; transition: opacity .3s; } .bar:hover .v, .bar:focus-within .v, .bar.active .v { opacity: 1; } .bar:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 6px; } .bar.active .col, .bar:focus-within .col { box-shadow: 0 0 22px -4px rgba(212,175,122,0.55); } .two-col { display: grid; grid-template-columns: 1.5fr 1fr; gap: 24px; } @media (max-width: 880px) { .two-col { grid-template-columns: 1fr; } } .exp-row { display: flex; align-items: center; gap: 13px; padding: 15px 0; border-bottom: 1px solid var(--line); } .exp-row:last-child { border-bottom: 0; } .exp-row .ec { width: 40px; height: 26px; border-radius: 4px; flex: none; background: linear-gradient(135deg,#1b2030,#0a0d16); border: 1px solid var(--line); } .exp-row .n { font-size: 14px; font-weight: 600; } .exp-row .b { font-size: 11px; color: var(--ink-3); font-family: var(--font-mono); margin-top: 2px; } .exp-row .amt { margin-left: auto; font-family: var(--font-mono); font-weight: 600; font-size: 14px; } .pill { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; padding: 4px 9px; border-radius: 999px; } .pill.urgent { color: var(--amber); background: rgba(231,171,85,0.14); } .pill.ok { color: var(--sage); background: rgba(116,196,150,0.14); } .share-wrap { position: relative; border-radius: 26px; padding: 1px; background: linear-gradient(150deg, rgba(212,175,122,0.5), rgba(212,175,122,0.06) 60%); } .share-card { border-radius: 24px; background: radial-gradient(120% 120% at 0% 0%, #0e1729, var(--bg)); padding: 38px; overflow: hidden; position: relative; } .share-card .sc-eyebrow { color: var(--gold); } .share-card .sc-big { font-family: var(--font-mono); font-size: clamp(44px,7vw,68px); font-weight: 600; letter-spacing: -0.04em; margin-top: 8px; } .share-card .sc-sub { font-family: var(--font-display); font-style: italic; font-size: 23px; margin-top: 6px; } .sc-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 30px; } .sc-stat { border: 1px solid var(--line); border-radius: 12px; padding: 15px; } .sc-stat .v { font-family: var(--font-mono); font-size: 22px; font-weight: 600; } .sc-stat .l { font-size: 10px; color: var(--ink-3); font-family: var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; margin-top: 6px; } .sc-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 32px; } .badge-rank { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-2); font-family: var(--font-mono); } .toast { position: fixed; left: 50%; bottom: 32px; transform: translate(-50%,20px); background: var(--gold); color: #25190a; font-size: 13px; font-weight: 600; padding: 12px 22px; border-radius: 999px; opacity: 0; pointer-events: none; transition: all .4s var(--ease); z-index: 9999; } .toast.show { opacity: 1; transform: translate(-50%,0); } /* ============================================================ v3 refinements ============================================================ */ /* ---- Hero proof bar (concrete numbers, above the fold) ---- */ .hero-proof { display: flex; margin-top: 32px; } .hero-proof .hp { padding-right: clamp(18px,2vw,28px); } .hero-proof .hp + .hp { padding-left: clamp(18px,2vw,28px); border-left: 1px solid var(--line); } .hero-proof .hpv { font-family: var(--font-mono); font-size: 24px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; white-space: nowrap; } .hero-proof .hpv.gold { color: var(--gold); } .hero-proof .hpv .st { color: var(--gold); font-size: 17px; margin-left: 2px; } .hero-proof .hpl { font-size: 11.5px; color: var(--ink-3); margin-top: 8px; line-height: 1.3; } @media (max-width: 400px) { .hero-proof .hpv { font-size: 20px; } .hero-proof .hp { padding-right: 14px; } .hero-proof .hp + .hp { padding-left: 14px; } } /* ---- Flat analytics panel (breaks the phone-mockup rhythm) ---- */ .flatpanel { width: 100%; background: var(--bg-2); border: 1px solid var(--line); border-radius: 24px; padding: clamp(24px,3vw,38px); position: relative; overflow: hidden; box-shadow: 0 40px 90px -50px rgba(0,0,0,0.9); } .flatpanel::before { content: ""; position: absolute; width: 420px; height: 420px; right: -170px; top: -210px; border-radius: 50%; background: radial-gradient(circle, rgba(212,175,122,0.10), transparent 70%); pointer-events: none; } .flatpanel > * { position: relative; } .fp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .fp-head .eyebrow { color: var(--ink-3); } .fp-net { font-family: var(--font-display); font-size: clamp(40px,5vw,58px); line-height: 1; color: var(--sage); margin-top: 12px; } .fp-net span { display: block; font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); margin-top: 10px; letter-spacing: 0; } .fp-chip { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); border: 1px solid var(--line); border-radius: 999px; padding: 7px 12px; white-space: nowrap; flex: none; } .fp-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; margin-top: 26px; } .fp-stats .c { background: var(--bg-2); padding: 16px 18px; } .fp-stats .v { font-family: var(--font-mono); font-size: 22px; font-weight: 600; letter-spacing: -0.02em; } .fp-stats .v.gold { color: var(--gold); } .fp-stats .l { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin-top: 8px; } .fp-chartwrap { margin-top: 28px; } .fp-secrow { display: flex; align-items: baseline; justify-content: space-between; } .fp-secrow .eyebrow { color: var(--ink-3); } .fp-dim { font-family: var(--font-mono); font-size: 10px; color: var(--ink-4); letter-spacing: 0.1em; } .fp-chart { display: grid; grid-template-columns: repeat(12,1fr); gap: 6px; align-items: end; height: 116px; margin-top: 14px; } .fp-bar { border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, var(--gold), rgba(212,175,122,0.2)); align-self: end; transform: scaleY(0); transform-origin: bottom; transition: transform .9s var(--ease); } .fp-bar.peak { background: linear-gradient(180deg, var(--sage), rgba(111,191,138,0.22)); box-shadow: 0 0 24px -6px rgba(111,191,138,0.5); } .reveal.in .fp-bar { transform: scaleY(1); } .fp-x { display: grid; grid-template-columns: repeat(12,1fr); gap: 6px; margin-top: 10px; } .fp-x span { font-family: var(--font-mono); font-size: 9px; color: var(--ink-4); text-align: center; } .fp-note { font-size: 12.5px; color: var(--ink-3); line-height: 1.5; margin-top: 16px; } .fp-note b { color: var(--ink); font-family: var(--font-mono); font-weight: 500; } .fp-cats { margin-top: 24px; display: flex; flex-direction: column; gap: 15px; } .fp-cat .t { display: flex; justify-content: space-between; align-items: baseline; font-size: 13.5px; color: var(--ink); } .fp-cat .t .m { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); } .fp-cat .tr { height: 5px; border-radius: 999px; background: rgba(255,255,255,0.07); margin-top: 9px; overflow: hidden; } .fp-cat .tr i { display: block; height: 100%; border-radius: 999px; transform: scaleX(0); transform-origin: left center; transition: transform 1.1s var(--ease); transition-delay: .25s; } .reveal.in .fp-cat .tr i { transform: scaleX(1); } /* ---- Paper testimonials (palette break in the lower third) ---- */ .sec-paper .quote { background: #fff; border-color: var(--paper-line); box-shadow: 0 24px 60px -40px rgba(11,16,32,0.4); } .sec-paper .quote blockquote { color: var(--paper-ink); } .sec-paper .quote .qstars { color: var(--paper-gold); } .sec-paper .quote .qav { border-color: var(--paper-line); color: var(--paper-ink-2); background: radial-gradient(120% 120% at 30% 20%, rgba(156,118,55,0.16), transparent 60%); } .sec-paper .quote .qn { color: var(--paper-ink); } .sec-paper .quote .qr { color: var(--paper-ink-3); } .sec-paper .sec-head .stars { color: var(--paper-gold); } .sec-paper .sec-head .lead { color: var(--paper-ink-2); } /* ---- Final CTA meta line ---- */ .cta-meta { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-3); } /* ============================================================ v4 — personal calc, loss beat, editorial spine, live hero ============================================================ */ /* ---- Editorial spine: numbered sections + hairline seams ---- */ .eyebrow .spine-no { color: var(--gold); margin-right: 12px; opacity: 0.9; } .eyebrow .spine-no::after { content: "·"; margin-left: 12px; color: var(--ink-4); } .sec-paper .eyebrow .spine-no { color: var(--paper-gold); } .sec-paper .eyebrow .spine-no::after { color: var(--paper-ink-3); } .center .eyebrow .spine-no { } /* keep inline for centered heads */ [data-spine]::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(var(--maxw), 86vw); height: 1px; background: linear-gradient(90deg, transparent, var(--line-2), transparent); pointer-events: none; } .sec-paper[data-spine]::before { background: linear-gradient(90deg, transparent, var(--paper-line), transparent); } /* ---- Nav hover underline (micro-craft) ---- */ .nav-links a { position: relative; } .nav-links a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -5px; height: 1px; background: var(--gold); transition: right .35s var(--ease); } .nav-links a:hover::after, .nav-links a.active::after { right: 0; } /* ---- Marquee card lift (micro-craft) ---- */ .marquee .cc-slot { transition: transform .45s var(--ease); } .marquee .cc-slot:hover { transform: translateY(-10px) rotate(-2deg) scale(1.04); } /* ---- Loss-aversion strip ---- */ .loss-strip { position: relative; overflow: hidden; background: var(--bg); } .loss-strip::before { content: ""; position: absolute; width: 680px; height: 680px; left: -220px; top: -280px; border-radius: 50%; background: radial-gradient(circle, rgba(230,107,92,0.11), transparent 66%); filter: blur(40px); pointer-events: none; } .loss-inner { position: relative; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px,5vw,72px); align-items: center; } .loss-l .eyebrow { color: var(--urgent); } .loss-l h2 { font-family: var(--font-display); font-size: clamp(26px,3vw,38px); line-height: 1.1; margin-top: 18px; max-width: 440px; } .loss-big { font-family: var(--font-mono); font-weight: 600; font-size: clamp(62px,9vw,108px); letter-spacing: -0.04em; line-height: 1; margin: 16px 0; color: var(--urgent); } .loss-big .cur { opacity: 0.55; } .loss-l p { font-size: 15.5px; line-height: 1.62; color: var(--ink-2); max-width: 440px; } .loss-tag-l { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px; } .loss-tags { display: flex; flex-direction: column; gap: 10px; } .loss-tag { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg-2); position: relative; overflow: hidden; } .loss-tag::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; } .loss-tag.expired::before { background: var(--urgent); } .loss-tag.live::before { background: var(--amber); } .loss-tag .lt-n { font-size: 14px; font-weight: 600; flex: 1; } .loss-tag.expired .lt-n { color: var(--ink-3); text-decoration: line-through; text-decoration-color: rgba(230,107,92,0.6); } .loss-tag .lt-v { font-family: var(--font-mono); font-size: 15px; font-weight: 600; } .loss-tag.expired .lt-v { color: var(--ink-3); } .loss-tag .lt-s { font-family: var(--font-mono); font-size: 10px; padding: 4px 9px; border-radius: 999px; margin-left: 2px; white-space: nowrap; } .loss-tag.expired .lt-s { color: var(--urgent); background: rgba(230,107,92,0.14); } .loss-tag.live .lt-s { color: var(--amber); background: rgba(228,167,82,0.14); } @media (max-width: 860px) { .loss-inner { grid-template-columns: 1fr; gap: 36px; } } /* ---- Personal calculator: spend sliders ---- */ .calc-sliders { margin-top: 24px; display: flex; flex-direction: column; gap: 20px; } .calc-slider .cs-top { display: flex; align-items: baseline; justify-content: space-between; } .calc-slider .cs-l { font-size: 13.5px; color: var(--ink-2); } .calc-slider .cs-v { font-family: var(--font-mono); font-size: 15px; font-weight: 600; color: var(--gold); } .calc-slider input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 999px; margin-top: 13px; cursor: pointer; background: linear-gradient(90deg, var(--gold) var(--p,50%), rgba(255,255,255,0.10) var(--p,50%)); outline: none; } .calc-slider input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--gold); border: 3px solid #1a1206; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.5); transition: transform .2s var(--ease); } .calc-slider input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.18); } .calc-slider input[type=range]::-moz-range-thumb { width: 17px; height: 17px; border-radius: 50%; background: var(--gold); border: 3px solid #1a1206; cursor: pointer; } .calc-result .cr-of { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); margin-top: 10px; } .calc-result .cr-net.neg b { color: var(--urgent); } /* ---- Live hero phone: screen stack ---- */ .ha-stack { flex: 1; position: relative; overflow: hidden; } .ha-stack .ha-screen { position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .5s var(--ease), transform .5s var(--ease); } .ha-stack .ha-screen.on { opacity: 1; visibility: visible; transform: none; } .ha-tab[data-go] { cursor: pointer; } .hw-list { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; } .hw-card { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); } .hw-card .hw-meta { flex: 1; min-width: 0; } .hw-card .hw-meta .n { font-size: 14px; font-weight: 600; } .hw-card .hw-meta .s { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); margin-top: 3px; } .hw-card .hw-pct { font-family: var(--font-mono); font-size: 14px; font-weight: 600; } .hw-card .hw-pct.gold { color: var(--gold); } .hw-card .hw-pct.sage { color: var(--sage); } /* ---- Merged value section: loss lead above the calculator ---- */ .loss-lead { max-width: 880px; margin-bottom: clamp(34px,5vw,54px); } .loss-lead .eyebrow { color: var(--urgent); } .loss-lead .ll-h { font-family: var(--font-display); font-size: clamp(28px,3.6vw,46px); line-height: 1.08; letter-spacing: -0.01em; margin-top: 18px; max-width: 800px; } .loss-num { color: var(--urgent); white-space: nowrap; } .loss-lead .ll-sub { margin-top: 22px; font-size: 17px; line-height: 1.6; color: var(--ink-2); max-width: 560px; } .loss-tags-h { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; } .loss-tags-h .loss-tag { padding: 11px 16px; } .loss-tags-h .lt-n { flex: 0 0 auto; } @media (max-width: 520px) { .loss-tags-h .loss-tag { width: 100%; } } /* ---- Mobile hardening for new components ---- */ @media (max-width: 440px) { .fp-stats .v { font-size: 18px; } .fp-stats .c { padding: 14px 12px; } .fp-net { font-size: 40px; } } /* ============================================================ v5 — accessibility & performance hardening ============================================================ */ /* Skip link */ .skip-link { position: fixed; top: 10px; left: 10px; z-index: 1000; background: var(--gold); color: #221808; padding: 11px 20px; border-radius: 999px; font-family: var(--font-sans); font-size: 13px; font-weight: 600; transform: translateY(-200%); transition: transform .25s var(--ease); } .skip-link:focus { transform: none; outline: 2px solid #fff; outline-offset: 2px; } /* Visible focus rings — keyboard only, never on mouse click */ a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible, .calc-chip:focus-visible, .faq-q:focus-visible, .price-toggle button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; } .btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } input[type=range]:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; } .sec-paper a:focus-visible, .sec-paper button:focus-visible { outline-color: var(--paper-gold); } /* Reduced motion: settle the newer animations to their end state */ @media (prefers-reduced-motion: reduce) { .fp-bar { transform: none !important; transition: none !important; } .fp-cat .tr i { transform: none !important; transition: none !important; } .ha-stack .ha-screen { transition: none !important; } .marquee .cc-slot { transition: none !important; } .nav-links a::after { transition: none !important; } .bc-bar i, .bd-fill, .chart .col { transition: none !important; } } /* Performance: lighten compositing on small screens (drop the full-screen film-grain blend layer; cap the heaviest blur radii) */ @media (max-width: 760px) { body::after { display: none; } .hero-glow::before { filter: blur(72px); } .device-halo, .calc::before, .flatpanel::before { filter: blur(34px); } } /* ============================================================ v5 — motion & persuasion polish ============================================================ */ /* Hero proof: lead with the loss number as the centerpiece */ .hero-proof .hp:first-child .hpv { font-size: 30px; } .hero-proof .hp:first-child .hpl { color: var(--ink-2); } /* Nav CTA gains a soft gold halo once you leave the hero */ .nav .nav-cta .btn-gold { transition: all .4s var(--ease), box-shadow .5s var(--ease); } .nav.scrolled .nav-cta .btn-gold { box-shadow: 0 0 0 1px rgba(212,175,122,0.45), 0 10px 30px -10px rgba(212,175,122,0.6); } /* Wallet-fan: gentle scroll-driven drift (--py composed into base transforms) */ .wallet-fan .w1 { transform: translateY(var(--py,0px)) rotate(-16deg) translate(-26%, 8%); } .wallet-fan .w2 { transform: translateY(var(--py,0px)) rotate(-6deg) translate(-12%, -4%); } .wallet-fan .w3 { transform: translateY(var(--py,0px)) rotate(4deg) translate(6%, -2%); } .wallet-fan .w4 { transform: translateY(var(--py,0px)) rotate(14deg) translate(24%, 10%); } .wallet-fan:hover .w1 { transform: translateY(var(--py,0px)) rotate(-20deg) translate(-40%, 10%); } .wallet-fan:hover .w4 { transform: translateY(var(--py,0px)) rotate(18deg) translate(38%, 12%); } /* Calculator: pulse the net + capture lines when inputs change */ @keyframes crBump { 0% { transform: translateY(5px); opacity: .3; } 100% { transform: none; opacity: 1; } } .calc-result .cr-net.bump, .calc-result .cr-capture.bump { animation: crBump .42s var(--ease); } /* Compare: a one-line verdict that makes the "intelligence" claim land */ .cmp-verdict { margin-top: 14px; display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-radius: 12px; background: linear-gradient(90deg, rgba(212,175,122,0.16), rgba(212,175,122,0.04)); border: 1px solid var(--gold-soft); } .cmp-verdict .vk { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); flex: none; } .cmp-verdict .vt { font-size: 12px; color: var(--ink); line-height: 1.3; } .cmp-verdict .vt b { color: var(--gold); font-weight: 600; } @media (prefers-reduced-motion: reduce) { .calc-result .cr-net, .calc-result .cr-capture { animation: none !important; } } /* Origin note — a quiet, editorial "letter from the team" on paper */ .origin-note { max-width: 730px; margin-top: 8px; } .origin-note p { font-family: var(--font-display); font-size: clamp(20px,2.3vw,28px); line-height: 1.42; letter-spacing: -0.008em; color: var(--paper-ink); margin-top: 22px; text-wrap: pretty; } .origin-note p em { font-style: italic; color: var(--paper-gold); } .origin-sign { margin-top: 32px; display: inline-flex; align-items: center; gap: 14px; } .os-mono { width: 46px; height: 46px; border-radius: 50%; flex: none; display: grid; place-items: center; font-family: var(--font-mono); font-size: 14px; font-weight: 600; letter-spacing: 0.04em; color: var(--paper-gold); border: 1px solid var(--paper-line); background: radial-gradient(120% 120% at 30% 20%, rgba(156,118,55,0.16), transparent 60%); } .os-meta { display: flex; flex-direction: column; gap: 4px; } .os-name { font-family: var(--font-display); font-style: italic; font-size: 25px; color: var(--paper-ink); line-height: 1; } .os-flourish { display: block; width: 116px; height: 18px; color: var(--paper-gold); margin-top: 2px; } .os-flourish path { fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; } .js .reveal.in .os-flourish path { stroke-dasharray: 200; stroke-dashoffset: 200; animation: sigDrawPaper 1.4s var(--ease) 0.5s forwards; } @keyframes sigDrawPaper { to { stroke-dashoffset: 0; } } .os-role { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--paper-gold); margin-top: 4px; } @media (prefers-reduced-motion: reduce) { .js .reveal.in .os-flourish path { animation: none; stroke-dashoffset: 0; } } /* ---- Live-demo band ---- */ .demo-band { display: grid; grid-template-columns: 1fr auto; gap: clamp(22px,4vw,56px); align-items: center; border: 1px solid var(--gold-soft); border-radius: 24px; padding: clamp(28px,4vw,46px); background: radial-gradient(140% 160% at 100% 0%, rgba(212,175,122,0.12), var(--bg-2)); } .demo-band h2 { font-family: var(--font-display); font-size: clamp(28px,3.4vw,42px); line-height: 1.04; letter-spacing: -0.012em; margin-top: 12px; } .demo-band h2 em { font-style: italic; color: var(--gold); } .demo-band p { margin-top: 14px; font-size: 16px; line-height: 1.55; color: var(--ink-2); max-width: 540px; text-wrap: pretty; } .demo-cta { flex: none; white-space: nowrap; } @media (max-width: 760px) { .demo-band { grid-template-columns: 1fr; } .demo-cta { width: 100%; } } /* ---- Waitlist redirect variant — same visual, JS does not intercept ---- */ .waitlist-redirect { display: flex; gap: 8px; max-width: 430px; } .waitlist-redirect input { flex: 1; min-width: 0; padding: 14px 19px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255,255,255,0.04); color: var(--ink); font-family: var(--font-sans); font-size: 14px; outline: none; transition: border-color .3s; } .waitlist-redirect input::placeholder { color: var(--ink-3); } .waitlist-redirect input:focus { border-color: var(--gold); } .sec-paper .waitlist-redirect input { background: #fff; border-color: var(--paper-line); color: var(--paper-ink); } /* ---- Waitlist inline feedback ---- */ .waitlist { flex-wrap: wrap; } .waitlist-redirect { flex-wrap: wrap; } .wl-msg { flex-basis: 100%; width: 100%; margin: 4px 2px 0; font-family: var(--font-sans); font-size: 12.5px; line-height: 1.4; } .wl-msg:empty { display: none; } .wl-msg.err { color: var(--urgent); } .wl-msg.ok { color: var(--sage); } .waitlist.invalid input { border-color: var(--urgent); } .sec-paper .wl-msg.err { color: #b4452f; } .sec-paper .wl-msg.ok { color: #2f7d4f; } /* ---- Proof bar: keep the (now-larger) lead stat from overflowing on phones ---- */ @media (max-width: 560px) { .hero-proof .hp:first-child .hpv { font-size: 24px; } } /* ---- Calculator: share-my-number button ---- */ .calc-share-btn { margin-top: 10px; width: 100%; } /* ---- Pricing reassurance line ---- */ .price-reassure { text-align: center; margin-top: 30px; font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.03em; color: var(--ink-3); text-wrap: balance; } /* ============================================================ v6 — visual polish: paper texture + Pro emphasis ============================================================ */ /* Subtle paper grain on the warm interludes so they read as real stock */ .sec-paper::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.55; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E"); background-size: 200px 200px; } .sec-paper > .wrap { position: relative; z-index: 1; } /* Pro plan: lift it and give it a soft gold halo so the pick is obvious */ .plan.pro { background: radial-gradient(130% 120% at 50% 0%, rgba(212,175,122,0.12), var(--bg-3)); box-shadow: 0 34px 80px -44px rgba(212,175,122,0.55), inset 0 0 0 1px rgba(212,175,122,0.16); } @media (min-width: 761px) { .plan.pro { transform: translateY(-12px); } } /* Soft floor-glow so the hero phone reads as floating, not pasted */ .hero-stage::after { content: ""; position: absolute; bottom: 5%; left: 50%; transform: translateX(-50%); width: 62%; height: 72px; z-index: 0; pointer-events: none; background: radial-gradient(ellipse at center, rgba(212,175,122,0.14), transparent 72%); filter: blur(30px); } /* Gold-foil shimmer on the single hero lead number (used once, sparingly) */ .hero-proof .hp:first-child .hpv { background: linear-gradient(100deg, #E9D2A0 0%, #D4AF7A 34%, #B8924A 58%, #EBC889 82%, #D4AF7A 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } @media (prefers-reduced-motion: no-preference) { .hero-proof .hp:first-child .hpv { animation: foilSheen 7s ease-in-out infinite; } } @keyframes foilSheen { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* ============================================================ "What CARDIER protects" interactive section (homepage) ============================================================ */ .prot-chips { display: flex; gap: 10px; margin-top: 44px; flex-wrap: wrap; } .prot-chip { display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px 9px 10px; background: rgba(255,255,255,0.03); border: 1px solid var(--line); border-radius: 999px; cursor: pointer; color: var(--ink-2); font-family: var(--font-sans); font-size: 13.5px; font-weight: 500; transition: border-color .25s, color .25s, background .25s; } .prot-chip:hover { border-color: var(--gold-soft); color: var(--ink); } .prot-chip.on { background: var(--gold-soft); border-color: var(--gold); color: var(--gold); } .prot-chip .cc-slot { flex: none; } .prot-chip-n { line-height: 1; } .prot-chip:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } .prot-stage { margin-top: 28px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 24px; overflow: hidden; position: relative; } .prot-panel { padding: clamp(28px,4vw,40px); display: block; } .prot-panel[hidden] { display: none; } .prot-head { display: grid; grid-template-columns: auto 1fr auto; gap: clamp(20px,3vw,40px); align-items: center; padding-bottom: 28px; border-bottom: 1px solid var(--line); } .prot-head .prot-hero-card { filter: drop-shadow(0 18px 30px rgba(0,0,0,0.45)); } .prot-head-meta { min-width: 0; } .prot-eyebrow { font-family: var(--font-display); font-size: 24px; line-height: 1.1; letter-spacing: -0.008em; color: var(--ink); } .prot-fee { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3); letter-spacing: 0.04em; margin-top: 8px; display: flex; gap: 8px; align-items: baseline; } .prot-fee b { color: var(--ink); font-weight: 500; font-size: 13.5px; } .prot-summary { display: grid; grid-template-columns: repeat(3, auto); gap: clamp(14px,2vw,28px); } .prot-sum-cell { text-align: right; } .prot-sum-cell .psl { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); } .prot-sum-cell .psv { font-family: var(--font-mono); font-size: clamp(22px,2.4vw,30px); font-weight: 600; letter-spacing: -0.02em; color: var(--ink); margin-top: 6px; line-height: 1; } .prot-sum-cell.gold .psv { color: var(--gold); } .prot-sum-cell.sage .psv { color: var(--sage); } .prot-rows { margin-top: 24px; display: flex; flex-direction: column; gap: 8px; } .prot-row { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: rgba(255,255,255,0.02); border: 1px solid var(--line); border-radius: 14px; transition: border-color .25s; } .prot-row .prn { font-size: 14.5px; color: var(--ink); font-weight: 500; line-height: 1.2; } .prot-row .prs { font-size: 12px; color: var(--ink-3); margin-top: 4px; line-height: 1.4; } .prot-row > div:first-child { min-width: 0; flex: 0 0 auto; max-width: 60%; } .prot-row .grow { flex: 1; } .prot-row .prv { font-family: var(--font-mono); font-size: 14.5px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; min-width: 56px; text-align: right; flex: none; } .prot-row .prd { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--ink-3); min-width: 44px; text-align: right; flex: none; padding: 4px 8px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,0.02); } .prot-row .prd.urgent { color: var(--urgent); border-color: rgba(230,107,92,0.3); background: rgba(230,107,92,0.08); } .prot-row .prd.amber { color: var(--amber); border-color: rgba(228,167,82,0.3); background: rgba(228,167,82,0.08); } .prot-row .prd.done { color: var(--sage); border-color: rgba(111,191,138,0.3); background: rgba(111,191,138,0.08); } .prot-row .prv.done { color: var(--sage); } .prot-row.urgent { border-color: rgba(230,107,92,0.22); background: rgba(230,107,92,0.04); } .prot-row.amber { border-color: rgba(228,167,82,0.22); background: rgba(228,167,82,0.03); } .prot-row.captured { opacity: 0.72; } .prot-row.captured:hover { opacity: 1; } .prot-foot { font-family: var(--font-display); font-size: clamp(15px,1.5vw,17px); font-style: italic; color: var(--ink-2); margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); line-height: 1.5; } @media (max-width: 720px) { .prot-head { grid-template-columns: 1fr; gap: 20px; } .prot-head .prot-hero-card { display: none; } .prot-summary { grid-template-columns: 1fr 1fr 1fr; gap: 10px; } .prot-sum-cell { text-align: left; } .prot-row { flex-wrap: wrap; } .prot-row > div:first-child { max-width: 100%; flex: 1 1 100%; } .prot-row .grow { display: none; } } /* ============================================================ Comparison pages (/best-cards-for-*) ============================================================ */ .cmp-page { background: var(--bg); color: var(--ink); } .cmp-hero { position: relative; padding: 132px 0 80px; overflow: hidden; } .cmp-hero .hero-glow { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .cmp-hero .hero-glow::before { content: ""; position: absolute; border-radius: 50%; filter: blur(140px); width: 580px; height: 580px; top: -230px; right: -180px; background: radial-gradient(circle, rgba(212,175,122,0.08), transparent 70%); } .cmp-hero .wrap { position: relative; z-index: 2; } .cmp-hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(28px,5vw,72px); align-items: center; } .cmp-hero h1 { font-family: var(--font-display); font-size: clamp(40px,5.2vw,68px); line-height: 1.02; letter-spacing: -0.02em; margin-top: 14px; max-width: 640px; } .cmp-hero h1 em { font-style: italic; color: var(--gold); letter-spacing: -0.014em; } .cmp-hero .lede { font-size: clamp(16px,1.6vw,19px); color: var(--ink-2); line-height: 1.62; margin-top: 22px; max-width: 540px; } .cmp-hero-meta { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-3); margin-top: 32px; display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap; } .cmp-hero-meta::before { content: ""; width: 28px; height: 1px; background: var(--line-2); } .cmp-hero-meta .sep { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-4); } .cmp-hero-stage { position: relative; display: grid; place-items: center; min-height: 360px; } .cmp-hero-stage::before { content: ""; position: absolute; inset: 12% 8%; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(212,175,122,0.10), transparent 65%); filter: blur(40px); z-index: 1; } .cmp-hero-stage .cc-slot { position: absolute; filter: drop-shadow(0 30px 50px rgba(0,0,0,0.6)); } .cmp-hero-stage .csc-1 { top: 6%; right: 0%; transform: rotate(8deg); z-index: 4; } .cmp-hero-stage .csc-2 { top: 38%; right: 30%; transform: rotate(-4deg); z-index: 3; opacity: 0.94; } .cmp-hero-stage .csc-3 { bottom: 6%; left: 4%; transform: rotate(-12deg); z-index: 2; opacity: 0.86; } .js .cmp-hero-stage .csc-1 { animation: cmpC1 0.9s var(--ease) 0.30s both; } .js .cmp-hero-stage .csc-2 { animation: cmpC2 0.9s var(--ease) 0.48s both; } .js .cmp-hero-stage .csc-3 { animation: cmpC3 0.9s var(--ease) 0.66s both; } @keyframes cmpC1 { from { opacity: 0; transform: rotate(14deg) translate(36px,-18px); } to { opacity: 1; transform: rotate(8deg) translate(0,0); } } @keyframes cmpC2 { from { opacity: 0; transform: rotate(2deg) translate(28px,0); } to { opacity: 0.94; transform: rotate(-4deg) translate(0,0); } } @keyframes cmpC3 { from { opacity: 0; transform: rotate(-20deg) translate(-30px,20px); } to { opacity: 0.86; transform: rotate(-12deg) translate(0,0); } } @media (max-width: 880px) { .cmp-hero-grid { grid-template-columns: 1fr; } .cmp-hero-stage { min-height: 240px; margin-top: 12px; } } @media (max-width: 540px) { .cmp-hero-stage { display: none; } } @media (prefers-reduced-motion: reduce) { .js .cmp-hero-stage .cc-slot { animation: none; } } .cmp-tldr { background: var(--bg-1); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); position: relative; } .cmp-tldr::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(212,175,122,0.18) 38%, rgba(212,175,122,0.18) 62%, transparent); pointer-events: none; } .cmp-tldr-inner { padding: clamp(48px,6vw,80px) 0; } .cmp-tldr .eyebrow { color: var(--gold); display: inline-flex; align-items: center; gap: 14px; } .cmp-tldr .eyebrow::before { content: ""; width: 32px; height: 1px; background: currentColor; opacity: 0.4; flex: none; } .cmp-tldr h2 { font-family: var(--font-display); font-size: clamp(28px,3.4vw,42px); line-height: 1.05; letter-spacing: -0.016em; margin-top: 18px; max-width: 640px; } .cmp-tldr h2 em { font-style: italic; color: var(--gold); } .persona-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; } .persona { background: var(--bg-2); border: 1px solid var(--line); border-radius: 20px; padding: 28px 26px; display: flex; flex-direction: column; transition: border-color .3s var(--ease); } .persona:hover { border-color: var(--gold-soft); } .persona-tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); } .persona h3 { font-family: var(--font-display); font-size: 22px; line-height: 1.15; letter-spacing: -0.008em; margin-top: 14px; } .persona h3 em { font-style: italic; color: var(--gold); } .persona .ppr { font-size: 13.5px; color: var(--ink-2); line-height: 1.6; margin-top: 10px; flex: 1; } .persona-pick { display: flex; align-items: center; gap: 12px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); } .persona-pick .cc-slot { flex: none; } .persona-pick-m { display: flex; flex-direction: column; min-width: 0; } .persona-pick-name { font-family: var(--font-display); font-size: 17px; line-height: 1; letter-spacing: -0.005em; color: var(--ink); } .persona-pick-why { font-size: 12px; color: var(--ink-3); margin-top: 4px; line-height: 1.4; } @media (max-width: 820px) { .persona-grid { grid-template-columns: 1fr; } } .cmp-table-section { padding: clamp(64px,8vw,112px) 0; } .cmp-table-section .eyebrow { color: var(--gold); display: inline-flex; align-items: center; gap: 14px; } .cmp-table-section .eyebrow::before { content: ""; width: 32px; height: 1px; background: currentColor; opacity: 0.4; flex: none; } .cmp-table-section h2 { font-family: var(--font-display); font-size: clamp(28px,3.4vw,42px); line-height: 1.05; letter-spacing: -0.016em; margin-top: 18px; max-width: 640px; } .cmp-table-section h2 em { font-style: italic; color: var(--gold); } .cmp-table-section .lead { font-size: 16px; color: var(--ink-2); line-height: 1.62; margin-top: 18px; max-width: 540px; } .cmp-tbl-wrap { margin-top: 44px; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; background: var(--bg-2); } .cmp-tbl { width: 100%; border-collapse: collapse; min-width: 720px; } .cmp-tbl thead th { background: var(--bg-3); padding: 22px 18px; text-align: left; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--line); vertical-align: bottom; font-weight: 500; } .cmp-tbl thead th.card-col { vertical-align: top; } .cmp-tbl .cth-card { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; text-transform: none; letter-spacing: 0; font-family: var(--font-sans); } .cmp-tbl .cth-card .cc-slot { flex: none; } .cmp-tbl .cth-card-name { font-family: var(--font-display); font-size: 16px; line-height: 1.15; color: var(--ink); letter-spacing: -0.005em; } .cmp-tbl .cth-card-issuer { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-4); } .cmp-tbl tbody td { padding: 18px; border-top: 1px solid var(--line); color: var(--ink-2); font-size: 14px; line-height: 1.5; vertical-align: top; } .cmp-tbl tbody td.row-label { color: var(--ink-3); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; } .cmp-tbl tbody td .v { color: var(--ink); font-weight: 500; } .cmp-tbl tbody td .dim { color: var(--ink-4); } .cmp-tbl tbody td .gold { color: var(--gold); } .cmp-tbl tbody td .sage { color: var(--sage); } .cmp-tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .cmp-tbl-note { font-size: 11px; color: var(--ink-4); margin-top: 14px; line-height: 1.55; } /* Sticky first column for horizontal-scroll readability on mobile */ @media (max-width: 820px) { .cmp-tbl thead th:first-child { position: sticky; left: 0; z-index: 2; background: var(--bg-3); } .cmp-tbl tbody td.row-label { position: sticky; left: 0; z-index: 1; background: var(--bg-2); box-shadow: 1px 0 0 var(--line); } } .card-deep { padding: clamp(64px,8vw,112px) 0; background: var(--bg-1); position: relative; } .card-deep::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(212,175,122,0.18) 38%, rgba(212,175,122,0.18) 62%, transparent); } .card-deep .eyebrow { color: var(--gold); display: inline-flex; align-items: center; gap: 14px; } .card-deep .eyebrow::before { content: ""; width: 32px; height: 1px; background: currentColor; opacity: 0.4; flex: none; } .card-deep h2 { font-family: var(--font-display); font-size: clamp(28px,3.4vw,42px); line-height: 1.05; letter-spacing: -0.016em; margin-top: 18px; } .card-deep h2 em { font-style: italic; color: var(--gold); } .card-deep .deep-list { display: flex; flex-direction: column; gap: 24px; margin-top: 44px; } .card-deep-row { display: grid; grid-template-columns: 220px 1fr; gap: clamp(20px,3vw,40px); padding: 28px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 20px; align-items: start; } .card-deep-row .deep-vis { display: grid; place-items: center; align-self: center; } .card-deep-row .deep-vis .cc-slot { filter: drop-shadow(0 20px 36px rgba(0,0,0,0.5)); } .card-deep-row .deep-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .card-deep-row .deep-name { font-family: var(--font-display); font-size: 24px; line-height: 1.1; letter-spacing: -0.008em; } .card-deep-row .deep-name em { font-style: italic; color: var(--gold); } .card-deep-row .deep-fee { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); letter-spacing: 0.06em; } .card-deep-row .deep-fee b { color: var(--ink); font-weight: 500; } .card-deep-row .deep-best { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin-top: 14px; } .card-deep-row .deep-best::before { content: ""; width: 18px; height: 1px; background: var(--gold); opacity: 0.5; } .card-deep-row .deep-body { color: var(--ink-2); font-size: 15px; line-height: 1.62; margin-top: 12px; } .card-deep-row .deep-body p + p { margin-top: 10px; } .card-deep-row .deep-body strong { color: var(--ink); font-weight: 500; } .card-deep-row .deep-pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; } .card-deep-row .deep-pros, .card-deep-row .deep-cons { background: rgba(255,255,255,0.02); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; } .card-deep-row .deep-pros h4, .card-deep-row .deep-cons h4 { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; } .card-deep-row .deep-pros h4 { color: var(--sage); } .card-deep-row .deep-cons h4 { color: var(--urgent); } .card-deep-row .deep-pros ul, .card-deep-row .deep-cons ul { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-direction: column; gap: 6px; } .card-deep-row .deep-pros li, .card-deep-row .deep-cons li { font-size: 13px; color: var(--ink-2); line-height: 1.5; padding-left: 14px; position: relative; } .card-deep-row .deep-pros li::before { content: "+"; position: absolute; left: 0; color: var(--sage); font-weight: 500; } .card-deep-row .deep-cons li::before { content: "−"; position: absolute; left: 0; color: var(--urgent); font-weight: 500; } @media (max-width: 760px) { .card-deep-row { grid-template-columns: 1fr; } .card-deep-row .deep-vis { padding: 0 0 8px; } .card-deep-row .deep-pros-cons { grid-template-columns: 1fr; } } .cmp-why-cardier { padding: clamp(64px,8vw,112px) 0; background: var(--bg); } .cmp-why-cardier .eyebrow { color: var(--gold); display: inline-flex; align-items: center; gap: 14px; } .cmp-why-cardier .eyebrow::before { content: ""; width: 32px; height: 1px; background: currentColor; opacity: 0.4; flex: none; } .cmp-why-cardier h2 { font-family: var(--font-display); font-size: clamp(28px,3.6vw,46px); line-height: 1.04; letter-spacing: -0.018em; margin-top: 18px; max-width: 720px; } .cmp-why-cardier h2 em { font-style: italic; color: var(--gold); } .cmp-why-cardier .lead { font-size: 17px; color: var(--ink-2); line-height: 1.62; margin-top: 20px; max-width: 580px; } .cmp-why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 44px; } .cmp-why-cell { background: var(--bg-2); border: 1px solid var(--line); border-radius: 18px; padding: 26px 24px; } .cmp-why-cell .ic { width: 36px; height: 36px; border-radius: 10px; background: var(--gold-soft); display: grid; place-items: center; color: var(--gold); } .cmp-why-cell .ic svg { width: 18px; height: 18px; } .cmp-why-cell h3 { font-size: 16px; font-weight: 600; margin-top: 16px; letter-spacing: -0.005em; } .cmp-why-cell p { font-size: 13.5px; color: var(--ink-2); line-height: 1.6; margin-top: 10px; } @media (max-width: 820px) { .cmp-why-grid { grid-template-columns: 1fr; } } .cmp-cta { padding: clamp(64px,8vw,112px) 0; background: var(--bg-1); text-align: center; position: relative; overflow: hidden; } .cmp-cta .hero-glow { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .cmp-cta .hero-glow::before { content: ""; position: absolute; border-radius: 50%; filter: blur(140px); width: 600px; height: 600px; bottom: -240px; left: 50%; margin-left: -300px; background: radial-gradient(circle, rgba(212,175,122,0.10), transparent 70%); } .cmp-cta .wrap { position: relative; z-index: 2; } .cmp-cta .eyebrow { color: var(--gold); } .cmp-cta h2 { font-family: var(--font-display); font-size: clamp(36px,5vw,68px); line-height: 1.02; letter-spacing: -0.02em; margin-top: 18px; } .cmp-cta h2 em { font-style: italic; color: var(--gold); } .cmp-cta p { font-size: 17px; color: var(--ink-2); line-height: 1.62; margin: 22px auto 0; max-width: 520px; } .cmp-cta-btns { display: inline-flex; gap: 14px; margin-top: 32px; flex-wrap: wrap; justify-content: center; } .cmp-faq { padding: clamp(64px,8vw,112px) 0; background: var(--bg); } .cmp-faq .eyebrow { color: var(--gold); display: inline-flex; align-items: center; gap: 14px; } .cmp-faq .eyebrow::before { content: ""; width: 32px; height: 1px; background: currentColor; opacity: 0.4; flex: none; } .cmp-faq h2 { font-family: var(--font-display); font-size: clamp(28px,3.4vw,42px); line-height: 1.05; letter-spacing: -0.016em; margin-top: 18px; } .cmp-faq h2 em { font-style: italic; color: var(--gold); } .cmp-faq-list { margin-top: 36px; border-top: 1px solid var(--line); } .cmp-faq-item { border-bottom: 1px solid var(--line); padding: 22px 0; } .cmp-faq-q { font-family: var(--font-display); font-size: 19px; line-height: 1.3; letter-spacing: -0.005em; color: var(--ink); } .cmp-faq-q em { font-style: italic; color: var(--gold); } .cmp-faq-a { font-size: 15px; color: var(--ink-2); line-height: 1.65; margin-top: 12px; max-width: 720px; } .cmp-faq-a strong { color: var(--ink); font-weight: 500; } .cmp-disclaim { padding: 40px 0 64px; background: var(--bg); } .cmp-disclaim p { font-size: 11px; color: var(--ink-4); line-height: 1.6; max-width: 760px; } /* ---- Official logo: brand band + footer lockup ---- */ .brand-band { padding-top: clamp(80px,10vw,128px); padding-bottom: clamp(80px,10vw,128px); } .brand-band .wrap { position: relative; z-index: 1; } .bb-plate { display: block; width: clamp(120px,15vw,158px); margin: 0 auto; border-radius: clamp(24px,3vw,32px); overflow: hidden; border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 36px 72px -34px rgba(0,0,0,0.85); } .bb-plate img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; } .bb-mark { display: block; width: clamp(128px,16vw,178px); margin: 0 auto; filter: drop-shadow(0 22px 44px rgba(0,0,0,0.6)); } .bb-mark img { display: block; width: 100%; height: auto; } .bb-tag { margin-top: 16px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-3); } .footer .brand { gap: 12px; } /* Official wordmark — Marcellus (refined inscriptional Roman caps) */ .brandmark { font-family: "Marcellus", "Trajan Pro", Georgia, serif; font-weight: 400; text-transform: uppercase; letter-spacing: 0.28em; line-height: 1; white-space: nowrap; color: #d6dae2; background: linear-gradient(180deg, #f5f7fb 0%, #cdd2da 50%, #a6acb8 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .nav .brandmark { font-size: 15px; letter-spacing: 0.22em; padding-left: 5px; padding-right: 0.22em; } .footer .brandmark { font-size: 14.5px; letter-spacing: 0.26em; padding-left: 4px; } .bb-brandmark { display: block; margin-top: 28px; font-size: clamp(27px,3.5vw,42px); letter-spacing: 0.24em; padding-left: 0.24em; } /* ============================================================ Mobile hardening — Stats page & footer (560px / 480px) ============================================================ */ /* Stats: score ring + side text overflow at narrow widths — stack vertically */ @media (max-width: 560px) { .score-block { flex-direction: column; gap: 16px; } .score-side .ss-note { max-width: none; } /* Chart: 12 bars at 240px is fine on desktop, hairline-thin on phones */ .chart { height: 160px; } .bar .m { font-size: 9px; } } /* Stats: KPI values + share-card stats cramped at phone widths */ @media (max-width: 480px) { .kpi { padding: 20px 14px; } .kpi .k-v { font-size: 22px; } .sc-stat { padding: 12px 10px; } .sc-stat .v { font-size: 17px; } .sc-stat .l { font-size: 8.5px; } /* Footer: brand full-width top row, then 2-col link columns */ .footer-top { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; padding-bottom: 24px; border-bottom: 1px solid var(--line); } } /* ============================================================ v7 — Hero entrance + testimonials polish ============================================================ */ /* Hero copy: cinematic sequential entrance with deliberate stagger */ .hero-copy .reveal { transition-duration: .72s; } .hero-copy .hero-eyebrow.reveal { transition-delay: 0s; } .hero-copy h1.reveal { transition-delay: .18s; transition-duration: .85s; } .hero-copy .hero-sub.reveal { transition-delay: .36s; transition-duration: .85s; } .hero-copy .hero-actions.reveal { transition-delay: .54s; transition-duration: .8s; } .hero-copy .hero-proof.reveal { transition-delay: .72s; transition-duration: .8s; } @media (prefers-reduced-motion: reduce) { .hero-copy .reveal, .hero-copy h1.reveal, .hero-copy .hero-sub.reveal, .hero-copy .hero-actions.reveal, .hero-copy .hero-proof.reveal { transition-delay: 0s; transition-duration: 0s; } } /* Testimonials: decorative quote mark, metric pill, hover lift */ .quote { position: relative; overflow: hidden; transition: transform .4s var(--ease), box-shadow .4s var(--ease); } .quote:hover { transform: translateY(-5px); box-shadow: 0 28px 64px -28px rgba(212,175,122,0.18); } .qmark { position: absolute; top: -12px; right: 18px; font-family: var(--font-display); font-size: 130px; line-height: 1; color: var(--gold); opacity: 0.06; pointer-events: none; user-select: none; } .qsaved { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; background: rgba(212,175,122,0.09); border: 1px solid rgba(212,175,122,0.22); border-radius: 999px; padding: 5px 13px; font-size: 11.5px; font-family: var(--font-mono); color: var(--gold); letter-spacing: 0.04em; } /* Paper section overrides */ .sec-paper .qmark { color: var(--paper-gold); opacity: 0.05; } .sec-paper .quote:hover { box-shadow: 0 28px 64px -28px rgba(0,0,0,0.12); } .sec-paper .qsaved { background: rgba(156,118,55,0.08); border-color: rgba(156,118,55,0.22); color: var(--paper-gold); } @media (prefers-reduced-motion: reduce) { .quote { transition: none; } .quote:hover { transform: none; } } @media (max-width: 880px) { .qmark { font-size: 100px; } } /* Hero stage: staggered entrance for device + floating cards Safe to animate transforms here — parallax/tilt JS only fires on scroll/mousemove, so the animations complete before any override. */ @keyframes heroDeviceIn { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } } @keyframes heroFc1In { from { opacity: 0; transform: rotate(9deg) translateY(40px); } to { opacity: 1; transform: rotate(9deg); } } @keyframes heroFc2In { from { opacity: 0; transform: rotate(-11deg) translateY(40px); } to { opacity: 1; transform: rotate(-11deg); } } @keyframes heroFadeIn { from { opacity: 0; } to { opacity: 1; } } .js .hero-stage .device-halo { animation: heroFadeIn 1.1s var(--ease) 0.22s both; } .js .hero-stage .fc-1 { animation: heroFc1In 0.8s var(--ease) 0.14s both; } .js .hero-stage .device { animation: heroDeviceIn 0.9s var(--ease) 0.3s both; } .js .hero-stage .fc-2 { animation: heroFc2In 0.8s var(--ease) 0.52s both; } @media (prefers-reduced-motion: reduce) { .js .hero-stage .device, .js .hero-stage .fc-1, .js .hero-stage .fc-2, .js .hero-stage .device-halo { animation: none; } }