/* ============================================================ Kernal Kush — Theme Tokens Two switchable palettes built around the Kernal mascot (olive-green body, espresso-brown limbs, cream highlights). USAGE ----- 1. Link this file in the of EVERY page: 2. Pick the active palette by setting an attribute on : (default — olive + kraft) (toasted popcorn — cream + espresso + gold) Or let theme-switch.js manage it from localStorage. 3. Reference tokens anywhere instead of raw hex: background: var(--kk-bg); color: var(--kk-text); background: var(--kk-cta); color: var(--kk-cta-text); The rgb-triplet tokens are meant for rgba(): box-shadow: 0 0 40px rgba(var(--kk-glow-1), .3); Switching data-theme re-themes the whole page instantly — no per-page color edits needed once everything uses the tokens. ============================================================ */ /* ---------- CLASSIC : Olive + Kraft (default) ---------- */ :root, [data-theme="classic"] { --kk-bg: #e9e1d0; /* page background (kraft) */ --kk-surface: #f4eee0; /* cards / panels (cream) */ --kk-surface-hover: #eae2cf; /* hovered surface */ --kk-ink: #23271c; /* darkest — header, footer, H1s */ --kk-ink-2: #1d2114; /* nav link text, icon buttons */ --kk-text: #2a2820; /* body text */ --kk-text-muted: #6f6852; /* secondary text */ --kk-text-soft: #5c5640; /* large paragraph text */ --kk-label: #7a7158; /* form labels */ --kk-meta: #9a9075; /* product meta / eyebrow on card */ --kk-on-dark-muted: #8a9270; /* muted text on dark bg */ --kk-on-dark: #cdd6ac; /* light text on dark ribbon/nav */ --kk-on-dark-2: #cbd2b4; /* light paragraph on dark band */ --kk-nav: #94a455; /* nav bar background (olive) */ --kk-accent: #7a8a44; /* primary accent (eyebrows, H2) */ --kk-accent-bright: #aebf5a; /* bright accent (links, dots) */ --kk-accent-gold: #9a7d3a; /* AAA grade tag */ --kk-accent-clay: #c4663a; /* concentrate / FECO tag */ --kk-cta: #edc04e; /* call-to-action background */ --kk-cta-text: #241f10; /* text on CTA */ --kk-border: #ddd2ba; /* default card border */ --kk-border-soft: #d9cfb8; /* input borders */ --kk-border-strong: #c9bfa6; /* stronger outline */ --kk-divider: #4a5040; /* divider on dark ribbon */ --kk-footer-border: #383d2c; /* footer hairline */ /* smoky product / hero panel gradient stops */ --kk-panel-1: #33402a; --kk-panel-2: #1b2314; --kk-panel-3: #2f3b26; --kk-panel-4: #1a2113; /* rgb triplets — use inside rgba(var(--token), alpha) */ --kk-glow-1: 174,191,90; /* olive smoke glow */ --kk-glow-2: 120,150,90; /* deep smoke glow */ --kk-puff-1: 212,222,182; /* drifting smoke puffs */ --kk-puff-2: 192,206,150; --kk-puff-3: 222,230,196; --kk-puff-4: 202,214,166; --kk-overlay: 28,33,22; /* age-gate dim overlay */ } /* ---------- TOASTED POPCORN : Cream + Espresso + Gold ---------- */ [data-theme="toasted"] { --kk-bg: #f1e7d0; --kk-surface: #f7efda; --kk-surface-hover: #efe5d0; --kk-ink: #2a2113; --kk-ink-2: #241c0f; --kk-text: #2e2417; --kk-text-muted: #7c7058; --kk-text-soft: #695d42; --kk-label: #877a5e; --kk-meta: #a89a7a; --kk-on-dark-muted: #9a8f6e; --kk-on-dark: #ded3a6; --kk-on-dark-2: #ddd2a6; --kk-nav: #9aa257; --kk-accent: #8c7c34; --kk-accent-bright: #c2a24a; --kk-accent-gold: #b07d2e; --kk-accent-clay: #c4663a; --kk-cta: #e8b94a; --kk-cta-text: #2a2012; --kk-border: #e4d7b6; --kk-border-soft: #e2d5b6; --kk-border-strong: #d8c8a6; --kk-divider: #574b38; --kk-footer-border: #41382a; --kk-panel-1: #3a3220; --kk-panel-2: #1d1509; --kk-panel-3: #352c19; --kk-panel-4: #1c1409; --kk-glow-1: 200,168,86; --kk-glow-2: 158,134,78; --kk-puff-1: 228,214,170; --kk-puff-2: 216,198,140; --kk-puff-3: 232,220,180; --kk-puff-4: 222,206,160; --kk-overlay: 30,23,13; } /* ============================================================ Product Card Enhancement Styles (June 2026 Competitive Update) Sale badge, grade chip, strain-type chip, THC/CBD chips, per-gram price, inline weight selector, price row ============================================================ */ /* ── Sale badge — overlaid on product image ── */ .kk-sale-badge { position: absolute; top: 10px; left: 10px; background: #c0392b; color: #fff; font-family: 'Anton', sans-serif; font-size: .72rem; letter-spacing: .05em; padding: 4px 9px; border-radius: 4px; z-index: 3; pointer-events: none; text-transform: uppercase; } /* ── Card image wrapper needs relative positioning ── */ .card-img-wrap, .ott-img-wrap { position: relative; display: block; overflow: hidden; } /* ── Chips row (grade + strain type) ── */ .kk-card-chips { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 4px; } /* Grade chip */ .kk-grade-chip { display: inline-block; padding: 2px 7px; border-radius: 10px; font-size: .65rem; font-weight: 700; letter-spacing: .04em; background: var(--kk-cta); color: var(--kk-cta-text); text-transform: uppercase; } /* Strain-type chip */ .kk-type-chip { display: inline-block; padding: 2px 7px; border-radius: 10px; font-size: .65rem; font-weight: 700; letter-spacing: .04em; color: #fff; text-transform: uppercase; } /* ── THC / CBD chips row ── */ .kk-thc-row { display: flex; gap: 5px; flex-wrap: wrap; margin: 4px 0; } .kk-thc-chip, .kk-cbd-chip { display: inline-block; padding: 2px 6px; border-radius: 8px; font-size: .63rem; font-weight: 600; letter-spacing: .03em; } .kk-thc-chip { background: rgba(58,107,58,.13); color: #2a5a2a; } .kk-cbd-chip { background: rgba(60,90,150,.12); color: #2a4a80; } /* ── Price row: sale/regular price + per-gram ── */ .kk-card-price-row { display: flex; align-items: baseline; gap: 8px; margin: 6px 0 8px; flex-wrap: wrap; } .kk-orig-price { color: var(--kk-text-muted); font-size: .85em; font-weight: 400; text-decoration: line-through; } .kk-sale-price { color: #c0392b; font-weight: 700; } .kk-per-gram { font-size: .7rem; color: var(--kk-text-muted); font-weight: 500; white-space: nowrap; } /* ── Card name link (no underline, inherits colour) ── */ .card-name-link { text-decoration: none; color: inherit; display: block; } .card-name-link h3 { margin: 2px 0 4px; } .card-name-link:hover h3 { color: var(--kk-accent); } /* ── ott-card chip additions (popcorn + concentrate pages) ── */ .ott-chips { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 4px; } .ott-per-gram { font-size: .7rem; color: var(--kk-text-muted); font-weight: 500; margin: -2px 0 4px; }