/* Ported verbatim from the block-theme prototype (v0.4.1). Tokens live in tokens.css. */ /* ========================================================================== Base ========================================================================== */ body { font-family: var(--ps-font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; height: auto; } summary { cursor: pointer; list-style: none; } summary::-webkit-details-marker { display: none; } :focus-visible { outline: 2px solid var(--ps-blue); outline-offset: 2px; } /* ========================================================================== MOTION — reveal on scroll (the primitive that "awakens" the platform) Elements tagged .ps-reveal rise + fade in when scrolled into view (ps.js IntersectionObserver adds .is-in, once). The hidden resting state is gated on html.ps-anim — set synchronously by a tiny inline script — so without JS content is simply visible (never stuck at opacity:0), and there is no first-paint flash. Reduced-motion shows everything instantly. A container with data-ps-stagger cascades its .ps-reveal children (ps.js sets an incremental transition-delay). ========================================================================== */ .ps-reveal { transition: opacity var(--ps-dur-4) var(--ps-ease), transform var(--ps-dur-4) var(--ps-ease); will-change: opacity, transform; } html.ps-anim .ps-reveal { opacity: 0; transform: translateY(20px); } html.ps-anim .ps-reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html.ps-anim .ps-reveal { opacity: 1 !important; transform: none !important; transition: none; } } /* Kill the WordPress root blockGap (1.5rem) that inserts a white strip between the
(announce bar) and
— the hero must sit flush under it. */ .ps-main { min-height: 60vh; margin-top: 0; margin-block-start: 0; } /* Section rhythm: a 1200px column inside the root gutter. Uniform 3.5rem gap to match the Figma's consistent ~60px between content blocks. */ .ps-section { width: min(var(--ps-col), 100% - 2 * var(--ps-gutter)); margin: 0 auto var(--ps-section); } .ps-h2 { font-size: var(--ps-t-h2); font-weight: 500; line-height: 1.167; letter-spacing: -0.01em; color: var(--ps-blue); margin: 0 0 1.25rem; } /* Buttons */ .ps-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--ps-sp-2); font-family: var(--ps-font); font-size: var(--ps-t-sm); font-weight: 500; letter-spacing: -0.01em; line-height: 1; padding: 0.875rem 1.875rem; border: 0; border-radius: 0; text-decoration: none; cursor: pointer; transition: background-color var(--ps-dur-1) ease, color var(--ps-dur-1) ease; } .ps-btn-blue { background: var(--ps-blue); color: #fff; } .ps-btn-blue:hover { background: var(--ps-blue-deep); color: #fff; } /* ========================================================================== Announcement + header ========================================================================== */ /* The header — top bar + black announce liner together — sticks to the top on scroll, desktop and mobile. `sticky` keeps it in the flow so there's no content jump (the only ancestor overflow is the transient age-gate scroll-lock). z-index sits above page content but below the age-gate overlay (1000). Offset below the WordPress admin bar for logged-in users. */ .ps-site-header { position: sticky; top: 0; z-index: 100; } body.admin-bar .ps-site-header { top: 32px; } @media screen and (max-width: 782px) { body.admin-bar .ps-site-header { top: 46px; } } /* Announce ticker — a scrolling strip of value props (replaces the static line the client found "depressing"). Two identical groups translate -50% for a seamless loop; pauses on hover; static + clipped under reduced-motion. Keyword gets a light-blue accent that reads on the dark bar. */ .ps-announce { background: var(--ps-dark); color: #fff; overflow: hidden; /* no edge fade (user call) — items read clean to the edges */ } .ps-ticker-track { display: flex; width: max-content; animation: ps-ticker 44s linear infinite; will-change: transform; } .ps-ticker:hover .ps-ticker-track { animation-play-state: paused; } .ps-ticker-group { display: flex; align-items: center; flex: 0 0 auto; } .ps-ticker-item { flex: 0 0 auto; padding: 0.5rem 0; font-size: var(--ps-t-xs); line-height: 1.4; letter-spacing: -0.01em; color: rgba(255, 255, 255, 0.9); white-space: nowrap; } .ps-ticker-item b { color: #7CC1EC; font-weight: 700; } /* accent keyword, light-blue on --ps-dark */ .ps-ticker-sep { flex: 0 0 auto; display: inline-flex; align-items: center; color: var(--ps-blue); opacity: 0.9; margin: 0 1.25rem; } @keyframes ps-ticker { to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .ps-ticker-track { animation: none; } .ps-ticker-group[aria-hidden="true"] { display: none; } } .ps-header { display: flex; align-items: center; background: var(--ps-paper); padding: 0.5rem var(--ps-gutter); position: relative; z-index: 40; } .ps-logo { display: inline-flex; align-items: center; } .ps-logo img.ps-logo-full { width: 80px; height: 28px; } .ps-logo img.ps-logo-mark { display: none; width: 26px; height: auto; } .ps-nav { position: absolute; left: 50%; transform: translateX(-50%); display: flex; gap: 1.75rem; } .ps-nav a { font-size: var(--ps-t-ui); font-weight: 500; letter-spacing: -0.01em; color: var(--ps-navy); text-decoration: none; } .ps-nav a:hover { color: var(--ps-blue); } .ps-header-actions { margin-left: auto; display: flex; align-items: center; gap: var(--ps-sp-5); } .ps-header-cta { padding: 0.5rem 1.15rem; font-size: var(--ps-t-sm); } .ps-cart { display: inline-flex; align-items: center; gap: var(--ps-sp-2); color: var(--ps-navy); text-decoration: none; font-size: var(--ps-t-base); font-weight: 500; letter-spacing: -0.01em; } .ps-cart:hover { color: var(--ps-blue); } .ps-cart-ico { display: inline-flex; color: var(--ps-blue); } .ps-cart-ico-m { display: none; color: var(--ps-blue); } .ps-cart-label { white-space: nowrap; } .ps-cart-badge { display: none; } /* count badge — mobile only (≤1023px block) */ /* Header icon buttons — the menu hamburger + search trigger. Flat, transparent, navy → blue on hover; SVGs block-level so the hit area hugs the glyph. */ .ps-icon-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.375rem; margin: 0; background: transparent; border: 0; color: var(--ps-navy); cursor: pointer; line-height: 0; transition: color var(--ps-dur-1) ease; } .ps-icon-btn:hover { color: var(--ps-blue); } .ps-icon-btn svg { display: block; } /* Menu hamburger — mobile-only trigger (desktop keeps the inline .ps-nav). The three bars flip to an X while the menu overlay is open (aria-expanded). */ .ps-menu-trigger { display: none; margin-left: -0.375rem; } .ps-burger { display: block; width: 22px; height: 16px; position: relative; } .ps-burger i { position: absolute; left: 0; right: 0; height: 2px; background: currentColor; border-radius: 2px; transition: transform var(--ps-dur-1) ease, opacity var(--ps-dur-1) ease, top var(--ps-dur-1) ease; } .ps-burger i:nth-child(1) { top: 0; } .ps-burger i:nth-child(2) { top: 7px; } .ps-burger i:nth-child(3) { top: 14px; } .ps-menu-trigger[aria-expanded="true"] .ps-burger i:nth-child(1) { top: 7px; transform: rotate(45deg); } .ps-menu-trigger[aria-expanded="true"] .ps-burger i:nth-child(2) { opacity: 0; } .ps-menu-trigger[aria-expanded="true"] .ps-burger i:nth-child(3) { top: 7px; transform: rotate(-45deg); } /* ========================================================================== Hero ========================================================================== */ .ps-hero { position: relative; min-height: 204px; display: grid; place-items: center; overflow: hidden; margin-bottom: var(--ps-section-sm); } .ps-hero-media { position: absolute; inset: 0; z-index: 0; } .ps-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; } /* Compact hero: mobile 204px (Figma "Frame 143"), desktop 276px (Figma "Hero"), both the correct hands-up crop. */ @media (min-width: 741px) { .ps-hero { min-height: 276px; } .ps-hero-media img { object-position: center 46%; } } /* Shadow overlay ABOVE the image (z-index:1) — matches the Figma "Background" layer: a flat black scrim so the white copy stays legible over the bright lab coat (this replaces the old white wash that washed the image out). The bottom ramps to solid white so the hero blends into the page. A pseudo-element paints below its parent's child by default, hence the explicit z-index. */ .ps-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,0) 80%, rgba(255,255,255,0.55) 92%, #fff 100%), linear-gradient(180deg, rgba(11,25,40,0.10) 0%, rgba(11,25,40,0.30) 55%, rgba(11,25,40,0.34) 100%); } .ps-hero-copy { position: relative; z-index: 2; text-align: center; padding: 1.5rem var(--ps-gutter); } @media (min-width: 741px) { .ps-hero-copy { padding: 2rem var(--ps-gutter); } } .ps-hero-copy h1 { font-size: clamp(1.875rem, 1.4rem + 2vw, 2.5rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; color: #fff; margin: 0 0 0.5rem; text-shadow: 0 1px 24px rgba(11, 19, 30, 0.25); } .ps-hero-copy p { font-size: 1rem; color: rgba(255, 255, 255, 0.92); margin: 0 0 1.75rem; text-shadow: 0 1px 16px rgba(11, 19, 30, 0.3); } /* ========================================================================== Wash cards (support / keypoints / shop values) ========================================================================== */ .ps-support-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ps-gap-grid); } .ps-wash-card { background: var(--ps-wash); display: flex; align-items: center; justify-content: space-between; gap: var(--ps-sp-3); padding: 1.125rem 0 1.125rem 1.5rem; min-height: 6rem; overflow: hidden; } .ps-wash-copy { min-width: 0; } .ps-wash-card h3 { font-size: 1.25rem; font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; color: var(--ps-ink); margin: 0 0 0.375rem; } .ps-wash-card p { font-size: var(--ps-t-sm); line-height: 1.35; color: var(--ps-muted); margin: 0; } .ps-wash-card .ps-wash-sub { color: var(--ps-blue); font-weight: 500; margin-bottom: 0.25rem; } .ps-wash-card img { flex: 0 0 auto; width: 122px; height: 104px; object-fit: contain; object-position: right center; } /* ========================================================================== Why choose us — wash cards with the Figma render treatment (the ORIGINAL, restored at the user's call after the panel / plates / dossier experiments). ========================================================================== */ .ps-why-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8125rem; /* original Figma rhythm for this row (predates --ps-gap-grid) */ } /* Why-us card icons — matched to the Figma: each bleeds off the right, the DNA helix tilts and fades at the bottom, the COA sheet zooms + angles, the gauge sits cropped at the edge. Absolute so they can overflow the card. */ .ps-why-cards .ps-wash-card { position: relative; overflow: hidden; } .ps-why-cards .ps-wash-card .ps-wash-copy { position: relative; z-index: 2; } .ps-why-cards .ps-wash-card > img { position: absolute; top: 50%; right: 0; width: auto; height: 150px; margin: 0; pointer-events: none; z-index: 1; } .ps-why-cards .ps-icon-dna > img { height: 176px; right: -34px; transform: translateY(-50%) rotate(23deg); -webkit-mask-image: linear-gradient(176deg, #000 50%, transparent 86%); mask-image: linear-gradient(176deg, #000 50%, transparent 86%); } .ps-why-cards .ps-icon-coa > img { height: auto; width: 205px; right: -34px; transform: translateY(-50%) rotate(-12deg); filter: drop-shadow(0 10px 16px rgba(11, 19, 30, 0.10)); } .ps-why-cards .ps-icon-gauge > img { height: 112px; right: -14px; transform: translateY(-50%); filter: drop-shadow(0 8px 14px rgba(11, 19, 30, 0.12)); } /* ========================================================================== Products marquee (home) ========================================================================== */ /* The track is NOT animated until ps.js confirms every image has decoded: Chrome rasterizes an animated (composited) layer once and misses textures that decode later — cards painted blank. No animation → normal raster; .is-ready then starts the loop with all textures present. */ .ps-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%); } .ps-marquee-track { display: flex; width: max-content; } .ps-marquee.is-ready .ps-marquee-track { animation: ps-marquee 45s linear infinite; } .ps-marquee:hover .ps-marquee-track { animation-play-state: paused; } .ps-marquee-group { display: flex; padding-right: 1rem; } @keyframes ps-marquee { to { transform: translateX(-50%); } } .ps-disclaimer { font-size: var(--ps-t-xs); color: var(--ps-soft); margin: 1.25rem 0 0; } /* Woo loop cards — shared by marquee + shop grid. The shortcode wraps everything in div.woocommerce — flatten it, then kill Woo's clearfix pseudo grid items and width presets. */ .ps-shop-grid > .woocommerce, .ps-marquee-group > .woocommerce { display: contents; } ul.products[class*="columns-"]::before, ul.products[class*="columns-"]::after { display: none !important; content: none !important; } ul.products[class*="columns-"] { margin: 0 !important; padding: 0 !important; list-style: none; } ul.products[class*="columns-"] li.product { float: none !important; width: auto !important; margin: 0 !important; background: var(--ps-wash); padding: 1.25rem 1.25rem 1rem; display: flex; flex-direction: column; text-align: left; } /* The loop link carries the whole card body (title/meta/price/image, already in design order via functions.php hooks). NOT display:contents — Chrome skips painting replaced elements through contents-anchors inside the max-content marquee track (verified empirically). */ ul.products[class*="columns-"] li.product a.woocommerce-LoopProduct-link { display: flex !important; flex-direction: column; flex: 1 1 auto; min-width: 0; color: inherit; text-decoration: none; } ul.products[class*="columns-"] li.product .woocommerce-loop-product__title { font-size: 1rem; font-weight: 500; letter-spacing: -0.01em; color: var(--ps-ink); padding: 0; margin: 0 0 0.25rem; order: 1; } ul.products[class*="columns-"] li.product .ps-card-meta { font-size: var(--ps-t-xs); color: var(--ps-muted); margin: 0 0 0.375rem; order: 2; } ul.products[class*="columns-"] li.product .price { font-size: var(--ps-t-ui); font-weight: 500; color: var(--ps-blue) !important; margin: 0 0 0.75rem; order: 3; } ul.products[class*="columns-"] li.product img.attachment-woocommerce_single, ul.products[class*="columns-"] li.product img { order: 4; width: auto; max-width: 78%; height: 170px; object-fit: contain; margin: auto; } ul.products[class*="columns-"] li.product .ps-card-actions { order: 5; margin-top: auto; display: flex; justify-content: flex-end; } .ps-learn-more { display: inline-flex; align-items: center; gap: 0.25rem; font-size: var(--ps-t-xs); font-weight: 500; color: var(--ps-blue); text-decoration: underline; text-underline-offset: 3px; } .ps-learn-more:hover { color: var(--ps-blue-deep); } /* Stray empty paragraphs from wpautop inside cards */ ul.products li.product > p:empty { display: none; } /* Marquee-specific card geometry */ .ps-marquee ul.products[class*="columns-"] { display: flex !important; gap: var(--ps-sp-6); width: max-content; } .ps-marquee-group { padding-right: 1.5rem; } .ps-marquee li.product { width: 230px !important; min-height: 300px; } .ps-marquee ul.products[class*="columns-"] li.product img { height: 162px; max-width: 92%; } /* ========================================================================== Splits + considerations + accordion + shipping ========================================================================== */ .ps-split { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center; } .ps-split-media { margin: 0; } .ps-split-media img { width: 100%; height: 300px; object-fit: cover; } .ps-media-plain img { height: auto; max-height: 224px; width: auto; max-width: 100%; object-fit: contain; margin: 0 auto; } .ps-split-sub { font-size: 1rem; font-weight: 500; color: var(--ps-ink); margin: -0.75rem 0 1rem; } .ps-split-body { font-size: 1rem; line-height: 1.45; color: var(--ps-muted); margin: 0 0 1.5rem; max-width: 36rem; } .ps-kicker { font-size: var(--ps-t-ui); font-weight: 500; color: var(--ps-ink); margin: 0 0 1.25rem; } .ps-considerations-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.5rem; } .ps-considerations-grid h4 { font-size: var(--ps-t-sm); font-weight: 500; color: var(--ps-blue); margin: 0 0 0.5rem; } .ps-considerations-grid p { font-size: var(--ps-t-xs); line-height: 1.45; color: var(--ps-muted); margin: 0; } .ps-accordion { display: flex; flex-direction: column; gap: var(--ps-sp-2); margin: 0 0 1.5rem; } .ps-accordion details { background: var(--ps-wash); } .ps-accordion summary { display: flex; align-items: center; justify-content: space-between; padding: 0.875rem 1rem; font-size: var(--ps-t-ui); font-weight: 500; color: var(--ps-ink); } .ps-accordion summary::after { content: ""; width: 8px; height: 8px; border-right: 1.6px solid var(--ps-muted); border-bottom: 1.6px solid var(--ps-muted); transform: rotate(45deg); transition: transform var(--ps-dur-1) ease; flex: 0 0 auto; margin-left: 1rem; } .ps-accordion details[open] summary::after { transform: rotate(-135deg); } .ps-accordion-body { padding: 0 1rem 1rem; } .ps-accordion-body p { font-size: var(--ps-t-sm); line-height: 1.45; color: var(--ps-muted); margin: 0 0 0.625rem; } .ps-tested-for { color: var(--ps-ink); } .ps-tested-for span { color: var(--ps-blue); font-weight: 500; } /* ========================================================================== FAQ ========================================================================== */ .ps-faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ps-sp-3); align-items: start; } .ps-faq details, .ps-faq-col details { background: var(--ps-paper); border: 1px solid var(--ps-line); } .ps-faq summary { display: flex; align-items: center; justify-content: space-between; padding: 0.875rem 1rem; font-size: var(--ps-t-sm); font-weight: 500; color: var(--ps-ink); } .ps-faq summary::after { content: ""; width: 7px; height: 7px; border-right: 1.6px solid var(--ps-muted); border-bottom: 1.6px solid var(--ps-muted); transform: rotate(45deg); transition: transform var(--ps-dur-1) ease; margin-left: 1rem; flex: 0 0 auto; } .ps-faq details[open] summary::after { transform: rotate(-135deg); } .ps-faq details > p { padding: 0 1rem 0.875rem; margin: 0; font-size: var(--ps-t-sm); line-height: 1.5; color: var(--ps-muted); } .ps-faq-col { display: flex; flex-direction: column; gap: var(--ps-sp-3); } /* ========================================================================== CTA band ========================================================================== */ /* Slim premium bands — Figma tiles are 590×180 (~3.3:1), 20px gap. */ .ps-cta-band { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 180px; gap: var(--ps-sp-5); } /* Fixed row height (grid-auto-rows) is what actually pins the slim tiles — items with align-items:stretch ignore their own height and stretch to the row, and without a fixed row the portrait box image inflates it. min-height:0 lets the image be clipped rather than setting the row's min-content floor. */ .ps-cta-band > * { min-height: 0; box-sizing: border-box; } .ps-cta-help { background: var(--ps-blue); color: #fff; padding: 2rem; position: relative; overflow: hidden; height: 180px; display: flex; flex-direction: column; justify-content: space-between; } .ps-cta-help h2 { font-size: 1.375rem; font-weight: 500; line-height: 1.15; letter-spacing: -0.01em; color: #fff; margin: 0 0 0.75rem; max-width: 45%; } .ps-cta-reach { font-size: var(--ps-t-sm); line-height: 1.5; color: rgba(255, 255, 255, 0.85); margin: 0; } .ps-cta-reach a { color: #fff; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; } .ps-chat { position: absolute; right: 2rem; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 0.375rem; width: 52%; } .ps-chat p { margin: 0; font-size: var(--ps-t-xs); line-height: 1.3; padding: 0.5rem 0.875rem; border-radius: var(--ps-r-pill); width: fit-content; } .ps-chat-in { background: #16A2F9; color: #fff; align-self: flex-end; } .ps-chat-out { background: #fff; color: var(--ps-ink); align-self: flex-start; margin-top: 0.5rem; border-radius: var(--ps-r-md); } .ps-cta-shop { background: var(--ps-navy); color: #fff; padding: 2rem 2rem 0; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ps-sp-4); overflow: hidden; height: 180px; } .ps-cta-shop .ps-cta-shop-copy { padding-bottom: 2rem; } .ps-cta-shop h2 { font-size: 1.375rem; font-weight: 500; line-height: 1.15; letter-spacing: -0.01em; color: #fff; margin: 0 0 1rem; } .ps-cta-dim { color: rgba(255, 255, 255, 0.45); } .ps-cta-shop img { height: 200px; width: auto; flex: 0 0 auto; align-self: flex-end; margin-bottom: -1.25rem; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.45)); } /* ========================================================================== SHOP (v2 redesign) — Figma HyPStzuochxvctFWZiAGrc / 1445:2731 Masthead → 3 value cards → search → 4×2 product grid (+ not-found tile) → Same-Day Shipping. Content column is the shared 1200px track; product tiles reuse the global Woo loop card so they're identical to Home's. Colors sampled from the artboard all resolve to existing tokens — nothing hardcoded. Card / tile / field rounding (16px) comes from the shared radius block below. ========================================================================== */ /* Masthead — eyebrow / H1 / subhead. These three are generic page-masthead helpers (also used by index.php, page.php, page-coa.php) — keep them global. */ .ps-shop-intro { width: min(var(--ps-col), 100% - 2 * var(--ps-gutter)); margin: var(--ps-section-sm) auto var(--ps-sp-5); } .ps-eyebrow { font-size: var(--ps-t-xs); font-weight: 500; color: var(--ps-blue); margin: 0 0 0.75rem; } .ps-page-title { font-size: var(--ps-t-h2); font-weight: 500; line-height: 1.167; letter-spacing: -0.01em; color: var(--ps-navy); margin: 0 0 0.5rem; } .ps-page-sub { font-size: 1rem; color: var(--ps-muted); margin: 0; } /* Left-biased page wash — the pale-blue "Rectangle 50" glow behind the value cards + first product row (Figma samples to ~#E5F5FF on the left edge). The global .ps-main::before glows are tuned for the Home artboard; override just the background for the shop so the light pools on the left, not the centre. */ .ps-shop.ps-main::before { background: radial-gradient(40rem 26rem at -4% 14%, rgba(0, 118, 184, 0.07), transparent 66%), radial-gradient(46rem 34rem at -8% 42%, rgba(0, 118, 184, 0.055), transparent 66%), radial-gradient(24rem 22rem at 104% 28%, rgba(0, 118, 184, 0.03), transparent 70%); } /* Value row — Supported / Informed / Confident. Same card family as Home's key-points (white + hairline border vs the borderless why-us wash); 3-across on desktop with the Figma's 20px gutter, stacking on mobile. */ .ps-shop-values { width: min(var(--ps-col), 100% - 2 * var(--ps-gutter)); margin: 0 auto var(--ps-section-sm); } .ps-shop-values .ps-wash-card { background: var(--ps-paper); border: 1px solid var(--ps-line); } /* Search — a styled field wrapping the live client-side filter (#ps-shop-filter, wired in ps.js); the leading glyph is a static magnifier. */ .ps-shop-search { width: min(var(--ps-col), 100% - 2 * var(--ps-gutter)); margin: 0 auto 1.5rem; display: flex; align-items: center; gap: var(--ps-sp-3); background: var(--ps-field); border: 1px solid var(--ps-line); padding: 0.875rem 1.125rem; color: var(--ps-soft); } .ps-shop-search input { flex: 1; min-width: 0; border: 0; background: transparent; font-family: var(--ps-font); font-size: 1rem; color: var(--ps-ink); outline: none; } .ps-shop-search input::placeholder { color: var(--ps-soft); } /* Product grid — 4 columns × 2 rows (7 products + the not-found tile = 8), the Figma's 20px gutter. The [products] shortcode wraps the loop in div.woocommerce (flattened to display:contents by the shared Woo-loop block above) and ul.products (flattened here) so each li.product becomes a direct grid item. Tile geometry matches Home's card (1.125rem padding); the image fills the wider 4-up cell. */ .ps-shop-grid { width: min(var(--ps-col), 100% - 2 * var(--ps-gutter)); margin: 0 auto var(--ps-section); display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--ps-gap-grid); } .ps-shop-grid ul.products[class*="columns-"] { display: contents !important; } .ps-shop-grid li.product { min-height: 288px; padding: 1.125rem; } .ps-shop-grid ul.products[class*="columns-"] li.product img { height: 162px; max-width: 78%; } .ps-shop-grid li.product[hidden] { display: none !important; } /* Not-found tile — the grid's last cell, a pale-blue panel (Figma ~#DEF1F7, token-derived from --ps-blue; --ps-pale is the no-color-mix fallback). Grid row-stretch matches its height to the product cards. */ .ps-notfound-tile { background: var(--ps-pale); background: color-mix(in srgb, var(--ps-blue) 12%, #fff); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--ps-sp-2); min-height: 288px; padding: 1.25rem; text-align: center; } .ps-notfound-tile .ps-notfound-title { font-size: 1rem; font-weight: 500; line-height: 1.3; color: var(--ps-ink); margin: 0; } .ps-notfound-tile a { font-size: var(--ps-t-sm); color: var(--ps-blue); text-decoration: underline; text-underline-offset: 3px; } /* Catalog mobile — natural DOM order (masthead → values → search → grid → shipping) per the 390 artboard; grid drops to 2-up, value cards stack. The .ps-shop-values selector out-specifies the base stacking rule, so restate it. */ @media (max-width: 900px) { .ps-shop-grid { grid-template-columns: repeat(2, 1fr); } .ps-shop-grid ul.products[class*="columns-"] li.product img { height: 190px; } .ps-shop-values .ps-support-cards { grid-template-columns: 1fr; } } /* ========================================================================== PDP ========================================================================== */ /* Buy box: image panel (left) + summary (right), 1200 container (Figma 12952:1957) */ .ps-pd-crumb { width: min(var(--ps-col), 100% - 2 * var(--ps-gutter)); margin: 1.5rem auto 0; display: flex; align-items: center; gap: var(--ps-sp-2); } .ps-pd-crumb a { font-size: var(--ps-t-sm); color: var(--ps-muted); text-decoration: none; } .ps-pd-crumb a:hover { color: var(--ps-blue); } .ps-pd-crumb span { font-size: var(--ps-t-sm); font-weight: 500; color: var(--ps-ink); } .ps-pd-crumb .ps-crumb-sep { color: var(--ps-line-2); flex: 0 0 auto; } .ps-pdp .woocommerce { width: min(var(--ps-col), 100% - 2 * var(--ps-gutter)); margin: 0 auto; } .ps-pdp div.product { width: min(var(--ps-col), 100% - 2 * var(--ps-gutter)); margin: 1.75rem auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 3.75rem; align-items: start; } .ps-pdp div.product > .woocommerce-product-gallery, .ps-pdp div.product > .summary { float: none !important; width: auto !important; } /* Image panel — soft wash, rounded; single static image (Woo ships the gallery at opacity:0 for a flexslider we don't load, so force it visible). */ .ps-pdp .woocommerce-product-gallery { margin: 0 !important; opacity: 1 !important; } .ps-pdp .woocommerce-product-gallery__wrapper { margin: 0; background: var(--ps-pale); border-radius: var(--ps-r-lg); aspect-ratio: 570 / 480; display: grid; place-items: center; padding: 2rem; } .ps-pdp .woocommerce-product-gallery .flex-viewport { overflow: visible; width: 100%; } .ps-pdp .woocommerce-product-gallery img { width: 100%; height: auto; object-fit: contain; } .ps-pdp .woocommerce-product-gallery__trigger { display: none !important; } /* Trust badges under the image (injected via woocommerce_product_thumbnails) */ .ps-pd-trust { list-style: none; display: flex; flex-wrap: wrap; gap: 0.625rem; margin: 1rem 0 0; padding: 0; } .ps-pd-trust li { border: 1px solid var(--ps-line); border-radius: var(--ps-r-sm); color: var(--ps-muted); font-size: var(--ps-t-2xs); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.5rem 0.75rem; } /* Summary (right column) — stack in hook-priority order */ .ps-pdp .summary { margin: 0 !important; position: static; display: flex; flex-direction: column; } /* Title row: name LEFT, availability badge top-RIGHT on the same visual line. Long names wrap under the badge (title flexes, badge never shrinks). */ .ps-pd-titlerow { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.875rem; } .ps-pd-titlerow .product_title { flex: 1 1 auto; min-width: 0; } .ps-pd-stock { flex: 0 0 auto; font-size: var(--ps-t-2xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.3125rem 0.625rem; border-radius: var(--ps-r-xs); margin: 0.625rem 0 0; /* optically centers on the title's first line */ white-space: nowrap; } .ps-pd-stock.is-in { color: #1B7F4E; background: #E4F3EA; } .ps-pd-stock.is-out { color: #9A3B33; background: #F6E7E5; } .ps-pdp .summary .product_title { font-size: var(--ps-t-h1); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; color: var(--ps-navy); margin: 0; max-width: none; display: block; } .ps-pd-spec { font-size: var(--ps-t-base); color: var(--ps-muted); margin: 0.625rem 0 0; } .ps-pd-desc { font-size: 1rem; line-height: 1.5; color: var(--ps-ink); margin: 1.25rem 0 0; } .ps-pdp .summary > .price { position: static; margin: 1.5rem 0 0; padding: 0; font-size: 2rem; font-weight: 700; line-height: 1; color: var(--ps-navy) !important; } .ps-pdp .summary > .price .woocommerce-Price-amount { font-weight: 700; color: var(--ps-navy); } .ps-pdp .summary > .price::after { content: " per box"; font-size: var(--ps-t-base); font-weight: 400; letter-spacing: 0; color: var(--ps-muted); } /* Pack-size selector (3 radio cards; ps.js sets the qty input) */ .ps-pack { margin: 1.5rem 0 0; display: flex; flex-direction: column; gap: var(--ps-sp-2); } .ps-pack-label { font-size: var(--ps-t-2xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ps-muted); margin: 0 0 0.25rem; } .ps-pack-opt { position: relative; display: flex; align-items: center; gap: 0.875rem; border: 1px solid var(--ps-line); border-radius: var(--ps-r-md); padding: 0.875rem 1.125rem; cursor: pointer; transition: border-color var(--ps-dur-1) ease, background var(--ps-dur-1) ease, box-shadow var(--ps-dur-1) ease; } .ps-pack-opt:hover { border-color: var(--ps-line-2); } .ps-pack-opt input { position: absolute; opacity: 0; pointer-events: none; margin: 0; } .ps-pack-opt.is-selected { border-color: var(--ps-blue); background: var(--ps-pale); box-shadow: inset 0 0 0 1px var(--ps-blue); } .ps-pack-radio { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--ps-line-2); position: relative; transition: border-color var(--ps-dur-1) ease; } .ps-pack-opt.is-selected .ps-pack-radio { border-color: var(--ps-blue); } .ps-pack-opt.is-selected .ps-pack-radio::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--ps-blue); } .ps-pack-main { flex: 1 1 auto; display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; } .ps-pack-name { font-size: var(--ps-t-base); font-weight: 500; color: var(--ps-navy); } .ps-pack-sub { font-size: var(--ps-t-sm); color: var(--ps-muted); } .ps-pack-right { flex: 0 0 auto; display: flex; align-items: center; gap: var(--ps-sp-3); } .ps-pack-badge { font-size: var(--ps-t-2xs); font-weight: 700; color: #fff; padding: 0.25rem 0.5rem; border-radius: var(--ps-r-xs); letter-spacing: 0.01em; white-space: nowrap; } .ps-pack-badge.is-popular { background: var(--ps-navy); } .ps-pack-badge.is-best { background: var(--ps-blue); } .ps-pack-price { font-size: 1rem; font-weight: 700; color: var(--ps-navy); } /* Quantity stepper (left) + add-to-cart (right) — one row, form intact */ .ps-pdp form.cart { display: grid; grid-template-columns: 118px 1fr; gap: 0.625rem; margin: 1.25rem 0 0 !important; align-items: stretch; clear: both; } .ps-pdp form.cart .quantity { order: 1; display: inline-flex !important; float: none !important; align-items: stretch; border: 1px solid var(--ps-line-2); border-radius: var(--ps-r-sm); overflow: hidden; height: 52px; } .ps-pdp form.cart .quantity .qty { flex: 1 1 auto; width: 100%; min-width: 0; border: 0; text-align: center; font-family: var(--ps-font); font-size: 1rem; color: var(--ps-ink); appearance: textfield; -moz-appearance: textfield; background: transparent; } .ps-pdp .quantity .qty::-webkit-outer-spin-button, .ps-pdp .quantity .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .ps-qty-btn { border: 0; background: transparent; color: var(--ps-navy); font-size: 1.25rem; line-height: 1; width: 2.25rem; flex: 0 0 auto; cursor: pointer; font-family: var(--ps-font); } .ps-qty-btn:hover { color: var(--ps-blue); } .ps-pdp form.cart .single_add_to_cart_button { order: 2; background: var(--ps-blue); color: #fff; border: 0; border-radius: var(--ps-r-sm); font-family: var(--ps-font); font-size: var(--ps-t-base); font-weight: 500; text-transform: none; padding: 0 1.5rem; height: 52px; width: 100%; cursor: pointer; transition: background var(--ps-dur-1) ease; } .ps-pdp form.cart .single_add_to_cart_button:hover { background: var(--ps-blue-deep); } /* COA assurance line under the cart form */ .ps-pd-coa { display: flex; align-items: flex-start; gap: var(--ps-sp-3); border: 1px solid var(--ps-line); border-radius: var(--ps-r-md); padding: 1rem 1.125rem; margin: 1.25rem 0 0; } .ps-pd-coa-ico { color: var(--ps-blue); flex: 0 0 auto; margin-top: 1px; line-height: 0; } .ps-pd-coa-txt { font-size: var(--ps-t-sm); line-height: 1.45; color: var(--ps-muted); margin: 0; flex: 1 1 auto; } .ps-pd-coa-txt strong { color: var(--ps-ink); font-weight: 700; } .ps-pd-coa-link { flex: 0 0 auto; align-self: center; color: var(--ps-blue); font-size: var(--ps-t-sm); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; } .ps-pdp .summary .ps-ruo-inline { margin-top: 1rem; } /* PDP sections — 750px centered column */ .ps-pdp-section { width: min(var(--ps-prose), 100% - 2 * var(--ps-gutter)); margin: var(--ps-section-sm) auto; } .ps-pdp-section h2 { font-size: 1.25rem; font-weight: 500; letter-spacing: -0.01em; color: var(--ps-navy); margin: 0 0 0.875rem; } .ps-pdp-body p { font-size: 1rem; line-height: 1.45; color: var(--ps-muted); margin: 0 0 0.75rem; } .ps-pdp-contents { font-size: var(--ps-t-base); color: var(--ps-muted); margin: 0.75rem 0 0; } .ps-pdp-contents strong { color: var(--ps-ink); font-weight: 500; } .ps-coa-head { display: flex; align-items: center; justify-content: space-between; gap: var(--ps-sp-4); margin-bottom: 1rem; } .ps-coa-head h2 { margin: 0; } .ps-coa-tabs { display: flex; gap: 0.375rem; } .ps-coa-tabs button { border: 0; background: transparent; color: var(--ps-blue); font-family: var(--ps-font); font-size: var(--ps-t-xs); font-weight: 500; padding: 0.5rem 0.875rem; cursor: pointer; } .ps-coa-tabs button[aria-selected="true"] { background: var(--ps-blue); color: #fff; } .ps-coa-chips { display: flex; gap: var(--ps-sp-3); overflow-x: auto; scrollbar-width: none; padding-bottom: 0.25rem; } .ps-coa-chips::-webkit-scrollbar { display: none; } .ps-coa-chip { flex: 0 0 auto; background: var(--ps-chip); color: var(--ps-blue); font-size: var(--ps-t-xs); font-weight: 500; padding: 0.625rem 1.125rem; border-radius: var(--ps-r-pill); text-decoration: none; } .ps-coa-chip[aria-disabled="true"] { pointer-events: none; } .ps-coa-chip[hidden] { display: none; } .ps-structure-img { max-height: 280px; max-width: 100%; width: auto; height: auto; display: block; margin: 0 0 1rem; } .ps-structure-meta { margin: 0; } .ps-structure-meta div { display: flex; gap: var(--ps-sp-2); margin-bottom: 0.375rem; } .ps-structure-meta dt { font-size: var(--ps-t-xs); font-weight: 700; color: var(--ps-ink); } .ps-structure-meta dd { font-size: var(--ps-t-xs); color: var(--ps-muted); margin: 0; } .ps-key-areas-h { font-size: var(--ps-t-ui); font-weight: 500; color: var(--ps-blue); margin: 1.25rem 0 0.75rem; } .ps-key-areas { list-style: none; margin: 0 0 1.25rem; padding: 0; } .ps-key-areas li { font-size: var(--ps-t-ui); color: var(--ps-muted); padding-left: 1.125rem; position: relative; margin-bottom: 0.625rem; } .ps-key-areas li::before { content: ""; position: absolute; left: 0.25rem; top: 0.5em; width: 4px; height: 4px; border-radius: 50%; background: var(--ps-soft); } .ps-ref-band { background: var(--ps-blue); padding: 2.5rem var(--ps-gutter); margin: 2.5rem calc(50% - 50vw); width: 100vw; } .ps-ref-inner { max-width: var(--ps-prose); margin: 0 auto; } .ps-ref-inner h2 { font-size: 1.25rem; font-weight: 500; color: #fff; margin: 0 0 1rem; } .ps-ref-inner ul { list-style: none; margin: 0; padding: 0; } .ps-ref-inner li { margin-bottom: 0.625rem; } .ps-ref-inner a { color: #fff; font-size: var(--ps-t-base); text-decoration: underline; text-underline-offset: 3px; } .ps-ref-inner a:hover { color: var(--ps-chip); } .ps-others-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--ps-sp-3); } .ps-other-tile { background: var(--tile, var(--ps-navy)); aspect-ratio: 172 / 200; display: grid; place-items: center; overflow: hidden; } .ps-other-tile img { width: 80%; height: auto; object-fit: contain; filter: drop-shadow(0 16px 18px rgba(0, 0, 0, 0.3)); transition: transform var(--ps-dur-1) ease; } .ps-other-tile:hover img { transform: scale(1.05); } .ps-ruo { background: var(--ps-lilac); padding: 1.5rem; } .ps-ruo h2 { margin-bottom: 0.5rem; } .ps-ruo p { font-size: var(--ps-t-ui); line-height: 1.5; color: var(--ps-muted); margin: 0; } /* ========================================================================== Figma rounding — 16px on cards, tiles & field containers. (Client review: match the Figma's rounded corners. Buttons stay square per Figma; pills/chips stay fully round.) ========================================================================== */ .ps-wash-card, .ps-notfound-tile, .ps-other-tile, .ps-cta-help, .ps-cta-shop, .ps-shop-search, .ps-post-card, .ps-ruo, ul.products[class*="columns-"] li.product { border-radius: var(--ps-r-lg); } /* Woo notices, kept quiet and on-brand */ .woocommerce-notices-wrapper { width: min(var(--ps-col), 100% - 2 * var(--ps-gutter)); margin: 0 auto; } .woocommerce-message, .woocommerce-info, .woocommerce-error { border-top: 2px solid var(--ps-blue); background: var(--ps-wash); color: var(--ps-ink); font-size: var(--ps-t-ui); } .woocommerce-message a.button, .woocommerce-info a.button { background: var(--ps-blue); color: #fff; border-radius: 0; } /* ========================================================================== Prose pages (about/contact/blog fallbacks) ========================================================================== */ .ps-prose { padding-top: 2.5rem; padding-bottom: 4rem; } .ps-prose .ps-page-title { margin-bottom: 1.5rem; } .ps-prose p { color: var(--ps-muted); line-height: 1.55; } .ps-prose h2, .ps-prose h3 { color: var(--ps-navy); } /* ========================================================================== Footer ========================================================================== */ .ps-footer { background: var(--ps-dark); color: #fff; padding: 3.5rem var(--ps-gutter) 2rem; margin-top: 4rem; } .ps-footer-grid, .ps-footer-legal { max-width: var(--ps-col); margin-left: auto; margin-right: auto; } .ps-footer-grid { display: flex; align-items: flex-start; justify-content: space-between; gap: 3rem; } .ps-footer-logo { width: 150px; height: auto; display: block; margin-bottom: 2rem; } .ps-newsletter-label { display: block; font-size: var(--ps-t-ui); margin-bottom: 0.75rem; } .ps-newsletter-row { display: flex; } .ps-newsletter input { width: 250px; border: 0; padding: 0.75rem 1rem; font-family: var(--ps-font); font-size: var(--ps-t-sm); color: var(--ps-ink); background: #fff; } .ps-newsletter .ps-btn { padding: 0.75rem 1.375rem; font-size: var(--ps-t-sm); font-weight: 700; } .ps-newsletter-note { font-size: var(--ps-t-2xs); color: rgba(255, 255, 255, 0.5); margin: 0.5rem 0 0; } .ps-newsletter-note.ps-newsletter-done { color: var(--ps-chip); } .ps-footer-cols { display: flex; gap: 6rem; padding-top: 0.5rem; } .ps-footer-head { font-size: var(--ps-t-base); font-weight: 500; color: #fff; margin: 0 0 1rem; } .ps-footer-col a { display: block; font-size: var(--ps-t-ui); color: rgba(255, 255, 255, 0.6); text-decoration: none; margin-bottom: 0.75rem; } .ps-footer-col a:hover { color: #fff; } .ps-footer-legal { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.08); display: flex; align-items: center; justify-content: space-between; gap: var(--ps-sp-6); flex-wrap: wrap; } .ps-footer-legal p { margin: 0; font-size: var(--ps-t-sm); color: rgba(255, 255, 255, 0.6); } .ps-footer-legal-links { display: flex; gap: 2.5rem; } .ps-footer-legal a { color: rgba(255, 255, 255, 0.85); text-decoration: none; } .ps-footer-legal a:hover { color: #fff; } /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 1023px) { .ps-nav, .ps-header-cta { display: none; } .ps-menu-trigger { display: inline-flex; } .ps-logo { position: absolute; left: 50%; transform: translateX(-50%); } .ps-logo img.ps-logo-full { display: none; } .ps-logo img.ps-logo-mark { display: block; } .ps-cart { display: inline-flex; gap: 0; position: relative; } .ps-cart-ico { display: none; } .ps-cart-ico-m { display: inline-flex; } .ps-cart-label { display: none; } /* Count badge on the bag's corner — replaces the hidden text label. Navy on a white ring so it pops off both the header and the blue icon strokes; the fragment re-render on each add replays the pop animation. */ .ps-cart-badge { position: absolute; top: -5px; right: -7px; display: grid; place-items: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--ps-r-pill); background: var(--ps-navy); color: #fff; font-size: 9.5px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--ps-paper); animation: ps-badge-pop var(--ps-dur-2) var(--ps-ease-pop); } .ps-cart-badge[hidden] { display: none; } .ps-header { padding-top: 0.625rem; padding-bottom: 0.625rem; } } @keyframes ps-badge-pop { from { transform: scale(0.3); } } @media (prefers-reduced-motion: reduce) { .ps-cart-badge { animation: none; } } @media (max-width: 900px) { .ps-split { grid-template-columns: 1fr; gap: var(--ps-sp-6); } .ps-split-flip .ps-split-media { order: 2; } .ps-split-media img { height: 260px; } .ps-considerations-grid { grid-template-columns: 1fr 1fr; gap: var(--ps-sp-6); } .ps-cta-band { grid-template-columns: 1fr; grid-auto-rows: auto; } /* CTA tiles: drop the fixed 180px height so the chat bubbles / box image aren't clipped on mobile, and let the headings use full width. */ .ps-cta-help, .ps-cta-shop { height: auto; } .ps-cta-help { justify-content: flex-start; } .ps-cta-help h2, .ps-cta-shop h2 { max-width: none; } .ps-why-cards, .ps-support-cards { grid-template-columns: 1fr; } .ps-faq-grid { grid-template-columns: 1fr; } .ps-footer-grid { flex-direction: column; } .ps-pdp div.product { grid-template-columns: 1fr; gap: var(--ps-sp-6); } .ps-pdp .woocommerce-product-gallery { max-width: 300px; margin: 0 auto !important; } } @media (max-width: 740px) { /* Same-Day Shipping: the truck art is now tightly cropped; keep it compact so it doesn't leave big gaps above/below. */ .ps-shipping .ps-media-plain img { max-height: 150px; } /* Figma keeps the catalog grid 2-up on mobile (390), not 1-up. */ .ps-shop-grid ul.products[class*="columns-"] li.product img { height: 132px; } .ps-shop-grid li.product { min-height: 220px; } .ps-others-grid { grid-template-columns: 1fr 1fr; } .ps-marquee li.product { width: 200px !important; } .ps-chat { position: static; transform: none; width: auto; max-width: 20rem; margin-top: var(--ps-sp-4); } /* CTA tiles, phone composition: tighter padding; the box render scales down and pulls UP beside the Browse button (negative top margin) so the navy tile carries no dead zone — copy top-left, render nested bottom-right, still bleeding off the tile's corner. Keeps both tiles near-equal height. */ .ps-cta-help { padding: var(--ps-sp-6); } .ps-cta-shop { flex-direction: column; align-items: stretch; padding: var(--ps-sp-6) var(--ps-sp-6) 0; } .ps-cta-shop .ps-cta-shop-copy { padding-bottom: 0; } .ps-cta-shop img { align-self: flex-end; height: 160px; margin-top: -4rem; margin-bottom: -1rem; } .ps-footer-cols { gap: 3rem; flex-wrap: wrap; } .ps-newsletter-row { width: 100%; } .ps-newsletter input { flex: 1; width: auto; min-width: 0; } .ps-footer-legal { flex-direction: column; align-items: flex-start; } .ps-coa-head { flex-wrap: wrap; } /* Figma mobile PDP (12544:2323): Add-To-Cart + qty stay on one row (was stacked full-width), price stays top-right of the title, and the COA lot chips wrap 3-up instead of scrolling off the right edge. */ .ps-pdp form.cart { grid-template-columns: 1fr 118px; } .ps-coa-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ps-sp-2); overflow: visible; padding-bottom: 0; } .ps-coa-chip { text-align: center; padding: 0.625rem 0.5rem; } } @media (max-width: 560px) { /* Why-us cards on narrow phones: slightly smaller headline + pull the COA sheet fully right so it stops overlapping the "Batch-Level Verification" text (client feedback). */ .ps-why-cards .ps-wash-card h3 { font-size: 1.125rem; } .ps-why-cards .ps-icon-coa > img { width: 132px; right: -14px; } } @media (prefers-reduced-motion: reduce) { .ps-marquee-track, .ps-marquee.is-ready .ps-marquee-track { animation: none; } .ps-marquee { overflow-x: auto; } .ps-other-tile img, .ps-btn, .ps-burger i { transition: none; } } /* ========================================================================== About + Contact pages (page-about.php / page-contact.php) Contact: Figma 12513:630. Shared page-head band + inquiry block below. About: rebuilt — see the "ABOUT (v2 redesign)" block further down. Reuses .ps-section, .ps-split, .ps-cta-band, .ps-btn + the tokens. ========================================================================== */ /* Shared type helpers + larger button (Figma body buttons are Bold 16 / h48) */ .ps-h4 { font-size: 1rem; font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; color: var(--ps-ink); margin: 0 0 0.75rem; } .ps-lead { font-size: 1rem; font-weight: 400; line-height: 1.35; letter-spacing: -0.01em; color: var(--ps-soft); margin: 0 0 1.5rem; } .ps-btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ps-sp-4); } .ps-btn-lg { font-size: 1rem; font-weight: 700; line-height: 1; padding: 1rem 1.875rem; } .ps-btn-outline { background: transparent; border: 1px solid var(--ps-blue); color: var(--ps-ink); } .ps-btn-outline:hover { background: var(--ps-wash); color: var(--ps-ink); } .ps-btn-white { background: #fff; color: var(--ps-navy); } .ps-btn-white:hover { background: var(--ps-wash); color: var(--ps-navy); } .ps-cta-contact { align-self: flex-start; } /* --- Interior page-head band (breadcrumb + blue title + DNA) --- */ .ps-page-head { position: relative; background: var(--ps-wash); overflow: hidden; } .ps-page-head-inner { position: relative; z-index: 1; width: min(var(--ps-col), 100% - 2 * var(--ps-gutter)); margin: 0 auto; padding: 2.5rem 0; } .ps-breadcrumb { display: flex; align-items: center; gap: var(--ps-sp-2); margin: 0 0 0.5rem; } .ps-breadcrumb a { font-size: var(--ps-t-xs); color: var(--ps-muted); text-decoration: none; } .ps-breadcrumb a:hover { color: var(--ps-blue); } .ps-breadcrumb span { font-size: var(--ps-t-xs); font-weight: 500; color: var(--ps-ink); } .ps-crumb-sep { color: var(--ps-muted); flex: 0 0 auto; } .ps-page-head-title { font-size: var(--ps-t-h2); font-weight: 500; line-height: 1.167; letter-spacing: -0.01em; color: var(--ps-blue); margin: 0; } .ps-page-head-dna { position: absolute; top: -46px; right: 5%; width: 460px; height: auto; transform: rotate(23deg); opacity: 0.92; pointer-events: none; z-index: 0; } /* ========================================================================== ABOUT (v2 redesign) — Figma HyPStzuochxvctFWZiAGrc / 1100:6361 Desktop artboard 1445:7684 (1440) · mobile 1445:7285 (390). Rebuilt against the client Figma: the hero is now a CONTAINED rounded band (was full-bleed), the Mission card shows on DESKTOP over the microscope, the feature fine-print is centred, and the doc panel is rounded. The v1 "research inquiry" split is gone from About (its shared inquiry/contact rules remain below for Contact). Reuses .ps-section / .ps-split / .ps-btn / .ps-cta-band + the tokens. ========================================================================== */ /* --- Hero: contained tinted band (wash → bubble photo), copy + product trio. The band is the 1200px content track with 16px rounding; the product column bleeds to the right/bottom edges and is clipped by overflow. --- */ .ps-about-hero { position: relative; overflow: hidden; width: min(var(--ps-col), 100% - 2 * var(--ps-gutter)); margin: 0 auto var(--ps-section); border-radius: var(--ps-r-lg); background: linear-gradient(90deg, var(--ps-wash) 0%, rgba(248, 251, 252, 0.94) 32%, rgba(248, 251, 252, 0) 60%), url('../img/about/hero-bg.png') center right / cover no-repeat, var(--ps-wash); } .ps-about-hero-inner { position: relative; z-index: 1; /* pad the copy side only; the product column reaches the band's right edge */ padding: 2.25rem 0 2.25rem 2.5rem; min-height: 354px; display: grid; grid-template-columns: 480px 1fr; gap: var(--ps-sp-6); align-items: center; } .ps-about-hero-copy { max-width: 480px; } .ps-about-hero-copy .ps-h2 { margin-bottom: 0.75rem; } .ps-about-hero-copy .ps-h4 { margin-bottom: 0.875rem; } .ps-ruo-inline { display: flex; align-items: flex-start; gap: var(--ps-sp-2); font-size: var(--ps-t-xs); font-style: italic; line-height: 1.3; color: var(--ps-soft); margin: 1.25rem 0 0; } .ps-ruo-icon { color: #E0483B; flex: 0 0 auto; margin-top: 1px; } .ps-lbl-m { display: none; } .ps-hero-boxes { position: relative; align-self: stretch; min-height: 320px; } .ps-hero-box { position: absolute; height: auto; object-fit: contain; filter: drop-shadow(0 22px 32px rgba(11, 25, 40, 0.2)); } .ps-hero-box-c { width: 300px; left: 28%; top: -4%; z-index: 3; } .ps-hero-box-l { width: 244px; left: -6%; top: 16%; z-index: 2; } .ps-hero-box-r { width: 250px; right: -4%; top: 10%; z-index: 1; } /* --- Values: microscope photo (narrower column, ~40/60 per Figma) + mission overlay on desktop + 3 value columns --- */ .ps-values { grid-template-columns: minmax(0, 480px) 1fr; align-items: center; } .ps-values-media { position: relative; } .ps-values-media img { height: 410px; } .ps-mission-card { /* Figma 1445:7770 — bottom-right, overhangs the photo */ position: absolute; right: -10px; bottom: -26px; width: min(268px, 88%); background: #fff; border: 1px solid var(--ps-line); border-radius: var(--ps-r-lg); padding: 1rem 1.125rem; text-align: left; font-size: var(--ps-t-base); font-weight: 500; line-height: 1.32; color: var(--ps-ink); box-shadow: 0 18px 40px rgba(11, 25, 40, 0.14); } .ps-mission-label { display: block; color: var(--ps-blue); margin-bottom: 0.375rem; } .ps-values-copy .ps-h2 { margin-bottom: 0.75rem; } .ps-values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ps-sp-5); margin-top: 1.75rem; } .ps-value-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--ps-r-sm); background: var(--ps-wash); color: var(--ps-blue); margin-bottom: 0.75rem; } .ps-value-title { font-size: 1rem; font-weight: 500; color: var(--ps-ink); margin: 0 0 0.375rem; } .ps-value-desc { font-size: var(--ps-t-ui); line-height: 1.35; color: var(--ps-muted); margin: 0; } /* --- Inquiry block (shared: About split + Contact solo) --- */ .ps-inquiry-copy .ps-h2 { margin-bottom: 0.75rem; } .ps-inquiry-lead { font-size: 1rem; font-weight: 500; line-height: 1.25; color: var(--ps-ink); margin: 0 0 1.5rem; max-width: 34rem; } .ps-inquiry-extra { display: none; font-size: var(--ps-t-ui); line-height: 1.4; color: var(--ps-soft); margin: 0 0 1.5rem; } .ps-contact-lines { display: flex; flex-direction: column; gap: var(--ps-sp-5); margin: 0 0 1.25rem; } .ps-contact-line { display: flex; align-items: center; gap: var(--ps-sp-3); margin: 0; } .ps-contact-chip { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: var(--ps-wash); color: var(--ps-blue); flex: 0 0 auto; } .ps-contact-text { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; } .ps-contact-label { font-size: var(--ps-t-ui); color: var(--ps-muted); } .ps-contact-value { font-size: 1rem; font-weight: 500; color: var(--ps-ink); text-decoration: none; } .ps-contact-value:hover { color: var(--ps-blue); } .ps-contact-phone { font-weight: 700; } .ps-inquiry-note { font-size: var(--ps-t-xs); font-style: italic; line-height: 1.35; color: var(--ps-muted); margin: 0 0 1.5rem; } .ps-inquiry-copy .ps-btn { margin-top: 0; } .ps-inquiry-solo { padding-top: 0.5rem; padding-bottom: 1rem; } .ps-inquiry-solo .ps-inquiry-note { margin-bottom: 0; } /* Contact is a short page — don't let the global .ps-main min-height stretch it and push the footer down into dead space (Figma keeps the footer close). */ .ps-main:has(.ps-inquiry-solo) { min-height: 0; } /* --- Feature cards: centered heading + 4 illustrated cards --- */ .ps-feature-head { text-align: center; max-width: 44rem; margin: 0 auto 2rem; } .ps-feature-head .ps-h2 { margin-bottom: 0.5rem; } .ps-feature-head .ps-h4 { margin: 0; } .ps-feature-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--ps-sp-5); } .ps-feature-card { position: relative; border: 1px solid var(--ps-line); border-radius: var(--ps-r-lg); padding: 0.875rem; min-height: 106px; overflow: hidden; } .ps-feature-copy { position: relative; z-index: 1; max-width: 68%; } .ps-feature-title { font-size: 1rem; font-weight: 500; line-height: 1.2; color: var(--ps-ink); margin: 0 0 0.375rem; } .ps-feature-desc { font-size: var(--ps-t-sm); line-height: 1.35; color: var(--ps-muted); margin: 0; } .ps-feature-card > img { position: absolute; right: -8px; bottom: -8px; width: auto; height: 96px; object-fit: contain; pointer-events: none; } .ps-feature-fine { font-size: var(--ps-t-xs); line-height: 1.4; color: var(--ps-muted); max-width: 40rem; margin: 1.5rem auto 0; text-align: center; } /* --- Quality + documentation table --- */ .ps-quality { align-items: start; } .ps-quality-copy .ps-h2 { margin-bottom: 0.5rem; } .ps-quality-copy .ps-h4 { margin-bottom: 0.75rem; } .ps-quality-list { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-direction: column; gap: var(--ps-sp-5); } .ps-quality-list li { display: flex; gap: var(--ps-sp-3); align-items: flex-start; } .ps-quality-icon { color: var(--ps-blue); flex: 0 0 auto; margin-top: 2px; } .ps-quality-list h4 { font-size: var(--ps-t-ui); font-weight: 500; color: var(--ps-ink); margin: 0 0 0.25rem; } .ps-quality-list p { font-size: var(--ps-t-ui); line-height: 1.35; color: var(--ps-muted); margin: 0; } .ps-doc-table { position: relative; background: var(--ps-wash); border: 1px solid var(--ps-line); border-radius: var(--ps-r-lg); padding: 1.875rem; } .ps-doc-title { font-size: var(--ps-t-h2); font-weight: 500; line-height: 1.167; letter-spacing: -0.01em; color: var(--ps-blue); margin: 0 0 1.25rem; } .ps-doc-rows { margin: 0; } .ps-doc-rows > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ps-sp-4); padding-bottom: 0.5625rem; margin-bottom: 1rem; border-bottom: 1px solid var(--ps-line); } .ps-doc-rows > div:last-child { margin-bottom: 0; } .ps-doc-rows dt { font-size: var(--ps-t-ui); color: var(--ps-soft); margin: 0; } .ps-doc-rows dd { font-size: var(--ps-t-ui); color: var(--ps-ink); text-align: right; margin: 0; flex: 0 0 auto; } .ps-doc-head dt, .ps-doc-head dd { font-weight: 500; color: var(--ps-ink); } .ps-doc-note { background: #fff; border: 1px solid var(--ps-line); border-radius: var(--ps-r-sm); padding: 0.75rem 0.875rem; font-size: var(--ps-t-xs); font-style: italic; line-height: 1.4; color: var(--ps-muted); margin: 1rem 0 0; } /* --- Responsible research (split-flip) --- */ .ps-responsible-media img { height: 450px; } /* Page ambient washes — faint token-derived radial glows behind the sections (the artboard's soft blue atmosphere). Overrides the Home-tuned base .ps-main::before so the pools sit near the hero/values + quality + responsible. */ .ps-about.ps-main::before { background: radial-gradient(42rem 30rem at 92% 5%, rgba(0, 118, 184, 0.06), transparent 68%), radial-gradient(40rem 30rem at -6% 30%, rgba(0, 118, 184, 0.05), transparent 70%), radial-gradient(30rem 26rem at 96% 60%, rgba(0, 118, 184, 0.045), transparent 70%); } /* Contact anchor — the CTA band carries id="contact" (nav /about/#contact). */ #contact { scroll-margin-top: 5.5rem; } /* --- About responsive (shared page-head + Contact rules kept above) --- */ @media (max-width: 1023px) { .ps-page-head-dna { right: 2%; width: 380px; top: -30px; } } @media (max-width: 900px) { /* Hero band stacks: copy over a centred product row. Uniform padding + a near-opaque vertical wash so the copy stays legible over the bubble photo. */ .ps-about-hero { background: linear-gradient(180deg, rgba(248, 251, 252, 0.96) 0%, rgba(248, 251, 252, 0.9) 42%, rgba(248, 251, 252, 0.74) 100%), url('../img/about/hero-bg.png') center / cover no-repeat, var(--ps-wash); } .ps-about-hero-inner { grid-template-columns: 1fr; gap: var(--ps-sp-6); min-height: 0; padding: 1.75rem 1.5rem; } .ps-hero-boxes { min-height: 0; align-self: auto; display: flex; align-items: center; justify-content: center; padding: 0.5rem 0 0; } .ps-hero-box { position: static; height: auto; margin: 0; } .ps-hero-box-l { width: 33%; max-width: 158px; margin-right: -6%; z-index: 1; } .ps-hero-box-c { width: 38%; max-width: 182px; z-index: 3; } .ps-hero-box-r { width: 33%; max-width: 158px; margin-left: -6%; z-index: 2; } .ps-values { grid-template-columns: 1fr; } .ps-mission-card { right: 0.75rem; bottom: -18px; width: min(280px, 82%); } .ps-feature-cards { grid-template-columns: 1fr 1fr; } .ps-feature-fine { max-width: none; margin: 1.25rem 0 0; text-align: left; } .ps-values-media img, .ps-responsible-media img { height: 300px; } } @media (max-width: 740px) { .ps-page-head-dna { display: none; } .ps-page-head-inner { padding: 1.75rem 0; } .ps-lbl-d { display: none; } .ps-lbl-m { display: inline; } .ps-btn-row { flex-direction: column; align-items: stretch; } .ps-btn-row .ps-btn { width: 100%; } .ps-values-grid { grid-template-columns: 1fr; gap: var(--ps-sp-4); } .ps-feature-cards { grid-template-columns: 1fr; } .ps-values-media img, .ps-responsible-media img { height: 260px; } } /* ========================================================================== Blog / Insights (home.php, single.php, archive.php, post-card) Figma 12550:73. Non-token Tailwind grays mapped back to brand tokens; Manrope normalized to Aeonik. Rounded filter pills are the one deliberate rounded control (like the PDP pills); everything else stays square. ========================================================================== */ /* --- Featured article --- */ .ps-blog-featured { display: grid; grid-template-columns: 1fr 1fr; gap: 2.25rem; align-items: stretch; margin-top: var(--ps-section); } .ps-featured-media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ps-wash); box-shadow: 0 0 0 1px rgba(227, 232, 239, 0.5), 0 25px 50px -12px rgba(11, 25, 40, 0.06); } .ps-featured-media img { width: 100%; height: 100%; object-fit: cover; } .ps-featured-badge { position: absolute; top: 1.5rem; left: 1.5rem; display: inline-flex; align-items: center; gap: var(--ps-sp-2); padding: 0.4375rem 0.5625rem; background: rgba(255, 255, 255, 0.14); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, 0.25); color: #fff; font-size: var(--ps-t-xs); font-weight: 500; border-radius: var(--ps-r-xs); box-shadow: 0 6px 16px rgba(11, 25, 40, 0.18); } .ps-featured-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.75); flex: 0 0 auto; } .ps-featured-body { display: flex; flex-direction: column; justify-content: space-between; gap: var(--ps-sp-6); } .ps-featured-meta { display: flex; align-items: center; gap: var(--ps-sp-2); font-size: var(--ps-t-ui); font-weight: 500; color: var(--ps-soft); margin: 0 0 1.5rem; } .ps-meta-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--ps-line-2); flex: 0 0 auto; } .ps-featured-title { font-size: 3rem; font-weight: 500; line-height: 1.125; letter-spacing: -0.01em; color: var(--ps-ink); margin: 0 0 1.5rem; } .ps-featured-title a { color: inherit; text-decoration: none; } .ps-featured-title a:hover { color: var(--ps-blue); } .ps-featured-excerpt { font-size: 1.125rem; line-height: 1.5; color: var(--ps-muted); margin: 0; } .ps-featured-link { display: inline-flex; align-items: center; gap: 0.375rem; font-size: var(--ps-t-ui); font-weight: 500; color: var(--ps-blue); text-decoration: none; } .ps-featured-link:hover { color: var(--ps-blue-deep); } /* --- Intro band --- */ .ps-blog-intro { display: flex; align-items: center; justify-content: space-between; gap: 2.5rem; padding-bottom: 1.875rem; border-bottom: 1px solid var(--ps-line); margin-bottom: 2rem; } .ps-blog-intro-copy { flex: 1; min-width: 0; } .ps-blog-intro .ps-h2 { margin-bottom: 0.375rem; } .ps-blog-intro-sub { font-size: 1rem; font-weight: 500; line-height: 1.25; color: var(--ps-ink); margin: 0; } .ps-blog-intro-img { width: 177px; height: 146px; object-fit: contain; flex: 0 0 auto; } /* --- "Latest Research" header + category filter pills --- */ .ps-blog-grid-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--ps-sp-6); flex-wrap: wrap; padding-bottom: 1.5625rem; border-bottom: 1px solid var(--ps-line); margin-bottom: 1.75rem; } .ps-blog-grid-title { font-size: var(--ps-t-h2); font-weight: 500; line-height: 1.333; letter-spacing: -0.01em; color: var(--ps-navy); margin: 0 0 0.25rem; } .ps-blog-grid-sub { font-size: var(--ps-t-ui); color: var(--ps-muted); margin: 0; } .ps-blog-filters { display: flex; gap: var(--ps-sp-2); flex-wrap: wrap; } .ps-filter-pill { font-size: var(--ps-t-xs); font-weight: 500; color: var(--ps-muted); padding: 0.5rem 1rem; border-radius: var(--ps-r-pill); text-decoration: none; white-space: nowrap; transition: background var(--ps-dur-1) ease, color var(--ps-dur-1) ease; } .ps-filter-pill:hover { color: var(--ps-ink); } .ps-filter-pill.is-active { background: var(--ps-paper); color: var(--ps-navy); box-shadow: 0 1px 2px rgba(11, 25, 40, 0.08), inset 0 0 0 1px var(--ps-line); } /* --- Post grid + card --- */ .ps-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ps-sp-5); } .ps-post-card { display: flex; flex-direction: column; } .ps-post-media { display: block; aspect-ratio: 3 / 2; background: var(--ps-wash); overflow: hidden; margin-bottom: 1.5rem; } .ps-post-media img { width: 100%; height: 100%; object-fit: cover; } .ps-post-date { font-size: var(--ps-t-xs); font-weight: 500; letter-spacing: -0.01em; color: var(--ps-soft); margin: 0 0 1rem; } .ps-post-text { margin-bottom: 1rem; } .ps-post-card-title { font-size: 1.25rem; font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; color: var(--ps-ink); margin: 0 0 0.75rem; } .ps-post-card-title a { color: inherit; text-decoration: none; } .ps-post-card-title a:hover { color: var(--ps-blue); } .ps-post-card-excerpt { font-size: var(--ps-t-ui); line-height: 1.35; color: var(--ps-muted); margin: 0; } .ps-post-author { display: flex; align-items: center; gap: var(--ps-sp-2); margin: auto 0 0; padding-top: 0.25rem; } .ps-avatar { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; filter: grayscale(1); flex: 0 0 auto; } .ps-byline-name { font-size: var(--ps-t-xs); font-weight: 500; color: var(--ps-navy); } .ps-blog-empty { font-size: 1rem; color: var(--ps-muted); } /* --- Pagination (custom nav + the_posts_pagination .nav-links) --- */ .ps-pagination, .ps-pagination .nav-links { display: flex; justify-content: center; align-items: center; gap: var(--ps-sp-2); flex-wrap: wrap; margin-top: var(--ps-section-sm); } .ps-pagination .nav-links { margin-top: 0; } .ps-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 0.5rem; font-size: 1rem; color: var(--ps-muted); text-decoration: none; border: 1px solid transparent; } .ps-pagination a.page-numbers { border-color: var(--ps-line); } .ps-pagination a.page-numbers:hover { border-color: var(--ps-blue); color: var(--ps-blue); } .ps-pagination .page-numbers.current { background: var(--ps-blue); color: #fff; font-weight: 500; border-color: var(--ps-blue); } .ps-pagination .page-numbers.dots { border: 0; color: var(--ps-soft); } .ps-pagination .prev, .ps-pagination .next { color: var(--ps-ink); } /* --- Article template (blog single + COA) — Figma 1262:3332 / 1266:3710 --- */ .ps-article { padding-bottom: 0; } /* Full-bleed featured image (blog only; COA omits it) */ .ps-article-hero { margin: 0; width: 100%; height: clamp(180px, 18vw, 300px); overflow: hidden; background: var(--ps-wash); } .ps-article-hero img { width: 100%; height: 100%; object-fit: cover; display: block; } /* 1200 content column */ .ps-article-inner { width: min(var(--ps-col), 100% - 2 * var(--ps-gutter)); margin: 0 auto; padding: var(--ps-sp-6) 0 var(--ps-section); } /* Header: title + subtitle left, date · category right */ .ps-article-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 2.5rem; margin-bottom: 3rem; } .ps-article-head-main { max-width: 52ch; } .ps-article-title { font-size: var(--ps-t-h2); font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; color: var(--ps-ink); margin: 0; } .ps-article-sub { font-size: var(--ps-t-base); line-height: 1.5; color: var(--ps-muted); margin: 0.625rem 0 0; } .ps-article-meta { flex-shrink: 0; display: flex; align-items: center; gap: var(--ps-sp-2); font-size: var(--ps-t-sm); font-weight: 500; color: var(--ps-soft); margin: 0.375rem 0 0; white-space: nowrap; } .ps-meta-dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; } /* Lead intro (COA, which has no article-header title/meta) */ .ps-article-intro { max-width: 60ch; font-size: 1rem; line-height: 1.6; color: var(--ps-muted); margin: 0 0 2.25rem; } /* Two-column: sticky TOC + prose */ .ps-article-body { display: grid; grid-template-columns: 228px minmax(0, 1fr); gap: 2.25rem; align-items: start; } .ps-toc { position: sticky; top: 96px; } .ps-toc-title { font-size: var(--ps-t-sm); font-weight: 500; color: var(--ps-blue); margin: 0 0 0.875rem; } .ps-toc-list, .ps-toc-sub { list-style: none; margin: 0; padding: 0; } .ps-toc-h2 > a { display: block; font-size: var(--ps-t-sm); line-height: 1.35; color: var(--ps-ink); text-decoration: none; padding: 0.3125rem 0 0.3125rem 0.75rem; border-left: 2px solid transparent; } .ps-toc-h2 > a:hover { color: var(--ps-blue); } .ps-toc-h2 > a.is-active { color: var(--ps-blue); border-left-color: var(--ps-blue); font-weight: 500; } .ps-toc-sub { margin: 0.125rem 0 0.25rem; } .ps-toc-h3 > a { display: block; font-size: var(--ps-t-xs); line-height: 1.3; color: var(--ps-soft); text-decoration: none; padding: 0.25rem 0 0.25rem 1.5rem; } .ps-toc-h3 > a:hover { color: var(--ps-blue); } /* Prose body */ .ps-article-prose { padding: 0; } .ps-article-prose :is(h2, h3) { scroll-margin-top: 96px; } .ps-article-prose p { font-size: var(--ps-t-base); line-height: 1.7; color: var(--ps-muted); margin: 0 0 1.125rem; } .ps-article-prose h2 { font-size: 1.25rem; font-weight: 500; color: var(--ps-ink); margin: 2rem 0 0.75rem; letter-spacing: -0.01em; } .ps-article-prose h2:first-child { margin-top: 0; } .ps-article-prose h3 { font-size: 1rem; font-weight: 500; color: var(--ps-blue); margin: 1.75rem 0 0.5rem; } .ps-article-prose ul, .ps-article-prose ol { margin: 0 0 1.125rem; padding-left: 1.125rem; color: var(--ps-muted); } .ps-article-prose li { font-size: var(--ps-t-base); margin-bottom: 0.4rem; line-height: 1.6; } .ps-article-prose a { color: var(--ps-blue); text-decoration: underline; text-underline-offset: 3px; } .ps-article-prose strong { color: var(--ps-ink); font-weight: 500; } .ps-article-prose em { color: var(--ps-soft); font-size: var(--ps-t-sm); } .ps-article-prose img { max-width: 100%; height: auto; margin: 1.5rem 0; } /* ========================================================================== COA (v2 refinements) — Figma 1266:3710 ("COA Page") Restyle of the batch/lot COA directory to the new design. Structure & JS hooks are preserved (see page-coa.php header); changes are presentational plus the NEW Purity/Endotoxin view toggle (segmented control, right of the "Search Results" heading). Blue intro heading, blue PASS, 64px lilac thumbs, rounded cards, 2-column FAQ, full-width help band — all off existing tokens. ========================================================================== */ .ps-coa-inner { width: min(var(--ps-col), 100% - 2 * var(--ps-gutter)); margin: 0 auto; padding: 2.25rem 0 var(--ps-section); } /* Soft page wash — the Figma's ambient blue blobs (Ellipse 3/6 top, Rectangle 50/51 behind the cards + list). Same idiom as Home/Shop, tuned to this taller artboard: pools top-right/top-left, then a fainter one down by the list. */ .ps-coa.ps-main::before { background: radial-gradient(38rem 28rem at 97% 3%, rgba(0, 118, 184, 0.06), transparent 66%), radial-gradient(30rem 24rem at 0% 8%, rgba(0, 118, 184, 0.05), transparent 68%), radial-gradient(44rem 34rem at 6% 44%, rgba(0, 118, 184, 0.04), transparent 70%), radial-gradient(30rem 26rem at 96% 70%, rgba(0, 118, 184, 0.035), transparent 72%); } /* Intro — blue H2 + darker subtext (no eyebrow in the Figma). */ .ps-coa-intro { margin-bottom: 1.75rem; } .ps-coa-h { font-size: var(--ps-t-h2); font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; color: var(--ps-blue); margin: 0 0 0.625rem; } .ps-coa-sub { font-size: var(--ps-t-base); line-height: 1.6; color: var(--ps-ink); margin: 0; } /* 4 quality cards — white, hairline border, rounded (Figma "Border"). */ .ps-coa-features { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--ps-sp-5); margin: 1.75rem 0 2.25rem; } .ps-coa-feature { background: var(--ps-paper); border: 1px solid var(--ps-line); border-radius: var(--ps-r-md); padding: 1.125rem 1.25rem; } .ps-coa-feature h3 { font-size: var(--ps-t-base); font-weight: 500; color: var(--ps-blue); margin: 0 0 0.375rem; } .ps-coa-feature p { font-size: var(--ps-t-sm); line-height: 1.5; color: var(--ps-muted); margin: 0; } /* Search */ .ps-coa-search { position: relative; margin-bottom: 1.25rem; } .ps-coa-search > svg { position: absolute; left: 1.125rem; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--ps-soft); pointer-events: none; } .ps-coa-search input { width: 100%; box-sizing: border-box; padding: 0.9375rem 1rem 0.9375rem 2.875rem; font: inherit; font-size: var(--ps-t-base); color: var(--ps-ink); background: var(--ps-field); border: 1px solid var(--ps-line); border-radius: var(--ps-r-sm); transition: border-color var(--ps-dur-1) ease, background var(--ps-dur-1) ease; } .ps-coa-search input::placeholder { color: var(--ps-soft); } .ps-coa-search input:focus { outline: none; border-color: var(--ps-blue); background: #fff; box-shadow: var(--ps-ring); } /* Type tabs (All / Peptide / Blend / …) — pills; active fills blue. */ .ps-coa-tabs { display: flex; gap: var(--ps-sp-2); margin-bottom: 1.75rem; } .ps-coa-tabs button { font: inherit; font-size: var(--ps-t-sm); font-weight: 500; color: var(--ps-navy); background: #fff; border: 1px solid var(--ps-line); border-radius: var(--ps-r-sm); padding: 0.5rem 1rem; cursor: pointer; transition: border-color var(--ps-dur-1) ease, background var(--ps-dur-1) ease, color var(--ps-dur-1) ease; } .ps-coa-tabs button:hover { border-color: var(--ps-line-2); } .ps-coa-tabs button.is-active { background: var(--ps-blue); border-color: var(--ps-blue); color: #fff; } /* Results toolbar — "Search Results" (navy) + live count · Purity/Endotoxin toggle. */ .ps-coa-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; flex-wrap: wrap; margin-bottom: 1rem; } .ps-coa-results { display: flex; align-items: baseline; gap: var(--ps-sp-3); flex-wrap: wrap; } .ps-coa-results-h { font-size: 1.25rem; font-weight: 500; letter-spacing: -0.01em; color: var(--ps-navy); margin: 0; } .ps-coa-count { font-size: var(--ps-t-sm); color: var(--ps-muted); margin: 0; white-space: nowrap; } .ps-coa-viewtoggle { display: inline-flex; gap: var(--ps-sp-2); } .ps-coa-viewtoggle button { font: inherit; font-size: var(--ps-t-sm); font-weight: 500; color: var(--ps-navy); background: #fff; border: 1px solid var(--ps-blue); border-radius: var(--ps-r-sm); padding: 0.5rem 1rem; cursor: pointer; white-space: nowrap; transition: border-color var(--ps-dur-1) ease, background var(--ps-dur-1) ease, color var(--ps-dur-1) ease; } .ps-coa-viewtoggle button:hover { background: var(--ps-pale); } .ps-coa-viewtoggle button.is-active { background: var(--ps-blue); border-color: var(--ps-blue); color: #fff; } /* Product list — white cards, 64px lilac thumb, chevron affordance. */ .ps-coa-list { display: flex; flex-direction: column; gap: var(--ps-sp-3); } .ps-coa-item { border: 1px solid var(--ps-line); border-radius: var(--ps-r-md); background: var(--ps-paper); overflow: hidden; transition: border-color var(--ps-dur-1) ease, box-shadow var(--ps-dur-1) ease; } .ps-coa-item:hover { border-color: var(--ps-line-2); } .ps-coa-item:has(.ps-coa-row[aria-expanded="true"]) { border-color: var(--ps-chip); box-shadow: 0 10px 30px rgba(11, 25, 40, 0.06); } .ps-coa-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto auto; align-items: center; gap: 1rem 1.25rem; width: 100%; text-align: left; background: none; border: 0; padding: 1.125rem 1.5rem; cursor: pointer; font: inherit; } .ps-coa-thumb { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; background: var(--ps-lilac); border-radius: var(--ps-r-sm); padding: 5px; overflow: hidden; } .ps-coa-thumb img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; } .ps-coa-idcol { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; } .ps-coa-name { font-size: 1rem; font-weight: 500; color: var(--ps-navy); } .ps-coa-facts { font-size: var(--ps-t-sm); color: var(--ps-muted); } .ps-coa-batchmeta { display: flex; flex-direction: column; align-items: flex-end; gap: 0.25rem; text-align: right; } .ps-coa-batchcount { font-size: var(--ps-t-sm); font-weight: 500; color: var(--ps-blue); } .ps-coa-latest { font-size: var(--ps-t-xs); color: var(--ps-soft); } .ps-coa-chev { display: inline-flex; align-items: center; justify-content: center; color: var(--ps-soft); } .ps-coa-chev svg { width: 18px; height: 18px; transition: transform var(--ps-dur-1) ease; } .ps-coa-row:hover .ps-coa-chev { color: var(--ps-blue); } .ps-coa-row[aria-expanded="true"] .ps-coa-chev { color: var(--ps-blue); } .ps-coa-row[aria-expanded="true"] .ps-coa-chev svg { transform: rotate(180deg); } /* Batch drawer + table */ .ps-coa-drawer { border-top: 1px solid var(--ps-line); background: var(--ps-wash); overflow-x: auto; } .ps-coa-table { width: 100%; border-collapse: collapse; font-size: var(--ps-t-sm); } .ps-coa-table thead th { text-align: left; font-weight: 500; color: var(--ps-soft); text-transform: uppercase; letter-spacing: 0.03em; font-size: var(--ps-t-2xs); padding: 0.875rem 1.5rem; border-bottom: 1px solid var(--ps-line); white-space: nowrap; } .ps-coa-table td { padding: 0.9375rem 1.5rem; color: var(--ps-ink); border-bottom: 1px solid var(--ps-line); vertical-align: middle; } .ps-coa-table tbody tr:last-child td { border-bottom: 0; } .ps-coa-table th:last-child, .ps-coa-table td:last-child { text-align: right; } .ps-coa-pass { font-weight: 500; color: var(--ps-blue); } /* Purity ⇄ Endotoxin measurement column — CSS-toggled by .is-endotoxin on the list. */ .ps-coa-list .v-endo { display: none; } .ps-coa-list.is-endotoxin .v-purity { display: none; } .ps-coa-list.is-endotoxin .v-endo { display: inline; } .ps-coa-actions { display: flex; gap: var(--ps-sp-4); align-items: center; justify-content: flex-end; white-space: nowrap; } .ps-coa-view { color: var(--ps-blue); font-weight: 500; text-decoration: none; } .ps-coa-view:hover { text-decoration: underline; } .ps-coa-dl { background: var(--ps-blue); color: #fff; padding: 0.4375rem 0.875rem; border-radius: var(--ps-r-xs); font-weight: 500; text-decoration: none; font-size: var(--ps-t-xs); transition: background var(--ps-dur-1) ease; } .ps-coa-dl:hover { background: var(--ps-blue-deep); } .ps-coa-view[aria-disabled="true"], .ps-coa-dl[aria-disabled="true"] { opacity: 0.45; pointer-events: none; } .ps-coa-nobatch { margin: 0; padding: 1.25rem 1.5rem; color: var(--ps-muted); font-size: var(--ps-t-sm); line-height: 1.55; } .ps-coa-empty { padding: 2.5rem 1.25rem; text-align: center; color: var(--ps-muted); font-size: var(--ps-t-base); } /* FAQ — full-width, 2-column accordion grid. */ .ps-coa-faq { margin-top: var(--ps-section); } .ps-coa-faq > h2 { font-size: var(--ps-t-h2); font-weight: 500; letter-spacing: -0.01em; color: var(--ps-blue); margin: 0 0 1.25rem; } .ps-coa-faq-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 3rem; align-items: start; } .ps-coa-faq details { border-bottom: 1px solid var(--ps-line); } .ps-coa-faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--ps-sp-4); cursor: pointer; list-style: none; padding: 1rem 0; font-size: var(--ps-t-base); font-weight: 500; color: var(--ps-ink); } .ps-coa-faq summary::-webkit-details-marker { display: none; } .ps-coa-faq summary svg { width: 16px; height: 16px; color: var(--ps-soft); flex: 0 0 auto; transition: transform var(--ps-dur-1) ease; } .ps-coa-faq details[open] summary { color: var(--ps-blue); } .ps-coa-faq details[open] summary svg { transform: rotate(180deg); color: var(--ps-blue); } .ps-coa-faq details p { font-size: var(--ps-t-ui); line-height: 1.6; color: var(--ps-muted); margin: 0 0 1rem; padding-right: 1rem; } /* Help band — full-width, below the FAQ ("Couldn't find your batch?"). */ .ps-coa-help { margin-top: 3rem; background: var(--ps-pale); border-radius: var(--ps-r-lg); padding: 2.25rem 2rem; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.375rem; } .ps-coa-help-copy { display: flex; flex-direction: column; gap: 0.375rem; } .ps-coa-help h3 { font-size: 1.125rem; font-weight: 500; color: var(--ps-navy); margin: 0; } .ps-coa-help p { font-size: var(--ps-t-ui); line-height: 1.5; color: var(--ps-muted); margin: 0; } .ps-coa-help-link { display: inline-flex; align-items: center; gap: 0.25rem; margin-top: 0.625rem; font-size: var(--ps-t-ui); font-weight: 500; color: var(--ps-blue); text-decoration: none; } .ps-coa-help-link svg { width: 15px; height: 15px; transition: transform var(--ps-dur-1) ease; } .ps-coa-help-link:hover { text-decoration: underline; } .ps-coa-help-link:hover svg { transform: translateX(2px); } /* COA responsive */ @media (max-width: 900px) { .ps-coa-features { grid-template-columns: 1fr 1fr; } .ps-coa-faq-grid { grid-template-columns: 1fr; column-gap: 0; } } @media (max-width: 680px) { .ps-coa-toolbar { align-items: flex-start; } .ps-coa-tabs { flex-wrap: wrap; } .ps-coa-viewtoggle { width: 100%; } .ps-coa-viewtoggle button { flex: 1; } .ps-coa-row { grid-template-columns: 48px minmax(0, 1fr) auto; grid-template-areas: "thumb id chev" "meta meta meta"; gap: 0.625rem 0.875rem; padding: 1rem 1.125rem; } .ps-coa-thumb { grid-area: thumb; width: 48px; height: 48px; } .ps-coa-idcol { grid-area: id; } .ps-coa-chev { grid-area: chev; align-self: start; } .ps-coa-batchmeta { grid-area: meta; flex-direction: row; align-items: center; gap: 0.875rem; text-align: left; } .ps-coa-table, .ps-coa-table tbody, .ps-coa-table tr, .ps-coa-table td { display: block; } .ps-coa-table thead { display: none; } .ps-coa-table th:last-child, .ps-coa-table td:last-child { text-align: left; } .ps-coa-table tr { padding: 0.75rem 1.5rem; border-bottom: 1px solid var(--ps-line); } .ps-coa-table tbody tr:last-child { border-bottom: 0; } .ps-coa-table td { border: 0; padding: 0.25rem 0; display: flex; justify-content: space-between; gap: var(--ps-sp-4); } .ps-coa-table td::before { content: attr(data-label); color: var(--ps-soft); font-size: var(--ps-t-xs); } .ps-coa-measure { display: flex; justify-content: space-between; gap: var(--ps-sp-4); } .ps-coa-list:not(.is-endotoxin) .ps-coa-measure::before { content: "Purity (HPLC)"; color: var(--ps-soft); font-size: var(--ps-t-xs); } .ps-coa-list.is-endotoxin .ps-coa-measure::before { content: "Endotoxin (LAL)"; color: var(--ps-soft); font-size: var(--ps-t-xs); } .ps-coa-actions { justify-content: flex-start; padding-top: 0.5rem; } .ps-coa-actions::before { display: none; } } @media (max-width: 480px) { .ps-coa-features { grid-template-columns: 1fr; } } /* --- Blog responsive (theme breakpoints 1023 / 900 / 740) --- */ @media (max-width: 1023px) { .ps-blog-featured { grid-template-columns: 1fr; gap: 1.75rem; } .ps-featured-title { font-size: 2.25rem; } .ps-blog-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 900px) { .ps-blog-intro { flex-direction: column; align-items: flex-start; gap: var(--ps-sp-6); } .ps-blog-intro-img { display: none; } .ps-blog-grid-head { align-items: flex-start; } /* Article: single column; TOC becomes a compact static card above the prose (top-level only). */ .ps-article-inner { padding-top: 1.75rem; } .ps-article-head { flex-direction: column; gap: 0.625rem; align-items: flex-start; padding-bottom: 1.25rem; margin-bottom: 1.5rem; } .ps-article-meta { margin-top: 0; } .ps-article-body { grid-template-columns: 1fr; gap: var(--ps-sp-6); } .ps-toc { position: static; top: auto; border: 1px solid var(--ps-line); background: var(--ps-wash); padding: 1rem 1.125rem; } .ps-toc-sub { display: none; } .ps-toc-h2 > a { padding-left: 0; border-left: 0; } .ps-toc-h2 > a.is-active { border-left: 0; padding-left: 0; } } @media (max-width: 740px) { .ps-blog-grid { grid-template-columns: 1fr; } .ps-featured-title { font-size: 1.875rem; } .ps-article-title { font-size: var(--ps-t-h2); } .ps-blog-filters { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; } .ps-blog-filters::-webkit-scrollbar { display: none; } } /* ========================================================================== BLOG (v2 refinements) — Figma 1144:1021 (index) / 1262:3332 (single) New selectors that layer on the base blog/article rules above. The pixel tweaks that pull the build onto the new Figma — featured body space-between, 6px badge radius, one-line intro copy, white/elevated active filter pill, 24px article title, blue TOC title, ink TOC h2 links, tightened article spacing — are edited in place in the rules above; these are the additions. ========================================================================== */ /* Blue accent word in the featured-story + article

(ps_accent_title()) — "chromatography" in "Advancements in chromatography precision". Wins over the inherited link colour; on hover the whole title goes blue, so it stays put. */ .ps-accent { color: var(--ps-blue); } /* Featured body groups meta + title + excerpt so the parent's space-between pins the meta to the image's top edge and "Read Full Article" to its bottom. */ .ps-featured-top { display: flex; flex-direction: column; } /* Ambient blue wash tuned to the blog artboard. The global .ps-main::before is Home-tuned (pools 52–77% down); the blog is taller, so pool the glow around the intro band + upper article grid (~22–64% down), leaving the featured story reading on white up top and fading out before the dark CTA band. Same per-artboard idiom as the Shop/About/COA overrides. */ .ps-blog.ps-main::before { background: radial-gradient(48rem 34rem at 84% 22%, rgba(0, 118, 184, 0.05), transparent 68%), radial-gradient(46rem 40rem at 6% 34%, rgba(0, 118, 184, 0.06), transparent 70%), radial-gradient(44rem 40rem at 92% 52%, rgba(0, 118, 184, 0.04), transparent 72%), radial-gradient(40rem 36rem at 14% 64%, rgba(0, 118, 184, 0.035), transparent 72%); } /* ========================================================================== Age gate — full opaque splash that shields the site (Figma "Age_Popup"). The overlay's position + opaque background also ship as critical inline CSS from the mu-plugin (wp_head), so the site is never seen before this loads. ========================================================================== */ .ps-agegate { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; overflow-y: auto; padding: 2.5rem var(--ps-gutter); background: #dbe7f1 url('../img/agegate-bg.jpg') center / cover no-repeat; } html.ps-agegate-open, html.ps-agegate-open body { overflow: hidden; } .ps-agegate-inner { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 440px; margin: auto; } .ps-agegate-logo { width: 156px; height: auto; margin: 0 0 1.5rem; } .ps-agegate-card { width: 100%; background: var(--ps-paper); border: 1px solid rgba(226, 232, 240, 0.8); padding: 1.25rem; box-shadow: 0 24px 60px rgba(11, 25, 40, 0.18); } .ps-agegate-title { font-size: 1.375rem; font-weight: 500; letter-spacing: -0.01em; color: var(--ps-ink); margin: 0 0 0.5rem; } .ps-agegate-body { font-size: var(--ps-t-sm); line-height: 1.5; color: var(--ps-muted); margin: 0 0 1.25rem; } .ps-agegate-checkfield { display: flex; align-items: center; gap: 0.625rem; border: 1px solid var(--ps-line); padding: 0.75rem; margin: 0 0 1.25rem; font-size: var(--ps-t-sm); color: var(--ps-ink); cursor: pointer; } .ps-agegate-checkfield input { flex: 0 0 auto; width: 16px; height: 16px; margin: 0; accent-color: var(--ps-blue); } .ps-agegate-field { margin: 0 0 1.25rem; } .ps-agegate-label { display: block; font-size: var(--ps-t-sm); font-weight: 500; color: var(--ps-ink); margin: 0 0 0.5rem; } .ps-agegate-req { color: #D3492F; font-weight: 400; } .ps-agegate-select { width: 100%; font-family: var(--ps-font); font-size: var(--ps-t-ui); color: var(--ps-ink); background-color: var(--ps-paper); border: 1px solid var(--ps-line); padding: 0.6875rem 2.5rem 0.6875rem 0.75rem; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23808597' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; } .ps-agegate-select:invalid { color: var(--ps-soft); } .ps-agegate-enter { width: 100%; padding: 0.8125rem; font-size: var(--ps-t-base); font-weight: 500; } .ps-agegate-enter:disabled { background: var(--ps-line); color: var(--ps-soft); cursor: not-allowed; } .ps-agegate-exit { text-align: center; font-size: var(--ps-t-sm); color: var(--ps-ink); margin: 0.875rem 0 0; } .ps-agegate-leave { color: var(--ps-blue); text-decoration: none; } .ps-agegate-leave:hover { text-decoration: underline; text-underline-offset: 3px; } .ps-agegate-disclaimer { width: 100%; font-size: var(--ps-t-xs); font-style: italic; line-height: 1.45; color: var(--ps-muted); margin: 1.5rem 0 0; } @media (max-width: 560px) { .ps-agegate { padding: 1.5rem var(--ps-gutter); align-items: flex-start; } .ps-agegate-card { padding: 1.125rem; } } /* ========================================================================== Wholesale page (page-wholesale.php) Figma HyPStzuochxvctFWZiAGrc, section 1196:1095 (desktop 1196:1096 / mobile 1262:2828). Reuses .ps-section / .ps-split / .ps-faq / .ps-ruo / page-head; adds the B2B intro, feature grid, audience cards, doc list, ordering steps, CTA band. Column widths + gaps + the 240px CTA band are measured off the artboard; text/icon colors map to the tokens. ========================================================================== */ .ps-wh-center { text-align: center; } .ps-wh-cta-center { display: flex; width: max-content; max-width: 100%; margin: 2rem auto 0; } /* ① B2B intro — copy left, product cluster right (floats on white, per Figma) */ .ps-wh-intro { grid-template-columns: 1fr 1.32fr; } /* copy ~500 / cluster ~660 in the 1200 col */ .ps-wh-intro-copy .ps-h2 { margin-bottom: 0.75rem; } .ps-wh-intro-copy .ps-lead { color: var(--ps-ink); } /* Figma intro body = ink, not the lighter shared lead */ .ps-wh-intro-copy .ps-btn { margin-top: 0.25rem; } .ps-wh-intro-media { display: flex; align-items: center; justify-content: center; } .ps-wh-intro-img { width: 100%; max-width: 660px; height: auto; object-fit: contain; } /* ② Feature grid — 2×2 icon + title + copy (24px gutters, pale icon tiles) */ .ps-wh-features { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ps-sp-6); } .ps-wh-feat-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--ps-r-sm); background: var(--ps-wash); color: var(--ps-blue); margin-bottom: 1.125rem; } .ps-wh-feature h3 { font-size: 1rem; font-weight: 500; color: var(--ps-ink); margin: 0 0 0.375rem; } .ps-wh-feature p { font-size: var(--ps-t-ui); line-height: 1.45; color: var(--ps-muted); margin: 0; max-width: 30rem; } /* ③ Who wholesale is for — heading + 2×2 image cards (navy titles) */ .ps-wh-audience .ps-h2 { margin-bottom: 2rem; } .ps-wh-aud-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.25rem 1.5rem; } .ps-wh-aud-card figure { margin: 0 0 0.875rem; } .ps-wh-aud-card img { width: 100%; height: 232px; object-fit: cover; display: block; } .ps-wh-aud-card h3 { font-size: var(--ps-t-md); font-weight: 500; color: var(--ps-navy); margin: 0 0 0.375rem; } .ps-wh-aud-card p { font-size: var(--ps-t-ui); line-height: 1.45; color: var(--ps-muted); margin: 0; } /* ④ Quality communication — product + copy left, bordered doc cards right */ .ps-wh-docs { align-items: center; gap: 3rem; } .ps-wh-docs-boxes { margin: 0 0 1.75rem; } .ps-wh-docs-boxes img { display: block; height: 152px; width: auto; max-width: 100%; object-fit: contain; } .ps-wh-docs-copy .ps-h2 { margin-bottom: 0.625rem; max-width: 26rem; } .ps-wh-docs-copy .ps-lead { color: var(--ps-ink); } /* Figma docs body = ink */ .ps-wh-doclist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.375rem; } .ps-wh-doclist li { display: flex; gap: var(--ps-sp-3); align-items: center; min-height: 68px; border: 1px solid var(--ps-line); border-radius: var(--ps-r-md); padding: 0.75rem 1rem; } .ps-wh-doc-icon { display: inline-flex; color: var(--ps-blue); flex: 0 0 auto; } .ps-wh-doclist h4 { font-size: var(--ps-t-base); font-weight: 500; color: var(--ps-ink); margin: 0 0 0.1875rem; } .ps-wh-doclist p { font-size: var(--ps-t-sm); line-height: 1.4; color: var(--ps-muted); margin: 0; } /* ⑤ How ordering works — 5 numbered process cards (3 + 2, centered) */ .ps-wh-steps-head { text-align: center; max-width: 42rem; margin: 0 auto 2rem; } .ps-wh-steps-head .ps-h2 { margin-bottom: 0.5rem; } .ps-wh-steps-head .ps-h4 { margin: 0; color: var(--ps-muted); font-weight: 400; } .ps-wh-steps-grid { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ps-sp-5); } .ps-wh-step { flex: 0 1 calc(33.333% - 0.834rem); border: 1px solid var(--ps-line); border-radius: var(--ps-r-lg); padding: 1.5rem 1.25rem; box-sizing: border-box; } .ps-wh-step-ico { display: block; width: 120px; height: 120px; margin: 0 auto 1rem; object-fit: contain; } .ps-wh-step h3 { font-size: var(--ps-t-base); font-weight: 500; color: var(--ps-ink); margin: 0 0 0.5rem; line-height: 1.3; } .ps-wh-step-n { color: var(--ps-blue); font-weight: 700; } .ps-wh-step p { font-size: var(--ps-t-sm); line-height: 1.45; color: var(--ps-muted); margin: 0; } /* ⑥ FAQ heading */ .ps-wh-faq .ps-h2 { margin-bottom: 1.5rem; } /* ⑦ CTA band — blue 240px band, copy left, product cluster bleeding top/bottom. The desktop asset (cta-boxes-t.png) is a transparent 422×422 render pinned to the Figma coordinates (x≈779, y=-101 within the 1200×240 band): the blue comes from the band itself, so the boxes + molecules simply overshoot above/below. */ .ps-wh-cta { position: relative; display: flex; align-items: center; background: var(--ps-blue); color: #fff; padding: 1.875rem 2.5rem; min-height: 240px; box-sizing: border-box; overflow: visible; } .ps-wh-cta-copy { position: relative; z-index: 1; } .ps-wh-cta-copy h2 { font-size: var(--ps-t-h1); font-weight: 500; line-height: 1.12; letter-spacing: -0.01em; color: #fff; margin: 0 0 1.375rem; } .ps-wh-cta-img { position: absolute; right: 0; top: -101px; height: 422px; width: auto; object-fit: contain; pointer-events: none; } .ps-wh-cta-img-m { display: none; } /* mobile-only: solid-blue-bg composite, seam-free on the band */ /* ⑧ RUO band heading tightening (uses shared .ps-ruo) */ .ps-wh-ruo h2 { color: var(--ps-ink); } /* --- Wholesale responsive --- */ @media (max-width: 900px) { .ps-wh-intro { grid-template-columns: 1fr; } /* re-declared: our column override outranks the shared .ps-split collapse */ .ps-wh-features { gap: 1.5rem 1.75rem; } .ps-wh-aud-grid { gap: 1.75rem 1.5rem; } .ps-wh-step { flex-basis: calc(50% - 0.625rem); } /* CTA stacks: left-aligned copy, full-width button, boxes+molecules image on the blue band */ .ps-wh-cta { flex-direction: column; align-items: stretch; text-align: left; min-height: 0; height: auto; padding: 2.25rem var(--ps-gutter); overflow: hidden; } .ps-wh-cta-copy h2 { font-size: 1.875rem; } .ps-wh-cta-copy .ps-btn { display: block; width: 100%; box-sizing: border-box; } .ps-wh-cta-img { display: none; } .ps-wh-cta-img-m { display: block; width: 100%; max-width: 420px; height: auto; margin: 1.5rem auto 0; } } @media (max-width: 560px) { /* Figma mobile keeps features + audience as 2×2 — only tighten the gaps */ .ps-wh-features { gap: 1.5rem 1.25rem; } .ps-wh-aud-grid { gap: 1.25rem 1rem; } .ps-wh-step { flex-basis: 100%; } .ps-wh-aud-card img { height: 178px; } .ps-wh-cta-copy h2 { font-size: 1.625rem; } } @media (max-width: 380px) { /* very narrow: features stack so descriptions stay legible; audience stays 2-up */ .ps-wh-features { grid-template-columns: 1fr; } } /* ========================================================================== HOME (v2 redesign — Figma HyPStzuochxvctFWZiAGrc / artboard 1445:1624) -------------------------------------------------------------------------- Restyle pass over the ported home: a curated five-across product GRID (was the marquee), the three faint decorative gradient washes ("Ellipse 3/4/5"), bordered key-point cards, and the blue FAQ open-state. Reuses the tokens and the shared Woo loop card — only the grid container + these polish rules are new. ========================================================================== */ /* Decorative page washes — the faint radial "Ellipse" glows behind the lower half of the artboard. Token-derived, very low alpha (Figma washes to ~#F8FBFC) and painted on a non-interactive layer beneath the content. */ .ps-main { position: relative; } .ps-main::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(46rem 40rem at 12% 52%, rgba(0, 118, 184, 0.06), transparent 70%), radial-gradient(26rem 24rem at 88% 63%, rgba(0, 118, 184, 0.05), transparent 70%), radial-gradient(21rem 22rem at 47% 77%, rgba(0, 118, 184, 0.045), transparent 70%); } /* Products grid — five curated cards across, reusing the global Woo loop card (name / meta / price / image / Learn More). display:contents promotes the
  • to grid items of .ps-products-grid (same trick as .ps-shop-grid). */ .ps-products-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--ps-gap-grid); } .ps-products-grid > .woocommerce { display: contents; } .ps-products-grid ul.products[class*="columns-"] { display: contents !important; } .ps-products-grid li.product { min-height: 288px; padding: 1.125rem 1.125rem 0.875rem; } .ps-products-grid ul.products[class*="columns-"] li.product img { height: 150px; max-width: 88%; } @media (max-width: 1000px) { .ps-products-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 680px) { .ps-products-grid { grid-template-columns: repeat(2, 1fr); gap: var(--ps-sp-3); } .ps-products-grid ul.products[class*="columns-"] li.product img { height: 160px; } } /* Key-point cards (Supported / Informed / Confident) — white + hairline border in the Figma (vs the borderless wash of the why-us row). */ .ps-keypoints .ps-wash-card { background: var(--ps-paper); border: 1px solid var(--ps-line); } /* FAQ open-state — the Figma highlights an expanded item with a pale-blue panel and a blue question + chevron. */ .ps-faq details[open] { border-color: var(--ps-chip); background: var(--ps-pale); } .ps-faq details[open] summary { color: var(--ps-blue); } .ps-faq details[open] summary::after { border-color: var(--ps-blue); } /* ========================================================================== PDP (v2 redesign) — Figma 12952:452 Overview / Handling / Quality & Testing / Related. Full-width bands with a 1200 inner track; each has a 285px left rail (eyebrow + heading) and a 1fr content column. Buy box + pack selector styles live in the PDP block above. ========================================================================== */ .ps-pd-sec { width: 100%; } .ps-pd-sec-inner { width: min(var(--ps-col), 100% - 2 * var(--ps-gutter)); margin: 0 auto; padding: 3rem 0; display: grid; grid-template-columns: 285px 1fr; gap: 3.75rem; border-top: 1px solid var(--ps-line); } .ps-pd-sec:first-of-type .ps-pd-sec-inner { margin-top: var(--ps-section-sm); } .ps-pd-eyebrow { font-size: var(--ps-t-ui); font-weight: 500; color: var(--ps-blue); margin: 0 0 0.5rem; } .ps-pd-h2 { font-size: 1.75rem; font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; color: var(--ps-navy); margin: 0; } .ps-pd-lead { font-size: 1rem; line-height: 1.6; color: var(--ps-muted); margin: 0 0 1.5rem; } .ps-pd-note { font-size: var(--ps-t-base); line-height: 1.5; color: var(--ps-muted); margin: 0.75rem 0 0; } .ps-pd-link { color: var(--ps-blue); font-size: var(--ps-t-ui); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; } /* Overview — spec grid */ .ps-spec-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ps-sp-3); } .ps-spec { border: 1px solid var(--ps-line); border-radius: var(--ps-r-md); padding: 1rem 1.125rem; display: flex; flex-direction: column; gap: 0.375rem; } .ps-spec-k { font-size: var(--ps-t-2xs); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ps-muted); } .ps-spec-v { font-size: var(--ps-t-base); font-weight: 500; color: var(--ps-ink); } .ps-spec-v sub { font-size: 0.72em; } /* Handling — numbered steps */ .ps-pd-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } .ps-pd-step-n { display: inline-grid; place-items: center; width: 34px; height: 34px; border: 1.5px solid var(--ps-blue); border-radius: var(--ps-r-sm); color: var(--ps-blue); font-size: var(--ps-t-ui); font-weight: 700; } .ps-pd-step h3 { font-size: 1rem; font-weight: 500; color: var(--ps-navy); margin: 1rem 0 0.5rem; } .ps-pd-step p { font-size: var(--ps-t-ui); line-height: 1.5; color: var(--ps-muted); margin: 0; } /* Quality & Testing — batch COA card */ .ps-pd-quality .ps-pd-lotlabel { font-size: var(--ps-t-2xs); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ps-muted); margin: 1.5rem 0 0.25rem; } .ps-pd-lot { font-size: 1.125rem; font-weight: 700; color: var(--ps-navy); margin: 0; } .ps-pd-lotsub { font-size: var(--ps-t-sm); color: var(--ps-muted); margin: 0.25rem 0 1rem; } .ps-pd-coa-card { border: 1px solid var(--ps-line); border-radius: var(--ps-r-lg); padding: 1.75rem; } .ps-pd-coa-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ps-sp-4); margin: 0 0 1.25rem; } .ps-pd-coa-card-title { font-size: var(--ps-t-md); font-weight: 500; color: var(--ps-navy); margin: 0; } .ps-pd-coa-card-meta { font-size: var(--ps-t-sm); color: var(--ps-muted); margin: 0.25rem 0 0; } .ps-pd-coa-dl { flex: 0 0 auto; background: var(--ps-blue); color: #fff; font-size: var(--ps-t-sm); font-weight: 500; padding: 0.625rem 1rem; border-radius: var(--ps-r-sm); text-decoration: none; white-space: nowrap; transition: background var(--ps-dur-1) ease; } .ps-pd-coa-dl:hover { background: var(--ps-blue-deep); color: #fff; } .ps-pd-coa-table { width: 100%; border-collapse: collapse; } .ps-pd-coa-table th { text-align: left; font-size: var(--ps-t-2xs); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ps-muted); padding: 0 0 0.75rem; border-bottom: 1px solid var(--ps-line); } .ps-pd-coa-table th:last-child, .ps-pd-coa-table td:last-child { text-align: right; } .ps-pd-coa-table td { font-size: var(--ps-t-ui); color: var(--ps-muted); padding: 0.875rem 0; border-bottom: 1px solid var(--ps-line); } .ps-pd-coa-table tbody tr:last-child td { border-bottom: 0; } .ps-pd-coa-table td.is-strong { color: var(--ps-ink); font-weight: 700; } .ps-pd-coa-table td.is-pass { color: var(--ps-blue); font-weight: 700; } .ps-pd-coa-foot { font-size: var(--ps-t-xs); line-height: 1.4; color: var(--ps-soft); margin: 1.25rem 0 0; } /* Related — 4 product cards (image-first) */ .ps-pd-related-inner { width: min(var(--ps-col), 100% - 2 * var(--ps-gutter)); margin: 0 auto; padding: 3rem 0 var(--ps-section); border-top: 1px solid var(--ps-line); } .ps-pd-related-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--ps-sp-4); margin: 0 0 1.5rem; } .ps-pd-related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--ps-sp-5); } .ps-pd-card { display: flex; flex-direction: column; text-decoration: none; } .ps-pd-card-media { background: var(--ps-pale); border-radius: var(--ps-r-lg); aspect-ratio: 1 / 1; display: grid; place-items: center; padding: 1.5rem; } .ps-pd-card-media img { width: 100%; height: auto; object-fit: contain; transition: transform var(--ps-dur-1) ease; } .ps-pd-card:hover .ps-pd-card-media img { transform: scale(1.04); } .ps-pd-card-body { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.875rem 0.25rem 0; } .ps-pd-card-name { font-size: 1rem; font-weight: 500; color: var(--ps-navy); } .ps-pd-card-meta { font-size: var(--ps-t-sm); color: var(--ps-muted); } .ps-pd-card-price { font-size: var(--ps-t-base); font-weight: 500; color: var(--ps-ink); margin-top: 0.125rem; } .ps-pd-card-price .woocommerce-Price-amount { color: var(--ps-ink); } .ps-pd-card-price del { color: var(--ps-soft); font-weight: 400; margin-right: 0.375rem; } /* PDP v2 responsive (appended last so it wins over the earlier PDP media rules) */ @media (max-width: 900px) { /* Compact, contained product panel on mobile — the whole intro (image → title → spec → blurb → PRICE) must fit the first screen ABOVE the fixed buy dock (real-device fix: the dock was covering '$89.99 per box'). */ .ps-pdp div.product { margin-top: 1rem; gap: var(--ps-sp-4); } .ps-pdp .woocommerce-product-gallery { max-width: 300px; margin: 0 auto !important; } .ps-pdp .woocommerce-product-gallery__wrapper { aspect-ratio: auto; padding: 0.875rem; } /* Cap the (portrait) box render with a DEFINITE max-height. svh tracks the REAL visible viewport (Safari/Chrome bars eat ~150px of vh on phones — the 17 Pro Max report), so the intro scales to what's actually on screen. */ .ps-pdp .woocommerce-product-gallery img { max-height: min(28vh, 220px); width: auto; height: auto; max-width: 100%; } .ps-pdp .woocommerce-product-gallery img { max-height: min(26svh, 220px); } .ps-pdp .summary .product_title { font-size: 1.625rem; } .ps-pd-stock { margin-top: 0.25rem; } /* re-center on the smaller title line */ .ps-pd-spec { font-size: var(--ps-t-sm); letter-spacing: -0.01em; margin-top: 0.5rem; } /* lab shorthand holds one line */ .ps-pd-desc { font-size: var(--ps-t-ui); line-height: 1.45; margin-top: 0.875rem; } .ps-pdp .summary > .price { font-size: 1.625rem; margin-top: 1rem; } .ps-pd-sec-inner { grid-template-columns: 1fr; gap: var(--ps-sp-5); padding: 2.5rem 0; } .ps-pd-coa-card { padding: 1.25rem; } .ps-pd-related-grid { grid-template-columns: 1fr 1fr; gap: var(--ps-sp-4); } .ps-pd-related-head { flex-direction: column; align-items: flex-start; } } @media (max-width: 740px) { .ps-pdp div.product { grid-template-columns: 1fr; } .ps-pdp form.cart { grid-template-columns: 118px 1fr; } .ps-spec-grid { grid-template-columns: 1fr 1fr; } .ps-pd-steps { grid-template-columns: 1fr; gap: var(--ps-sp-6); } .ps-pd-coa-card-top { flex-direction: column; } .ps-pd-coa-dl { align-self: flex-start; } /* Phone first-screen budget: price + the FULL COA card must clear the dock with a premium gap even inside browser chrome (~750px visible on a Pro Max). Tighter crumb, 3-line blurb, compact COA card. */ .ps-pd-crumb { margin-top: 0.875rem; } .ps-pd-desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } .ps-pd-coa { margin-top: 0.875rem; padding: 0.75rem 0.875rem; gap: 0.625rem; } .ps-pd-coa-txt { font-size: var(--ps-t-xs); line-height: 1.4; } .ps-pdp .summary > .price { margin-top: 0.75rem; } } @media (max-width: 480px) { .ps-spec-grid { grid-template-columns: 1fr; } .ps-pd-trust li { font-size: 0.625rem; padding: 0.4375rem 0.5rem; } } /* ========================================================================== HEADER OVERLAYS (menu dropdown / cart drawer / search) — Figma 12952:452 -------------------------------------------------------------------------- Three global overlays opened from the header (wired in ps.js). Each root is full-viewport: a dark scrim + a white panel on top. The root stays visibility:hidden until .is-open; the transition-delay on visibility keeps it painted through the panel's slide-out so closing animates. z-index 200 clears the sticky header (100) but stays under the age gate (1000). Token-driven, v2 flat with #0076B8 accents. ========================================================================== */ .ps-overlay { position: fixed; inset: 0; z-index: 200; visibility: hidden; pointer-events: none; transition: visibility 0s linear var(--ps-dur-2); } .ps-overlay.is-open { visibility: visible; pointer-events: auto; transition-delay: 0s; } html.ps-overlay-open, html.ps-overlay-open body { overflow: hidden; } .ps-overlay-scrim { position: absolute; inset: 0; background: rgba(11, 25, 40, 0.42); opacity: 0; transition: opacity var(--ps-dur-2) ease; } .ps-overlay.is-open .ps-overlay-scrim { opacity: 1; } /* Shared panel chrome — white surface with a "Title ✕" head bar. */ .ps-overlay-panel { position: absolute; display: flex; flex-direction: column; max-height: 100%; overflow: hidden; background: var(--ps-paper); } /* Open() focuses the dialog container (a11y) — never paint a ring on it. */ .ps-overlay-panel:focus, .ps-overlay-panel:focus-visible { outline: none; } .ps-overlay-head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: var(--ps-sp-4); padding: 1rem 1.25rem; border-bottom: 1px solid var(--ps-line); } .ps-overlay-head h2 { margin: 0; font-size: 1rem; font-weight: 500; letter-spacing: -0.01em; color: var(--ps-ink); } .ps-overlay-close { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; color: var(--ps-muted); background: var(--ps-paper); border: 1px solid var(--ps-line); border-radius: var(--ps-r-sm); cursor: pointer; transition: color var(--ps-dur-1) ease, border-color var(--ps-dur-1) ease, background var(--ps-dur-1) ease; } .ps-overlay-close:hover { color: var(--ps-ink); border-color: var(--ps-line-2); background: var(--ps-wash); } .ps-overlay-close svg { display: block; } /* ---- Menu dropdown — a top sheet that drops in over the header ---- */ .ps-menu-panel { top: 0; left: 0; right: 0; width: 100%; border-bottom-left-radius: var(--ps-r-lg); border-bottom-right-radius: var(--ps-r-lg); box-shadow: 0 20px 44px rgba(11, 25, 40, 0.16); transform: translateY(-14px); opacity: 0; transition: transform var(--ps-dur-2) ease, opacity var(--ps-dur-1) ease; } .ps-menu-ov.is-open .ps-menu-panel { transform: none; opacity: 1; } .ps-menu-list { list-style: none; margin: 0; padding: 0.25rem 0 0.5rem; overflow-y: auto; } .ps-menu-list a { display: block; padding: 0.9375rem 1.25rem; font-size: 1rem; font-weight: 500; letter-spacing: -0.01em; color: var(--ps-ink); text-decoration: none; transition: color var(--ps-dur-1) ease, background var(--ps-dur-1) ease; } .ps-menu-list li + li a { border-top: 1px solid var(--ps-line); } .ps-menu-list a:hover, .ps-menu-list a:focus-visible { color: var(--ps-blue); background: var(--ps-wash); } .ps-menu-list a[aria-current="page"] { color: var(--ps-blue); } /* ---- Cart drawer v2 — floating card on desktop, bottom sheet on phones. The body is stock woocommerce_mini_cart() markup, styled only (rule #3); the progress / savings / empty modules render via the mini-cart's own hooks so every AJAX fragment refresh re-renders them. ---- */ .ps-drawer-panel-c { top: 12px; right: 12px; bottom: 12px; /* FULL-length sidebar on desktop (user call) */ height: auto; width: min(408px, calc(100vw - 24px)); border-radius: var(--ps-r-xl); box-shadow: var(--ps-shadow-lg); transform: translateX(calc(100% + 24px)); transition: transform var(--ps-dur-2) var(--ps-ease); } /* Footer (ledger + CTAs) pins to the sidebar's bottom; the items list flexes. */ .ps-drawer-panel-c .ps-mini-cart { justify-content: flex-start; } .ps-drawer-ov.is-open .ps-drawer-panel-c { transform: none; } .ps-drawer-panel-c .ps-overlay-head { border-bottom: 0; padding-bottom: 0.625rem; } .ps-mini-cart { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 0 1.25rem 0.25rem; } /* Shipping status band — OUR chrome: a navy strip (announce-ticker heritage) bleeding edge-to-edge of the panel, white copy with the ticker's light-blue accent, and a thin blue hairline meter. No green — that's stock status only. */ .ps-mc-ship { flex: 0 0 auto; margin: 0 -1.25rem; padding: 0.6875rem 1.25rem 0.75rem; background: var(--ps-dark); } .ps-mc-ship-msg { display: flex; align-items: center; gap: 0.4375rem; margin: 0 0 0.5rem; font-size: var(--ps-t-xs); letter-spacing: -0.01em; color: rgba(255, 255, 255, 0.9); } .ps-mc-ship-msg b { color: #7CC1EC; font-weight: 700; } .ps-mc-ship-msg svg { color: #7CC1EC; flex: 0 0 auto; } .ps-mc-bar { height: 3px; border-radius: var(--ps-r-pill); background: rgba(255, 255, 255, 0.16); overflow: hidden; } .ps-mc-bar i { display: block; height: 100%; border-radius: var(--ps-r-pill); background: var(--ps-blue); transition: width var(--ps-dur-3) var(--ps-ease); } .ps-mc-ship.is-unlocked .ps-mc-bar i { background: #7CC1EC; } /* Line items — stock markup on a fixed geometry: thumb rail left, remove right, so the name never gets squeezed and the bulk hint reads as a quiet pill. */ .ps-mini-cart .woocommerce-mini-cart { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ps-line); } /* Selectors carry ul.cart_list + li.* so they outrank WooCommerce's own cart-list rules (its small-screen sheet wins otherwise: 4px rows, 32px floated thumbs — the broken layout the client flagged). */ .ps-mini-cart ul.cart_list li.woocommerce-mini-cart-item { position: relative; display: block; margin: 0; padding: 0.875rem 2rem 0.875rem 4.375rem; /* 56px thumb + 14px gap | 32px remove */ border-bottom: 1px solid var(--ps-line); min-height: 5.25rem; } .ps-mini-cart ul.cart_list li.woocommerce-mini-cart-item > a:not(.remove) { display: block; font-size: var(--ps-t-base); font-weight: 700; line-height: 1.25; color: var(--ps-navy); text-decoration: none; } .ps-mini-cart ul.cart_list li.woocommerce-mini-cart-item > a:not(.remove):hover { color: var(--ps-blue); } .ps-mini-cart ul.cart_list li.woocommerce-mini-cart-item img { position: absolute; float: none; left: 0; top: 0.875rem; width: 56px; height: 56px; margin: 0; object-fit: contain; padding: 4px; background: var(--ps-wash); border: 1px solid var(--ps-line); border-radius: var(--ps-r-md); } /* Woo's dl.variation is hidden — its info lives in our manifest qty line. */ .ps-mini-cart ul.cart_list li.woocommerce-mini-cart-item .variation { display: none; } /* Lab-shorthand spec sub-line under the name (from our product meta). */ .ps-mini-cart .ps-mc-spec { display: block; margin-top: 0.1875rem; font-size: var(--ps-t-xs); font-weight: 400; color: var(--ps-muted); letter-spacing: -0.01em; } /* Manifest qty line: "×5 · $89.99 each · bulk −10%" left, line total right. */ .ps-mini-cart ul.cart_list li.woocommerce-mini-cart-item .quantity { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ps-sp-3); margin-top: 0.4375rem; font-size: var(--ps-t-xs); font-weight: 400; color: var(--ps-muted); font-variant-numeric: tabular-nums; } .ps-mini-cart .ps-mc-qline { min-width: 0; white-space: nowrap; } .ps-mini-cart .ps-mc-bulknote { display: block; margin-top: 0.125rem; color: var(--ps-blue-deep); font-weight: 700; white-space: nowrap; } .ps-mini-cart .ps-mc-line-total { flex: 0 0 auto; font-size: var(--ps-t-ui); font-weight: 700; color: var(--ps-navy); } .ps-mini-cart ul.cart_list li.woocommerce-mini-cart-item a.remove { position: absolute; top: 0.75rem; right: 0; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; font-size: 1.125rem; line-height: 1; color: var(--ps-soft) !important; /* woo core reds the ×; ours is quiet until hover */ text-decoration: none; border: 1px solid transparent; border-radius: var(--ps-r-pill); transition: color var(--ps-dur-1) ease, background var(--ps-dur-1) ease, border-color var(--ps-dur-1) ease; } .ps-mini-cart ul.cart_list li.woocommerce-mini-cart-item a.remove:hover { color: #D3492F !important; background: #F6E7E5; border-color: #EAD2CE; } /* Empty state — invitation, not a shrug. */ .ps-mini-cart .woocommerce-mini-cart__empty-message { margin: auto; padding: 2.5rem 0; text-align: center; color: var(--ps-muted); font-size: var(--ps-t-base); } .ps-mc-empty { margin: auto 0; padding: 2.25rem 0 1.5rem; text-align: center; } .ps-mc-empty-ico { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: var(--ps-r-lg); background: var(--ps-pale); color: var(--ps-blue); margin-bottom: 0.875rem; } .ps-mc-empty-title { margin: 0 0 0.25rem; font-size: var(--ps-t-md); font-weight: 700; color: var(--ps-navy); } .ps-mc-empty-sub { margin: 0 auto 1.25rem; max-width: 250px; font-size: var(--ps-t-sm); line-height: 1.5; color: var(--ps-muted); } .ps-mc-empty-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.8125rem 1.75rem; background: var(--ps-blue); color: #fff; font-size: var(--ps-t-ui); font-weight: 700; text-decoration: none; border-radius: 0; /* the site's flat square button language */ transition: background var(--ps-dur-1) ease; } .ps-mc-empty-btn:hover { background: var(--ps-blue-deep); } /* Ledger totals — Subtotal / Bulk pricing / Total, hairline arithmetic like our COA and spec tables. The template wraps it in a

    , so rows are spans. */ .ps-mini-cart .woocommerce-mini-cart__total { display: block; margin: 0; padding: 0.75rem 0 0.375rem; } .ps-mc-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ps-sp-4); padding: 0.1875rem 0; font-size: var(--ps-t-sm); color: var(--ps-muted); font-variant-numeric: tabular-nums; } .ps-mc-row.is-discount span:last-child { color: var(--ps-blue-deep); font-weight: 700; } .ps-mc-row.is-total { margin-top: 0.375rem; padding-top: 0.5625rem; border-top: 1px solid var(--ps-line); color: var(--ps-navy); font-weight: 700; font-size: var(--ps-t-ui); } .ps-mc-row.is-total span:last-child { font-size: var(--ps-t-lg); font-weight: 700; } .ps-mc-row.is-total small { font-weight: 400; font-size: var(--ps-t-2xs); color: var(--ps-muted); margin-left: 0.25rem; } /* Actions — the site's flat, SQUARE button language (.ps-btn heritage). */ .ps-mini-cart .woocommerce-mini-cart__buttons { display: flex; flex-direction: column; gap: var(--ps-sp-2); margin: 0; padding: 0.375rem 0 1.25rem; } .ps-mini-cart .woocommerce-mini-cart__buttons a { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0.75rem 1rem; font-size: var(--ps-t-ui); font-weight: 700; letter-spacing: -0.01em; text-decoration: none; border-radius: 0; transition: background var(--ps-dur-1) ease, color var(--ps-dur-1) ease, border-color var(--ps-dur-1) ease; } .ps-mini-cart .woocommerce-mini-cart__buttons .checkout { color: #fff; background: var(--ps-blue); } .ps-mini-cart .woocommerce-mini-cart__buttons .checkout:hover { background: var(--ps-blue-deep); } .ps-mini-cart .woocommerce-mini-cart__buttons a:not(.checkout) { min-height: 44px; color: var(--ps-navy); background: var(--ps-paper); border: 1px solid var(--ps-line-2); } .ps-mini-cart .woocommerce-mini-cart__buttons a:not(.checkout):hover { color: var(--ps-ink); background: var(--ps-wash); border-color: var(--ps-navy); } /* Phones: the drawer becomes a BOTTOM SHEET — slides up, rounded, grab handle, hugs its content (no dead white void), safe-area aware. */ @media (max-width: 740px) { .ps-drawer-panel-c { top: auto; left: 8px; right: 8px; bottom: 8px; width: auto; max-height: min(84vh, 700px); border-radius: var(--ps-r-xl); box-shadow: 0 -20px 70px rgba(11, 25, 40, 0.35); transform: translateY(calc(100% + 24px)); padding-bottom: env(safe-area-inset-bottom, 0px); } .ps-drawer-ov.is-open .ps-drawer-panel-c { transform: none; } .ps-drawer-panel-c::before { content: ""; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 42px; height: 4px; border-radius: var(--ps-r-pill); background: var(--ps-line-2); } .ps-drawer-panel-c .ps-overlay-head { padding-top: 1.375rem; touch-action: none; } /* head = drag zone */ .ps-drawer-panel-c.is-dragging { transition: none; } /* sheet tracks the finger 1:1 */ } /* ---- Search — top sheet (mobile) / centered modal (≥641px) ---- */ .ps-search-panel { top: 0; left: 0; right: 0; width: 100%; box-shadow: 0 24px 60px rgba(11, 25, 40, 0.18); transform: translateY(-14px); opacity: 0; transition: transform var(--ps-dur-2) ease, opacity var(--ps-dur-1) ease; } .ps-search-ov.is-open .ps-search-panel { transform: none; opacity: 1; } .ps-search-form { position: relative; flex: 0 0 auto; padding: 1rem 1.25rem 0.75rem; } .ps-search-ico { position: absolute; left: 2.125rem; top: 50%; transform: translateY(-50%); display: inline-flex; color: var(--ps-soft); pointer-events: none; } .ps-search-input { width: 100%; box-sizing: border-box; padding: 0.9375rem 1rem 0.9375rem 2.875rem; font-family: var(--ps-font); font-size: var(--ps-t-base); color: var(--ps-ink); background: var(--ps-field); border: 1px solid var(--ps-line); border-radius: var(--ps-r-sm); outline: none; transition: border-color var(--ps-dur-1) ease, box-shadow var(--ps-dur-1) ease; } .ps-search-input::placeholder { color: var(--ps-soft); } .ps-search-input:focus { border-color: var(--ps-blue); box-shadow: var(--ps-ring); } .ps-search-results { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 0 0.75rem; } .ps-search-result { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 0.875rem; padding: 0.625rem 1.25rem; border-top: 1px solid var(--ps-line); color: inherit; text-decoration: none; transition: background var(--ps-dur-1) ease; } .ps-search-result:hover { background: var(--ps-wash); } .ps-search-thumb { width: 44px; height: 44px; object-fit: contain; background: var(--ps-pale); border: 1px solid var(--ps-line); border-radius: var(--ps-r-sm); } .ps-search-info { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; } .ps-search-name { font-size: var(--ps-t-base); font-weight: 500; color: var(--ps-ink); } .ps-search-sub { font-size: var(--ps-t-sm); color: var(--ps-muted); } .ps-search-price { font-size: var(--ps-t-base); font-weight: 500; color: var(--ps-ink); white-space: nowrap; } .ps-search-empty { margin: 0; padding: 2rem 1.25rem; text-align: center; color: var(--ps-muted); font-size: var(--ps-t-base); } @media (min-width: 641px) { .ps-search-panel { left: 50%; right: auto; width: min(560px, 100% - 2 * var(--ps-gutter)); margin-top: 7vh; border-radius: var(--ps-r-lg); transform: translate(-50%, -14px); } .ps-search-ov.is-open .ps-search-panel { transform: translateX(-50%); } .ps-search-results { max-height: min(56vh, 520px); } } /* Reduced motion: overlays snap open/closed instead of sliding. */ @media (prefers-reduced-motion: reduce) { .ps-overlay, .ps-overlay-scrim, .ps-menu-panel, .ps-drawer-panel-c, .ps-search-panel { transition-duration: 0.001ms; } } /* ========================================================================== ADD-TO-CART TOAST — premium confirmation pill (replaces Woo's banner). Slides up bottom-centre when a product is added from the PDP: product thumbnail + draw-in check, "Added to cart" + name, and a blue "View cart" button that opens the drawer. Auto-dismisses on a countdown hairline that pauses on hover. Dark navy so it reads over any page (Figma toast concept). ========================================================================== */ .ps-toasts { position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 150; /* above header (100), below overlays (200) */ display: flex; flex-direction: column; align-items: center; width: max-content; max-width: min(444px, calc(100vw - 28px)); pointer-events: none; /* only the pill itself is interactive */ } .ps-toast { pointer-events: auto; position: relative; display: flex; align-items: center; gap: 13px; width: 100%; padding: 8px 8px 8px 10px; border-radius: var(--ps-r-pill); color: #fff; font-family: var(--ps-font); background: linear-gradient(157deg, #1b3a58 0%, #102539 48%, #0b1c2c 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 24px 56px -20px rgba(6, 18, 30, 0.72), 0 6px 18px -8px rgba(6, 18, 30, 0.55); opacity: 0; transform: translateY(16px) scale(0.965); transition: opacity var(--ps-dur-3) var(--ps-ease), transform var(--ps-dur-3) var(--ps-ease-spring); will-change: transform, opacity; } .ps-toast.is-in { opacity: 1; transform: translateY(0) scale(1); } .ps-toast.is-out { opacity: 0; transform: translateY(9px) scale(0.975); transition-duration: var(--ps-dur-2), var(--ps-dur-2); transition-timing-function: ease, ease; } /* Thumbnail — rounded square, product image; the check badge overlays a corner. */ .ps-toast-thumb { position: relative; flex: 0 0 auto; width: 42px; height: 42px; border-radius: var(--ps-r-md); /* Light tile so a dark product render pops off the navy pill (reads as a chip). */ background: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 2px 7px -3px rgba(0, 0, 0, 0.45); } .ps-toast-thumb img { width: 42px; height: 42px; border-radius: var(--ps-r-md); object-fit: cover; display: block; } .ps-toast-thumb--empty { display: grid; place-items: center; } /* Check badge — springs in at the thumbnail corner, then the tick draws itself. */ .ps-toast-check { position: absolute; top: -5px; right: -5px; width: 20px; height: 20px; border-radius: var(--ps-r-pill); background: var(--ps-blue); color: #fff; display: grid; place-items: center; /* Ring in the pill's navy so the badge separates cleanly from the white tile. */ box-shadow: 0 0 0 2.5px #122a40, 0 4px 10px -3px rgba(0, 118, 184, 0.8); transform: scale(0); transition: transform var(--ps-dur-3) var(--ps-ease-pop) var(--ps-dur-1); } .ps-toast.is-in .ps-toast-check { transform: scale(1); } .ps-toast-check svg { width: 13px; height: 13px; display: block; } .ps-toast-check svg path { stroke-dasharray: 26; stroke-dashoffset: 26; transition: stroke-dashoffset var(--ps-dur-2) ease var(--ps-dur-2); } .ps-toast.is-in .ps-toast-check svg path { stroke-dashoffset: 0; } .ps-toast-thumb--empty .ps-toast-check { position: static; transform: scale(1); box-shadow: none; width: 26px; height: 26px; } /* Copy — eyebrow + product name (single line, ellipsis). */ .ps-toast-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 0 2px; } .ps-toast-eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: rgba(255, 255, 255, 0.56); } .ps-toast-name { font-size: var(--ps-t-ui); font-weight: 700; line-height: 1.25; color: #fff; max-width: 216px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* View cart — blue affordance; opens the cart drawer (data-ps-open="cart"). */ .ps-toast-view { flex: 0 0 auto; margin-left: auto; display: inline-flex; align-items: center; gap: 5px; padding: 9px 15px; border-radius: var(--ps-r-pill); background: var(--ps-blue); color: #fff; font-size: var(--ps-t-xs); font-weight: 700; text-decoration: none; white-space: nowrap; transition: background var(--ps-dur-1) ease, transform var(--ps-dur-1) ease; } .ps-toast-view:hover { background: var(--ps-blue-deep); } .ps-toast-view:active { transform: scale(0.965); } .ps-toast-view svg { transition: transform var(--ps-dur-1) ease; } .ps-toast-view:hover svg { transform: translateX(2px); } .ps-toast-view:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } /* Countdown hairline — inset so its rounded ends clear the pill's corners. */ .ps-toast-progress { position: absolute; left: 16px; right: 16px; bottom: 5px; height: 2.5px; border-radius: var(--ps-r-pill); background: rgba(255, 255, 255, 0.85); opacity: 0.45; transform-origin: left center; transform: scaleX(1); } /* An open overlay (drawer/menu/search) supersedes the toast — fade it out. */ html.ps-overlay-open .ps-toasts { opacity: 0; pointer-events: none; transition: opacity var(--ps-dur-1) ease; } /* PDP add-to-cart button while the AJAX request is in flight. */ .single_add_to_cart_button.ps-atc-loading { opacity: 0.72; cursor: progress; } @media (max-width: 560px) { .ps-toasts { max-width: calc(100vw - 24px); } .ps-toast-name { max-width: 40vw; } } @media (prefers-reduced-motion: reduce) { .ps-toast { transition: opacity var(--ps-dur-1) ease; transform: none; } .ps-toast.is-in { transform: none; } .ps-toast.is-out { transform: none; } .ps-toast-check { transition: none; transform: scale(1); } .ps-toast-check svg path { transition: none; stroke-dashoffset: 0; } .ps-toast-progress { display: none; } } /* ========================================================================== AWAKEN — homepage motion & hover life (products rail, cards, CTA band) ========================================================================== */ /* Products rail: the marquee sits in the SAME 1200px column as "Why choose us" above it (user call — no full bleed); the mask fades the cards at the column edges. Vertical padding gives the hover lift + drop shadow room inside the rail's overflow clip (otherwise the raised card's top border is cut off). */ .ps-products-section { width: min(var(--ps-col), 100% - 2 * var(--ps-gutter)); margin: 0 auto var(--ps-section); } .ps-products-head { margin-bottom: 0.5rem; } .ps-marquee { padding: 10px 0 24px; } /* Product marquee travels left→right; each card lifts, rings blue, and zooms its image on hover (the whole rail already pauses on hover via .ps-marquee:hover). */ .ps-marquee.is-ready .ps-marquee-track { animation-direction: reverse; } .ps-marquee li.product { transition: box-shadow var(--ps-dur-2) var(--ps-ease), transform var(--ps-dur-2) var(--ps-ease); } .ps-marquee li.product:hover { box-shadow: inset 0 0 0 1.5px var(--ps-blue), var(--ps-shadow-md); transform: translateY(-4px); } .ps-marquee li.product img { transition: transform var(--ps-dur-3) var(--ps-ease); } .ps-marquee li.product:hover img { transform: scale(1.06); } /* Wash cards (why-us / keypoints / shop values): a restrained hover lift. */ .ps-why-cards .ps-wash-card, .ps-keypoints .ps-wash-card, .ps-shop-values .ps-wash-card { transition: transform var(--ps-dur-2) var(--ps-ease), box-shadow var(--ps-dur-2) var(--ps-ease); } .ps-why-cards .ps-wash-card:hover, .ps-keypoints .ps-wash-card:hover, .ps-shop-values .ps-wash-card:hover { transform: translateY(-3px); box-shadow: var(--ps-shadow-md); } /* CTA band: chat bubbles pop in, staggered, once the band reveals. */ html.ps-anim .ps-cta-band .ps-chat p { opacity: 0; transform: translateY(10px) scale(0.96); transition: opacity var(--ps-dur-3) var(--ps-ease-spring), transform var(--ps-dur-3) var(--ps-ease-spring); } html.ps-anim .ps-cta-band.is-in .ps-chat p { opacity: 1; transform: none; } html.ps-anim .ps-cta-band.is-in .ps-chat p:nth-child(1) { transition-delay: var(--ps-dur-2); } html.ps-anim .ps-cta-band.is-in .ps-chat p:nth-child(2) { transition-delay: var(--ps-dur-3); } html.ps-anim .ps-cta-band.is-in .ps-chat p:nth-child(3) { transition-delay: var(--ps-dur-4); } /* CTA band micro-interactions: button lift + shop image nudge. */ .ps-cta-band .ps-btn { transition: transform var(--ps-dur-1) ease, box-shadow var(--ps-dur-1) ease, background var(--ps-dur-1) ease, color var(--ps-dur-1) ease; } .ps-cta-band .ps-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -12px rgba(11, 25, 40, 0.45); } .ps-cta-shop img { transition: transform var(--ps-dur-3) var(--ps-ease); } .ps-cta-shop:hover img { transform: scale(1.03); } @media (prefers-reduced-motion: reduce) { html.ps-anim .ps-cta-band .ps-chat p { opacity: 1 !important; transform: none !important; transition: none; } .ps-marquee li.product, .ps-marquee li.product img, .ps-why-cards .ps-wash-card, .ps-keypoints .ps-wash-card, .ps-shop-values .ps-wash-card, .ps-cta-band .ps-btn, .ps-cta-shop img { transition: none; } } /* ========================================================================== AWAKEN — shop catalog card hover life (mirrors the homepage rail) ========================================================================== */ /* Clip so the hover image-zoom stays inside the rounded card on both surfaces. */ .ps-marquee li.product, .ps-shop-grid li.product { overflow: hidden; } .ps-shop-grid li.product { transition: box-shadow var(--ps-dur-2) var(--ps-ease), transform var(--ps-dur-2) var(--ps-ease); } .ps-shop-grid li.product:hover { box-shadow: inset 0 0 0 1.5px var(--ps-blue), var(--ps-shadow-md); transform: translateY(-4px); } .ps-shop-grid li.product img { transition: transform var(--ps-dur-3) var(--ps-ease); } .ps-shop-grid li.product:hover img { transform: scale(1.05); } .ps-shop-grid .ps-learn-more svg { transition: transform var(--ps-dur-1) ease; } .ps-shop-grid li.product:hover .ps-learn-more svg { transform: translateX(3px); } @media (prefers-reduced-motion: reduce) { .ps-shop-grid li.product, .ps-shop-grid li.product img, .ps-shop-grid .ps-learn-more svg { transition: none; } } /* ========================================================================== PDP MOBILE — buy dock (frosted). On phones this IS the buy experience: always visible from load; the in-page pack selector + cart form are hidden below (JS-gated so no-JS keeps the stock form and never sees the dock). Segmented pack control (1 SINGLE / 5 SAVE 10% / 10 SAVE 20%) + total with per-box equivalent + Add. Drives the real form. ≥901px hidden entirely. ========================================================================== */ .ps-buybar { display: none; } @media (max-width: 900px) { html.ps-anim .ps-buybar { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 140; /* below the add-to-cart toast (150) */ padding: 0 12px calc(12px + env(safe-area-inset-bottom, 0px)); pointer-events: none; transform: translateY(18px) scale(0.98); opacity: 0; filter: blur(2px); transition: transform var(--ps-dur-3) var(--ps-ease-spring), opacity var(--ps-dur-2) ease, filter var(--ps-dur-2) ease; } html.ps-anim .ps-buybar.is-show { transform: none; opacity: 1; filter: blur(0); } .ps-buybar-card { pointer-events: auto; background: rgba(255, 255, 255, 0.92); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); border: 1px solid var(--ps-line); border-radius: var(--ps-r-xl); box-shadow: 0 20px 48px -16px rgba(11, 25, 40, 0.32), 0 2px 8px -4px rgba(11, 25, 40, 0.16); padding: 12px; display: flex; flex-direction: column; } /* Identity row — collapsed while the on-page H1 is visible (the page carries the name); .is-context (ps.js) slides it in once the title scrolls away. */ .ps-buybar-top { display: flex; align-items: center; gap: 11px; max-height: 0; opacity: 0; overflow: hidden; margin-bottom: 0; transform: translateY(4px); transition: max-height var(--ps-dur-2) ease, opacity var(--ps-dur-2) ease, margin-bottom var(--ps-dur-2) ease, transform var(--ps-dur-2) ease; } .ps-buybar.is-context .ps-buybar-top { max-height: 52px; opacity: 1; margin-bottom: 10px; transform: none; } .ps-buybar-thumb { flex: 0 0 auto; width: 44px; height: 44px; border-radius: var(--ps-r-md); background: var(--ps-pale); border: 1px solid var(--ps-line); overflow: hidden; } .ps-buybar-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 4px; } .ps-buybar-info { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; } .ps-buybar-name { font-size: var(--ps-t-base); font-weight: 700; color: var(--ps-navy); line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ps-buybar-sub { font-size: var(--ps-t-2xs); color: var(--ps-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; } .ps-buybar-bottom { display: flex; align-items: stretch; gap: 9px; } /* Segmented pack control — one connected piece, active cell filled blue. Each cell is two-line: the quantity + what it means (Single / Save 10%…). */ .ps-buybar-seg { flex: 0 0 auto; display: flex; gap: 2px; padding: 3px; border: 1px solid var(--ps-line-2); border-radius: var(--ps-r-lg); background: #fff; } .ps-buybar-opt { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 56px; padding: 5px 8px; border: 0; border-radius: var(--ps-r-md); background: transparent; font-family: var(--ps-font); cursor: pointer; transition: background var(--ps-dur-1) ease, box-shadow var(--ps-dur-1) ease; } .ps-buybar-opt b { font-size: var(--ps-t-base); font-weight: 700; line-height: 1; color: var(--ps-navy); font-variant-numeric: tabular-nums; } .ps-buybar-opt small { font-size: 8.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ps-muted); white-space: nowrap; } .ps-buybar-opt:hover b { color: var(--ps-blue); } .ps-buybar-opt.is-active { background: var(--ps-blue); box-shadow: 0 3px 10px -3px rgba(0, 118, 184, 0.55); } .ps-buybar-opt.is-active b { color: #fff; } .ps-buybar-opt.is-active small { color: rgba(255, 255, 255, 0.82); } .ps-buybar-opt.is-active:hover b { color: #fff; } .ps-buybar-add { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 48px; padding: 0 12px; background: var(--ps-blue); color: #fff; border: 0; border-radius: var(--ps-r-lg); font-family: var(--ps-font); font-size: var(--ps-t-base); font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; cursor: pointer; transition: background var(--ps-dur-1) ease, transform var(--ps-dur-1) ease; } .ps-buybar-add:hover { background: var(--ps-blue-deep); } .ps-buybar-add:active { transform: scale(0.98); } .ps-buybar-add svg { flex: 0 0 auto; } /* The dock replaces the in-page buy controls on phones (no duplication). JS-gated: without JS the stock form stays usable and the dock never shows. */ html.ps-anim .ps-pdp .ps-pack, html.ps-anim .ps-pdp form.cart { display: none !important; } /* Gallery trust chips — clutter at phone width. */ .ps-pd-trust { display: none; } /* Content + the toast clear the always-on dock; its height is measured into --ps-dock-h by ps.js (fallback ≈ two-row dock). */ html.ps-anim body.single-product { padding-bottom: calc(var(--ps-dock-h, 128px) + 30px + env(safe-area-inset-bottom, 0px)); } html.ps-anim body.single-product .ps-toasts { bottom: calc(var(--ps-dock-h, 128px) + 26px + env(safe-area-inset-bottom, 0px)); } } @media (prefers-reduced-motion: reduce) { html.ps-anim .ps-buybar { transition: opacity var(--ps-dur-1) ease; transform: none; filter: none; } html.ps-anim .ps-buybar.is-show { transform: none; } .ps-buybar-top { transition: none; transform: none; } .ps-buybar-opt, .ps-buybar-add { transition: none; } }