/* Obert landing — hand-written, monochrome brand, light + dark. Palette mirrors ios/DesignSystem .../ColorConversion.swift */ :root { --bg: #ffffff; --ink: #0a0a0a; --ink-2: #404040; --muted-50: #f5f5f5; --muted-200: #e5e5e5; --muted-400: #b5b5b5; --muted-600: #6b6b6b; --muted-800: #2e2e2e; --shadow: 0 1px 2px rgba(10,10,10,.04), 0 12px 32px rgba(10,10,10,.08); --radius: 18px; --radius-sm: 12px; --nav-h: 64px; --maxw: 1080px; --font: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; /* Full-page wash + a soft pool behind the hero phones. Monochrome — depth from gradient & contrast, no accent colour. Light: white easing into a visible grey; a soft shadow-pool lifts the product. */ --page-wash: radial-gradient(120% 80% at 50% 0%, #ffffff 0%, #f2f2f2 40%, #e4e4e4 72%); --hero-glow: radial-gradient(60% 55% at 50% 42%, rgba(10,10,10,.06), transparent 70%); /* Spotlight border-glow (main.js): the colour a hovered card's border glows toward, brightest near the cursor. Light theme reads as a dark highlight (you can't add light on white). */ --glow-edge: rgba(10,10,10,.42); } /* Dark palette, shared by the system-preference and explicit-toggle paths. */ @media (prefers-color-scheme: dark) { /* Auto: follow the OS unless the user has explicitly forced light. */ :root:not([data-theme="light"]) { --bg: #000000; --ink: #f5f5f5; --ink-2: #cccccc; --muted-50: #141414; --muted-200: #242424; --muted-400: #4a4a4a; --muted-600: #8a8a8a; --muted-800: #b8b8b8; --shadow: 0 0 0 1px var(--muted-200); /* Dark: a charcoal pool lit from the top fading to pure black, plus a soft white spotlight behind the hero phones. Visible but still black-dominant. */ --page-wash: radial-gradient(125% 85% at 50% 44%, #1c1c1c 0%, #0c0c0c 48%, #000000 74%); --hero-glow: radial-gradient(58% 52% at 50% 40%, rgba(255,255,255,.16), rgba(255,255,255,.04) 46%, transparent 74%); --glow-edge: rgba(255,255,255,.60); } } /* Explicit: the theme toggle forces dark regardless of the OS setting. */ :root[data-theme="dark"] { --bg: #000000; --ink: #f5f5f5; --ink-2: #cccccc; --muted-50: #141414; --muted-200: #242424; --muted-400: #4a4a4a; --muted-600: #8a8a8a; --muted-800: #b8b8b8; --shadow: 0 0 0 1px var(--muted-200); --page-wash: radial-gradient(125% 85% at 50% 44%, #1c1c1c 0%, #0c0c0c 48%, #000000 74%); --hero-glow: radial-gradient(58% 52% at 50% 40%, rgba(255,255,255,.16), rgba(255,255,255,.04) 46%, transparent 74%); --glow-edge: rgba(255,255,255,.60); } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); background: var(--bg); /* Stop iOS Safari from auto-inflating text in long blocks: it leaves the fixed-height nav alone, so without this the body copy balloons while the header stays put (looks "zoomed in" on iPhone). Honor the authored sizes. */ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { font-family: var(--font); /* The solid base lives on ; body is transparent so the fixed wash layer below shows through, behind all content. */ background: transparent; color: var(--ink); line-height: 1.6; overflow-x: hidden; /* the hero phone stage can peek past the column edge */ -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Viewport-anchored gradient wash behind every section. Fixed (not background-attachment: fixed, which is flaky on iOS Safari) + z-index:-1 so it sits above the base colour but behind all body content. */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--page-wash); } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; } /* ===================== NAV ===================== */ .nav { position: sticky; top: 0; z-index: 50; height: var(--nav-h); display: flex; align-items: center; /* Transparent at the very top so the page wash flows continuously through the header — no darkened strip, so the header is indistinguishable from the hero. The glass background + hairline fade in only once scrolled (the .is-scrolled class is toggled by main.js), which is when the header needs to stay legible over content sliding underneath it. */ background: transparent; border-bottom: 1px solid transparent; transition: background .25s ease, backdrop-filter .25s ease, border-color .2s ease; } .nav.is-scrolled { background: color-mix(in srgb, var(--bg) 80%, transparent); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom-color: var(--muted-200); } .nav__inner { display: flex; align-items: center; gap: 24px; } .brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; letter-spacing: -.01em; } .brand__mark { display: inline-flex; } /* flex:none + max-width:none so the icon keeps its width="" size — the global img{max-width:100%} collapses it to 0 inside the auto-width inline-flex brand. */ .brand__mark .logo { border-radius: 7px; flex: none; max-width: none; } /* Theme-aware logo: dark-ink logo on light, light logo on dark (same cascade as the colour tokens — system preference + explicit toggle). The class suffix names the logo's colour, matching the asset file names. */ .logo--light { display: none; } .logo--dark { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logo--dark { display: none; } :root:not([data-theme="light"]) .logo--light { display: block; } } :root[data-theme="dark"] .logo--dark { display: none; } :root[data-theme="dark"] .logo--light { display: block; } :root[data-theme="light"] .logo--dark { display: block; } :root[data-theme="light"] .logo--light { display: none; } .brand__name { font-size: 1.05rem; } .nav__links { margin-left: auto; display: flex; gap: 28px; } .nav__links a { color: var(--ink-2); font-weight: 500; font-size: .94rem; transition: color .15s; } .nav__links a:hover { color: var(--ink); } .nav .appstore-badge { margin-left: 0; } .nav__menu { display: none; } /* ===================== BUTTONS / BADGES ===================== */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 22px; border-radius: 999px; font-weight: 600; font-size: .95rem; border: 1px solid var(--muted-200); cursor: pointer; transition: transform .12s, background .15s, border-color .15s; } .btn--ghost { background: transparent; color: var(--ink); } .btn--ghost:hover { background: var(--muted-50); border-color: var(--muted-400); } /* "Coming soon" badge — non-interactive by default; JS upgrades to a live link */ .appstore-badge { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 999px; font-weight: 600; font-size: .9rem; letter-spacing: .005em; color: var(--muted-600); background: var(--muted-50); border: 1px dashed var(--muted-400); cursor: default; user-select: none; white-space: nowrap; } .appstore-badge::before { content: ""; width: 15px; height: 15px; flex: none; background: currentColor; -webkit-mask: var(--apple-mask) center / contain no-repeat; mask: var(--apple-mask) center / contain no-repeat; } .appstore-badge--lg { padding: 14px 24px; font-size: 1rem; } /* Live state (App Store URL configured) */ .appstore-badge.is-live { color: var(--bg); background: var(--ink); border: 1px solid var(--ink); cursor: pointer; transition: transform .12s, opacity .15s; } .appstore-badge.is-live:hover { transform: translateY(-1px); opacity: .92; } /* Theme toggle (sun / moon) */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; flex: none; background: transparent; border: 1px solid var(--muted-200); color: var(--ink); cursor: pointer; transition: background .15s, border-color .15s; } .theme-toggle:hover { background: var(--muted-50); border-color: var(--muted-400); } .theme-toggle .icon { width: 19px; height: 19px; } /* The visible icon shows the current MODE (system / light / dark), driven by data-theme-mode on (set pre-paint by the head script, updated by main.js). */ .theme-toggle .icon { display: none; } :root[data-theme-mode="system"] .icon-system { display: block; } :root[data-theme-mode="light"] .icon-sun { display: block; } :root[data-theme-mode="dark"] .icon-moon { display: block; } :root { --apple-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M17.05 12.04c-.03-2.6 2.12-3.85 2.22-3.91-1.21-1.77-3.09-2.01-3.76-2.04-1.6-.16-3.12.94-3.93.94-.81 0-2.06-.92-3.39-.89-1.74.03-3.35 1.01-4.25 2.57-1.81 3.14-.46 7.79 1.3 10.34.86 1.25 1.89 2.65 3.24 2.6 1.3-.05 1.79-.84 3.36-.84 1.57 0 2.01.84 3.39.81 1.4-.02 2.29-1.27 3.15-2.53.99-1.45 1.4-2.85 1.42-2.92-.03-.01-2.72-1.04-2.75-4.13zM14.6 4.5c.72-.87 1.2-2.08 1.07-3.28-1.03.04-2.28.69-3.02 1.56-.66.77-1.24 2-1.08 3.18 1.15.09 2.32-.59 3.03-1.46z'/%3E%3C/svg%3E"); } /* ===================== HERO ===================== */ .hero { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; padding: clamp(48px, 8vw, 96px) 24px clamp(40px, 6vw, 72px); } /* Soft monochrome glow behind the hero — a spotlight that lifts the phones off the black. Sits behind the hero content; no overflow:hidden on .hero so the rotated side phones can still peek past the column edge. */ .hero::before { content: ""; position: absolute; z-index: 0; pointer-events: none; left: 50%; top: 42%; transform: translate(-50%, -50%); width: min(900px, 115%); height: min(680px, 95%); background: var(--hero-glow); } .hero > * { position: relative; z-index: 1; } .hero__title { font-size: clamp(2.4rem, 6vw, 4rem); line-height: 1.04; font-weight: 800; letter-spacing: -.03em; } .hero__sub { margin-top: 22px; font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--ink-2); max-width: 30ch; } .hero__cta { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } .hero__note { margin-top: 18px; font-size: .85rem; color: var(--muted-600); } .phone { border: 1px solid var(--muted-200); border-radius: 36px; padding: 8px; background: var(--muted-50); box-shadow: var(--shadow); overflow: hidden; } .phone img { border-radius: 28px; width: 100%; } .hero__art { display: flex; flex-direction: column; align-items: center; min-width: 0; width: 100%; } /* ===================== HERO STAGE — layered phones + iOS-style tab bar ===================== */ .stage { display: flex; align-items: center; justify-content: center; margin-top: clamp(8px, 2vw, 20px); } /* The stage is interactive (tap to switch screens) — don't let clicks select text or drag the screenshots, which looks broken. */ .stage, .stage__caption, .tabbar { -webkit-user-select: none; user-select: none; } .stage img { -webkit-user-drag: none; pointer-events: none; } .stage__phone { margin: 0; flex: none; transition: transform .35s cubic-bezier(.4,0,.2,1); } .phone--stage { position: relative; box-shadow: 0 22px 60px rgba(0,0,0,.28); } /* Dynamic Island overlay — the screenshots include the status bar but not the island, so draw a black pill centred in the status-bar row. */ .phone--stage::before { content: ""; position: absolute; z-index: 4; pointer-events: none; top: 3.1%; left: 50%; transform: translateX(-50%); width: 30%; aspect-ratio: 3.4 / 1; background: #000; border-radius: 999px; } .stage__phone--front { width: clamp(208px, 22vw, 256px); z-index: 3; } .stage__phone--left, .stage__phone--right { width: clamp(150px, 16vw, 188px); z-index: 1; cursor: pointer; } .stage__phone--left { transform: rotate(-6deg); margin-right: clamp(-104px, -8vw, -76px); } .stage__phone--right { transform: rotate(6deg); margin-left: clamp(-104px, -8vw, -76px); } /* Tint the back phones; lighten toward full on hover */ .stage__phone--left .phone--stage::after, .stage__phone--right .phone--stage::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgba(0,0,0,.36); transition: background .25s; } .stage__phone--left:hover { transform: rotate(-5deg) translateY(-6px); } .stage__phone--right:hover { transform: rotate(5deg) translateY(-6px); } .stage__phone--left:hover .phone--stage::after, .stage__phone--right:hover .phone--stage::after { background: rgba(0,0,0,.04); } .stage__caption { text-align: center; margin-top: clamp(14px, 2vw, 20px); color: var(--ink-2); font-size: 1rem; min-height: 1.4em; } /* iOS-style tab bar */ .tabbar { position: relative; /* anchors the spotlight border-glow ::after */ display: flex; gap: 4px; width: min(430px, 100%); max-width: 100%; margin: clamp(16px, 2vw, 22px) auto 0; padding: 9px 10px; border-radius: 26px; background: color-mix(in srgb, var(--muted-50) 86%, transparent); border: 1px solid var(--muted-200); backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px); } .tabbar__item { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 8px 4px 6px; border: 0; border-radius: 16px; background: transparent; color: var(--muted-600); cursor: pointer; font: inherit; font-size: .68rem; font-weight: 600; letter-spacing: -.005em; transition: color .18s, background .18s, transform .1s; } .tabbar__item span { white-space: nowrap; } .tabbar__item svg { width: 22px; height: 22px; stroke-width: 2.2; } .tabbar__item:hover { color: var(--ink-2); } .tabbar__item:active { transform: scale(.94); } .tabbar__item.is-active { color: var(--ink); background: var(--muted-200); } @media (max-width: 760px) { .stage__phone--left, .stage__phone--right { display: none; } .stage__phone--front { width: min(74vw, 300px); } .tabbar { max-width: 100%; } } /* ===================== SECTION HEADS ===================== */ .section-head { text-align: center; max-width: 38rem; margin: 0 auto clamp(32px, 5vw, 56px); } .section-head h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; } .section-head p { margin-top: 14px; color: var(--ink-2); font-size: 1.05rem; } .features, .how, .privacy, .pricing { padding: clamp(56px, 9vw, 104px) 24px; } /* ===================== GRIDS / CARDS ===================== */ .grid { display: grid; gap: 20px; } .grid--features { grid-template-columns: repeat(3, 1fr); } .card { position: relative; /* anchors the spotlight border-glow ::after */ background: var(--muted-50); border: 1px solid var(--muted-200); border-radius: var(--radius); padding: 28px 26px; } .card__icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--bg); border: 1px solid var(--muted-200); color: var(--ink); margin-bottom: 18px; } .card__icon svg { width: 24px; height: 24px; } .card h3 { font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; } .card p { margin-top: 10px; color: var(--ink-2); font-size: .96rem; } /* ===================== HOW IT WORKS ===================== */ .steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; counter-reset: step; } .step { text-align: center; } .step__num { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 999px; background: var(--ink); color: var(--bg); font-weight: 700; font-size: 1.25rem; margin-bottom: 18px; } .step h3 { font-size: 1.2rem; font-weight: 700; } .step p { margin-top: 8px; color: var(--ink-2); } /* ===================== PRIVACY ===================== */ .grid--trust { grid-template-columns: repeat(4, 1fr); } .trust h3 { font-size: 1.05rem; font-weight: 700; padding-bottom: 8px; border-bottom: 1px solid var(--muted-200); } .trust p { margin-top: 12px; color: var(--ink-2); font-size: .95rem; } .privacy__link { text-align: center; margin-top: clamp(32px, 5vw, 48px); color: var(--ink-2); } .privacy__link a { font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } /* ===================== PRICING ===================== */ .billing-toggle { display: inline-flex; gap: 4px; margin: 0 auto clamp(28px, 4vw, 40px); padding: 4px; background: var(--muted-50); border: 1px solid var(--muted-200); border-radius: 999px; position: relative; left: 50%; transform: translateX(-50%); } .billing-toggle__opt { border: 0; background: transparent; color: var(--ink-2); cursor: pointer; padding: 9px 18px; border-radius: 999px; font: inherit; font-weight: 600; font-size: .92rem; display: inline-flex; align-items: center; gap: 8px; transition: background .15s, color .15s; } .billing-toggle__opt.is-active { background: var(--ink); color: var(--bg); } .save { font-size: .72rem; font-weight: 600; opacity: .8; } .grid--pricing { grid-template-columns: repeat(3, 1fr); align-items: stretch; } .plan { position: relative; background: var(--bg); border: 1px solid var(--muted-200); border-radius: var(--radius); padding: 32px 28px; display: flex; flex-direction: column; } .plan--featured { border-color: var(--ink); box-shadow: var(--shadow); } .plan__tag { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--bg); font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; } .plan__name { font-size: 1.1rem; font-weight: 700; color: var(--ink-2); } .plan__price { margin-top: 14px; } .plan__price .amount { font-size: 2.6rem; font-weight: 800; letter-spacing: -.03em; } .plan__period { color: var(--muted-600); font-size: .9rem; margin-top: 2px; } .plan__feats { list-style: none; margin: 22px 0 26px; display: grid; gap: 12px; } .plan__feats li { position: relative; padding-left: 26px; color: var(--ink-2); font-size: .95rem; } .plan__feats li::before { content: ""; position: absolute; left: 0; top: .35em; width: 16px; height: 16px; background: var(--ink); -webkit-mask: var(--check-mask) center / contain no-repeat; mask: var(--check-mask) center / contain no-repeat; } .plan__feats strong { color: var(--ink); } .plan .appstore-badge { margin-top: auto; align-self: flex-start; } .pricing__fine { text-align: center; margin-top: 28px; color: var(--muted-600); font-size: .82rem; max-width: 46rem; margin-left: auto; margin-right: auto; } :root { --check-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); } /* ===================== FINAL CTA ===================== */ .final { position: relative; background: var(--muted-50); border-top: 1px solid var(--muted-200); border-bottom: 1px solid var(--muted-200); } .final__inner { text-align: center; padding: clamp(56px, 9vw, 96px) 24px; } .final h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); font-weight: 800; letter-spacing: -.02em; max-width: 22ch; margin: 0 auto 28px; line-height: 1.12; } /* ===================== FOOTER ===================== */ .footer { padding: 44px 0; } .footer__inner { display: flex; align-items: center; flex-wrap: wrap; gap: 18px 28px; } .footer__brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; } .footer__links { display: flex; flex-wrap: wrap; gap: 22px; margin-left: auto; } .footer__links a { color: var(--ink-2); font-size: .92rem; transition: color .15s; } .footer__links a:hover { color: var(--ink); } .footer__copy { width: 100%; color: var(--muted-600); font-size: .82rem; border-top: 1px solid var(--muted-200); padding-top: 18px; } /* ===================== RESPONSIVE ===================== */ @media (max-width: 900px) { .grid--features { grid-template-columns: repeat(2, 1fr); } .grid--trust { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 760px) { .nav__links { display: none; } .nav__links.is-open { display: flex; flex-direction: column; gap: 0; position: absolute; top: var(--nav-h); left: 0; right: 0; background: var(--bg); border-bottom: 1px solid var(--muted-200); padding: 8px 24px 16px; } .nav__links.is-open a { padding: 12px 0; border-bottom: 1px solid var(--muted-200); } .nav .appstore-badge { display: none; } .theme-toggle { margin-left: auto; } .nav__menu { display: inline-flex; flex-direction: column; gap: 5px; margin-left: 8px; background: transparent; border: 0; cursor: pointer; padding: 8px; } .nav__menu span { width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .2s, opacity .2s; } .nav__menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav__menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav__menu[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .hero { grid-template-columns: 1fr; text-align: center; gap: 36px; } .hero__sub { margin-left: auto; margin-right: auto; } .hero__cta { justify-content: center; } .hero { gap: 28px; } } @media (max-width: 560px) { .grid--features, .grid--trust, .steps, .grid--pricing { grid-template-columns: 1fr; } .footer__links { margin-left: 0; } /* The "Coming soon to the App Store" pill has nowrap text; on narrow phones (iPhone SE / 320px) that unbreakable string is wider than the column and forces horizontal overflow. Let it wrap to two centered lines instead. */ .appstore-badge { white-space: normal; text-align: center; max-width: 100%; } } /* ===================== SUB-PAGES (legal / support) ===================== */ /* Shared shell for the standalone document pages. They reuse the homepage nav, footer and theme system; only the content column differs. */ .subpage { padding-top: clamp(32px, 6vw, 64px); } .subpage .page-hero { text-align: center; max-width: 46rem; margin: 0 auto; padding: 0 24px; } .subpage .page-hero h1 { font-size: clamp(2rem, 4.4vw, 3rem); font-weight: 800; letter-spacing: -.025em; line-height: 1.06; } .subpage .page-hero__sub { margin-top: 16px; color: var(--ink-2); font-size: clamp(1.02rem, 1.6vw, 1.15rem); } /* Prose typography shared by the legal documents. Mirrors the old server-rendered pages (comfortable measure, restrained heading scale) but uses the brand tokens. */ .prose { max-width: 720px; margin: 0 auto; } .prose h1 { font-size: clamp(1.9rem, 4vw, 2.4rem); font-weight: 800; letter-spacing: -.02em; } .prose .prose__meta { margin-top: 8px; font-size: .9rem; color: var(--muted-600); } .prose h2 { font-size: 1.18rem; font-weight: 700; letter-spacing: -.01em; margin-top: 38px; margin-bottom: 6px; } .prose p, .prose li { color: var(--ink-2); margin-top: 10px; } .prose ul { padding-left: 20px; margin-top: 6px; } .prose li { padding-left: 4px; } .prose strong { color: var(--ink); } .prose a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } .prose.page-view { padding: clamp(16px, 3vw, 28px) 24px clamp(56px, 9vw, 96px); } /* The three documents (privacy / terms / support) share one page; which one is visible is driven by [data-page] on (set pre-paint from the URL, swapped by main.js with no reload). The other two are display:none — present in the DOM (crawlable) but hidden, so there is no flash before JS runs. */ [data-page="privacy"] #page-terms, [data-page="privacy"] #page-support, [data-page="terms"] #page-privacy, [data-page="terms"] #page-support, [data-page="support"] #page-privacy, [data-page="support"] #page-terms { display: none; } /* A soft crossfade when swapping views (View Transitions API; main.js skips it entirely under reduced-motion, and this disables it as belt-and-suspenders). */ ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; } @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } } /* Translucent "surface" fills for cards that sit directly on the page gradient. A solid fill matches the gradient at one end of the page and disappears (the FAQ hover used to vanish near the dark bottom of the wash). A translucent overlay instead darkens whatever is behind it by a fixed amount, so the card — and its hover — keep the SAME contrast top-to-bottom. */ :root { --surface: rgba(10,10,10,.035); --surface-strong: rgba(10,10,10,.07); --surface-border: rgba(10,10,10,.12); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --surface: rgba(255,255,255,.05); --surface-strong: rgba(255,255,255,.1); --surface-border: rgba(255,255,255,.14); } } :root[data-theme="dark"] { --surface: rgba(255,255,255,.05); --surface-strong: rgba(255,255,255,.1); --surface-border: rgba(255,255,255,.14); } /* ===================== SUPPORT ===================== */ #page-support { padding-bottom: clamp(32px, 6vw, 72px); } .support-section { padding: clamp(28px, 5vw, 52px) 24px; } .support-section--tight { padding-top: 0; } /* Primary contact card */ .support-contact { max-width: 720px; margin: 0 auto; text-align: center; background: var(--surface); border: 1px solid var(--surface-border); border-radius: var(--radius); padding: clamp(28px, 5vw, 44px); } .support-contact h2 { font-size: 1.4rem; font-weight: 800; letter-spacing: -.01em; } .support-contact p { margin-top: 10px; color: var(--ink-2); } .support-contact .btn { margin-top: 22px; } .btn--solid { background: var(--ink); color: var(--bg); border-color: var(--ink); } .btn--solid:hover { transform: translateY(-1px); opacity: .92; } /* FAQ accordion — native
for zero-JS accessibility */ .faq { max-width: 720px; margin: 0 auto; display: grid; gap: 12px; } .faq__head { text-align: center; max-width: 38rem; margin: 0 auto clamp(28px, 4vw, 44px); } .faq__head h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; letter-spacing: -.02em; } .faq__head p { margin-top: 12px; color: var(--ink-2); } .faq__item { background: var(--surface); border: 1px solid var(--surface-border); border-radius: var(--radius-sm); overflow: hidden; } .faq__item summary { list-style: none; cursor: pointer; padding: 18px 52px 18px 22px; position: relative; font-weight: 600; font-size: 1.02rem; color: var(--ink); transition: background .15s ease; } .faq__item summary::-webkit-details-marker { display: none; } /* Chevron that rotates open/closed */ .faq__item summary::after { content: ""; position: absolute; right: 20px; top: 50%; width: 11px; height: 11px; margin-top: -7px; border-right: 2px solid var(--muted-600); border-bottom: 2px solid var(--muted-600); transform: rotate(45deg); transition: transform .2s ease; } .faq__item[open] summary::after { transform: rotate(-135deg); margin-top: -3px; } /* Hover/open use a translucent overlay (stacks over the item's --surface) so the highlight is always visible, regardless of where the card sits on the wash. */ .faq__item summary:hover, .faq__item[open] summary { background: var(--surface-strong); } .faq__body { padding: 4px 22px 20px; } .faq__body p { color: var(--ink-2); margin-top: 0; } .faq__body p + p { margin-top: 10px; } .faq__body a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } /* "Before you reach out" checklist */ .prep { max-width: 720px; margin: 0 auto; } .prep__head { text-align: center; margin-bottom: clamp(20px, 3vw, 32px); } .prep__head h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 800; letter-spacing: -.02em; } .prep__head p { margin-top: 10px; color: var(--ink-2); } .prep__list { list-style: none; display: grid; gap: 12px; } .prep__list li { position: relative; padding-left: 30px; color: var(--ink-2); } .prep__list li::before { content: ""; position: absolute; left: 0; top: .3em; width: 18px; height: 18px; background: var(--ink); -webkit-mask: var(--check-mask) center / contain no-repeat; mask: var(--check-mask) center / contain no-repeat; } /* Account deletion call-out */ .danger { max-width: 720px; margin: 0 auto; border: 1px solid var(--surface-border); border-radius: var(--radius); padding: clamp(24px, 4vw, 36px); background: var(--surface); } .danger h2 { font-size: 1.25rem; font-weight: 800; letter-spacing: -.01em; } .danger p { margin-top: 10px; color: var(--ink-2); } .danger .btn { margin-top: 20px; } /* ===================== SPOTLIGHT BORDER-GLOW ===================== */ /* Spotlight border-glow: only the border segment nearest the cursor lights up. A radial centred at the cursor (--gx/--gy, set by main.js) painted into a 1px ring carved out with the mask-composite trick. */ .card::after, .plan::after, .final::after, .tabbar::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: radial-gradient(360px circle at var(--gx, 50%) var(--gy, 50%), var(--glow-edge), transparent 55%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .3s ease; pointer-events: none; } /* The Final-CTA band only has top + bottom borders (no sides), so its glow reveals just the top/bottom strips: 0 left/right padding → no side ring. */ .final::after { padding: 1px 0; } @media (hover: hover) and (pointer: fine) { .card:hover::after, .plan:hover::after, .final:hover::after, .tabbar:hover::after { opacity: 1; } }