/* ========================================================================== Interactive Algorithm Learning — Main Stylesheet Vanilla CSS with custom properties for light/dark theming. ========================================================================== */ /* -------------------------------------------------------------------------- 1. CSS Custom Properties — Light Theme (default) All colors maintain minimum 4.5:1 contrast ratio against their backgrounds. -------------------------------------------------------------------------- */ :root { /* Core palette */ --color-bg: #ffffff; --color-text: #1a1a2e; --color-primary: #0066cc; --color-primary-hover: #0052a3; --color-secondary: #f0f4f8; --color-border: #d0d7de; --color-muted: #57606a; /* Header */ --color-header-bg: #0066cc; --color-header-text: #ffffff; /* Sidebar */ --color-sidebar-bg: #f0f4f8; --color-sidebar-text: #1a1a2e; --color-sidebar-active: #0066cc; --color-sidebar-active-bg: #dbe8f6; /* Cards */ --color-card-bg: #ffffff; --color-card-border: #d0d7de; --color-card-hover-border: #0066cc; /* Code viewer */ --color-code-bg: #f6f8fa; --color-code-line-num: #6e7781; /* Difficulty tags */ --color-beginner: #1a7f37; --color-beginner-bg: #dafbe1; --color-intermediate: #9a6700; --color-intermediate-bg: #fff8c5; --color-advanced: #cf222e; --color-advanced-bg: #ffebe9; /* Focus */ --color-focus: #0066cc; --focus-ring: 0 0 0 3px rgba(0, 102, 204, 0.4); /* Misc */ --color-error: #cf222e; --color-success: #1a7f37; --color-overlay: rgba(0, 0, 0, 0.4); --border-radius: 6px; --transition-speed: 0.2s; } /* -------------------------------------------------------------------------- 2. CSS Custom Properties — Dark Theme Applied via data-theme="dark" on . All colors maintain minimum 4.5:1 contrast ratio against their backgrounds. -------------------------------------------------------------------------- */ [data-theme="dark"] { --color-bg: #1a1a2e; --color-text: #e0e0e0; --color-primary: #4da6ff; --color-primary-hover: #7abfff; --color-secondary: #2a2a4a; --color-border: #3d3d5c; --color-muted: #a0a0b8; /* Header */ --color-header-bg: #16162b; --color-header-text: #e0e0e0; /* Sidebar */ --color-sidebar-bg: #22223a; --color-sidebar-text: #e0e0e0; --color-sidebar-active: #4da6ff; --color-sidebar-active-bg: #2a2a4a; /* Cards */ --color-card-bg: #22223a; --color-card-border: #3d3d5c; --color-card-hover-border: #4da6ff; /* Code viewer */ --color-code-bg: #22223a; --color-code-line-num: #8888a0; /* Difficulty tags — adjusted for dark backgrounds */ --color-beginner: #3fb950; --color-beginner-bg: #1a3a2a; --color-intermediate: #d29922; --color-intermediate-bg: #3a2e1a; --color-advanced: #f85149; --color-advanced-bg: #3a1a1a; /* Focus */ --color-focus: #4da6ff; --focus-ring: 0 0 0 3px rgba(77, 166, 255, 0.4); /* Misc */ --color-error: #f85149; --color-success: #3fb950; --color-overlay: rgba(0, 0, 0, 0.6); } /* -------------------------------------------------------------------------- 3. Reset & Base Styles -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color: var(--color-text); background-color: var(--color-bg); line-height: 1.6; min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: 260px 1fr; grid-template-areas: "header header" "sidebar main" "footer footer"; transition: background-color var(--transition-speed), color var(--transition-speed); } /* -------------------------------------------------------------------------- 4. Layout — Header -------------------------------------------------------------------------- */ header[role="banner"] { grid-area: header; background-color: var(--color-header-bg); color: var(--color-header-text); padding: 0 1rem; position: sticky; top: 0; z-index: 100; } .header-content { display: flex; align-items: center; justify-content: space-between; max-width: 1400px; margin: 0 auto; height: 56px; } .site-title { font-size: 1.25rem; font-weight: 700; color: var(--color-header-text); text-decoration: none; } .site-title:hover { opacity: 0.9; } #theme-toggle { background: none; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: var(--border-radius); color: var(--color-header-text); font-size: 1.25rem; cursor: pointer; padding: 0.25rem 0.5rem; line-height: 1; transition: border-color var(--transition-speed); } #theme-toggle:hover { border-color: rgba(255, 255, 255, 0.6); } /* -------------------------------------------------------------------------- 5. Layout — Sidebar Navigation -------------------------------------------------------------------------- */ #sidebar { grid-area: sidebar; background-color: var(--color-sidebar-bg); border-right: 1px solid var(--color-border); padding: 1rem; overflow-y: auto; height: calc(100vh - 56px); position: sticky; top: 56px; transition: background-color var(--transition-speed); } #sidebar a { color: var(--color-sidebar-text); text-decoration: none; display: block; padding: 0.375rem 0.5rem; border-radius: var(--border-radius); transition: background-color var(--transition-speed); } #sidebar a:hover { background-color: var(--color-sidebar-active-bg); } #sidebar a.active { color: var(--color-sidebar-active); background-color: var(--color-sidebar-active-bg); font-weight: 600; } #nav-search { margin-bottom: 0.5rem; } #nav-difficulty-filter { margin-bottom: 0.75rem; } .nav-category { margin-bottom: 0.5rem; } .nav-category-title { font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-muted); padding: 0.375rem 0.5rem; margin: 0; } .nav-algorithm-list { list-style: none; padding: 0; margin: 0; } .nav-algorithm-list li { margin: 0; } .nav-algo-name { margin-right: 0.375rem; } /* -------------------------------------------------------------------------- 6. Layout — Main Content -------------------------------------------------------------------------- */ #main-content { grid-area: main; padding: 1.5rem 2rem; min-width: 0; overflow-x: hidden; } #app { max-width: 960px; margin: 0 auto; } /* -------------------------------------------------------------------------- 7. Layout — Footer -------------------------------------------------------------------------- */ footer[role="contentinfo"] { grid-area: footer; text-align: center; padding: 1rem; font-size: 0.875rem; color: var(--color-muted); border-top: 1px solid var(--color-border); } /* -------------------------------------------------------------------------- 8. Hamburger Menu / Nav Toggle Hidden on desktop (>=768px), visible on mobile (<768px). -------------------------------------------------------------------------- */ .nav-toggle { display: none; background: none; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: var(--border-radius); color: var(--color-header-text); font-size: 1.5rem; cursor: pointer; padding: 0.125rem 0.5rem; line-height: 1; } /* -------------------------------------------------------------------------- 9. Responsive — Mobile (<768px) Sidebar collapses to off-screen; hamburger toggle shows it. -------------------------------------------------------------------------- */ @media (max-width: 767px) { body { grid-template-columns: 1fr; grid-template-areas: "header" "main" "footer"; } .nav-toggle { display: inline-flex; align-items: center; } #sidebar { position: fixed; top: 56px; left: 0; width: 280px; height: calc(100vh - 56px); transform: translateX(-100%); transition: transform 0.3s ease; z-index: 90; box-shadow: none; } /* Show sidebar when toggled */ body.sidebar-open #sidebar { transform: translateX(0); box-shadow: 2px 0 8px var(--color-overlay); } /* Overlay behind sidebar */ body.sidebar-open::after { content: ""; position: fixed; inset: 56px 0 0 0; background: var(--color-overlay); z-index: 80; } #main-content { padding: 1rem; } } /* -------------------------------------------------------------------------- 10. Focus Indicators — Visible outlines for all interactive elements Requirement 13.3: visible focus indicator on keyboard navigation. -------------------------------------------------------------------------- */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; box-shadow: var(--focus-ring); } /* Remove default outline only when not using keyboard */ :focus:not(:focus-visible) { outline: none; } /* -------------------------------------------------------------------------- 11. Difficulty Tags Requirement 12.2: visually distinct per level. -------------------------------------------------------------------------- */ .difficulty-beginner, .difficulty-intermediate, .difficulty-advanced { display: inline-block; font-size: 0.75rem; font-weight: 600; padding: 0.125rem 0.5rem; border-radius: 999px; line-height: 1.4; text-transform: uppercase; letter-spacing: 0.03em; } .difficulty-beginner { color: var(--color-beginner); background-color: var(--color-beginner-bg); } .difficulty-intermediate { color: var(--color-intermediate); background-color: var(--color-intermediate-bg); } .difficulty-advanced { color: var(--color-advanced); background-color: var(--color-advanced-bg); } /* -------------------------------------------------------------------------- 12. Cards — Category and Algorithm cards -------------------------------------------------------------------------- */ .landing-tagline { text-align: center; margin-bottom: 1.5rem; } .landing-tagline h1 { font-size: 1.75rem; margin-bottom: 0.5rem; } .landing-tagline p { color: var(--color-muted); } .landing-filters { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem; } .landing-filters span { font-weight: 600; font-size: 0.875rem; } .difficulty-filter-btn.active { border-color: var(--color-primary); background-color: var(--color-primary); color: #ffffff; } .category-header { margin-bottom: 1rem; } .category-header h1 { margin-top: 0.5rem; } .back-link { color: var(--color-primary); text-decoration: none; font-size: 0.875rem; } .back-link:hover { text-decoration: underline; } .card-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; } .card-icon { font-size: 1.5rem; } .card-title { font-size: 1.125rem; font-weight: 600; } .card-count { font-size: 0.875rem; color: var(--color-muted); margin-bottom: 0.5rem; } .card-progress-label { font-size: 0.8125rem; color: var(--color-muted); margin-bottom: 0.25rem; } .card-exercises { font-size: 0.8125rem; color: var(--color-muted); margin-top: 0.5rem; } .card-description { font-size: 0.875rem; color: var(--color-muted); margin-top: 0.5rem; line-height: 1.5; } .card { background-color: var(--color-card-bg); border: 1px solid var(--color-card-border); border-radius: var(--border-radius); padding: 1.25rem; transition: border-color var(--transition-speed), box-shadow var(--transition-speed); cursor: pointer; } .card:hover { border-color: var(--color-card-hover-border); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; } /* -------------------------------------------------------------------------- 13. Buttons -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 500; border: 1px solid var(--color-border); border-radius: var(--border-radius); background-color: var(--color-secondary); color: var(--color-text); cursor: pointer; transition: background-color var(--transition-speed), border-color var(--transition-speed); } .btn:hover { border-color: var(--color-primary); } .btn-primary { background-color: var(--color-primary); color: #ffffff; border-color: var(--color-primary); } .btn-primary:hover { background-color: var(--color-primary-hover); } /* -------------------------------------------------------------------------- 14. Form Controls — Search, filters, inputs -------------------------------------------------------------------------- */ input[type="text"], input[type="search"], select { padding: 0.5rem 0.75rem; font-size: 0.875rem; border: 1px solid var(--color-border); border-radius: var(--border-radius); background-color: var(--color-bg); color: var(--color-text); width: 100%; transition: border-color var(--transition-speed); } input[type="text"]:hover, input[type="search"]:hover, select:hover { border-color: var(--color-primary); } /* -------------------------------------------------------------------------- 15. Code Viewer -------------------------------------------------------------------------- */ .code-viewer { background-color: var(--color-code-bg); border: 1px solid var(--color-border); border-radius: var(--border-radius); overflow-x: auto; font-size: 0.875rem; line-height: 1.5; } .code-viewer pre { margin: 0; padding: 0; overflow-x: auto; } .code-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--color-border); gap: 0.5rem; } .code-lang-toggle { display: flex; gap: 0.25rem; } .code-lang-btn.active { background-color: var(--color-primary); color: #ffffff; border-color: var(--color-primary); } .code-table { width: 100%; border-collapse: collapse; font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; font-size: 0.875rem; line-height: 1.5; } .code-table td { padding: 0 0.75rem; vertical-align: top; white-space: pre; } .code-line-numbers { color: var(--color-code-line-num); text-align: right; user-select: none; padding-right: 0.75rem; border-right: 1px solid var(--color-border); width: 1%; } .code-line code { background: none; padding: 0; } /* -------------------------------------------------------------------------- 15b. Algorithm Detail Page -------------------------------------------------------------------------- */ .algorithm-header { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.75rem; } .algorithm-header h1 { font-size: 1.75rem; } .algorithm-description { margin-bottom: 1rem; color: var(--color-text); line-height: 1.6; } .algorithm-steps { margin: 1.5rem 0; } .algorithm-steps h2 { margin-bottom: 0.5rem; } .algorithm-steps ol { padding-left: 1.5rem; } .algorithm-steps li { margin-bottom: 0.375rem; } .algorithm-code, .algorithm-visualization, .algorithm-exercises { margin: 1.5rem 0; } .algorithm-code h2, .algorithm-visualization h2, .algorithm-exercises h2 { margin-bottom: 0.75rem; } .algorithm-not-found { text-align: center; padding: 3rem 1rem; } .algorithm-not-found p { font-size: 1.25rem; margin-bottom: 1rem; color: var(--color-muted); } .algorithm-not-found a { color: var(--color-primary); text-decoration: none; } .algorithm-not-found a:hover { text-decoration: underline; } /* -------------------------------------------------------------------------- 16. Complexity Badge -------------------------------------------------------------------------- */ .complexity-badge { display: inline-flex; gap: 0.75rem; flex-wrap: wrap; font-size: 0.8125rem; color: var(--color-muted); } .complexity-badge span { background-color: var(--color-secondary); padding: 0.125rem 0.5rem; border-radius: var(--border-radius); } /* -------------------------------------------------------------------------- 17. Visualization Panel -------------------------------------------------------------------------- */ .visualization-panel { border: 1px solid var(--color-border); border-radius: var(--border-radius); padding: 1rem; background-color: var(--color-card-bg); } .step-controller { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; padding: 0.75rem 0; } .step-controller button { padding: 0.375rem 0.75rem; } .speed-slider { width: 120px; } /* -------------------------------------------------------------------------- 18. Exercise Panel -------------------------------------------------------------------------- */ .exercise-panel { border: 1px solid var(--color-border); border-radius: var(--border-radius); padding: 1.25rem; background-color: var(--color-card-bg); } .exercise-card { margin-bottom: 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid var(--color-border); } .exercise-card:last-child { border-bottom: none; margin-bottom: 0; } .exercise-question { font-weight: 600; margin-bottom: 0.5rem; } .exercise-form { margin-bottom: 0.5rem; } .exercise-option { display: block; padding: 0.25rem 0; cursor: pointer; } .exercise-input-label { display: block; margin-bottom: 0.5rem; } .exercise-input { margin-top: 0.25rem; } .exercise-submit { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 500; border: 1px solid var(--color-primary); border-radius: var(--border-radius); background-color: var(--color-primary); color: #ffffff; cursor: pointer; margin-top: 0.5rem; } .exercise-submit:hover { background-color: var(--color-primary-hover); } .exercise-submit:disabled { opacity: 0.5; cursor: not-allowed; } .exercise-feedback { min-height: 1.5rem; margin-top: 0.5rem; } .feedback-correct { color: var(--color-success); font-weight: 600; } .feedback-incorrect { color: var(--color-error); font-weight: 600; } .exercise-hint { color: var(--color-muted); font-style: italic; margin-top: 0.25rem; } .exercise-attempts { font-size: 0.875rem; color: var(--color-muted); margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--color-border); } /* -------------------------------------------------------------------------- 19. Progress Bar -------------------------------------------------------------------------- */ .progress-bar { height: 6px; background-color: var(--color-secondary); border-radius: 3px; overflow: hidden; } .progress-bar-fill { height: 100%; background-color: var(--color-primary); border-radius: 3px; transition: width 0.3s ease; } /* -------------------------------------------------------------------------- 20. Error & Loading States -------------------------------------------------------------------------- */ .error-message { color: var(--color-error); padding: 1rem; border: 1px solid var(--color-error); border-radius: var(--border-radius); background-color: var(--color-card-bg); text-align: center; } .loading-indicator { color: var(--color-muted); text-align: center; padding: 2rem; } .error-page { text-align: center; padding: 3rem 1rem; } .retry-btn { margin-top: 1rem; } /* -------------------------------------------------------------------------- 21. Utility Classes -------------------------------------------------------------------------- */ /* Skip to content link — visible only on keyboard focus */ .skip-link { position: absolute; top: -100%; left: 0.5rem; background-color: var(--color-primary); color: #ffffff; padding: 0.5rem 1rem; border-radius: var(--border-radius); z-index: 200; font-weight: 600; text-decoration: none; } .skip-link:focus { top: 0.5rem; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .no-results { color: var(--color-muted); text-align: center; padding: 2rem; font-style: italic; }