/* BeargrassPublishing v2 — legacy-overrides.css. Loaded as the FINAL layer on top of the legacy stack (heritage.css, bgai-sales.css, bgai-learn.css, sunrise.css) for Pattern X heritage, home, and Learn pages. Carries v2-era polish that the legacy layer lacks: 1. Mode-toggle active state = accent gold (var(--warm)) instead of barn red, per Mark 2026-05-04 — the active mode now reads as a distinct accent on every chrome. 2. Learn library hero = tight one-viewport opener with the "Start Here" 3-article list visible above the fold. Mark 2026-05-04: the Learn library hero was a "trainwreck"; readers need to enter the library FAST. 3. Open-mode body prose lift for Pattern X and Learn pages — black ink text on a transparent card riding the dark scene was the "black text doesn't work when the animation is dark" bug. */ /* ============================================================ Footer — single canonical centered layout for every page. The legacy heritage.css uses a left-aligned auto-fit nav block that drifted out of true once Mark added a third footer column. The v2 chrome.css already lays the footer out centered for banded pages, but heritage / learn pages (which keep the legacy stack) inherited the broken left-aligned nav. Locking BOTH pipelines to the same centered grid here keeps the masthead and the colophon in lockstep visually. ============================================================ */ /* Footer — wordmark on top, then a 4-column equally-spaced nav grid, then a meta line. No sprig SVG. Mark 2026-05-05: prior layout was lopsided. The nav grid binds to --w-content so the masthead, every band, and the colophon share one column edge. */ .site-foot__inner { max-width: var(--w-content); margin: 0 auto; padding: var(--sp-3xl) var(--pad-x) 0; display: flex; flex-direction: column; align-items: center; gap: var(--sp-xl); text-align: center; } .site-foot__nav { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-xl); width: 100%; margin: 0; padding: 0; border-top: 0; text-align: center; align-items: start; } @media (max-width: 900px) { .site-foot__nav { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .site-foot__nav { grid-template-columns: 1fr; } } .site-foot__col { align-items: center; text-align: center; } .site-foot__meta { width: 100%; margin: var(--sp-md) auto 0; padding-top: var(--sp-md); border-top: 1px solid var(--rule); text-align: center; } /* Mode-toggle active pill — locked to warm-bright yellow in every mode and on every body class. Mark 2026-05-05: same yellow everywhere, no exceptions. */ .mode-toggle__btn[aria-pressed="true"], body.bgai-studio .mode-toggle__btn[aria-pressed="true"], body.bgai-learn .mode-toggle__btn[aria-pressed="true"], body[data-sunrise] .mode-toggle__btn[aria-pressed="true"], html[data-mode="paper"] .mode-toggle__btn[aria-pressed="true"], html[data-mode="night"] .mode-toggle__btn[aria-pressed="true"], html[data-mode="open"] .mode-toggle__btn[aria-pressed="true"] { background: var(--warm-bright, #f4c45a); color: var(--ink-fixed); text-shadow: none; box-shadow: 0 1px 2px rgba(35, 31, 26, 0.16); } /* ============================================================ Hero — exactly one viewport on every page Pattern X heritage hero (.article-head--hero) + Learn library article-head get pinned to 100vh on load so each page opens with one cinematic moment, then the content opens. ============================================================ */ body.bgai-studio.layout-heritage .article-head--hero, body.page-index .home-hero, body.page-about .article-head--hero { min-height: 100vh; height: 100vh; } /* ============================================================ Learn library — compact reading-oriented hero The Learn library opens onto a hero zone that holds the headline AND the "Start Here" 3-article list inside one viewport. Visitors land in the library and can click a first article without scrolling. Markup the legacy fragment ships: