/* ========================================================= Aqua POS Theme System - Light mode defaults on :root - Dark mode activated via .dark-mode on - All UI tokens are centralized for scalability ========================================================= */ :root { color-scheme: light; --color-bg: #f3f6fb; --color-surface: #ffffff; --color-surface-elevated: #ffffff; --color-surface-muted: #eaf0f8; --color-primary: #0ea5c6; --color-primary-hover: #0891b2; --color-secondary: #1d4ed8; --color-accent: #8b5cf6; --color-text-primary: #0f172a; --color-text-secondary: #475569; --color-text-inverse: #f8fafc; --color-border: #d6deea; --color-hover: #dfe9f5; --color-overlay: rgba(10, 20, 38, 0.55); --color-overlay-soft: rgba(14, 165, 198, 0.82); --color-success: #059669; --color-warning: #d97706; --color-danger: #dc2626; --shadow-sm: 0 4px 14px rgba(15, 23, 42, 0.08); --shadow-md: 0 14px 34px rgba(15, 23, 42, 0.12); --bs-primary: var(--color-primary); --bs-secondary: var(--color-secondary); --bs-light: var(--color-surface-muted); --bs-dark: var(--color-text-primary); --bs-white: var(--color-text-inverse); --bg-color: var(--color-bg); --surface-color: var(--color-surface); --surface-muted: var(--color-surface-muted); --text-color: var(--color-text-primary); --text-muted: var(--color-text-secondary); --border-color: var(--color-border); --shadow-color: rgba(15, 23, 42, 0.18); --primary-color: var(--color-primary); /* Section specific */ --section-hero-text: #f8fafc; --section-nav-bg: rgba(255, 255, 255, 0.9); --section-nav-border: rgba(15, 23, 42, 0.1); --section-topbar-bg: #111b2e; --section-topbar-text: #e2e8f0; --section-footer-bg: #111b2e; --section-footer-text: #c7d2e5; --section-footer-heading: #f1f5f9; --section-appointment-overlay: rgba(244, 248, 255, 0.86); --section-appointment-form: rgba(14, 165, 198, 0.16); --section-card-heading: #0f172a; --section-card-text: #475569; --nav-dropdown-title: #0f172a; --nav-dropdown-text: #475569; --nav-dropdown-text-strong: #1e293b; --nav-dropdown-hover-bg: #e2eefc; --partners-hero-bg: linear-gradient(135deg, #f8fbff, #ffffff 45%, #edf5ff); --partners-subtitle-color: #5d6b82; --partners-card-bg: #ffffff; --partners-card-border: rgba(17, 24, 39, 0.08); --partners-card-shadow: 0 10px 34px rgba(15, 23, 42, 0.06); --partners-card-shadow-hover: 0 20px 44px rgba(15, 23, 42, 0.12); --partners-card-logo-bg: #f8fbff; --partners-card-title: #0f172a; --partners-card-description: #62748d; --partners-card-link: var(--color-primary); --partners-card-link-hover: #0b7cdb; --partners-empty-bg: #ffffff; --partners-empty-border: rgba(17,24,39,.2); } body.dark-mode { color-scheme: dark; --color-bg: #0d1422; --color-surface: #131d31; --color-surface-elevated: #18243b; --color-surface-muted: #1d2a44; --color-primary: #38bdf8; --color-primary-hover: #60cdfa; --color-secondary: #93c5fd; --color-accent: #a78bfa; --color-text-primary: #e2e8f0; --color-text-secondary: #a8b6cc; --color-text-inverse: #f1f5f9; --color-border: #2a3a58; --color-hover: #243350; --color-overlay: rgba(4, 10, 22, 0.68); --color-overlay-soft: rgba(13, 38, 70, 0.84); --color-success: #34d399; --color-warning: #fbbf24; --color-danger: #f87171; --shadow-sm: 0 8px 22px rgba(2, 8, 22, 0.35); --shadow-md: 0 16px 40px rgba(2, 8, 22, 0.45); --bs-primary: var(--color-primary); --bs-secondary: var(--color-secondary); --bs-light: var(--color-surface-muted); --bs-dark: var(--color-text-primary); --bs-white: var(--color-text-inverse); --shadow-color: rgba(2, 8, 22, 0.45); --section-hero-text: #e2e8f0; --section-nav-bg: rgba(19, 29, 49, 0.92); --section-nav-border: rgba(148, 163, 184, 0.22); --section-topbar-bg: #0b1220; --section-topbar-text: #cbd5e1; --section-footer-bg: #0a1220; --section-footer-text: #9fb0c8; --section-footer-heading: #e2e8f0; --section-appointment-overlay: rgba(8, 15, 29, 0.84); --section-appointment-form: rgba(30, 58, 98, 0.55); --section-card-heading: #e2e8f0; --section-card-text: #c0cde0; --nav-dropdown-title: #e2e8f0; --nav-dropdown-text: #c0cde0; --nav-dropdown-text-strong: #f1f5f9; --nav-dropdown-hover-bg: #263754; --partners-hero-bg: linear-gradient(135deg, #111a2b, #162238 45%, #0f1a2c); --partners-subtitle-color: #c0cde0; --partners-card-bg: var(--color-surface-elevated); --partners-card-border: var(--color-border); --partners-card-shadow: 0 12px 30px rgba(2, 8, 22, 0.38); --partners-card-shadow-hover: 0 20px 44px rgba(2, 8, 22, 0.55); --partners-card-logo-bg: var(--color-surface-muted); --partners-card-title: var(--color-text-primary); --partners-card-description: var(--color-text-secondary); --partners-card-link: var(--color-primary); --partners-card-link-hover: var(--color-primary-hover); --partners-empty-bg: var(--color-surface-elevated); --partners-empty-border: var(--color-border); } body { background-color: var(--color-bg); color: var(--color-text-primary); } h1, h2, h3, h4, h5, h6 { color: var(--color-text-primary); } p { color: var(--color-text-secondary); } a { color: var(--color-primary); } a:hover { color: var(--color-primary-hover); } button, .btn, input, textarea, select { transition: background-color .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease; } .btn-primary { background-color: var(--color-primary); border-color: var(--color-primary); color: var(--color-text-inverse); } .btn-primary:hover, .btn-primary:focus { background-color: var(--color-primary-hover); border-color: var(--color-primary-hover); color: var(--color-text-inverse); } .card, .service .service-item, .feature .feature-item, .blog-item, .team-item { background-color: var(--color-surface); border-color: var(--color-border); box-shadow: var(--shadow-sm); } input, textarea, select, .form-control { color: var(--color-text-primary); background-color: var(--color-surface); border-color: var(--color-border); } input::placeholder, textarea::placeholder { color: var(--color-text-secondary); } .navbar, .dropdown-menu, .mega-menu__panel { background-color: var(--color-surface) !important; border-color: var(--color-border); } .navbar { background-color: var(--section-nav-bg) !important; border-bottom: 1px solid var(--section-nav-border); backdrop-filter: blur(8px); } .navbar.bg-white, .sticky-top.navbar-light, .sticky-top.navbar-light.bg-white { background-color: var(--section-nav-bg) !important; border-bottom: 1px solid var(--section-nav-border); } .topbar, .topbar-shell { background-color: var(--section-topbar-bg) !important; } .topbar a, .topbar a i, .topbar-shell a, .topbar-shell a i { color: var(--section-topbar-text) !important; } .header-carousel .header-carousel-item .carousel-caption { background: linear-gradient(var(--color-overlay), var(--color-overlay)); } .header-carousel .carousel-caption h1, .header-carousel .carousel-caption h5, .header-carousel .carousel-caption p { color: var(--section-hero-text) !important; } .service, .about, .feature, .blog, .team { background-color: var(--color-bg); } .service .service-content, .about .bg-light, .feature .feature-item, .blog .blog-item .blog-centent, .team .team-item .team-content { background-color: var(--color-surface-muted) !important; border-color: var(--color-border) !important; } .service .service-item h5, .feature .feature-item h5, .blog .blog-item .h4, .team .team-item .team-content h5 { color: var(--section-card-heading) !important; } .service .service-item p, .feature .feature-item p, .blog .blog-item p, .team .team-item .team-content p { color: var(--section-card-text) !important; } .appointment { background: linear-gradient(var(--section-appointment-overlay), var(--section-appointment-overlay)), url(../img/carousel-2.jpg); } .appointment .appointment-form { background: var(--section-appointment-form); } .footer { background: linear-gradient(var(--color-overlay), var(--color-overlay)), var(--section-footer-bg); } .footer .footer-item h4, .footer .footer-item h4 i { color: var(--section-footer-heading) !important; } .footer .footer-item p, .footer .footer-item a { color: var(--section-footer-text) !important; } .copyright { background-color: var(--color-surface) !important; color: var(--color-text-secondary); } .bg-light, .about.bg-light, .service-content.bg-light, .team .team-item .team-content, .blog .blog-item .blog-content { background-color: var(--color-surface-muted) !important; } .bg-white, .feature .feature-icon > div { background-color: var(--color-surface) !important; } .text-white, .text-white-50 { color: var(--color-text-inverse) !important; } .text-secondary, .text-muted { color: var(--color-text-secondary) !important; } .border, .border-primary, .form-control, .nav-toolbar__btn { border-color: var(--color-border) !important; } .nav-toolbar__btn { background-color: var(--color-surface-muted); color: var(--color-text-primary); } .nav-toolbar__btn:hover { background-color: var(--color-hover); box-shadow: var(--shadow-sm); }