/* ═══════════════════════════════════════════════════════════════ White Mode Theme — Traveler Mode Activated by adding .white-mode to Accent: Traveler Green #7bcb8a → darker #5A9A68 in white mode Scope: Globe (map) + Sidebar + Hover Card + Nav + Travel Panel NOTE: Does NOT affect traveler-detail page ═══════════════════════════════════════════════════════════════ */ /* ── Body & Global ── */ html.white-mode body { background: #FFFFFF !important; color: #1a1a1a !important; } html.white-mode body::before { display: none !important; } /* ── Scrollbar — hidden in white mode ── */ html.white-mode ::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; } html.white-mode * { scrollbar-width: none !important; } /* ── Navbar ── */ html.white-mode #main-nav { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } html.white-mode #main-nav .text-white, html.white-mode #main-nav h1 { color: #333 !important; } html.white-mode #main-nav svg { stroke: #333 !important; } html.white-mode .leaflet-control-zoom { display: none !important; } html.white-mode #globeViz { filter: brightness(1.08) saturate(1.15); } /* ── Mode Badge ── */ html.white-mode #current-mode-badge { background: rgba(255, 255, 255, 0.9) !important; border-color: rgba(0, 0, 0, 0.1) !important; color: #333 !important; } html.white-mode #current-mode-badge:hover { border-color: rgba(0, 0, 0, 0.25) !important; color: #000 !important; } /* ── Mode Dropdown ── */ html.white-mode .mode-dropdown { background: rgba(255, 255, 255, 0.95) !important; border-color: rgba(0, 0, 0, 0.1) !important; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1) !important; } html.white-mode .mode-dropdown-item { color: #555 !important; } html.white-mode .mode-dropdown-item:hover { background: rgba(0, 0, 0, 0.04) !important; color: #000 !important; } /* ── Sidebar Menu ── */ html.white-mode #sidebar-menu { background: rgba(255, 255, 255, 0.98) !important; border-right-color: rgba(0, 0, 0, 0.08) !important; } html.white-mode #sidebar-menu h2 { color: #5A9A68 !important; } html.white-mode #sidebar-subtitle { color: #999 !important; } html.white-mode #sidebar-close-btn { color: #999 !important; } html.white-mode #sidebar-close-btn:hover { color: #333 !important; } html.white-mode #sidebar-menu .border-b { border-bottom-color: rgba(0, 0, 0, 0.06) !important; } /* Sidebar sections (country list, favorites, etc.) */ html.white-mode #sidebar-sections { color: #333 !important; } html.white-mode #sidebar-sections .text-white, html.white-mode #sidebar-sections .text-white\/90 { color: #333 !important; } html.white-mode #sidebar-sections .text-white\/60, html.white-mode #sidebar-sections .text-white\/50, html.white-mode #sidebar-sections .text-white\/45, html.white-mode #sidebar-sections .text-gray-500 { color: #999 !important; } html.white-mode #sidebar-sections .text-mode-traveler { color: #5A9A68 !important; } html.white-mode #sidebar-sections .border-white\/10, html.white-mode #sidebar-sections .border-white\/8 { border-color: rgba(0, 0, 0, 0.06) !important; } html.white-mode #sidebar-sections .bg-black\/30, html.white-mode #sidebar-sections .bg-white\/5 { background: rgba(0, 0, 0, 0.03) !important; } html.white-mode #sidebar-sections button:hover { background: rgba(90, 154, 104, 0.06) !important; } /* Sidebar feature items (e.g. Travel Planner) */ html.white-mode .sidebar-feature-item div[style*="color:#e8e6e3"], html.white-mode .sidebar-feature-item div[style*="color: #e8e6e3"] { color: #333 !important; } html.white-mode .sidebar-feature-item div[style*="rgba(255,255,255"] { color: #999 !important; } html.white-mode .sidebar-feature-item svg { stroke: rgba(0, 0, 0, 0.25) !important; } html.white-mode .sidebar-feature-item { border-bottom-color: rgba(0, 0, 0, 0.06) !important; } /* Sidebar overlay */ html.white-mode #sidebar-overlay.show { background: rgba(0, 0, 0, 0.2) !important; } /* ── rr-glass override ── */ html.white-mode .rr-glass { background: rgba(245, 245, 245, 0.85) !important; border-color: rgba(0, 0, 0, 0.06) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important; } /* ── Hover Card ── */ html.white-mode #hover-card { background: rgba(255, 255, 255, 0.97) !important; border-color: rgba(0, 0, 0, 0.1) !important; box-shadow: 0 28px 85px rgba(0, 0, 0, 0.12) !important; color: #1a1a1a !important; } html.white-mode #hover-card.pinned { border-color: rgba(90, 154, 104, 0.5) !important; box-shadow: 0 28px 90px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(90, 154, 104, 0.15) !important; } html.white-mode .hc-name { color: #1a1a1a !important; } html.white-mode .hc-native { color: #767676 !important; } html.white-mode .hc-flavor { color: #555 !important; } html.white-mode .hc-div { background: rgba(0, 0, 0, 0.06) !important; } html.white-mode .hc-stat-label { color: #999 !important; } html.white-mode .hc-stat-value { color: #333 !important; } html.white-mode .hc-stat-value.hot { color: #5A9A68 !important; } html.white-mode .hc-hint { color: #999 !important; } html.white-mode .hc-greeting { background: rgba(90, 154, 104, 0.06) !important; border-color: rgba(90, 154, 104, 0.15) !important; } html.white-mode .hc-greeting .local { color: #333 !important; } html.white-mode .hc-greeting .trans { color: #999 !important; } html.white-mode .hc-dots span { background: rgba(0, 0, 0, 0.15) !important; } html.white-mode .hc-dots span.active { background: #5A9A68 !important; } /* Travel alerts in hover card */ html.white-mode #travel-alerts { color: #333 !important; } /* ── Travel Panel ── */ html.white-mode #travel-panel { background: rgba(255, 255, 255, 0.98) !important; border-color: rgba(0, 0, 0, 0.08) !important; } html.white-mode #travel-panel .border-b, html.white-mode #travel-panel .border-t { border-color: rgba(0, 0, 0, 0.06) !important; } html.white-mode #travel-panel .text-white\/45, html.white-mode #travel-panel .text-white\/50 { color: #999 !important; } html.white-mode #travel-panel .text-white, html.white-mode #travel-panel .text-white\/60 { color: #333 !important; } html.white-mode #travel-panel .text-white\/30 { color: #bbb !important; } html.white-mode #travel-panel h2 { color: #5A9A68 !important; } html.white-mode #travel-panel .text-mode-traveler { color: #5A9A68 !important; } html.white-mode #travel-panel input { background: rgba(0, 0, 0, 0.03) !important; border-color: rgba(0, 0, 0, 0.1) !important; color: #333 !important; } html.white-mode #travel-panel input::placeholder { color: #999 !important; } html.white-mode #travel-panel input:focus { border-color: rgba(90, 154, 104, 0.5) !important; } /* Travel type toggle buttons */ html.white-mode .travel-type-btn { border-color: rgba(0, 0, 0, 0.08) !important; color: #767676 !important; background: rgba(0, 0, 0, 0.02) !important; } html.white-mode .travel-type-btn svg { stroke: #767676 !important; } html.white-mode .travel-type-btn.active { border-color: rgba(90, 154, 104, 0.4) !important; color: #5A9A68 !important; background: rgba(90, 154, 104, 0.06) !important; } html.white-mode .travel-type-btn.active svg { stroke: #5A9A68 !important; } /* Route info badges */ html.white-mode #travel-panel .bg-mode-traveler\/20 { background: rgba(90, 154, 104, 0.12) !important; } /* Suggestion dropdowns */ html.white-mode #domestic-suggestions, html.white-mode #departure-suggestions, html.white-mode #destination-suggestions { background: rgba(255, 255, 255, 0.98) !important; border-color: rgba(0, 0, 0, 0.1) !important; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1) !important; } html.white-mode #domestic-suggestions button, html.white-mode #departure-suggestions button, html.white-mode #destination-suggestions button { color: #333 !important; } html.white-mode #domestic-suggestions button:hover, html.white-mode #departure-suggestions button:hover, html.white-mode #destination-suggestions button:hover { background: rgba(90, 154, 104, 0.08) !important; } /* Travel overlay */ html.white-mode #travel-overlay.show { background: rgba(0, 0, 0, 0.2) !important; } /* Travel panel close button */ html.white-mode #travel-panel-close { color: #999 !important; } html.white-mode #travel-panel-close:hover { color: #333 !important; } /* Continent grid in travel panel */ html.white-mode #continent-grid { border-top-color: rgba(0, 0, 0, 0.06) !important; } html.white-mode #continent-grid .text-white\/45 { color: #999 !important; } html.white-mode #continent-grid .text-white\/30 { color: #bbb !important; } /* ── Nav buttons ── */ html.white-mode #btn-travel { border-color: rgba(90, 154, 104, 0.4) !important; background: rgba(90, 154, 104, 0.08) !important; color: #5A9A68 !important; } html.white-mode #btn-travel:hover { background: rgba(90, 154, 104, 0.15) !important; } html.white-mode #btn-travel svg { stroke: #5A9A68 !important; } /* ── Search Bar ── */ html.white-mode #search-input { color: #1a1a1a !important; } html.white-mode #search-input::placeholder { color: #999 !important; } html.white-mode #search-suggest { background: rgba(255, 255, 255, 0.95) !important; border-color: rgba(0, 0, 0, 0.08) !important; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1) !important; } html.white-mode #search-suggest .border-b { border-bottom-color: rgba(0, 0, 0, 0.06) !important; } /* ── Empty State ── */ html.white-mode #empty-state .text-white { color: #333 !important; } html.white-mode #empty-state .text-white\/60 { color: #999 !important; } html.white-mode #empty-state .text-white\/45 { color: #bbb !important; } /* ── Toast ── */ html.white-mode #toast { background: rgba(255, 255, 255, 0.9) !important; border-color: rgba(0, 0, 0, 0.1) !important; color: #333 !important; } /* ── Country labels on map ── */ html.white-mode .beta-country-label span { color: #333 !important; text-shadow: 0 1px 3px rgba(255, 255, 255, 0.8) !important; } /* ═══════════════════════════════════════════════════════════════ White Mode Toggle Button — Traveler Mode Positioned to the left of "여행가기" button in the nav ═══════════════════════════════════════════════════════════════ */ #trv-white-mode-toggle { position: relative; z-index: 121; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(0, 0, 0, 0.4); color: #ccc; cursor: pointer; transition: all 0.3s ease; backdrop-filter: blur(8px); font-size: 16px; line-height: 1; } #trv-white-mode-toggle:hover { border-color: rgba(255, 255, 255, 0.3); color: #fff; transform: scale(1.05); } html.white-mode #trv-white-mode-toggle { border-color: rgba(0, 0, 0, 0.12) !important; background: rgba(255, 255, 255, 0.8) !important; color: #333 !important; } html.white-mode #trv-white-mode-toggle:hover { border-color: rgba(0, 0, 0, 0.25) !important; color: #000 !important; } /* ── Language Toggle Button — Traveler Mode ── */ #trv-lang-toggle { position: relative; z-index: 121; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(0, 0, 0, 0.4); color: #ccc; cursor: pointer; transition: all 0.3s ease; backdrop-filter: blur(8px); font-size: 11px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; font-family: 'Manrope', sans-serif; } #trv-lang-toggle:hover { border-color: rgba(255, 255, 255, 0.3); color: #fff; transform: scale(1.05); } html.white-mode #trv-lang-toggle { border-color: rgba(0, 0, 0, 0.12) !important; background: rgba(255, 255, 255, 0.8) !important; color: #333 !important; } html.white-mode #trv-lang-toggle:hover { border-color: rgba(0, 0, 0, 0.25) !important; color: #000 !important; } /* ── Google Flights link in travel panel ── */ html.white-mode #google-flights-link { background: rgba(66, 133, 244, 0.08) !important; border-color: rgba(66, 133, 244, 0.2) !important; color: #4285f4 !important; }