/* * chrome.css - the canonical marketing chrome (header, footer, brand, button primitives). * Shared VERBATIM by the landing page, /learn, and /legal (docs/design/landing_page_ui_design/ * partials/site-header.html + site-footer.html). Every value derives from tokens.css semantic * tokens. No hex literals here. Edit here (or in landing.css for body-only styles), then run * scripts/check-marketing-chrome.sh to re-inject the partials into index.html. * * SELF-CONTAINED RULE: the chrome must never rely on inherited page styles. Each host page styles * its own differently (landing.css vs the /learn inlined content CSS), so anything the * chrome leaves to inheritance renders differently per page - exactly the reuse failure this file * exists to prevent. The typography root below pins font/size/weight/line-height/color for both * chrome containers; every element inside either inherits from HERE or sets its own value. */ /* ── Chrome typography root (self-containment: identical rendering on every host page) ──────── */ .site-header, .site-footer { font-family: var(--font-sans); font-size: var(--text-base); font-weight: var(--weight-regular); line-height: var(--leading-normal); color: var(--color-ink); -webkit-font-smoothing: antialiased; /* the landing body sets this; without it Mac text renders visibly heavier */ } /* ── Buttons (shared primitives used inside the header CTA) ─────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font-family: var(--font-sans); font-size: var(--text-base); font-weight: var(--weight-semibold); border-radius: var(--radius-md); padding: var(--space-4) var(--space-8); cursor: pointer; text-decoration: none; white-space: nowrap; border: 1px solid transparent; transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); } .btn-primary { background: var(--color-accent); color: var(--color-on-accent); box-shadow: var(--shadow-md); } .btn-primary:hover { background: var(--color-accent-strong); } .btn-secondary { background: var(--color-surface); color: var(--color-ink); border-color: var(--color-border-strong); } .btn-secondary:hover { background: var(--color-accent-bg); } .btn-sm { padding: var(--space-2) var(--space-5); font-size: var(--text-sm); } /* ── Header / nav ───────────────────────────────────────────────────────── */ /* Shared layout container: used by the chrome footer on every page AND by the landing body sections (chrome.css loads before landing.css, so one definition serves both). */ .container { max-width: var(--content-max); margin-inline: auto; padding-inline: var(--space-8); } .site-header { border-bottom: 1px solid var(--color-border); background: var(--color-bg); position: sticky; top: 0; z-index: 20; } /* Full-width bar (matches the app shell's .topbar: no max-width cap, edge padding only) — the brand sits at the far-left edge and the actions at the far-right, spanning the viewport. */ .site-header__inner { position: relative; /* anchor for the collapsed-nav dropdown panel */ padding-inline: var(--space-6); height: 72px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); } /* On wide screens the menu wrapper is transparent to layout (display: contents), so the nav + actions sit directly in the header flex row (brand | nav | actions), exactly as before. Below the collapse breakpoint it becomes a real dropdown panel (see the responsive section). */ .site-header__menu { display: contents; } /* Hamburger toggle — the checkbox holds state (CSS-only, no JS); the is the button. */ .site-nav__toggle { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .site-nav__burger { display: none; /* shown only when the nav collapses (responsive section) */ flex-direction: column; justify-content: center; gap: 5px; box-sizing: border-box; width: 44px; height: 44px; padding: 11px 10px; cursor: pointer; border-radius: var(--radius-sm); } .site-nav__burger span { display: block; height: 2px; width: 100%; background: var(--color-ink-strong); border-radius: 2px; transition: transform var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard); } /* Open state animates the bars into an X. */ .site-nav__toggle:checked ~ .site-nav__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .site-nav__toggle:checked ~ .site-nav__burger span:nth-child(2) { opacity: 0; } .site-nav__toggle:checked ~ .site-nav__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .site-nav__toggle:focus-visible ~ .site-nav__burger { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; } .brand { display: flex; align-items: baseline; gap: var(--space-3); text-decoration: none; } .brand__name { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--color-ink-strong); } .brand__tag { font-size: 0.6875rem; font-weight: var(--weight-bold); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-ink-subtle); } .site-nav { display: flex; align-items: center; gap: var(--space-8); } .site-nav a { font-size: var(--text-sm); color: var(--color-ink-label); text-decoration: none; transition: color var(--duration-fast) var(--ease-standard); } .site-nav a:hover { color: var(--color-accent-strong); } .site-header__actions { display: flex; align-items: center; gap: var(--space-5); } .site-header__actions .signin { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-accent-strong); text-decoration: none; } /* ── Footer ─────────────────────────────────────────────────────────────── A multi-column footer (brand block + grouped link columns) rather than one flat row of links, so it reads as populated the way an established site's footer does. The brand block sits left; the link columns share a grid that collapses to 2 columns on tablet and stays 2 on mobile (2×N, never one long list). Links come only from real pages / on-page section anchors. */ .site-footer { border-top: 1px solid var(--color-border); background: var(--color-bg-sunk); padding: var(--space-12) 0 var(--space-10); } .site-footer__inner { display: flex; align-items: center; /* brand block vertically centered against the taller link columns */ justify-content: space-between; gap: var(--space-10) var(--space-8); flex-wrap: wrap; } .site-footer__brand { display: flex; flex-direction: column; gap: var(--space-2); flex: 1 1 15rem; } .site-footer .brand__name { font-size: var(--text-lg); } .site-footer .copyright { font-size: var(--text-sm); color: var(--color-ink-subtle); } .site-footer__cols { flex: 2 1 30rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8) var(--space-6); } .site-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); } .site-footer__col a { font-size: var(--text-sm); color: var(--color-ink-muted); text-decoration: none; } .site-footer__col a:hover { color: var(--color-accent-strong); } /* ── Responsive ───────────────────────────────────────────────────────────── Below the breakpoint the inline nav + actions no longer fit on one row, so they collapse into a hamburger dropdown (the standard pattern). CSS-only (the checkbox above) so it works on the no-JS /learn pages too. The bar keeps just the brand + the hamburger; tapping it drops the full menu. */ @media (max-width: 1200px) { .site-nav__burger { display: flex; } .site-header__menu { display: none; /* hidden until the toggle is checked */ position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: var(--space-2) var(--space-6) var(--space-5); background: var(--color-bg); border-bottom: 1px solid var(--color-border); box-shadow: var(--shadow-lg); } .site-nav__toggle:checked ~ .site-header__menu { display: flex; } .site-nav { flex-direction: column; align-items: stretch; gap: 0; } .site-nav a { padding: var(--space-3) 0; font-size: var(--text-base); border-bottom: 1px solid var(--color-border); } .site-header__actions { flex-direction: column; align-items: stretch; gap: var(--space-3); padding-top: var(--space-4); } .site-header__actions .signin { padding: var(--space-1) 0; } .site-header__actions .btn { justify-content: center; padding-block: var(--space-3); } } /* Footer: below the tablet breakpoint the brand block stacks above the link columns, and the four columns fold to two (2×2) so it stays populated instead of turning into one tall list. */ @media (max-width: 860px) { .site-footer__inner { flex-direction: column; align-items: stretch; /* brand stays left-aligned once the block stacks above the columns */ gap: var(--space-8); } .site-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .container { padding-inline: var(--space-5); } .site-header__inner { padding-inline: var(--space-5); } .brand__tag { display: none; } .brand__name { font-size: var(--text-xl); } }