/* Evan's Food Guide — shared UX enhancements (added 2026-07-27, overnight). Dark mode, skeleton loading states, micro-interactions, a glass sticky filter bar, scroll-reveal, and native cross-document view transitions. Loaded by index.html, spot.php, and category.php — safe to no-op on any page that doesn't use a given class. Respects prefers-reduced-motion. */ /* ---------- Native View Transitions (cross-document / MPA) ---------- Smooths navigation between the homepage and /spot/{slug} & /best/{slug}. Browsers that don't support this at-rule simply ignore it — plain, instant navigation, exactly like before. No JS required. */ @view-transition { navigation: auto; } @media (prefers-reduced-motion: reduce) { *{ animation: none !important; transition: none !important; } } /* ---------- Dark mode ---------- Toggled by adding data-theme="dark" to (see the small blocking script in each page's — reads localStorage "efg_theme", falls back to the OS/browser preference). Variable-based rules pick this up automatically; a handful of components use hardcoded colors in the page-specific stylesheets, so those get explicit dark overrides below. */ :root[data-theme="dark"]{ --red:#ff6b6b; --red-dark:#ff8f8f; --red-tint:#3a2020; --text:#eee; --muted:#aaa; --muted-2:#888; --line:#333; --line-2:#3d3d3d; --bg:#161616; --bg-2:#1f1f1f; --link:#7ab8ff; --star:#ff6b6b; } :root[data-theme="dark"] body{background:var(--bg);color:var(--text)} :root[data-theme="dark"] .controls, :root[data-theme="dark"] .search, :root[data-theme="dark"] .jump a, :root[data-theme="dark"] .distbar, :root[data-theme="dark"] .distbtn, :root[data-theme="dark"] #addrInput, :root[data-theme="dark"] #radiusSel, :root[data-theme="dark"] .filterbar, :root[data-theme="dark"] .fbtn, :root[data-theme="dark"] .fsel, :root[data-theme="dark"] .vchip, :root[data-theme="dark"] .chip:not(.colored), :root[data-theme="dark"] .modal, :root[data-theme="dark"] .mbtns .cancel, :root[data-theme="dark"] .subcard, :root[data-theme="dark"] footer .catlinks a, :root[data-theme="dark"] .catgrid a, :root[data-theme="dark"] .efg-related-card{ background:#212121; color:var(--text); border-color:var(--line-2); } :root[data-theme="dark"] .modal input[type=text], :root[data-theme="dark"] .modal input[type=email], :root[data-theme="dark"] .modal textarea{background:#181818;color:var(--text);border-color:var(--line-2)} :root[data-theme="dark"] .thumb, :root[data-theme="dark"] #map, :root[data-theme="dark"] .mapnote, :root[data-theme="dark"] .hero{background:#262626} :root[data-theme="dark"] .toast{background:#000} :root[data-theme="dark"] .openbadge,:root[data-theme="dark"] .open{background:#12301d;border-color:#1c4a2c;color:#7bd99a} :root[data-theme="dark"] .openbadge.closed,:root[data-theme="dark"] .open.closed{background:#3a1414;border-color:#5a1f1f;color:#e78888} :root[data-theme="dark"] .vibe{background:#12301d;border-color:#1c4a2c;color:#7bd99a} :root[data-theme="dark"] .intro, :root[data-theme="dark"] .mapwrap, :root[data-theme="dark"] .distbar, :root[data-theme="dark"] .substrip, :root[data-theme="dark"] footer{background:var(--bg-2)} :root[data-theme="dark"] .badge.hon{background:#444;color:#ddd} :root[data-theme="dark"] .featured-card{background:linear-gradient(180deg,#2a2018,#161616);border-color:#4a3a26} :root[data-theme="dark"] .subscribe{background:linear-gradient(135deg,#241616,#161616)} /* ---------- Theme toggle button (shared across all 3 pages) ---------- */ .efg-theme-btn{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:#fff; background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.55);border-radius:20px;padding:6px 13px; cursor:pointer;font-family:inherit;transition:background .12s;white-space:nowrap} .efg-theme-btn:hover,.efg-theme-btn:focus{background:rgba(0,0,0,.34);outline:none} .efg-top-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end} /* ---------- Skeleton loading state (index.html, while the JSON feed loads) ---------- */ @keyframes efg-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}} .efg-skeleton{background:linear-gradient(90deg,var(--line) 25%,var(--bg-2) 37%,var(--line) 63%); background-size:400% 100%;animation:efg-shimmer 1.6s ease-in-out infinite;border-radius:6px} .efg-skel-card{display:flex;gap:14px;padding:18px 4px;border-bottom:1px solid var(--line)} .efg-skel-thumb{width:96px;height:96px;border-radius:8px;flex:none} .efg-skel-lines{flex:1;padding-top:4px} .efg-skel-line{height:13px;margin:10px 0} @media(max-width:560px){.efg-skel-thumb{width:68px;height:68px}} #map.efg-map-loading{background:linear-gradient(90deg,#e2e2e2 25%,#efefef 37%,#e2e2e2 63%); background-size:400% 100%;animation:efg-shimmer 1.8s ease-in-out infinite} :root[data-theme="dark"] #map.efg-map-loading{background:linear-gradient(90deg,#222 25%,#2c2c2c 37%,#222 63%);background-size:400% 100%} /* ---------- Micro-interactions ---------- */ @keyframes efg-pop{0%{transform:scale(1)}35%{transform:scale(1.4)}60%{transform:scale(.9)}100%{transform:scale(1)}} .efg-pop{animation:efg-pop .4s ease} @keyframes efg-spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}} .efg-spin{display:inline-block;animation:efg-spin .5s ease} @keyframes efg-toast-pop{0%{transform:translateX(-50%) translateY(20px) scale(.92);opacity:0} 60%{transform:translateX(-50%) translateY(-3px) scale(1.02);opacity:1} 100%{transform:translateX(-50%) translateY(0) scale(1);opacity:1}} .toast.show{animation:efg-toast-pop .32s ease} .card{transition:background-color .15s} .card:hover{background-color:var(--bg-2)} .fbtn,.distbtn,.chip,.btn,.efg-theme-btn,.vchip{transition:transform .12s,background-color .12s,border-color .12s,color .12s,filter .12s} .btn:hover:not([disabled]),.distbtn:hover{transform:translateY(-1px)} /* ---------- Glass sticky filter bar ---------- */ .controls.efg-glass{background:rgba(255,255,255,.72);backdrop-filter:blur(10px) saturate(160%);-webkit-backdrop-filter:blur(10px) saturate(160%)} :root[data-theme="dark"] .controls.efg-glass{background:rgba(22,22,22,.72)} /* ---------- Scroll reveal ---------- */ .efg-reveal{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease} .efg-reveal.efg-visible{opacity:1;transform:translateY(0)} /* ---------- "You might also like" module (spot.php) ---------- */ .efg-related{margin-top:30px;padding-top:20px;border-top:1px solid var(--line)} .efg-related h2{font-size:17px;margin:0 0 12px} .efg-related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px} .efg-related-card{display:block;text-decoration:none;color:var(--text);background:#fff;border:1px solid var(--line); border-radius:10px;overflow:hidden;transition:box-shadow .12s,transform .12s} .efg-related-card:hover{box-shadow:0 4px 14px rgba(0,0,0,.1);transform:translateY(-2px)} .efg-related-card img,.efg-related-noimg{width:100%;height:90px;object-fit:cover;background:#eee;display:block} :root[data-theme="dark"] .efg-related-card img,:root[data-theme="dark"] .efg-related-noimg{background:#262626} .efg-related-noimg{background:linear-gradient(135deg,var(--red-tint,#fff4f4),var(--bg-2))} .efg-related-name{font-size:13px;font-weight:700;padding:8px 10px 2px;line-height:1.3} .efg-related-rating{font-size:12px;color:#f5b400;font-weight:700;padding:0 10px 9px}