/* ═══════════════════════════════════════════════════════════════════════════
SHIFT + ALT EVENTS — DESIGN SYSTEM
v1.0 · The complete system. Drop this in and the brand is installed.
Required in , before this file:
Then:
paper is the default surface
monochrome image mode
Prefix: --sa-* Classes: .sa-*
Full documentation: shift-alt-design-system.html
═══════════════════════════════════════════════════════════════════════════ */
/* ───────────────────────────────────────────────────────────────────────────
1. TOKENS — PRIMITIVE
Raw values. Never reference these directly in components; use the
semantic tokens in §2 so a surface flip re-colours everything for free.
─────────────────────────────────────────────────────────────────────────── */
:root{
/* — Colour · primitives ————————————————————————————————————— */
--sa-color-ink: #000000; /* pure black. never #111, never #0a0a0a */
--sa-color-paper: #F6F6F6; /* the dominant surface — 80% of every screen */
--sa-color-white: #FFFFFF; /* card fills, text on ink */
--sa-color-disabled: #8A8A8A; /* THE ONLY GREY. disabled + placeholder only */
--sa-color-error: #D4736B; /* pastel warm red — the only chromatic colour */
--sa-color-error-strong: #B04A40; /* AA-compliant error text on paper */
--sa-color-error-soft: #E7A9A2; /* AA-compliant error text on ink */
/* — Typeface ————————————————————————————————————————————————— */
--sa-font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
--sa-font-text: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
/* — Type scale ——————————————————————————————————————————————
Note there is NO size below 13px. Bracketed text and eyebrows sit at a
body size by law, so a "micro" size would only invite breakage. */
--sa-size-display-1: clamp(2.75rem, 7.0vw, 6.00rem); /* 44 → 96 */
--sa-size-display-2: clamp(2.25rem, 5.0vw, 4.00rem); /* 36 → 64 */
--sa-size-display-3: clamp(1.75rem, 3.4vw, 2.75rem); /* 28 → 44 */
--sa-size-display-4: clamp(1.375rem, 2.2vw, 1.75rem); /* 22 → 28 */
--sa-size-title: 1.25rem; /* 20 — card + panel headings */
--sa-size-body-lg: 1.0625rem; /* 17 — lede, intro paragraphs */
--sa-size-body: 0.9375rem; /* 15 — default body */
--sa-size-body-sm: 0.8125rem; /* 13 — dense body, meta, eyebrows, buttons */
--sa-weight-light: 300;
--sa-weight-regular: 400;
--sa-weight-medium: 500;
--sa-weight-semi: 600;
--sa-weight-bold: 700;
--sa-leading-display: 1.02;
--sa-leading-tight: 1.25;
--sa-leading-body: 1.60;
--sa-leading-relaxed: 1.75;
--sa-track-display: -0.015em;
--sa-track-body: 0em;
--sa-track-bracket: 0.12em; /* all-caps bracketed text */
--sa-track-button: 0.14em; /* button labels */
--sa-track-meta: 0.10em; /* • separated meta rows */
/* — Space · 4px base ————————————————————————————————————————— */
--sa-space-2xs: 4px;
--sa-space-xs: 8px;
--sa-space-sm: 12px;
--sa-space-md: 16px;
--sa-space-lg: 24px;
--sa-space-xl: 32px;
--sa-space-2xl: 48px;
--sa-space-3xl: 64px;
--sa-space-4xl: 96px;
--sa-space-5xl: 128px;
--sa-space-6xl: 160px;
--sa-gutter: 28px; /* the house gap. grid gaps, card padding */
--sa-measure: 64ch; /* max line length for body copy */
--sa-measure-tight: 46ch; /* max line length for a lede */
--sa-container: 1240px;
--sa-container-wide:1600px;
/* — Line ————————————————————————————————————————————————————
Hairlines are pure ink or pure white. There is no grey line in this system. */
--sa-line-width: 1px;
--sa-line-width-heavy: 2px;
/* — Elevation · the hard shadow —————————————————————————————— */
--sa-card-border-width: 5px; /* the elevated card's heavy stroke. NOT a hairline. */
--sa-shadow-offset: 10px;
--sa-shadow-offset-sm: 6px;
--sa-shadow-offset-lg: 16px;
/* — Radius · non-negotiable ——————————————————————————————————— */
--sa-radius: 0;
/* — Motion ——————————————————————————————————————————————————— */
--sa-duration-fast: 120ms;
--sa-duration: 180ms;
--sa-duration-slow: 320ms;
--sa-ease: cubic-bezier(0.2, 0, 0, 1);
/* — Control sizing ———————————————————————————————————————————— */
--sa-control-height-sm: 36px;
--sa-control-height: 44px; /* minimum accessible target */
--sa-control-height-lg: 52px;
--sa-control-pad-x: 24px;
--sa-icon-size: 20px;
--sa-icon-stroke: 1px; /* hairline icons. never heavier */
--sa-z-sticky: 100;
--sa-z-overlay: 900;
--sa-z-modal: 1000;
}
/* ───────────────────────────────────────────────────────────────────────────
2. TOKENS — SEMANTIC & SURFACE
Every component reads these. Setting data-surface on ANY element re-paints
its whole subtree — that is how the 80 / 20 paper-to-ink ratio is built.
─────────────────────────────────────────────────────────────────────────── */
:root,
[data-surface="paper"]{
--sa-bg: var(--sa-color-paper);
--sa-fg: var(--sa-color-ink);
--sa-line: var(--sa-color-ink);
--sa-shadow: var(--sa-color-ink);
--sa-fill: var(--sa-color-ink); /* filled control background */
--sa-on-fill: var(--sa-color-white); /* text on a filled control */
--sa-error-text: var(--sa-color-error-strong);
--sa-error-line: var(--sa-color-error);
--sa-disabled-fg: var(--sa-color-disabled);
--sa-elevation-ok: 1; /* hard shadow allowed here */
}
[data-surface="white"]{
--sa-bg: var(--sa-color-white);
--sa-fg: var(--sa-color-ink);
--sa-line: var(--sa-color-ink);
--sa-shadow: var(--sa-color-ink);
--sa-fill: var(--sa-color-ink);
--sa-on-fill: var(--sa-color-white);
--sa-error-text: var(--sa-color-error-strong);
--sa-error-line: var(--sa-color-error);
--sa-disabled-fg: var(--sa-color-disabled);
--sa-elevation-ok: 1;
}
[data-surface="ink"]{
--sa-bg: var(--sa-color-ink);
--sa-fg: var(--sa-color-white);
--sa-line: var(--sa-color-white);
--sa-shadow: transparent; /* hard shadow is void on ink */
--sa-fill: var(--sa-color-white);
--sa-on-fill: var(--sa-color-ink);
--sa-error-text: var(--sa-color-error-soft);
--sa-error-line: var(--sa-color-error);
--sa-disabled-fg: var(--sa-color-disabled);
--sa-elevation-ok: 0;
}
[data-surface]{ background: var(--sa-bg); color: var(--sa-fg); }
/* ───────────────────────────────────────────────────────────────────────────
3. RESET
─────────────────────────────────────────────────────────────────────────── */
*, *::before, *::after{ box-sizing: border-box; border-radius: var(--sa-radius); }
html{ -webkit-text-size-adjust: 100%; }
body{
margin: 0;
background: var(--sa-bg);
color: var(--sa-fg);
font-family: var(--sa-font-text);
font-size: var(--sa-size-body);
font-weight: var(--sa-weight-regular);
line-height: var(--sa-leading-body);
letter-spacing: var(--sa-track-body);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img, svg, video{ display: block; max-width: 100%; }
img{ border: 0; } /* images never carry a border */
button, input, select, textarea{ font: inherit; color: inherit; }
h1,h2,h3,h4,h5,h6,p,figure,blockquote,ul,ol,dl{ margin: 0; }
ul,ol{ padding: 0; list-style: none; }
table{ border-collapse: collapse; width: 100%; }
hr{ border: 0; border-top: var(--sa-line-width) solid var(--sa-line); margin: 0; }
::selection{ background: var(--sa-color-ink); color: var(--sa-color-paper); }
[data-surface="ink"] ::selection{ background: var(--sa-color-white); color: var(--sa-color-ink); }
/* Focus — the one place a 2px line is allowed, for accessibility. */
:focus-visible{
outline: var(--sa-line-width-heavy) solid var(--sa-fg);
outline-offset: 3px;
}
:focus:not(:focus-visible){ outline: none; }
/* ───────────────────────────────────────────────────────────────────────────
4. TYPOGRAPHY
─────────────────────────────────────────────────────────────────────────── */
/* The signature heading. First word roman, remainder italic. Max three words. */
.sa-display-1, .sa-display-2, .sa-display-3, .sa-display-4{
font-family: var(--sa-font-display);
font-weight: var(--sa-weight-bold);
line-height: var(--sa-leading-display);
letter-spacing: var(--sa-track-display);
text-wrap: balance;
}
.sa-display-1{ font-size: var(--sa-size-display-1); }
.sa-display-2{ font-size: var(--sa-size-display-2); }
.sa-display-3{ font-size: var(--sa-size-display-3); line-height: var(--sa-leading-tight); }
.sa-display-4{ font-size: var(--sa-size-display-4); line-height: var(--sa-leading-tight); }
/* The italic half of a heading. Wrap the SECOND part only. */
.sa-alt{ font-style: italic; }
/* Lighter italic — for names and card titles, where the qualifier recedes. */
.sa-alt-light{ font-style: italic; font-weight: var(--sa-weight-regular); }
.sa-title{
font-family: var(--sa-font-display);
font-size: var(--sa-size-title);
font-weight: var(--sa-weight-bold);
line-height: var(--sa-leading-tight);
letter-spacing: var(--sa-track-display);
}
.sa-lede{
font-size: var(--sa-size-body-lg);
line-height: var(--sa-leading-relaxed);
max-width: var(--sa-measure-tight);
}
.sa-body{ font-size: var(--sa-size-body); line-height: var(--sa-leading-body); max-width: var(--sa-measure); }
.sa-body-sm{ font-size: var(--sa-size-body-sm); line-height: var(--sa-leading-body); max-width: var(--sa-measure); }
.sa-body + .sa-body, .sa-body-sm + .sa-body-sm{ margin-top: var(--sa-space-md); }
/* ───────────────────────────────────────────────────────────────────────────
5. BRACKETS — the structural device
DM Sans only. Never italic. Never bold. Never more than three words.
Always uppercase inside the brackets. Always a body size.
─────────────────────────────────────────────────────────────────────────── */
.sa-bracket{
font-family: var(--sa-font-text);
font-size: inherit; /* inherits the stream it sits in */
font-weight: var(--sa-weight-regular);
font-style: normal;
text-transform: uppercase;
letter-spacing: var(--sa-track-bracket);
white-space: nowrap;
}
.sa-bracket::before{ content: "["; }
.sa-bracket::after{ content: "]"; }
/* Standalone eyebrow — a bracket with air around it. Body-sm is its floor. */
.sa-eyebrow{
font-family: var(--sa-font-text);
font-size: var(--sa-size-body-sm);
font-weight: var(--sa-weight-regular);
font-style: normal;
text-transform: uppercase;
letter-spacing: var(--sa-track-bracket);
display: block;
}
.sa-eyebrow::before{ content: "["; }
.sa-eyebrow::after{ content: "]"; }
.sa-eyebrow--center{ text-align: center; }
/* ───────────────────────────────────────────────────────────────────────────
6. META ROW — the • separator
Max three items. Max three words each. Double-space either side.
─────────────────────────────────────────────────────────────────────────── */
.sa-meta{
display: flex;
flex-wrap: wrap;
align-items: center;
font-family: var(--sa-font-text);
font-size: var(--sa-size-body-sm);
letter-spacing: var(--sa-track-meta);
line-height: 1.4;
}
.sa-meta > * + *::before{
content: "•";
display: inline-block;
margin: 0 0.62em; /* the optical equivalent of two spaces either side */
}
/* ───────────────────────────────────────────────────────────────────────────
7. HAIRLINES & GRID
─────────────────────────────────────────────────────────────────────────── */
.sa-rule{ border-top: var(--sa-line-width) solid var(--sa-line); }
.sa-rule-b{ border-bottom: var(--sa-line-width) solid var(--sa-line); }
/* The page frame — two verticals holding the content. */
.sa-frame{
border-left: var(--sa-line-width) solid var(--sa-line);
border-right: var(--sa-line-width) solid var(--sa-line);
max-width: var(--sa-container-wide);
margin-inline: auto;
}
.sa-container{
max-width: var(--sa-container);
margin-inline: auto;
padding-inline: var(--sa-gutter);
}
/* Section rhythm — a hairline top, generous air, never a line between every child */
.sa-section{
border-top: var(--sa-line-width) solid var(--sa-line);
padding-block: var(--sa-space-4xl);
}
.sa-section--tight{ padding-block: var(--sa-space-2xl); }
/* Column grid */
.sa-grid{ display: grid; gap: var(--sa-gutter); }
.sa-grid--2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.sa-grid--3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.sa-grid--4{ grid-template-columns: repeat(4, minmax(0,1fr)); }
.sa-grid--auto{ grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); }
@media (max-width: 900px){
.sa-grid--3, .sa-grid--4{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 560px){
.sa-grid--2, .sa-grid--3, .sa-grid--4{ grid-template-columns: minmax(0,1fr); }
}
/* ───────────────────────────────────────────────────────────────────────────
8. ELEVATION — the hard shadow
A 5px-bordered card with a solid ink block offset down-and-right. On hover
the card travels into its own shadow. Paper/white surfaces only.
─────────────────────────────────────────────────────────────────────────── */
.sa-elevated{
--_o: var(--sa-shadow-offset);
position: relative;
background: var(--sa-color-white);
color: var(--sa-color-ink);
border: var(--sa-card-border-width) solid var(--sa-color-ink);
box-shadow: var(--_o) var(--_o) 0 0 var(--sa-shadow);
margin: 0 var(--_o) var(--_o) 0; /* reserve the shadow's footprint */
transition:
transform var(--sa-duration) var(--sa-ease),
box-shadow var(--sa-duration) var(--sa-ease);
}
.sa-elevated--sm{ --_o: var(--sa-shadow-offset-sm); }
.sa-elevated--lg{ --_o: var(--sa-shadow-offset-lg); }
.sa-elevated--interactive:hover,
.sa-elevated--interactive:focus-within{
transform: translate(var(--_o), var(--_o));
box-shadow: 0 0 0 0 var(--sa-shadow);
}
/* Void on ink — a white shadow on black is never correct. The card keeps its
stroke, drops the shadow, and sits transparent on the black surface. */
[data-surface="ink"] .sa-elevated{
background: transparent;
color: var(--sa-color-white);
border-color: var(--sa-color-white);
box-shadow: none;
margin: 0;
}
[data-surface="ink"] .sa-elevated--interactive:hover{ transform: none; }
/* ───────────────────────────────────────────────────────────────────────────
9. BUTTONS
DM Sans, uppercase, always. No shadow. No colour change on hover.
The ONLY hover affordance is the brackets appearing around the label.
─────────────────────────────────────────────────────────────────────────── */
.sa-btn{
--_bg: var(--sa-fill);
--_fg: var(--sa-on-fill);
--_bd: var(--sa-fill);
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--sa-space-xs);
height: var(--sa-control-height-lg);
padding-inline: var(--sa-control-pad-x);
background: var(--_bg);
color: var(--_fg);
border: var(--sa-line-width) solid var(--_bd);
font-family: var(--sa-font-text);
font-size: var(--sa-size-body-sm);
font-weight: var(--sa-weight-medium);
font-style: normal;
text-transform: uppercase;
letter-spacing: var(--sa-track-button);
line-height: 1;
text-decoration: none;
cursor: pointer;
box-shadow: none; /* buttons never take the hard shadow */
-webkit-appearance: none;
appearance: none;
}
/* Bracket reveal. Rendered at all times at zero opacity so nothing shifts. */
.sa-btn__label{ display: inline-flex; align-items: center; gap: 0; }
.sa-btn__label::before,
.sa-btn__label::after{
opacity: 0;
transition: opacity var(--sa-duration) var(--sa-ease);
display: inline-block;
width: 0.62em;
text-align: center;
}
.sa-btn__label::before{ content: "["; }
.sa-btn__label::after{ content: "]"; }
.sa-btn:hover .sa-btn__label::before,
.sa-btn:hover .sa-btn__label::after,
.sa-btn:focus-visible .sa-btn__label::before,
.sa-btn:focus-visible .sa-btn__label::after{ opacity: 1; }
.sa-btn--ghost{ --_bg: transparent; --_fg: var(--sa-fg); --_bd: var(--sa-line); }
.sa-btn--bare { --_bg: transparent; --_fg: var(--sa-fg); --_bd: transparent; padding-inline: 0; }
.sa-btn--md{ height: var(--sa-control-height); padding-inline: var(--sa-space-lg); }
.sa-btn--sm{ height: var(--sa-control-height-sm); padding-inline: var(--sa-space-md); }
.sa-btn--block{ display: flex; width: 100%; }
.sa-btn[disabled], .sa-btn[aria-disabled="true"]{
--_bg: transparent;
--_fg: var(--sa-disabled-fg);
--_bd: var(--sa-disabled-fg);
cursor: not-allowed;
pointer-events: none;
}
.sa-btn__icon{ width: var(--sa-icon-size); height: var(--sa-icon-size); flex: none; }
/* Icon-only control — the [×] close, the arrow, the menu toggle. */
.sa-icon-btn{
display: inline-flex; align-items: center; justify-content: center;
width: var(--sa-control-height); height: var(--sa-control-height);
background: transparent; color: var(--sa-fg);
border: 0; cursor: pointer;
}
.sa-icon-btn::before{ content: "["; opacity: 0; transition: opacity var(--sa-duration) var(--sa-ease); }
.sa-icon-btn::after { content: "]"; opacity: 0; transition: opacity var(--sa-duration) var(--sa-ease); }
.sa-icon-btn:hover::before, .sa-icon-btn:hover::after,
.sa-icon-btn:focus-visible::before, .sa-icon-btn:focus-visible::after{ opacity: 1; }
/* ───────────────────────────────────────────────────────────────────────────
10. INLINE TEXT LINK
Only ever inline in a paragraph. Same size, weight and family as the copy
around it. Bracketed, uppercase, with a hairline arrow inside the bracket.
─────────────────────────────────────────────────────────────────────────── */
.sa-link{
font-family: var(--sa-font-text);
font-size: inherit;
font-weight: inherit;
font-style: normal;
text-transform: uppercase;
letter-spacing: var(--sa-track-bracket);
color: inherit;
text-decoration: none;
white-space: nowrap;
}
.sa-link::before{ content: "["; }
.sa-link::after{ content: "]"; }
.sa-link .sa-link__arrow{
width: 0.85em; height: 0.85em; display: inline-block;
vertical-align: -0.05em; margin-left: 0.15em;
transition: transform var(--sa-duration) var(--sa-ease);
}
.sa-link:hover{ text-decoration: underline; text-underline-offset: 0.25em; text-decoration-thickness: 1px; }
.sa-link:hover .sa-link__arrow{ transform: translate(0.12em, -0.12em); }
/* ───────────────────────────────────────────────────────────────────────────
11. ICONS — hairline, currentColor, never filled
─────────────────────────────────────────────────────────────────────────── */
.sa-icon{
width: var(--sa-icon-size);
height: var(--sa-icon-size);
flex: none;
fill: none;
stroke: currentColor;
stroke-width: var(--sa-icon-stroke);
stroke-linecap: butt;
stroke-linejoin: miter;
vector-effect: non-scaling-stroke;
}
.sa-icon--lg{ --sa-icon-size: 28px; }
.sa-icon--sm{ --sa-icon-size: 16px; }
/* ───────────────────────────────────────────────────────────────────────────
12. IMAGERY
No borders. No radius. Colour by default. Monochrome is an all-or-nothing
mode set on an ancestor; hover restores colour.
─────────────────────────────────────────────────────────────────────────── */
.sa-media{ position: relative; overflow: hidden; background: var(--sa-color-paper); }
.sa-media > img, .sa-media > svg{ width: 100%; height: 100%; object-fit: cover; display: block; }
.sa-media--portrait{ aspect-ratio: 3 / 4; }
.sa-media--square{ aspect-ratio: 1 / 1; }
.sa-media--landscape{ aspect-ratio: 4 / 3; }
.sa-media--wide{ aspect-ratio: 16 / 9; }
[data-images="mono"] .sa-media > img,
[data-images="mono"] .sa-media > svg{
filter: grayscale(1) contrast(1.05);
transition: filter var(--sa-duration-slow) var(--sa-ease);
}
[data-images="mono"] .sa-media:hover > img,
[data-images="mono"] .sa-media:hover > svg,
[data-images="mono"] a:hover .sa-media > img,
[data-images="mono"] a:hover .sa-media > svg,
[data-images="mono"] .sa-elevated:hover .sa-media > img,
[data-images="mono"] .sa-elevated:hover .sa-media > svg{ filter: grayscale(0); }
/* ───────────────────────────────────────────────────────────────────────────
13. FORMS
Underline fields, no boxes. Grey exists here and nowhere else.
─────────────────────────────────────────────────────────────────────────── */
.sa-field{ display: block; }
.sa-field + .sa-field{ margin-top: var(--sa-space-xl); }
.sa-label{
display: block;
font-family: var(--sa-font-text);
font-size: var(--sa-size-body-sm);
text-transform: uppercase;
letter-spacing: var(--sa-track-bracket);
margin-bottom: var(--sa-space-xs);
}
.sa-label::before{ content: "["; }
.sa-label::after{ content: "]"; }
.sa-label .sa-required{ color: var(--sa-error-text); margin-left: 0.35em; }
.sa-input, .sa-textarea, .sa-select{
display: block;
width: 100%;
height: var(--sa-control-height);
padding: 0 0 var(--sa-space-xs);
background: transparent;
color: var(--sa-fg);
border: 0;
border-bottom: var(--sa-line-width) solid var(--sa-line);
font-family: var(--sa-font-text);
font-size: var(--sa-size-body);
-webkit-appearance: none;
appearance: none;
transition: border-color var(--sa-duration) var(--sa-ease),
border-width var(--sa-duration) var(--sa-ease);
}
.sa-textarea{ height: auto; min-height: 120px; padding-top: var(--sa-space-xs); resize: vertical; }
.sa-select{
background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
linear-gradient(135deg, currentColor 50%, transparent 50%);
background-position: calc(100% - 9px) 18px, calc(100% - 5px) 18px;
background-size: 4px 4px, 4px 4px;
background-repeat: no-repeat;
padding-right: var(--sa-space-lg);
}
.sa-input::placeholder, .sa-textarea::placeholder{ color: var(--sa-disabled-fg); opacity: 1; }
.sa-input:focus, .sa-textarea:focus, .sa-select:focus{
outline: none;
border-bottom-width: var(--sa-line-width-heavy);
}
.sa-input:focus-visible, .sa-textarea:focus-visible, .sa-select:focus-visible{
outline: none;
border-bottom-width: var(--sa-line-width-heavy);
}
.sa-input[disabled], .sa-textarea[disabled], .sa-select[disabled]{
color: var(--sa-disabled-fg);
border-bottom-color: var(--sa-disabled-fg);
cursor: not-allowed;
}
.sa-help{
display: block;
margin-top: var(--sa-space-xs);
font-size: var(--sa-size-body-sm);
color: var(--sa-disabled-fg);
}
/* Error — the single chromatic moment in the system. */
.sa-field[data-invalid] .sa-input,
.sa-field[data-invalid] .sa-textarea,
.sa-field[data-invalid] .sa-select{ border-bottom-color: var(--sa-error-line); border-bottom-width: var(--sa-line-width-heavy); }
.sa-error{
display: block;
margin-top: var(--sa-space-xs);
font-size: var(--sa-size-body-sm);
color: var(--sa-error-text);
}
/* Checkbox + radio — hairline squares. Radios are squares too; nothing is round. */
.sa-check{ display: flex; align-items: flex-start; gap: var(--sa-space-sm); cursor: pointer; font-size: var(--sa-size-body); }
.sa-check + .sa-check{ margin-top: var(--sa-space-sm); }
.sa-check input{
-webkit-appearance: none; appearance: none;
width: 16px; height: 16px; margin: 4px 0 0; flex: none;
border: var(--sa-line-width) solid var(--sa-line);
background: transparent; cursor: pointer;
display: grid; place-content: center;
}
.sa-check input::after{
content: ""; width: 8px; height: 8px;
background: var(--sa-fg); transform: scale(0);
transition: transform var(--sa-duration-fast) var(--sa-ease);
}
.sa-check input:checked::after{ transform: scale(1); }
.sa-check input[disabled]{ border-color: var(--sa-disabled-fg); cursor: not-allowed; }
/* Switch — a hairline track with a solid ink knob. Still square. */
.sa-switch{ display: inline-flex; align-items: center; gap: var(--sa-space-sm); cursor: pointer; }
.sa-switch input{
-webkit-appearance: none; appearance: none;
width: 44px; height: 22px; margin: 0;
border: var(--sa-line-width) solid var(--sa-line);
background: transparent; cursor: pointer; position: relative;
}
.sa-switch input::after{
content: ""; position: absolute; inset: 3px auto 3px 3px;
width: 14px; background: var(--sa-fg);
transition: transform var(--sa-duration) var(--sa-ease);
}
.sa-switch input:checked::after{ transform: translateX(22px); }
/* ───────────────────────────────────────────────────────────────────────────
14. FEEDBACK
Success and neutral are monochrome. Only error is chromatic.
─────────────────────────────────────────────────────────────────────────── */
.sa-notice{
display: flex; gap: var(--sa-space-md); align-items: flex-start;
padding: var(--sa-space-md) var(--sa-space-lg);
border: var(--sa-line-width) solid var(--sa-line);
font-size: var(--sa-size-body);
}
.sa-notice--error{ border-color: var(--sa-error-line); color: var(--sa-error-text); }
.sa-notice--error .sa-icon{ stroke: var(--sa-error-line); }
.sa-notice__title{ text-transform: uppercase; letter-spacing: var(--sa-track-bracket); font-size: var(--sa-size-body-sm); }
.sa-notice__title::before{ content: "["; }
.sa-notice__title::after{ content: "]"; }
.sa-empty{ text-align: center; padding: var(--sa-space-4xl) var(--sa-space-lg); }
.sa-empty .sa-eyebrow{ margin-bottom: var(--sa-space-md); }
/* Progress / loading — a hairline that fills with ink. */
.sa-progress{ height: 2px; background: transparent; border-bottom: var(--sa-line-width) solid var(--sa-line); position: relative; overflow: hidden; }
.sa-progress::after{
content:""; position:absolute; inset:0 auto 0 0; width:40%;
background: var(--sa-fg);
animation: sa-slide 1.4s var(--sa-ease) infinite;
}
@keyframes sa-slide{ 0%{ transform: translateX(-100%);} 100%{ transform: translateX(350%);} }
.sa-skeleton{ background: var(--sa-color-disabled); opacity: .18; }
/* ───────────────────────────────────────────────────────────────────────────
15. NAVIGATION
─────────────────────────────────────────────────────────────────────────── */
.sa-masthead{
position: sticky; top: 0; z-index: var(--sa-z-sticky);
background: var(--sa-bg);
border-bottom: var(--sa-line-width) solid var(--sa-line);
display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
gap: var(--sa-space-md);
padding: var(--sa-space-md) var(--sa-gutter);
}
.sa-masthead__mark{
font-family: var(--sa-font-display);
font-size: var(--sa-size-display-4);
font-weight: var(--sa-weight-medium);
text-align: center; line-height: 1;
}
.sa-masthead__end{ display: flex; justify-content: flex-end; }
.sa-tabs{ display: flex; gap: var(--sa-space-xl); border-bottom: var(--sa-line-width) solid var(--sa-line); }
.sa-tab{
background: none; border: 0; cursor: pointer;
padding: var(--sa-space-sm) 0;
font-size: var(--sa-size-body-sm);
text-transform: uppercase; letter-spacing: var(--sa-track-bracket);
border-bottom: var(--sa-line-width-heavy) solid transparent;
margin-bottom: calc(var(--sa-line-width) * -1);
}
.sa-tab[aria-selected="true"]{ border-bottom-color: var(--sa-fg); }
/* same zero-shift bracket reveal as buttons */
.sa-tab::before, .sa-tab::after{
opacity: 0; display: inline-block; width: 0.62em; text-align: center;
transition: opacity var(--sa-duration) var(--sa-ease);
}
.sa-tab::before{ content: "["; } .sa-tab::after{ content: "]"; }
.sa-tab:hover::before, .sa-tab:hover::after,
.sa-tab:focus-visible::before, .sa-tab:focus-visible::after,
.sa-tab[aria-selected="true"]::before, .sa-tab[aria-selected="true"]::after{ opacity: 1; }
.sa-breadcrumb{ display: flex; align-items: center; font-size: var(--sa-size-body-sm); letter-spacing: var(--sa-track-meta); }
.sa-breadcrumb > * + *::before{ content: "/"; margin: 0 0.6em; }
.sa-pagination{ display: flex; align-items: center; gap: var(--sa-space-xs); }
.sa-page-link{
min-width: var(--sa-control-height-sm); height: var(--sa-control-height-sm);
display: inline-flex; align-items: center; justify-content: center;
padding-inline: var(--sa-space-sm);
border: var(--sa-line-width) solid transparent;
font-size: var(--sa-size-body-sm); letter-spacing: var(--sa-track-meta);
text-decoration: none; color: inherit; background: none; cursor: pointer;
}
.sa-page-link[aria-current="page"]{ background: var(--sa-fill); color: var(--sa-on-fill); }
/* ───────────────────────────────────────────────────────────────────────────
16. OVERLAY
─────────────────────────────────────────────────────────────────────────── */
.sa-overlay{
position: fixed; inset: 0; z-index: var(--sa-z-overlay);
background: rgba(0,0,0,.72);
display: grid; place-items: center; padding: var(--sa-gutter);
}
.sa-modal{
position: relative; z-index: var(--sa-z-modal);
width: min(560px, 100%);
background: var(--sa-color-paper); color: var(--sa-color-ink);
border: var(--sa-line-width) solid var(--sa-color-ink);
padding: var(--sa-space-2xl);
}
.sa-modal__close{ position: absolute; top: var(--sa-space-sm); right: var(--sa-space-sm); }
/* ───────────────────────────────────────────────────────────────────────────
17. DATA
─────────────────────────────────────────────────────────────────────────── */
.sa-table{ font-size: var(--sa-size-body-sm); }
.sa-table th{
text-align: left; font-weight: var(--sa-weight-regular);
text-transform: uppercase; letter-spacing: var(--sa-track-bracket);
padding: var(--sa-space-sm) var(--sa-space-md) var(--sa-space-sm) 0;
border-bottom: var(--sa-line-width) solid var(--sa-line);
white-space: nowrap;
}
.sa-table td{
padding: var(--sa-space-md) var(--sa-space-md) var(--sa-space-md) 0;
border-bottom: var(--sa-line-width) solid var(--sa-line);
vertical-align: top;
}
.sa-table tr:last-child td{ border-bottom: 0; }
.sa-stat__value{
font-family: var(--sa-font-display);
font-size: var(--sa-size-display-2);
font-weight: var(--sa-weight-bold);
line-height: 1;
letter-spacing: var(--sa-track-display);
}
.sa-stat__label{ margin-top: var(--sa-space-sm); font-size: var(--sa-size-body-sm); text-transform: uppercase; letter-spacing: var(--sa-track-bracket); }
.sa-stat__label::before{ content:"["; } .sa-stat__label::after{ content:"]"; }
.sa-accordion{ border-top: var(--sa-line-width) solid var(--sa-line); }
.sa-accordion details{ border-bottom: var(--sa-line-width) solid var(--sa-line); }
.sa-accordion summary{
list-style: none; cursor: pointer;
padding: var(--sa-space-lg) 0;
display: flex; justify-content: space-between; align-items: center; gap: var(--sa-space-md);
font-family: var(--sa-font-display); font-size: var(--sa-size-title); font-weight: var(--sa-weight-bold);
}
.sa-accordion summary::-webkit-details-marker{ display: none; }
.sa-accordion summary .sa-icon{ transition: transform var(--sa-duration) var(--sa-ease); }
.sa-accordion details[open] summary .sa-icon{ transform: rotate(45deg); }
.sa-accordion__body{ padding-bottom: var(--sa-space-lg); }
.sa-quote{
font-family: var(--sa-font-display);
font-size: var(--sa-size-display-3);
font-weight: var(--sa-weight-regular);
font-style: italic;
line-height: var(--sa-leading-tight);
letter-spacing: var(--sa-track-display);
max-width: 24ch;
}
/* ───────────────────────────────────────────────────────────────────────────
18. PERSON CARD — the reference composition
─────────────────────────────────────────────────────────────────────────── */
.sa-person{ display: block; text-decoration: none; padding: var(--sa-space-lg); }
.sa-person__name{
font-family: var(--sa-font-display);
font-size: var(--sa-size-title);
font-weight: var(--sa-weight-bold);
line-height: var(--sa-leading-tight);
margin-bottom: var(--sa-space-md);
}
.sa-person__foot{
display: flex; align-items: center; justify-content: space-between; gap: var(--sa-space-md);
margin-top: var(--sa-space-md);
}
/* ───────────────────────────────────────────────────────────────────────────
19. UTILITIES
─────────────────────────────────────────────────────────────────────────── */
.sa-visually-hidden{
position: absolute; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.sa-skip-link{
position: absolute; left: var(--sa-space-md); top: var(--sa-space-md);
transform: translateY(-200%);
background: var(--sa-fill); color: var(--sa-on-fill);
padding: var(--sa-space-sm) var(--sa-space-md);
font-size: var(--sa-size-body-sm); text-transform: uppercase;
letter-spacing: var(--sa-track-bracket); text-decoration: none;
z-index: calc(var(--sa-z-modal) + 1);
}
.sa-skip-link:focus{ transform: translateY(0); }
/* ───────────────────────────────────────────────────────────────────────────
20. MOTION PREFERENCE
─────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
*, *::before, *::after{
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
scroll-behavior: auto !important;
}
}
/* ───────────────────────────────────────────────────────────────────────────
21. PRINT
─────────────────────────────────────────────────────────────────────────── */
@media print{
[data-surface]{ background: #fff !important; color: #000 !important; }
.sa-elevated{ box-shadow: none !important; margin: 0 !important; }
.sa-masthead{ position: static; }
[data-images="mono"] .sa-media > img{ filter: grayscale(1); }
}