/* ==========================================================================
FRONTGRADE · HOMEPAGE
Layout and page-specific treatments only. Everything shared lives in
tokens.css and components.css; nothing here forks a kit component.
CONTRAST NOTATION
Ratios follow the same method as tokens.css: sRGB relative luminance, alpha
composited against the surface first, then measured. Any colour pair
introduced by this file that is not already ratio-commented in the kit
carries its computed ratio in the comment above the rule.
========================================================================== */
/* Page icon sprite host. Symbols only, nothing renders here. */
.fg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
/* ==========================================================================
1. HERO · ONE MISSION SCENE
ONE STAGE, AND IT IS THE 16/9 BOX ITSELF.
.fg-hero__stage is the only aspect-locked element on the page. The plate,
the four platform artboards, the connection arcs, the four buttons and their
callouts are all descendants of it, so a percentage of the stage is a
percentage of the bitmap for every one of them by construction. There is one
geometry table, no twin boxes to keep in step, and overlay tracking is
structural rather than arithmetic.
THE STAGE IS SIZED BY A CONSTANT, NEVER BY THE HERO AND NEVER BY THE COPY.
At 1440 and up the artwork holds ONE size on screen, --stage-static, and the
window moves across it:
stage width = max(--stage-static, hero width)
stage height = stage width / --plate-ar
The constant is 2560px, which is exactly 0.5 of the delivered frame's own
5120, so one frame pixel is half a CSS pixel and the stage is 2560 x 810 to
the pixel. Past 2560px of window the stage takes the window's width instead,
which is the no-gap-on-the-right guard doing its job rather than a second
sizing policy: the artwork is never narrower than the hero.
BELOW 1440 THE CONSTANT GIVES WAY TO A MULTIPLE OF THE HERO, because a
constant that does not fit is not a size, it is a crop. Section 6 of
cinema.css draws the stage at --stage-fit x the hero's own width there, so
the whole composition scales with the window and every object stays in it;
the anchor, the bottom edge and every percentage in the geometry table are
untouched by the switch, since all of them are expressed against the stage.
The stage is anchored to the hero's BOTTOM edge, which pins the horizon, the
sea, the ship (frame y 63.1 to 96.2 percent) and the ground terminal (61.0
to 95.9) to the bottom of the box at every size. Two things follow from a
constant scale, and both are intended:
to the right the frame's right edge always sits past the viewport's, by
a flat 399px below 2560 and by 17.1 percent of the window
above it, so the scenery added to the right of the
satellite crops off. Nothing in the composition is in it.
above the stage is shorter than the hero wherever the hero is
taller than stage width / --plate-ar, so a strip of hero
ground shows above the artwork. The strip is painted the
plate's own top edge and faded into the hero's ground over
the 160px above the join; see the sky strip rule.
TWO HERO BEHAVIOURS, AND THE BREAKPOINT BETWEEN THEM IS 1440. At 1440 and up
the hero is the full-bleed overlay described above. Below it the hero is a
scroll catch: one viewport of pin, the copy alone on a dark field, then one
continuous left-to-right pan across the frame that lands on the composition,
then release into the page. Section 1c builds it. Its stage is
bottom-anchored in the same way and reads the same descriptor; what differs
is which band of the frame fills the width, that the surplus above the
artwork is sky rather than hero ground, and that the stage moves.
THE FALLBACK IS THE THIRD LAYOUT AND IT IS THE PLAIN ONE. With no script, or
with reduced motion asked for, nothing pins: the stage comes back into flow
at the container's own width, sized so the original painting lands exactly on
the container's content box, under the copy. Every percentage in the geometry
table still measures the same bitmap in all three.
LAYER ORDER. The hero is a stacking context (isolation: isolate). The stage
is z-index auto, so it creates no context of its own and everything inside
it competes on the hero's single ladder. That is what lets the text scrim
sit BETWEEN the artwork and a revealed part:
.fg-hero (background) the surface and its one radial lift
.fg-hero::before 0 hex lattice
.fg-hero__stage::before 0 the sky strip over the top gap
.fg-hero__plate 1 the scene plate
.fg-scene-node__layer 2-5 the four platform artboards, stack order
.fg-scene__wire 6 the four connection arcs and their signals
.fg-hero__scrim 7 the text scrim, over all of the artwork
.fg-scene-node__part 8 a part, over the scrim, drawn or not
.fg-scene-node__leader 9 callouts, over the scrim, so the ratios
.fg-scene-node__tag 9 measured on their own backing still hold
.fg-hero__fade 10 bottom blend into the next band
.fg-hero__body 11 the copy
TWO ITEMS SHARE LEVEL 0 AND TREE ORDER SETTLES THEM. The lattice is the
hero's own ::before and the sky strip is a ::before on the stage, which is a
later child of the same stacking context, so the strip paints over the
lattice and both stay under the plate at 1. That is what keeps the lattice
out of the strip, where 4 percent of #7d89a3 over a near-black sky would put
a 6-level step along the join the strip exists to remove.
NOTHING IN THE HERO CHANGES z-index IN RESPONSE TO A POINTER. A platform
sits under the scrim at rest and stays under it while it is revealed, so its
opacity fade starts from exactly the appearance it already had and there is
no brightness step at hover onset. The part sits at 8 whether it is drawn or
not, which is what puts a revealed part over the scrim at full strength
without moving anything else.
ONE GRADIENT OVER THE ARTWORK, AND IT IS VIEWPORT-ANCHORED. .fg-hero__scrim
is solid ink from the viewport's left edge, full height, continuously
through the copy column, and then one long eased release into the scene. It
is the only thing dimming the artwork, and there is deliberately no second,
scene-anchored wash inside the stage: two gradients on different anchors put
a second edge in the release band, one that moves with the crop while the
other does not. The wall's own plateau already covers everything such a wash
would deepen. The derivation, the stop table and
the measured ratios are on the rule.
POINTER-EVENTS DISCIPLINE, and it is load bearing. The stage spans the hero
and the copy paints on top of it, so left alone one would swallow the
other's clicks. Both .fg-hero__stage and .fg-hero__body are pointer-events:
none, and exactly two things switch them back on: the copy's two buttons and
the four .fg-scene-node__hit boxes. The node buttons themselves do not,
because each one spans the whole stage; the hit box inside it is the target
and a click on it activates the button by bubbling. In the scroll catch the
copy's two buttons stand down once the copy has faded, so a control nobody
can see cannot take a tap meant for the scene behind it.
========================================================================== */
/* THE HERO'S OWN BOX. In the fallback it is an ordinary block: the copy sets
the height, the stage follows in flow, and the padding clears the header. At
1440 and up it declares a height and the copy has no say in it; see the
overlay block. In the scroll catch it is exactly one viewport tall and
sticky; see section 1c.
--hero-header TRACKS THE HEADER'S OWN BREAKPOINT rather than the hero's, and
that is why the two numbers differ. components.css switches to the compact
header at max-width: 1024px, so the offset switches at exactly min-width:
1025px and the two can never disagree about how much room the fixed header
needs. The hero's own overlay switch is at 1440 and has nothing to do with
it; between 1025 and 1439 the layout is stacked under the full-height
header, which is the combination that band is checked at. */
.fg-hero {
--hero-header: var(--header-offset-mobile);
/* THE FRAME DESCRIPTOR. The delivered artwork is a 5120 x 1620 frame: the
original 2880 x 1620 painting unchanged, with new scenery added on both
sides. The stage IS that frame, the plate and the four platform artboards
are all 5120 x 1620 and lie inset: 0 over it, and every percentage in the
geometry table is a percentage of it.
--plate-ar the frame's aspect, 5120 / 1620
--comp-x the original painting's left edge inside the frame, as a
fraction of the frame width
--comp-w the original painting's width, same fraction
--sat-rx the SATELLITE's right edge, same fraction, which is the
edge the stage is anchored by: 4242 / 5120, straight off
the satellite layer's own alpha bounding box in the node
table below. The anchor is an object rather than the
painting's border because an object is what a viewer reads
the placement against; the painting's own right edge is
scenery for most of its last 5 percent.
--ship-lx the SHIP's left edge, same fraction, 2099 / 5120, off the
same table. It is the left end of the composition, so with
--sat-rx it states the span the scroll catch crops to
--sat-ty the SATELLITE's top edge as a fraction of the frame HEIGHT,
345 / 1620. It is the highest point of the composition and
so the one the scroll catch's height cap is solved against
--frame-pad how far that edge stops short of the viewport's right
edge, the one number the placement exposes for tuning
--comp-x IS MEASURED, NOT ASSUMED. The original plate was located inside
the delivered frame by correlation: the old file was slid across the new
one and the sum of absolute channel differences taken over a 14,950-point
sample grid at every integer offset. The minimum is at x 1608, y 0, and it
is sharp: 0.66 mean absolute difference per channel there against 11.1 and
11.5 at plus and minus one pixel. Correlating the old plate's left and
right halves independently returns 1608 for both, which is what rules out
a rescale, and 98.07 percent of the sampled pixels match within 2 of 255
on every channel. 1608 / 5120 = 0.31406.
THE COMPOSITION SUB-BOX IS STILL 16/9, which the descriptor states rather
than assumes: --comp-w x --plate-ar = 0.5625 x 3.160494 = 1.777778. One
rule uses it, the stacked layout; the overlay anchors on --sat-rx and
everything else is written in frame percentages directly.
--stage-static IS THE ONE SIZE THE ARTWORK IS DRAWN AT on the overlay. It
is derived on the stage rule rather than guessed at here, and it lives in
the descriptor because it is a property of the delivered frame rather than
of the layout: 2560 is 0.5 x 5120 exactly, so it is the scale factor the
frame is drawn at written as a width.
--stage-fit IS THE SAME IDEA FOR A WINDOW THE CONSTANT WILL NOT FIT IN, and
it is a multiple rather than a width because that is what the thing it is
protecting is. Below 1440 the frame is drawn at this multiple of the hero's
own width, so the artwork scales with the window instead of holding a size
the window has no room for. Where the two figures come from is on the stage
rules that use them: 0.5 on the overlay block below, 1.2 in section 6 of
cinema.css, which is the only place the second one is read. */
--plate-ar: 3.160494; /* 5120 / 1620 */
--comp-x: 0.31406; /* 1608 / 5120, measured */
--comp-w: 0.5625; /* 2880 / 5120 */
--sat-rx: 0.828516; /* 4242 / 5120, the satellite's right edge */
--ship-lx: 0.409961; /* 2099 / 5120, the ship's left edge */
--sat-ty: 0.212963; /* 345 / 1620, the satellite's top edge */
--stage-static: 2560px; /* 0.5 x 5120; see the stage rule */
--stage-fit: 1.2; /* below 1440; see section 6 of cinema.css */
--frame-pad: 40px;
/* THE HEADLINE SIZE, declared here because two rules need the same number:
the headline itself and the copy budget below. See the note on
.fg-hero__title for the derivation of the two legs.
THE CEILING IS ITS OWN PROPERTY, AND IT IS THE ONE KNOB THE OVERLAY TURNS.
The copy sits ON the picture from 1440 up, so there the headline's size is
also the width of the wall that hides the scene, and the size the scene
needs is smaller than the display token's own 100px ceiling. Writing that
smaller ceiling into the overlay block alone made the scale run BACKWARDS:
93.3px at 1280, where the token still governed, against 68px at 1920, so
the widest window on the site carried its smallest display headline and the
homepage sat under every interior page's 104px.
SO THE CEILING IS DECLARED ONCE, HERE, AND APPLIES AT EVERY WIDTH. The ramp
below it is untouched, which is the whole of the range under about 687px of
viewport, where the steeper hero-local leg is already the smaller of the
two; from there up the headline is flat at the ceiling. The curve is
therefore monotonically non-decreasing in viewport width by construction:
it rises to the ceiling and stays there, and there is no width at which
growing the window shrinks the type.
WHERE THE CEILING SITS IS A DESIGN DECISION AND THIS IS WHERE IT IS MADE.
4.25rem is the figure the scene is solved against; the column that follows
it is 6.6 times it, stated on --copy-w in the overlay block because a
calc() in a custom property is not resolved to a length and the script that
reads the column would take the token stream instead. Moving the ceiling is
therefore those two declarations and nothing else.
THE EXPRESSION NO LONGER READS A SITEWIDE TYPE TOKEN, AND THAT IS THE
POINT OF THIS LINE RATHER THAN A RESIZE. It used to be min() of
--fs-display and the ramp below. That min() could never bind. --fs-display
is clamp(3.5rem, 2.479rem + 4.19vw, 6.25rem): its floor is 56px and its
slope is shallower than this ramp's, while this ramp is floored at 40px
and ceilinged at --hero-fs-max, so the local leg is the smaller of the two
at every viewport width there is. The two curves would have crossed at
697px of viewport, and the ceiling takes this leg flat at 687px, so the
crossing is never reached and the token leg was inert arithmetic.
Inert, but not harmless: it tied this headline, and through the em measure
that sets --copy-w and the scrim that is written off --copy-w, the whole
scene's clearance over the vessel, to a token whose job is page headlines
on the other families. A sitewide type decision taken for the mission and
capability pages could therefore reach into this composition, which is a
coupling the hero should not have and did not need. Dropping the term
changes no computed value at any width and leaves the homepage headline
resolved from the two literals on the next lines and nothing else. */
--hero-fs-max: 4.25rem;
--hero-fs: clamp(2.5rem, 0.6rem + 8.5vw, var(--hero-fs-max));
/* THE COPY BUDGET. The copy column's height, DECLARED rather than measured:
four lines of the headline plus 242px for the eyebrow, the sub, the
actions and the gaps between them. The 242px is read off the utility type
scale rather than chosen: at the 16px body setting the non-headline stack
measures 200.6px at 1024 and 208.8px from about 1490 up, where the two
fluid gaps above the sub and the actions have both topped out, and the
constant is the larger of those plus 33px of slack. Measured against it,
the real column is 531px at a 82.57px headline (41px of slack) and 579px at
93.30px (36px), which is enough that a fallback face setting a line or two
looser still fits. The hero reserves this plus the header allowance, and
the check matrix asserts the real column fits.
THE BUDGET IS A FLOOR AND THE STACK UNDER IT HAS SINCE GOT SHORTER. The
242px was read at a three-line sub; the sub is one line now, so the same
constant carries the same four headline lines with two lines more slack
than it was solved for. A floor that is generous is the safe direction: it
can only reserve height the copy does not need, and size containment means
the failure it exists to stop is the opposite one.
--copy-w IS THE COPY COLUMN'S WIDTH, and 660 is the figure for every layout
in which the copy is NOT over the picture. The overlay block brings it down
to the width the scene needs; see the note there. */
--copy-w: 660px;
--copy-h: calc(4 * var(--hero-fs) + 242px);
--copy-budget: calc(var(--hero-header) + var(--copy-h));
/* THE HERO'S DECLARED HEIGHT, used at 1440 and up. THE STAGE NO LONGER READS
IT. Under the constant scale the artwork's size is --stage-static and the
hero's height decides only how much of the box the artwork does not fill,
so this expression sets the height of the dark field the copy sits in and
nothing about the composition. Its three legs are untouched and so are the
figures they produce; what changed is which of them can still bind.
clamp(560px, 88svh, 850px) the vertical design: a share of the window,
floored so a very short window still gets a
hero and capped so a very tall one does not
open the top strip further than the strip
treatment covers. At the cap the strip is
202px against a 160px fade, so 42px of the
hero's own ground shows above the fade,
which is the intended top of the band.
--copy-budget the floor the copy needs. Size containment
means an overflowing column would be
clipped rather than grow the box, so the
budget is taken as a floor. It binds only
on a short window, below about 820px of
viewport height at the 100px headline.
21.3vw + 130px the CROP BOUND, and on the 5120 frame it is
a small correction rather than a lever. The
stage is bottom-anchored, so its surplus
height is cropped off the top and the
satellite, whose measured centre sits at
frame y 32.75 percent, is the first control
to go. Keeping that centre at least 130px
below the hero's top edge, clear of the
92px header, needs hero height >= 0.6725 x
stage height + 130, and stage height is
viewport width / 3.160494 whenever the
stage is viewport-wide: 21.28vw + 130px.
UNDER THE CONSTANT SCALE IT ONLY BINDS PAST
2560, because that is the only place the
stage is viewport-wide and so the only
place this expression describes the stage
at all. Below 2560 the stage is a flat
810px tall, the same guarantee reads hero
height >= 675px, and the copy budget's
734px still clears it, now by 59px rather
than by 168. Above 2560 the term is
unchanged and still asks for 862px against
the 792px the clamp gives, a 9 percent lift
and only past about 3100px of viewport
width.
Between them the clamp governs at every width the check matrix reports up
to 3100, so the height is a function of viewport height alone there, which
is what the matrix asserts. */
--hero-h: max(clamp(560px, 88svh, 850px), var(--copy-budget), calc(21.3vw + 130px));
position: relative;
isolation: isolate;
overflow: hidden;
padding-top: calc(var(--hero-header) + clamp(24px, 1rem + 2.2vw, 56px));
padding-bottom: clamp(24px, 1rem + 2vw, 56px);
background:
radial-gradient(120% 96% at 72% 38%,
var(--surface-raised) 0%,
rgba(14, 18, 32, 0) 62%),
var(--surface-base);
}
@media (min-width: 1025px) {
.fg-hero { --hero-header: var(--header-offset); }
}
/* Hex lattice, the kit motif at its own 4 percent. Masked from the right: the
pattern is texture for the composition side, and behind display type it
would be noise. The radial lift above it tops out at exactly
--surface-raised, one step of the existing surface ramp rather than a new
colour, and reaches its transparent stop at 62 percent of the box, so under
the copy the ground has already resolved to plain --surface-base and every
contrast figure the kit measured there holds verbatim. Static, so it needs
no motion guard. */
.fg-hero::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34.64' height='60' viewBox='0 0 34.64 60'%3E%3Cpath d='M17.32 0 L0 10 L0 30 L17.32 40 L34.64 30 L34.64 10 Z M17.32 40 L17.32 60' fill='none' stroke='%237d89a3' stroke-width='1'/%3E%3C/svg%3E");
background-size: 34.64px 60px;
opacity: 0.04;
-webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 38%, #000 72%, #000 100%);
mask-image: linear-gradient(90deg, transparent 0%, transparent 38%, #000 72%, #000 100%);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
/* THE COPY BLOCK IS POINTER-TRANSPARENT AND ONLY ITS BUTTONS TAKE THE POINTER.
The body spans the hero at z12, above the whole scene, so an auto block here
would be an invisible lid over the middle of the composition and would
swallow the top half of the ship's hit region. Naming the controls instead
costs the headline and the sub their text selection, which is the cheaper of
the two: nothing in the hero's copy is interactive except the two buttons,
and every platform keeps its whole measured silhouette as a target. */
.fg-hero__body {
position: relative;
z-index: 11;
width: 100%;
pointer-events: none;
}
.fg-hero__copy .fg-btn { pointer-events: auto; }
/* THE HEADLINE IS SET FROM THE HERO'S OWN RAMP AND FROM NOTHING SITEWIDE.
--hero-fs is a single clamp declared at the top of this section: a 40px
floor, a 8.5vw slope and the ruled --hero-fs-max ceiling. It used to be
min() of that ramp and the --fs-display token, and the note on --hero-fs
carries why the token leg was both inert and worth removing. What the ramp
itself is for has not changed. At 320px, WCAG reflow's narrow end, the
column is 280px and the display token's own 56px floor would set lines wider
than that; here the headline is 40px and every line fits. And on a 390px
handset the hero has to stay near one screen, where the same ramp takes the
headline from five lines to four. tokens.css is untouched either way: every
figure here is scoped to this element.
THE MEASURE IS IN em SO IT RIDES THE TYPE. 900px is the stacked-mode
measure, where the copy runs the full container; the overlay block replaces
it with the em figure that holds the four-line wrap. */
.fg-hero__title {
font-size: var(--hero-fs);
max-width: min(100%, 900px);
}
/* THE HIGHLIGHTED COMPOUND STAYS WHOLE, and the floor above is what makes that
safe rather than a reflow hazard. MISSION-READY measures 5.345em, so it fits
the column whenever the column is at least 5.345 times the type size:
viewport type compound column fits
320 40.00px 213.8px 280px yes, 66px spare
390 42.75px 228.5px 350px yes
698 68.90px 368.3px 650px yes, the token takes over here
768 71.84px 384.0px 720px yes
1024 82.57px 441.3px 900px yes, the stacked 900px cap here
1439 99.96px 534.3px 900px yes
1440+ capped by the 6.6em measure, and 5.345em is inside it
Without the floor the token's own 56px minimum puts the compound at 299px in
a 280px column at 320, which is the WCAG 1.4.10 reflow failure this pair of
rules exists to remove. Keeping the two together is the reason the wrap
table further down is a step function of the measure at all: break the
compound and the headline has a different number of lines at the same
measure. */
.fg-hero__title .fg-accent-word { white-space: nowrap; }
/* THE SUB'S MEASURE IS A CHARACTER COUNT, NOT A LAYOUT WIDTH, so it is
re-derived whenever the body token moves rather than left at its old pixel
figure. 470px held 33.57em of the 14px setting the token used to carry, and
33.57em of the 16px setting is 537px, so the line length in characters is
the same before and after the change and the sub still sets three lines
everywhere the measure binds. It stays in pixels rather than em to match the
measure caps in tokens.css, which are written the same way. */
.fg-hero__sub {
margin-top: clamp(20px, 1rem + 1vw, 28px);
max-width: 537px;
font-size: var(--fs-body);
line-height: var(--lh-lede);
color: var(--text-muted); /* 5.57:1 on --surface-base */
}
.fg-hero__actions { margin-top: clamp(24px, 1.2rem + 1.4vw, 40px); }
/* THE STAGE, in flow. This is the FALLBACK layout and the base the other two
override: a plain 16/9 box at the container's own content width, under the
copy. Container geometry by hand rather than by wrapping the stage
in a .fg-container, because a wrapper's padding would become part of the
stage's containing block and every percentage in the geometry table is a
percentage of that block. The gutter is subtracted from the width instead,
which lands the box on exactly the container's content width and leaves the
percentages measuring the bitmap.
POSITIONED, NOT STATIC. The nodes are absolutely positioned, so a static
stage would hand their containing block up to .fg-hero and every percentage
would suddenly measure the whole hero. z-index stays auto so the stage
creates no stacking context; see the layer table above.
THE STAGE IS THE WHOLE FRAME, SO IN FLOW IT IS SIZED BY ITS COMPOSITION
SUB-BOX. A 3.16:1 strip at the container's width would be a 418px letterbox;
what the stacked layout wants is the original 16/9 painting filling the
container with the frame's new scenery bleeding out either side. So the
stage is sized so that its sub-box lands exactly on the container's content
box: width = containerContent / --comp-w, pulled left by --comp-x of its own
width. The hero's overflow: hidden takes the overhang, and because the
overflow is clipped by an ancestor it never reaches the document's own
scroll width.
--stage-px IS THE SAME WIDTH AGAIN, WRITTEN WITHOUT A PERCENTAGE, and it has
exactly one consumer: the leader dash, which is measured in screen pixels
and so cannot use a percentage of anything. Here it is exact. In the overlay
block it is max(--stage-static, 100vw) against the box's own
max(--stage-static, 100%): the two agree exactly below 2560, where the
constant is the larger term on both sides and no viewport unit is read at
all, and above it they differ by the width of a classic scrollbar. The dash
is a shade long as a result, which is the harmless direction. */
.fg-hero__stage {
--comp-px: min(var(--container-max), calc(100vw - (var(--gutter) * 2)));
--stage-px: calc(var(--comp-px) / var(--comp-w));
position: relative;
z-index: auto;
width: var(--stage-px);
max-width: none;
margin-left: calc(var(--gutter) - (var(--stage-px) * var(--comp-x)));
margin-right: 0;
margin-top: clamp(24px, 3vw, 48px);
aspect-ratio: var(--plate-ar);
pointer-events: none;
}
/* THE PLATE. A real inside a , which buys three things over the
background-image it replaces: a responsive source set can be added later
without restructuring anything, the download gate is declarative and lives
next to the source rather than in a media query, and the browser's own
preload scanner can see it.
The stage IS the delivered frame, so the plate lies inset: 0 over it and the
two aspects agree by construction: the box is --plate-ar and so is the file,
which is what lets the default fill sizing carry it without distortion. */
.fg-hero__plate {
position: absolute;
inset: 0;
z-index: 1;
display: block;
pointer-events: none;
animation: fg-scene-in var(--dur-reveal) var(--ease-entrance) backwards;
}
.fg-hero__plate img { display: block; width: 100%; height: 100%; }
@keyframes fg-scene-in {
from { opacity: 0; }
}
/* Entrance motion, so the pause control is deliberately given no rule: pausing
stops loops that run on their own. Reduced motion does drop it, and dropping
it leaves the plate at its visible base state. */
html[data-motion="reduced"] .fg-hero__plate { animation: none; }
@media (prefers-reduced-motion: reduce) {
html .fg-hero__plate,
html[data-motion] .fg-hero__plate { animation: none; }
}
/* The scrim only exists where the copy sits ON the scene at the same height as
the composition. In the fallback the copy is above the stage in flow, and in
the scroll catch the frame is not in the window at all while the copy is up;
the measured ratios are on the scroll catch's copy rule. Neither needs ink. */
.fg-hero__scrim { display: none; }
/* THE BOTTOM BLEND, ABOVE THE ARTWORK. It is the join between the hero and the
next band, so it has to be over everything the hero paints; at any level
below the artboards a platform standing on the ground shelf paints straight
through it and the join reappears. 48px is the collision rule the callouts
are checked against, restated as a length: nothing may sit below 86 percent
of the stage, and no tag anchor in the geometry table is below 72 percent. */
.fg-hero__fade {
position: absolute;
z-index: 10;
left: 0; right: 0; bottom: 0;
height: var(--space-9);
pointer-events: none;
background: linear-gradient(180deg, rgba(9, 12, 20, 0) 0%, var(--surface-base) 100%);
}
/* THE SKY RAMP, AND IT IS THE PLATE'S OWN TOP EDGE RESAMPLED AS A GRADIENT.
Wherever the stage is shorter than the box it sits in, the join between the
artwork's top edge and whatever is above it is a horizontal line across the
page. The overlay's strip extends the sky upward with this ramp, which is
why it is authored here at section scope rather than on the rule.
THE SCROLL CATCH SAMPLES ITS OWN LINE AND SO CANNOT READ THIS ONE. Its strip
starts at the crop line rather than at the frame's top edge, so it carries a
second set of 33 stops measured at that row by the identical method. The two
ramps are the same technique at two different heights of the same file, and
each is authored where its one consumer is.
WHY A RAMP AND NOT ONE COLOUR. The plate's top rows are not flat. Over the
top 8 rows the whole-frame mean is 1.9 / 2.7 / 4.2 of 255, but 160px windows
across the frame run from 0.2 / 0.6 / 0.9 at frame x 22 percent to
5.9 / 9.7 / 17.3 at 69 percent, where a glow off the Earth limb reaches the
top of the file. A single colour matched to the mean would sit 13 steps of
blue under the plate at that one place and 3 over it at the darkest, which is
a soft horizontal edge exactly where the eye is already following the
satellite. So the ramp carries the same variation the plate does: 33 stops at
a 160-frame-pixel pitch, each the measured mean of the plate's top 8 rows
over a 160px window centred on that stop, rounded to the nearest step. Worst
rounding error over the 33 is 0.5 of 255, so the ramp and the plate meet
within half a step at every stop and within the ramp's own linear
interpolation between them.
THE STOPS ARE IN FRAME SPACE, WHICH IS WHY ONE RAMP SERVES EVERY WIDTH. It
is painted by a ::before on the STAGE with left: 0 and right: 0, so 0 to 100
percent maps onto frame x 0 to 5120 by construction and follows the artwork
whatever the stage's size or placement is doing.
STARS ARE DELIBERATELY NOT REPRODUCED. The measured means include them, which
is what makes the AVERAGE level agree; the ramp has no points of its own, so
the field simply stops having stars above the join, which is what a sky does
at the top of a frame. */
.fg-hero {
--sky-ramp: linear-gradient(90deg,
rgb(2, 3, 3) 0%,
rgb(1, 2, 1) 3.125%,
rgb(1, 2, 1) 6.25%,
rgb(1, 2, 1) 9.375%,
rgb(1, 2, 2) 12.5%,
rgb(1, 1, 2) 15.625%,
rgb(1, 1, 2) 18.75%,
rgb(1, 1, 2) 21.875%,
rgb(0, 1, 1) 25%,
rgb(1, 1, 2) 28.125%,
rgb(1, 1, 2) 31.25%,
rgb(1, 2, 4) 34.375%,
rgb(2, 2, 4) 37.5%,
rgb(2, 4, 8) 40.625%,
rgb(3, 4, 8) 43.75%,
rgb(2, 3, 5) 46.875%,
rgb(1, 2, 4) 50%,
rgb(2, 2, 4) 53.125%,
rgb(3, 4, 7) 56.25%,
rgb(3, 3, 4) 59.375%,
rgb(4, 4, 6) 62.5%,
rgb(4, 5, 7) 65.625%,
rgb(6, 10, 17) 68.75%,
rgb(5, 7, 14) 71.875%,
rgb(3, 4, 7) 75%,
rgb(3, 4, 5) 78.125%,
rgb(3, 4, 4) 81.25%,
rgb(1, 2, 2) 84.375%,
rgb(2, 2, 2) 87.5%,
rgb(1, 2, 2) 90.625%,
rgb(1, 2, 2) 93.75%,
rgb(1, 2, 1) 96.875%,
rgb(1, 2, 2) 100%);
}
/* --------------------------------------------------------------------------
OVERLAY, 1440px and up. The copy is a two-column grid inside the site's own
container, left column copy and right column the region the scene shows
through, and the stage is a constant-scale plate behind all of it.
WHY 1440 AND NOT THE KIT'S 1024. The overlay only works while the copy
column and the composition can both have their own half of the window. The
copy column is 450px here and the composition the copy has to clear runs from
the ship's stern at frame 41.0 percent to the satellite's right edge at 82.9,
which at the constant scale is 1071px of artwork that has to sit right of the
scrim's wall. At 1440 the wall ends at 474 and the vessel's own span is 328.5
to 709.5, so 145.5px of the hull is still under it; at 1728 and above the
wall clears the whole object. Every width below 1440 pushes the vessel
further under the wall, so the band that used to run 1024 to 1439 on the
overlay is the stacked treatment instead, where the scene gets the
container's full width and no scrim at all. --container-max is 1440, so the
switch also lands exactly where the copy's own container stops growing.
THE KIT'S 1024 IS UNTOUCHED. components.css still switches the header there
and --hero-header still tracks it at 1025; the hero's overlay switch is a
second, later breakpoint and the two are deliberately independent.
Resizing across the whole range is continuous: the stage's width is a max()
of two continuous functions and the copy's column is the container's, so
there is no width at which the composition jumps.
-------------------------------------------------------------------------- */
@media (min-width: 1440px) {
/* THE HERO'S HEIGHT COMES FROM THE VIEWPORT AND NOTHING ELSE, and it is
--hero-h, derived at the top of this section.
container-type: size is what makes that a guarantee rather than an
observation: size containment computes the hero's own size as if it had no
contents, so the copy cannot lengthen it however the type falls. The floor
of --hero-h is set above the copy's tallest possible setting with margin,
and that margin is asserted per width rather than argued, because with
containment an overflowing copy would be clipped instead of growing the
box. */
.fg-hero {
/* THE COLUMN IS NARROWER ON THE OVERLAY THAN ANYWHERE ELSE, AND THE TYPE IS
WHAT MAKES IT NARROW. The overlay is the only layout where the copy sits
ON the picture, so it is the only one where the column's width is also
the width of the wall that hides the picture. The wall ends at the
column's right edge by construction, the vessel's own span is fixed by
the anchor, and at the shipped 660px column the two overlapped so far
that the object measured full ink across its whole width at every width
the overlay runs at.
THE MEASURE IS UNTOUCHED, SO THE WRAP IS UNTOUCHED. The headline's
max-width is 6.6em and the wrap is a step function of that em figure
alone, so bringing the type down moves the column and the wall without
moving a single line break: the same lines set at a smaller size. The
ceiling is --hero-fs-max at the top of this section, 4.25rem, and 6.6em
of it is 448.8, so the column is 450. Everything below 1440 keeps the
660px column, because there the copy is not over the picture and there is
nothing for a narrower column to uncover.
THE SIZE IS SET ONCE AND IT IS NOT SET HERE. The ceiling used to be
written on this rule, which made the type smaller at 1440 than at 1280
and gave the site's widest window its smallest display headline. It is
--hero-fs-max now and applies at every width, so this block declares the
column alone; the note on --hero-fs-max carries the reasoning.
WHY 68 AND NOT LESS. The vessel spans 381px on screen and its stern sits
at viewport width less 1111.5, so the wall clears the whole object only
where 24 + column <= that figure, which no column a display headline can
live in reaches at 1440. 68px is the size at which the object reads whole
at 1728 and at 1920, which is the width the defect was reported at:
measured, it puts 0px of the hull under full ink at both, 4.5 percent of
it over half ink at 1920 and 229px of bow in clear air. Below that the
return per pixel of type falls away, at 1440 fastest of all, where the
column stands on the vessel whatever it is set at: 145.5px of hull under
the wall there and 73.5 at 1536, which no column a headline can live in
removes. WHAT MOVING THE CEILING COSTS, in pixels of hull under full ink:
ceiling column 1440 1536 1728 1920
68px 450 145.5 73.5 0 0
76px 502 197.5 125.5 29.5 0
86px 568 263.5 191.5 95.5 0
100px 660 355.5 283.5 187.5 91.5
The vessel is 381px wide at every one of them, because the anchor fixes
its span and only the wall moves. */
--copy-w: 450px;
container-type: size;
display: flex;
align-items: center;
min-height: var(--hero-h);
padding-block: 0;
}
/* The vertical padding moves off the hero and onto the copy. The stage is
anchored to the hero's BORDER box, so leaving vertical padding on the hero
would make the anchored box and the measured box two different rectangles
and the seam at the top of the artwork would move with the padding.
Carrying the header allowance here instead keeps the copy clear of the
fixed header while the flex centring still works on the block as a whole:
the copy's top lands at (hero height + header offset - copy height) / 2.
Where the budget is the term that sets the hero height, that reduces to
the header offset plus half the budget's own slack, so the clearance is
the header's height plus a positive number by construction and cannot
fall below it. In the matrix that is 109px, a 734px hero with the copy at
its 609px maximum under the 92px desktop header, which is the only header
this block ever runs against: the compact 73px offset is gone by 1025 and
the overlay does not start until 1440. Where the viewport sets the height
instead the clearance is larger, 138px at a 792px hero. */
.fg-hero__body { padding-top: var(--hero-header); }
/* TWO COLUMNS: the copy, and the region the scene is read in. The second
column holds nothing; it exists so the split is declared rather than
implied by a max-width, and so the copy's right edge is the same
arithmetic the scrim is written off. */
.fg-hero__body .fg-container {
display: grid;
grid-template-columns: minmax(0, var(--copy-w)) minmax(0, 1fr);
}
/* THE MEASURE IS IN em, WHICH IS THE WHOLE ANSWER TO THE FIT.
Measured in Barlow Condensed bold caps at the tracking the kit sets, the
candidate lines of THE ELECTRONICS BACKBONE BEHIND MISSION-READY SYSTEMS
are
THE ELECTRONICS 6.191em
BACKBONE BEHIND 6.346em <- the widest, and so the measure
BEHIND MISSION-READY 8.046em
MISSION-READY 5.345em
MISSION-READY SYSTEMS 8.628em
THE ELECTRONICS BACKBONE 10.021em
so the wrap is a step function of the measure, not a slope:
>= 10.021em three lines
6.346em four lines <- here
6.191em five lines
5.345em six lines
Four is the one worth having. Three needs 1002px of column, which pushes
the copy across most of the frame and leaves nowhere for the scene; five
costs a whole line for 16px of column; six costs two lines and 200px of
hero. So the measure is 6.6em: the 6.346em line plus 0.254em of slack for
a fallback face, written in em so it rides the token instead of being
re-tuned after it. At the token's 100px ceiling that is 660px, which is
where the 660px column comes from; below the ceiling the em figure is the
smaller of the two and governs.
THE COPY BLOCK CAP IS THE SUB AND THE BUTTONS, not the headline. The sub
carries its own 537px measure and the actions are a flex row, so 660px
only stops them spreading to the column; it is the headline's em rule that
sets the wrap. */
.fg-hero__copy { max-width: var(--copy-w); }
.fg-hero__title { max-width: 6.6em; }
/* THE CONSTANT SCALE. --stage-w is --stage-static or the hero's own width,
whichever is larger, and aspect-ratio turns that width back into the
height. The artwork therefore has ONE size on screen across the whole band
the overlay is designed for, and a window that grows moves the frame
rather than zooming it. That is the change this block is built around: the
previous cover crop tied the artwork's size to the hero's height, so a
taller window silently enlarged every platform, every part and every
callout, and the composition read at a different size on two machines
showing the same page.
WHERE 2560 COMES FROM, AND WHAT IT COSTS. The constant is 0.5 x 5120
exactly, so one frame pixel is half a CSS pixel, the stage is 2560 x 810 to
the pixel and every frame-unit figure in this file converts by a clean 0.5.
It is a size chosen for the picture: at the 2048 it replaces the Earth's
limb, the satellite and the ground terminal all sat small in a wide dark
field and the scene read as a backdrop rather than as the subject of the
hero. A quarter more scale is what puts the four objects at a size the eye
takes as the point of the page.
THE FIGURE IT GIVES UP IS THE SHIP'S BOW, and the trade is stated here
rather than left to be discovered. The bow is frame x 2861 / 5120 = 0.55879,
the left-most point of the composition the copy was previously kept off. The
anchor puts the satellite's right edge at the viewport's right edge less
--frame-pad, so the bow lands at
bow = W - --frame-pad - (--sat-rx - 0.55879) x --stage-static
= W - 40 - 0.26973 x --stage-static
and a larger stage pulls it LEFT: 848px at 1440 with the old constant
against 709.5px with this one.
THE WALL CAME BACK TO MEET IT RATHER THAN THE STAGE GOING BACK. Under the
660px column and the long release the bow sat at 709.5 against a wall
ending at 684 and a release running to 1122, so the whole object was inside
the ramp at every width the overlay runs at and none of it read. The column
is 450 now and the release is a fifth of the room rather than three fifths,
which puts the wall at 474 and the ramp's end at 686.5 at the same 1440:
the bow is in clear air there and the whole object is from 1728 up. What is
still lost is the vessel's STERN at the narrow end of the band, 145.5px of
hull at 1440 and 73.5 at 1536, and the vessel is neither the anchor nor the
right-hand content: it is the object furthest into the copy's side of the
frame, it keeps its label, its hit region and its card, and below 1440 the
fit rule in section 6 of cinema.css shrinks the frame to the window.
NOTHING IS CROPPED BY THE CHANGE. The right-hand cut is the anchor's and is
unmoved in frame terms; the top cut deepens because the stage is 810 tall
rather than 648, and at the shortest hero the overlay ever draws, 734px at a
700px window, the satellite's own top edge lands 96px below the hero's top
against a 92px header. That is the binding case and it clears.
Percentages resolve against the containing block, which is the hero's
padding box, so 100% here is the hero's width.
THE FRAME IS ANCHORED BY THE SATELLITE'S RIGHT EDGE. One left value moves
the plate and all four platform layers together, and it is set so the
satellite's own alpha bounding box ends --frame-pad short of the
viewport's right edge:
left = max(heroWidth - stageWidth,
100% - --frame-pad - stageWidth x --sat-rx)
Anchoring an OBJECT rather than the painting's border is what makes the
pad read as a margin: the satellite is the right-most thing in the scene,
so the eye measures the gap from it, and the 5 percent of painting and 12
percent of added scenery beyond it are backdrop that may run off-screen
without anything being lost. Everything the window cannot hold comes off
the LEFT, which is the added scenery first and then the painting's own
left edge. The right-hand content is never the thing that is cropped.
THE max() IS THE NO-GAP GUARD, and under the constant scale it is also the
sizing policy past 2560. The first term is the placement at which the
frame's right edge would sit exactly on the viewport's right edge; taking
the larger of the two makes a gap on the right impossible. It never fires
as a placement, because the anchor term always leaves the frame's right
edge past the viewport: by a flat 399px below 2560, where the stage is the
constant, and by 17.148 percent of the window less 40px above it, where
--stage-w has become 100% and the two terms are both linear in W.
A GAP ON THE LEFT IS ALLOWED AND IS INVISIBLE BY CONSTRUCTION. Past
--stage-static x --sat-rx + --frame-pad = 2161px of viewport the anchor
term is positive, so the frame's left edge sits inside the window: 399px
at 2560 and 550px at 3440. That strip is the hero's own
--surface-base, and it lies entirely inside the scrim's solid plateau,
which runs to the copy column's right edge at 1220 and 1660 respectively.
The margin is never close: the widest the gap gets is
0.17148 x W - 40 against a plateau of 0.5 x W - 60, so the plateau outruns
the gap by 0.32852 x W - 20 at every width past 61px, and the containment
cannot fail at any window this page will ever see. Under flat 0.95 ink the
strip and the frame's own left column, measured at 0.8 / 1.2 / 2.5,
composite to 0.4 of one step of each other.
It is written out rather than left to auto margins because an
over-constrained absolutely positioned box with auto margins does not
centre when it is wider than its containing block, it goes flush to the
start edge. A transform would place it in one declaration and is
deliberately not used, because a transform makes the stage a stacking
context and seals the parts and callouts out from above the scrim.
WHAT THE CROP COSTS, from measured geometry at the sizes in the check
matrix. visible x and visible y are percentages of the FRAME. gap L is the
hero ground showing left of the stage and gap T the strip showing above
it, both in CSS pixels; where gap T is 0 the stage is taller than the hero
and the surplus is cropped off the top instead, which is what moves the
visible y range off 0.
viewport hero stage visible x visible y gap L gap T
1440 x 700 734 2560 x 810 28.2 to 84.4 9.4 to 100 0 0
1440 x 900 792 2560 x 810 28.2 to 84.4 2.2 to 100 0 0
1440 x 1440 850 2560 x 810 28.2 to 84.4 0 to 100 0 40
1600 x 700 734 2560 x 810 21.9 to 84.4 9.4 to 100 0 0
1600 x 900 792 2560 x 810 21.9 to 84.4 2.2 to 100 0 0
1600 x 1440 850 2560 x 810 21.9 to 84.4 0 to 100 0 40
1920 x 700 734 2560 x 810 9.4 to 84.4 9.4 to 100 0 0
1920 x 900 792 2560 x 810 9.4 to 84.4 2.2 to 100 0 0
1920 x 1440 850 2560 x 810 9.4 to 84.4 0 to 100 0 40
2560 x 700 734 2560 x 810 0.0 to 84.4 9.4 to 100 399 0
2560 x 900 792 2560 x 810 0.0 to 84.4 2.2 to 100 399 0
2560 x 1440 850 2560 x 810 0.0 to 84.4 0 to 100 399 40
3440 x 700 863 3440 x 1088 0.0 to 84.0 20.7 to 100 550 0
3440 x 900 863 3440 x 1088 0.0 to 84.0 20.7 to 100 550 0
3440 x 1440 863 3440 x 1088 0.0 to 84.0 20.7 to 100 550 0
WHAT IS OFF-SCREEN, row by row. On the right it is always the same cut and
it is always scenery: the visible x range ends at --sat-rx + --frame-pad /
stage width, which is 84.4 percent below 2560 and falls slowly to 84.0 at
3440 as the pad becomes a smaller share of a wider stage. Frame x 84 to
100 is the added right-hand extension plus the last 3 percent of the
original painting, and the right-most object in the composition is the
satellite at 82.9, so nothing in the scene is ever in the cut.
On the left, 1440 loses frame x 0 to 28.2, 1600 loses 0 to 21.9 and 1920
loses 0 to 9.4, all of it added scenery, since the original painting does
not begin until 31.4 and the left-most object, the vessel, not until 41.0.
From 2161 up there is nothing off the left at all.
Off the TOP the taller stage now crops at every viewport height under
850px, and the deepest cut on the overlay is 9.4 percent at a 700px window,
which stops 11.9 percent of frame height short of the satellite's own box
at 21.3. The deepest cut anywhere is still 20.7 percent at 3440, 0.6
percent short of the same box: what goes is star field either way. Nothing
is ever cropped off the bottom, because the stage is bottom-anchored.
SO THE NARROWEST WINDOW THE OVERLAY RUNS AT STILL SHOWS EVERY OBJECT.
1440 shows frame x 28.2 to 84.4 against four objects that run 41.0 to 82.9,
with all four wholly inside the window. What 1440 does not show is the
VESSEL BESIDE THE COPY: its bow lands at 704px against a 684px plateau, so
the object is behind the scrim's ink rather than off the frame. The
derivation above says why that trade was taken and where it comes back. */
.fg-hero__stage {
--stage-w: max(var(--stage-static), 100%);
--stage-px: max(var(--stage-static), 100vw);
position: absolute;
top: auto;
bottom: 0;
left: max(calc(100% - var(--stage-w)),
calc(100% - var(--frame-pad) - (var(--stage-w) * var(--sat-rx))));
width: var(--stage-w);
max-width: none;
margin: 0;
}
/* THE SKY STRIP, AND IT IS THE PLATE'S OWN TOP EDGE RESAMPLED AS A GRADIENT.
A constant-scale stage is 648px tall against a hero that runs 734 to 850,
so between 86 and 202px of hero ground shows above the artwork and the
join between the two is a horizontal line across the top of the page. The
stage stays bottom-anchored, which is not negotiable: the horizon, the sea
and the ground never move. So the strip is made to agree with the plate
instead.
IT IS A ::before ON THE STAGE, WHICH IS WHAT PUTS IT IN THE RIGHT
COORDINATE SPACE. left: 0 / right: 0 inside the stage is the frame's own
x extent, so the 90deg ramp below maps 0 to 100 percent onto frame x 0 to
5120 by construction and follows the artwork when the anchor moves it.
bottom: 100% seats it exactly on the stage's top edge, so the join is one
shared edge rather than two numbers that have to be kept in step.
THE HORIZONTAL RAMP IS --sky-ramp, authored once above this block with its
measurement written out there; both layouts that extend the sky read the
same 33 stops.
THE VERTICAL FADE IS A MASK, NOT A SECOND GRADIENT, because the ramp is
already using the background slot and the two axes must not be folded into
one image. 160px of ease from solid at the join to nothing above it, which
is the blend; above the fade the hero's own ground, its radial lift and
the hex lattice are back at full strength. Where the strip is shorter than
the fade the fade is simply truncated, and that is safe rather than lucky:
the hero is the first block in the document, so the strip's top edge is
the page's top edge and there is no surface above it to disagree with.
IT IS OVERLAY-ONLY. In the stacked layout the copy is above the stage in
flow and the stage's top edge meets the page's own ground on purpose, so
there is nothing to blend and this rule does not exist there. */
.fg-hero__stage::before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 100%;
height: 160px;
pointer-events: none;
background: var(--sky-ramp);
-webkit-mask-image: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0) 100%);
mask-image: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0) 100%);
}
/* THE TEXT SCRIM, AND IT IS ONE WALL WITH ONE RELEASE. Solid ink from the
viewport's left edge, full height, straight through the copy column, then
a single long eased falloff into the scene. Nothing fades at the left, the
top or the bottom: the dark side of the hero is dark all the way to its
edges, and the only transition anywhere is the one horizontal release.
IT IS ANCHORED TO THE VIEWPORT, NOT TO THE STAGE, so the wall covers the
text and the release begins at the same relationship to the text at every
width, whatever the anchor is doing behind it. THAT IS WHAT MAKES THE
STAGE'S CONSTANT SCALE SAFE. The scrim is a function of W alone and the
stage's placement is a function of W alone, so the two slide across each
other on one variable: the plateau ends at max(0.5W - 270, 474) while the
vessel's stern sits at W - 1111.5, and the gap between them widens by a
whole pixel of window below 1488 and by 0.5 of one above it. The scene
therefore comes further out from under the ink as the window grows and
never goes back under it, which is the property the constant is solved
against at the 1440 floor: the floor is the worst case, and every wider
window is strictly better.
--copy-edge IS THE COPY COLUMN'S RIGHT EDGE, and the plateau runs to it
exactly: the whole column sits on solid ink. It is derived from the kit's
container rather than guessed at, so it follows --container-max when that
token moves, and it is written against --copy-w rather than against a pair
of literals, so it follows the column when the ceiling moves. .fg-container
is max-width calc(--container-max + 2 x gutter) centred with gutter
padding, and the column is --copy-w wide at its left. Above
--container-max + 2 x gutter of viewport the container is capped and
centred, so the right edge is (W - 1440)/2 + --copy-w = 0.5W - (720 -
--copy-w); below it the container is full width, the gutter has already
reached its own 24px ceiling, and the edge is a flat 24 + --copy-w. The two
meet at exactly 1488px of viewport for any column, since 0.5W - 720 = 24
solves to W = 1488 whatever --copy-w is, so the max() has no discontinuity
at the join. At the 450px column those two legs are 0.5W - 270 and 474, and
below 1488 the flat leg is the one in force, which is the whole of the 1440
to 1487 band.
--release IS 22 PERCENT OF WHAT IS LEFT of the viewport past the plateau,
lifted to a 200px floor where that fraction would collapse it and the floor
itself capped at half the room. It used to be 58 percent, and that is what
hid the vessel: 58 percent ran the ramp 520 to 592px at the widths the
overlay is read at, which is wider than the 381px object, so the hull sat
inside the ramp end to end and read at no width at all. A fifth of the room
is shorter than the object, so the ink is spent BEFORE the hull rather than
across it. The last three columns are the vessel under the same arithmetic,
and the stern is the binding end now that the bow is clear everywhere:
viewport plateau ends release ends clear scene hull under stern
the wall alpha
1440 474 686.5 753px 145.5px 0.950
1600 530 765.4 835px 41.5px 0.950
1920 690 960.6 959px 0px 0.378
2560 1010 1351.0 1209px 0px 0
3440 1450 1887.8 1552px 0px 0
The bow is past the end of the release at every width from 1440 up, and the
stern's alpha falls monotonically the whole way.
THE RELEASE IS NINETEEN STOPS ON AN EASE-OUT, PLACED BY ALPHA RATHER THAN
BY POSITION, which is what makes it smooth rather than merely gradual.
alpha(u) = 0.95 x (1 - u)^1.6 is the curve; the stops are the eighteen
equal alpha steps of 0.0528 along it, each one positioned where the curve
reaches that value, u = 1 - (alpha / 0.95)^(1/1.6). Equal steps in alpha
are the thing a gradient's banding is measured in, so placing them that
way bounds the largest step by construction: no adjacent pair differs by
more than 0.0528 as authored, or 0.0549 once the compositor quantises the
alphas to eight bits, against the 0.06 the eye starts to pick up as an
edge on a large flat area. Placing the same number of stops at equal
POSITIONS on the curve would put a 0.111 step at the top of the run, which
is the hard stop this shape exists to avoid.
THE PLATEAU IS 0.95, AND IT IS SET BY THE SMALLEST TYPE. Composited over a
hypothetical pure WHITE scene pixel, which is the darkest the ink can ever
be against its ground whatever the crop or a future plate puts underneath:
--accent 4.73:1 · --text-muted 5.05:1 · --text-display 16.22:1
The binding figure is --accent on the eyebrow. At 12px semibold that is
still normal text, well under the 18.66px bold boundary, so the threshold
is 4.5:1 rather than the 3:1 the headline is read against: --accent needs
0.935 of alpha against white and has 0.95. The other runs the scale moves
are the sub, 16px of --text-muted at 5.05:1, and the two button labels at
14px: near-black ink on the opaque accent fill at 5.22:1, and --text-primary
over the plateau at 14.70:1. All three are normal text and all three clear
4.5:1 with room. Nothing in the column crosses the large-text boundary
except the headline, which measures 16.22:1 against a 3:1 requirement, so
the smallest run is still the one that sets the plateau. Every run of copy
sits on the flat plateau, so there is one alpha for the whole column and
the ratios move only with what the crop puts under it.
MEASURED, by compositing the plate and the four platform layers at the
stage's on-screen geometry, applying the gradient's alpha at each pixel's
own x and taking the brightest resulting pixel inside every ink rectangle:
the eyebrow, each headline line box, the accent compound, each sub line
box and both button labels, over 1440 / 1600 / 1920 / 2560 / 3440 against
700 / 900 / 1440 of viewport height, which is the whole range this block
now runs at. Ratios are in the check matrix. */
.fg-hero__scrim {
--copy-edge: max(calc(50vw - (720px - var(--copy-w))), calc(24px + var(--copy-w)));
--release: max(calc((100vw - var(--copy-edge)) * 0.22),
min(200px, calc((100vw - var(--copy-edge)) * 0.5)));
display: block;
position: absolute;
inset: 0;
z-index: 7;
pointer-events: none;
background: linear-gradient(90deg,
rgba(9, 12, 20, 0.95) 0,
rgba(9, 12, 20, 0.95) var(--copy-edge),
rgba(9, 12, 20, 0.8972) calc(var(--copy-edge) + (var(--release) * 0.0351)),
rgba(9, 12, 20, 0.8444) calc(var(--copy-edge) + (var(--release) * 0.071)),
rgba(9, 12, 20, 0.7917) calc(var(--copy-edge) + (var(--release) * 0.1077)),
rgba(9, 12, 20, 0.7389) calc(var(--copy-edge) + (var(--release) * 0.1454)),
rgba(9, 12, 20, 0.6861) calc(var(--copy-edge) + (var(--release) * 0.184)),
rgba(9, 12, 20, 0.6333) calc(var(--copy-edge) + (var(--release) * 0.2239)),
rgba(9, 12, 20, 0.5806) calc(var(--copy-edge) + (var(--release) * 0.2649)),
rgba(9, 12, 20, 0.5278) calc(var(--copy-edge) + (var(--release) * 0.3074)),
rgba(9, 12, 20, 0.475) calc(var(--copy-edge) + (var(--release) * 0.3516)),
rgba(9, 12, 20, 0.4222) calc(var(--copy-edge) + (var(--release) * 0.3976)),
rgba(9, 12, 20, 0.3694) calc(var(--copy-edge) + (var(--release) * 0.4458)),
rgba(9, 12, 20, 0.3167) calc(var(--copy-edge) + (var(--release) * 0.4967)),
rgba(9, 12, 20, 0.2639) calc(var(--copy-edge) + (var(--release) * 0.5509)),
rgba(9, 12, 20, 0.2111) calc(var(--copy-edge) + (var(--release) * 0.6094)),
rgba(9, 12, 20, 0.1583) calc(var(--copy-edge) + (var(--release) * 0.6737)),
rgba(9, 12, 20, 0.1056) calc(var(--copy-edge) + (var(--release) * 0.7467)),
rgba(9, 12, 20, 0.0528) calc(var(--copy-edge) + (var(--release) * 0.8358)),
rgba(9, 12, 20, 0) calc(var(--copy-edge) + var(--release)));
}
}
/* ==========================================================================
1b. THE MISSION SCENE
Four platforms standing in four domains of one plate.
WHAT IS LIVE. Each platform is a button that opens its capability drawer,
and pointing at one runs the reveal (the platform ghosts and grows, its part
fades up and grows to 3x) and then the callout (the leader draws out of the
revealed part, the numbered tag lands at its end). Under all of it are four
independent connections, one arc per platform pair at a single shared
radius, each with a hairline trace always on and its own signal firing along
it on its own co-prime cycle.
ONE SVG SERVES EVERY WIDTH, AND IT DRAWS AT EVERY WIDTH. The connection svg
is viewBox="0 0 5120 1620", the delivered frame's own pixels, with
preserveAspectRatio="none", so x / 5120 and y / 1620 land exactly on the
percentage coordinates everything else in the scene is positioned at and the
four fitted arcs need no per-viewport arithmetic of any kind. The box is the
frame's own aspect in all three layouts that draw it, so 1 viewBox unit is
stage width / 5120 in BOTH axes: a curve authored there cannot come out
sheared, and a segment with |dx| = |dy| is a true 45 degrees on screen. The
connections are the one piece of the scene that is never conditional; a
handset gets the same four arcs and the same four signals the overlay does.
---- THE PLATFORMS ARE FULL-ARTBOARD LAYERS -------------------------------
The four platforms are delivered at the frame's own 5120 x 1620, each one
WITH its own shadow and transparent everywhere else, so laid inset: 0 over
the stage they are positioned by construction and registered to the plate by
construction too. There is no placement table for the artwork and no way for
the artwork to drift from the composition: the five files ARE the
composition.
THEY ARE INSIDE , AND THERE IS NO LONGER A DOWNLOAD GATE.
The scene is the hero at every width, so every width fetches the same five
files: one plate and four artboards. The gate that used to hand a narrow
screen the tight single-platform cutouts went out with the layout that used
them, because a cutout cannot compose the scene. It is a crop of one object
with no registration to the plate and no shadow that belongs to the frame,
so the five delivered layers are the only set that IS the composition.
WEIGHT, STATED RATHER THAN SOLVED, and it is the same figure everywhere now:
the plate is 9.98MB and the four platform layers are 6.24 + 5.64 + 5.82 +
4.28MB, so the hero is 31.97MB of PNG at every width. The delivered files are
shipped exactly as they are and nothing here recompresses, resizes or renames
them. The structure is kept for exactly one reason: a derivative
set drops in as extra rules with no change to this file. That is
where the narrow-screen weight goes when there are derivatives to point at.
---- WHAT EACH NODE MEASURES ----------------------------------------------
The artwork needs no geometry, but the hit region and the growth origin do,
and both come off ONE measurement per platform, read from the delivered
layers rather than chosen by eye. Each layer's alpha was thresholded and its
bounding box taken; the threshold is 200, which is where the box stops
moving with the threshold and so is the solid silhouette rather than the
soft shadow around it. At 128 the ship's box grows 73px sideways into its
own wake and the terminal's 40px down into its base shadow; at 250 the
satellite's has begun eating its own array tips. 200 sits between the two.
node alpha bbox, frame px frame %, centre and size
01 satellite x 3658-4242 y 345-716 77.148, 32.747 11.406 x 22.901
02 aircraft x 2595-3398 y 558-778 58.525, 41.235 15.684 x 13.580
03 ship x 2099-2861 y 1022-1559 48.438, 79.661 14.883 x 33.148
04 terminal x 3339-3847 y 988-1553 70.176, 78.426 9.922 x 34.877
NO TWO OF THOSE RECTANGLES INTERSECT, so the four hit regions cannot steal
each other's pointer and no priority rule is needed between them. Two pairs
do share an x range, the satellite with the terminal and the aircraft with
the ship, but neither pair shares a y range, so every intersection is empty.
The smallest box is the aircraft's, and the smallest stage the overlay
produces is the constant itself, 2560 x 810, which is every window from 1440
to 2560 and makes that box 400 x 110 CSS pixels. The scroll catch goes
smaller: its portrait band is 697 x 221 at 390 of viewport, which makes the
same box 109 x 30, and 30 is under the 44px WCAG 2.1 asks for in both axes.
So below 1440 the hit box carries a 44px floor in each axis, applied about
the SAME centre the measured box uses, and the floor is the only thing about
the target that is not measured. At the floor the four boxes are still
disjoint at 390: the aircraft grows to 109 x 44 spanning y 73 to 117 against
the ship's 145 to 222 and the terminal's 140 to 221, and the satellite's x
range 520 to 603 clears the aircraft's 369 to 483.
THE MEASUREMENT IS CROSS-CHECKED AGAINST THE REGISTRATION. The previous
canvas was 2880 x 1620 and its boxes were measured the same way; mapping
those through the measured registration, x -> (1608 + 1.8x) / 5120, predicts
where each box should now be. Agreement, as a percentage of the frame:
node dx dy verdict
satellite 0.000% +0.027% agrees
aircraft -0.002% +0.900% x agrees, y outside the 0.5% tolerance
ship -0.018% -0.029% agrees
terminal +0.010% +0.431% agrees
Every x lands within 0.02 percent, which is what confirms the offset. The
aircraft's centre sits 0.9 percent lower than the prediction because its
delivered layer carries a denser shadow below the airframe than the
shadow-free set the old box was read from, so alpha 200 reaches 28px further
down. The MEASURED box governs, here as everywhere: the hit region is 1.7
percent of frame height taller than the old one at its foot and the growth
origin sits 14px lower, neither of which is visible, and a box read from the
file that is actually being drawn cannot be wrong about that file.
PAINT ORDER IS NOT DOM ORDER. The four objects do not overlap, but the four
HARMONY LAYERS do: the shadow and bounce each one carries reach well outside
its own silhouette (the satellite's to x 100%, the aircraft's to y 100%), so
the stack decides which soft edge sits over which. The export numbering is
the source stack, top first: 0000 terminal, 0002 satellite, 0003 aircraft,
0004 ship. DOM order has to be tab order, 01 to 04, so the z-index on each
LAYER restores that stack underneath it.
THE STACK LIVES ON THE LAYER AND NOT ON THE BUTTON OR ITS WRAPPER, and that
is what keeps the ladder global. A z-index on either of those makes it a
stacking context, and a stacking context is a ceiling: everything inside it,
part and leader and tag included, would be trapped at that element's own
level and could never rise over the scrim. With the stack on the layer, the
button and the artwork wrapper are both z-index auto and create no context,
so all four layers, all four parts and the eight callout elements are
siblings on the hero's one ladder.
========================================================================== */
/* ---- THE CONNECTIONS · four arcs, one radius, four independent signals ---
NOT A SEQUENCE AND NOT A LOOP. There are four connections, one per platform
pair, each one its own arc with its own trace and its own pulse, and nothing
schedules them against each other.
---- THE ARCS ARE FITTED, NOT DRAWN ----------------------------------------
Every d below came out of the composition source by measurement. The method,
so it can be re-run if the artwork is redrawn:
1 difference the source against the delivered plate at their shared
2880 x 1620, and threshold the WARM residual (R minus B) at 45. That
isolates what was added from what was already there, which a plain
chroma threshold cannot do over a photograph with city lights in it.
2 sample centrelines rather than the glow: scan by row and by column,
take every run narrower than 70px, and keep its intensity-weighted
centre. The width filter is what drops the platform glows, which are
blobs rather than ribbons.
3 assign each sample to the nearest of the four platform-to-platform
chords inside a 100-unit corridor, then fit a circle by RANSAC and
least squares. RANSAC is load bearing on the satellite-to-aircraft
ribbon, where the descending dish-to-satellite ribbon crosses the same
corridor and a plain fit lands on neither curve.
4 choose ONE radius for all four by least squares over the four clouds
together, which the design calls for: every arc shares a radius.
WHAT CAME OUT, in the 1600-unit space the fit was done in. Free radii of
721.6, 571.3, 785.2 and 586.2, and a shared radius of 711.0. Residual
against the source centrelines at the shared radius:
connection samples free r rms at r=711
satellite-jet 434 721.6 0.18u
jet-ship 484 571.3 0.50u
ship-dish 475 785.2 0.37u
dish-satellite 442 586.2 0.36u
Half a fit unit is about half a pixel at the size the fit was read at: one
radius fits all four ribbons to inside the width of the hairline that draws
them.
THE FIT CARRIES ONTO THE NEW FRAME UNCHANGED, because the mapping between
the two canvases is a uniform scale and a translation and nothing else:
x -> 1608 + 1.8x, y -> 1.8y, radius -> 1.8r. A circular arc under a
similarity transform is still a circular arc with the same relative
geometry, so the residuals above are the same residuals, the shared radius
is still shared, and only the printed numbers grow. The shared radius is
1279.8 frame units and every d in the markup is the fitted d mapped that
way.
ENDPOINTS RUN INTO THE OBJECTS, NOT UP TO THEIR BOXES. A bounding box is not
a silhouette: the satellite's box includes empty sky out at the array tips
and the ship's includes everything under its mast, so an arc that stopped at
the box stopped in mid air. Each endpoint is walked along the SAME circle,
outward from the fit, sampling the CLEAN cutout's alpha (the same set the
hit-region boxes were read off) until it crosses into alpha 128, then 2.5
units further so the line makes contact. Walking along the circle is what
keeps the fit intact: the radius, the centre and every fitted sample are
untouched, the arc is simply longer at both ends.
THE CONTACT IS A FLAT 2.5 FIT UNITS because the connections paint OVER the
artboards (z6). Anything past the silhouette crossing is a line tip drawn ON
the object; 2.5 fit units is 4.5 frame pixels, enough to seat the line under
the artwork's own edge and not enough to read as an overshoot.
HOW FAR EACH END MOVED, in fit units, and what it landed on:
arc end extended alpha at the terminus
satellite-jet sat 10.7 255
satellite-jet jet 46.0 252
jet-ship jet 2.8 255
jet-ship ship 3.9 255
ship-dish ship 101.8 255
ship-dish dish 81.0 255
dish-satellite dish 46.9 251
dish-satellite sat 100.6 255
Arc lengths after the extension: 334.3, 203.2, 449.5 and 327.3 fit units,
against 277.5, 196.5, 266.8 and 179.9 before. Mapped onto the frame and
re-measured there with getTotalLength, they are 601.6, 365.8, 809.1 and
589.1 frame units, which is 1.800x the fit figures to four significant
places on all four and is the arithmetic cross-check on the mapping.
ONE FINDING NOT BUILT: the extraction found FIVE ribbons in the source, not
four. There is an aircraft-to-terminal ribbon that is not one of the four
named pairs. It is recorded here and deliberately not drawn.
---- THE TRACE -------------------------------------------------------------
Hairline, always on, so the connections read as structure rather than as
something that only exists while a pulse is on it. --ta is per arc and it is
measured: the plate's local luminance standard deviation is sampled in a
25px window along each arc, and the 90th percentile of that maps linearly
from 10 to 19 onto 0.16 to 0.31 of alpha. A busier backdrop gets more ink:
arc backdrop sd (p90) --ta
satellite-jet 15.3 0.25 space, Earth limb below
jet-ship 18.1 0.30 crosses the horizon, busiest
ship-dish 14.6 0.24 open water
dish-satellite 10.7 0.17 clear sky, calmest
-------------------------------------------------------------------------- */
/* z-index 6, ABOVE ALL FOUR ARTBOARDS AND BELOW THE SCRIM AND THE CALLOUTS.
Under the artboards is where a ribbon belongs relative to the OBJECTS, but
the artboards are not objects: each is a full 2880 x 1620 layer whose soft
shadow and bounce reach far outside the silhouette, and a near-transparent
stretch of one of those over a 1px hairline takes the hairline out of the
picture. 6 puts every connection over all four artboards, under the scrim
that dims the whole scene, and under the labels. */
.fg-scene__wire {
position: absolute;
inset: 0;
z-index: 6;
width: 100%;
height: 100%;
pointer-events: none;
}
.fg-conn__arc {
fill: none;
stroke: rgba(255, 255, 255, var(--ta));
stroke-width: 1;
}
/* THE STANDING GLOW. A second, wider instance of the same arc painted UNDER
the hairline, so the connections sit on a soft warm bed instead of being
bare white threads on a photograph. stroke-width 7 at 0.22 to 0.30 alpha,
blurred 5px: a narrower, fainter version of this was invisible, because
blurring a thin stroke spreads what little ink it has across roughly three
times its own width.
IT IS A REAL PATH AND NOT A