/* ============================================================ NOVOS Blocks — section styles. Tokens come from theme.json (--wp--preset--*, --wp--custom--*). Local aliases below exist only for readability; every color resolves to the theme.json palette. ============================================================ */ :root { --nv-orange: var(--wp--preset--color--orange); --nv-orange-deep: var(--wp--preset--color--orange-deep); --nv-orange-soft: var(--wp--preset--color--orange-soft); --nv-energy: var(--wp--preset--color--energy); --nv-growth: var(--wp--preset--color--growth); --nv-paper: var(--wp--preset--color--paper); --nv-beige: var(--wp--preset--color--beige); --nv-beige-dark: var(--wp--preset--color--beige-dark); --nv-ink: var(--wp--preset--color--ink); --nv-ink-80: var(--wp--preset--color--ink-80); --nv-ink-60: var(--wp--preset--color--ink-60); --nv-ink-40: var(--wp--preset--color--ink-40); --nv-ink-20: var(--wp--preset--color--ink-20); --nv-ink-10: var(--wp--preset--color--ink-10); --nv-ink-05: var(--wp--preset--color--ink-05); --nv-white: var(--wp--preset--color--white); --nv-serif: var(--wp--preset--font-family--serif); --nv-sans: var(--wp--preset--font-family--sans); --nv-mono: var(--wp--preset--font-family--mono); --nv-fs-display: var(--wp--preset--font-size--display); --nv-fs-h2: var(--wp--preset--font-size--heading-2); --nv-fs-h3: var(--wp--preset--font-size--heading-3); --nv-fs-lead: var(--wp--preset--font-size--lead); --nv-fs-lead-display: var(--wp--preset--font-size--lead-display); --nv-fs-mono: var(--wp--preset--font-size--mono); --nv-radius-tile: var(--wp--custom--radius--tile); --nv-radius-xs: var(--wp--custom--radius--xs); --nv-radius-btn: var(--wp--custom--radius--btn); --nv-radius-sm: var(--wp--custom--radius--sm); --nv-radius: var(--wp--custom--radius--md); --nv-radius-lg: var(--wp--custom--radius--lg); --nv-radius-panel: var(--wp--custom--radius--panel); --nv-ease: var(--wp--custom--motion--ease); --nv-shadow-sm: var(--wp--custom--shadow--sm); --nv-shadow: var(--wp--custom--shadow--md); --nv-shadow-lg: var(--wp--custom--shadow--lg); --nv-lh-hero: var(--wp--custom--type--lh-hero); --nv-ls-btn: var(--wp--custom--type--ls-btn); --nv-container: 1440px; --nv-container-mid: 1500px; --nv-container-wide: 1600px; --nv-gutter: clamp(22px, 2.8vw, 40px); --nv-gutter-wide: clamp(22px, 2.8vw, 40px); --nv-section-pad: var(--wp--preset--spacing--80); --nv-ink-warm: var(--wp--preset--color--ink-warm); --nv-bulletin-h: var(--wp--custom--chrome--bulletin-h); --nv-nav-h: var(--wp--custom--chrome--nav-h); --nv-top-stack: calc(var(--nv-bulletin-h) + var(--nv-nav-h)); --nv-on-dark-muted: var(--wp--custom--text-on-dark-muted); --nv-border-on-dark: var(--wp--custom--border-on-dark); } /* Section rhythm: the tighter homepage padding (VP feedback 2026-07 — modules were too spaced out, too much scrolling) is now the site-wide default via theme.json spacing preset 80 (2026-07-22, PDP feedback). */ html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nv-top-stack) + 22px); -webkit-text-size-adjust: 100%; /* Make the viewport scroller with a permanently reserved scrollbar gutter. overflow-x:hidden gives a non-visible overflow so scrollbar-gutter actually takes effect here (and stops the gutter being propagated from ); the gutter then stays reserved when the cart drawer locks via position:fixed — so opening/closing the drawer no longer removes the scrollbar and shifts the page + right-anchored nav. */ overflow-x: hidden; scrollbar-gutter: stable; } body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* Marquee tracks and scroll-snap rails overflow the viewport by design. overflow-x:hidden on alone is not enough on Android/iOS — touch scroll chaining from a rail can still pan the root sideways. clip on hard-caps horizontal overflow without creating a scroll container (so position:sticky descendants keep working). */ overflow-x: clip; } /* Utility for every scroll strip/box (carousels, tab strips, compare scrollers, tickers): swipes never chain into a sideways pan of the whole page, and no scrollbar is ever painted (content still scrolls by touch, wheel and keyboard). Add the class to the scroll container's markup. overflow-y is locked to hidden because overflow-x: auto alone computes overflow-y to auto too — any transient vertical overflow (e.g. the .nv-reveal translateY offset on cards) then turns the rail into a vertical scroll target that traps the wheel mid-page-scroll. */ .nv-rail { overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; } .nv-rail::-webkit-scrollbar { display: none; } /* Card carousels (novos.js): user-driven native scroll-snap tracks. The shared class carries snap + grab affordance; snap is suspended mid-drag so the track follows the pointer 1:1, then re-engages on release. */ .nv-cardrail { scroll-snap-type: x mandatory; cursor: grab; } .nv-cardrail:focus-visible { outline: 2px solid var(--nv-orange-soft); outline-offset: 4px; } .nv-cardrail.is-dragging { scroll-snap-type: none; cursor: grabbing; scroll-behavior: auto; user-select: none; } .nv-cardrail.is-dragging a, .nv-cardrail.is-dragging img { pointer-events: none; } /* Touch scrolling felt jumpy with mandatory snap on big cards — proximity keeps the alignment help without yanking the rail mid-flick. */ @media (max-width: 980px) { .nv-cardrail:not(.is-dragging) { scroll-snap-type: x proximity; } } /* Generic content carousel — the block-theme replacement for the legacy ACF novos-slider. Compose on the scroll container: `nv-carousel__track nv-rail nv-cardrail` (+ id, tabindex="0", role ="group", aria-label), preceded by a `.nv-carousel-nav.nv-carousel__nav` arrow group wired via aria-controls (novos.js). Card width comes from --nv-carousel-card; the default is narrower than the container so the next card always peeks. */ .nv-carousel__track { display: flex; gap: var(--nv-carousel-gap, clamp(16px, 2.2vw, 30px)); overflow-x: auto; padding: 4px var(--nv-gutter) 14px 4px; /* Bleed to the right viewport edge like the shop/protocol rails, so the cut-off card touches the screen instead of dying at the content box with dead space beside it (staging QA 2026-07-31). !important because these tracks are direct children of constrained groups, where WP's layout CSS pins `margin-right: auto !important` and caps max-width. */ margin-right: calc(50% - 50vw) !important; max-width: none !important; } .nv-carousel__slide { flex: none; width: var(--nv-carousel-card, min(520px, 78vw)); scroll-snap-align: start; min-width: 0; /* Stretch the card to the tallest slide so rows are equal height. */ display: flex; } .nv-carousel__slide > * { width: 100%; box-sizing: border-box; } .nv-carousel__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: clamp(14px, 2vw, 24px); } .nv-carousel__head :is(h2, h3) { margin: 0; } /* Arrow group for generic content carousels: same controls as the PDP timeline — right-aligned above the rail, hidden on touch widths where swiping is the natural gesture. */ .nv-carousel__nav { margin-bottom: clamp(10px, 1.4vw, 18px); } @media (max-width: 980px) { .nv-carousel__nav { display: none; } } /* Scroll boxes with uniform generated markup (drawer panels, mobile nav): same no-scrollbar treatment without classing every instance. */ dialog.drawer .drawer-content, .nv-mnav__panel { scrollbar-width: none; } dialog.drawer .drawer-content::-webkit-scrollbar, .nv-mnav__panel::-webkit-scrollbar { display: none; } img, video { display: block; max-width: 100%; height: auto; } h1, h2, h3 { text-wrap: balance; } .nv-mono { font-family: var(--nv-mono); font-variant-numeric: tabular-nums; } .nv-eyebrow { font-family: var(--nv-mono); font-size: var(--nv-fs-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--nv-orange-deep); } .nv-eyebrow--soft { color: var(--nv-orange-soft); } .nv-lead { font-size: var(--nv-fs-lead); color: var(--nv-ink-60); } .nv-limitation { display: block; margin-top: 1em; font-family: var(--nv-mono); font-size: var(--nv-fs-mono); line-height: 1.48; color: var(--nv-on-dark-muted); letter-spacing: 0.01em; } .nv-limitation--faint { color: var(--nv-ink-40); } /* ---------- Organic line (signature heading underline swoosh) ---------- Colored via currentColor: set `color` on the element (or inherit) per section. Three segments: flat lead (bottom), fixed-aspect S-bend, flat tail (top). novos.js measures the preceding heading and sets --nv-bend-x so the bend lands just past the text at every width; without JS it sits at 38%. Stroke thickness tracks the bend SVG (viewBox 149x55, stroke 2). */ .nv-orgline { --nv-orgline-h: clamp(28px, 3.4vw, 54px); --nv-orgline-stroke: calc(var(--nv-orgline-h) / 27.5); --nv-bend-w: calc(var(--nv-orgline-h) * 2.71); --nv-bend-x: 38%; --nv-bend-lead: clamp(0px, var(--nv-bend-x), calc(100% - var(--nv-bend-w))); position: relative; display: block; width: 100%; height: var(--nv-orgline-h); pointer-events: none; } .nv-orgline::before { content: ""; position: absolute; top: 0; left: var(--nv-bend-lead); width: var(--nv-bend-w); height: 100%; background: currentColor; -webkit-mask: url("../img/organic-bend.svg") center / 100% 100% no-repeat; mask: url("../img/organic-bend.svg") center / 100% 100% no-repeat; } /* Lead and tail overlap the bend by 2px; the bend is horizontal at both ends, so the seam is invisible at any rounding. */ .nv-orgline::after { content: ""; position: absolute; inset: 0; background: linear-gradient(currentColor, currentColor) left bottom / calc(var(--nv-bend-lead) + 2px) var(--nv-orgline-stroke) no-repeat, linear-gradient(currentColor, currentColor) right top / calc(100% - var(--nv-bend-lead) - var(--nv-bend-w) + 2px) var(--nv-orgline-stroke) no-repeat; } /* ---------- Help tooltip (nv-tip, timeline.com style) ---------- The whole sentence is the trigger (button wraps the label text + a circle-help icon). The bubble is a white card fixed to the viewport; novos.js places it above the trigger when there's room, below otherwise, and clamps it horizontally. Shows on hover/focus (CSS) and click-toggles for touch (novos.js adds .is-open + aria-expanded). */ .nv-tip { display: inline; } .nv-tip__btn { display: inline; margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; letter-spacing: inherit; line-height: inherit; text-align: inherit; cursor: pointer; } .nv-tip__btn svg { display: inline-block; width: 15px; height: 15px; margin-left: 6px; vertical-align: -2px; color: var(--nv-ink-40); transition: color 0.2s var(--nv-ease); } .nv-tip:hover .nv-tip__btn svg, .nv-tip.is-open .nv-tip__btn svg, .nv-tip__btn:focus-visible svg { color: var(--nv-orange); } .nv-tip__btn:focus-visible { outline: 2px solid var(--nv-orange-soft); outline-offset: 2px; border-radius: 4px; } /* White card bubble; left/top set by novos.js (fixed = never clipped by the compare tables' horizontal scroll boxes). */ .nv-tip__bubble { box-sizing: border-box; position: fixed; left: 0; top: 0; z-index: 1200; width: max-content; max-width: min(400px, calc(100vw - 32px)); padding: 16px 20px; border-radius: var(--nv-radius-sm); background: var(--nv-white); color: var(--nv-ink-80); font-family: var(--nv-sans); font-weight: 400; font-size: 0.88rem; line-height: 1.5; letter-spacing: 0; text-align: left; text-transform: none; white-space: normal; box-shadow: var(--nv-shadow-lg); border: 1px solid color-mix(in srgb, var(--nv-ink) 6%, transparent); opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity 0.18s var(--nv-ease), transform 0.18s var(--nv-ease), visibility 0.18s; pointer-events: none; } .nv-tip--above .nv-tip__bubble { transform: translateY(-4px); } .nv-tip:hover .nv-tip__bubble, .nv-tip:focus-within .nv-tip__bubble, .nv-tip.is-open .nv-tip__bubble { opacity: 1; visibility: visible; transform: none; } /* Glue a label's last word to its tip icon so the icon never wraps alone. */ .nv-nowrap { white-space: nowrap; } @media (prefers-reduced-motion: reduce) { .nv-tip__bubble { transition: none; } } /* Even out multi-line section headings so no width leaves an orphan word. */ .nv-proof__title, .nv-compare__title, .nv-people__head h2, .nv-protocol__head h2 { text-wrap: balance; } /* ---------- Buttons (Figma "NOVOS Buttons": 12px radius, SemiBold, hairline border) ---------- */ .nv-btn { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 0.55em; border-radius: var(--nv-radius-xs); border: 0.5px solid transparent; padding: 1em 2em; font-weight: 600; font-size: 1rem; line-height: 1.08; letter-spacing: var(--nv-ls-btn); text-decoration: none; transition: transform 0.25s var(--nv-ease), box-shadow 0.25s var(--nv-ease), background 0.25s var(--nv-ease), color 0.25s var(--nv-ease), border-color 0.25s var(--nv-ease); will-change: transform; } .nv-btn:hover { transform: translateY(-2px); } .nv-btn:focus-visible { outline: 2px solid var(--nv-orange-soft); outline-offset: 3px; } .nv-btn--primary { background: var(--nv-orange); color: var(--nv-white); border-color: var(--wp--custom--glass--border); backdrop-filter: var(--wp--custom--glass--blur-chip); -webkit-backdrop-filter: var(--wp--custom--glass--blur-chip); } .nv-btn--primary:hover { background: var(--wp--custom--brand-hover); color: var(--nv-white); } .nv-btn--dark { background: var(--nv-ink); color: var(--nv-white); } .nv-btn--dark:hover { background: #000; color: var(--nv-white); } .nv-btn--white { background: var(--nv-white); color: var(--nv-orange-deep); } .nv-btn--white:hover { background: var(--nv-ink); color: var(--nv-white); } .nv-btn--glass { background: var(--wp--custom--glass--light); color: var(--nv-white); border-color: var(--wp--custom--glass--border); backdrop-filter: var(--wp--custom--glass--blur-chip); -webkit-backdrop-filter: var(--wp--custom--glass--blur-chip); } .nv-btn--glass:hover { background: var(--wp--custom--glass--light-strong); color: var(--nv-white); } .nv-btn--outline { border: 0.5px solid color-mix(in srgb, var(--nv-ink) 20%, transparent); background: var(--wp--custom--glass--light); color: var(--nv-ink); backdrop-filter: var(--wp--custom--glass--blur-chip); -webkit-backdrop-filter: var(--wp--custom--glass--blur-chip); } .nv-btn--outline:hover { border-color: var(--nv-ink); background: var(--nv-white); } /* ---------- Skip link ---------- */ .skip-link { position: fixed; top: -64px; left: 16px; z-index: 1200; background: var(--nv-ink); color: var(--nv-white); border-radius: 12px; padding: 0.8em 1.1em; font-weight: 700; transition: top 0.2s var(--nv-ease); clip: auto; width: auto; height: auto; } .skip-link:focus { top: 12px; } /* ---------- Chrome flow ---------- Bulletin + nav live in normal document flow (the header template-part wrapper is flattened via display:contents so the nav's sticky range is the whole page, not the 110px wrapper). The bulletin scrolls away with the page; the nav sticks and is hidden/revealed by scroll direction in novos.js (timeline.com behavior). main pulls up under the chrome so heroes still run edge-to-edge behind the glass nav. */ .wp-block-template-part:has(.nv-nav) { display: contents; } main#main { margin-top: calc(-1 * var(--nv-top-stack)); } /* Root blockGap (1.25rem) puts a margin on every top-level template block — kill it on the footer wrapper so the CTA runs seamlessly into the footer. */ .wp-block-template-part:has(.nv-footer) { margin-block-start: 0; } /* ---------- Bulletin ---------- */ .nv-bulletin { position: relative; height: var(--nv-bulletin-h); z-index: 1000; display: flex; align-items: center; overflow: hidden; background: var(--wp--preset--gradient--bulletin); color: var(--nv-white); border-bottom: 1px solid var(--nv-border-on-dark); } /* No flex gap — see .nv-ticker__track seam note; span padding-left spaces items. */ .nv-bulletin__track { display: flex; white-space: nowrap; animation: nv-bulletin-move 28s linear infinite; will-change: transform; } .nv-bulletin__track span { font-family: var(--nv-mono); font-size: 0.8rem; letter-spacing: 0.07em; text-transform: uppercase; padding-left: 36px; color: color-mix(in srgb, var(--nv-white) 96%, transparent); } .nv-bulletin__track i { font-style: normal; color: var(--nv-white); } @keyframes nv-bulletin-move { to { transform: translateX(-50%); } } /* ---------- Nav (floating pill shell) ---------- */ .nv-nav { position: sticky; top: 0; z-index: 990; padding: 12px var(--nv-gutter-wide) 0; pointer-events: none; transition: transform 0.34s var(--nv-ease); /* Own compositor layer: without it Chromium (Chrome/Brave) can flash the shell's backdrop-filter while the hide/reveal transform transitions. */ will-change: transform; } /* Scroll direction: hidden while scrolling down, revealed on scroll-up (class toggled in novos.js; never hidden at page top or with menu open). */ .nv-nav.nv-nav--hidden { transform: translateY(calc(-100% - 2px)); pointer-events: none; } .nv-nav__shell { box-sizing: border-box; pointer-events: auto; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(18px, 3vw, 42px); width: 100%; /* Pill edges sit on the same line as section content: container-wide minus the gutters the section inners spend on padding (Figma nav container-wide, ~190-200px margins at 1920). */ max-width: calc(var(--nv-container-wide) - 2 * var(--nv-gutter-wide)); margin-inline: auto; min-height: 64px; padding: 7px 8px 7px 28px; border-radius: var(--wp--custom--radius--pill); background: color-mix(in srgb, var(--nv-white) 16%, transparent); border: 1px solid color-mix(in srgb, var(--nv-white) 22%, transparent); box-shadow: 0 20px 54px -40px rgba(0, 0, 0, 0.72); backdrop-filter: blur(18px) saturate(1.18); -webkit-backdrop-filter: blur(18px) saturate(1.18); transition: background 0.35s var(--nv-ease), border-color 0.35s var(--nv-ease); } .nv-nav__logo { color: var(--nv-white); font-family: var(--nv-sans); font-weight: 760; font-size: 1.02rem; letter-spacing: 0.01em; text-decoration: none; transition: color 0.35s var(--nv-ease); display: inline-flex; align-items: center; } /* Wordmark is ink-on-transparent; inverted to white over the dark hero, back to ink once the shell goes solid (scrolled / light-hero pages). */ .nv-nav__logo img { display: block; height: 20px; width: auto; filter: invert(1); transition: filter 0.35s var(--nv-ease); } .nv-nav.scrolled .nv-nav__logo img, .nv-nav-solid .nv-nav__logo img { filter: none; } .nv-nav__links { display: flex; align-items: center; justify-content: center; gap: 4px; min-width: 0; } .nv-nav__item { position: relative; } /* Hover bridge keeps the mega panel open while the cursor travels down */ .nv-nav__item::after { content: ""; position: absolute; left: -10px; right: -10px; top: 100%; height: 18px; } /* Root items are non-navigating