mirror of
https://github.com/Nutlope/hallmark.git
synced 2026-08-14 12:35:33 +02:00
Youssef
e329dffd5c
Replaces the Study section with a 5-brief comparison gallery built on real headless
`claude -p` runs:
- 5 fresh briefs (Tide coffee · Streak habits · Lattice studio · Loom indie game · Anchor SaaS).
- BEFORE: Hallmark moved out of ~/.claude/skills/, ran `claude -p --model sonnet`.
- AFTER: Hallmark restored, same prompt prefixed with "Use the Hallmark skill at SKILL.md".
- Both sets of HTML committed under site/_tests/before-after/0X/{before,after}/index.html
so the source is browsable.
- 1280×800 thumbnails captured with headless Chrome (script: site/_tests/before-after/_capture.sh).
- Stripped preamble leaks where the model added commentary above <!doctype>.
Section 03 markup mirrors the W/W and Foundations radio+sibling pattern:
- 5 hidden radios, tab strip, side-by-side BEFORE | AFTER below.
- Brief text shown above each comparison.
- Each thumbnail links to the live HTML; Hallmark stamp summarised in caption meta.
- Mobile: tabs scroll horizontally, columns stack.
The five AFTER outputs span 5 different macrostructures (Long Document, Bento Grid,
Marquee Hero ×2, Stat-Led), 5 different themes (Linen, Pastel, Atelier, Bloom, Quiet),
3 different navs (N5, N7, N9), and 4 different footers (Ft5, Ft6, Ft7, Ft8) — actual
diversity, not faked.
1412 lines
38 KiB
CSS
1412 lines
38 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);
|
||
position: relative; /* anchors absolute children (hidden radios) */
|
||
}
|
||
|
||
.section__head {
|
||
display: grid;
|
||
grid-template-columns: 10rem 1fr;
|
||
gap: var(--space-xl);
|
||
align-items: baseline;
|
||
padding-bottom: var(--section-head-gap);
|
||
border-bottom: var(--rule-hair) solid var(--color-rule-2);
|
||
}
|
||
|
||
.section__title {
|
||
font-family: var(--font-display);
|
||
font-weight: var(--display-weight, 400);
|
||
font-style: var(--display-style, normal);
|
||
font-size: var(--text-2xl);
|
||
line-height: var(--lh-snug);
|
||
letter-spacing: var(--tracking-display);
|
||
max-width: 24ch;
|
||
color: var(--color-ink);
|
||
font-optical-sizing: auto;
|
||
}
|
||
|
||
@media (max-width: 48rem) {
|
||
.section__head {
|
||
grid-template-columns: 1fr;
|
||
gap: var(--space-md);
|
||
}
|
||
}
|
||
|
||
/* Narrow viewports — let headings wrap freely + cap display sizes so
|
||
a long title fits at 320–480 px without being clipped by body's
|
||
overflow-x: hidden. */
|
||
@media (max-width: 30rem) {
|
||
.opening__title,
|
||
.hero__display {
|
||
font-size: clamp(1.75rem, 9vw, 2.75rem) !important;
|
||
max-width: 12ch;
|
||
overflow-wrap: break-word;
|
||
word-wrap: break-word;
|
||
hyphens: auto;
|
||
}
|
||
.section__title {
|
||
font-size: clamp(1.375rem, 5.5vw, 1.875rem) !important;
|
||
max-width: 100%;
|
||
overflow-wrap: break-word;
|
||
}
|
||
.hero__lede,
|
||
.opening__sub {
|
||
font-size: 1rem !important;
|
||
max-width: 100%;
|
||
}
|
||
}
|
||
|
||
/* — 01 · Opening ——————————————————————————————————— */
|
||
.opening {
|
||
display: grid;
|
||
grid-template-columns: 8fr 4fr;
|
||
gap: var(--space-2xl);
|
||
padding-block: var(--space-xl) var(--space-lg);
|
||
align-items: end;
|
||
}
|
||
|
||
@media (max-width: 60rem) {
|
||
.opening { grid-template-columns: 1fr; gap: var(--space-xl); align-items: start; }
|
||
}
|
||
|
||
.opening__eyebrow {
|
||
font-family: var(--font-label);
|
||
font-size: var(--text-xs);
|
||
letter-spacing: var(--tracking-label);
|
||
text-transform: uppercase;
|
||
color: var(--color-muted);
|
||
margin-bottom: var(--space-lg);
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.55em;
|
||
}
|
||
|
||
.opening__title {
|
||
font-family: var(--font-display);
|
||
font-weight: var(--display-weight, 400);
|
||
font-style: var(--display-style, normal);
|
||
font-size: var(--text-display);
|
||
line-height: var(--lh-tight);
|
||
letter-spacing: var(--tracking-display);
|
||
color: var(--color-ink);
|
||
max-width: 15ch;
|
||
font-optical-sizing: auto;
|
||
font-variation-settings:
|
||
"opsz" var(--display-optical, 144),
|
||
"SOFT" var(--display-soft, 0);
|
||
}
|
||
|
||
.opening__title em {
|
||
font-family: var(--font-serif);
|
||
font-style: italic;
|
||
font-weight: 400;
|
||
color: var(--color-ink);
|
||
}
|
||
|
||
.opening__sub {
|
||
font-family: var(--font-body);
|
||
font-weight: 400;
|
||
font-size: var(--text-md);
|
||
line-height: var(--lh-normal);
|
||
color: var(--color-ink-2);
|
||
max-width: 42ch;
|
||
margin-top: var(--space-lg);
|
||
}
|
||
|
||
.opening__aside {
|
||
display: grid;
|
||
gap: var(--space-md);
|
||
padding-top: var(--space-xl);
|
||
}
|
||
|
||
.opening__rule {
|
||
height: 0.5rem;
|
||
width: 3rem;
|
||
background: var(--color-accent);
|
||
}
|
||
|
||
.opening__cta {
|
||
display: grid;
|
||
gap: var(--space-sm);
|
||
padding-top: var(--space-md);
|
||
border-top: var(--rule-hair) solid var(--color-rule);
|
||
}
|
||
|
||
/* — 02 · Examples rail (full-bleed) ——————————————————— */
|
||
/* The rail escapes the page gutter on both sides so tiles can flow
|
||
past the max-width. The header above stays inside the gutter. */
|
||
.examples__intro {
|
||
font-family: var(--font-serif);
|
||
font-style: italic;
|
||
font-size: var(--text-md);
|
||
line-height: var(--lh-snug);
|
||
color: var(--color-ink-2);
|
||
max-width: 60ch;
|
||
margin: 0;
|
||
}
|
||
|
||
.examples__intro .examples__hint {
|
||
font-style: normal;
|
||
font-family: var(--font-label);
|
||
font-size: var(--text-xs);
|
||
letter-spacing: var(--tracking-label);
|
||
text-transform: uppercase;
|
||
color: var(--color-muted);
|
||
display: inline-block;
|
||
margin-inline-start: var(--space-md);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
[data-theme="brutal"] .examples__intro,
|
||
[data-theme="manifesto"] .examples__intro,
|
||
[data-theme="terminal"] .examples__intro,
|
||
[data-theme="sport"] .examples__intro,
|
||
[data-theme="almanac"] .examples__intro {
|
||
font-family: var(--font-body);
|
||
font-style: normal;
|
||
}
|
||
|
||
.examples-rail {
|
||
display: flex;
|
||
gap: var(--space-lg);
|
||
overflow-x: auto;
|
||
overflow-y: visible;
|
||
scroll-snap-type: x mandatory;
|
||
/* Escape the page gutter so tiles can extend past the container edge */
|
||
margin-inline: calc(-1 * var(--page-gutter));
|
||
padding-inline: var(--page-gutter);
|
||
padding-block: var(--space-md) var(--space-lg);
|
||
scroll-padding-inline-start: var(--page-gutter);
|
||
scrollbar-color: var(--color-rule-2) transparent;
|
||
}
|
||
|
||
.examples-rail::-webkit-scrollbar { height: 6px; }
|
||
.examples-rail::-webkit-scrollbar-track { background: transparent; }
|
||
.examples-rail::-webkit-scrollbar-thumb { background: var(--color-rule-2); border-radius: 0; }
|
||
|
||
/* — 03 · Without / With (parity panels, four pairs) ——————
|
||
The section holds four W/W pairs that swap based on which toggle
|
||
radio is :checked. Pure CSS, no JS.
|
||
|
||
Scroll-jump fix: the radio inputs sit in normal document flow
|
||
with zero size + opacity 0 (no position:absolute). When the user
|
||
clicks a label, the browser focuses the input — but because the
|
||
input is already in view (right above the toggle), no scroll
|
||
happens. Earlier versions used position:absolute which positioned
|
||
the input at top:0 of the viewport; clicking a label far below
|
||
would scroll the page back to the top. */
|
||
.vs-toggle__input {
|
||
/* Pulled out of the section's grid (otherwise each hidden radio plus each
|
||
hidden .vs panel adds a `var(--space-2xl)` phantom gap between the
|
||
section header and the first visible child). Anchored absolute inside
|
||
the section (which is position: relative) so focus doesn't scroll the
|
||
page back to the viewport top. */
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
appearance: none;
|
||
-webkit-appearance: none;
|
||
width: 0;
|
||
height: 0;
|
||
margin: 0;
|
||
padding: 0;
|
||
border: 0;
|
||
outline: 0;
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.vs-toggle {
|
||
display: inline-flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
gap: 0;
|
||
padding: 0.25rem;
|
||
background: var(--color-paper-2);
|
||
border: 1px solid var(--color-rule);
|
||
border-radius: var(--radius-pill, 999px);
|
||
margin-block-end: var(--space-xl);
|
||
align-self: start;
|
||
max-width: 100%;
|
||
}
|
||
|
||
.vs-toggle__btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.4em;
|
||
padding: 0.45rem 0.95rem;
|
||
font-family: var(--font-label);
|
||
font-size: var(--text-xs);
|
||
letter-spacing: var(--tracking-label);
|
||
text-transform: uppercase;
|
||
color: var(--color-muted);
|
||
cursor: pointer;
|
||
border-radius: var(--radius-pill, 999px);
|
||
transition: background-color var(--dur-micro) var(--ease-out),
|
||
color var(--dur-micro) var(--ease-out);
|
||
user-select: none;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.vs-toggle__btn:hover { color: var(--color-ink); }
|
||
|
||
.vs-toggle__num {
|
||
font-family: var(--font-mono);
|
||
font-size: 0.75em;
|
||
letter-spacing: 0.04em;
|
||
color: inherit;
|
||
opacity: 0.6;
|
||
font-feature-settings: "tnum";
|
||
}
|
||
|
||
.vs-toggle__label {
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* Focus ring on whichever button corresponds to the focused input. */
|
||
#vs-notes:focus-visible ~ .vs-toggle .vs-toggle__btn[for="vs-notes"],
|
||
#vs-dashboard:focus-visible ~ .vs-toggle .vs-toggle__btn[for="vs-dashboard"],
|
||
#vs-pricing:focus-visible ~ .vs-toggle .vs-toggle__btn[for="vs-pricing"],
|
||
#vs-personal:focus-visible ~ .vs-toggle .vs-toggle__btn[for="vs-personal"] {
|
||
outline: 2px solid var(--color-focus);
|
||
outline-offset: 3px;
|
||
}
|
||
|
||
#vs-notes:checked ~ .vs-toggle .vs-toggle__btn[for="vs-notes"],
|
||
#vs-dashboard:checked ~ .vs-toggle .vs-toggle__btn[for="vs-dashboard"],
|
||
#vs-pricing:checked ~ .vs-toggle .vs-toggle__btn[for="vs-pricing"],
|
||
#vs-personal:checked ~ .vs-toggle .vs-toggle__btn[for="vs-personal"] {
|
||
background: var(--color-ink);
|
||
color: var(--color-paper);
|
||
}
|
||
|
||
#vs-notes:checked ~ .vs-toggle .vs-toggle__btn[for="vs-notes"] .vs-toggle__num,
|
||
#vs-dashboard:checked ~ .vs-toggle .vs-toggle__btn[for="vs-dashboard"] .vs-toggle__num,
|
||
#vs-pricing:checked ~ .vs-toggle .vs-toggle__btn[for="vs-pricing"] .vs-toggle__num,
|
||
#vs-personal:checked ~ .vs-toggle .vs-toggle__btn[for="vs-personal"] .vs-toggle__num {
|
||
opacity: 0.85;
|
||
}
|
||
|
||
.vs-pairs { display: contents; }
|
||
|
||
.vs {
|
||
display: none;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: var(--space-lg);
|
||
}
|
||
|
||
#vs-notes:checked ~ .vs-pairs .vs--notes,
|
||
#vs-dashboard:checked ~ .vs-pairs .vs--dashboard,
|
||
#vs-pricing:checked ~ .vs-pairs .vs--pricing,
|
||
#vs-personal:checked ~ .vs-pairs .vs--personal {
|
||
display: grid;
|
||
}
|
||
|
||
@media (max-width: 50rem) {
|
||
.vs { grid-template-columns: 1fr; }
|
||
}
|
||
|
||
.vs__col {
|
||
display: grid;
|
||
grid-template-rows: auto 1fr auto;
|
||
gap: var(--space-md);
|
||
}
|
||
|
||
.vs__head {
|
||
padding-bottom: var(--space-sm);
|
||
border-bottom: var(--rule-hair) solid var(--color-rule);
|
||
}
|
||
|
||
.vs__label {
|
||
font-family: var(--font-label);
|
||
font-size: var(--text-xs);
|
||
letter-spacing: var(--tracking-label);
|
||
text-transform: uppercase;
|
||
color: var(--color-muted);
|
||
}
|
||
|
||
.vs__caption {
|
||
font-family: var(--font-body);
|
||
font-size: var(--text-sm);
|
||
color: var(--color-neutral);
|
||
line-height: var(--lh-normal);
|
||
}
|
||
|
||
/* — 04 · Foundations mosaic ——————————————————————————
|
||
Auto-fit grid with feature cards (F/01 Type, F/02 Colour) and the
|
||
closing strip (F/08 Anti-patterns) spanning the full row for breathing
|
||
room on their richer illustrations. Other cards pack 2-3 per row
|
||
depending on viewport. */
|
||
.foundations {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
|
||
gap: var(--space-xl) var(--space-2xl);
|
||
}
|
||
|
||
.spec--feature,
|
||
.spec--strip {
|
||
grid-column: 1 / -1;
|
||
}
|
||
|
||
@media (max-width: 56rem) {
|
||
.foundations { grid-template-columns: 1fr; gap: 0; }
|
||
.spec--feature, .spec--strip { grid-column: auto; }
|
||
}
|
||
|
||
/* — 05 · Foundations as vertical list + active panel ———————
|
||
Five clickable names on the left; the active card's rule + visual
|
||
demo on the right. Pure CSS via :checked + sibling selectors —
|
||
the radios sit absolutely-positioned (out of flow, like the W/W
|
||
toggle radios). Fits in ~one viewport on desktop. */
|
||
.found-toggle__input {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
appearance: none;
|
||
-webkit-appearance: none;
|
||
width: 0;
|
||
height: 0;
|
||
margin: 0;
|
||
padding: 0;
|
||
border: 0;
|
||
outline: 0;
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.found-grid {
|
||
display: grid;
|
||
grid-template-columns: 14rem 1fr;
|
||
gap: var(--space-2xl);
|
||
align-items: start;
|
||
}
|
||
|
||
@media (max-width: 60rem) {
|
||
.found-grid {
|
||
grid-template-columns: 1fr;
|
||
gap: 0;
|
||
}
|
||
}
|
||
|
||
.found-nav {
|
||
list-style: none;
|
||
margin: 0;
|
||
padding: 0;
|
||
display: grid;
|
||
gap: 0;
|
||
border-block-start: var(--rule-hair) solid var(--color-rule);
|
||
}
|
||
|
||
.found-nav li { margin: 0; }
|
||
|
||
@media (max-width: 60rem) {
|
||
.found-nav { display: contents; }
|
||
}
|
||
|
||
/* — 05 · How it works ——————————————————————————————— */
|
||
.how { display: grid; gap: var(--space-xl); }
|
||
|
||
.step {
|
||
display: grid;
|
||
grid-template-columns: 3rem 1fr 2fr;
|
||
gap: var(--space-lg);
|
||
align-items: start;
|
||
padding-top: var(--space-lg);
|
||
border-top: var(--rule-hair) solid var(--color-rule);
|
||
}
|
||
|
||
@media (max-width: 50rem) {
|
||
.step { grid-template-columns: 1fr; gap: var(--space-sm); }
|
||
}
|
||
|
||
.step__num {
|
||
font-family: var(--font-label);
|
||
font-weight: 500;
|
||
font-size: var(--text-md);
|
||
color: var(--color-ink);
|
||
letter-spacing: 0.08em;
|
||
}
|
||
|
||
.step__head {
|
||
font-family: var(--font-display);
|
||
font-weight: var(--display-weight, 400);
|
||
font-style: var(--display-style, normal);
|
||
font-size: var(--text-lg);
|
||
line-height: var(--lh-snug);
|
||
letter-spacing: var(--tracking-tight);
|
||
color: var(--color-ink);
|
||
font-optical-sizing: auto;
|
||
}
|
||
|
||
.step__sub {
|
||
font-family: var(--font-body);
|
||
font-size: var(--text-sm);
|
||
color: var(--color-neutral);
|
||
margin-top: var(--space-xs);
|
||
max-width: 40ch;
|
||
line-height: var(--lh-normal);
|
||
}
|
||
|
||
.step__body { display: grid; gap: var(--space-sm); }
|
||
|
||
/* — 03 · Study — DNA extraction gallery —————————————————
|
||
Four tiles. Each pairs a video-shaped media slot (poster image
|
||
when no <source> is supplied, otherwise an autoplay-muted-loop
|
||
screen recording) with the structured 10-field DNA panel. The
|
||
panel is a tabular key/value layout — mono key, body value. */
|
||
.study__intro {
|
||
margin: 0 0 var(--space-2xl);
|
||
font-family: var(--font-serif);
|
||
font-style: italic;
|
||
font-size: var(--text-md);
|
||
line-height: var(--lh-snug);
|
||
color: var(--color-ink-2);
|
||
max-width: 60ch;
|
||
}
|
||
|
||
.study__intro code {
|
||
font-family: var(--font-mono);
|
||
font-style: normal;
|
||
font-size: 0.875em;
|
||
background: var(--color-paper-2);
|
||
padding: 0.05em 0.35em;
|
||
border: var(--rule-hair) solid var(--color-rule);
|
||
color: var(--color-ink);
|
||
}
|
||
|
||
[data-theme="brutal"] .study__intro,
|
||
[data-theme="manifesto"] .study__intro,
|
||
[data-theme="terminal"] .study__intro,
|
||
[data-theme="sport"] .study__intro,
|
||
[data-theme="almanac"] .study__intro,
|
||
[data-theme="quiet"] .study__intro,
|
||
[data-theme="bloom"] .study__intro {
|
||
font-family: var(--font-body);
|
||
font-style: normal;
|
||
}
|
||
|
||
.study-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: var(--space-2xl) var(--space-xl);
|
||
}
|
||
|
||
@media (max-width: 60rem) {
|
||
.study-grid { grid-template-columns: 1fr; gap: var(--space-2xl); }
|
||
}
|
||
|
||
/* — 06 · 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);
|
||
}
|
||
|
||
/* — 03 · Before · After (5 fresh briefs, real Claude Code outputs) ——————
|
||
Same pure-CSS tab pattern as W/W (Section 04) and Foundations (Section 05).
|
||
Five hidden radios + sibling selectors switch the active panel. */
|
||
|
||
.ba__intro {
|
||
font-size: var(--text-md);
|
||
color: var(--color-ink-muted, var(--color-muted));
|
||
max-width: 70ch;
|
||
line-height: 1.55;
|
||
margin: 0;
|
||
}
|
||
|
||
.ba__intro code {
|
||
font-family: var(--font-mono);
|
||
font-size: 0.92em;
|
||
background: var(--color-paper-2);
|
||
padding: 0.05em 0.4em;
|
||
border-radius: 3px;
|
||
border: var(--rule-hair) solid var(--color-rule);
|
||
}
|
||
|
||
.ba__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;
|
||
}
|
||
|
||
.ba {
|
||
display: grid;
|
||
gap: var(--space-xl);
|
||
}
|
||
|
||
.ba__tabs {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 0;
|
||
padding: 0;
|
||
margin: 0;
|
||
list-style: none;
|
||
border-bottom: var(--rule-hair) solid var(--color-rule);
|
||
}
|
||
|
||
.ba__tabs > li {
|
||
display: contents;
|
||
}
|
||
|
||
.ba__tab {
|
||
display: inline-flex;
|
||
align-items: baseline;
|
||
gap: 0.45em;
|
||
padding: 0.7rem 1rem;
|
||
border-bottom: 2px solid transparent;
|
||
margin-bottom: -1px; /* let the active border overlap the tabs underline */
|
||
cursor: pointer;
|
||
user-select: none;
|
||
color: var(--color-muted);
|
||
transition: color var(--dur-micro) var(--ease-out),
|
||
border-color var(--dur-micro) var(--ease-out);
|
||
white-space: nowrap;
|
||
position: relative;
|
||
}
|
||
|
||
.ba__tab:hover { color: var(--color-ink); }
|
||
|
||
.ba__tab-num {
|
||
font-family: var(--font-mono);
|
||
font-size: var(--text-xs);
|
||
letter-spacing: 0.04em;
|
||
font-feature-settings: "tnum";
|
||
color: inherit;
|
||
opacity: 0.65;
|
||
}
|
||
|
||
.ba__tab-name {
|
||
font-family: var(--font-display);
|
||
font-weight: 500;
|
||
font-size: var(--text-md);
|
||
color: inherit;
|
||
}
|
||
|
||
.ba__tab-kind {
|
||
font-size: var(--text-xs);
|
||
color: var(--color-muted);
|
||
font-style: italic;
|
||
}
|
||
|
||
.ba__tab-dot {
|
||
display: inline-block;
|
||
width: 6px;
|
||
height: 6px;
|
||
border-radius: 999px;
|
||
background: transparent;
|
||
margin-left: 0.2em;
|
||
transition: background-color var(--dur-micro) var(--ease-out);
|
||
}
|
||
|
||
/* Active tab — accent dot + ink colour + underline (via border) */
|
||
#ba-1:checked ~ .ba .ba__tabs .ba__tab[data-tab="1"],
|
||
#ba-2:checked ~ .ba .ba__tabs .ba__tab[data-tab="2"],
|
||
#ba-3:checked ~ .ba .ba__tabs .ba__tab[data-tab="3"],
|
||
#ba-4:checked ~ .ba .ba__tabs .ba__tab[data-tab="4"],
|
||
#ba-5:checked ~ .ba .ba__tabs .ba__tab[data-tab="5"] {
|
||
color: var(--color-ink);
|
||
border-bottom-color: var(--color-ink);
|
||
}
|
||
|
||
#ba-1:checked ~ .ba .ba__tabs .ba__tab[data-tab="1"] .ba__tab-dot,
|
||
#ba-2:checked ~ .ba .ba__tabs .ba__tab[data-tab="2"] .ba__tab-dot,
|
||
#ba-3:checked ~ .ba .ba__tabs .ba__tab[data-tab="3"] .ba__tab-dot,
|
||
#ba-4:checked ~ .ba .ba__tabs .ba__tab[data-tab="4"] .ba__tab-dot,
|
||
#ba-5:checked ~ .ba .ba__tabs .ba__tab[data-tab="5"] .ba__tab-dot {
|
||
background: var(--color-accent);
|
||
}
|
||
|
||
/* Focus ring on whichever tab corresponds to the focused radio */
|
||
#ba-1:focus-visible ~ .ba .ba__tabs .ba__tab[data-tab="1"],
|
||
#ba-2:focus-visible ~ .ba .ba__tabs .ba__tab[data-tab="2"],
|
||
#ba-3:focus-visible ~ .ba .ba__tabs .ba__tab[data-tab="3"],
|
||
#ba-4:focus-visible ~ .ba .ba__tabs .ba__tab[data-tab="4"],
|
||
#ba-5:focus-visible ~ .ba .ba__tabs .ba__tab[data-tab="5"] {
|
||
outline: 2px solid var(--color-focus);
|
||
outline-offset: 4px;
|
||
}
|
||
|
||
.ba__panels { display: contents; }
|
||
|
||
.ba__panel {
|
||
display: none;
|
||
gap: var(--space-md);
|
||
}
|
||
|
||
#ba-1:checked ~ .ba .ba__panels .ba__panel[data-panel="1"],
|
||
#ba-2:checked ~ .ba .ba__panels .ba__panel[data-panel="2"],
|
||
#ba-3:checked ~ .ba .ba__panels .ba__panel[data-panel="3"],
|
||
#ba-4:checked ~ .ba .ba__panels .ba__panel[data-panel="4"],
|
||
#ba-5:checked ~ .ba .ba__panels .ba__panel[data-panel="5"] {
|
||
display: grid;
|
||
}
|
||
|
||
.ba__brief {
|
||
font-size: var(--text-md);
|
||
line-height: 1.55;
|
||
color: var(--color-ink);
|
||
max-width: 70ch;
|
||
margin: 0;
|
||
font-style: italic;
|
||
}
|
||
|
||
.ba__brief-label {
|
||
display: inline-block;
|
||
font-family: var(--font-mono);
|
||
font-style: normal;
|
||
font-size: var(--text-xs);
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
color: var(--color-muted);
|
||
margin-right: 0.5em;
|
||
}
|
||
|
||
.ba__split {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: var(--space-md);
|
||
}
|
||
|
||
.ba__col {
|
||
display: grid;
|
||
gap: var(--space-2xs);
|
||
margin: 0;
|
||
}
|
||
|
||
.ba__cap {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: baseline;
|
||
gap: var(--space-sm);
|
||
padding-block-end: var(--space-2xs);
|
||
}
|
||
|
||
.ba__cap-label {
|
||
font-family: var(--font-mono);
|
||
font-size: var(--text-xs);
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
color: var(--color-muted);
|
||
}
|
||
|
||
.ba__col--after .ba__cap-label {
|
||
color: var(--color-accent);
|
||
}
|
||
|
||
.ba__cap-meta {
|
||
font-family: var(--font-mono);
|
||
font-size: 0.7rem;
|
||
letter-spacing: 0.04em;
|
||
color: var(--color-muted);
|
||
opacity: 0.75;
|
||
text-align: right;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.ba__shot {
|
||
position: relative;
|
||
display: block;
|
||
aspect-ratio: 16 / 10;
|
||
background: var(--color-paper-2);
|
||
border: var(--rule-hair) solid var(--color-rule);
|
||
overflow: hidden;
|
||
text-decoration: none;
|
||
color: inherit;
|
||
transition: border-color var(--dur-micro) var(--ease-out),
|
||
transform var(--dur-micro) var(--ease-out);
|
||
}
|
||
|
||
.ba__shot img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
object-position: top center;
|
||
display: block;
|
||
}
|
||
|
||
.ba__shot:hover { border-color: var(--color-ink); }
|
||
.ba__shot:hover .ba__open { opacity: 1; transform: translateY(0); }
|
||
.ba__shot:focus-visible {
|
||
outline: 2px solid var(--color-focus);
|
||
outline-offset: 3px;
|
||
}
|
||
|
||
.ba__open {
|
||
position: absolute;
|
||
inset: auto var(--space-2xs) var(--space-2xs) auto;
|
||
padding: 0.35rem 0.7rem;
|
||
background: var(--color-ink);
|
||
color: var(--color-paper);
|
||
font-family: var(--font-mono);
|
||
font-size: var(--text-xs);
|
||
letter-spacing: 0.04em;
|
||
border-radius: 3px;
|
||
opacity: 0;
|
||
transform: translateY(2px);
|
||
transition: opacity var(--dur-micro) var(--ease-out),
|
||
transform var(--dur-micro) var(--ease-out);
|
||
pointer-events: none;
|
||
}
|
||
|
||
@media (max-width: 60rem) {
|
||
.ba__split { grid-template-columns: 1fr; }
|
||
.ba__tabs { gap: var(--space-2xs); overflow-x: auto; flex-wrap: nowrap; }
|
||
.ba__tab { padding-inline: 0.6rem; }
|
||
.ba__tab-kind { display: none; }
|
||
.ba__open { opacity: 1; transform: none; } /* always visible on touch */
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.ba__shot,
|
||
.ba__open,
|
||
.ba__tab,
|
||
.ba__tab-dot { transition: none; }
|
||
}
|