/* ========================================================================== METAFLIGHT HUD - HOMEPAGE, BREAKDANCE-NATIVE LAYER Load order: mf-hud-tokens.css, mf-hud-chrome.css, then this file. Structure lives in Breakdance (page 11161) so content stays editable in the builder. This file carries layout + style only, with body.breakdance prefixes so it wins against Breakdance's per-element CSS, which ties on specificity and loads later. ========================================================================== */ /* ---- HERO ---------------------------------------------------------------- */ body.breakdance .mf-h-hero{ position:relative; min-height:100vh; display:flex;align-items:center; overflow:hidden; background:var(--mf-void); } /* scanline + darkening veil over the background video */ body.breakdance .mf-h-hero::before{ content:'';position:absolute;inset:0;z-index:1;pointer-events:none; background:repeating-linear-gradient(0deg,rgba(0,212,255,.03) 0 1px,transparent 1px 3px); mix-blend-mode:screen; } body.breakdance .mf-h-hero::after{ content:'';position:absolute;inset:0;z-index:2;pointer-events:none; background:linear-gradient(180deg,rgba(5,8,16,.42),rgba(5,8,16,.5) 48%,rgba(5,8,16,.94)); } body.breakdance .mf-h-hero .section-container{ position:relative;z-index:5; max-width:1240px;margin:0 auto;padding:9rem 2rem 4rem;width:100%; } body.breakdance .mf-h-hero-in{ display:grid;grid-template-columns:1.1fr .9fr; gap:4rem;align-items:center;width:100%; } body.breakdance .mf-h-hero-text, body.breakdance .mf-h-hero-visual{width:auto;min-width:0} /* eyebrow */ body.breakdance .mf-h-eb{ display:flex;align-items:center;gap:1rem; font-family:var(--mf-mono);font-size:.64rem;font-weight:500; letter-spacing:.34em;text-transform:uppercase;color:var(--mf-cyan); margin-bottom:1.3rem; } body.breakdance .mf-h-eb::before{ content:'';height:1px;width:clamp(24px,5vw,58px);flex:none; background:linear-gradient(90deg,transparent,var(--mf-cyan-lit)); } /* headline */ body.breakdance h1.mf-h-h1{ font-family:'Orbitron',sans-serif;font-weight:900; font-size:clamp(2.4rem,6.2vw,4.5rem); line-height:1.04;letter-spacing:.02em; text-transform:uppercase;color:var(--mf-text); margin:0; } body.breakdance h1.mf-h-h1 .mf-h-grad{ display:block; color:var(--mf-cyan); -webkit-text-fill-color:currentColor; background-image:linear-gradient(100deg,var(--mf-cyan) 10%,#4DA6FF 52%,var(--mf-violet) 96%); background-repeat:no-repeat; -webkit-background-clip:text;background-clip:text; } @supports ((-webkit-background-clip:text) or (background-clip:text)){ body.breakdance h1.mf-h-h1 .mf-h-grad{-webkit-text-fill-color:transparent;color:transparent} } body.breakdance .mf-h-lead{ font-family:'Rajdhani',sans-serif; font-size:1.12rem;line-height:1.75;color:#A8BDD4; max-width:520px;margin:1.5rem 0 2.2rem; } body.breakdance .mf-h-ctas{ display:flex;flex-direction:row;align-items:center; gap:1rem;flex-wrap:wrap;width:auto; } body.breakdance .mf-h-ctas .mf-bd-btn{margin:0;width:auto;flex:0 0 auto} body.breakdance .mf-h-ctas a.bde-button__button{padding:1rem 2.2rem;font-size:.74rem;letter-spacing:.16em} /* ---- GLASS PANEL --------------------------------------------------------- */ body.breakdance .mf-h-panel{ position:relative; background:linear-gradient(180deg,var(--mf-veil-top),var(--mf-veil-bot)),rgba(8,10,14,.42); backdrop-filter:var(--mf-blur);-webkit-backdrop-filter:var(--mf-blur); box-shadow:inset 0 0 0 1px var(--mf-hair),inset 0 1px 0 rgba(255,255,255,.085),0 18px 60px rgba(0,0,0,.45); clip-path:polygon(var(--mf-ch) 0,100% 0,100% calc(100% - var(--mf-ch)),calc(100% - var(--mf-ch)) 100%,0 100%,0 var(--mf-ch)); overflow:hidden;width:100%; } /* corner brackets, pseudo-elements only - nothing to delete in the builder */ body.breakdance .mf-h-panel::before, body.breakdance .mf-h-panel::after{ content:'';position:absolute;width:14px;height:14px;z-index:4;pointer-events:none; } body.breakdance .mf-h-panel::before{top:8px;right:8px;border-top:1px solid var(--mf-cyan-lit);border-right:1px solid var(--mf-cyan-lit)} body.breakdance .mf-h-panel::after{bottom:8px;left:8px;border-bottom:1px solid var(--mf-cyan-lit);border-left:1px solid var(--mf-cyan-lit)} body.breakdance .mf-h-panel-head{ display:flex;flex-direction:row;align-items:center;gap:.8rem; padding:.85rem 1.2rem; border-bottom:1px solid var(--mf-hair); background:rgba(255,255,255,.022); } body.breakdance .mf-h-ttl{ font-family:var(--mf-mono);font-size:.66rem;font-weight:500; letter-spacing:.22em;text-transform:uppercase;color:var(--mf-muted); flex:1 1 auto; } body.breakdance .mf-h-idx{ font-family:var(--mf-mono);font-size:.66rem;font-weight:500; letter-spacing:.12em;color:var(--mf-cyan);flex:0 0 auto; } body.breakdance img.mf-h-panel-img{ display:block;width:100%;height:auto;max-width:100%; padding:1.2rem;object-fit:contain; } body.breakdance .mf-h-chips{ display:flex;flex-direction:row;flex-wrap:wrap;gap:.4rem; padding:0 1.2rem 1.1rem;width:auto; } body.breakdance .mf-h-chip{ display:inline-flex;align-items:center; padding:.45rem .75rem; font-family:var(--mf-mono);font-size:.59rem;font-weight:500; letter-spacing:.13em;text-transform:uppercase;color:var(--mf-muted); box-shadow:inset 0 0 0 1px var(--mf-hair); } /* ---- RESPONSIVE ---------------------------------------------------------- */ @media(max-width:1023px){ body.breakdance .mf-h-hero-in{grid-template-columns:1fr;gap:3rem} body.breakdance .mf-h-hero .section-container{padding:7rem 1.5rem 3rem} } @media(max-width:767px){ body.breakdance .mf-h-lead{max-width:none;font-size:1.02rem} body.breakdance .mf-h-ctas a.bde-button__button{padding:.9rem 1.6rem} } @media(prefers-reduced-motion:reduce){ body.breakdance .mf-h-hero *{animation:none!important;transition-duration:.01ms!important} } /* ===== HERO PANEL - parity fixes vs the v3 reference ===== */ /* Interior lighting: the reference glass carries a cyan/violet glow. */ body.breakdance .mf-h-panel{background:radial-gradient(120% 90% at 12% 0%,rgba(0,212,255,.16),transparent 58%),radial-gradient(100% 90% at 92% 100%,rgba(139,92,246,.20),transparent 62%),linear-gradient(180deg,var(--mf-veil-top),var(--mf-veil-bot)),rgba(8,10,14,.34)} /* Header row: LED + title left, index hard right. Breakdance Text elements are block divs, so the flex behaviour has to be forced here. */ body.breakdance .mf-h-panel-head{display:flex;flex-direction:row;align-items:center;gap:.7rem;width:100%} body.breakdance .mf-h-panel-head::before{content:'';flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:var(--mf-cyan);box-shadow:0 0 9px var(--mf-cyan);animation:mf-blip 2.4s ease-in-out infinite} @keyframes mf-blip{0%,100%{opacity:1}50%{opacity:.3}} body.breakdance .mf-h-ttl{flex:1 1 auto;width:auto} body.breakdance .mf-h-idx{flex:0 0 auto;width:auto;margin-left:auto;white-space:nowrap} /* Chip glyphs delivered as CSS masks so the Text elements stay plain text. */ body.breakdance .mf-h-chip{gap:.5rem} body.breakdance .mf-h-chip::before{content:'';flex:0 0 auto;width:13px;height:13px;background-color:var(--mf-cyan);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain} body.breakdance .mf-h-chip:nth-child(1)::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M16 11a4 4 0 1 0-8 0M4 20a8 8 0 0 1 16 0'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M16 11a4 4 0 1 0-8 0M4 20a8 8 0 0 1 16 0'/%3E%3C/svg%3E")} body.breakdance .mf-h-chip:nth-child(2)::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a15 15 0 0 1 0 18a15 15 0 0 1 0-18'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a15 15 0 0 1 0 18a15 15 0 0 1 0-18'/%3E%3C/svg%3E")} body.breakdance .mf-h-chip:nth-child(3)::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M3 17l6-6 4 4 8-8'/%3E%3Cpath d='M21 7v5h-5'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M3 17l6-6 4 4 8-8'/%3E%3Cpath d='M21 7v5h-5'/%3E%3C/svg%3E")} @media(prefers-reduced-motion:reduce){body.breakdance .mf-h-panel-head::before{animation:none}} /* ========================================================== STATS STRIP ========================================================== */ body.breakdance .mf-h-stats-sec{position:relative;z-index:2;padding:0} body.breakdance .mf-h-stats-sec .section-container{max-width:1240px;margin:0 auto;padding:0 2rem;width:100%;transform:translateY(-50%)} body.breakdance .mf-h-stats{display:grid;grid-template-columns:repeat(4,1fr);width:100%} body.breakdance .mf-h-st{position:relative;padding:1.6rem 1.1rem;text-align:center;width:auto} body.breakdance .mf-h-st + .mf-h-st::before{content:'';position:absolute;left:0;top:22%;bottom:22%;width:1px;background:var(--mf-hair)} body.breakdance .mf-h-st-n{font-family:'Orbitron',sans-serif;font-weight:900;font-size:clamp(1.4rem,2.5vw,2.1rem);color:var(--mf-cyan);line-height:1;letter-spacing:.01em;margin:0} body.breakdance .mf-h-st-l{font-family:var(--mf-mono);font-size:.59rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--mf-muted);margin-top:.55rem} /* ========================================================== ROLES - MFD PAGE SWAP Pinned with position:sticky. NOTE: overflow-x on an ancestor must stay 'visible' or 'clip' - 'hidden' silently kills sticky. ========================================================== */ body.breakdance .mf-h-mfd-track{position:relative;z-index:2;height:260vh;padding:0;overflow:visible} body.breakdance .mf-h-mfd-track .section-container{max-width:none;margin:0;padding:0;width:100%;overflow:visible} body.breakdance .mf-h-mfd-stage{position:sticky;top:0;height:100vh;display:flex;align-items:center;width:100%} body.breakdance .mf-h-mfd{max-width:1240px;margin:0 auto;width:calc(100% - 4rem)} body.breakdance .mf-h-mfd-prog{height:2px;background:rgba(255,255,255,.06);position:relative;width:100%} body.breakdance .mf-h-mfd-bar{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--mf-cyan);box-shadow:0 0 12px var(--mf-cyan)} body.breakdance .mf-h-mfd-body{display:grid;grid-template-columns:200px 1fr;min-height:min(460px,60vh);width:100%} body.breakdance .mf-h-mfd-tabs{border-right:1px solid var(--mf-hair);padding:1.2rem 0;display:flex;flex-direction:column;width:auto} body.breakdance .mf-h-tab{padding:1rem 1.2rem;font-family:var(--mf-mono);font-size:.68rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--mf-muted);border-left:2px solid transparent;cursor:pointer;transition:all .35s var(--mf-ease)} body.breakdance .mf-h-tab.mf-on{color:var(--mf-text);border-left-color:var(--mf-cyan);background:rgba(0,212,255,.07)} body.breakdance .mf-h-tab-note{margin-top:auto;padding:1.2rem;font-family:var(--mf-mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mf-muted);opacity:.6;line-height:1.8} body.breakdance .mf-h-mfd-pages{position:relative;overflow:hidden;width:auto;min-height:min(460px,60vh)} body.breakdance .mf-h-pg{grid-column:1;grid-row:1;display:grid;grid-template-columns:1fr .82fr;opacity:0;visibility:hidden;transform:translateY(18px);transition:opacity .55s var(--mf-ease),transform .55s var(--mf-ease),visibility .55s;width:auto} body.breakdance .mf-h-pg.mf-on{opacity:1;visibility:visible;transform:none} body.breakdance .mf-h-pg-txt{padding:2.2rem 2rem;display:flex;flex-direction:column;width:auto} /* PER-ROLE STATUS MARKER. The MFD footer marker (.mf-h-mfd-status) describes the PLATFORM, not the page on screen, so it cannot say whether the visible role is playable. Each role page carries its own marker instead, matching the Roles page badges. Violet is the design system's rare accent and is used here only for "in development". Amber is never used: it is reserved for FlightCoins. */ body.breakdance .mf-h-role-st{ display:inline-flex;align-items:center;gap:.5rem;width:auto; padding:.36rem .75rem;margin:0 0 .95rem; font-family:var(--mf-mono);font-size:.55rem;font-weight:500; letter-spacing:.2em;text-transform:uppercase; clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px); } body.breakdance .mf-h-role-st::before{content:'';flex:0 0 auto;width:5px;height:5px;background:currentColor} body.breakdance .mf-h-role-st-live{color:var(--mf-cyan);background:rgba(0,212,255,.09);box-shadow:inset 0 0 0 1px rgba(0,212,255,.4)} body.breakdance .mf-h-role-st-dev{color:#A78BFA;background:rgba(139,92,246,.1);box-shadow:inset 0 0 0 1px rgba(139,92,246,.36)} body.breakdance .mf-h-pg-h{font-family:'Orbitron',sans-serif;font-weight:700;text-transform:uppercase;font-size:1.55rem;letter-spacing:.045em;margin:0 0 .9rem} body.breakdance .mf-h-pg-p{font-family:'Rajdhani',sans-serif;font-size:.98rem;line-height:1.7;color:var(--mf-muted);margin-bottom:1.4rem} body.breakdance ul.mf-h-spec{list-style:none;margin:auto 0 0;padding:0;border-top:1px solid var(--mf-hair)} body.breakdance ul.mf-h-spec li{list-style:none;display:flex;align-items:center;gap:.7rem;padding:.6rem 0;border-bottom:1px solid var(--mf-hair);font-family:var(--mf-mono);font-size:.67rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--mf-muted)} body.breakdance ul.mf-h-spec li:last-child{border-bottom:none} body.breakdance ul.mf-h-spec li::marker{content:''} body.breakdance ul.mf-h-spec li::before{content:'';flex:0 0 auto;width:8px;height:8px;border-top:1px solid var(--mf-cyan);border-right:1px solid var(--mf-cyan);transform:rotate(45deg)} body.breakdance .mf-h-pg-med{position:relative;overflow:hidden;width:auto;height:100%;background-color:var(--mf-void)} /* FULL-BLEED FIX (2026-08-25c) still stands: inset:0 sizes the img against .mf-h-pg-med regardless of any wrapper Breakdance's Image2 renders. LETTERBOX-IS-THE-DESIGN FIX (2026-08-25k), replacing the ADAPT-TO-IMAGE FIX. That one shrank .mf-h-pg-med itself to the image's exact aspect-ratio (via aspect-ratio+align-self:center) so there was no leftover space to crop or letterbox - technically correct, but it moved any gap between the image and the row's real height (set by the text column next to it, see .mf-h-mfd-pages below) OUTSIDE .mf-h-pg-med entirely, into plain ungrouped grid space with no background, no ::after, nothing - which is exactly the flat void the last two rounds of screenshots kept showing above and below the panel content. The photo not being cropped was never in question again after 25e; what was missing was somewhere to put a design when the row is taller than the photo. Reverting .mf-h-pg-med to height:100% (stretching across the full row again, same as pre-25e) brings that leftover space back INSIDE this box, where .mf-h-pg-med::after's top/bottom fade (25j) can actually paint on it instead of on pixels already inside the photo. object-fit back to contain to match - the box can be taller than the image again, so cover would resume cropping. .mf-h-mfd-pages is untouched: it still sizes itself from real content instead of a guessed clamp() (25h/e), that part was never the problem. */ body.breakdance img.mf-h-pg-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:saturate(.78) contrast(1.05);display:block} /* CORNER VIGNETTE (2026-08-25i): the flat photo edge read as a pasted-in rectangle against the panel's dark HUD chrome - user asked for the pre-25f dark wash back, but tuned so it melts the image's corners into the frame instead of flatly covering the branding again (that 90deg wash is gone for good, this is a different shape). Same radial-vignette pattern already proven on .mf-h-plate-med::after (WFM plate) for consistency: fully transparent through the centre, only ramping to --mf-void toward the very edge. Stops at 62% radius / .42 peak alpha, softer and later than the plate's 55%/.4 - these images carry real content close to two corners (the logo top-left, the destination widget bottom-right), both sitting with only a small margin from the true edge per the screenshots, so the fade needed more room before it starts to stay clear of them. .42 also matches the letterbox/panel fill tone used elsewhere (rgba(8,10,14,.42)) rather than inventing a new darkness. */ /* TOP/BOTTOM EDGE FADE (2026-08-25j), replacing the 25i radial. The radial corner blend was technically live but imperceptible: once .mf-h-pg-med carries the image's own aspect-ratio (25h) the box is already shaped exactly like the photo, so the 62-100% ring it faded through landed in a sliver a few pixels wide, over parts of the source photo that are already near-black (dusk sky, dark fuselage) - a change with nothing visible to contrast against. User asked specifically for top and bottom, called out as not visible, wanting the same kind of blend the WFM plate vignette gives, made clean this time. Switched to two full-width linear fades instead of a radial: top 20% of the image height ramps from --mf-void at the very edge to fully transparent, bottom 20% mirrors it - a wide enough, dark enough (.5 peak) band to actually read in a screenshot, melting the image's top and bottom edges into the panel above/below it rather than a hard photo-rectangle seam. Left and right edges are untouched - the user did not ask for those, and the logo/widget sit close enough to those two edges that fading them risked the exact legibility complaint from 25f/25g. */ body.breakdance .mf-h-pg-med::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,rgba(5,8,16,.5) 0%,rgba(5,8,16,0) 20%),linear-gradient(to top,rgba(5,8,16,.5) 0%,rgba(5,8,16,0) 20%),repeating-linear-gradient(0deg,rgba(0,212,255,.045) 0 1px,transparent 1px 4px)} body.breakdance .mf-h-panel-meta{display:flex;flex-direction:row;justify-content:space-between;gap:1rem;padding:.7rem 1.2rem;border-top:1px solid var(--mf-hair);font-family:var(--mf-mono);font-size:.63rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--mf-muted);width:100%} /* Fallback: below tablet portrait, or reduced motion, the pinned section becomes a normal stack so it never leaves a tall empty band. */ @media(max-width:1023px){ body.breakdance .mf-h-mfd-track{height:auto} body.breakdance .mf-h-mfd-stage{position:static;height:auto} body.breakdance .mf-h-mfd-tabs,body.breakdance .mf-h-mfd-prog{display:none} body.breakdance .mf-h-mfd-body{grid-template-columns:1fr;min-height:0} body.breakdance .mf-h-mfd-pages{position:static;display:flex;flex-direction:column;overflow:visible;min-height:0} body.breakdance .mf-h-pg{position:static;opacity:1;visibility:visible;transform:none;grid-template-columns:1fr;border-bottom:1px solid var(--mf-hair)} body.breakdance .mf-h-pg-med{min-height:200px} body.breakdance .mf-h-stats-sec .section-container{transform:none;padding:2rem} body.breakdance .mf-h-stats{grid-template-columns:repeat(2,1fr)} body.breakdance .mf-h-st:nth-child(3)::before{display:none} body.breakdance .mf-h-st:nth-child(3),body.breakdance .mf-h-st:nth-child(4){border-top:1px solid var(--mf-hair)} } @media(max-width:479px){ body.breakdance .mf-h-stats{grid-template-columns:1fr} body.breakdance .mf-h-st + .mf-h-st::before{display:none} body.breakdance .mf-h-st + .mf-h-st{border-top:1px solid var(--mf-hair)} } html.mf-still body.breakdance .mf-h-mfd-track{height:auto} html.mf-still body.breakdance .mf-h-mfd-stage{position:static;height:auto} html.mf-still body.breakdance .mf-h-mfd-pages{position:static;display:flex;flex-direction:column} html.mf-still body.breakdance .mf-h-pg{position:static;opacity:1;visibility:visible;transform:none} /* ===== MFD STICKY CONTAINING BLOCK FIX ===== position:sticky is constrained by its CONTAINING BLOCK, not by the section. Breakdance wraps section children in .section-container, whose height was only as tall as the stage itself (100vh) - leaving zero travel, so the panel scrolled away instead of pinning. The container must span the whole 260vh track. */ body.breakdance .mf-h-mfd-track > .section-container{height:100%;display:block} @media(max-width:1023px){body.breakdance .mf-h-mfd-track > .section-container{height:auto}} /* ===== FEATURES - RAIL DOCK ===== */ body.breakdance .mf-h-feat-sec{position:relative;z-index:2;padding:6rem 0} body.breakdance .mf-h-feat-sec .section-container{max-width:1240px;margin:0 auto;padding:0 2rem;width:100%} body.breakdance .mf-h-sec-h{text-align:center;max-width:760px;margin:0 auto 3.5rem} body.breakdance .mf-h-eb-c{justify-content:center} body.breakdance .mf-h-eb-c::after{content:'';height:1px;width:clamp(24px,5vw,58px);flex:none;background:linear-gradient(90deg,var(--mf-cyan-lit),transparent)} body.breakdance .mf-h-h2{font-family:'Orbitron',sans-serif;font-weight:700;text-transform:uppercase;font-size:clamp(1.7rem,3.6vw,2.9rem);letter-spacing:.03em;margin:0 0 .9rem} body.breakdance .mf-h-sub{font-family:var(--mf-mono);font-size:.76rem;font-weight:500;letter-spacing:.1em;color:var(--mf-muted)} body.breakdance .mf-h-dock{display:grid;grid-template-columns:96px 1fr;width:100%} body.breakdance .mf-h-dock-rail{position:relative;width:auto} body.breakdance .mf-h-dock-rail::before{content:'';position:absolute;left:47px;top:0;bottom:0;width:1px;background:var(--mf-hair)} body.breakdance .mf-h-dock-fill{position:absolute;left:47px;top:0;width:1px;height:0;background:linear-gradient(180deg,var(--mf-cyan),rgba(0,212,255,.2));box-shadow:0 0 14px var(--mf-cyan);transition:height .25s linear} body.breakdance .mf-h-dock-list{display:flex;flex-direction:column;gap:1.4rem;width:auto} body.breakdance .mf-h-dk{position:relative;padding:1.5rem 1.4rem 1.5rem 5.2rem;width:auto} body.breakdance .mf-h-dk:nth-child(even){margin-left:clamp(0px,7vw,110px)} body.breakdance .mf-h-dk::after{content:'';position:absolute;left:-49px;top:36px;width:49px;height:1px;background:var(--mf-hair);transform-origin:right;transform:scaleX(0);transition:transform .6s var(--mf-ease) .15s;border:none} body.breakdance .mf-h-dk:nth-child(even)::after{left:calc(-49px - clamp(0px,7vw,110px));width:calc(49px + clamp(0px,7vw,110px))} body.breakdance .mf-h-dk.mf-in::after{transform:scaleX(1)} body.breakdance .mf-h-dk::before{content:'';position:absolute;left:1.4rem;top:1.5rem;width:26px;height:26px;background-color:var(--mf-cyan);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;border:none} body.breakdance .mf-h-dk-violet::before{background-color:var(--mf-violet)} body.breakdance .mf-h-dk-tag{font-family:var(--mf-mono);font-size:.58rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--mf-cyan);margin-bottom:.45rem} body.breakdance .mf-h-dk-h{font-family:'Orbitron',sans-serif;font-weight:700;text-transform:uppercase;font-size:1rem;letter-spacing:.05em;margin:0 0 .5rem} body.breakdance .mf-h-dk-p{font-family:'Rajdhani',sans-serif;font-size:.93rem;line-height:1.7;color:var(--mf-muted)} body.breakdance .mf-ico-1::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Cpath d='M7.8 16.2a6 6 0 0 1 0-8.4M16.2 7.8a6 6 0 0 1 0 8.4M4.9 19.1a10 10 0 0 1 0-14.2M19.1 4.9a10 10 0 0 1 0 14.2'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Cpath d='M7.8 16.2a6 6 0 0 1 0-8.4M16.2 7.8a6 6 0 0 1 0 8.4M4.9 19.1a10 10 0 0 1 0-14.2M19.1 4.9a10 10 0 0 1 0 14.2'/%3E%3C/svg%3E")} body.breakdance .mf-ico-2::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a15 15 0 0 1 0 18a15 15 0 0 1 0-18'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a15 15 0 0 1 0 18a15 15 0 0 1 0-18'/%3E%3C/svg%3E")} body.breakdance .mf-ico-3::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M3 20V5M3 20h18M7 16l4-5 3.5 3L21 7'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M3 20V5M3 20h18M7 16l4-5 3.5 3L21 7'/%3E%3C/svg%3E")} body.breakdance .mf-ico-4::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M3 21h18M6 21V8l6-4 6 4v13M10 12h4M10 16h4'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M3 21h18M6 21V8l6-4 6 4v13M10 12h4M10 16h4'/%3E%3C/svg%3E")} body.breakdance .mf-ico-5::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M2 12l20-7-7 20-3-8-10-5z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M2 12l20-7-7 20-3-8-10-5z'/%3E%3C/svg%3E")} body.breakdance .mf-ico-6::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M12 3v3M12 18v3M3 12h3M18 12h3'/%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3Cpath d='M12 8v4l3 2'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M12 3v3M12 18v3M3 12h3M18 12h3'/%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3Cpath d='M12 8v4l3 2'/%3E%3C/svg%3E")} @media(max-width:1023px){body.breakdance .mf-h-dock{grid-template-columns:1fr}body.breakdance .mf-h-dock-rail{display:none}body.breakdance .mf-h-dk:nth-child(even){margin-left:0}body.breakdance .mf-h-dk::after{display:none}} /* ===== DOCK LAYOUT FIX ===== 1. Breakdance gives .bde-div its own flex layout; the rail column collapsed to zero height so its 1px line never showed. Force the grid and stretch. 2. The section was left-aligned because .section-container inherits the theme width, not ours. Centre it explicitly. */ body.breakdance .mf-h-feat-sec > .section-container{max-width:1240px!important;margin-left:auto!important;margin-right:auto!important;width:100%} body.breakdance .mf-h-dock{display:grid!important;grid-template-columns:96px minmax(0,1fr);align-items:stretch;width:100%;margin:0 auto} body.breakdance .mf-h-dock-rail{display:block!important;position:relative;align-self:stretch;height:auto;min-height:100%;width:96px} body.breakdance .mf-h-dock-list{display:flex!important;flex-direction:column;gap:1.4rem;width:100%;min-width:0} body.breakdance .mf-h-dk{width:auto;max-width:none} /* ===== DOCK CENTRING + HOVER ===== Centring is applied to OUR blocks directly rather than to .section-container: the container is Breakdance-owned and its width/margins vary by section settings, so relying on it kept the section left-aligned. */ body.breakdance .mf-h-sec-h,body.breakdance .mf-h-dock{margin-left:auto!important;margin-right:auto!important} body.breakdance .mf-h-dock{max-width:1180px} body.breakdance .mf-h-sec-h{max-width:760px;text-align:center} body.breakdance .mf-h-sec-h .mf-h-h2,body.breakdance .mf-h-sec-h .mf-h-sub{text-align:center!important;margin-left:auto;margin-right:auto} body.breakdance .mf-h-sec-h .mf-h-eb{justify-content:center;text-align:center} /* Feature card hover: brighten the frame, extend the corner brackets and lift the panel - same language as the reference build. */ body.breakdance .mf-h-dk{transition:box-shadow .4s var(--mf-ease),transform .4s var(--mf-ease),background .4s var(--mf-ease)} body.breakdance .mf-h-dk:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px rgba(0,212,255,.5),inset 0 1px 0 rgba(255,255,255,.1),0 26px 64px rgba(0,0,0,.5),0 0 48px rgba(0,212,255,.09)} body.breakdance .mf-h-dk:hover .mf-h-dk-h{color:var(--mf-cyan-lit)} body.breakdance .mf-h-dk:hover::before{transform:scale(1.12)} body.breakdance .mf-h-dk::before{transition:transform .4s var(--mf-ease)} /* Panels need a frame + brackets to react to. */ body.breakdance .mf-h-panel{box-shadow:inset 0 0 0 1px var(--mf-hair),inset 0 1px 0 rgba(255,255,255,.085),0 18px 60px rgba(0,0,0,.45);transition:box-shadow .4s var(--mf-ease)} /* ===== SHOWCASE - DEPTH STACK ===== Deliberately the quiet section: no pinning, no swap. Text sits between a darkened background plate and a foreground ring, so the only motion is a difference in parallax rate. A page cannot carry four loud moments. */ body.breakdance .mf-h-depth{position:relative;z-index:2;min-height:78vh;display:flex;align-items:center;overflow:hidden;padding:6rem 0} body.breakdance .mf-h-depth::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(5,8,16,.78),rgba(5,8,16,.58) 45%,rgba(5,8,16,.93))} body.breakdance .mf-h-depth > .section-container{position:relative;z-index:3;max-width:1240px;margin-left:auto!important;margin-right:auto!important;padding:0 2rem;width:100%} body.breakdance .mf-h-d-mid{position:relative;z-index:3;max-width:620px;width:auto} body.breakdance .mf-h-d-p{font-family:'Rajdhani',sans-serif;font-size:1.02rem;line-height:1.75;color:var(--mf-muted);margin-bottom:1rem} body.breakdance .mf-h-d-p strong{color:var(--mf-text);font-weight:600} body.breakdance .mf-h-d-mid .mf-h-h2{margin-bottom:1.2rem} body.breakdance .mf-h-d-mid .mf-bd-btn{margin-top:1.2rem} /* Foreground rings, pseudo-elements only - nothing to delete in the builder */ body.breakdance .mf-h-d-fore{position:absolute;right:-6%;bottom:-12%;width:min(46vw,620px);z-index:4;opacity:.5;pointer-events:none} body.breakdance .mf-h-d-fore::before{content:'';display:block;width:100%;aspect-ratio:1;border:1px solid var(--mf-hair);border-radius:50%} body.breakdance .mf-h-d-fore::after{content:'';position:absolute;inset:14%;border:1px solid rgba(139,92,246,.24);border-radius:50%} @media(max-width:1023px){body.breakdance .mf-h-d-fore{display:none}body.breakdance .mf-h-depth{min-height:0;padding:5rem 0}} /* ===== WFM - ANNOTATED PLATE ===== Full-bleed pinned image with callouts placed around it, in the vocabulary of an aeronautical approach chart. Same sticky rule as the MFD: the containing block (.section-container) must span the whole track or nothing pins. */ body.breakdance .mf-h-plate-track{position:relative;z-index:2;height:230vh;padding:0;overflow:visible} body.breakdance .mf-h-plate-track > .section-container{max-width:none!important;margin:0!important;padding:0!important;width:100%;height:100%;display:block;overflow:visible} body.breakdance .mf-h-plate-stage{position:sticky;top:0;height:100vh;overflow:hidden;width:100%;display:block} body.breakdance .mf-h-plate-med{position:absolute;inset:0;width:auto;z-index:1} body.breakdance img.mf-h-plate-img{width:100%;height:100%;object-fit:cover;display:block;opacity:.95;filter:saturate(.85) contrast(1.04);transition:transform .1s linear} body.breakdance .mf-h-plate-med::after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 78% 68% at 50% 50%,rgba(5,8,16,.18),rgba(5,8,16,.74))} body.breakdance .mf-h-plate-hd{position:absolute;left:clamp(2rem,7vw,6rem);top:clamp(5rem,15vh,9rem);z-index:5;max-width:420px;width:auto} body.breakdance .mf-h-plate-hd .mf-h-h2{margin-bottom:.7rem;text-align:left} body.breakdance .mf-h-plate-hd .mf-h-sub{text-align:left} body.breakdance .mf-h-co{position:absolute;z-index:6;width:clamp(230px,24vw,300px);opacity:0;transform:translateY(16px);transition:opacity .6s var(--mf-ease),transform .6s var(--mf-ease)} body.breakdance .mf-h-co.mf-on{opacity:1;transform:none} /* FOUR CALLOUTS, TWO COLUMNS. Reading path is left column top to bottom, then right column top to bottom, which is also the order the scroll driver reveals them in (thresholds are .14 + i*.23, so four panels land at .14 .37 .60 .83 with no JS change). The heading plate owns the upper left, so the left column starts below it. */ body.breakdance .mf-h-co-1{left:8%;top:38%} body.breakdance .mf-h-co-2{left:8%;bottom:13%} body.breakdance .mf-h-co-3{right:9%;top:24%} body.breakdance .mf-h-co-4{right:9%;bottom:13%} body.breakdance .mf-h-co-head{display:flex;flex-direction:row;align-items:center;gap:.7rem;padding:.75rem 1.1rem;border-bottom:1px solid var(--mf-hair);background:rgba(255,255,255,.022);width:100%} body.breakdance .mf-h-co-h{font-family:'Orbitron',sans-serif;font-weight:700;text-transform:uppercase;font-size:.9rem;letter-spacing:.045em;margin:1.1rem 1.15rem .45rem} body.breakdance .mf-h-co-p{font-family:'Rajdhani',sans-serif;font-size:.88rem;line-height:1.6;color:var(--mf-muted);padding:0 1.15rem 1.1rem} body.breakdance .mf-h-plate-hint{position:absolute;left:50%;bottom:2.2rem;transform:translateX(-50%);z-index:6;font-family:var(--mf-mono);font-size:.58rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--mf-muted);opacity:.55;white-space:nowrap} /* Static fallback: never leave a tall empty band if pinning is unavailable */ @media(max-width:1023px){ body.breakdance .mf-h-plate-track{height:auto} body.breakdance .mf-h-plate-track > .section-container{height:auto;padding:0 1.5rem!important} body.breakdance .mf-h-plate-stage{position:static;height:auto;padding:4rem 0} body.breakdance .mf-h-plate-med{position:relative;inset:auto;height:42vh} body.breakdance .mf-h-plate-hd{position:static;margin:2.5rem auto 2rem;max-width:none} body.breakdance .mf-h-co{position:static;opacity:1;transform:none;width:auto;max-width:520px;margin:0 auto 1.2rem} body.breakdance .mf-h-plate-hint{position:static;transform:none;text-align:center;margin-top:1rem} } html.mf-still body.breakdance .mf-h-plate-track{height:auto} html.mf-still body.breakdance .mf-h-plate-stage{position:static;height:auto} html.mf-still body.breakdance .mf-h-co{position:static;opacity:1;transform:none;width:auto;margin:0 auto 1.2rem} /* ===== CTA ===== */ body.breakdance .mf-h-cta-sec{position:relative;z-index:2;padding:6rem 0 7rem} body.breakdance .mf-h-cta-sec > .section-container{max-width:1240px;margin-left:auto!important;margin-right:auto!important;padding:0 2rem;width:100%} body.breakdance .mf-h-cta{max-width:980px;margin:0 auto!important;text-align:center;padding:4.5rem 2rem} body.breakdance .mf-h-cta .mf-h-eb{justify-content:center} body.breakdance .mf-h-cta .mf-h-h2{text-align:center!important;margin-bottom:1rem} body.breakdance .mf-h-cta-p{font-family:'Rajdhani',sans-serif;font-size:1.02rem;line-height:1.7;color:var(--mf-muted);max-width:520px;margin:0 auto 2.2rem;text-align:center} body.breakdance .mf-h-cta-btn .bde-button__button{padding:1.15rem 3rem;font-size:.74rem;letter-spacing:.16em} body.breakdance .mf-h-sims{margin-top:2.3rem;font-family:var(--mf-mono);font-size:.62rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--mf-muted);text-align:center} @media(max-width:767px){body.breakdance .mf-h-cta{padding:3rem 1.4rem}body.breakdance .mf-h-cta-btn .bde-button__button{padding:1rem 1.8rem}} /* ========================================================== v2 - LAYOUT CORRECTIONS ROOT CAUSE of every left-alignment issue: Breakdance declares .section-container as flex column with align-items:flex-start and text-align:left. Children therefore shrink to content width and hug the left edge. Fixing it once here replaces all the per-section patches. ========================================================== */ body.breakdance .mf-h-hero > .section-container, body.breakdance .mf-h-stats-sec > .section-container, body.breakdance .mf-h-mfd-track > .section-container, body.breakdance .mf-h-feat-sec > .section-container, body.breakdance .mf-h-depth > .section-container, body.breakdance .mf-h-plate-track > .section-container, body.breakdance .mf-h-cta-sec > .section-container, body.breakdance .mf-bd-hd > .section-container, body.breakdance .mf-bd-ft > .section-container{align-items:stretch!important;text-align:inherit!important;width:100%} /* 1. Stats strip overlapped the hero with a transform, which left its own height as dead space underneath. A negative margin removes the gap. */ body.breakdance .mf-h-stats-sec{padding:0;margin-top:-4.5rem;margin-bottom:2rem} body.breakdance .mf-h-stats-sec > .section-container{transform:none;padding:0 2rem} /* 2. The MFD panel was taller than the viewport, so its header scrolled out of sight and the 01/03 counter was never visible. Cap it and centre it. */ body.breakdance .mf-h-mfd-stage{justify-content:center;padding:4vh 0} body.breakdance .mf-h-mfd{max-height:86vh;display:flex;flex-direction:column} body.breakdance .mf-h-mfd-body{min-height:0;flex:1 1 auto;overflow:hidden} body.breakdance .mf-h-mfd-pages{min-height:0;height:100%} body.breakdance .mf-h-pg-txt{padding:1.8rem 1.8rem;overflow:auto} /* 3. Pinning budget trimmed: 260vh was more motionless scroll than the three pages need. */ body.breakdance .mf-h-mfd-track{height:230vh} /* 5. Economy engine header centred like the other section heads. */ body.breakdance .mf-h-plate-hd{left:50%;transform:translateX(-50%);text-align:center;max-width:640px} body.breakdance .mf-h-plate-hd .mf-h-h2,body.breakdance .mf-h-plate-hd .mf-h-sub{text-align:center!important} body.breakdance .mf-h-plate-hd .mf-h-eb{justify-content:center} body.breakdance .mf-h-plate-hd .mf-h-eb::after{content:'';height:1px;width:clamp(24px,5vw,58px);flex:none;background:linear-gradient(90deg,var(--mf-cyan-lit),transparent)} @media(max-width:1023px){body.breakdance .mf-h-plate-hd{left:auto;transform:none}} /* 6. CTA: the panel and every child centred. */ body.breakdance .mf-h-cta{align-items:center} body.breakdance .mf-h-cta > *{margin-left:auto;margin-right:auto} body.breakdance .mf-h-cta .mf-bd-btn{display:flex;justify-content:center;width:100%} /* ========================================================== v3 - FINAL ALIGNMENT + MFD HEIGHT Breakdance .bde-div is a flex column with align-items:flex-start, so every child shrinks to its own content width. That is why blocks kept sitting left even inside a centred parent. Fixed per container below rather than globally, to avoid disturbing the header/footer. ========================================================== */ /* 1. WFM header: centre the eyebrow and the sub-line, not just the H2. */ body.breakdance .mf-h-plate-hd{display:flex;flex-direction:column;align-items:center} body.breakdance .mf-h-plate-hd > *{width:100%;text-align:center} /* 2. Feature cards were shrinking to content width, which pushed the whole dock visually left. Stretch them to the full list width. */ body.breakdance .mf-h-dock-list{align-items:stretch} body.breakdance .mf-h-dk{width:100%;align-self:stretch;box-sizing:border-box} body.breakdance .mf-h-dk:nth-child(even){width:auto} /* 3. MFD: the 86vh cap plus overflow:hidden was clipping the spec list. Let the panel size to its content, and bound the PAGES area instead so the whole panel still fits the viewport. */ body.breakdance .mf-h-mfd{max-height:none;display:block} body.breakdance .mf-h-mfd-body{min-height:0;height:auto;overflow:visible} /* ADAPT-TO-IMAGE FIX (2026-08-25e): this clamp() was a guess at how tall the pages area needed to be and fought the content on both sides - too short for the text column's spec list at some viewports (the original gap bug), too tall for the image once .mf-h-pg-med carries its own aspect-ratio (see that rule above). display:grid here, plus the base .mf-h-pg now placed at grid-column:1;grid-row:1 instead of position:absolute, let this row auto-size to the taller of the two - text or image - measured by the browser, not guessed by us. min-height is just a small collapse guard, not a target height. */ body.breakdance .mf-h-mfd-pages{display:grid;height:auto;min-height:280px;overflow:visible} body.breakdance .mf-h-pg-txt{overflow:visible;padding:1.8rem 1.8rem 1.6rem} body.breakdance .mf-h-mfd-stage{padding:2vh 0} body.breakdance .mf-h-mfd-tabs{min-height:0} /* v3.1 - section head: same flex-column/flex-start issue as the WFM header. The eyebrow shrank to its own width and sat left of the H2 centre. */ body.breakdance .mf-h-sec-h{display:flex;flex-direction:column;align-items:center} body.breakdance .mf-h-sec-h > *{width:100%;text-align:center} /* ========================================================================== MOBILE / TABLET - MUST STAY LAST IN THIS FILE The v2/v3 desktop corrections were appended AFTER the original media queries. Being unconditional and later in the cascade they overrode the mobile fallbacks: the MFD kept overflow:hidden and a 52vh min-height while its pages were meant to be a plain stack, so content was clipped on phones. Everything below re-asserts small-screen behaviour and must stay last. ========================================================================== */ @media (max-width:1023px){ body.breakdance .mf-h-hero > .section-container,body.breakdance .mf-h-feat-sec > .section-container,body.breakdance .mf-h-depth > .section-container,body.breakdance .mf-h-cta-sec > .section-container{padding-left:1.25rem;padding-right:1.25rem} body.breakdance .mf-h-hero{min-height:auto} body.breakdance .mf-h-hero > .section-container{padding-top:7rem;padding-bottom:3rem} body.breakdance .mf-h-hero-in{grid-template-columns:1fr;gap:2.5rem} body.breakdance h1.mf-h-h1{font-size:clamp(2rem,9vw,3rem);line-height:1.06} body.breakdance .mf-h-lead{font-size:1rem;max-width:none;margin:1.1rem 0 1.6rem} body.breakdance .mf-h-ctas{flex-direction:row;flex-wrap:wrap;gap:.7rem} body.breakdance .mf-h-ctas .bde-button__button{padding:.85rem 1.4rem;font-size:.66rem} body.breakdance .mf-h-panel-head{padding:.7rem .9rem} body.breakdance img.mf-h-panel-img{padding:.9rem} body.breakdance .mf-h-chips{padding:0 .9rem .9rem} body.breakdance .mf-h-stats-sec{margin-top:1.5rem;margin-bottom:1.5rem} body.breakdance .mf-h-stats{grid-template-columns:repeat(2,1fr)} body.breakdance .mf-h-st{padding:1.1rem .8rem} body.breakdance .mf-h-st:nth-child(3)::before{display:none} body.breakdance .mf-h-st:nth-child(3),body.breakdance .mf-h-st:nth-child(4){border-top:1px solid var(--mf-hair)} /* MFD: plain stack, no pinning, nothing clipped */ body.breakdance .mf-h-mfd-track{height:auto!important;padding:3rem 0} body.breakdance .mf-h-mfd-track > .section-container{height:auto;padding:0 1.25rem!important} body.breakdance .mf-h-mfd-stage{position:static!important;height:auto!important;display:block;padding:0} body.breakdance .mf-h-mfd{width:100%;max-height:none} body.breakdance .mf-h-mfd-tabs,body.breakdance .mf-h-mfd-prog{display:none!important} body.breakdance .mf-h-mfd-body{grid-template-columns:1fr!important;min-height:0!important;height:auto!important;overflow:visible!important} body.breakdance .mf-h-mfd-pages{position:static!important;display:flex!important;flex-direction:column;height:auto!important;min-height:0!important;overflow:visible!important} body.breakdance .mf-h-pg{position:static!important;opacity:1!important;visibility:visible!important;transform:none!important;grid-template-columns:1fr!important;border-bottom:1px solid var(--mf-hair)} body.breakdance .mf-h-pg:last-child{border-bottom:none} body.breakdance .mf-h-pg-med{aspect-ratio:1536/1024;min-height:0;order:-1;background-color:var(--mf-void)} /* Same reasoning as the desktop NO-CROP FIX above: this wash used to darken the bottom of the stacked mobile image, over the same baked-in status widget/button now that object-fit is contain everywhere. Dropped so the graphic stays fully legible on phones and tablets too - only the scanline texture from the shared ::after (declared once, above the desktop/mobile split) remains. */ body.breakdance .mf-h-pg-txt{padding:1.4rem 1.2rem} body.breakdance .mf-h-pg-h{font-size:1.3rem} /* features dock */ body.breakdance .mf-h-feat-sec{padding:3.5rem 0} body.breakdance .mf-h-dock{grid-template-columns:1fr!important;max-width:none} body.breakdance .mf-h-dock-rail{display:none!important} body.breakdance .mf-h-dk{padding:1.2rem 1.1rem 1.2rem 3.6rem;margin-left:0!important;width:100%!important} body.breakdance .mf-h-dk::after{display:none} body.breakdance .mf-h-dk::before{left:1rem;top:1.3rem;width:22px;height:22px} body.breakdance .mf-h-dk:hover{transform:none} body.breakdance .mf-h-h2{font-size:clamp(1.5rem,6.5vw,2.1rem)} /* showcase */ body.breakdance .mf-h-depth{min-height:0;padding:3.5rem 0} body.breakdance .mf-h-d-fore{display:none} body.breakdance .mf-h-d-mid{max-width:none} /* WFM stacked plate */ body.breakdance .mf-h-plate-track{height:auto!important;padding:3.5rem 0} body.breakdance .mf-h-plate-track > .section-container{height:auto;padding:0 1.25rem!important} body.breakdance .mf-h-plate-stage{position:static!important;height:auto!important;overflow:visible;display:block;padding:0} body.breakdance .mf-h-plate-med{position:relative!important;inset:auto!important;height:38vh;min-height:230px;width:100%} body.breakdance img.mf-h-plate-img{transform:none!important} body.breakdance .mf-h-plate-hd{position:static!important;transform:none!important;left:auto!important;max-width:none;margin:2rem 0 1.6rem} body.breakdance .mf-h-co{position:static!important;opacity:1!important;transform:none!important;width:100%!important;max-width:none;margin:0 0 1rem} body.breakdance .mf-h-plate-hint{position:static!important;transform:none!important;text-align:center;margin-top:.5rem;white-space:normal} /* CTA */ body.breakdance .mf-h-cta-sec{padding:3.5rem 0 4rem} body.breakdance .mf-h-cta{padding:2.6rem 1.2rem} body.breakdance .mf-h-cta-btn .bde-button__button{padding:1rem 1.6rem;font-size:.68rem} body.breakdance .mf-h-sims{font-size:.56rem;letter-spacing:.14em} } @media (max-width:479px){ body.breakdance .mf-h-stats{grid-template-columns:1fr} body.breakdance .mf-h-st + .mf-h-st::before{display:none} body.breakdance .mf-h-st + .mf-h-st{border-top:1px solid var(--mf-hair)} body.breakdance .mf-h-ctas .mf-bd-btn{flex:1 1 100%} body.breakdance .mf-h-ctas .bde-button__button{width:100%} body.breakdance .mf-h-pg-med{min-height:170px} } /* ========================================================================== v5 HOME - THE STATS STRIP IS NOW A WFM TELEMETRY READOUT. It used to read 12K+ active players / 99% uptime / infinity possibilities / live economy. Not one of the four could be verified by a visitor, and this audience checks. Every figure is now derived from the world model: 55,642 commercial routes carrying 200 daily passengers each. Two of the four move on a timer so the page reads as a running world rather than a brochure. The figures are model output, NOT a live database read - when the backend endpoint exists only mf-hud-home.js changes. ========================================================================== */ body.breakdance .mf-h-st-n{font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1} body.breakdance .mf-h-st-pax .mf-h-st-n, body.breakdance .mf-h-st-routes .mf-h-st-n{font-size:clamp(1.15rem,2.1vw,1.85rem)} /* running indicator - a 5px square that breathes, drawn on the label so the figure itself stays a clean numeric readout */ body.breakdance .mf-h-st-live .mf-h-st-l{ display:inline-flex;align-items:center;justify-content:center;gap:.5rem; } body.breakdance .mf-h-st-live .mf-h-st-l::before{ content:'';width:5px;height:5px;flex:0 0 auto; background-color:var(--mf-cyan); animation:mf-h-st-blip 2.4s var(--mf-ease) infinite; } @keyframes mf-h-st-blip{ 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.28;transform:scale(.7)} } /* the value swaps in with a short vertical settle, like an instrument stepping */ body.breakdance .mf-h-st-n.mf-h-st-step{animation:mf-h-st-settle .42s var(--mf-ease)} @keyframes mf-h-st-settle{ 0%{opacity:.35;transform:translateY(-3px)} 100%{opacity:1;transform:none} } html.mf-still body.breakdance .mf-h-st-live .mf-h-st-l::before{animation:none} html.mf-still body.breakdance .mf-h-st-n.mf-h-st-step{animation:none} @media (max-width:767px){ body.breakdance .mf-h-st-l{font-size:.54rem;letter-spacing:.16em} } /* -------------------------------------------------------------------------- MFD TAB STATUS. The panel bodies already carried Live / In development, but the tab rail did not: three identically weighted tabs still implied three playable roles to anyone who did not scroll the panel. One marker per tab, no rebuild. Violet is the In Development state, green is shipped. -------------------------------------------------------------------------- */ body.breakdance .mf-h-tab{display:flex;flex-direction:row;align-items:center;gap:.6rem} body.breakdance .mf-h-tab-live::before, body.breakdance .mf-h-tab-dev::before{ content:'';width:5px;height:5px;flex:0 0 auto; } body.breakdance .mf-h-tab-live::before{background-color:#5DCAA5} body.breakdance .mf-h-tab-dev::before{background-color:#8B5CF6} body.breakdance .mf-h-tab-live::after, body.breakdance .mf-h-tab-dev::after{ margin-left:auto;flex:0 0 auto; font-family:var(--mf-mono);font-size:.5rem;font-weight:500; letter-spacing:.14em;text-transform:uppercase; } body.breakdance .mf-h-tab-live::after{content:'Live';color:#5DCAA5} body.breakdance .mf-h-tab-dev::after{content:'In dev';color:#8B5CF6} /* -------------------------------------------------------------------------- DEPTH SECTION, NATIVE FIELD. The section used to sit on an AI-generated background carrying a .78 to .93 scrim to make it readable. The image is a hard constraint violation and has been removed at the element. Left alone the old scrim would paint a near-opaque slab over the starfield - a dead band, which is worse than the photo was. Depth is rebuilt the way the design system asks for it: the field shows through, a hairline grid and two drifting glows carry the volume. -------------------------------------------------------------------------- */ body.breakdance .mf-h-depth::after{ background-color:rgba(5,8,16,.4); background-image: radial-gradient(120% 80% at 78% 18%,rgba(0,212,255,.10) 0%,rgba(0,212,255,0) 55%), radial-gradient(90% 70% at 8% 92%,rgba(139,92,246,.09) 0%,rgba(139,92,246,0) 60%), linear-gradient(180deg,rgba(5,8,16,.62) 0%,rgba(5,8,16,.28) 42%,rgba(5,8,16,.72) 100%), url('https://metaflight.aero/wp-content/uploads/2026/08/MF-Home-WFM-Section-BGimg.png'); background-size:100% 100%,100% 100%,100% 100%,cover; background-position:0 0,0 0,0 0,center center; background-repeat:no-repeat,no-repeat,no-repeat,no-repeat; background-attachment:scroll,scroll,scroll,fixed; } body.breakdance .mf-h-depth::before{ content:'';position:absolute;inset:0;z-index:2;pointer-events:none; background-image: linear-gradient(to right,rgba(160,225,255,.055) 1px,transparent 1px), linear-gradient(to bottom,rgba(160,225,255,.055) 1px,transparent 1px); background-size:96px 96px; -webkit-mask-image:radial-gradient(120% 90% at 60% 40%,#000 0%,transparent 72%); mask-image:radial-gradient(120% 90% at 60% 40%,#000 0%,transparent 72%); } body.breakdance .mf-h-d-fore{opacity:.62} /* ========================================================================== WFM PLATE, REAL CAPTURE (2026-08-25b) The abstract hand-drawn field (great-circle rings on a hairline graticule) was the placeholder while this slot had no real capture - see the removed comment below this one for why. MF-Home-WFM-Section-BGimg.png (attachment 11074) is now in. Profiled with GD before writing this: every edge/corner band averages luminance 5-15 (near --mf-void), with two small hotspots only (roughly 19% across / 25% down, and 56% across / 58% down) - not a full bright read like the home hero film, so no mirroring or repositioning was needed. The left wash below exists specifically to cover the hotspot that sits under the heading. NOTE: mf-hud-home.js scaled .mf-h-plate-img on scroll. That query still returns null (this slot has never carried a real img element, only a CSS background) and the guard is `if (plateImg)`, so the parallax stays inert. ========================================================================== */ body.breakdance .mf-h-plate-med{ background-color:rgba(5,8,16,.4); background-image: linear-gradient(90deg,rgba(5,8,16,.88) 0%,rgba(5,8,16,.42) 32%,rgba(5,8,16,0) 60%), linear-gradient(0deg,rgba(5,8,16,.72) 0%,rgba(5,8,16,0) 26%), radial-gradient(60% 55% at 85% 85%,rgba(0,212,255,.10) 0%,rgba(0,212,255,0) 70%), url('https://metaflight.aero/wp-content/uploads/2026/08/MF-Home-WFM-Section-BGimg.png'); background-size:100% 100%,100% 100%,100% 100%,cover; background-position:0 0,0 0,0 0,center center; background-repeat:no-repeat,no-repeat,no-repeat,no-repeat; background-attachment:scroll,scroll,scroll,fixed; overflow:hidden; } /* soft radial vignette: focuses the centre, keeps the frame edge dark */ body.breakdance .mf-h-plate-med::after{ z-index:2; background:radial-gradient(ellipse 85% 75% at 50% 50%,rgba(5,8,16,0) 55%,rgba(5,8,16,.4) 100%); } /* ========================================================================== HERO ECONOMIC LOOP (v5, 2026-08-20) Replaces the simulator-compatibility plate in the hero panel. Four role stations on a ring, amber FlightCoin tokens travelling between them, one readout line per step, the aircraft flying the outer arc. Built from plain Breakdance Div/Text nodes: no SVG element on the canvas, no Code Block. Geometry is CSS, the coin is --mf-coin from the token file. mf-hud-home.js swaps ONE class on .mf-h-loop (.mf-s1 ... .mf-s6). All radii are expressed against --S so a single value drives the layout. ========================================================================== */ body.breakdance .mf-h-loop{ --S:clamp(228px,23vw,286px); position:relative;width:100%; display:flex;flex-direction:column;align-items:center;justify-content:flex-start; gap:1.05rem;padding:1.5rem 1.1rem .4rem; } body.breakdance .mf-h-ring{ position:relative;flex:0 0 auto; width:var(--S);height:var(--S);max-width:none;overflow:visible; } /* three concentric hairlines: ground lane, role ring, flight arc. closest-side pins 100 percent to the half-size, so the percentages below are exactly twice the radius expressed as a fraction of --S. */ body.breakdance .mf-h-ring::before{ content:'';position:absolute;inset:0;z-index:1;pointer-events:none; background: radial-gradient(circle closest-side at 50% 50%,transparent calc(84% - 1px),rgba(0,212,255,.20) calc(84% - 1px),rgba(0,212,255,.20) 84%,transparent 84%), radial-gradient(circle closest-side at 50% 50%,transparent calc(60% - 1px),var(--mf-hair) calc(60% - 1px),var(--mf-hair) 60%,transparent 60%), radial-gradient(circle closest-side at 50% 50%,transparent calc(40% - 1px),rgba(255,176,32,.22) calc(40% - 1px),rgba(255,176,32,.22) 40%,transparent 40%); } /* radar sweep, masked to the flight arc so it never paints a square corner */ body.breakdance .mf-h-ring::after{ content:'';position:absolute;inset:0;z-index:1;pointer-events:none; background:conic-gradient(from 0deg,rgba(0,212,255,.15),rgba(0,212,255,0) 34%,rgba(0,212,255,0) 100%); -webkit-mask-image:radial-gradient(circle closest-side at 50% 50%,#000 84%,transparent 84%); mask-image:radial-gradient(circle closest-side at 50% 50%,#000 84%,transparent 84%); animation:mf-h-sweep 11s linear infinite; } @keyframes mf-h-sweep{to{transform:rotate(360deg)}} /* ---- role stations ---- */ body.breakdance .mf-h-nd{ position:absolute;z-index:4;width:88px; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.34rem; } body.breakdance .mf-h-nd::before{ content:'';flex:0 0 auto;width:11px;height:11px; background-color:rgba(160,225,255,.30); clip-path:polygon(3px 0,100% 0,100% calc(100% - 3px),calc(100% - 3px) 100%,0 100%,0 3px); transition:background-color .45s var(--mf-ease),transform .45s var(--mf-ease); } body.breakdance .mf-h-nd-t{ width:100%;text-align:center;white-space:nowrap; font-family:var(--mf-mono);font-size:.55rem;font-weight:500;letter-spacing:.14em; text-transform:uppercase;color:var(--mf-muted); transition:color .45s var(--mf-ease); } body.breakdance .mf-h-nd-pax{left:50%;top:20%;transform:translate(-50%,-50%)} body.breakdance .mf-h-nd-air{left:80%;top:50%;transform:translate(-50%,-50%)} body.breakdance .mf-h-nd-plt{left:50%;top:80%;transform:translate(-50%,-50%)} body.breakdance .mf-h-nd-apt{left:20%;top:50%;transform:translate(-50%,-50%)} /* lit station: the destination of the step being read out */ body.breakdance .mf-h-loop.mf-s1 .mf-h-nd-pax::before, body.breakdance .mf-h-loop.mf-s6 .mf-h-nd-pax::before, body.breakdance .mf-h-loop.mf-s2 .mf-h-nd-air::before, body.breakdance .mf-h-loop.mf-s3 .mf-h-nd-plt::before, body.breakdance .mf-h-loop.mf-s5 .mf-h-nd-plt::before, body.breakdance .mf-h-loop.mf-s4 .mf-h-nd-apt::before{ background-color:var(--mf-cyan);transform:scale(1.35); } body.breakdance .mf-h-loop.mf-s1 .mf-h-nd-pax .mf-h-nd-t, body.breakdance .mf-h-loop.mf-s6 .mf-h-nd-pax .mf-h-nd-t, body.breakdance .mf-h-loop.mf-s2 .mf-h-nd-air .mf-h-nd-t, body.breakdance .mf-h-loop.mf-s3 .mf-h-nd-plt .mf-h-nd-t, body.breakdance .mf-h-loop.mf-s5 .mf-h-nd-plt .mf-h-nd-t, body.breakdance .mf-h-loop.mf-s4 .mf-h-nd-apt .mf-h-nd-t{color:var(--mf-text)} /* ---- travelling tokens ---- Each pivot fills the ring and rotates about its centre; the token sits on its own lane via translateY. Rotating the pivot walks the token round the circle, so no path maths and no keyframe per segment. */ body.breakdance .mf-h-piv{ position:absolute;inset:0;z-index:5;width:auto;max-width:none;pointer-events:none; transition:transform 1.2s var(--mf-ease); } body.breakdance .mf-h-fc{ position:absolute;left:50%;top:50%;width:21px;height:21px;margin:-10.5px 0 0 -10.5px; background-image:var(--mf-coin);background-size:contain;background-repeat:no-repeat;background-position:center; filter:drop-shadow(0 0 7px rgba(255,176,32,.55)); opacity:0;transition:opacity .42s var(--mf-ease); } body.breakdance .mf-h-piv-fare .mf-h-fc, body.breakdance .mf-h-piv-crew .mf-h-fc{transform:translateY(calc(var(--S) * -.30))} body.breakdance .mf-h-piv-grnd .mf-h-fc{transform:translateY(calc(var(--S) * -.20))} body.breakdance .mf-h-ac{ position:absolute;left:50%;top:50%;width:23px;height:23px;margin:-11.5px 0 0 -11.5px; transform:translateY(calc(var(--S) * -.42)); background-color:var(--mf-cyan); -webkit-mask-image:var(--mf-jet);mask-image:var(--mf-jet); -webkit-mask-size:contain;mask-size:contain; -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat; -webkit-mask-position:center;mask-position:center; filter:drop-shadow(0 0 9px rgba(0,212,255,.6)); opacity:0;transition:opacity .42s var(--mf-ease); } /* start angles. Step 1 is the reset frame: transitions are cut there so the tokens snap back invisibly instead of rewinding across the screen. */ body.breakdance .mf-h-piv-fare{transform:rotate(0deg)} body.breakdance .mf-h-piv-crew{transform:rotate(90deg)} body.breakdance .mf-h-piv-grnd{transform:rotate(90deg)} body.breakdance .mf-h-piv-air{transform:rotate(195deg)} body.breakdance .mf-h-loop.mf-s1 .mf-h-piv{transition:none} body.breakdance .mf-h-loop.mf-s2 .mf-h-piv-fare, body.breakdance .mf-h-loop.mf-s3 .mf-h-piv-fare, body.breakdance .mf-h-loop.mf-s4 .mf-h-piv-fare, body.breakdance .mf-h-loop.mf-s5 .mf-h-piv-fare, body.breakdance .mf-h-loop.mf-s6 .mf-h-piv-fare{transform:rotate(90deg)} body.breakdance .mf-h-loop.mf-s3 .mf-h-piv-crew, body.breakdance .mf-h-loop.mf-s4 .mf-h-piv-crew, body.breakdance .mf-h-loop.mf-s5 .mf-h-piv-crew{transform:rotate(180deg)} body.breakdance .mf-h-loop.mf-s6 .mf-h-piv-crew{transform:rotate(360deg)} body.breakdance .mf-h-loop.mf-s4 .mf-h-piv-grnd, body.breakdance .mf-h-loop.mf-s5 .mf-h-piv-grnd{transform:rotate(270deg)} body.breakdance .mf-h-loop.mf-s6 .mf-h-piv-grnd{transform:rotate(360deg)} body.breakdance .mf-h-loop.mf-s5 .mf-h-piv-air, body.breakdance .mf-h-loop.mf-s6 .mf-h-piv-air{transform:rotate(345deg)} body.breakdance .mf-h-loop.mf-s2 .mf-h-piv-fare .mf-h-fc{opacity:1} body.breakdance .mf-h-loop.mf-s3 .mf-h-piv-crew .mf-h-fc, body.breakdance .mf-h-loop.mf-s4 .mf-h-piv-crew .mf-h-fc, body.breakdance .mf-h-loop.mf-s5 .mf-h-piv-crew .mf-h-fc, body.breakdance .mf-h-loop.mf-s6 .mf-h-piv-crew .mf-h-fc{opacity:1} body.breakdance .mf-h-loop.mf-s4 .mf-h-piv-grnd .mf-h-fc, body.breakdance .mf-h-loop.mf-s5 .mf-h-piv-grnd .mf-h-fc, body.breakdance .mf-h-loop.mf-s6 .mf-h-piv-grnd .mf-h-fc{opacity:1} body.breakdance .mf-h-loop.mf-s5 .mf-h-ac{opacity:1} /* ---- readout: one line per step, stacked in place ---- */ body.breakdance .mf-h-read{ position:relative;width:100%;min-height:3.1em;display:block; } body.breakdance .mf-h-step{ position:absolute;left:0;top:0;width:100%;text-align:center; font-family:var(--mf-mono);font-size:.58rem;font-weight:500;letter-spacing:.11em; text-transform:uppercase;color:var(--mf-muted);line-height:1.65; opacity:0;transform:translateY(7px); transition:opacity .5s var(--mf-ease),transform .5s var(--mf-ease); } body.breakdance .mf-h-loop.mf-s1 .mf-h-step:nth-child(1), body.breakdance .mf-h-loop.mf-s2 .mf-h-step:nth-child(2), body.breakdance .mf-h-loop.mf-s3 .mf-h-step:nth-child(3), body.breakdance .mf-h-loop.mf-s4 .mf-h-step:nth-child(4), body.breakdance .mf-h-loop.mf-s5 .mf-h-step:nth-child(5), body.breakdance .mf-h-loop.mf-s6 .mf-h-step:nth-child(6){opacity:1;transform:none;color:var(--mf-text)} /* ---- compatibility strip, under the loop ---- */ body.breakdance .mf-h-compat{ width:100%;display:flex;flex-direction:column;align-items:center;gap:.3rem; padding:.85rem 1.1rem 1rem;box-shadow:inset 0 1px 0 var(--mf-hair); } body.breakdance .mf-h-compat-l{ width:100%;text-align:center;line-height:1.65; font-family:var(--mf-mono);font-size:.55rem;font-weight:500;letter-spacing:.12em; text-transform:uppercase;color:var(--mf-text); } body.breakdance .mf-h-compat-n{ width:100%;text-align:center;line-height:1.6; font-family:var(--mf-mono);font-size:.52rem;font-weight:500;letter-spacing:.1em; text-transform:uppercase;color:var(--mf-muted); } /* reduced motion: the whole loop is shown at once, nothing moves. */ html.mf-still body.breakdance .mf-h-ring::after{animation:none} html.mf-still body.breakdance .mf-h-piv{transition:none} html.mf-still body.breakdance .mf-h-fc, html.mf-still body.breakdance .mf-h-ac{opacity:1} html.mf-still body.breakdance .mf-h-piv-fare{transform:rotate(90deg)} html.mf-still body.breakdance .mf-h-piv-crew{transform:rotate(180deg)} html.mf-still body.breakdance .mf-h-piv-grnd{transform:rotate(270deg)} html.mf-still body.breakdance .mf-h-piv-air{transform:rotate(300deg)} html.mf-still body.breakdance .mf-h-read{min-height:0} html.mf-still body.breakdance .mf-h-step{position:static;opacity:1;transform:none;text-align:left;color:var(--mf-muted)} @media(prefers-reduced-motion:reduce){ body.breakdance .mf-h-ring::after{animation:none} body.breakdance .mf-h-piv{transition:none} } /* ===== ECONOMIC LOOP, RESPONSIVE - keep last in this block ===== */ @media(max-width:1119px){ body.breakdance .mf-h-loop{--S:clamp(224px,26vw,270px)} } @media(max-width:1023px){ body.breakdance .mf-h-loop{--S:min(52vw,272px);padding:1.3rem 1rem .4rem} body.breakdance .mf-h-read{min-height:2.8em} } @media(max-width:767px){ body.breakdance .mf-h-loop{--S:min(74vw,252px);padding:1.15rem .85rem .3rem;gap:.9rem} body.breakdance .mf-h-nd{width:74px} body.breakdance .mf-h-nd-t{font-size:.5rem;letter-spacing:.09em} body.breakdance .mf-h-nd::before{width:9px;height:9px} body.breakdance .mf-h-fc{width:18px;height:18px;margin:-9px 0 0 -9px} body.breakdance .mf-h-ac{width:19px;height:19px;margin:-9.5px 0 0 -9.5px} body.breakdance .mf-h-step{font-size:.54rem;letter-spacing:.07em} body.breakdance .mf-h-read{min-height:3.8em} body.breakdance .mf-h-compat{padding:.75rem .85rem .9rem} body.breakdance .mf-h-compat-l, body.breakdance .mf-h-compat-n{font-size:.5rem;letter-spacing:.07em} } @media(max-width:479px){ body.breakdance .mf-h-loop{--S:min(82vw,238px)} body.breakdance .mf-h-nd{width:64px} body.breakdance .mf-h-nd-t{font-size:.46rem;letter-spacing:.06em} body.breakdance .mf-h-read{min-height:4.6em} } /* ========================================================================== HOME HERO - FILM AS BACKGROUND, HELD RIGHT (2026-08-24, sixth pass) Copy left, film right, film NEVER cropped, and the space around the film built rather than left to a leftover photo. THREE THINGS ARE FIXED HERE, EACH WITH ITS OWN CAUSE. 1. THE EARTH PHOTO BEHIND THE FILM. post-14.css still carries .bde-section-14-457 .section-background-video{background-image:url(... metaflight-homepage-herosection-bgimage-1.jpg)}. It is the OLD fallback image, and it survived every change because a direct write to _breakdance_data never regenerates that file - pitfall 37, second time. The film is contain over a transparent video box, so the photo was showing through the whole letterbox. Killed here, and replaced by a built backdrop: void base plus three wide low-alpha blooms, one cyan seated where the globe sits so the film's own halo continues into the page instead of stopping at its edge. Not a photo, not flat black. 2. THE COMPAT LINES BEING SLICED. Nothing in the hero was clipping them: .mf-h-stats-sec .section-container carries transform:translateY(-50%) and rides UP over the bottom of the hero by design. That overlap was harmless while the column ended at the CTAs; moving the chips and the compat strip into the column put them straight underneath it. The hero now reserves that band in its own bottom padding, and gives it back below 1023 where the stats bar drops its transform. 3. THE FILM WIDTH. The section is full bleed but the copy is not - it lives in .section-container, capped at 1240 and centred, so at 1900px the column ends near 47 percent OF THE VIEWPORT. Anything wider than that puts the route table under the CTAs. THE THREE NUMBERS THAT DECIDE THE COMPOSITION ARE VARIABLES. Drag them in devtools and report back rather than describing the result in words. ========================================================================== */ body.breakdance .mf-h-hero{ --mf-film-w:53%; /* film wrapper width, measured from the RIGHT edge */ --mf-film-fade:16%; /* left edge dissolve, as a share of the wrapper */ --mf-film-top:0%; /* nudge the film up or down inside its box */ min-height:clamp(620px,34vw,100vh); /* MEASURED, 2026-08-25. The film is object-fit:contain, so its box is letterboxed and its top and bottom edges are HARD. Sampling the poster (11026) gives 070710 in all four corners against --mf-void 050810: the base already matches to within two levels and was never the problem. What drew the two seams the owner arrowed was the BLOOMS crossing those hard edges - the cyan halo reached up past the film top, and the bottom-right bloom at 86% 98% sat directly under the film floor, so the void beside the film read lighter than the film itself. RULE: nothing painted on the section may cross the film box. The film occupies 47%-100% horizontally, and vertically between 18% and 26% from the top depending on viewport ratio (16:9 contained in a 53%-wide box). The halo is therefore SHORT - 31% to 57% - and both blue blooms are held left of 40%. Horizontally the film needs no such care: its left edge is already dissolved by --mf-film-fade. */ background: radial-gradient(52% 26% at 73% 44%,rgba(0,212,255,.10),rgba(0,212,255,0) 72%), radial-gradient(62% 58% at 6% 22%,rgba(38,66,112,.28),rgba(5,8,16,0) 72%), radial-gradient(48% 44% at 16% 96%,rgba(20,44,80,.20),rgba(5,8,16,0) 70%), /* Two washes over the field capture, not opacity: a background layer cannot carry its own alpha, so the void is painted back over it. The 90deg wash takes the photo from about 13 percent visible on the copy side to fully extinguished before the film starts, so the two never compete. The 180deg wash seats the top under the header and clears the band the stats bar rides up into. */ linear-gradient(90deg,rgba(5,8,16,.74) 0%,rgba(5,8,16,.78) 40%,rgba(5,8,16,.94) 60%,rgba(5,8,16,1) 74%), linear-gradient(180deg,rgba(5,8,16,.34) 0%,rgba(5,8,16,0) 22%,rgba(5,8,16,0) 64%,rgba(5,8,16,.68) 100%), /* Real in-sim capture by Florian, AFR2929. Chosen on measurement, not taste: of the three candidates it is the only one dark at BOTH bands (top 2/6/20, bottom 4/7/8) with its light in the middle third. The A320 wing capture averages 58/99/147 across its top band and would have put a bright bar directly under the header. MIRRORED ON PURPOSE. In the original frame the horizon band - the only part with any light in it, a desaturated teal around 526A66 - runs along the RIGHT edge, which is precisely where the wash extinguishes the photo for the film. Flipped, that band lands on the copy side where the void actually needed dressing, and the near-black side goes under the film. The warm brown band below it (2F2A1D) resolves to about 12/14/16 at this wash, so it stays invisible and never warms the palette. Attachment 11032; the unmirrored 11030 is kept as the source. */ url('/wp-content/uploads/2026/08/mf-home-hero-field-florian-afr2929-mirrored.webp') 30% 62%/cover no-repeat, var(--mf-void); } /* the leftover fallback photo baked into post-14.css */ body.breakdance .mf-h-hero .section-background-video{ background-image:none; left:auto;right:0;width:var(--mf-film-w); -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.5) calc(var(--mf-film-fade) * .55),rgba(0,0,0,1) var(--mf-film-fade),rgba(0,0,0,1) 100%); mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.5) calc(var(--mf-film-fade) * .55),rgba(0,0,0,1) var(--mf-film-fade),rgba(0,0,0,1) 100%); } body.breakdance .mf-h-hero .section-background-video > video{ object-fit:contain; object-position:center calc(50% + var(--mf-film-top)); background:transparent; } /* the stats bar rides up over this edge - reserve the band */ body.breakdance .mf-h-hero > .section-container{ padding-top:7rem;padding-bottom:10.5rem; } /* copy column, left */ body.breakdance .mf-h-hero-in{ display:flex;flex-direction:row;justify-content:flex-start;align-items:center; width:100%; } body.breakdance .mf-h-hero-in > .mf-h-hero-text{ width:100%;max-width:560px;flex:0 1 560px; display:flex;flex-direction:column;align-items:flex-start;text-align:left; } /* the film no longer runs under the copy, so the veil can come down a long way: enough to seat the type, near nothing over the film itself. */ body.breakdance .mf-h-hero::after{ background: linear-gradient(90deg,rgba(5,8,16,.80) 0%,rgba(5,8,16,.54) 30%,rgba(5,8,16,.14) 46%,rgba(5,8,16,.02) 58%,rgba(5,8,16,.08) 100%), linear-gradient(180deg,rgba(5,8,16,.24),rgba(5,8,16,.05) 45%,rgba(5,8,16,.58)); } /* chips and compat left the panel; both carried panel-context padding */ body.breakdance .mf-h-hero-text .mf-h-chips{padding:1.6rem 0 0;width:100%} body.breakdance .mf-h-hero-text .mf-h-compat{ width:100%;align-items:flex-start; padding:1.1rem 0 0;margin-top:1.4rem; box-shadow:inset 0 1px 0 var(--mf-hair); } body.breakdance .mf-h-hero-text .mf-h-compat-l, body.breakdance .mf-h-hero-text .mf-h-compat-n{text-align:left} /* ---- responsive, keep last in this block ------------------------------- */ @media(max-width:1439px){ body.breakdance .mf-h-hero{--mf-film-w:50%;--mf-film-fade:20%} body.breakdance .mf-h-hero-text .mf-h-compat-l{font-size:.52rem;letter-spacing:.09em} } @media(max-width:1023px){ /* the copy needs the whole width, so the film goes back to being a full bleed backdrop and cover is fine again: nobody reads pax figures in a backdrop at this size, and contain would letterbox a 16:9 film into a thin strip in a tall viewport. The stats bar drops its transform here, so the reserved band goes back too. */ body.breakdance .mf-h-hero{min-height:100vh} body.breakdance .mf-h-hero > .section-container{padding-top:6rem;padding-bottom:4rem} body.breakdance .mf-h-hero .section-background-video{ left:0;right:0;width:auto; -webkit-mask-image:none;mask-image:none; } body.breakdance .mf-h-hero .section-background-video > video{ object-fit:cover;object-position:center center; } body.breakdance .mf-h-hero-in{justify-content:center} body.breakdance .mf-h-hero-in > .mf-h-hero-text{max-width:640px;flex:0 1 640px} body.breakdance .mf-h-hero::after{ background:linear-gradient(180deg,rgba(5,8,16,.62),rgba(5,8,16,.54) 45%,rgba(5,8,16,.80)); } } @media(max-width:767px){ body.breakdance .mf-h-hero-in > .mf-h-hero-text{max-width:none;flex:1 1 auto} body.breakdance .mf-h-hero-text .mf-h-chips{padding-top:1.3rem} body.breakdance .mf-h-hero-text .mf-h-compat{margin-top:1.2rem;padding-top:.9rem} } @media(max-width:479px){ /* the compat line is the longest string on the page: MSFS 2020 / 2024, P3D, FSX, X-Plane 11 / 12, Windows. It has to be allowed to wrap to two or three lines here rather than be squeezed. */ body.breakdance .mf-h-hero-text .mf-h-compat-l{ font-size:.5rem;letter-spacing:.05em;line-height:1.8; } body.breakdance .mf-h-hero-text .mf-h-compat-n{ font-size:.48rem;letter-spacing:.05em;line-height:1.7; } } /* =========================================================== v7 - MFD ROLE LINK + FOUR-CALLOUT PLATE ON SHORT VIEWPORTS =========================================================== */ /* Each MFD role page now offers its own way into the Roles page. A TextLink, not a Button: the page already carries one primary action and a second solid button inside a role card would compete with it. */ body.breakdance .mf-h-pg-txt .mf-h-pg-link{ display:inline-flex;align-items:center;gap:.5rem;align-self:flex-start; margin-top:1.3rem; font-family:var(--mf-mono);font-size:.62rem;font-weight:500; letter-spacing:.18em;text-transform:uppercase; color:var(--mf-cyan);text-decoration:none; transition:color .28s var(--mf-ease),gap .28s var(--mf-ease); } body.breakdance .mf-h-pg-txt .mf-h-pg-link::after{ content:'';width:14px;height:1px;flex:0 0 auto; background:currentColor; transition:width .28s var(--mf-ease); } body.breakdance .mf-h-pg-txt .mf-h-pg-link:hover{color:var(--mf-cyan-lit);gap:.75rem} body.breakdance .mf-h-pg-txt .mf-h-pg-link:hover::after{width:22px} body.breakdance .mf-h-pg-txt .mf-h-pg-link:focus-visible{outline:1px solid var(--mf-cyan-lit);outline-offset:3px} /* A pinned 100vh stage with a heading plate and two stacked callouts per column runs out of vertical room on a laptop. Measured worst case: at 720px of viewport height the heading bottom lands at about 278px and callout 1 at 38 percent starts at 274px, so they touch. Tighten the plate rather than letting the two overlap. */ @media(min-width:1024px) and (max-height:860px){ body.breakdance .mf-h-plate-hd{top:clamp(3.5rem,9vh,5.5rem);max-width:360px} body.breakdance .mf-h-co{width:clamp(208px,20vw,264px)} body.breakdance .mf-h-co-1{top:31%} body.breakdance .mf-h-co-2{bottom:10%} body.breakdance .mf-h-co-3{top:19%} body.breakdance .mf-h-co-4{bottom:10%} } /* Closing CTA: ONE primary action. MFLink is step two, not an alternative to creating an account, so it is a quiet link under the button rather than a second solid button competing with it. */ body.breakdance .mf-h-cta .mf-h-cta-sub{ display:block;margin:1.5rem auto 0;text-align:center; font-family:var(--mf-mono);font-size:.6rem;font-weight:500; letter-spacing:.14em;text-transform:uppercase; color:var(--mf-muted);text-decoration:none; transition:color .28s var(--mf-ease); } body.breakdance .mf-h-cta .mf-h-cta-sub:hover{color:var(--mf-cyan)} body.breakdance .mf-h-cta .mf-h-cta-sub:focus-visible{outline:1px solid var(--mf-cyan-lit);outline-offset:3px} body.breakdance .mf-h-cta .mf-h-sims{margin-top:1.6rem} /* ========================================================================== WFM PHOTO, SHARED PARALLAX BACKDROP (2026-08-25c) Same MF-Home-WFM-Section-BGimg.png now sits behind BOTH the Depth section (Long term design / A World Designed to Grow, block 10890) and the WFM plate (Economy engine / The World Flight Market, block 10891) - previously it only lived on the plate, in the wrong section per review. Both layers use background-attachment:fixed at the same size/position so, scrolling from one section into the next, the photo reads as one continuous backdrop behind two adjacent frames rather than two separate images. Fixed attachment is unreliable and costly on mobile Safari, so it drops to plain scroll under 1024px - this must stay after both rules above to win. ========================================================================== */ @media(max-width:1023px){ body.breakdance .mf-h-depth::after{background-attachment:scroll,scroll,scroll,scroll} body.breakdance .mf-h-plate-med{background-attachment:scroll,scroll,scroll,scroll} } /* ========================================================================== HOME HERO, ULTRA-WIDE + SOFT FLOOR (2026-10-26) 1. The film wrapper was 53% of the FULL-BLEED section, anchored to the viewport's right edge, while the copy lives in the centred 1240px container. On a 3440px Odyssey the film sat 1600 to 3425px, far right of the text. Above 1920px the composition is now a centred 1920px stage: the film keeps exactly the geometry it has at 1920 and the extra width is void on both sides. Its right edge dissolves too, since it no longer touches the viewport edge. 2. The hero ended on a hard line where its photo + washes met the field below (the teal/violet glows). The section now fades out over its last 160px, so the field takes over without a seam. The compat strip sits above the 10.5rem reserved band, outside the fade. ========================================================================== */ @media (min-width:1024px){ body.breakdance .mf-h-hero{ -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,1) calc(100% - 160px),rgba(0,0,0,0) 100%); mask-image:linear-gradient(180deg,rgba(0,0,0,1) calc(100% - 160px),rgba(0,0,0,0) 100%); } } @media (min-width:1921px){ body.breakdance .mf-h-hero{--mf-hero-stage:1920px} body.breakdance .mf-h-hero .section-background-video{ right:calc((100% - var(--mf-hero-stage)) / 2); width:calc(var(--mf-hero-stage) * .53); -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.5) 9%,rgba(0,0,0,1) 16%,rgba(0,0,0,1) 88%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.5) 9%,rgba(0,0,0,1) 16%,rgba(0,0,0,1) 88%,transparent 100%); } } /* ========================================================================== MFD ROW STRETCH + MOBILE HERO TOP (2026-10-27) 1. The three MFD pages share grid-row 1 of .mf-h-mfd-pages, so the row is as tall as the TALLEST page (Airport Operator). .bde-div ships align-items:flex-start (pitfall 3b), so the shorter pages kept their own height and .mf-h-pg-med (height:100%) stopped short of the panel floor: a ~25px empty band under the Pilot and Airline images, none under Airport. Stretch the pages to the row. Harmless on the stacked mobile layout (flex column). 2. Phones: the sticky header is IN the flow, so the 6rem top padding sat entirely below it, and min-height:100vh + align-items:center centred a short column in a tall box. ~200px of void under the header. Content height decides the hero on phones; tablet unchanged. ========================================================================== */ body.breakdance .mf-h-mfd-pages{align-items:stretch} @media (max-width:767px){ body.breakdance .mf-h-hero{min-height:auto;align-items:flex-start} body.breakdance .mf-h-hero > .section-container{padding-top:2.5rem} }