/** * STAVROU BROS - Night/Dark Theme * Dark mode color scheme and styles */ /* ============================================ Dark Theme CSS Variables Applied when .dark-theme class is on or ============================================ */ .dark-theme { /* Primary Colors - Dark Theme */ --color-primary: #E5E7EB; /* Light gray for dark backgrounds */ --color-primary-light: #F3F4F6; /* Lighter gray */ --color-primary-dark: #D1D5DB; /* Slightly darker gray */ /* Accent Colors - Keep vibrant but adjusted for dark */ --color-accent: #F59E0B; /* Amber/Gold (good contrast on dark) */ --color-accent-light: #FCD34D; /* Lighter amber */ --color-accent-dark: #D97706; /* Darker amber */ /* Neutral Colors - Inverted */ --color-text: #F9FAFB; /* Light text on dark background */ --color-text-light: #D1D5DB; /* Lighter gray text */ --color-bg: #111827; /* Dark background */ --color-border: #374151; /* Dark border */ /* Success, Error, Warning - Adjusted for dark mode */ --color-success: #34D399; /* Lighter green for better contrast */ --color-error: #F87171; /* Lighter red */ --color-warning: #FBBF24; /* Lighter amber */ --color-info: #60A5FA; /* Lighter blue */ /* Shadows - Adjusted for dark theme */ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.5); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.3); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.3); } /* ============================================ Global Dark Theme Overrides ============================================ */ .dark-theme body { background-color: #0F172A; /* Very dark blue-gray */ color: var(--color-text); } .dark-theme h1, .dark-theme h2, .dark-theme h3, .dark-theme h4, .dark-theme h5, .dark-theme h6 { color: var(--color-text); } .dark-theme a { color: var(--color-accent); } .dark-theme a:hover { color: var(--color-accent-light); } .dark-theme small { color: var(--color-text-light); } /* ============================================ Form Elements - Dark Theme ============================================ */ .dark-theme input[type="text"], .dark-theme input[type="email"], .dark-theme input[type="tel"], .dark-theme input[type="date"], .dark-theme input[type="time"], .dark-theme textarea, .dark-theme select { background-color: #1F2937; /* Dark gray */ color: var(--color-text); border-color: var(--color-border); } .dark-theme input[type="text"]:focus, .dark-theme input[type="email"]:focus, .dark-theme input[type="tel"]:focus, .dark-theme input[type="date"]:focus, .dark-theme input[type="time"]:focus, .dark-theme textarea:focus, .dark-theme select:focus { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.3); } .dark-theme input[type="text"]:disabled, .dark-theme input[type="email"]:disabled, .dark-theme input[type="tel"]:disabled, .dark-theme input[type="date"]:disabled, .dark-theme input[type="time"]:disabled, .dark-theme textarea:disabled, .dark-theme select:disabled { background-color: #374151; color: var(--color-text-light); } .dark-theme input[type="text"]::placeholder, .dark-theme input[type="email"]::placeholder, .dark-theme input[type="tel"]::placeholder, .dark-theme textarea::placeholder { color: #9CA3AF; } /* ============================================ Buttons - Dark Theme ============================================ */ .dark-theme button.primary, .dark-theme .btn.primary { background-color: var(--color-accent); color: #111827; /* Dark text on bright button */ } .dark-theme button.primary:hover, .dark-theme .btn.primary:hover { background-color: var(--color-accent-light); } .dark-theme button.secondary, .dark-theme .btn.secondary { background-color: #374151; color: var(--color-text); border-color: var(--color-border); } .dark-theme button.secondary:hover, .dark-theme .btn.secondary:hover { background-color: #4B5563; border-color: var(--color-accent); } /* ============================================ Cards - Dark Theme ============================================ */ .dark-theme .card { background-color: #1F2937; border-color: var(--color-border); box-shadow: var(--shadow-md); } .dark-theme .card:hover { box-shadow: var(--shadow-lg); } .dark-theme .card-header, .dark-theme .card-footer { border-color: var(--color-border); } /* ============================================ Alerts - Dark Theme ============================================ */ .dark-theme .alert-success { background-color: rgba(52, 211, 153, 0.1); border-color: rgba(52, 211, 153, 0.3); color: #6EE7B7; } .dark-theme .alert-error { background-color: rgba(248, 113, 113, 0.1); border-color: rgba(248, 113, 113, 0.3); color: #FCA5A5; } .dark-theme .alert-warning { background-color: rgba(251, 191, 36, 0.1); border-color: rgba(251, 191, 36, 0.3); color: #FCD34D; } .dark-theme .alert-info { background-color: rgba(96, 165, 250, 0.1); border-color: rgba(96, 165, 250, 0.3); color: #93C5FD; } /* ============================================ Utility Classes - Dark Theme Overrides ============================================ */ /* Background colors */ .dark-theme .bg-white { background-color: #1F2937 !important; } .dark-theme .bg-gray-50 { background-color: #111827 !important; } .dark-theme .bg-gray-100 { background-color: #1F2937 !important; } .dark-theme .bg-gray-900 { background-color: #0F172A !important; } /* Text colors */ .dark-theme .text-gray-600 { color: #D1D5DB !important; } .dark-theme .text-gray-700 { color: #E5E7EB !important; } .dark-theme .text-gray-900 { color: #F9FAFB !important; } .dark-theme .text-primary { color: var(--color-text) !important; } /* Border colors */ .dark-theme .border { border-color: var(--color-border) !important; } .dark-theme .border-gray-200 { border-color: #374151 !important; } /* ============================================ Component-Specific Dark Theme Styles ============================================ */ /* Header - Dark theme */ .dark-theme header { background-color: #1F2937 !important; border-bottom: 1px solid var(--color-border); } .dark-theme header.shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5); } /* Mobile menu - Dark theme */ .dark-theme #mobile-menu { background-color: #1F2937; border-color: var(--color-border); } /* Hero section - Dark theme */ .dark-theme #home { background: linear-gradient(135deg, #1F2937 0%, #111827 100%) !important; } /* Hero gradient backgrounds */ .dark-theme .bg-gradient-to-br { background-image: linear-gradient(to bottom right, #1F2937, #111827) !important; } .dark-theme .from-blue-50 { --tw-gradient-from: #1F2937 !important; } .dark-theme .to-blue-100 { --tw-gradient-to: #111827 !important; } /* Hero decorative elements */ .dark-theme .bg-blue-200 { background-color: rgba(245, 158, 11, 0.1) !important; } .dark-theme .bg-blue-300 { background-color: rgba(245, 158, 11, 0.05) !important; } /* Service cards - Dark theme */ .dark-theme .service-card { background-color: #1F2937; border-color: var(--color-border); } .dark-theme .service-card:hover { border-color: var(--color-accent); box-shadow: 0 0 20px rgba(245, 158, 11, 0.2); } /* About section - Dark theme */ .dark-theme #about { background-color: #1F2937 !important; } /* Gallery grid hover overlays - Dark theme */ .dark-theme .group-hover\:bg-opacity-60 { --tw-bg-opacity: 0.7 !important; } /* Services section - Dark theme */ .dark-theme #services { background-color: #0F172A !important; } /* Contact section - Dark theme */ .dark-theme #contact { background-color: #1F2937 !important; } /* Cart section - Dark theme */ .dark-theme #cart { background-color: #0F172A !important; } /* Footer - Dark theme */ .dark-theme footer { background-color: #111827 !important; border-top: 1px solid var(--color-border); } /* Hover states for links in dark mode */ .dark-theme .hover\:bg-gray-50:hover { background-color: #374151 !important; } .dark-theme .hover\:bg-gray-100:hover { background-color: #374151 !important; } .dark-theme .hover\:bg-gray-200:hover { background-color: #4B5563 !important; } .dark-theme .hover\:bg-gray-300:hover { background-color: #6B7280 !important; } .dark-theme .hover\:bg-gray-400:hover { background-color: #9CA3AF !important; } .dark-theme .hover\:bg-gray-700:hover { background-color: #374151 !important; } .dark-theme .hover\:bg-blue-50:hover { background-color: rgba(245, 158, 11, 0.15) !important; } .dark-theme .hover\:bg-blue-700:hover { background-color: #D97706 !important; } .dark-theme .hover\:bg-red-50:hover { background-color: rgba(239, 68, 68, 0.15) !important; } .dark-theme .hover\:bg-red-700:hover { background-color: #DC2626 !important; } .dark-theme .hover\:bg-green-700:hover { background-color: #059669 !important; } .dark-theme .hover\:text-blue-600:hover { color: var(--color-accent) !important; } .dark-theme .hover\:text-red-600:hover { color: #F87171 !important; } .dark-theme .hover\:text-red-800:hover { color: #FCA5A5 !important; } .dark-theme .hover\:border-red-500:hover { border-color: #EF4444 !important; } /* Active/Selected states */ .dark-theme .bg-blue-100 { background-color: rgba(245, 158, 11, 0.15) !important; } .dark-theme .text-blue-600 { color: var(--color-accent) !important; } .dark-theme .bg-blue-600 { background-color: var(--color-accent) !important; color: #111827 !important; } .dark-theme .border-blue-600 { border-color: var(--color-accent) !important; } /* ============================================ Tailwind Color Overrides for Dark Theme ============================================ */ /* Blue colors (accent in this project) */ .dark-theme .text-blue-600 { color: #F59E0B !important; } .dark-theme .bg-blue-600 { background-color: #F59E0B !important; } .dark-theme .border-blue-600 { border-color: #F59E0B !important; } .dark-theme .hover\:bg-blue-700:hover { background-color: #D97706 !important; } /* Focus ring colors */ .dark-theme .focus\:ring-blue-500:focus { --tw-ring-color: rgba(245, 158, 11, 0.5) !important; } /* ============================================ Smooth Transition for Theme Switching ============================================ */ .dark-theme * { transition: background-color 300ms ease-in-out, color 300ms ease-in-out, border-color 300ms ease-in-out; } /* Disable transitions for certain elements during theme switch */ .dark-theme *:where(img, video, iframe, canvas, svg) { transition: none; } /* ============================================ CUSTOMER FORM PAGE - Dark Theme ============================================ */ /* Form container and cards */ .dark-theme .card { background-color: var(--color-card-bg) !important; border: 1px solid var(--color-border); } /* Form labels */ .dark-theme label { color: var(--color-text-primary) !important; } /* Form inputs */ .dark-theme input[type="text"], .dark-theme input[type="email"], .dark-theme input[type="tel"], .dark-theme textarea, .dark-theme select { background-color: #1F2937 !important; border-color: var(--color-border) !important; color: var(--color-text-primary) !important; } .dark-theme input[type="text"]:focus, .dark-theme input[type="email"]:focus, .dark-theme input[type="tel"]:focus, .dark-theme textarea:focus, .dark-theme select:focus { background-color: #374151 !important; border-color: var(--color-accent) !important; outline: none !important; --tw-ring-color: rgba(245, 158, 11, 0.3) !important; } /* Input placeholders */ .dark-theme input::placeholder, .dark-theme textarea::placeholder { color: #9CA3AF !important; } /* Checkbox and Radio inputs */ .dark-theme input[type="checkbox"], .dark-theme input[type="radio"] { border-color: var(--color-border) !important; background-color: #1F2937 !important; } .dark-theme input[type="checkbox"]:checked, .dark-theme input[type="radio"]:checked { background-color: var(--color-accent) !important; border-color: var(--color-accent) !important; } /* Validation messages */ .dark-theme .text-red-600, .dark-theme .text-red-500 { color: #F87171 !important; } .dark-theme .text-green-600, .dark-theme .text-green-500 { color: #34D399 !important; } /* Privacy policy text */ .dark-theme .text-sm.text-gray-600 { color: var(--color-text-secondary) !important; } /* Required asterisk */ .dark-theme .text-red-600 { color: #F87171 !important; } /* Form section headings */ .dark-theme h2, .dark-theme h3 { color: var(--color-text-primary) !important; } /* Info boxes */ .dark-theme .bg-blue-50 { background-color: rgba(245, 158, 11, 0.1) !important; } .dark-theme .bg-yellow-50 { background-color: rgba(251, 191, 36, 0.1) !important; } .dark-theme .bg-green-50 { background-color: rgba(52, 211, 153, 0.1) !important; } /* ============================================ CALENDAR PAGE - Dark Theme ============================================ */ /* Calendar container */ .dark-theme .calendar-container { background-color: var(--color-card-bg) !important; } /* Calendar header */ .dark-theme .calendar-header { background-color: #1F2937 !important; border-bottom: 1px solid var(--color-border); } /* Month/Year selector */ .dark-theme .calendar-header select, .dark-theme .calendar-header button { background-color: #374151 !important; color: var(--color-text-primary) !important; border-color: var(--color-border) !important; } .dark-theme .calendar-header button:hover { background-color: #4B5563 !important; } /* Day names header */ .dark-theme .calendar-weekdays { background-color: #1F2937 !important; border-bottom: 1px solid var(--color-border); } .dark-theme .calendar-weekdays span { color: var(--color-text-secondary) !important; } /* Calendar days */ .dark-theme .calendar-day { background-color: var(--color-card-bg) !important; color: var(--color-text-primary) !important; border: 1px solid var(--color-border); } .dark-theme .calendar-day:hover:not(.disabled):not(.past) { background-color: #374151 !important; border-color: var(--color-accent) !important; } .dark-theme .calendar-day.selected { background-color: var(--color-accent) !important; color: #111827 !important; border-color: var(--color-accent) !important; font-weight: 600; } .dark-theme .calendar-day.today { border-color: var(--color-accent) !important; border-width: 2px; } .dark-theme .calendar-day.disabled, .dark-theme .calendar-day.past { background-color: #1F2937 !important; color: #6B7280 !important; opacity: 0.5; } .dark-theme .calendar-day.other-month { color: #6B7280 !important; } /* Time slots */ .dark-theme .time-slot { background-color: #1F2937 !important; color: var(--color-text-primary) !important; border: 1px solid var(--color-border) !important; } .dark-theme .time-slot:hover:not(.disabled):not(.booked) { background-color: #374151 !important; border-color: var(--color-accent) !important; } .dark-theme .time-slot.selected { background-color: var(--color-accent) !important; color: #111827 !important; border-color: var(--color-accent) !important; } .dark-theme .time-slot.disabled, .dark-theme .time-slot.booked { background-color: #1F2937 !important; color: #6B7280 !important; opacity: 0.5; cursor: not-allowed; } /* Booking summary */ .dark-theme .booking-summary { background-color: #1F2937 !important; border: 1px solid var(--color-border); } .dark-theme .booking-summary h3 { color: var(--color-text-primary) !important; } .dark-theme .booking-summary .summary-item { border-bottom: 1px solid var(--color-border); } .dark-theme .booking-summary .summary-label { color: var(--color-text-secondary) !important; } .dark-theme .booking-summary .summary-value { color: var(--color-text-primary) !important; } /* Loading spinner in calendar */ .dark-theme .loading-spinner { border-color: var(--color-border); border-top-color: var(--color-accent); } /* ============================================ CONFIRMATION PAGE - Dark Theme ============================================ */ /* Success icon background */ .dark-theme .bg-green-600 { background-color: #059669 !important; } /* Success icon container - keep the green */ .dark-theme .success-icon { background-color: #059669 !important; } /* Booking ID display */ .dark-theme .bg-gray-100 { background-color: #1F2937 !important; } .dark-theme .font-mono { color: var(--color-accent) !important; } /* Primary heading on confirmation */ .dark-theme .text-primary { color: var(--color-accent) !important; } /* Confirmation message text */ .dark-theme .text-gray-600 { color: var(--color-text-secondary) !important; } /* Thank you message */ .dark-theme .text-sm.text-gray-600 { color: var(--color-text-secondary) !important; } /* ============================================ Standalone Pages - Common Elements ============================================ */ /* Page background */ .dark-theme .bg-gray-50 { background-color: var(--color-bg) !important; } .dark-theme body { background-color: var(--color-bg) !important; } /* Header on standalone pages */ .dark-theme header { background-color: var(--color-card-bg) !important; border-bottom: 1px solid var(--color-border); } .dark-theme header h1 { color: var(--color-text-primary) !important; } /* Main content area */ .dark-theme main { background-color: var(--color-bg) !important; } /* Progress indicators */ .dark-theme .progress-bar { background-color: #1F2937 !important; } .dark-theme .progress-bar-fill { background-color: var(--color-accent) !important; } /* Step indicators */ .dark-theme .step { background-color: #1F2937 !important; border-color: var(--color-border) !important; color: var(--color-text-secondary) !important; } .dark-theme .step.active { background-color: var(--color-accent) !important; border-color: var(--color-accent) !important; color: #111827 !important; } .dark-theme .step.completed { background-color: #059669 !important; border-color: #059669 !important; color: white !important; } /* Dividers */ .dark-theme hr { border-color: var(--color-border) !important; } /* Alerts and notifications */ .dark-theme .alert { background-color: #1F2937 !important; border-color: var(--color-border) !important; } .dark-theme .alert.success { background-color: rgba(5, 150, 105, 0.1) !important; border-color: #059669 !important; color: #34D399 !important; } .dark-theme .alert.error { background-color: rgba(239, 68, 68, 0.1) !important; border-color: #EF4444 !important; color: #F87171 !important; } .dark-theme .alert.warning { background-color: rgba(251, 191, 36, 0.1) !important; border-color: #FBB F24 !important; color: #FBBF24 !important; } .dark-theme .alert.info { background-color: rgba(245, 158, 11, 0.1) !important; border-color: var(--color-accent) !important; color: var(--color-accent) !important; } /* ══════════════════════════════════════════════════════════════ STAVROU BROS REAL DESIGN TOKEN OVERRIDES The existing .dark-theme rules above target generic CSS classes. These rules override the ACTUAL design tokens used by the site (--ink, --paper, --on-dark, --on-light etc.) so all sections including the light services/contact sections become dark. ══════════════════════════════════════════════════════════════ */ html.dark-theme { /* Dark surfaces — navy-tinted per ticket requirement (#1a1a2e) */ --ink: #1a1a2e; --ink-1: #16213e; --ink-2: #0f2040; --ink-3: #1a2a3a; /* Light surfaces → become dark so bg-paper-* sections flip */ --paper: #1a1a2e; --paper-2: #16213e; --paper-3: #0f2040; /* Text tokens — keep light text readable on dark surfaces */ --on-dark: #f4f3f0; --on-dark-dim: #a6a5a0; --on-light: #f4f3f0; /* was dark text on light bg; now light text on dark bg */ --on-light-dim: #a6a5a0; /* Hairlines — white hairlines on all surfaces */ --line-dark: rgba(255,255,255,.14); --line-light: rgba(255,255,255,.10); /* Compat aliases used by booking-modal.js and legacy CSS */ --color-bg: var(--ink); --color-text: var(--on-dark); --color-text-light: var(--on-dark-dim); --color-border: rgba(255,255,255,.12); } /* Body background driven by token */ html.dark-theme body { background: var(--ink) !important; color: var(--on-dark) !important; } /* ── Tailwind utility overrides (Tailwind bakes in hex — needs !important) ── */ /* Ink (dark surface) utilities */ html.dark-theme .bg-ink { background-color: #1a1a2e !important; } html.dark-theme .bg-ink-1 { background-color: #16213e !important; } html.dark-theme .bg-ink-2 { background-color: #0f2040 !important; } html.dark-theme .bg-ink-3 { background-color: #1a2a3a !important; } /* Paper (light surface) utilities → flip to dark */ html.dark-theme .bg-paper { background-color: #1a1a2e !important; } html.dark-theme .bg-paper-2 { background-color: #16213e !important; } html.dark-theme .bg-paper-3 { background-color: #0f2040 !important; } /* Text utilities */ html.dark-theme .text-on-dark { color: #f4f3f0 !important; } html.dark-theme .text-on-dark-dim { color: #a6a5a0 !important; } html.dark-theme .text-on-light { color: #f4f3f0 !important; } /* services section text */ html.dark-theme .text-on-light-dim { color: #a6a5a0 !important; } /* Border utilities */ html.dark-theme .border-line-dark { border-color: rgba(255,255,255,.14) !important; } html.dark-theme .border-line-light { border-color: rgba(255,255,255,.10) !important; } /* ── Section-specific overrides (inline styles on sections) ── */ /* Services section: uses inline style="background: var(--paper-2)" on sub-elements */ html.dark-theme #services { background: #16213e !important; color: #f4f3f0 !important; } /* Find-us / contact section */ html.dark-theme #find-us, html.dark-theme #contact { background: #1a1a2e !important; color: #f4f3f0 !important; } /* Any section using bg-paper-2 class (services section wrapper) */ html.dark-theme section.bg-paper-2, html.dark-theme .bg-paper-2 { background-color: #16213e !important; } html.dark-theme section.bg-paper-2 .text-on-light, html.dark-theme .bg-paper-2 .text-on-light { color: #f4f3f0 !important; } html.dark-theme section.bg-paper-2 .text-on-light-dim, html.dark-theme .bg-paper-2 .text-on-light-dim { color: #a6a5a0 !important; } /* Service cards in dark mode */ html.dark-theme #services-list .service-item, html.dark-theme #services-list [class*="card"], html.dark-theme #services-list > div { background-color: #1a2a3a !important; border-color: rgba(255,255,255,.10) !important; } /* Nav: override the dark inline-style slightly for navy tint */ html.dark-theme #shared-nav { background: rgba(10,10,20,0.9) !important; border-bottom: 1px solid rgba(255,255,255,0.10) !important; } html.dark-theme #shared-mobile-menu { background: rgba(10,10,20,0.97) !important; border-bottom: 1px solid rgba(255,255,255,0.10) !important; } /* eyebrow + section heading colours inside light sections */ html.dark-theme .eyebrow { color: var(--gold) !important; } html.dark-theme .sec-title { color: #f4f3f0 !important; } /* Gallery section already dark — just ensure nav styling consistency */ html.dark-theme #gallery { background: #1a1a2e !important; } /* Smooth theme transition on key properties (but not on images/svgs) */ html.dark-theme *:not(img):not(svg):not(video):not(canvas) { transition: background-color 250ms ease, color 250ms ease, border-color 250ms ease; }