@import url("/tokens.css");
/* ===========================================================================
R5-MINOR · CUPERTINO RAIL · round 4 with every correction applied
===========================================================================
This is r4-cupertino-rail after Jakob's review. The chassis, the palette,
the card anatomy and the sticky folio are unchanged. What changed:
HERO taller. A 16:9 photograph in a 2.86:1 window was cropping the
landing gear and the tail away, which is why the aircraft read
small. Height, not width, is what gives the machine back.
FOLIO the 0N / 05 counter is gone. The label stays.
ICONS a sprite exists now. Round 4 had zero inline SVG.
01 three industry cards with route diagrams, matched in height to
the record rail. Real supporter logos replace the placeholder.
02 the false "full-scale aircraft flown" claim is corrected
(ADR-0012). Figures rail matched to the film. Timeline at six
rows, flanked by two photographs at one height.
03 an Investors invitation beside Pilot partners (ADR-0013).
04 roles lose "Co-Founder", gain a line of record, become equal.
05 "The latest." No press count, no explanation of what news is.
06, 07 new: the questions, and the newsletter.
ONE SECTION ANATOMY (round-2 rule 5) · identical in all seven sections:
[folio] sticky: [mark] label
[head] a two-track row. LEFT (5 of 12): the h2, 40/48, weight 300.
RIGHT (7 of 12): the section prose at 17/28, and under it that
section's one action. Nothing else ever enters the head.
[body] one calm card group on a 12-column grid, 16px gutters. Cards are
white, radius 20px, shadow level 2, padding 32px. Media fills its
card corner to corner and the caption sits in the padded space
below it. Column spans change per section, the card does not.
Head to body is 32px (unrelated blocks), inside a card 16px (grouped).
HEIGHTS · .body keeps align-items:start by default, because a short card
beside a tall rail otherwise leaves 150px of empty white. Three rows now
have to end flush, so they opt in with .body-match rather than the rule
being flipped globally.
PALETTE AND WCAG (computed pairs, AA or better everywhere)
ink #141414 on grey-50 #f8f9f7 17.44:1 AAA h1, h2, labels
ink #141414 on white #ffffff 18.42:1 AAA card headings, values
grey-700 #4a4d4a on white #ffffff 8.57:1 AAA prose in cards
grey-700 #4a4d4a on grey-50 #f8f9f7 8.11:1 AAA section prose
grey-600 #6b6e6b on grey-50 #f8f9f7 4.89:1 AA captions, months, roles
grey-600 #6b6e6b on white #ffffff 5.16:1 AA captions inside cards
green-700 #556f1c on grey-50 #f8f9f7 5.41:1 AA link actions
white #ffffff on grey-950 #0b0d0a 19.51:1 AAA the dark card
white #ffffff on grey-800 #2e302e 13.31:1 AAA the invitation boxes
grey-300 #cfd2cf on grey-800 #2e302e 8.73:1 AAA invitation prose
text-2 #4a4d4a on white 8.57:1 AAA the legal-page prose
grey-300 #cfd2cf on grey-950 #0b0d0a 12.80:1 AAA dark-card prose
green-400 #aaca5f on grey-950 #0b0d0a 10.52:1 AAA the teaser accent rule
ink #141414 on green-500 #98bc40 8.42:1 AAA the boxed action
white #ffffff on grey-900 #1c1d1c 16.91:1 AAA footer
grey-500 is never used for text anywhere. Nothing sits below 4.5:1.
The hero headline is measured against composited pixels, never inspected.
SIZE FLOORS · every label, caption, month and role is 16px computed. The two
exceptions are mandated by the chassis: nav links and buttons at 14px.
ICONS · 24x24 symbols, 1.5 stroke, no fill, currentColor. An icon takes the
colour of the line it sits on, so ink on light, white on the dark card,
grey in the figure rows, with no per-context variant. Green stays reserved
for its two jobs (the teaser rule, the button) and is never an icon.
========================================================================= */
:root {
/* semantic layer, mapped onto the primitive tokens */
--ground: var(--grey-50);
--card: #ffffff;
--text: var(--ink);
--text-2: var(--grey-700);
--text-3: var(--grey-600);
--hair: var(--grey-200);
--edge: var(--grey-300);
--accent: var(--green-700);
--dark: var(--grey-950);
--dark-2: var(--grey-900);
--sans: "Albert Sans", "Helvetica Neue", Arial, sans-serif;
--nav-h: 76px;
--r-card: var(--r-6);
}
*, *::before, *::after { box-sizing: border-box }
html { -webkit-text-size-adjust: 100% }
body {
margin: 0;
background: var(--ground);
color: var(--text);
font-family: var(--sans);
font-size: var(--fs-body);
line-height: var(--lh-body);
font-weight: 400;
-webkit-font-smoothing: antialiased;
}
img, video { max-width: 100% }
h1, h2, h3, p, dd, dl, ul, ol { margin: 0 }
ul, ol { padding: 0; list-style: none }
a { color: inherit }
/* Round 9, SEO. Sub-headings across the site were `` and
`
`, News year groups and Blog titles were paragraphs too, so
two pages had no h2 at all. They are real headings now.
The point of this rule: a heading marks a section of the DOCUMENT. Its level
is never chosen for its size. The live Wix site does the opposite — nine
used as section eyebrows, around spec values like "350 kg", and the
caption "*conceptual render" marked four times a page — which is why the
rebuild does not copy its heading pattern.
h2/h3 inherit type here so the existing classes keep doing the styling and
nothing moved a pixel when the tags changed. */
h2, h3 { font-size: inherit; font-weight: inherit; line-height: inherit }
/* the sprite is markup, not picture: it must be in the document for