/* Аркона — внутренние страницы: Наши работы, Контакты, Стать партнёром, Избранное. Сетка 1920, контейнер 1280. Переиспользует токены и классы из tokens/base/layout/home. */ /* ---------- ОБЩЕЕ ---------- */ /* ВАЖНО: селектор обязан быть с тегом. WordPress вешает класс `page` на для любой обычной страницы, и голый `.page` красил отступ прямо на body: над шапкой появлялась полоса 64 px, а снизу лишние 130. */ section.page { padding-block: var(--sp-6) var(--sp-8); } /* Заголовок страницы: 32px Bold UPPERCASE (КОНТАКТЫ, ИЗБРАННОЕ, СТАТЬ ПАРТНЁРОМ) */ .page-title { font-size: var(--fs-h2); font-weight: 700; text-transform: uppercase; letter-spacing: var(--ls-wide); line-height: var(--lh-tight); } .page-title--center { text-align: center; } /* Подзаголовок секции: 32px SemiBold, обычный регистр, по центру (Как мы работаем?, Форма обратной связи, Свяжитесь с нами) */ .section-head { font-size: var(--fs-h2); font-weight: 600; line-height: var(--lh-tight); text-align: center; } .section-sub { max-width: 580px; margin: 16px auto 0; text-align: center; color: var(--ink); } /* Хлебные крошки */ .crumbs { font-size: 13px; color: var(--ink); margin-bottom: 20px; } .crumbs a { color: var(--ink); } .crumbs a:hover { color: var(--ink-muted); } .crumbs .sep { color: var(--ink-soft); margin: 0 6px; } .crumbs .cur { color: var(--ink-muted); } /* ---------- КАРТОЧКА ТОВАРА (каталог/избранное/рекомендации) ---------- */ .pgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; margin-top: var(--sp-4); } .pgrid + .pgrid { margin-top: 40px; } .rec-title { font-size: var(--fs-lead); /* 19px ~ 18.6 в макете */ font-weight: 700; line-height: var(--lh-tight); } .rec { margin-top: var(--sp-6); } .pcard { position: relative; display: flex; flex-direction: column; } .pcard__media { position: relative; display: block; aspect-ratio: 1 / 1; background: var(--placeholder); border-radius: 0; /* фото без скруглений */ overflow: hidden; } .pcard__media img { width: 100%; height: 100%; object-fit: cover; } .pcard__title { margin-top: 16px; font-size: var(--fs-base); line-height: 1.35; color: var(--ink); /* до двух строк, дальше многоточие; высота зарезервирована — цены на одном уровне */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(2 * 1.35em); } .pcard__price { margin-top: 12px; font-size: var(--fs-lead); /* 19px ~ 18.6 */ font-weight: 600; } /* Кнопка «в избранное» на карточке (localStorage) */ .pcard__fav { position: absolute; top: 10px; right: 10px; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; background: rgba(255, 255, 255, .9); color: var(--ink); /* В макете сердечка на карточке НЕТ — показываем только при наведении. Анимации при этом никакой (просьба клиента), просто появляется. */ opacity: 0; } .pcard:hover .pcard__fav, .pcard__fav:focus-visible, .pcard__fav[aria-pressed="true"] { opacity: 1; } .pcard__fav svg { width: 20px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; } .pcard__fav[aria-pressed="true"] svg { fill: var(--ink); } /* При наведении сердечко закрашивается #2C2C2C, без анимации */ .pcard__fav:hover svg, .pcard__fav:focus-visible svg { fill: var(--ink); stroke: var(--ink); } /* На узких экранах тач — кнопка всегда видна */ @media (hover: none) { } /* ---------- НАШИ РАБОТЫ (карточка работы) ---------- */ .work { display: grid; grid-template-columns: 619px minmax(0, 1fr); gap: 30px; align-items: start; margin-top: 24px; } .work__gallery { width: 619px; max-width: 100%; } .work__main { aspect-ratio: 1 / 1; border-radius: 0; /* фото без скруглений */ } .work__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 16px; } .work__thumb { aspect-ratio: 1 / 1; border-radius: 0; /* фото без скруглений */ cursor: pointer; } .work__title { font-size: var(--fs-h3); /* 24px */ font-weight: 600; text-transform: uppercase; letter-spacing: var(--ls-wide); line-height: var(--lh-tight); } .work__order { margin-top: 22px; } .work__desc { margin-top: 36px; } .work__desc p { margin-bottom: 18px; } .work__desc p:last-child { margin-bottom: 0; } /* ---------- КОНТАКТЫ ---------- */ .contacts-top { display: grid; /* в макете: колонка контактов 300 (x 314..614), карта 980 (x 614..1594), зазора нет */ grid-template-columns: 300px minmax(0, 980px); gap: 0; align-items: start; margin-top: var(--sp-5); } /* Замер по макету: адрес 343, e-mail 422, «Телефон:» 481, телефоны 510 и 531, «Мы в соцсетях» 597. Шаг между блоками 38, перед соцсетями больше. */ .cinfo__row { margin-bottom: 38px; } .cinfo__row:has(+ .cinfo__row .cinfo__socials), .cinfo__socials { margin-top: 0; } .cinfo__row:last-child { margin-bottom: 0; } .cinfo__row a { color: var(--ink); } .cinfo__row a:hover { color: var(--ink-muted); } .cinfo__label { margin-bottom: 8px; } .cinfo__soc { margin-top: 12px; } .cmap { aspect-ratio: 980 / 440; /* в макете карта ровно 980 x 440, было 545 по высоте */ border-radius: 0; /* фото без скруглений */ overflow: hidden; border: 1px solid var(--line); } .cmap iframe { width: 100%; height: 100%; border: 0; display: block; } /* Реквизиты */ .requisites { margin-top: var(--sp-8); } .requisites__title { font-size: var(--fs-h2); /* 32px, обычный регистр, слева */ font-weight: 700; line-height: var(--lh-tight); margin-bottom: var(--sp-4); } /* просьба клиента 30.08: у таблицы реквизитов нет верхней и нижней линий, остаются только разделители между строками */ .rtable { border-top: 0; } .rrow { display: grid; grid-template-columns: minmax(160px, 300px) minmax(0, 1fr); gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--line); } .rrow:last-child { border-bottom: 0; } .rrow__k { color: var(--ink); } .rrow__v { color: var(--ink); } /* Секция «Свяжитесь с нами» / «Форма обратной связи» на страницах */ .pform { margin-top: var(--sp-8); } /* Контакты: замер по макету. От последней строки реквизитов до «Свяжитесь с нами» 125 (было 306), от кнопки до подвала 189 (был 321). Отступы только для этой страницы, на «Стать партнёром» своя раскладка и там всё сходится. */ /* Шаблон page-kontakty.php подхватывается по слагу, поэтому класса page-template-page-kontakty у body НЕТ. Цепляемся за блок реквизитов. */ /* У блока формы свои padding 120/80 из секции главной, поверх них шёл ещё margin. По макету: от последней строки реквизитов до заголовка формы 69, от кнопки до подвала 189. */ section.page:has(.requisites) .pform { margin-top: 0; padding-top: 69px; padding-bottom: 16px; } section.page:has(.requisites) { padding-bottom: 62px; } /* ---------- СТАТЬ ПАРТНЁРОМ ---------- */ .steps { display: grid; grid-template-columns: 1fr 1fr; column-gap: 56px; row-gap: 52px; margin-top: var(--sp-6); } .step { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 24px; align-items: start; } .step__num { font-size: 118px; font-weight: 700; line-height: .8; color: var(--line); /* #E5E5E5 */ user-select: none; } .step__title { font-size: var(--fs-h3); /* 24px */ font-weight: 600; line-height: var(--lh-tight); margin-bottom: 12px; padding-top: 6px; } .step__text { font-size: 13px; line-height: 1.5; color: var(--ink); } .partner-form { margin-top: var(--sp-8); } /* ---------- ИЗБРАННОЕ ---------- */ /* В макете «Вернуться к покупкам» стоит на 208, заголовок на 248: сверху 28, между ними 40. Общий отступ страницы 64 сдвигал этот блок вниз. */ .wish__head { display: flex; flex-direction: column; gap: 23px; } body.woocommerce-cart section.page, body.page-template-page-izbrannoe section.page, section.page:has(.wish__head) { padding-top: 28px; } .wish-back { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink); align-self: flex-start; } .wish-back:hover { color: var(--ink-muted); } .wish-back svg { width: 6px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.4; } .wish__grid { margin-top: var(--sp-5); } .wish-empty__msg { margin-top: var(--sp-4); font-size: var(--fs-h3); /* 24px SemiBold */ font-weight: 600; color: var(--ink); } /* ---------- УВЕДОМЛЕНИЕ ФОРМЫ ---------- */ .form__note { max-width: 460px; margin: 0 auto var(--sp-3); padding: 14px 18px; border-radius: var(--radius-input); font-size: var(--fs-input); text-align: center; } .form__note--ok { background: #EEF6EE; color: #1E5C2E; border: 1px solid #CBE3CC; } .form__note--err { background: #FBECEC; color: #8A2020; border: 1px solid #EBCACA; } /* ---------- МОДАЛЬНОЕ ОКНО «ФОРМА ОБРАТНОЙ СВЯЗИ» ---------- */ .modal { position: fixed; inset: 0; z-index: 100; display: none; } .modal.is-open { display: block; } .modal__overlay { position: absolute; inset: 0; background: rgba(44, 44, 44, .5); } .modal__dialog { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(500px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto; background: var(--surface); border-radius: var(--radius); padding: 40px; } .modal__close { position: absolute; top: 16px; right: 16px; display: grid; place-items: center; width: 40px; height: 40px; color: var(--ink); } .modal__close svg { width: 18px; height: 18px; } .modal__head { text-align: center; margin-bottom: var(--sp-3); } .modal__title { font-size: var(--fs-h2); font-weight: 600; line-height: var(--lh-tight); } .modal__sub { margin-top: 12px; color: var(--ink-muted); font-size: var(--fs-input); } .modal .form { max-width: none; margin: 0; } .modal .form__row { margin-bottom: 16px; } /* ==================== АДАПТИВ ==================== */ @media (max-width: 1023px) { .pgrid { grid-template-columns: repeat(3, 1fr); gap: 24px; } .work { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; } .work__gallery { width: 100%; } .steps { column-gap: 32px; row-gap: 40px; } .step__num { font-size: 92px; } .contacts-top { grid-template-columns: 1fr; gap: 28px; } } @media (max-width: 767px) { .steps { grid-template-columns: 1fr; row-gap: 32px; } } /* На тач-экранах наведения нет, поэтому сердечко видно всегда */ @media (hover: none) { .pcard__fav { opacity: 1; } } @media (max-width: 599px) { .page { padding-block: var(--sp-4) var(--sp-6); } /* Заголовки страниц компактнее */ .page-title { font-size: 24px; } .section-head, .modal__title { font-size: 22px; } .wish-empty__msg, .work__title { font-size: 20px; } /* Карточки товаров: 2 в ряд */ .pgrid { grid-template-columns: repeat(2, 1fr); gap: 14px; } .pcard__title { font-size: 13px; margin-top: 12px; } .pcard__price { font-size: 16px; margin-top: 8px; } .pcard__fav { width: 34px; height: 34px; top: 8px; right: 8px; } /* Наши работы — одна колонка */ .work { grid-template-columns: 1fr; gap: 20px; margin-top: 16px; } .work__thumbs { gap: 10px; } .work__order .btn { width: 100%; } .work__desc { margin-top: 24px; } /* Партнёр — номер поменьше, но читаемо */ .step__num { font-size: 72px; } .step__title { font-size: 20px; padding-top: 2px; } /* Контакты */ .contacts-top { margin-top: 24px; } .requisites { margin-top: var(--sp-6); } .rrow { grid-template-columns: 1fr; gap: 4px; padding: 14px 0; } .rrow__k { color: var(--ink-muted); font-size: 13px; } /* Формы на всю ширину (совпадает с home.css) */ .form__note { max-width: none; } /* Модалка на телефоне — почти на весь экран */ .modal__dialog { padding: 28px 20px; width: calc(100vw - 24px); border-radius: var(--radius); } } @media (max-width: 400px) { .pgrid { gap: 12px; } .work__thumbs { gap: 8px; } }