/* Check Back Tonight - "Golden Hour" theme. Source of truth: check-back--design/Check Back Tonight Schema/brand-pack/ (design-tokens.css, typography.md, usage.md). Layout for the root page follows exploration mockup 1s. The porch-light metaphor: a warm amber left on for you, against a deep evening sky. Amber is the brand color and is never an alarm color; the missed state is a deliberately separate, desaturated brick red that never flashes and never pulses fast. THEME MODEL: dark is the DEFAULT. The product is used after dark, so the dark palette lives on :root and needs no attribute, class, or JS to apply. An explicit user choice of light sets [data-theme="light"] on and is persisted by theme.js. prefers-color-scheme is deliberately NOT consulted: dark is the brand default, and only a deliberate choice moves off it. TYPE: two fonts only. Quicksand (display/UI, 500/600/700) and Public Sans (body, 400/500/600). Scale and minimums come from brand-pack/typography.md. Accessibility: contrast pairs are the brand pack's AA-verified values. The warm gray #8A7F6D is 18px+/UI-label only, so body-length muted copy in the light theme uses the darker #6E6252 (4.5:1+ on Cream) instead. */ /* ========================================================================== Tokens ========================================================================== */ :root { /* --- Dark palette (DEFAULT: the product's real context is after dark) --- */ --background: #1c1712; /* Charcoal - warm near-black */ --surface: #241d16; /* raised cards */ --surface-warm: #2b2218; /* warm band */ --foreground: #f5efe6; /* Warm Off-White - 15.56:1 on Charcoal */ --muted: #b8aa95; /* Warm Gray Light - 7.81:1 on Charcoal */ --primary: #d97b29; /* Porch Amber 600 - reads on dark */ --primary-dark: #f2a65a; /* Porch Amber Light - hover, links, eyebrows */ --primary-foreground: #1c1712; /* ink label on the lighter amber fill */ --brand: #f2a65a; --secondary: #1e2a44; /* Dusk Navy - dark chrome */ --accent: #f0b860; /* amber countdown - 9.94:1 */ --accent-soft: #3a2f21; --safe: #6fbf91; /* all clear / checked back - 8.08:1 */ --alert: #e2776a; /* missed - 6.00:1, never siren, never flashing */ --rose: #f0b860; --border: #3a3128; --shadow: 0 24px 80px rgb(0 0 0 / 45%); --glow-amber: 0 0 34px rgb(217 123 41 / 45%); /* --- Dusk Navy ramp --- navy-800/400/300 are promoted from the exploration mockups (OPEN-QUESTIONS Q4 recommendation): the warm gray --muted is not legible on navy chrome, so the ramp needs mid/light rungs. */ --navy-900: #1e2a44; --navy-800: #2a3a5c; /* coming-soon gradient stop (mockup 1s) */ --navy-600: #3b4e7a; --navy-400: #8fa3cc; --navy-300: #b8c2dc; /* --- Type --- */ --font-sans: "Public Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-display: "Quicksand", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Scale from brand-pack/typography.md, px at a 16px root. Minimums enforced below: never under 13px, 15px for legal/consent copy. */ --text-display-1: 3.25rem; /* 52 - hero headline */ --text-display-2: 2.5rem; /* 40 - coming-soon wordmark, big numerals */ --text-h1: 2.125rem; /* 34 - screen title */ --text-h2: 1.5rem; /* 24 - section title */ --text-title: 1.1875rem; /* 19 - card title */ --text-body: 0.9375rem; /* 15 - paragraphs */ --text-label: 0.8125rem; /* 13 - buttons, chips (absolute floor) */ --text-caption: 0.8125rem; /* 13 - fine print, floored up from the 11 in the scale to honor the "never below 13px" minimum */ --text-legal: 0.9375rem; /* 15 - legal/consent copy minimum */ /* --- Radius: warm and rounded, 14-22px. Brand pack wins over the exploration doc's 16-24 (OPEN-QUESTIONS Q5). --- */ --radius-sm: 8px; --radius: 14px; /* md - default */ --radius-lg: 20px; --radius-card: 22px; --radius-pill: 999px; --radius-icon: 22.5%; /* app-icon corner */ color-scheme: dark; } /* --- Light palette: applied only on an explicit, persisted user choice. --- */ [data-theme="light"] { --background: #fbf6ef; /* Cream - warm off-white, not clinical white */ --surface: #ffffff; /* White - cards, elevated surfaces */ --surface-warm: #f7ecdc; /* warm amber-cream band */ --foreground: #2b241c; /* Ink - 14.24:1 on Cream */ --muted: #6e6252; /* darker Warm Gray so body copy clears AA on Cream */ --primary: #a8541a; /* Porch Amber Deep - AA-safe fill with white (5.32:1) */ --primary-dark: #8a4415; /* deeper amber for hover, links, eyebrows */ --primary-foreground: #ffffff; --brand: #d97b29; --secondary: #1e2a44; --accent: #f2a65a; --accent-soft: #f7ddc1; --safe: #3d7d57; --alert: #c2483c; --rose: #f2a65a; --border: #e7dccb; --shadow: 0 24px 80px rgb(65 49 31 / 12%); /* usage.md: the glow halo is dark-theme only. Keep it subtle in light. */ --glow-amber: 0 0 24px rgb(217 123 41 / 20%); color-scheme: light; } /* ========================================================================== Motion - the porch light "breathes". Never fast, never flashing. usage.md: no animation faster than 4s in any alert or missed state. ========================================================================== */ @keyframes cbt-breathe { 0%, 100% { box-shadow: 0 0 60px 8px rgb(217 123 41 / 35%); } 50% { box-shadow: 0 0 90px 20px rgb(217 123 41 / 55%), 0 0 0 6px rgb(240 184 96 / 12%); } } @keyframes cbt-glow-pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 0.95; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } } /* ========================================================================== Base ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--background); color: var(--foreground); font-family: var(--font-sans); font-size: var(--text-body); font-weight: 400; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* Nothing on this site is wider than the viewport by design. This is the backstop that keeps a stray full-bleed child from scrolling the page sideways at 375px. */ overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: var(--primary-dark); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; } h1, h2, h3 { font-family: var(--font-display); color: var(--foreground); line-height: 1.15; margin: 0; } h1 { font-size: var(--text-h1); font-weight: 700; max-width: 20ch; } h2 { font-size: var(--text-h2); font-weight: 600; } h3 { font-size: var(--text-title); font-weight: 700; } p { margin: 0; } .skip-link { position: absolute; left: 1rem; top: 1rem; z-index: 20; transform: translateY(-200%); background: var(--foreground); color: var(--background); border-radius: var(--radius-sm); padding: 0.5rem 0.75rem; font-family: var(--font-display); font-weight: 600; text-decoration: none; } .skip-link:focus { transform: translateY(0); } .hp, .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ========================================================================== Shell ========================================================================== */ .site-header, main, .site-footer, .wrap { width: min(1120px, calc(100% - 32px)); margin-inline: auto; } /* The home page hero is full-bleed, so its
drops the width clamp and each inner block re-applies it with .wrap. This avoids the 100vw negative-margin trick, which overflows by the scrollbar width. */ main.main--home { width: 100%; max-width: none; padding: 0; } .site-header { min-height: 88px; display: flex; align-items: center; gap: 1.25rem; padding-block: 1rem; } .brand { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--foreground); text-decoration: none; flex: none; } /* usage.md in-UI header lockup: app icon at 26-30px next to the wordmark set live in Quicksand 700. There is no wordmark image and no SVG; the mark is always the icon raster plus typeset text. */ .brand__mark { width: 30px; height: 30px; flex: none; display: block; border-radius: var(--radius-icon); /* usage.md: no drop shadow in light contexts; the glow is dark-theme only. */ box-shadow: var(--glow-amber); } .brand__name { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; } .brand--footer .brand__mark { width: 26px; height: 26px; } .brand--footer .brand__name { font-size: 1.0625rem; } .site-nav { display: flex; align-items: center; gap: 1rem; margin-left: auto; font-family: var(--font-display); font-size: var(--text-label); font-weight: 600; } .site-nav a, .site-footer a, .text-link, .backlink { color: var(--foreground); text-decoration: none; } .site-nav a:hover, .site-footer a:hover, .text-link:hover, .backlink:hover { color: var(--primary-dark); text-decoration: underline; text-underline-offset: 5px; } /* --- Theme toggle --- */ .theme-toggle { flex: none; display: inline-flex; align-items: center; gap: 0.4rem; min-height: 40px; padding: 0 0.9rem; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface); color: var(--foreground); font-family: var(--font-display); font-size: var(--text-label); font-weight: 600; cursor: pointer; } .theme-toggle:hover { border-color: var(--primary); } .theme-toggle__icon { width: 1rem; height: 1rem; flex: none; } /* Chrome on the hero field reads against --hero-*, not the page tokens, so the lockup, the nav, and the theme toggle stay legible in BOTH themes. */ .site-header--onhero .brand__name, .site-header--onhero .theme-toggle { color: var(--hero-ink); } .site-header--onhero .site-nav a { color: var(--hero-muted); } .site-header--onhero .site-nav a:hover { color: var(--hero-ink); } .site-header--onhero .theme-toggle { background: var(--hero-chip-bg); border-color: var(--hero-chip-border); } .site-header--onhero .theme-toggle:hover { border-color: var(--accent); } /* ========================================================================== Buttons - pill CTAs ========================================================================== */ /* Pill CTAs sit at the body rung, not the 13px label rung: 13px Quicksand floats inside a 48px pill. The 1s mockup set its pill at 14px; 15px is the nearest rung on the scale and keeps every control above the 13px floor. */ .button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 1.4rem; border-radius: var(--radius-pill); background: var(--primary); color: var(--primary-foreground); font-family: var(--font-display); font-size: var(--text-body); font-weight: 700; text-decoration: none; border: 0; cursor: pointer; } .button:hover { background: var(--primary-dark); } .button--small { min-height: 40px; padding-inline: 1.1rem; } /* ========================================================================== Home hero - exploration mockup 1s "one glow, one promise, one field" ========================================================================== */ /* The hero is the one region that cannot inherit the page tokens directly: it is its own field (evening sky at night, warm dawn in light), and the chrome sitting on it has to stay legible against that field rather than against --background. So it declares a hero-local token set, and the light theme overrides those tokens instead of re-specifying every rule. Everything from here to the end of the waitlist block consumes --hero-*, never a raw hex. */ .hero-1s { /* Dark (default): full-bleed evening sky. The radial is centred at 50% 115%, i.e. BELOW the hero, so its brightest navy runs along the bottom edge. On its own that edge cuts hard to the flat charcoal page: a visible seam exactly where every visitor first scrolls. --hero-fade is the page colour under the hero, and .hero-1s lays a fade of it over the last stretch of the hero so the bottom edge arrives at the page colour instead of mid-gradient. The sky is the page; there is no stage set. Top and sides already melt because the radial's outer stop IS the page. */ --hero-fade: 28 23 18; /* #1C1712 charcoal, the dark page background */ --hero-bg: radial-gradient( ellipse at 50% 115%, var(--navy-800) 0%, var(--navy-900) 35%, #1c1712 75% ); --hero-ink: #f5efe6; --hero-muted: var(--navy-300); --hero-faint: var(--navy-400); --hero-field-bg: rgb(245 239 230 / 8%); --hero-field-border: rgb(184 170 149 / 35%); --hero-placeholder: #a2988a; --hero-chip-bg: rgb(245 239 230 / 8%); --hero-chip-border: rgb(184 194 220 / 35%); --hero-link: var(--accent); --hero-error: #e2776a; /* usage.md: the glow halo is dark-theme only, and no drop shadow in light. */ --hero-glow-display: block; --hero-icon-shadow: 0 12px 34px rgb(0 0 0 / 50%); /* Layer 1 (on top): resolve the bottom edge into the page colour. Layer 2: the sky itself. Both themes get the fade for free, because --hero-fade and --hero-bg are the only things that differ between them. */ background: linear-gradient( to bottom, rgb(var(--hero-fade) / 0%) calc(100% - 180px), rgb(var(--hero-fade) / 100%) 100% ), var(--hero-bg); color: var(--hero-ink); display: flex; flex-direction: column; min-height: 100svh; padding-bottom: 3.5rem; } /* Light: an explicit user choice of light must actually reach the hero, not stop at the fold. usage.md allows cream behind the amber-on-navy icon, and requires the glow and the drop shadow to be dark-theme only, so the light hero is a warm dawn field with the icon sitting flat on it. */ [data-theme="light"] .hero-1s { /* The dawn wash is the ONLY storytelling light has: usage.md forbids the glow halo and the drop shadow outside dark, so the gradient has to carry "porch light" by itself. A cream-on-cream wash cannot. This is a real amber bloom rising from behind the icon. It is a background field, not a glow halo on the mark and not a shadow, so it stays inside the usage.md rule. Strength is capped by contrast: --muted body copy sits on this and must clear AA. */ --hero-fade: 251 246 239; /* #FBF6EF cream, the light page background */ --hero-bg: radial-gradient( ellipse 58% 30% at 50% 17%, rgb(242 166 90 / 42%) 0%, rgb(242 166 90 / 15%) 48%, rgb(251 246 239 / 0%) 78% ), linear-gradient(to bottom, var(--surface-warm) 0%, var(--background) 62%); --hero-ink: var(--foreground); --hero-muted: var(--muted); --hero-faint: var(--muted); --hero-field-bg: var(--surface); --hero-field-border: var(--border); --hero-placeholder: var(--muted); --hero-chip-bg: var(--surface); --hero-chip-border: var(--border); --hero-link: var(--primary-dark); --hero-error: var(--alert); --hero-glow-display: none; --hero-icon-shadow: none; } .hero-1s__inner { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; width: min(1120px, calc(100% - 32px)); margin-inline: auto; padding-block: 2.5rem; } /* --- The glow-pulsing app icon --- */ .hero-1s__mark { position: relative; width: 112px; height: 112px; margin-bottom: 30px; /* usage.md: minimum clear space around the icon is 25% of its width. The glow halo extends 30px past the 112px icon and the flex gaps below keep at least 28px, so the 28px minimum holds on every side. */ flex: none; } .hero-1s__glow { position: absolute; inset: -30px; border-radius: 50%; background: radial-gradient( circle, rgb(240 184 96 / 40%), rgb(240 184 96 / 0%) 70% ); /* usage.md: idle glow halo, 4-4.5s. Never faster, never a flash. It is a dark-theme motif only, so the light theme hides it outright. */ animation: cbt-glow-pulse 4.5s ease-in-out infinite; pointer-events: none; display: var(--hero-glow-display); } .hero-1s__icon { position: relative; width: 112px; height: 112px; /* 22.5% of 112px = 25.2px, matching the app-icon corner rule. */ border-radius: var(--radius-icon); box-shadow: var(--hero-icon-shadow); } /* --- Wordmark: always live text, never an image (there is no wordmark asset, and the name is still a working name). --- */ .hero-1s__wordmark { font-family: var(--font-display); font-size: var(--text-display-2); font-weight: 700; line-height: 1.1; color: var(--hero-ink); letter-spacing: -0.01em; max-width: none; /* the h1 clamp does not apply to a centered wordmark */ } /* One promise, plus the launch date. typography.md sets a 24px minimum on a marketing hero, so this sits at the h2 rung rather than the 16px used in the 1s mockup. See OPEN-QUESTIONS Q9. */ .hero-1s__promise { margin-top: 0.85rem; max-width: 34ch; color: var(--hero-muted); font-size: var(--text-h2); line-height: 1.45; } /* The launch date is a fact, not the promise. It gets its own quieter line so the emotional line can breathe instead of sharing 24px with a date. */ .hero-1s__launch { margin-top: 0.6rem; color: var(--hero-faint); font-family: var(--font-display); font-size: var(--text-label); font-weight: 600; letter-spacing: 0.02em; } .hero-1s__caption { margin-top: 1rem; color: var(--hero-faint); font-size: var(--text-caption); } .hero-1s__more { margin-top: 2.5rem; color: var(--hero-faint); font-family: var(--font-display); font-size: var(--text-label); font-weight: 600; text-decoration: none; } .hero-1s__more:hover { color: var(--hero-link); } /* ========================================================================== Waitlist form (in the hero) - mockup 1s field + pill CTA row The SMS consent block and its disclosure are 10DLC carrier-review surface. They stay visible, unchecked by default, and are never collapsed away. ========================================================================== */ .waitlist { margin-top: 28px; width: min(520px, 100%); text-align: left; } .waitlist__form { display: grid; gap: 0.75rem; } .waitlist .form-field { display: grid; gap: 0.3rem; } .waitlist label, .form-field label { color: var(--foreground); font-family: var(--font-display); font-size: var(--text-label); font-weight: 600; } /* Consent copy sits at the 15px floor, both lines. The warm line leads on weight and colour, not on size, so the floor is never undercut. */ .sms-consent label > span:first-child { color: var(--foreground); font-family: var(--font-display); font-size: var(--text-legal); font-weight: 700; } .hero-1s .waitlist label, .hero-1s .sms-consent label > span:first-child { color: var(--hero-muted); } .form-field label span { color: var(--muted); font-weight: 500; } .hero-1s .form-field label span { color: var(--hero-faint); } input[type="email"], input[type="tel"], input[type="text"]:not([tabindex="-1"]), textarea { width: 100%; min-height: 48px; padding: 0 0.95rem; font-family: var(--font-sans); font-size: var(--text-body); color: var(--foreground); background: var(--background); border: 1px solid var(--border); border-radius: var(--radius-pill); } /* On the dark hero the inputs are translucent glass, per mockup 1s; in light they become ordinary surfaces on the warm field. */ .hero-1s input[type="email"], .hero-1s input[type="tel"] { background: var(--hero-field-bg); border-color: var(--hero-field-border); color: var(--hero-ink); } .hero-1s input::placeholder { color: var(--hero-placeholder); opacity: 1; } /* Last child of the form, after the SMS consent block. Full width so the calm single column reads as one thing and the tap target is unambiguous. */ .waitlist__submit { width: 100%; margin-top: 0.25rem; min-height: 48px; padding: 0 1.4rem; border: 0; border-radius: var(--radius-pill); background: var(--primary); color: var(--primary-foreground); font-family: var(--font-display); font-size: var(--text-body); font-weight: 700; cursor: pointer; white-space: nowrap; } .waitlist__submit:hover:not(:disabled) { background: var(--accent); } .waitlist__submit:disabled { opacity: 0.65; cursor: default; } .sms-consent { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.75rem; padding: 0.85rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); } .hero-1s .sms-consent { background: var(--hero-field-bg); border-color: var(--hero-field-border); } .sms-consent input { width: 1.05rem; height: 1.05rem; min-height: 0; margin-top: 0.3rem; accent-color: var(--primary); } .sms-consent label { display: grid; gap: 0.35rem; } .sms-consent label > span:last-child { color: var(--muted); font-size: var(--text-legal); line-height: 1.55; } /* Legal/consent copy floor is 15px. Never shrink this below --text-legal. */ .sms-disclosure { color: var(--muted); font-size: var(--text-legal); line-height: 1.55; margin: 0; } .hero-1s .sms-disclosure, .hero-1s .sms-disclosure-panel { color: var(--hero-muted); } .sms-disclosure a { color: var(--primary-dark); } .hero-1s .sms-disclosure a { color: var(--hero-link); } .sms-disclosure-panel { margin-top: 0.5rem; } .status { font-size: var(--text-legal); min-height: 1px; } .hero-1s .status { color: var(--hero-muted); } .status[data-state="error"] { color: var(--alert); } .hero-1s .status[data-state="error"] { color: var(--hero-error); } .newsletter__success { display: flex; gap: 0.9rem; align-items: flex-start; text-align: left; } .newsletter__success svg { width: 1.7rem; height: 1.7rem; color: var(--accent); flex: none; } .newsletter__success p { margin-top: 0.5rem; color: var(--muted); } .hero-1s .newsletter__success p { color: var(--hero-muted); } .hero-1s .newsletter__success h2 { color: var(--hero-ink); } /* Standalone waitlist / consent forms outside the hero (sms-opt-in, opt-out). */ .newsletter { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 1.5rem; display: grid; gap: 1rem; align-items: start; } .newsletter--standalone { margin-top: 1rem; } .newsletter h2 { font-size: var(--text-h2); } .newsletter p { color: var(--muted); margin-top: 0.6rem; } .newsletter form { display: grid; gap: 0.85rem; } .newsletter button[type="submit"] { justify-self: start; min-height: 48px; padding: 0 1.4rem; font-family: var(--font-display); font-size: var(--text-body); font-weight: 700; color: var(--primary-foreground); background: var(--primary); border: none; border-radius: var(--radius-pill); cursor: pointer; } .newsletter button[type="submit"]:disabled { opacity: 0.65; cursor: default; } .fineprint { color: var(--muted); font-size: var(--text-legal); } /* ========================================================================== Content sections ========================================================================== */ main { padding-block: 2rem 4rem; } .section { padding-block: 4rem; } .section-heading { max-width: 62ch; margin-bottom: 2rem; } .eyebrow { margin: 0 0 0.75rem; color: var(--primary-dark); font-family: var(--font-display); font-weight: 700; font-size: var(--text-label); text-transform: uppercase; letter-spacing: 0.04em; } .section-heading h2 + p, .hero--simple p { margin-top: 0.85rem; color: var(--muted); font-size: var(--text-body); } .hero--simple { display: block; max-width: 62ch; padding-block: 3rem 1rem; } .hero--simple h1 { font-size: var(--text-h1); } .three-grid, .two-grid { display: grid; gap: 1rem; } .three-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .two-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 1.35rem; } .card p { margin-top: 0.6rem; color: var(--muted); } .step { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; margin-bottom: 1rem; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--foreground); font-family: var(--font-display); font-weight: 700; } .feature-band, .cta-band { border-radius: var(--radius-card); padding: 2.25rem; } .feature-band { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); gap: 2rem; align-items: start; background: var(--surface-warm); } .feature-band p:last-child, .cta-band p { color: var(--muted); font-size: var(--text-body); } .founder-note { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: start; padding: 1.5rem; margin-block: 3rem; } .founder-note p:first-child { font-family: var(--font-display); font-size: var(--text-title); font-weight: 500; line-height: 1.45; } .founder-note__photo { width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--accent-soft); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; } .signature { margin-top: 0.8rem; color: var(--muted); font-family: var(--font-display); font-weight: 700; } .cta-band { margin-block: 3.5rem; background: var(--secondary); color: #f5efe6; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; } .cta-band h2 { color: #f5efe6; } .cta-band .eyebrow { color: var(--accent); } .cta-band p { color: var(--navy-300); } .cta-band .button { flex: none; background: var(--accent); color: #2b241c; } .trust-strip { list-style: none; padding: 0; margin: 1.2rem 0 0; display: flex; flex-wrap: wrap; gap: 0.7rem; color: var(--muted); font-size: var(--text-label); font-family: var(--font-display); font-weight: 600; } .trust-strip li { border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface); padding: 0.4rem 0.85rem; } .hero-1s .trust-strip li { background: var(--hero-chip-bg); border-color: var(--hero-chip-border); color: var(--hero-muted); } .page-stack { max-width: 76ch; padding-block: 1rem 4rem; } .content-section { padding-block: 1.75rem; border-top: 1px solid var(--border); } .content-section h2 { font-size: var(--text-h2); } .content-section h3 { margin-top: 1.5rem; } .content-section p, .content-section li { color: var(--muted); font-size: var(--text-body); } .content-section p { margin-top: 1rem; } .content-section ul { margin: 1rem 0 0; padding-left: 1.2rem; } .content-section li { margin-top: 0.4rem; } /* ========================================================================== Legal pages (privacy, terms, data-deletion) These use their own shell (.page/.container/.topbar/.legal). They had no styles at all before this pass, so they rendered as raw browser defaults. Legal copy sits at the 15px floor, never smaller. ========================================================================== */ .page { min-height: 100svh; display: flex; flex-direction: column; } .container { width: min(76ch, calc(100% - 32px)); margin-inline: auto; flex: 1; display: flex; flex-direction: column; } .topbar { min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; padding-block: 1rem; /* The lockup, the back link, and the theme toggle do not fit on one line at 375px. Wrapping keeps the legal pages from scrolling sideways. */ flex-wrap: wrap; } .topbar .theme-toggle { margin-left: auto; } .legal h1, .container > main > h1 { font-size: var(--text-h1); margin-bottom: 0.5rem; } .effective { color: var(--muted); font-family: var(--font-display); font-size: var(--text-label); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; } .lead { margin-top: 1.25rem; color: var(--foreground); font-size: var(--text-title); line-height: 1.55; } .legal { padding-block: 1.5rem 3rem; } .legal h2 { margin-top: 2.25rem; padding-top: 1.5rem; border-top: 1px solid var(--border); font-size: var(--text-h2); } .legal h3 { margin-top: 1.5rem; } .legal p, .legal li { margin-top: 0.85rem; color: var(--muted); font-size: var(--text-legal); line-height: 1.65; } .legal ul, .legal ol { margin: 0.85rem 0 0; padding-left: 1.2rem; } .legal a { color: var(--primary-dark); } .entity { margin-top: 1rem; padding: 1rem 1.25rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); font-size: var(--text-legal); line-height: 1.65; } .legal-footer { border-top: 1px solid var(--border); padding-block: 1.5rem 2rem; color: var(--muted); font-size: var(--text-legal); } .legal-footer nav { display: flex; flex-wrap: wrap; gap: 0.7rem 1rem; margin-bottom: 0.75rem; } .backlink { font-family: var(--font-display); font-size: var(--text-label); font-weight: 600; } /* ========================================================================== Footer ========================================================================== */ .site-footer { border-top: 1px solid var(--border); padding-block: 2rem; display: flex; justify-content: space-between; gap: 2rem; color: var(--muted); font-size: var(--text-label); } .site-footer nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.7rem 1rem; font-family: var(--font-display); font-weight: 600; } /* Not-an-emergency-service disclaimer. Required in the footer of every page so no visitor mistakes Check Back Tonight for a 911/emergency dispatch service. This is legal/disclosure copy: it stays at the 15px floor. */ .footer-disclaimer { width: min(1120px, calc(100% - 32px)); margin: 0 auto; padding-bottom: 2rem; color: var(--muted); font-size: var(--text-legal); line-height: 1.55; } /* ========================================================================== Responsive. The mockups specify no breakpoints (OPEN-QUESTIONS Q3), so these follow the Q3 proposed default: multi-column blocks stack to a single column below 900px, and the 1120px shell becomes a max-width with fluid padding under it. ========================================================================== */ @media (max-width: 880px) { .site-header { flex-wrap: wrap; } /* Two tidy rows: [lockup .... pill] over [nav .... toggle]. The toggle is paired with the nav rather than left on a row of its own, where it reads like a mistake. A percentage flex-basis (not width:100%) is what makes this work: the nav is too wide to sit beside the lockup so it wraps, but it does not claim the whole row, which leaves the toggle room to ride along beside it and keep its text label. */ .site-nav { order: 3; flex: 1 1 60%; min-width: 0; margin-left: 0; overflow-x: auto; padding-bottom: 0.25rem; } [data-theme-toggle-slot] { order: 4; flex: none; margin-left: auto; } .feature-band, .three-grid, .two-grid { grid-template-columns: 1fr; } .cta-band, .site-footer { align-items: flex-start; flex-direction: column; } .site-footer nav { justify-content: flex-start; } } @media (max-width: 560px) { .site-header, main, .site-footer, .wrap, .footer-disclaimer { width: min(100% - 24px, 1120px); } .container { width: min(100% - 24px, 76ch); } .site-header { gap: 0.5rem 0.6rem; } .site-nav { gap: 0.85rem; } /* Reclaim the width the toggle needs to stay on row one. */ .brand__name { font-size: 1.0625rem; } .theme-toggle { padding-inline: 0.7rem; } .button { width: 100%; } .site-header .button { width: auto; } .feature-band, .cta-band { padding: 1.5rem; } .hero-1s__wordmark { font-size: 2rem; } .hero-1s__promise { font-size: 1.25rem; } .founder-note { grid-template-columns: 1fr; } } /* ========================================================================== Redirect stubs (/optin, /register, /signup) Meta-refresh hops. Visible only for a beat, but they are real pages if the refresh is blocked, so they carry the lockup and a working CTA. ========================================================================== */ .redirect-stub { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; padding-block: 4rem; } .redirect-stub__note { color: var(--muted); font-size: var(--text-body); } /* ========================================================================== The founder letter (about.html) It stays prose - it is a letter, and cards would fight that - but it needs a human mark on it so it does not read like documentation. ========================================================================== */ .letter { position: relative; border-top: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 2.5rem 1.75rem 1.75rem; margin-top: 2.5rem; } .letter__from { position: absolute; top: -1.75rem; left: 1.75rem; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--accent-soft); color: var(--foreground); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; border: 1px solid var(--border); } /* The opening line of a letter carries more weight than the rest. */ .letter p:first-of-type { color: var(--foreground); font-size: var(--text-title); line-height: 1.5; }