/* ── Design tokens ───────────────────────────────────────────────────── Lives in tokens.css now so admin-stats.css / admin-users.css / admin-settings.css can import the exact same values instead of maintaining their own hand-copied palette. See that file's header comment for why this moved. */ @import url("tokens.css"); /* ── Reset ─────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); background: radial-gradient(120% 100% at 50% -8%, var(--surface-1) 0%, var(--bg) 55%); background-attachment: fixed; color: var(--text); line-height: 1.6; } /* ── Skip link ─────────────────────────────────── */ /* Off-screen until it receives keyboard focus (Tab from the very top of the page) — lets screen reader and keyboard-only users jump straight past the nav instead of tabbing through every link in it, including the Help submenu, on every single page. */ .skip-link { position: absolute; top: -60px; left: 1rem; z-index: 300; background: var(--accent); color: var(--on-accent); font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; padding: 0.6rem 1.1rem; border-radius: 6px; text-decoration: none; transition: top 0.15s ease; } .skip-link:focus { top: 1rem; } /* ── Nav ───────────────────────────────────────── */ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 200; height: 60px; display: flex; align-items: center; justify-content: space-between; padding: 0 2.5rem; background: rgba(255, 255, 255, 0.82); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); } [data-theme="dark"] nav { background: rgba(35, 38, 45, 0.82); } .nav-logo { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; letter-spacing: 0.04em; color: var(--accent); text-decoration: none; } .nav-logo span { color: var(--accent); } .nav-links { display: flex; gap: 2rem; list-style: none; } .nav-links a { font-family: var(--font-display); font-weight: 600; font-size: 0.875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-mid); text-decoration: none; transition: color 0.2s; } .nav-links a:hover { color: var(--accent); } /* ── Theme toggle ────────────────────────────── Two presentations sharing one class/behavior (see theme.js): a small icon button in the nav, and a labeled switch on the profile page's Appearance card. Both just flip [data-theme] on and stay in sync with each other if more than one is on the page at once. */ .theme-toggle { border: 1px solid var(--border); background: var(--surface-1); cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; } .theme-toggle--nav { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; padding: 0; } .theme-toggle--nav:hover { border-color: var(--accent); } /* Icon shown is the mode a click would switch TO, not the current mode — moon in light mode (an invitation to go dark), sun in dark mode. Each icon is an inline SVG using currentColor, so it just inherits this color instead of needing its own fill/stroke overrides per theme. */ .theme-toggle-icon { display: none; color: var(--text-mid); } .theme-toggle-icon svg { display: block; } [data-theme="dark"] .theme-toggle-icon--sun { display: inline-flex; } .theme-toggle-icon--moon { display: inline-flex; } [data-theme="dark"] .theme-toggle-icon--moon { display: none; } .theme-toggle-row { display: flex; align-items: center; justify-content: space-between; cursor: pointer; } .theme-toggle-row span { font-family: var(--font-display); font-weight: 600; font-size: 0.9rem; } .theme-toggle--switch { width: 44px; height: 26px; border-radius: 999px; padding: 3px; position: relative; } .theme-toggle--switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--text-mid); transition: transform 0.15s ease, background 0.15s ease; } .theme-toggle--switch[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); } .theme-toggle--switch[aria-pressed="true"]::after { transform: translateX(18px); background: var(--on-accent); } /* Help dropdown */ .nav-dropdown { position: relative; list-style: none; } .nav-dropdown-toggle { background: none; border: none; padding: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 0.35rem; font-family: var(--font-display); font-weight: 600; font-size: 0.875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-mid); transition: color 0.2s; } .nav-dropdown-toggle:hover, .nav-dropdown-toggle[aria-expanded="true"] { color: var(--accent); } .nav-dropdown-toggle::after { content: ''; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; transition: transform 0.2s; } .nav-dropdown-toggle[aria-expanded="true"]::after { transform: rotate(180deg); } .nav-dropdown-menu { position: absolute; top: calc(100% + 16px); left: 50%; transform: translateX(-50%) translateY(-6px); min-width: 170px; margin: 0; padding: 0.4rem; list-style: none; background: var(--surface-1); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4); opacity: 0; visibility: hidden; transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s; z-index: 250; } .nav-dropdown.open .nav-dropdown-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .nav-dropdown-menu li a { display: block; padding: 0.55rem 0.75rem; border-radius: 5px; font-family: var(--font-body); font-weight: 500; font-size: 0.85rem; text-transform: none; letter-spacing: normal; color: var(--text); text-decoration: none; transition: background 0.15s, color 0.15s; } .nav-dropdown-menu li a:hover { background: rgba(255, 228, 56, 0.12); color: var(--accent); } /* The profile dropdown's "Log out" item is a