/*
LEO base stylesheet
------------------------------------------------------------------
Resets, element defaults, typography, focus styles and a small set
of cross-cutting utilities. Nothing here is a page or a component —
those live in page-shell / roundtable / directory. Everything below
reads from src/styles/tokens.css; there is no literal colour in
this file.
Load order: tokens.css, then base.css, then component/page CSS.
Google Fonts (loaded by the page , not here — see
docs/DESIGN-TOKENS.md for the exact tags):
------------------------------------------------------------------
*/
/* ==========================================================
1. RESET
========================================================== */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
}
img,
picture,
svg {
display: block;
max-width: 100%;
}
svg {
display: block;
}
button {
font: inherit;
cursor: pointer;
background: none;
border: 0;
color: inherit;
}
input,
textarea,
select {
font: inherit;
color: inherit;
}
ul[class],
ol[class] {
list-style: none;
padding: 0;
margin: 0;
}
/* ==========================================================
2. TYPOGRAPHY
========================================================== */
body {
background: var(--surface-alt);
color: var(--text);
font-family: var(--font-body);
font-size: var(--text-base);
line-height: var(--leading-base);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1,
h2,
h3,
h4 {
font-family: var(--font-heading);
font-weight: var(--weight-semibold);
line-height: var(--leading-tight);
margin: 0;
letter-spacing: var(--tracking-tight);
color: var(--text);
}
h5,
h6 {
font-family: var(--font-heading);
font-weight: var(--weight-semibold);
line-height: var(--leading-tight);
margin: 0;
}
p {
margin: 0 0 1em;
}
a {
color: inherit;
}
small {
font-size: var(--text-xs);
}
code,
pre {
font-family: var(--font-mono);
}
/* ==========================================================
3. FOCUS
The prototype used a single `outline: 3px solid var(--sun)`.
Measured against the backgrounds it actually sits on, --sun
alone reaches only ~2.0:1 on --paper, ~2.2:1 on --white and
~2.9:1 on --teal — below the 3:1 non-text-contrast minimum on
every one of them (see docs/DESIGN-TOKENS.md). A two-tone ring
(an inner white line, an outer ink line) guarantees at least
one line reaches 3:1 against any surface the site uses: the ink
line reads clearly on --paper/--white/--mist, and the white line
reads clearly on --teal/--teal-dk. `outline` (kept transparent)
is included purely so Windows/forced-colors mode still paints a
system-coloured ring when box-shadow is stripped.
========================================================== */
:focus-visible {
outline: 3px solid transparent;
outline-offset: 3px;
border-radius: var(--r-xs);
box-shadow:
0 0 0 2px var(--focus-ring-inner),
0 0 0 5px var(--focus-ring);
}
/* ==========================================================
4. UTILITIES
========================================================== */
/* max-width content wrapper used by every section */
.wrap {
max-width: var(--wrap);
margin: 0 auto;
padding: 0 var(--wrap-pad);
}
/* visually hidden but still available to assistive tech */
.sr {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
/* skip-to-content link, off-screen until focused */
.skip {
position: absolute;
left: -999px;
top: 0;
z-index: var(--z-skip);
background: var(--accent);
color: var(--white);
padding: var(--space-5) var(--space-8);
border-radius: 0 0 var(--r-sm) 0;
text-decoration: none;
font-weight: var(--weight-semibold);
}
.skip:focus {
left: 8px;
top: 8px;
}
/* small uppercase kicker used above headings throughout the site */
.label {
font-family: var(--font-heading);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
color: var(--accent);
}
/* the visible "this fact is unknown" chip — see CLAUDE.md, the EMPTY rule.
Never remove, hide or replace this with a guessed value. */
.missing {
font-family: var(--font-heading);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
letter-spacing: .11em;
color: var(--danger);
background: var(--danger-bg);
border: 1px dashed var(--danger-border);
border-radius: var(--r-pill);
padding: 3px var(--space-4);
display: inline-block;
}
/* ==========================================================
5. MOTION
Every transition/animation in the system must respect this.
This is the one place `!important` is allowed.
========================================================== */
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
}
/* ==========================================================
6. PRINT
Targeted at a member profile page: hide chrome and controls,
force legible ink-on-white text, and make sure link text
(a member's printed phone number and email) is never hidden
behind an icon-only or colour-only treatment.
========================================================== */
@media print {
body {
background: var(--white);
color: var(--ink);
font-size: 12pt;
line-height: 1.4;
}
header.site,
footer.site,
nav.main,
.navtoggle,
.skip,
.band,
.searchbar,
.filters,
.chipwrap,
.hero-cta,
.modal-acts,
.closebtn,
.overlay,
.btn,
.indexbox summary,
.sortsel,
.clearbtn {
display: none;
}
.wrap {
max-width: none;
padding: 0;
}
a {
color: var(--ink);
text-decoration: underline;
}
/* print the destination of a link next to its text, so a phone
number or email address is legible even if only the label
("Call Jane", "Email") was shown on screen */
a[href^="tel:"]::after,
a[href^="mailto:"]::after {
content: " (" attr(href) ")";
font-size: 10pt;
font-weight: var(--weight-regular);
color: var(--text-secondary);
}
.modal,
.modal-hd,
.modal-bd,
.panel,
.sidecard,
.card,
.deets {
box-shadow: none;
background: var(--white);
border: 1px solid var(--border);
}
.deet,
.deets,
.sidecard {
break-inside: avoid;
}
.missing {
border: 1px dashed var(--danger);
color: var(--danger);
}
}