/* Lenora brand: colour and type, in one file.
Taken from version 22 (v-n), which Jared chose on 02/11/2026. Link this
before a version's own stylesheet and the version inherits the palette and
the three faces.
Three faces, one job each:
Figtree headings and the wordmark
Inter body copy
IBM Plex Mono kickers and small labels, uppercase, wide tracking
The accent is the only colour that moves. Everything else is shared, so
changing the accent never changes the contrast of body text.
Both token names are published. --sc-* is canonical. The shorter names
(--canvas, --ink, --accent ...) are aliases, so a version written against
either set works without edits. */
/* The faces are served from this site, not from Google.
v-story/privacy says "Every file the page loads comes from this domain,
so there is no ... visit to an overseas service". A Google Fonts link
would make that false, so the Latin subsets of all three faces sit in
theme/fonts/ (16 files, 416 KB) and are declared here. SIL Open Font
Licence 1.1: Figtree, Inter and IBM Plex Mono. */
@font-face {
font-family: 'Figtree';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url("fonts/Figtree-300-latin-ext.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Figtree';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url("fonts/Figtree-300-latin.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Figtree';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("fonts/Figtree-400-latin-ext.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Figtree';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("fonts/Figtree-400-latin.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Figtree';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("fonts/Figtree-500-latin-ext.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Figtree';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("fonts/Figtree-500-latin.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Figtree';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("fonts/Figtree-600-latin-ext.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Figtree';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("fonts/Figtree-600-latin.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("fonts/IBMPlexMono-400-latin-ext.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("fonts/IBMPlexMono-400-latin.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("fonts/IBMPlexMono-500-latin-ext.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("fonts/IBMPlexMono-500-latin.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("fonts/Inter-400-latin-ext.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("fonts/Inter-400-latin.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("fonts/Inter-500-latin-ext.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("fonts/Inter-500-latin.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
/* Type */
--sc-font-display: "Figtree", system-ui, sans-serif;
--sc-font-text: "Inter", system-ui, sans-serif;
--sc-font-mono: "IBM Plex Mono", ui-monospace, monospace;
/* Paper and ink */
--sc-canvas: #F5F9FC;
--sc-surface: #FFFFFF;
--sc-ink: #1A384F;
--sc-ink-soft: #596F80;
--paper-line: #D9DFE4;
--paper-line-2: #BFC9D1;
/* The one colour that moves. 03/11/2026: Jared found #1a56db too harsh and
pointed at the steel blue of version 22. His screen shows #2671A5 as
#22669B (brief.md D31 measured the same shift), so the code value is
#2671A5. 4.97:1 on --sc-canvas, 5.27:1 on white and for white on it, so
both clear WCAG AA. Before 03/11/2026 this was #1a56db (D31). */
--sc-accent: #2671A5;
--sc-accent-ink: #FFFFFF;
/* Aliases for versions that use the short names. */
--canvas: var(--sc-canvas);
--surface: var(--sc-surface);
--soft: #EAF1F5;
--ink: var(--sc-ink);
--muted: var(--sc-ink-soft);
--line: var(--paper-line-2);
--line-soft: var(--paper-line);
--accent: var(--sc-accent);
--accent-ink: var(--sc-accent-ink);
color-scheme: light;
font-synthesis: none;
}
/* Twenty-four accents, generated, not picked. Holding lightness and chroma
fixed in OKLCH and walking the hue circle in 15 degree steps keeps every
accent at the same apparent weight. Worst measured ratio on this paper:
4.65 to 1, against a 4.5 floor. Do not hand-edit: regenerate. */
[data-theme="cobalt"] { --sc-accent: #426BA9; } /* hue 258.4, 5.09:1 */
[data-theme="indigo"] { --sc-accent: #5765AA; } /* hue 273.4, 5.17:1 */
[data-theme="violet"] { --sc-accent: #695FA6; } /* hue 288.4, 5.25:1 */
[data-theme="amethyst"] { --sc-accent: #785A9E; } /* hue 303.4, 5.30:1 */
[data-theme="orchid"] { --sc-accent: #855593; } /* hue 318.4, 5.35:1 */
[data-theme="magenta"] { --sc-accent: #905186; } /* hue 333.4, 5.36:1 */
[data-theme="rose"] { --sc-accent: #984F76; } /* hue 348.4, 5.35:1 */
[data-theme="crimson"] { --sc-accent: #9E4E65; } /* hue 3.4, 5.33:1 */
[data-theme="brick"] { --sc-accent: #A04E52; } /* hue 18.4, 5.37:1 */
[data-theme="rust"] { --sc-accent: #A05140; } /* hue 33.4, 5.31:1 */
[data-theme="amber"] { --sc-accent: #9D562D; } /* hue 48.4, 5.23:1 */
[data-theme="ochre"] { --sc-accent: #965B19; } /* hue 63.4, 5.22:1 */
[data-theme="gold"] { --sc-accent: #8D6203; } /* hue 78.4, 5.12:1 */
[data-theme="olive"] { --sc-accent: #816900; } /* hue 93.4, 5.03:1 */
[data-theme="moss"] { --sc-accent: #716F0F; } /* hue 108.4, 4.99:1 */
[data-theme="fern"] { --sc-accent: #5F7525; } /* hue 123.4, 4.90:1 */
[data-theme="emerald"] { --sc-accent: #497A39; } /* hue 138.4, 4.82:1 */
[data-theme="jade"] { --sc-accent: #2E7D4C; } /* hue 153.4, 4.79:1 */
[data-theme="spruce"] { --sc-accent: #007F5F; } /* hue 168.4, 4.73:1 */
[data-theme="teal"] { --sc-accent: #007F72; } /* hue 183.4, 4.65:1 */
[data-theme="cyan"] { --sc-accent: #007D82; } /* hue 198.4, 4.67:1 */
[data-theme="sky"] { --sc-accent: #007A91; } /* hue 213.4, 4.74:1 */
[data-theme="azure"] { --sc-accent: #00769D; } /* hue 228.4, 4.88:1 */
/* Roles. A version can override any of these, but it starts here. */
body { background: var(--sc-canvas); color: var(--sc-ink);
font: 400 1rem/1.62 var(--sc-font-text);
-webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { font-family: var(--sc-font-display); }
/* Kickers and small labels. */
.kicker, .mini, .eyebrow {
font: 500 .6875rem/1.2 var(--sc-font-mono);
letter-spacing: .18em; text-transform: uppercase; color: var(--sc-accent);
}
/* The wordmark. Version 22's lockup with the square mark removed, as Jared
asked on 02/11/2026. The word alone is the logo. */
.wordmark, .lockup {
display: inline-flex; align-items: center; min-height: 44px;
font: 500 1.1rem/1 var(--sc-font-display);
letter-spacing: 0; text-decoration: none; color: var(--sc-ink);
}
.wordmark:hover, .lockup:hover { color: var(--sc-accent); }
/* The blue that Jared asked for on 02/11/2026: "we wanted the blue in the
background etc. and text in blue etc". Version 22 does it two ways. */
/* 1. Emphasis inside a heading is blue, not italic. */
em { font-style: normal; color: var(--sc-accent); }
/* 2. A soft wash of the accent behind the hero, so the ground is not flat
white. 11% of the accent, fading out at two thirds. */
.bloom {
position: absolute; left: 50%; top: 68%; width: 44rem; aspect-ratio: 1;
transform: translate(-50%, -50%); pointer-events: none; z-index: 0;
background: radial-gradient(circle,
color-mix(in srgb, var(--sc-accent) 11%, transparent), transparent 66%);
}
@media (max-width: 640px) { .bloom { width: 100%; } }