/* Web Templates/Smoke Shops/styles.css FlowerBomb DC — smoke shop / curbside pickup storefront. Rebrand from the :root token block; nothing below it hardcodes a colour. Contrast: every text/background pair is verified >= 4.5:1 (ratios noted inline). Derived from the weedzdc.com teardown in reference.md — same skeleton (offer bar → hero+zip → trust → tiers → collections → how-to-order → proof), deliberately different bones: dark-first, condensed display, 4px surfaces. */ /* ============================================================ 1. TOKENS — the only block you edit to rebrand ============================================================ */ :root { /* Colour — "black & FlowerBomb yellow". Dark-first because this category is browsed at night, on a phone, in bed. The accent is the yellow off the mascot's fuse spark, sampled from the logo artwork (media/brand/flowerbomb-wordmark.png) rather than picked by eye: #F8D840 is the dominant tone in that flare in both logo lockups. ── The one thing to understand before editing these ── The accent flipped from a mid purple to a bright yellow, which inverts how it can be used. Purple took WHITE text on top (#6941c6 + white was 6.62:1). Yellow cannot: white on #EFC41E measures 1.67:1, which is effectively invisible. Every solid accent fill therefore takes --on-ember (near-black) instead, at 11.78:1. If you ever re-theme to a dark accent again, --on-ember goes back to #fff and nothing else has to change — that is the whole reason it is a token rather than a literal repeated across seven rules. Measured against the real surfaces (see the ratios inline): */ --void: #0b0b0d; /* page base */ --slab: #141418; /* raised surface — cards, drawer, header */ --slab-2: #1b1b21; /* hover / inset */ --edge: #262630; /* hairlines */ --chalk: #f4f2ee; /* primary text 16.1:1 on void */ --ash: #9b9aa4; /* muted text 7.1:1 on void */ --ember: #F8D840; /* PRIMARY ACCENT — fuse-spark yellow 13.9:1 on void */ --ember-lo: #EFC41E; /* solid fill, takes --on-ember text 11.8:1 on void */ --on-ember: #0b0b0d; /* text/icons ON an accent fill 11.8:1 on ember-lo */ /* Deepened from #e8b44a to a bronze. Against a yellow accent the old amber was 1.16:1 apart from --ember — near enough to read as the same colour, which collapsed the distinction between "this is the CTA" and "this is a rating". At #C8912A the two sit 1.97:1 apart and the hierarchy holds. */ --gold: #C8912A; /* tier marks, star ratings, badges 7.1:1 on void */ --live: #45d67f; /* status: open / in stock 10.5:1 on void */ /* Pushed orange for the same reason: #ffb020 was a yellow-amber sitting 1.1:1 from the new accent, so warnings stopped looking like warnings. */ --warn: #FF8A3D; /* age gate denial, compliance notes 8.4:1 on void */ /* Product-photo plate. Warm off-white rather than pure #fff so a packshot's white background can blend into it via mix-blend-mode without a visible seam, and so the tiles don't glare against the near-black page. */ --plate: #ece9e2; --hero-bg: hsl(260 91% 58%); --hero-ink: #0b0b0d; /* Accent discipline: --ember is spent on the primary CTA, the cart badge, and price figures — and nothing else. Prices were added deliberately (see the price rule in §9); the point of the rule survives, which is that the accent never lands on decoration. Put it on a border, a rule, or a section heading and it stops pulling the eye to the things that make money. */ /* Type — Anton (display) / Inter (body and labels). Anton rather than the source's Zilla Slab: a heavy condensed face sets enormous on a 375px screen and still fits, which is most of what produces the "designed" feel. Inter carries all labels, prices, chips and buttons for a clean, readable system. Its compact forms stay legible at the small UI sizes used here. */ --f-display: 'Anton', 'Oswald', Impact, sans-serif; --f-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --f-label: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --f-h1: var(--f-display); --f-h2: var(--f-display); --f-h3: var(--f-display); --t-hero: clamp(2.9rem, 8.5vw, 7rem); --t-h2: clamp(2rem, 4.6vw, 3.6rem); --t-h3: clamp(1.15rem, 2.1vw, 1.5rem); --t-body: 1.0625rem; /* 17px */ --t-small: 0.9375rem; --t-label: 0.72rem; /* Anton sits ~.02em right of its box at display sizes — pull it back so hero text optically aligns with the gutter. */ --bearing: .02em; --track-label: .055em; /* Space */ --content: 1320px; --narrow: 64ch; --gutter: clamp(1.1rem, 4vw, 3rem); --section-y: clamp(4.5rem, 8.5vw, 8rem); /* Geometry — one 6px radius on surfaces AND controls. Previously 4px surfaces against 999px pill controls. Unifying on 6px trades a little of the "printed packaging" hardness for a calmer, more contemporary grid: with pills gone, every edge in a card — media, card, add button, badge — shares one corner, so the eye stops counting shapes. Still well short of the source site's 12px-on-everything, which is the value that makes a store read as a stock theme. --radius-pill survives for the two things that are genuinely round. */ --radius: 6px; /* surfaces — cards, panels, drawer, media */ --radius-ctl: 6px; /* controls — buttons, chips, inputs, tags, qty */ --radius-pill: 999px; /* only the cart count badge and the progress meter */ --shadow: 0 .4rem 1.6rem rgba(0,0,0,.45); /* --header-h is the header's INNER min-height. --header-stack adds the 1px bottom border, and is what anything sticking or scroll-margining below the header must use — pinning to --header-h alone leaves a hairline gap that page content scrolls through. The inner height drops on small phones (see the 520px block), so both tokens are re-declared there rather than hard-coded at the use site, which is how .shopbar came to sit 5px below the header on a phone. */ --header-h: 64px; --header-stack: calc(var(--header-h) + 1px); --bar-h: 40px; /* announcement bar */ /* z-index scale — declared, not improvised */ --z-sticky: 20; --z-header: 30; --z-actionbar: 40; --z-drawer: 60; --z-gate: 90; } /* ============================================================ 2. RESET / BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { font-family: var(--f-body); font-size: var(--t-body); line-height: 1.6; color: var(--chalk); background: var(--void); -webkit-font-smoothing: antialiased; overflow-x: hidden; isolation: isolate; } body.is-locked, body.is-product-open, body.is-savings-open { overflow: hidden; } /* Small viewports get a little less peripheral motion and no accidental horizontal canvas. The product rails keep their deliberate, local swipe. `overflow-x: clip` avoids creating a second scrolling surface. */ @media (max-width: 699px) { html, body { overflow-x: clip; } :root { --gutter: 1rem; } } /* Matches .header__inner's own drop at this width — see the token block. */ @media (max-width: 520px) { :root { --header-h: 58px; } } /* A light palette for the live style-preview toggle. All component colours inherit these tokens, so the entire interface switches as one system. ⚠️ UNREACHABLE, AND NOT SAFE TO RE-ENABLE AS-IS. The only thing that adds `.theme-light` is applyMode() inside the styleControls IIFE in app.js, which returns before it ever runs — the authoring controls were deliberately taken off the storefront. That matters here because this block deliberately does NOT override the accent: under a dark accent it did not need to, but --ember is now a bright yellow and #F8D840 on #f6f4ef measures about 1.2:1 — every accent mark, price and eyebrow would vanish. If the toggle is ever restored, this block has to redefine --ember, --ember-lo and --on-ember for a light ground (a much deeper amber with white or near-black text, re-measured) before it is switched on. */ body.theme-light { --void: #f6f4ef; --slab: #ffffff; --slab-2: #eeece7; --edge: #d8d4cc; --chalk: #171719; --ash: #65636a; --plate: #f1eee8; --live: #16824c; } body.theme-light .header { background: rgba(246,244,239,.92); } body.theme-light .actionbar { background: rgba(246,244,239,.94); } img, svg, video { display: block; max-width: 100%; height: auto; } button, input, select, textarea { font: inherit; color: inherit; } a { color: inherit; } /* Low-contrast falling assets sit behind the site content; no interaction, no semantic content, and no impact when motion is reduced. */ .ambient-products { position: fixed; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; transform: translate3d(0, var(--ambient-parallax, 0px), 0); } .ambient-products__item { position: absolute; width: clamp(9rem, 18vw, 20rem); opacity: .1; mix-blend-mode: soft-light; filter: saturate(1.1); will-change: transform; animation: ambient-fall 32s linear infinite; } .ambient-products__rope { left: -5%; top: -30%; width: clamp(14rem, 28vw, 31rem); animation-duration: 46s; animation-delay: -12s; } .ambient-products__nug { right: 5%; top: -18%; animation-duration: 35s; animation-delay: -6s; } .ambient-products__joint { left: 17%; top: -42%; width: clamp(8rem, 14vw, 15rem); animation-duration: 42s; animation-delay: -23s; } .ambient-products__vape { right: -3%; top: -38%; width: clamp(8rem, 15vw, 16rem); animation-duration: 39s; animation-delay: -17s; } @keyframes ambient-fall { from { transform: translate3d(-1rem, -4vh, 0) rotate(-14deg); } to { transform: translate3d(2rem, 128vh, 0) rotate(21deg); } } @media (max-width: 699px) { .ambient-products__item { opacity: .07; } .ambient-products__rope { left: -18%; } .ambient-products__joint { left: -4%; } } :focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; border-radius: 2px; } .skip { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--ember-lo); color: var(--on-ember); padding: .8rem 1.2rem; font-family: var(--f-label); font-size: var(--t-label); text-transform: uppercase; letter-spacing: var(--track-label); } .skip:focus { left: 0; } .sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ============================================================ 3. PRIMITIVES ============================================================ */ .wrap { width: min(100% - (var(--gutter) * 2), var(--content)); margin-inline: auto; } /* Desktop uses the full available canvas. The shared edge is padding—not a centered max-width—so the header, hero, and every following section align. */ @media (min-width: 1200px) { .wrap { width: 100%; max-width: none; margin-inline: 0; padding-inline: var(--gutter); } } .section { padding-block: var(--section-y); } .section--tight { padding-block: clamp(3rem, 5.5vw, 4.75rem); } .section--dark { background: var(--slab); } .section--flush { padding: 0; } /* FAQ hero — a restrained dark wash keeps the header copy legible. */ .faq-hero { background-image: linear-gradient(90deg, rgba(11,11,13,.78) 0%, rgba(11,11,13,.58) 52%, rgba(11,11,13,.48) 100%), url("media/brand/flowerbomb-lounge-1400.webp"); background-size: cover; background-position: center 15%; border-bottom: 1px solid var(--edge); /* A centered 40% slice of the 16:9 source: 30% is cropped from both its top and bottom while the image keeps its native proportions. */ aspect-ratio: 40 / 9; } .faq-hero .section { min-height: inherit; display: flex; flex-direction: column; justify-content: center; } .faq-hero .lede { max-width: 48rem; color: var(--chalk); } @media (max-width: 700px) { .faq-hero { aspect-ratio: auto; min-height: 36rem; background-position: 60% center; background-image: linear-gradient(rgba(11,11,13,.7), rgba(11,11,13,.76)), url("media/brand/flowerbomb-lounge-1400.webp"); } } /* Events and referral pages. */ .events-hero, .referral-hero { background-size: cover; background-position: center; border-bottom: 1px solid var(--edge); } .events-hero { background-image: linear-gradient(90deg, rgba(11,11,13,.88), rgba(11,11,13,.42)), url("media/brand/flowerbomb-lounge-1400.webp"); } .referral-hero { background-image: linear-gradient(90deg, rgba(11,11,13,.9), rgba(11,11,13,.4)), url("media/ylohero.webp"); } .events-hero .lede, .referral-hero .lede { max-width: 48rem; color: var(--chalk); margin-top: 1rem; } .referral-hero .btn { margin-top: 1.5rem; } .event-grid, .referral-grid { display: grid; gap: 1rem; grid-template-columns: repeat(3, 1fr); } .event-card, .referral-grid article { padding: clamp(1.2rem, 3vw, 1.8rem); background: var(--slab); border: 1px solid var(--edge); border-radius: var(--radius); } .event-card { display: flex; flex-direction: column; align-items: flex-start; gap: .85rem; } .event-card h3, .referral-grid h3 { font-size: 1.3rem; } .event-card p, .referral-grid p { color: var(--ash); font-size: var(--t-small); } .event-card__date, .event-card__place, .referral-grid article > span { font-family: var(--f-label); font-size: .65rem; font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; } .event-card__date, .referral-grid article > span { color: var(--ember); } .event-card__place { color: var(--chalk) !important; margin-top: auto; } .referral-grid article > span { display: block; margin-bottom: 1rem; } @media (max-width: 760px) { .event-grid, .referral-grid { grid-template-columns: 1fr; } } /* One continuous image field spans the Shop heading and its filter controls. */ .shop-header { background-image: linear-gradient(90deg, rgba(11,11,13,.78) 0%, rgba(11,11,13,.58) 52%, rgba(11,11,13,.48) 100%), url("media/ylohero.webp"); background-size: cover; background-position: center 65%; border-bottom: 1px solid var(--edge); } .shop-hero .lede { max-width: 48rem; color: var(--chalk); } @media (max-width: 700px) { .shop-header { background-position: 60% center; background-image: linear-gradient(rgba(11,11,13,.7), rgba(11,11,13,.76)), url("media/ylohero.webp"); } } /* The drop-list band closes the page. Asset swapped twice now: a grey-bowl ashtray, then an orange one, and now `img/bg/yloash.webp` — the branded FlowerBomb ashtray shot flat on the yellow field, which is the same backdrop the category heroes use. The scrim value survived the swap but the binding constraint moved, so the numbers below are not the old ones re-labelled. On the dark photos the tightest element was the eyebrow (small ember text). On a bright, near-uniform yellow field the eyebrow has enormous headroom (10.6:1) and the limit is now the --ash body copy, whose luminance sits much closer to a lightly-scrimmed yellow. Same method as `.steps`: sweep the mid-stop against the real rendered pixels behind each real element. mid-stop body ratio (--ash, the binding constraint now) .78 4.27 FAILS .82 4.80 passes, but only 0.30 over the floor .85 5.27 shipped — 0.77 margin, eyebrow 10.6, h2 12.8 .91 6.11 darker than it needs to be; buries the artwork Note the direction of the trade here: lightening the scrim to show off the branded ashtray is the obvious instinct and it is not available. .78 is the first stop where the artwork really reads, and it fails. */ .section--photo { position: relative; isolation: isolate; background-image: linear-gradient(180deg, rgba(11,11,13,.89) 0%, rgba(11,11,13,.85) 50%, rgba(11,11,13,.89) 100%), image-set(url("img/bg/yloash.webp") 1x); background-size: cover; background-position: 50% 45%; background-repeat: no-repeat; border-block: 1px solid var(--edge); } @media (max-width: 700px) { /* More headroom again at the -900 crop; same margin discipline. */ .section--photo { background-image: linear-gradient(180deg, rgba(11,11,13,.87) 0%, rgba(11,11,13,.84) 50%, rgba(11,11,13,.87) 100%), image-set(url("img/bg/yloash-900.webp") 1x); } } /* Eyebrow → heading. Every section opens with a two-or-three-word mono eyebrow so the headline never has to explain itself. */ .eyebrow { font-family: var(--f-label); font-size: var(--t-label); font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-label); color: var(--ash); display: block; margin-bottom: .7rem; } .eyebrow--accent { color: var(--ember); } h1, h2, h3 { font-weight: 400; line-height: .95; text-transform: uppercase; letter-spacing: .005em; } /* Headings share the same left edge as their eyebrow and body copy. This is more important than compensating for a tiny font-side bearing: on desktop the old negative margin made the hero and every section heading drift left of the shared content grid. */ h1 { font-family: var(--f-h1); font-size: var(--t-hero); margin-left: 0; } h2 { font-family: var(--f-h2); font-size: var(--t-h2); margin-left: 0; } h3 { font-family: var(--f-h3); font-size: var(--t-h3); line-height: 1.1; } .lede { color: var(--ash); max-width: var(--narrow); font-size: 1.09rem; } .head { margin-bottom: clamp(2.1rem, 3.8vw, 3.2rem); } .head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; } /* --- Buttons --------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-family: var(--f-label); font-size: var(--t-label); font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-label); padding: 1rem 1.85rem; border-radius: var(--radius-ctl); border: 1px solid transparent; text-decoration: none; cursor: pointer; transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease; } /* --ember-lo is the solid Drop DC purple used beneath white button text. */ .btn--primary { background: var(--ember-lo); color: var(--on-ember); } .btn--primary:hover { background: var(--ember); color: var(--on-ember); transform: translateY(-1px); } .btn--ghost { background: transparent; color: var(--chalk); border-color: #fff; } .btn--ghost:hover, .btn--ghost:focus-visible { border-color: var(--ember); color: var(--ember); } .btn--outline-white { border-color: #fff; } .btn--block { width: 100%; } .btn--sm { padding: .65rem 1.2rem; font-size: .66rem; } /* The roomier desktop padding tips the hero's two CTAs onto separate rows at 375px, which shoves the ZIP check — the highest-value thing in the hero — below the fold. Pull the horizontal padding back on small screens so the pair sits on one line again. */ @media (max-width: 480px) { .btn { padding: .9rem 1.25rem; } } @media (prefers-reduced-motion: reduce) { .btn:hover { transform: none; } } /* --- 3a. FIGURES ------------------------------------------------ A monospace aligned every numeral for free. A proportional sans does not: in a product grid, "$88.00" and "$125.00" stop sharing a decimal column, and a per-second countdown visibly jitters as 1s and 0s swap width. Syne is unusually bad about this: its `1` is barely half the width of its `0`. Measured at 40px/700, "111111" sets 93.6px proportional against 177.1px for "000000" — an 84px swing inside six glyphs. Left alone, a price column would look broken. Syne does ship `tnum`, and it fully equalises them (both 169.9px). Test any replacement face the same way before trusting it — a display face that silently lacks the feature will fail this quietly, at which point the #timer-val reservation below is the only thing still holding. */ .card__price, .card__was, .tier__from, .price-from, .line__price, .qty span, .drawer__total, .timer, .progress__txt, .trust__val, .result-count, .card__meta { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* The countdown is the only figure that rewrites itself every second, so it is the only one where width instability is actually visible. Reserve the box. */ #timer-val { display: inline-block; min-width: 4.4ch; text-align: left; } /* --- Tags / pills ---------------------------------------------- */ .tag { display: inline-flex; align-items: center; gap: .35rem; font-family: var(--f-label); font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-label); padding: .3rem .7rem; border-radius: var(--radius-ctl); background: var(--slab-2); color: var(--ash); border: 1px solid var(--edge); } .tag--gold { color: var(--gold); border-color: rgba(232,180,74,.35); } .tag--live { color: var(--live); border-color: rgba(69,214,127,.35); } .tag--sale { background: var(--ember-lo); color: var(--on-ember); border-color: transparent; } .tag--sold-out { background: #a32121; color: #fff; border-color: transparent; } .account-icon, [data-open="drawer"], a[href="referrals.html"], .drawer, #checkout { display: none !important; } .telegram-header svg { width: 1.15rem; height: 1.15rem; fill: currentColor; stroke: none; } .menu-action { border-color: var(--ember); color: var(--ember); } .telegram-action { background: #229ed9; border-color: #229ed9; color: #fff; } .telegram-action:hover { background: #1d8bc2; border-color: #1d8bc2; } #telegram-chat-button { position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem); z-index: 80; display: inline-flex; align-items: center; gap: .55rem; min-height: 3rem; padding: .65rem 1rem; border-radius: var(--radius-ctl); background: #229ed9; color: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.3); font-family: var(--f-label); font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-decoration: none; text-transform: uppercase; } #telegram-chat-button:hover { background: #1d8bc2; transform: translateY(-1px); } #telegram-chat-button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } #telegram-chat-button svg { width: 1.15rem; height: 1.15rem; fill: currentColor; } @media (max-width: 499px) { #telegram-chat-button span { display: none; } #telegram-chat-button { padding: .85rem; } } @media (max-width: 999px) { #telegram-chat-button { display: none; } } @media (min-width: 1000px) { #telegram-chat-button { right: calc(clamp(1rem, 2.2vw, 2rem) + 5rem); bottom: 1.25rem; } } /* --- Reveal on scroll ------------------------------------------ Position check, not a bare IntersectionObserver: on an anchor-nav page a jump to #shop moves earlier sections from below the viewport to above it with no threshold crossing, and they stay invisible forever. Guarded here plus a 4s timeout failsafe in app.js. Content loss > missed animation. */ .reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; } .reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } } /* ============================================================ 4. AGE GATE — blocking, focus-trapped, remembered for the browser session The source site ships age-gate styles but renders no gate. In this category that is the most serious defect available: a compliance exposure and an ad-platform disqualifier, fixed in ~40 lines. ============================================================ */ .gate { position: fixed; inset: 0; z-index: var(--z-gate); background: var(--void); display: grid; place-items: center; padding: var(--gutter); } .gate[hidden] { display: none; } /* Legacy markup is present in every static page as a no-JS fallback. Keep it out of sight while the entry-pass session check runs, so navigating with a valid pass never flashes the retired yes/no age panel. */ .gate:not(.is-ready) .gate__panel { display: none; } .gate__panel { max-width: 30rem; text-align: center; border: 1px solid var(--edge); background: var(--slab); border-radius: var(--radius); padding: clamp(1.8rem, 5vw, 3rem); } .gate__panel h2 { font-size: 1.6rem; margin-bottom: .8rem; } .gate__panel p { color: var(--ash); font-size: var(--t-small); margin-bottom: 1.4rem; } /* After .gate__panel p — same specificity class, so source order decides. */ .gate__panel .gate__mark { font-family: var(--f-display); font-size: 3.4rem; line-height: 1; color: var(--ember); margin-bottom: .4rem; } .gate__actions { display: grid; gap: .7rem; } .gate__form { display: grid; gap: .85rem; text-align: left; } .gate__form .field__label { margin-bottom: -.35rem; } .gate__form input[type="email"], .gate__form input[type="text"] { width: 100%; background: var(--void); border: 1px solid var(--edge); border-radius: var(--radius-ctl); padding: .85rem 1rem; color: var(--chalk); } .gate__form input:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; } .gate__form .check { font-size: .8rem; } .gate__error { min-height: 1.25em; margin: 0 !important; color: var(--warn) !important; text-align: center; } .gate__back { appearance: none; border: 0; background: transparent; color: var(--ash); text-decoration: underline; cursor: pointer; font: inherit; font-size: .82rem; } .gate__back:hover { color: var(--chalk); } .gate__fine { margin-top: 1.4rem; font-size: .78rem; color: var(--ash); border-top: 1px solid var(--edge); padding-top: 1rem; } .gate__deny { display: none; margin-top: 1rem; color: var(--warn); font-family: var(--f-label); font-size: var(--t-label); text-transform: uppercase; letter-spacing: var(--track-label); } .gate.is-denied .gate__deny { display: block; } .gate.is-denied .gate__actions { display: none; } /* ============================================================ 5. ANNOUNCEMENT BAR + HEADER ============================================================ */ /* PROMO MARQUEE. Note this reverses the "no marquee" rule in reference.md §5 — deliberately, and only here. That rule is about the source site's TRUST ticker: one static claim ("650+ reviews") set moving purely for decoration, which buys nothing and costs reduced-motion compliance. This bar is a different job: several live promos, each its own link, more than fit on one line. Motion is what makes the second and third offer reachable at all. Speed is constant in px/sec, not a fixed duration — a fixed duration makes the bar accelerate every time the merchant adds a message, which is exactly the setting they'll touch most. app.js measures the track and derives the duration from --bar-speed. */ .bar { background: var(--ember-lo); color: var(--on-ember); min-height: var(--bar-h); display: flex; align-items: center; overflow: hidden; --bar-speed: 55; /* px per second */ --bar-dur: 40s; /* replaced by app.js once measured */ } .bar__viewport { display: flex; width: 100%; overflow: hidden; } /* Two identical tracks sit inside ONE animated wrapper which translates -50% of itself. Because the wrapper holds exactly two identical copies, -50% is exactly one copy's width, so when copy 1 has fully exited, copy 2 sits precisely where copy 1 began and the restart is invisible. The animation must stay on the wrapper. It was previously on each track, with each translating -100% of its own width — which is geometrically equivalent but only while both animations share a phase, and they did not: the original starts at first paint, the clone starts when app.js appends it. The two drifted apart and the promo text overlapped itself. One element cannot fall out of step with itself. The clone is aria-hidden so the promo list isn't announced twice. */ .bar__run { display: flex; flex: 0 0 auto; animation: bar-scroll var(--bar-dur) linear infinite; will-change: transform; } .bar__track { display: flex; align-items: center; flex: 0 0 auto; margin: 0; padding: 0; list-style: none; } @keyframes bar-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Pause on hover so a reader can finish a line, and on focus-within so a keyboard user can actually reach and read the links inside. */ .bar:hover .bar__run, .bar:focus-within .bar__run { animation-play-state: paused; } .bar__item { flex: none; display: inline-flex; align-items: center; padding: .55rem 0; margin-right: 2.6rem; font-family: var(--f-label); font-size: var(--t-label); font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-label); white-space: nowrap; } /* Separator drawn after the text rather than between items, so it survives the wrap-around join without doubling up or dropping out. */ .bar__item::after { content: ""; width: 5px; height: 5px; margin-left: 2.6rem; background: currentColor; opacity: .5; transform: rotate(45deg); } /* The bar's fill is --ember-lo, set on .bar above, but this rule is detached from it — so it survived the accent flip as white-on-yellow (1.67:1) and only showed up when the rendered pixels were measured rather than the tokens. Inherit the bar's own text colour instead of restating one, and it cannot drift out of sync again. */ .bar a { color: inherit; text-underline-offset: 3px; } .bar a:hover { text-decoration-thickness: 2px; } /* Reduced motion: stop entirely and hand the user a scrollable strip instead. Freezing the animation alone would strand every message after the first off-screen — the promos still have to be reachable. */ @media (prefers-reduced-motion: reduce) { .bar__viewport { overflow-x: auto; scrollbar-width: none; } .bar__viewport::-webkit-scrollbar { display: none; } /* Both selectors on purpose. The animation moved from .bar__track to the .bar__run wrapper when the two-element phase bug was fixed; app.js also skips building the wrapper entirely under reduced motion, so in practice only one of these ever matches. Naming both means neither a stale run left over from a motion-preference toggle nor a future move of the animation can quietly start it running for someone who asked it not to. */ .bar__run, .bar__track { animation: none; } .bar__run { transform: none; } .bar__track[aria-hidden="true"] { display: none; } .bar__item:last-child::after { display: none; } } .header { position: sticky; top: 0; z-index: var(--z-header); background: rgba(11,11,13,.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--edge); } .header__inner { min-height: var(--header-h); display: flex; align-items: center; gap: 1.2rem; } /* Top-of-page visual controls — intentionally compact so they are useful for exploring a direction without competing with the shopping UI. */ .style-controls { background: var(--slab); border-bottom: 1px solid var(--edge); } .style-controls__inner { min-height: 2.75rem; display: flex; align-items: center; justify-content: flex-end; gap: .65rem; flex-wrap: wrap; padding-block: .35rem; } .style-controls label { display: flex; align-items: center; gap: .55rem; color: var(--ash); font-family: var(--f-label); font-size: .62rem; font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; } .style-controls input[type="range"] { width: min(18vw, 9rem); accent-color: var(--ember); cursor: ew-resize; } .style-controls__swatch { width: .8rem; height: .8rem; border-radius: 50%; background: var(--ember); border: 1px solid var(--edge); } .style-controls__hex { min-width: 4.7rem; color: var(--chalk); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .7rem; letter-spacing: .03em; } .style-controls button { min-width: 5.3rem; min-height: 1.8rem; padding: .25rem .5rem; border: 1px solid var(--edge); border-radius: var(--radius-ctl); background: var(--void); color: var(--chalk); font-family: var(--f-label); font-size: .62rem; font-weight: 700; letter-spacing: .04em; cursor: pointer; } .style-controls__type { display: flex; align-items: center; gap: .45rem; } .style-controls select { min-height: 1.8rem; max-width: 8.7rem; padding: .2rem .4rem; border: 1px solid var(--edge); border-radius: var(--radius-ctl); background: var(--void); color: var(--chalk); font-family: var(--f-label); font-size: .62rem; } .style-controls__type button { min-width: 4.9rem; } .style-controls__export { min-width: 7.9rem !important; } .style-controls button[aria-pressed="true"] { border-color: var(--ember); background: color-mix(in srgb, var(--ember) 18%, var(--void)); color: var(--ember); } .style-controls button:hover { border-color: var(--ember); color: var(--ember); } @media (max-width: 520px) { .style-controls__inner { min-height: 2.35rem; justify-content: center; flex-wrap: wrap; gap: .35rem; } .style-controls label { font-size: 0; gap: 0; } .style-controls input[type="range"] { width: 4.35rem; } .style-controls__swatch { width: .65rem; height: .65rem; flex: 0 0 auto; } .style-controls__hex { min-width: 3.9rem; font-size: .6rem; } .style-controls button { min-width: 0; padding: .24rem .34rem; font-size: .54rem; } .style-controls__type { width: 100%; justify-content: center; } .style-controls select { max-width: 6.8rem; font-size: .54rem; } } /* Local page editor — available from the visual-controls bar. */ body.is-page-editing { padding-right: min(25rem, 34vw); } body.is-page-editing main section, body.is-page-editing > footer { cursor: crosshair; } body.is-page-editing main section:hover, body.is-page-editing > footer:hover { outline: 2px dashed color-mix(in srgb, var(--ember) 76%, transparent); outline-offset: -4px; } .is-editor-selected { outline: 3px solid var(--ember) !important; outline-offset: -4px; } .section-editor { position: fixed; z-index: calc(var(--z-gate) - 1); inset: 0 0 0 auto; width: min(25rem, 34vw); display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; border-left: 1px solid var(--edge); background: var(--slab); box-shadow: -1rem 0 3rem rgba(0,0,0,.35); } .section-editor[hidden] { display: none; } .section-editor header { display: flex; align-items: start; justify-content: space-between; gap: .8rem; padding: 1.1rem 1rem .8rem; border-bottom: 1px solid var(--edge); } .section-editor header .eyebrow { margin-bottom: .35rem; font-size: .6rem; } .section-editor h2 { font-size: 1.35rem; } .section-editor header button { width: 2rem; height: 2rem; border: 0; background: transparent; color: var(--ash); font-size: 1.5rem; cursor: pointer; } .section-editor__hint { padding: .85rem 1rem; border-bottom: 1px solid var(--edge); color: var(--ash); font-size: .78rem; line-height: 1.45; } .section-editor__fields { min-height: 0; overflow: auto; display: grid; align-content: start; gap: .8rem; padding: 1rem; } .section-editor__field { display: grid; gap: .35rem; } .section-editor__field > span { color: var(--ash); font-family: var(--f-label); font-size: .59rem; font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; } .section-editor__field input, .section-editor__field textarea { width: 100%; border: 1px solid var(--edge); border-radius: var(--radius-ctl); background: var(--void); color: var(--chalk); font: inherit; font-size: .84rem; line-height: 1.45; padding: .55rem .65rem; resize: vertical; } .section-editor__field input:focus, .section-editor__field textarea:focus { outline: 2px solid var(--ember); outline-offset: 1px; } .section-editor footer { display: flex; gap: .6rem; justify-content: flex-end; padding: .85rem 1rem; border-top: 1px solid var(--edge); } @media (max-width: 820px) { body.is-page-editing { padding-right: 0; padding-bottom: min(70svh, 34rem); } .section-editor { inset: auto 0 0; width: 100%; height: min(70svh, 34rem); border-top: 1px solid var(--edge); border-left: 0; } } /* BRAND LOCKUP. Both supplied logos are STACKED (mascot over wordmark). Scaled to fit a ~58px header bar a stacked lockup lands around 52px wide and the words stop being readable, so the header composes its own horizontal lockup instead: the mascot as an image mark, "FLOWER BOMB" as real text. That stays sharp at any size, keeps the accessible name in the DOM rather than hidden behind a background image, and mirrors the supplied wordmark's weight split — solid "FLOWER", grey "BOMB". The full stacked artwork (media/brand/flowerbomb-stacked-*.webp) is the right choice for large placements: share image, 404, print. */ .brand { display: inline-flex; align-items: center; gap: .5rem; flex: 0 0 auto; margin-right: auto; text-decoration: none; line-height: 1; } .brand::before { content: ""; flex: 0 0 auto; height: clamp(1.85rem, 3.2vw, 2.4rem); /* 512x424 source crop — keep the ratio so the mascot never distorts. */ aspect-ratio: 512 / 424; background: url("media/brand/flowerbomb-mark-96.webp") center / contain no-repeat; } @media (min-resolution: 1.5dppx) { .brand::before { background-image: url("media/brand/flowerbomb-mark-192.webp"); } } .brand__word { font-family: var(--f-display); font-size: clamp(1rem, 2vw, 1.4rem); letter-spacing: .015em; text-transform: uppercase; color: var(--chalk); white-space: nowrap; } .brand__word em { font-style: normal; color: var(--ash); } body.theme-light .brand__word { color: var(--void); } @media (max-width: 520px) { .header__inner { gap: .45rem; } /* height now comes from --header-h */ .brand { gap: .4rem; } .brand::before { height: 1.75rem; } .brand__word { font-size: .95rem; } .header__tools { gap: .05rem; } .icon-btn { width: 39px; height: 40px; } } .nav { display: none; } @media (min-width: 1000px) { .nav { display: flex; align-items: center; gap: .3rem; } } .nav__item { position: relative; } .nav__link { display: inline-flex; align-items: center; gap: .35rem; font-family: var(--f-label); font-size: var(--t-label); font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-label); padding: .7rem .85rem; text-decoration: none; color: var(--chalk); background: none; border: 0; cursor: pointer; border-radius: var(--radius); } .nav__link:hover, .nav__link[aria-expanded="true"] { color: var(--ember); } .nav__link[aria-current="page"] { color: var(--ember); } .account-icon.is-authed { color: var(--ember); border-color: color-mix(in srgb, var(--ember) 55%, var(--edge)); } /* Tier mega-menu. The best idea recovered from the source: flower sorted by QUALITY TIER, not strain. Tiers map to budget, which is how people actually shop; the glyph set is a price ladder rendered as an icon; and every tier becomes its own indexable collection page. */ .mega { position: absolute; top: 100%; left: 0; min-width: 17rem; background: var(--slab); border: 1px solid var(--edge); border-radius: var(--radius); box-shadow: var(--shadow); padding: .5rem; list-style: none; } .mega[hidden] { display: none; } .mega a { display: flex; align-items: center; gap: .6rem; padding: .55rem .7rem; border-radius: var(--radius); text-decoration: none; font-size: var(--t-small); } .mega a:hover { background: var(--slab-2); color: var(--ember); } /* Product categories read faster as clean text in the dropdown; the old emoji markers were decorative noise beside already-specific labels. */ .mega .tier-mark { display: none; } .mega .price-from { margin-left: auto; font-family: var(--f-label); font-size: .66rem; letter-spacing: .04em; /* colour set by the price rule */ } .header__tools { display: flex; align-items: center; gap: .35rem; } .icon-btn { display: grid; place-items: center; width: 42px; height: 42px; background: none; border: 0; cursor: pointer; border-radius: var(--radius-ctl); position: relative; } .icon-btn:hover { background: var(--slab-2); } .icon-btn svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .icon-btn--social { color: var(--ash); } .icon-btn--social:hover, .icon-btn--social:focus-visible { color: var(--ember); } @media (max-width: 480px) { .icon-btn--social { width: 36px; height: 42px; } } .cart-count { position: absolute; top: 4px; right: 3px; min-width: 18px; height: 18px; border-radius: var(--radius-pill); background: var(--ember-lo); color: var(--on-ember); font-family: var(--f-label); font-size: .62rem; font-weight: 700; display: grid; place-items: center; padding: 0 4px; } .cart-count[data-count="0"] { display: none; } @media (min-width: 1000px) { .icon-btn--menu { display: none; } } /* Mobile drawer nav */ .mnav { position: fixed; inset: 0; z-index: var(--z-drawer); background: rgba(0,0,0,.6); } .mnav[hidden] { display: none; } .mnav__panel { position: absolute; inset-block: 0; left: 0; width: min(88vw, 21rem); background: var(--slab); border-right: 1px solid var(--edge); padding: 1.2rem; overflow-y: auto; } .mnav__panel a { display: block; padding: .75rem .2rem; text-decoration: none; border-bottom: 1px solid var(--edge); font-family: var(--f-label); font-size: var(--t-label); font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-label); } .mnav__panel a.is-sub { padding-left: 1.2rem; text-transform: none; letter-spacing: 0; font-family: var(--f-body); font-size: var(--t-small); color: var(--ash); } /* ============================================================ 6. HERO — photo (or video) bed, zip gate INSIDE it The source puts its pickup details three sections down. Moving it into the hero answers "can I even get this?" before the visitor spends any attention on inventory they may not be able to buy. Two coats of paint share this markup: · The rules directly below are the DARK-HERO BASELINE — chalk text on a scrim over dark subject matter. This is what a video hero or a dark/desaturated photo hero should use, unmodified. · `.hero--poster`, lower in this file, OVERRIDES this baseline for the shipped art, which is a bright orange field where chalk-on-dark fails outright (3.32:1). That's the block actually in effect on the current build — see README "Re-tuning the hero scrim" before touching either. Swap the art back to something dark and `.hero--poster` becomes unnecessary (drop the class from the markup); the baseline here still works as-is. ============================================================ */ /* grid-template-columns is NOT decorative here — it fixes a real bug. With `display:grid` and no explicit column, the single implicit column track is auto-sized (its width comes FROM its content), which makes it an INDEFINITE containing block for that content. .hero__inner's own width formula, `width: min(100% - (var(--gutter) * 2), var(--content))`, includes a percentage — and a percentage width resolved against an indefinite containing block doesn't reliably produce "100% of the visible 375px hero," so the gutter subtraction landed short: measured 357.5px wide (~one gutter's worth too wide) instead of the correct 339.8px, with the excess entirely on the right — the ZIP form (and everything else in .hero__inner) sat flush against the viewport edge on mobile. `minmax(0, 1fr)` makes the track explicit and definite (100% of `.hero`, full stop), which resolves the percentage correctly — verified against the live layout: 339.8px / 17.6px gutter both sides, matching every other `.wrap` on the page. The `minmax(0, ...)` half matters too: a bare `1fr` track still carries grid's automatic min-width:auto, which sizes the track to its content's minimum and can overflow — same family of bug as `min-width:0` on the flex children elsewhere in this file (.chips). */ .hero { position: relative; isolation: isolate; overflow: hidden; min-height: clamp(30rem, 78vh, 46rem); display: grid; grid-template-columns: minmax(0, 1fr); align-items: end; } .hero__bed { position: absolute; inset: 0; z-index: -2; background: var(--void); } .hero__bed picture { display: contents; } .hero__bed img, .hero__bed video { width: 100%; height: 100%; object-fit: cover; } /* Baseline object-position, tuned for a subject sitting hard right against a dark field (true of the original video hero; would suit e.g. a dark product shot the same way). Whether this shifts anything depends on which axis `cover` actually overflows — check before reusing these numbers on new art; see README "Re-tuning the hero scrim" step 3 for the measurement. */ .hero__video { object-position: 68% center; } .hero__img { object-position: center; } /* The hero sits on photography, so --edge (a near-black hairline tuned for the dark page ground) all but disappears against it — the ghost button read as floating text with no affordance. White is the only border that holds against every frame of the art. Declared BEFORE the .hero-text-* pair below on purpose: those are the dev style-panel's manual overrides and carry the same specificity, so they must come later to keep winning. In production neither class is applied, which is exactly why this default was needed. */ .hero--image .hero__cta .btn--ghost { border-color: #fff; } .hero--image .hero__cta .btn--ghost:hover, .hero--image .hero__cta .btn--ghost:focus-visible { border-color: var(--ember); color: var(--ember); } .hero-text-white h1, .hero-text-white .hero__sub { color: #fff; } .hero-text-white .hero__sub { opacity: .92; } .hero-text-white .eyebrow { color: #fff; } .hero-text-white .hero__cta .btn--ghost { color: #fff; border-color: rgba(255,255,255,.68); } .hero-text-black h1, .hero-text-black .hero__sub { color: #0b0b0d; } .hero-text-black .hero__sub { opacity: .92; } .hero-text-black .eyebrow { color: #0b0b0d; } .hero-text-black .hero__cta .btn--ghost { color: #0b0b0d; border-color: rgba(11,11,13,.55); } /* Scrim. This is a VERBATIM COPY of the .shop-header gradient, which is also what .cat-hero-overlay__scrim uses — all three heroes on the site now carry the same wash, so moving between them does not change how the photography reads. Change one, change all three; there is no shared token because each applies it differently (background-image stack here and on .shop-header, a real element on the category pages). It replaced a two-layer scrim: a horizontal wash from .92 that cleared completely by 82%, plus a vertical wash that ran .62 at the top down to .88 at the bottom. Stacked, those put roughly .95 alpha over the left half and nothing over the right, which is what made the fade read as a hard edge with the photograph only surviving in one corner. One gentle horizontal pass keeps the whole frame. Losing the vertical layer means the hero no longer self-darkens under the header or at the fold. That is deliberate and matches the other two — but it is the thing to re-check first if header text ever stops reading. */ .hero__bed::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11, 11, 13, .78) 0%, rgba(11, 11, 13, .58) 52%, rgba(11, 11, 13, .48) 100%); } /* Below the split the copy spans full width, so the horizontal wash has nowhere to clear to — and on a sufficiently tall-relative-to-wide box there may be no vertical escape either (a 16:9 source in a narrow phone hero can have zero vertical overflow, making the Y half of object-position inert; measure before assuming it helps). Baseline mobile response: drop the horizontal wash, go near-uniform dark, and let the subject read as texture rather than a focal point. */ @media (max-width: 899px) { .hero__video { object-position: 60% center; } /* At 375x633 the hero box is 0.59:1 against a 1.78:1 frame, so `cover` shows barely a third of the image width — centred, that window is 33%-67% of the source and the ashtray, which lives at 65%-94%, is almost entirely off-screen. Pushing the crop to 93% puts the window at 62%-95% and the whole subject back in the frame. Re-derive this number if the art changes: window width = (box ratio / image ratio), and object-position p places its left edge at p x (1 - window width). */ .hero__img { object-position: 93% center; } .hero__bed::after { background: linear-gradient(180deg, rgba(11,11,13,.55) 0%, rgba(11,11,13,.64) 30%, rgba(11,11,13,.88) 62%, rgba(11,11,13,.97) 100%); } } /* ---- .hero--poster : bright artwork, inverted copy --------------- The shipped hero art is a saturated orange field (#f93b0c) with the product cluster on the right. Everything above assumes a DARK frame, and none of it survives contact with this one: chalk on raw orange 3.32:1 FAILS near-black on raw orange 5.30:1 passes ember CTA vs raw orange 1.35:1 the button effectively vanishes That last number is the decisive one. A scrim heavy enough to rescue white text (~.75 alpha) turns #f93b0c into #46170d — at which point the art is a dark red rectangle and there was no reason to shoot it orange. So this hero inverts instead: near-black copy, near-black primary button, and only a light scrim to settle the field and blend the bottom edge into the page. The result reads as a printed poster panel above a dark site, which is a stronger use of the asset than hiding it. */ .hero--poster .hero__bed::after { background: /* barely-there horizontal lift so the flat field has some depth */ linear-gradient(90deg, rgba(120,26,4,.20) 0%, rgba(120,26,4,.06) 45%, rgba(120,26,4,0) 70%), /* bottom fade into --void so the panel doesn't end on a hard seam */ linear-gradient(180deg, rgba(11,11,13,.10) 0%, rgba(11,11,13,0) 22%, rgba(11,11,13,0) 62%, rgba(11,11,13,.55) 92%, rgba(11,11,13,.92) 100%); } .hero--poster .hero__img { object-position: 62% center; } /* Sizing here is doing accessibility work, not just styling. Measured against the real pixels, near-black on this field lands at 4.00:1 (h1's old colour) and 4.33:1 (sub). WCAG wants 4.5:1 for body copy but only 3:1 for large text — ≥24px, or ≥18.66px bold — so both clear their floor comfortably *at these sizes* and would fail if the sub were left at its usual 17px. Don't shrink either. h1 is chalk, by request — every other hero element (eyebrow, sub, buttons) stays near-black. That split creates a real constraint, not just a colour choice: h1 and .hero__sub both sit directly on the shared field scrim below, and they need it to move in OPPOSITE directions — white text wants the field darker, near-black text wants it lighter. One shared gradient cannot satisfy both, so the scrim itself was left alone (still tuned for the dark-text elements) and h1 gets its own, independent fix instead. */ .hero--poster h1 { color: var(--chalk); /* Measured (canvas-sampled against the real composited pixels, same method as the rest of this file) worst case on the flat scrim alone: 3.36:1 — clears the 3:1 large-text floor (112px desktop / 46px mobile) but with a thin margin, at the trailing edge of the wrapped line ("10."), where both the horizontal and vertical washes have faded to nearly nothing. That's thinner than every other margin in this file, which is deliberately avoided elsewhere (see "Photo band contrast" in the README) — and here the scrim can't just get heavier, per the constraint above. A soft shadow is the standard fix for light text over photography, adds real legibility a flat-color contrast formula doesn't capture, and — critically — is scoped to h1 alone: it cannot touch the sub-headline's or eyebrow's numbers, unlike any shared-gradient change would. */ text-shadow: 0 2px 20px rgba(0,0,0,.55), 0 1px 4px rgba(0,0,0,.7); } .hero--poster .hero__sub { color: var(--void); opacity: .88; } /* 24px is a threshold, not a preference. WCAG's large-text exemption starts at 24px (or 18.66px bold); at 21px this paragraph was still body copy needing 4.5:1 and measured 4.21. `min()` rather than `clamp()` so the floor cannot drift back under 24px on a narrow desktop. Scoped to the light-field branch — below 900px the hero inverts to chalk on a darkened field and the normal body size is fine. */ @media (min-width: 900px) { .hero--poster .hero__sub { font-size: min(1.7rem, max(1.5rem, 1.55vw)); } } /* The eyebrow is 11.5px and cannot be sized into the large-text exemption, so it stops relying on the field entirely and gets its own black chip. Text on the chip is 16.8:1; the chip against the orange is 5.30:1, well past the 3:1 a UI component needs. Reads as a printed label, which suits the poster. */ .hero--poster .eyebrow { display: inline-block; margin-bottom: 1rem; background: var(--void); color: var(--chalk); padding: .4rem .7rem; border-radius: var(--radius-ctl); } /* The primary CTA goes near-black. On orange that is 5.30:1 against the field — far past the 3:1 floor for a UI component — where the ember fill sat at 1.35:1 and disappeared. White on near-black inside the button is 16.8:1. */ .hero--poster .btn--primary { background: var(--void); border-color: var(--void); color: #fff; } .hero--poster .btn--primary:hover { background: #000; border-color: #000; } .hero--poster .btn--ghost { color: #fff; border-color: #fff; } .hero--poster .btn--ghost:hover { background: transparent; border-color: var(--ember); color: var(--ember); } .hero--poster :focus-visible { outline-color: var(--void); } /* MOBILE — reframe, don't recolour. The first attempt flipped the copy to chalk here and measured 1.28:1 on the h1: white on near-raw orange is hopeless, and a scrim heavy enough to save it (~.75) would have erased the artwork on the one device that matters most in this category. The real problem is framing. At 375px a 16:9 source scales to 1125x633 in a 375x633 box — zero vertical overflow, and only 33% of the width visible. At 58% that window lands on the product cluster, so full-width copy was sitting over a grinder and a lighter. Panning to the flat left field instead gives the text a uniform ground, and the same near-black treatment as desktop works untouched. The cluster is lost on small screens; a flat orange panel with black type is the better trade. */ @media (max-width: 899px) { .hero--poster .hero__img { object-position: 6% center; } .hero--poster .hero__bed::after { background: linear-gradient(180deg, rgba(120,26,4,.06) 0%, rgba(120,26,4,.04) 55%, rgba(11,11,13,.45) 90%, rgba(11,11,13,.94) 100%); } } /* The hero is a pure accent field, not an image treatment. Its colour is controlled by the hue slider, and --hero-ink is calculated in app.js for the strongest available black/white contrast. */ .hero--poster .hero__bed { background: var(--hero-bg); } .hero--poster .hero__bed::after { display: none; } .hero--poster h1 { color: var(--hero-ink); text-shadow: none; } .hero--poster .hero__sub { color: var(--hero-ink); opacity: .86; } .hero--poster .eyebrow { background: var(--hero-ink); color: var(--hero-bg); } .hero--poster .btn--primary { background: var(--hero-ink); border-color: var(--hero-ink); color: var(--hero-bg); } .hero--poster .btn--primary:hover { background: var(--hero-ink); border-color: var(--hero-ink); filter: brightness(.88); } .hero--poster .btn--ghost { color: #fff; border-color: #fff; } .hero--poster .btn--ghost:hover, .hero--poster .btn--ghost:focus-visible { background: transparent; border-color: var(--ember); color: var(--ember); } .hero__inner { padding-block: clamp(3rem, 9vw, 6rem); } .hero h1 { max-width: 16ch; } /* The homepage is designed mobile-first. With the three-line hero lockup, let the H1 occupy the phone viewport instead of inheriting a desktop-sized minimum; it scales smoothly from compact phones through tablet widths. */ @media (max-width: 899px) { .hero h1 { font-size: clamp(3.6rem, 17vw, 6.25rem); line-height: .95; letter-spacing: .01em; } .hero__inner { padding-block: clamp(3.5rem, 12vw, 5.5rem); } } /* Split composition: keep every line of copy inside the opaque half of the scrim. Without this the h1 runs to ~66% and its last line sits over the lit subject at ~.38 scrim — the one place on the page where contrast fails. Capped as a percentage rather than in `ch` so it survives a font swap. */ @media (min-width: 900px) { .hero h1 { max-width: min(16ch, 52%); } .hero__sub { max-width: min(46ch, 44%); } .hero__cta, .zipcheck { max-width: min(34rem, 44%); } } .hero__telegram { display: inline-flex; align-items: center; gap: .55rem; width: fit-content; margin-top: 1rem; color: #229ed9; font-family: var(--f-label); font-size: .9rem; font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; text-underline-offset: .28em; text-decoration-color: currentColor; } .hero__telegram svg { width: 1.25rem; height: 1.25rem; fill: currentColor; flex: none; } .hero__telegram:hover { color: #1d8bc2; } .hero__sub { margin-top: 1rem; max-width: 46ch; color: var(--chalk); font-size: 1.09rem; } .hero__cta { margin-top: 1.8rem; display: flex; gap: .7rem; flex-wrap: wrap; } /* Pickup information panel */ .zipcheck { margin-top: 2rem; max-width: 34rem; background: rgba(20,20,24,.86); backdrop-filter: blur(8px); border: 1px solid var(--edge); border-radius: var(--radius); padding: 1.1rem 1.2rem; } .zipcheck__label { font-family: var(--f-label); font-size: var(--t-label); font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-label); color: var(--ash); display: block; margin-bottom: .6rem; } .zipcheck__row { display: flex; gap: .5rem; } .zipcheck input { flex: 1; min-width: 0; background: var(--void); border: 1px solid var(--edge); border-radius: var(--radius-ctl); padding: .8rem 1.1rem; font-family: var(--f-label); letter-spacing: .1em; } .zipcheck input::placeholder { color: var(--ash); letter-spacing: .1em; } .zipcheck__out { margin-top: .8rem; font-size: var(--t-small); display: none; } .zipcheck__out.is-shown { display: block; } .zipcheck__out.is-ok { color: var(--live); } .zipcheck__out.is-no { color: var(--warn); } /* ============================================================ 7. TRUST ROW The source scrolls this as an infinite marquee. Dropped: motion adds nothing to a static claim and costs prefers-reduced-motion compliance. A still, high-contrast badge row converts the same and loads free. ============================================================ */ .trust { border-block: 1px solid var(--edge); background: var(--slab); } .trust__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--edge); } @media (min-width: 760px) { .trust__grid { grid-template-columns: repeat(4, 1fr); } } /* Three-cell variant. The base 2-column rule would leave the third cell alone on a half-empty second row, so stack cleanly on small screens and go three-across once there is room for the labels to sit on one line. */ .trust__grid--three { grid-template-columns: 1fr; } @media (min-width: 560px) { .trust__grid--three { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 760px) { .trust__grid--three { grid-template-columns: repeat(3, 1fr); } } .trust__cell { background: var(--slab); padding: 1.7rem var(--gutter); display: flex; flex-direction: column; gap: .35rem; align-items: center; text-align: center; } .trust__val { font-family: var(--f-display); font-size: 1.6rem; line-height: 1; text-transform: uppercase; } .trust__val .stars { color: var(--gold); font-size: 1.1rem; letter-spacing: .08em; } .trust__key { font-family: var(--f-label); font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-label); color: var(--ash); } /* ============================================================ 8. TIER LADDER ============================================================ */ .tiers { display: grid; gap: 1.25rem; grid-template-columns: repeat(2, 1fr); } @media (min-width: 760px) { .tiers { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1080px) { .tiers { grid-template-columns: repeat(5, 1fr); } } .tier { background: var(--slab); border: 1px solid var(--edge); border-radius: var(--radius); padding: 1.6rem 1.35rem; text-decoration: none; display: flex; flex-direction: column; gap: .6rem; transition: border-color .18s ease, background .18s ease; } .tier:hover { border-color: var(--ember); background: var(--slab-2); } .tier__mark { font-size: 1.6rem; line-height: 1; } .tier__name { font-family: var(--f-display); font-size: 1.15rem; text-transform: uppercase; line-height: 1.05; } .tier__from { font-family: var(--f-label); font-size: .68rem; letter-spacing: .06em; } /* colour set by the price rule */ .tier__note { font-size: .84rem; color: var(--ash); line-height: 1.45; } /* ============================================================ 9. PRODUCT GRID + CARD ============================================================ */ .grid { display: grid; gap: clamp(1rem, 2vw, 1.75rem); grid-template-columns: repeat(2, 1fr); } @media (min-width: 700px) { .grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1080px) { .grid { grid-template-columns: repeat(4, 1fr); } } .card { position: relative; display: flex; flex-direction: column; background: var(--slab); border: 1px solid var(--edge); border-radius: var(--radius); overflow: hidden; transition: border-color .18s ease, transform .18s ease; } .card:hover { border-color: color-mix(in srgb, var(--ember) 85%, transparent); transform: translateY(-2px); } @media (prefers-reduced-motion: reduce) { .card:hover { transform: none; } } .card.is-out { opacity: .55; } /* Product media sits on a LIGHT PLATE, inset from the card edge. The placeholder — and most real product photography a smoke shop can get from a distributor — is a packshot on a pure-white background. Dropped straight onto the dark card with `cover`, that renders as a hard white rectangle bleeding to the card's corners: it reads as a broken image, and the crop lops the top and bottom off a standing package. So: `contain` the product, put a deliberate light plate behind it, inset the plate so the dark card frames it, and round it to match everything else. Same treatment a printed catalogue uses. `mix-blend-mode: multiply` is what makes the join seamless — white × plate = plate, so the photo's background disappears into the tile with no seam. It works for white and light-grey backgrounds and for transparent PNGs. It does NOT work for photography shot on a dark or coloured ground: multiply will crush those to mud. If the client's photos are dark-ground, drop the blend and switch --plate to a dark value instead. */ .card__media { position: relative; aspect-ratio: 1 / 1; margin: .55rem .55rem 0; border-radius: var(--radius); background: var(--plate); overflow: hidden; isolation: isolate; /* confine the child's blend to this tile */ } .card__media--white, .product-modal__media.product-modal__media--white { background: #fff; } .card__media img { width: 100%; height: 100%; object-fit: contain; padding: 8%; /* keeps the product off the plate edges */ mix-blend-mode: multiply; /* melts a white photo bg into the plate */ } .exotic-lock { position: absolute; z-index: 4; inset: 0; display: grid; place-content: center; justify-items: center; gap: .35rem; padding: 1rem; text-align: center; background: rgba(10,10,12,.96); backdrop-filter: blur(8px); color: #fff; } .exotic-lock__mark { color: var(--ember); font-size: 1.45rem; line-height: 1; } .exotic-lock strong { font-family: var(--f-label); font-size: .78rem; letter-spacing: var(--track-label); text-transform: uppercase; } .exotic-lock > span:not(.exotic-lock__mark) { color: rgba(255,255,255,.68); font-size: .72rem; } .exotic-lock__cta { margin-top: .35rem; padding: .4rem .6rem; border: 1px solid var(--ember); border-radius: var(--radius-ctl); color: var(--ember); font-family: var(--f-label); font-size: .62rem; font-weight: 700; letter-spacing: .04em; text-decoration: none; text-transform: uppercase; } .exotic-lock__cta:hover { background: var(--ember); color: var(--on-ember); } .has-verified-account .exotic-lock { display: none; } .card__badges { position: absolute; top: .5rem; left: .5rem; display: flex; flex-direction: column; gap: .35rem; align-items: flex-start; z-index: 2; } .card__tier { position: absolute; top: .5rem; right: .5rem; z-index: 2; font-size: 1rem; line-height: 1; background: rgba(11,11,13,.82); border-radius: var(--radius-ctl); width: 1.9rem; height: 1.9rem; display: grid; place-items: center; } .card__tier--exotic { color: #b65cff; } .card__tier--indoor { color: var(--gold); } .card__tier--greenhouse { color: #fff; text-shadow: 0 1px 2px #000; } .card__body { padding: .85rem .9rem .9rem; display: flex; flex-direction: column; gap: .4rem; } .card__brand { font-family: var(--f-label); font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-label); color: var(--ash); } .card__name { font-family: var(--f-body); font-weight: 600; font-size: var(--t-small); line-height: 1.3; text-transform: none; letter-spacing: 0; } .card__open { appearance: none; border: 0; padding: 0; color: inherit; background: transparent; font: inherit; text-align: left; cursor: pointer; } .card__open::after { content: ""; position: absolute; inset: 0; z-index: 0; } /* whole-card hit area */ .card__meta { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; font-family: var(--f-label); font-size: .66rem; color: var(--ash); letter-spacing: .04em; } .card__rating { color: var(--gold); display: inline-flex; gap: .25rem; align-items: center; } .card__foot { margin-top: .1rem; padding-top: .25rem; display: flex; align-items: center; gap: .5rem; } .card__price { font-family: var(--f-label); font-weight: 700; font-size: .95rem; letter-spacing: .02em; } /* --- PRICES CARRY THE ACCENT ------------------------------------ Every live price figure is --ember. Note this widens the accent-discipline rule in the token block, which reserved --ember for the primary CTA and the cart badge alone — the trade is real and worth knowing: the "Add" button no longer owns the only warm pixel on a card, so it pulls slightly less on its own. It earns that back by making the price scannable down a column, which is how people actually shop a menu, and price is itself a conversion element here rather than decoration. --ember on --slab measures 5.56:1 — passes AA for body text. .card__was is excluded on purpose: a struck-through former price should recede, and accenting it would advertise the wrong number. */ .card__price, .tier__from, .price-from, strong.line__price, .drawer__total span:last-child { color: var(--ember); } .card__price--sold-out { color: #ff5a5a; text-transform: uppercase; } .card__was { font-family: var(--f-label); font-size: .72rem; color: var(--ash); text-decoration: line-through; } /* Product record — intentionally translucent so it feels like a closer look at the existing menu rather than a separate page. */ .product-modal { position: fixed; inset: 0; z-index: var(--z-gate); padding: clamp(1rem, 4vw, 3rem); display: grid; place-items: center; } .product-modal__scrim { position: absolute; inset: 0; background: rgba(4, 4, 6, .72); backdrop-filter: blur(8px); } .product-modal__panel { position: relative; display: grid; grid-template-columns: minmax(14rem, .85fr) minmax(0, 1.15fr); width: min(100%, 58rem); max-height: min(90vh, 48rem); overflow: auto; background: rgba(27, 27, 33, .9); border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--radius); box-shadow: var(--shadow); backdrop-filter: blur(18px); } .product-modal__close { position: absolute; z-index: 2; top: .75rem; right: .75rem; width: 2.25rem; height: 2.25rem; border: 1px solid var(--edge); border-radius: var(--radius-ctl); background: rgba(11, 11, 13, .82); color: var(--chalk); font-size: 1.7rem; line-height: 1; cursor: pointer; } .product-modal__media { position: relative; min-height: 100%; background: rgba(236, 233, 226, .92); } .product-modal__media img { width: 100%; height: 100%; min-height: 27rem; object-fit: contain; padding: 10%; mix-blend-mode: multiply; } .card__video, .product-modal__video { width: 100%; height: 100%; display: block; object-fit: contain; background: #000; } /* Video tiles ride on a black plate; the cream multiply-blend background is for cutout still photos, not videos. Applies to card tiles AND the modal media panel, catching both mounted and unmounted (lazy) video elements. */ .card__media:has(video), .product-modal__media:has(video) { background: #000; } .product-modal__media:has(video) img { mix-blend-mode: normal; } /* ---------- SECOND-SHOT REVEAL --------------------------------------- Opt-in per record via `imgHover` (MEDIA_OVERRIDES in app.js). The media container gets .has-hover-media and a second, stacked layer; records without one render exactly as before and are untouched by any of this. The second shot must COVER the first, not sit on top of it. Two reasons that is not automatic here: both images are `object-fit: contain`, so a portrait shot letterboxes and leaves the landscape one showing down both sides; and `mix-blend-mode: multiply` means an overlaid layer multiplies into whatever is beneath rather than hiding it. So the primary is faded out on the same curve the secondary fades in — coverage is then total by construction, whatever the two aspect ratios are. .media-hover carries the plate ground and `isolation: isolate` so its child's multiply resolves against that plate and not against the layer below, which is what keeps the two shots looking identically treated. focus-within is not decoration: the card's name is a real button, so a keyboard visitor tabbing the grid gets the same reveal a mouse does. Under (hover: none) there is no pointer to trigger it, so the layer is dropped rather than left sitting invisibly over the product. --------------------------------------------------------------------- */ .has-hover-media { position: relative; } .media-hover { position: absolute; inset: 0; z-index: 1; /* under badges/tier at 2 */ overflow: hidden; isolation: isolate; background: var(--plate); opacity: 0; transition: opacity .25s ease; } .media-hover > img { width: 100%; height: 100%; min-height: 0; max-height: none; /* the modal's 27rem floor */ object-fit: contain; } /* Opt-in per record via `hoverZoom` (MEDIA_OVERRIDES in app.js), for a second shot whose subject sits in the middle third of a much taller frame. `contain` fits the whole bitmap, empty margin included, so the product lands small in the centre of the plate. Scaling the layer past the tile and letting the overflow crop the margin is the fix; the tile already clips, so nothing escapes. Keep this well under the point where the subject itself starts to crop — check any new record before adding it here rather than assuming this value travels. */ .media-hover--zoom > img { transform: scale(1.35); } .has-hover-media > img, .has-hover-media > video { transition: opacity .25s ease; } /* The modal's plate is translucent over a blurred panel, so an opaque --plate layer here would brighten the whole media column on hover. Match the surrounding tone exactly instead; coverage does not depend on it, because the primary is at opacity 0 by the time this is at 1. */ .product-modal__media .media-hover { background: rgba(236, 233, 226, .92); } /* ---------- DRIFT LAYER ---------------------------------------------- A loose knock-out of the product tumbling behind the packshot, for records where the primary shot is a tall narrow box surrounded by empty plate. Opt-in per record via `imgBack`. Stacking is the fiddly part. The primary is an — inline-level replaced content, painted in step 7 of the painting order — while this layer is positioned. A positioned sibling at z-index 0 paints in step 8, i.e. ON TOP of the primary, which is the opposite of what is wanted. So .has-back-media lifts the primary into the positioned layer at z-index 1 and the drift sits at 0 beneath it. (z-index:-1 also works, but then the layer paints under anything that later gains a background here, which is a trap for whoever edits this next.) Deliberately quiet: 16% opacity, half saturation, tilted, and sized past the tile so the tile crops it. It must read as depth, never as a second product the visitor might think they are buying. It also sits below the opaque hover layer, so a hover still covers everything. --------------------------------------------------------------------- */ .media-back { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .media-back > img { position: absolute; top: 50%; left: 50%; width: auto; height: 132%; min-height: 0; max-height: none; padding: 0; object-fit: contain; mix-blend-mode: normal; opacity: .16; filter: saturate(.5); transform: translate(-72%, -44%) rotate(26deg); } .has-back-media > img, .has-back-media > video { position: relative; z-index: 1; } /* ---------- FLAVOUR GALLERY ------------------------------------------ For records that are one listing covering a dozen printed bags. The media column splits into a packshot stage and a rail of buttons; see FLAVOR_SETS in app.js for which records opt in. The stage keeps the plate + multiply treatment the single-shot modal uses, so a flavour bag sits on the page exactly like every other packshot. Only min-height and padding are relaxed, to leave room for the rail without pushing the panel past its max-height. The rail is a real