/* ══════════════════════════════════════════════════════════════════════ Yotta /platforms — premium polish for the static sections. Additive overrides on the scraped Framer/PeachWorlds markup. Violet #8B5CF6. NOTE: Framer applies its own high-specificity transform/filter to these nodes, which beats stylesheet :hover rules. So all hover MOTION is applied from ya-enhance.js as inline !important (the only thing that reliably wins). This file handles only what Framer does not fight: overflow, the custom underline divs, and the count-up colour bump. ══════════════════════════════════════════════════════════════════════ */ /* ── Restore position:sticky for the scroll-swap illustration ── The mobile fix `html, body { overflow-x: hidden }` coerces body's overflow-y to `auto`, turning into a scroll container that breaks the sticky right column. `clip` prevents horizontal overflow WITHOUT creating a scroll container, so the illustration pins again. */ body#iy8k { overflow-x: clip !important; } /* ── Cinematic media hover-zoom: crop the scaled media to the wrapper ── The wrapper clips the scaled media with overflow:hidden. It MUST carry the same border-radius as the media (12px) — otherwise the square clip rectangle shears off the media's rounded corners the moment it scales on hover, which read as "the curve on the image disappears" (QA14 #2/#3/#4). ya-enhance.js also copies the live media radius onto the wrap, so any value stays in sync. */ .ya-zoom-wrap { overflow: hidden; border-radius: 12px; } .ya-zoom-wrap > img, .ya-zoom-wrap > video { display: block; border-radius: inherit; } /* ── The fixed 200px purple underline → an animated gradient draw with glow. (Custom empty divs with no Framer styling, so plain CSS wins here.) ── */ [id^="id6o7g"] { width: 0 !important; background: linear-gradient(90deg, #8B5CF6, #c4b5fd) !important; border-radius: 2px; box-shadow: 0 0 14px rgba(139, 92, 246, 0.45); transition: width 1.05s cubic-bezier(0.22, 1, 0.36, 1) 0.15s; } [data-framer-name="Stat"].ya-in [id^="id6o7g"] { width: 200px !important; } /* numbers gain a touch of contrast as they count up */ [data-framer-name="Stat"].ya-in > p.framer-text:first-child { color: #0a0a0a !important; } /* ── 01/02/03 cards: align the number + header + body across all three ── The card containers were `justify-content: space-between` over a 440px min-height, so the differing body-text lengths distributed the free space unevenly — card 1 (shortest copy) got larger inter-row gaps, dropping its "01"/header/body ~10–20px below cards 2 & 3. Top-aligning the content makes the numbers and headers line up. (justify-content is not touched by Framer's Appear animation, which only drives transform/opacity, so this override is safe.) */ #ist4h-2-3, #ist4h-2-3-2, #ist4h-2-3-3 { justify-content: flex-start !important; } #i7nl-4-2-3-3, #i7nl-4-2-3-3-3, #i7nl-4-2-3-3-4 { justify-content: flex-start !important; } /* ── Process-step icons: render white inside the violet squares ── The squares (#iuf1vx-4*, all background #8B5CF6) hold dark icon SVGs that read poorly on violet. brightness(0) invert(1) forces the glyph to pure white. */ [id^="iuf1vx-4"] img { filter: brightness(0) invert(1); } /* ── Kill the black band below the CTA ── #ilik (the big section wrapper, cards→CTA) has a #000 background that only shows in the dead-scroll gap between the CTA and the revealed footer — a black stripe on an otherwise light page. The page's sections all paint their own light backgrounds over it, so recolouring it white only affects that gap. */ #ilik { background-color: #ffffff !important; } @media (prefers-reduced-motion: reduce) { [id^="id6o7g"] { transition: none; width: 200px !important; } }