/* ══════════════════════════════════════════════════════════════════ games.togetherly.day — общие стили Токены сняты с лендинга togetherly.day (розовая схема M3). Светлая тема стоит по умолчанию, тёмная включается атрибутом data-theme="dark" на — его ставит assets/theme.js. ══════════════════════════════════════════════════════════════════ */ :root { color-scheme: light; --primary: #8F4A57; --on-primary: #FFFFFF; --primary-container: #FFD9DE; --on-primary-container: #3B0713; --secondary-container: #FFDADF; --on-secondary-container: #2C151A; --tertiary-container: #FFDDB6; --on-tertiary-container: #2C1700; --surface: #FFF8F7; --on-surface: #22191A; --on-surface-variant: #524345; --surface-lowest: #FFFFFF; --surface-low: #FFF0F1; --surface-container: #FBEAEB; --surface-high: #F5E4E5; --outline: #857376; --outline-variant: #D7C1C3; /* Уровни: цвет — это возраст, а не украшение */ --lv-kid: #FFDDB6; --lv-kid-ink: #2C1700; --lv-teen: #FFDADF; --lv-teen-ink: #2C151A; --lv-adult: #FFA9B6; --lv-adult-ink: #3B0713; --lv-spicy: #4A1020; --lv-spicy-ink: #FFD9DE; --shape-m: 16px; --shape-l: 24px; --shape-xl: 28px; --shape-xxl: 36px; --easing: cubic-bezier(0.2, 0, 0, 1); --max: 1240px; } :root[data-theme="dark"] { color-scheme: dark; --primary: #FFB2BC; --on-primary: #561D28; --primary-container: #72333E; --on-primary-container: #FFD9DE; --secondary-container: #5C3F44; --on-secondary-container: #FFDADF; --tertiary-container: #5E4108; --on-tertiary-container: #FFDDB6; --surface: #191113; --on-surface: #EFDFE0; --on-surface-variant: #D7C1C3; --surface-lowest: #140C0E; --surface-low: #22191A; --surface-container: #261D1F; --surface-high: #312829; --outline: #9F8C8E; --outline-variant: #524345; --lv-kid: #5E4108; --lv-kid-ink: #FFDDB6; --lv-teen: #5C3F44; --lv-teen-ink: #FFDADF; --lv-adult: #8E3B4C; --lv-adult-ink: #FFE3E7; --lv-spicy: #2A0A13; --lv-spicy-ink: #FFB2BC; } /* Значки: Material Symbols Rounded, только заполненные */ .ms { font-family: 'Material Symbols Rounded'; font-weight: 400; font-style: normal; line-height: 1; font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; user-select: none; } * { box-sizing: border-box; min-width: 0; } html, body { height: 100%; } body { margin: 0; background: var(--surface); color: var(--on-surface); font-family: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; display: flex; flex-direction: column; } h1, h2, h3 { font-family: 'Unbounded', system-ui, sans-serif; letter-spacing: -0.03em; text-wrap: balance; margin: 0; } a { color: inherit; } :focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 6px; } .wrap { width: min(100% - 32px, var(--max)); margin-inline: auto; } /* ── Шапка сайта ── */ .site-head { display: flex; align-items: center; gap: 14px; padding: 16px 0; } /* В шапке сперва бренд: сюда приходят люди, которые про приложение ещё не слышали. Название сайта живёт в заголовке страницы, поэтому на узком экране хвост уезжает — иначе одно и то же читается дважды. */ .site-head .logo { display: inline-flex; align-items: center; gap: 10px; font-family: 'Unbounded', sans-serif; font-size: 18px; font-weight: 700; text-decoration: none; white-space: nowrap; } .site-head .logo-icon { width: 30px; height: 30px; border-radius: 9px; flex: 0 0 30px; object-fit: cover; } .site-head .logo-tail { font-weight: 400; color: var(--on-surface-variant); } @media (max-width: 560px) { .site-head .logo-tail { display: none; } } .site-head nav { display: none; gap: 18px; margin-left: 12px; font-size: 14px; } .site-head nav a { color: var(--on-surface-variant); text-decoration: none; } .site-head nav a:hover { color: var(--on-surface); } .site-head .spacer { flex: 1; } /* На узком экране название и переключатели не помещаются в строку: логотип забирает первую, пилюли встают под ним. */ @media (max-width: 620px) { .site-head { flex-wrap: wrap; gap: 10px; padding-bottom: 12px; } .site-head .logo { flex: 1 1 100%; font-size: 17px; } .site-head .spacer { display: none; } } .pillgroup { display: inline-flex; gap: 3px; padding: 3px; background: var(--surface-container); border-radius: 999px; } .pillgroup a, .pillgroup button { border: 0; cursor: pointer; font-family: inherit; font-size: 12.5px; font-weight: 600; text-decoration: none; color: var(--on-surface-variant); background: transparent; padding: 7px 13px; border-radius: 999px; line-height: 1; display: inline-flex; align-items: center; gap: 6px; transition: background 200ms var(--easing), color 200ms var(--easing); } .pillgroup a.on, .pillgroup button.on { background: var(--primary); color: var(--on-primary); } .pillgroup .ms { font-size: 17px; } /* ── Раскладка страницы: контент плюс колонка рекламы ── */ main { flex: 1; padding-bottom: 40px; } .layout { display: grid; gap: 26px; align-items: start; } @media (min-width: 1024px) { .layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 30px; } .layout.centered { grid-template-columns: minmax(0, 660px) 300px; justify-content: center; } .site-head nav { display: flex; } } /* ── Рекламные места ── */ .ad { border: 1px dashed var(--outline-variant); border-radius: var(--shape-m); color: var(--on-surface-variant); display: grid; place-items: center; text-align: center; font-size: 11px; line-height: 1.4; padding: 10px; overflow: hidden; } .ad small { display: block; opacity: .7; font-size: 10px; } .ad-inline { min-height: 100px; margin-top: 18px; } .ad-lead { min-height: 90px; margin-bottom: 20px; } .ad-side { height: 600px; position: sticky; top: 20px; display: none; overflow: hidden; } @media (min-width: 1024px) { .ad-side { display: grid; } .ad-inline { min-height: 250px; } } /* ── Своё промо на местах рекламы ────────────────────────────────── Пока площадка на модерации в РСЯ, места заняты приложением и Togetherly+. Разметка мест остаётся прежней: приедут блоки сети — меняется только начинка. */ .promo { position: relative; overflow: hidden; border: 0; border-radius: var(--shape-m); background: linear-gradient(135deg, color-mix(in oklab, var(--primary-container) 70%, var(--surface)) 0%, var(--surface-container) 60%); color: var(--on-surface); padding: 0; } .promo-track { display: grid; width: 100%; height: 100%; } .promo-slide { grid-area: 1 / 1; display: flex; align-items: center; align-content: flex-start; flex-wrap: wrap; gap: 14px; padding: 16px 18px 26px; opacity: 0; transform: translateY(8px); transition: opacity 420ms var(--easing), transform 420ms var(--easing); pointer-events: none; } .promo-slide.on { opacity: 1; transform: none; pointer-events: auto; } .promo-icon { border-radius: 14px; flex: 0 0 auto; width: 48px; height: 48px; object-fit: cover; } .promo-text { min-width: 0; } .promo-title { display: block; font-family: 'Unbounded', sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; } .promo-body { margin: 5px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--on-surface-variant); } .promo-actions { display: flex; gap: 8px; margin-left: auto; flex: 0 0 auto; } .promo-text { flex: 1 1 160px; } .promo-btn { background: var(--primary); color: var(--on-primary); border-radius: 999px; padding: 13px 20px; white-space: nowrap; font-family: 'Unbounded', sans-serif; font-size: 12.5px; font-weight: 600; min-height: 42px; text-decoration: none; line-height: 1; display: inline-flex; align-items: center; transition: filter 200ms var(--easing), transform 200ms var(--easing); } .promo-btn:hover { filter: brightness(1.06); transform: translateY(-1px); } .promo-dots { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; gap: 3px; justify-content: center; } /* Точка тянется в пилюлю через transform, а не через ширину: ширину браузер пересчитывает раскладкой на каждый кадр. */ .promo-dot { width: 14px; height: 5px; border-radius: 999px; background: color-mix(in oklab, var(--on-surface) 22%, transparent); transform: scaleX(0.36); transition: background 300ms var(--easing), transform 300ms var(--easing); } .promo-dot.on { transform: none; background: var(--primary); } /* Боковой блок: всё столбиком, места по вертикали много */ .promo[data-ad="side"] .promo-slide { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 10px; padding: 0 0 26px; text-align: left; } .promo[data-ad="side"] .promo-icon { width: 64px; height: 64px; border-radius: 18px; } .promo[data-ad="side"] .promo-title { font-size: 19px; } .promo[data-ad="side"] .promo-body { font-size: 14px; } .promo[data-ad="side"] .promo-actions { margin: 0 14px; flex-wrap: wrap; justify-content: center; } .promo-points { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; } .promo-points li { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; line-height: 1.35; color: var(--on-surface); } ".promo-points .ms { font-size: 19px; color: var(--primary); flex: 0 0 auto; } .promo-proof { font-size: 12.5px; color: var(--on-surface-variant); border-top: 1px solid color-mix(in oklab, var(--on-surface) 10%, transparent); padding-top: 12px; width: 100%; } .promo-proof b { color: var(--on-surface); font-weight: 600; } .promo[data-ad="side"] .promo-slide { padding-bottom: 0; overflow: hidden; } .promo-shot { width: 100%; height: auto; display: block; border-radius: var(--shape-m); } /* Растяжка над содержимым: одна строка, кнопка справа */ .promo[data-ad="lead"] .promo-slide { padding: 12px 20px 22px; } @media (max-width: 719px) { .promo[data-ad="lead"] .promo-icon { width: 40px; height: 40px; } .promo[data-ad="lead"] .promo-slide { gap: 12px; } .promo[data-ad="lead"] .promo-btn { padding: 10px 16px; font-size: 12px; } } .promo[data-ad="lead"] .promo-body { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } @media (min-width: 720px) { .promo[data-ad="lead"] .promo-body { -webkit-line-clamp: 2; } } /* Блок в потоке: на телефоне столбиком, на широком в строку */ .promo[data-ad="inline"] .promo-slide { flex-direction: column; align-items: flex-start; gap: 12px; } .promo[data-ad="inline"] .promo-actions { margin-left: 0; } @media (min-width: 720px) { .promo[data-ad="inline"] .promo-slide { flex-direction: row; align-items: center; gap: 18px; padding: 22px 26px 30px; } .promo[data-ad="inline"] .promo-icon { width: 56px; height: 56px; } .promo[data-ad="inline"] .promo-title { font-size: 17px; } .promo[data-ad="inline"] .promo-body { font-size: 13.5px; } .promo[data-ad="inline"] .promo-actions { margin-left: auto; } } /* ── Витрина ── */ .hero { padding: 10px 0 24px; } .hero h1 { font-size: clamp(28px, 5vw, 42px); font-weight: 700; } .hero p { margin: 12px 0 0; max-width: 56ch; color: var(--on-surface-variant); } .tiles { display: grid; gap: 12px; } @media (min-width: 720px) { .tiles { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1180px) { .tiles { grid-template-columns: repeat(3, 1fr); } } .tile { display: flex; gap: 14px; align-items: center; border-radius: var(--shape-l); padding: 16px 18px; background: var(--surface-container); color: var(--on-surface); text-decoration: none; min-height: 88px; transition: transform 200ms var(--easing), filter 200ms var(--easing); } a.tile:hover { transform: translateY(-2px); filter: brightness(1.02); } .tile.lead { background: var(--primary-container); color: var(--on-primary-container); grid-column: 1 / -1; } .tile .glyph { width: 46px; height: 46px; flex: 0 0 46px; border-radius: 15px; display: grid; place-items: center; font-size: 22px; background: color-mix(in oklab, currentColor 12%, transparent); } .tile .tname { display: block; font-family: 'Unbounded', sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; } .tile .tsub { display: block; font-size: 12.5px; color: var(--on-surface-variant); line-height: 1.4; margin-top: 3px; } .tile.lead .tsub { color: inherit; opacity: .78; } .tile.soon { opacity: .6; } .tile .soon-chip { margin-left: auto; align-self: flex-start; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--on-surface-variant); border: 1px solid var(--outline-variant); border-radius: 999px; padding: 4px 9px; white-space: nowrap; } .tile .cta { margin-left: auto; background: var(--on-primary-container); color: var(--primary-container); border-radius: 999px; padding: 13px 26px; font-family: 'Unbounded', sans-serif; font-size: 13px; font-weight: 600; white-space: nowrap; display: none; } @media (min-width: 720px) { .tile .cta { display: block; } } /* ── Про авторов ── */ .about { margin-top: 22px; padding: 24px 26px; background: var(--surface-container); border-radius: var(--shape-l); } .about h2 { font-size: 17px; font-weight: 600; margin-bottom: 12px; } .about p { margin: 0 0 10px; max-width: 62ch; font-size: 14.5px; color: var(--on-surface-variant); } .about p:last-child { margin-bottom: 0; } .about .about-link a { color: var(--primary); text-decoration: none; font-weight: 600; } .about .about-link a:hover { text-decoration: underline; } /* ── Имена игроков ── */ .names { display: grid; gap: 10px; margin-top: 4px; } @media (min-width: 560px) { .names { grid-template-columns: 1fr 1fr; } } .names label { display: grid; gap: 6px; font-size: 12.5px; color: var(--on-surface-variant); } .names input { font-family: inherit; font-size: 15px; color: var(--on-surface); background: var(--surface-container); border: 1px solid transparent; border-radius: 999px; padding: 13px 18px; width: 100%; transition: border-color 200ms var(--easing); } .names input:hover { border-color: var(--outline-variant); } .names input::placeholder { color: var(--on-surface-variant); opacity: .7; } /* ── Выбор уровня ── */ .levels { display: grid; gap: 12px; margin-top: 18px; } @media (min-width: 720px) { .levels { grid-template-columns: repeat(2, 1fr); } } .level { display: flex; align-items: center; gap: 12px; text-align: left; border: 0; cursor: pointer; font-family: inherit; width: 100%; border-radius: var(--shape-l); padding: 18px 20px; min-height: 76px; transition: transform 200ms var(--easing), filter 200ms var(--easing); } .level:hover { transform: translateY(-2px); filter: brightness(1.03); } .level .lname { display: block; font-family: 'Unbounded', sans-serif; font-size: 16px; font-weight: 600; line-height: 1.2; } .level .lsub { display: block; font-size: 12.5px; opacity: .78; line-height: 1.4; margin-top: 3px; } .level .age { margin-left: auto; font-family: 'Unbounded', sans-serif; font-size: 13px; font-weight: 700; opacity: .72; white-space: nowrap; } .lv-kid { background: var(--lv-kid); color: var(--lv-kid-ink); } .lv-teen { background: var(--lv-teen); color: var(--lv-teen-ink); } .lv-adult { background: var(--lv-adult); color: var(--lv-adult-ink); } .lv-spicy { background: var(--lv-spicy); color: var(--lv-spicy-ink); } /* ── Игра: колода ── */ .game { display: flex; flex-direction: column; } .gamebar { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--on-surface-variant); padding: 6px 0 14px; } .gamebar .back { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 0; cursor: pointer; font-family: inherit; font-size: 13.5px; color: var(--on-surface-variant); padding: 10px 14px 10px 8px; border-radius: 999px; min-height: 42px; transition: background 200ms var(--easing); } .gamebar .back:hover { background: var(--surface-container); } .gamebar .back .ms { font-size: 18px; } .gamebar .count { margin-left: auto; font-variant-numeric: tabular-nums; } .turn { text-align: center; font-size: 13.5px; color: var(--on-surface-variant); margin-bottom: 12px; } .turn b { color: var(--on-surface); font-weight: 600; } .card { border-radius: var(--shape-xxl); padding: 26px 24px; display: flex; flex-direction: column; gap: 14px; justify-content: center; min-height: 300px; } @media (min-width: 720px) { .card { padding: 40px 42px; } } .card .kind { font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; opacity: .72; } .card .task { font-family: 'Unbounded', sans-serif; font-weight: 400; font-size: clamp(21px, 4.4vw, 30px); line-height: 1.26; letter-spacing: -0.025em; } .card .idx { font-size: 11.5px; opacity: .6; margin-top: 2px; } /* Смена задания: карточка не мигает, а всплывает */ .card.swap { animation: swap 260ms var(--easing); } @keyframes swap { from { opacity: 0; transform: translateY(10px) scale(.99); } to { opacity: 1; transform: none; } } .acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; align-items: center; } .btn { border: 0; cursor: pointer; font-family: 'Unbounded', sans-serif; font-size: 13.5px; font-weight: 600; line-height: 1; border-radius: 999px; padding: 17px 24px; flex: 1 1 auto; transition: filter 200ms var(--easing); } .btn:hover { filter: brightness(1.05); } .btn.fill { background: var(--primary); color: var(--on-primary); } .btn.tonal { background: var(--surface-high); color: var(--on-surface); } @media (min-width: 720px) { .btn { flex: 0 0 auto; padding: 17px 34px; } } .keys { margin-left: auto; font-size: 12.5px; color: var(--on-surface-variant); display: none; } .keys kbd { display: inline-block; border: 1px solid var(--outline-variant); border-bottom-width: 2px; border-radius: 6px; padding: 2px 8px; font-size: 11.5px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--on-surface); } @media (min-width: 900px) and (hover: hover) { .keys { display: block; } } /* ── Подвал ── */ .site-foot { padding: 22px 0 30px; border-top: 1px solid var(--outline-variant); font-size: 13px; color: var(--on-surface-variant); display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; } .site-foot a { text-decoration: none; } .site-foot a:hover { color: var(--on-surface); } .site-foot .spacer { flex: 1; } .hidden { display: none !important; } /* ── Телефон лёжа ────────────────────────────────────────────────── Высота 360–430 точек: карточка с кнопками столбиком туда не влезает, и после каждого задания пришлось бы прокручивать. Поэтому в альбоме партия идёт в две колонки — задание слева, кнопки справа. */ @media (orientation: landscape) and (max-height: 500px) { .site-head { padding: 8px 0; } .hero { padding: 2px 0 12px; } .hero h1 { font-size: clamp(22px, 3.4vw, 30px); } .gamebar { padding: 2px 0 8px; } .turn { margin-bottom: 8px; text-align: left; } .ad-lead { display: none; } /* верхняя полоса тут съедает пол-экрана */ .ad-inline { min-height: 90px; margin-top: 12px; } .game { display: grid; grid-template-columns: minmax(0, 1fr) 200px; grid-template-areas: "bar bar" "card turn" "card acts" "ad ad"; grid-template-rows: auto auto 1fr auto; gap: 0 16px; } .gamebar { grid-area: bar; } .turn { grid-area: turn; } .card { grid-area: card; min-height: 0; height: 100%; padding: 18px 22px; justify-content: center; } .card .task { font-size: clamp(17px, 2.6vw, 22px); } .card .idx { display: none; } .acts { grid-area: acts; flex-direction: column; margin-top: 0; align-items: stretch; } .acts .btn { flex: 0 0 auto; width: 100%; padding: 14px 16px; } .keys { display: none; } .game .ad-inline { grid-area: ad; } } /* Низкий экран стоя (320×640 и подобные): карточке нужно меньше места, иначе кнопки уходят под сгиб. */ @media (orientation: portrait) and (max-height: 660px) { .card { min-height: 220px; padding: 20px 20px; } .card .task { font-size: clamp(19px, 5.6vw, 24px); } .hero { padding: 6px 0 16px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }