/* ========================================================================== CRDGAME HEADER NAV V5 PAGE — 60PX / SOLID NON-HOME / HOME TRANSPARENT version: 20260920_rewrite_2_material Полная замена старого /file/header/header-nav-v5-page.css Что исправляет: - реальная высота fixed-header = 60px, без скрытого/технического резерва 55px; - старые 115 / 96 / 88 / 78 / 76 сводятся к одной высоте 60px; - обычные generic/forum hero НЕ получают menu-offset от этого файла; - архивные NEWS/PUBL/Games Hub остаются сразу после 60px меню; - PUBL breadcrumbs чинятся отдельно; NEWS breadcrumbs не переопределяются; - Games Hub больше не держит margin-top:115px; - PUBL / NEWS / game sections / entry pages получают единый header offset; - desktop: меню + поиск + сообщения + профиль — одна центрированная группа; - mobile: поиск | логотип по центру | гамбургер; - при прокрутке фон меню становится плотнее и темнее. ========================================================================== */ /* ========================================================================== 0. ЕДИНАЯ ВЫСОТА МЕНЮ ========================================================================== */ html, html body, html body.tmpl_body { --crd-home-total-h: 60px !important; --crd-home-main-h: 60px !important; --crd-home-top-h: 0px !important; --crd-publ-menu-h: 60px !important; --crd-news-menu-h: 60px !important; --crdv0-total-h: 60px !important; --crdv0-bar-h: 60px !important; --crdv0-context-h: 0px !important; --crdv0-mobile-header-h: 60px !important; } /* ========================================================================== 1. САМ #top_network: ЖЁСТКО 60PX Высокая специфичность нужна, потому что на живом сайте ещё встречаются старые глобальные #top_network {... !important}. ========================================================================== */ html body.tmpl_body #top_network.crdnav5-header[data-crdnav5-header], html body #top_network.crdnav5-header[data-crdnav5-header] { --crdnav5-bar-h: 60px !important; --crdnav5-air-h: 0px !important; --crdnav5-total-h: 60px !important; position: fixed !important; z-index: 9000 !important; top: 0 !important; left: 0 !important; right: 0 !important; display: block !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: 60px !important; min-height: 60px !important; max-height: 60px !important; margin: 0 !important; padding: 0 !important; align-items: initial !important; justify-content: initial !important; flex-direction: initial !important; flex-wrap: initial !important; gap: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; overflow: visible !important; transform: none !important; isolation: isolate !important; } /* uCoz admin toolbar */ html body.uadm--fixed-body-top #top_network.crdnav5-header[data-crdnav5-header], .uadm--fixed-body-top #top_network.crdnav5-header[data-crdnav5-header] { top: 30px !important; } /* На случай старой технической вставки */ html body #top_network.crdnav5-header .crdnav5-air, html body #top_network.crdnav5-header > .crdnav5-air { display: none !important; width: 0 !important; height: 0 !important; min-width: 0 !important; min-height: 0 !important; max-width: 0 !important; max-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } /* Старые V0 правила иногда добавляли body padding 100/94/88px. Hero-страницы управляются ниже. Plain-page offset теперь только CSS. */ html body.tmpl_body { padding-top: 0 !important; } /* ========================================================================== 2. ВИДИМАЯ ПОЛОСА — РОВНО 60PX ВАЖНО: - базовый header-nav-v5.css уже задаёт #131313; - на ВСЕХ страницах кроме .page-home этот цвет не меняется; - только настоящая главная получает старую прозрачную полосу поверх hero; - никаких :has(hero) исключений для внутренних страниц больше нет. ========================================================================== */ html body #top_network.crdnav5-header .crdnav5-bar { position: relative !important; width: 100% !important; height: 60px !important; min-height: 60px !important; max-height: 60px !important; margin: 0 !important; padding: 0 !important; color: #ddcbad !important; background: #131313 !important; background-image: none !important; border: 0 !important; border-bottom: 1px solid #080808 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; transition: background-color .18s ease, border-color .18s ease, color .18s ease !important; } /* Только главная сохраняет прежнюю прозрачную полосу поверх hero. */ html body.page-home #top_network.crdnav5-header .crdnav5-bar { background: linear-gradient( 180deg, rgba(7, 7, 13, .66) 0%, rgba(7, 7, 13, .42) 100% ) !important; border-bottom-color: rgba(255,255,255,.035) !important; backdrop-filter: blur(3px) !important; -webkit-backdrop-filter: blur(3px) !important; } /* На внутренних страницах scroll НЕ меняет #131313. */ html body:not(.page-home) #top_network.crdnav5-header.is-scrolled .crdnav5-bar { background: #131313 !important; background-image: none !important; border-bottom-color: #080808 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* На главной оставляем прежнее плотное состояние при прокрутке. */ html body.page-home #top_network.crdnav5-header.is-scrolled .crdnav5-bar { background: #131313 !important; border-bottom-color: rgba(255,255,255,.055) !important; box-shadow: 0 1px 0 rgba(255,255,255,.025), 0 10px 30px rgba(0,0,0,.28) !important; backdrop-filter: blur(11px) saturate(.92) !important; -webkit-backdrop-filter: blur(11px) saturate(.92) !important; } /* ========================================================================== 3. HERO — СТРОГО СРАЗУ ПОСЛЕ 60PX MENU Никакого наложения hero под fixed-header. Никакого старого резерва 115px. ========================================================================== */ /* Архивные hero остаются сразу после fixed-menu. Правило ограничено archive_page и не затрагивает страницы материалов. */ html body.tmpl_body.archive_page .crd-module-hero:not(.crd-module-hero--generic):not(.crd-module-hero--forum) { --crd-module-hero-top: 60px !important; margin-top: 60px !important; } /* PUBL hero — усиливаем специфичность против поздних publ1 правил */ html body.tmpl_body.archive_page.crd-publ-page .crd-module-hero.crd-module-hero--publ.crd-module-hero--publ, html body.tmpl_body.archive_page.crd-publ-page.crd-publ-home .crd-module-hero.crd-module-hero--publ.crd-module-hero--publ, html body.tmpl_body.archive_page.crd-publ-page.crd-publ-section .crd-module-hero.crd-module-hero--publ.crd-module-hero--publ, html body.tmpl_body.archive_page.crd-publ-page.crd-publ-category .crd-module-hero.crd-module-hero--publ.crd-module-hero--publ { --crd-module-hero-top: 60px !important; margin-top: 60px !important; margin-bottom: 0 !important; } /* NEWS game-section / one-page hero. Крошки NEWS НЕ трогаем: их текущая логика уже работает правильно. */ html body.tmpl_body.archive_page.crd-one-page .crd-module-hero.crd-game-section-hero.crd-game-section-hero, html body.tmpl_body.archive_page.crd-one-page.crd-news-game-section .crd-module-hero.crd-game-section-hero.crd-game-section-hero, html body.tmpl_body.archive_page.crd-one-page.crd-news-category-section .crd-module-hero.crd-game-section-hero.crd-game-section-hero, html body.tmpl_body.archive_page.crd-one-page.crd-news-crimson-section .crd-module-hero.crd-game-section-hero.crd-game-section-hero { --crd-module-hero-top: 60px !important; margin-top: 60px !important; margin-bottom: 0 !important; } /* GAMES HUB — hero начинается сразу под общей шапкой */ html.crd-games-page-html body.tmpl_body #crdGamesHub .crd-games-hero, html.crd-games-page-html body #crdGamesHub .crd-games-hero, html body.tmpl_body:has(#crdGamesHub) #crdGamesHub .crd-games-hero, html body:has(#crdGamesHub) #crdGamesHub .crd-games-hero { margin-top: 0 !important; } /* ========================================================================== 4. PUBL BREADCRUMBS — ФИКС ТОЛЬКО ДЛЯ МОДУЛЯ PUBL Hero уже начинается на y=60, сразу после fixed-menu. Значит breadcrumbs должны быть top:0 ВНУТРИ hero. NEWS здесь намеренно не указан вообще — его рабочую геометрию не трогаем. ========================================================================== */ html body.tmpl_body.archive_page.crd-publ-page .crd-module-hero.crd-module-hero--publ .crd-news-breadcrumbs.crd-news-breadcrumbs, html body.tmpl_body.archive_page.crd-publ-page.crd-publ-home .crd-module-hero.crd-module-hero--publ .crd-news-breadcrumbs.crd-news-breadcrumbs, html body.tmpl_body.archive_page.crd-publ-page.crd-publ-section .crd-module-hero.crd-module-hero--publ .crd-news-breadcrumbs.crd-news-breadcrumbs, html body.tmpl_body.archive_page.crd-publ-page.crd-publ-category .crd-module-hero.crd-module-hero--publ .crd-news-breadcrumbs.crd-news-breadcrumbs, html.crd-publ-game-7 body.tmpl_body.archive_page.crd-publ-page .crd-module-hero.crd-module-hero--publ .crd-news-breadcrumbs.crd-news-breadcrumbs, html body.tmpl_body.archive_page.crd-publ-page.crd-publ-game-7 .crd-module-hero.crd-module-hero--publ .crd-news-breadcrumbs.crd-news-breadcrumbs, html body.tmpl_body.archive_page.crd-publ-page .crd-module-hero.crd-module-hero--publ.crd-publ-game-7 .crd-news-breadcrumbs.crd-news-breadcrumbs { position: absolute !important; z-index: 80 !important; top: 0 !important; left: 0 !important; right: auto !important; bottom: auto !important; margin-top: 0 !important; transform: none !important; visibility: visible !important; opacity: 1 !important; } /* ========================================================================== 5. PUBL HERO CONTENT AXIS Hero сам уже стоит после 60px меню, поэтому внутреннему wrap второй menu-offset НЕ нужен. ========================================================================== */ html body.tmpl_body.archive_page.crd-publ-page .crd-module-hero.crd-module-hero--publ .crd-module-hero__wrap { top: 0 !important; } /* ========================================================================== 6. PLAIN PAGES БЕЗ HERO — OFFSET СРАЗУ, БЕЗ JS ========================================================================== */ html body.tmpl_body:not(.page-home):not(.crd-vulkk-entry):not(:has(.crd-module-hero)):not(:has(.pa-entry-hero)):not(:has(.e26-entry-cover)):not(:has(#crdHomeClean)):not(:has(.crd0-home)):not(:has(.crd-home-hero)):not(:has(.crd-games-hero)):not(:has(#crdGamesHub)):not(:has(#crdArchiveContext)) { padding-top: 60px !important; } /* ========================================================================== 6B. СТРАНИЦЫ МАТЕРИАЛОВ V8 — НИКАКОГО ВТОРОГО HEADER OFFSET Материал уже сам резервирует полный fixed-stack: brandbar + menu через .crd-vk-material { margin-top: ... }. Поэтому общий plain-page padding-top:60px здесь запрещён. Важно: селектор намеренно повторяет высокую специфичность plain-page rule, чтобы старые/global !important не возвращали пустую полосу высотой меню. ========================================================================== */ html body.tmpl_body.crd-vulkk-entry { padding-top: 0 !important; } html body.tmpl_body.crd-vulkk-entry #casing { margin-top: 0 !important; padding-top: 0 !important; } /* ========================================================================== 6A. ОБЫЧНЫЕ GENERIC / FORUM HERO — БЕЗ ДВОЙНОГО ОТСТУПА crd-module-hero.css сам задаёт: margin: var(--crd-module-hero-top) auto ... Поэтому на страницах, где есть generic/forum hero: - body НЕ получает ещё +60px сверху; - сам hero получает ровно margin-top:60px; - результат: меню 60px -> hero сразу впритык, без пустой полосы. ========================================================================== */ html body.tmpl_body:not(.archive_page):has(.crd-module-hero--generic), html body.tmpl_body:not(.archive_page):has(.crd-module-hero--forum) { padding-top: 0 !important; } html body.tmpl_body:not(.archive_page) .crd-module-hero.crd-module-hero--generic, html body.tmpl_body:not(.archive_page) .crd-module-hero.crd-module-hero--forum, html body.tmpl_body.module_forum .crd-module-hero.crd-module-hero--forum { --crd-module-hero-top: 60px !important; margin-top: 60px !important; margin-left: auto !important; margin-right: auto !important; } /* crd-module-hero.css на <=768px возвращает 76px. Здесь намеренно удерживаем реальные 60px нового меню. */ @media (max-width: 768px) { html body.tmpl_body:not(.archive_page) .crd-module-hero.crd-module-hero--generic, html body.tmpl_body:not(.archive_page) .crd-module-hero.crd-module-hero--forum, html body.tmpl_body.module_forum .crd-module-hero.crd-module-hero--forum { --crd-module-hero-top: 60px !important; margin-top: 60px !important; } } /* ========================================================================== 7. DESKTOP — PRIMARY + SEARCH + PM + PROFILE В ОДНОМ ЦЕНТРЕ ========================================================================== */ @media (min-width: 1401px) { html body #top_network.crdnav5-header .crdnav5-inner { display: flex !important; align-items: stretch !important; justify-content: center !important; width: 100% !important; max-width: none !important; height: 60px !important; margin: 0 !important; padding: 0 14px !important; gap: 0 !important; } html body #top_network.crdnav5-header .crdnav5-primary { position: static !important; display: flex !important; align-items: stretch !important; flex: 0 0 auto !important; width: max-content !important; min-width: 0 !important; max-width: none !important; height: 60px !important; margin: 0 !important; padding: 0 !important; } html body #top_network.crdnav5-header .crdnav5-tools { position: static !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; z-index: 30 !important; display: flex !important; align-items: stretch !important; justify-content: flex-start !important; flex: 0 0 auto !important; width: auto !important; height: 60px !important; margin: 0 !important; padding: 0 !important; gap: 0 !important; transform: none !important; } html body #top_network.crdnav5-header .crdnav5-pm { display: inline-flex !important; } html body #top_network.crdnav5-header .crdnav5-profile__name, html body #top_network.crdnav5-header .crdnav5-profile__arrow { display: block !important; } html body #top_network.crdnav5-header .crdnav5-profile__toggle { width: auto !important; min-width: 0 !important; max-width: none !important; height: 60px !important; padding: 0 12px 0 8px !important; } html body #top_network.crdnav5-header .crdnav5-tool, html body #top_network.crdnav5-header .crdnav5-login { height: 60px !important; min-height: 60px !important; max-height: 60px !important; } html body #top_network.crdnav5-header .crdnav5-tool { width: 48px !important; min-width: 48px !important; max-width: 48px !important; } html body #top_network.crdnav5-header .crdnav5-tools::before { content: "" !important; display: block !important; flex: 0 0 8px !important; width: 8px !important; height: 60px !important; } /* Профильная выпадайка позиционируется JS от реальной кнопки профиля */ html body #top_network.crdnav5-header .crdnav5-account-panel { top: 60px !important; right: auto !important; left: var(--crdnav5-account-panel-left, 12px) !important; } } /* ========================================================================== 8. DROPDOWN / MEGA WINDOWS — СРАЗУ ПОД 60PX BAR ========================================================================== */ html body #top_network.crdnav5-header .crdnav5-games-panel, html body #top_network.crdnav5-header .crdnav5-account-panel { top: 60px !important; } /* ========================================================================== 9. MOBILE — ПОИСК | ЛОГО | ГАМБУРГЕР ========================================================================== */ @media (max-width: 1400px) { html body #top_network.crdnav5-header[data-crdnav5-header] { height: 60px !important; min-height: 60px !important; max-height: 60px !important; } html body #top_network.crdnav5-header .crdnav5-inner { position: relative !important; display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; height: 60px !important; margin: 0 !important; padding: 0 !important; } html body #top_network.crdnav5-header .crdnav5-tools { position: static !important; display: contents !important; } html body #top_network.crdnav5-header .crdnav5-search { position: relative !important; order: 1 !important; flex: 0 0 60px !important; width: 60px !important; min-width: 60px !important; max-width: 60px !important; height: 60px !important; } html body #top_network.crdnav5-header .crdnav5-mobile-brand { position: absolute !important; z-index: 5 !important; top: 0 !important; left: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 160px !important; height: 60px !important; margin: 0 !important; padding: 0 !important; transform: translateX(-50%) !important; } html body #top_network.crdnav5-header .crdnav5-mobile-toggle { position: relative !important; order: 3 !important; flex: 0 0 60px !important; width: 60px !important; min-width: 60px !important; max-width: 60px !important; height: 60px !important; } html body #top_network.crdnav5-header .crdnav5-mobile-panel { top: 60px !important; height: calc(100dvh - 60px) !important; max-height: calc(100dvh - 60px) !important; } /* PUBL: hero уже находится под 60px mobile bar, поэтому top:0 внутри hero. */ html body.tmpl_body.archive_page.crd-publ-page .crd-module-hero.crd-module-hero--publ .crd-news-breadcrumbs.crd-news-breadcrumbs { top: 0 !important; margin-top: 0 !important; transform: none !important; } } /* ========================================================================== 10. EXTRA NARROW ========================================================================== */ @media (max-width: 420px) { html body #top_network.crdnav5-header .crdnav5-mobile-brand { width: 148px !important; } }