/* ============================================================================ ls_notice.css — THE legal disclaimer bar. One file, every page. OWNER DIRECTIVE (2026-08-19), two parts: 1. "Not legal advice" must be on EVERY page, no exceptions. 2. It must be FROZEN — when the visitor scrolls down, it stays visible. And: appearance AND behaviour inherit from ONE parent place, so a change happens in one spot and just works everywhere. ── THIS FILE IS THAT ONE PLACE ────────────────────────────────────────── `copy_page()` in website/cloudflare/build_site.py links this stylesheet into EVERY served page (not just the handful it stamps a static bar into), so the bar looks and behaves identically on all 1,543 pages regardless of which family stylesheet — or none at all — the page carries. Before this consolidated (2026-08-19) the bar was declared in EIGHT places: ls_furniture.css, ls_homepage.css, ls_grid.css, ls_landing.css, ls_latest.css, ls_evergreen.css, ls_pass.css and here, plus 53 page files with their own inline copy. Three things were wrong with that: • 175 pages matched none of the family sheets, so they fell through to ls_furniture.css's RETIRED LIGHT SKIN — a cream #fdf9ee bar with grey text (design-director §3 rule 2 says text on gold is always white). • The 9 pages this file used to serve were pinned `position: relative`, so their disclaimer scrolled away — not frozen at all. • Changing the bar meant editing eight files and hoping. Every one of those declarations is now DELETED. If you are adding a `.hw-notice-bar` rule anywhere else, stop: it belongs here. The CI gate .github/workflows/page-invariants.yml fails the build if a second declaration reappears. ── WHY position: sticky (not fixed) ───────────────────────────────────── Sticky keeps the bar IN FLOW, so it reserves its own space and nothing needs a compensating top offset — which would otherwise have to track the bar's height as the text wraps at narrow widths. Nothing on this site competes for top:0 (the DG4 site header is not sticky; the only sticky furniture is .hw-toc-rail at top:84px and .hw-topics-sky at top:64px, both of which sit comfortably below a ~40px bar), so the bar pins to the viewport top and the page slides under it. ⚠️ THE FLEX TRAP. Sticky cannot save a bar whose parent is a ROW flex container: the bar becomes a flex item beside the content and `align-items: center` drops it into the middle of the page. That is exactly what /404 and /subscribe/ did — they are the only two pages that style themselves, and both are now `flex-direction: column` so the bar is a full-width first row. Any NEW page that styles must do the same. Never solve it by making this bar `position: fixed`. ⚠️ WHY !important. Nothing in the repo competes any more, but these pages also still ship a retired Ghost `screen.css` sitewide, and ls_furniture.css loads from the END of — i.e. after this file, which the build links in . Later wins on equal specificity, so the guards stay. ⚠️ PX ONLY, NEVER REM — that retired screen.css sets html{font-size:62.5%} sitewide, so a rem value renders at 62.5% of what you meant. Design authority: .claude/skills/design-director/SKILL.md (§3 rules 2, 17). Gold ground #ac7d46 + white text is the sitewide notice-bar skin. ========================================================================= */ .hw-notice-bar { /* THE FREEZE — the whole point of this file. */ position: sticky !important; top: 0 !important; z-index: 2000 !important; /* above every z-index in the repo (max was 999) */ background: #ac7d46 !important; border-bottom: 1px solid rgba(11, 14, 20, 0.25) !important; color: #fff !important; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif !important; font-size: 14px !important; line-height: 1.45 !important; /* Nothing sits in the corners any more (the dismiss button is gone), so this is plain breathing room rather than clearance for a control. */ padding: 9px 20px !important; margin: 0 !important; text-align: center !important; box-sizing: border-box !important; /* if a page makes a COLUMN flex container, stay a full-width row rather than stretching or shrinking to share the free space */ flex: 0 0 auto !important; align-self: stretch !important; } .hw-notice-bar a { color: #fff !important; text-decoration: underline !important; text-underline-offset: 2px !important; } .hw-notice-bar a:hover { color: #fff !important; } /* There is NO dismiss control. The rule that styled one was deleted with the button itself on 2026-08-19 — leaving orphan CSS for an element that no longer exists is how a "temporarily" removed feature creeps back. The build's gate bans the class name outright, in HTML and in CSS. */ @media (max-width: 720px) { .hw-notice-bar { font-size: 13px !important; padding: 8px 16px !important; } }