/* ========================================================================== KumKlub 2 theme Ported from public/kumklub_2/{index,all-products}.html (Figma export). SCOPING RULES — important: • "Chrome" (announcement bar, header, nav, footer, trust bar, buttons) is GLOBAL: it renders on every page of the site, so it must style correctly next to the legacy index.css. • Page-level blocks (hero, sections, category + product grids, feature bands, listing, pagination) are scoped under `body.kk2`, because the legacy index.css already defines bare `.product` (4 rules) and `.category` (40 rules — that is the header dropdown). Scoping keeps the two apart and wins on specificity where they overlap. Only pages that opt in with get the page-level styles. ========================================================================== */ :root { --kk-pink: #f54772; --kk-pink-dark: #d93760; --kk-page: #fef5ed; --kk-band: #fdefe4; --kk-hero: #eecfcf; --kk-trust: #feece4; --kk-swatch: #ffdce3; --kk-ink: #0a0a0a; --kk-muted: #424242; --kk-white: #ffffff; --kk-card-shadow: 0 4px 15.5px -3px rgba(0, 0, 0, .25); --kk-r-card: 33px; --kk-r-img: 23px; --kk-r-btn: 8px; --kk-r-pill: 80px; --kk-font-display: 'Abhaya Libre', Georgia, 'Times New Roman', serif; --kk-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --kk-shell: 1330px; --kk-gutter: clamp(20px, 4vw, 55px); } /* ========================================================================== LEGACY COMPATIBILITY RESET -------------------------------------------------------------------------- index.css opens with element-level rules that beat inheritance, so a themed component cannot simply expect to inherit from body: index.css:1 * { font-family: "Abel", sans-serif } <- universal, so it applies directly to every element and out-ranks anything an ancestor merely passes down index.css:44 ul { list-style: none } index.css:99 p, span { font-size: var(--minTextSize); color: #121212bf } index.css:1405 form { display:flex; flex-wrap:wrap; gap:20px } These neutralisers are wrapped in :where(), which contributes ZERO specificity. That is deliberate and load-bearing: • vs index.css they tie on specificity and win on order (this file loads second), so the legacy rules are neutralised; • vs the theme's own component classes (.announce__msg, .trust__item p, .kk-footer__blurb …) they LOSE, so component type scales survive. Written as `body.kk2 p { … }` instead, they would be (0,1,1) and would beat every (0,1,0) component rule — which is exactly the bug this replaced: the announcement bar, eyebrow, trust and footer type all collapsed to 16px. ========================================================================== */ /* Chrome renders on EVERY page, including un-ported ones, so its reset cannot be scoped to .kk2. A class-qualified `*` (0,1,0) beats index.css `*`. */ .announce *, .kk-header *, .kk-footer *, .trust * { font-family: inherit; } /* Page content — ported pages only, so un-ported pages keep their look. */ :where(body.kk2) *, :where(body.kk2) *::before, :where(body.kk2) *::after { font-family: inherit; } :where(body.kk2) :is(p, span) { font-size: inherit; color: inherit; line-height: inherit; } :where(body.kk2) form { display: block; flex-wrap: nowrap; gap: 0; justify-content: flex-start; } /* ========================================================================== PAGE-LEVEL STYLES — scoped to body.kk2 only ========================================================================== */ body.kk2 { background: var(--kk-page); color: var(--kk-ink); font-family: var(--kk-font-body); font-size: 16px; line-height: 1.5; overflow-x: hidden; } /* Same :where() reasoning as above — these are base defaults that every component rule must be able to override. `body.kk2 h3` would be (0,1,2) and would beat `.trust__item h3` (0,1,1), stripping its 700 weight. */ :where(body.kk2) img { display: block; max-width: 100%; height: auto; } :where(body.kk2) a { color: inherit; text-decoration: none; } /* critical.css:49 also sets `h1,h2,h3 { font-family:"Poppins"; letter-spacing: .2px }` at (0,0,1) — which out-ranks the (0,0,0) `*` rule above, so any heading without its own font-family (e.g. .kk-product__name) rendered in Poppins. This selector is also (0,0,1), so it ties and wins on load order, while still losing to every component rule. */ :where(body.kk2) :is(h1, h2, h3) { margin: 0; font-weight: 400; font-family: inherit; letter-spacing: normal; } body.kk2 :focus-visible { outline: 3px solid var(--kk-pink); outline-offset: 3px; border-radius: 4px; } /* ========================================================================== SHARED PRIMITIVES (global) ========================================================================== */ .shell { width: 100%; max-width: var(--kk-shell); margin-inline: auto; padding-inline: var(--kk-gutter); } .kk-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; cursor: pointer; font-family: var(--kk-font-body); background: var(--kk-pink); color: var(--kk-white); text-decoration: none; transition: background-color .18s ease; } .btn:hover { background: var(--kk-pink-dark); color: var(--kk-white); } .btn--pill { border-radius: var(--kk-r-pill); padding: 10px clamp(18px, 3vw, 30px); min-height: 44px; max-width: 100%; font-size: clamp(.9375rem, 2vw, 1.5625rem); font-weight: 600; text-transform: uppercase; line-height: 1.4; text-align: center; } .btn--hero { border-radius: var(--kk-r-btn); padding: 15px 32px; font-size: 1.125rem; } .btn--cart { width: 100%; border-radius: var(--kk-r-btn); padding: 10px clamp(8px, 1.5vw, 16px); min-height: 44px; font-size: clamp(.875rem, 1.35vw, 1.125rem); font-weight: 600; text-transform: uppercase; letter-spacing: .01em; /* The template's is a