/* ───────────────────────────────────────────────────────────────────────────── screens.css — галерея екранів продукту, /screens/ Окремим файлом, не в style.css: той перезбирається з мокапу quiz.html, і дописане руками зникає при наступній перезбірці квіза (див. MAP.md). Токени успадковані з теми — свою палітру тут заводити не можна. ───────────────────────────────────────────────────────────────────────────── */ /* ── Герой ─────────────────────────────────────────────────────────────────── */ .sc-hero { padding: 72px 0 28px; text-align: center; } .sc-h1 { font-size: clamp(28px, 4.6vw, 46px); line-height: 1.12; letter-spacing: -0.01em; } .sc-lead { max-width: 62ch; margin: 16px auto 0; color: var(--muted); font-size: clamp(15px, 1.7vw, 17px); line-height: 1.62; } /* ── Перемикач вьюпорта ────────────────────────────────────────────────────── */ /* Сегментована пігулка, а не два ряди вкладок: два однакові ряди поспіль уже читались як зламаний рівень (урок сторінки Проєктів у застосунку). */ .sc-switch, .sc-lb-switch { display: inline-flex; gap: 2px; margin-top: 26px; padding: 3px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-round); } .sc-lb-switch { margin: 0; } .sc-sw-btn { appearance: none; border: 0; cursor: pointer; padding: 8px 18px; min-height: 40px; /* тач-ціль: 40px — мінімум, який тут вміщується */ background: transparent; color: var(--muted); font: inherit; font-size: 14px; line-height: 1; border-radius: var(--r-round); transition: background .16s, color .16s; } .sc-sw-btn:hover { color: var(--ink); } .sc-sw-btn.is-on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); } /* ── Сітка ─────────────────────────────────────────────────────────────────── */ .sc-grid-wrap { padding: 34px 0 60px; } .sc-grid { list-style: none; display: grid; gap: 26px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); } .sc-card { margin: 0; } .sc-open { display: block; width: 100%; padding: 0; cursor: zoom-in; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); text-align: left; font: inherit; color: inherit; overflow: hidden; transition: transform .18s, box-shadow .18s, border-color .18s; } .sc-open:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); border-color: rgba(38,24,21,.18); } .sc-open:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; } /* Кадр. Десктопний обрізаємо знизу до 16:10 — нижній край екрана в сітці все одно не читається, а повна висота робить картку довгою і б'є ритм рядів. */ .sc-shot { display: block; background: var(--surface-2); border-bottom: 1px solid var(--line); } .sc-shot img { display: block; width: 100%; height: auto; } .sc-shot--desktop img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; } .sc-shot--mobile { display: none; padding: 22px 0; background: var(--surface-2); } .sc-shot--mobile img { width: auto; max-width: 216px; margin: 0 auto; aspect-ratio: 390 / 500; object-fit: cover; object-position: top center; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-sm); } /* Режим «Телефон»: показуємо мобільну колонку. Керує клас на , а не стан кожної картки — інакше перемикач мусив би пройтись по всіх і десь розсинхронитись. */ body.sc-mobile .sc-shot--desktop { display: none; } body.sc-mobile .sc-shot--mobile { display: block; } .sc-meta { display: block; padding: 16px 18px 18px; } .sc-title { display: block; font-family: var(--font-display); font-size: 17px; } .sc-text { display: block; margin-top: 6px; color: var(--muted); font-size: 13.5px; line-height: 1.55; } .sc-empty { color: var(--muted); text-align: center; padding: 40px 0; } /* ── Підвал сторінки ───────────────────────────────────────────────────────── */ .sc-foot { padding: 8px 0 84px; text-align: center; } .sc-foot-lead { color: var(--muted); font-size: 15px; } .sc-foot-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 18px; } .sc-btn { display: inline-block; padding: 13px 26px; min-height: 46px; background: var(--cta); color: var(--cta-fg); text-decoration: none; border-radius: var(--r-control); font-size: 15px; } .sc-btn:hover { filter: brightness(1.06); } .sc-btn--ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); } .sc-btn--ghost:hover { border-color: var(--ink); filter: none; } .sc-foot-note { margin-top: 12px; color: var(--muted); font-size: 13px; } /* ── Лайтбокс ──────────────────────────────────────────────────────────────── */ /* `minmax(0, 1fr)`, а не `1fr` — і це не косметика. Дефолтний `1fr` дорівнює `minmax(auto, 1fr)`, тобто рядок не може стати меншим за свій вміст; знімок 2880px заввишки розпирав середній рядок, грід переповнював екран і кадр фізично накривав панель із перемикачем. Playwright показав це прямо: « intercepts pointer events» — кнопка «Телефон» була видима, але не натискалась. На око такий дефект не ловиться. */ .sc-lb { position: fixed; inset: 0; z-index: 90; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; /* Майже суцільний фон. На .93 крізь затемнення просвічувало меню сайту, і верхня панель лайтбокса читалась як його продовження — перемикач «Телефон» сідав рівно на логотип. */ background: rgba(30, 19, 16, .975); padding: 14px clamp(14px, 5vw, 64px) 18px; } .sc-lb[hidden] { display: none; } .sc-lb-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .sc-lb .sc-lb-switch { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.16); } .sc-lb .sc-sw-btn { color: rgba(255,255,255,.72); } .sc-lb .sc-sw-btn:hover { color: #fff; } .sc-lb .sc-sw-btn.is-on { background: var(--surface); color: var(--ink); } .sc-lb-live { margin-left: auto; padding: 11px 20px; min-height: 44px; display: inline-flex; align-items: center; background: var(--accent); color: var(--accent-fg); border-radius: var(--r-control); text-decoration: none; font-size: 14.5px; } .sc-lb-live:hover { filter: brightness(1.06); } .sc-lb-x { appearance: none; border: 0; cursor: pointer; width: 44px; height: 44px; border-radius: var(--r-round); background: rgba(255,255,255,.10); color: #fff; font-size: 24px; line-height: 1; } .sc-lb-x:hover { background: rgba(255,255,255,.18); } /* Кадр позиціонується АБСОЛЮТНО всередині stage, а не просто центрується флексом. Дві попередні спроби зрізали знімок знизу, і причина щоразу була в тому, від чого рахується `max-height: 100%`: • без явної висоти батька відсоток не розв'язується взагалі; • `height: 100%` на grid-елементі рахується від висоти ВСЬОГО гріда (100vh), а не від свого рядка — тобто stage ставав вищим за відведену смугу, і картинка разом із ним. При `position: absolute; inset: 0` відсотки беруться від padding-box stage, який рівно дорівнює рядку. `margin: auto` центрує в обох осях. */ .sc-lb-stage { position: relative; min-height: 0; min-width: 0; padding: 12px 0; } .sc-lb-stage picture { display: contents; } .sc-lb-stage img { position: absolute; inset: 0; margin: auto; display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; background: var(--surface); border-radius: var(--r-card); box-shadow: 0 20px 60px rgba(0,0,0,.42); } /* Телефонний кадр вужчий за екран — рамка робить його пристроєм, а не картинкою, що загубилась посеред темряви. */ body.sc-mobile .sc-lb-stage img { border-radius: 18px; border: 1px solid rgba(255,255,255,.14); } .sc-lb-nav { position: absolute; top: 50%; transform: translateY(-50%); appearance: none; border: 0; cursor: pointer; width: 48px; height: 48px; border-radius: var(--r-round); background: rgba(255,255,255,.10); color: #fff; font-size: 30px; line-height: 1; } .sc-lb-nav:hover { background: rgba(255,255,255,.20); } .sc-lb-prev { left: clamp(6px, 2vw, 20px); } .sc-lb-next { right: clamp(6px, 2vw, 20px); } .sc-lb-cap { text-align: center; color: #fff; max-width: 68ch; margin: 0 auto; } .sc-lb-title { font-family: var(--font-display); font-size: 17px; } .sc-lb-text { margin-top: 5px; color: rgba(255,255,255,.74); font-size: 13.5px; line-height: 1.55; } /* ── Телефон ───────────────────────────────────────────────────────────────── */ @media (max-width: 760px) { .sc-hero { padding: 44px 0 20px; } .sc-grid { grid-template-columns: 1fr; gap: 20px; } .sc-grid-wrap { padding: 26px 0 44px; } /* Стрілок на телефоні НЕМАЄ — гортання свайпом. Перша версія намагалась перенести їх униз до підпису через grid-column, і це був чистий баг: `.sc-lb-prev/next` — прямі діти `.sc-lb`, а правила писались у координатах `.sc-lb-cap`, куди вони ніколи не потрапляли. На екрані вийшло, що панель з'їла пів висоти, стрілки зависли вгорі, а підпис розтягнувся вузькою колонкою на весь низ. По краях лишати теж не можна — 48px кнопка накриває сам знімок, заради якого людина сюди й натиснула. */ .sc-lb { padding: 10px 12px 14px; } .sc-lb-nav { display: none; } .sc-lb-bar { gap: 8px; flex-wrap: nowrap; } /* `nowrap` обов'язковий: «Відкрити живим →» ламалось на два рядки і кнопка виростала вдвічі, з'їдаючи висоту в самого кадру. */ .sc-lb-live { margin-left: auto; padding: 10px 13px; font-size: 13px; white-space: nowrap; } .sc-lb .sc-sw-btn { padding: 8px 12px; font-size: 13px; } .sc-lb-cap { padding-top: 4px; } .sc-lb-text { font-size: 12.5px; } } @media (prefers-reduced-motion: reduce) { .sc-open { transition: none; } .sc-open:hover { transform: none; } } /* Посилання в галерею з-під скріна на сторінці тарифу. Живе тут, а не в tariff.css: клас належить галереї, і при її прибиранні прибереться разом. */ .tf-shot-more { display: inline-block; margin-left: 6px; color: var(--accent-ink); text-decoration: none; border-bottom: 1px solid currentColor; } .tf-shot-more:hover { color: var(--ink); }