/* ============================================================ main.css — Global resets, CSS custom properties, typography Blockchain Interactive Learning Platform ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Syne:wght@500;700;800&family=Manrope:wght@400;500;700&family=IBM+Plex+Mono:wght@400;600&family=Oxanium:wght@400;500;600;700&family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap'); /* ---- Custom Properties ---- */ :root { /* Colour palette */ --bg-primary: #071015; --bg-secondary: #0d1c22; --bg-card: #132730; --bg-elevated: #173441; --border-color: #2f525e; --accent-green: #c8ff22; --accent-blue: #5ae3ff; --accent-purple: #4fc1d6; --accent-yellow: #ffd166; --accent-red: #ff6b6b; --accent-coral: #ff8a5b; --text-primary: #ecf8f7; --text-secondary: #acd0d7; --text-muted: #7ea4aa; --text-inverse: #061117; /* Typography */ --font-sans: 'Manrope', 'Segoe UI', sans-serif; --font-display:'Syne', 'Segoe UI', sans-serif; --font-mono: 'IBM Plex Mono', 'Fira Code', monospace; --font-dashboard-body: 'Hanken Grotesk', 'Segoe UI', sans-serif; --font-dashboard-display: 'Oxanium', 'Segoe UI', sans-serif; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; /* Spacing scale */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; /* Borders & radius */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; /* Shadows */ --shadow-sm: 0 4px 12px rgba(2, 8, 12, 0.35); --shadow-md: 0 10px 24px rgba(2, 8, 12, 0.5); --shadow-lg: 0 20px 44px rgba(0, 0, 0, 0.6); --glow-green: 0 0 22px rgba(200,255,34,0.28); --glow-blue: 0 0 22px rgba(90,227,255,0.25); /* Transitions */ --transition-fast: 150ms ease; --transition-normal: 250ms ease; --transition-slow: 400ms ease; --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); /* Canvas surfaces (body gradient stops, modal background) */ --bg-canvas-deep: #061015; --bg-canvas-mid: #08171d; --bg-modal: #122730; --bg-modal-top: #173743; /* Accent tints */ --accent-green-light: #d9ff55; /* Layout */ --sidebar-width: 260px; --header-height: 64px; } /* ---- Reset ---- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; /* RTL toggled dynamically via JS: dir="rtl" on */ } body { font-family: var(--font-sans); font-size: var(--text-base); line-height: 1.6; color: var(--text-primary); background: radial-gradient(1200px 700px at 85% -10%, rgba(90,227,255,0.12), transparent 60%), radial-gradient(900px 500px at -5% 10%, rgba(200,255,34,0.09), transparent 55%), linear-gradient(180deg, var(--bg-canvas-deep) 0%, var(--bg-canvas-mid) 45%, var(--bg-primary) 100%); min-height: 100vh; overflow-x: hidden; position: relative; } body::before { content: ''; position: fixed; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(236,248,247,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(236,248,247,0.03) 1px, transparent 1px); background-size: 28px 28px; mask-image: radial-gradient(closest-side, #000 35%, transparent 100%); opacity: 0.35; z-index: -2; } body::after { content: ''; position: fixed; inset: 0; pointer-events: none; background: repeating-linear-gradient( 35deg, rgba(255,255,255,0.018) 0, rgba(255,255,255,0.018) 1px, transparent 1px, transparent 14px ); opacity: 0.25; z-index: -1; } /* ---- Typography ---- */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 700; line-height: 1.3; color: var(--text-primary); letter-spacing: -0.01em; } h1 { font-size: var(--text-3xl); } h2 { font-size: var(--text-2xl); } h3 { font-size: var(--text-xl); } h4 { font-size: var(--text-lg); } p { margin-block-end: var(--space-4); } a { color: var(--accent-green); text-decoration: none; transition: color var(--transition-fast), text-shadow var(--transition-fast); } a:hover { color: var(--accent-blue); text-shadow: var(--glow-blue); } code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.9em; } code { background: var(--bg-elevated); color: var(--accent-green); padding: 0.1em 0.4em; border-radius: var(--radius-sm); } pre { background: var(--bg-elevated); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: var(--space-4); overflow-x: auto; margin-block-end: var(--space-4); } pre code { background: none; padding: 0; } ul, ol { padding-inline-start: var(--space-6); margin-block-end: var(--space-4); } li { margin-block-end: var(--space-1); } /* ---- Layout Shell ---- */ #app { display: flex; min-height: 100vh; } #sidebar { width: var(--sidebar-width); min-height: 100vh; flex-shrink: 0; background: linear-gradient(180deg, rgba(23,52,65,0.75), rgba(13,28,34,0.92)), var(--bg-secondary); border-inline-end: 1px solid rgba(90,227,255,0.2); @supports (backdrop-filter: blur(1px)) { backdrop-filter: blur(8px); } position: fixed; inset-block-start: 0; inset-inline-start: 0; z-index: 100; overflow-y: auto; overflow-x: hidden; transition: transform var(--transition-normal); } #main { margin-inline-start: var(--sidebar-width); flex: 1; min-height: 100vh; padding: var(--space-10) clamp(1.25rem, 2.6vw, 3rem); max-width: 1080px; animation: stage-reveal 600ms cubic-bezier(.16,.84,.22,.99) both; } @keyframes stage-reveal { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } /* ---- Cards ---- */ .card { background: linear-gradient(135deg, rgba(23,52,65,0.95), rgba(19,39,48,0.96)), var(--bg-card); border: 1px solid rgba(90,227,255,0.24); border-radius: 18px; padding: var(--space-6); margin-block-end: var(--space-6); position: relative; overflow: hidden; box-shadow: var(--shadow-md); } .card::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(120deg, transparent 0 60%, rgba(200,255,34,0.08) 100%); } .card::after { content: ''; position: absolute; right: -36px; top: -36px; width: 110px; height: 110px; border: 1px solid rgba(200,255,34,0.38); border-radius: 18px; transform: rotate(23deg); pointer-events: none; } .card:hover { border-color: rgba(200,255,34,0.62); box-shadow: var(--glow-green), var(--shadow-lg); transform: translateY(-2px); transition: border-color var(--transition-normal), box-shadow var(--transition-normal), transform var(--transition-normal); } /* ---- Buttons ---- */ .btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-5); border: none; border-radius: 12px; font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.01em; cursor: pointer; transition: all var(--transition-fast); text-decoration: none; white-space: nowrap; } .btn-primary { background: linear-gradient(120deg, color-mix(in oklab, var(--accent-green) 75%, white), var(--accent-green)); color: var(--text-inverse); box-shadow: 0 8px 18px rgba(200,255,34,0.25); } .btn-primary:hover { background: linear-gradient(120deg, color-mix(in oklab, var(--accent-green) 60%, white), color-mix(in oklab, var(--accent-green) 85%, white)); box-shadow: var(--glow-green); color: var(--text-inverse); } .btn-secondary { background: linear-gradient(120deg, rgba(90,227,255,0.16), rgba(90,227,255,0.06)); color: var(--text-primary); border: 1px solid rgba(90,227,255,0.36); } .btn-secondary:hover { border-color: var(--accent-blue); color: var(--accent-blue); box-shadow: var(--glow-blue); } .btn-ghost { background: transparent; color: var(--text-secondary); padding: var(--space-1) var(--space-3); } .btn-ghost:hover { color: var(--accent-green); } .btn:focus-visible, .dashboard-module:focus-visible, .dashboard-hero__secondary:focus-visible, .sidebar__nav-item:focus-visible, .sidebar__lang-btn:focus-visible, .sidebar-toggle:focus-visible { outline: 2px solid rgba(200, 255, 34, 0.92); outline-offset: 3px; } /* ---- Badges / Chips ---- */ .chip { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--font-medium); } .chip-green { background: rgba(0,255,136,0.15); color: var(--accent-green); } .chip-blue { background: rgba(0,180,216,0.15); color: var(--accent-blue); } .chip-purple { background: rgba(124,58,237,0.15); color: var(--accent-purple); } .chip-yellow { background: rgba(251,191,36,0.15); color: var(--accent-yellow); } /* ---- Progress Bar ---- */ .progress-bar { width: 100%; height: 6px; background: var(--bg-elevated); border-radius: var(--radius-full); overflow: hidden; } .progress-bar__fill { height: 100%; background: linear-gradient(90deg, var(--accent-green), var(--accent-blue)); border-radius: var(--radius-full); transition: width var(--transition-slow); } /* ---- Toast / Notification ---- */ .toast-container { position: fixed; inset-block-end: var(--space-6); inset-inline-end: var(--space-6); z-index: 500; display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-end; } .toast { background: var(--bg-elevated); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-5); font-size: var(--text-sm); box-shadow: var(--shadow-lg); animation: toast-in 0.3s ease forwards; max-width: 320px; } .toast--xp { border-color: var(--accent-green); color: var(--accent-green); } .toast--error { border-color: var(--accent-red); color: var(--accent-red); } .toast--info { border-color: var(--accent-blue); color: var(--accent-blue); } @keyframes toast-in { from { opacity: 0; transform: translateY(var(--space-4)); } to { opacity: 1; transform: translateY(0); } } /* ---- Modal overlay ---- */ .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.75); z-index: 400; display: flex; align-items: center; justify-content: center; padding: var(--space-4); } .modal { background: linear-gradient(170deg, var(--bg-modal-top), var(--bg-modal)); border: 1px solid rgba(90,227,255,0.34); border-radius: 18px; padding: var(--space-8); max-width: 480px; width: 100%; box-shadow: var(--shadow-lg); text-align: center; } #main .card, #main .lesson-content, #main .quiz-form { animation: stagger-in 520ms cubic-bezier(.19,.84,.2,1) both; } #main .card:nth-of-type(2) { animation-delay: 70ms; } #main .card:nth-of-type(3) { animation-delay: 120ms; } #main .card:nth-of-type(4) { animation-delay: 170ms; } @keyframes stagger-in { from { opacity: 0; transform: translateY(10px) scale(0.99); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ---- Utility ---- */ .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .text-accent { color: var(--accent-green); } .text-muted { color: var(--text-muted); } .text-center { text-align: center; } .mt-4 { margin-block-start: var(--space-4); } .mt-8 { margin-block-start: var(--space-8); } .mb-4 { margin-block-end: var(--space-4); } .gap-4 { gap: var(--space-4); } .flex { display: flex; } .flex-col { flex-direction: column; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .w-full { width: 100%; } /* ---- Dashboard ---- */ .dashboard-shell { display: grid; gap: clamp(1.5rem, 2vw, 2.5rem); font-family: var(--font-dashboard-body); } .dashboard-hero, .dashboard-panel, .dashboard-complete-banner { position: relative; overflow: hidden; border: 1px solid rgba(132, 234, 248, 0.18); border-radius: 28px; background: linear-gradient(155deg, rgba(11, 25, 31, 0.94), rgba(16, 37, 46, 0.96)), oklch(0.22 0.03 202); box-shadow: 0 28px 70px rgba(2, 10, 14, 0.42); } .dashboard-hero::before, .dashboard-panel::before, .dashboard-complete-banner::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at top right, rgba(255, 138, 91, 0.12), transparent 30%), radial-gradient(circle at left 20%, rgba(90, 227, 255, 0.14), transparent 32%); } .dashboard-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.95fr); gap: clamp(1.25rem, 2vw, 2rem); padding: clamp(1.5rem, 2.5vw, 2.5rem); } .dashboard-hero__copy, .dashboard-hero__status, .dashboard-panel > *, .dashboard-complete-banner > * { position: relative; z-index: 1; } .dashboard-hero__copy { display: grid; align-content: start; gap: 1rem; } .dashboard-hero__eyebrow, .dashboard-section-head p, .dashboard-level-track__meta, .dashboard-module__progress-row, .dashboard-module__cta, .dashboard-badge__body span, .dashboard-empty-state p { font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: oklch(0.79 0.04 200); } .dashboard-hero__title, .dashboard-section-head h2, .dashboard-module__title, .dashboard-progress-crest__value, .dashboard-metric__value, .dashboard-complete-banner h2 { font-family: var(--font-dashboard-display); font-variant-numeric: tabular-nums; } .dashboard-hero__title { font-size: clamp(2.3rem, 4vw, 4.7rem); line-height: 0.95; letter-spacing: 0.02em; max-width: 11ch; text-wrap: balance; } .dashboard-hero__lede { max-width: 54ch; margin: 0; color: oklch(0.88 0.02 196); font-size: 1.05rem; line-height: 1.7; } .dashboard-hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; padding-top: 0.5rem; } .dashboard-hero__primary, .dashboard-hero__secondary { min-height: 46px; } .dashboard-hero__secondary { border: 1px solid rgba(132, 234, 248, 0.2); border-radius: 999px; padding-inline: 1rem; background: rgba(11, 26, 33, 0.72); } .dashboard-hero__secondary:hover { transform: translateY(-1px); } .dashboard-hero__status { display: grid; gap: 1rem; align-content: start; } .dashboard-progress-crest { display: grid; gap: 0.35rem; padding: 1.1rem 1.15rem; border-radius: 24px; background: linear-gradient(145deg, rgba(12, 31, 38, 0.92), rgba(17, 39, 51, 0.8)); border: 1px solid rgba(255, 255, 255, 0.08); } .dashboard-progress-crest__value { font-size: clamp(3.1rem, 5vw, 4.8rem); line-height: 0.9; color: var(--accent-green); } .dashboard-progress-crest__value span { font-size: 0.38em; color: oklch(0.86 0.04 197); margin-inline-start: 0.12em; } .dashboard-progress-crest__label { color: var(--text-secondary); font-size: var(--text-sm); } .dashboard-metrics-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem; } .dashboard-metric { padding: 1rem; border-radius: 20px; background: rgba(9, 24, 30, 0.7); border: 1px solid rgba(255, 255, 255, 0.06); min-height: 110px; display: grid; align-content: end; gap: 0.45rem; } .dashboard-metric__value { font-size: clamp(1.4rem, 3vw, 2.2rem); line-height: 1; color: oklch(0.92 0.05 192); } .dashboard-metric__label { color: var(--text-secondary); font-size: 0.82rem; line-height: 1.5; } .dashboard-level-track { padding: 1rem 1.15rem 1.15rem; border-radius: 22px; background: rgba(7, 18, 24, 0.72); border: 1px solid rgba(255, 255, 255, 0.06); } .dashboard-level-track__meta { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 0.7rem; } .dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(290px, 0.82fr); gap: clamp(1.25rem, 2vw, 2rem); align-items: start; } .dashboard-panel { padding: clamp(1.2rem, 2vw, 1.75rem); } .dashboard-panel--modules { min-height: 100%; } .dashboard-section-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; } .dashboard-section-head h2 { font-size: clamp(1.3rem, 2vw, 1.8rem); margin: 0; color: oklch(0.95 0.04 190); } .dashboard-section-head p { margin: 0.35rem 0 0; letter-spacing: 0.05em; text-transform: none; } .dashboard-modules { display: grid; gap: 1rem; } .dashboard-module { display: grid; gap: 0.9rem; padding: 1.15rem; border-radius: 24px; border: 1px solid color-mix(in oklab, var(--module-accent) 30%, transparent); background: linear-gradient(140deg, color-mix(in oklab, var(--module-accent) 8%, rgba(9, 21, 27, 0.96)), rgba(11, 27, 34, 0.88)); color: var(--text-primary); text-decoration: none; transition: transform 220ms var(--ease-out-quart), border-color 220ms var(--ease-out-quart), box-shadow 220ms var(--ease-out-quart); animation: dashboard-rise 520ms var(--ease-out-expo) both; animation-delay: calc(var(--i, 0) * 70ms); } .dashboard-module:hover { transform: translateY(-4px); border-color: color-mix(in oklab, var(--module-accent) 68%, white 10%); box-shadow: 0 20px 36px rgba(0, 0, 0, 0.22); } .dashboard-module__top { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.9rem; align-items: start; } .dashboard-module__index { width: 3.3rem; min-height: 3.3rem; border-radius: 18px; display: grid; place-items: center; background: color-mix(in oklab, var(--module-accent) 18%, rgba(255, 255, 255, 0.03)); color: color-mix(in oklab, var(--module-accent) 82%, white 6%); font-family: var(--font-dashboard-display); font-size: 1.1rem; letter-spacing: 0.12em; } .dashboard-module__heading { min-width: 0; } .dashboard-module__title { margin: 0; font-size: clamp(1.15rem, 2vw, 1.55rem); line-height: 1.05; color: oklch(0.95 0.03 190); } .dashboard-module__desc { margin: 0.45rem 0 0; color: color-mix(in oklab, var(--text-secondary) 84%, white 8%); line-height: 1.65; max-width: 62ch; } .dashboard-module__progress-row, .dashboard-module__footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .dashboard-module__progress-row { text-transform: none; letter-spacing: 0.03em; } .dashboard-module__bar { width: 100%; height: 0.55rem; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; } .dashboard-module__bar-fill { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, color-mix(in oklab, var(--module-accent) 85%, white 10%), color-mix(in oklab, var(--module-accent) 65%, var(--accent-blue) 35%)); } .dashboard-module__status, .dashboard-module__cta { font-size: var(--text-sm); line-height: 1.4; } .dashboard-module__status { color: var(--text-secondary); max-width: 24ch; } .dashboard-module__status.is-complete { color: var(--accent-green); } .dashboard-module__cta { color: color-mix(in oklab, var(--module-accent) 86%, white 8%); flex-shrink: 0; } .dashboard-rail { display: grid; gap: clamp(1.25rem, 2vw, 2rem); } .dashboard-badges-list { display: grid; gap: 0.8rem; } .dashboard-badge { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.9rem; align-items: center; padding: 0.9rem 1rem; border-radius: 18px; background: rgba(8, 20, 26, 0.72); border: 1px solid rgba(255, 255, 255, 0.06); animation: dashboard-rise 420ms var(--ease-out-expo) both; animation-delay: calc(var(--i, 0) * 60ms); } .dashboard-badge img { display: block; } .dashboard-badge__body { display: grid; gap: 0.2rem; min-width: 0; } .dashboard-badge__body strong { font-size: 0.98rem; color: oklch(0.94 0.03 190); } .dashboard-badge__body span { text-transform: none; letter-spacing: 0.02em; line-height: 1.5; } .dashboard-empty-state { display: grid; gap: 1rem; justify-items: start; padding: 1rem 0 0.25rem; } .dashboard-empty-state p { margin: 0; text-transform: none; letter-spacing: 0.02em; max-width: 34ch; } .dashboard-leaderboard { overflow-x: auto; } .dashboard-leaderboard .leaderboard-table th, .dashboard-leaderboard .leaderboard-table td { padding-block: 0.85rem; } .dashboard-complete-banner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.2rem 1.4rem; } .dashboard-complete-banner h2 { margin: 0 0 0.35rem; font-size: clamp(1.15rem, 2vw, 1.7rem); color: var(--accent-green); } .dashboard-complete-banner p { margin: 0; color: var(--text-secondary); } @keyframes dashboard-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* ---- Responsive ---- */ @media (max-width: 980px) { .dashboard-hero, .dashboard-grid { grid-template-columns: 1fr; } .dashboard-hero__title { max-width: 15ch; } .dashboard-complete-banner { align-items: start; flex-direction: column; } } @media (max-width: 768px) { #sidebar { transform: translateX(-100%); } [dir="rtl"] #sidebar { transform: translateX(100%); } #sidebar.is-open { transform: translateX(0); } #main { margin-inline-start: 0; padding: var(--space-5); padding-block-start: calc(var(--space-12) + env(safe-area-inset-top, 0px)); } .toast-container { inset-inline: var(--space-3); inset-block-end: var(--space-4); align-items: stretch; } .toast, .toast-badge { max-width: none; } .dashboard-hero, .dashboard-panel { border-radius: 24px; } .dashboard-metrics-grid { grid-template-columns: 1fr 1fr; } .dashboard-module__footer { align-items: start; flex-direction: column; } } @media (max-width: 480px) { #main { padding: var(--space-3); } h1 { font-size: var(--text-2xl); } h2 { font-size: var(--text-xl); } .dashboard-hero { padding: 1.1rem; } .dashboard-hero__title { font-size: clamp(1.9rem, 9vw, 3rem); } .dashboard-metrics-grid { grid-template-columns: 1fr; } .dashboard-module__top, .dashboard-badge { grid-template-columns: 1fr; } .dashboard-module__index { width: 2.8rem; min-height: 2.8rem; } } @media (prefers-reduced-motion: reduce) { .dashboard-module, .dashboard-badge, #main, #main .card, #main .lesson-content, #main .quiz-form, .toast, .toast-badge, .module-shell, .lesson-shell { animation: none !important; transition-duration: 0.01ms !important; } .dashboard-module:hover, .dashboard-hero__secondary:hover { transform: none; } } /* ===================== MODULE VIEW ===================== */ .module-shell { --module-accent: var(--accent-green); max-width: 860px; margin-inline: auto; display: flex; flex-direction: column; gap: var(--space-6); animation: dashboard-rise 0.45s var(--ease-out-quart) both; } .module-back { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-dashboard-body, var(--font-body)); font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--text-muted); text-decoration: none; transition: color 0.18s; padding-block-end: var(--space-2); } .module-back:hover { color: var(--module-accent); } .module-back svg { transition: transform 0.18s; } .module-back:hover svg { transform: translateX(-3px); } .module-hero { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); padding: var(--space-8); position: relative; overflow: hidden; } .module-hero::before { content: ''; position: absolute; inset-block-start: 0; inset-inline-start: 0; width: 4px; inset-block-end: 0; background: var(--module-accent); border-radius: var(--radius-full) 0 0 var(--radius-full); } .module-hero__inner { display: flex; align-items: center; gap: var(--space-8); } .module-hero__copy { flex: 1; min-width: 0; } .module-hero__eyebrow { font-family: var(--font-dashboard-display, var(--font-display)); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--module-accent); margin: 0 0 var(--space-2); } .module-hero__title { font-family: var(--font-dashboard-display, var(--font-display)); font-size: var(--text-3xl); font-weight: 800; line-height: 1.1; color: var(--text-primary); margin: 0 0 var(--space-3); } .module-hero__desc { font-family: var(--font-dashboard-body, var(--font-body)); font-size: var(--text-sm); color: var(--text-muted); margin: 0; max-width: 52ch; line-height: 1.6; } .module-hero__stat { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); } .module-progress-ring { width: 72px; height: 72px; transform: rotate(-90deg); } .module-progress-ring__track { fill: none; stroke: var(--bg-elevated); stroke-width: 6; } .module-progress-ring__fill { fill: none; stroke: var(--module-accent); stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset 0.6s var(--ease-out-quart); } .module-hero__stat-label { display: flex; flex-direction: column; align-items: center; margin-top: var(--space-1); } .module-hero__stat-pct { font-family: var(--font-dashboard-display, var(--font-display)); font-size: var(--text-lg); font-weight: 800; color: var(--module-accent); line-height: 1; } .module-hero__stat-sub { font-size: 0.625rem; color: var(--text-muted); white-space: nowrap; letter-spacing: 0.04em; } .module-lessons-panel { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); padding: var(--space-6); } .module-section-head { font-family: var(--font-dashboard-display, var(--font-display)); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 var(--space-4); } .module-lessons-list { display: flex; flex-direction: column; gap: var(--space-2); } .module-lesson-row { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--bg-elevated); border: 1px solid transparent; text-decoration: none; color: var(--text-primary); transition: border-color 0.18s, background 0.18s, transform 0.18s; } .module-lesson-row:hover { border-color: var(--module-accent); background: color-mix(in oklab, var(--module-accent) 6%, var(--bg-elevated)); transform: translateX(3px); } .module-lesson-row:focus-visible { outline: 2px solid var(--module-accent); outline-offset: 2px; } .module-lesson-row__num { width: 28px; height: 28px; border-radius: var(--radius-full); background: var(--bg-primary); border: 1px solid var(--border-subtle); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: var(--font-dashboard-display, var(--font-display)); font-size: var(--text-xs); font-weight: 700; color: var(--text-muted); transition: background 0.18s, color 0.18s, border-color 0.18s; } .module-lesson-row--done .module-lesson-row__num { background: color-mix(in oklab, var(--module-accent) 20%, transparent); border-color: var(--module-accent); color: var(--module-accent); } .module-lesson-row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .module-lesson-row__title { font-family: var(--font-dashboard-body, var(--font-body)); font-size: var(--text-sm); font-weight: var(--font-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .module-lesson-row--done .module-lesson-row__title { color: var(--text-muted); } .module-lesson-row__score { font-size: 0.65rem; color: var(--text-muted); font-variant-numeric: tabular-nums; } .module-lesson-row__arrow { color: var(--text-muted); flex-shrink: 0; opacity: 0; transform: translateX(-4px); transition: opacity 0.18s, transform 0.18s; } .module-lesson-row:hover .module-lesson-row__arrow { opacity: 1; transform: translateX(0); } .module-quiz-cta { display: flex; align-items: center; gap: var(--space-6); background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); padding: var(--space-6); } .module-quiz-cta__copy { flex: 1; } .module-quiz-cta__label { font-family: var(--font-dashboard-display, var(--font-display)); font-size: var(--text-base); font-weight: 700; color: var(--text-primary); margin: 0 0 4px; } .module-quiz-cta__hint { font-size: var(--text-xs); color: var(--text-muted); margin: 0; } .module-quiz-cta__btn { flex-shrink: 0; background: var(--module-accent); color: var(--text-inverse); border: none; padding: var(--space-3) var(--space-6); border-radius: var(--radius-md); font-family: var(--font-dashboard-display, var(--font-display)); font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.04em; cursor: pointer; transition: opacity 0.18s, transform 0.15s; } .module-quiz-cta__btn:hover { opacity: 0.88; transform: translateY(-1px); } .module-quiz-cta__btn:focus-visible { outline: 2px solid var(--module-accent); outline-offset: 3px; } @media (max-width: 640px) { .module-hero { padding: var(--space-5); } .module-hero__inner { flex-direction: column; align-items: flex-start; gap: var(--space-4); } .module-hero__stat { flex-direction: row; } .module-hero__title { font-size: var(--text-2xl); } .module-quiz-cta { flex-direction: column; align-items: flex-start; gap: var(--space-4); } .module-quiz-cta__btn { align-self: stretch; text-align: center; } } @media (prefers-reduced-motion: reduce) { .module-shell { animation: none; } .module-progress-ring__fill { transition: none; } } /* ===================== LESSON VIEW ===================== */ .lesson-shell { --module-accent: var(--accent-green); max-width: 820px; margin-inline: auto; display: flex; flex-direction: column; gap: var(--space-6); animation: dashboard-rise 0.4s var(--ease-out-quart) both; } .lesson-breadcrumb { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; } .lesson-breadcrumb__crumb { font-size: var(--text-xs); color: var(--text-muted); text-decoration: none; transition: color 0.18s; } .lesson-breadcrumb__crumb:hover { color: var(--module-accent); } .lesson-breadcrumb__sep { font-size: var(--text-xs); color: var(--border-subtle); } .lesson-breadcrumb__current { font-size: var(--text-xs); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 28ch; } .lesson-header { padding-block-end: var(--space-4); border-block-end: 1px solid var(--border-subtle); } .lesson-header__meta { display: flex; align-items: center; gap: var(--space-3); margin-block-end: var(--space-3); } .lesson-header__index { font-family: var(--font-dashboard-display, var(--font-display)); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--module-accent); } .lesson-header__badge { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px var(--space-2); border-radius: var(--radius-full); background: color-mix(in oklab, var(--accent-green) 18%, transparent); color: var(--accent-green); border: 1px solid color-mix(in oklab, var(--accent-green) 35%, transparent); } .lesson-header__title { font-family: var(--font-dashboard-display, var(--font-display)); font-size: clamp(var(--text-2xl), 3.5vw, var(--text-4xl)); font-weight: 800; line-height: 1.1; color: var(--text-primary); margin: 0; letter-spacing: -0.01em; } .lesson-shell .lesson-content { font-family: var(--font-dashboard-body, var(--font-body)); font-size: var(--text-base); line-height: 1.75; color: var(--text-secondary); background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); padding: var(--space-8); max-width: 70ch; } .lesson-shell .lesson-content > *:first-child { margin-block-start: 0; } .lesson-shell .lesson-content > *:last-child { margin-block-end: 0; } .lesson-shell .lesson-content h2, .lesson-shell .lesson-content h3 { font-family: var(--font-dashboard-display, var(--font-display)); font-weight: 700; color: var(--text-primary); margin-block: var(--space-6) var(--space-3); } .lesson-shell .lesson-content h2 { font-size: var(--text-xl); } .lesson-shell .lesson-content h3 { font-size: var(--text-lg); } .lesson-shell .lesson-content strong { color: var(--text-primary); font-weight: var(--font-semibold); } .lesson-shell .lesson-content code { font-family: var(--font-mono); font-size: 0.875em; padding: 2px 5px; border-radius: 4px; background: var(--bg-elevated); color: var(--module-accent); } .lesson-shell .lesson-content ul, .lesson-shell .lesson-content ol { padding-inline-start: var(--space-6); } .lesson-shell .lesson-content li { margin-block: var(--space-2); } .lesson-tool-cta { display: flex; align-items: center; gap: var(--space-5); background: color-mix(in oklab, var(--module-accent) 6%, var(--bg-card)); border: 1px solid color-mix(in oklab, var(--module-accent) 25%, transparent); border-radius: var(--radius-xl); padding: var(--space-5) var(--space-6); } .lesson-tool-cta__icon { font-size: var(--text-2xl); flex-shrink: 0; opacity: 0.7; } .lesson-tool-cta__copy { flex: 1; } .lesson-tool-cta__label { font-family: var(--font-dashboard-display, var(--font-display)); font-weight: 700; font-size: var(--text-sm); color: var(--text-primary); margin: 0 0 3px; } .lesson-tool-cta__hint { font-size: var(--text-xs); color: var(--text-muted); margin: 0; } .lesson-tool-cta__btn { flex-shrink: 0; background: var(--module-accent); color: var(--text-inverse); border: none; padding: var(--space-2) var(--space-5); border-radius: var(--radius-md); font-family: var(--font-dashboard-display, var(--font-display)); font-size: var(--text-sm); font-weight: 700; text-decoration: none; transition: opacity 0.18s, transform 0.15s; display: inline-flex; align-items: center; } .lesson-tool-cta__btn:hover { opacity: 0.85; transform: translateY(-1px); } .lesson-tool-cta__btn:focus-visible { outline: 2px solid var(--module-accent); outline-offset: 3px; } .lesson-quiz-area { min-height: var(--space-8); } .lesson-quiz-btn { background: var(--module-accent); color: var(--text-inverse); border: none; padding: var(--space-3) var(--space-8); border-radius: var(--radius-md); font-family: var(--font-dashboard-display, var(--font-display)); font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.05em; cursor: pointer; transition: opacity 0.18s, transform 0.15s; } .lesson-quiz-btn:hover { opacity: 0.85; transform: translateY(-2px); } .lesson-quiz-btn:focus-visible { outline: 2px solid var(--module-accent); outline-offset: 3px; } .lesson-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block-start: var(--space-4); border-block-start: 1px solid var(--border-subtle); flex-wrap: wrap; } .lesson-footer__actions { display: flex; align-items: center; gap: var(--space-3); } .lesson-footer__nav { display: flex; align-items: center; gap: var(--space-3); } .lesson-footer__complete { background: transparent; border: 1px solid var(--border-subtle); color: var(--text-secondary); padding: var(--space-2) var(--space-5); border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: var(--font-medium); cursor: pointer; transition: border-color 0.18s, color 0.18s; } .lesson-footer__complete:hover { border-color: var(--module-accent); color: var(--module-accent); } .lesson-footer__complete:focus-visible { outline: 2px solid var(--module-accent); outline-offset: 2px; } .lesson-footer__done-chip { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 4px var(--space-3); border-radius: var(--radius-full); background: color-mix(in oklab, var(--accent-green) 15%, transparent); color: var(--accent-green); border: 1px solid color-mix(in oklab, var(--accent-green) 30%, transparent); } .lesson-footer__prev, .lesson-footer__next, .lesson-footer__module { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: var(--font-medium); text-decoration: none; border: 1px solid var(--border-subtle); color: var(--text-secondary); transition: border-color 0.18s, color 0.18s, background 0.18s; } .lesson-footer__prev:hover, .lesson-footer__module:hover { color: var(--text-primary); background: var(--bg-elevated); } .lesson-footer__next { background: var(--module-accent); border-color: transparent; color: var(--text-inverse); font-weight: 700; } .lesson-footer__next:hover { opacity: 0.88; } .lesson-footer__next:focus-visible, .lesson-footer__prev:focus-visible, .lesson-footer__module:focus-visible { outline: 2px solid var(--module-accent); outline-offset: 2px; } @media (max-width: 640px) { .lesson-shell .lesson-content { padding: var(--space-5); } .lesson-header__title { font-size: var(--text-2xl); } .lesson-tool-cta { flex-wrap: wrap; } .lesson-tool-cta__btn { align-self: stretch; text-align: center; justify-content: center; } .lesson-footer { flex-direction: column; align-items: stretch; } .lesson-footer__nav { justify-content: flex-end; } } @media (prefers-reduced-motion: reduce) { .lesson-shell { animation: none; } } /* ===================== DASHBOARD INSTRUCTOR ===================== */ .dashboard-instructor { margin-block-start: var(--space-8); background: linear-gradient(135deg, rgba(23,52,65,0.92), rgba(19,39,48,0.94)); border: 1px solid rgba(90,227,255,0.22); border-radius: var(--radius-xl); padding: var(--space-6); box-shadow: var(--shadow-md); } .dashboard-instructor__header { margin-block-end: var(--space-5); } .dashboard-instructor__eyebrow { font-family: var(--font-dashboard-display, var(--font-display)); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent-blue); margin: 0 0 var(--space-1); } .dashboard-instructor__title { font-family: var(--font-dashboard-display, var(--font-display)); font-size: clamp(var(--text-xl), 2.3vw, var(--text-3xl)); margin: 0; } .dashboard-instructor__grid { display: grid; grid-template-columns: minmax(180px, 220px) 1fr; gap: var(--space-6); align-items: start; } .dashboard-instructor__media { margin: 0; } .dashboard-instructor__photo, .dashboard-instructor__fallback { width: 100%; aspect-ratio: 4 / 5; border-radius: var(--radius-lg); border: 1px solid rgba(90,227,255,0.3); background: linear-gradient(145deg, rgba(90,227,255,0.1), rgba(200,255,34,0.14)); } .dashboard-instructor__photo { object-fit: cover; display: block; } .dashboard-instructor__fallback { display: grid; place-items: center; } .dashboard-instructor__fallback span { font-family: var(--font-dashboard-display, var(--font-display)); font-size: clamp(var(--text-xl), 5vw, 2.25rem); font-weight: 700; color: var(--text-primary); } .dashboard-instructor__name { margin-block-start: var(--space-3); color: var(--accent-green); font-weight: var(--font-semibold); font-size: var(--text-sm); } .dashboard-instructor__content { min-width: 0; } .dashboard-instructor__quote { margin: 0 0 var(--space-4); padding: var(--space-4); border: 1px solid rgba(200,255,34,0.35); background: color-mix(in oklab, var(--accent-green) 8%, transparent); border-radius: var(--radius-md); } .dashboard-instructor__quote p { margin: 0 0 var(--space-2); color: var(--text-primary); font-weight: var(--font-medium); } .dashboard-instructor__quote cite { color: var(--text-muted); font-style: normal; font-size: var(--text-xs); } .dashboard-instructor__bio p { color: var(--text-secondary); margin-block-end: var(--space-3); overflow-wrap: anywhere; } .dashboard-instructor__highlights { margin-block: var(--space-4); padding-inline-start: var(--space-5); } .dashboard-instructor__highlights li { color: var(--text-secondary); margin-block-end: var(--space-2); } .dashboard-instructor__links { margin-block-start: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); } .dashboard-instructor__links-label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); } .dashboard-instructor__links-list { display: flex; flex-wrap: wrap; gap: var(--space-3); } .instructor-link { border: 1px solid rgba(90,227,255,0.32); border-radius: var(--radius-md); padding: var(--space-2) var(--space-4); font-size: var(--text-sm); color: var(--text-primary); background: rgba(90,227,255,0.08); transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast); } .instructor-link:hover { border-color: var(--accent-green); background: rgba(200,255,34,0.12); color: var(--text-primary); } .instructor-link:focus-visible { outline: 2px solid rgba(200, 255, 34, 0.92); outline-offset: 2px; } @media (max-width: 900px) { .dashboard-instructor__grid { grid-template-columns: 1fr; } .dashboard-instructor__media { max-width: 240px; } } @media (max-width: 640px) { .dashboard-instructor { padding: var(--space-5); } .dashboard-instructor__links-list { flex-direction: column; } .instructor-link { width: 100%; text-align: center; } }