/* ==========================================================================
Barcodes Market — E7 theme design tokens · v2.1 · 2026-09-10
Source of truth: barcodesmarket-brand-tokens.svg (artboard §01–§06)
+ barcodesmarket-home-{en,ru,ar}.svg (approved v2.1 layouts, H=3992)
Generator: _src/bmlib.py / gen_home.py / gen_tokens.py (values copied 1:1)
Usage in OpenCart 4.x Twig theme:
Load BEFORE bootstrap.css overrides are customized; tokens are plain custom
properties, safe next to Bootstrap 5 (mapping block at the bottom).
========================================================================== */
:root {
/* ---------------------------------------------------------------- color
Brand — navy/cyan family shared with CodeMark own-brand line. */
--bm-navy: #0B2545; /* primary · nav · dark bands */
--bm-navy-deep: #071A33; /* utility bar · footer deepest layer */
--bm-navy-2: #123C70; /* navy gradient partner (navyGrad 2nd stop) */
--bm-cyan: #00A8E8; /* accent · scan motif · icons · chips */
--bm-cyan-lt: #5BC0EB; /* cyan lifted for dark backgrounds */
--bm-orange: #F26B21; /* COMMERCE SEMANTICS ONLY: Sale/Low stock/Deals */
--bm-orange-bg: #FDEEE3; /* orange tinted chip bg */
/* Semantic */
--bm-success: #17845A; /* In stock · confirm */
--bm-success-bg: #E7F3EC;
--bm-danger: #C0392B; /* Out of stock · errors */
--bm-danger-bg: #FBEAE8;
--bm-warning: #F26B21; /* = orange: low-stock warning semantics */
--bm-warning-bg: #FDEEE3;
--bm-info: #00A8E8; /* = cyan: informational tint */
--bm-info-bg: #E8F6FC; /* = --bm-tint */
/* Accessible functional steps (AA 4.5:1) — see a11y-notes.md.
Use for TEXT and text-bearing surfaces; keep brand steps for
decoration, icons, large display type and the scan motif. */
--bm-cyan-strong: #0074A3; /* CTA hover/active — darkens the cyan fill,
white text 5.21 on it. E9-T3b: was
#007FB0 (4.50, i.e. 0.004 of headroom —
one rounding away from failing AA). */
--bm-cyan-text: #00709C; /* cyan TEXT on light surfaces — 5.71 on
#FFF, 5.32 on --bm-bg, 5.01 on --bm-tint
and --bm-gray. E9: #007FB0 measured only
4.20 on --bm-bg / 4.08 on --bm-tint, i.e.
below AA as *text*, which is why text uses
this step and the fill uses the stronger
--bm-cyan-strong above. */
--bm-orange-strong: #CA4F0C; /* low-stock text · SALE chip bg 4.53 */
--bm-success-strong: #157B54; /* success text on --bm-success-bg 4.62 */
--bm-orange-on-tint: #BC490B; /* orange text on --bm-orange-bg 4.52 */
/* Neutrals — COOL gray mall (vs CodeMark warm shop-in-shop zone) */
--bm-bg: #F5F7FA; /* page background */
--bm-surface: #FFFFFF; /* cards · header · panels */
--bm-ink: #16212E; /* body text (navy-leaning near-black) */
--bm-muted: #5F6B7A; /* secondary text (5.43:1 on white) */
--bm-border: #DCE3EB; /* hairlines · card borders */
--bm-img: var(--bm-surface); /* product image well = white (product shots are white-background) */
--bm-gray: #F1F4F8; /* inputs · subtle panels · zebra rows */
--bm-tint: #E8F6FC; /* cyan tint (icon wells · chips) */
--bm-tint-navy: #EDF1F7; /* navy tint (table headers) */
--bm-brand-gray: #5A6572; /* 3rd-party brand-wall placeholder text */
/* CodeMark shop-in-shop zone — warm, ONLY inside the zone band */
--bm-warm: #FAF9F7;
--bm-warm-border: #E5E4DF;
/* On-dark text opacities (baked values for CSS use) */
--bm-on-dark: #FFFFFF;
--bm-on-dark-72: rgba(255, 255, 255, 0.72); /* body on navy 8.57:1 */
--bm-on-dark-62: rgba(255, 255, 255, 0.62); /* footer links 7.26:1 */
--bm-on-dark-50: rgba(255, 255, 255, 0.50); /* legal line (decorative-adjacent, see a11y) */
--bm-on-dark-08: rgba(255, 255, 255, 0.08); /* icon wells on navy */
--bm-on-dark-05: rgba(255, 255, 255, 0.05); /* barcode strip motif */
--bm-navy-05: rgba(11, 37, 69, 0.05); /* barcode strip on light*/
--bm-navy-10: rgba(11, 37, 69, 0.10); /* dot pattern on light */
/* ------------------------------------------------------------ typography
EN/RU share one stack (Segoe UI/Arial carry Cyrillic — no extra webfont).
AR flips the page default to the Arabic stack. */
--bm-font-en: Inter, "Segoe UI", Arial, sans-serif;
--bm-font-ru: Inter, "Segoe UI", Arial, sans-serif; /* Cyrillic covered */
--bm-font-ar: Tajawal, Tahoma, "Segoe UI", Arial, sans-serif;
--bm-font-mono: "DejaVu Sans Mono", "Ubuntu Sans Mono", ui-monospace,
"Cascadia Mono", Consolas, monospace; /* SKU · codes */
--bm-font-body: var(--bm-font-en); /* page default; [dir=rtl] flips to ar */
/* Type scale — size / weight / tracking (artboard §02) */
--bm-fs-h1: 46px; /* 800, ls -1.0px · RU/AR auto-shrink ladder → floor 38 */
--bm-fs-h1-min: 38px; /* ladder floor (measured RU fit) */
--bm-fs-h2: 26px; /* 800 section titles · band title 29px */
--bm-fs-h2-band:29px; /* Why-band title (floor 24) */
--bm-fs-h2-min: 20px; /* ladder floor */
--bm-fs-h3: 17px; /* 700 card/solution titles (floor 14) */
--bm-fs-price: 20px; /* 800 navy product price */
--bm-fs-price-lg:32px; /* PDP price (derived) */
--bm-fs-body-lg:15px; /* 400 hero sub · zone copy */
--bm-fs-body: 14px; /* 400 default body */
--bm-fs-model: 15.3px; /* 700 product model line (floor 12.5) */
--bm-fs-sm: 12.8px; /* 600 trust row · footer desc */
--bm-fs-sm-2: 12px; /* 400-600 utility · table rows */
--bm-fs-nav: 13.5px; /* 600 category nav (RU step-down 12.8) */
--bm-fs-kicker: 11.5px; /* 700 ls 2.2 uppercase eyebrows */
--bm-fs-micro: 11px; /* 700 stock/brand lines · chips */
--bm-fs-micro-2:10.3px; /* 700 mono SKU lines */
--bm-fw-regular: 400;
--bm-fw-semibold:600;
--bm-fw-bold: 700;
--bm-fw-display: 800;
--bm-ls-kicker: 2.2px; /* eyebrows · NEVER on Arabic */
--bm-ls-brand: 1.3px; /* uppercase brand line on cards */
--bm-ls-display: -1.0px;/* H1 */
--bm-ls-wordmark:-0.4px;/* logo wordmark (outlined in SVG sources) */
/* Line heights (derived from artboard line pitches) */
--bm-lh-display: 1.22; /* H1 pitch 56/46 */
--bm-lh-title: 1.3;
--bm-lh-body: 1.6; /* hero sub pitch 24/15 */
--bm-lh-small: 1.75; /* dark-band body pitch 22/12.3 */
--bm-lh-tight: 1.35;
/* Arabic role bump (Tahoma reads smaller at same px — artboard §06) */
--bm-ar-bump: 1px;
/* ---------------------------------------------------------------- space
4px base rhythm; values below are the ones the artboards actually use. */
--bm-space-1: 4px;
--bm-space-2: 8px;
--bm-space-3: 12px;
--bm-space-4: 16px;
--bm-space-5: 20px;
--bm-space-6: 24px; /* grid gutter · card gap · section inner gap */
--bm-space-7: 32px;
--bm-space-8: 40px;
--bm-space-9: 48px;
--bm-space-10: 64px;
--bm-space-11: 80px;
--bm-space-12: 96px;
/* Section vertical padding (artboard geometry, desktop).
E11 2026-09-12: 54 → 40px. Every section is a flush sibling in ,
so the blank a visitor actually sees between two bands is
prev.padding-bottom + next.padding-top — 54+54 measured 108px of dead air
at @1440 (worst case brand wall → dark band: 134px). 40+40 lands the
inter-section rhythm on 80px: still clearly separated the way a B2B
catalogue wants, but no longer a fifth of the viewport. */
--bm-section-pad-y: 40px;
/* --------------------------------------------------------------- radius */
--bm-radius-card: 14px; /* product/solution cards */
--bm-radius-tile: 12px; /* brand tiles · floating chips · tables hdr */
--bm-radius-img: 10px; /* image wells */
--bm-radius-btn: 9px; /* buttons · inputs · search composite */
--bm-radius-hero: 20px; /* hero collage card */
--bm-radius-check: 4px; /* checkboxes */
--bm-radius-pill: 999px; /* chips · filter pills */
/* -------------------------------------------------------------- shadow */
/* feDropShadow dy2 σ7 @8% navy → CSS blur = 2σ */
--bm-shadow-card: 0 2px 14px rgba(11, 37, 69, 0.08);
/* feDropShadow dy8 σ14 @14% navy (floating chips · collage · suggest) */
--bm-shadow-float: 0 8px 28px rgba(11, 37, 69, 0.14);
--bm-shadow-none: none;
/* -------------------------------------------------------------- border */
--bm-border-w: 1px; /* hairlines · card borders (art 1.1 ≈ 1px) */
--bm-border-w-input: 1.6px; /* search composite · inputs */
--bm-border-w-focus: 2px; /* focus ring stroke */
--bm-focus-ring: 0 0 0 3px rgba(0, 168, 232, 0.25); /* cyan 25% glow */
--bm-focus-ring-dark: 0 0 0 3px rgba(91, 192, 235, 0.35);
/* ----------------------------------------------------- layout & grid */
--bm-canvas: 1440px; /* design canvas */
--bm-container: 1200px; /* content width */
--bm-page-margin: 120px; /* (canvas - container)/2 at ≥1440 */
--bm-gutter: 24px; /* column gap */
--bm-card-w: 282px; /* product/solution card width */
--bm-card-pitch: 306px; /* card + gutter */
--bm-cols-home: 4; /* home product rows */
--bm-cols-plp: 3; /* PLP grid next to 282 sidebar */
--bm-sidebar-w: 282px;
--bm-summary-w: 380px; /* cart/checkout summary column (derived) */
/* Component heights (artboard) */
--bm-h-utility: 40px;
--bm-h-header: 88px;
--bm-h-nav: 52px;
--bm-h-search: 46px;
--bm-h-btn: 40px; /* header buttons */
--bm-h-btn-lg: 52px; /* hero / zone / checkout CTAs */
--bm-h-btn-card: 42px; /* card Add-to-Cart */
--bm-h-input: 46px;
--bm-h-chip: 22px; /* desktop badges (mobile 18) */
--bm-h-filter: 32px;
--bm-h-row: 34px; /* table rows 34–44 */
/* ------------------------------------------------------------ breakpoints
Mirrors Bootstrap 5 so Twig can share media queries with BS utilities. */
--bm-bp-sm: 576px;
--bm-bp-md: 768px;
--bm-bp-lg: 992px;
--bm-bp-xl: 1200px;
--bm-bp-xxl: 1400px;
/* ------------------------------------------------------------- z-index
Header chrome sits above BS sticky(1020)/fixed(1030) but below
offcanvas(1045)/modal(1055) so drawers & dialogs win. */
--bm-z-header: 1030;
--bm-z-suggest: 1035; /* search suggest panel under header */
--bm-z-stickybar: 1040; /* mobile sticky add-to-cart bar */
}
/* ==========================================================================
RTL — Arabic. Applied on .
Mirroring strategy (proven on barcodesmarket-home-ar.svg):
· columns / flows / badge sides mirror via logical properties,
· directional icons (arrow, truck) flip, object icons do NOT,
· numerals, prices, SKUs, emails stay LTR via .bm-ltr isolate,
· Arabic never gets letter-spacing or text-transform.
========================================================================== */
[dir="rtl"] {
--bm-font-body: var(--bm-font-ar);
/* role bump: Arabic reads smaller at same px (artboard §06) */
--bm-fs-h1: 47px;
--bm-fs-h2: 27px;
--bm-fs-h2-band: 30px;
--bm-fs-h3: 18px;
--bm-fs-body-lg: 16px;
--bm-fs-body: 15px;
--bm-fs-sm: 13.8px;
--bm-fs-nav: 14.5px;
--bm-fs-kicker: 12.5px;
--bm-fs-micro: 12px;
}
[dir="rtl"] body,
html[lang="ar"] body { font-family: var(--bm-font-ar); }
/* Latin runs inside RTL pages (wordmark, model codes) keep the EN stack */
[dir="rtl"] .bm-latin { font-family: var(--bm-font-en); }
/* letter-spacing breaks Arabic joining — kill it everywhere in RTL */
[dir="rtl"] .bm-kicker,
[dir="rtl"] .bm-brand-line,
[dir="rtl"] .bm-chip,
[dir="rtl"] .bm-btn,
[dir="rtl"] [class*="bm-"] { letter-spacing: 0; }
[dir="rtl"] * { text-transform: none; }
/* directional icons flip; object icons (clock, cart, phone, logos,
product art) must NOT — tag them in Twig:
*/
.bm-icon--dir { transform: scaleX(1); }
[dir="rtl"] .bm-icon--dir { transform: scaleX(-1); }
/* LTR islands: prices, SKUs, emails, phone, model codes */
.bm-ltr {
direction: ltr;
unicode-bidi: isolate;
display: inline-block;
}
/* Logical-property component rules — use these instead of left/right */
.bm-card__badge--identity { inset-inline-start: 26px; } /* OUR BRAND chip */
.bm-card__badge--promo { inset-inline-end: 18px; } /* SALE chip */
.bm-card__stock { text-align: end; }
.bm-link--arrow svg { margin-inline-start: 10px; }
.bm-table th.num,
.bm-table td.num { text-align: end; }
.bm-facet__count { margin-inline-start: auto; }
/* Bootstrap 5 physical-utility guard: prefer logical pairs in Twig.
ms-*/me-*, ps-*/pe-*, start-*/end-*, float-start/end, text-start/end.
If a legacy ml-*/mr-* slips in, mirror it here per component instead of
patching templates. */
/* ==========================================================================
Bootstrap 5 coexistence (OpenCart 4.x default stack).
Optional: copy into your theme's override layer to make BS components
speak Barcodes Market by default. Tokens win because they are loaded
after bootstrap.css when you @import or this file later.
========================================================================== */
:root {
--bs-body-font-family: var(--bm-font-body);
--bs-body-font-size: var(--bm-fs-body);
--bs-body-color: var(--bm-ink);
--bs-body-bg: var(--bm-bg);
--bs-emphasis-color: var(--bm-navy);
--bs-secondary-color: var(--bm-muted);
--bs-border-color: var(--bm-border);
--bs-border-radius: var(--bm-radius-btn);
--bs-border-radius-sm: 6px;
--bs-border-radius-lg: var(--bm-radius-card);
--bs-link-color: var(--bm-cyan-text);
--bs-link-hover-color: var(--bm-navy);
--bs-primary: var(--bm-navy);
--bs-primary-rgb: 11, 37, 69;
--bs-success: var(--bm-success);
--bs-success-rgb: 23, 132, 90;
--bs-danger: var(--bm-danger);
--bs-danger-rgb: 192, 57, 43;
--bs-warning: var(--bm-orange);
--bs-warning-rgb: 242, 107, 33;
--bs-info: var(--bm-cyan);
--bs-info-rgb: 0, 168, 232;
}
/* Buttons — artboard §05 styles */
.bm-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
height: var(--bm-h-btn);
padding-inline: 22px; /* content-driven widths in art; min pad */
border-radius: var(--bm-radius-btn);
font: var(--bm-fw-semibold) var(--bm-fs-body) / 1 var(--bm-font-body);
border: 1.5px solid transparent;
cursor: pointer;
transition: background-color .15s, border-color .15s, box-shadow .15s,
transform .12s;
}
/* E9 — primary CTA is cyan fill + NAVY label (5.69:1). White on --bm-cyan is
only 2.70:1 and fails AA, so the label is navy and the *hover/active* state
does the darkening instead (see the state block after .bm-btn:focus-visible). */
.bm-btn--cyan { background: var(--bm-cyan); color: var(--bm-navy); }
.bm-btn--navy { background: var(--bm-navy); color: #fff; }
.bm-btn--orange { background: var(--bm-orange-strong); color: #fff; }
.bm-btn--outline-navy { background: var(--bm-surface); color: var(--bm-navy);
border-color: var(--bm-navy); }
.bm-btn--outline-cyan { background: var(--bm-surface); color: var(--bm-cyan-text);
border-color: var(--bm-cyan); }
.bm-btn--dark-ghost { background: transparent; color: #fff; border-color: #fff; }
.bm-btn--lg { height: var(--bm-h-btn-lg); padding-inline: 24px;
font-size: var(--bm-fs-body-lg); }
.bm-btn:hover { transform: translateY(-1px); box-shadow: var(--bm-shadow-card); }
.bm-btn:active { transform: translateY(0); box-shadow: none; }
.bm-btn:disabled, .bm-btn.is-disabled {
/* E9: was `opacity: .4`, which composites fg AND bg towards the page and
measured 1.6:1 on the primary CTA. Solid grey/muted instead: 4.92:1. */
background: var(--bm-gray); color: var(--bm-muted);
border-color: var(--bm-border);
cursor: not-allowed; transform: none; box-shadow: none;
}
.bm-btn:focus-visible { outline: var(--bm-border-w-focus) solid var(--bm-cyan);
outline-offset: 2px; box-shadow: var(--bm-focus-ring); }
/* E9 — primary CTA states. Declared AFTER the shared .bm-btn rules on purpose:
equal specificity means source order decides, and every state must win its
own background. Asserts live in extension/cm/tests/check_contrast.sh. */
.bm-btn--cyan:hover,
.bm-btn--cyan:active,
.bm-btn--cyan:focus-visible { background: var(--bm-cyan-strong); color: #fff; }
/* cyan outline on a cyan button is invisible (1:1) — navy for the ring */
.bm-btn--cyan:focus-visible { outline-color: var(--bm-navy); }
/* Chips / badges — stock = tinted bg + dot · promo = solid pill */
.bm-chip {
display: inline-flex; align-items: center; gap: 6px;
height: var(--bm-h-chip); padding-inline: 10px;
border-radius: var(--bm-radius-pill);
font: var(--bm-fw-bold) var(--bm-fs-micro) / 1 var(--bm-font-body);
letter-spacing: var(--bm-ls-kicker);
}
.bm-chip--stock-in { background: var(--bm-success-bg); color: var(--bm-success-strong); }
.bm-chip--stock-low { background: var(--bm-orange-bg); color: var(--bm-orange-on-tint); }
.bm-chip--stock-out { background: var(--bm-danger-bg); color: var(--bm-danger); }
/* E9-T5: "not on the shelf, but obtainable" — the merchant's own shipping
promise ("2-3 Days", Pre-Order, …). Same neutral pair as --stock-preorder:
a lead time is neither a green "in stock" nor a red "out of stock". */
.bm-chip--stock-delay { background: var(--bm-gray); color: var(--bm-muted); }
.bm-chip--promo { background: var(--bm-orange-strong); color: #fff; }
.bm-chip--ownbrand { background: var(--bm-cyan); color: var(--bm-navy); }
.bm-chip--info { background: var(--bm-tint); color: var(--bm-cyan-text); }
/* Focus ring for inputs / search composite (artboard §05 search states) */
.bm-input:focus,
.bm-search:focus-within {
border-color: var(--bm-cyan);
border-width: var(--bm-border-w-focus);
box-shadow: var(--bm-focus-ring);
outline: none;
}
/* Icon accent hook — inline SVG / sprite picks this up */
:root { --bm-icon-accent: var(--bm-cyan); --bm-icon-paper: #FFFFFF; }
.bm-band--dark { --bm-icon-accent: var(--bm-cyan-lt); }