/* ----------------------------------------- Coin FX layer — canvas is always positioned; scroll-track/act rules only activate when JS has confirmed WebGL + no prefers-reduced-motion (see inline gate script in index.html ). ----------------------------------------- */ .coin-canvas-fixed { position: fixed; inset: 0; width: 100vw; height: 100vh; /* On mobile browsers 100vh resolves against the largest possible viewport (address bar collapsed), taller than what's actually visible whenever the address bar is showing — sizing this canvas with plain vh left it taller than the real screen, which then doesn't match window.innerHeight (used throughout coin-scene.js for the camera/scroll math), throwing off the coin's rendered position on mobile. 100dvh tracks the real, currently-visible viewport; declared second so it overrides vh only where supported. */ height: 100dvh; z-index: 5; pointer-events: none; display: none; } html.coin-fx-enabled .coin-canvas-fixed { display: block; } #coin-canvas { display: block; width: 100%; height: 100%; } /* ----------------------------------------- Coin acts — default (fallback) state renders exactly like a plain stacked section: no tall scroll track, no sticky pin, scrim fully visible. Enhanced state only applies once JS has confirmed WebGL + no prefers-reduced-motion. ----------------------------------------- */ .coin-act { position: relative; } .coin-act__sticky { position: static; } .coin-act__content-scrim { opacity: 1; transform: none; } html.coin-fx-enabled { /* Bumped up from 320vh so the wider drop/squish shares in PHASE_BOUNDS (coin-scene.js) still leave the hold phase with plenty of scroll room to read the section. */ --coin-act-length: 380vh; } /* Left transparent on purpose so the animated page background (see .home-page in styles.css) shows through behind the coin — that background is always explicitly painted (never the browser's UA default), so there's no risk of the black flash this rule used to guard against. */ html.coin-fx-enabled #coin-track { background-color: transparent; } html.coin-fx-enabled .coin-act { height: var(--coin-act-length); } html.coin-fx-enabled .coin-act__sticky { position: sticky; top: 0; height: 100vh; /* See .coin-canvas-fixed above — same mobile vh-vs-visible-viewport mismatch applies here too, and this box needs to actually match the screen for the content it pins to line up with the coin correctly. */ height: 100dvh; /* position:sticky always creates its own stacking context; without an explicit z-index here (context painted at "auto"/0), the explicitly z-index:5 canvas — a sibling stacking context — would paint above it regardless of DOM order. Must exceed the canvas's z-index. */ z-index: 10; display: flex; align-items: flex-start; justify-content: center; /* Content lives in the upper part of the viewport, leaving the lower portion clear for the coin to be visible resting at the bottom. */ padding-top: 4vh; overflow: visible; pointer-events: none; } html.coin-fx-enabled .coin-act__content-scrim { pointer-events: auto; /* Wider than the standalone page column — more horizontal room means grids/copy can spread sideways instead of needing to shrink to avoid wrapping into extra, height-hungry lines. */ width: min(94vw, 74rem); /* No internal scrollbar — the whole section is always shown at once. Oversized content is shrunk to fit (see applyFitScale in coin-scene.js) rather than clipped or made scrollable. */ overflow: visible; /* No card: no background fill, no border-radius, no shadow — the section's own text/images just float directly above the coin, against the shared page background. */ background: transparent; z-index: 6; opacity: 0; transform: translateY(24px); /* Fit-scale (see coin-scene.js) and the exit fall are both anchored at the top so the section stays flush with the sticky area's padding. */ transform-origin: top center; } /* The section content keeps its own padding; the s4 overlay's full-bleed photo/scrim background is superseded (this section is floating loose, not sitting on its own opaque backdrop like it does standalone). */ html.coin-fx-enabled .coin-act__content-scrim .home-s4__overlay, html.coin-fx-enabled .coin-act__content-scrim .home-s4 { background: transparent; } /* Same treatment for acts 1 and 3 — "Our impact"/"Who we are" and "Where we work" normally sit on a flat #fafafa/#fff section background, which reads as an ugly opaque card once floating loose over the animated page background. Strip it so they match "What we do"'s already-transparent look. */ html.coin-fx-enabled .coin-act__content-scrim .home-s2, html.coin-fx-enabled .coin-act__content-scrim .home-s3, html.coin-fx-enabled .coin-act__content-scrim .home-s5 { background: transparent; border-top: none; } /* The logo marquee now lives outside .coin-act__content-scrim entirely (see index.html) as its own full-bleed element, #coin-act-3-orbit, positioned directly against .coin-act__sticky (which is what actually establishes its containing block/coordinate origin here) so it can span the full screen width and sit at a fixed distance from the coin, independent of the header text's own width cap and fit-scale shrink. */ /* The orbit path (updateOrbitPath in coin-scene.js) runs its straight "parking" segments out to -1.5x/2.5x the viewport width on each side so logos join the curve off-screen — real logo elements really do sit that far outside the visible width while animating. Left unclipped, that inflated this element's (and so the whole page's) scrollable width on mobile browsers, which then widened their layout viewport to fit it — the page rendering "zoomed in" with huge empty margins, since only the first ~375px of an ~900px-wide layout was ever in frame. overflow:hidden is what actually excludes clipped content from that scrollable-width computation (clip-path only affects paint, not layout overflow, so it didn't fix this). But overflow-x:hidden with no overflow-y set forces overflow-y to compute as 'auto' on the same box per spec — which would also clip the peak of the arc that's meant to poke up past #coin-act-3-orbit's own top edge (see peakY in updateOrbitPath). So the clipping lives on this separate outer wrapper instead, sized taller than #coin-act-3-orbit with headroom above it for that overshoot, anchored to the same bottom edge so the visible position is unchanged — overflow:hidden here only ever cuts off the horizontal parking runs, never the vertical peak. */ html.coin-fx-enabled .coin-orbit-viewport { position: absolute; left: 50%; transform: translateX(-50%); bottom: 27vh; width: 100vw; height: 18rem; overflow: hidden; z-index: 6; pointer-events: none; } html.coin-fx-enabled #coin-act-3-orbit { position: absolute; left: 0; bottom: 0; width: 100%; height: 14rem; opacity: 0; pointer-events: none; } html.coin-fx-enabled #coin-act-3-orbit .home-s5-marquee-fade { display: none; } /* .home-s5-marquee-reveal carries the shared .home-reveal scroll-reveal class, which sets a `transform` once visible — a transformed element becomes the containing block for its absolutely positioned descendants (ahead of #coin-act-3-orbit itself), and with no height of its own (its children are all abspos, contributing nothing to its intrinsic size) that collapsed to 0, taking the rows' height:100% down with it. */ html.coin-fx-enabled #coin-act-3-orbit .home-s5-marquee-reveal { height: 100%; opacity: 1; transform: none; } html.coin-fx-enabled #coin-act-3-orbit .home-s5-marquee-row { position: absolute; /* Explicit width/height rather than inset:0's auto-stretch — this row is still (visually out-of-flow, but technically) a child of a flex column container, and absolute-positioned flex children resolving height via top+bottom alone collapsed to 0 rather than stretching to the containing block. */ top: 0; left: 0; width: 100%; height: 100%; overflow: visible; padding: 0; -webkit-mask-image: none; mask-image: none; } html.coin-fx-enabled #coin-act-3-orbit .home-s5-marquee-track { /* Unwraps the track from the box model entirely — its logo children render as if they were direct children of the (positioned) row, so each one's position:absolute below is relative to the row/arc, not to a flex strip that no longer scrolls as a unit. */ display: contents; } html.coin-fx-enabled #coin-act-3-orbit .home-s5-logo { position: absolute; top: 0; left: 0; pointer-events: auto; /* Enlarged from the standalone marquee's clamp(1.35rem,2.5vw,1.875rem). */ font-size: clamp(1.5rem, 2.6vw, 2.15rem); /* Tilts each name to match the curve's own tangent at that point, so the text visibly follows the rainbow arc instead of staying flat while just its position moves along it. */ offset-rotate: auto; offset-distance: 0%; animation-name: mfb-orbit; animation-timing-function: linear; animation-iteration-count: infinite; } /* One single trajectory — a shallow concave-down arc, like a rainbow over the coin — not two separate curves at different heights (that read as wrapping all the way around into a circle instead of arching over the top). Both rows' logos travel along this exact same path. The path itself, and each logo's animation-duration/animation-delay, are computed and applied in coin-scene.js (updateOrbitPath/layoutOrbitLogos), not hardcoded here: - `path()` coordinates are fixed CSS pixels with no way to express "centered on the viewport," so a static value here only happened to center on whichever one viewport width it was tuned against. - Company names vary a lot in width ("BCG" vs "McKinsey & Company"), so an even CSS nth-child delay stagger (equal arc-length gaps between label centers) crowded long labels into their neighbors while short ones left big gaps. JS measures each visible label's real width and spaces them by actual pixel gaps instead. The original HTML doubles each row's companies for the fallback (non-coin-fx) marquee's seamless CSS-translateX loop — not needed for this offset-distance loop, so the doubled second half of each row is hidden below and only the unique companies (10 + 11) travel the arc. */ html.coin-fx-enabled #coin-act-3-orbit .home-s5-marquee-row:nth-of-type(1) .home-s5-logo:nth-child(n + 11) { display: none; } html.coin-fx-enabled #coin-act-3-orbit .home-s5-marquee-row:nth-of-type(2) .home-s5-logo:nth-child(n + 12) { display: none; } @keyframes mfb-orbit { from { offset-distance: 0%; } to { offset-distance: 100%; } } /* "Internships and full-time placement." was reading small and pinned to the very top of the viewport — now that the marquee has moved out into its own full-bleed element above, this header is the only thing left in the scrim, so it no longer needs to be scaled down to fit, and gets nudged down a bit for better balance instead of hugging the top edge. */ html.coin-fx-enabled .coin-act__content-scrim .home-s5-header { margin-top: 4vh; } html.coin-fx-enabled .coin-act__content-scrim .home-s5-eyebrow { font-size: 0.9rem; } html.coin-fx-enabled .coin-act__content-scrim .home-s5-heading { font-size: clamp(2.25rem, 5.5vw, 3.75rem); } html.coin-fx-enabled .coin-act__content-scrim .home-s5-header-aside p { font-size: 1.05rem; } /* "Who we are" (image + heading + copy) normally has room to breathe below "Our impact" on a full page; floating inside the coin act it needs to sit snugly right underneath it and stay clear of the coin resting below. Scoped to the coin act only — the "Our impact" stats block itself (home-s2) is untouched other than trimming the gap beneath it. */ html.coin-fx-enabled .coin-act__content-scrim .home-s2 { padding-bottom: 0.5rem; } html.coin-fx-enabled .coin-act__content-scrim .home-s3 { padding: 0.5rem 0 0; } html.coin-fx-enabled .coin-act__content-scrim .home-s3__grid { /* Text column noticeably wider than the image — more horizontal room for the copy to run fewer, wider lines instead of stacking tall. */ grid-template-columns: 0.8fr 1.2fr; gap: 2rem; /* Top-align instead of centering the row — with a shorter copy column centering would otherwise nudge the image down away from "Our impact" instead of leaving it flush underneath. */ align-items: start; } html.coin-fx-enabled .coin-act__content-scrim .home-s3__image { max-height: 11rem; object-fit: cover; } /* "Student-led consulting since 2012." wraps to three short lines at its standalone font size, making the who-we-are column noticeably taller than the photo beside it and tall enough to run into the coin resting below. A smaller size (plus the wider column above) lets it sit on fewer lines, which both keeps it clear of the coin and centers it evenly against the image, without shrinking it as much as this used to. */ html.coin-fx-enabled .coin-act__content-scrim .home-s3__heading { font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.2; margin-bottom: 0.6rem; } html.coin-fx-enabled .coin-act__content-scrim .home-s3__eyebrow { margin-bottom: 0.4rem; } /* Shorter paragraph column-width-driven, not just smaller type — fewer rows is what actually keeps the whole block out of the coin's way rather than relying on the fit-scale shrink alone. */ html.coin-fx-enabled .coin-act__content-scrim .home-s3__text { font-size: 0.95rem; line-height: 1.5; margin-bottom: 0.85rem; } /* "What we do" is normally white text on that dark photo backdrop; floating loose over the shared light page background instead, it needs the same dark brand-green text the other two acts already use for legibility. */ html.coin-fx-enabled .coin-act__content-scrim .home-s4__heading, html.coin-fx-enabled .coin-act__content-scrim .home-s4__subheading { color: var(--mfb-brand); } html.coin-fx-enabled .coin-act__content-scrim .home-s4__subheading { opacity: 0.75; } /* Bigger overall, and wider than the other two acts' shared column — the three cards need the extra room so the outer two can swing out toward the screen edges below without cramping into the middle one. Targets the act's own scrim by id (higher specificity than the shared width rule) rather than changing that shared rule for every act. Widened further (and the grid gap below trimmed slightly) so each card's own box — photo plus its title/text underneath — reads as wider by default, while the gap between cards is still enough to keep them visually distinct. */ #coin-act-2-content.coin-act__content-scrim { width: min(98vw, 104rem); } html.coin-fx-enabled .coin-act__content-scrim .home-s4__header { max-width: 44rem; margin-bottom: 3rem; } html.coin-fx-enabled .coin-act__content-scrim .home-s4__heading { font-size: clamp(2.1rem, 5vw, 3.25rem); } html.coin-fx-enabled .coin-act__content-scrim .home-s4__subheading { font-size: 1.15rem; } html.coin-fx-enabled .coin-act__content-scrim .home-s4__grid { gap: 1.5rem; overflow: visible; } html.coin-fx-enabled .coin-act__content-scrim .home-s4-card__media { height: 300px; } html.coin-fx-enabled .coin-act__content-scrim .home-s4-card__media img { min-height: 300px; } html.coin-fx-enabled .coin-act__content-scrim .home-s4-card__title { font-size: 1.3rem; } html.coin-fx-enabled .coin-act__content-scrim .home-s4-card__text { font-size: 1rem; } /* The first and third cards swing out and down, like they're arranged around the coin resting below, instead of sitting in a flat row on top of it — only the outer two move; the middle card stays put as the anchor. Nothing else in the grid shifts to compensate (the grid tracks keep their original size/position), so this only works because every ancestor up to the sticky viewport is already overflow:visible. */ html.coin-fx-enabled .coin-act__content-scrim .home-s4-card:nth-child(1) { transform: translate(-32%, 32%); } html.coin-fx-enabled .coin-act__content-scrim .home-s4-card:nth-child(3) { transform: translate(32%, 32%); } /* Both of these only make sense in their desktop layouts — the flanking translate above needs the spare room a 3-column grid has on either side of each card, and the 0.8fr/1.2fr split above needs enough absolute width for two side-by-side columns to still be legible. .home-s4__grid and .home-s3__grid both collapse to a single, full-width column at 768px on the standalone page (see styles.css) — below that, the flanking transform shoved roughly a third of a now-full-width card off-screen horizontally, and the two-column split was cramming a photo and paragraph into ~110px/165px slivers instead of also collapsing to one column. Both are real mobile bugs, not just testing-tool artifacts. Reset at the same breakpoint the standalone grids use, not the 640px this file's other mobile overrides use below, since that would leave a gap where the standalone grids had already stacked but these resets hadn't kicked in yet. */ @media (max-width: 768px) { html.coin-fx-enabled .coin-act__content-scrim .home-s4-card:nth-child(1), html.coin-fx-enabled .coin-act__content-scrim .home-s4-card:nth-child(3) { transform: none; } /* A single full-width column (image stacked above text) was previously used here, but the coin act budgets this whole section's height against the viewport (see FIT_HEIGHT_RATIO/computeFitScale in coin-scene.js) — stacking made the block roughly twice as tall as the side-by-side desktop layout, forcing a much harder shrink to fit and reading as "too small" for both the image and the text. A narrow image column beside the text keeps the same two-column shape as desktop, just re-proportioned for the narrower width. */ html.coin-fx-enabled .coin-act__content-scrim .home-s3__grid { grid-template-columns: minmax(84px, 32%) 1fr; gap: 1rem; } html.coin-fx-enabled .coin-act__content-scrim .home-s3__image { max-height: none; height: 100%; min-height: 7rem; border-radius: 10px; } html.coin-fx-enabled .coin-act__content-scrim .home-s3__heading { font-size: clamp(1.15rem, 5.5vw, 1.5rem); } html.coin-fx-enabled .coin-act__content-scrim .home-s3__text { font-size: 0.85rem; line-height: 1.4; } /* Three cards used to stack full-width (the standalone page's own 768px fallback — see styles.css), each keeping its 300px desktop media height. That made this section by far the tallest of the three acts, and since the coin act budgets each section's height against the viewport (FIT_HEIGHT_RATIO/computeFitScale in coin-scene.js), the tallest section got shrunk the hardest — cards, photos and text all rendering noticeably smaller here than in the other two acts. Two columns (third card spanning both, since three items don't split evenly) roughly halves the stack height; the media height comes down separately since 300px was sized for a full-width card, not a ~48%-width one. */ html.coin-fx-enabled .coin-act__content-scrim .home-s4__grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; } html.coin-fx-enabled .coin-act__content-scrim .home-s4-card:nth-child(3) { grid-column: 1 / -1; } html.coin-fx-enabled .coin-act__content-scrim .home-s4-card__media { height: 140px; } html.coin-fx-enabled .coin-act__content-scrim .home-s4-card__media img { min-height: 140px; } html.coin-fx-enabled .coin-act__content-scrim .home-s4-card__title { font-size: 1.05rem; } html.coin-fx-enabled .coin-act__content-scrim .home-s4-card__text { font-size: 0.85rem; line-height: 1.45; } html.coin-fx-enabled .coin-act__content-scrim .home-s4__header { margin-bottom: 1.5rem; } html.coin-fx-enabled .coin-act__content-scrim .home-s4__heading { font-size: clamp(1.6rem, 7vw, 2.1rem); } html.coin-fx-enabled .coin-act__content-scrim .home-s4__subheading { font-size: 0.95rem; } } @media (max-width: 640px) { html.coin-fx-enabled { --coin-act-length: 260vh; } html.coin-fx-enabled .coin-act__content-scrim { width: 92vw; } /* bottom lives on the wrapper (see .coin-orbit-viewport above) now, not on #coin-act-3-orbit itself — this used to set `bottom` directly on #coin-act-3-orbit back when it did its own positioning, and silently stopped doing anything useful once that moved to the wrapper (this rule and that one match with equal specificity, so source order alone decided which `bottom` won, and this one — coming later — did, leaving the wrapper's own bottom:27vh from the desktop rule in effect, low enough on the screen to sit on top of the coin instead of clear of it). This section's header text ("Internships and full-time placement." + "A decade of alumni...") sits right under .coin-act__sticky's own 4vh top padding and, at its actual measured/fit-scaled height, ends right around 58vh down the sticky viewport (measured directly: padding-top + the header's rendered height at its real fitScale). Placed snug under that (a ~1vh gap) and shrunk shorter than the previous pass — short enough to sit entirely in the text-to-coin gap even accounting for the coin's outline mesh (scaled 1.12x past the coin body itself — see createOutline in coin-scene.js) pushing its visible top edge higher than the coin body alone would suggest. */ html.coin-fx-enabled .coin-orbit-viewport { bottom: 32vh; } html.coin-fx-enabled #coin-act-3-orbit { height: 6rem; } html.coin-fx-enabled #coin-act-3-orbit .home-s5-logo { font-size: 1.1rem; } }