/* ========================================================================== LinguaHub — Site Theme Single source of truth for the design system that replaces Sneat. Every layout partial (Navbar, Menu, Footer, Home, future pages) reads these tokens instead of redefining its own colors/fonts. To re-skin the whole app later, change values here only. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600&display=swap'); :root{ /* Surfaces */ --bg: #0A0D13; --bg-2: #0E121A; --glass: rgba(255,255,255,.045); --glass-hi: rgba(255,255,255,.09); --border: rgba(255,255,255,.09); --border-hi: rgba(255,255,255,.18); /* Text */ --ink: #F3F5F8; --muted: #8B93A6; --muted-2: #5C6478; /* Category accents (one per learning track — keep in sync across app) */ --eng: #4F8CFF; --eng-glow: rgba(79,140,255,.45); --kor1: #FF5D5D; --kor2: #4F8CFF; --kor-glow: rgba(255,93,93,.4); --opic: #FFB648; --opic-glow: rgba(255,182,72,.4); --tool: #34E7B0; --tool-glow: rgba(52,231,176,.4); /* Shape / rhythm */ --radius: 20px; --radius-sm: 10px; --font-display: 'Space Grotesk', sans-serif; --font-body: 'Inter', sans-serif; --font-mono: 'JetBrains Mono', monospace; } /* ── Base ─────────────────────────────────────────────────────────────── */ /* ── Page canvas ────────────────────────────────────────────────────── Sneat's ships with a hardcoded data-bs-theme="light" and its own wrapper chrome (body, .layout-wrapper, .content-wrapper, etc.) is never touched by the component-level overrides in _NavbarPartial/_VerticalMenu/ _Footer. Without this, those wrapper elements stayed on Sneat's light background no matter what our own data-theme toggle was set to. Painting them here with var(--bg) is what makes the toggle affect the WHOLE page, not just the components we've individually reskinned. */ html, body, .layout-wrapper, .layout-page, .layout-page-content, .content-wrapper, .layout-content-navbar, .layout-content-navbar-inner{ background: var(--bg) !important; color: var(--ink); } .lh-app{ font-family: var(--font-body); color: var(--ink); background: var(--bg); } .lh-app *{ box-sizing: border-box; } .lh-app ::selection{ background: var(--eng); color:#fff; } .lh-app :focus-visible{ outline: 2px solid var(--eng); outline-offset: 2px; border-radius: 4px; } /* ── Reusable primitives ─────────────────────────────────────────────── */ /* glass surface — cards, dropdowns, pills all share this */ .lh-glass{ background: var(--glass); border: 1px solid var(--border); backdrop-filter: blur(14px); transition: border-color .2s ease, background .2s ease, box-shadow .2s ease; } .lh-glass:hover{ border-color: var(--border-hi); background: var(--glass-hi); } /* eyebrow / section label — mono, wide tracking, dot indicator */ .lh-eyebrow{ display:inline-flex; align-items:center; gap:8px; font-family: var(--font-mono); font-weight:600; font-size:11.5px; letter-spacing:.09em; text-transform:uppercase; } .lh-dot{ width:7px; height:7px; border-radius:50%; position:relative; flex-shrink:0; } .lh-dot::after{ content:""; position:absolute; inset:-5px; border-radius:50%; border:1px solid currentColor; opacity:.4; animation: lhRing 2.4s ease-out infinite; } @keyframes lhRing{ 0%{ transform:scale(.6); opacity:.6; } 100%{ transform:scale(1.8); opacity:0; } } /* animated gradient mark — used for brand + avatar ring */ .lh-gradient-mark{ background: linear-gradient(135deg, var(--eng), var(--kor1) 60%, var(--opic)); background-size: 220% 220%; animation: lhGradShift 7s ease infinite; } @keyframes lhGradShift{ 0%,100%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } } /* shared "LV / DAI" brand mark — sidebar brand slot + auth pages (Login, Register...) */ .lh-brand-mark{ width: 32px; height: 32px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 12.5px; color: #fff; box-shadow: 0 6px 18px -6px var(--eng-glow); flex-shrink: 0; } .lh-brand-text{ font-family: var(--font-display) !important; color: var(--ink) !important; letter-spacing: .01em; font-weight: 700; } /* per-track color binding — put class on an ancestor to tint everything inside */ .lh-eng{ color: var(--eng); --glow: var(--eng-glow); } .lh-kor{ color: var(--kor1); --glow: var(--kor-glow); } .lh-opic{ color: var(--opic); --glow: var(--opic-glow); } .lh-tool{ color: var(--tool); --glow: var(--tool-glow); } .lh-eng .lh-dot{ background: var(--eng); } .lh-kor .lh-dot{ background: linear-gradient(135deg,var(--kor1),var(--kor2)); } .lh-opic .lh-dot{ background: var(--opic); } .lh-tool .lh-dot{ background: var(--tool); } /* small pulsing brand dot — used by navbar brand + any future brand marks */ .lh-pulse-dot{ width:8px; height:8px; border-radius:50%; background:var(--eng); flex-shrink:0; animation: lhPulse 2.2s ease-out infinite; } @keyframes lhPulse{ 0%{ box-shadow:0 0 0 0 var(--eng-glow); } 70%{ box-shadow:0 0 0 8px rgba(79,140,255,0); } 100%{ box-shadow:0 0 0 0 rgba(79,140,255,0); } } @media (prefers-reduced-motion: reduce){ .lh-app *{ animation: none !important; transition: none !important; } } /* ========================================================================== Light theme — toggled by setting data-theme="light" on . Accent colors stay identical; only surfaces/text invert so category colors (eng/kor/opic/tool) still mean the same thing in both modes. ========================================================================== */ html[data-theme="light"]{ --bg: #F6F7FA; --bg-2: #FFFFFF; --glass: rgba(10,13,20,.035); --glass-hi: rgba(10,13,20,.06); --border: rgba(10,13,20,.08); --border-hi: rgba(10,13,20,.15); --ink: #12151C; --muted: #5B6472; --muted-2: #8A93A3; }