/* ================================================================= AAPE TECHNOLOGIES — LIGHT MODE Triggered by [data-theme="light"] on . Two layers: 1. CSS variable overrides — catches anything using var() 2. Hard-coded selectors — catches inline dark hex / rgba values ================================================================= */ /* ================================================================ 1. CSS VARIABLE OVERRIDES ================================================================ */ [data-theme="light"] { --bg-dark: #ffffff; --bg-lighter: #f2f3f6; --bg-card: #ffffff; --bg-card-hover: #f7f8fa; --accent: #B8950A; --accent-hover: #9E8009; --accent-muted: rgba(244, 197, 0, 0.10); --text-main: #111111; --text-muted: #555a66; --text-subtle: #8c909c; --border: rgba(0, 0, 0, 0.10); --border-hover: rgba(244, 197, 0, 0.40); --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.07); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.09); --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.11); --shadow-accent: 0 6px 20px rgba(244, 197, 0, 0.18); /* admin tokens */ --admin-bg: #f2f3f6; --admin-sidebar-bg: #ffffff; --admin-card-bg: #ffffff; --sidebar-bg: #ffffff; --card-bg: #ffffff; } /* ================================================================ 2. PAGE BASE — explicit, beats any specificity from app.css ================================================================ */ [data-theme="light"], [data-theme="light"] body, [data-theme="light"] html { background-color: #f8f9fb !important; color: #111111; } /* ================================================================ TYPOGRAPHY ================================================================ */ [data-theme="light"] h1, [data-theme="light"] h2, [data-theme="light"] h3, [data-theme="light"] h4, [data-theme="light"] h5, [data-theme="light"] h6 { color: #111111; } [data-theme="light"] p { color: #555a66; } [data-theme="light"] a { color: #111111; } [data-theme="light"] a:hover { color: var(--accent); } [data-theme="light"] .text-white { color: #111111 !important; } [data-theme="light"] .text-muted { color: #555a66 !important; } [data-theme="light"] .text-subtle { color: #8c909c !important; } [data-theme="light"] .text-gradient { background: linear-gradient(135deg, var(--accent) 0%, #222 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ================================================================ BUTTONS ================================================================ */ /* Primary — charcoal, not yellow-on-white */ [data-theme="light"] .btn-primary { background-color: #1a1a1a !important; color: #ffffff !important; border-color: #1a1a1a !important; } [data-theme="light"] .btn-primary:hover { background-color: #333 !important; border-color: #333 !important; color: #ffffff !important; box-shadow: 0 6px 20px rgba(0,0,0,0.20); } /* Secondary */ [data-theme="light"] .btn-secondary { background-color: transparent !important; border-color: rgba(0,0,0,0.18) !important; color: #111111 !important; } [data-theme="light"] .btn-secondary:hover { border-color: #1a1a1a !important; color: #1a1a1a !important; background: rgba(0,0,0,0.04) !important; } /* Outline */ [data-theme="light"] .btn-outline { background: transparent !important; border-color: rgba(0,0,0,0.15) !important; color: #555a66 !important; } [data-theme="light"] .btn-outline:hover { border-color: #1a1a1a !important; color: #1a1a1a !important; } /* Admin primary / secondary / danger */ [data-theme="light"] .btn-admin-primary { background: #1a1a1a !important; color: #ffffff !important; border-color: #1a1a1a !important; box-shadow: none !important; } [data-theme="light"] .btn-admin-primary:hover { background: #333 !important; border-color: #333 !important; } [data-theme="light"] .btn-admin-secondary { background: rgba(0,0,0,0.06) !important; color: #111111 !important; border-color: rgba(0,0,0,0.14) !important; } [data-theme="light"] .btn-admin-secondary:hover { background: rgba(0,0,0,0.10) !important; } [data-theme="light"] .btn-admin-danger { background: rgba(220,38,38,0.07) !important; color: #b91c1c !important; border-color: rgba(220,38,38,0.22) !important; } [data-theme="light"] .btn-admin-danger:hover { background: rgba(220,38,38,0.13) !important; } /* Bootstrap compat */ [data-theme="light"] .btn-outline-primary { color: #555a66 !important; border-color: rgba(0,0,0,0.14) !important; background: transparent !important; } [data-theme="light"] .btn-outline-primary:hover { color: #1a1a1a !important; border-color: #1a1a1a !important; } [data-theme="light"] .btn-outline-danger { color: #b91c1c !important; border-color: rgba(185,28,28,0.25) !important; background: transparent !important; } [data-theme="light"] .btn-outline-danger:hover { background: rgba(185,28,28,0.06) !important; } /* Filter buttons */ [data-theme="light"] .filter-btn { border-color: rgba(0,0,0,0.12); color: #555a66; background: transparent; } [data-theme="light"] .filter-btn:hover { border-color: rgba(0,0,0,0.28); color: #111111; } [data-theme="light"] .filter-btn.active { background: #1a1a1a; border-color: #1a1a1a; color: #ffffff; } /* ================================================================ CARDS ================================================================ */ [data-theme="light"] .card { background: #ffffff; border-color: rgba(0,0,0,0.10); box-shadow: 0 1px 4px rgba(0,0,0,0.07); } [data-theme="light"] .card:hover { border-color: rgba(0,0,0,0.16); box-shadow: 0 4px 16px rgba(0,0,0,0.09); } [data-theme="light"] .card-icon { background: rgba(0,0,0,0.05); color: #1a1a1a; } /* ================================================================ BADGES & PILLS ================================================================ */ [data-theme="light"] .badge-success { background: rgba(22,163,74,0.10); color: #166534; } [data-theme="light"] .badge-danger { background: rgba(220,38,38,0.10); color: #991b1b; } [data-theme="light"] .badge-warning { background: rgba(244, 197, 0,0.12); color: #854d0e; } [data-theme="light"] .badge-info { background: rgba(79,70,229,0.10); color: #3730a3; } [data-theme="light"] .badge-muted { background: rgba(85,90,102,0.10); color: #555a66; } [data-theme="light"] .pill-tag { border-color: rgba(0,0,0,0.12); color: #555a66; } [data-theme="light"] .pill-tag:hover { border-color: #1a1a1a; color: #1a1a1a; } /* ================================================================ SECTION LABELS ================================================================ */ [data-theme="light"] .section-label { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.10); color: #555a66; } /* ================================================================ DIVIDERS ================================================================ */ [data-theme="light"] .divider { border-top-color: rgba(0,0,0,0.10); } /* ================================================================ PUBLIC SITE NAVBAR (pill style — hard-coded values in blade) ================================================================ */ [data-theme="light"] .navbar-pill { background: rgba(255,255,255,0.92) !important; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-color: rgba(0,0,0,0.09) !important; box-shadow: 0 4px 24px rgba(0,0,0,0.08) !important; } [data-theme="light"] .nav-link-pill { color: #1a1a1a !important; } [data-theme="light"] .nav-link-pill:hover { color: var(--accent) !important; } /* Logo — SVG is white/light, invert to black */ [data-theme="light"] .navbar-pill .site-logo img, [data-theme="light"] .site-logo img { filter: brightness(0) !important; } /* Mobile hamburger */ [data-theme="light"] #menu-icon { color: #1a1a1a !important; } [data-theme="light"] .mobile-menu-btn { color: #1a1a1a !important; } /* Home-page transparent state — keep dark text in light mode */ [data-theme="light"] body.home-page .navbar-wrapper:not(.scrolled) .navbar-pill { background: rgba(255,255,255,0.75) !important; border-color: rgba(0,0,0,0.07) !important; box-shadow: none !important; } [data-theme="light"] body.home-page .navbar-wrapper:not(.scrolled) .nav-link-pill { color: #1a1a1a !important; } [data-theme="light"] body.home-page .navbar-wrapper:not(.scrolled) .site-logo img { filter: brightness(0) !important; } [data-theme="light"] body.home-page .navbar-wrapper:not(.scrolled) #menu-icon { color: #1a1a1a !important; } /* ================================================================ MOBILE NAV MENU (hard-coded #0a0a0a in blade) ================================================================ */ [data-theme="light"] .nav-links { background: #ffffff !important; border-color: rgba(0,0,0,0.08) !important; box-shadow: 0 10px 30px rgba(0,0,0,0.10) !important; } [data-theme="light"] .nav-links .nav-link { color: #1a1a1a !important; border-bottom-color: rgba(0,0,0,0.06) !important; } [data-theme="light"] .nav-links .nav-dropdown-menu a { color: #555a66 !important; } [data-theme="light"] .nav-links .nav-dropdown-menu a:hover { color: var(--accent) !important; } /* ================================================================ MEGA MENU (hard-coded rgba(12,12,12) in blade) ================================================================ */ [data-theme="light"] .mega-menu { background: rgba(255,255,255,0.99) !important; border-color: rgba(0,0,0,0.08) !important; box-shadow: 0 25px 50px rgba(0,0,0,0.09) !important; } [data-theme="light"] .mega-title { color: #8c909c !important; border-bottom-color: rgba(0,0,0,0.07) !important; } [data-theme="light"] .mega-link { color: #333740 !important; } [data-theme="light"] .mega-link:hover, [data-theme="light"] .mega-link.active { color: var(--accent) !important; background: rgba(0,0,0,0.03) !important; } /* ================================================================ DROPDOWN MENU (classic .dropdown-menu) ================================================================ */ [data-theme="light"] .dropdown-menu { background: #ffffff !important; border-color: rgba(0,0,0,0.09) !important; box-shadow: 0 8px 24px rgba(0,0,0,0.09) !important; } [data-theme="light"] .dropdown-item { color: rgba(0,0,0,0.72) !important; } [data-theme="light"] .dropdown-item:hover { background: rgba(0,0,0,0.04) !important; color: var(--accent) !important; } /* ================================================================ FOOTER (hard-coded --bg-lighter via var, but also inline styles) ================================================================ */ [data-theme="light"] .footer { background: #f2f3f6 !important; border-top-color: rgba(0,0,0,0.10) !important; } [data-theme="light"] .footer-title { color: rgba(0,0,0,0.42) !important; } [data-theme="light"] .footer-link { color: #555a66 !important; } [data-theme="light"] .footer-link:hover { color: var(--accent) !important; } [data-theme="light"] .footer-social a { background: rgba(0,0,0,0.04) !important; border-color: rgba(0,0,0,0.10) !important; color: #555a66 !important; } [data-theme="light"] .footer-social a:hover { background: rgba(0,0,0,0.08) !important; border-color: #1a1a1a !important; color: #1a1a1a !important; } [data-theme="light"] .footer-bottom { border-top-color: rgba(0,0,0,0.10) !important; } /* Logo marquee fade edges */ [data-theme="light"] .logo-marquee::before { background: linear-gradient(to right, #ffffff, transparent); } [data-theme="light"] .logo-marquee::after { background: linear-gradient(to left, #ffffff, transparent); } [data-theme="light"] .marquee-logo { filter: grayscale(100%) brightness(0) opacity(0.30); } [data-theme="light"] .marquee-logo:hover { filter: grayscale(0%) brightness(1) opacity(1); } /* ================================================================ FEEDBACK FLOATING TAB + MODAL ================================================================ */ [data-theme="light"] .fab-feedback { background: #ffffff !important; color: #1a1a1a !important; border-color: rgba(0,0,0,0.10) !important; box-shadow: -4px 0 16px rgba(0,0,0,0.08) !important; } [data-theme="light"] .fab-feedback:hover { background: #1a1a1a !important; color: #ffffff !important; } [data-theme="light"] .feedback-modal-backdrop { background: rgba(0,0,0,0.35); } [data-theme="light"] .feedback-modal { background: #ffffff !important; border-color: rgba(0,0,0,0.09) !important; } [data-theme="light"] .feedback-modal h3 { color: #111111 !important; } [data-theme="light"] .feedback-modal > p { color: #555a66 !important; } [data-theme="light"] .feedback-modal label { color: rgba(0,0,0,0.62) !important; } [data-theme="light"] .feedback-modal .close-btn { background: rgba(0,0,0,0.05) !important; color: #555a66 !important; } [data-theme="light"] .feedback-modal .close-btn:hover { background: rgba(0,0,0,0.10) !important; color: #111111 !important; } [data-theme="light"] .feedback-modal input, [data-theme="light"] .feedback-modal textarea, [data-theme="light"] .feedback-modal select { background: #f7f8fa !important; border-color: rgba(0,0,0,0.12) !important; color: #111111 !important; } [data-theme="light"] .feedback-modal input:focus, [data-theme="light"] .feedback-modal textarea:focus, [data-theme="light"] .feedback-modal select:focus { border-color: #1a1a1a !important; box-shadow: 0 0 0 3px rgba(0,0,0,0.07) !important; } [data-theme="light"] .feedback-modal select option { background: #ffffff; color: #111111; } /* Mobile menu backdrop */ [data-theme="light"] .mobile-menu-overlay { background: rgba(0,0,0,0.32); } /* ================================================================ FORMS (public + admin .form-control) ================================================================ */ [data-theme="light"] .form-control { background: #f7f8fa !important; border-color: rgba(0,0,0,0.13) !important; color: #111111 !important; } [data-theme="light"] .form-control:focus { border-color: #1a1a1a !important; box-shadow: 0 0 0 3px rgba(0,0,0,0.07) !important; } [data-theme="light"] .form-control::placeholder { color: #8c909c !important; } [data-theme="light"] .form-label { color: rgba(0,0,0,0.58) !important; } [data-theme="light"] select.form-control { appearance: none !important; -webkit-appearance: none !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23555a66' viewBox='0 0 20 20'%3E%3Cpath d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 0.65rem center !important; background-size: 0.85rem !important; padding-right: 2.2rem !important; } [data-theme="light"] select option { background: #ffffff; color: #111111; } /* ================================================================ ALERTS ================================================================ */ [data-theme="light"] .alert-success { background: rgba(22,163,74,0.07) !important; color: #166534 !important; border-color: rgba(22,163,74,0.22) !important; } [data-theme="light"] .alert-danger { background: rgba(220,38,38,0.07) !important; color: #991b1b !important; border-color: rgba(220,38,38,0.22) !important; } [data-theme="light"] .alert-warning { background: rgba(244, 197, 0,0.07) !important; color: #854d0e !important; border-color: rgba(244, 197, 0,0.22) !important; } /* ================================================================ BOOTSTRAP STATUS COLORS ================================================================ */ [data-theme="light"] .bg-success { background: rgba(22,163,74,0.10) !important; color: #166534 !important; } [data-theme="light"] .bg-secondary { background: rgba(85,90,102,0.10) !important; color: #555a66 !important; } [data-theme="light"] .bg-warning { background: rgba(244, 197, 0,0.12) !important; color: #854d0e !important; } [data-theme="light"] .bg-danger { background: rgba(220,38,38,0.10) !important; color: #991b1b !important; } [data-theme="light"] .bg-info { background: rgba(79,70,229,0.10) !important; color: #3730a3 !important; } /* ================================================================ BREADCRUMB ================================================================ */ [data-theme="light"] .breadcrumb, [data-theme="light"] .breadcrumb a, [data-theme="light"] .breadcrumb .separator { color: #8c909c !important; } [data-theme="light"] .breadcrumb a:hover { color: var(--accent) !important; } [data-theme="light"] .breadcrumb .current { color: rgba(0,0,0,0.58) !important; } /* ================================================================ THEME TOGGLE BUTTON (used in both layouts) ================================================================ */ .theme-toggle-btn { width: 34px; height: 34px; border-radius: 50%; background: transparent; border: 1.5px solid rgba(255,255,255,0.18); color: rgba(255,255,255,0.80); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 0.85rem; transition: all 0.22s ease; flex-shrink: 0; line-height: 1; } .theme-toggle-btn:hover { background: rgba(255,255,255,0.10); color: #fff; border-color: rgba(255,255,255,0.35); transform: scale(1.08); } [data-theme="light"] .theme-toggle-btn { border-color: rgba(0,0,0,0.16); color: #555a66; } [data-theme="light"] .theme-toggle-btn:hover { background: rgba(0,0,0,0.06); color: #1a1a1a; border-color: rgba(0,0,0,0.28); }