/* CISSP Complete Learning System — Light Theme (CS6515-inspired) Design refresh 2026-07-07: same visual identity (navy header, restrained blue, soft gray page, white cards), tightened into a token-based system. All original selectors and JS hooks preserved. Original preserved in _design-backup-2026-07-07/. */ /* ===== Google Fonts Import (free, OFL-licensed fonts) ===== */ @import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&family=Lexend:wght@300;400;500;600;700;800&family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400&display=swap'); /* * OpenDyslexic — SIL OFL, loaded from CDN (not on Google Fonts) * Loaded via @font-face below instead of @import for reliability. */ @font-face { font-family: 'OpenDyslexic'; src: url('https://fonts.cdnfonts.com/s/17685/OpenDyslexic-Regular.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'OpenDyslexic'; src: url('https://fonts.cdnfonts.com/s/17685/OpenDyslexic-Bold.woff') format('woff'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'OpenDyslexic'; src: url('https://fonts.cdnfonts.com/s/17685/OpenDyslexic-Italic.woff') format('woff'); font-weight: 400; font-style: italic; font-display: swap; } /* * Sans Forgetica — CC BY-NC (non-commercial), loaded from CDN. * Designed by RMIT University to aid memory retention via "desirable difficulty." */ @font-face { font-family: 'Sans Forgetica'; src: url('https://fonts.cdnfonts.com/s/14475/SansForgetica-Regular.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; } /* * LICENSING NOTES — Fonts referenced by name only (user must have installed): * * - Sassoon Primary: Proprietary, paid license from Sassoon-Williams / Dalton Maag. * Purchase at myfonts.com. Font file must NOT be embedded without a paid license. * * - Dyslexie: Proprietary, paid license from dyslexiefont.com (~$13 personal). * Font file must NOT be embedded without a paid license. * * - Lexie Readable: Free for personal/educational use (Regular & Bold only) from K-Type. * Download from k-type.com/fonts/lexie-readable/. Do not redistribute commercially. * * - Sylexiad: CC BY-NC-ND, free for non-commercial use. Download from sylexiad.com. * Do not modify. Do not use commercially. * * These fonts are listed as CSS font-family options so they work if the user has them * installed locally. They will gracefully fall back to the next font in the stack. */ /* ===== Font System Variables ===== */ :root { /* Default font — Atkinson Hyperlegible (designed for maximum legibility) */ --font-main: "Atkinson Hyperlegible", "Helvetica Neue", Arial, sans-serif; } /* Font stacks for each option — applied via data-font attribute on */ html[data-font="atkinson"] { --font-main: "Atkinson Hyperlegible", "Helvetica Neue", Arial, sans-serif; } html[data-font="lexend"] { --font-main: "Lexend", "Segoe UI", Roboto, sans-serif; } html[data-font="opensans"] { --font-main: "Open Sans", "Segoe UI", Roboto, sans-serif; } html[data-font="opendyslexic"]{ --font-main: "OpenDyslexic", "Comic Sans MS", "Verdana", sans-serif; } html[data-font="verdana"] { --font-main: Verdana, Geneva, "DejaVu Sans", sans-serif; } html[data-font="arial"] { --font-main: Arial, "Helvetica Neue", Helvetica, sans-serif; } html[data-font="calibri"] { --font-main: Calibri, "Segoe UI", "Trebuchet MS", sans-serif; } html[data-font="forgetica"] { --font-main: "Sans Forgetica", "Segoe UI", Arial, sans-serif; } html[data-font="sylexiad"] { --font-main: "Sylexiad Sans", "Sylexiad", Verdana, sans-serif; } html[data-font="sassoon"] { --font-main: "Sassoon Primary", "Sassoon", "Comic Sans MS", sans-serif; } html[data-font="dyslexie"] { --font-main: "Dyslexie", "OpenDyslexic", Verdana, sans-serif; } html[data-font="lexie"] { --font-main: "Lexie Readable", "Lexie", Verdana, sans-serif; } html[data-font="system"] { --font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } /* ===== Design Tokens ===== */ :root { /* Surfaces */ --bg: #f4f6f9; --bg-card: #ffffff; --bg-subtle: #f8fafc; /* table headers, reveal headers, hovers */ --bg-code: #1e293b; /* Quant Academy header identity — deep indigo with teal accent */ --header-bg: #14103a; --header-bg-deep: #0e0b29; /* subtle depth for mobile panel */ --header-text: #ecebfb; /* Borders & focus */ --border: #e2e8f0; --border-strong: #cbd5e1; --border-focus: #3b82f6; --focus-ring: 0 0 0 3px rgba(59,130,246,0.35); /* Text */ --text: #1e293b; --text-secondary: #64748b; --text-muted: #94a3b8; /* Accents — restrained palette; domain colors used only as controlled accents */ --blue: #2f6fdb; --blue-deep: #2456b0; --blue-soft: #eef4fd; --green: #16a34a; --amber: #d97706; --red: #dc2626; --purple: #7c3aed; --teal: #0d9488; --cyan: #0891b2; --pink: #db2777; --indigo: #4f46e5; --quant: #6d5ef0; --quant-deep: #4f46e5; --quant-soft: #eef0fe; --accent: var(--quant); /* State tints */ --tint-info: #eff6ff; --tint-success: #f0fdf4; --tint-warning: #fffbeb; --tint-danger: #fef2f2; --tint-exam: #fdf4ff; /* Geometry & depth */ --radius-sm: 6px; --radius: 8px; --radius-lg: 10px; --shadow: 0 1px 2px rgba(15,23,42,0.05), 0 1px 3px rgba(15,23,42,0.06); --shadow-md: 0 3px 8px rgba(15,23,42,0.08), 0 1px 3px rgba(15,23,42,0.05); /* Spacing scale */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; /* Layout */ --content-max: 1000px; --content-narrow: 780px; --header-h: 52px; /* Type scale */ --fs-sm: 13px; --fs-base: 16px; --fs-md: 14px; --fs-h3: 18px; --fs-h2: 22px; --fs-h1: 31px; } /* ===== Reset ===== */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--font-main); background: var(--bg); color: var(--text); line-height: 1.7; min-height: 100vh; font-size: var(--fs-base); -webkit-text-size-adjust: 100%; } a { color: var(--blue); text-decoration: none; } a:hover { text-decoration: underline; } /* Global keyboard focus — visible, consistent, never removed */ :focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; border-radius: 4px; } /* ===== Skip to content (keyboard/screen-reader accessibility) ===== */ .skip-link { position: absolute; left: 8px; top: -48px; z-index: 200; background: var(--bg-card); color: var(--text); padding: 8px 16px; border-radius: var(--radius-sm); font-weight: 700; border: 2px solid var(--border-focus); transition: top 0.15s ease; } .skip-link:focus { top: 8px; outline: 2px solid var(--border-focus); outline-offset: 2px; } /* ===== Site Header ===== */ .site-header { background: var(--header-bg); position: sticky; top: 0; z-index: 100; box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 2px 10px rgba(15,23,42,0.25); } .site-header-inner { max-width: var(--content-max); margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; min-height: var(--header-h); gap: 12px; position: relative; } .site-title { color: var(--header-text); font-weight: 700; font-size: 16px; text-decoration: none; display: flex; align-items: center; gap: 8px; white-space: nowrap; letter-spacing: 0.01em; } .site-title:hover { text-decoration: none; color: #fff; } .badge { background: var(--blue); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 4px; letter-spacing: 0.02em; } .site-nav { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; } .site-nav a { color: var(--header-text); opacity: 0.78; font-size: 13.5px; font-weight: 500; padding: 6px 10px; border-radius: var(--radius-sm); text-decoration: none; transition: background-color 0.15s, opacity 0.15s, color 0.15s; white-space: nowrap; } .site-nav a:hover { opacity: 1; background: rgba(255,255,255,0.10); text-decoration: none; } .site-nav a.active { opacity: 1; background: rgba(59,130,246,0.28); color: #fff; font-weight: 600; } .site-nav a:focus-visible { outline-color: #93c5fd; opacity: 1; } /* Mobile nav toggle — injected by app.js (progressive enhancement). Hidden on desktop; without JS the nav simply wraps as before. */ .nav-toggle { display: none; background: rgba(255,255,255,0.10); color: var(--header-text); border: 1px solid rgba(255,255,255,0.22); border-radius: var(--radius-sm); padding: 7px 14px; font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; align-items: center; gap: 8px; line-height: 1; min-height: 38px; } .nav-toggle:hover { background: rgba(255,255,255,0.18); } .nav-toggle:focus-visible { outline: 2px solid #93c5fd; outline-offset: 2px; } .nav-toggle .nav-toggle-icon { font-size: 15px; line-height: 1; } /* ===== Layout ===== */ .container { max-width: var(--content-max); margin: 0 auto; padding: 32px 24px 80px; } .container.narrow { max-width: var(--content-narrow); } /* ===== Typography ===== */ h1 { font-size: var(--fs-h1); font-weight: 800; color: var(--text); margin-bottom: 4px; line-height: 1.2; letter-spacing: -0.01em; overflow-wrap: break-word; } h2 { font-size: var(--fs-h2); font-weight: 700; color: var(--text); margin-top: var(--space-6); margin-bottom: var(--space-4); padding-bottom: 8px; border-bottom: 2px solid var(--border); overflow-wrap: break-word; } h3 { font-size: var(--fs-h3); font-weight: 700; color: var(--text); margin-bottom: 8px; } .subtitle { color: var(--text-secondary); font-size: 16px; margin-bottom: var(--space-5); line-height: 1.55; max-width: 70ch; } .mt-0 { margin-top: 0; } p { margin-bottom: 12px; max-width: 78ch; } .card p, .callout p, td p, .quiz-question p { max-width: none; } /* ===== Source Tag ===== */ .source-tag { display: inline-block; font-size: var(--fs-sm); color: var(--text-muted); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 4px 12px; margin-bottom: 12px; } .weight-badge { display: inline-block; padding: 4px 14px; border-radius: var(--radius-sm); font-size: var(--fs-sm); font-weight: 700; } /* ===== Cards ===== */ .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-5); margin-bottom: var(--space-4); box-shadow: var(--shadow); } .card h3 { margin-top: 0; } .card p:last-child { margin-bottom: 0; } .card ul, .card ol { padding-left: 24px; margin-bottom: 12px; } .card li { margin-bottom: 4px; } .card table { width: 100%; } /* ===== Module Grid ===== */ .module-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); } .module-card { display: block; background: var(--bg-card); border: 1px solid var(--border); border-left: 4px solid var(--blue); border-radius: var(--radius); padding: 16px 20px; text-decoration: none; color: var(--text); box-shadow: var(--shadow); transition: box-shadow 0.18s, transform 0.18s, border-color 0.18s; position: relative; } .module-card:hover { box-shadow: var(--shadow-md); border-left-color: var(--accent); transform: translateY(-2px); text-decoration: none; } .module-card:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; } .module-id { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--text-muted); letter-spacing: 0.05em; margin-bottom: 4px; } .module-title { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 4px; } .module-desc { font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.45; } /* Domain-specific card colors — controlled accents on the left edge only */ .module-card[data-domain="1"] { border-left-color: var(--blue); } .module-card[data-domain="2"] { border-left-color: var(--green); } .module-card[data-domain="3"] { border-left-color: var(--purple); } .module-card[data-domain="4"] { border-left-color: var(--amber); } .module-card[data-domain="5"] { border-left-color: var(--teal); } .module-card[data-domain="6"] { border-left-color: var(--pink); } .module-card[data-domain="7"] { border-left-color: var(--cyan); } .module-card[data-domain="8"] { border-left-color: var(--indigo); } /* ===== Domain Link (list-style card) ===== */ .domain-link { display: flex; align-items: center; gap: 16px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 10px; text-decoration: none; color: var(--text); box-shadow: var(--shadow); transition: box-shadow 0.18s, transform 0.18s; } .domain-link:hover { box-shadow: var(--shadow-md); transform: translateX(4px); text-decoration: none; } .domain-link:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; } .domain-link .d-num { width: 48px; height: 48px; border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 800; flex-shrink: 0; } .domain-link .d-info { flex: 1; } .domain-link .d-title { font-size: 16px; font-weight: 700; } .domain-link .d-sub { font-size: var(--fs-sm); color: var(--text-secondary); } .domain-link .d-weight { font-size: 15px; font-weight: 700; white-space: nowrap; } /* ===== Stat Boxes ===== */ .stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); margin: var(--space-5) 0; } .stat-box { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 16px; text-align: center; box-shadow: var(--shadow); } .stat-num { font-size: 32px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; } .stat-label { font-size: 12px; color: var(--text-secondary); margin-top: 6px; } /* ===== Progress Bar ===== */ .progress-wrap { margin: var(--space-4) 0; } .progress-bar { background: var(--border); border-radius: 999px; height: 10px; overflow: hidden; } .progress-fill { height: 100%; border-radius: 999px; transition: width 0.5s ease; background: var(--blue); } .progress-label { font-size: var(--fs-sm); color: var(--text-secondary); margin-top: 4px; font-variant-numeric: tabular-nums; } /* ===== Tables ===== */ table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: var(--fs-md); } thead th { background: var(--bg-subtle); color: var(--text); text-align: left; padding: 10px 14px; border-bottom: 2px solid var(--border); font-weight: 600; font-size: var(--fs-sm); } tbody td { padding: 10px 14px; border-bottom: 1px solid var(--border); vertical-align: top; } tbody tr:hover td { background: var(--bg-subtle); } tbody tr:last-child td { border-bottom: none; } /* ===== Callouts ===== */ .callout { padding: 16px 20px; border-radius: var(--radius); margin: var(--space-4) 0; font-size: var(--fs-md); line-height: 1.6; } .callout-title { font-weight: 700; display: block; margin-bottom: 4px; } .callout.info { background: var(--tint-info); border-left: 4px solid var(--blue); } .callout.info .callout-title { color: var(--blue); } .callout.warning { background: var(--tint-warning); border-left: 4px solid var(--amber); } .callout.warning .callout-title { color: var(--amber); } .callout.danger { background: var(--tint-danger); border-left: 4px solid var(--red); } .callout.danger .callout-title { color: var(--red); } .callout.success { background: var(--tint-success); border-left: 4px solid var(--green); } .callout.success .callout-title { color: var(--green); } .callout.exam { background: var(--tint-exam); border-left: 4px solid var(--purple); } .callout.exam .callout-title { color: var(--purple); } /* ===== Reveal (Click to expand) ===== */ .reveal { margin: 8px 0; } .reveal-header { padding: 12px 16px; background: var(--bg-subtle); border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; font-weight: 600; font-size: var(--fs-md); display: flex; justify-content: space-between; align-items: center; transition: background-color 0.15s, border-color 0.15s; user-select: none; } .reveal-header::after { content: '▸'; color: var(--blue); font-size: 14px; transition: transform 0.2s; } .reveal.open .reveal-header { border-radius: var(--radius) var(--radius) 0 0; } .reveal.open .reveal-header::after { transform: rotate(90deg); } .reveal-header:hover { background: #f1f5f9; border-color: var(--blue); } .reveal-header:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; } .reveal-body { display: none; padding: 16px; border: 1px solid var(--border); border-top: none; border-radius: 0 0 var(--radius) var(--radius); background: var(--bg-card); font-size: var(--fs-md); line-height: 1.7; } .reveal.open .reveal-body { display: block; } /* ===== Steps (Worked examples) ===== */ .steps { counter-reset: step-counter; } .step { padding: 12px 16px 12px 80px; position: relative; border-left: 3px solid var(--border); margin-left: 28px; margin-bottom: 0; font-size: var(--fs-md); opacity: 1; transition: opacity 0.3s; } .step.hidden { opacity: 0.15; max-height: 0; overflow: hidden; padding: 0 16px 0 80px; } .step-num { position: absolute; left: -32px; top: 10px; background: var(--blue); color: #fff; font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; } /* ===== Code Blocks ===== */ pre { background: var(--bg-code); color: #e2e8f0; padding: 16px 20px; border-radius: var(--radius); font-family: 'SF Mono', 'Fira Code', Consolas, monospace; font-size: var(--fs-sm); overflow-x: auto; line-height: 1.6; margin: 12px 0; } code { font-family: 'SF Mono', 'Fira Code', Consolas, monospace; font-size: 0.9em; background: #f1f5f9; padding: 2px 6px; border-radius: 4px; color: var(--red); } pre code { background: none; padding: 0; color: inherit; } /* ===== Quiz System ===== */ [data-scored-quiz] { margin: var(--space-4) 0; } .quiz-question { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; margin-bottom: var(--space-3); box-shadow: var(--shadow); } .q-num { display: inline-block; background: var(--blue); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 10px; border-radius: 4px; margin-bottom: 8px; } .q-text { font-size: 15px; font-weight: 600; margin-bottom: 12px; line-height: 1.5; } .quiz-options { display: flex; flex-direction: column; gap: 8px; } .quiz-option { padding: 11px 14px; border: 2px solid var(--border); border-radius: var(--radius); cursor: pointer; font-size: var(--fs-md); transition: border-color 0.15s, background-color 0.15s; background: var(--bg-card); min-height: 44px; display: flex; align-items: center; } .quiz-option:hover { border-color: var(--blue); background: var(--blue-soft); } .quiz-option:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; } .quiz-option.selected { border-color: var(--blue); background: var(--blue-soft); font-weight: 500; } .quiz-option.correct { border-color: var(--green); background: var(--tint-success); color: #14532d; font-weight: 600; } .quiz-option.wrong { border-color: var(--red); background: var(--tint-danger); color: #991b1b; } /* Non-color completion cues (don't rely on color alone) */ .quiz-option.correct::after { content: " ✓"; font-weight: 800; margin-left: auto; padding-left: 8px; } .quiz-option.wrong::after { content: " ✕"; font-weight: 800; margin-left: auto; padding-left: 8px; } .quiz-feedback { display: none; margin-top: 10px; padding: 10px 14px; background: var(--tint-success); border-left: 3px solid var(--green); border-radius: 0 var(--radius) var(--radius) 0; font-size: var(--fs-sm); color: #14532d; } .quiz-feedback.show { display: block; } /* Highlighted key words in questions (shown on wrong answer) */ .q-highlight { background: linear-gradient(180deg, transparent 55%, #fde68a 55%); font-weight: 700; color: var(--red); padding: 0 2px; border-radius: 2px; transition: all 0.3s; } .q-highlight-phrase { background: #fef3c7; font-weight: 700; color: #92400e; padding: 1px 4px; border-radius: 3px; border-bottom: 2px solid var(--amber); } .quiz-score { text-align: center; padding: 20px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); margin-top: var(--space-4); box-shadow: var(--shadow); } .quiz-score .score-num { font-size: 42px; font-weight: 800; font-variant-numeric: tabular-nums; } .quiz-score .score-label { font-size: var(--fs-md); color: var(--text-secondary); margin-top: 4px; } /* ===== Flashcard Deck ===== */ .flashcard-deck { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-3); } .flashcard { min-height: 150px; perspective: 600px; cursor: pointer; } .flashcard-inner { position: relative; width: 100%; height: 100%; min-height: 150px; transition: transform 0.5s; transform-style: preserve-3d; } .flashcard.flipped .flashcard-inner { transform: rotateY(180deg); } .flashcard-front, .flashcard-back { position: absolute; inset: 0; backface-visibility: hidden; border-radius: var(--radius); padding: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-size: var(--fs-md); } .flashcard-front { background: var(--bg-card); border: 2px solid var(--border); color: var(--blue); font-weight: 700; font-size: 16px; box-shadow: var(--shadow); } .flashcard-back { background: #f0f9ff; border: 2px solid var(--blue); color: var(--text); transform: rotateY(180deg); line-height: 1.5; } .flashcard-hint { font-size: 11px; color: var(--text-muted); margin-top: 8px; } /* ===== Buttons ===== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 18px; border-radius: var(--radius); font-size: var(--fs-md); font-weight: 600; border: 2px solid transparent; cursor: pointer; transition: background-color 0.15s, border-color 0.15s, color 0.15s; text-decoration: none; min-height: 40px; line-height: 1.3; font-family: inherit; } .btn:hover { text-decoration: none; } .btn:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; } .btn:active { transform: translateY(1px); } .btn:disabled { opacity: 0.55; cursor: default; transform: none; } .btn-primary { background: var(--blue); color: #fff; } .btn-primary:hover { background: var(--blue-deep); } .btn-outline { background: transparent; color: var(--blue); border-color: var(--blue); } .btn-outline:hover { background: var(--blue-soft); } .btn-success { background: var(--green); color: #fff; } .btn-success:hover { background: #15803d; } .btn-sm { font-size: var(--fs-sm); padding: 6px 14px; min-height: 34px; } .btn-danger-outline { background: transparent; color: var(--red); border-color: var(--red); } .btn-danger-outline:hover { background: var(--tint-danger); } /* ===== Tags ===== */ .tag { display: inline-block; padding: 2px 10px; border-radius: var(--radius-sm); font-size: 11px; font-weight: 700; white-space: nowrap; } .tag-blue { background: var(--tint-info); color: var(--blue); } .tag-green { background: var(--tint-success); color: var(--green); } .tag-amber { background: var(--tint-warning); color: var(--amber); } .tag-red { background: var(--tint-danger); color: var(--red); } .tag-purple { background: var(--tint-exam); color: var(--purple); } /* ===== Mnemonic Box ===== */ .mnemonic { background: var(--tint-exam); border: 1px solid #e9d5ff; border-radius: var(--radius); padding: 16px 20px; margin: var(--space-4) 0; } .mnemonic-title { color: var(--purple); font-weight: 700; font-size: 15px; margin-bottom: 6px; } /* ===== Checklist ===== */ .checklist { list-style: none; padding: 0; } .checklist li { padding: 8px 0; border-bottom: 1px solid var(--border); font-size: var(--fs-md); display: flex; align-items: center; gap: 10px; } .checklist li:last-child { border-bottom: none; } .checklist input[type="checkbox"] { accent-color: var(--green); width: 16px; height: 16px; flex-shrink: 0; } .checklist input[type="checkbox"]:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; } /* ===== Search Box ===== */ .search-box { width: 100%; padding: 10px 16px; font-size: 15px; background: var(--bg-card); border: 2px solid var(--border); border-radius: var(--radius); color: var(--text); outline: none; transition: border-color 0.2s; font-family: inherit; } .search-box:focus { border-color: var(--blue); box-shadow: var(--focus-ring); } .search-box::placeholder { color: var(--text-muted); } /* ===== Module Footer (prev/next nav) ===== */ .module-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: var(--space-7); padding-top: var(--space-5); border-top: 2px solid var(--border); flex-wrap: wrap; } /* ===== Color Utility ===== */ .text-success { color: var(--green); } .text-danger { color: var(--red); } .text-warning { color: var(--amber); } .text-blue { color: var(--blue); } .text-purple { color: var(--purple); } .text-teal { color: var(--teal); } .text-pink { color: var(--pink); } .text-indigo { color: var(--indigo); } .text-muted { color: var(--text-muted); } /* ===== Font Switcher UI ===== */ .font-switcher { display: flex; align-items: center; gap: 6px; margin-left: auto; padding-left: 12px; } .font-switcher-label { color: var(--header-text); opacity: 0.7; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; } .font-switcher select { background: rgba(255,255,255,0.12); color: var(--header-text); border: 1px solid rgba(255,255,255,0.2); border-radius: 5px; padding: 5px 24px 5px 8px; font-size: var(--fs-sm); font-weight: 500; cursor: pointer; outline: none; transition: background-color 0.15s, border-color 0.15s; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23f1f5f9' d='M2 4l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 6px center; min-width: 140px; max-width: 200px; min-height: 32px; font-family: inherit; } .font-switcher select:hover { background-color: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.35); } .font-switcher select:focus { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(59,130,246,0.4); } .font-switcher select option { background: var(--header-bg); color: var(--header-text); padding: 4px 8px; } /* ===== Retention Features (module completion, scores, domain progress) ===== NOTE: In the previous stylesheet these rules were accidentally trapped inside an unclosed @media (max-width: 768px) block, so completion checkmarks and domain progress bars never rendered on desktop. Fixed 2026-07-07. */ .module-card.done::after { content: "\2713"; position: absolute; top: 10px; right: 12px; width: 22px; height: 22px; border-radius: 50%; background: var(--green); color: #fff; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; } .module-card.done { background: #f6fdf8; } .module-score { display: inline-block; margin-top: 8px; padding: 2px 8px; font-size: 11px; font-weight: 700; border-radius: 999px; } .module-score.good { background: var(--tint-success); color: var(--green); } .module-score.ok { background: var(--tint-warning); color: var(--amber); } .module-score.low { background: var(--tint-danger); color: var(--red); } .domain-progress { display: flex; align-items: center; gap: 10px; margin: 8px 0 16px; } .domain-progress.sm { margin: 0; gap: 6px; } .dp-count { font-size: var(--fs-sm); font-weight: 700; color: var(--text-secondary); white-space: nowrap; font-variant-numeric: tabular-nums; } .dp-count.dp-done { color: var(--green); } .dp-count.dp-done::after { content: " \2713"; } .dp-bar { display: inline-block; flex: 1; max-width: 220px; height: 8px; background: var(--border); border-radius: 999px; overflow: hidden; } .domain-progress.sm .dp-bar { width: 70px; flex: none; } .dp-fill { display: block; height: 100%; background: var(--green); border-radius: 999px; transition: width 0.3s; } /* Review page */ .review-meta { font-size: 12px; color: var(--text-muted); margin-bottom: 8px; } .review-meta a { color: var(--accent); } .review-empty { text-align: center; padding: 48px 24px; color: var(--text-secondary); } .review-empty .big { font-size: 40px; margin-bottom: 12px; } /* ===== Responsive ===== */ /* Collapse navigation into a menu panel once links would crowd the bar. app.js wraps .site-nav + .font-switcher into a .nav-panel-region and injects a .nav-toggle button. Rules apply ONLY when JS ran (html.js-nav) - without JS the original wrapping behavior remains, so navigation is never lost. */ @media (max-width: 960px) { html.js-nav .nav-toggle { display: inline-flex; margin-left: auto; } html.js-nav .nav-panel-region { display: none; } html.js-nav .site-header.nav-open .nav-panel-region { display: flex; flex-direction: column; gap: 8px; position: absolute; top: 100%; left: 0; right: 0; background: var(--header-bg-deep); box-shadow: 0 12px 24px rgba(15,23,42,0.35); border-top: 1px solid rgba(255,255,255,0.08); padding: 10px 16px 16px; max-height: calc(100vh - var(--header-h)); overflow-y: auto; z-index: 99; } html.js-nav .site-header.nav-open .nav-panel-region .site-nav { display: flex; flex-direction: column; align-items: stretch; gap: 2px; } html.js-nav .site-header.nav-open .nav-panel-region .site-nav a { padding: 12px 14px; font-size: 15px; border-radius: var(--radius-sm); min-height: 44px; display: flex; align-items: center; } html.js-nav .site-header.nav-open .nav-panel-region .font-switcher { display: flex; margin-left: 0; padding: 10px 2px 0; border-top: 1px solid rgba(255,255,255,0.10); } html.js-nav .site-header.nav-open .nav-panel-region .font-switcher select { flex: 1; max-width: none; min-height: 44px; } } /* Desktop: the wrapper is transparent to layout */ @media (min-width: 961px) { .nav-panel-region { display: contents; } } @media (max-width: 768px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } .module-grid { grid-template-columns: 1fr; } .container { padding: 20px 16px 60px; } .site-header-inner { padding: 0 16px; } h1 { font-size: 26px; } h2 { font-size: 20px; } .domain-link { gap: 12px; padding: 14px 16px; } .domain-link .d-num { width: 40px; height: 40px; font-size: 18px; } .module-footer { flex-direction: column; align-items: stretch; } .module-footer .btn { width: 100%; } } @media (max-width: 640px) { /* Tables (roadmap, comparisons) scroll horizontally inside their card instead of crushing text - content stays readable at 320px. */ .card { overflow-x: auto; } .card table { min-width: 560px; } .stat-grid { gap: 8px; } .stat-box { padding: 14px 10px; } .stat-num { font-size: 26px; } } @media (max-width: 380px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } .container { padding: 16px 12px 48px; } .site-title { font-size: 14px; } .badge { font-size: 10px; padding: 2px 6px; } } /* ===== Reduced Motion ===== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .module-card:hover, .domain-link:hover { transform: none; } .flashcard-inner { transition: none; } } /* ===== Print ===== */ @media print { .site-header, .skip-link, .btn, .module-footer { display: none !important; } body { background: #fff; } .card { box-shadow: none; border-color: #cbd5e1; } } /* ===== Site footer (injected by app.js SiteFooter) ===== */ .site-footer { margin-top: var(--space-7); border-top: 1px solid var(--border); background: var(--bg-subtle); } .site-footer-inner { max-width: var(--content-width, 1080px); margin: 0 auto; padding: var(--space-6) var(--space-5); text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-3); } .site-footer-report { margin: 0; color: var(--text-secondary); font-size: 0.95rem; } .site-footer-report a { color: var(--blue); font-weight: 600; text-decoration: none; } .site-footer-report a:hover { text-decoration: underline; } .site-footer-note { margin: 0; color: var(--text-muted); font-size: 0.85rem; } .coffee-btn { display: inline-flex; align-items: center; gap: 8px; background: #ffdd00; color: #1e293b; font-weight: 700; text-decoration: none; padding: 12px 22px; border-radius: var(--radius-lg); min-height: 44px; box-shadow: var(--shadow-md); transition: transform .12s ease; } .coffee-btn:hover { transform: translateY(-2px); } .coffee-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); } @media (prefers-reduced-motion: reduce) { .coffee-btn { transition: none; } .coffee-btn:hover { transform: none; } } /* ========================================================================= MALWARE ANALYSIS & RE PLATFORM — ADDITIONS (extends the CISSP base above) New in this platform: dark mode, phase accents, objective-status tracking, mastery ratings, notes, and interactive analysis components. ========================================================================= */ /* ===== Dark Mode (token overrides; toggled via html[data-theme="dark"]) ===== */ html[data-theme="dark"] { --bg: #0f172a; --bg-card: #1e293b; --bg-subtle: #263449; --bg-code: #0b1120; --header-bg: #0b1120; --header-bg-deep: #060a14; --header-text: #e2e8f0; --border: #334155; --border-strong: #475569; --text: #e2e8f0; --text-secondary: #94a3b8; --text-muted: #64748b; --blue: #60a5fa; --blue-deep: #3b82f6; --blue-soft: #172554; --green: #4ade80; --amber: #fbbf24; --red: #f87171; --purple: #a78bfa; --teal: #2dd4bf; --cyan: #22d3ee; --pink: #f472b6; --indigo: #818cf8; --tint-info: #0c1a2e; --tint-success: #0c1f16; --tint-warning: #241a06; --tint-danger: #260f0f; --tint-exam: #1c0f24; --shadow: 0 1px 2px rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.3); --shadow-md: 0 3px 8px rgba(0,0,0,0.5), 0 1px 3px rgba(0,0,0,0.35); } html { color-scheme: light; } html[data-theme="dark"] { color-scheme: dark; } /* Theme toggle button in header */ .theme-toggle { background: transparent; border: 1px solid rgba(255,255,255,0.25); color: var(--header-text); border-radius: var(--radius-sm); padding: 4px 10px; cursor: pointer; font-size: var(--fs-sm); display: inline-flex; align-items: center; gap: 6px; font-weight: 600; } .theme-toggle:hover { background: rgba(255,255,255,0.1); } /* ===== Phase accent colors (used on phase cards + left borders) ===== */ .phase-card[data-phase="1"], .lesson-card[data-phase="1"] { border-left: 4px solid var(--teal); } .phase-card[data-phase="2"], .lesson-card[data-phase="2"] { border-left: 4px solid var(--blue); } .phase-card[data-phase="3"], .lesson-card[data-phase="3"] { border-left: 4px solid var(--green); } .phase-card[data-phase="4"], .lesson-card[data-phase="4"] { border-left: 4px solid var(--indigo); } .phase-card[data-phase="5"], .lesson-card[data-phase="5"] { border-left: 4px solid var(--purple); } .phase-card[data-phase="6"], .lesson-card[data-phase="6"] { border-left: 4px solid var(--cyan); } .phase-card[data-phase="7"], .lesson-card[data-phase="7"] { border-left: 4px solid var(--red); } .phase-card[data-phase="8"], .lesson-card[data-phase="8"] { border-left: 4px solid var(--amber); } .phase-card[data-phase="9"], .lesson-card[data-phase="9"] { border-left: 4px solid var(--pink); } .phase-card[data-phase="10"], .lesson-card[data-phase="10"] { border-left: 4px solid var(--blue-deep); } .phase-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px,1fr)); gap: 16px; margin: 20px 0; } .phase-card { display: block; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px 20px; box-shadow: var(--shadow); transition: box-shadow .15s, transform .15s; position: relative; } .phase-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); text-decoration: none; } .phase-card .phase-num { font-size: var(--fs-sm); font-weight: 700; color: var(--text-muted); letter-spacing: .05em; text-transform: uppercase; } .phase-card .phase-title { font-size: var(--fs-h3); font-weight: 700; color: var(--text); margin: 4px 0 6px; } .phase-card .phase-desc { font-size: var(--fs-md); color: var(--text-secondary); } .phase-card .phase-meta { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; font-size: var(--fs-sm); color: var(--text-muted); } /* ===== Lesson meta bar (time / difficulty / prereqs) ===== */ .lesson-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 18px; } .lesson-meta .meta-chip { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-sm); background: var(--bg-subtle); border: 1px solid var(--border); border-radius: 999px; padding: 3px 11px; color: var(--text-secondary); font-weight: 600; } .diff-beginner { color: var(--green); } .diff-intermediate { color: var(--amber); } .diff-advanced { color: var(--red); } .diff-expert { color: var(--purple); } /* ===== Learning objectives with granular status tracking ===== */ .objectives { list-style: none; margin: 12px 0; padding: 0; } .objectives li { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 8px; background: var(--bg-card); } .obj-text { flex: 1; } .obj-status { font-size: var(--fs-sm); font-weight: 700; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 3px 8px; cursor: pointer; white-space: nowrap; background: var(--bg-subtle); color: var(--text-secondary); } .obj-status[data-state="not-started"] { color: var(--text-muted); } .obj-status[data-state="in-progress"] { color: var(--amber); border-color: var(--amber); background: var(--tint-warning); } .obj-status[data-state="studied"] { color: var(--blue); border-color: var(--blue); background: var(--tint-info); } .obj-status[data-state="practiced"] { color: var(--purple); border-color: var(--purple); background: var(--tint-exam); } .obj-status[data-state="needs-review"]{ color: var(--red); border-color: var(--red); background: var(--tint-danger); } .obj-status[data-state="mastered"] { color: var(--green); border-color: var(--green); background: var(--tint-success); } .obj-legend { font-size: var(--fs-sm); color: var(--text-muted); margin: 6px 0 2px; } /* ===== Mastery / confidence rating (stars) ===== */ .mastery-rating { display: inline-flex; gap: 4px; align-items: center; } .mastery-rating button { background: none; border: none; cursor: pointer; font-size: 22px; line-height: 1; color: var(--border-strong); padding: 0; } .mastery-rating button.on { color: var(--amber); } .mastery-rating button:hover { color: var(--amber); } /* ===== Personal notes area ===== */ .notes-area { margin: 16px 0; } .notes-area textarea { width: 100%; min-height: 90px; resize: vertical; font-family: var(--font-main); font-size: var(--fs-md); padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-subtle); color: var(--text); line-height: 1.6; } .notes-saved { font-size: var(--fs-sm); color: var(--green); margin-top: 4px; height: 16px; } /* ===== Bookmark button ===== */ .bookmark-btn { background: none; border: 1px solid var(--border-strong); color: var(--text-secondary); border-radius: var(--radius-sm); padding: 4px 10px; cursor: pointer; font-size: var(--fs-sm); font-weight: 600; } .bookmark-btn.on { color: var(--amber); border-color: var(--amber); background: var(--tint-warning); } /* ===== Key vocabulary ===== */ .vocab-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap: 10px; } .vocab-term { background: var(--bg-subtle); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; } .vocab-term dt { font-weight: 700; color: var(--blue); margin-bottom: 2px; } .vocab-term dd { font-size: var(--fs-md); color: var(--text-secondary); } /* ===== Code blocks (monospace, dark, with optional language tag) ===== */ pre, code { font-family: "JetBrains Mono","SF Mono",Consolas,"Liberation Mono",Menlo,monospace; } code { background: var(--bg-subtle); padding: 1px 5px; border-radius: 4px; font-size: 0.9em; color: var(--pink); } pre { background: var(--bg-code); color: #e2e8f0; padding: 14px 16px; border-radius: var(--radius); overflow-x: auto; font-size: 13px; line-height: 1.55; margin: 12px 0; border: 1px solid #0b1120; } pre code { background: none; color: inherit; padding: 0; } pre .c-cmd { color: #7dd3fc; } pre .c-reg { color: #fca5a5; } pre .c-str { color: #86efac; } pre .c-com { color: #64748b; font-style: italic; } pre .c-num { color: #fcd34d; } pre .c-kw { color: #c4b5fd; } pre .c-addr { color: #94a3b8; } pre .c-func { color: #67e8f9; } .code-label { font-size: var(--fs-sm); color: var(--text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin-bottom: -4px; } /* ===== Interactive: generic activity wrapper ===== */ .interactive { border: 2px solid var(--indigo); border-radius: var(--radius-lg); padding: 18px 20px; margin: 20px 0; background: var(--bg-card); box-shadow: var(--shadow); } .interactive > .ix-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .ix-badge { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--indigo); border-radius: 999px; padding: 3px 10px; } .ix-title { font-weight: 700; font-size: var(--fs-h3); color: var(--text); } .ix-instructions { font-size: var(--fs-md); color: var(--text-secondary); margin-bottom: 12px; } .ix-feedback { margin-top: 12px; padding: 10px 14px; border-radius: var(--radius); font-size: var(--fs-md); display: none; } .ix-feedback.show { display: block; } .ix-feedback.correct { background: var(--tint-success); border: 1px solid var(--green); color: var(--text); } .ix-feedback.incorrect { background: var(--tint-danger); border: 1px solid var(--red); color: var(--text); } .ix-complete-badge { display: none; color: var(--green); font-weight: 700; font-size: var(--fs-sm); } .ix-complete-badge.show { display: inline; } /* ===== Interactive: PE / ELF structure explorer ===== */ .pe-explorer { display: grid; grid-template-columns: 230px 1fr; gap: 14px; } @media (max-width: 640px) { .pe-explorer { grid-template-columns: 1fr; } } .pe-map { display: flex; flex-direction: column; gap: 3px; } .pe-region { border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 8px 10px; cursor: pointer; background: var(--bg-subtle); font-size: var(--fs-md); font-weight: 600; text-align: left; color: var(--text); transition: background .12s, border-color .12s; } .pe-region:hover { border-color: var(--indigo); } .pe-region.active { background: var(--indigo); color: #fff; border-color: var(--indigo); } .pe-region .pe-off { display: block; font-size: 11px; color: var(--text-muted); font-weight: 400; } .pe-region.active .pe-off { color: rgba(255,255,255,0.8); } .pe-region.suspicious { border-color: var(--red); } .pe-detail { border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; background: var(--bg-subtle); min-height: 160px; } .pe-detail h4 { margin: 0 0 6px; color: var(--indigo); } .pe-detail .pe-flag { display: inline-block; font-size: var(--fs-sm); font-weight: 700; padding: 2px 8px; border-radius: 999px; margin: 4px 4px 0 0; } .pe-flag.danger { background: var(--tint-danger); color: var(--red); border: 1px solid var(--red); } .pe-flag.ok { background: var(--tint-success); color: var(--green); border: 1px solid var(--green); } /* ===== Interactive: process tree ===== */ .proc-tree { font-family: "JetBrains Mono",Consolas,monospace; font-size: 13px; line-height: 1.5; } .proc-node { cursor: pointer; padding: 3px 8px; border-radius: 4px; display: inline-block; border: 1px solid transparent; } .proc-node:hover { background: var(--bg-subtle); } .proc-node.active { background: var(--tint-info); border-color: var(--blue); } .proc-node.flagged-correct { background: var(--tint-danger); border-color: var(--red); } .proc-children { margin-left: 22px; border-left: 1px dashed var(--border-strong); padding-left: 10px; } .proc-detail { margin-top: 12px; border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; background: var(--bg-subtle); font-size: var(--fs-md); } .proc-detail .k { color: var(--text-muted); } .proc-detail .v { color: var(--text); font-weight: 600; } /* ===== Interactive: assembly / debugger stepper ===== */ .asm-stepper { display: grid; grid-template-columns: 1fr 260px; gap: 14px; } @media (max-width: 700px) { .asm-stepper { grid-template-columns: 1fr; } } .asm-code { background: var(--bg-code); border-radius: var(--radius); padding: 10px 0; overflow-x: auto; } .asm-line { font-family: "JetBrains Mono",Consolas,monospace; font-size: 13px; padding: 2px 14px; color: #cbd5e1; white-space: pre; } .asm-line.current { background: rgba(96,165,250,0.22); border-left: 3px solid var(--blue); } .asm-state { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; background: var(--bg-subtle); } .asm-reg { display: flex; justify-content: space-between; font-family: "JetBrains Mono",Consolas,monospace; font-size: 13px; padding: 2px 0; } .asm-reg .rn { color: var(--purple); font-weight: 700; } .asm-reg.changed .rv { color: var(--red); font-weight: 700; } .asm-controls { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; } .asm-explain { margin-top: 10px; font-size: var(--fs-md); color: var(--text-secondary); min-height: 40px; } /* ===== Interactive: drag-drop matching / sequencing ===== */ .dnd-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 640px) { .dnd-wrap { grid-template-columns: 1fr; } } .dnd-pool, .dnd-targets { display: flex; flex-direction: column; gap: 8px; } .dnd-item { border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 8px 12px; background: var(--bg-card); cursor: grab; font-size: var(--fs-md); font-weight: 600; } .dnd-item:active { cursor: grabbing; } .dnd-item.dragging { opacity: .5; } .dnd-slot { border: 2px dashed var(--border-strong); border-radius: var(--radius); padding: 8px 12px; min-height: 42px; background: var(--bg-subtle); font-size: var(--fs-md); } .dnd-slot .dnd-label { font-weight: 700; color: var(--text-secondary); display: block; font-size: var(--fs-sm); } .dnd-slot.over { border-color: var(--indigo); background: var(--tint-info); } .dnd-slot.correct { border-color: var(--green); border-style: solid; background: var(--tint-success); } .dnd-slot.incorrect { border-color: var(--red); border-style: solid; background: var(--tint-danger); } /* Sequencing list (ordering activities) */ .seq-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; } .seq-item { border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 8px 12px; background: var(--bg-card); cursor: grab; display: flex; align-items: center; gap: 10px; } .seq-item .seq-handle { color: var(--text-muted); cursor: grab; } .seq-item.correct { border-color: var(--green); background: var(--tint-success); } .seq-item.incorrect { border-color: var(--red); background: var(--tint-danger); } /* ===== Interactive: decision tree / scenario branches ===== */ .decision { border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; background: var(--bg-subtle); } .decision .d-q { font-weight: 700; margin-bottom: 10px; } .d-choice { display: block; width: 100%; text-align: left; border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 9px 13px; margin-bottom: 8px; background: var(--bg-card); cursor: pointer; font-size: var(--fs-md); color: var(--text); } .d-choice:hover { border-color: var(--indigo); } .d-choice.chosen-correct { border-color: var(--green); background: var(--tint-success); } .d-choice.chosen-wrong { border-color: var(--red); background: var(--tint-danger); } /* ===== Hex viewer ===== */ .hexview { font-family: "JetBrains Mono",Consolas,monospace; font-size: 12.5px; background: var(--bg-code); color: #cbd5e1; border-radius: var(--radius); padding: 12px; overflow-x: auto; line-height: 1.5; } .hexview .h-off { color: #64748b; } .hexview .h-hi { color: #fca5a5; background: rgba(248,113,113,0.15); } .hexview .h-asc { color: #86efac; } /* ===== MITRE ATT&CK mapping grid ===== */ .attack-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(150px,1fr)); gap: 8px; } .attack-tech { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px; background: var(--bg-subtle); font-size: var(--fs-sm); cursor: pointer; } .attack-tech .at-id { font-weight: 700; color: var(--red); font-family: monospace; } .attack-tech.selected { background: var(--tint-danger); border-color: var(--red); } /* ===== Timeline (malware behavior / infection chain) ===== */ .timeline { position: relative; margin: 16px 0; padding-left: 26px; } .timeline::before { content:""; position: absolute; left: 8px; top: 4px; bottom: 4px; width: 2px; background: var(--border-strong); } .tl-event { position: relative; margin-bottom: 14px; } .tl-event::before { content:""; position: absolute; left: -22px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--blue); border: 2px solid var(--bg-card); } .tl-event.attack::before { background: var(--red); } .tl-event .tl-time { font-size: var(--fs-sm); color: var(--text-muted); font-weight: 700; } .tl-event .tl-body { font-size: var(--fs-md); color: var(--text); } /* ===== Source references block ===== */ .source-refs { border-top: 2px solid var(--border); margin-top: 28px; padding-top: 14px; } .source-refs h3 { font-size: var(--fs-h3); margin-bottom: 8px; } .source-refs ul { list-style: none; padding: 0; } .source-refs li { font-size: var(--fs-md); padding: 4px 0 4px 22px; position: relative; color: var(--text-secondary); } .source-refs li::before { content:"\1F4D6"; position: absolute; left: 0; } .src-primary { color: var(--text); font-weight: 600; } .src-note { font-size: var(--fs-sm); color: var(--text-muted); } /* Currency badges for source material */ .currency { font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 8px; text-transform: uppercase; letter-spacing:.04em; } .currency.current { background: var(--tint-success); color: var(--green); border: 1px solid var(--green); } .currency.foundational { background: var(--tint-info); color: var(--blue); border: 1px solid var(--blue); } .currency.dated { background: var(--tint-warning); color: var(--amber); border: 1px solid var(--amber); } /* ===== Completion checklist inside lessons ===== */ .completion-checklist { list-style: none; padding: 0; } .completion-checklist li { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; } .completion-checklist input { margin-top: 5px; } /* ===== Coverage matrix table ===== */ .matrix-table { width: 100%; font-size: var(--fs-md); border-collapse: collapse; } .matrix-table th { position: sticky; top: 0; background: var(--bg-subtle); } .cov-full { color: var(--green); font-weight: 700; } .cov-partial { color: var(--amber); font-weight: 700; } .cov-planned { color: var(--text-muted); font-weight: 700; } /* ===== Lab card ===== */ .lab-card { border: 1px solid var(--border); border-left: 4px solid var(--cyan); border-radius: var(--radius-lg); padding: 16px 18px; background: var(--bg-card); box-shadow: var(--shadow); margin-bottom: 14px; } .lab-safety { background: var(--tint-warning); border: 1px solid var(--amber); border-radius: var(--radius); padding: 10px 14px; font-size: var(--fs-md); margin: 10px 0; } .lab-safety strong { color: var(--amber); } /* ===== Spaced-repetition flashcard controls ===== */ .sr-controls { display: flex; gap: 8px; justify-content: center; margin-top: 12px; flex-wrap: wrap; } .sr-again { border:1px solid var(--red); color: var(--red); } .sr-hard { border:1px solid var(--amber); color: var(--amber); } .sr-good { border:1px solid var(--blue); color: var(--blue); } .sr-easy { border:1px solid var(--green); color: var(--green); } .sr-stat { text-align:center; font-size: var(--fs-md); color: var(--text-secondary); margin: 8px 0; } /* progressive hint reveal */ .hint-box { margin: 8px 0; } .hint-box .hint-text { display: none; padding: 8px 12px; background: var(--tint-info); border-left: 3px solid var(--blue); border-radius: var(--radius-sm); margin-top: 6px; font-size: var(--fs-md); } .hint-box.open .hint-text { display: block; } /* utility */ .mono { font-family: "JetBrains Mono",Consolas,monospace; } .text-cyan { color: var(--cyan); } .text-indigo-c { color: var(--indigo); } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media(max-width:640px){ .grid-2{grid-template-columns:1fr;} } /* ======================================================================== WORKBENCH ENGINE STYLES (coding, terminal, hex, query, PE, debugger) ======================================================================== */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;} .wb{border:2px solid var(--indigo);border-radius:var(--radius-lg);padding:16px 18px;margin:22px 0;background:var(--bg-card);box-shadow:var(--shadow);} .wb-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px;} .wb-badge{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--indigo);border-radius:999px;padding:3px 10px;} .wb-title{font-weight:700;font-size:var(--fs-h3);color:var(--text);} .wb-diff{font-size:11px;font-weight:700;border-radius:999px;padding:2px 8px;border:1px solid var(--border-strong);} .wb-diff.diff-beginner{color:var(--green);border-color:var(--green);} .wb-diff.diff-intermediate{color:var(--amber);border-color:var(--amber);} .wb-diff.diff-advanced{color:var(--red);border-color:var(--red);} .wb-diff.diff-expert{color:var(--purple);border-color:var(--purple);} .wb-done{color:var(--green);font-weight:700;font-size:var(--fs-sm);margin-left:auto;} .wb-skills{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px;} .wb-skill{font-size:11px;background:var(--bg-subtle);border:1px solid var(--border);border-radius:999px;padding:2px 9px;color:var(--text-secondary);} .wb-instr{font-size:var(--fs-md);color:var(--text-secondary);margin-bottom:10px;} .wb-note{font-size:var(--fs-sm);color:var(--text-muted);background:var(--bg-subtle);border-left:3px solid var(--border-strong);padding:6px 10px;border-radius:var(--radius-sm);margin:8px 0;} /* editor */ .wb-editor{display:flex;border:1px solid var(--border-strong);border-radius:var(--radius);overflow:hidden;background:var(--bg-code);margin:8px 0;} .wb-gutter{padding:10px 8px;text-align:right;color:#5b6a82;background:#0b1120;font-family:"JetBrains Mono",Consolas,monospace;font-size:13px;line-height:1.5;white-space:pre;user-select:none;overflow:hidden;min-width:34px;} .wb-code{flex:1;border:0;resize:vertical;min-height:120px;background:var(--bg-code);color:#e2e8f0;font-family:"JetBrains Mono",Consolas,monospace;font-size:13px;line-height:1.5;padding:10px 12px;outline:none;tab-size:2;white-space:pre;overflow:auto;} .wb-code:focus{box-shadow:inset 0 0 0 2px var(--blue);} .wb-toolbar{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:8px 0;} .wb-btn{font-family:var(--font-main);font-size:var(--fs-sm);font-weight:600;border:1px solid var(--border-strong);background:var(--bg-card);color:var(--text);border-radius:var(--radius-sm);padding:6px 12px;cursor:pointer;} .wb-btn:hover{border-color:var(--indigo);} .wb-btn.wb-primary{background:var(--indigo);color:#fff;border-color:var(--indigo);} .wb-btn.wb-outline{background:transparent;} .wb-out{margin:8px 0;} .wb-out-label{font-size:var(--fs-sm);font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;} .wb-out-pre{background:var(--bg-code);color:#cbd5e1;border-radius:var(--radius);padding:10px 12px;overflow:auto;max-height:260px;font-family:"JetBrains Mono",Consolas,monospace;font-size:13px;line-height:1.5;white-space:pre-wrap;} .wb-mini{background:var(--bg-subtle);border-radius:4px;padding:4px 8px;font-size:12px;white-space:pre-wrap;margin:4px 0;} .wb-feedback{display:none;margin-top:10px;padding:10px 14px;border-radius:var(--radius);font-size:var(--fs-md);} .wb-feedback.show{display:block;} .wb-feedback.wb-ok{background:var(--tint-success);border:1px solid var(--green);} .wb-feedback.wb-bad{background:var(--tint-danger);border:1px solid var(--red);} .wb-feedback.wb-warn{background:var(--tint-warning);border:1px solid var(--amber);} .wb-feedback.wb-info{background:var(--tint-info);border:1px solid var(--blue);} .wb-hint{color:var(--text-secondary);font-style:italic;} .wb-src{color:var(--text-muted);font-size:var(--fs-sm);} .wb-test{font-family:"JetBrains Mono",Consolas,monospace;font-size:12.5px;padding:2px 0;} .wb-test.ok{color:#86efac;} .wb-test.bad{color:#fca5a5;} .wb-reveal-hidden{margin-top:8px;color:#fcd34d;font-size:12.5px;} .wb-footer{margin-top:10px;border-top:1px solid var(--border);padding-top:8px;} .wb-mastery{display:inline-flex;gap:2px;margin-left:6px;} .wb-mastery button{background:none;border:none;cursor:pointer;font-size:18px;color:var(--border-strong);padding:0;} .wb-mastery button.on{color:var(--amber);} /* predict */ .wb-predict{background:var(--tint-exam);border:1px solid var(--purple);border-radius:var(--radius);padding:10px 12px;margin:8px 0;} .wb-predict-row{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap;} .wb-predict-in{flex:1;min-width:160px;padding:6px 10px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--bg-subtle);color:var(--text);} .wb-predict.locked{opacity:.9;} .wb-predict-note{font-size:var(--fs-sm);color:var(--purple);margin-top:6px;} .wb-predict-result{margin-top:8px;padding:6px 10px;border-radius:var(--radius-sm);font-size:var(--fs-md);} .wb-predict-result.ok{background:var(--tint-success);} .wb-predict-result.bad{background:var(--tint-warning);} /* terminal */ .wb-term{background:var(--bg-code);border-radius:var(--radius);padding:10px 12px;font-family:"JetBrains Mono",Consolas,monospace;font-size:13px;color:#cbd5e1;max-height:320px;overflow:auto;} .wb-term-out .wb-term-echo{white-space:pre-wrap;line-height:1.45;} .wb-term-echo.cmd{color:#7dd3fc;} .wb-term-echo.err{color:#fca5a5;} .wb-term-line{display:flex;align-items:center;gap:6px;margin-top:4px;} .wb-term-ps{color:#86efac;} .wb-term-in{flex:1;background:none;border:none;color:#e2e8f0;font-family:inherit;font-size:13px;outline:none;} /* hex */ .wb-hexwrap{margin:8px 0;} .wb-hex-toolbar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:8px;font-size:var(--fs-sm);} .wb-hex-toolbar input{padding:4px 8px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--bg-subtle);color:var(--text);font-family:monospace;} .hexview{font-family:"JetBrains Mono",Consolas,monospace;font-size:12.5px;background:var(--bg-code);color:#cbd5e1;border-radius:var(--radius);padding:12px;overflow:auto;line-height:1.6;max-height:300px;} .h-row{white-space:nowrap;} .h-off{color:#64748b;margin-right:6px;} .h-b{cursor:pointer;padding:0 1px;border-radius:2px;} .h-b:hover{background:#334155;} .h-ac{cursor:pointer;} .h-sel{background:rgba(96,165,250,.35)!important;color:#fff;} .h-region{color:#fca5a5;} .h-code{color:#7dd3fc;} .h-data{color:#86efac;} .h-hdr{color:#fcd34d;} .h-sus{color:#f472b6;background:rgba(244,114,182,.12);} .h-asc{color:#94a3b8;margin-left:10px;} .h-pad{color:#334155;} .wb-hex-detail{margin-top:8px;font-size:var(--fs-md);background:var(--bg-subtle);border:1px solid var(--border);border-radius:var(--radius);padding:8px 12px;} .wb-hex-actions{margin-top:6px;display:flex;gap:6px;flex-wrap:wrap;} /* query */ .wb-query-row{display:flex;gap:6px;margin:8px 0;flex-wrap:wrap;} .wb-query-in{flex:1;min-width:220px;padding:8px 12px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--bg-subtle);color:var(--text);font-family:"JetBrains Mono",Consolas,monospace;font-size:13px;} .wb-query-result{margin-top:8px;overflow:auto;max-height:320px;} .wb-qtable{width:100%;font-size:12.5px;border-collapse:collapse;} .wb-qtable th{position:sticky;top:0;background:var(--bg-subtle);text-align:left;padding:4px 8px;border-bottom:1px solid var(--border);} .wb-qtable td{padding:3px 8px;border-bottom:1px solid var(--border);font-family:"JetBrains Mono",Consolas,monospace;} .wb-query-count{font-size:var(--fs-sm);color:var(--text-muted);margin-top:6px;} /* PE inspection */ .wb-pe{display:flex;flex-direction:column;gap:3px;margin:8px 0;} .wb-pe-row{display:flex;justify-content:space-between;gap:10px;text-align:left;border:1px solid var(--border);border-radius:var(--radius-sm);padding:7px 11px;background:var(--bg-subtle);cursor:pointer;color:var(--text);} .wb-pe-row.sus{border-left:3px solid var(--red);} .wb-pe-row.active{background:var(--tint-info);border-color:var(--indigo);} .wb-pe-name{font-weight:700;} .wb-pe-val{color:var(--text-secondary);} .wb-pe-detail{margin-top:8px;background:var(--bg-subtle);border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px;font-size:var(--fs-md);} .wb-pe-flag{display:inline-block;margin-top:6px;font-size:var(--fs-sm);font-weight:700;padding:2px 8px;border-radius:999px;} .wb-pe-flag.danger{background:var(--tint-danger);color:var(--red);border:1px solid var(--red);} .wb-pe-flag.weak{background:var(--tint-warning);color:var(--amber);border:1px solid var(--amber);} .wb-pe-flag.ok{background:var(--tint-success);color:var(--green);border:1px solid var(--green);} /* inline question + code read */ .wb-inlineq{margin:10px 0;background:var(--bg-subtle);border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px;} .wb-q-text{font-weight:600;margin-bottom:8px;} .wb-q-opts{display:flex;flex-direction:column;gap:6px;} .wb-q-opt{text-align:left;border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:8px 12px;background:var(--bg-card);cursor:pointer;color:var(--text);} .wb-q-opt:hover{border-color:var(--indigo);} .wb-q-opt.ok{border-color:var(--green);background:var(--tint-success);} .wb-q-opt.bad{border-color:var(--red);background:var(--tint-danger);} .wb-readcode{background:var(--bg-code);color:#e2e8f0;border-radius:var(--radius);padding:12px 14px;overflow:auto;font-family:"JetBrains Mono",Consolas,monospace;font-size:13px;line-height:1.55;max-height:340px;} /* debugger */ .wb-dbg{display:grid;grid-template-columns:1fr 240px;gap:12px;} @media(max-width:720px){.wb-dbg{grid-template-columns:1fr;}} .wb-dbg-code{background:var(--bg-code);border-radius:var(--radius);padding:8px 0;overflow:auto;max-height:320px;} .wb-dbg-line{font-family:"JetBrains Mono",Consolas,monospace;font-size:13px;padding:2px 12px;color:#cbd5e1;white-space:pre;cursor:pointer;} .wb-dbg-line .bp{color:var(--red);width:12px;display:inline-block;} .wb-dbg-line.cur{background:rgba(96,165,250,.22);border-left:3px solid var(--blue);} .wb-dbg-line.hasbp .bp{content:"●";} .wb-dbg-pane{border:1px solid var(--border);border-radius:var(--radius);padding:10px;background:var(--bg-subtle);margin-bottom:8px;} .wb-dbg-pane h5{margin:0 0 4px;font-size:var(--fs-sm);color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;} .wb-reg,.wb-stackrow{display:flex;justify-content:space-between;font-family:"JetBrains Mono",Consolas,monospace;font-size:12.5px;padding:1px 0;} .wb-reg .rn{color:var(--purple);font-weight:700;} .wb-reg.changed .rv,.wb-stackrow.changed{color:var(--red);font-weight:700;} .wb-dbg-note{margin-top:8px;font-size:var(--fs-md);color:var(--text-secondary);min-height:32px;} .wb-diagram{display:flex;flex-direction:column;gap:6px;margin:8px 0;} .hub-filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center;} .hub-filters label{font-size:var(--fs-sm);color:var(--text-secondary);display:flex;gap:4px;align-items:center;} .hub-filters select{padding:5px 8px;border:1px solid var(--border-strong);border-radius:6px;background:var(--bg-subtle);color:var(--text);} /* ========================================================================== QUANT ACADEMY — additions (math, theorem boxes, workbenches, KaTeX) ========================================================================== */ /* Offline-first: local KaTeX; math never depends on a CDN. */ .katex { font-size: 1.05em; } .katex-display { margin: 14px 0; overflow-x: auto; overflow-y: hidden; padding: 4px 2px; } .katex-display > .katex { white-space: normal; } .eqn-wrap { position: relative; } .eqn-num { color: var(--text-muted); font-size: 0.9em; } .copy-tex { position:absolute; right:4px; top:4px; font-size:11px; padding:2px 7px; border:1px solid var(--border); border-radius:5px; background:var(--bg-card); color:var(--text-secondary); cursor:pointer; opacity:0; transition:opacity .12s; } .eqn-wrap:hover .copy-tex, .copy-tex:focus { opacity:1; } /* Theorem-family boxes */ .mbox { border:1px solid var(--border); border-left-width:4px; border-radius:var(--radius); padding:12px 16px; margin:14px 0; background:var(--bg-card); } .mbox .mbox-h { font-weight:700; font-size:0.95em; margin-bottom:4px; letter-spacing:.01em; } .mbox .mbox-h .mbox-tag { font-weight:400; color:var(--text-secondary); font-style:italic; margin-left:6px; } .mbox.def { border-left-color:var(--quant); background:var(--quant-soft); } .mbox.thm { border-left-color:var(--blue); background:var(--tint-info); } .mbox.prop { border-left-color:var(--cyan); background:#ecfeff; } .mbox.lemma { border-left-color:var(--teal); background:#effcf9; } .mbox.proof { border-left-color:var(--border-strong); background:var(--bg-subtle); } .mbox.proof .mbox-h::after { content:""; } .mbox.proof::after { content:"∎"; display:block; text-align:right; color:var(--text-muted); margin-top:-6px; } .mbox.remark{ border-left-color:var(--purple); background:#faf5ff; } .mbox.intuition { border-left-color:var(--amber); background:var(--tint-warning); } /* Worked example blocks */ .worked { border:1px solid var(--border); border-radius:var(--radius); margin:14px 0; overflow:hidden; } .worked-h { background:var(--bg-subtle); padding:8px 14px; font-weight:700; font-size:0.95em; border-bottom:1px solid var(--border); } .worked-b { padding:12px 16px; } .wstep { display:flex; gap:10px; padding:6px 0; border-bottom:1px dashed var(--border); } .wstep:last-child { border-bottom:none; } .wstep .wn { flex:0 0 auto; width:22px; height:22px; border-radius:50%; background:var(--quant); color:#fff; font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; } .wstep .wc { flex:1; } /* Prediction gate */ .predict-gate { border:1px dashed var(--amber); border-radius:var(--radius); padding:12px 14px; margin:14px 0; background:var(--tint-warning); } .predict-gate.locked { border-style:solid; } .predict-gate input[type=text] { padding:6px 10px; border:1px solid var(--border-strong); border-radius:var(--radius-sm); font-family:var(--font-main); width:min(320px,100%); } /* Formula sheet / flashcards additions */ .formula-sheet { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px; } .formula-card { border:1px solid var(--border); border-radius:var(--radius); padding:12px; background:var(--bg-card); } .formula-card .fc-name { font-weight:700; font-size:0.92em; margin-bottom:6px; } .formula-card .fc-note { color:var(--text-secondary); font-size:0.85em; margin-top:6px; } /* ===== Interactive math workbenches ===== */ .qwb { border:1px solid var(--border-strong); border-radius:var(--radius-lg); margin:18px 0; background:var(--bg-card); overflow:hidden; } .qwb-head { background:var(--header-bg); color:var(--header-text); padding:8px 14px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .qwb-head .qwb-badge { background:var(--quant); color:#fff; font-size:11px; font-weight:700; padding:2px 8px; border-radius:20px; text-transform:uppercase; letter-spacing:.03em; } .qwb-head .qwb-title { font-weight:700; } .qwb-body { padding:14px 16px; } .qwb-controls { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:10px 0; } .qwb-controls label { font-size:0.85em; color:var(--text-secondary); display:flex; flex-direction:column; gap:2px; } .qwb-controls input[type=range]{ width:180px; accent-color:var(--quant); } .qwb canvas { max-width:100%; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-sm); display:block; } .qwb-readout { font-family:"Cascadia Code",Consolas,monospace; font-size:13px; background:var(--bg-subtle); border:1px solid var(--border); border-radius:var(--radius-sm); padding:8px 10px; margin-top:8px; white-space:pre-wrap; } .qwb-svg { width:100%; height:auto; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-sm); } /* Python coding workbench (Pyodide) */ .pywb .py-status { font-size:12px; color:var(--text-secondary); margin:6px 0; } .pywb .py-status.loading { color:var(--amber); } .pywb .py-status.ready { color:var(--green); } .pywb .py-status.error { color:var(--red); } .pywb .py-out { font-family:"Cascadia Code",Consolas,monospace; font-size:12.5px; background:var(--bg-code); color:#e2e8f0; border-radius:var(--radius-sm); padding:10px 12px; margin-top:8px; white-space:pre-wrap; max-height:340px; overflow:auto; } .pywb .py-out .ok { color:#4ade80; } .pywb .py-out .err { color:#f87171; } .pywb .py-out .muted{color:#94a3b8;} .progressbar { height:6px; background:var(--border); border-radius:4px; overflow:hidden; margin-top:6px; } .progressbar > span { display:block; height:100%; background:var(--quant); width:0%; transition:width .2s; } /* Diagnostic / onboarding */ .diag-q { border:1px solid var(--border); border-radius:var(--radius); padding:14px 16px; margin:12px 0; background:var(--bg-card); } .diag-scale { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; } .diag-scale button { padding:6px 12px; border:1px solid var(--border-strong); border-radius:var(--radius-sm); background:var(--bg-card); cursor:pointer; } .diag-scale button.sel { background:var(--quant); color:#fff; border-color:var(--quant); } .pathway-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; margin:12px 0; } .pathway-card { border:2px solid var(--border); border-radius:var(--radius); padding:14px; cursor:pointer; background:var(--bg-card); } .pathway-card.sel { border-color:var(--quant); background:var(--quant-soft); } .pathway-card h4 { margin-bottom:6px; } /* Tables in math context */ .container.narrow table td .mono, .mono { font-family:"Cascadia Code",Consolas,monospace; } /* Dark-mode overrides for new components */ html[data-theme="dark"] .mbox.def { background:#231d4d; } html[data-theme="dark"] .mbox.thm { background:#152238; } html[data-theme="dark"] .mbox.prop { background:#0c2b31; } html[data-theme="dark"] .mbox.lemma { background:#0c2b28; } html[data-theme="dark"] .mbox.proof { background:#1a2436; } html[data-theme="dark"] .mbox.remark{ background:#241633; } html[data-theme="dark"] .mbox.intuition { background:#2a2410; } html[data-theme="dark"] .qwb-readout, html[data-theme="dark"] .diag-q, html[data-theme="dark"] .pathway-card, html[data-theme="dark"] .formula-card { background:#0f1729; } html[data-theme="dark"] .predict-gate { background:#2a2410; } html[data-theme="dark"] .katex { color:#e8eaf2; } /* ========================================================================== QUANT ACADEMY — home / hub / card layout additions ========================================================================== */ .hero { text-align:center; padding:28px 16px 8px; } .hero h1 { font-size:2.4rem; margin-bottom:8px; background:linear-gradient(90deg,var(--quant),var(--cyan)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .hero .subtitle { max-width:760px; margin:0 auto 18px; } .hero-stats { display:flex; gap:22px; justify-content:center; flex-wrap:wrap; margin:16px 0; } .hero-stats .stat { display:flex; flex-direction:column; } .hero-stats .stat-num { font-size:1.8rem; font-weight:800; color:var(--quant); } .hero-stats .stat-label { font-size:0.8rem; color:var(--text-secondary); text-transform:uppercase; letter-spacing:.04em; } .progress-bar-outer { max-width:640px; margin:14px auto 4px; height:10px; background:var(--border); border-radius:6px; overflow:hidden; } .progress-bar-outer .progress-fill { height:100%; background:linear-gradient(90deg,var(--quant),var(--cyan)); transition:width .3s; } .hero-cta { margin-top:14px; } .phase-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px; } .phase-card { display:block; border:1px solid var(--border); border-left-width:4px; border-radius:var(--radius-lg); padding:14px 16px; background:var(--bg-card); box-shadow:var(--shadow); transition:transform .1s, box-shadow .1s; } .phase-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); text-decoration:none; } .phase-card .pc-id { font-size:0.75rem; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); font-weight:700; } .phase-card .pc-name { font-weight:700; margin:2px 0 6px; color:var(--text); } .phase-card .pc-count { font-size:0.82rem; color:var(--text-secondary); } .phase-card.phase-amber { border-left-color:var(--amber); } .phase-card.phase-teal{border-left-color:var(--teal);} .phase-card.phase-blue{border-left-color:var(--blue);} .phase-card.phase-indigo{border-left-color:var(--indigo);} .phase-card.phase-cyan{border-left-color:var(--cyan);} .phase-card.phase-purple{border-left-color:var(--purple);} .phase-card.phase-green{border-left-color:var(--green);} .phase-card.phase-red{border-left-color:var(--red);} .phase-card.phase-pink{border-left-color:var(--pink);} .dp-wrap { margin-top:8px; } .lesson-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px; margin-top:14px; } .lesson-card { display:block; border:1px solid var(--border); border-radius:var(--radius); padding:12px 14px; background:var(--bg-card); box-shadow:var(--shadow); } .lesson-card:hover { box-shadow:var(--shadow-md); text-decoration:none; transform:translateY(-1px); } .lesson-card.done { border-left:4px solid var(--green); } .lc-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:4px; } .lc-num { font-size:0.75rem; font-weight:700; color:var(--text-muted); } .lc-title { font-weight:700; color:var(--text); margin-bottom:4px; } .lc-sub { font-size:0.82rem; color:var(--text-secondary); line-height:1.45; } .lc-meta { font-size:0.75rem; color:var(--text-muted); margin-top:8px; } .lesson-badge { font-size:0.68rem; font-weight:700; padding:2px 8px; border-radius:20px; background:var(--border); color:var(--text-secondary); } .lesson-badge.full { background:var(--tint-success); color:var(--green); border:1px solid var(--green); } .flashcard { border:1px solid var(--border-strong); border-radius:var(--radius); padding:16px; margin:10px 0; background:var(--bg-card); cursor:pointer; min-height:70px; } .flashcard .fc-front { font-weight:700; } .flashcard .fc-back { display:none; margin-top:8px; padding-top:8px; border-top:1px dashed var(--border); color:var(--text-secondary); } .flashcard.flipped .fc-back { display:block; } .flashcard .sr-controls { display:none; gap:6px; margin-top:10px; } .flashcard.flipped .sr-controls { display:flex; } .flashcard .sr-controls[data-due]::after { content:attr(data-due); font-size:11px; color:var(--text-muted); align-self:center; } .hero .stat-num, .stat-num { color:var(--quant); } .stat { text-align:center; } /* ========================================================================== PROJECT EULER LAB — cards, filters, workbench, hint ladder, states ========================================================================== */ .euler-hero { display:flex; gap:22px; flex-wrap:wrap; align-items:center; justify-content:space-between; border:1px solid var(--border); border-radius:var(--radius-lg); padding:16px 18px; background:var(--bg-card); box-shadow:var(--shadow); } .euler-stats { display:flex; gap:20px; flex-wrap:wrap; } .euler-stats .es { text-align:center; } .euler-stats .es-num { display:block; font-size:1.55rem; font-weight:800; color:var(--quant); } .euler-stats .es-lab { font-size:0.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--text-secondary); } .euler-filters { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px; margin:14px 0; } .euler-filters select, .euler-filters input[type=text] { width:100%; padding:8px 10px; border:1px solid var(--border-strong); border-radius:var(--radius-sm); background:var(--bg-card); color:var(--text); font-family:var(--font-main); font-size:0.9em; } .euler-filters label.chk { display:flex; align-items:center; gap:6px; font-size:0.85em; color:var(--text-secondary); } .euler-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:12px; margin-top:12px; } .euler-card { display:block; border:1px solid var(--border); border-radius:var(--radius); padding:12px 14px; background:var(--bg-card); box-shadow:var(--shadow); } .euler-card:hover { box-shadow:var(--shadow-md); transform:translateY(-1px); text-decoration:none; } .euler-card.solved { border-left:4px solid var(--green); } .ec-top { display:flex; justify-content:space-between; align-items:center; } .ec-num { font-weight:800; color:var(--text-muted); font-size:0.8rem; } .ec-tier { font-size:0.65rem; font-weight:700; padding:2px 7px; border-radius:20px; border:1px solid var(--border-strong); color:var(--text-secondary); } .ec-tier.t-A { border-color:var(--green); color:var(--green); } .ec-tier.t-B { border-color:var(--blue); color:var(--blue); } .ec-tier.t-C { border-color:var(--amber); color:var(--amber); } .ec-tier.t-D { border-color:var(--red); color:var(--red); } .ec-title { font-weight:700; margin:4px 0 6px; color:var(--text); line-height:1.35; } .ec-tags { display:flex; gap:4px; flex-wrap:wrap; margin-bottom:8px; } .ec-tag { font-size:0.68rem; padding:1px 7px; border-radius:20px; background:var(--quant-soft); color:var(--quant-deep); } .ec-meta { display:flex; gap:8px; align-items:center; flex-wrap:wrap; font-size:0.72rem; color:var(--text-muted); } .ec-diff { font-weight:700; } .ec-diff.d-foundation { color:var(--green); } .ec-diff.d-applied { color:var(--blue); } .ec-diff.d-advanced { color:var(--amber); } .ec-diff.d-research { color:var(--red); } /* problem state badges — never colour-only: always carry text */ .euler-state, .ec-state { font-size:0.68rem; padding:1px 7px; border-radius:20px; border:1px solid var(--border-strong); color:var(--text-secondary); } .euler-state.s-mastered, .ec-state.s-mastered { background:var(--tint-success); color:var(--green); border-color:var(--green); } .euler-state.s-solved-independently, .ec-state.s-solved-independently { background:var(--tint-success); color:var(--green); border-color:var(--green); } .euler-state.s-solved-with-hints, .ec-state.s-solved-with-hints { background:var(--tint-info); color:var(--blue); border-color:var(--blue); } .euler-state.s-needs-review, .ec-state.s-needs-review { background:var(--tint-warning); color:var(--amber); border-color:var(--amber); } .euler-state.s-not-viewed, .ec-state.s-not-viewed { opacity:.6; } .euler-chip { display:inline-block; font-size:0.75rem; padding:3px 9px; margin:2px; border-radius:20px; background:var(--quant-soft); color:var(--quant-deep); } .euler-chip.weak { background:var(--tint-warning); color:var(--amber); } /* mode switcher */ .euler-modes { display:flex; gap:6px; flex-wrap:wrap; margin:10px 0; } .euler-mode { padding:6px 13px; border:1px solid var(--border-strong); border-radius:20px; background:var(--bg-card); color:var(--text-secondary); cursor:pointer; font-size:0.85em; font-family:var(--font-main); } .euler-mode.sel { background:var(--quant); color:#fff; border-color:var(--quant); font-weight:700; } .euler-mode:focus-visible { outline:2px solid var(--border-focus); outline-offset:2px; } /* hint ladder */ .hint-rung { border-left:3px solid var(--amber); background:var(--tint-warning); padding:10px 14px; border-radius:0 var(--radius-sm) var(--radius-sm) 0; margin:8px 0; } .hint-rung .hint-n { display:block; font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--amber); margin-bottom:3px; } .hint-note { font-size:0.82em; color:var(--text-secondary); margin-top:8px; } /* problem statement (rendered natively in academy style) */ .euler-statement { border:1px solid var(--border); border-left:4px solid var(--quant); border-radius:var(--radius); padding:14px 18px; background:var(--bg-card); margin:12px 0; } .euler-statement img { max-width:100%; height:auto; display:block; margin:10px auto; } .euler-statement table { margin:10px 0; } .euler-attrib { font-size:0.8em; color:var(--text-secondary); border-top:1px dashed var(--border); margin-top:12px; padding-top:8px; } .euler-attrib a { color:var(--blue); } /* workbench bits */ .euler-scratch { width:100%; min-height:120px; padding:10px; border:1px solid var(--border-strong); border-radius:var(--radius-sm); font-family:var(--font-main); background:var(--bg-card); color:var(--text); } .euler-code { width:100%; min-height:230px; padding:10px; border:1px solid var(--border-strong); border-radius:var(--radius-sm); font-family:"Cascadia Code",Consolas,monospace; font-size:13px; background:var(--bg-card); color:var(--text); } .answer-row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; } .answer-row input { padding:8px 12px; border:1px solid var(--border-strong); border-radius:var(--radius-sm); font-family:"Cascadia Code",Consolas,monospace; min-width:220px; background:var(--bg-card); color:var(--text); } .answer-result { margin-top:10px; } .sol-code { background:var(--bg-code); color:#e2e8f0; padding:12px; border-radius:var(--radius-sm); overflow-x:auto; font-family:"Cascadia Code",Consolas,monospace; font-size:12.5px; white-space:pre; } .skill-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:6px 0; } .skill-row .skill-name { min-width:150px; font-size:0.88em; } .skill-row button { padding:3px 10px; border:1px solid var(--border-strong); border-radius:var(--radius-sm); background:var(--bg-card); color:var(--text); cursor:pointer; font-size:0.8em; } .skill-row button.sel { background:var(--quant); color:#fff; border-color:var(--quant); } .muted { color:var(--text-muted); } @media (max-width:640px) { .euler-grid { grid-template-columns:1fr; } .euler-filters { grid-template-columns:1fr 1fr; } .euler-stats { gap:12px; } .euler-code { min-height:180px; font-size:12px; } } @media (prefers-reduced-motion: reduce) { .euler-card:hover, .lesson-card:hover, .phase-card:hover { transform:none; } * { animation-duration:0.01ms !important; transition-duration:0.01ms !important; } } html[data-theme="dark"] .euler-statement, html[data-theme="dark"] .euler-card, html[data-theme="dark"] .euler-hero { background:#0f1729; } html[data-theme="dark"] .hint-rung { background:#2a2410; } /* ========================================================================== THE QUANT'S WISDOM — permanent academy lore near the hero. Scholarly serif (system-local, no CDN), parchment/engraved-card influence, faint formula watermark, ornamental divider. Text lives in the HTML so it stays searchable, selectable and screen-reader accessible. ========================================================================== */ .quant-wisdom { --wisdom-serif: "Palatino Linotype", Palatino, "Iowan Old Style", "Book Antiqua", Georgia, "Times New Roman", serif; position: relative; max-width: 760px; margin: 26px auto 8px; padding: 30px 34px 26px; border: 1px solid var(--border-strong); border-radius: var(--radius-lg); background: radial-gradient(120% 140% at 50% 0%, rgba(109,94,240,0.05), transparent 60%), linear-gradient(180deg, #fdfcf7 0%, #f7f4ea 100%); box-shadow: var(--shadow-md), inset 0 0 0 1px rgba(255,255,255,0.5); overflow: hidden; text-align: center; } /* faint mathematical-formula watermark, purely decorative */ .quant-wisdom::before { content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml;utf8,\ \ ∫e^{-x^2}dx=√π\ ∑1/n²=π²/6\ e^{iπ}+1=0\ dS=μS dt+σS dW\ ∂f/∂x‧∇"); background-repeat: repeat; pointer-events: none; } .quant-wisdom > * { position: relative; } .quant-wisdom .qw-mark { font-family: var(--wisdom-serif); font-size: 2.1rem; line-height: 1; color: var(--quant-deep); display: block; margin-bottom: 6px; } .quant-wisdom .qw-title { font-family: var(--wisdom-serif); font-size: 1.15rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-secondary); font-weight: 600; margin-bottom: 4px; } .quant-wisdom .qw-rule { width: 210px; height: 14px; margin: 6px auto 16px; display: block; color: var(--quant); } .quant-wisdom blockquote { font-family: var(--wisdom-serif); font-size: 1.24rem; line-height: 1.72; color: #2b2540; margin: 0 auto; max-width: 620px; font-style: italic; text-wrap: balance; } .quant-wisdom blockquote p { margin: 0 0 0.55em; } .quant-wisdom blockquote p:last-child { margin-bottom: 0; } .quant-wisdom .qw-final { font-style: normal; font-weight: 600; color: var(--quant-deep); } .quant-wisdom cite { display: block; margin-top: 16px; font-family: var(--wisdom-serif); font-style: normal; font-size: 0.86rem; letter-spacing: 0.06em; color: var(--text-muted); } /* subtle entrance, disabled under reduced-motion */ @media (prefers-reduced-motion: no-preference) { .quant-wisdom { animation: qwFade 1100ms ease both; } @keyframes qwFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } } /* dark mode — engraved slate, high contrast */ html[data-theme="dark"] .quant-wisdom { border-color: #2a2450; background: radial-gradient(120% 140% at 50% 0%, rgba(109,94,240,0.12), transparent 60%), linear-gradient(180deg, #14112e 0%, #0f0d24 100%); box-shadow: var(--shadow-md), inset 0 0 0 1px rgba(109,94,240,0.10); } html[data-theme="dark"] .quant-wisdom blockquote { color: #e9e6fb; } html[data-theme="dark"] .quant-wisdom .qw-mark, html[data-theme="dark"] .quant-wisdom .qw-final { color: #b9aef8; } @media (max-width: 640px) { .quant-wisdom { padding: 22px 18px; margin: 20px 6px 6px; } .quant-wisdom blockquote { font-size: 1.08rem; } } /* ========================================================================== SITE FOOTER — subtle, scholarly close to every page ========================================================================== */ .site-footer { margin-top: 48px; border-top: 1px solid var(--border); background: var(--bg-subtle); padding: 26px 0 30px; text-align: center; } .site-footer .footer-main { color: var(--text-secondary); font-size: 0.92rem; margin: 0 auto 6px; max-width: 720px; } .site-footer .footer-fine { color: var(--text-muted); font-size: 0.78rem; margin: 0 auto; max-width: 720px; line-height: 1.6; } .site-footer .footer-mark { margin: 12px 0 0; font-size: 1.35rem; line-height: 1; opacity: 0.7; } html[data-theme="dark"] .site-footer { background: #0e0b22; border-top-color: #241b46; } /* Nav: keep the single row from feeling cramped */ .site-nav a { white-space: nowrap; } /* Buy Me a Coffee button (footer donation) */ .site-footer .footer-cta { margin: 14px 0 0; } .coffee-btn { display: inline-flex; align-items: center; gap: 8px; background: #ffdd00; color: #1e293b; font-weight: 700; text-decoration: none; padding: 11px 20px; border-radius: var(--radius-lg); min-height: 44px; box-shadow: var(--shadow-md); transition: transform .12s ease; font-size: 0.9rem; } .coffee-btn:hover { transform: translateY(-2px); text-decoration: none; } .coffee-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); } .coffee-btn span { font-size: 1.1rem; } @media (prefers-reduced-motion: reduce) { .coffee-btn { transition: none; } .coffee-btn:hover { transform: none; } } /* --- Centering fixes: nav wrapped rows + footer content --- */ .site-nav { justify-content: center; } .site-footer .container { display: flex; flex-direction: column; align-items: center; text-align: center; } .site-footer .footer-main, .site-footer .footer-fine { max-width: 640px; } .site-footer .footer-cta { display: flex; justify-content: center; width: 100%; } /* ============================================================ Mobile homepage refinement (scoped, additive) — 2026-07 Fixes: header horizontal overflow that hid the menu/theme controls; compact, intentional hero for portrait phones. Applies at <=768px ONLY. Desktop (>=769px) is untouched. Reuses the existing app.js hamburger (.nav-toggle / .nav-panel-region); no new nav, no markup or routing changes. ============================================================ */ @media (max-width: 768px) { /* ---- Header: keep the closed bar within the viewport ---- Title takes the flexible space and can shrink (min-width:0); the badge drops to a compact second line and wraps if space is tight, so the row can never overflow. Theme + hamburger stay fixed-size and fully visible. */ .site-header-inner { gap: 8px; flex-wrap: nowrap; } .site-title { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; line-height: 1.15; font-size: 15px; min-width: 0; flex: 1 1 auto; } .site-title .badge { font-size: 10px; padding: 2px 7px; line-height: 1.2; white-space: normal; } .theme-toggle { flex: 0 0 auto; padding: 7px 10px; font-size: 12px; min-height: 38px; white-space: nowrap; } html.js-nav .nav-toggle { flex: 0 0 auto; padding: 7px 11px; font-size: 12px; } /* ---- Hero: tighter top, responsive title, compact copy ---- */ .hero { padding: 12px 16px 8px; } .hero h1 { font-size: clamp(1.6rem, 7.5vw, 2.4rem); margin-top: 0; margin-bottom: 6px; } .hero .subtitle { font-size: 14px; line-height: 1.45; margin-bottom: 14px; } /* ---- Stats: balanced 2x2 grid, equal width, centered ---- */ .hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 10px; max-width: 340px; margin: 14px auto; } .hero-stats .stat { align-items: center; text-align: center; } /* ---- Progress + actions stay within the viewport ---- */ .progress-bar-outer { width: 100%; } .hero-cta .btn { display: flex; width: 100%; box-sizing: border-box; justify-content: center; } /* secondary buttons (last block in the hero): stack full-width */ .hero > div:last-child { flex-direction: column; align-items: stretch; } .hero > div:last-child .btn { width: 100%; box-sizing: border-box; justify-content: center; } } /* ============================================================ Issue & Correction reporting (report-an-issue.html) — additive. ============================================================ */ .report-page .report-fs { border:1px solid var(--border); border-radius:var(--radius); padding:14px 16px; margin:16px 0; } .report-page legend { font-weight:700; padding:0 6px; color:var(--text); } .report-page .field { margin:10px 0; } .report-page .field > label { display:block; font-weight:600; margin-bottom:4px; color:var(--text); } .report-page .field.checkbox > label { font-weight:500; display:flex; gap:8px; align-items:flex-start; } .report-page .req { color:var(--red); } .report-page .field-help { font-size:0.82rem; color:var(--text-secondary); margin:4px 0 0; } .report-page input[type=text], .report-page input[type=email], .report-page select, .report-page textarea { width:100%; padding:9px 11px; border:1px solid var(--border-strong); border-radius:var(--radius-sm); background:var(--bg-card); color:var(--text); font-family:var(--font-main); font-size:0.95rem; box-sizing:border-box; } .report-page textarea { min-height:64px; resize:vertical; } .report-page input:focus-visible, .report-page select:focus-visible, .report-page textarea:focus-visible { outline:2px solid var(--border-focus); outline-offset:1px; } .report-page .hp { position:absolute; left:-9999px; } .context-review { display:grid; gap:4px; background:var(--bg-subtle); border:1px solid var(--border); border-radius:var(--radius-sm); padding:10px 12px; margin-bottom:10px; } .context-review:empty { display:none; } .ctx-row { display:flex; gap:10px; font-size:0.85rem; } .ctx-k { flex:0 0 130px; color:var(--text-secondary); font-weight:600; } .ctx-v { color:var(--text); word-break:break-word; } .report-actions { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:18px 0; } .btn.btn-sm { padding:5px 11px; font-size:0.82rem; min-height:34px; } .form-status { border-radius:var(--radius-sm); padding:10px 12px; margin:12px 0; font-size:0.9rem; border:1px solid var(--border); } .form-status.info { background:var(--tint-info); border-color:var(--blue); color:var(--blue); } .form-status.ok { background:var(--tint-success); border-color:var(--green); color:var(--green); } .form-status.warn { background:var(--tint-warning); border-color:var(--amber); color:var(--amber); } .form-status.error{ background:var(--tint-warning); border-color:var(--red); color:var(--red); } .report-errors { background:var(--tint-warning); border:1px solid var(--red); border-radius:var(--radius-sm); padding:10px 14px; margin:12px 0; color:var(--text); } .report-errors a { color:var(--red); } .report-banner { background:var(--bg-subtle); border:1px solid var(--border-strong); border-radius:var(--radius-sm); padding:10px 14px; margin:12px 0; display:flex; gap:10px; flex-wrap:wrap; align-items:center; font-size:0.9rem; } .report-success { background:var(--tint-success); border:1px solid var(--green); border-radius:var(--radius); padding:18px 20px; margin:16px 0; } .report-privacy { margin-top:22px; } /* contextual "report a problem" link injected on content pages */ .report-context-link { margin:18px 0 4px; font-size:0.85rem; } .report-context-link a { color:var(--text-secondary); } .report-inline-link { font-size:0.8rem; margin-left:8px; color:var(--text-secondary); } .site-footer .footer-report a { color:var(--text-secondary); text-decoration:underline; } @media (max-width:768px){ .ctx-k{ flex-basis:104px; } .report-actions .btn{ width:100%; } }