/** * Iconic Travel — Dark Mode * Activated via or [data-theme="dark"] * Palette: lighter navy + warm gold for dark surfaces */ /* Smooth theme transition */ html { transition: background-color .3s ease, color .3s ease; } body, .site-header, .mainbar, .topbar, .site-footer, .footer, .preview-card, .tour-card, .visa-card, .feature-card, .faq-item, .stat-item, .glass-card, input, select, textarea, .btn, .preview-strip-section, .preview-strip-section--alt, .why-choose-section { transition: background-color .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease; } /* --------------------------------------------------------- * Dark theme variable overrides * --------------------------------------------------------- */ html.dark, html[data-theme="dark"] { --bg: #0A0E14; --bg-soft: #131822; --bg-tint: #161D29; --text: #ECEFF4; --text-muted: #9CA3AF; --border: #1F2937; --footer-bg: #050811; --primary: #4A7CC7; --primary-dark: #3D6AAE; --primary-light: #6B97D6; --accent: #E8C176; --accent-dark: #D4A24C; --accent-light: #F0D292; --shadow-card: 0 10px 30px -10px rgba(0, 0, 0, .55); color-scheme: dark; } html.dark body, html[data-theme="dark"] body { background-color: var(--bg); color: var(--text); } /* Header / Nav */ html.dark .site-header, html.dark .mainbar, html[data-theme="dark"] .site-header, html[data-theme="dark"] .mainbar { background-color: rgba(10, 14, 20, 0.85); backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%); border-bottom-color: var(--border); } html.dark .topbar, html[data-theme="dark"] .topbar { background-color: #050811; color: var(--text-muted); border-bottom-color: var(--border); } html.dark .topbar a, html[data-theme="dark"] .topbar a { color: var(--text-muted); } html.dark .topbar a:hover, html[data-theme="dark"] .topbar a:hover { color: var(--accent); } html.dark .primary-menu a, html[data-theme="dark"] .primary-menu a { color: var(--text); } html.dark .primary-menu a:hover, html[data-theme="dark"] .primary-menu a:hover { color: var(--accent); } /* Cards */ html.dark .preview-card, html.dark .tour-card, html.dark .visa-card, html.dark .feature-card, html.dark .stat-item, html.dark .faq-item, html[data-theme="dark"] .preview-card, html[data-theme="dark"] .tour-card, html[data-theme="dark"] .visa-card, html[data-theme="dark"] .feature-card, html[data-theme="dark"] .stat-item, html[data-theme="dark"] .faq-item { background-color: var(--bg-soft); border-color: var(--border); color: var(--text); box-shadow: var(--shadow-card); } html.dark .preview-card__title, html.dark .tour-card__title, html.dark .visa-card__title, html.dark .feature-card__title, html[data-theme="dark"] .preview-card__title, html[data-theme="dark"] .tour-card__title, html[data-theme="dark"] .visa-card__title, html[data-theme="dark"] .feature-card__title { color: var(--text); } html.dark .preview-card__desc, html.dark .preview-card__text, html.dark .feature-card__text, html[data-theme="dark"] .preview-card__desc, html[data-theme="dark"] .preview-card__text, html[data-theme="dark"] .feature-card__text { color: var(--text-muted); } /* Section backgrounds */ html.dark .preview-strip-section--alt, html.dark .why-choose-section, html.dark .air-ticket-section, html[data-theme="dark"] .preview-strip-section--alt, html[data-theme="dark"] .why-choose-section, html[data-theme="dark"] .air-ticket-section { background-color: var(--bg-soft); } html.dark .preview-strip-section, html[data-theme="dark"] .preview-strip-section { background-color: var(--bg); } /* Inputs */ html.dark input[type="text"], html.dark input[type="email"], html.dark input[type="tel"], html.dark input[type="number"], html.dark input[type="date"], html.dark input[type="search"], html.dark select, html.dark textarea, html[data-theme="dark"] input[type="text"], html[data-theme="dark"] input[type="email"], html[data-theme="dark"] input[type="tel"], html[data-theme="dark"] input[type="number"], html[data-theme="dark"] input[type="date"], html[data-theme="dark"] input[type="search"], html[data-theme="dark"] select, html[data-theme="dark"] textarea { background-color: #0F141C; border-color: var(--border); color: var(--text); } html.dark input::placeholder, html.dark textarea::placeholder, html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: #6B7280; } html.dark input:focus, html.dark select:focus, html.dark textarea:focus, html[data-theme="dark"] input:focus, html[data-theme="dark"] select:focus, html[data-theme="dark"] textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(74, 124, 199, .22); } /* Code blocks */ html.dark pre, html.dark code, html[data-theme="dark"] pre, html[data-theme="dark"] code { background-color: #0F141C; color: #E5E7EB; border-color: var(--border); } /* Footer */ html.dark .site-footer, html.dark footer.footer, html[data-theme="dark"] .site-footer, html[data-theme="dark"] footer.footer { background-color: var(--footer-bg); color: #D1D5DB; } /* Image dimming for harshness reduction */ html.dark img:not([src*=".svg"]):not(.no-dim), html[data-theme="dark"] img:not([src*=".svg"]):not(.no-dim) { filter: brightness(0.92) contrast(1.02); } /* --------------------------------------------------------- * Theme Toggle Button * --------------------------------------------------------- */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; margin: 0 .5rem; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 999px; color: var(--text); cursor: pointer; position: relative; overflow: hidden; transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease; -webkit-tap-highlight-color: transparent; } .theme-toggle:hover { background: var(--bg); border-color: var(--accent); box-shadow: 0 6px 18px -8px rgba(10, 37, 64, .35); transform: translateY(-1px); } .theme-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .theme-toggle svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; position: absolute; transition: transform .5s cubic-bezier(.16, 1, .3, 1), opacity .35s ease; } .theme-toggle .icon-sun { opacity: 0; transform: rotate(-90deg) scale(0.6); color: var(--accent); } .theme-toggle .icon-moon { opacity: 1; transform: rotate(0deg) scale(1); color: var(--primary); } /* When dark mode is active, swap icons */ html.dark .theme-toggle .icon-sun, html[data-theme="dark"] .theme-toggle .icon-sun { opacity: 1; transform: rotate(0deg) scale(1); } html.dark .theme-toggle .icon-moon, html[data-theme="dark"] .theme-toggle .icon-moon { opacity: 0; transform: rotate(90deg) scale(0.6); } .theme-toggle.is-animating { animation: themeTogglePulse .5s ease; } @keyframes themeTogglePulse { 0% { transform: scale(1) rotate(0); } 50% { transform: scale(.85) rotate(180deg); } 100% { transform: scale(1) rotate(360deg); } } /* Screen reader only text inside toggle */ .theme-toggle .sr-only, .theme-toggle .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Honor reduced motion */ @media (prefers-reduced-motion: reduce) { html, body, .theme-toggle, .theme-toggle svg { transition: none !important; animation: none !important; } } /* --------------------------------------------------------- * Front-page Hero — dark mode background * * `--primary` is redefined to a brighter blue (#4A7CC7) in dark mode * for readability of small accents; using it directly as the hero * background made the hero look washed-out / un-attractive. Override * with a deep navy/charcoal gradient + warm gold radial accents that * matches the rest of the dark UI. * --------------------------------------------------------- */ html.dark .hero, html[data-theme="dark"] .hero { background: radial-gradient(900px 480px at 12% 0%, rgba(212, 162, 76, 0.14), transparent 60%), radial-gradient(700px 480px at 92% 100%, rgba(212, 162, 76, 0.08), transparent 60%), linear-gradient(135deg, #0A1322 0%, #050B17 60%, #0A1322 100%); } html.dark .hero::before, html[data-theme="dark"] .hero::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255, 255, 255, 0.04) 1px, transparent 1px); background-size: 24px 24px; opacity: 0.6; z-index: 0; pointer-events: none; } html.dark .hero-pattern, html[data-theme="dark"] .hero-pattern { opacity: 0.08; background-image: radial-gradient(rgba(212, 162, 76, 0.40) 1px, transparent 1px); } html.dark .hero__headline, html[data-theme="dark"] .hero__headline { color: #F1F4F8; } html.dark .hero__headline em, html[data-theme="dark"] .hero__headline em { color: var(--accent-light, #F0D292); } html.dark .hero__subheadline, html[data-theme="dark"] .hero__subheadline { color: rgba(255, 255, 255, 0.80); } html.dark .hero__stat-sep, html[data-theme="dark"] .hero__stat-sep { background: rgba(212, 162, 76, 0.30); } html.dark .hero__stat strong, html[data-theme="dark"] .hero__stat strong { color: var(--accent-light, #F0D292); }