/* Theme Name: KOLAS Modern Theme URI: https://kolas.com/ Description: Child of Hello Elementor. Carries the rebuilt KOLAS header and footer to every page. GENERATED by bin/build_theme.py from index.html — do not hand-edit, your change will be overwritten. Edit index.html and rebuild. Author: Bogdan Template: hello-elementor Version: 1.0.0 */ @font-face{font-family:"Bricolage Grotesque";src:url("fonts/bricolage-grotesque.woff2") format("woff2-variations");font-weight:200 800;font-style:normal;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face{font-family:"Gabarito";src:url("fonts/gabarito.woff2") format("woff2-variations");font-weight:400 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face{font-family:"Martian Mono";src:url("fonts/martian-mono.woff2") format("woff2-variations");font-weight:300 600;font-style:normal;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} /* ── the parent reset on a page that is not wired (bin/wp_part.py unwired_reset_block, guard T18): outside a layer, in the old order, each rule with its own specificity ── */ html:where(:not(:has(> body.kolas-wired))){line-height:1.15;-webkit-text-size-adjust:100%} :where(body:not(.kolas-wired)) *,:where(body:not(.kolas-wired)) :after,:where(body:not(.kolas-wired)) :before{box-sizing:border-box} body:where(:not(.kolas-wired)){background-color:#fff;color:#333;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-size:1rem;font-weight:400;line-height:1.5;margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} :where(body:not(.kolas-wired)) h1,:where(body:not(.kolas-wired)) h2,:where(body:not(.kolas-wired)) h3,:where(body:not(.kolas-wired)) h4,:where(body:not(.kolas-wired)) h5,:where(body:not(.kolas-wired)) h6{color:inherit;font-family:inherit;font-weight:500;line-height:1.2;margin-block-end:1rem;margin-block-start:.5rem} :where(body:not(.kolas-wired)) h1{font-size:2.5rem} :where(body:not(.kolas-wired)) h2{font-size:2rem} :where(body:not(.kolas-wired)) h3{font-size:1.75rem} :where(body:not(.kolas-wired)) h4{font-size:1.5rem} :where(body:not(.kolas-wired)) h5{font-size:1.25rem} :where(body:not(.kolas-wired)) h6{font-size:1rem} :where(body:not(.kolas-wired)) p{margin-block-end:.9rem;margin-block-start:0} :where(body:not(.kolas-wired)) hr{box-sizing:content-box;height:0;overflow:visible} :where(body:not(.kolas-wired)) pre{font-family:monospace,monospace;font-size:1em;white-space:pre-wrap} :where(body:not(.kolas-wired)) a{background-color:transparent;color:#c36;text-decoration:none} :where(body:not(.kolas-wired)) a:not([href]):not([tabindex]),:where(body:not(.kolas-wired)) a:not([href]):not([tabindex]):focus,:where(body:not(.kolas-wired)) a:not([href]):not([tabindex]):hover{color:inherit;text-decoration:none} :where(body:not(.kolas-wired)) a:not([href]):not([tabindex]):focus{outline:0} :where(body:not(.kolas-wired)) abbr[title]{border-block-end:none;-webkit-text-decoration:underline dotted;text-decoration:underline dotted} :where(body:not(.kolas-wired)) b,:where(body:not(.kolas-wired)) strong{font-weight:bolder} :where(body:not(.kolas-wired)) code,:where(body:not(.kolas-wired)) kbd,:where(body:not(.kolas-wired)) samp{font-family:monospace,monospace;font-size:1em} :where(body:not(.kolas-wired)) small{font-size:80%} :where(body:not(.kolas-wired)) sub,:where(body:not(.kolas-wired)) sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline} :where(body:not(.kolas-wired)) sub{bottom:-.25em} :where(body:not(.kolas-wired)) sup{top:-.5em} :where(body:not(.kolas-wired)) img{border-style:none;height:auto;max-width:100%} :where(body:not(.kolas-wired)) details{display:block} :where(body:not(.kolas-wired)) summary{display:list-item} :where(body:not(.kolas-wired)) figcaption{color:#333;font-size:16px;font-style:italic;font-weight:400;line-height:1.4} :where(body:not(.kolas-wired)) [hidden],:where(body:not(.kolas-wired)) template{display:none} @media print{ :where(body:not(.kolas-wired)) *,:where(body:not(.kolas-wired)) :after,:where(body:not(.kolas-wired)) :before{background:transparent!important;box-shadow:none!important;color:#000!important;text-shadow:none!important} :where(body:not(.kolas-wired)) a,:where(body:not(.kolas-wired)) a:visited{text-decoration:underline} :where(body:not(.kolas-wired)) a[href]:after{content:" (" attr(href) ")"} :where(body:not(.kolas-wired)) abbr[title]:after{content:" (" attr(title) ")"} :where(body:not(.kolas-wired)) a[href^="#"]:after,:where(body:not(.kolas-wired)) a[href^="javascript:"]:after{content:""} :where(body:not(.kolas-wired)) pre{white-space:pre-wrap!important} :where(body:not(.kolas-wired)) blockquote,:where(body:not(.kolas-wired)) pre{-moz-column-break-inside:avoid;border:1px solid #ccc;break-inside:avoid} :where(body:not(.kolas-wired)) thead{display:table-header-group} :where(body:not(.kolas-wired)) img,:where(body:not(.kolas-wired)) tr{-moz-column-break-inside:avoid;break-inside:avoid} :where(body:not(.kolas-wired)) h2,:where(body:not(.kolas-wired)) h3,:where(body:not(.kolas-wired)) p{orphans:3;widows:3} :where(body:not(.kolas-wired)) h2,:where(body:not(.kolas-wired)) h3{-moz-column-break-after:avoid;break-after:avoid} } :where(body:not(.kolas-wired)) label{display:inline-block;line-height:1;vertical-align:middle} :where(body:not(.kolas-wired)) button,:where(body:not(.kolas-wired)) input,:where(body:not(.kolas-wired)) optgroup,:where(body:not(.kolas-wired)) select,:where(body:not(.kolas-wired)) textarea{font-family:inherit;font-size:1rem;line-height:1.5;margin:0} :where(body:not(.kolas-wired)) input[type=date],:where(body:not(.kolas-wired)) input[type=email],:where(body:not(.kolas-wired)) input[type=number],:where(body:not(.kolas-wired)) input[type=password],:where(body:not(.kolas-wired)) input[type=search],:where(body:not(.kolas-wired)) input[type=tel],:where(body:not(.kolas-wired)) input[type=text],:where(body:not(.kolas-wired)) input[type=time],:where(body:not(.kolas-wired)) input[type=url],:where(body:not(.kolas-wired)) select,:where(body:not(.kolas-wired)) textarea{border:1px solid #666;border-radius:3px;padding:.5rem 1rem;transition:all .3s;width:100%} :where(body:not(.kolas-wired)) input[type=date]:focus,:where(body:not(.kolas-wired)) input[type=email]:focus,:where(body:not(.kolas-wired)) input[type=number]:focus,:where(body:not(.kolas-wired)) input[type=password]:focus,:where(body:not(.kolas-wired)) input[type=search]:focus,:where(body:not(.kolas-wired)) input[type=tel]:focus,:where(body:not(.kolas-wired)) input[type=text]:focus,:where(body:not(.kolas-wired)) input[type=time]:focus,:where(body:not(.kolas-wired)) input[type=url]:focus,:where(body:not(.kolas-wired)) select:focus,:where(body:not(.kolas-wired)) textarea:focus{border-color:#333} :where(body:not(.kolas-wired)) button,:where(body:not(.kolas-wired)) input{overflow:visible} :where(body:not(.kolas-wired)) button,:where(body:not(.kolas-wired)) select{text-transform:none} :where(body:not(.kolas-wired)) [type=button],:where(body:not(.kolas-wired)) [type=reset],:where(body:not(.kolas-wired)) [type=submit],:where(body:not(.kolas-wired)) button{-webkit-appearance:button;width:auto} :where(body:not(.kolas-wired)) [type=button],:where(body:not(.kolas-wired)) [type=submit],:where(body:not(.kolas-wired)) button{background-color:transparent;border:1px solid #c36;border-radius:3px;color:#c36;display:inline-block;font-size:1rem;font-weight:400;padding:.5rem 1rem;text-align:center;transition:all .3s;-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap} :where(body:not(.kolas-wired)) [type=button]:focus:not(:focus-visible),:where(body:not(.kolas-wired)) [type=submit]:focus:not(:focus-visible),:where(body:not(.kolas-wired)) button:focus:not(:focus-visible){outline:none} :where(body:not(.kolas-wired)) [type=button]:not(:disabled),:where(body:not(.kolas-wired)) [type=submit]:not(:disabled),:where(body:not(.kolas-wired)) button:not(:disabled){cursor:pointer} :where(body:not(.kolas-wired)) fieldset{padding:.35em .75em .625em} :where(body:not(.kolas-wired)) legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal} :where(body:not(.kolas-wired)) progress{vertical-align:baseline} :where(body:not(.kolas-wired)) textarea{overflow:auto;resize:vertical} :where(body:not(.kolas-wired)) [type=checkbox],:where(body:not(.kolas-wired)) [type=radio]{box-sizing:border-box;padding:0} :where(body:not(.kolas-wired)) [type=number]::-webkit-inner-spin-button,:where(body:not(.kolas-wired)) [type=number]::-webkit-outer-spin-button{height:auto} :where(body:not(.kolas-wired)) [type=search]{-webkit-appearance:textfield;outline-offset:-2px} :where(body:not(.kolas-wired)) [type=search]::-webkit-search-decoration{-webkit-appearance:none} :where(body:not(.kolas-wired)) ::-webkit-file-upload-button{-webkit-appearance:button;font:inherit} :where(body:not(.kolas-wired)) select{display:block} :where(body:not(.kolas-wired)) table{background-color:transparent;border-collapse:collapse;border-spacing:0;font-size:.9em;margin-block-end:15px;width:100%} :where(body:not(.kolas-wired)) table td,:where(body:not(.kolas-wired)) table th{border:1px solid hsla(0,0%,50%,.502);line-height:1.5;padding:15px;vertical-align:top} :where(body:not(.kolas-wired)) table th{font-weight:700} :where(body:not(.kolas-wired)) table tfoot th,:where(body:not(.kolas-wired)) table thead th{font-size:1em} :where(body:not(.kolas-wired)) table caption+thead tr:first-child td,:where(body:not(.kolas-wired)) table caption+thead tr:first-child th,:where(body:not(.kolas-wired)) table colgroup+thead tr:first-child td,:where(body:not(.kolas-wired)) table colgroup+thead tr:first-child th,:where(body:not(.kolas-wired)) table thead:first-child tr:first-child td,:where(body:not(.kolas-wired)) table thead:first-child tr:first-child th{border-block-start:1px solid hsla(0,0%,50%,.502)} :where(body:not(.kolas-wired)) table tbody>tr:nth-child(odd)>td,:where(body:not(.kolas-wired)) table tbody>tr:nth-child(odd)>th{background-color:hsla(0,0%,50%,.071)} :where(body:not(.kolas-wired)) table tbody tr:hover>td,:where(body:not(.kolas-wired)) table tbody tr:hover>th{background-color:hsla(0,0%,50%,.102)} :where(body:not(.kolas-wired)) table tbody+tbody{border-block-start:2px solid hsla(0,0%,50%,.502)} @media(max-width:767px){ :where(body:not(.kolas-wired)) table table{font-size:.8em} :where(body:not(.kolas-wired)) table table td,:where(body:not(.kolas-wired)) table table th{line-height:1.3;padding:7px} :where(body:not(.kolas-wired)) table table th{font-weight:400} } :where(body:not(.kolas-wired)) dd,:where(body:not(.kolas-wired)) dl,:where(body:not(.kolas-wired)) dt,:where(body:not(.kolas-wired)) li,:where(body:not(.kolas-wired)) ol,:where(body:not(.kolas-wired)) ul{background:transparent;border:0;font-size:100%;margin-block-end:0;margin-block-start:0;outline:0;vertical-align:baseline} /* Its two recolouring state rules, in the layer hello-reset: they never beat a rule outside a layer. */ @layer hello-reset{ :where(body:not(.kolas-wired)) a:active,:where(body:not(.kolas-wired)) a:hover{color:#336} :where(body:not(.kolas-wired)) [type=button]:focus,:where(body:not(.kolas-wired)) [type=button]:hover,:where(body:not(.kolas-wired)) [type=submit]:focus,:where(body:not(.kolas-wired)) [type=submit]:hover,:where(body:not(.kolas-wired)) button:focus,:where(body:not(.kolas-wired)) button:hover{background-color:#c36;color:#fff;text-decoration:none} } /* Scoped, never global. A `*` reset or a `body` rule would restyle Elementor page content, which is not ours to touch — only the header and footer are. The font MUST be set here: without it the header inherited Elementor's Work Sans, because the homepage sets its type on `body` and that rule is deliberately not shipped. */ .hdr, .hdr *, .hdr *::before, .hdr *::after, .ftr, .ftr *, .ftr *::before, .ftr *::after { box-sizing: border-box; } .hdr, .ftr { font-family: var(--sans); -webkit-font-smoothing: antialiased; line-height: 1.6; /* the mockups' body line-height (index.html); 1.5 made the footer 12 px shorter */ } /* The keyboard focus ring of the mockups (index.html :focus-visible), on the pages that are not wired (round 3c, 2026-09-30): the chrome of every page, and the content of our own theme pages (kolas-ours: /shop/, /brands/, /faqs/, the house brand pages). A wired page has it from its base block. Inside :where(), so any component rule wins; the browser's own ring loses to any author rule. Measured before: 131 focus rows on /shop/ with the browser's "auto 1px" ring. */ :where(body:not(.kolas-wired) :is(.hdr,.pick,.ftr,.bar) :focus-visible), :where(body.kolas-ours:not(.kolas-wired) #content :focus-visible) { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: var(--r2); } /* `color: inherit` is load-bearing. Elementor sets a global `a{color:…}` which beats our inherited colour, and the nav rendered as near-invisible dark purple on the purple bar. */ .hdr a, .ftr a { text-decoration: none; color: inherit; } .sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); } /* ── two faults the asset strip creates on the pages WE render ─────────────────────────── Both were LIVE on /faqs/ from the day it shipped and were found on 2026-09-17 while building /brands/. Both are scoped to `.kolas-ours`, because on an Elementor page the very CSS we are replacing is still doing these jobs correctly. 1. "Skip to content" WAS VISIBLE. WordPress core prints ` of ours that does not state a colour inherits it, and so does any child that does not state one: the in-stock numbers inside the brand-guide tiles rendered magenta on white. Same fault as the header nav going near-invisible purple on the purple bar (2026-09-15), so it wants the same one-word fix. BUT NOT AS `.kolas-ours a`. That selector is (0,1,1) and every component of ours is a bare class at (0,1,0) — so it would outrank `.more`, `.btn--brand` and `.crumb a`'s siblings and quietly grey out every styled link on the page. The blanket was written, then thrown away for exactly that reason. The rule instead: ANY WE EMIT THAT IS A CONTAINER MUST STATE ITS OWN COLOUR, so nothing inside it can inherit Elementor's. Keep new ones on this list. */ .kolas-ours .bx-g__c { color: var(--ink); } .kolas-ours .bx-o__c { color: #fff; } .kolas-ours .bx-t { color: var(--ink); } /* ASSESS-2 F12: no reset #CC3366 on a container link */ .kolas-ours .bx-p__m { color: var(--ink); } /* 3. `prefers-reduced-motion` WAS ALMOST ENTIRELY LOST. index.html carries a global reset — `*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms !important}` — and the CSS filter drops it, because `*` touches none of the KEEP families. What survived into the theme was three component-specific overrides (the FAQ chevron, the FAQ body, the picker card) and nothing else. So on every page we render, and in the header and footer on ALL 63 pages, the sticky header, the card lift, the underline wipe, the arrow slide and the brand-cell zoom all ignored the setting. Live since the theme shipped 2026-09-15; found 2026-09-17 by the web-design-guidelines audit, rule 29. Scoped to our components and our pages rather than re-adding the bare `*`, because an unscoped !important reset would also silence Elementor's own animations on 60 pages that are not ours to change. */ @media (prefers-reduced-motion: reduce) { .hdr *, .hdr *::before, .hdr *::after, .ftr *, .ftr *::before, .ftr *::after, .kolas-ours *, .kolas-ours *::before, .kolas-ours *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* Headings set their own wrap. index.html balances only .pband h1; a two-line .sec__h h2 was leaving a one-word second line. */ .kolas-ours .sec__h h2 { text-wrap: balance; font-family: var(--display); font-weight: 700; line-height: 1.02; letter-spacing: -.03em; } /* (2026-10-01, ASSESS-2 F1) A legacy WPCode snippet prints body{font-family:'Poppins'}, a font that never loads, so /shop/, /brands/ and /faqs/ fell back to the system sans. (0,1,1) beats its (0,0,1) in any order. */ body.kolas-ours { font-family: var(--sans); } /* Every tap target on our pages. Without it Safari waits ~300ms on each tap to see whether a second one is coming, and 90.5% of clicks here are on a phone. */ .kolas-ours a, .kolas-ours button, .hdr a, .hdr button, .ftr a { touch-action: manipulation; } .hdr .btn--gold, .ftr .btn--gold { color: #241046; } .ftr h4 { margin: 0 0 14px; } :root{/* ---- light surfaces: the body of the page ---- */ --ground:#F4F3F8; --surface:#FFFFFF; --sunken:#EEECF5; --chip:#EDE9F6; --ink:#1A1626; /* 17.70:1 on white */ --ink-2:#4B4557; /* 9.18:1 */ --muted:#625C73; /* 6.37:1 */ --border:#E2DFEC; /* non-interactive dividers only */ --hair:#ECEAF3; --edge:#8C82A6; /* INTERACTIVE borders. 3.58:1 on white, clears 1.4.11 */ /* ---- brand ---- */ --brand:#401C7B; /* 12.57:1 on white */ --press:#2F1459; --link:#5B2FA8; /* 8.69:1 on white */ --soft:#B9A9D6; /* 7.85:1 on deep */ /* ---- deep surfaces: hero, spotlight, footer ---- */ --deep:#241046; /* white 16.97:1 · gold 8.55:1 */ --deep-2:#33175E; /* white 14.74:1 · gold 7.42:1 */ --deep-hair:rgba(255,255,255,.14); --deep-panel:rgba(255,255,255,.05); /* ---- gold, three roles, each measured ---- */ --gold:#D8B36A; /* DARK surfaces only. 8.55:1 on deep. */ --gold-struct:#A8802E; /* boundaries on light. 3.63:1 on white. */ --gold-text:#9A6E1F; /* the only gold that carries text on light. 4.54:1 */ /* ---- status ---- */ --open:#0E7350; /* 5.85:1 on white */ --closed:#A8321B; /* 6.69:1 on white. Both fail on deep — status lives on light. */ /* ---- type ---- */ --display:"Bricolage Grotesque",Georgia,serif; --sans:"Gabarito",system-ui,-apple-system,sans-serif; --label:"Martian Mono",ui-monospace,SFMono-Regular,monospace; /* ---- shape · space · motion ---- */ --r2:6px; --r3:8px; --r4:12px; --r5:16px; --r6:24px; --t-micro:120ms; --t-comp:180ms; --t-enter:320ms; --ease:cubic-bezier(.2,0,0,1); --wrap:1240px; --gutter:20px; --sec:56px;} .hdr :focus-visible, .hero :focus-visible, .bwall :focus-visible, .shelfA :focus-visible, .bar :focus-visible, .ftr :focus-visible{outline-color:var(--gold)} .wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)} .skip{position:absolute;left:-9999px} .skip:focus{left:var(--gutter);top:10px;z-index:200;background:var(--surface); padding:12px 18px;border-radius:var(--r3);font-weight:700} /* label voice — the compliance-label vernacular. Potency, weight, licence, codes. */ .lbl{font-family:var(--label);font-size:13.5px;font-weight:400;letter-spacing:.16em; text-transform:uppercase;font-variation-settings:"wdth" 100} .num{font-family:var(--sans);font-variant-numeric:tabular-nums;font-weight:600} /* ═════════════════════════════ HEADER ═════════════════════════════ */ .hdr{position:sticky;top:0;z-index:80;background:rgba(36,16,70,.86); backdrop-filter:blur(16px) saturate(1.3);border-bottom:1px solid var(--deep-hair);color:#fff} .hdr__in{display:flex;align-items:center;gap:32px;height:80px; max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)} /* The KOLAS wordmark is TRADEMARKED ARTWORK, not type. It is never set in a typeface — the letterforms are drawn, and the mark carries a ™. Source: kolas.com header, Layer-1.svg, 7 paths, fill #401C7B — which is also how the locked brand purple was independently confirmed. Purple version for light grounds, white for dark. Never recolour otherwise. */ /* The mark leads, the wordmark supports. Pinwheel ~1.8x the wordmark height — an earlier pass had them near-equal and the lettering shouted over the mark. */ .mark{display:flex;align-items:center;gap:11px} .mark__pin{width:40px;height:40px;flex:none} .mark__word{height:22px;width:auto;display:block} /* Footer signs off, so it goes larger — same proportion. */ .ftr .mark{gap:14px} .ftr .mark__pin{width:52px;height:52px} .ftr .mark__word{height:29px} /* ═══════════════ MOBILE NAV — rebuilt 2026-09-21 ═══════════════ FIRST ATTEMPT REJECTED. A second header row holding all five links measured fine and looked bad: a second purple band competing with the bar above it, and the labels running together because `gap:0` plus `min-width:44px` centred each label in a box narrower than its own text. Bogdan: "that's horrible btw, lets get rid of it." THIS IS HIS DESIGN, and it is better because it splits the two jobs the header was doing at once. Below 900px the gold BUY action leaves the header for a fixed bottom bar, where a thumb actually is, and the header keeps one control: a disclosure button that drops the five links down. The bottom bar is not a new idea. `.bar` already exists on the homepage — "sticky order bar, phone only" — so this reuses a pattern already on the site. The theme pages simply never had it. STILL NO DUPLICATED LINKS. `.nav` itself becomes the panel, so the single