/* ============================================================================ Neurosmack — Neumorphic UI theme ---------------------------------------------------------------------------- Every rule in this file is scoped under html[data-theme="neumorphic"], so the stylesheet is completely inert unless that attribute is present on . The default theme is therefore never affected by this file. Palette: soft white base with a pastel blue -> pastel orange/coral gradient for accents. Surfaces use the signature neumorphic dual soft-shadow (a light highlight from the top-left and a soft dark shadow to the bottom-right) so elements look gently extruded from (or pressed into) the background. To add a future theme: ship a new scoped stylesheet, whitelist the id in user_service.go (ValidUIThemes), and add a preview card on the account page. ============================================================================ */ /* Premium display + body faces. Bebas Neue drives headlines; Inter stays for body. */ @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@300;400;500;600;700;800&display=swap'); /* ---- 1. Design tokens (override the :root variables from style.css) -------- */ html[data-theme="neumorphic"] { --bg-canvas: #eef1f6; --bg-canvas-2: #e7ecf3; --surface: #eef1f6; --surface-strong: #eef1f6; --surface-soft: #e9edf3; --border-subtle: rgba(163, 177, 198, 0.28); --border-strong: rgba(120, 149, 200, 0.45); --text-primary: #2d3b52; --text-secondary: #43506a; --text-muted: #6b7688; /* Solid, readable accents (used for text/icons). */ --brand-primary: #5b8fd6; --brand-primary-strong: #4a7ec4; --brand-secondary: #e79a80; --brand-warm: #e79a80; --success: #4fae8b; --danger: #e06a6a; --learning-state-track: #4fae8b; --learning-state-soon: #e0a15a; --learning-state-urgent: #e06a6a; --learning-state-empty: #a3b1c6; --radius-lg: 24px; --radius-md: 18px; /* Neumorphic shadow tokens. */ --nm-bg: #eef1f6; --nm-light: #ffffff; --nm-dark: rgba(163, 177, 198, 0.6); --nm-raised: -6px -6px 14px var(--nm-light), 6px 6px 14px var(--nm-dark); --nm-raised-sm: -3px -3px 7px var(--nm-light), 3px 3px 7px var(--nm-dark); --nm-inset: inset -4px -4px 9px var(--nm-light), inset 4px 4px 9px var(--nm-dark); --nm-inset-sm: inset -2px -2px 5px var(--nm-light), inset 2px 2px 5px var(--nm-dark); /* Elevation ramp: neumorphic dual highlight + progressively deeper ambient shadow for real Apple-style depth hierarchy (e1 lowest -> e4 floating). */ --nm-e1: -3px -3px 7px var(--nm-light), 3px 3px 7px var(--nm-dark); --nm-e2: -5px -5px 12px var(--nm-light), 6px 6px 14px var(--nm-dark); --nm-e3: -7px -7px 16px var(--nm-light), 9px 9px 22px var(--nm-dark), 0 18px 40px rgba(46, 59, 82, 0.10); --nm-e4: -9px -9px 20px var(--nm-light), 12px 12px 30px var(--nm-dark), 0 28px 60px rgba(46, 59, 82, 0.16); --nm-contact: 0 1px 2px rgba(46, 59, 82, 0.10); /* Frosted-glass "materials" for floating/overlay surfaces. */ --glass-thin: rgba(238, 241, 246, 0.55); --glass-regular: rgba(238, 241, 246, 0.72); --glass-thick: rgba(238, 241, 246, 0.86); --glass-blur: saturate(180%) blur(20px); --glass-border: rgba(255, 255, 255, 0.55); --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.7); /* Motion tokens. */ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-emph: cubic-bezier(0.22, 1, 0.36, 1); --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); --dur-1: 0.18s; --dur-2: 0.32s; --dur-3: 0.5s; --dur-4: 0.8s; /* Typography. Bebas Neue = condensed display headlines; Inter = body. */ --font-display: 'Bebas Neue', 'Oswald', 'Inter', 'Segoe UI', sans-serif; --tracking-display: 0.015em; --tracking-tight: -0.01em; /* Signature pastel gradient (blue -> coral) for hero surfaces. */ --nm-gradient: linear-gradient(135deg, #a8c8f0 0%, #cbb9e8 45%, #f7b7a3 100%); --nm-gradient-strong: linear-gradient(135deg, #8fb8ec 0%, #f5a98f 100%); --shadow-soft: var(--nm-e2); --shadow-glow: none; color-scheme: light; } /* ---- 2. Base page ---------------------------------------------------------- */ html[data-theme="neumorphic"], html[data-theme="neumorphic"] body { background: var(--nm-bg); color: var(--text-secondary); } html[data-theme="neumorphic"] body { background: radial-gradient(circle at top left, rgba(168, 200, 240, 0.35) 0%, transparent 42%), radial-gradient(circle at 82% 12%, rgba(247, 183, 163, 0.32) 0%, transparent 38%), linear-gradient(180deg, #f2f5fa 0%, #e8edf4 100%); background-attachment: fixed; } /* Animated gradient "mesh" — a slow, subtle drift of soft light blooms that sits behind all content. Fixed + GPU-friendly (transform/opacity only). */ html[data-theme="neumorphic"] body::after { content: ""; position: fixed; inset: -20% -20% -20% -20%; z-index: -1; pointer-events: none; background: radial-gradient(38% 42% at 18% 22%, rgba(143, 184, 236, 0.28) 0%, transparent 60%), radial-gradient(34% 40% at 84% 16%, rgba(245, 169, 143, 0.24) 0%, transparent 60%), radial-gradient(46% 48% at 72% 82%, rgba(203, 185, 232, 0.22) 0%, transparent 62%), radial-gradient(40% 40% at 26% 88%, rgba(120, 200, 190, 0.16) 0%, transparent 60%); background-size: 200% 200%; filter: blur(30px) saturate(120%); opacity: 0.9; will-change: transform; animation: nmMeshDrift 34s ease-in-out infinite alternate; } @keyframes nmMeshDrift { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(1.5%, -1.5%, 0) scale(1.06); } 100% { transform: translate3d(-1.5%, 1%, 0) scale(1.03); } } html[data-theme="neumorphic"] ::selection { background: rgba(168, 200, 240, 0.55); color: var(--text-primary); } html[data-theme="neumorphic"] a { color: var(--brand-primary-strong); } /* Keep focus rings visible and on-brand for light surfaces. */ html[data-theme="neumorphic"] a:focus-visible, html[data-theme="neumorphic"] button:focus-visible, html[data-theme="neumorphic"] input:focus-visible, html[data-theme="neumorphic"] select:focus-visible, html[data-theme="neumorphic"] textarea:focus-visible, html[data-theme="neumorphic"] [role="button"]:focus-visible { outline: 3px solid var(--brand-primary); outline-offset: 2px; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9); } html[data-theme="neumorphic"] .skip-link { background: var(--nm-gradient-strong); color: #2d3b52; } /* ---- 3. Typography --------------------------------------------------------- */ /* Bebas Neue drives all display headlines. It only ships weight 400, so the "bold" presence comes from the condensed heavy caps + tight tracking; we also nudge font-weight for browsers that can synthesize it. */ html[data-theme="neumorphic"] h1, html[data-theme="neumorphic"] h2, html[data-theme="neumorphic"] h3, html[data-theme="neumorphic"] .hero-title, html[data-theme="neumorphic"] .hero-copy h1, html[data-theme="neumorphic"] .display, html[data-theme="neumorphic"] .section-title, html[data-theme="neumorphic"] .curriculum-spotlight-title strong { font-family: var(--font-display); font-weight: 700; letter-spacing: var(--tracking-display); line-height: 0.98; text-transform: uppercase; } html[data-theme="neumorphic"] h1 { color: var(--text-primary); background: none; -webkit-text-fill-color: currentColor; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.85); } html[data-theme="neumorphic"] h2 { color: var(--text-primary); border-bottom-color: rgba(120, 149, 200, 0.28); } /* Body copy, labels, buttons and inputs keep Inter for legibility. */ html[data-theme="neumorphic"] p, html[data-theme="neumorphic"] li, html[data-theme="neumorphic"] label, html[data-theme="neumorphic"] input, html[data-theme="neumorphic"] textarea, html[data-theme="neumorphic"] select, html[data-theme="neumorphic"] button, html[data-theme="neumorphic"] .hero-lead, html[data-theme="neumorphic"] .hero-subtitle { font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif; text-transform: none; letter-spacing: normal; } html[data-theme="neumorphic"] h3, html[data-theme="neumorphic"] h4, html[data-theme="neumorphic"] p, html[data-theme="neumorphic"] label, html[data-theme="neumorphic"] li, html[data-theme="neumorphic"] span { color: inherit; } html[data-theme="neumorphic"] .section-kicker { background: var(--nm-bg); border: none; box-shadow: var(--nm-inset-sm); color: var(--brand-primary-strong); } /* ---- 4. Containers & cards ------------------------------------------------- */ html[data-theme="neumorphic"] .container { background: var(--nm-bg); backdrop-filter: none; border: none; box-shadow: var(--nm-raised); } html[data-theme="neumorphic"] .container::before { display: none; } html[data-theme="neumorphic"] .surface-card, html[data-theme="neumorphic"] .account-card, html[data-theme="neumorphic"] .account-hero, html[data-theme="neumorphic"] .summary-tile, html[data-theme="neumorphic"] .stat-chip, html[data-theme="neumorphic"] .exercise-card, html[data-theme="neumorphic"] .text-source-item, html[data-theme="neumorphic"] .quiz-meta-card, html[data-theme="neumorphic"] .question.question-card, html[data-theme="neumorphic"] .quiz-hero, html[data-theme="neumorphic"] .results-container { background: var(--nm-bg); border: none; box-shadow: var(--nm-e2), var(--glass-highlight); color: var(--text-secondary); transition: box-shadow var(--dur-2) var(--ease-emph), transform var(--dur-2) var(--ease-spring); } html[data-theme="neumorphic"] .exercise-card::before, html[data-theme="neumorphic"] .question.question-card::before, html[data-theme="neumorphic"] .upload-option::before { display: none; } html[data-theme="neumorphic"] .exercise-card:hover, html[data-theme="neumorphic"] .text-source-item:hover { box-shadow: var(--nm-e3), var(--glass-highlight); transform: translateY(-4px); border: none; } html[data-theme="neumorphic"] .exercise-icon { color: var(--brand-primary-strong); } html[data-theme="neumorphic"] .stat-chip strong, html[data-theme="neumorphic"] .text-source-title { color: var(--text-primary); } html[data-theme="neumorphic"] .stat-chip span, html[data-theme="neumorphic"] .text-source-meta { color: var(--text-muted); } /* Upload options behave like pressable tiles. */ html[data-theme="neumorphic"] .upload-option { background: var(--nm-bg); border: none; box-shadow: var(--nm-raised-sm); } html[data-theme="neumorphic"] .upload-option:hover { box-shadow: var(--nm-raised); transform: translateY(-2px); } html[data-theme="neumorphic"] .upload-option h3 { color: var(--text-primary); } /* ---- 5. Buttons ------------------------------------------------------------ */ html[data-theme="neumorphic"] button, html[data-theme="neumorphic"] .btn-primary, html[data-theme="neumorphic"] .btn-secondary, html[data-theme="neumorphic"] .btn-media, html[data-theme="neumorphic"] .hero-btn, html[data-theme="neumorphic"] .submit-btn, html[data-theme="neumorphic"] .new-session-btn, html[data-theme="neumorphic"] .nav-button { background: var(--nm-bg); color: var(--brand-primary-strong); border: none; box-shadow: var(--nm-raised-sm), var(--glass-highlight); transition: box-shadow var(--dur-1) var(--ease-emph), transform var(--dur-1) var(--ease-spring), color var(--dur-1) var(--ease-smooth); position: relative; overflow: hidden; } /* Animated sheen that sweeps across buttons on hover. */ html[data-theme="neumorphic"] button::after, html[data-theme="neumorphic"] .btn-primary::after, html[data-theme="neumorphic"] .hero-btn::after, html[data-theme="neumorphic"] .submit-btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, 0.45) 50%, transparent 80%); transform: translateX(-130%); transition: transform var(--dur-3) var(--ease-emph); pointer-events: none; } html[data-theme="neumorphic"] button:hover::after, html[data-theme="neumorphic"] .btn-primary:hover::after, html[data-theme="neumorphic"] .hero-btn:hover::after, html[data-theme="neumorphic"] .submit-btn:hover::after { transform: translateX(130%); } html[data-theme="neumorphic"] button:hover, html[data-theme="neumorphic"] .btn-primary:hover, html[data-theme="neumorphic"] .btn-secondary:hover, html[data-theme="neumorphic"] .btn-media:hover, html[data-theme="neumorphic"] .hero-btn:hover, html[data-theme="neumorphic"] .submit-btn:hover, html[data-theme="neumorphic"] .new-session-btn:hover, html[data-theme="neumorphic"] .nav-button:hover { box-shadow: var(--nm-e2), var(--glass-highlight); transform: translateY(-2px); } html[data-theme="neumorphic"] button:active, html[data-theme="neumorphic"] .btn-primary:active, html[data-theme="neumorphic"] .btn-secondary:active, html[data-theme="neumorphic"] .hero-btn:active, html[data-theme="neumorphic"] .submit-btn:active, html[data-theme="neumorphic"] .nav-button:active { box-shadow: var(--nm-inset-sm); transform: translateY(0); } /* Primary calls-to-action carry the signature pastel gradient. */ html[data-theme="neumorphic"] .btn-primary, html[data-theme="neumorphic"] .hero-btn-primary, html[data-theme="neumorphic"] .submit-btn { background: var(--nm-gradient-strong); color: #2d3b52; font-weight: 700; } html[data-theme="neumorphic"] button:disabled, html[data-theme="neumorphic"] .submit-btn:disabled, html[data-theme="neumorphic"] .nav-button:disabled { box-shadow: var(--nm-inset-sm); color: var(--text-muted); opacity: 0.7; transform: none; } /* ---- 6. Forms -------------------------------------------------------------- */ html[data-theme="neumorphic"] form { background: transparent; border: none; box-shadow: none; } html[data-theme="neumorphic"] input[type="text"], html[data-theme="neumorphic"] input[type="email"], html[data-theme="neumorphic"] input[type="password"], html[data-theme="neumorphic"] input[type="search"], html[data-theme="neumorphic"] input[type="number"], html[data-theme="neumorphic"] input[type="url"], html[data-theme="neumorphic"] textarea, html[data-theme="neumorphic"] select { background: var(--nm-bg); color: var(--text-primary); border: none; border-radius: 14px; box-shadow: var(--nm-inset); } html[data-theme="neumorphic"] input::placeholder, html[data-theme="neumorphic"] textarea::placeholder { color: var(--text-muted); } html[data-theme="neumorphic"] input:focus, html[data-theme="neumorphic"] textarea:focus, html[data-theme="neumorphic"] select:focus { box-shadow: var(--nm-inset), 0 0 0 2px rgba(120, 149, 200, 0.4); } /* ---- 7. Status / alerts ---------------------------------------------------- */ html[data-theme="neumorphic"] .status, html[data-theme="neumorphic"] .inline-note, html[data-theme="neumorphic"] .password-hint, html[data-theme="neumorphic"] .empty-payments { background: var(--nm-bg); border: none; box-shadow: var(--nm-inset-sm); color: var(--text-secondary); } html[data-theme="neumorphic"] .status.success { color: var(--success); } html[data-theme="neumorphic"] .status.error, html[data-theme="neumorphic"] .password-hint.is-warning { color: var(--danger); } /* ---- 8. Brand header chrome (overrides page_chrome.go inline CSS) ---------- */ html[data-theme="neumorphic"] .brand-header { background: var(--glass-thick); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border-bottom: 1px solid var(--glass-border); box-shadow: 0 6px 20px rgba(163, 177, 198, 0.35), var(--glass-highlight); } html[data-theme="neumorphic"] body::before { background: rgba(238, 241, 246, 0.92); } html[data-theme="neumorphic"] .brand-name { color: var(--text-primary); } html[data-theme="neumorphic"] .brand-tagline { color: var(--text-muted); } html[data-theme="neumorphic"] .brand-beta-pill { background: var(--nm-bg); border: none; box-shadow: var(--nm-raised-sm); color: var(--brand-secondary); } html[data-theme="neumorphic"] .site-language-label { color: var(--text-secondary); } html[data-theme="neumorphic"] .site-language-select { background: var(--nm-bg); color: var(--text-primary); border: none; box-shadow: var(--nm-inset-sm); } html[data-theme="neumorphic"] .site-language-select:focus { border-color: transparent; box-shadow: var(--nm-inset-sm), 0 0 0 2px rgba(120, 149, 200, 0.4); } html[data-theme="neumorphic"] .hdr-nav-link, html[data-theme="neumorphic"] .nav-link { color: var(--text-secondary); background: var(--nm-bg); box-shadow: var(--nm-raised-sm); } html[data-theme="neumorphic"] .hdr-nav-link:hover, html[data-theme="neumorphic"] .nav-link:hover { color: var(--brand-primary-strong); background: var(--nm-bg); box-shadow: var(--nm-raised); } html[data-theme="neumorphic"] .hdr-nav-link.active, html[data-theme="neumorphic"] .nav-link.active { color: var(--brand-primary-strong); background: var(--nm-bg); box-shadow: var(--nm-inset-sm); } html[data-theme="neumorphic"] .brand-header .nav-toggle { border: 1px solid rgba(79, 98, 130, 0.24); background: linear-gradient(145deg, #d4dcea 0%, #c7d1e2 100%); box-shadow: -3px -3px 7px rgba(255, 255, 255, 0.78), 4px 4px 10px rgba(124, 141, 166, 0.62); } html[data-theme="neumorphic"] .brand-header .nav-toggle:hover { background: linear-gradient(145deg, #ced8e8 0%, #c2cde0 100%); box-shadow: -4px -4px 9px rgba(255, 255, 255, 0.8), 5px 5px 12px rgba(116, 134, 160, 0.66); } html[data-theme="neumorphic"] .brand-header .nav-toggle:active { box-shadow: inset -2px -2px 4px rgba(255, 255, 255, 0.7), inset 3px 3px 6px rgba(123, 141, 167, 0.56); } html[data-theme="neumorphic"] .brand-header .nav-toggle span { background: #2f3d54; } html[data-theme="neumorphic"] .profile-menu-button { background: var(--nm-gradient-strong); color: #2d3b52; border: none; box-shadow: var(--nm-raised-sm); } html[data-theme="neumorphic"] .profile-dropdown { background: var(--glass-thick); border: 1px solid var(--glass-border); box-shadow: var(--nm-e3), var(--glass-highlight); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); } html[data-theme="neumorphic"] .profile-dropdown a, html[data-theme="neumorphic"] .profile-dropdown button { color: var(--text-secondary); background: none; } html[data-theme="neumorphic"] .profile-dropdown a:hover, html[data-theme="neumorphic"] .profile-dropdown button:hover { background: rgba(168, 200, 240, 0.22); color: var(--brand-primary-strong); } /* ---- 9. Footer chrome (overrides page_chrome.go inline CSS) ---------------- */ html[data-theme="neumorphic"] .footer-icon-menu { background: var(--glass-thick); border-top: 1px solid var(--glass-border); box-shadow: 0 -6px 20px rgba(163, 177, 198, 0.35), var(--glass-highlight); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); } html[data-theme="neumorphic"] .footer-icon-btn, html[data-theme="neumorphic"] .fab { background: var(--nm-bg); color: var(--brand-primary-strong); border: none; box-shadow: var(--nm-raised-sm); } html[data-theme="neumorphic"] .footer-icon-btn:hover, html[data-theme="neumorphic"] .fab:hover { box-shadow: var(--nm-raised); border: none; transform: translateY(-2px); } html[data-theme="neumorphic"] .fab { background: var(--nm-gradient-strong); color: #2d3b52; } /* ---- 10. Learning-state chips & progress bars ------------------------------ */ html[data-theme="neumorphic"] .learning-state-chip, html[data-theme="neumorphic"] .learning-progress-track, html[data-theme="neumorphic"] .progress-container, html[data-theme="neumorphic"] .progress-bar { background: var(--nm-bg); border: none; box-shadow: var(--nm-inset-sm); } html[data-theme="neumorphic"] .learning-progress-fill, html[data-theme="neumorphic"] .progress-bar::after { box-shadow: none; } html[data-theme="neumorphic"] .progress-bar::after { background: var(--nm-gradient-strong); } /* ---- 11. Modals & overlays (incl. TTS panel) ------------------------------- */ html[data-theme="neumorphic"] .modal { background: rgba(120, 130, 150, 0.32); -webkit-backdrop-filter: saturate(140%) blur(8px); backdrop-filter: saturate(140%) blur(8px); } html[data-theme="neumorphic"] .modal-content { background: var(--glass-thick); border: 1px solid var(--glass-border); box-shadow: var(--nm-e4), var(--glass-highlight); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); } html[data-theme="neumorphic"] .tts-overlay { background: rgba(120, 130, 150, 0.4); backdrop-filter: blur(4px); } html[data-theme="neumorphic"] .tts-panel { background: var(--glass-thick); border: 1px solid var(--glass-border); box-shadow: var(--nm-e4), var(--glass-highlight); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); } html[data-theme="neumorphic"] .tts-close { background: var(--nm-bg); box-shadow: var(--nm-raised-sm); color: var(--text-secondary); } html[data-theme="neumorphic"] .tts-status { color: var(--text-secondary); } html[data-theme="neumorphic"] .tts-status.error { color: var(--danger); } html[data-theme="neumorphic"] .tts-voice-card, html[data-theme="neumorphic"] .tts-estimate-bar, html[data-theme="neumorphic"] .tts-speed-row select { background: var(--nm-bg); border: none; box-shadow: var(--nm-inset-sm); color: var(--text-secondary); } html[data-theme="neumorphic"] .tts-voice-card.selected { box-shadow: var(--nm-inset-sm), 0 0 0 2px rgba(120, 149, 200, 0.45); } /* ---- 12. Tables ------------------------------------------------------------ */ html[data-theme="neumorphic"] table, html[data-theme="neumorphic"] .mini-table { background: var(--nm-bg); border: none; box-shadow: var(--nm-inset-sm); border-radius: 14px; overflow: hidden; } html[data-theme="neumorphic"] th { color: var(--brand-primary-strong); background: transparent; } html[data-theme="neumorphic"] td { color: var(--text-secondary); border-color: rgba(163, 177, 198, 0.25); } /* ---- 13. Speed reader ------------------------------------------------------ */ html[data-theme="neumorphic"] .controls, html[data-theme="neumorphic"] .reading-area, html[data-theme="neumorphic"] .completion-message, html[data-theme="neumorphic"] .text-display, html[data-theme="neumorphic"] .reader-quick-group { background: var(--nm-bg); border: none; box-shadow: var(--nm-raised); color: var(--text-secondary); } html[data-theme="neumorphic"] .controls::before, html[data-theme="neumorphic"] .reading-area::before { display: none; } html[data-theme="neumorphic"] .controls h2, html[data-theme="neumorphic"] .completion-message h3 { color: var(--text-primary); } html[data-theme="neumorphic"] .word { color: var(--text-secondary); } html[data-theme="neumorphic"] .word.highlight { color: var(--brand-primary-strong); } html[data-theme="neumorphic"] .word.completed { color: var(--text-muted); } html[data-theme="neumorphic"] .reader-stepper-btn { background: var(--nm-bg); border: none; box-shadow: var(--nm-raised-sm); color: var(--brand-primary-strong); } /* ---- 14. Quiz -------------------------------------------------------------- */ html[data-theme="neumorphic"] .quiz-back-link, html[data-theme="neumorphic"] .quiz-progress-pill, html[data-theme="neumorphic"] .question-chip { background: var(--nm-bg); border: none; box-shadow: var(--nm-raised-sm); color: var(--brand-primary-strong); } html[data-theme="neumorphic"] .options label { background: var(--nm-bg); border: none; box-shadow: var(--nm-raised-sm); color: var(--text-secondary); } html[data-theme="neumorphic"] .options label:hover { box-shadow: var(--nm-raised); } html[data-theme="neumorphic"] .question h3 { color: var(--text-primary); } html[data-theme="neumorphic"] .score-text, html[data-theme="neumorphic"] .score-total { color: var(--brand-primary-strong); } /* ---- 15. Account page theme picker ----------------------------------------- */ html[data-theme="neumorphic"] .theme-option { background: var(--nm-bg); border: none; box-shadow: var(--nm-raised-sm); color: var(--text-secondary); } html[data-theme="neumorphic"] .theme-option:hover { box-shadow: var(--nm-raised); border: none; } html[data-theme="neumorphic"] .theme-option.selected { box-shadow: var(--nm-inset-sm), 0 0 0 2px rgba(120, 149, 200, 0.45); border: none; } html[data-theme="neumorphic"] .theme-option-name { color: var(--text-primary); } html[data-theme="neumorphic"] .theme-option-desc, html[data-theme="neumorphic"] .theme-status { color: var(--text-muted); } html[data-theme="neumorphic"] .theme-check { background: var(--nm-gradient-strong); color: #2d3b52; } /* ---- 16. Rich motion: scroll-reveal + interaction hooks -------------------- */ /* Elements tagged by premium-motion.js. They start gently offset and settle into place when scrolled into view (staggered via inline transition-delay). */ html[data-theme="neumorphic"] .nm-reveal { opacity: 0; transform: translateY(26px) scale(0.985); transition: opacity var(--dur-3) var(--ease-emph), transform var(--dur-3) var(--ease-spring); will-change: opacity, transform; } html[data-theme="neumorphic"] .nm-reveal.nm-in { opacity: 1; transform: translateY(0) scale(1); } /* Pointer-tilt / magnetic elements get spring easing on their transform. */ html[data-theme="neumorphic"] .nm-tilt, html[data-theme="neumorphic"] .nm-magnetic { transition: transform var(--dur-2) var(--ease-spring), box-shadow var(--dur-2) var(--ease-emph); transform-style: preserve-3d; will-change: transform; } /* Parallax layers translated by JS on scroll. */ html[data-theme="neumorphic"] .nm-parallax { will-change: transform; } /* ---- 17. Motion preferences ------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { html[data-theme="neumorphic"] *, html[data-theme="neumorphic"] *::before, html[data-theme="neumorphic"] *::after { transition: none !important; animation: none !important; } html[data-theme="neumorphic"] body::after { animation: none !important; } html[data-theme="neumorphic"] .nm-reveal { opacity: 1 !important; transform: none !important; } } /* ---- 18. Mind Map — garden & city neumorphic recolor ----------------------- */ /* The mind map page ships its own dark inline CSS (garden green / city navy). These scoped rules re-skin it into the soft light neumorphic vibe. Default theme keeps the original dark canvases because every rule here is under data-theme. */ /* Page shell + chrome */ html[data-theme="neumorphic"] #app, html[data-theme="neumorphic"] #main { background: transparent; } html[data-theme="neumorphic"] #toolbar { background: var(--glass-thick); border-bottom: 1px solid var(--glass-border); box-shadow: 0 6px 18px rgba(163, 177, 198, 0.3), var(--glass-highlight); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); } html[data-theme="neumorphic"] #toolbar h1 { color: var(--text-primary); text-transform: uppercase; font-family: var(--font-display); letter-spacing: var(--tracking-display); } html[data-theme="neumorphic"] #toolbar .subtitle { color: var(--text-muted); } html[data-theme="neumorphic"] #left-panel { background: var(--glass-regular); border-right: 1px solid var(--glass-border); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); } html[data-theme="neumorphic"] #left-panel h3, html[data-theme="neumorphic"] #legend .legend-item { color: var(--text-muted); } html[data-theme="neumorphic"] .tb-btn, html[data-theme="neumorphic"] .theme-control, html[data-theme="neumorphic"] .theme-control select, html[data-theme="neumorphic"] .filter-btn { background: var(--nm-bg); color: var(--text-secondary); border: none; box-shadow: var(--nm-raised-sm); } html[data-theme="neumorphic"] .tb-btn:hover, html[data-theme="neumorphic"] .filter-btn:hover { box-shadow: var(--nm-e2); color: var(--brand-primary-strong); background: var(--nm-bg); } html[data-theme="neumorphic"] .tb-btn.primary, html[data-theme="neumorphic"] .filter-btn.active { background: var(--nm-gradient-strong); color: #2d3b52; border: none; box-shadow: var(--nm-inset-sm); } html[data-theme="neumorphic"] .header-status-pill { background: var(--nm-bg); border: none; box-shadow: var(--nm-inset-sm); } html[data-theme="neumorphic"] .header-status-value { color: var(--text-primary); } /* Garden canvas → soft sage + cream light base */ html[data-theme="neumorphic"] #cy-container { background-color: #e9efe6; background-image: radial-gradient(circle at 18% 22%, rgba(120, 170, 120, 0.14) 0 2px, transparent 3px), radial-gradient(circle at 78% 34%, rgba(150, 190, 150, 0.12) 0 1px, transparent 3px), radial-gradient(circle at 42% 76%, rgba(110, 160, 110, 0.16) 0 2px, transparent 4px), linear-gradient(110deg, rgba(200, 220, 200, 0.4), transparent 38%, rgba(210, 224, 205, 0.36)), repeating-linear-gradient(82deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 9px), linear-gradient(180deg, #eef3ec 0%, #e4ece1 48%, #dde8da 100%); background-size: 90px 90px, 130px 130px, 160px 160px, 100% 100%, 18px 18px, 100% 100%; } /* City canvas → soft platinum + blue light base */ html[data-theme="neumorphic"] #cy-container.theme-city { background-color: #e8ecf3; background-image: linear-gradient(90deg, rgba(120, 140, 175, 0.12) 1px, transparent 1px), linear-gradient(0deg, rgba(120, 140, 175, 0.12) 1px, transparent 1px), radial-gradient(circle at 24% 22%, rgba(143, 184, 236, 0.16), transparent 24%), radial-gradient(circle at 76% 62%, rgba(245, 169, 143, 0.12), transparent 22%), linear-gradient(180deg, #eef1f7 0%, #e7ecf4 52%, #dfe5ef 100%); background-size: 72px 72px, 72px 72px, 100% 100%, 100% 100%, 100% 100%; } /* Overview boards */ html[data-theme="neumorphic"] .class-overview-board { border-color: rgba(120, 160, 120, 0.3); box-shadow: inset 0 0 0 1px rgba(120, 160, 120, 0.18); } html[data-theme="neumorphic"] .theme-city .class-overview-board { border-color: rgba(120, 140, 175, 0.32); box-shadow: inset 0 0 0 1px rgba(120, 140, 175, 0.22); } /* Scenery strokes recolored for light canvases */ html[data-theme="neumorphic"] .garden-path { stroke: #cbb49a; opacity: 0.7; } html[data-theme="neumorphic"] .garden-path-inner { stroke: #f0e6d2; opacity: 0.85; } html[data-theme="neumorphic"] .city-street { stroke: #b7c0cf; opacity: 0.8; } html[data-theme="neumorphic"] .city-lane { stroke: #ffffff; opacity: 0.7; } /* Softer, lighter art drop-shadows */ html[data-theme="neumorphic"] .theme-art { filter: drop-shadow(0 3px 5px rgba(120, 140, 160, 0.4)); } html[data-theme="neumorphic"] .theme-city .theme-art { filter: drop-shadow(0 4px 6px rgba(90, 110, 140, 0.42)); } /* Placed decoration assets (SVG) */ html[data-theme="neumorphic"] .spark-item img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 3px 5px rgba(120, 140, 160, 0.38)); } /* Sparks shop panel + menus */ html[data-theme="neumorphic"] .sparks-panel, html[data-theme="neumorphic"] .spark-item-menu { background: var(--glass-thick); border: 1px solid var(--glass-border); box-shadow: var(--nm-e4), var(--glass-highlight); color: var(--text-secondary); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); } html[data-theme="neumorphic"] .sparks-card, html[data-theme="neumorphic"] .sparks-tabs button, html[data-theme="neumorphic"] .sparks-panel-close, html[data-theme="neumorphic"] .spark-item-menu button { background: var(--nm-bg); border: none; box-shadow: var(--nm-raised-sm); color: var(--text-secondary); } html[data-theme="neumorphic"] .sparks-tabs button.active { background: var(--nm-gradient-strong); color: #2d3b52; box-shadow: var(--nm-inset-sm); } /* ---- 19. Chapter & class learning pages ----------------------------------- */ /* The chapter list, begin, reading, flashcard, evaluation, edit and summary pages (chapter_run_handlers.go) ship their own dark inline CSS. These scoped rules re-skin their page-specific surfaces into the soft light neumorphic look. The dark page-body backdrop is already handled by section 2. */ /* Card / panel containers -> raised neumorphic surfaces */ html[data-theme="neumorphic"] .class-hero, html[data-theme="neumorphic"] .chapter-card, html[data-theme="neumorphic"] .info-card, html[data-theme="neumorphic"] .card, html[data-theme="neumorphic"] .eval-card, html[data-theme="neumorphic"] .summary-card, html[data-theme="neumorphic"] .chapter-media-card, html[data-theme="neumorphic"] .idea-card, html[data-theme="neumorphic"] .hero-stat-card, html[data-theme="neumorphic"] .empty-card { background: var(--nm-bg); border: 1px solid var(--border-subtle); box-shadow: var(--nm-e2); color: var(--text-secondary); } html[data-theme="neumorphic"] .class-hero { background: var(--nm-bg) !important; background-image: none !important; } html[data-theme="neumorphic"] .class-hero::after { display: none; } /* Generating / status banner */ html[data-theme="neumorphic"] .gen-banner { background: var(--nm-bg); border: 1px solid var(--border-subtle); box-shadow: var(--nm-inset-sm); } html[data-theme="neumorphic"] .gen-banner-failed { border-color: rgba(224, 106, 106, 0.4); } /* Headings / titles -> primary ink */ html[data-theme="neumorphic"] .page-title, html[data-theme="neumorphic"] .chapter-title, html[data-theme="neumorphic"] .starting-line, html[data-theme="neumorphic"] .flashcard-title, html[data-theme="neumorphic"] .eval-label, html[data-theme="neumorphic"] .reward-title, html[data-theme="neumorphic"] .chapter-media-title, html[data-theme="neumorphic"] .idea-title, html[data-theme="neumorphic"] .glossary-term, html[data-theme="neumorphic"] .glossary-modal-title, html[data-theme="neumorphic"] .class-settings-title, html[data-theme="neumorphic"] .chapters-section-label, html[data-theme="neumorphic"] .chapter-source-card strong, html[data-theme="neumorphic"] .hero-stat-card strong, html[data-theme="neumorphic"] .eval-card h1, html[data-theme="neumorphic"] .summary-card h1, html[data-theme="neumorphic"] .summary-card h2, html[data-theme="neumorphic"] .info-card h1, html[data-theme="neumorphic"] .top-row h1, html[data-theme="neumorphic"] .card h1 { color: var(--text-primary); } /* Secondary / meta text -> muted ink */ html[data-theme="neumorphic"] .page-subtitle, html[data-theme="neumorphic"] .chapter-meta, html[data-theme="neumorphic"] .chapter-summary, html[data-theme="neumorphic"] .caption-meta, html[data-theme="neumorphic"] .caption-reason, html[data-theme="neumorphic"] .chapter-progress-label, html[data-theme="neumorphic"] .loading-note, html[data-theme="neumorphic"] .progress-note, html[data-theme="neumorphic"] .reward-subtitle, html[data-theme="neumorphic"] .chapter-media-desc, html[data-theme="neumorphic"] .chapter-caption-meta, html[data-theme="neumorphic"] .chapter-caption-reason, html[data-theme="neumorphic"] .idea-text, html[data-theme="neumorphic"] .empty-card, html[data-theme="neumorphic"] .gen-banner-msg, html[data-theme="neumorphic"] .chapter-image-empty, html[data-theme="neumorphic"] .idea-images-empty, html[data-theme="neumorphic"] .class-setting-group label, html[data-theme="neumorphic"] .class-settings-status, html[data-theme="neumorphic"] .chapter-source-card span, html[data-theme="neumorphic"] .eval-card p, html[data-theme="neumorphic"] .card p, html[data-theme="neumorphic"] .info-card p { color: var(--text-muted); } /* Accent labels -> readable brand blue on light surfaces */ html[data-theme="neumorphic"] .gen-banner-title, html[data-theme="neumorphic"] .hero-stat-card span, html[data-theme="neumorphic"] .idea-images-loading { color: var(--brand-primary-strong); } /* Inputs / textareas -> light inset fields */ html[data-theme="neumorphic"] .eval-card textarea, html[data-theme="neumorphic"] .fill-blank-input, html[data-theme="neumorphic"] .class-settings-text-input, html[data-theme="neumorphic"] .chapter-image-input, html[data-theme="neumorphic"] .idea-edit-textarea, html[data-theme="neumorphic"] .idea-insert-textarea, html[data-theme="neumorphic"] .chapter-title-edit input { background: var(--nm-bg); border: 1px solid var(--border-subtle); box-shadow: var(--nm-inset-sm); color: var(--text-primary); } /* MCQ options + selectable source cards */ html[data-theme="neumorphic"] .mcq-option, html[data-theme="neumorphic"] .chapter-source-card, html[data-theme="neumorphic"] .chapter-source-panel { background: var(--nm-bg); border: 1px solid var(--border-subtle); box-shadow: var(--nm-raised-sm); color: var(--text-secondary); } html[data-theme="neumorphic"] .mcq-option:hover, html[data-theme="neumorphic"] .chapter-source-card.active { border-color: var(--brand-primary); box-shadow: var(--nm-e2); } /* Result banners -> readable ink on tinted surfaces */ html[data-theme="neumorphic"] .result.correct { color: #216e4e; } html[data-theme="neumorphic"] .result.incorrect { color: #b42318; } html[data-theme="neumorphic"] .saved-note { color: var(--success); } html[data-theme="neumorphic"] .image-saved-note { color: var(--brand-primary-strong); } /* Overlays / modals / dropdown menus -> frosted light panels */ html[data-theme="neumorphic"] .class-settings-panel, html[data-theme="neumorphic"] .chapter-add-panel, html[data-theme="neumorphic"] .idea-modal, html[data-theme="neumorphic"] .glossary-modal-card, html[data-theme="neumorphic"] .tools-dropdown-menu { background: var(--glass-thick); border: 1px solid var(--glass-border); box-shadow: var(--nm-e4), var(--glass-highlight); color: var(--text-secondary); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); } html[data-theme="neumorphic"] .tools-dropdown-menu a, html[data-theme="neumorphic"] .tools-dropdown-menu button.menu-item { color: var(--text-secondary); } html[data-theme="neumorphic"] .tools-dropdown-menu a:hover, html[data-theme="neumorphic"] .tools-dropdown-menu button.menu-item:hover { background: rgba(168, 200, 240, 0.18); color: var(--brand-primary-strong); } /* Add-chapter/class-creation overlays use light glass panels in this theme. */ html[data-theme="neumorphic"] #addChapterOverlay .chapter-source-panel, html[data-theme="neumorphic"] #addChapterOverlay .chapter-source-card, html[data-theme="neumorphic"] #addClassModal [data-guided-source-card], html[data-theme="neumorphic"] #addClassModal #guidedOwnSourceSection, html[data-theme="neumorphic"] #addClassModal #guidedAISourceSection, html[data-theme="neumorphic"] #addClassModal #guidedYouTubeSection, html[data-theme="neumorphic"] #addTextSourceModal .source-method-card, html[data-theme="neumorphic"] #addTextSourceModal .source-form-panel { background: var(--nm-bg) !important; border-color: var(--border-subtle) !important; box-shadow: var(--nm-raised-sm); color: var(--text-secondary) !important; } html[data-theme="neumorphic"] #addChapterOverlay .chapter-source-panel, html[data-theme="neumorphic"] #addChapterOverlay .chapter-source-panel p, html[data-theme="neumorphic"] #addChapterOverlay .chapter-source-panel div, html[data-theme="neumorphic"] #addChapterOverlay .chapter-source-panel label, html[data-theme="neumorphic"] #addChapterOverlay .chapter-source-panel span, html[data-theme="neumorphic"] #addChapterOverlay .chapter-upload-choice, html[data-theme="neumorphic"] #addChapterOverlay .chapter-upload-choice label, html[data-theme="neumorphic"] #addClassModal [data-guided-source-card], html[data-theme="neumorphic"] #addClassModal [data-guided-source-card] span, html[data-theme="neumorphic"] #addClassModal #guidedOwnSourceSection, html[data-theme="neumorphic"] #addClassModal #guidedOwnSourceSection p, html[data-theme="neumorphic"] #addClassModal #guidedOwnSourceSection label, html[data-theme="neumorphic"] #addClassModal #guidedAISourceSection, html[data-theme="neumorphic"] #addClassModal #guidedAISourceSection div, html[data-theme="neumorphic"] #addClassModal #guidedAISourceSection label, html[data-theme="neumorphic"] #addClassModal #guidedYouTubeSection, html[data-theme="neumorphic"] #addClassModal #guidedYouTubeSection div, html[data-theme="neumorphic"] #addClassModal #guidedYouTubeSection label, html[data-theme="neumorphic"] #addTextSourceModal .source-method-card, html[data-theme="neumorphic"] #addTextSourceModal .source-method-card span, html[data-theme="neumorphic"] #addTextSourceModal .source-form-panel, html[data-theme="neumorphic"] #addTextSourceModal .source-form-panel p, html[data-theme="neumorphic"] #addTextSourceModal .source-form-panel label, html[data-theme="neumorphic"] #addTextSourceModal .source-form-panel span, html[data-theme="neumorphic"] #addTextSourceModal .modal-subtitle, html[data-theme="neumorphic"] #addTextSourceModal .status-card-copy { color: var(--text-secondary) !important; } html[data-theme="neumorphic"] #addChapterOverlay .chapter-source-panel strong, html[data-theme="neumorphic"] #addChapterOverlay .chapter-source-panel > div:first-child, html[data-theme="neumorphic"] #addChapterOverlay .chapter-source-card strong, html[data-theme="neumorphic"] #addClassModal [data-guided-source-card] strong, html[data-theme="neumorphic"] #addClassModal #guidedOwnSourceSection > div:first-child, html[data-theme="neumorphic"] #addClassModal #guidedAISourceSection strong, html[data-theme="neumorphic"] #addClassModal #guidedYouTubeSection strong, html[data-theme="neumorphic"] #addTextSourceModal .source-method-card strong, html[data-theme="neumorphic"] #addTextSourceModal .source-form-panel strong { color: var(--text-primary) !important; } /* Note Taker recording overlay inside Add Text Source modal */ html[data-theme="neumorphic"] #addTextSourceModal .note-taker-recording-overlay { background: rgba(46, 59, 82, 0.32); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); } html[data-theme="neumorphic"] #addTextSourceModal .note-taker-recording-panel { background: var(--glass-thick); border: 1px solid var(--glass-border); box-shadow: var(--nm-e4), var(--glass-highlight); color: var(--text-secondary); } html[data-theme="neumorphic"] #addTextSourceModal .note-taker-recording-title, html[data-theme="neumorphic"] #addTextSourceModal .note-taker-recording-timer { color: var(--text-primary); } html[data-theme="neumorphic"] #addTextSourceModal .note-taker-mic-sensitivity { background: var(--nm-bg); border-color: var(--border-subtle); box-shadow: var(--nm-raised-sm); } html[data-theme="neumorphic"] #addTextSourceModal .note-taker-mic-sensitivity-header { color: var(--text-secondary); } html[data-theme="neumorphic"] #addTextSourceModal .note-taker-mic-sensitivity-value { color: var(--brand-primary-strong); } html[data-theme="neumorphic"] #addTextSourceModal .note-taker-mic-sensitivity-scale { color: var(--text-muted); } html[data-theme="neumorphic"] #addTextSourceModal .note-taker-sound-meter span { background: linear-gradient(180deg, #a8c8f0 0%, #7eb8ff 100%); } html[data-theme="neumorphic"] #addTextSourceModal #noteTakerBillingInfo, html[data-theme="neumorphic"] #addTextSourceModal #noteTakerEstimateInfo, html[data-theme="neumorphic"] #addTextSourceModal #noteTakerStatus { color: var(--text-secondary) !important; } /* Backdrop scrims -> softer, on-brand tint */ html[data-theme="neumorphic"] .idea-overlay, html[data-theme="neumorphic"] .glossary-modal, html[data-theme="neumorphic"] .class-settings-overlay, html[data-theme="neumorphic"] .chapter-add-overlay { background: rgba(46, 59, 82, 0.32); } /* Buttons declared inline on these pages */ html[data-theme="neumorphic"] .btn-secondary, html[data-theme="neumorphic"] .action-btn.secondary, html[data-theme="neumorphic"] .tools-dropdown-btn { background: var(--nm-bg); color: var(--text-secondary); border: none; box-shadow: var(--nm-raised-sm); } html[data-theme="neumorphic"] .btn-secondary:hover, html[data-theme="neumorphic"] .action-btn.secondary:hover, html[data-theme="neumorphic"] .tools-dropdown-btn:hover { box-shadow: var(--nm-e2); color: var(--brand-primary-strong); background: var(--nm-bg); } html[data-theme="neumorphic"] .btn-primary, html[data-theme="neumorphic"] .action-btn.primary { background: var(--nm-gradient-strong); color: #2d3b52; border: none; box-shadow: var(--nm-raised-sm); } /* Summary table */ html[data-theme="neumorphic"] .summary-card th, html[data-theme="neumorphic"] .summary-card td { color: var(--text-secondary); border-bottom: 1px solid var(--border-subtle); } html[data-theme="neumorphic"] .summary-card th { color: var(--text-primary); } /* ---- 20. Interactive Session + Curriculum Spotlight ----------------------- */ /* Interactive learning session: dark card surfaces -> neumorphic light cards */ html[data-theme="neumorphic"] .page-shell .lesson-hero, html[data-theme="neumorphic"] .page-shell .panel, html[data-theme="neumorphic"] .page-shell .stat, html[data-theme="neumorphic"] .page-shell .option, html[data-theme="neumorphic"] .page-shell .glossary-item, html[data-theme="neumorphic"] .page-shell .sequence-item, html[data-theme="neumorphic"] .page-shell .feedback, html[data-theme="neumorphic"] .page-shell .song-mode-card, html[data-theme="neumorphic"] .page-shell .song-visual, html[data-theme="neumorphic"] .page-shell .song-audio-shell, html[data-theme="neumorphic"] .page-shell .song-memory-callout, html[data-theme="neumorphic"] .page-shell .song-line, html[data-theme="neumorphic"] .page-shell .chapter-end-sequence-shell, html[data-theme="neumorphic"] .page-shell .chapter-end-sequence-card, html[data-theme="neumorphic"] .page-shell .chapter-end-sequence-panel, html[data-theme="neumorphic"] .page-shell .chapter-end-sequence-item, html[data-theme="neumorphic"] .page-shell .chunk-player, html[data-theme="neumorphic"] .page-shell .paced-read-control, html[data-theme="neumorphic"] .page-shell .admin-session-panel, html[data-theme="neumorphic"] .page-shell .admin-multiselect, html[data-theme="neumorphic"] .page-shell .deck-picker-popover { background: var(--nm-bg); border: 1px solid var(--border-subtle); box-shadow: var(--nm-e2); color: var(--text-secondary); } html[data-theme="neumorphic"] .page-shell .lesson-hero-copy h1, html[data-theme="neumorphic"] .page-shell .reward-title, html[data-theme="neumorphic"] .page-shell .chapter-end-sequence-head h3, html[data-theme="neumorphic"] .page-shell .chapter-end-sequence-item strong, html[data-theme="neumorphic"] .page-shell .glossary-item strong, html[data-theme="neumorphic"] .page-shell .chunk-word, html[data-theme="neumorphic"] .page-shell .stat-value { color: var(--text-primary); } html[data-theme="neumorphic"] .page-shell .lesson-hero-copy p, html[data-theme="neumorphic"] .page-shell .small-note, html[data-theme="neumorphic"] .page-shell .loading, html[data-theme="neumorphic"] .page-shell .feedback, html[data-theme="neumorphic"] .page-shell .reward-subtitle, html[data-theme="neumorphic"] .page-shell .chapter-end-sequence-head p, html[data-theme="neumorphic"] .page-shell .chapter-end-sequence-footnote, html[data-theme="neumorphic"] .page-shell .chapter-end-sequence-status, html[data-theme="neumorphic"] .page-shell .song-summary, html[data-theme="neumorphic"] .page-shell .song-line, html[data-theme="neumorphic"] .page-shell .song-memory-callout, html[data-theme="neumorphic"] .page-shell .idea-text { color: var(--text-muted); } html[data-theme="neumorphic"] .page-shell .stat-label, html[data-theme="neumorphic"] .page-shell .paced-read-control-label, html[data-theme="neumorphic"] .page-shell .kicker, html[data-theme="neumorphic"] .page-shell .tag, html[data-theme="neumorphic"] .page-shell .display-timer-inline, html[data-theme="neumorphic"] .page-shell .chapter-end-sequence-step-label { color: var(--brand-primary-strong); } html[data-theme="neumorphic"] .page-shell textarea, html[data-theme="neumorphic"] .page-shell input[type="text"], html[data-theme="neumorphic"] .page-shell .paced-read-value { background: var(--nm-bg); border: 1px solid var(--border-subtle); box-shadow: var(--nm-inset-sm); color: var(--text-primary); } html[data-theme="neumorphic"] .page-shell .btn-secondary, html[data-theme="neumorphic"] .page-shell .btn-ghost, html[data-theme="neumorphic"] .page-shell .song-control-btn, html[data-theme="neumorphic"] .page-shell .save-deck-btn, html[data-theme="neumorphic"] .page-shell .admin-multiselect-toolbar button { background: var(--nm-bg); color: var(--text-secondary); border: none; box-shadow: var(--nm-raised-sm); } html[data-theme="neumorphic"] .page-shell .btn-primary, html[data-theme="neumorphic"] .page-shell .song-control-btn.primary { background: var(--nm-gradient-strong); color: #2d3b52; border: none; box-shadow: var(--nm-raised-sm); } /* Curriculum manager: make class-level progress summary a darker blue */ html[data-theme="neumorphic"] .curriculum-class-level-summary { color: #2f5f9c !important; } /* Curriculum spotlight overlay title/welcome text should be dark on light theme */ html[data-theme="neumorphic"] .curriculum-spotlight-title, html[data-theme="neumorphic"] .curriculum-spotlight-title strong { color: #111827 !important; text-shadow: none !important; } html[data-theme="neumorphic"] .curriculum-spotlight-title span { color: #1f3f73 !important; text-shadow: none !important; } /* ---- 21. Site-wide contrast guardrails ------------------------------------ */ /* Page templates still contain inline dark-theme fragments. In neumorphic mode, light glass/neumorphic surfaces must carry dark ink, while any intentionally dark fragments that remain must carry light ink. */ html[data-theme="neumorphic"] .modal-content, html[data-theme="neumorphic"] .modal-content *, html[data-theme="neumorphic"] .profile-dropdown, html[data-theme="neumorphic"] .profile-dropdown *, html[data-theme="neumorphic"] .footer-icon-menu, html[data-theme="neumorphic"] .footer-icon-menu *, html[data-theme="neumorphic"] .tts-panel, html[data-theme="neumorphic"] .tts-panel *, html[data-theme="neumorphic"] .ai-credit-panel, html[data-theme="neumorphic"] .ai-credit-panel *, html[data-theme="neumorphic"] .class-settings-panel, html[data-theme="neumorphic"] .class-settings-panel *, html[data-theme="neumorphic"] .chapter-add-panel, html[data-theme="neumorphic"] .chapter-add-panel *, html[data-theme="neumorphic"] .glossary-modal-card, html[data-theme="neumorphic"] .glossary-modal-card *, html[data-theme="neumorphic"] .tools-dropdown-menu, html[data-theme="neumorphic"] .tools-dropdown-menu *, html[data-theme="neumorphic"] .sparks-panel, html[data-theme="neumorphic"] .sparks-panel *, html[data-theme="neumorphic"] .spark-item-menu, html[data-theme="neumorphic"] .spark-item-menu * { color: var(--text-secondary); } html[data-theme="neumorphic"] .modal-content h1, html[data-theme="neumorphic"] .modal-content h2, html[data-theme="neumorphic"] .modal-content h3, html[data-theme="neumorphic"] .modal-content h4, html[data-theme="neumorphic"] .modal-content strong, html[data-theme="neumorphic"] .profile-dropdown strong, html[data-theme="neumorphic"] .footer-icon-menu strong, html[data-theme="neumorphic"] .tts-panel strong, html[data-theme="neumorphic"] .ai-credit-panel strong, html[data-theme="neumorphic"] .class-settings-panel h1, html[data-theme="neumorphic"] .class-settings-panel h2, html[data-theme="neumorphic"] .class-settings-panel h3, html[data-theme="neumorphic"] .class-settings-panel h4, html[data-theme="neumorphic"] .class-settings-panel strong, html[data-theme="neumorphic"] .chapter-add-panel h1, html[data-theme="neumorphic"] .chapter-add-panel h2, html[data-theme="neumorphic"] .chapter-add-panel h3, html[data-theme="neumorphic"] .chapter-add-panel h4, html[data-theme="neumorphic"] .chapter-add-panel strong, html[data-theme="neumorphic"] .glossary-modal-card h1, html[data-theme="neumorphic"] .glossary-modal-card h2, html[data-theme="neumorphic"] .glossary-modal-card h3, html[data-theme="neumorphic"] .glossary-modal-card h4, html[data-theme="neumorphic"] .glossary-modal-card strong, html[data-theme="neumorphic"] .tools-dropdown-menu strong, html[data-theme="neumorphic"] .sparks-panel h1, html[data-theme="neumorphic"] .sparks-panel h2, html[data-theme="neumorphic"] .sparks-panel h3, html[data-theme="neumorphic"] .sparks-panel h4, html[data-theme="neumorphic"] .sparks-panel strong { color: var(--text-primary); } html[data-theme="neumorphic"] :is([style*="background:#f" i], [style*="background: #f" i], [style*="background-color:#f" i], [style*="background-color: #f" i], [style*="background:#e" i], [style*="background: #e" i], [style*="background-color:#e" i], [style*="background-color: #e" i], [style*="background:#fff" i], [style*="background: #fff" i]) { color: var(--text-secondary) !important; } html[data-theme="neumorphic"] :is([style*="background:#f" i], [style*="background: #f" i], [style*="background-color:#f" i], [style*="background-color: #f" i], [style*="background:#e" i], [style*="background: #e" i], [style*="background-color:#e" i], [style*="background-color: #e" i], [style*="background:#fff" i], [style*="background: #fff" i]) :is(h1, h2, h3, h4, strong, b) { color: var(--text-primary) !important; } html[data-theme="neumorphic"] :is([style*="background:#0" i], [style*="background: #0" i], [style*="background-color:#0" i], [style*="background-color: #0" i], [style*="background:#1" i], [style*="background: #1" i], [style*="background-color:#1" i], [style*="background-color: #1" i], [style*="background:rgba(2," i], [style*="background: rgba(2," i], [style*="background:rgba(3," i], [style*="background: rgba(3," i], [style*="background:rgba(4," i], [style*="background: rgba(4," i], [style*="background:rgba(5," i], [style*="background: rgba(5," i], [style*="background:rgba(6," i], [style*="background: rgba(6," i], [style*="background:rgba(7," i], [style*="background: rgba(7," i], [style*="background:rgba(8," i], [style*="background: rgba(8," i], [style*="background:rgba(9," i], [style*="background: rgba(9," i], [style*="background:rgba(10," i], [style*="background: rgba(10," i], [style*="background:rgba(11," i], [style*="background: rgba(11," i], [style*="background:rgba(12," i], [style*="background: rgba(12," i], [style*="background:rgba(13," i], [style*="background: rgba(13," i], [style*="background:rgba(14," i], [style*="background: rgba(14," i], [style*="background:rgba(15," i], [style*="background: rgba(15," i]) { color: #f8fafc !important; } html[data-theme="neumorphic"] :is([style*="background:#0" i], [style*="background: #0" i], [style*="background-color:#0" i], [style*="background-color: #0" i], [style*="background:#1" i], [style*="background: #1" i], [style*="background-color:#1" i], [style*="background-color: #1" i], [style*="background:rgba(2," i], [style*="background: rgba(2," i], [style*="background:rgba(3," i], [style*="background: rgba(3," i], [style*="background:rgba(4," i], [style*="background: rgba(4," i], [style*="background:rgba(5," i], [style*="background: rgba(5," i], [style*="background:rgba(6," i], [style*="background: rgba(6," i], [style*="background:rgba(7," i], [style*="background: rgba(7," i], [style*="background:rgba(8," i], [style*="background: rgba(8," i], [style*="background:rgba(9," i], [style*="background: rgba(9," i], [style*="background:rgba(10," i], [style*="background: rgba(10," i], [style*="background:rgba(11," i], [style*="background: rgba(11," i], [style*="background:rgba(12," i], [style*="background: rgba(12," i], [style*="background:rgba(13," i], [style*="background: rgba(13," i], [style*="background:rgba(14," i], [style*="background: rgba(14," i], [style*="background:rgba(15," i], [style*="background: rgba(15," i]) :is(h1, h2, h3, h4, p, li, label, span, strong, small, div, td, th) { color: #f8fafc !important; } html[data-theme="neumorphic"] :is([style*="background:#0" i], [style*="background: #0" i], [style*="background-color:#0" i], [style*="background-color: #0" i], [style*="background:#1" i], [style*="background: #1" i], [style*="background-color:#1" i], [style*="background-color: #1" i], [style*="background:rgba(2," i], [style*="background: rgba(2," i], [style*="background:rgba(3," i], [style*="background: rgba(3," i], [style*="background:rgba(4," i], [style*="background: rgba(4," i], [style*="background:rgba(5," i], [style*="background: rgba(5," i], [style*="background:rgba(6," i], [style*="background: rgba(6," i], [style*="background:rgba(7," i], [style*="background: rgba(7," i], [style*="background:rgba(8," i], [style*="background: rgba(8," i], [style*="background:rgba(9," i], [style*="background: rgba(9," i], [style*="background:rgba(10," i], [style*="background: rgba(10," i], [style*="background:rgba(11," i], [style*="background: rgba(11," i], [style*="background:rgba(12," i], [style*="background: rgba(12," i], [style*="background:rgba(13," i], [style*="background: rgba(13," i], [style*="background:rgba(14," i], [style*="background: rgba(14," i], [style*="background:rgba(15," i], [style*="background: rgba(15," i]) :is(input, textarea, select) { background: #020617 !important; color: #f8fafc !important; }