/* ========================================================================= SMG SHARED EDITORIAL KIT · /assets/smg.css One source of truth for the site-wide look: color/type tokens, the masthead nav (with the mobile-friendly Guides ▾ dropdown), section bars, and the dark footer. Extracted verbatim from the live homepage (index.html) so every page belongs to the same "print-zine" world. Change the shared look HERE once. Page-specific styles stay inline on each page. Fonts: Bebas Neue (heads/masthead), DM Sans (body), Space Mono (labels) — loaded per page via the Google Fonts in . ========================================================================= */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } :root { --ink:#141414; --cream:#f4f2ef; --paper:#fbfaf8; --teal:#597378; --coral:#EB8871; --mustard:#E6C27B; --deep-teal:#2a3d3f; --gray:#6b6b6b; --rule:#141414; } html { overflow-x: hidden; } body { font-family:'DM Sans',sans-serif; background:var(--cream); color:var(--ink); -webkit-font-smoothing:antialiased; } a { color:inherit; } img { max-width:100%; display:block; } .wrap { max-width:1040px; margin:0 auto; } /* ---------- NAV ---------- */ .nav{ border-bottom:3px solid var(--ink); background:var(--cream); position:sticky; top:0; z-index:200; } .nav-in{ max-width:1040px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:11px 16px; gap:10px; } .nav-mark{ font-family:'Bebas Neue',sans-serif; font-size:20px; letter-spacing:1.5px; text-decoration:none; color:var(--ink); white-space:nowrap; } .nav-mark b{ color:var(--teal); font-weight:400; } .nav-right{ display:flex; align-items:center; gap:6px; } .nav-link{ font-family:'Space Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:1px; text-decoration:none; color:var(--ink); padding:9px 11px; min-height:44px; display:flex; align-items:center; } .nav-link:hover{ color:var(--teal); } .nav-tip{ font-size:18px; text-decoration:none; line-height:1; padding:9px; min-width:44px; min-height:44px; display:flex; align-items:center; justify-content:center; } .nav-map-m{ display:none; font-size:18px; text-decoration:none; line-height:1; padding:9px; min-width:44px; min-height:44px; align-items:center; justify-content:center; } .nav-btn{ font-family:'Space Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:1px; text-decoration:none; padding:8px 12px; border:2px solid var(--ink); color:var(--ink); min-height:44px; display:inline-flex; align-items:center; } .nav-btn:hover{ background:var(--ink); color:var(--cream); } .nav-btn.solid{ background:var(--coral); border-color:var(--coral); color:#3a1a10; font-weight:700; } .nav-btn.solid:hover{ background:var(--ink); border-color:var(--ink); color:var(--cream); } @media(max-width:700px){ .hide-mobile{ display:none; } .nav-mark{ font-size:16px; letter-spacing:1px; } .nav-tip{ display:none; } .nav-map-m{ display:flex; } .nav-in{ padding:10px 12px; gap:8px; } .guides-trigger{ padding:8px 10px; } .nav-btn.solid{ padding:8px 11px; } } /* Guides dropdown (mobile-first primary nav) */ .guides-dd{ position:relative; } .guides-trigger{ font-family:'Space Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:1px; background:transparent; color:var(--ink); border:2px solid var(--ink); padding:8px 12px; cursor:pointer; display:flex; align-items:center; gap:6px; min-height:44px; } .guides-trigger:hover, .guides-dd.open .guides-trigger{ background:var(--ink); color:var(--cream); } .guides-panel{ position:absolute; top:calc(100% + 6px); left:0; width:300px; max-width:calc(100vw - 24px); background:var(--paper); border:3px solid var(--ink); box-shadow:6px 6px 0 rgba(20,20,20,.15); z-index:300; max-height:calc(100vh - 80px); overflow-y:auto; visibility:hidden; opacity:0; transform:scale(.97); transform-origin:top left; pointer-events:none; transition:opacity .18s var(--ease-smooth-out), transform .18s var(--ease-smooth-out), visibility .18s; } .guides-dd.open .guides-panel{ visibility:visible; opacity:1; transform:scale(1); pointer-events:auto; } @media(max-width:700px){ .guides-panel{ position:fixed; left:12px; right:12px; top:60px; width:auto; max-width:none; } } .gp-group-label{ font-family:'Space Mono',monospace; font-size:9px; letter-spacing:1.2px; text-transform:uppercase; background:var(--ink); color:var(--cream); padding:6px 14px; } .gp-item{ display:flex; align-items:center; gap:10px; padding:11px 14px; text-decoration:none; color:var(--ink); border-bottom:1px solid #e6e2dc; min-height:44px; } .gp-item:last-child{ border-bottom:none; } .gp-item:hover{ background:var(--cream); } .gp-item.active{ background:var(--mustard); } .gp-emoji{ font-size:16px; width:20px; text-align:center; } .gp-name{ font-family:'DM Sans',sans-serif; font-size:13px; font-weight:600; } .gp-item.gp-all{ justify-content:space-between; background:var(--teal); color:var(--cream); border-bottom:none; } .gp-item.gp-all:hover{ background:var(--deep-teal); } .gp-item.gp-all .gp-name{ font-family:'Space Mono',monospace; font-size:10px; letter-spacing:1px; text-transform:uppercase; font-weight:700; color:var(--cream); } .gp-item.gp-all .gp-arrow{ font-size:15px; color:var(--cream); } /* ---------- SECTION BAR ---------- */ .bar{ background:var(--ink); color:var(--cream); display:flex; align-items:center; justify-content:space-between; padding:9px 16px; gap:10px; flex-wrap:wrap; } .bar h2{ font-family:'Bebas Neue',sans-serif; font-size:24px; letter-spacing:1px; font-weight:400; } .bar .bar-meta{ font-family:'Space Mono',monospace; font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:rgba(255,255,255,.7); } /* ---------- FOOTER ---------- */ .footbar{ background:var(--ink); color:var(--cream); margin-top:46px; } .footbar-in{ max-width:1040px; margin:0 auto; padding:22px 16px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; font-family:'Space Mono',monospace; font-size:11px; letter-spacing:1.5px; text-transform:uppercase; } .footbar-in a{ color:rgba(255,255,255,.75); text-decoration:none; margin-left:14px; display:inline-block; min-height:44px; line-height:44px; } .footbar-in a:hover{ color:#fff; } .foot-issue{ font-family:'Bebas Neue',sans-serif; font-size:22px; letter-spacing:1px; } @media(max-width:600px){ .footbar-in{ flex-direction:column; align-items:flex-start; gap:6px; } .footbar-in a{ margin-left:0; margin-right:14px; line-height:1.4; min-height:0; padding:6px 0; } } /* ---------- MOTION / MICRO-INTERACTIONS ---------- */ :root{ --ease-smooth-out:cubic-bezier(0.22,1,0.36,1); } /* smooth existing hovers + press feedback */ .nav-btn, .nav-link, .guides-trigger, .gp-item, .map-strip, .fk-btn, .weekend-cta, .rfbtn{ transition:background .14s var(--ease-smooth-out), color .14s var(--ease-smooth-out), border-color .14s var(--ease-smooth-out), transform .12s var(--ease-smooth-out); } .nav-btn:active, .guides-trigger:active, .map-strip:active, .fk-btn:active, .weekend-cta:active, .rfbtn:active{ transform:scale(.97); } /* card lift — on-brand hard offset shadow */ @media (hover:hover) and (pointer:fine){ .card, .related-card{ transition:background .12s, transform .14s var(--ease-smooth-out), box-shadow .14s var(--ease-smooth-out) !important; } .card:hover, .related-card:hover{ transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--ink) !important; } } @media (prefers-reduced-motion: reduce){ .nav-btn,.nav-link,.guides-trigger,.gp-item,.map-strip,.fk-btn,.weekend-cta,.rfbtn,.guides-panel,.card,.related-card{ transition:none !important; } .nav-btn:active,.guides-trigger:active,.map-strip:active,.fk-btn:active,.weekend-cta:active,.rfbtn:active{ transform:none; } .guides-panel{ transform:none; } .card:hover,.related-card:hover{ transform:none; box-shadow:none !important; } } /* Leaflet pages: keep the Guides menu above map panes and controls without raising the shared nav over full-screen dialogs on non-map pages. */ body:has(.leaflet-container) .nav{ z-index:1200; } body:has(.leaflet-container) .guides-panel{ z-index:1300; } /* Saved Spots is available on guide pages, including mapped guides. Its backdrop and drawer must still dim and cover the raised map-page nav. */ body:has(.leaflet-container) .save-backdrop{ z-index:1400 !important; } body:has(.leaflet-container) .save-drawer{ z-index:1410 !important; } /* The costume board also contains a Leaflet view. Keep its claim dialog above the raised map-page nav if both are present. */ body:has(.leaflet-container) .modal-backdrop{ z-index:1400; }