/* =========================================================
LinkVault — Pure-CSS, no dependencies, no web fonts.
Theme via [data-theme] on . System font stack.
Glassmorphic design system.
========================================================= */
*, *::before, *::after { box-sizing: border-box; }
:root {
/* TYPOGRAPHY SCALE */
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
--font-mono: "SF Mono", ui-monospace, Menlo, Monaco, "Cascadia Code", Consolas, "Liberation Mono", monospace;
--fs-xs: 0.78rem;
--fs-sm: 0.875rem;
--fs-md: 1rem;
--fs-lg: 1.125rem;
--fs-xl: 1.375rem;
--fs-2xl: 1.75rem;
--fs-3xl: clamp(2rem, 5vw + 1rem, 3.25rem);
--lh-tight: 1.15;
--lh-base: 1.7;
/* LAYOUT TOKENS */
--radius-xs: 2px;
--radius-sm: 6px;
--radius-md: 10px;
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.5rem;
--space-line: 1lh; /* semantic: 1lh of body text */
--space-6: 2rem;
--space-8: 3rem;
--space-10: 4.5rem;
--container: 1200px;
--header-h: 64px;
/* THEME: DARK (default). Overridden under [data-theme="light"] */
--bg: #140a0c;
--bg-elev: #1f1214;
--bg-block: #2a1a1c;
--bg-block-2: #3a2426;
--fg: #f5ede4;
--fg-muted: #c4a896;
--fg-soft: #b09c8c;
--border: #3a2426;
--border-strong:#5a3838;
--accent: #f43f5e;
--accent-fg: #140a0c;
--accent-soft: #3a1820;
--danger: #f87171;
--shadow: 0 6px 32px rgba(0,0,0,0.3);
--ad-bg: #2a1a1c;
--ad-empty: #1f1214;
/* GLASS TOKENS (dark) */
--glass-bg: rgba(20, 10, 12, 0.72);
--glass-bg-hover: rgba(28, 16, 18, 0.82);
--glass-bg-strong: rgba(24, 14, 16, 0.85);
--glass-border: rgba(255, 255, 255, 0.06);
--glass-border-hover: rgba(255, 255, 255, 0.12);
--glass-highlight: rgba(255, 255, 255, 0.03);
--glass-blur: 14px;
--glass-blur-strong: 20px;
--glass-shadow: 0 8px 40px rgba(0, 0, 0, 0.35), 0 1px 0 rgba(255, 255, 255, 0.04) inset;
--glass-shadow-sm: 0 4px 20px rgba(0, 0, 0, 0.25), 0 1px 0 rgba(255, 255, 255, 0.03) inset;
/* BACKGROUND ORBS (animated gradient blobs behind glass) */
--orb-1: rgba(244, 63, 94, 0.08);
--orb-2: rgba(139, 92, 246, 0.05);
--orb-3: rgba(236, 72, 153, 0.04);
color-scheme: dark;
}
[data-theme="light"] {
--bg: #faf6f0;
--bg-elev: #fffbf5;
--bg-block: #f3ebe0;
--bg-block-2: #ebe0d0;
--fg: #2a1a14;
--fg-muted: #6b5448;
--fg-soft: #6e5c4e;
--border: #e8dcc8;
--border-strong:#c8b496;
--accent: #be123c;
--accent-fg: #ffffff;
--accent-soft: #fce4e6;
--danger: #b91c1c;
--shadow: 0 2px 12px rgba(0,0,0,0.12);
--ad-bg: #ebe0d0;
--ad-empty: #f3ebe0;
/* GLASS TOKENS (light) */
--glass-bg: rgba(255, 250, 242, 0.60);
--glass-bg-hover: rgba(255, 252, 248, 0.72);
--glass-bg-strong: rgba(250, 245, 235, 0.70);
--glass-border: rgba(0, 0, 0, 0.06);
--glass-border-hover: rgba(0, 0, 0, 0.10);
--glass-highlight: rgba(255, 255, 255, 0.50);
--glass-blur: 14px;
--glass-blur-strong: 20px;
--glass-shadow: 0 8px 40px rgba(0, 0, 0, 0.08), 0 1px 0 rgba(255, 255, 255, 0.6) inset;
--glass-shadow-sm: 0 4px 20px rgba(0, 0, 0, 0.06), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
/* BACKGROUND ORBS (light) */
--orb-1: rgba(190, 18, 60, 0.06);
--orb-2: rgba(109, 40, 217, 0.04);
--orb-3: rgba(219, 39, 119, 0.03);
color-scheme: light;
}
/* ============== BASE ============== */
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body {
margin: 0;
font-family: var(--font-sans);
font-size: var(--fs-lg);
line-height: var(--lh-base);
background: var(--bg);
color: var(--fg);
-webkit-font-smoothing: antialiased;
text-rendering: auto;
display: flex;
flex-direction: column;
min-height: 100dvh;
position: relative;
isolation: isolate;
}
/* ---- Ambient background (soft orbs only, no grid) ---- */
body::before {
content: "";
position: fixed;
inset: 0;
z-index: -2;
background:
radial-gradient(ellipse 80% 60% at 20% 10%, var(--orb-1), transparent 70%),
radial-gradient(ellipse 60% 50% at 80% 60%, var(--orb-2), transparent 70%),
radial-gradient(ellipse 70% 50% at 50% 90%, var(--orb-3), transparent 70%),
var(--bg);
pointer-events: none;
}
/* Subtle animated orbs for extra depth */
body::after {
content: "";
position: fixed;
inset: 0;
z-index: -1;
background:
radial-gradient(circle at 30% 20%, var(--orb-1), transparent 50%),
radial-gradient(circle at 70% 75%, var(--orb-2), transparent 50%),
radial-gradient(circle at 45% 55%, var(--orb-3), transparent 50%);
pointer-events: none;
animation: orbDrift 20s ease-in-out infinite alternate;
}
@keyframes orbDrift {
0% { transform: translate(0, 0) scale(1); }
33% { transform: translate(2%, -1%) scale(1.05); }
66% { transform: translate(-1%, 1.5%) scale(0.97); }
100% { transform: translate(1%, -0.5%) scale(1.02); }
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--fg); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover, a:focus-visible { color: var(--accent); }
h1, h2, h3, h4 { margin: 0; line-height: var(--lh-tight); font-weight: 700; font-family: var(--font-sans); letter-spacing: 0; }
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-lg); }
p { margin: 0 0 var(--space-3) 0; }
button { font: inherit; color: inherit; cursor: pointer; }
/* ============== SKIP LINK ============== */
.skip-link {
position: absolute; left: -9999px; top: 0;
background: var(--accent); color: var(--accent-fg);
padding: var(--space-2) var(--space-4); z-index: 1000;
}
.skip-link:focus { left: var(--space-3); top: var(--space-3); }
/* ============== COMMON BUTTON STYLE ============== */
.btn {
display: inline-flex; align-items: center; justify-content: center;
padding: var(--space-3) var(--space-5);
font-family: var(--font-mono);
font-size: var(--fs-sm);
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
text-decoration: none;
border: 1px solid transparent;
border-radius: var(--radius-sm);
cursor: pointer;
transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease, transform 0.08s ease;
white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn--primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.btn--primary:hover { background: transparent; color: var(--accent); }
.btn--ghost { background: transparent; color: var(--fg); border-color: var(--border-strong); }
.btn--ghost:hover { background: var(--bg-block); color: var(--fg); border-color: var(--fg); }
/* ============== LAYOUT HELPERS ============== */
.container, .site-footer__inner, .ad-slot--header, .ad-slot--footer, .gate__panel, .gdpr__inner, .categories {
width: 100%;
max-width: var(--container);
margin-inline: auto;
padding-inline: clamp(1rem, 3vw, 2rem);
}
/* ============== SITE HEADER + NAV ============== */
.site-header {
background: transparent;
padding-top: var(--header-h);
}
/* ---- Ad slot (header + footer placements) ----
Empty state: a thin neutral panel with a "Sponsored" eyebrow so the slot
still occupies a known vertical region (no content jump when the ad loads
later from /data/ads.json). When app.js injects a real snippet the slot's
inner contents replace the placeholder. `min-height` keeps the layout
stable regardless of fill state. */
.ad-slot {
display: flex; align-items: center; justify-content: center;
text-align: center;
min-height: 90px;
background: transparent;
}
.ad-slot--empty {
border: 1px dashed var(--border-strong);
border-radius: var(--radius-xs);
background: var(--ad-empty);
padding: var(--space-3) var(--space-4);
min-height: 60px;
}
.ad-slot__placeholder {
font-family: var(--font-mono); font-size: var(--fs-xs);
color: var(--fg-soft); text-transform: uppercase; letter-spacing: 0.18em;
}
/* Third-party ad creatives need to overflow the glass card on ad-networks
that paint their own backgrounds. The slot itself stays centered. */
.ad-slot > ins,
.ad-slot > iframe,
.ad-slot > a,
.ad-slot > div { max-width: 100%; }
.ad-slot--header { margin-bottom: var(--space-5); }
.ad-slot--footer { margin-bottom: var(--space-5); }
/* ---- Glass navbar (grounded, deeper, taller) ---- */
.site-nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 50;
background: var(--glass-bg-strong);
backdrop-filter: blur(var(--glass-blur-strong));
-webkit-backdrop-filter: blur(var(--glass-blur-strong));
border-bottom: 1px solid var(--glass-border);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.05) inset;
display: flex; align-items: center; justify-content: space-between;
gap: var(--space-4);
padding-inline: clamp(1rem, 3vw, 2rem);
height: var(--header-h);
}
/* subtle bottom gradient fade so the nav doesn't look cut off */
.site-nav::after {
content: "";
position: absolute;
bottom: -16px;
left: 0;
right: 0;
height: 16px;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.25), transparent);
pointer-events: none;
}
[data-theme="light"] .site-nav::after {
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.06), transparent);
}
/* Belt-and-suspenders: the brand link must NEVER render as a box (no border, no bg, no outline,
no shadow) in any state — default, hover, focus, focus-visible, active, or via parent class. */
.brand,
.brand:link,
.brand:visited,
.brand:hover,
.brand:focus,
.brand:focus-visible,
.brand:active,
.site-nav .brand {
background: transparent !important;
border: 0 !important;
border-color: transparent !important;
outline: none !important;
box-shadow: none !important;
padding: 0 !important;
text-decoration: none;
color: var(--fg) !important; /* prev: a:hover/focus-visible flipped brand to accent-red */
}
.brand {
display: inline-flex; align-items: center; gap: var(--space-3);
color: var(--fg);
}
.brand__mark {
display: none !important; /* removed: was a highlight box around the brand letter */
background: transparent !important;
border: 0 !important;
outline: none !important;
box-shadow: none !important;
}
.brand__text,
.brand__text strong,
.brand__sub {
background: transparent !important;
border: 0 !important;
outline: none !important;
box-shadow: none !important;
}
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand__text strong { font-size: var(--fs-lg); font-weight: 700; font-family: var(--font-sans); letter-spacing: 0; color: var(--fg) !important; }
.brand__sub {
font-family: var(--font-sans); font-size: var(--fs-sm); font-style: italic;
color: var(--fg-soft) !important;
}
.site-nav__tools { display: inline-flex; align-items: center; gap: var(--space-3); }
.nav-link {
font-family: var(--font-sans); font-size: var(--fs-sm);
text-decoration: none; color: var(--fg-muted); padding: var(--space-2) var(--space-3);
}
.nav-link:hover { color: var(--fg); }
/* THEME TOGGLE */
.theme-toggle {
display: inline-flex; align-items: center; gap: var(--space-2);
background: transparent;
border: 1px solid var(--border-strong);
border-radius: var(--radius-xs);
padding: var(--space-2) var(--space-3);
font-family: var(--font-sans); font-size: var(--fs-sm);
color: var(--fg-muted);
transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.theme-toggle:hover { color: var(--fg); border-color: var(--fg); }
/* NAV SEARCH (compact input in the header, synced with the main search) */
.nav-search {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-1) var(--space-2);
background: var(--bg-block);
border: 1px solid var(--border-strong);
border-radius: var(--radius-xs);
transition: border-color 0.12s ease, background 0.12s ease;
flex: 0 1 auto;
min-width: 0;
}
.nav-search:focus-within {
border-color: var(--accent);
background: var(--bg-elev);
}
.nav-search__icon {
flex: 0 0 auto;
color: var(--fg-soft);
display: block;
pointer-events: none;
}
.nav-search:focus-within .nav-search__icon { color: var(--accent); }
.nav-search__input {
flex: 1;
min-width: 0;
border: 0;
background: transparent;
font: inherit;
font-size: var(--fs-sm);
color: var(--fg);
padding: var(--space-1) 0;
outline: none;
width: 180px;
}
.nav-search__input::placeholder { color: var(--fg-soft); }
.nav-search__input::-webkit-search-decoration,
.nav-search__input::-webkit-search-cancel-button,
.nav-search__input::-webkit-search-results-button,
.nav-search__input::-webkit-search-results-decoration { display: none; }
.nav-search__clear {
flex: 0 0 auto;
background: transparent;
border: 0;
color: var(--fg-soft);
font-size: var(--fs-lg);
line-height: 1;
cursor: pointer;
padding: 0 var(--space-1);
border-radius: var(--radius-xs);
transition: color 0.12s ease, background 0.12s ease;
}
.nav-search__clear:hover, .nav-search__clear:focus-visible {
color: var(--fg);
background: var(--bg-block-2);
}
@media (max-width: 720px) {
.nav-search__input { width: 120px; }
}
@media (max-width: 480px) {
.nav-search__input { width: 90px; }
}
.theme-toggle__icon {
width: 14px; height: 14px;
display: inline-block;
background: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
[data-theme="light"] .theme-toggle__icon {
-webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
/* ============== MAIN ============== */
.main { flex: 1; padding-block: var(--space-2) var(--space-line); }
/* ============== CATEGORIES (Pinterest-style masonry) ==============
True "shifting" masonry via CSS multi-column layout. Each card's height is
driven by its content; columns fill top-to-bottom / left-to-right and
spaces between unequal-height cards disappear. Card children get
`break-inside: avoid` so a single card never splits across columns.
`display: block; width: 100%` is required for elements to participate in
column flow (otherwise they default to `inline` and lay out wrong).
Mobile = 1 column. ≥540px = 2 columns. ≥960px = 3 columns. */
.categories {
display: block; /* override the legacy grid fallback */
column-count: 1;
column-gap: var(--space-4);
padding-block: var(--space-3);
margin: 0 auto;
max-width: 1200px;
}
.categories > * {
display: block;
width: 100%;
break-inside: avoid;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
margin-bottom: var(--space-4);
}
/* Single-category page: render one card, still in column flow. The card's
`cat--single` modifier hides the redundant h2 and gives it full width.
Single-column flow on every breakpoint keeps it predictable. */
.categories--single { column-count: 1; }
@media (min-width: 540px) {
.categories { column-count: 2; }
}
@media (min-width: 960px) {
.categories { column-count: 3; }
}
/* Wider gaps on tablets/desktops so the cards don't crowd together. */
@media (min-width: 540px) {
.categories { column-gap: var(--space-5); }
}
/* Full-size browsers: 4 columns and a wider container so card widths stay
roughly the same as the 3-col layout at 1200px (≈386px). Stretching the
page via --container keeps the nav/footer/ads/gate/gdpr aligned with the
wider category grid instead of leaving two empty rails on either side. */
@media (min-width: 1400px) {
:root { --container: 1600px; }
.categories {
column-count: 4;
max-width: 1600px;
}
}
/* ---- Glass category cards ---- */
.cat {
display: grid;
grid-template-rows: auto 1fr;
align-self: start;
border-radius: var(--radius-md);
background: var(--glass-bg);
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
border: 1px solid var(--glass-border);
box-shadow: var(--glass-shadow);
overflow: hidden;
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.cat:hover {
transform: translateY(-2px);
box-shadow: var(--glass-shadow), 0 12px 50px rgba(0, 0, 0, 0.25);
border-color: var(--glass-border-hover);
}
/* darker inner container behind links for better readability */
.links {
list-style: none; margin: 0; padding: 0;
display: grid; gap: 0;
background: rgba(0, 0, 0, 0.15);
}
[data-theme="light"] .links {
background: rgba(0, 0, 0, 0.03);
}
.cat__head {
display: flex; align-items: center; gap: var(--space-3);
padding: var(--space-line) var(--space-5);
background: linear-gradient(180deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.08));
border-bottom: 1px solid var(--glass-border);
}
[data-theme="light"] .cat__head {
background: linear-gradient(180deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.02));
}
.cat__icon {
display: inline-flex; align-items: center; justify-content: center;
width: 32px; height: 32px;
background: var(--accent); color: var(--accent-fg);
font-family: var(--font-sans); font-size: var(--fs-md); font-weight: 700;
border-radius: var(--radius-sm);
flex: 0 0 auto;
box-shadow: 0 0 20px rgba(244, 63, 94, 0.3);
}
[data-theme="light"] .cat__icon {
box-shadow: 0 0 16px rgba(190, 18, 60, 0.2);
}
.cat__title { font-size: var(--fs-xl); font-weight: 700; font-family: var(--font-sans); letter-spacing: 0; }
.cat__title-link { color: var(--fg); text-decoration: none; }
.cat__title-link:hover, .cat__title-link:focus-visible { color: var(--accent); text-decoration: underline; }
.cat__count {
margin-left: auto;
font-family: var(--font-mono); font-size: var(--fs-xs);
color: var(--fg-soft); text-transform: uppercase; letter-spacing: 0.1em;
}
.cat__desc {
margin: 0;
padding: var(--space-2) var(--space-5) var(--space-2);
/* Slight left-indent + italic so the description reads as supporting
commentary anchored to the header above, not muted body text.
Theme-neutral — no dark/light variant needed. */
padding-left: calc(var(--space-5) + var(--space-2));
font-style: italic;
font-size: var(--fs-sm);
color: var(--fg-muted);
}
.links > li + li { border-top: 1px solid var(--glass-border); }
/* 6+ links → framed/scrollable region inside the card */
.links--scrollable {
max-height: 22rem;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--border-strong) transparent;
}
.links--scrollable::-webkit-scrollbar { width: 8px; }
.links--scrollable::-webkit-scrollbar-track { background: transparent; }
.links--scrollable::-webkit-scrollbar-thumb {
background: var(--border-strong);
border-radius: 4px;
}
.links--scrollable::-webkit-scrollbar-thumb:hover { background: var(--fg-soft); }
.linkitem {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-3) var(--space-4);
align-items: start;
padding: var(--space-line) var(--space-5);
text-decoration: none;
color: var(--fg);
background: transparent;
transition: background 0.15s ease, transform 0.15s ease;
}
.linkitem:hover {
background: var(--glass-bg-hover);
transform: translateX(3px);
}
/* Hover/focus affordance = accent on title + arrow nudge. Suppress the global focus outline on
linkitems so it doesn't draw a rose box around title+description — the color-shift + arrow
color/nudge + the persistent underline on the title are the focus indicators. */
.linkitem:hover .linkitem__title, .linkitem:focus-visible .linkitem__title { color: var(--accent); }
.linkitem:focus-visible { outline: none; background: var(--glass-bg-hover); }
.linkitem__main { min-width: 0; }
/* display: block on both so they stack vertically — without this the spans default to inline and the title + desc sit on the same line (margin-top has no effect). */
.linkitem__title {
display: block;
font-size: var(--fs-lg); font-weight: 600; font-family: var(--font-sans);
text-decoration: none;
letter-spacing: 0;
}
.linkitem:hover .linkitem__title,
.linkitem:focus-visible .linkitem__title {
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
.linkitem__desc { display: block; color: var(--fg-muted); font-size: var(--fs-sm); margin-top: var(--space-3); }
/* ============== AGE GATE ============== */
.gate {
position: fixed; inset: 0;
/* semi-transparent overlay so the gate feels frosted against page content */
background: rgba(20, 10, 12, 0.82);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
z-index: 999;
display: flex; align-items: center; justify-content: center;
padding: var(--space-4);
overflow: auto;
}
[data-theme="light"] .gate {
background: rgba(250, 246, 240, 0.72);
}
.gate__panel {
background: var(--glass-bg);
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
border: 1px solid var(--glass-border);
border-radius: var(--radius-md);
box-shadow: var(--glass-shadow);
padding: clamp(1.5rem, 4vw, 3rem);
max-width: 560px; width: 100%;
text-align: center;
}
.gate__eyebrow {
font-family: var(--font-mono); font-size: var(--fs-xs);
text-transform: uppercase; letter-spacing: 0.18em;
color: var(--fg-soft); margin-bottom: var(--space-3);
}
.gate__title { font-size: clamp(1.5rem, 4vw, 2.25rem); margin-bottom: var(--space-4); }
.gate__desc { color: var(--fg-muted); margin-bottom: var(--space-5); }
.gate__actions {
display: flex; flex-direction: column; gap: var(--space-3);
margin-bottom: var(--space-4);
}
@media (min-width: 540px) {
.gate__actions { flex-direction: row; justify-content: center; }
}
.gate__small { font-size: var(--fs-xs); color: var(--fg-soft); margin: 0; }
/* ============== GDPR BANNER ============== */
.gdpr {
position: fixed; left: 0; right: 0; bottom: 0;
background: var(--glass-bg-strong);
backdrop-filter: blur(var(--glass-blur-strong));
-webkit-backdrop-filter: blur(var(--glass-blur-strong));
border-top: 1px solid var(--glass-border);
z-index: 950;
padding: var(--space-3) var(--space-4);
box-shadow: var(--glass-shadow);
}
.gdpr__inner {
display: flex; align-items: center; gap: var(--space-4);
flex-wrap: wrap;
}
.gdpr__copy { flex: 1 1 320px; min-width: 0; }
.gdpr__title {
font-family: var(--font-mono); font-size: var(--fs-xs);
text-transform: uppercase; letter-spacing: 0.12em;
color: var(--accent); margin: 0 0 var(--space-1) 0;
}
.gdpr__desc { margin: 0; font-size: var(--fs-sm); color: var(--fg-muted); }
.gdpr__actions { display: inline-flex; gap: var(--space-2); flex-wrap: wrap; }
/* ============== BACK TO TOP ============== */
.back-to-top {
position: fixed;
right: var(--space-5);
bottom: var(--space-5);
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--accent);
color: var(--accent-fg);
border: 0;
display: grid;
place-items: center;
cursor: pointer;
box-shadow: 0 2px 8px rgba(0,0,0,0.18);
z-index: 90;
opacity: 0;
transform: translateY(8px);
transition: opacity 0.2s ease, transform 0.2s ease, background 0.12s ease;
pointer-events: none;
}
.back-to-top.show {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.back-to-top:hover { filter: brightness(1.1); }
.back-to-top:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
/* ============== FOOTER ============== */
.site-footer {
position: relative;
background: var(--glass-bg-strong);
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
border-top: 1px solid var(--glass-border);
padding-block: var(--space-6) var(--space-6);
}
/* top highlight line on glass footer */
.site-footer::before {
content: "";
position: absolute;
top: -1px; left: 0; right: 0;
height: 1px;
background: var(--glass-highlight);
pointer-events: none;
}
.site-footer__inner {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-5);
}
.site-footer__col { min-width: 0; }
.site-footer__brand strong { font-size: var(--fs-lg); }
.site-footer__tag { color: var(--fg-muted); font-size: var(--fs-sm); margin: var(--space-1) 0 0 0; }
.site-footer__about { color: var(--fg-muted); font-size: var(--fs-sm); line-height: var(--lh-base); margin: 0; }
.site-footer__label {
font-family: var(--font-mono); font-size: var(--fs-xs);
text-transform: uppercase; letter-spacing: 0.12em;
color: var(--fg-soft); margin: 0 0 var(--space-2) 0;
}
.site-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.site-footer__list a {
color: var(--fg-muted); text-decoration: none; font-size: var(--fs-sm);
}
.site-footer__list a:hover { color: var(--accent); text-decoration: underline; }
.site-footer__copy, .site-footer__updated {
color: var(--fg-soft); font-size: var(--fs-xs);
font-family: var(--font-mono); margin: 0;
}
.site-footer__col--meta { padding-top: var(--space-3); border-top: 1px solid var(--border-strong); }
/* ============== RESPONSIVE BREAKPOINTS ============== */
@media (min-width: 720px) {
.site-footer__inner { grid-template-columns: 2fr 1fr 1fr; }
.site-footer__col--meta { grid-column: 1 / -1; border-top: 1px solid var(--border-strong); padding-top: var(--space-3); }
}
@media (max-width: 480px) {
.theme-toggle__label { display: none; }
.brand__sub { display: none; }
.gate__panel { padding: var(--space-5); }
}
/* ============== UTILITIES ============== */
[hidden] { display: none !important; }
/* ============== REDUCED MOTION ============== */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
body::after { animation: none !important; }
}
/* ============== BREADCRUMB (per-category pages) ============== */
.breadcrumb {
margin-block: var(--space-4) var(--space-2);
}
.breadcrumb__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
font-family: var(--font-mono);
font-size: var(--fs-xs);
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--fg-soft);
}
.breadcrumb__list li { display: inline-flex; align-items: center; }
.breadcrumb__list li + li::before {
content: "/";
color: var(--fg-soft);
margin-inline: var(--space-2);
opacity: 0.6;
}
.breadcrumb__list a {
color: var(--fg-muted);
text-decoration: none;
padding: var(--space-1) 0;
}
.breadcrumb__list a:hover { color: var(--accent); }
.breadcrumb__list [aria-current="page"] { color: var(--fg); font-weight: 700; }
/* ============== CATEGORY HERO (per-category pages) ============== */
.category-hero {
padding-block: var(--space-5) var(--space-4);
border-bottom: 1px solid var(--border);
margin-bottom: var(--space-4);
display: grid;
gap: var(--space-2);
}
.category-hero__eyebrow {
font-family: var(--font-mono);
font-size: var(--fs-xs);
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--accent);
margin: 0;
}
.category-hero__title {
font-size: var(--fs-3xl);
margin: 0;
letter-spacing: -0.02em;
}
.category-hero__desc {
margin: var(--space-1) 0 0 0;
color: var(--fg-muted);
font-size: var(--fs-lg);
max-width: 60ch;
line-height: var(--lh-base);
}
/* ============== OTHER CATEGORIES (per-category pages) ============== */
.other-categories {
margin-top: var(--space-line);
padding-top: var(--space-5);
border-top: 1px solid var(--border-strong);
}
.other-categories__label {
font-family: var(--font-mono);
font-size: var(--fs-xs);
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--fg-soft);
margin: 0 0 var(--space-3) 0;
}
.other-categories__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
}
.other-categories__list a {
display: inline-block;
padding: var(--space-2) var(--space-3);
background: var(--bg-block);
border: 1px solid var(--border-strong);
border-radius: var(--radius-xs);
text-decoration: none;
color: var(--fg);
font-size: var(--fs-sm);
font-weight: 600;
transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.other-categories__list a:hover {
background: var(--accent-soft);
border-color: var(--accent);
color: var(--fg);
}
/* ============== SINGLE-CATEGORY CARD (hide redundant h2) ============== */
.cat--single .cat__title {
/* The page already has the category name as its h1 in .category-hero.
Visually hidden but still announced by screen readers. */
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* ============== CATEGORY NOT FOUND (stale URL fallback) ============== */
/* Rendered inside the categories section. Spans the full column width
via `break-inside: avoid` (inherited from .categories > *) so a tall
message box never splits across columns. */
.categories__notfound {
padding: var(--space-5) var(--space-4);
background: var(--bg-block);
border: 1px dashed var(--border-strong);
border-radius: var(--radius-xs);
color: var(--fg-muted);
text-align: center;
font-size: var(--fs-sm);
}
/* ============== BACKDROP-FILTER FALLBACK (browsers without support) ============== */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
.site-nav { background: var(--bg); }
.cat { background: var(--bg-block); }
.gdpr { background: var(--bg-elev); }
.site-footer { background: var(--bg-block); }
.gate { background: var(--bg); }
.gate__panel { background: var(--bg-elev); border: 1px solid var(--border-strong); }
}
/* ============== PRINT ============== */
@media print {
.site-header .ad-slot, .ad-slot--footer, .gate, .gdpr, .site-nav__tools, .site-footer, .back-to-top { display: none !important; }
.site-nav { position: static; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
body { background: #fff; color: #000; }
body::before, body::after { display: none !important; }
.cat { border: 1px solid #999; background: #fff; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.linkitem { border: 1px solid #999; background: #fff; box-shadow: none; }
a { color: #000; text-decoration: underline; }
}