mirror of
https://github.com/Nutlope/hallmark.git
synced 2026-08-14 12:35:33 +02:00
YoussefandClaude Opus 4.7
99e7a065af
Skill: - Genres (editorial · modern-minimal · atmospheric · playful) as a top-level rule overlay; signal-based detection in Step 1, theme rotation now scoped to the genre's cluster - `redesign` on a directory or whole project now produces design.md first and locks every page to that system; diversification rule inverts on system-managed projects - SKILL.md slimmed 532 → ~440 lines: slop-test gates extracted to references/slop-test.md, per-verb sections to references/verbs/, output contract to references/contract.md, with explicit eager / per-build / conditional / end / verb-specific load buckets - Worked examples (recipes.md, study-examples.md) moved out of skill/references/ into docs/ — no longer auto-loaded - audit.md gained design.md drift checks (theme drift · macrostructure-family violation · stamp lies · missing system reference) Site: - Quiet theme refreshed to ElevenLabs-style polished minimal (Geist, pure white, pill CTAs, two-column hero) - New Bloom theme — Suno-style atmospheric dark with twin warm radial blooms, Geist display, single warm accent - Banner additions: sticky Install link, live stamp callout (hover-expands the CSS comment), genre label after the theme name - T-key onboarding tooltip after 5s idle (localStorage-flagged so it never returns) - Decision-trail popover on each example tile (600ms hover delay, pure CSS) - Foundations cut from 8 cards to 5 (Type · Colour · Space · Motion · Voice) - FAQ section added: 5 typographic Q/A pairs, editorial format, tightened spacing - Without/With grew from 1 pair to 4 — writing app · dashboard · pricing card · personal site — with a CSS-only tab toggle - Scroll-jump fix on the W/W tabs: radio inputs no longer position-absolute, so clicking a tab no longer yanks the page back to top - How-it-works section folded out, content absorbed by FAQ + Install - 17 themes (was 16); README and skill references updated everywhere Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
1035 lines
29 KiB
CSS
1035 lines
29 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-2xl);
|
||
}
|
||
|
||
.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 {
|
||
appearance: none;
|
||
-webkit-appearance: none;
|
||
width: 0;
|
||
height: 0;
|
||
margin: 0;
|
||
padding: 0;
|
||
border: 0;
|
||
outline: 0;
|
||
opacity: 0;
|
||
flex: 0 0 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 · 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); }
|
||
|
||
/* — 05 · FAQ — typographic Q/A ——————————————————————————
|
||
Five numbered Q/A pairs in editorial format. Q in display face,
|
||
A in body serif. Tighter than a typical FAQ — meant to scan, not
|
||
loom. Re-typesets per-theme. */
|
||
.faq {
|
||
display: grid;
|
||
gap: 0;
|
||
list-style: none;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
.faq__row {
|
||
display: grid;
|
||
grid-template-columns: 5rem 1fr;
|
||
gap: 0.4rem var(--space-xl);
|
||
align-items: baseline;
|
||
padding-block: var(--space-lg) var(--space-md);
|
||
padding-inline: 0;
|
||
border-block-start: var(--rule-hair) solid var(--color-rule);
|
||
}
|
||
|
||
.faq__row:first-child { border-block-start: 0; padding-block-start: 0; }
|
||
|
||
@media (max-width: 50rem) {
|
||
.faq__row {
|
||
grid-template-columns: 1fr;
|
||
gap: 0.4rem;
|
||
padding-block: var(--space-md);
|
||
}
|
||
}
|
||
|
||
.faq__q-mark {
|
||
margin: 0;
|
||
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";
|
||
align-self: baseline;
|
||
}
|
||
|
||
.faq__qletter {
|
||
font-family: var(--font-display);
|
||
font-style: var(--display-style, normal);
|
||
font-weight: var(--display-weight, 500);
|
||
font-size: 0.875rem;
|
||
letter-spacing: 0;
|
||
text-transform: none;
|
||
color: var(--color-ink);
|
||
margin-inline-end: 0.2em;
|
||
}
|
||
|
||
[data-theme="riso"] .faq__qletter { text-transform: lowercase; }
|
||
[data-theme="brutal"] .faq__qletter,
|
||
[data-theme="manifesto"] .faq__qletter,
|
||
[data-theme="sport"] .faq__qletter { text-transform: uppercase; }
|
||
|
||
.faq__q {
|
||
margin: 0;
|
||
font-family: var(--font-display);
|
||
font-weight: var(--display-weight, 500);
|
||
font-style: var(--display-style, normal);
|
||
font-size: clamp(1.125rem, 1vw + 0.75rem, 1.5rem);
|
||
line-height: var(--lh-snug);
|
||
letter-spacing: var(--tracking-tight);
|
||
color: var(--color-ink);
|
||
font-optical-sizing: auto;
|
||
grid-column: 2;
|
||
}
|
||
|
||
@media (max-width: 50rem) {
|
||
.faq__q { grid-column: 1; }
|
||
}
|
||
|
||
.faq__a {
|
||
margin: 0.4rem 0 0;
|
||
font-family: var(--font-serif);
|
||
font-style: italic;
|
||
font-size: 0.9375rem;
|
||
line-height: var(--lh-normal);
|
||
color: var(--color-ink-2);
|
||
max-width: 64ch;
|
||
grid-column: 2;
|
||
}
|
||
|
||
@media (max-width: 50rem) {
|
||
.faq__a { grid-column: 1; }
|
||
}
|
||
|
||
.faq__a code {
|
||
font-family: var(--font-mono);
|
||
font-style: normal;
|
||
font-size: 0.875em;
|
||
background: var(--color-paper-2);
|
||
padding: 0.05em 0.35em;
|
||
border: 1px solid var(--color-rule);
|
||
border-radius: 2px;
|
||
color: var(--color-ink);
|
||
}
|
||
|
||
.faq__a strong {
|
||
font-weight: 600;
|
||
color: var(--color-ink);
|
||
}
|
||
|
||
.faq__a em {
|
||
font-style: italic;
|
||
font-weight: 500;
|
||
color: var(--color-ink);
|
||
}
|
||
|
||
[data-theme="brutal"] .faq__a,
|
||
[data-theme="manifesto"] .faq__a,
|
||
[data-theme="terminal"] .faq__a,
|
||
[data-theme="sport"] .faq__a,
|
||
[data-theme="almanac"] .faq__a,
|
||
[data-theme="quiet"] .faq__a,
|
||
[data-theme="bloom"] .faq__a {
|
||
font-family: var(--font-body);
|
||
font-style: normal;
|
||
}
|
||
|
||
[data-theme="manifesto"] .faq__q,
|
||
[data-theme="brutal"] .faq__q,
|
||
[data-theme="sport"] .faq__q { text-transform: uppercase; }
|
||
|
||
[data-theme="riso"] .faq__q { text-transform: lowercase; }
|
||
|
||
/* — 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);
|
||
}
|