/* ========================================================================== Тарифы — 3 плитки в ряд Опорный кадр 1920 × 1088: фон секции #e9e9e9 отступ сверху 116, снизу 110 плитки 540 × 862, шаг 53, три в ряд фон плитки 535 × 862, #d9d9d9 — на 5px уже плитки: справа выступает стрелка (тот же приём, что в «Услугах») стрелка 78 × 78, чёрный круг, x 462 (=правый край), y 777 Поля секции в макете чуть асимметричны (103 слева, 91 справа); здесь взяты симметричные 97, как в «Услугах» — ширина колонок при этом та же. Внутри плитки (текст выключен по центру, ширина ~492, отступ сверху 69): название Muller Medium 40 / 1.12 цена Muller Regular 64 / 1.25 список Muller Regular 19 / 1.25 Между названием, ценой и списком в макете лежат по две пустые строки 40px — это и есть --plan-gap (89.6px при ширине 1920). Форма фона — скруглённый прямоугольник (радиус 30) с вырезом под стрелку в правом нижнем углу. Маска вшита data:URI: внешний файл блокируется CORS при открытии страницы через file://. Исходник формы: assets/images/plan-mask.svg ========================================================================== */ :root { --plan-mask: url("data:image/svg+xml,"); /* Та же форма, но только нижние 462px — от y=400 до низа плитки. Пропорции не задаются (preserveAspectRatio по умолчанию): маска кладётся размером «100% auto», то есть считается от ширины плитки, а не растягивается по её высоте. Нужна там, где высота плитки задаётся текстом (см. мобильные). */ --plan-mask-bottom: url("data:image/svg+xml,"); /* Две пустые строки 40px между смысловыми блоками плитки */ --plan-gap: clamp(1.5rem, 4.6667vw, 5.6rem); } /* Фокус на секцию ставит браузер при возврате по #pricing — рамка тут лишняя */ .plans:focus { outline: none; } .plans { background-color: var(--bg-muted); padding-block: 6.0417% 5.7292%; padding-inline: clamp(1.25rem, 5.0521vw, 6.0625rem); } .plans__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.7604vw, 3.3125rem); } /* --- Плитка --------------------------------------------------------------- */ .plan { position: relative; display: grid; color: var(--text-primary); } /* Псевдоэлемент держит пропорцию плитки из макета (540 × 862). Он лежит в той же ячейке грида, что и текст, и выровнен по верху — поэтому задаёт минимальную высоту, но не мешает плитке вырасти, если текст не помещается. Высоту всех трёх плиток в ряду затем выравнивает сам грид. */ .plan::before { content: ""; grid-area: 1 / 1; align-self: start; width: 100%; aspect-ratio: 540 / 862; } /* Фон на 5px уже плитки — справа под стрелку остаётся поле */ .plan::after { content: ""; position: absolute; inset: 0 0.9259% 0 0; background-color: var(--plan-fill, var(--bg-card)); mask-image: var(--plan-mask); mask-size: 100% 100%; mask-repeat: no-repeat; -webkit-mask-image: var(--plan-mask); -webkit-mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; } /* --- Содержимое ----------------------------------------------------------- Поля считаются в процентах от ширины плитки (540): сверху 69px → 12.7778%, по бокам 24px → 4.4444%. Правое поле на 5px больше левого: текст центрируется по фону (535), а не по плитке (540). Нижнее — 16.5% (≈89px при 1920) — держит зазор до круглой стрелки. -------------------------------------------------------------------------- */ .plan__body { position: relative; z-index: 1; grid-area: 1 / 1; padding: 12.7778% 5.3704% 16.5% 4.4444%; text-align: center; } .plan__name { font-size: clamp(1.25rem, 2.0833vw, 2.5rem); font-weight: var(--fw-medium); line-height: 1.12; } .plan__price { margin-top: var(--plan-gap); font-size: clamp(1.75rem, 3.3333vw, 4rem); font-weight: var(--fw-regular); line-height: 1.25; white-space: nowrap; } .plan__intro, .plan__list { font-size: clamp(0.8125rem, 0.9896vw, 1.1875rem); font-weight: var(--fw-regular); line-height: 1.25; } .plan__intro, .plan__list { margin-top: var(--plan-gap); } /* Список идёт сразу за вводной строкой — между ними одна пустая строка */ .plan__intro + .plan__list { margin-top: 1.25em; } /* Маркер набран точкой в самой строке: список выключен по центру. Символ записан кодом (U+00B7): сервер отдаёт css без charset, и точка, набранная буквой, прочиталась бы как «Â·». */ .plan__list li::before { content: "\00B7"; margin-right: 0.5em; } /* --- Круглая стрелка ------------------------------------------------------ */ .plan__arrow { position: absolute; right: 0; bottom: 0.812%; z-index: 2; display: grid; place-items: center; width: 14.4444%; aspect-ratio: 1; background-color: var(--color-black); border-radius: 50%; transition: background-color 0.25s ease; } .plan__arrow svg { width: 71.795%; height: 71.795%; fill: var(--color-white); } .plan__arrow:hover, .plan__arrow:focus-visible { background-color: var(--accent-hover); } /* Выбранный тариф: стрелка остаётся подсвеченной, пока форма заявки открыта */ .plan--selected .plan__arrow { background-color: var(--accent-hover); } /* --- Планшет и мобильные: одна колонка ------------------------------------- Уже 1200px колонка становится настолько узкой, что строки перечня начинают дробиться, плитка тянется вниз и перестаёт держать пропорцию макета — а вместе с ней растягивается вырез под стрелку. Поэтому переход сразу на одну колонку шириной с плитку из макета (540px), без промежуточных двух. -------------------------------------------------------------------------- */ @media (max-width: 1200px) { .plans { padding-block: 3.5rem 4rem; padding-inline: var(--container-pad); } /* min(), а не minmax(): трек с фиксированным максимумом не сжимается ниже него и на узком экране вылезает за вьюпорт. Ширина колонки — плитка из макета (540px), но не шире доступного места. */ .plans__grid { grid-template-columns: min(33.75rem, 100%); justify-content: center; gap: 1.25rem; } /* Высоту задаёт текст: фиксированная пропорция дала бы пустую плитку */ .plan::before { display: none; } /* Раз пропорция плитки больше не фиксирована, растянутая маска перестаёт работать: вырез под стрелку тянется по высоте и сжимается по ширине — на узком экране он становится ýже самой стрелки, и она наезжает на угол. Поэтому фон собирается из двух слоёв маски (по умолчанию они складываются): низ — вырез, размер «100% auto»: высота берётся из пропорций картинки, то есть вырез считается от ширины плитки, как на десктопе, и не зависит от того, сколько в плитке текста; верх — сплошная заливка до отметки 150px от низа. Слои перекрываются: нижний при любой ширине плитки выше 150px. Верхние углы скругляет border-radius, нижние приходят из маски. */ .plan::after { border-radius: 1.25rem 1.25rem 0 0; mask-image: var(--plan-mask-bottom), linear-gradient(#000 0 0); mask-size: 100% auto, 100% calc(100% - 150px); mask-position: bottom, top; -webkit-mask-image: var(--plan-mask-bottom), linear-gradient(#000 0 0); -webkit-mask-size: 100% auto, 100% calc(100% - 150px); -webkit-mask-position: bottom, top; } /* Нижнее поле держит зазор до выреза: он занимает ~24% ширины плитки */ .plan__body { padding: 2.5rem 1.75rem 26%; } .plan__name { font-size: 1.75rem; } .plan__price { font-size: 2.75rem; } .plan__intro, .plan__list { font-size: 1rem; } /* Ширина в процентах, как на десктопе: вырез считается от неё же */ .plan__arrow { width: 14.4444%; bottom: 0.4375rem; } } @media (max-width: 560px) { .plan__body { padding: 2rem 1.25rem 26%; } .plan__name { font-size: 1.5rem; } .plan__price { font-size: 2.25rem; } } /* ========================================================================== Модификатор «две плитки в ряд» — страница «Архитектурный проект» Опорный кадр 1920 × 1094: плитки 840 × 864, шаг 54, две в ряд фон плитки 840 × 864 — во всю ширину плитки: стрелка лежит внутри выреза, а не выступает за фон, как в трёх плитках стрелка 78 × 78, x 750, y 786 — нижним краем вровень с плиткой Внутри плитки (текст по центру, ширина 710, отступ сверху 124): название Muller Medium 40 / 1.12 цена Muller Regular 64 / 1.25 список Muller Regular 24 / 1.25 Между названием, ценой и списком в макете лежит одна пустая строка 40px — это и есть --plan-gap (44.8px при ширине 1920). Форма плитки приходит через те же переменные, что и у трёх плиток, — за счёт этого мобильная раскладка базового блока работает без правок. Исходник формы: assets/images/plan-duo-mask.svg ========================================================================== */ .plans--duo { --plan-mask: url("data:image/svg+xml,"); --plan-mask-bottom: url("data:image/svg+xml,"); --plan-gap: clamp(1.25rem, 2.3333vw, 2.8rem); } .plans--duo .plans__grid { grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 2.8125vw, 3.375rem); } .plans--duo .plan::before { aspect-ratio: 840 / 864; } /* Фон занимает всю ширину плитки: поле под стрелку здесь не нужно */ .plans--duo .plan::after { inset: 0; } /* Поля в процентах от ширины плитки (840): сверху 124 → 14.7619%, по бокам 65 → 7.7381% (текст шириной 710 по центру), снизу 108 → 12.8571% — ровно высота выреза под стрелку. */ .plans--duo .plan__body { padding: 14.7619% 7.7381% 12.8571%; } .plans--duo .plan__list { font-size: clamp(0.875rem, 1.25vw, 1.5rem); } /* В этом макете перечень набран без маркеров */ .plans--duo .plan__list li::before { content: none; } .plans--duo .plan__arrow { right: 1.4286%; bottom: 0; width: 9.2857%; } /* --- Планшет и мобильные --------------------------------------------------- Переход на одну колонку там же, где и у трёх плиток: ниже 1200px строки перечня начинают дробиться и плитка перестаёт держать пропорцию макета. -------------------------------------------------------------------------- */ @media (max-width: 1200px) { .plans--duo .plans__grid { grid-template-columns: min(33.75rem, 100%); } /* Нижнее поле держит зазор до выреза: он занимает ~13% ширины плитки */ .plans--duo .plan__body { padding: 2.5rem 1.75rem 20%; } .plans--duo .plan__list { font-size: 1rem; } /* В одной колонке пропорция макета оставляет вокруг стрелки слишком много пустого места: вырез — 15.24% ширины плитки, а сама стрелка всего 9.29%. Кружок увеличен почти до высоты выреза (12.86%), зазор сверху и слева остаётся, а палец получает цель нормального размера. */ .plans--duo .plan__arrow { width: 11.5%; } } @media (max-width: 560px) { .plans--duo .plan__body { padding: 2rem 1.25rem 20%; } } /* ========================================================================== Модификатор «пара плиток» — страница «Графический дизайн» Опорный кадр 1920 × 1094: поля секции 89 слева и справа, отступ сверху 149, снизу 119 плитки 849 × 583, шаг 44, две в ряд фон плитки белый (а не серый, как в остальных тарифах) — секция сама лежит на сером, и плитки от неё отстраиваются стрелка 78 × 78, x 748, y 496 — внутри выреза, поле 23 справа и 9 снизу Внутри плитки (текст по центру, отступ сверху 49): название Muller Medium 40 / 1.12 цена Muller Regular 64 / 1.25 список Muller Regular 24 / 1.25 — в правой плитке 19: пунктов там вдвое больше, и в макете набор мельче (.plan--dense) Между названием, ценой и списком — по одной пустой строке 40px. Под сеткой — кнопка «Другие услуги» (см. .btn--light в components/btn.css). Исходник формы: assets/images/plan-pair-mask.svg ========================================================================== */ .plans--pair { --plan-mask: url("data:image/svg+xml,"); /* На мобильных фон собирается из двух слоёв маски (см. базовый блок): низ кладётся размером «100% auto», верх — сплошной заливкой до отметки 150px от низа, и слои должны перекрыться. Плитка здесь широкая и низкая (849 × 583), поэтому вырезанный «низ» вышел бы всего в треть ширины — на узком экране это меньше 150px, и между слоями появлялась серая щель. Поэтому нижний слой — вся форма целиком: её высота 68.7% ширины, перекрытие остаётся при любой разумной ширине плитки. */ --plan-mask-bottom: url("data:image/svg+xml,"); --plan-gap: clamp(1.25rem, 2.3333vw, 2.8rem); --plan-fill: var(--color-white); /* Слой выше «Услуг»: серая заливка подрезает сверху фоновую «семёрку», которая заходит из следующей секции под тарифы */ position: relative; z-index: 2; padding-block: 7.7604% 6.1979%; padding-inline: clamp(1.25rem, 4.6354vw, 5.5625rem); } .plans--pair .plans__grid { grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 2.2917vw, 2.75rem); } .plans--pair .plan::before { aspect-ratio: 849 / 583; } /* Фон занимает всю ширину плитки: стрелка лежит внутри выреза */ .plans--pair .plan::after { inset: 0; } /* Поля в процентах от ширины плитки (849): сверху 49 → 5.7715%, по бокам 74 → 8.7161% (текст шириной 701 по центру), снизу 12.874% — ровно высота выреза под стрелку. */ .plans--pair .plan__body { padding: 5.7715% 8.7161% 12.874%; } .plans--pair .plan__list { font-size: clamp(0.875rem, 1.25vw, 1.5rem); } /* Плитка с длинным перечнем: набор мельче, 19px вместо 24 */ .plans--pair .plan--dense .plan__list { font-size: clamp(0.8125rem, 0.9896vw, 1.1875rem); } .plans--pair .plan__arrow { right: 2.7091%; bottom: 1.5437%; width: 9.1873%; } /* --- Кнопка под сеткой ---------------------------------------------------- */ .plans__more { display: flex; justify-content: center; /* 146px от нижнего края плиток при ширине контента 1742 */ margin-top: 8.3812%; } /* --- Планшет и мобильные --------------------------------------------------- Переход на одну колонку там же, где и у остальных тарифов: ниже 1200px строки перечня начинают дробиться и плитка перестаёт держать пропорцию. -------------------------------------------------------------------------- */ @media (max-width: 1200px) { /* Поля секции заданы у модификатора, поэтому мобильные значения базового блока до него не доходят — повторяем их здесь. */ .plans--pair { padding-block: 3.5rem 4rem; padding-inline: var(--container-pad); } .plans--pair .plans__grid { grid-template-columns: min(33.75rem, 100%); } /* Нижнее поле держит зазор до выреза: он занимает ~13% ширины плитки */ .plans--pair .plan__body { padding: 2.5rem 1.75rem 20%; } .plans--pair .plan__list, .plans--pair .plan--dense .plan__list { font-size: 1rem; } /* Как и в «двух плитках»: в одной колонке вырез просит кружок покрупнее. Заодно кружок садится плотнее в угол — от макетных полей (23 справа и 9 снизу) на узкой плитке остаётся зазор шире, чем нужно. */ .plans--pair .plan__arrow { right: 1.7091%; bottom: 0.1437%; width: 11.5%; } .plans__more { margin-top: 2.5rem; } } @media (max-width: 560px) { .plans--pair .plan__body { padding: 2rem 1.25rem 20%; } }