/* Magento tokens scoped to the WP header to preserve blog/footer styling. */ /* ============================================================================ Kitchen Cabinet Kings - Canonical Design Tokens kck-tokens-2026.css This file is the single source of truth for colors, typography, spacing, and layout values across kitchencabinetkings.com. REVISION 2026-09-01 - token consolidation, Tier 1. Changes in this revision are listed at the bottom of the file under "REVISION LOG". Everything not listed there is byte-for-byte unchanged. ---------------------------------------------------------------------------- AUTHORING RULE (read this before adding anything) 1. Write --kck-* only. --doc-* is deprecated. It still resolves - see the ALIAS LAYER near the bottom - but never write a new one. 2. Never define a design token inside a page's own stylesheet. If the value you need does not exist, that is a gap in THIS file. Add it here. 3. A real value is written in exactly one place: the CANONICAL VALUES block. Everything below that block points at it and holds no value of its own. Namespace convention: --kck-color-* color --kck-font-* typography --kck-space-* spacing --kck-radius-* corners --kck-shadow-* elevation --kck-container-* layout max-widths --kck-gutter-* horizontal page padding --kck-page-end-* space between last content block and the footer --kck-leading-* line-height --kck-tracking-* letter-spacing --kck-transition-* motion --kck-bp-* breakpoints (reference only - media queries use px) ============================================================================ */ /* ############################################################################ SECTION 1 - CANONICAL VALUES The only place in this file where a real value is written. ############################################################################ */ .kckhf-header-container { /* ========================================================================== COLOR - BRAND ========================================================================== */ /* Action red - all CTAs, links, interactive states, primary brand accent. Use on white, cream, and light neutral backgrounds. Do not use on burgundy (contrast fails). WCAG: 4.8:1 on white - passes AA for large text and UI components. */ --kck-color-red: #D9201E; --kck-color-red-hover: #B81A18; /* Hover state. ~10% darker than red */ --kck-color-red-active: #A11814; /* Pressed/active. ~25% darker - the "I just clicked it" beat. */ --kck-color-red-wash: #FCF6F5; /* Subtle pink-tint background - hover rows, promo notices, form field focus */ --kck-color-red-wash-hover: #F5E5E3; /* Deeper red-wash for hover-on-wash */ /* Burgundy - brand color matching the KCK logo. Use for brand chrome, long-form editorial backgrounds, hero gradient treatments, and premium content pages. DO NOT use for CTAs - reads as passive/non-interactive and users won't recognize it as clickable. WCAG: 7.4:1 on white. */ --kck-color-burgundy: #991C1F; --kck-color-burgundy-deep: #7A1214; /* Mid stop in burgundy gradient - not a fill */ --kck-color-burgundy-dark: #5A0D0E; /* Outer stop in burgundy gradient - not a fill */ /* Gold accent - narrow editorial accent. Lives in the logo crown and can appear sparingly in brand moments (premium badges, "Featured" tags, editorial highlights). Don't use for CTAs - yellow reads as caution, not action - and don't use --kck-color-gold for body text on white (contrast fails; use gold-deep instead). */ --kck-color-gold: #E2CE1F; /* Editorial accent on dark/burgundy */ --kck-color-gold-deep: #C0AD18; /* WCAG-safe variant for gold on white */ --kck-color-gold-wash: #FDF8D6; /* Premium badge background */ /* Star gold - informational star ratings only. NEW 2026-09-01. Contrast on white: brand gold 1.61:1, gold-deep 2.27:1, this 3.68:1. WCAG 1.4.11 wants 3:1 for any graphic that carries information on its own, and no yellow at brand gold's lightness gets there - you have to come down to roughly 34% lightness, which is where the olive cast starts. #A87F0A is the point where it clears 3:1 and still reads amber (hue 44 deg) rather than olive. Which one to use: - --kck-color-gold DECORATIVE stars. The rating is also written out in text beside them and the SVG is aria-hidden. Hero rating blocks are this case. - --kck-color-gold-star INFORMATIONAL stars. The star count is the only visual carrier of the rating. Review cards are this case. */ --kck-color-gold-star: #A87F0A; /* Houzz brand green - third-party badge/logo lockups only. Not a system color; do not use it for UI state. */ --kck-color-houzz-green: #4DBC15; /* ========================================================================== COLOR - NEUTRALS Warm gray scale with a slight brown undertone. Pure neutral grays feel flat next to cream, burgundy, and the wood tones in cabinet photography; the brown undertones create visual harmony. Avoid cool grays (#888, #CCC) - they fight the palette. ========================================================================== */ --kck-color-near-black: #1A1814; /* Warm off-black for rare maximum-contrast use. Brown-tinted to stay in-system; do NOT use pure #000 - it reads cold next to cream and burgundy. */ --kck-color-ink: #38342E; /* Editorial headings, product titles */ --kck-color-charcoal: #544F4A; /* Body text, primary dark (default) */ --kck-color-mid: #7A736D; /* Secondary text, captions, metadata */ --kck-color-mid-aa: #6E675F; /* Stronger secondary text for AA-sensitive UI 5.57:1 on white */ --kck-color-mid-aaa: #5F5952; /* 6.91:1 on white */ --kck-color-muted: #A3A3A3; /* Tertiary text, hints, disabled */ --kck-color-line: #E0DBD6; /* Borders, dividers */ --kck-color-surface: #F4EFE8; /* Subtle surface backgrounds - hover states, input fields, code blocks, zebra rows. Warm beige (not cool gray) to stay consistent with cream and burgundy. */ /* ========================================================================== COLOR - BACKGROUNDS Page-level background substrates. Pure white is the default; cream is for intentional warm zones, never as a page default. ========================================================================== */ --kck-color-bg: #FFFFFF; /* Default page background. Pure white - the substrate of the site, lets product photography and CTAs do the talking. */ --kck-color-bg-cream: #FBF8F3; /* Warm cream for intentional accent zones - editorial cards, TOC blocks, table zebra rows, hover warm-ups. NOT a page default; reach for it when you want warmth without breaking the white substrate. */ --kck-color-white: #FFFFFF; --kck-color-foot-bg: #F4F3EF; /* Footer background. NEW 2026-09-01. */ /* ========================================================================== COLOR - ACCENTS ========================================================================== */ --kck-color-cream: #F9F2E6; /* Warm accent background - section breaks, circular bg behind imagery, editorial blocks */ /* ========================================================================== COLOR - SEMANTIC Use for system states (success, warning, error, info), NOT brand accents. Each has a solid value (for icons, borders, text), a wash variant (for backgrounds of notices, alerts, badges), and an on-wash variant (darker text shade for prose sitting on the wash). Never put solid semantic color text on its own wash background - contrast fails. Always pair with the on-wash variant. ========================================================================== */ /* Success - confirmations, completed states, positive deltas */ --kck-color-success: #15803D; /* WCAG 6.8:1 on white */ --kck-color-success-wash: #DCFCE7; --kck-color-success-on-wash: #14532D; /* Text on success-wash background */ /* Warning - cautions, pending states, attention required. Used for shipping restrictions, geographic limitations, time-sensitive notices that are informational-with-a-constraint (not errors). */ --kck-color-warning: #B45309; /* WCAG 5.9:1 on white */ --kck-color-warning-wash: #FEF3C7; --kck-color-warning-on-wash: #713F12; /* Error - form validation errors, failed states, negative deltas. Deliberately distinct from brand red (#D9201E) so error states don't blur into CTAs. Same color for both would make every error feel like a call-to-action and every CTA feel like an error. */ --kck-color-error: #C41E3A; /* WCAG 5.3:1 on white */ --kck-color-error-wash: #FDE8E8; /* CHANGED 2026-09-01, was #FCE7EB */ --kck-color-error-on-wash: #7F1D2B; /* Info - informational messages, helpful context, neutral system states */ --kck-color-info: #1E5262; /* WCAG 8.4:1 on white */ --kck-color-info-wash: #E9EEEF; --kck-color-info-on-wash: #0F2A35; /* ========================================================================== COLOR - ON-BURGUNDY TEXT For use on the burgundy gradient hero treatment. White at full opacity for primary text; reduced opacity for hierarchy; warm pink for eyebrows and featured stat numbers. ========================================================================== */ --kck-color-on-burgundy: #FFFFFF; --kck-color-on-burgundy-secondary: rgba(255, 255, 255, 0.85); --kck-color-on-burgundy-tertiary: rgba(255, 255, 255, 0.65); --kck-color-on-burgundy-accent: #FFB3B3; /* Warm pink - eyebrows, stats */ /* ========================================================================== TYPOGRAPHY - FONT FAMILIES Always reference via these tokens. Never declare font-family inline with string literals. System-font fallbacks ensure graceful degradation if Google Fonts fails to load. ========================================================================== */ --kck-font-heading: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --kck-font-body: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --kck-font-display: 'Playfair Display', Georgia, serif; --kck-font-mono: 'SF Mono', Menlo, Monaco, Consolas, 'Courier New', monospace; /* Button text uses --kck-font-heading (Montserrat) - geometric sans reads more confidently in uppercase at button sizes than humanist Nunito. */ /* ========================================================================== TYPOGRAPHY - SIZE SCALE REBUILT 2026-09-01. See the REVISION LOG for the old values. Fluid clamp-based, one ladder, monotonic end to end. Desktop steps run 16 - 18 - 20 - 24 - 30 - 36 - 46 - 58 - 72, ratios 1.13 / 1.11 / 1.20 / 1.25 / 1.20 / 1.28 / 1.26 / 1.24. Tight at the bottom where text is dense, wider through display where type is a statement. These are not new numbers. They are what /guides/*, /promotions and the cart footer were already shipping in their own scoped blocks. This file is catching up to the pages so those blocks can be deleted. Do NOT map a token to an HTML tag. Tag comes from document structure; size comes from page archetype. Use the ROLE TOKENS below. ========================================================================== */ /* Body and UI */ --kck-font-size-xs: 12px; /* legal, metadata, eyebrows */ --kck-font-size-sm: 14px; /* captions, labels, table cells, product card titles */ --kck-font-size-base: 16px; /* body copy */ --kck-font-size-lg: 18px; /* lead paragraph, intro */ /* Headings */ --kck-font-size-2xl: clamp(18px, 2vw, 20px); --kck-font-size-3xl: clamp(20px, 2.4vw, 24px); --kck-font-size-4xl: clamp(24px, 3vw, 30px); --kck-font-size-5xl: clamp(28px, 3.6vw, 36px); /* Display - marketing and campaign pages only. Never automatic, never on a content page. Opt in per element. */ --kck-font-size-6xl: clamp(32px, 4.6vw, 46px); /* secondary hero, big stat */ --kck-font-size-7xl: clamp(36px, 5.8vw, 58px); /* hero offer - "15% off" */ --kck-font-size-8xl: clamp(44px, 7.2vw, 72px); /* campaign headline */ /* DEPRECATED. --kck-font-size-xl was 22px, which sat ABOVE 2xl at 20px and inverted the ladder. Nothing on the site referenced it. It now resolves to 2xl so any stray reference keeps working. Do not write new ones; delete this line once you are sure nothing uses it. */ --kck-font-size-xl: var(--kck-font-size-2xl); /* ========================================================================== HEADING SIZES - REFERENCE, NOT SHIPPING ========================================================================== Guidance for choosing a size by hand. Nothing here is a token; this block declares nothing and cannot affect any page. It is written down so the decision does not get re-made by eye on every new page. A product title and an article title are both

for document structure and SEO, but they are not the same size. Tag comes from structure; size comes from what kind of page it is. CONTENT PAGES - guides, category, promotions, landing pages, homepage h1 var(--kck-font-size-5xl) 28 - 36 h2 var(--kck-font-size-4xl) 24 - 30 h3 var(--kck-font-size-3xl) 20 - 24 h4 var(--kck-font-size-2xl) 18 - 20 h5 var(--kck-font-size-lg) 18 h6 var(--kck-font-size-sm) 14, uppercase, --kck-tracking-wide TRANSACTIONAL PAGES - product, cart, checkout, quick order, account One rung down the same ladder. Nothing new, just start lower. h1 var(--kck-font-size-4xl) 24 - 30 h2 var(--kck-font-size-3xl) 20 - 24 h3 var(--kck-font-size-2xl) 18 - 20 h4 var(--kck-font-size-lg) 18 Magento already stamps the page type on if you ever want to wire this up automatically rather than per page. The real class names, read off the live site 2026-09-01: catalog-product-view product + assembled product checkout-cart-index cart amquickorder-index-index quick order form DISPLAY SIZES - 6xl / 7xl / 8xl Marketing and campaign pages only, opt in per element, never on a content page and never on a heading just because it is an h1. If the giant number IS the page's headline, make it the h1 and give it the display size there. ========================================================================== */ /* ========================================================================== TYPOGRAPHY - LINE HEIGHTS ========================================================================== */ --kck-leading-tight: 1.2; /* H1, H2 */ --kck-leading-snug: 1.4; /* H3-H6, buttons, eyebrows */ --kck-leading-normal: 1.65; /* body text, captions, all else */ /* ========================================================================== TYPOGRAPHY - LETTER-SPACING (TRACKING) Only for uppercase text. Lowercase/sentence-case uses default (0). ========================================================================== */ --kck-tracking-wide: 0.08em; /* buttons, small caps labels, nav */ --kck-tracking-wider: 0.14em; /* eyebrows, section labels, metadata */ /* ========================================================================== SPACING 4px base unit. Scale covers realistic layout needs without proliferation. This is THE spacing scale. --doc-space-* now aliases to it (see ALIAS LAYER) - previously both existed with duplicate hardcoded values. ========================================================================== */ --kck-space-1: 4px; --kck-space-2: 8px; --kck-space-3: 12px; --kck-space-4: 16px; --kck-space-5: 20px; --kck-space-6: 24px; --kck-space-8: 32px; --kck-space-10: 40px; --kck-space-12: 48px; --kck-space-16: 64px; --kck-space-20: 80px; --kck-space-24: 96px; --kck-space-32: 128px; /* ========================================================================== LAYOUT - CONTAINER WIDTHS Four canonical max-widths plus a content-reading measure. ========================================================================== */ --kck-container-xs: 720px; /* NEW 2026-09-01. Reading content: articles, blog posts, FAQ, legal. The brand contract calls this the most common page archetype and it was the one width not shipping. */ --kck-container-sm: 860px; /* long-form editorial, wide FAQ */ --kck-container-md: 1200px; /* standard page content, product grids */ --kck-container-lg: 1440px; /* full-bleed hero treatments, wide layouts */ --kck-measure: 680px; /* reading measure for body prose */ /* Shell gutter (horizontal page padding). Pairs with container tokens. */ --kck-gutter-sm: 16px; /* mobile */ --kck-gutter-md: 24px; /* tablet */ --kck-gutter-lg: 32px; /* desktop */ /* Page end - space between the last content block and the footer. NEW 2026-09-01. Nothing reads these yet; they exist so the decision stops being made by eye on every new page. */ --kck-page-end-sm: 48px; /* mobile */ --kck-page-end-md: 64px; /* tablet */ --kck-page-end-lg: 80px; /* desktop */ /* Anchor offset. Clearance an in-page jump must leave so the pinned header bar does not cover the heading. Matches the height kck-header-2026.js writes into --header-height. Does nothing until a stylesheet sets html { scroll-padding-top: var(--kck-anchor-offset) }. Mobile step is in the media query below .kckhf-header-container. */ --kck-anchor-offset: 65px; /* ---------- the grid ---------- auto-fill, so the column count comes from available width and never from how many styles a term happens to have. 360 with a 48px gap holds three columns from 1280 up. Content maxes at 1382.4, so (1382.4 - 96) / 3 = 428.8px cards, matching the live shopping page. Above 378 it would drop to two columns at 1280, which is the kind of reversal at a boundary worth avoiding. */ --kck-grid-card-min: 360px; /* ========================================================================== LAYOUT - BREAKPOINTS Media queries use raw px values matching these. Tokens are for reference and for JS-side breakpoint awareness - CSS media queries cannot consume CSS custom properties directly. Canonical media query syntax: @media (max-width: 767px) { ... } @media (min-width: 768px) { ... } NO "screen and", NO "only screen and", NO "all and". ========================================================================== */ --kck-bp-sm: 480px; --kck-bp-md: 768px; --kck-bp-lg: 1024px; --kck-bp-xl: 1280px; --kck-bp-2xl: 1440px; /* ========================================================================== LAYOUT - BORDER RADIUS CHANGED 2026-09-01: sm/md/lg corrected to the brand contract. was 4 / 8 / 12, now 6 / 10 / 14. xl, pill and circle unchanged. ========================================================================== */ --kck-radius-sm: 6px; /* inputs, small badges, tags */ --kck-radius-md: 10px; /* buttons, cards, notices */ --kck-radius-lg: 14px; /* large cards, modals, featured containers */ --kck-radius-xl: 20px; /* hero-level containers, help boxes */ --kck-radius-pill: 999px; /* chips, tag buttons, search inputs */ --kck-radius-circle: 50%; /* avatars, icon backgrounds */ /* ========================================================================== MOTION Compound transition shorthands, plus the raw duration/easing primitives that styles-shop.css and promotions.css read separately. ========================================================================== */ --kck-transition-fast: 150ms ease; /* hover, micro */ --kck-transition-base: 250ms ease; /* state changes */ --kck-transition-slow: 400ms cubic-bezier(0.32, 0.72, 0, 1); /* panels, modals */ /* Raw primitives. Use these when you need duration and easing separately (staggered delays, keyframe animations, JS-driven timing). */ --kck-dur: 200ms; /* state changes - brand contract value */ --kck-dur-fast: 140ms; /* hover, micro */ --kck-ease: ease; /* ========================================================================== SHADOWS Four levels. Used sparingly - most UI should be flat with borders. CHANGED 2026-09-01: all four re-tinted from neutral black to the ink colour rgba(56, 52, 46, ...). Every ground in this system is warm (#FBF8F3, #F9F2E6, #F4EFE8) and a pure-black shadow on a warm ground goes slightly cool. Geometry is untouched - only the tint moved. At 6-12% alpha the difference is barely visible; it is taken for consistency. ========================================================================== */ --kck-shadow-sm: 0 1px 3px rgba(56, 52, 46, 0.06); --kck-shadow-md: 0 4px 14px rgba(56, 52, 46, 0.08); --kck-shadow-lg: 0 6px 20px rgba(56, 52, 46, 0.08); --kck-shadow-xl: 0 12px 32px rgba(56, 52, 46, 0.12); /* Flat colour for scroll-edge fade gradients. NEW 2026-09-01. This has to be a colour rather than a shadow because it lives in a background stack, e.g. linear-gradient(to right, transparent, var(--kck-shadow-edge)). */ --kck-shadow-edge: rgba(56, 52, 46, 0.2); /* Branded elevated-button shadow stack - reserved for hero CTAs on select landing pages only. Not for site-wide button use. */ --kck-shadow-button-elevated: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 1px 0 #8F1414, 0 2px 4px rgba(143, 20, 20, 0.25), 0 4px 8px rgba(15, 15, 20, 0.06); /* ========================================================================== STACKING - NOT SHIPPING YET ========================================================================== brand.css and the system contract on the same page contradict each other: brand.css says header 90 / mega 100 / drawer-panel 210, the contract says header 100 / mega 90 / drawer-panel 201. The live numbers were almost certainly chosen to sit clear of legacy filter and flyout layers, which is a better reason than either document. Left commented out deliberately. Uncomment with WHATEVER THE LIVE CODE ALREADY USES - not with either document's numbers - so future work stops hardcoding z-index values. Do not resolve this by picking a side on paper. --z-base: 1; --z-sticky-promo: 80; --z-sticky-header: 90; --z-mega-panel: 100; --z-dropdown: 110; --z-drawer-overlay: 200; --z-drawer-panel: 210; --z-modal-overlay: 300; --z-modal: 310; --z-toast: 400; --z-preview-pill: 500; ========================================================================== */ } /* ############################################################################ SECTION 2 - ALIAS LAYER ############################################################################ MIGRATION ARTIFACT. This block has an end date. No value is written here. Every line points at a canonical token in Section 1. Two things this buys: 1. Nothing breaks. Every page currently referencing a --doc-* token keeps working, untouched. 2. They can never drift again. There is one value underneath, so correcting --kck-radius-md corrects --doc-radius-md in the same edit. Landing pages were built against brand.css, which publishes the system in --doc-*. This file was built against the guidance prose on the same page, which publishes it in --kck-*. Both readings were honest. --kck-* wins. HOW THIS ENDS: as a page is rewritten to --kck-*, grep the codebase for the --doc-* name it stopped using. If nothing references it, delete the line. When this section is empty, the consolidation is done. DO NOT add to this section. New tokens go in Section 1 with a --kck- name. ############################################################################ */ .kckhf-header-container { /* --- Colour --------------------------------------------------------- */ --doc-red: var(--kck-color-red); --doc-red-hover: var(--kck-color-red-hover); --doc-red-active: var(--kck-color-red-active); --doc-red-wash: var(--kck-color-red-wash); --doc-red-wash-hover: var(--kck-color-red-wash-hover); --doc-burgundy: var(--kck-color-burgundy); --doc-burgundy-deep: var(--kck-color-burgundy-deep); --doc-burgundy-dark: var(--kck-color-burgundy-dark); --doc-gold: var(--kck-color-gold); --doc-gold-deep: var(--kck-color-gold-deep); --doc-gold-wash: var(--kck-color-gold-wash); --doc-houzz-green: var(--kck-color-houzz-green); --doc-ink: var(--kck-color-ink); --doc-charcoal: var(--kck-color-charcoal); --doc-mid: var(--kck-color-mid); --doc-mid-aa: var(--kck-color-mid-aa); --doc-mid-aaa: var(--kck-color-mid-aaa); --doc-muted: var(--kck-color-muted); --doc-line: var(--kck-color-line); --doc-surface: var(--kck-color-surface); --doc-bg: var(--kck-color-bg); --doc-bg-cream: var(--kck-color-bg-cream); --doc-cream-soft: var(--kck-color-bg-cream); --doc-white: var(--kck-color-white); --doc-cream: var(--kck-color-cream); --doc-foot-bg: var(--kck-color-foot-bg); --doc-success: var(--kck-color-success); --doc-success-wash: var(--kck-color-success-wash); --doc-warning: var(--kck-color-warning); --doc-warning-wash: var(--kck-color-warning-wash); --doc-error: var(--kck-color-error); --doc-error-wash: var(--kck-color-error-wash); --doc-info: var(--kck-color-info); --doc-info-wash: var(--kck-color-info-wash); /* --- Type ----------------------------------------------------------- */ --doc-font-heading: var(--kck-font-heading); --doc-font-body: var(--kck-font-body); --doc-font-display: var(--kck-font-display); --doc-font-mono: var(--kck-font-mono); /* --- Space ---------------------------------------------------------- */ /* These previously held a duplicate hardcoded copy of the 4px scale. Two copies of one scale, free to diverge. Now one scale. */ --doc-space-1: var(--kck-space-1); --doc-space-2: var(--kck-space-2); --doc-space-3: var(--kck-space-3); --doc-space-4: var(--kck-space-4); --doc-space-5: var(--kck-space-5); --doc-space-6: var(--kck-space-6); --doc-space-8: var(--kck-space-8); --doc-space-10: var(--kck-space-10); --doc-space-12: var(--kck-space-12); --doc-space-16: var(--kck-space-16); --doc-space-20: var(--kck-space-20); --doc-space-24: var(--kck-space-24); --doc-space-32: var(--kck-space-32); /* --- Corners -------------------------------------------------------- */ --doc-radius-sm: var(--kck-radius-sm); --doc-radius-md: var(--kck-radius-md); --doc-radius-lg: var(--kck-radius-lg); --doc-radius-xl: var(--kck-radius-xl); --doc-radius-pill: var(--kck-radius-pill); --doc-radius-circle: var(--kck-radius-circle); /* --- Elevation ------------------------------------------------------ */ --doc-shadow-sm: var(--kck-shadow-sm); --doc-shadow-md: var(--kck-shadow-md); /* --- Motion --------------------------------------------------------- */ --doc-dur: var(--kck-dur); --doc-dur-fast: var(--kck-dur-fast); --doc-ease: var(--kck-ease); --doc-transition: var(--kck-dur) var(--kck-ease); /* --- Legacy names from styles-25.css and 2024-kitchen-cabinet-kings-temp.css Same job, older naming convention. Same deletion rule applies. */ --c-red-hex: var(--kck-color-red); --c-red-decimal: 217, 32, 30; --c-darkred-hex: #991616; /* NOT --kck-color-burgundy (#991C1F). Left as its own value on purpose - this is a legacy red, repointing it would be a visual change. Audit separately. */ --c-charcoal: var(--kck-color-charcoal); --c-charcoal-decimal: 84, 79, 74; --c-beige-hex: var(--kck-color-cream); --ff-montserrat: var(--kck-font-heading); --ff-nunito-sans: var(--kck-font-body); --ff-play-fair: var(--kck-font-display); /* --c-lightgray removed - conflicted with the homepage. Do not restore. */ /* Shell width tokens stay disabled. Enabling them changes page width. --shell-max-width 1200px (was 1133px) --shell-gutter 42px (was 101px) --shell-gutter-tablet 26px (was 42px) --shell-gutter-mobile 16px (was 16px) --shell-gutter-large 72px (was 154px) */ /* --- From header.css --- */ --c-header-main: var(--kck-color-red); --c-header-secondary: #F6F6F6; /* No token equivalent. Header chrome only. */ --c-header-tertiary: var(--kck-color-charcoal); } /* The only token in this file that changes with viewport width. Media queries cannot read custom properties, so 1023 is written as a literal matching --kck-bp-lg. */ @media (max-width: 1023px) { .kckhf-header-container { --kck-anchor-offset: 57px; } }