/* ============================================ Theme: Royal Navy Applied via data-theme="navy" on ============================================ */ body[data-theme="navy"] { /* Primary palette - Deep Navy Blue */ --color-primary: #1b2a4a; --color-primary-light: #2c4270; --color-primary-dark: #0f1d36; --color-primary-rgb: 27, 42, 74; /* Secondary palette - Rich Gold */ --color-secondary: #c5a55a; --color-secondary-light: #d4b96e; --color-secondary-dark: #a88b3d; --color-secondary-rgb: 197, 165, 90; /* Accent palette - Warm Amber */ --color-accent: #d4a843; --color-accent-light: #e0be6a; --color-accent-dark: #b8922e; /* Surfaces */ --color-bg: #fafbfd; --color-bg-alt: #f0f3f8; --color-bg-card: #ffffff; --color-border: #d8dde8; --color-border-light: #e8ecf2; /* Semantic */ --color-success: #2d8a4e; --color-danger: #c0392b; --color-warning: #d4a843; --color-info: #2c4270; /* Shadows - deeper for premium feel */ --shadow-xs: 0 1px 2px rgba(27, 42, 74, 0.05); --shadow-sm: 0 1px 3px rgba(27, 42, 74, 0.08), 0 1px 2px rgba(27, 42, 74, 0.04); --shadow-md: 0 4px 6px -1px rgba(27, 42, 74, 0.1), 0 2px 4px -1px rgba(27, 42, 74, 0.05); --shadow-lg: 0 10px 15px -3px rgba(27, 42, 74, 0.12), 0 4px 6px -2px rgba(27, 42, 74, 0.06); --shadow-xl: 0 20px 25px -5px rgba(27, 42, 74, 0.12), 0 10px 10px -5px rgba(27, 42, 74, 0.05); --shadow-2xl: 0 25px 50px -12px rgba(27, 42, 74, 0.18); } /* ---- Navy Theme: Buttons ---- */ body[data-theme="navy"] .btn-primary { background: linear-gradient(135deg, #1b2a4a, #2c4270); border-color: #1b2a4a; } body[data-theme="navy"] .btn-primary:hover { background: linear-gradient(135deg, #0f1d36, #1b2a4a); border-color: #0f1d36; box-shadow: 0 4px 15px rgba(27, 42, 74, 0.4); } body[data-theme="navy"] .btn-outline-primary { color: #1b2a4a; border-color: #1b2a4a; } body[data-theme="navy"] .btn-outline-primary:hover { background: #1b2a4a; color: #fff; } /* ---- Navy Theme: Navbar ---- */ body[data-theme="navy"] .navbar-light .navbar-nav .nav-link.active, body[data-theme="navy"] .navbar-light .navbar-nav .nav-link:hover { color: #c5a55a; } body[data-theme="navy"] .topbar-section { background: #0f1d36 !important; } /* ---- Navy Theme: Links ---- */ body[data-theme="navy"] a { color: #2c4270; } body[data-theme="navy"] a:hover { color: #c5a55a; } /* ---- Navy Theme: Section Headings ---- */ body[data-theme="navy"] .section-title, body[data-theme="navy"] h1, body[data-theme="navy"] h2, body[data-theme="navy"] h3 { color: #1b2a4a; } /* ---- Navy Theme: Hero/CTA sections ---- */ body[data-theme="navy"] .cta-section, body[data-theme="navy"] .booking-cta { background: linear-gradient(135deg, #1b2a4a 0%, #2c4270 100%) !important; } /* ---- Navy Theme: Footer ---- */ body[data-theme="navy"] .footer { background: #0f1d36; } /* ---- Navy Theme: Badges / Highlights ---- */ body[data-theme="navy"] .badge.bg-primary { background-color: #1b2a4a !important; } body[data-theme="navy"] .text-primary { color: #1b2a4a !important; } body[data-theme="navy"] .bg-primary { background-color: #1b2a4a !important; } /* ---- Navy Theme: Cards ---- */ body[data-theme="navy"] .card { border-color: #d8dde8; } body[data-theme="navy"] .card:hover { border-color: #c5a55a; box-shadow: 0 8px 25px rgba(27, 42, 74, 0.12); } /* ---- Navy Theme: Service Cards ---- */ body[data-theme="navy"] .service-card:hover { border-color: #c5a55a; } /* ---- Navy Theme: Form Focus ---- */ body[data-theme="navy"] .form-control:focus, body[data-theme="navy"] .form-select:focus { border-color: #1b2a4a; box-shadow: 0 0 0 3px rgba(27, 42, 74, 0.15); } /* ---- Navy Theme: Scrollbar ---- */ body[data-theme="navy"] ::-webkit-scrollbar { width: 8px; } body[data-theme="navy"] ::-webkit-scrollbar-track { background: #f0f3f8; } body[data-theme="navy"] ::-webkit-scrollbar-thumb { background: #c5a55a; border-radius: 4px; } body[data-theme="navy"] ::-webkit-scrollbar-thumb:hover { background: #a88b3d; } /* ---- Navy Theme: Admin Sidebar ---- */ body[data-theme="navy"] .admin-sidebar { background: linear-gradient(180deg, #0f1d36, #1b2a4a); } body[data-theme="navy"] .admin-sidebar .sidebar-nav-item:hover, body[data-theme="navy"] .admin-sidebar .sidebar-nav-item.active { background: rgba(197, 165, 90, 0.15); color: #c5a55a; } body[data-theme="navy"] .admin-sidebar .sidebar-section-title { color: rgba(255, 255, 255, 0.5); } body[data-theme="navy"] .admin-sidebar .sidebar-nav-item { color: rgba(255, 255, 255, 0.75); } /* ---- Navy Theme: Login Page ---- */ body[data-theme="navy"] .auth-sidebar::before { background: linear-gradient(135deg, rgba(15, 29, 54, .92), rgba(27, 42, 74, .88)); } body[data-theme="navy"] .btn-login { background: linear-gradient(135deg, #1b2a4a, #2c4270); } body[data-theme="navy"] .btn-login:hover { background: linear-gradient(135deg, #0f1d36, #1b2a4a); box-shadow: 0 4px 15px rgba(27, 42, 74, 0.4); } body[data-theme="navy"] .form-floating-label input:focus + label { color: #1b2a4a; } /* ---- Navy Theme: Footer ---- */ body[data-theme="navy"] .footer { background: #0a0a1a; } body[data-theme="navy"] .footer-bottom { background: rgba(0, 0, 0, 0.3); } body[data-theme="navy"] .footer-social a { background: rgba(197, 165, 90, 0.1); color: #c5a55a; } body[data-theme="navy"] .footer-social a:hover { background: #c5a55a; color: #0a0a1a; } body[data-theme="navy"] .footer-column-title { color: #c5a55a; } body[data-theme="navy"] .footer-links a:hover { color: #c5a55a; } body[data-theme="navy"] .footer-contact-icon { color: #c5a55a; } /* ============================================ Theme: Company Green (Default) Applied via data-theme="green" on ============================================ */ /* ---- Green Theme: Footer ---- */ body[data-theme="green"] .footer { background: linear-gradient(180deg, #0e4f28 0%, #0a3d1f 100%); } body[data-theme="green"] .footer-bottom { background: rgba(0, 0, 0, 0.2); } body[data-theme="green"] .footer-social a { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.8); } body[data-theme="green"] .footer-social a:hover { background: #fff; color: #1a8a4a; } body[data-theme="green"] .footer-column-title { color: #fff; } body[data-theme="green"] .footer-links a:hover { color: #fff; } body[data-theme="green"] .footer-contact-icon { color: #22a85a; } /* ---- Green Theme: Active state indicator ---- */ body[data-theme="green"] .theme-preview-green, body[data-theme="navy"] .theme-preview-navy { outline: 3px solid var(--color-primary); outline-offset: 2px; }