/* * HamExam.org Supplemental Stylesheet — with Light/Dark Toggle * Drop this AFTER layout2.css and flash_cards.css in your . * Overrides only — does not replace the originals. * * Theme switching: * - Defaults to user's OS preference (prefers-color-scheme) * - User can override via the toggle button in #navBeta * - Choice is saved to localStorage and restored on every page load * - See hamexam-theme.js for the toggle logic to add before */ /* ============================================================ LIGHT THEME TOKENS (default) ============================================================ */ :root { --amber: #c8860a; --amber-light: #f0a830; --amber-dim: #7a5008; --bg: #e8e6e0; --bg-panel: #f5f3ee; --bg-content: #ffffff; --bg-table-th: #f5f0e4; --bg-table-hover: #fffbf0; --bg-answer-hover:#fff8e8; --bg-wrong: #fff0f0; --bg-correct: #f0fff4; --bg-explanation: #fffbf0; --border: #c8c4b8; --border-panel: #b8b4a8; --border-table: #e8e4da; --text: #2a2a2a; --text-muted: #666; --text-heading: #3d3020; --text-wrong: #999; --text-correct: #1a6b34; --text-explain: #444; --link: #0077aa; --link-visited: #005580; --link-hover-bg: #fff3d0; --toggle-bg: #e8e4dc; --toggle-border: #b8b4a8; --radius: 6px; --radius-lg: 10px; --shadow-panel: 2px 2px 6px rgba(0,0,0,0.12); --shadow-content: 0 2px 10px rgba(0,0,0,0.10); --font-ui: system-ui, -apple-system, 'Segoe UI', sans-serif; } /* ============================================================ DARK THEME TOKENS Applied when (JS toggle or OS preference) ============================================================ */ :root.dark { --amber: #e09820; --amber-light: #c88018; --amber-dim: #f0b030; --bg: #1e1c18; --bg-panel: #26231c; --bg-content: #2a2720; --bg-table-th: #332e22; --bg-table-hover: #322e24; --bg-answer-hover:#3a3420; --bg-wrong: #2e2020; --bg-correct: #1a2e20; --bg-explanation: #241f16; --border: #3e3a2e; --border-panel: #4a4538; --border-table: #3a3630; --text: #d4cfc4; --text-muted: #888070; --text-heading: #e8c878; --text-wrong: #665a50; --text-correct: #78c890; --text-explain: #b8b0a0; --link: #7ab8d4; --link-visited: #5a98b4; --link-hover-bg: #3a3020; --toggle-bg: #302c22; --toggle-border: #4a4538; } /* OS-level dark preference — used as initial default before JS runs, and as fallback if JS is disabled. The :not(.light) guard means a user who has explicitly chosen light won't get overridden by their OS. */ @media (prefers-color-scheme: dark) { :root:not(.light) { --amber: #e09820; --amber-light: #c88018; --amber-dim: #f0b030; --bg: #1e1c18; --bg-panel: #26231c; --bg-content: #2a2720; --bg-table-th: #332e22; --bg-table-hover: #322e24; --bg-answer-hover:#3a3420; --bg-wrong: #2e2020; --bg-correct: #1a2e20; --bg-explanation: #241f16; --border: #3e3a2e; --border-panel: #4a4538; --border-table: #3a3630; --text: #d4cfc4; --text-muted: #888070; --text-heading: #e8c878; --text-wrong: #665a50; --text-correct: #78c890; --text-explain: #b8b0a0; --link: #7ab8d4; --link-visited: #5a98b4; --link-hover-bg: #3a3020; --toggle-bg: #302c22; --toggle-border: #4a4538; } } /* Smooth transition when theme switches */ body, .content, #navAlpha, #navBeta, .content table td, .content table th, div.question ul li, .explanation, input[type="text"], input[type="password"], input[type="email"] { transition: background-color 0.25s, color 0.25s, border-color 0.25s; } /* ============================================================ BASE / BODY ============================================================ */ body { background-color: var(--bg); color: var(--text); font: 14px/1.6 var(--font-ui); margin: 20px; } /* ============================================================ HEADINGS ============================================================ */ h1 { font-size: 22px; font-weight: 700; color: var(--amber); letter-spacing: 0.02em; margin-bottom: 16px; font-family: var(--font-ui); } h2 { font: bold 14px/1.4 var(--font-ui); color: var(--text-heading); margin-bottom: 8px; } h3 { font: bold 12px/1.4 var(--font-ui); color: var(--text-heading); margin-top: 12px; margin-bottom: 6px; } p { font: 14px/1.7 var(--font-ui); margin-bottom: 14px; } /* ============================================================ LINKS ============================================================ */ a { color: var(--link); font-size: inherit; font-family: inherit; font-weight: 500; text-decoration: none; transition: background-color 0.15s, color 0.15s; } a:link { color: var(--link); } a:visited { color: var(--link-visited); } a:hover { background-color: var(--link-hover-bg); color: var(--amber-dim); border-radius: 3px; padding: 0 2px; } /* ============================================================ CONTENT BOX ============================================================ */ .content { background-color: var(--bg-content); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-content); padding: 18px 22px; margin-left: 180px; margin-right: 220px; min-width: 480px; } /* ============================================================ NAVIGATION PANELS (#navAlpha = left, #navBeta = right) ============================================================ */ #navAlpha, #navBeta { background-color: var(--bg-panel); border: 1px solid var(--border-panel); border-radius: var(--radius); box-shadow: var(--shadow-panel); padding: 12px; font-size: 13px; line-height: 1.8; } #navAlpha { border-left: 3px solid var(--amber-light); } #navBeta { border-right: 3px solid var(--amber-light); } #navAlpha a, #navBeta a { display: block; font-size: 13px; font-weight: 500; padding: 1px 4px; border-radius: 3px; } #navAlpha h3, #navBeta h3 { color: var(--amber); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; margin-top: 14px; margin-bottom: 4px; border-bottom: 1px solid var(--border); padding-bottom: 3px; } /* ============================================================ THEME TOGGLE BUTTON (appended into #navBeta by JS) ============================================================ */ #theme-toggle { display: block; width: 100%; margin-top: 16px; padding: 5px 8px; background: var(--toggle-bg); border: 1px solid var(--toggle-border); border-radius: var(--radius); color: var(--text); font: 12px var(--font-ui); cursor: pointer; text-align: center; letter-spacing: 0.03em; box-sizing: border-box; transition: border-color 0.15s, color 0.15s, background-color 0.15s; } #theme-toggle:hover { border-color: var(--amber); color: var(--amber); } /* ============================================================ TABLES ============================================================ */ .content table { border-collapse: collapse; width: 100%; font-size: 13px; margin-bottom: 16px; } .content table td, .content table th { padding: 7px 10px; border-bottom: 1px solid var(--border-table); vertical-align: middle; } .content table th { background-color: var(--bg-table-th); font-weight: 600; color: var(--text-heading); } .content table tr:hover td { background-color: var(--bg-table-hover); } table.examStats, table.examStats th, table.examStats td { border: 1px solid var(--border); padding: 5px 8px; } table.examStats th.examStatsHeader { background-color: var(--bg-table-th); } /* ============================================================ FORMS ============================================================ */ input[type="text"], input[type="password"], input[type="email"] { border: 1px solid var(--border); border-radius: 4px; padding: 4px 7px; font: 13px var(--font-ui); background: var(--bg-content); color: var(--text); width: calc(100% - 16px); box-sizing: border-box; transition: border-color 0.15s; } input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus { border-color: var(--amber); outline: none; box-shadow: 0 0 0 2px rgba(200,134,10,0.2); } input[type="submit"], input[type="button"] { background: var(--amber); color: #fff; border: none; border-radius: 4px; padding: 5px 14px; font: 600 13px var(--font-ui); cursor: pointer; transition: background-color 0.15s; } input[type="submit"]:hover, input[type="button"]:hover { background: var(--amber-dim); } .formField { margin-bottom: 10px; } /* ============================================================ FLASH CARDS ============================================================ */ div.question p.questionText { font-size: 15px; font-weight: 600; color: var(--text-heading); margin: 4px 0 10px 0; line-height: 1.5; } div.question p.questionNumber { font-size: 12px; font-weight: 700; color: var(--amber); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 2px; } div.question ul li { line-height: 1.6; padding: 5px 8px 5px 48px; text-indent: -42px; border-radius: 4px; transition: background-color 0.12s; margin-bottom: 2px; } div.question li:hover { background-color: var(--bg-answer-hover); cursor: pointer; } div.question ul li.wrongAnswer { text-decoration: line-through; color: var(--text-wrong); background-color: var(--bg-wrong); } div.question ul li.correctAnswer { background-color: var(--bg-correct); color: var(--text-correct); font-weight: 600; } div.question img.figure { border: 1px solid var(--border); border-radius: 4px; max-width: 220px; max-height: 140px; } /* ============================================================ GROUP HEADINGS ============================================================ */ h2.groupHeading { border-top: 2px solid var(--amber-light); border-bottom: none; padding: 8px 0 4px 0; color: var(--amber-dim); font-size: 13px; text-transform: uppercase; letter-spacing: 0.07em; margin-top: 20px; } /* ============================================================ FLASH CARD HEADER ============================================================ */ .flashCardHeader { font-size: 20px; font-weight: 700; color: var(--amber); margin-bottom: 16px; } /* ============================================================ EXPLANATION BOX ============================================================ */ .explanation { font-weight: normal; font-size: 13px; color: var(--text-explain); padding: 10px 14px; margin-top: 12px; background-color: var(--bg-explanation); border-left: 3px solid var(--amber-light); border-radius: 0 4px 4px 0; line-height: 1.6; } /* ============================================================ SUBMIT BUTTON AREA ============================================================ */ #submitButton { margin: 4px 20px 4px 0; } /* ============================================================ STATS TABLES ============================================================ */ table.statsTableSubelement th, table.statsTableGroup th { background-color: var(--bg-table-th); color: var(--text-heading); } /* ============================================================ NEWS LIST ============================================================ */ .content ul li { line-height: 1.7; margin-bottom: 2px; } /* ============================================================ MOBILE — collapse sidebars below 800px ============================================================ */ @media (max-width: 800px) { body { margin: 10px; display: flex; flex-direction: column; } .content { margin-left: 0 !important; margin-right: 0 !important; min-width: 0 !important; border-radius: var(--radius); padding: 14px; } #navAlpha, #navBeta { position: static !important; width: auto !important; margin-bottom: 12px; border-left: 3px solid var(--amber-light); border-right: none; } #navAlpha { order: 1; } .content { order: 2; } #navBeta { order: 3; } } /* ============================================================ PRINT ============================================================ */ @media print { body { background: white; color: black; } .content { box-shadow: none; border: 1px solid #ccc; background: white; } #theme-toggle { display: none; } }