/* PlanningCharts Globe Hero - everything scoped under #pc-globe-hero so FlyNext / Elementor styles (.btn, .badge, .panel, .tag ...) cannot collide. The only exception is the .pc-header-* pair below, which by definition styles the site header; both class names are prefixed so they cannot collide either. */ /* Header visibility during the pinned story. hero.js adds .pc-header-fade once and toggles .pc-header-hidden while the hero is the active ScrollTrigger. Fade rather than display:none / visibility:hidden on purpose - the nav keeps its place in the tab order, and :focus-within brings it straight back for keyboard users, who otherwise could not reach site navigation at all on the homepage. */ .pc-header-fade{transition:opacity .35s ease;} .pc-header-hidden{opacity:0;pointer-events:none;} .pc-header-hidden:focus-within{opacity:1;pointer-events:auto;} @media(prefers-reduced-motion:reduce){ .pc-header-fade{transition:none;} #pc-globe-hero .pc-frame{transition:none;} } /* Block-level host for ScrollTrigger's .pin-spacer. Elementor containers are flex (--display:flex), and GSAP warns that pinning a flex item makes the spacer's padding resolve wrong - which shows up as leftover space once the pin releases. Must NOT set overflow:hidden or a transform: either would break position:fixed on the pinned section. */ .pc-hero-wrap{display:block;width:100%;margin:0;padding:0;} #pc-globe-hero{ position:relative;width:100%;overflow:hidden;height:100vh; background:linear-gradient(180deg,#a6bdd6 0%,#c8d7e8 42%,#eaf0f6 100%); /* Typography from the live site (Elementor kit 6). --short-desc / --color-* are the theme's own :root tokens; the literals are fallbacks for the Elementor editor and the standalone prototype. Source Sans Pro 400/500/600/700 is already enqueued site-wide - the hero adds no second font request. */ font-family:var(--short-desc,"Source Sans Pro"),-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color:var(--color-text,#2C3131); /* headings use the theme's --title-font (PT Serif); everything else Source Sans Pro */ --pc-heading:var(--title-font,"PT Serif"),Georgia,"Times New Roman",serif; /* site palette; the old prototype names stay as aliases so nothing downstream has to change */ --apA:var(--color-primary,#12477B); /* brand primary */ --blue:var(--color-primary,#12477B); /* headline accent */ --navy:var(--color-text,#2C3131); /* dark ink */ --ink:var(--color-text,#2C3131); --muted:#676766; /* kit --e-global-color-text (body copy) */ --green:#00b300;--orange:#fe850f;--grey:#b2b2b2; /* content grid: centred max-width container + gutter. Everything horizontal is anchored to this grid, not raw viewport %. 1320px matches the theme's .site-container. */ --maxw:1320px;--gutter:clamp(24px,3.4vw,60px); /* sticky header height. Correct at first paint; hero.js re-measures and overrides inline if the live header differs (e.g. a shrink-on-scroll effect). Update if the header changes. */ --pc-header:90px; /* Globe centre, as a % of the full section (it bleeds behind the transparent header). Must stay inside 37%-63%: the canvas is 126vh tall, so outside that range one of its horizontal edges crosses into the viewport and shows as a hard line when zoomed in. */ --globe-cy:55%; --cw:min(100vw,var(--maxw)); --cl:max(0px,calc((100vw - var(--maxw))/2)); --edge:calc(var(--cl) + var(--gutter)); --panel-w:min(560px,calc(var(--cw)*0.42)); /* intro panel width - things to its right key off this */ /* Vertical anchor for .panel. hero.js writes the panel transform inline every frame, and an inline style beats any media query - so the breakpoint has to change this variable, never the transform itself. -50% = vertically centred (desktop), 0 = top-anchored (mobile). */ --panel-shift:-50%; --globe-cx:calc(var(--cl) + var(--cw)*0.70); --ov-cx:calc(var(--cl) + var(--cw)*0.62); /* Overlap-proof overlay geometry. One source of truth for the feature-card width, and every overlay's width is capped to the space RIGHT of the text column (viewport minus text column minus 48px breathing room) - so an overlay can never be wide enough to reach the text, at any viewport width. The left:max() clamps in the overlay rules below then keep each overlay's LEFT EDGE at least 24px clear of the card, and the min() wrapper keeps the RIGHT EDGE at least 24px inside the viewport (measured 8-36px clipping at 830-1180px without it). */ --pc-featw:clamp(340px,32vw,460px); --pc-apw:clamp(300px,26vw,360px); --pc-chartw:min(50vw,900px,calc(100vw - var(--edge) - var(--pc-featw) - 48px)); --pc-fanw:min(52vw,796px,calc(100vw - var(--edge) - var(--pc-featw) - 48px)); } #pc-globe-hero *,#pc-globe-hero *::before,#pc-globe-hero *::after{box-sizing:border-box;} /* Layering. The site header is transparent and position:absolute (she-header-transparent-yes), so it floats over the hero instead of taking flow space. Background layers therefore run the full section height and bleed behind it - clipping them to the header line leaves a hard seam across the globe. Only .pc-frame (the content) is inset by the header height. */ #pc-globe-hero .pc-frame{position:absolute;inset:var(--pc-header,0px) 0 0 0;overflow:hidden;z-index:4; transition:inset .25s ease;} /* only actually animates on mobile, see .pc-header-collapsed */ /* left scrim, full-bleed so it does not band at the header line */ #pc-globe-hero::before{content:"";position:absolute;top:0;bottom:0;left:0;z-index:2;pointer-events:none; width:calc(var(--cl) + var(--cw)*0.50); background:linear-gradient(90deg,rgba(214,225,238,.9) 60%,rgba(214,225,238,0));} /* poster = LCP element; covers the globe until WebGL has booted */ #pc-globe-hero .pc-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:3;opacity:0;transition:opacity .4s ease;pointer-events:none;} #pc-globe-hero.pc-booting .pc-poster,#pc-globe-hero.pc-static .pc-poster{opacity:1;} #pc-globe-hero.pc-static #pc-globe, #pc-globe-hero.pc-static .overlay, #pc-globe-hero.pc-static .rail, #pc-globe-hero.pc-static .hint{display:none;} #pc-globe-hero.pc-static .panel[data-panel="0"]{opacity:1;} /* The rendered sphere scales with canvas HEIGHT (the camera's fov is vertical), so height is the framing control and width is free. It must be wide enough that both canvas edges fall outside the viewport: once the camera zooms in (step 1 is altitude 0.60) the surface fills the canvas and any on-screen edge shows as a hard rectangle against the page background. Doubling the larger gap between the globe centre and a viewport edge guarantees full cover. */ #pc-globe{position:absolute;top:var(--globe-cy);left:var(--globe-cx); height:126vh; width:calc(2*max(var(--globe-cx), 100vw - var(--globe-cx)) + 4vw); transform:translate(-50%,-50%);z-index:1;} #pc-globe-hero .stage{position:absolute;z-index:3;inset:0;} /* Seam-blend for the END of the story only - fades in via JS (render(), keyed off vp) as the scroll nears step 4, staying hidden for steps 0-3 so it doesn't fog the globe the whole time. Sits flush with the hero's own bottom edge (both #pc-globe-hero and .pc-frame clip at that line via overflow:hidden, so it can't visually bleed into whatever section follows - it only softens the color transition right at that shared edge). z-index:1, below .stage(3)/ overlays(4)/rating-card(5) so it never covers readable content, but above the globe/scrim. Fixed short height + object-fit:cover, not width-driven - the image's real 800x445 (~1.8:1) aspect ratio meant stretching it to 110% viewport width made it 1000px+ tall. */ #pc-globe-hero .pc-cloud{position:absolute;z-index:1;left:0;right:0;bottom:0;opacity:0; width:100%;object-fit:cover;pointer-events:none; /* svh pairing, same fallback pattern as #pc-globe-hero's own height: vh shifts a few px every time a phone's address bar shows/hides, jittering this strip's height on every such toggle; svh stays fixed. Two declarations, not one clamp() with a comma-fallback - browsers that don't understand svh discard the whole second declaration and keep the first. */ height:clamp(90px,16vh,200px); height:clamp(90px,16svh,200px); /* fades the image's own top edge from transparent - the source PNG's alpha cuts off sharply there, which read as a hard line against the hero's sky instead of a blend. Bottom edge stays fully opaque since that's the edge actually meeting the next section. */ -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 35%,#000 100%); mask-image:linear-gradient(to bottom,transparent 0%,#000 35%,#000 100%);} /* matches the site's .banner-badge */ #pc-globe-hero .eyebrow{display:inline-block;background:var(--color-text,#2C3131);color:#fff;font-size:14px;font-weight:700;line-height:150%;padding:6px 16px;border-radius:50px;margin-bottom:16px;} /* opacity:0 is still hit-testable, and panels 1-4 sit on top of panel 0 (same position, later in source order) - without this they swallow every click on the CTA buttons. hero.js keeps this in sync with the active step; the CSS default covers pre-boot and static mode. */ #pc-globe-hero .panel{position:absolute;left:var(--edge);right:auto;max-width:var(--panel-w);top:50%;transform:translateY(var(--panel-shift));will-change:opacity,transform;pointer-events:none;} #pc-globe-hero .panel[data-panel="0"]{pointer-events:auto;} /* Nudges panel 0 up from dead-centre on desktop. Scoped to min-width so it can't leak into the mobile media query below, which already re-anchors panel 0 to the top via --panel-shift/top overrides of its own - an unscoped rule here would win on specificity and break that. 42% clipped the eyebrow badge against .pc-frame's overflow:hidden top edge - the panel's own content (badge+h1+paragraph+CTA+badges) is tall enough that an 8-point shift ran out of room above it. Pulled back to a smaller shift; the 110px floor is just a safety net for short viewports, not the fix for that clipping - if it still clips, the shift needs to shrink further. */ @media(min-width:821px){ #pc-globe-hero .panel[data-panel="0"]{top:clamp(110px,47%,50%);} } /* headings: PT Serif 700, 52px, line-height 1.2em (kit "secondary" typography) */ #pc-globe-hero .panel[data-panel="0"] h1{font-size:60px;} #pc-globe-hero .panel h1{font-family:var(--pc-heading);font-size:clamp(30px,3.4vw,52px);line-height:1.2;margin:0 0 18px;font-weight:700;letter-spacing:normal;color:var(--color-text,#2C3131);} #pc-globe-hero .panel h1 .accent{color:var(--apA);} #pc-globe-hero .panel p{font-size:16px;line-height:150%;color:var(--muted);margin:0;max-width:56ch;} #pc-globe-hero .panel .tag{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14px;color:var(--navy);margin-bottom:14px; justify-content: center;} #pc-globe-hero .tag .dot{width:12px;height:12px;border-radius:50%;} /* feature steps live in a floating white card (not the intro) */ #pc-globe-hero .panel[data-panel="1"],#pc-globe-hero .panel[data-panel="2"], #pc-globe-hero .panel[data-panel="3"],#pc-globe-hero .panel[data-panel="4"]{ /* no `right` here: the base .panel rule already sets right:auto, and repeating it at this higher specificity would beat the mobile rule's right:var(--gutter) - which showed up as step 1-4 cards having a left gutter but running flush to the right edge on phones. */ max-width:var(--pc-featw); /* single source - the overlay clamps above key off the same var */ background:#fff;border-radius:22px;padding:clamp(26px,2.2vw,38px); box-shadow:0 26px 60px rgba(11,42,74,.20); text-align:center; /* .tag/.eyebrow/.pill are inline-flex/inline-block, so they centre too */ } #pc-globe-hero .panel[data-panel="1"] p,#pc-globe-hero .panel[data-panel="2"] p, #pc-globe-hero .panel[data-panel="3"] p,#pc-globe-hero .panel[data-panel="4"] p{max-width:none;} /* Buttons = the Elementor kit button, verbatim (16px/1.2em Source Sans Pro 600, #12477B fill, 1px border, radius 8px, padding 18px 40px, hover inverts to white). The site defines only the filled variant, so .btn-outline is that same style with the hover/rest states swapped - no invented colours. */ #pc-globe-hero .cta{display:flex;gap:16px;margin-top:24px;flex-wrap:wrap;align-items:flex-start;} /* pairs the pill with the primary button specifically, rather than spanning under the whole CTA row - button widths are content-driven, not fixed, so this needs an actual wrapper rather than a margin-left guess that would break if the button text ever changes. */ #pc-globe-hero .cta-primary{display:flex;flex-direction:column;align-items:flex-start;position:relative;} #pc-globe-hero .btn-icon{flex-shrink:0;} #pc-globe-hero .btn{display:inline-flex;align-items:center;gap:9px;font-family:inherit;font-size:16px;font-weight:600;line-height:1.2em; padding:18px 40px;border-radius:8px;border:1px solid var(--apA);cursor:pointer;text-decoration:none; transition:background-color .2s ease,color .2s ease;} #pc-globe-hero .btn-primary{background-color:var(--apA);color:#fff;box-shadow:0 4px 20px 0 rgba(18,71,123,.15);} #pc-globe-hero .btn-primary:hover,#pc-globe-hero .btn-primary:focus{background-color:#fff;color:var(--apA);} #pc-globe-hero .btn-outline{background-color:#fff;color:var(--apA);box-shadow:0 4px 20px 0 rgba(18,71,123,.15);} #pc-globe-hero .btn-outline:hover,#pc-globe-hero .btn-outline:focus{background-color:var(--apA);color:#fff;} #pc-globe-hero .btn:focus-visible{outline:3px solid var(--apA);outline-offset:3px;} /* Badge, not an inline pill below the button - sits at the button's top-right corner, overlapping outward/upward, per the reference. position:relative on .cta-primary above is what this anchors against. */ #pc-globe-hero .pill{position:absolute;top:0;right:0;transform:translate(15%,-55%);z-index:1; display:inline-block;font-size:12px;font-weight:700;color:#fff;white-space:nowrap; border-radius:50px;padding:5px 14px;background:#2fae5c;box-shadow:0 4px 10px rgba(0,0,0,.18); right: 30px; } /* store badges: unstyled, always one row. min-width:0 is what lets a flex item shrink below its image's intrinsic width - without it nowrap would overflow the panel instead of scaling down. */ #pc-globe-hero .badges{display:flex;gap:12px;margin-top:16px;align-items:center;flex-wrap:nowrap;} #pc-globe-hero .badge{display:inline-flex;line-height:0;min-width:0;flex:0 1 auto;} #pc-globe-hero .badge img{display:block;max-width:100%;height:auto;} /* sits to the right of the intro panel. Keyed off --panel-w rather than a fixed fraction of the grid, so it cannot drift back over the CTA buttons when the panel resizes. */ /* rating-bg.png carries its own glow/border baked in, so background-size stretches it to fill exactly (100% 100%, not cover) rather than crop those edges on aspect-ratio mismatch */ #pc-globe-hero .rating-card{position:absolute;z-index:5;left:calc(var(--edge) + var(--panel-w) + 32px);bottom:9%; display:flex;align-items:center;gap:14px; background:url('assets/rating-bg.png') center/100% 100% no-repeat; border-radius:16px;padding:40px; will-change:opacity;} #pc-globe-hero .rating-card .rc-icon{flex:0 0 auto;width:38px;height:38px;} #pc-globe-hero .rating-card .rc-icon img{width:100%;height:100%;display:block;} #pc-globe-hero .rating-card .rc-top{display:flex;align-items:baseline;gap:8px;} #pc-globe-hero .rating-card .stars{display:inline-flex;gap:2px;} #pc-globe-hero .rating-card .stars svg{width:13px;height:13px;fill:#f5b301;} #pc-globe-hero .rating-card .score{font-family:var(--pc-heading);font-size:24px;font-weight:800;color:#fff;line-height:1;} #pc-globe-hero .rating-card .label{font-size:13px;font-weight:600;color:#a9c1e8;} #pc-globe-hero .rating-card .reviews{font-size:13px;font-weight:500;color:#c9d6ec;margin-top:3px;} /* airport markers (injected by globe.gl into #pc-globe) */ #pc-globe-hero .gmark{pointer-events:none;will-change:transform;} #pc-globe-hero .marker{position:absolute;left:0;top:0;width:58px;height:58px;transform:translate(-50%,-50%) scale(1);transition:transform .3s ease,filter .3s ease;pointer-events:none;} #pc-globe-hero .marker .tem{position:absolute;inset:0;width:100%;height:100%;overflow:visible;} /* inner A-disc smaller than the TEM ring so the runway triangles fit in the gap */ #pc-globe-hero .marker .grade{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:26px;height:26px;} #pc-globe-hero .marker.active{transform:translate(-50%,-50%) scale(1.5);filter:drop-shadow(0 4px 10px rgba(0,0,0,.45));z-index:5;} #pc-globe-hero .overlay{position:absolute;z-index:4;top:50%;left:var(--ov-cx);transform:translate(-50%,-50%);will-change:opacity,transform;pointer-events:none;} /* airport card: never closer than 24px to the text card (measured -4px overlap at 830px wide) */ #pc-globe-hero .overlay[data-ov="2"]{left:max(var(--ov-cx),calc(var(--edge) + var(--pc-featw) + 24px + var(--pc-apw)/2));} #pc-globe-hero .overlay .ap-card{width:var(--pc-apw);} #pc-globe-hero .shot{margin:0;} #pc-globe-hero .shot img{display:block;max-width:100%;max-height:86vh;height:auto;border-radius:12px;box-shadow:0 22px 60px rgba(11,42,74,.4);} /* Position = preferred spot, clamped from BOTH sides: never left of "text card + 24px", never right of "viewport - 24px". Width capped via --pc-chartw so both constraints are satisfiable at every viewport width (at 821-900px the old fixed fractions overlapped the text card AND clipped offscreen at once - measured, not theoretical). */ #pc-globe-hero .ov-chart{top:44%;width:var(--pc-chartw); left:min(max(calc(var(--cl) + var(--cw)*0.76),calc(var(--edge) + var(--pc-featw) + 24px + var(--pc-chartw)/2)),calc(100vw - 24px - var(--pc-chartw)/2));} /* know-how fan: children sized FROM --pc-fanw (s1 59%, snips half-minus-gap) instead of their own independent clamps - the wrapper's real width is exactly --pc-fanw, so the same two-sided clamp genuinely bounds it (the old per-child clamps made the wrapper wider than any single variable knew, which is how it overlapped panel 4 by 39px at 830px). */ #pc-globe-hero .ov-fan{display:flex;flex-direction:column;align-items:center;gap:16px; left:min(max(calc(var(--cl) + var(--cw)*0.72),calc(var(--edge) + var(--pc-featw) + 24px + var(--pc-fanw)/2)),calc(100vw - 24px - var(--pc-fanw)/2));} #pc-globe-hero .ov-fan .snip{position:relative;} #pc-globe-hero .ov-fan .s1{width:calc(var(--pc-fanw)*0.59);transform:rotate(-1.5deg);} #pc-globe-hero .ov-fan .fan-row{display:flex;gap:16px;align-items:flex-start;} #pc-globe-hero .ov-fan .fan-row .snip{width:calc(var(--pc-fanw)/2 - 8px);} #pc-globe-hero .ov-fan .s2{transform:rotate(-3deg);} #pc-globe-hero .ov-fan .s3{transform:rotate(3deg);} /* max-height still caps the card so it can't grow taller than the frame, but it's non- interactive again (pointer-events:none, inherited from .overlay) - making it scrollable made it capture scroll/drag gestures that land on it, which sits centered over the globe, silently eating normal page-scroll input right where users are most likely to scroll. A clipped card beats a story that stops responding to scroll. */ #pc-globe-hero .ap-card{position:relative;background:#0f2740;border-radius:14px;color:#e9eff6;box-shadow:0 20px 55px rgba(6,20,38,.5);border:1px solid rgba(255,255,255,.08);overflow:hidden;font-size:12px; max-height:min(80vh,640px);display:flex;flex-direction:column;} #pc-globe-hero .apc-head{padding:12px 14px;background:#0b1f34;flex:0 0 auto;} #pc-globe-hero .apc-title{font-weight:800;font-size:13px;line-height:1.35;color:#fff;} #pc-globe-hero .apc-body{padding:12px 14px;overflow:hidden;} #pc-globe-hero .apc-sec{font-size:11px;font-weight:700;letter-spacing:.06em;color:#8fa8c2;margin:12px 0 7px;text-transform:uppercase;} #pc-globe-hero .apc-sec:first-child{margin-top:0;} #pc-globe-hero .apc-sec-sub{text-transform:none;font-weight:500;letter-spacing:normal;color:#6f88a3;} #pc-globe-hero .apc-strip{display:flex;gap:3px;} #pc-globe-hero .apc-cell{flex:1;text-align:center;} #pc-globe-hero .apc-bar{height:26px;border-radius:3px;} #pc-globe-hero .apc-hr{font-size:9px;color:#8fa8c2;margin-top:3px;} #pc-globe-hero .apc-leg{display:flex;gap:12px;font-size:10px;color:#9db4cc;margin:2px 0 8px;} #pc-globe-hero .apc-leg i{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:4px;vertical-align:middle;} /* header row: "Runways" label + the NOTAMs pill, side by side */ #pc-globe-hero .apc-rwys-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:7px;} #pc-globe-hero .apc-rwys-head .apc-sec{margin:12px 0 0;} #pc-globe-hero .apc-notam-btn{background:#3fcfae;color:#0b1f34;border:none;border-radius:20px;padding:6px 14px; font-size:11px;font-weight:700;cursor:default;white-space:nowrap;} /* flex-wrap, not a fixed grid - pill widths vary a lot (CLOSED vs Cat N), so which ones share a row depends on their actual text length, same as the reference. | separators sit inline and wrap along with whichever pill precedes them. */ #pc-globe-hero .apc-rwys{display:flex;flex-wrap:wrap;align-items:center;gap:8px;} #pc-globe-hero .apc-rwys div{background:rgba(255,255,255,.03);border:1px solid rgba(160,190,230,.35);border-radius:20px;padding:6px 12px;font-size:11px;color:#cdd9e6;} /* closed runway - filled instead of outlined, dark text on teal so CLOSED reads as a status, not just a label */ #pc-globe-hero .apc-rwys div.closed{background:#3fcfae;border-color:#3fcfae;color:#0b1f34;font-weight:700;} #pc-globe-hero .rwy-sep{color:rgba(160,190,230,.5);font-size:12px;margin:0 -2px;} #pc-globe-hero .apc-mono{margin:0;background:#0b1f34;border-radius:8px;padding:9px 10px;font:11px/1.4 ui-monospace,Menlo,Consolas,monospace;color:#cdd9e6;white-space:pre-wrap;} #pc-globe-hero .apc-mono .thr{color:var(--orange);} #pc-globe-hero .rail{position:absolute;right:26px;top:50%;transform:translateY(-50%);z-index:6;display:flex;flex-direction:column;gap:12px;} #pc-globe-hero .rail .d{width:9px;height:9px;border-radius:50%;background:rgba(11,42,74,.3);transition:all .3s;} #pc-globe-hero .rail .d.on{background:var(--navy);transform:scale(1.4);} #pc-globe-hero .hint{position:absolute;left:calc(var(--cl) + var(--cw)*0.42);bottom:22px;transform:translateX(-50%);z-index:6;color:var(--navy);font-size:12px;font-weight:600;letter-spacing:.08em;opacity:.7;animation:pc-bob 1.6s ease-in-out infinite;transition:opacity .35s ease;} @keyframes pc-bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,6px)}} /* Short viewports (laptops at 1366x768, or any browser with toolbars): the intro panel is the tallest thing in the hero and was clipping at the frame bottom. Tighten the vertical rhythm rather than let the app-store badges get cut off. */ @media(max-height:820px){ #pc-globe-hero .panel h1{font-size:clamp(28px,3vw,42px);margin-bottom:14px;} #pc-globe-hero .eyebrow{margin-bottom:12px;font-size:13px;padding:5px 14px;} #pc-globe-hero .panel p{font-size:15px;max-width:52ch;} #pc-globe-hero .cta{margin-top:18px;gap:12px;} #pc-globe-hero .btn{padding:14px 28px;} #pc-globe-hero .badges{margin-top:12px;gap:10px;} } /* mobile header is shorter; JS re-measures and overrides if the live value differs */ @media(max-width:1024px){ #pc-globe-hero{--pc-header:56px;} } /* tablet / small laptop: pull the globe in a touch */ @media(max-width:1180px){ #pc-globe-hero{--globe-cx:calc(var(--cl) + var(--cw)*0.64);} #pc-globe{height:120vh;} /* height only - width is computed from --globe-cx above */ } /* Mobile: same pinned scroll story as desktop, stacked instead of side-by-side. Content on top, globe underneath it. Uses svh so a collapsing browser toolbar does not resize the pin mid-scroll (vh stays as the fallback for older engines). --pc-vvh (set by hero.js from window.visualViewport, debounced - see syncViewportHeight) takes over once JS has run: svh is a static snapshot and can go stale relative to the toolbar's actual current state, which is what let the bottom-anchored cloud graphic end up sitting above a visible gap instead of flush with the real bottom of the screen. Kept last so it wins over the svh line above without needing @supports, and falls back to svh by itself (via the var()'s second argument) in browsers without visualViewport or before JS runs. */ @media(max-width:820px){ /* --panel-shift, not `transform:none`: hero.js writes the transform inline every frame and would otherwise drag the top-anchored panel up by half its own height. */ #pc-globe-hero{--gutter:16px;height:100vh;height:100svh;height:var(--pc-vvh,100svh);--panel-shift:0px;} /* Reclaims the header's reserved space while it's hidden (most of the scroll story) instead of leaving it as permanent dead space above the panel - deliberate trade of the layout jump this was originally written to avoid, since mobile has much less room to spare than desktop's 90px version of this same jump. hero.js toggles the class on direction/progress. */ #pc-globe-hero.pc-header-collapsed .pc-frame{inset:0 0 0 0;} /* Globe in the lower part of the frame. Square, sized by whichever axis is tighter, so it can never end up wider than the screen can show - an oversized canvas relying on overflow clipping is what left dead space beside the sphere. */ /* Here the canvas box cannot be pushed off-screen - it is what sizes the sphere, and the layout needs the globe confined to the lower half. So soften the edge instead: once the camera zooms in the surface fades out circularly rather than ending in a hard rectangle. */ #pc-globe{--gsize:min(150vw,110svh);left:50%;top:64%;width:var(--gsize);height:var(--gsize); transform:translate(-50%,-50%); -webkit-mask-image:radial-gradient(circle closest-side,#000 74%,transparent 100%); mask-image:radial-gradient(circle closest-side,#000 74%,transparent 100%);} #pc-globe-hero::before{display:none;} /* left scrim is a two-column device */ /* copy pinned to the top of the frame (globe sits below it), centred horizontally to match the site's own hero, which is centre-aligned. No card background on mobile - per the Figma reference, the intro panel's text floats directly over the globe/gradient, same as desktop. Panels 1-4 still get their own white card via the [data-panel] override below - unaffected, since that rule sets its own background at higher specificity regardless of this one. */ #pc-globe-hero .panel{left:var(--gutter);right:var(--gutter);max-width:none;top:var(--gutter);bottom:auto; text-align:center;} /* flex rows do not follow text-align - centre them explicitly. Everything else in the panel (.eyebrow, .tag, .pill) is inline-block/inline-flex and centres from text-align above. */ #pc-globe-hero .cta,#pc-globe-hero .badges{justify-content:center;} /* must restate every property the desktop [data-panel] rule sets, or it wins here on specificity (1,2,0 vs 1,1,0) - a media query adds none */ /* tightened from padding:20px/h1 up to 30px/10px margins - this is the space being reclaimed for the airport card below, which was clipping its own TAF section with the old sizing. Fixed height (not content-driven) + flex-centred text - all 4 steps share the exact same top AND footprint now, instead of the box's bottom edge shifting with each step's text length. Value is a guess at what fits the longest of the 4 paragraphs - verify visually and adjust if any step's text is tight or the box looks oversized for the shortest one. Bumped up from 150-210 to fit the h1 at 36px now - that made the content taller than the old box, pressing the tag right up against the top with no breathing room. */ #pc-globe-hero .panel[data-panel="1"],#pc-globe-hero .panel[data-panel="2"], #pc-globe-hero .panel[data-panel="3"],#pc-globe-hero .panel[data-panel="4"]{ background:#fff;padding:14px;max-width:none; height:clamp(190px,34svh,240px);display:flex;flex-direction:column;justify-content:center; border-radius:18px;box-shadow:0 12px 34px rgba(11,42,74,.16); } #pc-globe-hero .panel[data-panel="0"] h1{font-size:36px;margin-bottom:6px;} /* panels 1-4 had no mobile override at all, so they fell back to the desktop clamp's 30px floor - too big for these smaller feature cards. */ #pc-globe-hero .panel[data-panel="1"] h1,#pc-globe-hero .panel[data-panel="2"] h1, #pc-globe-hero .panel[data-panel="3"] h1,#pc-globe-hero .panel[data-panel="4"] h1{font-size:24px;margin-bottom:6px;} #pc-globe-hero .eyebrow{font-size:14px;padding:5px 12px;margin-bottom:6px;} #pc-globe-hero .panel p{font-size:16px;max-width:none;} #pc-globe-hero .cta{gap:8px;margin-top:10px;flex-wrap:nowrap;} /* padding matches the production reference exactly: 8px top/bottom, 16px left/right */ #pc-globe-hero .btn{gap: 9px; display: inline-flex; align-items: center;justify-content:center;padding:8px 16px;font-size:14px;} /* flex:1 matches .btn's flex:1 above - without it, .cta-primary (wrapping the primary button + pill) had no grow factor of its own, so it stayed at its natural width while the outline button grew to fill the row, throwing off the 50/50 split and wrapping to two lines. align-items:stretch (overriding the desktop rule's flex-start) makes the button inside fill this column's full width, matching the outline button - flex-start left it sized to its own text instead. Only scoped to mobile: on desktop, without the flex:1-forced equal columns, stretch would instead widen the button to match the pill's (wider) natural text width. */ #pc-globe-hero .cta-primary{min-width:0;align-items:stretch;} /* now a badge floating at the button's corner (see base .pill rule) rather than in-flow content, so it's no longer width-constrained by this column - just a smaller size for the smaller screen. */ #pc-globe-hero .pill{font-size:10.5px;padding:4px 11px;} #pc-globe-hero .badges{gap:8px;margin-top:8px;} /* overlays sit over the globe, i.e. in the lower half. Shifted up 8pts together with #pc-globe above (68%->60%) to close the dead gap between the text card and the globe - kept in sync with the globe's own shift so overlay content stays aligned to it across steps 2-4. */ #pc-globe-hero .overlay{left:50%;top:62%;} /* ov=2 (the airport card) specifically gets more room than the shared top:62% above - ov-chart/ov-fan (steps 3/4) stay at 62%, untouched, since they weren't clipping. Combined with the shrunk text panel above, this is genuinely more vertical budget, not just a smaller max-height fighting the same constraint. Pushed from 52% to 57% - the text panel above grew ~40px taller for the 36px h1 fix, which was eating directly into this gap and causing an overlap. max-height trimmed to match (57% start = less room left before the viewport's bottom edge than 52% had). */ /* left:50% must be restated HERE: the desktop [data-ov="2"] left-clamp above is (0,2,0) specificity and would beat this block's plain .overlay{left:50%} on phones. */ #pc-globe-hero .overlay[data-ov="2"]{top:57%;left:50%;} #pc-globe-hero .overlay .ap-card{width:min(86vw,330px);max-height:min(59svh,520px);font-size:11px;} #pc-globe-hero .apc-body{padding:9px 12px;} #pc-globe-hero .apc-sec{margin:8px 0 5px;} #pc-globe-hero .apc-mono{padding:7px 8px;font-size:10px;line-height:1.3;} #pc-globe-hero .apc-rwys div{padding:4px 10px;} #pc-globe-hero .shot img{max-height:42svh;} #pc-globe-hero .ov-chart{left:50%;width:94vw;} #pc-globe-hero .ov-fan{left:50%;gap:8px;} #pc-globe-hero .ov-fan .s1{width:60vw;} #pc-globe-hero .ov-fan .fan-row{gap:8px;} #pc-globe-hero .ov-fan .fan-row .snip{width:40vw;} #pc-globe-hero .rating-card,#pc-globe-hero .hint{display:none;} /* keep the step rail on mobile - it is the only progress cue once the hint is gone */ #pc-globe-hero .rail{right:10px;gap:9px;} #pc-globe-hero .rail .d{width:7px;height:7px;} } /* very short phones: the intro panel is the tallest step, give the globe less room */ @media(max-width:820px) and (max-height:700px){ #pc-globe{--gsize:min(130vw,100svh);top:66%;} #pc-globe-hero .overlay{top:66%;} /* must repeat the [data-ov="2"] selector: the 820px block's top:57% rule is (0,2,0) and out-specifies this block's plain .overlay{top:66%} - so the TALLEST overlay (the airport card) was the only one NOT moved down on short screens (measured: 70px overlap with the text card at 640px height). */ #pc-globe-hero .overlay[data-ov="2"]{top:66%;} /* even at 66% the full card overlaps the text card by ~18px at 640px height - drop the two monospace blocks (METAR/TAF raw text) and their headers instead of scaling the whole card into illegibility. Threat strip, runways and legend stay. */ #pc-globe-hero .apc-mono{display:none;} #pc-globe-hero .apc-body .apc-sec:nth-of-type(3), #pc-globe-hero .apc-body .apc-sec:nth-of-type(4){display:none;} /* fan: 29px overlap at 640px height - shrink the images, not the layout */ #pc-globe-hero .ov-fan{gap:6px;} #pc-globe-hero .ov-fan .s1{width:48vw;} #pc-globe-hero .ov-fan .fan-row .snip{width:33vw;} #pc-globe-hero .panel p{font-size:14px; padding-bottom: 14px;} } /* kit button override at the site's own mobile breakpoint. font-size matches the max-width:820px rule above - this one comes later in the file, so at equal specificity it was winning and silently overriding that 14px back to 16px on anything narrower than 767px (i.e. most phones). */ @media(max-width:767px){ #pc-globe-hero .btn{font-size:14px;line-height:26px;padding:8px 16px;} } @media(prefers-reduced-motion:reduce){ #pc-globe-hero .hint{animation:none;} }