@font-face { font-family: "Calibri"; src: url(../font/Calibri-Bold.woff2) format("woff2"); font-weight: bold; font-style: normal; font-display: swap; } @font-face { font-family: "Arial"; src: url(../font/ArialMT.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Arial"; src: url(../font/Arial-BoldMT.woff2) format("woff2"); font-weight: bold; font-style: normal; font-display: swap; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* Reset скоупится под корневую обёртку темы (.shagikon), чтобы не задеть админ-бар WordPress (dashicons/раскладку) и вывод плагинов (CF7) вне обёртки. Набор свойств сохранён 1:1 с вёрсткой — изменён только селектор. */ body { margin: 0; } .shagikon, .shagikon * { margin: 0; padding: 0; box-sizing: border-box; text-decoration: none; color: inherit; font-family: inherit; } /* Обёртка прозрачна для раскладки: её прямые дети (header/container/footer) становятся детьми , поэтому body-flex вёрстки (прижатие футера вниз на каталоге) работает как в оригинале. Скоуп reset и защита админ-бара сохраняются — селектор .shagikon * не зависит от display, а #wpadminbar лежит вне обёртки. */ .shagikon { display: contents; } .shagikon ul, .shagikon ol { list-style: none; } /* карточка-ссылка оборачивает блочный контент — делаем её блоком, чтобы инлайн- обёртка не искажала hover-область и раскладку (Фаза 6: точка-маркер сравнения вынесена из ссылки, чтобы клик по ней не открывал карточку — ТЗ п.5) */ .projects-item-link { display: block; } /* a11y (аудит F-12): вёрстка гасит outline у поля поиска, точки сравнения и ползунков (outline:none) и не даёт им никакого фокус-стиля. Возвращаем видимый индикатор ТОЛЬКО для клавиатуры (:focus-visible) — на мышь/тап не влияет, вид вёрстки сохранён (WCAG 2.4.7). Специфичность 0,3,x перебивает outline:none. Поле поиска исключено (корректировки-04, п.4.3): заказчик просил убрать его фокус-обводку — не возвращать. */ .shagikon .projects-item-compare:focus-visible, .shagikon .range-input:focus-visible { outline: 2px solid var(--color-dark); outline-offset: 2px; } /* Автозаполнение не должно перекрашивать тёмное поле поиска (корректировки-04, 4.4). */ .shagikon .sidebar-search input:-webkit-autofill, .shagikon .sidebar-search input:-webkit-autofill:focus { -webkit-text-fill-color: #c8c8c8; -webkit-box-shadow: 0 0 0 1000px black inset; caret-color: #c8c8c8; } :root { --font-arial: "Arial"; --font-calibri: "Calibri"; --color-light: #ebecec; --color-grey: #595b61; --color-dark: #2c2e35; --color-pink: #ffadb2; } /* ===== Скроллбар страницы ===== бегунок и кнопки — var(--color-dark) (rgb 44,46,53), подложка — серый body */ /* Firefox (кнопок не поддерживает) */ html { scrollbar-width: thin; scrollbar-color: var(--color-dark) #c8c8c8; } /* Chrome, Safari, Edge */ html::-webkit-scrollbar { width: 5.6px; height: 5.6px; } html::-webkit-scrollbar-track { background: #c8c8c8; } html::-webkit-scrollbar-thumb { background-color: var(--color-dark); border-radius: 2.8px; } /* кнопки со стрелками — тёмный треугольник на сером, по одной с каждого конца. Нужен именно :single-button, иначе webkit одиночные кнопки не рисует. (Safari и Firefox кнопки скроллбара не поддерживают.) */ html::-webkit-scrollbar-button { display: none; } html::-webkit-scrollbar-button:single-button { display: block; height: 10px; background: #c8c8c8 center / contain no-repeat; } html::-webkit-scrollbar-button:single-button:vertical:decrement { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2012%2012'%3E%3Cpath%20d='M6,3L10.5,9L1.5,9Z'%20fill='%232c2e35'/%3E%3C/svg%3E"); } html::-webkit-scrollbar-button:single-button:vertical:increment { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2012%2012'%3E%3Cpath%20d='M6,9L1.5,3L10.5,3Z'%20fill='%232c2e35'/%3E%3C/svg%3E"); } .footer { font-family: var(--font-arial); font-weight: bold; position: relative; bottom: 0; left: 0; width: 100%; height: clamp(28px, 2vw, 50px); display: flex; align-items: center; justify-content: space-between; padding-inline: clamp(28px, 2vw, 50px); background-color: var(--color-light); color: var(--color-dark); font-size: clamp(11px, 0.78vw, 20px); line-height: 100%; } .footer-contacts { display: flex; align-items: center; gap: clamp(60px, 4.28vw, 110px); } .footer-social img { width: clamp(40px, 2.85vw, 73px); height: clamp(13px, 1vw, 25px); } @media screen and (max-width: 768px) { .footer-copyright { display: none; } .footer-contacts { width: 100%; justify-content: space-between; gap: 0; } } /* ────────────────────────────────────────────────────────────────────────── Тост-подсказка при копировании контакта (mailto/tel). WP-фича (корр-04 п.5): на десктопе mailto/tel часто не открывают приложение (нет назначенного в ОС обработчика), поэтому клик по адресу/телефону копирует его в буфер и показывает эту подсказку. В эталоне html/ ссылки нативные, без JS. ────────────────────────────────────────────────────────────────────────── */ .copy-toast { position: fixed; left: 50%; bottom: clamp(20px, 4vw, 48px); transform: translate(-50%, 16px); z-index: 9999; max-width: min(90vw, 460px); padding: clamp(10px, 1vw, 15px) clamp(18px, 1.6vw, 30px); background-color: var(--color-dark); color: var(--color-light); font-family: var(--font-arial); font-size: clamp(13px, 0.95vw, 17px); font-weight: bold; line-height: 1.3; text-align: center; border-radius: 8px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28); opacity: 0; pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease; } .copy-toast--visible { opacity: 1; transform: translate(-50%, 0); } @media (prefers-reduced-motion: reduce) { .copy-toast { transition: opacity 0.2s ease; transform: translate(-50%, 0); } }