/*
Global stylesheet - single source of truth for the site.
Structure:
1) Reset and base
2) Design tokens (:root) - palette and typography are owned by the
`brand-guidelines` skill. Spacing, radii, shadows, motion, and layout
tokens are owned here.
3) Layout primitives
4) Components (site-wide reusable primitives only - page-specific
styles live with their page builds, not here)
5) Utilities
*/
/* ===== 1) Reset and base ===== */
*, *::before, *::after {
box-sizing: border-box;
}
html {
font-size: 16px;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
font-family: var(--font-body);
line-height: 1.5;
color: var(--color-text);
background: var(--color-bg);
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
line-height: 1.2;
}
img {
max-width: 100%;
height: auto;
display: block;
}
a {
color: inherit;
text-decoration: none;
}
button {
font: inherit;
}
:focus-visible {
outline: 3px solid var(--color-focus);
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
}
/* ===== 2) Design tokens ===== */
/* Palette and typography are written by the `brand-guidelines` skill from
`build-assets/0-the-brand/tokens.json`. Spacing, radii, shadows, and
transitions are owned here. */
:root {
/* Palette (brand-guidelines) */
--color-bg: #f7f2e8;
--color-surface: #fffdf8;
--color-surface-soft: #e9e5dc;
--color-text: #111315;
--color-text-soft: #555b5f;
--color-primary: #b52f28;
--color-primary-dark: #90231e;
--color-primary-light: #f3d9d5;
--color-accent: #d3a34a;
--color-focus: #d3a34a;
--color-asphalt: #111315;
--color-charcoal: #1f2326;
--color-steel: #9da3a6;
/* Typography (brand-guidelines) */
--font-heading: "Arial Narrow", "Roboto Condensed", "Franklin Gothic Medium", sans-serif;
--font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
/* Spacing */
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.25rem;
--space-6: 1.5rem;
--space-8: 2rem;
--space-10: 2.5rem;
--space-12: 3rem;
/* Radii */
--radius-sm: 0.25rem;
--radius-md: 0.375rem;
--radius-lg: 0.5rem;
--radius-pill: 999px;
/* Shadows */
--shadow-sm: 0 2px 6px rgba(17, 19, 21, 0.1);
--shadow-md: 0 8px 20px rgba(17, 19, 21, 0.12);
--shadow-lg: 0 18px 42px rgba(17, 19, 21, 0.16);
/* Motion */
--transition-fast: 180ms ease;
--transition-base: 240ms ease;
/* Layout */
--container-max: 72rem;
/* Aesthetic dials - the `design-system` skill SETS these per brand to diverge
the look (sharp vs soft, flat vs shadowed, square vs pill). Defaults below are
a soft/rounded baseline; a brand's design stage should deliberately override
them so two brands don't look like the same template reskinned. */
--logo-height: 2.5rem; /* prominent by default - the logo is a brand asset, not chrome */
--logo-max-width: 22rem; /* generous, so wide wordmarks stay tall (not width-starved) */
--header-bg: var(--color-asphalt); /* dark header supports the metallic wordmark */
--header-fg: var(--color-bg); /* high contrast navigation text */
--btn-radius: var(--radius-sm);
--card-radius: var(--radius-md);
--card-shadow: none;
--card-border: 1px solid color-mix(in srgb, var(--color-text) 16%, transparent);
--chip-radius: var(--radius-sm);
}
/* Logo grows on wider screens - override the dial at the breakpoint, never per-page. */
@media (min-width: 1024px) {
:root { --logo-height: 3rem; }
}
/* ===== 3) Layout primitives ===== */
.container {
width: min(100% - 2rem, var(--container-max));
margin-inline: auto;
}
.section {
padding: var(--space-10) 0;
}
.grid {
display: grid;
gap: var(--space-4);
}
.grid-2 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
@media (min-width: 600px) {
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* ===== 4) Components ===== */
/* Site header */
.site-header {
position: sticky;
top: 0;
z-index: 20;
background: var(--header-bg);
color: var(--header-fg);
border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}
.site-header-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
padding: var(--space-3) 0;
}
.site-logo {
display: inline-flex;
align-items: center;
gap: var(--space-2);
}
/* The header logo is an 
whose REAL file is injected by the CMS
at upload - its aspect ratio is unknown at build time. HEIGHT is the primary driver
(a generous --logo-height), so every logo renders at a consistent, prominent height
regardless of ratio; --logo-max-width is a generous, viewport-relative safety cap that
only clamps a very wide logo on small screens (it then scales down proportionally, never
distorts). Never pin width AND height. Tune the dials per brand - never a per-page size. */
.site-logo img {
height: auto;
width: auto;
max-height: var(--logo-height);
max-width: min(var(--logo-max-width, 22rem), 55vw);
object-fit: contain;
}
.site-nav {
display: inline-flex;
align-items: center;
gap: var(--space-4);
}
.site-cta {
display: inline-flex;
align-items: center;
gap: var(--space-2);
}
/* CMS-rendered menus - `{{menu.navigation}}` and `{{menu.footer}}` expand to