/* ========================================================================== Блок «Активности в городе» — бенто-сетка Светлая и тёмная темы переключаются атрибутом data-theme на ========================================================================== */ .ab{ /* --- светлая тема (по умолчанию) --- */ --ab-bg:#f1ede6; --ab-glow:#ffffff; --ab-glow-mid:rgba(255,255,255,.55); --ab-text:#171717; --ab-btn-border:rgba(23,23,23,.75); --ab-btn-text:#171717; --ab-btn-hover-bg:#171717; --ab-btn-hover-text:#ffffff; --ab-olive:#5e6046; --ab-olive-hover:#6b6d50; --ab-on-olive:#ffffff; --ab-on-olive-muted:#dcdcd0; --ab-radius:12px; --ab-gap:20px; --ab-ease:cubic-bezier(.16,.84,.24,1); } [data-theme="dark"] .ab{ --ab-bg:#4a382b; --ab-glow:#6b5340; --ab-glow-mid:rgba(107,83,64,.5); --ab-text:#ffffff; --ab-btn-border:rgba(255,255,255,.55); --ab-btn-text:#ffffff; --ab-btn-hover-bg:#ffffff; --ab-btn-hover-text:#171717; } /* ===================== подложка ===================== */ .ab__stage{ position:relative; padding:28px; border-radius:20px; background:var(--ab-bg); overflow:hidden; isolation:isolate; transition:background .35s ease; } .ab__glow{ position:absolute;inset:0; pointer-events:none; z-index:0; opacity:0; transition:opacity .45s ease; background:radial-gradient( circle 300px at var(--ab-mx,50%) var(--ab-my,50%), var(--ab-glow) 0%, var(--ab-glow-mid) 38%, transparent 72%); } .ab__stage.is-hover .ab__glow{opacity:1} .ab__grid,.ab__all{position:relative;z-index:1} /* ===================== сетка ===================== */ .ab__grid{ display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:263px 263px; gap:var(--ab-gap); } .ab__stack{display:flex;flex-direction:column;gap:var(--ab-gap)} .ab-ski {grid-column:1 / 3;grid-row:1} .ab-mount {grid-column:1; grid-row:2} .ab-col2 {grid-column:2; grid-row:2} .ab-col3 {grid-column:3; grid-row:1 / -1} .ab-col4 {grid-column:4; grid-row:1 / -1} .ab-col2 .ab-hiking {flex:1;min-height:0} .ab-col3 .ab-jeeptours {height:121px;flex:none} .ab-col3 .ab-horsephoto {flex:1;min-height:0} .ab-col3 .ab-horseback {height:122px;flex:none} .ab-col4 .ab-jeepphoto {height:263px;flex:none} .ab-col4 .ab-paraglide {flex:1;min-height:0} /* ===================== карточка ===================== */ .ab__card{display:block;text-decoration:none;color:inherit;min-height:0} .ab__inner{ position:relative;display:block;height:100%; border-radius:var(--ab-radius); overflow:hidden; opacity:0; transform:translate3d(var(--ab-ex,0px),var(--ab-ey,0px),0) scale(.94); transition:opacity .75s var(--ab-ease),transform .85s var(--ab-ease),background .3s ease; transition-delay:var(--ab-d,0ms); } .ab.is-in .ab__inner{opacity:1;transform:none} .ab__card:focus-visible .ab__inner{outline:3px solid var(--ab-text);outline-offset:3px} .ab__media{ position:absolute;inset:0; background-size:cover;background-position:center; transition:transform .6s var(--ab-ease); } .ab__card:hover .ab__media{transform:scale(1.05)} .ab__body{ position:relative;height:100%; display:flex;flex-direction:column;justify-content:flex-end; padding:24px;color:#fff; background:linear-gradient(to top,rgba(0,0,0,.5) 0%,rgba(0,0,0,.12) 45%,transparent 75%); } .ab__card--photo.is-plain .ab__body{background:none;padding:0} .ab__card--tile .ab__inner{background:var(--ab-olive);color:var(--ab-on-olive)} .ab__card--tile .ab__body{ height:100%;display:flex;flex-direction:column;justify-content:flex-start; padding:24px;background:none;color:var(--ab-on-olive); } .ab__card--tile:hover .ab__inner{background:var(--ab-olive-hover)} .ab__title{margin:0;font-size:26px;line-height:1.15;font-weight:800;letter-spacing:-.01em} .ab__note{margin:8px 0 0;font-size:15px;line-height:1.35;font-weight:500} .ab__card--photo .ab__note{color:rgba(255,255,255,.92)} .ab__card--tile .ab__note{color:var(--ab-on-olive-muted)} .ab-jeeptours .ab__title,.ab-horseback .ab__title{font-size:24px} .ab-jeeptours .ab__note,.ab-horseback .ab__note{font-size:14px;margin-top:6px} /* ===================== кнопка и ссылка ===================== */ .ab__btn{ height:55px;flex:none; display:flex;align-items:center;justify-content:space-between;gap:12px; padding:0 22px; border:1.5px solid var(--ab-btn-border); border-radius:var(--ab-radius); background:transparent;color:var(--ab-btn-text); font:inherit;font-size:17px;font-weight:600;text-decoration:none; opacity:0;transform:translate3d(0,18px,0); transition:opacity .7s var(--ab-ease),transform .7s var(--ab-ease), background .25s ease,color .25s ease,border-color .25s ease; transition-delay:var(--ab-d,0ms); } .ab.is-in .ab__btn{opacity:1;transform:none} .ab__btn:hover{background:var(--ab-btn-hover-bg);color:var(--ab-btn-hover-text);border-color:var(--ab-btn-hover-bg)} .ab__btn:focus-visible{outline:3px solid var(--ab-text);outline-offset:3px} .ab__btn svg{flex:none;transition:transform .25s var(--ab-ease)} .ab__btn:hover svg{transform:translateX(4px)} .ab__all{ margin:28px 0 0;text-align:center; opacity:0;transform:translate3d(0,12px,0); transition:opacity .6s var(--ab-ease),transform .6s var(--ab-ease); transition-delay:480ms; } .ab.is-in .ab__all{opacity:1;transform:none} .ab__all a{color:var(--ab-text);font-size:17px;font-weight:600;text-underline-offset:5px} .ab__all a:hover{text-decoration-thickness:2px} /* ===================== очередь выезда ===================== */ .ab-ski {--ab-ex:-30px;--ab-ey:-20px;--ab-d:0ms} .ab-jeeptours {--ab-ey:-28px;--ab-d:80ms} .ab-jeepphoto {--ab-ex:30px;--ab-ey:-22px;--ab-d:140ms} .ab-mount {--ab-ex:-30px;--ab-ey:24px;--ab-d:200ms} .ab-hiking {--ab-ey:28px;--ab-d:260ms} .ab-horsephoto{--ab-ex:14px;--ab-d:320ms} .ab-horseback {--ab-ey:28px;--ab-d:380ms} .ab-paraglide {--ab-ex:30px;--ab-ey:24px;--ab-d:420ms} .ab__btn {--ab-d:460ms} /* ===================== мобильная версия ===================== */ @media (max-width:900px){ .ab__stage{padding:16px;border-radius:16px} .ab__grid{ grid-template-columns:repeat(2,1fr); grid-template-rows:none; grid-auto-rows:minmax(150px,auto); } .ab__stack{display:contents} .ab__grid>*,.ab__stack>*{grid-column:auto;grid-row:auto;height:auto;flex:none} .ab-ski {grid-column:1 / -1;order:1;min-height:210px} .ab-mount {order:2;min-height:150px} .ab-hiking {order:3;min-height:150px} .ab-jeeptours {order:4;min-height:150px} .ab-jeepphoto {order:5;min-height:150px} .ab-horsephoto{order:6;min-height:150px} .ab-horseback {order:7;min-height:150px} .ab-paraglide {grid-column:1 / -1;order:8;min-height:200px} .ab__btn {grid-column:1 / -1;order:9;height:56px} .ab__body,.ab__card--tile .ab__body{padding:18px} .ab__title{font-size:21px} .ab-jeeptours .ab__title,.ab-horseback .ab__title{font-size:21px} .ab__note{font-size:14px} } @media (prefers-reduced-motion:reduce){ .ab__inner,.ab__btn,.ab__all{transition:none!important;opacity:1;transform:none} .ab__glow{display:none} .ab__card:hover .ab__media{transform:none} } /* ========================================================================== Переключатель темы в шапке ========================================================================== */ .theme-switch{ display:inline-flex;align-items:center;justify-content:center; width:40px;height:40px;padding:0; border:1px solid currentColor;border-radius:50%; background:transparent;color:inherit; cursor:pointer; transition:background .2s ease,color .2s ease; } .theme-switch:hover{background:currentColor} .theme-switch:hover svg{color:var(--ab-bg,#fff)} .theme-switch svg{width:18px;height:18px} .theme-switch .icon-moon{display:none} [data-theme="dark"] .theme-switch .icon-sun{display:none} [data-theme="dark"] .theme-switch .icon-moon{display:block} /* ===== Отступы вокруг блока на главной ===== */ .home .home__section_mega{margin-bottom:16px} .home .home_text__city{padding-top:24px} /* ========================================================================== Пропорциональная сетка — размеры по UI kit (Figma 454:3877) 100cqw = ширина сетки. Все величины взяты из макета и поделены на 1144 — ширину контентной колонки. Опорные размеры: сетка 1144x546, шаг 20, ряд 263, джип-туры 121, конные прогулки 122, хайкинг 190, кнопка 53. Правила идут после исходных и перекрывают их. ========================================================================== */ .ab__stage{container-type:inline-size} .ab__grid{ display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:1fr 1fr; gap:1.748cqw; aspect-ratio:1144 / 546; --ab-radius:clamp(8px,1.049cqw,12px); } .ab__stack{display:flex;flex-direction:column;gap:1.748cqw} .ab-col2 .ab-hiking {flex:1;min-height:0} .ab-col3 .ab-jeeptours {height:10.577cqw;flex:none} .ab-col3 .ab-horsephoto {flex:1;min-height:0} .ab-col3 .ab-horseback {height:10.664cqw;flex:none} .ab-col4 .ab-jeepphoto {height:22.989cqw;flex:none} .ab-col4 .ab-paraglide {flex:1;min-height:0} .ab__body, .ab__card--tile .ab__body{padding:clamp(14px,2.098cqw,24px)} .ab__title{font-size:clamp(17px,2.273cqw,26px)} .ab__note {font-size:clamp(12px,1.311cqw,15px);margin-top:clamp(4px,.7cqw,8px)} .ab-jeeptours .ab__title, .ab-horseback .ab__title{font-size:clamp(16px,2.098cqw,24px)} .ab-jeeptours .ab__note, .ab-horseback .ab__note {font-size:clamp(12px,1.224cqw,14px);margin-top:clamp(3px,.52cqw,6px)} .ab-ski .ab__title{font-size:clamp(24px,3.5cqw,40px);line-height:1.1} .ab__card--photo.is-top .ab__body{ justify-content:flex-start; background:linear-gradient(to bottom, rgba(0,0,0,.55) 0%, rgba(0,0,0,.14) 45%, transparent 78%); } .ab-horseback .ab__note{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .ab__btn{ height:clamp(40px,4.633cqw,53px); flex:none; padding:0 clamp(12px,1.923cqw,22px); font-size:clamp(14px,1.486cqw,17px); border-radius:var(--ab-radius,12px); } .ab__all{margin:clamp(20px,4.633cqw,53px) 0 0} .ab__all a{font-size:clamp(14px,1.486cqw,17px)} /* оливковый по палитре кита (в теме был #5e6046 — такого цвета в ките нет) */ .ab{ --ab-olive:#6A6954; --ab-olive-hover:#787657; } @media (max-width:900px){ .ab__grid{aspect-ratio:auto;gap:var(--ab-gap)} .ab__stack{gap:var(--ab-gap)} .ab-col3 .ab-jeeptours, .ab-col3 .ab-horseback, .ab-col4 .ab-jeepphoto{height:auto} .ab__btn{height:56px} } /* У двух низких плашек высота всего ~85px при контейнере 900 — поля по 24px съедают вторую строку подписи. В макете у них поля тоже меньше остальных. */ .ab-jeeptours .ab__body, .ab-horseback .ab__body{padding:clamp(10px,1.4cqw,16px)} /* ========================================================================== Мобильная раскладка — восстановлена -------------------------------------------------------------------------- Пропорциональные правила выше идут ПОСЛЕ исходного @media (max-width:900px), поэтому перебивали его: .ab__stack оставался flex вместо contents, колонки схлопывались до 15px, карточки теряли высоту. Эта секция стоит последней в файле и заново задаёт мобильную сетку целиком. По UI kit (Figma 454:3877), телефонный брейкпоинт 320-640: 2 колонки по 171px, жёлоб 20px, контентная ширина 362px. Кегли — по мобильной шкале кита: Headline 2 = 20px, Headline 5 = 14px. Отступы кратны 8. Кнопка — размер Large, 52px. ========================================================================== */ @media (max-width:900px){ .ab__stage{padding:16px;border-radius:16px} /* сетка кита: две колонки, жёлоб 20 */ .ab__grid{ grid-template-columns:repeat(2,1fr); grid-template-rows:none; grid-auto-rows:minmax(150px,auto); gap:20px; aspect-ratio:auto; } /* колонки-обёртки растворяются, карточки становятся прямыми детьми сетки */ .ab__stack{display:contents} .ab__grid>*, .ab__stack>*{grid-column:auto;grid-row:auto;height:auto;flex:none;min-height:150px} /* порядок чтения на телефоне */ .ab-ski {grid-column:1 / -1;order:1;min-height:210px} .ab-mount {order:2} .ab-hiking {order:3} .ab-jeeptours {order:4} .ab-jeepphoto {order:5} .ab-horsephoto{order:6} .ab-horseback {order:7} .ab-paraglide {grid-column:1 / -1;order:8;min-height:200px} .ab__btn {grid-column:1 / -1;order:9;height:52px;min-height:52px;font-size:16px;padding:0 24px} /* типографика по мобильной шкале кита */ .ab__body, .ab__card--tile .ab__body, .ab-jeeptours .ab__body, .ab-horseback .ab__body{padding:16px} .ab__title, .ab-ski .ab__title, .ab-jeeptours .ab__title, .ab-horseback .ab__title{font-size:20px;line-height:1.2} .ab__note, .ab-jeeptours .ab__note, .ab-horseback .ab__note{font-size:14px;line-height:1.3;margin-top:8px} /* на телефоне карточка выше — подпись помещается целиком, обрезка не нужна */ .ab-horseback .ab__note{-webkit-line-clamp:none;display:block;overflow:visible} .ab__all{margin:24px 0 0} .ab__all a{font-size:16px} } @media (max-width:900px){ /* minmax(0,1fr) — иначе содержимое распирает колонки неравно (было 151 и 143) */ .ab__grid{grid-template-columns:repeat(2,minmax(0,1fr))} /* Снимаем flex-растяжку и min-height:0 из десктопных правил: у них специфичность выше, и они гасили min-height карточек. */ .ab-col2 .ab-hiking, .ab-col3 .ab-horsephoto{flex:none;min-height:150px} .ab-col4 .ab-paraglide {flex:none;min-height:200px} } @media (max-width:900px){ /* Пока подписи впечатаны в JPEG, эти две карточки обязаны повторять пропорции своих картинок — иначе background-size:cover срезает текст: у горнолыжной 29% по ширине, у параглайдинга 35% по высоте. После замены на чистые фото и живой текст эту привязку можно снять. */ .ab-ski, .ab-paraglide, .ab-col4 .ab-paraglide{min-height:0} .ab-ski {aspect-ratio:562 / 263} .ab-paraglide{aspect-ratio:271 / 263} }