/* ========================================================= EA TAILWIND THEME OVERLAY (SAFE + NO COLLISIONS) Load AFTER Tailwind. Add class "ea-dark" on . ========================================================= */ :root { --color-navy: #0B1220; --color-midnight: #0F172A; --color-cyan: #22E5FF; --color-magenta: #FF2DFF; --color-white: #F3F4F6; --color-gray: #94A3B8; --color-ink: #020617; --bg-main: var(--color-navy); --bg-elev: #111827; --border-subtle: #1E293B; --font-sans: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif; --r-sm: 12px; --r-md: 16px; --r-lg: 20px; --shadow-soft: 0 10px 30px rgba(0,0,0,.28); --shadow-glow: 0 18px 44px rgba(34,229,255,.14); } /* ===================== WRAPPER (opt-in per page) ===================== */ .ea-dark { font-family: var(--font-sans); background: var(--bg-main); color: var(--color-white); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .ea-dark a { color: var(--color-cyan); } .ea-dark a:hover { text-decoration: underline; } /* ===================== OVERRIDE COMMON TAILWIND UTILITIES (scoped) ===================== */ /* Backgrounds */ .ea-dark .bg-white { background-color: transparent !important; } .ea-dark .bg-gray-50 { background-color: transparent !important; } .ea-dark .bg-gray-100 { background-color: transparent !important; } /* Text colors */ .ea-dark .text-gray-900 { color: var(--color-white) !important; } .ea-dark .text-gray-800 { color: rgba(243,244,246,.92) !important; } .ea-dark .text-gray-700 { color: rgba(148,163,184,.98) !important; } .ea-dark .text-gray-600 { color: rgba(148,163,184,.92) !important; } .ea-dark .text-gray-500 { color: rgba(148,163,184,.85) !important; } /* Borders + shadows used in your cards */ .ea-dark .border { border-color: var(--border-subtle) !important; } .ea-dark .shadow-sm { box-shadow: var(--shadow-soft) !important; } /* Tailwind hover utility (escape ":" as "\:") */ .ea-dark .hover\:shadow-lg:hover { box-shadow: var(--shadow-glow) !important; } /* ===================== OPTIONAL “ON BRAND” SURFACE ===================== */ .ea-surface { background: radial-gradient(900px 420px at 50% -10%, rgba(34,229,255,.10), rgba(0,0,0,0) 55%), radial-gradient(800px 380px at 15% 0%, rgba(255,45,255,.06), rgba(0,0,0,0) 60%), linear-gradient(180deg, var(--color-navy), var(--color-midnight)); border-bottom: 1px solid rgba(255,255,255,.08); } /* ===================== COMPONENTS (use as-needed) ===================== */ .ea-nav { background: rgba(11,18,32,.72); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255,255,255,.08); } .ea-btn { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-sm); font-weight: 800; letter-spacing: .2px; border: 1px solid transparent; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease, color .12s ease; } .ea-btn:active { transform: translateY(1px); } .ea-btn-primary { background: var(--color-cyan); color: var(--color-ink); box-shadow: 0 10px 24px rgba(34,229,255,.18); } .ea-btn-outline { background: rgba(255,255,255,.02); border-color: rgba(255,45,255,.65); color: var(--color-white); } .ea-card { background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)), var(--bg-elev); border: 1px solid var(--border-subtle); border-radius: var(--r-md); box-shadow: var(--shadow-soft); transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; } .ea-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-glow); border-color: rgba(34,229,255,.35); } .ea-card-accent { border-color: rgba(255,45,255,.35); } .ea-card-accent:hover { border-color: rgba(255,45,255,.55); box-shadow: 0 18px 44px rgba(255,45,255,.14); }