/* ========================================================== Glint — marketing site (glintreader.com) Brand tokens locked. Mirrors iOS DesignSystem. Ported from designer's style.css + niche.css. ========================================================== */ :root{ /* Brand */ --ink: #1A1815; --ink-deep: #0D0B09; --charcoal: #1A1815; /* alias kept for designer markup */ --charcoal-deep: #0D0B09; --cream: #FAF7F2; --cream-deep: #EFE7D8; --amber-bright: #FFD98A; --amber: #E8A547; --amber-deep: #C98A3A; /* Derived neutrals */ --ink-on-cream: #1A1815; --ink-on-cream-60: rgba(26,24,21,0.62); --ink-on-cream-40: rgba(26,24,21,0.42); --ink-on-cream-12: rgba(26,24,21,0.12); --ink-on-dark: #FAF7F2; --ink-on-dark-60: rgba(250,247,242,0.62); --ink-on-dark-40: rgba(250,247,242,0.40); --ink-on-dark-12: rgba(250,247,242,0.10); /* Type */ --serif: 'Fraunces', 'Source Serif Pro', 'Literata', ui-serif, 'New York', Georgia, serif; --sans: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', system-ui, 'Inter', sans-serif; /* Layout */ --maxw: 1180px; --gutter: clamp(20px, 4vw, 56px); /* Spacing scale (mirrors iOS DesignSystem.Spacing) */ --space-xxs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 20px; --space-xl: 24px; --space-xxl: 32px; --space-xxxl: 48px; --space-section: 96px; /* Radii (mirrors iOS DesignSystem) */ --radius-card: 16px; --radius-hero: 22px; --radius-button: 14px; --radius-pill: 999px; /* Default-dark surface (charcoal). Mirrors iOS where dark is the brand-default first-run experience. Cream is an opt-in alternative via `prefers-color-scheme: light` (or the explicit `.force-light` class on ). */ --bg: var(--charcoal); --bg-deep: var(--charcoal-deep); --fg: var(--ink-on-dark); --fg-60: var(--ink-on-dark-60); --fg-40: var(--ink-on-dark-40); --fg-12: var(--ink-on-dark-12); --accent-i: var(--amber-bright); --accent: var(--amber); --hairline: var(--ink-on-dark-12); color-scheme: dark; } @media (prefers-color-scheme: light){ :root:not(.force-dark){ --bg: var(--cream); --bg-deep: var(--cream-deep); --fg: var(--ink-on-cream); --fg-60: var(--ink-on-cream-60); --fg-40: var(--ink-on-cream-40); --fg-12: var(--ink-on-cream-12); --accent-i: var(--amber-deep); --accent: var(--amber-deep); --hairline: var(--ink-on-cream-12); color-scheme: light; } } /* Explicit opt-in to cream/light surface, regardless of OS preference. */ .force-light{ --bg: var(--cream); --bg-deep: var(--cream-deep); --fg: var(--ink-on-cream); --fg-60: var(--ink-on-cream-60); --fg-40: var(--ink-on-cream-40); --fg-12: var(--ink-on-cream-12); --accent-i: var(--amber-deep); --accent: var(--amber-deep); --hairline: var(--ink-on-cream-12); color-scheme: light; } /* nightowl page: force dark regardless */ .force-dark{ --bg: var(--charcoal); --bg-deep: var(--charcoal-deep); --fg: var(--ink-on-dark); --fg-60: var(--ink-on-dark-60); --fg-40: var(--ink-on-dark-40); --fg-12: var(--ink-on-dark-12); --accent-i: var(--amber-bright); --accent: var(--amber); --hairline: var(--ink-on-dark-12); color-scheme: dark; } @media (prefers-reduced-motion: reduce){ *, *::before, *::after{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } *{ box-sizing:border-box; } html,body{ margin:0; padding:0; } html{ background: var(--bg); color: var(--fg); font-family: var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-size: 17px; line-height: 1.55; } body{ min-height: 100dvh; overflow-x: hidden; } a{ color: inherit; text-decoration: none; } img,svg{ display:block; max-width:100%; } button{ font: inherit; } ::selection{ background: var(--accent); color: var(--charcoal-deep); } /* ===== Layout ===== */ .wrap{ max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); } .section{ padding: clamp(72px, 10vw, 140px) 0; } .section-tight{ padding: clamp(48px, 6vw, 80px) 0; } .hairline{ border:0; border-top:1px solid var(--hairline); margin:0; } /* ===== Header (wordmark left, App Store link right) ===== */ .site-header{ position: sticky; top: 0; z-index: 50; backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); background: color-mix(in oklab, var(--bg) 78%, transparent); border-bottom: 1px solid var(--hairline); } .site-header .inner{ display:flex; align-items:center; justify-content:space-between; height: 64px; } .site-header .store-link{ font-family: var(--sans); font-size: 14px; color: var(--fg); letter-spacing: -0.005em; border-bottom: 1px solid var(--hairline); padding-bottom: 1px; transition: color .18s ease, border-color .18s ease; } .site-header .store-link:hover{ color: var(--accent); border-bottom-color: var(--accent); } /* ===== Wordmark ===== */ .wordmark{ font-family: var(--sans); font-weight: 700; letter-spacing: -0.035em; color: var(--fg); display: inline-flex; align-items: baseline; gap: 0; line-height: 1; } .wordmark .gl,.wordmark .nt{ color: inherit; } .wordmark .i{ color: var(--accent-i); } /* The trailing period is a true circle (matching iOS `Circle()`), sized at ~20% of cap height and baseline-aligned to the wordmark. */ .wordmark .dot{ display: inline-block; width: 0.2em; height: 0.2em; border-radius: 50%; background: var(--accent-i); margin-left: 0.08em; transform: translateY(-0.02em); } .wordmark.sm{ font-size: 22px; } .wordmark.md{ font-size: 36px; } .wordmark.lg{ font-size: clamp(80px, 14vw, 160px); } /* ===== Buttons ===== */ .btn{ display: inline-flex; align-items:center; gap: 10px; padding: 14px 22px; border-radius: var(--radius-pill); font-family: var(--sans); font-weight: 600; font-size: 15px; letter-spacing: -0.005em; border: 1px solid transparent; cursor: pointer; transition: transform .12s ease, background .18s ease, color .18s ease, border-color .18s ease; text-decoration: none; } .btn:hover{ transform: translateY(-1px); } .btn-primary{ display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: var(--radius-pill); font-family: var(--sans); font-weight: 600; font-size: 15px; letter-spacing: -0.005em; text-decoration: none; /* Default (dark surface): amber-bright pill on charcoal-deep ink. */ background: var(--amber-bright); color: var(--charcoal-deep); transition: transform .12s ease, background .18s ease, color .18s ease; } .btn-primary:hover{ background: #ffe49d; transform: translateY(-1px); } @media (prefers-color-scheme: light){ :root:not(.force-dark) .btn-primary{ background: var(--ink); color: var(--cream); } :root:not(.force-dark) .btn-primary:hover{ background: var(--ink-deep); } } .force-light .btn-primary{ background: var(--ink); color: var(--cream); } .force-light .btn-primary:hover{ background: var(--ink-deep); } .btn-ghost{ color: var(--fg); border-color: var(--hairline); background: transparent; } .btn-ghost:hover{ border-color: var(--accent); } .btn .arr{ font-weight: 500; } .text-link{ color: var(--fg-60); border-bottom: 1px solid var(--hairline); padding-bottom: 1px; transition: color .18s ease, border-color .18s ease; font-size: 15px; } .text-link:hover{ color: var(--fg); border-bottom-color: var(--accent); } /* ===== Eyebrow / labels ===== */ .eyebrow{ text-transform: uppercase; font-size: 11px; letter-spacing: 0.18em; color: var(--fg-60); font-weight: 500; } .eyebrow .pip{ display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-right: 8px; transform: translateY(-1px); } /* ===== Type ===== */ .serif{ font-family: var(--serif); font-weight: 400; letter-spacing: -0.012em; } h1.display{ font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 4vw, 48px); letter-spacing: -0.02em; line-height: 1.1; margin: 0; } h2.section-h{ font-family: var(--serif); font-weight: 400; font-size: clamp(32px, 4.4vw, 56px); letter-spacing: -0.02em; line-height: 1.05; margin: 0 0 12px 0; } h3.feature-h{ font-family: var(--serif); font-weight: 500; font-size: clamp(20px, 2.4vw, 26px); letter-spacing: -0.012em; line-height: 1.18; margin: 0 0 8px; } .lede{ font-family: var(--serif); font-size: clamp(19px, 2vw, 22px); line-height: 1.55; color: var(--fg); max-width: 60ch; } .muted{ color: var(--fg-60); } .tiny{ font-size: 13px; color: var(--fg-60); } /* ===== Hero ===== */ .hero{ position: relative; padding: clamp(96px, 12vw, 168px) 0 clamp(64px, 8vw, 120px); text-align: center; overflow: hidden; } .hero::before{ content:""; position: absolute; inset: -10% -10% 0 -10%; /* Default (dark): warm amber halo bloomed into charcoal. */ background: radial-gradient(circle at 50% 50%, rgba(255,217,138,0.18) 0%, rgba(232,165,71,0.08) 40%, transparent 70%); pointer-events:none; } @media (prefers-color-scheme: light){ :root:not(.force-dark) .hero::before{ background: radial-gradient(circle at 50% 50%, rgba(232,165,71,0.16) 0%, rgba(201,138,58,0.06) 40%, transparent 70%); } } .force-light .hero::before{ background: radial-gradient(circle at 50% 50%, rgba(232,165,71,0.16) 0%, rgba(201,138,58,0.06) 40%, transparent 70%); } .force-dark .hero::before{ background: radial-gradient(circle at 50% 30%, rgba(255,217,138,0.14) 0%, rgba(232,165,71,0.05) 40%, transparent 70%); } /* ========================================================== Hero background-image variant — niche pages set `style="background-image: url(...)"` on .hero.hero-bg-img to wash the hero photo behind the title/subhead/CTA. Eric 2026-05-01: "all the niche pages need to use the hero image as a washed out background for the hero section — they look boring." ========================================================== */ .hero.hero-bg-img { background-size: cover; background-position: center; background-repeat: no-repeat; isolation: isolate; /* Force cream text inside the bg-image hero regardless of the page's color scheme. The gradient overlay is dark in both themes so dark-mode text would be invisible. */ color: var(--cream); } /* Specificity bump (:root prefix) to beat the light-mode override on `.hero::before` further up. Without this prefix the radial amber gradient wins in light theme and the dark wash never paints, leaving cream text illegible against the bg image. */ :root .hero.hero-bg-img::before { /* Stay-dark gradient so cream text reads against the full-bleed image in both light and dark page themes. Slightly stronger top and bottom to keep the eyebrow + offer-stack legible. */ position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(13, 11, 9, 0.86) 0%, rgba(13, 11, 9, 0.66) 45%, rgba(13, 11, 9, 0.86) 100% ); z-index: 0; } .hero.hero-bg-img .inner{ position: relative; z-index: 1; } /* Force cream-on-dark for every text descendant in the bg-image hero — the headline, tagline, founder note, and offer-stack small print all read against the dark gradient. */ .hero.hero-bg-img .hero-headline, .hero.hero-bg-img .hero-tagline, .hero.hero-bg-img .founder-note, .hero.hero-bg-img .founder-offer-name, .hero.hero-bg-img .founder-offer-fine, .hero.hero-bg-img .founder-offer-proof, .hero.hero-bg-img .eyebrow, .hero.hero-bg-img .display { color: var(--cream); } .hero.hero-bg-img .hero-headline-mech, .hero.hero-bg-img .hero-tagline-dim { color: rgba(250,247,242,0.66); } .hero .inner{ position: relative; } .hero .subhead{ font-family: var(--serif); font-size: clamp(28px, 3.6vw, 48px); font-weight: 400; letter-spacing: -0.018em; line-height: 1.12; margin: clamp(24px, 4vw, 40px) auto 24px; max-width: 22ch; } .hero .support{ font-size: clamp(16px, 1.6vw, 19px); color: var(--fg-60); max-width: 56ch; margin: 0 auto; } .hero .ctas{ margin-top: clamp(36px, 5vw, 56px); display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; } /* Hero supporting image (used on landing + niche heroes if present) */ .hero-image{ margin: clamp(40px, 6vw, 72px) auto 0; max-width: 880px; border-radius: var(--radius-hero); overflow: hidden; border: 1px solid var(--hairline); background: var(--bg-deep); position: relative; } .hero-image img{ width: 100%; height: auto; display:block; aspect-ratio: 16 / 10; object-fit: cover; } /* ===== Demo section ===== */ .demo{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; } @media (max-width: 880px){ .demo{ grid-template-columns: 1fr; gap: 56px; } } .demo-copy h3{ font-family: var(--serif); font-weight: 500; font-size: 22px; margin: 0 0 6px; letter-spacing: -0.012em; } .demo-copy p{ font-family: var(--serif); color: var(--fg-60); margin: 0 0 36px; max-width: 38ch; line-height: 1.55; } .demo-copy .group + .group{ margin-top: 8px; } /* ===== iPhone mock — looks like a real iPhone running Glint ===== */ .iphone-frame{ --r: 44px; position: relative; aspect-ratio: 1290 / 2796; width: 100%; max-width: 320px; margin: 0 auto; /* Titanium-feel outer frame */ background: linear-gradient(180deg, #2a2724 0%, #1a1815 50%, #2a2724 100%); border-radius: var(--r); padding: 10px; /* Subtle outer rim shadow + inner highlight gives a sense of depth */ box-shadow: 0 0 0 1px rgba(0,0,0,0.3) inset, 0 1px 0 rgba(255,255,255,0.08) inset, 0 30px 60px -20px rgba(0,0,0,0.45), 0 12px 24px -12px rgba(0,0,0,0.3); } /* The actual screen — always charcoal, regardless of the surrounding page theme */ .iphone-frame .mock{ position: relative; width: 100%; height: 100%; background: #1A1815; border-radius: calc(var(--r) - 8px); overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 32px 24px; pointer-events: none; } /* Dynamic Island — pill-shaped, top-centered, smaller than before */ .iphone-frame .mock::before{ content:""; position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 95px; height: 26px; background: #000; border-radius: 16px; } /* Top-of-screen book context label */ .iphone-frame .mock .ctx{ position: absolute; top: 56px; left: 0; right: 0; font-family: var(--sans); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(250,247,242,0.4); text-align: center; } /* The focal word — large serif, cream colored, single amber focal letter */ .iphone-frame .mock .word{ font-family: var(--serif); font-size: 38px; font-weight: 400; letter-spacing: -0.02em; color: #FAF7F2; line-height: 1; } .iphone-frame .mock .word .focal{ color: var(--amber); } /* Vertical guide brackets above/below the word — short amber pip lines */ .iphone-frame .mock .bracket{ width: 1.5px; height: 10px; background: var(--amber); opacity: 0.7; border-radius: 1px; } /* Bottom-of-screen WPM indicator */ .iphone-frame .mock .pace{ position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%); display: inline-flex; gap: 6px; align-items:center; font-family: var(--sans); font-size: 11px; color: rgba(250,247,242,0.55); letter-spacing: 0.04em; } .iphone-frame .mock .pace .pip{ width: 6px; height: 6px; border-radius: 50%; background: var(--amber); } .iphone-frame.small{ max-width: 240px; } /* ===== Value props ===== */ .props{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--hairline); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); } @media (max-width: 800px){ .props{ grid-template-columns: 1fr; } } .prop{ background: var(--bg); padding: clamp(36px, 4vw, 56px) clamp(24px, 3vw, 40px); display: flex; flex-direction: column; gap: 14px; } .prop .glyph{ width: 42px; height: 42px; display:grid; place-items:center; color: var(--accent); } .prop h4{ font-family: var(--serif); font-weight: 500; font-size: 22px; letter-spacing: -0.012em; margin: 4px 0 0; } .prop p{ margin: 0; color: var(--fg-60); max-width: 34ch; font-size: 15.5px; line-height: 1.55; } /* ===== Library teaser ===== */ .lib-teaser .head{ display:flex; align-items:end; justify-content:space-between; gap: 24px; margin-bottom: 32px; } .lib-teaser .head h2{ margin:0; } .shelf{ display:flex; gap: 18px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: thin; scrollbar-color: var(--hairline) transparent; } .shelf::-webkit-scrollbar{ height: 6px; } .shelf::-webkit-scrollbar-thumb{ background: var(--hairline); border-radius: 99px; } .cover{ flex: 0 0 auto; width: 168px; aspect-ratio: 2/3; border-radius: 6px; padding: 18px 16px; display:flex; flex-direction:column; justify-content:space-between; font-family: var(--serif); letter-spacing: -0.005em; position: relative; overflow: hidden; box-shadow: 0 14px 30px -18px rgba(0,0,0,0.5); } .cover .ti{ font-size: 18px; line-height: 1.1; font-weight: 500; } .cover .au{ font-family: var(--sans); font-size: 10px; text-transform: uppercase; letter-spacing: 0.18em; opacity: 0.7; } .cover .rule{ height: 1px; background: currentColor; opacity: 0.25; margin-top: 6px; } .cover .num{ font-family: var(--sans); font-size: 11px; letter-spacing: 0.1em; opacity: 0.5; } .cov-charcoal{ background: var(--charcoal); color: var(--cream); } .cov-charcoal .ti em{ color: var(--amber-bright); font-style: normal; } .cov-cream{ background: var(--cream); color: var(--charcoal); } .cov-cream .ti em{ color: var(--amber-deep); font-style: normal; } .cov-amber{ background: var(--amber); color: var(--charcoal); } .cov-amber-deep{ background: var(--amber-deep); color: var(--cream); } .cov-cream-deep{ background: var(--cream-deep); color: var(--charcoal); } .cov-charcoal-deep{ background: var(--charcoal-deep); color: var(--amber-bright); } /* ===== Watch teaser ===== */ .watch-teaser{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 80px); align-items: center; } @media (max-width: 880px){ .watch-teaser{ grid-template-columns: 1fr; } } .watch-frame{ --r: 56px; width: 100%; max-width: 320px; aspect-ratio: 4/5; margin: 0 auto; background: var(--charcoal-deep); border: 1px solid var(--hairline); border-radius: var(--r); position: relative; display: grid; place-items: center; overflow: hidden; } .watch-frame::before, .watch-frame::after{ content:""; position:absolute; right:-3px; width: 4px; background: var(--fg-12); border-radius: 2px; } .watch-frame::before{ top: 28%; height: 36px; } .watch-frame::after{ top: 50%; height: 24px; } .watch-frame .word{ font-family: var(--serif); font-size: 38px; letter-spacing: -0.02em; color: var(--cream); } .watch-frame .word .focal{ color: var(--amber); } .watch-frame .ctx{ position:absolute; top: 18%; font-family: var(--sans); font-size: 10px; text-transform: uppercase; letter-spacing: 0.16em; color: rgba(250,247,242,0.45); } /* ===== FAQ ===== */ .faq{ max-width: 760px; margin: 0 auto; } .faq h2{ text-align: center; margin-bottom: 40px; } .faq details{ border-top: 1px solid var(--hairline); padding: 22px 4px; } .faq details:last-of-type{ border-bottom: 1px solid var(--hairline); } .faq summary{ display: flex; align-items:center; justify-content: space-between; cursor: pointer; list-style: none; font-family: var(--serif); font-weight: 500; font-size: clamp(18px, 1.8vw, 21px); letter-spacing: -0.012em; } .faq summary::-webkit-details-marker{ display:none; } .faq summary .plus{ width: 22px; height: 22px; flex: none; display: grid; place-items: center; color: var(--accent); position: relative; } .faq summary .plus::before, .faq summary .plus::after{ content:""; position: absolute; background: currentColor; border-radius: 1px; } .faq summary .plus::before{ width: 14px; height: 1.5px; } .faq summary .plus::after{ width: 1.5px; height: 14px; transition: transform .18s ease; } .faq details[open] summary .plus::after{ transform: rotate(90deg); } .faq .answer{ margin-top: 14px; color: var(--fg-60); font-size: 16px; max-width: 64ch; line-height: 1.6; } /* ===== Footer (single-line, lowercase, every page) ===== */ .site-footer{ border-top: 1px solid var(--hairline); padding: 32px 0 48px; margin-top: 40px; font-family: var(--sans); font-size: 13px; text-align: center; color: var(--fg-60); text-transform: lowercase; } .site-footer a{ color: var(--fg-60); border-bottom: 1px solid var(--hairline); transition: color .18s ease, border-color .18s ease; } .site-footer a:hover{ color: var(--fg); border-bottom-color: var(--accent); } /* Niche-page link strip — quiet self-selection for organic visitors. The niche pages themselves are paid-traffic landing destinations; this list keeps them discoverable from the homepage without consuming a full section above. */ .site-footer-niche{ display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 6px 10px; font-family: var(--serif); font-style: italic; font-size: 13.5px; text-transform: none; color: var(--fg-40); margin: 0 auto 22px; max-width: 820px; line-height: 1.7; } .site-footer-niche-label{ font-family: var(--sans); font-style: normal; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-40); margin-right: 4px; } .site-footer-niche a{ border-bottom: none; color: var(--fg-60); } .site-footer-niche a:hover{ color: var(--fg); border-bottom: 1px solid var(--accent); } .site-footer-niche-sep{ color: var(--fg-40); } .site-footer-meta{ margin: 0; } /* ===== Niche-page hero override ===== */ .hero.tight{ padding-top: clamp(72px, 9vw, 120px); padding-bottom: clamp(48px, 6vw, 80px); } /* ===== Quote moments ===== */ .quote{ font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 3.6vw, 44px); line-height: 1.18; letter-spacing: -0.018em; max-width: 22ch; margin: 0 auto; text-align: center; } .quote em{ color: var(--accent-i); font-style: normal; } /* ===== Two-up niche layout ===== */ .two-up{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; } @media (max-width: 880px){ .two-up{ grid-template-columns: 1fr; } } .two-up.flip > :first-child{ order: 2; } @media (max-width: 880px){ .two-up.flip > :first-child{ order: 0; } } .kicker-row{ display: flex; align-items:center; gap: 12px; margin-bottom: 18px; } /* ===== Misc ===== */ .center{ text-align: center; } .cta-strip{ text-align: center; padding: clamp(72px, 8vw, 120px) 0; } .cta-strip h2{ margin-bottom: 24px; } .cta-strip p{ margin: 0 auto 36px; max-width: 48ch; color: var(--fg-60); } /* ===== Proof bar (niche pages — shared) ===== */ .proof-bar{ border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); padding: 24px 0; } .proof-bar .row{ display:flex; justify-content:space-between; align-items:center; gap: 32px; flex-wrap: wrap; font-family: var(--sans); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-60); } /* ===== Restart-page calendar dot grid ===== */ .dots{ display:grid; grid-template-columns: repeat(14, 1fr); gap: 8px; max-width: 420px; margin: 0 auto; } .dots .d{ aspect-ratio: 1; border-radius: 50%; background: var(--fg-12); } /* Default (dark surface): cream "today" marker, amber-primary fills. */ .dots .d.fill{ background: var(--amber); } .dots .d.recent{ background: var(--cream); } @media (prefers-color-scheme: light){ :root:not(.force-dark) .dots .d.recent{ background: var(--ink); } :root:not(.force-dark) .dots .d.fill{ background: var(--amber-deep); } } .force-light .dots .d.recent{ background: var(--ink); } .force-light .dots .d.fill{ background: var(--amber-deep); } /* ===== Supporting image (used on niche pages) ===== */ .support-image{ margin: 0; max-width: 100%; border-radius: var(--radius-card); overflow: hidden; background: var(--bg-deep); border: 1px solid var(--hairline); } .support-image img{ width: 100%; height: auto; display:block; aspect-ratio: 4 / 3; object-fit: cover; } .support-image figcaption{ font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--fg-60); padding: 12px 16px 14px; text-align: center; } /* ===== Long-form prose page (privacy) ===== */ .prose-page{ padding: clamp(48px, 7vw, 96px) 0 clamp(72px, 9vw, 120px); } .prose{ max-width: 640px; margin: 0 auto; font-family: var(--serif); font-size: 18px; line-height: 1.75; } .prose h1{ font-family: var(--serif); font-weight: 500; font-size: clamp(32px, 4.4vw, 48px); letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 12px; } .prose h2{ font-family: var(--serif); font-weight: 500; font-size: clamp(22px, 2.4vw, 28px); letter-spacing: -0.012em; margin: 56px 0 14px; } .prose h3{ font-family: var(--serif); font-weight: 500; font-size: 20px; margin: 32px 0 8px; } .prose p{ margin: 0 0 1.2em; } .prose ul, .prose ol{ margin: 0 0 1.2em; padding-left: 1.4em; } .prose li{ margin-bottom: 0.4em; } .prose hr{ border: 0; border-top: 1px solid var(--hairline); margin: 48px 0; } .prose a{ color: var(--accent); border-bottom: 1px solid var(--hairline); } .prose a:hover{ border-bottom-color: var(--accent); } .prose strong{ font-weight: 600; color: var(--fg); } .prose code{ font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; } .prose blockquote{ margin: 1em 0; padding-left: 1.2em; border-left: 2px solid var(--accent); color: var(--fg-60); font-style: italic; } .prose .meta{ font-family: var(--sans); font-size: 13px; color: var(--fg-60); margin: 24px 0 32px; } .prose table{ width: 100%; border-collapse: collapse; margin: 1.4em 0; font-family: var(--sans); font-size: 13px; } .prose th, .prose td{ text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--hairline); vertical-align: top; } .prose th{ font-weight: 600; color: var(--fg); } /* ===== 404 ===== */ .notfound{ min-height: 70dvh; display: grid; place-items: center; text-align: center; padding: 96px var(--gutter); } .notfound .num{ font-family: var(--serif); font-size: clamp(80px, 14vw, 160px); font-weight: 400; letter-spacing: -0.04em; line-height: 1; color: var(--accent-i); margin: 0; } .notfound h1{ font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 3.6vw, 44px); letter-spacing: -0.018em; margin: 16px 0 8px; } .notfound p{ color: var(--fg-60); max-width: 40ch; margin: 0 auto 32px; } /* ========================================================== Pre-launch email capture + side-by-side CTA Used on hero (compact inline) and bottom CTA strip (card). ========================================================== */ /* Side-by-side CTA pair: App Store button + email capture together. Stacks on narrow screens, hugs centerline on wide. */ .cta-pair{ margin-top: clamp(36px, 5vw, 56px); display: flex; align-items: flex-start; justify-content: center; gap: 16px; flex-wrap: wrap; } .cta-pair .cta-col{ display: flex; flex-direction: column; align-items: center; gap: 8px; } .cta-pair .cta-note{ font-family: var(--sans); font-size: 12px; letter-spacing: 0.04em; color: var(--fg-60); } @media (max-width: 720px){ .cta-pair{ flex-direction: column; gap: 24px; } } /* Inline notify form — single row, hero-friendly */ .notify{ display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 420px; } .notify .notify-row{ display: flex; align-items: stretch; gap: 8px; } .notify-input{ flex: 1 1 auto; min-width: 0; padding: 12px 16px; font-family: var(--sans); /* 16px minimum prevents iOS Safari from auto-zooming on focus */ font-size: 16px; color: var(--fg); background: var(--bg); border: 1px solid var(--hairline); border-radius: var(--radius-pill); outline: none; transition: border-color .18s ease, background .18s ease; } .notify-input::placeholder{ color: var(--fg-40); } .notify-input:focus{ border-color: var(--accent); background: var(--bg-deep); } .notify-button{ flex: none; padding: 13px 20px; font-family: var(--sans); font-weight: 600; font-size: 14px; letter-spacing: -0.005em; /* Default (dark surface): amber-bright pill on charcoal-deep ink. */ background: var(--amber-bright); color: var(--charcoal-deep); border: 1px solid var(--amber-bright); border-radius: var(--radius-pill); cursor: pointer; transition: background .18s ease, transform .12s ease; } .notify-button:hover{ background: #ffe49d; transform: translateY(-1px); } @media (prefers-color-scheme: light){ :root:not(.force-dark) .notify-button{ background: var(--ink); color: var(--cream); border-color: var(--ink); } :root:not(.force-dark) .notify-button:hover{ background: var(--ink-deep); } } .force-light .notify-button{ background: var(--ink); color: var(--cream); border-color: var(--ink); } .force-light .notify-button:hover{ background: var(--ink-deep); } /* Checkboxes under the input */ .notify-checks{ display: flex; flex-direction: column; gap: 6px; font-family: var(--sans); font-size: 13px; color: var(--fg-60); text-align: left; padding: 0 4px; } .notify-checks label{ display: flex; align-items: flex-start; gap: 8px; cursor: pointer; line-height: 1.4; } .notify-checks input[type="checkbox"]{ flex: none; width: 14px; height: 14px; margin-top: 2px; accent-color: var(--accent); cursor: pointer; } /* Success message (hidden until form submits) */ .notify-success{ display: none; font-family: var(--serif); font-size: 16px; color: var(--fg); padding: 14px 16px; border: 1px solid var(--hairline); border-radius: var(--radius-card); background: var(--bg-deep); text-align: center; } .notify.is-submitted .notify-row, .notify.is-submitted .notify-checks{ display: none; } .notify.is-submitted .notify-success{ display: block; } /* Card variant — used in standalone "Get notified" sections (e.g. above footer) */ .notify-card{ max-width: 540px; margin: 0 auto; padding: clamp(28px, 3vw, 40px); border: 1px solid var(--hairline); border-radius: var(--radius-card); background: var(--bg-deep); text-align: center; } .notify-card h3{ font-family: var(--serif); font-weight: 500; font-size: clamp(22px, 2.4vw, 28px); letter-spacing: -0.012em; margin: 0 0 8px; } .notify-card p{ font-family: var(--serif); color: var(--fg-60); margin: 0 0 24px; font-size: 16px; } .notify-card .notify{ margin: 0 auto; } .notify-card .notify-checks{ text-align: center; align-items: center; } .notify-card .notify-checks label{ justify-content: center; } /* ========================================================== Real-app iPhone screenshot — used to drop a simulator capture into the page surrounded by a titanium frame matching .iphone-frame. The image fills the screen area (no chrome inside the PNG). Source PNGs live at /assets/images/screenshots/iphone-*.png and are 1206 x 2622 (Simulator @1x for iPhone 15 Pro / 16 Pro). ========================================================== */ .iphone-shot{ --r: 44px; position: relative; aspect-ratio: 1206 / 2622; width: 100%; max-width: 320px; margin: 0 auto; background: linear-gradient(180deg, #2a2724 0%, #1a1815 50%, #2a2724 100%); border-radius: var(--r); padding: 10px; box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 30px 60px -20px rgba(0,0,0,0.55), 0 8px 20px -8px rgba(0,0,0,0.35); } .iphone-shot img{ display: block; width: 100%; height: 100%; border-radius: calc(var(--r) - 8px); object-fit: cover; background: #1A1815; } .iphone-shot figcaption{ position: absolute; left: 0; right: 0; bottom: -32px; text-align: center; font-family: var(--sans); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-60); } /* === accessibility utility ===================================== */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ========================================================== === scroll.html === RSVP-as-scroll walkthrough. The page IS the demo. - A single .scroll-stage is position: sticky and centered; its focal word is driven by window.scrollY via JS. - Each .scroll-section provides ~one viewport of context and a |-delimited word list (data-words=...). - The stage's "skin" toggles between bare / iPhone / Watch based on the active section's data-skin attribute. - prefers-reduced-motion: reduce -> .reduced-motion on hides the stage and reveals each section's .scroll-prose-fallback statically. ========================================================== */ .scroll-page { position: relative; } /* The pinned RSVP stage. Fixed-centered: stays at the viewport center across the whole page; sections scroll behind it. JS toggles its data-skin attribute and updates the focal word as scroll position advances through each section's word list. The wrapper is just a positioning anchor so the stage can be centered horizontally within the page max-width. */ .scroll-stage-wrap { position: fixed; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 5; display: grid; place-items: center; } .scroll-stage { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); display: grid; place-items: center; pointer-events: none; transition: opacity 320ms ease; } /* Three skins live as siblings; CSS shows exactly one based on data-skin. This way the JS only has to flip one attribute. */ .scroll-stage-bare, .scroll-stage-iphone, .scroll-stage-watch { grid-column: 1; grid-row: 1; opacity: 0; transition: opacity 320ms ease; pointer-events: none; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; } .scroll-stage[data-skin="bare"] .scroll-stage-bare { opacity: 1; } .scroll-stage[data-skin="iphone"] .scroll-stage-iphone { opacity: 1; } .scroll-stage[data-skin="watch"] .scroll-stage-watch { opacity: 1; } .scroll-stage[data-skin="hidden"] { opacity: 0; } /* Library: dim the bare stage further so the cover row reads as the visual focus while the word still keeps quiet rhythm. */ .scroll-stage[data-skin="bare-dim"] { opacity: 0.35; } .scroll-stage[data-skin="bare-dim"] .scroll-stage-bare { opacity: 1; } /* Bare skin: the focal word floating in the middle of the page, amber brackets above and below, charcoal background read from the page itself. Fraunces serif, large. */ .scroll-stage-bare { gap: 18px; } .scroll-stage-ctx { font-family: var(--sans); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-40); text-align: center; } .scroll-stage-bare .bracket { width: 1.5px; height: 12px; background: var(--amber); opacity: 0.7; border-radius: 1px; } .scroll-stage-word { font-family: var(--serif); font-weight: 400; font-size: clamp(56px, 9vw, 120px); letter-spacing: -0.02em; line-height: 1; color: var(--fg); text-align: center; /* Reserve enough vertical space that swap-ins don't reflow neighbors. */ min-height: 1em; } .scroll-stage-word .focal { color: var(--amber); } .scroll-stage-pace { display: inline-flex; gap: 6px; align-items: center; font-family: var(--sans); font-size: 11px; letter-spacing: 0.04em; color: var(--fg-60); } .scroll-stage-pace .pip { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); } /* iPhone & Watch skins re-use the existing .iphone-frame and .watch-frame styles, scaled down so the frame doesn't dominate the viewport when it's pinned. */ .scroll-stage-iphone .iphone-frame { max-width: 180px; } .scroll-stage-iphone .iphone-frame .mock { gap: 12px; padding: 20px 16px; } .scroll-stage-iphone .iphone-frame .mock .word { font-size: 26px; } .scroll-stage-iphone .iphone-frame .mock .ctx { font-size: 9px; top: 44px; } .scroll-stage-iphone .iphone-frame .mock .pace { font-size: 10px; bottom: 28px; } .scroll-stage-watch .watch-frame { max-width: 220px; } .scroll-stage-watch .watch-frame .word { font-size: 30px; } /* ---- Sections ---- Sequenced timing (per Eric 2026-05-01): each section is taller than viewport (150vh). The first ~60% of section scroll height is the WORD PHASE — centered RSVP word stream plays. After that, the section's feature card slides in from its assigned side (.card-left / .card-right). The card holds for the last ~35% then slides out at ~95%. Only one feature card on screen at any time, so attention isn't split. */ .scroll-section { position: relative; min-height: 150vh; padding: clamp(48px, 8vw, 96px) var(--gutter); display: flex; flex-direction: column; align-items: center; justify-content: space-between; /* No z-index here on purpose: a stacking context on .scroll-section would trap the position:fixed feature card inside the section it belongs to and let the next section's content paint over it. Cards live in the page stacking context (z-index 4) above sections, under the pinned stage (z-index 5). */ text-align: center; } .scroll-section + .scroll-section { border-top: 1px solid var(--hairline); } /* CTA section is the static close — it doesn't get the 150vh extra. */ .scroll-section.scroll-cta { min-height: auto; } /* Section 1 (hook): keep the "Scroll ↓" cue at the bottom of the first viewport. */ .scroll-hook { padding-top: clamp(80px, 12vh, 140px); padding-bottom: clamp(60px, 10vh, 100px); } .scroll-hook-bottom { width: 100%; display: flex; justify-content: center; position: absolute; bottom: clamp(40px, 6vh, 80px); left: 0; } /* Section copy fades in as it enters viewport (set by IO). */ .scroll-section .scroll-cta-h, .scroll-section .scroll-cta-body, .scroll-section .founder-note, .scroll-section .founder-offer { opacity: 0; transform: translateY(8px); transition: opacity 600ms ease, transform 600ms ease; } .scroll-section.is-visible .scroll-cta-h, .scroll-section.is-visible .scroll-cta-body, .scroll-section.is-visible .founder-note, .scroll-section.is-visible .founder-offer { opacity: 1; transform: translateY(0); } .scroll-h { font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 3.6vw, 44px); letter-spacing: -0.02em; line-height: 1.1; margin: 0; max-width: 22ch; } /* Brand-styled section heading: reuse the wordmark amber-middle- letter + amber-dot treatment, scaled for h2 presence on /scroll. Slightly larger than the .md (36px) wordmark default. */ .wordmark.scroll-h-mark { font-size: clamp(40px, 5.2vw, 64px); } .scroll-prose-fallback { font-family: var(--serif); font-size: clamp(17px, 1.6vw, 19px); line-height: 1.6; color: var(--fg-60); max-width: 48ch; margin: 0 auto; } .scroll-cue { font-family: var(--sans); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-40); margin: 0; transition: opacity 400ms ease; } /* When the RSVP stage is active, the section's static-prose fallback is hidden; the visitor reads via the pinned word stream instead. */ .rsvp-active .scroll-prose-fallback { display: none; } /* ---- Feature card system (sequenced reveal) ---- Each non-CTA section has ONE .scroll-feature-card. The card holds the section heading (.scroll-h with .wordmark) + supporting copy (.scroll-card-body) + any extras (cover shelf, watch link, etc.). At rest (no class): card is off-screen on its assigned side. .card-in: card translates to its resting position (centered vertically, anchored to its side of the viewport). .card-out: card slides back off-screen (same side it came in). Side alternation is set per-section by .card-left / .card-right. Mobile (<= 640px): cards slide from the BOTTOM instead of the sides, since horizontal slide-ins crowd a narrow viewport. */ .scroll-feature-card { position: fixed; top: 50%; width: min(360px, 38vw); max-width: 360px; /* Vertical center, with a slight downward bias so the card sits below the centered RSVP word rather than crashing into it. */ transform: translateY(-50%); z-index: 4; /* under the pinned stage (5) for clean visual stack */ pointer-events: none; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 24px; background: var(--bg); border: 1px solid var(--hairline); border-radius: 18px; box-shadow: 0 20px 60px rgba(0,0,0,0.18); text-align: left; opacity: 0; transition: transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 500ms ease; } .scroll-feature-card .scroll-h { margin: 0; text-align: left; } .scroll-feature-card .scroll-h-mark { /* When sat in a side card, slightly smaller than the spec range so the card stays compact at desktop widths. */ font-size: clamp(36px, 4.4vw, 56px); } .scroll-card-body { font-family: var(--serif); font-size: clamp(16px, 1.4vw, 18px); line-height: 1.55; color: var(--fg-60); margin: 0; max-width: 32ch; } /* Resting position: pinned to a side gutter. */ .card-left { left: clamp(16px, 4vw, 56px); transform: translate(-130%, -50%); } .card-right { right: clamp(16px, 4vw, 56px); transform: translate(130%, -50%); } .card-left.card-in { transform: translate(0, -50%); opacity: 1; pointer-events: auto; } .card-right.card-in { transform: translate(0, -50%); opacity: 1; pointer-events: auto; } .card-left.card-out { transform: translate(-130%, -50%); opacity: 0; } .card-right.card-out { transform: translate(130%, -50%); opacity: 0; } /* Library section's card needs more vertical room for the shelf. */ .scroll-library .scroll-feature-card { width: min(420px, 44vw); max-width: 420px; } .scroll-library .scroll-library-shelf { margin: 4px 0 0; } /* Watch section: the "More on the watch" link inside the card. */ .scroll-watch-link { margin: 0; font-size: 14px; } /* ---- Library cover shelf (used inside the Library card) ---- */ .scroll-library-shelf { display: flex; gap: 14px; width: 100%; max-width: 100vw; margin: 16px 0 0; overflow-x: auto; scroll-snap-type: x mandatory; padding: 12px 4px 12px; scrollbar-width: thin; scrollbar-color: var(--hairline) transparent; } .scroll-library-shelf::-webkit-scrollbar { height: 6px; } .scroll-library-shelf::-webkit-scrollbar-thumb { background: var(--hairline); border-radius: 99px; } .scroll-library-shelf .cover { scroll-snap-align: center; flex: 0 0 auto; width: 120px; padding: 12px 10px; } .scroll-library-shelf .cover .ti { font-size: 14px; } .scroll-library-shelf .cover .au { font-size: 9px; letter-spacing: 0.16em; } .scroll-library-shelf .cover .num { font-size: 9px; } /* ---- CTA section ---- */ .scroll-cta { background: var(--bg-deep); } .scroll-cta-h { text-align: center; margin: 14px auto 0; display: flex; justify-content: center; } .scroll-cta-body { font-family: var(--serif); font-size: clamp(17px, 1.6vw, 19px); line-height: 1.6; color: var(--fg-60); text-align: center; max-width: 52ch; margin: 24px auto 0; } /* ---- prefers-reduced-motion fallback ---- The pinned stage is removed; each section's .scroll-prose-fallback is always shown. Feature cards appear in their resting position (the JS adds .card-in to all of them so they're visible without animation). The visitor reads the page as a regular static page, no flashing. */ .reduced-motion .scroll-stage-wrap { display: none; } .reduced-motion .scroll-section { min-height: auto; padding: clamp(48px, 8vw, 80px) var(--gutter); } .reduced-motion .scroll-section .scroll-prose-fallback { display: block !important; opacity: 1 !important; transform: none !important; } .reduced-motion .scroll-section .scroll-cta-h, .reduced-motion .scroll-section .scroll-cta-body, .reduced-motion .scroll-section .founder-note, .reduced-motion .scroll-section .founder-offer { opacity: 1 !important; transform: none !important; } /* Reduced motion: cards become inline static blocks, no fixed positioning, no transforms. */ .reduced-motion .scroll-feature-card { position: static; width: 100%; max-width: 540px; margin: 24px auto 0; transform: none !important; opacity: 1 !important; transition: none !important; pointer-events: auto; align-items: center; text-align: center; } .reduced-motion .scroll-feature-card .scroll-h, .reduced-motion .scroll-card-body { text-align: center; } /* Narrow-viewport tuning: cards slide from BOTTOM, not the side. At <= 640px, horizontal slide-ins crowd the screen. */ @media (max-width: 640px) { .scroll-stage-word { font-size: clamp(40px, 14vw, 72px); } .scroll-stage-iphone .iphone-frame { max-width: 220px; } .scroll-stage-watch .watch-frame { max-width: 220px; } .scroll-h { font-size: clamp(24px, 6vw, 32px); } .scroll-feature-card { /* Pin to bottom of viewport, full-width on mobile. */ top: auto; bottom: 24px; left: 16px; right: 16px; width: auto; max-width: none; transform: translateY(140%); padding: 18px 20px; } .scroll-library .scroll-feature-card { width: auto; max-width: none; } .card-left, .card-right { /* Override desktop side anchoring on mobile. */ left: 16px; right: 16px; transform: translateY(140%); } .card-left.card-in, .card-right.card-in { transform: translateY(0); } .card-left.card-out, .card-right.card-out { transform: translateY(140%); } .scroll-feature-card .scroll-h-mark { font-size: clamp(32px, 8vw, 44px); } } /* Founder-voice line above the homepage form. Italic serif, muted, signed. */ .founder-note { font-family: var(--serif); font-style: italic; font-size: clamp(15px, 1.4vw, 17px); line-height: 1.5; color: var(--fg-60); text-align: center; max-width: 44ch; margin: clamp(24px, 4vw, 36px) auto 0; } /* ========================================================== Homepage hero — tight above-the-fold layout (2026-04-29) Replaces the prior dual-CTA pattern. App Store badge (inactive) + simplified single-button form, side-by-side on wide viewports, stacked on narrow. Hero image moved to its own section below. ========================================================== */ .hero.hero-tight { padding: clamp(56px, 8vw, 96px) 0 clamp(40px, 6vw, 64px); text-align: center; overflow: hidden; } /* Smaller wordmark so the whole hero fits above the fold */ .hero-wordmark { margin-top: 28px; font-size: clamp(72px, 11vw, 120px); font-family: var(--sans); font-weight: 700; letter-spacing: -0.035em; color: var(--fg); display: inline-flex; align-items: baseline; gap: 0; line-height: 1; } /* Combined tagline — replaces .subhead + .support */ .hero-tagline { font-family: var(--serif); font-size: clamp(22px, 2.6vw, 32px); font-weight: 400; letter-spacing: -0.014em; line-height: 1.25; margin: clamp(20px, 3vw, 32px) auto 0; max-width: 36ch; color: var(--fg); } .hero-tagline-dim { color: var(--fg-60); } /* Hero CTA row: badge + or + form */ .hero-cta { margin-top: clamp(24px, 3.5vw, 36px); display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; } .hero-or { font-family: var(--sans); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-40); flex: 0 0 auto; } @media (max-width: 720px) { .hero-cta { flex-direction: column; gap: 16px; } } /* "Coming to the App Store" inactive badge — Apple-Store-adjacent styling without claiming to be the official Apple badge. Visually disabled (opacity + cursor) and aria-disabled. No href, tabindex=-1. */ .appstore-badge { display: inline-flex; align-items: center; gap: 12px; padding: 10px 20px; min-width: 200px; background: #1a1a1a; color: #ffffff; border-radius: 12px; border: 1px solid rgba(255,255,255,0.10); font-family: var(--sans); text-decoration: none; user-select: none; } .appstore-badge svg { width: 28px; height: 28px; fill: currentColor; flex: 0 0 auto; } .appstore-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; text-align: left; } .appstore-pre { font-size: 11px; letter-spacing: 0.04em; opacity: 0.72; } .appstore-name { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; margin-top: 3px; } .appstore-badge-disabled { cursor: not-allowed; opacity: 0.6; pointer-events: none; } /* Simplified hero form — single email row + single TestFlight checkbox */ .notify.hero-form { width: 100%; max-width: 380px; gap: 8px; } .notify-tf { display: flex; align-items: flex-start; gap: 8px; font-family: var(--sans); font-size: 12px; line-height: 1.4; color: var(--fg-60); text-align: left; padding: 0 4px; cursor: pointer; } .notify-tf input[type="checkbox"] { flex: none; width: 14px; height: 14px; margin-top: 2px; accent-color: var(--accent); cursor: pointer; } /* Hero supporting image, now in its own section below the hero. */ .hero-image-section { padding: clamp(24px, 4vw, 48px) 0 clamp(48px, 6vw, 80px); } .hero-image-cap { margin: 24px 0 0; text-align: center; } /* ========================================================== "Pick the one that sounds like you" — niche grid below the homepage hero. Static, no slider, no autoplay. Each tile links to a niche page; visitor self-selects. ========================================================== */ .niche-grid-section { padding: clamp(72px, 9vw, 120px) 0; } .niche-grid-h { text-align: center; margin: 14px auto 48px; max-width: 24ch; } .niche-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 32px); max-width: var(--maxw); margin: 0 auto; } @media (max-width: 880px) { .niche-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 540px) { .niche-grid { grid-template-columns: 1fr; } } .niche-tile { display: flex; flex-direction: column; border-radius: var(--radius-card); overflow: hidden; border: 1px solid var(--hairline); background: var(--bg); text-decoration: none; color: inherit; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; } .niche-tile:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 18px 40px -24px rgba(0,0,0,0.35); } .niche-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .niche-tile-img { margin: 0; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-deep); } .niche-tile-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; } .niche-tile:hover .niche-tile-img img { transform: scale(1.03); } .niche-tile-text { padding: clamp(18px, 2vw, 24px) clamp(20px, 2.4vw, 28px) clamp(20px, 2.4vw, 28px); display: flex; flex-direction: column; gap: 10px; flex: 1; } .niche-tile-lede { font-family: var(--serif); font-size: clamp(18px, 1.8vw, 22px); line-height: 1.3; letter-spacing: -0.012em; color: var(--fg); margin: 0; flex: 1; } /* Two-line tile copy: situational hook + outcome promise (Hormozi pattern). */ .niche-tile-hook { font-family: var(--serif); font-size: clamp(20px, 2vw, 24px); line-height: 1.25; letter-spacing: -0.014em; color: var(--fg); margin: 0; } .niche-tile-promise { font-family: var(--serif); font-size: clamp(15px, 1.45vw, 17px); line-height: 1.4; color: var(--fg-60); margin: 0; flex: 1; } .niche-tile-cta { font-family: var(--sans); font-size: 14px; color: var(--fg-60); letter-spacing: -0.005em; margin-top: 4px; transition: color .18s ease; } .niche-tile:hover .niche-tile-cta { color: var(--accent); } /* ========================================================== Founder's Beta — named hero offer (replaces dual-CTA pattern) The offer name reads as a single confident promise; the form is the only CTA. Friction remover sits below. ========================================================== */ .founder-offer { margin-top: clamp(28px, 4vw, 40px); display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; } .founder-offer-name { font-family: var(--serif); font-style: italic; font-size: clamp(15px, 1.45vw, 17px); line-height: 1.45; color: var(--fg-60); text-align: center; max-width: 44ch; margin: 0; } .founder-offer-fine { font-family: var(--sans); font-size: 12px; letter-spacing: 0.04em; color: var(--fg-40); text-align: center; margin: 4px 0 0; } .founder-offer-proof { font-family: var(--sans); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); text-align: center; margin: 8px 0 0; } .founder-offer .notify.hero-form { margin: 0 auto; } /* ========================================================== Dual-CTA pattern — TestFlight (primary) + email-notify (secondary) inside the .founder-offer block. The primary CTA enrolls testers into TestFlight and grants Pro free for life in exchange for honest feedback. The secondary form captures emails for visitors who only want a "tell me when it ships" notification. Both placeholders (REPLACE_WITH_TESTFLIGHT_LINK, REPLACE_WITH_FORMSPREE_ID) must be swapped for real values before launch. ========================================================== */ .founder-offer-tf { display: inline-flex; align-items: center; justify-content: center; min-width: 280px; text-align: center; } .founder-offer-or { font-family: var(--sans); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-40); text-align: center; margin: 22px 0 4px; display: flex; align-items: center; gap: 12px; width: 100%; max-width: 360px; } .founder-offer-or::before, .founder-offer-or::after { content: ""; flex: 1; height: 1px; background: var(--hairline); } .founder-offer-secondary-line { font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--fg-60); text-align: center; margin: 0 0 6px; } .notify-button.notify-button-ghost { background: transparent; border: 1px solid var(--accent); color: var(--accent); } .notify-button.notify-button-ghost:hover { background: rgba(232, 165, 71, 0.08); transform: none; } /* ========================================================== Proof quotes — three-up beta-reader testimonial wall. Lives between hero and niche grid on the homepage. ========================================================== */ .proof-quotes-section { padding: clamp(56px, 7vw, 96px) 0 clamp(40px, 5vw, 64px); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); } .proof-quotes-section .eyebrow { margin-bottom: clamp(32px, 4vw, 48px); } .proof-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 36px); max-width: var(--maxw); margin: 0 auto; } @media (max-width: 880px) { .proof-quotes { grid-template-columns: 1fr; gap: 24px; } } .proof-quote { margin: 0; padding: clamp(20px, 2vw, 28px); border: 1px solid var(--hairline); border-radius: var(--radius-card); background: var(--bg); display: flex; flex-direction: column; gap: 16px; } .proof-quote blockquote { font-family: var(--serif); font-size: clamp(16px, 1.55vw, 18px); line-height: 1.5; letter-spacing: -0.005em; color: var(--fg); margin: 0; quotes: "\201C" "\201D"; } .proof-quote blockquote::before { content: open-quote; } .proof-quote blockquote::after { content: close-quote; } .proof-quote figcaption { font-family: var(--sans); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-60); } /* ========================================================== Offer stack — Free vs Pro side-by-side, Founder band below. ========================================================== */ .offer-stack-section { padding: clamp(72px, 9vw, 120px) 0; } .offer-stack-head { text-align: center; margin-bottom: clamp(40px, 5vw, 64px); display: flex; flex-direction: column; align-items: center; } .offer-stack { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 2.4vw, 28px); max-width: 920px; margin: 0 auto; } @media (max-width: 720px) { .offer-stack { grid-template-columns: 1fr; } } .offer-card { border: 1px solid var(--hairline); border-radius: var(--radius-card); padding: clamp(24px, 3vw, 36px); background: var(--bg); display: flex; flex-direction: column; gap: 20px; } .offer-card-pro { border-color: var(--accent); box-shadow: 0 18px 40px -28px rgba(0,0,0,0.35); } .offer-card-head { display: flex; flex-direction: column; gap: 6px; border-bottom: 1px solid var(--hairline); padding-bottom: 20px; } .offer-card-name { font-family: var(--serif); font-size: clamp(22px, 2.4vw, 28px); font-weight: 500; letter-spacing: -0.012em; margin: 0; color: var(--fg); } .offer-card-price { font-family: var(--sans); font-size: 14px; color: var(--fg-60); margin: 0; } .offer-card-price-num { font-family: var(--serif); font-weight: 500; font-size: clamp(28px, 3vw, 36px); color: var(--fg); letter-spacing: -0.014em; margin-right: 6px; } .offer-card-price-unit { font-size: 13px; color: var(--fg-60); } .offer-card-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; } .offer-card-list li { font-family: var(--serif); font-size: clamp(15px, 1.45vw, 17px); line-height: 1.5; color: var(--fg); position: relative; padding-left: 22px; } .offer-card-list li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); } .offer-card-foot { font-family: var(--sans); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-40); margin: 4px 0 0; } .offer-stack-band { margin-top: clamp(40px, 5vw, 56px); padding: clamp(28px, 4vw, 40px); background: var(--bg-deep); border: 1px solid var(--hairline); border-radius: var(--radius-card); text-align: center; max-width: 640px; margin-left: auto; margin-right: auto; } .offer-stack-band-name { font-family: var(--serif); font-style: italic; font-size: clamp(18px, 1.8vw, 22px); line-height: 1.4; color: var(--fg); margin: 0 0 12px; } .offer-stack-band-body { font-family: var(--serif); font-size: clamp(15px, 1.45vw, 17px); line-height: 1.55; color: var(--fg-60); margin: 0 0 24px; max-width: 48ch; margin-left: auto; margin-right: auto; } /* ========================================================== Founder authority — Eric, in his own voice. Lives between the demo and the value-props on the homepage. ========================================================== */ .founder-authority-section { padding: clamp(72px, 9vw, 120px) 0; } .founder-authority { max-width: 640px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; } .founder-h { margin: 14px 0 24px; max-width: 22ch; } .founder-body { font-family: var(--serif); font-size: clamp(18px, 1.8vw, 22px); line-height: 1.55; letter-spacing: -0.005em; color: var(--fg); margin: 0; max-width: 56ch; } .founder-sign { font-family: var(--sans); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-60); margin: 24px 0 0; } /* ========================================================== Homepage hero headline (founder-story rewrite, 2026-05-05) Replaces the giant wordmark as the H1. Sans, tight tracking, serif-adjacent in size — the page-leading promise. ========================================================== */ .hero-headline { font-family: var(--sans); font-weight: 700; font-size: clamp(44px, 8.4vw, 80px); letter-spacing: -0.035em; line-height: 1.04; color: var(--fg); margin: clamp(20px, 3vw, 32px) auto 0; max-width: 18ch; text-align: center; text-wrap: balance; } .hero-headline-mech { display: block; font-style: normal; font-weight: 500; font-size: 0.5em; letter-spacing: -0.02em; color: var(--fg-60); margin-top: 0.45em; } /* ========================================================== Founder-story Lead block (the "I" letter, 2026-05-05) Sits between the hero and the niche grid. Italic serif, narrower column, signed. Reuses .section spacing. The founder-authority-section was removed — this replaces it with PAS+ structure per Alisha Conlin-Hurd's playbook. ========================================================== */ .founder-letter-section { padding: clamp(56px, 7vw, 96px) 0 clamp(56px, 7vw, 96px); } .founder-letter { max-width: 640px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; } .founder-letter-body { font-family: var(--serif); font-style: italic; font-size: clamp(20px, 2.2vw, 26px); line-height: 1.5; letter-spacing: -0.005em; color: var(--fg); margin: 18px 0 0; max-width: 56ch; border: 0; padding: 0; quotes: none; } .founder-letter-body p { margin: 0 0 14px; } .founder-letter-body p:last-child { margin-bottom: 0; } .founder-letter-sign { font-family: var(--sans); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-60); margin: 28px 0 0; } .founder-demo-video { margin: 28px 0 0; display: flex; flex-direction: column; align-items: center; gap: 14px; } .founder-demo-stage { display: flex; flex-direction: row; align-items: center; gap: clamp(20px, 4vw, 40px); max-width: 640px; width: 100%; justify-content: center; } .founder-demo-video video { width: 240px; max-width: 40vw; height: auto; border-radius: 22px; border: 1px solid color-mix(in srgb, var(--amber) 22%, transparent); background: var(--charcoal-deep); display: block; flex-shrink: 0; } .founder-demo-side { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; max-width: 24ch; flex: 1 1 auto; min-width: 0; } .founder-demo-caption { font-family: var(--serif); font-size: clamp(18px, 2.4vw, 22px); line-height: 1.35; color: var(--fg); margin: 0; min-height: 4em; transition: opacity 200ms ease; } .founder-demo-unmute { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 12px; background: transparent; border: 1px solid color-mix(in srgb, var(--amber) 35%, transparent); border-radius: 999px; color: var(--fg); font-family: var(--sans); font-size: 12px; letter-spacing: 0.04em; cursor: pointer; transition: background 160ms ease, border-color 160ms ease, transform 120ms ease; } .founder-demo-unmute:hover, .founder-demo-unmute:focus-visible { background: color-mix(in srgb, var(--amber) 14%, transparent); border-color: var(--amber); outline: none; } .founder-demo-unmute:active { transform: translateY(1px); } .founder-demo-unmute.is-on { background: color-mix(in srgb, var(--amber) 22%, transparent); border-color: var(--amber); } .founder-demo-unmute-icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--amber); color: var(--charcoal-deep); flex-shrink: 0; } .founder-demo-video figcaption { font-family: var(--serif); font-style: italic; font-size: 14px; letter-spacing: 0.01em; color: var(--fg-60); text-align: center; max-width: 36ch; line-height: 1.4; } @media (max-width: 560px) { .founder-demo-stage { flex-direction: column; gap: 20px; } .founder-demo-video video { width: 220px; max-width: 60vw; } .founder-demo-side { align-items: center; text-align: center; max-width: 28ch; } } /* ========================================================== Beta-Why-Now card (between Watch and Pricing) Soft urgency beat per Alisha's flow audit. Single-card block, centered, no CTA — the CTA in pricing carries the conversion. This card just names the deadline. ========================================================== */ .beta-now-section { padding: clamp(40px, 5vw, 72px) 0; } .beta-now { max-width: 640px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; } .beta-now-h { margin-top: 6px; max-width: 22ch; } .beta-now-body { max-width: 52ch; font-size: clamp(15px, 1.5vw, 17px); line-height: 1.55; margin: 0 auto; } /* ========================================================== Comparison table — Glint vs the real alternatives Three-column at desktop, stacked at mobile. The Glint column is highlighted with a subtle amber border so the eye lands there first. ========================================================== */ .compare-section { padding: clamp(56px, 7vw, 96px) 0; } .compare-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 1080px; margin: 0 auto; } .compare-col { background: color-mix(in srgb, var(--fg) 4%, transparent); border: 1px solid var(--hairline); border-radius: 16px; padding: clamp(20px, 2.4vw, 28px); display: flex; flex-direction: column; gap: 14px; } .compare-col-glint { border-color: color-mix(in srgb, var(--amber) 45%, transparent); background: color-mix(in srgb, var(--amber) 5%, transparent); position: relative; } .compare-col-glint::before { content: "Glint"; position: absolute; top: -10px; left: 18px; background: var(--amber); color: var(--charcoal-deep); font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; padding: 3px 10px; border-radius: 4px; } .compare-col-name { font-family: var(--serif); font-size: clamp(18px, 2vw, 22px); font-weight: 500; margin: 0; color: var(--fg); line-height: 1.25; } .compare-col-glint .compare-col-name { color: var(--amber); } .compare-col-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; } .compare-col-list li { font-family: var(--serif); font-size: 15px; line-height: 1.55; color: var(--fg); padding-top: 14px; border-top: 1px solid var(--hairline); } .compare-col-list li:first-child { border-top: none; padding-top: 0; } .compare-row-label { display: block; font-family: var(--sans); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-60); margin-bottom: 4px; } @media (max-width: 760px) { .compare-grid { grid-template-columns: 1fr; } } /* ========================================================== Notify-fallback — quiet email-capture between the final CTA strip and the footer. Demoted from the CTA strip per Alisha's flow audit so the page-full-stop has one CTA. ========================================================== */ .notify-fallback { padding: clamp(24px, 3vw, 40px) 0 clamp(20px, 2.4vw, 32px); border-top: 1px solid var(--hairline); } .notify-fallback .wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; } .notify-fallback-line { font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--fg-60); text-align: center; margin: 0; } .notify-fallback-line-dim { color: var(--fg-40); font-style: italic; } .notify-fallback-form { margin: 0 auto; max-width: 360px; width: 100%; }