/* ============================================================ Kernal Kush — Site Designs (full-layout themes) ------------------------------------------------------------ One file, three switchable storefront looks. The admin picks the active design in Website Control; theme-switch.js writes it to on every page. 'classic' = the original site (NO rules here touch it). A / B / C are the redesign directions from "Kernalkush website redesign". A · Editorial Boutique — serif + cream, magazine grid B · Warm Minimal — one clean sans, centered, pill CTAs C · Artisanal Label — kraft tones, mono lot numbers, panels IMPORTANT — these only ever RE-SKIN the existing markup. Every link, the cart, products, checkout and account flows are the same DOM; we only change appearance. All selectors are prefixed with html[data-design="X"] so they out-specify the base stylesheet and are inert unless that design is live. Fonts are @imported here, so their files only download when a design that uses them is active. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Hanken+Grotesk:wght@400;500;600;700;800&family=Schibsted+Grotesk:wght@400;500;600;700;800&family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,700;12..96,800&family=DM+Mono:wght@400;500&display=swap'); /* ============================================================ SHARED — applies to all three redesign directions (not classic) ============================================================ */ /* The classic hero uses an olive smoke effect tuned to that palette. The redesigns keep the mascot but drop the smoke so the panel reads as a clean product frame. */ html[data-design="A"] .smoke-puff, html[data-design="B"] .smoke-puff, html[data-design="C"] .smoke-puff, html[data-design="A"] .hero-shadow, html[data-design="B"] .hero-shadow, html[data-design="C"] .hero-shadow { display: none !important; } /* Smooth the palette/layout swap when the live design loads in. */ html[data-design="A"] body, html[data-design="B"] body, html[data-design="C"] body { transition: background-color .25s ease, color .25s ease; } /* ============================================================ DIRECTION A · EDITORIAL BOUTIQUE High-contrast serif (Cormorant) on warm cream, magazine grid, gold accents, espresso footer. Reads expensive & trustworthy. ============================================================ */ html[data-design="A"] { /* Whole-site recolor: remap the shared palette tokens that the kk-layout.js header/footer (inline var(--kk-*)) and every kernalkush.css / account.css / checkout.css rule consume — so EVERY page adopts the design, not just home. */ --kk-bg: #FAF4E6; --kk-surface: #F3E9CF; --kk-surface-hover: #ECE0C4; --kk-ink: #241C14; --kk-ink-2: #3A2E1F; --kk-text: #5A4A37; --kk-text-muted: #7A6A52; --kk-text-soft: #5A4A37; --kk-label: #7A6A52; --kk-meta: #9A7B3E; --kk-on-dark: #E7DCC4; --kk-on-dark-2: #E7DCC4; --kk-on-dark-muted: #9A8A6A; --kk-nav: #FAF4E6; --kk-accent: #9A7B3E; --kk-accent-bright: #9A7B3E; --kk-accent-gold: #9A7B3E; --kk-accent-clay: #B5673A; --kk-cta: #241C14; --kk-cta-text: #FAF4E6; --kk-border: #E0D4BA; --kk-border-soft: #E0D4BA; --kk-border-strong: #CFC2A6; --kk-divider: #D8CDB4; --kk-footer-border: #3A3328; /* dark gradient panels (.page-hero, .card-img-wrap, #contact) — were olive-green */ --kk-panel-1: #3A2E1F; --kk-panel-2: #241C14; --kk-panel-3: #2F2519; --kk-panel-4: #1F1810; --kk-glow-1: 154,123,62; --kk-glow-2: 120,95,50; --dA-bg: #FAF4E6; /* page */ --dA-surface: #ECE0C4; /* photo frames / panels */ --dA-ink: #241C14; /* headings, dark UI */ --dA-text: #5A4A37; /* body copy */ --dA-muted: #7A6A52; /* secondary copy */ --dA-gold: #9A7B3E; /* eyebrows / accent */ --dA-line: rgba(40,30,20,.14); --dA-foot-bg: #241C14; --dA-foot-tx: #E7DCC4; --dA-foot-mut: #8A7B5E; --serifA: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --sansA: 'Hanken Grotesk', system-ui, -apple-system, sans-serif; } html[data-design="A"] body { background: var(--dA-bg); color: var(--dA-text); font-family: var(--sansA); } /* ── Announcement / top row ── */ html[data-design="A"] .toprow { background: #F3E9CF; color: #8A7350; font-family: var(--sansA); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; font-size: 11px; border-bottom: 1px solid var(--dA-line); } html[data-design="A"] .toprow a { color: #8A7350; } html[data-design="A"] .toprow-dot { background: var(--dA-gold); } /* ── Header / nav ── */ html[data-design="A"] .site-header { background: var(--dA-bg); border-bottom: 1px solid var(--dA-line); box-shadow: none; } html[data-design="A"] .main-nav { background: transparent; } html[data-design="A"] .logo-text { font-family: var(--sansA); font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--dA-ink); line-height: 1.05; } html[data-design="A"] .logo-text span { color: var(--dA-gold); } html[data-design="A"] .main-nav a { font-family: var(--sansA); font-weight: 500; letter-spacing: .03em; text-transform: none; color: var(--dA-text); background: transparent; } html[data-design="A"] .main-nav a.active, html[data-design="A"] .main-nav a:hover { color: var(--dA-ink); } html[data-design="A"] .cart-pill, html[data-design="A"] .nav-btn { background: transparent; color: var(--dA-ink); border: 1px solid var(--dA-line); } /* ── Hero (magazine 2-column) ── */ html[data-design="A"] .hero-grid { background: var(--dA-bg); align-items: center; } html[data-design="A"] .hero-eyebrow { font-family: var(--sansA); font-weight: 600; letter-spacing: .24em; text-transform: uppercase; font-size: .78rem; color: var(--dA-gold); } html[data-design="A"] .hero-h1 { font-family: var(--serifA); font-weight: 500; font-size: clamp(40px, 6vw, 66px); line-height: 1.02; letter-spacing: -.005em; color: var(--dA-ink); text-transform: none; } html[data-design="A"] .hero-h1 span { color: var(--dA-ink); -webkit-text-fill-color: currentColor; } html[data-design="A"] .hero-p { font-family: var(--sansA); font-size: 17px; line-height: 1.62; color: var(--dA-text); } /* CTAs become thin editorial underline-links */ html[data-design="A"] .hero-btns .btn-cta, html[data-design="A"] .hero-btns .btn-outline { background: transparent; color: var(--dA-ink); border: none; border-bottom: 1.5px solid var(--dA-ink); border-radius: 0; padding: 0 0 5px; font-family: var(--sansA); font-weight: 600; letter-spacing: .04em; box-shadow: none; } html[data-design="A"] .hero-btns .btn-outline { color: var(--dA-gold); border-bottom-color: rgba(154,123,62,.5); } html[data-design="A"] .hero-mascot-panel { background: var(--dA-surface); border: 1px solid var(--dA-line); border-radius: 0; box-shadow: none; } html[data-design="A"] .hero-panel-label { font-family: var(--sansA); letter-spacing: .2em; text-transform: uppercase; color: rgba(40,30,20,.45); font-size: 11px; } html[data-design="A"] .hero-hi-badge { background: var(--dA-ink); color: var(--dA-foot-tx); font-family: var(--serifA); font-style: italic; border-radius: 0; } /* ── Editorial value strip (was the ship banner) ── */ html[data-design="A"] .ship-banner { background: transparent; } html[data-design="A"] .ship-banner-inner { background: transparent; border-top: 1px solid var(--dA-line); border-bottom: 1px solid var(--dA-line); border-radius: 0; box-shadow: none; } html[data-design="A"] .ship-text { font-family: var(--serifA); font-weight: 500; color: var(--dA-ink); } html[data-design="A"] .ship-sub { font-family: var(--sansA); color: var(--dA-muted); } /* ── Section header ── */ html[data-design="A"] .section-eyebrow { font-family: var(--sansA); font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--dA-gold); } html[data-design="A"] .section-h2 { font-family: var(--serifA); font-weight: 500; font-size: clamp(32px, 5vw, 42px); color: var(--dA-ink); text-transform: none; } /* ── Product cards (home .card + category .ott-card) ── */ html[data-design="A"] .card, html[data-design="A"] .ott-card { background: var(--dA-bg); border: none; border-radius: 0; box-shadow: none; } html[data-design="A"] .card-img-wrap, html[data-design="A"] .ott-img-wrap { background: var(--dA-surface); border: 1px solid var(--dA-line); border-radius: 0; } html[data-design="A"] .card-name-link h3, html[data-design="A"] .ott-name, html[data-design="A"] .ott-name a { font-family: var(--serifA); font-weight: 500; font-size: 22px; color: var(--dA-ink); letter-spacing: 0; text-transform: none; } html[data-design="A"] .card-strain, html[data-design="A"] .ott-strain { font-family: var(--sansA); color: var(--dA-gold); text-transform: uppercase; letter-spacing: .1em; font-size: 11px; } html[data-design="A"] .price-disp { font-family: var(--sansA); font-weight: 600; color: var(--dA-ink); } html[data-design="A"] .per-gram, html[data-design="A"] .kk-per-gram, html[data-design="A"] .ott-per-gram { color: #9A8568; } html[data-design="A"] .size-btn { font-family: var(--sansA); border-radius: 0; border: 1px solid var(--dA-line); background: transparent; color: var(--dA-text); } html[data-design="A"] .size-btn.active { background: var(--dA-ink); color: var(--dA-bg); border-color: var(--dA-ink); } html[data-design="A"] .add-btn { font-family: var(--sansA); font-weight: 600; letter-spacing: .04em; background: var(--dA-ink); color: var(--dA-bg); border: none; border-radius: 0; } html[data-design="A"] .add-btn:hover { background: #3a2e1f; } html[data-design="A"] .kk-grade-chip { background: transparent; color: var(--dA-gold); border: 1px solid rgba(154,123,62,.5); border-radius: 0; } /* ── Newsletter band ── */ html[data-design="A"] #newsletter { background: var(--dA-surface); } html[data-design="A"] .newsletter-eyebrow { color: var(--dA-gold); font-family: var(--sansA); letter-spacing: .2em; text-transform: uppercase; } html[data-design="A"] .newsletter-h2 { font-family: var(--serifA); font-weight: 500; color: var(--dA-ink); } html[data-design="A"] .newsletter-p { font-family: var(--sansA); color: var(--dA-text); } html[data-design="A"] #newsletter .btn-cta { background: var(--dA-ink); color: var(--dA-foot-tx); border-radius: 0 !important; font-family: var(--sansA); } /* ── Contact ── */ html[data-design="A"] #contact { background: var(--dA-bg); } html[data-design="A"] #contact .eyebrow { color: var(--dA-gold); font-family: var(--sansA); letter-spacing: .2em; text-transform: uppercase; } html[data-design="A"] .contact-h2 { font-family: var(--serifA); font-weight: 500; color: var(--dA-ink); } html[data-design="A"] .contact-p { font-family: var(--sansA); color: var(--dA-text); } html[data-design="A"] .contact-form-box { background: var(--dA-surface); border: 1px solid var(--dA-line); border-radius: 0; } html[data-design="A"] .form-field input, html[data-design="A"] .form-field textarea { border-radius: 0; border: 1px solid var(--dA-line); background: var(--dA-bg); font-family: var(--sansA); } html[data-design="A"] #contact .btn-cta { background: var(--dA-ink); color: var(--dA-foot-tx); border-radius: 0 !important; } html[data-design="A"] .contact-sig-name { font-family: var(--serifA); color: var(--dA-ink); } /* ── Footer (espresso) ── */ html[data-design="A"] footer { background: var(--dA-foot-bg); color: var(--dA-foot-tx); } html[data-design="A"] .footer-logo { font-family: var(--sansA); font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--dA-foot-tx); } html[data-design="A"] .footer-logo span { color: var(--dA-foot-mut); } html[data-design="A"] .footer-tagline { color: var(--dA-foot-mut); font-family: var(--sansA); } html[data-design="A"] .footer-col-head { font-family: var(--sansA); letter-spacing: .18em; text-transform: uppercase; color: var(--dA-foot-mut); } html[data-design="A"] .footer-col a { color: #C9BC9F; font-family: var(--sansA); } html[data-design="A"] .footer-col a:hover { color: var(--dA-foot-tx); } html[data-design="A"] .footer-col a.bright { color: var(--dA-foot-tx); } html[data-design="A"] .footer-bottom { color: var(--dA-foot-mut); border-top: 1px solid rgba(231,220,196,.16); font-family: var(--sansA); } /* ============================================================ DIRECTION B · WARM MINIMAL One clean sans (Schibsted Grotesk), centered hero, soft rounded product cards, friendly pill CTAs. Calm, modern, built to convert. ============================================================ */ html[data-design="B"] { /* Whole-site recolor — remap shared palette tokens (see Direction A note). */ --kk-bg: #FFFDF7; --kk-surface: #F4ECD8; --kk-surface-hover: #EFE5D0; --kk-ink: #1A1712; --kk-ink-2: #1A1712; --kk-text: #4A4034; --kk-text-muted: #6A5E4C; --kk-text-soft: #4A4034; --kk-label: #6A5E4C; --kk-meta: #9A8568; --kk-on-dark: #EDE4D0; --kk-on-dark-2: #EDE4D0; --kk-on-dark-muted: #A99E84; --kk-nav: #FFFDF7; --kk-accent: #9A7B3E; --kk-accent-bright: #E0A52E; --kk-accent-gold: #9A7B3E; --kk-accent-clay: #C4663A; --kk-cta: #1A1712; --kk-cta-text: #FFF7E6; --kk-border: #E8DDC6; --kk-border-soft: #E8DDC6; --kk-border-strong: #DCD0B6; --kk-divider: #E2D7BE; --kk-footer-border: #2A2620; --kk-panel-1: #2A2620; --kk-panel-2: #1A1712; --kk-panel-3: #241F1A; --kk-panel-4: #15120E; --kk-glow-1: 224,165,46; --kk-glow-2: 154,123,62; --dB-bg: #FFFDF7; /* page */ --dB-band: #F8F1E0; /* product band */ --dB-surface: #F4ECD8; /* image frames */ --dB-card: #ffffff; /* product card */ --dB-ink: #1A1712; /* dark UI / buttons */ --dB-text: #4A4034; /* nav / strong copy */ --dB-muted: #6A5E4C; /* body copy */ --dB-gold: #9A7B3E; --dB-gold-br: #E0A52E; /* bright eyebrow gold */ --dB-line: rgba(26,23,18,.12); --dB-cream: #FFF7E6; /* text on dark pills */ --sansB: 'Schibsted Grotesk', system-ui, -apple-system, sans-serif; } html[data-design="B"] body { background: var(--dB-bg); color: var(--dB-muted); font-family: var(--sansB); } html[data-design="B"] .hero-h1, html[data-design="B"] .hero-p, html[data-design="B"] .section-h2, html[data-design="B"] .newsletter-h2, html[data-design="B"] .contact-h2, html[data-design="B"] .main-nav a, html[data-design="B"] .logo-text, html[data-design="B"] .footer-logo, html[data-design="B"] .card-name-link h3, html[data-design="B"] .ott-name { font-family: var(--sansB); } /* ── Top row ── */ html[data-design="B"] .toprow { background: #FBF4E1; color: var(--dB-gold); letter-spacing: .1em; font-weight: 500; font-size: 11px; border-bottom: none; } html[data-design="B"] .toprow a { color: var(--dB-gold); } html[data-design="B"] .toprow-dot { background: var(--dB-gold-br); } /* ── Header ── */ html[data-design="B"] .site-header { background: var(--dB-bg); border-bottom: none; box-shadow: none; } html[data-design="B"] .main-nav { background: transparent; } html[data-design="B"] .logo-text { font-weight: 800; letter-spacing: -.02em; text-transform: none; color: var(--dB-ink); } html[data-design="B"] .logo-text span { color: var(--dB-ink); } html[data-design="B"] .main-nav a { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--dB-text); background: transparent; } html[data-design="B"] .main-nav a.active, html[data-design="B"] .main-nav a:hover { color: var(--dB-ink); } /* Cart becomes a dark pill */ html[data-design="B"] .cart-pill { background: var(--dB-ink); color: var(--dB-cream); border-radius: 999px; border: none; padding: 9px 18px; } html[data-design="B"] .nav-btn { background: transparent; color: var(--dB-ink); border: 1px solid var(--dB-line); border-radius: 999px; } /* ── Hero: centered, stacked ── */ html[data-design="B"] .hero-grid { display: block; text-align: center; background: var(--dB-bg); max-width: 880px; margin-inline: auto; } html[data-design="B"] .hero-text { margin-inline: auto; } html[data-design="B"] .hero-eyebrow { font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--dB-gold-br); } html[data-design="B"] .hero-h1 { font-weight: 800; font-size: clamp(40px, 7vw, 64px); line-height: 1.04; letter-spacing: -.03em; color: var(--dB-ink); text-transform: none; } html[data-design="B"] .hero-h1 span { color: var(--dB-ink); -webkit-text-fill-color: currentColor; } html[data-design="B"] .hero-p { font-size: 18px; line-height: 1.6; color: var(--dB-muted); margin-inline: auto; max-width: 46ch; } html[data-design="B"] .hero-btns { justify-content: center; } /* Pill CTAs */ html[data-design="B"] .hero-btns .btn-cta { background: var(--dB-ink); color: var(--dB-cream); border-radius: 999px; border: none; padding: 14px 28px; font-weight: 600; box-shadow: none; } html[data-design="B"] .hero-btns .btn-outline { background: transparent; color: var(--dB-ink); border: 1.5px solid rgba(26,23,18,.22); border-radius: 999px; padding: 14px 28px; font-weight: 600; } /* Mascot panel -> wide rounded hero banner under the text */ html[data-design="B"] .hero-mascot-panel { background: var(--dB-surface); border: none; border-radius: 24px; box-shadow: 0 30px 60px -40px rgba(40,28,12,.5); margin-top: 24px; } html[data-design="B"] .hero-hi-badge { background: var(--dB-ink); color: var(--dB-cream); border-radius: 999px; } html[data-design="B"] .hero-panel-label { color: rgba(40,30,20,.42); text-transform: uppercase; letter-spacing: .16em; } /* ── Value strip ── */ html[data-design="B"] .ship-banner { background: transparent; } html[data-design="B"] .ship-banner-inner { background: transparent; border-top: 1px solid var(--dB-line); border-bottom: 1px solid var(--dB-line); border-radius: 0; box-shadow: none; } html[data-design="B"] .ship-text { font-weight: 700; color: var(--dB-ink); } html[data-design="B"] .ship-sub { color: var(--dB-muted); } /* ── Products on a soft band ── */ html[data-design="B"] #shop { background: var(--dB-band); } html[data-design="B"] .section-eyebrow { color: var(--dB-gold); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; } html[data-design="B"] .section-h2 { font-weight: 800; letter-spacing: -.02em; color: var(--dB-ink); text-transform: none; } html[data-design="B"] .card, html[data-design="B"] .ott-card { background: var(--dB-card); border: 1px solid rgba(26,23,18,.06); border-radius: 20px; box-shadow: 0 1px 2px rgba(0,0,0,.03), 0 16px 36px -26px rgba(40,28,12,.45); overflow: hidden; } html[data-design="B"] .card-img-wrap, html[data-design="B"] .ott-img-wrap { background: var(--dB-surface); border-radius: 13px; border: none; } html[data-design="B"] .card-name-link h3, html[data-design="B"] .ott-name, html[data-design="B"] .ott-name a { font-weight: 700; font-size: 16px; color: var(--dB-ink); text-transform: none; letter-spacing: 0; } html[data-design="B"] .card-strain, html[data-design="B"] .ott-strain { color: #9A8568; font-weight: 500; text-transform: none; letter-spacing: 0; } html[data-design="B"] .price-disp { font-weight: 700; color: var(--dB-ink); } html[data-design="B"] .size-btn { border-radius: 999px; border: 1px solid var(--dB-line); background: transparent; color: var(--dB-text); } html[data-design="B"] .size-btn.active { background: var(--dB-ink); color: var(--dB-cream); border-color: var(--dB-ink); } /* Round "+" add button */ html[data-design="B"] .add-btn { background: var(--dB-ink); color: var(--dB-cream); border: none; border-radius: 999px; font-weight: 600; } html[data-design="B"] .add-btn:hover { background: #000; } html[data-design="B"] .kk-grade-chip { background: var(--dB-ink); color: var(--dB-cream); border-radius: 999px; } /* ── Newsletter ── */ html[data-design="B"] #newsletter { background: var(--dB-bg); } html[data-design="B"] .newsletter-eyebrow { color: var(--dB-gold); letter-spacing: .16em; text-transform: uppercase; } html[data-design="B"] .newsletter-h2 { font-weight: 800; letter-spacing: -.02em; color: var(--dB-ink); } html[data-design="B"] .newsletter-p { color: var(--dB-muted); } html[data-design="B"] #newsletter .btn-cta { background: var(--dB-ink); color: var(--dB-cream); border-radius: 999px !important; } html[data-design="B"] .newsletter-field input { border-radius: 999px; border: 1px solid var(--dB-line); } /* ── Contact ── */ html[data-design="B"] #contact { background: var(--dB-band); } html[data-design="B"] #contact .eyebrow { color: var(--dB-gold); letter-spacing: .16em; text-transform: uppercase; } html[data-design="B"] .contact-h2 { font-weight: 800; letter-spacing: -.02em; color: var(--dB-ink); } html[data-design="B"] .contact-p { color: var(--dB-muted); } html[data-design="B"] .contact-form-box { background: var(--dB-card); border: 1px solid var(--dB-line); border-radius: 20px; box-shadow: 0 16px 36px -26px rgba(40,28,12,.45); } html[data-design="B"] .form-field input, html[data-design="B"] .form-field textarea { border-radius: 12px; border: 1px solid var(--dB-line); background: var(--dB-bg); } html[data-design="B"] #contact .btn-cta { background: var(--dB-ink); color: var(--dB-cream); border-radius: 999px !important; } /* ── Footer (light) ── */ html[data-design="B"] footer { background: var(--dB-bg); color: var(--dB-text); border-top: 1px solid var(--dB-line); } html[data-design="B"] .footer-logo { font-weight: 800; letter-spacing: -.02em; text-transform: none; color: var(--dB-ink); } html[data-design="B"] .footer-logo span { color: #9A8568; } html[data-design="B"] .footer-tagline { color: #9A8568; } html[data-design="B"] .footer-col-head { color: #9A8568; letter-spacing: .16em; text-transform: uppercase; } html[data-design="B"] .footer-col a { color: var(--dB-text); } html[data-design="B"] .footer-col a:hover { color: var(--dB-ink); } html[data-design="B"] .footer-col a.bright { color: var(--dB-gold); } html[data-design="B"] .footer-bottom { color: #9A8568; border-top: 1px solid var(--dB-line); } /* ============================================================ DIRECTION C · ARTISANAL LABEL Kraft tones, mono lot numbers, stamped emblem, bordered panels. Treats popcorn like a premium pantry good — tactile, characterful. ============================================================ */ html[data-design="C"] { /* Whole-site recolor — remap shared palette tokens (see Direction A note). */ --kk-bg: #EFE2C9; --kk-surface: #F6EDD7; --kk-surface-hover: #ECE0C2; --kk-ink: #221A12; --kk-ink-2: #3A2E1D; --kk-text: #5A4A30; --kk-text-muted: #7A6440; --kk-text-soft: #5A4A30; --kk-label: #7A6440; --kk-meta: #8A6F3E; --kk-on-dark: #E9DBBE; --kk-on-dark-2: #E9DBBE; --kk-on-dark-muted: #A8946A; --kk-nav: #EFE2C9; --kk-accent: #8A6F3E; --kk-accent-bright: #8A6F3E; --kk-accent-gold: #8A6F3E; --kk-accent-clay: #B5673A; --kk-cta: #221A12; --kk-cta-text: #F3E9D2; --kk-border: #D8C9A8; --kk-border-soft: #D8C9A8; --kk-border-strong: #CBBB98; --kk-divider: #D8C9A8; --kk-footer-border: #3A3020; --kk-panel-1: #3A2E1D; --kk-panel-2: #221A12; --kk-panel-3: #2F2518; --kk-panel-4: #1B150E; --kk-glow-1: 138,111,62; --kk-glow-2: 110,90,50; --dC-bg: #EFE2C9; /* kraft page */ --dC-surface: #F6EDD7; /* panels / cards */ --dC-photo: #E7D7B4; /* image frames */ --dC-foot: #E9DABB; /* footer (light kraft) */ --dC-ink: #221A12; /* dark UI / buttons */ --dC-text: #5A4A30; /* body copy */ --dC-mut: #7A6440; /* mono labels */ --dC-gold: #8A6F3E; --dC-line: rgba(34,26,18,.22); --dC-line-2: rgba(34,26,18,.18); --dC-cream: #F3E9D2; /* text on dark */ --dispC: 'Bricolage Grotesque', system-ui, sans-serif; --monoC: 'DM Mono', ui-monospace, 'Courier New', monospace; } html[data-design="C"] body { background: var(--dC-bg); color: var(--dC-text); font-family: 'Schibsted Grotesk', system-ui, sans-serif; } /* Display = Bricolage; meta/labels/nav = DM Mono uppercase */ html[data-design="C"] .hero-h1, html[data-design="C"] .section-h2, html[data-design="C"] .newsletter-h2, html[data-design="C"] .contact-h2, html[data-design="C"] .logo-text, html[data-design="C"] .footer-logo, html[data-design="C"] .card-name-link h3, html[data-design="C"] .ott-name, html[data-design="C"] .ott-name a { font-family: var(--dispC); } /* ── Top row (mono) ── */ html[data-design="C"] .toprow { background: var(--dC-bg); color: var(--dC-mut); font-family: var(--monoC); letter-spacing: .1em; text-transform: uppercase; font-size: 11px; border-bottom: 1px solid var(--dC-line); } html[data-design="C"] .toprow a { color: var(--dC-mut); } html[data-design="C"] .toprow-dot { background: var(--dC-gold); } /* ── Header (bordered, mono nav) ── */ html[data-design="C"] .site-header { background: var(--dC-bg); border-bottom: 1px solid var(--dC-line); box-shadow: none; } html[data-design="C"] .main-nav { background: transparent; } html[data-design="C"] .logo-text { font-weight: 700; letter-spacing: -.01em; text-transform: none; color: var(--dC-ink); } html[data-design="C"] .logo-text span { color: var(--dC-gold); } html[data-design="C"] .main-nav a { font-family: var(--monoC); font-weight: 500; letter-spacing: .04em; text-transform: uppercase; font-size: 12px; color: #5A4A30; background: transparent; } html[data-design="C"] .main-nav a.active, html[data-design="C"] .main-nav a:hover { color: var(--dC-ink); } html[data-design="C"] .cart-pill, html[data-design="C"] .nav-btn { background: transparent; color: var(--dC-ink); border: 1px solid var(--dC-line); border-radius: 0; font-family: var(--monoC); text-transform: uppercase; font-size: 12px; } /* ── Hero: bordered panel grid ── */ html[data-design="C"] .hero-grid { background: var(--dC-surface); border: 1px solid var(--dC-line); align-items: stretch; gap: 0; overflow: hidden; } html[data-design="C"] .hero-text { padding: 46px 44px; border-right: 1px solid var(--dC-line-2); } html[data-design="C"] .hero-eyebrow { font-family: var(--monoC); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--dC-gold); font-size: 11px; } html[data-design="C"] .hero-h1 { font-weight: 800; font-size: clamp(38px, 5.5vw, 56px); line-height: 1.04; letter-spacing: -.02em; color: var(--dC-ink); text-transform: none; } html[data-design="C"] .hero-h1 span { color: var(--dC-ink); -webkit-text-fill-color: currentColor; } html[data-design="C"] .hero-p { color: var(--dC-text); font-size: 15px; line-height: 1.62; } /* Square solid mono buttons */ html[data-design="C"] .hero-btns .btn-cta { background: var(--dC-ink); color: var(--dC-cream); border: none; border-radius: 0; padding: 13px 22px; font-family: var(--monoC); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; font-size: 12px; box-shadow: none; } html[data-design="C"] .hero-btns .btn-outline { background: transparent; color: var(--dC-ink); border: 1px solid rgba(34,26,18,.4); border-radius: 0; padding: 13px 22px; font-family: var(--monoC); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; font-size: 12px; } html[data-design="C"] .hero-mascot-panel { background: var(--dC-photo); border: none; border-radius: 0; box-shadow: none; } html[data-design="C"] .hero-panel-label { font-family: var(--monoC); letter-spacing: .1em; text-transform: uppercase; color: var(--dC-mut); font-size: 10px; } html[data-design="C"] .hero-hi-badge { background: var(--dC-ink); color: var(--dC-cream); border-radius: 0; font-family: var(--monoC); text-transform: uppercase; letter-spacing: .08em; font-size: 10px; } /* ── Value strip (bordered box, mono) ── */ html[data-design="C"] .ship-banner { background: transparent; } html[data-design="C"] .ship-banner-inner { background: transparent; border: 1px solid var(--dC-line); border-radius: 0; box-shadow: none; } html[data-design="C"] .ship-text { font-family: var(--monoC); text-transform: uppercase; letter-spacing: .06em; font-size: 12px; color: #4A3C26; font-weight: 500; } html[data-design="C"] .ship-sub { font-family: var(--monoC); color: var(--dC-mut); text-transform: uppercase; letter-spacing: .04em; font-size: 11px; } /* ── Section header ── */ html[data-design="C"] .section-eyebrow { font-family: var(--monoC); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--dC-gold); } html[data-design="C"] .section-h2 { font-weight: 700; letter-spacing: -.02em; color: var(--dC-ink); text-transform: none; } /* ── Product cards (bordered, lot-number feel) ── */ html[data-design="C"] .card, html[data-design="C"] .ott-card { background: var(--dC-surface); border: 1px solid var(--dC-line); border-radius: 0; box-shadow: none; overflow: hidden; } html[data-design="C"] .card-img-wrap, html[data-design="C"] .ott-img-wrap { background: var(--dC-photo); border: none; border-bottom: 1px solid var(--dC-line-2); border-radius: 0; } html[data-design="C"] .card-name-link h3, html[data-design="C"] .ott-name, html[data-design="C"] .ott-name a { font-weight: 700; font-size: 18px; color: var(--dC-ink); text-transform: none; letter-spacing: 0; } html[data-design="C"] .card-strain, html[data-design="C"] .ott-strain { font-family: var(--monoC); color: #7A6A4E; text-transform: uppercase; letter-spacing: .04em; font-size: 11px; } html[data-design="C"] .price-disp { font-family: var(--monoC); font-weight: 500; color: var(--dC-ink); } html[data-design="C"] .kk-per-gram, html[data-design="C"] .ott-per-gram { font-family: var(--monoC); color: var(--dC-mut); } html[data-design="C"] .size-btn { font-family: var(--monoC); border-radius: 0; border: 1px solid var(--dC-line-2); background: transparent; color: var(--dC-text); text-transform: uppercase; font-size: 11px; } html[data-design="C"] .size-btn.active { background: var(--dC-ink); color: var(--dC-cream); border-color: var(--dC-ink); } html[data-design="C"] .add-btn { background: var(--dC-ink); color: var(--dC-cream); border: none; border-radius: 0; font-family: var(--monoC); text-transform: uppercase; letter-spacing: .1em; font-size: 11px; font-weight: 500; } html[data-design="C"] .add-btn:hover { background: #3a2c1c; } html[data-design="C"] .kk-grade-chip { background: transparent; color: var(--dC-mut); border: 1px solid var(--dC-line); border-radius: 0; font-family: var(--monoC); } /* ── Newsletter ── */ html[data-design="C"] #newsletter { background: var(--dC-surface); border-top: 1px solid var(--dC-line); border-bottom: 1px solid var(--dC-line); } html[data-design="C"] .newsletter-eyebrow { font-family: var(--monoC); color: var(--dC-gold); letter-spacing: .1em; text-transform: uppercase; } html[data-design="C"] .newsletter-h2 { font-weight: 700; color: var(--dC-ink); } html[data-design="C"] .newsletter-p { color: var(--dC-text); } html[data-design="C"] #newsletter .btn-cta { background: var(--dC-ink); color: var(--dC-cream); border-radius: 0 !important; font-family: var(--monoC); text-transform: uppercase; letter-spacing: .06em; } html[data-design="C"] .newsletter-field input { border-radius: 0; border: 1px solid var(--dC-line); background: var(--dC-bg); } /* ── Contact ── */ html[data-design="C"] #contact { background: var(--dC-bg); } html[data-design="C"] #contact .eyebrow { font-family: var(--monoC); color: var(--dC-gold); letter-spacing: .1em; text-transform: uppercase; } html[data-design="C"] .contact-h2 { font-weight: 700; color: var(--dC-ink); } html[data-design="C"] .contact-p { color: var(--dC-text); } html[data-design="C"] .contact-form-box { background: var(--dC-surface); border: 1px solid var(--dC-line); border-radius: 0; box-shadow: none; } html[data-design="C"] .form-field input, html[data-design="C"] .form-field textarea { border-radius: 0; border: 1px solid var(--dC-line); background: var(--dC-bg); } html[data-design="C"] #contact .btn-cta { background: var(--dC-ink); color: var(--dC-cream); border-radius: 0 !important; font-family: var(--monoC); text-transform: uppercase; letter-spacing: .06em; } html[data-design="C"] .contact-sig-name { font-family: var(--dispC); color: var(--dC-ink); } /* ── Footer (light kraft) ── */ html[data-design="C"] footer { background: var(--dC-foot); color: var(--dC-text); border-top: 1px solid var(--dC-line); } html[data-design="C"] .footer-logo { font-weight: 700; text-transform: none; color: var(--dC-ink); } html[data-design="C"] .footer-logo span { color: var(--dC-gold); } html[data-design="C"] .footer-tagline { font-family: var(--monoC); color: var(--dC-mut); text-transform: uppercase; letter-spacing: .06em; font-size: 11px; } html[data-design="C"] .footer-col-head { font-family: var(--monoC); color: var(--dC-gold); letter-spacing: .1em; text-transform: uppercase; } html[data-design="C"] .footer-col a { font-family: var(--monoC); color: #4A3C26; } html[data-design="C"] .footer-col a:hover { color: var(--dC-ink); } html[data-design="C"] .footer-col a.bright { color: var(--dC-gold); } html[data-design="C"] .footer-bottom { font-family: var(--monoC); color: var(--dC-mut); text-transform: uppercase; letter-spacing: .06em; font-size: 10px; border-top: 1px solid var(--dC-line-2); } /* ============================================================ SHARED LAYOUT (kk-layout.js header/footer) — used by all non-home pages. It's inline-styled with var(--kk-*), so the token remaps above already recolor it. Only the active nav link is hardcoded #fff (inline), which is invisible on these now-light headers — make injected-header nav links dark. Scoped via [style*="--kk-nav"] so the homepage's own header is untouched. ============================================================ */ html[data-design="A"] header[style*="--kk-nav"] nav a, html[data-design="B"] header[style*="--kk-nav"] nav a, html[data-design="C"] header[style*="--kk-nav"] nav a { color: var(--kk-ink) !important; } html[data-design="C"] header[style*="--kk-nav"] nav a { font-family: 'DM Mono', ui-monospace, monospace; } /* Category page hero (.page-banner) — its overlay is a HARDCODED dark-green rgba(26,33,19,…) over a bud-photo mosaic, so retint it per design. */ html[data-design="A"] .page-banner-overlay { background: linear-gradient(to bottom, rgba(36,28,20,.40) 0%, rgba(36,28,20,.82) 100%); } html[data-design="B"] .page-banner-overlay { background: linear-gradient(to bottom, rgba(26,23,18,.40) 0%, rgba(26,23,18,.82) 100%); } html[data-design="C"] .page-banner-overlay { background: linear-gradient(to bottom, rgba(34,26,18,.40) 0%, rgba(34,26,18,.82) 100%); }