/* ========================================================================== lb-chrome-compat.css — THE BRIDGE BETWEEN DIVI AND THE REBUILT CHROME. ========================================================================== Loaded last in , after wp_head() and after the rebuilt site's /css/main.css. Nothing here is design: every rule below exists because two stylesheets that were written independently are now on the same page, and each one is annotated with what breaks without it. 🔴 NOTHING HERE MAY STYLE THE CHROME ITSELF. If the header or the footer needs a change, it is made in the rebuild repo's src/css/components/ and it reaches WordPress through the export. A visual tweak parked here would be invisible to the visual diff, the section audit and every other check in that repo — the same blind spot a hand-ported nav would have. NOT ONE SELECTOR BELOW NAMES A CHROME CLASS: everything the chrome needs in order to win against Divi is generated from main.css into `/css/chrome-armour.css` and served from the rebuilt site. See §3. Repo source of truth: labastille-web/wordpress/la-bastille/assets/ Deploy with: node scripts/deploy-wp-chrome.mjs ========================================================================== */ /* -------------------------------------------------------------------------- §1 DIVI'S HEADER SPACER -------------------------------------------------------------------------- Divi prints `#page-container { padding-top: NNpx }` inline, computed from the old fixed header's height — the staging home page alone carries 80px, 111px, 147px and 177px variants across its breakpoints. That padding was reserving space for a header that is `position: fixed`. The rebuilt header is `position: sticky`, so it occupies its own space in flow. Left alone, this padding is a blank white band above the nav on every WordPress page, at a height that changes with the viewport. */ #page-container { padding-top: 0 !important; } /* -------------------------------------------------------------------------- §2 THE STICKY HEADER — AND THE RULE THAT IS DELIBERATELY NOT HERE -------------------------------------------------------------------------- There WAS a rule here forcing `body { overflow-x: clip }` at <=768px, on the reasoning that `overflow-x: hidden` computes `overflow-y` to `auto`, makes a scroll container, and so strands a `position: sticky` header. 🔴 IT WAS DEAD TWICE OVER, AND ONLY MEASURING SHOWED IT. - It never applied. The page's own JavaScript sets `overflow-x: hidden` INLINE and `!important` on , at every width. An inline important declaration outranks an important one in a stylesheet, so this rule lost every time — including on the phone widths it was written for. - It was not needed. is `overflow: visible`, so the body's overflow propagates to the viewport and the body's USED value becomes visible. The header sticks. Verified by scrolling to 700px and measuring at both 1440 and 390, with and without the override forced on. `getComputedStyle(body).overflowX` reads "hidden" on BOTH halves of the site and means nothing on its own — it is the computed value, not the used one. scripts/verify-wp-chrome.mjs therefore scrolls the page and measures where the header actually is, which is the only form of this check worth having. Left as a comment rather than deleted because the reasoning is sound and only the premise is false: if anything ever sets `overflow` on , propagation stops and the header really will come unstuck. The scroll test will say so. */ /* -------------------------------------------------------------------------- §3 THE CHILD THEME'S GLOBAL `!important` RULES — HANDLED ELSEWHERE NOW -------------------------------------------------------------------------- Divi, the child theme and Divi's Customizer style bare `h2`, `p`, `a` and `li` with `!important` at type-selector specificity, from four stylesheets including one inlined into every page. A normal class rule cannot beat an `!important` one, so main.css loses all of them inside the chrome. 🔴 FOUR HAND-WRITTEN OVERRIDES USED TO LIVE HERE, AND THEY WERE NOT ENOUGH. Three of the four were right. The fourth restated the footer column heading's `font-family` and forgot its `font-size`, so those headings rendered at 36px against a drawn 16 — and every check passed, because every check was reading the markup. It surfaced only when the two halves of the site were rendered side by side and their COMPUTED styles compared. The replacement is generated, not written: `scripts/chrome-armour.mjs` emits `/css/chrome-armour.css` from main.css itself, re-stating every chrome rule with `!important`. It ships from the rebuilt site and is pulled in by the `_chrome/head` fragment, so it cannot disagree with the stylesheet it armours and it cannot go stale. Nothing about the chrome belongs in this file. */ /* -------------------------------------------------------------------------- §4 GIVING THE WORDPRESS CONTENT ITS OWN TYPOGRAPHY BACK -------------------------------------------------------------------------- main.css sets the rebuilt site's body defaults — Open Sans 14/24 in Brand Blue — on the bare `body` selector, and it loads after Divi, so it wins. That is correct for the rebuilt pages and wrong for everything WordPress still serves: the blog's body copy would turn blue and change leading. These are Divi's own values, read from wp-content/themes/Divi/style-static.min.css, reapplied to the content wrapper only. The chrome sits OUTSIDE #et-main-area, so it keeps main.css's inheritance untouched. */ #et-main-area { color: #666; font-family: "Open Sans", Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.7em; } /* -------------------------------------------------------------------------- §5 LEFTOVERS FROM THE OLD HEADER -------------------------------------------------------------------------- `#top-header` and the slide-in menu container are printed by header.php above the block we replaced, and they belong to header styles that are now gone. The child theme already hides #top-header; the slide-in container is only ever populated when Divi's header style is `slide` or `fullscreen`, which it is not — but it costs one rule to be certain neither can appear as a stray strip above the nav. */ #top-header, #header-space-top, .et_slide_in_menu_container { display: none !important; } /* -------------------------------------------------------------------------- §6 THE PAGE HEAD ON /blog/ — "Le Zinc" + "Stories From Savannah" -------------------------------------------------------------------------- David, 2026-09-20: the blog index must carry the same title pair the home page's Le Zinc section does (Figma 2:66/2:69), not Divi's plain "Blog". The text is two Divi modules on page 98975, tagged with the two classes below. Everything here restates what `.t-h2` and `.t-subtitle .journal__subtitle` already say in main.css, through the SAME tokens, so the two cannot drift apart — including `--type-h2-size`, which is a clamp() on narrow screens, so this head is responsive for free. ⚠️ `!important` throughout, and for the reason §1–§3 exist: Divi styles bare `h1` and `.et_pb_text p` with its own weights and sizes and loads first only by luck. It is exactly what went wrong on the footer on 2026-09-19 when chrome-armour.css was missing — the markup was right and Divi still won. */ .lb-pagehead__title .et_pb_module_heading { font-family: var(--type-h2-family) !important; font-size: var(--type-h2-size) !important; line-height: var(--type-h2-leading) !important; font-weight: var(--type-h2-weight) !important; font-stretch: var(--stretch-semicondensed) !important; letter-spacing: var(--type-h2-tracking) !important; text-transform: none !important; color: var(--color-brand-blue) !important; text-align: center !important; padding: 0 !important; margin: 0 !important; } /* 16px below the title, the gap `.journal__head` sets on the home page. The italic is the one thing that is NOT `.t-subtitle` — see the note above `.journal__subtitle` in components/home.css; the weight is restated because the italic file is weight 500 only and a drifted weight would be synthesised rather than loaded. */ .lb-pagehead__subtitle { margin-top: var(--space-xs) !important; } .lb-pagehead__subtitle p { font-family: var(--type-subtitle-family) !important; font-size: var(--type-subtitle-size) !important; line-height: var(--type-subtitle-leading) !important; font-weight: 500 !important; font-style: italic !important; letter-spacing: var(--type-subtitle-tracking) !important; color: var(--color-brand-blue) !important; text-align: center !important; padding: 0 !important; margin: 0 !important; }