mirror of
https://github.com/Nutlope/hallmark.git
synced 2026-08-14 12:35:33 +02:00
YoussefandClaude Opus 4.7
ddfcd6a283
## Banner - Combine .banner__random + .banner__kbd into one .banner__shuffle pill. - New SVG: Lucide-style shuffle (two crossing arrows). Old icon clipped at the viewBox edges; this one is sized 24×24 with stroke well inside. - Click randomises (was already so); icon rotates 15° on hover; T kbd label inside the pill as a hint, separated by a small vertical rule. - Banner now uses display:flex with a spacer so the theme-name sits immediately to the LEFT of the picker (closer, smaller text 0.95rem) rather than centered far from the dots. - New responsive breakpoints: 50rem (smaller dots), 44rem (hide picker entirely on phones, keep mark + name + shuffle), 26rem (drop name). - Shuffle now sits OUTSIDE the picker so it stays visible when the picker is hidden on narrow screens. ## Gallery thumb fit - Width was `100%` which only fills the content-area, leaving padding visible to the right (negative margin-right doesn't extend element width). Switched to `width: calc(100% + 2 * var(--space-lg))` so the thumb truly bleeds to the card's inner-border on both sides. - Added explicit `aspect-ratio: 16/10` + `object-fit: cover` + `object-position: top left` so the thumb crops from the right (where empty page-paper tends to live) rather than top/bottom (where hero content usually is). - Re-captured all 8 thumbnails at 1024×640 (matches the most common page content max-width — Maple Bakery is 64rem = 1024px exactly), so each page packs content closer to the right edge. ## Salon: centered examples intro - Salon already centers .section__title; the .examples__intro lead paragraph below it was left-aligned, looking off-axis on the centered Salon section heads. Now centers with `text-align: center` + `margin-inline: auto` for both .examples__intro and .examples__outro. ## Responsive headings (narrow viewports) - At <30rem viewports, .opening__title and .hero__display were rendering at min ~48px which is wider than the 320–375px content area for headers longer than ~14ch. Body's `overflow-x: hidden` was masking the issue visually but text was being clipped. - New media query caps display at clamp(1.75rem, 9vw, 2.75rem) and forces `max-width: 12ch` so long headers wrap. - .section__title gets clamp(1.375rem, 5.5vw, 1.875rem) + 100% max-width so multi-clause section titles wrap to multiple lines instead of being clipped. - .hero__lede / .opening__sub get 1rem font-size + 100% max-width on narrow viewports so the lede paragraph fits. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
794 lines
23 KiB
CSS
794 lines
23 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 · Problem (vs) ——————————————————————————————— */
|
||
.vs {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 0;
|
||
border: var(--rule-hair) solid var(--color-rule-2);
|
||
}
|
||
|
||
@media (max-width: 50rem) {
|
||
.vs { grid-template-columns: 1fr; }
|
||
.vs__col:first-child { border-right: 0; border-bottom: var(--rule-hair) solid var(--color-rule-2); }
|
||
}
|
||
|
||
.vs__col {
|
||
padding: var(--space-xl);
|
||
display: grid;
|
||
gap: var(--space-md);
|
||
}
|
||
|
||
.vs__col:first-child {
|
||
border-right: var(--rule-hair) solid var(--color-rule-2);
|
||
background: var(--color-paper-2);
|
||
}
|
||
|
||
.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);
|
||
max-width: 44ch;
|
||
line-height: var(--lh-normal);
|
||
}
|
||
|
||
.vs__demo {
|
||
min-height: 12rem;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.vs__demo--good {
|
||
display: grid;
|
||
place-content: start;
|
||
gap: 0.75rem;
|
||
padding: 1.25rem;
|
||
background: var(--color-paper);
|
||
}
|
||
|
||
.vs__demo--good .label { color: var(--color-muted); }
|
||
|
||
.vs__demo--good .title {
|
||
font-family: var(--font-display);
|
||
font-weight: var(--display-weight, 400);
|
||
font-style: var(--display-style, normal);
|
||
font-size: 2rem;
|
||
line-height: 1.05;
|
||
letter-spacing: -0.03em;
|
||
color: var(--color-ink);
|
||
max-width: 10ch;
|
||
font-optical-sizing: auto;
|
||
}
|
||
|
||
.vs__demo--good .title em {
|
||
font-family: var(--font-serif);
|
||
font-style: italic;
|
||
font-weight: 400;
|
||
}
|
||
|
||
/* — 03 · Foundations grid ——————————————————————————— */
|
||
.foundations {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: var(--space-2xl) var(--space-2xl);
|
||
}
|
||
|
||
@media (max-width: 56rem) {
|
||
.foundations { grid-template-columns: 1fr; gap: 0; }
|
||
}
|
||
|
||
/* — 04 · Gallery rail ——————————————————————————————— */
|
||
.rail {
|
||
display: flex;
|
||
gap: var(--space-md);
|
||
overflow-x: auto;
|
||
overflow-y: hidden;
|
||
scroll-snap-type: x mandatory;
|
||
padding-bottom: var(--space-sm);
|
||
scrollbar-color: var(--color-rule-2) transparent;
|
||
}
|
||
|
||
.rail::-webkit-scrollbar { height: 6px; }
|
||
.rail::-webkit-scrollbar-track { background: transparent; }
|
||
.rail::-webkit-scrollbar-thumb { background: var(--color-rule-2); border-radius: 0; }
|
||
|
||
/* — 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); }
|
||
|
||
/* — 06 · Install blocks ————————————————————————————— */
|
||
.installs {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: var(--space-xl);
|
||
}
|
||
|
||
@media (max-width: 40rem) { .installs { grid-template-columns: 1fr; } }
|
||
|
||
/* — 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"] .vs__col:first-child { background: var(--color-paper-3); }
|
||
[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"] .vs { border: 3px solid var(--color-ink); }
|
||
[data-theme="manifesto"] .vs__col:first-child {
|
||
background: var(--color-ink);
|
||
color: var(--color-paper);
|
||
}
|
||
[data-theme="manifesto"] .vs__col:first-child .vs__label,
|
||
[data-theme="manifesto"] .vs__col:first-child .vs__caption {
|
||
color: var(--color-paper);
|
||
}
|
||
[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"] .vs__col:first-child {
|
||
background: var(--color-accent);
|
||
color: var(--color-paper);
|
||
}
|
||
[data-theme="sport"] .vs__col:first-child .vs__label,
|
||
[data-theme="sport"] .vs__col:first-child .vs__caption {
|
||
color: var(--color-paper);
|
||
}
|
||
[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);
|
||
}
|
||
[data-theme="brutal"] .vs__col:first-child {
|
||
background: var(--color-accent);
|
||
color: var(--color-paper);
|
||
}
|
||
[data-theme="brutal"] .vs__col:first-child .vs__label,
|
||
[data-theme="brutal"] .vs__col:first-child .vs__caption {
|
||
color: var(--color-paper);
|
||
}
|
||
|
||
/* ── 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);
|
||
}
|