/* ============================================================ Variables ============================================================ */ :root { /* ── Accent (gold default — drives title glow, frames, interactive highlights) */ --accent: #ffe4a5; --accent-hover: #ffc233; --accent-dim: rgba(255,209,102,.15); /* Accent glow — text-shadow for header title and decorative elements. Update this when changing accent to keep the energy consistent. */ --accent-glow: 0 0 5px #ffdd88, 0 0 25px #ffaa00, 0 0 2px rgba(0,0,0,.6); --danger: #f87171; --danger-hover: #ef4444; --danger-dim: rgba(248,113,113,.12); --success: #34d399; --success-dim: rgba(52,211,153,.12); --private-color: #f72585; --private-dim: rgba(247,37,133,.12); --card-bg: rgba(255,255,255,0.055); --card-border: rgba(255,255,255,0.09); --card-blur: blur(18px); --card-hover-lift: -4px; --text: #f0f0f5; --text-muted: rgba(240,240,245,.55); --text-subtle: rgba(240,240,245,.3); --modal-bg: rgba(10,10,20,.92); --input-bg: rgba(255,255,255,.06); --input-border: rgba(255,255,255,.12); --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px; --radius-full: 9999px; --shadow-card: 0 4px 24px rgba(0,0,0,.35); --shadow-hover: 0 12px 40px rgba(0,0,0,.5); --shadow-modal: 0 24px 80px rgba(0,0,0,.6); --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif; --controls-h: 100px; } [data-theme="light"] { --card-bg: rgba(255,255,255,.75); --card-border: rgba(0,0,0,.08); --text: #18181b; --text-muted: rgba(24,24,27,.5); --text-subtle: rgba(24,24,27,.3); --modal-bg: rgba(240,240,248,.95); --input-bg: rgba(0,0,0,.04); --input-border: rgba(0,0,0,.12); } /* ============================================================ Reset & Base ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 15px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; } body { font-family: var(--font); color: var(--text); min-height: 100vh; -webkit-font-smoothing: antialiased; } a { color: var(--accent); text-decoration: none; } a:hover{ text-decoration: underline; } img { max-width: 100%; display: block; } svg { fill: currentColor; flex-shrink: 0; } button {cursor: pointer;font-family: inherit;border: none;background: none;color: var(--card-border);} input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; background: transparent; } ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 3px; } /* ============================================================ Site background ============================================================ */ #site-bg { position: fixed; inset: 0; z-index: 0; background: var(--site-bg-value, linear-gradient(135deg, #0d0d18 0%, #16103a 50%, #0d1a2e 100%)); background-size: cover; background-position: center; transition: background 0.5s ease; } [data-theme="light"] #site-bg { background: var(--site-bg-value, linear-gradient(135deg, #e8e8f8 0%, #dde8ff 50%, #e8f0ff 100%)); } .page-wrap { position: relative; z-index: 1; max-width: 1400px; margin: 0 auto; padding-bottom: 80px; } /* ── Scroll lock: applied to when any modal is open ── */ html.scroll-locked, html.scroll-locked body { overflow: hidden; /* iOS momentum scroll needs touch-action on the scrolling element, not body */ } /* ── Square cards toggle ── */ body.square-cards .post-card { border-radius: 0 !important; }