/* A1 Voice — the public shell. ONE source of truth for the design * tokens, the top bar, the footer and the marketing buttons across * every logged-out surface: * * static/index.html (landing) * static/dental.html (vertical lander) * app/templates/account/layout.html (sign in / password reset) * app/templates/onboarding/layout.html (self-serve wizard) * * Before this file those four each carried their own copy, and they * had drifted: dental.html defined --accent as near-black against the * landing's blue, the account pages wore the internal DaisyUI navbar, * the mobile nav collapsed at 640px on one page and 720px on another, * and the bar's height moved with its contents so a page carrying the * "Try it free" CTA stood ~16px taller than one without. * tests/test_public_shell_nav.py pins the parity. * * ── Two things here are NOT class-scoped; both are deliberate ── * * 1. `:root` repoints DaisyUI's own --color-primary / * --color-primary-content at the landing accent, so DaisyUI * buttons on the account + onboarding pages are landing-blue * rather than DaisyUI indigo. * 2. `body` sets the font family, and h1-h3 the heading letter * spacing, so type reads identically on all four surfaces; `html` * reserves the scrollbar gutter so short and long pages align. * * Both restyle any page that loads this file. That is exactly four * templates today. Before adding it to a fifth — the signed-in * dashboard especially — decide whether you want that page's primary * colour and type repointed too; if not, split those two blocks out * first. EVERYTHING ELSE here is class-scoped and inert until the * markup opts in. * * Precedence: these rules beat dashboard.css because this file is * UNLAYERED and dashboard.css puts everything in `@layer` (unlayered * wins over every layer) — not because of load order. Swapping the two * tags would change nothing. * * `.shell-page` (on ) opts a page into the full marketing * treatment — base typography scale and the landing button set. The * two STATIC pages use it; the two DaisyUI pages must not, or the * bare `.btn` rules would restyle every DaisyUI button in the wizard. */ :root { --ink: #0f172a; --ink-2: #334155; --ink-3: #64748b; --line: #e2e8f0; --bg: #ffffff; --bg-2: #f8fafc; --bg-3: #f1f5f9; --accent: #2563eb; --accent-2:#1d4ed8; --focus: #2563eb; --good: #047857; /* DaisyUI's primary, repointed at --accent (see header note 1). */ --color-primary: oklch(54.61% 0.2152 262.88); --color-primary-content: oklch(98% 0.01 262.88); } /* Reserve the scrollbar gutter on every shell page. Without it a SHORT * page (sign in) has no scrollbar and a long one (the landing page) * does, so the centred 68rem shell lands ~7px further right on the * short page and the brand mark visibly shifts as you move between * them — part of the "page alignment is a bit different" the founder * spotted. No-op where a scrollbar is already present. */ html { scrollbar-gutter: stable; /* The bar is sticky, so an in-page anchor would otherwise scroll its * target UNDER it. dental.html is the sharp case: three of its four * nav links are anchors and its bar was `static` before this change, * so without this the "How it works" heading landed fully hidden * behind the bar. Bar height + a little breathing room. */ scroll-padding-top: 5.5rem; } /* Shared type (see header note 2). Family and heading tracking only — * deliberately NOT font-size: DaisyUI/Tailwind sizes are rem-based off * the root, so setting a body size here would not scale them anyway * and would only desynchronise unstyled text. */ body { min-height: 100vh; display: flex; flex-direction: column; font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", system-ui, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body > main { flex: 1 0 auto; } h1, h2, h3 { letter-spacing: -0.02em; } .shell-container { max-width: 68rem; margin: 0 auto; padding: 0 1.25rem; } /* Skip link */ .skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--bg); padding: 0.6rem 1rem; border-radius: 0 0 8px 0; z-index: 100; } .skip:focus { left: 0; } /* ---------- Top bar ---------- */ .topbar { border-bottom: 1px solid var(--line); padding: 0.9rem 0; /* Fixed height so the bar is the SAME on every page whatever its nav * holds. A .btn-sm CTA is ~40px against a ~24px text link, so before * this the landing bar stood ~16px taller than the onboarding one and * the shell read as two different components (founder audit * 2026-08-26). min-height, not height: the bar still grows if a * translation wraps, rather than clipping the nav. * * 4.66rem is the LANDING page's natural height (74.55px measured) — * the tallest of the four, because it carries the CTA button. Every * other bar rises to meet it; none is forced to grow beyond what its * own content needed. The bar is itself a flex container so the row * centres inside that height: an earlier attempt put * `min-height: inherit` on the inner container instead, which * applied the bar's 70px to the container's own box and then added * the bar's 28.8px padding back on top — shipping a 99.8px bar * nobody asked for. */ min-height: 4.66rem; box-sizing: border-box; display: flex; align-items: center; position: sticky; top: 0; background: rgba(255,255,255,0.9); backdrop-filter: saturate(180%) blur(8px); z-index: 50; } .topbar .shell-container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex: 1; } .brand { display: inline-flex; align-items: baseline; gap: 0.35rem; font-weight: 700; font-size: 1.15rem; letter-spacing: -0.02em; text-decoration: none; color: var(--ink); } .brand .dot { width: 0.32rem; height: 0.32rem; border-radius: 50%; background: var(--accent); align-self: center; } .brand-light { font-weight: 400; letter-spacing: 0.005em; } .topbar nav { display: flex; align-items: center; gap: 1.4rem; } .topbar nav a.navlink { font-size: 0.95rem; color: var(--ink-2); text-decoration: none; } .topbar nav a.navlink:hover { color: var(--ink); text-decoration: underline; } .topbar nav .nav-collapse { display: contents; } /* ---------- Marketing buttons (opt-in via .shell-page) ---------- * Bare .btn/.btn-sm/.btn-secondary/.btn-ghost are ALSO DaisyUI class * names, so they are scoped under .shell-page — present on the two * static pages, absent on the two DaisyUI ones (whose buttons stay * DaisyUI's, already recoloured by the --color-primary override). */ .shell-page .btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.85rem 1.4rem; font: inherit; font-weight: 600; font-size: 1rem; border-radius: 10px; border: 1px solid var(--accent); background: var(--accent); color: #fff; text-decoration: none; cursor: pointer; transition: background 0.15s ease, transform 0.05s ease; } .shell-page .btn:hover { background: var(--accent-2); border-color: var(--accent-2); } .shell-page .btn:active { transform: translateY(1px); } .shell-page .btn-sm { padding: 0.6rem 1rem; font-size: 0.95rem; } .shell-page .btn-secondary { background: var(--bg); color: var(--ink); border-color: var(--ink); } .shell-page .btn-secondary:hover { background: var(--bg-2); } .shell-page .btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.55); } .shell-page .btn-ghost:hover { background: rgba(255,255,255,0.1); border-color: #fff; } /* ---------- Base link + focus treatment (static pages only) ---------- */ .shell-page { color: var(--ink); background: var(--bg); } .shell-page a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; } .shell-page a:hover { text-decoration-thickness: 2px; } .shell-page a:focus-visible, .shell-page button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; } /* ---------- Footer ---------- */ /* No explicit background: the footer inherits the page's. On the static * pages that is --bg (white) exactly as before; on the onboarding * wizard, whose body is DaisyUI's grey base-200, a hardcoded white * footer showed as a pale band under a grey page. */ /* Compact: 2.75rem/3rem left a deep well of dead space under the * copyright line. The footer is a legal/nav strip, not a section. */ footer.shell-footer { padding: 1.75rem 0 1.5rem; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 0.9rem; flex-shrink: 0; } footer.shell-footer > .shell-container > p:last-child { margin-bottom: 0; } footer.shell-footer .foot-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.9rem; } footer.shell-footer .legal-links a { margin-right: 1.1rem; color: var(--ink-2); text-decoration: underline; } footer.shell-footer .legal-links a:hover { color: var(--ink); } footer.shell-footer p { margin: 0 0 0.5rem; } footer.shell-footer .statutory strong { color: var(--ink-2); } /* ---------- Mobile ---------- * One breakpoint for the nav collapse across all four surfaces * (index.html used to collapse at 640px, the shell at 720px). */ @media (max-width: 720px) { .topbar nav .nav-collapse { display: none; } }