/* ========================================================================== PolarLabs Theme — main.css Premium, minimal, scientific. Navy + electric-blue + icy system. Sections: 1) Tokens 2) Reset/base 3) Layout 4) Buttons/badges/icons 5) Header/nav/drawer 6) Hero 7) Home sections 8) Cards/grids 9) Forms 10) Accordion/carousel 11) Gate 12) Footer 13) Utilities 14) Responsive 15) Reduced motion / print ========================================================================== */ /* 1. TOKENS — authoritative PolarLabs design system (finalized; OD-009). Established token NAMES are retained so component CSS is unchanged; only the values are mapped to the finalized palette. Single source of truth — no duplicate/conflicting :root blocks exist elsewhere. Colour intent: green = genuine approved/success ONLY, yellow = pending/warning ONLY. */ :root { /* Navy / dark surfaces */ --pl-navy: #07182D; /* Polar Navy */ --pl-navy-900: #020B16; /* Midnight (darkest) */ --pl-navy-800: #0C2038; /* Dark Surface */ --pl-navy-700: #163A5E; /* mid navy — gradients, badge text on light */ /* Blues */ --pl-blue: #2878F5; /* Polar Blue — fills / accents / icons */ --pl-blue-600: #1E63D8; /* hover / pressed */ --pl-blue-050: #EAF3FF; /* Ice Blue — light blue surface */ --pl-electric: #4B96FF; /* Electric Blue */ --pl-link: #2269D8; /* accessible link text on light (AA ≈5.0:1) */ /* On-dark text */ --pl-icy: #F4F8FF; /* Text on Dark */ --pl-icy-200: #CBDDFF; /* secondary text on dark */ /* Text on light */ --pl-ink: #0B1D35; /* Primary Text */ --pl-muted: #42526A; /* Body Text — secondary copy (AA on white) */ --pl-muted-soft: #718096; /* Muted Text — de-emphasised meta only */ /* Lines / surfaces */ --pl-line: #DCE6F2; /* Border — decorative dividers / card edges (NOT control boundaries) */ --pl-line-strong: #C4D2E3; /* Strong Border — decorative cards/buttons (kept; ~1.45:1, do not use for control boundaries) */ --pl-field-border: #6E8098; /* Interactive FORM-CONTROL boundary (DR-070) — WCAG 1.4.11 AA: 3.82:1 on frost, 4.04:1 on white. Use for input/select/textarea/checkbox borders, never decorative dividers. */ --pl-surface: #FFFFFF; /* White */ --pl-surface-2: #F6F9FD; /* Frost */ --pl-surface-3: #F0F5FB; /* Soft Surface */ --pl-card-tile: linear-gradient(180deg, var(--pl-icy) 0%, var(--pl-blue-050) 100%); /* shared product-card image tile (M3.1) — swap this one value to restyle every card tile */ /* Status — success/green + pending/yellow + info/blue + error/red */ --pl-pending: #A66A08; --pl-pending-bg: #FFF3D2; --pl-success: #177A54; --pl-success-bg: #E4F6EE; --pl-info: #2269D8; --pl-info-bg: #E8F1FF; --pl-danger: #B83232; --pl-danger-bg: #FDEAEA; /* Error/red — darkened from #C43D3D for WCAG 1.4.3 AA (5.1:1 on danger-bg / white); DR-070. Never used as a background. */ /* Status BORDER tokens (design-system adoption) — the hairline tint each status badge/message/note already used as a raw hex in ≥2 places. Naming completes the existing fill+bg status families so no status border is hand-typed (account.css had already drifted its borders — these tokens bind it back to one system). */ --pl-success-border: #C7E8D6; --pl-pending-border: #F0E2BF; --pl-info-border: #CFE1FD; --pl-danger-border: #F0C9C4; --pl-radius-sm: 8px; --pl-radius: 12px; --pl-radius-lg: 18px; --pl-radius-pill: 999px; --pl-radius-media: clamp(26px, 2.6vw + 8px, 32px); /* RC.6.6 — PDP media surface ONLY (softer continuous radius: ~26px mobile → 32px desktop). Never apply to product cards or global surfaces. */ --pl-shadow-sm: 0 1px 2px rgba(2, 11, 22, .06), 0 1px 3px rgba(2, 11, 22, .05); --pl-shadow: 0 8px 24px rgba(2, 11, 22, .08); --pl-shadow-lg: 0 20px 48px rgba(2, 11, 22, .14); /* Primary commerce CTA elevation — ONE restrained blue shadow shared across the purchase funnel: PDP Add-to-Cart, cart Proceed, checkout Place-order and the mini-cart Proceed. Value matches .pl-btn--primary so every primary blue button carries the same elevation; the checkout Place-order's heavier one-off glow is retired onto this. A single scoped CTA contract — NOT the global token migration. */ --pl-cta-shadow: 0 6px 16px rgba(40, 120, 245, .24); --pl-cta-shadow-hover: 0 10px 22px rgba(40, 120, 245, .30); /* Opaque: the previous rgba(40,120,245,.38) composited to ~#ADCCFB = 1.64:1 on white and 2.51:1 on the blue button fill — both under the 3:1 non-text contrast floor. Accessibility outranks aesthetics here. */ --pl-ring: 0 0 0 3px #2878F5, 0 0 0 5px rgba(255,255,255,.9); /* DR-006 — Figma-exact layout. --pl-container is the CONTENT column width (gutters sit OUTSIDE it; see .pl-container's calc()), not the box width. Verified by measurement on the live Shop, not derived on paper: 390px -> gutter 24, content 342, cards (342-12)/2 = 165 (Figma 49:29) 1440px -> gutter 40, content 1248, cards 4x300 + 3x16 (Figma 8:2) 1248 is exactly 4*300 + 3*16, which is what makes the 4-up grid land. At 1440 the box caps at 1328 and centres, putting the content 96px from the viewport edge — Figma's authored px96. Do not "simplify" the calc(). */ --pl-container: 1248px; --pl-gutter: clamp(24px, 4vw, 40px); --pl-header-h: 72px; --pl-header-h-scrolled: 58px; /* M2.1 masthead scroll-morph condensed height (DR-063) */ /* Type — Inter (body/UI) + Manrope (headings). Self-hosted via the approved asset process at packaging (see assets/fonts/README.md); graceful system fallback until then. No external font CDN (privacy-conscious). */ --pl-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --pl-font-heading: "Manrope", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --pl-mono: "SFMono-Regular", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace; --pl-ease: cubic-bezier(.25, .8, .35, 1); /* smooth ease-out */ --pl-dur: .2s; /* 200ms — snappy interactive default */ --pl-dur-slow: .3s; /* drawers / overlays */ /* --- M0.1 additive token families (2026-07-24) -------------------------- New semantic families for the design-system foundation. INTENTIONALLY UNCONSUMED in M0.1: no existing token is removed/renamed/revalued and no component styling changes, so adding these custom properties does not alter any current render. Later M0.x steps migrate raw z-index / type-size / line-height values onto them. Motion additions EXTEND (never redefine) --pl-ease / --pl-dur / --pl-dur-slow above. */ /* z-index taxonomy (M0.6) — names match the ACTUAL architectural layers. Local stacking primitives then global UI layers, ascending. z-index:0 stays a raw literal (self-documenting stacking-context reset). Still UNCONSUMED — the M0.6A adoption pass re-points raw z-index literals onto these. */ --pl-z-decorative: -2; /* .pl-hero__bg — purely decorative back layer */ --pl-z-below: -1; /* decorative behind content */ --pl-z-base: 1; /* content raised above a sibling */ --pl-z-raised: 2; /* raised above base */ --pl-z-header: 900; /* sticky site header */ --pl-z-pdp-sticky: 950; /* PDP mobile sticky purchase bar — above content/header, below every overlay */ --pl-z-nav-drawer: 1000; /* mobile off-canvas nav drawer */ --pl-z-cart-drawer: 1100; /* cart drawer */ --pl-z-gate: 2000; /* researcher gate — full-screen overlay */ --pl-z-skip: 100000; /* skip link — tops everything (a11y) */ /* Type-size scale — base 16px, ~1.25 ratio (fluid clamp() left to consumers) */ --pl-text-xs: .75rem; --pl-text-sm: .875rem; --pl-text-base: 1rem; --pl-text-md: 1.125rem; --pl-text-lg: 1.25rem; --pl-text-xl: 1.5rem; --pl-text-2xl: 2rem; --pl-text-3xl: 2.5rem; /* Line-height scale — consolidates the current spread to four steps */ --pl-leading-tight: 1.2; --pl-leading-snug: 1.35; --pl-leading-normal: 1.5; --pl-leading-relaxed: 1.6; /* Motion — additive steps + a standard easing trio (extend, not redefine) */ --pl-dur-fast: .1s; --pl-dur-slower: .5s; --pl-ease-in: cubic-bezier(.4, 0, 1, 1); --pl-ease-out: cubic-bezier(0, 0, .2, 1); --pl-ease-in-out: cubic-bezier(.4, 0, .2, 1); /* Elevation — one additive hairline step (existing shadow scale unchanged) */ --pl-shadow-xs: 0 1px 2px rgba(2, 11, 22, .05); /* --- M0.5 spacing scale (2026-07-25, additive/unconsumed) ----------------- Value-named 4px scale in px, consistent with --pl-gutter / --pl-container / --pl-header-h. Establishes the vocabulary for the ~905 hard-coded spacing literals (M0.4 audit). INTENTIONALLY UNCONSUMED — no declaration is replaced, so render is unchanged; adoption is later per-surface work. --pl-space-22 and --pl-space-28 deliberately omitted (owner decision) — rationalize at adoption. */ --pl-space-0: 0; --pl-space-2: 2px; --pl-space-4: 4px; --pl-space-6: 6px; --pl-space-8: 8px; --pl-space-10: 10px; --pl-space-12: 12px; --pl-space-14: 14px; --pl-space-16: 16px; --pl-space-18: 18px; --pl-space-20: 20px; --pl-space-24: 24px; /* coincides with --pl-gutter min */ --pl-space-32: 32px; --pl-space-40: 40px; /* coincides with --pl-gutter max */ --pl-space-48: 48px; --pl-space-64: 64px; } /* 2. RESET / BASE ----------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--pl-font); font-size: 16px; line-height: 1.6; color: var(--pl-ink); background: var(--pl-surface); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img, svg, video { max-width: 100%; height: auto; display: block; } a { color: var(--pl-link); text-decoration: none; transition: color var(--pl-dur) var(--pl-ease); } a:hover { color: var(--pl-blue-600); } h1, h2, h3, h4 { font-family: var(--pl-font-heading); color: var(--pl-navy); line-height: 1.15; margin: 0 0 .5em; font-weight: 700; letter-spacing: -.01em; } p { margin: 0 0 1em; } ul, ol { margin: 0; padding: 0; } button { font: inherit; cursor: pointer; } :focus-visible { outline: none; box-shadow: var(--pl-ring); border-radius: var(--pl-radius-sm); } /* Several components animate box-shadow, which made the focus ring fade in over var(--pl-dur). A keyboard user must see the indicator immediately. */ :focus-visible { transition: none !important; } /* The chrome (skip-link, bars, header, main, footer) are direct children of ; making body.pl-theme the flex column activates the .pl-main / .pl-footer sticky- footer rules so the footer anchors to the viewport bottom on short pages instead of floating up. (.pl-viewport is kept for any wrapper that opts in.) */ body.pl-theme { display: flex; flex-direction: column; min-height: 100dvh; } .pl-viewport { display: flex; flex-direction: column; min-height: 100vh; } .pl-main { flex: 1 0 auto; } .pl-skip-link { position: absolute; left: -9999px; top: 0; z-index: var(--pl-z-skip); background: var(--pl-navy); color: #fff; padding: 12px 18px; border-radius: 0 0 var(--pl-radius) 0; } .pl-skip-link:focus { left: 0; color: #fff; } .pl-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* 3. LAYOUT ----------------------------------------------------------------- */ /* max-width carries the gutters so --pl-container stays the true CONTENT width under box-sizing:border-box. Using max-width:var(--pl-container) directly would make padding eat into the column and yield 1168px content at 1440, not 1248. */ .pl-container { width: 100%; max-width: calc(var(--pl-container) + (var(--pl-gutter) * 2)); margin-inline: auto; padding-inline: var(--pl-gutter); } .pl-section { padding-block: clamp(48px, 7vw, 96px); } .pl-section--muted { background: var(--pl-surface-2); } .pl-section__head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .pl-sectionhead { max-width: 62ch; margin-bottom: 32px; } .pl-sectionhead--center { margin-inline: auto; text-align: center; } .pl-sectionhead__title { font-size: clamp(1.6rem, 1.1rem + 2vw, 2.4rem); margin: 8px 0 0; } .pl-sectionhead__intro { color: var(--pl-muted); margin: 12px 0 0; font-size: 1.05rem; } .pl-eyebrow { display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; /* --pl-link (not --pl-blue): #2878F5 at .8rem uppercase is ~4.1:1 (sub-AA); --pl-link ~5:1. */ color: var(--pl-link); } .pl-eyebrow--light { color: var(--pl-icy-200); } .pl-section__more { white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; font-weight: 600; } /* 4. BUTTONS / BADGES / ICONS ---------------------------------------------- */ .pl-btn { --btn-bg: var(--pl-blue); --btn-fg: #fff; --btn-bd: transparent; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 11px 20px; border-radius: var(--pl-radius); background: var(--btn-bg); color: var(--btn-fg); border: 1.5px solid var(--btn-bd); font-weight: 600; letter-spacing: -.01em; text-align: center; transition: transform var(--pl-dur) var(--pl-ease), background var(--pl-dur) var(--pl-ease), box-shadow var(--pl-dur) var(--pl-ease), color var(--pl-dur) var(--pl-ease); } .pl-btn:hover { color: var(--btn-fg); transform: translateY(-1px); } .pl-btn:active { transform: translateY(0); } .pl-btn--primary { --btn-bg: var(--pl-blue); box-shadow: 0 6px 16px rgba(40,120,245,.24); } .pl-btn--primary:hover { --btn-bg: var(--pl-blue-600); box-shadow: 0 10px 22px rgba(40,120,245,.30); } .pl-btn--ghost { --btn-bg: transparent; --btn-fg: var(--pl-navy); --btn-bd: var(--pl-line-strong); } .pl-btn--ghost:hover { --btn-fg: var(--pl-blue); --btn-bd: var(--pl-blue); background: var(--pl-blue-050); } /* Outline — a de-emphasized secondary action (e.g. cart "Apply coupon") that must not read as a primary CTA. Was referenced by the cart template but never defined, so it fell back to the solid-blue base .pl-btn and competed with Checkout. */ .pl-btn--outline { --btn-bg: transparent; --btn-fg: var(--pl-navy); --btn-bd: var(--pl-line-strong); } .pl-btn--outline:hover { --btn-fg: var(--pl-blue); --btn-bd: var(--pl-blue); background: var(--pl-blue-050); } .pl-btn--ghost-light { --btn-bg: rgba(255,255,255,.08); --btn-fg: #fff; --btn-bd: rgba(255,255,255,.4); } .pl-btn--ghost-light:hover { --btn-bg: rgba(255,255,255,.16); --btn-fg: #fff; --btn-bd: #fff; } .pl-btn--lg { min-height: 52px; padding: 14px 26px; font-size: 1.05rem; } .pl-btn--sm { min-height: 38px; padding: 8px 14px; font-size: .92rem; } .pl-btn--block { width: 100%; } .pl-btn[disabled], .pl-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; } .pl-link { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; } .pl-link:hover { text-decoration: underline; } .pl-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--pl-radius); background: transparent; border: none; color: var(--pl-navy); position: relative; transition: background var(--pl-dur) var(--pl-ease), color var(--pl-dur) var(--pl-ease); } .pl-iconbtn:hover { background: var(--pl-surface-3); color: var(--pl-blue); } .pl-icon { display: inline-block; vertical-align: middle; flex: none; } .pl-flip { transform: scaleX(-1); } .pl-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: var(--pl-radius-pill); font-size: .76rem; font-weight: 700; letter-spacing: .01em; line-height: 1.3; background: var(--pl-surface-3); color: var(--pl-navy-700); border: 1px solid var(--pl-line); } .pl-badge--pending { background: var(--pl-pending-bg); color: var(--pl-pending); border-color: var(--pl-pending-border); } .pl-badge--success { background: var(--pl-success-bg); color: var(--pl-success); border-color: var(--pl-success-border); } .pl-badge--info { background: var(--pl-blue-050); color: var(--pl-blue-600); border-color: var(--pl-info-border); } .pl-badge--neutral { background: var(--pl-surface-3); color: var(--pl-navy-700); } .pl-badge .pl-icon { margin-left: -2px; } /* 5. HEADER / NAV / DRAWER -------------------------------------------------- */ /* Notice strip — presentation only; content/role/visibility owned by PHP (frozen). */ .pl-noticebar { background: var(--pl-navy-900); color: var(--pl-icy); font-size: .78rem; letter-spacing: .015em; } .pl-noticebar__inner { display: flex; align-items: center; justify-content: center; gap: var(--pl-space-8); padding: var(--pl-space-8) 0; text-align: center; } .pl-noticebar__icon { color: var(--pl-electric); flex: none; } .pl-noticebar__text { letter-spacing: .01em; } /* Launch announcement bar — slim owner-controlled promo strip above the notice bar. Presentation only; PHP gates visibility, theme.js owns per-visitor dismissal. Navy ground keeps it distinct from the darker RUO notice bar. Reduced motion is handled by the global reset (§15); the copy feedback is a colour/label change, not motion. */ .pl-announcebar { background: var(--pl-navy); color: #fff; font-size: .82rem; } .pl-announcebar__inner { display: flex; align-items: center; justify-content: center; gap: var(--pl-space-10); padding: 7px 0; position: relative; } .pl-announcebar__text { margin: 0; display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 6px 12px; } .pl-announcebar__msg { letter-spacing: .01em; } .pl-announcebar__copy { display: inline-flex; align-items: center; gap: 7px; min-height: 28px; padding: 3px 6px 3px 11px; border: 1px solid rgba(255,255,255,.28); border-radius: var(--pl-radius-pill); background: rgba(255,255,255,.08); color: #fff; font: inherit; cursor: pointer; transition: background var(--pl-dur) var(--pl-ease), border-color var(--pl-dur) var(--pl-ease); } .pl-announcebar__copy:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.5); } .pl-announcebar__copy:focus-visible { outline: 2px solid var(--pl-electric); outline-offset: 2px; } .pl-announcebar__code { font-weight: 800; letter-spacing: .06em; } .pl-announcebar__copyhint { font-weight: 600; font-size: .72rem; padding: 1px 7px; border-radius: var(--pl-radius-pill); background: rgba(255,255,255,.16); } .pl-announcebar__copy.is-copied { background: var(--pl-electric); border-color: var(--pl-electric); } .pl-announcebar__copy.is-copied .pl-announcebar__copyhint::after { content: " ✓"; } .pl-announcebar__link { color: #fff; text-decoration: underline; text-underline-offset: 2px; font-weight: 600; } .pl-announcebar__link:hover { color: var(--pl-icy); } .pl-announcebar__dismiss { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; background: transparent; color: rgba(255,255,255,.75); border-radius: 8px; cursor: pointer; transition: background var(--pl-dur) var(--pl-ease), color var(--pl-dur) var(--pl-ease); } .pl-announcebar__dismiss:hover { color: #fff; background: rgba(255,255,255,.12); } .pl-announcebar__dismiss:focus-visible { outline: 2px solid var(--pl-electric); outline-offset: 2px; } @media (max-width: 640px) { .pl-announcebar { font-size: .76rem; } .pl-announcebar__inner { padding: 6px 42px 6px 8px; } .pl-announcebar__dismiss { right: 4px; width: 32px; height: 32px; } } /* Masthead — refined translucent surface + hairline at the top state; the scroll-morph (html.pl-scrolled, set by theme.js) condenses the height and trades the hairline for a soft shadow. Reduced motion handled globally (§15). */ .pl-header { position: sticky; top: 0; z-index: var(--pl-z-header); background: rgba(255,255,255,.86); backdrop-filter: saturate(140%) blur(8px); -webkit-backdrop-filter: saturate(140%) blur(8px); border-bottom: 1px solid var(--pl-line); transition: box-shadow var(--pl-dur-slow) var(--pl-ease), background var(--pl-dur) var(--pl-ease), border-color var(--pl-dur) var(--pl-ease); } .pl-scrolled .pl-header { background: rgba(255,255,255,.94); border-bottom-color: transparent; box-shadow: var(--pl-shadow-sm); } .pl-header__inner { display: flex; align-items: center; gap: var(--pl-space-20); height: var(--pl-header-h); transition: height var(--pl-dur-slow) var(--pl-ease); } .pl-scrolled .pl-header__inner { height: var(--pl-header-h-scrolled); } .pl-header__brand { display: flex; align-items: center; gap: var(--pl-space-8); flex: 1 1 0; min-width: 0; } .pl-logo { display: inline-flex; align-items: center; } .pl-logo__img { height: 32px; width: auto; display: block; background: none; border: 0; transition: height var(--pl-dur-slow) var(--pl-ease); } .pl-scrolled .pl-logo__img { height: 26px; } .pl-scrolled .pl-logo--text { font-size: 1.15rem; } @media (max-width: 640px) { .pl-header .pl-logo__img { height: 28px; } } /* RC.6.8 — internal-page wordmark lockup (flask removed). Desktop only: on <=640px the source serves the full mobile lockup, which keeps its normal 28px sizing (mobile logo intentionally preserved). The wordmark's aspect (676x114) is wider than the flask lockup, so it is set a touch shorter to stay visually balanced with the nav; vertical centering is handled by .pl-header__inner (align-items:center). */ @media (min-width: 641px) { .pl-logo__img--wordmark { height: 22px; } .pl-scrolled .pl-logo__img--wordmark { height: 19px; } } /* The supplied pack has no colour-reversed wordmark; render the light-context lockup as monochrome white so it reads on dark surfaces (footer). Replace with a real colour-reversed asset later to retain the blue liquid. */ .pl-logo--light .pl-logo__img { filter: brightness(0) invert(1); } .pl-logo--text { font-weight: 800; font-size: 1.3rem; letter-spacing: -.02em; transition: font-size var(--pl-dur-slow) var(--pl-ease); } .pl-logo--text .pl-logo__polar { color: var(--pl-navy); } .pl-logo--text .pl-logo__labs { color: var(--pl-blue); } .pl-logo--light.pl-logo--text .pl-logo__polar { color: #fff; } /* Desktop nav — centered between brand and actions (flex flanks); a restrained underline active-indicator replaces the pill. Items stay visually equal. The DR-062 focus ring is the shared .pl-nav__list a:focus-visible rule (unchanged). */ .pl-nav--desktop { flex: 0 0 auto; } .pl-nav__list { display: flex; align-items: center; gap: var(--pl-space-2); list-style: none; } .pl-nav__list a { position: relative; display: inline-flex; align-items: center; padding: var(--pl-space-10) var(--pl-space-14); border-radius: var(--pl-radius-sm); color: var(--pl-muted); font-weight: 600; font-size: .95rem; letter-spacing: .005em; transition: color var(--pl-dur) var(--pl-ease), background var(--pl-dur) var(--pl-ease); } .pl-nav--desktop .pl-nav__list a::after { content: ""; position: absolute; left: var(--pl-space-14); right: var(--pl-space-14); bottom: var(--pl-space-6); height: 2px; border-radius: 2px; background: var(--pl-blue); transform: scaleX(0); transform-origin: center; transition: transform var(--pl-dur) var(--pl-ease); } .pl-nav__list a:hover { color: var(--pl-navy); background: var(--pl-surface-3); } .pl-nav__list a[aria-current="page"], .pl-nav__list .current-menu-item > a { color: var(--pl-navy); } .pl-nav--desktop .pl-nav__list a[aria-current="page"]::after, .pl-nav--desktop .pl-nav__list .current-menu-item > a::after { transform: scaleX(1); } .pl-header__actions { display: flex; align-items: center; gap: var(--pl-space-4); flex: 1 1 0; justify-content: flex-end; } .pl-cart-link { text-decoration: none; } .pl-cart-count { position: absolute; top: 5px; right: 4px; min-width: 18px; height: 18px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--pl-radius-pill); background: var(--pl-blue-600); color: #fff; font-size: .68rem; font-weight: 700; line-height: 1; box-shadow: 0 0 0 2px var(--pl-surface); } .pl-cart-count.is-empty { display: none; } /* M2.2 — desktop navigation refinement, scoped to .pl-nav--desktop so the mobile drawer's stacked nav (which shares .pl-nav__list) is intentionally untouched. The hover pill is retired: hover darkens the label to navy; the active route carries the restrained --pl-blue underline (from the shared rule). Tighter rhythm; underline geometry finalised. DR-062 focus preserved. */ .pl-nav--desktop .pl-nav__list { gap: var(--pl-space-4); } .pl-nav--desktop .pl-nav__list a { padding: var(--pl-space-10) var(--pl-space-12); letter-spacing: .01em; } .pl-nav--desktop .pl-nav__list a:hover { background: transparent; } .pl-nav--desktop .pl-nav__list a::after { left: var(--pl-space-12); right: var(--pl-space-12); bottom: var(--pl-space-4); } /* M2.2 — header action buttons get a brand-tinted hover (scoped to the header actions, so the mobile menu trigger + drawer-close keep their own treatment). */ .pl-header__actions .pl-iconbtn:hover { background: var(--pl-blue-050); } .pl-drawer-toggle { display: none; } /* Search — an opaque task sheet beneath the translucent masthead (M2.4). Restrained by decision: --pl-surface fill, a single --pl-line top separator, no blur / gradient / animation. Bottom separation is carried by the sticky header's own border (top state) and shadow (scrolled), so the sheet needs no elevation of its own. Disclosure stays immediate hidden/show — the theme.js controller is unchanged. */ .pl-search-panel { border-top: 1px solid var(--pl-line); background: var(--pl-surface); padding: var(--pl-space-16) 0; } .pl-search-panel[hidden] { display: none; } /* Desktop: a deliberate horizontal form, constrained and left-aligned to the masthead content grid; input dominant, submit beside it. */ .pl-searchform { display: flex; align-items: center; gap: var(--pl-space-10); position: relative; max-width: 640px; } .pl-searchform__icon { position: absolute; left: 14px; top: 14px; color: var(--pl-muted); pointer-events: none; } .pl-searchform__input { flex: 1 1 60%; min-width: 0; height: 48px; padding: 0 14px 0 44px; border-radius: var(--pl-radius); border: 1.5px solid var(--pl-field-border); font-size: 1rem; color: var(--pl-ink); background: var(--pl-surface); } /* Submit keeps the primary-CTA identity but is scoped to --pl-blue-600 so white-on-blue clears WCAG AA for its 16px label (5.48:1; base --pl-blue is 4.12:1). No markup, class, or mechanic change — only --btn-bg is overridden. */ .pl-searchform .pl-btn { flex: 0 0 auto; height: 48px; --btn-bg: var(--pl-blue-600); } .pl-searchform__input:focus { border-color: var(--pl-blue); box-shadow: var(--pl-ring); outline: none; } /* Mobile (<=640): stack deliberately — full-width input and submit with a token vertical gap; the 16px input avoids iOS zoom and 44px+ targets are preserved. Explicit column direction, never flex-wrap. */ @media (max-width: 640px) { .pl-searchform { flex-direction: column; align-items: stretch; gap: var(--pl-space-12); } .pl-searchform__input { flex: 0 0 auto; width: 100%; } .pl-searchform .pl-btn { width: 100%; } } /* Mobile drawer */ .pl-drawer { position: fixed; inset: 0; z-index: var(--pl-z-nav-drawer); } .pl-drawer[hidden] { display: none; } .pl-drawer__backdrop { position: absolute; inset: 0; background: rgba(4,16,31,.55); opacity: 0; transition: opacity var(--pl-dur) var(--pl-ease); } .pl-drawer__panel { position: absolute; inset: 0 auto 0 0; width: min(88vw, 352px); background: var(--pl-surface); box-shadow: var(--pl-shadow-lg); transform: translateX(-100%); transition: transform var(--pl-dur) var(--pl-ease); display: flex; flex-direction: column; padding: var(--pl-space-18); overflow-y: auto; } .pl-drawer.is-open .pl-drawer__backdrop { opacity: 1; } .pl-drawer.is-open .pl-drawer__panel { transform: translateX(0); } .pl-drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--pl-space-8); } .pl-nav__list--stack { flex-direction: column; align-items: stretch; gap: var(--pl-space-2); } .pl-nav__list--stack a { padding: var(--pl-space-14) var(--pl-space-12); font-size: 1.05rem; border-radius: var(--pl-radius); } .pl-drawer__foot { margin-top: auto; padding-top: var(--pl-space-18); border-top: 1px solid var(--pl-line); display: grid; gap: var(--pl-space-10); } .pl-drawer__link { display: inline-flex; align-items: center; gap: var(--pl-space-8); color: var(--pl-navy); font-weight: 600; padding: var(--pl-space-6) 0; } html.pl-drawer-open { overflow: hidden; } /* Mobile menu control — a compact rounded-square trigger (icy surface + a restrained navy hairline) housing the custom asymmetric PolarLabs menu mark (two navy rules + one Electric-Blue accent). The drawer's own close button reuses the SAME control geometry with a crisp × for the open state. Applied only to the mobile trigger (display:none on desktop) and the in-drawer close, so desktop navigation and the other header icon buttons stay untouched. */ .pl-menutrigger { width: 44px; height: 44px; border-radius: var(--pl-radius); background: var(--pl-surface-3); border: 1px solid rgba(22, 58, 94, .22); color: var(--pl-navy); box-shadow: 0 1px 1px rgba(6, 26, 58, .04); } .pl-menutrigger:hover { background: var(--pl-blue-050); border-color: rgba(22, 58, 94, .34); color: var(--pl-navy); } .pl-menutrigger:focus-visible { box-shadow: var(--pl-ring); outline: 2px solid transparent; outline-offset: 2px; } .pl-menutrigger .pl-icon { width: 22px; height: 22px; } /* Drawer refinement — a clearer header/close area, a calmer vertical rhythm, and a distinct active route. Scoped to the drawer + the STACKED nav only; the shared .pl-nav__list active rule (which also styles the desktop nav) is left exactly as-is. */ .pl-drawer__head { margin-bottom: var(--pl-space-14); padding-bottom: var(--pl-space-14); border-bottom: 1px solid var(--pl-line); } .pl-nav__list--stack { gap: var(--pl-space-4); } .pl-nav__list--stack a[aria-current="page"], .pl-nav__list--stack .current-menu-item > a { background: var(--pl-icy); color: var(--pl-navy); font-weight: 700; box-shadow: inset 3px 0 0 0 var(--pl-blue); } .pl-drawer__foot { gap: var(--pl-space-4); } .pl-drawer__link { padding: var(--pl-space-10) var(--pl-space-12); border-radius: var(--pl-radius); } .pl-drawer__link:hover { background: var(--pl-surface-3); color: var(--pl-blue); } /* Shell keyboard focus (M1c) — one consistent :focus-visible affordance across every interactive shell control. Uses --pl-ring (Polar Blue #2878F5, ~4.1:1 non-text contrast, WCAG 2.2 SC 1.4.11) as the visible ring, plus a transparent outline that becomes the focus indicator under forced-colors / Windows High Contrast (where box-shadow is dropped). Focus styling only; existing tokens only. */ .pl-skip-link:focus-visible, .pl-logo:focus-visible, .pl-iconbtn:focus-visible, .pl-nav__list a:focus-visible, .pl-drawer__link:focus-visible, .pl-searchform .pl-btn:focus-visible { box-shadow: var(--pl-ring); outline: 2px solid transparent; outline-offset: 2px; } /* 6. HERO ------------------------------------------------------------------- */ /* Compact, premium homepage hero (v1.1.0 redesign). Navy band + restrained royal-blue glow + one brand visual; no bg image, no badges, no motion. */ .pl-hero { position: relative; overflow: hidden; color: #fff; isolation: isolate; background: var(--pl-navy); } /* Hero image background (owner-supplied, no baked text): sits behind the live HTML copy. object-fit:cover crops responsively without stretch; a navy scrim keeps the left text-safe area readable while letting the artwork show right. */ .pl-hero__bg { position: absolute; inset: 0; z-index: var(--pl-z-decorative); margin: 0; } .pl-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 78% 50%; display: block; } .pl-hero__scrim { position: absolute; inset: 0; z-index: var(--pl-z-below); pointer-events: none; background: linear-gradient(90deg, rgba(7,24,45,.94) 0%, rgba(7,24,45,.80) 38%, rgba(7,24,45,.42) 66%, rgba(7,24,45,.20) 100%), linear-gradient(180deg, rgba(7,24,45,.30) 0%, transparent 26%, transparent 68%, rgba(7,24,45,.50) 100%); } .pl-hero--image .pl-hero__inner { grid-template-columns: minmax(0, 720px); } .pl-hero__glow { position: absolute; inset: 0; z-index: var(--pl-z-below); pointer-events: none; background: radial-gradient(58% 82% at 88% -6%, rgba(40,120,245,.30), transparent 60%), radial-gradient(44% 66% at 4% 114%, rgba(40,120,245,.12), transparent 62%); } .pl-hero__inner { position: relative; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(24px, 4vw, 56px); align-items: center; min-height: clamp(360px, 52vh, 560px); padding-block: clamp(48px, 6vw, 92px); } .pl-hero__content { max-width: 660px; } .pl-hero__title { color: #fff; font-size: clamp(2.15rem, 1.5rem + 3.4vw, 3.5rem); letter-spacing: -.03em; line-height: 1.04; margin: 0 0 16px; } .pl-hero__subtitle { color: var(--pl-icy-200); font-size: clamp(1.05rem, .98rem + .5vw, 1.24rem); line-height: 1.5; max-width: 50ch; margin: 0 0 30px; } .pl-hero__visual { justify-self: end; } .pl-hero__visual img { width: clamp(150px, 20vw, 224px); height: auto; display: block; filter: drop-shadow(0 18px 40px rgba(0,0,0,.45)); } @media (max-width: 900px) { .pl-hero__inner { grid-template-columns: 1fr; min-height: 0; } .pl-hero--image .pl-hero__inner { grid-template-columns: minmax(0, 1fr); } .pl-hero__visual { display: none; } /* Content stacks full-width over the image, so the scrim goes more uniform (vertical-led) for readability across the whole width, and the crop shifts to keep the artwork's motif in frame. */ .pl-hero--image .pl-hero__bg img { object-position: 84% 38%; } .pl-hero--image .pl-hero__scrim { background: linear-gradient(180deg, rgba(7,24,45,.86) 0%, rgba(7,24,45,.58) 48%, rgba(7,24,45,.80) 100%); } } @keyframes pl-hero-zoom { from { transform: scale(1); } to { transform: scale(1.08); } } @keyframes pl-glow-pulse { from { opacity: .55; } to { opacity: .95; } } /* 7. HOME SECTIONS ---------------------------------------------------------- */ /* Home vNext home-section presentation (hero composition, the category RAIL, before-you-order, Why rows, affiliate CTA, newsletter texture, unified head) is route-scoped in assets/css/home.css and loaded on the front page only. The shared pieces Home reuses stay here: .pl-hero* base, .pl-commitband/.pl-commit, .pl-newsletter*, .pl-carousel*, .pl-featured*, .pl-fcard*, .pl-faq* . */ /* Service commitments ribbon — a slim ice-blue accent band (not a dark block, not trust badges); centered on desktop, a swipeable single row on small screens. Plain-language labels only. */ .pl-commitband { background: var(--pl-blue-050); color: var(--pl-navy); border-bottom: 1px solid var(--pl-line); } .pl-commitband__inner { display: flex; align-items: center; gap: 20px; padding-block: 13px; overflow-x: auto; scrollbar-width: none; justify-content: flex-start; } .pl-commitband__inner::-webkit-scrollbar { display: none; } @media (min-width: 900px) { .pl-commitband__inner { justify-content: center; gap: 40px; } } .pl-commit { flex: none; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; white-space: nowrap; color: var(--pl-navy); font-weight: 600; font-size: .92rem; } .pl-commit .pl-icon { color: var(--pl-blue); flex: none; } a.pl-commit { text-decoration: none; } a.pl-commit:hover { color: var(--pl-link); } a.pl-commit:hover .pl-icon { color: var(--pl-link); } /* FAQ */ .pl-faq__inner { display: grid; grid-template-columns: .8fr 1.2fr; gap: 40px; align-items: start; } .pl-faq__intro { position: sticky; top: calc(var(--pl-header-h) + 20px); } /* 8. CARDS / GRIDS ---------------------------------------------------------- */ /* DR-006 — 4-up at 16px inside the 1248px content column gives Figma's exact 300px card (1248 = 4*300 + 3*16). Measured live at 1440: tracks resolve to "300px 300px 300px 300px". minmax(0,1fr), never bare 1fr: bare `1fr` means minmax(auto,1fr), and that `auto` floor resolves to min-content — an image or long title then forces the track wider than its share and the row overflows. See the core-layout neutralisation note at the top of woocommerce.css for the related defect. */ .pl-productgrid { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .pl-productgrid.products { padding: 0; margin: 0; } /* Woo compat */ /* Prevent grid/flex items from forcing tracks wider than their column (min-width:auto would let long labels cause horizontal overflow on mobile). */ .pl-productgrid > li, .pl-productgrid > .pl-productgrid__item, .pl-card { min-width: 0; } /* break-word, not anywhere: `anywhere` drops min-content to a single character, which is what allows mid-word ("letter-by-letter") wrapping in a narrow card. The grids already use minmax(0,1fr), so tracks can shrink without it, and break-word still hard-breaks a word that genuinely cannot fit on its own line. */ .pl-card__cat, .pl-card__title, .pl-card__price, .pl-card__desc { overflow-wrap: break-word; min-width: 0; } .pl-card { display: flex; flex-direction: column; height: 100%; background: var(--pl-surface); border: 1px solid var(--pl-line); border-radius: var(--pl-radius-lg); overflow: hidden; box-shadow: 0 1px 2px rgba(6,26,58,.04); transition: border-color var(--pl-dur) var(--pl-ease), transform var(--pl-dur) var(--pl-ease), box-shadow var(--pl-dur) var(--pl-ease); } .pl-card:hover { border-color: var(--pl-line-strong); transform: translateY(-4px); box-shadow: 0 10px 30px rgba(6,26,58,.10), 0 2px 6px rgba(6,26,58,.06); } .pl-card:focus-within { border-color: var(--pl-blue); box-shadow: var(--pl-ring); } /* Premium neutral product media: 1:1, contain-fit (no crop), soft icy field. */ .pl-card__media { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; /* One consistent soft icy light-blue media tile (Lumex-inspired) — the same single colour on every card, on both Featured and the Shop archive. */ background: radial-gradient(120% 100% at 50% 0%, #F5FAFF 0%, var(--pl-blue-050) 62%, #DDEBFF 100%); border-bottom: 1px solid var(--pl-line); } .pl-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 12%; transition: transform .4s var(--pl-ease); } .pl-card:hover .pl-card__img { transform: scale(1.03); } /* Neutral placeholder when a product has no image (never medical imagery). */ .pl-card__placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--pl-icy-200); } .pl-card__placeholder-icon { color: var(--pl-blue); opacity: .55; } .pl-card__placeholder-label { font-size: .78rem; font-weight: 600; letter-spacing: .02em; color: var(--pl-muted); } /* Figma 8:6 — Research Use Only chip, pinned inside the image well. This is the card's ONLY RUO surface; the old text row in the body is gone. */ .pl-card__ruo { position: absolute; left: 12px; top: 12px; z-index: var(--pl-z-base); font-size: .62rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--pl-navy); background: rgba(255,255,255,.92); border: 1px solid var(--pl-line); padding: 4px 8px; border-radius: var(--pl-radius-pill); } .pl-card__price--pending { color: var(--pl-muted); font-weight: 600; font-size: .95rem; } .pl-card__stock { position: absolute; right: 12px; top: 12px; background: rgba(4,16,31,.8); color: #fff; font-size: .72rem; font-weight: 600; padding: 4px 8px; border-radius: var(--pl-radius-pill); } .pl-card__stock--out { background: rgba(192,57,43,.92); } .pl-card__body { display: flex; flex-direction: column; gap: 8px; padding: 18px 16px 16px; flex: 1; } /* Figma BadgeRow — category chip + documentation chip on one line. */ .pl-card__badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .pl-card__cat { font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--pl-blue); } .pl-card__title { font-size: 1.06rem; margin: 0; line-height: 1.25; } .pl-card__title a { color: var(--pl-navy); transition: color var(--pl-dur) var(--pl-ease); } .pl-card__title a:hover { color: var(--pl-blue); } /* Descriptor — real WooCommerce short description only; absent when the product has none. Clamped so an over-long description can't break card rhythm. */ .pl-card__desc { margin: 0; font-size: .84rem; line-height: 1.45; color: var(--pl-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Reserve the price row so a WooCommerce price change never shifts the card. */ .pl-card__meta { margin-top: auto; min-height: 1.7rem; display: flex; align-items: center; padding-top: 2px; } .pl-card__price { font-weight: 700; color: var(--pl-navy); font-size: 1.1rem; } .pl-card__price del { color: var(--pl-muted); font-weight: 500; font-size: .9em; margin-right: 6px; } .pl-card__price ins { text-decoration: none; } .pl-card__actions { margin-top: 12px; display: flex; } /* CTA: Figma 8:28 HUGS its content on desktop (explicitly "NOT full-width"); mobile 49:44 is full-width. Figma's authored 100px height is treated as an auto-layout artifact — py14 + a 15px label implies ~44px — so the approved accessible control size is used instead. Documented in FIGMA-DIFF-COMMIT5.md. */ .pl-card__actions .pl-btn, .pl-card__actions .button { width: auto; min-height: 44px; font-weight: 700; box-shadow: 0 4px 12px rgba(40,120,245,.18); } .pl-card__actions .pl-btn:hover, .pl-card__actions .button:hover { box-shadow: 0 8px 18px rgba(40,120,245,.28); } .pl-card__actions .added_to_cart { display: none; } /* Post grid */ .pl-postgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 24px; } .pl-postcard { border: 1px solid var(--pl-line); border-radius: var(--pl-radius-lg); overflow: hidden; background: var(--pl-surface); } .pl-postcard__media img { aspect-ratio: 16/9; object-fit: cover; width: 100%; } .pl-postcard__body { padding: 18px; } .pl-postcard__title { font-size: 1.15rem; } /* 9. FORMS ------------------------------------------------------------------ */ .pl-form { display: grid; gap: 18px; } .pl-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .pl-field { display: grid; gap: 6px; } .pl-field label, .pl-form label:not(.pl-check):not(.pl-gate__check) { font-weight: 600; color: var(--pl-navy); font-size: .95rem; } .pl-req { color: var(--pl-danger); } .pl-field input, .pl-field textarea, .pl-field select, .pl-select, .pl-form input[type="text"], .pl-form input[type="email"], .pl-form input[type="url"], .pl-form textarea { width: 100%; padding: 12px 14px; border: 1.5px solid var(--pl-field-border); border-radius: var(--pl-radius); font-size: 1rem; color: var(--pl-ink); background: var(--pl-surface); font-family: inherit; transition: border-color var(--pl-dur) var(--pl-ease), box-shadow var(--pl-dur) var(--pl-ease); } .pl-field input:focus, .pl-field textarea:focus, .pl-field select:focus, .pl-select:focus, .pl-form input:focus, .pl-form textarea:focus { border-color: var(--pl-blue); box-shadow: var(--pl-ring); outline: none; } .pl-field [aria-invalid="true"] { border-color: var(--pl-danger); } .pl-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%235B6B80' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 40px; } .pl-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .pl-form__fineprint { color: var(--pl-muted); font-size: .85rem; margin: 0; } .pl-check, .pl-gate__check { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; cursor: pointer; } .pl-check input { position: absolute; opacity: 0; width: 1px; height: 1px; } .pl-check__box, .pl-gate__checkbox { width: 22px; height: 22px; border: 1.5px solid var(--pl-field-border); border-radius: 6px; background: var(--pl-surface); position: relative; transition: background var(--pl-dur) var(--pl-ease), border-color var(--pl-dur) var(--pl-ease); flex: none; margin-top: 2px; } .pl-check input:checked + .pl-check__box, .pl-gate__check input:checked + .pl-gate__checkbox { background: var(--pl-blue); border-color: var(--pl-blue); } .pl-check__box::after, .pl-gate__checkbox::after { content: ""; position: absolute; left: 7px; top: 3px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) scale(0); transition: transform .15s var(--pl-ease); } .pl-check input:checked + .pl-check__box::after, .pl-gate__check input:checked + .pl-gate__checkbox::after { transform: rotate(45deg) scale(1); } .pl-check input:focus-visible + .pl-check__box, .pl-gate__check input:focus-visible + .pl-gate__checkbox { box-shadow: var(--pl-ring); } .pl-formmsg { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; border-radius: var(--pl-radius); margin-bottom: 18px; } .pl-formmsg--success { background: var(--pl-success-bg); color: var(--pl-success); border: 1px solid var(--pl-success-border); } .pl-formmsg--error { background: var(--pl-danger-bg); color: var(--pl-danger); border: 1px solid var(--pl-danger-border); } .pl-formmsg p { margin: 0; } /* 10. ACCORDION / CAROUSEL -------------------------------------------------- */ .pl-accordion { display: grid; gap: 12px; } .pl-accordion__item { border: 1px solid var(--pl-line); border-radius: var(--pl-radius); background: var(--pl-surface); overflow: hidden; } .pl-accordion__heading { margin: 0; } .pl-accordion__trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; background: none; border: none; text-align: left; font-weight: 700; color: var(--pl-navy); font-size: 1.02rem; } .pl-accordion__trigger:hover { color: var(--pl-blue); } .pl-accordion__chevron { transition: transform var(--pl-dur) var(--pl-ease); color: var(--pl-muted); flex: none; } .pl-accordion__trigger[aria-expanded="true"] .pl-accordion__chevron { transform: rotate(180deg); } .pl-accordion__panel { padding: 0 20px 20px; color: var(--pl-muted); } .pl-accordion__panel[hidden] { display: none; } .pl-carousel { position: relative; } .pl-carousel__track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 1fr); } .pl-carousel__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: var(--pl-z-raised); width: 44px; height: 44px; border-radius: 999px; background: var(--pl-surface); border: 1px solid var(--pl-line); box-shadow: var(--pl-shadow-sm); color: var(--pl-navy); display: none; align-items: center; justify-content: center; } .pl-carousel__nav:hover { color: var(--pl-blue); border-color: var(--pl-blue); } .pl-carousel__nav--prev { left: -18px; } .pl-carousel__nav--next { right: -18px; } .pl-carousel__nav[disabled] { opacity: .38; cursor: default; pointer-events: none; box-shadow: none; } .pl-carousel__slide { list-style: none; } /* Featured Products = a single horizontal scroll-snap RAIL at EVERY breakpoint (native swipe + trackpad/wheel; restrained desktop arrows). grid-auto-columns sets the card width so the target number of cards shows with a peek of the next; the scrollbar is hidden but scrolling stays fully functional. Scoped to .pl-featured__carousel — the Shop grid (.pl-productgrid) is untouched. Targets: <=430 ~1.35 · >=481 ~2.1 · >=769 ~3 · >=1100 ~4 cards visible. */ .pl-featured__carousel .pl-carousel__track { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 74%; gap: 14px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: none; padding-bottom: 6px; } .pl-featured__carousel .pl-carousel__track::-webkit-scrollbar { display: none; } .pl-featured__carousel .pl-carousel__slide { scroll-snap-align: start; min-width: 0; } @media (min-width: 481px) { .pl-featured__carousel .pl-carousel__track { grid-auto-columns: 46%; } } @media (min-width: 769px) { .pl-featured__carousel .pl-carousel__track { grid-auto-columns: 31%; gap: 16px; } .pl-featured__carousel .pl-carousel__nav { display: inline-flex; } } @media (min-width: 1100px) { .pl-featured__carousel .pl-carousel__track { grid-auto-columns: 26%; } } /* Featured section header — "Featured products" left, "View all products" on the same row right on desktop; on mobile the link wraps just beneath the heading with tight spacing (no oversized gap). */ .pl-featured__more { color: var(--pl-link); } .pl-featured__more:hover { color: var(--pl-blue-600); } .pl-featured__more .pl-icon { transition: transform var(--pl-dur) var(--pl-ease); } .pl-featured__more:hover .pl-icon { transform: translateX(3px); } /* RC.6.3 — the dormant .pl-fcard ('featured' variant) card styles were removed here after a theme-wide grep proved zero callers (the renderer branch in inc/woocommerce.php was removed too). The live homepage Featured rail renders the shared .pl-scard. */ /* 11. GATE ------------------------------------------------------------------ */ /* Researcher Verification Gate — v1.0.0 (premium · compact · clinical). Navy scrim + restrained blur; single 460px card; two required checkbox rows (§8 age/research + policy agreement); royal-blue primary CTA; quiet under-21 rejection. */ /* Container tracks the DYNAMIC viewport (dvh, not just vh) so it stays correct when mobile browser chrome / the virtual keyboard changes the visible height. box-sizing:border-box is global, so its padding (incl. safe-area insets) is subtracted from the definite height — the dialog's max-height:100% then fits the real available space without extra height math. Centered when it fits; the container itself scrolls, and short screens switch to top-aligned below. */ .pl-gate { position: fixed; top: 0; left: 0; right: 0; z-index: var(--pl-z-gate); height: 100vh; height: 100dvh; overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; align-items: center; justify-content: center; padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); } .pl-gate[hidden] { display: none; } /* Fail-closed visibility + scroll lock. The gate renders WITHOUT `hidden`, so it shows by default (the fixed overlay blocks pointer interaction with the store). `body.pl-gate-armed` is set server-side whenever the gate renders and locks scrolling — no JavaScript required, so a blocked/thrown/delayed gate.js cannot reveal the storefront. The `pl-gate-cleared` state (added to only after an acknowledgement is validated, by the pre-paint guard or gate.js) hides the gate and restores scrolling. The :has() rule is a progressive-enhancement lock on the scroll container; the fixed overlay is the pointer guarantee regardless. */ body.pl-gate-armed { overflow: hidden; } html:has(body.pl-gate-armed):not(.pl-gate-cleared) { overflow: hidden; } html.pl-gate-cleared .pl-gate { display: none; } html.pl-gate-cleared body.pl-gate-armed { overflow: visible; } .pl-gate__backdrop { position: fixed; inset: 0; background: radial-gradient(130% 120% at 50% -10%, rgba(12,32,58,.9) 0%, rgba(7,24,45,.93) 55%, rgba(2,11,22,.96) 100%); } /* Restrained blueprint linework on the field, masked to fade near the card — the same documentation grammar as the legal masthead, kept very low-opacity. */ .pl-gate__backdrop::before { content: ""; position: absolute; inset: 0; opacity: .3; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask-image: radial-gradient(92% 82% at 50% 0%, #000 0%, transparent 68%); mask-image: radial-gradient(92% 82% at 50% 0%, #000 0%, transparent 68%); } @supports (backdrop-filter: blur(6px)) or (-webkit-backdrop-filter: blur(6px)) { .pl-gate__backdrop { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } } .pl-gate__dialog { position: relative; width: min(460px, 100%); max-height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; background: #fff; border-radius: var(--pl-radius-lg); box-shadow: 0 30px 72px rgba(2,11,22,.5); padding: clamp(28px, 4vw, 44px); text-align: center; } .pl-gate__brand { display: flex; justify-content: center; margin-bottom: 18px; } .pl-gate__brand .pl-logo__img { height: 34px; width: auto; } .pl-gate__eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--pl-link); margin: 0 0 10px; } .pl-gate__title { font-family: var(--pl-font-heading); font-weight: 800; font-size: clamp(1.5rem, 1.2rem + 1.4vw, 1.9rem); line-height: 1.12; letter-spacing: -.015em; color: var(--pl-navy); margin: 0 0 10px; } .pl-gate__title-accent { color: var(--pl-blue); } .pl-gate__desc { color: var(--pl-muted); font-size: .95rem; line-height: 1.5; margin: 0; } .pl-gate__form { display: grid; gap: 12px; margin-top: clamp(20px, 3vw, 26px); padding-top: clamp(20px, 3vw, 26px); border-top: 1px solid var(--pl-line); text-align: left; } .pl-gate__check { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: start; min-height: 44px; padding: 12px 14px; border: 1px solid var(--pl-line); border-radius: var(--pl-radius); background: var(--pl-surface-2); cursor: pointer; transition: border-color var(--pl-dur) var(--pl-ease), background var(--pl-dur) var(--pl-ease), box-shadow var(--pl-dur) var(--pl-ease); } .pl-gate__check:hover { border-color: var(--pl-blue); } /* Focus is stronger than — and distinct from — the checked state: a solid ring (shape, not color alone), visible even over the icy checked background, and its higher-set box-shadow is never overridden by the checked rule. */ .pl-gate__check:focus-within { border-color: var(--pl-blue); box-shadow: var(--pl-ring); } /* Checked reads as CONFIRMED, not a second primary action (AG1.1): a very subtle icy surface + a soft neutral border. The blue native checkbox carries the checked cue, so the row never competes with the "I am 21+" button. */ .pl-gate__check:has(.pl-gate__input:checked) { border-color: var(--pl-line-strong); background: var(--pl-blue-050); } .pl-gate__input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--pl-blue); cursor: pointer; } .pl-gate__label { min-width: 0; font-size: .9rem; color: var(--pl-ink); line-height: 1.5; overflow-wrap: break-word; } .pl-gate__label a { color: var(--pl-link); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: break-word; } .pl-gate__error { color: var(--pl-danger); font-weight: 600; font-size: .88rem; margin: 2px 0 0; } .pl-gate__actions { display: grid; gap: 10px; margin-top: 6px; } /* CTA label sized to qualify as WCAG large text: 1.2rem (19.2px) at weight 700 is >= 14pt bold (18.66px), so white-on-#2878F5 (4.12:1) clears the 3:1 large-text threshold. Keeps the locked #2878F5 token unchanged; rem-based so it stays responsive and proportionate. */ .pl-gate__enter { width: 100%; min-height: 48px; font-size: 1.2rem; font-weight: 700; } .pl-gate__enter[disabled] { opacity: .5; cursor: not-allowed; } /* Keyboard focus indicator for the primary CTA. The global :focus-visible ring is a box-shadow, which .pl-btn--primary's own box-shadow overrides; and a blue ring would blend into the blue button on the white card. Use a navy outline offset off the button so focus is clearly visible against both surfaces. */ .pl-gate__enter:focus-visible { outline: 3px solid var(--pl-navy); outline-offset: 2px; } .pl-gate__reject { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 12px; background: none; border: 0; color: var(--pl-muted); font-size: .9rem; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } .pl-gate__reject:hover { color: var(--pl-navy); } .pl-gate__fineprint { color: var(--pl-muted); font-size: .8rem; line-height: 1.5; margin: 16px 0 0; text-align: center; } /* 12. FOOTER ---------------------------------------------------------------- */ /* H2.7 — the final system layer. Deep navy continuing H2.6's midnight, lifted by a restrained royal-blue depth wash (inset, so it never overflows or clips a focus ring); the refined top hairline bridges from the newsletter above. Text-first; no badges, no glow, no motion. Class names unchanged — IA regroup is in footer.php. */ .pl-footer { position: relative; background: var(--pl-navy-900); color: var(--pl-icy-200); margin-top: auto; } .pl-footer::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(56% 120% at 85% -12%, rgba(40, 120, 245, .12), transparent 60%); } /* One 1px bridge line: a faint full-width base + a brighter royal-blue centre bloom. */ .pl-footer__accent { position: relative; z-index: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(120, 165, 255, .55), transparent), linear-gradient(rgba(150, 190, 255, .14), rgba(150, 190, 255, .14)); } .pl-footer__top { position: relative; z-index: 1; display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: var(--pl-space-40); padding-block: clamp(40px, 4vw, 60px); } /* At <=1024 the shared rule below drops to 2 columns; let the taller brand column span the full row so the four link columns pair up cleanly. */ @media (max-width: 1024px) { .pl-footer__brandcol { grid-column: 1 / -1; } } .pl-footer__brandcol .pl-logo__img { height: 36px; width: auto; } .pl-footer__desc { color: var(--pl-icy-200); font-size: .95rem; line-height: 1.6; max-width: 42ch; margin: var(--pl-space-18) 0 var(--pl-space-14); } .pl-footer__tagline { color: rgba(201, 222, 255, .72); font-size: .82rem; line-height: 1.5; max-width: 42ch; margin: 0 0 var(--pl-space-12); } .pl-footer__brandmail { margin: 0; } .pl-footer__brandmail a { color: #fff; font-weight: 700; font-size: .98rem; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, .4); transition: text-decoration-color var(--pl-dur) var(--pl-ease); } .pl-footer__brandmail a:hover { color: var(--pl-icy-200); text-decoration-color: rgba(255, 255, 255, .85); } .pl-footer__badges { display: flex; flex-wrap: wrap; gap: var(--pl-space-8); } .pl-footer__badges .pl-badge { background: rgba(255,255,255,.07); color: var(--pl-icy); border-color: rgba(255,255,255,.16); } .pl-footer__badges .pl-badge--pending { background: rgba(181,130,42,.18); color: #F2D79A; border-color: rgba(242,215,154,.3); } .pl-footer__title { color: #fff; font-family: var(--pl-font-heading); font-size: .82rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; margin-bottom: var(--pl-space-18); } .pl-footer__list { list-style: none; display: grid; gap: var(--pl-space-6); } .pl-footer__list a { display: inline-block; color: var(--pl-icy-200); font-size: .95rem; line-height: 1.4; padding-block: 5px; transition: color var(--pl-dur) var(--pl-ease); } .pl-footer__list a:hover { color: #fff; } .pl-footer__bottom { position: relative; z-index: 1; border-top: 1px solid rgba(255, 255, 255, .1); padding-block: var(--pl-space-24); } .pl-footer__copy { color: var(--pl-icy-200); font-size: .85rem; margin: 0 0 var(--pl-space-4); } .pl-footer__disclaimer { color: rgba(201, 222, 255, .72); font-size: .8rem; line-height: 1.55; margin: 0; max-width: 108ch; } /* 13. UTILITIES / EMPTY / MISC --------------------------------------------- */ .pl-empty { text-align: center; padding: 56px 20px; max-width: 44ch; margin-inline: auto; } .pl-empty--inline, .pl-empty--shop { max-width: 60ch; } .pl-empty__icon { color: var(--pl-blue); margin: 0 auto 16px; opacity: .8; } .pl-empty__title { font-size: 1.3rem; } .pl-empty__text { color: var(--pl-muted); margin-bottom: 20px; } .pl-empty__note { text-align: center; color: var(--pl-muted); font-size: .85rem; margin-top: 24px; } .pl-page__header { background: var(--pl-surface-2); border-bottom: 1px solid var(--pl-line); padding-block: clamp(32px, 5vw, 56px); } .pl-page__title { font-size: clamp(1.8rem, 1.3rem + 2vw, 2.6rem); margin: 0; } .pl-page__content { padding-block: clamp(32px, 5vw, 56px); } .pl-prose { max-width: 72ch; } .pl-prose h2 { margin-top: 1.6em; } .pl-prose h3 { margin-top: 1.3em; } .pl-prose p, .pl-prose li { line-height: 1.7; color: var(--pl-ink); } .pl-prose ul, .pl-prose ol { padding-left: 1.3em; margin-bottom: 1em; } .pl-prose li { margin-bottom: .4em; } .pl-prose a { color: var(--pl-link); text-decoration: underline; text-underline-offset: 2px; } .pl-prose a:hover { color: var(--pl-blue-600); } .pl-prose img, .pl-prose video, .pl-prose iframe { max-width: 100%; height: auto; border-radius: var(--pl-radius); } .pl-prose blockquote { margin: 1.3em 0; padding: 8px 18px; border-left: 3px solid var(--pl-blue); color: var(--pl-muted); } .pl-prose figure { margin: 1.3em 0; } .pl-prose figure.wp-block-table, .pl-tablewrap { overflow-x: auto; } .pl-prose table { width: 100%; border-collapse: collapse; margin: 1.3em 0; font-size: .95rem; } .pl-prose th, .pl-prose td { text-align: left; padding: 10px 12px; border: 1px solid var(--pl-line); vertical-align: top; } .pl-prose thead th { background: var(--pl-surface-2); color: var(--pl-navy); } .pl-note { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; border-radius: var(--pl-radius); background: var(--pl-blue-050); border: 1px solid var(--pl-info-border); color: var(--pl-navy-700); margin: 1.3em 0; } .pl-note .pl-icon { color: var(--pl-blue); flex: none; margin-top: 2px; } .pl-prose--light, .pl-prose--light h2, .pl-prose--light h3 { color: var(--pl-icy); } .pl-prose--light p, .pl-prose--light li { color: var(--pl-icy-200); } /* Legal-page styles (.pl-legal*) are route-scoped in assets/css/legal.css, enqueued only on the legal template (inc/legal.php). */ /* Gate responsive adaptation. Small phones (incl. 320px): compact card padding + smaller radius; the 20px container gutters keep comfortable side margins. */ @media (max-width: 520px) { .pl-gate__dialog { padding: 24px 20px; border-radius: 14px; } } /* Short viewports (landscape phones, split-screen, virtual keyboard shrinking the height): top-align and scroll from the top so the logo/heading stay reachable, and tighten vertical rhythm so more fits before scrolling. */ @media (max-height: 560px) { .pl-gate { align-items: flex-start; } .pl-gate__dialog { padding: 20px; } .pl-gate__brand { margin-bottom: 12px; } .pl-gate__form { margin-top: 16px; } .pl-gate__fineprint { margin-top: 12px; } } .pl-pagination { margin-top: 40px; display: flex; justify-content: center; } .pl-pagination .page-numbers { list-style: none; display: flex; gap: 6px; padding: 0; } .pl-pagination a, .pl-pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 10px; border-radius: var(--pl-radius-sm); border: 1px solid var(--pl-line); color: var(--pl-navy); font-weight: 600; transition: border-color var(--pl-dur) var(--pl-ease), color var(--pl-dur) var(--pl-ease), background var(--pl-dur) var(--pl-ease); } .pl-pagination a:hover { border-color: var(--pl-blue); color: var(--pl-blue); background: var(--pl-blue-050); } .pl-pagination .current { background: var(--pl-blue); color: #fff; border-color: var(--pl-blue); } /* 404 */ .pl-404__inner { max-width: 52ch; margin-inline: auto; text-align: center; } .pl-404__title { font-size: clamp(1.8rem, 1.3rem + 2vw, 2.6rem); } .pl-404__search { margin: 24px auto; max-width: 460px; } .pl-404__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } /* Benefits / steps / compliance (affiliates) */ /* Why PolarLabs — keeps a white surface; its vNext editorial statement rows (.plh-why__*) are route-scoped in assets/css/home.css (front page only). */ .pl-why { background: var(--pl-surface); } /* Newsletter signup — the final conversion block before the footer. Full-width navy gradient with a restrained blue glow (no image, no motion); heading/copy left and the form right on desktop, stacked full-width on mobile. */ /* H2.6 — "The PolarLabs Brief": compact, deep-navy, provider-gated. A royal-blue top edge bridges from the H2.5 catalog banner above; the surface deepens toward the footer (navy-700 -> navy -> midnight). Shared across all newsletter surfaces. */ .pl-newsletter { position: relative; overflow: hidden; color: #fff; background: linear-gradient(180deg, var(--pl-navy-700) 0%, var(--pl-navy) 52%, var(--pl-navy-900) 100%); border-top: 1px solid rgba(150, 190, 255, .16); } .pl-newsletter::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 120% at 88% 0%, rgba(40,120,245,.30), transparent 60%); } .pl-newsletter__inner { position: relative; z-index: var(--pl-z-base); display: grid; grid-template-columns: 1fr; gap: 22px; align-items: center; padding-block: clamp(30px, 3.6vw, 48px); } @media (min-width: 860px) { .pl-newsletter__inner { grid-template-columns: 1.1fr .9fr; gap: 44px; } } /* Global (works on every page that uses the shared newsletter — home, shop, affiliate, COA). Unified weight-800 head look so the closing band matches the approved system everywhere, not just where home.css is loaded. */ .pl-newsletter__title { font-family: var(--pl-font-heading); color: #fff; font-weight: 800; font-size: clamp(1.85rem, 1.3rem + 1.9vw, 2.7rem); letter-spacing: -.025em; line-height: 1.08; margin: 8px 0 0; } .pl-newsletter__text { color: var(--pl-icy-200); line-height: 1.6; margin: 12px 0 0; max-width: 48ch; } .pl-newsletter__panel { min-width: 0; } .pl-newsletter__label { display: block; font-size: .8rem; font-weight: 600; color: var(--pl-icy-200); margin-bottom: 8px; } .pl-newsletter__row { display: flex; flex-direction: column; gap: 12px; } @media (min-width: 520px) { .pl-newsletter__row { flex-direction: row; align-items: stretch; } } /* 16px input font prevents iOS focus-zoom; --pl-field-border gives a >=3:1 control boundary on the navy surface (~4.3:1). */ .pl-newsletter__input { flex: 1 1 auto; min-width: 0; height: 50px; padding: 0 16px; font-size: 16px; color: #fff; background: rgba(255,255,255,.08); border: 1.5px solid var(--pl-field-border); border-radius: var(--pl-radius); transition: border-color 160ms var(--pl-ease), background 160ms var(--pl-ease), box-shadow 160ms var(--pl-ease); } .pl-newsletter__input::placeholder { color: rgba(255,255,255,.62); } .pl-newsletter__input:focus { outline: none; border-color: var(--pl-electric); background: rgba(255,255,255,.14); box-shadow: 0 0 0 3px rgba(75,150,255,.45); } .pl-newsletter__input[aria-invalid="true"] { border-color: #FFA0A0; box-shadow: 0 0 0 3px rgba(255,120,120,.30); } .pl-newsletter__submit { flex: none; min-height: 50px; padding: 0 26px; border-radius: var(--pl-radius); background: #fff; color: var(--pl-navy); font-weight: 700; font-size: 1rem; transition: background var(--pl-dur) var(--pl-ease), color var(--pl-dur) var(--pl-ease), transform 140ms var(--pl-ease); } @media (max-width: 519px) { .pl-newsletter__submit { width: 100%; } } .pl-newsletter__submit:hover { background: var(--pl-blue-050); color: var(--pl-navy); } .pl-newsletter__submit:active { transform: scale(.98); } .pl-newsletter__submit:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(75,150,255,.55), 0 0 0 6px rgba(255,255,255,.5); } .pl-newsletter__submit.is-loading { opacity: .75; cursor: progress; } /* Off-screen honeypot — present for bots, hidden from AT + keyboard (NOT display:none). */ .pl-newsletter__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* Consent — a real required checkbox; the whole row is the