/* forge.css — shared styles for forge.thisminute.org sub-sites * * Each site sets its own accent + background variables: * --bg, --bg-raised, --bg-card, --bg-card-hover * --accent, --accent-dim, --accent-text * This file provides everything else. * * REQUIRED: every page must include this inline script immediately after * to prevent theme flash on navigation: * * */ /* --- Reset --- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } /* --- Shared variables --- */ :root { --text: #e4e4ed; --text-secondary: #9898ad; --text-muted: #5e5e73; --border: rgba(255, 255, 255, 0.07); --border-light: rgba(255, 255, 255, 0.12); --shadow: 0 4px 24px rgba(0, 0, 0, 0.3); --radius: 10px; --radius-sm: 6px; color-scheme: dark; } body.light-mode { --text: #1c1917; --text-secondary: #57534e; --text-muted: #a8a29e; --border: rgba(0, 0, 0, 0.08); --border-light: rgba(0, 0, 0, 0.14); --shadow: 0 4px 24px rgba(0, 0, 0, 0.08); color-scheme: light; } /* --- Body --- */ body { color: var(--text); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; line-height: 1.6; transition: background 0.25s ease, color 0.25s ease; } /* --- Header: SITENAME FORGE --- */ .forge-header h1 a { color: var(--text-muted); text-decoration: none; font-size: 0.5em; vertical-align: middle; letter-spacing: 0.15em; } .forge-header h1 a:hover { color: var(--text-secondary); } /* --- Theme toggle (fixed top-right) --- */ .forge-theme-toggle { position: fixed; top: 1rem; right: 1rem; z-index: 10; } .icon-btn { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--border); background: var(--bg-raised); color: var(--text-secondary); cursor: pointer; transition: all 0.15s ease; } .icon-btn:hover { border-color: var(--border-light); color: var(--text); } /* --- Focus visible --- */ .icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }