/* ============================================================ PyZone — assets/css/style.css Duolingo-inspired design system with full Dark Mode support. Theme switching: add/remove data-theme="dark" on . JS reads from localStorage and applies on load (in app.js). ============================================================ */ /* ─── Google Font ──────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap'); /* ============================================================ LIGHT MODE — CSS Variables (default) ============================================================ */ :root { /* Brand palette */ --green: #58cc02; --green-dark: #46a302; --green-light: #d7f5b1; --blue: #1cb0f6; --blue-dark: #0a91d1; --blue-light: #ddf4ff; --red: #ff4b4b; --red-dark: #ea2b2b; --red-light: #ffd5d5; --yellow: #ffc800; --yellow-dark: #dba900; --yellow-light: #fff3c4; /* Surfaces */ --bg: #f7f7f7; --surface: #ffffff; --surface-2: #f2f2f2; --surface-3: #e8e8e8; --border: #e0e0e0; --border-2: #d0d0d0; /* Text */ --text: #2c2c2c; --text-muted: #6e6e6e; --text-faint: #afafaf; /* Interactive */ --input-bg: #ffffff; --input-border: #d8d8d8; --input-focus: var(--blue); /* Shadows */ --shadow-sm: 0 1px 4px rgba(0,0,0,.07); --shadow-md: 0 4px 16px rgba(0,0,0,.09); --shadow-btn: 0 5px 0; /* Radius */ --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px; /* Misc */ --font: 'Nunito', sans-serif; --transition: .18s ease; /* Nav */ --nav-bg: #ffffff; --nav-border: #ececec; /* Sidebar */ --sidebar-bg: #ffffff; --sidebar-border: #ececec; /* Admin */ --admin-sidebar-bg: #1e1e1e; --admin-topbar-bg: #2c2c2c; /* Code blocks */ --code-bg: #f0f0f0; --code-border: var(--green); } /* ============================================================ DARK MODE — Override variables Applied when Deep slate backgrounds, adjusted neon accents. ============================================================ */ [data-theme="dark"] { /* Brand — slightly brighter for dark backgrounds */ --green: #58cc02; --green-dark: #6de602; --green-light: rgba(88,204,2,.14); --blue: #1cb0f6; --blue-dark: #4fc3f7; --blue-light: rgba(28,176,246,.13); --red: #ff5555; --red-dark: #ff7070; --red-light: rgba(255,75,75,.14); --yellow: #ffc800; --yellow-dark: #ffd740; --yellow-light: rgba(255,200,0,.14); /* Surfaces — deep slate inspired by Duolingo's dark palette */ --bg: #0f1923; --surface: #131f24; --surface-2: #1a2a32; --surface-3: #233040; --border: #1e3040; --border-2: #2a4050; /* Text */ --text: #e8f0f5; --text-muted: #7fa8bc; --text-faint: #3d6070; /* Interactive */ --input-bg: #1a2a32; --input-border: #2a4050; --input-focus: var(--blue); /* Shadows — stronger glow on dark */ --shadow-sm: 0 1px 6px rgba(0,0,0,.4); --shadow-md: 0 4px 20px rgba(0,0,0,.45); /* Nav */ --nav-bg: #131f24; --nav-border: #1e3040; /* Sidebar */ --sidebar-bg: #131f24; --sidebar-border: #1e3040; /* Admin */ --admin-sidebar-bg: #0a1520; --admin-topbar-bg: #0d1b26; /* Code */ --code-bg: #0d1b24; --code-border: var(--green); } /* ============================================================ Theme Transition — smooth switching only AFTER page load. The .no-transitions class is added by JS during initial render and removed after the first paint, preventing the flash where all elements animate from light to dark on load. ============================================================ */ html:not(.no-transitions) *, html:not(.no-transitions) *::before, html:not(.no-transitions) *::after { transition: background-color .25s ease, border-color .25s ease, color .12s ease, box-shadow .25s ease; } /* ─── Reset & Base ─────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font); font-size: 16px; color: var(--text); background: var(--bg); min-height: 100vh; -webkit-font-smoothing: antialiased; } a { color: var(--blue); text-decoration: none; } a:hover { text-decoration: underline; } h1,h2,h3,h4,h5 { font-weight: 800; line-height: 1.2; color: var(--text); } pre, code { font-family: 'Courier New', monospace; background: var(--code-bg); border-radius: 8px; font-size: .9em; color: var(--text); } pre { padding: 16px 20px; overflow-x: auto; border-left: 4px solid var(--code-border); margin: 12px 0; white-space: pre-wrap; word-break: break-word; } code { padding: 2px 6px; } pre code { background: none; padding: 0; border-radius: 0; } table { border-collapse: collapse; width: 100%; margin: 12px 0; } th, td { border: 1px solid var(--border); padding: 10px 14px; text-align: left; color: var(--text); } th { background: var(--surface-2); font-weight: 700; } ul, ol { padding-left: 1.5em; margin: 8px 0; } li { margin: 4px 0; } /* ─── Buttons ──────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 28px; font-family: var(--font); font-size: 1rem; font-weight: 800; border: none; border-radius: var(--r-md); cursor: pointer; transition: transform var(--transition), filter var(--transition), box-shadow var(--transition); text-transform: uppercase; letter-spacing: .5px; user-select: none; text-decoration: none !important; position: relative; } .btn:active { transform: translateY(2px); } .btn:disabled { opacity: .45; cursor: not-allowed; transform: none !important; filter: none !important; } .btn-primary { background: var(--green); color: #fff; box-shadow: var(--shadow-btn) var(--green-dark); } .btn-primary:hover:not(:disabled) { filter: brightness(1.07); transform: translateY(-1px); } .btn-primary:active { box-shadow: 0 2px 0 var(--green-dark); } .btn-secondary { background: var(--surface); color: var(--blue); border: 2.5px solid var(--blue); box-shadow: var(--shadow-btn) var(--blue-dark); } .btn-secondary:hover:not(:disabled) { background: var(--blue-light); transform: translateY(-1px); } .btn-secondary:active { box-shadow: 0 2px 0 var(--blue-dark); } .btn-outline { background: var(--surface); color: var(--text); border: 2.5px solid var(--border-2); box-shadow: var(--shadow-btn) var(--border-2); } .btn-outline:hover:not(:disabled) { background: var(--surface-2); transform: translateY(-1px); } .btn-outline:active { box-shadow: 0 2px 0 var(--border-2); } .btn-danger { background: var(--red); color: #fff; box-shadow: var(--shadow-btn) var(--red-dark); } .btn-danger:hover:not(:disabled) { filter: brightness(1.07); transform: translateY(-1px); } .btn-danger:active { box-shadow: 0 2px 0 var(--red-dark); } .btn-yellow { background: var(--yellow); color: #3c3c3c; box-shadow: var(--shadow-btn) var(--yellow-dark); } .btn-yellow:hover:not(:disabled) { filter: brightness(1.07); transform: translateY(-1px); } .btn-sm { padding: 9px 18px; font-size: .85rem; border-radius: var(--r-sm); } .btn-lg { padding: 18px 40px; font-size: 1.1rem; border-radius: var(--r-lg); } .btn-block { width: 100%; display: flex; } /* ─── Cards ────────────────────────────────────────────────── */ .card { background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow-md); border: 2px solid var(--border); overflow: hidden; } .card-body { padding: 24px; } .card-header { padding: 16px 24px; background: var(--surface-2); border-bottom: 2px solid var(--border); font-weight: 800; font-size: 1rem; color: var(--text); } /* ─── Form Elements ────────────────────────────────────────── */ .form-group { margin-bottom: 18px; } .form-label { display: block; font-weight: 700; font-size: .9rem; color: var(--text-muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .5px; } .form-control { width: 100%; padding: 13px 16px; font-family: var(--font); font-size: 1rem; font-weight: 600; color: var(--text); background: var(--input-bg); border: 2.5px solid var(--input-border); border-radius: var(--r-sm); transition: border-color var(--transition), box-shadow var(--transition); outline: none; } .form-control:focus { border-color: var(--input-focus); box-shadow: 0 0 0 3px rgba(28,176,246,.18); } .form-control.error { border-color: var(--red); } select.form-control { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M0 0l6 8 6-8z' fill='%23888'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; } textarea.form-control { resize: vertical; min-height: 100px; } /* ─── Alerts ───────────────────────────────────────────────── */ .alert { padding: 14px 18px; border-radius: var(--r-sm); font-weight: 700; margin-bottom: 16px; display: flex; align-items: center; gap: 10px; font-size: .95rem; } .alert-error { background: var(--red-light); color: var(--red-dark); border-left: 4px solid var(--red); } .alert-success { background: var(--green-light); color: var(--green-dark); border-left: 4px solid var(--green); } .alert-info { background: var(--blue-light); color: var(--blue-dark); border-left: 4px solid var(--blue); } .alert-warning { background: var(--yellow-light); color: var(--yellow-dark); border-left: 4px solid var(--yellow); } /* ─── Badges ───────────────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; } .badge-green { background: var(--green-light); color: var(--green-dark); } .badge-blue { background: var(--blue-light); color: var(--blue-dark); } .badge-yellow { background: var(--yellow-light); color: var(--yellow-dark); } .badge-red { background: var(--red-light); color: var(--red-dark); } .badge-gray { background: var(--surface-2); color: var(--text-muted); } /* ─── Navbar ───────────────────────────────────────────────── */ .navbar { background: var(--nav-bg); border-bottom: 2.5px solid var(--nav-border); padding: 0 28px; height: 64px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 200; box-shadow: var(--shadow-sm); } .navbar-brand { font-size: 1.55rem; font-weight: 900; color: var(--green); text-decoration: none; display: flex; align-items: center; gap: 8px; letter-spacing: -1px; } .navbar-brand:hover { text-decoration: none; } .navbar-right { display: flex; align-items: center; gap: 10px; } /* XP / Streak Chips */ .stat-chip { display: flex; align-items: center; gap: 6px; background: var(--surface-2); border: 2px solid var(--border); border-radius: 999px; padding: 6px 14px; font-weight: 800; font-size: .9rem; color: var(--text); } .stat-chip.xp { color: var(--green-dark); } .stat-chip.streak { color: var(--yellow-dark); } /* ─── Language Switcher ────────────────────────────────────── */ .lang-switcher { position: relative; display: inline-block; } .lang-btn { display: flex; align-items: center; gap: 6px; padding: 7px 12px; background: var(--surface-2); border: 2px solid var(--border); border-radius: var(--r-sm); font-family: var(--font); font-weight: 800; font-size: .85rem; color: var(--text); cursor: pointer; white-space: nowrap; } .lang-btn:hover { background: var(--surface-3); } .lang-btn svg { flex-shrink: 0; } .lang-menu { position: absolute; right: 0; top: calc(100% + 6px); background: var(--surface); border: 2px solid var(--border); border-radius: var(--r-sm); box-shadow: var(--shadow-md); min-width: 140px; z-index: 300; overflow: hidden; } .lang-menu a { display: flex; align-items: center; gap: 8px; padding: 11px 16px; font-weight: 700; font-size: .9rem; color: var(--text); text-decoration: none; } .lang-menu a:hover { background: var(--surface-2); text-decoration: none; } .lang-menu a.active { background: var(--green-light); color: var(--green-dark); } /* ─── Theme Toggle Button ──────────────────────────────────── */ .theme-btn { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; background: var(--surface-2); border: 2px solid var(--border); border-radius: var(--r-sm); cursor: pointer; font-size: 1.1rem; color: var(--text); transition: background var(--transition), border-color var(--transition); flex-shrink: 0; } .theme-btn:hover { background: var(--surface-3); } /* ─── Landing Page ─────────────────────────────────────────── */ .landing-wrap { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; } .landing-hero { background: var(--green); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 40px; gap: 24px; } [data-theme="dark"] .landing-hero { background: linear-gradient(160deg, #1a4d00 0%, #2a7a00 60%, #1e5e00 100%); } .landing-hero-mascot { font-size: 7rem; line-height: 1; animation: float 3s ease-in-out infinite; } @keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } } .landing-hero h1 { font-size: 2.8rem; color: #fff; text-align: center; white-space: pre-line; } .landing-hero p { font-size: 1.1rem; color: rgba(255,255,255,.88); text-align: center; max-width: 360px; font-weight: 600; } .landing-hero .feature-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; } .landing-hero .feature-list li { color: rgba(255,255,255,.92); font-weight: 700; font-size: 1rem; display: flex; align-items: center; gap: 10px; } .landing-auth { background: var(--surface); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 48px; } .landing-auth h2 { font-size: 2rem; margin-bottom: 6px; } .landing-auth .subtitle { color: var(--text-muted); font-weight: 600; margin-bottom: 32px; } /* Auth Tabs */ .auth-tabs { display: flex; width: 100%; max-width: 420px; background: var(--surface-2); border-radius: var(--r-sm); padding: 4px; margin-bottom: 28px; } .auth-tab { flex: 1; padding: 10px; text-align: center; font-weight: 800; font-size: .9rem; cursor: pointer; border-radius: 8px; border: none; background: transparent; color: var(--text-muted); font-family: var(--font); transition: background var(--transition), color var(--transition); text-transform: uppercase; letter-spacing: .5px; } .auth-tab.active { background: var(--surface); color: var(--green-dark); box-shadow: var(--shadow-sm); } .auth-form-wrap { width: 100%; max-width: 420px; } .auth-panel { display: none; } .auth-panel.active { display: block; } .auth-divider { text-align: center; color: var(--text-faint); font-weight: 700; font-size: .85rem; margin: 20px 0; position: relative; } .auth-divider::before, .auth-divider::after { content: ''; position: absolute; top: 50%; width: 42%; height: 2px; background: var(--border); } .auth-divider::before { left: 0; } .auth-divider::after { right: 0; } /* ─── Dashboard Layout ─────────────────────────────────────── */ .dashboard-layout { display: grid; grid-template-columns: 260px 1fr 300px; min-height: calc(100vh - 64px); } .page-main { min-width: 0; overflow-x: hidden; } /* Left Sidebar */ .sidebar { background: var(--sidebar-bg); border-right: 2.5px solid var(--sidebar-border); padding: 24px 18px; display: flex; flex-direction: column; gap: 18px; position: sticky; top: 64px; height: calc(100vh - 64px); overflow-y: auto; } .user-profile-card { text-align: center; padding: 20px 14px; background: var(--surface-2); border-radius: var(--r-md); border: 2px solid var(--border); } .user-avatar { width: 70px; height: 70px; background: var(--green); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.9rem; margin: 0 auto 10px; border: 4px solid var(--surface); box-shadow: 0 4px 16px rgba(88,204,2,.35); } .user-name { font-weight: 900; font-size: 1.1rem; color: var(--text); margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; } .user-stats { display: flex; justify-content: center; gap: 14px; margin-top: 14px; } .stat-item { text-align: center; } .stat-value { font-size: 1.25rem; font-weight: 900; line-height: 1; color: var(--text); } .stat-label { font-size: .7rem; font-weight: 700; color: var(--text-faint); text-transform: uppercase; letter-spacing: .5px; } .stat-item.xp .stat-value { color: var(--green-dark); } .stat-item.streak .stat-value { color: var(--yellow-dark); } .xp-progress-wrap { margin-top: 12px; } .xp-bar-label { display: flex; justify-content: space-between; font-size: .8rem; font-weight: 700; color: var(--text-muted); margin-bottom: 6px; } .xp-bar-track { height: 10px; background: var(--surface-3); border-radius: 999px; overflow: hidden; } .xp-bar-fill { height: 100%; background: linear-gradient(90deg, var(--green), #6fe800); border-radius: 999px; transition: width .6s cubic-bezier(.34,1.56,.64,1); } .sidebar-nav { display: flex; flex-direction: column; gap: 4px; } .sidebar-nav a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-sm); font-weight: 700; color: var(--text-muted); text-decoration: none; transition: background var(--transition), color var(--transition); font-size: .95rem; } .sidebar-nav a:hover, .sidebar-nav a.active { background: var(--green-light); color: var(--green-dark); text-decoration: none; } .nav-icon { font-size: 1.2rem; } /* Center Path Area */ .path-area { padding: 36px 40px; max-width: 680px; margin: 0 auto; width: 100%; } .path-title { font-size: 1.6rem; font-weight: 900; margin-bottom: 6px; } .path-subtitle { color: var(--text-muted); font-weight: 600; margin-bottom: 36px; font-size: 1rem; } /* Lesson Path Nodes */ .lesson-path { display: flex; flex-direction: column; align-items: center; } .lesson-node-wrap { display: flex; flex-direction: column; align-items: center; width: 100%; } .path-connector { width: 4px; height: 40px; background: var(--border-2); border-radius: 2px; flex-shrink: 0; } .path-connector.completed { background: var(--green); } .lesson-node { width: 100%; max-width: 520px; display: flex; align-items: center; gap: 18px; padding: 18px 20px; background: var(--surface); border-radius: var(--r-md); border: 2.5px solid var(--border); box-shadow: var(--shadow-md); text-decoration: none !important; color: var(--text) !important; transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); cursor: pointer; } .lesson-node:hover:not(.locked) { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,.18); } .lesson-node.completed { border-color: var(--green); } [data-theme="dark"] .lesson-node.completed { background: linear-gradient(135deg, var(--surface), rgba(88,204,2,.06)); } .lesson-node.active-node { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(28,176,246,.18), var(--shadow-md); animation: pulse-node 2.5s ease-in-out infinite; } @keyframes pulse-node { 0%,100% { box-shadow: 0 0 0 4px rgba(28,176,246,.18), var(--shadow-md); } 50% { box-shadow: 0 0 0 8px rgba(28,176,246,.08), var(--shadow-md); } } .lesson-node.locked { opacity: .5; cursor: not-allowed; filter: grayscale(.5); } .node-icon { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.55rem; flex-shrink: 0; } .node-icon.completed { background: var(--green); } .node-icon.active { background: var(--blue); } .node-icon.locked { background: var(--surface-3); } .node-icon.video { background: var(--yellow); } .node-info { flex: 1; min-width: 0; } .node-title { font-weight: 800; font-size: 1rem; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); } .node-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .node-xp { font-size: .78rem; font-weight: 800; color: var(--yellow-dark); background: var(--yellow-light); padding: 2px 8px; border-radius: 999px; } .node-type { font-size: .78rem; font-weight: 700; color: var(--text-muted); } .node-status-icon { font-size: 1.3rem; flex-shrink: 0; } /* Right Panel */ .side-panel { background: var(--sidebar-bg); border-left: 2.5px solid var(--sidebar-border); padding: 24px 18px; display: flex; flex-direction: column; gap: 14px; position: sticky; top: 64px; height: calc(100vh - 64px); overflow-y: auto; } .panel-title { font-size: .95rem; font-weight: 900; color: var(--text); text-transform: uppercase; letter-spacing: .5px; padding-bottom: 12px; border-bottom: 2px solid var(--border); display: flex; align-items: center; gap: 8px; } .side-quest-card { background: var(--blue-light); border: 2px solid var(--border); border-radius: var(--r-sm); padding: 14px 16px; } [data-theme="dark"] .side-quest-card { border-color: rgba(28,176,246,.25); } .sq-title { font-weight: 800; font-size: .93rem; margin-bottom: 6px; color: var(--blue-dark); overflow-wrap: break-word; word-break: break-word; } .sq-content { font-size: .88rem; font-weight: 600; color: var(--text); line-height: 1.55; overflow-wrap: break-word; word-break: break-word; } .sq-date { font-size: .75rem; color: var(--text-faint); margin-top: 8px; font-weight: 700; } /* Tip Card */ .tip-card { margin-top: auto; padding: 16px; background: var(--yellow-light); border-radius: var(--r-sm); border: 2px solid var(--yellow); font-size: .88rem; font-weight: 700; color: var(--text); } /* ─── Lesson Page ──────────────────────────────────────────── */ .lesson-progress-bar { height: 6px; background: var(--surface-3); position: sticky; top: 64px; z-index: 50; } .lesson-progress-fill { height: 100%; background: var(--green); border-radius: 0 999px 999px 0; transition: width .5s ease; } .lesson-page { max-width: 820px; margin: 0 auto; padding: 36px 24px; } .lesson-header { margin-bottom: 28px; } .lesson-breadcrumb { font-size: .85rem; font-weight: 700; color: var(--text-faint); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; } .lesson-breadcrumb a { color: var(--blue); } .lesson-title-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; } .lesson-title { font-size: 2rem; font-weight: 900; } .lesson-xp-badge { background: var(--yellow-light); color: var(--yellow-dark); border: 2px solid var(--yellow); padding: 6px 16px; border-radius: 999px; font-weight: 900; font-size: 1rem; } .video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: var(--r-md); box-shadow: var(--shadow-md); background: #000; margin-bottom: 24px; } .video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; } .video-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; flex-direction: column; border-radius: var(--r-md); z-index: 5; gap: 12px; color: #fff; font-weight: 800; font-size: 1.1rem; backdrop-filter: blur(3px); } .video-overlay.hidden { display: none; } .lesson-content { background: var(--surface); border-radius: var(--r-md); border: 2px solid var(--border); padding: 32px 36px; box-shadow: var(--shadow-md); line-height: 1.75; margin-bottom: 28px; font-size: 1.02rem; color: var(--text); } .lesson-content h2 { font-size: 1.5rem; margin-bottom: 12px; } .lesson-content h3 { font-size: 1.2rem; margin: 20px 0 8px; } .lesson-content p { margin-bottom: 14px; } /* Quiz */ .quiz-section { background: var(--surface); border-radius: var(--r-md); border: 2px solid var(--blue); box-shadow: 0 0 0 4px rgba(28,176,246,.1); overflow: hidden; margin-bottom: 24px; } .quiz-header { background: var(--blue); color: #fff; padding: 16px 24px; font-weight: 900; font-size: 1rem; display: flex; align-items: center; gap: 10px; } .quiz-body { padding: 24px; } .quiz-question-block { margin-bottom: 28px; padding-bottom: 24px; border-bottom: 2px solid var(--border); } .quiz-question-block:last-of-type { border-bottom: none; padding-bottom: 0; margin-bottom: 0; } .quiz-q { font-weight: 800; font-size: 1rem; margin-bottom: 14px; color: var(--text); } .quiz-q-number { display: inline-block; background: var(--blue); color: #fff; border-radius: 50%; width: 26px; height: 26px; line-height: 26px; text-align: center; font-size: .85rem; margin-right: 8px; } .quiz-options { display: flex; flex-direction: column; gap: 10px; } .quiz-option { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-radius: var(--r-sm); border: 2.5px solid var(--border); cursor: pointer; font-weight: 700; font-size: .95rem; color: var(--text); background: var(--input-bg); transition: border-color var(--transition), background var(--transition); user-select: none; } .quiz-option:hover:not(.locked-opt) { border-color: var(--blue); background: var(--blue-light); } .quiz-option.selected { border-color: var(--blue); background: var(--blue-light); } .quiz-option.correct { border-color: var(--green); background: var(--green-light); color: var(--green-dark); } .quiz-option.incorrect { border-color: var(--red); background: var(--red-light); color: var(--red-dark); } .quiz-option.locked-opt { cursor: default; } .quiz-option input[type="radio"] { accent-color: var(--blue); width: 18px; height: 18px; flex-shrink: 0; } .quiz-feedback { margin-top: 12px; font-weight: 800; font-size: .9rem; display: none; padding: 10px 14px; border-radius: 8px; } .quiz-feedback.correct-fb { display: flex; align-items: center; gap: 6px; background: var(--green-light); color: var(--green-dark); } .quiz-feedback.incorrect-fb { display: flex; align-items: center; gap: 6px; background: var(--red-light); color: var(--red-dark); } .quiz-progress { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; font-weight: 700; font-size: .9rem; color: var(--text-muted); } .quiz-progress-dots { display: flex; gap: 6px; } .quiz-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--surface-3); transition: background var(--transition); } .quiz-dot.correct { background: var(--green); } .quiz-dot.wrong { background: var(--red); } .quiz-dot.active { background: var(--blue); } .completion-area { text-align: center; padding: 32px; background: linear-gradient(135deg, var(--green-light), var(--blue-light)); border-radius: var(--r-md); border: 2px solid var(--green); } .completion-emoji { font-size: 4rem; margin-bottom: 12px; } .completion-title { font-size: 1.6rem; font-weight: 900; color: var(--green-dark); margin-bottom: 8px; } .completion-msg { color: var(--text-muted); font-weight: 600; margin-bottom: 24px; } /* ─── Admin Panel ──────────────────────────────────────────── */ .admin-topbar { background: var(--admin-topbar-bg); color: #e0e0e0; padding: 0 32px; height: 60px; display: flex; align-items: center; justify-content: space-between; } .admin-topbar-brand { font-weight: 900; font-size: 1.2rem; display: flex; align-items: center; gap: 8px; color: var(--green); } .admin-topbar-right { display: flex; align-items: center; gap: 16px; font-size: .9rem; color: #888; } .admin-topbar-right a { color: var(--red-dark); font-weight: 700; } .admin-body { display: grid; grid-template-columns: 220px 1fr; min-height: calc(100vh - 60px); } .admin-sidebar { background: var(--admin-sidebar-bg); padding: 24px 12px; display: flex; flex-direction: column; gap: 4px; } .admin-nav-link { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 10px; color: #6a8898; font-weight: 700; font-size: .9rem; text-decoration: none; transition: background var(--transition), color var(--transition); cursor: pointer; border: none; background: none; width: 100%; font-family: var(--font); text-align: left; } .admin-nav-link:hover, .admin-nav-link.active { background: rgba(88,204,2,.12); color: var(--green); text-decoration: none; } .admin-content { padding: 32px; background: var(--bg); } .admin-section { display: none; } .admin-section.active { display: block; } .admin-section-title { font-size: 1.5rem; font-weight: 900; margin-bottom: 24px; display: flex; align-items: center; gap: 10px; color: var(--text); padding-bottom: 12px; border-bottom: 2px solid var(--border); } .stats-table-wrap { overflow-x: auto; } .stats-table { width: 100%; border-collapse: collapse; background: var(--surface); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-md); } .stats-table th { background: var(--surface-2); font-weight: 800; font-size: .85rem; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); padding: 14px 16px; border-bottom: 2px solid var(--border); text-align: left; } .stats-table td { padding: 14px 16px; border-bottom: 1px solid var(--border); font-weight: 600; font-size: .95rem; color: var(--text); } .stats-table tr:last-child td { border-bottom: none; } .stats-table tr:hover td { background: var(--surface-2); } .stats-table .xp-cell { color: var(--green-dark); font-weight: 900; } .stats-table .admin-pill { background: var(--yellow-light); color: var(--yellow-dark); padding: 2px 8px; border-radius: 999px; font-size: .78rem; font-weight: 800; } .add-form-card { background: var(--surface); border-radius: var(--r-md); border: 2px solid var(--border); box-shadow: var(--shadow-md); padding: 28px 32px; max-width: 680px; } /* ─── Toast ────────────────────────────────────────────────── */ #toast-container { position: fixed; bottom: 28px; right: 28px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; pointer-events: none; } .toast { padding: 14px 20px; border-radius: var(--r-sm); font-weight: 800; font-size: .95rem; display: flex; align-items: center; gap: 10px; min-width: 240px; max-width: 360px; box-shadow: 0 8px 28px rgba(0,0,0,.25); animation: slideInToast .3s cubic-bezier(.34,1.56,.64,1); pointer-events: all; } .toast.success { background: var(--green); color: #fff; } .toast.error { background: var(--red); color: #fff; } .toast.info { background: var(--blue); color: #fff; } .toast.warning { background: var(--yellow); color: #333; } @keyframes slideInToast { from { opacity:0; transform: translateX(60px); } to { opacity:1; transform: translateX(0); } } @keyframes fadeOutToast { from { opacity:1; transform: translateX(0); } to { opacity:0; transform: translateX(60px); } } /* XP Burst */ .xp-burst { position: fixed; font-size: 1.4rem; font-weight: 900; color: var(--yellow); text-shadow: 0 2px 8px rgba(0,0,0,.35); pointer-events: none; z-index: 9998; animation: xpBurst 1.2s ease-out forwards; } @keyframes xpBurst { 0% { opacity:1; transform: translateY(0) scale(1); } 100% { opacity:0; transform: translateY(-80px) scale(1.4); } } /* ─── Under Construction Page ──────────────────────────────── */ .uc-page { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 24px; background: var(--bg); text-align: center; } .uc-mascot { font-size: 5rem; margin-bottom: 20px; animation: float 3s ease-in-out infinite; } .uc-title { font-size: 2.2rem; font-weight: 900; color: var(--text); margin-bottom: 10px; } .uc-title span { color: var(--green); } .uc-sub { font-size: 1.1rem; color: var(--text-muted); font-weight: 600; max-width: 480px; margin: 0 auto 8px; line-height: 1.6; } .uc-sub-hy { font-size: 1rem; color: var(--text-faint); font-weight: 600; max-width: 480px; margin: 0 auto 32px; line-height: 1.6; display: none; } .uc-progress-track { width: 280px; height: 12px; background: var(--surface-3); border-radius: 999px; overflow: hidden; margin: 24px auto 0; } .uc-progress-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--green), #6fe800); animation: ucProgress 2.5s ease-in-out infinite alternate; } @keyframes ucProgress { 0% { width: 35%; } 100% { width: 88%; } } .uc-label { font-size: .82rem; font-weight: 800; color: var(--text-faint); margin-top: 10px; text-transform: uppercase; letter-spacing: 1px; } /* Stickman Animation */ .stickman { font-size: 2.5rem; display: inline-block; animation: stickWave 1.8s ease-in-out infinite; } @keyframes stickWave { 0%,100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } } /* ─── Setup Page ───────────────────────────────────────────── */ .setup-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: linear-gradient(135deg, var(--green-light), var(--blue-light)); } .setup-card { width: 100%; max-width: 460px; background: var(--surface); border-radius: var(--r-lg); box-shadow: 0 8px 40px rgba(0,0,0,.14); padding: 40px; border: 2px solid var(--border); } .setup-logo { text-align: center; font-size: 3rem; margin-bottom: 8px; } .setup-title { text-align: center; font-size: 1.6rem; font-weight: 900; margin-bottom: 4px; } .setup-subtitle { text-align: center; color: var(--text-muted); font-weight: 600; margin-bottom: 28px; font-size: .9rem; } /* ─── Empty State ──────────────────────────────────────────── */ .empty-state { text-align: center; padding: 48px 24px; color: var(--text-muted); } .empty-state-icon { font-size: 3.5rem; margin-bottom: 12px; } .empty-state h3 { font-size: 1.2rem; font-weight: 800; margin-bottom: 8px; color: var(--text); } .empty-state p { font-weight: 600; font-size: .95rem; } /* ─── Loading ──────────────────────────────────────────────── */ .spinner { display: inline-block; width: 20px; height: 20px; border: 3px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; vertical-align: middle; } @keyframes spin { to { transform: rotate(360deg); } } /* ─── Utility Classes ──────────────────────────────────────── */ .mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mb-8 { margin-bottom: 8px; } .mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; } .text-center { text-align: center; } .text-sm { font-size: .875rem; } .text-muted { color: var(--text-muted); } .fw-bold { font-weight: 800; } .d-flex { display: flex; } .align-center { align-items: center; } .gap-8 { gap: 8px; } .gap-16 { gap: 16px; } .w-100 { width: 100%; } /* ─── Responsive ───────────────────────────────────────────── */ @media (max-width: 1100px) { .dashboard-layout { grid-template-columns: 220px 1fr; } .side-panel { display: none; } } @media (max-width: 768px) { .landing-wrap { grid-template-columns: 1fr; } .landing-hero { display: none; } .landing-auth { padding: 40px 24px; min-height: 100vh; } .dashboard-layout { grid-template-columns: 1fr; } /* .sidebar display is managed by the MOBILE SIDEBAR DRAWER block below */ .navbar { padding: 0 14px; } .navbar-brand { font-size: 1.25rem; } .stat-chip { display: none; } .path-area { padding: 20px 14px; } .admin-body { grid-template-columns: 1fr; } .admin-sidebar { display: none; } .lesson-content { padding: 20px; } .quiz-body { padding: 14px; } } /* ─── Global overflow protection ──────────────────────────── */ .notif-card-title, .notif-card-body, .podium-name, .rank-meta, .rank-label, .lb-title, .lb-subtitle, .notif-title, .notif-count { overflow-wrap: break-word; word-break: break-word; } /* ─── Notification Bell ────────────────────────────────────── */ .notif-bell { position: relative; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; background: var(--surface-2); border: 2px solid var(--border); border-radius: var(--r-sm); font-size: 1.1rem; text-decoration: none !important; color: var(--text); flex-shrink: 0; } .notif-bell:hover { background: var(--surface-3); text-decoration: none; } .notif-badge { position: absolute; top: -6px; right: -6px; background: var(--red); color: #fff; font-size: .65rem; font-weight: 900; min-width: 18px; height: 18px; border-radius: 999px; display: flex; align-items: center; justify-content: center; padding: 0 4px; border: 2px solid var(--nav-bg); font-family: var(--font); line-height: 1; } /* Sidebar variant */ .sidebar-nav a .notif-badge { position: static; border: none; font-size: .7rem; min-width: 20px; height: 20px; } /* ─── Navbar Centre Links ──────────────────────────────────── */ .navbar-links { display: flex; align-items: center; gap: 4px; flex: 1; justify-content: center; padding: 0 16px; } .navbar-link { display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--r-sm); font-weight: 700; font-size: .88rem; color: var(--text-muted); text-decoration: none !important; white-space: nowrap; transition: background var(--transition), color var(--transition); position: relative; } .navbar-link:hover { background: var(--surface-2); color: var(--text); text-decoration: none; } .navbar-link.active { background: var(--green-light); color: var(--green-dark); } [data-theme="dark"] .navbar-link.active { background: rgba(88,204,2,.12); color: var(--green); } .navbar-link .notif-badge { position: absolute; top: 2px; right: 2px; } @media (max-width: 900px) { .navbar-link-label { display: none; } .navbar-link { padding: 8px 10px; font-size: 1.1rem; } .navbar-links { gap: 0; } } @media (max-width: 600px) { .navbar-links { display: none; } } /* ============================================================ MULTI-COURSE ECOSYSTEM — Added for testing environment ============================================================ */ /* ── Course Catalog ── */ .course-catalog { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; margin-top: 8px; } .course-card { background: var(--surface); border: 2px solid var(--border); border-radius: var(--r-md); overflow: hidden; transition: transform .18s, box-shadow .18s, border-color .18s; display: flex; flex-direction: column; } .course-card:hover { transform: translateY(-3px); box-shadow: 0 8px 32px rgba(0,0,0,.12); border-color: var(--green); } .course-card.enrolled { border-color: var(--blue); } .course-thumb { width: 100%; height: 160px; overflow: hidden; background: var(--surface-2); } .course-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .course-thumb-placeholder { display: flex; align-items: center; justify-content: center; font-size: 4rem; background: linear-gradient(135deg, var(--green-light), var(--blue-light)); } .course-card-body { padding: 20px; display: flex; flex-direction: column; flex: 1; gap: 10px; } .course-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } .course-card-title { font-size: 1.1rem; font-weight: 900; margin: 0; line-height: 1.3; word-break: break-word; overflow-wrap: break-word; } .course-card-desc { font-size: .88rem; color: var(--text-muted); font-weight: 600; margin: 0; overflow-wrap: break-word; word-break: break-word; } .course-meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: .82rem; color: var(--text-muted); font-weight: 700; } /* ── Navbar PFP ── */ .nav-pfp-link { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; border: 2px solid var(--border); transition: border-color .18s; flex-shrink: 0; } .nav-pfp-link:hover { border-color: var(--green); } .nav-pfp-img { width: 100%; height: 100%; object-fit: cover; display: block; } .nav-pfp-default { font-size: 1.1rem; line-height: 1; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: var(--surface-2); } /* ── Profile form inputs ── */ .form-label { display: block; font-weight: 700; font-size: .88rem; margin-bottom: 6px; color: var(--text-muted); } .form-input { width: 100%; padding: 10px 14px; border: 2px solid var(--border); border-radius: var(--r-sm); background: var(--input-bg); color: var(--text); font-size: .95rem; font-weight: 600; font-family: inherit; transition: border-color .18s; box-sizing: border-box; } .form-input:focus { outline: none; border-color: var(--green); } /* ── Admin section additions ── */ .badge-gray { background: var(--surface-2); color: var(--text-muted); padding: 3px 10px; border-radius: 20px; font-size: .78rem; font-weight: 800; } /* ── Uploads directory protection notice ── */ .uploads-dir-note { font-size: .78rem; color: var(--text-faint); margin-top: 4px; } /* ============================================================ RESPONSIVE FIXES — April 2026 Fixes CSS issues on the Courses page and improves mobile compatibility sitewide. Desktop behavior is untouched. ============================================================ */ /* ── Missing class styles (path-title/subtitle used in markup) ── */ .path-title { font-size: 1.6rem; font-weight: 900; margin: 0 0 6px; line-height: 1.2; overflow-wrap: break-word; word-break: break-word; } .path-subtitle { color: var(--text-muted); font-weight: 600; font-size: .95rem; margin: 0 0 24px; line-height: 1.5; } /* ── Course meta row: wrap gracefully on narrow screens ── */ .course-meta { row-gap: 6px; } /* ── Safety: prevent any course card content from overflowing ── */ .course-card, .course-card-body, .course-card-header { min-width: 0; /* allows flex/grid children to shrink below content size */ } .course-card-title, .course-card-desc, .course-meta span { min-width: 0; overflow-wrap: anywhere; /* aggressive but only kicks in on very long words */ word-break: break-word; } /* Prevent the "Enrolled" badge from wrapping weirdly next to title */ .course-card-header .badge { flex-shrink: 0; white-space: nowrap; } /* ============================================================ TABLET breakpoint (1100px and below) — courses page ============================================================ */ @media (max-width: 1100px) { /* Existing rule hides .side-panel and drops to 220px 1fr. At this width, course cards at 300px minmax would only fit 1 column with 220px sidebar. Shrink minimum and sidebar. */ .dashboard-layout { grid-template-columns: 200px 1fr; } .course-catalog { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; } .path-area { padding: 28px 20px; } .course-thumb { height: 140px; } } /* ============================================================ MOBILE breakpoint (768px and below) ============================================================ */ @media (max-width: 768px) { /* Course catalog: single column on phones */ .course-catalog { grid-template-columns: 1fr; gap: 14px; margin-top: 4px; } .course-card-body { padding: 16px; gap: 8px; } .course-thumb { height: 120px; } .course-card-title { font-size: 1.05rem; } .course-card-desc { font-size: .85rem; } /* Path header tighter */ .path-title { font-size: 1.35rem; } .path-subtitle { font-size: .88rem; margin-bottom: 18px; } /* Profile page responsive */ .profile-wrap { padding: 24px 16px; } .profile-hero { gap: 18px; padding: 20px; justify-content: center; } .profile-avatar-img, .profile-avatar-default { width: 80px; height: 80px; font-size: 2.4rem; } .profile-info h1 { font-size: 1.35rem; } .profile-stats { gap: 14px; justify-content: center; } .profile-section { padding: 18px; } /* PFP upload controls don't overflow the card */ .pfp-preview-wrap { gap: 12px; } .pfp-preview, .pfp-preview-default { width: 60px; height: 60px; font-size: 1.6rem; } .file-input-label { padding: 9px 14px; font-size: .9rem; } /* Leaderboard mobile tweaks */ .lb-wrap { padding: 24px 14px; } .my-rank-banner { padding: 14px 16px; gap: 10px; } /* Notifications: use full width */ .notif-wrap { padding: 24px 14px; } .notif-card { padding: 16px; gap: 12px; } .notif-icon { width: 38px; height: 38px; font-size: 1.1rem; } /* Admin topbar wraps on mobile (previously one long row) */ .admin-topbar { flex-wrap: wrap; height: auto; padding: 10px 14px; gap: 8px; } .admin-topbar-right { flex-wrap: wrap; gap: 8px !important; } .admin-content { padding: 18px 14px; } .admin-section-title { font-size: 1.1rem; } /* Make wide admin tables horizontally scrollable instead of breaking layout */ .stats-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .stats-table { min-width: 560px; } } /* ============================================================ SMALL PHONE breakpoint (480px and below) Targets older Android devices common in Armenia (~360px viewport). ============================================================ */ @media (max-width: 480px) { .path-area { padding: 16px 10px; } .course-catalog { gap: 12px; } .course-card-body { padding: 14px; } .course-thumb { height: 100px; } .course-card-title { font-size: 1rem; } /* Course card header stacks title + badge vertically if tight */ .course-card-header { flex-direction: column; align-items: flex-start; gap: 6px; } /* Profile hero stacks vertically, avatar on top */ .profile-hero { flex-direction: column; text-align: center; padding: 18px; } .profile-info { width: 100%; } .profile-stats { justify-content: center; } /* Landing auth form tighter on tiny screens */ .landing-auth { padding: 28px 16px !important; } /* Buttons: stop font-size from being too big */ .btn-lg { font-size: .95rem; padding: 12px 18px; } /* Lesson page progress bar doesn't feel huge */ .lesson-progress-bar { height: 4px; } .lesson-page { padding: 16px 12px; } .lesson-title { font-size: 1.3rem; } } /* ============================================================ ACCESSIBILITY: always-visible focus outline on tab navigation ============================================================ */ .course-card a:focus-visible, .btn:focus-visible, .navbar-link:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; } /* ============================================================ Global defensive rules: prevent horizontal scroll on the whole page caused by any single overflowing element. ============================================================ */ html, body { overflow-x: hidden; } /* Fix for iOS Safari: elements with 100vw can cause subtle horizontal scroll */ .dashboard-layout, .lesson-page, .profile-wrap, .lb-wrap, .notif-wrap { max-width: 100%; } /* ============================================================ UNIFIED PAGE LAYOUT (April 2026) Sidebar on every logged-in page. On mobile, the same sidebar slides in from the left when the hamburger is tapped. ============================================================ */ /* .page-layout is used by non-dashboard pages (leaderboard, lesson, notifications, profile, verify). Matches .dashboard-layout's sidebar column but omits the right-side panel — gives the sidebar identical visual treatment on every page. */ .page-layout { display: grid; grid-template-columns: 260px 1fr; min-height: calc(100vh - 64px); max-width: 100%; } .page-main { min-width: 0; overflow-x: hidden; } /* Sidebar visual style (applies to both .dashboard-layout and .page-layout) */ .sidebar-divider { height: 2px; background: var(--border); margin: 14px 4px; border-radius: 2px; } .sidebar-logout { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-sm); font-weight: 700; font-size: .92rem; color: var(--text-muted); text-decoration: none !important; transition: background .15s, color .15s; } .sidebar-logout:hover { background: rgba(255, 85, 85, 0.08); color: var(--red); } /* Sidebar utility row: language toggle + theme button. Hidden on desktop (navbar already has these controls). Shown only on mobile where the navbar right side is collapsed. */ .sidebar-utility-row { display: none; } .sidebar-lang-toggle { display: flex; gap: 6px; } .sidebar-lang-btn { display: flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: var(--r-sm); font-weight: 800; font-size: .82rem; color: var(--text-muted); text-decoration: none; background: var(--surface-2); border: 2px solid var(--border); transition: background .15s, color .15s, border-color .15s; white-space: nowrap; } .sidebar-lang-btn:hover { background: var(--surface-3); color: var(--text); text-decoration: none; } .sidebar-lang-btn.active { background: var(--green-light); color: var(--green-dark); border-color: var(--green); } .sidebar-theme-btn { flex-shrink: 0; } /* ============================================================ HAMBURGER BUTTON (hidden on desktop) ============================================================ */ .nav-hamburger { display: none; background: transparent; border: none; cursor: pointer; width: 40px; height: 40px; padding: 8px; flex-direction: column; justify-content: space-between; align-items: stretch; margin-right: 8px; flex-shrink: 0; } .nav-hamburger span { display: block; height: 3px; width: 100%; background: var(--text); border-radius: 2px; transition: transform .2s, opacity .2s; } .nav-hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(10px) rotate(45deg); } .nav-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); } /* ============================================================ SIDEBAR-AS-DRAWER: backdrop overlay (mobile only) ============================================================ */ .sidebar-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); opacity: 0; pointer-events: none; transition: opacity .25s ease; z-index: 300; } .sidebar-overlay.open { opacity: 1; pointer-events: auto; } /* Navbar brand badge (moved out of inline style for cleaner mobile handling) */ .navbar-brand-badge { font-size: .65rem; background: var(--yellow); color: #000; border-radius: 4px; padding: 1px 5px; font-weight: 900; vertical-align: middle; } /* ============================================================ TABLET (≤1100px) ============================================================ */ @media (max-width: 1100px) { .sidebar { width: 220px; } .dashboard-layout { grid-template-columns: 1fr; padding-left: 220px; } .page-layout { padding-left: 220px; } /* .side-panel already hidden at this breakpoint via older rule */ .course-catalog { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; } .path-area { padding: 28px 20px; } .course-thumb { height: 140px; } } /* ============================================================ MOBILE (≤768px) — sidebar becomes a slide-in drawer ============================================================ */ @media (max-width: 768px) { /* Show hamburger */ .nav-hamburger { display: flex; } /* Navbar compact */ .navbar { padding: 0 12px; gap: 8px; justify-content: flex-start; } .navbar-brand { font-size: 1.1rem; letter-spacing: -0.5px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .navbar-brand-badge { display: none; } /* Compact right side: hide stat chips + lang + theme, keep only profile */ .navbar-right { gap: 6px; margin-left: auto; } .navbar-right .stat-chip, .navbar-right .theme-btn, .navbar-right .lang-switcher, .navbar-right .nav-logout-btn { display: none; } .navbar-right .nav-pfp-link { display: flex; } /* Layout: main takes full width; sidebar overlays when opened */ .dashboard-layout { grid-template-columns: 1fr; padding-left: 0; } .page-layout { padding-left: 0; } /* Sidebar as slide-in drawer (shared class between both layouts). Override desktop position:fixed values — still fixed, but full-height and translated off-screen until .open is added. */ .sidebar { display: flex; position: fixed; top: 0; left: 0; height: 100vh; width: min(320px, 85vw); padding: 18px 16px; overflow-y: auto; z-index: 310; background: var(--sidebar-bg); transform: translateX(-100%); transition: transform .25s ease; box-shadow: 4px 0 24px rgba(0,0,0,.15); border-right: 2px solid var(--border); } .sidebar.open { transform: translateX(0); } /* Show lang+theme utility row inside sidebar on mobile */ .sidebar-utility-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 0; } /* Main content padding */ .path-area { padding: 20px 14px; } .page-main { padding: 0; } /* Hide right-side panel on mobile */ .side-panel { display: none; } /* Lesson page: reduce outer margins so quiz + nav fit */ .lesson-page { padding: 20px 14px; } /* Admin panel */ .admin-body { grid-template-columns: 1fr; } .admin-sidebar { display: none; } .admin-topbar { flex-wrap: wrap; height: auto; padding: 10px 14px; gap: 8px; } .admin-topbar-right { flex-wrap: wrap; gap: 8px !important; } .admin-content { padding: 18px 14px; } .stats-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .stats-table { min-width: 560px; } /* Course catalog: single column */ .course-catalog { grid-template-columns: 1fr; gap: 14px; } .course-card-body { padding: 16px; gap: 8px; } .course-thumb { height: 120px; } .course-card-title { font-size: 1.05rem; } .course-card-desc { font-size: .85rem; } /* Path header tighter */ .path-title { font-size: 1.35rem; } .path-subtitle { font-size: .88rem; margin-bottom: 18px; } /* Landing page */ .landing-wrap { grid-template-columns: 1fr; } .landing-hero { display: none; } .landing-auth { padding: 40px 24px; min-height: 100vh; } /* Profile */ .profile-wrap { padding: 24px 16px; } .profile-hero { gap: 18px; padding: 20px; justify-content: center; } .profile-avatar-img, .profile-avatar-default { width: 80px; height: 80px; font-size: 2.4rem; } .profile-info h1 { font-size: 1.35rem; } .profile-stats { gap: 14px; justify-content: center; } .profile-section { padding: 18px; } .pfp-preview, .pfp-preview-default { width: 60px; height: 60px; font-size: 1.6rem; } .file-input-label { padding: 9px 14px; font-size: .9rem; } /* Leaderboard */ .lb-wrap { padding: 24px 14px; } .my-rank-banner { padding: 14px 16px; gap: 10px; } /* Notifications */ .notif-wrap { padding: 24px 14px; } .notif-card { padding: 16px; gap: 12px; } .notif-icon { width: 38px; height: 38px; font-size: 1.1rem; } /* Lesson content responsive tweaks */ .lesson-content { padding: 20px; } .quiz-body { padding: 14px; } } /* ============================================================ SMALL PHONE (≤480px) ============================================================ */ @media (max-width: 480px) { .sidebar { width: 88vw; } .navbar-brand { font-size: 1rem; } .nav-hamburger { width: 36px; height: 36px; } .path-area { padding: 16px 10px; } .course-catalog { gap: 12px; } .course-card-body { padding: 14px; } .course-thumb { height: 100px; } .course-card-title { font-size: 1rem; } /* Card header stacks title + badge vertically if tight */ .course-card-header { flex-direction: column; align-items: flex-start; gap: 6px; } /* Profile hero stacks */ .profile-hero { flex-direction: column; text-align: center; padding: 18px; } .profile-info { width: 100%; } .profile-stats { justify-content: center; } .landing-auth { padding: 28px 16px !important; } .btn-lg { font-size: .95rem; padding: 12px 18px; } .lesson-progress-bar { height: 4px; } .lesson-page { padding: 16px 12px; } .lesson-title { font-size: 1.3rem; } } /* ============================================================ DESKTOP SAFETY: force hamburger/overlay hidden on wide screens ============================================================ */ @media (min-width: 769px) { .nav-hamburger { display: none !important; } .sidebar-overlay { display: none !important; } } /* ============================================================ ACCESSIBILITY ============================================================ */ .course-card a:focus-visible, .btn:focus-visible, .sidebar-nav a:focus-visible, .nav-hamburger:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; } /* Prevent page-wide horizontal scroll */ html, body { overflow-x: hidden; } /* ============================================================ MOBILE FIXES — Full audit pass Covers: lesson page, quiz, leaderboard podium, toast, navbar stat chips on tablet, form inputs, lesson nav, leaderboard table, auth landing, and sidebar spacing. ============================================================ */ /* ── Fix: --text-body undefined → use --text ── */ .form-label { color: var(--text-muted); } .form-input { color: var(--text); } /* ── Fix: lesson-title-row overflows on narrow screens ── */ .lesson-title-row { gap: 8px; } .lesson-title { word-break: break-word; overflow-wrap: break-word; min-width: 0; } .lesson-xp-badge { flex-shrink: 0; white-space: nowrap; } /* ── Fix: lesson breadcrumb wraps cleanly ── */ .lesson-breadcrumb { flex-wrap: wrap; word-break: break-word; } /* ── Fix: quiz options touch targets too small on mobile ── */ @media (max-width: 768px) { .quiz-option { padding: 14px 14px; font-size: .92rem; gap: 10px; } .quiz-option input[type="radio"] { width: 20px; height: 20px; flex-shrink: 0; } .quiz-header { padding: 14px 16px; font-size: .95rem; } .quiz-q { font-size: .97rem; } /* Lesson nav buttons (prev/next) stack on very small screens */ .lesson-nav-row { flex-direction: column; gap: 10px; } .lesson-nav-row .btn { width: 100%; justify-content: center; } /* Lesson content padding already 20px — ensure pre/code doesn't overflow */ .lesson-content pre { max-width: 100%; overflow-x: auto; } .lesson-content table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Lesson XP badge: shrink font slightly */ .lesson-xp-badge { font-size: .88rem; padding: 5px 12px; } .lesson-title { font-size: 1.4rem; } /* Toast: full-width at bottom on mobile, easier to read */ #toast-container { bottom: 16px; right: 12px; left: 12px; align-items: stretch; } .toast { min-width: unset; max-width: 100%; width: 100%; font-size: .9rem; } /* Leaderboard podium: compress on small screens */ .podium { gap: 6px; } .my-rank-banner .rank-num { font-size: 1.6rem; } /* Leaderboard table: scrollable */ .lb-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Navbar: show streak chip on tablet (hide only on phones) */ /* Already hidden below — keep that. But make brand never overflow: */ .navbar-brand { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: calc(100vw - 140px); } /* Alert banners: allow text to wrap properly */ .alert { align-items: flex-start; flex-wrap: wrap; } /* Dashboard verify banner: stack button below text on small screens */ .alert[style*="justify-content:space-between"] { flex-direction: column; align-items: flex-start; } /* Sidebar user-name: allow wrapping in drawer */ .user-name { white-space: normal; text-overflow: unset; overflow: visible; max-width: 100%; } /* XP bar label: prevent overflow */ .xp-bar-label { font-size: .75rem; } /* Sidebar nav links: slightly larger touch target */ .sidebar-nav a { padding: 13px 14px; } .sidebar-logout { padding: 12px 12px; } /* Lesson path nodes: ensure node title wraps */ .node-title { white-space: normal; overflow: visible; text-overflow: unset; } .lesson-node { padding: 14px 16px; gap: 14px; } .node-icon { width: 48px; height: 48px; font-size: 1.35rem; } /* Profile: nickname form stacks on mobile */ .profile-section form > div[style*="display:flex"] { flex-direction: column !important; align-items: stretch !important; } .profile-section form .btn { width: 100%; justify-content: center; } /* Leaderboard: hide lessons column on very small screens */ } /* ── Fix: lesson nav prev/next — add class for targeting ── */ /* (The PHP already outputs these, we just style the wrapper) */ .lesson-bottom-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 40px; padding-top: 24px; border-top: 2px solid var(--border); flex-wrap: wrap; gap: 12px; } @media (max-width: 480px) { .lesson-bottom-nav { flex-direction: column; } .lesson-bottom-nav .btn { width: 100%; justify-content: center; } /* Auth form on tiny screens: reduce padding */ .landing-auth h2 { font-size: 1.6rem; } .landing-auth .subtitle { font-size: .88rem; margin-bottom: 20px; } .auth-tab { font-size: .8rem; padding: 9px 6px; } /* Leaderboard my-rank banner: stack vertically */ .my-rank-banner { flex-direction: column; align-items: flex-start; } .my-rank-banner .rank-meta { max-width: 100%; } /* Notifications: icon smaller */ .notif-icon { width: 34px; height: 34px; font-size: 1rem; } /* Profile stats: tighten further */ .profile-stats { gap: 10px; } .profile-stat-val { font-size: 1.1rem; } /* Quiz number circles don't get clipped */ .quiz-q-number { width: 24px; height: 24px; line-height: 24px; font-size: .8rem; } /* Completion area on tiny screens */ .completion-emoji { font-size: 3rem; } .completion-title { font-size: 1.3rem; } } /* ── Fix: tablet (769–1100px) — show stat chips, hide only on phones ── */ @media (min-width: 769px) and (max-width: 1100px) { .stat-chip { display: flex; } /* override the 768px hide */ .navbar { padding: 0 18px; } } /* ── Fix: leaderboard lb-wrap needs sidebar-aware max-width ── */ @media (max-width: 768px) { .lb-wrap { max-width: 100%; } }