mirror of
https://github.com/Nutlope/hallmark.git
synced 2026-08-14 12:35:33 +02:00
Youssef
2be80bb60c
The 8 newer themes were too clustered around oklch(94-96%, low-chroma, warm-hue) — visually all "warm cream + serif" variants. Users couldn't tell them apart so it felt like the picker was broken for those entries. Spread the 12 paper colours across the OKLCH space so each theme owns a distinct point (dark / saturated / desaturated / warm / cool): - Specimen warm oat oklch(96 .018 80) - Newsprint salmon-pink oklch(92 .045 50) ← FT-pink - Atelier cool cream oklch(94 .005 60) ← low chroma luxury - Garden pale sage oklch(95 .030 130) - Salon warm ivory oklch(94 .030 65) - Linen desat. linen oklch(89 .022 95) - Midnight cool charcoal oklch(15 .022 250) ← was warm; now cool - Terminal green-black oklch(11 .018 145) - Almanac cool pale oklch(94 .008 245) ← cool, was warm - Brutal near-pure white oklch(98 .001 0) - Manifesto near-pure black oklch(10 .005 60) ← inverse of Brutal - Sport crisp white oklch(98 .003 250) Display fonts now span category-level differences, not "different serifs": Fraunces / The Future / Space Grotesk / Cormorant italic / Playfair 900 / Crimson Pro / JetBrains Mono / Anton (added) / IBM Plex Mono (Salon) / IBM Plex Sans Light / Bricolage Grotesque / Bricolage Grotesque italic. Signature structural moves added: - Newsprint: drop cap on the lede in accent burgundy - Linen: barely-visible woven-cloth checkerboard (3% opacity) - Almanac: faint vertical grid lines across the page (graph paper) Plus new fonts in @import (Playfair Display weights, Anton). Plus swatch dots in the picker now mirror the new tokens. Result: every theme is unmistakably distinct at first glance — no more "did clicking that do anything?".
782 lines
22 KiB
CSS
782 lines
22 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-lg) var(--space-4xl);
|
|
}
|
|
|
|
/* — Nav ————————————————————————————————————————————— */
|
|
.nav {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--space-lg);
|
|
padding-block: var(--space-md);
|
|
}
|
|
|
|
.nav__meta {
|
|
font-family: var(--font-label);
|
|
font-size: var(--text-xs);
|
|
color: var(--color-muted);
|
|
letter-spacing: var(--tracking-label);
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.nav__meta a { color: var(--color-ink); }
|
|
|
|
/* — 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);
|
|
}
|
|
}
|
|
|
|
/* — 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);
|
|
}
|