@import url('https://fonts.googleapis.com/css2?family=Anton&family=Epilogue:wght@400;500;600&display=swap'); :root { --bg: hsla(60, 9.09%, 97.84%, 1); --text: hsla(0, 0%, 5.1%, 1); --dark: hsla(180, 1.96%, 10%, 1); --accent: #354E8D; --accent-solid: #354E8D; --border: hsla(180, 1.96%, 10%, 0.2); --border-strong: hsla(180, 1.96%, 10%, 0.32); --font-brand: 'Anton', sans-serif; --font-head: 'Epilogue', sans-serif; --font-body: 'Epilogue', sans-serif; --text-muted: hsla(0, 0%, 5.1%, 0.5); --surface-tint: rgba(0, 0, 0, 0.02); --surface-tint-strong: rgba(0, 0, 0, 0.05); --accent-tint: rgba(53, 78, 141, 0.06); } /* Dark theme — applied automatically via system preference, or forced either direction by theme.js stamping data-theme on (manual toggle always wins over the system default). */ @media (prefers-color-scheme: dark) { :root { --bg: hsla(222, 18%, 10%, 1); --text: hsla(0, 0%, 93%, 1); --dark: hsla(0, 0%, 90%, 1); --accent: #7C9AE0; --border: hsla(0, 0%, 100%, 0.16); --border-strong: hsla(0, 0%, 100%, 0.28); --text-muted: hsla(0, 0%, 100%, 0.55); --surface-tint: rgba(255, 255, 255, 0.04); --surface-tint-strong: rgba(255, 255, 255, 0.08); --accent-tint: rgba(124, 154, 224, 0.14); } } :root[data-theme="dark"] { --bg: hsla(222, 18%, 10%, 1); --text: hsla(0, 0%, 93%, 1); --dark: hsla(0, 0%, 90%, 1); --accent: #7C9AE0; --border: hsla(0, 0%, 100%, 0.16); --border-strong: hsla(0, 0%, 100%, 0.28); --text-muted: hsla(0, 0%, 100%, 0.55); --surface-tint: rgba(255, 255, 255, 0.04); --surface-tint-strong: rgba(255, 255, 255, 0.08); --accent-tint: rgba(124, 154, 224, 0.14); } :root[data-theme="light"] { --bg: hsla(60, 9.09%, 97.84%, 1); --text: hsla(0, 0%, 5.1%, 1); --dark: hsla(180, 1.96%, 10%, 1); --accent: #354E8D; --border: hsla(180, 1.96%, 10%, 0.2); --border-strong: hsla(180, 1.96%, 10%, 0.32); --text-muted: hsla(0, 0%, 5.1%, 0.5); --surface-tint: rgba(0, 0, 0, 0.02); --surface-tint-strong: rgba(0, 0, 0, 0.05); --accent-tint: rgba(53, 78, 141, 0.06); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } ul { list-style: disc outside; padding-left: 1.15em; } li::marker { color: var(--accent); } body { background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 18px; line-height: 1.6; min-height: 100vh; display: flex; flex-direction: column; } header { border-bottom: 2px solid var(--dark); padding: 0 40px; height: 60px; display: flex; align-items: center; background: var(--bg); } /* Shared shell for standalone content pages (guide.html, feedback.html) — NOT used by index.html, which has its own app-shell layout in index.css. */ .doc-page { flex: 1; padding: 56px 40px; width: 100%; max-width: 920px; margin: 0 auto; } .doc-page h1 { font-family: var(--font-head); font-size: 42px; letter-spacing: 0.04em; line-height: 1.1; margin-bottom: 8px; } .doc-page h1 span { color: var(--accent); } .primary-btn { display: flex; align-items: center; justify-content: center; background: var(--accent-solid); color: white; border: none; font-family: var(--font-brand); width: 240px; text-align: center; padding: 14px 12px; font-size: 26px; letter-spacing: 0.08em; white-space: nowrap; cursor: pointer; transition: opacity 0.15s, transform 0.1s; } .primary-btn:hover:not(:disabled) { opacity: 0.7; } .primary-btn:active:not(:disabled) { transform: scale(0.98); } .primary-btn:disabled { opacity: 0.4; cursor: not-allowed; } .logo { font-family: var(--font-brand); font-size: 32px; letter-spacing: 0.04em; color: var(--text); text-decoration: none; } .logo span { color: var(--accent); } .header-nav { display: flex; align-items: center; gap: 24px; margin-left: auto; } .nav-link { font-size: 16px; font-weight: 600; letter-spacing: 0.04em; color: var(--text-muted); text-decoration: none; white-space: nowrap; transition: color 0.15s; } .nav-link:hover { color: var(--accent); } /* Account menu — email trigger + Sign Out dropdown. A bordered, boxed Sign Out button has the same visual weight as a primary action for something that's rare and semi-destructive; tucking it behind the email trigger keeps it from competing with the nav links for attention. */ .account-menu { display: none; /* account-menu.js reveals this once it confirms a session exists */ position: relative; } .account-trigger { display: flex; align-items: center; gap: 6px; background: none; border: none; font-family: var(--font-body); font-size: 16px; font-weight: 600; color: var(--text-muted); cursor: pointer; padding: 0; white-space: nowrap; transition: color 0.15s; } .account-trigger:hover { color: var(--accent); } .account-caret { font-size: 18px; line-height: 1; } .account-dropdown { display: none; position: absolute; top: calc(100% + 12px); right: 0; min-width: 160px; background: var(--bg); border: 1px solid var(--border-strong); z-index: 20; } .account-dropdown.open { display: block; } .account-dropdown button { display: block; width: 100%; text-align: left; background: none; border: none; padding: 12px 16px; font-family: var(--font-body); font-size: 14px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text); cursor: pointer; transition: background 0.15s, color 0.15s; } .account-dropdown button:hover { background: var(--surface-tint); color: var(--accent); } /* Theme toggle — sun in dark mode, moon in light mode */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; background: none; border: 1px solid var(--border); border-radius: 50%; color: var(--text-muted); cursor: pointer; transition: color 0.15s, border-color 0.15s; } .theme-toggle:hover { color: var(--accent); border-color: var(--accent); } .theme-toggle svg { width: 18px; height: 18px; } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } :root[data-theme="dark"] .theme-toggle .icon-sun { display: block; } :root[data-theme="dark"] .theme-toggle .icon-moon { display: none; } @media (prefers-color-scheme: dark) { .theme-toggle .icon-sun { display: block; } .theme-toggle .icon-moon { display: none; } :root[data-theme="light"] .theme-toggle .icon-sun { display: none; } :root[data-theme="light"] .theme-toggle .icon-moon { display: block; } } .text-link { color: var(--accent); text-decoration: none; } .donate-link { color: #FF5722; text-decoration: underline; } .inherit-color { color: inherit; } .hidden { display: none; } footer { border-top: 1px solid var(--border); padding: 20px 40px; text-align: center; font-size: 13px; opacity: 0.45; }