/* ZAPlayGuide - стилі публічного сайту. Пишемо mobile-first: базові правила = телефон, десктоп додається медіа- запитом. Android це 85%+ мобільного трафіку ZA, і саме він має отримувати найкоротший шлях до першого екрана, без перевизначень. */ /* ШРИФТИ З НАШОГО Ж ДОМЕНУ (SEO-аудит, крок 5). Syne і Manrope - змінні шрифти: один файл на гарнітуру покриває всі накреслення, тож замість сімох файлів з Google - два наших. Лише латиниця: сайт англійською. Шлях відносний (від site.css), щоб працював і на домені, і в статичному знімку. swap: текст видно одразу системним шрифтом, і він підміняється, щойно файл доїде. Ліцензія OFL, тексти ліцензій лежать поруч, у static/fonts/. */ @font-face { font-family: 'Syne'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('fonts/syne-latin.woff2') format('woff2'); } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('fonts/manrope-latin.woff2') format('woff2'); } :root { /* Палітра з CLAUDE.md */ --ground: #f4f2ea; --ink: #15201a; --green: #1d6b46; --green-dark: #134a30; --accent: #e3b23c; --muted: #58645c; --card: #ffffff; /* Похідні відтінки з макета */ --band: #e6e2d3; --ink-dim: #4a5a50; --body-text: #3a4a40; --hairline: #ebe8dc; --chip-green-bg: #d9eadd; --on-dark: #b9c3bc; /* КОЛІР ЗА ТИПОМ ГРИ. Сітка з чотирнадцяти однакових плиток не читається: око не має за що зачепитись, і всі ігри зливаються в одну. Тип - найсильніша ознака, за якою гравець обирає (crash і слот це різні заняття), тож саме він і отримує колір. Пари підібрані так, щоб текст на плашці лишався контрастним, а жодна з них не сперечалась із золотою кнопкою Play: вона має бути найяскравішим, що є на екрані. */ --crash-bg: #fde4d8; --crash-ink: #9c3d16; --slot-bg: #e8e0fb; --slot-ink: #55349b; --table-bg: #d9e8f5; --table-ink: #1f5478; --lottery-bg: #d5efe9; --lottery-ink: #14675a; /* Тони міток. Ті самі шість, що в app/rules.py GAME_MARKERS. */ --tone-gold-bg: #fbeccb; --tone-gold-ink: #7d5606; --tone-green-bg: #d9eadd; --tone-green-ink: #145236; --tone-blue-bg: #d9e8f5; --tone-blue-ink: #1f5478; --tone-red-bg: #fbdcd8; --tone-red-ink: #93301f; --tone-teal-bg: #d5efe9; --tone-teal-ink: #14675a; --tone-purple-bg: #e8e0fb; --tone-purple-ink: #55349b; --font-display: 'Syne', system-ui, sans-serif; --font-body: 'Manrope', system-ui, sans-serif; --gutter: 16px; --radius: 12px; --radius-lg: 14px; } *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: var(--font-body); background: var(--ground); color: var(--ink); font-size: 16px; line-height: 1.55; /* Цифри однієї висоти. Syne за замовчуванням малює "старі" цифри: 1 і 2 заввишки з малу літеру, 3-9 звисають нижче рядка, і номер 1 у рейтингу читався як прапорець (перевірка на телефоні, 26.09.2026). */ font-variant-numeric: lining-nums; /* Футер унизу екрана і на короткій сторінці (404, /payments/, /terms/ на високому моніторі): під ним лишалась бежева смуга до 390 px, а між футером і нижньою панеллю - порожнеча. Росте
, а не відступи. */ display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; } body > main { flex: 1 0 auto; } /* Обгортка банера над футером - прямий нащадок : у колонці flex її margin-inline: auto стискав би її до ширини вмісту. */ body > .wrap { width: 100%; } /* 404: уся сторінка - темна смуга, до самого футера (на високому екрані під нею лишалось 72-390 px бежевого і 32 px смужки над футером). */ .main--band { display: flex; flex-direction: column; } .main--band > .hero-band { flex: 1 0 auto; } body:has(> .main--band) > .site-footer { margin-top: 0; } /* Місце під липку нижню панель, щоб вона не накривала футер: її висота (10 + 52 + 10 і смуга iPhone) мінус 1 px. Було 76 на всіх сторінках: між футером і панеллю світлішала смужка 4 px, а на сторінках без панелі (trust, 404) під футером лишалась порожня бежева смуга 76 px. Рівно 72 лишало світлу лінію в 1 фізичний піксель на екранах з дробовим масштабом (2.625, 2.75 - більшість Android): краї футера і панелі згладжувались на тлі сторінки. 1 px заходу панелі на футер її ховає. */ body:has(.sticky-cta) { padding-bottom: calc(71px + env(safe-area-inset-bottom, 0px)); } a { color: var(--green); text-decoration: none; } a:hover { color: var(--green-dark); } img { max-width: 100%; height: auto; } h1, h2, h3 { font-family: var(--font-display); letter-spacing: -0.02em; margin: 0; } /* На 390px заголовок у 30px займає чотири рядки і сам собою витісняє кадр гри за межі першого екрана. 25px читається так само, а екран лишається під те, заради чого людина прийшла. */ h1 { font-weight: 800; font-size: 25px; line-height: 1.15; text-wrap: balance; } h2 { font-weight: 700; font-size: 23px; letter-spacing: -0.01em; } h2, h3 { text-wrap: pretty; } h3 { font-weight: 700; font-size: 18px; } p { margin: 0; color: var(--body-text); } .wrap { padding-inline: var(--gutter); } .stack { display: flex; flex-direction: column; } .gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .gap-20 { gap: 20px; } .gap-28 { gap: 28px; } /* ШАПКА. Закріплена вгорі (вимога власника: навігація завжди під рукою). sticky, а не fixed: шапка лишається в потоці сторінки, тож під неї не треба підкладати відступ, який розійшовся б з її висотою на різних екранах, і нічого не стрибає, коли вона стає "липкою". Смуга розкриття під нею прокручується: вона потрібна до контенту, а не над ним завжди. */ :root { --header-h: 56px; } .site-header { background: var(--ink); color: var(--ground); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 6px var(--gutter); min-height: var(--header-h); position: sticky; top: 0; z-index: 40; box-shadow: 0 1px 0 rgba(244, 242, 234, 0.06); } /* Якорі змісту ("On this page") не мають ховатись під шапкою. */ html { scroll-padding-top: calc(var(--header-h) + 12px); } [id] { scroll-margin-top: calc(var(--header-h) + 12px); } .logo { font-family: var(--font-display); font-weight: 800; font-size: 17px; color: var(--ground); } .logo span { color: var(--accent); } .site-nav { display: none; gap: 20px; font-size: 14px; font-weight: 600; } .site-nav a { color: var(--ground); } .site-nav a[aria-current] { color: var(--accent); } /* МЕНЮ НА ТЕЛЕФОНІ (SEO-аудит, крок 5) details/summary: відкривається браузером, без JavaScript. Панель лягає поверх сторінки під шапкою на всю ширину, пункти заввишки 52px - більше за мінімальні 48, бо в них цілять великим пальцем на ходу. */ .menu > summary { list-style: none; cursor: pointer; user-select: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; border: 1px solid var(--ink-dim); border-radius: 10px; color: var(--ground); font-weight: 700; font-size: 14px; } .menu > summary::-webkit-details-marker { display: none; } /* На 320 px (малі телефони, або 360 px з великим масштабом екрана) лого і Menu не вміщались, і вся сторінка гортались убік. Звичні розміри - з 360. */ @media (min-width: 360px) { .logo { font-size: 20px; } .menu > summary { gap: 9px; padding: 0 14px; } } .menu > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .menu__icon { width: 16px; height: 12px; flex: none; background: linear-gradient(currentColor 0 0) top / 100% 2px no-repeat, linear-gradient(currentColor 0 0) center / 100% 2px no-repeat, linear-gradient(currentColor 0 0) bottom / 100% 2px no-repeat; } .menu__close { display: none; } .menu[open] .menu__open { display: none; } .menu[open] .menu__close { display: inline; } .menu[open] > summary { border-color: var(--accent); } .menu__panel { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; background: var(--ink); border-top: 1px solid var(--ink-dim); padding: 4px var(--gutter) 14px; display: flex; flex-direction: column; box-shadow: 0 14px 28px rgba(21, 32, 26, 0.3); /* Шапка закріплена, тож панель теж: довге меню на низькому екрані прокручується всередині себе, а не з'їжджає за край. */ max-height: calc(100vh - var(--header-h)); overflow-y: auto; } .menu__panel a { color: var(--ground); font-family: var(--font-display); font-weight: 700; font-size: 18px; min-height: 52px; display: flex; align-items: center; border-bottom: 1px solid rgba(244, 242, 234, 0.08); } .menu__panel a:last-child { border-bottom: 0; } .menu__panel a[aria-current] { color: var(--accent); } /* СМУГА РОЗКРИТТЯ. Вимога trust-шару: видно до контенту, не в футері. */ .disclosure { background: var(--band); color: var(--ink-dim); font-size: 12px; line-height: 1.4; padding: 8px var(--gutter); display: flex; flex-wrap: wrap; gap: 6px; } .disclosure a { font-weight: 600; } /* ХЛІБНІ КРИХТИ */ .breadcrumb { font-size: 13px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px; } .breadcrumb .current { color: var(--ink); font-weight: 600; } /* ЧІПИ */ .chips { display: flex; flex-wrap: wrap; gap: 8px; } .chip { font-size: 12px; font-weight: 700; padding: 6px 10px; border-radius: 999px; background: var(--band); color: var(--ink-dim); text-transform: uppercase; letter-spacing: 0.02em; } .chip--game { background: var(--chip-green-bg); color: var(--green); } /* Ярлик-посилання на сторінці гри: тип і провайдер ведуть у свої категорії. */ a.chip { text-decoration: none; } a.chip:hover, a.chip:focus-visible { text-decoration: underline; } /* КАТЕГОРІЇ ІГОР (app/categories.py, partials/game_categories.html). Два рядки: за типом і за провайдером. Кнопки не нижчі за 40px, щоб у них влучав палець; поточна категорія - темна, як пункт меню в шапці. */ .cat-nav { display: grid; gap: 10px; } .cat-nav__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .cat-nav__label { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; min-width: 92px; } .cat-link { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--hairline); background: var(--card); color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: none; } .cat-link:hover { border-color: var(--ink-dim); } .cat-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .cat-link[aria-current] { background: var(--ink); border-color: var(--ink); color: var(--ground); } .cat-link__count { font-size: 12px; font-weight: 700; color: var(--muted); } .cat-link[aria-current] .cat-link__count { color: var(--accent); } .cat-link__dot { width: 9px; height: 9px; border-radius: 50%; flex: none; } .cat-link__dot--crash { background: var(--crash-ink); } .cat-link__dot--slot { background: var(--slot-ink); } .cat-link__dot--table { background: var(--table-ink); } .cat-link__dot--lottery { background: var(--lottery-ink); } @media (max-width: 560px) { .cat-nav__label { flex-basis: 100%; } } /* Де підпис стоїть у рядку з кнопками, перенесені кнопки починаються під першою кнопкою, а не під підписом "BY TYPE" (100 = 92 підпису + 8). */ @media (min-width: 561px) { .cat-nav > .cat-nav__row { padding-left: 100px; } .cat-nav > .cat-nav__row > .cat-nav__label { margin-left: -100px; } } /* КНОПКИ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 22px; border-radius: 10px; font-weight: 800; font-size: 16px; border: 2px solid transparent; /*