/* ========================================================================== Bazr — Design Tokens · Brand v3 (white / light only in the WordPress theme) "the hive" (5 Oct 2026) Source of truth: BRAND.md §5 + §10, Brand/bazr-brand-book.html. Every value maps 1:1 to a future Tailwind config key. Proportion target: Wax/white 56 · Hive 22 · Honey 14 · Sky 6 · Petal 2 ========================================================================== */ :root { /* ---- Brand palette (raw) ------------------------------------------ */ --honey: #FFC21A; /* brand · logo, Add to cart, highlights, active */ --hive: #1A1B1F; /* primary action + text */ --petal: #D62F33; /* urgency ONLY: flash, % off, low stock, cart # */ --sky: #2F62D9; /* links, Verified, info, selected */ --clover: #167A44; /* status ONLY: delivered, refunded, free delivery */ --amber: #8F5A00; /* honey-coloured TEXT on light grounds */ --wax: #FBF8F1; /* page ground */ --stone: #6A665E; /* secondary text */ /* ---- Semantic (light) --------------------------------------------- */ --c-bg: #FBF8F1; --c-surface: #FFFFFF; --c-surface-alt: #F3EFE4; /* "sunk" wells, skeletons, qty */ --c-text: #1A1B1F; --c-text-muted: #6A665E; --c-text-faint: #8A857A; /* placeholders / non-essential meta */ --c-border: #E8E3D6; --c-border-strong: #CFC8B6; --c-primary: #1A1B1F; /* Buy now · Pay · selected controls */ --c-primary-hover: #3A3B42; --c-on-primary: #FFFFFF; --c-honey: #FFC21A; --c-honey-hover: #F0B000; --c-honey-100: #FFF1C2; /* soft highlight fill */ --c-honey-50: #FFF8E0; --c-on-honey: #1A1B1F; /* black on honey = 10.6:1 */ --c-honey-text: #8F5A00; /* Amber — the only honey-ish text */ --c-link: #2F62D9; --c-accent: #D62F33; /* Petal */ --c-accent-100: #FDE8E8; --c-success: #167A44; /* Clover */ --c-success-100: #E3F3EA; --c-info: #2F62D9; /* Sky */ --c-info-100: #E7EDFC; --c-warning: #8F5A00; --c-warning-100: #FFF1C2; --c-focus: #1A1B1F; --c-star: #FFC21A; --c-star-empty: #DDD6C4; /* Bazr Mall tier = Hive + Honey */ --c-mall: #1A1B1F; --c-mall-fg: #FFC21A; --c-verified: #2F62D9; /* Hex pattern (brand-book hero) — used on Hive grounds */ --hex-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34.64' height='60'%3E%3Cg fill='none' stroke='%23FFC21A' stroke-opacity='.09' stroke-width='1.5'%3E%3Cpath d='M17.32 0L34.64 10V30L17.32 40L0 30V10Z'/%3E%3Cpath d='M0 30V50L17.32 60M34.64 30V50L17.32 60'/%3E%3C/g%3E%3C/svg%3E"); --hex-bg-honey: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34.64' height='60'%3E%3Cg fill='none' stroke='%231A1B1F' stroke-opacity='.10' stroke-width='1.5'%3E%3Cpath d='M17.32 0L34.64 10V30L17.32 40L0 30V10Z'/%3E%3Cpath d='M0 30V50L17.32 60M34.64 30V50L17.32 60'/%3E%3C/g%3E%3C/svg%3E"); --hex-clip: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); --hex-soft: var(--hex-bg-honey); --c-tick: #FFC21A; /* check / radio mark: Honey on Hive */ --ph-l1: 94%; --ph-l2: 86%; --ph-s1: 55%; --ph-s2: 45%; --ph-glow: .7; /* image placeholder tints */ /* ---- Radius: 8 / 12 / 20 / pill ----------------------------------- */ --r-xs: 6px; /* badges */ --r-s: 8px; --r-m: 12px; --r-l: 20px; --r-pill: 999px; --r-sm: var(--r-s); --r-md: var(--r-m); --r-lg: var(--r-l); --r-xl: var(--r-l); /* legacy aliases */ /* ---- Elevation (warm, calm) --------------------------------------- */ --e-1: 0 1px 2px rgba(26,27,31,.05); --e-2: 0 1px 2px rgba(26,27,31,.06), 0 6px 16px -8px rgba(26,27,31,.18); --e-3: 0 1px 2px rgba(26,27,31,.06), 0 12px 28px -12px rgba(26,27,31,.28); --e-pop: 0 18px 48px -16px rgba(26,27,31,.38); /* ---- Spacing (4pt) ------------------------------------------------ */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; /* ---- Type: Bricolage (display/prices) · Figtree (UI) --------------- Scale 48 · 32 · 22 · 20 (price) · 16 · 13 (+12 captions, 14 dense UI) */ --f-display: "Bricolage Grotesque", "Figtree", "Noto Sans Sinhala", "Noto Sans Tamil", system-ui, sans-serif; --f-body: "Figtree", "Noto Sans Sinhala", "Noto Sans Tamil", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --f-mono: ui-monospace, "JetBrains Mono", Menlo, monospace; --font: var(--f-body); --t-xs: 12px; --t-sm: 13px; --t-ui: 14px; --t-base: 16px; --t-md: 16px; --t-lg: 20px; --t-xl: 22px; --t-2xl: 32px; --t-3xl: 48px; /* ---- Layout ------------------------------------------------------- */ --max: 1440px; --gutter: 16px; --header-h: 64px; --bottomnav-h: 60px; /* ---- Motion — "move like a bee" (BRAND §10) ----------------------- */ --ease-dart: cubic-bezier(.4, 0, .2, 1); /* taps, toggles, exits */ --ease-glide: cubic-bezier(.2, .8, .2, 1); /* sheets, toasts, arrivals*/ --ease-hop: cubic-bezier(.34, 1.56, .64, 1); /* badges, hearts, success */ --dur-tap: 80ms; --dur-quick: 160ms; --dur-base: 240ms; --dur-travel: 520ms; --dur-mee: 1200ms; /* legacy names */ --ease: var(--ease-glide); --fast: var(--dur-quick); --norm: var(--dur-base); --z-nav: 60; --z-drawer: 80; --z-modal: 90; --z-toast: 100; --z-fly: 110; color-scheme: light; } /* Breakpoints (documented; media queries are mobile-first) 360 / 768 / 1024 / 1280 / 1440 */ /* ========================================================================== Reset ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); } body { font-family: var(--f-body); font-size: var(--t-base); line-height: 1.5; color: var(--c-text); background: var(--c-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; padding-bottom: var(--bottomnav-h); } @media (min-width: 1024px) { body { padding-bottom: 0; } } /* Author `display` outranks the UA's [hidden] rule; restore it. */ [hidden] { display: none !important; } img, svg { display: block; max-width: 100%; } /* Inline icons default to a sane size; component rules override by class. */ svg { width: 20px; height: 20px; flex: none; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: 0; padding: 0; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; padding: 0; } h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 800; line-height: 1.12; letter-spacing: -.02em; text-wrap: balance; } p { text-wrap: pretty; } :focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; border-radius: 6px; } ::selection { background: var(--honey); color: var(--hive); } /* Icons (24px grid, 1.8 stroke). `.acc` is the one detail that fills Honey when the icon is active (BRAND §5.4). */ .ico { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .ico .acc { fill: none; } .is-active > .ico .acc, [aria-current="page"] > .ico .acc, .is-on .ico .acc, .ico--on .acc, [aria-pressed="true"] > .ico .acc { fill: var(--honey); stroke: var(--honey); } /* Utilities */ .wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); } @media (min-width: 1024px) { .wrap { padding-inline: 24px; } } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .stack { display: flex; flex-direction: column; } .row { display: flex; align-items: center; } .gap-1 { gap: var(--s-1); } .gap-2 { gap: var(--s-2); } .gap-3 { gap: var(--s-3); } .gap-4 { gap: var(--s-4); } .push { margin-left: auto; } .muted { color: var(--c-text-muted); } .faint { color: var(--c-text-faint); } .tiny { font-size: var(--t-xs); } .small { font-size: var(--t-sm); } .bold { font-weight: 700; } .center { text-align: center; } .ok { color: var(--c-success); } .urgent { color: var(--c-accent); } .link { color: var(--c-link); font-weight: 600; } .link:hover { text-decoration: underline; } /* Visibility helpers never *set* a display value, so an element can be both .row (flex) and .hide-mobile. */ @media (max-width: 1023px) { .hide-mobile { display: none !important; } } @media (min-width: 1024px) { .hide-desktop { display: none !important; } } .no-sb { scrollbar-width: none; -ms-overflow-style: none; } .no-sb::-webkit-scrollbar { display: none; } .skip { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--honey); color: var(--hive); font-weight: 700; padding: 10px 16px; border-radius: var(--r-s); transition: top var(--dur-quick) var(--ease-dart); } .skip:focus { top: 12px; } /* Reduced motion: every animation confirms, guides or celebrates — and all of it stops when asked. Mee shows still (her SVGs honour this too). */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }