/* ===================================================== UNIFIED GREEN THEME (Minimal) - Single brand color (Green) - Supports Dark + Light mode via Bootstrap's data-bs-theme - Frontend + Backend - No layout/parameter/logic changes ===================================================== */ /* ----------------------------------------------------- Theme tokens Bootstrap theme switch sets: ----------------------------------------------------- */ html[data-bs-theme="dark"]{ --gw-bg: #0b0f0d; --gw-surface: #101614; --gw-surface-2: #131b18; --gw-border: rgba(255,255,255,.06); --gw-text: rgba(255,255,255,.92); --gw-muted: rgba(255,255,255,.58); --gw-shadow: 0 14px 42px rgba(0,0,0,.55); --gw-brand: #22c55e; --gw-brand-2: #16a34a; --gw-brand-soft: rgba(34,197,94,.14); --gw-brand-soft-2: rgba(34,197,94,.10); } html[data-bs-theme="light"]{ --gw-bg: #f5f7f6; --gw-surface: #ffffff; --gw-surface-2: #f0f3f2; --gw-border: rgba(15,23,42,.10); --gw-text: rgba(15,23,42,.92); --gw-muted: rgba(15,23,42,.58); --gw-shadow: 0 14px 34px rgba(2,6,23,.10); --gw-brand: #16a34a; --gw-brand-2: #15803d; --gw-brand-soft: rgba(22,163,74,.14); --gw-brand-soft-2: rgba(22,163,74,.10); } /* Fallback if template doesn't set data-bs-theme */ html:not([data-bs-theme]){ --gw-bg: #0b0f0d; --gw-surface: #101614; --gw-surface-2: #131b18; --gw-border: rgba(255,255,255,.06); --gw-text: rgba(255,255,255,.92); --gw-muted: rgba(255,255,255,.58); --gw-shadow: 0 14px 42px rgba(0,0,0,.55); --gw-brand: #22c55e; --gw-brand-2: #16a34a; --gw-brand-soft: rgba(34,197,94,.14); --gw-brand-soft-2: rgba(34,197,94,.10); } /* -------------------------- Base -------------------------- */ html, body{ background: var(--gw-bg) !important; color: var(--gw-text); } /* Keep animations smooth but not heavy */ *{ transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease, opacity .18s ease, filter .18s ease; } a{ color: var(--gw-text); } a:hover{ color: var(--gw-brand) !important; } hr{ border-color: var(--gw-border) !important; } /* -------------------------- Surfaces / Cards -------------------------- */ .card, .panel, .widget, .box, .content-box, .modal-content, .dropdown-menu, .list-group-item, .table, .table-responsive, .auth-wrapper .card, .login-card, .pricing-card, .feature-card, .service-card, .offer-card, .dashboard-card{ background: linear-gradient(180deg, var(--gw-surface), var(--gw-surface-2)) !important; border: 1px solid var(--gw-border) !important; border-radius: 14px; box-shadow: var(--gw-shadow); } .card-header, .modal-header{ border-bottom: 1px solid var(--gw-border) !important; } .card-footer, .modal-footer{ border-top: 1px solid var(--gw-border) !important; } .card, .panel, .widget, .box, .content-box{ position: relative; overflow: hidden; will-change: transform, box-shadow; } .card:hover, .panel:hover, .widget:hover, .box:hover, .content-box:hover{ transform: translateY(-2px); box-shadow: 0 18px 48px rgba(0,0,0,.45); } /* -------------------------- Typography -------------------------- */ h1,h2,h3,h4,h5,h6{ color: var(--gw-text) !important; } .text-muted{ color: var(--gw-muted) !important; } /* Make common bootstrap helpers theme-safe */ .text-dark{ color: var(--gw-text) !important; } .text-secondary{ color: var(--gw-muted) !important; } /* Background utility overrides so "bg-white" doesn't break dark mode */ html[data-bs-theme="dark"] .bg-white, html[data-bs-theme="dark"] .bg-light{ background: var(--gw-surface) !important; } html[data-bs-theme="light"] .bg-dark{ background: var(--gw-surface-2) !important; } /* -------------------------- Buttons -------------------------- */ .btn-primary, .btn-success, .btn.btn-primary, .btn.btn-success{ background: linear-gradient(180deg, var(--gw-brand), var(--gw-brand-2)) !important; border: 1px solid rgba(34,197,94,.35) !important; color: #07110b !important; font-weight: 600; } .btn-primary:hover, .btn-success:hover{ filter: brightness(1.05); box-shadow: 0 14px 28px var(--gw-brand-soft); } .btn-outline-primary, .btn-outline-success{ border-color: rgba(34,197,94,.35) !important; color: var(--gw-brand) !important; } .btn-outline-primary:hover, .btn-outline-success:hover{ background: var(--gw-brand-soft) !important; color: var(--gw-text) !important; } /* Subtle glossy sweep */ .btn, button{ position: relative; overflow: hidden; } .btn::after, button::after{ content:""; position:absolute; top:-70%; left:-35%; width:60%; height:240%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent); transform: rotate(22deg) translateX(-140%); transition: transform .6s ease; pointer-events:none; } .btn:hover::after, button:hover::after{ transform: rotate(22deg) translateX(240%); } /* -------------------------- Forms (Fix login input visibility) -------------------------- */ .form-control, .form-select, input, select, textarea{ background: color-mix(in srgb, var(--gw-surface) 78%, transparent) !important; border: 1px solid var(--gw-border) !important; color: var(--gw-text) !important; } input::placeholder, textarea::placeholder{ color: var(--gw-muted) !important; opacity: .85; } .form-control:focus, .form-select:focus, input:focus, select:focus, textarea:focus{ border-color: color-mix(in srgb, var(--gw-brand) 55%, var(--gw-border)) !important; box-shadow: 0 0 0 3px var(--gw-brand-soft) !important; outline: none !important; } /* Chrome autofill fix */ input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill{ -webkit-text-fill-color: var(--gw-text) !important; -webkit-box-shadow: 0 0 0 1000px color-mix(in srgb, var(--gw-surface) 85%, transparent) inset !important; transition: background-color 9999s ease-in-out 0s; } /* -------------------------- Tables -------------------------- */ .table th, .table td{ border-color: var(--gw-border) !important; color: var(--gw-text) !important; } .table thead th{ background: color-mix(in srgb, var(--gw-surface-2) 75%, transparent) !important; } /* -------------------------- Sidebar / Navbar -------------------------- */ .sidebar, .aside, .navbar, .topbar, #layout-menu, .layout-navbar{ background: color-mix(in srgb, var(--gw-bg) 92%, var(--gw-surface)) !important; border-color: var(--gw-border) !important; } .sidebar .nav-link.active, .sidebar .nav-item.active > .nav-link, .nav-pills .nav-link.active, .menu-item.active > .menu-link{ background: var(--gw-brand-soft) !important; border: 1px solid color-mix(in srgb, var(--gw-brand) 35%, var(--gw-border)) !important; color: var(--gw-brand) !important; border-radius: 10px; } /* Active indicator */ .menu-item.active > .menu-link{ position: relative; } .menu-item.active > .menu-link::before{ content:""; position:absolute; left: 10px; top: 50%; width: 3px; height: 18px; border-radius: 999px; background: linear-gradient(180deg, var(--gw-brand), var(--gw-brand-2)); transform: translateY(-50%); } /* -------------------------- Stat icon boxes (consistent) -------------------------- */ .stat-icon, .widget-icon, .summary-icon, .icon-box, .card-icon, .metrics-icon, .card .icon, .widget .icon{ width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--gw-brand-soft-2) !important; border: 1px solid color-mix(in srgb, var(--gw-brand) 35%, var(--gw-border)) !important; box-shadow: 0 0 0 2px color-mix(in srgb, var(--gw-brand) 10%, transparent) inset; } .stat-icon i, .widget-icon i, .summary-icon i, .icon-box i, .card-icon i, .metrics-icon i, .stat-icon svg, .widget-icon svg, .summary-icon svg, .icon-box svg, .card-icon svg, .metrics-icon svg{ color: var(--gw-brand) !important; fill: var(--gw-brand) !important; opacity: .95; } /* Subtle pulse (premium) */ @keyframes gwPulse{ 0%,100%{ box-shadow: 0 0 0 2px color-mix(in srgb, var(--gw-brand) 10%, transparent) inset, 0 0 18px color-mix(in srgb, var(--gw-brand) 10%, transparent); } 50%{ box-shadow: 0 0 0 2px color-mix(in srgb, var(--gw-brand) 14%, transparent) inset, 0 0 26px color-mix(in srgb, var(--gw-brand) 14%, transparent); } } .stat-icon, .widget-icon, .summary-icon, .icon-box, .card-icon, .metrics-icon{ animation: gwPulse 2.8s ease-in-out infinite; } /* -------------------------- Alerts / Badges -------------------------- */ .badge.bg-primary, .badge.bg-success{ background: var(--gw-brand-soft) !important; border: 1px solid color-mix(in srgb, var(--gw-brand) 28%, var(--gw-border)) !important; color: var(--gw-brand) !important; } .alert-success{ background: var(--gw-brand-soft) !important; border-color: color-mix(in srgb, var(--gw-brand) 25%, var(--gw-border)) !important; color: var(--gw-text) !important; } /* -------------------------- Reduced motion -------------------------- */ @media (prefers-reduced-motion: reduce){ *{ transition: none !important; } .stat-icon, .widget-icon, .summary-icon, .icon-box, .card-icon, .metrics-icon{ animation: none !important; } .btn::after, button::after{ transition: none !important; } }