/* ========================================================================== Home hero — lattice field chrome. Replaces the photographic backplate and the WebGL carousel. Layering inside .home-hero--dark, back to front: - .home-hero--dark background gradient ground, no photograph 0 .home-hero__field the svg stage 0 .home-hero__field-cap the industry word under it 1 .home-hero__copy-shade left vignette, lighter than before 2 .home-hero__content headline, lede, CTAs Nothing here is interactive, so there is no drag shield and no grab cursor. ========================================================================== */ .home-hero--dark { background: radial-gradient(1150px 640px at 72% 42%, rgba(48, 116, 142, 0.19), transparent 62%), radial-gradient(820px 540px at 26% 80%, rgba(72, 84, 152, 0.13), transparent 66%), linear-gradient(168deg, #0b1420 0%, #0a121c 52%, #080f18 100%); } .home-hero__field-wrap { position: absolute; inset: 0; z-index: 0; pointer-events: none; /* Column, so the caption sits under the stage — which makes the MAIN axis vertical: justify-content centres the pair in the hero, align-items pushes it to the right of the copy. Swap these two and the field drops to the bottom of the section and gets clipped. */ display: flex; flex-direction: column; align-items: flex-end; justify-content: center; } /* The stage sits in the right-hand air beside the copy. It is sized by width and keeps its own 8:5 ratio, so the silhouettes never distort. */ .home-hero__field { display: block; width: min(62%, 1000px); height: auto; margin-right: clamp(8px, 3vw, 64px); overflow: visible; } /* The industry the lit silhouette is currently showing — one word, because the picture already says which machine it is. */ .home-hero__field-cap { margin: 10px clamp(8px, 3vw, 64px) 0 0; font-family: var(--mono, "IBM Plex Mono", ui-monospace, monospace); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: #5f6c7d; transition: opacity 0.4s; width: min(62%, 1000px); text-align: center; } @media (max-width: 1150px) { .home-hero__field-cap { display: none; } } /* ── DESKTOP: THE COPY AND THE SILHOUETTE DO NOT SHARE A COLUMN ─────────── The stage was 62% wide and the copy was capped at 52rem, and the two were independent layers — so the lede ran straight over the lit machine. Measured against the aircraft, whose fuselage starts at x=32 of the 480 viewBox and sits on the vertical centre line exactly where the lede is, the text crossed it by 286px at 1100, 222px at 1280 and 160px at 1440. The car and the robot arm start at x=30 and x=24 and were crossed by about the same amount; the aircraft only reads worse because its body is one long horizontal mass at text height rather than a shape with gaps in it. Corrected from both sides rather than one: the stage gives up ten points of width and most of its right margin, which walks the silhouette's leading edge right, and the copy takes a viewport-relative cap so it stops before that edge at every width instead of at one. Fixing it from the copy alone would have left a 346px column at 1100, which is not a hero. The split itself now starts at 1151px rather than 901px. Between those two the hero was trying to hold a headline, a five-line lede, two buttons AND a machine side by side in about 340px of column: correcting the overlap there bought a nine-line lede, which is a different way of being broken. Below 1151 the field goes behind the copy at 40% opacity — the treatment that already existed at phone width — so there is nothing to clear. */ @media (min-width: 1151px) { /* ── TWO FAULTS, BOTH INVISIBLE ON A LAPTOP AND BOTH LOUD ON A MONITOR ── ONE, THE STAGE WAS MEASURED AGAINST THE SCREEN. The wrap is inset:0 on a full-bleed section, so it aligned the stage to the VIEWPORT's right edge while the copy sat in the 1460px container. At 2560 the copy ended at x=1274 and the stage began at x=1636: a 362px hole with the machine in the far corner. Worse, it was capped at 900px, so it stopped growing at a 1730px screen and read small on anything larger. The fix is NOT to widen the container. That was tried and it breaks something else: the header pill is 1460 too, so a 2200px hero puts the headline 336px to the LEFT of the logo above it. The copy has to stay on the site column — it is what the nav, and every band below, line up with. So the copy keeps the column and the stage takes the whole band to the right of it, centred in that band rather than pinned to either end. The band grows with the display, so the machine grows with it: 628px at 1151, 855 at 1680, and the 1200 ceiling from about 2400 up, past which it stops gaining presence and starts reading as background texture. On an ultrawide the ceiling leaves slack on both sides and the stage sits centred in it, which is the point — it is never in the corner again. TWO, VERTICAL. The header is position:sticky, so it sits IN FLOW above the hero and the hero already starts below it — but the hero's top padding added var(--nav-h) on top of that, counting the header twice. The copy was pushed down from the hero's top edge while the stage, absolutely positioned and centred, sat on the hero's middle. On a 1175px-tall hero that put the copy's centre at y=346 and the machine's at y=690: two disconnected islands with a dead band between them. Centring the content puts both on one line. Column direction is deliberate — it makes the main axis vertical, so justify-content is what centres. */ .home-hero--dark { display: flex; flex-direction: column; justify-content: center; } .home-hero__inner { /* width:100% is load-bearing. The inner carries margin:0 auto, and an auto cross-axis margin inside a flex container BEATS align-items:stretch — so the moment the hero became a column flex box the inner shrink-wrapped to its content and centred itself, sliding the copy right, under the stage: measured 494px of overlap at 2560. */ width: 100%; /* the header is in flow above; do not reserve its height a second time */ padding-top: clamp(28px, 5vh, 56px); } /* The band: everything right of the copy. padding-left reproduces the column's left edge, its gutter and the copy's width, then adds a 40px gap; padding-right is the column's own gutter. align-items centres the stage inside what is left. */ .home-hero__field-wrap { align-items: center; padding-left: calc( 50% - min(1460px, 100%) / 2 + clamp(20px, 4vw, 52px) + min(38rem, 34vw) + 40px); padding-right: clamp(20px, 4vw, 52px); } /* THE STAGE TAKES THE WHOLE BAND. No width ceiling: the machine is the page's one picture and it should be as large as the screen allows. max-height is the only limit, and it is a limit in the other axis, not this one. The svg is 8:5, so on an ultrawide the band alone would make it taller than the screen — 1698px wide is 1061px tall, against a 1080px viewport. 72vh keeps it inside the fold; below that ceiling, which is every ordinary display, it changes nothing. */ .home-hero__field, .home-hero__field-cap { width: 100%; margin-right: 0; } .home-hero__field { max-height: 72vh; } /* THE COPY IS CAPPED IN ABSOLUTE TERMS so every extra pixel of screen goes to the machine rather than to the lede. 34vw holds the small end, where the text still needs its share; 38rem takes over from about 1790px up, and from there the band — and the machine — absorb the whole of the display's growth: 855px at 1680, 1258 at 2560, 1698 at 3440. */ .home-hero .hero-copy--home { max-width: min(38rem, 34vw); } .hero-copy--home .hero-copy__lede--home { max-width: 100%; } } /* Lighter than the carousel's vignette: there is no photograph to suppress, only the field's own left edge, and over-darkening flattened the gradient. */ .home-hero__copy-shade { background: linear-gradient( 102deg, rgba(11, 20, 32, 0.92) 0%, rgba(11, 20, 32, 0.70) 30%, rgba(11, 20, 32, 0.24) 50%, transparent 66% ); } @media (max-width: 1150px) { /* Behind the copy rather than beside it, and dimmed — the field is atmosphere at this width, not a figure to read. */ .home-hero__field-wrap { align-items: center; opacity: 0.4; } .home-hero__field { width: 130%; margin-right: 0; } .home-hero__copy-shade { background: linear-gradient(180deg, rgba(11, 20, 32, 0.72) 0%, rgba(11, 20, 32, 0.88) 100%); } } /* -------------------------------------------------------------------------- Scroll cue. The hero is a full viewport tall, so on a laptop nothing below it is even partly visible — the page looks finished at the CTAs. This is the one mark that says it is not: a chevron pinned to the hero's bottom edge, above the shade and the content so it reads over either. It is a real link to #site-continue (the band under the hero), so a click or Enter jumps there rather than doing nothing. -------------------------------------------------------------------------- */ .home-hero__scroll-cue { position: absolute; z-index: 3; left: 50%; /* The sticky header sits in flow ABOVE the hero, so the hero's own bottom edge is that far below the first screen. Offset by the header's full height or the cue lands off the fold, which is exactly the problem it is here to solve. */ bottom: calc(var(--nav-bar-h, 56px) + 2 * var(--nav-shell-pad-y, 12px) + clamp(14px, 3vh, 32px)); transform: translateX(-50%); display: block; padding: 8px 12px; border-radius: 999px; color: #7d8a9b; text-decoration: none; transition: color 0.25s, opacity 0.25s; } .home-hero__scroll-cue:hover, .home-hero__scroll-cue:focus-visible { color: #cfd8e3; } .home-hero__scroll-cue-arrow { width: 26px; height: 26px; animation: home-hero-scroll-cue 2.2s ease-in-out infinite; } /* Small travel, long pause between: a nudge, not a bouncing ball. */ @keyframes home-hero-scroll-cue { 0%, 62%, 100% { transform: translateY(0); opacity: 0.75; } 78% { transform: translateY(6px); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .home-hero__scroll-cue-arrow { animation: none; } } /* ── PHONE: THE FIELD IS A FIGURE AGAIN ─────────────────────────────────── Above, everything below 1151px pushes the field behind the copy at 40% and blows it up to 130% — atmosphere, not a figure. On a phone that reads as an empty dark screen: the one picture on the page is there, dimmed past the point of being seen, under a shade laid on top of it. There is room for it. The copy block measures 541px of the hero's 844, so the lower third is bare. The wrap stays absolutely positioned — making it static would put it in flow against a padding stack tuned for the copy — and instead of centring on the hero it is pushed to the bottom edge, which lands it under the CTAs without either one moving. The shade goes with it: it existed to hold the field back behind the text, and nothing is behind the text any more. Capped at 34vh so a long headline on a small phone cannot drive the copy down into the picture. ------------------------------------------------------------------------ */ @media (max-width: 760px) { /* THE HERO STOPS AT THE FOLD. It is min-height:100vh and it starts below an in-flow header, so it has always run ~80px past the bottom of the screen — which is 80px of the one screen the page gets, spent below it. */ .home-hero--dark { min-height: calc(100vh - var(--nav-h)); min-height: calc(100dvh - var(--nav-h)); } /* THE HEADER'S HEIGHT WAS BEING COUNTED TWICE. This padding is calc(var(--nav-h) + …) because on some pages the hero runs UNDER a transparent header and has to clear it. Here the header is in flow above the hero, so the hero already starts below it — and the extra 80px was simply a hole at the top of the screen, which is what pushed the headline down to y=202 of an 844px viewport. */ .home-hero__inner { padding-top: clamp(10px, 2vh, 24px); /* The bottom padding RESERVES THE CUE'S ROOM. The cue is absolutely positioned against the hero's bottom edge while the buttons are the last thing in flow, so nothing otherwise keeps them apart — on a 700px screen the chevron landed on top of them. The cue is 50px tall and sits ~17px off the bottom edge, so this reserves both plus a gap — below that the two met again at 320x700, by four pixels. */ padding-bottom: clamp(76px, 10vh, 96px); } /* IN FLOW, BETWEEN THE WORDS AND THE BUTTONS (js/main.js moves it there). It stops being a backdrop and becomes a figure: full opacity, no shade over it, no absolute positioning. */ .home-hero__field-wrap { position: static; display: block; opacity: 1; padding: 0; margin: clamp(10px, 2vh, 20px) 0 clamp(12px, 2.2vh, 22px); } /* AS BIG AS THE MACHINE ALLOWS. The viewBox carries a margin of bare lattice around the silhouette, so the figure is set wider than its column and bled off both edges: what leaves the screen is background dots, and what grows is the machine. 130% IS THE CEILING, and it is the CAR that sets it — not the humanoid. The widths here are percentages of .hero-copy (350px), not of the viewport, so 130% is a 455px figure showing a 390px window: 86% of the viewBox. The car spans x=30..434 of 480, which is 84% of it, so it just fits. Wider and the screen starts eating its nose — at 142% the humanoid still looked fine, which is exactly why this needs stating: the widest silhouette in the cycle is the one that has to fit. */ .home-hero__field { width: 130%; max-width: none; margin-inline: -15%; /* A CEILING IN THE OTHER AXIS. The width above is a percentage of the copy column, and that column grows with the viewport — at 760px it is ~720px, which made the figure 936px wide and 585px TALL and pushed the whole hero off the screen. This caps it by the screen instead, so on a short or a wide phone the drawing scales down inside its own box rather than shouldering the buttons off the fold. Below the cap (which is every ordinary phone) it changes nothing. */ max-height: 40vh; } /* under the figure, centred on it */ .home-hero__field-cap { display: block; position: static; width: 100%; margin: 6px 0 0; font-size: 11px; letter-spacing: 0.22em; text-align: center; } /* nothing sits behind the text any more */ .home-hero__copy-shade { background: none; } /* SIDE BY SIDE, AT THEIR OWN WIDTH, CENTRED UNDER THE FIGURE. Stacked and stretched to the full column they read as two stacked banners rather than as a primary action and a secondary one; centred, the pair sits on the same axis as the machine above it. */ .home-hero .hero-copy__actions { flex-direction: row; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; } .home-hero .hero-copy__actions .btn { width: auto; min-height: 46px; } /* THE CUE STAYS — it is the one mark that says the page continues. But its offset does not: that value adds the header's full height because the hero normally runs that far past the first screen, and here the hero is min-height:100dvh MINUS the header, so it ends exactly at the fold. Left alone the cue would float ~90px up into the buttons. */ .home-hero__scroll-cue { display: block; bottom: clamp(12px, 2.4vh, 22px); } }