/* ============================================ UNIFIED THEME SYSTEM Single source of truth for all theme variables Usage: - Apply data-theme="themeName" to or - All components automatically inherit theme styles - No need for separate data-landing-theme ============================================ */ /* ============================================ BASE VARIABLES (Light Theme Default) ============================================ */ :root { /* -------------------- Core Color Palette -------------------- */ --theme-primary: #6eb4ff; --theme-primary-hover: #4a9eff; --theme-primary-light: #a8d4ff; --theme-secondary: #c7b3e5; --theme-accent: #f5b5d6; /* -------------------- Background Colors -------------------- */ --theme-bg: #f5f7fa; --theme-bg-alt: #eef3fb; --theme-surface: #ffffff; --theme-surface-hover: #f8fafc; --theme-surface-elevated: #ffffff; /* -------------------- Text Colors -------------------- */ --theme-text: #2d3748; --theme-text-secondary: #4a5568; --theme-text-muted: #718096; --theme-text-light: #a0aec0; --theme-text-inverse: #ffffff; /* -------------------- Border Colors -------------------- */ --theme-border: #e2e8f0; --theme-border-light: #edf2f7; --theme-border-focus: rgba(110, 180, 255, 0.5); /* -------------------- Status Colors -------------------- */ --theme-success: #48bb78; --theme-success-bg: rgba(72, 187, 120, 0.12); --theme-warning: #ed8936; --theme-warning-bg: rgba(237, 137, 54, 0.12); --theme-danger: #f56565; --theme-danger-bg: rgba(245, 101, 101, 0.12); --theme-info: #4299e1; --theme-info-bg: rgba(66, 153, 225, 0.12); /* -------------------- Gradients -------------------- */ --theme-gradient-primary: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-primary-light) 100%); --theme-gradient-accent: linear-gradient(90deg, #c7b3e5 0%, #f5b5d6 25%, #ffd6a0 50%, #a8dda8 75%, #7fdbda 100%); --theme-gradient-hero: linear-gradient(135deg, var(--theme-bg) 0%, var(--theme-bg-alt) 100%); /* -------------------- Shadows -------------------- */ --theme-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08); --theme-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1); --theme-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --theme-shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.15); --theme-shadow-primary: 0 8px 25px rgba(110, 180, 255, 0.35); /* -------------------- Navbar Specific -------------------- */ --nav-bg: rgba(255, 255, 255, 0.95); --nav-bg-solid: #ffffff; --nav-border: rgba(0, 0, 0, 0.05); --nav-shadow: 0 4px 30px rgba(0, 0, 0, 0.08); --nav-gradient-line: var(--theme-gradient-accent); --nav-link-color: var(--theme-text); --nav-link-hover-color: var(--theme-text); --nav-link-hover-bg: rgba(0, 0, 0, 0.03); --nav-button-bg: var(--theme-surface); --nav-button-border: var(--theme-secondary); --nav-button-hover-border: #9d7cbf; --nav-dropdown-bg: var(--theme-surface); --nav-dropdown-shadow: var(--theme-shadow-xl); --nav-mobile-bg: var(--theme-surface); /* -------------------- Footer Specific -------------------- */ --footer-bg: var(--theme-surface); --footer-text: var(--theme-text-secondary); --footer-heading: var(--theme-text); --footer-link: var(--theme-text-muted); --footer-link-hover: var(--theme-primary); --footer-border: var(--theme-border); /* -------------------- Form Elements -------------------- */ --input-bg: var(--theme-surface); --input-border: var(--theme-border); --input-focus-border: var(--theme-primary); --input-focus-shadow: 0 0 0 3px rgba(110, 180, 255, 0.2); --input-text: var(--theme-text); --input-placeholder: var(--theme-text-muted); /* -------------------- Buttons -------------------- */ --btn-primary-bg: var(--theme-gradient-primary); --btn-primary-text: var(--theme-text-inverse); --btn-primary-shadow: var(--theme-shadow-primary); --btn-secondary-bg: var(--theme-surface); --btn-secondary-border: var(--theme-border); --btn-secondary-text: var(--theme-text); /* -------------------- Cards -------------------- */ --card-bg: var(--theme-surface); --card-border: var(--theme-border); --card-shadow: var(--theme-shadow-md); --card-header-bg: var(--theme-gradient-hero); /* -------------------- Modal -------------------- */ --modal-bg: var(--theme-surface); --modal-overlay: rgba(0, 0, 0, 0.5); --modal-shadow: var(--theme-shadow-xl); /* -------------------- Utility -------------------- */ --theme-is-dark: 0; --theme-backdrop-blur: blur(20px); --theme-radius-sm: 8px; --theme-radius-md: 12px; --theme-radius-lg: 16px; --theme-radius-xl: 24px; --theme-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* ============================================ THEME: NEO3D (Futuristic Dark) ============================================ */ [data-theme="3d"], [data-landing-theme="3d"] { --theme-primary: #8b5cf6; --theme-primary-hover: #a78bfa; --theme-primary-light: #c4b5fd; --theme-secondary: #22d3ee; --theme-accent: #fb7185; --theme-bg: #0a0a1a; --theme-bg-alt: #0f0f2a; --theme-surface: rgba(15, 15, 40, 0.95); --theme-surface-hover: rgba(20, 20, 50, 0.95); --theme-surface-elevated: rgba(25, 25, 60, 0.98); --theme-text: #f1f5f9; --theme-text-secondary: #cbd5e1; --theme-text-muted: #94a3b8; --theme-text-light: #64748b; --theme-text-inverse: #0a0a1a; --theme-border: rgba(139, 92, 246, 0.25); --theme-border-light: rgba(139, 92, 246, 0.15); --theme-border-focus: rgba(139, 92, 246, 0.6); --theme-success: #22d3ee; --theme-success-bg: rgba(34, 211, 238, 0.15); --theme-warning: #fbbf24; --theme-warning-bg: rgba(251, 191, 36, 0.15); --theme-danger: #fb7185; --theme-danger-bg: rgba(251, 113, 133, 0.15); --theme-info: #a78bfa; --theme-info-bg: rgba(167, 139, 250, 0.15); --theme-gradient-primary: linear-gradient(135deg, #8b5cf6 0%, #22d3ee 100%); --theme-gradient-accent: linear-gradient(135deg, #8b5cf6 0%, #22d3ee 50%, #fb7185 100%); --theme-gradient-hero: linear-gradient(135deg, #0a0a1a 0%, #0f0f2a 100%); --theme-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4); --theme-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5); --theme-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6); --theme-shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.7); --theme-shadow-primary: 0 8px 30px rgba(139, 92, 246, 0.4); --nav-bg: rgba(10, 10, 26, 0.92); --nav-bg-solid: #0a0a1a; --nav-border: rgba(139, 92, 246, 0.2); --nav-shadow: 0 8px 40px rgba(139, 92, 246, 0.25); --nav-link-color: var(--theme-text-secondary); --nav-link-hover-color: var(--theme-primary); --nav-link-hover-bg: rgba(139, 92, 246, 0.15); --nav-button-bg: rgba(139, 92, 246, 0.1); --nav-button-border: rgba(139, 92, 246, 0.5); --nav-button-hover-border: var(--theme-primary); --nav-dropdown-bg: var(--theme-surface-elevated); --nav-dropdown-shadow: 0 20px 60px rgba(139, 92, 246, 0.3); --nav-mobile-bg: var(--theme-surface); --footer-bg: var(--theme-surface); --footer-text: var(--theme-text-secondary); --footer-heading: var(--theme-text); --footer-link: var(--theme-text-muted); --footer-link-hover: var(--theme-primary); --footer-border: var(--theme-border); --input-bg: rgba(139, 92, 246, 0.1); --input-border: var(--theme-border); --input-focus-border: var(--theme-primary); --input-focus-shadow: 0 0 0 3px rgba(139, 92, 246, 0.3); --card-bg: var(--theme-surface); --card-border: var(--theme-border); --card-header-bg: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(34, 211, 238, 0.15) 100%); --modal-bg: var(--theme-surface-elevated); --modal-overlay: rgba(0, 0, 0, 0.7); --theme-is-dark: 1; } /* ============================================ GLOBAL COMPONENT STYLES Auto-apply theme variables to common elements Uses body[data-theme] for highest specificity ============================================ */ /* Body & Root */ html, body { background-color: var(--theme-bg, #f5f7fa); color: var(--theme-text); transition: background-color var(--theme-transition); } /* -------------------- Navigation (Auto-themed) - HIGH SPECIFICITY These rules MUST override navbar.css hardcoded values -------------------- */ body .header-fixed::before, body[data-theme] .header-fixed::before, body[data-landing-theme] .header-fixed::before { background: var(--nav-bg) !important; backdrop-filter: var(--theme-backdrop-blur) saturate(180%) !important; -webkit-backdrop-filter: var(--theme-backdrop-blur) saturate(180%) !important; box-shadow: var(--nav-shadow) !important; border-bottom: 1px solid var(--nav-border) !important; } body .header-fixed::after, body[data-theme] .header-fixed::after, body[data-landing-theme] .header-fixed::after { background: var(--nav-gradient-line) !important; } body .navbar-custom .nav-link, body[data-theme] .navbar-custom .nav-link, body[data-landing-theme] .navbar-custom .nav-link { color: var(--nav-link-color) !important; transition: color var(--theme-transition), opacity var(--theme-transition); } body .navbar-custom .nav-link:hover, body[data-theme] .navbar-custom .nav-link:hover, body[data-landing-theme] .navbar-custom .nav-link:hover { color: var(--nav-link-hover-color) !important; background: var(--nav-link-hover-bg) !important; } body .navbar-custom .nav-link i, body[data-theme] .navbar-custom .nav-link i, body[data-landing-theme] .navbar-custom .nav-link i { color: inherit !important; } body .navbar-brand .brand-text, body[data-theme] .navbar-brand .brand-text, body[data-landing-theme] .navbar-brand .brand-text { background: var(--nav-gradient-line, var(--nav-smooth-gradient)) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; color: transparent !important; } body .navbar-brand:hover .brand-text, body[data-theme] .navbar-brand:hover .brand-text, body[data-landing-theme] .navbar-brand:hover .brand-text { filter: brightness(1.15); color: transparent !important; } /* Navbar Toggler */ body .navbar-toggler, body[data-theme] .navbar-toggler, body[data-landing-theme] .navbar-toggler { background: var(--nav-button-bg) !important; border-color: var(--nav-button-border) !important; } body .navbar-toggler:hover, body[data-theme] .navbar-toggler:hover, body[data-landing-theme] .navbar-toggler:hover { border-color: var(--nav-button-hover-border) !important; box-shadow: var(--theme-shadow-primary) !important; } /* Dark theme toggler icon */ body[data-theme="3d"] .navbar-toggler-icon, body[data-landing-theme="3d"] .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='3' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important; } /* Dropdowns */ body .dropdown-menu, body .dropdown-custom, body .mega-menu, body[data-theme] .dropdown-menu, body[data-theme] .dropdown-custom, body[data-theme] .mega-menu, body[data-landing-theme] .dropdown-menu, body[data-landing-theme] .dropdown-custom, body[data-landing-theme] .mega-menu { background: var(--nav-dropdown-bg) !important; border-color: var(--theme-border) !important; box-shadow: var(--nav-dropdown-shadow) !important; } body .dropdown-item, body[data-theme] .dropdown-item, body[data-landing-theme] .dropdown-item { color: var(--theme-text-secondary) !important; } body .dropdown-item:hover, body[data-theme] .dropdown-item:hover, body[data-landing-theme] .dropdown-item:hover { background: var(--nav-link-hover-bg) !important; color: var(--theme-primary) !important; } body .mega-menu-title, body[data-theme] .mega-menu-title, body[data-landing-theme] .mega-menu-title { color: var(--theme-text-muted) !important; border-bottom-color: var(--theme-border) !important; } body .mega-menu-title i, body[data-theme] .mega-menu-title i, body[data-landing-theme] .mega-menu-title i { color: var(--theme-primary) !important; } body .dropdown-item-title, body[data-theme] .dropdown-item-title, body[data-landing-theme] .dropdown-item-title { color: var(--theme-text) !important; } body .dropdown-item-desc, body[data-theme] .dropdown-item-desc, body[data-landing-theme] .dropdown-item-desc { color: var(--theme-text-muted) !important; } body .mega-menu .dropdown-item i, body[data-theme] .mega-menu .dropdown-item i, body[data-landing-theme] .mega-menu .dropdown-item i { color: var(--theme-primary) !important; } /* User dropdown */ body .user-dropdown, body[data-theme] .user-dropdown, body[data-landing-theme] .user-dropdown { border-color: var(--theme-primary) !important; } body .user-dropdown i, body[data-theme] .user-dropdown i, body[data-landing-theme] .user-dropdown i { color: var(--theme-primary) !important; } /* Mobile Menu Background */ @media (max-width: 991.98px) { body .navbar-collapse, body[data-theme] .navbar-collapse, body[data-landing-theme] .navbar-collapse { background: var(--nav-mobile-bg) !important; } body .mega-menu, body[data-theme] .mega-menu, body[data-landing-theme] .mega-menu { background: var(--theme-surface-hover) !important; } } /* -------------------- Sign Up CTA Button -------------------- */ body .btn-signup-cta, body[data-theme] .btn-signup-cta, body[data-landing-theme] .btn-signup-cta { background: var(--theme-gradient-primary) !important; color: var(--theme-text-inverse) !important; box-shadow: var(--theme-shadow-primary) !important; } body .btn-signup-cta:hover, body[data-theme] .btn-signup-cta:hover, body[data-landing-theme] .btn-signup-cta:hover { box-shadow: 0 12px 35px var(--theme-shadow-primary) !important; color: var(--theme-text-inverse) !important; } /* -------------------- Footer (Auto-themed) -------------------- */ .footer-modern { background: var(--footer-bg) !important; color: var(--footer-text) !important; } .footer-modern::before { background: var(--nav-gradient-line) !important; } .brand-name-footer, .footer-title { color: var(--footer-heading) !important; } .brand-tagline, .footer-links a, .copyright-text, .footer-legal-links a { color: var(--footer-link) !important; } .footer-links a:hover, .footer-legal-links a:hover { color: var(--footer-link-hover) !important; } .footer-bottom { border-top-color: var(--footer-border) !important; } /* Social Links */ .social-link { background: var(--theme-surface) !important; border-color: var(--theme-border) !important; color: var(--theme-text-muted) !important; } .social-link:hover { transform: translateY(-3px); } /* Scroll to Top Button */ .scroll-to-top { background: var(--theme-gradient-primary) !important; color: var(--theme-text-inverse) !important; box-shadow: var(--theme-shadow-primary) !important; } /* -------------------- Form Elements (Auto-themed) -------------------- */ .form-control, .form-select { background-color: var(--input-bg) !important; border-color: var(--input-border) !important; color: var(--input-text) !important; } .form-control::placeholder { color: var(--input-placeholder) !important; } .form-control:focus, .form-select:focus { border-color: var(--input-focus-border) !important; box-shadow: var(--input-focus-shadow) !important; } /* -------------------- Cards (Auto-themed) -------------------- */ .card { background: var(--card-bg) !important; border-color: var(--card-border) !important; box-shadow: var(--card-shadow) !important; } .card-header { background: var(--card-header-bg) !important; border-bottom-color: var(--card-border) !important; } /* -------------------- Modals (Auto-themed) -------------------- */ .modal-content { background: var(--modal-bg) !important; border-color: var(--theme-border) !important; } .modal-backdrop { background-color: rgba(0, 0, 0, calc(0.5 + var(--theme-is-dark) * 0.2)) !important; } .modal-header { border-bottom-color: var(--theme-border) !important; } .modal-footer { border-top-color: var(--theme-border) !important; } /* -------------------- Buttons (Auto-themed) -------------------- */ .btn-primary { background: var(--btn-primary-bg) !important; border-color: transparent !important; color: var(--btn-primary-text) !important; } .btn-primary:hover { box-shadow: var(--btn-primary-shadow) !important; } .btn-outline-primary { background: transparent !important; border-color: var(--theme-primary) !important; color: var(--theme-primary) !important; } .btn-outline-primary:hover { background: var(--theme-primary) !important; color: var(--theme-text-inverse) !important; } /* -------------------- Tables (Auto-themed) -------------------- */ .table { color: var(--theme-text) !important; } .table th { background: var(--theme-bg-alt) !important; color: var(--theme-text) !important; border-color: var(--theme-border) !important; } .table td { border-color: var(--theme-border) !important; } .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: var(--theme-surface-hover) !important; } .table-hover > tbody > tr:hover > * { background-color: var(--nav-link-hover-bg) !important; } /* -------------------- Alerts (Auto-themed) -------------------- */ .alert-success { background: var(--theme-success-bg) !important; color: var(--theme-success) !important; border-color: var(--theme-success) !important; } .alert-warning { background: var(--theme-warning-bg) !important; color: var(--theme-warning) !important; border-color: var(--theme-warning) !important; } .alert-danger { background: var(--theme-danger-bg) !important; color: var(--theme-danger) !important; border-color: var(--theme-danger) !important; } .alert-info { background: var(--theme-info-bg) !important; color: var(--theme-info) !important; border-color: var(--theme-info) !important; } /* -------------------- Links (Auto-themed) -------------------- */ a { color: var(--theme-primary); transition: color var(--theme-transition); } a:hover { color: var(--theme-primary-hover); } /* -------------------- Selection -------------------- */ ::selection { background: var(--theme-primary); color: var(--theme-text-inverse); } /* -------------------- Scrollbar (Auto-themed) -------------------- */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--theme-bg-alt); } ::-webkit-scrollbar-thumb { background: var(--theme-border); border-radius: 5px; } ::-webkit-scrollbar-thumb:hover { background: var(--theme-text-muted); }