mirror of
https://github.com/Nutlope/hallmark.git
synced 2026-08-14 12:35:33 +02:00
YoussefandClaude Opus 4.7
2919689cb2
· Examples-rail order: SaaS → wayfare → slow-pour → BananaStudio (moved
from 1st to 4th) → tracejam → anya-loop video (was static) → Najm-loop
(was Foundry static) → Soroe-loop (was Cohort static). Five videos +
three statics now. Five MP4s re-encoded to web (CRF 23–27, +faststart,
no audio).
· Audit demo: swapped the gradient slop placeholder for the new
audit-example.png. Caption removed (no longer reads as "actual slop").
· Redesign uractivation video: dropped data-hover-play so it autoplays
on every device (was hover-only on desktop).
· Footer: "Powered by" → "Made by" (re: the Together AI credit). Base
credit line now left-aligned across all viewports.
· Section labels: forced single-column section heads in every theme via
`.section__head, [data-theme] .section__head { grid-template-columns:
1fr !important }`. Linen + Almanac left-gutter overrides removed —
every section reads label-above-title now.
· Section pulls: deleted every `<a class="section__pull">` ("See the
verbs", "Read the rules", etc.) plus 67 lines of associated CSS. The
banner already provides Install + GitHub; no per-section nav needed.
· Per-theme demo captions ("Lap 1", "Plate I", "Frame 01", etc.)
removed — they appeared in the wrong section ("Lap 1" showed under
Study) and added clutter.
· Display max font sizes tightened across every theme token. Largest
caps were 13rem (Manifesto Anton) → 9rem; multiple 7.5–8rem caps
pulled down to 6.25–6.5rem. Skill-side typography.md now emits
`clamp(2.75rem, 5vw + 1rem, 5.25rem)` as the default --text-display.
· New section: Before / After Hallmark, after Foundations.
Same prompt ("/hallmark build a landing page for The Quiet Hour — a
weekly natural-wine dispatch from Lisbon") run two ways:
- Sonnet 4.6 alone → gradient AI slop (before-quiet-hour.png)
- Sonnet 4.6 + Hallmark → editorial dispatch (after-quiet-hour.png)
Hairline-framed panels with mono prompt at top, italic-serif captions.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2067 lines
58 KiB
CSS
2067 lines
58 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. */
|
||
/* Single-column always — label sits ABOVE title across every theme.
|
||
No theme override should put the label in a left gutter (caused
|
||
uncomfortable wrapping + alignment drift between sections). */
|
||
.section__head,
|
||
[data-theme] .section__head {
|
||
display: grid;
|
||
grid-template-columns: 1fr !important;
|
||
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-size: var(--text-md);
|
||
line-height: var(--lh-snug);
|
||
color: var(--color-ink-2);
|
||
max-width: 60ch;
|
||
margin: 0;
|
||
}
|
||
|
||
|
||
[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: rail spans the full viewport. But the FIRST card
|
||
starts aligned with the page content (same left edge as the
|
||
section header), not flush against the viewport. As the user
|
||
scrolls horizontally, cards travel through the full bleed
|
||
including the viewport edges — only the initial position
|
||
respects the page's content gutter. */
|
||
width: 100vw;
|
||
margin-inline: calc(50% - 50vw);
|
||
--rail-edge: max(var(--page-gutter), calc((100vw - var(--page-max)) / 2 + var(--page-gutter)));
|
||
padding-inline: var(--rail-edge);
|
||
padding-block: var(--space-md) var(--space-lg);
|
||
scroll-padding-inline: var(--rail-edge);
|
||
scrollbar-width: none;
|
||
}
|
||
.examples-rail::-webkit-scrollbar { display: none; }
|
||
|
||
/* Reserve trailing whitespace inside the rail so the last card snaps
|
||
clean to the same content edge as the first. */
|
||
.examples-rail::after {
|
||
content: "";
|
||
flex: 0 0 var(--rail-edge);
|
||
}
|
||
|
||
/* — 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-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-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: 1fr;
|
||
gap: var(--space-xs);
|
||
margin-block-end: var(--space-md);
|
||
}
|
||
|
||
.skill-row__head-body {
|
||
display: grid;
|
||
gap: var(--space-sm);
|
||
max-width: 64ch;
|
||
}
|
||
|
||
.skill-row__title {
|
||
font-family: var(--font-display);
|
||
font-size: clamp(1.4rem, 1.6vw + 0.6rem, 2rem);
|
||
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-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 matches the hero lede + examples intro: same role, same
|
||
typographic treatment per theme. All ledes are roman (no italic) — the
|
||
curly single-storey italic "a" was unanimously bad to read. */
|
||
.skill-row__lede {
|
||
font-family: var(--font-serif);
|
||
font-size: var(--text-md);
|
||
line-height: var(--lh-normal);
|
||
color: var(--color-ink-2);
|
||
margin: 0;
|
||
max-width: 60ch;
|
||
}
|
||
|
||
[data-theme="brutal"] .skill-row__lede,
|
||
[data-theme="manifesto"] .skill-row__lede,
|
||
[data-theme="terminal"] .skill-row__lede,
|
||
[data-theme="sport"] .skill-row__lede,
|
||
[data-theme="almanac"] .skill-row__lede,
|
||
[data-theme="studio"] .skill-row__lede,
|
||
[data-theme="pastel"] .skill-row__lede,
|
||
[data-theme="quiet"] .skill-row__lede,
|
||
[data-theme="bloom"] .skill-row__lede,
|
||
[data-theme="aurora"] .skill-row__lede,
|
||
[data-theme="plume"] .skill-row__lede,
|
||
[data-theme="halo"] .skill-row__lede,
|
||
[data-theme="coral"] .skill-row__lede,
|
||
[data-theme="violet"] .skill-row__lede {
|
||
font-family: var(--font-body);
|
||
font-style: normal;
|
||
}
|
||
|
||
/* Studio: examples intro stays sans to match hero + verb ledes. */
|
||
[data-theme="studio"] .examples__intro {
|
||
font-family: var(--font-body);
|
||
font-style: normal;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
@media (max-width: 60rem) {
|
||
.skill-row__body {
|
||
grid-template-columns: 1fr;
|
||
gap: var(--space-lg);
|
||
}
|
||
}
|
||
|
||
/* Full-width body — no right info column. Used by Redesign so the
|
||
before/after diptych takes the whole row width. */
|
||
.skill-row__body--full {
|
||
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);
|
||
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,
|
||
.brief-output video {
|
||
display: block;
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
object-position: top left;
|
||
}
|
||
|
||
/* — Per-theme .brief-output framing —————————————————————————
|
||
The same demo media reads differently when the FRAME reacts to the
|
||
theme. Border weight, corner style, optional shadow, optional
|
||
per-theme caption. Frame, not content. */
|
||
|
||
/* HARD EDGES + heavier border. */
|
||
[data-theme="brutal"] .brief-output {
|
||
border: 2px solid var(--color-ink);
|
||
border-radius: 0;
|
||
}
|
||
[data-theme="manifesto"] .brief-output {
|
||
border: 3px solid var(--color-ink);
|
||
border-radius: 0;
|
||
}
|
||
[data-theme="terminal"] .brief-output {
|
||
border: 1px solid var(--color-accent);
|
||
border-radius: 0;
|
||
box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--color-accent) 25%, transparent);
|
||
}
|
||
[data-theme="newsprint"] .brief-output {
|
||
border: 2px double var(--color-ink);
|
||
border-radius: 0;
|
||
}
|
||
[data-theme="editorial"] .brief-output {
|
||
border: 0.5px solid var(--color-rule);
|
||
border-radius: 0;
|
||
}
|
||
|
||
/* SLIGHT-RADIUS group (4–6px). */
|
||
[data-theme="sport"] .brief-output {
|
||
border: 1.5px solid var(--color-accent);
|
||
border-radius: 4px;
|
||
}
|
||
[data-theme="almanac"] .brief-output {
|
||
border: 1px solid var(--color-rule);
|
||
border-radius: 4px;
|
||
}
|
||
[data-theme="garden"] .brief-output {
|
||
border: 1px solid var(--color-rule);
|
||
border-radius: 6px;
|
||
}
|
||
[data-theme="halo"] .brief-output {
|
||
border: 1px solid var(--color-rule-2);
|
||
border-radius: 6px;
|
||
box-shadow: 0 0 0 1px color-mix(in oklch, var(--color-accent) 22%, transparent),
|
||
0 0 32px -8px color-mix(in oklch, var(--color-accent) 28%, transparent);
|
||
}
|
||
[data-theme="violet"] .brief-output {
|
||
border: 1px solid var(--color-rule);
|
||
border-radius: 6px;
|
||
}
|
||
[data-theme="studio"] .brief-output {
|
||
border: 0.5px solid var(--color-rule-2);
|
||
border-radius: 6px;
|
||
}
|
||
|
||
/* SOFT-CARD group (8–14px). */
|
||
[data-theme="quiet"] .brief-output { border-radius: 8px; }
|
||
[data-theme="coral"] .brief-output { border-radius: 8px; }
|
||
[data-theme="aurora"] .brief-output {
|
||
border: 1px solid var(--color-rule-2);
|
||
border-radius: 12px;
|
||
box-shadow: 0 0 24px -10px color-mix(in oklch, var(--color-accent) 35%, transparent);
|
||
}
|
||
[data-theme="pastel"] .brief-output {
|
||
border: 1px solid var(--color-rule);
|
||
border-radius: 12px;
|
||
box-shadow: 0 4px 24px -16px oklch(20% 0.04 270 / 0.18);
|
||
}
|
||
[data-theme="plume"] .brief-output {
|
||
border: 1px solid var(--color-rule);
|
||
border-radius: 12px;
|
||
}
|
||
[data-theme="bloom"] .brief-output {
|
||
border: 1px solid var(--color-rule);
|
||
border-radius: 14px;
|
||
box-shadow: 0 6px 24px -14px color-mix(in oklch, var(--color-accent) 22%, transparent);
|
||
}
|
||
|
||
/* Atelier / Salon / Linen — hairline only, no radius, optional caption. */
|
||
[data-theme="atelier"] .brief-output,
|
||
[data-theme="salon"] .brief-output,
|
||
[data-theme="linen"] .brief-output {
|
||
border: 1px solid var(--color-rule-2);
|
||
border-radius: 0;
|
||
}
|
||
|
||
/* Riso — duotone offset shadow, hard 0 radius. */
|
||
[data-theme="riso"] .brief-output {
|
||
border: 2px solid var(--color-ink);
|
||
border-radius: 0;
|
||
box-shadow: 3px 3px 0 var(--color-accent-2, var(--color-accent));
|
||
}
|
||
|
||
/* Midnight — inner glow ring on dark paper. */
|
||
[data-theme="midnight"] .brief-output {
|
||
border: 1px solid var(--color-rule-2);
|
||
box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--color-paper) 25%, transparent);
|
||
}
|
||
|
||
|
||
/* 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;
|
||
}
|
||
|
||
/* Caption above the slop card — frames the gradient as a quoted artifact, not
|
||
a card competing with the page. Mono caps, theme-coloured. */
|
||
.audit-slop__caption {
|
||
display: block;
|
||
margin: 0 0 var(--space-sm) 0;
|
||
font-family: var(--font-label);
|
||
font-size: var(--text-xs);
|
||
letter-spacing: var(--tracking-label);
|
||
text-transform: uppercase;
|
||
color: var(--color-muted);
|
||
}
|
||
|
||
/* Tint the slop card down on dark / charged themes so it stops winning the
|
||
visual contest against the surrounding theme. The card still reads as AI
|
||
slop — purpose retained. */
|
||
[data-theme="midnight"] .audit-slop,
|
||
[data-theme="manifesto"] .audit-slop,
|
||
[data-theme="halo"] .audit-slop,
|
||
[data-theme="aurora"] .audit-slop,
|
||
[data-theme="riso"] .audit-slop,
|
||
[data-theme="terminal"] .audit-slop,
|
||
[data-theme="brutal"] .audit-slop {
|
||
filter: saturate(0.55) brightness(0.82);
|
||
}
|
||
|
||
/* 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,
|
||
.diptych__half video {
|
||
display: block;
|
||
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);
|
||
}
|
||
}
|
||
|
||
/* — Before / After Hallmark ————————————————————————————
|
||
Two screenshots side by side — the same prompt, run two ways. The
|
||
"before" panel is what Sonnet 4.6 alone produces; the "after" is
|
||
the same model with Hallmark loaded. The shared prompt sits above. */
|
||
.ba__prompt {
|
||
margin: 0 0 var(--space-2xl);
|
||
padding: var(--space-md) var(--space-lg);
|
||
background: var(--color-paper-2);
|
||
border: var(--rule-hair) solid var(--color-rule);
|
||
font-family: var(--font-mono);
|
||
font-size: var(--text-sm);
|
||
color: var(--color-ink-2);
|
||
line-height: 1.4;
|
||
font-feature-settings: "tnum";
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
border-radius: var(--radius-input, 0);
|
||
max-width: 100%;
|
||
}
|
||
.ba__prompt-mark {
|
||
color: var(--color-accent);
|
||
font-weight: 500;
|
||
margin-inline-end: 0.5em;
|
||
}
|
||
|
||
.ba {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
||
gap: var(--space-xl);
|
||
}
|
||
|
||
@media (max-width: 56rem) {
|
||
.ba { grid-template-columns: 1fr; gap: var(--space-2xl); }
|
||
}
|
||
|
||
.ba__panel {
|
||
margin: 0;
|
||
display: grid;
|
||
gap: var(--space-md);
|
||
}
|
||
|
||
.ba__panel-label {
|
||
margin: 0;
|
||
font-family: var(--font-label);
|
||
font-size: var(--text-xs);
|
||
letter-spacing: var(--tracking-label);
|
||
text-transform: uppercase;
|
||
color: var(--color-muted);
|
||
}
|
||
|
||
.ba__panel-tag {
|
||
display: inline-block;
|
||
padding: 0.3rem 0.75rem;
|
||
border: var(--rule-hair) solid var(--color-rule-2);
|
||
border-radius: 999px;
|
||
background: var(--color-paper);
|
||
color: var(--color-ink-2);
|
||
letter-spacing: var(--tracking-label);
|
||
}
|
||
|
||
.ba__panel-tag--accent {
|
||
background: var(--color-ink);
|
||
color: var(--color-paper);
|
||
border-color: var(--color-ink);
|
||
}
|
||
|
||
.ba__frame {
|
||
display: block;
|
||
aspect-ratio: 16 / 10;
|
||
overflow: hidden;
|
||
border: var(--rule-hair) solid var(--color-rule);
|
||
background: var(--color-paper-2);
|
||
border-radius: var(--radius-card, 0);
|
||
}
|
||
|
||
.ba__frame img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
object-position: top left;
|
||
display: block;
|
||
}
|
||
|
||
.ba__panel-cap {
|
||
margin: 0;
|
||
font-family: var(--font-serif);
|
||
font-size: var(--text-md);
|
||
line-height: var(--lh-snug);
|
||
color: var(--color-ink-2);
|
||
max-width: 48ch;
|
||
}
|
||
|
||
[data-theme="brutal"] .ba__panel-cap,
|
||
[data-theme="manifesto"] .ba__panel-cap,
|
||
[data-theme="terminal"] .ba__panel-cap,
|
||
[data-theme="sport"] .ba__panel-cap,
|
||
[data-theme="almanac"] .ba__panel-cap,
|
||
[data-theme="quiet"] .ba__panel-cap,
|
||
[data-theme="bloom"] .ba__panel-cap {
|
||
font-family: var(--font-body);
|
||
}
|
||
|
||
/* — 07 · Footer ————————————————————————————————————— */
|
||
/* The "Powered by" accent dot — used by the editorial colophon. */
|
||
.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 — generous spacing, narrow measure, left-aligned ─── */
|
||
[data-theme="atelier"] .opening {
|
||
grid-template-columns: 1fr;
|
||
padding-block: var(--space-3xl) var(--space-xl);
|
||
}
|
||
[data-theme="atelier"] .opening__title {
|
||
max-width: 16ch;
|
||
}
|
||
[data-theme="atelier"] .opening__sub {
|
||
margin-top: var(--space-xl);
|
||
}
|
||
[data-theme="atelier"] .opening__aside {
|
||
display: none;
|
||
}
|
||
[data-theme="atelier"] .section__head {
|
||
grid-template-columns: 1fr;
|
||
border-bottom: 0;
|
||
padding-bottom: var(--space-2xl);
|
||
}
|
||
/* Negative space carries the rhythm — no rules between sections. */
|
||
[data-theme="atelier"] .section + .section {
|
||
padding-block-start: var(--space-3xl);
|
||
}
|
||
[data-theme="atelier"] .section__title {
|
||
max-width: 22ch;
|
||
}
|
||
[data-theme="atelier"] .foundations {
|
||
grid-template-columns: 1fr;
|
||
max-width: 38rem;
|
||
}
|
||
[data-theme="atelier"] .spec {
|
||
border-top: 0;
|
||
border-bottom: var(--rule-hair) solid var(--color-rule);
|
||
padding: var(--space-2xl) 0;
|
||
}
|
||
[data-theme="atelier"] .spec__head {
|
||
gap: var(--space-md);
|
||
}
|
||
[data-theme="atelier"] .step {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
[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); }
|
||
|
||
/* Manifesto — oversized declarative phrases punctuate the rhythm
|
||
between sections. Cycles through 3 statements via :nth-of-type. */
|
||
[data-theme="manifesto"] .section + .section::before {
|
||
display: block;
|
||
margin: var(--space-3xl) 0 var(--space-2xl);
|
||
padding-block: var(--space-md);
|
||
border-block: 4px solid var(--color-ink);
|
||
font-family: var(--font-display);
|
||
font-size: clamp(2rem, 5vw, 4rem);
|
||
line-height: 0.95;
|
||
letter-spacing: -0.02em;
|
||
text-transform: uppercase;
|
||
color: var(--color-ink);
|
||
text-align: center;
|
||
}
|
||
[data-theme="manifesto"] .section:nth-of-type(3)::before { content: "WE DO NOT REPEAT."; }
|
||
[data-theme="manifesto"] .section:nth-of-type(4)::before { content: "TYPE FIRST."; }
|
||
[data-theme="manifesto"] .section:nth-of-type(5)::before { content: "NO GRADIENTS."; }
|
||
[data-theme="manifesto"] .section:nth-of-type(6)::before { content: "DEFAULT IS THE ENEMY."; }
|
||
[data-theme="manifesto"] .section:nth-of-type(7)::before { content: "EVERY DECISION VISIBLE."; }
|
||
[data-theme="manifesto"] .section:nth-of-type(8)::before { content: "THE PAGE IS A POSITION."; }
|
||
|
||
/* ── SALON — italic display, fleuron divider, left-aligned ───── */
|
||
[data-theme="salon"] .opening {
|
||
grid-template-columns: 1fr;
|
||
padding-block: var(--space-3xl) var(--space-xl);
|
||
}
|
||
[data-theme="salon"] .opening__title {
|
||
font-style: italic;
|
||
font-weight: 400;
|
||
max-width: 14ch;
|
||
}
|
||
[data-theme="salon"] .opening__title em {
|
||
font-style: normal;
|
||
font-family: var(--font-display);
|
||
}
|
||
[data-theme="salon"] .opening__sub {
|
||
margin-top: var(--space-xl);
|
||
font-family: var(--font-serif);
|
||
font-style: italic;
|
||
}
|
||
[data-theme="salon"] .opening__aside { display: none; }
|
||
[data-theme="salon"] .section__head {
|
||
grid-template-columns: 1fr;
|
||
border-bottom: 0;
|
||
padding-bottom: var(--space-md);
|
||
}
|
||
[data-theme="salon"] .section__head::after {
|
||
content: "❦";
|
||
display: block;
|
||
color: var(--color-accent);
|
||
font-size: 1.2rem;
|
||
margin-top: var(--space-md);
|
||
font-family: var(--font-serif);
|
||
}
|
||
[data-theme="salon"] .foundations {
|
||
grid-template-columns: 1fr;
|
||
max-width: 36rem;
|
||
}
|
||
|
||
/* ── LINEN — hanging headings, two-column asymmetric, woven texture ─── */
|
||
[data-theme="linen"] .opening { grid-template-columns: 7fr 5fr; gap: var(--space-3xl); }
|
||
/* Section heads hang the label in a left gutter, title in the body column.
|
||
Reads like a printed manuscript margin note + heading. */
|
||
[data-theme="linen"] .section__head {
|
||
grid-template-columns: 1fr;
|
||
gap: var(--space-sm);
|
||
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-sm); }
|
||
[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: 1fr;
|
||
gap: var(--space-sm);
|
||
}
|
||
[data-theme="almanac"] .section__title { font-size: var(--text-xl); }
|
||
/* Almanac calls itself indexed — push the §-number into every section label. */
|
||
[data-theme="almanac"] .section-label::before {
|
||
content: "§ ";
|
||
color: var(--color-accent);
|
||
font-feature-settings: "tnum";
|
||
}
|
||
[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-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-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-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. */
|
||
|
||
/* — 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;
|
||
}
|
||
}
|
||
|