/* ============================================================ 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); } /* 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: none; } .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(--card-bg); 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-body); } .form-input { width: 100%; padding: 10px 14px; border: 2px solid var(--border); border-radius: var(--r-sm); background: var(--input-bg); color: var(--text-body); 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; }