mirror of
https://github.com/Nutlope/hallmark.git
synced 2026-08-14 12:35:33 +02:00
YoussefandClaude Opus 4.7
adf0da6fd4
Six items in one pass:
· **Bricolage Grotesque removed** entirely. Distinctive italic-a
forms (curl ear) read as "weird" at section-title scale across
several themes. Replaced per-theme with cleaner alternatives:
Sport → Inter Tight (italic). Riso → Space Grotesk. Almanac →
IBM Plex Sans. Plume → Geist. Manifesto's display fallback
chain swapped Bricolage out for Space Grotesk. Google Fonts
stylesheet URL updated — Bricolage dropped, Space Grotesk and
Anton (italic axis) added.
· **Section heads restructured.** Was: 10rem | 1fr two-column with
the section label ("04 / ANTI-PATTERNS") on the left and the
title on the right. Problem: at narrow widths (and on themes
that override to 6rem | 1fr like Sport), the label was forced
to wrap mid-word ("ANTI-/PATTERNS") and the title felt squeezed.
Now: single-column. Label stacks ABOVE the title with a small
gap. Label gets `white-space: nowrap` so it never breaks. Title
font-size grows from `clamp(2rem, 3vw + 1rem, 3rem)` to
`clamp(2rem, 4vw + 0.5rem, 3.5rem)` since it has full row width.
Sport's per-theme override (was 6rem | 1fr) now also 1fr.
· **Foundations card strokes — fixed.** The gap-as-border pattern
(gap: 0.5px, parent bg showing through) sub-pixel-rounded
inconsistently — col 2/3 boundaries dropped on some themes.
Replaced with explicit 1px right + bottom borders on each card,
plus left + top on the parent. Every divider now renders crisp
at every theme + viewport. Atelier/Salon use a dashed bottom
rule instead, no vertical dividers (matches their borderless
card aesthetic).
· **Worked examples — full bleed to viewport edges.** The rail had
`margin-inline: calc(-1 * var(--page-gutter))` which only
escaped the page gutter, not the page max-width. On wide
desktops the rail still capped at 76rem. Now uses
`width: 100vw; margin-inline: calc(50% - 50vw)` so cards extend
flush to the viewport edges no matter how wide the screen.
Internal scroll-padding still snaps the first/last card cleanly.
· **Study brief pill** — "Paste a design you admire." → "/hallmark
study this landing page". Reads as the actual command the user
would type, matches the Build row's brief style.
· **GitHub star button** added to the nav. Sits beside Install,
styled as an inverse pill (ink fill, accent star, paper text).
Live star count fetched from the GitHub API on first paint,
cached in localStorage for 1h to avoid rate-limit. Falls back
to "★" if the request fails. Counts ≥1000 render as "1.2k" etc.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
1943 lines
53 KiB
CSS
1943 lines
53 KiB
CSS
/* Hallmark — sections (with per-theme structural overrides) */
|
||
|
||
/* — Page scaffold ——————————————————————————————————— */
|
||
.page {
|
||
max-width: var(--page-max);
|
||
margin-inline: auto;
|
||
display: grid;
|
||
gap: var(--section-gap);
|
||
padding-block: var(--space-2xl) var(--space-4xl);
|
||
padding-inline: var(--page-gutter);
|
||
}
|
||
|
||
/* — Slot — a region whose component archetype swaps per theme ————— */
|
||
.slot {
|
||
display: block;
|
||
min-height: 1px; /* keeps reveal animation valid before populated */
|
||
}
|
||
|
||
/* — Section container ——————————————————————————————— */
|
||
.section {
|
||
display: grid;
|
||
gap: var(--space-xl); /* tightened from 2xl in v0.9 — content sits closer to its head */
|
||
position: relative; /* anchors absolute children (hidden radios) */
|
||
}
|
||
|
||
/* Section head — single-column always. Section label stacks ABOVE
|
||
the title, separated by a small gap. No more 10rem fixed sidebar
|
||
that forced the section label ("ANTI-PATTERNS") to wrap on
|
||
themes that needed wider title columns. Section titles can grow
|
||
bigger now since they have full width. */
|
||
.section__head {
|
||
display: grid;
|
||
grid-template-columns: 1fr;
|
||
gap: var(--space-sm);
|
||
padding-bottom: var(--section-head-gap);
|
||
border-bottom: var(--rule-hair) solid var(--color-rule-2);
|
||
}
|
||
|
||
/* Section label — small mono uppercase coordinate above the title.
|
||
Hard rule: never wrap. White-space: nowrap forces single-line at
|
||
every viewport. The label is short ("05 / Foundations") so this
|
||
is safe. */
|
||
.section-label,
|
||
.section__head .section-label {
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.section__title {
|
||
font-family: var(--font-display);
|
||
font-weight: var(--display-weight, 400);
|
||
font-style: var(--display-style, normal);
|
||
font-size: clamp(2rem, 4vw + 0.5rem, 3.5rem);
|
||
line-height: var(--lh-tight);
|
||
letter-spacing: var(--tracking-display);
|
||
max-width: 28ch;
|
||
color: var(--color-ink);
|
||
font-optical-sizing: auto;
|
||
margin: 0;
|
||
}
|
||
|
||
/* Narrow viewports — let headings wrap freely + cap display sizes so
|
||
a long title fits at 320–480 px without being clipped by body's
|
||
overflow-x: hidden. */
|
||
@media (max-width: 30rem) {
|
||
.opening__title,
|
||
.hero__display {
|
||
font-size: clamp(1.75rem, 9vw, 2.75rem) !important;
|
||
max-width: 12ch;
|
||
overflow-wrap: break-word;
|
||
word-wrap: break-word;
|
||
hyphens: auto;
|
||
}
|
||
.section__title {
|
||
font-size: clamp(1.375rem, 5.5vw, 1.875rem) !important;
|
||
max-width: 100%;
|
||
overflow-wrap: break-word;
|
||
}
|
||
.hero__lede,
|
||
.opening__sub {
|
||
font-size: 1rem !important;
|
||
max-width: 100%;
|
||
}
|
||
}
|
||
|
||
/* — 01 · Opening ——————————————————————————————————— */
|
||
.opening {
|
||
display: grid;
|
||
grid-template-columns: 8fr 4fr;
|
||
gap: var(--space-2xl);
|
||
padding-block: var(--space-xl) var(--space-lg);
|
||
align-items: end;
|
||
}
|
||
|
||
@media (max-width: 60rem) {
|
||
.opening { grid-template-columns: 1fr; gap: var(--space-xl); align-items: start; }
|
||
}
|
||
|
||
.opening__eyebrow {
|
||
font-family: var(--font-label);
|
||
font-size: var(--text-xs);
|
||
letter-spacing: var(--tracking-label);
|
||
text-transform: uppercase;
|
||
color: var(--color-muted);
|
||
margin-bottom: var(--space-lg);
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.55em;
|
||
}
|
||
|
||
.opening__title {
|
||
font-family: var(--font-display);
|
||
font-weight: var(--display-weight, 400);
|
||
font-style: var(--display-style, normal);
|
||
font-size: var(--text-display);
|
||
line-height: var(--lh-tight);
|
||
letter-spacing: var(--tracking-display);
|
||
color: var(--color-ink);
|
||
max-width: 15ch;
|
||
font-optical-sizing: auto;
|
||
font-variation-settings:
|
||
"opsz" var(--display-optical, 144),
|
||
"SOFT" var(--display-soft, 0);
|
||
}
|
||
|
||
.opening__title em {
|
||
font-family: var(--font-serif);
|
||
font-style: italic;
|
||
font-weight: 400;
|
||
color: var(--color-ink);
|
||
}
|
||
|
||
.opening__sub {
|
||
font-family: var(--font-body);
|
||
font-weight: 400;
|
||
font-size: var(--text-md);
|
||
line-height: var(--lh-normal);
|
||
color: var(--color-ink-2);
|
||
max-width: 42ch;
|
||
margin-top: var(--space-lg);
|
||
}
|
||
|
||
.opening__aside {
|
||
display: grid;
|
||
gap: var(--space-md);
|
||
padding-top: var(--space-xl);
|
||
}
|
||
|
||
.opening__rule {
|
||
height: 0.5rem;
|
||
width: 3rem;
|
||
background: var(--color-accent);
|
||
}
|
||
|
||
.opening__cta {
|
||
display: grid;
|
||
gap: var(--space-sm);
|
||
padding-top: var(--space-md);
|
||
border-top: var(--rule-hair) solid var(--color-rule);
|
||
}
|
||
|
||
/* — 02 · Examples rail (full-bleed) ——————————————————— */
|
||
/* The rail escapes the page gutter on both sides so tiles can flow
|
||
past the max-width. The header above stays inside the gutter. */
|
||
.examples__intro {
|
||
font-family: var(--font-serif);
|
||
font-style: italic;
|
||
font-size: var(--text-md);
|
||
line-height: var(--lh-snug);
|
||
color: var(--color-ink-2);
|
||
max-width: 60ch;
|
||
margin: 0;
|
||
}
|
||
|
||
.examples__intro .examples__hint {
|
||
font-style: normal;
|
||
font-family: var(--font-label);
|
||
font-size: var(--text-xs);
|
||
letter-spacing: var(--tracking-label);
|
||
text-transform: uppercase;
|
||
color: var(--color-muted);
|
||
display: inline-block;
|
||
margin-inline-start: var(--space-md);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
[data-theme="brutal"] .examples__intro,
|
||
[data-theme="manifesto"] .examples__intro,
|
||
[data-theme="terminal"] .examples__intro,
|
||
[data-theme="sport"] .examples__intro,
|
||
[data-theme="almanac"] .examples__intro {
|
||
font-family: var(--font-body);
|
||
font-style: normal;
|
||
}
|
||
|
||
.examples-rail {
|
||
display: flex;
|
||
gap: var(--space-lg);
|
||
overflow-x: auto;
|
||
overflow-y: visible;
|
||
scroll-snap-type: x mandatory;
|
||
/* Full-bleed: escape both the page max-width AND the page gutter so
|
||
the rail spans the full viewport regardless of how wide the
|
||
screen is. Cards extend right up to the viewport's edge. */
|
||
width: 100vw;
|
||
margin-inline: calc(50% - 50vw);
|
||
padding-inline: var(--page-gutter);
|
||
padding-block: var(--space-md) var(--space-lg);
|
||
scroll-padding-inline: var(--page-gutter);
|
||
scrollbar-color: var(--color-rule-2) transparent;
|
||
}
|
||
|
||
/* Reserve trailing whitespace inside the rail so the last card snaps
|
||
clean to the gutter and isn't cut off by the bleed margin. */
|
||
.examples-rail::after {
|
||
content: "";
|
||
flex: 0 0 var(--page-gutter);
|
||
}
|
||
|
||
.examples-rail::-webkit-scrollbar { height: 6px; }
|
||
.examples-rail::-webkit-scrollbar-track { background: transparent; }
|
||
.examples-rail::-webkit-scrollbar-thumb { background: var(--color-rule-2); border-radius: 0; }
|
||
|
||
/* — 03 · Without / With (parity panels, four pairs) ——————
|
||
The section holds four W/W pairs that swap based on which toggle
|
||
radio is :checked. Pure CSS, no JS.
|
||
|
||
Scroll-jump fix: the radio inputs sit in normal document flow
|
||
with zero size + opacity 0 (no position:absolute). When the user
|
||
clicks a label, the browser focuses the input — but because the
|
||
input is already in view (right above the toggle), no scroll
|
||
happens. Earlier versions used position:absolute which positioned
|
||
the input at top:0 of the viewport; clicking a label far below
|
||
would scroll the page back to the top. */
|
||
.vs-toggle__input {
|
||
/* Pulled out of the section's grid (otherwise each hidden radio plus each
|
||
hidden .vs panel adds a `var(--space-2xl)` phantom gap between the
|
||
section header and the first visible child). Anchored absolute inside
|
||
the section (which is position: relative) so focus doesn't scroll the
|
||
page back to the viewport top. */
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
appearance: none;
|
||
-webkit-appearance: none;
|
||
width: 0;
|
||
height: 0;
|
||
margin: 0;
|
||
padding: 0;
|
||
border: 0;
|
||
outline: 0;
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.vs-toggle {
|
||
display: inline-flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
gap: 0;
|
||
padding: 0.25rem;
|
||
background: var(--color-paper-2);
|
||
border: 1px solid var(--color-rule);
|
||
border-radius: var(--radius-pill, 999px);
|
||
margin-block-end: var(--space-xl);
|
||
align-self: start;
|
||
max-width: 100%;
|
||
}
|
||
|
||
.vs-toggle__btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.4em;
|
||
padding: 0.45rem 0.95rem;
|
||
font-family: var(--font-label);
|
||
font-size: var(--text-xs);
|
||
letter-spacing: var(--tracking-label);
|
||
text-transform: uppercase;
|
||
color: var(--color-muted);
|
||
cursor: pointer;
|
||
border-radius: var(--radius-pill, 999px);
|
||
transition: background-color var(--dur-micro) var(--ease-out),
|
||
color var(--dur-micro) var(--ease-out);
|
||
user-select: none;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.vs-toggle__btn:hover { color: var(--color-ink); }
|
||
|
||
.vs-toggle__num {
|
||
font-family: var(--font-mono);
|
||
font-size: 0.75em;
|
||
letter-spacing: 0.04em;
|
||
color: inherit;
|
||
opacity: 0.6;
|
||
font-feature-settings: "tnum";
|
||
}
|
||
|
||
.vs-toggle__label {
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* Focus ring on whichever button corresponds to the focused input. */
|
||
#vs-notes:focus-visible ~ .vs-toggle .vs-toggle__btn[for="vs-notes"],
|
||
#vs-dashboard:focus-visible ~ .vs-toggle .vs-toggle__btn[for="vs-dashboard"],
|
||
#vs-pricing:focus-visible ~ .vs-toggle .vs-toggle__btn[for="vs-pricing"],
|
||
#vs-personal:focus-visible ~ .vs-toggle .vs-toggle__btn[for="vs-personal"] {
|
||
outline: 2px solid var(--color-focus);
|
||
outline-offset: 3px;
|
||
}
|
||
|
||
#vs-notes:checked ~ .vs-toggle .vs-toggle__btn[for="vs-notes"],
|
||
#vs-dashboard:checked ~ .vs-toggle .vs-toggle__btn[for="vs-dashboard"],
|
||
#vs-pricing:checked ~ .vs-toggle .vs-toggle__btn[for="vs-pricing"],
|
||
#vs-personal:checked ~ .vs-toggle .vs-toggle__btn[for="vs-personal"] {
|
||
background: var(--color-ink);
|
||
color: var(--color-paper);
|
||
}
|
||
|
||
#vs-notes:checked ~ .vs-toggle .vs-toggle__btn[for="vs-notes"] .vs-toggle__num,
|
||
#vs-dashboard:checked ~ .vs-toggle .vs-toggle__btn[for="vs-dashboard"] .vs-toggle__num,
|
||
#vs-pricing:checked ~ .vs-toggle .vs-toggle__btn[for="vs-pricing"] .vs-toggle__num,
|
||
#vs-personal:checked ~ .vs-toggle .vs-toggle__btn[for="vs-personal"] .vs-toggle__num {
|
||
opacity: 0.85;
|
||
}
|
||
|
||
.vs-pairs { display: contents; }
|
||
|
||
.vs {
|
||
display: none;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: var(--space-lg);
|
||
}
|
||
|
||
#vs-notes:checked ~ .vs-pairs .vs--notes,
|
||
#vs-dashboard:checked ~ .vs-pairs .vs--dashboard,
|
||
#vs-pricing:checked ~ .vs-pairs .vs--pricing,
|
||
#vs-personal:checked ~ .vs-pairs .vs--personal {
|
||
display: grid;
|
||
}
|
||
|
||
@media (max-width: 50rem) {
|
||
.vs { grid-template-columns: 1fr; }
|
||
}
|
||
|
||
.vs__col {
|
||
display: grid;
|
||
grid-template-rows: auto 1fr auto;
|
||
gap: var(--space-md);
|
||
}
|
||
|
||
.vs__head {
|
||
padding-bottom: var(--space-sm);
|
||
border-bottom: var(--rule-hair) solid var(--color-rule);
|
||
}
|
||
|
||
.vs__label {
|
||
font-family: var(--font-label);
|
||
font-size: var(--text-xs);
|
||
letter-spacing: var(--tracking-label);
|
||
text-transform: uppercase;
|
||
color: var(--color-muted);
|
||
}
|
||
|
||
.vs__caption {
|
||
font-family: var(--font-body);
|
||
font-size: var(--text-sm);
|
||
color: var(--color-neutral);
|
||
line-height: var(--lh-normal);
|
||
}
|
||
|
||
/* — 04 · Foundations mosaic ——————————————————————————
|
||
Auto-fit grid with feature cards (F/01 Type, F/02 Colour) and the
|
||
closing strip (F/08 Anti-patterns) spanning the full row for breathing
|
||
room on their richer illustrations. Other cards pack 2-3 per row
|
||
depending on viewport. */
|
||
.foundations {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
|
||
gap: var(--space-xl) var(--space-2xl);
|
||
}
|
||
|
||
.spec--feature,
|
||
.spec--strip {
|
||
grid-column: 1 / -1;
|
||
}
|
||
|
||
@media (max-width: 56rem) {
|
||
.foundations { grid-template-columns: 1fr; gap: 0; }
|
||
.spec--feature, .spec--strip { grid-column: auto; }
|
||
}
|
||
|
||
/* — 05 · Foundations as vertical list + active panel ———————
|
||
Five clickable names on the left; the active card's rule + visual
|
||
demo on the right. Pure CSS via :checked + sibling selectors —
|
||
the radios sit absolutely-positioned (out of flow, like the W/W
|
||
toggle radios). Fits in ~one viewport on desktop. */
|
||
.found-toggle__input {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
appearance: none;
|
||
-webkit-appearance: none;
|
||
width: 0;
|
||
height: 0;
|
||
margin: 0;
|
||
padding: 0;
|
||
border: 0;
|
||
outline: 0;
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.found-grid {
|
||
display: grid;
|
||
grid-template-columns: 14rem 1fr;
|
||
gap: var(--space-2xl);
|
||
align-items: start;
|
||
}
|
||
|
||
@media (max-width: 60rem) {
|
||
.found-grid {
|
||
grid-template-columns: 1fr;
|
||
gap: 0;
|
||
}
|
||
}
|
||
|
||
.found-nav {
|
||
list-style: none;
|
||
margin: 0;
|
||
padding: 0;
|
||
display: grid;
|
||
gap: 0;
|
||
border-block-start: var(--rule-hair) solid var(--color-rule);
|
||
}
|
||
|
||
.found-nav li { margin: 0; }
|
||
|
||
@media (max-width: 60rem) {
|
||
.found-nav { display: contents; }
|
||
}
|
||
|
||
/* — 05 · How it works ——————————————————————————————— */
|
||
.how { display: grid; gap: var(--space-xl); }
|
||
|
||
.step {
|
||
display: grid;
|
||
grid-template-columns: 3rem 1fr 2fr;
|
||
gap: var(--space-lg);
|
||
align-items: start;
|
||
padding-top: var(--space-lg);
|
||
border-top: var(--rule-hair) solid var(--color-rule);
|
||
}
|
||
|
||
@media (max-width: 50rem) {
|
||
.step { grid-template-columns: 1fr; gap: var(--space-sm); }
|
||
}
|
||
|
||
.step__num {
|
||
font-family: var(--font-label);
|
||
font-weight: 500;
|
||
font-size: var(--text-md);
|
||
color: var(--color-ink);
|
||
letter-spacing: 0.08em;
|
||
}
|
||
|
||
.step__head {
|
||
font-family: var(--font-display);
|
||
font-weight: var(--display-weight, 400);
|
||
font-style: var(--display-style, normal);
|
||
font-size: var(--text-lg);
|
||
line-height: var(--lh-snug);
|
||
letter-spacing: var(--tracking-tight);
|
||
color: var(--color-ink);
|
||
font-optical-sizing: auto;
|
||
}
|
||
|
||
.step__sub {
|
||
font-family: var(--font-body);
|
||
font-size: var(--text-sm);
|
||
color: var(--color-neutral);
|
||
margin-top: var(--space-xs);
|
||
max-width: 40ch;
|
||
line-height: var(--lh-normal);
|
||
}
|
||
|
||
.step__body { display: grid; gap: var(--space-sm); }
|
||
|
||
/* — 03 · Study — DNA extraction gallery —————————————————
|
||
Four tiles. Each pairs a video-shaped media slot (poster image
|
||
when no <source> is supplied, otherwise an autoplay-muted-loop
|
||
screen recording) with the structured 10-field DNA panel. The
|
||
panel is a tabular key/value layout — mono key, body value. */
|
||
.study__intro {
|
||
margin: 0 0 var(--space-2xl);
|
||
font-family: var(--font-serif);
|
||
font-style: italic;
|
||
font-size: var(--text-md);
|
||
line-height: var(--lh-snug);
|
||
color: var(--color-ink-2);
|
||
max-width: 60ch;
|
||
}
|
||
|
||
.study__intro code {
|
||
font-family: var(--font-mono);
|
||
font-style: normal;
|
||
font-size: 0.875em;
|
||
background: var(--color-paper-2);
|
||
padding: 0.05em 0.35em;
|
||
border: var(--rule-hair) solid var(--color-rule);
|
||
color: var(--color-ink);
|
||
}
|
||
|
||
[data-theme="brutal"] .study__intro,
|
||
[data-theme="manifesto"] .study__intro,
|
||
[data-theme="terminal"] .study__intro,
|
||
[data-theme="sport"] .study__intro,
|
||
[data-theme="almanac"] .study__intro,
|
||
[data-theme="quiet"] .study__intro,
|
||
[data-theme="bloom"] .study__intro {
|
||
font-family: var(--font-body);
|
||
font-style: normal;
|
||
}
|
||
|
||
.study-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: var(--space-2xl) var(--space-xl);
|
||
}
|
||
|
||
@media (max-width: 60rem) {
|
||
.study-grid { grid-template-columns: 1fr; gap: var(--space-2xl); }
|
||
}
|
||
|
||
/* — 03 · Skills — five things Hallmark does ——————————————————
|
||
Vertical editorial list, scroll-only. No tabs, no carousel, no JS
|
||
state. Each row: roman numeral marginalia → title + lede → demo +
|
||
structured list. Each demo is structurally different from the others
|
||
on purpose — the section practises what the skill preaches. */
|
||
|
||
.skills__intro {
|
||
margin: 0 0 var(--space-2xl);
|
||
font-family: var(--font-serif);
|
||
font-style: italic;
|
||
font-size: var(--text-md);
|
||
line-height: var(--lh-snug);
|
||
color: var(--color-ink-2);
|
||
max-width: 60ch;
|
||
}
|
||
|
||
[data-theme="brutal"] .skills__intro,
|
||
[data-theme="manifesto"] .skills__intro,
|
||
[data-theme="terminal"] .skills__intro,
|
||
[data-theme="sport"] .skills__intro,
|
||
[data-theme="almanac"] .skills__intro,
|
||
[data-theme="quiet"] .skills__intro,
|
||
[data-theme="bloom"] .skills__intro,
|
||
[data-theme="riso"] .skills__intro {
|
||
font-family: var(--font-body);
|
||
font-style: normal;
|
||
}
|
||
|
||
.skills-list {
|
||
list-style: none;
|
||
margin: 0;
|
||
padding: 0;
|
||
display: grid;
|
||
gap: var(--space-3xl);
|
||
}
|
||
|
||
.skill-row {
|
||
display: grid;
|
||
gap: var(--space-lg);
|
||
}
|
||
|
||
.skill-row__head {
|
||
display: grid;
|
||
grid-template-columns: 4rem 1fr;
|
||
gap: var(--space-md);
|
||
align-items: start;
|
||
margin-block-end: var(--space-md);
|
||
}
|
||
|
||
@media (max-width: 60rem) {
|
||
.skill-row__head {
|
||
grid-template-columns: 1fr;
|
||
gap: var(--space-xs);
|
||
}
|
||
}
|
||
|
||
.skill-row__num {
|
||
font-family: var(--font-serif);
|
||
font-style: italic;
|
||
font-weight: 500;
|
||
font-size: var(--text-2xl);
|
||
color: var(--color-rule-2);
|
||
letter-spacing: 0;
|
||
user-select: none;
|
||
padding-block-start: 0.15em;
|
||
font-feature-settings: "tnum";
|
||
}
|
||
|
||
@media (max-width: 60rem) {
|
||
.skill-row__num { display: none; }
|
||
}
|
||
|
||
[data-theme="brutal"] .skill-row__num,
|
||
[data-theme="manifesto"] .skill-row__num,
|
||
[data-theme="terminal"] .skill-row__num,
|
||
[data-theme="sport"] .skill-row__num,
|
||
[data-theme="almanac"] .skill-row__num,
|
||
[data-theme="quiet"] .skill-row__num,
|
||
[data-theme="bloom"] .skill-row__num,
|
||
[data-theme="riso"] .skill-row__num {
|
||
font-family: var(--font-mono);
|
||
font-style: normal;
|
||
font-weight: 500;
|
||
font-size: var(--text-xl);
|
||
}
|
||
|
||
.skill-row__head-body {
|
||
display: grid;
|
||
gap: var(--space-sm);
|
||
max-width: 64ch;
|
||
}
|
||
|
||
.skill-row__title {
|
||
font-family: var(--font-display);
|
||
font-size: clamp(2rem, 3.4vw + 0.5rem, 3rem);
|
||
font-weight: 500;
|
||
line-height: var(--lh-tight);
|
||
letter-spacing: var(--tracking-display);
|
||
color: var(--color-ink);
|
||
margin: 0;
|
||
display: flex;
|
||
align-items: baseline;
|
||
flex-wrap: wrap;
|
||
gap: 0.4em;
|
||
}
|
||
|
||
.skill-row__title-meta {
|
||
font-family: var(--font-serif);
|
||
font-style: italic;
|
||
font-weight: 400;
|
||
font-size: 0.5em;
|
||
letter-spacing: 0;
|
||
color: var(--color-muted);
|
||
}
|
||
|
||
[data-theme="brutal"] .skill-row__title-meta,
|
||
[data-theme="manifesto"] .skill-row__title-meta,
|
||
[data-theme="terminal"] .skill-row__title-meta,
|
||
[data-theme="sport"] .skill-row__title-meta,
|
||
[data-theme="almanac"] .skill-row__title-meta,
|
||
[data-theme="quiet"] .skill-row__title-meta,
|
||
[data-theme="bloom"] .skill-row__title-meta {
|
||
font-family: var(--font-mono);
|
||
font-style: normal;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.04em;
|
||
}
|
||
|
||
[data-theme="manifesto"] .skill-row__title,
|
||
[data-theme="brutal"] .skill-row__title {
|
||
text-transform: uppercase;
|
||
letter-spacing: var(--tracking-tight);
|
||
}
|
||
|
||
.skill-row__lede {
|
||
font-family: var(--font-body);
|
||
font-size: var(--text-md);
|
||
line-height: var(--lh-relaxed);
|
||
color: var(--color-ink-2);
|
||
margin: 0;
|
||
max-width: 60ch;
|
||
}
|
||
|
||
.skill-row__lede strong {
|
||
font-weight: 600;
|
||
color: var(--color-ink);
|
||
}
|
||
|
||
.skill-row__body {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
|
||
gap: var(--space-xl);
|
||
align-items: start;
|
||
padding-inline-start: 4rem;
|
||
}
|
||
|
||
@media (max-width: 60rem) {
|
||
.skill-row__body {
|
||
grid-template-columns: 1fr;
|
||
gap: var(--space-lg);
|
||
padding-inline-start: 0;
|
||
}
|
||
}
|
||
|
||
/* Full-width body — no right info column. Used by Refine + Redesign
|
||
so the before/after diptych takes the whole row width. */
|
||
.skill-row__body--full {
|
||
grid-template-columns: 1fr;
|
||
padding-inline-start: 4rem;
|
||
}
|
||
|
||
@media (max-width: 60rem) {
|
||
.skill-row__body--full {
|
||
padding-inline-start: 0;
|
||
}
|
||
}
|
||
|
||
.skill-row__demo {
|
||
position: relative;
|
||
margin: 0;
|
||
display: block;
|
||
}
|
||
|
||
.skill-row__demo img {
|
||
display: block;
|
||
width: 100%;
|
||
height: auto;
|
||
background: var(--color-paper-2);
|
||
}
|
||
|
||
/* Structured list to the right of each demo (reuses .dna__row from
|
||
.study-card__dna). Editorial card-on-paper container. */
|
||
.skill-row__list {
|
||
list-style: none;
|
||
margin: 0;
|
||
padding: var(--space-md) var(--space-lg);
|
||
display: grid;
|
||
gap: 0;
|
||
background: var(--color-paper);
|
||
border: var(--rule-card, 1px) solid var(--color-rule);
|
||
border-radius: var(--radius-card, 0);
|
||
}
|
||
|
||
[data-theme="atelier"] .skill-row__list,
|
||
[data-theme="salon"] .skill-row__list {
|
||
border: 0;
|
||
background: transparent;
|
||
padding: 0;
|
||
border-block-start: var(--rule-hair) solid var(--color-rule);
|
||
border-radius: 0;
|
||
}
|
||
|
||
[data-theme="brutal"] .skill-row__list,
|
||
[data-theme="manifesto"] .skill-row__list { border-width: 2px; }
|
||
|
||
.skill-row__list code {
|
||
font-family: var(--font-mono);
|
||
font-size: 0.8125em;
|
||
background: var(--color-paper-2);
|
||
padding: 0.05em 0.35em;
|
||
border: var(--rule-hair) solid var(--color-rule);
|
||
color: var(--color-ink);
|
||
}
|
||
|
||
/* Row I — Build demo: brief pill → arrow → output thumb stacked */
|
||
.skill-row__demo--build {
|
||
display: grid;
|
||
gap: var(--space-sm);
|
||
justify-items: start;
|
||
}
|
||
|
||
.brief-pill {
|
||
display: inline-block;
|
||
padding: var(--space-xs) var(--space-md);
|
||
background: var(--color-paper-2);
|
||
border: var(--rule-hair) solid var(--color-rule);
|
||
border-radius: 999px;
|
||
font-family: var(--font-mono);
|
||
font-size: var(--text-xs);
|
||
color: var(--color-ink-2);
|
||
font-style: italic;
|
||
max-width: 100%;
|
||
}
|
||
|
||
[data-theme="brutal"] .brief-pill,
|
||
[data-theme="manifesto"] .brief-pill,
|
||
[data-theme="terminal"] .brief-pill,
|
||
[data-theme="newsprint"] .brief-pill,
|
||
[data-theme="atelier"] .brief-pill {
|
||
border-radius: 0;
|
||
font-style: normal;
|
||
}
|
||
|
||
.brief-arrow {
|
||
font-family: var(--font-mono);
|
||
font-size: var(--text-md);
|
||
color: var(--color-rule-2);
|
||
user-select: none;
|
||
padding-inline-start: var(--space-md);
|
||
}
|
||
|
||
.brief-output {
|
||
display: block;
|
||
width: 100%;
|
||
aspect-ratio: 16 / 10;
|
||
overflow: hidden;
|
||
border: var(--rule-card, 1px) solid var(--color-rule);
|
||
}
|
||
|
||
.brief-output img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
object-position: top left;
|
||
}
|
||
|
||
/* Row III — Audit demo: a CSS-only inline slop hero. Built deliberately
|
||
to LOOK like every default AI hero — purple-pink gradient, centered,
|
||
Inter, ✨ badge, gradient pill CTA. Lives outside theme tokens
|
||
intentionally — it's the negative example. The checklist on the
|
||
right names every tell + its fix. */
|
||
.skill-row__demo--audit { aspect-ratio: 16 / 10; }
|
||
|
||
.audit-slop {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100%;
|
||
display: grid;
|
||
place-items: center;
|
||
text-align: center;
|
||
background: linear-gradient(135deg, #a855f7 0%, #ec4899 55%, #f59e0b 100%);
|
||
border-radius: 14px;
|
||
overflow: hidden;
|
||
font-family: "Inter", system-ui, sans-serif;
|
||
color: #ffffff;
|
||
/* Deliberate AI-hero clichés: gradient corners, centered, Inter. */
|
||
}
|
||
|
||
.audit-slop::before {
|
||
content: "";
|
||
position: absolute;
|
||
inset: -20%;
|
||
background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.18) 0%, transparent 50%),
|
||
radial-gradient(circle at 80% 80%, rgba(255,255,255,0.10) 0%, transparent 60%);
|
||
pointer-events: none;
|
||
}
|
||
|
||
.audit-slop__inner {
|
||
position: relative;
|
||
display: grid;
|
||
gap: 0.6rem;
|
||
justify-items: center;
|
||
padding: var(--space-md);
|
||
max-width: 28ch;
|
||
}
|
||
|
||
.audit-slop__badge {
|
||
display: inline-block;
|
||
padding: 0.22rem 0.7rem;
|
||
font-family: "Inter", system-ui, sans-serif;
|
||
font-size: 0.625rem;
|
||
font-weight: 600;
|
||
letter-spacing: 0.06em;
|
||
text-transform: uppercase;
|
||
color: #ffffff;
|
||
background: rgba(255,255,255,0.18);
|
||
border: 1px solid rgba(255,255,255,0.28);
|
||
border-radius: 999px;
|
||
backdrop-filter: blur(6px);
|
||
-webkit-backdrop-filter: blur(6px);
|
||
}
|
||
|
||
.audit-slop__title {
|
||
margin: 0;
|
||
font-family: "Inter", system-ui, sans-serif;
|
||
font-weight: 700;
|
||
font-size: clamp(1.1rem, 2.4vw + 0.4rem, 2rem);
|
||
line-height: 1.1;
|
||
letter-spacing: -0.025em;
|
||
background: linear-gradient(135deg, #ffffff 0%, rgba(255,255,255,0.78) 100%);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
}
|
||
|
||
.audit-slop__lede {
|
||
margin: 0;
|
||
font-family: "Inter", system-ui, sans-serif;
|
||
font-size: 0.8125rem;
|
||
font-weight: 400;
|
||
line-height: 1.4;
|
||
color: rgba(255,255,255,0.92);
|
||
}
|
||
|
||
.audit-slop__cta {
|
||
display: inline-block;
|
||
margin-block-start: 0.4rem;
|
||
padding: 0.55rem 1.1rem;
|
||
font-family: "Inter", system-ui, sans-serif;
|
||
font-size: 0.75rem;
|
||
font-weight: 600;
|
||
letter-spacing: 0.005em;
|
||
background: linear-gradient(135deg, #ffffff 0%, #fef3c7 100%);
|
||
color: #6b21a8;
|
||
border-radius: 999px;
|
||
user-select: none;
|
||
}
|
||
|
||
/* Audit checklist — replaces the old 4-row info panel. Each row reads:
|
||
✗ <problem> → <fix>. Slop is muted; fix is ink. */
|
||
.audit-check {
|
||
list-style: none;
|
||
margin: 0;
|
||
padding: var(--space-md) var(--space-lg);
|
||
display: grid;
|
||
gap: 0;
|
||
background: var(--color-paper);
|
||
border: var(--rule-card, 1px) solid var(--color-rule);
|
||
}
|
||
|
||
[data-theme="atelier"] .audit-check,
|
||
[data-theme="salon"] .audit-check {
|
||
border: 0;
|
||
background: transparent;
|
||
padding: 0;
|
||
border-block-start: var(--rule-hair) solid var(--color-rule);
|
||
}
|
||
|
||
[data-theme="brutal"] .audit-check,
|
||
[data-theme="manifesto"] .audit-check { border-width: 2px; }
|
||
|
||
.audit-check__row {
|
||
display: grid;
|
||
grid-template-columns: 1.2rem 1fr 1.2rem 1fr;
|
||
gap: 0.6rem;
|
||
align-items: baseline;
|
||
padding-block: var(--space-sm);
|
||
border-block-end: var(--rule-hair) solid var(--color-rule);
|
||
font-size: 0.8125rem;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.audit-check__row:last-child { border-block-end: 0; }
|
||
|
||
.audit-check__cross {
|
||
font-family: var(--font-mono);
|
||
font-weight: 600;
|
||
color: var(--color-accent);
|
||
text-align: center;
|
||
}
|
||
|
||
.audit-check__problem {
|
||
font-family: var(--font-body);
|
||
color: var(--color-muted);
|
||
text-decoration: line-through;
|
||
text-decoration-thickness: 1px;
|
||
text-decoration-color: var(--color-rule-2);
|
||
}
|
||
|
||
.audit-check__arrow {
|
||
font-family: var(--font-mono);
|
||
color: var(--color-rule-2);
|
||
text-align: center;
|
||
}
|
||
|
||
.audit-check__fix {
|
||
font-family: var(--font-body);
|
||
color: var(--color-ink);
|
||
font-weight: 500;
|
||
}
|
||
|
||
@media (max-width: 36rem) {
|
||
.audit-check__row {
|
||
grid-template-columns: 1.2rem 1fr;
|
||
gap: 0.4rem 0.6rem;
|
||
}
|
||
.audit-check__arrow { display: none; }
|
||
.audit-check__fix {
|
||
grid-column: 2;
|
||
font-size: 0.875rem;
|
||
}
|
||
}
|
||
|
||
/* Rows IV & V — Diptych: before / after side-by-side thumbnails */
|
||
.skill-row__demo--diptych {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: var(--space-sm);
|
||
margin: 0;
|
||
}
|
||
|
||
.diptych__half {
|
||
margin: 0;
|
||
display: grid;
|
||
gap: var(--space-xs);
|
||
}
|
||
|
||
.diptych__half > .fig-corners {
|
||
display: block;
|
||
aspect-ratio: 16 / 10;
|
||
overflow: hidden;
|
||
border: var(--rule-hair) solid var(--color-rule);
|
||
}
|
||
|
||
.diptych__half img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
object-position: top left;
|
||
}
|
||
|
||
.diptych__cap {
|
||
font-family: var(--font-label);
|
||
font-size: var(--text-xs);
|
||
letter-spacing: var(--tracking-label);
|
||
text-transform: uppercase;
|
||
color: var(--color-muted);
|
||
font-feature-settings: "tnum";
|
||
}
|
||
|
||
.diptych__half[data-state="after"] .diptych__cap {
|
||
color: var(--color-accent-ink, var(--color-accent));
|
||
}
|
||
|
||
@media (max-width: 48rem) {
|
||
.skill-row__demo--diptych {
|
||
grid-template-columns: 1fr;
|
||
gap: var(--space-md);
|
||
}
|
||
}
|
||
|
||
/* — 06 · Install pane ——————————————————————————————
|
||
A single bordered "manual page" card with three numbered rows —
|
||
I · Run, II · In, III · Then. Replaces the old 4-card grid. The
|
||
pane uses theme tokens for colour/border/typography so it adapts
|
||
when T cycles themes. */
|
||
.install-pane {
|
||
display: grid;
|
||
border: var(--rule-card, 1px) solid var(--color-rule);
|
||
border-radius: var(--radius-card, 0);
|
||
background: var(--color-paper);
|
||
box-shadow: var(--shadow-card, none);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.install-pane__row {
|
||
display: grid;
|
||
grid-template-columns: 9rem 1fr;
|
||
gap: var(--space-xl);
|
||
padding: var(--space-xl) var(--space-2xl);
|
||
align-items: start;
|
||
}
|
||
|
||
.install-pane__row + .install-pane__row {
|
||
border-block-start: var(--rule-hair) solid var(--color-rule);
|
||
}
|
||
|
||
@media (max-width: 50rem) {
|
||
.install-pane__row {
|
||
grid-template-columns: 1fr;
|
||
gap: var(--space-md);
|
||
padding: var(--space-lg);
|
||
}
|
||
}
|
||
|
||
/* — 07 · Footer ————————————————————————————————————— */
|
||
.foot {
|
||
display: grid;
|
||
grid-template-columns: 1fr auto;
|
||
gap: var(--space-lg);
|
||
padding-top: var(--space-xl);
|
||
border-top: var(--rule-fine) solid var(--color-ink);
|
||
font-family: var(--font-label);
|
||
font-size: var(--text-xs);
|
||
letter-spacing: 0.04em;
|
||
color: var(--color-muted);
|
||
align-items: end;
|
||
}
|
||
|
||
.foot__credits { max-width: 64ch; line-height: 1.7; }
|
||
.foot__credits a { color: var(--color-ink); }
|
||
|
||
.foot__powered { text-align: right; }
|
||
|
||
.foot__powered-mark {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.4em;
|
||
color: var(--color-ink);
|
||
font-weight: 500;
|
||
letter-spacing: 0.12em;
|
||
text-transform: uppercase;
|
||
font-size: var(--text-xs);
|
||
}
|
||
|
||
.foot__powered-mark::before {
|
||
content: "";
|
||
width: 0.55em;
|
||
height: 0.55em;
|
||
background: var(--color-accent);
|
||
}
|
||
|
||
/* — Dimension callout ——————————————————————————————— */
|
||
.dim {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.5em;
|
||
font-family: var(--font-label);
|
||
font-size: var(--text-xs);
|
||
letter-spacing: var(--tracking-label);
|
||
text-transform: uppercase;
|
||
color: var(--color-muted);
|
||
}
|
||
|
||
/* ════════════════════════════════════════════════════════════ */
|
||
/* STRUCTURAL FINGERPRINTS — per-theme overrides */
|
||
/* Each theme picks distinct values across six axes: */
|
||
/* heading placement · body composition · divider · button */
|
||
/* · image · reveal */
|
||
/* ════════════════════════════════════════════════════════════ */
|
||
|
||
/* ── ATELIER — centered display, generous, narrow column ────── */
|
||
[data-theme="atelier"] .opening {
|
||
grid-template-columns: 1fr;
|
||
text-align: center;
|
||
align-items: center;
|
||
padding-block: var(--space-3xl) var(--space-xl);
|
||
}
|
||
[data-theme="atelier"] .opening__title {
|
||
margin-inline: auto;
|
||
max-width: 16ch;
|
||
}
|
||
[data-theme="atelier"] .opening__sub {
|
||
margin-inline: auto;
|
||
margin-top: var(--space-xl);
|
||
}
|
||
[data-theme="atelier"] .opening__eyebrow {
|
||
justify-content: center;
|
||
}
|
||
[data-theme="atelier"] .opening__aside {
|
||
display: none;
|
||
}
|
||
[data-theme="atelier"] .section__head {
|
||
grid-template-columns: 1fr;
|
||
text-align: center;
|
||
border-bottom: 0;
|
||
padding-bottom: var(--space-2xl);
|
||
}
|
||
[data-theme="atelier"] .section-label {
|
||
justify-content: center;
|
||
}
|
||
[data-theme="atelier"] .section__title {
|
||
max-width: 22ch;
|
||
margin-inline: auto;
|
||
}
|
||
[data-theme="atelier"] .foundations {
|
||
grid-template-columns: 1fr;
|
||
max-width: 38rem;
|
||
margin-inline: auto;
|
||
}
|
||
[data-theme="atelier"] .spec {
|
||
text-align: center;
|
||
border-top: 0;
|
||
border-bottom: var(--rule-hair) solid var(--color-rule);
|
||
padding: var(--space-2xl) 0;
|
||
}
|
||
[data-theme="atelier"] .spec__head {
|
||
justify-content: center;
|
||
gap: var(--space-md);
|
||
}
|
||
[data-theme="atelier"] .spec__rule {
|
||
margin-inline: auto;
|
||
}
|
||
[data-theme="atelier"] .step {
|
||
grid-template-columns: 1fr;
|
||
text-align: center;
|
||
}
|
||
[data-theme="atelier"] .vs { grid-template-columns: 1fr; border: 0; }
|
||
[data-theme="atelier"] .vs__col:first-child {
|
||
border-right: 0;
|
||
border-bottom: var(--rule-hair) solid var(--color-rule-2);
|
||
}
|
||
|
||
/* ── NEWSPRINT — bottom-aligned head, multi-column body, double rule, drop cap ── */
|
||
[data-theme="newsprint"] .opening {
|
||
grid-template-columns: 1fr;
|
||
border-top: 4px double var(--color-ink);
|
||
border-bottom: 1px solid var(--color-ink);
|
||
padding-block: var(--space-md);
|
||
align-items: start;
|
||
}
|
||
[data-theme="newsprint"] .opening__aside {
|
||
border-top: var(--rule-hair) solid var(--color-rule);
|
||
margin-top: var(--space-md);
|
||
padding-top: var(--space-md);
|
||
}
|
||
[data-theme="newsprint"] .opening__title {
|
||
max-width: none;
|
||
font-weight: 700;
|
||
margin-block: var(--space-md);
|
||
}
|
||
[data-theme="newsprint"] .opening__sub {
|
||
column-count: 2;
|
||
column-gap: 2.5rem;
|
||
column-rule: 0.5px solid var(--color-rule-2);
|
||
hyphens: auto;
|
||
text-align: justify;
|
||
max-width: none;
|
||
margin-top: var(--space-md);
|
||
}
|
||
/* Signature drop cap — first letter of the lede */
|
||
[data-theme="newsprint"] .opening__sub::first-letter {
|
||
font-family: var(--font-display);
|
||
font-weight: 700;
|
||
font-size: 4.2em;
|
||
line-height: 0.85;
|
||
float: left;
|
||
margin: 0.08em 0.12em 0 0;
|
||
color: var(--color-accent);
|
||
}
|
||
@media (max-width: 50rem) {
|
||
[data-theme="newsprint"] .opening__sub { column-count: 1; }
|
||
}
|
||
[data-theme="newsprint"] .section__head {
|
||
grid-template-columns: 1fr;
|
||
border-top: 3px double var(--color-ink);
|
||
border-bottom: 1px solid var(--color-ink);
|
||
padding-block: 0.5rem;
|
||
align-items: baseline;
|
||
}
|
||
[data-theme="newsprint"] .foundations {
|
||
grid-template-columns: repeat(3, 1fr);
|
||
column-gap: var(--space-xl);
|
||
row-gap: 0;
|
||
}
|
||
@media (max-width: 70rem) {
|
||
[data-theme="newsprint"] .foundations { grid-template-columns: repeat(2, 1fr); }
|
||
}
|
||
@media (max-width: 50rem) {
|
||
[data-theme="newsprint"] .foundations { grid-template-columns: 1fr; }
|
||
}
|
||
[data-theme="newsprint"] .spec {
|
||
border-top: 1px solid var(--color-ink);
|
||
padding: var(--space-lg) 0;
|
||
}
|
||
|
||
/* ── TERMINAL — inline `>` headings, mono everywhere ────────── */
|
||
[data-theme="terminal"] .opening {
|
||
grid-template-columns: 1fr;
|
||
padding-block: var(--space-xl) var(--space-md);
|
||
}
|
||
[data-theme="terminal"] .opening__aside {
|
||
display: grid;
|
||
grid-template-columns: 1fr;
|
||
padding-top: var(--space-md);
|
||
border-top: var(--rule-hair) dashed var(--color-rule-2);
|
||
}
|
||
[data-theme="terminal"] .opening__title {
|
||
text-transform: uppercase;
|
||
font-weight: 500;
|
||
letter-spacing: 0.02em;
|
||
max-width: none;
|
||
}
|
||
[data-theme="terminal"] .opening__title::before {
|
||
content: "$ ";
|
||
color: var(--color-accent);
|
||
}
|
||
[data-theme="terminal"] .opening__title em {
|
||
font-family: var(--font-display);
|
||
font-style: normal;
|
||
text-decoration: underline;
|
||
text-decoration-color: var(--color-accent);
|
||
text-underline-offset: 0.15em;
|
||
}
|
||
[data-theme="terminal"] .section__head {
|
||
grid-template-columns: 1fr;
|
||
border-bottom: var(--rule-hair) dashed var(--color-rule-2);
|
||
}
|
||
[data-theme="terminal"] .section__title {
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.04em;
|
||
font-weight: 500;
|
||
}
|
||
[data-theme="terminal"] .section__title::before {
|
||
content: "// ";
|
||
color: var(--color-accent);
|
||
}
|
||
[data-theme="terminal"] .opening__rule {
|
||
height: 1rem;
|
||
width: 0.6rem;
|
||
background: var(--color-accent);
|
||
animation: blink 1.05s steps(2) infinite;
|
||
}
|
||
@keyframes blink { 50% { opacity: 0; } }
|
||
[data-theme="terminal"] .step__num::before { content: "[ "; color: var(--color-accent); }
|
||
[data-theme="terminal"] .step__num::after { content: " ]"; color: var(--color-accent); }
|
||
|
||
/* ── MANIFESTO — full-bleed, ALL CAPS, colour blocks ────────── */
|
||
[data-theme="manifesto"] .opening {
|
||
grid-template-columns: 1fr;
|
||
padding-block: var(--space-2xl) var(--space-xl);
|
||
}
|
||
[data-theme="manifesto"] .opening__aside { display: none; }
|
||
[data-theme="manifesto"] .opening__title {
|
||
text-transform: uppercase;
|
||
font-weight: 800;
|
||
max-width: 11ch;
|
||
font-style: normal;
|
||
}
|
||
[data-theme="manifesto"] .opening__title em {
|
||
font-family: var(--font-display);
|
||
font-style: normal;
|
||
font-weight: 800;
|
||
background: var(--color-accent);
|
||
color: var(--color-paper);
|
||
padding: 0 0.12em;
|
||
box-decoration-break: clone;
|
||
-webkit-box-decoration-break: clone;
|
||
}
|
||
[data-theme="manifesto"] .opening__sub {
|
||
text-transform: uppercase;
|
||
font-weight: 500;
|
||
letter-spacing: 0.02em;
|
||
max-width: 56ch;
|
||
}
|
||
[data-theme="manifesto"] .section__head {
|
||
grid-template-columns: 1fr;
|
||
border-bottom: 3px solid var(--color-ink);
|
||
padding-bottom: var(--space-sm);
|
||
}
|
||
[data-theme="manifesto"] .section__title {
|
||
text-transform: uppercase;
|
||
max-width: 18ch;
|
||
font-weight: 800;
|
||
}
|
||
[data-theme="manifesto"] .step { border-top: 3px solid var(--color-ink); }
|
||
|
||
/* ── SALON — centered narrow, fleuron divider ───────────────── */
|
||
[data-theme="salon"] .opening {
|
||
grid-template-columns: 1fr;
|
||
text-align: center;
|
||
align-items: center;
|
||
padding-block: var(--space-3xl) var(--space-xl);
|
||
}
|
||
[data-theme="salon"] .opening__title {
|
||
font-style: italic;
|
||
font-weight: 400;
|
||
margin-inline: auto;
|
||
max-width: 14ch;
|
||
}
|
||
[data-theme="salon"] .opening__title em {
|
||
font-style: normal;
|
||
font-family: var(--font-display);
|
||
}
|
||
[data-theme="salon"] .opening__sub {
|
||
margin-inline: auto;
|
||
margin-top: var(--space-xl);
|
||
font-family: var(--font-serif);
|
||
font-style: italic;
|
||
}
|
||
[data-theme="salon"] .opening__eyebrow { justify-content: center; }
|
||
[data-theme="salon"] .opening__aside { display: none; }
|
||
[data-theme="salon"] .section__head {
|
||
grid-template-columns: 1fr;
|
||
text-align: center;
|
||
border-bottom: 0;
|
||
padding-bottom: var(--space-md);
|
||
}
|
||
[data-theme="salon"] .section__head::after {
|
||
content: "❦";
|
||
display: block;
|
||
text-align: center;
|
||
color: var(--color-accent);
|
||
font-size: 1.2rem;
|
||
margin-top: var(--space-md);
|
||
font-family: var(--font-serif);
|
||
}
|
||
[data-theme="salon"] .section-label { justify-content: center; }
|
||
[data-theme="salon"] .section__title { margin-inline: auto; }
|
||
[data-theme="salon"] .foundations {
|
||
grid-template-columns: 1fr;
|
||
max-width: 36rem;
|
||
margin-inline: auto;
|
||
}
|
||
[data-theme="salon"] .spec { text-align: left; }
|
||
|
||
/* ── LINEN — hanging headings, two-column asymmetric, woven texture ─── */
|
||
[data-theme="linen"] .opening { grid-template-columns: 7fr 5fr; gap: var(--space-3xl); }
|
||
[data-theme="linen"] .section__head {
|
||
grid-template-columns: 1fr;
|
||
border-bottom: 0;
|
||
padding-bottom: 0;
|
||
}
|
||
[data-theme="linen"] .section__title { margin-bottom: var(--space-2xl); }
|
||
[data-theme="linen"] .section-label { margin-bottom: var(--space-md); }
|
||
[data-theme="linen"] .foundations {
|
||
grid-template-columns: 5fr 7fr;
|
||
gap: var(--space-xl) var(--space-2xl);
|
||
}
|
||
@media (max-width: 56rem) { [data-theme="linen"] .foundations { grid-template-columns: 1fr; } }
|
||
[data-theme="linen"] .spec { border-top: 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
|
||
|
||
/* Signature: barely-visible woven texture — checkerboard at 3% opacity */
|
||
html[data-theme="linen"] body {
|
||
background-image:
|
||
linear-gradient(45deg, oklch(20% 0.025 90 / 0.018) 25%, transparent 25%, transparent 75%, oklch(20% 0.025 90 / 0.018) 75%),
|
||
linear-gradient(45deg, oklch(20% 0.025 90 / 0.018) 25%, transparent 25%, transparent 75%, oklch(20% 0.025 90 / 0.018) 75%);
|
||
background-size: 6px 6px;
|
||
background-position: 0 0, 3px 3px;
|
||
}
|
||
|
||
/* ── ALMANAC — sticky labels, 3-col equal, dense, faint grid bg ────── */
|
||
/* Signature: faint vertical grid running the full page (graph-paper) */
|
||
html[data-theme="almanac"] body {
|
||
background-image:
|
||
linear-gradient(to right, oklch(38% 0.018 240 / 0.05) 0, oklch(38% 0.018 240 / 0.05) 1px, transparent 1px);
|
||
background-size: calc(100% / 12) 100%;
|
||
background-attachment: fixed;
|
||
}
|
||
|
||
[data-theme="almanac"] .section__head {
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: var(--z-sticky);
|
||
background: var(--color-paper);
|
||
padding-block: var(--space-sm);
|
||
border-bottom: 1px solid var(--color-ink);
|
||
grid-template-columns: 8rem 1fr;
|
||
}
|
||
[data-theme="almanac"] .section__title { font-size: var(--text-xl); }
|
||
[data-theme="almanac"] .foundations {
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 0;
|
||
border-left: var(--rule-hair) solid var(--color-rule);
|
||
}
|
||
@media (max-width: 70rem) {
|
||
[data-theme="almanac"] .foundations { grid-template-columns: repeat(2, 1fr); }
|
||
}
|
||
@media (max-width: 50rem) {
|
||
[data-theme="almanac"] .foundations { grid-template-columns: 1fr; border-left: 0; }
|
||
}
|
||
[data-theme="almanac"] .spec {
|
||
border-top: 0;
|
||
border-right: var(--rule-hair) solid var(--color-rule);
|
||
padding: var(--space-md) var(--space-md);
|
||
}
|
||
[data-theme="almanac"] .opening { grid-template-columns: 6fr 6fr; }
|
||
[data-theme="almanac"] .opening__title { max-width: 18ch; }
|
||
|
||
/* ── SPORT — italic display, asymmetric spans, bleed-colour ── */
|
||
[data-theme="sport"] .opening {
|
||
grid-template-columns: 9fr 3fr;
|
||
align-items: end;
|
||
padding-block: var(--space-2xl) var(--space-xl);
|
||
}
|
||
[data-theme="sport"] .opening__title {
|
||
font-style: italic;
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
max-width: 14ch;
|
||
}
|
||
[data-theme="sport"] .opening__title em {
|
||
font-family: var(--font-display);
|
||
font-style: italic;
|
||
color: var(--color-accent);
|
||
font-weight: 700;
|
||
}
|
||
[data-theme="sport"] .opening__sub { font-weight: 500; }
|
||
[data-theme="sport"] .section__head {
|
||
grid-template-columns: 1fr;
|
||
border-bottom: 2px solid var(--color-rule-2);
|
||
padding-bottom: var(--space-md);
|
||
}
|
||
[data-theme="sport"] .section__title {
|
||
font-style: italic;
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
letter-spacing: -0.02em;
|
||
}
|
||
[data-theme="sport"] .foundations {
|
||
grid-template-columns: 7fr 5fr;
|
||
gap: var(--space-xl) var(--space-2xl);
|
||
}
|
||
@media (max-width: 56rem) { [data-theme="sport"] .foundations { grid-template-columns: 1fr; } }
|
||
[data-theme="sport"] .spec { border-top: var(--rule-hair) solid var(--color-rule-2); }
|
||
[data-theme="sport"] .step__num {
|
||
font-style: italic;
|
||
color: var(--color-accent);
|
||
font-weight: 700;
|
||
}
|
||
|
||
/* ── BRUTAL existing — augment with structural overrides ───── */
|
||
[data-theme="brutal"] .opening__title em {
|
||
font-style: normal;
|
||
text-decoration: underline;
|
||
text-decoration-thickness: 4px;
|
||
text-underline-offset: 0.12em;
|
||
text-decoration-color: var(--color-accent);
|
||
}
|
||
[data-theme="brutal"] .section__head {
|
||
border-bottom: 3px solid var(--color-ink);
|
||
}
|
||
|
||
/* ── GARDEN existing — augment ──────────────────────────────── */
|
||
[data-theme="garden"] .section__head {
|
||
grid-template-columns: 1fr;
|
||
border-bottom: 0;
|
||
padding-bottom: var(--space-lg);
|
||
}
|
||
[data-theme="garden"] .section__title { margin-top: var(--space-md); }
|
||
[data-theme="garden"] .foundations { grid-template-columns: 5fr 7fr; }
|
||
@media (max-width: 56rem) { [data-theme="garden"] .foundations { grid-template-columns: 1fr; } }
|
||
|
||
/* ── MIDNIGHT existing — numbered display style ─────────────── */
|
||
[data-theme="midnight"] .section-label .num {
|
||
color: var(--color-accent);
|
||
}
|
||
[data-theme="midnight"] .opening__title em {
|
||
font-family: var(--font-serif);
|
||
font-style: italic;
|
||
color: var(--color-accent-ink);
|
||
}
|
||
|
||
/* — 04 · Anti-patterns — Slop, by name ——————————————————
|
||
Five-row editorial list: number · slop name (struck-through,
|
||
muted) · fix label + body (clean, ink). Side-by-side typography
|
||
so the contrast IS the design. Hairline rules between rows. */
|
||
|
||
.anti__intro {
|
||
margin: 0 0 var(--space-2xl);
|
||
font-family: var(--font-serif);
|
||
font-style: italic;
|
||
font-size: var(--text-md);
|
||
line-height: var(--lh-snug);
|
||
color: var(--color-ink-2);
|
||
max-width: 60ch;
|
||
}
|
||
|
||
[data-theme="brutal"] .anti__intro,
|
||
[data-theme="manifesto"] .anti__intro,
|
||
[data-theme="terminal"] .anti__intro,
|
||
[data-theme="sport"] .anti__intro,
|
||
[data-theme="almanac"] .anti__intro,
|
||
[data-theme="quiet"] .anti__intro,
|
||
[data-theme="bloom"] .anti__intro,
|
||
[data-theme="riso"] .anti__intro {
|
||
font-family: var(--font-body);
|
||
font-style: normal;
|
||
}
|
||
|
||
.anti__intro code {
|
||
font-family: var(--font-mono);
|
||
font-style: normal;
|
||
font-size: 0.875em;
|
||
background: var(--color-paper-2);
|
||
padding: 0.05em 0.35em;
|
||
border: var(--rule-hair) solid var(--color-rule);
|
||
color: var(--color-ink);
|
||
}
|
||
|
||
.anti-list {
|
||
list-style: none;
|
||
margin: 0;
|
||
padding: 0;
|
||
display: grid;
|
||
gap: 0;
|
||
}
|
||
|
||
.anti-row {
|
||
display: grid;
|
||
grid-template-columns: 3.5rem minmax(0, 1.3fr) minmax(0, 1fr);
|
||
gap: var(--space-xl);
|
||
padding-block: var(--space-xl);
|
||
border-block-start: var(--rule-hair) solid var(--color-rule);
|
||
align-items: start;
|
||
}
|
||
|
||
.anti-row:first-child {
|
||
border-block-start: 0;
|
||
padding-block-start: 0;
|
||
}
|
||
|
||
@media (max-width: 60rem) {
|
||
.anti-row {
|
||
grid-template-columns: 1fr;
|
||
gap: var(--space-md);
|
||
}
|
||
}
|
||
|
||
.anti-row__num {
|
||
margin: 0;
|
||
font-family: var(--font-mono);
|
||
font-size: var(--text-xs);
|
||
letter-spacing: var(--tracking-label);
|
||
text-transform: uppercase;
|
||
color: var(--color-muted);
|
||
padding-block-start: 0.45em;
|
||
font-feature-settings: "tnum" 1;
|
||
}
|
||
|
||
.anti-row__name {
|
||
margin: 0 0 var(--space-sm) 0;
|
||
font-family: var(--font-display);
|
||
font-style: italic;
|
||
font-weight: var(--display-weight, 500);
|
||
font-size: clamp(1.25rem, 1.5vw + 0.75rem, 1.75rem);
|
||
line-height: var(--lh-tight);
|
||
letter-spacing: var(--tracking-tight);
|
||
color: var(--color-rule-2);
|
||
text-decoration: line-through;
|
||
text-decoration-thickness: 1px;
|
||
text-decoration-color: var(--color-rule-2);
|
||
font-optical-sizing: auto;
|
||
}
|
||
|
||
[data-theme="brutal"] .anti-row__name,
|
||
[data-theme="manifesto"] .anti-row__name,
|
||
[data-theme="sport"] .anti-row__name {
|
||
text-transform: uppercase;
|
||
font-style: normal;
|
||
}
|
||
|
||
[data-theme="terminal"] .anti-row__name {
|
||
font-family: var(--font-mono);
|
||
font-style: normal;
|
||
}
|
||
|
||
.anti-row__desc {
|
||
margin: 0;
|
||
font-family: var(--font-serif);
|
||
font-style: italic;
|
||
font-size: 0.9375rem;
|
||
line-height: var(--lh-relaxed);
|
||
color: var(--color-muted);
|
||
max-width: 50ch;
|
||
}
|
||
|
||
[data-theme="brutal"] .anti-row__desc,
|
||
[data-theme="manifesto"] .anti-row__desc,
|
||
[data-theme="terminal"] .anti-row__desc,
|
||
[data-theme="sport"] .anti-row__desc,
|
||
[data-theme="almanac"] .anti-row__desc,
|
||
[data-theme="quiet"] .anti-row__desc,
|
||
[data-theme="bloom"] .anti-row__desc {
|
||
font-family: var(--font-body);
|
||
font-style: normal;
|
||
}
|
||
|
||
.anti-row__fix-label {
|
||
margin: 0 0 var(--space-2xs) 0;
|
||
font-family: var(--font-label);
|
||
font-size: var(--text-xs);
|
||
letter-spacing: var(--tracking-label);
|
||
text-transform: uppercase;
|
||
color: var(--color-accent);
|
||
font-feature-settings: "tnum";
|
||
}
|
||
|
||
.anti-row__fix-body {
|
||
margin: 0;
|
||
font-family: var(--font-body);
|
||
font-size: var(--text-base);
|
||
line-height: var(--lh-relaxed);
|
||
color: var(--color-ink);
|
||
max-width: 45ch;
|
||
}
|
||
|
||
/* — 05 · Foundations — eight compact cards in a 4×2 desktop grid.
|
||
Each card pairs a hand-drawn monoline SVG (currentColor stroke,
|
||
theme-aware) with a one-word title and a single line of body
|
||
copy. Stacks cleanly on mobile. */
|
||
|
||
.found__intro {
|
||
margin: 0 0 var(--space-2xl);
|
||
font-family: var(--font-serif);
|
||
font-style: italic;
|
||
font-size: var(--text-md);
|
||
line-height: var(--lh-snug);
|
||
color: var(--color-ink-2);
|
||
max-width: 60ch;
|
||
}
|
||
|
||
[data-theme="brutal"] .found__intro,
|
||
[data-theme="manifesto"] .found__intro,
|
||
[data-theme="terminal"] .found__intro,
|
||
[data-theme="sport"] .found__intro,
|
||
[data-theme="almanac"] .found__intro,
|
||
[data-theme="quiet"] .found__intro,
|
||
[data-theme="bloom"] .found__intro,
|
||
[data-theme="riso"] .found__intro {
|
||
font-family: var(--font-body);
|
||
font-style: normal;
|
||
}
|
||
|
||
/* Foundations cards — explicit per-card right + bottom borders so
|
||
every column gap renders crisp at every theme + viewport. The
|
||
prior gap-as-border pattern (gap: 0.5px, parent bg showing
|
||
through) sub-pixel-rounded inconsistently — col 2/3 gaps
|
||
sometimes vanished. The new approach uses real 1px borders on
|
||
each card, parent gives top + left, cards give right + bottom.
|
||
Result: every divider renders. */
|
||
.found-cards {
|
||
list-style: none;
|
||
margin: 0;
|
||
padding: 0;
|
||
display: grid;
|
||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||
border-block-start: 1px solid var(--color-rule);
|
||
border-inline-start: 1px solid var(--color-rule);
|
||
}
|
||
|
||
.found-card {
|
||
background: var(--color-paper);
|
||
padding: var(--space-lg) var(--space-md);
|
||
display: grid;
|
||
gap: var(--space-sm);
|
||
align-content: start;
|
||
min-height: 12rem;
|
||
border-block-end: 1px solid var(--color-rule);
|
||
border-inline-end: 1px solid var(--color-rule);
|
||
}
|
||
|
||
.found-card__icon {
|
||
display: block;
|
||
width: 48px;
|
||
height: 48px;
|
||
color: var(--color-ink);
|
||
margin-block-end: var(--space-xs);
|
||
}
|
||
|
||
.found-card__icon svg {
|
||
display: block;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.found-card__name {
|
||
margin: 0;
|
||
font-family: var(--font-display);
|
||
font-weight: var(--display-weight, 500);
|
||
font-style: var(--display-style, normal);
|
||
font-size: var(--text-lg);
|
||
line-height: var(--lh-tight);
|
||
letter-spacing: var(--tracking-tight);
|
||
color: var(--color-ink);
|
||
font-optical-sizing: auto;
|
||
}
|
||
|
||
[data-theme="manifesto"] .found-card__name,
|
||
[data-theme="brutal"] .found-card__name,
|
||
[data-theme="sport"] .found-card__name {
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
[data-theme="terminal"] .found-card__name {
|
||
font-family: var(--font-mono);
|
||
font-style: normal;
|
||
}
|
||
|
||
.found-card__body {
|
||
margin: 0;
|
||
font-family: var(--font-body);
|
||
font-size: 0.875rem;
|
||
line-height: var(--lh-relaxed);
|
||
color: var(--color-ink-2);
|
||
max-width: 28ch;
|
||
}
|
||
|
||
[data-theme="atelier"] .found-card,
|
||
[data-theme="salon"] .found-card {
|
||
background: transparent;
|
||
border-inline-end: 0;
|
||
border-block-end: var(--rule-hair) dashed var(--color-rule);
|
||
}
|
||
|
||
[data-theme="atelier"] .found-cards,
|
||
[data-theme="salon"] .found-cards {
|
||
background: transparent;
|
||
border: 0;
|
||
border-block-start: var(--rule-hair) solid var(--color-rule);
|
||
padding-block-start: var(--space-md);
|
||
}
|
||
|
||
@media (max-width: 60rem) {
|
||
.found-cards {
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
}
|
||
}
|
||
|
||
@media (max-width: 36rem) {
|
||
.found-cards {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
.found-card { min-height: auto; }
|
||
}
|
||
|
||
/* — Section pull-arrow ————————————————————————————————————
|
||
Editorial "continued on p. 12" cue at the end of each section.
|
||
Italic serif label + arrow, biased left or right per section
|
||
for rhythm. Hover nudges the arrow forward. Pulls the eye into
|
||
the next section instead of stopping cold. */
|
||
.section__pull {
|
||
display: inline-flex;
|
||
align-items: baseline;
|
||
gap: 0.5em;
|
||
margin-block-start: var(--space-xl);
|
||
padding-block: var(--space-sm);
|
||
font-family: var(--font-serif);
|
||
font-style: italic;
|
||
font-size: var(--text-md);
|
||
line-height: 1.2;
|
||
color: var(--color-ink-2);
|
||
text-decoration: none;
|
||
border-block-start: var(--rule-hair) solid var(--color-rule);
|
||
width: fit-content;
|
||
transition: color var(--dur-micro) var(--ease-out);
|
||
}
|
||
|
||
.section__pull--right {
|
||
margin-inline-start: auto;
|
||
text-align: end;
|
||
}
|
||
|
||
.section__pull-arrow {
|
||
font-style: normal;
|
||
font-weight: 400;
|
||
color: var(--color-rule-2);
|
||
font-feature-settings: "tnum";
|
||
transition: transform var(--dur-short) var(--ease-out),
|
||
color var(--dur-micro) var(--ease-out);
|
||
}
|
||
|
||
@media (hover: hover) and (pointer: fine) {
|
||
.section__pull:hover { color: var(--color-ink); }
|
||
.section__pull:hover .section__pull-arrow {
|
||
transform: translateX(4px);
|
||
color: var(--color-accent);
|
||
}
|
||
}
|
||
|
||
.section__pull:focus-visible {
|
||
outline: 2px solid var(--color-focus);
|
||
outline-offset: 4px;
|
||
color: var(--color-ink);
|
||
}
|
||
|
||
[data-theme="brutal"] .section__pull,
|
||
[data-theme="manifesto"] .section__pull,
|
||
[data-theme="terminal"] .section__pull,
|
||
[data-theme="sport"] .section__pull,
|
||
[data-theme="almanac"] .section__pull,
|
||
[data-theme="quiet"] .section__pull,
|
||
[data-theme="bloom"] .section__pull {
|
||
font-family: var(--font-body);
|
||
font-style: normal;
|
||
text-transform: uppercase;
|
||
font-size: var(--text-sm);
|
||
letter-spacing: 0.04em;
|
||
}
|
||
|
||
[data-theme="terminal"] .section__pull-arrow::before {
|
||
content: ">";
|
||
margin-inline-end: 0.4em;
|
||
color: var(--color-accent);
|
||
}
|
||
|
||
/* — Interlude — full-bleed typographic moment between sections —
|
||
One declarative phrase set in the active theme's display face,
|
||
centered on a contrasting paper band. Punctuates the scroll;
|
||
resets attention before the next section. Zero motion, pure type. */
|
||
.interlude {
|
||
margin-inline: calc(-1 * var(--page-gutter));
|
||
padding-block: var(--space-3xl);
|
||
padding-inline: var(--page-gutter);
|
||
background: var(--color-paper-2);
|
||
border-block: var(--rule-hair) solid var(--color-rule);
|
||
display: grid;
|
||
place-items: center;
|
||
text-align: center;
|
||
}
|
||
|
||
.interlude__phrase {
|
||
margin: 0;
|
||
font-family: var(--font-display);
|
||
font-weight: var(--display-weight, 500);
|
||
font-style: var(--display-style, normal);
|
||
font-size: clamp(2.25rem, 6vw + 1rem, 5rem);
|
||
line-height: var(--lh-tight);
|
||
letter-spacing: var(--tracking-display);
|
||
color: var(--color-ink);
|
||
font-optical-sizing: auto;
|
||
max-width: 22ch;
|
||
/* Long-word safety inherited from base.css */
|
||
}
|
||
|
||
.interlude__phrase em {
|
||
font-style: italic;
|
||
color: var(--color-accent-ink, var(--color-accent));
|
||
font-weight: 500;
|
||
}
|
||
|
||
[data-theme="brutal"] .interlude__phrase,
|
||
[data-theme="manifesto"] .interlude__phrase,
|
||
[data-theme="sport"] .interlude__phrase {
|
||
text-transform: uppercase;
|
||
letter-spacing: -0.01em;
|
||
}
|
||
|
||
[data-theme="brutal"] .interlude__phrase em,
|
||
[data-theme="manifesto"] .interlude__phrase em,
|
||
[data-theme="sport"] .interlude__phrase em {
|
||
font-style: normal;
|
||
color: var(--color-accent);
|
||
}
|
||
|
||
[data-theme="terminal"] .interlude__phrase {
|
||
font-family: var(--font-mono);
|
||
}
|
||
|
||
[data-theme="terminal"] .interlude__phrase em {
|
||
font-style: normal;
|
||
color: var(--color-accent);
|
||
}
|
||
|
||
@media (max-width: 48rem) {
|
||
.interlude { padding-block: var(--space-2xl); }
|
||
}
|
||
|
||
/* ──────────────────────────────────────────────────────────────
|
||
Mobile collapse — section-head one-column on narrow viewports.
|
||
Many themes override `.section__head`'s `grid-template-columns`
|
||
(e.g. sport: 6rem 1fr · atelier: custom · linen: 6rem 1fr · …).
|
||
Per-theme overrides have specificity (0, 2, 0); the original
|
||
mobile collapse rule was (0, 1, 0) and lost the cascade — the
|
||
fixed-column heads stayed 2-column on mobile, causing the title
|
||
to overlap the section label (most visible on Sport: italic
|
||
Anton title wrapped onto the "02 / EXAMPLES" label).
|
||
|
||
This rule restores single-column collapse with matching
|
||
specificity so it wins source-order against every per-theme
|
||
head override above. Keep this block last in the file. */
|
||
@media (max-width: 48rem) {
|
||
[data-theme] .section__head {
|
||
grid-template-columns: 1fr;
|
||
gap: var(--space-md);
|
||
align-items: start;
|
||
}
|
||
}
|
||
|