/* ── Reset & base ──────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
/*
* ── Design tokens ─────────────────────────────────────────────
*
* Colors
* bg: #040714
* surface-1 (cards): rgba(255,255,255,.03)
* surface-2 (hover): rgba(255,255,255,.06)
* border-subtle: rgba(255,255,255,.07)
* border: rgba(255,255,255,.1)
* border-strong: rgba(255,255,255,.22)
* blue accent: #0063e5
* blue accent bright: #0080ff
* text primary: #f9f9f9
* text secondary: #cacaca
* text muted: rgba(255,255,255,.55)
* header gradient: in oklch 135deg, #B015B0 0%, #3D0080 50%, #040714 100%
*
* Typography scale (rem)
* --text-xs: 0.75 --text-sm: 0.875 --text-base: 1
* --text-lg: 1.125 --text-xl: 1.25 --text-2xl: 1.5
* font stack: 'Avenir Next', -apple-system, BlinkMacSystemFont,
* 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif
*
* Spacing scale (4px grid)
* --space-1: 4px --space-2: 8px --space-3: 12px --space-4: 16px
* --space-6: 24px --space-8: 32px
*
* Radii
* --radius-sm: 6px --radius: 10px --radius-lg: 15px
*
* Easing
* --ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1) (spring/overshoot)
* --dur-fast: 120ms --dur: 200ms
*/
:root {
--bg: #040714;
--surface-1: rgba(255,255,255,.03);
--surface-2: rgba(255,255,255,.06);
--border-subtle: rgba(255,255,255,.07);
--border: rgba(255,255,255,.1);
--border-strong: rgba(255,255,255,.22);
--text-primary: #f9f9f9;
--text-secondary: #cacaca;
--text-muted: rgba(255,255,255,.55);
--accent: #0063e5;
--accent-bright: #0080ff;
--font: 'Avenir Next', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
--text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem;
--text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem;
--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
--space-6: 24px; --space-8: 32px;
--radius-sm: 6px; --radius: 10px; --radius-lg: 15px;
--ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1);
--dur-fast: 120ms; --dur: 200ms;
}
html { height: 100%; }
body {
font-family: var(--font);
background: var(--bg);
min-height: 100%;
color: var(--text-primary);
display: flex; flex-direction: column;
}
/* ── Layout ────────────────────────────────────────────────── */
/*
* GOTCHA: body { display:flex; flex-direction:column } + margin: 0 auto
* on a child collapses its width — always pair with width: 100%.
*
* GOTCHA: External images (YouTube ggpht, Gravatar, etc.) may block loading
* when the Referer header points to localhost or an unknown origin. Fix:
* 1. Add in (global)
* 2. Or add referrerpolicy="no-referrer" on each ![]()
tag
* Option 1 is simpler but affects all outbound requests (analytics, etc.).
*/
main {
flex: 1;
display: flex;
flex-direction: column;
}
.container {
max-width: 900px;
width: 100%;
margin: 0 auto;
padding: 30px;
flex: 1;
}
/* ── Header ────────────────────────────────────────────────── */
.header-bar {
background: linear-gradient(in oklch 135deg, #B015B0 0%, #3D0080 50%, #040714 100%);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border-subtle);
padding: 0 var(--space-6);
height: 68px;
position: sticky;
top: 0;
z-index: 200;
display: flex;
align-items: center;
}
.header-logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.header-logo-img {
height: 36px; width: auto; flex-shrink: 0;
filter: brightness(0) invert(1);
transition: transform 0.3s var(--ease-snap);
display: block;
}
.header-logo-img:hover { transform: scale(1.14) rotate(-9deg); }
.header-title-link { text-decoration: none; color: inherit; }
.header-logo h1 { font-size: 1.2em; font-weight: 600; color: var(--text-primary); letter-spacing: .5px; }
.header-subtitle { font-size: .82em; color: rgba(255,255,255,.72); font-weight: 500; margin-top: 3px; }
/* ── Nav & Auth ────────────────────────────────────────────── */
/*
* THREE PATTERNS:
* A) No nav, no auth → margin-left: auto on .header-home
* B) Auth only → margin-left: auto on .auth-toggle, margin-left: 8px on .header-home
* C) Nav + auth → margin-left: auto on