/* ============================================================ NOX — component stylesheet (single source of truth) ------------------------------------------------------------ Tokens live in style.css :root. Reference them via var(--…). Motion tokens: --ease = var(--ease), --ease-io = cubic-bezier(.65,0,.35,1). This file is the consolidated, de-duplicated rewrite of the old assets/css/nox.css. Sections 1, 8 and 9 (foundation + buttons, catalogue grid + chips, product card) are the APPROVED centerpiece and are verbatim. Everything else is ported pixel-for-pixel from the old file (only easing literals swapped to tokens where identical) — no visual change. ============================================================ SECTION INDEX ------------------------------------------------------------ [1] FOUNDATION primitives + BUTTON system [centerpiece] [2] Blocksy parent overrides 2.1 header polish (wordmark / nav / icons) 2.2 header tagline + logo visibility 2.3 site background (cream everywhere) 2.4 shop-archive theme vars / sidebar removal note 2.5 Woo Blocks + classic theme button vars [3] Compliance: age bar, age gate, top-strip marquee [4] Header enrichment + sticky pinned nav [5] Footer (custom, editorial) [6] Homepage sections 6.1 shared section-head 6.2 hero 6.3 featured products (legacy Woo-block styling) 6.4 research field cards 6.5 our process cards (renders on Why NOX via inc/process-section.php) 6.6 research library (statement + hairline index) 6.8 home colour safety + centred headings [7] Content pages 7.1 shared helpers / breadcrumb 7.2 why NOX 7.3 quality: hero + pillars + FAQ 7.4 reference: hero, sections, glossary, calculator 7.5 peptides accordion 7.6 legal pages + TOC 7.7 shared buttons used in page content (legacy .btn) [8] CATALOGUE grid + chips + result count [centerpiece] [9] Product CARD [centerpiece] [10] Favourites (card heart, toast, drawer, mobile heart) [11] Search overlay (custom) + Blocksy search modal restyle [12] Cart / Woo Blocks / mini-cart / checkout / WhatsApp / BACS [13] Mobile menu enrichment + mobile header icons [14] Product-page (PDP) overrides + responsive tails ============================================================ */ /* ============================================================ [H-2] Skip link — the first focusable element in . Off-screen until focused, then it drops in top-left above every layer. Design tokens only; no !important. ============================================================ */ .nox-skip-link{ position:fixed;top:0;left:0;z-index:100001; transform:translateY(-120%); padding:var(--space-xs) var(--space-md); background:var(--ink);color:var(--on-dark); font-family:var(--font-sans);font-size:var(--fs-body-sm);font-weight:600; letter-spacing:var(--ls-wide);text-transform:uppercase;text-decoration:none; border-bottom:2px solid var(--gold); transition:transform var(--dur-fast) var(--ease); } .nox-skip-link:focus{ transform:translateY(0);outline:2px solid var(--gold);outline-offset:2px; } /* ============================================================ [1] FOUNDATION primitives + BUTTON system [centerpiece] Small, token-driven building blocks used across the site. ============================================================ */ /* Section rhythm helper — generous, fluid vertical air (Melyon-tier). */ .nox-section{ padding-block:var(--section-y); } .nox-section--tight{ padding-block:var(--section-y-tight); } /* Eyebrow label — uppercase, wide-tracked, quiet. */ .nox-eyebrow, .section-head .label{ display:inline-block;font-family:var(--font-sans); font-size:var(--fs-eyebrow);font-weight:600; text-transform:uppercase;letter-spacing:var(--ls-eyebrow); color:var(--ink-light);margin:0; } /* Thin drawn accent rule (kept, but now token-spaced). */ .underline, .section-head .underline{ width:48px;height:1px;background:var(--gold); /* one divider width sitewide (footer rule is its own component) */ margin:var(--space-md) 0 var(--space-lg);border:0; } /* ---- Button system: squared, editorial, ink-fill or ghost ---- */ .btn, .nox-btn{ display:inline-flex;align-items:center;gap:var(--space-2xs); font-family:var(--font-sans);font-size:var(--fs-body-sm);font-weight:500; text-transform:uppercase;letter-spacing:var(--ls-wide);line-height:1; padding:16px 32px;border:1px solid var(--ink);border-radius:var(--radius-none); background:transparent;color:var(--ink);text-decoration:none;cursor:pointer; transition:background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .btn:hover, .nox-btn:hover{ background:var(--ink);color:var(--bg); } .btn-primary{ background:var(--ink);color:var(--bg);border-color:var(--ink); } .btn-primary:hover{ background:transparent;color:var(--ink); } .btn-ghost{ background:transparent;color:var(--ink); } /* Text link with a drawn arrow that opens its gap on hover. */ .btn-arrow{ display:inline-flex;align-items:center;gap:var(--space-xs); font-family:var(--font-sans);font-size:var(--fs-body-sm);font-weight:500; text-transform:uppercase;letter-spacing:var(--ls-wide);color:var(--ink); text-decoration:none;padding:0;border:0;background:none;cursor:pointer; transition:gap var(--dur) var(--ease),color var(--dur) var(--ease); } .btn-arrow:hover{ gap:var(--space-md);color:var(--gold); } /* ============================================================ [2] BLOCKSY PARENT OVERRIDES Styles Blocksy's own header output + theme vars so the site reads as NOX. Verify selectors against your configured header. ============================================================ */ /* ---------- [2.1] Header polish ---------- */ /* Header background + hairline base. position:relative anchors the Catalogue mega-menu panel (nox.js appends it into the header). */ .ct-header{ background:var(--paper);position:relative; } [data-row="middle"]{ border-bottom:1px solid var(--line); } /* Wordmark — Italiana, the brand's display face */ .ct-header .site-title, .site-logo-container .ct-logo-container, .nox-wordmark{ font-family:var(--font-wordmark); font-weight:400; letter-spacing:var(--ls-wordmark); color:var(--ink); } /* thicken Italiana's hairlines so the header wordmark doesn't ghost */ .ct-header .site-title, .ct-header .site-title a{ -webkit-text-stroke:0.9px var(--ink); } /* header wordmark sizing — a touch shorter, with more tracking */ .ct-header .site-title, .ct-header .site-title a{ font-size:21px; letter-spacing:.46em; } /* Nav links — confident, uppercase, with a centre-grow bronze underline. Text eases 72% -> 100% ink; the 1px bronze rule scales from the centre. One easing everywhere: var(--ease-lux) = var(--ease-lux). */ .ct-header .menu-item > a, header [data-id="menu"] .menu-item a, .ct-header .ct-menu-link{ position:relative;display:inline-flex;align-items:center; font-family:var(--font-sans); font-size:15px;font-weight:600; text-transform:uppercase;letter-spacing:.1em; color:#2a2a2a; padding:6px 0 12px;line-height:1.2; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility; transition:color var(--dur-fast) var(--ease-lux); } /* Underline — a separate ::after (not text-decoration): 75% of the text width, 1.5px, rounded ends, ~8px below, NOX bronze. Grows from the centre and retracts to the centre. 270ms, var(--ease-lux). */ .ct-header .menu-item > a::after, header [data-id="menu"] .menu-item a::after, .ct-header .ct-menu-link::after{ content:"";position:absolute;left:12.5%;right:12.5%;bottom:0;height:2px;border-radius:0; background:var(--gold);transform:scaleX(0);transform-origin:center; transition:transform var(--dur-fast) var(--ease-lux); } /* Hover / focus — one calm interaction: a hairline underline reveals from the centre in the CURRENT text colour (ink on light pages, cream over the hero). No text colour change, no gold. The active page + open mega keep the bronze accent (their rules below). ~200ms ease-out. */ .ct-header .menu-item > a:hover::after, .ct-header .ct-menu-link:hover::after, .ct-header .menu-item > a:focus-visible::after{ transform:scaleX(1);background:currentColor; } /* Open mega — keep the Catalogue item's bronze text + underline while open. */ .ct-header .nox-mega-open > a{ color:var(--gold); } .ct-header .nox-mega-open > a::after{ transform:scaleX(1); } /* Active page — permanent bronze text + underline; no dup on hover. */ .ct-header .menu-item.current-menu-item > a, .ct-header .menu-item.current_page_item > a, .ct-header .menu-item.current-menu-ancestor > a, .ct-header .menu-item.current-menu-parent > a{ color:var(--gold); } .ct-header .menu-item.current-menu-item > a::after, .ct-header .menu-item.current_page_item > a::after, .ct-header .menu-item.current-menu-ancestor > a::after, .ct-header .menu-item.current-menu-parent > a::after{ transform:scaleX(1); } /* Spacing between items — tightened ~16% so the four links read as one editorial group (was 40–48px). */ .ct-header li.menu-item + li.menu-item{ margin-left:clamp(33px,2.7vw,40px) !important; } /* Vertical alignment — keep nav, logo and icons on ONE centred baseline. (The nav was top-aligning; force every header column to centre.) A slightly taller bar (~100px) gives the wordmark and nav more architectural air. */ .ct-header [data-row="middle"]{ align-items:center !important;min-height:88px !important; } .ct-header [data-row="middle"] > *{ align-self:center !important; } .ct-header [data-row="middle"] .menu, .ct-header [data-row="middle"] .ct-menu-items, .ct-header [data-row="middle"] ul.menu, .ct-header [data-row="middle"] .menu-item{ align-items:center !important; } /* Header icons — identical visual weight (full opacity, matched stroke). On hover they transition to bronze (colour only — no fade, scale, bounce or rotation). 250ms, same easing as the nav. */ .ct-header [data-id="search"] svg, .ct-header [data-id="cart"] svg, .ct-header .ct-header-account svg, .ct-header .nox-fav-trigger svg{ stroke:currentColor;stroke-width:1.5;fill:none; width:18px;height:18px;vertical-align:middle; color:var(--ink);opacity:1; transition:color var(--dur-fast) var(--ease-lux),stroke var(--dur-fast) var(--ease-lux); } .ct-header [data-id]:hover svg, .ct-header [data-id]:focus-within svg, .ct-header .nox-fav-trigger:hover svg{ color:var(--gold);stroke:var(--gold); } /* ============================================================ ONE shared notification badge for every header icon (Saved Research + Shopping Bag, desktop + mobile). Ink disc, cream numeral, perfect 14px circle. NO gold, border, gradient or shadow. Empty badges are never rendered (JS removes them). ============================================================ */ .ct-header .ct-cart-count, .ct-header .ct-dynamic-count-cart, .ct-header [data-count]::after, .nox-fav-count, .nox-m-fav-count, .nox-m-cart-count{ min-width:14px !important;height:14px !important;padding:0 3px !important; display:flex !important;align-items:center !important;justify-content:center !important;box-sizing:border-box !important; background:var(--ink) !important;color:var(--bg) !important;border:0 !important;box-shadow:none !important; border-radius:100px !important; font-family:var(--font-sans) !important;font-size:9px !important;font-weight:600 !important;line-height:1 !important; font-variant-numeric:tabular-nums;letter-spacing:0 !important; } /* never show an empty badge (first paint, before JS) */ .nox-fav-count:empty, .nox-m-fav-count:empty, .ct-header .ct-dynamic-count-cart:empty, .ct-header .nox-m-cart-count:empty{ display:none !important; } /* enter / leave — fade + scale 0.9 ↔ 1.0, ~180ms ease-out, no bounce */ @keyframes noxBadgeIn{ from{ opacity:0;transform:scale(.9); } to{ opacity:1;transform:scale(1); } } @keyframes noxBadgeOut{ from{ opacity:1;transform:scale(1); } to{ opacity:0;transform:scale(.9); } } @keyframes noxBadgeBump{ from{ transform:scale(.85); } to{ transform:scale(1); } } .nox-fav-count.is-in,.nox-m-fav-count.is-in,.nox-m-cart-count.is-in{ animation:noxBadgeIn 180ms ease-out both; } .nox-fav-count.is-out,.nox-m-fav-count.is-out,.nox-m-cart-count.is-out{ animation:noxBadgeOut 180ms ease-out both; } .nox-fav-count.is-bump,.nox-m-fav-count.is-bump,.nox-m-cart-count.is-bump{ animation:noxBadgeBump 160ms ease-out; } @media(prefers-reduced-motion:reduce){ .nox-fav-count.is-in,.nox-fav-count.is-out,.nox-fav-count.is-bump, .nox-m-fav-count.is-in,.nox-m-fav-count.is-out,.nox-m-fav-count.is-bump, .nox-m-cart-count.is-in,.nox-m-cart-count.is-out,.nox-m-cart-count.is-bump{ animation:none; } } /* ---------- [2.1b] Header actions — one balanced icon group ---------- nox.js re-parents search / wishlist / cart / account into a single .nox-header-actions flex row. Even optical spacing via ONE gap (no per-icon margins); each icon is a 40x40 centred hit area; the cart badge is absolutely positioned so it never shifts the spacing. */ .ct-header .nox-header-actions{ display:flex !important;align-items:center !important;justify-content:flex-end !important; align-self:center !important;gap:32px !important;line-height:0; } /* every icon = identical 40x40 centred clickable area, zero margins */ .ct-header .nox-header-actions > *{ display:inline-flex !important;align-items:center !important;justify-content:center !important; width:40px !important;height:40px !important;position:relative !important; margin:0 !important;padding:0 !important; background:transparent !important;border:0 !important;cursor:pointer; } .ct-header .nox-header-actions > * > a, .ct-header .nox-header-actions [data-id] > a, .ct-header .nox-header-actions .ct-header-search > a{ display:inline-flex !important;align-items:center !important;justify-content:center !important; width:100% !important;height:100% !important;margin:0 !important;padding:0 !important; } /* cart count badge — fixed to the icon's top-right, out of the flow so it can't affect icon spacing (offset parent = the 40x40 cart item) */ .ct-header .nox-header-actions [data-id="cart"]{ position:relative !important; } .ct-header .nox-header-actions [data-id="cart"] .ct-cart-count, .ct-header .nox-header-actions [data-id="cart"] .ct-dynamic-count-cart, .ct-header .nox-header-actions [data-id="cart"] [data-count]::after{ position:absolute !important;top:8px !important;right:8px !important; margin:0 !important;pointer-events:none; } /* hover — 200ms, colour to bronze + a very subtle fade, no scaling */ .ct-header .nox-header-actions svg, .ct-header .nox-header-actions .nox-icon{ transition:color var(--dur-fast) var(--ease-lux),stroke var(--dur-fast) var(--ease-lux) !important; } .ct-header .nox-header-actions > *{ transition:opacity var(--dur-fast) var(--ease-lux); } .ct-header .nox-header-actions > *:hover{ opacity:.82; } .ct-header .nox-header-actions > *:hover svg, .ct-header .nox-header-actions > *:hover .nox-icon{ color:var(--gold) !important;stroke:var(--gold) !important; } /* slightly tighten the gap on smaller desktop widths (tablet keeps 28px) */ @media(min-width:1001px) and (max-width:1160px){ .ct-header .nox-header-actions{ gap:27px !important; } } /* thin-line header icons injected by nox.js — kill the theme's blue fill; hide the cart price + labels and the account avatar; keep the count badges. */ .ct-header .ct-cart-item .ct-amount, .ct-header .ct-cart-item > .ct-label, .ct-header .ct-account-item > .ct-label{ display:none !important; } .ct-header .ct-account-item > .ct-media-container{ display:none !important; } .ct-header .nox-icon{ width:18px;height:18px;stroke:currentColor;color:var(--ink);stroke-width:1.5;opacity:1;transition:color var(--dur-fast) var(--ease-lux); } .ct-header [data-id]:hover .nox-icon, .ct-header [data-id]:focus-within .nox-icon{ color:var(--gold); } .ct-header .nox-icon{ fill:none !important; stroke:currentColor !important; } /* ---------- [2.1c] Account drawer — the third NOX side drawer ---------- A full-height right-hand drawer that matches the Shopping Bag and Saved Research drawers exactly: same width, same slide, same overlay, same close behaviour (the shell rules below are identical to .nox-fav-drawer). Rendered by inc/account-menu.php, opened by nox.js. Cream ground, ink type, hairlines only — no gold, gradient or shadow. */ .nox-acc-backdrop{ position:fixed;inset:0;background:rgba(26,26,26,.4); opacity:0;visibility:hidden;z-index:120; transition:opacity var(--dur) ease,visibility 0s linear var(--dur); } .nox-acc-backdrop.is-open{ opacity:1;visibility:visible;transition:opacity var(--dur) ease; } .nox-acc-drawer{ position:fixed;top:0;right:0;bottom:0;width:min(480px,100vw); background:var(--bg);border-left:1px solid var(--line); transform:translateX(100%);transition:transform .45s var(--ease-soft); z-index:130;display:flex;flex-direction:column; } .nox-acc-drawer.is-open{ transform:translateX(0); } .nox-acc-close{ position:absolute;top:20px;right:22px;z-index:2; background:none;border:0;font-size:26px;line-height:1;color:var(--ink-light);cursor:pointer; width:34px;height:34px;display:flex;align-items:center;justify-content:center; transition:color var(--dur-fast) var(--ease-lux); } .nox-acc-close:hover{ color:var(--ink); } .nox-acc-body{ flex:1;overflow-y:auto;overflow-x:hidden; } body.nox-acc-lock{ overflow:hidden; } /* header — eyebrow · avatar + identity · researcher-since */ .nox-acc-head{ padding:56px 34px 30px; } .nox-acc-eyebrow{ display:block;font-family:var(--font-sans);font-size:10px;font-weight:600; text-transform:uppercase;letter-spacing:var(--ls-eyebrow);color:var(--ink-light);margin-bottom:22px; } .nox-acc-identity{ display:flex;align-items:center;gap:16px; } .nox-acc-avatar{ flex:0 0 auto;width:52px;height:52px;border-radius:50%; display:flex;align-items:center;justify-content:center; background:var(--ink);color:var(--bg); font-family:var(--font-serif);font-weight:400;font-size:19px;letter-spacing:.02em; } .nox-acc-idtext{ display:flex;flex-direction:column;min-width:0; } .nox-acc-name{ font-family:var(--font-serif);font-weight:400;font-size:22px;line-height:1.15; letter-spacing:var(--ls-heading);color:var(--ink); } .nox-acc-email{ font-family:var(--font-sans);font-size:12.5px;line-height:1.5;color:var(--ink-light); margin-top:3px;word-break:break-word; } .nox-acc-since{ display:block;margin-top:18px; font-family:var(--font-sans);font-size:11px;font-weight:500;text-transform:uppercase; letter-spacing:var(--ls-eyebrow);color:var(--ink-light); } .nox-acc-since em{ font-style:normal;color:var(--ink-mid); } /* sections + hairline dividers */ .nox-acc-section{ padding:0 34px; } .nox-acc-rule{ display:block;height:1px;background:var(--line-soft);margin:30px 34px; } .nox-acc-section-label{ display:block;font-family:var(--font-sans);font-size:10px;font-weight:600; text-transform:uppercase;letter-spacing:var(--ls-eyebrow);color:var(--ink-light);margin-bottom:14px; } /* navigation rows — hover animates the arrow only (no colour change) */ .nox-acc-nav{ display:flex;flex-direction:column;border-top:1px solid var(--line-soft); } .nox-acc-link{ position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px; width:100%;box-sizing:border-box;text-align:left;background:transparent; border:0;border-bottom:1px solid var(--line-soft);cursor:pointer; font-family:var(--font-serif);font-weight:400;font-size:17px;line-height:1.2;letter-spacing:-.01em; color:var(--ink);text-decoration:none;text-transform:none;padding:16px 0; } .nox-acc-link-arrow{ flex:0 0 auto;color:var(--ink-mid);font-size:15px;line-height:1; opacity:0;transform:translateX(-8px); transition:opacity var(--dur-fast) var(--ease-lux),transform var(--dur-fast) var(--ease-lux); } .nox-acc-link:hover .nox-acc-link-arrow, .nox-acc-link:focus-visible .nox-acc-link-arrow{ opacity:1;transform:none; } .nox-acc-link:focus-visible{ outline:none; } .nox-acc-logout{ color:var(--ink-mid); } /* quick stats — 2×2 editorial grid, hairline-ruled */ .nox-acc-stats{ display:grid;grid-template-columns:1fr 1fr; border-top:1px solid var(--line-soft);border-left:1px solid var(--line-soft); } .nox-acc-stat{ display:flex;flex-direction:column;gap:7px;padding:20px; border-right:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft); } .nox-acc-stat-value{ font-family:var(--font-serif);font-weight:300;font-size:26px;line-height:1;letter-spacing:-.02em;color:var(--ink); } .nox-acc-stat-label{ font-family:var(--font-sans);font-size:10.5px;font-weight:500;text-transform:uppercase; letter-spacing:var(--ls-eyebrow);color:var(--ink-light); } /* continue research — recently-viewed compound cards */ .nox-acc-rv{ display:flex;flex-direction:column; } .nox-acc-rv-card{ display:flex;align-items:center;gap:16px;padding:12px 0;text-decoration:none; border-bottom:1px solid var(--line-soft); } .nox-acc-rv-card:first-child{ border-top:1px solid var(--line-soft); } .nox-acc-rv-media{ flex:0 0 auto;width:60px;aspect-ratio:var(--ratio-product);overflow:hidden;background:var(--bg-warm);display:block; } .nox-acc-rv-media img{ width:100%;height:100%;object-fit:cover;object-position:center;display:block; } .nox-acc-rv-body{ display:flex;flex-direction:column;gap:4px;min-width:0; } .nox-acc-rv-cat{ font-family:var(--font-sans);font-size:10px;font-weight:500;text-transform:uppercase; letter-spacing:var(--ls-eyebrow);color:var(--ink-light); } .nox-acc-rv-name{ font-family:var(--font-serif);font-weight:400;font-size:16px;line-height:1.2;color:var(--ink);letter-spacing:var(--ls-heading); } .nox-acc-rv-go{ font-family:var(--font-sans);font-size:11px;font-weight:500;color:var(--ink-mid);margin-top:2px; transition:color var(--dur-fast) var(--ease-lux); } .nox-acc-rv-card:hover .nox-acc-rv-go{ color:var(--ink); } /* quick links — same arrow-only hover as the nav rows */ .nox-acc-links{ display:flex;flex-direction:column;border-top:1px solid var(--line-soft); } .nox-acc-qlink{ font-size:16px; } /* footer breathing room */ .nox-acc-body .nox-acc-section:last-child{ padding-bottom:44px; } @media(prefers-reduced-motion:reduce){ .nox-acc-drawer{ transition:none; } .nox-acc-link-arrow{ transition:none; } } @media(max-width:520px){ .nox-acc-drawer{ width:100vw; } .nox-acc-head{ padding:52px 22px 26px; } .nox-acc-section{ padding:0 22px; } .nox-acc-rule{ margin:26px 22px; } } /* Suppress Blocksy's native account dropdown — the NOX panel (#noxAccountPanel) replaces it. Scoped to logged-in only, so logged-out visitors keep Blocksy's default account / login dropdown untouched. Blocksy opens this on hover; we never want it visible alongside the editorial panel. */ body.logged-in .ct-header .ct-header-account-dropdown{ display:none !important; } /* ---------- [2.2] Header tagline + logo visibility ---------- */ /* tagline under the NOX wordmark (Blocksy's logo has no tagline toggle) */ .ct-header .site-logo-container, .ct-header [data-id="logo"]{ display:flex;flex-direction:column;align-items:center;justify-content:center; text-align:center;line-height:1; } /* wordmark centred — offset the trailing letter-spacing so NOX reads optically middle */ .ct-header .site-title, .ct-header .site-title a{ padding-left:var(--ls-wordmark); } /* Cart icon: show nothing but the bag when the cart is empty. Blocksy keeps a data-count on the count disc, so this hides the "0" with no JS dependency. */ .ct-dynamic-count-cart[data-count="0"], .ct-dynamic-count-cart:empty{ display:none !important; } /* tagline under the wordmark */ .ct-header .site-logo-container::after, .ct-header [data-id="logo"]::after{ content:"Research peptides"; display:block;margin-top:4px; font-family:var(--font-sans);font-size:10px;font-weight:500; text-transform:uppercase;letter-spacing:var(--ls-eyebrow);color:var(--ink-light); white-space:nowrap; } /* Position the NOX wordmark + tagline across the header — centred, then nudged a little to the left. Search / bag / burger icons stay in the right zone. */ header.ct-header [data-row="middle"] > .ct-container{ position:relative; } header.ct-header [data-row="middle"] .site-logo-container, header.ct-header [data-row="middle"] [data-id="logo"]{ position:absolute;left:50%;top:50%;transform:translate(calc(-50% - 44px),-50%);margin:0; } /* Contact page — keep the four contact cards as a 2×2 grid on mobile. The page markup carries an inline rule forcing 1 column ≤600px; this more specific selector (body .nox-contact-grid) overrides it. */ @media(max-width:600px){ body .nox-contact-grid{ grid-template-columns:1fr 1fr !important;gap:12px !important; } body .nox-contact-grid > a{ padding:18px 15px !important; } body .nox-contact-grid h3{ font-size:clamp(15px,4.3vw,20px) !important;margin:9px 0 6px !important;overflow-wrap:break-word;word-break:break-word; } /* email address is long — shrink so it holds on one line in the half-width card */ body .nox-contact-grid > a:nth-child(2) h3{ font-size:clamp(12px,3.3vw,16px) !important;overflow-wrap:normal;word-break:normal;letter-spacing:var(--ls-heading); } body .nox-contact-grid p{ font-size:12px !important;line-height:1.5 !important; } body .nox-contact-grid > a > span{ font-size:9px !important;letter-spacing:.16em !important; } } /* Homepage: the header FLOATS transparently over the hero (no solid bar) — the hero shows through and the nav sits on top in cream. A soft dark gradient on the hero (see .hero-photo-bg::after) keeps it legible. On scroll it pins into the solid bar (body.nox-nav-stuck). Kept measurable (visible, not display:none) so Blocksy's menu never collapses to "More". */ body.home:not(.nox-nav-stuck) header.ct-header{ position:absolute !important;top:0;left:0;right:0;z-index:100; background:transparent !important;border:0 !important;box-shadow:none !important; } body.home:not(.nox-nav-stuck) header.ct-header [data-row="middle"], body.home:not(.nox-nav-stuck) header.ct-header [data-row="middle"] > .ct-container{ background:transparent !important;border-bottom:0 !important; } /* At rest the small header logo is hidden anyway; when PINNED on the homepage reveal the NOX wordmark (the hero one has scrolled away). Tagline stays hidden on the homepage for a clean pinned bar. */ .home:not(.nox-nav-stuck) .ct-header .site-logo-container, .home:not(.nox-nav-stuck) .ct-header [data-id="logo"]{ display:none !important; } .home .ct-header .site-logo-container::after, .home .ct-header [data-id="logo"]::after{ display:none; } /* ---------- [2.3] Site background — force the warm cream everywhere ---------- */ html, body{ background-color:var(--bg) !important; } /* content area below the hero — NOT on the front page (hero stays dark) */ body:not(.home) #main, body:not(.home) .site-main{ background-color:var(--bg) !important; } /* keep cards/paper surfaces white */ .pdp-stage, .bg-card, .ct-card{ background-color:var(--bg-card) !important; } /* ---------- [2.4] Home-over-hero header colouring ---------- */ /* cream links + icons while the header floats over the dark hero */ body.home:not(.nox-nav-stuck) .ct-header .ct-menu-link, body.home:not(.nox-nav-stuck) .ct-header .menu-item > a, body.home:not(.nox-nav-stuck) .ct-header .nox-fav-trigger{ color:var(--bg) !important; } body.home:not(.nox-nav-stuck) .ct-header .nox-icon, body.home:not(.nox-nav-stuck) .ct-header .nox-fav-trigger svg{ color:var(--bg) !important; stroke:var(--bg) !important; } /* ---------- [2.5] Woo Blocks + classic theme button vars ---------- */ /* classic theme buttons (Return to shop, Proceed to checkout, View cart…) */ body{ --theme-button-background-initial-color:#1a1a1a !important; } /* ============================================================ [3] COMPLIANCE — age gate, top-strip marquee Markup injected via inc/header-footer.php; dismiss/accept in nox.js. ============================================================ */ /* ---------- [3.1] Age gate (modal on entry) ---------- */ html:not(.nox-age-ok) body{ overflow:hidden; } .nox-agegate{ position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center; padding:24px;opacity:1;transition:opacity var(--dur) ease; } .nox-age-ok .nox-agegate{ opacity:0;visibility:hidden;transition:opacity var(--dur) ease,visibility 0s linear var(--dur); } /* backdrop — the page (homepage hero) shows through, strongly blurred and darkened, so the card reads as floating above it. Fades in independently. */ .nox-agegate-backdrop{ position:absolute;inset:0;background:rgba(18,14,9,.74); -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px); animation:noxAgeFadeIn .25s ease both; } .nox-agegate-card{ position:relative;max-width:480px;width:100%; background:var(--bg);border:1px solid var(--line); box-shadow:0 40px 100px rgba(0,0,0,.34);padding:56px 48px 48px;text-align:center; animation:noxAgeCardIn .3s var(--ease-lux) both; /* fade + rise, settles */ } /* brand introduction — wordmark + tagline lead, before the gate itself */ .nox-agegate-wordmark{ display:block;font-family:var(--font-wordmark);font-weight:400;font-size:40px; letter-spacing:var(--ls-wordmark);color:var(--ink);line-height:1;margin-bottom:14px; } .nox-agegate-tagline{ display:block;font-family:var(--font-sans);font-size:10px;font-weight:500; text-transform:uppercase;letter-spacing:var(--ls-eyebrow-wide);color:var(--ink-light); } .nox-agegate-rule{ display:block;width:40px;height:1px;background:var(--gold);margin:30px auto 32px; } .nox-agegate-title{ font-family:var(--font-serif);font-weight:300;font-size:34px;color:var(--ink); margin:0 0 18px;letter-spacing:var(--ls-heading);line-height:1.1; } .nox-agegate-text{ font-family:var(--font-sans);font-size:14.5px;line-height:1.75;color:var(--ink-mid); margin:0 auto 40px;max-width:34em; } .nox-agegate-text strong{ color:var(--ink);font-weight:500; } .nox-agegate-btn{ display:inline-flex;align-items:center;justify-content:center;width:100%; background:var(--ink);color:var(--bg);border:1px solid var(--ink);border-radius:0; font-family:var(--font-sans);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:var(--ls-wide); padding:18px 28px;cursor:pointer;transition:background var(--dur-fast),color var(--dur-fast); } .nox-agegate-btn:hover{ background:transparent;color:var(--ink); } .nox-agegate-leave{ display:inline-block;margin-top:22px;font-family:var(--font-sans);font-size:11px; text-transform:uppercase;letter-spacing:var(--ls-eyebrow);color:var(--ink-light);text-decoration:none; transition:color var(--dur-fast) ease; } .nox-agegate-leave:hover{ color:var(--ink-mid); } @keyframes noxAgeCardIn{ from{ opacity:0;transform:translateY(14px); } to{ opacity:1;transform:none; } } @keyframes noxAgeFadeIn{ from{ opacity:0; } to{ opacity:1; } } @media(prefers-reduced-motion:reduce){ .nox-agegate-card{ animation:noxAgeFadeIn .25s ease both; } } @media(max-width:520px){ .nox-agegate-card{ padding:44px 28px 36px; } .nox-agegate-wordmark{ font-size:34px; } .nox-agegate-title{ font-size:28px; } .nox-agegate-text{ margin-bottom:32px; } } /* ---------- [3.3] Top strip marquee ---------- */ .top-strip{ display:none; /* hidden by default — revealed on scroll with the sticky nav */ background:var(--ink); color:#e6e1d7; padding:11px 0; overflow:hidden; font-family:var(--font-sans); font-size:11px;font-weight:400; text-transform:uppercase;letter-spacing:var(--ls-eyebrow); } .top-strip-track{ display:flex;width:max-content; animation:nox-scroll 69s linear infinite; will-change:transform; } .top-strip-group{ display:flex;flex-shrink:0; } .top-strip-track .ts-item{ display:inline-flex;align-items:center;gap:14px; white-space:nowrap;margin-right:80px; } .top-strip-track .sep{ width:4px;height:4px;background:var(--gold);border-radius:50%;display:inline-block;flex-shrink:0; } @keyframes nox-scroll{ from{transform:translateX(0)} to{transform:translateX(-50%)} } @media(max-width:720px){ .top-strip-track{ animation-duration:38s; } } @media(prefers-reduced-motion:reduce){ .top-strip-track{ animation:none; } } /* ============================================================ [4] HEADER ENRICHMENT + STICKY PINNED NAV Sticky nav toggled by body.nox-nav-stuck (nox.js). position:fixed because an ancestor uses overflow:clip, which breaks position:sticky. ============================================================ */ @keyframes noxNavDown{ from{ transform:translateY(-100%); } to{ transform:translateY(0); } } /* Gentle premium reveal for the pinned bar: a soft fade + small rise, not a full slide — reads as the header "fading in" rather than dropping. */ @keyframes noxNavFade{ from{ opacity:0;transform:translateY(-8px); } to{ opacity:1;transform:translateY(0); } } /* Preload lock — no header/marquee transition or animation during the first paints. Removed by nox.js after two frames. This is what guarantees the sticky header can never flash/slide on initial load. */ html.nox-preload .ct-header, html.nox-preload .ct-header *, html.nox-preload .top-strip, html.nox-preload .top-strip *{ transition:none !important;animation:none !important; } /* STATE (no animation): the pinned, fixed header once stuck. SOLID opaque cream so page content can never bleed through it (a translucent version let the content show through and looked broken). Refined shadow only. */ body.nox-nav-stuck header.ct-header{ position:fixed !important;top:40px;left:0;right:0;z-index:9000;height:auto !important; background:var(--bg) !important; border-bottom:1px solid var(--line); box-shadow:0 4px 30px rgba(20,16,10,.06); transition:box-shadow var(--dur-fast) var(--ease-lux); } /* Marquee rides in with the nav: pinned above the stuck bar once scrolled. */ body.nox-nav-stuck .top-strip{ display:block; position:fixed;top:0;left:0;right:0;z-index:9001; } /* Non-home pages are pinned from the top, so the (out-of-flow) marquee + header would overlap the content — push everything below them. On the homepage the nav floats over the hero on scroll, so no offset there. --nox-fixed-h is measured precisely by nox.js; the fallback avoids any first-paint jump. */ body.nox-nav-stuck:not(.home){ padding-top:var(--nox-fixed-h,118px); } /* ENTRANCE ANIMATION (scroll-driven only): added by nox.js as .nox-nav-animate after the first real scroll, so it never plays on the initial paint. */ body.nox-nav-animate.nox-nav-stuck header.ct-header, body.nox-nav-animate.nox-nav-stuck .top-strip{ animation:noxNavFade .3s var(--ease-lux); } body.admin-bar.nox-nav-stuck .top-strip{ top:32px; } /* keep the middle row the same solid cream so the pinned bar is fully opaque */ body.nox-nav-stuck header.ct-header [data-row="middle"], body.nox-nav-stuck header.ct-header [data-row="middle"] > .ct-container{ background:var(--bg) !important; } body.admin-bar.nox-nav-stuck header.ct-header{ top:72px; } /* reveal the centred NOX wordmark + tagline in the stuck bar */ body.home.nox-nav-stuck .ct-header .site-logo-container, body.home.nox-nav-stuck .ct-header [data-id="logo"]{ display:flex !important; } body.home.nox-nav-stuck .ct-header .site-logo-container::after, body.home.nox-nav-stuck .ct-header [data-id="logo"]::after{ display:block !important; } /* ink links + icons on the cream stuck bar (white over the hero) */ body.home.nox-nav-stuck .ct-header .ct-menu-link, body.home.nox-nav-stuck .ct-header .menu-item > a{ color:var(--ink-mid) !important; } body.home.nox-nav-stuck .ct-header .ct-menu-link:hover, body.home.nox-nav-stuck .ct-header .menu-item > a:hover{ color:#1a1a1a !important; } body.home.nox-nav-stuck .ct-header [data-id] svg, body.home.nox-nav-stuck .ct-header .ct-icon-container svg{ color:#1a1a1a !important;stroke:#1a1a1a !important; } /* Mobile header icons (heart / cart / burger) — cream while over the hero. */ body.home:not(.nox-nav-stuck) .nox-m-fav, body.home:not(.nox-nav-stuck) .nox-m-cart, body.home:not(.nox-nav-stuck) .nox-m-search, body.home:not(.nox-nav-stuck) .nox-m-account, body.home:not(.nox-nav-stuck) .ct-header-trigger{ color:var(--bg) !important; } body.home:not(.nox-nav-stuck) .nox-m-fav svg, body.home:not(.nox-nav-stuck) .nox-m-cart svg, body.home:not(.nox-nav-stuck) .nox-m-search svg, body.home:not(.nox-nav-stuck) .nox-m-account svg{ stroke:var(--bg) !important; } body.home:not(.nox-nav-stuck) .ct-header-trigger .ct-icon{ color:var(--bg) !important;fill:var(--bg) !important; } /* Mobile burger — solid ink everywhere (overrides Blocksy's blue default). The home-hero cream state above keeps its higher specificity and still wins. */ .ct-header-trigger, .ct-header-trigger .ct-icon, .ct-header-trigger .ct-icon path{ color:var(--ink) !important;fill:var(--ink) !important; } /* ============================================================ [5] FOOTER (custom — rendered via inc/header-footer.php) ============================================================ */ .nox-footer{ border-top:1px solid var(--line); background:var(--bg-warm); padding:120px 0 40px; margin-top:0; position:relative;z-index:2; } /* Homepage: the footer sits directly under the dark final-CTA image, so tighten its top padding to close the cream gap (other pages keep the full 120px). */ .home .nox-footer{ padding-top:56px; } .footer-signoff{ text-align:center;margin-bottom:88px;padding:0 32px; } .footer-wordmark{ font-family:'Italiana','Bodoni 72','Didot',Georgia,serif; font-weight:400; font-size:clamp(80px,12vw,160px); letter-spacing:.12em;padding-left:.12em; color:var(--ink);line-height:.9;margin-bottom:28px; -webkit-text-stroke:1.1px var(--ink); display:inline-block; transform:scale(1.04,0.9);transform-origin:left center; text-decoration:none;cursor:pointer; } .footer-tagline{ font-family:var(--font-sans); font-size:11px;font-weight:400; text-transform:uppercase;letter-spacing:.42em;padding-left:.42em; color:var(--ink-mid); } .footer-divider{ width:80px;height:1px;background:var(--line);margin:0 auto 88px; } /* Newsletter */ .footer-news{ max-width:520px;margin:0 auto 88px;text-align:center;padding:0 32px; } .footer-news-label{ font-family:var(--font-sans); font-size:10.5px;font-weight:500;text-transform:uppercase;letter-spacing:var(--ls-eyebrow-wide); color:var(--ink-mid);margin-bottom:20px;display:block; } .footer-news-blurb{ font-family:var(--font-serif); font-weight:300;font-style:italic;font-size:18px;line-height:1.55; color:var(--ink);margin-bottom:32px;letter-spacing:-.005em; } .news-form{ display:flex;border-bottom:1px solid var(--ink); border-top:none;border-left:none;border-right:none; max-width:420px;margin:0 auto;transition:border-color var(--dur-fast); } .news-form:focus-within{ border-bottom-color:var(--gold); } .news-form input{ flex:1;padding:14px 4px;background:transparent;border:none;color:var(--ink); font-family:var(--font-sans);font-size:14px; } .news-form input::placeholder{ color:var(--ink-light); } .news-form input:focus{ outline:none; } .news-form button{ padding:0 4px 0 12px;background:transparent;border:none;color:var(--ink); cursor:pointer;display:flex;align-items:center;transition:opacity var(--dur-fast); } .news-form button:hover{ opacity:.55; } .news-form-arrow{ width:24px;height:1px;background:var(--ink);position:relative; } .news-form-arrow::after{ content:'';position:absolute;right:0;top:-3px;width:7px;height:7px; border-right:1px solid var(--ink);border-top:1px solid var(--ink); transform:rotate(45deg); } /* Link columns */ .footer-links{ max-width:1000px;margin:0 auto;padding:0 32px; display:grid;grid-template-columns:repeat(3,1fr);gap:64px; padding-bottom:64px;border-bottom:1px solid var(--line); } .footer-col h4{ font-family:var(--font-sans); font-size:10.5px;font-weight:500;text-transform:uppercase;letter-spacing:var(--ls-eyebrow); color:var(--ink);margin-bottom:12px; } .footer-col-desc{ margin:0 0 28px;font-family:var(--font-sans); font-size:11px;line-height:1.5;color:var(--ink-light);letter-spacing:.01em; } .footer-col ul{ list-style:none;padding:0;margin:0; } .footer-col li{ margin-bottom:17px; } .footer-col a{ display:inline-flex;align-items:center; color:var(--ink-mid);text-decoration:none;font-size:14px; font-family:var(--font-sans);cursor:pointer; transition:color var(--dur-fast) var(--ease); } .footer-col a::after{ content:"\2192"; margin-left:7px;font-size:13px;line-height:1; opacity:0;transform:translateX(-4px); transition:opacity var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease); } .footer-col a:hover{ color:var(--gold); } .footer-col a:hover::after{ opacity:1;transform:translateX(0); } /* Fine-print row */ .footer-bottom{ max-width:1000px;margin:0 auto;padding:32px 32px 0; display:flex;justify-content:space-between;align-items:center; flex-wrap:wrap;gap:20px; font-family:var(--font-sans);font-size:10.5px;color:var(--ink-light); text-transform:uppercase;letter-spacing:var(--ls-eyebrow);font-weight:500; } .footer-bottom a{ color:var(--ink-mid);text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:color var(--dur-fast); } .footer-bottom a:hover{ color:var(--ink); } @media(max-width:900px){ .footer-links{ grid-template-columns:1fr 1fr;gap:48px; } } @media(max-width:600px){ .nox-footer{ padding:52px 0 28px; } .footer-signoff{ margin-bottom:36px;padding:0 24px; } .footer-wordmark{ font-size:clamp(54px,15vw,90px);margin-bottom:16px; } .footer-tagline{ letter-spacing:var(--ls-eyebrow);padding-left:.22em;font-size:10px; } .footer-divider{ margin-bottom:36px; } .footer-news{ margin-bottom:40px;padding:0 24px; } .footer-news-blurb{ font-size:16px;margin-bottom:24px; } .footer-links{ grid-template-columns:repeat(3,1fr);gap:22px 12px;padding:0 18px 36px; } .footer-col{ padding:0;border-bottom:none;min-width:0; } .footer-col h4{ margin-bottom:12px;letter-spacing:.14em; } .footer-col li{ margin-bottom:10px;line-height:1.35; } .footer-col a{ font-size:12px; } .footer-col-desc{ display:none; } .footer-col a::after{ display:none; } .footer-bottom{ flex-direction:column;align-items:center;text-align:center;gap:14px;padding:26px 24px 0;letter-spacing:var(--ls-eyebrow);line-height:1.7; } } /* ============================================================ [6] HOMEPAGE (rendered via front-page.php) ============================================================ */ /* ---------- [6.1] Shared: section head + container ---------- Also scoped to .quality-block so the "Our Process" section carries its exact homepage styling now that it renders on the Why NOX page (inc/process-section.php). */ .nox-home .container, .quality-block .container, .home-library .container{ max-width:1280px;margin:0 auto;padding:0 40px; } .nox-home .section-head{ margin-bottom:56px; } .nox-home .section-head .label{ font-family:var(--font-sans);font-size:10.5px;font-weight:500; text-transform:uppercase;letter-spacing:var(--ls-eyebrow);color:var(--ink-mid); margin-bottom:24px;display:block; } .nox-home .section-head h2, .quality-block .section-head h2, .home-library .section-head h2{ font-family:var(--font-serif);font-weight:300;font-size:clamp(40px,4.8vw,64px); line-height:1.06;letter-spacing:var(--ls-heading);color:var(--ink); } .nox-home .section-head h2 em, .quality-block .section-head h2 em, .home-library .section-head h2 em{ font-style:italic; } .nox-home .section-head .underline, .quality-block .section-head .underline, .home-library .section-head .underline{ width:48px;height:1px;background:var(--gold);margin:24px 0 22px; } .nox-home .section-head p, .quality-block .section-head p, .home-library .section-head p{ font-size:15.5px;color:var(--ink-mid);max-width:520px; } /* Consistent uppercase eyebrow above every section heading. */ .nox-home .section-head .section-eyebrow, .quality-block .section-head .section-eyebrow, .home-library .section-head .section-eyebrow{ display:block;text-align:center;font-family:var(--font-sans);font-size:11px;font-weight:600; text-transform:uppercase;letter-spacing:var(--ls-eyebrow-wide);color:var(--ink-light);margin-bottom:20px; } .quality-block .section-head .section-eyebrow{ color:var(--ink-light); } /* ---------- [6.2] Hero ---------- */ .hero-photo-bg{ position:relative;width:100%;height:100vh;min-height:620px; overflow:hidden;background-color:#2a241c; background-image:var(--hero-photo, url('https://wearenox.io/wp-content/uploads/2026/06/nox-hero.png')); background-size:cover;background-position:78% center;background-repeat:no-repeat; } .hero-photo-bg::before{ content:'';position:absolute;inset:0;pointer-events:none;z-index:1; background: linear-gradient(180deg,rgba(20,16,10,.35) 0%,rgba(20,16,10,.15) 45%,rgba(20,16,10,.5) 88%,rgba(20,16,10,.7) 100%), linear-gradient(90deg,rgba(20,16,10,.6) 0%,rgba(20,16,10,.4) 30%,rgba(20,16,10,.1) 55%,transparent 75%); } /* Subtle dark gradient behind the floating nav only — lifts legibility of the cream nav over the hero without a solid bar. Fades to nothing by ~160px. */ .hero-photo-bg::after{ content:'';position:absolute;top:0;left:0;right:0;height:160px;z-index:1;pointer-events:none; background:linear-gradient(180deg,rgba(12,9,6,.30),rgba(12,9,6,0)); } .hero-photo-content{ position:relative;z-index:2;height:100%;max-width:1440px;margin:0 auto;padding:0 56px; display:flex;flex-direction:column;justify-content:center;align-items:flex-start; } .hero-photo-wordmark{ font-family:var(--font-wordmark),'Bodoni 72','Didot',Georgia,serif; font-weight:400;font-size:clamp(100px,14vw,200px);letter-spacing:.44em;padding-left:.44em; color:var(--bg);line-height:.9;margin:0;text-shadow:0 2px 26px rgba(0,0,0,.18); -webkit-text-stroke:0.4px var(--bg); display:inline-block;transform:scale(1.02,0.94); } .hero-photo-subtitle{ margin-top:36px;font-family:var(--font-sans); font-size:clamp(11px,1vw,14px);font-weight:400;text-transform:uppercase; letter-spacing:var(--ls-eyebrow-wide);line-height:1.9;color:rgba(244,241,236,.92); } .hero-photo-rule{ width:64px;height:1px;background:rgba(244,241,236,.6);margin:48px 0 28px; } .hero-photo-cta{ display:inline-flex;align-items:center;gap:18px;background:transparent; border:none;color:var(--bg); font-family:var(--font-sans);font-size:11px;font-weight:500;text-transform:uppercase; letter-spacing:var(--ls-eyebrow-wide);padding:0;cursor:pointer;text-decoration:none; transition:gap var(--dur) var(--ease-lux); } /* Never fade on hover — text stays fully legible over the hero. The arrow simply extends and the gap opens. The high-specificity colour rule below overrides Blocksy's global a:hover (which would otherwise repaint the link a dark palette colour and make it vanish against the dark hero). */ .hero-photo-cta:hover{ gap:26px; } .hero-photo-bg a.hero-photo-cta, .hero-photo-bg a.hero-photo-cta:hover, .hero-photo-bg a.hero-photo-cta:focus, .hero-photo-bg a.hero-photo-cta:active{ color:var(--bg); } .hero-photo-cta-arrow{ width:24px;height:1px;background:currentColor;position:relative;transition:width var(--dur-fast) ease; } .hero-photo-cta-arrow::after{ content:'';position:absolute;right:0;top:-3px;width:7px;height:7px; border-right:1px solid currentColor;border-top:1px solid currentColor;transform:rotate(45deg); } .hero-photo-cta:hover .hero-photo-cta-arrow{ width:36px; } /* (Phase 6: the hero indicator strip was removed — one message, photography-led.) */ @media(max-width:760px){ .hero-photo-content{ padding:0 28px; } } /* ---------- [6.3] Featured products (legacy Woo-block styling) ---------- NOTE: the catalogue product cards are the .nox-card template (section 9). These rules style Woo's generic featured-products block markup; kept for safety in case a block that renders default .products markup is used. */ .nox-products{ padding:var(--section-y) 0 clamp(22px,2.4vw,36px);background:var(--bg); } /* small gap so the "View all products" CTA lifts off the editorial band below it */ /* "View all products" CTA — editorial, centred, directly beneath the four featured cards. 236px × 52px, cream, 1px bronze border, uppercase. */ .nox-products-cta{ text-align:center;margin:36px 0 0; } .nox-view-all{ display:inline-flex;align-items:center;justify-content:center;gap:12px; min-width:236px;height:52px;padding:0 28px;box-sizing:border-box; background:var(--bg);border:1px solid var(--gold);border-radius:0; font-family:var(--font-sans);font-size:12px;font-weight:500; text-transform:uppercase;letter-spacing:var(--ls-wide);color:var(--ink);text-decoration:none;line-height:1; transition:background var(--dur-fast) var(--ease-lux),border-color var(--dur-fast) var(--ease-lux); } .nox-view-all:hover{ background:var(--bg-warm);border-color:#7d6c48; } .nox-view-all-arrow{ transition:transform var(--dur-fast) var(--ease-lux); } .nox-view-all:hover .nox-view-all-arrow{ transform:translateX(5px); } .nox-products li.product a img{ margin:0;background:linear-gradient(160deg,#efeae2,#e6e0d5); } .nox-products li.product .woocommerce-loop-product__title{ font-family:var(--font-serif);letter-spacing:var(--ls-heading);font-weight:500;font-size:22px;color:var(--ink); padding:20px 28px 4px; } .nox-products li.product .price{ font-family:var(--font-serif);font-size:20px;color:var(--ink);display:block;padding:0 28px 8px; } .nox-products li.product .price .from, .nox-products li.product .price ins{ text-decoration:none; } .nox-products li.product .button{ display:block;margin:0;border-radius:0;background:var(--ink);color:var(--bg); font-family:var(--font-sans);font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.16em; padding:14px 28px;border:none;transition:opacity var(--dur-fast) ease; } .nox-products li.product .button:hover{ opacity:.85;background:var(--ink); } /* catalogue heading centred (homepage featured section) */ .nox-products .section-head{ text-align:center; } .nox-products .section-head .underline{ margin-left:auto;margin-right:auto; } .nox-products .section-head p{ margin-left:auto;margin-right:auto; } /* ---------- [6.4] By Research Field — editorial collections ---------- */ .research-apps-home{ padding:0;background:var(--paper); } /* flush: editorial bands butt straight onto this section, top and bottom */ /* Section intro — heading, bronze divider, centred editorial line. */ .research-intro{ text-align:center;max-width:650px;margin:0 auto 48px;padding:0 24px; } /* tighter approach — the photography arrives sooner */ .research-intro .display{ margin:0;font-family:var(--font-serif);font-weight:300;font-size:clamp(40px,4.8vw,64px);line-height:1.06;letter-spacing:var(--ls-heading); } .research-intro-divider{ width:48px;height:1px;background:var(--gold);margin:22px auto 24px; } .research-intro p{ font-family:var(--font-sans);font-size:16px;line-height:1.65;color:var(--ink-mid);margin:0; } /* 2 × 2 grid of collection cards. */ .research-collections{ display:grid;grid-template-columns:repeat(3,1fr);gap:0; /* full-bleed breakout of the 1280px .container — flush edge-to-edge with hairline seams, exactly like the product catalogue grid */ width:100vw;max-width:100vw; margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw); padding:0;box-sizing:border-box;align-items:stretch; border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft); overflow:hidden; } /* 3-up on desktop → 2-up on tablet (the small-screen block below handles phones). */ @media(max-width:1024px){ .research-collections{ grid-template-columns:repeat(2,1fr); } } .research-collection{ display:flex;flex-direction:column;overflow:hidden;text-decoration:none;color:var(--ink); background:var(--paper);border:0;border-radius:0; /* per-cell hairline seams — matches the catalogue cells */ box-shadow:1px 0 0 var(--line-soft), 0 1px 0 var(--line-soft); transition:opacity .5s var(--ease-lux),transform .5s var(--ease-lux); } /* flush cells don't lift — the slow image zoom carries the hover */ /* Media (top ~60%) — editorial image; slow 1.05× zoom on hover, clipped by the media so it never bleeds into the content below. */ .rc-media{ position:relative;overflow:hidden;display:block; height:clamp(360px,30vw,500px); /* image leads; sized for the 3-up grid */ background-size:cover;background-position:center;background-repeat:no-repeat; } .rc-media::before{ content:"";position:absolute;inset:0;background:inherit; transform:scale(1);transform-origin:center;will-change:transform; transition:transform var(--dur-slow) var(--ease-lux); } .research-collection:hover .rc-media::before{ transform:scale(1.05); } /* Body (bottom ~30%) — secondary to the photography, editorial breathing. flex:1 + margin-top:auto on the link keep every row's baselines aligned. */ .rc-body{ display:flex;flex-direction:column;align-items:flex-start;padding:clamp(32px,2.6vw,44px) clamp(32px,2.6vw,48px) clamp(30px,2.4vw,40px);flex:1; } .rc-name{ font-family:var(--font-serif);font-weight:400;font-size:29px;line-height:1.1;letter-spacing:var(--ls-heading);color:var(--ink);margin:0 0 8px; } .rc-sub{ font-family:var(--font-sans);font-size:14px;color:var(--ink-mid);margin:0 0 22px; } .rc-compounds{ display:flex;flex-direction:column;gap:8px;margin:0 0 28px; } .rc-compounds span{ font-family:var(--font-sans);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-light); } .rc-explore{ position:relative;margin-top:auto;display:inline-flex;align-items:center;gap:8px; font-family:var(--font-sans);font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.14em;color:var(--gold); } .rc-explore::after{ content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;background:var(--gold); transform:scaleX(0);transform-origin:center;transition:transform .3s var(--ease-lux); } .research-collection:hover .rc-explore::after{ transform:scaleX(1); } .rc-arrow{ display:inline-block;transition:transform .3s var(--ease-lux); } .research-collection:hover .rc-arrow{ transform:translateX(6px); } /* Coming-soon placeholder card (a Field with no stocked compound yet) — non-interactive: muted media, no hover zoom, no underline animation. */ .research-collection.is-placeholder{ cursor:default; } .research-collection.is-placeholder .rc-media{ opacity:.5;filter:saturate(.55); } .research-collection.is-placeholder:hover .rc-media::before{ transform:scale(1); } .rc-explore--soon{ color:var(--ink-light); } .rc-explore--soon::after{ display:none; } /* Staggered fade-in reveal (JS toggles .is-in; the 80ms stagger is applied in nox.js so hover stays instant). */ .nox-js .research-collection{ opacity:0;transform:translateY(16px); } .research-collection.is-in{ opacity:1;transform:none; } @media(prefers-reduced-motion:reduce){ .nox-js .research-collection{ opacity:1;transform:none; } } /* Tablet keeps 2 columns; mobile collapses to a single column. */ @media(max-width:900px){ .rc-media{ height:clamp(420px,56vw,520px); } } /* (≤768px: the [M] mobile block keeps the 2×2 flush layout — no 1-col collapse) */ /* ---------- [6.5] Our Process — premium printed cards on paper ---------- Light, calm, expensive. Four cream cards floating on a faintly grained, warm-lit paper field with a thin bronze rule and slow, restrained hover. */ .quality-block{ position:relative;overflow:hidden; padding:clamp(112px,11vw,152px) 0; background:var(--bg);color:var(--ink); } /* faint warm radial light behind the cards — depth without busy-ness */ .quality-block::before{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background:radial-gradient(1100px 560px at 50% 40%,rgba(154,133,89,.08),transparent 68%); } /* almost-invisible desaturated paper grain (only visible if you look for it) */ .quality-block::after{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.05;mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:180px 180px; } .quality-block > .container{ position:relative;z-index:1; } /* header — light colours, generous breathing room before the cards */ .quality-block .section-head{ margin-bottom:clamp(60px,6vw,88px); } .quality-block .section-head h2{ color:var(--ink); } .quality-block .section-head .underline{ background:var(--gold);margin-top:26px;margin-bottom:0; } .quality-block .section-head p{ color:var(--ink-mid);margin-top:26px; } /* four floating printed cards */ .quality-grid{ display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,1.8vw,26px); max-width:1220px;margin:0 auto;border:0; } .qb-item{ position:relative;display:flex;flex-direction:column; padding:clamp(38px,2.8vw,50px); background:var(--bg-card); border:1px solid var(--divider); border-radius:0; /* flat at rest — printed page, not floating card (final editorial pass) */ transition:transform var(--dur) var(--ease-lux),box-shadow var(--dur) var(--ease-lux),border-color var(--dur) var(--ease-lux); } .qb-item:hover{ transform:translateY(-4px); /* one card lift sitewide */ box-shadow:var(--shadow-md); border-color:var(--gold); } /* icon inside a thin bronze ring — monochrome glyph, no coloured fill */ .qb-icon{ width:58px;height:58px;padding:16px;box-sizing:border-box; border:1px solid var(--divider);border-radius:50%; color:var(--ink);margin-bottom:26px; transition:border-color var(--dur) var(--ease-lux),transform var(--dur) var(--ease-lux); } .qb-item:hover .qb-icon{ border-color:var(--gold-hover);transform:scale(1.05); } /* /01 — small bronze */ .qb-num{ font-family:var(--font-serif);font-style:italic;font-size:15px;color:var(--gold);margin-bottom:12px;letter-spacing:0; } /* heading — large elegant serif; near-black → pure black on hover */ .qb-item h3{ font-family:var(--font-serif);font-weight:400;font-size:22px !important;line-height:1.2;color:var(--ink);margin:0 0 12px;letter-spacing:var(--ls-heading);transition:color var(--dur) var(--ease-lux); } .qb-item:hover h3{ color:#000; } /* body — small sans, muted charcoal */ .qb-item p{ font-family:var(--font-sans);font-size:13.5px;line-height:1.65;color:var(--ink-mid);margin:0; } /* CTA — bronze, uppercase, wide-tracked, pinned to the card foot; arrow slides */ .qb-learn{ display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:26px; font-family:var(--font-sans);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.16em; color:var(--gold);text-decoration:none; } .qb-learn .qb-arrow{ display:inline-block;transition:transform var(--dur) var(--ease-lux); } .qb-item:hover .qb-learn .qb-arrow{ transform:translateX(6px); } /* tablet: two across, still floating cards */ @media(max-width:900px){ .quality-grid{ grid-template-columns:repeat(2,1fr);gap:20px; } } /* ---------- [6.6] Research library — one quiet editorial index ---------- Phase 6: replaces the former "editorial row" and "handling band" card grids (two heavy sections saying overlapping things). One asymmetric composition: statement left, hairline index right. The head reuses the shared .section-head grammar; rows use the site's serif-name + arrow link language (drawer collections, mega menu). */ .home-library{ padding:0;background:var(--paper); } /* flush: sits between two editorial images with no cream gap */ .home-library-inner{ display:grid;grid-template-columns:5fr 7fr;gap:clamp(48px,7vw,120px); align-items:center;max-width:1160px;margin:0 auto; } .home-library-head{ margin:0 !important;text-align:left; } .home-library-head .section-eyebrow{ text-align:left !important; } .home-library-head p{ margin-top:0; } .home-library-list{ display:flex;flex-direction:column;border-top:1px solid var(--line-soft); } .home-library-row{ display:flex;align-items:center;justify-content:space-between;gap:24px; padding:26px 2px;border-bottom:1px solid var(--line-soft);text-decoration:none; transition:padding-left .3s var(--ease-lux); } .home-library-row-text{ display:flex;flex-direction:column;gap:6px;min-width:0; } .home-library-row-title{ font-family:var(--font-serif);font-weight:400;font-size:24px;line-height:1.2;letter-spacing:var(--ls-heading);color:var(--ink); } .home-library-row-sub{ font-family:var(--font-sans);font-size:13.5px;line-height:1.55;color:var(--ink-mid); } .home-library-row-arrow{ flex:0 0 auto;color:var(--ink-light);transition:transform .3s var(--ease-lux),color var(--dur-fast) ease; } .home-library-row:hover{ padding-left:10px; } .home-library-row:hover .home-library-row-arrow{ transform:translateX(5px);color:var(--gold); } /* Entrance reveal — statement first, rows stagger 80ms (via nox.js). */ .nox-js .home-library-head{ opacity:0;transform:translateY(16px);transition:opacity var(--dur-slow) var(--ease-lux),transform var(--dur-slow) var(--ease-lux); } .home-library-head.is-in{ opacity:1;transform:none; } .nox-js .home-library-row{ opacity:0;transform:translateY(16px);transition:opacity var(--dur-slow) var(--ease-lux),transform var(--dur-slow) var(--ease-lux),padding-left .3s var(--ease-lux); } .home-library-row.is-in{ opacity:1;transform:none; } @media(prefers-reduced-motion:reduce){ .nox-js .home-library-head,.nox-js .home-library-row{ opacity:1;transform:none; } } @media(max-width:900px){ .home-library-inner{ grid-template-columns:1fr;gap:20px;max-width:640px; } .home-library-row{ padding:20px 2px; } .home-library-row-title{ font-size:20px; } } /* ---------- [6b] Full-width editorial image bands (rhythm breaks) ---------- */ .nox-editorial-band{ position:relative;overflow:hidden; width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw); height:clamp(300px,42vw,580px); /* Phase 6: photography-first proportions — the image is the section */ background-size:cover;background-position:center;background-repeat:no-repeat;background-color:var(--dark); } /* whisper-thin warm tint for grading consistency (not a scrim) */ .nox-editorial-band::after{ content:"";position:absolute;inset:0;background:rgba(26,20,12,.05);pointer-events:none; } .nox-editorial-band > *{ position:relative;z-index:1; } /* gentle scroll reveal */ .nox-js .nox-editorial-band{ opacity:0;transition:opacity .7s var(--ease-lux); } .nox-editorial-band.is-in{ opacity:1; } @media(prefers-reduced-motion:reduce){ .nox-js .nox-editorial-band{ opacity:1; } } /* ---------- [7] Final image-led CTA before the footer ---------- */ .nox-final-cta{ position:relative;overflow:hidden; width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw); min-height:clamp(420px,52vw,620px); display:flex;align-items:center;justify-content:center;text-align:center; background-size:cover;background-position:center;background-repeat:no-repeat;background-color:var(--dark); } .nox-final-cta-scrim{ position:absolute;inset:0;z-index:1; background:linear-gradient(rgba(20,17,13,.42),rgba(20,17,13,.56)); } .nox-final-cta-inner{ position:relative;z-index:2;max-width:640px;padding:0 var(--gutter);color:var(--on-dark); } .nox-final-cta-eyebrow{ display:inline-block;font-family:var(--font-sans);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:var(--ls-eyebrow-wide);color:rgba(246,242,236,.72);margin-bottom:22px; } .nox-final-cta-title{ margin:0;font-family:var(--font-serif);font-weight:300;font-size:clamp(2.2rem,4.4vw,3.6rem);line-height:1.08;letter-spacing:var(--ls-heading);color:var(--on-dark); } .nox-final-cta-text{ margin:22px auto 0;max-width:460px;font-family:var(--font-sans);font-size:16px;line-height:1.7;color:rgba(246,242,236,.82); } .nox-final-cta-btn{ display:inline-flex;align-items:center;gap:12px;margin:34px 0 0; padding:16px 34px;border:1px solid rgba(246,242,236,.6);border-radius:0; font-family:var(--font-sans);font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.16em; color:var(--on-dark);text-decoration:none; transition:background .3s var(--ease-lux),border-color .3s var(--ease-lux),color .3s var(--ease-lux),gap .3s var(--ease-lux); } .nox-final-cta-btn:hover{ background:var(--on-dark);border-color:var(--on-dark);color:var(--dark);gap:18px; } .nox-final-cta-arrow{ display:inline-block;transition:transform .3s var(--ease-lux); } .nox-final-cta-btn:hover .nox-final-cta-arrow{ transform:translateX(4px); } .nox-js .nox-final-cta-inner{ opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease-lux),transform .7s var(--ease-lux); } .nox-final-cta-inner.is-in{ opacity:1;transform:none; } @media(prefers-reduced-motion:reduce){ .nox-js .nox-final-cta-inner{ opacity:1;transform:none; } } /* ---------- [6.8] Home colour safety + centred headings ---------- */ .nox-home a{ text-decoration:none; } /* centre the (Why NOX) process-section heading + subtext */ .quality-block .section-head{ text-align:center; margin-left:auto !important; margin-right:auto !important; } .quality-block .section-head .underline{ margin-left:auto;margin-right:auto; } .quality-block .section-head p{ margin-left:auto;margin-right:auto;max-width:560px; } /* force-centre the quality-block heading (dark band) — stronger override */ .quality-block .section-head, .quality-block .section-head h2, .quality-block .section-head p{ text-align:center !important; } .quality-block .section-head .underline{ margin-left:auto !important;margin-right:auto !important; } /* ============================================================ [7] CONTENT PAGES — why / quality / peptides / legal Wrapped under page classes so they only apply to these pages. ============================================================ */ /* ---------- [7.1] Shared helpers / breadcrumb ---------- */ .container-narrow{max-width:1120px;margin:0 auto;padding:0 40px;position:relative;z-index:2} .breadcrumb{ padding:32px 0; font-size:11px;font-weight:500; color:var(--ink-mid); text-transform:uppercase;letter-spacing:var(--ls-eyebrow); } .breadcrumb a{color:var(--ink-mid);text-decoration:none;cursor:pointer} .breadcrumb a:hover{color:var(--ink)} .breadcrumb span{color:var(--ink-faint);margin:0 12px} /* ---------- [7.2] Why NOX (rhythm tokenized in Phase 9) ---------- */ .why-statement{ padding:var(--section-y) 0; border-bottom:1px solid var(--line); text-align:center; } .why-statement-headline{ font-family:var(--font-serif); font-weight:300; font-size:clamp(38px,4.4vw,68px); color:var(--ink); line-height:1.08; letter-spacing:var(--ls-heading); max-width:920px; margin:32px auto 40px; } .why-statement-headline em{font-style:italic} .why-statement-body{ font-size:17px; line-height:1.7; color:var(--ink-mid); max-width:600px; margin:0 auto; } .why-proof{ padding:var(--section-y) 0; border-bottom:1px solid var(--line); } .why-proof-row{ display:grid; grid-template-columns:60px 1fr; gap:32px; padding:48px 0; border-bottom:1px solid var(--line-soft); align-items:start; } .why-proof-row:first-of-type{padding-top:8px} .why-proof-row:last-of-type{border-bottom:none;padding-bottom:8px} .why-proof-num{ font-family:var(--font-serif); font-style:italic; font-weight:400; font-size:14px; color:var(--gold); letter-spacing:.04em; padding-top:6px; } .why-proof-content{ max-width:620px; } .why-proof-label{ font-family:var(--font-sans); font-size:11px; font-weight:500; color:var(--ink-mid); text-transform:uppercase; letter-spacing:var(--ls-eyebrow); margin-bottom:14px; } .why-proof-headline{ font-family:var(--font-serif); font-weight:300; font-size:clamp(28px,2.8vw,40px); color:var(--ink); line-height:1.15; letter-spacing:var(--ls-heading); margin:0 0 18px; } .why-proof-headline em{ font-style:italic; font-weight:400; } .why-proof-note{ font-size:15px; line-height:1.7; color:var(--ink-mid); margin:0; } /* Split editorial composition (Phase 9.1) — photography beside a short passage; the brand-book page-turn between centred sections. Reuses the library's asymmetric grid rhythm and the 4/3 media ratio established by the mega menu. Swap the url() only when final photography arrives. */ .why-split{ padding:var(--section-y) 0; border-bottom:1px solid var(--line); } .why-split-inner{ display:grid;grid-template-columns:6fr 5fr;gap:clamp(48px,7vw,120px); align-items:center;max-width:1160px;margin:0 auto;padding:0 40px; } .why-split-media{ aspect-ratio:4/3;width:100%; background-size:cover;background-position:center;background-repeat:no-repeat; background-color:var(--bg-warm); } .why-split-body{ max-width:30em; } .why-split-body .why-legal-headline{ margin:24px 0 28px;text-align:left; } .why-split-body p{ font-size:16px;line-height:1.75;color:var(--ink-mid);margin:0 0 18px; } .why-split-body p:last-child{ margin-bottom:0; } @media(max-width:860px){ .why-split-inner{ grid-template-columns:1fr;gap:32px;max-width:640px;padding:0 24px; } } /* Finale statement — the borderless closing thought (Phase 9.1). */ .why-statement--finale{ border-bottom:none;padding-bottom:40px; } .why-legal{ padding:var(--section-y) 0; text-align:center; } .why-legal-inner{ max-width:640px; /* ~72ch at 16px — comfortable editorial measure */ margin:0 auto; } .why-legal-headline{ font-family:var(--font-serif); font-weight:300; font-size:clamp(32px,3.6vw,52px); color:var(--ink); line-height:1.15; letter-spacing:var(--ls-heading); margin:24px 0 36px; } .why-legal p{ font-size:16px; line-height:1.75; color:var(--ink-mid); margin-bottom:18px; } .why-legal p em{ font-style:italic; color:var(--ink); } .why-inline-link{ color:var(--ink); text-decoration:none; background-image:linear-gradient(currentColor,currentColor); background-size:100% 1px; background-position:0 100%; background-repeat:no-repeat; padding-bottom:2px; transition:background-size var(--dur) var(--ease-soft); cursor:pointer; } .why-inline-link:hover{ background-size:0% 1px; background-position:100% 100%; } .why-close{ padding:0 0 var(--section-y); text-align:center; } .why-close-row{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; } .why-close-footnote{ margin-top:64px; font-size:11px; color:var(--ink-light); letter-spacing:var(--ls-eyebrow); text-transform:uppercase; font-weight:500; } @media(max-width:760px){ .why-statement{padding:100px 0 80px} .why-proof{padding:60px 0} .why-proof-row{ grid-template-columns:1fr; gap:8px; padding:32px 0; } .why-legal{padding:80px 0 60px} .why-close{padding-bottom:80px} } /* ---------- [7.3] Quality: hero + pillars + FAQ ---------- */ .quality-hero{padding:80px 0 100px;text-align:center} .quality-hero h1{ font-size:clamp(56px,7vw,108px); color:var(--ink);margin:24px auto 32px;max-width:1000px; font-weight:300; } .quality-hero h1 em{font-style:italic} .quality-hero p{max-width:680px;margin:0 auto;color:var(--ink-mid);font-size:17px;line-height:1.7} .quality-pillars{ display:grid;grid-template-columns:repeat(3,1fr);gap:0; border-top:1px solid var(--line); border-left:1px solid var(--line); margin-bottom:120px; } .pillar{ padding:56px 40px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); } .pillar-num{ font-family:var(--font-serif);font-style:italic; font-size:14px;color:var(--gold); margin-bottom:24px; } .pillar h3{ font-family:var(--font-serif);font-weight:400;font-size:32px;color:var(--ink); margin-bottom:18px;letter-spacing:var(--ls-heading); } .pillar p{color:var(--ink-mid);line-height:1.7;font-size:14.5px} @media(max-width:760px){ .quality-pillars{ grid-template-columns:1fr;border-left:none;margin-bottom:64px; } .pillar{ padding:28px 24px;border-right:none; } .pillar h3{ font-size:24px; } } /* FAQ — quiet supporting information (softened in the final editorial pass): smaller serif questions in mid ink, hairline dividers, generous rows. */ .faq-block{padding:var(--section-y) 0} .faq-list{max-width:840px;margin:0 auto;border-top:1px solid var(--line-soft)} .faq-item{ border-bottom:1px solid var(--line-soft); padding:28px 0; cursor:pointer; } .faq-q{ display:flex;justify-content:space-between;align-items:center;gap:32px; font-family:var(--font-serif);font-weight:400;font-size:20px;color:var(--ink-soft); letter-spacing:var(--ls-heading);transition:color var(--dur-fast) ease; } .faq-item:hover .faq-q, .faq-item[open] .faq-q{ color:var(--ink); } .faq-q .toggle{ font-family:var(--font-serif);font-style:italic; font-size:20px;color:var(--ink-light); transition:transform .3s;font-weight:300; } .faq-item[open] .toggle{transform:rotate(45deg)} .faq-a{ color:var(--ink-mid);font-size:15px;line-height:1.7; max-height:0;overflow:hidden; transition:max-height .4s ease,padding .4s ease; } .faq-item[open] .faq-a{max-height:300px;padding-top:20px;max-width:760px} /* native

adaptations for the FAQ */ .faq-q{list-style:none;cursor:pointer} .faq-q::-webkit-details-marker{display:none} .faq-item:not([open]) .faq-a{max-height:0;overflow:hidden;padding-top:0} .faq-item[open] .faq-a{max-height:none;padding-top:20px;max-width:640px} @media(max-width:760px){ .faq-q{font-size:18px;gap:20px} .faq-item{padding:24px 0} } /* ---------- [7.4] Reference: hero, sections, glossary, calculator ---------- */ /* Trim Blocksy's content-area top padding on pages site-wide, so the custom page heroes sit close beneath the header (the hero's own padding sets the space). Home is excluded — its hero is a full-bleed dark section. */ body.page:not(.home) #main, body.page:not(.home) #primary, body.page:not(.home) #main .ct-container, body.page:not(.home) #primary .content-area{ padding-top:0 !important; } /* Every interior page hero sits flush beneath the header — one small, consistent top gap across all page types (Reference, legal/info, Quality, Why NOX …). */ .ref-hero, .legal-hero, .why-statement:first-of-type{ padding-top:34px !important; } @media(max-width:760px){ .ref-hero, .legal-hero, .why-statement:first-of-type{ padding-top:16px !important; } } /* Tighter vertical rhythm site-wide (mobile especially) so pages scroll less. Desktop is governed by the vw/max terms and barely changes. */ :root{ --section-y:clamp(46px,8vw,150px); --section-y-tight:clamp(32px,5vw,88px); } .ref-hero{ padding:clamp(40px,5vw,72px) 0 var(--section-y-tight); text-align:center; border-bottom:1px solid var(--line); } .ref-hero-label{ font-family:var(--font-sans); font-size:11px; font-weight:500; text-transform:uppercase; letter-spacing:var(--ls-eyebrow); color:var(--ink-light); margin-bottom:32px; display:block; } .ref-hero-headline{ font-family:var(--font-serif); font-weight:300; font-size:clamp(44px,5.5vw,80px); color:var(--ink); line-height:1.06; letter-spacing:var(--ls-heading); max-width:760px; margin:0 auto 28px; } .ref-hero-headline em{font-style:italic} .ref-hero-sub{ font-family:var(--font-serif); font-style:italic; font-weight:300; font-size:18px; color:var(--ink-light); max-width:560px; margin:0 auto; line-height:1.6; } /* Every Reference accordion shares ONE layout, sized to the calculator's width so all headers, dividers, chevrons and number labels line up. The calculator is the reference: its width is now applied to all sections rather than being a special case. (.ref-section-calc is kept only as the JS "open by default" marker; it carries no width/padding overrides.) */ .ref-section{ padding:var(--section-y-tight) 0;border-top:1px solid var(--line); } .ref-section:first-of-type{ border-top:none; } .ref-section-inner{ max-width:1100px;margin:0 auto;padding:0 24px; } .ref-section-num{ font-family:var(--font-serif);font-style:italic;font-weight:400;font-size:14px; color:var(--gold);margin-bottom:16px;display:block;letter-spacing:.02em; } .ref-section-title{ font-family:var(--font-serif);font-weight:300;font-size:clamp(32px,4vw,48px); color:var(--ink);line-height:1.1;letter-spacing:var(--ls-heading);margin-bottom:40px; } .ref-section-title em{ font-style:italic; } .ref-prose{ color:var(--ink-mid);font-size:16.5px;line-height:1.75; } .ref-prose p{ margin:0 0 24px; } .ref-prose p:last-child{ margin-bottom:0; } .ref-prose strong{ color:var(--ink);font-weight:500; } /* ---- long-form editorial vocabulary (Phase 11.1) — everything a reference article may contain, styled once so future content reads like a premium publication with zero per-article CSS. ---- */ .ref-prose h3{ font-family:var(--font-serif);letter-spacing:var(--ls-heading);font-weight:400;font-size:22px;color:var(--ink); line-height:1.3;margin:44px 0 16px; } .ref-prose a{ color:var(--ink);text-decoration:none; background-image:linear-gradient(currentColor,currentColor); background-size:100% 1px;background-position:0 100%;background-repeat:no-repeat; padding-bottom:2px;transition:background-size var(--dur) var(--ease-soft); } .ref-prose a:hover{ background-size:0% 1px;background-position:100% 100%; } .ref-prose ul,.ref-prose ol{ margin:0 0 24px;padding:0;list-style:none; } .ref-prose ul li,.ref-prose ol li{ position:relative;padding-left:22px;margin-bottom:10px; } .ref-prose ul li::before{ content:"";position:absolute;left:0;top:.72em;width:8px;height:1px;background:var(--gold); } .ref-prose ol{ counter-reset:refol; } .ref-prose ol li{ counter-increment:refol;padding-left:30px; } .ref-prose ol li::before{ content:"/" counter(refol);position:absolute;left:0;top:.14em; font-family:var(--font-serif);font-style:italic;font-size:13px;color:var(--gold); } /* pull quote — a centred editorial breath inside long sections */ .ref-prose blockquote{ margin:44px 0;padding:0;border:0;text-align:center; } .ref-prose blockquote p{ font-family:var(--font-serif);font-style:italic;font-weight:300; font-size:24px;line-height:1.45;color:var(--ink);margin:0; } /* imagery + captions — same quiet treatment as the editorial system */ .ref-prose figure{ margin:40px 0; } .ref-prose figure img{ display:block;width:100%;height:auto;border:0; } .ref-prose figcaption{ margin-top:12px;text-align:center; font-family:var(--font-sans);font-size:11px;font-weight:500; text-transform:uppercase;letter-spacing:var(--ls-eyebrow);color:var(--ink-light); } /* reference tables — hairline print grammar, matching the calculator table */ .ref-prose table{ width:100%;border-collapse:collapse;margin:32px 0;border:1px solid var(--line);background:var(--paper-hi); } .ref-prose th{ font-family:var(--font-sans);font-size:10.5px;font-weight:500;text-transform:uppercase; letter-spacing:var(--ls-eyebrow);color:var(--ink-mid);background:var(--paper); padding:14px 18px;text-align:left;border-bottom:1px solid var(--line); } .ref-prose td{ font-size:14.5px;line-height:1.6;padding:14px 18px;border-bottom:1px solid var(--line-soft); } .ref-prose tr:last-child td{ border-bottom:none; } /* section pause — the gold hairline as a printed asterisk */ .ref-prose hr{ border:0;width:48px;height:1px;background:var(--gold);margin:48px auto; } .ref-step{ padding:32px 0;border-bottom:1px solid var(--line-soft); } .ref-step:last-child{ border-bottom:none; } .ref-step-num{ font-family:var(--font-sans);font-size:11px;font-weight:500;text-transform:uppercase; letter-spacing:var(--ls-eyebrow);color:var(--ink-light);margin-bottom:14px;display:block; } .ref-step-heading{ font-family:var(--font-serif);font-weight:400;font-size:22px;color:var(--ink); margin-bottom:14px;line-height:1.3; } .ref-step-body{ color:var(--ink-mid);font-size:16px;line-height:1.75; } .ref-glossary{ margin-top:8px; } .ref-glossary-item{ padding:24px 0;border-bottom:1px solid var(--line-soft);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:40px; } .ref-glossary-item:last-child{ border-bottom:none; } .ref-glossary-term{ font-family:var(--font-serif);font-weight:400;font-style:italic;font-size:18px;color:var(--ink);line-height:1.4; } .ref-glossary-def{ font-size:15.5px;color:var(--ink-mid);line-height:1.7; } .ref-glossary-def em{ font-style:italic; } @media(max-width:760px){ .ref-glossary-item{ grid-template-columns:1fr;gap:8px; } .ref-glossary-term{ font-size:17px; } } /* dilution calculator (#calcSyringeFill built by nox.js) */ .calc-card{ background:var(--paper-hi);border:1px solid var(--line);padding:64px 60px 52px;margin-bottom:32px; } /* warm cream panel, one soft hairline; extra top air */ .calc-grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-bottom:8px; } .calc-input-group{ display:flex;flex-direction:column;min-width:0; } .calc-label{ font-family:var(--font-sans);font-size:11px;font-weight:500;text-transform:uppercase; letter-spacing:var(--ls-eyebrow);color:var(--ink-mid);margin-bottom:14px;white-space:nowrap; } .calc-input-wrap{ display:flex;align-items:baseline;gap:10px;position:relative; border-bottom:1px solid var(--line-strong);padding-bottom:11px;width:100%;min-width:0; transition:border-color var(--dur-fast) var(--ease-lux); } /* focus: the hairline eases to full ink and a second rule sweeps in from the left — a quiet, engineered underline (no accent colour) */ .calc-input-wrap::after{ content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--ink); transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease-lux); } .calc-input-wrap:focus-within{ border-color:var(--ink); } .calc-input-wrap:focus-within::after{ transform:scaleX(1); } .calc-input-wrap input{ flex:1 1 0;width:100%;min-width:0;font-family:var(--font-serif);font-weight:300;font-size:32px; color:var(--ink);background:transparent;border:none;outline:none;padding:0; letter-spacing:-.012em;-moz-appearance:textfield; } .calc-input-wrap input::-webkit-outer-spin-button, .calc-input-wrap input::-webkit-inner-spin-button{ -webkit-appearance:none;margin:0; } .calc-unit{ font-family:var(--font-sans);font-size:13px;font-weight:500;text-transform:uppercase; letter-spacing:var(--ls-eyebrow);color:var(--ink-light); } .calc-hint{ font-size:11.5px;color:var(--ink-light);margin-top:12px;line-height:1.5; } /* dose unit toggle (mcg / mg) — sits where .calc-unit would, self-aligned to the input baseline. Square hairline segments, active filled ink. */ .calc-unit-toggle{ display:inline-flex;flex:0 0 auto;align-self:center;border:1px solid var(--line);border-radius:0; } .calc-unit-btn{ border:0;background:transparent;cursor:pointer;padding:6px 11px; font-family:var(--font-sans);font-size:11px;font-weight:500;text-transform:uppercase; letter-spacing:.08em;color:var(--ink-light); transition:background var(--dur-fast) ease,color var(--dur-fast) ease; } .calc-unit-btn + .calc-unit-btn{ border-left:1px solid var(--line); } .calc-unit-btn.is-active{ background:var(--ink);color:var(--bg); } .calc-unit-btn:not(.is-active):hover{ color:var(--ink); } .calc-divider{ height:1px;background:var(--line);margin:48px 0 40px; } .calc-syringe-wrap{ margin:8px 0 32px;text-align:center; } .calc-syringe-label{ display:block;font-family:var(--font-sans);font-size:10.5px;font-weight:500; text-transform:uppercase;letter-spacing:var(--ls-eyebrow);color:var(--ink-light);margin-bottom:24px; } .calc-syringe{ width:100%;max-width:680px;height:auto;color:var(--ink);overflow:visible; } #calcSyringeFill{ transition:width .4s var(--ease-soft),x .4s var(--ease-soft); } #calcSyringeReadout{ transition:opacity var(--dur-fast); } .calc-results{ display:flex;flex-direction:column;gap:0; } .calc-result-row{ display:flex;justify-content:space-between;align-items:baseline; padding:18px 0;border-bottom:1px solid var(--line-soft); } .calc-result-row:last-child{ border-bottom:none; } .calc-result-label{ font-family:var(--font-sans);font-size:13px;color:var(--ink-mid); } .calc-result-value{ font-family:var(--font-serif);font-weight:300;font-size:22px;color:var(--ink);letter-spacing:-.005em; } .calc-result-primary{ background:var(--paper);margin:8px -24px 8px -24px;padding:22px 24px;border-bottom:none; } .calc-result-primary .calc-result-label{ color:var(--ink);font-weight:500; } .calc-result-primary .calc-result-value{ font-size:32px;color:var(--gold);font-style:italic; } .calc-quickref{ margin-top:40px;padding-top:64px;border-top:1px solid var(--line); } .calc-quickref-title{ font-family:var(--font-serif);font-weight:400;font-size:24px;color:var(--ink); margin-bottom:28px;text-align:center;letter-spacing:var(--ls-heading); } .calc-quickref-table{ border:1px solid var(--line);background:#fff; } .calc-qr-head,.calc-qr-row{ display:grid;grid-template-columns:repeat(5,minmax(0,1fr));padding:16px 24px; } .calc-qr-head{ background:var(--paper);border-bottom:1px solid var(--line); } .calc-qr-head span{ font-family:var(--font-sans);font-size:10.5px;font-weight:500;text-transform:uppercase; letter-spacing:var(--ls-eyebrow);color:var(--ink-mid); } .calc-qr-row{ border-bottom:1px solid var(--line-soft); } .calc-qr-row:last-child{ border-bottom:none; } .calc-qr-row span{ font-family:var(--font-serif);font-weight:400;font-size:14.5px;color:var(--ink); } .calc-qr-row span:first-child,.calc-qr-row span:nth-child(2){ color:var(--ink-mid); } @media(max-width:760px){ .calc-card{ padding:36px 28px 28px; } .calc-grid{ grid-template-columns:1fr;gap:24px; } .calc-input-wrap input{ font-size:28px; } .calc-result-primary{ margin:8px -16px 8px -16px;padding:18px 16px; } .calc-result-primary .calc-result-value{ font-size:26px; } .calc-qr-head,.calc-qr-row{ grid-template-columns:1fr 1fr;padding:12px 16px;row-gap:6px; } } @media(max-width:760px){ .ref-section{padding:64px 0} .ref-hero{padding:18px 0 26px} .legal-hero{padding:18px 0 26px} .ref-hero-headline{ font-size:clamp(30px,8vw,42px); line-height:1.08; overflow-wrap:normal; word-break:keep-all; hyphens:none; margin-bottom:16px; } .ref-hero-sub{ font-size:16px;line-height:1.5; } /* Denser collapsed accordion rows on phones */ .nox-ia-head{ padding:16px 0; } .nox-ia-head .ref-section-title{ font-size:clamp(24px,6.2vw,32px); } .nox-ia--legal .nox-ia-head h2{ font-size:clamp(21px,5.4vw,28px); } /* comfortable phone reading: slightly smaller measure, quieter quotes, tables scroll sideways instead of crushing */ .ref-prose{ font-size:16px; } .ref-prose blockquote{ margin:36px 0; } .ref-prose blockquote p{ font-size:20px; } .ref-prose table{ display:block;overflow-x:auto;-webkit-overflow-scrolling:touch; } } .calc-disclaimer{ font-size:12.5px; color:var(--ink-light); line-height:1.7; max-width:680px; margin:0 auto 80px; text-align:center; } .calc-inline-link{ color:var(--ink); text-decoration:none; background-image:linear-gradient(currentColor,currentColor); background-size:100% 1px; background-position:0 100%; background-repeat:no-repeat; padding-bottom:2px; transition:background-size var(--dur) var(--ease-soft); cursor:pointer; } .calc-inline-link:hover{ background-size:0% 1px; } /* ---------- [7.4b] Calculator workspace V2 (signature interactive tool) ---- Numbers are the hero; presets + a dose slider make it playful; the syringe is the centrepiece; a calculation-flow row replaces the reference table. One bronze accent, whitespace over borders. Additive to the calc card. */ /* (Presets removed — the calculator opens straight to the inputs.) */ /* page identity — a restrained editorial kicker above the calculator title */ .calc-eyebrow{ display:block;margin-bottom:16px;font-family:var(--font-sans);font-size:11px;font-weight:600; text-transform:uppercase;letter-spacing:var(--ls-eyebrow-wide);color:var(--ink-light); } /* numbered steps — one question per moment. The step number is a quiet serif italic in muted ink (no accent colour). */ .calc-step{ margin-bottom:34px; } .calc-step-label{ display:flex;align-items:baseline;gap:12px;margin-bottom:12px; font-family:var(--font-sans);font-size:10.5px;font-weight:600; text-transform:uppercase;letter-spacing:var(--ls-eyebrow);color:var(--ink-mid); } .calc-step-num{ font-family:var(--font-serif);font-style:italic;font-size:13px;font-weight:400;color:var(--ink-light);letter-spacing:.02em;text-transform:none; } .calc-step-hint{ margin:8px 0 0;font-family:var(--font-sans);font-size:12.5px;color:var(--ink-light);line-height:1.5; } /* RESULTS ARE THE HERO — the draw dominates; the two supporting figures sit quietly beneath. Whitespace instead of a boxed grid. */ .calc-outs{ margin:56px 0 0; } .calc-out-primary{ text-align:center;padding:20px 0 52px;border-bottom:1px solid var(--line-soft); } .calc-out-primary .calc-out-label{ display:block;margin-bottom:18px;font-family:var(--font-sans);font-size:11px;font-weight:600; text-transform:uppercase;letter-spacing:var(--ls-eyebrow-wide);color:var(--ink-light); } .calc-hero-figure{ display:flex;align-items:baseline;justify-content:center;gap:16px; } .calc-hero-value{ font-family:var(--font-serif);font-weight:300;font-size:clamp(72px,12.5vw,136px); line-height:.86;letter-spacing:-.035em;color:var(--ink);font-variant-numeric:tabular-nums; } .calc-hero-unit{ font-family:var(--font-sans);font-size:14px;font-weight:500;text-transform:uppercase; letter-spacing:var(--ls-eyebrow);color:var(--ink-mid); } .calc-out-sub{ margin-top:18px;font-family:var(--font-sans);font-size:13px;color:var(--ink-light);letter-spacing:.02em; } /* two supporting figures — a calm, quieter two-up beneath the hero */ .calc-out-secondary{ display:grid;grid-template-columns:1fr 1fr; } .calc-out{ padding:28px 30px 24px;display:flex;flex-direction:column;gap:9px;min-width:0;text-align:center; border-right:1px solid var(--line-soft); } .calc-out:last-child{ border-right:none; } .calc-out-label{ font-family:var(--font-sans);font-size:10px;font-weight:600; text-transform:uppercase;letter-spacing:var(--ls-eyebrow);color:var(--ink-light); } .calc-out-value{ font-family:var(--font-serif);font-weight:300;font-size:clamp(24px,2.6vw,32px); line-height:1.05;letter-spacing:-.01em;color:var(--ink-soft);font-variant-numeric:tabular-nums; } .calc-out-unit{ font-family:var(--font-sans);font-size:12px;color:var(--ink-light);letter-spacing:.04em; } /* dose slider — engineered, minimal. Ink thumb on a hairline track. */ .calc-slider{ margin:38px 0 8px; } .calc-slider-label{ display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px; font-family:var(--font-sans);font-size:10px;font-weight:600;text-transform:uppercase; letter-spacing:var(--ls-eyebrow);color:var(--ink-light); } .calc-slider input[type=range]{ -webkit-appearance:none;appearance:none;width:100%;height:2px;background:var(--line-strong); margin:16px 0;cursor:pointer;border-radius:2px; } .calc-slider input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none;appearance:none;width:15px;height:15px;border-radius:50%; background:var(--ink);border:2px solid var(--paper-hi);box-shadow:0 0 0 1px var(--ink); cursor:pointer;transition:transform .18s var(--ease-lux); } .calc-slider input[type=range]::-moz-range-thumb{ width:15px;height:15px;border-radius:50%;background:var(--ink);border:2px solid var(--paper-hi); box-shadow:0 0 0 1px var(--ink);cursor:pointer;transition:transform .18s var(--ease-lux); } .calc-slider input[type=range]:hover::-webkit-slider-thumb{ transform:scale(1.2); } .calc-slider input[type=range]:active::-webkit-slider-thumb{ transform:scale(1.08); } .calc-slider input[type=range]:hover::-moz-range-thumb{ transform:scale(1.2); } .calc-slider input[type=range]:focus-visible{ outline:1px solid var(--ink);outline-offset:10px; } /* visual reconstitution — the syringe is the centrepiece and the visual bridge between the hero result and the summary. Capped + centred so equal whitespace sits either side; the SVG is framed around the barrel centre so it reads optically centred. Fill + marker glide on one shared timing. */ .calc-visuals{ margin:clamp(36px,4vw,52px) 0 8px;text-align:center; } .calc-visuals-label{ display:block;margin-bottom:22px;text-align:center;font-family:var(--font-sans); font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:var(--ls-eyebrow);color:var(--ink-light); } .calc-syringe{ display:block;width:100%;max-width:800px;height:auto;margin:0 auto;color:var(--ink); } #calcSyringeFill{ transition:width var(--dur) var(--ease-lux),x var(--dur) var(--ease-lux); } #calcSyringeMarker{ transition:x1 var(--dur) var(--ease-lux),x2 var(--dur) var(--ease-lux),opacity var(--dur-fast) ease; } /* CALCULATION FLOW — visual storytelling in place of the reference table */ .calc-flow{ display:flex;align-items:stretch;justify-content:center;flex-wrap:wrap;gap:0; margin:clamp(44px,5vw,64px) 0 0;border-top:1px solid var(--line-soft);padding-top:clamp(36px,4.5vw,52px); } .calc-flow-node{ flex:1 1 0;min-width:0;text-align:center;padding:6px 16px; } .calc-flow-label{ display:block;margin-bottom:12px;font-family:var(--font-sans);font-size:9.5px;font-weight:600; text-transform:uppercase;letter-spacing:var(--ls-eyebrow);color:var(--ink-light); } .calc-flow-value{ font-family:var(--font-serif);font-weight:400;font-size:clamp(16px,1.8vw,20px); color:var(--ink-soft);line-height:1.25;letter-spacing:-.005em; } .calc-flow-node--out .calc-flow-value{ color:var(--ink);font-style:italic; } /* output distinguished by italic + full ink, not colour */ .calc-flow-sep{ flex:0 0 auto;align-self:center;color:var(--ink-faint);font-size:13px;padding:0 2px; } /* calm value fade (JS toggles .calc-fading; count-up handles the hero numbers) */ .calc-flow-value,.calc-out-sub{ transition:opacity .12s ease; } .calc-fading{ opacity:0; } /* the card lifts from a resting state to "ready" the first time it computes */ .calc-card .calc-outs{ transition:opacity var(--dur) var(--ease-lux); } /* mobile — the primary platform: big figures, comfortable targets, and the syringe as the centrepiece (a taller variant is injected by nox.js). */ @media(max-width:760px){ .calc-card{ padding:32px 22px 26px; } .calc-grid{ grid-template-columns:1fr;gap:24px; } .calc-input-wrap input{ font-size:28px; } .calc-hero-value{ font-size:clamp(72px,26vw,104px); } .calc-out{ padding:22px 16px; } /* the syringe reclaims the card gutters so it fills ~94% of the screen */ .calc-visuals{ margin-left:-14px;margin-right:-14px; } .calc-visuals-label{ margin-bottom:18px; } .calc-syringe{ max-width:none; } /* full width on mobile — the syringe is the star */ .calc-flow{ flex-direction:column;gap:0;align-items:stretch;padding-top:28px; } .calc-flow-node{ display:flex;align-items:baseline;justify-content:space-between;gap:16px;text-align:left;padding:14px 4px;border-bottom:1px solid var(--line-soft); } .calc-flow-node:last-child{ border-bottom:none; } .calc-flow-label{ margin-bottom:0; } .calc-flow-sep{ display:none; } } /* ---------- [7.5] Peptides accordion ---------- */ .pep-accordion{ border-bottom:1px solid var(--line); background:var(--bg); } .pep-accordion:first-of-type{ border-top:1px solid var(--line); } .pep-accordion-head{ display:flex; align-items:baseline; justify-content:space-between; gap:24px; padding:32px 0; cursor:pointer; list-style:none; -webkit-tap-highlight-color:transparent; user-select:none; } .pep-accordion-head::-webkit-details-marker{display:none} .pep-accordion-head::marker{content:''} .pep-accordion-num{ font-family:var(--font-sans); font-size:11px; font-weight:500; color:var(--ink-mid); letter-spacing:var(--ls-eyebrow); text-transform:uppercase; flex-shrink:0; min-width:48px; } .pep-accordion-label{ font-family:var(--font-serif); font-weight:300; font-size:clamp(28px,3.4vw,40px); letter-spacing:-.015em; line-height:1.15; color:var(--ink); flex-grow:1; } .pep-accordion-label em{font-style:italic} .pep-accordion-chev{ width:18px;height:18px; color:var(--ink-mid); transition:transform var(--dur-fast) ease; flex-shrink:0; align-self:center; } .pep-accordion[open] > .pep-accordion-head .pep-accordion-chev{ transform:rotate(180deg); } .pep-accordion-body{ padding:0 0 40px 72px; max-width:780px; } .pep-accordion-body p{ font-family:var(--font-sans); font-weight:400; font-size:16.5px; line-height:1.75; color:var(--ink-mid); margin:0 0 24px; } .pep-accordion-body p:last-child{margin-bottom:0} .pep-accordion-body p em{ font-style:italic; color:var(--ink); } .pep-accordion-body strong{ font-weight:500; color:var(--ink); } .pep-accordion-body a{ color:var(--ink); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; text-decoration-color:var(--ink-mid); cursor:pointer; transition:text-decoration-color var(--dur-fast) ease; } .pep-accordion-body a:hover{ text-decoration-color:var(--ink); } @media (max-width:768px){ .pep-accordion-head{padding:24px 0; gap:16px} .pep-accordion-num{min-width:36px;font-size:10px;letter-spacing:var(--ls-eyebrow)} .pep-accordion-label{font-size:24px} .pep-accordion-body{padding-left:0;padding-bottom:32px} .pep-accordion-body p{font-size:16px} } /* guard: inline SVGs inside pasted page content (Blocksy sizes content SVGs to full width; restore component dimensions). */ .pep-accordion-head .pep-accordion-chev{ width:18px !important; height:18px !important; } .entry-content svg.pep-accordion-chev, .wp-block-html svg.pep-accordion-chev{ width:18px !important; height:18px !important; } /* ---------- [7.6] Legal pages + TOC ---------- */ /* ── Info-page accordions (Reference + legal/info pages) ── A section heading becomes a full-width toggle; its content collapses via a grid-rows 0fr→1fr height animation. Built by noxBuildInfoAccordions(). */ .ref-section.nox-ia-sec{ padding:0 !important; } .ref-section.nox-ia-sec .ref-section-inner{ padding-top:0 !important;padding-bottom:0 !important; } .nox-ia-head{ display:flex;align-items:center;justify-content:space-between;gap:20px; width:100%;box-sizing:border-box;text-align:left; background:none;border:0;border-top:1px solid var(--line);cursor:pointer; padding:clamp(22px,2.6vw,30px) 0;margin:0; transition:opacity var(--dur-fast) var(--ease-lux); } .nox-ia-head:hover{ opacity:.66; } .nox-ia-head-text{ display:block;min-width:0; } .nox-ia-head-text > *{ margin:0 !important; } .nox-ia-head .ref-section-num, .nox-ia-head .calc-eyebrow{ display:block;margin-bottom:8px !important; } .nox-ia-chev{ color:var(--ink-mid); } /* Collapse mechanism + chevron rotation are applied inline by nox.js so the feature works even if this stylesheet is served stale from cache. */ .ref-section.nox-ia-sec, .nox-ia--legal{ scroll-margin-top:96px; } .nox-ia-panel-inner > *:first-child{ margin-top:0; } /* Wrap whole words to new lines — never split a word mid-character. */ .nox-ia-head-text, .nox-ia-head-text h2, .nox-ia-head .ref-section-title{ overflow-wrap:normal;word-break:normal;hyphens:none; } .legal-hero{ padding:clamp(40px,5vw,72px) 0 60px; text-align:center; border-bottom:1px solid var(--line); } .legal-hero h1{ font-size:clamp(48px,5.5vw,76px); color:var(--ink); margin:24px auto 24px; max-width:880px; font-weight:300; line-height:1.05; letter-spacing:var(--ls-heading); } .legal-hero h1 em{font-style:italic} .legal-hero p{ max-width:620px;margin:0 auto; color:var(--ink-mid);font-size:16px; line-height:1.65; } .legal-hero .meta{ margin-top:24px; font-size:11px;font-weight:500; color:var(--ink-light); text-transform:uppercase;letter-spacing:var(--ls-eyebrow); } .legal-body{ max-width:780px; margin:0 auto; padding:80px 40px 120px; } .legal-body h2{ font-family:var(--font-serif); font-weight:400; font-size:28px; color:var(--ink); margin:56px 0 18px; letter-spacing:var(--ls-heading); } .legal-body h2:first-child{margin-top:0} .legal-body h3{ font-family:var(--font-sans); font-weight:500; font-size:14px; color:var(--ink); text-transform:uppercase; letter-spacing:.18em; margin:32px 0 14px; } .legal-body p{ color:var(--ink-mid); font-size:15.5px; line-height:1.75; margin-bottom:18px; } .legal-body strong{color:var(--ink);font-weight:500} .legal-body ul,.legal-body ol{ margin:0 0 22px 0; padding-left:24px; color:var(--ink-mid); } .legal-body li{ font-size:15.5px; line-height:1.75; margin-bottom:10px; padding-left:8px; } .legal-body a{ color:var(--ink); text-decoration:none; background-image:linear-gradient(currentColor,currentColor); background-size:100% 1px; background-position:0 100%; background-repeat:no-repeat; padding-bottom:2px; transition:background-size var(--dur) var(--ease-soft); } .legal-body a:hover{ background-size:0% 1px; background-position:100% 100%; } .legal-section-num{ font-family:var(--font-serif); font-style:italic; color:var(--gold); margin-right:14px; font-weight:400; } .legal-callout{ margin:28px 0; padding:24px 28px; background:var(--paper); border-left:2px solid var(--ink); } .legal-callout strong{display:block;margin-bottom:8px;font-size:13px;text-transform:uppercase;letter-spacing:.14em} .legal-callout p{margin:0;font-size:14px} .legal-toc{ background:var(--paper); border:1px solid var(--line); padding:32px 36px; margin-bottom:64px; } .legal-toc h4{ font-size:11px;font-weight:500; color:var(--ink-mid); text-transform:uppercase;letter-spacing:var(--ls-eyebrow); margin-bottom:18px; } .legal-toc ol{ list-style:none;padding:0;margin:0; counter-reset:toc; } .legal-toc li{ counter-increment:toc; padding:10px 0; border-bottom:1px solid var(--line-soft); color:var(--ink); font-size:14px; cursor:pointer; display:flex; gap:18px; } .legal-toc li:last-child{border-bottom:none} .legal-toc li::before{ content:counter(toc, decimal-leading-zero); font-family:var(--font-serif); font-style:italic; color:var(--gold); min-width:24px; } .legal-toc li:hover{color:var(--ink-mid)} /* ---------- [7.7] Legacy button used in pasted page content ---------- Kept for Custom-HTML page blocks that use .btn + a nested .btn-arrow span (a drawn line, not the section-1 text-link). The section-1 button system above governs .btn's box; this adds the arrow child + the page-content padding/tracking those blocks expect. */ .btn{ gap:14px; padding:18px 32px; font-size:12px; letter-spacing:var(--ls-eyebrow); white-space:nowrap; } .btn-arrow{ width:14px;height:1px;background:currentColor; position:relative;display:inline-block; transition:width .4s cubic-bezier(.4,0,.2,1); } .btn-arrow::after{ content:'';position:absolute;right:0;top:-4px; width:8px;height:8px; border-top:1px solid currentColor; border-right:1px solid currentColor; transform:rotate(45deg); } .btn:hover .btn-arrow{width:22px} /* ============================================================ [7b] SHOP EDITORIAL HERO ------------------------------------------------------------ Full-width cinematic hero at the top of the shop, above the filters and grid (inc/shop-hero.php). Background parallaxes subtly (nox.js); content stays fixed and fades in on load. ============================================================ */ .nox-shop-hero{ position:relative;overflow:hidden; width:100vw;max-width:100vw; margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw); height:560px; display:flex;align-items:center;justify-content:center;text-align:center; background:#1a1611; } /* Background layer — oversized so parallax never reveals an edge. */ .nox-shop-hero-bg{ position:absolute;inset:-9% 0; background-size:cover;background-position:center;background-repeat:no-repeat; will-change:transform;transform:translate3d(0,0,0); } /* Subtle dark overlay (~18%) for legibility, softly deeper at the base. */ .nox-shop-hero-scrim{ position:absolute;inset:0;z-index:1; background:linear-gradient(to bottom,rgba(26,22,17,.14),rgba(26,22,17,.22) 55%,rgba(26,22,17,.34)); } .nox-shop-hero-inner{ position:relative;z-index:2;max-width:820px;padding:0 24px;color:var(--on-dark); } /* Breadcrumb — 12px uppercase, wide-tracked, warm cream (never bright white). */ .nox-shop-hero-crumb{ display:flex;align-items:center;justify-content:center;gap:10px; font-family:var(--font-sans);font-size:12px;font-weight:500; text-transform:uppercase;letter-spacing:var(--ls-eyebrow);color:var(--on-dark-muted); margin:0 0 22px; } .nox-shop-hero-crumb a{ color:var(--on-dark-muted);text-decoration:none;transition:color var(--dur) var(--ease); } .nox-shop-hero-crumb a:hover{ color:var(--on-dark); } .nox-shop-hero-crumb span[aria-hidden]{ opacity:.5; } /* Heading — large luxury serif, medium weight, warm cream. */ .nox-shop-hero-title{ margin:0;color:var(--on-dark);font-family:var(--font-serif);font-weight:500; font-size:clamp(2.125rem,5.2vw,4.5rem);line-height:1.06;letter-spacing:var(--ls-heading);text-wrap:balance; } /* Supporting copy — 18px, cream at 86%, comfortable measure. */ .nox-shop-hero-text{ margin:22px auto 0;max-width:650px;color:rgba(246,242,236,.86); font-family:var(--font-sans);font-weight:400;font-size:18px;line-height:1.6;letter-spacing:.01em; } /* CTA — quiet editorial text link with a drawn arrow. */ .nox-shop-hero-cta{ display:inline-flex;align-items:center;gap:12px;margin:30px 0 0; font-family:var(--font-sans);font-size:13px;font-weight:500; text-transform:uppercase;letter-spacing:.16em;color:var(--on-dark);text-decoration:none; transition:gap var(--dur) var(--ease),opacity var(--dur) var(--ease); } .nox-shop-hero-cta:hover{ gap:22px; } .nox-shop-hero-cta-arrow{ transition:transform var(--dur) var(--ease); } .nox-shop-hero-cta:hover .nox-shop-hero-cta-arrow{ transform:translateX(4px); } /* Staggered fade-in on load — ~120ms apart, subtle rise, no drama. */ @keyframes noxHeroIn{ from{ opacity:0;transform:translateY(12px); } to{ opacity:1;transform:none; } } .nox-shop-hero-crumb, .nox-shop-hero-title, .nox-shop-hero-text, .nox-shop-hero-cta{ opacity:0;animation:noxHeroIn .85s var(--ease-lux) both; } .nox-shop-hero-crumb{ animation-delay:.10s; } .nox-shop-hero-title{ animation-delay:.22s; } .nox-shop-hero-text{ animation-delay:.34s; } .nox-shop-hero-cta{ animation-delay:.46s; } /* Sits flush under the header (kill any inherited top padding on the shop). */ .woocommerce-shop .nox-shop-hero, .tax-product_cat .nox-shop-hero{ margin-top:0; } #nox-shop-products{ display:block;height:0;overflow:hidden; } /* ---- Category collection hero (Phase 7 / refined 7.1) — shares the shop-hero shell ---- */ .nox-collection-hero{ height:clamp(500px,52vw,650px); } /* immersive — the photography breathes */ /* (Phase 7.1: the compound count was removed from the hero.) */ /* Quiet data-driven editorial index under the hero — real compound names, one per line, no separators. */ .nox-collection-story{ max-width:var(--container-shop);margin:0 auto; padding:30px clamp(24px,3vw,48px) 4px; display:flex;flex-direction:column;gap:16px; } .nox-collection-story-label{ font-family:var(--font-sans);font-size:10px;font-weight:600; text-transform:uppercase;letter-spacing:var(--ls-eyebrow);color:var(--ink-light); } .nox-collection-story-names{ list-style:none;margin:0;padding:0; display:flex;flex-direction:column;gap:12px; } .nox-collection-story-names li{ font-family:var(--font-serif);font-size:16px;line-height:1.4; letter-spacing:.01em;color:var(--ink-mid); } /* The hero carries the count — hide the Woo result count on collections. */ .tax-product_cat .woocommerce-result-count{ display:none !important; } @media(max-width:640px){ .nox-collection-story{ gap:12px;padding-top:24px; } .nox-collection-story-names{ gap:10px; } } /* Very subtle full-width divider directly beneath the hero — a 1px bronze hairline at ~14% that separates hero from catalogue without drawing the eye. */ .nox-shop-divider{ height:1px;border:0;padding:0; width:100vw;max-width:100vw; margin:0 calc(50% - 50vw); background:rgba(154,133,89,.14); } /* Tighten the hero → catalogue transition: kill the content area's top padding so the pills sit close beneath the divider (no empty cream band). */ .woocommerce-shop #main, .woocommerce-shop #primary, .woocommerce-shop #main .ct-container, .woocommerce-shop #primary .content-area, .woocommerce-shop #primary .woocommerce{ padding-top:0 !important; } /* Tablet + mobile heights. */ @media(max-width:1024px){ .nox-shop-hero{ height:420px; } } @media(max-width:600px){ .nox-shop-hero{ height:330px; } .nox-shop-hero-crumb{ margin-bottom:16px;letter-spacing:var(--ls-eyebrow); } .nox-shop-hero-text{ font-size:15.5px;margin-top:16px; } .nox-shop-hero-cta{ margin-top:22px; } } @media(prefers-reduced-motion:reduce){ .nox-shop-hero-crumb,.nox-shop-hero-title,.nox-shop-hero-text,.nox-shop-hero-cta{ opacity:1;animation:none; } .nox-shop-hero-bg{ will-change:auto; } } /* ============================================================ [8] CATALOGUE grid + chips + result count [centerpiece] Melyon-editorial: NO hairline wireframe. Cards float on the cream page with generous whitespace gutters. Sidebar removed. ============================================================ */ /* Make the shop CONTENT area itself full width + drop the sidebar, so the grid can sit truly edge-to-edge without the fragile 100vw breakout that was overflowing the last column. Scoped to #main so the header/footer containers are untouched. overflow-x:clip is a belt-and-braces guard (sticky-safe, unlike overflow:hidden). */ body.post-type-archive-product, body.tax-product_cat, body.woocommerce-shop{ --container-max-width:100%; --container-width:100%; overflow-x:clip; } .post-type-archive-product .ct-sidebar, .tax-product_cat .ct-sidebar, .woocommerce-shop .ct-sidebar, .post-type-archive-product #right-sidebar, .post-type-archive-product #left-sidebar, .tax-product_cat #right-sidebar, .tax-product_cat #left-sidebar{ display:none !important; } /* Collapse Blocksy's two-column content/sidebar grid to ONE full-width column. The grid lives on #main itself (which carries [data-sidebar]), so a descendant selector missed it — target the element directly and also any [data-sidebar] node, forcing single-column via display:block. */ .post-type-archive-product #main, .tax-product_cat #main, .woocommerce-shop #main, .post-type-archive-product [data-sidebar], .tax-product_cat [data-sidebar], .woocommerce-shop [data-sidebar]{ display:block !important; grid-template-columns:1fr !important; gap:0 !important; } /* Full-width, zero side-padding content wrappers (content only, not header). */ .post-type-archive-product #main, .tax-product_cat #main, .woocommerce-shop #main, .post-type-archive-product #main .ct-container, .tax-product_cat #main .ct-container, .woocommerce-shop #main .ct-container, .post-type-archive-product #primary, .tax-product_cat #primary, .woocommerce-shop #primary, .post-type-archive-product #primary .content-area, .tax-product_cat #primary .content-area, .woocommerce-shop #primary .content-area, .post-type-archive-product #primary .woocommerce, .tax-product_cat #primary .woocommerce, .woocommerce-shop #primary .woocommerce{ width:100% !important;max-width:100% !important; padding-left:0 !important;padding-right:0 !important; margin-left:0 !important;margin-right:0 !important; float:none !important; } /* The shop grid. Melyon-style: full-bleed edge to edge, tight seams. Fills the now full-width content area exactly — a clean 4-up with no overflow. Tiny page inset keeps the outer images off the very edge. */ .post-type-archive-product ul.products, .tax-product_cat ul.products, .woocommerce-shop ul.products{ display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)) !important; column-gap:0 !important; row-gap:0 !important; background:transparent !important;border:0 !important; width:100% !important;max-width:100% !important; margin:0 !important; padding:0 !important;list-style:none; box-sizing:border-box; } /* Category collections read as a curated 3-up — rows complete at the typical 3–6 compounds per field, and each card gets more presence. The full catalogue keeps its 4-up sweep. (Phase 7) */ .tax-product_cat ul.products{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; } /* Homepage featured — full-bleed 4-up, matching the shop catalogue. The grid sits inside the custom front-page .container, so it uses the 100vw breakout to reach the viewport edges while the section heading above stays contained/centred (Melyon pattern). */ .nox-products ul.products{ display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)) !important; column-gap:0 !important; row-gap:0 !important; background:transparent !important;border:0 !important; width:100vw;max-width:100vw !important; margin-left:calc(50% - 50vw) !important; margin-right:calc(50% - 50vw) !important; padding:0 !important;list-style:none;box-sizing:border-box; } /* Let the breakout escape the featured section's wrappers; clip page-level horizontal overflow so it can't cause a sidescroll (sticky-safe). */ .nox-products, .nox-products .container, .nox-products .woocommerce{ overflow:visible !important; } body.home{ overflow-x:clip; } /* Inset the featured card text so it isn't jammed to the screen edge. */ .nox-products .nox-card .nox-card-body, .nox-products .nox-card .nox-card-foot{ padding-left:var(--nox-card-pad-x) !important; padding-right:var(--nox-card-pad-x) !important; } @media(max-width:1180px){ .post-type-archive-product ul.products, .tax-product_cat ul.products, .woocommerce-shop ul.products, .nox-products ul.products{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; row-gap:0 !important; } } @media(max-width:720px){ .post-type-archive-product ul.products, .tax-product_cat ul.products, .woocommerce-shop ul.products, .nox-products ul.products{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; column-gap:0 !important;row-gap:0 !important; } } /* Edge-to-edge shop: the image is full-bleed to the viewport, so inset the text block a touch (matches Melyon — text sits just in from the image edge, never jammed against the screen edge). Homepage featured is contained already, so this is scoped to the shop/archive only. */ .post-type-archive-product .nox-card .nox-card-body, .tax-product_cat .nox-card .nox-card-body, .woocommerce-shop .nox-card .nox-card-body, .post-type-archive-product .nox-card .nox-card-foot, .tax-product_cat .nox-card .nox-card-foot, .woocommerce-shop .nox-card .nox-card-foot{ padding-left:var(--nox-card-pad-x) !important; padding-right:var(--nox-card-pad-x) !important; } /* ---------- Shop toolbar: hide stray page title, result-count on ---------- */ /* hide the stray shop / category-archive page title banner */ .woocommerce-shop .page-title,.woocommerce-shop .ct-page-title, .woocommerce-shop .entry-header,.woocommerce-shop .woocommerce-products-header, .woocommerce-shop h1.page-title, .tax-product_cat .page-title, .tax-product_cat .ct-page-title, .tax-product_cat .entry-header, .tax-product_cat .woocommerce-products-header, .tax-product_cat .woocommerce-products-header__title, .archive.woocommerce .page-title, body.archive.tax-product_cat .ct-page-title{ display:none !important; } /* collapse the pale hero band Blocksy draws behind it on archives */ .tax-product_cat .ct-banner, .tax-product_cat .hero-section, .archive.woocommerce .ct-banner{ display:none !important; } /* prototype shop has no sort control */ .woocommerce .woocommerce-ordering{ float:none;margin:0;display:none !important; } /* ---------- Filter chips + results bar ---------- Ported from the old file's final rounded-pill rules (easing tokenised). Rounded pills, gold hover, ink active; quiet uppercase result count. */ .nox-chips{ display:flex !important;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center; max-width:1680px;margin:24px auto 20px !important;padding:0 clamp(16px,4vw,40px); } .nox-chips a, .nox-chip{ border:1px solid var(--line) !important;border-radius:0 !important;background:transparent !important; padding:10px 20px !important; font-family:var(--font-sans) !important;font-size:12px !important;font-weight:500 !important; letter-spacing:.06em !important;color:var(--ink-mid) !important;text-decoration:none;line-height:1; transition:color var(--dur-fast) ease, border-color var(--dur-fast) ease, background var(--dur-fast) ease, transform var(--dur-fast) var(--ease) !important; } .nox-chips a:hover, .nox-chip:hover{ border-color:var(--gold) !important;color:var(--ink) !important;transform:translateY(-1px); } .nox-chips a.active, .nox-chip.is-active, .nox-chip.active{ background:var(--ink) !important;color:var(--bg) !important;border-color:var(--ink) !important; } .nox-chips .rc-eyebrow{ border:0 !important;padding:0 6px 0 0 !important;background:none !important; font-family:var(--font-sans) !important;font-size:10.5px !important;font-weight:500 !important; text-transform:uppercase !important;letter-spacing:var(--ls-eyebrow) !important;color:var(--ink-light) !important; } /* Results count — quiet uppercase label above the grid (beats Blocksy's blue). */ .woocommerce .woocommerce-result-count, .woocommerce-shop .woocommerce-result-count, .tax-product_cat .woocommerce-result-count{ display:block !important;float:none !important;text-align:center; max-width:1680px;margin:0 auto 28px !important;padding:0 clamp(16px,4vw,40px); font-family:var(--font-sans) !important;font-size:11px !important;font-weight:500 !important; text-transform:uppercase !important;letter-spacing:var(--ls-eyebrow) !important;color:var(--ink-light) !important; } /* First-row reveal — the product grid fades in + rises ~10px once as it enters the viewport (420ms, premium easing), so the catalogue flows out of the hero rather than snapping in. Hidden only when JS is present; the observer in nox.js toggles .is-in (once). */ .nox-js .woocommerce-shop ul.products, .nox-js .tax-product_cat ul.products, .nox-js .post-type-archive-product ul.products{ opacity:0;transform:translateY(10px); transition:opacity .42s var(--ease-lux),transform .42s var(--ease-lux); } .woocommerce-shop ul.products.is-in, .tax-product_cat ul.products.is-in, .post-type-archive-product ul.products.is-in{ opacity:1;transform:none; } @media(prefers-reduced-motion:reduce){ .nox-js .woocommerce-shop ul.products, .nox-js .tax-product_cat ul.products, .nox-js .post-type-archive-product ul.products{ opacity:1;transform:none;transition:none; } } /* Mobile: a "Filter" button collapses the chips into a menu (JS-driven). */ .nox-filter-toggle{ display:none; } @media(max-width:768px){ .nox-filter-toggle{ display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%; background:transparent;border:1px solid var(--ink);border-radius:0 !important;cursor:pointer; font-family:var(--font-sans);font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:var(--ls-wide); color:var(--ink);padding:14px 18px;margin:0 0 16px; } .nox-filter-toggle svg{ transition:transform var(--dur-fast) ease; } .nox-filter-toggle.is-open svg{ transform:rotate(180deg); } nav.nox-chips{ display:none !important; } nav.nox-chips.nox-chips-open{ display:flex !important;flex-direction:column;align-items:stretch;gap:0; margin:0 0 20px;border:1px solid var(--line);border-radius:0 !important;overflow:hidden; } nav.nox-chips.nox-chips-open .nox-chip{ border:none !important;border-bottom:1px solid var(--line-soft) !important;border-radius:0 !important; text-align:left;padding:14px 18px !important;width:100%; } nav.nox-chips.nox-chips-open .nox-chip:first-child{ border-radius:0 !important; } nav.nox-chips.nox-chips-open .nox-chip:last-child{ border-radius:0 !important;border-bottom:none !important; } } /* ---------- Catalogue pagination — editorial, matches the system ---------- WooCommerce/Blocksy ship a default (often blue) pager; NOX restyles it to squared cream tiles with ink-active + bronze hover, sitting below the grid. !important beats Blocksy's grouped button/link rules. */ .woocommerce nav.woocommerce-pagination{ clear:both;text-align:center; max-width:1680px;margin:72px auto 8px !important;padding:0 clamp(16px,4vw,40px); } .woocommerce nav.woocommerce-pagination ul{ display:inline-flex !important;flex-wrap:wrap;justify-content:center;gap:8px; border:0 !important;margin:0 !important;padding:0 !important; } .woocommerce nav.woocommerce-pagination ul li{ border:0 !important;margin:0 !important;padding:0 !important;overflow:visible !important;display:inline-flex; } .woocommerce nav.woocommerce-pagination ul li a.page-numbers, .woocommerce nav.woocommerce-pagination ul li span.page-numbers{ min-width:46px;height:46px;display:inline-flex !important;align-items:center;justify-content:center; padding:0 8px !important;margin:0 !important; border:1px solid var(--line) !important;background:transparent !important;border-radius:0 !important; font-family:var(--font-sans) !important;font-size:13px !important;font-weight:500 !important; letter-spacing:.04em !important;color:var(--ink-mid) !important;text-decoration:none !important;line-height:1; transition:color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease) !important; } .woocommerce nav.woocommerce-pagination ul li a.page-numbers:hover, .woocommerce nav.woocommerce-pagination ul li a.page-numbers:focus{ border-color:var(--gold) !important;color:var(--ink) !important;background:transparent !important; } .woocommerce nav.woocommerce-pagination ul li span.page-numbers.current{ background:var(--ink) !important;border-color:var(--ink) !important;color:var(--on-dark) !important; } .woocommerce nav.woocommerce-pagination ul li .page-numbers.dots{ border-color:transparent !important;color:var(--ink-light) !important;min-width:20px; } .woocommerce nav.woocommerce-pagination ul li a.next.page-numbers, .woocommerce nav.woocommerce-pagination ul li a.prev.page-numbers{ letter-spacing:.14em !important;text-transform:uppercase !important;font-size:11px !important;padding:0 16px !important; } /* ============================================================ [9] PRODUCT CARD (.nox-card) [centerpiece] Pairs with woocommerce/content-product.php. Resting state is silent: image + eyebrow + name + price. On hover the image zooms/cross-fades, wishlist fades in, dark "Add to bag" bar slides up, price nudges. All motion transform/opacity/filter. ============================================================ */ .woocommerce ul.products li.product.nox-card, .nox-products ul.products li.product.nox-card{ display:flex !important;flex-direction:column; background:transparent !important; border:0 !important;border-radius:0 !important;box-shadow:none !important; padding:0 !important;margin:0 !important;overflow:visible;position:relative; width:auto !important;max-width:none !important;min-width:0 !important; flex:initial !important;float:none !important; } .woocommerce ul.products li.product.nox-card:hover, .nox-products ul.products li.product.nox-card:hover{ transform:none !important;box-shadow:none !important; border-right:1px solid var(--nox-card-divider) !important; /* keep the divider on hover */ border-bottom:1px solid var(--nox-card-divider) !important; background:transparent !important; } /* Whole card is a pointer target; hover feels responsive immediately. */ .nox-card{ cursor:pointer; } /* ---------- Editorial grid system — one continuous gallery ---------- Every product grid (catalogue, homepage, category, search, Explore Similar, Continue Research) is built from .nox-card, so styling it here unifies them all. Cards stay completely FLUSH (no gaps); a single almost- invisible 6% hairline is the only separation. border-box keeps that 1px inside the grid track, so every column — and therefore every image and every product bottom — stays perfectly aligned. No boxes, no shadows. */ :root{ --nox-card-pad-x:clamp(16px,1.2vw,24px); /* consistent info-panel inset */ --nox-card-divider:rgba(26,26,26,.04); /* the near-invisible card divider — felt, not seen */ } /* Match the base card selectors so the divider wins over `border:0 !important`. */ .woocommerce ul.products li.product.nox-card, .nox-products ul.products li.product.nox-card, .nox-card{ box-sizing:border-box !important; border-right:1px solid var(--nox-card-divider) !important; border-bottom:1px solid var(--nox-card-divider) !important; } /* ---------- One clickable surface ---------- The body link stretches over the WHOLE card via ::after, so the image, the info, the price and any whitespace all open the product — no separate "View product" link. The favourite and the CTA bar sit above the overlay (z-index) so they stay independently interactive; the Sale flag lets clicks pass through. */ .nox-card .nox-card-body::after{ content:'';position:absolute;inset:0;z-index:1; } .nox-card .nox-card-actions{ z-index:5 !important; } /* above the stretched link */ .nox-card .nox-card-bag--hover{ z-index:5 !important; } .nox-card .nox-card-flag{ pointer-events:none; } .nox-card, .nox-card .nox-card-media, .nox-card .nox-card-body, .nox-card .nox-card-foot{ cursor:pointer; } /* Media — one confident ratio, funnel-wide. overflow:hidden clips both the zoom and the hidden action bar (which parks below the image edge). */ .nox-card .nox-card-media{ position:relative;overflow:hidden; aspect-ratio:var(--ratio-product); background:var(--bg); /* page cream — the product reads as floating, not framed */ border-radius:var(--radius-none); } /* The photograph sits slightly high in the frame: a calm ~12–18px cream strip beneath it gives the product room to breathe (the shelf). The hover action bar still covers the very bottom, so nothing is lost on hover. */ .nox-card .nox-card-imglink{ position:absolute;inset:0 0 clamp(12px,3.6%,18px) 0;display:block;line-height:0;overflow:hidden; } .nox-card .nox-card-media img{ position:absolute;inset:0; width:100% !important;height:100% !important;object-fit:cover !important;object-position:center; display:block;margin:0 !important;border-radius:0 !important; transition:transform .3s ease-in-out, opacity .3s ease-in-out, filter .3s ease-in-out; will-change:transform,opacity;backface-visibility:hidden; } /* Calm ~102% zoom — GPU-composited, ease-in-out, no bounce, no reflow. */ .nox-card:hover .nox-card-media img{ transform:scale(1.02); } /* Dual-image swap when a second photo is present (.has-swap on the

). */ .nox-card .nox-img-secondary{ opacity:0; } .nox-card.has-swap:hover .nox-img-primary{ opacity:0; } .nox-card.has-swap:hover .nox-img-secondary{ opacity:1; } /* No 2nd gallery image yet — the duplicated layer gently pushes in on hover (a "closer look") so the card still reacts. Upgrades to a real cross-dissolve automatically once a gallery image is added to the product. */ .nox-card.nox-swap-self:hover .nox-img-secondary{ transform:scale(1.03); } /* Single-image cards with no image at all: brighten instead of swap. */ .nox-card:not(.has-swap):hover .nox-card-media img{ filter:brightness(1.05); } /* On-sale flag — minimal, top-left. */ .nox-card .nox-card-flag{ position:absolute;top:var(--space-sm);left:var(--space-sm);z-index:3; background:var(--ink);color:var(--bg); font-family:var(--font-sans);font-size:10px;font-weight:600; text-transform:uppercase;letter-spacing:var(--ls-wide);padding:5px 10px; } /* Quick actions — Save Research (heart) + Quick Add (+), top-right of the image. Cream disc, ink hairline, ink icon: integrated into the photography, no shadow, no blur, no gold. Hidden at rest on desktop, fading in on hover; permanently shown on touch. */ .nox-card .nox-card-actions{ position:absolute;top:var(--space-sm);right:var(--space-sm);left:auto;bottom:auto;z-index:4; display:flex;flex-direction:column;gap:8px; } .woocommerce ul.products li.product .nox-card-action, .nox-card .nox-card-action{ position:static !important;margin:0 !important; width:38px !important;height:38px !important;border-radius:50% !important;box-sizing:border-box !important; display:grid;place-items:center;padding:0;line-height:0;cursor:pointer; background:var(--bg) !important;border:1px solid var(--ink) !important;color:var(--ink) !important; box-shadow:none !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important; opacity:0;transform:translateY(-4px); transition:opacity .2s var(--ease-lux),transform .2s var(--ease-lux), background var(--dur-fast) var(--ease-lux),color var(--dur-fast) var(--ease-lux); } /* Reveal on hover/focus — must out-specify the base `.woocommerce ul.products li.product .nox-card-action` (0,4,2) rule, or opacity:0 wins and the buttons never appear. Match that full prefix so the reveal always beats it. */ .woocommerce ul.products li.product.nox-card:hover .nox-card-action, .woocommerce ul.products li.product.nox-card:focus-within .nox-card-action, .nox-products ul.products li.product.nox-card:hover .nox-card-action, .nox-products ul.products li.product.nox-card:focus-within .nox-card-action, .nox-card:hover .nox-card-action, .nox-card:focus-within .nox-card-action{ opacity:1 !important;transform:none !important; } /* Desktop hover — lift to white, keep the ink icon/border (200ms). No invert. */ .nox-card .nox-card-action:hover, .nox-card .nox-card-action:focus-visible{ background:#fff !important;color:var(--ink) !important;outline:none; } /* Quick Add "+" flashes to a checkmark for a moment after a successful add. */ .nox-card .nox-card-quickadd.is-added{ background:var(--ink) !important;color:var(--bg) !important; } /* ---------- Mobile (≤768px): lighter, secondary quick actions ---------- Smaller discs, thin charcoal hairline, translucent-white + blur so they read without overpowering the photography. The image stays the hero. */ @media(max-width:768px){ .nox-card .nox-card-actions{ top:10px;right:10px;gap:6px; } .woocommerce ul.products li.product .nox-card-action, .nox-card .nox-card-action{ width:26px !important;height:26px !important;border-width:1px !important; background:rgba(255,255,255,.9) !important; -webkit-backdrop-filter:blur(6px) !important;backdrop-filter:blur(6px) !important; opacity:1 !important;transform:none !important; /* always visible on mobile (no reliance on hover:none) */ } .nox-card .nox-card-action svg{ width:12px !important;height:12px !important; } /* saved heart stays a filled ink disc even on the translucent base */ .nox-card .nox-card-fav.is-saved{ background:var(--ink) !important;color:var(--bg) !important; } } .nox-card .nox-card-action svg{ width:16px !important;height:16px !important;stroke:currentColor;fill:none;display:block; } /* Saved — filled ink heart, always visible (one-tap to remove). No gold. */ .nox-card .nox-card-fav.is-saved{ opacity:1 !important;transform:none !important;background:var(--ink) !important;color:var(--bg) !important; } .nox-card .nox-card-fav.is-saved svg{ fill:currentColor !important; } /* ---------- Action bar — luxury slide-up (COS / Aesop / Melyon feel) ---------- Rendered twice by content-product.php: .nox-card-bag--hover overlay over the image bottom (desktop hover) .nox-card-bag--mobile permanent bar beneath the info (touch, see below) Near-black #1a1a1a on cream var(--bg), 16px / 500 / 0.2px, ~54px tall, no radius. Reveal: translateY(100%)→0 + opacity 0→1 over 300ms var(--ease-lux). Transform + opacity only — no bounce, no reflow. */ /* Shared visual props. NOTE: display is deliberately NOT set here — each variant owns its own display so the mobile bar can stay hidden on desktop without a specificity fight against this high-specificity selector. */ .woocommerce ul.products li.product.nox-card .nox-card-bag, .nox-card .nox-card-bag{ align-items:center;justify-content:center;gap:10px; min-height:54px !important;padding:0 20px !important;margin:0 !important; background:#1a1a1a !important;color:var(--bg) !important; border:0 !important;border-radius:0 !important;box-shadow:none !important; font-family:var(--font-sans) !important;font-size:16px !important;font-weight:500 !important; letter-spacing:.2px !important;text-transform:none !important; text-decoration:none;text-align:center;line-height:1.2;white-space:nowrap;cursor:pointer; } /* Desktop overlay bar — always flex, parked below the image, slides up on hover. */ .nox-card .nox-card-bag--hover{ display:flex !important; position:absolute !important;left:0;right:0;bottom:0;z-index:4; transform:translateY(100%);opacity:0; transition:transform .3s var(--ease-lux),opacity .3s var(--ease-lux); will-change:transform,opacity;backface-visibility:hidden; } /* The CTA reveals ONLY while the pointer is over the card, or when the bar itself is keyboard-focused. It is deliberately NOT tied to .nox-card:focus-within, so focusing another control (e.g. clicking the favourite button, which retains focus) can never leave the "Select options" bar stuck open. */ .nox-card:hover .nox-card-bag--hover, .nox-card .nox-card-bag--hover:focus-visible{ transform:translateY(0);opacity:1; } .nox-card .nox-card-bag--hover:hover{ background:#000 !important; } /* ---------- CTA containment — every card is its own positioning context ---------- Guarantees the hover CTA can ONLY ever fill its own card and can never bleed into a neighbour, on EVERY WooCommerce loop (shop, category, related, Explore Similar, homepage, search). Each card is position:relative; each media clips; the bar is pinned to the media's four inner edges with max-width:100%. All !important so no ancestor / plugin can shift the containing block. */ .woocommerce ul.products li.product.nox-card, .nox-products ul.products li.product.nox-card, .nox-card{ position:relative !important; } .nox-card .nox-card-media{ position:relative !important;overflow:hidden !important; } .nox-card .nox-card-bag--hover{ position:absolute !important;left:0 !important;right:0 !important;bottom:0 !important;top:auto !important; width:auto !important;max-width:100% !important;box-sizing:border-box !important; } /* Mobile permanent bar — hidden on desktop (shown in the touch query). */ .nox-card .nox-card-bag--mobile{ display:none !important; } /* Price segment + slash separator inside the bar. */ .nox-card .nox-card-bag .nox-bag-price{ opacity:.85; } .nox-card .nox-card-bag .nox-bag-sep{ opacity:.5; } /* AJAX loading + Woo's echoed "View cart" link. */ .nox-card .nox-card-bag.loading{ opacity:1 !important;color:rgba(244,241,236,.5) !important; } .nox-card a.added_to_cart{ display:none !important; } /* SOLD OUT — muted, non-interactive, always shown flat; hover disabled. */ .nox-card .nox-card-bag.is-soldout{ background:var(--line-soft) !important;color:var(--ink-light) !important;cursor:not-allowed; font-size:12px !important;font-weight:600 !important;letter-spacing:.16em !important;text-transform:uppercase !important; } .nox-card .nox-card-bag--hover.is-soldout{ transform:translateY(0) !important;opacity:1 !important; } .nox-card.nox-soldout:hover .nox-card-media img{ transform:none !important; } /* Info block — typography-led, aligned to the image edge, generous air. */ .nox-card .nox-card-body{ display:block;padding:var(--space-lg) var(--nox-card-pad-x) 0;text-decoration:none; } /* Museum-accession marker on the card — a very quiet bronze identifier above the category eyebrow (Master §1). Identifier, not a claim. */ .woocommerce ul.products li.product.nox-card .pc-accession, .nox-card .pc-accession{ display:block;padding:0 !important;margin:0 0 6px !important; font-family:var(--font-sans);font-size:9.5px;font-weight:600; text-transform:uppercase;letter-spacing:.18em;color:var(--nox-bronze,#9a7b4f); } .nox-card .pc-accession{ transition:color var(--dur-fast) var(--ease); } .woocommerce ul.products li.product.nox-card .pc-cat, .nox-card .pc-cat{ display:block;padding:0 !important;margin:0 0 var(--space-xs) !important; font-family:var(--font-sans);font-size:var(--fs-eyebrow);font-weight:600; text-transform:uppercase;letter-spacing:var(--ls-eyebrow);color:var(--ink-light); } .woocommerce ul.products li.product.nox-card .woocommerce-loop-product__title, .nox-card .woocommerce-loop-product__title{ padding:0 !important;margin:0 0 var(--space-xs) !important; font-family:var(--font-serif);font-weight:400;font-size:var(--fs-product-title); line-height:var(--lh-snug);letter-spacing:var(--ls-heading);color:var(--ink); } .woocommerce ul.products li.product.nox-card .pc-sub, .nox-card .pc-sub{ display:block;padding:0 !important;margin:0 0 var(--space-3xs) !important; font-family:var(--font-sans);font-size:var(--fs-caption);font-weight:400; letter-spacing:.01em;color:var(--ink-mid); } .nox-card .nox-card-dose{ display:block;font-family:var(--font-sans);font-size:var(--fs-caption);font-weight:400; color:var(--ink-light);letter-spacing:.01em; } /* Hover — a touch more caption contrast (same ink family, no colour, no gold). */ .nox-card .pc-cat, .nox-card .pc-sub, .nox-card .nox-card-dose{ transition:color var(--dur-fast) var(--ease); } .nox-card:hover .pc-cat{ color:var(--ink-mid); } .nox-card:hover .pc-sub{ color:var(--ink-soft); } .nox-card:hover .nox-card-dose{ color:var(--ink-mid); } /* Price — serif, small, last. Rigid: the info block never moves on hover. Bottom padding gives the caption a clean band now the grid rows have no gap (the caption is the only thing between one image and the next). */ .nox-card .nox-card-foot{ position:relative;padding:var(--space-md) var(--nox-card-pad-x) var(--space-lg);margin-top:auto; } /* Editorial arrow — slides in from the right on hover, aligned to the price baseline. Motion is opacity + a small translate only (typography never moves). */ .nox-card .nox-card-foot::after{ content:'\2192';position:absolute;right:var(--nox-card-pad-x);top:var(--space-md); font-family:var(--font-sans);font-size:15px;line-height:1.1;color:var(--ink-mid); opacity:0;transform:translateX(6px);pointer-events:none; transition:opacity var(--dur-fast) var(--ease-lux),transform var(--dur-fast) var(--ease-lux); } .nox-card:hover .nox-card-foot::after, .nox-card:focus-within .nox-card-foot::after{ opacity:1;transform:translateX(0); } .woocommerce ul.products li.product.nox-card .price, .nox-card .price{ margin:0 !important;padding:0 !important;border:0 !important; font-family:var(--font-serif);font-weight:500;font-size:1.25rem;color:var(--ink);line-height:1.1; display:inline-block; } .nox-card .price .from{ font-family:var(--font-sans);font-size:10px;font-weight:600; letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--ink-light); margin-right:7px;vertical-align:middle; } .nox-card .price del{ color:var(--ink-light);font-size:.9375rem;margin-right:8px; } .nox-card .price ins{ text-decoration:none; } /* Touch: no hover animation. Drop the overlay bar and reveal a PERMANENT full-width Add-to-Bag bar beneath the info instead — same premium styling. The image no longer zooms on tap. Wishlist stays visible. */ @media(hover:none){ .nox-card:hover .nox-card-media img{ transform:none; } /* no fake hover on touch — always show the primary image, never the swap */ .nox-card.has-swap:hover .nox-img-primary{ opacity:1; } .nox-card.has-swap:hover .nox-img-secondary{ opacity:0; } .nox-card .nox-card-bag--hover{ display:none !important; } .nox-card .nox-card-bag--mobile{ display:flex !important;position:relative !important;z-index:5 !important; /* above the whole-card link */ transform:none !important;opacity:1 !important;margin-top:14px !important; } /* touch has no hover — show the quick actions permanently, a touch smaller */ /* touch: show permanently — SIZE is handled by the ≤768px block so wide touch laptops keep the desktop 38px disc. */ .nox-card .nox-card-action{ opacity:1 !important;transform:none !important; } } /* Mobile typography. */ @media(max-width:720px){ .nox-card .nox-card-body{ padding:var(--space-sm) var(--nox-card-pad-x) 0; } .woocommerce ul.products li.product.nox-card .woocommerce-loop-product__title, .nox-card .woocommerce-loop-product__title{ font-size:1.1875rem;margin-bottom:var(--space-3xs) !important; } .woocommerce ul.products li.product.nox-card .pc-cat, .nox-card .pc-cat{ font-size:10px;letter-spacing:.18em;margin-bottom:var(--space-2xs) !important; } .woocommerce ul.products li.product.nox-card .pc-sub, .nox-card .pc-sub, .nox-card .nox-card-dose{ font-size:11px; } .nox-card .nox-card-foot{ padding:var(--space-xs) var(--nox-card-pad-x) var(--space-md); } .woocommerce ul.products li.product.nox-card .price, .nox-card .price{ font-size:1.0625rem; } /* Action bar keeps its premium 16px styling on mobile (no shrink). */ .nox-card .nox-card-actions{ top:10px;right:10px;gap:7px; } } /* ============================================================ [9b] EDITORIAL CATALOGUE BLOCKS ------------------------------------------------------------ CMS-managed editorial images (inc/editorial.php) injected between products as spanning grid items to create a magazine rhythm: .nox-ed-landscape → spans 2 columns (row-2 slot) .nox-ed-fullwidth → spans 3 columns (row-4 banner) .nox-ed-portrait → spans 1 column The image fills the block (object-fit:cover) and the block stretches to the height of the product row beside it, so edges align perfectly. No border, no shadow, no radius. Reveal: fade + rise on scroll-in. ============================================================ */ .woocommerce ul.products li.nox-ed-block, .nox-products ul.products li.nox-ed-block{ position:relative;overflow:hidden;list-style:none; margin:0 !important;padding:0 !important;border:0 !important;border-radius:0 !important;box-shadow:none !important; background:var(--bg-warm); align-self:stretch;min-width:0;width:auto !important;max-width:none !important;float:none !important; } /* Column spans (desktop, 4-col grid). */ .woocommerce ul.products li.nox-ed-landscape, .nox-products ul.products li.nox-ed-landscape{ grid-column:span 2; } .woocommerce ul.products li.nox-ed-fullwidth, .nox-products ul.products li.nox-ed-fullwidth{ grid-column:span 3; } .woocommerce ul.products li.nox-ed-portrait, .nox-products ul.products li.nox-ed-portrait{ grid-column:span 1; } /* Media — absolutely fills the block so the block height follows the row. */ .nox-ed-block .nox-ed-media{ position:absolute;inset:0;overflow:hidden; } .nox-ed-block .nox-ed-img{ width:100% !important;height:100% !important;object-fit:cover !important;object-position:center; display:block;margin:0 !important;border:0 !important;border-radius:0 !important; transform:scale(1);transform-origin:center;will-change:transform; transition:transform var(--dur-slow) var(--ease-lux),filter var(--dur-slow) var(--ease-lux); } /* PURE PHOTOGRAPHY — no overlay, text, label, CTA or readability scrim. Hover is a very subtle 1.02× zoom + a touch of contrast/clarity (450ms), clipped by the block so no surrounding layout moves. */ .nox-ed-block:hover .nox-ed-img{ transform:scale(1.02);filter:contrast(1.04) saturate(1.03); } /* Whisper-thin warm tint for colour consistency across images — extremely subtle, NOT a readability gradient. */ .nox-ed-block .nox-ed-media::after{ content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:rgba(26,20,12,.04); } /* Built-in placeholder panels — a pure warm gradient (no text) until real photography is uploaded via the Editorial gallery. */ .nox-ed-default.nox-ed-tone-light{ background:radial-gradient(120% 130% at 78% 18%,#efe7d6,#ddd0bb 55%,#c9b79c); } .nox-ed-default.nox-ed-tone-dark{ background:radial-gradient(120% 160% at 20% 30%,#3a352d,#241f19 60%,#171310); } /* Scroll reveal — hidden only when JS is present (no-JS stays visible). */ .nox-js .nox-ed-block{ opacity:0;transform:translateY(14px); transition:opacity .4s var(--ease-lux),transform .4s var(--ease-lux); } .nox-js .nox-ed-block.is-in{ opacity:1;transform:none; } @media(prefers-reduced-motion:reduce){ .nox-js .nox-ed-block{ opacity:1;transform:none;transition:none; } } /* Tablet — spans adapt to the 3-col grid (banner becomes full width). */ @media(max-width:1180px){ .woocommerce ul.products li.nox-ed-landscape, .nox-products ul.products li.nox-ed-landscape{ grid-column:span 2; } .woocommerce ul.products li.nox-ed-fullwidth, .nox-products ul.products li.nox-ed-fullwidth{ grid-column:1 / -1; } } /* Mobile — one product per row; editorial images become full-width bands. */ @media(max-width:720px){ .post-type-archive-product ul.products, .tax-product_cat ul.products, .woocommerce-shop ul.products, .nox-products ul.products{ grid-template-columns:1fr !important; } .woocommerce ul.products li.nox-ed-block, .nox-products ul.products li.nox-ed-block{ grid-column:1 / -1 !important;aspect-ratio:3/2;align-self:auto; } } /* ============================================================ [10] FAVOURITES — card heart, toast, drawer, mobile heart Card hearts come from content-product.php (.pc-fav / .nox-card-fav); the .pc-fav standalone styling is the legacy card-heart fallback. ============================================================ */ /* Legacy standalone card heart (.pc-fav without .nox-card-fav) — kept for any non-nox-card loop that still prints .pc-fav. The section-9 rules fully govern hearts inside .nox-card. */ .woocommerce ul.products li.product .pc-fav, .nox-products ul.products li.product .pc-fav{ position:absolute;top:16px;right:16px;z-index:4; width:32px;height:32px;border-radius:50%; background:rgba(255,255,255,.92);border:1px solid var(--line); display:grid;place-items:center;color:var(--ink-mid);cursor:pointer; padding:0;line-height:0; transition:color var(--dur-fast) ease,border-color var(--dur-fast) ease,background var(--dur-fast) ease; } .pc-fav:hover{ color:var(--ink);border-color:var(--ink); } .pc-fav.is-loading{ opacity:.6;pointer-events:none; } /* brief: resolving sizes before the save prompt */ .pc-fav.is-saved{ color:var(--ink);border-color:var(--ink); } .pc-fav.is-saved svg{ fill:var(--ink); } /* (The legacy .pc-tag purity badge was removed in the Phase-1 cleanup — nothing emits it. li.product keeps position:relative for the card heart.) */ .woocommerce ul.products li.product{ position:relative; } /* Toast (nox.js noxToast) */ .nox-toast{ position:fixed;left:50%;bottom:32px; transform:translateX(-50%) translateY(20px); background:var(--ink);color:var(--bg); font-family:var(--font-sans);font-size:12px;font-weight:500; letter-spacing:.08em;text-transform:uppercase; padding:14px 22px;border-radius:0;z-index:200; opacity:0;pointer-events:none; transition:opacity var(--dur-fast) ease,transform var(--dur-fast) ease; } .nox-toast.is-shown{ opacity:1;transform:translateX(-50%) translateY(0); } /* Header favourites trigger + count */ .nox-fav-trigger{ position:relative;display:inline-flex;align-items:center;justify-content:center; width:40px;height:40px;background:none;border:none;cursor:pointer; color:var(--ink-mid);margin-left:14px;padding:0;line-height:0; transition:color var(--dur-fast) ease; } .nox-fav-trigger:hover{ color:var(--ink); } .nox-fav-trigger svg{ width:18px;height:18px; } /* saved-research count — position only; editorial appearance is shared above */ .nox-fav-count{ position:absolute;top:8px;right:8px;pointer-events:none; } /* Favourites drawer + backdrop */ .nox-fav-backdrop{ position:fixed;inset:0;background:rgba(26,26,26,.4); opacity:0;visibility:hidden;z-index:120; transition:opacity var(--dur) ease,visibility 0s linear var(--dur); } .nox-fav-backdrop.is-open{ opacity:1;visibility:visible;transition:opacity var(--dur) ease; } /* ============================================================ RESEARCH COLLECTION drawer — a curated saved-compound workspace. Editorial header + collection summary + spacious compound cards + recommended research + footer. NOX palette only (no gold, no shadow, no gradient). JS renders the body (nox.js favRenderDrawer). ============================================================ */ .nox-fav-drawer{ position:fixed;top:0;right:0;bottom:0;width:min(480px,100vw); background:var(--bg);border-left:1px solid var(--line); transform:translateX(100%);transition:transform .45s var(--ease-soft); z-index:130;display:flex;flex-direction:column; } .nox-fav-drawer.is-open{ transform:translateX(0); } .nox-fav-close{ position:absolute;top:20px;right:22px;z-index:2; background:none;border:0;font-size:26px;line-height:1;color:var(--ink-light);cursor:pointer; width:34px;height:34px;display:flex;align-items:center;justify-content:center; transition:color var(--dur-fast) var(--ease-lux); } .nox-fav-close:hover{ color:var(--ink); } .nox-fav-body{ flex:1;overflow-y:auto;overflow-x:hidden; } /* header */ .nox-rc-head{ padding:56px 34px 0; } .nox-rc-eyebrow{ display:block;font-family:var(--font-sans);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:var(--ls-eyebrow-wide);color:var(--ink-light);margin-bottom:16px; } .nox-rc-title{ font-family:var(--font-serif);font-weight:300;font-size:28px;line-height:1.1;letter-spacing:var(--ls-heading);color:var(--ink);margin:0 0 12px; } .nox-rc-lead{ font-family:var(--font-sans);font-size:13.5px;line-height:1.6;color:var(--ink-mid);margin:0;max-width:34ch; } /* collection summary (informational, not checkout) */ .nox-rc-summary{ display:flex;margin:32px 34px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line); } .nox-rc-stat{ flex:1;display:flex;flex-direction:column;gap:9px;padding:22px 0; } .nox-rc-stat + .nox-rc-stat{ padding-left:26px;border-left:1px solid var(--line); } .nox-rc-stat-label{ font-family:var(--font-sans);font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:var(--ls-eyebrow);color:var(--ink-light); } .nox-rc-stat-value{ font-family:var(--font-serif);font-weight:300;font-size:27px;line-height:1;letter-spacing:-.01em;color:var(--ink); } /* saved compound cards — spacious, editorial */ .nox-rc-list{ padding:8px 34px 0; } .nox-rc-card{ display:flex;gap:22px;align-items:flex-start;padding:30px 0;border-bottom:1px solid var(--line-soft); } .nox-rc-card-media{ flex:0 0 100px;width:100px;aspect-ratio:var(--ratio-product);overflow:hidden;background:var(--bg-card);display:block;transition:transform var(--dur-fast) var(--ease-lux); } .nox-rc-card-media img{ width:100%;height:100%;object-fit:cover;object-position:center;display:block;transition:transform var(--dur) var(--ease-lux); } .nox-rc-card:hover .nox-rc-card-media{ transform:translateY(-3px); } .nox-rc-card:hover .nox-rc-card-media img{ transform:scale(1.04); } .nox-rc-card-body{ flex:1;min-width:0;display:flex;flex-direction:column; } .nox-rc-card-cat{ font-family:var(--font-sans);font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:var(--ls-eyebrow);color:var(--ink-light);margin-bottom:8px; } .nox-rc-card-name{ font-family:var(--font-serif);font-weight:400;font-size:19px;line-height:1.2;letter-spacing:var(--ls-heading);color:var(--ink);text-decoration:none; } .nox-rc-card-name:hover{ color:var(--ink-mid); } .nox-rc-card-specs{ display:flex;align-items:baseline;gap:14px;margin-top:9px; } .nox-rc-card-strength{ font-family:var(--font-sans);font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-mid); } .nox-rc-card-price{ font-family:var(--font-serif);font-size:15px;color:var(--ink); } .nox-rc-card-saved{ font-family:var(--font-sans);font-size:11px;color:var(--ink-light);margin-top:4px; } .nox-rc-card-actions{ display:flex;align-items:center;gap:22px;margin-top:18px; } .nox-rc-add{ display:inline-flex;align-items:center;gap:7px;background:none;border:0;padding:0;cursor:pointer;font-family:var(--font-sans);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:var(--ls-wide);color:var(--ink); } .nox-rc-add span{ display:inline-block;transition:transform var(--dur-fast) var(--ease-lux); } .nox-rc-add:hover span{ transform:translateX(4px); } .nox-rc-remove{ background:none;border:0;padding:0;cursor:pointer;font-family:var(--font-sans);font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-light);transition:color var(--dur-fast) var(--ease-lux); } .nox-rc-remove:hover{ color:var(--ink); } /* empty state */ .nox-rc-empty{ padding:24px 34px 44px; } /* recommended research — Store-API mini cards */ .nox-rc-reco{ padding:34px 34px 0;margin-top:10px;border-top:1px solid var(--line); } .nox-rc-reco-label{ display:block;font-family:var(--font-sans);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:var(--ls-eyebrow);color:var(--ink-light);margin-bottom:20px; } .nox-rc-reco-grid{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px; } .nox-rc-reco-card{ display:flex;flex-direction:column;gap:9px;text-decoration:none; } .nox-rc-reco-media{ aspect-ratio:var(--ratio-product);overflow:hidden;background:var(--bg-card);display:block; } .nox-rc-reco-media img{ width:100%;height:100%;object-fit:cover;object-position:center;display:block;transition:transform var(--dur) var(--ease-lux); } .nox-rc-reco-card:hover .nox-rc-reco-media img{ transform:scale(1.04); } .nox-rc-reco-name{ font-family:var(--font-serif);letter-spacing:var(--ls-heading);font-size:13px;line-height:1.25;color:var(--ink); } .nox-rc-reco-price{ font-family:var(--font-sans);font-size:11.5px;color:var(--ink-mid); } /* footer */ .nox-rc-foot{ display:flex;flex-direction:column;gap:16px;padding:34px 34px 40px; } .nox-rc-foot-link{ display:inline-flex;align-items:center;gap:8px;font-family:var(--font-sans);font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:var(--ls-wide);color:var(--ink);text-decoration:none; } .nox-rc-foot-link span{ display:inline-block;transition:transform var(--dur-fast) var(--ease-lux); } .nox-rc-foot-link:hover span{ transform:translateX(4px); } /* account page saved-empty link (retained) */ .nox-saved-empty-link{ display:inline-block;margin-top:14px;font-family:var(--font-sans);font-size:12px;font-weight:500; text-transform:uppercase;letter-spacing:var(--ls-wide);color:var(--ink);text-decoration:none; border-bottom:1px solid var(--line-strong);padding-bottom:3px; transition:color var(--dur-fast) var(--ease-lux),border-color var(--dur-fast) var(--ease-lux); } .nox-saved-empty-link:hover{ color:var(--ink-mid);border-color:var(--ink); } /* micro-interactions — saved items fade upwards sequentially on open */ .nox-fav-drawer.is-open .nox-rc-card{ animation:noxRcIn .5s var(--ease-lux) both;animation-delay:calc(var(--i) * 55ms); } @keyframes noxRcIn{ from{ opacity:0;transform:translateY(12px); } to{ opacity:1;transform:none; } } @media(prefers-reduced-motion:reduce){ .nox-fav-drawer.is-open .nox-rc-card{ animation:none; } .nox-rc-card-media,.nox-rc-card-media img,.nox-rc-reco-media img{ transition:none; } } /* responsive */ @media(max-width:520px){ .nox-fav-drawer{ width:100vw; } .nox-rc-head{ padding:52px 22px 0; } .nox-rc-summary{ margin-inline:22px; } .nox-rc-list,.nox-rc-reco,.nox-rc-foot,.nox-rc-empty{ padding-inline:22px; } .nox-rc-card-actions{ gap:18px; } .nox-rc-add,.nox-rc-remove{ min-height:44px; } /* thumb-friendly targets */ .nox-rc-reco-grid{ gap:10px; } } /* PDP purchase secondary row — WhatsApp only (Save Research moved to the header). */ .pdp-secondary{ display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:16px; } /* Product header — the title and the Save Research pill sit side by side, the pill VERTICALLY CENTRED to the title with a ~28px gap after it. The row wraps, so a title long enough to fill the column pushes the pill onto its own line beneath rather than ever overlapping. Left-aligned to the content column; no absolute/fixed positioning, no negative margins. The pill is deliberately short and quiet so the heading stays the focal point. */ .pdp-title-row{ display:flex;flex-wrap:nowrap;align-items:center;justify-content:flex-start; gap:14px; /* pill sits ~14px to the right of the title */ margin:0 0 28px; } .pdp-title-row .pdp-title{ margin:0 !important;flex:0 1 auto; } .pdp-save{ flex:0 0 auto;align-self:center;display:inline-flex;align-items:center;justify-content:center;gap:6px; min-width:110px;box-sizing:border-box; /* fixed footprint: SAVE RESEARCH ↔ SAVED never shifts */ background:var(--bg);border:1px solid var(--line-strong);border-radius:100px; padding:7px 12px;cursor:pointer;white-space:nowrap;box-shadow:none; /* compact + quiet — secondary to the heading */ font-family:var(--font-sans);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em; color:var(--ink); transition:background var(--dur) var(--ease-lux),color var(--dur) var(--ease-lux),border-color var(--dur) var(--ease-lux); } .pdp-save:hover, .pdp-save:focus-visible{ border-color:var(--ink);outline:none; } .pdp-save.is-saved{ background:var(--ink);color:var(--bg);border-color:var(--ink); } .pdp-save-icon{ width:11px;height:11px;display:block;transition:fill var(--dur) var(--ease-lux),stroke var(--dur) var(--ease-lux); } .pdp-save.is-saved .pdp-save-icon{ fill:currentColor; } /* Phones only: allow the pill to drop beneath the title (no room beside it). */ @media(max-width:600px){ .pdp-title-row{ flex-wrap:wrap; } } body.nox-fav-lock{ overflow:hidden; } /* Mobile favourites heart: base hidden state only. All sizing, alignment and the badge live in the unified "Mobile header icon cluster" block below so every icon shares one source of truth. */ .nox-m-fav{ display:none; } /* ============================================================ [11] SEARCH — custom overlay (nox.js) + Blocksy modal restyle ============================================================ */ /* ---------- Blocksy's dark search modal → cream editorial card ---------- */ #search-modal.ct-panel{ background:rgba(26,22,16,.55) !important; } #search-modal .ct-panel-content{ background:var(--bg) !important;color:var(--ink) !important; max-width:680px !important;width:calc(100% - 48px); margin:88px auto 0 !important;align-self:flex-start !important; border:1px solid var(--line);box-shadow:0 30px 80px rgba(0,0,0,.18); max-height:calc(100vh - 140px);border-radius:0; } #search-modal .ct-search-form{ padding:20px 28px; } #search-modal input, #search-modal .ct-search-form input[type="search"]{ font-family:var(--font-serif) !important;font-weight:300 !important;font-size:24px !important; color:var(--ink) !important;background:transparent !important; } #search-modal input::placeholder{ color:var(--ink-light) !important;font-style:italic !important; } #search-modal .ct-toggle-close, #search-modal .ct-toggle-close svg{ color:var(--ink-mid) !important;stroke:currentColor !important; } #search-modal .ct-search-results, #search-modal .ct-search-results *{ color:var(--ink) !important; } /* ============================================================ NOX search overlay — a luxury discovery experience (built by nox.js). Centred cream panel, soft backdrop blur, editorial rows. Not a WooCommerce search plugin. ============================================================ */ .nox-search-overlay{ position:fixed;inset:0;z-index:10000; display:flex;align-items:center;justify-content:center;padding:24px; opacity:0;pointer-events:none;transition:opacity .3s var(--ease-lux); } .nox-search-overlay.open{ opacity:1;pointer-events:auto; } .nox-search-backdrop{ position:absolute;inset:0;background:rgba(26,22,16,.42); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); } /* panel — 700–760px, cream, 6px radius, soft elevation, fade + slide in */ .nox-search-panel{ position:relative;width:min(740px,100%);max-height:min(82vh,760px); background:var(--bg);border:1px solid rgba(0,0,0,.06);border-radius:6px; box-shadow:0 40px 100px rgba(20,16,10,.16); display:flex;flex-direction:column;overflow:hidden; transform:translateY(16px) scale(.99);opacity:0; transition:opacity .32s var(--ease-lux),transform .34s var(--ease-lux); } .nox-search-overlay.open .nox-search-panel{ transform:none;opacity:1; } /* header — the 56px search field + a quiet Close */ .nox-search-head{ display:flex;align-items:center;gap:14px;padding:clamp(20px,3vw,30px) clamp(20px,3vw,34px) 0; } .nox-search-field{ flex:1;min-width:0;display:flex;align-items:center;gap:12px;height:56px;padding:0 16px; background:#fff;border:1px solid rgba(0,0,0,.10);border-radius:4px; transition:border-color .18s ease; } .nox-search-field:focus-within{ border-color:rgba(0,0,0,.30); } .nox-search-icon{ flex:0 0 auto;color:var(--ink-mid); } .nox-search-input{ flex:1;min-width:0;background:none;border:0;outline:none;box-shadow:none; font-family:var(--font-sans);font-size:16px;color:var(--ink);letter-spacing:.01em; } .nox-search-input::placeholder{ color:var(--ink-light);font-style:normal; } .nox-search-clear{ flex:0 0 auto;display:none;align-items:center;justify-content:center; width:26px;height:26px;border:0;background:none;color:var(--ink-light);cursor:pointer; transition:color .18s ease; } .nox-search-clear.is-visible{ display:inline-flex; } .nox-search-clear:hover{ color:var(--ink); } .nox-search-close{ flex:0 0 auto;background:none;border:0;cursor:pointer;padding:6px 2px; font-family:var(--font-sans);font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.16em; color:var(--ink-light);transition:color .18s ease; } .nox-search-close:hover{ color:var(--ink); } /* quick filters — small uppercase editorial labels */ .nox-search-filters{ display:flex;flex-wrap:wrap;gap:6px 20px;padding:clamp(16px,2.2vw,22px) clamp(20px,3vw,34px) 0; } .nox-search-filter{ background:none;border:0;cursor:pointer;padding:4px 0;position:relative; font-family:var(--font-sans);font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.16em; color:var(--ink-light);transition:color .18s ease; } .nox-search-filter:hover{ color:var(--ink-mid); } .nox-search-filter.is-active{ color:var(--ink); } .nox-search-filter.is-active::after{ content:'';position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--ink); } /* body — the editorial result/popular list */ .nox-search-body{ flex:1;overflow-y:auto;overscroll-behavior:contain;padding:clamp(10px,1.8vw,18px) clamp(20px,3vw,34px) clamp(14px,2vw,20px); } .nox-search-empty{ padding:28px 4px;color:var(--ink-light);font-family:var(--font-sans);font-size:14px; } .nox-search-label{ padding:12px 0 4px;font-family:var(--font-sans);font-size:11px;font-weight:500; text-transform:uppercase;letter-spacing:.2em;color:var(--ink-light); } /* rows — premium editorial list, subtle divider, 180ms hover */ .nox-search-row{ position:relative;display:flex;align-items:center;gap:18px; padding:18px 12px;margin:0 -12px;text-decoration:none; border-bottom:1px solid rgba(26,26,26,.06); transition:background .18s var(--ease-lux),transform .18s var(--ease-lux); } .nox-search-body > .nox-search-row:last-of-type{ border-bottom:0; } .nox-search-row:hover, .nox-search-row.is-active{ background:var(--bg-warm);transform:translateX(4px); } /* .is-active = keyboard highlight */ .nox-search-row--result{ padding-top:22px;padding-bottom:22px; } .nox-search-thumb{ width:56px;height:56px;flex:0 0 auto;overflow:hidden; background:var(--bg-warm);border:1px solid rgba(0,0,0,.06);border-radius:3px; } .nox-search-row--result .nox-search-thumb{ width:72px;height:72px; } .nox-search-thumb img{ width:100%;height:100%;object-fit:cover;display:block;transition:transform .18s var(--ease-lux); } .nox-search-row:hover .nox-search-thumb img, .nox-search-row.is-active .nox-search-thumb img{ transform:scale(1.03); } .nox-search-meta{ flex:1;min-width:0;display:flex;flex-direction:column;gap:4px; } .nox-search-tag{ font-family:var(--font-sans);font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.16em;color:var(--ink-light); } .nox-search-name{ font-family:var(--font-serif);font-weight:400;font-size:19px;line-height:1.1;letter-spacing:var(--ls-heading);color:var(--ink); } .nox-search-desc{ font-family:var(--font-sans);font-size:12.5px;line-height:1.45;color:var(--ink-mid);margin-top:1px; } .nox-search-price{ flex:0 0 auto;font-family:var(--font-serif);font-size:15px;color:var(--ink-mid); } .nox-search-arrow{ flex:0 0 auto;font-family:var(--font-sans);font-size:16px;line-height:1;color:var(--ink); opacity:0;transform:translateX(-4px);transition:opacity .18s var(--ease-lux),transform .18s var(--ease-lux); } .nox-search-row:hover .nox-search-arrow, .nox-search-row.is-active .nox-search-arrow{ opacity:1;transform:none; } /* library / no-match discovery links (kept from the working search) */ .nox-search-cats{ display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:20px 0 8px; } .nox-search-cats-label{ font-family:var(--font-sans);font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.2em;color:var(--ink-light);margin-bottom:2px; } .nox-search-cat{ display:inline-flex;align-items:center;gap:8px;text-decoration:none; font-family:var(--font-serif);font-weight:400;font-size:16px;color:var(--ink-mid); transition:color var(--dur-fast) ease; } .nox-search-cat:hover{ color:var(--ink); } .nox-search-cat-all{ margin-top:4px;font-family:var(--font-sans);font-weight:500;text-transform:uppercase;font-size:11px;letter-spacing:.16em;color:var(--ink); } /* footer — View Full Catalogue */ .nox-search-foot{ padding:clamp(16px,2.2vw,22px) clamp(20px,3vw,34px);border-top:1px solid rgba(26,26,26,.08);display:flex;justify-content:center; } .nox-search-all{ display:inline-flex;align-items:center;gap:8px;text-decoration:none; font-family:var(--font-sans);font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.18em;color:var(--ink); transition:opacity .18s ease; } .nox-search-all span{ display:inline-block;transition:transform .18s var(--ease-lux); } .nox-search-all:hover span{ transform:translateX(4px); } body.nox-search-open{ overflow:hidden; } /* entrance stagger — only the browse (Popular) list, so typing never re-animates */ @keyframes noxSearchRowIn{ from{ opacity:0;transform:translateY(8px); } to{ opacity:1;transform:none; } } .nox-search-body.is-browse .nox-search-row{ animation:noxSearchRowIn .34s var(--ease-lux) both; } .nox-search-body.is-browse .nox-search-row:nth-of-type(1){ animation-delay:20ms; } .nox-search-body.is-browse .nox-search-row:nth-of-type(2){ animation-delay:50ms; } .nox-search-body.is-browse .nox-search-row:nth-of-type(3){ animation-delay:80ms; } .nox-search-body.is-browse .nox-search-row:nth-of-type(4){ animation-delay:110ms; } .nox-search-body.is-browse .nox-search-row:nth-of-type(5){ animation-delay:140ms; } .nox-search-body.is-browse .nox-search-row:nth-of-type(6){ animation-delay:170ms; } .nox-search-body.is-browse .nox-search-row:nth-of-type(7){ animation-delay:200ms; } .nox-search-body.is-browse .nox-search-row:nth-of-type(8){ animation-delay:230ms; } /* mobile — full screen */ @media(max-width:600px){ .nox-search-overlay{ padding:0;align-items:stretch;justify-content:stretch; } .nox-search-panel{ width:100%;max-height:100%;height:100%;border:0;border-radius:0; } .nox-search-head{ padding-top:calc(16px + env(safe-area-inset-top,0px)); } .nox-search-name{ font-size:18px; } } @media(prefers-reduced-motion:reduce){ .nox-search-overlay,.nox-search-panel{ transition:opacity .2s ease; } .nox-search-panel{ transform:none; } .nox-search-body.is-browse .nox-search-row{ animation:none; } .nox-search-row:hover,.nox-search-row.is-active{ transform:none; } .nox-search-thumb img,.nox-search-arrow{ transition:opacity .18s ease; } } /* ============================================================ [12] CART / WOO BLOCKS / MINI-CART / CHECKOUT / WhatsApp / BACS Brings the cart, mini-cart, checkout + Woo "Blocks" grids into the NOX scheme (theme defaults are gold buttons / blue prices). ============================================================ */ /* ---------- WooCommerce Blocks product-grid cards ---------- */ .wc-block-grid__product-title{ color:var(--ink) !important;font-family:var(--font-serif) !important;letter-spacing:var(--ls-heading);font-weight:400 !important; } .wc-block-grid__product-price, .wc-block-grid__product .price, .wc-block-grid__product-price bdi, .wc-block-components-product-price{ color:var(--ink) !important;font-family:var(--font-serif) !important; } /* block / components buttons (block add-to-cart, place order, mini-cart) → ink */ .wc-block-grid .wp-block-button__link, .woocommerce .wp-block-button__link, .wc-block-cart__submit-button, .wc-block-components-button:not(.is-link){ background:var(--ink) !important;color:var(--bg) !important; border:1px solid var(--ink) !important;border-radius:0 !important; font-family:var(--font-sans) !important;font-weight:500 !important; text-transform:uppercase !important;letter-spacing:.14em !important; } .wc-block-grid .wp-block-button__link:hover, .woocommerce .wp-block-button__link:hover, .wc-block-cart__submit-button:hover, .wc-block-components-button:not(.is-link):hover{ background:transparent !important;color:var(--ink) !important; } /* the unlabelled square add-to-cart button on "New in store" grid — hide it */ .wp-block-product-new .wp-block-button, .wp-block-product-new .wp-block-button__link{ display:none !important; } /* loop/related product NAME: the

is ink but its inner link was gold / .woocommerce-loop-producttitle a{ color:var(--ink) !important; } / cart-page + line-item product names (were gold) / .woocommerce-cart td.product-name a, .woocommerce-cart-form .product-name a, .wc-block-cart-itemproduct a{ color:var(--ink) !important; } / ---------- Mini-cart dropdown panel (branded) ---------- / .ct-header-cart .ct-cart-content, #woo-cart-panel .ct-panel-inner{ background:var(--bg) !important; color:var(--ink) !important; border:1px solid var(--line) !important; } .ct-header-cart .ct-cart-content .woocommerce-mini-cart-item, .ct-header-cart .ct-cart-content .woocommerce-mini-cart-item , .ct-header-cart .ct-cart-content .woocommerce-mini-carttotal, .ct-header-cart .ct-cart-content .woocommerce-mini-carttotal , .ct-header-cart .ct-cart-content .ct-empty-cart-text, #woo-cart-panel .woocommerce-mini-cart-item , #woo-cart-panel .woocommerce-mini-carttotal { color:var(--ink) !important; } / premium mini-cart layout — "Your research order" panel / .ct-header-cart .ct-cart-content{ background:var(--paper) !important;border:1px solid var(--line) !important; border-radius:0 !important;box-shadow:0 18px 50px rgba(20,16,10,.14) !important; padding:24px 22px !important;width:344px !important; } .ct-header-cart .ct-cart-content .woocommerce-mini-cart::before{ content:"Your research order";display:block; font-family:var(--font-sans);font-size:10px;font-weight:600;text-transform:uppercase; letter-spacing:var(--ls-eyebrow);color:var(--ink-light);margin:0 0 14px;padding-bottom:14px; border-bottom:1px solid var(--line-soft); } .ct-header-cart .woocommerce-mini-cart{ margin:0 !important;padding:0 !important; } .ct-header-cart .woocommerce-mini-cart-item{ display:grid !important;grid-template-columns:48px 1fr auto;gap:14px;align-items:center; padding:14px 0 !important;margin:0 !important;border-bottom:1px solid var(--line-soft) !important; min-width:0; } .ct-header-cart .woocommerce-mini-cart-item .product-data{ min-width:0;overflow-wrap:anywhere; } .ct-header-cart .woocommerce-mini-cart-item .ct-media-container, .ct-header-cart .woocommerce-mini-cart-item img{ width:48px !important;height:48px !important;border:1px solid var(--line);object-fit:cover; } .ct-header-cart .woocommerce-mini-cart-item .product-data{ font-family:var(--font-serif) !important;font-size:15px !important;color:var(--ink) !important;line-height:1.3; } .ct-header-cart .woocommerce-mini-cart-item .quantity{ font-family:var(--font-sans) !important;font-size:12px !important;color:var(--ink-mid) !important; } .ct-header-cart .woocommerce-mini-cart-item a.remove{ color:var(--ink-light) !important;font-size:16px;order:3; } .ct-header-cart .woocommerce-mini-carttotal{ display:flex !important;justify-content:space-between;align-items:baseline; font-family:var(--font-sans) !important;font-size:11px !important;text-transform:uppercase;letter-spacing:.18em; color:var(--ink-mid) !important;padding:16px 0 !important;margin:0 !important;border:0 !important; } .ct-header-cart .woocommerce-mini-carttotal .amount, .ct-header-cart .woocommerce-mini-carttotal strong{ font-family:var(--font-serif) !important;font-size:18px !important;color:var(--ink) !important;letter-spacing:0; } .ct-header-cart .woocommerce-mini-cartbuttons{ display:flex !important;flex-direction:column;gap:10px;margin:0 !important;padding:0 !important; } .ct-header-cart .woocommerce-mini-cartbuttons a{ display:block !important;text-align:center;border-radius:0 !important;width:100%; font-family:var(--font-sans) !important;font-size:11px !important;font-weight:500 !important; text-transform:uppercase !important;letter-spacing:var(--ls-wide) !important;padding:14px !important;margin:0 !important; } .ct-header-cart .woocommerce-mini-cartbuttons a.checkout{ background:var(--ink) !important;color:var(--bg) !important;border:1px solid var(--ink) !important;order:-1; } .ct-header-cart .woocommerce-mini-cartbuttons a.checkout:hover{ background:transparent !important;color:var(--ink) !important; } .ct-header-cart .woocommerce-mini-cartbuttons a:not(.checkout){ background:transparent !important;color:var(--ink) !important;border:1px solid var(--line) !important; } .ct-header-cart .woocommerce-mini-cartbuttons a:not(.checkout):hover{ background:var(--ink) !important;color:var(--bg) !important; } .ct-header-cart .ct-cart-content{ max-height:none !important;overflow:visible !important; } .ct-header-cart .woocommerce-mini-cart{ max-height:min(60vh,440px) !important;overflow-y:auto !important;overflow-x:hidden !important; } / ---------- Checkout / cart / account form polish ---------- / .wc-block-components-text-input input, .wc-block-components-text-input textarea, .wc-block-components-combobox input, .wc-blocks-components-select .wc-blocks-components-selectselect{ border-color:var(--line) !important;border-radius:0 !important; font-family:var(--font-sans) !important;color:var(--ink) !important; } .wc-block-components-text-input input:focus, .wc-block-components-text-input.is-active input, .wc-block-components-combobox.is-active input, .wc-blocks-components-selectselect:focus{ border-color:var(--ink) !important;box-shadow:0 0 0 1px var(--ink) !important;outline:none !important; } .wc-block-components-text-input label, .wc-block-components-combobox label{ color:var(--ink-light) !important;font-family:var(--font-sans) !important; } .wc-block-components-text-input.is-active label{ color:var(--ink-mid) !important; } .wc-block-components-checkout-steptitle{ color:var(--ink) !important; } .wc-block-components-radio-controloption{ border-color:var(--line) !important; } .wc-block-components-radio-controloption--checked-option-highlighted{ border-color:var(--ink) !important; } .wc-block-components-radio-control input[type="radio"], .wc-block-checkout input[type="checkbox"], .wc-block-components-checkboxinput{ accent-color:var(--gold) !important; } .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce-account input.input-text, .woocommerce #customer_login input.input-text, .woocommerce .woocommerce-Address input{ border:1px solid var(--line) !important;border-radius:0 !important; padding:13px 15px !important;font-family:var(--font-sans) !important;font-size:14px !important; color:var(--ink) !important;background:var(--paper) !important; } .woocommerce form .form-row input.input-text:focus, .woocommerce-account input.input-text:focus{ border-color:var(--ink) !important;outline:none !important;box-shadow:0 0 0 1px var(--ink) !important; } .woocommerce form .form-row label, .woocommerce-account label{ font-family:var(--font-sans) !important;color:var(--ink-mid) !important; font-size:12px !important;letter-spacing:.04em !important; } .woocommerce-account .woocommerce-MyAccount-navigation a{ font-family:var(--font-sans) !important;color:var(--ink-mid) !important; } .woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{ color:var(--ink) !important; } .woocommerce form input[type="checkbox"], .woocommerce-account input[type="checkbox"]{ accent-color:var(--gold) !important; } / Account area: neutral ink form controls — no gold highlight. / body.woocommerce-account input[type="checkbox"], body.woocommerce-account input[type="radio"]{ accent-color:var(--ink) !important; } / Any keyboard focus ring in the account workspace is ink — never gold. / body.woocommerce-account .nox-account-dash a:focus-visible, body.woocommerce-account .nox-account-dash button:focus-visible{ outline:1px solid var(--ink);outline-offset:2px; } / ============================================================ [12d] MY ACCOUNT — editorial dashboard A private NOX workspace: 25/75 editorial layout, sidebar nav cards, hairline overview cards, editorial order rows, a recently-viewed product strip (reuses the homepage card) and a quiet help panel. Warm cream, ink type, hairlines, no shadow. ============================================================ / / Let the account page breathe to the site's wide measure (Blocksy otherwise constrains it to the narrow content column). / / Widen only the account CONTENT wrappers — NOT the header. The header row also uses .ct-container, so scoping this to .ct-container would stretch the nav full-width; the account content lives in .entry-content / .woocommerce (inside .ct-container-full), so we widen those only. / body.woocommerce-account .entry-content, body.woocommerce-account .woocommerce{ max-width:none !important;width:100% !important;margin:0 !important; } body.woocommerce-account .woocommerce{ padding:0 !important; } / Account pages arrive at content faster than the marketing pages — trim the top whitespace (Blocksy's container + our own) by ~55%, on every breakpoint. Scoped to the account body so the homepage/catalogue stay spacious. Internal section spacing is untouched; only the gap before the workspace shrinks. / body.woocommerce-account .ct-container-full{ padding-top:clamp(16px,2vw,28px) !important; } .nox-account-dash{ width:100%;max-width:1520px;margin-inline:auto; / slightly wider than editorial pages — less side margin / padding-inline:var(--gutter); padding-top:clamp(16px,2vw,30px); padding-bottom:clamp(56px,6vw,96px); } .nox-account-dash-inner{ display:grid;grid-template-columns:minmax(200px,22%) 1fr; gap:clamp(32px,5vw,72px);align-items:start; } .nox-acct-content{ min-width:0; } / prevents grid blowout from wide children / / ---- Sidebar — full-height nav cards ---- / .nox-acct-nav{ position:sticky;top:110px; } .nox-acct-switch{ display:none; } / desktop: hidden — the sidebar list is shown. Mobile: shown. / .nox-acct-nav-list{ list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0;border:1px solid var(--line-strong); } .nox-acct-nav-item{ margin:0;border-top:1px solid var(--line); } .nox-acct-nav-item:first-child{ border-top:0; } .nox-acct-nav-item > a{ display:flex;align-items:center;gap:14px; padding:18px 22px;text-decoration:none; background:var(--bg);color:var(--ink-mid); font-family:var(--font-sans);font-size:14px;font-weight:400;letter-spacing:.01em; transition:background var(--dur-fast) var(--ease-lux),color var(--dur-fast) var(--ease-lux); } .nox-acct-nav-item > a:hover{ background:var(--bg-warm);color:var(--ink); } .nox-acct-nav-icon{ display:inline-flex;width:18px;height:18px;flex:0 0 18px; } .nox-acct-nav-icon svg{ width:18px;height:18px;display:block; } .nox-acct-nav-label{ line-height:1.2; } / active — ink card, cream text / .nox-acct-nav-item.is-active > a{ background:var(--ink);color:var(--bg); } .nox-acct-nav-item.is-active > a:hover{ background:var(--ink);color:var(--bg); } / logout sits a touch quieter / .nox-acct-nav-item--logout > a{ color:var(--ink-light); } .nox-acct-nav-item--logout > a:hover{ color:var(--ink); } / --- Kill Blocksy's gold account-nav accent --------------------------------- Blocksy styles .woocommerce-MyAccount-navigation li.is-active a (and :hover) with its palette gold via --account-nav-* variables. We (a) redefine those variables to ink/cream on the account scope and (b) override the exact selector with !important so active = ink card + cream text (matching the primary CTA), and hover stays a calm cream — never gold, never a black flash. Desktop + mobile share these. / body.woocommerce-account .woocommerce-MyAccount-navigation{ --account-nav-background-active-color:var(--ink); --account-nav-text-active-color:var(--bg); --account-nav-background-hover-color:var(--bg-warm); --account-nav-text-hover-color:var(--ink); } body.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a, body.woocommerce-account .nox-acct-nav-item.is-active > a{ background:var(--ink) !important;color:var(--bg) !important; } body.woocommerce-account .woocommerce-MyAccount-navigation ul li:not(.is-active):hover a, body.woocommerce-account .nox-acct-nav-item:not(.is-active) > a:hover{ background:var(--bg-warm) !important;color:var(--ink) !important; } / icons follow the link colour (stroke:currentColor) — cream when active / body.woocommerce-account .nox-acct-nav-item.is-active > a .nox-acct-nav-icon svg{ stroke:var(--bg); } / ---- Header ---- / .nox-dash-head{ display:flex;justify-content:space-between;align-items:flex-start;gap:32px;margin-bottom:clamp(44px,4.5vw,66px); } .nox-dash-eyebrow{ display:block;font-family:var(--font-sans);font-size:11px;font-weight:500; text-transform:uppercase;letter-spacing:var(--ls-eyebrow);color:var(--ink-light);margin-bottom:16px; } .nox-dash-title{ font-family:var(--font-serif);font-weight:300;font-size:clamp(30px,4vw,46px);line-height:1.05; letter-spacing:var(--ls-heading);color:var(--ink);margin:0 0 14px; } .nox-dash-lead{ font-family:var(--font-sans);font-size:15px;line-height:1.6;color:var(--ink-mid);margin:0;max-width:46ch; } .nox-dash-meta{ flex:0 0 auto;border:1px solid var(--line);padding:18px 22px;text-align:right;min-width:170px; } .nox-dash-meta-label{ display:block;font-family:var(--font-sans);font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:var(--ls-eyebrow);color:var(--ink-light);margin-bottom:8px; } .nox-dash-meta-value{ display:block;font-family:var(--font-serif);font-weight:300;font-size:20px;color:var(--ink); } / ---- Overview cards ---- / .nox-dash-cards{ display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line-strong);margin-bottom:clamp(52px,6vw,84px); } .nox-dash-card{ padding:30px 28px 26px;border-left:1px solid var(--line);display:flex;flex-direction:column;gap:16px;min-height:176px; } .nox-dash-card:first-child{ border-left:0; } .nox-dash-card-label{ font-family:var(--font-sans);font-size:10.5px;font-weight:500;text-transform:uppercase;letter-spacing:var(--ls-eyebrow);color:var(--ink-light); } .nox-dash-card-num{ font-family:var(--font-serif);font-weight:300;font-size:50px;line-height:1;letter-spacing:-.025em;color:var(--ink);margin-top:2px; } .nox-dash-card-num--sm{ font-size:30px;letter-spacing:-.01em; } .nox-dash-card-num .amount, .nox-dash-card-num bdi{ font-family:var(--font-serif) !important;font-weight:300; } .nox-dash-card-link{ margin-top:auto;font-family:var(--font-sans);font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-light);text-decoration:none;transition:color var(--dur-fast) var(--ease-lux); } .nox-dash-card-link:hover{ color:var(--ink); } / ---- Section heads ---- / .nox-dash-section{ margin-bottom:clamp(52px,6vw,84px); } .nox-dash-sec-head{ display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:22px;padding-bottom:16px;border-bottom:1px solid var(--line-strong); } .nox-dash-h2{ font-family:var(--font-serif);font-weight:300;font-size:clamp(20px,2.4vw,26px);letter-spacing:var(--ls-heading);color:var(--ink);margin:0; } .nox-dash-seclink{ font-family:var(--font-sans);font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:var(--ls-wide);color:var(--ink-light);text-decoration:none;white-space:nowrap;transition:color var(--dur-fast) var(--ease-lux); } .nox-dash-seclink:hover{ color:var(--ink); } / ---- Editorial order rows ---- / .nox-order-list{ list-style:none;margin:0;padding:0; } .nox-order-row{ display:grid;align-items:center;gap:20px; grid-template-columns:72px minmax(140px,1.4fr) 1fr auto auto auto; padding:26px 2px;border-bottom:1px solid var(--line); } .nox-order-row:last-child{ border-bottom:0; } .nox-order-thumb{ width:72px;height:72px;overflow:hidden;background:var(--bg-card);display:block; } .nox-order-thumb img{ width:100%;height:100%;object-fit:cover;display:block; } .nox-order-id{ display:flex;flex-direction:column;gap:5px;min-width:0; } .nox-order-num{ font-family:var(--font-serif);font-weight:400;font-size:17px;letter-spacing:-.01em;color:var(--ink); } .nox-order-date{ font-family:var(--font-sans);font-size:12.5px;color:var(--ink-light); } .nox-order-items{ font-family:var(--font-sans);font-size:13px;color:var(--ink-mid); } / Understated monochrome status pill — no colour coding. Completed reads as "settled" via a filled ink pill; every other status is a calm hairline outline. Neutral palette only. / .nox-order-status{ display:inline-block;font-family:var(--font-sans);font-size:10px;font-weight:500; text-transform:uppercase;letter-spacing:.12em;color:var(--ink-mid); border:1px solid var(--line-strong);padding:5px 11px;white-space:nowrap; } .nox-order-status--completed{ background:var(--ink);border-color:var(--ink);color:var(--bg); } .nox-order-total{ font-family:var(--font-serif);font-weight:400;font-size:17px;color:var(--ink);white-space:nowrap; } .nox-order-total .amount{ font-family:var(--font-serif) !important; } .nox-order-view{ font-family:var(--font-sans);font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:var(--ls-wide);color:var(--ink);text-decoration:none;white-space:nowrap;transition:color var(--dur-fast) var(--ease-lux); } .nox-order-view:hover{ color:var(--ink);text-decoration:underline;text-underline-offset:3px; } / pagination / .nox-order-pagination{ display:flex;justify-content:space-between;gap:16px;margin-top:26px; } .nox-order-page-btn{ font-family:var(--font-sans);font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:var(--ls-wide);color:var(--ink-mid);text-decoration:none;padding:12px 20px;border:1px solid var(--line);transition:background var(--dur-fast) var(--ease-lux),color var(--dur-fast) var(--ease-lux); } .nox-order-page-btn:hover{ background:var(--ink);color:var(--bg);border-color:var(--ink); } / ---- Empty states ---- / .nox-dash-empty{ padding:36px 2px; } .nox-dash-empty-text{ font-family:var(--font-serif);font-weight:300;font-size:20px;color:var(--ink-mid);margin:0 0 14px; } .nox-dash-empty-link{ font-family:var(--font-sans);font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:var(--ls-wide);color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line-strong);padding-bottom:3px; } .nox-dash-empty-link:hover{ color:var(--ink);border-color:var(--ink); } / ---- Continue your research — reuse the homepage product card ---- / .nox-dash-products-sec ul.products{ display:grid !important;grid-template-columns:repeat(4,1fr) !important; gap:clamp(16px,2vw,28px) !important;margin:0 !important;padding:0 !important;list-style:none !important; } .nox-dash-products-sec ul.products::before, .nox-dash-products-sec ul.products::after{ display:none !important; } .nox-dash-products-sec ul.products li.product{ width:auto !important;margin:0 !important;float:none !important; } / ---- Saved research grid (favourites, JS-rendered) ---- / .nox-saved-grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px); } .nox-saved-card{ display:flex;flex-direction:column;border:1px solid var(--line); } .nox-saved-card-link{ display:flex;flex-direction:column;text-decoration:none; } .nox-saved-card-media{ position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--bg-card);display:block; } .nox-saved-card-media img{ width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--dur) var(--ease-lux); } .nox-saved-card:hover .nox-saved-card-media img{ transform:scale(1.03); } .nox-saved-card-body{ padding:16px 16px 18px;display:flex;flex-direction:column;gap:6px; } .nox-saved-card-name{ font-family:var(--font-serif);font-weight:400;font-size:17px;line-height:1.2;letter-spacing:var(--ls-heading);color:var(--ink); } .nox-saved-card-price{ font-family:var(--font-sans);font-size:13px;color:var(--ink-mid); } .nox-saved-card-actions{ display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:auto;padding:0 16px 16px; } .nox-saved-card-add{ display:inline-flex;align-items:center;gap:7px;background:none;border:0;padding:0;cursor:pointer;font-family:var(--font-sans);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:var(--ls-wide);color:var(--ink);transition:opacity var(--dur-fast) var(--ease-lux); } .nox-saved-card-add span{ display:inline-block;transition:transform var(--dur-fast) var(--ease-lux); } .nox-saved-card-add:hover span{ transform:translateX(4px); } .nox-saved-card-add.is-adding{ opacity:.5;pointer-events:none; } .nox-saved-card-remove{ background:none;border:0;padding:0;cursor:pointer;font-family:var(--font-sans);font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-light);transition:color var(--dur-fast) var(--ease-lux); } .nox-saved-card-remove:hover{ color:var(--ink); } @media (max-width:600px){ .nox-saved-card-add,.nox-saved-card-remove{ min-height:44px; } } / thumb-friendly targets / .nox-saved-empty{ font-family:var(--font-sans);font-size:14px;line-height:1.6;color:var(--ink-mid);margin:0;padding:8px 0; } / ---- Help panel ---- / .nox-dash-help{ display:flex;align-items:center;justify-content:space-between;gap:24px;border:1px solid var(--line);padding:28px 30px; } .nox-dash-help-title{ font-family:var(--font-serif);font-weight:300;font-size:22px;letter-spacing:var(--ls-heading);color:var(--ink);margin:0 0 8px; } .nox-dash-help-copy{ font-family:var(--font-sans);font-size:14px;line-height:1.6;color:var(--ink-mid);margin:0;max-width:52ch; } .nox-dash-help-link{ flex:0 0 auto;font-family:var(--font-sans);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:var(--ls-wide);color:var(--bg);background:var(--ink);border:1px solid var(--ink);padding:14px 22px;text-decoration:none;white-space:nowrap;transition:background var(--dur-fast) var(--ease-lux),color var(--dur-fast) var(--ease-lux); } .nox-dash-help-link:hover{ background:transparent;color:var(--ink); } / ---- Addresses — two editorial cards ---- / .nox-address-grid{ display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,36px); } .nox-address-grid--single{ grid-template-columns:minmax(0,480px); } .nox-address-card{ border:1px solid var(--line-strong);padding:clamp(24px,3vw,34px);display:flex;flex-direction:column; } .nox-address-title{ font-family:var(--font-serif);font-weight:300;font-size:22px;letter-spacing:var(--ls-heading);color:var(--ink);margin:0 0 18px;padding-bottom:16px;border-bottom:1px solid var(--line); } .nox-address-body{ font-family:var(--font-sans);font-size:14.5px;line-height:1.8;color:var(--ink-mid);flex:1 0 auto; } .nox-address-body address{ font-style:normal;margin:0; } .nox-address-edit{ align-self:flex-start;margin-top:22px;font-family:var(--font-sans);font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:var(--ls-wide);color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line-strong);padding-bottom:3px;transition:color var(--dur-fast) var(--ease-lux),border-color var(--dur-fast) var(--ease-lux); } .nox-address-edit:hover{ color:var(--ink);border-color:var(--ink); } / ---- Account details — editorial form ---- / .nox-acct-form{ max-width:720px; } .nox-form-section{ padding-bottom:clamp(30px,4vw,44px);margin-bottom:clamp(30px,4vw,44px);border-bottom:1px solid var(--line); } .nox-form-section--password{ border-bottom:0;margin-bottom:20px; } .nox-form-section-head{ margin-bottom:24px; } .nox-form-section-title{ font-family:var(--font-serif);font-weight:300;font-size:22px;letter-spacing:var(--ls-heading);color:var(--ink);margin:0 0 6px; } .nox-form-section-note{ font-family:var(--font-sans);font-size:13px;color:var(--ink-light);margin:0; } .nox-form-grid{ display:grid;grid-template-columns:1fr 1fr;gap:22px 24px; } .nox-field{ display:flex;flex-direction:column;gap:9px;margin:0;float:none !important;width:auto !important; } .nox-field--wide{ grid-column:1 / -1; } .nox-acct-form label{ font-family:var(--font-sans) !important;font-size:11px !important;font-weight:500;text-transform:uppercase;letter-spacing:.1em !important;color:var(--ink-light) !important;margin:0 !important; } .nox-acct-form input.input-text, .nox-acct-form input[type="text"], .nox-acct-form input[type="email"], .nox-acct-form input[type="password"]{ width:100% !important;border:1px solid var(--line-strong) !important;border-radius:0 !important;background:var(--paper) !important; padding:14px 16px !important;font-family:var(--font-sans) !important;font-size:14.5px !important;color:var(--ink) !important; transition:border-color var(--dur-fast) var(--ease-lux),box-shadow var(--dur-fast) var(--ease-lux); } .nox-acct-form input:focus{ border-color:var(--ink) !important;box-shadow:0 0 0 1px var(--ink) !important;outline:none !important; } .nox-field-hint{ font-family:var(--font-sans);font-size:12px;line-height:1.5;color:var(--ink-light); } .nox-form-actions{ margin-top:8px; } .nox-form-submit{ display:inline-flex;align-items:center;justify-content:center; background:var(--ink) !important;color:var(--bg) !important;border:1px solid var(--ink) !important;border-radius:0 !important; font-family:var(--font-sans) !important;font-size:12px !important;font-weight:600 !important;text-transform:uppercase;letter-spacing:var(--ls-wide); padding:15px 34px !important;cursor:pointer;transition:background var(--dur-fast) var(--ease-lux),color var(--dur-fast) var(--ease-lux); } .nox-form-submit:hover{ background:transparent !important;color:var(--ink) !important; } / ---- Downloads — editorial list ---- / .nox-download-list{ list-style:none;margin:0;padding:0; } .nox-download-row{ display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:20px 2px;border-bottom:1px solid var(--line); } .nox-download-row:last-child{ border-bottom:0; } .nox-download-name{ font-family:var(--font-serif);font-weight:400;font-size:17px;letter-spacing:var(--ls-heading);color:var(--ink);flex:1 1 220px;min-width:0; } .nox-download-meta{ display:flex;flex-direction:column;gap:3px;font-family:var(--font-sans);font-size:12.5px;color:var(--ink-light);text-align:right; } .nox-download-btn{ font-family:var(--font-sans);font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:var(--ls-wide);color:var(--ink);text-decoration:none;border:1px solid var(--line-strong);padding:11px 20px;white-space:nowrap;transition:background var(--dur-fast) var(--ease-lux),color var(--dur-fast) var(--ease-lux),border-color var(--dur-fast) var(--ease-lux); } .nox-download-btn:hover{ background:var(--ink);color:var(--bg);border-color:var(--ink); } / address + form single-column on smaller screens / @media(max-width:900px){ .nox-address-grid, .nox-form-grid{ grid-template-columns:1fr; } .nox-acct-form{ max-width:none; } } / ---- Responsive ---- / @media(max-width:1100px){ .nox-dash-products-sec ul.products{ grid-template-columns:repeat(2,1fr) !important; } .nox-saved-grid{ grid-template-columns:repeat(2,1fr); } } @media(max-width:900px){ / Sidebar collapses to a compact editorial switcher: a single "current section ▾" control that expands to the full navigation. Maximises the space for account content. / .nox-account-dash-inner{ grid-template-columns:1fr;gap:20px; } .nox-acct-nav{ position:static;top:auto; } .nox-acct-switch{ display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%; min-height:48px;padding:13px 18px;background:var(--bg);border:1px solid var(--line-strong); font-family:var(--font-sans);font-size:14px;font-weight:500;letter-spacing:.01em;color:var(--ink); text-align:left;cursor:pointer;transition:background var(--dur-fast) var(--ease-lux); } .nox-acct-switch:hover{ background:var(--bg-warm); } .nox-acct-switch-chevron{ flex:0 0 auto;width:9px;height:9px; border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink); transform:translateY(-2px) rotate(45deg);transition:transform var(--dur-fast) var(--ease-lux); } .nox-acct-nav.is-open .nox-acct-switch-chevron{ transform:translateY(2px) rotate(-135deg); } / the full nav — hidden until the switcher is opened / .nox-acct-nav-list{ display:none;flex-direction:column;gap:0; border:1px solid var(--line-strong);border-top:0; } .nox-acct-nav.is-open .nox-acct-nav-list{ display:flex; } .nox-acct-nav-item{ border-top:1px solid var(--line);flex:0 0 auto; } .nox-acct-nav-item:first-child{ border-top:0; } .nox-acct-nav-item > a{ padding:14px 18px; } / ≥44px touch target / .nox-dash-head{ flex-direction:column;gap:22px; } .nox-dash-meta{ text-align:left;align-self:stretch; } } @media(max-width:680px){ .nox-dash-cards{ grid-template-columns:1fr 1fr; } .nox-dash-card{ min-height:0; } .nox-dash-card:nth-child(3), .nox-dash-card:nth-child(4){ border-top:1px solid var(--line); } .nox-dash-card:nth-child(odd){ border-left:0; } / order rows collapse to a readable stacked card / .nox-order-row{ grid-template-columns:56px 1fr auto;grid-auto-rows:auto;gap:6px 16px;row-gap:8px; } .nox-order-thumb{ width:56px;height:56px;grid-row:span 2; } .nox-order-id{ grid-column:2; } .nox-order-total{ grid-column:3;grid-row:1;text-align:right; } .nox-order-items{ grid-column:2; } .nox-order-status{ grid-column:2; } .nox-order-view{ grid-column:2 / -1;padding-top:4px; } .nox-dash-help{ flex-direction:column;align-items:flex-start; } } @media(max-width:520px){ .nox-dash-products-sec ul.products{ grid-template-columns:1fr 1fr !important;gap:14px !important; } .nox-saved-grid{ grid-template-columns:1fr 1fr; } } / ---------- Empty-cart polish + "New in store" grid ---------- / .woocommerce-cart .wc-empty-cart-message svg, .woocommerce-cart .wc-empty-cart-message .ct-icon, .woocommerce-cart .cart-empty .ct-icon, .wc-block-cartempty-cartimage, .wc-block-components-empty-cartimage{ display:none !important; } .woocommerce-cart .cart-empty.woocommerce-info{ background:none !important;border:none !important;padding:0 0 8px !important; font-family:var(--font-serif) !important;font-weight:300 !important; font-size:22px !important;color:var(--ink) !important;text-align:center !important; } .woocommerce-cart .cart-empty.woocommerce-info::before{ display:none !important; } .wc-block-gridproduct-link{ display:block !important; } .wc-block-gridproduct-image{ position:relative !important;width:100% !important;height:0 !important; padding-bottom:100% !important;overflow:hidden !important;aspect-ratio:auto !important; } .wc-block-gridproduct-image img{ position:absolute !important;top:0 !important;left:0 !important; width:100% !important;height:100% !important;object-fit:cover !important;max-width:none !important; contain:none !important;contain-intrinsic-size:auto !important;aspect-ratio:auto !important; } .wc-block-gridproduct-price .from{ margin-right:.3em; } @media(max-width:600px){ .woocommerce-cart .wc-block-gridproducts{ display:grid !important;grid-template-columns:1fr 1fr !important; gap:18px 12px !important;margin:0 !important;padding:0 !important; } .woocommerce-cart .wc-block-gridproduct{ width:auto !important;max-width:none !important;min-width:0 !important; margin:0 !important;padding:0 !important;border:0 !important;float:none !important; } .woocommerce-cart .wc-block-gridproduct-title{ font-size:14px !important; } } / ============================================================ [12c] CLASSIC CART + CHECKOUT — editorial polish Defensive: targets classic WooCommerce shortcode markup (.shop_table / .cart_totals / #order_review / #payment). Inert if the store uses the Cart/Checkout Blocks (styled above). ============================================================ / / Section headings — Cart totals, Your order, Billing details… / .woocommerce-cart .cart_totals > h2, .woocommerce-checkout #order_review_heading, .woocommerce-checkout .woocommerce-billing-fields > h3, .woocommerce-checkout .woocommerce-shipping-fields h3, .woocommerce-checkout .woocommerce-additional-fields h3{ font-family:var(--font-serif) !important;font-weight:300 !important; font-size:24px !important;color:var(--ink) !important;letter-spacing:var(--ls-heading) !important; margin:0 0 22px !important;text-transform:none !important; } / Classic cart line-item table / .woocommerce-cart table.shop_table{ border:0 !important;border-top:1px solid var(--line) !important;border-collapse:collapse !important; border-radius:0 !important;background:transparent !important;margin:0 0 32px !important; } .woocommerce-cart table.shop_table thead th{ font-family:var(--font-sans) !important;font-size:11px !important;font-weight:600 !important; text-transform:uppercase !important;letter-spacing:.18em !important;color:var(--ink-light) !important; border:0 !important;border-bottom:1px solid var(--line) !important;padding:0 12px 16px !important;background:transparent !important; } .woocommerce-cart table.shop_table td{ border:0 !important;border-bottom:1px solid var(--line-soft) !important; padding:22px 12px !important;background:transparent !important;vertical-align:middle !important; } .woocommerce-cart table.shop_table td.product-thumbnail img{ width:72px !important;height:72px !important;object-fit:cover !important;border:1px solid var(--line) !important;border-radius:0 !important; } .woocommerce-cart table.shop_table td.product-name a{ font-family:var(--font-serif) !important;letter-spacing:var(--ls-heading);font-size:17px !important;color:var(--ink) !important;text-decoration:none !important; } .woocommerce-cart table.shop_table td.product-name a:hover{ color:var(--gold) !important; } .woocommerce-cart table.shop_table td.product-price, .woocommerce-cart table.shop_table td.product-subtotal{ font-family:var(--font-serif) !important;font-size:16px !important;color:var(--ink) !important; } .woocommerce-cart table.shop_table td.product-subtotal{ font-weight:500 !important; } .woocommerce-cart a.remove{ color:var(--ink-light) !important;font-weight:400 !important;border:1px solid var(--line) !important; border-radius:50% !important;width:22px !important;height:22px !important;line-height:20px !important;text-align:center; } .woocommerce-cart a.remove:hover{ background:var(--ink) !important;color:var(--bg) !important;border-color:var(--ink) !important; } .woocommerce-cart .quantity input.qty{ border:1px solid var(--line) !important;border-radius:0 !important;background:var(--paper) !important; font-family:var(--font-sans) !important;font-size:14px !important;color:var(--ink) !important;padding:10px 8px !important;width:72px !important; } / Coupon / .woocommerce-cart-form .coupon input#coupon_code{ border:1px solid var(--line) !important;border-radius:0 !important;background:var(--paper) !important; padding:13px 15px !important;font-family:var(--font-sans) !important;font-size:13px !important;letter-spacing:.1em;text-transform:uppercase;min-width:170px; } .woocommerce-cart-form .coupon button{ background:transparent !important;color:var(--ink) !important;border:1px solid var(--ink) !important;border-radius:0 !important; font-family:var(--font-sans) !important;font-size:11px !important;font-weight:500 !important; text-transform:uppercase !important;letter-spacing:.16em !important;padding:13px 22px !important;transition:background var(--dur-fast),color var(--dur-fast) !important; } .woocommerce-cart-form .coupon button:hover{ background:var(--ink) !important;color:var(--bg) !important; } / Cart totals + checkout order review → premium summary panel / .woocommerce-cart .cart-collaterals .cart_totals, .woocommerce-checkout #order_review{ background:var(--bg-card) !important;border:1px solid var(--line) !important;border-radius:0 !important;padding:32px 30px !important; } .woocommerce-cart .cart_totals table.shop_table, .woocommerce-checkout .woocommerce-checkout-review-order-table{ border:0 !important;background:transparent !important;margin:0 !important; } .woocommerce-cart .cart_totals table th, .woocommerce-checkout .woocommerce-checkout-review-order-table th{ font-family:var(--font-sans) !important;font-size:11px !important;font-weight:600 !important; text-transform:uppercase !important;letter-spacing:.16em !important;color:var(--ink-mid) !important; text-align:left !important;border:0 !important;border-bottom:1px solid var(--line-soft) !important;padding:14px 0 !important;background:transparent !important; } .woocommerce-cart .cart_totals table td, .woocommerce-checkout .woocommerce-checkout-review-order-table td{ font-family:var(--font-serif) !important;font-size:15px !important;color:var(--ink) !important;text-align:right !important; border:0 !important;border-bottom:1px solid var(--line-soft) !important;padding:14px 0 !important;background:transparent !important; } .woocommerce-cart .cart_totals tr.order-total th, .woocommerce-checkout .woocommerce-checkout-review-order-table tr.order-total th{ color:var(--ink) !important;border-bottom:0 !important;padding-top:18px !important; } .woocommerce-cart .cart_totals tr.order-total td, .woocommerce-checkout .woocommerce-checkout-review-order-table tr.order-total td{ font-size:22px !important;font-weight:500 !important;border-bottom:0 !important;padding-top:18px !important; } .woocommerce-cart .cart_totals tr.order-total, .woocommerce-checkout .woocommerce-checkout-review-order-table tr.order-total{ border-top:1px solid var(--line) !important; } / Proceed to checkout + Place order — full-width ink / .woocommerce-cart .wc-proceed-to-checkout a.checkout-button, / (#place_order is styled once, in the [13] checkout block below.) / .woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover{ background:transparent !important;color:var(--ink) !important; } / Checkout payment methods box / .woocommerce-checkout #payment{ background:transparent !important;border-radius:0 !important; } .woocommerce-checkout #payment ul.payment_methods{ border:0 !important;border-top:1px solid var(--line-soft) !important;padding:12px 0 0 !important;margin:0 0 8px !important; } .woocommerce-checkout #payment ul.payment_methods li{ padding:6px 0 !important;font-family:var(--font-sans) !important;color:var(--ink) !important; } .woocommerce-checkout #payment div.payment_box{ background:var(--paper) !important;border-radius:0 !important;font-family:var(--font-sans) !important;font-size:13px !important;color:var(--ink-mid) !important; } .woocommerce-checkout #payment div.payment_box::before{ border-bottom-color:var(--paper) !important; } / ---------- WhatsApp buttons (cart / checkout / floating) ---------- NOTE: the cart/checkout WA button has two conflicting old rules (an ink one at old-line 1772, a green one at old-line 2582). The GREEN one loaded last in the old file, so it wins — preserved here. / .nox-cart-wa{ display:flex;align-items:center;justify-content:center;gap:10px;width:100%;margin-top:14px; background:var(--dark) !important;color:var(--on-dark) !important;border:1px solid var(--dark) !important;border-radius:0; font-family:var(--font-sans);font-size:12px;font-weight:500; text-transform:uppercase;letter-spacing:var(--ls-wide);padding:16px 24px;text-decoration:none; transition:background var(--dur-fast) ease,color var(--dur-fast) ease;box-sizing:border-box; } .nox-cart-wa:hover{ background:var(--dark-alt) !important;color:var(--on-dark) !important; } .nox-cart-wa svg{ flex-shrink:0;color:#25d366; } / green glyph = only colour accent / / (The floating WhatsApp button styles were removed in the Phase-1 cleanup — no template renders .nox-wa-float.) / / ---------- Bank-transfer confirm modal (order-received page) ---------- / .nox-bacs-modal{ position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;visibility:hidden;transition:opacity .3s ease; } .nox-bacs-modal.is-open{ opacity:1;visibility:visible; } .nox-bacs-backdrop{ position:absolute;inset:0;background:rgba(26,26,26,.55); } .nox-bacs-card{ position:relative;background:var(--paper);border:1px solid var(--line);max-width:480px;width:100%;padding:38px 34px;max-height:90vh;overflow-y:auto;transform:translateY(14px);transition:transform .3s ease;box-shadow:0 30px 70px rgba(20,16,10,.22); } .nox-bacs-modal.is-open .nox-bacs-card{ transform:translateY(0); } .nox-bacs-eyebrow{ display:block;font-family:var(--font-sans);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:var(--ls-eyebrow);color:var(--gold); } .nox-bacs-title{ font-family:var(--font-serif);font-weight:300;font-size:30px;color:var(--ink);margin:10px 0 14px;letter-spacing:var(--ls-heading); } .nox-bacs-intro{ font-family:var(--font-sans);font-size:14px;line-height:1.6;color:var(--ink-mid);margin:0 0 22px; } .nox-bacs-details{ background:var(--bg-warm);border:1px solid var(--line);padding:18px 20px;margin:0 0 26px; } .nox-bacs-details h2{ font-family:var(--font-sans) !important;font-size:11px !important;text-transform:uppercase;letter-spacing:.18em;color:var(--ink-mid) !important;margin:0 0 12px !important; } .nox-bacs-details ul,.nox-bacs-details .wc-bacs-bank-details{ list-style:none;margin:0;padding:0; } .nox-bacs-details li{ font-family:var(--font-sans);font-size:14px;color:var(--ink);padding:6px 0;border-bottom:1px solid var(--line-soft);display:flex;justify-content:space-between;gap:16px; } .nox-bacs-details li:last-child{ border-bottom:0; } .nox-bacs-details strong{ color:var(--ink); } .nox-bacs-confirm{ display:block;width:100%;background:var(--ink);color:var(--bg);border:1px solid var(--ink);border-radius:0;font-family:var(--font-sans);font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:var(--ls-wide);padding:16px;cursor:pointer;transition:background var(--dur-fast) ease,color var(--dur-fast) ease; } .nox-bacs-confirm:hover{ background:transparent;color:var(--ink); } body.nox-bacs-open{ overflow:hidden; } / ============================================================ [13] MOBILE MENU ENRICHMENT + MOBILE HEADER ICONS Secondary links + contact footer injected into Blocksy's off-canvas by nox.js. Explicit hex — var() isn't reliably in scope inside #offcanvas. ============================================================ / / Off-canvas transition — calm 280ms slide (within the 250–300ms brief) / #offcanvas{ transition-duration:.28s !important;--nox-bronze:#9a7b4f; } / subtle bronze accent, used sparingly / #offcanvas .ct-panel-inner{ transition-duration:.28s !important; } / Editorial cream drawer (contents only, not the overlay backdrop) / #offcanvas .ct-panel-inner, #offcanvas .ct-panel-content, #offcanvas .ct-panel-content-inner{ background:#f6f2ec !important; / = --bg (var() unreliable in this scope) / color:#1a1a1a !important; } #offcanvas.ct-panel{ background:rgba(26,22,16,.55) !important; -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); } #offcanvas .ct-panel-inner{ border-left:1px solid #e8e2d8 !important; } / = --line-soft / / Drawer width — ~89vw, capped so the calm column never stretches too wide. / #offcanvas .ct-panel-inner{ width:89vw !important;max-width:380px !important; } / Safe-area top padding so the close button clears the notch / status bar. / #offcanvas .ct-panel-content-inner{ padding-top:calc(6px + env(safe-area-inset-top,0px)) !important; } / One calm ~330px column, centred in the drawer. The NOX wordmark is centred; every block below it is left-aligned to a shared 30px inset. Sections are separated by whitespace alone — no rules, no boxes, no clutter. / #offcanvas .ct-panel-content-inner{ max-width:330px !important;margin-left:auto !important;margin-right:auto !important; } #offcanvas .nox-mm-masthead{ padding-left:30px !important;padding-right:30px !important; } / The compact nav below carries its own row insets (30px), so the whole row is the tap target while text aligns to the shared left edge. / #offcanvas .nox-mm-rawmenu[hidden]{ display:none !important; } / Blocksy's raw menu, replaced by .nox-nav / / Smooth, contained momentum scrolling within the drawer. / #offcanvas .ct-panel-content, #offcanvas .ct-panel-content-inner{ -webkit-overflow-scrolling:touch;overscroll-behavior:contain;scroll-behavior:smooth; } / Menu items are typography + whitespace only: kill Blocksy's core underline pseudo (a 2px ::after line) and any other decorative rule under an item. / #offcanvas .ct-menu-link::before, #offcanvas .ct-menu-link::after, #offcanvas .menu-item > a::before, #offcanvas .menu-item > a::after{ content:none !important;display:none !important;border:0 !important;background:none !important; } / Close button — a light X inside a 44×44 invisible target, aligned toward the column inset. Hover = opacity only, no colour/scale. / #offcanvas .ct-panel-actions{ display:flex !important;justify-content:flex-end !important; padding:16px 8px 0 0 !important; } #offcanvas .ct-toggle-close{ width:44px !important;height:44px !important; display:inline-flex !important;align-items:center !important;justify-content:center !important; margin:0 !important;padding:0 !important;background:none !important;border:0 !important; opacity:.8;transition:opacity var(--dur-fast) var(--ease-lux) !important; } #offcanvas .ct-toggle-close:hover, #offcanvas .ct-toggle-close:focus-visible{ opacity:.45 !important;background:none !important; } #offcanvas .ct-toggle-close, #offcanvas .ct-toggle-close svg, #offcanvas .ct-panel-actions svg{ color:#1a1a1a !important; fill:currentColor !important; } #offcanvas .ct-toggle-close svg{ width:18px !important;height:18px !important;stroke-width:1.1 !important; } / lighter X / / Section labels — CATALOGUE / MY ACCOUNT / INFORMATION: small, uppercase, widely tracked and quiet. They divide the list by hierarchy, not by rules. / #offcanvas .nox-nav-label{ display:block;padding:0 30px;margin:0 0 10px; font-family:'Inter Tight',sans-serif;font-size:11px;font-weight:500; text-transform:uppercase;letter-spacing:.2em;color:#9a938a;text-decoration:none; transition:color var(--dur-fast) var(--ease-lux); } #offcanvas a.nox-nav-label--link:hover{ color:#1a1a1a; } / Masthead — centred NOX wordmark + a minimal underlined search. No tagline, no border: the search's single hairline is the only line in the header. / #offcanvas .nox-mm-masthead{ padding-top:6px;padding-bottom:30px; } #offcanvas .nox-mm-wordmark{ display:block;text-align:center;font-family:var(--font-wordmark);font-weight:400; font-size:26px;letter-spacing:var(--ls-wordmark);color:#1a1a1a;margin:0 0 8px;padding-left:var(--ls-wordmark); / optical: offset trailing letter-spacing so it reads centred / -webkit-text-stroke:.5px #1a1a1a; / thicken Italiana's hairlines so the wordmark doesn't ghost (matches the header) / } #offcanvas .nox-mm-tagline{ display:block;text-align:center;font-family:'Inter Tight',sans-serif; font-size:10.5px;font-weight:400;letter-spacing:.14em;text-transform:uppercase; color:#9a938a;margin:0 0 26px; } / Search — a minimal bar, magnifier on the left, defined only by a hairline that a subtle bronze underline sweeps across on focus. No box, no rounding. / #offcanvas .nox-mm-search-form{ position:relative;display:flex;align-items:center; border:0;border-bottom:1px solid rgba(26,26,26,.16);background:none; } #offcanvas .nox-mm-search-form::after{ content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px; background:var(--nox-bronze,#9a7b4f);transform:scaleX(0);transform-origin:left center; transition:transform .45s var(--ease-lux); } #offcanvas .nox-mm-search-form:focus-within::after{ transform:scaleX(1); } #offcanvas .nox-mm-search-go{ flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center; width:30px;height:38px;margin-left:-4px;background:none;border:0;color:#8b847a;cursor:pointer; transition:color var(--dur-fast) var(--ease-lux); } #offcanvas .nox-mm-search-form:focus-within .nox-mm-search-go{ color:#1a1a1a; } #offcanvas .nox-mm-search-input{ flex:1;min-width:0;background:none;border:0;outline:none;box-shadow:none; font-family:'Inter Tight',sans-serif;font-size:15px;color:#1a1a1a; padding:12px 4px 13px 8px;letter-spacing:.01em; } #offcanvas .nox-mm-search-input::placeholder{ color:#9a938a;opacity:1; } / ── Compact NOX navigation — a fast, scannable list. Typography hierarchy, not oversized type, does the work: section labels, primary rows, indented compounds. No cards, no dividers; whitespace separates the sections. ── / #offcanvas .nox-nav{ display:block;padding-top:2px; } #offcanvas .nox-nav-group + .nox-nav-group{ margin-top:40px; } / Primary rows — Catalogue categories and flat links share one clean row style; the whole row is the tap target, text aligned to the shared 30px edge. / #offcanvas .nox-nav-link, #offcanvas .nox-cat-head{ display:block;width:100%;box-sizing:border-box;text-align:left; background:none;border:0;cursor:pointer;text-decoration:none; padding:12px 30px; font-family:'Fraunces',serif;font-weight:400;font-size:17px;line-height:1.2; letter-spacing:-.005em;color:#1a1a1a;white-space:nowrap; transition:opacity var(--dur-fast) var(--ease-lux),color var(--dur-fast) var(--ease-lux); } #offcanvas .nox-nav-link:hover,#offcanvas .nox-cat-head:hover{ opacity:.55; } #offcanvas .nox-nav-link:active,#offcanvas .nox-cat-head:active{ opacity:.4; } #offcanvas .nox-nav-link--muted{ color:#726c64; } / = --ink-light; hardcoded because var() is unreliable in #offcanvas scope (see L4138). H-1 contrast fix. / #offcanvas .nox-nav-primary > .nox-nav-label{ margin-bottom:6px; } #offcanvas .nox-nav-flat{ margin-top:6px; } / Category accordion header — name + a small rotating chevron. / #offcanvas .nox-cat-head{ display:flex;align-items:center;justify-content:space-between;gap:12px; } #offcanvas .nox-cat-name{ flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } #offcanvas .nox-cat-chev{ flex:0 0 auto;position:relative;width:11px;height:8px;transition:transform .3s var(--ease-lux); } #offcanvas .nox-cat-chev::before, #offcanvas .nox-cat-chev::after{ content:'';position:absolute;top:2px;width:6.5px;height:1.2px;background:#8b847a; } #offcanvas .nox-cat-chev::before{ left:0;transform:rotate(45deg); } #offcanvas .nox-cat-chev::after{ right:0;transform:rotate(-45deg); } #offcanvas .nox-cat.is-open .nox-cat-chev{ transform:rotate(180deg); } / Catalogue — one collapsible dropdown holding the whole category list. Reads as a primary row (matches the flat links) with a rotating chevron; tapping it reveals the category accordions, which still expand into compounds. / #offcanvas .nox-nav-catbtn{ display:flex;align-items:center;justify-content:space-between;gap:12px; width:100%;box-sizing:border-box;text-align:left;background:none;border:0;cursor:pointer; padding:12px 30px; font-family:'Fraunces',serif;font-weight:400;font-size:17px;line-height:1.2; letter-spacing:-.005em;color:#1a1a1a; transition:opacity var(--dur-fast) var(--ease-lux); } #offcanvas .nox-nav-catbtn:hover{ opacity:.55; } #offcanvas .nox-nav-catbtn:active{ opacity:.4; } #offcanvas .nox-nav-catbtn[aria-expanded="true"] .nox-cat-chev{ transform:rotate(180deg); } #offcanvas .nox-nav-catwrap{ display:grid;grid-template-rows:0fr;transition:grid-template-rows .34s var(--ease-lux); } #offcanvas .nox-nav-catbtn[aria-expanded="true"] + .nox-nav-catwrap{ grid-template-rows:1fr; } #offcanvas .nox-nav-catwrap-inner{ overflow:hidden;min-height:0; } / nest one step so the hierarchy under Catalogue reads: category then compound / #offcanvas .nox-nav-catwrap .nox-cat-head{ padding-left:44px; } #offcanvas .nox-nav-catwrap .nox-compound{ padding-left:58px; } #offcanvas .nox-cat-all--top{ padding-left:44px;margin-top:2px; } / Category panel — natural height animation via grid rows (0fr → 1fr). / #offcanvas .nox-cat-panel{ display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s var(--ease-lux); } #offcanvas .nox-cat.is-open .nox-cat-panel{ grid-template-rows:1fr; } #offcanvas .nox-cat-panel-inner{ overflow:hidden;min-height:0; } #offcanvas .nox-cat-list{ display:flex;flex-direction:column;padding:2px 0 10px; } / Compounds — indented, quieter sans. Browsable directly from the menu. / #offcanvas .nox-compound{ display:block;padding:8px 30px 8px 44px; font-family:'Inter Tight',sans-serif;font-size:14px;font-weight:400;letter-spacing:.005em; color:#5c5751;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; transition:color var(--dur-fast) var(--ease-lux); } #offcanvas .nox-compound:hover{ color:#1a1a1a; } #offcanvas .nox-cat-all{ display:inline-block;margin:4px 0 2px;padding:6px 30px 6px 44px; font-family:'Inter Tight',sans-serif;font-size:11px;font-weight:500; text-transform:uppercase;letter-spacing:.14em;color:var(--nox-bronze,#9a7b4f);text-decoration:none; transition:opacity var(--dur-fast) var(--ease-lux); } #offcanvas .nox-cat-all:hover{ opacity:.6; } #offcanvas .nox-cat-loading{ display:block;padding:6px 30px 8px 44px; font-family:'Inter Tight',sans-serif;font-size:12px;letter-spacing:.02em;color:#9a938a; } #offcanvas .nox-cat-fallback{ display:block;padding:12px 30px; font-family:'Fraunces',serif;font-size:17px;color:#1a1a1a;text-decoration:none; transition:opacity var(--dur-fast) var(--ease-lux); } #offcanvas .nox-cat-fallback:hover{ opacity:.55; } / Information — smaller, muted, quiet legal links. / #offcanvas .nox-nav-info .nox-nav-link{ font-family:'Inter Tight',sans-serif;font-weight:400;font-size:12px; letter-spacing:.03em;color:#726c64;padding-top:8px;padding-bottom:8px; / #726c64 = --ink-light (H-1) / } #offcanvas .nox-nav-info .nox-nav-link:hover{ color:#1a1a1a;opacity:1; } / Footer — a simple editorial sign-off, left-aligned to the column. One subtle hairline above; generous space so it reads as the natural end of the menu. No card, no box: just CONTACT, a serif email, Instagram, place, and note. / #offcanvas .nox-nav-footer{ margin-top:44px;padding:34px 30px calc(42px + env(safe-area-inset-bottom,0px)); border-top:1px solid rgba(26,26,26,.1); display:flex;flex-direction:column; } #offcanvas .nox-nav-flabel{ font-family:'Inter Tight',sans-serif;font-size:11px;font-weight:500; text-transform:uppercase;letter-spacing:.22em;color:#9a938a;margin-bottom:16px; } #offcanvas .nox-nav-email{ font-family:'Fraunces',serif;font-weight:400;font-size:17px;letter-spacing:-.005em; color:#1a1a1a;text-decoration:none;word-break:break-all;margin-bottom:14px; transition:opacity var(--dur-fast) var(--ease-lux); } #offcanvas .nox-nav-email:hover{ opacity:.6; } #offcanvas .nox-nav-ig{ display:inline-flex;align-items:center;gap:6px;width:fit-content; font-family:'Inter Tight',sans-serif;font-size:12px;font-weight:400;letter-spacing:.04em; color:#5c5751;text-decoration:none;margin-bottom:16px; transition:color var(--dur-fast) var(--ease-lux); } #offcanvas .nox-nav-ig:hover{ color:#1a1a1a; } #offcanvas .nox-nav-country{ font-family:'Inter Tight',sans-serif;font-size:11px;font-weight:400;letter-spacing:.03em; color:#726c64;margin-bottom:14px; / #726c64 = --ink-light (H-1) / } #offcanvas .nox-nav-note{ font-family:'Inter Tight',sans-serif;font-size:11px;font-weight:400;line-height:1.5; letter-spacing:.02em;color:#b0a99e; } / Entrance — content fades while each region reveals in sequence: the close button rotates gently into place, then logo, tagline, search, and the nav groups fade upward with a subtle stagger. Opacity + transform only; GPU- friendly; ~250–300ms per element. / @keyframes noxMenuIn{ from{ opacity:0; } to{ opacity:1; } } @keyframes noxMenuItemIn{ from{ opacity:0;transform:translateY(12px); } to{ opacity:1;transform:none; } } @keyframes noxCloseIn{ from{ opacity:0;transform:rotate(-18deg); } to{ opacity:.8;transform:rotate(0); } } #offcanvas .nox-mm-anim{ animation:noxMenuIn .3s var(--ease-lux) both; } #offcanvas .nox-mm-anim .ct-toggle-close{ animation:noxCloseIn .5s var(--ease-lux) both;animation-delay:40ms; } #offcanvas .nox-mm-anim .nox-mm-wordmark{ animation:noxMenuItemIn .46s var(--ease-lux) both;animation-delay:60ms; } #offcanvas .nox-mm-anim .nox-mm-tagline{ animation:noxMenuItemIn .46s var(--ease-lux) both;animation-delay:100ms; } #offcanvas .nox-mm-anim .nox-mm-search-form{ animation:noxMenuItemIn .46s var(--ease-lux) both;animation-delay:150ms; } #offcanvas .nox-mm-anim .nox-nav-group{ animation:noxMenuItemIn .46s var(--ease-lux) both; } #offcanvas .nox-mm-anim .nox-nav-group:nth-child(1){ animation-delay:210ms; } #offcanvas .nox-mm-anim .nox-nav-group:nth-child(2){ animation-delay:270ms; } #offcanvas .nox-mm-anim .nox-nav-group:nth-child(3){ animation-delay:330ms; } #offcanvas .nox-mm-anim .nox-nav-footer{ animation:noxMenuItemIn .46s var(--ease-lux) both;animation-delay:390ms; } @media(prefers-reduced-motion:reduce){ #offcanvas .nox-mm-anim, #offcanvas .nox-mm-anim .ct-toggle-close, #offcanvas .nox-mm-anim .nox-mm-wordmark, #offcanvas .nox-mm-anim .nox-mm-tagline, #offcanvas .nox-mm-anim .nox-mm-search-form, #offcanvas .nox-mm-anim .nox-nav-group, #offcanvas .nox-mm-anim .nox-nav-footer{ animation:none !important; } } / ============================================================ Mobile header icon cluster — engineered alignment. Search · Saved · Bag · Account · Menu. Every icon is an identical 44×44 square, with an identical 19px glyph on the SAME baseline, an identical stroke, and equal spacing. Hover/tap = opacity only (no scale, no bounce). Badges are one shared component (below). Desktop is untouched — every rule is scoped to the injected .nox-m-* icons. / .nox-m-search,.nox-m-account{ display:none; } / revealed at mobile widths by the vis JS / .ct-header .nox-m-search, .ct-header .nox-m-account, .ct-header .nox-m-fav, .ct-header .nox-m-cart{ box-sizing:border-box !important; width:44px !important;height:44px !important; / identical invisible square / display:inline-flex !important;align-items:center !important;justify-content:center !important; position:relative !important; margin:0 1px !important;padding:0 !important; / equal, tight gaps across the row / background:none !important;border:0 !important;color:#1a1a1a !important; text-decoration:none;cursor:pointer;line-height:0; -webkit-tap-highlight-color:transparent; transition:opacity var(--dur-fast) var(--ease-lux) !important; } .ct-header .nox-m-search:hover,.ct-header .nox-m-account:hover, .ct-header .nox-m-fav:hover,.ct-header .nox-m-cart:hover, .ct-header .nox-m-search:active,.ct-header .nox-m-account:active, .ct-header .nox-m-fav:active,.ct-header .nox-m-cart:active{ opacity:.6 !important; } .ct-header .nox-m-search svg, .ct-header .nox-m-account svg, .ct-header .nox-m-fav svg, .ct-header .nox-m-cart svg{ width:19px !important;height:19px !important;display:block !important; stroke:currentColor !important;stroke-width:1.5 !important;fill:none !important; / identical weight / } / keep the burger on the same rhythm as the icons / .ct-header .ct-header-trigger{ width:44px !important;height:44px !important;box-sizing:border-box !important; display:inline-flex !important;align-items:center !important;justify-content:center !important; margin:0 1px !important;padding:0 !important; / identical 44px box → equal spacing with the icons / } .ct-header-trigger .ct-icon{ width:16px !important;height:auto !important; } / ---- ONE shared mobile badge: upper-right, identical size/offset for every icon; ink disc, cream numeral, 2px cream ring so it never touches the glyph. The element only exists when count > 0 (nox.js), so "0" can't appear. ---- / .ct-header .nox-m-fav-count, .ct-header .nox-m-cart-count{ position:absolute !important;top:6px !important;right:6px !important;left:auto !important;bottom:auto !important; min-width:16px !important;height:16px !important;padding:0 3px !important;margin:0 !important; display:flex !important;align-items:center !important;justify-content:center !important;box-sizing:border-box !important; background:#1a1a1a !important;color:#f4f1ec !important;border:2px solid #f4f1ec !important;box-shadow:none !important; border-radius:100px !important; font-family:var(--font-sans) !important;font-size:9px !important;font-weight:600 !important;line-height:1 !important; font-variant-numeric:tabular-nums;letter-spacing:0 !important; } / ============================================================ [14] PRODUCT-PAGE (PDP) OVERRIDES + RESPONSIVE TAILS Core .pdp-* / .pd-* layout lives in assets/css/single-product.css. These are the page-specific additions/overrides that lived in the old nox.css and DO apply (WhatsApp CTA, title fit, related grid, home image squaring). The legacy WooCommerce-default single-product restyle (.single-product div.product / .summary / .woocommerce-tabs) was intentionally dropped — the site uses the custom single-product.php. ============================================================ / / (The PDP WhatsApp button was retired in Phase 4 — one conversion path. WhatsApp ordering is now the quiet .pdp-wa-link text link, styled in single-product.css. PDP title sizing/wrap also lives there — one source.) / / PDP CTA mobile stack: full-width primary / @media(max-width:600px){ .pdp-cta{ flex-direction:column !important;flex-wrap:nowrap !important; } .pdp-cta .pdp-btn-primary{ flex:0 0 auto !important;width:100% !important;min-width:0 !important; } } / Related compounds 2-up on mobile (was stacking one per line) / @media(max-width:768px){ .pdp-related ul.products{ display:grid !important; grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important; gap:12px !important; } .pdp-related ul.products li.product{ width:auto !important; max-width:none !important; min-width:0 !important; flex:initial !important; } } / Homepage product images → square (overrides any inline 4/3 on non-nox-card loops) / body.home .woocommerce ul.products li.product img, .nox-products ul.products li.product img{ aspect-ratio:1/1 !important; } / ============================================================ [M] MOBILE HOMEPAGE — a bespoke editorial two-column journal ------------------------------------------------------------ ≤768px the homepage speaks ONE visual language: a consistent two-column grid (featured / research / educational), cards of identical height so every row bottom-aligns, a single 64px section rhythm on a 20px page gutter, airy headings, and full-width editorial photo breaks + the dark quality band for breathing room. Designed for mobile — not scaled from desktop. ============================================================ / @media(max-width:768px){ / one consistent 20px page gutter for every homepage section (+ the relocated Our Process section on the Why NOX page) / .nox-home .container, .quality-block .container{ padding-left:20px !important;padding-right:20px !important; } .research-intro{ padding-left:0 !important;padding-right:0 !important; } / one section rhythm (56–72px) / .nox-home .nox-products{ padding:64px 0 56px !important; } .nox-home .research-apps-home, .quality-block, .nox-home .home-library{ padding:64px 0 !important; } / headings — a touch larger, generous line-height, 32/24 rhythm / .nox-home .section-head, .research-intro, .quality-block .section-head{ margin-bottom:32px !important; } .nox-home .home-library-head{ margin-bottom:0 !important; } / the library grid supplies its own gap / .nox-home .section-head h2, .quality-block .section-head h2, .home-library .section-head h2, .research-intro .display{ font-size:clamp(31px,8.4vw,42px) !important;line-height:1.14 !important;letter-spacing:var(--ls-heading) !important; } .nox-home .section-head .underline, .quality-block .section-head .underline, .research-intro-divider{ margin-top:22px !important; } .nox-home .section-head p, .quality-block .section-head p, .research-intro p{ font-size:15px !important;line-height:1.6 !important;margin-top:20px !important; } / ============ THE 2-COLUMN GRID (default everywhere) ============ / / Featured — flush, full-bleed edge-to-edge (matches the catalogue): the grid breaks out of the 20px page gutter to the viewport, hairline seams between cells, no gutters. The section heading above stays contained. / .nox-products ul.products{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; grid-auto-flow:dense !important; gap:0 !important; width:100vw !important;max-width:100vw !important; margin-left:calc(50% - 50vw) !important;margin-right:calc(50% - 50vw) !important; padding:0 !important;overflow:hidden !important; border-top:1px solid var(--line-soft) !important;border-bottom:1px solid var(--line-soft) !important; } / per-cell hairline seams — products AND editorial tiles / .nox-products ul.products > li.product, .nox-products ul.products > li.nox-ed-block{ box-shadow:1px 0 0 var(--line-soft), 0 1px 0 var(--line-soft) !important; } / Research collections — 3-up editorial covers on mobile (3×2 for the six fields), flush with hairline seams (matches the product grid). / .research-collections{ grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:0 !important;max-width:none !important;padding:0 !important; } / ============ PRODUCT CARD — flush cell, rows bottom-align ============ / / flush cell: opaque cream, bottom breathing room (no row-gap now), clip / .nox-products ul.products li.product.nox-card{ background:var(--bg) !important;padding:0 0 22px !important;overflow:hidden !important; } .nox-products .nox-card .nox-card-media{ overflow:hidden !important;border-radius:0 !important; } / text inset from the full-bleed image edge (matches the catalogue) / .nox-products .nox-card .nox-card-body, .nox-products .nox-card .nox-card-foot{ padding-left:14px !important;padding-right:14px !important; } .nox-card .nox-card-body{ padding-top:14px !important; } .nox-card .pc-cat{ font-size:10px !important;letter-spacing:.16em !important;margin-bottom:6px !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .nox-card .woocommerce-loop-product__title{ font-size:1.02rem !important;line-height:1.28 !important;margin-bottom:4px !important; min-height:2.56em; / reserve exactly 2 lines / display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; } .nox-card .pc-sub{ font-size:11px !important;line-height:1.4 !important;margin:0 0 2px !important; min-height:1.4em; / reserve one line / display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden; } .nox-card .nox-card-dose{ display:none !important; } / keep it minimal / .nox-card .nox-card-foot{ padding:8px 0 0 !important;margin-top:0 !important; } .nox-card .price{ font-size:1.05rem !important; } / no oversized buttons / flags — featured cards tap straight through / .nox-products .nox-card .nox-card-bag--mobile, .nox-products .nox-card .nox-card-flag, .nox-products .nox-card .nox-card-view{ display:none !important; } .nox-card:active{ transform:scale(.992);transition:transform .15s var(--ease-lux); } / ============ RESEARCH cards — compact 3-up cells ============ / .research-collection{ border-radius:0; } .research-collection .rc-media{ height:auto;aspect-ratio:4/5; } / proportional to the third-width cell / .research-collection .rc-body{ padding:10px 10px 14px !important; } .rc-name{ font-size:13px !important;line-height:1.18 !important;margin:0 0 3px !important; min-height:2.36em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; } .rc-sub{ font-size:10px !important;margin:0 !important; min-height:1.35em;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden; } .rc-compounds{ display:none !important; } .rc-explore{ display:none !important; } / no room for the link at 3-up — the whole card is the tap target / .research-collection:active{ transform:scale(.992); } / ============ OUR PROCESS — 2-up floating cards (mirrors desktop) ============ / .quality-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:14px !important;margin-top:0 !important; } .qb-item{ padding:26px 22px !important;border-radius:0 !important; } .qb-icon{ width:52px !important;height:52px !important;padding:14px !important;margin-bottom:18px !important; } .qb-item h3{ font-size:18px !important; } .qb-item p{ font-size:13px !important; } .qb-learn{ padding-top:22px !important; } / full-width editorial photo breaks — a touch taller so they read on a phone / .nox-editorial-band{ height:clamp(240px,64vw,340px) !important; } / featured "view all products" — modest, not oversized / .nox-products-cta{ margin-top:28px !important; } } / Small phones — trim the hero wordmark so NOX never crowds the edges / @media(max-width:600px){ .hero-photo-wordmark{ font-size:clamp(58px,17vw,84px) !important;letter-spacing:var(--ls-eyebrow-wide) !important;padding-left:.3em !important; } .hero-photo-subtitle{ font-size:11px !important;letter-spacing:.26em !important;margin-top:26px !important; } .hero-photo-rule{ margin:32px 0 24px !important; } } / Educational: with 3 cards, the third spans the full width below the pair (a clean 2-then-1 rather than a lonely half-card). Mobile only. / / ============================================================ [M2] MOBILE CATALOGUE — Melyon-style flush editorial grid ------------------------------------------------------------ ≤768px, shop / category / archive ONLY (never the homepage, never desktop/tablet). Two full-bleed columns sitting flush against each other and the screen edges, separated only by hairlines — no boxes, borders, radius or shadow. Full-bleed photography, then a quiet typographic block beneath. The whole cell links to the PDP; WooCommerce links/variations/wishlist/ cart all preserved. Fixed image ratio = no layout shift. ============================================================ / / mobile-only editorial tiles stay hidden on desktop/tablet — they enrich the mobile rhythm only; the desktop catalogue keeps its own editorial tiles. / .nox-ed-mobile-only{ display:none !important; } @media(max-width:768px){ / grid — flush, full-bleed. Dense auto-flow packs spanning editorial tiles with no holes; hairlines are drawn per-cell so odd counts / wide tiles never leave a grey empty cell. / body.woocommerce-shop ul.products, body.tax-product_cat ul.products, body.post-type-archive-product ul.products{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; grid-auto-flow:dense !important; gap:0 !important;background:transparent !important; width:100% !important;max-width:100% !important;margin:0 !important;padding:0 !important;box-sizing:border-box !important; overflow:hidden !important; border-top:1px solid var(--line-soft) !important;border-bottom:1px solid var(--line-soft) !important; } / per-cell hairline (right + bottom) — products AND editorial tiles / body.woocommerce-shop ul.products > li.product, body.tax-product_cat ul.products > li.product, body.post-type-archive-product ul.products > li.product, body.woocommerce-shop ul.products > li.nox-ed-block, body.tax-product_cat ul.products > li.nox-ed-block, body.post-type-archive-product ul.products > li.nox-ed-block{ box-shadow:1px 0 0 var(--line-soft), 0 1px 0 var(--line-soft) !important; } / cell — no box; opaque cream, hairlines drawn above / body.woocommerce-shop ul.products li.product.nox-card, body.tax-product_cat ul.products li.product.nox-card, body.post-type-archive-product ul.products li.product.nox-card{ display:flex !important;flex-direction:column; background:var(--bg) !important;border:0 !important;border-radius:0 !important; padding:0 0 22px !important;margin:0 !important;overflow:hidden !important; } / image — full-bleed cover, flush to the cell edges / body.woocommerce-shop .nox-card .nox-card-media, body.tax-product_cat .nox-card .nox-card-media, body.post-type-archive-product .nox-card .nox-card-media{ aspect-ratio:4/5 !important;background:var(--paper) !important;border-radius:0 !important;overflow:hidden !important; } body.woocommerce-shop .nox-card .nox-card-media img, body.tax-product_cat .nox-card .nox-card-media img, body.post-type-archive-product .nox-card .nox-card-media img{ object-fit:cover !important;padding:0 !important;transition:transform var(--dur-slow) var(--ease-lux) !important; } body.woocommerce-shop .nox-card:active .nox-card-media img, body.tax-product_cat .nox-card:active .nox-card-media img, body.post-type-archive-product .nox-card:active .nox-card-media img{ transform:scale(1.02) !important; } / strip the add-to-bag bars + sale flag off the catalogue cards / body.woocommerce-shop .nox-card .nox-card-bag, body.tax-product_cat .nox-card .nox-card-bag, body.post-type-archive-product .nox-card .nox-card-bag, body.woocommerce-shop .nox-card .nox-card-flag, body.tax-product_cat .nox-card .nox-card-flag, body.post-type-archive-product .nox-card .nox-card-flag{ display:none !important; } / text block — quiet, left-aligned, small inset (image stays full-bleed) / body.woocommerce-shop .nox-card .nox-card-body, body.tax-product_cat .nox-card .nox-card-body, body.post-type-archive-product .nox-card .nox-card-body{ display:flex !important;flex-direction:column;padding:14px 14px 0 !important; } body.woocommerce-shop .nox-card .pc-cat, body.tax-product_cat .nox-card .pc-cat, body.post-type-archive-product .nox-card .pc-cat{ color:var(--gold) !important;font-size:10px !important;font-weight:600 !important;letter-spacing:.18em !important; margin:0 0 7px !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } body.woocommerce-shop .nox-card .woocommerce-loop-product__title, body.tax-product_cat .nox-card .woocommerce-loop-producttitle, body.post-type-archive-product .nox-card .woocommerce-loop-producttitle{ font-family:var(--font-serif) !important;letter-spacing:var(--ls-heading);font-weight:400 !important;font-size:1.15rem !important;line-height:1.2 !important; color:var(--ink) !important;margin:0 0 5px !important; min-height:2.4em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; } body.woocommerce-shop .nox-card .pc-sub, body.tax-product_cat .nox-card .pc-sub, body.post-type-archive-product .nox-card .pc-sub{ display:-webkit-box !important;font-size:11.5px !important;line-height:1.4 !important;color:var(--ink-mid) !important; margin:0 0 5px !important;min-height:1.4em;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden; } body.woocommerce-shop .nox-card .nox-card-dose, body.tax-product_cat .nox-card .nox-card-dose, body.post-type-archive-product .nox-card .nox-card-dose{ display:block !important;font-size:11px !important;color:var(--ink-light) !important;letter-spacing:.02em !important;margin:0 0 10px !important; } body.woocommerce-shop .nox-card .nox-card-foot, body.tax-product_cat .nox-card .nox-card-foot, body.post-type-archive-product .nox-card .nox-card-foot{ padding:0 14px !important;margin-top:auto !important; } body.woocommerce-shop .nox-card .price, body.tax-product_cat .nox-card .price, body.post-type-archive-product .nox-card .price{ font-family:var(--font-serif) !important;font-weight:500 !important;font-size:1.12rem !important;color:var(--ink) !important;line-height:1.15; } body.woocommerce-shop .nox-card .price .from, body.tax-product_cat .nox-card .price .from, body.post-type-archive-product .nox-card .price .from{ display:block;font-family:var(--font-sans) !important;font-size:10px !important;font-weight:600 !important; letter-spacing:var(--ls-eyebrow) !important;text-transform:uppercase;color:var(--ink-light) !important;margin-bottom:3px; } / the whole cell already links to the PDP, so the mobile "View product" CTA is hidden for the clean flush look / body.woocommerce-shop .nox-card .nox-card-view, body.tax-product_cat .nox-card .nox-card-view, body.post-type-archive-product .nox-card .nox-card-view{ display:none !important; } / --- EDITORIAL PHOTO TILES — interspersed rhythm, within the gutter grid --- / / reveal the mobile-only single tiles here (hidden elsewhere) / body.woocommerce-shop li.nox-ed-mobile-only, body.tax-product_cat li.nox-ed-mobile-only, body.post-type-archive-product li.nox-ed-mobile-only{ display:block !important; } / single tile = one product slot; stretches to the product-card height / body.woocommerce-shop ul.products li.nox-ed-portrait, body.tax-product_cat ul.products li.nox-ed-portrait, body.post-type-archive-product ul.products li.nox-ed-portrait{ grid-column:span 1 !important;align-self:stretch !important; } / wide tile = both columns; capped span so fullwidth (span 3) can't overflow / body.woocommerce-shop ul.products li.nox-ed-landscape, body.tax-product_cat ul.products li.nox-ed-landscape, body.post-type-archive-product ul.products li.nox-ed-landscape, body.woocommerce-shop ul.products li.nox-ed-fullwidth, body.tax-product_cat ul.products li.nox-ed-fullwidth, body.post-type-archive-product ul.products li.nox-ed-fullwidth{ grid-column:span 2 !important;aspect-ratio:16/10 !important; } / flush photography — cover, gentle warm grade, no radius/shadow (bar hairline) / body.woocommerce-shop ul.products li.nox-ed-block, body.tax-product_cat ul.products li.nox-ed-block, body.post-type-archive-product ul.products li.nox-ed-block{ background:var(--paper) !important;border:0 !important;border-radius:0 !important;margin:0 !important;overflow:hidden !important; } body.woocommerce-shop .nox-ed-block .nox-ed-img, body.tax-product_cat .nox-ed-block .nox-ed-img, body.post-type-archive-product .nox-ed-block .nox-ed-img{ object-fit:cover !important;filter:saturate(1.03) contrast(1.02) !important; } } / ============================================================ Quick Add modal — a compact size + quantity picker (built by nox.js). Centred card on desktop, bottom sheet on mobile. Cream ground, ink hairlines, no shadow, no gold — consistent with the drawers. ============================================================ / .nox-qa-overlay{ position:fixed;inset:0;background:rgba(26,26,26,.4); opacity:0;visibility:hidden;z-index:150; transition:opacity var(--dur) ease,visibility 0s linear var(--dur); } .nox-qa-overlay.is-open{ opacity:1;visibility:visible;transition:opacity var(--dur) ease; } .nox-qa-modal{ position:fixed;z-index:160;left:50%;top:50%; width:min(420px,calc(100vw - 40px)); transform:translate(-50%,-46%);opacity:0;visibility:hidden;pointer-events:none; background:var(--bg);border:1px solid var(--line-strong);box-shadow:none; transition:opacity var(--dur) var(--ease-lux),transform var(--dur) var(--ease-lux),visibility 0s linear var(--dur); } .nox-qa-modal.is-open{ opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,-50%); transition:opacity var(--dur) var(--ease-lux),transform var(--dur) var(--ease-lux); } .nox-qa-close{ position:absolute;top:14px;right:16px;z-index:2;background:none;border:0; font-size:24px;line-height:1;color:var(--ink-light);cursor:pointer;width:32px;height:32px; display:flex;align-items:center;justify-content:center;transition:color var(--dur-fast) var(--ease-lux); } .nox-qa-close:hover{ color:var(--ink); } .nox-qa-body{ padding:38px 34px 34px; } .nox-qa-eyebrow{ display:block;font-family:var(--font-sans);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:var(--ls-eyebrow);color:var(--ink-light);margin-bottom:12px; } .nox-qa-name{ font-family:var(--font-serif);font-weight:300;font-size:26px;line-height:1.1;letter-spacing:var(--ls-heading);color:var(--ink);margin:0 0 8px; } .nox-qa-price{ font-family:var(--font-serif);font-size:16px;color:var(--ink-mid);margin-bottom:24px; } .nox-qa-price .price{ font-size:16px;color:var(--ink-mid); } .nox-qa-price del{ color:var(--ink-light);margin-right:6px; } .nox-qa-price ins{ text-decoration:none; } .nox-qa-sizes{ margin-bottom:24px; } .nox-qa-sizes-label,.nox-qa-qty-label{ display:block;font-family:var(--font-sans);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:var(--ls-eyebrow);color:var(--ink-light);margin-bottom:12px; } .nox-qa-size-grid{ display:flex;flex-wrap:wrap;gap:8px; } .nox-qa-size{ min-width:64px;padding:12px 16px;background:var(--bg);border:1px solid var(--line-strong);border-radius:0; font-family:var(--font-sans);font-size:13px;color:var(--ink);cursor:pointer; transition:background var(--dur-fast) var(--ease-lux),color var(--dur-fast) var(--ease-lux),border-color var(--dur-fast) var(--ease-lux); } .nox-qa-size:hover{ border-color:var(--ink); } .nox-qa-size.is-active{ background:var(--ink);color:var(--bg);border-color:var(--ink); } .nox-qa-qty{ margin-bottom:26px; } .nox-qa-stepper{ display:inline-flex;align-items:center;border:1px solid var(--line-strong); } .nox-qa-stepper button{ width:44px;height:44px;background:none;border:0;font-size:18px;color:var(--ink);cursor:pointer;line-height:1;transition:background var(--dur-fast) var(--ease-lux); } .nox-qa-stepper button:hover{ background:var(--bg-warm); } .nox-qa-qty-input{ width:52px;height:44px;text-align:center;border:0;border-left:1px solid var(--line-soft);border-right:1px solid var(--line-soft);background:none;font-family:var(--font-sans);font-size:15px;color:var(--ink);-moz-appearance:textfield;appearance:textfield; } .nox-qa-qty-input::-webkit-outer-spin-button,.nox-qa-qty-input::-webkit-inner-spin-button{ -webkit-appearance:none;margin:0; } .nox-qa-add{ display:block;width:100%;background:var(--ink);color:var(--bg);border:1px solid var(--ink);border-radius:0; font-family:var(--font-sans);font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:var(--ls-wide); padding:17px;cursor:pointer;transition:background var(--dur-fast) var(--ease-lux),color var(--dur-fast) var(--ease-lux),opacity var(--dur-fast) ease; } .nox-qa-add:hover{ background:transparent;color:var(--ink); } .nox-qa-add:disabled{ opacity:.4;cursor:not-allowed; } .nox-qa-add.is-loading{ opacity:.6;pointer-events:none; } .nox-qa-modal.is-loading .nox-qa-add{ opacity:.5;pointer-events:none; } .nox-qa-full{ display:inline-block;margin-top:16px;font-family:var(--font-sans);font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:var(--ls-eyebrow);color:var(--ink-mid);text-decoration:none;transition:color var(--dur-fast) var(--ease-lux); } .nox-qa-full:hover{ color:var(--ink); } body.nox-qa-open{ overflow:hidden; } @media(max-width:560px){ .nox-qa-modal{ left:0;right:0;bottom:0;top:auto;width:100%;transform:translateY(100%);border:0;border-top:1px solid var(--line-strong); } .nox-qa-modal.is-open{ transform:translateY(0); } .nox-qa-body{ padding:30px 22px calc(28px + env(safe-area-inset-bottom,0px)); } } @media(prefers-reduced-motion:reduce){ .nox-qa-overlay,.nox-qa-modal{ transition:none !important; } } / ============================================================ [13] CHECKOUT — premium research-ordering experience ------------------------------------------------------------ Presentational only (pairs with inc/checkout.php hooks). Two-column grid, sticky Research Summary, bespoke inputs, shipping + payment as selection cards, numbered sections, progress bar, trust strip. ============================================================ / / hide the default WooCommerce headings — replaced by the numbered ones / .woocommerce-checkout .woocommerce-billing-fields > h3, .woocommerce-checkout .woocommerce-additional-fields > h3, .woocommerce-checkout #order_review_heading{ display:none !important; } / ---- two-column layout, sticky summary ---- / .woocommerce-checkout form.checkout{ display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,0.92fr); gap:clamp(32px,4vw,64px);align-items:start;max-width:1240px;margin:0 auto; } .woocommerce-checkout form.checkout > .woocommerce-NoticeGroup, .woocommerce-checkout form.checkout > .woocommerce-form-coupon-toggle, .woocommerce-checkout form.checkout > .woocommerce-info{ grid-column:1 / -1; } .woocommerce-checkout #customer_details{ grid-column:1;width:auto !important;float:none !important; } .woocommerce-checkout #order_review{ grid-column:2;grid-row:1 / span 3;position:sticky;top:120px;width:auto !important;float:none !important; background:var(--bg-card) !important;border:1px solid rgba(0,0,0,.08) !important;padding:30px 28px !important; } / ---- numbered section headings ---- / .nox-co-head{ display:flex;gap:16px;align-items:flex-start;margin:0 0 22px; } .nox-co-head--nonum{ padding-left:0; } .nox-co-num{ flex:0 0 auto;width:34px;height:34px;display:grid;place-items:center; border:1px solid var(--line-strong);background:transparent; font-family:var(--font-sans);font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--ink); } .nox-co-num--inline{ display:inline-grid;width:26px;height:26px;font-size:10px;margin-right:10px;vertical-align:middle; } .nox-co-head-text{ min-width:0;padding-top:2px; } .nox-co-title{ font-family:var(--font-serif) !important;font-weight:300 !important;font-size:24px !important;color:var(--ink) !important;letter-spacing:var(--ls-heading);margin:0 0 4px !important;text-transform:none !important; } .nox-co-desc{ font-family:var(--font-sans);font-size:12.5px;line-height:1.55;color:var(--ink-mid);margin:0;max-width:440px; } / generous rhythm between sections / .woocommerce-checkout .woocommerce-billing-fields, .woocommerce-checkout .woocommerce-additional-fields{ margin-bottom:clamp(40px,4vw,56px); } / ---- bespoke inputs ---- / .woocommerce-checkout .form-row{ margin:0 0 18px;padding:0; } .woocommerce-checkout .form-row label{ font-family:var(--font-sans) !important;font-size:11px !important;font-weight:600 !important;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-mid) !important;margin-bottom:8px !important;display:block; } .woocommerce-checkout .input-text, .woocommerce-checkout select, .woocommerce-checkout .select2-selection, .woocommerce-checkout textarea{ border:1px solid var(--line) !important;border-radius:0 !important;background:var(--paper) !important; min-height:52px !important;padding:14px 16px !important; font-family:var(--font-sans) !important;font-size:14px !important;color:var(--ink) !important; transition:border-color var(--dur-fast) ease,box-shadow var(--dur-fast) ease !important;box-shadow:none !important; } .woocommerce-checkout .input-text:focus, .woocommerce-checkout select:focus, .woocommerce-checkout textarea:focus{ border-color:var(--ink) !important;box-shadow:0 0 0 1px var(--ink) !important;outline:none !important; } .woocommerce-checkout .select2-container .select2-selection--single{ height:52px !important;display:flex;align-items:center;border:1px solid var(--line) !important;border-radius:0 !important;background:var(--paper) !important; } .woocommerce-checkout .select2-container--focus .select2-selection{ border-color:var(--ink) !important; } / ---- Research Summary panel ---- / .woocommerce-checkout .woocommerce-checkout-review-order-table{ border:0 !important;background:transparent !important;margin:0 0 4px !important;width:100%; } .woocommerce-checkout .woocommerce-checkout-review-order-table thead{ display:none; } .woocommerce-checkout .woocommerce-checkout-review-order-table td, .woocommerce-checkout .woocommerce-checkout-review-order-table th{ border:0 !important;border-bottom:1px solid var(--line-soft) !important;padding:14px 0 !important;background:transparent !important;font-family:var(--font-sans);font-size:13.5px;color:var(--ink-mid); } .woocommerce-checkout .woocommerce-checkout-review-order-table .cart_item td.product-name{ color:var(--ink);font-family:var(--font-serif);letter-spacing:var(--ls-heading);font-size:15px; } .woocommerce-checkout .woocommerce-checkout-review-order-table .cart_item td.product-total{ font-family:var(--font-serif);color:var(--ink);text-align:right;white-space:nowrap; } .woocommerce-checkout .cart-subtotal th,.woocommerce-checkout .cart-subtotal td{ font-family:var(--font-sans) !important;text-transform:uppercase;letter-spacing:.14em;font-size:11px !important;color:var(--ink-mid) !important; } .woocommerce-checkout .order-total th{ font-family:var(--font-sans) !important;text-transform:uppercase;letter-spacing:.14em;font-size:11px !important;color:var(--ink) !important;border-bottom:0 !important;padding-top:18px !important; } .woocommerce-checkout .order-total td{ font-family:var(--font-serif) !important;font-size:24px !important;color:var(--ink) !important;text-align:right;border-bottom:0 !important;padding-top:18px !important; } .woocommerce-checkout .order-total .amount{ font-weight:500; } / dispatch method rows as heading + list / .nox-co-rowhead th{ padding:24px 0 10px !important;border-bottom:0 !important;font-family:var(--font-serif) !important;font-weight:300 !important;font-size:16px !important;color:var(--ink) !important;text-transform:none !important; } .nox-co-rowhead-sub{ display:block;font-family:var(--font-sans);font-size:11.5px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink-light);margin-top:3px; } .woocommerce-checkout #shipping_method{ list-style:none;margin:0;padding:0; } .woocommerce-checkout #shipping_method li{ display:flex;align-items:center;gap:12px;padding:16px 16px !important;margin:0 0 10px !important; border:1px solid var(--line) !important;background:var(--paper);cursor:pointer;transition:border-color var(--dur-fast) ease,background var(--dur-fast) ease; } .woocommerce-checkout #shipping_method li:hover{ border-color:var(--line-strong) !important; } .woocommerce-checkout #shipping_method li:has(input:checked){ border-color:var(--gold) !important;background:var(--bg-warm); } .woocommerce-checkout #shipping_method li label{ margin:0 !important;font-family:var(--font-sans) !important;font-size:13.5px !important;text-transform:none !important;letter-spacing:0 !important;color:var(--ink) !important;font-weight:500 !important;flex:1;display:flex;justify-content:space-between;gap:12px; } .woocommerce-checkout #shipping_method li .amount{ font-family:var(--font-serif);color:var(--ink); } .woocommerce-checkout #shipping_method input[type="radio"]{ accent-color:var(--gold); } / ---- payment method cards ---- / .nox-co-payhead{ margin:28px 0 16px;font-family:var(--font-serif);font-weight:300;font-size:16px;color:var(--ink); } .nox-co-payhead-sub{ display:block;font-family:var(--font-sans);font-size:11.5px;color:var(--ink-light);margin-top:3px; } .woocommerce-checkout #payment{ background:transparent !important;border:0 !important;border-radius:0 !important; } .woocommerce-checkout #payment ul.payment_methods{ border:0 !important;padding:0 !important;margin:0 0 16px !important;list-style:none; } .woocommerce-checkout #payment ul.payment_methods > li{ border:1px solid var(--line) !important;background:var(--paper) !important;padding:16px 18px !important;margin:0 0 10px !important; transition:border-color var(--dur-fast) ease,background var(--dur-fast) ease; } .woocommerce-checkout #payment ul.payment_methods > li:has(input:checked){ border-color:var(--gold) !important;background:var(--bg-warm) !important; } .woocommerce-checkout #payment ul.payment_methods > li label{ font-family:var(--font-sans) !important;font-size:14px !important;font-weight:500 !important;color:var(--ink) !important;text-transform:none !important;letter-spacing:0 !important; } .woocommerce-checkout #payment input[type="radio"]{ accent-color:var(--gold); } .woocommerce-checkout #payment div.payment_box{ background:var(--bg) !important;border-radius:0 !important;margin-top:12px !important;font-family:var(--font-sans) !important;font-size:12.5px !important;color:var(--ink-mid) !important; } .woocommerce-checkout #payment div.payment_box::before{ display:none !important; } / ---- progress bar ---- / .nox-co-progress{ margin:0 0 22px; } .nox-co-progress-msg{ margin:0 0 9px;font-family:var(--font-sans);font-size:12.5px;color:var(--ink-mid); } .nox-co-progress-msg strong{ color:var(--ink);font-weight:600; } .nox-co-progress-msg span{ color:var(--gold);font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:11.5px; } .nox-co-progress-msg.is-unlocked{ color:var(--ink); } .nox-co-progress-msg.is-unlocked span:first-child{ color:var(--gold);font-weight:700; } .nox-co-progress-track{ height:4px;background:var(--line-soft);overflow:hidden; } .nox-co-progress-fill{ display:block;height:100%;background:var(--gold);transition:width .5s var(--ease-lux); } .nox-co-summary-head{ display:flex;align-items:center;gap:14px;margin:0 0 20px;padding-bottom:18px;border-bottom:1px solid var(--line-soft); } .nox-co-summary-head .nox-co-title{ font-size:22px !important; } / ---- reassurance ---- / .nox-co-reassure-row td{ border-bottom:0 !important;padding:18px 0 0 !important; } .nox-co-reassure{ list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px; } .nox-co-reassure li{ display:flex;align-items:center;gap:8px;font-family:var(--font-sans);font-size:11.5px;color:var(--ink-mid); } .nox-co-reassure-tick{ color:var(--gold);font-weight:700; } / ---- buttons ---- / .woocommerce-checkout #place_order{ display:block !important;width:100% !important;text-align:center !important; background:var(--ink) !important;color:var(--bg) !important;border:1px solid var(--ink) !important;border-radius:0 !important; font-family:var(--font-sans) !important;font-size:12px !important;font-weight:500 !important;text-transform:uppercase !important;letter-spacing:var(--ls-wide) !important; padding:20px 24px !important;margin-top:22px !important;transition:background var(--dur-fast) ease,color var(--dur-fast) ease !important; } .woocommerce-checkout #place_order:hover{ background:transparent !important;color:var(--ink) !important; } .nox-co-whatsapp{ display:flex;align-items:center;justify-content:center;gap:10px;width:100%;margin-top:12px;padding:17px 24px; background:transparent;border:1px solid var(--line-strong);color:var(--ink-mid);text-decoration:none; font-family:var(--font-sans);font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.16em; transition:border-color var(--dur-fast) ease,color var(--dur-fast) ease; } .nox-co-whatsapp svg{ color:#25d366; } .nox-co-whatsapp:hover{ border-color:var(--ink);color:var(--ink); } / remove the duplicate WhatsApp button on checkout (the .nox-cart-wa one that nox.js injects on cart/checkout) — keep only the dedicated checkout button. / .woocommerce-checkout .nox-cart-wa, .woocommerce-checkout #order_review a[href="wa.me"]:not(.nox-co-whatsapp), .woocommerce-checkout form.checkout a[href="wa.me"]:not(.nox-co-whatsapp){ display:none !important; } / left-align the Research Summary product line / .woocommerce-checkout .woocommerce-checkout-review-order-table td.product-name{ text-align:left !important; } .woocommerce-checkout .woocommerce-checkout-review-order-table td.product-total{ text-align:right !important;white-space:nowrap; } / the default "Shipment" package label is redundant with the Dispatch Method heading / .woocommerce-checkout .woocommerce-shipping-totals.shipping > th{ font-size:0 !important;padding:0 !important;width:0 !important; } / ---- per-line meta (size, category) in the summary ---- / .woocommerce-checkout .woocommerce-checkout-review-order-table .cart_item dl.variation, .woocommerce-checkout .woocommerce-checkout-review-order-table .cart_item .wc-item-meta{ margin:6px 0 0 !important;padding:0;list-style:none;font-family:var(--font-sans);font-size:11px;color:var(--ink-light);letter-spacing:.02em;line-height:1.6; } .woocommerce-checkout .woocommerce-checkout-review-order-table dl.variation dt, .woocommerce-checkout .wc-item-meta dt{ display:inline;float:none;clear:none;font-weight:600;text-transform:uppercase;letter-spacing:.1em;margin:0 4px 0 0; } .woocommerce-checkout .woocommerce-checkout-review-order-table dl.variation dd, .woocommerce-checkout .wc-item-meta dd, .woocommerce-checkout .wc-item-meta li{ display:block;margin:0; } .woocommerce-checkout .woocommerce-checkout-review-order-table dl.variation dd p, .woocommerce-checkout .wc-item-meta dd p{ margin:0;display:inline; } / ---- shipping method sub-details ---- / .nox-ship-sub{ display:block;font-family:var(--font-sans);font-size:11px;font-weight:400;text-transform:none;letter-spacing:.02em;color:var(--ink-light);margin-top:4px; } / Remove the default browser blue focus/outline/box-shadow around the Research Summary panel and its non-interactive containers only. This never touches the interactive controls inside (inputs, buttons, payment radios, links) — those keep their own NOX focus-visible state from the global focus system. / .woocommerce-checkout .ct-order-review, .woocommerce-checkout .ct-order-review:focus, .woocommerce-checkout .ct-order-review:focus-within, .woocommerce-checkout .ct-order-review:focus-visible, .woocommerce-checkout #order_review, .woocommerce-checkout #order_review:focus, .woocommerce-checkout #order_review:focus-within, .woocommerce-checkout #order_review:focus-visible, .woocommerce-checkout .woocommerce-checkout-review-order, .woocommerce-checkout .woocommerce-checkout-review-order:focus, .woocommerce-checkout .woocommerce-checkout-review-order:focus-within, .woocommerce-checkout .woocommerce-checkout-review-order-table, .woocommerce-checkout .woocommerce-checkout-review-order-table:focus, .woocommerce-checkout .woocommerce-checkout-review-order-table:focus-within, .woocommerce-checkout #order_review #payment, .woocommerce-checkout #order_review #payment:focus, .woocommerce-checkout #order_review #payment:focus-within, .woocommerce-checkout .nox-co-summary-head, .woocommerce-checkout .nox-co-summary-head:focus{ outline:0 !important;box-shadow:none !important; } / product image on the summary line / .woocommerce-checkout .woocommerce-checkout-review-order-table td.product-name{ overflow:hidden; } .woocommerce-checkout td.product-name .nox-sum-thumb{ float:left;margin:2px 14px 6px 0; } .woocommerce-checkout td.product-name .nox-sum-thumb img{ width:60px;height:auto;display:block;border:1px solid var(--line);max-width:60px; } / ---- WhatsApp order thank-you CTA ---- / .nox-co-wa-thankyou{ max-width:520px;margin:24px 0;padding:24px;border:1px solid var(--line);background:var(--bg-card); } .nox-co-wa-thankyou p{ margin:0 0 16px;font-family:var(--font-sans);font-size:14px;line-height:1.6;color:var(--ink-mid); } .nox-co-wa-thankyou .nox-co-whatsapp{ margin:0; } / ---- trust strip ---- / .nox-co-trust{ max-width:1240px;margin:clamp(48px,6vw,80px) auto 0;padding-top:40px;border-top:1px solid var(--line-soft); } .nox-co-trust-grid{ display:grid;grid-template-columns:repeat(4,1fr); } .nox-co-trust-block{ padding:0 24px;border-left:1px solid var(--line-soft); } .nox-co-trust-block:first-child{ border-left:0;padding-left:0; } .nox-co-trust-block strong{ display:block;font-family:var(--font-sans);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.16em;color:var(--ink);margin-bottom:6px; } .nox-co-trust-block span{ font-family:var(--font-sans);font-size:12.5px;line-height:1.5;color:var(--ink-mid); } / ---- responsive ---- / @media(max-width:900px){ .woocommerce-checkout form.checkout{ grid-template-columns:1fr;gap:40px; } .woocommerce-checkout #order_review{ grid-column:1;grid-row:auto;position:static;top:auto; } .nox-co-trust-grid{ grid-template-columns:1fr 1fr;gap:28px 0; } .nox-co-trust-block:nth-child(3){ border-left:0;padding-left:0; } } @media(max-width:520px){ / mobile only: 2x2 editorial card grid instead of a tall single-column list / .nox-co-trust-grid{ grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:12px; } .nox-co-trust-block, .nox-co-trust-block:first-child, .nox-co-trust-block:nth-child(3){ display:flex;flex-direction:column;justify-content:center; border:1px solid var(--line-soft);border-radius:0; padding:22px;margin:0;text-align:left; } .nox-co-trust-block strong{ margin-bottom:8px;letter-spacing:.18em; } } / ============================================================ [14] LEGAL STRIP + BACK-TO-TOP (site-wide finishing touches) ============================================================ / / ---- legal information strip beneath the footer ---- / .nox-legal{ border-top:1px solid var(--line-soft);background:var(--bg);padding:clamp(30px,4vw,46px) 24px; } .nox-legal-inner{ max-width:900px;margin:0 auto;display:flex;flex-direction:column;align-items:center;text-align:center;gap:0; } .nox-legal-brand{ font-family:var(--font-serif);font-weight:400;font-size:15px;letter-spacing:.04em;color:var(--ink);margin-bottom:16px; } .nox-legal-meta{ margin:0;font-family:var(--font-sans);font-size:10.5px;font-weight:500;text-transform:uppercase;letter-spacing:.18em;color:var(--ink-light);line-height:1.95; } .nox-legal-rou{ margin:16px 0 0;font-family:var(--font-sans);font-size:10.5px;font-weight:500;text-transform:uppercase;letter-spacing:var(--ls-eyebrow);color:var(--ink-mid); } / ---- floating "Back to top" — a small editorial navigation control ---- Warm cream, hairline border, 4px radius, very subtle shadow. The word TOP above a thin upward arrow. Sits above page content but BELOW every overlay (bag/saved/account/menu/search drawers, modals — all z-index ≥ 120). / .nox-totop{ position:fixed;right:32px;bottom:32px;z-index:110; width:56px;height:56px; display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:3px; background:#f5f2ec;border:1px solid rgba(0,0,0,.10);border-radius:4px;color:#1a1a1a;cursor:pointer; box-shadow:0 8px 24px rgba(0,0,0,.08); opacity:0;transform:translateY(8px);pointer-events:none; transition:opacity .3s var(--ease-lux),transform .22s ease,background .22s ease,border-color .22s ease,color .22s ease; } .nox-totop.is-visible{ opacity:1;transform:none;pointer-events:auto; } .nox-totop-label{ font-family:var(--font-sans);font-size:10px;font-weight:500;line-height:1; text-transform:uppercase;letter-spacing:.25em;color:inherit;padding-left:.25em; / optical: offset trailing tracking / } .nox-totop-arrow{ display:block;color:inherit; } / hover (desktop): invert to near-black, lift 2px / @media(hover:hover){ .nox-totop:hover{ background:#1a1a1a;border-color:#1a1a1a;color:#f5f2ec;transform:translateY(-2px); } } .nox-totop:active{ transform:scale(.95); } / NOX focus — never the default browser blue outline / .nox-totop:focus{ outline:none; } .nox-totop:focus-visible{ outline:none;box-shadow:0 8px 24px rgba(0,0,0,.08),0 0 0 2px rgba(154,133,89,.35); } @media(max-width:640px){ .nox-totop{ right:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));width:48px;height:48px; } } @media(prefers-reduced-motion:reduce){ .nox-totop{ transition:opacity var(--dur-fast) var(--ease-lux);transform:none; } .nox-totop.is-visible{ transform:none; } .nox-totop:hover{ transform:none; } .nox-totop:active{ transform:none; } } / ============================================================ [MEGA] Catalogue editorial mega menu (desktop only) ------------------------------------------------------------ Compact three-column editorial panel appended into .ct-header by nox.js: curated categories (25%) | landscape product photography on cream (30%) | editorial copy (45%). Pure white, square, thin top hairline, soft shadow. Fade + 8px settle over 180ms; the photograph fades in 80ms after. Hovering a category crossfades the photograph (200ms) and fades the headline + copy (nox.js toggles .is-fading / .is-active). No gold, gradients or heavy shadow. Hidden on mobile. ============================================================ / .nox-mega{ position:absolute;top:100%;left:0;width:100%;z-index:900; background:#fff; border-top:1px solid var(--line-soft); box-shadow:0 18px 40px -24px rgba(26,24,20,.16); opacity:0;visibility:hidden;transform:translateY(8px);pointer-events:none; transition:opacity .18s ease-out, transform .18s ease-out, visibility 0s linear .18s; } .nox-mega.is-open{ opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto; transition:opacity .18s ease-out, transform .18s ease-out, visibility 0s; } .nox-mega-inner{ max-width:1040px;margin:0 auto;padding:36px 44px 30px; display:grid;grid-template-columns:minmax(0,25fr) minmax(0,30fr) minmax(0,45fr);gap:clamp(24px,2.8vw,40px); align-items:center; / all three columns share one vertical axis / } / nav links — a subtle underline that grows from the left, no gold / .nox-mega-all, .nox-mega-cat{ align-self:flex-start;position:relative;text-decoration:none; transition:color .18s ease-out; } .nox-mega-all::after, .nox-mega-cat::after{ content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px; background:var(--ink);transform:scaleX(0);transform-origin:left; transition:transform .18s ease-out; } .nox-mega-all:hover, .nox-mega-cat:hover{ color:var(--ink); } .nox-mega-all:hover::after, .nox-mega-cat:hover::after{ transform:scaleX(1); } / ---- left: refined navigation list ---- / .nox-mega-left{ display:flex;flex-direction:column;align-items:flex-start; } .nox-mega-all{ font-family:var(--font-sans);font-size:13px;font-weight:600; text-transform:uppercase;letter-spacing:.1em;color:var(--ink); display:inline-flex;align-items:center;gap:8px; } .nox-mega-divider{ display:block;height:1px;width:100%;background:var(--line);margin:14px 0 12px; } .nox-mega-cats{ display:flex;flex-direction:column;align-items:flex-start;gap:14px; } .nox-mega-cat{ font-family:var(--font-sans);font-size:14px;font-weight:500;letter-spacing:.01em; line-height:1.25; / compact rows — type size unchanged / color:var(--ink-mid); } .nox-mega-arrow{ font-size:12px;line-height:1; } / ---- centre: landscape product photography on cream. A stack of absolutely-positioned images; hovering a category crossfades to the matching one (200ms opacity only — no zoom, no slide). ---- / .nox-mega-center{ display:flex;align-items:center;justify-content:center; } .nox-mega-media{ position:relative;width:min(100%,204px);aspect-ratio:4/3;overflow:hidden; background:var(--bg);border:0;box-shadow:none; opacity:0;transition:opacity .18s ease-out; } .nox-mega.is-open .nox-mega-media{ opacity:1;transition-delay:.08s; } .nox-mega-img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; opacity:0;transition:opacity var(--dur-fast) ease-out; } .nox-mega-img.is-active{ opacity:1; } / ---- right: editorial copy (stronger hierarchy). The small left padding gives the column breathing room from the photograph. ---- / .nox-mega-right{ display:flex;flex-direction:column;align-items:flex-start; padding-left:clamp(6px,1vw,14px); } .nox-mega-eyebrow{ display:block;font-family:var(--font-sans);font-size:10px;font-weight:600; text-transform:uppercase;letter-spacing:var(--ls-eyebrow);color:var(--ink-light);margin-bottom:12px; } .nox-mega-title{ margin:0 0 14px;font-family:var(--font-serif);font-weight:400; font-size:25px;line-height:1.36;letter-spacing:var(--ls-heading);color:var(--ink); min-height:2.72em; / two lines — no reflow when copy swaps / transition:opacity .18s ease-out; } .nox-mega-copy{ margin:0 0 18px;max-width:30em; font-family:var(--font-sans);font-size:13.5px;line-height:1.65;color:var(--ink-mid); min-height:3.3em; / two lines — keeps the CTA anchored / transition:opacity .18s ease-out; } / nox.js fades the copy out (100ms), swaps the text, then fades back in. / .nox-mega-right.is-fading .nox-mega-title, .nox-mega-right.is-fading .nox-mega-copy{ opacity:0; } .nox-mega-cta{ align-self:flex-start;position:relative;text-decoration:none; font-family:var(--font-sans);font-size:11.5px;font-weight:600; text-transform:uppercase;letter-spacing:.14em;color:var(--ink); display:inline-flex;align-items:center;gap:7px; transition:color .18s ease-out; } .nox-mega-cta .nox-mega-arrow{ transition:transform .18s ease-out; } .nox-mega-cta:hover{ color:var(--ink); } .nox-mega-cta:hover .nox-mega-arrow{ transform:translateX(4px); } / Catalogue nav item: its hover/open underline grows from the LEFT. / .ct-header .nox-has-mega > a::after{ transform-origin:left; } / Home-over-hero: keep nav hover bronze even while the bar is transparent (header nav behaviour — unchanged from before this redesign). / body.home:not(.nox-nav-stuck) .ct-header .menu-item > a:hover{ color:var(--gold) !important; } / Desktop only — never on the mobile / collapsed nav. / @media(max-width:1000px){ .nox-mega{ display:none !important; } } @media(prefers-reduced-motion:reduce){ .nox-mega{ transition:opacity .18s ease-out, visibility 0s linear .18s;transform:none; } .nox-mega.is-open{ transform:none; } .nox-mega-media,.nox-mega-img{ transition:opacity .18s ease-out; } } / ============================================================ [15] FOCUS-VISIBLE — one keyboard-focus language (Phase 1). :focus-visible fires only for keyboard / assistive navigation, so pointer interactions look exactly as before. Inputs keep their existing ink box-shadow ring; this covers links, buttons and summary toggles, which previously had no visible indicator. ============================================================ / a:focus-visible, button:focus-visible, summary:focus-visible, [role="radio"]:focus-visible, [tabindex]:focus-visible{ outline:1px solid var(--ink) !important; outline-offset:3px; } / dark surfaces — the ring flips to cream */ .nox-footer a:focus-visible, .nox-final-cta a:focus-visible, .nox-shop-hero a:focus-visible, .hero-photo-bg a:focus-visible{ outline-color:var(--on-dark) !important; }