/* * Express Shop design tokens. WHM-56, approved direction. * * THE ONE STRUCTURAL IDEA: two grounds, one accent. * * DARK carries BRAND moments only, the proof bar, header, category nav, hero, * the tested-batch ticker, and the footer. * * LIGHT carries every COMMERCIAL surface, product cards, category tiles, the * product page, the lab results table. * * That split is not decoration, it is forced by the photography. Every product * shot on this store is cut out on WHITE, and the Tiva pens are branded RED. A * white-background product image on a black card reads as a floating white box, * and a heavy purple surface fights the red packaging. So the commercial * surfaces are white on a soft violet ground with the accent used sparingly, * and the products keep their own colour. * * NO MONOSPACE ANYWHERE. Numbers are set in Archivo with tabular figures * (font-variant-numeric: tabular-nums) so prices and lot codes still align in * columns without the receipt look. An earlier pass used a mono face for lot * numbers and small uppercase labels; it was rejected on sight, and correctly. * Do not reintroduce a monospace family, and do not set uppercase labels with * added letter-spacing: that pairing is the single clearest tell of * machine-generated design and it is banned from this system. * * Naming: --ep-, and --ep-lt- for the light system. Roles, not * hues, so a palette change is a value edit rather than a find-and-replace. */ :root { /* =============================================================== ACCENT, one hue, four steps, shared by both grounds. --ep-vio the luminous violet. Fills and glows on DARK. --ep-vio-2 lighter, for accent TEXT on dark. --ep-vio-deep the darker step. This is the one used on LIGHT surfaces, for buttons, links and prices, because --ep-vio is too light to carry white text or to sit as text on white. Measured: white on --ep-vio-deep ............ 7.06 fills on light --ep-vio-deep on --ep-lt-card ..... 7.06 links, prices --ep-vio-deep on --ep-lt-bg ....... 6.62 --ep-vio-2 on --ep-ground ......... 8.14 accent text on dark --ep-vio on --ep-ground ........... 5.72 large text on dark #14061F is the ink used ON a --ep-vio fill, not black: black on that violet measures 8.9 but looks harsh, and the near-black violet keeps the button feeling like one object. =============================================================== */ --ep-vio: #A855F7; --ep-vio-2: #C084FC; --ep-vio-deep: #6D28D9; --ep-vio-ink: #14061F; /* =============================================================== DARK SYSTEM, brand moments =============================================================== */ --ep-ground: #0D0716; --ep-surf: #180E2B; --ep-surf-2: #221540; --ep-edge: #2E1F4D; --ep-foot: #0A0512; --ep-white: #FFFFFF; /* 18.4 on --ep-ground */ --ep-mut: #A99DC4; /* 7.72 on --ep-ground */ /* =============================================================== LIGHT SYSTEM, commercial surfaces --ep-lt-card is pure white and must stay pure white: it is the ground behind cut-out product photography, and any tint shows as a halo around the product. Measured on --ep-lt-card: --ep-lt-ink ....... 15.8 --ep-lt-ink-2 ..... 8.91 --ep-lt-mut ....... 5.24 =============================================================== */ /* THE LIGHT GROUND IS WHITE. It was #F7F5FC, a lavender tint, and every product shot on this catalogue is photographed on white, so each one sat in a faintly visible rectangle of its own. White ground, invisible edges. --ep-lt-sunk exists because --ep-lt-bg used to do two jobs: the page ground AND the subtle fill inside chips, spec cells and thumbnails, which only worked while the ground was darker than a card. With both white those fills would have disappeared, so they moved here. */ --ep-lt-bg: #FFFFFF; --ep-lt-sunk: #F4F3F7; --ep-lt-card: #FFFFFF; --ep-lt-line: #E4DEF2; --ep-lt-line-2: #F0EBFA; --ep-lt-tint: #F3EDFF; /* certificate panel, lead brand card */ --ep-lt-tint-e: #DCD0F5; /* its border */ --ep-lt-ink: #1A1030; --ep-lt-ink-2: #3D3357; --ep-lt-mut: #6B6280; /* =============================================================== STATUS Two greens, because the same meaning needs different values on the two grounds. Never use the dark-ground green on a light surface: #34D399 on white measures 1.86 and is unreadable. --ep-ok on --ep-ground ....... 9.13 --ep-lt-ok on --ep-lt-card ...... 4.83 =============================================================== */ --ep-ok: #34D399; --ep-lt-ok: #0F7B4F; --ep-lt-ok-bg: #E8F5EE; --ep-lt-warn: #8A5A00; /* 5.11 on card */ --ep-lt-warn-bg: #FBF3DF; --ep-lt-err: #B3261E; /* 6.24 on card */ --ep-lt-err-bg: #FBECEB; /* =============================================================== TYPE, Archivo variable, one family, 400 to 900. The whole personality is WEIGHT CONTRAST plus tight negative tracking: 900 headlines against 400 body. Tracking tightens as size grows; applying display tracking to body copy hurts legibility, so pick the step that matches what you are setting. =============================================================== */ --ep-font: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --ep-t-xs: 13px; --ep-t-sm: 14px; --ep-t-base: 16px; --ep-t-md: 17px; --ep-t-lg: 19px; --ep-t-xl: 23px; --ep-t-2xl: 34px; --ep-t-3xl: 40px; --ep-t-4xl: 66px; /* hero only */ --ep-lh-tight: 0.98; /* hero */ --ep-lh-snug: 1.25; --ep-lh-body: 1.5; --ep-track-hero: -0.045em; --ep-track-head: -0.038em; --ep-track-sub: -0.03em; --ep-track-tight: -0.02em; --ep-w-regular: 400; --ep-w-medium: 500; --ep-w-semi: 600; --ep-w-bold: 700; --ep-w-black: 900; /* =============================================================== SPACE, 4px grid =============================================================== */ --ep-s-1: 4px; --ep-s-2: 8px; --ep-s-3: 12px; --ep-s-4: 16px; --ep-s-5: 20px; --ep-s-6: 24px; --ep-s-8: 32px; --ep-s-10: 40px; --ep-s-12: 48px; --ep-s-14: 56px; --ep-s-16: 64px; --ep-container: 1220px; --ep-gutter: 40px; --ep-gutter-sm: 20px; /* THE GUTTER ACTUALLY IN FORCE, so nothing has to guess it. .ep-wrap pads by this, and every full bleed rail cancels it with a matching negative margin. They used to switch on their own breakpoints: the reviews rail moved to the wide gutter at 700px while .ep-wrap only moved at 900px, so between those two widths the rail bled 40px against a 20px pad and pushed the whole document sideways. Reading one value makes that class of bug impossible rather than merely fixed. */ --ep-gutter-now: var(--ep-gutter-sm); /* =============================================================== RADIUS + ELEVATION =============================================================== */ --ep-r-xs: 6px; --ep-r-sm: 8px; --ep-r-md: 10px; --ep-r-lg: 14px; --ep-r-xl: 16px; --ep-r-full: 980px; /* The violet glow under a primary button on DARK. This is the one place the accent is allowed to emit light; using it anywhere else spends the effect. */ --ep-glow: 0 0 0 1px rgba(168,85,247,0.5), 0 8px 30px -8px rgba(168,85,247,0.7); --ep-shadow-pop: 0 12px 28px -12px rgba(13,7,22,0.30); /* =============================================================== CONTROLS + MOTION 44px is the floor for anything tappable, as a token so nobody rounds it down. =============================================================== */ --ep-tap: 44px; --ep-control: 56px; --ep-control-md: 48px; /* MOBILE FIRST, and this one is load-bearing. --ep-control-sm is the Search button and every card's Add button: real tap targets, both. It was a flat 38px, under the 44px floor, on a store whose traffic is overwhelmingly phones. It now MEETS the floor by default and only tightens to 38px where there is a pointer and the room for it. */ --ep-control-sm: 44px; --ep-dur-1: 140ms; --ep-dur-2: 220ms; --ep-ease: cubic-bezier(0.25, 1, 0.5, 1); --ep-focus: 2px solid var(--ep-vio); --ep-focus-offset: 3px; /* =============================================================== ICON MASKS Used with -webkit-mask/mask so the shape takes currentColor and follows hover and disabled states, instead of needing one asset per colour. Single-quoted inside the url() because the SVG uses double quotes; '#' must stay percent-encoded or it terminates the data URI. =============================================================== */ --ep-icon-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2.6l2.9 5.9 6.5.9-4.7 4.6 1.1 6.4-5.8-3-5.8 3 1.1-6.4L2.6 9.4l6.5-.9z'/%3E%3C/svg%3E"); --ep-icon-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.5 5.5L20 7'/%3E%3C/svg%3E"); --ep-icon-tick-w: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.5 5.5L20 7'/%3E%3C/svg%3E"); --ep-icon-cart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M6 7h12l-1 12H7L6 7Z'/%3E%3Cpath d='M9 7a3 3 0 0 1 6 0' stroke-linecap='round'/%3E%3C/svg%3E"); --ep-icon-wa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2Zm0 18.2a8.2 8.2 0 0 1-4.2-1.2l-.3-.2-3 .8.8-2.9-.2-.3A8.2 8.2 0 1 1 12 20.2Zm4.5-6.1c-.2-.1-1.4-.7-1.7-.8s-.4-.1-.6.1-.6.8-.8 1-.3.2-.6.1a6.7 6.7 0 0 1-3.3-2.9c-.2-.4.2-.4.6-1.2a.4.4 0 0 0 0-.4c0-.1-.6-1.3-.8-1.8s-.4-.4-.6-.4h-.5a1 1 0 0 0-.7.3 3 3 0 0 0-.9 2.2 5.2 5.2 0 0 0 1.1 2.7 11.8 11.8 0 0 0 4.5 4 5.3 5.3 0 0 0 3.3.7 2.7 2.7 0 0 0 1.8-1.3 2.2 2.2 0 0 0 .2-1.3c-.1-.1-.3-.2-.5-.3Z'/%3E%3C/svg%3E"); --ep-icon-truck: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 7h11v9H2z'/%3E%3Cpath d='M13 10h4l3 3v3h-7z'/%3E%3Ccircle cx='6' cy='18' r='1.8'/%3E%3Ccircle cx='17' cy='18' r='1.8'/%3E%3C/svg%3E"); --ep-icon-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5.2l3.4 2'/%3E%3C/svg%3E"); --ep-icon-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M12 3 4 6v6c0 4.4 3.3 7.9 8 9 4.7-1.1 8-4.6 8-9V6l-8-3Z'/%3E%3Cpath d='M9 12l2.2 2.2L15.5 10' stroke-linecap='round'/%3E%3C/svg%3E"); --ep-icon-globe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.6 3.8 5.7 3.8 9s-1.3 6.4-3.8 9c-2.5-2.6-3.8-5.7-3.8-9S9.5 5.6 12 3Z'/%3E%3C/svg%3E"); --ep-icon-tg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M21.7 3.4 2.9 10.6c-1.1.4-1.1 1.1-.2 1.4l4.8 1.5 1.8 5.6c.2.6.1.9.8.9.5 0 .7-.2 1-.5l2.3-2.2 4.8 3.5c.9.5 1.5.2 1.7-.8l3.1-14.6c.3-1.2-.5-1.8-1.3-1.4ZM8.6 13.3l10.3-6.5c.5-.3.9-.1.6.2l-8.8 8-.3 3.6-1.8-5.3Z'/%3E%3C/svg%3E"); --ep-icon-doc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V7l-4-4Z'/%3E%3Cpath d='M14 3v4h4'/%3E%3Cpath d='M9 13h6M9 17h6' stroke-linecap='round'/%3E%3C/svg%3E"); /* =============================================================== LEGACY ALIASES The WHM-8 token names, repointed. They are not left dangling: a rule still referencing --ep-orange resolves to the accent rather than to nothing, which is the failure that took the dashboard's Express page down in WHM-55. Delete only after a grep. =============================================================== */ --ep-orange: var(--ep-vio-deep); --ep-nav-bg: var(--ep-ground); --ep-black: var(--ep-lt-ink); --ep-white-legacy: var(--ep-lt-card); --ep-cart-bubble-bg: var(--ep-vio); --ep-cart-bubble-border: var(--ep-vio); --ep-mobile-bg: var(--ep-ground); --ep-mobile-hamburger: var(--ep-white); --ep-topbar-bg: var(--ep-ground); --ep-below-header-bg: var(--ep-lt-card); --ep-below-header-text: var(--ep-lt-ink); --ep-archives-desc-bg: var(--ep-lt-card); --ep-accent: var(--ep-vio-deep); --ep-accent-deep: var(--ep-ground); --ep-accent-lift: var(--ep-vio); --ep-accent-glow: var(--ep-vio-2); --ep-tint: var(--ep-lt-tint); --ep-tint-line: var(--ep-lt-tint-e); --ep-ink: var(--ep-lt-ink); --ep-ink-2: var(--ep-lt-ink-2); --ep-ink-3: var(--ep-lt-mut); --ep-paper: var(--ep-lt-card); --ep-canvas: var(--ep-lt-bg); --ep-well: var(--ep-lt-sunk); --ep-line: var(--ep-lt-line); --ep-line-strong: var(--ep-lt-mut); --ep-r-full-legacy: var(--ep-r-full); } /* Numbers that sit in columns. Applied by class rather than globally: tabular figures are wider and slightly worse in running prose. */ .ep-num { font-variant-numeric: tabular-nums; } /* * Visually-hidden text. * * NOT optional. WooCommerce builds a sale price as * * Original price was: £215.00. * £215.00 * Current price is: £180.00. * £180.00 * * The theme normally supplies this rule. These templates render outside the * theme's markup, so without it every sale price on the site reads * "£215.00 Original price was: £215.00.£180.00Current price is: £180.00." * Found by testing get_price_html() against the live catalogue before deploy, * not on the site. * * The clip-path/clip pair is the standard belt and braces: clip is deprecated * but still what older Safari honours. */ .ep-pdp .screen-reader-text, .ep-arch .screen-reader-text, .ep-home .screen-reader-text, .ep-chrome .screen-reader-text, .ep-foot .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* Desktop may tighten the small control; a phone may not. */ @media (min-width: 900px) { :root { --ep-control-sm: 38px; } } @media (prefers-reduced-motion: reduce) { :root { --ep-dur-1: 0ms; --ep-dur-2: 0ms; } } @media (min-width: 900px) { :root { --ep-gutter-now: var(--ep-gutter); } }