/* =========================================================== tires template — colors.css Concatenation of MOCKUP/assets/css/tokens.css + copper.css + copper-light.css in the mockups' own cascade order (light-theme file loads LAST so its [data-bs-theme=light] overrides win by source order). Source: E:/WEBSITES/invictarubber/MOCKUP/assets/css/ =========================================================== */ /** * tires — design tokens (Invicta Wholesale Tires). * Same token NAMES as E:/WEBSITES/LIBRARY/tokens/template-tokens.css — values only. * * Invicta is DARK-FIRST. The reference projects are light-first, so the blocks * here are inverted relative to them: :root carries the DARK values (the default * the site actually ships), and [data-bs-theme="light"] carries the light * counterparts. Theme is a runtime toggle on (assets/js/scripts.js), not * a per-page setting. * * Confirmed 6-colour palette — see RESEARCH/design-tokens.md for the contrast matrix: * #1B1B1B base · #2A1610 surface · #8A4520 rust (FILL ONLY, 2.42:1) * #C87137 copper · #E0A848 gold · #F5EFE6 bone * * ⚠️ #8A4520 fails contrast as a foreground at every size. It is a fill colour: * button/badge backgrounds, borders, gradient stops. Never text or icons. * * Banned anywhere: #000000, #6366f1, #800000. */ :root { /* ---- Core brand (copper — dominant CTA / link / accent) ---- */ --template-primary: #C87137; --template-primary-hover: #D98F51; --template-primary-active: #8A4520; --template-primary-subtle: #2A1610; --template-primary-subtle-hover: #33201A; --template-primary-border-subtle: #8A4520; --template-primary-text-emphasis: #D98F51; --template-on-primary: #1B1B1B; /* ---- Extended set ---- */ --template-secondary: #2A1610; /* warm brown surface — cards, alt bands, footer */ --template-secondary-hover: #33201A; --template-accent: #E0A848; /* gold — stars, warnings, secondary accent */ --template-accent-hover: #C48D30; --template-bg: #1B1B1B; --template-bg-alt: #2A1610; --template-text: #F5EFE6; /* bone */ --template-text-body: #E6DED2; --template-text-secondary: #A89B8A; --template-border: #3D2A22; } [data-bs-theme="light"] { /* Rust replaces copper as primary on white — 7.11:1, safe as text AND fill. Copper is only 3.1:1 on white, so it drops to decorative use in this theme. */ --template-primary: #8A4520; --template-primary-hover: #6E3619; --template-primary-active: #5A2A11; --template-primary-subtle: #F6EADB; --template-primary-subtle-hover: #EFE0CC; --template-primary-border-subtle: #C9BCA8; --template-primary-text-emphasis: #5A2A11; --template-on-primary: #FFFFFF; --template-secondary: #7E560E; /* gold darkened to clear AA on white */ --template-secondary-hover: #634409; --template-accent: #7E560E; --template-accent-hover: #634409; --template-bg: #FFFFFF; --template-bg-alt: #F7F4F0; --template-text: #171412; --template-text-body: #33302B; --template-text-secondary: #6B6157; --template-border: #E2DCD2; } /* ============================================================ INVICTA WHOLESALE TIRES — Color Theme: COPPER Maps the Shop template --nl-* Bootstrap variable system to the Invicta copper/rust + gold palette on a near-black base. Swap this file to re-theme the entire site. CONFIRMED PALETTE (6) — see RESEARCH/design-tokens.md #1B1B1B base page background #2A1610 surface cards, alt sections, footer #8A4520 rust FILL ONLY (2.42:1 — never a foreground) #C87137 copper primary accent #E0A848 gold secondary / stars / warning #F5EFE6 bone text + icons Every pair below is contrast-measured, not estimated. ============================================================ */ :root, [data-bs-theme=light] { --nl-primary:#C87137; --nl-primary-rgb: 200, 113, 55; --nl-primary-text-emphasis: #8A4520; --nl-primary-text-emphasis-rgb: 138, 69, 32; --nl-primary-bg-subtle: #F6EADB; --nl-primary-bg-subtle-rgb: 246, 234, 219; --nl-primary-border-subtle: #E8CFAE; --nl-btn:var(--nl-primary)!important; --nl-btn-border-color:var(--nl-primary); /* was #fff — 3.58:1 on copper, FAILED AA. Base is 4.82:1. */ --nl-btn-color:#1B1B1B; --nl-btn-hover-bg:var(--nl-primary-text-emphasis); --nl-btn-hover-border-color:var(--nl-primary-text-emphasis); /* bone on rust = 6.22:1 */ --nl-btn-hover-color:#F5EFE6; --nl-secondary:#E0A848; --nl-secondary-rgb: 224, 168, 72; --nl-secondary-text-emphasis: #C48D30; --nl-secondary-bg-subtle: #FBF1DD; --nl-secondary-border-subtle: #F0DCB0; --nl-link-color: var(--nl-primary); --nl-link-color-rgb: var(--nl-primary-rgb); --nl-link-hover-color: var(--nl-primary-text-emphasis); --nl-link-hover-color-rgb: var(--nl-primary-text-emphasis-rgb); --nl-focus-ring-color: rgba(var(--nl-primary-rgb), .35); --nl-pagination-hover-bg: var(--nl-primary-text-emphasis); --nl-pagination-hover-border-color: var(--nl-primary-text-emphasis); --nl-pagination-active-bg: var(--nl-primary); --nl-pagination-active-border-color: var(--nl-primary); } [data-bs-theme=dark] { --nl-primary:#C87137; --nl-primary-rgb: 200, 113, 55; --nl-primary-text-emphasis: #D98F51; --nl-primary-text-emphasis-rgb: 217, 143, 81; --nl-primary-bg-subtle: #2A1610; --nl-primary-bg-subtle-rgb: 42, 22, 16; --nl-primary-border-subtle: #3D2A22; --nl-btn:var(--nl-primary)!important; --nl-btn-border-color:var(--nl-primary); /* was #fff — 3.58:1 on copper, FAILED AA. Base is 4.82:1. */ --nl-btn-color:#1B1B1B; --nl-btn-hover-bg:var(--nl-primary-text-emphasis); --nl-btn-hover-border-color:var(--nl-primary-text-emphasis); --nl-btn-hover-color:#1B1B1B; --nl-secondary:#E0A848; --nl-secondary-rgb: 224, 168, 72; --nl-secondary-text-emphasis: #EDBE72; --nl-secondary-bg-subtle: #2A1C06; --nl-secondary-border-subtle: #5A3A22; --nl-link-color: var(--nl-primary-text-emphasis); --nl-link-color-rgb: var(--nl-primary-text-emphasis-rgb); --nl-link-hover-color: var(--nl-secondary); --nl-link-hover-color-rgb: var(--nl-secondary-rgb); --nl-focus-ring-color: rgba(var(--nl-primary-rgb), .45); --nl-pagination-hover-bg: var(--nl-primary-text-emphasis); --nl-pagination-hover-border-color: var(--nl-primary-text-emphasis); --nl-pagination-active-bg: var(--nl-primary); --nl-pagination-active-border-color: var(--nl-primary); } /* ============================================================ BRAND DESIGN TOKENS (from design-tokens.md) Available to all components in styles.css and page CSS. ============================================================ */ :root { /* Brand colors */ --brand-primary: var(--template-primary); /* was #C87137 */ /* copper — 4.82:1 on base */ --brand-primary-hover: var(--template-primary-active); /* was #8A4520 */ /* rust — fill only */ --brand-primary-light: var(--template-primary-hover); /* was #D98F51 */ --brand-primary-subtle: var(--template-primary-subtle); /* was #2A1610 */ /* surface */ --brand-primary-dark: #8A4520; /* rust */ --swiper-theme-color: #C87137; --brand-secondary: var(--template-accent); /* was #E0A848 */ /* gold — 8.09:1 on base, AAA */ --brand-secondary-hover:var(--template-accent-hover); /* was #C48D30 */ --brand-secondary-light:#EDBE72; --brand-accent: #E0A848; /* Backgrounds (dark-first) — warm brown ramp off the neutral base */ --brand-bg: var(--template-bg); /* was #1B1B1B */ /* base */ --brand-bg-surface: var(--template-secondary); /* was #2A1610 */ /* surface */ --brand-bg-alt: #33201A; --brand-bg-card: #3B2620; --brand-bg-elevated: #472F26; --brand-bg-light: #F5EFE6; /* bone */ --brand-bg-light-alt: #EDE4D8; /* Text */ --brand-text: var(--template-text); /* was #F5EFE6 */ /* bone — 15.07:1 on base, AAA */ --brand-text-body: var(--template-text-body); /* was #DCD3C6 */ --brand-text-secondary: var(--template-text-secondary); /* was #A89B8A */ /* was #FFFFFF — 3.58:1 on copper, FAILED AA */ --brand-text-on-primary:var(--template-on-primary); /* was #1B1B1B */ --brand-text-on-dark: #F5EFE6; --brand-text-on-light: #1B1B1B; /* Borders */ --brand-border: var(--template-border); /* was #3D2A22 */ --brand-border-strong: #8A4520; /* rust — a border is a fill */ --brand-border-accent: #C87137; --brand-border-light: #D9CEBD; /* Semantic — warmed toward the palette. Status colours stay OUTSIDE the brand six so they read as status. Success and warning are luminance-near (1.47:1), so .pc-stock must keep its text label — the dot alone fails WCAG 1.4.1. */ --color-success: #5F8F4E; --color-success-bg: #1A2412; --color-success-text: #7FB069; /* warm sage — 6.82:1 */ --color-danger: #D9553C; --color-danger-bg: #2B0F0A; --color-danger-text: #F0806A; /* terracotta-red — 6.56:1 */ --color-warning: #E0A848; /* gold, unchanged */ --color-warning-bg: #2A1C06; --color-warning-text: #EDBE72; /* 10.01:1, AAA */ --color-info: #5B9BD5; --color-info-bg: #0D1B2A; --color-info-text: #8BB8E8; /* SALE moved onto rust. Was #F08070 vs danger #F08080 — 16 values apart in one channel, so out-of-stock and on-sale rendered as the same colour. Sale is brand furniture, not a status. */ --brand-sale: #8A4520; --brand-sale-bg: #2A1610; --brand-sale-text: #F5EFE6; /* bone on rust — 6.22:1 */ --color-star: #E0A848; /* gold */ /* Neutral grays (warm) */ --gray-50:#F7F4F0; --gray-100:#EDE8E0; --gray-200:#D4CBBD; --gray-300:#B8AC9B; --gray-400:#9A8C7A; --gray-500:#7C6E5C; --gray-600:#5E5244; --gray-700:#42382D; --gray-800:#2A221A; --gray-900:#1A1410; --gray-950:#0E0C09; /* RGB variants */ --brand-primary-rgb: 200, 113, 55; --brand-secondary-rgb: 224, 168, 72; --brand-rust-rgb: 138, 69, 32; --brand-bg-rgb: 27, 27, 27; --brand-bg-surface-rgb: 42, 22, 16; --brand-text-rgb: 245, 239, 230; --color-danger-rgb: 217, 85, 60; --color-success-rgb: 95, 143, 78; /* Typography --font-display is the logo voice: Anton, matched to the INVICTA RUBBER wordmark. It ships ONE weight (400) — never pair it with --weight-*, browsers will synthesise a smeared faux-bold. Display tier only. --font-heading (Oswald) keeps the small uppercase UI chrome, where it still has real 500/600/700 cuts and Anton is too heavy to read. */ --font-display: 'Anton', 'Oswald', 'Arial Narrow', Arial, sans-serif; --font-heading: 'Oswald', 'Arial Narrow', Arial, sans-serif; --font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif; --font-mono: 'JetBrains Mono', 'Courier New', monospace; /* Font sizes */ --text-xs:.75rem; --text-sm:.875rem; --text-base:1rem; --text-md:1.125rem; --text-lg:1.25rem; --text-xl:clamp(1.25rem,1.5vw + .75rem,1.5rem); --text-2xl:clamp(1.5rem,2vw + .75rem,2rem); --text-3xl:clamp(1.875rem,2.5vw + 1rem,2.5rem); --text-4xl:clamp(2.25rem,3.5vw + 1rem,3.5rem); --text-5xl:clamp(2.75rem,5vw + 1rem,5rem); --text-6xl:clamp(3.5rem,7vw + 1rem,7rem); /* Weights */ /* --weight-extrabold is DEPRECATED. No font on this site ships an 800 cut: Anton is 400 only, Oswald and Inter are both requested at 400-700. Asking for 800 makes the browser synthesise it, which smears the outline and closes the counters. Use --weight-bold; it is the heaviest real weight. */ --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700; --weight-extrabold:700; /* Line heights */ --leading-none:1; --leading-tight:1.15; --leading-snug:1.3; --leading-normal:1.5; --leading-relaxed:1.65; --leading-loose:1.8; /* Letter spacing */ --tracking-tight:-0.025em; --tracking-normal:0em; --tracking-wide:0.05em; --tracking-widest:0.15em; /* Spacing */ --space-0:0; --space-px:1px; --space-0-5:.125rem; --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.25rem; --space-6:1.5rem; --space-7:1.75rem; --space-8:2rem; --space-10:2.5rem; --space-12:3rem; --space-14:3.5rem; --space-16:4rem; --space-20:5rem; --space-24:6rem; --space-32:8rem; /* Section padding */ --section-py:clamp(3rem,6vw,6rem); --section-py-sm:clamp(2rem,4vw,4rem); --section-py-lg:clamp(4rem,8vw,8rem); /* Container */ --container-max:1320px; --container-prose:720px; --container-narrow:960px; --container-px:clamp(1rem,4vw,2.5rem); /* Radius — rugged, tight */ --radius-none:0; --radius-xs:2px; --radius-sm:4px; --radius-md:6px; --radius-lg:8px; --radius-xl:12px; --radius-pill:9999px; /* Shadows */ --shadow-xs:0 1px 2px rgba(0,0,0,.4); --shadow-sm:0 2px 4px rgba(0,0,0,.5),0 1px 2px rgba(0,0,0,.4); --shadow-md:0 4px 12px rgba(0,0,0,.55),0 2px 4px rgba(0,0,0,.4); --shadow-lg:0 8px 24px rgba(0,0,0,.65),0 4px 8px rgba(0,0,0,.4); --shadow-xl:0 16px 48px rgba(0,0,0,.7),0 8px 16px rgba(0,0,0,.45); --shadow-glow-primary:0 0 0 3px rgba(200,113,55,.45); --shadow-glow-secondary:0 0 0 3px rgba(224,168,72,.35); --focus-ring:0 0 0 3px rgba(200,113,55,.55); /* Transitions */ --transition-fast:150ms ease; --transition-base:250ms ease; --transition-slow:400ms ease; /* Z-index */ --z-below:-1; --z-base:0; --z-raised:10; --z-dropdown:100; --z-sticky:200; --z-overlay:300; --z-modal:400; --z-toast:500; } /* ============================================================ BOOTSTRAP COMPONENT OVERRIDES ============================================================ */ .bg-light .text-primary {color:var(--brand-primary-hover)!important;} .btn-primary, .product-card:hover .product-card-button { --nl-btn-color: var(--brand-text-on-primary); --nl-btn-bg: var(--nl-primary); --nl-btn-border-color: var(--nl-primary); --nl-btn-hover-color: var(--brand-text-on-primary); --nl-btn-hover-bg: var(--nl-primary-text-emphasis); --nl-btn-hover-border-color: var(--nl-primary-text-emphasis); --nl-btn-focus-shadow-rgb: var(--nl-primary-rgb); --nl-btn-active-color: var(--brand-text-on-primary); --nl-btn-active-bg: var(--nl-primary-text-emphasis); --nl-btn-active-border-color: var(--nl-primary-text-emphasis); --nl-btn-active-shadow: inset 0 3px 5px rgba(0,0,0,.2); --nl-btn-disabled-color: var(--brand-text-secondary); --nl-btn-disabled-bg: var(--nl-primary-bg-subtle); --nl-btn-disabled-border-color: var(--nl-primary-bg-subtle); font-family: var(--font-heading); text-transform:uppercase; letter-spacing:.02em; } .btn-outline-primary { --nl-btn-color: var(--nl-primary); --nl-btn-border-color: var(--nl-primary); --nl-btn-hover-color: var(--brand-text-on-primary); --nl-btn-hover-bg: var(--nl-primary); --nl-btn-hover-border-color: var(--nl-primary); --nl-btn-focus-shadow-rgb: var(--nl-primary-rgb); --nl-btn-active-color: var(--brand-text-on-primary); --nl-btn-active-bg: var(--nl-primary); --nl-btn-active-border-color: var(--nl-primary); --nl-gradient: none; font-family: var(--font-heading); font-weight:600; text-transform:uppercase; letter-spacing:.02em; } .btn-secondary { --nl-btn-color:var(--brand-text-on-light); --nl-btn-bg:var(--nl-secondary); --nl-btn-border-color:var(--nl-secondary); --nl-btn-hover-color:var(--brand-text-on-light); --nl-btn-hover-bg:var(--nl-secondary-text-emphasis); --nl-btn-hover-border-color:var(--nl-secondary-text-emphasis); font-family:var(--font-heading); text-transform:uppercase; letter-spacing:.02em; } .pagination { --nl-pagination-active-bg: var(--nl-primary); --nl-pagination-active-border-color: var(--nl-primary); } .swiper-pagination-bullet { border: 2px solid var(--nl-secondary-border-subtle); } .swiper-pagination-bullet-active { --swiper-pagination-color: var(--nl-primary); background: var(--nl-primary); border-color: var(--nl-primary); } .swiper-button-prev:hover, .swiper-button-next:hover { background-color: var(--nl-primary); } .form-control:focus, .form-select:focus { border-color: var(--nl-primary); box-shadow: var(--shadow-glow-primary); } .bg-primary-gradient { background: linear-gradient(180deg, var(--brand-primary-light), var(--brand-primary) 47.92%, var(--brand-primary-dark)); } .bg-black {background-color: var(--gray-950)!important;} .bg-dark {background-color: var(--brand-bg-surface)!important;} /* ============================================================ INVICTA WHOLESALE TIRES — Color Theme: COPPER LIGHT The white-background counterpart to copper.css. Inert until a host element carries [data-bs-theme=light] (the toggle in js/scripts.js sets it on ), so both themes ship together and no page needs a duplicate HTML file. LOAD ORDER: LAST — after css/copper.css, css/styles.css and css/pages/[name].css. Token overrides land on , so they beat the :root values by inheritance; the component fixes at the bottom need the later cascade position to beat page CSS. CONFIRMED LIGHT PALETTE (6) #FFFFFF base page background #F7F4F0 surface cards, alt sections, footer #E0A848 gold FILL ONLY (2.13:1 — never a foreground) #8A4520 rust primary accent — text AND fill safe #8F6210 deep gold secondary foreground #171412 ink text + icons Contrast measured against #FFFFFF, not estimated: ink #171412 17.6:1 AAA body #33302B 13.1:1 AAA secondary #6B6157 5.66:1 AA rust #8A4520 7.11:1 AAA (white on rust also 7.11:1) copper-lt #A85628 5.21:1 AA deep gold #8F6210 5.05:1 AA star gold #A8760F 4.02:1 graphics only (>=3:1), never text success #3D7A2F 5.22:1 AA danger #B3311F 6.28:1 AA info #2F6FA8 5.45:1 AA WHY THE PRIMARY MOVES TO RUST: copper #C87137 is 3.58:1 on white and fails AA as a foreground. Rust passes as text and takes white text as a fill, which also rescues the ~8 page-CSS rules that hardcode color:#fff on a --brand-primary background. ============================================================ */ /* ============================================================ BOOTSTRAP VARIABLES ============================================================ */ [data-bs-theme=light] { --nl-primary:#8A4520; --nl-primary-rgb: 138, 69, 32; --nl-primary-text-emphasis: #6E3619; --nl-primary-text-emphasis-rgb: 110, 54, 25; --nl-primary-bg-subtle: #F6EADB; --nl-primary-bg-subtle-rgb: 246, 234, 219; --nl-primary-border-subtle: #E8CFAE; --nl-btn:var(--nl-primary)!important; --nl-btn-border-color:var(--nl-primary); /* white on rust = 7.11:1 */ --nl-btn-color:#FFFFFF; --nl-btn-hover-bg:var(--nl-primary-text-emphasis); --nl-btn-hover-border-color:var(--nl-primary-text-emphasis); --nl-btn-hover-color:#FFFFFF; --nl-secondary:#7E560E; --nl-secondary-rgb: 126, 86, 14; --nl-secondary-text-emphasis: #634409; --nl-secondary-bg-subtle: #FBF1DD; --nl-secondary-border-subtle: #E8D2A2; --nl-link-color: var(--nl-primary); --nl-link-color-rgb: var(--nl-primary-rgb); --nl-link-hover-color: var(--nl-primary-text-emphasis); --nl-link-hover-color-rgb: var(--nl-primary-text-emphasis-rgb); --nl-focus-ring-color: rgba(var(--nl-primary-rgb), .35); --nl-pagination-hover-bg: var(--nl-primary-text-emphasis); --nl-pagination-hover-border-color: var(--nl-primary-text-emphasis); --nl-pagination-active-bg: var(--nl-primary); --nl-pagination-active-border-color: var(--nl-primary); } /* ============================================================ BRAND DESIGN TOKENS — light counterparts, same names ============================================================ */ [data-bs-theme=light] { /* Brand colors */ --brand-primary: var(--template-primary); /* was #8A4520 */ /* rust — 7.11:1, text and fill */ --brand-primary-hover: var(--template-primary-active); /* was #6E3619 */ /* Not a lighter copper: this token is the link/hover FOREGROUND, and a lighter step (#A85628) measures 5.21:1 on white but only 4.4:1 on the #F7F4F0 surface the guide cards sit on. It holds rust so the link colour passes on every ground the theme paints. */ --brand-primary-light: var(--template-primary-hover); /* was #8A4520 */ --brand-primary-subtle: var(--template-primary-subtle); /* was #F6EADB */ --brand-primary-dark: #5A2A11; --swiper-theme-color: #8A4520; /* Deep gold. Measured on #F7F4F0, not on white — .eyebrow and the other gold foregrounds sit on surface panels, where #8F6210 lands at 4.44:1. */ --brand-secondary: var(--template-accent); /* was #7E560E */ /* 6.51:1 white / 5.94:1 surface */ --brand-secondary-hover:var(--template-accent-hover); /* was #634409 */ --brand-secondary-light:#7E560E; --brand-accent: #7E560E; /* Gold as a FILL. Not in the dark theme — the dark theme can use --brand-secondary for both jobs because gold reads on near-black. */ --brand-secondary-fill: #E0A848; --brand-copper: #C87137; /* decorative only on white */ /* Backgrounds (light-first) — warm neutral ramp off pure white */ --brand-bg: var(--template-bg); /* was #FFFFFF */ --brand-bg-surface: var(--template-secondary); /* was #F7F4F0 */ --brand-bg-alt: #EFE9E1; --brand-bg-card: #FFFFFF; --brand-bg-elevated: #F2ECE4; --brand-bg-light: #FFFFFF; --brand-bg-light-alt: #F7F4F0; /* Text */ --brand-text: var(--template-text); /* was #171412 */ --brand-text-body: var(--template-text-body); /* was #33302B */ --brand-text-secondary: var(--template-text-secondary); /* was #6B6157 */ --brand-text-on-primary:var(--template-on-primary); /* was #FFFFFF */ /* on rust */ --brand-text-on-dark: #F5EFE6; /* unchanged — photo scrims stay dark */ --brand-text-on-light: #1B1B1B; /* Borders */ --brand-border: var(--template-border); /* was #E2DCD2 */ --brand-border-strong: #C9BCA8; --brand-border-accent: #8A4520; --brand-border-light: #EDE8E0; /* Semantic — same hues, re-darkened for a white ground. Success and warning stay luminance-near, so .pc-stock must keep its text label here too; the dot alone fails WCAG 1.4.1. */ --color-success: #356A20; --color-success-bg: #EAF3E4; --color-success-text: #356A20; /* 6.58:1 white / 6.0:1 surface */ --color-danger: #B3311F; --color-danger-bg: #FBEAE6; --color-danger-text: #B3311F; /* 6.28:1 */ --color-warning: #7E560E; --color-warning-bg: #FBF1DD; --color-warning-text: #7E560E; /* contact.css reads var(--brand-success, #22c55e); the token does not exist in the dark theme, so its bright-green fallback was landing on white at 2.28:1. Defining it here retires the fallback. */ --brand-success: #356A20; --brand-success-rgb: 53, 106, 32; --color-info: #2F6FA8; --color-info-bg: #E8F1F9; --color-info-text: #2F6FA8; /* 5.45:1 */ /* Sale keeps its own identity apart from danger, same as the dark theme. */ --brand-sale: #8A4520; --brand-sale-bg: #F6EADB; --brand-sale-text: #FFFFFF; /* Stars are ★ CHARACTERS, so they are text and owe 4.5:1, not 3:1. */ --color-star: #8A6110; /* 5.19:1 white / 4.75:1 surface */ /* Neutral grays (warm) — ramp reversed so 50 is the lightest ink */ --gray-50:#F7F4F0; --gray-100:#EDE8E0; --gray-200:#D4CBBD; --gray-300:#B8AC9B; --gray-400:#9A8C7A; --gray-500:#7C6E5C; --gray-600:#5E5244; --gray-700:#42382D; --gray-800:#2A221A; --gray-900:#1A1410; --gray-950:#0E0C09; /* RGB variants */ --brand-primary-rgb: 138, 69, 32; --brand-secondary-rgb: 126, 86, 14; --brand-rust-rgb: 138, 69, 32; --brand-bg-rgb: 255, 255, 255; --brand-bg-surface-rgb: 247, 244, 240; --brand-text-rgb: 23, 20, 18; --color-danger-rgb: 179, 49, 31; --color-success-rgb: 61, 122, 47; /* Shadows — the dark theme's near-opaque blacks read as smudges on white, so every layer drops to a low-alpha warm ink. */ --shadow-xs:0 1px 2px rgba(23,20,18,.06); --shadow-sm:0 2px 4px rgba(23,20,18,.08),0 1px 2px rgba(23,20,18,.05); --shadow-md:0 4px 12px rgba(23,20,18,.10),0 2px 4px rgba(23,20,18,.06); --shadow-lg:0 8px 24px rgba(23,20,18,.13),0 4px 8px rgba(23,20,18,.07); --shadow-xl:0 16px 48px rgba(23,20,18,.16),0 8px 16px rgba(23,20,18,.08); --shadow-glow-primary:0 0 0 3px rgba(138,69,32,.25); --shadow-glow-secondary:0 0 0 3px rgba(143,98,16,.22); --focus-ring:0 0 0 3px rgba(138,69,32,.40); } /* The dealer-portal light override in styles.css predates this theme and would otherwise repaint a bone background over the white one. .theme-light and every .page-* class live ON , which is also the element carrying [data-bs-theme] — so these selectors are compound, not descendant. A space here silently matches nothing. */ [data-bs-theme=light].theme-light, [data-bs-theme=light] .theme-light { --brand-bg:var(--template-bg); /* was #FFFFFF */ --brand-bg-surface:#F7F4F0; --brand-bg-alt:#EFE9E1; --brand-bg-card:#FFFFFF; --brand-text:var(--template-text); /* was #171412 */ --brand-text-body:#33302B; --brand-text-secondary:#6B6157; --brand-border:var(--template-border); /* was #E2DCD2 */ --brand-border-strong:#C9BCA8; color: var(--brand-text-body); background: var(--brand-bg); } /* ============================================================ COMPONENT FIXES Rules — not tokens — that only hold on a dark ground. ============================================================ */ /* Gold is a fill here, so the handful of components that paint with --brand-secondary need the fill token instead of the text token. */ [data-bs-theme=light] .btn-c-gold, [data-bs-theme=light] .badge-gold, [data-bs-theme=light] .pc-badge.save { background: var(--brand-secondary-fill); border-color: var(--brand-secondary-fill); color: var(--brand-text-on-light); } [data-bs-theme=light] .btn-c-gold:hover { background: #C89234; border-color: #C89234; color: var(--brand-text-on-light); } [data-bs-theme=light] .btn-c-outline:hover { background: var(--brand-secondary-fill); border-color: var(--brand-secondary-fill); color: var(--brand-text-on-light); } [data-bs-theme=light] .btn-secondary { --nl-btn-bg: var(--brand-secondary-fill); --nl-btn-border-color: var(--brand-secondary-fill); --nl-btn-color: var(--brand-text-on-light); --nl-btn-hover-bg: #C89234; --nl-btn-hover-border-color: #C89234; --nl-btn-hover-color: var(--brand-text-on-light); } /* .tile keeps a photo underneath but its scrim is built from --brand-bg-rgb, which is now white — so bone titles would vanish. */ [data-bs-theme=light] .tile::after { background: linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,.92)); } [data-bs-theme=light] .tile .tile-title { color: var(--brand-text); } [data-bs-theme=light] .tile .tile-meta { color: var(--brand-text-body); } /* Same reason: the hero scrim is now a white wash, so the copy on it is ink. */ [data-bs-theme=light] .hero-heading, [data-bs-theme=light] .hero .display-hero { color: var(--brand-text); } [data-bs-theme=light] .hero-sub { color: var(--brand-text-body); } /* A white wash reads far heavier over a dark photo than a black one does at the same alpha, so the light scrim needs its own curve — a touch more cover under the ink, and the same clean exit so the machine still reads. The dark theme's text-shadow would halo white behind dark ink, so it is dropped and replaced with a light-on-light equivalent. */ [data-bs-theme=light] .hero::after { background: linear-gradient(100deg, rgba(var(--brand-bg-rgb), .90) 0%, rgba(var(--brand-bg-rgb), .72) 30%, rgba(var(--brand-bg-rgb), .30) 57%, rgba(var(--brand-bg-rgb), 0) 84%); } [data-bs-theme=light] .hero .hero-heading, [data-bs-theme=light] .hero .display-hero { text-shadow: 0 2px 16px rgba(255,255,255,.75); } [data-bs-theme=light] .hero .hero-sub, [data-bs-theme=light] .hero .hero-eyebrow { text-shadow: 0 1px 10px rgba(255,255,255,.8); } /* A transparent navbar over a white hero scrim needs its own ground once the page scrolls past the hero — the tokens already handle .scrolled. */ [data-bs-theme=light] .site-navbar.is-transparent .nav-links > li > a, [data-bs-theme=light] .site-navbar.is-transparent .navbar-brand-c .brand-text, [data-bs-theme=light] .site-navbar.is-transparent .btn-icon { color: var(--brand-text); } /* Bootstrap utility classes that name a colour rather than a role. */ [data-bs-theme=light] .bg-black { background-color: var(--brand-bg-alt)!important; } [data-bs-theme=light] .bg-dark { background-color: var(--brand-bg-surface)!important; } [data-bs-theme=light] .bg-light .text-primary { color: var(--brand-primary)!important; } /* Copper stays the brand colour on a dark ground; on white it is decoration only. .text-copper is a foreground, so it moves to rust. */ [data-bs-theme=light] .text-copper { color: var(--brand-primary) !important; } [data-bs-theme=light] .text-gold { color: var(--brand-secondary) !important; } /* ---- PAGE-SPECIFIC hardcoded darks ---- */ /* fitment: two panels paint a fixed near-black gradient. */ [data-bs-theme=light].page-fitment .wizard-card-header, [data-bs-theme=light].page-fitment .help-band { background: linear-gradient(120deg, #F7F4F0, #F1E7D8); } /* Page-level badges that paint --brand-secondary and then set dark text on it. The token is a foreground here, so they need the fill token instead. (Decorative gold dots and 3px accent bars are left alone — a deep gold rule or dot still reads on white.) */ [data-bs-theme=light].page-dealer-account .dealer-tier-badge, [data-bs-theme=light].page-dealer-account .tier-gold, [data-bs-theme=light].page-dealer-account .reorder-save-badge, [data-bs-theme=light].page-checkout .progress-step.is-current .step-num, [data-bs-theme=light].page-product .btn-set-of-4:hover { background: var(--brand-secondary-fill); border-color: var(--brand-secondary-fill); color: var(--brand-text-on-light); } /* dealer-apply: a 2.5% white veil is invisible on white. */ [data-bs-theme=light].page-dealer-apply .da-fieldset { background: var(--brand-bg-surface); } /* dealer-account pins its footer to --gray-800, which stays dark here while the footer's text tokens turn to ink — 1.17:1 on every link in it. */ [data-bs-theme=light].page-dealer-account.theme-light .site-footer { background: var(--brand-bg-surface); border-top: 1px solid var(--brand-border); } /* dealer-portal paints its giant step numerals with --brand-border-strong. A border tone that reads on near-black is a pale tan on white (1.87:1). */ [data-bs-theme=light].page-dealer .dp-step-num { color: #A08262; } /* privacy-policy: .legal-prose a (0,2,1) outranks .btn-c-primary (0,1,0), so the CTA inside the prose takes the link colour — which is now the same rust as its own background, i.e. 1:1. The button wins its own text back. */ [data-bs-theme=light].page-legal .legal-prose a.btn-c-primary { color: var(--brand-text-on-primary); } /* homepage / blog / golf-cart image scrims stay dark on purpose — they sit over photography with light copy on top, which reads in either theme. */ /* ============================================================ THEME TOGGLE BUTTON Injected by js/scripts.js, so it carries no markup in any page. Unscoped — it has to be visible in both themes. ============================================================ */ .theme-toggle-fab { position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem); z-index: var(--z-toast); width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; border-radius: var(--radius-pill); border: 1px solid var(--brand-border-strong); background: var(--brand-bg-card); color: var(--brand-primary-light); box-shadow: var(--shadow-lg); cursor: pointer; transition: transform var(--transition-fast), background var(--transition-base), color var(--transition-base); } .theme-toggle-fab:hover { transform: translateY(-2px); background: var(--brand-primary); color: var(--brand-text-on-primary); border-color: var(--brand-primary); } @media print { .theme-toggle-fab { display: none; } } /* Alias — some page CSS references --brand-text-muted (a naming drift from --brand-text-secondary in copper.css). Defined here so those rules don't silently fall through to inherit. Not the banned .text-muted utility class. */ :root { --brand-text-muted: var(--brand-text-secondary); }