/* Tokki Games — токены, типографика и общие компоненты. Характер оформления — в theme.css. @font-face здесь нет намеренно: шрифт свой у каждого языка и объявляется инлайном в каждой страницы (см. src/templates/base.html). */ :root { /* цвета сняты пипеткой с логотипа, чтобы сайт и марка совпадали */ --accent: #f90648; --accent-soft: #fc1054; --outline: #e6e8eb; --ink: #0e0e11; --ink-2: #15151a; --ink-3: #1c1c23; --line: #26262f; --text: #ececf0; --muted: #8b8b97; --wrap: 1180px; --gut: clamp(20px, 5vw, 64px); --radius: 14px; --ease: cubic-bezier(0.22, 1, 0.36, 1); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } /* overflow-x только на body прокрутку не отменяет — html остаётся скролл-контейнером. Нужны оба. clip вместо hidden, чтобы не ломать position: sticky у шапки. */ html, body { overflow-x: clip; } body { margin: 0; background: var(--ink); color: var(--text); font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); } /* ── шапка ─────────────────────────────────────────────── */ .nav { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(14px); background: color-mix(in srgb, var(--ink) 82%, transparent); border-bottom: 1px solid transparent; transition: border-color .3s var(--ease); } .nav.is-stuck { border-bottom-color: var(--line); } .nav__in { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 72px; } .brand { display: flex; align-items: center; gap: 12px; } .brand img { height: 30px; width: auto; } .brand__name { font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: 13px; } .nav__links { display: flex; gap: 28px; align-items: center; } .nav__links a { font-size: 14px; color: var(--muted); transition: color .2s var(--ease); } .nav__links a:hover { color: var(--text); } /* ── секции ────────────────────────────────────────────── */ section { padding-block: clamp(72px, 11vw, 140px); } .eyebrow { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); font-weight: 700; margin: 0 0 18px; } h1, h2, h3 { margin: 0; line-height: 1.05; letter-spacing: -0.02em; font-weight: 700; } h2 { font-size: clamp(30px, 4.4vw, 48px); } h3 { font-size: 21px; letter-spacing: -0.01em; } p { margin: 0 0 1em; } .lead { font-size: clamp(17px, 2vw, 20px); color: var(--muted); max-width: 56ch; } /* ── карточки игр ──────────────────────────────────────── */ .games { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .card { position: relative; background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; display: flex; flex-direction: column; gap: 14px; transition: transform .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease); } .card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); } .card--soon { opacity: .55; } .card--soon:hover { transform: none; border-color: var(--line); } .tag { align-self: flex-start; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); } .tag--live { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); } .card p { color: var(--muted); margin: 0; font-size: 15px; } .card__meta { margin-top: auto; padding-top: 10px; font-size: 13px; color: var(--muted); } /* ── кнопки ────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 10px; padding: 13px 24px; border-radius: 999px; font-weight: 700; font-size: 15px; background: var(--accent); color: #fff; transition: transform .25s var(--ease), filter .25s var(--ease); } .btn:hover { transform: translateY(-2px); filter: brightness(1.1); } .btn--ghost { background: transparent; color: var(--text); border: 1px solid var(--line); } .btn--ghost:hover { border-color: var(--accent); filter: none; } /* ── подвал ────────────────────────────────────────────── */ .foot { border-top: 1px solid var(--line); padding-block: 40px; display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: space-between; font-size: 14px; color: var(--muted); } .foot a:hover { color: var(--text); } .foot__links { display: flex; flex-wrap: wrap; gap: 10px 22px; } /* ── появление при скролле ─────────────────────────────── */ .reveal { opacity: 0; transform: translateY(22px); } .reveal.is-in { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .7s var(--ease); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal, .reveal.is-in { opacity: 1; transform: none; transition: none; } .card:hover, .btn:hover { transform: none; } }