/* * ══════════════════════════════════════════ * Navigation — TS-3.SU * Версия 2.0 (2026-02-19) * Flexbox, ARIA, mobile-first * ══════════════════════════════════════════ */ /* === CSS Custom Properties === */ :root { --nav-bg: rgba(40, 38, 36, 0.92); --nav-text: #f0ede9; --nav-text-muted: #b0aaa6; --nav-hover-bg: rgba(224, 112, 56, 0.15); --nav-hover-text: #ff9d4a; --nav-active: #0cf20c; --nav-cta-bg: #1a8c1a; --nav-cta-hover: #22b022; --nav-cta-text: #fff; --nav-dropdown-bg: #272523; --nav-dropdown-border: rgba(255, 255, 255, 0.06); --nav-mobile-border: rgba(255, 255, 255, 0.06); --nav-transition: 250ms ease; --nav-font: inherit; } /* === Skip Link (accessibility) === */ .skip-link { position: absolute; top: -100%; left: 16px; z-index: 100000; padding: 8px 16px; background: var(--nav-cta-bg); color: #fff; font-size: 14px; text-decoration: none; border-radius: 0 0 4px 4px; transition: top 0.2s ease; } .skip-link:focus { top: 0; } /* === Sticky fix: WHMCS all.min.css sets html,body{height:100%} which constrains the body box to viewport height — position:sticky stops at the body boundary. Override with height:auto + min-height:100vh to keep background coverage. === */ html { height: auto; scroll-padding-top: 52px; /* anchor scroll offset — compensate for sticky header */ } body { height: auto; min-height: 100vh; min-height: 100dvh; /* dynamic viewport — excludes mobile browser chrome */ } /* === Site Header === */ .site-header { position: sticky; top: 0; z-index: 10000; /* must be above .img_big_line (z:9999 in general_style.css) */ } /* Bootstrap popover (data-container="body"): rendered in , outside .site-header stacking context. Must be above .img_big_line (z:9999) — default Bootstrap z-index is only 1060 */ .popover { z-index: 10001; } /* ══════════════════════════════════════════════════════════════════ Notification popover — dark theme (desktop + mobile shared) ────────────────────────────────────────────────────────────────── Overrides: all.css (Bootstrap .popover), styles.css (WHMCS .popover-user-notifications), general_style.css (custom overrides). Mobile-only positioning (bottom sheet) is in @media ≤960px below. ══════════════════════════════════════════════════════════════════ */ /* ── Container ─────────────────────────────────────────────────── */ .popover.popover-user-notifications { background: #2a2826; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45); color: #f0ede9; font-family: 'Open Sans', sans-serif; padding: 0; min-width: 320px; max-width: 380px; } /* ── Arrow (desktop, placement:bottom) ─────────────────────────── */ .popover.popover-user-notifications.bottom > .arrow { border-bottom-color: rgba(255, 255, 255, 0.1); } .popover.popover-user-notifications.bottom > .arrow::after { border-bottom-color: #2a2826; } /* ── Header (popover-title) ────────────────────────────────────── */ .popover.popover-user-notifications .popover-title { background: rgba(255, 255, 255, 0.04); border: none; border-bottom: 1px solid rgba(255, 255, 255, 0.08); border-radius: 8px 8px 0 0; color: #f0ede9; font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; padding: 12px 16px; margin: 0; } .popover.popover-user-notifications .popover-title .badge { background: #e07038; color: #fff; font-size: 11px; border-radius: 10px; padding: 2px 7px; margin-left: 4px; vertical-align: middle; } /* ── Content wrapper ───────────────────────────────────────────── */ .popover.popover-user-notifications .popover-content { padding: 0; background: transparent; } /* ── Alert list ────────────────────────────────────────────────── */ .popover.popover-user-notifications ul { margin: 0; padding: 0; list-style: none; } .popover.popover-user-notifications ul li { border-bottom: 1px solid rgba(255, 255, 255, 0.06); padding: 0; min-height: auto; } .popover.popover-user-notifications ul li:last-child { border-bottom: none; } /* ── Notification links ────────────────────────────────────────── */ .popover.popover-user-notifications ul li a { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; color: #f0ede9; text-decoration: none; font-size: 13px; line-height: 1.45; transition: background 150ms ease; } .popover.popover-user-notifications ul li a:hover, .popover.popover-user-notifications ul li a:focus { background: rgba(224, 112, 56, 0.1); color: #f0ede9; } /* ── Icons (flexbox, replaces float from stock styles) ─────────── */ .popover.popover-user-notifications ul li i.fas, .popover.popover-user-notifications ul li i.far, .popover.popover-user-notifications ul li i.fa { float: none; flex-shrink: 0; font-size: 18px; padding-top: 1px; width: 24px; text-align: center; } /* Semantic icon colors */ .popover.popover-user-notifications ul li i.fa-check-circle { color: #4ade80; } .popover.popover-user-notifications ul li i.fa-info-circle { color: #60a5fa; } .popover.popover-user-notifications ul li i.fa-exclamation-triangle, .popover.popover-user-notifications ul li i.fa-warning { color: #fbbf24; } .popover.popover-user-notifications ul li i.fa-exclamation-circle { color: #f87171; } /* ── Message text ──────────────────────────────────────────────── */ .popover.popover-user-notifications ul li .message { margin-left: 0; flex: 1; } /* ── Empty state ───────────────────────────────────────────────── */ .popover.popover-user-notifications ul li.none { color: #a8a29e; padding: 20px 16px; min-height: auto; text-align: center; font-weight: 500; border-bottom: none; } /* === Main Nav === */ .main-nav { background: var(--nav-bg); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font-family: var(--nav-font); position: relative; z-index: 9000; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); } .main-nav::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(12, 242, 12, 0.4) 20%, rgba(255, 157, 74, 0.5) 50%, rgba(12, 242, 12, 0.4) 80%, transparent); pointer-events: none; } .nav-inner { display: flex; align-items: center; flex-wrap: wrap; max-width: 1600px; margin: 0 auto; padding: 0 12px; } /* === Logo === */ .nav-logo { font-family: 'Astakhov skin', 'Open Sans', sans-serif; font-size: 32px; color: #bfbfbf; text-decoration: none; text-shadow: 0 0 2px #000; padding: 8px 12px 8px 4px; line-height: 1; flex-shrink: 0; transition: color var(--nav-transition), text-shadow 0.4s ease; } .nav-logo:hover, .nav-logo:focus { color: #48c748; text-shadow: 0 0 10px rgba(72, 199, 72, 0.6), 0 0 2px #000; text-decoration: none; outline: none; } /* === Hamburger Toggle (mobile) === */ .nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 12px; position: relative; width: 44px; height: 44px; flex-shrink: 0; } .nav-toggle:focus { outline: 2px solid var(--nav-active); outline-offset: 2px; } .nav-toggle:focus:not(:focus-visible) { outline: none; } .nav-toggle-line { display: block; width: 22px; height: 2px; background: #c5c5c5; margin: 0 auto; transition: transform 0.3s ease, opacity 0.3s ease; } .nav-toggle-line + .nav-toggle-line { margin-top: 5px; } /* Hamburger → X animation */ .nav-toggle.is-open .nav-toggle-line:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle.is-open .nav-toggle-line:nth-child(2) { opacity: 0; } .nav-toggle.is-open .nav-toggle-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .nav-toggle.is-open { background: rgba(255, 255, 255, 0.1); border-radius: 0; } .nav-toggle-badge { position: absolute; top: -2px; right: -6px; font-size: 14px; font-weight: 900; color: #ff9d4a; text-shadow: 0 0 6px #ff9d4a, 0 0 12px rgba(255, 157, 74, 0.4); background: none; pointer-events: none; } /* === Mobile Actions (CTA + Hamburger, visible only on mobile) === */ .nav-actions-mobile { display: none; align-items: center; gap: 8px; margin-left: auto; } /* === Nav Menu Container === */ .nav-menu { display: flex; align-items: center; flex: 1; min-width: 0; align-self: stretch; /* stretch to full nav height for bottom indicator alignment */ } /* === Nav List === */ .nav-list { display: flex; align-items: stretch; /* stretch items to full height so active indicator aligns with ::after gradient */ list-style: none; margin: 0; padding: 0; flex-wrap: wrap; align-self: stretch; /* fill nav-menu height */ } /* === Nav Items === */ .nav-item { position: relative; display: flex; /* stretch .nav-link to full item height */ } /* === Nav Links === */ .nav-link { display: flex; align-items: center; gap: 5px; padding: 14px 20px; font-size: 14px; color: var(--nav-text); text-decoration: none; letter-spacing: 0.5px; white-space: nowrap; transition: color var(--nav-transition), background-color var(--nav-transition), box-shadow var(--nav-transition); } .nav-link:hover, .nav-link:focus { color: var(--nav-hover-text); background: var(--nav-hover-bg); box-shadow: inset 0 -2px 0 var(--nav-hover-text); text-decoration: none; outline: none; /* override Bootstrap 3 a:focus outline */ } .nav-link:focus-visible { outline: 2px solid var(--nav-active); outline-offset: -2px; } .nav-link.active, .nav-item.active > .nav-link { color: var(--nav-active); background: rgba(12, 242, 12, 0.05); box-shadow: inset 0 -2px 0 var(--nav-active); } /* === Nav Link Icons (primary menu items, from hook) === */ .nav-link > i.fas:not(.nav-arrow), .nav-link > i.far:not(.nav-arrow) { width: 18px; text-align: center; font-size: 13px; opacity: 0.55; flex-shrink: 0; transition: opacity var(--nav-transition); } .nav-link:hover > i.fas:not(.nav-arrow), .nav-link:hover > i.far:not(.nav-arrow), .nav-link:focus > i.fas:not(.nav-arrow), .nav-link:focus > i.far:not(.nav-arrow) { opacity: 1; } .nav-link.active > i.fas:not(.nav-arrow), .nav-item.active > .nav-link > i.fas:not(.nav-arrow) { opacity: 0.8; } /* === Dropdown Arrow === */ .nav-arrow { font-size: 11px; opacity: 0.55; transition: transform var(--nav-transition), opacity var(--nav-transition); margin-left: 3px; } .nav-link:hover > .nav-arrow, .nav-link:focus > .nav-arrow { opacity: 0.9; } /* === Dropdown Menu === */ .nav-dropdown { position: absolute; top: calc(100% - 2px); /* overlap with .main-nav::after gradient for seamless line */ left: 0; z-index: 9100; min-width: 240px; list-style: none; margin: 0; padding: 8px 0 6px; /* top +2px compensates for top: calc(100% - 2px) overlap */ background: var(--nav-dropdown-bg); border: 1px solid var(--nav-dropdown-border); border-top: none; border-radius: 0 0 8px 8px; /* Gradient top accent: green → orange → green */ background-image: linear-gradient(90deg, var(--nav-active), var(--nav-hover-text), var(--nav-active)); background-size: 100% 2px; background-repeat: no-repeat; background-position: top; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); max-height: 60vh; overflow-y: auto; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity var(--nav-transition), transform var(--nav-transition), visibility var(--nav-transition); pointer-events: none; } /* Show dropdown on hover / focus-within / js-open */ .nav-item--has-dropdown:hover > .nav-dropdown, .nav-item--has-dropdown:focus-within > .nav-dropdown, .nav-item--has-dropdown.is-open > .nav-dropdown { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } /* Hover intent delay — only on true hover devices (mouse/trackpad). Prevents accidental dropdown activation when mousing across the nav bar. Touch devices (where :hover fires on tap) are excluded to avoid 80ms latency on mobile dropdown open/close animations. */ @media (hover: hover) { .nav-item--has-dropdown:hover > .nav-dropdown { transition-delay: 80ms; } } /* Keyboard (focus-within) and JS (.is-open) — always instant, no delay */ .nav-item--has-dropdown:focus-within > .nav-dropdown, .nav-item--has-dropdown.is-open > .nav-dropdown { transition-delay: 0ms; } /* Keep parent link styled while dropdown is open (mouse on dropdown items) */ .nav-item--has-dropdown:hover > .nav-link, .nav-item--has-dropdown:focus-within > .nav-link, .nav-item--has-dropdown.is-open > .nav-link { color: var(--nav-hover-text); background: var(--nav-hover-bg); box-shadow: inset 0 -2px 0 var(--nav-hover-text); } .nav-item--has-dropdown:hover > .nav-link > i.fas:not(.nav-arrow), .nav-item--has-dropdown:focus-within > .nav-link > i.fas:not(.nav-arrow) { opacity: 1; } /* Active dropdown parent: keep green, not orange */ .nav-item--has-dropdown.active:hover > .nav-link, .nav-item--has-dropdown.active:focus-within > .nav-link, .nav-item--has-dropdown.active.is-open > .nav-link { color: var(--nav-active); background: rgba(12, 242, 12, 0.08); box-shadow: inset 0 -2px 0 var(--nav-active); } /* Rotate arrow when open */ .nav-item--has-dropdown:hover > .nav-link .nav-arrow, .nav-item--has-dropdown:focus-within > .nav-link .nav-arrow, .nav-item--has-dropdown.is-open > .nav-link .nav-arrow { transform: rotate(180deg); opacity: 0.9; } /* Dropdown items */ .nav-dropdown li { margin: 0 6px; } .nav-dropdown a { display: flex; align-items: center; gap: 10px; padding: 10px 14px; font-size: 13.5px; line-height: 1.4; color: rgba(255, 255, 240, 0.82); text-decoration: none; border-left: 2px solid transparent; border-radius: 4px; transition: color 200ms ease, background-color 200ms ease, border-color 200ms ease; } .nav-dropdown a i { width: 16px; text-align: center; font-size: 12px; opacity: 0.6; transition: opacity 200ms ease; } .nav-dropdown a:hover, .nav-dropdown a:focus { color: var(--nav-hover-text); background: rgba(255, 157, 74, 0.1); border-left-color: var(--nav-hover-text); outline: none; } .nav-dropdown a:hover i, .nav-dropdown a:focus i { opacity: 1; } .nav-dropdown a:focus-visible { outline: 2px solid var(--nav-active); outline-offset: -2px; } /* Active (current page) dropdown item */ .nav-dropdown a.active, .nav-dropdown li.active a { color: var(--nav-active); border-left-color: var(--nav-active); background: rgba(12, 242, 12, 0.06); } .nav-dropdown a.active i, .nav-dropdown li.active a i { opacity: 0.8; } /* === Nav Actions (Login + CTA) — right side === */ .nav-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; padding: 6px 0 6px 12px; flex-shrink: 0; border-left: 1px solid rgba(255, 255, 255, 0.08); } /* Login link */ .nav-login { display: flex; align-items: center; gap: 5px; padding: 8px 16px; font-size: 14px; color: var(--nav-text-muted); text-decoration: none; transition: color var(--nav-transition); white-space: nowrap; } .nav-login:hover, .nav-login:focus { color: var(--nav-hover-text); text-decoration: none; outline: none; } /* Register link */ .nav-register { display: flex; align-items: center; gap: 5px; padding: 8px 16px; font-size: 14px; color: var(--nav-text-muted); text-decoration: none; transition: color var(--nav-transition); white-space: nowrap; } .nav-register:hover, .nav-register:focus { color: var(--nav-hover-text); text-decoration: none; outline: none; } /* CTA button */ .nav-cta { display: inline-flex; align-items: center; gap: 6px; padding: 8px 20px; font-size: 14px; font-weight: 600; color: var(--nav-cta-text); background: var(--nav-cta-bg); border-radius: 4px; text-decoration: none; white-space: nowrap; transition: background-color var(--nav-transition), box-shadow var(--nav-transition); animation: cta-glow 3s ease-in-out infinite; } @keyframes cta-glow { 0%, 100% { box-shadow: 0 0 4px rgba(26, 140, 26, 0.2); } 50% { box-shadow: 0 0 12px rgba(26, 140, 26, 0.5), 0 0 4px rgba(26, 140, 26, 0.3); } } .nav-cta:hover, .nav-cta:focus { background: var(--nav-cta-hover); color: var(--nav-cta-text); text-decoration: none; box-shadow: 0 0 12px rgba(34, 176, 34, 0.4); animation: none; outline: none; } /* === Nav Badge (notifications) === */ .nav-badge { display: inline-block; padding: 1px 6px; font-size: 11px; font-weight: 700; color: #76d611; background: #000; border: 2px solid #54b393; border-radius: 50px; box-shadow: 0 0 8px rgba(30, 121, 0, 0.6); line-height: 1.4; } /* === Icon Button (notifications bell) === */ .nav-icon-btn { display: flex; align-items: center; gap: 4px; padding: 8px 10px; color: var(--nav-text-muted); text-decoration: none; border-radius: 4px; transition: color var(--nav-transition), background-color var(--nav-transition); position: relative; white-space: nowrap; } /* Bell label: hidden on desktop (icon-only), shown on mobile */ .nav-icon-label { display: none; } .nav-icon-btn:hover, .nav-icon-btn:focus { color: var(--nav-hover-text); background: var(--nav-hover-bg); text-decoration: none; outline: none; } .nav-icon-btn:focus-visible { outline: 2px solid var(--nav-active); outline-offset: 2px; } .nav-icon-btn .nav-badge { font-size: 10px; padding: 0 5px; position: absolute; top: 2px; right: 0; } /* Bell: amber accent when notifications present */ .nav-icon-btn:has(.nav-badge) { color: #f5a623; } .nav-icon-btn:has(.nav-badge):hover, .nav-icon-btn:has(.nav-badge):focus { color: #ffc341; } /* === Balance Indicator (logged-in, desktop) === */ .nav-balance { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; font-size: 13px; font-weight: 600; color: var(--nav-active); text-decoration: none; background: rgba(12, 242, 12, 0.08); border: 1px solid rgba(12, 242, 12, 0.2); border-radius: 4px; white-space: nowrap; transition: background-color var(--nav-transition), border-color var(--nav-transition); } .nav-balance:hover, .nav-balance:focus { color: var(--nav-active); background: rgba(12, 242, 12, 0.15); border-color: rgba(12, 242, 12, 0.35); text-decoration: none; outline: none; } .nav-balance:focus-visible { outline: 2px solid var(--nav-active); outline-offset: 2px; } .nav-balance .fa-wallet { font-size: 12px; opacity: 0.7; } /* === User Widget (logged-in account dropdown) === */ .nav-user { position: relative; flex-shrink: 0; } .nav-user-btn { padding: 8px 12px; gap: 6px; border-radius: 4px; } .nav-user-btn:hover, .nav-user-btn:focus { background: var(--nav-hover-bg); } .nav-user-btn .fa-user-circle { font-size: 18px; } .nav-user-name { font-size: 13px; max-width: 120px; overflow: hidden; text-overflow: ellipsis; } /* User dropdown — right-aligned to prevent overflow */ .nav-user-dropdown { right: 0; left: auto; min-width: 220px; } /* === Language Switcher === */ .nav-lang { position: relative; flex-shrink: 0; } .nav-lang-btn { padding: 8px 12px; gap: 6px; border-radius: 4px; font-size: 13px; } .nav-lang-btn .fa-globe { font-size: 14px; opacity: 0.7; } .nav-lang-btn:hover .fa-globe, .nav-lang-btn:focus .fa-globe { opacity: 1; } .nav-lang-name { font-size: 13px; } /* Right-aligned dropdown to prevent overflow */ .nav-lang-dropdown { right: 0; left: auto; min-width: 180px; } /* === Dropdown Divider === */ .nav-dropdown-divider, .nav-dropdown .nav-divider { height: 1px; margin: 6px 14px; background: linear-gradient(90deg, transparent, var(--nav-dropdown-border), transparent); list-style: none; overflow: hidden; padding: 0; font-size: 0; } .nav-dropdown .nav-divider a { display: none; } /* === Logout link — red accent (≥4.5:1 on --nav-dropdown-bg) === */ .nav-dropdown a.nav-logout { color: #e07060; } .nav-dropdown a.nav-logout:hover, .nav-dropdown a.nav-logout:focus { color: #ff6b6b; background: rgba(255, 80, 80, 0.1); border-left-color: #ff6b6b; } /* === Balance Display (WHMCS logged in, mobile header) === */ .nav-balance-mobile { display: none; color: var(--nav-active); font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap; transition: opacity var(--nav-transition); } .nav-balance-mobile:hover, .nav-balance-mobile:focus { color: var(--nav-active); text-decoration: none; opacity: 0.75; } /* === Click/Tap Feedback (:active) === */ .nav-link:active { opacity: 0.7; transition-duration: 50ms; } .nav-dropdown a:active { opacity: 0.7; transition-duration: 50ms; } .nav-cta:active { transform: scale(0.97); transition-duration: 50ms; } /* === Infoline (simplified — logo only) === */ .infoline-logo { width: 100%; text-align: center; overflow: hidden; } /* ═══════════════════════════════════════ * Reduced Motion (WCAG 2.1) * ═══════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { .skip-link, .nav-logo, .nav-toggle-line, .nav-link, .nav-arrow, .nav-dropdown, .nav-dropdown a, .nav-login, .nav-register, .nav-cta, .nav-icon-btn, .nav-balance, .nav-balance-mobile, .nav-user-btn, .nav-menu, .nav-overlay { transition: none !important; } .nav-cta { animation: none !important; } } /* ═══════════════════════════════════════ * RESPONSIVE: Tablet (960px–1200px) * ═══════════════════════════════════════ */ @media (max-width: 1200px) { .nav-logo { font-size: 28px; } .nav-link { padding: 14px 12px; font-size: 13px; } .nav-cta { padding: 7px 14px; font-size: 13px; } .nav-user-btn { padding: 8px 10px; } .nav-user-name { max-width: 80px; } } /* ═══════════════════════════════════════ * RESPONSIVE: Compact actions (961–1200px) * Action labels hidden — icon-only to prevent * nav wrapping in logged-in state (7 items + actions). * Text stays in DOM for screen readers (sr-only pattern). * ═══════════════════════════════════════ */ @media (min-width: 961px) and (max-width: 1200px) { .nav-user-name, .nav-lang-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; } /* Balance: vertical stack — icon on top, amount below */ .nav-balance { flex-direction: column; gap: 1px; padding: 4px 8px; text-align: center; } .nav-balance-amount { font-size: 10px; line-height: 1; } /* Enlarge action icons — primary identifiers in icon-only mode. Specificity 0-3-1 (child combinator + chained classes) to override base .nav-link > i.fas:not(.nav-arrow) (also 0-3-1, wins by source order). */ .nav-lang-btn > i.fas.fa-globe { font-size: 18px; opacity: 1; } .nav-icon-btn { color: var(--nav-text); } .nav-icon-btn > i.fas.fa-bell { font-size: 18px; } .nav-balance > i.fas.fa-wallet { font-size: 16px; opacity: 1; } .nav-user-btn > i.fas.fa-user-circle { font-size: 20px; opacity: 1; } /* Subtler arrows — present but non-distracting */ .nav-lang-btn > .nav-arrow, .nav-user-btn > .nav-arrow { font-size: 9px; opacity: 0.35; margin-left: 1px; } } /* === Mobile Menu Overlay + Scroll Lock === */ .nav-menu-open { overflow: hidden; } .nav-overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 10000; /* same as .site-header; DOM order puts header on top, overlay above infoline (9999) */ background: rgba(0, 0, 0, 0.5); -webkit-backdrop-filter: blur(0px); backdrop-filter: blur(0px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), -webkit-backdrop-filter 0.35s cubic-bezier(0.4, 0, 0.2, 1), backdrop-filter 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.35s; } .nav-overlay.is-visible { -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); opacity: 1; visibility: visible; pointer-events: auto; touch-action: none; /* prevent scroll/zoom pass-through on iOS */ } /* ═══════════════════════════════════════ * RESPONSIVE: Mobile (≤960px) * ═══════════════════════════════════════ */ @media (max-width: 960px) { /* Show hamburger + mobile CTA */ .nav-toggle { display: flex; flex-direction: column; align-items: center; justify-content: center; } .nav-actions-mobile { display: flex; } /* Mobile menu: collapsed by default, slide-down on open */ .nav-menu { display: flex; flex-direction: column; align-items: stretch; flex: 0 0 100%; /* override desktop flex:1 — force full-width wrap */ order: 3; background: var(--nav-bg); border-top: 1px solid var(--nav-mobile-border); overflow: hidden; max-height: 0; transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .nav-menu.is-open { overflow-y: auto; overscroll-behavior: contain; max-height: calc(100vh - 56px); max-height: calc(100dvh - 56px); /* subtract header bar height so menu doesn't extend below viewport */ } /* Nav list vertical */ .nav-list { flex-direction: column; width: 100%; } /* Nav items full-width */ .nav-item { width: 100%; border-bottom: 1px solid var(--nav-mobile-border); flex-direction: column; /* stack link + dropdown vertically on mobile */ } /* Nav links bigger touch targets */ .nav-link { padding: 14px 20px; font-size: 15px; text-transform: uppercase; letter-spacing: 0.5px; white-space: normal; } /* Larger icons on mobile for touch targets */ .nav-link > i.fas:not(.nav-arrow), .nav-link > i.far:not(.nav-arrow) { width: 24px; font-size: 15px; opacity: 0.5; } /* Dropdown: static, collapsed by default, slide-down on open */ .nav-dropdown { position: static; opacity: 1; visibility: visible; transform: none; background: rgba(0, 0, 0, 0.15); border: none; border-radius: 0; box-shadow: none; pointer-events: auto; max-height: 0; overflow: hidden; padding: 0; min-width: auto; border-top: none; transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1); } /* Dropdown items indented */ .nav-dropdown li { margin: 0; } .nav-dropdown a { padding: 12px 20px 12px 40px; font-size: 14px; color: #bdcece; border-left: 2px solid transparent; border-radius: 0; border-bottom: 1px solid rgba(16, 100, 109, 0.2); } .nav-dropdown a i { width: 20px; font-size: 13px; } .nav-dropdown li:last-child a { border-bottom: none; } .nav-dropdown a:hover, .nav-dropdown a:focus { color: var(--nav-hover-text); background: rgba(255, 157, 74, 0.06); border-left-color: var(--nav-hover-text); } /* Actions at bottom of mobile menu */ .nav-actions { flex-direction: column; width: 100%; padding: 12px 0; gap: 10px; border-left: none; border-top: 1px solid rgba(255, 255, 255, 0.1); } .nav-login, .nav-register { justify-content: center; padding: 12px 20px; font-size: 15px; color: var(--nav-text); } .nav-cta { justify-content: center; padding: 12px; font-size: 15px; } /* Hide desktop-only elements (shown in mobile actions/header instead) */ .nav-actions .nav-cta { display: none; } .nav-balance { display: none; } /* Mobile user widget */ .nav-user { width: 100%; border-bottom: 1px solid var(--nav-mobile-border); } .nav-user-btn { padding: 14px 20px; font-size: 15px; text-transform: uppercase; letter-spacing: 0.5px; border-radius: 0; width: 100%; } .nav-user-btn:hover, .nav-user-btn:focus { background: var(--nav-hover-bg); } .nav-user-name { max-width: none; } /* Mobile language switcher */ .nav-lang { width: 100%; border-bottom: 1px solid var(--nav-mobile-border); } .nav-lang-btn { padding: 14px 20px; font-size: 15px; text-transform: uppercase; letter-spacing: 0.5px; border-radius: 0; width: 100%; } .nav-lang-dropdown { right: auto; left: 0; } /* Bell as full-width nav item on mobile (with text label) — pushed to bottom */ .nav-icon-btn { order: 10; width: 100%; padding: 14px 20px; font-size: 15px; color: var(--nav-text); border-bottom: none; border-top: 1px solid var(--nav-mobile-border); border-radius: 0; gap: 8px; white-space: normal; text-transform: uppercase; letter-spacing: 0.5px; } .nav-icon-label { display: inline; } .nav-icon-btn .nav-badge { position: static; } /* Mobile header CTA: icon only (text hidden) */ .nav-actions-mobile .nav-cta-label { display: none; } .nav-actions-mobile .nav-cta { padding: 8px 10px; min-width: 44px; min-height: 44px; justify-content: center; } /* Active state — left border indicator on mobile (replaces desktop bottom box-shadow) */ .nav-link.active, .nav-item.active > .nav-link { box-shadow: none; border-left: 3px solid var(--nav-active); padding-left: 17px; /* 20px - 3px border */ } /* Mobile balance */ .nav-balance-mobile { display: block; } /* ══════════════════════════════════════════════════════════════════ Notification bottom sheet — mobile positioning overrides ────────────────────────────────────────────────────────────────── Dark theme colors are in the global (non-media) section above. This section only overrides geometry: fixed bottom sheet, full width, modal backdrop. Z-index: page < backdrop(10001) < popover(10002) ══════════════════════════════════════════════════════════════════ */ /* ── Sheet positioning ─────────────────────────────────────────── */ .popover.popover-user-notifications { position: fixed !important; top: auto !important; bottom: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; max-height: 60vh; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; z-index: 10002 !important; margin: 0 !important; border: none !important; border-radius: 16px 16px 0 0 !important; box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.5); padding-bottom: env(safe-area-inset-bottom, 0) !important; } .popover.popover-user-notifications > .arrow { display: none !important; } /* Title: flat top corners (sheet has own rounded top) */ .popover.popover-user-notifications .popover-title { border-radius: 0 !important; } /* Larger touch targets on mobile */ .popover.popover-user-notifications ul li a { padding: 14px 16px !important; font-size: 14px !important; } /* ── Drag handle (mobile-only visual affordance) ───────────────── */ .popover.popover-user-notifications::before { content: ''; display: block; width: 36px; height: 4px; background: rgba(255, 255, 255, 0.18); border-radius: 2px; margin: 10px auto 4px; } /* ── Close button (injected by JS, mobile only) ────────────────── */ .popover-sheet-close { position: absolute; top: 6px; right: 8px; background: none; border: none; font-size: 20px; line-height: 1; color: rgba(255, 255, 255, 0.4); cursor: pointer; padding: 4px 8px; z-index: 1; transition: color 150ms ease; } .popover-sheet-close:hover, .popover-sheet-close:focus { color: #fff; } /* ── Modal backdrop (mobile only) ──────────────────────────────── */ .popover-backdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 10001; background: rgba(0, 0, 0, 0); transition: background 200ms ease; -webkit-tap-highlight-color: transparent; } .popover-backdrop.is-visible { background: rgba(0, 0, 0, 0.4); } } /* ═══════════════════════════════════════ * RESPONSIVE: Small mobile (≤480px) * ═══════════════════════════════════════ */ @media (max-width: 480px) { .nav-logo { font-size: 26px; padding: 8px 8px 8px 0; } .nav-cta { padding: 6px 12px; font-size: 13px; } .nav-link { padding: 12px 16px; font-size: 14px; } .nav-link.active, .nav-item.active > .nav-link { padding-left: 13px; /* 16px - 3px border */ } .nav-icon-btn { padding: 12px 16px; font-size: 14px; } .nav-user-btn { padding: 12px 16px; font-size: 14px; } .nav-lang-btn { padding: 12px 16px; font-size: 14px; } } /* ═══════════════════════════════════════ * HIGH CONTRAST (Windows, forced-colors) * ═══════════════════════════════════════ */ @media (forced-colors: active) { .nav-link, .nav-dropdown a, .nav-login, .nav-register, .nav-icon-btn, .nav-balance, .nav-balance-mobile { border: 1px solid transparent; } .nav-item.active > .nav-link, .nav-link.active { border-bottom: 3px solid LinkText; } .nav-dropdown a.active, .nav-dropdown li.active a { border-left: 3px solid LinkText; } .nav-cta { border: 2px solid ButtonText; } .skip-link:focus { border: 2px solid LinkText; } .nav-toggle { border: 1px solid ButtonText; } .nav-toggle-line { background: ButtonText; } .nav-badge { border: 1px solid LinkText; } .nav-dropdown { border: 1px solid CanvasText; } .nav-dropdown-divider, .nav-dropdown .nav-divider { background: CanvasText; } } /* Mobile forced-colors: switch active indicator from bottom → left (matches mobile layout) */ @media (forced-colors: active) and (max-width: 960px) { .nav-item.active > .nav-link, .nav-link.active { border-bottom: none; border-left: 3px solid LinkText; } } /* ═══════════════════════════════════════ * PRINT: Hide navigation * ═══════════════════════════════════════ */ @media print { .site-header, .nav-overlay { display: none !important; } }