/** * Human After All? — design tokens, light/dark themes, shared surfaces. * Load site-theme-init.js in before this file. */ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"); /* ─── Spacing scale ─── */ :root { --space-1: 8px; --space-2: 12px; --space-3: 16px; --space-4: 24px; --space-5: 32px; --space-6: 48px; --space-7: 72px; --haa-radius: 12px; --haa-radius-sm: 8px; /* Typography — set --font-current to var(--font-legacy) to revert site-wide */ --font-legacy: "Courier New", Courier, monospace; --font-modern: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-current: var(--font-modern); --font-display: var(--font-current); --font-body: var(--font-current); --haa-font-mono: var(--font-display); --haa-font-body: var(--font-body); --haa-max: 1200px; /* Inner / collection pages — shared horizontal gutter */ --haa-page-max: 1560px; --haa-page-pad-x: 18px; --haa-archive-row-pad-y: 28px; /* Share, save, edit, delete, vote — not primary CTAs */ --haa-action-control-size: 34px; --haa-action-control-size-sm: 28px; --haa-action-control-pad-y: 4px; --haa-action-control-pad-x: 8px; --haa-action-control-font: 0.52rem; --haa-action-control-letter: 0.05em; --haa-action-control-icon: 14px; } @media (min-width: 640px) { :root { --haa-page-pad-x: 28px; } } @media (min-width: 900px) { :root { --haa-page-pad-x: 40px; } } @media (min-width: 1200px) { :root { --haa-page-pad-x: 52px; } } html { font-family: var(--font-body); } body { font-family: var(--font-body); } /* ─── Dark (default) ─── */ :root, [data-theme="dark"] { color-scheme: dark; --bg: #08080c; --bg-soft: #0e0e12; --surface: rgba(14, 14, 18, 0.92); --surface-subtle: rgba(18, 18, 24, 0.65); --text: #ece8e0; --text-muted: #9a9690; --text-soft: #c4bfb6; --border: rgba(230, 225, 215, 0.1); --border-strong: rgba(230, 225, 215, 0.16); --accent: #d4af37; --accent-soft: #e8c85c; --accent-contrast: #1a1608; --accent-dim: rgba(212, 175, 55, 0.12); --accent-glow: rgba(212, 175, 55, 0.18); --link: #e0c56a; --link-hover: #f5e6a8; --danger: #c47a7a; --success: #8eb89a; --shadow: 0 12px 40px rgba(0, 0, 0, 0.45); --shadow-hover: 0 16px 48px rgba(0, 0, 0, 0.55); --card-hover-border: rgba(212, 175, 55, 0.28); --card-hover-shadow: 0 0 0 1px rgba(212, 175, 55, 0.06), 0 20px 48px rgba(0, 0, 0, 0.45); --surface-hover: rgba(18, 18, 24, 0.65); --cool: rgba(120, 160, 200, 0.1); --nav-border: rgba(255, 255, 255, 0.08); --grain-opacity: 0.045; /* Legacy aliases */ --haa-bg-deep: var(--bg); --haa-bg-elevated: var(--bg-soft); --haa-surface: var(--surface); --haa-surface-hover: var(--surface-subtle); --haa-border: var(--border); --haa-border-strong: var(--border-strong); --haa-text: var(--text); --haa-text-muted: var(--text-muted); --haa-text-soft: var(--text-soft); --haa-accent: var(--accent); --haa-accent-soft: var(--accent-soft); --haa-accent-dim: var(--accent-dim); --haa-accent-glow: var(--accent-glow); --haa-cool: var(--cool); --haa-link: var(--link); --haa-link-hover: var(--link-hover); --haa-nav-border: var(--nav-border); } /* ─── Light ─── */ [data-theme="light"] { color-scheme: light; --bg: #f4f0e6; --bg-soft: #ebe6da; --surface: rgba(255, 252, 246, 0.94); --surface-subtle: rgba(250, 246, 238, 0.88); --text: #2a2620; --text-muted: #6a6458; --text-soft: #4a453c; --border: rgba(42, 38, 32, 0.12); --border-strong: rgba(42, 38, 32, 0.2); --accent: #9a7b18; --accent-soft: #7a6210; --accent-contrast: #fffef8; --accent-dim: rgba(154, 123, 24, 0.14); --accent-glow: rgba(154, 123, 24, 0.12); --link: #7a6210; --link-hover: #5c4a0c; --danger: #a85c5c; --success: #4a7a58; --shadow: 0 8px 28px rgba(42, 38, 32, 0.08); --shadow-hover: 0 12px 36px rgba(42, 38, 32, 0.12); --card-hover-border: rgba(154, 123, 24, 0.35); --card-hover-shadow: 0 0 0 1px rgba(154, 123, 24, 0.08), 0 16px 40px rgba(42, 38, 32, 0.1); --surface-hover: rgba(250, 246, 238, 0.88); --cool: rgba(80, 110, 140, 0.08); --nav-border: rgba(42, 38, 32, 0.1); --grain-opacity: 0.035; } body.inner-page, body.home-page { background-color: var(--bg); background-image: radial-gradient(ellipse 120% 55% at 50% -15%, var(--accent-glow), transparent 52%), radial-gradient(ellipse 70% 45% at 100% 30%, var(--cool), transparent 50%), linear-gradient(180deg, var(--bg-soft) 0%, var(--bg) 40%, var(--bg) 100%); background-attachment: fixed; } body.inner-page::before, body.home-page::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: var(--grain-opacity); background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } body.inner-page .nav, body.inner-page .page-shell, body.home-page .nav, body.home-page main { position: relative; z-index: 1; } body.inner-page main, body.inner-page .page-shell > h1:first-child, body.inner-page .page-shell > p.intro { font-family: var(--haa-font-body); } body.inner-page h1 { font-family: var(--haa-font-mono); } .page-hero { margin-bottom: var(--space-5); padding-bottom: var(--space-4); border-bottom: 1px solid var(--border); } .page-hero h1 { margin: 0 0 var(--space-1); color: var(--accent-soft); } .page-hero .intro { margin-bottom: 0; max-width: 42rem; color: var(--text-soft); line-height: 1.65; } .section-eyebrow { font-family: var(--haa-font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 var(--space-1); } .section-title { font-family: var(--haa-font-mono); font-size: clamp(17px, 2.2vw, 20px); font-weight: 700; color: var(--accent-soft); letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 var(--space-2); line-height: 1.25; } .intro-tight { margin-top: -4px; margin-bottom: 1.25em; } .surface-glass { background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--haa-radius); box-shadow: var(--shadow); } /* Editorial hover — no full-card underline */ a.home-card:hover, .tool-link:hover, .forum-card__link:hover { text-decoration: none; } .tool-link:hover { color: var(--text); } .tool-link:hover .tool-title { color: var(--accent-soft); } .intervention-card:hover { border-color: rgba(154, 123, 24, 0.35); box-shadow: var(--shadow-hover); transform: translateY(-2px); } .site-footer { max-width: var(--haa-max); margin: var(--space-6) auto 0; padding: var(--space-4) 0 var(--space-2); border-top: 1px solid var(--border); font-family: var(--haa-font-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--text-muted); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: center; justify-content: space-between; } .site-footer a { margin-right: 0; color: var(--link); } .site-footer a:hover { color: var(--link-hover); text-decoration: none; } .events-interventions { margin-bottom: var(--space-6); } .intervention-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); } .intervention-card { padding: var(--space-4); border-radius: var(--haa-radius); border: 1px solid var(--border-strong); background: var(--surface); transition: border-color 0.2s ease, box-shadow 0.22s ease, transform 0.2s ease; } .intervention-card h3 { font-family: var(--haa-font-mono); font-size: 16px; font-weight: 700; color: var(--accent-soft); margin: 0 0 var(--space-2); } .intervention-card p { font-family: var(--haa-font-body); font-size: 15px; line-height: 1.65; color: var(--text-soft); margin: 0 0 var(--space-2); } .intervention-meta { font-family: var(--haa-font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-2); } .intervention-card .btn-line { display: inline-block; font-family: var(--haa-font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; padding: var(--space-1) 14px; border-radius: 999px; border: 1px solid var(--border-strong); color: var(--link); text-decoration: none; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .intervention-card .btn-line:hover { background: var(--accent-dim); color: var(--link-hover); text-decoration: none; } .events-archive-section { margin-top: var(--space-3); } @media (max-width: 720px) { .intervention-grid { grid-template-columns: 1fr; } }