/* Base element styles + shared utility classes used across pages/components. */ html { background: var(--color-bg) !important; scroll-behavior: smooth; } /* !important: Avril's parent-theme color-scheme stylesheet (assets/css/color/default.css: "body { background: #ffffff; }") is enqueued by Avril's own functions.php, which WordPress always loads AFTER the child theme's — so that rule prints later in and, at equal specificity, wins the cascade over this file's own body rule. That left `body` (and, on any template that doesn't route through header.php's #main wrapper, the whole visible page — e.g. 404.php) rendering with Avril's white background under our dark design. This is the one deliberate !important in the design system: it's the only reliable way to keep the child theme's own body background winning against a parent stylesheet we don't control and must not edit directly. */ body { background: var(--color-bg) !important; overflow-x: hidden; } /* Defense in depth for the same Avril override: guarantees the primary content wrapper is never accidentally left on Avril's white background even if a future template constructs its own (like 404.php) without inheriting from header.php/footer.php's chrome. */ #main { background: var(--color-bg); color: var(--color-text); } ::selection { background: var(--color-accent); color: var(--color-black); } :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: var(--radius-sm); } img { border-radius: var(--radius-md); } hr { border: none; border-top: 1px solid var(--color-border); } /* Skip link — accessible, visually hidden until focused */ .skip-link { position: absolute; top: -100%; left: var(--space-4); z-index: var(--z-modal); padding: var(--space-3) var(--space-5); background: var(--color-accent); color: var(--color-black); font-weight: 600; border-radius: var(--radius-sm); transition: top var(--duration-fast) var(--ease-premium); } .skip-link:focus { top: var(--space-4); } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Full-viewport centered state page (404, etc.) */ .state-page { min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--space-5); padding: var(--space-6); } /* Divider used for the "technical accent line" motif */ .accent-divider { width: 3rem; height: 2px; background: var(--color-accent); border-radius: var(--radius-pill); } .section--surface { background: var(--color-surface); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); } .section-head .eyebrow { margin-bottom: var(--space-1); } .section-head__lede { color: var(--color-text-dim); font-size: var(--fs-md); } /* Reveal target — JS adds .is-visible via IntersectionObserver; CSS-only fallback if JS fails */ [data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity var(--duration-slow) var(--ease-premium), transform var(--duration-slow) var(--ease-premium); } [data-reveal].is-visible { opacity: 1; transform: none; } .no-js [data-reveal] { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } [data-reveal] { opacity: 1; transform: none; transition: none; } }