/* ===================================================================== MESA QUANTUM — revamp2 · DIRECTION B "PATTERN" · site stylesheet Loaded LAST, after: tokens/palette · tokens/core · themes/direction-b-pattern · motifs/motifs · graphics/graphics · components/components. REWRITTEN 2026-08-27. The theme was inverted at TQ's direction — "the purple sites are too dark, we need lighter color scheme. v2 can be primarily white with more purple sections." Everything below used to be composed for a #110C1D ground (CIE L*4.3). It is now a WHITE site that drops into full-bleed purple bands (--ds-surface-deep, #2A0850, L*10.9). Every rule that assumed the old ground has been re-derived rather than nudged. CONTRACT - Semantic roles only. No raw hex anywhere in this file, and no --mqn-* palette variable. Where a role was missing it is ADDED here (--ds-…), derived from roles the theme already assigns. - Exactly TWO animations ship, both declared in motion-manifest.json: @keyframes ds-lattice-drift (the system's, used once on /capabilities/mag-isr/) and @keyframes mq-hero-cycle (the homepage hero image sequence). Both stop under prefers-reduced-motion. THE IDEA, IN ONE LINE The dot lattice is a sampling grid, not a texture. It appears at three scales and each one is load-bearing: 1. LAYOUT — content sits in a hairline cell lattice (.mq-lattice). 2. GROUND — a dot field over a contour field appears where a field being measured is literally the subject of the copy. 3. HERO — the lattice is laid over real terrain, and the terrain changes underneath it while the grid stays registered. That is the whole argument for Direction B, made once, at the top of the landing page, where it is legible. WHAT THE INVERSION CHANGED, specifically - .ds-section--deep is now USED, not avoided. On the old dark theme it resolved to near-black text on near-black ground; the system has since grown --ds-deep-* roles and restyles a whole band from one class. Every purple band on this site is that class. Nothing is hand-inverted. - .mq-figure / .mq-readout no longer sit on --ds-surface-deep. On white that would be a purple plate under every photograph. - .mq-cell hover no longer swaps --ds-bg for --ds-surface: on this theme both resolve to white, so the hover state would have been invisible. It now moves to the purple tint. - .motif-contour no longer needs the local mask workaround this build reported upstream: motifs.css is mask-driven now and inherits currentColor. Only the framing (size/position/colour) is set here. DELIBERATE DEVIATIONS, recorded here because the guidelines ask for them: - --ds-section-y is retuned. The dark build ran it TIGHT because density read as maturity on a near-black ground. On white, with photographs in play, the same density reads as crowding — TQ: "create good spacing so text doesn't look crowded" — so it is retuned UP instead. §5 explicitly allows retuning this one token. - .ds-nav is shown at every width. The system hides it below 900px and assumes a JS drawer; this build has no JavaScript at all. ===================================================================== */ /* --------------------------------------------------------------- Added roles + one retuned rhythm token. --------------------------------------------------------------- */ :root { --ds-section-y: clamp(4rem, 2.6rem + 4.4vw, 7.5rem); --ds-cell: var(--ds-surface); --ds-cell-hover: var(--ds-bg-alt); --ds-cell-alt: var(--ds-bg-alt); --ds-tick: var(--ds-line-strong); --ds-panel: var(--ds-surface); --ds-readout-grid: color-mix(in srgb, var(--ds-ink) 22%, transparent); --ds-readout-mark: var(--ds-accent); --ds-photo-frame: var(--ds-line); /* Hero scrim roles. Derived from --ds-surface-deep so the hero is the same purple as every other band; the alphas are the contrast mechanism and are argued for in the comment above .mq-hero. */ --ds-hero-veil: color-mix(in srgb, var(--ds-surface-deep) 40%, transparent); --ds-hero-scrim: color-mix(in srgb, var(--ds-surface-deep) 93%, transparent); --ds-hero-scrim-mid: color-mix(in srgb, var(--ds-surface-deep) 64%, transparent); /* A quiet lift for a surface sitting ON a deep band. */ --ds-deep-surface-lift: color-mix(in srgb, var(--ds-deep-ink) 8%, var(--ds-surface-deep)); } /* --------------------------------------------------------------- Shell --------------------------------------------------------------- */ body { display: flex; flex-direction: column; min-height: 100vh; } main { flex: 1 0 auto; } /* --------------------------------------------------------------- Header + nav --------------------------------------------------------------- */ .ds-nav { display: flex; flex-wrap: wrap; row-gap: var(--ds-space-2); } .ds-header__inner { flex-wrap: wrap; row-gap: var(--ds-space-3); padding-block: var(--ds-space-3); } .ds-header__logo img { height: 26px; } .ds-nav a:not(.ds-btn) { letter-spacing: 0.005em; } .ds-nav a[aria-current="page"] { color: var(--ds-ink); text-decoration: underline; text-decoration-color: var(--ds-accent); text-decoration-thickness: 2px; text-underline-offset: 0.5em; } @media (max-width: 899px) { .ds-nav { margin-inline-start: 0; gap: var(--ds-space-4); width: 100%; } .ds-nav .ds-btn { padding: 0.6em 1.1em; } } /* --------------------------------------------------------------- Bands. --alt is the light purple tint; the full-bleed purple band is .ds-section--deep, which the system restyles end to end. --------------------------------------------------------------- */ .mq-band--alt { background: var(--ds-bg-alt); } .mq-band--tight { padding-block: calc(var(--ds-section-y) * 0.66); } .mq-rule { height: 1px; background: var(--ds-line); border: 0; margin: 0; } /* --------------------------------------------------------------- THE HERO Three stills, four seconds each, cross-faded. No JavaScript, no video, no . Composed from the Lockheed teardown in docs/website-revamp/design/hero-media-plan.md, which measured the reference at 12.1 s / six shots / ~2.0 s each and found two defects worth not repeating. Both are answered here: 1. THE REFERENCE HAS NO SCRIM. White type sits directly on footage and drops to ~2.3:1 for a sixth of the loop. Here the type never touches an unscrimmed frame: · Below 1000px the layout SPLITS. The media is a band in flow and the copy sits under it on solid --ds-surface-deep — 16.81:1, exact, with no photograph involved at all. · At and above 1000px the copy sits over the left of the frame behind two stacked scrim layers: a flat veil at 40% of the band colour over the whole image, and a horizontal ramp at 93% over the type column. MEASURED, not asserted. All three frames were rendered at 1440 with the copy hidden, and EVERY PIXEL of the type column (x 80–645, y 110–870) was sampled — the single brightest one, not a region mean, because a region mean is what let the reference site's own failure hide. Worst pixel across the three frames: frame 1 white 14.72:1 · sub 9.67:1 · note 6.88:1 frame 2 white 15.27:1 · sub 10.04:1 · note 7.14:1 frame 3 white 15.14:1 · sub 9.95:1 · note 7.08:1 and against a synthetic PURE WHITE frame — brighter than any photograph can be — 14.48:1 / 9.52:1 / 6.77:1. The floor for all three inks is 4.5:1, so the scrim holds against any frame that could ever be put in this hero, not merely against these. 2. THE REFERENCE'S REDUCED-MOTION RULES NEVER REACH THE HERO, and CSS cannot pause a