/* ═══════════════════════════════════════════════════════════════════════ PREMIUM MOBILE SIDE NAV - v1 Source prototype: mobile-sidenav-premium-v1.html Built 2026-08-01. Prepared for Codex review + release. WHY A SEPARATE FILE: style.css must never be deployed (production holds a hand-appended "DOTCITY DESKTOP NAV GEOMETRY 2026-07-30" block that exists nowhere in source). This layer is enqueued AFTER style.css, so equal-specificity !important rules win on source order without editing style.css at all. OVERRIDES: the v13.2.0 (style.css ~L31065) and v13.2.6 (~L31116) mobile nav blocks. Selector shape is matched to those (html body .mcr-global- mob-panel ...) deliberately - do not reduce specificity. Applies at max-width:900px only, matching the blocks it overrides. ═══════════════════════════════════════════════════════════════════════ */ @media (max-width:900px){ :root{ /* Single source of truth. Panel width and page push must stay equal - production currently has panel 224px vs push 216px, an 8px mismatch that let a sliver of the panel sit under the pushed page. */ --mobnav-w:268px; } /* NOTE: the panel's position/top/bottom are deliberately NOT set here. position:fixed + bottom:0 come from header.php's inline block, and top:50px from style.css v13.2.0. Both are correct and load in an order that already resolves. Setting top here would hard-code a header height that differs between those two sources (50px vs 56px). */ /* ── PANEL SHELL ────────────────────────────────────────────────── */ html body .mcr-global-mob-panel{ width:var(--mobnav-w)!important; padding:0!important; display:flex!important; flex-direction:column!important; background:#000!important; border-right:1px solid rgba(255,255,255,.06)!important; overflow:hidden!important; } /* page + fixed mobile header push - both must equal panel width */ html body.nav-open #WRAP, html body.nav-open #MOB-HEADER{ transform:translateX(var(--mobnav-w))!important; transition:transform .55s cubic-bezier(.32,.72,.24,1)!important; } html body #WRAP, html body #MOB-HEADER{ transform:translateX(0)!important; transition:transform .55s cubic-bezier(.32,.72,.24,1)!important; } html body .mcr-global-mob-scrim{ left:var(--mobnav-w)!important; background:rgba(3,3,6,.55)!important; transition:opacity .5s cubic-bezier(.32,.72,.24,1)!important; } /* ── SEARCH (markup added in header.php) ────────────────────────── */ html body .mcr-global-mob-panel .mobnav-search{ flex-shrink:0;margin:12px 12px 2px;position:relative; } html body .mcr-global-mob-panel .mobnav-search input{ width:100%;height:40px;border-radius:12px; border:1px solid rgba(255,255,255,.07); background:rgba(255,255,255,.045); color:#fff;font-size:.78rem;font-family:inherit; padding:0 12px 0 34px;outline:none; transition:border-color .25s,background .25s,box-shadow .25s; -webkit-appearance:none;appearance:none; } html body .mcr-global-mob-panel .mobnav-search input::placeholder{ color:rgba(255,255,255,.42); } html body .mcr-global-mob-panel .mobnav-search input:focus{ border-color:rgba(245,200,107,.5); background:rgba(255,255,255,.07); box-shadow:0 0 0 3px rgba(245,200,107,.12); } html body .mcr-global-mob-panel .mobnav-search i{ position:absolute;left:12px;top:13px; font-size:.7rem;color:rgba(255,255,255,.42);pointer-events:none; } /* ── SCROLL REGION ──────────────────────────────────────────────── */ html body .mcr-global-mob-panel .mobnav-scroll{ flex:1;overflow-y:auto;overscroll-behavior:contain; padding:6px 10px 12px; scrollbar-width:none; -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14px,#000 calc(100% - 20px),transparent 100%); mask-image:linear-gradient(180deg,transparent 0,#000 14px,#000 calc(100% - 20px),transparent 100%); } html body .mcr-global-mob-panel .mobnav-scroll::-webkit-scrollbar{display:none} /* ── SECTION LABELS ─────────────────────────────────────────────── */ html body .mcr-global-mob-panel .sb-section{ padding:0!important;margin:0 0 2px!important; } html body .mcr-global-mob-panel .sb-label{ display:flex!important;align-items:center!important;gap:8px!important; font-size:.52rem!important;font-weight:800!important;letter-spacing:.3em!important; color:rgba(255,255,255,.42)!important; padding:0 10px 6px!important;margin:15px 0 0!important; } html body .mcr-global-mob-panel .sb-label::after{ content:'';flex:1;height:1px; background:linear-gradient(90deg,rgba(255,255,255,.07),transparent); } html body .mcr-global-mob-panel .sb-section:first-child .sb-label{margin-top:6px!important} /* ── NAV ITEMS - readable mobile text, icon only on selected page ── */ html body .mcr-global-mob-panel .sb-item{ --ac:#e8e8f2; display:flex!important;align-items:center!important;gap:11px!important; min-height:0!important; padding:8px 10px!important; border-radius:13px!important; font-size:.9rem!important;font-weight:600!important;letter-spacing:.012em!important; color:rgba(255,255,255,.72)!important; background:transparent!important; border:1px solid transparent!important; box-shadow:none!important;transform:none!important; transition:background .22s,border-color .22s,color .22s,transform .18s!important; } html body .mcr-global-mob-panel .sb-item:hover{ background:rgba(255,255,255,.045)!important; border-color:rgba(255,255,255,.07)!important; color:#fff!important; } html body .mcr-global-mob-panel .sb-item:active{transform:scale(.975)!important} /* unselected pages carry no icon (already true in v13.2.6 - asserted here so this file is self-contained if that block is ever removed) */ html body .mcr-global-mob-panel .sb-item:not(.on) .sb-ico-wrap{display:none!important} /* ── THE SELECTED PAGE ──────────────────────────────────────────── */ html body .mcr-global-mob-panel .sb-item.on{ min-height:0!important; padding:7px 10px!important; font-size:.96rem!important;font-weight:700!important; color:#fff!important; background:linear-gradient(135deg, color-mix(in srgb, var(--ac) 13%, transparent), rgba(255,255,255,.035))!important; border-color:color-mix(in srgb, var(--ac) 26%, transparent)!important; } html body .mcr-global-mob-panel .sb-item.on::before{ content:''!important;position:absolute!important; left:-10px!important;top:8px!important;bottom:8px!important; width:3px!important;border-radius:3px!important; background:var(--ac)!important; box-shadow:0 0 12px var(--ac)!important; } html body .mcr-global-mob-panel .sb-item.on .sb-ico-wrap{ display:inline-flex!important; width:28px!important;height:28px!important;min-width:28px!important; margin-right:0!important; border-radius:9px!important; opacity:1!important; /* inline style="background:...;color:..." on the element supplies the per-page gradient + glyph colour; these add the lift on top */ border:1px solid color-mix(in srgb, var(--ac) 24%, transparent)!important; box-shadow:0 0 18px color-mix(in srgb, var(--ac) 26%, transparent), inset 0 1px 0 rgba(255,255,255,.07)!important; } html body .mcr-global-mob-panel .sb-item.on .sb-ico-wrap i{font-size:.66rem!important} /* Per-page accent. Drives the left bar, the active pill wash and the icon tile ring. Matches the inline gradient colours already in header.php. */ html body .mcr-global-mob-panel .sb-item[href$="/events"], html body .mcr-global-mob-panel .sb-item[href*="/events/"] {--ac:#ff6b5b} html body .mcr-global-mob-panel .sb-item[href$="/food"], html body .mcr-global-mob-panel .sb-item[href*="/food/"] {--ac:#4ade80} html body .mcr-global-mob-panel .sb-item[href$="/nightlife"], html body .mcr-global-mob-panel .sb-item[href*="/nightlife/"] {--ac:#fb923c} html body .mcr-global-mob-panel .sb-item[href$="/music"], html body .mcr-global-mob-panel .sb-item[href*="/music/"] {--ac:#f87171} html body .mcr-global-mob-panel .sb-item[href$="/sport"], html body .mcr-global-mob-panel .sb-item[href*="/sport/"] {--ac:#60a5fa} html body .mcr-global-mob-panel .sb-item[href$="/art"], html body .mcr-global-mob-panel .sb-item[href*="/art/"] {--ac:#facc15} html body .mcr-global-mob-panel .sb-item[href$="/film"], html body .mcr-global-mob-panel .sb-item[href*="/film/"] {--ac:#93c5fd} html body .mcr-global-mob-panel .sb-item[href$="/fashion"], html body .mcr-global-mob-panel .sb-item[href*="/fashion/"] {--ac:#f472b6} html body .mcr-global-mob-panel .sb-item[href$="/culture"], html body .mcr-global-mob-panel .sb-item[href*="/culture/"] {--ac:#a78bfa} html body .mcr-global-mob-panel .sb-item[href$="/areas"], html body .mcr-global-mob-panel .sb-item[href*="/areas/"] {--ac:#e8998a} html body .mcr-global-mob-panel .sb-item[href*="/venues"] {--ac:#5b9bff} html body .mcr-global-mob-panel .sb-item[href$="/stories"], html body .mcr-global-mob-panel .sb-item[href*="/stories/"] {--ac:#fbbf24} html body .mcr-global-mob-panel .sb-item[href$="/students"], html body .mcr-global-mob-panel .sb-item[href*="/students/"] {--ac:#22d3ee} html body .mcr-global-mob-panel .sb-item[href$="/tv"], html body .mcr-global-mob-panel .sb-item[href*="/tv/"] {--ac:#2dd4bf} html body .mcr-global-mob-panel .sb-item[href*="/plan-my-weekend"]{--ac:#c4b5fd} html body .mcr-global-mob-panel .sb-item[href*="/jobs"] {--ac:#4ade80} /* ── MARKERS ────────────────────────────────────────────────────── */ html body .mcr-global-mob-panel .sb-badge{ margin-left:auto!important; display:inline-flex!important;align-items:center!important;gap:4px!important; font-size:.5rem!important;font-weight:800!important;letter-spacing:.08em!important; text-transform:uppercase!important; color:#ff6b5b!important; background:rgba(255,107,91,.12)!important; border:1px solid rgba(255,107,91,.3)!important; padding:2px 7px!important;border-radius:99px!important; min-width:0!important; } html body .mcr-global-mob-panel .sb-badge::before{ content:'';width:4px;height:4px;border-radius:50%; background:#ff6b5b; animation:mobnavPulse 1.6s infinite; } @keyframes mobnavPulse{ 0%,100%{box-shadow:0 0 0 0 rgba(255,107,91,.5)} 50% {box-shadow:0 0 0 5px rgba(255,107,91,0)} } html body .mcr-global-mob-panel .sb-dot{ margin-left:auto!important; width:5px!important;height:5px!important; box-shadow:0 0 8px currentColor!important; } /* ── FOOTER (markup added in header.php) ────────────────────────── */ html body .mcr-global-mob-panel .mobnav-foot{ flex-shrink:0; padding:12px 16px calc(18px + env(safe-area-inset-bottom)); border-top:1px solid rgba(255,255,255,.07); } html body .mcr-global-mob-panel .mobnav-foot-links{display:flex;gap:16px} html body .mcr-global-mob-panel .mobnav-foot-links a{ font-size:.52rem;font-weight:700;letter-spacing:.14em; color:rgba(255,255,255,.42);transition:color .25s; } html body .mcr-global-mob-panel .mobnav-foot-links a:hover{color:#fff} html body .mcr-global-mob-panel .mobnav-foot-meta{ margin-top:12px;display:flex;justify-content:space-between;align-items:center; font-size:.5rem;letter-spacing:.14em;color:rgba(255,255,255,.42); } html body .mcr-global-mob-panel .mobnav-foot-meta .st{ display:flex;align-items:center;gap:5px; } html body .mcr-global-mob-panel .mobnav-foot-meta .st::before{ content:'';width:5px;height:5px;border-radius:50%; background:#4ade80;box-shadow:0 0 8px #4ade80; } /* Motion-safety: honour the OS reduce-motion setting */ @media (prefers-reduced-motion:reduce){ html body #WRAP, html body.nav-open #WRAP, html body #MOB-HEADER, html body.nav-open #MOB-HEADER, html body .mcr-global-mob-panel .sb-item{transition:none!important} html body .mcr-global-mob-panel .sb-badge::before{animation:none!important} } }