/* ========================================================================== Мобильный квиз «Подберём кофе за минуту» (≤767px). Файл подключается после site.css, поэтому при равной специфичности побеждает. Там, где site.css целится двумя классами (.quizsec .q-step, .qc .qc-t …), селектор повторён один в один — без !important. Размеры записаны в px, а не в --u/--qu: на 375px эти доли макета упираются в минимум ≈0,7px (а --qu внутри .quiz-row вообще считается как 100cqw/900 ≈ 0,38px) — от них текст выходил 10–11 px. Заказчик: «тест и результат — рядом». Здесь это одна колонка: шаг, вопрос, дорожка и сразу под ними варианты; результат встаёт на то же место, где стояли варианты. Пустот под колонкой нет, потому что колонка не держит высоту 700 под декор. ========================================================================== */ /* Телефонный слой: узкий экран ИЛИ телефон, повёрнутый набок (ширина до планшетной, высота меньше 520px — у планшета в альбоме высота 768 и больше, он сюда не попадает). Условие одно и то же во всех файлах mobile/ и в их скриптах — менять только всё сразу. */ @media (max-width:767px), (max-width:1023px) and (max-height:520px){ /* ---- секция ---- */ /* Перебивает .quizsec{padding:80px 0 64px} и padding-top:50px (≤1039). */ .quizsec{padding:32px 0} /* Фоновые перья рассчитаны на холст 1440: на телефоне они вылезали из-под контента и читались как грязь. */ .quizsec .bg-orn-4, .quizsec .bg-orn-5{display:none} /* ---- ряд: одна колонка, без зазора между колонками ---- Перебивает .quiz-row{grid-template-columns:440 1fr; column-gap; row-gap}. */ .quiz-row{display:grid;grid-template-columns:minmax(0,1fr); column-gap:0;row-gap:14px;margin-top:0} /* ---- левая колонка: шаг, вопрос, дорожка ---- min-height:700*--qu держал место под сборку «Кения» (см. 4580 в site.css) — на телефоне это была пустая простыня между вопросом и ответами. scroll-margin-top — запас под липкий ряд «меню + поиск» (~48px), к которому mobile/quiz.js прокручивает при показе результата. */ .quiz-aside{min-height:0;height:auto;width:auto;max-width:none; scroll-margin-top:60px} /* Декор «кольцо + пачка» (до 15.09.2026 — кольцо со снимком, посадка в home.css) нарисован под колонку 440 и в столбик не помещается: в 120px он превращается в пятно и отодвигает результат вниз — ровно то, чего заказчик просил не делать. site.css прячет его с ≤1039, здесь продублировано, чтобы мобильный файл не зависел от того правила. Картинки там с loading="lazy", поэтому спрятанные телефон и не скачивает. */ .quiz-deco{display:none} /* Перебивает .quizsec .q-step{width/height:51*--qu; font-size:28*--qu}. */ .quizsec .q-step{width:40px;height:40px;font-size:20px} /* Перебивает .quizsec .q-title{margin-top:12*--qu; font-size:40*--qu / 28*--u; min-height:88*--qu}. */ .quizsec .q-title{margin-top:10px;font-size:20px;line-height:1.15; min-height:0;height:auto} /* Дорожка из четырёх точек: перебивает width:188*--qu / 188*--u и размеры точек 20*--qu / 20*--u, линию ::before 10/10/3*--qu. */ .quizsec .q-prog{width:160px;margin-top:12px;padding-left:0} .quizsec .q-prog i{width:16px;height:16px;border-width:3px} .quizsec .q-prog::before{left:8px;right:8px;height:3px} /* ---- варианты ответа ---- */ .quiz-main{min-height:0} /* Перебивает .qcards{gap:20*--qu}. display не трогаем: у .qcards[hidden] стоит display:none, и правило с большей специфичностью его бы сломало. */ .qcards{gap:12px} /* Карточка ответа: перебивает .qc{min-height:184*--qu; padding:16*--qu 40*--qu; gap:20*--qu; border-radius:32*--qu} и его версии ≤1039/≤759. Живой контур (wavy.js) рисуется внутрь элемента с радиусом 32, border-radius здесь — только запасная рамка для старых браузеров, поэтому тот же 32, чтобы белая подложка не выглядывала из-под контура. */ .qc{min-height:72px;padding:12px 14px;gap:12px;border-radius:32px} /* Иконка 117*--qu / 84*--u → 44px, чтобы карточка уложилась в 72–88px. */ .qc .qc-ico{width:44px;height:44px} /* Текст занимает всё между иконкой и стрелкой; min-width:0 — иначе длинное описание («Френч-пресс, дрип-пакеты…») распирает карточку и выталкивает стрелку за край. */ .qc .qc-txt{gap:3px;width:auto;flex:1 1 auto;min-width:0} /* Кегль: перебивает .qc .qc-t{font-size:24px}/20px и .qc .qc-d{17px}/15px. Высоту строки описания задаёт .sc2026-page .qc .qc-d (три класса) — повторяем её селектор, 1.15 для 13-го кегля в две строки тесновато. */ .qc .qc-t{font-size:17px;line-height:1.1} .qc .qc-d{font-size:13px;line-height:1.25} .sc2026-page .qc .qc-d{line-height:1.25} /* Стрелка: перебивает .qc .qc-go{width/height:52*--qu} и 42*--u. */ .qc .qc-go{width:40px;height:40px} /* ---- результат: встаёт на место вариантов ---- */ .qr-lead{font-size:16px;line-height:1.4;max-width:none} /* Плашка про помол в две-три строки: inline-flex с пилюлей 999px превращался в овал с текстом по центру. Галочка не сжимается. */ .qr-grind{display:flex;align-items:flex-start;gap:8px; padding:10px 14px;border-radius:18px;font-size:14px;line-height:1.3} .qr-grind svg{flex:none;margin-top:1px} /* Две карточки в две колонки: (343 − 12) / 2 ≈ 165px на карточку. Перебивает .qr-grid{gap:16px; margin-top:22px} (одна колонка ≤759). */ .qr-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px} /* Карточка подбора столбиком: перебивает .qr-card{grid-template-columns: 118px 1fr; gap:18px; padding:16px 18px}. min-width:0 — сетка не должна расти от длинного названия. */ .qr-card{grid-template-columns:minmax(0,1fr);gap:8px;padding:12px;min-width:0} .qr-img img{max-height:120px;width:auto} /* Кегли карточки в site.css идут в --u (21*--u ≈ 15px, 14*--u ≈ 10px) — описание становилось нечитаемым. Описание режем тремя строками: в колонке 140px полный текст делал карточки разной высоты. */ .qr-card h4{font-size:15px;line-height:1.15} .qr-card p{font-size:13px;line-height:1.3;margin-top:4px; display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden} /* Цена над кнопкой, кнопка на всю ширину карточки. Перебивает .qr-buy{justify-content:space-between; gap:14px; padding-top:14px}. */ .qr-buy{flex-direction:column;align-items:stretch;gap:10px;margin-top:4px;padding-top:10px} .qr-card .qr-price{font-size:17px;line-height:1.15} .qr-card .qr-price small{font-size:13px;margin-top:2px} /* Кнопка «Выбрать»: базовый .pbtn считает высоту и кегль в --u (52*--u ≈ 36px, 16*--u ≈ 11px). Фигура остаётся той же: концы масштабируются от --btn-h, середина — от --cap (см. BRAND-RULES §3.1). */ .qr-card .pbtn{--btn-h:44px;width:100%;padding:0 14px;font-size:14px;gap:6px} /* «Пройти тест заново»: на десктопе это текстовая ссылка с жёлтым подчёркиванием. На телефоне ей нужна тап-цель на всю ширину, а по §3.1 всё, что выглядит кнопкой, рисуется фирменной формой со скосом: контурный вариант — концы cap-lgreen, между ними две линии 1,6px (0,0288 высоты), как у .pbtn-line. Пути абсолютные: объединитель CSS Битрикса может переложить файл и сломать относительные. */ .qr-reset{--btn-h:48px;--cap:calc(var(--btn-h) * 0.5556); display:flex;align-items:center;justify-content:center; width:100%;min-height:var(--btn-h);margin-top:16px;padding:0 16px; border:0;border-radius:0; font-family:var(--font);font-weight:700;font-size:15px;line-height:1; color:var(--green-deep-2); background-color:transparent;background-repeat:no-repeat; background-position:left center,right center,center top,center bottom; background-size:auto 100%,auto 100%, calc(100% - 2 * var(--cap)) calc(var(--btn-h) * 0.0288), calc(100% - 2 * var(--cap)) calc(var(--btn-h) * 0.0288); background-image:url(/local/templates/sc2026/newdesign/img/cap-lgreen-l.svg), url(/local/templates/sc2026/newdesign/img/cap-lgreen-r.svg), linear-gradient(var(--green-brand),var(--green-brand)), linear-gradient(var(--green-brand),var(--green-brand)); transition:filter .2s,transform .2s} /* Наведение не меняет фигуру — только яркость и сдвиг, как у .pbtn-line. */ .qr-reset:hover{border-bottom-color:transparent;filter:brightness(1.06);transform:translateY(-2px)} }