/* ===================================================================== * Brand token overrides — generated by SPEC-023 html-brand-customizer * Client: southside-junk * Generated: 2026-05-10 * * This file overrides values in tokens.css with the client's brand. * Hooked into every page's after the default tokens.css link. * Do not edit by hand — re-run update-brand-tokens.py with new * brand-tokens.json values. * =================================================================== */ :root { /* === Brand color palette === */ --color-primary: #000048; --color-secondary: #3b4a93; --color-accent: #ff7e15; --color-accent-link: #c25000; --color-bg: #ffffff; --color-background: #ffffff; --color-text: #0a0a1f; --color-text-muted: #5a5a72; --color-border: #dde1ee; --color-surface: #f7f8fc; --color-primary-dark: #000038; --color-primary-darker: #00002e; --color-primary-light: #3b4a93; --color-primary-subtle: #f0f2f9; /* === Tonal scale (50→800) for primary brand color === */ --color-primary-50: #f0f2f9; --color-primary-100: #dde1ee; --color-primary-200: #aab2d3; --color-primary-300: #6b78b8; --color-primary-400: #3b4a93; --color-primary-500: #000048; --color-primary-600: #000038; --color-primary-700: #00002e; --color-primary-800: #000020; /* === Override TEMPLATE-NAMED variables (not just --color-N) === * Webflow templates often define their own semantic CSS variables * (e.g. --primary, --secondary, --border-color) and use those * extensively in site.css. Overriding only --color-N tokens won't * reach those rules. Janky template uses these template-named vars: */ --primary: #000048 !important; --secondary: #ff7e15 !important; --border-color: #3b4a93 !important; --brunswick-green: #000038 !important; --bg: #f0f2f9 !important; --text-color-dark: #0a0a1f !important; --text-color-light: #5a5a72 !important; --rich-black: #000020 !important; /* === Override numbered tokens (--color-1 through --color-8) === */ --color-1: #ffffff; --color-2: #000048; --color-text-headings: #0a0a1f; /* === Typography === */ --font-heading: 'Bricolage Grotesque', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; /* === Button system === */ --button-radius: 8px; --button-padding: 0.875rem 1.75rem; --button-primary-bg: #ff7e15; --button-primary-text: #000048; --button-primary-hover-bg: #e0681a; --button-secondary-bg: transparent; --button-secondary-text: #000048; --button-secondary-border: #000048; } /* === Typography enforcement on common heading/body selectors === */ h1, h2, h3, h4, h5, h6, [class*='heading'], [class*='title'] { font-family: var(--font-heading); color: #0a0a1f; } body, p, [class*='body'], [class*='details'], [class*='description'] { font-family: var(--font-body); } /* === Primary CTA buttons (most templates: .primary-button, .btn-primary) === * Webflow templates often nest the visible button background on an INNER * element (e.g. .primary-button-inner). We override BOTH the outer * and any inner element whose class contains * 'primary-button' so the user-facing background color matches the brand. */ .primary-button, .btn-primary, [class*='cta'][class*='primary'], .primary-button-inner, [class*='primary-button-inner'], .primary-button-inner-text, [class*='primary-button'] [class*='inner'], a.button:not(.btn-secondary):not(.outline) { background-color: #ff7e15 !important; color: #000048 !important; border-radius: 8px; border: none; transition: background-color 0.2s ease; } .primary-button:hover, .btn-primary:hover, .primary-button:hover .primary-button-inner, a.primary-button:hover [class*='inner'] { background-color: #e0681a !important; } /* Force button text color on inner spans/divs (Webflow nests text in
with its own color rule) */ .primary-button-text, [class*='primary-button-text'], .primary-button [class*='text'], a.primary-button * { color: #000048 !important; } /* === Link color in body content === * Use accent_link (darker variant of brand orange) so links pass * WCAG AA contrast on white. Templates often skip
tag, so we * exclude nav/footer/header by selector instead of requiring
* ancestor. */ a:not(.button):not(.primary-button):not([class*='primary-button']):not([class*='nav-link']):not([class*='nav_link']):not(.footer-link):not([class*='breadcrumb']):not([style*='inherit']):not([style*='color: white']) { color: #c25000; } a:not(.button):not(.primary-button):not([class*='primary-button']):not([class*='nav-link']):not([class*='nav_link']):not(.footer-link):not([class*='breadcrumb']):not([style*='inherit']):not([style*='color: white']):hover { color: #ff7e15; } /* Footer + nav links should stay white/inherit, not be colored as body links. * The Janky template wraps its footer in
not *