/* ============================================================ Аливия — шапка, навигация и цепочка навигации. Файл подключается ПОСЛЕ css/aliviy-site-*.css и перекрывает его раздел «14. Шапка и подвал». Классы местами удвоены: тема Reboot печатает часть правил инлайном в , и при равной специфичности выигрывает она. ============================================================ */ /* ============================================================ 1. Полотно шапки Вместо плоской заливки — фирменный градиент с акцентным свечением в правом верхнем углу и лентой на нижней кромке. ============================================================ */ .site-header.site-header{ position:relative; z-index:900; padding-top:13px; padding-bottom:13px; background-color:#4C35DE; background-image: radial-gradient(130% 190% at 92% -60%,rgba(235,24,192,.40) 0%,rgba(235,24,192,0) 55%), radial-gradient(90% 165% at 6% 125%,rgba(112,93,229,.60) 0%,rgba(112,93,229,0) 62%), linear-gradient(104deg,#4529D8 0%,#4C35DE 42%,#6350E2 100%); box-shadow:0 14px 34px -28px rgba(20,11,64,.95); color:#fff; } /* фирменная лента — граница шапки и белого полотна страницы */ .site-header.site-header:after{ content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:linear-gradient(90deg,#4C35DE 0%,#705DE5 28%,#EB18C0 62%,#705DE5 100%); } .site-header-inner.site-header-inner{ position:relative; gap:16px; } @media (min-width:768px){ .site-header-inner.site-header-inner{ display:flex; align-items:center; justify-content:space-between; } } /* нижняя полоса навигации больше не выводится */ .header-separator{display:none} /* ============================================================ 2. Логотип и название ============================================================ */ .site-header .site-branding{ display:flex; align-items:center; gap:13px; /* место под гамбургер слева и поиск справа */ padding-left:52px; padding-right:52px; min-width:0; } @media (min-width:768px){ .site-header .site-branding{ padding-right:0; justify-content:flex-start; flex:0 1 auto; } } @media (min-width:992px){ .site-header .site-branding{padding-left:0} } /* Знак — фиолетово-розовый, и на фиолетовой шапке он бы утонул. Сажаем его на белый кружок: цвет логотипа сохраняется, форма рифмуется с белой кнопкой кабинета. Размеры заданы явно — без скачка вёрстки, пока грузится файл. */ .site-header .site-logotype{ position:relative; flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:46px; height:46px; margin:0; border-radius:50%; background:#fff; box-shadow:0 8px 18px -10px rgba(0,0,0,.75); line-height:0; transition:transform .25s ease,box-shadow .25s ease; } .site-header .site-logotype a{ position:relative; z-index:1; display:flex; align-items:center; justify-content:center; width:100%; height:100%; border-radius:50%; } .site-header .site-logotype img{ display:block; width:33px; height:33px; border-radius:0; box-shadow:none; } /* Наведение: лёгкий подъём и тонкое светлое кольцо. Розовое свечение отсюда убрано — на фиолетовой шапке оно читалось грязным пятном вокруг белого кружка. */ .site-header .site-branding:hover .site-logotype{ transform:scale(1.05); box-shadow:0 10px 22px -10px rgba(0,0,0,.8),0 0 0 4px rgba(255,255,255,.16); } .site-header .site-branding__body{ flex:0 1 auto; min-width:0; text-align:left; } .site-header .site-title.site-title{ margin:0; font-size:clamp(1.18rem,1rem + .55vw,1.5rem); font-weight:800; line-height:1.1; letter-spacing:-.02em; } .site-header .site-title.site-title a, .site-header .site-title.site-title a:hover{ color:#fff; text-decoration:none; } .site-header .site-description{ margin:3px 0 0; font-size:11px; font-weight:600; line-height:1.2; letter-spacing:.11em; text-transform:uppercase; color:rgba(255,255,255,.62); } /* ============================================================ 3. Меню шапки — пилюли с иконками Один ряд на все разделы: Инструменты, Блог, Тарифы, Отзывы и кнопка кабинета. ============================================================ */ .site-header .top-menu.top-menu{ display:none; margin:0 0 0 auto; font-size:1rem; font-weight:600; letter-spacing:0; text-transform:none; } @media (min-width:992px){ .site-header .top-menu.top-menu{display:block} } .site-header .top-menu ul{ display:flex; align-items:center; /* зазор не меньше 6px: при наведении соседние пилюли не должны слипаться */ gap:6px; margin:0; padding:0; list-style:none; } .site-header .top-menu ul li{ position:relative; margin:0; padding:0; } .site-header .top-menu ul li > a, .site-header .top-menu ul li > .removed-link{ position:relative; display:inline-flex; align-items:center; gap:8px; padding:9px 12px; background:none; border:1px solid transparent; border-radius:13px; color:rgba(255,255,255,.88); font-size:14.5px; font-weight:600; line-height:1.15; letter-spacing:0; white-space:nowrap; text-decoration:none; opacity:1; vertical-align:middle; transition:background-color .18s ease,border-color .18s ease,color .18s ease,transform .18s ease; } /* подчёркивания из темы и из aliviy-site-*.css здесь больше не нужны */ .site-header .top-menu ul li > a:before, .site-header .top-menu ul li > a:after, .site-header .top-menu ul li > .removed-link:before, .site-header .top-menu ul li > .removed-link:after{ content:none; display:none; } .site-header .top-menu ul li > a:hover, .site-header .top-menu ul li > a:focus-visible{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.18); color:#fff; transform:translateY(-1px); outline:none; } .site-header .top-menu ul li > a:active{transform:translateY(0)} /* текущий раздел отмечен постоянно */ .site-header .top-menu ul li.current-menu-item > a, .site-header .top-menu ul li.current-menu-item > .removed-link, .site-header .top-menu ul li.current-menu-ancestor > a, .site-header .top-menu ul li.current-menu-parent > a, .site-header .top-menu ul li.current-post-ancestor > a, .site-header .top-menu ul li.current-post-parent > a{ background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.26); color:#fff; } /* ---------- иконки пунктов ---------- */ .al-nav__ico{ flex:0 0 auto; display:inline-flex; width:19px; height:19px; opacity:.88; transition:opacity .18s ease; } .al-nav__ico svg{ display:block; width:100%; height:100%; } .al-nav__txt{display:inline-block} .site-header .top-menu ul li > a:hover .al-nav__ico, .site-header .top-menu ul li > a:focus-visible .al-nav__ico, .site-header .top-menu ul li.current-menu-item > a .al-nav__ico, .site-header .top-menu ul li.current-menu-item > .removed-link .al-nav__ico, .site-header .top-menu ul li.current-post-ancestor > a .al-nav__ico, .site-header .top-menu ul li.current-menu-parent > a .al-nav__ico{opacity:1} /* ---------- тарифы: коммерческий акцент ---------- Единственный пункт в акцентном цвете палитры: он ведёт к оплате, и его видно на любом фоне шапки. */ .site-header .top-menu ul li.al-nav--price > a, .site-header .top-menu ul li.al-nav--price > .removed-link{ background:linear-gradient(135deg,#EB18C0 0%,#FF00B2 100%); border-color:rgba(255,255,255,.30); color:#fff; box-shadow:0 10px 22px -14px rgba(235,24,192,.95); } .site-header .top-menu ul li.al-nav--price > a:hover, .site-header .top-menu ul li.al-nav--price > a:focus-visible{ background:linear-gradient(135deg,#FF00B2 0%,#FF45CB 100%); border-color:rgba(255,255,255,.48); color:#fff; box-shadow:0 15px 28px -14px rgba(235,24,192,1); } .site-header .top-menu ul li.al-nav--price .al-nav__ico{opacity:1} /* ---------- кабинет: единственный призыв к действию ---------- */ .site-header .top-menu ul li.al-nav-cta{margin-left:8px} .site-header .top-menu ul li.al-nav-cta > a, .site-header .top-menu ul li.al-nav-cta > .removed-link{ padding:9px 16px; background:#fff; border-color:#fff; color:#4C35DE; box-shadow:0 10px 22px -14px rgba(0,0,0,.9); } .site-header .top-menu ul li.al-nav-cta > a:hover, .site-header .top-menu ul li.al-nav-cta > a:focus-visible{ background:#F4F2FF; border-color:#F4F2FF; color:#3A28C4; box-shadow:0 14px 26px -14px rgba(0,0,0,.85); } .site-header .top-menu ul li.al-nav-cta .al-nav__ico{opacity:1} /* ---------- выпадающие подменю (на будущее) ---------- */ .site-header .top-menu ul li .sub-menu{ left:0; top:calc(100% + 9px); padding:6px; background:#fff; border:1px solid var(--al-line-soft); border-radius:16px; box-shadow:0 24px 48px -28px rgba(28,17,84,.6); } .site-header .top-menu ul li .sub-menu li > a, .site-header .top-menu ul li .sub-menu li > .removed-link{ display:flex; padding:10px 12px; border-radius:11px; color:var(--al-ink); font-size:14.5px; } .site-header .top-menu ul li .sub-menu li > a:hover{ background:var(--al-tint-100); border-color:transparent; color:var(--al-primary); transform:none; } /* ============================================================ 4. Поиск и гамбургер — стеклянные кнопки Эмодзи 🔍 и × из темы заменены своими SVG. ============================================================ */ .site-header .header-search{ flex:0 0 auto; margin-left:6px; } @media (max-width:767px){ .site-header .header-search{ position:absolute; top:50%; right:16px; margin:0; transform:translateY(-50%); } } .site-header .search-icon{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); border-radius:13px; font-size:0; line-height:0; transition:background-color .18s ease,border-color .18s ease,transform .18s ease; } .site-header .search-icon:hover{ background:rgba(255,255,255,.20); border-color:rgba(255,255,255,.30); transform:translateY(-1px); } .site-header .search-icon:before{ content:""; display:block; width:19px; height:19px; background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.8' cy='10.8' r='6.2'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3C/svg%3E") center/19px 19px no-repeat; } .site-header .search-icon.close:before{ background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6.5 6.5 17.5 17.5M17.5 6.5 6.5 17.5'/%3E%3C/svg%3E"); } .site-header .humburger{ display:flex; align-items:center; justify-content:center; width:40px; height:40px; top:50%; left:16px; transform:translateY(-50%); background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); border-radius:13px; transition:background-color .18s ease,border-color .18s ease; } .site-header .humburger:hover{ background:rgba(255,255,255,.20); border-color:rgba(255,255,255,.30); } .site-header .humburger span{ left:50%; width:18px; height:2px; margin-left:-9px; border-radius:2px; background:#fff; } .site-header .humburger span:first-child{top:13px;bottom:auto} .site-header .humburger span:nth-child(2){top:19px;margin-top:0} .site-header .humburger span:last-child{top:25px;bottom:auto} .site-header .humburger.open span:first-child{transform:translateY(6px) rotate(45deg)} .site-header .humburger.open span:last-child{transform:translateY(-6px) rotate(-45deg)} @media (min-width:992px){ .site-header .humburger{display:none} } /* ============================================================ 5. Мобильное меню Тема собирает его копией верхнего меню внутри .mobile-menu-placeholder — оформляем список карточками. ============================================================ */ .mobile-menu-placeholder{background:#fff} .mobile-menu-placeholder.open{ border-bottom:1px solid var(--al-line-soft); box-shadow:0 22px 44px -30px rgba(28,17,84,.75); } #site-navigation-mobile.main-navigation{ margin-bottom:0; background:#fff; } #site-navigation-mobile .main-navigation-inner{ padding-left:12px; padding-right:12px; } #site-navigation-mobile ul{ display:block; margin:0; padding:10px 0 14px; list-style:none; } #site-navigation-mobile ul li{ margin:0; padding:0; } #site-navigation-mobile ul li > a, #site-navigation-mobile ul li > .removed-link{ display:flex; align-items:center; gap:12px; margin:2px 0; padding:12px 14px; border:1px solid transparent; border-radius:14px; color:var(--al-ink); font-size:15.5px; font-weight:600; line-height:1.2; text-decoration:none; } #site-navigation-mobile ul li > a:before, #site-navigation-mobile ul li > a:after{ content:none; display:none; } #site-navigation-mobile ul li > a:hover, #site-navigation-mobile ul li > a:active{ background:var(--al-tint-100); color:var(--al-primary); } #site-navigation-mobile ul li .al-nav__ico{ width:21px; height:21px; color:var(--al-primary-soft); opacity:1; } #site-navigation-mobile ul li.current-menu-item > a, #site-navigation-mobile ul li.current-menu-item > .removed-link, #site-navigation-mobile ul li.current-menu-parent > a, #site-navigation-mobile ul li.current-post-ancestor > a, #site-navigation-mobile ul li.current-post-parent > a{ background:var(--al-tint-100); border-color:var(--al-line); color:var(--al-primary); } /* тарифы выделены тем же акцентом, что и в шапке на десктопе */ #site-navigation-mobile ul li.al-nav--price > a, #site-navigation-mobile ul li.al-nav--price > .removed-link, #site-navigation-mobile ul li.al-nav--price > a:hover{ background:linear-gradient(135deg,#EB18C0 0%,#FF00B2 100%); border-color:transparent; color:#fff; box-shadow:0 12px 24px -14px rgba(235,24,192,.95); } #site-navigation-mobile ul li.al-nav--price .al-nav__ico{color:#fff;opacity:1} #site-navigation-mobile ul li.al-nav-cta > a, #site-navigation-mobile ul li.al-nav-cta > .removed-link{ justify-content:center; margin-top:8px; background:var(--al-grad-btn); border-color:transparent; color:#fff; box-shadow:0 12px 24px -14px rgba(76,53,222,.9); } #site-navigation-mobile ul li.al-nav-cta > a:hover{ background:var(--al-grad-btn); color:#fff; } #site-navigation-mobile ul li.al-nav-cta .al-nav__ico{color:#fff} /* ============================================================ 6. Шапка следует за прокруткой (от 992px) Тема ставит #page{overflow:hidden} — это делает предка прокручиваемым блоком и ломает position:sticky. Меняем на overflow:clip: обрезка та же, но контейнер прокрутки не создаётся. Старые браузеры значение не понимают, остаётся hidden — шапка просто не липнет, вёрстка не страдает. ============================================================ */ @media (min-width:992px){ #page.site{overflow:clip} .site-header.site-header{ position:sticky; top:0; } .admin-bar .site-header.site-header{top:32px} /* якоря из содержания не должны прятаться под шапкой */ .entry-content [id], .taxonomy-description [id], .home-text [id]{scroll-margin-top:96px} } /* ============================================================ 7. Цепочка навигации Эмодзи в крошках остаются — они приходят из названий рубрик и заголовков и показываются в сниппетах поисковых систем. Меняем только оформление и разделитель. ============================================================ */ /* Отступ от шапки до крошек. У темы он был 30px и на мобильном выглядел ещё больше, потому что цепочка переносилась на две строки. Ужимаем — первый экран отдаём содержанию, а не воздуху. */ #content.site-content{padding-top:14px} .breadcrumb.breadcrumb{ margin:0 0 10px; font-size:13px; line-height:1.45; color:var(--al-ink-muted); opacity:1; } .breadcrumb.breadcrumb:hover{opacity:1} .breadcrumb.breadcrumb > span{ display:flex; flex-wrap:wrap; align-items:center; gap:1px; } .breadcrumb.breadcrumb a, .breadcrumb.breadcrumb span{ color:var(--al-ink-soft); font-weight:500; letter-spacing:0; text-transform:none; text-decoration:none; } .breadcrumb.breadcrumb a{ display:inline-flex; align-items:center; padding:3px 8px; border-radius:9px; transition:background-color .16s ease,color .16s ease; } .breadcrumb.breadcrumb a:hover, .breadcrumb.breadcrumb a:focus-visible{ background:var(--al-tint-100); color:var(--al-primary); outline:none; } .breadcrumb.breadcrumb .breadcrumb_last, .breadcrumb.breadcrumb .breadcrumb-item.breadcrumb_last{ padding:3px 8px; color:var(--al-ink); font-weight:600; } /* разделитель: свой шеврон вместо «»» */ .breadcrumb.breadcrumb .al-bc__sep{ display:inline-flex; align-items:center; justify-content:center; width:13px; height:13px; padding:0; color:#BDB6DC; } .breadcrumb.breadcrumb .al-bc__sep svg{ display:block; width:11px; height:11px; } /* запасной разделитель штатных крошек темы */ .breadcrumb.breadcrumb .breadcrumb-separator{ margin:0 3px; color:#BDB6DC; font-weight:400; } /* ============================================================ 8. Узкие экраны ============================================================ */ /* от 992 до 1199 контейнер всего 960px — ужимаем ряд */ @media (min-width:992px) and (max-width:1199px){ .site-header .site-description{display:none} .site-header .site-logotype{width:40px;height:40px} .site-header .site-logotype img{width:29px;height:29px} .site-header .top-menu ul{gap:4px} .site-header .top-menu ul li > a, .site-header .top-menu ul li > .removed-link{ gap:7px; padding:8px 10px; font-size:13.5px; } .site-header .top-menu ul li.al-nav-cta > a, .site-header .top-menu ul li.al-nav-cta > .removed-link{padding:8px 13px} .site-header .top-menu ul li.al-nav-cta{margin-left:6px} .al-nav__ico{width:18px;height:18px} .site-header .search-icon{width:38px;height:38px} } @media (max-width:767px){ .site-header.site-header{padding-top:11px;padding-bottom:11px} .site-header .site-logotype{width:42px;height:42px} .site-header .site-logotype img{width:30px;height:30px} /* на телефоне цепочка часто в две строки — держим её компактной, чтобы карточка чата поднималась выше */ #content.site-content{padding-top:10px} .breadcrumb.breadcrumb{ font-size:12.5px; line-height:1.35; margin-bottom:8px; } .breadcrumb.breadcrumb > span{gap:0} .breadcrumb.breadcrumb a, .breadcrumb.breadcrumb .breadcrumb_last{padding:2px 6px} .breadcrumb.breadcrumb .al-bc__sep{width:11px;height:11px} .breadcrumb.breadcrumb .al-bc__sep svg{width:10px;height:10px} } @media (max-width:420px){ .site-header .site-branding{ gap:10px; padding-left:48px; padding-right:48px; } .site-header .site-logotype{width:38px;height:38px} .site-header .site-logotype img{width:27px;height:27px} .site-header .site-title.site-title{font-size:1.08rem} .site-header .site-description{ font-size:10px; letter-spacing:.08em; } .site-header .search-icon, .site-header .humburger{width:38px;height:38px} .site-header .humburger{left:12px} .site-header .header-search{right:12px} .breadcrumb.breadcrumb a, .breadcrumb.breadcrumb .breadcrumb_last{padding:2px 6px} }