/* ========================================================================== 5NINE brand tokens: THE ONLY PLACE BRAND VALUES LIVE -------------------------------------------------------------------------- Every color, font, size and spacing value on the site comes from here. To re-skin the site once the logo is picked, edit this file. Fonts: the family names are set below. If you switch to a DIFFERENT font, also update the Google Fonts line in the of all 5 HTML pages (index, services, about, contact, 404). See CLAUDE.md "Changing fonts". Contrast rules (WCAG AA), checked 2026-10-15: - Orange (#F26A21) is for buttons, accents and LARGE text only. On light backgrounds it fails as small text. Use --color-orange-dark there. - Orange text on charcoal passes (~5.2:1), so small orange labels are fine on dark sections. - White text on orange FAILS (~3.1:1). Buttons use charcoal text on orange. ========================================================================== */ /* ---- Metric-matched fallback fonts --------------------------------------- Until Barlow arrives (display=swap), text is drawn in local Arial/Helvetica resized so it takes the same width and line height as Barlow. Text then wraps the same in both fonts, so the swap doesn't move the page (the hero heading used to jump 56px at 375px). Not used once Barlow has loaded. Measured 2026-10-16 in Chrome (canvas, the site's own text): - size-adjust = Barlow width / Arial width. Headings are tuned on mixed case (700 on "Loud and clear." itself, so the hero wraps at exactly the same width); Barlow's capitals are narrower relative to Arial, so ALL-CAPS buttons and nav get their own "Caps" faces (--font-heading-caps). - ascent/descent-override = Barlow's ascent (1.0em) / descent (0.2em) divided by size-adjust (Chrome scales the overrides by size-adjust). - unicode-range = Google's "latin" subset, so symbols Barlow doesn't have (like the → arrows) still come from the same fonts as before. Changing fonts? Re-measure these numbers (CLAUDE.md "Changing fonts"). */ @font-face { font-family: "Barlow Condensed Fallback"; font-weight: 700; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Helvetica-Bold"); size-adjust: 75.83%; ascent-override: 131.87%; descent-override: 26.37%; line-gap-override: 0%; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Barlow Condensed Fallback"; font-weight: 600; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Helvetica-Bold"); size-adjust: 73.3%; ascent-override: 136.43%; descent-override: 27.29%; line-gap-override: 0%; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Barlow Condensed Caps Fallback"; font-weight: 700; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Helvetica-Bold"); size-adjust: 67.12%; ascent-override: 148.99%; descent-override: 29.8%; line-gap-override: 0%; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Barlow Condensed Caps Fallback"; font-weight: 600; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Helvetica-Bold"); size-adjust: 66%; ascent-override: 151.52%; descent-override: 30.3%; line-gap-override: 0%; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Barlow Fallback"; font-weight: 400; src: local("Arial"), local("ArialMT"), local("Helvetica"); size-adjust: 96.3%; ascent-override: 103.84%; descent-override: 20.77%; line-gap-override: 0%; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Barlow Fallback"; font-weight: 500; src: local("Arial"), local("ArialMT"), local("Helvetica"); size-adjust: 96.4%; ascent-override: 103.73%; descent-override: 20.75%; line-gap-override: 0%; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* ---- Brand palette (raw values) ------------------------------------- */ --color-charcoal: #1F2328; --color-orange: #F26A21; /* accents, buttons, large text only */ --color-orange-dark: #B4470F; /* links and small text on light backgrounds */ --color-bone: #F2EFE8; --color-white: #FFFFFF; --color-muted: #5B6168; /* secondary text on light backgrounds */ --color-muted-light: #B8BDC3; /* secondary text on charcoal */ --color-line: #D8D2C6; /* borders and dividers on light (decorative) */ --color-placeholder: #E3DED3; /* image placeholder boxes */ /* ---- Color roles (what the stylesheet actually uses) ---------------- */ /* Light sections */ --color-bg: var(--color-bone); --color-surface: var(--color-white); --color-text: var(--color-charcoal); --color-text-muted: var(--color-muted); --color-link: var(--color-orange-dark); --color-label: var(--color-orange-dark); --color-focus: var(--color-orange-dark); /* Dark sections (header, hero, 5-9, footer) */ --color-dark-bg: var(--color-charcoal); --color-dark-text: var(--color-bone); --color-dark-text-muted: var(--color-muted-light); --color-dark-label: var(--color-orange); --color-dark-focus: var(--color-orange); --color-dark-line: rgb(255 255 255 / 0.12); /* borders on charcoal (decorative) */ --shadow-menu: 0 12px 24px rgb(0 0 0 / 0.35); /* open mobile menu */ /* Accent band and buttons */ --color-accent: var(--color-orange); --color-on-accent: var(--color-charcoal); /* Visible [PLACEHOLDER] highlight: tinted so Josh can spot them */ --color-todo-bg: rgb(242 106 33 / 0.18); /* Forms (contact page). Checked on white and bone, all pass AA: error 6.57/5.73, success 6.52/5.68, input border 6.26 on white (form controls need 3:1 against their background). */ --color-error: #B42318; --color-success: #1E6B3A; --color-input-border: var(--color-muted); /* ---- Typography ------------------------------------------------------ */ --font-heading: "Barlow Condensed", "Barlow Condensed Fallback", "Arial Narrow", Arial, sans-serif; /* Same font; only the fallback differs (tuned on capitals). For text-transform: uppercase. */ --font-heading-caps: "Barlow Condensed", "Barlow Condensed Caps Fallback", "Arial Narrow", Arial, sans-serif; --font-body: "Barlow", "Barlow Fallback", "Segoe UI", Arial, sans-serif; --font-mono: "IBM Plex Mono", Consolas, "Courier New", monospace; /* Only these weights are loaded from Google Fonts. Keep them in sync. */ --weight-heading: 700; --weight-subheading: 600; --weight-body: 400; --weight-strong: 500; --weight-mono: 500; /* Type scale: fluid between ~360px and ~1440px wide */ --text-xs: 0.8125rem; /* 13px mono labels */ --text-sm: 0.9375rem; /* 15px */ --text-base: 1.0625rem; /* 17px body */ --text-lg: clamp(1.125rem, 1rem + 0.5vw, 1.3125rem); --text-xl: clamp(1.5rem, 1.25rem + 1vw, 2rem); --text-2xl: clamp(2rem, 1.5rem + 2.2vw, 3rem); --text-hero: clamp(3.5rem, 2.25rem + 6vw, 7rem); --leading-tight: 1.05; --leading-snug: 1.25; --leading-body: 1.6; /* ---- Spacing, layout, shape ------------------------------------------ */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4.5rem; --section-padding: clamp(3rem, 2rem + 4vw, 6rem); --container-max: 72rem; --container-gutter: clamp(1rem, 0.5rem + 2.5vw, 2rem); --header-height: 4rem; --tap-target: 44px; --radius-sm: 4px; --radius-md: 8px; --border-width: 1px; --focus-width: 3px; }