/* ========================================================================== BONHAM BRANDS — GLOBAL STYLESHEET -------------------------------------------------------------------------- Single source of truth for the site's design system. Every page links this one file instead of inlining its own CSS, so the look stays identical across the whole site and a single edit here updates every page at once. CANONICAL DECISIONS (these resolve the prior page-to-page drift): - Color tokens: the 9 official Bonham tokens. The stray "--brown-light", which had appeared on a single page only, has been dropped. - Site chrome: the "main" design — a FIXED top nav with the image logo and a Shop dropdown, plus the dark footer. The older textile-page chrome (text logo, sticky nav, brown footer) is being retired onto this one. COVERAGE — PHASE 1: shared chrome (nav, footer, buttons, mobile menu) + all product-page components. Blog-post, home, and shop component styles are appended in later phases as those page types are migrated. ========================================================================== */ /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ---------- Design tokens ---------- */ :root { --cream: #f5f0e8; --cream-dark: #ede6d6; --gold: #b8973a; --gold-light: #c9a84c; --gold-dark: #8a6e28; --brown: #3b2f1e; --white: #fdfaf4; --text: #2c2215; --text-muted: #6b5a3e; /* surface tones used in a few sections */ --footer-bg: #1e160d; --band-brown: #4a3020; } /* ---------- Base ---------- */ html { scroll-behavior: smooth; } body { font-family: 'Josefin Sans', sans-serif; background: var(--cream); color: var(--text); overflow-x: hidden; } h1, h2, h3, h4 { font-family: 'Cormorant Garamond', serif; color: var(--brown); } /* ---------- Accessibility helpers ---------- */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: 8px; top: -48px; z-index: 2000; background: var(--gold-dark); color: var(--white); padding: 10px 18px; font-size: 0.95rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; transition: top 0.2s; } .skip-link:focus { top: 8px; } a:focus-visible, button:focus-visible, .thumb:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--gold-dark); outline-offset: 3px; border-radius: 2px; } .thumb:focus-visible { border-color: var(--gold); } /* ========================================================================== NAVIGATION (canonical) -------------------------------------------------------------------------- Scoped to `.site-nav` so these chrome rules never leak onto the page's other