/* ============================================================================ Главная страница: премиальный слой для телефона и приложения. Зачем отдельный файл. На компьютере главная уже собрана под широкий экран: три колонки, крупные поля, воздух. На телефоне та же вёрстка сжимается в один столбик, и плотность карточек (плитки 2×2, таблица статистики, сетки 3×3) перестаёт читаться: элементы мелкие, ритм рваный, взгляду не за что зацепиться. Здесь для узкого экрана задаётся своя подача — крупные карточки, один жест в строку (горизонтальные ленты), единая сетка отступов и веса. Как подключается. Файл идёт последним после style.css и pages.css, поэтому при равной специфичности его правила выигрывают. Все правила заперты в @media (max-width:860px) и (display-mode: standalone), то есть в настольной версии и в обычном браузере на широком экране не меняется ничего. Что осталось за кадром: содержимое страницы не меняется ни на строку — только оформление. Разметку правят сборщики и админка, поэтому все улучшения сделаны классами: сетки превращаются в горизонтальные ленты с зацепом на карточке, а не в новый список. ========================================================================= */ @media (max-width:860px), (display-mode: standalone){ /* ---------------------------------------------------------------- основа --- Единая сетка отступов: поля страницы, ритм разделов, радиусы, тени. Раньше на телефоне поля были 24px и 18px (на разных ширинах), из-за чего карточки в одном разделе стояли по-разному относительно края. */ :root{ --g:20px; /* поле страницы по бокам */ --r-m:20px; /* основной радиус карточек */ --r-m2:16px; /* радиус мелочей: кнопки в списках, поля ввода */ --hair:rgba(116,79,64,.14); --sh-1:0 1px 2px rgba(43,24,19,.04),0 6px 16px rgba(43,24,19,.055); --sh-2:0 2px 5px rgba(43,24,19,.05),0 14px 32px rgba(43,24,19,.10); --sh-3:0 6px 14px rgba(43,24,19,.07),0 26px 56px rgba(43,24,19,.13); --glow:0 10px 24px rgba(227,18,76,.26); --ease:cubic-bezier(.22,.7,.2,1); } html{background:#FFF8F3} /* Фон страницы — тёплый свет сверху, чтобы белые карточки читались как слои, а не как заплатки на плоскости. */ body{ background: radial-gradient(900px 420px at 92% -60px,#FFF0E6,rgba(255,240,230,0)), radial-gradient(700px 520px at -10% 14%,#FDF2EA,rgba(253,242,234,0)), linear-gradient(180deg,#FFFCF8 0%,#FFF8F2 100%); -webkit-font-smoothing:antialiased; } .container{padding:0 var(--g)} /* Ритм разделов: на телефоне 88px отступ читался как дыра, а 56px — как склейка. 44px при крупных заголовках даёт ровный шаг. */ .section{padding:44px 0} .section--tight{padding:34px 0} .section--soft{background:rgba(252,246,240,.75)} .section--cream{background:rgba(255,244,235,.7)} /* ---------------------------------------------------------------- набор --- Заголовки: на телефоне крупнее и плотнее, чем в общей таблице, но без «крика» — вес 800 только у первого экрана. */ .h-xl{font-size:clamp(30px,9vw,38px);font-weight:800;letter-spacing:-.032em;line-height:1.06} .h-l{font-size:clamp(24px,7vw,29px);font-weight:800;letter-spacing:-.028em;line-height:1.12} .h-m{font-size:clamp(20px,5.8vw,23px);font-weight:750;letter-spacing:-.022em;line-height:1.18} .h-s{font-size:17.5px;font-weight:750;letter-spacing:-.015em} .lead{font-size:15.5px;line-height:1.62;color:var(--ink-2)} .num{font-variant-numeric:tabular-nums} /* Плашка над заголовком: вместо чёрточки — тихая капсула. Единый приём для всех разделов сразу задаёт «дорогую» подачу: она повторяется как ритм. */ .eyebrow{ padding:7px 13px;border-radius:999px;margin-bottom:13px; background:rgba(255,255,255,.82);border:1px solid var(--hair); font-size:10.5px;letter-spacing:.11em;box-shadow:0 1px 2px rgba(43,24,19,.04); } .eyebrow::before{display:none} .eyebrow .ico{width:14px;height:14px} .section-head{max-width:none;margin-bottom:24px;text-align:center} .section-head p{margin-top:11px} /* Заголовок раздела и кнопка «Все …» в одну строку не помещаются: кнопка уезжает под текст и растягивается на всю ширину — как в приложениях. */ .flex-between.section-head{display:block} .section-head .btn{width:100%;margin-top:16px} /* ------------------------------------------------------------ кнопки --- */ .btn{border-radius:var(--r-m2);font-weight:700;transition:transform .16s var(--ease),box-shadow .2s var(--ease),background .2s ease} .btn--lg{padding:16px 22px;font-size:16px} .btn--primary{ background:linear-gradient(180deg,#D24C39,var(--brand) 55%,#B03425); box-shadow:var(--glow); } .btn--primary:active{transform:translateY(1px) scale(.995);box-shadow:0 6px 14px rgba(227,18,76,.24)} .btn--ghost{background:#fff;border-color:var(--line-2);box-shadow:var(--sh-1)} .btn--ghost:active{transform:translateY(1px) scale(.995)} .btn--dark{box-shadow:0 8px 20px rgba(43,24,19,.22)} a,button,summary{-webkit-tap-highlight-color:transparent} :focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:10px} /* -------------------------------------------------------------- первый --- экран. Подвал и правый блок (карта, плитки, чипы) здесь уже скрыты (@media выше по файлу style.css), поэтому первый экран — это заголовок, две кнопки, строка доверия и лента новостей. */ .hero{padding:20px 0 4px;border-bottom:0;background:transparent} .hero::before{ background: radial-gradient(560px 320px at 92% -4%,rgba(227,18,76,.10),transparent 72%), radial-gradient(460px 300px at 0% 34%,rgba(217,139,79,.09),transparent 72%); } .hero__grid{gap:22px} .hero__intro .eyebrow{margin-bottom:16px} .hero__intro :is(h1,h2){margin-bottom:14px} /* Вторая строка заголовка подчёркнута мягкой маркерной полосой: приём остаётся один на всю страницу и не спорит с плашками. */ .hero__intro :is(h1,h2) mark{ color:var(--brand-dark); background:linear-gradient(180deg,rgba(227,18,76,0) 58%,rgba(227,18,76,.16) 58%); border-radius:3px; } .hero__intro>.lead{font-size:15.5px} .hero__actions{gap:10px;margin:22px 0 18px;flex-direction:column} .hero__actions .btn{width:100%;min-height:54px;border-radius:18px} .hero__actions .btn--primary{font-size:16.5px} .hero__actions .btn--ghost{font-weight:650;color:var(--ink-2)} /* Строка доверия: вместо двух строк текста на фоне — карточка-капсула. */ .hero__trust{ gap:12px;padding:12px 15px;border-radius:18px;flex-wrap:nowrap; background:rgba(255,255,255,.78);border:1px solid var(--hair); box-shadow:var(--sh-1);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); } .hero__trust>div[style]{font-size:14.5px} .hero__trust b{font-family:var(--ff-display);font-size:15.5px;letter-spacing:-.02em} .avatars span{width:34px;height:34px;font-size:12px;border-color:#fff;margin-left:-9px;box-shadow:0 1px 3px rgba(43,24,19,.16)} /* Лента новостей: единственный крупный медиа-объект первого экрана, поэтому он получает самый глубокий слой тени. */ .hero__media{margin-top:6px} .hero__photo{border-radius:22px;box-shadow:var(--sh-3);aspect-ratio:4/3.5} .hero-stories__shade{background:linear-gradient(180deg,rgba(31,16,12,.02) 14%,rgba(31,16,12,.16) 38%,rgba(31,16,12,.92) 100%)} .hero-stories__content{left:18px;right:18px;bottom:64px} .hero-stories__eyebrow{font-size:10px;letter-spacing:.09em;margin-bottom:9px} .hero-stories__eyebrow::before{display:none} .hero-stories__content h2{font-size:clamp(21px,6.4vw,26px);line-height:1.08;letter-spacing:-.028em} .hero-stories__content p{font-size:12.5px;margin:8px 0 12px;color:rgba(255,255,255,.78)} .hero-stories__link{font-size:12.5px} .hero-stories__controls{right:14px;bottom:14px;gap:7px} .hero-stories__arrow{width:32px;height:32px;background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3)} /* Точки-переключатели вытягиваются в полоски — как индикатор в приложениях. */ .hero-stories__dots{gap:6px} .hero-stories__dots button{width:7px;height:7px;background:rgba(255,255,255,.42)} .hero-stories__dots button.is-active{width:22px;background:#fff} } /* ---------------------------------------------------------------------------- Горизонтальные ленты вместо сеток. Плитки 2×2 и сетки 3×3 на телефоне дают мелкие карточки: подпись ужимается, фотография становится иконкой. Ленты решают это одним приёмом: карточка шириной 76–86% экрана (крупный кадр и читаемый текст), а край следующей карточки торчит из-за края и сам объясняет, что список листается. Прокрутка — родная браузерная, поэтому работают инерция, «пружина» и зацеп на карточке. ------------------------------------------------------------------------- */ @media (max-width:860px), (display-mode: standalone){ #urgent-grid,#shelters-grid,#stories-grid{ display:flex;gap:12px; overflow-x:auto;overflow-y:hidden; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; margin:0 calc(var(--g) * -1); padding:4px var(--g) 16px; scroll-padding-inline:var(--g); } #urgent-grid::-webkit-scrollbar, #shelters-grid::-webkit-scrollbar, #stories-grid::-webkit-scrollbar{display:none} #urgent-grid>*,#shelters-grid>*,#stories-grid>*{scroll-snap-align:start} /* Появление карточек при прокрутке (.reveal) рассчитано на движение сверху вниз: элементы вне кадра прозрачны, пока в него не попадут. В ленте это ломает главное — край следующей карточки, который и подсказывает, что список листается, стоял бы прозрачной пустотой. Внутри лент показываем карточки сразу: их «появление» — сама прокрутка. */ #urgent-grid .reveal, #shelters-grid .reveal, #stories-grid .reveal{opacity:1;transform:none;transition:none} /* ---- Срочные объявления ---- */ #urgent-grid .pet-card{ flex:0 0 76%;max-width:76%;border-radius:20px; border-color:var(--hair);box-shadow:var(--sh-2); } #urgent-grid .pet-card:active{transform:scale(.992)} #urgent-grid .pet-card__media{aspect-ratio:1/.92} #urgent-grid .pet-card__body{padding:12px;gap:6px} #urgent-grid .pet-card__title h3{font-size:16px;letter-spacing:-.02em} #urgent-grid .pet-card__desc{font-size:12.5px;line-height:1.4;-webkit-line-clamp:2} /* Вместо кнопки «Подробнее» — указатель открытия: в ленте срочных объявлений карточка открывается касанием по любой её точке. */ #urgent-grid .pet-card__cue{width:32px;height:32px} #urgent-grid .pet-card__loc{font-size:11.5px} /* ---- Баннер ветклиник ---- Короткий, но плотный блок: тёмный градиент, белая кнопка внутри. Брендовая кнопка на брендовом фоне сливалась, поэтому внутри баннера кнопки меняются местами по весу — белая основная, стеклянная вторая. */ .cta-band{ display:block;padding:24px;border-radius:24px;box-shadow:var(--sh-3); background:linear-gradient(155deg,#C1402E 0%,#8E2A20 58%,#7A3A1E 100%); position:relative;overflow:hidden; } .cta-band::before{ content:'';position:absolute;inset:0;pointer-events:none; background:radial-gradient(420px 240px at 88% 4%,rgba(255,199,160,.3),transparent 70%); } .cta-band>*{position:relative;z-index:1} .cta-band .eyebrow{ background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.26);color:#fff; backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); } .cta-band h2{font-size:clamp(21px,6vw,25px);letter-spacing:-.028em} .cta-band p{font-size:14.5px;line-height:1.6} .cta-band__actions{display:grid;gap:10px;margin-top:18px} .cta-band__actions .btn{width:100%;min-height:50px} .cta-band .btn--primary{background:#fff;color:var(--brand-dark);box-shadow:0 8px 20px rgba(43,24,19,.22)} .cta-band .btn--ghost{ background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.34);color:#fff; box-shadow:none;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); } /* ---- Быстрые действия ---- Из четырёх карточек-плиток получается список строк с фотографией слева — так же выглядят разделы в приложениях: крупный кадр, название, пояснение, стрелка. Сетка задана областями, поэтому разметку менять не пришлось. */ .quick{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 8px;margin-top:0} .quick__item{ display:grid;grid-template-columns:70px minmax(0,1fr); grid-template-areas:"pic title" "pic text" "pic more"; gap:6px 14px;align-items:center; padding:12px;border-radius:20px;background:#fff;border:1px solid var(--hair); box-shadow:var(--sh-1); } .quick__item:active{transform:scale(.995)} /* Новые карточки — широкие промо-баннеры, не квадратные иконки. */ .quick__item:has(.quick__banner){display:block;padding:0;border:0;border-radius:0;background:none;text-align:center} .quick__item:has(.quick__banner) .quick__ico.quick__banner{display:block;position:static;width:100%;height:auto;aspect-ratio:1/1;margin:0;padding:0;border-radius:20px;overflow:hidden;background:none;flex:none} .quick__item:has(.quick__banner) h3, .quick__item:has(.quick__banner) p, .quick__item:has(.quick__banner) .quick__more{display:block} .quick__ico, .quick__ico.quick__image{ grid-area:pic;width:70px;height:70px;border-radius:16px;overflow:hidden; box-shadow:0 4px 12px rgba(43,24,19,.12); } .quick__image img{width:100%;height:100%;object-fit:cover} .quick__item h3{grid-area:title;font-size:16.5px;margin:0;letter-spacing:-.02em} .quick__item p{ grid-area:text;font-size:12.5px;line-height:1.4;color:var(--muted);margin:0; display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden; } .quick__more{grid-area:more;font-size:12.5px;font-weight:700;color:var(--brand);gap:5px;white-space:nowrap} .quick__more .ico{width:14px;height:14px} /* Название и пояснение не слипаются: у плитки-баннера блоки идут друг под другом, поэтому зазор задаём вручную — в сетке он не работает. */ .quick__item:has(.quick__banner) h3{margin:8px 0 0;font-size:14px;line-height:1.2;font-weight:800;text-align:center} .quick__item:has(.quick__banner) p{margin:3px 0 0;font-size:11.5px;line-height:1.3;color:var(--muted);text-align:center;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .quick__item:has(.quick__banner) .quick__more{display:none} /* ---- Защита питомца ---- Тёмный раздел во всю ширину — опора страницы, к которой взгляд возвращается. Орб уменьшен, стеклянная карточка статуса встала по центру под ним (на широком экране она уезжает вправо, на телефоне это выглядело случайно). */ .petbot-callout{ padding:40px 0;position:relative;overflow:hidden; background:linear-gradient(165deg,#331A11 0%,#1D1009 55%,#3B1D12 100%); } .petbot-callout::before{ content:'';position:absolute;width:420px;height:420px;right:-170px;top:-190px;border-radius:50%; background:radial-gradient(circle,rgba(227,18,76,.42),transparent 66%);pointer-events:none; } .petbot-callout__grid{gap:22px} .petbot-callout .eyebrow{ background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.22);color:#FFD9C2; } .petbot-callout .h-l{color:#fff} .petbot-callout .lead{font-size:15px;color:rgba(255,255,255,.78)} .petbot-callout__visual{min-height:0;margin-top:8px;padding-bottom:34px} .petbot-orb{ width:134px;height:134px; box-shadow:0 0 0 12px rgba(242,154,107,.09),0 0 0 26px rgba(242,154,107,.05),0 22px 46px rgba(0,0,0,.34); } .petbot-orb .ico{width:62px;height:62px} .petbot-scan{ right:auto;left:50%;transform:translateX(-50%);bottom:0; padding:12px 16px;border-radius:16px;align-items:center;text-align:center; background:rgba(13,22,39,.66);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); } .petbot-scan b{font-size:15.5px} .petbot-scan small{font-size:11.5px} .petbot-callout__actions{display:grid;gap:12px;width:100%;margin-top:20px} .petbot-callout__actions .btn{width:100%;min-height:52px} .petbot-callout__note{text-align:center;font-size:12.5px} /* ---- Статистика ---- Таблица с волосяными линиями на телефоне превращается в четыре карточки 2×2 с цветной засечкой слева: числа читаются как достижения, а не как строки отчёта. */ .stats{ display:grid;grid-template-columns:1fr 1fr;gap:10px; background:transparent;border:0;border-radius:0;overflow:visible; } .stat{ position:relative;overflow:hidden;border-radius:18px;padding:16px 14px; background:#fff;border:1px solid var(--hair);box-shadow:var(--sh-1); } .stat::before{ content:'';position:absolute;left:0;top:0;bottom:0;width:3px; background:linear-gradient(180deg,var(--ac,var(--brand)),transparent); } .stat:nth-child(2){--ac:var(--success)} .stat:nth-child(3){--ac:var(--amber)} .stat:nth-child(4){--ac:var(--indigo)} .stat__num{font-size:28px;font-weight:800;letter-spacing:-.035em;color:var(--ink)} .stat__label{font-size:13.5px;font-weight:650;line-height:1.35;margin-top:4px} .stat__sub{font-size:11.5px;color:var(--muted);margin-top:3px} } /* ---------------------------------------------------------------------------- Приюты, взносы, отзывы — три «тяжёлых» раздела. Здесь важно не пестрота, а спокойствие: крупные карточки, один акцент на карточку и понятный следующий шаг кнопкой во всю ширину. ------------------------------------------------------------------------- */ @media (max-width:860px), (display-mode: standalone){ /* ---- Приюты ---- */ #shelters-grid .shelter-card{ flex:0 0 84%;max-width:84%;grid-template-columns:1fr; border-radius:22px;border-color:var(--hair);box-shadow:var(--sh-2); } #shelters-grid .shelter-card__media{min-height:0;aspect-ratio:16/10.5} #shelters-grid .shelter-card__body{padding:16px} #shelters-grid .progress{height:9px;border:0;background:var(--bg-mist)} #shelters-grid .progress-meta{font-size:12.5px} #shelters-grid .btn{width:100%;min-height:48px;border-radius:14px} /* ---- Взносы ---- Тёмная панель — самый дорогой объект страницы: глубокий градиент, мягкое свечение вверху справа, стеклянная внутренняя карточка. Кнопка во всю ширину: на телефоне палец должен попадать в неё без прицеливания. */ .donate{padding:26px 20px;border-radius:26px;box-shadow:var(--sh-3)} .donate::before{width:430px;height:430px;right:-180px;top:-210px} .donate__grid{gap:24px} .donate h2{font-size:clamp(21px,6.2vw,25px);line-height:1.14;margin-bottom:12px} .donate p{font-size:14.5px;line-height:1.62} .donate .h-m{font-size:26px;letter-spacing:-.032em} .donate__panel{ padding:18px;border-radius:20px; background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); } .donate__panel h3{font-size:16px;letter-spacing:-.01em} .amounts{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:12px} .amount{padding:13px 4px;border-radius:14px;font-size:14px;font-weight:750} .amount.is-active{box-shadow:0 8px 18px rgba(227,18,76,.32)} .donate__panel .input{height:50px;font-size:16px;padding:0 14px;border-radius:14px} .donate__panel .btn--block{min-height:52px;border-radius:16px;font-size:16px} .donate__what{font-size:12.5px} .donate__hint{font-size:11.5px;line-height:1.5} /* ---- Результаты: лента отзывов ---- */ #stories-grid .review-card{ flex:0 0 86%;max-width:86%;padding:18px;border-radius:22px; border-color:var(--hair);box-shadow:var(--sh-2); } #stories-grid .review-card::before{height:3px} #stories-grid .review-card__quote-mark{height:30px;font-size:44px;opacity:.42} #stories-grid .review-card__quote{font-size:14.5px;line-height:1.68} #stories-grid .review-card__result{padding:12px 14px;border-radius:14px;margin:16px 0 14px} #stories-grid .review-card__avatar{width:40px;height:40px} /* ---- Отзывы сообщества ---- Панели встают в столбик, поля ввода — на всю ширину и с шрифтом 16px: при меньшем размере Safari на iPhone приближает страницу при касании поля, и вёрстка после этого разъезжается. */ .community-reviews__dashboard{grid-template-columns:1fr;gap:14px;margin-top:24px} .community-rating,.community-review-form-card{ padding:18px;border-radius:20px;border-color:var(--hair);box-shadow:var(--sh-1); } .community-rating__main{gap:12px;margin-top:12px} .community-rating__main>strong{font-size:46px} .site-review-stars{font-size:21px} .community-rating__count{margin-top:6px;font-size:12.5px} .community-rating__breakdown{gap:8px;margin-top:18px} .community-rating__row{grid-template-columns:28px minmax(0,1fr) 24px;gap:9px;font-size:12.5px} .community-rating__track{height:9px} .community-rating__note{margin-top:14px;font-size:11.5px} .community-review-form-card__lead{font-size:13px;line-height:1.55;margin:7px 0 16px} .site-review-form__fields{grid-template-columns:1fr;gap:0} .site-review-field{margin-bottom:13px} .site-review-field>span:first-child{font-size:13px;margin-bottom:6px} .site-review-field input, .site-review-field select, .site-review-field textarea{ min-height:50px;padding:13px 14px;font-size:16px;border-radius:14px;border-color:var(--line); } .site-review-field textarea{min-height:132px} .site-review-rating__choices{gap:7px} .site-review-rating__choice>span:first-of-type{font-size:34px;padding:1px 2px} #site-review-form .btn{width:100%;min-height:52px;border-radius:16px} .community-review-list{grid-template-columns:1fr;gap:12px} .community-review-card{padding:17px;border-radius:18px;border-color:var(--hair)} #site-review-more{width:100%;min-height:48px} /* ---- Финальный призыв ---- Снимок и его скругление в этом разделе заданы прямо в разметке, поэтому здесь только воздух и порядок: картинка уходит под текст, текст дышит, кнопки растягиваются на строку. */ .list-check li{gap:10px;font-size:14.5px;line-height:1.5;margin-bottom:10px} .list-check li::before{width:20px;height:20px;margin-top:1px} .section .flex>.btn{flex:1 1 100%;min-height:52px} /* ---- Миша ---- У этого блока своя таблица стилей прямо в разметке главной страницы, а встроенный