/* ========================================================================== Frontier Peptide Labs — design tokens Extracted from production 2026-09-03. Values are exact, not approximated. Legacy variable names are noted so old CSS can be diffed against this. ========================================================================== */ :root { /* ---------- BRAND ---------------------------------------------------- */ --color-brand: #4557C9; /* legacy --primary / --e-global-color-primary */ --color-brand-hover: #182BA8; /* legacy --primary_hover / --e-global-color-primary_hover */ --color-brand-deep: #3A49B5; /* submenu hover + success-notice top border */ --color-brand-link-hover: #2F3D9B; /* term-description link hover */ --color-brand-muted: #8A93D4; /* struck-through price in Elementor / HFE grids */ --color-brand-tint-25: rgba(69,87,201,.25); /* pack-tile selected ring */ /* ---------- SURFACES -------------------------------------------------- */ --color-bg: #FFFFFF; /* legacy --background. body, header row, footer */ --color-surface-light: #F4F4F4; /* legacy --light. swatch rest state, theme card bg */ --color-surface-card: #F6F6F6; /* product-card .product-block (child theme) */ --color-surface-caption: #FFFFFF; /* .product-caption (wp-custom-css, !important) */ --color-surface-coa: #F8F9FC; /* .coa-viewer .coa-body */ --color-surface-muted: #F8F9FA; /* HFE empty/notice panel */ --color-ink-solid: #000000; /* skewed button slab, qty controls, footer headings */ --color-ink-deep: #151515; /* theme :root --accent default (NOT the live accent) */ /* ---------- TEXT ------------------------------------------------------ */ --color-text: #414042; /* legacy --text / --e-global-color-text */ --color-text-strong: #414042; /* legacy --accent / --e-global-color-accent */ --color-text-muted: #888888; /* legacy --text-light / --e-global-color-text_light */ --color-text-on-brand: #FFFFFF; --color-text-card-title: #1A2E4A; /* product-card title (child theme, !important) */ --color-text-price: #4557C9; /* all listing + PDP prices */ --color-text-price-strike: rgba(0,0,0,.49); /* #0000007D on card del */ --color-text-trust-label: #6B6B6B; /* .fpl-paytrust-label */ --color-text-hfe-title: #333333; /* HFE product-grid title */ --color-text-hfe-meta: #666666; /* HFE category / description */ /* ---------- LINKS ----------------------------------------------------- */ --color-link: #414042; /* a { color: var(--accent) } */ --color-link-hover: #4557C9; /* ---------- BORDERS --------------------------------------------------- */ --color-border: #E8E8E8; /* legacy --border / --e-global-color-border */ --color-border-card: #F0F0F0; /* product-card + HFE card border */ --color-border-soft: #E5E5E5; /* homepage grid .product-transition (wp-custom-css) */ --color-border-input-alt: #D0D0D0; /* search field wrapper */ --color-border-pay: #E0E0E0; /* payment-mark chips */ --color-border-coa: #DDDDDD; /* .coa-viewer */ --color-border-pack: #D9D9D9; /* .fpl-pack-card rest state */ --color-border-hairline: rgba(0,0,0,.08); /* .fpl-paytrust top rule */ --color-border-menu-item: rgba(0,0,0,.06); /* mobile flyout menu item rule */ --color-divider-dot: #CCCCCC; /* skewed dot between PDP tab labels */ /* ---------- STATUS ---------------------------------------------------- */ --color-success: #0F834D; /* WooCommerce default success */ --color-success-notice-bg: #4557C9; /* OVERRIDDEN to brand by child theme (!important) */ --color-info: #3D9CD2; --color-error: #E2401C; --color-error-strong: #FF0000; /* cart remove-link hover */ --color-wishlist-notice: #5FBD74; /* woosw popup notice */ --color-star: #4557C9; /* .star-rating span::before = var(--primary) */ --color-star-empty: rgba(65,64,66,.25); /* var(--text) at opacity .25 */ --color-sale-badge: #3E62E1; /* .onsale:after — no product is on sale today */ --color-stock-badge: #000000; /* .stock-label:after */ /* ---------- HEADER / NAV / FOOTER ------------------------------------ */ --color-announce-bg: #4557C9; --color-announce-text: #FFFFFF; --color-announce-link-hover:#B1B1B1; --color-header-bg: #FFFFFF; --color-nav-link: #414042; --color-nav-link-hover: #4557C9; --color-submenu-bg: #4557C9; --color-submenu-bg-hover: #3A49B5; --color-submenu-text: #FFFFFF; --color-footer-bg: #FFFFFF; /* no background is set anywhere; inherits body */ --color-footer-heading: #000000; --color-footer-text: #414042; /* ---------- EDITORIAL PALETTE (product descriptions + COA tab) -------- Authored inline in post_content, not in any stylesheet. Reproduce it or 44 product descriptions and the COA tab change appearance. */ --color-edit-ink: #24384A; --color-edit-heading: #071F33; --color-edit-hero-from: #071F33; --color-edit-hero-mid: #0B5F8F; --color-edit-hero-to: #159BD3; --color-edit-hero-text: #EEF9FF; --color-edit-panel-bg: #F4FBFF; --color-edit-panel-border: #D8EDF7; /* ====================================================================== TYPOGRAPHY ====================================================================== */ --font-display: "Oxanium", sans-serif; /* headings + body + buttons + nav */ --font-body: "Oxanium", sans-serif; --font-brandmark:"Nutritix Heading", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-legacy-body: "Plus Jakarta Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-icon-theme: "nutritix-icon"; --font-icon-star: "star"; /* base */ --fs-body: 14px; --lh-body: 1.714; /* = 24px */ --fw-body: 400; --fs-small: 12px; --lh-small: 1.8333; --fs-label: 12px; --fw-label: 600; /* uppercase, PDP variation label */ /* headings — NO responsive scale exists in the theme; see §3.4 */ --fs-h1: 60px; --lh-h1: 1.214; --fs-h2: 48px; --lh-h2: 1.16667; --fs-h3: 20px; --lh-h3: 1.22222; /* theme ships 36px, wp-custom-css forces 20px */ --fs-h4: 24px; --lh-h4: 1.33333; --fs-h5: 20px; --fw-h5: 600; --fs-h6: 16px; --fw-h6: 600; --fw-heading: 500; /* theme default for h1–h6 */ /* page / entry titles */ --fs-entry-title: 64px; --lh-entry-title: 1; --fs-entry-title-mobile: 28px; --lh-entry-title-mobile: 1.25; --fs-product-title: 48px; --lh-product-title: 1; --fs-product-title-mobile: 26px;--lh-product-title-mobile: 1.25; --fs-archive-title-mobile: 26px; /* Elementor global typography (kit .elementor-kit-8) */ --fs-kit-heading-title: 36px; --lh-kit-heading-title: 36px; --fs-kit-heading-title-mobile: 30px; --lh-kit-heading-title-mobile: 30px; --fw-kit-heading-title: 800; --tt-kit-heading-title: uppercase; --fs-kit-footer-heading: 14px; --lh-kit-footer-heading: 22px; --fw-kit-footer-heading: 700; --tt-kit-footer-heading: none; --fw-kit-primary: 700; /* headings, nav, buttons */ --fw-kit-secondary: 400; --fw-kit-accent: 800; /* Elementor button widget text */ /* buttons */ --fs-button: 11px; --lh-button: 2.1818181818; /* = 24px */ --fw-button: 600; --ls-button: 2px; --tt-button: uppercase; --fs-button-card: 14px; --ls-button-card: .5px; /* card "View Product" */ --fs-button-card-mobile: 12px; /* nav */ --fs-nav: 19px; --fw-nav: 700; --fs-nav-mobile: 16px; /* product surfaces */ --fs-card-title: 18px; --lh-card-title: 1.4; --fw-card-title: 700; --fs-card-title-mobile: 13px; --fs-card-price: 16px; --fw-card-price: 300; --fs-card-price-mobile: 13px; --fs-pdp-price: 24px; --lh-pdp-price: 1; --fw-pdp-price: 400; --fs-pdp-price-del: 14px; --fs-tab-title: 24px; --lh-tab-title: 24px; --fw-tab-title: 700; --fs-swatch: 16px; --lh-swatch: 1; /* raised from theme 13px by FPL patch */ --fs-totals-row: 18px; --fs-totals-grand:24px; --fs-totals-head: 28px; --ls-eyebrow: 3px; /* hero eyebrow headings on the homepage */ /* ====================================================================== SPACING + LAYOUT ====================================================================== */ --container-max: 1290px; /* Elementor container (.e-con) desktop */ --container-max-tablet: 1024px; /* ≤1024px */ --container-max-mobile: 767px; /* ≤767px */ --container-theme-max: 1320px; /* .col-full / .container (non-Elementor)*/ --container-pad-x: 15px; /* <768px and >1320px */ --container-pad-x-mid: 30px; /* 768–1320px */ --space-el-container-pad: 10px; /* Elementor .e-con default padding */ --space-widget-gap: 20px; /* --widgets-spacing / --kit-widget-spacing */ --space-1: 4px; --space-2: 6px; --space-3: 10px; --space-4: 12px; --space-5: 15px; --space-6: 20px; --space-7: 25px; --space-8: 30px; --space-9: 40px; --space-10: 50px; --space-11: 60px; --space-12: 65px; --space-section-y: 40px; /* #page .site-content margin-block */ --space-card-pad: 13px 30px 25px;/* ≥1024px */ --space-card-pad-sm: 13px 15px 25px;/* <1024px */ --space-card-gutter: 10px; /* li padding-inline (child theme) */ --space-grid-gap-mobile: 12px; /* forced 2-col grid <768px */ --space-hfe-gap: 35px 20px; /* HFE product grid ≥1201px */ --space-hfe-gap-md: 20px 15px; /* HFE grid ≤768px */ --space-hfe-gap-sm: 25px; /* HFE grid ≤480px */ --space-panel-pad: 30px 30px 40px;/* .cart_totals and #order_review */ --space-tabs-y: 50px 0 20px; /* .woocommerce-tabs.product-accordions */ /* ====================================================================== RADII ====================================================================== */ --radius-0: 0; --radius-xs: 2px; /* wvs-style-squared swatch, notice */ --radius-sm: 3px; /* THE default: buttons, badges, skewed slabs */ --radius-md: 4px; /* card CTA, mini-cart toggle, search form, pay chips */ --radius-lg: 5px; /* inputs, cart_totals, #order_review */ --radius-search:8px; /* .ntrix-search-wrap */ --radius-card: 10px; /* homepage grid .product-transition, .custom-card */ --radius-pack: 12px; /* .fpl-pack-card, .coa-viewer */ --radius-pill: 20px; /* .fpl-badge */ --radius-full: 999px; /* .fpl-cart-count, circular action buttons use 50% */ --radius-round:50%; /* hover action buttons on product cards */ /* ====================================================================== BORDERS ====================================================================== */ --border-hairline: 1px solid var(--color-border); --border-card: 1px solid var(--color-border-card); --border-input: 1px solid var(--color-border); --border-panel: 6px solid var(--color-border); /* cart totals / order review */ --border-coupon: 2px dashed var(--color-border); --border-pack: 2px solid var(--color-border-pack); --border-notice-l: 0.6180469716em solid rgba(0,0,0,.15); /* ====================================================================== SHADOWS (this design uses shadow sparingly — most surfaces are flat) ====================================================================== */ --shadow-none: none; --shadow-coa: 0 4px 20px rgba(0,0,0,.08); --shadow-coa-img: 0 2px 12px rgba(0,0,0,.10); --shadow-dropdown: 0 4px 12px rgba(0,0,0,.10); --shadow-flyout: -10px 0 30px rgba(0,0,0,.18); --shadow-card-hover:0 15px 25px rgba(0,0,0,.15); --shadow-soft: 0 0 30px 0 rgba(0,0,0,.10); --shadow-diffuse: 0 4px 50px rgba(0,0,0,.07); --shadow-ring-pack: 0 0 0 2px rgba(69,87,201,.25); --shadow-editorial: 0 18px 44px rgba(7,31,51,.18); --shadow-inset-ok: inset 2px 0 0 #0F834D; --shadow-inset-err: inset 2px 0 0 #E2401C; /* ====================================================================== MOTION (only two durations exist in the whole codebase) ====================================================================== */ --dur-fast: .15s; --dur-base: .3s; --dur-slow: .4s; --ease-base: ease; --ease-wipe: cubic-bezier(.785,.135,.15,.86); /* button hover fill */ /* ====================================================================== THE SKEW — this theme's single most identifying visual trait ====================================================================== */ --skew-angle: -10deg; --skew-scale-x: .955; --skew-origin: bottom left; --skew-angle-dot: -15deg; /* tab separator dot */ /* ====================================================================== BREAKPOINTS (declared for documentation; use the literals in @media) ====================================================================== */ --bp-mobile: 767px; /* Elementor "Mobile Portrait" (max) */ --bp-mobile-extra: 880px; /* Elementor "Mobile Landscape" (max) */ --bp-tablet: 1024px; /* Elementor "Tablet Portrait" (max) */ --bp-tablet-extra: 1200px; /* Elementor "Tablet Landscape" (max) */ --bp-laptop: 1366px; /* Elementor "Laptop" (max) */ --bp-theme-mid: 1320px; /* theme container padding switch */ /* Z-INDEX */ --z-badge: 1; --z-card-link: 2; --z-card-hover: 5; --z-qty-btn: 9; --z-agegate: 1000; --z-flyout: 99999; } /* Elementor kit responsive overrides — reproduce verbatim */ @media (max-width: 1024px) { :root { --container-max: 1024px; } } @media (max-width: 767px) { :root { --container-max: 767px; --fs-kit-heading-title: 30px; --lh-kit-heading-title: 30px; } } /* ========================================================================== 00 — BASE Fonts · reset · base elements · containers · headings · links · forms · the button system (the skew). Concatenated after assets/css/_tokens.css, so every var(--…) below is already defined. !important appears exactly three times — [hidden] and .hidden (both utility hides), and the cart/checkout skew suppression, which carries it in production too. Each is marked inline. Nothing else uses it. ========================================================================== */ /* ========================================================================== 1. FONTS — self-hosted Oxanium + Nutritix Heading -------------------------------------------------------------------------- Oxanium is the site-wide family. "Plus Jakarta Sans" was loaded in production but shadowed on by the Elementor kit and never painted — it is dropped. "Nutritix Heading" is NOT dropped, and design-tokens.md §3.1 / trap §8.9 are WRONG on this point. It is shadowed on , but Elementor re-asserts it per-element on the two homepage promo tiles, so it does paint: .elementor-381 .elementor-element-0898cc9 .elementor-cta__description { font-family:"Nutritix Heading"; font-size:48px; font-weight:700; text-transform:uppercase; line-height:48px; color:#2D2C2F } ("YOU CAN TRUST") .elementor-381 .elementor-element-cca7800 .elementor-cta__description { …64px…; color:#4557C9 } ("99%") Both verified in the live homepage's inline CSS on 2026-09-03, and visible in home__desktop.png y≈1100-1200: a heavy condensed face next to Oxanium's wider "QUALITY" / "PURITY EXCEEDS". Consumed via --font-brandmark (50-content.css §4). Not preloaded — it is below the fold. These two files came straight out of production's Elementor font cache (…/uploads/elementor/google-fonts/fonts/). They are VARIABLE fonts: the wght axis spans 200–800, so two files — one per subset — cover the seven weights production declared with fourteen @font-face rules pointing at the same two files. Same rendering, twelve fewer rules, two HTTP requests. unicode-range values are Google's, copied verbatim from the production CSS. ========================================================================== */ /* latin */ @font-face { font-family: "Oxanium"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("../fonts/oxanium-f874cdc5.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: "Oxanium"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("../fonts/oxanium-3e3c0341.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Nutritix Heading — one weight, one style. Copied from production's own theme directory (…/themes/nutritix/assets/fonts/new/Nutritix-Heading.*), path read out of that theme's @font-face rule, not guessed. Production also served .eot and .ttf; both are dropped — woff2 covers every browser this store supports, woff is the single fallback. */ @font-face { font-family: "Nutritix Heading"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/nutritix-heading.woff2") format("woff2"), url("../fonts/nutritix-heading.woff") format("woff"); } /* ========================================================================== 2. RESET — minimal and modern Deliberately does NOT zero margins wholesale: the theme's rhythm comes from a 1.618 modular scale with irrational em literals (§4.4) that section 3 restates exactly. Zeroing then restoring would invite drift. ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; } /* Production sets img{display:block}; galleries and product media depend on it. svg is left alone — Elementor's inline icons sit inline in nav items. */ img { display: block; height: auto; max-width: 100%; } svg, video, canvas, iframe, embed, object { max-width: 100%; } video { height: auto; } figure { margin: 0; } table { border-collapse: collapse; border-spacing: 0; } button, input, select, textarea { font-family: inherit; font-size: 100%; margin: 0; vertical-align: baseline; } [hidden] { display: none !important; } ::selection { color: var(--color-text-on-brand); text-shadow: none; background: var(--color-brand); } /* ========================================================================== 3. BASE ELEMENTS — typography from the tokens §3.2. Note --fs-body is 14px and --lh-body 1.714 (= 24px). Production resolved the family to the bare string "Oxanium" with no generic fallback (trap §8.10); --font-body carries the fallback the spec asked for. ========================================================================== */ body { background-color: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: var(--fs-body); font-weight: var(--fw-body); line-height: var(--lh-body); text-rendering: optimizeLegibility; overflow-x: hidden; word-wrap: break-word; } button, input, textarea { color: var(--color-text); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); } select { color: initial; font-family: var(--font-body); max-width: 100%; } p { margin: 0 0 1em; } ul, ol { margin: 0 0 1em 3em; padding: 0; } ul { list-style: disc; } ol { list-style: decimal; } li > ul, li > ol { margin-bottom: 0; margin-left: 1em; } dt { font-weight: 600; } dd { margin: 0 0 1.41575em; } b, strong { font-weight: 600; } dfn, cite, em, i { font-style: italic; } blockquote { color: var(--color-text-strong); font-size: 18px; font-style: italic; } blockquote p { position: relative; } address { font-style: italic; margin: 0 0 1em; } abbr[title] { border-bottom: 1px dotted var(--color-border); cursor: help; text-decoration: none; } code, kbd, pre, samp { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9375em; } pre { overflow-x: auto; max-width: 100%; } /* --color-divider-dot is named for the PDP tab separator, but #CCCCCC is one colour with two uses; the token is the source, not a second literal. */ hr { background-color: var(--color-divider-dot); border: 0; height: 1px; margin: 0 0 1em; } table { margin: 0 0 1.41575em; width: 100%; } .hentry strong, .hentry th, .hentry dt { color: var(--color-text-strong); } /* WordPress accessibility helpers — used by searchform.php, skip links and every screen-reader-only label in the templates. */ .screen-reader-text { border: 0; clip-path: inset(50%); height: 1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; } .screen-reader-text:focus { background-color: var(--color-bg); border-radius: var(--radius-sm); box-shadow: var(--shadow-dropdown); clip-path: none; color: var(--color-brand); display: block; font-size: var(--fs-h6); font-weight: var(--fw-h6); height: auto; left: var(--space-5); line-height: normal; padding: var(--space-5) var(--space-7); text-decoration: none; top: var(--space-5); width: auto; z-index: 100000; } .hidden { display: none !important; /* production parity: theme ships .hidden with !important */ } /* ========================================================================== 4. CONTAINER / LAYOUT SYSTEM §4.1. .col-full and .container are the theme's containers: 1320px max with 15px inline padding, widening to 30px between 768 and 1320 (the 1320 breakpoint is one of the three "foreign" breakpoints called out in §8.12). Elementor's own .e-con containers cap at --container-max (1290 / 1024 / 767) and are handled by the Elementor-compatibility partial. ========================================================================== */ .site { overflow-x: hidden; } .site-content, .header-widget-region { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .col-full, .container { margin-left: auto; margin-right: auto; max-width: var(--container-theme-max); padding-left: var(--container-pad-x); padding-right: var(--container-pad-x); width: 100%; } .col-full::after { clear: both; content: ""; display: block; } .col-fluid { padding-left: var(--container-pad-x); padding-right: var(--container-pad-x); } @media (min-width: 768px) and (max-width: 1320px) { .col-full, .container { padding-left: var(--container-pad-x-mid); padding-right: var(--container-pad-x-mid); width: auto; } } @media (max-width: 1320px) { .col-fluid { padding-left: var(--container-pad-x-mid); padding-right: var(--container-pad-x-mid); } } /* Page vertical rhythm (§4.2). */ #page .site-content { margin-top: var(--space-section-y); margin-bottom: var(--space-section-y); } body.home:not(.blog) #page .site-content, body.page-template-template-homepage #page .site-content { margin-top: 0; margin-bottom: 0; } body.single-product #page .site-content { margin-top: var(--space-section-y); margin-bottom: 0; } body.woocommerce-cart #page .site-content { margin-bottom: 6.8535260698em; } body.error404 #page .site-content { margin-bottom: 90px; } /* Homepage runs its Elementor sections edge to edge (child theme). :not(.blog) for the same reason as the #page .site-content rule above: if the front page is ever switched back to the posts index, carries BOTH `home` and `blog`, and an unguarded rule would strip the posts index of its container padding — content running edge to edge at 375px. */ body.home:not(.blog) .col-full { padding-left: 0; padding-right: 0; width: auto; } /* ========================================================================== 5. HEADING SCALE §3.3. h3 ships at 20px, NOT the theme's 36px — a global wp-custom-css rule overrode it in production and 20px is the live value everywhere (trap §8.3). The 0.5407911001em bottom margin is an exact literal from the theme's 1.618 modular scale; do not round it (§4.4). ========================================================================== */ h1, h2, h3, h4, h5, h6 { clear: both; color: var(--color-text-strong); font-family: var(--font-display); font-weight: var(--fw-heading); margin: 0 0 0.5407911001em; } h1, .alpha { font-size: var(--fs-h1); line-height: var(--lh-h1); } h2, .beta { font-size: var(--fs-h2); line-height: var(--lh-h2); } h3, .gamma { font-size: var(--fs-h3); line-height: var(--lh-h3); } h4, .delta { font-size: var(--fs-h4); line-height: var(--lh-h4); } h5 { font-size: var(--fs-h5); font-weight: var(--fw-h5); } h6 { font-size: var(--fs-h6); font-weight: var(--fw-h6); } .alpha, .beta, .gamma, .delta { display: block; } p + h2, p + header h2, p + h3, p + h4, ul + h2, ul + header h2, ul + h3, ul + h4, ol + h2, ol + header h2, ol + h3, ol + h4, table + h2, table + header h2, table + h3, table + h4, blockquote + h2, blockquote + header h2, blockquote + h3, blockquote + h4, form + h2, form + header h2, form + h3, form + h4 { margin-top: 1em; } /* Entry / page titles. */ .entry-title { font-size: 36px; line-height: 1.0555555556; } .entry-title a { color: var(--color-text-strong); } .entry-title a:hover { color: var(--color-brand); } .post-content .entry-title { margin-bottom: 14px; } .entry-header h1.entry-title, .page-header h1.page-title { font-size: var(--fs-entry-title); line-height: var(--lh-entry-title); margin-bottom: var(--space-6); } article.page .entry-header h1.entry-title { margin-bottom: var(--space-10); } /* -------------------------------------------------------------------------- Responsive type (§3.4) There is essentially no responsive scale in this design. Production has ZERO responsive font-size rules for h1–h6; six hand-written !important patches in wp-custom-css are the entire mobile system. Reproduced here as the OUTCOME — same sizes, no !important, no patch-by-patch copy — so later partials can override normally. Only the title patches live in this file. The other three (loop product title, loop price, card CTA) belong to the product-card partial: they are component rules, and putting them here would out-order that component's own styles. NOTE: a bare

stays 60px on mobile, exactly as production does. That is the acceptance standard, not an oversight. -------------------------------------------------------------------------- */ @media (max-width: 767px) { .entry-header h1.entry-title, h1.alpha.entry-title { font-size: var(--fs-entry-title-mobile); line-height: var(--lh-entry-title-mobile); } /* .woocommerce-products-header is NOT restated here. 20-archive.css owns that header and already carries this exact rule with the extra `.term-description h1` selector — two copies meant two places to edit and only one of them was the complete one. */ .page-header h1.page-title { font-size: var(--fs-archive-title-mobile); line-height: 1.25; } } /* ========================================================================== 6. LINKS ========================================================================== */ a { color: var(--color-link); text-decoration: none; } a:hover { color: var(--color-link-hover); text-decoration: none; } /* Production ships `:focus { outline: none }` site-wide, which leaves keyboard users with no visible focus at all. Fixed rather than reproduced — the :focus-visible ring never shows for mouse users, so nothing in the visual diff moves. */ :focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; } /* Category / term description links live in 60-features.css §60.4, character for character — that partial also owns the markup (inc/category-descriptions.php), so it owns the link treatment. The duplicate that used to sit here is gone. */ /* ========================================================================== 7. FORMS §5.1 radii, §5.3 borders. Inputs are 5px; select is deliberately 0. ========================================================================== */ form { margin-bottom: 1.618em; } input[type="text"], input[type="number"], input[type="email"], input[type="tel"], input[type="url"], input[type="password"], input[type="search"], input[type="date"], textarea, .input-text { -webkit-appearance: none; appearance: none; background-color: var(--color-bg); border: var(--border-input); border-radius: var(--radius-lg); box-sizing: border-box; font-weight: normal; outline: 0; padding: 0.93em 1.25em; transition: all var(--dur-base) ease-in-out; } input[type="text"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="date"]:focus, textarea:focus, .input-text:focus { border-color: var(--color-text-strong); } input[type="search"] { box-sizing: border-box; } input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; } input[type="search"]::placeholder { color: #616161; /* theme literal, no token */ } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; } [placeholder]:focus::placeholder { opacity: 0; transition: opacity 0.5s 0.5s ease; } select { padding: 0.63em 28px 0.63em 1.41575em; } select:not([size]):not([multiple]) { -webkit-appearance: none; -moz-appearance: textfield; appearance: none; background-color: var(--color-bg); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); background-position: calc(100% - 10px) center; background-repeat: no-repeat; background-size: 16px 12px; border: var(--border-input); border-radius: var(--radius-0); color: var(--color-text); max-width: 100%; width: 100%; } textarea { overflow: auto; vertical-align: top; width: 100%; } label { font-weight: 400; } label.inline input { width: auto; } input[type="checkbox"], input[type="radio"] { padding: 0; } input[type="checkbox"] + label, input[type="radio"] + label { margin: 0 0 0 0.3819820591em; } fieldset { border-color: var(--color-border); margin: 1.618em 0; padding: 1em 1.618em 1.618em; } fieldset legend { color: var(--color-text-strong); font-weight: 700; margin-left: -1em; padding: 0.6180469716em 1em; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /* ========================================================================== 8. THE BUTTON SYSTEM — READ BEFORE TOUCHING -------------------------------------------------------------------------- design-tokens.md §7.0, and traps §8.4 / §8.5. This is the single most recognisable element of the brand. The visible button is NOT the element's own background. It is a -10° skewed parallelogram slab drawn by ::after, black at rest, brand blue on hover. Two things make it work, and removing either one silently destroys every button on the site: 1. `z-index: 1` on button/.button creates a stacking context, which is the only reason the `z-index: -1` slab paints ABOVE the element's own (transparent) background but BELOW its text. Drop it and the slab sinks behind the element and every button turns white-on-white. 2. `scaleX(0.955)` with `transform-origin: bottom left` — the skew alone widens the slab past the element box; the scale pulls it back. The slab is DELIBERATELY suppressed on cart and checkout (§7.0). That asymmetry is intentional, not a bug — see the tail of this section. ========================================================================== */ button, input[type="button"], input[type="reset"], input[type="submit"], .button { -webkit-appearance: none; appearance: none; border: none; border-radius: var(--radius-sm); color: var(--color-text-on-brand); cursor: pointer; display: inline-block; font-family: var(--font-display); font-size: var(--fs-button); font-weight: var(--fw-button); letter-spacing: var(--ls-button); line-height: var(--lh-button); padding: 1.365em 4em; text-decoration: none; text-shadow: none; text-transform: var(--tt-button); } /* --- the skew ----------------------------------------------------------- */ button, .button { background-color: transparent; position: relative; z-index: 1; /* CRITICAL — creates the stacking context the slab needs */ } button::after, .button::after { background-color: var(--color-ink-solid); border: 1px solid transparent; border-radius: var(--radius-sm); content: ""; height: calc(100% - 2px); left: 0; position: absolute; top: 0; transform: skewX(var(--skew-angle)) scaleX(var(--skew-scale-x)); transform-origin: var(--skew-origin); transition: all var(--dur-base) var(--ease-base); width: calc(100% - 2px); z-index: -1; } button:hover, .button:hover { color: var(--color-text-on-brand); } button:hover::after, .button:hover::after { background-color: var(--color-brand); } /* Submit-style inputs cannot carry a pseudo-element, so the theme skews the element itself and paints it solid. Its label skews with it — that is the production look. */ input[type="button"], input[type="reset"], input[type="submit"] { background-color: var(--color-text-strong); transform: skewX(var(--skew-angle)); } input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover { background-color: var(--color-brand); color: var(--color-text-on-brand); } /* --- size and state modifiers ------------------------------------------- */ button.small, input[type="button"].small, input[type="reset"].small, input[type="submit"].small, .button.small { font-size: 0.875em; padding: 0.5407911001em 0.875em; } button.loading, input[type="button"].loading, input[type="reset"].loading, input[type="submit"].loading, .button.loading { opacity: 0.5; } button.disabled, button:disabled, input[type="button"].disabled, input[type="button"]:disabled, input[type="reset"].disabled, input[type="reset"]:disabled, input[type="submit"].disabled, input[type="submit"]:disabled, .button.disabled, .button:disabled { cursor: not-allowed; opacity: 0.5; } button.disabled:hover, button:disabled:hover, input[type="button"].disabled:hover, input[type="button"]:disabled:hover, input[type="reset"].disabled:hover, input[type="reset"]:disabled:hover, input[type="submit"].disabled:hover, input[type="submit"]:disabled:hover, .button.disabled:hover, .button:disabled:hover { opacity: 0.5; } /* --- outline variant (§7.3) --------------------------------------------- */ .button-outline { background: transparent; border: 1px solid var(--color-brand); border-radius: var(--radius-lg); color: var(--color-brand); cursor: pointer; display: inline-block; padding: 0.6180469716em 1.41575em; text-decoration: none; } .button-outline:hover { background-color: var(--color-brand-hover); border-color: var(--color-brand-hover); color: var(--color-text-on-brand); } .button-outline.small { font-size: 0.875em; padding: 0.5407911001em 0.875em; } .button-outline.loading { opacity: 0.5; } .button-outline.disabled, .button-outline:disabled, .button-outline.disabled:hover, .button-outline:disabled:hover { cursor: not-allowed; opacity: 0.5; } /* --- the two documented suppressions (§7.0) ------------------------------ Cart and checkout run the buttons FLAT. Production uses !important here because the rule arrives from wp-custom-css after the component CSS; keeping it makes the suppression immune to whatever the cart and checkout partials add later, which is exactly the production behaviour. */ .woocommerce-cart button.button::after, .woocommerce-cart button.button::before, .woocommerce-cart .button::after, .woocommerce-cart .button::before, .woocommerce-checkout button.button::after, .woocommerce-checkout button.button::before, .woocommerce-checkout .button::after, .woocommerce-checkout .button::before { content: none !important; display: none !important; } /* With the slab gone, a cart/checkout button whose component rule forgets to set a background is white text on transparent — an invisible control. The page scope is wrapped in :where() so it adds NO specificity: these two selectors weigh exactly the same as the `button` / `.button` base rule they sit after, and no more. They win over that rule because they come later, and lose to anything a cart or checkout partial writes — those partials are concatenated after this file and paint the real colours (checkout button and Place Order are brand blue). This only ever paints a button nothing else claimed. */ :where(.woocommerce-cart, .woocommerce-checkout) button, :where(.woocommerce-cart, .woocommerce-checkout) .button { background-color: var(--color-ink-solid); } /* ========================================================================== 9. 404 / SEARCH-RESULTS CHROME Only what 404.php and search.php need; both reuse the container and heading styles above rather than introducing a component of their own. ========================================================================== */ .error-404, .no-results.not-found { text-align: center; } .error-404 .page-content, .no-results.not-found .page-content { margin-left: auto; margin-right: auto; max-width: 540px; } .error-404 .page-content > * + *, .no-results.not-found .page-content > * + * { margin-top: var(--space-7); } .error-404 .page-header, .no-results.not-found .page-header { margin-bottom: var(--space-9); } /* The generic search form: field and skewed submit on one row. */ .error-404 .search-form, .no-results.not-found .search-form { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; margin-bottom: 0; } .error-404 .search-form .search-field, .no-results.not-found .search-form .search-field { flex: 1 1 260px; min-width: 0; } /* Plus Jakarta Sans -- self-hosted, variable (400-700, one file per subset). The token spec said this family renders nowhere and should be dropped. True of the pages it sampled (home/shop/product/policy), NOT of /about-us/ and /contact-us/, where Elementor sets it per element -- 5 and 2 rules respectively, verified against the live pages 2026-09-04. Production loads it render-blocking from Google as TTF; we self-host woff2. */ @font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/plus-jakarta-sans-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* -------------------------------------------------------------------------- 00.99 Touch targets -------------------------------------------------------------------------- 44px is the accepted minimum for a touch control. Measured at 375px, the menu toggle drew 33x33 and the hero carousel arrows 32x32 -- both below it, and both primary controls: the hamburger is the ONLY way to the navigation on a phone. Only the hit area grows. The icon inside is untouched, and the containers have room: the header row is 121px tall and the hero 500px, so neither reflows. Production is worse on this measure, not better -- it has 135 sub-44 targets on the mobile homepage against 20 here -- so this is a fix, not a deviation from it. Not applied to footer links: they sit 24px tall in stacked lists, and growing them to 44px would either overlap their neighbours or change the footer's spacing, which would be a visible deviation from production. Left as-is. -------------------------------------------------------------------------- */ @media (max-width: 1024px) { .fpl-menu-toggle { align-items: center; display: inline-flex; justify-content: center; min-height: 44px; min-width: 44px; } .fpl-hero__nav { align-items: center; display: inline-flex; justify-content: center; min-height: 44px; min-width: 44px; } } /* ========================================================================== 10 — HEADER, PRIMARY NAV, MOBILE FLYOUT Replaces Header-Footer-Elementor template 3549 plus the wp-custom-css blocks that patch it and Elementor Pro snippet #9473 (the slide-in panel). Every number below is either a token, a value read out of the live inline Elementor CSS (el_3549), or a pixel measured off reference-screenshots/home__{desktop,tablet,mobile}.png. Nothing is guessed. DESKTOP GEOMETRY (1440px, from home__desktop.png): announcement y 0–35 36px, #4557C9 main row y 36–163 128px, container 1290px, columns 25% / 50% / 25% nav row y 164–219 55px = 10px padding + 35px link box + 10px header total 220px NOT STICKY. Production's only positioning on the header is HFE's `.ehf-header #masthead { position:relative; z-index:99 }`, and "sticky" appears nowhere in the rendered page. It scrolls away. Reproduced. BREAKPOINTS >1024 full desktop header ≤1024 nav row becomes a centred hamburger; account hidden; flyout live ≤767 search, account and cart hidden; hamburger moves beside the logo 1024 is Elementor's "tablet" dropdown breakpoint for this nav widget and the breakpoint snippet #9473 scopes its panel CSS to. Do not change it to 768. WHERE THE CART GOES ON A PHONE. Hiding .fpl-header__actions at ≤767 is faithful to production, but only because production replaces it with the fixed bottom bar (HFE template 1381 + snippet #9471). That bar is template-parts/mobile-bar.php, styled in 11-footer.css §7, and it is what carries Shop / Account / Search / Wishlist / Cart from 1024px down. Do not hide the header actions without it, or a phone visitor can add to cart and never reach the basket. ========================================================================== */ :root { /* Elementor's menu-cart quantity bubble. No token exists for it — the colour is Elementor's own default and appears nowhere else. */ --fpl-cart-badge-bg: #d9534f; /* Elementor's .elementor-menu-toggle: a 22px glyph in #33373D on a rgba(0,0,0,.05) tile. Measured #F2F2F2 over white in the screenshots. */ --fpl-toggle-ink: #33373d; --fpl-toggle-bg: rgba(0, 0, 0, .05); /* Side-cart drawer. Elementor Pro's side cart is 360px wide with a dimmed scrim; neither number is a token because nothing else in the theme uses them. The stack sits one step under --z-flyout so the drawer and its scrim can never be separated by the mobile bottom bar (z-index 997). */ --fpl-cart-drawer-w: 360px; --fpl-cart-drawer-z: 99999; --fpl-cart-backdrop-z: 99998; --fpl-cart-backdrop-bg: rgba(0, 0, 0, .45); } /* ========================================================================== 1. SHELL ========================================================================== */ .fpl-header { background-color: var(--color-header-bg); position: relative; z-index: 99; /* HFE parity: .ehf-header #masthead */ } .fpl-header__body { background-color: var(--color-header-bg); } .fpl-header__grid { align-items: center; display: grid; grid-template-areas: "brand search actions" "nav nav nav"; grid-template-columns: 25% 50% 25%; margin-inline: auto; max-width: var(--container-max); width: 100%; } .fpl-header__brand { grid-area: brand; } .fpl-header__search { grid-area: search; } .fpl-header__actions { grid-area: actions; } .fpl-header__nav { grid-area: nav; } /* Elementor gives every child container a 10px pad; the row container itself is explicitly 0 (element f068b78). That is what puts the search box at x408–1032 inside a 1290px container. */ .fpl-header__brand, .fpl-header__search, .fpl-header__actions { padding: var(--space-3); } /* -------------------------------------------------------------------------- 1.1 Button reset — design-tokens.md §7.0, suppression case 3 00-base.css gives EVERY