/* ================================================================= DEEP THEME SYSTEM — "10 sites in 1" Each html[data-theme="..."] block re-skins the entire site: typography, layout feel, animation profile, card shapes, nav style. Toggled via theme.json -> preset, set on . ================================================================= */ /* ─── 1. EXECUTIVE DARK (default) ──────────────────────────────── Polished dark, emerald, professional — what we have today. */ html[data-theme="executive-dark"] { --t-font-sans: "Inter", -apple-system, system-ui, sans-serif; --t-font-display: "Fraunces", Georgia, serif; --t-radius: 12px; --t-card-shadow: 0 22px 48px -16px rgba(0,0,0,0.5); --t-border-style: 1px solid var(--border); } html[data-theme="executive-dark"] body { font-family: var(--t-font-sans); } html[data-theme="executive-dark"] h1, html[data-theme="executive-dark"] h2 { font-family: var(--t-font-display); letter-spacing: -0.02em; } /* ─── 2. CORPORATE CLEAN ───────────────────────────────────────── Bright Microsoft / LinkedIn aesthetic. Crisp. Trustworthy. */ html[data-theme="corporate-clean"] { --bg: #f5f7fa; --bg-2: #ffffff; --bg-3: #eef2f7; --bg-dark: #ffffff; --accent: #0078d4; --accent-soft: #2b88d8; --gold: #0078d4; --gold-soft: #2b88d8; --text: #1a202c; --text-soft: #4a5568; --text-mute: #718096; --text-quiet: #a0aec0; --border: #e2e8f0; --border-strong: #cbd5e0; --hairline: rgba(0,0,0,0.06); --nav-bg-scrolled: rgba(255,255,255,0.95); } html[data-theme="corporate-clean"] body { font-family: "Segoe UI", "Inter", system-ui, sans-serif; background: linear-gradient(180deg, #f5f7fa 0%, #ffffff 100%); } html[data-theme="corporate-clean"] h1, html[data-theme="corporate-clean"] h2, html[data-theme="corporate-clean"] h3 { font-family: "Segoe UI", "Inter", sans-serif; font-weight: 600; letter-spacing: -0.01em; } html[data-theme="corporate-clean"] .nav { border-bottom: 1px solid var(--border); backdrop-filter: blur(20px); } html[data-theme="corporate-clean"] .project-card, html[data-theme="corporate-clean"] .case-card, html[data-theme="corporate-clean"] .ai-card { background: #fff !important; border: 1px solid var(--border) !important; border-radius: 8px !important; box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.04) !important; } html[data-theme="corporate-clean"] .btn-primary { background: #0078d4 !important; color: #fff !important; border-radius: 4px !important; box-shadow: 0 1px 2px rgba(0,120,212,0.3) !important; } html[data-theme="corporate-clean"] .btn-primary:hover { background: #106ebe !important; } /* ─── 3. CREATIVE STUDIO ───────────────────────────────────────── Bold display type, vivid gradients, asymmetric energy. */ html[data-theme="creative-studio"] { --bg: #faf7f5; --bg-2: #ffffff; --bg-3: #f5efe9; --bg-dark: #1a1a1a; --accent: #ff4d6d; --accent-soft: #ff7a93; --gold: #ff4d6d; --gold-soft: #ff7a93; --text: #1a1a1a; --text-soft: #4a4a4a; --text-mute: #888; --text-quiet: #bbb; --border: #e8dfd6; --border-strong: #d4c5b3; --hairline: rgba(0,0,0,0.05); --nav-bg-scrolled: rgba(250,247,245,0.92); } html[data-theme="creative-studio"] body { font-family: "Inter", system-ui, sans-serif; } html[data-theme="creative-studio"] h1, html[data-theme="creative-studio"] h2 { font-family: "Fraunces", serif; font-weight: 700; letter-spacing: -0.04em; background: linear-gradient(135deg, #ff4d6d 0%, #c026d3 50%, #7c3aed 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } html[data-theme="creative-studio"] .project-card, html[data-theme="creative-studio"] .case-card { border-radius: 24px !important; border: none !important; box-shadow: 0 30px 60px -20px rgba(255,77,109,0.25), 0 18px 36px -18px rgba(124,58,237,0.2) !important; transition: transform 0.4s var(--t) !important; } html[data-theme="creative-studio"] .project-card:hover { transform: rotate(-1deg) scale(1.02); } html[data-theme="creative-studio"] .btn-primary { background: linear-gradient(135deg, #ff4d6d, #c026d3) !important; border-radius: 999px !important; padding: 14px 32px !important; color: #fff !important; box-shadow: 0 8px 24px rgba(255,77,109,0.4) !important; } /* ─── 4. BRUTALIST ─────────────────────────────────────────────── Raw, mono, hard borders, no shadows, offset hover. */ html[data-theme="brutalist"] { --bg: #f0eee6; --bg-2: #ffffff; --bg-3: #e8e5d8; --bg-dark: #000; --accent: #ff5500; --accent-soft: #ff7733; --gold: #ff5500; --gold-soft: #ff7733; --text: #000; --text-soft: #222; --text-mute: #444; --text-quiet: #888; --border: #000; --border-strong: #000; --hairline: #000; --nav-bg-scrolled: #f0eee6; } html[data-theme="brutalist"] body { font-family: "JetBrains Mono", "Courier New", monospace; } html[data-theme="brutalist"] h1, html[data-theme="brutalist"] h2, html[data-theme="brutalist"] h3 { font-family: "Inter", sans-serif; font-weight: 900; letter-spacing: -0.03em; text-transform: uppercase; } html[data-theme="brutalist"] * { border-radius: 0 !important; box-shadow: none !important; } html[data-theme="brutalist"] .nav { border-bottom: 3px solid #000 !important; } html[data-theme="brutalist"] .project-card, html[data-theme="brutalist"] .case-card, html[data-theme="brutalist"] .ai-card { background: #fff !important; border: 3px solid #000 !important; transition: transform 0.15s linear, box-shadow 0.15s linear !important; } html[data-theme="brutalist"] .project-card:hover, html[data-theme="brutalist"] .case-card:hover { transform: translate(-4px, -4px) !important; box-shadow: 8px 8px 0 #000 !important; } html[data-theme="brutalist"] .btn, html[data-theme="brutalist"] .btn-primary { background: #ff5500 !important; color: #000 !important; border: 3px solid #000 !important; font-weight: 900 !important; text-transform: uppercase !important; padding: 12px 24px !important; } html[data-theme="brutalist"] .btn:hover { transform: translate(-2px,-2px); box-shadow: 4px 4px 0 #000 !important; } /* ─── 5. GLASS MORPHISM ────────────────────────────────────────── Frosted cards, backdrop blur, gradient backdrop. */ html[data-theme="glass"] { --bg: #0c1226; --bg-2: rgba(255,255,255,0.06); --bg-3: rgba(255,255,255,0.04); --bg-dark: #060914; --accent: #60a5fa; --accent-soft: #93c5fd; --gold: #60a5fa; --gold-soft: #93c5fd; --text: #f0f4ff; --text-soft: #c4d0e6; --text-mute: #8ea0c2; --text-quiet: #5d6f8f; --border: rgba(255,255,255,0.12); --border-strong: rgba(255,255,255,0.25); --hairline: rgba(255,255,255,0.08); --nav-bg-scrolled: rgba(12,18,38,0.6); } html[data-theme="glass"] body { font-family: "Inter", system-ui, sans-serif; background: radial-gradient(circle at 15% 15%, #1e3a8a 0%, transparent 45%), radial-gradient(circle at 85% 80%, #7c3aed 0%, transparent 50%), #0c1226 !important; background-attachment: fixed !important; } html[data-theme="glass"] .nav { backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%); border-bottom: 1px solid rgba(255,255,255,0.08) !important; } html[data-theme="glass"] .project-card, html[data-theme="glass"] .case-card, html[data-theme="glass"] .ai-card { background: rgba(255,255,255,0.06) !important; backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border: 1px solid rgba(255,255,255,0.12) !important; border-radius: 20px !important; box-shadow: 0 8px 32px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.1) !important; } html[data-theme="glass"] .btn-primary { background: rgba(96,165,250,0.2) !important; backdrop-filter: blur(20px); border: 1px solid rgba(96,165,250,0.4) !important; color: #f0f4ff !important; border-radius: 12px !important; } /* ─── 6. RETRO TERMINAL ────────────────────────────────────────── Green on black, monospace, CRT scanlines. */ html[data-theme="terminal"] { --bg: #000; --bg-2: #0a0a0a; --bg-3: #050505; --bg-dark: #000; --accent: #00ff41; --accent-soft: #4dff79; --gold: #00ff41; --gold-soft: #4dff79; --text: #00ff41; --text-soft: #00cc34; --text-mute: #00992b; --text-quiet: #00661d; --border: #00ff41; --border-strong: #00ff41; --hairline: rgba(0,255,65,0.15); --nav-bg-scrolled: rgba(0,0,0,0.98); } html[data-theme="terminal"] body { font-family: "JetBrains Mono", "Courier New", monospace !important; text-shadow: 0 0 8px rgba(0,255,65,0.5); } html[data-theme="terminal"] body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9999; background: repeating-linear-gradient(0deg, rgba(0,0,0,0.15) 0, rgba(0,0,0,0.15) 1px, transparent 1px, transparent 3px); } html[data-theme="terminal"] body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9998; background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.4) 100%); } html[data-theme="terminal"] * { border-radius: 0 !important; } html[data-theme="terminal"] h1::before { content: "$ "; opacity: 0.6; } html[data-theme="terminal"] h2::before { content: "> "; opacity: 0.6; } html[data-theme="terminal"] .project-card, html[data-theme="terminal"] .case-card, html[data-theme="terminal"] .ai-card { background: #000 !important; border: 1px solid #00ff41 !important; box-shadow: inset 0 0 20px rgba(0,255,65,0.1), 0 0 20px rgba(0,255,65,0.15) !important; } html[data-theme="terminal"] .btn, html[data-theme="terminal"] .btn-primary { background: transparent !important; border: 1px solid #00ff41 !important; color: #00ff41 !important; font-family: "JetBrains Mono", monospace !important; text-transform: uppercase; } html[data-theme="terminal"] .btn::before { content: "["; margin-right: 4px; } html[data-theme="terminal"] .btn::after { content: "]"; margin-left: 4px; } /* ─── 7. EDITORIAL (warm magazine) ─────────────────────────────── Cream paper, serif body, generous margins, magazine layout. */ html[data-theme="editorial"] { --bg: #faf6ef; --bg-2: #fffaf0; --bg-3: #f3ecdc; --bg-dark: #2c1810; --accent: #8b3a1f; --accent-soft: #c0552f; --gold: #8b3a1f; --gold-soft: #c0552f; --text: #2c1810; --text-soft: #4a3024; --text-mute: #6b4a36; --text-quiet: #9c7c66; --border: #d9c9aa; --border-strong: #b89f7a; --hairline: rgba(44,24,16,0.08); --nav-bg-scrolled: rgba(250,246,239,0.96); } html[data-theme="editorial"] body { font-family: "Fraunces", "Georgia", serif !important; font-size: 17px !important; line-height: 1.75 !important; } html[data-theme="editorial"] h1, html[data-theme="editorial"] h2, html[data-theme="editorial"] h3 { font-family: "Fraunces", serif !important; font-weight: 600 !important; font-variation-settings: "opsz" 144; letter-spacing: -0.02em; } html[data-theme="editorial"] h1 { font-style: italic; } html[data-theme="editorial"] .nav { border-bottom: 1px solid var(--border) !important; } html[data-theme="editorial"] .brand-text { font-family: "Fraunces", serif; font-style: italic; } html[data-theme="editorial"] .project-card, html[data-theme="editorial"] .case-card { background: #fffaf0 !important; border: 1px solid var(--border) !important; border-radius: 4px !important; box-shadow: 0 1px 3px rgba(44,24,16,0.08) !important; } html[data-theme="editorial"] .btn-primary { background: #2c1810 !important; color: #faf6ef !important; border-radius: 0 !important; font-family: "Fraunces", serif !important; letter-spacing: 0.05em; } /* ─── 8. NEON TOKYO ────────────────────────────────────────────── Dark + neon pink/cyan, Japanese-inspired vertical accents. */ html[data-theme="neon-tokyo"] { --bg: #0a0014; --bg-2: #14092a; --bg-3: #1a0d33; --bg-dark: #050008; --accent: #ff006e; --accent-soft: #ff4d94; --gold: #00f5ff; --gold-soft: #4dfaff; --text: #f0f0ff; --text-soft: #c8b8e0; --text-mute: #9080b0; --text-quiet: #605070; --border: rgba(255,0,110,0.3); --border-strong: #ff006e; --hairline: rgba(255,0,110,0.15); --nav-bg-scrolled: rgba(10,0,20,0.95); } html[data-theme="neon-tokyo"] body { font-family: "Inter", "Noto Sans JP", sans-serif !important; background: linear-gradient(135deg, #0a0014 0%, #14092a 100%) !important; } html[data-theme="neon-tokyo"] h1, html[data-theme="neon-tokyo"] h2 { text-shadow: 0 0 20px rgba(255,0,110,0.5), 0 0 40px rgba(0,245,255,0.3); letter-spacing: -0.02em; } html[data-theme="neon-tokyo"] .project-card, html[data-theme="neon-tokyo"] .case-card, html[data-theme="neon-tokyo"] .ai-card { background: rgba(20,9,42,0.7) !important; border: 1px solid rgba(255,0,110,0.3) !important; border-radius: 2px !important; box-shadow: 0 0 40px rgba(255,0,110,0.15), inset 0 0 20px rgba(0,245,255,0.05) !important; position: relative; } html[data-theme="neon-tokyo"] .project-card::before, html[data-theme="neon-tokyo"] .case-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: linear-gradient(180deg, #ff006e, #00f5ff); } html[data-theme="neon-tokyo"] .btn-primary { background: #ff006e !important; color: #fff !important; border-radius: 0 !important; box-shadow: 0 0 30px rgba(255,0,110,0.6), 4px 4px 0 #00f5ff !important; text-transform: uppercase; letter-spacing: 0.1em; } html[data-theme="neon-tokyo"] .btn-primary:hover { box-shadow: 0 0 50px rgba(255,0,110,0.9), 4px 4px 0 #00f5ff !important; } /* ─── 9. MINIMAL LUXURY ────────────────────────────────────────── Vast white space, gold accents, ultra-thin type. */ html[data-theme="minimal-luxury"] { --bg: #ffffff; --bg-2: #fafafa; --bg-3: #f5f5f5; --bg-dark: #1a1a1a; --accent: #b8985a; --accent-soft: #d4b97a; --gold: #b8985a; --gold-soft: #d4b97a; --text: #1a1a1a; --text-soft: #555; --text-mute: #999; --text-quiet: #ccc; --border: #eee; --border-strong: #ddd; --hairline: rgba(0,0,0,0.03); --nav-bg-scrolled: rgba(255,255,255,0.98); } html[data-theme="minimal-luxury"] body { font-family: "Inter", system-ui, sans-serif !important; font-weight: 200 !important; letter-spacing: 0.01em; } html[data-theme="minimal-luxury"] h1 { font-family: "Fraunces", serif !important; font-weight: 200 !important; font-size: clamp(3rem, 8vw, 6rem) !important; letter-spacing: -0.04em; line-height: 1.05; } html[data-theme="minimal-luxury"] h2, html[data-theme="minimal-luxury"] h3 { font-weight: 300 !important; letter-spacing: 0.05em; text-transform: uppercase; font-size: 0.9rem !important; } html[data-theme="minimal-luxury"] .section { padding-block: 8rem !important; } html[data-theme="minimal-luxury"] .nav { border-bottom: none !important; } html[data-theme="minimal-luxury"] .project-card, html[data-theme="minimal-luxury"] .case-card { background: #fff !important; border: none !important; border-top: 1px solid var(--border) !important; border-radius: 0 !important; box-shadow: none !important; padding: 3rem 0 !important; } html[data-theme="minimal-luxury"] .btn-primary { background: transparent !important; color: #1a1a1a !important; border: 1px solid #1a1a1a !important; border-radius: 0 !important; padding: 18px 40px !important; font-weight: 300 !important; letter-spacing: 0.2em; text-transform: uppercase; font-size: 0.75rem !important; } /* ─── 10. BLUEPRINT (sci-fi technical) ─────────────────────────── Deep navy, cyan, technical-drawing grid overlays. */ html[data-theme="blueprint"] { --bg: #0a1929; --bg-2: #0f2540; --bg-3: #133050; --bg-dark: #050d1a; --accent: #00d4ff; --accent-soft: #4dddff; --gold: #00d4ff; --gold-soft: #4dddff; --text: #e0f4ff; --text-soft: #a8cce0; --text-mute: #7090a8; --text-quiet: #4a6878; --border: rgba(0,212,255,0.25); --border-strong: rgba(0,212,255,0.5); --hairline: rgba(0,212,255,0.1); --nav-bg-scrolled: rgba(10,25,41,0.96); } html[data-theme="blueprint"] body { font-family: "JetBrains Mono", "Inter", monospace !important; background: linear-gradient(rgba(0,212,255,0.04) 1px, transparent 1px) 0 0 / 40px 40px, linear-gradient(90deg, rgba(0,212,255,0.04) 1px, transparent 1px) 0 0 / 40px 40px, #0a1929 !important; background-attachment: fixed !important; } html[data-theme="blueprint"] h1, html[data-theme="blueprint"] h2 { font-family: "Inter", sans-serif !important; font-weight: 600 !important; letter-spacing: -0.01em; } html[data-theme="blueprint"] h2::before { content: "// "; color: var(--accent); opacity: 0.7; } html[data-theme="blueprint"] .project-card, html[data-theme="blueprint"] .case-card, html[data-theme="blueprint"] .ai-card { background: rgba(15,37,64,0.7) !important; border: 1px solid rgba(0,212,255,0.25) !important; border-radius: 2px !important; box-shadow: 0 0 0 1px rgba(0,212,255,0.05), 0 8px 32px rgba(0,0,0,0.4) !important; position: relative; } html[data-theme="blueprint"] .project-card::after, html[data-theme="blueprint"] .case-card::after { content: ""; position: absolute; top: 8px; right: 8px; width: 12px; height: 12px; border-top: 1px solid var(--accent); border-right: 1px solid var(--accent); opacity: 0.6; } html[data-theme="blueprint"] .btn-primary { background: transparent !important; color: var(--accent) !important; border: 1px solid var(--accent) !important; border-radius: 2px !important; font-family: "JetBrains Mono", monospace !important; text-transform: uppercase; letter-spacing: 0.1em; } html[data-theme="blueprint"] .btn-primary:hover { background: rgba(0,212,255,0.1) !important; box-shadow: 0 0 24px rgba(0,212,255,0.3) !important; } /* ════════════════════════════════════════════════════════════════ AGGRESSIVE THEMES — themes 11-20 Each one is a different ERA / WORLD, not a recolor. ════════════════════════════════════════════════════════════════ */ /* ─── 11. NEWSPAPER ────────────────────────────────────────────── 1920s broadsheet. Blackletter masthead, dropcaps, column rule. */ html[data-theme="newspaper"] { --bg: #f4ecd8; --bg-2: #fdf6e3; --bg-3: #eee2c8; --bg-dark: #1a1714; --accent: #1a1714; --accent-soft: #3a342c; --gold: #1a1714; --gold-soft: #3a342c; --text: #1a1714; --text-soft: #3a342c; --text-mute: #6b6354; --text-quiet: #8a8270; --border: #1a1714; --border-strong: #1a1714; --hairline: rgba(26,23,20,0.25); --nav-bg-scrolled: #f4ecd8; } html[data-theme="newspaper"] body { font-family: "Fraunces", "Times New Roman", "Georgia", serif !important; font-size: 17px !important; line-height: 1.5 !important; background: linear-gradient(rgba(0,0,0,0.025) 50%, transparent 50%) 0 0 / 100% 4px, #f4ecd8 !important; text-rendering: optimizeLegibility; } html[data-theme="newspaper"] h1 { font-family: "UnifrakturCook", "Fraunces", serif !important; font-weight: 900 !important; letter-spacing: -0.02em !important; text-align: center; border-top: 4px double #1a1714; border-bottom: 4px double #1a1714; padding: 0.4em 0; font-size: clamp(2.5rem, 7vw, 5rem) !important; } html[data-theme="newspaper"] h2 { font-family: "Fraunces", serif !important; font-weight: 900 !important; text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 2px solid #1a1714; padding-bottom: 8px; } html[data-theme="newspaper"] h2::before { content: ""; } html[data-theme="newspaper"] p::first-letter, html[data-theme="newspaper"] .shop-hero-sub::first-letter { font-size: 3em; font-weight: 900; float: left; line-height: 0.85; padding-right: 6px; padding-top: 6px; } html[data-theme="newspaper"] .nav { border-bottom: 4px double #1a1714 !important; background: #f4ecd8 !important; } html[data-theme="newspaper"] .project-card, html[data-theme="newspaper"] .case-card { background: #fdf6e3 !important; border: 1px solid #1a1714 !important; border-radius: 0 !important; box-shadow: none !important; column-rule: 1px solid #1a1714; } html[data-theme="newspaper"] .btn-primary { background: #1a1714 !important; color: #f4ecd8 !important; border-radius: 0 !important; font-family: "Fraunces", serif !important; text-transform: uppercase; letter-spacing: 0.1em; border: none !important; padding: 12px 28px !important; } /* ─── 12. MEMPHIS 80s ──────────────────────────────────────────── Squiggles, polka dots, Pop-Art clash colors, jolts of energy. */ html[data-theme="memphis"] { --bg: #fef6e4; --bg-2: #ffffff; --bg-3: #f6e7c1; --bg-dark: #001858; --accent: #f582ae; --accent-soft: #ffa5c5; --gold: #8bd3dd; --gold-soft: #b8e8f0; --text: #001858; --text-soft: #172c66; --text-mute: #5b6c93; --text-quiet: #8c9bb8; --border: #001858; --border-strong: #001858; --hairline: rgba(0,24,88,0.15); --nav-bg-scrolled: rgba(254,246,228,0.96); } html[data-theme="memphis"] body { font-family: "Inter", system-ui, sans-serif !important; background: radial-gradient(circle at 10% 20%, #f582ae 0, #f582ae 6px, transparent 7px) 0 0 / 80px 80px, radial-gradient(circle at 70% 70%, #8bd3dd 0, #8bd3dd 4px, transparent 5px) 0 0 / 60px 60px, linear-gradient(135deg, transparent 47%, #fbd024 47%, #fbd024 53%, transparent 53%) 0 0 / 200px 200px, #fef6e4 !important; background-attachment: fixed !important; } html[data-theme="memphis"] h1, html[data-theme="memphis"] h2 { font-family: "Fraunces", "Inter", sans-serif !important; font-weight: 900 !important; letter-spacing: -0.04em; text-transform: uppercase; -webkit-text-stroke: 2px #001858; color: #fbd024; } html[data-theme="memphis"] .nav { border-bottom: 4px solid #001858 !important; } html[data-theme="memphis"] .project-card, html[data-theme="memphis"] .case-card, html[data-theme="memphis"] .ai-card { background: #fff !important; border: 3px solid #001858 !important; border-radius: 24px 4px 24px 4px !important; box-shadow: 8px 8px 0 #f582ae, 16px 16px 0 #8bd3dd !important; transition: transform 0.2s !important; } html[data-theme="memphis"] .project-card:hover { transform: rotate(-2deg) scale(1.03); } html[data-theme="memphis"] .project-card:nth-child(even) { box-shadow: 8px 8px 0 #8bd3dd, 16px 16px 0 #fbd024 !important; } html[data-theme="memphis"] .btn-primary { background: #fbd024 !important; color: #001858 !important; border: 3px solid #001858 !important; border-radius: 999px !important; box-shadow: 5px 5px 0 #001858 !important; font-weight: 800; text-transform: uppercase; padding: 14px 32px !important; } html[data-theme="memphis"] .btn-primary:hover { transform: translate(-2px,-2px); box-shadow: 7px 7px 0 #001858 !important; } /* ─── 13. Y2K FRUTIGER AERO ────────────────────────────────────── Glossy, bubbly, sky-blue, 2003 chrome buttons. */ html[data-theme="y2k"] { --bg: #c2e9ff; --bg-2: #ffffff; --bg-3: #e0f4ff; --bg-dark: #1e3a5f; --accent: #0066ff; --accent-soft: #4d94ff; --gold: #00d4ff; --gold-soft: #4dddff; --text: #1e3a5f; --text-soft: #3a5a82; --text-mute: #6b8aab; --text-quiet: #a0b8d0; --border: rgba(30,58,95,0.2); --border-strong: rgba(30,58,95,0.5); --hairline: rgba(30,58,95,0.08); --nav-bg-scrolled: rgba(194,233,255,0.85); } html[data-theme="y2k"] body { font-family: "Inter", "Segoe UI", sans-serif !important; background: radial-gradient(ellipse at top, #ffffff 0%, #c2e9ff 40%, #7dc5f5 100%) !important; background-attachment: fixed !important; min-height: 100vh; } html[data-theme="y2k"] h1, html[data-theme="y2k"] h2 { font-family: "Inter", sans-serif !important; font-weight: 700 !important; background: linear-gradient(180deg, #ffffff 0%, #b8e0ff 50%, #5da8e8 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 2px 4px rgba(0,102,255,0.4)); letter-spacing: -0.02em; } html[data-theme="y2k"] .project-card, html[data-theme="y2k"] .case-card, html[data-theme="y2k"] .ai-card { background: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(220,240,255,0.85) 100%) !important; border: 1px solid rgba(255,255,255,0.8) !important; border-radius: 24px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,1), inset 0 -1px 0 rgba(0,102,255,0.1), 0 8px 24px rgba(0,102,255,0.2), 0 2px 8px rgba(0,102,255,0.1) !important; backdrop-filter: blur(10px); } html[data-theme="y2k"] .btn-primary { background: linear-gradient(180deg, #4d94ff 0%, #0066ff 50%, #003d99 100%) !important; color: #fff !important; border-radius: 999px !important; border: 1px solid rgba(255,255,255,0.4) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 4px 12px rgba(0,102,255,0.5) !important; text-shadow: 0 1px 2px rgba(0,0,0,0.3); padding: 12px 28px !important; } /* ─── 14. VAPORWAVE ────────────────────────────────────────────── A E S T H E T I C ・ pink/cyan, grids, Greco-Roman vibes. */ html[data-theme="vaporwave"] { --bg: #1a0033; --bg-2: #2d0052; --bg-3: #3d0066; --bg-dark: #0a001a; --accent: #ff71ce; --accent-soft: #ff9ee0; --gold: #01cdfe; --gold-soft: #5cdfff; --text: #ffffff; --text-soft: #ffb6e1; --text-mute: #a78bfa; --text-quiet: #6d4aa8; --border: rgba(255,113,206,0.4); --border-strong: #ff71ce; --hairline: rgba(255,113,206,0.15); --nav-bg-scrolled: rgba(26,0,51,0.85); } html[data-theme="vaporwave"] body { font-family: "Inter", sans-serif !important; background: linear-gradient(180deg, #1a0033 0%, #ff71ce 70%, #01cdfe 100%), repeating-linear-gradient(90deg, transparent 0, transparent 60px, rgba(255,113,206,0.2) 60px, rgba(255,113,206,0.2) 61px) !important; background-attachment: fixed !important; position: relative; } html[data-theme="vaporwave"] body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1; background: linear-gradient(0deg, rgba(1,205,254,0.4) 1px, transparent 1px) 0 0 / 50px 50px, linear-gradient(90deg, rgba(1,205,254,0.4) 1px, transparent 1px) 0 0 / 50px 50px; transform: perspective(400px) rotateX(60deg) translateY(50%); transform-origin: center bottom; mask-image: linear-gradient(180deg, transparent 0%, #000 50%, #000 100%); } html[data-theme="vaporwave"] h1, html[data-theme="vaporwave"] h2 { font-family: "Fraunces", serif !important; font-style: italic; letter-spacing: 0.3em !important; text-transform: uppercase; text-shadow: 4px 4px 0 #01cdfe, 8px 8px 0 #ff71ce; color: #fff; } html[data-theme="vaporwave"] .project-card, html[data-theme="vaporwave"] .case-card { background: rgba(45,0,82,0.7) !important; backdrop-filter: blur(10px); border: 1px solid #ff71ce !important; border-radius: 0 !important; box-shadow: 4px 4px 0 #01cdfe, 8px 8px 0 #ff71ce !important; } html[data-theme="vaporwave"] .btn-primary { background: linear-gradient(135deg, #ff71ce, #01cdfe) !important; border-radius: 0 !important; color: #fff !important; text-shadow: 2px 2px 0 #1a0033; letter-spacing: 0.2em; text-transform: uppercase; box-shadow: 4px 4px 0 #1a0033 !important; } /* ─── 15. TACTICAL / MIL-SPEC ──────────────────────────────────── Olive drab, stenciled, dossier, redacted bars. */ html[data-theme="tactical"] { --bg: #1c1f0f; --bg-2: #2d3318; --bg-3: #252913; --bg-dark: #0a0c05; --accent: #d4a217; --accent-soft: #f0c040; --gold: #d4a217; --gold-soft: #f0c040; --text: #d4d4a0; --text-soft: #a8a87a; --text-mute: #7a7a58; --text-quiet: #4a4a38; --border: #4a4a28; --border-strong: #6a6a38; --hairline: rgba(212,162,23,0.15); --nav-bg-scrolled: rgba(28,31,15,0.98); } html[data-theme="tactical"] body { font-family: "JetBrains Mono", "Courier New", monospace !important; font-size: 14px !important; background: repeating-linear-gradient(45deg, transparent, transparent 4px, rgba(212,162,23,0.02) 4px, rgba(212,162,23,0.02) 5px), #1c1f0f !important; text-transform: none; } html[data-theme="tactical"] h1, html[data-theme="tactical"] h2, html[data-theme="tactical"] h3 { font-family: "JetBrains Mono", monospace !important; text-transform: uppercase !important; letter-spacing: 0.15em !important; font-weight: 700 !important; } html[data-theme="tactical"] h1::before { content: "▌CLASSIFIED ▌ "; color: #d4a217; font-size: 0.5em; vertical-align: middle; } html[data-theme="tactical"] h2::before { content: "▶ "; color: #d4a217; } html[data-theme="tactical"] .nav { border-bottom: 2px solid #d4a217 !important; } html[data-theme="tactical"] .project-card, html[data-theme="tactical"] .case-card, html[data-theme="tactical"] .ai-card { background: #2d3318 !important; border: 1px solid #4a4a28 !important; border-radius: 0 !important; box-shadow: inset 0 0 0 4px #1c1f0f, 0 4px 0 #0a0c05 !important; position: relative; } html[data-theme="tactical"] .project-card::before, html[data-theme="tactical"] .case-card::before { content: "// FILE #" attr(data-reveal) " — RESTRICTED"; position: absolute; top: 0; left: 0; right: 0; background: #d4a217; color: #1c1f0f; padding: 4px 12px; font-family: "JetBrains Mono", monospace; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.2em; } html[data-theme="tactical"] .btn-primary { background: #d4a217 !important; color: #1c1f0f !important; border: 2px solid #1c1f0f !important; border-radius: 0 !important; font-family: "JetBrains Mono", monospace !important; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; box-shadow: 4px 4px 0 #1c1f0f !important; } /* ─── 16. HAND-DRAWN / SKETCH ──────────────────────────────────── Wobbly borders, handwriting, paper, Excalidraw vibes. */ html[data-theme="sketch"] { --bg: #fffef7; --bg-2: #ffffff; --bg-3: #f7f5e8; --bg-dark: #2d2a26; --accent: #2d2a26; --accent-soft: #4a4540; --gold: #e85a4f; --gold-soft: #f08580; --text: #2d2a26; --text-soft: #4a4540; --text-mute: #786f66; --text-quiet: #aaa093; --border: #2d2a26; --border-strong: #2d2a26; --hairline: rgba(45,42,38,0.15); --nav-bg-scrolled: rgba(255,254,247,0.96); } html[data-theme="sketch"] body { font-family: "Caveat", "Comic Sans MS", "Patrick Hand", cursive !important; font-size: 19px !important; line-height: 1.6 !important; background: radial-gradient(circle at 1px 1px, rgba(45,42,38,0.08) 1px, transparent 1px) 0 0 / 24px 24px, #fffef7 !important; } html[data-theme="sketch"] h1, html[data-theme="sketch"] h2, html[data-theme="sketch"] h3 { font-family: "Caveat", cursive !important; font-weight: 700 !important; transform: rotate(-1deg); display: inline-block; } html[data-theme="sketch"] h2 { transform: rotate(0.5deg); } html[data-theme="sketch"] .nav { border-bottom: 2px dashed #2d2a26 !important; } html[data-theme="sketch"] .project-card, html[data-theme="sketch"] .case-card, html[data-theme="sketch"] .ai-card { background: #fff !important; border: 2px solid #2d2a26 !important; border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px !important; box-shadow: 3px 3px 0 #2d2a26 !important; transition: transform 0.3s !important; } html[data-theme="sketch"] .project-card:nth-child(odd) { transform: rotate(-1deg); } html[data-theme="sketch"] .project-card:nth-child(even) { transform: rotate(1deg); } html[data-theme="sketch"] .project-card:hover { transform: rotate(0deg) scale(1.03); } html[data-theme="sketch"] .btn, html[data-theme="sketch"] .btn-primary { background: #fffef7 !important; color: #2d2a26 !important; border: 2px solid #2d2a26 !important; border-radius: 100px 5px 100px 5px / 5px 100px 5px 100px !important; font-family: "Caveat", cursive !important; font-weight: 700; font-size: 1.1rem !important; box-shadow: 3px 3px 0 #e85a4f !important; padding: 10px 24px !important; } /* ─── 17. PIXEL / 8-BIT ────────────────────────────────────────── NES era, pixelated borders, scanlines, dithered shadows. */ html[data-theme="pixel"] { --bg: #1a1c2e; --bg-2: #2d3155; --bg-3: #232649; --bg-dark: #0c0d1a; --accent: #ffd700; --accent-soft: #fff04d; --gold: #ffd700; --gold-soft: #fff04d; --text: #ffffff; --text-soft: #c0c4e0; --text-mute: #8088b8; --text-quiet: #4c5388; --border: #ffd700; --border-strong: #ffffff; --hairline: rgba(255,215,0,0.2); --nav-bg-scrolled: rgba(26,28,46,0.98); } html[data-theme="pixel"] body { font-family: "Press Start 2P", "VT323", "Courier New", monospace !important; font-size: 13px !important; line-height: 1.9 !important; background: #1a1c2e !important; image-rendering: pixelated; -webkit-font-smoothing: none !important; } html[data-theme="pixel"] * { image-rendering: pixelated; -webkit-font-smoothing: none !important; } html[data-theme="pixel"] h1, html[data-theme="pixel"] h2, html[data-theme="pixel"] h3 { font-family: "Press Start 2P", monospace !important; text-shadow: 3px 3px 0 #ff0058, 6px 6px 0 #0099ff; letter-spacing: 0.05em !important; font-size: clamp(1rem, 4vw, 2.5rem) !important; } html[data-theme="pixel"] .nav { border-bottom: 4px solid transparent !important; border-image: repeating-linear-gradient(90deg, #ffd700 0 8px, transparent 8px 16px) 4 !important; } html[data-theme="pixel"] .project-card, html[data-theme="pixel"] .case-card, html[data-theme="pixel"] .ai-card { background: #2d3155 !important; border-radius: 0 !important; border: 4px solid #ffd700 !important; box-shadow: inset -4px -4px 0 #0c0d1a, inset 4px 4px 0 #fff04d, 8px 8px 0 #ff0058 !important; } html[data-theme="pixel"] .btn, html[data-theme="pixel"] .btn-primary { background: #ff0058 !important; color: #fff !important; border-radius: 0 !important; border: 0 !important; box-shadow: inset -3px -3px 0 #99003d, inset 3px 3px 0 #ff80a0, 4px 4px 0 #0c0d1a !important; font-family: "Press Start 2P", monospace !important; font-size: 0.7rem !important; text-transform: uppercase; padding: 14px 24px !important; } html[data-theme="pixel"] .btn:hover { transform: translate(2px,2px); box-shadow: inset -3px -3px 0 #99003d, inset 3px 3px 0 #ff80a0, 2px 2px 0 #0c0d1a !important; } /* ─── 18. MATERIAL YOU ─────────────────────────────────────────── Google M3 — huge rounded corners, soft, dynamic color. */ html[data-theme="material"] { --bg: #fef7ff; --bg-2: #ffffff; --bg-3: #f7ecf9; --bg-dark: #1c1b1f; --accent: #6750a4; --accent-soft: #8675c4; --gold: #6750a4; --gold-soft: #8675c4; --text: #1c1b1f; --text-soft: #49454f; --text-mute: #79747e; --text-quiet: #b8b3bf; --border: #e7e0ec; --border-strong: #cac4d0; --hairline: rgba(28,27,31,0.05); --nav-bg-scrolled: rgba(254,247,255,0.96); } html[data-theme="material"] body { font-family: "Roboto", "Inter", system-ui, sans-serif !important; } html[data-theme="material"] h1, html[data-theme="material"] h2, html[data-theme="material"] h3 { font-family: "Roboto", "Inter", sans-serif !important; font-weight: 400 !important; letter-spacing: -0.02em; color: #1c1b1f; } html[data-theme="material"] h1 { font-weight: 300 !important; font-size: clamp(2.5rem, 6vw, 4rem) !important; } html[data-theme="material"] .nav { background: rgba(254,247,255,0.85) !important; backdrop-filter: blur(20px); border: none !important; } html[data-theme="material"] .project-card, html[data-theme="material"] .case-card, html[data-theme="material"] .ai-card { background: #f7ecf9 !important; border: none !important; border-radius: 28px !important; box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 4px 16px rgba(103,80,164,0.08) !important; transition: all 0.3s cubic-bezier(0.2,0,0,1) !important; } html[data-theme="material"] .project-card:hover { background: #ede0f0 !important; box-shadow: 0 8px 24px rgba(103,80,164,0.15) !important; } html[data-theme="material"] .btn-primary { background: #6750a4 !important; color: #fff !important; border-radius: 100px !important; border: none !important; padding: 14px 32px !important; font-weight: 500 !important; box-shadow: 0 1px 2px rgba(0,0,0,0.1) !important; } html[data-theme="material"] .btn-primary:hover { background: #7a63b8 !important; box-shadow: 0 4px 8px rgba(103,80,164,0.3) !important; } /* ─── 19. SWISS / BAUHAUS ──────────────────────────────────────── Strict grid, Helvetica, primary colors, geometric. */ html[data-theme="swiss"] { --bg: #ffffff; --bg-2: #fafafa; --bg-3: #f0f0f0; --bg-dark: #000000; --accent: #ff0000; --accent-soft: #ff3333; --gold: #0000ff; --gold-soft: #3333ff; --text: #000000; --text-soft: #1a1a1a; --text-mute: #666; --text-quiet: #aaa; --border: #000000; --border-strong: #000000; --hairline: rgba(0,0,0,0.1); --nav-bg-scrolled: rgba(255,255,255,0.98); } html[data-theme="swiss"] body { font-family: "Helvetica", "Helvetica Neue", "Inter", Arial, sans-serif !important; background: linear-gradient(90deg, transparent calc(50% - 0.5px), rgba(0,0,0,0.04) calc(50% - 0.5px), rgba(0,0,0,0.04) calc(50% + 0.5px), transparent calc(50% + 0.5px)), #fff !important; } html[data-theme="swiss"] h1 { font-family: "Helvetica", "Inter", sans-serif !important; font-weight: 900 !important; letter-spacing: -0.05em !important; line-height: 0.9 !important; font-size: clamp(4rem, 14vw, 10rem) !important; text-transform: uppercase; } html[data-theme="swiss"] h2 { font-family: "Helvetica", sans-serif !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: -0.02em; } html[data-theme="swiss"] .nav { border-bottom: 2px solid #000 !important; } html[data-theme="swiss"] .project-card, html[data-theme="swiss"] .case-card { background: #fff !important; border: none !important; border-top: 2px solid #000 !important; border-left: 2px solid #000 !important; border-radius: 0 !important; box-shadow: none !important; position: relative; } html[data-theme="swiss"] .project-card::before { content: ""; position: absolute; top: 0; right: 0; width: 60px; height: 60px; background: #ff0000; } html[data-theme="swiss"] .project-card:nth-child(2n)::before { background: #0000ff; border-radius: 50%; } html[data-theme="swiss"] .project-card:nth-child(3n)::before { background: #ffd900; clip-path: polygon(50% 0, 100% 100%, 0 100%); } html[data-theme="swiss"] .btn-primary { background: #000 !important; color: #fff !important; border-radius: 0 !important; border: none !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: 0.05em; padding: 16px 40px !important; } /* ─── 20. LIQUID GLASS (Apple Vision) ──────────────────────────── Reflective frosted glass, depth shadows, pearlescent. */ html[data-theme="liquid"] { --bg: #e8e3dc; --bg-2: rgba(255,255,255,0.5); --bg-3: rgba(255,255,255,0.3); --bg-dark: #1a1817; --accent: #6b7c93; --accent-soft: #8a9bb0; --gold: #c4a577; --gold-soft: #d4b888; --text: #1a1817; --text-soft: #4a4540; --text-mute: #7a7570; --text-quiet: #aaa593; --border: rgba(255,255,255,0.6); --border-strong: rgba(255,255,255,0.9); --hairline: rgba(255,255,255,0.4); --nav-bg-scrolled: rgba(232,227,220,0.5); } html[data-theme="liquid"] body { font-family: "SF Pro Display", "Inter", -apple-system, sans-serif !important; background: radial-gradient(circle at 20% 30%, rgba(196,165,119,0.4) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(107,124,147,0.3) 0%, transparent 50%), radial-gradient(circle at 50% 50%, rgba(255,255,255,0.5) 0%, transparent 70%), linear-gradient(135deg, #e8e3dc 0%, #d4cec5 100%) !important; background-attachment: fixed !important; min-height: 100vh; } html[data-theme="liquid"] h1, html[data-theme="liquid"] h2 { font-family: "SF Pro Display", "Inter", sans-serif !important; font-weight: 300 !important; letter-spacing: -0.03em !important; } html[data-theme="liquid"] .nav { background: rgba(255,255,255,0.4) !important; backdrop-filter: blur(40px) saturate(180%); -webkit-backdrop-filter: blur(40px) saturate(180%); border: 1px solid rgba(255,255,255,0.6) !important; border-top: none !important; border-radius: 0 0 24px 24px !important; } html[data-theme="liquid"] .project-card, html[data-theme="liquid"] .case-card, html[data-theme="liquid"] .ai-card { background: rgba(255,255,255,0.45) !important; backdrop-filter: blur(30px) saturate(200%); -webkit-backdrop-filter: blur(30px) saturate(200%); border: 1px solid rgba(255,255,255,0.8) !important; border-radius: 32px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,1), inset 0 -1px 0 rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.05), 0 20px 40px -10px rgba(0,0,0,0.15), 0 30px 60px -20px rgba(107,124,147,0.2) !important; transition: transform 0.5s cubic-bezier(0.16,1,0.3,1), box-shadow 0.5s !important; } html[data-theme="liquid"] .project-card:hover { transform: translateY(-6px) scale(1.01); box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 30px 60px -10px rgba(107,124,147,0.3), 0 50px 100px -30px rgba(0,0,0,0.2) !important; } html[data-theme="liquid"] .btn-primary { background: rgba(255,255,255,0.7) !important; backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.9) !important; border-radius: 100px !important; color: #1a1817 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,1), inset 0 -1px 0 rgba(0,0,0,0.1), 0 8px 24px rgba(0,0,0,0.1) !important; padding: 14px 32px !important; } /* ════════════════════════════════════════════════════════════════ Immersive themes — full-takeover, monospace, glow, optional canvas backdrop. Each is its own world. Canvas is driven by SiteFeatures.astro and activates when one of the canvas-based themes is the active data-theme. ════════════════════════════════════════════════════════════════ */ /* ── MATRIX (green katakana rain · full takeover) ─────────────── The legacy `data-secret="matrix"` selector still works so the Konami-code easter egg keeps unlocking matrix without overwriting the CMS theme. New canonical activation: data-theme="matrix". */ html[data-theme="matrix"], html[data-secret="matrix"] { --bg: #000; --bg-2: #040a04; --bg-3: #020602; --bg-dark: #000; --accent: #00ff66; --accent-soft: #4dffa0; --gold: #00ff66; --gold-soft: #4dffa0; --text: #00ff66; --text-soft: #00cc52; --text-mute: #009938; --text-quiet: #006625; --border: #00ff66; --border-strong: #00ff66; --hairline: rgba(0,255,102,0.18); background: #000 !important; } html[data-theme="matrix"] body, html[data-secret="matrix"] body { background: transparent !important; color: #00ff66 !important; font-family: "JetBrains Mono", "Courier New", monospace !important; } html[data-theme="matrix"] body *, html[data-secret="matrix"] body * { text-shadow: 0 0 8px rgba(0,255,102,0.5) !important; } html[data-theme="matrix"] .nav, html[data-secret="matrix"] .nav, html[data-theme="matrix"] .project-card, html[data-secret="matrix"] .project-card, html[data-theme="matrix"] .case, html[data-secret="matrix"] .case, html[data-theme="matrix"] .skill-card, html[data-secret="matrix"] .skill-card, html[data-theme="matrix"] .testimonial, html[data-secret="matrix"] .testimonial { background: rgba(0,0,0,0.55) !important; border: 1px solid #00ff66 !important; color: #00ff66 !important; } html[data-theme="matrix"] h1, html[data-secret="matrix"] h1, html[data-theme="matrix"] h2, html[data-secret="matrix"] h2, html[data-theme="matrix"] h3, html[data-secret="matrix"] h3 { color: #00ff66 !important; background: none !important; -webkit-text-fill-color: #00ff66 !important; text-shadow: 0 0 12px #00ff66, 0 0 24px rgba(0,255,102,0.4) !important; } html[data-theme="matrix"] .btn, html[data-secret="matrix"] .btn, html[data-theme="matrix"] .btn-primary, html[data-secret="matrix"] .btn-primary { background: transparent !important; border: 1px solid #00ff66 !important; color: #00ff66 !important; } /* ── REDTEAM (deep red · cut-corner panels · tactical aesthetic) ─── Differentiation from matrix: pure crimson #ff003f (no pink shift), sharp angular panels with double borders, NO rounded corners anywhere, system warning chevrons in card corners, slab-style prefixes on h2 ("» "), warning ribbon look. */ html[data-theme="redteam"] { --bg: #000; --bg-2: #0a0202; --bg-3: #060101; --bg-dark: #000; --accent: #ff003f; --accent-soft: #ff4060; --gold: #ff003f; --gold-soft: #ff4060; --text: #ff003f; --text-soft: #cc0033; --text-mute: #990028; --text-quiet: #66001c; --border: #ff003f; --border-strong: #ff003f; --hairline: rgba(255,0,63,0.2); background: #000 !important; } html[data-theme="redteam"] body { background: transparent !important; color: #ff003f !important; font-family: "JetBrains Mono", "Courier New", monospace !important; } html[data-theme="redteam"] body * { text-shadow: 0 0 6px rgba(255,0,63,0.85), 0 0 18px rgba(255,0,63,0.35) !important; } /* Kill rounded corners everywhere — redteam is angular */ html[data-theme="redteam"] *, html[data-theme="redteam"] .btn, html[data-theme="redteam"] .nav, html[data-theme="redteam"] .project-card, html[data-theme="redteam"] .case, html[data-theme="redteam"] .skill-card, html[data-theme="redteam"] .testimonial { border-radius: 0 !important; } /* Double red border panels with offset shadow (no glow box) */ html[data-theme="redteam"] .nav, html[data-theme="redteam"] .project-card, html[data-theme="redteam"] .case, html[data-theme="redteam"] .skill-card, html[data-theme="redteam"] .testimonial { background: rgba(0,0,0,0.72) !important; border: 2px solid #ff003f !important; outline: 1px solid #ff003f !important; outline-offset: 4px !important; color: #ff003f !important; position: relative; } /* Tactical corner brackets on cards (visible top-left + bottom-right) */ html[data-theme="redteam"] .project-card::before, html[data-theme="redteam"] .case::before, html[data-theme="redteam"] .skill-card::before { content: ""; position: absolute; top: -2px; left: -2px; width: 16px; height: 16px; border-top: 3px solid #ff003f; border-left: 3px solid #ff003f; box-shadow: 0 0 10px rgba(255,0,63,0.7); pointer-events: none; } html[data-theme="redteam"] .project-card::after, html[data-theme="redteam"] .case::after, html[data-theme="redteam"] .skill-card::after { content: ""; position: absolute; bottom: -2px; right: -2px; width: 16px; height: 16px; border-bottom: 3px solid #ff003f; border-right: 3px solid #ff003f; box-shadow: 0 0 10px rgba(255,0,63,0.7); pointer-events: none; } html[data-theme="redteam"] h1, html[data-theme="redteam"] h2, html[data-theme="redteam"] h3 { color: #ff003f !important; background: none !important; -webkit-text-fill-color: #ff003f !important; text-shadow: 0 0 14px #ff003f, 0 0 32px rgba(255,0,63,0.6) !important; } /* Section-head prefixes — slab-style, less twee than [breach] */ html[data-theme="redteam"] h2::before { content: "» "; opacity: 0.8; } html[data-theme="redteam"] h3::before { content: "› "; opacity: 0.65; } /* Button: sharp red box with offset shadow on hover */ html[data-theme="redteam"] .btn, html[data-theme="redteam"] .btn-primary { background: transparent !important; border: 2px solid #ff003f !important; color: #ff003f !important; box-shadow: 4px 4px 0 #ff003f, 4px 4px 12px rgba(255,0,63,0.4) !important; transition: transform 0.15s, box-shadow 0.15s !important; } html[data-theme="redteam"] .btn:hover, html[data-theme="redteam"] .btn-primary:hover { transform: translate(-2px, -2px) !important; box-shadow: 6px 6px 0 #ff003f, 6px 6px 18px rgba(255,0,63,0.55) !important; } /* ── HOLOGRAM (cyan Tron / particle grid backdrop) ─────────────── */ html[data-theme="hologram"] { --bg: #001824; --bg-2: #002a3a; --bg-3: #001f2e; --bg-dark: #000c12; --accent: #00e5ff; --accent-soft: #5cf2ff; --gold: #00e5ff; --gold-soft: #5cf2ff; --text: #a5f3fc; --text-soft: #67e8f9; --text-mute: #22d3ee; --text-quiet: #0891b2; --border: rgba(0,229,255,0.3); --border-strong: rgba(0,229,255,0.6); --hairline: rgba(0,229,255,0.12); background: #001824 !important; } html[data-theme="hologram"] body { background: transparent !important; color: #a5f3fc !important; font-family: "JetBrains Mono", monospace !important; } html[data-theme="hologram"] body * { text-shadow: 0 0 10px rgba(0,229,255,0.45) !important; } html[data-theme="hologram"] .nav, html[data-theme="hologram"] .project-card, html[data-theme="hologram"] .case, html[data-theme="hologram"] .skill-card, html[data-theme="hologram"] .testimonial { background: rgba(0,24,36,0.6) !important; border: 1px solid rgba(0,229,255,0.5) !important; color: #a5f3fc !important; box-shadow: 0 0 24px rgba(0,229,255,0.15), inset 0 0 24px rgba(0,229,255,0.05) !important; } html[data-theme="hologram"] h1, html[data-theme="hologram"] h2, html[data-theme="hologram"] h3 { color: #5cf2ff !important; background: none !important; -webkit-text-fill-color: #5cf2ff !important; text-shadow: 0 0 14px #00e5ff, 0 0 30px rgba(0,229,255,0.5) !important; } html[data-theme="hologram"] .btn, html[data-theme="hologram"] .btn-primary { background: rgba(0,229,255,0.08) !important; border: 1px solid #00e5ff !important; color: #a5f3fc !important; } /* ── AMBER CRT (orange phosphor · scanlines · no canvas) ─────── */ html[data-theme="amber-crt"] { --bg: #0a0500; --bg-2: #120800; --bg-3: #0a0500; --bg-dark: #000; --accent: #ffb000; --accent-soft: #ffc940; --gold: #ffb000; --gold-soft: #ffc940; --text: #ffb000; --text-soft: #cc8c00; --text-mute: #996900; --text-quiet: #664600; --border: #ffb000; --border-strong: #ffb000; --hairline: rgba(255,176,0,0.18); } html[data-theme="amber-crt"] body { background: #0a0500 !important; color: #ffb000 !important; font-family: "JetBrains Mono", "Courier New", monospace !important; } html[data-theme="amber-crt"] body * { text-shadow: 0 0 6px rgba(255,176,0,0.55), 0 0 16px rgba(255,176,0,0.25) !important; } html[data-theme="amber-crt"] body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9999; background: repeating-linear-gradient(0deg, rgba(0,0,0,0.18) 0, rgba(0,0,0,0.18) 1.5px, transparent 1.5px, transparent 4px); } html[data-theme="amber-crt"] body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9998; background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.55) 100%); } html[data-theme="amber-crt"] * { border-radius: 0 !important; } html[data-theme="amber-crt"] h1::before { content: "C:\\> "; opacity: 0.7; font-size: 0.6em; vertical-align: middle; } html[data-theme="amber-crt"] h2::before { content: "> "; opacity: 0.7; } html[data-theme="amber-crt"] .nav, html[data-theme="amber-crt"] .project-card, html[data-theme="amber-crt"] .case, html[data-theme="amber-crt"] .skill-card, html[data-theme="amber-crt"] .testimonial { background: #0a0500 !important; border: 1px solid #ffb000 !important; color: #ffb000 !important; box-shadow: inset 0 0 18px rgba(255,176,0,0.1), 0 0 20px rgba(255,176,0,0.18) !important; } html[data-theme="amber-crt"] h1, html[data-theme="amber-crt"] h2, html[data-theme="amber-crt"] h3 { color: #ffc940 !important; background: none !important; -webkit-text-fill-color: #ffc940 !important; text-shadow: 0 0 10px #ffb000, 0 0 22px rgba(255,176,0,0.5) !important; } html[data-theme="amber-crt"] .btn, html[data-theme="amber-crt"] .btn-primary { background: transparent !important; border: 1px solid #ffb000 !important; color: #ffb000 !important; } /* ════════════════════════════════════════════════════════════════ Theme upgrades — Batch 1 Y2K · VAPORWAVE · GLASS · LIQUID. Each gets a signature animated background, decorative pseudo-elements, and beefed-up cards/buttons so it reads as its own world, not a recolour. ════════════════════════════════════════════════════════════════ */ /* ─────────────────── Y2K (chrome + sky + bubbles) ─────────────── */ html[data-theme="y2k"] body { background: radial-gradient(ellipse at 20% 20%, rgba(255,255,255,0.85) 0%, transparent 40%), radial-gradient(ellipse at 80% 70%, rgba(180,220,255,0.6) 0%, transparent 50%), linear-gradient(180deg, #aedbff 0%, #d4ecff 40%, #ffc8e4 100%) !important; font-family: "Trebuchet MS", "Verdana", sans-serif !important; position: relative; overflow-x: hidden; } html[data-theme="y2k"] body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1; background: radial-gradient(circle at 10% 20%, rgba(255,255,255,0.85) 0px, transparent 6px), radial-gradient(circle at 30% 70%, rgba(255,255,255,0.7) 0px, transparent 5px), radial-gradient(circle at 50% 35%, rgba(255,255,255,0.6) 0px, transparent 8px), radial-gradient(circle at 70% 80%, rgba(255,255,255,0.75) 0px, transparent 7px), radial-gradient(circle at 85% 25%, rgba(255,255,255,0.65) 0px, transparent 6px), radial-gradient(circle at 15% 50%, rgba(255,255,255,0.5) 0px, transparent 4px); animation: y2kBubbles 18s linear infinite; } @keyframes y2kBubbles { from { background-position: 0 100vh, 0 100vh, 0 100vh, 0 100vh, 0 100vh, 0 100vh; } to { background-position: 0 -200vh, 0 -180vh, 0 -240vh, 0 -200vh, 0 -220vh, 0 -190vh; } } html[data-theme="y2k"] h1, html[data-theme="y2k"] h2, html[data-theme="y2k"] h3 { background: linear-gradient(180deg, #ffffff 0%, #5cb0ff 40%, #1d6dd0 70%, #ffffff 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; text-shadow: 0 2px 0 rgba(0,0,0,0.15), 0 0 16px rgba(98,178,255,0.4) !important; font-weight: 900 !important; letter-spacing: -0.02em !important; } html[data-theme="y2k"] .project-card, html[data-theme="y2k"] .case, html[data-theme="y2k"] .skill-card, html[data-theme="y2k"] .testimonial, html[data-theme="y2k"] .nav { background: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(220,235,255,0.85) 100%) !important; border: 1px solid rgba(255,255,255,1) !important; border-radius: 22px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,1), inset 0 -2px 4px rgba(120,160,210,0.25), 0 10px 24px rgba(80,140,220,0.18), 0 2px 6px rgba(80,140,220,0.12) !important; backdrop-filter: blur(8px) saturate(1.4); } html[data-theme="y2k"] .btn, html[data-theme="y2k"] .btn-primary { background: linear-gradient(180deg, #87cdff 0%, #4a9be8 45%, #1d6dd0 100%) !important; border: 1px solid #1556a8 !important; border-radius: 999px !important; color: #ffffff !important; font-weight: 700 !important; text-shadow: 0 1px 0 rgba(0,0,0,0.4) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), inset 0 -2px 4px rgba(0,0,0,0.2), 0 4px 12px rgba(29,109,208,0.4) !important; padding: 12px 26px !important; } /* ─────────────── VAPORWAVE (perspective grid + neon sun) ─────── */ html[data-theme="vaporwave"] body { background: radial-gradient(ellipse at 50% 75%, rgba(255,180,255,0.4) 0%, transparent 50%), radial-gradient(ellipse at 50% 100%, rgba(255,0,150,0.55) 0%, transparent 35%), linear-gradient(180deg, #1a0532 0%, #3b0e5e 35%, #d63384 75%, #ff80c8 100%) !important; font-family: "Inter", system-ui, sans-serif !important; position: relative; } /* Animated marching perspective grid */ html[data-theme="vaporwave"] body::before { content: ""; position: fixed; left: 0; right: 0; bottom: 0; height: 50vh; pointer-events: none; z-index: 0; background: /* vertical lines converging */ linear-gradient(180deg, transparent 0%, rgba(255,0,200,0.6) 100%), repeating-linear-gradient(180deg, transparent 0, transparent 38px, rgba(0,229,255,0.6) 38px, rgba(0,229,255,0.6) 40px), repeating-linear-gradient(90deg, transparent 0, transparent 40px, rgba(255,0,200,0.5) 40px, rgba(255,0,200,0.5) 42px); transform: perspective(400px) rotateX(60deg); transform-origin: top center; animation: vaporGrid 2.5s linear infinite; opacity: 0.85; } @keyframes vaporGrid { from { background-position: 0 0, 0 0, 0 0; } to { background-position: 0 0, 0 40px, 0 0; } } /* Sun disc on horizon (CSS only) */ html[data-theme="vaporwave"] body::after { content: ""; position: fixed; left: 50%; bottom: 38vh; width: 380px; height: 380px; transform: translateX(-50%); background: radial-gradient(circle, #fde047 0%, #fb923c 40%, #ec4899 80%, transparent 90%); border-radius: 50%; pointer-events: none; z-index: 0; box-shadow: 0 0 80px 20px rgba(251,113,133,0.45); /* Scanline cuts */ clip-path: polygon(0 0, 100% 0, 100% 60%, 95% 60%, 95% 63%, 100% 63%, 100% 70%, 92% 70%, 92% 73%, 100% 73%, 100% 80%, 88% 80%, 88% 83%, 100% 83%, 100% 90%, 82% 90%, 82% 93%, 100% 93%, 100% 100%, 0 100%); } html[data-theme="vaporwave"] h1, html[data-theme="vaporwave"] h2, html[data-theme="vaporwave"] h3 { color: #fff !important; -webkit-text-fill-color: #fff !important; text-shadow: 3px 3px 0 #ff00d0, 6px 6px 0 #00e5ff, 9px 9px 30px rgba(0,0,0,0.5) !important; font-weight: 900 !important; letter-spacing: -0.01em !important; } html[data-theme="vaporwave"] .project-card, html[data-theme="vaporwave"] .case, html[data-theme="vaporwave"] .skill-card, html[data-theme="vaporwave"] .testimonial { background: rgba(40, 10, 60, 0.65) !important; border: 2px solid #ff00d0 !important; box-shadow: 4px 4px 0 #00e5ff, 8px 8px 0 #fde047 !important; color: #fff !important; backdrop-filter: blur(6px); } html[data-theme="vaporwave"] .btn, html[data-theme="vaporwave"] .btn-primary { background: linear-gradient(135deg, #ff00d0 0%, #00e5ff 100%) !important; border: 2px solid #fff !important; color: #fff !important; font-weight: 800 !important; text-transform: uppercase; letter-spacing: 0.15em !important; box-shadow: 3px 3px 0 #fde047, 6px 6px 0 rgba(0,0,0,0.4) !important; } /* ─────────────────── GLASS (frosted backdrop) ──────────────────── */ html[data-theme="glass"] body { background: radial-gradient(ellipse at 25% 30%, rgba(96,165,250,0.45) 0%, transparent 50%), radial-gradient(ellipse at 75% 70%, rgba(167,139,250,0.40) 0%, transparent 50%), radial-gradient(ellipse at 50% 50%, rgba(52,211,153,0.18) 0%, transparent 60%), linear-gradient(135deg, #0c1226 0%, #1a1f3a 50%, #0c1226 100%) !important; background-size: 200% 200%, 200% 200%, 200% 200%, 100% 100%; animation: glassDrift 28s ease-in-out infinite; } @keyframes glassDrift { 0%, 100% { background-position: 0% 0%, 100% 100%, 50% 50%, 0 0; } 50% { background-position: 100% 100%, 0% 0%, 50% 50%, 0 0; } } /* Floating glass orbs */ html[data-theme="glass"] body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(circle at 15% 25%, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 80px, transparent 81px), radial-gradient(circle at 75% 60%, rgba(255,255,255,0.05) 0px, rgba(255,255,255,0.05) 120px, transparent 121px), radial-gradient(circle at 40% 85%, rgba(255,255,255,0.04) 0px, rgba(255,255,255,0.04) 60px, transparent 61px); animation: glassOrbs 32s linear infinite alternate; } @keyframes glassOrbs { from { transform: translateY(0); } to { transform: translateY(-40px); } } html[data-theme="glass"] .project-card, html[data-theme="glass"] .case, html[data-theme="glass"] .skill-card, html[data-theme="glass"] .testimonial, html[data-theme="glass"] .nav { background: rgba(255,255,255,0.07) !important; border: 1px solid rgba(255,255,255,0.18) !important; border-radius: 18px !important; backdrop-filter: blur(22px) saturate(1.5); box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), inset 0 -1px 0 rgba(0,0,0,0.2), 0 12px 36px rgba(0,0,0,0.4) !important; } html[data-theme="glass"] h1, html[data-theme="glass"] h2, html[data-theme="glass"] h3 { color: #f0f4ff !important; -webkit-text-fill-color: #f0f4ff !important; text-shadow: 0 2px 12px rgba(96,165,250,0.4), 0 0 30px rgba(96,165,250,0.25) !important; } html[data-theme="glass"] .btn-primary { background: rgba(96,165,250,0.25) !important; backdrop-filter: blur(12px); border: 1px solid rgba(96,165,250,0.5) !important; border-radius: 999px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 8px 24px rgba(96,165,250,0.3) !important; color: #f0f4ff !important; } /* ──────────── LIQUID (pearlescent shift + Vision glass) ────────── */ html[data-theme="liquid"] body { background: linear-gradient(135deg, #e8e3dc 0%, #f0d8e0 20%, #d8e8f0 40%, #e0f0e8 60%, #f0e8d8 80%, #e8e3dc 100%) !important; background-size: 400% 400%; animation: liquidShift 24s ease-in-out infinite; font-family: "Inter", system-ui, sans-serif !important; } @keyframes liquidShift { 0%, 100% { background-position: 0% 50%; } 25% { background-position: 100% 50%; } 50% { background-position: 100% 100%; } 75% { background-position: 0% 100%; } } /* Floating iridescent blob highlights */ html[data-theme="liquid"] body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(ellipse 600px 400px at 20% 30%, rgba(255,200,220,0.5) 0%, transparent 60%), radial-gradient(ellipse 500px 350px at 80% 70%, rgba(180,220,255,0.45) 0%, transparent 60%), radial-gradient(ellipse 400px 300px at 50% 90%, rgba(220,255,220,0.4) 0%, transparent 60%); filter: blur(40px); animation: liquidBlobs 28s ease-in-out infinite; } @keyframes liquidBlobs { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(40px, -30px) scale(1.08); } 66% { transform: translate(-30px, 40px) scale(0.95); } } html[data-theme="liquid"] .project-card, html[data-theme="liquid"] .case, html[data-theme="liquid"] .skill-card, html[data-theme="liquid"] .testimonial { background: rgba(255,255,255,0.55) !important; border: 1px solid rgba(255,255,255,0.85) !important; border-radius: 24px !important; backdrop-filter: blur(30px) saturate(1.6); box-shadow: inset 0 1px 0 rgba(255,255,255,1), inset 0 -1px 0 rgba(255,255,255,0.5), 0 20px 50px -10px rgba(107,124,147,0.25), 0 30px 80px -30px rgba(0,0,0,0.18) !important; color: #1a1817 !important; } html[data-theme="liquid"] h1, html[data-theme="liquid"] h2, html[data-theme="liquid"] h3 { background: linear-gradient(135deg, #6b7c93 0%, #ec4899 33%, #6b7c93 66%, #22d3ee 100%) !important; background-size: 200% 200%; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; animation: liquidPearl 8s ease-in-out infinite; font-weight: 800 !important; } @keyframes liquidPearl { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } html[data-theme="liquid"] .btn-primary { background: rgba(255,255,255,0.7) !important; backdrop-filter: blur(20px) saturate(1.5); border: 1px solid rgba(255,255,255,0.95) !important; border-radius: 100px !important; color: #1a1817 !important; font-weight: 600 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,1), inset 0 -1px 0 rgba(0,0,0,0.08), 0 8px 24px rgba(107,124,147,0.18) !important; padding: 14px 32px !important; } /* ════════════════════════════════════════════════════════════════════ Browser-preference light/dark variants for all 24 themes ──────────────────────────────────────────────────────────────────── Mirrors the @media blocks in /_shared/theme-vars.css. Lives at the end of themes.css so it wins over the per-theme `--bg` etc. defined inline above (same selector specificity, later source wins). Also nullifies the hardcoded background colours on immersive themes (matrix, redteam, hologram, amber-crt) and on themes with body-level background gradients (glass, terminal, vaporwave, y2k, liquid, blueprint, memphis, sketch, swiss, newspaper) so the new mode actually shows. Notes on character preservation: . Brutalist stays brutal in dark mode (pure black bg, hard white borders, same orange). . Terminal in light mode goes Solarized Light vibe — green-on-cream, mono intact. . Newspaper inverts to late-edition (cream-on-ink — full broadsheet feel). . Swiss inverts to International Style noir — red accent preserved on black. . Matrix/redteam/hologram/amber-crt CRT glow tuned down for the new background's contrast. ════════════════════════════════════════════════════════════════════ */ /* ── DARK-default themes → LIGHT variant ─────────────────────────── */ @media (prefers-color-scheme: light) { html[data-theme="executive-dark"] { --bg: #f7faf9; --bg-2: #ffffff; --bg-3: #ecf3f0; --bg-dark: #ffffff; --accent: #047857; --accent-soft: #059669; --gold: #047857; --gold-soft: #059669; --text: #0a1a14; --text-soft: #2d3f37; --text-mute: #5a6e64; --text-quiet: #8a9a92; --border: #d8e3df; --border-strong: #b6c4be; --hairline: rgba(10,26,20,0.06); --nav-bg-scrolled: rgba(247,250,249,0.95); --selection: rgba(4,120,87,0.18); } html[data-theme="glass"] { --bg: #eef4fb; --bg-2: rgba(255,255,255,0.7); --bg-3: rgba(255,255,255,0.5); --bg-dark: #dde7f3; --accent: #2563eb; --accent-soft: #3b82f6; --gold: #2563eb; --gold-soft: #3b82f6; --text: #0c1226; --text-soft: #2d3f6b; --text-mute: #5a6f96; --text-quiet: #8a9bb8; --border: rgba(12,18,38,0.12); --border-strong: rgba(12,18,38,0.25); --hairline: rgba(12,18,38,0.06); --nav-bg-scrolled: rgba(238,244,251,0.7); --selection: rgba(37,99,235,0.2); } html[data-theme="glass"] body { background: radial-gradient(ellipse at 25% 30%, rgba(96,165,250,0.25) 0%, transparent 50%), radial-gradient(ellipse at 75% 70%, rgba(167,139,250,0.20) 0%, transparent 50%), linear-gradient(135deg, #eef4fb 0%, #dde7f3 50%, #eef4fb 100%) !important; } html[data-theme="glass"] h1, html[data-theme="glass"] h2, html[data-theme="glass"] h3 { color: #0c1226 !important; -webkit-text-fill-color: #0c1226 !important; text-shadow: 0 1px 8px rgba(37,99,235,0.2) !important; } html[data-theme="terminal"] { /* Solarized Light vibe. */ --bg: #fdf6e3; --bg-2: #eee8d5; --bg-3: #f5efd8; --bg-dark: #fdf6e3; --accent: #2d7a3e; --accent-soft: #4a9e5e; --gold: #2d7a3e; --gold-soft: #4a9e5e; --text: #2d7a3e; --text-soft: #586e75; --text-mute: #657b83; --text-quiet: #93a1a1; --border: #2d7a3e; --border-strong: #2d7a3e; --hairline: rgba(45,122,62,0.18); --nav-bg-scrolled: rgba(253,246,227,0.96); --selection: rgba(45,122,62,0.22); } html[data-theme="terminal"] body { text-shadow: 0 0 4px rgba(45,122,62,0.25); } html[data-theme="neon-tokyo"] { --bg: #fff5fa; --bg-2: #ffffff; --bg-3: #fbe8f2; --bg-dark: #fcdfeb; --accent: #d40060; --accent-soft: #ff1f80; --gold: #008a9a; --gold-soft: #00b0c0; --text: #1a0010; --text-soft: #4a1530; --text-mute: #7a3658; --text-quiet: #a878a0; --border: rgba(212,0,96,0.28); --border-strong: #d40060; --hairline: rgba(212,0,96,0.12); --nav-bg-scrolled: rgba(255,245,250,0.92); --selection: rgba(212,0,96,0.22); } html[data-theme="neon-tokyo"] body { background: linear-gradient(135deg, #fff5fa 0%, #fbe8f2 100%) !important; } html[data-theme="neon-tokyo"] h1, html[data-theme="neon-tokyo"] h2 { text-shadow: 0 0 12px rgba(212,0,96,0.25); } html[data-theme="blueprint"] { --bg: #f3f7fa; --bg-2: #ffffff; --bg-3: #e8eff5; --bg-dark: #dde8f0; --accent: #0066a8; --accent-soft: #0078c8; --gold: #0066a8; --gold-soft: #0078c8; --text: #0a1929; --text-soft: #2d4863; --text-mute: #5a7388; --text-quiet: #8a9eb0; --border: rgba(0,102,168,0.22); --border-strong: rgba(0,102,168,0.45); --hairline: rgba(0,102,168,0.08); --nav-bg-scrolled: rgba(243,247,250,0.95); --selection: rgba(0,102,168,0.2); } html[data-theme="blueprint"] body { background: linear-gradient(rgba(0,102,168,0.06) 1px, transparent 1px) 0 0 / 40px 40px, linear-gradient(90deg, rgba(0,102,168,0.06) 1px, transparent 1px) 0 0 / 40px 40px, #f3f7fa !important; } html[data-theme="vaporwave"] { --bg: #fef0fa; --bg-2: #ffffff; --bg-3: #fce0f0; --bg-dark: #f0c8e0; --accent: #c11a92; --accent-soft: #d63dad; --gold: #008a9a; --gold-soft: #00b0c0; --text: #2a0040; --text-soft: #4a1862; --text-mute: #7a4090; --text-quiet: #a878b8; --border: rgba(193,26,146,0.35); --border-strong: #c11a92; --hairline: rgba(193,26,146,0.12); --nav-bg-scrolled: rgba(254,240,250,0.9); --selection: rgba(193,26,146,0.22); } html[data-theme="vaporwave"] body { background: radial-gradient(ellipse at 50% 75%, rgba(193,26,146,0.18) 0%, transparent 50%), radial-gradient(ellipse at 50% 100%, rgba(255,180,220,0.4) 0%, transparent 35%), linear-gradient(180deg, #fef0fa 0%, #fce0f0 35%, #ffd6e8 75%, #ffe0e8 100%) !important; } html[data-theme="vaporwave"] h1, html[data-theme="vaporwave"] h2, html[data-theme="vaporwave"] h3 { color: #2a0040 !important; -webkit-text-fill-color: #2a0040 !important; text-shadow: 3px 3px 0 #ffb0d8, 6px 6px 0 #a0e0e8 !important; } html[data-theme="tactical"] { --bg: #ebe7d0; --bg-2: #f3efd9; --bg-3: #e0dbc2; --bg-dark: #d4cfb4; --accent: #8a6a10; --accent-soft: #a8841e; --gold: #8a6a10; --gold-soft: #a8841e; --text: #1c1f0f; --text-soft: #3a3d22; --text-mute: #5a5d3d; --text-quiet: #8a8b6a; --border: #b8b08a; --border-strong: #8a8260; --hairline: rgba(28,31,15,0.15); --nav-bg-scrolled: rgba(235,231,208,0.96); --selection: rgba(138,106,16,0.22); } html[data-theme="tactical"] body { background: repeating-linear-gradient(45deg, transparent, transparent 4px, rgba(28,31,15,0.04) 4px, rgba(28,31,15,0.04) 5px), #ebe7d0 !important; } html[data-theme="pixel"] { --bg: #f5f0e1; --bg-2: #ffffff; --bg-3: #ebe4d0; --bg-dark: #e0d8be; --accent: #b8860b; --accent-soft: #d49e1f; --gold: #b8860b; --gold-soft: #d49e1f; --text: #1a1c2e; --text-soft: #3d3f55; --text-mute: #6a6d80; --text-quiet: #98a0a8; --border: #b8860b; --border-strong: #1a1c2e; --hairline: rgba(184,134,11,0.22); --nav-bg-scrolled: rgba(245,240,225,0.98); --selection: rgba(184,134,11,0.3); } html[data-theme="pixel"] body { background: #f5f0e1 !important; } html[data-theme="pixel"] h1, html[data-theme="pixel"] h2, html[data-theme="pixel"] h3 { text-shadow: 3px 3px 0 #cc0044, 6px 6px 0 #0066aa !important; } /* ── Matrix Awakening / printed code-rain on cream paper, not glowing on black. Aged-zine xerox aesthetic. Deep ink-green type on warm paper stock with a faint columns-of-glyphs print-bleed effect (no glow, no animation for print fidelity). */ html[data-theme="matrix"] { --bg: #f4ecd8; --bg-2: #faf3df; --bg-3: #ece4d0; --bg-dark: #e3dbc7; --accent: #16702e; --accent-soft: #1e8540; --gold: #16702e; --gold-soft: #1e8540; --text: #1c2a1e; --text-soft: #3a4a3c; --text-mute: #5a6a5c; --text-quiet: #889a8a; --border: #c8c1ad; --border-strong: #a8a190; --hairline: rgba(28,42,30,0.10); --nav-bg-scrolled: rgba(244,236,216,0.94); --selection: rgba(22,112,46,0.20); background: #f4ecd8 !important; } html[data-theme="matrix"] body, html[data-secret="matrix"] body { background: /* Subtle paper-grain noise via stacked translucent radial spots */ radial-gradient(circle at 12% 18%, rgba(168,161,144,0.06) 0, transparent 0.4%), radial-gradient(circle at 78% 42%, rgba(168,161,144,0.05) 0, transparent 0.5%), radial-gradient(circle at 32% 88%, rgba(168,161,144,0.05) 0, transparent 0.4%), linear-gradient(180deg, #f4ecd8 0%, #ece4d0 100%) !important; color: #1c2a1e !important; } /* Print doesn't glow / clobber the dark-side text-shadow */ html[data-theme="matrix"] body *, html[data-secret="matrix"] body * { text-shadow: none !important; } /* Faint printed code-rain bleeding through the page / vertical glyph columns, dark-green ink at low opacity. No animation, like xerox columns frozen on paper. */ html[data-theme="matrix"] body::before, html[data-secret="matrix"] body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: repeating-linear-gradient(90deg, rgba(22,112,46,0.05) 0, rgba(22,112,46,0.05) 1px, transparent 1px, transparent 14px); opacity: 0.5; mix-blend-mode: multiply; } html[data-theme="matrix"] .nav, html[data-secret="matrix"] .nav, html[data-theme="matrix"] .project-card, html[data-secret="matrix"] .project-card, html[data-theme="matrix"] .case, html[data-secret="matrix"] .case, html[data-theme="matrix"] .skill-card, html[data-secret="matrix"] .skill-card, html[data-theme="matrix"] .testimonial, html[data-secret="matrix"] .testimonial { background: rgba(250,243,223,0.92) !important; border-color: #c8c1ad !important; color: #1c2a1e !important; box-shadow: none !important; } html[data-theme="matrix"] h1, html[data-secret="matrix"] h1, html[data-theme="matrix"] h2, html[data-secret="matrix"] h2, html[data-theme="matrix"] h3, html[data-secret="matrix"] h3 { color: #16702e !important; -webkit-text-fill-color: #16702e !important; text-shadow: none !important; } html[data-theme="matrix"] .btn, html[data-secret="matrix"] .btn, html[data-theme="matrix"] .btn-primary, html[data-secret="matrix"] .btn-primary { background: transparent !important; border-color: #16702e !important; color: #16702e !important; } /* ── Redteam Briefing / printed offensive-security after-action report. Bond-paper white with deep matte red ink. Hard black framing rules and a hairline-grid security watermark replace the glowing rain. */ html[data-theme="redteam"] { --bg: #fafaf8; --bg-2: #ffffff; --bg-3: #f4f4f0; --bg-dark: #ebebe6; --accent: #b8252a; --accent-soft: #d63339; --gold: #b8252a; --gold-soft: #d63339; --text: #1a1a1a; --text-soft: #3a3a3a; --text-mute: #5a5a5a; --text-quiet: #8a8a8a; --border: #c8c8c4; --border-strong: #1a1a1a; --hairline: rgba(26,26,26,0.12); --nav-bg-scrolled: rgba(250,250,248,0.95); --selection: rgba(184,37,42,0.18); background: #fafaf8 !important; } html[data-theme="redteam"] body { background: #fafaf8 !important; color: #1a1a1a !important; } /* Print doesn't glow */ html[data-theme="redteam"] body * { text-shadow: none !important; } /* Typewriter-grid security watermark / very faint hairline graph behind everything */ html[data-theme="redteam"] body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: linear-gradient(rgba(184,37,42,0.06) 1px, transparent 1px) 0 0 / 100% 24px, linear-gradient(90deg, rgba(26,26,26,0.04) 1px, transparent 1px) 0 0 / 12px 100%; opacity: 0.6; } /* Subtle SVG print-noise overlay / mimics toner speckle on bond paper */ html[data-theme="redteam"] body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1; background-image: url("data:image/svg+xml;utf8,"); opacity: 0.05; mix-blend-mode: multiply; } html[data-theme="redteam"] .nav, html[data-theme="redteam"] .project-card, html[data-theme="redteam"] .case, html[data-theme="redteam"] .skill-card, html[data-theme="redteam"] .testimonial { background: #ffffff !important; border: 2px solid #1a1a1a !important; outline-color: #b8252a !important; color: #1a1a1a !important; box-shadow: none !important; } /* Corner brackets retint to red ink, no glow */ html[data-theme="redteam"] .project-card::before, html[data-theme="redteam"] .case::before, html[data-theme="redteam"] .skill-card::before { border-top-color: #b8252a !important; border-left-color: #b8252a !important; box-shadow: none !important; } html[data-theme="redteam"] .project-card::after, html[data-theme="redteam"] .case::after, html[data-theme="redteam"] .skill-card::after { border-bottom-color: #b8252a !important; border-right-color: #b8252a !important; box-shadow: none !important; } html[data-theme="redteam"] h1, html[data-theme="redteam"] h2, html[data-theme="redteam"] h3 { color: #b8252a !important; -webkit-text-fill-color: #b8252a !important; text-shadow: none !important; border-bottom: 1px solid #1a1a1a; padding-bottom: 0.15em; } /* Button / hard black box with red ink, offset paper-shadow rule */ html[data-theme="redteam"] .btn, html[data-theme="redteam"] .btn-primary { background: #ffffff !important; border: 2px solid #1a1a1a !important; color: #b8252a !important; box-shadow: 3px 3px 0 #1a1a1a !important; } html[data-theme="redteam"] .btn:hover, html[data-theme="redteam"] .btn-primary:hover { transform: translate(-2px, -2px) !important; box-shadow: 5px 5px 0 #1a1a1a !important; } /* ── Hologram Blueprint / engineering schematic on drafting paper. Deep technical-drawing cyan on bright white. Faint cyan graph-paper grid behind. No glow / crisp pressed-ink type. Corner ruler-marks for full blueprint vibe. */ html[data-theme="hologram"] { --bg: #fbfcfd; --bg-2: #ffffff; --bg-3: #f0f4f8; --bg-dark: #e0e8f0; --accent: #0a6e9e; --accent-soft: #1a8ec0; --gold: #0a6e9e; --gold-soft: #1a8ec0; --text: #0a1a26; --text-soft: #2a3a48; --text-mute: #4a5a68; --text-quiet: #7a8a98; --border: #b8c8d4; --border-strong: #0a6e9e; --hairline: rgba(10,110,158,0.18); --nav-bg-scrolled: rgba(251,252,253,0.95); --selection: rgba(10,110,158,0.18); background: #fbfcfd !important; } html[data-theme="hologram"] body { background: #fbfcfd !important; color: #0a1a26 !important; } html[data-theme="hologram"] body * { text-shadow: none !important; } /* Cyan technical grid / 1px lines every 16px, hairline opacity / graph paper */ html[data-theme="hologram"] body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: linear-gradient(rgba(10,110,158,0.10) 1px, transparent 1px) 0 0 / 16px 16px, linear-gradient(90deg, rgba(10,110,158,0.10) 1px, transparent 1px) 0 0 / 16px 16px, linear-gradient(rgba(10,110,158,0.18) 1px, transparent 1px) 0 0 / 80px 80px, linear-gradient(90deg, rgba(10,110,158,0.18) 1px, transparent 1px) 0 0 / 80px 80px; } /* Corner ruler-marks / dimension-line tick numbers / pure CSS, no extra HTML */ html[data-theme="hologram"] body::after { content: "0 10 20 30 40 50 60 70 80 90 100"; position: fixed; top: 6px; left: 16px; right: 16px; pointer-events: none; z-index: 1; font-family: "JetBrains Mono", "Courier New", monospace; font-size: 9px; letter-spacing: 0.8em; color: rgba(10,110,158,0.35); white-space: nowrap; overflow: hidden; } html[data-theme="hologram"] .nav, html[data-theme="hologram"] .project-card, html[data-theme="hologram"] .case, html[data-theme="hologram"] .skill-card, html[data-theme="hologram"] .testimonial { background: rgba(255,255,255,0.92) !important; border: 1px solid #0a6e9e !important; color: #0a1a26 !important; box-shadow: none !important; } html[data-theme="hologram"] h1, html[data-theme="hologram"] h2, html[data-theme="hologram"] h3 { color: #0a6e9e !important; -webkit-text-fill-color: #0a6e9e !important; text-shadow: none !important; } html[data-theme="hologram"] .btn, html[data-theme="hologram"] .btn-primary { background: #ffffff !important; border: 1px solid #0a6e9e !important; color: #0a6e9e !important; box-shadow: none !important; } /* ── Amber Printout / 1970s vector-printer output on thermal-paper. Warm cream paper, deep amber-brown ink. Faint dot-matrix pin marks replace the glowing CRT scanlines. No CRT vignette. */ html[data-theme="amber-crt"] { --bg: #f8f0d8; --bg-2: #fdf6e0; --bg-3: #f0e8d0; --bg-dark: #e0d8c0; --accent: #a8650a; --accent-soft: #c47e1e; --gold: #a8650a; --gold-soft: #c47e1e; --text: #2a1a08; --text-soft: #4a3618; --text-mute: #6a5028; --text-quiet: #8a7458; --border: #d8c8a8; --border-strong: #a8650a; --hairline: rgba(168,101,10,0.18); --nav-bg-scrolled: rgba(248,240,216,0.95); --selection: rgba(168,101,10,0.20); } html[data-theme="amber-crt"] body { background: linear-gradient(180deg, #f8f0d8 0%, #f0e8d0 100%) !important; color: #2a1a08 !important; } /* Print doesn't glow */ html[data-theme="amber-crt"] body * { text-shadow: none !important; } /* Dot-matrix print-pin pattern / very fine vertical hairlines, very low opacity */ html[data-theme="amber-crt"] body::before { background: repeating-linear-gradient(90deg, rgba(168,101,10,0.08) 0, rgba(168,101,10,0.08) 0.5px, transparent 0.5px, transparent 3px) !important; opacity: 0.6; } /* Replace CRT vignette with thermal-paper roll edge / soft tear gradient at top + bottom */ html[data-theme="amber-crt"] body::after { background: linear-gradient(180deg, rgba(168,101,10,0.10) 0%, transparent 4%, transparent 96%, rgba(168,101,10,0.10) 100%) !important; } html[data-theme="amber-crt"] .nav, html[data-theme="amber-crt"] .project-card, html[data-theme="amber-crt"] .case, html[data-theme="amber-crt"] .skill-card, html[data-theme="amber-crt"] .testimonial { background: #fdf6e0 !important; border: 1px solid #d8c8a8 !important; color: #2a1a08 !important; box-shadow: none !important; } html[data-theme="amber-crt"] h1, html[data-theme="amber-crt"] h2, html[data-theme="amber-crt"] h3 { color: #a8650a !important; -webkit-text-fill-color: #a8650a !important; text-shadow: none !important; border-bottom: 1px solid #a8650a; padding-bottom: 0.12em; } html[data-theme="amber-crt"] .btn, html[data-theme="amber-crt"] .btn-primary { background: transparent !important; border: 1px solid #a8650a !important; color: #a8650a !important; } } /* ── LIGHT-default themes → DARK variant ─────────────────────────── */ @media (prefers-color-scheme: dark) { html[data-theme="corporate-clean"] { --bg: #0a1525; --bg-2: #112038; --bg-3: #0e1a2e; --bg-dark: #050b18; --accent: #4d9fe6; --accent-soft: #6cb0ec; --gold: #4d9fe6; --gold-soft: #6cb0ec; --text: #f0f4fa; --text-soft: #c0cad8; --text-mute: #8a96a8; --text-quiet: #5e6a7c; --border: #1f2e44; --border-strong: #2d3f58; --hairline: rgba(255,255,255,0.06); --nav-bg-scrolled: rgba(10,21,37,0.95); --selection: rgba(77,159,230,0.22); } html[data-theme="corporate-clean"] body { background: linear-gradient(180deg, #0a1525 0%, #050b18 100%) !important; } html[data-theme="corporate-clean"] .project-card, html[data-theme="corporate-clean"] .case-card, html[data-theme="corporate-clean"] .ai-card { background: #112038 !important; box-shadow: 0 1px 3px rgba(0,0,0,0.3), 0 4px 16px rgba(0,0,0,0.4) !important; } html[data-theme="creative-studio"] { --bg: #1a0f12; --bg-2: #261820; --bg-3: #1f1218; --bg-dark: #0d0608; --accent: #ff6b85; --accent-soft: #ff8aa0; --gold: #ff6b85; --gold-soft: #ff8aa0; --text: #fbeef0; --text-soft: #d8c0c6; --text-mute: #a08890; --text-quiet: #6a5860; --border: #3a2530; --border-strong: #553848; --hairline: rgba(255,255,255,0.06); --nav-bg-scrolled: rgba(26,15,18,0.92); --selection: rgba(255,107,133,0.25); } html[data-theme="brutalist"] { --bg: #0a0a0a; --bg-2: #000000; --bg-3: #141414; --bg-dark: #ffffff; --accent: #ff5500; --accent-soft: #ff7733; --gold: #ff5500; --gold-soft: #ff7733; --text: #ffffff; --text-soft: #dddddd; --text-mute: #bbbbbb; --text-quiet: #777777; --border: #ffffff; --border-strong: #ffffff; --hairline: #ffffff; --nav-bg-scrolled: #0a0a0a; --selection: rgba(255,85,0,0.4); } html[data-theme="brutalist"] .nav { border-bottom-color: #ffffff !important; } html[data-theme="brutalist"] .project-card, html[data-theme="brutalist"] .case-card, html[data-theme="brutalist"] .ai-card { background: #000000 !important; border-color: #ffffff !important; } html[data-theme="brutalist"] .project-card:hover, html[data-theme="brutalist"] .case-card:hover { box-shadow: 8px 8px 0 #ffffff !important; } html[data-theme="brutalist"] .btn, html[data-theme="brutalist"] .btn-primary { border-color: #ffffff !important; color: #000000 !important; } html[data-theme="brutalist"] .btn:hover { box-shadow: 4px 4px 0 #ffffff !important; } html[data-theme="editorial"] { --bg: #1a1410; --bg-2: #221a14; --bg-3: #281f18; --bg-dark: #faf6ef; --accent: #d65a3a; --accent-soft: #e87a5a; --gold: #d65a3a; --gold-soft: #e87a5a; --text: #f5ead8; --text-soft: #d6c4a8; --text-mute: #a8967a; --text-quiet: #786650; --border: #3d2e22; --border-strong: #5a4530; --hairline: rgba(245,234,216,0.08); --nav-bg-scrolled: rgba(26,20,16,0.96); --selection: rgba(214,90,58,0.25); } html[data-theme="editorial"] .project-card, html[data-theme="editorial"] .case-card { background: #221a14 !important; box-shadow: 0 1px 3px rgba(0,0,0,0.5) !important; } html[data-theme="editorial"] .btn-primary { background: #f5ead8 !important; color: #1a1410 !important; } html[data-theme="minimal-luxury"] { --bg: #0a0a0a; --bg-2: #141414; --bg-3: #1c1c1c; --bg-dark: #ffffff; --accent: #d4b97a; --accent-soft: #e8d098; --gold: #d4b97a; --gold-soft: #e8d098; --text: #fafafa; --text-soft: #aaaaaa; --text-mute: #666666; --text-quiet: #404040; --border: #1f1f1f; --border-strong: #2d2d2d; --hairline: rgba(255,255,255,0.04); --nav-bg-scrolled: rgba(10,10,10,0.98); --selection: rgba(212,185,122,0.22); } html[data-theme="minimal-luxury"] .project-card, html[data-theme="minimal-luxury"] .case-card { background: #0a0a0a !important; } html[data-theme="minimal-luxury"] .btn-primary { color: #fafafa !important; border-color: #fafafa !important; } html[data-theme="newspaper"] { --bg: #1a1410; --bg-2: #221a14; --bg-3: #110d0a; --bg-dark: #f4ecd8; --accent: #e8d8a8; --accent-soft: #f0e2bc; --gold: #e8d8a8; --gold-soft: #f0e2bc; --text: #f4ecd8; --text-soft: #d6c8a8; --text-mute: #9a8e75; --text-quiet: #6a6050; --border: #f4ecd8; --border-strong: #f4ecd8; --hairline: rgba(244,236,216,0.25); --nav-bg-scrolled: #1a1410; --selection: rgba(244,236,216,0.2); } html[data-theme="newspaper"] body { background: linear-gradient(rgba(255,255,255,0.025) 50%, transparent 50%) 0 0 / 100% 4px, #1a1410 !important; } html[data-theme="newspaper"] h1 { border-color: #f4ecd8 !important; } html[data-theme="newspaper"] h2 { border-bottom-color: #f4ecd8 !important; } html[data-theme="newspaper"] .nav { border-bottom-color: #f4ecd8 !important; background: #1a1410 !important; } html[data-theme="newspaper"] .project-card, html[data-theme="newspaper"] .case-card { background: #221a14 !important; border-color: #f4ecd8 !important; column-rule-color: #f4ecd8 !important; } html[data-theme="newspaper"] .btn-primary { background: #f4ecd8 !important; color: #1a1410 !important; } html[data-theme="memphis"] { --bg: #0a0524; --bg-2: #14093a; --bg-3: #1a0d4a; --bg-dark: #fef6e4; --accent: #ffa5c5; --accent-soft: #ffc0d8; --gold: #8bd3dd; --gold-soft: #b8e8f0; --text: #fef6e4; --text-soft: #d8d0c0; --text-mute: #a09888; --text-quiet: #6a6458; --border: #ffa5c5; --border-strong: #ffa5c5; --hairline: rgba(255,165,197,0.15); --nav-bg-scrolled: rgba(10,5,36,0.96); --selection: rgba(255,165,197,0.32); } html[data-theme="memphis"] body { background: radial-gradient(circle at 10% 20%, #ffa5c5 0, #ffa5c5 6px, transparent 7px) 0 0 / 80px 80px, radial-gradient(circle at 70% 70%, #8bd3dd 0, #8bd3dd 4px, transparent 5px) 0 0 / 60px 60px, linear-gradient(135deg, transparent 47%, #fbd024 47%, #fbd024 53%, transparent 53%) 0 0 / 200px 200px, #0a0524 !important; } html[data-theme="memphis"] .project-card, html[data-theme="memphis"] .case-card, html[data-theme="memphis"] .ai-card { background: #14093a !important; border-color: #ffa5c5 !important; } html[data-theme="y2k"] { --bg: #001433; --bg-2: #002255; --bg-3: #001a44; --bg-dark: #c2e9ff; --accent: #4dc8ff; --accent-soft: #7dd6ff; --gold: #4dc8ff; --gold-soft: #7dd6ff; --text: #e0f0ff; --text-soft: #a8c8e8; --text-mute: #7898b8; --text-quiet: #506880; --border: rgba(77,200,255,0.22); --border-strong: rgba(77,200,255,0.5); --hairline: rgba(77,200,255,0.08); --nav-bg-scrolled: rgba(0,20,51,0.92); --selection: rgba(77,200,255,0.25); } html[data-theme="y2k"] body { background: radial-gradient(ellipse at 20% 20%, rgba(77,200,255,0.25) 0%, transparent 40%), radial-gradient(ellipse at 80% 70%, rgba(120,160,220,0.3) 0%, transparent 50%), linear-gradient(180deg, #001433 0%, #002a55 40%, #002255 100%) !important; } html[data-theme="y2k"] body::before { opacity: 0.4; } html[data-theme="y2k"] h1, html[data-theme="y2k"] h2, html[data-theme="y2k"] h3 { background: linear-gradient(180deg, #e0f0ff 0%, #4dc8ff 50%, #1a6dd0 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; text-shadow: 0 0 16px rgba(77,200,255,0.4) !important; } html[data-theme="y2k"] .project-card, html[data-theme="y2k"] .case, html[data-theme="y2k"] .skill-card, html[data-theme="y2k"] .testimonial, html[data-theme="y2k"] .nav { background: linear-gradient(180deg, rgba(20,40,80,0.85) 0%, rgba(10,25,60,0.85) 100%) !important; border-color: rgba(77,200,255,0.5) !important; } html[data-theme="sketch"] { --bg: #1a1815; --bg-2: #221f1a; --bg-3: #15130f; --bg-dark: #fffef7; --accent: #e8e4dc; --accent-soft: #f5f1e8; --gold: #e85a4f; --gold-soft: #f08580; --text: #e8e4dc; --text-soft: #c0baae; --text-mute: #8a847a; --text-quiet: #5a544c; --border: #e8e4dc; --border-strong: #e8e4dc; --hairline: rgba(232,228,220,0.18); --nav-bg-scrolled: rgba(26,24,21,0.96); --selection: rgba(232,90,79,0.3); } html[data-theme="sketch"] body { background: radial-gradient(circle at 1px 1px, rgba(232,228,220,0.06) 1px, transparent 1px) 0 0 / 24px 24px, #1a1815 !important; } html[data-theme="sketch"] .nav { border-bottom-color: #e8e4dc !important; } html[data-theme="sketch"] .project-card, html[data-theme="sketch"] .case-card, html[data-theme="sketch"] .ai-card { background: #221f1a !important; border-color: #e8e4dc !important; box-shadow: 3px 3px 0 #e8e4dc !important; } html[data-theme="sketch"] .btn, html[data-theme="sketch"] .btn-primary { background: #1a1815 !important; color: #e8e4dc !important; border-color: #e8e4dc !important; } html[data-theme="material"] { --bg: #1c1b1f; --bg-2: #2b2930; --bg-3: #211f24; --bg-dark: #fef7ff; --accent: #b8a5e5; --accent-soft: #c8b8eb; --gold: #b8a5e5; --gold-soft: #c8b8eb; --text: #e6e1e5; --text-soft: #c9c5d0; --text-mute: #938f99; --text-quiet: #5f5b66; --border: #38353e; --border-strong: #4f4b56; --hairline: rgba(230,225,229,0.05); --nav-bg-scrolled: rgba(28,27,31,0.96); --selection: rgba(184,165,229,0.22); } html[data-theme="material"] .project-card, html[data-theme="material"] .case-card, html[data-theme="material"] .ai-card { background: #2b2930 !important; box-shadow: 0 1px 3px rgba(0,0,0,0.3), 0 4px 16px rgba(184,165,229,0.08) !important; } html[data-theme="material"] .project-card:hover { background: #353239 !important; box-shadow: 0 8px 24px rgba(184,165,229,0.18) !important; } html[data-theme="material"] .btn-primary { background: #b8a5e5 !important; color: #1c1b1f !important; } html[data-theme="swiss"] { --bg: #0a0a0a; --bg-2: #141414; --bg-3: #1c1c1c; --bg-dark: #ffffff; --accent: #ff0000; --accent-soft: #ff3333; --gold: #4d4dff; --gold-soft: #7373ff; --text: #ffffff; --text-soft: #e0e0e0; --text-mute: #888888; --text-quiet: #444444; --border: #ffffff; --border-strong: #ffffff; --hairline: rgba(255,255,255,0.12); --nav-bg-scrolled: rgba(10,10,10,0.98); --selection: rgba(255,0,0,0.3); } html[data-theme="swiss"] body { background: linear-gradient(90deg, transparent calc(50% - 0.5px), rgba(255,255,255,0.06) calc(50% - 0.5px), rgba(255,255,255,0.06) calc(50% + 0.5px), transparent calc(50% + 0.5px)), #0a0a0a !important; } html[data-theme="swiss"] .nav { border-bottom-color: #ffffff !important; } html[data-theme="swiss"] .project-card, html[data-theme="swiss"] .case-card { background: #0a0a0a !important; border-top-color: #ffffff !important; border-left-color: #ffffff !important; } html[data-theme="swiss"] .btn-primary { background: #ffffff !important; color: #0a0a0a !important; } html[data-theme="liquid"] { --bg: #0a0a14; --bg-2: rgba(255,255,255,0.06); --bg-3: rgba(255,255,255,0.04); --bg-dark: #e8e3dc; --accent: #a8b8d0; --accent-soft: #c0cce0; --gold: #c4a577; --gold-soft: #d4b888; --text: #f0eee8; --text-soft: #c8c2b8; --text-mute: #8a8478; --text-quiet: #5a5448; --border: rgba(168,184,208,0.22); --border-strong: rgba(168,184,208,0.45); --hairline: rgba(255,255,255,0.06); --nav-bg-scrolled: rgba(10,10,20,0.55); --selection: rgba(196,165,119,0.35); } html[data-theme="liquid"] body { background: linear-gradient(135deg, #0a0a14 0%, #1a0e1a 20%, #0e1a24 40%, #0e1a14 60%, #1a1408 80%, #0a0a14 100%) !important; background-size: 400% 400%; } html[data-theme="liquid"] body::before { background: radial-gradient(ellipse 600px 400px at 20% 30%, rgba(196,165,119,0.25) 0%, transparent 60%), radial-gradient(ellipse 500px 350px at 80% 70%, rgba(107,124,147,0.3) 0%, transparent 60%), radial-gradient(ellipse 400px 300px at 50% 90%, rgba(120,170,160,0.2) 0%, transparent 60%) !important; } html[data-theme="liquid"] .project-card, html[data-theme="liquid"] .case, html[data-theme="liquid"] .skill-card, html[data-theme="liquid"] .testimonial { background: rgba(255,255,255,0.05) !important; border-color: rgba(255,255,255,0.12) !important; color: #f0eee8 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), inset 0 -1px 0 rgba(0,0,0,0.4), 0 20px 50px -10px rgba(0,0,0,0.5), 0 30px 80px -30px rgba(0,0,0,0.6) !important; } html[data-theme="liquid"] h1, html[data-theme="liquid"] h2, html[data-theme="liquid"] h3 { background: linear-gradient(135deg, #a8b8d0 0%, #ec4899 33%, #a8b8d0 66%, #5cdfff 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; } html[data-theme="liquid"] .btn-primary { background: rgba(255,255,255,0.1) !important; border-color: rgba(255,255,255,0.25) !important; color: #f0eee8 !important; } }