/* theory-bridge.css — unifies the imported Music Theory lessons with the Mazmazika cosmic look. The lessons now load the shared cosmic shell (css/cosmic-shell.css + js/cosmic-shell.js), which owns the theme tokens (--bg/--ink/--accent/--surface/--cta/…, set inline on per the chosen color theme + appearance), the animated cosmic background (.cosmic-bg), the vertical rail and the Tweaks panel — identical to every other page. This file's job is now only to (1) MAP the imported design-system tokens (--card-bg, --text-primary, …) onto those live cosmic tokens so the lessons' existing markup re-themes with the color theme, and (2) style the lesson-only chrome that the shell does not provide: hero, lesson nav stepper/pager, the 80%-width body column, buttons and footer. The lessons keep their own inline styles + interactive scripts, so every widget works exactly as built. */ :root { /* Pre-JS fallbacks (cosmic nebula-dark). js/cosmic-shell.js overrides these inline on for the selected theme before first paint, so they only show if the shell script fails to run. */ --bg: #080611; --bg2: #160a2e; --bg3: #0c1640; --ink: #f3efff; --sub: #a99fce; --line: rgba(255,255,255,.10); --accent: #a35bff; --accent2: #4f7cff; --glow: #7c5cff; --line-strong: rgba(255,255,255,.17); --surface: color-mix(in srgb, #0c1640 88%, transparent); --cta: linear-gradient(135deg, #4f7cff, #a35bff); --font-body: 'Geist', system-ui, sans-serif; --font-display: 'Instrument Serif', Georgia, serif; /* ── map the imported design-system tokens onto the LIVE cosmic tokens, so the lesson content follows the selected color theme + appearance ── */ --primary-bg: var(--bg); --secondary-bg: var(--bg2); --card-bg: var(--surface); --border-color: var(--line); --border-radius: 12px; --border-radius-large: 18px; --shadow-small: 0 10px 26px -16px rgba(0,0,0,.6); --shadow-medium: 0 18px 44px -24px rgba(0,0,0,.66); --shadow-heavy: 0 30px 70px -30px rgba(0,0,0,.8); --text-primary: var(--ink); --text-secondary: var(--sub); --gradient-primary: var(--cta); --accent-blue: #6aa6ff; --accent-green: #34d36e; --accent-purple: var(--accent); --transition-fast: .18s ease; --transition-smooth: .28s ease; --error-color: #ff6b6b; } * { box-sizing: border-box; } html, body { margin: 0; min-height: 100%; } body { color: var(--ink); font-family: var(--font-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; } /* Content sits above the shell's fixed .cosmic-bg. */ .app-container { position: relative; z-index: 1; } /* Vertical rail, cosmic background, top header + Tweaks panel → shared cosmic shell (css/cosmic-shell.css + js/cosmic-shell.js). Do NOT redeclare them here. */ /* ── Content shell: rail gutter + 80% body ──────────────────────────────── */ /* Canonical VR shell: one centered 1080 border-box column (rail gutter 92 + 24). All blocks below are full-width within it so the rail / mini-menu / hero / footer land at the SAME coordinates as every other page (Δ0 vs vr.php). */ .main-content { position: relative; z-index: 1; box-sizing: border-box; max-width: 1080px; margin: 0 auto; padding: 22px 24px 0 92px; } .lesson-container { width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 0 80px !important; } /* ── Hero ────────────────────────────────────────────────────────────────── */ .mt-hero { max-width: 760px; margin: 18px auto 36px; text-align: center; padding: 0; display: flex; flex-direction: column; align-items: center; } .mt-hero .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); padding: 6px 13px; border-radius: 999px; margin-bottom: 16px; } .mt-hero .eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); } .mt-hero h1 { margin: 0 0 12px; font-family: var(--font-body); font-size: clamp(30px, 4.6vw, 48px); line-height: 1.08; letter-spacing: -.03em; font-weight: 600; color: var(--ink); text-wrap: balance; } .mt-hero h1 em { font-family: var(--font-display); font-style: italic; font-weight: 400; color: var(--accent); } .mt-hero p { margin: 0 auto; max-width: 600px; color: var(--sub); font-family: var(--font-body); font-size: 16px; line-height: 1.55; text-wrap: pretty; } /* ── Lesson nav buttons (imported markup uses .btn / .btn-primary) ───────── */ .btn { appearance: none; cursor: pointer; font-family: var(--font-body); font-weight: 600; font-size: 14px; padding: 0.55rem 1rem; border-radius: 11px; border: 1px solid var(--line-strong); background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink); transition: .15s ease; } .btn:hover:not(:disabled) { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); transform: translateY(-1px); } .btn:disabled { opacity: .42; cursor: not-allowed; } .btn-primary { border: 0; color: var(--accent-ink, #fff); background: var(--gradient-primary); box-shadow: 0 12px 30px -14px color-mix(in srgb, var(--accent) 70%, transparent); } .btn-primary:hover:not(:disabled) { filter: brightness(1.06); transform: translateY(-1px); } /* ── Back-to-course link ─────────────────────────────────────────────────── */ .mt-back { width: min(80%, 1060px); margin: 6px auto 0; padding: 0 24px; display: block; } .mt-back a { display: inline-flex; align-items: center; gap: 7px; color: var(--sub); text-decoration: none; font-family: var(--font-body); font-size: 13.5px; font-weight: 600; padding: 7px 12px; border-radius: 10px; transition: .15s ease; } .mt-back a:hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); } /* ── Responsive ──────────────────────────────────────────────────────────── */ @media (max-width: 1100px) { .mt-hero, .mt-back { width: auto; } .lesson-container { width: auto !important; } .main-content { padding-left: 84px; } } @media (max-width: 720px) { /* rail mobile behaviour lives in cosmic-rail.css */ .main-content { padding-left: 64px; } .lesson-container { padding: 0 14px 64px !important; } } /* ── Cross-lesson navigation (php/lesson-nav.php): top 1–8 stepper + bottom Prev/Next pager. Per-lesson hue (--h, set inline) mirrors the hub cards. ── */ .lesson-nav { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; width: auto; margin: 0 0 24px; } .lesson-nav__all { display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; font-family: var(--font-body); font-size: 13px; font-weight: 600; text-decoration: none; color: var(--sub); padding: 8px 13px; border-radius: 999px; border: 1px solid var(--line-strong); background: color-mix(in srgb, var(--surface) 70%, transparent); transition: color .16s ease, border-color .16s ease; } .lesson-nav__all:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); } .lesson-nav__all svg { flex-shrink: 0; } .lesson-nav__steps { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; } .lesson-nav__step { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; text-decoration: none; font-family: var(--font-body); font-weight: 700; font-size: 14px; color: var(--sub); background: color-mix(in srgb, var(--surface) 70%, transparent); border: 1px solid var(--line); transition: transform .14s ease, color .16s ease, border-color .16s ease, box-shadow .16s ease; } .lesson-nav__step:hover { transform: translateY(-1px); color: var(--ink); border-color: hsl(var(--h) 70% 62% / .65); box-shadow: 0 6px 16px -8px hsl(var(--h) 65% 55% / .6); } .lesson-nav__step.is-current { color: #fff; border-color: transparent; cursor: default; background: linear-gradient(135deg, hsl(var(--h) 60% 52%), hsl(calc(var(--h) + 38) 56% 42%)); box-shadow: 0 6px 18px -8px hsl(var(--h) 60% 50% / .8); } .lesson-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; width: auto; margin: 46px 0 12px; } .lesson-pager__link { display: flex; flex-direction: column; gap: 5px; text-decoration: none; padding: 15px 18px; border-radius: 16px; border: 1px solid var(--line-strong); background: color-mix(in srgb, var(--surface) 82%, transparent); transition: transform .14s ease, border-color .16s ease, box-shadow .16s ease; } .lesson-pager__link.is-next { text-align: right; align-items: flex-end; } .lesson-pager__link:hover { transform: translateY(-2px); border-color: hsl(var(--h, 268) 65% 60% / .6); box-shadow: 0 16px 34px -18px hsl(var(--h, 268) 60% 50% / .6); } .lesson-pager__dir { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-body); font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: hsl(var(--h, 268) 72% 70%); } .lesson-pager__dir svg { flex-shrink: 0; } .lesson-pager__title { font-family: var(--font-body); font-size: 15px; font-weight: 600; color: var(--ink); } @media (max-width: 600px) { .lesson-nav, .lesson-pager { width: auto; margin-left: 0; margin-right: 0; } .lesson-pager { grid-template-columns: 1fr; } .lesson-pager__link.is-next { text-align: left; align-items: flex-start; } } /* ── Lesson footer — matches the site-wide simple footer (© line, thin border) ── */ .mt-footer { width: auto; margin: 54px 0 0; padding: 22px 2px 40px; border-top: 1px solid var(--line); text-align: center; color: var(--sub); font-family: var(--font-body); font-size: 13.5px; letter-spacing: .01em; } @media (max-width: 600px) { .mt-footer { width: auto; margin-left: 0; margin-right: 0; } } /* Login slot in the cosmic header (filled by js/mz-auth.js). */ .mz-auth { display: inline-flex; align-items: center; } .mz-auth:empty { display: none; }