/* ═══════════════════════════════════════════════════════════════════ site-b.css — Dopa Toll landing (Option B, "App Store screenshot" aesthetic). Warm cream canvas, heavy display sans, highlight marks, mask-faded phone screenshots, zig-zag two-column grid. DUAL THEME: ships DARK ("ember") by default; a cream/light palette is the opt-in via the topbar toggle (persisted to localStorage). The device screenshots are transparent PNGs, so they read on either canvas. Pairs with index-b.html + calc.js. The scroll-reveal + the calculator year-hero count-up are driven by calc.js; the CSS below reproduces the `html.anim-ready`-gated hooks calc.js expects (fail-safe: no-JS and reduced-motion keep everything fully visible). ═══════════════════════════════════════════════════════════════════ */ :root { /* Font stacks — theme-independent, always defined here. */ --disp: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; --body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif; /* Highlight marks — identical on both themes (readable on cream + ember). */ --hl-y: #ffd93d; /* coins / $ */ --hl-g: #2fe0a4; /* success */ --hl-r: #f0545a; /* danger */ /* ───────────────────────────────────────────────────────────────── DEFAULT theme = DARK ("ember"). No data-theme attribute → this set. The cream/light palette is the opt-in override in html[data-theme="light"] below (manual toggle + localStorage in index-b.html). These ember values reproduce the previous dark block 1:1, so the default now renders exactly as the old [data-theme=dark]. */ --cream: #180a04; /* page canvas base */ --card: rgba(255, 255, 255, .055); --well: rgba(255, 255, 255, .06); --well-2: rgba(255, 255, 255, .09); --ink: #f4ece6; --dim: rgba(244, 236, 230, .62); --eyebrow: rgba(244, 236, 230, .5); --line: rgba(255, 255, 255, .12); --line-soft: rgba(255, 255, 255, .08); --gold: #ffd93d; --stat-rate: #ffd93d; --stat-day: #f4ece6; --stat-year: #ff5a60; /* legacy aliases so the verbatim calculator inline styles resolve */ --text-primary: rgba(244, 236, 230, .90); --text-secondary: rgba(244, 236, 230, .60); --text-tertiary: rgba(244, 236, 230, .48); --text-strong: #f7f2ec; /* themeable component tokens — ember (default) values */ --topbar-bg: #1b0c05; /* scrolled bar — SOLID + opaque so iOS samples one exact color for the status-bar strip (frosted/translucent can't be matched — see index.html theme-color) */ --topbar-shadow: 0 6px 22px rgba(0, 0, 0, .34); /* soft depth under the pinned bar — replaces the hard hairline, which was a --line border (white in dark / black in light) that flashed a dash at the boundary the instant the bar pinned */ --btn-p-bg: #ffd93d; /* gold primary fill */ --btn-p-fg: #2a1c00; /* dark text on gold */ --btn-ghost-bg: rgba(255, 255, 255, .08); --badge-bg: #f4ece6; /* off-white slab */ --badge-fg: #180a04; /* dark text + Apple glyph */ --seg-active-bg: rgba(255, 255, 255, .14); --well-focus: rgba(255, 255, 255, .10); --ring: rgba(255, 217, 61, .45); } /* ═══════════════════════════════════════════════════════════════════ LIGHT ("cream") theme — opt-in ONLY via . Never auto-applied (no prefers-color-scheme); the manual toggle + localStorage in index-b.html drive it. Overrides every color token to the warm cream palette; structure/layout are shared with the ember default. These values reproduce the previous cream default 1:1. ═══════════════════════════════════════════════════════════════════ */ html[data-theme="light"] { --cream: #f6edde; /* page canvas */ --card: #fffaf0; /* raised card surface (lighter than canvas) */ --well: #efe3d0; /* inset wells: inputs, stat cells */ --well-2: #f1e6d4; /* segmented-toggle track */ --ink: #1d1710; /* display headings, primary text */ --dim: #5b5344; /* body copy */ --eyebrow: #9a8c74; /* uppercase section labels */ --line: rgba(29, 23, 16, .12); --line-soft: rgba(29, 23, 16, .08); --gold: #c79a12; /* brand chevron / warm accent */ /* readable-on-cream stat colors (yellow/red text needs darkening) */ --stat-rate: #9a7410; --stat-day: #1d1710; --stat-year: #d8323b; --text-primary: #1d1710; --text-secondary: #6b6252; --text-tertiary: #857b6b; --text-strong: #1d1710; /* component tokens — cream values (reproduce the old hardcoded colors 1:1) */ --topbar-bg: #f2e9d8; /* scrolled bar — SOLID (matches theme-color, not white) */ --topbar-shadow: 0 4px 18px rgba(58, 28, 12, .10); /* soft depth (no hard hairline) */ --btn-p-bg: var(--ink); /* primary button fill */ --btn-p-fg: #fff; /* primary button text */ --btn-ghost-bg: var(--card); /* ghost button fill */ --badge-bg: var(--ink); /* App Store slab */ --badge-fg: #fffaf0; /* App Store text + Apple glyph */ --seg-active-bg: var(--card); /* active segmented pill */ --well-focus: #ece0cb; /* input row focus bg */ --ring: rgba(199, 154, 18, .45); /* input row focus ring */ } * { box-sizing: border-box; } /* html base = the darkest ember stop, so if anything ever repaints it shows ember, never white. */ html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: #180a04; } html[data-theme="light"] { background: #f6edde; } body { margin: 0; color: var(--ink); font-family: var(--body); line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* NOTE: no overflow-x here on purpose — an `overflow` ancestor breaks the sticky topbar. Nothing overflows horizontally (verified), so it's not needed. */ } /* DEFAULT canvas = the warm ember gradient, pinned to the viewport as its OWN fixed layer under the transparent-PNG phone mockups (their masks fade to reveal it). A fixed PSEUDO-ELEMENT — NOT `background-attachment: fixed`, which flashes white on iOS Safari: when the toolbar collapses on the first scroll, the viewport resizes and iOS re-composites a fixed background, blanking it for a frame. A real fixed element doesn't hit that repaint bug. */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; will-change: transform; /* pre-promote this fixed layer too — same first-scroll flash guard */ background: radial-gradient(115% 80% at 12% -5%, #4d1c0a 0%, rgba(77, 28, 10, 0) 52%), radial-gradient(90% 70% at 95% 8%, #34140b 0%, rgba(52, 20, 11, 0) 46%), linear-gradient(158deg, #2c1207 0%, #180a04 52%, #0d0804 100%); } /* Light ("cream") page canvas — opt-in via . */ html[data-theme="light"] body::before { background: #f6edde; } .wrap { max-width: 1180px; margin: 0 auto; /* safe-area insets folded into the horizontal padding */ padding-left: max(clamp(20px, 4vw, 44px), env(safe-area-inset-left)); padding-right: max(clamp(20px, 4vw, 44px), env(safe-area-inset-right)); } img { max-width: 100%; } /* ─── Type ─── */ .eyebrow { display: block; font-family: var(--disp); font-weight: 700; font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--eyebrow); } h1, h2, h3 { font-family: var(--disp); font-weight: 800; letter-spacing: -.03em; line-height: 1.02; color: var(--ink); text-wrap: balance; margin: 0; } .hl { padding: .02em .18em; border-radius: 4px; color: #1c1508; box-decoration-break: clone; -webkit-box-decoration-break: clone; } .hl.y { background: var(--hl-y); } .hl.g { background: var(--hl-g); } .hl.r { background: var(--hl-r); color: #fff; } /* ─── Links (base) ─── */ a { color: inherit; } :focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; } /* ─── Buttons ─── */ .btn { font-family: var(--disp); font-weight: 700; font-size: .9rem; padding: 11px 18px; border-radius: 12px; border: 1px solid transparent; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; transition: transform .12s ease, background .15s ease, color .15s ease, opacity .15s ease; } .btn-primary { background: var(--btn-p-bg); color: var(--btn-p-fg); } .btn-ghost { background: var(--btn-ghost-bg); border-color: var(--line); color: var(--ink); } @media (hover: hover) { .btn-primary:hover { transform: translateY(-1px); } .btn-ghost:hover { border-color: var(--ink); } } .btn:active { transform: scale(.98); } /* ─── Theme toggle (☀/☾) — lives in the topbar row ─── */ .theme-toggle { flex: none; width: 40px; /* 40px to match .menu-btn + the Download button — one 40px action row */ height: 40px; border-radius: 10px; border: 1px solid var(--line); background: var(--btn-ghost-bg); color: var(--ink); font-size: 16px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; transition: transform .12s ease, background .15s ease, border-color .15s ease, color .15s ease; } @media (hover: hover) { .theme-toggle:hover { border-color: var(--ink); transform: translateY(-1px); } } .theme-toggle:active { transform: scale(.95); } .theme-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } /* ─── Sticky top bar ─── */ .topbar { position: sticky; top: 0; z-index: 20; /* Pre-create the GPU layer on load so the FIRST scroll doesn't promote it (that one-time promotion paints a frame → the "flashes once, only the first time you scroll" artifact). A hint, not a transform, so sticky is untouched. */ will-change: transform; /* transparent at the very top (blends into the hero), solid once scrolled. NO background transition on purpose: during a fade the bar is momentarily semi-transparent, and iOS samples THROUGH it to the bright hero/phone behind → the status bar flashes light/white for the fade's duration. Snapping between transparent and the solid color means iOS only ever samples one flat color. */ background: transparent; padding-top: env(safe-area-inset-top); } .topbar.scrolled { /* SOLID + opaque, no backdrop-filter: iOS 26 samples the sticky bar's own bg for the status-bar tint, and a translucent/blurred bar can't be matched exactly → two-tone seam. A flat color = status bar and menu bar are one surface. */ background: var(--topbar-bg); /* soft shadow, NOT a border-bottom: a 1px --line hairline is white in dark / black in light, so it flashed an inverse-colored dash at the boundary the moment the bar pinned. A blurred shadow reads as depth, not a line. */ box-shadow: var(--topbar-shadow); } .topbar .row { display: flex; align-items: center; gap: 16px; height: 62px; position: relative; } .menu-btn { display: none; /* desktop: hidden (the inline nav is shown) */ width: 40px; height: 40px; padding: 0; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); cursor: pointer; } .menu-btn span { width: 18px; height: 2px; background: var(--ink); border-radius: 2px; } .menu-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } .brand { font-family: var(--disp); font-weight: 800; letter-spacing: -.01em; font-size: 1.08rem; display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); } .brand .chev { color: var(--gold); } .nav { margin-left: auto; display: flex; gap: 24px; font-family: var(--disp); font-weight: 600; font-size: .9rem; color: var(--dim); } .nav a { text-decoration: none; color: inherit; } .nav a:hover { color: var(--ink); } /* Download button: when nav is hidden (mobile) it pushes to the right */ .topbar .btn-primary { /* Size to the ☀/☰ icon buttons: 40px tall + 10px radius, so the three read as one action row. Download stands out by COLOR (gold), not by being bigger/rounder than its neighbours — the base .btn's 44px height + 12px radius made it loom. */ margin-left: 0; height: 40px; padding: 0 16px; border-radius: 10px; font-size: .875rem; /* A touch LIGHTER than the hero's #ffd93d — the persistent topbar CTA shouldn't shout as loud as the hero button. Dark theme only; cream keeps its ink primary. */ background: #ffe066; } html[data-theme="light"] .topbar .btn-primary { background: var(--btn-p-bg); } /* ─── Two-column feature section grid (zig-zag) ─── */ .sec { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: center; padding: clamp(48px, 7vw, 104px) 0; scroll-margin-top: calc(70px + env(safe-area-inset-top)); /* #how etc. land below the sticky bar, not under it */ } .sec.flip .copy { order: 2; } /* flipped → phone lands on the left */ .copy h1 { font-size: clamp(2.4rem, 5.2vw, 3.9rem); margin: 16px 0 0; } .copy h2 { font-size: clamp(2rem, 4vw, 3rem); margin: 14px 0 0; } .lead { font-family: var(--disp); font-weight: 700; font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: var(--ink); margin: 20px 0 0; } .sub { font-size: clamp(1rem, 1.3vw, 1.12rem); color: var(--dim); margin: 12px 0 0; max-width: 44ch; } .ctas { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 0; } /* ─── Phone mockup: FULL transparent-PNG device at its natural aspect ratio ─── Never clip or set a max-height — that changes the visible proportions. Scale uniformly by width only; the image keeps its ratio. Soft shadow floats it. */ .shot { display: flex; align-items: flex-start; justify-content: center; } .shot .clip { width: min(440px, 92%); max-height: 580px; /* clip the tall phone so it doesn't overpower the text column */ overflow: hidden; /* dissolve the clipped bottom into the page bg */ -webkit-mask: linear-gradient(#000 80%, transparent 100%); mask: linear-gradient(#000 80%, transparent 100%); } .shot img { width: 100%; height: auto; aspect-ratio: auto; /* NATURAL ratio — no stretch. The clip above shows the TOP portion. */ display: block; } /* ─── Full-width centered blocks (calculator / FAQ / privacy / CTA) ─── */ .block { padding: clamp(48px, 7vw, 104px) 0; scroll-margin-top: calc(70px + env(safe-area-inset-top)); } /* #calculator / #faq clear the sticky bar */ .block-head { text-align: center; max-width: 680px; margin: 0 auto clamp(28px, 4vw, 44px); } .block-head h2 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); margin: 14px 0 0; } /* ═══════════ Calculator (cream card) ═══════════ */ .calc-card { max-width: 720px; margin: 0 auto; background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: clamp(20px, 3vw, 32px); box-shadow: 0 24px 60px -34px rgba(29, 23, 16, .35); overflow: hidden; } /* mode toggle */ .calc-mode-toggle { display: flex; gap: 4px; background: var(--well-2); border: 1px solid var(--line-soft); border-radius: 12px; padding: 4px; margin-bottom: 14px; } .calc-mode-btn { flex: 1; background: transparent; border: none; border-radius: 8px; padding: 10px 10px; font-size: 13px; font-weight: 600; color: var(--dim); cursor: pointer; font-family: inherit; transition: background .15s, color .15s, box-shadow .15s; } .calc-mode-btn.active { background: var(--seg-active-bg); color: var(--ink); box-shadow: 0 1px 3px rgba(29, 23, 16, .12); } .calc-mode-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; } .calc-inputs-stack { display: flex; flex-direction: column; gap: 12px; } .calc-mode-group { display: flex; flex-direction: column; gap: 12px; } .calc-mode-group[hidden] { display: none; } /* input rows */ .calc-input-row { display: flex; align-items: center; justify-content: space-between; background: var(--well); border: 1px solid var(--line-soft); border-radius: 12px; padding: 12px 14px; min-height: 48px; transition: background .15s, box-shadow .15s; } .calc-input-row:focus-within { background: var(--well-focus); box-shadow: 0 0 0 2px var(--ring); } .calc-input-row label { font-size: 14px; color: var(--dim); font-weight: 500; } .calc-input-row .field { display: flex; align-items: baseline; gap: 4px; } .calc-input-row input { background: transparent; border: none; color: var(--ink); font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; width: 90px; outline: none; font-family: ui-rounded, -apple-system, BlinkMacSystemFont, "SF Pro Rounded", sans-serif; -moz-appearance: textfield; appearance: textfield; padding: 4px 0; } .calc-input-row input::-webkit-outer-spin-button, .calc-input-row input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .calc-input-row .suffix { font-size: 12px; color: var(--eyebrow); } /* privacy reassurance */ .calc-privacy { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 16px 0 2px; font-size: 12.5px; color: var(--text-tertiary); line-height: 1.4; text-align: center; } .calc-privacy svg { width: 13px; height: 13px; flex: none; opacity: .8; } .calc-divider { height: 1px; background: var(--line); margin: 24px 0 22px; } /* 3-col stat strip */ .calc-stat-strip { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; } .calc-stat { background: var(--well); border: 1px solid var(--line-soft); border-radius: 12px; padding: 18px 12px; text-align: center; min-width: 0; } .calc-stat-label { font-size: 11px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--dim); margin-bottom: 8px; white-space: nowrap; } .calc-stat-value { font-size: clamp(20px, 2.4vw, 26px); font-weight: 800; font-family: ui-rounded, -apple-system, BlinkMacSystemFont, "SF Pro Rounded", sans-serif; font-variant-numeric: tabular-nums; letter-spacing: -.01em; line-height: 1.1; overflow: hidden; text-overflow: clip; } .calc-stat-value.rate { color: var(--stat-rate); } .calc-stat-value.day { color: var(--stat-day); } .calc-stat-value.year { color: var(--stat-year); } /* notes */ .calc-note { font-size: 13px; color: var(--text-tertiary); line-height: 1.6; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line-soft); } .calc-note strong { color: var(--text-primary); } .calc-result-cta .calc-note { border-top: none; padding-top: 0; } .calc-result-cta a:hover { text-decoration: underline; } /* share block */ .calc-share { margin-top: 22px; display: flex; flex-direction: column; align-items: stretch; gap: 12px; } .calc-share-toggle { display: flex; gap: 6px; background: var(--well-2); border: 1px solid var(--line-soft); border-radius: 12px; padding: 4px; } .calc-share-opt { flex: 1; appearance: none; background: transparent; border: 0; border-radius: 9px; padding: 10px 10px; font: inherit; font-size: 14px; font-weight: 600; color: var(--dim); cursor: pointer; transition: background .15s, color .15s, box-shadow .15s; } .calc-share-opt.active { background: var(--seg-active-bg); color: var(--ink); box-shadow: 0 1px 3px rgba(29, 23, 16, .12); } .calc-share-opt:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; } .calc-preview { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 4px; padding-top: 18px; border-top: 1px solid var(--line-soft); } .calc-preview[hidden] { display: none; } .calc-preview-img { width: 200px; max-width: 62%; height: auto; border-radius: 16px; border: 1px solid var(--line); box-shadow: 0 16px 36px -18px rgba(29, 23, 16, .55); } .calc-preview-img[hidden] { display: none; } .calc-hide-rate { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--dim); cursor: pointer; user-select: none; } .calc-hide-rate[hidden] { display: none; } .calc-hide-rate input { width: 17px; height: 17px; accent-color: var(--ink); cursor: pointer; } .calc-preview-actions { display: flex; gap: 10px; width: 100%; } .calc-preview-actions .calc-share-btn { flex: 1; } .calc-share-btn { appearance: none; border: 0; border-radius: 12px; padding: 14px 18px; font: inherit; font-size: 16px; font-weight: 700; color: var(--btn-p-fg); background: var(--btn-p-bg); cursor: pointer; transition: transform .05s, opacity .15s, filter .15s; } @media (hover: hover) { .calc-share-btn:hover { filter: brightness(1.12); } } .calc-share-btn:active { transform: translateY(1px); } .calc-share-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } .calc-share-btn.ghost { color: var(--ink); background: var(--btn-ghost-bg); border: 1px solid var(--line); } .calc-share-btn:disabled { opacity: .45; cursor: not-allowed; filter: none; } .calc-share-hint { font-size: 12px; color: var(--text-tertiary); line-height: 1.5; margin: 0; text-align: center; } /* ═══════════ App Store badge (dark badge on cream) ═══════════ */ .app-store-badge { display: inline-flex; align-items: center; gap: 12px; background: var(--badge-bg); color: var(--badge-fg); padding: 14px 24px; border-radius: 12px; font-weight: 700; font-size: 15px; text-decoration: none; -webkit-user-select: none; user-select: none; transition: transform .1s, opacity .15s; } @media (hover: hover) { .app-store-badge:hover { transform: translateY(-1px); text-decoration: none; } } .app-store-badge:active { transform: scale(.97); opacity: .85; } .app-store-badge .apple-glyph { /* Apple mark as a CSS mask so its color comes from --badge-fg and flips with the theme (light glyph on the dark cream slab / dark glyph on the off-white ember slab). Mask uses the shape's alpha, so fill is opaque. */ width: 20px; height: 24px; display: inline-block; background-color: var(--badge-fg); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z'/%3E%3C/svg%3E") no-repeat center / contain; } .app-store-badge-stack { display: flex; flex-direction: column; line-height: 1.15; align-items: flex-start; } .app-store-badge-stack .small { font-size: 11px; font-weight: 500; letter-spacing: .4px; text-transform: uppercase; opacity: .72; } .app-store-badge-stack .big { font-size: 16px; font-weight: 700; } /* ═══════════ FAQ ═══════════ */ .faq-list { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; } .faq-item { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 22px clamp(18px, 3vw, 26px); } .faq-item h3 { font-size: 1.12rem; letter-spacing: -.01em; margin: 0 0 8px; } .faq-item p { margin: 0; color: var(--dim); font-size: 1rem; line-height: 1.6; } .faq-item strong { color: var(--ink); } /* ═══════════ Privacy ═══════════ */ .privacy-panel { max-width: 720px; margin: 0 auto; background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: clamp(24px, 4vw, 40px); text-align: center; } .privacy-copy { font-family: var(--disp); font-weight: 600; font-size: clamp(1.05rem, 1.7vw, 1.3rem); color: var(--ink); line-height: 1.5; margin: 14px auto 0; max-width: 52ch; text-wrap: balance; } .privacy-link-row { margin: 18px 0 0; } .privacy-link { font-family: var(--disp); font-weight: 700; font-size: .95rem; color: var(--gold); text-decoration: none; } .privacy-link:hover { text-decoration: underline; } /* ═══════════ Final CTA ═══════════ */ .final-cta { text-align: center; } .final-cta h2 { font-size: clamp(2rem, 4.4vw, 3.1rem); margin: 14px auto 0; max-width: 18ch; } .final-cta .app-store-badge { margin-top: 30px; } .final-cta-sub { color: var(--dim); font-size: 1rem; margin: 18px 0 0; } /* ═══════════ Footer ═══════════ */ footer { border-top: 1px solid var(--line); padding: 40px 0 max(40px, env(safe-area-inset-bottom)); margin-top: clamp(24px, 4vw, 48px); text-align: center; } .made { color: var(--dim); font-size: .92rem; } .handles { margin-top: 14px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; } .handles a { color: var(--eyebrow); text-decoration: none; font-family: var(--disp); font-weight: 600; font-size: .9rem; } .handles a:hover { color: var(--ink); } /* ═══════════ Responsive ═══════════ */ @media (max-width: 820px) { .sec { grid-template-columns: 1fr; gap: 12px; padding: clamp(40px, 9vw, 72px) 0; } /* Text FIRST, phone BELOW it — for both normal and flipped sections. */ .sec .copy, .sec.flip .copy { order: 0; } .sec .shot, .sec.flip .shot { order: 1; margin-top: 4px; } /* mobile: show the FULL phone (it's stacked below the text) — undo the desktop clip/fade */ .shot .clip { width: min(360px, 84%); max-height: none; overflow: visible; -webkit-mask: none; mask: none; } .shot img { filter: drop-shadow(0 22px 40px rgba(0, 0, 0, 0.34)); } /* nav collapses into a hamburger dropdown (was display:none = no menu at all) */ .menu-btn { display: inline-flex; } .nav { display: flex; position: absolute; top: 100%; left: 0; right: 0; z-index: 40; flex-direction: column; align-items: stretch; gap: 0; background: var(--cream); /* SOLID theme bg (dark #180a04 / cream #f6edde) — not the undefined popover token */ border-bottom: 1px solid var(--line); box-shadow: 0 16px 30px rgba(0, 0, 0, 0.45); padding: 6px 0 10px; opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity .18s ease, transform .18s ease; } .nav a { padding: 13px clamp(20px, 5vw, 40px); font-size: 1.02rem; } .nav.open { opacity: 1; transform: none; pointer-events: auto; } /* Download stays in the bar; its margin-left:auto pushes the whole right group (Download + toggle + hamburger) over to the right */ .topbar .btn-primary { margin-left: auto; } .topbar .row { gap: 10px; } .sub { max-width: none; } } @media (max-width: 500px) { .calc-stat-strip { grid-template-columns: 1fr; gap: 10px; } .calc-stat { display: flex; align-items: baseline; justify-content: space-between; padding: 14px 16px; text-align: left; } .calc-stat-label { margin-bottom: 0; } .calc-preview-actions { flex-direction: column; } .app-store-badge { padding: 12px 20px; } } /* ═══════════ Motion (calc.js drives; gated on html.anim-ready) ═══════════ calc.js adds `.anim-ready` to and `.reveal`/`.in` to every
except .hero/.calc-hero. It only does so when JS runs AND motion is allowed — so no-JS and reduced-motion keep all content visible (nothing is ever hidden without the JS-only gate). */ .anim-ready .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; will-change: opacity, transform; } .anim-ready .reveal.in { opacity: 1; transform: none; } /* the calculator year-hero "landing" bloom (calc.js toggles .landing) */ @keyframes calcYearLand { 0% { box-shadow: 0 0 0 0 rgba(216, 50, 59, 0); transform: scale(1); } 40% { box-shadow: 0 0 24px 2px rgba(216, 50, 59, .28); transform: scale(1.045); } 100% { box-shadow: 0 0 0 0 rgba(216, 50, 59, 0); transform: scale(1); } } .anim-ready .calc-stat.landing { animation: calcYearLand .9s ease-out; } /* Belt-and-suspenders: reduced motion neutralizes every effect + stops smooth scroll, even if .anim-ready somehow lands on the page. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .anim-ready .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } .anim-ready .calc-stat.landing { animation: none !important; } .btn, .app-store-badge, .calc-share-btn, .theme-toggle { transition: none !important; } } /* Gentle cross-fade of the flat surfaces when the theme flips. Only when motion is allowed; excludes elements with their own transform transitions (buttons/badges) so they aren't clobbered. The dark body gradient itself can't transition (it's a background-image), so it swaps instantly. ⚠️ .topbar is DELIBERATELY excluded: it also toggles background on the scroll-pin (transparent → solid), and a .3s cross-fade there leaves the bar half-transparent for a beat — revealing the bright hero behind it as a white/light band (a flash on EVERY browser, not just iOS). The bar must SNAP on pin, so it gets no background transition at all. */ @media (prefers-reduced-motion: no-preference) { body, .calc-card, .calc-stat, .faq-item, .privacy-panel { transition: background-color .3s ease, color .3s ease, border-color .3s ease; } }