/* ========================================================= NitkoTime — общая шапка для всех страниц Подключение: Пункты меню только для вошедших помечаются классом nav-private. Разметка:
(или .header-links на главной)
========================================================= */ :root { --header-h: 68px; } /* Полоса прокрутки скрыта на всех страницах: ширина окна везде одинаковая, поэтому логотип и кнопки не сдвигаются при переходах и при открытии модальных окон */ html, body { -ms-overflow-style: none; scrollbar-width: none; } html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; width: 0; height: 0; } header, header *, header *::before, header *::after { box-sizing: border-box; } header { position: sticky; top: 0; z-index: 90; background: rgba(26, 26, 26, 0.82); backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px); border-bottom: 1px solid #333; font-family: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; line-height: 1.5; -webkit-tap-highlight-color: transparent; } .header-inner { display: flex; align-items: center; gap: 32px; width: 100%; max-width: 1200px; min-height: var(--header-h); margin: 0 auto; padding: 0 24px; } /* Логотип (используется и в подвале главной) */ .logo { display: inline-flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 800; color: #2ecc71; text-decoration: none; letter-spacing: 0.5px; line-height: 1; flex-shrink: 0; } .logo-mark { width: 26px; height: 26px; flex-shrink: 0; } .logo:focus-visible { outline: 2px solid #2ecc71; outline-offset: 4px; border-radius: 6px; } /* Навигация главной: якоря по разделам */ .header-links { display: flex; gap: 26px; margin-right: auto; } .header-links a { color: #bbb; text-decoration: none; font-size: 14px; transition: color 0.2s; } .header-links a:hover { color: #fff; } .header-links a:focus-visible { outline: 2px solid #2ecc71; outline-offset: 3px; border-radius: 4px; } /* Навигация внутренних страниц */ .app-nav { display: flex; gap: 4px; margin-right: auto; } .app-nav a { padding: 8px 14px; border-radius: 10px; color: #bbb; text-decoration: none; font-size: 14px; font-weight: 600; white-space: nowrap; transition: color 0.2s, background 0.2s; } .app-nav a:hover { color: #fff; background: #2a2a2a; } .app-nav a[aria-current="page"] { color: #2ecc71; background: rgba(46, 204, 113, 0.1); } .app-nav a:focus-visible { outline: 2px solid #2ecc71; outline-offset: 2px; } /* Пункты только для вошедших: auth.js ставит на класс is-auth */ html:not(.is-auth) .nav-private { display: none; } /* Контейнер, который наполняют скрипты авторизации */ .user-info { display: flex; align-items: center; margin-left: auto; } .header-links + .user-info, .app-nav + .user-info { margin-left: 0; } .header-buttons { display: flex; gap: 8px; align-items: center; } .btn-header { padding: 9px 16px; font-size: 14px; font-weight: 700; font-family: inherit; line-height: 1.5; border-radius: 10px; cursor: pointer; text-decoration: none; transition: 0.2s; border: 1px solid transparent; outline: none; display: inline-flex; align-items: center; justify-content: center; background: transparent; white-space: nowrap; } .btn-header:focus-visible { outline: 2px solid #2ecc71; outline-offset: 2px; } .btn-header-primary { background: #2ecc71; color: #000; border-color: #27ae60; } .btn-header-primary:hover { background: #27ae60; } .btn-header-outline { color: #fff; border-color: #555; } .btn-header-outline:hover { background: #444; border-color: #888; } .btn-header-danger { color: #e74c3c; border-color: #e74c3c; } .btn-header-danger:hover { background: #e74c3c; color: #fff; } /* Фиксированная ширина кнопки аккаунта, чтобы "Выйти" стояла на месте */ .btn-account { width: 148px; } /* ---------- Планшеты ---------- */ @media (max-width: 1100px) { /* Навигация кабинета уходит на вторую строку, первая строка сохраняет высоту */ .header-inner { flex-wrap: wrap; gap: 0 32px; } .logo, .user-info { min-height: var(--header-h); } .app-nav + .user-info { margin-left: auto; } .app-nav { order: 3; margin: 0 -24px; padding: 0 24px 10px; width: calc(100% + 48px); overflow-x: auto; scrollbar-width: none; } .app-nav::-webkit-scrollbar { display: none; } } @media (max-width: 950px) { .header-links { display: none; } .header-links + .user-info { margin-left: auto; } } /* ---------- Смартфоны ---------- */ @media (max-width: 650px) { header { position: static; background: #1a1a1a; backdrop-filter: none; -webkit-backdrop-filter: none; } .header-inner { flex-direction: column; align-items: stretch; gap: 14px; padding: 16px 18px; text-align: center; } .logo { align-self: center; } .logo, .user-info { min-height: 0; } .user-info, .app-nav + .user-info { width: 100%; justify-content: center; margin-left: 0; order: 2; } .header-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; } .btn-header, .btn-account { width: 100%; } .app-nav { order: 3; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0; padding: 0; width: 100%; overflow: visible; } .app-nav a { text-align: center; background: #2a2a2a; border: 1px solid #333; } .app-nav a[aria-current="page"] { border-color: rgba(46, 204, 113, 0.4); } }