/* JarvisX Modern — Legacy Class Compatibility Shim Include this file LAST in (after jarvisx-modern.css). Purpose: Map existing classes to the new theme without touching templates. --------------------------------------------------------------------------*/ /* 1) Surfaces & Panels (replaces gold boxes) */ .surface { background: var(--elev) !important; border: 1px solid var(--border) !important; box-shadow: 0 10px 24px rgba(0,0,0,.28) !important; } /* Keep visual consistency for rounded panels */ .rounded-xl { border-radius: var(--radius) !important; } .spacious { padding: 12px !important; } /* 2) Buttons (map legacy names to modern palette) */ .btn { display:inline-flex; align-items:center; gap:.6rem; font-weight:800; } .btn.primary-btn, .primary-btn { background: var(--brand) !important; color: #080a0f !important; border: 1px solid rgba(154,107,255,.55) !important; box-shadow: 0 0 12px rgba(154,107,255,.35) !important; } .btn.primary-btn:hover, .primary-btn:hover { background: var(--brand-2) !important; color: #031014 !important; border-color: rgba(0,224,255,.55) !important; box-shadow: 0 0 16px rgba(0,224,255,.45) !important; } .btn.outline-btn, .outline-btn { background: transparent !important; color: var(--brand-2) !important; border: 1px solid var(--brand-2) !important; } .btn.outline-btn:hover, .outline-btn:hover { background: var(--brand-2) !important; color: #031014 !important; } .btn.gold-btn, .gold-btn { /* Rebrand legacy "gold" to secondary accent */ background: linear-gradient(180deg, color-mix(in oklab, var(--brand-2) 35%, transparent), transparent) !important; color: var(--brand-2) !important; border: 1px solid color-mix(in oklab, var(--brand-2) 65%, var(--border)) !important; } .btn.gold-btn:hover, .gold-btn:hover { background: var(--brand-2) !important; color: #031014 !important; } /* CTA used in navbar */ .nav-cta { background: var(--brand) !important; color: #080a0f !important; border: 1px solid rgba(154,107,255,.55) !important; } .nav-cta:hover { background: var(--brand-2) !important; color: #031014 !important; } /* 3) Text utilities */ .muted { color: var(--muted) !important; } .gold-text { color: color-mix(in oklab, var(--brand) 65%, var(--text)) !important; } /* 4) Navbar/Footers against old gold styles */ .navbar { background: rgba(11,13,18,.72) !important; backdrop-filter: blur(12px) !important; border-bottom: 1px solid var(--border) !important; } .footer, .jx-footer { background: transparent !important; border-top: 1px solid color-mix(in oklab, var(--brand) 22%, var(--border)) !important; } /* 5) Cards/tables if old CSS names persist */ .card, .panel, .box { background: var(--elev) !important; border: 1px solid var(--border) !important; } .table th, .table td { border-color: var(--border) !important; } /* --- Final Gold Cleanup — enforce neon theme across old footer/texts --- */ /* Footer and link overrides */ footer a, .jx-footer a { color: var(--brand-2) !important; } footer a:hover, .jx-footer a:hover { color: var(--brand) !important; text-decoration: underline; } /* Footer section headings */ footer h4, .jx-footer h4 { color: var(--brand) !important; } /* Kill any gold still coming from inline style color variables */ :root { --jx-gold: var(--brand); --jx-gold-2: var(--brand-2); --jx-gold-3: var(--brand-2); --jx-gold-ring: rgba(0, 224, 255, 0.25); } /* Remove golden borders on cards and code boxes */ .surface, .card, footer, .navbar { border-color: var(--border) !important; background: var(--elev) !important; } /* Code or SQL preview boxes */ pre, code { color: var(--text) !important; background: rgba(0, 224, 255, 0.04) !important; border: 1px solid color-mix(in oklab, var(--brand-2) 25%, var(--border)) !important; } /* ========== JARVISX: De-Gold Sweep (place LAST) ========== */ /* 0) Re-map legacy gold tokens to the new two-tone palette */ :root{ --brand: #9A6BFF; /* purple */ --brand-2: #00E0FF; /* sky blue */ --text: #EAF2FF; --muted: #9CA5B5; --bg: #0B0D12; --elev: #10131A; --border: #1B2231; /* legacy gold tokens → point to new palette */ --jx-gold: var(--brand); --jx-gold-2: var(--brand-2); --jx-gold-3: var(--brand-2); --jx-gold-ring: color-mix(in oklab, var(--brand-2) 35%, transparent); } /* 1) Nuke old gold gradients on surfaces/panels/cards */ .surface, .card, .panel, .box, footer, header, nav { background: var(--elev) !important; border-color: var(--border) !important; background-image: none !important; box-shadow: 0 0 0 1px var(--border) inset, 0 10px 24px rgba(0,0,0,.28) !important; } /* 2) Section headers and links shift to purple/sky-blue */ h1, h2, h3, h4, .section-title { color: var(--brand) !important; } a { color: var(--brand-2) !important; } a:hover { color: var(--brand) !important; text-decoration: underline; } /* 3) Buttons mapped to the two-tone */ .btn, .primary-btn, .nav-cta { background: linear-gradient(90deg, var(--brand), var(--brand-2)) !important; color: #071017 !important; border: 1px solid color-mix(in oklab, var(--brand-2) 55%, var(--brand)) !important; box-shadow: 0 0 12px color-mix(in oklab, var(--brand-2) 40%, transparent) !important; } .btn:hover, .primary-btn:hover, .nav-cta:hover { filter: brightness(1.05) saturate(1.1); } .outline-btn { background: transparent !important; color: var(--brand-2) !important; border: 1px solid var(--brand-2) !important; } .outline-btn:hover { background: var(--brand-2) !important; color: #071017 !important; } /* 4) Pill, badges, and legacy “gold” accents */ .status-pill{ border-color: color-mix(in oklab, var(--brand-2) 45%, var(--border)) !important; background: linear-gradient(180deg, #0e131c, #0b1119) !important; color: var(--text) !important; box-shadow: inset 0 0 0 1px rgba(0,0,0,.55), 0 6px 18px color-mix(in oklab, var(--brand-2) 18%, transparent) !important; } .status-pill .dot{ background: var(--brand-2) !important; box-shadow: 0 0 0 2px color-mix(in oklab, var(--brand-2) 35%, transparent) !important; } /* 5) Alerts: swap warm yellows for cool neon accents */ .jx-alert.info{ background: color-mix(in oklab, var(--brand-2) 10%, transparent) !important; border-color: color-mix(in oklab, var(--brand-2) 45%, var(--border)) !important; } .jx-alert.warn{ background: color-mix(in oklab, var(--brand) 10%, transparent) !important; border-color: color-mix(in oklab, var(--brand) 45%, var(--border)) !important; } .jx-alert.danger{ background: color-mix(in oklab, #ff4d6d 12%, transparent) !important; border-color: color-mix(in oklab, #ff4d6d 45%, var(--border)) !important; } /* 6) Code blocks / samples (remove amber tones) */ pre, code, .code, .editor, .sql-preview { color: var(--text) !important; background: rgba(0, 224, 255, .04) !important; border: 1px solid color-mix(in oklab, var(--brand-2) 28%, var(--border)) !important; box-shadow: none !important; } /* 7) Footer clean-up (kills gold link + bar) */ footer .bottom, .jx-footer { background: transparent !important; border-top: 1px solid color-mix(in oklab, var(--brand) 22%, var(--border)) !important; } footer a, .jx-footer a { color: var(--brand-2) !important; } footer a:hover, .jx-footer a:hover { color: var(--brand) !important; } /* 8) Any lingering vignettes/“spotlight” glows */ [class*="hero"], [class*="banner"], [class*="headline"], .surface::before { background-image: none !important; filter: none !important; } /* ===== NAV TEASER (neon cinematic) ===== */ #topnav .nav-center{ flex:1 1 auto; display:flex; align-items:center; padding:0 12px; min-width:240px; } .nav-teaser{ position:relative; width:100%; height:72px; /* matches your nav height nicely */ border-radius:14px; overflow:hidden; background: radial-gradient(120% 90% at 10% 50%, rgba(0,224,255,.10), transparent 50%), radial-gradient(120% 90% at 90% 50%, rgba(154,107,255,.10), transparent 50%), #0d121a; border:1px solid var(--border); box-shadow: 0 0 0 1px rgba(0,224,255,.05) inset, 0 12px 28px rgba(0,0,0,.35); } /* Neon sweep */ .nav-teaser .teaser-sheen{ position:absolute; inset:0; background: linear-gradient(100deg, transparent 0%, rgba(0,224,255,.20) 40%, rgba(154,107,255,.20) 60%, transparent 100%); mix-blend-mode: screen; transform: translateX(-60%); animation: sheenMove 5.6s ease-in-out infinite; pointer-events:none; } @keyframes sheenMove{ 0% { transform: translateX(-60%); opacity:.0; } 20% { opacity:.55; } 50% { transform: translateX(60%); } 80% { opacity:.0; } 100% { transform: translateX(60%); } } /* Subtle scanlines/noise for filmic vibe */ .nav-teaser .teaser-noise{ position:absolute; inset:0; background: repeating-linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.035) 1px, transparent 2px, transparent 3px); opacity:.12; filter: blur(.2px); pointer-events:none; } /* Phrase rail */ .nav-teaser .teaser-phrases{ position:absolute; inset:0; display:grid; place-items:center; text-align:center; padding-inline:16px; } .nav-teaser .phrase{ position:absolute; color: var(--brand-2); font-weight:700; font-size:1.18rem; letter-spacing:.6px; text-shadow: 0 0 10px rgba(0,224,255,.55), 0 0 22px rgba(154,107,255,.35); opacity:0; transform: translateY(10px) scale(.985); filter: drop-shadow(0 0 6px rgba(0,224,255,.25)); will-change: transform, opacity; transition: opacity .6s ease, transform .6s cubic-bezier(.2,.6,.2,1); } .nav-teaser .phrase.is-active{ opacity:1; transform: translateY(0) scale(1); } /* Small screens: hide center teaser to keep navbar tidy */ @media (max-width: 980px){ #topnav .nav-center{ display:none; } } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce){ .nav-teaser .teaser-sheen{ animation: none; opacity:.2; } .nav-teaser .phrase{ transition: none; } }