/* ═══════════════════════════════════════════════════ proofofboredom.com — learn/learn.css PyLearnXP learning app, built on POB tokens. All selectors scoped under .learn-page. Default light (set inline in ); follows the site theme toggle. ═══════════════════════════════════════════════════ */ .learn-page { background: var(--bg); min-height: 100vh; } /* ── HERO / DASHBOARD ── */ .learn-hero { padding: 9rem 3rem 2.5rem; max-width: 1060px; margin: 0 auto; } .learn-eyebrow { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); margin-bottom: 1rem; } .learn-hero h1 { font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 700; letter-spacing: -0.02em; color: var(--text); margin-bottom: 0.6rem; } .learn-sub { color: var(--text-2); font-size: 1.05rem; max-width: 560px; } .learn-stats { display: flex; align-items: center; gap: 0.6rem; margin-top: 1.4rem; flex-wrap: wrap; } .learn-container { max-width: 1060px; margin: 0 auto; padding: 0 3rem 6rem; } @media (max-width: 700px) { .learn-hero { padding: 7rem 1.4rem 2rem; } .learn-container { padding: 0 1.4rem 5rem; } } /* ── PILLS ── */ .learn-page .stat-pill { display: inline-flex; align-items: center; gap: 0.35rem; font-family: var(--font-mono); font-size: 0.72rem; padding: 0.35rem 0.8rem; border-radius: 99px; border: 1px solid var(--border-mid); color: var(--text-2); white-space: nowrap; } .learn-page .stat-pill.xp { color: var(--accent); border-color: var(--accent); } .learn-page .btn-auth { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; padding: 0.4rem 0.9rem; border-radius: 99px; border: 1px solid var(--accent); background: var(--accent); color: #fff; cursor: pointer; transition: opacity var(--dur) var(--ease); } .learn-page .btn-auth:hover { opacity: 0.85; } .learn-page .btn-auth.ghost { background: transparent; color: var(--text-2); border-color: var(--border-mid); } /* ── CONTINUE CARD ── */ .continue-card { display: flex; align-items: center; justify-content: space-between; gap: 1.4rem; flex-wrap: wrap; border: 1px solid var(--accent); border-radius: 14px; padding: 1.6rem 1.8rem; margin-bottom: 3rem; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 9%, var(--bg-2)), var(--bg-2)); } .continue-card .label { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.35rem; } .continue-card h2 { font-size: 1.35rem; color: var(--text); margin-bottom: 0.15rem; } .continue-card .cc-sub { color: var(--text-3); font-size: 0.85rem; } .btn-continue { font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.05em; padding: 0.75rem 1.5rem; border-radius: 8px; background: var(--accent); color: #fff; text-decoration: none; transition: opacity var(--dur) var(--ease); } .btn-continue:hover { opacity: 0.85; } /* ── SECTION HEADS ── */ .section-head { display: flex; align-items: baseline; justify-content: space-between; margin: 2.6rem 0 1.1rem; } .section-head h2 { font-size: 1.15rem; color: var(--text); } .learn-page .muted { color: var(--text-3); font-size: 0.8rem; font-family: var(--font-mono); } /* ── MODULE GRID ── */ .module-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 0.9rem; } .module-card { border: 1px solid var(--border); border-radius: 12px; padding: 1.2rem 1.3rem; background: var(--bg-2); cursor: pointer; display: flex; flex-direction: column; gap: 0.55rem; transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease); } .module-card:hover { border-color: var(--accent); transform: translateY(-2px); } .module-card.locked { opacity: 0.5; cursor: default; } .module-card.locked:hover { border-color: var(--border); transform: none; } .module-card .num { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.18em; color: var(--text-3); text-transform: uppercase; } .module-card h3 { font-size: 0.98rem; color: var(--text); } .module-card p { color: var(--text-2); font-size: 0.82rem; line-height: 1.5; } .module-card .meta { display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--text-3); font-family: var(--font-mono); } .module-card .row { display: flex; align-items: center; justify-content: space-between; } .badge-soon { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase; border: 1px solid var(--border-mid); color: var(--text-3); border-radius: 99px; padding: 0.15rem 0.55rem; } .progress-bar { height: 5px; border-radius: 99px; background: var(--bg-3); overflow: hidden; } .progress-bar > span { display: block; height: 100%; background: var(--accent); border-radius: 99px; } /* ── BADGES ── */ .badge-shelf { display: flex; flex-wrap: wrap; gap: 0.9rem; } .badge-item { width: 68px; text-align: center; } .badge-item .icon { width: 48px; height: 48px; margin: 0 auto 0.3rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; background: var(--bg-2); border: 1px solid var(--border); } .badge-item.earned .icon { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--bg-2)); } .badge-item:not(.earned) { opacity: 0.3; } .badge-item .label { font-size: 0.6rem; color: var(--text-3); font-family: var(--font-mono); } /* ── LESSON SCREEN ── */ .lesson-screen { overflow: hidden; } .learn-nav-stats { display: flex; align-items: center; gap: 0.5rem; } .learn-shell { display: grid; grid-template-columns: minmax(340px, 1fr) minmax(400px, 1.1fr); height: 100vh; padding-top: 4.6rem; } @media (max-width: 940px) { .learn-shell { grid-template-columns: 1fr; height: auto; min-height: 100vh; } .lesson-screen { overflow: auto; } .code-pane { position: fixed; inset: auto 0 0 0; height: 48px; z-index: 150; border-top: 1px solid var(--border-mid); transition: height 0.25s var(--ease); overflow: hidden; } .code-pane.expanded { height: 80vh; } .code-pane-handle { display: flex !important; } .lesson-pane { padding-bottom: 70px; } } .lesson-pane { overflow-y: auto; padding: 1.8rem 2.4rem 3rem; border-right: 1px solid var(--border); } .crumbs { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); margin-bottom: 0.8rem; } .lesson-pane h1 { font-size: 1.5rem; color: var(--text); margin-bottom: 1rem; letter-spacing: -0.01em; } .lesson-body { color: var(--text-2); line-height: 1.75; font-size: 0.95rem; } .lesson-body p { margin-bottom: 0.9rem; } .lesson-body strong { color: var(--text); } .lesson-body code { font-family: var(--font-mono); font-size: 0.84em; background: var(--bg-3); border-radius: 4px; padding: 0.1em 0.4em; } .lesson-body pre { background: var(--bg-3); border: 1px solid var(--border); border-radius: 8px; padding: 0.9rem 1rem; overflow-x: auto; margin-bottom: 0.9rem; } .lesson-body pre code { background: none; padding: 0; font-size: 0.82rem; } .lesson-body ul { padding-left: 1.2rem; margin-bottom: 0.9rem; } .checkpoint { border: 1px dashed var(--border-mid); border-radius: 8px; padding: 0.8rem 1rem; margin: 1.1rem 0; font-size: 0.85rem; color: var(--text-2); } .checkpoint .q { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.35rem; } .lesson-nav { display: flex; gap: 0.6rem; margin-top: 2rem; flex-wrap: wrap; } .lesson-nav .cbtn { text-decoration: none; } /* ── CODE PANE ── */ .code-pane { display: flex; flex-direction: column; background: var(--bg-2); } .code-pane-handle { display: none; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.5rem; cursor: pointer; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); background: var(--bg-2); } .code-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; padding: 0.7rem 1rem; border-bottom: 1px solid var(--border); } .tier-tabs { display: flex; gap: 0.4rem; flex-wrap: wrap; } .tier-tab { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.04em; padding: 0.4rem 0.8rem; border-radius: 99px; border: 1px solid var(--border); background: transparent; color: var(--text-3); cursor: pointer; transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease); } .tier-tab:hover { color: var(--text-2); border-color: var(--border-mid); } .tier-tab[data-tier="scaffolded"].active { border-color: #34a86a; color: #34a86a; } .tier-tab[data-tier="standard"].active { border-color: #c98a1b; color: #c98a1b; } .tier-tab[data-tier="challenge"].active { border-color: #d05252; color: #d05252; } .code-actions { display: flex; gap: 0.4rem; } .cbtn { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em; padding: 0.45rem 0.9rem; border-radius: 7px; border: 1px solid var(--border-mid); background: transparent; color: var(--text-2); cursor: pointer; transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), opacity var(--dur) var(--ease); } .cbtn:hover { border-color: var(--accent); color: var(--accent); } .cbtn:disabled { opacity: 0.45; cursor: wait; } .cbtn-primary { background: var(--accent); border-color: var(--accent); color: #fff; } .cbtn-primary:hover { color: #fff; opacity: 0.85; } .exercise-prompt { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); font-size: 0.85rem; color: var(--text-2); line-height: 1.55; max-height: 130px; overflow-y: auto; } .exercise-prompt strong { color: var(--text); } .exercise-prompt code { font-family: var(--font-mono); font-size: 0.82em; background: var(--bg-3); border-radius: 4px; padding: 0.05em 0.35em; } .hint-box { display: none; padding: 0.7rem 1rem; border-bottom: 1px solid var(--border); font-size: 0.82rem; color: #c98a1b; background: color-mix(in srgb, #c98a1b 7%, var(--bg-2)); } .hint-box.show { display: block; } #editor-host { flex: 1; min-height: 150px; overflow: auto; } .CodeMirror { height: 100% !important; font-family: var(--font-mono) !important; font-size: 0.86rem !important; } /* Light theme: restyle the material CodeMirror theme to a light editor */ [data-theme="light"] .cm-s-material.CodeMirror { background: #fafafa; color: #383a42; } [data-theme="light"] .cm-s-material .CodeMirror-gutters { background: #f0f0f1; border-right: 1px solid rgba(0,0,0,0.06); } [data-theme="light"] .cm-s-material .CodeMirror-linenumber { color: #a0a1a7; } [data-theme="light"] .cm-s-material .CodeMirror-cursor { border-left: 1px solid #383a42; } [data-theme="light"] .cm-s-material span.cm-keyword { color: #a626a4; } [data-theme="light"] .cm-s-material span.cm-string { color: #50a14f; } [data-theme="light"] .cm-s-material span.cm-number { color: #986801; } [data-theme="light"] .cm-s-material span.cm-comment { color: #a0a1a7; font-style: italic; } [data-theme="light"] .cm-s-material span.cm-def, [data-theme="light"] .cm-s-material span.cm-variable { color: #383a42; } [data-theme="light"] .cm-s-material span.cm-builtin { color: #0071e3; } [data-theme="light"] .cm-s-material span.cm-operator { color: #383a42; } .output-pane { border-top: 1px solid var(--border); background: #101216; color: #d7e2d9; font-family: var(--font-mono); font-size: 0.78rem; line-height: 1.6; padding: 0.8rem 1rem; max-height: 32%; min-height: 76px; overflow-y: auto; white-space: pre-wrap; } .output-pane .ok { color: #5fbe85; } .output-pane .err { color: #e07a7a; } .output-pane .hint-line { color: #7fa9d6; } /* ── AUTH MODAL / TOAST / TIMER (shared chrome) ── */ .learn-page .modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: none; align-items: center; justify-content: center; z-index: 300; } .learn-page .modal-backdrop.open { display: flex; } .learn-page .modal { width: 100%; max-width: 380px; background: var(--bg); border: 1px solid var(--border-mid); border-radius: 14px; padding: 1.8rem; } .learn-page .modal h2 { color: var(--text); font-size: 1.2rem; margin-bottom: 0.2rem; } .learn-page .modal .sub { color: var(--text-3); font-size: 0.82rem; margin-bottom: 1.1rem; } .learn-page .field { margin-bottom: 0.9rem; } .learn-page .field label { display: block; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); margin-bottom: 0.35rem; } .learn-page .field input { width: 100%; background: var(--bg-2); border: 1px solid var(--border-mid); border-radius: 7px; color: var(--text); font-family: var(--font-body); font-size: 0.9rem; padding: 0.6rem 0.75rem; } .learn-page .field input:focus { outline: none; border-color: var(--accent); } .learn-page .field .error { display: none; color: #d05252; font-size: 0.72rem; margin-top: 0.25rem; } .learn-page .field.invalid input { border-color: #d05252; } .learn-page .field.invalid .error { display: block; } .learn-page .form-msg { display: none; font-size: 0.8rem; padding: 0.5rem 0.7rem; border-radius: 7px; margin-bottom: 0.8rem; } .learn-page .form-msg.show { display: block; } .learn-page .form-msg.error { background: color-mix(in srgb, #d05252 10%, var(--bg)); color: #d05252; } .learn-page .form-msg.ok { background: color-mix(in srgb, #34a86a 10%, var(--bg)); color: #34a86a; } .learn-page .modal-switch { text-align: center; font-size: 0.8rem; color: var(--text-3); margin-top: 0.8rem; } .learn-page .modal-switch a { color: var(--accent); } .learn-page .btn-block { width: 100%; font-family: var(--font-mono); font-size: 0.75rem; padding: 0.65rem; border-radius: 7px; border: 1px solid var(--accent); background: var(--accent); color: #fff; cursor: pointer; } .learn-page .btn-block.ghost { background: transparent; color: var(--text-3); border-color: transparent; margin-top: 0.6rem; } .recovery-code-box { font-family: var(--font-mono); font-size: 1.25rem; letter-spacing: 0.12em; text-align: center; padding: 0.9rem; margin: 0.9rem 0; border: 1px dashed var(--accent); border-radius: 8px; color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--bg)); user-select: all; } .learn-page .toast { position: fixed; bottom: 1.6rem; left: 50%; transform: translateX(-50%) translateY(8px); background: var(--bg); border: 1px solid var(--accent); border-radius: 8px; padding: 0.7rem 1.2rem; font-family: var(--font-mono); font-size: 0.78rem; color: var(--text); opacity: 0; pointer-events: none; z-index: 400; } .learn-page .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); transition: opacity 0.2s var(--ease), transform 0.2s var(--ease); } #confetti-canvas { position: fixed; inset: 0; pointer-events: none; z-index: 390; } #focus-timer { position: fixed; left: 1.1rem; bottom: 1.1rem; display: flex; align-items: center; gap: 0.5rem; background: var(--bg); border: 1px solid var(--border-mid); border-radius: 99px; padding: 0.5rem 0.9rem; font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-2); z-index: 250; font-variant-numeric: tabular-nums; } #focus-timer.running { border-color: var(--accent); } #focus-timer .ft-toggle { background: none; border: none; color: var(--text-2); cursor: pointer; font-size: 0.85rem; } #focus-timer .ft-mode { font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); } /* French-lessons notice — visible only when the site language is FR */ .fr-note { display: none; } html[lang="fr"] .fr-note { display: block; position: relative; z-index: 150; margin: 4.8rem 0 -4.2rem; padding: 0.55rem 1rem; text-align: center; font-size: 0.8rem; color: var(--text-2); background: color-mix(in srgb, var(--accent) 8%, var(--bg-2)); border-bottom: 1px solid var(--border); } html[lang="fr"] .lesson-screen .fr-note { margin: 4.6rem 0 -4.6rem; }