/* ═══════════════════════════════════════════════════════════════════ site.css — Spend Toll landing ("App Store screenshot" aesthetic). Ported STRUCTURE from Dopa Toll's 2026-07 redesign (sticky topbar, zig-zag device-screenshot rows, cream calc card, dual theme), recolored to Spend's OWN cold-navy identity — NOT Dopa's warm ember. Alignment rule (CLAUDE.md 2026-06-11): align the PATTERN, never the pixels. So: same layout grammar as Dopa, but • accent = Spend blue #4d8dff (brand mark, buttons, links, emphasis) • coin/$ = coin-gold #f5c451 (money figures ONLY — never brand) per Skills/TollSkills brand-rules (yellow/gold = coin/Pro only). DUAL THEME: ships DARK (navy) by default; a light (cool-white) palette is the opt-in via the topbar toggle (persisted to localStorage). Both share structure; only color tokens differ. Pairs with index.html + calc.js. calc.js adds `.anim-ready` to and `.reveal`/`.in` to every
except .hero, and drives the calculator + share cards. No-JS / reduced-motion keep everything visible. ═══════════════════════════════════════════════════════════════════ */ :root { /* Font stacks — theme-independent. */ --disp: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; --body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif; /* ───────────────────────────────────────────────────────────────── DEFAULT theme = DARK (navy). No data-theme attribute → this set. Values track the app's Today canonical (#0D1117 canvas + blue glow). */ --cream: #0D1117; /* page canvas base (name kept from the Dopa port) */ --card: rgba(255, 255, 255, .05); --well: rgba(255, 255, 255, .06); --well-2: rgba(255, 255, 255, .09); --ink: #e9f0f7; --dim: rgba(230, 237, 243, .60); --eyebrow: rgba(170, 200, 235, .55); --line: rgba(255, 255, 255, .12); --line-soft: rgba(255, 255, 255, .08); --accent: #4d8dff; /* Spend blue — brand mark / buttons / links / emphasis */ --gold: #f5c451; /* coin-gold — MONEY figures only ($ / rate) */ --green: #2dd4a0; --red: #e63946; /* calculator 3-col stat colors: rate = coin-gold / mid = ink / punch = red */ --stat-rate: var(--gold); --stat-day: var(--ink); --stat-year: #ff6b6b; /* legacy aliases so the calculator inline styles resolve */ --text-primary: rgba(230, 237, 243, .90); --text-secondary: rgba(230, 237, 243, .60); --text-tertiary: rgba(230, 237, 243, .50); --text-strong: #ffffff; /* themeable component tokens — dark (default) values */ --topbar-bg: #0b0f14; /* scrolled bar — SOLID + opaque so iOS samples one exact color for the status-bar strip (see index.html theme-color) */ --topbar-shadow: 0 6px 22px rgba(0, 0, 0, .38); --btn-p-bg: var(--accent); /* blue primary fill */ --btn-p-fg: #ffffff; --btn-ghost-bg: rgba(255, 255, 255, .07); --badge-bg: #e8eef5; /* cool off-white slab */ --badge-fg: #0d1117; /* dark text + Apple glyph */ --seg-active-bg: rgba(255, 255, 255, .13); --well-focus: rgba(255, 255, 255, .10); --ring: rgba(77, 141, 255, .45); } /* ═══════════════════════════════════════════════════════════════════ LIGHT theme — opt-in ONLY via . Never auto-applied (no prefers-color-scheme); the manual toggle + localStorage in index.html drive it. Cool white canvas, deep-navy ink, same blue accent (slightly deepened for contrast on white), darkened gold/red for legibility. ═══════════════════════════════════════════════════════════════════ */ html[data-theme="light"] { --cream: #f5f8fc; /* page canvas */ --card: #ffffff; /* raised card surface */ --well: #eef3f9; /* inset wells: inputs, stat cells */ --well-2: #e9f0f8; /* segmented-toggle track */ --ink: #0d1b2a; /* display headings, primary text */ --dim: #4a5b6d; /* body copy */ --eyebrow: #7d8ea1; /* uppercase section labels */ --line: rgba(13, 27, 42, .12); --line-soft: rgba(13, 27, 42, .07); --accent: #2f6fe0; /* blue readable on white */ --gold: #a9791a; /* darkened coin-gold for contrast on cream */ --green: #12946f; --red: #d8323b; --stat-rate: var(--gold); --stat-day: var(--ink); --stat-year: #d8323b; --text-primary: #0d1b2a; --text-secondary: #4a5b6d; --text-tertiary: #6a7787; --text-strong: #0d1b2a; --topbar-bg: #eef3f9; --topbar-shadow: 0 4px 18px rgba(13, 27, 42, .10); --btn-p-bg: var(--accent); --btn-p-fg: #ffffff; --btn-ghost-bg: var(--card); --badge-bg: #0d1b2a; /* dark slab on light canvas */ --badge-fg: #ffffff; --seg-active-bg: var(--card); --well-focus: #e3ecf6; --ring: rgba(47, 111, 224, .40); } * { box-sizing: border-box; } /* html base = the canvas color, so any stray repaint shows navy, never white. */ html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: #0D1117; } html[data-theme="light"] { background: #f5f8fc; } body { margin: 0; color: var(--ink); font-family: var(--body); font-size: 16px; 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, so it isn't needed. */ } /* DARK canvas = navy + layered blue glow (mirrors the app's Today canonical), pinned to the viewport as its OWN fixed layer. A fixed PSEUDO-ELEMENT — NOT `background-attachment: fixed`, which flashes white on iOS Safari when the toolbar collapses on the first scroll. */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; will-change: transform; background: radial-gradient(120% 60% at 78% -8%, rgba(77, 141, 255, .17), transparent 58%), radial-gradient(90% 52% at 6% -6%, rgba(19, 70, 111, .30), transparent 56%), linear-gradient(180deg, rgba(19, 70, 111, .12) 0%, transparent 44%); } /* Light canvas — flat cool white (a whisper of blue up top). */ html[data-theme="light"] body::before { background: radial-gradient(120% 55% at 80% -10%, rgba(47, 111, 224, .06), transparent 60%); } .wrap { max-width: 1180px; margin: 0 auto; 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.04; color: var(--ink); text-wrap: balance; margin: 0; } /* Spend keeps a TEXT accent (blue) for emphasis — NOT Dopa's filled highlight marks (which are yellow/green and would break Spend's yellow=coin rule). */ .accent { color: var(--accent); } /* ─── Links + focus ─── */ a { color: inherit; text-decoration: none; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } /* Interactive elements: prevent double-tap zoom, kill iOS tap-flash. */ button, a, input, label { touch-action: manipulation; -webkit-tap-highlight-color: transparent; } /* ─── 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; 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; 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); } /* ─── Sticky top bar ─── */ .topbar { position: sticky; top: 0; z-index: 20; will-change: transform; /* pre-promote so the first scroll doesn't flash a promotion frame */ background: transparent; /* transparent at the top; solid once scrolled (snap, no fade) */ padding-top: env(safe-area-inset-top); } .topbar.scrolled { background: var(--topbar-bg); box-shadow: var(--topbar-shadow); } .topbar .row { display: flex; align-items: center; gap: 16px; height: 62px; position: relative; } .brand { font-family: var(--disp); font-weight: 800; letter-spacing: -.01em; font-size: 1.08rem; display: flex; align-items: center; gap: 9px; color: var(--ink); } /* Spend's brand mark = two rounded pause bars (ties to the app icon / favicon / in-app wordmark). Blue, matching the accent. */ .brand .mark { display: inline-flex; align-items: center; gap: 3px; } .brand .mark::before, .brand .mark::after { content: ""; display: block; width: 4px; height: 15px; border-radius: 2px; background: var(--accent); } .nav { margin-left: auto; display: flex; gap: 24px; font-family: var(--disp); font-weight: 600; font-size: .9rem; color: var(--dim); } .nav a:hover { color: var(--ink); } .menu-btn { display: none; /* desktop: hidden (inline nav 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; } /* Download / Get-app CTA in the bar: sized to the icon buttons (40px / 10px) so the right group reads as one action row; stands out by COLOR, not by looming. */ .topbar .btn-primary { margin-left: 0; height: 40px; padding: 0 16px; border-radius: 10px; font-size: .875rem; } /* ─── 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)); } .sec.flip .copy { order: 2; } /* flipped → visual lands on the left */ .copy h1 { font-size: clamp(2.3rem, 5vw, 3.7rem); margin: 16px 0 0; } .copy h2 { font-size: clamp(1.9rem, 3.8vw, 2.9rem); 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: 14px 0 0; max-width: 46ch; } .sub strong { color: var(--text-primary); font-weight: 600; } .ctas { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 0; } /* ─── Phone mockup: full transparent-PNG/WebP device at natural ratio ─── Scale by width only; the clip shows the TOP portion and mask-fades the bottom into the page. Soft shadow floats it. */ .shot { display: flex; align-items: flex-start; justify-content: center; } .shot .clip { width: min(430px, 92%); max-height: 580px; overflow: hidden; -webkit-mask: linear-gradient(#000 80%, transparent 100%); mask: linear-gradient(#000 80%, transparent 100%); } .shot img { width: 100%; height: auto; display: block; } /* A concept card can sit in a section's visual slot instead of a phone (why-it-works / safety-nets). Just centers whatever card it wraps. */ .visual { display: flex; justify-content: center; } .visual > * { width: 100%; max-width: 460px; } /* ─── Full-width centered blocks (calculator / privacy / etc.) ─── */ .block { padding: clamp(48px, 7vw, 104px) 0; scroll-margin-top: calc(70px + env(safe-area-inset-top)); } .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 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(0, 0, 0, .5); overflow: hidden; } .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; 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(0, 0, 0, .12); } .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; } .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); } .calc-divider { height: 1px; background: var(--line); margin: 24px 0 22px; } .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); } .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-cta { margin-top: 18px; text-align: center; } /* 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; 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(0, 0, 0, .12); } .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(0, 0, 0, .6); } .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(--accent); 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.1); } } .calc-share-btn:active { transform: translateY(1px); } .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 ═══════════ */ .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; -webkit-user-select: none; user-select: none; transition: transform .1s, opacity .15s; } @media (hover: hover) { .app-store-badge:hover { transform: translateY(-1px); } } .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 theme. */ 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; } /* ═══════════ Why-it-works comparison card ═══════════ */ .why-comparison { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 22px 24px; display: flex; flex-direction: column; gap: 16px; } .why-row { display: flex; gap: 14px; align-items: flex-start; } .why-icon { font-size: 18px; font-weight: 800; flex-shrink: 0; line-height: 1.4; width: 20px; text-align: center; } .why-row-fail .why-icon { color: var(--red); } .why-row-win .why-icon { color: var(--green); } .why-body { min-width: 0; } .why-quote { font-size: 15px; font-weight: 600; color: var(--text-primary); font-style: italic; line-height: 1.3; margin-bottom: 4px; } .why-row-win .why-quote { font-style: normal; color: var(--accent); } .why-result { font-size: 13px; color: var(--text-tertiary); line-height: 1.45; } .why-divider { height: 1px; background: var(--line-soft); margin: 4px 0; } /* ═══════════ Off-ramps / Safety-nets card ═══════════ */ .off-ramps-card { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 14px 18px; display: flex; flex-direction: column; } .off-ramp { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line-soft); } .off-ramp:last-child { border-bottom: 0; } .off-ramp-emoji { font-size: 22px; line-height: 1; flex-shrink: 0; margin-top: 1px; } .off-ramp-body { min-width: 0; } .off-ramp-title { font-size: 14.5px; font-weight: 600; color: var(--text-primary); margin-bottom: 2px; } .off-ramp-desc { font-size: 12.5px; color: var(--text-tertiary); line-height: 1.4; } /* ═══════════ Privacy panel (TRACKS / NEVER) ═══════════ */ .privacy-panel { max-width: 820px; margin: 0 auto; background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: clamp(24px, 4vw, 40px); } .privacy-lede { font-family: var(--disp); font-weight: 600; font-size: clamp(1.05rem, 1.7vw, 1.28rem); color: var(--ink); line-height: 1.5; margin: 0 auto; max-width: 60ch; text-align: center; text-wrap: balance; } .privacy-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 26px; } .privacy-col-header { font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 12px; } .privacy-list-vertical { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } .privacy-list-vertical li { font-size: 14.5px; color: var(--text-primary); padding-left: 18px; position: relative; line-height: 1.45; } .privacy-list-vertical li::before { content: "—"; color: var(--text-tertiary); font-weight: 600; position: absolute; left: 0; top: 0; } .privacy-link-row { margin-top: 24px; text-align: center; } .privacy-link { display: inline-flex; align-items: center; gap: 4px; font-family: var(--disp); font-size: .95rem; font-weight: 700; color: var(--accent); padding: 6px 0; } .privacy-link:hover { text-decoration: underline; } /* ═══════════ Closing card (More inside + CTA) ═══════════ */ .bottom-cta { text-align: center; padding: clamp(40px, 6vw, 56px) clamp(20px, 4vw, 28px); background: var(--card); border: 1px solid var(--line); border-radius: 24px; margin: clamp(24px, 4vw, 48px) 0 60px; } .bottom-cta-subhead { font-size: clamp(1.3rem, 2.4vw, 1.5rem); font-weight: 800; margin: 0 0 24px; color: var(--ink); letter-spacing: -.01em; } .more-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 8px; text-align: left; } .more-item { display: flex; gap: 12px; padding: 16px 18px; background: var(--well); border: 1px solid var(--line-soft); border-radius: 12px; } .more-emoji { font-size: 22px; line-height: 1; flex-shrink: 0; margin-top: 1px; } .more-body { min-width: 0; } .more-title { font-size: 14.5px; font-weight: 600; color: var(--text-primary); margin-bottom: 3px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .more-pro { font-size: 9.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--gold); background: rgba(245, 196, 81, .12); border: 1px solid rgba(245, 196, 81, .30); padding: 2px 7px; border-radius: 6px; line-height: 1; } .more-desc { font-size: 12.5px; color: var(--text-tertiary); line-height: 1.45; text-wrap: pretty; } .bottom-cta-divider { height: 1px; background: var(--line-soft); margin: 36px auto; max-width: 200px; } /* CTA half — brand pause-mark above the h2, then h2 + caption + badge. */ .cta-mark { display: flex; justify-content: center; align-items: center; gap: 7px; margin: 0 auto 14px; --bar-h: 28px; } .cta-mark::before, .cta-mark::after { content: ""; display: block; width: 8px; height: var(--bar-h); border-radius: 4px; background: var(--accent); } .bottom-cta h2 { font-size: clamp(2rem, 4.4vw, 3.1rem); margin: 0 0 14px; letter-spacing: -.02em; } .bottom-cta > p { color: var(--dim); font-size: 1rem; margin: 0 0 28px; } /* ═══════════ Footer ═══════════ */ footer { border-top: 1px solid var(--line); padding: 40px 0 max(40px, env(safe-area-inset-bottom)); margin-top: clamp(24px, 4vw, 48px); display: flex; flex-wrap: wrap; gap: 14px 20px; justify-content: space-between; align-items: center; } .made { color: var(--dim); font-size: .92rem; } .handles { display: flex; flex-wrap: wrap; gap: 8px 20px; } .handles a { color: var(--eyebrow); 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: 14px; padding: clamp(40px, 9vw, 72px) 0; text-align: center; } /* Text FIRST, visual BELOW it — for both normal and flipped sections. */ .sec .copy, .sec.flip .copy { order: 0; } .sec .shot, .sec.flip .shot, .sec .visual, .sec.flip .visual { order: 1; margin-top: 4px; } .sub { max-width: none; margin-left: auto; margin-right: auto; } .ctas { justify-content: center; } /* mobile: show the FULL phone (stacked below the text) — undo the desktop clip/fade */ .shot .clip { width: min(340px, 82%); max-height: none; overflow: visible; -webkit-mask: none; mask: none; } .shot img { filter: drop-shadow(0 22px 40px rgba(0, 0, 0, .34)); } .visual > * { max-width: 420px; margin: 0 auto; text-align: left; } /* nav collapses into a hamburger dropdown */ .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); border-bottom: 1px solid var(--line); box-shadow: 0 16px 30px rgba(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; } .topbar .btn-primary { margin-left: auto; } .topbar .row { gap: 10px; } .privacy-cols { grid-template-columns: 1fr; gap: 22px; } .more-grid { grid-template-columns: 1fr; gap: 12px; } footer { justify-content: center; text-align: center; } } @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; } .cta-mark { --bar-h: 24px; } } /* ═══════════ Motion (calc.js drives; gated on html.anim-ready) ═══════════ */ .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; } /* calculator year-hero "landing" bloom (calc.js toggles .landing on the year cell) */ @keyframes calcYearLand { 0% { box-shadow: 0 0 0 0 rgba(255, 107, 107, 0); transform: scale(1); } 40% { box-shadow: 0 0 24px 2px rgba(255, 107, 107, .28); transform: scale(1.045); } 100% { box-shadow: 0 0 0 0 rgba(255, 107, 107, 0); transform: scale(1); } } .anim-ready .calc-stat.landing { animation: calcYearLand .9s ease-out; } /* Belt-and-suspenders: reduced motion neutralizes every effect. */ @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 flat surfaces on theme flip (motion-allowed only). .topbar is DELIBERATELY excluded — it also toggles bg on scroll-pin, and a cross-fade there would flash the bright hero through a half-transparent bar. */ @media (prefers-reduced-motion: no-preference) { body, .calc-card, .calc-stat, .why-comparison, .off-ramps-card, .privacy-panel, .bottom-cta, .more-item { transition: background-color .3s ease, color .3s ease, border-color .3s ease; } }