/* ========================================================================= BIOMI — ბრენდის სტილი / Brand stylesheet (rebrand 2026) Visual language: minimal · white · photo-driven Palette : Biomi Original #1B1B33 · Super Blue #0249F7 · Felamushi #85519A Felamushi tints · Extra White · logo renders in Biomi Original Type : Futura 100 + Futura 100 GEO (Latin + Georgian, incl. Mtavruli caps) ========================================================================= */ /* Futura 100 — variable fonts, served locally from /fonts. One file per script covers every weight (Light→Bold), so the whole site needs two downloads instead of eight static OTFs. The Georgian face is scoped by unicode-range, so English-only pages never download it. Oblique files exist in /fonts but are not wired up — the design uses no italics. */ @font-face{ font-family:"Futura 100"; src:url('../../fonts/Futura%20100/Variable/Futura100-VF-Upright.ttf') format('truetype-variations'); font-weight:100 900; font-style:normal; font-display:swap; } /* Declared after the Latin face so Georgian codepoints resolve here. */ @font-face{ font-family:"Futura 100"; src:url('../../fonts/Futura%20100%20Georgian/Variable/Futura100-GEO-VF-Upright.ttf') format('truetype-variations'); font-weight:100 900; font-style:normal; font-display:swap; unicode-range:U+10A0-10FF,U+1C90-1CBF,U+2D00-2D2F; } :root{ /* brand: Biomi Original (ink) — legacy var names kept so layout rules stay untouched */ --navy:#1b1b33; --navy-700:#26274a; /* brand: Super Blue (primary accent) — --gold* aliases kept from the old skin */ --gold:#0249f7; --gold-200:#8ba4fb; /* light super blue — accent text on dark */ --accent-rgb:2,73,247; /* the accent as raw channels, for tinted rgba() fills */ --gold-600:#0238be; /* deep super blue — accent text on light */ --gold-hover:#0238be; /* deep super blue as a *fill* — stays deep in both themes */ --purple:#85519a; /* brand: Felamushi (secondary accent) */ --gray:#585b5b; --gray-300:#d3d3d3; --ink:#1b1b33; --ink-strong:#1b1b33; /* headings, nav, solid buttons — inverts in dark mode */ --body:#43454e; /* long-form article prose — softer than --ink on light */ --purple-600:#6d3f83; /* Felamushi, hover depth — pairs with --purple */ --ok:#1a7d46; --err:#b23b37; --muted:#6c6f72; --line:#e7e6ea; --bg:#ffffff; --surface:#ffffff; /* cards, panels, inputs — anything raised off --bg */ --bg-soft:#f1f4fc; /* soft section backgrounds */ --deco:#85519a; /* brand ring decoration: the counterpoint accent */ --cream:#e6ecfb; /* Felamushi light — stronger accent surfaces */ --container:1240px; --radius:14px; --radius-sm:8px; --shadow-sm:0 1px 2px rgba(27,27,51,.05), 0 6px 18px rgba(27,27,51,.06); --shadow-md:0 18px 44px rgba(27,27,51,.14); --ff:"Futura 100",system-ui,-apple-system,Segoe UI,Roboto,sans-serif; --header-h:78px; --ease:cubic-bezier(.22,.61,.36,1); } /* ---- Dark mode ------------------------------------------------------------- Set by the inline script in each page's (before first paint, so the theme never flashes) and toggled from the header. Palette only: no layout rule is duplicated here. --navy stays put. It is the brand ink and is still the right background for the footer, the dark bands and the solid header, all of which are meant to read dark in either theme. What moves is --ink-strong, the *text* half of that old double duty, which flips to near-white so headings and nav stay legible on a dark surface. Product photography is shot on white, so the tiles that hold a cut-out (.pgal__main, .pgal__thumbs img, .pcard__img) keep their light background in both themes — a dark tile would just frame a white rectangle. Same for the pills that sit on top of a map or a photo. */ :root[data-theme="dark"]{ color-scheme:dark; --ink:#eceaf4; --ink-strong:#f4f3f9; --muted:#a1a2b6; --line:#2f3052; --bg:#0d0d1a; --surface:#1b1b33; --bg-soft:#16162c; --deco:#0249f7; /* rings go blue on dark, opposite the text accent */ --cream:#23233f; --gray-300:#3a3b57; /* Dark mode is purple throughout — accents, solid buttons and the floating action stack alike. The dark-mode logo artwork carries the same purple in its mark, so the whole theme agrees with the lockup. White on #86529b is 5.7:1, so filled buttons stay comfortably readable. */ --gold:#86529b; /* The -200 and -600 steps are the *text* accent: eyebrows, prices, icons, inline links, hover states. At #86529b they measured 3.4:1 against the page, under the 4.5 minimum, on every page carrying a section label. They are a few steps lighter here (8.3:1) while --gold above stays the fill, so solid buttons keep their deeper purple behind white text. */ --gold-200:#c49bd8; --gold-600:#c49bd8; --gold-hover:#6b4080; /* hover still goes deeper, just in purple */ --accent-rgb:134,82,155; --purple:#c49bd8; /* Felamushi lightened — the brand tone only hits 2.9:1 on dark */ --purple-600:#dcbcec; /* hover goes lighter on dark, not deeper */ /* Article prose is a soft near-black on light. Inverted straight it would be a soft near-black *on black* — 2:1 — so on dark it goes full white instead. */ --body:#eceaf4; --ok:#5fd899; --err:#ff8f8a; --shadow-sm:0 1px 2px rgba(0,0,0,.45), 0 6px 18px rgba(0,0,0,.38); --shadow-md:0 18px 44px rgba(0,0,0,.55); } /* the dark bands and the footer already sit on --navy; against a dark page they need a hairline to stay separated from it */ :root[data-theme="dark"] .section--dark, :root[data-theme="dark"] .footer{border-top:1px solid var(--line)} /* ---- Navy in light mode: products.html and the products dropdown ---- Both sit on the brand navy even in the light theme -- the catalogue cards' photo wash is navy already, and on white each one read as a dark tile cut out of a light page. Rather than restyle every component, the palette is re-declared on the container, so everything inside (crumbs, heading, rail, cards, menu rows) takes dark-surface colours from the tokens it already reads. The accent stays light mode's blue, a step lighter for text. Dark mode is left alone: those surfaces are dark there to begin with. */ :root:not([data-theme="dark"]) .on-navy, :root:not([data-theme="dark"]) .dropdown, :root:not([data-theme="dark"]) .cookiebar, :root:not([data-theme="dark"]) .contact__form{ --ink:#eceaf4; --ink-strong:#f4f3f9; --body:#c9cad6; --muted:#a1a2b6; --line:#2f3052; --bg:var(--navy); --surface:#23234a; --bg-soft:#2a2a55; --cream:#2a2a55; --gold-200:#8ba4fb; --gold-600:#8ba4fb; --shadow-md:0 18px 44px rgba(0,0,0,.4); } :root:not([data-theme="dark"]) .on-navy{background:var(--navy);color:var(--ink)} :root:not([data-theme="dark"]) .dropdown{--surface:var(--navy)} /* the footer is the same navy, so it needs the hairline dark mode gives it */ :root:not([data-theme="dark"]) .on-navy + .footer{border-top:1px solid #2f3052} /* the transparent-over-hero header turns solid on scroll; on a dark page it should land on the panel colour rather than a second, darker navy */ :root[data-theme="dark"] .header.is-solid{background:var(--surface)} /* The floating action buttons hardcode the brand blue rather than reading the token, so they need saying explicitly. Everything else accent-coloured — bars, rules, active states, ring badges, links — already flows from --gold and turns purple on its own. */ :root[data-theme="dark"] .fab__ms, :root[data-theme="dark"] .fab__ph, :root[data-theme="dark"] .fab .fab__top{background:var(--gold)} /* The Biomi lockup has real dark-mode artwork, swapped in by main.js, so it is never filtered — see .header.is-solid .brand__logo. Samsung and Mitsubishi have real dark artwork too; the knock-out below is only the no-JS fallback for them, and main.js clears it once the proper file is in place. Brands without a dark variant keep the knock-out for real. The marquee is left out: it desaturates every logo to a uniform grey by design, and dropping one full-colour mark into that row would break the set. */ Vortice is the exception: its mark is a full lockup on its own green field, so knocking it out would leave a blank white square. It already reads on either background and is excluded by name, the same way main.js keeps an explicit list of the partners that ship a -dark.svg. */ :root[data-theme="dark"] .brand-hero__logo:not([src*="vortice"]), :root[data-theme="dark"] .brandpick__card img:not([src*="vortice"]){filter:brightness(0) invert(1)} /* Drawer sub-links sit a step below the top-level items, and on white --muted plus an opacity knock reads as exactly that. On dark the same treatment reads as *disabled* — every one of these is a tap target. Lift them to the body colour and let the indent and the smaller type carry the hierarchy instead. */ /* Drawer chapters. The products panel holds five chapters and 29 links; left flat it was 1548px of scroll inside an 812px drawer, so each chapter folds the same way the desktop mega-menu does. */ .m-sec{border-top:1px solid var(--line)} .m-sec:first-child{border-top:0} .m-sec__btn{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%; padding:11px 2px;font-size:15px;font-weight:600;color:var(--gold-600);text-align:left; text-transform:uppercase;letter-spacing:.02em} .m-sec__btn svg{width:15px;height:15px;flex:none;opacity:.65;transition:transform .3s} .m-sec.open .m-sec__btn svg{transform:rotate(180deg)} /* the drawer's version of .prod-menu__head: chapter name links, caret toggles */ .m-sec__head{display:flex;align-items:center} .m-acc__panel .m-sec__head > a{flex:1;min-width:0;padding:11px 2px;font-size:15px;font-weight:600; color:var(--gold-600);text-transform:uppercase;letter-spacing:.02em} .m-sec__head > .m-sec__btn{flex:none;width:46px;justify-content:center;padding:11px 0} .m-sec__panel{max-height:0;overflow:hidden;transition:max-height .3s var(--ease)} /* Subsection rows inside a drawer chapter. The label is a link to the category and the chevron beside it only opens that category's brand list -- two separate targets in one row, which is why the caret is a real