mirror of
https://github.com/Nutlope/hallmark.git
synced 2026-08-14 12:35:33 +02:00
YoussefandClaude Opus 4.7
22b3697bef
Section 03 ships as the five-skills showcase (Build · Study · Audit · Refine · Redesign), each row with its own structurally-distinct demo. SKILL.md and references — new disciplines that hold across every verb: · Pre-emit self-critique on six axes (Philosophy · Hierarchy · Execution · Specificity · Restraint · Variety) — anything <3 triggers revision · Honest copy — no fabricated metrics, real numbers or labelled placeholder, never invent "+47% conversion" · Locked tokens — no mid-render colour or font-family improvisation · Re-drawn UI chrome forbidden — never hand-build fake browser bars, phone frames, code-block windows, IDE chrome · Clickable text never wraps to two lines on shrink Slop test grows from 55 to 60 gates (gates 56–60). Pre-emit critique block sits above the gate sweep. anti-patterns.md gains five new named entries; responsive.md gains "Clickable text — never wraps" with the 4-step fix order. Site: · Studio photographic hero — empty 3x3 placeholder grid replaced with a 3x2 showcase of six real Hallmark output thumbnails (Static Hour, NAJM, Tally hero, Nexus, Tracejam, Tally process) · Studio — strip "· selected work" suffix from section labels (::after rule removed) and from hero eyebrow COPY · FAQ section dropped from landing page · CSS removed · Install renumbered 07 → 06, footer reveal index 7 → 6 · Section 03 Row I (Build) demo swaps Tide → Static Hour · README — concise intro paragraph, hero showcase swapped to four new outputs (Static Hour, NAJM, Tally hero, Nexus) Version bumped to 1.0.0 across package.json, SKILL.md, banner, footer, JS captions, and the artifact stamp string. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
1349 lines
36 KiB
CSS
1349 lines
36 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 {
|
||
display: grid;
|
||
grid-template-columns: 10rem 1fr;
|
||
gap: var(--space-xl);
|
||
align-items: baseline;
|
||
padding-bottom: var(--section-head-gap);
|
||
border-bottom: var(--rule-hair) solid var(--color-rule-2);
|
||
}
|
||
|
||
.section__title {
|
||
font-family: var(--font-display);
|
||
font-weight: var(--display-weight, 400);
|
||
font-style: var(--display-style, normal);
|
||
font-size: var(--text-2xl);
|
||
line-height: var(--lh-snug);
|
||
letter-spacing: var(--tracking-display);
|
||
max-width: 24ch;
|
||
color: var(--color-ink);
|
||
font-optical-sizing: auto;
|
||
}
|
||
|
||
@media (max-width: 48rem) {
|
||
.section__head {
|
||
grid-template-columns: 1fr;
|
||
gap: var(--space-md);
|
||
}
|
||
}
|
||
|
||
/* 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;
|
||
/* Escape the page gutter so tiles can extend past the container edge */
|
||
margin-inline: calc(-1 * var(--page-gutter));
|
||
padding-inline: var(--page-gutter);
|
||
padding-block: var(--space-md) var(--space-lg);
|
||
scroll-padding-inline-start: var(--page-gutter);
|
||
scrollbar-color: var(--color-rule-2) transparent;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
[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;
|
||
}
|
||
}
|
||
|
||
.skill-row__body--study {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.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: target image with overlay punch-list flags */
|
||
.skill-row__demo--audit > .fig-corners {
|
||
display: block;
|
||
position: relative;
|
||
aspect-ratio: 16 / 10;
|
||
overflow: hidden;
|
||
border: var(--rule-card, 1px) solid var(--color-rule);
|
||
}
|
||
|
||
.skill-row__demo--audit img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
object-position: top left;
|
||
}
|
||
|
||
.audit-flags {
|
||
list-style: none;
|
||
margin: 0;
|
||
padding: 0;
|
||
position: absolute;
|
||
inset: 0;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.audit-flag {
|
||
position: absolute;
|
||
top: var(--top);
|
||
left: var(--left);
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
|
||
.audit-flag__num {
|
||
display: grid;
|
||
place-items: center;
|
||
width: 1.75rem;
|
||
height: 1.75rem;
|
||
border-radius: 50%;
|
||
background: var(--color-accent);
|
||
color: var(--color-paper);
|
||
font-family: var(--font-mono);
|
||
font-size: 0.8125rem;
|
||
font-weight: 600;
|
||
line-height: 1;
|
||
box-shadow: 0 0 0 3px var(--color-paper), 0 1px 6px oklch(0% 0 0 / 0.18);
|
||
}
|
||
|
||
[data-theme="manifesto"] .audit-flag__num,
|
||
[data-theme="brutal"] .audit-flag__num { border-radius: 0; }
|
||
|
||
/* 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: 40rem) {
|
||
.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: 6rem 1fr;
|
||
border-bottom: 2px solid var(--color-rule-2);
|
||
padding-bottom: var(--space-md);
|
||
align-items: end;
|
||
}
|
||
[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);
|
||
}
|
||
|