/* ============================================================ SPACE, RADIUS, ELEVATION, LAYOUT, TARGETS, Z-INDEX, MOTION Everything geometric and temporal. All numeric scales, never t-shirt sizes: t-shirt runs out of room the moment you need a value between two existing ones. 150, 250, 450 are all available. ============================================================ */ :root { /* Space - 4px base. Figma space/400 -> --space-400 */ --space-100: 4px; --space-200: 8px; --space-300: 12px; --space-400: 16px; --space-500: 24px; --space-600: 32px; --space-700: 48px; --space-800: 64px; --space-900: 96px; --space-950: 112px; /* Inter-step. Exists so --layout-section-half is a scale value rather than a number beside the scale. */ --space-1000: 128px; /* Radius - nothing in the brand is sharp. The assignment - which radius a class of thing gets - is a rule, not a value, and lives in guidelines/interaction.html. CS-28. */ --radius-sm: 8px; /* inputs, chips */ --radius-md: 14px; /* fields, tiles */ --radius-lg: 22px; /* cards, panels */ --radius-pill: 999px; /* badges, nav items. ALSO assigned to buttons by CS-28, but production ships radius 0 and the owner has declined to choose. Button therefore reads --button-radius, defaulting to square; set it on :root to flip a page. Deferred: RULINGS 11, WEB-14. */ /* Elevation - Nile-Blue tinted so depth stays on-palette. Never neutral grey, never black. 200 = lifted off the page. 300 = overlaying content. CS-28. */ --elevation-100: 0 1px 2px rgba(22, 45, 84, .06), 0 1px 3px rgba(22, 45, 84, .10); --elevation-200: 0 6px 18px rgba(22, 45, 84, .10); /* hover / lift */ --elevation-300: 0 16px 40px rgba(22, 45, 84, .16); /* dialogs, toasts */ /* Focus ring - a 2px white gap then a 4px navy ring, so it reaches 3:1 on white and on grey. On navy grounds the white ring carries it. Ruled by the build - consistency audit CA-4.7, 2026-09-27. WITHDRAWN, not deleted: 0 0 0 3px var(--color-focus-ring) (navy 14%). */ --elevation-focus: 0 0 0 2px var(--color-base-neutral-0), 0 0 0 4px var(--color-base-navy-700); /* Capsule photo - the one shadow a capsule-cropped photo casts. Ruled by the build - consistency audit CA-6.9, 2026-09-27. Small and <=720 variants, and left/right-casting (CA-6.10), are still owed. */ --elevation-capsule: 0 30px 60px -24px rgba(22, 45, 84, .35); /* Layout - content column, gutter and vertical rhythm, shared by both brands. CS-8. Promoted from 06-evidence/production-site/, whose handoff carries the measurement method and the confidence level behind every value here. */ --layout-max-width: 1280px; /* RATIFIED. Two independent sources agree and one is production: the theme declares it at >=1200px (style.css:1606), nav.css:136 sizes the bar to 1280 to match, and every section of the design file's Home frame is 1280 inside a 1600 canvas. 1120 was evidenced by nothing. This closes the conflict CS-11 handed up. The 143px page margin a 1566 viewport shows is a CONSEQUENCE of this column being centred, not a value. Store the column; never the margin. */ --layout-gutter: 32px; /* RULED. Production's DECLARED padding is Bootstrap's 12px and its RENDERED inset is ~34px per side, so the two disagree and neither is ratifiable. 32px is the nearest step on the kit's own scale (--space-600) and reproduces the measured column to within 5px. One value at all widths: a second gutter at a breakpoint would put a boundary inside the column that CS-11 does not have. */ --layout-section-half: var(--space-950); /* 112px. RE-RATIFIED 2026-09-20. The DESIGN did not change; this number did. Pages built from the kit before that date carry the old 48 and render crowded. Per-section padding-block, so any seam is 2x = 224px ink-to-ink whatever the two grounds either side of it are. Named a half because the seam is the whole. SPACING IS PADDING, NEVER MARGIN. Grounds must meet edge to edge, or the seam stops being 2x the half and the rule this token exists to enforce is gone. FLAT AT ALL WIDTHS. Not fluid, not interpolated across breakpoints - a seam that depends on the viewport is not a rhythm. OPEN, and the reason the four pre-dating pages still carry their own mobile step-downs: a flat 112 puts a 224px seam on a 375px phone, about a third of the viewport. Referred to Design; the likely shape is a companion compact value below 768px rather than a fluid half. Until it rules, do not read those step-downs as this token being per-breakpoint. */ --layout-band-inset: 80px; /* Padding-block INSIDE a full-width grey band. A BAND IS NOT A SECTION - it is a ground change within one, so it takes 80 and not the section's 112. Getting this wrong is what makes a banded section read as two sections. */ --layout-band-lead: var(--space-400); /* 16px. Ruled by the build - consistency audit CA-1.4, 2026-09-27. WITHDRAWN, not deleted: 72px. Heading ink to the band's top edge in a collection (Partners, Accreditations). Carried as padding on the collection, never as margin on the band, for the edge-to-edge reason above. A WALL'S HEADING IS NEVER INSIDE ITS GREY BAND: heading on white, band below it. This is the gap between the two. */ --layout-hero-top: var(--space-800); /* 64px. The hero's top pad, the one section edge exempt from the seam rule (it sits under the header, not against another section). Ruled by the build - consistency audit CA-1.3, 2026-09-27. 48 at <=720 (below). */ /* REMOVED: --layout-section-padding: 72px. Ruled out twice over - it was the only layout value in the kit not on the kit's own space scale (there is no --space-750), and as a per-section pad it yields 144px at a seam, which nothing in either source does. Re-confirmed absent at the 2026-09-20 re-ratification. */ --layout-offset-step: 48px; /* RULED. The step of DELIBERATE MISALIGNMENT. Every intentional off-register in the language is exactly one step: the oval ring sits one step outside its capsule (+43 / +43.5 measured) and row 2's grey seam lands one step off the column centre (-47). Magnitude is the step rather than the raw 43 because the ring was partly occluded where it was measured. THIS IS NOT THE GREY PANEL'S EXTENTS, and WEB-4 has now closed without giving it any. Re-measured from the one 1566 capture: the offset box is anchored to the CONTENT COLUMN - outer edge on the column edge (ratified, exact at both occurrences), inner edge on the column centre line (the hero, the only reading not occluded by artwork). Place a box from the column, never from this token. See guidelines/page-structure.html. */ /* Breakpoints - CS-11. Three boundaries and a floor. VALUES ONLY; what actually reflows at each one is CS-15 and is not here. NAMED AFTER THEIR OWN VALUE, deliberately. A breakpoint token exists so the number appears once and is greppable, not to earn a nickname - and t-shirt names are where this goes wrong fastest: Bootstrap needed an `xxl` the moment a fourth boundary arrived, and production's `.navbar-expand-xl` is a name that no longer describes what it does (see 06-evidence/nav-audit, Finding 5). --breakpoint-1440 can be added later without renaming anything. MIN-WIDTH ONLY. Mobile-first, so every boundary is the width at which the wider treatment STARTS. Production is desktop-first max-width, which is what produced its 1024/1025px muddle - `max-width: 1024px` and `min-width: 1025px` are the same boundary written twice, one of them off by a pixel, and nav.css then disagrees with itself about which. Declared as min-width, that boundary can only be written one way. CANNOT BE USED IN A MEDIA QUERY. `@media (min-width: var(--breakpoint-1024))` does not work - custom properties are not resolved in media conditions. Write the literal and cite the token beside it in a comment: @media (min-width: 1024px) { ... } cite: --breakpoint-1024 The token is the register, and is directly usable in JS, container queries' fallbacks and clamp() math. This is a CSS limitation, not a kit convention; do not invent a preprocessor to route around it. */ --breakpoint-768: 768px; /* phone -> tablet */ --breakpoint-1024: 1024px; /* tablet -> desktop. The collapse point. */ --breakpoint-1200: 1200px; /* desktop -> wide */ /* The narrowest viewport any Solaris surface is designed to hold. Not a breakpoint - nothing changes here, it is the floor below which we do not promise a layout works. Ruled, not ratified: production has no media query below 767px and so evidences no floor at all. 360px is the narrowest mainstream Android; 375px (iPhone SE/mini) sits above it. */ --viewport-min: 360px; /* The floor for anything a thumb has to hit. Every tappable thing, at every breakpoint - not a mobile-only rule. The kit stated none, so a future mobile build could have shipped 32px rows with nothing to point at. Ruled from the mega menu, whose drawer holds every row at or above it. The assignment rule is in guidelines/interaction.html. CS-28. */ --target-min: 44px; /* Stacking. Two rungs, 10 apart so a third can be inserted. sticky the page header and any bar that pins to an edge overlay anything drawn OVER page content from its own root - a modal, a toast, a full-screen drawer A panel nested inside a sticky header needs NEITHER: it inherits that stacking context and orders by source. Reach for overlay only when the overlay is not a child of the thing it belongs to. CS-28. */ --z-sticky: 30; /* @kind other */ --z-overlay: 40; /* @kind other */ /* Motion - restrained. The hover lift is the only signature move. Nothing bounces, nothing loops. Disabled under reduced-motion - and that is a checkable rule, not a note: guidelines/interaction.html states it. Three speeds, and which one a change gets is decided by WHAT is changing, not by how big it feels: fast colour, border, opacity base transform, shadow slow structural retraction - a whole row leaving the viewport slow exists because fast and base are both too snatchy for a 44px strip sliding out of view. Ruled from the mega menu. CS-28. */ --motion-duration-fast: .15s; /* @kind other */ /* colour, border, opacity */ --motion-duration-base: .18s; /* @kind other */ /* transform + shadow */ --motion-duration-slow: .22s; /* @kind other */ /* structural retraction */ --motion-ease: cubic-bezier(.2, .6, .2, 1); /* @kind other */ --motion-lift: -2px; /* buttons */ --motion-lift-card: -3px; /* cards */ /* Hover intent - not durations, DELAYS. These are why a nav feels calm rather than twitchy: a panel waits before believing you meant to hover it, and takes grace before closing when you slide off. Asymmetric on purpose, and the close delay is the larger of the two. Switching between panels while one is already open is INSTANT - the intent cost is for entering, not for moving around inside. CS-28. */ --motion-intent-open: 120ms; /* @kind other */ --motion-intent-close: 260ms; /* @kind other */ } /* ONE STEP AT 720. Ruled by the build - consistency audit CA-1.9 / CA-6.12, 2026-09-27. This replaces "flat at all widths": at phone width a 224 seam was a third of the viewport. Every other breakpoint on section pads goes. The band lead stays 16. Cards: wiki cards 32/24, closing panels 48/24 at this step and no other. */ @media (max-width: 720px) { :root { --layout-section-half: var(--space-800); /* 64, seam 128 */ --layout-band-inset: var(--space-700); /* 48 */ --layout-hero-top: var(--space-700); /* 48 */ } }