/*! Общая навигация для публичных страниц zatochi.pro
* Подключается в :
* HTML-разметка см. в любой странице (index.html, privacy.html, terms.html, oferta.html). */
/* Шрифт логотипа — Tektur Black (фирменный локап «ЗАТОЧИ!», моно-сталь).
* Объявлен прямо тут, чтобы локап работал на всех страницах с навбаром,
* не завися от их собственных @font-face. */
@font-face { font-family:'Tektur'; font-weight:900; font-style:normal; font-display:swap; src:url('/assets/fonts/Tektur-Black-cyrillic.woff2') format('woff2'); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'Tektur'; font-weight:900; font-style:normal; font-display:swap; src:url('/assets/fonts/Tektur-Black-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122,U+2191,U+2193; }
.site-nav {
position: sticky;
top: 0;
z-index: 50;
/* Моно-сталь (2026-06-15): графит вместо тёплого near-чёрного. */
background: rgba(20, 21, 24, 0.92);
-webkit-backdrop-filter: saturate(140%) blur(14px);
backdrop-filter: saturate(140%) blur(14px);
border-bottom: 1px solid rgba(167, 173, 179, 0.16);
padding: 10px 22px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
box-sizing: border-box;
}
/* Навбар всегда тёмный — лендинг и юр-страницы (графит) тёмные, светлый режим убран. */
.site-nav-mark {
flex-shrink: 0;
display: flex;
align-items: center;
text-decoration: none;
border-bottom: 1px solid transparent;
}
.site-nav-mark:hover { border-bottom-color: transparent; }
/* Текстовый локап вместо красного PNG: «ЗАТОЧИ» сталью + «!» киноварью —
* то же решение, что заставка приложения (.home-wm) и герой лендинга (.hero-wm).
* Раньше тут был сплошь киноварный zatochi-red-transparent.png. */
.site-nav-wm {
font-family: 'Tektur', 'PT Serif', serif; font-weight: 900;
font-size: 23px; line-height: 1; letter-spacing: .01em;
display: inline-flex; align-items: baseline; user-select: none;
}
.site-nav-wm .wm-z {
background: linear-gradient(180deg, #EEF1F4, #C6CCD1 55%, #A7ADB3);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
}
.site-nav-wm .wm-x { color: #C8202C; -webkit-text-fill-color: #C8202C; margin-left: .05em; }
/* Подстраховка размера, если где-то ещё остался ![]()
-логотип. */
.site-nav-mark img { display: block; height: 26px; width: auto; }
.site-nav-links {
display: flex;
align-items: center;
/* перенос на узких экранах — иначе 6 пунктов (вкл. контакты ТГ/Почта) вылезают
* за 360px по горизонтали. На десктопе ширины хватает на одну строку. */
flex-wrap: wrap;
justify-content: flex-end;
gap: 22px;
row-gap: 7px;
font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.site-nav-links a {
color: #A7ADB3;
text-decoration: none;
border-bottom: 1px solid transparent;
padding-bottom: 1px;
transition: color .15s, border-bottom-color .15s;
}
.site-nav-links a:hover {
color: #E2E5E8;
border-bottom-color: #9AA6B0;
}
/* «Приложение» — главный переход, акцентируем киноварью (бренд-цвет). */
.site-nav-links a.is-primary { color: #C8202C; }
.site-nav-links a.is-primary:hover { color: #D8333F; border-bottom-color: #D8333F; }
.site-nav-links a[aria-current="page"] {
color: #E2E5E8;
border-bottom-color: #9AA6B0;
}
@media (max-width: 620px) {
.site-nav { padding: 8px 14px; gap: 10px; }
.site-nav-mark img { height: 22px; }
.site-nav-wm { font-size: 20px; }
.site-nav-links { gap: 14px; font-size: 10px; letter-spacing: 0.08em; }
}
@media (max-width: 420px) {
.site-nav-links { gap: 10px; font-size: 9.5px; letter-spacing: 0.06em; }
.site-nav-mark img { height: 20px; }
.site-nav-wm { font-size: 18px; }
}