/* ═════════════════════════════════════════════════════════════════ KL MOBILE NAV — bulletproof hamburger panel styles, render-blocking for site-wide consistency. Why this file exists (June 1, 2026 PM): forum.html was rendering the slide-down hamburger panel completely UNSTYLED because the .nav-mobile-* CSS was only baked into ~38 pages out of 59 — and forum.html had ZERO matching rules. Same markup, same JS handler, but no styles → bare HTML. Solution: extract the panel styles from index.html into this standalone file and link it on every page, just like kl-top-strip.css. Now every page gets the identical hamburger experience — same slide-in panel, same accordion expand, same red accent, same close interaction. Load: in as render-blocking , after kl-top-strip.css. ═════════════════════════════════════════════════════════════════ */ /* ─── HAMBURGER BUTTON ─── */ .nav-hamburger { display: none; background: transparent; border: 1.5px solid #d8d4cc; border-radius: 6px; padding: 8px 10px; cursor: pointer; flex-direction: column; gap: 4px; align-items: center; justify-content: center; margin-left: auto; transition: border-color .2s, background .2s; } .nav-hamburger:hover, .nav-hamburger:focus-visible { border-color: var(--red, #cc0000); background: #fff8f8; outline: none; } .nav-hamburger-bar { display: block; width: 22px; height: 2.5px; background: #111; border-radius: 2px; transition: transform .25s, opacity .25s; } .nav-hamburger.open .nav-hamburger-bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .nav-hamburger.open .nav-hamburger-bar:nth-child(2) { opacity: 0; } .nav-hamburger.open .nav-hamburger-bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } @media (max-width: 900px) { .nav-hamburger { display: inline-flex !important; } } /* ─── BACKDROP + SLIDE-IN PANEL ─── */ .nav-mobile-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 9998; opacity: 0; pointer-events: none; transition: opacity .25s ease; } .nav-mobile-backdrop.open { opacity: 1; pointer-events: auto; } .nav-mobile-panel { position: fixed; top: 0; right: 0; width: min(85vw, 360px); height: 100vh; height: 100dvh; background: #ffffff; box-shadow: -4px 0 24px rgba(0,0,0,0.18); z-index: 9999; transform: translateX(100%); transition: transform .28s cubic-bezier(.2,.7,.3,1); display: flex; flex-direction: column; overflow: hidden; } .nav-mobile-panel.open { transform: translateX(0); } /* ─── HEADER (Menu title + close button) ─── */ .nav-mobile-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid #eceae5; background: #faf8f4; } .nav-mobile-title { font-family: var(--font-display, 'Bebas Neue', Impact, sans-serif); font-size: 18px; letter-spacing: .08em; text-transform: uppercase; color: #111; } .nav-mobile-close { background: transparent; border: 0; padding: 6px; cursor: pointer; color: #111; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; } .nav-mobile-close:hover { background: #f0ede7; } /* ─── BODY (scrollable nav list) ─── */ .nav-mobile-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0.5rem 0 1rem 0; } .nav-mobile-list { list-style: none; margin: 0; padding: 0; } .nav-mobile-group { border-bottom: 1px solid #f1eee8; } /* ─── GROUP HEADER ROW (clickable parent link + chevron) ─── */ .nav-mobile-grouphead-row { display: flex; align-items: stretch; width: 100%; border-bottom: 1px solid transparent; } .nav-mobile-grouphead-link { flex: 1 1 auto; display: block; padding: 0.95rem 1.25rem; font-size: 16px; font-weight: 600; color: #111; text-decoration: none; letter-spacing: 0.02em; border: 0; background: transparent; cursor: pointer; } .nav-mobile-grouphead-link:hover, .nav-mobile-grouphead-link:focus-visible { background: #faf8f4; color: var(--red, #cc0000); outline: none; } .nav-mobile-chevron-btn { flex: 0 0 auto; width: 44px; background: transparent; border: 0; border-left: 1px solid #f1eee8; color: #888; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; transition: background .15s, color .15s; } .nav-mobile-chevron-btn:hover { background: #faf8f4; color: var(--red, #cc0000); } .nav-mobile-chevron-btn .nav-mobile-chevron { display: inline-block; transition: transform .2s, color .2s; } .nav-mobile-group.open .nav-mobile-chevron-btn .nav-mobile-chevron { transform: rotate(180deg); color: var(--red, #cc0000); } .nav-mobile-group.open .nav-mobile-grouphead-link { color: var(--red, #cc0000); } /* Legacy single-button group header (still used on some pages) */ .nav-mobile-grouphead { width: 100%; text-align: left; background: transparent; border: 0; padding: 0.95rem 1.25rem; font-size: 16px; font-weight: 600; color: #111; cursor: pointer; display: flex; align-items: center; justify-content: space-between; font-family: inherit; } .nav-mobile-grouphead:hover { background: #faf8f4; } .nav-mobile-chevron { font-size: 14px; color: #888; transition: transform .2s; display: inline-block; } .nav-mobile-group.open .nav-mobile-chevron { transform: rotate(180deg); color: var(--red, #cc0000); } .nav-mobile-group.open .nav-mobile-grouphead { color: var(--red, #cc0000); } /* ─── SUB-LIST (accordion drop) ─── */ .nav-mobile-sublist { list-style: none; margin: 0; padding: 0; max-height: 0; overflow: hidden; transition: max-height .3s ease; background: #fafaf7; } .nav-mobile-group.open .nav-mobile-sublist { max-height: 500px; } .nav-mobile-sublist li a { display: block; padding: 0.7rem 1.25rem 0.7rem 2rem; color: #444; text-decoration: none; font-size: 14px; border-top: 1px solid #f1eee8; transition: background .15s, color .15s; } .nav-mobile-sublist li a:hover, .nav-mobile-sublist li a:focus-visible { background: #fff; color: var(--red, #cc0000); outline: none; } /* ─── FOOTER (Member Login CTA) ─── */ .nav-mobile-footer { padding: 1rem 1.25rem 1.25rem; border-top: 1px solid #eceae5; background: #faf8f4; display: flex; flex-direction: column; gap: 0.55rem; } .nav-mobile-cta { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0.7rem 1rem; border-radius: 6px; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; border: 1.5px solid #111; color: #111; background: #fff; transition: background .15s, color .15s, border-color .15s; } .nav-mobile-cta:hover { background: #111; color: #fff; } .nav-mobile-cta-member { background: #111; color: #fff; } .nav-mobile-cta-member:hover { background: #000; } .nav-mobile-cta-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem; } .nav-mobile-cta-shop { background: var(--red, #cc0000); color: #fff; border-color: var(--red, #cc0000); } .nav-mobile-cta-shop:hover { background: #a30000; border-color: #a30000; color: #fff; } /* ─── "NEW" PILL on Member Login ─── */ .nav-new-badge { display: inline-flex; align-items: center; justify-content: center; background: #cc0000; color: #fff; font-size: 9px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; padding: 2px 6px; border-radius: 999px; line-height: 1; margin-left: 6px; vertical-align: middle; box-shadow: 0 0 0 0 rgba(204, 0, 0, 0.55); animation: kl-new-pulse 2.2s ease-out infinite; } @keyframes kl-new-pulse { 0% { box-shadow: 0 0 0 0 rgba(204, 0, 0, 0.55); } 70% { box-shadow: 0 0 0 8px rgba(204, 0, 0, 0); } 100% { box-shadow: 0 0 0 0 rgba(204, 0, 0, 0); } } @media (prefers-reduced-motion: reduce) { .nav-new-badge { animation: none; } } .nav-mobile-cta-member .nav-new-badge { font-size: 9.5px; padding: 2px 7px; } /* ─── DESKTOP: hide the mobile panel entirely ─── */ @media (min-width: 901px) { .nav-mobile-panel, .nav-mobile-backdrop { display: none !important; } }