/* ============================================================ Balance Codex — Chrome (Modern Editorial, July 2026 · 2.8.0) ------------------------------------------------------------ Global header + footer + shared button/lang atoms. Class names are taken VERBATIM from the approved prototypes (compatibility-modern-editorial-*-v2.html), so page markup built in those prototypes ports to the theme one-to-one: .site-header .header-inner .brand .main-nav .nav-group .nav-trigger .nav-dropdown .header-actions .lang .menu-button .button(.primary/.oxide/.light) .footer .footer-grid .footer-brand(-col) .footer-tagline .footer-seo .footer-contact .footer-bottom .footer-legal The mobile menu is the header's own collapsed nav (.main-nav.is-open under 1100px) — the separate full-screen overlay of the first system is retired. ============================================================ */ /* ─── container ─────────────────────────────────────────── */ .container{width:min(calc(100% - 48px),1420px);margin-inline:auto} /* ─── shared atoms ──────────────────────────────────────── */ .button{display:inline-flex;align-items:center;justify-content:center;gap:14px; min-height:52px;padding:0 25px;border:1px solid var(--color-charcoal); font-family:var(--font-body);font-size:12px;letter-spacing:.08em; text-transform:uppercase;text-decoration:none;color:var(--color-charcoal); background:transparent;cursor:pointer;transition:.22s;font-size:var(--type-label)} .button:hover{transform:translateY(-2px)} .button.primary{background:var(--color-charcoal);color:var(--color-card)} .button.oxide{background:var(--color-oxide);border-color:var(--color-oxide);color:var(--white)} .button.light{border-color:var(--on-dark-line);color:var(--white);background:transparent} .lang{display:flex;gap:5px;align-items:center;font-family:var(--font-body); font-size:var(--type-small);letter-spacing:.07em;color:var(--color-charcoal-soft)} .lang a{display:inline-flex;align-items:center;justify-content:center; min-width:34px;height:34px;padding:0 7px;border:1px solid transparent; text-decoration:none;color:inherit;transition:.2s} .lang a:hover{color:var(--color-charcoal);border-color:var(--line)} .lang a.is-active{color:var(--color-charcoal);font-weight:700; border-color:var(--color-charcoal);background:var(--color-card)} /* ─── anchor offset under the sticky header ─────────────── */ /* The header is sticky and 84px tall, so a plain #fragment jump parks the target's first 84px underneath it (seen first on /ru/#compatibility). scroll-padding on the ROOT fixes every anchor on the site at once — nav items, footer links, ToC — with 24px of air below the header. Per-element scroll-margin hacks are retired (they would ADD to this). Smooth scrolling is the v12 behaviour, gated behind prefers-reduced-motion; base.css keeps `auto` as the reduced-motion default. */ html{scroll-padding-top:108px} @media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} } /* ─── header ────────────────────────────────────────────── */ .site-header{position:sticky;top:0;z-index:50; background:var(--veil-paper);backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border-bottom:1px solid transparent;transition:.25s} .site-header.is-scrolled{border-bottom-color:var(--line)} .header-inner{height:84px;display:grid;grid-template-columns:1fr auto 1fr; align-items:center;gap:30px} .brand{font-family:var(--font-serif);font-weight:400;font-size:26px;letter-spacing:-.025em; color:var(--color-charcoal);text-decoration:none;white-space:nowrap} .main-nav{display:flex;align-items:center;gap:26px;font-size:var(--type-label); letter-spacing:.09em;text-transform:uppercase} .main-nav>a,.nav-trigger{position:relative;white-space:nowrap; color:var(--color-charcoal);text-decoration:none} .main-nav>a::after,.nav-trigger::after{content:"";position:absolute;left:0;right:100%; bottom:-7px;height:1px;background:var(--color-oxide);transition:.25s} .main-nav>a:hover::after,.nav-trigger:hover::after, .nav-group:focus-within .nav-trigger::after{right:0} .main-nav>a.is-current{color:var(--color-charcoal)} .main-nav>a.is-current::after{right:0;bottom:-18px;height:2px;left:0} .nav-group{position:relative;display:flex;align-items:center} .nav-trigger{display:inline-flex;align-items:center;gap:7px} .nav-trigger::before{content:"";order:2;width:5px;height:5px; border-right:1px solid currentColor;border-bottom:1px solid currentColor; transform:rotate(45deg) translateY(-2px);opacity:.6} .nav-dropdown{position:absolute;top:calc(100% + 23px);left:-24px;width:300px; padding:18px 22px;background:var(--color-card);border:1px solid var(--line); box-shadow:0 22px 55px var(--line);opacity:0;visibility:hidden; transform:translateY(8px);transition:.2s;z-index:60} .nav-group:hover .nav-dropdown,.nav-group:focus-within .nav-dropdown{ opacity:1;visibility:visible;transform:none} .nav-dropdown a{display:block;padding:9px 0;font-size:var(--type-small);letter-spacing:.05em; text-transform:none;color:var(--color-charcoal);text-decoration:none; border-bottom:1px solid var(--line-faint)} .nav-dropdown a:last-child{border-bottom:0} .nav-dropdown a:hover{color:var(--color-oxide)} .header-actions{justify-self:end;display:flex;align-items:center;gap:20px} .site-header .header-actions .button.primary{width:164px;flex:0 0 164px; padding-left:16px;padding-right:16px; background:var(--color-blue-slate);border-color:var(--color-blue-slate);color:var(--white)} .site-header .header-actions .button.primary:hover{background:var(--blue);border-color:var(--blue)} .menu-button{display:none;border:0;background:transparent;cursor:pointer; font-family:var(--font-body);font-size:12px;letter-spacing:.08em; text-transform:uppercase;color:var(--color-charcoal)} /* ─── footer ────────────────────────────────────────────── */ .footer{padding:58px 0 24px;background:var(--color-blue-slate);color:var(--blue-wash)} .footer-grid{display:grid; grid-template-columns:minmax(300px,1.45fr) repeat(4,minmax(155px,.78fr));gap:38px} .footer h4{margin:0 0 18px;font-family:var(--font-body);font-size:var(--type-label); letter-spacing:.12em;text-transform:uppercase;color:var(--blue-line-strong)} .footer a{display:block;margin:9px 0;color:var(--blue-tint);line-height:1.35;text-decoration:none} .footer a:hover{color:var(--oxide-light)} .footer-brand{font-family:var(--font-serif);font-weight:400;font-size:var(--type-card);line-height:1.08;letter-spacing:-.02em} .footer-tagline{margin:13px 0 16px;font-family:var(--font-body);font-style:normal;font-weight:400; font-size:var(--type-body);line-height:1.55;color:var(--paper)} .footer-seo{max-width:390px;color:var(--blue-line);font-size:var(--type-small);line-height:1.65;margin:0} .footer-contact{margin-top:24px} .footer-contact-label{display:block;margin-bottom:8px;font-family:var(--font-body); font-size:var(--type-label);letter-spacing:.12em;text-transform:uppercase;color:var(--blue-line-strong)} .footer-contact a{display:inline-block;margin:0;text-decoration:underline; text-underline-offset:4px} .footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:28px; margin-top:38px;padding-top:20px;border-top:1px solid var(--on-dark-faint); font-family:var(--font-body);font-size:var(--type-label);line-height:1.5;color:var(--blue-line)} /* 2.27.0: подвал перешёл с ручных на wp_nav_menu(), который печатает