/* * chrome.css — the site chrome: header and footer, on EVERY page. * * WHY THIS FILE EXISTS AND landing.css DOES NOT COVER IT * --------------------------------------------------------------------------- * The header and the footer used to be styled inside landing.css, which is * enqueued on the front page only. Every other page — shop, cart, checkout, * account, /activar and the five legal pages — loads global.css and nothing * else, so lifting the markup out of the shortcode without lifting the CSS out * of landing.css would have produced an unstyled navbar on nine tenths of the * site. * * The two rejected alternatives, and why: * * a) Enqueue landing.css everywhere. * landing.css opens with a verbatim port of the approved design, and that * port carries `*, *::before, *::after { margin: 0; padding: 0 }`, * `body { overflow-x: hidden }` and an @import of Google Fonts. Applying * that reset to a WooCommerce checkout or to an editor-authored legal page * flattens every paragraph and list in the document. It would also ship * 1400 lines of hero, pricing and demo CSS to pages that have none of it. * * b) Move the chrome rules out of landing.css into this file, so there is one * owner, and enqueue this file everywhere. * This is the right end state and it is NOT what shipped today, for one * reason: landing.css is being rewritten in parallel (its PART 5 adds the * mobile-first geometry for the landing's body). Cutting 500 lines out of * the middle of a file another process is appending to is how you lose * somebody's work. The removal is a follow-up, not a risk worth taking in * the same change that puts the header on nine new pages. * * WHAT SHIPPED, AND THE RULE THAT KEEPS IT HONEST * --------------------------------------------------------------------------- * ONE PAGE, ONE STYLESHEET FOR THE CHROME. They never both load: * * front page → landing.css (PART 1 + PART 4) dresses the chrome. * everything else → this file dresses the chrome. * * functions.php enqueues this file only when landing.css is NOT enqueued, so * there is no cascade to reason about, no specificity tie to lose and no way * for this file to override the landing work in flight next door. * * PARTS B and C ARE A COPY. They are the header and footer rules of * landing.css PART 1, PART 2, PART 3 and PART 4, reproduced value for value. * A change to the header must be made in BOTH files until the follow-up merges * them. That is the price of not racing a concurrent rewrite, and it is * written here rather than discovered later. * * HOW IT IS WRITTEN * --------------------------------------------------------------------------- * MOBILE FIRST, without exception. Every base rule describes the small screen * and min-width queries build the desktop up from it. There is not one * max-width rule in this file. * * THE NO-JAVASCRIPT CONTRACT * --------------------------------------------------------------------------- * Nothing here hides content by default waiting for a class to be added. The * menu is a native
disclosure, so the browser owns its open state; * assets/js/chrome.js only adds the focus trap, the scroll lock, Escape and the * aria-expanded sync. This project has already shipped a blank page once by * letting CSS hide content that only JavaScript could bring back. */ /* ========================================================================== PART A — design tokens Mirror of landing.css PART 1's :root, restricted to what the chrome reads. Pages other than the landing never load that file, so the values have to be declared somewhere they can reach. On the landing this block re-declares identical values after landing.css and is therefore a no-op. ========================================================================== */ :root { --bg-body: #f6f9fc; --bg-surface: #ffffff; --bg-surface-elevated: #f8fafc; --border-subtle: #e2e8f0; --stripe-indigo: #635bff; --stripe-teal: #00d4b4; --text-main: #0a2540; --text-muted: #425466; --text-dim: #6b7c93; --shadow-card: 0 15px 35px rgba(50, 50, 93, 0.06), 0 5px 15px rgba(0, 0, 0, 0.04); --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; --font-heading: 'Space Grotesk', var(--font-sans); /* Chrome can force its own dark rendering on any site that does not declare a colour scheme. This design ships its own dark theme via [data-theme], so declaring the scheme opts out of the browser's guesswork. */ color-scheme: only light; } [data-theme="dark"] { --bg-body: #0a2540; --bg-surface: #0e3054; --bg-surface-elevated: #163d66; --border-subtle: rgba(255, 255, 255, 0.12); --text-main: #ffffff; --text-muted: #adbdcc; --text-dim: #8898aa; color-scheme: dark; } /* Dark values as a CLASS rather than as a document state. /activar paints its own near-black canvas from activate.css and cannot use [data-theme], because that attribute belongs to the visitor's day/night choice. Without this the light glass bar sat on a black page with navy text on it. PHP adds the class through the ddb_chrome_classes filter. */ .ddb-chrome-dark { --bg-surface: #0e3054; --bg-surface-elevated: #163d66; --border-subtle: rgba(255, 255, 255, 0.12); --text-main: #ffffff; --text-muted: #adbdcc; --text-dim: #8898aa; } /* ========================================================================== PART B — chrome primitives Values copied from landing.css PART 1 (navbar, brand, buttons, footer) and PART 2/PART 3 (theme-toggle icons, inline language pill, footer columns). Nothing here changes a colour, a shadow, a radius or a gradient. ========================================================================== */ /* --- Local reset ---------------------------------------------------------- landing.css PART 1 zeroes every margin in the document. That reset only ships on the landing, so the chrome carries its own — scoped to the chrome, so it can never reach the editor's content on a legal page. Without it the footer's

and