/* ============================================================ TNMobileMenu - Modern Mobile Menu Bottom-sheet, drill-down, iOS Settings + Spotify aesthetic. Paired with portal/web/js/mobile-menu.js. ============================================================ */ :root { /* Sheet sits ABOVE every typical adhesion ad (PubNation tops out around ~999998 in practice; we go one higher). */ --tn-mm-z-overlay: 1499998; --tn-mm-z-sheet: 1499999; /* Apple spring physics */ --tn-mm-spring: cubic-bezier(0.32, 0.72, 0, 1); /* Geometry */ --tn-mm-radius: 14px; --tn-mm-radius-sheet: 22px; --tn-mm-row-h: 52px; --tn-mm-gap: 12px; /* Surfaces (light) */ --tn-mm-bg: #f5f4f8; --tn-mm-card: #ffffff; --tn-mm-card-hover: #f5f5f7; --tn-mm-card-active: #ececef; --tn-mm-text: #111; --tn-mm-text-dim: #6b6b76; --tn-mm-divider: rgba(0, 0, 0, 0.07); --tn-mm-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 1px 1px rgba(0,0,0,0.03); --tn-mm-shadow-elev: 0 -16px 48px rgba(0,0,0,0.35); --tn-mm-icon-color: var(--site-primary, #522D80); --tn-mm-accent: var(--site-secondary, #F56600); } html.dark-mode { --tn-mm-bg: #14101c; --tn-mm-card: #1f1a2c; --tn-mm-card-hover: #271f38; --tn-mm-card-active: #2d2440; --tn-mm-text: #f4f3f8; --tn-mm-text-dim: rgba(255, 255, 255, 0.55); --tn-mm-divider: rgba(255, 255, 255, 0.07); --tn-mm-shadow: 0 1px 2px rgba(0,0,0,0.4); --tn-mm-shadow-elev: 0 -24px 64px rgba(0,0,0,0.6); /* Icon color: slightly lightened brand-secondary so the row icons clear WCAG AA against the dark `#14101c` surface. Brand purple (#522D80) on this background renders ~3:1, which is muddy. We mix 60% brand + 40% white to lift it to ~6:1 while staying unmistakably "in family." The plain hex line is a fallback for browsers without color-mix(). */ --tn-mm-icon-color: #9b7fc7; --tn-mm-icon-color: color-mix(in srgb, var(--site-secondary, #522D80) 60%, white); --tn-mm-accent: var(--site-secondary, #522D80); } /* ============================================================ Material Symbols Outlined — base class. Falls back to the already-loaded Material Icons font (same icon name set) until Material Symbols arrives over the wire, so we never flash placeholder text. ============================================================ */ .material-symbols-outlined { font-family: 'Material Symbols Outlined', 'Material Icons', 'Arial Unicode MS', sans-serif; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga'; font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; } /* ============================================================ Source markup is never rendered. The TNMobileMenu engine parses #my-menu (kept in the DOM for SEO + the legacy markup contract), then renders a fresh sheet into . Hiding it unconditionally avoids a one-frame flash of the bare

for X") Rendered as the last group inside the search results panel. We intentionally drop the surrounding card chrome (no background, no shadow, no border) and rely on a single hairline top divider plus brand-purple text to signal "this is an exit ramp, not another menu item." Mirrors the macOS Spotlight / Slack quickswitcher convention. ============================================================ */ .tn-mm__group--site-search { margin-top: 8px; padding-top: 8px; background: transparent; box-shadow: none; border: 0; border-top: 1px solid var(--tn-mm-divider); border-radius: 0; } .tn-mm__row--site-search { color: var(--tn-mm-icon-color); font-weight: 600; } .tn-mm__row--site-search .tn-mm__row-label { color: inherit; } .tn-mm__row--site-search .tn-mm__row-icon { color: var(--tn-mm-icon-color); } .tn-mm__row--site-search .tn-mm__row-chevron { color: var(--tn-mm-icon-color); opacity: 0.85; transition: transform 150ms ease; } .tn-mm__row--site-search:hover .tn-mm__row-chevron, .tn-mm__row--site-search:focus-visible .tn-mm__row-chevron { transform: translateX(3px); } /* ============================================================ Footer (sign out) ============================================================ */ .tn-mm__footer { margin-top: 6px; padding: 8px 0 4px; text-align: center; } .tn-mm__footer-link { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 10px; color: var(--tn-mm-text-dim); text-decoration: none; font-size: 13px; font-weight: 600; transition: color 150ms ease, background 150ms ease; } .tn-mm__footer-link:hover { color: var(--tn-mm-text); background: var(--tn-mm-card); } .tn-mm__footer-link .material-symbols-outlined { font-size: 18px; line-height: 1; } /* ============================================================ Body lock while open ============================================================ */ body.tn-mm-open { overflow: hidden !important; /* Prevent iOS Safari rubber-banding the page underneath */ position: relative; touch-action: none; } /* ============================================================ Reduced motion ============================================================ */ @media (prefers-reduced-motion: reduce) { .tn-mm__sheet, .tn-mm__backdrop, .tn-mm__panel { transition: opacity 200ms ease !important; } .tn-mm__sheet { transform: translateY(0) !important; } .tn-mm[data-state="closed"] .tn-mm__sheet, .tn-mm[data-state="closing"] .tn-mm__sheet { opacity: 0; pointer-events: none; } .tn-mm[data-state="opening"] .tn-mm__sheet, .tn-mm[data-state="open"] .tn-mm__sheet { opacity: 1; } .tn-mm__panel { transform: translateX(0) !important; } .tn-mm__panel:not(.tn-mm__panel--active) { opacity: 0; pointer-events: none; } .tn-mm__upgrade-arrow { transition: none !important; } } /* ============================================================ Hide above tablet — desktop has its own nav ============================================================ */ @media (min-width: 1025px) { .tn-mm { display: none !important; } body.tn-mm-open { overflow: auto !important; touch-action: auto; } } /* ============================================================ Tablet width clamp — keep the sheet from spanning too wide, but stay anchored to the bottom edge so swipe-to-dismiss (which writes translateY inline) keeps working. ============================================================ */ @media (min-width: 600px) { .tn-mm__sheet { max-width: 540px; left: 50%; right: auto; margin-left: -270px; } }