/* ============================================================ LEVIAPAY — shared mobile navigation Self-contained (no CSS-var deps) so it renders identically on every marketing page regardless of which stylesheet the page loads — same rule as site-footer.css. Markup is built at runtime by /js/site-nav.js from the page's own

; this file only styles it. Colours are the literal values of the landing drawer (style.css) — #652CD1 accent, #5424b5 hover, #1a1a2e text, #666 muted, #eee / #f0f0f0 rules. ============================================================ */ /* ── skip link (first child of , off-screen until focus) ── */ .snav-skip { position: fixed; left: 12px; top: -120px; z-index: 10060; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 8px; background: #652CD1; color: #fff; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 15px; font-weight: 600; letter-spacing: -.01em; text-decoration: none; transition: top .15s ease; } .snav-skip:focus { top: 12px; outline: none; box-shadow: 0 0 0 3px #fff, 0 0 0 6px #652CD1; } /* ── hamburger (hidden on desktop) ───────────────────────── */ .snav-burger { display: none; flex: 0 0 auto; width: 44px; height: 44px; flex-direction: column; align-items: center; justify-content: center; gap: 5px; margin: 0; padding: 0; border: none; border-radius: 8px; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; } .snav-burger span { display: block; width: 24px; height: 2px; border-radius: 2px; background: #fff; } .snav-burger:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } /* ── drawer (hidden on desktop) ──────────────────────────── */ .snav-drawer, .snav-spacer { display: none; } .snav-drawer, .snav-drawer *, .snav-burger, .snav-skip { box-sizing: border-box; } /* ── body scroll lock (class, never an inline style) ─────── */ body.snav-locked { overflow: hidden; } @media (max-width: 1080px) { /* One breakpoint for the whole site. The per-page rules only ever set display:none at a lower width, so this can extend the range but never fight it — and it guarantees the burger and the desktop links are never on screen at the same time. */ .br-nav-links, .kr-nav-links, .fn-nav-links, .kc-nav-links, .pt-nav-links, .bb-nav-links, .legal-links, .k-navbar > .k-nav, .snav-navlinks { display: none; } .snav-burger { display: flex; } .snav-spacer { display: block; flex: 1 1 auto; } .snav-drawer { display: block; position: fixed; inset: 0; /* Above .cookie-notice (10000), .bdd-panel (10000) and the search overlay (9999) — a modal dialog must not be clipped by page furniture. All of them reappear when the drawer closes. */ z-index: 10050; visibility: hidden; pointer-events: none; } .snav-drawer.is-open { visibility: visible; pointer-events: auto; } .snav-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, .3); opacity: 0; transition: opacity .3s ease; } .snav-drawer.is-open .snav-overlay { opacity: 1; } .snav-panel { position: absolute; top: 0; right: 0; width: 100%; max-width: 460px; height: 100%; display: flex; flex-direction: column; overflow-y: auto; -webkit-overflow-scrolling: touch; background: #fff; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; padding: max(20px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) 24px; transform: translateX(100%); transition: transform .3s cubic-bezier(.4, 0, .2, 1); } .snav-drawer.is-open .snav-panel { transform: translateX(0); } /* ── head: logo + close ── */ .snav-head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 20px; border-bottom: 1px solid #eee; } .snav-logo { display: flex; align-items: center; min-height: 44px; text-decoration: none; } .snav-logo img { width: 132px; height: auto; display: block; } .snav-close { flex: 0 0 auto; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; margin: 0; padding: 0; border: none; border-radius: 8px; background: transparent; color: #666; cursor: pointer; } .snav-close:hover { color: #1a1a2e; } /* ── link list ── */ .snav-links { flex: 1 0 auto; display: flex; flex-direction: column; padding-top: 8px; } .snav-link, .snav-acc-toggle { display: flex; align-items: center; width: 100%; min-height: 52px; margin: 0; padding: 8px 0; border: none; border-bottom: 1px solid #f0f0f0; border-radius: 0; background: transparent; color: #1a1a2e; font-family: inherit; font-size: 17px; font-weight: 500; letter-spacing: -.01em; text-align: left; text-decoration: none; cursor: pointer; transition: color .2s; } .snav-link:hover, .snav-acc-toggle:hover { color: #652CD1; } .snav-link.is-active { color: #652CD1; font-weight: 700; } /* ── Branchen accordion ── */ .snav-acc-toggle { justify-content: space-between; gap: 12px; } .snav-acc-chevron { flex: 0 0 auto; width: 10px; height: 10px; border-right: 2px solid #652CD1; border-bottom: 2px solid #652CD1; transform: translateY(-3px) rotate(45deg); transition: transform .2s ease; } .snav-acc-toggle[aria-expanded="true"] .snav-acc-chevron { transform: translateY(2px) rotate(-135deg); } .snav-sublist { display: flex; flex-direction: column; padding: 4px 0 8px; border-bottom: 1px solid #f0f0f0; } /* an author display:flex outranks the UA rule for [hidden] */ .snav-sublist[hidden] { display: none; } .snav-sublink { display: flex; flex-direction: column; justify-content: center; min-height: 44px; padding: 4px 0 4px 14px; border-left: 2px solid #eee; color: #1a1a2e; font-size: 15.5px; font-weight: 500; letter-spacing: -.01em; text-decoration: none; } .snav-sublink:hover { color: #652CD1; border-left-color: #652CD1; } .snav-sublink.is-active { color: #652CD1; font-weight: 700; border-left-color: #652CD1; } .snav-sublink span { font-size: 13px; font-weight: 500; color: #666; } .snav-sublink:hover span, .snav-sublink.is-active span { color: #666; } /* ── actions (login / CTA pills lifted out of the bar) ── */ .snav-actions { flex: 0 0 auto; display: flex; flex-direction: column; gap: 10px; margin-top: 20px; padding-top: 20px; border-top: 1px solid #eee; } .snav-action { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; padding: 12px 24px; border: 1.5px solid #652CD1; border-radius: 5000px; background: transparent; color: #652CD1; font-family: inherit; font-size: 16px; font-weight: 600; letter-spacing: -.01em; text-align: center; text-decoration: none; cursor: pointer; transition: background .2s, color .2s; } .snav-action:hover { background: rgba(101, 44, 209, .08); } .snav-action.is-primary { border-color: #652CD1; background: #652CD1; color: #fff; } .snav-action.is-primary:hover { background: #5424b5; border-color: #5424b5; } /* ── focus rings (the UA default is invisible here) ── */ .snav-panel a:focus-visible, .snav-panel button:focus-visible { outline: 2px solid #652CD1; outline-offset: 2px; border-radius: 4px; } .snav-action:focus-visible { border-radius: 5000px; } } /* ── the glass bar itself overflows on phones: 96px of gutter + 28px of padding + a 150px logo needs ~355px inside 294px. Narrow the gutter, shrink the logo, move the login pill into the drawer (site-nav.js proxies it into .snav-actions). ── */ @media (max-width: 720px) { .br-nav, .kr-nav, .fn-nav, .kc-nav, .pt-nav, .bb-nav, .k-header, /* .legal-nav is a full-bleed band — .legal-navbar carries the width */ .legal-navbar { width: calc(100% - 32px); } .br-navbar, .kr-navbar, .fn-navbar, .kc-nav-inner, .pt-navbar, .bb-navbar, .k-navbar, .legal-navbar { gap: 8px; padding: 0 14px; } .br-logo img, .kr-logo img, .fn-logo img, .kc-logo img, .pt-logo img, .bb-logo img, .k-logo img, .legal-logo img { width: 120px; } .br-login, .kr-login, .fn-login, .k-login, .legal-login, .kc-cta, .bb-nav-cta, .pt-nav-auth { display: none; } } @media (prefers-reduced-motion: reduce) { .snav-skip, .snav-overlay, .snav-panel, .snav-acc-chevron { transition: none; } }