/* ============================================================================ funnel.css — VAL-134 industry funnel pages + plan-modal document ---------------------------------------------------------------------------- Loaded AFTER css/style.css on: prop-firms.html and its 6 siblings (generated from tools/funnels/template.html) and on plan-modal.html. RULES THIS FILE OBEYS 1. Every selector, keyframe and custom property introduced here is `fnl-` prefixed, or is an override of an existing class scoped under one of .fnl-page / .fnl-hero / .fnl-modal-page / .fnl-faq / .fnl-s11 / .fnl-modal. No bare existing class is ever restyled globally. 2. css/style.css is NEVER edited. Everything the funnel needs to change about an inherited rule is re-declared here at equal-or-higher specificity; this file loads second, so equal specificity wins. 3. Z-index contract (FINAL — supersedes the storyboard §0c draft values, because style.css:1891 puts a stray z-index:3000 in the root stacking context, so 1200 is not the ceiling): in-page: tiles 1 · scrim 2 · content/media 3 · islands 4 · in-media controls 5 · header 6 gallery preview modal shell 3400 plan modal shell 3500 · its close button 3501 4. Section order below mirrors page order. Responsive work is consolidated at the end, mobile-last (max-width), in the site's own idiom: 1400 · 1200 · 991 · 767 · 575 · 390 · 360. 5. ONE prefers-reduced-motion block, last in the file. ========================================================================== */ /* ============================================================================ 1. TOKENS ========================================================================== */ .fnl-page, .fnl-modal-page { /* motion (storyboard §0d) */ --fnl-ease-out: cubic-bezier(.22, .61, .36, 1); --fnl-ease-io: cubic-bezier(.65, 0, .35, 1); /* surfaces (storyboard §0e) */ --fnl-bg: #091811; --fnl-rail: #050E0A; --fnl-stage: #0A1410; --fnl-card-bg: linear-gradient(180deg, #0C1B14 0%, #091811 100%); --fnl-border: 1px solid rgba(255, 255, 255, .09); --fnl-border-hover: rgba(255, 255, 255, .16); --fnl-inner-light: inset 0 1px 0 rgba(255, 255, 255, .05); --fnl-divider: 1px solid rgba(255, 255, 255, .07); --fnl-glass-bg: rgba(5, 14, 10, .45); --fnl-glass-border: 1px solid rgba(255, 255, 255, .18); --fnl-media-shadow: 0 30px 70px -40px rgba(0, 0, 0, .8); /* radii */ --fnl-r-card: 20px; --fnl-r-media: 18px; --fnl-r-tile: 12px; --fnl-r-chip: 14px; /* palette */ --fnl-green: #00FF8A; --fnl-white: #fff; --fnl-sub: #A9CDBB; --fnl-muted: #83B59F; --fnl-dim: #5E8272; --fnl-answer: #9DC3B0; /* rhythm (storyboard §0f; per-breakpoint values in the responsive block) */ --fnl-secpad: 100px; --fnl-gap: 24px; } /* ============================================================================ 2. GATES — A/B variant, offer, plan-modal mode, scroll lock ---------------------------------------------------------------------------- All three gates are pure CSS off attributes/classes set on by an inline script, so the losing copy is display:none from the very first style resolution: zero flash, zero CLS, and the winning markup is the only thing ever painted. ========================================================================== */ /* --- 2a. A/B copy variants (arch §7) ------------------------------------- */ html.fnl-var-a .fnl-v--b, html.fnl-var-b .fnl-v--a { display: none !important; } /* --- 2b. Offer-gated CTA clusters (arch §3) ------------------------------ */ .fnl-cta[data-fnl-cta] { display: none; } html[data-fnl-offer="book_call"] .fnl-cta[data-fnl-cta="book_call"], html[data-fnl-offer="subscription"] .fnl-cta[data-fnl-cta="subscription"], html[data-fnl-offer="free_trial"] .fnl-cta[data-fnl-cta="free_trial"] { display: flex; flex-direction: column; } /* --- 2c. Offer-gated pricing-card CTAs ---------------------------------- */ /* !important on both sides: these sit on .filled-btn / .regular-btn, which style.css declares display:inline-flex at the same (0,1,0) specificity, and a pricing card must never show two CTAs for two different offers. */ .fnl-offer-only { display: none !important; } html[data-fnl-offer="book_call"] .fnl-offer-only--book_call, html[data-fnl-offer="subscription"] .fnl-offer-only--subscription, html[data-fnl-offer="free_trial"] .fnl-offer-only--free_trial { display: inline-flex !important; } /* A free_trial CTA must additionally lose to plan-modal trial/paid mode: a .fnl-trial-only element inside a paid document stays hidden even when the offer gate would show it (both use !important; the mode gate is later). */ /* --- 2d. plan-modal.html paid|trial mode (arch §4) ---------------------- */ html.fnl-mode-paid .fnl-trial-only { display: none !important; } html.fnl-mode-trial .fnl-paid-only { display: none !important; } /* --- 2e. Body scroll lock — class-based, NEVER inline style ------------- script.js:960 (Calendly close) unconditionally clears document.body.style.overflow. A class on is immune to that clobber, which is exactly why the inline-style approach would be a bug. */ html.fnl-locked, html.fnl-locked body { overflow: hidden; } /* ============================================================================ 3. PAGE BASE + INHERITED-STYLE GUARDS ---------------------------------------------------------------------------- style.css drops

to 14px at ≤1200 and 12px at ≤767 in many places, forces text-transform:capitalize on .h2-title (which would render "At 1% Of The Price."), and colours FAQ answers #5E8272 at 12px. None of that may reach a conversion page. The floor uses :where() so it stays at (0,1,0) specificity and every intentional per-element size below beats it on source order. ========================================================================== */ .fnl-page, .fnl-modal-page { background-color: var(--fnl-bg); overflow-x: hidden; } .fnl-main { display: block; position: relative; } .fnl-page :where(p), .fnl-page :where(li), .fnl-modal-page :where(p) { font-size: 16px; letter-spacing: -0.03em; } /* Never capitalize funnel headings. */ .fnl-page .h2-title, .fnl-page .fnl-h2, .fnl-page .fnl-hero__h1, .fnl-modal-page .h2-title { text-transform: none; } .fnl-page img, .fnl-modal-page img { max-width: 100%; } .fnl-page ul, .fnl-modal-page ul { list-style: none; margin: 0; padding: 0; } /* Section frame shared by every funnel band. */ .fnl-s1, .fnl-s2, .fnl-s3, .fnl-s4, .fnl-fs, .fnl-s11, .fnl-s12 { position: relative; padding-top: var(--fnl-secpad); padding-bottom: var(--fnl-secpad); } .fnl-s2, .fnl-s3 { border-bottom: var(--fnl-divider); } /* ============================================================================ 4. SHARED COMPONENTS — pill, section head, H2/sub, CTA cluster, stars, reveal, sr-only ========================================================================== */ /* --- 4a. .fnl-pill — the section eyebrow (storyboard §0g, replaces .pre-title, which appears nowhere on the funnel) ------------------------ */ .fnl-pill { display: inline-flex; align-items: center; justify-content: center; height: 30px; padding: 0 14px; border-radius: 999px; background: rgba(0, 255, 138, .07); border: 1px solid rgba(0, 255, 138, .22); font-family: "Inter", sans-serif; font-size: 12px; line-height: 1; font-weight: 500; letter-spacing: .10em; text-transform: uppercase; color: var(--fnl-green); white-space: nowrap; } /* --- 4b. Centred section head block ------------------------------------- */ .fnl-sechead { display: flex; flex-direction: column; align-items: center; text-align: center; } .fnl-sechead .fnl-pill { margin-bottom: 18px; } /* --- 4c. Headings and subheads ------------------------------------------ */ .fnl-h2 { margin: 0; font-family: "Rethink Sans", sans-serif; font-weight: 600; font-size: 54px; line-height: 92%; letter-spacing: -0.03em; color: var(--fnl-white); text-transform: none; max-width: 900px; } .fnl-h2 .colored, .fnl-h2 span.colored { color: var(--fnl-green); } /* two-column sections (S5–S10) run a shorter measure and a smaller size */ .fnl-h2--col { font-size: 40px; line-height: 95%; max-width: 520px; } .fnl-h2--final { font-size: 68px; line-height: 92%; max-width: 900px; } .fnl-sub { margin: 18px 0 0; font-size: 18px; line-height: 150%; font-weight: 300; letter-spacing: -0.03em; color: var(--fnl-sub); max-width: 720px; } .fnl-sub--col { max-width: 480px; } .fnl-sechead .fnl-h2 + .fnl-sub { margin-top: 18px; } /* --- 4d. .fnl-cta — one CTA cluster, placed 12× ------------------------ Funnel CTAs are 48px / 15px (storyboard D2): 43px fails the 44px touch minimum and this is the primary conversion control. Scoped under .fnl-page so the global button classes are untouched. */ .fnl-cta { margin-top: 40px; } .fnl-cta__btns { display: flex; align-items: flex-start; gap: 15px; } .fnl-cta__subtext { display: block; margin: 14px 0 0; max-width: 560px; /* the free_trial subtext is 46 chars — 380px forced a second line on desktop (Ben #5) */ font-size: 14px; line-height: 130%; font-weight: 400; letter-spacing: -0.03em; color: var(--fnl-muted); } .fnl-cta--hero, .fnl-cta--lite { text-align: left; } .fnl-cta--hero .fnl-cta__btns, .fnl-cta--lite .fnl-cta__btns { justify-content: flex-start; } .fnl-cta--inline, .fnl-cta--final { text-align: center; } .fnl-cta--inline .fnl-cta__btns, .fnl-cta--final .fnl-cta__btns { justify-content: center; } .fnl-cta--inline .fnl-cta__subtext, .fnl-cta--final .fnl-cta__subtext { margin-left: auto; margin-right: auto; } /* the free-trial offer renders one button only — cap it so it never stretches */ .fnl-cta__primary, .fnl-cta__secondary { max-width: 420px; flex: 0 1 auto; } /* 48px / 15px button geometry, funnel-scoped */ .fnl-page .fnl-cta .filled-btn, .fnl-page .fnl-cta .regular-btn, .fnl-page .fnl-plan__cta, .fnl-page .fnl-backtop, .fnl-modal-page .fnl-plan__cta { height: 48px; padding: 16px 28px; font-size: 15px; line-height: 90%; font-weight: 500; letter-spacing: -0.03em; } .fnl-page .fnl-cta .filled-btn:hover, .fnl-page .fnl-enterprise__btn .filled-btn:hover { /* keep the site's arrow slide-in working: the padding SHIFT is part of the animation (style.css:842) and our 0,3,0 padding override was freezing it — the .fb-in arrow then overlapped the label (Ben #24) */ padding-left: 54px; padding-right: 14px; } /* --- 4e. .fnl-stars — 5 glyphs, fractional fill via --stars ------------- Two stacked rows: the elements are the empty row; ::after is the filled row, clipped to calc(var(--stars) / 5 * 100%). No half-star assets needed. The mask tile is 20×16 (16px star + 4px gap) so both rows share one period. */ /* NOTE: `--stars` is set inline by the generated markup (partials/case-study.html) and is therefore the one custom property on the page without an `fnl-` prefix. This file never DEFINES it — it is only read, with a fallback — so the generator's lint rule 6 ("no unprefixed var declared in css/funnel.css") still passes. */ .fnl-stars { --fnl-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='16' viewBox='0 0 20 16'%3E%3Cpath d='M8 0l2.06 4.45L15 5.17l-3.5 3.09L12.36 13 8 10.35 3.64 13l.86-4.74L1 5.17l4.94-.72z' fill='%23000'/%3E%3C/svg%3E"); position: relative; display: block; width: 100px; height: 16px; font-size: 0; } .fnl-stars > i { display: inline-block; width: 20px; height: 16px; background-color: rgba(255, 255, 255, .18); -webkit-mask-image: var(--fnl-star); mask-image: var(--fnl-star); -webkit-mask-size: 20px 16px; mask-size: 20px 16px; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .fnl-stars::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--stars, 5) / 5 * 100%); background-color: var(--fnl-green); -webkit-mask-image: var(--fnl-star); mask-image: var(--fnl-star); -webkit-mask-size: 20px 16px; mask-size: 20px 16px; -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x; -webkit-mask-position: left center; mask-position: left center; } /* --- 4f. .fnl-reveal — the one shared entrance mechanism (storyboard §0d) Never applied to hero copy: the H1/sub/CTA must render at full opacity on first paint (LCP). Stagger via --d in 70ms steps, hard cap 280ms. */ .fnl-reveal { opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity .5s var(--fnl-ease-out), transform .6s var(--fnl-ease-out); transition-delay: var(--d, 0ms); } .fnl-reveal.is-in { opacity: 1; transform: none; } /* --- 4g. sr-only ------------------------------------------------------- */ .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ============================================================================ 5. HEADER ---------------------------------------------------------------------------- Logo only. It is a , not an — nothing on this page may read as an escape route, so the inherited hover drop-shadow is killed and the cursor stays default. z-index 6 so the logo sits above the metric islands (z4). ========================================================================== */ .fnl-header { position: absolute; top: 30px; left: 0; width: 100%; z-index: 6; } .fnl-header .outer__header { display: flex; align-items: center; justify-content: flex-start; } .fnl-header__logo { display: inline-flex; align-items: center; cursor: default; pointer-events: none; } .fnl-header__logo img { display: block; width: 154px; height: 30px; filter: none; } .fnl-header__logo:hover img { filter: none; } /* ============================================================================ 6. HERO ---------------------------------------------------------------------------- Reuses .hero__grid--video + the .vmarq builder from style.css/script.js. What is added here and nowhere else: · .fnl-hero__tiles repositioning so the tile field frames the PLAYER instead of the copy · a retuned ::after scrim (copy side fully solid, player side lightly veiled) — storyboard §3.5 · the 730px/1fr copy-media split with the metric islands living in the 56px gutter, which is the whole trick: the islands never cover the creative because there is somewhere else for them to be · the reduced-motion guard style.css never got (finding 0.17) ========================================================================== */ .fnl-hero { position: relative; z-index: 2; overflow: hidden; min-height: 855px; padding: 96px 0 72px; display: flex; align-items: center; border-bottom: var(--fnl-divider); } /* --- 6a. Tile field (z1) ------------------------------------------------ */ .fnl-hero .fnl-hero__tiles.grid-float { position: absolute; top: -60px; right: 0; left: auto; width: 88%; display: flex; gap: 25px; align-items: center; justify-content: flex-end; z-index: 1; } /* --- 6b. Retuned legibility scrim (z2) — storyboard §3.5 --------------- Vertical gradient kept exactly as style.css has it; the horizontal one is replaced so the copy column sits over ≥86% opaque scrim (white on #050D09 ≈ 19:1, the #A9CDBB subhead ≈ 10:1) while the player side stays readable as moving media. */ .fnl-hero.hero__grid--video::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; /* Ben #48: the /video page curve VERBATIM — the previous retune (solid to 42% + .86 veil) buried the tiles. /video proves copy stays readable over the lighter veil. */ background: linear-gradient(90deg, #050D09 0%, #050D09 24%, rgba(5, 13, 9, .72) 50%, rgba(5, 13, 9, .5) 78%, rgba(5, 13, 9, .62) 100%), linear-gradient(0deg, rgba(5, 13, 9, .85) 0%, rgba(5, 13, 9, 0) 22%, rgba(5, 13, 9, 0) 80%, rgba(5, 13, 9, .7) 100%); } .fnl-hero > .container { position: relative; z-index: 3; } /* --- 6c. The 57/38.5 split (storyboard §3.1) --------------------------- */ .fnl-hero__grid { display: grid; grid-template-columns: 730px 1fr; column-gap: 56px; align-items: center; } .fnl-hero__copy { position: relative; z-index: 3; text-align: left; } /* --- 6d. Trusted-by row ------------------------------------------------ */ .fnl-trust { display: inline-flex; align-items: center; gap: 10px; height: 24px; margin: 0 0 28px; font-size: 16px; line-height: 100%; font-weight: 500; letter-spacing: -0.03em; color: var(--fnl-white); } .fnl-trust svg { flex: 0 0 auto; } .fnl-trust b { font-weight: 600; } /* --- 6e. H1 + subhead -------------------------------------------------- */ .fnl-hero__h1 { margin: 0; font-family: "Rethink Sans", sans-serif; font-weight: 500; font-size: 56px; line-height: 95%; letter-spacing: -0.03em; color: var(--fnl-white); max-width: 730px; text-transform: none; } .fnl-hero__h1 .colored, .fnl-hero__h1 span.colored { color: var(--fnl-green); } .fnl-hero__sub { margin: 24px 0 0; font-size: 18px; line-height: 145%; font-weight: 300; letter-spacing: -0.03em; color: var(--fnl-sub); max-width: 600px; } .fnl-hero__copy .fnl-cta { margin-top: 40px; } /* --- 6f. Media column + player ---------------------------------------- */ .fnl-hero__media { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; } .fnl-hero-player { position: relative; width: 320px; height: 569px; aspect-ratio: 9 / 16; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .85); background-color: #05100B; cursor: pointer; -webkit-tap-highlight-color: transparent; } .fnl-hero-poster, .fnl-hero-player video, .fnl-hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; transition: opacity .32s var(--fnl-ease-out); } .fnl-hero-poster { z-index: 1; } /* funnel.js hides the poster inline on `canplay` and restores it inline if it has to abandon the rotator; these two are the belt for the case where the inline path never runs. */ .fnl-hero-player.is-playing .fnl-hero-poster { opacity: 0; } .fnl-hero-player.is-abandoned .fnl-hero-poster { opacity: 1; } /* A square/landscape clip in the rotation gets contain + a blurred self-fill rather than a cover-crop that would cut faces. funnel.js injects .fnl-hero-backfill as the player's first child and drives its background-image / opacity entirely with inline styles, so the only thing this file owes it is a stacking slot that the poster and videos sit above. */ .fnl-hero-player[data-fit="contain"] video, .fnl-hero-player[data-fit="contain"] .fnl-hero-video { object-fit: contain; } .fnl-hero-backfill { z-index: 0; } /* overlay legibility scrim for the in-media chrome (arch §5b) */ .fnl-hero-player::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 4; background: linear-gradient(180deg, rgba(2, 9, 5, .55) 0%, rgba(2, 9, 5, 0) 22%, rgba(2, 9, 5, 0) 74%, rgba(2, 9, 5, .5) 100%); } /* --- 6g. In-media controls (z5) ---------------------------------------- */ /* right-anchored so the 40px sound button at top-LEFT can never collide with the pill (it did at 405px player width) */ .fnl-hero-chrome { position: absolute; top: 14px; right: 14px; left: 14px; z-index: 5; display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; } .fnl-hero-pill { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px 0 8px; border-radius: 999px; background: rgba(5, 14, 10, .42); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, .16); font-size: 11px; line-height: 1; font-weight: 500; letter-spacing: .02em; color: var(--fnl-white); white-space: nowrap; } /* Ben #39/#40: no chip box at all — every mark ships transparent, so the logo sits bare on the footage (drop-shadow for legibility) at the SAME height as the Created-by pill. The old glass rectangle read as a broken half-box. */ .fnl-hero-clientlogo { display: inline-flex; align-items: center; justify-content: flex-end; height: 26px; } .fnl-hero-clientlogo img { display: block; max-height: 26px; max-width: 124px; width: auto; height: auto; object-fit: contain; opacity: .98; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .55)); } /* Monochrome white for vector monos only — inverting a raster chip turns any residual background box solid white (Ben #33). */ .fnl-hero-clientlogo img[src$=".svg"] { filter: brightness(0) invert(1) drop-shadow(0 2px 8px rgba(0, 0, 0, .55)); } /* Mute toggle — top LEFT, always visible (never hover-gated). */ .fnl-hero-sound { position: absolute; bottom: 18px; right: 14px; z-index: 5; color: #fff; /* button UA color is black — the icon is currentColor (Ben #32) */ width: 40px; height: 40px; padding: 0; border-radius: 250px; border: var(--fnl-glass-border); background: var(--fnl-glass-bg); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } /* 44×44 tap target without a 44px visual */ .fnl-hero-sound::before { content: ""; position: absolute; inset: -2px; } .fnl-hero-sound svg, .fnl-hero-sound img { position: relative; width: 18px; height: 18px; pointer-events: none; } .fnl-hero-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 5; width: 64px; height: 64px; padding: 0; border-radius: 999px; border: var(--fnl-glass-border); background: var(--fnl-glass-bg) url("../img/play-btn.svg") center / 20px 20px no-repeat; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); cursor: pointer; transition: opacity .26s var(--fnl-ease-out); } /* #3 While playing, the control shows a PAUSE glyph rather than staying a play arrow -- it used to fade out entirely, so the icon never reflected state and there was no visible way to pause. It stays dimmed so it does not fight the footage, and comes to full strength on hover/focus. */ .fnl-hero-player.is-engaged.is-playing .fnl-hero-play { opacity: .45; pointer-events: auto; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Crect x='6' y='4' width='4' height='16' rx='1.2'/%3E%3Crect x='14' y='4' width='4' height='16' rx='1.2'/%3E%3C/svg%3E"); background-size: 20px 20px; } .fnl-hero-player.is-engaged.is-playing:hover .fnl-hero-play, .fnl-hero-player.is-engaged.is-playing .fnl-hero-play:focus-visible { opacity: 1; } /* Ambient rotation (playing but not engaged) keeps the original behaviour: the control stays out of the way and only appears on hover. */ .fnl-hero-player.is-playing:not(.is-engaged) .fnl-hero-play { opacity: 0; pointer-events: none; } .fnl-hero-player.is-playing:not(.is-engaged):hover .fnl-hero-play { opacity: 1; pointer-events: auto; } .fnl-hero-progress { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; height: 2px; background: rgba(255, 255, 255, .16); } .fnl-hero-progress > i { display: block; height: 100%; width: 0; background: var(--fnl-green); } /* --- 6h. Metric islands (z4) — storyboard §3.4 ------------------------- Positions are relative to the player box and offset OUTWARD into the 87px of side slack, so the union of island rectangles never intrudes on the central 70% of the creative. Anti-jank per arch §6: tabular figures + a ch-based min-width mean a textContent write 4×/s triggers no layout; `contain` scopes any residual work; the float is transform-only on the compositor and never touches the property the ticker writes. */ /* The islands container is sized to the PLAYER box, not to the media column, so the vertical percentages below are percentages of the creative — which is what makes the "never intrude on the central 70%" rule verifiable. The media column centres its children and the player is its first in-flow child, so left:50%/translateX(-50%) at top:0 lands exactly on the player. */ .fnl-islands { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 320px; height: 569px; z-index: 4; pointer-events: none; } .fnl-island { position: absolute; width: 132px; height: 56px; padding: 9px 12px; display: grid; row-gap: 4px; align-content: center; border-radius: var(--fnl-r-chip); background: rgba(9, 24, 17, .55); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .7); contain: layout style paint; will-change: transform; } .fnl-island--tl { top: 6%; left: -98px; } .fnl-island--br { top: 44%; right: -108px; } .fnl-island--bl { top: 79%; left: -92px; } .fnl-island__label { font-size: 11px; line-height: 100%; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--fnl-muted); white-space: nowrap; } .fnl-island__value { display: inline-block; min-width: 7ch; text-align: left; font-family: "Rethink Sans", sans-serif; font-size: 22px; line-height: 100%; font-weight: 600; letter-spacing: -0.03em; color: var(--fnl-white); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; white-space: nowrap; } /* Three 7px sine drifts at non-harmonic periods never sync, so it reads organic. Negative delays desynchronise them with no JS stagger. */ @keyframes fnl-island-float { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -7px, 0); } } .fnl-island--f0 { animation: fnl-island-float 5.4s ease-in-out infinite; animation-delay: 0s; } .fnl-island--f1 { animation: fnl-island-float 6.2s ease-in-out infinite; animation-delay: -1.8s; } .fnl-island--f2 { animation: fnl-island-float 4.8s ease-in-out infinite; animation-delay: -3.4s; } .fnl-islands.is-paused .fnl-island { animation-play-state: paused; } /* --- 6i. Mobile metric bar — replaces the islands at ≤767 ------------- Occlusion is impossible at 390px (only 25px of slack per side), all three metrics survive, and one 56px strip is one composite layer sitting OUTSIDE the video's paint rect instead of three backdrop-filters over it. */ .fnl-metricbar { display: none; width: 100%; max-width: 420px; height: 56px; margin-top: 12px; border-radius: var(--fnl-r-chip); background: rgba(9, 24, 17, .55); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, .12); grid-template-columns: repeat(3, 1fr); contain: layout style paint; } .fnl-metricbar__cell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; } .fnl-metricbar__cell + .fnl-metricbar__cell { border-left: 1px solid rgba(255, 255, 255, .10); } .fnl-metricbar .fnl-island__label { font-size: 13px; letter-spacing: .06em; } .fnl-metricbar .fnl-island__value { font-size: 20px; min-width: 0; text-align: center; } /* ============================================================================ 7. LOGO RAIL — social proof ---------------------------------------------------------------------------- Pure-CSS marquee [D10]: the