/* Forge - Theme System v4.0 Solo Leveling Manhwa "System Window" aesthetic. Deep black-purple palette with neon accent glows. Barlow Condensed / Barlow typography. Four-mode theme via [data-theme] on . */ @import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700;800&family=Barlow:wght@300;400;500;600;700&display=swap"); /* ============================================ DEFAULT MODE (Solo Leveling System) ============================================ */ :root, [data-theme="default"] { /* Surfaces — deep black with purple undertones */ --bg-primary: #06060c; --bg-secondary: #0c0c18; --bg-card: #10101e; --bg-hover: #18182c; --bg-input: #0c0c18; --bg-elevated: #1a1a30; /* Text */ --text-primary: #e8e6f0; --text-secondary: #9896b0; --text-muted: #5c5a72; --text-inverse: #06060c; /* Accent — System Violet/Purple (Solo Leveling signature) */ --accent: #7c3aed; --accent-hover: #8b5cf6; --accent-strong: #a855f7; --accent-stronger: #c084fc; --accent-light: rgba(124, 58, 237, 0.12); --accent-glow: rgba(124, 58, 237, 0.3); /* Secondary accent — Neon Cyan (for highlights, links) */ --accent-2: #06b6d4; --accent-2-glow: rgba(6, 182, 212, 0.25); /* Semantic — Gains Green */ --success: #22c55e; --success-light: rgba(34, 197, 94, 0.12); /* Semantic — Energy Orange */ --warning: #f97316; --warning-light: rgba(249, 115, 22, 0.12); /* Semantic — Danger Red */ --danger: #ef4444; --danger-light: rgba(239, 68, 68, 0.12); /* Borders & Shadows — purple-tinted */ --border: #1c1c34; --border-light: #14142a; --border-accent: rgba(124, 58, 237, 0.25); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6); --shadow-glow: 0 0 20px rgba(124, 58, 237, 0.2); --overlay-soft: rgba(0, 0, 0, 0.5); --overlay-medium: rgba(0, 0, 0, 0.7); --overlay-strong: rgba(0, 0, 0, 0.9); --panel-system-start: #0d0a14; --panel-system-mid: #12101c; --panel-system-end: #0d0a14; --panel-system-soft-end: #110e1a; --panel-system-alt-end: #13101e; --panel-system-border: rgba(124, 58, 237, 0.15); --heat-1: #4a90d9; --heat-2: #2ecc71; --heat-3: #f1c40f; --heat-4: #e67e22; --heat-5: #e74c3c; --volume-heat-1: rgba(59, 130, 246, 0.25); --volume-heat-2: rgba(59, 130, 246, 0.45); --volume-heat-3: rgba(59, 130, 246, 0.7); --volume-heat-4: rgba(59, 130, 246, 1); --chart-primary: #3b82f6; --chart-primary-fill: rgba(59, 130, 246, 0.15); --chart-primary-stroke: rgba(59, 130, 246, 0.8); --chart-grid: rgba(255, 255, 255, 0.08); --chart-grid-subtle: rgba(255, 255, 255, 0.06); --chart-tick: rgba(255, 255, 255, 0.3); --chart-muted: #6b7280; --chart-muted-strong: #4b5563; --ui-highlight-30: rgba(255, 255, 255, 0.3); --ui-highlight-10: rgba(255, 255, 255, 0.1); --ui-highlight-06: rgba(255, 255, 255, 0.06); --ui-highlight-03: rgba(255, 255, 255, 0.03); --ui-highlight-02: rgba(255, 255, 255, 0.02); --text-shadow-soft: rgba(0, 0, 0, 0.3); --text-shadow-strong: rgba(0, 0, 0, 0.6); --body-bg-glow-1: rgba(124, 58, 237, 0.14); --body-bg-glow-2: rgba(6, 182, 212, 0.09); --body-bg-start: #05050b; --body-bg-mid: #070713; --body-bg-end: #05050b; --body-grid-line: rgba(124, 58, 237, 0.08); --body-grid-glow: rgba(124, 58, 237, 0.12); --scanline-glow: rgba(124, 58, 237, 0.03); --body-neutral: #2a2e38; --body-stroke: rgba(241, 243, 247, 0.15); --muscle-border: rgba(241, 243, 247, 0.06); --skill-default: #6b7280; /* Radii */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; /* Typography */ --font-display: "Barlow Condensed", "Impact", sans-serif; --font-sans: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", "Fira Code", "Consolas", monospace; /* Animation tokens */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --dur-fast: 150ms; --dur-normal: 250ms; --dur-slow: 400ms; --transition: 250ms cubic-bezier(0.16, 1, 0.3, 1); /* Spacing scale (8px base) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; /* Z-index scale */ --z-base: 0; --z-card: 10; --z-dropdown: 20; --z-sticky: 40; --z-overlay: 100; --z-modal: 200; --z-toast: 300; } /* ============================================ LIGHT MODE — Muted purple-tinted ============================================ */ [data-theme="light"] { --bg-primary: #f5f3fa; --bg-secondary: #edeaf5; --bg-card: #ffffff; --bg-hover: #e4e0f0; --bg-input: #ffffff; --bg-elevated: #ffffff; --text-primary: #1a1530; --text-secondary: #4a4565; --text-muted: #8a85a0; --text-inverse: #f5f3fa; --accent: #6d28d9; --accent-hover: #5b21b6; --accent-strong: #7c3aed; --accent-stronger: #8b5cf6; --accent-light: rgba(109, 40, 217, 0.08); --accent-glow: rgba(109, 40, 217, 0.15); --accent-2: #0891b2; --accent-2-glow: rgba(8, 145, 178, 0.15); --success: #16a34a; --success-light: rgba(22, 163, 74, 0.08); --warning: #ea580c; --warning-light: rgba(234, 88, 12, 0.08); --danger: #dc2626; --danger-light: rgba(220, 38, 38, 0.08); --border: #ddd8ec; --border-light: #edeaf5; --border-accent: rgba(109, 40, 217, 0.15); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1); --shadow-glow: 0 0 20px rgba(109, 40, 217, 0.08); --overlay-soft: rgba(15, 23, 42, 0.12); --overlay-medium: rgba(15, 23, 42, 0.22); --overlay-strong: rgba(15, 23, 42, 0.32); --panel-system-start: #ffffff; --panel-system-mid: #f7f3ff; --panel-system-end: #f1ebff; --panel-system-soft-end: #f5f1fb; --panel-system-alt-end: #ece6f7; --panel-system-border: rgba(109, 40, 217, 0.18); --heat-1: #4a90d9; --heat-2: #2ecc71; --heat-3: #f1c40f; --heat-4: #e67e22; --heat-5: #e74c3c; --volume-heat-1: rgba(37, 99, 235, 0.22); --volume-heat-2: rgba(37, 99, 235, 0.38); --volume-heat-3: rgba(37, 99, 235, 0.56); --volume-heat-4: rgba(37, 99, 235, 0.78); --chart-primary: #2563eb; --chart-primary-fill: rgba(37, 99, 235, 0.14); --chart-primary-stroke: rgba(37, 99, 235, 0.72); --chart-grid: rgba(15, 23, 42, 0.14); --chart-grid-subtle: rgba(15, 23, 42, 0.1); --chart-tick: rgba(15, 23, 42, 0.45); --chart-muted: #64748b; --chart-muted-strong: #475569; --ui-highlight-30: rgba(15, 23, 42, 0.3); --ui-highlight-10: rgba(15, 23, 42, 0.1); --ui-highlight-06: rgba(15, 23, 42, 0.06); --ui-highlight-03: rgba(15, 23, 42, 0.03); --ui-highlight-02: rgba(15, 23, 42, 0.02); --text-shadow-soft: rgba(15, 23, 42, 0.1); --text-shadow-strong: rgba(15, 23, 42, 0.22); --body-bg-glow-1: rgba(109, 40, 217, 0.09); --body-bg-glow-2: rgba(8, 145, 178, 0.08); --body-bg-start: #f6f4fc; --body-bg-mid: #f2eef9; --body-bg-end: #f6f4fc; --body-grid-line: rgba(109, 40, 217, 0.06); --body-grid-glow: rgba(109, 40, 217, 0.07); --scanline-glow: rgba(109, 40, 217, 0.02); --body-neutral: #8a92a0; --body-stroke: rgba(15, 23, 42, 0.35); --muscle-border: rgba(15, 23, 42, 0.14); --skill-default: #64748b; } /* ============================================ DARK MODE (OLED) ============================================ */ [data-theme="dark"] { --bg-primary: #000000; --bg-secondary: #0a0a0a; --bg-card: #111111; --bg-hover: #171717; --bg-input: #0d0d0d; --bg-elevated: #181818; --border: #1a1a1a; --border-light: #151515; --panel-system-start: #040404; --panel-system-mid: #090909; --panel-system-end: #040404; --panel-system-soft-end: #0a0a0a; --panel-system-alt-end: #0d0d0d; --body-bg-start: #000000; --body-bg-mid: #030303; --body-bg-end: #000000; } /* ============================================ COLOR SCHEME & TRANSITIONS ============================================ */ html { color-scheme: dark; } [data-theme="light"] { color-scheme: light; } /* ============================================ SOLO LEVELING — System Window Aesthetic Subtle glow effects, scan-line texture, rank colors ============================================ */ /* System-window glow for focused cards */ .card:focus-within, .card.system-glow { border-color: var(--accent); box-shadow: var(--shadow-md), 0 0 15px var(--accent-glow), inset 0 1px 0 var(--accent-light); } /* Rank colors (F → SSS) — Solo Leveling hunter rank system */ :root { --rank-f: #4b5563; --rank-e: #64748b; --rank-d: #22c55e; --rank-c: #3b82f6; --rank-b: #8b5cf6; --rank-a: #f59e0b; --rank-a-plus: #f97316; --rank-s: #ef4444; --rank-s-plus: #dc2626; --rank-ss: #be123c; --rank-sss: #7c2d12; } /* System notification pulse — level-up / PR toast animation */ @keyframes system-pulse { 0% { box-shadow: 0 0 0 0 var(--accent-glow); } 50% { box-shadow: 0 0 20px 4px var(--accent-glow); } 100% { box-shadow: 0 0 0 0 var(--accent-glow); } } /* Entrance: slide-up with fade */ @keyframes system-arise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } /* Subtle scan-line overlay for immersive panels */ @keyframes scan-line { 0% { transform: translateY(-100%); } 100% { transform: translateY(100%); } } .system-scan::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 50%, var(--scanline-glow) 50%); background-size: 100% 4px; pointer-events: none; border-radius: inherit; } /* Stat value glow — for numbers that matter */ .stat-glow { text-shadow: 0 0 8px var(--accent-glow); } /* Level-up badge animation */ @keyframes level-up { 0% { transform: scale(0.5); opacity: 0; } 50% { transform: scale(1.15); } 100% { transform: scale(1); opacity: 1; } } .level-up-enter { animation: level-up 0.5s var(--ease-spring) forwards; } /* Rank badge base */ .rank-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.6em; height: 1.6em; font-family: var(--font-display); font-weight: 800; font-size: 0.75rem; border-radius: var(--radius-sm); letter-spacing: 0.05em; text-transform: uppercase; } .rank-f { background: var(--rank-f); color: white; } .rank-e { background: var(--rank-e); color: white; } .rank-d { background: var(--rank-d); color: white; } .rank-c { background: var(--rank-c); color: white; } .rank-b { background: var(--rank-b); color: white; } .rank-a { background: var(--rank-a); color: white; } .rank-a-plus { background: linear-gradient(135deg, var(--rank-a), var(--rank-a-plus)); color: white; box-shadow: 0 0 8px rgba(249, 115, 22, 0.25); } .rank-s { background: linear-gradient(135deg, var(--rank-s), #ff6b6b); color: white; box-shadow: 0 0 10px rgba(239, 68, 68, 0.3); } .rank-s-plus { background: linear-gradient(135deg, var(--rank-s-plus), var(--rank-s)); color: white; box-shadow: 0 0 12px rgba(220, 38, 38, 0.4); } .rank-ss { background: linear-gradient(135deg, var(--rank-ss), #e11d48); color: white; box-shadow: 0 0 15px rgba(190, 18, 60, 0.5); animation: system-pulse 3s ease-in-out infinite; } .rank-sss { background: linear-gradient(135deg, #7c2d12, #dc2626, #f59e0b); color: white; box-shadow: 0 0 20px rgba(239, 68, 68, 0.6), 0 0 40px rgba(245, 158, 11, 0.3); animation: system-pulse 2s ease-in-out infinite; } body, .card, .sidebar, .btn, input, select, textarea, .toast { transition: background-color var(--dur-normal) var(--ease-out), color var(--dur-normal) var(--ease-out), border-color var(--dur-normal) var(--ease-out), box-shadow var(--dur-normal) var(--ease-out); } /* ============================================ GLOBAL RESET ============================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-sans); background: radial-gradient( 1200px 650px at 12% -8%, var(--body-bg-glow-1), transparent 55% ), radial-gradient( 900px 520px at 88% 108%, var(--body-bg-glow-2), transparent 52% ), linear-gradient( 180deg, var(--body-bg-start) 0%, var(--body-bg-mid) 45%, var(--body-bg-end) 100% ); background-attachment: fixed; background-size: 120% 120%, 120% 120%, 100% 100%; animation: atmosphere-drift 52s linear infinite; color: var(--text-primary); line-height: 1.6; font-size: 16px; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } /* Ambient system-grid layer */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: linear-gradient(var(--body-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--body-grid-line) 1px, transparent 1px), radial-gradient( 720px 400px at 18% 16%, var(--body-grid-glow), transparent 62% ), radial-gradient( 680px 360px at 84% 88%, var(--body-grid-glow), transparent 60% ); background-size: 56px 56px, 56px 56px, 100% 100%, 100% 100%; opacity: 0.34; z-index: 0; mix-blend-mode: screen; animation: background-grid-drift 80s linear infinite; } /* Subtle system scanline overlay */ body::after { content: ""; position: fixed; inset: 0; pointer-events: none; background: linear-gradient( to bottom, transparent 0%, var(--scanline-glow) 50%, transparent 100% ), repeating-linear-gradient( to bottom, var(--ui-highlight-02) 0, var(--ui-highlight-02) 1px, transparent 1px, transparent 4px ); opacity: 0.18; mix-blend-mode: screen; z-index: 1; animation: scan-line 14s linear infinite; } /* Light mode needs softer blending so background reacts correctly to theme swap. */ html[data-theme="light"] body::before { mix-blend-mode: normal; opacity: 0.22; } html[data-theme="light"] body::after { mix-blend-mode: normal; opacity: 0.08; } /* ============================================ TYPOGRAPHY — Barlow Condensed display system ============================================ */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.01em; text-transform: uppercase; line-height: 1.2; } h1 { font-size: 2rem; font-weight: 800; } h2 { font-size: 1.5rem; } h3 { font-size: 1.15rem; } h4 { font-size: 0.95rem; font-weight: 600; } a { color: var(--accent); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); } a:hover { color: var(--accent-hover); } /* Selection */ ::selection { background: var(--accent); color: white; } /* Focus ring */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Scrollbar (Webkit) */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--bg-secondary); } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); } /* ============================================ ANIMATION KEYFRAMES ============================================ */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideInLeft { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } } @keyframes slideInRight { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } } @keyframes scaleIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } @keyframes spin { to { transform: rotate(360deg); } } @keyframes blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } } @keyframes toastIn { from { opacity: 0; transform: translateX(100%) scale(0.9); } to { opacity: 1; transform: translateX(0) scale(1); } } @keyframes toastOut { from { opacity: 1; transform: translateX(0) scale(1); } to { opacity: 0; transform: translateX(100%) scale(0.9); } } @keyframes glowPulse { 0%, 100% { box-shadow: 0 0 0 rgba(59, 130, 246, 0); } 50% { box-shadow: 0 0 20px rgba(59, 130, 246, 0.2); } } @keyframes atmosphere-drift { 0% { background-position: 0% 0%, 0% 0%, 0% 0%; } 50% { background-position: 4% 2%, -3% -2%, 0% 0%; } 100% { background-position: 0% 0%, 0% 0%, 0% 0%; } } @keyframes background-grid-drift { 0% { background-position: 0 0, 0 0, 0 0, 0 0; } 50% { background-position: 16px 10px, -16px -10px, 2% 1%, -2% -1%; } 100% { background-position: 0 0, 0 0, 0 0, 0 0; } } /* Animation utility classes */ .animate-in { animation: fadeInUp var(--dur-slow) var(--ease-out) both; } .animate-fade { animation: fadeIn var(--dur-normal) var(--ease-out) both; } .animate-slide-left { animation: slideInLeft var(--dur-slow) var(--ease-out) both; } .animate-scale { animation: scaleIn var(--dur-normal) var(--ease-spring) both; } /* Stagger delays for children */ .stagger > :nth-child(1) { animation-delay: 0ms; } .stagger > :nth-child(2) { animation-delay: 50ms; } .stagger > :nth-child(3) { animation-delay: 100ms; } .stagger > :nth-child(4) { animation-delay: 150ms; } .stagger > :nth-child(5) { animation-delay: 200ms; } .stagger > :nth-child(6) { animation-delay: 250ms; } .stagger > :nth-child(7) { animation-delay: 300ms; } .stagger > :nth-child(8) { animation-delay: 350ms; } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } body { animation: none !important; background-attachment: scroll; } body::after { animation: none !important; opacity: 0.08; } body::before { animation: none !important; opacity: 0.16; } .rank-ss, .rank-sss { animation: none !important; } }