.navbar { display: flex; align-items: center; justify-content: space-between; height: 72px; padding: 0 4vw; backdrop-filter: blur(var(--blur)); background: rgba(21,32,48,0.9); border-bottom: 1px solid var(--card-border); box-shadow: 0 4px 12px var(--shadow-color); position: sticky; top: 0; z-index: 100; } .logo { font-weight: 700; font-size: 1.5em; color: var(--primary); display: flex; align-items: center; } .logo-beta { font-size: 0.62em; background: var(--primary); color: #fff; border-radius: 6px; padding: 2px 6px; font-weight: 700; margin-left: 6px; letter-spacing: 0.05em; position: relative; top: -2px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 1.5em; } .nav-links li { position: relative; } .nav-links a { display: block; padding: 0.3em 0.8em 0.6em; color: var(--text-primary); font-weight: 600; text-decoration: none; position: relative; transition: color 0.2s ease; } .nav-links a::after { content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background: var(--primary); transition: width 0.3s ease; } .nav-links a:hover::after, .nav-links a.active::after { width: 100%; } .nav-links a:hover, .nav-links a.active { color: var(--primary); } .dropdown .dropbtn { color: #172b4d; cursor: pointer; } .dropdown-content { display: none; position: absolute; top: calc(100% - 2px); left: 0; min-width: 200px; backdrop-filter: blur(var(--blur)); background: var(--card-bg); border: 1px solid var(--card-border); box-shadow: 0 6px 20px rgba(0,0,0,0.08); border-radius: 0 0 10px 10px; padding: 0; z-index: 2000; pointer-events: auto; } .dropdown { position: relative; } .dropdown::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 8px; pointer-events: none; } .dropdown-content li { list-style: none; } .dropdown-content a { display: block; padding: 10px 18px; color: var(--text-primary); font-weight: 600; line-height: 1.6; text-decoration: none; transition: background 0.15s ease; position: relative; z-index: 2001; pointer-events: auto; } .dropdown-content a:hover, .dropdown-content a.active { background: rgba(255,255,255,0.06); color: var(--primary); } .dropdown:hover .dropdown-content { display: block; } .dropdown.open .dropdown-content { display: block; } .dropdown.open > .dropbtn, .dropdown:hover > .dropbtn { color: var(--primary); } .dropdown.open > .dropbtn::after, .dropdown:hover > .dropbtn::after { width: 100%; } .dropdown.force-hide .dropdown-content { display: none !important; } @media (max-width: 768px) { .navbar { height: auto !important; align-items: flex-start; padding-top: 10px; padding-bottom: 10px; } .burger { display: inline-flex; flex-direction: column; justify-content: space-between; width: 24px; height: 18px; cursor: pointer; margin-left: 16px; } .burger span { display: block; height: 3px; width: 100%; background: #172b4d; border-radius: 2px; } .nav-links { display: none; flex-direction: column; width: 100%; background: rgba(3,10,22,0.92) !important; position: static; left: 0; z-index: 99; border-bottom: 1px solid rgba(255,255,255,0.6); padding: 1em 0; } .nav-links.show { display: flex; position: static !important; width: 100%; background: rgba(3,10,22,0.98) !important; } .nav-links li { margin: 0; } .nav-links a { padding: 12px 24px; color: var(--text-primary, #e9f8ff) !important; } .dropdown:hover .dropdown-content { display: none; } } body.nav-open { overflow: visible !important; } body.nav-open .nav-links.show { display: flex; } @media (max-width: 900px) { .nav-links { gap: 1em; } .dropdown-content { min-width: 150px; } } .lang-switch { display: inline-flex; align-items: center; position: relative; background: rgba(255,255,255,0.06); border: 1px solid var(--card-border); border-radius: 8px; padding: 5px 12px; cursor: pointer; margin-right: 20px; box-shadow: 0 2px 6px rgba(0,0,0,0.06); color: var(--primary); font-weight: 600; transition: box-shadow 0.2s ease; user-select: none; } .lang-switch:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); } .lang-menu { position: absolute; top: 110%; left: 0; min-width: 90px; backdrop-filter: blur(var(--blur)); background: var(--card-bg); border: 1px solid var(--card-border); box-shadow: 0 6px 24px rgba(0,0,0,0.08); border-radius: 8px; z-index: 90; display: none; } .lang-option { padding: 6px 18px; display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--text-primary); cursor: pointer; transition: background 0.15s ease; } .lang-option:hover { background: rgba(0,0,0,0.05); color: var(--primary); } .dark-mode-switch { background: rgba(255,255,255,0.65); border: 1px solid rgba(255,255,255,0.8); border-radius: 8px; padding: 5px 12px; margin-right: 20px; color: #00bfff; font-weight: 600; cursor: pointer; display: flex; align-items: center; transition: box-shadow 0.2s ease; } .dark-mode-switch:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); } body.dark-mode .dark-mode-switch { background: rgba(255,255,255,0.1); } .lang-switch img { vertical-align: middle; margin-right: 6px; width: 24px; height: 18px; } .lang-option img { width: 20px; margin-right: 5px; } .lang-flag { vertical-align: middle; margin-right: 6px; width: 24px; height: 18px; } .lang-img-small { width: 20px; margin-right: 5px; } .lang-caret { font-size: 0.82em; vertical-align: middle; } .lang-menu-hidden { display: none; } @media (min-width: 769px) { .burger { display: none !important; } } @media (max-width: 420px) { .lang-switch, .logo-beta, .dark-mode-switch { display: none !important; } .navbar { padding: 8px 3vw; } .burger { display: inline-flex !important; margin-left: auto; } .nav-links { display: none !important; } .nav-links.show { display: flex !important; flex-direction: column !important; position: static !important; width: 100% !important; background: rgba(3,10,22,0.98) !important; padding: 0.6rem 0 !important; animation: cdp-slide-down 240ms ease forwards; border-top: 1px solid rgba(255,255,255,0.06) !important; } .nav-links.show a { padding: 14px 20px !important; font-size: 1rem !important; } @keyframes cdp-slide-down { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } }