/* ========================================================================== TheSourceTheme.css Shared foundations for The Source reskin, translated from the Claude Design bundle (The Source Website, 26 August 2026). Slice 1 adds this file without linking it anywhere, so the site is unchanged. Slice 2 links it from master/Retail.master and it becomes the base layer for every retail page. Page-specific rules stay in the existing per-page stylesheets and are rebuilt slice by slice from design-full-reference.css. Requires css/fonts-inter.css to be linked before this file. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Colour tokens, exactly as the design defines them -------------------------------------------------------------------------- */ :root { --primary: #15294B; /* deep navy: headings, footer, dark sections */ --cream: #F4F1EB; /* warm cream: page and header ground */ --accent: #C06A2E; /* burnt orange: buttons, links, highlights */ --accent-hover: #a85a22; /* darker orange for hover states */ --accent-light: #D98A50; /* lighter orange for subtle accents */ --slate: #4A5463; /* supporting grey text */ --border: #E0DBCF; /* warm hairline borders */ } /* -------------------------------------------------------------------------- 2. Type The design sets Inter everywhere, weights 400 to 800. .ts-type is applied to in slice 2; nothing uses it before then. -------------------------------------------------------------------------- */ .ts-type { font-family: 'Inter', system-ui, sans-serif; color: var(--primary); -webkit-font-smoothing: antialiased; } /* -------------------------------------------------------------------------- 3. Layout wrapper -------------------------------------------------------------------------- */ /* Correction to slice 1: this rule was transcribed with an extra "padding: 0 24px" that the design bundle's .hm2-wrap does not have. The 48px it added narrowed every block using this wrapper, wrapping headings the design fits on one line. The containers that use .hm2-wrap supply their own side padding of 5% (.hm2-sec, .hm2-hero-in, .hm2-foot), which is how the design spaces them. Now matches the bundle exactly. */ .hm2-wrap { max-width: 1280px; margin: 0 auto; } /* -------------------------------------------------------------------------- 4. Buttons, verbatim from the design -------------------------------------------------------------------------- */ .hm2-btnrow { display: flex; gap: 0.9rem; flex-wrap: wrap; align-items: center; } .hm2-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem; border-radius: 3px; font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer; font-family: inherit; border: none; white-space: nowrap; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .hm2-btn-amber { background: var(--accent); color: #fff; } .hm2-btn-amber:hover { background: var(--accent-hover); color: #fff; } .hm2-btn-ghost { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,0.55); } .hm2-btn-ghost:hover { color: #fff; border-color: #fff; background: rgba(255,255,255,0.08); } .hm2-btn-outline { background: transparent; color: var(--primary); border: 1.5px solid var(--primary); } .hm2-btn-outline:hover { background: var(--primary); color: #fff; } /* -------------------------------------------------------------------------- 5. Shared small pieces -------------------------------------------------------------------------- */ .hm2-eyebrow { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent); margin-bottom: 1rem; }