/* Theme Name: Priovant Theme URI: https://priovant.com Author: Priovant Description: Custom minimal block theme for Priovant. Core blocks only; design tokens live in theme.json. Version: 0.1.1 Requires at least: 6.6 Tested up to: 6.7 Requires PHP: 8.2 License: GPL-2.0-or-later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: priovant */ /* All theme overrides use :root :where(...) for low specificity so users can still override via the Site Editor Styles UI. */ /* Smooth in-page scrolling (e.g. the header "Sign up" → #signup), disabled when the user prefers reduced motion. The sign-up section's scroll-margin-top keeps its top clear of the sticky header (≈ header height; smaller on mobile). */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } :root :where(#signup) { scroll-margin-top: 140px; } /* /isi landing (via the WPE redirect plugin: /isi → /#isi). Same responsive values as .priovant-legal H-anchors below (style.css around L2700) — sticky header ≈ 147px desktop / 115px mobile + a ~13px gap so the "IMPORTANT SAFETY INFORMATION" heading isn't clipped. Scoped to the new #isi anchor only; the existing #priovant-isi-section id keeps its today-behavior (native hash-jump, no offset — used by isi-tray.js:17 for cloning + section-shots.mjs:54 for screenshots). */ :root :where(#isi) { scroll-margin-top: 160px; } @media (max-width: 1023px) { :root :where(#isi) { scroll-margin-top: 130px; } } /* Footnote/scientific markers SCALE with the surrounding text (copywriter, 2026-07-30 — a fixed 10px read too small/too-high on H2s and a touch too big in the 12px footnote list). 0.625em ≈ the UA `smaller`, tuned so body copy lands on the ~10px they signed off on (0.625 × 16px body = 10px); a marker then keeps the same ratio at every size (heading → body → footnote), like the ™ (`.priovant-tm`, 0.6em, below). */ :root :where(sup, sub) { font-size: 0.625em; } /* Position the marker as a normal superscript (`super`, like the ™). We'd previously used `text-top` because a FIXED-size glyph drifted to mid-line as a heading grew — but the glyph now SCALES (0.625em above), so `super` raises it by a proportional amount and it stays a consistent superscript at every size, sitting lower on H2s than the ascent-pinned `text-top` (which read "too high"). `line-height: 1` strips the sup's leading so it can't inflate a tall line box (e.g. body copy at 1.625). */ :root :where(sup) { vertical-align: super; line-height: 1; /* A footnote marker must never wrap MID-MARKER: a citation like "1-3"/"1,2" carries internal break opportunities (the hyphen/comma), so a wrapping line could split it to "1-" / "3". `white-space: nowrap` keeps the marker whole; because markers are authored with NO space before the ("study.1-3"), the word + marker then have no break opportunity between them either → a needed wrap lands BEFORE the word (the whole "study.1-3" moves down together), never inside the footnote. NOT a forced break — only changes WHERE an already-necessary wrap falls. SITE-WIDE (widened from hero-only 2026-07-23): markers are short + the word still breaks via overflow-wrap, so no overflow risk; the ™/FPO sups are single-glyph/short → no-op. */ white-space: nowrap; } /* Trademark ™ — the importer's esc() auto-wraps every ™ in , so it renders as a PROPORTIONAL superscript (0.6em, ~60% of the surrounding text) rather than the fixed-10px footnote-marker size above. Scales with its context (hero lead → body). Later in source than the :where(sup) rule (same 0-specificity :where) so it wins. */ :root :where(.priovant-tm) { font-size: 0.6em; vertical-align: super; } /* Tightened em-dash — the importer's token wraps a — in this span (OPT-IN, not every em-dash). Negative inline margins pull both neighbors in past the font's built-in side bearings so a closed em-dash reads tight ("(brepocitinib)—the"), per the copywriter. Applied to the Day One LP + homepage hero leads; see docs/backlog.md "Em-dash tightening" for the broader copy review. Colored the COPY gray (not the blue bold lead-in it sits inside) — a direct color on the span beats the inherited blue (2026-07-10, designer). */ :root :where(.priovant-emdash) { margin: 0 -0.06em; color: var(--wp--preset--color--lisraya-text); } :root :where(.is-style-eyebrow) { font-size: var(--wp--preset--font-size--eyebrow); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--wp--preset--color--lisraya-text); line-height: 1.5; margin-bottom: var(--wp--preset--spacing--20); } /* Presentational uppercase (copy authored via the token → this span, so the source copy stays properly cased). Used by the ISI section headings. */ :root :where(.priovant-uppercase) { text-transform: uppercase; } :root :where(.wp-block-separator.is-style-lisraya-rule) { border: 0; background-color: var(--wp--preset--color--lisraya-yellow); height: 2px; opacity: 1; max-width: none; margin-block: var(--wp--preset--spacing--30); } :root :where(.wp-block-separator.is-style-lisraya-rule-narrow) { border: 0; background-color: var(--wp--preset--color--lisraya-yellow); height: 2px; opacity: 1; max-width: 200px; margin-left: 0; margin-right: auto; margin-block: var(--wp--preset--spacing--30); } /* ============ Inner gutter (root padding is 0 — see theme.json) ============ Root padding is 0, so every alignwide 1280 box centers — and its side gutters begin growing — at exactly 1280px site-wide (mirrors Make's `mx-auto max-w-7xl` containers, which have no outer gutter and grow from 1280). Each box now carries Make's 24px breathing room INSIDE itself; border-box keeps the box at 1280 so the onset doesn't shift. Hero (px-6 → px-200 desktop) is handled in its own rule; the CTA card is excluded — it has its own larger padding and goes edge-to-edge below 1280, exactly like Make. */ :root :where(.priovant-nav, .priovant-signup, .priovant-footer, .priovant-isi-tray, .priovant-isi) :where(.alignwide) { box-sizing: border-box; padding-inline: 24px; } /* Header utility bar + the constrained chrome rows aren't alignwide — give their content the same centered 1280 box with 24px inner padding. */ :root :where(.priovant-utility-bar) > :where(.wp-block-navigation) { width: 100%; max-width: var(--wp--style--global--wide-size); margin-inline: auto; box-sizing: border-box; padding-inline: 24px; } /* Reusable content-page container (the
of any standard page). Gives the same page width + side gutters as the landing page: capped at wideSize (1280px), centered, 24px inner gutters that grow beyond 1280 (root padding is 0). Hero-like breathing room above the H1 / below the content (80px desktop, 40px mobile — see the ≤1023px block). Use on every page we build. */ :root :where(.priovant-page) { box-sizing: border-box; max-width: var(--wp--style--global--wide-size); margin-inline: auto; padding-inline: 24px; padding-block: 80px; } /* ============ Section primitive (reusable across all pages) ============ The universal section shape: an alignfull outer (its own background) with 80px/40px vertical rhythm, and alignwide content capped at wideSize (1280px), centered, with 24px gutters that grow beyond 1280 (root padding is 0). Any new section just needs class="…priovant-section" + alignwide inner group(s). (Mirrors the per-section gutter rule above + .priovant-page; mobile padding in the ≤1023px block.) */ :root :where(.priovant-section) { padding-block: 80px; } :root :where(.priovant-section) :where(.alignwide) { box-sizing: border-box; padding-inline: 24px; } /* Data Table section: match the page's 112px content inset (as .priovant-content-block / the lower hero / the speedbump do) so the table lines up with its neighboring sections instead of reading full-width — the generic .priovant-section gutter is only 24px, which left the table ~88px wider per side than the rest of the page column. Mobile keeps 24px. */ :root :where(.priovant-datatable-section) :where(.alignwide) { padding-inline: 112px; } @media (max-width: 1023px) { :root :where(.priovant-datatable-section) :where(.alignwide) { padding-inline: 24px; } } :root :where(.priovant-hero) { position: relative; padding-top: 80px; /* Make: pt-[81px] desktop */ padding-bottom: 80px; /* Make: pb 80px */ /* How far the wideSize (1280px) container's left edge sits from the viewport edge — i.e. how much the centered gutters have opened up. 0 until the viewport reaches wideSize, then grows. The burst + gold gutter add this, so they begin widening exactly at 1280px (mirrors Make's max-w-7xl), ignoring root padding. */ --hero-gutter-grow: max(0px, (100vw - var(--wp--style--global--wide-size, 1280px)) / 2); } /* The hero's full-bleed bottom rule hugs the section's bottom edge (drop the separator's default top margin) so the space below the burst ≈ the 80px above it. */ .wp-block-separator.priovant-hero__rule { margin-top: 0; } /* Hero burst: the 126px stepped bars sit 26px inside the wideSize container — i.e. 26px past wherever its left edge is (--hero-gutter-grow), so they track the gold gutter as it widens. Top-aligned with the H1 (80px = the section's top padding). Out of flow so the text stays in normal flow. Make: bars left 26px, 126×298. */ :root :where(.priovant-hero__burst) { position: absolute; left: calc(var(--hero-gutter-grow) + 26px); top: 80px; margin: 0; width: 126px; height: 298px; max-width: none; pointer-events: none; z-index: 1; } :root :where(.priovant-hero__burst svg) { width: 100%; height: 100%; display: block; } /* Dark-gold gutter extension: fills from the viewport's LEFT EDGE to 27px into the wideSize container (1px under the bars at 26px), top-aligned with the bars and the same 298px height. Its width = the open gutter (--hero-gutter-grow) + 27px, so it's 27px until the viewport reaches wideSize (1280px) and then GROWS — the burst's dark side appears to widen, with no media query. Make: hero gutter extension. */ :root :where(.priovant-hero__gutter) { position: absolute; top: 80px; left: 0; height: 298px; width: calc(var(--hero-gutter-grow) + 27px); max-width: none; background-color: var(--wp--preset--color--lisraya-yellow); pointer-events: none; z-index: 0; } :root :where(.priovant-hero__content) { /* Make hero px-6 (24px). Root padding is now 0 (theme.json), so this is the hero's own breathing room; border-box keeps the alignwide box at 1280. */ box-sizing: border-box; padding-inline: 24px; /* The decorative layers are absolutely positioned, so the section's blockGap spuriously pushes the content down 32px (the content becomes a "later" child). Zero it so the content top aligns with the burst top, matching the Make layout. */ margin-block-start: 0; } /* Desktop: inset the text 200px so it clears the burst/gutter (Make: lg:px-[200px]). No upper cap — the gold gutter grows into the widening side gutter on its own, so the 1023px mobile breakpoint stays the only responsive boundary. */ @media (min-width: 1024px) { :root :where(.priovant-hero__content) { padding-left: 200px; } } /* Constrain the hero text column to ~Figma V4 width so the H1 wraps to two lines and the paragraphs match the V4 wrap (instead of running full-width). */ :root :where(.priovant-hero__content) > * { max-width: 760px; } /* H1 capped a touch tighter so it wraps after "dermatomyositis" like V4. */ :root :where(.priovant-hero__content) h1 { max-width: 660px; } /* Hero lead/body type + rhythm, per the Make hero (line-height 1.5, 24px below H1). */ :root :where(.priovant-hero__content p.has-lead-font-size) { line-height: 1.5; } :root :where(.priovant-hero__content h1 + p) { margin-block-start: 24px; } /* Blank-line gap between the two body blocks, mirroring Make's

: 36px desktop (24px lead × 1.5). Mobile drops to 24px in the ≤1023px block. */ :root :where(.priovant-hero__content p.has-lead-font-size + p.has-lead-font-size) { margin-block-start: 36px; } /* Constrain the yellow rule between eyebrow and H1 so it doesn't span the full content width — Figma shows it ~680px wide, left-aligned. Targets the in-hero separator only (not the trailing alignfull rule). */ :root :where(.priovant-hero__content .wp-block-separator.is-style-lisraya-rule) { max-width: 680px; margin-left: 0; margin-right: auto; } /* Markdown bold (`**…**` → ``, inline()'s only emitter of that class): brand blue ONLY inside the heroes (e.g. the hero lead phrase "Introducing LISRAYA –"); the BODY-COPY color everywhere else — site-wide review 2026-07-14. WP's preset `.has-lisraya-blue-color` sets blue with `!important`, so both overrides use `!important` + a more specific selector than the bare preset; the hero rule out-specifies the default, so it wins inside a hero. Scoped to `strong` only, so an editor's intentionally blue paragraph/span (also `.has-lisraya-blue-color`) is untouched. */ :root strong.has-lisraya-blue-color { color: var(--wp--preset--color--lisraya-text) !important; } :root :is(.priovant-hero, .priovant-lower-hero) strong.has-lisraya-blue-color { color: var(--wp--preset--color--lisraya-blue) !important; } /* ── Lower Level Hero (Make §05 "Hero Sections" → Lower Level Hero; the reusable interior-page hero — renamed from .priovant-support-hero) ── H1 + body + a full-bleed bottom stepped gold bar (no side burst). 60px vertical at all widths (Make fixed py); 112/24 sides. */ :root :where(.priovant-lower-hero) { background-color: var(--wp--preset--color--base); } :root :where(.priovant-lower-hero__inner) { box-sizing: border-box; max-width: var(--wp--style--global--wide-size); margin-inline: auto; padding: 60px var( --priovant-gutter-inset ); /* Make px-[112px], py 60 (24 sides mobile below) */ } :root :where(.priovant-lower-hero__heading) { margin: 0 0 20px; max-width: 750px; font-size: 48px; /* documented H1 standard at ALL widths (was a 28→48 clamp) */ line-height: 1.15; font-weight: 300; /* documented H1 weight (matches the global h1 + main hero; was 400) */ letter-spacing: -0.02em; overflow-wrap: break-word; color: var(--wp--preset--color--lisraya-blue); } :root :where(.priovant-lower-hero__body) { margin: 0; max-width: 920px; font-size: 24px; /* `lead` size, fixed at all widths (was a 16→24 clamp) */ line-height: 1.5; color: var(--wp--preset--color--lisraya-text); } /* Bottom stepped bar — full-bleed 20px; 4 proportional bands (gold 40% / gold-2 26.7% / gold-3 20% / gold-4 13.3%) per the V4 band widths at 1512. */ :root :where(.priovant-lower-hero__bar) { height: 20px; background: linear-gradient(to right, var(--wp--preset--color--lisraya-yellow) 0 40%, var(--wp--preset--color--lisraya-gold-2) 40% 66.667%, var(--wp--preset--color--lisraya-gold-3) 66.667% 86.667%, var(--wp--preset--color--lisraya-gold-4) 86.667% 100%); } @media (max-width: 1023px) { :root :where(.priovant-lower-hero__inner) { padding: 60px 24px; /* Make px-6 mobile; vertical stays 60 (Make fixed py) */ } } /* ── Section nav (V4 842:12335 / Make section-nav.tsx) ── Sticky anchor bar that docks under the site header. Desktop: horizontal strip (Quick navigation: + links, 57px tall, 3px gold active underline). Mobile: dropdown (50px button + menu). section-nav.js sets `top` to the measured header height + drives the scroll-spy active state + the dropdown. */ :root :where(.priovant-section-nav) { position: sticky; top: 135px; /* JS overrides with the measured header height (desktop ≈135) */ z-index: 40; background-color: var(--wp--preset--color--base); border-bottom: 2px solid var(--priovant-border-blue); } :root :where(.priovant-section-nav__inner) { box-sizing: border-box; max-width: var(--wp--style--global--wide-size); margin-inline: auto; padding-inline: 112px; } :root :where(.priovant-section-nav__list) { display: flex; align-items: stretch; list-style: none; margin: 0; padding: 0; white-space: nowrap; overflow-x: auto; scrollbar-width: none; } :root :where(.priovant-section-nav__label) { display: flex; align-items: center; height: 57px; padding-right: 16px; font-size: 14px; line-height: 21px; color: var(--wp--preset--color--lisraya-text); } :root :where(.priovant-section-nav__link) { display: inline-flex; align-items: center; height: 57px; padding-inline: 24px; font-size: 14px; line-height: 21px; font-weight: 600; color: var(--wp--preset--color--lisraya-blue); text-decoration: none; border-bottom: 3px solid transparent; transition: color 150ms ease, border-color 150ms ease; } /* Hover/focus = navy text only, NO underline/bold (Make InteractiveSectionNavBar: "hover shifts text to navy"). The gold underline + dark bold is the ACTIVE-only treatment. */ :root :where(.priovant-section-nav__link:hover), :root :where(.priovant-section-nav__link:focus-visible) { color: var(--wp--preset--color--lisraya-isi-border); } :root :where(.priovant-section-nav__link.is-active) { color: var(--wp--preset--color--lisraya-text); border-bottom-color: var(--wp--preset--color--lisraya-yellow); font-weight: 700; } /* Mobile dropdown — hidden on desktop */ :root :where(.priovant-section-nav__mobile) { display: none; } @media (max-width: 1023px) { :root :where(.priovant-section-nav) { top: 103px; /* mobile header ≈103 (JS overrides) */ } :root :where(.priovant-section-nav__inner) { padding-inline: 24px; } :root :where(.priovant-section-nav__list) { display: none; } /* Mobile = a hamburger + "Quick Nav" summary row over an IN-FLOW list that starts open and animates collapsed to the sticky summary once a section is selected/scrolled-to (Make InteractiveSectionNavBarMobile; section-nav.js drives the max-height + summary). The block breaks out of __inner's 24px gutter so rows/dividers/the gold active bar run edge-to-edge; text is re-inset with 24px padding. */ :root :where(.priovant-section-nav__mobile) { display: block; margin-inline: -24px; } :root :where(.priovant-section-nav__toggle) { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 10px; width: 100%; padding: 13px 24px; background: none; border: 0; border-bottom: 2px solid var(--priovant-border-blue); font-family: inherit; text-align: left; cursor: pointer; } :root :where(.priovant-section-nav__burger) { flex-shrink: 0; color: var(--wp--preset--color--lisraya-blue); } :root :where(.priovant-section-nav__label-m) { font-size: 14px; line-height: 21px; font-weight: 600; color: var(--wp--preset--color--lisraya-text); } :root :where(.priovant-section-nav__current) { font-size: 14px; line-height: 21px; font-weight: 700; color: var(--wp--preset--color--lisraya-blue); } :root :where(.priovant-section-nav__current:empty) { display: none; } :root :where(.priovant-section-nav__menu) { margin: 0; padding: 0; list-style: none; overflow: hidden; /* section-nav.js animates max-height (open = list height, collapsed = 0) */ transition: max-height 280ms ease; } :root :where(.priovant-section-nav__menu li:not(:last-child)) { border-bottom: 1px solid var(--priovant-border-blue); } :root :where(.priovant-section-nav__menu-link) { display: flex; align-items: center; height: 52px; padding-inline: 24px; border-left: 3px solid transparent; /* reserves the gold-bar slot (no text shift when active) */ font-size: 14px; line-height: 21px; font-weight: 600; color: var(--wp--preset--color--lisraya-blue); text-decoration: none; transition: background-color 150ms ease, color 150ms ease; } /* Hover/tap (Make InteractiveSectionNavBarMobile isHov): near-white-blue fill + navy. */ :root :where(.priovant-section-nav__menu-link:hover), :root :where(.priovant-section-nav__menu-link:focus-visible), :root :where(.priovant-section-nav__menu-link:active) { background-color: var(--wp--preset--color--lisraya-tint); color: var(--wp--preset--color--lisraya-isi-border); } /* Active section (Make active item): light-blue fill + navy bold + gold left bar. */ :root :where(.priovant-section-nav__menu-link.is-active) { color: var(--wp--preset--color--lisraya-isi-border); background-color: var(--wp--preset--color--lisraya-utility-bg); border-left-color: var(--wp--preset--color--lisraya-yellow); font-weight: 700; } } /* NOTE — for the section-nav CLICK path, section-nav.js (scrollToId) drives the scroll and lands the section's HEADING a uniform gap below the chrome; that JS is the source of truth. The scroll-margin below is the NATIVE fallback (page-load `#hash` deep links / no-JS), kept in sync with the JS. --priovant-section-nav-offset = header + the (measured) collapsed bar height. */ :root :where( #patient-enrollment, #enrollment-form, #educational-resources, #valor-study, #skin-improvement ) { scroll-margin-top: var(--priovant-section-nav-offset, 195px); } /* Efficacy anchors whose SCB top padding is collapsed by the de-double rule (they follow a section-pad member) would otherwise land FLUSH with the sticky nav — unlike #valor-study / #skin-improvement, which keep their SCB top padding. Add that padding (= the JS `gapPx`: 64 desktop / 48 mobile) as extra scroll-margin so all five native landings match. Landing only — normal scroll rhythm is untouched. Adjacency-derived: if these sections are reordered so their de-double state flips, revisit this split. */ :root :where( #overall-improvement, #physical-functioning, #steroid-sparing ) { scroll-margin-top: calc( var(--priovant-section-nav-offset, 195px) + 64px ); } @media (max-width: 1023px) { :root :where( #overall-improvement, #physical-functioning, #steroid-sparing ) { scroll-margin-top: calc( var(--priovant-section-nav-offset, 160px) + 48px ); } } /* ── Support services (V4 842:11823 / Make PatientEnrollmentSection) ── Heading + body + a 3-col card grid (3/2/1 columns at 1024/640). 80 desktop / 40 mobile vertical (Make's support component literally uses fixed 80 — aligned to the site's content-section rhythm; designer to confirm mobile). */ :root :where(.priovant-support-services) { background-color: var(--wp--preset--color--base); } :root :where(.priovant-support-services__inner) { box-sizing: border-box; max-width: var(--wp--style--global--wide-size); margin-inline: auto; padding: 80px 112px; } :root :where(.priovant-support-services__heading) { margin: 0 0 20px; font-size: 36px; /* `heading` (H2), fixed at all widths (was a 24→36 clamp) */ line-height: 1.2; font-weight: 400; letter-spacing: -0.02em; color: var(--wp--preset--color--lisraya-blue); } :root :where(.priovant-support-services__body) { margin: 0 0 32px; max-width: 680px; font-size: 16px; line-height: 26px; color: var(--wp--preset--color--lisraya-text); } :root :where(.priovant-support-services__cards) { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; } :root :where(.priovant-support-services__card) { box-sizing: border-box; background-color: var(--wp--preset--color--base); border-radius: var(--priovant-radius-subtle); border-top: 3px solid var(--wp--preset--color--lisraya-blue-mid); padding: 20px 16px; display: flex; flex-direction: column; gap: 20px; } :root :where(.priovant-support-services__card-title) { margin: 0; font-size: 20px; line-height: 24px; font-weight: 700; color: var(--wp--preset--color--lisraya-blue); } :root :where(.priovant-support-services__card-body) { margin: 0; font-size: 15px; line-height: 22px; color: var(--wp--preset--color--lisraya-text); } @media (min-width: 640px) { :root :where(.priovant-support-services__cards) { grid-template-columns: 1fr 1fr; } } @media (min-width: 1024px) { :root :where(.priovant-support-services__cards) { grid-template-columns: 1fr 1fr 1fr; } } @media (max-width: 1023px) { :root :where(.priovant-support-services__inner) { padding: 80px 24px 40px; /* top 80 to match desktop + resources (40 was too tight) */ } } /* ── Support enrollment (V4 842:11873 / Make SupportFormSection) ── Tint section: heading + intro paras + the DocuSign FPO card (reuses .priovant-docusign*) + download note + outline button. 80/40 vertical. */ :root :where(.priovant-support-enroll) { background-color: var(--wp--preset--color--lisraya-tint); } :root :where(.priovant-support-enroll__inner) { box-sizing: border-box; max-width: var(--wp--style--global--wide-size); margin-inline: auto; padding: 80px 112px; } :root :where(.priovant-support-enroll__heading) { margin: 0 0 16px; font-size: 36px; /* `heading` (H2), fixed at all widths (was a 24→36 clamp) */ line-height: 1.2; font-weight: 400; letter-spacing: -0.02em; color: var(--wp--preset--color--lisraya-blue); } :root :where(.priovant-support-enroll__p) { margin: 0 0 20px; font-size: 16px; line-height: 26px; color: var(--wp--preset--color--lisraya-text); } :root :where(.priovant-support-enroll__card) { margin-bottom: 20px; } /* Support's DocuSign card is 543px TOTAL (V4 842:11883) — tighter than the LP's reused frame (min-height 543 + 48 padding = 639). Border-box the frame to 535 so 8px bar + 535 = 543. */ :root :where(.priovant-support-enroll .priovant-docusign__frame) { box-sizing: border-box; min-height: 535px; } /* Inline body links here are 600 (Make SupportFormSection) — see the text-link weight open item in docs/backlog.md. */ :root :where(.priovant-support-enroll .priovant-link) { font-weight: 600; } /* The download button's label is long ("Download prescription/enrollment form"); allow it to wrap so it doesn't overflow at 320px (WCAG 1.4.10 reflow). The base .priovant-btn is white-space:nowrap, which is right for short buttons. */ :root :where(.priovant-support-enroll__btn) { white-space: normal; max-width: 100%; } /* Placeholder fax pink (Make FPO convention; same as the LP — low contrast, removed at go-live). */ :root :where(.priovant-fpo-fax) { color: #ff0095; } /* General FPO placeholder text — same magenta (#ff0095) as the FPO footnote markers / fax, for copy that's a stand-in to be replaced (e.g. the homepage testimonial's "Dr. John Smith" attribution). `:root .class` (real specificity, not :where) so it overrides a component's own text color. Temporary: grep #ff0095 to strip all FPO at go-live. */ :root .priovant-fpo { color: #ff0095; } @media (max-width: 1023px) { :root :where(.priovant-support-enroll__inner) { padding: 80px 24px 40px; /* top 80 to match desktop + resources (40 was too tight) */ } } /* ── Support resources (V4 842:11905 / Make support-resources-section.tsx) ── Heading + body + a 2-col card grid. Each card = a light-blue thumbnail panel (inline SVG artboard) + content (title/desc + resource button). Hover states are pure CSS. 80/40 vertical. */ :root :where(.priovant-support-resources) { background-color: var(--wp--preset--color--base); } :root :where(.priovant-support-resources__inner) { box-sizing: border-box; max-width: var(--wp--style--global--wide-size); margin-inline: auto; padding: 0 112px 80px; /* NO top — the CTA speedbump above owns the gap (de-double); 2026-07-15 */ } :root :where(.priovant-support-resources__heading) { margin: 0 0 12px; font-size: 36px; /* `heading` (H2), fixed at all widths (was a 24→36 clamp) */ line-height: 1.2; font-weight: 400; letter-spacing: -0.02em; color: var(--wp--preset--color--lisraya-blue); } :root :where(.priovant-support-resources__body) { margin: 0 0 48px; max-width: 750px; font-size: 16px; line-height: 26px; color: var(--wp--preset--color--lisraya-text); } :root :where(.priovant-support-resources__grid) { display: grid; grid-template-columns: 1fr; gap: 16px; } :root :where(.priovant-resource) { display: flex; flex-direction: column; background-color: var(--wp--preset--color--base); border: 2px solid var(--priovant-border-blue); border-radius: var(--priovant-radius-subtle); overflow: hidden; transition: border-color 150ms ease, box-shadow 150ms ease; } :root :where(.priovant-resource:hover) { border-color: var(--wp--preset--color--lisraya-blue); box-shadow: 0 2px 30px rgba(0, 82, 155, 0.2); } :root :where(.priovant-resource__thumb) { position: relative; overflow: hidden; flex-shrink: 0; height: 276px; background-color: var(--priovant-border-blue); transition: background-color 150ms ease; } :root :where(.priovant-resource:hover .priovant-resource__thumb) { background-color: var(--wp--preset--color--lisraya-blue-muted); } /* Thumbnail image — both the UPLOADED thumbnail and the DEFAULT placeholder JPEG (render.php emits the placeholder with this same class). An 18px inset border all around, CONTAIN (whole image, no crop/distortion). Desktop/tablet: CENTERED both axes so an off-ratio thumbnail gets even top/bottom + left/right borders (the box can be taller than the image when the content column stretches the card). Mobile (<768, full-width 1-up): left-aligned (override below). */ :root :where(.priovant-resource__img) { position: absolute; top: 18px; left: 18px; /* Explicit box (NOT `inset:18px` alone): an absolutely-positioned with auto width resolves to its INTRINSIC width and overflows, so size the box and let object-fit:contain scale the bitmap inside it. */ width: calc(100% - 36px); height: calc(100% - 36px); object-fit: contain; object-position: center; display: block; } /* Mobile (<768 = the 1-up, full-width thumbnail; the resource grid's 2-up boundary): left-align the thumbnail on the wide full-width panel. Tablet (768–1023, 2-up) keeps the centered treatment above. */ @media (max-width: 767px) { :root :where(.priovant-resource__img) { object-position: left center; } } :root :where(.priovant-resource__content) { flex: 1; display: flex; flex-direction: column; min-width: 0; } :root :where(.priovant-resource__text) { flex: 1; padding: 20px; } :root :where(.priovant-resource__title) { margin: 0 0 8px; font-size: 16px; line-height: 24px; font-weight: 600; color: var(--wp--preset--color--lisraya-blue); } :root :where(.priovant-resource__desc) { margin: 0; font-size: 14px; line-height: 22px; color: var(--wp--preset--color--lisraya-text); } :root :where(.priovant-resource__actions) { display: flex; align-items: center; padding: 0 20px 20px; } /* Card hover darkens the Download/Visit-Site button border (Make: the whole card + its buttons go #cfe2f2 → #00529b). */ :root :where(.priovant-resource:hover .priovant-btn--resource) { border-color: var(--wp--preset--color--lisraya-blue); } /* Resource cards stay 2-up until 768px (a per-section exception, like the homepage Evidence cards), then drop to 1-up at ≤767. The card internals (thumbnail beside content) only go side-by-side at ≥1024 — at 768–1023 the 2-up cards keep the stacked thumbnail-over-content layout (too narrow for the 220px thumbnail beside text). */ @media (min-width: 768px) { :root :where(.priovant-support-resources__grid) { grid-template-columns: 1fr 1fr; } } @media (min-width: 1024px) { :root :where(.priovant-resource) { flex-direction: row; } :root :where(.priovant-resource__thumb) { /* 220px preferred, but allowed to SCALE DOWN on small desktop (1024–~1100): the 2-up cards are too narrow there to hold a fixed 220px thumb beside the actions row. The content column has a min-width floor (below) that reserves the Download button width; the thumbnail absorbs the squeeze instead. Both flex-shrink AND the content floor are required — without the floor, content just grows and the thumb never gives up space. */ flex-shrink: 1; width: 220px; min-width: 110px; height: auto; min-height: 276px; } :root :where(.priovant-resource__content) { min-width: 15rem; /* 240px: Download (~117) + padding, with generous slack */ } } @media (max-width: 1023px) { :root :where(.priovant-support-resources__inner) { padding: 0 24px 40px; /* NO top — de-double under the CTA speedbump (matches desktop); 2026-07-15 */ } } /* Card surfaces (Evidence stats card, CTA Speedbump card) */ :root :where(.priovant-card) { background: var(--wp--preset--color--lisraya-tint); border-radius: var(--priovant-radius-subtle); } /* ISI — dense pharma safety block. Styled to the Make ISI spec: 16px / 1.2 legal text in #333, 16px bold section labels, standard disc bullets, px-8 (32px) inner padding. Copy is a DRAFT pending MLR — this SIZING is copy-independent. */ :root :where(.priovant-isi) { border-top: 3px solid var(--wp--preset--color--lisraya-isi-border); font-size: 1rem; /* Make: 16px legal text */ line-height: 1.2; /* Make: 1.2 */ color: var(--wp--preset--color--lisraya-text); } /* The in-page ISI is a shared template part rendered after the page content, so it owns its top gap (80px desktop / 40px mobile) rather than relying on the preceding section's bottom margin — which WP zeroes once that section is the last child of its container. Matches the LP's original signup→ISI spacing and keeps it consistent on every page. (The tray's cloned copy is excluded.) */ :root :where(.priovant-isi:not(.priovant-isi-tray__full)) { margin-block-start: 80px; } /* Homepage: a tight footnotes strip (its own 25px bottom padding + 1px rule) precedes the ISI — the footnotes section already provides the spacing, so the ISI abuts it with no extra gap (matches Make: Footnotes and ISI are adjacent siblings, neither adds a top margin). Scoped via the sibling combinator so only the homepage's
is affected — the LP keeps 80px. NOTE: the ISI's template-part WRAPPER carries the 32px root block-gap as its own margin-top, which the ISI margin collapses into — so we zero BOTH the wrapper and the ISI to remove the gap entirely. The template-part/.priovant-isi are kept OUT of :where() so this outranks the ISI's own ≤1023px margin rule (margin-block-start:40px, later in source) and the gap stays 0 on mobile too. */ :root :where(main.priovant-home) + .wp-block-template-part { margin-block-start: 0; } :root :where(main.priovant-home) + .wp-block-template-part .priovant-isi { margin-block-start: 0; } /* Enrollment: the blue signing band already carries its own 80px bottom padding, so the shared ISI top gap renders as an empty WHITE strip between the blue and the ISI. Zero both the template-part wrapper block-gap and the ISI margin so the blue section abuts the ISI (same mechanism as the homepage above). */ :root :where(main.priovant-enrollment) + .wp-block-template-part { margin-block-start: 0; } :root :where(main.priovant-enrollment) + .wp-block-template-part .priovant-isi { margin-block-start: 0; } /* Make ISI body + header use px-8 (32px); override the shared 24px inner gutter. */ :root :where(.priovant-isi, .priovant-isi-tray) .alignwide { padding-inline: 32px; } :root :where(.priovant-isi__header) { border-bottom: 1px solid var(--wp--preset--color--lisraya-rule-gray); min-height: 44px; /* Make's header bar is `flex items-center` — center the heading vertically so the min-height slack splits evenly (a block layout pools it at the bottom). */ display: flex; align-items: center; } /* In-body section labels (Indication, Warnings…) — Make renders these 16px bold #333, sentence case (not the small uppercase eyebrow). */ :root :where(.priovant-isi) .is-style-eyebrow { font-size: 1rem; line-height: 1.2; text-transform: none; letter-spacing: normal; margin-bottom: var(--wp--preset--spacing--10); } /* The persistent header title stays UPPERCASE (Make: bold, ls -0.02em). It's the SAME line in the in-page ISI and the docked sticky tray, so both render at the SAME size — Make sizes it at 12px (0.75rem) in BOTH. (The in-page header was previously 16px while only the tray was 12px; corrected 2026-07-08 to 12px for both, per the "same line = same size" call + Make.) */ :root :where(.priovant-isi__header) .is-style-eyebrow, :root :where(.priovant-isi-tray__header) .is-style-eyebrow { font-size: 0.75rem; line-height: 1.2; text-transform: uppercase; letter-spacing: -0.02em; margin-bottom: 0; } /* Generic drug name "brepocitinib" stays lowercase inside the uppercased eyebrow. */ :root :where(.priovant-isi__header) .is-style-eyebrow span, :root :where(.priovant-isi-tray__header) .is-style-eyebrow span { text-transform: none; } :root :where(.priovant-isi__warning) { font-weight: 700; color: #000; letter-spacing: 0.5px; } /* Standard disc bullets (Make: list-disc, pl-5/pl-6). */ :root :where(.priovant-isi ul) { list-style: disc; padding-left: 24px; margin: 0; } :root :where(.priovant-isi ul li) { margin-bottom: 4px; /* Make: risk-factor li mb-1 (4px) */ } /* Boxed-warning list: disc bullets, bold, 12px apart (Make: list-disc, li 700, space-y-3). Self-contained (not scoped to .priovant-isi) so it also styles the collapsed sticky-tray teaser, which lives under .priovant-isi-tray. */ :root :where(.priovant-isi__warning-list) { list-style: disc; padding-left: 24px; margin: 16px 0 0; /* 16px below the warning title (Make boxed title mb-4) */ } /* Tray teaser: a bit more breathing room after the warning before the bullets. */ :root :where(.priovant-isi-tray) .priovant-isi__warning-list { margin-top: 24px; } :root :where(.priovant-isi__warning-list) li { font-weight: 700; margin-bottom: 12px; } /* (No flat opacity on the last teaser bullet — Make fades it via the bottom white gradient overlay only, see .priovant-isi-tray__body::after.) */ /* Pull each subsection's copy up tight under its bold title (Make: title mb-8), while the section blockGap keeps 16px between subsections. A title is a paragraph whose only content is a ; the copy below it is a paragraph without one. */ :root :where(.priovant-isi) p:has(> strong) + p:not(:has(> strong)) { margin-top: var(--wp--preset--spacing--10); /* 8px */ } /* Within a subsection, consecutive copy (and copy → bullet list) also stays at 8px (Make mb-8) — e.g. the Serious infections paragraphs. The boxed-warning title is a bold class (not a ), so guard against it to keep its title→list at 16px. */ :root :where(.priovant-isi) p:not(:has(> strong)):not(.priovant-isi__warning) + p:not(:has(> strong)), :root :where(.priovant-isi) p:not(:has(> strong)):not(.priovant-isi__warning) + ul { margin-top: var(--wp--preset--spacing--10); /* 8px */ } /* The "Important Safety Information" section label sits above the boxed warning with the 16px section rhythm — matching "WARNINGS and PRECAUTIONS:" → "Serious infections." — not the tight 8px title→copy gap the rule above would otherwise give it. */ :root :where(.priovant-isi, .priovant-isi-tray) .priovant-isi__section-label + p { margin-top: var(--wp--preset--spacing--20); /* 16px */ } /* ISI section headings keep their SEMANTIC tag (h3 sections · h4 Limitations) but render at BODY size — matching the bold body-copy labels they replaced — NOT the canonical h3/h4 sizes. (The h2 banner uses .is-style-eyebrow above.) */ :root :where(.priovant-isi, .priovant-isi-tray) .priovant-isi__heading { font-size: 1rem; line-height: 1.2; font-weight: 700; letter-spacing: normal; color: var(--wp--preset--color--lisraya-text); } /* Pull a section heading's following COPY up tight (8px) — like the prior bold-title→copy gap (Adverse Reactions → its paragraph, Limitations of Use → its paragraph). Excludes the boxed-warning section label, which keeps the 16px section rhythm to the WARNING (rule above). */ :root :where(.priovant-isi) .priovant-isi__heading:not(.priovant-isi__section-label) + p:not(:has(> strong)) { margin-top: var(--wp--preset--spacing--10); /* 8px */ } /* Thin gray rule between ISI subsections (Make: 1px #d1d1d1). 16px top margin (matching the 16px below from the next block's gap) gives the inline Indication divider an equal 16/16; on the Adverse Reactions / Drug Interactions dividers — each the first child of a section with 24px padding-top — it stacks to 40px above / 16px below, matching Make's larger section spacing. */ :root :where(.priovant-isi__divider) { height: 1px; background: var(--wp--preset--color--lisraya-rule-gray); margin: 16px 0 0; } /* Sticky-tray peek: WARNING → divider gap must match the in-page ISI's 40px (which comes from the next block group's 24px padding-top + the divider's 16px margin-top). In the tray the divider is a plain sibling of the WARNING paragraph — no group padding — so bump its margin-top to the full 40px. */ :root :where(.priovant-isi-tray) .priovant-isi__divider { margin-top: 40px; } /* The Adverse Reactions / Drug Interactions dividers are each the FIRST child of their section, so the layout zeroes their top margin and they'd only get the section's 24px padding-top. Restore the 16px (→40px above, matching Make's larger section spacing). Specificity here beats the layout's first-child reset. */ :root :where(.priovant-isi) .priovant-isi__divider:first-child { margin-top: 16px; } /* "Not comprehensive" footer note — 16px #333, BOLD (designer 2026-07-10). */ :root :where(.priovant-isi__muted) { font-weight: 700; color: var(--wp--preset--color--lisraya-text); } /* see_pi line (closes Special Populations, under Renal Impairment) — a touch more room above it than the group's blockGap gives (padding, so it's additive, 2026-07-10). */ :root :where(.priovant-isi__seepi) { padding-top: 10px; } /* The ONE Prescribing Information link lives in the closing "Please note…" footer line (.priovant-isi__muted): blue underlined (brand text-link). The see_pi line above it is plain bold body copy, no link (copywriter 2026-07-08). */ :root :where(.priovant-isi__muted) a { color: var(--wp--preset--color--lisraya-blue); text-decoration: underline; } /* Site nav (header) — utility bar + main row + bottom blue divider */ :root :where(.priovant-utility-bar) { background: var(--wp--preset--color--lisraya-utility-bg); font-size: 0.6875rem; font-weight: 600; } :root :where(.priovant-utility-bar a) { color: var(--wp--preset--color--lisraya-blue); text-decoration: none; } :root :where(.priovant-nav) { background-color: var(--wp--preset--color--base); /* opaque so content scrolls under it */ border-bottom: 4px solid var(--wp--preset--color--lisraya-blue); } /* Sticky header. Stick the template-part WRAPPER, not the inner group: a sticky element only travels within its parent's box, and the nav group's parent (
) is exactly its height — no room. The wrapper's parent (.wp-site-blocks) is the tall scroll container, so it sticks. */ header.wp-block-template-part { position: sticky; top: 0; /* Above the sticky ISI tray (also z-index 100, but later in the DOM) so the mobile menu overlay — which lives inside this header's stacking context — covers the tray when open. */ z-index: 110; background-color: var(--wp--preset--color--base); } :root :where(.priovant-nav__logo svg, .priovant-nav__logo img) { width: 160px; max-width: 100%; /* scale down with its lane on very narrow screens */ height: auto; display: block; } /* On phones narrower than the logo + buttons + padding (≲340px), let ONLY the logo shrink so the header still fits — the Sign up + hamburger cluster keeps its fixed size. (Self-limiting: no effect at 360px+, where everything fits.) */ :root :where(.priovant-nav__logo) { min-width: 0; } :root :where(.priovant-nav__right) { flex-shrink: 0; } /* Footer */ :root :where(.priovant-footer__top-rule) { background: var(--wp--preset--color--lisraya-yellow); height: 4px; } /* Make footer uses px-8 (32px); override the shared 24px inner gutter. */ :root :where(.priovant-footer) .alignwide { padding-inline: 32px; } /* Column model (Make): brand fixed 384px, disclaimer fills, links hug their content. (Without widths, WP makes all columns grow equally — these win on specificity.) */ :root :where(.priovant-footer) .wp-block-column.priovant-footer__brand { flex: 0 0 384px; } :root :where(.priovant-footer) .wp-block-column.priovant-footer__disclaimer { flex: 1 1 0%; min-width: 0; } :root :where(.priovant-footer) .wp-block-column.priovant-footer__links { flex: 0 0 auto; width: max-content; } :root :where(.priovant-footer__brand svg, .priovant-footer__brand img) { width: 126px; height: auto; display: block; } /* Brand tagline — bold-blue underlined link, 14px (Make footer tagline). */ :root :where(.priovant-footer__tagline) { margin-top: 14px; margin-bottom: 0; font-size: 0.875rem; font-weight: 700; line-height: 22.75px; letter-spacing: -0.02em; color: var(--wp--preset--color--lisraya-blue); } :root :where(.priovant-footer__tagline a) { color: inherit; text-decoration: underline; } /* Copyright — muted gray, 12px (Make). */ :root :where(.priovant-footer__copyright) { margin-top: 12px; margin-bottom: 0; font-size: 0.75rem; line-height: 19.5px; color: rgba(26, 26, 26, 0.6); } /* Center disclaimer — 12px #333 body, blue underlined inline links (Make). */ :root :where(.priovant-footer__disclaimer) p { font-size: 0.75rem; line-height: 19.5px; color: var(--wp--preset--color--lisraya-text); margin: 0; } /* 12px between the two disclaimer paragraphs (Make line1 margin-bottom). */ :root :where(.priovant-footer__disclaimer) p + p { margin-top: 12px; } :root :where(.priovant-footer__disclaimer a) { color: var(--wp--preset--color--lisraya-blue); text-decoration: underline; } :root :where(.priovant-footer__links a) { color: var(--wp--preset--color--lisraya-blue); font-weight: 700; font-size: 0.875rem; /* Make: 14px */ line-height: 20px; letter-spacing: -0.02em; text-decoration: none; } /* Footer link columns: no disc bullets — they read as a column of links, not a bulleted list. */ :root :where(.priovant-footer__links ul) { list-style: none; padding-left: 0; margin: 0; } :root :where(.priovant-footer__links li) { margin-bottom: 12px; /* Make: gap-3 */ } :root :where(.priovant-footer__links li:last-child) { margin-bottom: 0; } /* ── Revised site footer (homepage / Support / content pages) ── parts/footer-site.html. Three zones in DOM order: brand · disclaimer · nav — which matches BOTH layouts, so no flex `order` is needed. DESKTOP (V4 844:22465): the three sit in a ROW — brand (left, 384) · informational disclaimer (middle, fills ~260 at 1280) · nav/legal link columns (right, ~492). MOBILE (≤1023, V4 844:24545): they stack — brand → disclaimer → links, the links becoming a 2-column grid. Reuses the .priovant-footer__* leaf styles (gold bar, logo, tagline, copyright, disclaimer); the LP keeps the simpler .priovant-footer. */ :root :where(.priovant-footer-site) .alignwide { box-sizing: border-box; padding-inline: 32px; /* Make px-8 */ } :root :where(.priovant-footer-site__body) { display: flex; flex-wrap: wrap; /* below ~1280 the nav wraps to its own row (tablet) */ align-items: flex-start; gap: 40px; padding-block: var(--wp--preset--spacing--60) 40px; /* 64 / 40 (Make pt-16 pb-10) */ } :root :where(.priovant-footer-site__brand) { flex: 0 0 384px; /* V4 brand column */ } :root :where(.priovant-footer-site__disclaimer) { flex: 1 1 220px; /* middle column — fills to ~260 at 1280 (V4) */ } :root :where(.priovant-footer-site__nav) { flex: 0 0 auto; /* hug content on the right (V4 ~492) */ display: flex; gap: 48px; /* Make gap-12 between columns */ flex-wrap: wrap; } :root :where(.priovant-footer-site__col) { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; /* Make gap-3 between links */ } :root :where(.priovant-footer-site__col a) { color: var(--wp--preset--color--lisraya-blue); font-weight: 700; font-size: 0.875rem; /* 14px */ line-height: 20px; letter-spacing: -0.02em; text-decoration: none; white-space: nowrap; } :root :where(.priovant-footer-site__col a:hover), :root :where(.priovant-footer-site__col a:focus-visible) { text-decoration: underline; } @media (max-width: 1023px) { /* Stack: brand → disclaimer → links (DOM order; V4 mobile). */ :root :where(.priovant-footer-site__body) { flex-direction: column; gap: 40px; } :root :where(.priovant-footer-site__brand), :root :where(.priovant-footer-site__disclaimer) { flex: 0 0 auto; } /* Links: 2-column grid — nav1 + nav2 on top, legal wraps under nav1 (V4). */ :root :where(.priovant-footer-site__nav) { gap: 32px 48px; } :root :where(.priovant-footer-site__col) { flex: 0 0 calc(50% - 24px); } :root :where(.priovant-footer-site__col a) { white-space: normal; } } /* 1024–1240: not enough room for brand + paragraph + links in one row. Swap the wider-desktop order — put the LINKS up next to the brand (right-aligned) and drop the disclaimer paragraph to its own full-width row at the bottom. */ @media (min-width: 1024px) and (max-width: 1240px) { :root :where(.priovant-footer-site__nav) { order: 1; margin-inline-start: auto; /* links to the right; brand stays left */ } :root :where(.priovant-footer-site__disclaimer) { order: 2; flex: 1 1 100%; /* paragraph drops full-width to the bottom */ } } /* ============ Nav: desktop utility nav vs mobile hamburger ============ */ /* Utility-bar navigation: small, lisraya-blue, semibold */ :root :where(.priovant-utility-nav) { font-size: 0.6875rem; font-weight: 600; /* No gap between links — Make spaces them purely with each link's 18px side padding (36px text-to-text). The block's default flex gap (32px) would otherwise nearly double that. */ gap: 0; } /* Utility-bar nav links. Higher specificity (no :where) to beat core/navigation's inherited link color (#333). Sizes/spacing track the Make nav. */ .priovant-utility-nav .wp-block-navigation-item__content { /* !important: core/navigation sets link color at higher specificity (.wp-block-navigation:not(.has-text-color) …), same as the mobile-nav rule. */ color: var(--wp--preset--color--lisraya-blue) !important; line-height: 16.5px; letter-spacing: -0.01em; padding: 0 18px; } /* The mobile drawer + its hamburger toggle are hidden on desktop (shown in the ≤1023px block below). */ :root :where(.priovant-drawer-toggle), :root :where(.priovant-drawer) { display: none; } /* 4-segment yellow burst bar at the bottom of the hero (mobile only). Hidden on desktop where the vertical burst graphic lives on the left. */ :root :where(.priovant-hero__burst-bar) { display: none; } /* Mobile drawer toggle: blue 40×40 square, matches the Sign Up button. (display is set by the show/hide rules so the icon centers via flex only when visible.) Hover → darker blue, per Make. */ :root :where(.priovant-drawer-toggle) { width: 40px; height: 40px; flex-shrink: 0; padding: 0; border: 0; border-radius: var(--priovant-radius-sharp); align-items: center; justify-content: center; background-color: var(--wp--preset--color--lisraya-blue); color: var(--wp--preset--color--base); cursor: pointer; transition: background-color 150ms ease; } :root :where(.priovant-drawer-toggle:hover) { background-color: #152b61; } /* Icon morph: hamburger when closed, X when open (Make). */ :root :where(.priovant-drawer-toggle__close) { display: none; } :root :where(.priovant-drawer-toggle[aria-expanded="true"] .priovant-drawer-toggle__open) { display: none; } :root :where(.priovant-drawer-toggle[aria-expanded="true"] .priovant-drawer-toggle__close) { display: block; } /* Mobile utility drawer: in-flow disclosure, full-bleed pale-blue panel that animates open via max-height (set to scrollHeight in nav-drawer.js). */ :root :where(.priovant-drawer) { max-width: none; /* escape the constrained-layout content cap */ width: 100%; max-height: 0; overflow: hidden; background-color: var(--wp--preset--color--lisraya-utility-bg); /* Make drawer fill */ /* visibility:hidden when collapsed removes the links from the tab order + a11y tree (WCAG 4.1.2); delayed 300ms so the collapse animates first. */ visibility: hidden; transition: max-height 300ms ease-in-out, visibility 0s linear 300ms; } :root :where(.priovant-drawer.is-open) { visibility: visible; transition: max-height 300ms ease-in-out, visibility 0s linear 0s; } :root :where(.priovant-drawer__list) { max-width: var(--wp--style--global--wide-size); margin: 0 auto; padding: 8px 24px; list-style: none; display: flex; flex-direction: column; } :root :where(.priovant-drawer__item) { border-bottom: 1px solid #c7deff; /* Make row divider */ } :root :where(.priovant-drawer__item:last-child) { border-bottom: 0; } :root :where(.priovant-drawer__link) { display: block; padding: 14px 8px; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; color: var(--wp--preset--color--lisraya-blue); text-decoration: none; } :root :where(.priovant-drawer__link:hover) { color: #152b61; } /* ============ Sticky ISI tray (every page; auto-hides when full ISI in view) ============ */ /* The ISI-tray template part renders in the flow after the footer; its inner tray is fixed, so the wrapper is empty — but it still picks up the layout's blockGap as a top margin, leaving ~32px of dead space below the footer. Zero it. */ .wp-block-template-part:has(.priovant-isi-tray) { margin-block-start: 0; } :root :where(.priovant-isi-tray) { position: fixed; bottom: 0; left: 0; right: 0; z-index: 100; display: flex; flex-direction: column; max-height: 280px; /* collapsed: header + teaser */ background-color: var(--wp--preset--color--base); border-top: 3px solid var(--wp--preset--color--lisraya-isi-border); box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08); transition: max-height 300ms ease, transform 200ms ease-out, opacity 200ms ease-out; } :root :where(.priovant-isi-tray.is-hidden) { transform: translateY(100%); opacity: 0; pointer-events: none; } /* Expanded (desktop): grown from the bottom to leave a constant 240px gap at the top at any window height — so the header + hero stay visible above it. Mobile overrides this to a full-screen cover just below. */ :root :where(.priovant-isi-tray.is-expanded) { max-height: calc(100dvh - 240px); } @media (max-width: 1023px) { /* Mobile: the expanded tray covers the full screen (Make's full-screen mode). Lift it above the sticky header (z-index 110) so it actually covers the header instead of opening behind it. Only the EXPANDED mobile tray does this — collapsed it stays at z-index 100 so the header keeps the mobile nav overlay above the tray; desktop expanded also stays below (it intentionally tucks under the header, leaving a 240px gap). */ :root :where(.priovant-isi-tray.is-expanded) { max-height: 100dvh; z-index: 120; } } /* Google reCAPTCHA badge (injected by the external dev's form JS on the form pages) is `position:fixed` in the root stacking context — the SAME layer as the collapsed ISI tray (z-index 100), so it gets lost behind it. Lift it clear. We DON'T touch the ISI/header z-indexes: they're balanced against each other (see above) and nudging ours reintroduced the sticky-header conflict. Matches the CookieYes badge on the opposite corner (999999). `!important` because the badge carries Google-injected inline styling we don't control. */ .grecaptcha-badge { z-index: 999999 !important; } /* Full ISI (cloned from #priovant-isi-section) — hidden until expanded, then the scrollable region; the teaser is swapped out. */ :root :where(.priovant-isi-tray__full) { display: none; } :root :where(.priovant-isi-tray.is-expanded) .priovant-isi-tray__body, :root :where(.priovant-isi-tray.is-collapsing) .priovant-isi-tray__body { display: none; } :root :where(.priovant-isi-tray.is-expanded) .priovant-isi-tray__full, :root :where(.priovant-isi-tray.is-collapsing) .priovant-isi-tray__full { display: block; flex: 1 1 auto; min-height: 0; } /* Only while EXPANDED does the clone scroll (real scrollbar) + reserve a matching gutter, so its centered ISI column insets ~gutter/2 to align with the header (below). */ :root :where(.priovant-isi-tray.is-expanded) .priovant-isi-tray__full { overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; } /* While COLLAPSING, drop the scrollbar (overflow:hidden, no gutter) so the clone's copy returns to its natural centered position AT THE START of the collapse — during the shrink, masked — rather than staying inset until transitionend and then jumping when the (non-inset) teaser body swaps back in. Pairs with the header rule below (also released at collapse-start). 2026-07-09. */ :root :where(.priovant-isi-tray.is-collapsing) .priovant-isi-tray__full { overflow: hidden; } /* Expanded-tray alignment fix: the scrollable __full clone above reserves a vertical scrollbar gutter, which narrows its content and shifts its CENTERED ISI column ~gutter/2 left of the header's centered banner (visible only with classic/space-taking scrollbars, above 1280 where the column centers — headless/overlay scrollbars don't show it). Reserve a MATCHING gutter on the (non-scrolling) header while expanded, so the banner and the copy center in the same width and stay left-aligned. overflow:hidden makes the gutter reserve. Scoped to `is-expanded` ONLY (NOT `is-collapsing`): the gutter is added on open and released the instant collapse STARTS (is-expanded removed), so its ~gutter/2 shift happens during the grow/shrink motion — masked, and symmetric on open + close. Including `is-collapsing` here held the gutter through the whole collapse and released it at transitionend, which made the banner + chevron snap ~7.5px right as a naked jump AFTER the tray had settled (2026-07-09). */ :root :where(.priovant-isi-tray.is-expanded) .priovant-isi-tray__header { overflow: hidden; scrollbar-gutter: stable; } /* The clone is a copy of the in-page section; drop its standalone top border. */ :root :where(.priovant-isi-tray__full.priovant-isi) { border-top: 0; } /* Chevron points down when collapsed, flips up when the tray is expanded. */ :root :where(.priovant-isi-tray__expand svg) { transition: transform 200ms ease; } :root :where(.priovant-isi-tray.is-expanded) .priovant-isi-tray__expand svg { transform: rotate(180deg); } :root :where(.priovant-isi-tray__header) { border-bottom: 1px solid var(--wp--preset--color--lisraya-rule-gray); /* Never let the flex column shrink the docked header: when the EXPANDED tray's cloned ISI overflows the tray max-height, flexbox would otherwise shave a few px off this header too — and since the expanded header is overflow:hidden (the scrollbar-gutter alignment fix), that shaved height CLIPS the banner text so the gray border-bottom slices through it. flex-shrink:0 keeps the header at its natural height; __full (flex:1 1 auto, overflow-y:auto) absorbs all the overflow via scroll. */ flex-shrink: 0; } /* Body teaser: shows the top of the ISI content (WARNING + first paragraphs). Clipped to a fixed height so it doesn't overwhelm the viewport. Fade-to-white gradient at the bottom suggests "more content below". */ :root :where(.priovant-isi-tray__body) { position: relative; /* Fixed-size peek: min-height paired with max-height so the box is always 144px regardless of how much content is inside. Prior to the verbatim ISI strip, the WARNING title + 2 summary bullets naturally filled 144px and the bottom-fade gradient masked the clip; without the bullets the body would shrink to content-height and the tray would read as short. */ min-height: 144px; max-height: 144px; /* Make: HEIGHT_PARTIAL (at the top of the page) */ overflow: hidden; font-size: 1rem; /* Make: 16px legal text */ line-height: 1.2; /* Make: 1.2 */ color: var(--wp--preset--color--lisraya-text); transition: max-height 300ms ease; } /* Scroll-responsive collapsed teaser (Make): full HEIGHT_PARTIAL (144px) only at the top of the page; once the user scrolls down, shrink the teaser to HEIGHT_MINIMIZED (68px ≈ the boxed-warning headline) since the sticky header has taken the top space. Restores when they scroll back to the top. `assets/isi-tray.js` toggles `.is-minimized` by scroll position; `:not(.is-expanded)` so opening the full ISI is unaffected (the teaser body is hidden while expanded). */ :root :where(.priovant-isi-tray.is-minimized:not(.is-expanded)) .priovant-isi-tray__body { /* min pins the scrolled peek at 68px too — same reason as the page-top rule above: fixed box regardless of content amount. */ min-height: 68px; max-height: 68px; } :root :where(.priovant-isi-tray__body)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 48px; pointer-events: none; background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%); } /* Expand toggle (Make): 28×28 white square, 2px blue (#00529B) border, dark-blue (#152B61) chevron via currentColor. Hover/active fills blue with a white chevron. */ :root :where(.priovant-isi-tray__expand) { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 2px solid var(--wp--preset--color--lisraya-blue); background-color: var(--wp--preset--color--base); color: var(--wp--preset--color--lisraya-isi-border); border-radius: 2px; cursor: pointer; transition: background-color 150ms ease, color 150ms ease; } :root :where(.priovant-isi-tray__expand:hover), :root :where(.priovant-isi-tray__expand:focus-visible) { background-color: var(--wp--preset--color--lisraya-blue); color: var(--wp--preset--color--base); } /* (Body padding-bottom for sticky-tray clearance is defined further down with a `:has()` rule so the gap collapses when the tray is hidden.) */ /* ============ Global mobile breakpoint = 1023px ============ This theme uses a SINGLE mobile breakpoint of 1023px (not WP core's default 781px). Force core/columns to stack at ≤1023px — core only stacks them at ≤781px, so without this they'd stay side-by-side from 782–1023px. `!important` mirrors core's own stacking rule and is needed to beat the inline flex-basis widths set on the columns. */ @media (max-width: 1023px) { :root :where(.wp-block-columns:not(.is-not-stacked-on-mobile)) { flex-wrap: wrap !important; } :root :where(.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column) { flex-basis: 100% !important; } } /* ============ Mobile responsive overrides (≤ 1023px) ============ */ @media (max-width: 1023px) { /* Shorter sticky header on mobile (no utility bar) → smaller scroll offset. */ :root :where(#signup) { scroll-margin-top: 110px; } /* Tighter page + section breathing room on mobile (matches the hero's 40px). */ :root :where(.priovant-page), :root :where(.priovant-section) { padding-block: 40px; } /* ISI top gap matches the mobile section rhythm (40px). */ :root :where(.priovant-isi:not(.priovant-isi-tray__full)) { margin-block-start: 40px; } /* Hide the desktop burst + gold gutter on mobile per Figma mobile design (the 4-segment burst bar below the hero carries the brand accent instead). */ :root :where(.priovant-hero__burst), :root :where(.priovant-hero__gutter) { display: none; } /* Tighter hero top padding on mobile (Make: pt 40px). Drop the bottom padding so the full-width 4-segment burst bar sits flush at the section's bottom edge (Make cancels pb-80 with the bar's -80 margin); the gold rule then sits right below the bar instead of 80px under it. */ :root :where(.priovant-hero) { padding-top: 40px; padding-bottom: 0; } /* When the burst column collapses, the text column should also drop its big flex-basis so the text uses full width. core/columns are force-stacked at ≤1023px (above); this guards against any leftover flex-basis on a fixed-width lane. */ :root :where(.wp-block-columns .wp-block-column[style*="flex-basis:140px"]) { display: none; } /* Show the 4-segment yellow burst bar at the bottom of the hero. Replaces the vertical-on-left burst graphic which is hidden on mobile. */ :root :where(.priovant-hero__burst-bar) { display: block; min-height: 24px; height: 24px; background: linear-gradient(to right, var(--wp--preset--color--lisraya-yellow) 0 25%, var(--wp--preset--color--lisraya-gold-2) 25% 50%, var(--wp--preset--color--lisraya-gold-3) 50% 75%, var(--wp--preset--color--lisraya-gold-4) 75% 100%); } /* Footer columns stack on mobile; let the fixed-width ones take full width. */ :root :where(.priovant-footer__brand), :root :where(.priovant-footer__links) { flex-basis: 100% !important; } /* H1 stays the documented 48px (`hero` token) at ALL widths — the responsive 36px mobile step was removed (designer direction). overflow-wrap + the headline's soft hyphens (e.g. "dermatomyositis") guard a long word from forcing horizontal scroll at 48px on narrow screens. */ :root :where(.priovant-hero h1, .priovant-page h1) { overflow-wrap: break-word; } /* Hero lead stays the fixed 24px `lead` size at all widths (no mobile step-down). The gap before a second lead block matches the design's blank line (24px). */ :root :where(.priovant-hero__content p.has-lead-font-size + p.has-lead-font-size) { margin-block-start: 24px; } } /* ⚠ RETIRED 2026-08-07 (Phase 46 + 50): the LP header no longer emits a core/button (.wp-block-button__link) — Phase 46 (821f1e0) swapped it for two .priovant-btn anchors (Enroll patients + Speak to a rep) inside a wp:html block. The block below is dead code, kept for reference. If you need to change nav-CTA styling, edit the .priovant-nav__right .priovant-btn override (grep 'nav-tight vertical geometry'). Safe to delete this block in a dedicated CSS-cleanup pass — verify no wp:button inside .priovant-nav__right remains first. */ /* Sign Up button — canonical PRIMARY (Button States chart): solid Brand Blue default with an (invisible) blue border, sharp 0 radius, white+Navy hover, #003d7a active. Keeps the nav-tight 52px geometry (14px py + 2px border + 20px line; 16px px + 2px border = the Make's 18px side inset). Non-:where to beat the theme.json button padding. Matches the site-header Sign Up. */ .priovant-nav__right .wp-block-button__link { white-space: nowrap; padding: 14px 16px; border: 2px solid var(--wp--preset--color--lisraya-blue); border-radius: var(--priovant-radius-sharp); line-height: 20px; letter-spacing: -0.02em; transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease; } /* Hover/focus = canonical Primary: white fill, Brand Blue (#00529b) text + border (inverse of Outline; was Navy, changed 2026-07-13). !important beats WP's preset color classes (.has-*-background-color / .has-*-color), emitted with !important, which would otherwise keep it blue. */ .priovant-nav__right .wp-block-button__link:hover, .priovant-nav__right .wp-block-button__link:focus-visible { background-color: var(--wp--preset--color--base) !important; color: var(--wp--preset--color--lisraya-blue) !important; border-color: var(--wp--preset--color--lisraya-blue); } /* Active = canonical: darker Brand Blue #003d7a fill, white text. */ .priovant-nav__right .wp-block-button__link:active { background-color: var(--priovant-btn-active) !important; color: var(--wp--preset--color--base) !important; border-color: var(--priovant-btn-active); } /* Mobile: match the 40px hamburger height (8px py + 20 line + 2px border). Header-scoped breakpoint bumped from 1023 → 1279 (2026-08-07) to match the sibling site-header block — keeps LP header button geometry consistent through the same width band where the mobile menu now triggers. */ @media (max-width: 1279px) { .priovant-nav__right .wp-block-button__link { padding-top: 8px; padding-bottom: 8px; } } /* LP-header mobile show/hide — extracted from the omnibus mobile block (≤1023) at ~line 1565 and given the header-scoped 1279 breakpoint (2026-08-07). The utility bar, drawer toggle, and drawer itself all key off the header's wider mobile band; the rest of the omnibus block (hero padding, ISI, page padding, footer columns) stays at 1023 per the global convention. */ @media (max-width: 1279px) { /* Hide the desktop utility bar; the same links live in the mobile drawer that the hamburger toggle reveals. */ :root :where(.priovant-utility-bar) { display: none; } /* Show the mobile-only drawer toggle + drawer. */ :root :where(.priovant-drawer-toggle) { display: inline-flex; } :root :where(.priovant-drawer) { display: block; } /* Move Speak to a rep out of the LP header row on mobile — its equivalent renders as .priovant-drawer__cta at the top of the drawer instead. Bare descendant chain (specificity 0,2,0) beats the base .priovant-btn's inline-flex at 0,1,0 regardless of source order. */ .priovant-nav__right .priovant-btn--outline { display: none; } } /* Full-width menu CTAs — the "Speak to a rep" button that lives at the top of the mobile menu (overlay on site header, drawer on LP header). Layered on top of .priovant-btn.priovant-btn--primary geometry: block-level + full width so it fills the menu column. Only rendered inside the mobile menu, which is itself only visible ≤1279 — so no @media wrapper needed here. */ :root :where(.priovant-siteheader__overlay-cta), :root :where(.priovant-drawer__cta) { display: block; width: 100%; margin: 0 0 24px 0; text-align: center; } /* Header-row CTA nav-tight vertical geometry — restore the 52/40 heights the header used pre-Phase 46, when the site header ran .priovant-siteheader__signup and the LP header ran .priovant-nav__right .wp-block-button__link. Phase 46's switch to canonical .priovant-btn (16px py + 21px line = 57px flat) lost the header's compact rhythm and misaligned the mobile CTA vs the 40×40 hamburger. Height-only override — horizontal padding stays at the canonical 30px so the buttons don't visibly shrink in width. Specificity 0,2,0 beats the base .priovant-btn :where rule (0,1,0). Restricted to header right-clusters so the full-width menu CTAs above (.priovant-siteheader__overlay-cta / .priovant-drawer__cta) keep the full canonical .priovant-btn touch target. */ .priovant-siteheader__right .priovant-btn, .priovant-nav__right .priovant-btn { padding-block: 14px; line-height: 20px; /* → 14 + 20 + 14 + 4 border = 52px desktop */ } @media (max-width: 1279px) { .priovant-siteheader__right .priovant-btn, .priovant-nav__right .priovant-btn { padding-block: 8px; /* → 8 + 20 + 8 + 4 border = 40px mobile — matches the hamburger */ } } /* ============ Reusable CTA buttons (Make primary-button / outline-button) ============ The .is-style-priovant-{primary,outline} core/button BLOCK STYLES (registered in functions.php). Used on any core/button across pages — incl. the GENERATED PATTERNS (theme/patterns/*.php emit these classes) + the LP CTA. - Primary: solid lisraya-blue, white text; hover → white bg, #00529b text/border. - Outline: white bg, lisraya-blue border + text; hover → blue fill, white text. (Primary hover is the exact inverse of Outline — both pivot on Brand Blue #00529b.) Both: 2px border, sharp (0) radius, 14px/700/-0.02em, 21px line-height, padding 16px 30px. ⚠ DRIFT GUARD: these DUPLICATE the canonical .priovant-btn treatment (CANONICAL BUTTON SYSTEM, ~L5022). Colors + radius share tokens (lisraya-blue / --priovant-btn-active / --priovant-radius-sharp) so those propagate automatically — but the GEOMETRY LITERALS (16px 30px · 21px LH · 14px · -0.02em) are copied here. Change the canonical geometry → change these too (and vice-versa). Keep the state colors identical to the chart. */ :root :where(.wp-block-button.is-style-priovant-primary .wp-block-button__link) { background-color: var(--wp--preset--color--lisraya-blue); color: var(--wp--preset--color--base); border: 2px solid var(--wp--preset--color--lisraya-blue); border-radius: var(--priovant-radius-sharp); padding: 16px 30px; font-size: 0.875rem; font-weight: 700; line-height: 21px; letter-spacing: -0.02em; transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease; } :root :where(.wp-block-button.is-style-priovant-primary .wp-block-button__link):hover, :root :where(.wp-block-button.is-style-priovant-primary .wp-block-button__link):focus-visible { background-color: var(--wp--preset--color--base); color: var(--wp--preset--color--lisraya-blue); border-color: var(--wp--preset--color--lisraya-blue); } :root :where(.wp-block-button.is-style-priovant-primary .wp-block-button__link):active { background-color: var(--priovant-btn-active); color: var(--wp--preset--color--base); border-color: var(--priovant-btn-active); } :root :where(.wp-block-button.is-style-priovant-outline .wp-block-button__link) { background-color: var(--wp--preset--color--base); color: var(--wp--preset--color--lisraya-blue); border: 2px solid var(--wp--preset--color--lisraya-blue); border-radius: var(--priovant-radius-sharp); padding: 16px 30px; font-size: 0.875rem; font-weight: 700; line-height: 21px; letter-spacing: -0.02em; transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease; } :root :where(.wp-block-button.is-style-priovant-outline .wp-block-button__link):hover, :root :where(.wp-block-button.is-style-priovant-outline .wp-block-button__link):focus-visible { background-color: var(--wp--preset--color--lisraya-blue); color: var(--wp--preset--color--base); } :root :where(.wp-block-button.is-style-priovant-outline .wp-block-button__link):active { background-color: var(--priovant-btn-active); border-color: var(--priovant-btn-active); color: var(--wp--preset--color--base); } /* VALOR card top-bar: ensure it renders at EXACTLY 8px (theme.json's default group padding can otherwise inflate the empty group). */ :root :where(.priovant-card__bar) { background: var(--wp--preset--color--lisraya-blue); height: 8px; min-height: 8px; padding: 0; overflow: hidden; } /* Body bottom-clearance for the sticky tray — only apply the 200px gap while the tray is visible. When the tray is hidden (user has reached or passed the full ISI), drop the clearance so the footer flows up without a giant gap below it. */ body { padding-bottom: 0; transition: padding-bottom 200ms ease-out; } body:has(.priovant-isi-tray:not(.is-hidden)) { padding-bottom: 200px; } /* ============ CTA "Getting patients started" — layout per the Make file ============ */ :root :where(.priovant-cta) { padding-top: 80px; padding-bottom: 80px; } :root :where(.priovant-cta .priovant-card) { padding: 80px 112px; } /* Make rhythm: 16px after the H2, 20px between the other blocks. */ :root :where(.priovant-cta .priovant-card) > * + * { margin-top: 20px; } :root :where(.priovant-cta .priovant-card) > h2 + * { margin-top: 16px; } /* Body intro paragraph is a touch darker than the rest (Make: #1A1A1A vs #333). */ :root :where(.priovant-cta .priovant-card) > p:first-of-type { color: var(--wp--preset--color--lisraya-ink); } /* Download button: 16px / 29px padding, tight tracking (Make). */ .priovant-cta .wp-block-button__link { padding: 16px 29px; letter-spacing: -0.02em; } @media (max-width: 1023px) { :root :where(.priovant-cta) { padding-top: 40px; padding-bottom: 40px; } :root :where(.priovant-cta .priovant-card) { padding: 40px 24px; } /* Below the mobile burst, Make has no inter-section gap: the gold rule sits flush at the hero's bottom and the CTA section's top padding is the only spacer. Collapse our 32px gap (rule margin + section blockGap) so the space below the burst equals the CTA's padding-top exactly. */ :root :where(.priovant-hero__rule) { margin-bottom: 0; } :root :where(.priovant-cta) { margin-top: 0; } } /* Make's `sm:` breakpoint (640px): the space below the burst grows 40px → 80px (CTA `py-10 sm:py-20`). This is the one place Make breaks at 640px rather than the theme's usual 1024px boundary — replicated here per the design. */ @media (min-width: 640px) and (max-width: 1023px) { :root :where(.priovant-cta) { padding-top: 80px; } } /* ============ CTA: Docusign enrollment placeholder (FPO) ============ */ /* ============ Content Highlight — editable callout box (Make ComponentLibrary) ============ A full-bleed section (own 80/40 rhythm) centering a FULL-WIDTH `.priovant-highlight__box` (H4 heading + body, 3 surface variants: blue tint / outline / white). Padding 40/80 (Make), 2px content radius, the content-card drop shadow. All text = native editable blocks; variant = a class on the box. WIDTH (fixed 2026-07-15): Make shows the box FILLING its container full-width. The section uses FLOW layout (not `constrained`) — constrained was capping the box at contentSize (720px); flow + the box's own max-width = wideSize (1280) is the intended full width. The section's 24px padding-inline is the min side gutter so the bordered box never touches the edge < 1280. */ :root :where(.priovant-highlight) { padding-block: 80px; padding-inline: 24px; } /* Support-only: 40px section bottom (per review 2026-07-15). The component keeps its canonical 80 elsewhere — Content Highlight is Support-only today, but scope it so a future page's highlight isn't silently tightened. */ .priovant-support .priovant-highlight { padding-bottom: 40px; } :root :where(.priovant-highlight__box) { box-sizing: border-box; max-width: var(--wp--style--global--wide-size); /* 1280 — full content width */ margin-inline: auto; padding: 40px 80px; border-radius: var(--priovant-radius-subtle); box-shadow: 0 2px 15px rgba(0, 82, 155, 0.1); } :root :where(.priovant-highlight--blue) { background-color: var(--wp--preset--color--lisraya-utility-bg); } :root :where(.priovant-highlight--outline) { background-color: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--lisraya-blue); } :root :where(.priovant-highlight--white) { background-color: var(--wp--preset--color--base); } :root :where(.priovant-highlight__heading) { margin: 0 0 12px; font-size: 1.375rem; /* 22px — H4 design, pinned regardless of the tag/level */ font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; color: var(--wp--preset--color--lisraya-blue); } :root :where(.priovant-highlight__body) { margin: 0; font-size: 1rem; line-height: 1.625; color: var(--wp--preset--color--lisraya-text); } /* Multiple body paragraphs (blockGap:0 box) get their own rhythm. */ :root :where(.priovant-highlight__body + .priovant-highlight__body) { margin-top: 16px; } @media (max-width: 1023px) { :root :where(.priovant-highlight) { padding-block: 40px; } :root :where(.priovant-highlight__box) { padding: 32px 24px; /* tighter inner padding on mobile */ } } /* White panel with the 8px lisraya-blue top bar (.priovant-card__bar). Swap the inner __frame contents for the real Docusign