/* ============================================================
site-header.css — shared header для всех страниц
Зинин × Штурбин · graphite-mint design system
Подключается в :
============================================================ */
/* Scoped tokens (не overwrite'нут глобальные :root основной страницы) */
.site-header,
.site-header-mnav {
--sh-bg: #0e0e0d;
--sh-bg-paper: #161614;
--sh-fg: #f2f2ee;
--sh-fg-soft: #dcdcd6;
--sh-fg-mute: #7a7a74;
--sh-green: #5dd6a3;
--sh-signal: #ff4d1f;
--sh-hair: #2a2a26;
--sh-f-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
--sh-f-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
--sh-pad-edge: clamp(24px, 4vw, 64px);
}
/* ============================================================
Site header
============================================================ */
.site-header {
position: sticky; top: 0; z-index: 80;
background: var(--sh-bg);
border-bottom: 2px solid var(--sh-fg);
padding: 14px var(--sh-pad-edge);
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 32px;
box-sizing: border-box;
}
.site-header * { box-sizing: border-box; }
.site-header .wm {
font-family: var(--sh-f-display);
font-weight: 600;
letter-spacing: -0.04em;
font-size: 22px;
line-height: 1;
color: var(--sh-fg);
display: inline-flex; align-items: baseline; gap: 0.1em;
text-decoration: none;
}
.site-header .wm .wm-x {
color: var(--sh-green); font-weight: 400;
font-size: 0.92em; transform: translateY(-0.04em);
}
/* «и партнёры» — mono-суффикс в знаке шапки (handoff вариант A). Скрыт на мобиле ≤760px. */
.site-header .wm:has(.wm-suffix) { gap: 0.5em; }
.site-header .wm .wm-core { display: inline-flex; align-items: baseline; gap: 0.1em; }
.site-header .wm .wm-suffix {
font-family: var(--sh-f-mono); font-weight: 400;
font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase;
color: var(--sh-fg-mute);
align-self: center;
padding-left: 0.5em;
border-left: 2px solid var(--sh-hair);
white-space: nowrap;
}
@media (max-width: 760px) {
.site-header .wm .wm-suffix { display: none; }
}
.site-header .site-nav {
display: flex; gap: 24px; align-items: center; justify-self: center;
font-family: var(--sh-f-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.site-header .site-nav a {
color: var(--sh-fg-soft);
padding: 4px 0;
border-bottom: 1px solid transparent;
text-decoration: none;
transition: color 0.15s, border-color 0.15s;
}
.site-header .site-nav a:hover {
color: var(--sh-fg);
border-bottom-color: var(--sh-green);
}
.site-header .site-nav a.is-current {
color: var(--sh-fg);
border-bottom-color: var(--sh-fg);
}
.site-header .site-cta {
display: inline-flex; align-items: center; gap: 10px;
padding: 10px 16px;
background: var(--sh-signal); color: #fff;
font-family: var(--sh-f-mono);
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
border: 2px solid var(--sh-signal);
text-decoration: none;
transition: transform 0.12s, box-shadow 0.12s;
}
.site-header .site-cta:hover {
transform: translate(-2px, -2px);
box-shadow: 4px 4px 0 var(--sh-fg);
}
.site-header .site-cta .arr {
display: inline-block; transition: transform 0.2s;
}
.site-header .site-cta:hover .arr {
transform: translateX(3px);
}
/* ============================================================
Mobile burger (через )
============================================================ */
.site-header .site-burger { display: none; }
@media (max-width: 900px) {
.site-header {
grid-template-columns: auto 1fr auto;
gap: 12px;
padding: 12px 16px;
}
.site-header .site-nav { display: none; }
.site-header .site-burger {
display: inline-block;
justify-self: end;
margin-right: 8px;
}
.site-header .site-burger summary {
list-style: none;
cursor: pointer;
width: 28px; height: 24px;
position: relative;
display: inline-block;
}
.site-header .site-burger summary::-webkit-details-marker { display: none; }
.site-header .site-burger summary::before,
.site-header .site-burger summary::after,
.site-header .site-burger summary > span {
content: "";
position: absolute;
left: 0; right: 0;
height: 2px;
background: var(--sh-fg);
transition: transform 0.2s, opacity 0.2s;
}
.site-header .site-burger summary::before { top: 4px; }
.site-header .site-burger summary > span { top: 11px; display: block; }
.site-header .site-burger summary::after { top: 18px; }
.site-header .site-burger[open] summary::before { transform: translateY(7px) rotate(45deg); }
.site-header .site-burger[open] summary > span { opacity: 0; }
.site-header .site-burger[open] summary::after { transform: translateY(-7px) rotate(-45deg); }
.site-header .site-burger .site-burger-panel {
position: fixed;
left: 0; right: 0; top: 56px;
background: var(--sh-bg);
border-bottom: 2px solid var(--sh-fg);
padding: 16px 16px 24px;
display: flex; flex-direction: column; gap: 10px;
font-family: var(--sh-f-mono);
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
z-index: 79;
max-height: calc(100vh - 56px);
overflow-y: auto;
}
.site-header .site-burger .site-burger-panel a {
color: var(--sh-fg-soft);
padding: 10px 0;
border-bottom: 1px solid var(--sh-hair);
text-decoration: none;
}
.site-header .site-burger .site-burger-panel a:hover,
.site-header .site-burger .site-burger-panel a.is-current {
color: var(--sh-fg);
}
.site-header .site-burger .site-burger-panel .sbp-section {
color: var(--sh-fg-mute);
font-size: 10px;
margin-top: 12px;
padding-bottom: 4px;
}
.site-header .site-burger .site-burger-panel .sbp-cta {
margin-top: 12px;
background: var(--sh-signal);
color: #fff;
padding: 12px 14px;
text-align: center;
border: 2px solid var(--sh-signal);
}
.site-header .site-cta {
padding: 8px 12px; font-size: 10px;
}
.site-header .site-cta .arr { display: none; }
}
@media (max-width: 560px) {
.site-header .site-cta {
/* На совсем маленьких — прячем CTA из шапки (есть в burger panel) */
display: none;
}
.site-header {
grid-template-columns: auto 1fr;
}
}