/* ═══════════════════════════════════════════════════════════════════════════ COSIGNA — Governed CSS Contract: Motto Bar v1.0 (UX-G2) UX/governed/motto-bar.css GOVERNED: do not override without updating atoms.json (atom id: layout-motto-bar) and propagating the change to every surface that inline-defines .motto-bar. The motto bar is the PERSISTENT BRAND FOOTER present on every COSIGNA surface. It carries three fixed slots: LEFT — bug-report link (.motto-bar__bug) CENTER — brand baseline text (.motto-bar__text / .motto-bar__base) RIGHT — live app-version chip (#app-version) BRAND BASELINE (center): "The ring is strong because the loop is closed." This text MUST appear in English on every surface. It is the brand baseline and shall NEVER be translated (CLAUDE.md mandate). The full tagline "COSigna — a Cryptographic Ring of Mutual Consent · …" may appear on larger viewports via .motto-bar__full but the base English phrase is always visible. LOADING: include this file in each surface AFTER tokens.css and the surface-specific CSS, so these rules have the final word on .motto-bar. ═══════════════════════════════════════════════════════════════════════════ */ /* ── Design tokens (consumed from tokens.css / surface :root) ──────────── */ :root { --motto-bar-bg: var(--brand-ink, #14253D); --motto-bar-fg: var(--on-ink, #FAF8F3); --motto-bar-height: 42px; --motto-bar-font-size: 11px; --motto-bar-font-weight: 600; --motto-bar-z-index: 60; /* R-05 (2026-08-03): 7px/14px matches all 21 live inline copies today — this file previously specified 6px/12px, which matched none of them. Bringing the governed reference to the universal live value (not the other way around) keeps this consolidation a true no-op; see NEOCORTEX/REFLECTION_r05_motto_bar_scope_2026-08-03.md. */ --motto-bar-padding-x: 14px; --motto-bar-padding-y: 7px; --motto-bar-gap: 12px; } /* ── Shell ──────────────────────────────────────────────────────────────── Fixed to the bottom of every viewport. A 42px padding-bottom reservation MUST be set on (or the primary scroll container) to prevent content from being hidden behind the bar. */ .motto-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--motto-bar-z-index); display: flex; align-items: center; gap: var(--motto-bar-gap); background: var(--motto-bar-bg); color: var(--motto-bar-fg); font-size: var(--motto-bar-font-size); padding: var(--motto-bar-padding-y) var(--motto-bar-padding-x); /* R-05 (2026-08-03): shell font-weight and min-height are DEFERRED, not active — verified empirically (not just reasoned) that both change real rendered output on every live page today: min-height:42px grows the bar from ~31.6px to 42px, and a shell font-weight:600 would bold the bug-link/version-chip text, which today inherits normal weight (no live page sets font-weight on this shell — .motto-bar__text sets its own 600 independently, which is unaffected either way). Left as tokens/comments so intent isn't lost; see NEOCORTEX/REFLECTION_r05_motto_bar_scope_2026-08-03.md — the same empirical-check discipline that produced that reflection caught these two after the founder's initial go-ahead. font-weight: var(--motto-bar-font-weight); min-height: var(--motto-bar-height); */ /* B-1: honour iOS pinned-PWA safe areas — home-indicator (bottom) + landscape notch (left/right). env(...) is 0 off-device, so desktop/guard render is byte-identical. */ padding-bottom: max(var(--motto-bar-padding-y, 7px), env(safe-area-inset-bottom)); padding-left: max(var(--motto-bar-padding-x, 14px), env(safe-area-inset-left)); padding-right: max(var(--motto-bar-padding-x, 14px), env(safe-area-inset-right)); /* Prevent text selection on the bar itself (it is a brand fixture, not readable content) */ user-select: none; } /* ── Left slot: bug-report link ──────────────────────────────────────────── */ .motto-bar__bug { flex: 0 0 auto; white-space: nowrap; color: var(--motto-bar-fg); opacity: 0.7; font-size: 11px; text-decoration: none; } .motto-bar__bug:hover { opacity: 1; } /* ── Center slot: brand baseline text ────────────────────────────────────── */ .motto-bar__text { flex: 1; text-align: center; font-weight: var(--motto-bar-font-weight); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; /* v0.88.0 S-DESIGN convention, present on all 21 live copies today (R-05, 2026-08-03): ALL-CAPS brand claim. */ text-transform: uppercase; letter-spacing: .03em; } /* Full tagline (desktop only; revealed via media query below) */ .motto-bar__full { display: none; } /* Base brand baseline — ALWAYS visible — English-only, never translated. The text content is: "The ring is strong because the loop is closed." This is the invariant brand baseline (CLAUDE.md). */ .motto-bar__base { display: inline; } /* ── Right slot: app version chip ────────────────────────────────────────── */ .motto-bar #app-version { opacity: 0.55; white-space: nowrap; text-align: right; flex: 0 0 auto; max-width: 42%; overflow: hidden; text-overflow: ellipsis; } /* ── Mobile overrides ───────────────────────────────────────────────────── R-05 (2026-08-03): breakpoint kept at the legacy 520px to match all 21 live copies today — R-03 is where this project's breakpoints consolidate to 480/768/1024, deliberately not here, so this file stays a no-op until R-03 lands. */ @media (max-width: 520px) { .motto-bar { gap: 8px; padding: 6px 10px; font-size: 10px; --motto-bar-font-size: 10px; /* B-1: honour iOS pinned-PWA safe areas at the mobile floor too. */ padding-bottom: max(6px, env(safe-area-inset-bottom)); padding-left: max(10px, env(safe-area-inset-left)); padding-right: max(10px, env(safe-area-inset-right)); } .motto-bar__bug { font-size: 10px; } .motto-bar__bug-label { display: none; } .motto-bar__full { display: none; } .motto-bar__base { display: inline; white-space: nowrap; overflow: hidden; font-size: 9.5px; } } /* ── Desktop full-tagline reveal — DEFERRED, not active (R-05, 2026-08-03) ─────────────── None of the 21 live copies has ever had a rule that reveals .motto-bar__full — it has been unconditionally display:none everywhere, so .motto-bar__base (the short baseline) is what actually shows at every viewport width today. Activating this rule as part of R-05 would be a real, site-wide, first-time-ever content change bundled into a "no visible change" consolidation commit — see NEOCORTEX/REFLECTION_r05_motto_bar_scope_2026-08-03.md recommendation 2. Left here, commented out, so the intent isn't lost; a future sprint can activate it as its own explicit, founder-ruled decision. @media (min-width: 768px) { .motto-bar__full { display: inline; } .motto-bar__base { display: none; } } */ /* ── Special state: face-capture mode ───────────────────────────────────── */ /* During Act-C face capture the motto bar is hidden to reclaim the 42px viewport space so the camera viewfinder can fill the screen edge-to-edge. .patents-line (added below the motto bar's own definition, P-B1) sits in the same footer stack and must be stripped here too -- it is unconditional page-flow content, not fixed chrome, so leaving it would silently re-add the viewport space this rule exists to reclaim on tightly-fit mobile layouts (found: 05-ceremony.spec.js's phone-viewport capture-step guard). */ body[data-capture="1"] .motto-bar, body[data-capture="1"] .patents-line { display: none; } body[data-capture="1"] { padding-bottom: 0; } /* ── Dark-mode: motto bar stays navy in both schemes (brand fixture) ────── */ @media (prefers-color-scheme: dark) { .motto-bar { background: var(--brand-ink, #14253D); color: var(--on-ink, #FAF8F3); } } [data-theme="dark"] .motto-bar { background: var(--brand-ink, #14253D); color: var(--on-ink, #FAF8F3); } /* ── Print: suppress the motto bar for clean document output ─────────────── */ @media print { .motto-bar { display: none; } } /* ═══════════════════════════════════════════════════════════════════════════ Patents line — P-B1 (PLAN_ux_lost_space_sweep_2026-09-18.md §3.4/§5.2/§6, OQ-5 ruled 2026-09-18 16:27 CEST): a canonical, single-line patents reference, unified across every surface — replacing 5 pages' own ad hoc versions and adding it to the 14 that carried none. NORMAL page-flow content (never fixed), placed immediately before .motto-bar in the DOM on every page — the same structural position UX/verifier/index.html's own footer already used, which is why that page's existing compact form ("COSigna — patent EP3665600B1 · US11531746B2 · FR3070079B1") became the canon rather than any of the other ad hoc versions. OQ-5, founder ruling verbatim: "...currently appears in a still non-uniform visual format... try with a background maybe, and/or just a golden divider line above." Both, combined: a subtle background tint + a thin golden divider rule above the line — explicitly NOT the ceremonial gold border/frame canon C-8 reserves for CLOSE (X-5 ruling); this treatment is permanent brand chrome, not a closure signal. ═══════════════════════════ */ .patents-line { text-align: center; font-size: 11px; line-height: 1.5; padding: 10px 16px; color: var(--muted, #6B7280); background: rgba(195, 161, 75, .06); border-top: 1px solid rgba(195, 161, 75, .35); } [data-theme="dark"] .patents-line { background: rgba(216, 184, 100, .08); border-top-color: rgba(216, 184, 100, .3); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .patents-line { background: rgba(216, 184, 100, .08); border-top-color: rgba(216, 184, 100, .3); } } @media print { .patents-line { display: none; } } /* ── W16-d (v0.595 S-W16-d, reworked in S-W16-d2) — the footer sits at the bottom of SHORT pages ── FOUNDER RULING (NEOCORTEX/DECISION_QUEUE_2026-09-21.md), verbatim: "(a) Match long pages (Recommended)" -- on a page shorter than the screen, the footer sits where a long page's footer sits when scrolled to its end: just above that page's own body padding-bottom reservation for the fixed .motto-bar (64px on most surfaces, 42px on /recap and /waitlist, 48px on /hop -- read from the box model, never written here). LONG pages render exactly as before this rule existed. Mechanism: (1) becomes a flex column with min-height 100dvh and grows to fill it (flex: 1 0 auto), so body is always at least one screen tall. Body itself stays a normal BLOCK container: no child of body changes width, margin or position. (2) The footer takes `position: sticky; top: 100dvh` -- it asks to sit below the screen, and a sticky box never leaves its containing block, so it stops at the bottom of body's content box, i.e. just above the reservation. On a long page the footer is already the last in-flow box of body, where the same rule leaves it. Why not the first version (e4ad6bea, v0.595 S-W16-d): it made a flex column, which needed `body > * { width: 100% }` to stop `max-width; margin: 0 auto` wrappers from shrinking. That rule (specificity 0,2,3) also hit children that are NOT in normal flow: the initiator's abort and skip confirmation (.abort-confirm, `width: min(360px, 92vw)`, UX/desktop-initiator/initiator.css) became a full-width bar, the ring name chip (.ring-chip) and the toasts lost their shrink-to-fit width, /hop's card jumped from the middle of the screen to the top, and three landing sections grew 8-16px because margins stop collapsing inside a flex body. A layout A/B probe over 29 routes x 3 viewports measured those changes; with this version only the footer moves, and only on short pages. Pinned by tests/e2e/specs/166-patents-footer-bottom.spec.js. /verify used to nest its .patents-line in `.app > footer` and carried three /verify-only rules (.app grew, the footer took margin-top:auto, .app's bottom padding was zeroed); since v0.595 S-FB-S3 (FB-1, the full-bleed chrome rule at the end of this file) the line is a body child there too, so the same rules as everywhere apply and those three are gone. Face-capture mode (body[data-capture="1"], above) is excluded: it hides the footer and zeroes the reservation. */ html:has(body:not([data-capture="1"]) > .patents-line) { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; } html:has(body:not([data-capture="1"]) > .patents-line) > body { flex: 1 0 auto; } /* v0.595 S-W16-d3: sticky ONLY while nothing that takes up space follows the footer. A sticky box may travel to the bottom of its containing block, so an in-flow element appended after .patents-line (a test fixture, or a fallback banner initiator.js appends to ) was drawn UNDER it — found by the first full e2e run after S-W16-d2 (specs 15, 124, 146), pinned by spec 166's "appended after the footer" legs. The exempt list is the motto bar, non-rendering elements and inline-styled fixed boxes (toasts, banners); anything else following the footer switches this rule off, which puts the footer back in normal flow — the pre-W16-d position, never an overlap. */ body:not([data-capture="1"]):not(:has(> .patents-line ~ :not(.motto-bar, script, style, link, template, noscript, [style*="position:fixed"], [style*="position: fixed"]))) > .patents-line { position: sticky; top: 100vh; top: 100dvh; } /* ── v0.595 S-W16-d4 — the patents line sits FLUSH on the motto bar, on short AND long pages ───────────────── FOUNDER RULING 2026-09-24 (NEOCORTEX register block "W16 screenshot review DONE, with 2 issues"), verbatim: "Flush on the bar (Recommended)". Measured before this rule (390..1280 px, 12 governed routes): the bar was 25-31.8 px tall depending on the PAGE (/account 25, / 31.6, /admin 30.5, /dpa 31.8 at one width) because it inherited each page's own line-height, while each page reserved 64, 48 or 42 px under its content — the line floated ~10-40 px above the bar. (1) One line-height for the bar, so it has one height everywhere. (2) --motto-bar-h IS that height, computed from the bar's own variables, safe-area inset included exactly as its padding-bottom includes it. (3) Every page carrying the patents line reserves exactly --motto-bar-h (this governed rule wins over each page's own padding-bottom), so the line's bottom meets the bar's top — pinned on a short page, at the end of a long one. (v0.595 S-FB-S3: /verify's nested-footer selectors retired — its line is a body child now.) */ .motto-bar { line-height: 1.6; } :root { --motto-bar-h: calc(var(--motto-bar-padding-y, 7px) + max(var(--motto-bar-padding-y, 7px), env(safe-area-inset-bottom, 0px)) + var(--motto-bar-font-size, 11px) * 1.6); } /* The mobile rule above (max-width: 520px) gives the bar its own 6px padding and 10px font ON .motto-bar, not on :root — the reservation mirrors it here, or it is 3.6px taller than the bar (measured: 812.4 vs the bar's top at 816 on /account 390). */ @media (max-width: 520px) { :root { --motto-bar-h: calc(6px + max(6px, env(safe-area-inset-bottom, 0px)) + 10px * 1.6); } } body:not([data-capture="1"]):has(> .patents-line) { padding-bottom: var(--motto-bar-h) !important; } /* ── v0.595 S-FB-S1 — FB-1: chrome is full-bleed by construction, never by breakout ───────────────────────────────────── FOUNDER RULINGS (NEOCORTEX/DECISION_QUEUE_2026-09-21.md), verbatim, cut at the "…": "Full-bleed everywhere, own package (Recommended)"; "… Since this width glitch seems to appear on many surfaces, spot it and plan its correction in a canonical generic manner so I avoid making the same comment as we continue reviewing surfaces". PLAN: NEOCORTEX/PLAN_fullbleed_chrome_2026-09-25.md. FB-1: every ancestor of a chrome element (the governed header, .patents-line, .motto-bar) up to has zero horizontal margin, border and padding and no max-width, and no centring flex body shrink-wraps it; a page's width constraint lives on a content wrapper that holds no chrome; no chrome rule uses vw (a vw breakout counts a classic scrollbar). Pinned by tests/e2e/specs/184-fullbleed-chrome-guard.spec.js (live) and tests/test_fullbleed_chrome_static.py (markup + CSS). (1) The browser's 8px body margin, on every page that carries the patents line and resets nothing itself (/notary, /notary-act, /enterprise, /enterprise/test). (2) In a centring flex body (/sign, /hop, /verify) a width:auto flex item shrink-wraps to its text: the patents line stretches instead. Inert in a block body (align-self needs a flex parent). */ body:has(> .patents-line) { margin: 0; } body > .patents-line { align-self: stretch; }