/* ========================================================================= Triple Bio - responsive stylesheet Design baseline: Figma 1728px wide. Sections use normal flow + grid/flex. Decorative diagonal overlays use absolute positioning inside the section. Type and spacing scale fluidly from mobile to desktop via clamp(). ========================================================================= */ :root { --ink: #1c1d23; --cream: #fffcfa; --yellow-pale: #f4ffd3; --yellow: #fff27a; --mint: #e5fff4; --mint-pale: #eafff1; --white: #ffffff; --line: #1c1d23; --line-on-dark: #eafff1; --font: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --gutter: max(20px, 5vw); --rule-x: max(16px, 3vw); } * { box-sizing: border-box; } html { scroll-behavior: smooth; background: var(--cream); } body { margin: 0; width: 100%; overflow-x: hidden; color: var(--ink); font-family: var(--font); background: var(--cream); font-kerning: normal; font-optical-sizing: auto; font-feature-settings: "kern" 1, "liga" 1; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; height: auto; } button, input, textarea, select { font: inherit; color: inherit; } /* Tight design line-heights leave the line-box edge close to the baseline, so descenders (g, y, p) get clipped by parents with overflow:hidden. Reserve a sliver below every heading. */ h1, h2, h3, h4, h5, h6 { padding-bottom: 0.12em; } .site { width: 100%; margin: 0 auto; background: var(--cream); } .section { position: relative; width: 100%; overflow: hidden; } /* Vertical rule that runs down the left edge of most sections */ .section.has-rule::before { content: ""; position: absolute; z-index: 4; top: 0; bottom: 0; left: var(--rule-x); width: 1px; background: var(--line); pointer-events: none; } /* ----------------------------------------------------------------------- Utilities: eyebrow, button, launch-hidden ----------------------------------------------------------------------- */ .eyebrow { margin: 0; font-size: max(11px, 1.33vw); font-weight: 700; line-height: 1; text-transform: uppercase; } /* Pre-launch toggle: anything tagged .launch-hidden disappears while the body still carries .launch-mode. Flip the body class off post-launch to expose every hidden CTA / nav item without re-editing markup. */ body.launch-mode .launch-hidden { display: none !important; } /* Figma: Get in touch / Find out how / Get in touch to find out more etc. All buttons share: 21.43px Figtree Bold (700), color #f4ffd3 (yellow-pale), bg #1c1d23 (ink), parallelogram clip-path. Height 59.83 ≈ 60. */ .btn { /* --btn-h MUST equal the button's actual rendered height so the clip-path slope matches the 30°-from-vertical site diagonals (slope = 1 / √3 ≈ 0.5774). That means folding the 52px tap-target floor INTO --btn-h, not as a separate min-height — otherwise on small viewports the rendered height (52) wouldn't match the clip-path's --btn-h (48) and the slope would drift. Any button variant that changes its own height (e.g. .hero-btn, .approach-btn at mobile) must redefine --btn-h to its own rendered height. */ --btn-h: max(52px, 3.46vw); --btn-slope: calc(var(--btn-h) / 1.7320508); display: inline-flex; align-items: center; justify-content: center; min-width: 200px; min-height: var(--btn-h); height: var(--btn-h); padding: 0 max(36px, 3.13vw); color: var(--yellow-pale); background: var(--ink); font-family: var(--font); font-size: 18px; font-weight: 700; text-transform: uppercase; white-space: nowrap; clip-path: polygon(var(--btn-slope) 0, 100% 0, calc(100% - var(--btn-slope)) 100%, 0 100%); } .btn:hover { opacity: 0.92; } /* ======================================================================= Section 1 - Hero ======================================================================= */ /* --hero-top / --hero-bot: right edge of the ink diagonal shape at the top/bottom of the section, as % of hero width. Measured from the actual Figma asset (98:663 AdobeStock vector, alpha edge analyzed numerically): - Slope = -1/√3 → 30° from vertical - At 1728×1126 Figma frame: top edge crosses x=1064.38 (61.6%), bottom crosses x=414.89 (24.0%) */ .hero { --hero-top: 61.6%; --hero-bot: 24%; position: relative; background: var(--ink); min-height: 720px; height: max(720px, 65.16vw); overflow: hidden; } /* Hero photo. Figma container 98:661 ("GettyImages-527821918 3") places the inner at left=298.81 / top=-9.73 / w=1711.87 / h=1141.72 within the 1728×1126 hero — derived from outer rect (5.71, -64, 1798.185, 1307.81) plus the inner 16.3% / 4.15% / 95.2% / 87.3% offsets. Source 2400×1600 (aspect 1.5) renders into a 1711.87×1141.72 box (aspect 1.4994), so the image scales to fill without cropping. The bearded man's face (source x≈1040, y≈415) lands at hero x≈60%. */ .hero-image { position: absolute; z-index: 1; left: 17.294%; top: -0.864%; width: 99.066%; height: 101.397%; max-width: none; object-fit: fill; } /* Diagonal yellow band. Polygon vertices use the custom properties so the shape and the H1 constraint always agree. Fallback polygon ensures the shape never covers the full section if a custom property fails. */ /* Figma Rectangle 78 (98:662), literal port. In Figma: width: 2717.69px; height: 494.94px; left: -220.95px; top: -268px; background: linear-gradient(180deg, rgba(28,29,35,0) 0%, #1C1D23 58.65%); mix-blend-mode: multiply; transform: matrix(1, 0, 0, -1, 0, 0); (= scaleY(-1)) Dimensions converted to % of the 1728×1126 hero so the overlay scales with viewport. The element sits mostly above the hero; only its bottom ~227px reaches into the visible area, where the flipped gradient produces a top-down darkening that fades to transparent by hero-y≈227. */ .hero-overlay { position: absolute; z-index: 2; width: 157.273%; height: 43.957%; left: -12.787%; top: -23.801%; background: linear-gradient(180deg, rgba(28, 29, 35, 0) 0%, #1C1D23 58.65%); mix-blend-mode: multiply; transform: scaleY(-1); pointer-events: none; } .hero-shape { position: absolute; inset: 0; z-index: 3; background: var(--ink); clip-path: polygon(0 0, 61.6% 0, 24% 100%, 0 100%); clip-path: polygon(0 0, var(--hero-top) 0, var(--hero-bot) 100%, 0 100%); } /* Faint horizontal rule under the nav (R4: y=92.68 at 1728w) */ .hero-rule-top { position: absolute; z-index: 4; top: max(60px, 5.366vw); left: 0; right: 0; height: 1px; background: var(--line-on-dark); pointer-events: none; } /* Faint vertical rule down the left edge (R4: x=51 of 1728 ≈ 2.95vw) */ .hero-rule-left { position: absolute; z-index: 4; top: 0; bottom: 0; left: max(16px, 2.95vw); width: 1px; background: var(--line-on-dark); pointer-events: none; } /* Below ~1106px the hero height clamps to 720 (instead of scaling with 65.16vw), so the aspect ratio widens. To preserve the 30° diagonal angle, the percent offsets shift accordingly (dx in px stays the same: 720 × tan(30°) ≈ 415.4 px). */ @media (max-width: 900px) { .hero { --hero-top: 63.05%; --hero-bot: 22.55%; } } @media (max-width: 900px) { .hero { --hero-top: 63.6%; --hero-bot: 22%; } } .brand { position: absolute; z-index: 5; top: max(18px, 1.65vw); left: max(24px, 5.31vw); width: max(140px, 15.84vw); height: max(18px, 2.04vw); object-fit: contain; } /* Figma navbar (id 8054:6682): - position: x=1137.9 → ends at 1664.1 (right offset = 1728-1664.1 = 63.9 ≈ 64px) - text top at y=53.68; pill top at y=41.24 (pill is 38px tall, vertically centered around the same line as 17px text) - font: Figtree Bold (700) 17px, line-height 1, letter-spacing 0, color #fffcfa - gap "news & events" → "what we do": 51.68px - gap "what we do" → pill: 32.8px - pill: 194.72w × 38.18h, color #1c1d23, bg yellow, parallelogram clip-path */ /* R4 nav (98:667/98:668/98:669): three plain uppercase items, no pill on CONTACT. Figtree Bold 17.191px / 1 / #eafff1, top y=37.6. */ .nav { position: absolute; z-index: 5; top: max(20px, 2.176vw); right: max(24px, 5.272vw); display: flex; gap: max(20px, 3vw); align-items: center; font-family: var(--font); font-size: max(13px, 0.995vw); font-weight: 700; line-height: 1; text-transform: uppercase; color: var(--mint-pale); } .nav a { letter-spacing: inherit; } /* R4 H1 (98:670): - x=123.82 (≈7.16vw of 1728), y=471.41 (≈41.86% of 1126) - Figtree Bold (700), 81.266px / 1.09 / #eafff1 - "right" and "balance" underlined */ .hero h1 { position: absolute; z-index: 5; left: max(24px, 7.166vw); top: max(220px, 27.28vw); margin: 0; max-width: max(280px, 32.22vw); color: var(--mint-pale); font-family: var(--font); font-size: max(36px, 4.703vw); font-weight: 700; line-height: 1.09; } .hero h1 span { text-decoration: underline; text-decoration-thickness: 0.06em; text-underline-offset: 0.08em; } /* R4 sub-headline (98:694): "Next generation / ruminant nutrition" - x=123.82, y=863.38 (≈76.67% of 1126), w=915.46 - Figtree Regular (400), 28px / 1.37 / #eafff1 */ .hero-sub { position: absolute; z-index: 5; left: max(24px, 7.166vw); top: max(420px, 49.96vw); margin: 0; max-width: max(220px, 53vw); color: var(--mint-pale); font-family: var(--font); font-size: max(15px, 1.621vw); font-weight: 400; line-height: 1.37; } /* R4 CTA (98:687/98:692): yellow parallelogram with INK text. - "get in touch" text at x=159.2, y=997.3 — Figtree Bold 17.818px / 1 / #1c1d23 - Container at x=94.35, y=979.0, w=253.6, h=54.5 */ .hero-btn { position: absolute; z-index: 5; left: max(24px, 5.46vw); top: auto; bottom: max(40px, 5.382vw); min-width: max(180px, 14.68vw); --btn-h: max(52px, 3.15vw); /* must match rendered height (52 floor inherited from .btn) */ height: var(--btn-h); color: var(--ink); background: var(--yellow); font-size: max(16px, 1.031vw); } /* --- tablet: 640–1023 --- */ @media (max-width: 900px) { .hero { --hero-top: 60%; --hero-bot: 25%; height: min(max(560px, 80vw), 100vh); min-height: 560px; } .hero h1 { /* Looser max-width on tablet since yellow is wider */ max-width: max(280px, 50vw); font-size: max(30px, 5.5vw); } } /* --- mobile / small tablet: <=1024 --- */ @media (max-width: 900px) { .hero { height: auto !important; min-height: 0 !important; --hero-top: 100%; --hero-bot: 100%; background-color: var(--ink); display: flex; flex-direction: column; } .hero-shape { display: none; } .hero-rule-top, .hero-rule-left { display: none; } .hero-image { position: relative !important; z-index: 1; left: 0 !important; top: initial !important; width: 100% !important; height: initial !important; min-width: 0 !important; max-width: none; max-height: 400px; object-fit: cover; object-position: 60% 20%; order: 3; } .hero-overlay { display: none; } .nav { display: none; } .brand { width: 180px !important; height: auto !important; top: 28px !important; left: 24px !important; } .hero h1 { position: static !important; z-index: 5; left: initial !important; top: initial !important; transform: none !important; margin: 110px 0 0; padding: 0 0.5em 0.5em; max-width: 100% !important; color: var(--mint-pale) !important; font-size: max(30px, 7vw) !important; /* unified ≤900px headline size */ line-height: 1.08 !important; order: 0; } .hero-sub { position: static !important; margin: 0 0 24px; padding: 0 0.5em; max-width: 100% !important; font-size: max(16px, 2.4vw) !important; /* unified ≤900px subtext size */ color: var(--mint-pale); order: 1; } .hero-btn { position: static !important; z-index: 5; left: initial !important; top: initial !important; bottom: initial !important; min-width: 200px !important; height: 52px !important; margin: 0 0 24px 24px; align-self: flex-start; order: 2; background: var(--yellow); color: var(--ink); } } /* Hamburger menu — only visible on mobile. Position it at left:calc(...) which works at all mobile widths. `right:` and `calc(100% - X)` fail in some Chrome configs when body has overflow-x: hidden, so use viewport-width subtraction. */ button.hamburger { display: none; position: absolute; z-index: 60; top: 22px; left: calc(100vw - 54px); width: 32px; height: 28px; padding: 0; background: transparent; border: 0; cursor: pointer; -webkit-appearance: none; appearance: none; } .hamburger span { display: block; width: 100%; height: 3px; margin: 0 0 5px 0; background: var(--mint-pale); border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease; } .hamburger span:last-child { margin-bottom: 0; } .hamburger[aria-expanded="true"] span { background: var(--cream); } .hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .mobile-nav { position: fixed; z-index: 50; inset: 0; background: var(--ink); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 24px; padding: 24px 32px; } .mobile-nav a { color: var(--cream); font-family: var(--font); font-size: 32px; font-weight: 700; line-height: 1.1; text-transform: uppercase; } .mobile-nav[hidden] { display: none; } @media (max-width: 900px) { button.hamburger { display: block; } } /* ======================================================================= Section 2 - Mission "Increase milk yield while reducing methane" R4 frame 98:708 — 1728×850. Flat #eafff1 background. H2 90.35,132.5 / Figtree SemiBold 112.849px / 1.04 / #1c1d23 Body p 902.36,646 / Figtree Regular 28px / 1.37 / #1c1d23 (inline RUMENRG mark) "/// " decorative mark top-right at inset_top 17.96% / inset_right 5.36% No diagonal, no button. ======================================================================= */ .mission { position: relative; min-height: max(480px, 49.19vw); background: var(--mint-pale); overflow: hidden; } .mission h2 { position: absolute; z-index: 1; top: 15.59%; /* 132.5/850 */ left: max(24px, 5.229vw); margin: 0; max-width: max(280px, 69.31vw); color: var(--ink); font-family: var(--font); font-size: max(40px, 6.531vw); font-weight: 600; line-height: 1.04; } .mission .mission-copy { position: absolute; z-index: 1; top: 75.99%; /* 646/850 */ left: max(24px, 52.22vw); right: max(16px, 2.66vw); margin: 0; color: var(--ink); font-family: var(--font); font-size: max(16px, 1.621vw); font-weight: 400; line-height: 1.37; } /* Inline RUMENRG mark inside the body paragraph. Figma asset is 176.871 × 24.817. Use the existing logo SVG, scaled to the text's cap-height. The SVG file has preserveAspectRatio="none" + width="100%" height="100%" baked in, so the browser can't infer an intrinsic aspect from it — explicit aspect-ratio from the viewBox (706.426 × 99.1197) is required, otherwise width:auto falls back to the 300px default replaced-element width and the mark stretches horizontally. */ .rumenrg-inline { display: inline-block; height: 0.89em; width: auto; aspect-ratio: 706.426 / 99.1197; vertical-align: baseline; transform: translateY(0.1em); } /* Decorative slash-mark SVG in the top-right corner. Figma node 98:716: 94.645 × 62.79 px, top 17.96%, right 5.36%. Implemented as a CSS mask so each section can recolor it via background-color. */ .section-mark { position: absolute; z-index: 2; display: block; top: max(40px, 9.41vw); /* 17.96% of 850 ≈ 152.66, fall back to vw */ right: max(20px, 5.36vw); width: max(48px, 5.48vw); aspect-ratio: 94.6453 / 62.7987; color: var(--ink); user-select: none; pointer-events: none; } .section-mark svg { display: block; width: 100%; height: 100%; fill: currentColor; } @media (max-width: 900px) { .mission { min-height: 0; padding: 56px 36px 72px; background: var(--mint-pale); } .mission h2 { position: static; padding: 0 0 0.12em; /* preserve descender clearance from global h1–h6 rule */ max-width: none; font-size: max(30px, 7vw); /* unified ≤900px headline size */ margin: 0 0 32px; } .mission .mission-copy { position: static; left: initial; right: initial; max-width: none; font-size: max(16px, 2.4vw); /* unified ≤900px subtext size */ } .section-mark { top: 48px; right: 24px; width: 56px; } } /* Top horizontal rule under a section's header band (R4: y=56 for mint-pale sections). Uses --line (dark, 18% opacity) so it reads on light backgrounds. */ .section.has-top-rule::after { content: ""; position: absolute; z-index: 4; top: max(28px, 3.24vw); left: 0; right: 0; height: 1px; background: var(--line); pointer-events: none; } /* Sections rendered on the dark ink background need the light rule tone instead. */ .photo-break-aerial.has-rule::before, .toolbox.has-rule::before, .toolbox.has-top-rule::after, .photo-break.has-rule::before, .approach-hero.has-rule::before, .approach-hero.has-top-rule::after, .team-photo.has-rule::before, .testimonial.has-rule::before, .testimonial.has-top-rule::after { background: var(--line-on-dark); } /* RUMENRG statement uses yellow rules per Figma (R4 98:812 / 98:813 stroke=#FFF27A). */ .rumenrg-statement.has-rule::before, .rumenrg-statement.has-top-rule::after { background: var(--yellow); } /* ----------------------------------------------------------------------- Rule reveal animation Horizontal rules sweep rightward when the section enters view (one-shot, IntersectionObserver-driven via .rules-in-view). Vertical rules use scroll-driven animation where supported: the rule draws downward as the section scrolls through the viewport, so a tall section's rule reads as an active scroll-following stroke rather than completing before the user has scrolled past the top. In browsers that don't support `animation-timeline: view()`, vertical rules just appear at full extent (no broken state, no jump). Both are gated on html.js so reduced-motion users and unsupported browsers see the rules at full extent immediately. ----------------------------------------------------------------------- */ /* Horizontal rules: scaleX 0→1 from left edge */ html.js .section.has-top-rule::after, html.js .hero-rule-top { transform: scaleX(0); transform-origin: left center; transition: transform 1100ms var(--ease-cinema); transition-delay: var(--rule-delay, 120ms); } html.js .section.rules-in-view.has-top-rule::after, html.js .hero.rules-in-view .hero-rule-top { transform: scaleX(1); } /* Vertical rules: kept static (no entry animation). Horizontal rules still sweep in via .rules-in-view; verticals just appear at full extent. */ /* ======================================================================= Section 3 — Aerial-cows photo break R4 frame 98:737 — 1728×897. Full-bleed aerial photo over ink fallback. No text, no overlays. Vertical rule at x=51 (handled by .has-rule). ======================================================================= */ .photo-break-aerial { position: relative; background: var(--ink); height: max(360px, 51.91vw); overflow: hidden; } .photo-break-aerial .break-image { /* R4 (98:741): image is 114.63% × 1768 wide and 1264.59 tall, positioned to overflow the section vertically. Replicate by oversizing height so more of the photo's vertical composition (full cow ring) is visible. */ position: absolute; left: 50%; top: 50%; height: 141%; width: auto; max-width: none; transform: translate(-50%, -50%); } /* ======================================================================= Section 4 — Benefits (R4 98:743 — 1728×2161, bg #f4ffd3) Three stacked panels @ 720.27h each, divided by 1px horizontal rules. Panels alternate photo placement (left/right). Photos are parallelogram PNGs with baked-in transparency at top-left + bottom-right, positioned to overflow one side of the section. Per panel: - Eyebrow: "0N" Roboto Mono Medium 30px + label Figtree SemiBold 30px uppercase - Headline: Figtree SemiBold 70px / 1.03 / #1c1d23 ======================================================================= */ .benefits { position: relative; background: var(--yellow-pale); min-height: max(900px, 125.06vw); overflow: hidden; padding: 0; } .benefit-panel { position: relative; height: max(300px, 41.69vw); /* 720.27 / 1728 */ border-top: 1px solid var(--line); } .benefit-panel:last-child::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); pointer-events: none; } /* Photo positioning. PNG aspect 2440 / 1441 = 1.6933. Figma container per photo is 1219.538 × 720.273, which overflows the section horizontally by ~187px (panel 1/3) or by ~200px on the right (panel 2). */ .benefit-photo { position: absolute; z-index: 0; top: 0; height: 100%; width: auto; max-width: none; pointer-events: none; } .benefit-panel--photo-left .benefit-photo { left: 0; transform: translateX(-15.38%); /* -187.51 / 1219.54 */ } .benefit-panel--photo-right .benefit-photo { right: 0; transform: translateX(15.38%); /* Panel-2 photo is NOT rotated in Figma; transparent corners on top-left + bottom-right. */ } /* Panels 1 and 3 use a 180° rotation per Figma, which flips the parallelogram so the photo content sits on the left and the diagonal cut shows on the right. */ .benefit-panel--photo-left .benefit-photo { transform: translateX(-15.38%) rotate(180deg); } /* Eyebrow line: "01 THE BOTTOM LINE" — Roboto Mono number + Figtree SemiBold label. 30px / 1.09 / #1c1d23 / uppercase label. */ .benefit-eyebrow { position: absolute; z-index: 1; top: max(40px, 4.98vw); margin: 0; display: inline-flex; align-items: baseline; gap: max(18px, 1.74vw); color: var(--ink); font-family: var(--font); font-size: max(18px, 1.736vw); font-weight: 600; line-height: 1.09; text-transform: uppercase; } .benefit-eyebrow .benefit-num { font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 500; letter-spacing: 0; text-transform: none; } .benefit-eyebrow--right { left: max(24px, 62.49vw); right: auto; } .benefit-eyebrow--left { left: max(24px, 5.509vw); right: auto; } /* Headline — Figtree SemiBold 70px / 1.03 / #1c1d23 */ .benefit-head { position: absolute; z-index: 1; top: max(220px, 28.62vw); /* 494.59 / 1728 */ margin: 0; max-width: max(280px, 49.61vw); color: var(--ink); font-family: var(--font); font-size: max(28px, 4.051vw); font-weight: 600; line-height: 1.03; } .benefit-head--right { left: max(24px, 48.71vw); right: auto; } .benefit-head--left { left: max(24px, 5.075vw); right: auto; } /* Benefits panels keep the desktop layout (absolute parallelogram photos + absolutely positioned eyebrow/headline) all the way down to mobile. On narrow viewports the headline shifts up so it sits beneath the eyebrow in the clear wedge of the parallelogram, instead of in the center of the panel where the photo is opaque. */ @media (max-width: 900px) { .benefits { min-height: 0; } .benefit-panel { height: max(220px, 38vw); } /* Moderate crop in the 601-900 range — leaves more visible parallelogram and pulls the text closer in so the empty wedge isn't dead space. The 600 block below tightens further for narrower phones. */ .benefit-panel--photo-left .benefit-photo { transform: translateX(-22%) rotate(180deg) !important; } .benefit-panel--photo-right .benefit-photo { transform: translateX(22%) !important; } .benefit-eyebrow { top: 28px !important; font-size: max(16px, 1.621vw) !important; /* unified ≤900px eyebrow size = 16px (button floor) */ gap: 10px !important; } /* Bring every eyebrow class to the same 16px floor as the buttons. */ .partners-eyebrow, .news-eyebrow, .approach-eyebrow, .roadmap-eyebrow { font-size: max(16px, 1.621vw); } .benefit-head { top: 60px !important; font-size: max(20px, 5.4vw) !important; line-height: 1.08 !important; max-width: 42vw !important; } /* Text closer to the photo edge so the empty wedge shrinks */ .benefit-eyebrow--right { left: 60vw !important; } .benefit-head--right { left: 60vw !important; } .benefit-eyebrow--left { left: 36px !important; } .benefit-head--left { left: 36px !important; } } /* Below 768px: parallelogram is cropped harder (translateX shifts more of it off-canvas) so the clear wedge is wider — text fits comfortably. Diagonal angle preserved because the slope is baked into the PNG; we only change how much of it is visible. */ /* Below 768px: only the panel height tightens. The 900px block above handles the photo crop and text positioning across the whole 0-900 range, so duplicating those values here was causing inconsistent margins in the 601-768 sub-range. */ @media (max-width: 768px) { .benefit-panel { height: max(180px, 44vw); } } /* ======================================================================= Section 5a — RUMENRG visual statement (R4 98:795 — 1728×1110, bg #1c1d23) Cow-nose closeup, multiplied dark gradients, large yellow RUMENRG wordmark overlay centered horizontally and ~46% from top. ======================================================================= */ .rumenrg-statement { position: relative; background: var(--ink); height: max(640px, 74.07vw); overflow: hidden; } .rumenrg-photo { /* R4 98:798 — native image positioned at section coords (-14.4, 125.7), displayed at 1795.6 × 1203.3 (overflows ~219px past section bottom). */ position: absolute; left: 50%; top: max(60px, 7.273vw); width: max(900px, 103.91vw); height: auto; transform: translateX(-50%); z-index: 0; } /* R4 stacks two multiply-blend dark gradients over the photo: - Top-down: rgba(217,217,217,0) → #4d4136 at 60% - Bottom-up: rgba(28,29,35,0) → #1c1d23 at 59% (the larger ink gradient) */ .rumenrg-overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: multiply; background: linear-gradient(to top, #1c1d23 0%, rgba(28, 29, 35, 0) 50%), linear-gradient(to bottom, #4d4136 0%, rgba(77, 65, 54, 0) 55%); } /* Large yellow RUMENRG wordmark (R4 98:802): - x=91.85, y=141.5 (top-anchored, near top of section) - native size 1543.65 × 216.59 (aspect 7.13) — scale to ~89% of section width */ .rumenrg-wordmark { position: absolute; z-index: 2; left: 50%; top: max(40px, 8.189vw); transform: translateX(-50%); width: max(360px, 89.33vw); height: auto; /* SVG has preserveAspectRatio="none" + width="100%" height="100%" baked in, so height:auto would fall back to the 150px default. Lock the aspect from the viewBox so height tracks width correctly. */ aspect-ratio: 1543.65 / 216.591; pointer-events: none; } @media (max-width: 900px) { .rumenrg-statement { height: max(360px, 64vw); } .rumenrg-wordmark { top: 24px; width: 88vw; } } /* ======================================================================= Section 5b — "A new tool in the farmer's toolbox" (R4 98:819 — 1728×865) Dark ink bg with mint-pale text. Mirror of the mission section. H2 90.35,130 / Figtree SemiBold 112.849 / 1.04 / #eafff1, max-width 1526. Body block bottom-left (91.25,591.19): lede (Figtree SemiBold 28/1.37) + body (Figtree Regular 28/1.37) with inline RUMENRG mark. "/// " corner mark BOTTOM-right at inset 82.01% / 5.3% / 10.73% / 89.23%. ======================================================================= */ .toolbox { position: relative; background: var(--ink); min-height: max(560px, 50.06vw); overflow: hidden; } .toolbox h2 { position: absolute; z-index: 1; top: 15.03%; /* 130/865 */ left: max(24px, 5.229vw); margin: 0; max-width: max(280px, 88.32vw); color: var(--mint-pale); font-family: var(--font); font-size: max(40px, 6.531vw); font-weight: 600; line-height: 1.04; } .toolbox-copy { position: absolute; z-index: 1; top: 68.35%; /* 591.19/865 */ left: max(24px, 5.281vw); width: max(280px, 38.62vw); margin: 0; } .toolbox-lede { margin: 0 0 1.37em; color: var(--mint-pale); font-family: var(--font); font-size: max(16px, 1.621vw); font-weight: 600; line-height: 1.37; } .toolbox-body { margin: 0; color: var(--mint-pale); font-family: var(--font); font-size: max(16px, 1.621vw); font-weight: 400; line-height: 1.37; } .toolbox .rumenrg-inline { /* On the dark bg, the dark-fill RUMENRG SVG wouldn't read. Invert it. */ filter: invert(100%) brightness(1.05); /* R4 98:833 — toolbox uses a slightly smaller inline mark (19.83 / 28 = 0.708em). */ height: 0.708em; transform: translateY(0.08em); } /* "/// " in the BOTTOM-right corner for this section. Figma 98:827: x=1541.83, y=709.39, w=94.65, h=62.80 in a 865-tall section → bottom offset = 92.81px (5.371vw at 1728 baseline). */ .section-mark.section-mark--bottom { top: auto; bottom: max(40px, 5.371vw); right: max(20px, 5.30vw); color: var(--mint-pale); } @media (max-width: 900px) { .toolbox { min-height: 0; padding: 48px 36px 72px; } .toolbox h2 { position: static; max-width: none; font-size: max(30px, 7vw); margin: 0 0 32px; } /* unified ≤900px headline size */ .toolbox-copy { position: static; width: auto; max-width: none; } .toolbox-lede { font-size: max(16px, 2.4vw); } /* unified ≤900px subtext size */ .toolbox-body { font-size: max(16px, 2.4vw); } /* unified ≤900px subtext size */ .section-mark--bottom { bottom: 24px; right: 24px; width: 56px; } } /* ======================================================================= Section 6 - Partner With Us Figma frame 12001:631 — 1728×1230, bg #eafff1. Eyebrow 28px SemiBold at (89,81). 4 cards 361×391 at y=216 (gap 36). Card title 30px SemiBold #fffcfa with multiply gradient overlay. 4 copy columns: h4 20px SemiBold + ul 20px Regular bullets. Button 505 wide, centered, #eafff1 text. ======================================================================= */ /* R4 partners (98:848 — 1728×1309, bg #eafff1): Accordion-style list. Four rows each ~170h with title + arrow icon. The R&D row is shown OPEN by default with detail copy, button, photo. */ .partners { position: relative; background: var(--mint-pale); overflow: hidden; padding: max(120px, 16.55vw) 0 0; } .partners-eyebrow { position: absolute; z-index: 1; top: max(72px, 8.29vw); left: max(24px, 5.252vw); margin: 0; font-family: var(--font); font-size: max(15px, 1.621vw); font-weight: 600; line-height: 1.09; text-transform: uppercase; color: var(--ink); } .partner-list { position: relative; margin: 0; padding: 0; list-style: none; } .partner-item { position: relative; border-top: 1px solid var(--line); } .partner-item:last-child { border-bottom: 1px solid var(--line); } /* Click target — full-width row header */ .partner-toggle { position: relative; display: flex; align-items: center; width: 100%; margin: 0; padding: max(28px, 3.36vw) max(48px, 8.27vw) max(28px, 3.36vw) max(24px, 5.137vw); background: transparent; border: 0; cursor: pointer; text-align: left; color: inherit; font: inherit; -webkit-appearance: none; appearance: none; } .partner-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: -4px; } .partner-toggle h3 { margin: 0; max-width: max(280px, 58.62vw); color: var(--ink); font-family: var(--font); font-size: max(28px, 4.051vw); font-weight: 600; line-height: 1.03; } .partner-arrow { position: absolute; z-index: 3; right: max(24px, 5.47vw); top: 50%; transform: translateY(-50%); width: max(48px, 4.31vw); height: max(48px, 4.31vw); display: inline-block; pointer-events: none; } .partner-arrow img { width: 100%; height: 100%; display: block; transition: transform 0.55s cubic-bezier(0.32, 0.72, 0, 1), filter 0.3s ease; } /* Closed → arrow points right (SVG natural). Open → 90° to point down and the stroke flips to mint-pale so it reads on top of the photo. The filter chain converts the dark stroke (#1C1D23) to ~#EAFFF1. */ .partner-toggle[aria-expanded="true"] .partner-arrow img { transform: rotate(90deg); filter: brightness(0) invert(1) sepia(0.05) saturate(2) hue-rotate(85deg) brightness(1.02); } /* Foldout container: uses grid-template-rows 0fr → 1fr for a smooth height animation that doesn't require knowing the panel's height. Timing: when CLOSING, copy fades out faster than the height collapses (no ghost text at small heights). When OPENING, height expands first then copy fades in — so the panel appears to "unfold and then read". */ .partner-detail { position: relative; z-index: 1; display: grid; grid-template-rows: 0fr; opacity: 0; width: 100%; transition: grid-template-rows 0.55s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.22s ease; } .partner-item--open .partner-detail { grid-template-rows: 1fr; opacity: 1; transition: grid-template-rows 0.55s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.3s ease 0.18s; } /* Inner wrapper is the actual scrollable/clip region required by the grid-template-rows interpolation trick. */ .partner-detail-inner { overflow: hidden; min-height: 0; max-width: max(280px, 65.71vw); padding: 0 max(48px, 8.27vw) 0 max(24px, 5.137vw); transition: padding 0.55s cubic-bezier(0.32, 0.72, 0, 1); } /* Give the inner copy vertical breathing room only when the panel is open. */ .partner-item--open .partner-detail-inner { padding-top: max(16px, 1.84vw); padding-bottom: max(28px, 3.18vw); } /* Match the Figma open-row height so the section ends flush with the photo bottom. */ .partner-item--open { min-height: max(360px, 41.67vw); } .partner-detail-lede { margin: 0 0 max(12px, 1.62vw); color: var(--ink); font-family: var(--font); font-size: max(16px, 1.621vw); font-weight: 700; line-height: 1.37; } .partner-detail ul { margin: 0 0 max(24px, 2.6vw); padding-left: 1.5em; list-style: disc; } .partner-detail li { margin-bottom: max(4px, 0.3vw); color: var(--ink); font-family: var(--font); font-size: max(16px, 1.621vw); font-weight: 400; line-height: 1.37; } .partners-btn { display: inline-flex; min-width: max(180px, 14.68vw); font-size: max(16px, 1.031vw); color: var(--mint-pale); background: var(--ink); } /* Photo always in the DOM but invisible & non-interactive when its row is closed. Anchored to the TOP-right of the partner-item so it overlaps the toggle (the arrow sits ON the image when the row is open). Item min-height ensures the photo fits without overflowing into the next row. */ .partner-detail-photo { position: absolute; z-index: 0; right: 0; top: 0; bottom: auto; width: max(220px, 36.43vw); height: max(280px, 41.67vw); object-fit: cover; object-position: center; opacity: 0; visibility: hidden; transform: translateX(24px); pointer-events: none; transition: opacity 0.5s ease 0s, transform 0.6s cubic-bezier(0.32, 0.72, 0, 1) 0s, visibility 0s linear 0.5s; } .partner-item--open .partner-detail-photo { opacity: 1; visibility: visible; transform: translateX(0); transition: opacity 0.45s ease 0.15s, transform 0.6s cubic-bezier(0.32, 0.72, 0, 1) 0.05s, visibility 0s linear 0s; } /* Ruminant Nutrition card: cows sit at the left/right edges of the source frame. The default box aspect (~0.87, taller than wide) makes object-fit:cover crop the noses. Shorten this one image's height so the box aspect widens and cover keeps more of the horizontal frame visible. The other partner photos keep their original dimensions. */ .partner-detail-photo[src*="partner-ruminant-nutrition"] { height: max(230px, 34.2vw); } /* Respect reduced-motion preference. */ @media (prefers-reduced-motion: reduce) { .partner-detail, .partner-item--open .partner-detail, .partner-detail-inner, .partner-detail-photo, .partner-item--open .partner-detail-photo, .partner-arrow img { transition-duration: 0.01s !important; transition-delay: 0s !important; } } @media (max-width: 900px) { .partners { min-height: 0; padding: 56px 36px; } .partners-eyebrow { position: static; } .partner-list { position: static; padding: 32px 0 0; } .partner-item { padding: 10px 0; min-height: 0; } .partner-arrow { right: 0; width: 44px; height: 44px; } .partner-item--open { padding-bottom: 24px; } .partner-item h3 { font-size: max(24px, 5vw); max-width: none; } .partner-detail { max-width: none; } .partner-detail li, .partner-detail-lede { font-size: max(16px, 2.4vw); } /* unified ≤900px subtext size */ .partner-detail-photo { position: static; width: 100%; height: auto; aspect-ratio: 629/720; margin-top: 20px; } } /* ======================================================================= Section 6 - Cattle muzzle full-bleed Figma frame 14021:63 — 1728×879, dark bg, photo overflows ±7%. Eyebrow "News & Events" at bottom-left, cream text. ======================================================================= */ /* R4 cattle-muzzle photo break (98:905 — 1728×879). Clean full-bleed image, no overlay or eyebrow. Photo is oversized vertically (131.12%, top: -7.37%) to crop the wood-rail composition. */ .photo-break { position: relative; width: 100%; height: max(360px, 50.87vw); background: var(--ink); overflow: hidden; } .photo-break img { position: absolute; z-index: 1; left: 0; top: -7.37%; width: 100%; height: 131.12%; object-fit: cover; object-position: center; } /* R4 news & events (98:962 — 1728×1457, bg #fffcfa). "NEWS" eyebrow top-left, 2×2 grid of event cards. Each card: - photo (748×434) with big white title overlay (107.324px SemiBold) - dark info bar (748×122) with date left + location right (28.489px SemiBold mint-pale uppercase). */ .news { position: relative; background: var(--cream); min-height: max(720px, 84.32vw); overflow: hidden; padding: 0; } .news-eyebrow { position: absolute; z-index: 1; top: max(40px, 5.11vw); left: max(24px, 5.288vw); margin: 0; font-family: var(--font); font-size: max(15px, 1.621vw); font-weight: 600; line-height: 1.09; text-transform: uppercase; color: var(--ink); } .news-grid { position: absolute; top: max(120px, 11.87vw); /* 205.07 / 1728 of section, but anchor to section top */ left: max(20px, 5.21vw); right: max(20px, 5.21vw); bottom: max(40px, 4.6vw); display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; gap: max(20px, 2.55vw) max(20px, 2.66vw); } .news-card { display: flex; flex-direction: column; overflow: hidden; background: var(--ink); } /* Image area with optional big title overlay */ .news-card-image { position: relative; flex: 1 1 auto; aspect-ratio: 749 / 434; background: #0274b3; /* fallback LinkedIn blue, overridden where photo loads */ overflow: hidden; display: block; color: inherit; } .news-card-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } /* Tint overlay on top of the photo for legibility (matches Figma per-card colors). Sits above the photo, below the title. */ .news-card-image::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: transparent; } /* Food Revolution: 41% black wash over the vegetable photo. */ .news-card-image--shade::after { background: rgba(0, 0, 0, 0.41); } /* LinkedIn card variant: blue background + smaller centred "in" icon. */ .news-card-image--linkedin { background: #0274b3; display: flex; align-items: center; justify-content: center; } .news-card-image--linkedin img { position: relative; inset: auto; width: max(180px, 35vw); height: max(180px, 35vw); object-fit: contain; } /* Big white title overlay over the photo — bottom-anchored so multi-line titles stack upward against the dark info bar (matches Figma — Food Revolution uses 3 lines and rises higher than the 2-line Plug and Play / F&A NEXT titles). */ .news-card-title { position: absolute; z-index: 2; left: max(20px, 2.10vw); bottom: max(16px, 1.91vw); right: max(20px, 2vw); margin: 0; color: var(--cream); font-family: var(--font); font-size: max(36px, 6.211vw); font-weight: 600; line-height: 1.03; } /* Dark info bar at the bottom of each card */ .news-card-meta { flex: 0 0 auto; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: max(18px, 1.81vw) max(20px, 2.06vw); background: var(--ink); color: var(--mint-pale); font-family: var(--font); font-size: max(15px, 1.649vw); font-weight: 600; line-height: 1.09; text-transform: uppercase; } .news-card-date { white-space: nowrap; } .news-card-location { text-align: right; } @media (max-width: 900px) { .news { min-height: 0; padding: 56px 20px; } .news-eyebrow, .eyebrow.news-eyebrow { padding-left: 24px !important; padding-right: 24px !important; } .roadmap-title { text-align: center !important; } .news-eyebrow { position: static; margin: 0 0 32px; } .news-grid { position: static; grid-template-columns: 1fr; gap: 24px; } .news-card-title { font-size: max(32px, 8vw); } } /* ======================================================================= Section 8 - A Different Approach hero Figma frame 8054:7004 — 1728×767, dark bg. Photo overflows top (~36% above) and right (~12% over) — bottom-anchored. Multiply blend gradient darkens bottom ~56%. Eyebrow "A different approach" 28px SemiBold cream at (87,79). H2 70px SemiBold cream lower-half. ======================================================================= */ /* R4 "A different approach" (98:908 — 1728×792, bg #1c1d23). Clean dark section: small uppercase eyebrow top-left, large mint-pale headline anchored center-right, "///" mark bottom-left. No photo, no gradients. */ .approach-hero { position: relative; min-height: max(420px, 45.83vw); background: var(--ink); overflow: hidden; } .approach-eyebrow { position: absolute; z-index: 3; top: 18.14%; /* 143.71 / 792 */ left: max(24px, 5.232vw); margin: 0; color: var(--mint-pale); font-family: var(--font); font-size: max(15px, 1.621vw); font-weight: 600; line-height: 1.09; text-transform: uppercase; } /* Headline: Figtree SemiBold 112.85px / 1.09 / #eafff1. Figma anchor — element top-left at (50% - 348.23, 50% - 46.14) of 1728×792: → x=516 (29.86vw of 1728), y=350 (44.19% of 792). */ .approach-hero h2 { position: absolute; z-index: 3; left: max(24px, 29.86vw); top: 44.19%; margin: 0; max-width: max(280px, 66.62vw); color: var(--mint-pale); font-family: var(--font); font-size: max(36px, 6.532vw); font-weight: 600; line-height: 1.09; } /* approach-hero puts the "///" mark on the BOTTOM-LEFT, mint-pale. */ .approach-mark { top: auto; right: auto; left: max(20px, 5.32vw); bottom: max(28px, 5.51vw); color: var(--mint-pale); } @media (max-width: 900px) { .approach-hero { min-height: 0; padding: 56px 36px 150px; } .approach-hero .section-mark { right: 2em !important; left: initial !important; } .approach-eyebrow { position: static; margin: 0 0 32px; } .approach-hero h2 { position: static; transform: none; max-width: none; font-size: max(30px, 7vw); /* unified ≤900px headline size */ } .approach-mark { position: absolute; right: 24px; bottom: 24px; } } /* R4 approach-detail (98:926 — 1728×1441, bg #eafff1). Two stacked panels (720h each) with parallelogram photos that mirror the benefits section pattern. Each panel: title (70px SemiBold) + body paragraph (28px Regular). Panel 2 also has a "Learn more" button. */ .approach-detail { position: relative; background: var(--mint-pale); min-height: max(720px, 83.39vw); overflow: hidden; padding: 0; } .approach-panel { position: relative; height: max(360px, 41.69vw); /* 720.27 / 1728 */ border-top: 1px solid rgba(28, 29, 35, 0.25); } .approach-panel:last-child { border-bottom: 1px solid rgba(28, 29, 35, 0.25); } /* Photo (parallelogram PNG, aspect 2440/1441). Same overflow technique as the benefits section. */ .approach-photo { position: absolute; z-index: 0; top: 0; height: 100%; width: auto; max-width: none; pointer-events: none; } .approach-panel--photo-left .approach-photo { left: 0; transform: translateX(-15.38%) rotate(180deg); } .approach-panel--photo-right .approach-photo { right: 0; transform: translateX(15.38%); } /* Title — Figtree SemiBold 70px / 1.03 / #1c1d23. */ .approach-head { position: absolute; z-index: 1; margin: 0; max-width: max(280px, 27.78vw); color: var(--ink); font-family: var(--font); font-size: max(28px, 4.051vw); font-weight: 600; line-height: 1.03; } /* Panel 1 title: x=1087.87, y=80.08. */ .approach-head--right { top: max(40px, 4.63vw); left: max(24px, 62.96vw); right: auto; } /* Panel 2 title: x=89.19, y=801.77 → 81.5px relative to panel top. */ .approach-head--left { top: max(40px, 4.71vw); left: max(24px, 5.16vw); right: auto; max-width: max(280px, 58.62vw); } /* Body copy — Figtree Regular 28px / 1.37 / #1c1d23. */ .approach-body { position: absolute; z-index: 1; margin: 0; max-width: max(280px, 41.23vw); color: var(--ink); font-family: var(--font); font-size: max(16px, 1.621vw); font-weight: 400; line-height: 1.37; } /* Panel 1 body: x=854.83, y=515.36 → relative to panel 60.45%. */ .approach-body--right { top: max(220px, 29.83vw); left: max(24px, 49.47vw); right: auto; } /* Panel 2 body: x=91.69, y=1139.64 → relative to panel y=419.37 (≈58.2%). */ .approach-body--left { top: max(220px, 24.27vw); left: max(24px, 5.305vw); right: auto; max-width: max(280px, 38.62vw); } /* Panel 2 CTA — "Learn more". Ink button with mint-pale text. Figma button at x=93.35, y=1299.53 → relative to panel y=579.26 (80.4%). */ .approach-btn { position: absolute; z-index: 1; left: max(24px, 5.402vw); top: max(280px, 33.54vw); min-width: max(180px, 14.68vw); font-size: max(14px, 1.031vw); color: var(--mint-pale); background: var(--ink); } /* Approach-detail panels (More Energy for Milk / Nature-identical) keep the desktop layout all the way down to mobile. On narrow viewports text positions shift so they fit within the parallelogram's clear wedge (top-left or top-right depending on photo placement). */ @media (max-width: 900px) { .approach-detail { min-height: 0; } .approach-panel { height: max(260px, 44vw); } /* Crop the parallelograms hard from 900 down so the clear wedge is wide enough for the body copy at every mobile width. */ .approach-panel--photo-left .approach-photo { transform: translateX(-32%) rotate(180deg) !important; } .approach-panel--photo-right .approach-photo { transform: translateX(32%) !important; } .approach-head { font-size: max(20px, 5vw) !important; /* match .partner-item h3 — panel tier */ line-height: 1.05 !important; max-width: 38vw !important; } /* head--right sits on the photo-LEFT panel → right side of the row */ .approach-head--right { top: 32px !important; left: 58vw !important; } /* head--left sits on the photo-RIGHT panel → left side of the row */ .approach-head--left { top: 32px !important; left: 36px !important; max-width: 38vw !important; } .approach-body { font-size: max(14px, 2.4vw) !important; /* unified ≤900px subtext size */ line-height: 1.3 !important; max-width: 50vw !important; } .approach-body--right { top: 200px !important; left: 40vw !important; } .approach-body--left { top: 180px !important; left: 36px !important; max-width: 38vw !important; } .approach-btn { top: auto !important; bottom: 24px !important; left: 36px !important; min-width: 0 !important; min-height: 0 !important; padding: 8px 36px !important; --btn-h: 32px; /* content height ≈ 16px line + 2×8 padding; keeps clip slope = 30° */ height: auto !important; font-size: 16px !important; white-space: nowrap !important; } } /* Below 768px: crop approach parallelograms harder so body copy has the room it needs. Diagonal angle preserved (baked into the PNG). */ /* Below 768px: shorter panel + harder photo crop. Panel 1 (More Energy) gets a moderately-wider text wedge (~split between the 900px width and the previous over-generous one). Panel 2 (Nature-identical) text shifts UP and keeps a real left margin so it doesn't hug the edge. */ @media (max-width: 768px) { .approach-panel { height: max(240px, 48vw); padding: 0 !important; } /* Moderate crop — bigger wedge than 900px, less wedge than the prior -44% setting which made panel 1's text area cavernous. */ .approach-panel--photo-left .approach-photo { transform: translateX(-38%) rotate(180deg) !important; } .approach-panel--photo-right .approach-photo { transform: translateX(38%) !important; } /* Panel 1 (More Energy): wider text wedge so the long body fits in fewer lines. Body uses the broader 49vw column. */ .approach-head--right { top: max(50px, 5vw) !important; left: 55vw !important; max-width: 41vw !important; } .approach-body--right { top: max(110px, 22vw) !important; left: 47.5vw !important; max-width: 49vw !important; } /* Panel 2 (Nature-identical): text rides UP, keeps a 36px left margin. Body gets a 50vw column for breathing room. */ .approach-head--left { top: max(26px, 4vw) !important; left: 36px !important; max-width: 42vw !important; } .approach-body--left { top: max(60px, 10vw) !important; left: 36px !important; max-width: 50vw !important; } .approach-btn { left: 28px !important; } } /* R4 roadmap (98:1020 — 1728×3159, bg #f4ffd3). Centered "Our Roadmap" 112.85px title at the top. Three alternating steps with photo+text rows separated by down-arrows. Eyebrow: Roboto Mono number + Figtree SemiBold uppercase label (30px). Step title: Figtree SemiBold 70px / 1.03. Step body: Figtree Regular 25px / 1.37 (step 01 only). */ .roadmap { position: relative; min-height: max(1274px, 167.36vw); background: var(--yellow-pale); overflow: hidden; padding: 0; } .roadmap-title { position: absolute; z-index: 1; top: max(60px, 9.37vw); /* 161.85/1728 → vw */ left: 50%; transform: translateX(-50%); margin: 0; width: 90%; max-width: max(280px, 66.62vw); color: var(--ink); font-family: var(--font); font-size: max(40px, 6.532vw); font-weight: 600; line-height: 1.09; text-align: center; } .roadmap-step { position: absolute; z-index: 1; left: 0; right: 0; /* Two-column grid mirroring Figma: photo column ends at x=817.5 (47.31vw of 1728), then a 89.86 (5.20vw) gap, then the text column starting at x=907.36. */ display: grid; grid-template-columns: 47.31vw 1fr; column-gap: 5.20vw; align-items: start; } .roadmap-photo { width: 100%; height: auto; aspect-ratio: 833 / 578; object-fit: cover; display: block; } .roadmap-text { padding-top: max(20px, 2.36vw); } .roadmap-eyebrow { margin: 0 0 max(20px, 2.34vw); display: inline-flex; align-items: baseline; gap: max(18px, 1.74vw); color: var(--ink); font-family: var(--font); font-size: max(18px, 1.736vw); font-weight: 600; line-height: 1.09; text-transform: uppercase; } .roadmap-eyebrow .roadmap-num { font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 500; letter-spacing: 0; text-transform: none; } .roadmap-step h3 { margin: 0; max-width: max(280px, 35.49vw); color: var(--ink); font-family: var(--font); font-size: max(28px, 4.051vw); font-weight: 600; line-height: 1.03; } /* Step 01's headline wraps tighter in Figma (585.14 wide → 4 lines). */ .roadmap-step--photo-left:not(:last-of-type) h3 { max-width: max(280px, 33.86vw); } .roadmap-body { margin: max(20px, 1.93vw) 0 0; max-width: max(280px, 29.29vw); color: var(--ink); font-family: var(--font); font-size: max(15px, 1.447vw); font-weight: 400; line-height: 1.37; } /* Step 01 — photo on left (overflows left edge), text on right. Figma image at (-15.5, 355.67) w=833, text starting (907.36, 396.54). */ .roadmap-step--photo-left { top: max(126px, 14.59vw); } .roadmap-step--photo-left .roadmap-photo { margin-left: -0.9vw; width: calc(100% + 0.9vw); aspect-ratio: 833 / 578; } /* Step 02 — text on left (right-aligned), photo on right. Figma image at (909.19, 1421.91) w=830, text body at (214.15, 1539.46) w=604. */ .roadmap-step--photo-right { top: max(606px, 71.71vw); } .roadmap-step--photo-right .roadmap-text { text-align: right; display: flex; flex-direction: column; align-items: flex-end; } .roadmap-step--photo-right .roadmap-text h3 { max-width: max(280px, 35vw); } .roadmap-step--photo-right .roadmap-photo { margin-right: -0.69vw; width: calc(100% + 0.69vw); aspect-ratio: 830 / 578; } /* Step 03 reuses photo-left layout but positioned lower. Figma image at (-60, 2490.64) w=877.75 — wider/farther left than step 1. */ .roadmap-step--photo-left:last-of-type { top: max(1246px, 127.73vw); } .roadmap-step--photo-left:last-of-type .roadmap-photo { margin-left: -3.47vw; width: calc(100% + 3.47vw); aspect-ratio: 877.75 / 575.86; } /* Down-arrow connectors between steps. The Figma arrow asset is a horizontal right-arrow (305 × 22); we re-wrap the same SVG path rotated inside its own viewBox so the served file is natively a vertical down-arrow (22 × 305). That lets the intrinsic size match the rendered size — no CSS rotate needed, which avoids the Chrome/SVG sizing edge case we hit with rotate(90deg). */ .roadmap-arrow { position: absolute; z-index: 1; left: 50%; width: 22px; height: max(128px, 14.06vw); transform: translateX(-50%); color: var(--ink); } .roadmap-arrow img { display: block; width: 100%; height: 100%; } .roadmap-arrow:nth-of-type(1) { top: max(486px, 53.39vw); } .roadmap-arrow:nth-of-type(2) { top: max(996px, 109.30vw); } @media (max-width: 900px) { .roadmap { min-height: 0; padding: 56px 23px 64px !important; } .roadmap-title { position: static; transform: none; width: 100%; max-width: none; font-size: max(34px, 8vw); margin: 0 0 48px; text-align: left; } .roadmap-step { position: static; grid-template-columns: 1fr; gap: 24px; margin: 0 0 48px; } .roadmap-step--photo-left, .roadmap-step--photo-right { top: auto; } .roadmap-step--photo-left .roadmap-photo, .roadmap-step--photo-right .roadmap-photo { margin: 0; max-width: 100%; } .roadmap-step--photo-left .roadmap-text, .roadmap-step--photo-right .roadmap-text { padding: 0 12px !important; text-align: left; align-items: flex-start; } .roadmap-step--photo-right { display: flex; flex-direction: column-reverse; } .roadmap-arrow { display: none; } .roadmap-step h3 { font-size: max(30px, 7vw); } /* unified ≤900px headline size */ .roadmap-body { font-size: max(16px, 2.4vw); } /* unified ≤900px subtext size */ .roadmap-step--photo-left:last-of-type { top: auto; } } /* R4 team-photo break (98:1067 — 1728×897). Full-bleed photo of the team standing in a field. No text overlay. */ .team-photo { position: relative; background: var(--ink); height: max(360px, 51.91vw); overflow: hidden; } .team-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; } /* R4 team intro (98:1070 — 1728×971, bg #fffcfa). Large headline top-left "Interdisciplinary / scientific expertise" (Figtree SemiBold 112.849px / 1.04). Body block right-side (28px / 1.37) with "Meet the team" CTA. "/// " corner mark top-right. */ .team { position: relative; background: var(--cream); min-height: max(560px, 56.19vw); overflow: hidden; } .team-head { position: absolute; z-index: 2; top: 13.34%; /* 129.5 / 971 */ left: max(24px, 4.852vw); margin: 0; max-width: max(280px, 69.31vw); color: var(--ink); font-family: var(--font); font-size: max(36px, 6.531vw); font-weight: 600; line-height: 1.04; } .team-copy { position: absolute; z-index: 2; top: 53.55%; /* 520.01 / 971 */ left: max(24px, 52.22vw); right: max(20px, 4.05vw); margin: 0; display: flex; flex-direction: column; gap: max(20px, 2.06vw); } .team-copy p { margin: 0; color: var(--ink); font-family: var(--font); font-size: max(16px, 1.621vw); font-weight: 400; line-height: 1.37; } .team-btn { display: inline-flex; align-self: flex-start; margin-top: max(8px, 1vw); min-width: max(180px, 14.68vw); font-size: max(16px, 1.031vw); color: var(--mint-pale); background: var(--ink); } /* "///" mark top-right. Figma inset: top 15.11%, right 5.28%. */ .team-mark { top: max(40px, 8.49vw); right: max(20px, 5.28vw); left: auto; bottom: auto; color: var(--ink); } @media (max-width: 900px) { .team { position: static; min-height: 0; /* keep desktop cream background — earlier override was a leftover */ } .team-photo { height: auto; aspect-ratio: 16 / 9; } .team-eyebrow { position: static; padding: 36px 24px 0; } .team-copy { position: static; padding: 24px 0; width: auto; max-width: none; } .team-btn { position: static; margin: 10px 0 0; align-self: flex-start; } } /* R4 testimonial (98:1099 — 1728×736, bg #1c1d23). Pure text, dark bg. Large quote 70px SemiBold mint-pale with inline RUMENRG mark. Attribution bottom-left, 22px SemiBold uppercase mint-pale. */ .testimonial { position: relative; background: var(--ink); min-height: max(440px, 42.59vw); overflow: hidden; } .testimonial .quote { position: absolute; z-index: 2; top: 16.44%; /* 121 / 736 */ left: max(24px, 5.297vw); right: max(24px, 4.658vw); margin: 0; color: var(--mint-pale); font-family: var(--font); font-size: max(28px, 4.051vw); font-weight: 600; line-height: 1.11; } .testimonial .quote p { margin: 0; } .testimonial .rumenrg-inline { /* Inline RUMENRG mark on dark bg — invert the dark-fill SVG. */ filter: invert(100%) brightness(1.05); height: 0.74em; } .testimonial .quote-attrib { position: absolute; z-index: 2; top: 81.79%; /* 602 / 736 */ left: max(24px, 5.266vw); margin: 0; color: var(--mint-pale); font-family: var(--font); font-size: max(14px, 1.273vw); font-weight: 600; line-height: 1; text-transform: uppercase; } @media (max-width: 900px) { .testimonial { min-height: 0; padding: 64px 24px 56px; } .testimonial .quote { position: static; font-size: max(30px, 7vw); } /* unified ≤900px headline size */ .testimonial .quote-attrib { position: static; margin: 32px 0 0; font-size: max(16px, 2.4vw); } /* unified ≤900px subtext size */ .team-head { font-size: max(30px, 7vw); } /* unified ≤900px headline size */ .team-copy p { font-size: max(16px, 2.4vw); } /* unified ≤900px subtext size */ } /* R4 investor logo strip (98:1133 — 1728×407, bg #eafff1). 5 partner wordmarks centered vertically in a horizontal row. */ .logos { position: relative; display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; gap: max(8px, 1.5vw); padding: max(24px, 3vw) max(24px, 5.84vw); background: var(--mint-pale); min-height: max(220px, 23.55vw); } /* Each .logo image scaled to its Figma height; widths derive from natural aspect-ratio. Heights from get_metadata: marble 43.15, nucleus 43.39, positron 47.76, climate 81.60, bios 65.97. All scale via clamp(). */ .logo { display: block; width: auto; height: auto; object-fit: contain; flex-shrink: 0; } .logo-marble { height: max(22px, 2.50vw); } .logo-nucleus { height: max(22px, 2.51vw); } .logo-positron { height: max(24px, 2.76vw); } .logo-climate { height: max(40px, 4.72vw); } .logo-bios { height: max(34px, 3.82vw); } .logo-science-creates { height: max(34px, 3.7vw); } .logo-plnt { height: max(28px, 3.0vw); } @media (max-width: 900px) { .logos { justify-content: center; gap: 32px 48px; padding: 32px 24px; } } /* R4 farm photo grid (98:1235 — 1728×294, bg #f4ffd3). 4 images in a row, no gap. Each image ~458×306, aspect 1.498. */ .farm-grid { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; background: var(--yellow-pale); } .farm-grid img { width: 100%; height: 100%; aspect-ratio: 458 / 306; object-fit: cover; display: block; } @media (max-width: 900px) { .farm-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 900px) { .farm-grid { grid-template-columns: 1fr; } } /* ======================================================================= Section 15 - Footer Figma frame 8054:6983 — 1728×278, bg #1c1d23, text #eafff1. Address left at (90.89, 96). Email centered around x=1420. LinkedIn icon 46×46 at (1593.22, 85.97). ======================================================================= */ /* R4 footer (98:1248 — 1728×278, bg #1c1d23, text #eafff1). Three blocks positioned absolutely to match Figma anchors. */ .footer { position: relative; background: var(--ink); color: var(--mint-pale); min-height: max(180px, 16.09vw); padding: 0; } .footer-address { position: absolute; top: max(36px, 5.55vw); left: max(24px, 5.262vw); } .footer-address p { margin: 0; color: var(--mint-pale); font-family: var(--font); font-size: max(14px, 1.389vw); font-weight: 400; line-height: 1.1; } .footer-email { position: absolute; top: max(36px, 5.567vw); left: 82.18%; /* 1420 / 1728 */ transform: translateX(-50%); color: var(--mint-pale); font-family: var(--font); font-size: max(14px, 1.389vw); font-weight: 400; line-height: 1.1; text-decoration: none; white-space: nowrap; } .footer-linkedin { position: absolute; top: max(32px, 4.974vw); right: max(20px, 5.06vw); width: max(28px, 2.688vw); height: max(28px, 2.688vw); display: inline-block; } .footer-linkedin img { width: 100%; height: 100%; filter: brightness(0) invert(1); } @media (max-width: 900px) { .footer { padding: 40px 24px 56px; } .footer-address { position: static; } .footer-email { position: static; transform: none; display: block; margin-top: 16px; } .footer-linkedin { position: static; margin-top: 24px; } } /* ======================================================================= MOBILE OVERRIDES — consolidated final pass for <=1024px viewports. Many desktop rules use !important (e.g. approach-detail diagonal padding), so mobile resets need !important too. ======================================================================= */ @media (max-width: 900px) { /* Approach detail: clear desktop's diagonal-following padding/margin so the two columns stack cleanly with normal text alignment */ .approach-left { text-align: left !important; margin-left: 0 !important; padding: 30px !important; min-height: initial !important; background-color: #fff; } .approach-right { text-align: left !important; padding: 0 30px !important; } .approach-left h2, .approach-left .ln1, .approach-left .ln2, .approach-left .ln3, .approach-left .ln4, .approach-right h2, .approach-right .ln1, .approach-right .ln2, .approach-right .ln3, .approach-right .ln4 { display: inline; white-space: normal !important; padding-right: 0 !important; margin-left: 0 !important; } /* Approach hero: shrink h2 to fit narrow viewport */ .approach-hero h2 { font-size: max(28px, 7vw) !important; max-width: calc(100% - 48px) !important; bottom: 24px !important; } .approach-hero .eyebrow { top: 24px !important; left: 24px !important; } /* News section spacing + heading sizes */ .news { padding: 40px 24px 56px; } .news h2, .news h3 { font-size: max(16px, 4.5vw); line-height: 1.2; } .news .linkedin-card { width: 100%; max-width: 100%; } /* Photo break eyebrow position adjust on mobile */ .photo-break .eyebrow { top: auto !important; bottom: 24px; left: 24px !important; } /* Testimonial: stack photo on top, quote panel below */ .testimonial { height: auto !important; display: flex; flex-direction: column-reverse; } .testimonial img { position: relative !important; top: 0 !important; left: 0 !important; width: 100% !important; height: auto !important; aspect-ratio: 16 / 11; } .quote-panel { display: none; } .quote-content { position: relative !important; top: 0 !important; left: 0 !important; width: 100% !important; padding: 32px 24px; background: var(--cream); box-sizing: border-box; } .testimonial blockquote p { white-space: normal !important; } /* (.testimonial blockquote font-size for mobile is set in the later mobile-pass block via the unified max(30px, 7vw) rule.) */ /* Logos: wrap to multiple rows, center each row. All logos keep their base max(minPx, Nvw) sizing so the relative proportions stay correct — only the row layout changes. */ .logos { flex-wrap: wrap !important; justify-content: center; gap: 24px 32px; padding: 32px 24px; min-height: 0 !important; } /* Roadmap: ensure each row's image+text stacks vertically */ .roadmap > .eyebrow { position: relative !important; top: auto !important; left: auto !important; } .road > div { width: auto !important; align-items: flex-start !important; text-align: left !important; } /* Team: don't constrain copy width */ .team-copy { max-width: none !important; } /* Mission: avoid the cream/mint shape clipping body content */ .mission { padding-top: 48px; padding-bottom: 56px; } /* Site-wide: ensure sections with overflow show their full content on mobile (some desktop overflow:hidden cuts content stacked below) */ .section { min-height: 0; } /* Hide hard-wrap
s in headings/paragraphs so copy reflows naturally. The
s have leading spaces in markup so words don't merge. */ .hero h1 br, h2 br, p br { display: none; } /* (The catch-all p { 18px !important; } and the blockquote p { 25px !important; display: inline; } that used to live here have been removed — they were overriding every section's own body-copy size at ≤900px and forcing the testimonial quote to a fixed 25px while killing its line-height. Each blockquote's

now inherits from its parent .testimonial blockquote rule, which sits in the unified max(30px, 7vw) headline tier.) */ } /* Footer paragraphs keep their
s on mobile (Triple Bio / Address / Legal) */ #contact p br { display: block; } /* (600px block moved to end of file so it wins over the mobile-pass 900px block that comes later in source order.) */ /* Extra-small phones: tighten paddings further */ @media (max-width: 480px) { .news h2, .news h3 { font-size: max(15px, 5vw); } .partners-btn, .news-btn, .approach-btn { min-width: 0 !important; width: calc(100% - 48px) !important; max-width: 360px; padding: 10px 20px !important; white-space: initial; text-align: center; } } /* ======================================================================= Scroll-reveal animations — subtle fade + rise/scale/slide as elements enter view. Powered by IntersectionObserver. The html.js gate ensures content is fully visible if JavaScript is unavailable (no FOUC fallback needed because the hidden state is never applied without JS). Honours prefers-reduced-motion. Stagger via per-element --reveal-delay. ======================================================================= */ /* Motion curves — referenced from contemporary studio motion. Two signatures: --ease-settle: soft "back" curve with slight overshoot at y2=1.08 + long settle. Best for object/text reveals — feels alive, lands with a hair of bounce. --ease-cinema: classic in-out S-curve (slow start, fast middle, slow end). Best for slow directional reveals like clip wipes — reads as a deliberate, cinematic stroke. */ :root { --ease-settle: cubic-bezier(0.16, 1.08, 0.38, 0.98); --ease-cinema: cubic-bezier(0.77, 0, 0.175, 1); } /* Mild scroll parallax. JS sets --parallax-y on each .parallax-img every rAF based on the element's vertical position in the viewport (range ~±60px total). Combines with any reveal opacity/filter (reveal-blur, etc.) since those don't use transform. Desktop-only — mobile gets a static photo. */ /* `html.js` already encodes the motion preference (the head script only adds it when `prefers-reduced-motion: reduce` is NOT set), so we don't need a separate `no-preference` media query — Safari has long-standing bugs matching `no-preference`, and using it here silently broke the reveal/parallax effects on that browser. */ @media (min-width: 901px) { html.js .parallax-img { transform: translate3d(0, var(--parallax-y, 0px), 0); will-change: transform; } } /* No `prefers-reduced-motion: no-preference` media gate here — `html.js` already encodes the preference (head script only adds it when reduce is NOT set). Wrapping these rules in `@media (prefers-reduced-motion: no-preference)` silently disabled every reveal animation on Safari, which has a long-standing parser quirk where `no-preference` doesn't reliably match even when no preference is set. */ html.js .reveal, html.js .reveal-scale, html.js .reveal-left, html.js .reveal-right { opacity: 0; transition: opacity 900ms var(--ease-settle) var(--reveal-delay, 0ms), transform 900ms var(--ease-settle) var(--reveal-delay, 0ms); } html.js .reveal { transform: translate3d(0, 40px, 0); } html.js .reveal-scale { transform: scale(0.94); transform-origin: center; } html.js .reveal-left { transform: translate3d(-48px, 0, 0); } html.js .reveal-right { transform: translate3d(48px, 0, 0); } html.js .reveal.in-view, html.js .reveal-scale.in-view, html.js .reveal-left.in-view, html.js .reveal-right.in-view { opacity: 1; transform: none; } /* reveal-wipe: cinematic top-to-bottom clip wipe paired with an opacity fade. Clip uses the in-out S-curve for a slow start / fast middle / slow end — reads as a deliberate stroke. Opacity uses the signature settle curve so the leading edge feathers in instead of cutting hard. */ html.js .reveal-wipe { clip-path: inset(0 0 100% 0); opacity: 0; transition: clip-path 1100ms var(--ease-cinema) var(--reveal-delay, 0ms), opacity 900ms var(--ease-settle) var(--reveal-delay, 0ms); } html.js .reveal-wipe.in-view { clip-path: inset(0 0 0 0); opacity: 1; } /* reveal-blur: defocus-to-focus fade. Image starts blurred and transparent, resolves into focus over a long settle. Used on hero photo where a wipe would compete with the diagonal shape — the blur reveal feels softer and lets the diagonal stay the only directional move on load. */ html.js .reveal-blur { opacity: 0; filter: blur(24px); transition: opacity 1400ms var(--ease-settle) var(--reveal-delay, 0ms), filter 1600ms var(--ease-settle) var(--reveal-delay, 0ms); } html.js .reveal-blur.in-view { opacity: 1; filter: blur(0); } /* reveal-stretch-y: scaleY 0→1 from top — the element appears to draw downward. Used on the roadmap arrows that sit between steps so they trace the path of the user's scroll. Cinema curve for a deliberate stroke. */ html.js .reveal-stretch-y { transform: scaleY(0); transform-origin: top center; opacity: 0; transition: transform 1100ms var(--ease-cinema) var(--reveal-delay, 0ms), opacity 700ms var(--ease-settle) var(--reveal-delay, 0ms); } html.js .reveal-stretch-y.in-view { transform: scaleY(1); opacity: 1; } /* reveal-flip: flips up around its bottom edge like a split-flap board. Used on the eyebrow numbers (01/02/03) so they swing into position as their label wipes in beside them. */ html.js .reveal-flip { opacity: 0; transform: perspective(420px) rotateX(90deg); transform-origin: bottom center; backface-visibility: hidden; transition: opacity 700ms var(--ease-settle) var(--reveal-delay, 0ms), transform 800ms var(--ease-settle) var(--reveal-delay, 0ms); } html.js .reveal-flip.in-view { opacity: 1; transform: none; } /* reveal-mark: each of the three slashes inside the section-mark SVG translates in from the left and fades, in left-to-right reading order. SVG paths are stored right→middle→left, so the delays are reversed. */ html.js .reveal-mark path { opacity: 0; transform: translate3d(-24px, 0, 0); transition: opacity 700ms var(--ease-settle), transform 700ms var(--ease-settle); } html.js .reveal-mark.in-view path { opacity: 1; transform: none; } html.js .reveal-mark.in-view path:nth-child(3) { transition-delay: 0ms; } html.js .reveal-mark.in-view path:nth-child(2) { transition-delay: 140ms; } html.js .reveal-mark.in-view path:nth-child(1) { transition-delay: 280ms; } /* ======================================================================= Mobile refinement pass — phones and small tablets. The scattered ≤1024px blocks above convert each section from absolute to flow layout. This pass tightens font sizes, kills lingering desktop widths, and fixes the specific overflow / oversize issues that appear at ~390px viewports (iPhone 12-class). Keeps the `
`-hiding rule in the earlier 480px block — line breaks designed for 1728px don't help here, so headlines should rely on natural word-wrap. ======================================================================= */ @media (max-width: 900px) { /* Stop horizontal overflow across the document. Many sections have desktop content positioned with absolute pixel offsets that exceed the mobile viewport — clip them at the body so nothing ever scrolls horizontally. */ html, body { overflow-x: hidden; } .section { max-width: 100vw; } /* Universal position reset: every text/image element inside a section that was absolutely positioned for desktop should flow normally on mobile. The earlier 1024px blocks reset .team to static but left .team-head/.team-copy absolute → they then position relative to the viewport, bleeding "Interdisciplinary scientific expertise" up onto the hero. Force flow layout on every heading, paragraph, button, and decorative element. (Excludes section-mark, partner-arrow, news-card- title, hero positioned children, and rumenrg-wordmark which need to keep absolute behavior to overlay correctly.) */ /* Reset desktop absolute positioning for sections that should flow on mobile. Targets specific elements only — benefit-* and approach-detail panel children are intentionally NOT in this list because those sections retain their desktop layout. .news-card-title is also excluded so it can stay overlaid on its image. */ .roadmap-photo, .partner-detail-photo, .team-head, .team-copy, .team-btn, .approach-hero h2, .approach-eyebrow, .roadmap-title, .roadmap-text, .roadmap-eyebrow, .roadmap-body, .roadmap-step h3, .roadmap-body, .toolbox h2, .toolbox-copy, .partners h2, .partners-eyebrow, .partners-btn, .news h2, .news-eyebrow, .news-btn, .news-card-meta, .mission h2, .mission-copy, .testimonial .quote, .testimonial .quote-content, .testimonial blockquote { position: static !important; top: auto !important; bottom: auto !important; left: auto !important; right: auto !important; transform: none !important; max-width: 90% !important; min-width: 0 !important; } /* Photos that flow with text: explicit width/auto-height */ .roadmap-photo, .partner-detail-photo { width: 100% !important; height: auto !important; } /* Brand logo: SVG file has width="100%" height="100%" baked in, so the browser can't compute an intrinsic aspect from it — height:auto would fall back to the 150px default replaced-element height. Use explicit aspect-ratio so height tracks width via the viewBox (273.665 × 35.195). */ .brand { width: max(120px, 38vw) !important; height: auto !important; aspect-ratio: 273.665 / 35.1949 !important; top: 20px !important; left: 24px !important; } /* Specific override for hero h1 — it's a flex child of .hero, so the default min-width:auto would let it stretch to its longest text line and overflow the 390px viewport. Constrain explicitly. */ .hero h1.reveal, .hero h1 { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } .hero .hero-sub { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } /* HERO --------------------------------------------------------------- */ .hero { padding-bottom: 0 !important; } .hero h1 { font-size: max(30px, 7vw) !important; /* unified ≤900px headline size */ line-height: 1.1 !important; margin-top: 96px !important; margin-bottom: 20px !important; padding: 0 24px !important; } .hero-sub { padding: 0 24px !important; font-size: max(16px, 2.4vw) !important; /* unified ≤900px subtext size */ } .hero-btn { margin-left: 24px !important; } /* MISSION ------------------------------------------------------------ */ .mission h2 { font-size: max(30px, 7vw) !important; /* unified ≤900px headline size */ } .mission-copy { font-size: max(16px, 2.4vw) !important; /* unified ≤900px subtext size */ } /* BENEFITS — keep desktop layout (panels + parallelogram photos) on mobile */ /* RUMENRG STATEMENT — wordmark must fit horizontally with side margin */ .rumenrg-statement { height: max(360px, 80vw) !important; } .rumenrg-wordmark { width: 84vw !important; max-width: 600px; top: max(36px, 12vw) !important; } .rumenrg-photo { /* Full-width photo; the desktop translateX(-50%) was leaving half the image off-canvas on mobile — kill it. Cow-nose focal point centered with slight downward bias. */ width: 100% !important; max-width: none !important; height: 100% !important; left: 0 !important; top: 0 !important; transform: none !important; object-fit: cover !important; object-position: 50% 55% !important; } /* TOOLBOX ----------------------------------------------------------- */ .toolbox h2 { font-size: max(30px, 7vw) !important; /* unified ≤900px headline size */ line-height: 1.1 !important; } .toolbox .rumenrg-inline { height: 0.7em !important; } /* PARTNERS — slim closed rows, let open rows size to content. Photo drops below the copy on mobile instead of overlapping absolutely. */ .partner-item, .partner-item--open { min-height: 0 !important; height: auto !important; } .partner-toggle { padding: 16px 56px 16px 0 !important; } .partner-item h3 { font-size: max(20px, 5vw) !important; line-height: 1.1 !important; max-width: none !important; } .partner-arrow { width: 36px !important; height: 36px !important; } /* Photo flows inline beneath the open item's copy instead of overlapping */ .partner-detail-photo { position: relative !important; width: 100% !important; min-width: 100% !important; height: auto !important; aspect-ratio: 4 / 3 !important; opacity: 0 !important; visibility: hidden !important; margin: 0 !important; max-height: 0 !important; transition: max-height 0.5s ease, opacity 0.3s ease, visibility 0s linear 0.5s !important; } .partner-item--open .partner-detail-photo { opacity: 1 !important; visibility: visible !important; max-height: 70vw !important; margin-top: 20px !important; transition: max-height 0.55s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.45s ease 0.15s, visibility 0s linear 0s !important; } .partner-detail-inner { padding: 0 !important; max-width: none !important; } .partner-item--open .partner-detail-inner { padding: 12px 0 8px !important; } /* NEWS — the 2×2 grid stacks; cards must not overflow horizontally */ .news { padding: 56px 24px !important; } .news-grid, .news-row, .event-row { display: flex !important; flex-direction: column !important; gap: 16px !important; width: 100% !important; } .news-card, .news-card-image, .news .linkedin-card, .event-row > * { width: 100% !important; max-width: 100% !important; position: static !important; margin: 0 !important; } .news-card-image img, .event-row img { width: 100% !important; height: auto !important; aspect-ratio: 16 / 10; object-fit: cover; } /* Title overlays the image — needs higher specificity than the static reset above (.section h3) which would otherwise pull it out of overlay. */ .news .news-card-image .news-card-title { position: absolute !important; left: 16px !important; bottom: 16px !important; right: 16px !important; top: auto !important; font-size: max(24px, 6vw) !important; line-height: 1.05 !important; max-width: none !important; color: var(--cream) !important; } .news .news-card-image { position: relative !important; } .news-card-meta, .event-row .meta { font-size: 16px !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; text-align: left !important; width: 100% !important; gap: 4px !important; } .news-card-meta > *, .event-row .meta > * { display: block !important; width: 100% !important; text-align: left !important; } /* ROADMAP ----------------------------------------------------------- */ .roadmap-title { font-size: max(28px, 7.5vw) !important; margin: 0 auto 32px !important; line-height: 1.1 !important; } .roadmap-step { display: flex !important; flex-direction: column !important; gap: 20px !important; padding: 0 0 32px !important; } .roadmap-photo { width: 100% !important; max-width: 100% !important; aspect-ratio: 4 / 3; object-fit: cover; position: static !important; margin: 0 !important; } .roadmap-step--photo-left .roadmap-text, .roadmap-step--photo-right .roadmap-text { padding: 0 24px !important; max-width: none !important; } .roadmap-text br { display: none !important; } /* Reverse the right-photo row so the photo always sits above the text */ .roadmap-step--photo-right { flex-direction: column-reverse !important; } .roadmap-step h3 { font-size: max(30px, 7vw) !important; /* unified ≤900px headline size */ line-height: 1.12 !important; max-width: none !important; } .roadmap-body { font-size: max(16px, 2.4vw) !important; } /* unified ≤900px subtext size */ .roadmap-arrow { align-self: center !important; margin: 8px 0 !important; } .roadmap-arrow img { height: 60px !important; width: auto !important; } /* APPROACH HERO ----------------------------------------------------- */ .approach-hero h2 { font-size: max(30px, 7vw) !important; /* unified ≤900px headline size */ } /* APPROACH DETAIL — keep desktop layout on mobile */ /* TEAM -------------------------------------------------------------- */ .team { padding: 56px 24px !important; } .team-head { font-size: max(30px, 7vw) !important; /* unified ≤900px headline size */ line-height: 1.1 !important; } /* TESTIMONIAL ------------------------------------------------------- */ .testimonial { padding: 56px 36px !important; min-height: 0 !important; } .testimonial blockquote { font-size: max(30px, 7vw) !important; /* unified ≤900px headline size */ line-height: 1.12 !important; /* match .roadmap-step h3 */ } /* SECTION MARKS — keep them present but quieter on mobile */ .section-mark { width: max(36px, 10vw) !important; } /* TESTIMONIAL attribution spacing */ .quote-attrib { margin-top: 0 !important; margin-bottom: 32px !important; } /* Inline RUMENRG mark in body copy — the universal reset turns this img into a flow-style block, but inside a paragraph it should stay inline- sized so the surrounding text reads naturally. Keeps the viewBox aspect-ratio from the base rule so the mark doesn't stretch. */ .rumenrg-inline, .rumenrg-inline.reveal-scale, .rumenrg-inline.reveal-scale.in-view { display: inline !important; width: auto !important; min-width: 0 !important; max-width: none !important; height: 0.7em !important; aspect-ratio: 706.426 / 99.1197 !important; object-fit: contain !important; vertical-align: baseline !important; } /* FOOTER ------------------------------------------------------------ */ .footer { padding: 48px 24px !important; } .footer p { font-size: 15px !important; } } /* ======================================================================= ≤600px overrides — placed last so they win over the broader 900px mobile-pass block earlier in the file. ======================================================================= */ @media (max-width: 600px) { /* News: tighter side gutters */ .news { padding: 56px 16px !important; } /* Approach hero: tighter side gutters */ .approach-hero { min-height: 0 !important; padding: 64px 36px 150px !important; } /* Panel 1 (More Energy for Milk): head moves UP so there's room for the longer body copy and a comfortable gap between them. */ .approach-head--right { top: 24px !important; } .approach-body--right { top: 110px !important; } /* Benefits — panel 1 + 3: text deeper into the clear wedge */ .benefit-eyebrow--right { left: 58vw !important; top: 30px !important; } .benefit-head--right { left: 58vw !important; top: 64px !important; max-width: 38vw !important; } /* Panel 2: shift text IN from the left edge */ .benefit-eyebrow--left { left: 28px !important; top: 30px !important; } .benefit-head--left { left: 28px !important; top: 64px !important; max-width: 38vw !important; } /* Recover the approach CTA from the 480px width override — it should remain a compact pill anchored bottom-left, not span the row. */ .approach-btn { width: auto !important; max-width: none !important; margin: 20px 0 0 !important; text-align: left !important; white-space: nowrap !important; } } /* ≤480px override — placed last so it beats the 600px block above. */ @media (max-width: 480px) { .approach-head--right { top: 40px !important; } .approach-body--right { top: 106px !important; } .approach-head--left { top: 40px !important; } .approach-body--left { top: 80px !important; } } /* ≤420px (smaller phones): crop the parallelograms a bit harder so the text column widens and the image narrows. Nature-identical text (panel 2) also rides higher in the panel here. */ @media (max-width: 420px) { .benefit-panel--photo-left .benefit-photo { transform: translateX(-32%) rotate(180deg) !important; } .benefit-panel--photo-right .benefit-photo { transform: translateX(32%) !important; } .approach-panel--photo-left .approach-photo { transform: translateX(-42%) rotate(180deg) !important; } .approach-panel--photo-right .approach-photo { transform: translateX(42%) !important; } .approach-head--left { top: 20px !important; } .approach-body--left { top: 60px !important; } } /* ≤380px (smallest phones): crop the parallelograms harder still. */ @media (max-width: 380px) { .benefit-panel--photo-left .benefit-photo { transform: translateX(-40%) rotate(180deg) !important; } .benefit-panel--photo-right .benefit-photo { transform: translateX(40%) !important; } .approach-panel--photo-left .approach-photo { transform: translateX(-46%) rotate(180deg) !important; } .approach-panel--photo-right .approach-photo { transform: translateX(46%) !important; } } /* 421-600px range: roadmap padding tightens, and the More Energy for Milk text sits a bit higher in its panel. */ @media (min-width: 421px) and (max-width: 600px) { .roadmap { min-height: 0; padding: 56px 16px 64px !important; } .approach-head--right { top: 25px !important; } .approach-body--right { top: 100px !important; } } /* ---------------------------------------------------------------- Block-editor-only overrides. These selectors only exist inside the editor iframe, so they have no effect on the front end. Two things going on here: 1. Strip the default content-width constraints so full-bleed sections render edge-to-edge of the iframe. 2. The editor canvas is typically wider than a real desktop window (sidebars take ~340px but the iframe still ends up 1500–2000px on a 27" monitor). Since the design uses vw-based sizing everywhere, the wider iframe makes everything render bigger than the front end at a normal desktop width. `zoom:` scales both the layout and the computed vw output, so a tiered match against the iframe's @media width approximates a ~1440px view. ---------------------------------------------------------------- */ .editor-styles-wrapper, .editor-styles-wrapper .is-root-container, .editor-styles-wrapper > .wp-block, .editor-styles-wrapper .wp-block:where(:not([class*="wp-container-"])) { max-width: none !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } .editor-styles-wrapper .wp-block[data-align="full"], .editor-styles-wrapper .alignfull { margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; } /* Zoom scaling is now applied dynamically via assets/js/editor-zoom.js inside the iframe — it reads the iframe's actual clientWidth and sets body.zoom = 1440 / actual, so a 1700px canvas zooms to 0.847, a 1900px canvas zooms to 0.758, etc. That keeps `max(300px, 41.69vw)` floors and vw halves consistent with each other after scaling. */ /* ---------------------------------------------------------------- Section eyebrows — Roboto Mono ALL CAPS at the .benefit-eyebrow size, so every section eyebrow reads the same. Anchored top-left within each section. Existing classes (.partners-eyebrow, .news-eyebrow, .approach-eyebrow) inherit the typography here too. ---------------------------------------------------------------- */ .mission-eyebrow, .rumenrg-eyebrow, .toolbox-eyebrow, .approach-detail-eyebrow, .roadmap-eyebrow-section, .team-eyebrow, .logos-eyebrow, .footer-eyebrow, .partners-eyebrow, .news-eyebrow, .approach-eyebrow, .photo-break > .eyebrow, .photo-break-aerial > .eyebrow, .team-photo > .eyebrow { font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace !important; font-size: max(18px, 1.736vw) !important; font-weight: 500 !important; line-height: 1.4; letter-spacing: 0; text-transform: uppercase; } /* Newly-added section eyebrows that need explicit absolute positioning (existing classes like .partners-eyebrow already have their own). */ .mission-eyebrow, .rumenrg-eyebrow, .toolbox-eyebrow, .approach-detail-eyebrow, .roadmap-eyebrow-section, .team-eyebrow, .logos-eyebrow, .footer-eyebrow { position: absolute; z-index: 5; top: max(40px, 4.98vw); left: max(24px, 5.252vw); margin: 0; color: var(--ink); } /* Per-card .benefit-eyebrow and per-step .roadmap-eyebrow get Roboto Mono on both spans (number + label). */ .benefit-eyebrow, .benefit-eyebrow > span, .roadmap-eyebrow, .roadmap-eyebrow > span { font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace !important; font-weight: 500 !important; text-transform: uppercase; } /* Extra breathing room above section headings to accommodate the newly-added eyebrows above them. Pushes the heading down within its absolutely-positioned section. */ .mission h2 { top: 23% !important; } .team-head { top: 22% !important; } .toolbox h2 { top: 23% !important; } .rumenrg-wordmark { top: max(96px, 13.2vw) !important; } /* Approach Hero — eyebrow was sitting too low (Figma 18.14%). Pull it up close to the top now that it's the section's "03 Technology" label. */ .approach-eyebrow { top: 6% !important; } /* Logos eyebrow ("5.2 Partners") was anchored too low — bump it up within the section. */ .logos-eyebrow { top: max(20px, 2.4vw) !important; } /* Footer eyebrow ("07 Contact us") sits dark on a dark background by default — flip to mint-pale, and align with the .footer-email + .footer-linkedin top row. The whole footer is reshaped: less top padding, more bottom padding, and the address sits below the top row. */ .footer { min-height: max(260px, 22vw); padding-bottom: max(48px, 4vw); } .footer-eyebrow { color: var(--mint-pale) !important; top: max(24px, 3vw) !important; left: max(24px, 5.262vw); } .footer-email { top: max(24px, 3vw) !important; } .footer-linkedin { top: max(20px, 2.4vw) !important; } .footer-address { top: max(96px, 11vw) !important; } @media (max-width: 900px) { .mission h2, .team-head, .toolbox h2 { top: auto !important; } .rumenrg-wordmark { top: 56px !important; } .footer-address { top: auto; } } /* Dark backgrounds — light eyebrow color */ .rumenrg-eyebrow, .toolbox-eyebrow, .photo-break > .eyebrow, .photo-break-aerial > .eyebrow, .team-photo > .eyebrow { color: var(--mint-pale, #eafff1) !important; } /* Photo-break eyebrows sit on top of the image */ .photo-break > .eyebrow, .photo-break-aerial > .eyebrow, .team-photo > .eyebrow { position: absolute; z-index: 2; top: max(40px, 4.98vw); left: max(24px, 5.252vw); margin: 0; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); } @media (max-width: 900px) { /* All eyebrows render at one unified size on mobile */ .mission-eyebrow, .rumenrg-eyebrow, .toolbox-eyebrow, .approach-detail-eyebrow, .roadmap-eyebrow-section, .team-eyebrow, .logos-eyebrow, .footer-eyebrow, .partners-eyebrow, .news-eyebrow, .approach-eyebrow, .benefit-eyebrow, .benefit-eyebrow > span, .roadmap-eyebrow, .roadmap-eyebrow > span, .photo-break > .eyebrow, .photo-break-aerial > .eyebrow, .team-photo > .eyebrow { font-size: max(20px, 2.5vw) !important; line-height: 1.3 !important; letter-spacing: 0 !important; } /* Sections that become block layout on mobile — eyebrow flows in as the first child, using the section's own padding for left alignment (margin-left: 0). */ .mission-eyebrow, .toolbox-eyebrow, .approach-detail-eyebrow, .roadmap-eyebrow-section, .team-eyebrow, .footer-eyebrow { position: static !important; top: auto !important; left: auto !important; margin: 0 0 24px !important; } /* Sections that KEEP their positioned/full-bleed layout on mobile — eyebrow stays absolute, anchored top-left of the section. */ .rumenrg-eyebrow, .photo-break > .eyebrow, .photo-break-aerial > .eyebrow, .team-photo > .eyebrow { position: absolute !important; top: 20px !important; left: 24px !important; z-index: 5 !important; margin: 0 !important; } /* Logos section stays display:flex on mobile. Pull the eyebrow out of the flex row by giving it 100% basis + order:-1, so "5.2 Partners" sits ABOVE the logo strip. */ .logos { flex-wrap: wrap !important; } .logos-eyebrow { position: static !important; top: auto !important; left: auto !important; flex-basis: 100% !important; order: -1 !important; margin: 0 0 20px !important; text-align: left !important; } /* Inline RUMENRG mark in the testimonial quote — reins it in. 0.74em was scaling too large against the 30px+ mobile quote. */ .testimonial .rumenrg-inline { height: 0.55em !important; } } /* ---------------------------------------------------------------- Hero secondary CTA — sits below the primary "Get in touch" button. When the secondary exists, push the primary up by approximately one button-height + gap so they stack neatly. ---------------------------------------------------------------- */ .hero-btn-secondary { position: absolute; z-index: 5; left: max(24px, 5.46vw); bottom: max(40px, 5.382vw); } .hero:has(.hero-btn-secondary) .hero-btn:not(.hero-btn-secondary) { bottom: calc(max(40px, 5.382vw) + max(60px, 4vw) + max(14px, 1vw)); } @media (max-width: 900px) { .hero-btn-secondary { position: static !important; left: initial !important; bottom: initial !important; margin: 12px 0 0 24px !important; } .hero:has(.hero-btn-secondary) .hero-btn:not(.hero-btn-secondary) { bottom: initial; } } /* ---------------------------------------------------------------- R5 mobile fine-tuning — eyebrow alignment + footer sizing. Loaded after all earlier mobile rules so these win the cascade. ---------------------------------------------------------------- */ @media (max-width: 900px) { /* 1.1 / 1.2 / 1.3 — more margin-bottom between the per-card eyebrow and the benefit-head. Achieved by pushing benefit-head down. */ .benefit-head { top: 96px !important; } /* 02 Product — sit in the same place as "2.1 Applications" in the Toolbox section: top/left match Toolbox's 48px / 36px padding. */ .rumenrg-eyebrow { top: 48px !important; left: 36px !important; } /* 04 Roadmap — align with the per-step "4.1 Today" text. Roadmap section pads 23px; per-step .roadmap-text pads another 12px, so the step content sits 35px from the edge. Match it. */ .roadmap-eyebrow-section { margin-left: 12px !important; } /* 05 About us — same 35px-from-edge as the roadmap step text. */ .team-photo > .eyebrow { left: 35px !important; } /* 5.1 Team — match "Interdisciplinary scientific expertise" which inherits .team's 24px mobile padding. Explicit no-margin reset so nothing sneaks in. */ .team-eyebrow { padding-left: 0 !important; margin-left: 0 !important; } /* 5.2 Partners — match "06 News & Events" left edge. Both sections pad 24px on mobile, so margin-left:0 inherits it cleanly. */ .logos-eyebrow { padding-left: 0 !important; margin-left: 0 !important; } /* RUMENRG inline in the testimonial quote — em-based height was still rendering ~90–120px wide against a narrow mobile line. Cap by absolute pixel width instead so it scales with the design rather than the surrounding em. */ .testimonial .rumenrg-inline { height: auto !important; width: max(64px, 18vw) !important; max-width: 28% !important; vertical-align: middle !important; } /* Footer — bump every text element so "07 Contact us" and the address/email read at the same scale as the rest of the mobile copy. */ .footer-eyebrow { font-size: max(20px, 4.5vw) !important; } .footer-address, .footer-address p { font-size: max(18px, 4vw) !important; line-height: 1.4 !important; } .footer-email { font-size: max(20px, 4.5vw) !important; } .footer-linkedin { width: max(32px, 7vw) !important; height: max(32px, 7vw) !important; } } /* ---------------------------------------------------------------- R5 mobile fine-tuning (round 2). High-specificity overrides for the footer (existing .footer p rule was winning) and per-issue nudges for RUMENRG wordmark + inline mark + logos eyebrow. ---------------------------------------------------------------- */ @media (max-width: 900px) { /* Yellow RUMENRG wordmark — drop it lower in the product section so the "02 Product" eyebrow has clear space above it. */ .rumenrg-wordmark { top: max(120px, 17vw) !important; } /* RUMENRG inline in testimonial quote — bump to ~7em wide (matches the surrounding text scale). */ .testimonial .rumenrg-inline { height: auto !important; width: 7em !important; max-width: 100% !important; vertical-align: middle !important; } /* Logos: drop flex on mobile so the eyebrow + logo strip stack as plain blocks. "5.2 Partners" then sits at the same 24px-from-edge as the News eyebrow in the section above. */ .logos { display: block !important; padding: 32px 24px 40px !important; } .logos-eyebrow { position: static !important; display: block !important; margin: 0 0 24px !important; padding-left: 0 !important; text-align: left !important; width: auto !important; } .logos .logo { display: inline-block !important; vertical-align: middle !important; margin: 0 12px 16px 0 !important; max-width: 28% !important; height: auto !important; } /* Footer — beat the existing ".footer p { font-size:15px !important }" by using more specific selectors. Unify every text element to the same scale so eyebrow / address / email read as one set. */ .footer p.footer-eyebrow { font-size: max(18px, 4.5vw) !important; } .footer .footer-address, .footer .footer-address p { font-size: max(16px, 3.8vw) !important; line-height: 1.5 !important; } .footer a.footer-email { font-size: max(16px, 3.8vw) !important; } .footer a.footer-linkedin { width: max(28px, 6vw) !important; height: max(28px, 6vw) !important; } } /* ---------------------------------------------------------------- R5 mobile fine-tuning (round 3) — last word for cascade. Loaded at the very end so these rules win against earlier mobile blocks. ---------------------------------------------------------------- */ @media (max-width: 900px) { /* LOGOS — restore flex layout so the strip wraps cleanly. The eyebrow is taken out of flex entirely (absolute) so its left edge is a literal 24px from the screen, exactly like the .news-eyebrow which sits inside .news's 24px padding. */ .logos { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: center !important; gap: 24px 32px !important; padding: 80px 24px 40px !important; position: relative !important; } .logos-eyebrow { position: absolute !important; top: 32px !important; left: 24px !important; right: auto !important; margin: 0 !important; padding: 0 !important; width: auto !important; flex-basis: auto !important; order: 0 !important; text-align: left !important; } .logos .logo { display: inline-block !important; margin: 0 !important; max-width: 40% !important; height: auto !important; } /* RUMENRG inline in quote — slightly smaller + a touch of vertical breathing room. */ .testimonial .rumenrg-inline { width: 6em !important; height: auto !important; margin: 0.25em 0.05em !important; } /* FOOTER — drop the high-vw scaling that ballooned text at tablet widths. Eyebrow uses the SAME formula as the other section eyebrows; all other footer text matches it. Icon scales proportionally. */ .footer p.footer-eyebrow, .footer .footer-address, .footer .footer-address p, .footer a.footer-email { font-size: max(20px, 2.5vw) !important; line-height: 1.4 !important; } .footer a.footer-linkedin { width: max(28px, 3.5vw) !important; height: max(28px, 3.5vw) !important; } } /* ---------------------------------------------------------------- FINAL fix for 5.2 Partners alignment — match the .news-eyebrow which has padding-left: 24px ON TOP of .news's 24px padding, totalling 48px from the screen edge. The logos eyebrow goes back to the same static + flex-basis approach with matching padding. ---------------------------------------------------------------- */ @media (max-width: 900px) { .logos { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: center !important; gap: 24px 32px !important; padding: 32px 24px 40px !important; position: static !important; } .logos-eyebrow { position: static !important; top: auto !important; left: auto !important; right: auto !important; flex-basis: 100% !important; order: -1 !important; padding: 0 0 0 24px !important; margin: 0 0 24px !important; width: auto !important; text-align: left !important; } } /* ---------------------------------------------------------------- Hero: stack room for the secondary "RUMENRG™" CTA. Pull H1 + sub up so two stacked buttons at the bottom have space. ---------------------------------------------------------------- */ .hero h1 { top: max(160px, 19vw) !important; } .hero-sub { top: max(360px, 42vw) !important; } /* ---------------------------------------------------------------- Secondary CTA — white text, white outline, transparent fill. Two pseudo-elements re-create the parallelogram clip with a 2px white ring: ::before paints the full white parallelogram, ::after sits 2px inside in the hero's ink color (visually = transparent). ---------------------------------------------------------------- */ .hero-btn.hero-btn-secondary { background: transparent !important; color: var(--mint-pale) !important; position: absolute; /* keep base positioning */ isolation: isolate; /* new stacking context for z-index:-1 below */ } .hero-btn.hero-btn-secondary::before, .hero-btn.hero-btn-secondary::after { content: ""; position: absolute; inset: 0; clip-path: polygon(var(--btn-slope) 0, 100% 0, calc(100% - var(--btn-slope)) 100%, 0 100%); z-index: -1; } .hero-btn.hero-btn-secondary::before { background: var(--mint-pale); } .hero-btn.hero-btn-secondary::after { inset: 2px; background: var(--ink); } .hero-btn.hero-btn-secondary:hover { opacity: 0.85; } /* Desktop nudges from R5 round 2 */ .approach-eyebrow { top: 14% !important; } /* 03 Technology — push DOWN */ .team-photo > .eyebrow { top: max(20px, 2.2vw) !important; } /* 05 About us — pull UP */ /* ---------------------------------------------------------------- Hero CTA hovers + mobile-friendly stacking. Wrapper div .hero-cta-group is transparent on desktop (display: contents) so the existing absolute positioning rules for .hero-btn / .hero-btn-secondary still target .hero. On mobile, the wrapper becomes a row-wrap flex container so the two buttons sit side-by-side and wrap onto a second line if the viewport is narrow. Hover: primary inverts (ink bg, yellow-pale text); secondary fills in (mint-pale bg, ink text). Both have smooth color transitions. ---------------------------------------------------------------- */ /* Wrapper is transparent in the layout — children remain direct visual children of .hero on desktop. */ .hero-cta-group { display: contents; } /* Smooth color transitions on both CTAs. `filter` must be in the list — the primary hover swaps brightness via filter, so without it the mouseout snaps while opacity/color are still easing. */ .hero-btn, .hero-btn::before, .hero-btn::after { transition: background-color 220ms ease, color 220ms ease, opacity 220ms ease, filter 220ms ease; } /* PRIMARY — explicit brightness(1) baseline so the :hover brightness(1.12) interpolates smoothly in BOTH directions. Without this, the base is `filter: none` and Chrome can snap from brightness(1.12) → none on mouseout instead of easing. */ .hero-btn:not(.hero-btn-secondary) { filter: brightness(1); } /* PRIMARY HOVER — subtle lightness shift only */ .hero-btn:hover:not(.hero-btn-secondary), .hero-btn:focus-visible:not(.hero-btn-secondary) { filter: brightness(1.12); opacity: 1 !important; } /* SECONDARY HOVER — fill in: mint-pale becomes the inner color, text flips to ink for contrast. */ .hero-btn.hero-btn-secondary:hover, .hero-btn.hero-btn-secondary:focus-visible { color: var(--ink) !important; opacity: 1 !important; } .hero-btn.hero-btn-secondary:hover::after, .hero-btn.hero-btn-secondary:focus-visible::after { background: var(--mint-pale) !important; } /* ---------------------------------------------------------------- Mobile: lay out the two hero CTAs side-by-side and wrap if needed. Also fix the missing border on the secondary — the existing mobile `.hero-btn { position: static !important }` rule was breaking the absolute-positioned pseudo-elements that draw the outline. ---------------------------------------------------------------- */ @media (max-width: 900px) { .hero-cta-group { display: flex !important; flex-flow: row wrap !important; gap: 12px !important; margin: 24px 24px 32px !important; align-items: center !important; /* Match the per-button order (2) so the group slots between hero-sub (order 1) and the hero image (order 3) — without this, the group's default order:0 placed it BEFORE hero-sub on phones. */ order: 2 !important; } .hero-cta-group .hero-btn, .hero-cta-group .hero-btn-secondary { position: relative !important; margin: 0 !important; left: auto !important; bottom: auto !important; } /* Mobile: hero-sub joins normal flow between the heading and the CTA group instead of being absolutely positioned below them. Order:1 (already set by the existing mobile rule) keeps it between h1 (order:0) and the CTA group (order:2). */ .hero-sub { position: static !important; top: auto !important; left: auto !important; max-width: none !important; margin: 0 24px 16px !important; padding: 0 !important; color: var(--mint-pale) !important; } /* Launch: no mobile nav menu — hide the hamburger trigger. */ button.hamburger { display: none !important; } .mobile-nav { display: none !important; } } /* ---------------------------------------------------------------- Benefits — accordion v5. Wraps the ORIGINAL .benefit-panel layout (lines 713-803) without touching it: parallelogram photo with translateX overflow, absolute-positioned eyebrow + heading in the clear wedge. New: .benefit-body added below the heading in the wedge. Accordion: toggle row stays at full height when open; only the label fades. Panel drops down below with smooth easing. ---------------------------------------------------------------- */ .benefits { min-height: auto !important; background: var(--yellow-pale); } .benefit-list { position: relative; margin: 0; padding: 0; list-style: none; } .benefit-item { position: relative; border-top: 1px solid var(--line); } .benefit-item:last-child { border-bottom: 1px solid var(--line); } /* Toggle row. Collapses entirely when open so no empty "gulf" sits above the panel. Sequence: label fades first → row collapses → panel drops down. */ .benefit-toggle { position: relative; display: flex; align-items: center; width: 100%; margin: 0; padding: max(28px, 3.36vw) max(48px, 8.27vw) max(28px, 3.36vw) max(24px, 5.137vw); background: transparent; border: 0; cursor: pointer; text-align: left; color: inherit; font: inherit; -webkit-appearance: none; appearance: none; overflow: visible; max-height: 400px; transition: padding 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.15s, max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.15s; } .benefit-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: -4px; } .benefit-item--open .benefit-toggle { padding-top: 0 !important; padding-bottom: 0 !important; max-height: 0 !important; } .benefit-toggle-label { margin: 0; max-width: max(280px, 58.62vw); color: var(--ink); font-family: var(--font); font-size: max(28px, 4.051vw); font-weight: 600; line-height: 1.03; max-height: 4em; overflow: hidden; transition: opacity 0.2s ease, max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.15s; } .benefit-item--open .benefit-toggle-label { opacity: 0; max-height: 0; pointer-events: none; } /* Arrow: visible only when the row is closed; fades out alongside the label when the row opens. Centered vertically in the toggle. */ .benefit-arrow { position: absolute; z-index: 5; right: max(24px, 5.47vw); top: 50%; transform: translateY(-50%); width: max(48px, 4.31vw); height: max(48px, 4.31vw); display: inline-block; pointer-events: none; transition: opacity 0.2s ease; } .benefit-item--open .benefit-arrow { opacity: 0; } .benefit-arrow img { width: 100%; height: 100%; display: block; } /* Drop-down container: starts after the toggle has begun collapsing so the motion feels sequential, not stacked. */ .benefit-detail { max-height: 0; opacity: 0; overflow: hidden; width: 100%; transition: max-height 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease; } .benefit-item--open .benefit-detail { max-height: max(480px, 42vw); opacity: 1; transition: max-height 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.25s, opacity 0.2s ease 0s; } /* Panel: shorter than the original so the open accordion item isn't so tall. Border-top dropped (the .benefit-item already provides one). */ .benefit-detail > .benefit-panel { height: max(360px, 40vw); border-top: 0; } /* Compress the original absolute positions so eyebrow/head/body still fit inside the shorter panel. */ .benefit-detail .benefit-eyebrow { top: max(28px, 3.5vw); } .benefit-detail .benefit-head { top: max(120px, 14vw); } .benefit-detail .benefit-body { top: max(220px, 26vw); } /* On panels 1 & 3 (photo-left → text on the right), shift the whole text column ~5vw further RIGHT so it pulls away from the diagonal edge. */ .benefit-detail .benefit-eyebrow--right { left: max(24px, 67vw); } .benefit-detail .benefit-head--right { left: max(24px, 54vw); } .benefit-detail .benefit-body--right { left: max(24px, 54vw); } /* Body — absolute-positioned under the heading on the text side, mirroring how .benefit-head is positioned. */ .benefit-body { position: absolute; z-index: 1; top: max(300px, 35vw); margin: 0; max-width: max(280px, 36vw); color: var(--ink); font-family: var(--font); font-size: max(16px, 1.621vw); font-weight: 400; line-height: 1.45; } .benefit-body--right { left: max(24px, 48.71vw); right: auto; } .benefit-body--left { left: max(24px, 5.075vw); right: auto; } .benefit-body p { margin: 0 0 0.6em; } .benefit-body p:last-child { margin-bottom: 0; } @media (prefers-reduced-motion: reduce) { .benefit-detail, .benefit-item--open .benefit-detail, .benefit-toggle-label, .benefit-arrow img { transition: none !important; } } /* ---- mobile ---- */ @media (max-width: 900px) { .benefit-toggle { padding: 20px 56px 20px 24px; } .benefit-toggle-label { font-size: max(22px, 6vw); } .benefit-arrow { right: 16px; width: 36px; height: 36px; } .benefit-item--open .benefit-detail { max-height: 1400px; } .benefit-body { position: static !important; max-width: none !important; margin: 16px 24px 24px !important; font-size: max(15px, 4vw); } } /* ========================================================================= Launch additions (2026-05-19): section-number eyebrow base styles + contact page form layout. The hero secondary CTA and benefits accordion are already styled earlier in this stylesheet. ========================================================================= */ .mission-eyebrow, .toolbox-eyebrow, .roadmap-section-eyebrow, .team-eyebrow, .contact-eyebrow { font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 500; letter-spacing: 0; margin: 0 0 max(12px, 1.2vw); } .toolbox-sub-eyebrow { font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 500; letter-spacing: 0; font-size: max(11px, 1.05vw); text-transform: uppercase; margin: 0 0 max(8px, 0.6vw); } /* ---- Contact page (dedicated /contact route) ---- */ .contact-page { padding: max(48px, 6vw) max(24px, 5vw) max(80px, 9vw); background: var(--cream); } .contact-page .contact-head { margin: max(16px, 1.5vw) 0 max(24px, 2vw); font-size: max(34px, 4.5vw); font-weight: 700; line-height: 1.05; } .contact-page .contact-lede { margin: 0 0 max(32px, 3vw); max-width: 60ch; font-size: max(16px, 1.2vw); line-height: 1.5; } .contact-form { display: grid; gap: max(14px, 1.2vw); max-width: 640px; } .contact-form label { display: block; font-weight: 600; margin-bottom: 6px; } .contact-form input, .contact-form textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--ink); background: var(--white); font: inherit; } .contact-form textarea { min-height: 140px; resize: vertical; } @media (min-width: 720px) { .contact-form .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: max(14px, 1.2vw); } } /* Inline LinkedIn names in the team body — underline + hover */ .team-copy a[href*="linkedin.com"] { color: inherit; text-decoration: underline; text-underline-offset: 0.15em; text-decoration-thickness: 1px; transition: opacity 0.15s ease; } .team-copy a[href*="linkedin.com"]:hover, .team-copy a[href*="linkedin.com"]:focus-visible { opacity: 0.7; } /* ---------------------------------------------------------------- Launch-day adjustments (R5 final pass). ---------------------------------------------------------------- */ /* News grid stays at the Figma 2-column layout on desktop; mobile collapses to single column via the existing base mobile rule. With 5 cards in 2 columns we need 3 rows — grow the section + drop the `bottom` anchor on the grid so card images keep their natural 749:434 aspect instead of being squashed to fit a fixed height. */ .news { min-height: max(1100px, 120vw) !important; } .news-grid { bottom: auto !important; grid-auto-rows: auto !important; } @media (max-width: 900px) { .news-grid { grid-template-columns: 1fr !important; } .news { min-height: 0 !important; } } /* Roadmap — add a little extra room at the bottom so the final step's body doesn't butt against the next section's photo. Step positions stay at their Figma values; touching them desyncs the arrow connectors which are positioned by their own absolute top values. */ .roadmap { padding-bottom: max(72px, 6vw) !important; } .roadmap-step:last-of-type .roadmap-text { padding-top: 0 !important; } /* Team — shift the H2 and the body copy both upward (absolute vw values, no longer % of section), and grow the section enough that there's a comfortable breathing strip under the "Get in touch" CTA. */ .team { min-height: max(720px, 74vw) !important; } .team-head { top: max(120px, 11vw) !important; } .team-copy { top: max(440px, 38vw) !important; } /* PLNT logo: cap its height on mobile so the stacked mark doesn't over-dominate the partner strip vs the other monoline logos. */ @media (max-width: 900px) { .logo-plnt { max-height: 50px !important; } } /* ---------------------------------------------------------------- Launch-day mobile pass (per Sophie's review). Loaded at the end so these win the cascade over earlier mobile rules in this stylesheet. ---------------------------------------------------------------- */ /* Benefits accordion (1.1 / 1.2 / 1.3) — on mobile keep the desktop parallelogram layout and scale EVERYTHING linearly with viewport width using bare vw values. Single uniform photo transform across all mobile breakpoints so the wedge starts at the same relative position, panel height a constant percent of viewport. */ @media (max-width: 900px) { .benefit-detail > .benefit-panel { height: 42vw !important; min-height: 0 !important; } .benefit-detail .benefit-photo { height: 100% !important; width: auto !important; } /* Uniform mobile photo transform — overrides the 480/420/380 jumps defined earlier so the parallelogram cut sits at the same vw position whether the viewport is 360 or 900. */ .benefit-detail .benefit-panel--photo-left .benefit-photo { transform: translateX(-22%) rotate(180deg) !important; } .benefit-detail .benefit-panel--photo-right .benefit-photo { transform: translateX(22%) !important; } .benefit-toggle-label { font-size: 4.5vw !important; line-height: 1.08 !important; max-width: calc(100% - 56px) !important; } .benefit-detail .benefit-eyebrow, .benefit-detail .benefit-eyebrow > span, .benefit-eyebrow, .benefit-eyebrow > span { font-size: 1.6vw !important; line-height: 1.1 !important; letter-spacing: 0 !important; } .benefit-detail .benefit-eyebrow, .benefit-eyebrow { top: 4vw !important; gap: 0.8vw !important; white-space: nowrap !important; } .benefit-detail .benefit-head, .benefit-head { font-size: 4.4vw !important; line-height: 1.1 !important; top: 8.5vw !important; max-width: 44vw !important; } .benefit-detail .benefit-body { position: absolute !important; margin: 0 !important; max-width: 42vw !important; top: 21vw !important; font-size: 2.2vw !important; line-height: 1.4 !important; } /* Text column inside the wedge — uniform across mobile. Head + body shifted slightly further LEFT than the eyebrow so they hug the diagonal cut, with the body the widest of the three. */ .benefit-detail .benefit-eyebrow--right { left: 58vw !important; } .benefit-detail .benefit-head--right { left: 54vw !important; } .benefit-detail .benefit-body--right { left: 44vw !important; top: 25vw !important; max-width: 42vw !important; right: auto !important; } .benefit-detail .benefit-eyebrow--left { left: 5vw !important; } .benefit-detail .benefit-head--left { left: 5vw !important; } .benefit-detail .benefit-body--left { left: 5vw !important; right: auto !important; } } /* ≤768px: bump eyebrow up to 2.6vw (was 1.6 at 900) so it reads properly on phones where vw resolves to smaller pixel counts. */ @media (max-width: 768px) { .benefit-detail .benefit-eyebrow, .benefit-detail .benefit-eyebrow > span, .benefit-eyebrow, .benefit-eyebrow > span { font-size: 2.6vw !important; } } /* Approach Detail (panel 2 — "More energy for milk") tweaks. Sophie called these out explicitly: body text needs to be smaller below 900, and the left-panel body / head need to sit closer to the top-left of the clear wedge at the two phone breakpoints. */ @media (max-width: 900px) { .approach-body { font-size: max(12px, 2vw) !important; } .approach-body--left { top: 120px !important; } } @media (max-width: 768px) { .approach-head--left { left: 25px !important; } .approach-body--left { top: 70px !important; left: 25px !important; } } /* ---------------------------------------------------------------- Inline contact form in the 07 Contact us footer. The footer is dark (--ink bg / --mint-pale text), so the form inverts: input fields are mint-pale outlined, label text small Roboto Mono uppercase, submit button matches the site's primary pill style. The existing absolute-positioned eyebrow / address / email / linkedin are pushed below the form via min-height growth. ---------------------------------------------------------------- */ .footer { min-height: 0; padding: max(64px, 7vw) max(24px, 5.262vw) max(48px, 4vw); } .footer-form { position: relative; z-index: 1; margin: max(40px, 4vw) 0 max(48px, 4vw); max-width: none; } .footer-form-privacy { margin: max(20px, 1.8vw) 0 0; color: var(--mint-pale); opacity: 0.7; font-family: var(--font); font-size: max(13px, 0.92vw); line-height: 1.5; max-width: 72ch; } .footer-form-privacy a { color: var(--mint-pale); text-decoration: underline; text-underline-offset: 0.18em; } /* Hide the "Fields marked with an * are required" note. */ .footer .nf-form-fields-required { display: none !important; } /* Two-column desktop layout: First/Last on row 1, Email/Company on row 2, Message full width, Submit full width. Ninja Forms wraps fields in , so the grid lives on that custom element (not on .nf-form-content). */ .footer .nf-form-content { max-width: none; } .footer nf-fields-wrap { display: grid !important; grid-template-columns: 1fr 1fr; gap: max(16px, 1.4vw) max(20px, 1.8vw); } .footer nf-fields-wrap > nf-field { min-width: 0; } .footer nf-fields-wrap > nf-field .nf-field-container { margin-bottom: 0; } /* Make the message + submit rows span the full width — target the outer via :has() since the type-specific class lives on the inner .nf-field-container. */ .footer nf-fields-wrap > nf-field:has(.textarea-container), .footer nf-fields-wrap > nf-field:has(.submit-container) { grid-column: 1 / -1; } @media (max-width: 768px) { .footer nf-fields-wrap { grid-template-columns: 1fr; } } /* Ninja Forms — neutralize their default look so it inherits the Triple Bio palette. */ .footer .nf-form-cont { color: var(--mint-pale); font-family: var(--font); } .footer .nf-form-content { padding: 0; max-width: none; } .footer .nf-field-container { margin-bottom: max(16px, 1.4vw); } .footer .nf-field-label label, .footer .nf-field-label { color: var(--mint-pale); font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: max(11px, 0.85vw); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: max(6px, 0.5vw); } .footer .nf-field-element input[type="text"], .footer .nf-field-element input[type="email"], .footer .nf-field-element input[type="tel"], .footer .nf-field-element textarea { width: 100%; padding: 12px 14px; background: transparent; border: 1px solid var(--mint-pale); color: var(--mint-pale); font-family: var(--font); font-size: max(15px, 1.1vw); line-height: 1.3; border-radius: 0; box-shadow: none; -webkit-appearance: none; appearance: none; } .footer .nf-field-element input::placeholder, .footer .nf-field-element textarea::placeholder { color: var(--mint-pale); opacity: 0.55; } .footer .nf-field-element input:focus, .footer .nf-field-element textarea:focus { outline: none; border-color: var(--yellow-pale, #f5ff8a); background: rgba(255, 255, 255, 0.04); } .footer .nf-field-element textarea { min-height: 140px; resize: vertical; } /* Submit button — mint-pale pill on dark, matches the site's light-on-dark buttons (.team-btn etc.). */ .footer .nf-field-container.submit-container { margin-top: max(8px, 1vw); } .footer .nf-field-element input[type="button"], .footer .nf-field-element input[type="submit"] { display: inline-block; padding: max(12px, 1vw) max(24px, 2vw); background: var(--mint-pale); color: var(--ink); border: 1px solid var(--mint-pale); font-family: var(--font); font-size: max(14px, 1.031vw); font-weight: 600; letter-spacing: 0.02em; cursor: pointer; border-radius: 0; transition: background 0.2s ease, color 0.2s ease; -webkit-appearance: none; appearance: none; } .footer .nf-field-element input[type="button"]:hover, .footer .nf-field-element input[type="submit"]:hover { background: transparent; color: var(--mint-pale); } /* Validation + success messaging on dark bg */ .footer .nf-error-msg, .footer .ninja-forms-req-symbol { color: #ff9d8a; } .footer .nf-response-msg p, .footer .nf-form-fields-required { color: var(--mint-pale); font-family: var(--font); } /* Address / email / linkedin sit BELOW the form in a flex row: address on the left, email + linkedin on the right. */ .footer-eyebrow { position: static !important; margin: 0 0 max(24px, 2vw) !important; top: auto !important; left: auto !important; } .footer-meta { display: flex; align-items: flex-end; justify-content: space-between; gap: max(24px, 3vw); margin-top: max(48px, 5vw); } .footer-address { position: static !important; top: auto !important; left: auto !important; margin: 0 !important; flex: 1 1 auto; } .footer-contact-row { display: flex; align-items: center; gap: max(20px, 1.8vw); flex: 0 0 auto; } .footer-email { position: static !important; top: auto !important; left: auto !important; transform: none !important; margin: 0 !important; display: inline-block; } .footer-linkedin { position: static !important; top: auto !important; right: auto !important; margin: 0 !important; flex-shrink: 0; } @media (max-width: 600px) { .footer-meta { flex-direction: column; align-items: flex-start; gap: max(24px, 4vw); } } @media (max-width: 768px) { .footer-form { margin: max(32px, 4vw) 0 max(32px, 3vw); } .footer-form-heading { font-size: max(26px, 5.5vw); } .footer-form-lede { font-size: max(14px, 3.4vw); } .footer .nf-field-element input[type="text"], .footer .nf-field-element input[type="email"], .footer .nf-field-element input[type="tel"], .footer .nf-field-element textarea { font-size: max(15px, 3.6vw); } } /* ---------------------------------------------------------------- Internal page template (page.php) — used by /privacy-policy/. Dark band at the top with brand + page title, prose container below. ---------------------------------------------------------------- */ .site-header { position: relative; background: var(--ink); min-height: max(96px, 7vw); } .site-header .brand { position: absolute; z-index: 5; top: max(28px, 2.8vw); left: max(24px, 5.262vw); width: max(140px, 12vw); height: auto; /* Logo SVG ships with width="100%" height="100%" preserveAspectRatio="none", so the browser can't derive an intrinsic ratio from the file. Without an explicit aspect-ratio, height:auto falls back to the 150px default replaced-element height and the SVG stretches to fill it. Same fix as the mobile rule near .brand at ~line 2592. */ aspect-ratio: 273.665 / 35.1949; } .site-header .brand img { width: 100%; height: auto; display: block; } .site-header .nav, .site-header .mobile-nav, .site-header button.hamburger { display: none !important; } .page { background: var(--cream); } .page-hero { background: var(--ink); color: var(--mint-pale); padding: max(48px, 6vw) max(24px, 5.262vw) max(64px, 7vw); } .page-hero-title { margin: 0; color: var(--mint-pale); font-family: var(--font); font-size: max(40px, 5.2vw); font-weight: 600; line-height: 1.05; max-width: 1200px; } .page-content { max-width: 820px; margin: 0 auto; padding: max(48px, 5vw) max(24px, 5.262vw) max(72px, 6vw); color: var(--ink); font-family: var(--font); font-size: max(16px, 1.05vw); line-height: 1.6; } .page-content h2 { margin: max(36px, 3vw) 0 max(14px, 1.1vw); font-size: max(22px, 1.65vw); font-weight: 600; line-height: 1.2; } .page-content h3 { margin: max(28px, 2.4vw) 0 max(12px, 1vw); font-size: max(18px, 1.3vw); font-weight: 600; } .page-content p { margin: 0 0 max(16px, 1.2vw); } .page-content ul, .page-content ol { margin: 0 0 max(16px, 1.2vw); padding-left: max(20px, 1.4vw); } .page-content li { margin-bottom: 0.4em; } .page-content a { color: var(--ink); text-decoration: underline; text-underline-offset: 0.18em; } .page-content a:hover { opacity: 0.7; } .page-content strong { font-weight: 600; } @media (max-width: 900px) { .page-hero { padding: 56px 24px 56px; } .page-hero-title { font-size: max(34px, 7vw); } .page-content { padding: 40px 24px 64px; font-size: 16px; } }