/* ── Light mode ───────────────────────────────────────────────────────── Applied when . Toggle lives in the nav. Dark remains the default everywhere. */ html[data-theme="light"]{ --ink:#faf8f3; --ink-2:#ffffff; --ink-3:#f1ede4; --paper:#17181a; --paper-dim:#3c3f43; --brass:#8a6529; --gold-light:#6f5220; --gold-dark:#8a7a5e; --line:rgba(20,20,20,0.13); --text-dim:rgba(20,20,20,0.58); } html[data-theme="light"] body{background:var(--ink); color:var(--paper);} html[data-theme="light"] .grain{ background-image:radial-gradient(circle,#000 1px,transparent 1px); opacity:.035; } html[data-theme="light"] .glass{ background:rgba(255,255,255,0.82); border:1px solid rgba(20,20,20,0.10); box-shadow:0 2px 14px rgba(20,20,20,0.05); } /* cards & surfaces */ html[data-theme="light"] .rev-card, html[data-theme="light"] .act, html[data-theme="light"] .trend-card, html[data-theme="light"] .acct-card, html[data-theme="light"] .post.glass{ background:#fff; border:1px solid rgba(20,20,20,0.10); } html[data-theme="light"] .gal-card, html[data-theme="light"] .vid-card, html[data-theme="light"] .home-gal-card{border-color:rgba(20,20,20,0.12);} /* form fields */ html[data-theme="light"] #authForm input:not([type="checkbox"]), html[data-theme="light"] .rev-form textarea, html[data-theme="light"] .rev-recin, html[data-theme="light"] .comp-select, html[data-theme="light"] .comp-text, html[data-theme="light"] .acct-input, html[data-theme="light"] .subscribe-form input, html[data-theme="light"] .search-input{ background:#fff; border:1px solid rgba(20,20,20,0.18); color:var(--paper); } html[data-theme="light"] .auth-modal{background:rgba(255,255,255,0.97); border-color:rgba(20,20,20,0.12);} html[data-theme="light"] .auth-brand span{color:var(--paper);} html[data-theme="light"] .avatar-menu{background:#fff; border-color:rgba(20,20,20,0.12);} html[data-theme="light"] .avatar-menu a, html[data-theme="light"] .avatar-menu #signOutBtn{color:var(--paper);} html[data-theme="light"] .avatar-btn{background:#efeae0;} /* map + hero keep their dark artwork; overlay softened */ /* hero keeps its dark cinematic gradient in both themes */ html[data-theme="light"] .home-hero-overlay{ background:linear-gradient(180deg, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.25) 32%, rgba(0,0,0,0.38) 60%, rgba(0,0,0,0.88) 100%); } /* ── Hero type adapts to what's behind it ──────────────────────────── While the cover photo is visible the type is light (dark gradient behind it). Once the photo fades away for the map, .photo-gone is added and the type switches to the page's own colours. */ html[data-theme="light"] .home-hero .hero h1{color:#fff; text-shadow:0 2px 20px rgba(0,0,0,.5);} html[data-theme="light"] .home-hero .hero h1 em{color:#f0e6d2;} html[data-theme="light"] .home-hero .hero p{color:rgba(255,255,255,.92); text-shadow:0 1px 12px rgba(0,0,0,.45);} html[data-theme="light"] .home-hero .hero-coords, html[data-theme="light"] .home-hero .hero-desc{color:rgba(255,255,255,.85);} html[data-theme="light"] .home-hero .hero-line-left{background:linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 42%, rgba(255,255,255,0.45) 100%);} html[data-theme="light"] .home-hero .hero-line-right{background:linear-gradient(to left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 42%, rgba(255,255,255,0.45) 100%);} html[data-theme="light"] .home-hero .nav-tag{color:rgba(255,255,255,.8);} html[data-theme="light"] .home-hero .wordmark{color:#fff; text-shadow:0 1px 10px rgba(0,0,0,.4);} html[data-theme="light"] .home-hero .wordmark span{color:#e9d3a8;} html[data-theme="light"] .home-hero .nav-btn.ghost{color:#fff; border-color:rgba(255,255,255,.55);} html[data-theme="light"] .home-hero .theme-btn, html[data-theme="light"] .home-hero .search-btn{color:#fff; border-color:rgba(255,255,255,.5);} /* photo has faded — switch everything back to readable dark-on-cream */ html[data-theme="light"] .home-hero.photo-gone .hero h1{color:#17181a; text-shadow:none;} html[data-theme="light"] .home-hero.photo-gone .hero h1 em{color:#8a6529;} html[data-theme="light"] .home-hero.photo-gone .hero p{color:#3c3f43; text-shadow:none;} html[data-theme="light"] .home-hero.photo-gone .hero-coords, html[data-theme="light"] .home-hero.photo-gone .hero-desc{color:rgba(20,20,20,.55);} html[data-theme="light"] .home-hero.photo-gone .hero-line-left{background:linear-gradient(to right, rgba(20,20,20,0) 0%, rgba(20,20,20,0.16) 42%, rgba(20,20,20,0.2) 100%);} html[data-theme="light"] .home-hero.photo-gone .hero-line-right{background:linear-gradient(to left, rgba(20,20,20,0) 0%, rgba(20,20,20,0.16) 42%, rgba(20,20,20,0.2) 100%);} html[data-theme="light"] .home-hero.photo-gone .nav-tag{color:rgba(20,20,20,.55);} html[data-theme="light"] .home-hero.photo-gone .wordmark{color:#17181a; text-shadow:none;} html[data-theme="light"] .home-hero.photo-gone .wordmark span{color:#8a6529;} html[data-theme="light"] .home-hero.photo-gone .nav-btn.ghost{color:#8a6529; border-color:rgba(138,101,41,.45);} html[data-theme="light"] .home-hero.photo-gone .theme-btn, html[data-theme="light"] .home-hero.photo-gone .search-btn{color:#8a6529; border-color:rgba(138,101,41,.4);} html[data-theme="light"] .home-hero.photo-gone .explore-btn{color:#3a2c10;} /* dark mode: once the photo is gone the logo mark sits on black — keep it legible */ html[data-theme="dark"] .home-hero.photo-gone .wordmark{text-shadow:none;} /* Side panel & drawer keep a light sheet in both themes. Re-scoping the variables here fixes every child element at once (chips, labels, activity text, buttons) instead of one-by-one. */ html[data-theme="light"] .panel, html[data-theme="light"] .drawer{ --ink:#17181a; --ink-2:#ffffff; --ink-3:#f1ede4; --paper:#ffffff; --paper-dim:#3c3f43; --line:rgba(20,20,20,0.13); --text-dim:rgba(20,20,20,0.58); background:#fff; color:#17181a; } html[data-theme="light"] .panel .panel-section-label, html[data-theme="light"] .panel .avail-label, html[data-theme="light"] .panel .reviews-head h3, html[data-theme="light"] .panel h2{color:#17181a;} html[data-theme="light"] .panel .place-guide-link{color:#8a6529;} html[data-theme="light"] .drawer h3, html[data-theme="light"] .drawer .drawer-group h4{color:#17181a;} /* chips & buttons */ html[data-theme="light"] .chip, html[data-theme="light"] .bf-chip{ border-color:rgba(20,20,20,0.18); color:var(--text-dim); } html[data-theme="light"] .chip.on, html[data-theme="light"] .bf-chip.on{ background:var(--brass); color:#fff; border-color:var(--brass); } html[data-theme="light"] .nav-btn.ghost{color:var(--brass); border-color:rgba(138,101,41,.45);} html[data-theme="light"] .nav-btn.solid{background:var(--brass); color:#fff; border-color:var(--brass);} html[data-theme="light"] .rev-add-btn, html[data-theme="light"] .acct-btn, html[data-theme="light"] .rev-submit, html[data-theme="light"] .drawer-dl, html[data-theme="light"] .itinerary-btn{background:var(--brass); color:#fff;} html[data-theme="light"] .explore-btn{background:rgba(255,255,255,.55); color:#3a2c10; border-color:rgba(138,101,41,.5);} html[data-theme="light"] .to-top{color:var(--brass);} /* map: give countries real contrast on a light page */ html[data-theme="light"] .country{fill:#ded6c6; stroke:rgba(20,20,20,0.34);} html[data-theme="light"] .country:hover{fill:#cfc4ad; stroke:rgba(20,20,20,0.55);} html[data-theme="light"] .country.continent-active{fill:rgba(138,101,41,0.28); stroke:rgba(138,101,41,0.55);} html[data-theme="light"] .country.active{fill:var(--brass); stroke:#5c431b;} html[data-theme="light"] .country-marker{stroke:#fff;} html[data-theme="light"] .continent-label, html[data-theme="light"] .country-label, html[data-theme="light"] .marker-label{fill:rgba(20,20,20,0.7);} html[data-theme="light"] .map-controls.glass{background:rgba(255,255,255,0.9);} html[data-theme="light"] .zoom-btn.glass{background:rgba(255,255,255,0.9); color:#17181a;} /* ── Theme toggle button (both modes) ─────────────────────────────── */ .theme-btn{ width:34px; height:34px; border-radius:50%; cursor:pointer; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; padding:0; background:transparent; border:1px solid rgba(201,168,118,0.45); color:var(--gold-light); transition:all .2s; } .theme-btn:hover{border-color:var(--brass); color:var(--brass);} .theme-btn svg{width:16px; height:16px; display:block;} html[data-theme="light"] .theme-btn{border-color:rgba(138,101,41,.4); color:var(--brass);} /* ── Site search ──────────────────────────────────────────────────── */ .search-btn{ width:34px; height:34px; border-radius:50%; cursor:pointer; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; padding:0; background:transparent; border:1px solid rgba(201,168,118,0.45); color:var(--gold-light); transition:all .2s; } .search-btn:hover{border-color:var(--brass); color:var(--brass);} .search-btn svg{width:15px; height:15px; display:block;} html[data-theme="light"] .search-btn{border-color:rgba(138,101,41,.4); color:var(--brass);} .ss-scrim{ position:fixed; inset:0; z-index:90; background:rgba(0,0,0,.62); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); opacity:0; pointer-events:none; transition:opacity .25s; } .ss-scrim.show{opacity:1; pointer-events:auto;} html[data-theme="light"] .ss-scrim{background:rgba(250,248,243,.75);} .ss-panel{ position:fixed; top:8vh; left:50%; transform:translateX(-50%) translateY(-8px); width:min(680px, calc(100vw - 32px)); max-height:80vh; z-index:91; background:var(--ink-2); border:1px solid var(--line); border-radius:18px; box-shadow:0 24px 60px rgba(0,0,0,.5); overflow:hidden; opacity:0; pointer-events:none; transition:opacity .25s, transform .25s; display:flex; flex-direction:column; } .ss-panel.show{opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0);} html[data-theme="light"] .ss-panel{background:#fff; box-shadow:0 24px 60px rgba(20,20,20,.16);} .ss-input{ width:100%; border:none; border-bottom:1px solid var(--line); background:transparent; color:var(--paper); font-family:'Inter',sans-serif; font-size:17px; padding:20px 22px; } .ss-input:focus{outline:none;} .ss-input::placeholder{color:var(--text-dim);} .ss-results{overflow-y:auto; padding:8px;} .ss-group{font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--brass); padding:12px 14px 6px;} .ss-item{display:flex; gap:12px; align-items:center; padding:10px 14px; border-radius:11px; text-decoration:none; color:inherit; cursor:pointer;} .ss-item:hover, .ss-item.sel{background:rgba(201,168,118,.13);} .ss-item img{width:44px; height:44px; border-radius:8px; object-fit:cover; flex-shrink:0;} .ss-ico{width:44px; height:44px; border-radius:8px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:rgba(201,168,118,.14); color:var(--brass); font-size:16px;} .ss-txt{min-width:0; flex:1;} .ss-txt b{display:block; font-size:14.5px; font-weight:600; color:var(--paper); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .ss-txt span{display:block; font-size:12px; color:var(--text-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .ss-empty{padding:34px 20px; text-align:center; color:var(--text-dim); font-size:14px;} .ss-hint{padding:10px 16px; border-top:1px solid var(--line); font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--text-dim); display:flex; gap:16px; flex-wrap:wrap;} @media (max-width:640px){ .ss-panel{top:4vh; max-height:88vh;} .ss-hint{display:none;} } /* extra light-mode contrast fixes */ html[data-theme="light"] .trend-badge{background:rgba(138,101,41,.14); color:#6f5220;} html[data-theme="light"] .trend-link, html[data-theme="light"] .see-all{color:#8a6529;} html[data-theme="light"] .story-snip{color:#3c3f43;} html[data-theme="light"] .home-gal-cap{background:linear-gradient(transparent,rgba(0,0,0,0.75)); color:#fff;} html[data-theme="light"] .footer-col h4{color:#8a6529;} html[data-theme="light"] .newsletter-inner .accent{color:#8a6529;} html[data-theme="light"] .subscribe-form button{background:var(--brass); color:#fff;} html[data-theme="light"] .social-ic{background-color:#3c3f43;} html[data-theme="light"] .footer-col a:hover .social-ic{background-color:#8a6529;} html[data-theme="light"] .ss-item:hover, html[data-theme="light"] .ss-item.sel{background:rgba(138,101,41,.10);} html[data-theme="light"] .rev-report{color:rgba(20,20,20,.5);} html[data-theme="light"] .post-date{color:#8a6529;} html[data-theme="light"] .crumb a:hover{color:#8a6529;} html[data-theme="light"] .act .tag{color:#fff;} html[data-theme="light"] .legend-item{color:rgba(20,20,20,0.55);} /* map surround + search bar contrast in light mode */ html[data-theme="light"] .map-stage.flat-mode{background:rgba(255,255,255,0.55); border-radius:14px;} html[data-theme="light"] .search-input{background:#fff;} html[data-theme="light"] .search-results{background:#fff; border-color:rgba(20,20,20,.12);} html[data-theme="light"] .search-item{color:#17181a;} html[data-theme="light"] .search-item:hover{background:rgba(138,101,41,.10);} html[data-theme="light"] .trend-card h3{color:#17181a;} html[data-theme="light"] .trend-card p{color:#3c3f43;} /* email-confirmation banner in light mode */ html[data-theme="light"] #duVerify{ background:#fff !important; border-color:rgba(138,101,41,.4) !important; color:#3c3f43 !important; box-shadow:0 12px 30px rgba(20,20,20,.14) !important; } html[data-theme="light"] #duVerify #duResend{background:#8a6529 !important; color:#fff !important;} /* cookie notice in light mode */ html[data-theme="light"] #duCookieOk{background:#8a6529 !important; color:#fff !important;}