/* ================================================================ Nugget — Personal-Finance Learning App styles.css — complete visual design rewrite Mobile-first. Phone-prototype pixel-faithful. Font imports go in (Google Fonts): Schibsted Grotesk: wght@500;600;700;800 Hanken Grotesk: wght@400;500;600;700 ================================================================ */ /* ---------------------------------------------------------------- 1. DESIGN TOKENS ---------------------------------------------------------------- */ :root { /* Backgrounds & surfaces */ --nug-bg: #F5F3FF; --nug-surface: #FFFFFF; /* Text */ --nug-ink: #1E1B4B; --nug-ink-muted: #6D6A85; /* Borders / lines */ --nug-line: #DDD6FE; /* Primary — purple */ --nug-primary: #7C3AED; --nug-primary-deep: #5B21B6; --nug-primary-ink: #FFFFFF; /* XP — reward yellow (token name kept for app.js compatibility) */ --nug-gold: #FBBF24; --nug-gold-light: #FDE68A; --nug-gold-deep: #D97706; /* Success — correct answers (calm purple-positive, never neon) */ --nug-success: #7C3AED; --nug-success-deep: #5B21B6; --nug-success-bg: #EDE9FE; --nug-success-border: #C4B5FD; /* Review / amber — SRS queue & WRONG answers (calm, NOT red) */ --nug-review: #FBBF24; --nug-review-deep: #92400E; --nug-review-bg: #FEF3C7; --nug-review-border: #FDE68A; /* Wrong state = amber (same palette as review — brand anti-anxiety) */ --nug-wrong: #FBBF24; --nug-wrong-bg: #FEF3C7; --nug-wrong-border: #FDE68A; /* Panel — soft purple info background */ --nug-panel-blue: #EDE9FE; --nug-panel-blue-border: #DDD6FE; /* Locked state */ --nug-locked: #A29DB8; --nug-locked-bg: #EDE9FE; /* Radii */ --nug-radius-sm: 8px; --nug-radius-md: 14px; --nug-radius-lg: 22px; /* Spacing scale */ --nug-space-1: 4px; --nug-space-2: 8px; --nug-space-3: 12px; --nug-space-4: 16px; --nug-space-5: 24px; --nug-space-6: 32px; /* Typography */ --nug-font: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --nug-heading-font: "Schibsted Grotesk", "Hanken Grotesk", system-ui, sans-serif; /* Shadows */ --nug-shadow-sm: 0 1px 3px rgba(91, 33, 182, 0.08), 0 1px 2px rgba(91, 33, 182, 0.06); --nug-shadow-md: 0 8px 24px rgba(91, 33, 182, 0.12), 0 4px 8px rgba(91, 33, 182, 0.06); /* Layout */ --nug-maxw: 460px; /* Internal tints (not in contract but referenced by components) */ --nug-primary-tint: #A78BFA; /* lighter purple, for gradients */ --nug-body-text: #3D3A5C; /* body text */ --nug-example-text: #7A5212; /* warm amber for example blocks */ --nug-example-bg-start: #FEF9EC; /* example box gradient start */ --nug-example-bg-end: #FEF3C7; /* example box gradient end */ } /* ---------------------------------------------------------------- 2. RESET & BASE ---------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { background: var(--nug-bg); font-family: var(--nug-font); color: var(--nug-ink); font-size: 1rem; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3 { font-family: var(--nug-heading-font); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; } button { font-family: var(--nug-font); } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; padding: 0; margin: 0; } /* ---------------------------------------------------------------- 3. APP SHELL ---------------------------------------------------------------- */ .nug-app { max-width: var(--nug-maxw); margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; position: relative; background: var(--nug-bg); /* On desktop, define the narrow column with a warm shadow */ box-shadow: 0 0 0 1px var(--nug-line), 0 40px 80px rgba(91, 33, 182, 0.06); } /* ---------------------------------------------------------------- 4. UTILITY ---------------------------------------------------------------- */ .is-hidden { display: none !important; } /* ---------------------------------------------------------------- 5. TOP BAR ---------------------------------------------------------------- */ .nug-top-bar { padding: var(--nug-space-3) var(--nug-space-4); /* gradient fade — floats over page content */ background: linear-gradient(180deg, var(--nug-bg) 70%, rgba(245, 243, 255, 0)); display: flex; align-items: center; justify-content: space-between; gap: var(--nug-space-3); position: sticky; top: 0; z-index: 100; } #top-bar.is-hidden { display: none; } .nug-top-bar-right { display: flex; align-items: center; gap: var(--nug-space-2); } /* Home link — left side of top bar */ .nug-home-link { display: inline-flex; align-items: center; gap: var(--nug-space-2); font-family: var(--nug-heading-font); font-weight: 700; font-size: 0.9rem; color: var(--nug-ink); text-decoration: none; } /* Points pill — gold dot + count */ .nug-points { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px 7px 10px; background: var(--nug-surface); border: 1px solid var(--nug-line); border-radius: 999px; font-weight: 800; font-size: 0.875rem; color: var(--nug-ink); box-shadow: var(--nug-shadow-sm); position: relative; } .nug-points::before { content: ""; display: inline-block; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, var(--nug-gold-light), var(--nug-gold)); flex-shrink: 0; } /* Streak pill — amber */ .nug-streak { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; background: var(--nug-review-bg); border: 1px solid var(--nug-review-border); border-radius: 999px; font-weight: 700; font-size: 0.875rem; color: var(--nug-gold-deep); } /* ---------------------------------------------------------------- 6. SCREENS ---------------------------------------------------------------- */ .nug-screen { padding: var(--nug-space-5) var(--nug-space-4); flex-grow: 1; display: flex; flex-direction: column; } .nug-screen.is-hidden { display: none; } /* ---------------------------------------------------------------- 7. BUTTONS ---------------------------------------------------------------- */ .nug-btn { display: block; width: 100%; padding: 16px var(--nug-space-4); border: none; border-radius: var(--nug-radius-md); font-family: var(--nug-heading-font); font-size: 1.03rem; font-weight: 700; cursor: pointer; text-align: center; transition: opacity 0.15s, transform 0.1s, box-shadow 0.15s; line-height: 1.4; text-decoration: none; } .nug-btn:active { transform: scale(0.98); } /* Primary — indigo */ .nug-btn--primary { background: var(--nug-primary); color: var(--nug-primary-ink); box-shadow: 0 14px 28px -12px rgba(124, 58, 237, 0.55); } .nug-btn--primary:hover { opacity: 0.92; } /* Ghost — outline */ .nug-btn--ghost { background: transparent; border: 2px solid var(--nug-line); color: var(--nug-ink-muted); } .nug-btn--ghost:hover { border-color: var(--nug-ink-muted); } /* Gold gradient */ .nug-btn--gold { background: linear-gradient(135deg, var(--nug-gold-light), var(--nug-gold)); color: var(--nug-gold-deep); font-weight: 800; } .nug-btn--gold:hover { opacity: 0.92; } .nug-btn:disabled, .nug-btn[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; } .nug-btn.is-hidden { display: none !important; } /* ---------------------------------------------------------------- 8. CARDS ---------------------------------------------------------------- */ .nug-card { background: var(--nug-surface); border-radius: var(--nug-radius-md); box-shadow: var(--nug-shadow-sm); padding: var(--nug-space-5); border: 1px solid var(--nug-line); } /* ---------------------------------------------------------------- 9. COIN / MASCOT PLACEHOLDER ---------------------------------------------------------------- */ .nug-coin { width: 64px; height: 64px; background: linear-gradient(135deg, var(--nug-gold-light), var(--nug-gold)); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--nug-gold-deep); font-size: 1.75rem; flex-shrink: 0; } /* ---------------------------------------------------------------- 10. PROGRESS BARS ---------------------------------------------------------------- */ /* Home progress bar — success green fill */ .nug-progress { width: 100%; height: 9px; appearance: none; -webkit-appearance: none; border: none; border-radius: 999px; overflow: hidden; display: block; background: var(--nug-panel-blue-border); } .nug-progress::-webkit-progress-bar { background: var(--nug-panel-blue-border); border-radius: 999px; } .nug-progress::-webkit-progress-value { background: var(--nug-success); border-radius: 999px; transition: width 0.3s ease; } .nug-progress::-moz-progress-bar { background: var(--nug-success); border-radius: 999px; } /* Lesson progress bar — indigo gradient fill (overrides above values) */ .nug-lesson-progress { height: 10px; background: var(--nug-panel-blue-border); } .nug-lesson-progress::-webkit-progress-bar { background: var(--nug-panel-blue-border); border-radius: 999px; } .nug-lesson-progress::-webkit-progress-value { background: linear-gradient(90deg, var(--nug-primary), var(--nug-primary-tint)); border-radius: 999px; transition: width 0.3s ease; } .nug-lesson-progress::-moz-progress-bar { background: linear-gradient(90deg, var(--nug-primary), var(--nug-primary-tint)); border-radius: 999px; } /* ---------------------------------------------------------------- 11. ONBOARDING ---------------------------------------------------------------- */ /* Onboarding screen: gradient bg */ #screen-onboarding { background: linear-gradient(180deg, var(--nug-bg) 0%, var(--nug-panel-blue) 100%); padding-top: var(--nug-space-6); } /* Individual step wrapper */ .nug-onboard-step { display: flex; flex-direction: column; gap: var(--nug-space-5); flex-grow: 1; } .nug-onboard-step.is-hidden { display: none; } /* Step 1: centred hero layout */ #onboard-step-1 { align-items: center; text-align: center; padding-top: var(--nug-space-6); justify-content: space-between; } /* Mascot / coin icon on step 1 — larger circle */ .nug-coin-icon { width: 120px; height: 120px; background: linear-gradient(135deg, var(--nug-gold-light), var(--nug-gold)); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 3rem; color: var(--nug-gold-deep); margin: 0 auto; filter: drop-shadow(0 20px 30px rgba(91, 33, 182, 0.14)); flex-shrink: 0; } /* Welcome heading */ .nug-onboard-title { font-family: var(--nug-heading-font); font-weight: 800; font-size: 1.9rem; line-height: 1.12; letter-spacing: -0.02em; color: var(--nug-ink); text-wrap: balance; } /* Onboarding progress dots (steps 2 & 3) */ .nug-onboard-progress { display: flex; gap: 7px; margin-bottom: var(--nug-space-5); } .nug-onboard-dot { flex: 1; height: 6px; border-radius: 3px; background: var(--nug-panel-blue-border); } .nug-onboard-dot.is-active { background: var(--nug-primary); } /* Step 1 hero wrapper */ .nug-onboard-hero { display: flex; align-items: center; justify-content: center; padding-top: var(--nug-space-4); } /* Mascot image on step 1 (SVG version) */ .nug-mascot { width: 160px; height: 160px; filter: drop-shadow(0 20px 30px rgba(91, 33, 182, 0.14)); display: block; } /* Onboarding body text */ .nug-onboard-body { font-size: 1.03rem; line-height: 1.55; color: var(--nug-ink-muted); max-width: 28em; } /* Onboarding action buttons wrapper */ .nug-onboard-actions { display: flex; flex-direction: column; gap: var(--nug-space-3); margin-top: auto; } /* "No account needed" small note */ .nug-onboard-note { font-size: 0.84rem; color: var(--nug-ink-muted); text-align: center; margin: 0; } /* Goal picker grid — vertical stacked list */ .nug-goal-grid { display: flex; flex-direction: column; gap: var(--nug-space-3); } /* Daily picker grid — vertical stacked list */ .nug-daily-grid { display: flex; flex-direction: column; gap: var(--nug-space-3); } /* Picker buttons (goal & daily) */ [data-action="pick-goal"], [data-action="pick-daily"] { display: flex; align-items: center; gap: 14px; width: 100%; padding: 15px var(--nug-space-4); border: 2px solid var(--nug-line); border-radius: var(--nug-radius-md); background: var(--nug-surface); font-family: var(--nug-heading-font); font-weight: 700; font-size: 1.03rem; color: var(--nug-ink); cursor: pointer; text-align: left; transition: all 0.18s; } [data-action="pick-goal"]:hover, [data-action="pick-daily"]:hover { border-color: var(--nug-primary); background: var(--nug-panel-blue); } [data-action="pick-goal"].is-selected, [data-action="pick-daily"].is-selected { background: var(--nug-panel-blue); border-color: var(--nug-primary); color: var(--nug-ink); } /* ---------------------------------------------------------------- 12. HOME SCREEN ---------------------------------------------------------------- */ /* Greeting */ .nug-greeting { font-family: var(--nug-heading-font); font-weight: 800; font-size: 1.4rem; color: var(--nug-ink); margin-bottom: var(--nug-space-4); } /* Daily progress wrapper */ .nug-daily-progress { margin-bottom: var(--nug-space-5); } /* Daily label */ #daily-label { display: block; font-size: 0.8rem; color: var(--nug-ink-muted); margin-bottom: var(--nug-space-2); font-weight: 600; } /* CTA button spacing */ #continue-btn, #quick-review-btn { margin-bottom: var(--nug-space-3); } /* UNIT BLOCK */ .nug-unit-block { margin-bottom: var(--nug-space-6); } /* Indigo gradient unit header banner */ .nug-unit-header { background: linear-gradient(150deg, var(--nug-primary), var(--nug-primary-deep)); border-radius: var(--nug-radius-lg); padding: 20px 22px; color: var(--nug-primary-ink); margin-bottom: 14px; box-shadow: 0 16px 32px -18px rgba(124, 58, 237, 0.8); } /* Unit label above title (uppercase eyebrow) */ .nug-unit-subtitle { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.7); margin: 0 0 var(--nug-space-1); } /* Unit name */ .nug-unit-title { font-family: var(--nug-heading-font); font-weight: 800; font-size: 1.375rem; color: var(--nug-primary-ink); margin: 0 0 14px; letter-spacing: -0.01em; } /* Progress bar inside unit header — white track, gold fill */ .nug-unit-header .nug-progress { background: rgba(255, 255, 255, 0.25); height: 9px; } .nug-unit-header .nug-progress::-webkit-progress-bar { background: rgba(255, 255, 255, 0.25); } .nug-unit-header .nug-progress::-webkit-progress-value { background: var(--nug-gold-light); } /* LESSON NODE LIST */ .nug-lesson-list { list-style: none; padding: 0; margin: 0; } /* Dashed connector between lesson nodes */ .nug-lesson-list li { position: relative; } .nug-lesson-list li + li::before { content: ""; display: block; width: 2px; height: 20px; margin-left: 29px; background: repeating-linear-gradient( var(--nug-line) 0 5px, transparent 5px 11px ); } /* Individual lesson row */ .nug-lesson-node { display: flex; align-items: center; gap: 14px; padding: 12px var(--nug-space-4); margin-bottom: 6px; border-radius: 20px; background: var(--nug-surface); border: 2px solid var(--nug-panel-blue-border); cursor: pointer; text-decoration: none; color: var(--nug-ink); transition: border-color 0.15s, box-shadow 0.15s, opacity 0.15s; font-family: var(--nug-heading-font); font-weight: 700; font-size: 0.97rem; } /* Available — next lesson to take */ .nug-lesson-node.is-available { border: 2px solid var(--nug-primary); box-shadow: 0 14px 30px -16px rgba(124, 58, 237, 0.7); } .nug-lesson-node.is-available:hover { box-shadow: 0 18px 36px -16px rgba(124, 58, 237, 0.8); } /* Complete */ .nug-lesson-node.is-complete { border-color: var(--nug-line); opacity: 0.85; } /* Locked */ .nug-lesson-node.is-locked { opacity: 0.75; cursor: not-allowed; pointer-events: none; } /* NODE ICON — 60px circle */ .nug-node-icon { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.5rem; font-weight: 800; } /* Complete node icon — gold gradient */ .nug-lesson-node.is-complete .nug-node-icon { background: linear-gradient(140deg, var(--nug-gold-light), var(--nug-gold)); color: var(--nug-ink); box-shadow: 0 10px 20px -10px rgba(217, 119, 6, 0.7); } /* Available node icon — indigo */ .nug-lesson-node.is-available .nug-node-icon { background: var(--nug-primary); color: var(--nug-primary-ink); } /* Locked node icon — grey */ .nug-lesson-node.is-locked .nug-node-icon { background: var(--nug-locked-bg); color: var(--nug-locked); } /* Pulsing animation on the available node icon */ @keyframes nugPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.45); } 50% { box-shadow: 0 0 0 12px rgba(124, 58, 237, 0); } } @media (prefers-reduced-motion: no-preference) { .nug-lesson-node.is-available .nug-node-icon { animation: nugPulse 2.4s ease-out infinite; } } /* Estimated time label — right-aligned */ .nug-lesson-est { margin-left: auto; font-size: 0.75rem; color: var(--nug-primary); font-weight: 700; white-space: nowrap; flex-shrink: 0; } .nug-lesson-node.is-complete .nug-lesson-est { color: var(--nug-ink-muted); font-weight: 400; } /* Credibility note at the bottom of home */ .nug-credibility-note { font-size: 0.78rem; color: var(--nug-ink-muted); text-align: center; margin-top: var(--nug-space-6); padding-top: var(--nug-space-4); border-top: 1px solid var(--nug-line); line-height: 1.5; } /* ---------------------------------------------------------------- 13. LESSON PLAYER ---------------------------------------------------------------- */ /* Override screen padding for the lesson — tighter layout */ #screen-lesson { padding: 0; gap: 0; } /* Lesson header row */ .nug-lesson-header { display: flex; align-items: center; gap: 14px; padding: var(--nug-space-5) var(--nug-space-4) var(--nug-space-3); } /* Back button — small square (matched by data-action OR class alias) */ [data-action="lesson-back"], .nug-lesson-back-btn { border: none; background: var(--nug-panel-blue-border); width: 34px; height: 34px; min-width: 34px; border-radius: 11px; font-size: 1rem; color: var(--nug-ink-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 0; font-family: var(--nug-font); /* override any .nug-btn width:100% if class is present */ width: 34px !important; } [data-action="lesson-back"]:hover, .nug-lesson-back-btn:hover { background: var(--nug-panel-blue); color: var(--nug-ink); } /* Lesson name centred */ .nug-lesson-title { font-size: 1rem; font-weight: 700; flex-grow: 1; text-align: center; color: var(--nug-ink); font-family: var(--nug-heading-font); } /* Progress bar wrapper */ .nug-lesson-progress-wrap { padding: 0 var(--nug-space-4) var(--nug-space-3); } /* ITEM CARD */ .nug-item-card { background: var(--nug-surface); border-radius: var(--nug-radius-md); padding: var(--nug-space-5); border: 1px solid var(--nug-line); margin: 0 var(--nug-space-4); flex-grow: 1; overflow-y: auto; } /* Item heading */ .nug-item-title { font-family: var(--nug-heading-font); font-weight: 800; font-size: 1.5rem; line-height: 1.18; letter-spacing: -0.02em; margin: 0 0 14px; color: var(--nug-ink); } /* Item body text */ .nug-item-body { font-size: 1.03rem; line-height: 1.6; color: var(--nug-body-text); } /* Gold left-border example box */ .nug-item-example { background: linear-gradient(160deg, var(--nug-example-bg-start), var(--nug-example-bg-end)); border: 1px solid var(--nug-review-border); border-left: 4px solid var(--nug-gold); border-radius: var(--nug-radius-md); padding: 16px 18px; margin-top: var(--nug-space-3); font-size: 0.97rem; line-height: 1.55; color: var(--nug-example-text); } /* MULTIPLE CHOICE — stack of choices */ .nug-choices { display: flex; flex-direction: column; gap: 11px; margin-top: var(--nug-space-4); } /* Individual choice button */ .nug-choice { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 15px var(--nug-space-4); border: 2px solid var(--nug-panel-blue-border); border-radius: var(--nug-radius-md); background: var(--nug-surface); font-family: var(--nug-font); font-size: 0.97rem; font-weight: 600; color: var(--nug-ink); cursor: pointer; transition: all 0.18s; line-height: 1.4; } .nug-choice:hover:not(:disabled) { border-color: var(--nug-primary); background: var(--nug-panel-blue); } /* Selected (before answer submitted) */ .nug-choice.is-selected { background: var(--nug-panel-blue); border-color: var(--nug-primary); } /* Correct — green */ .nug-choice.is-correct { background: var(--nug-success-bg); border-color: var(--nug-success); color: var(--nug-success-deep); } /* Wrong — AMBER (not red, brand anti-anxiety) */ .nug-choice.is-wrong { background: var(--nug-wrong-bg); border-color: var(--nug-wrong); color: var(--nug-review-deep); } /* Checkmark badge on correct choice */ .nug-choice.is-correct::after { content: "✓"; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--nug-success); color: var(--nug-primary-ink); font-size: 0.8rem; font-weight: 800; flex-shrink: 0; margin-left: auto; } /* Exclamation badge on wrong choice */ .nug-choice.is-wrong::after { content: "!"; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--nug-wrong); color: var(--nug-primary-ink); font-size: 0.8rem; font-weight: 800; flex-shrink: 0; margin-left: auto; } .nug-choice:disabled { cursor: default; } /* FEEDBACK BAND */ .nug-feedback { margin: var(--nug-space-3) var(--nug-space-4) 0; padding: 14px var(--nug-space-4); border-radius: var(--nug-radius-md); font-size: 0.9rem; line-height: 1.5; display: none; } .nug-feedback.is-visible { display: block; } .nug-feedback.is-correct { background: var(--nug-success-bg); color: var(--nug-success-deep); border: 1px solid var(--nug-success-border); } /* Wrong feedback: AMBER (not red) */ .nug-feedback.is-wrong { background: var(--nug-wrong-bg); color: var(--nug-review-deep); border: 1px solid var(--nug-wrong-border); } /* REVEAL ANSWER PANEL */ .nug-reveal-answer { margin: var(--nug-space-3) var(--nug-space-4) 0; padding: 18px; background: linear-gradient(160deg, var(--nug-example-bg-start), var(--nug-example-bg-end)); border: 1px solid var(--nug-review-border); border-radius: var(--nug-radius-md); display: none; } #reveal-answer { display: none; } #reveal-answer.is-visible, .nug-reveal-answer.is-visible { display: block; } /* Reveal action buttons */ .nug-reveal-actions { display: flex; flex-direction: row; gap: var(--nug-space-2); margin-top: var(--nug-space-3); } .nug-reveal-actions .nug-btn { flex: 1; padding: 15px; } /* STICKY LESSON ACTION AREA */ .nug-lesson-action-area { padding: var(--nug-space-4) var(--nug-space-4) var(--nug-space-5); position: sticky; bottom: 0; background: linear-gradient(0deg, var(--nug-bg) 85%, rgba(245, 243, 255, 0)); z-index: 10; } /* ---------------------------------------------------------------- 14. RESULTS SCREEN ---------------------------------------------------------------- */ #screen-results { text-align: center; align-items: center; background: linear-gradient(180deg, var(--nug-panel-blue) 0%, var(--nug-bg) 55%); padding-top: var(--nug-space-6); } /* Hero coin on results */ .nug-results-icon { width: 100%; max-width: 280px; margin: 0 auto var(--nug-space-4); } /* When coin circle is used as the results icon */ .nug-results-icon.nug-coin { width: 80px; height: 80px; font-size: 2.5rem; box-shadow: var(--nug-shadow-md); max-width: 80px; } /* Results headings */ .nug-results-title { font-family: var(--nug-heading-font); font-weight: 800; font-size: 1.6rem; letter-spacing: -0.02em; margin: 0 0 var(--nug-space-2); } .nug-results-subtitle { font-size: 1rem; color: var(--nug-ink-muted); margin-bottom: var(--nug-space-5); } /* Stat cards row */ .nug-results-stats { display: flex; gap: var(--nug-space-3); width: 100%; margin-bottom: 14px; justify-content: center; } .nug-results-stat { flex: 1; background: var(--nug-surface); border: 1px solid var(--nug-line); border-radius: 18px; padding: var(--nug-space-4) var(--nug-space-3); text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--nug-space-1); } .nug-results-stat-label { font-size: 0.75rem; color: var(--nug-ink-muted); font-weight: 600; } .nug-results-total { font-family: var(--nug-heading-font); font-weight: 800; font-size: 1.375rem; color: var(--nug-ink); line-height: 1; } /* Results badge wrapper */ .nug-results-badge { display: flex; align-items: center; justify-content: center; margin-bottom: var(--nug-space-4); } .nug-results-badge-img { width: 100%; max-width: 280px; height: auto; animation: nugFadeUp 0.5s ease both; } /* Points earned — gold */ .nug-results-points { font-family: var(--nug-heading-font); font-weight: 800; font-size: 1.375rem; color: var(--nug-gold-deep); line-height: 1; } /* Streak reassurance note — amber band */ .nug-results-streak { display: flex; align-items: center; gap: 10px; background: var(--nug-review-bg); border: 1px solid var(--nug-review-border); border-radius: var(--nug-radius-md); padding: 13px var(--nug-space-4); font-size: 0.9rem; color: var(--nug-gold-deep); font-weight: 600; text-align: left; width: 100%; } /* Action buttons on results */ .nug-results-actions { display: flex; flex-direction: column; gap: var(--nug-space-3); width: 100%; margin-top: var(--nug-space-5); } /* ---------------------------------------------------------------- 15. ANIMATIONS ---------------------------------------------------------------- */ @keyframes nugFadeUp { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } } .nug-feedback.is-visible { animation: nugFadeUp 0.25s ease both; } .nug-reveal-answer.is-visible { animation: nugFadeUp 0.3s ease both; } #reveal-answer.is-visible { animation: nugFadeUp 0.3s ease both; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } /* ---------------------------------------------------------------- 16. LEGACY UTILITY CLASSES (used in generated markup) ---------------------------------------------------------------- */ .nug-mt-1 { margin-top: var(--nug-space-1); } .nug-mt-2 { margin-top: var(--nug-space-2); } .nug-mt-3 { margin-top: var(--nug-space-3); } .nug-mt-4 { margin-top: var(--nug-space-4); } .nug-mt-5 { margin-top: var(--nug-space-5); } .nug-mt-6 { margin-top: var(--nug-space-6); } .nug-mb-1 { margin-bottom: var(--nug-space-1); } .nug-mb-2 { margin-bottom: var(--nug-space-2); } .nug-mb-3 { margin-bottom: var(--nug-space-3); } .nug-mb-4 { margin-bottom: var(--nug-space-4); } .nug-mb-5 { margin-bottom: var(--nug-space-5); } .nug-mb-6 { margin-bottom: var(--nug-space-6); } .nug-text-muted { color: var(--nug-ink-muted); } .nug-text-center { text-align: center; } .nug-text-sm { font-size: 0.85rem; } .nug-text-xs { font-size: 0.75rem; } .nug-divider { border: none; border-top: 1px solid var(--nug-line); margin: var(--nug-space-4) 0; } /* ================================================================ 17. DESKTOP LAYOUT (≥980px) All rules below are either base (mobile-safe resets for new structural elements) or scoped inside @media (min-width: 980px). The existing mobile rules above are NOT touched. ================================================================ */ /* ---- Base (mobile): new structural elements are invisible / pass-through ---- */ /* Sidebar: hidden on mobile */ .nug-sidebar { display: none; } /* Rail: hidden on mobile */ .nug-home-rail { display: none; } /* Home-left wrapper: on mobile it acts as if it doesn't exist — display:contents makes its children behave as direct children of #screen-home, preserving the existing mobile layout exactly. */ .nug-home-left { display: contents; } /* nug-main: on mobile, plain block — .nug-app was a flex column, now just the one column */ .nug-main { display: flex; flex-direction: column; min-height: 100vh; } /* ================================================================ @media (min-width: 980px) — ALL desktop rules ================================================================ */ @media (min-width: 980px) { /* ---------------------------------------------------------------- 17a. APP SHELL GRID ---------------------------------------------------------------- */ body { /* Ensure body fills viewport for the sidebar sticky to work */ min-height: 100vh; } .nug-app { max-width: 1280px; margin: 0 auto; min-height: 100vh; display: grid; grid-template-columns: 252px minmax(0, 1fr); /* Remove the narrow-column phone shadow */ box-shadow: 0 0 0 1px var(--nug-line); } .nug-main { /* Already flex-column from base; no change needed */ border-left: none; /* handled by sidebar border-right */ } .nug-main .nug-screen { flex-grow: 1; } /* ---------------------------------------------------------------- 17b. SIDEBAR ---------------------------------------------------------------- */ .nug-sidebar { display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; background: var(--nug-surface); border-right: 1px solid var(--nug-line); padding: var(--nug-space-5) 18px; overflow-y: auto; /* Prevent sidebar from shrinking */ flex-shrink: 0; } /* Brand row */ .nug-sidebar-brand { display: flex; align-items: center; gap: 11px; padding: 6px 8px 20px; border-bottom: 1px solid var(--nug-line); margin-bottom: var(--nug-space-4); } .nug-sidebar-mark { flex-shrink: 0; } .nug-sidebar-wordmark { font-family: var(--nug-heading-font); font-weight: 800; font-size: 1.25rem; letter-spacing: -0.02em; color: var(--nug-ink); } /* Nav */ .nug-sidebar-nav { display: flex; flex-direction: column; gap: 3px; } .nug-sidebar-nav-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 13px; border: none; border-radius: 13px; font-family: var(--nug-font); font-weight: 700; font-size: 0.9rem; color: var(--nug-ink-muted); cursor: pointer; text-align: left; background: transparent; transition: background 0.15s, color 0.15s; text-decoration: none; line-height: 1.4; } .nug-sidebar-nav-item:hover { background: var(--nug-panel-blue); color: var(--nug-ink); } .nug-sidebar-nav-item.is-active { background: var(--nug-panel-blue); color: var(--nug-primary); } /* Muted "soon" items — pointer events off so they look decorative */ .nug-sidebar-nav-item--soon { opacity: 0.55; cursor: default; pointer-events: none; } .nug-sidebar-nav-icon { font-size: 1.05rem; width: 22px; text-align: center; flex-shrink: 0; } /* "soon" pill */ .nug-sidebar-soon-pill { margin-left: auto; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--nug-ink-muted); background: var(--nug-line); border-radius: 999px; padding: 2px 7px; } /* Spacer pushes profile to bottom */ .nug-sidebar-spacer { flex: 1; min-height: var(--nug-space-5); } /* Guest profile chip at bottom */ .nug-sidebar-profile { display: flex; align-items: center; gap: 11px; padding: 10px 8px; margin-top: var(--nug-space-3); border-top: 1px solid var(--nug-line); } .nug-sidebar-avatar { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, var(--nug-primary-tint), var(--nug-primary)); flex-shrink: 0; } .nug-sidebar-profile-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .nug-sidebar-profile-name { font-weight: 700; font-size: 0.875rem; color: var(--nug-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nug-sidebar-profile-sub { font-size: 0.75rem; color: var(--nug-ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ---------------------------------------------------------------- 17c. TOP BAR — desktop refinement ---------------------------------------------------------------- */ .nug-top-bar { background: rgba(245, 243, 255, 0.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--nug-line); padding: 16px clamp(20px, 3vw, 40px); } .nug-home-link { font-size: 1rem; font-weight: 800; letter-spacing: -0.01em; } /* ---------------------------------------------------------------- 17d. HOME — 2-column: left path + right rail The home screen becomes a CSS grid. .nug-home-left = column 1 (the learning path) .nug-home-rail = column 2 (sticky right rail) #continue-btn and #quick-review-btn stay inside .nug-home-left in the DOM (JS uses getElementById), so they appear at the top of the path column — exactly where the design places them. ---------------------------------------------------------------- */ #screen-home { display: grid; grid-template-columns: minmax(0, 1fr) 300px; column-gap: clamp(20px, 2.5vw, 32px); row-gap: 0; align-items: start; padding: clamp(20px, 3vw, 36px) clamp(20px, 3vw, 40px); /* Override the flex-direction:column inherited from .nug-screen */ flex-direction: unset; } /* is-hidden must win even on desktop */ #screen-home.is-hidden { display: none !important; } /* Left column: real block again (undo display:contents from base) */ .nug-home-left { display: flex; flex-direction: column; grid-column: 1; grid-row: 1; min-width: 0; } /* Right rail */ .nug-home-rail { display: flex; flex-direction: column; gap: var(--nug-space-4); grid-column: 2; grid-row: 1; position: sticky; top: 80px; align-self: start; } /* Rail cards */ .nug-rail-card { background: var(--nug-surface); border: 1px solid var(--nug-line); border-radius: var(--nug-radius-lg); padding: var(--nug-space-5); box-shadow: var(--nug-shadow-sm); } .nug-rail-label { display: block; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; color: var(--nug-primary); margin: 0 0 var(--nug-space-3); } /* Reassurance card */ .nug-rail-reassurance { display: flex; align-items: flex-start; gap: var(--nug-space-3); background: var(--nug-panel-blue); border-color: var(--nug-panel-blue-border); } .nug-rail-calm-icon { border-radius: var(--nug-radius-sm); flex-shrink: 0; } .nug-rail-reassurance-text { margin: 0; font-size: 0.875rem; line-height: 1.55; color: var(--nug-body-text); } /* Greeting + daily on desktop: a touch larger */ .nug-greeting { font-size: 1.6rem; } .nug-unit-title { font-size: 1.5rem; } /* Lesson node rows — desktop: wider padding + status pill affordance */ .nug-lesson-node { padding: 14px var(--nug-space-5); font-size: 1rem; position: relative; } /* Status pill pseudo-elements (purely visual — the row is the click target) */ .nug-lesson-node.is-available::after { content: "Start →"; font-size: 0.78rem; font-weight: 700; color: var(--nug-primary-ink); background: var(--nug-primary); padding: 5px 13px; border-radius: 999px; flex-shrink: 0; margin-left: var(--nug-space-3); } .nug-lesson-node.is-complete::after { content: "Review"; font-size: 0.78rem; font-weight: 700; color: var(--nug-ink-muted); background: var(--nug-panel-blue-border); padding: 5px 13px; border-radius: 999px; flex-shrink: 0; margin-left: var(--nug-space-3); } .nug-lesson-node.is-locked::after { content: "Locked"; font-size: 0.78rem; font-weight: 700; color: var(--nug-locked); background: var(--nug-locked-bg); padding: 5px 13px; border-radius: 999px; flex-shrink: 0; margin-left: var(--nug-space-3); } /* ---------------------------------------------------------------- 17e. LESSON — centered card, max 680px ---------------------------------------------------------------- */ #screen-lesson { align-items: center; padding: clamp(24px, 4vw, 48px) var(--nug-space-5); } #screen-lesson .nug-lesson-header { width: 100%; max-width: 680px; padding: 0 0 var(--nug-space-3); } #screen-lesson .nug-lesson-progress-wrap { width: 100%; max-width: 680px; padding: 0 0 var(--nug-space-3); } #screen-lesson .nug-item-card { width: 100%; max-width: 680px; margin: 0; border-radius: var(--nug-radius-lg); box-shadow: var(--nug-shadow-md); padding: clamp(24px, 3vw, 40px); } #screen-lesson .nug-feedback { width: 100%; max-width: 680px; margin: var(--nug-space-3) 0 0; } #screen-lesson .nug-reveal-answer { width: 100%; max-width: 680px; margin: var(--nug-space-3) 0 0; } #screen-lesson .nug-lesson-action-area { width: 100%; max-width: 680px; padding: var(--nug-space-4) 0 var(--nug-space-5); } /* ---------------------------------------------------------------- 17f. RESULTS — centered, max 560px ---------------------------------------------------------------- */ #screen-results { align-items: center; padding: clamp(28px, 5vw, 60px) var(--nug-space-5); } #screen-results .nug-results-badge, #screen-results .nug-results-title, #screen-results .nug-results-subtitle, #screen-results .nug-results-stats, #screen-results .nug-results-streak, #screen-results .nug-results-actions { max-width: 560px; width: 100%; } .nug-results-stat { padding: var(--nug-space-5) var(--nug-space-4); } .nug-results-points, .nug-results-total { font-size: 1.75rem; } /* ---------------------------------------------------------------- 17g. ONBOARDING — hide sidebar, go full-width Uses :has() (baseline 2023, all modern browsers). ---------------------------------------------------------------- */ .nug-app:has(#screen-onboarding:not(.is-hidden)) { grid-template-columns: 1fr; } .nug-app:has(#screen-onboarding:not(.is-hidden)) .nug-sidebar { display: none; } .nug-app:has(#screen-onboarding:not(.is-hidden)) #screen-onboarding { max-width: 480px; margin: 0 auto; width: 100%; } } /* end @media (min-width: 980px) */