valknar
54a87dc4ed
Remove all BEM component classes (hero__*, card__*, issue-card__*, foot__*, masthead__*, searchpop__*, lb__*) from CSS and templates. Replace with Tailwind v4 utility classes inline in HTML. Create card.html partial to avoid repeating verbose utility strings across grid templates. Rename lightbox CSS to flat lb-* and search popup to sp-*. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
191 lines
11 KiB
CSS
191 lines
11 KiB
CSS
@import "tailwindcss";
|
|
|
|
@theme {
|
|
--color-paper: #f1ebe0;
|
|
--color-paper-2: #e9e1d2;
|
|
--color-ink: #16110d;
|
|
--color-ink-2: #2a221c;
|
|
--color-ink-soft: #5b4f44;
|
|
--color-rule: #cbbfac;
|
|
--color-rule-2: #ddd2bf;
|
|
--color-roux: #8a3322;
|
|
--color-roux-deep:#5c1f17;
|
|
--color-cream: #f7f2e8;
|
|
|
|
--font-display: "Italiana", "Cormorant Garamond", serif;
|
|
--font-serif: "Cormorant Garamond", "EB Garamond", "Times New Roman", serif;
|
|
--font-sans: "Outfit", "Manrope", system-ui, sans-serif;
|
|
--font-mono: "JetBrains Mono", ui-monospace, monospace;
|
|
}
|
|
|
|
/* ── globals ── */
|
|
:root {
|
|
--paper: #f1ebe0;
|
|
--paper-2: #e9e1d2;
|
|
--ink: #16110d;
|
|
--ink-2: #2a221c;
|
|
--ink-soft: #5b4f44;
|
|
--rule: #cbbfac;
|
|
--rule-2: #ddd2bf;
|
|
--roux: #8a3322;
|
|
--roux-deep:#5c1f17;
|
|
--cream: #f7f2e8;
|
|
--serif: "Cormorant Garamond", "EB Garamond", serif;
|
|
--display: "Italiana", "Cormorant Garamond", serif;
|
|
--sans: "Outfit", "Manrope", system-ui, sans-serif;
|
|
--mono: "JetBrains Mono", ui-monospace, monospace;
|
|
--pad: clamp(20px, 4vw, 56px);
|
|
--gap: clamp(18px, 2.6vw, 36px);
|
|
color-scheme: light;
|
|
}
|
|
|
|
*, *::before, *::after { box-sizing: border-box; }
|
|
html, body { margin: 0; padding: 0; }
|
|
|
|
body {
|
|
background: var(--paper);
|
|
color: var(--ink);
|
|
font-family: var(--sans);
|
|
font-feature-settings: "ss01", "cv11";
|
|
font-size: 15px;
|
|
line-height: 1.45;
|
|
-webkit-font-smoothing: antialiased;
|
|
text-rendering: optimizeLegibility;
|
|
}
|
|
|
|
img { display: block; max-width: 100%; }
|
|
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
|
|
a { color: inherit; text-decoration: none; }
|
|
::selection { background: var(--ink); color: var(--paper); }
|
|
|
|
/* ── paper grain overlay ── */
|
|
body::before {
|
|
content: "";
|
|
position: fixed; inset: 0;
|
|
pointer-events: none; z-index: 1; opacity: .06; mix-blend-mode: multiply;
|
|
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.7 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
|
|
}
|
|
|
|
/* ── nav link animated underline ── */
|
|
.nav-link { position: relative; padding-bottom: 2px; transition: color .2s; }
|
|
.nav-link::after {
|
|
content: ""; position: absolute; left: 0; right: 0; bottom: 0;
|
|
height: 1px; background: currentColor;
|
|
transform: scaleX(.5); transform-origin: left;
|
|
transition: transform .25s, background .2s;
|
|
}
|
|
.nav-link:hover { color: var(--ink); }
|
|
.nav-link:hover::after { transform: scaleX(1); background: var(--roux); }
|
|
|
|
/* ── card animation (uses --d CSS custom property for stagger) ── */
|
|
@keyframes rouxIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
|
|
.card { animation: rouxIn .6s cubic-bezier(.2,.7,.2,1) both; animation-delay: var(--d, 0ms); }
|
|
.card:hover .card-img { transform: scale(1.025); }
|
|
|
|
/* ── issue card animation ── */
|
|
[data-issue-card] {
|
|
opacity: 0; transform: translateY(8px);
|
|
animation: rouxIn .65s cubic-bezier(.2,.7,.2,1) forwards;
|
|
animation-delay: var(--d, 0ms);
|
|
}
|
|
@supports (animation-timeline: view()) { [data-issue-card] { opacity: 1; transform: none; animation: none; } }
|
|
|
|
/* ── tabs: JS drives aria-pressed, CSS drives the active look ── */
|
|
.tabs button[aria-pressed="true"] { color: var(--paper); background: var(--ink); border-color: var(--ink); }
|
|
|
|
/* ── search highlight ── */
|
|
mark.hl { background: color-mix(in oklab, var(--roux) 22%, transparent); color: inherit; padding: 0 1px; border-radius: 1px; }
|
|
|
|
/* ── search popup (position + display driven by JS) ── */
|
|
.searchpop {
|
|
position: absolute; top: calc(100% - 1px); left: 0; right: 0;
|
|
background: var(--paper); border: 1px solid var(--rule); border-top: 0;
|
|
max-height: min(70vh, 620px); overflow: auto; display: none; z-index: 60;
|
|
box-shadow: 0 24px 60px -30px rgba(22,17,13,.35);
|
|
}
|
|
.searchpop[data-open="true"] { display: block; }
|
|
.sp-section { padding: 12px var(--pad); border-bottom: 1px solid var(--rule-2); }
|
|
.sp-section:last-child { border-bottom: 0; }
|
|
.sp-label { font: 500 10px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 10px; display: flex; align-items: baseline; gap: 8px; }
|
|
.sp-label small { font-family: var(--mono); letter-spacing: 0; font-size: 10px; }
|
|
.sp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
|
|
.sp-chip { padding: 5px 10px; border: 1px solid var(--rule); border-radius: 999px; font: 500 11px/1 var(--sans); letter-spacing: .06em; color: var(--ink-2); }
|
|
.sp-chip:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
|
|
.sp-chip b { color: var(--roux); font-weight: 600; }
|
|
.sp-hits { display: grid; gap: 2px; }
|
|
.sp-hit { display: grid; grid-template-columns: 44px 1fr auto; gap: 14px; align-items: center; padding: 8px 6px; border-radius: 3px; text-align: left; width: 100%; }
|
|
.sp-hit:hover { background: var(--paper-2); }
|
|
.sp-hit img { width: 44px; height: 66px; object-fit: cover; background: var(--paper-2); }
|
|
.sp-hit .t { font: 400 18px/1.1 var(--display); }
|
|
.sp-hit .s { font: 400 12px/1.3 var(--sans); color: var(--ink-soft); margin-top: 3px; }
|
|
.sp-hit .n { font: 500 10px/1 var(--mono); color: var(--ink-soft); letter-spacing: .1em; }
|
|
|
|
/* ── lightbox ── */
|
|
.lb {
|
|
position: fixed; inset: 0; background: #0c0907; color: #ece7dd; z-index: 200;
|
|
display: none; opacity: 0; transition: opacity .35s ease;
|
|
}
|
|
.lb[data-open="true"] { display: grid; opacity: 1; }
|
|
.lb {
|
|
grid-template-columns: 1fr 380px; grid-template-rows: auto 1fr auto;
|
|
grid-template-areas: "topbar topbar" "stage meta" "thumbs thumbs";
|
|
}
|
|
@media (max-width: 920px) {
|
|
.lb { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto auto; grid-template-areas: "topbar" "stage" "meta" "thumbs"; }
|
|
}
|
|
.lb-topbar { grid-area: topbar; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 22px; border-bottom: 1px solid rgba(236,231,221,.08); }
|
|
.lb-brand { display: flex; align-items: center; gap: 14px; font: 500 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: #c8c0b1; }
|
|
.lb-brand svg { height: 18px; }
|
|
.lb-index { font: 500 11px/1 var(--mono); letter-spacing: .14em; color: #c8c0b1; font-variant-numeric: tabular-nums; }
|
|
.lb-index b { color: #ece7dd; }
|
|
.lb-close { width: 36px; height: 36px; border: 1px solid rgba(236,231,221,.18); border-radius: 50%; display: grid; place-items: center; color: #ece7dd; }
|
|
.lb-close:hover { background: rgba(236,231,221,.08); }
|
|
.lb-stage { grid-area: stage; position: relative; overflow: hidden; display: grid; place-items: center; padding: 24px; min-height: 0; }
|
|
.lb-track { position: absolute; inset: 0; display: flex; transition: transform .55s cubic-bezier(.4,.0,.2,1); will-change: transform; }
|
|
.lb-slide { flex: 0 0 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 24px; min-width: 0; }
|
|
.lb-frame { position: relative; aspect-ratio: 2/3; height: 100%; max-width: 100%; background: #1a1411; box-shadow: 0 30px 80px -20px rgba(0,0,0,.6), 0 0 0 1px rgba(236,231,221,.04); }
|
|
.lb-img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
|
|
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 56px; height: 56px; border-radius: 50%; background: rgba(236,231,221,.06); border: 1px solid rgba(236,231,221,.16); backdrop-filter: blur(8px); display: grid; place-items: center; color: #ece7dd; z-index: 5; transition: background .2s; }
|
|
.lb-nav:hover { background: rgba(236,231,221,.14); }
|
|
.lb-nav-prev { left: 18px; }
|
|
.lb-nav-next { right: 18px; }
|
|
.lb-meta { grid-area: meta; padding: 28px 28px 22px; border-left: 1px solid rgba(236,231,221,.08); display: flex; flex-direction: column; gap: 18px; overflow: auto; }
|
|
@media (max-width: 920px) { .lb-meta { border-left: 0; border-top: 1px solid rgba(236,231,221,.08); padding: 18px 22px; max-height: 38vh; } }
|
|
.lb-cat { font: 500 11px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--roux); }
|
|
.lb-cat::after { content: ""; display: block; height: 1px; width: 30px; background: var(--roux); margin-top: 8px; }
|
|
.lb-title { margin: 0; font: 400 clamp(32px,3vw,44px)/1 var(--display); letter-spacing: -0.005em; color: #f5f0e6; }
|
|
.lb-title em { font-family: var(--serif); font-style: italic; color: #d99e8e; font-weight: 300; }
|
|
.lb-desc { font: 400 16px/1.55 var(--serif); font-style: italic; color: #c8c0b1; }
|
|
.lb-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 22px; border-top: 1px solid rgba(236,231,221,.08); border-bottom: 1px solid rgba(236,231,221,.08); padding: 16px 0; }
|
|
.lb-fact dt { font: 500 10px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: #9b9384; margin-bottom: 5px; }
|
|
.lb-fact dd { margin: 0; font: 400 14px/1.3 var(--serif); color: #ece7dd; }
|
|
.lb-tags { display: flex; flex-wrap: wrap; gap: 6px; }
|
|
.lb-tag { padding: 5px 10px; border: 1px solid rgba(236,231,221,.18); border-radius: 999px; font: 500 10px/1 var(--sans); letter-spacing: .1em; text-transform: lowercase; color: #ece7dd; }
|
|
.lb-tag:hover { background: rgba(236,231,221,.08); }
|
|
.lb-share { margin-top: auto; display: flex; gap: 8px; }
|
|
.lb-sh { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 14px; border: 1px solid rgba(236,231,221,.2); font: 500 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #ece7dd; white-space: nowrap; transition: background .2s, color .2s, border-color .2s; }
|
|
.lb-sh-primary { flex: 1; min-width: 0; }
|
|
.lb-sh:not(.lb-sh-primary) { width: 44px; padding: 11px 0; flex: 0 0 auto; }
|
|
.lb-sh:hover { background: #ece7dd; color: #0c0907; border-color: #ece7dd; }
|
|
.lb-sh.is-ok { background: rgba(236,231,221,.08); color: #ece7dd; border-color: rgba(236,231,221,.32); }
|
|
.lb-thumbs { grid-area: thumbs; display: flex; gap: 6px; padding: 12px 22px 16px; overflow-x: auto; border-top: 1px solid rgba(236,231,221,.08); scrollbar-width: thin; scrollbar-color: rgba(236,231,221,.16) transparent; }
|
|
.lb-thumb { flex: 0 0 auto; width: 42px; aspect-ratio: 2/3; background: #1a1411; border: 1px solid transparent; opacity: .45; transition: opacity .2s, border-color .2s; position: relative; }
|
|
.lb-thumb:hover { opacity: .8; }
|
|
.lb-thumb img { width: 100%; height: 100%; object-fit: cover; }
|
|
.lb-thumb[aria-current="true"] { opacity: 1; border-color: var(--roux); }
|
|
.lb-thumb[aria-current="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 2px; background: var(--roux); }
|
|
|
|
/* ── ribbon ── */
|
|
.ribbon.hidden { transform: translateY(100%); }
|
|
|
|
/* ── view transitions ── */
|
|
::view-transition-old(root) { animation: 150ms ease-out roux-fade-out; }
|
|
::view-transition-new(root) { animation: 220ms ease-in roux-fade-in; }
|
|
@keyframes roux-fade-out { from { opacity: 1; } to { opacity: 0; } }
|
|
@keyframes roux-fade-in { from { opacity: 0; } to { opacity: 1; } }
|
|
|
|
/* ── scrollbar ── */
|
|
::-webkit-scrollbar { width: 10px; height: 10px; }
|
|
::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 0; }
|
|
::-webkit-scrollbar-track { background: transparent; }
|