/* ═══════════════════════════════════════════════════════════════════════════ COSIGNA — Governed header chromes v0.503.0 S-F1 UX/libs/topbar.css Exactly THREE chromes, defined ONCE here, applied to every surface via data-header="app|document|content". Nothing outside this file may define a bespoke header background or layout. CLASS MAP ───────── .cg-topbar--app [data-header="app"] — authenticated/app surfaces .cg-topbar--document [data-header="document"] — receipts/recaps/certs .cg-topbar--content [data-header="content"] — server-rendered content LOADING: in each surface , AFTER fonts.css + tokens.css, BEFORE the surface-specific CSS. ═══════════════════════════════════════════════════════════════════════════ */ /* ── Shared topbar shell ──────────────────────────────────────────────────── Both APP and DOCUMENT/CONTENT chromes inherit these base rules; surface CSS may fine-tune layout but must NOT override background, color, or height without a documented reason (a comment naming the deviation). */ /* W2-A A1: bare/un-scoped defensive baseline — wins over nothing (specificity 0,1,0); ensures the lockup collapses gracefully if it lands outside a governed chrome. Chrome-scoped overrides below take precedence via higher specificity. */ .brand-lockup { height: 32px; width: auto; } /* W2-A A1: version display is NEVER permitted in the governed header (CLAUDE.md mandate). Any .topbar__v that survived inside a [data-header] element is silenced here. */ [data-header] .topbar__v { display: none; } [data-header] { box-sizing: border-box; width: 100%; position: sticky; top: 0; z-index: 10; display: flex; align-items: center; } /* ══════════════════════════════════════════════════════════════════════════ CHROME 1 — APP (authenticated surfaces) logo LEFT · large centered title block · language flag + actions RIGHT ══════════════════════════════════════════════════════════════════════════ */ .cg-topbar--app { /* v0.121.x iOS-Safari fix: one-hop var + literal fallback; see CLAUDE.md */ /* v0.532.0 D-5b WP1: liquid-glass chrome material — a real 3-stop navy gradient (was a flat fill) + a sheen pass + backdrop-blur + an inset specular rim. SAME in both registers on purpose — the chrome is theme-independent brand chrome, never skin-themed (mockup :118-132, MOCKUP_ux_revamp_extended_2026-07-19). Centralised here — no per-surface CSS may re-paste this background. */ background: var(--material-chrome-bg, linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.05) 38%, rgba(255,255,255,0) 62%), linear-gradient(135deg,#223a5e 0%,#16294a 46%,#0d1a2c 100%)); color: var(--material-chrome-fg, #FAF8F3); border-bottom: 2px solid var(--brand-gold, #C3A14B); backdrop-filter: var(--material-chrome-blur, blur(18px) saturate(1.5)); -webkit-backdrop-filter: var(--material-chrome-blur, blur(18px) saturate(1.5)); box-shadow: var(--material-chrome-rim, inset 0 1px 0 rgba(255,255,255,.34), inset 0 -1px 0 rgba(0,0,0,.42)); padding: var(--s3, 12px) var(--s6, 24px); /* v0.523.5 S-acceptance F11: on iOS the sticky app topbar sat UNDER the notch/status bar. Extend the top padding into the safe-area inset. env(safe-area-inset-top) is 0 on desktop, so guard-45 (the STATIC desktop visual baseline) stays zero-diff — this only grows the pad where the notch exists. */ padding-top: max(var(--s3, 12px), env(safe-area-inset-top)); /* Three-column: logo | title | actions */ display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s4, 16px); min-height: 56px; } /* Brand logo slot (left column) */ .cg-topbar--app .cg-topbar__brand { display: flex; align-items: center; gap: var(--s2, 8px); text-decoration: none; color: var(--on-ink, #FAF8F3); flex-shrink: 0; justify-self: start; /* v0.503.0 S-F1.1: pin LEFT regardless of minor per-page drift */ } /* Shared brand-lockup sizing inside APP topbar */ .cg-topbar--app .brand-lockup { height: 32px; width: auto; display: block; color: var(--on-ink, #FAF8F3); flex-shrink: 0; } @media (min-width: 1024px) { .cg-topbar--app .brand-lockup { height: 44px; } } /* Title block — LARGE, PROMINENT, CENTERED, may wrap 2–3 lines. This replaces the old "status pill" (small, opaque bg, 13px). The text content is the per-screen i18n key, set via data-i18n or JS. v0.503.0 S-F1.1: justify-self:center ensures centering in grid column 2. */ .cg-topbar__title { font-size: clamp(20px, 3.5vw, 30px); font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; color: var(--on-ink, #FAF8F3); text-align: center; padding: var(--s1, 4px) 0; /* Allow 2–3 line wrapping; prevent overflow clipping */ word-break: break-word; hyphens: auto; } /* W2-A A1: defensive bare-title centering — a .cg-topbar__title placed directly in the APP chrome grid (without the .cg-topbar__title-block wrapper) still centres on the axis-4 canonical grid column 2 (founder: "all headers centred"). */ .cg-topbar--app .cg-topbar__title { grid-column: 2; justify-self: center; text-align: center; } /* Sub-label below the title (optional — used by verifier) */ /* v0.532.0 D-5b: explicit TONE, not opacity — .72 alpha on the new deeper chrome gradient measured 3.59:1 (fails AA). #e8eef7 is the measured-safe replacement (mockup :129, "explicit tone, not opacity"). */ .cg-topbar__sub { font-size: 13px; font-weight: 400; color: var(--material-chrome-sub-fg, #e8eef7); text-align: center; margin-top: 2px; } /* Title + sub stacked vertically in the center column */ .cg-topbar__title-block { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; justify-self: center; /* v0.503.0 S-F1.1: explicit grid-cell centering */ } /* Actions slot (right column) — language flag + any surface-specific buttons */ .cg-topbar--app .cg-topbar__actions { display: flex; align-items: center; gap: var(--s2, 8px); flex-shrink: 0; justify-content: flex-end; justify-self: end; /* v0.503.0 S-F1.1: pin RIGHT regardless of minor per-page drift */ } /* On mobile collapse the title to 2 lines max, keep legible */ @media (max-width: 640px) { .cg-topbar--app { padding: var(--s2, 8px) var(--s4, 16px); grid-template-columns: auto 1fr auto; gap: var(--s2, 8px); } .cg-topbar__title { font-size: clamp(15px, 4.5vw, 20px); } .cg-topbar--app .brand-lockup { height: 26px; } } /* Dark-mode: APP topbar stays navy in both schemes (brand chrome, not skin-themed). v0.532.0 D-5b: background is now the chrome MATERIAL (gradient), and per the mockup that material is IDENTICAL in both registers — so it is NOT re-declared here; leaving it out lets the base .cg-topbar--app rule (above) show through unchanged. Only the gold border-bottom brightens for dark-mode contrast, as before. */ @media (prefers-color-scheme: dark) { .cg-topbar--app { border-bottom-color: var(--brand-gold, #d8b864); } } [data-theme="dark"] .cg-topbar--app { border-bottom-color: var(--brand-gold, #d8b864); } /* ── Language flag inside APP topbar (dark pill variant) ────────────────── */ .cg-topbar--app .lang-flag { position: relative; } .cg-topbar--app .lang-flag__btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; cursor: pointer; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.22); border-radius: 999px; padding: 10px 14px; min-width: 44px; min-height: 44px; font-size: 15px; line-height: 1; color: var(--on-ink, #FAF8F3); } .cg-topbar--app .lang-flag__caret { font-size: 9px; opacity: .9; } /* v0.532.0 D-5b WP5: .6→.9 — near-white caret on the WP1 sheen-lightened chrome was 2.57:1 (icon 3:1 bar); .9 ≈ 3.8 */ .cg-topbar--app .lang-flag__menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; background: var(--field, #fff); border: 1px solid var(--border-default, #e3ddd0); border-radius: 12px; padding: 6px; box-shadow: 0 10px 30px rgba(20,37,61,.14); min-width: 150px; } .cg-topbar--app .lang-flag__menu[hidden] { display: none; } .cg-topbar--app .lang-flag__menu button { display: block; width: 100%; text-align: left; padding: 8px 12px; border: 0; background: none; border-radius: 8px; font: inherit; font-size: 14px; color: var(--brand-ink, #14253D); cursor: pointer; } .cg-topbar--app .lang-flag__menu button:hover { background: var(--surface-ivory, #F3EFE6); } /* ══════════════════════════════════════════════════════════════════════════ CHROME 2 — DOCUMENT (receipts / recaps / certificates — public, printable) Clean masthead · single logo · NO app chrome · NO nav Fixes: C14 recap double-logo removed (only one .brand-lockup permitted here) ══════════════════════════════════════════════════════════════════════════ */ .cg-topbar--document { background: transparent; border-bottom: 1px solid var(--border-default, #E3DCCC); padding: 16px 20px; display: flex; align-items: center; gap: 12px; max-width: 620px; margin: 0 auto; position: static; /* documents are not sticky — they scroll with the page */ } /* Only the lockup is allowed — no nav, no actions, no language flag by default */ .cg-topbar--document .brand-lockup { height: 32px; width: auto; display: block; color: var(--brand-ink, #14253D); flex-shrink: 0; } @media (min-width: 1024px) { /* W2-A A1: 48px → 44px (canonical height, founder ruling — all chromes unify to 44px) */ .cg-topbar--document .brand-lockup { height: 44px; } } /* Optional language flag for documents that support i18n */ .cg-topbar--document .lang-flag { position: relative; margin-left: auto; } .cg-topbar--document .lang-flag__btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; cursor: pointer; background: rgba(20,37,61,.05); border: 1px solid #e3ddd0; border-radius: 999px; /* W2-A A1: unified touch target — document chrome now matches app chrome (44×44px min) */ padding: 10px 14px; min-width: 44px; min-height: 44px; font-size: 15px; line-height: 1; color: inherit; } .cg-topbar--document .lang-flag__caret { font-size: 9px; opacity: .6; } .cg-topbar--document .lang-flag__menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; background: #fff; border: 1px solid var(--border-default, #e3ddd0); border-radius: 12px; padding: 6px; box-shadow: 0 10px 30px rgba(20,37,61,.14); min-width: 150px; } .cg-topbar--document .lang-flag__menu[hidden] { display: none; } .cg-topbar--document .lang-flag__menu button { display: block; width: 100%; text-align: left; padding: 8px 12px; border: 0; background: none; border-radius: 8px; font: inherit; font-size: 14px; color: var(--brand-ink, #14253D); cursor: pointer; } .cg-topbar--document .lang-flag__menu button:hover { background: var(--surface-ivory, #F3EFE6); } @media (prefers-color-scheme: dark) { .cg-topbar--document { border-bottom-color: var(--border-default, #27405e); } .cg-topbar--document .brand-lockup { color: var(--on-ink, #FAF8F3); } } [data-theme="dark"] .cg-topbar--document { border-bottom-color: var(--border-default, #27405e); } [data-theme="dark"] .cg-topbar--document .brand-lockup { color: var(--on-ink, #FAF8F3); } /* ── DOCUMENT chrome: navy/gold brand frame (design call #19, v0.503.0 S-F1) ───────────── Founder-approved: a subtle 2-3px navy inset frame around the visible screen area signals "official certified document" without clipping content or touching layout. Selector: body:has([data-header="document"]) — applies ONLY to document-chrome pages (recap / certificates). The bottom edge carries a 3px gold accent reinforcing the motto-bar. @media print: frame is suppressed for a clean paper output. */ body:has([data-header="document"]) { /* v0.503 W2 (founder ruling 2026-06-25 — CARD-FRAME ONLY): the certificate frame now lives ON THE CARD (recap #state-ok: navy 2px + gold 4px). The old body-level window-edge inset frame was REMOVED — the founder found it invisible (the card floats) and ruled for the card frame. */ min-height: 100vh; } @media print { body:has([data-header="document"]) { box-shadow: none; } } /* ══════════════════════════════════════════════════════════════════════════ CHROME 3 — CONTENT (server-rendered FAQ / how-to / docs / privacy / DPA / security / instructions / bug-report / story / waitlist) One shared masthead — logo + optional lang flag; subtle separator. ══════════════════════════════════════════════════════════════════════════ */ .cg-topbar--content { background: var(--brand-ink, #14253D); color: var(--on-ink, #FAF8F3); border-bottom: 2px solid var(--brand-gold, #C3A14B); padding: 14px 20px; /* §3-of-build fix: KEEP flexbox (the shared content chrome must not become grid — /for-professionals has 4 header children and would wrap to a 2nd row). The /bug title is centred independently via absolute positioning on .cg-topbar--content .cg-topbar__title below (true viewport centre, 0px). */ display: flex; align-items: center; gap: 12px; max-width: 100%; } .cg-topbar--content .brand-lockup { /* W2-A A1: 28px → 44px (founder ruling: ALL chromes incl. content → 44px; /bug + /waitlist are cg-topbar--content, were 36px — come UP to 44px) */ height: 44px; width: auto; display: block; color: var(--on-ink, #FAF8F3); flex-shrink: 0; } @media (min-width: 768px) { /* W2-A A1: 36px → 44px (same founder ruling; the @768 breakpoint now holds 44px) */ .cg-topbar--content .brand-lockup { height: 44px; } } /* Spacer so language flag floats right */ .cg-topbar--content .cg-topbar__spacer { flex: 1; } /* F#07: title block in CONTENT chrome — logo LEFT, title CENTER, actions RIGHT. Uses flex: the spacer between logo+title-block and title-block+actions distributes the remaining space so the title appears centred. */ .cg-topbar--content .cg-topbar__title-block { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; } .cg-topbar--content .cg-topbar__title { font-size: clamp(18px, 3vw, 24px); font-weight: 800; color: var(--on-ink, #FAF8F3); text-align: center; margin: 0; /* neutralise any bare h1{margin} from page-local inline styles */ /* F#07 (render-check fix): TRUE viewport-centre. The grid centres the 1fr COLUMN, which is left-shifted when the actions cluster is wider than the logo (−29px on /bug). Absolutely centre the title within the sticky header so it sits at the real axis regardless of side widths; the (now-empty) title-block stays in the grid so actions remain in column 3 (right). */ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); white-space: nowrap; max-width: 60%; overflow: hidden; text-overflow: ellipsis; } .cg-topbar--content .cg-topbar__actions { display: flex; align-items: center; gap: var(--s2, 8px); flex-shrink: 0; } /* Language flag inside CONTENT topbar (dark pill variant, same as APP) */ .cg-topbar--content .lang-flag { position: relative; } .cg-topbar--content .lang-flag__btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; cursor: pointer; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.22); /* W2-A A1: unified to canonical 44×44px touch target (was 40/40, below 44px floor); font-size aligned to 15px (matches app chrome; was 14px) */ border-radius: 999px; padding: 10px 14px; min-width: 44px; min-height: 44px; font-size: 15px; line-height: 1; color: var(--on-ink, #FAF8F3); } .cg-topbar--content .lang-flag__caret { font-size: 9px; opacity: .6; } .cg-topbar--content .lang-flag__menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; background: var(--field, #fff); border: 1px solid var(--border-default, #e3ddd0); border-radius: 12px; padding: 6px; box-shadow: 0 10px 30px rgba(20,37,61,.14); min-width: 150px; } .cg-topbar--content .lang-flag__menu[hidden] { display: none; } .cg-topbar--content .lang-flag__menu button { display: block; width: 100%; text-align: left; padding: 8px 12px; border: 0; background: none; border-radius: 8px; font: inherit; font-size: 14px; color: var(--brand-ink, #14253D); cursor: pointer; } .cg-topbar--content .lang-flag__menu button:hover { background: var(--surface-ivory, #F3EFE6); } /* Content topbar also stays dark in dark mode */ @media (prefers-color-scheme: dark) { .cg-topbar--content { background: var(--brand-ink, #0c1726); border-bottom-color: var(--brand-gold, #d8b864); } } [data-theme="dark"] .cg-topbar--content { background: var(--brand-ink, #0c1726); border-bottom-color: var(--brand-gold, #d8b864); }