/* ═══════════════════════════════════════════════════════════════ ДИЗАЙН-СТИЛИ Стиль меняет не цвет, а характер: форму, плотность, шрифт, тени, поведение при наведении. Цветовые схемы работают поверх любого стиля — они трогают только палитру. Первый стиль (editorial) — исходный: острые углы, волосяные линии, контрастная типографика, ни одной тени. Отдельного блока не требует. ═══════════════════════════════════════════════════════════════ */ /* ═══════════════ ФОРМА УГЛОВ — отдельный параметр ═══════════════ Скругление не связано с дизайном: любой стиль можно показать острым или мягким. Поэтому оно вынесено в data-shape и переключается отдельной кнопкой в панели. ═══════════════════════════════════════════════════════════════ */ [data-shape="round"] { --radius: 16px; --radius-l: 24px; --gap: clamp(18px, 2.2vw, 32px); --pad-sec: clamp(60px, 8vw, 140px); /* Мягкий стиль читается легче при чуть меньшем контрасте линий */ --line-soft: color-mix(in srgb, var(--line) 55%, transparent); /* Тени вместо границ — задаём переменными, чтобы схемы их не ломали */ --shadow-s: 0 2px 8px -2px rgba(16,15,12,.08), 0 8px 24px -12px rgba(16,15,12,.10); --shadow-m: 0 4px 14px -4px rgba(16,15,12,.10), 0 18px 44px -20px rgba(16,15,12,.16); --shadow-l: 0 8px 24px -8px rgba(16,15,12,.12), 0 32px 70px -30px rgba(16,15,12,.24); } /* ─── Карточки: тень вместо рамки, подъём при наведении ─── */ [data-shape="round"] .card, [data-shape="round"] .tile, [data-shape="round"] .tp-card, [data-shape="round"] .promo, [data-shape="round"] .aside-card, [data-shape="round"] .contacts-office, [data-shape="round"] .dev-contacts, [data-shape="round"] .paycalc, [data-shape="round"] .aside-calc { border-color: transparent; border-radius: var(--radius); box-shadow: var(--shadow-s); overflow: hidden; } [data-shape="round"] .card { transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base); } [data-shape="round"] .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-m); } [data-shape="round"] .card__media, [data-shape="round"] .obj-gallery, [data-shape="round"] .map-wrap, [data-shape="round"] .loc-pic, [data-shape="round"] .gal img, [data-shape="round"] .tile__img { border-radius: var(--radius); } /* ─── Кнопки и поля: скруглённые, без «шторки» ─── */ [data-shape="round"] .btn, [data-shape="round"] .card__cta, [data-shape="round"] .promo__btn, [data-shape="round"] .quiz__send, [data-shape="round"] .searchbar__submit { border-radius: 999px; letter-spacing: .04em; text-transform: none; font-size: .9375rem; padding-inline: 26px; } [data-shape="round"] .btn::after { display: none; } /* Иконки рядом с основной кнопкой тоже скругляем: пилюля рядом с двумя прямоугольниками смотрелась как недоделка. Ширину подгоняем под высоту, чтобы получались ровные кружки. */ [data-shape="round"] .card__ico, [data-shape="round"] .msg, [data-shape="round"] .pvw__group a { border-radius: 999px; } [data-shape="round"] .card__actions { gap: 8px; align-items: stretch; } [data-shape="round"] .card__ico { width: 48px; aspect-ratio: 1; } [data-shape="round"] .card__cta { padding-block: 13px; } [data-shape="round"] .btn:hover { background: var(--bronze); border-color: var(--bronze); color: var(--on-dark); } [data-shape="round"] .searchbar, [data-shape="round"] .fsel__menu, [data-shape="round"] .pop__panel, [data-shape="round"] .suggest, [data-shape="round"] .modal__box, [data-shape="round"] .cat-form input { border-radius: var(--radius); } /* Поле и кнопка рядом должны быть одной формы. Поля с радиусом 16 рядом с кнопкой-пилюлей выглядели как чужие друг другу элементы. */ [data-shape="round"] .quiz__phone, [data-shape="round"] .promo__phone, [data-shape="round"] .news__field input, [data-shape="round"] .btn--wa, [data-shape="round"] .aside-card__actions .btn { border-radius: 999px; } /* Строка поиска: скругляем контейнер, а крайние ячейки повторяют форму, иначе углы полей торчали из-под скруглённой рамки */ [data-shape="round"] .searchbar { overflow: hidden; } [data-shape="round"] .searchbar > *:first-child { border-radius: var(--radius) 0 0 var(--radius); } [data-shape="round"] .searchbar > *:last-child { border-radius: 0 var(--radius) var(--radius) 0; } [data-shape="round"] .m-search .searchbar > *:first-child, [data-shape="round"] .m-search .searchbar > *:last-child { border-radius: 0; } /* Кнопки-открывашки фильтров — той же формы, что их панели */ [data-shape="round"] .fsel__btn, [data-shape="round"] .pop__btn { border-radius: var(--radius); } [data-shape="round"] .fsel__menu, [data-shape="round"] .pop__panel, [data-shape="round"] .suggest, [data-shape="round"] .pref__menu { box-shadow: var(--shadow-l); border-color: transparent; } /* ─── Разделители: мягче линий ─── */ [data-shape="round"] .section--sand { border-radius: var(--radius-l); } [data-shape="round"] .filters { border-bottom: 0; box-shadow: var(--shadow-s); } [data-shape="round"] .header.is-solid { box-shadow: var(--shadow-s); border-bottom: 0; } /* ─── Типографика: чуть мягче и крупнее межстрочный ─── */ [data-shape="round"] body { line-height: 1.62; } [data-shape="round"] .t-h1, [data-shape="round"] .t-h2, [data-shape="round"] .t-hero { letter-spacing: -.02em; } [data-shape="round"] .eyebrow { letter-spacing: .12em; } /* ─── Метки и чипы: пилюли ─── */ [data-shape="round"] .chip, [data-shape="round"] .badge, [data-shape="round"] .quiz__opt, [data-shape="round"] .pref__i, [data-shape="round"] .mmenu__cur-i { border-radius: 999px; } /* ─── Первый экран: снимок в скруглённой карточке ─── */ [data-shape="round"] .hero__photo { border-radius: var(--radius-l); overflow: hidden; } [data-shape="round"] .hero__fade--left, [data-shape="round"] .hero__fade--right { display: none; } [data-shape="round"] .hero__fade--bottom { background: linear-gradient(0deg, rgba(16,15,12,.55) 0%, rgba(16,15,12,0) 60%); } /* На телефоне снимок остаётся фоном во всю площадь — скругление там выглядело бы как вырезанный прямоугольник посреди экрана */ @media (max-width: 700px) { [data-shape="round"] .hero__photo { border-radius: 0; } [data-shape="round"] .section--sand { border-radius: 0; } } /* ═══════════════════════════════════════════════════════════════ ESTATE — второй дизайн Другой характер, та же структура блоков. Если исходный стиль — это журнал о недвижимости (тонкие линии, разрядка, крупные засечки смысла), то этот — деловая витрина агентства: холодная палитра, плотная сетка, сплошные кнопки, ярко-синий акцент, подписи без капса. Такой язык у большинства площадок, и покупателю он знаком. ═══════════════════════════════════════════════════════════════ */ [data-style="estate"] { /* Палитра по умолчанию. Цветовые схемы подключаются позже и перебивают её — сочетать можно любые. */ --sand: #F7F9FC; --sand-deep: #EDF3F9; --paper: #FFFFFF; --ink: #1B2735; --ink-soft: #34465A; --muted: #6B7C8F; --muted-2: #93A2B3; --line: #DCE6F0; --line-soft: #EBF1F7; --bronze: #1B90E4; /* акцент — тот самый синий */ --bronze-lite: #4FADEE; --bronze-wash: #E8F3FD; --dark: #16212C; --dark-soft: #22303F; --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --pad-sec: clamp(48px, 6vw, 96px); --gap: clamp(16px, 1.8vw, 26px); } /* ─── Типографика: плотнее и деловитее ─── */ [data-style="estate"] .t-hero, [data-style="estate"] .t-h1, [data-style="estate"] .t-h2, [data-style="estate"] .t-h3, [data-style="estate"] .t-h4 { font-weight: 600; letter-spacing: -.022em; line-height: 1.14; } [data-style="estate"] .t-lead { font-size: 1rem; color: var(--muted); } /* Надзаголовки без разрядки и капса: в деловой витрине они читаются как подписи, а не как декор */ [data-style="estate"] .eyebrow { text-transform: none; letter-spacing: 0; font-size: .8125rem; font-weight: 600; color: var(--bronze); } [data-style="estate"] .eyebrow::before { display: none; } /* ─── Кнопки: сплошная заливка акцентом ─── */ [data-style="estate"] .btn { --btn-bg: var(--bronze); --btn-fg: #fff; --btn-bd: var(--bronze); text-transform: none; letter-spacing: .01em; font-size: .9375rem; font-weight: 500; } [data-style="estate"] .btn::after { background: var(--dark); } [data-style="estate"] .btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--line); } [data-style="estate"] .btn--solid-light { --btn-bg: #fff; --btn-fg: var(--bronze); --btn-bd: #fff; } [data-style="estate"] .card__cta { background: var(--bronze); border-color: var(--bronze); } [data-style="estate"] .card__cta:hover { background: var(--dark); border-color: var(--dark); } /* ─── Карточки: белые на холодном фоне, лёгкая тень ─── */ [data-style="estate"] .card, [data-style="estate"] .tp-card, [data-style="estate"] .tile { background: var(--paper); border-color: var(--line); box-shadow: 0 1px 2px rgba(27,39,53,.05); } [data-style="estate"] .card:hover { box-shadow: 0 10px 30px -14px rgba(27,39,53,.28); } /* Метка на снимке — как ярлык объявления */ [data-style="estate"] .card__badge, [data-style="estate"] .badge { background: var(--bronze); color: #fff; border: 0; font-weight: 600; letter-spacing: 0; text-transform: none; } /* ─── Цена крупнее: в витрине это главный аргумент ─── */ [data-style="estate"] .card__price { font-weight: 600; letter-spacing: -.02em; } [data-style="estate"] .card__price small { font-weight: 400; } /* ─── Секции: заголовок и подпись по центру ─── */ [data-style="estate"] .sec-head { flex-direction: column; align-items: center; text-align: center; gap: 10px; } [data-style="estate"] .sec-head .t-lead { max-width: 62ch; } [data-style="estate"] .sec-head__text { text-align: center; } /* ─── Строка поиска: белая плашка поверх снимка ─── */ [data-style="estate"] .searchbar { background: rgba(255,255,255,.96); border-color: transparent; box-shadow: 0 18px 44px -22px rgba(16,24,32,.55); } [data-style="estate"] .searchbar__cell { background: transparent; } [data-style="estate"] .searchbar__cell label, [data-style="estate"] .searchbar .fsel__lab { color: var(--muted); text-transform: none; letter-spacing: 0; font-size: 12px; } [data-style="estate"] .searchbar__cell input, [data-style="estate"] .searchbar .fsel__val { color: var(--ink); } [data-style="estate"] .searchbar__submit { background: var(--bronze); color: #fff; } /* ─── Шапка и подвал ─── */ [data-style="estate"] .header.is-solid { box-shadow: 0 1px 0 var(--line); } [data-style="estate"] .nav__link { font-weight: 500; letter-spacing: 0; text-transform: none; font-size: .9375rem; } [data-style="estate"] .footer { background: var(--dark); } /* ─── Тёмные секции мягче: не чёрные, а густо-синие ─── */ [data-style="estate"] .section--dark { background: var(--dark); } [data-style="estate"] .quiz-sec { background: var(--bronze-wash); } /* ─── Подписи полей и мелочи ─── */ [data-style="estate"] .chip { text-transform: none; letter-spacing: 0; font-weight: 500; } [data-style="estate"] .pref__btn, [data-style="estate"] .filters__row .pop__btn { text-transform: none; letter-spacing: 0; }