/* ============================================================ PROTRITION LABS — FLUID / INTRINSIC LAYER ------------------------------------------------------------ Loaded AFTER styles.css. This is the "Atria-style" upgrade: everything sizes against the window with clamp() so the page scales continuously instead of jumping at breakpoints, plus a couple of container queries so components respond to their own slot — not just the global screen width. The whole story lives in tokens. Tweak the three numbers in a clamp() — min, preferred(vw), max — and the entire page rebreathes. clamp( MIN , PREFERRED:scales-with-window , MAX ) ============================================================ */ :root { /* ---- Fluid vertical rhythm ---------------------------------- Replaces the fixed 180px / 240px / 96px section paddings. Small windows get tighter air; large windows get generous full-page breathing room — the core "fills the page" feel. */ --space-section: clamp(64px, 10vw, 200px); --space-section-xl: clamp(96px, 14vw, 280px); --space-gap-lg: clamp(36px, 6vw, 110px); /* Workhorse section padding token used by .section-split etc. */ --section-v: clamp(64px, 9vw, 160px); /* ---- Fluid gutters ----------------------------------------- One continuous ramp replaces the 48 / 32 / 24 breakpoint steps. Tightened so content sits closer to the window edges. */ --gutter: clamp(16px, 3vw, 40px); /* ---- Fluid measure ----------------------------------------- Container grows with the window (up to a cap) so wide monitors are used instead of being framed by dead margins. Wider cap + more vw lets the content reach further toward the edges. */ --max-w: 1920px; /* ---- Fluid type tokens ------------------------------------- Lead/body copy now scales gently with the window too, so line length and rhythm hold across sizes. */ --text-lg: clamp(1.05rem, 0.7rem + 0.9vw, 1.45rem); /* Display headline used by the intro ("Moving Wellness Forward") */ --fl-h2-display: clamp(2.6rem, 1.4rem + 4.6vw, 5.2rem); /* ---- Inner-page section rhythm ----------------------------- The subpages hand-roll their own fixed section paddings (140 / 120 / 200 / 160 / 80 px). These tokens map each of those onto a fluid ramp so every page breathes consistently. */ --space-sec: clamp(72px, 10vw, 150px); /* ≈ 140 standard band */ --space-sec-sm: clamp(56px, 8vw, 120px); /* ≈ 120 tighter band */ --space-sec-lg: clamp(80px, 11vw, 172px); /* ≈ 160 generous band */ --space-sec-xs: clamp(48px, 7vw, 104px); /* ≈ 100/110 short band */ --space-sec-top: clamp(108px, 14vw, 200px); /* ≈ 200 intro top */ --space-sec-tiny: clamp(40px, 6vw, 80px); /* ≈ 72/80 slim band */ /* Mid grid gap (was a fixed 80px on subpage grids) */ --space-gap-md: clamp(32px, 5vw, 80px); } /* ------------------------------------------------------------ CTA band — fluidize its fixed 96px vertical padding so it keeps pace with the rest of the page's rhythm. ------------------------------------------------------------ */ .cta-band { padding: var(--space-section) 0; } /* ------------------------------------------------------------ INTRO HEADLINE — was a hard 64px; now scales with the window. (Targets the inline-styled .mwf-heading on index.html.) ------------------------------------------------------------ */ .home-intro-grid > .mwf-heading { font-size: clamp(3rem, 5.2vw, 6rem) !important; /* sized to hold two lines in its column */ } /* ============================================================ CONTAINER QUERIES — component-level response ------------------------------------------------------------ These make components answer to the width of THEIR slot rather than the global screen. The stat row collapses when its own column gets narrow, even if the window is still wide — exactly the behaviour that reads as "components responding to size". ============================================================ */ /* The stat row reports its own inline size to its children. */ .home-stats { container: home-stats / inline-size; } /* When the stat row's slot drops below ~560px, restack to a single column and recentre — independent of any screen breakpoint. */ @container home-stats (max-width: 560px) { .home-stats__inner { grid-template-columns: 1fr !important; gap: 24px !important; text-align: center !important; } .home-stats__inner > div { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-bottom: 20px; border-bottom: 1px solid rgba(47, 59, 46, 0.12); } .home-stats__inner > div:last-child { padding-bottom: 0; border-bottom: none; } } /* ============================================================ INTRINSIC SPLIT SECTIONS ------------------------------------------------------------ The two-column image/text blocks key off their own width and collapse to a single column when the available space gets tight, instead of relying solely on a global 768px media query. ============================================================ */ .section-split__inner { container: split / inline-size; } @container split (max-width: 720px) { .section-split__inner { grid-template-columns: 1fr !important; gap: clamp(28px, 6vw, 48px) !important; direction: ltr !important; } /* let the image sit above the copy and not tower on small slots */ .section-split__img { aspect-ratio: 16 / 10 !important; } } /* ============================================================ GOING GLOBAL — make the globe grow with the window ------------------------------------------------------------ The three.js globe uses a fixed-distance perspective camera, so its on-screen size tracks the canvas HEIGHT only — widen the section and the globe just floats in empty side-bands. Driving the canvas height off viewport WIDTH (vw) makes the globe scale up as the window grows, so the section reads as fluid as everything else. Desktop-only so the existing mobile height rules in styles.css stay intact. ============================================================ */ @media (min-width: 769px) { .globe-stage__canvas-wrap { height: clamp(460px, 42vw, 880px); } } /* ============================================================ CENTERED INTRO / LEAD MEASURES — grow with the window ------------------------------------------------------------ The subpages' centered intro blocks (Going Global lead, the "partner" intros, section heads, etc.) are pinned to a fixed max-width, so they stop widening while the rest of the page keeps going. Swap those caps for a fluid measure that tracks the viewport and still tops out for comfortable reading. Two tiers so the wider (~900px) wrappers never shrink below their start size. ============================================================ */ /* Tier 1 — leads, bodies & section heads (were ~620–760px) */ .globe-section__lead, .pd-intro__body, .pd-disciplines__head, .pd-services__head, .pd-partner__head, .pd-partner__intro, .pd-process__head, .pd-process__intro, .cap-forms__desc, .cap-certs__head, .cap-certs__body, .bs-intro__body, .bs-rfq__body { max-width: clamp(760px, 56vw, 1040px) !important; } /* Tier 2 — the wider centered wrappers (were ~900px) */ .pd-intro__inner, .bs-intro__inner, .bs-rfq__inner { max-width: clamp(900px, 60vw, 1160px) !important; } /* ============================================================ HEADING SCALE — bigger on the fluid layout ------------------------------------------------------------ The three h2 utilities live in styles.css (shared with the non-fluid baseline). Override them here so only the -fluid pages get the larger, wider-scaling type — the baseline stays put for honest A/B comparison. More vw + higher caps so the headings keep growing with the window like the rest of the page. ============================================================ */ .h2-display { font-size: clamp(3.2rem, 6vw, 5.6rem); /* ~51 → 90px */ } .h2-section { font-size: clamp(2.6rem, 4.6vw, 4.6rem); /* nudged up a tad */ } /* Homepage split/full/cta-band section headings are plain

s (not .h2-section), styled smaller in styles.css. Match them to .h2-section so the homepage section titles scale like the inner pages. */ .section-split__text h2, .section-full h2, .cta-band__text h2 { font-size: clamp(2.6rem, 4.6vw, 4.6rem); } .h2-card { font-size: clamp(1.7rem, 2.8vw, 2.6rem); /* ~27 → 42px */ } /* ------------------------------------------------------------ CARD-HEADING type (fluid only) — unify ALL card-level headings onto DM Sans for a consistent, modern label voice. These bespoke classes live in each page's own