/* ============================================================ tokens.css — Flex Europa · finaldesign (Engineered Motion) Industrial / technical. PROVENANCE: forked byte-identical from dev/design4a/ and modified under the finaldesign manifest ONLY (hero video → image slider; product scrollers 3-up → 4-up). Every colour, font, radius and scale below is design4a's, unchanged. Near-monochrome INDUSTRIAL base (off-white → graphite → charcoal → near-black) with a SINGLE accent: brand teal. Palette is a PLACEHOLDER pending final logo sampling — every colour lives here so the sampled palette is a one-file swap (brief §9). Universal scales (spacing / radius / type / shadow / transition) are the Canada HiTech Engineering standard, kept EXACTLY. Project slots are added BELOW the universal ones — never renamed/removed. BRAND note: the supplied logo wordmark renders teal #00A888 (the siblings 1a/2a/3b reconciled to this over the oversaturated CMYK in references.md). finaldesign demotes teal to an ACCENT ROLE on a monochrome base — it is NOT a primary field colour here. ============================================================ */ :root { /* ===== NEUTRALS — the industrial base ===== */ --color-text: #14181A; /* near-black ink — ~16.8:1 on #FFF (AAA) */ --color-text-muted: #555C63; /* graphite muted — ~6.4:1 on #FFF (AA normal) */ --color-text-faint: #7A828A; /* faint labels — ~4.0:1; LARGE / non-essential text only */ --color-text-inverse: #FFFFFF; --color-bg: #FFFFFF; /* clean white canvas — cards & spec sheets read crisp */ --color-surface: #F4F5F2; /* off-white panel — industrial "paper" section fills */ --color-surface-alt: #EAECE6; /* a touch deeper — alternating zones / inset wells */ --color-border: #D8DAD3; /* 1px hairline — the signature spec-sheet rule */ --color-border-strong:#B7BCB2; /* firmer divider (~3:1 on #FFF for UI edges) */ --color-ink-scrim: #0A0C0E; /* the darkest ink — hero scrim / video overlays */ --color-graphite-deep:#0E1113; /* dark gradient stop (xTool band) */ /* ===== ACCENT — brand teal, used with restraint (the ONE accent) ===== */ --color-accent: #00A888; /* teal — on-DARK text, focus ring, large UI, glows (fails 3:1 on white → never small text on light) */ --color-accent-strong: #0B7D6E; /* deeper teal — accent TEXT/links on light, filled hover (~5.0:1 AA) */ --color-accent-deep: #0A6A5C; /* darkest teal — active / pressed */ --color-accent-soft: #E7F5F1; /* barely-there teal wash — hover fills on light */ --color-accent-on-dark:#22C6A6; /* brightened teal for links/labels on graphite (~6.9:1 on #16191C) */ --color-accent-tint: #EAF4F7; /* very-light-blue wash — a pale tint of the brand teal nudged toward blue (xTool band fill) */ /* ===== NAMED BRAND COLOURS (user vocabulary) — always white text on these ===== */ --brand-green: #00A888; /* "Green" = the logo colour (corrected; #00FF59 was wrong) */ --brand-green-deep: #0B7D6E; /* darker green — hover/pressed (better contrast with white) */ --brand-blue: #0044F2; /* "Blue" */ --brand-orange: #F7A051; /* "Orange" — ink/dark text on this (white fails ~2:1) */ --brand-orange-soft: #FDEEE0; /* pale orange wash — tab hover fill */ /* ===== SEMANTIC ===== */ --color-success: #1F9D6B; --color-warning: #C98A00; --color-warning-soft: #FFF4DF; --color-warning-deep: #8B5E00; --color-warning-border: #E4CC8E; --color-danger: #C6414B; /* ~4.9:1 on #FFF — sale/price text passes AA */ --color-info: #2B6FB3; /* Danger wash + deep ink, added for .form-status--error and the invalid-field messaging. Derived from --color-danger (#C6414B): the soft value is the same hue at ~96% lightness, the deep value is the same hue darkened to ~7.4:1 on that wash so the message text passes AA inside the banner. */ --color-danger-soft: #FBECED; --color-danger-deep: #8E2A33; /* ===== FOOTER — GRAPHITE / CHARCOAL / NEAR-BLACK (multi-shade, NOT navy) ===== Deliberately distinct from design3b's dark-blue footer. Three bands: a darker top band, a mid-tone columns zone, a darkest legal base. */ --footer-band: #13161A; /* darker top band (corporate cross-link strip) */ --footer-columns: #1C2126; /* mid-tone columns zone */ --footer-base: #0B0D0F; /* darkest base / legal bar */ --footer-raised: #262C32; /* a raised graphite block (e.g. contact card) */ --footer-text: #E7EAE7; /* light text on graphite (~13:1 AAA on all bands) */ --footer-text-muted:#9AA1A8; /* muted — verified AA (≥5.8:1) on every band above */ --footer-link: #FFFFFF; /* links; hover → teal (--color-accent-on-dark) */ --footer-border: rgba(255, 255, 255, 0.10); /* hairline dividers on graphite */ /* ===== TYPOGRAPHY — project (technical grotesque + neutral sans + mono) ===== Space Grotesk = machined/slightly-condensed display; Inter = body; IBM Plex Mono = the signature technical labels/kickers/spec rows/prices. Self-hosted WOFF2, font-display: swap (see css/shared/fonts.css) — §9. */ --font-heading: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; /* ===== SPACING — universal, do not change ===== */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; /* ===== RADIUS — universal ===== */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-pill: 999px; /* ===== TYPE SCALE — universal ===== */ --fs-xs: 12px; --fs-sm: 14px; --fs-md: 16px; --fs-lg: 18px; --fs-xl: 24px; --fs-2xl: 32px; --fs-3xl: 48px; --fs-4xl: 64px; /* ===== SHADOWS — universal (used sparingly; this direction is border-first) ===== */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, .05); --shadow-md: 0 4px 8px rgba(0, 0, 0, .08); --shadow-lg: 0 12px 24px rgba(0, 0, 0, .12); /* ===== TRANSITIONS — universal ===== Duration-only tokens: pair with an explicit easing, e.g. `transition: transform var(--dur-base) var(--ease-out)`. The *-with-ease shorthands below are for the common case where no custom curve is needed (they already carry `ease` — never append another timing function to them, that yields an invalid declaration). */ --dur-fast: 150ms; --dur-base: 250ms; --dur-slow: 400ms; --transition-fast: var(--dur-fast) ease; --transition-base: var(--dur-base) ease; --transition-slow: var(--dur-slow) ease; /* ============================================================ PROJECT SLOTS — added below the universal tokens (allowed). ============================================================ */ /* Fine print (developer credit) — smaller than --fs-xs */ --fs-tiny: 11px; /* Font weights */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Letter-spacing — mono technical labels ride on wide tracking */ --tracking-tight: -0.02em; /* large machined headings */ --tracking-normal: 0; --tracking-wide: 0.08em; --tracking-wider: 0.18em; /* uppercase mono eyebrows / spec labels */ /* Corners: SHARP → SOFT for this direction (never rounded/pill except tabs) */ --radius-card: 0; /* sharp — cards, hero, media */ --radius-control: 2px; /* buttons / inputs — a hair of softness */ /* Industrial easing */ --ease-out: cubic-bezier(.22, .61, .36, 1); --ease-inout: cubic-bezier(.65, .05, .36, 1); /* Z-index convention (Engineering §12) */ --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 500; --z-toast: 900; --z-skip: 9999; /* Layout metrics */ --container-max: 1280px; --container-narrow: 800px; --container-wide: 1440px; --measure: 64ch; /* Two-STATE header metrics */ --header-utility-h: 36px; /* thin utility strip (corporate cross-link) */ --header-h: 76px; /* glass bar over the hero */ --header-h-stuck: 62px; /* solid docked bar — compact */ /* Below ~420px the bar's logo + toggle + actions no longer fit one line and .site-header__bar-inner wraps to two rows, taking the header from 114px to 142px. The hero caption has to clear the WRAPPED height on phones. */ --header-h-wrapped: 142px; --header-slide-delay: .8s; /* mandated delay before the sticky bar docks (brief §4) */ /* Reusable hairline + focus halo (teal) — no raw colour lives outside tokens.css */ --hairline: 1px solid var(--color-border); --hairline-strong: 1px solid var(--color-border-strong); --focus-ring: 0 0 0 3px rgba(0, 168, 136, .40); --focus-ring-dark: 0 0 0 3px rgba(34, 198, 166, .55); /* Glass header (State 1) — translucent ink tint over the hero video */ --glass-bg: rgba(14, 17, 20, .32); --glass-border: rgba(255, 255, 255, .14); --glass-blur: blur(14px) saturate(115%); /* Glass panel behind the hero copy — frosted, lets the video read through while keeping white text legible (replaces the full-video dark scrim) */ --hero-glass-bg: rgba(12, 15, 18, .42); --hero-glass-border: rgba(255, 255, 255, .16); --hero-glass-blur: blur(18px) saturate(120%); /* HERO — dark scrim so overlaid white text meets AA over any frame AND the shimmer fallback. Left-weighted on desktop, top-weighted on mobile. */ --hero-scrim: linear-gradient(102deg, rgba(10, 12, 14, .90) 0%, rgba(10, 12, 14, .74) 28%, rgba(10, 12, 14, .46) 54%, rgba(10, 12, 14, .22) 78%, rgba(10, 12, 14, .12) 100%); --hero-scrim-vignette: linear-gradient(180deg, rgba(10, 12, 14, .20) 0%, rgba(10, 12, 14, 0) 26%, rgba(10, 12, 14, 0) 64%, rgba(10, 12, 14, .55) 100%); --hero-scrim-mobile: linear-gradient(180deg, rgba(10, 12, 14, .82) 0%, rgba(10, 12, 14, .60) 46%, rgba(10, 12, 14, .72) 100%); /* HERO fallback shimmer — graphite gradient with a faint teal sheen. Shown behind the video; also the standalone look under reduced-motion / autoplay-blocked / load failure. Base must read intentionally with the sheen animation OFF. */ --hero-shimmer: linear-gradient(118deg, #0E1113 0%, #171B1F 38%, #1F262B 58%, #12171B 82%, #0E1113 100%); --hero-sheen: linear-gradient(100deg, rgba(0, 168, 136, 0) 40%, rgba(0, 168, 136, .16) 50%, rgba(255, 255, 255, .05) 52%, rgba(0, 168, 136, 0) 62%); /* ===== HERO SLIDER (manifest items 4 + 5) ===== The hero is an image slider, not a video. Geometry, timing and control chrome live here so no raw value sits in home.css. */ --hero-slider-min: 360px; /* clamp lower bound — governs on phones */ --hero-slider-fluid: 48vw; /* fluid middle term */ --hero-slider-max: 700px; /* HARD CEILING — never exceeded at any viewport */ --hero-dwell: 6s; /* autoplay dwell per slide (brief §4.4) */ --hero-fade: 700ms; /* crossfade — brief mandates 600–800ms */ --hero-kb-scale: 1.06; /* Ken Burns end scale (transform only) */ --hero-caption-delay: 180ms; /* caption entrance delay after activation */ --hero-caption-step: 60ms; /* stagger between caption lines */ --hero-kicker-rule: 28px; /* the short rule before the kicker */ --hero-arrow-size: 48px; --hero-dot-size: 10px; --hero-arrow-bg: rgba(10, 12, 14, .42); --hero-arrow-bg-hover: rgba(10, 12, 14, .82); --hero-arrow-border: rgba(255, 255, 255, .38); --hero-dot-idle: rgba(255, 255, 255, .48); --hero-dot-shadow: 0 1px 4px rgba(0, 0, 0, .5); --hero-title-shadow: 0 2px 18px rgba(0, 0, 0, .35); --hero-copy-shadow: 0 1px 10px rgba(0, 0, 0, .45); --hero-lead-color: rgba(255, 255, 255, .92); /* Card / spec surfaces */ --shadow-card: 0 1px 2px rgba(14, 24, 26, .05); --shadow-hover: 0 14px 30px rgba(14, 24, 26, .12); /* Off-canvas backdrop — translucent ink scrim over content */ --scrim-backdrop: rgba(10, 12, 14, .52); /* Scrollers (§5) — teal thumb on a faint track (built in a later turn) */ --scroller-thumb: var(--color-accent); --scroller-thumb-hover: var(--color-accent-strong); --scroller-track: #E7ECE8; /* Promo light-banner gradient field */ --banner-light-1: #EEF1EC; --banner-light-2: #E1E7DF; /* ============================================================ CART DRAWER + INTERNAL PAGES The home page established no drawer, so these are new slots rather than reused ones. Every value is either derived from an existing scale or justified inline — nothing is snapped to a near-miss token. ============================================================ */ /* The brief mandates a 280–350ms panel slide. --dur-base is 250ms, just BELOW that band, so a new duration slot is correct here rather than snapping to the nearest existing token. */ --dur-drawer: 300ms; --drawer-inline-size: 420px; /* desktop panel width */ --drawer-mobile-inline: 92vw; /* <768px — a scrim edge stays visible */ --drawer-skeleton-1: #ECEEE9; /* skeleton base — between surface and surface-alt */ --drawer-skeleton-2: #F6F7F4; /* skeleton sheen stop */ /* Quantity stepper — 44px is the WCAG 2.5.5 floor, not a design choice. */ --step-size: 44px; /* Header cart badge. These are design4a's original literal values, lifted out of header.css unchanged so no raw px or hex sits outside this file. The badge is smaller than --fs-xs by design — it is a count chip, not text. */ --badge-size: 17px; --badge-fs: 10px; --badge-offset-block: 3px; --badge-offset-inline: 1px; /* Undo affordance (deferred removal) */ --undo-bg: #1C2126; /* same graphite as --footer-columns, as a toast field */ --undo-text: #E7EAE7; /* Filter sidebar + pagination */ --sidebar-inline-size: 264px; /* Full-page bag summary rail (§3.4) — narrower than the filter sidebar because it holds figures, not a list of labelled controls. */ --bag-summary-inline: 340px; /* Bag line columns (§3.4). Fixed, not content-sized, because the column HEADER row and every line are separate grids: only identical track lists make the headings sit over the figures they label. --bag-qty-col is the stepper measured exactly — 44 + 42 + 44 plus its 1px border each side. --bag-num-col holds "AED 126,000" at --fs-md semibold (measured 97px) with room to right-align. Together with the 44px remove cell and five --space-md gaps these come to 560px, which is why the table needs an items column of 760px+ and therefore a 1200px viewport — see the note in cart-page.css. */ --bag-media-col: 96px; --bag-qty-col: 132px; --bag-num-col: 104px; /* Checkout step rail (§3.5). */ --checkout-summary-inline: 360px; --step-dot-size: 32px; /* Product-gallery thumbnail track (§3.2). The rail has one column per frame, so this is the CAP on how wide one thumbnail may grow — without it a two-frame product would show two half-stage thumbnails. */ --thumb-max: 160px; /* Mobile buy bar (§3.2). Fixed chrome has to know its own height so the back-to-top button can step over it instead of sitting behind it. */ --product-bar-block: 72px; /* In-page sticky offsets. Anchor targets must clear the docked header, so scroll-margin-top is a token, not a magic number per page. */ --anchor-offset: calc(var(--header-h-stuck) + var(--space-lg)); /* Legal / prose measure — the brief asks for 65–75 characters. */ --measure-prose: 68ch; }