/* ══════════════════════════════════════════════════════════════════════════ * MAK-1006 — страница 404, вариант A «Глаза ищут» * * Средний ноль в «404» — фирменный знак сайта (оранжевый круг с парой глаз), * выросший до кегля заголовка. Зрачки следят за курсором (js/error-404.js), * без JS просто стоят ровно — страница остаётся полностью рабочей. * * Токены сняты замером живого стенда (спека MAK-1005): * кремовый #F5F0E8 чернила #1A1A1A оранжевый #FA821D * кнопки 44px / радиус 16 / Poppins 16-400 / трекинг −0.15px * * Файл подключается САЙТОВО (include/error-404.php): ajax-навигация темы * не переносит из ответа, а на 404 можно попасть переходом. * Все правила заперты внутрь #hero.error — на других страницах мертвы. * ══════════════════════════════════════════════════════════════════════════ */ /* ── Холст ──────────────────────────────────────────────────────────────── */ /* * Тема ставила герою 404 фиксированную высоту и position:fixed — из-за этого * заголовок, подзаголовок и кнопка стояли в одной точке и наезжали друг на * друга. Возвращаем нормальный поток: центрирование флексом, высота от * содержимого, но не меньше экрана. */ #clapat-page-content #hero.error, #clapat-page-content #hero.error #hero-styles { position: relative; height: auto; min-height: calc(100vh - 120px); } #clapat-page-content #hero.error #hero-styles { display: flex; align-items: center; justify-content: center; padding: 40px 0 56px; box-sizing: border-box; } #clapat-page-content #hero.error #hero-caption { position: relative; top: auto; bottom: auto; left: auto; right: auto; transform: none; width: 100%; } #clapat-page-content #hero.error #hero-caption .inner { display: block; vertical-align: baseline; height: auto; } #clapat-page-content #hero.error .b404 { width: 100%; max-width: 1100px; margin: 0 auto; text-align: center; color: #1A1A1A; } /* ── Надстрочник ────────────────────────────────────────────────────────── */ #clapat-page-content #hero.error .b404-kicker { font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 500; line-height: 1.2; letter-spacing: .16em; text-transform: uppercase; color: #1A1A1A; opacity: .45; margin: 0 0 clamp(20px, 4vw, 40px); } /* ── Строка «4 ◉ 4» ─────────────────────────────────────────────────────── */ #clapat-page-content #hero.error .b404-numeral { display: flex; align-items: center; justify-content: center; gap: clamp(4px, 1.2vw, 14px); /* 30vw, а не 26: на 360–390 знак при 26vw давал ~100px и терялся в поле. */ font-size: clamp(96px, 30vw, 260px); line-height: .84; margin: 0; -webkit-user-select: none; user-select: none; } #clapat-page-content #hero.error .b404-numeral span { /* Poppins 600 — вес, который тема уже грузит. 700 не подключён. */ font-family: 'Poppins', sans-serif; font-weight: 600; letter-spacing: -0.04em; color: #1A1A1A; } #clapat-page-content #hero.error .b404-eyes { width: .78em; height: .78em; flex: 0 0 auto; display: block; /* Кружок садится на оптическую середину цифр, а не на baseline. */ margin-top: -.04em; } /* ── Текст ──────────────────────────────────────────────────────────────── */ #clapat-page-content #hero.error .b404-title.hero-title { font-family: 'Playfair Display', serif; font-weight: 500; font-size: clamp(28px, 5vw, 52px); line-height: 1.12; letter-spacing: -0.01em; color: #1A1A1A; text-transform: none; margin: clamp(28px, 5vw, 52px) 0 0; padding: 0; width: auto; max-width: none; } #clapat-page-content #hero.error .b404-title.hero-title span { display: block; color: inherit; } #clapat-page-content #hero.error .b404-sub { position: relative; bottom: auto; font-family: 'Poppins', sans-serif; font-size: clamp(15px, 1.4vw, 18px); font-weight: 400; line-height: 1.55; letter-spacing: -0.15px; color: #1A1A1A; opacity: .68; max-width: 46ch; width: auto; margin: 16px auto 0; text-transform: none; } #clapat-page-content #hero.error .b404-sub span { display: block; color: inherit; } /* Адрес, по которому пришли. Помогает и владельцу, и поддержке. */ #clapat-page-content #hero.error .b404-path { font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 400; line-height: 1.4; letter-spacing: -0.15px; color: #1A1A1A; opacity: .38; margin: 28px 0 0; word-break: break-all; } /* ── Кнопки ─────────────────────────────────────────────────────────────── */ /* * Геометрия один в один с «Let's Talk» из шапки (style.css .button-icon-link): * высота 44, радиус 16, заливка #FA821D, рамка 2px того же цвета, чёрный текст. * На hover — чёрная заливка и белый текст; толщина рамки не меняется, кнопка * не прыгает. */ #clapat-page-content #hero.error .b404-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin-top: clamp(28px, 4vw, 40px); opacity: 1; } #clapat-page-content #hero.error .b404-button { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 25px; border-radius: 16px; box-sizing: border-box; font-family: 'Poppins', sans-serif; font-size: 16px; font-weight: 400; line-height: 1; letter-spacing: -0.15px; white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color .25s ease, border-color .25s ease, color .25s ease; } #clapat-page-content #hero.error .b404-button--primary { background-color: #FA821D; border: 2px solid #FA821D; color: #000000; } #clapat-page-content #hero.error .b404-button--secondary { background-color: transparent; border: 1px solid #FA821D; color: #1A1A1A; } #clapat-page-content #hero.error .b404-button--primary:hover, #clapat-page-content #hero.error .b404-button--primary:focus-visible { background-color: #000000; border-color: #000000; color: #FFFFFF; } #clapat-page-content #hero.error .b404-button--secondary:hover, #clapat-page-content #hero.error .b404-button--secondary:focus-visible { background-color: #000000; border-color: #000000; color: #FFFFFF; } #clapat-page-content #hero.error .b404-button:focus-visible { outline: 2px solid #1A1A1A; outline-offset: 3px; } /* ── Мобильные ──────────────────────────────────────────────────────────── */ @media only screen and (max-width: 1466px) { #clapat-page-content #hero.error, #clapat-page-content #hero.error #hero-styles { min-height: calc(100vh - 100px); } } @media only screen and (max-width: 1024px) { #clapat-page-content #hero.error, #clapat-page-content #hero.error #hero-styles { min-height: calc(100vh - 80px); } #clapat-page-content #hero.error #hero-styles { padding: 8px 0 32px; } #clapat-page-content #hero.error .b404-sub { max-width: 34ch; } } @media only screen and (max-width: 767px) { /* Палец, а не курсор: CTA во всю ширину колонкой. */ #clapat-page-content #hero.error .b404-cta { flex-direction: column; align-items: stretch; } #clapat-page-content #hero.error .b404-button { width: 100%; } } /* ── Движение ───────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { #clapat-page-content #hero.error .b404-button { transition: none; } }