/* RAZU портал — тёмная тема, повторяет живой razu.one. RTL-готово: логические свойства (padding-inline, margin-inline, inset-inline), поэтому dir="rtl" (иврит) не потребует переверстки. */ :root { --bg: #0b0e1a; --bg-soft: #10152a; --bg-card: #161c33; --bg-card-2: #1b2240; --ink: #eef1f7; --muted: #9aa3b8; --faint: #6b7490; --line: rgba(255, 255, 255, .09); --line-strong: rgba(255, 255, 255, .16); --brand-red: #e11d2a; --brand-red-hover: #f4303d; --brand-accent: #6c56ef; /* переопределяется на из оператора */ --brand-accent-dark: #352b75; --gold: #c9a15a; --radius: 14px; --wrap: 1080px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--ink); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; } a { color: inherit; text-decoration: none; } img { max-width: 100%; } .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 20px; } .wrap-narrow { max-width: 760px; } /* --- Кнопки --- */ .btn-red, .btn-ghost { display: inline-flex; align-items: center; justify-content: center; font-weight: 700; letter-spacing: .04em; border-radius: 10px; padding: 12px 22px; cursor: pointer; border: 1px solid transparent; transition: background .15s, border-color .15s, transform .05s; white-space: nowrap; } .btn-red { background: var(--brand-red); color: #fff; } .btn-red:hover { background: var(--brand-red-hover); } .btn-red:active { transform: translateY(1px); } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); } .btn-ghost:hover { background: rgba(255, 255, 255, .06); } .btn-lg { padding: 15px 34px; font-size: 15px; } /* Кнопки в шапке компактнее кнопок на странице: шапка не должна спорить с контентом */ .hd-actions .btn-red, .hd-actions .btn-ghost { padding: 10px 18px; font-size: 13px; } .btn-sm { padding: 8px 14px; font-size: 12px; border-radius: 8px; } /* --- Install-баннер (в основном для мобильных) --- */ .ib { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 12px; background: #04060d; border-bottom: 1px solid var(--line); padding: 10px 14px; color: var(--ink); } .ib[hidden] { display: none; } /* иначе display:flex перебивает [hidden] → баннер виснет на десктопе/iOS */ .ib-x { background: none; border: none; color: var(--faint); font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px; } .ib-logo { height: 22px; width: auto; flex: none; } .ib .brand-eye { color: #fff; flex: none; } .ib-txt { display: flex; flex-direction: column; line-height: 1.2; margin-inline-end: auto; } .ib-txt b { font-size: 14px; } .ib-txt span { font-size: 12px; color: var(--muted); } .ib-btn { background: var(--brand-red); color: #fff; font-weight: 700; font-size: 12px; letter-spacing: .04em; padding: 9px 16px; border-radius: 8px; } /* --- Хедер --- */ .hd { position: sticky; top: 0; z-index: 40; background: rgba(11, 14, 26, .82); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } .hd-row { display: flex; align-items: center; gap: 20px; height: 64px; } /* flex: none обязателен: иначе при нехватке места в строке флексбокс сжимает логотип по ширине и знак «RAZU» плющится. */ .brand { display: inline-flex; align-items: center; gap: 9px; color: #fff; flex: none; } .brand-logo { height: 30px; width: auto; display: block; flex: none; } .brand-word { font-weight: 800; letter-spacing: .18em; font-size: 20px; } .brand-eye { color: #fff; } /* Сдвиг вниз выравнивает низ букв меню с низом «RAZU» в логотипе: у знака под буквами есть собственный отступ, поэтому центрирование их не совмещает. */ .nav { display: flex; gap: 22px; margin-inline: auto; position: relative; top: 4px; } /* Меню равняется на логотип по цвету (белый) и высоте заглавных букв — 16px даёт 11.5px, как «RAZU» в знаке. Межбуквенное расстояние — штатное для шрифта: разрядка съедала бы ширину, а её в шапке и так нет. */ /* nowrap обязателен: без него длинные пункты («УСТАНОВИ НА ТВ») ломаются на две строки и вся шапка едет. */ .nav a { font-size: 16px; font-weight: 600; letter-spacing: normal; color: #fff; opacity: .92; white-space: nowrap; } .nav a:hover { opacity: 1; } .hd-actions { display: flex; gap: 10px; flex: none; } .burger { display: none; flex-direction: column; gap: 4px; background: none; border: none; cursor: pointer; padding: 8px; } .burger span { width: 22px; height: 2px; background: var(--ink); border-radius: 2px; } /* --- Гео-подсказка --- */ .geo { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; background: linear-gradient(90deg, var(--brand-accent-dark), var(--brand-accent)); color: #fff; padding: 12px 20px; font-size: 14px; font-weight: 600; } .geo .btn-ghost { border-color: rgba(255, 255, 255, .5); color: #fff; } /* --- Геро --- */ /* Баннер-карусель: графика во всю ширину + активная кнопка поверх. Текст вшит в графику → на мобиле баннер скрыт (см. media), там текстовый hero. */ .hb { position: relative; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .hb-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .hb-track::-webkit-scrollbar { display: none; } .hb-slide { position: relative; flex: 0 0 100%; scroll-snap-align: start; } .hb-hit { display: block; } /* весь баннер — ссылка */ /* Пропорция слайда задана жёстко, иначе карусель из файлов разной геометрии прыгает по высоте при переключении. Формат десктопа — 2.62:1 (2400×916), мобильного — 4:3 (1448×1086); всё, что не совпало, кадрируется по центру. */ .hb-slide img { display: block; width: 100%; aspect-ratio: 2.62; object-fit: cover; object-position: center; } /* Между 861 и 1200px шапке тесно: логотип + четыре пункта + две кнопки, одна из которых несёт длинный текст акции. Ужимаем меню, а не ломаем его. */ @media (max-width: 1200px) { .hd-row { gap: 14px; } .nav { gap: 16px; } .nav a { font-size: 14px; } .hd-actions .btn-red, .hd-actions .btn-ghost { padding: 9px 14px; font-size: 12.5px; } } @media (max-width: 860px) { .hb-slide img { aspect-ratio: 4 / 3; } } /* Кнопка — в правой колонке баннера, под текстом (63% = левый край текста на графике). Проценты, а не пиксели: картинка масштабируется вместе с окном. */ .hb-cta { position: absolute; inset-inline-start: 63%; inset-block-end: 3%; padding: 13px 28px; font-size: 14px; } .hb-dots { position: absolute; inset-inline: 0; inset-block-end: 18px; display: flex; justify-content: center; gap: 8px; } .hb-dots button { width: 9px; height: 9px; padding: 0; border: none; border-radius: 50%; background: rgba(255, 255, 255, .45); cursor: pointer; } .hb-dots button.on { background: #fff; width: 22px; border-radius: 5px; } /* Шапка поверх баннера: прозрачная, фон появляется при прокрутке (.hd-solid) */ .hd-over { position: fixed; inset-inline: 0; inset-block-start: 0; background: transparent; border-bottom-color: transparent; backdrop-filter: none; transition: background .25s, border-color .25s, backdrop-filter .25s; } .hd-over.hd-solid { background: rgba(11, 14, 26, .82); border-bottom-color: var(--line); backdrop-filter: blur(10px); } .hero { position: relative; padding: 56px 0 64px; background: radial-gradient(1100px 460px at 78% -8%, rgba(108, 86, 239, .28), transparent 60%), radial-gradient(760px 420px at 0% 10%, rgba(225, 29, 42, .14), transparent 55%); } .hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 44px; align-items: center; } .hero-lead { color: var(--brand-accent); text-transform: uppercase; letter-spacing: .12em; font-weight: 700; font-size: 12.5px; margin: 0 0 10px; } .hero-title { font-size: 40px; line-height: 1.1; font-weight: 800; margin: 0 0 16px; letter-spacing: -.01em; } .hero-sub { color: var(--muted); font-size: 17px; margin: 0 0 18px; max-width: 460px; } .hero-bullets { list-style: none; padding: 0; margin: 0 0 26px; display: grid; gap: 8px; } .hero-bullets li { position: relative; padding-inline-start: 26px; color: var(--ink); font-size: 14.5px; } .hero-bullets li::before { content: '✓'; position: absolute; inset-inline-start: 0; color: var(--brand-accent); font-weight: 800; } /* Псевдо-превью приложения в геро (реальная картинка приедет из CMS) */ .preview { background: #0c1020; border: 1px solid var(--line-strong); border-radius: 16px; padding: 16px; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); } .preview-bar { display: flex; gap: 6px; margin-bottom: 14px; } .preview-bar .dot { width: 9px; height: 9px; border-radius: 50%; background: #2a304a; } .preview-label { color: var(--faint); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; margin: 12px 0 8px; } .preview-chans { display: flex; flex-wrap: wrap; gap: 7px; } .chan { font-size: 12px; font-weight: 700; color: #cdd3e6; background: #171d33; border: 1px solid var(--line); border-radius: 7px; padding: 7px 11px; } .preview-posters { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; } .poster { aspect-ratio: 2/3; display: flex; align-items: flex-end; justify-content: center; font-size: 10px; color: #aeb6cf; padding-bottom: 6px; text-align: center; background: linear-gradient(180deg, #1b2240, #10152a); border: 1px solid var(--line); border-radius: 8px; } /* --- Секции --- */ .sec-title { text-align: center; font-size: 30px; font-weight: 800; margin: 0 0 8px; } .tariffs { padding: 58px 0; } .bill-toggle { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 22px 0 34px; font-weight: 700; letter-spacing: .06em; font-size: 13px; color: var(--muted); } .bill-on { color: var(--ink); } .switch { width: 46px; height: 26px; border-radius: 20px; background: var(--bg-card-2); border: 1px solid var(--line-strong); position: relative; cursor: pointer; padding: 0; } .switch .knob { position: absolute; inset-block-start: 2px; inset-inline-start: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: inset-inline-start .16s; } .switch.on .knob { inset-inline-start: 22px; } .plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: start; } .plan { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 22px; display: flex; flex-direction: column; gap: 12px; } .plan-featured { border-color: var(--brand-accent); box-shadow: 0 0 0 1px var(--brand-accent), 0 24px 60px rgba(108, 86, 239, .18); } .plan-badge { align-self: flex-start; font-size: 10.5px; font-weight: 800; letter-spacing: .07em; padding: 6px 12px; border-radius: 20px; text-transform: uppercase; } .plan-badge-plain { color: var(--muted); border: 1px solid var(--line-strong); } .plan-badge-accent { color: #fff; background: var(--brand-accent); } .plan-badge-gold { color: #1a1405; background: linear-gradient(90deg, #e6c987, var(--gold)); } .plan-title { font-size: 24px; font-weight: 800; margin: 2px 0 0; } .plan-sub { color: var(--muted); margin: 0; font-size: 13.5px; } .plan-feat { list-style: none; padding: 0; margin: 6px 0; display: grid; gap: 9px; border-top: 1px solid var(--line); padding-top: 16px; } .plan-feat li { position: relative; padding-inline-start: 24px; font-size: 14px; } .plan-feat li::before { content: '✓'; position: absolute; inset-inline-start: 0; color: var(--brand-accent); font-weight: 800; } .plan-dev { font-weight: 700; } .plan-price { display: flex; align-items: flex-start; gap: 3px; margin-top: auto; } .plan-price .cur { font-size: 22px; font-weight: 800; margin-top: 6px; } .plan-price .amt { font-size: 46px; font-weight: 800; line-height: 1; } .plan-price .per { color: var(--muted); font-size: 13px; align-self: flex-end; margin-bottom: 6px; } .plan-lock { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 9px; padding: 9px 12px; } .plan-lock b { display: block; font-size: 11px; letter-spacing: .05em; color: var(--brand-accent); } .plan-lock span { font-size: 12px; color: var(--muted); } .plan-cta { width: 100%; } .plans-note { text-align: center; color: var(--faint); font-size: 12.5px; margin-top: 22px; } /* --- FAQ --- */ /* Инструкция по установке: скрыта, раскрывается по якорю (:target) — ноль скриптов и работает по прямой ссылке /install#g-android. */ .gd { display: none; margin-top: 22px; background: var(--bg-card); border: 1px solid var(--line-strong); border-radius: 16px; padding: 20px 22px; } .gd:target { display: block; } .gd-head { display: flex; align-items: center; gap: 14px; padding-bottom: 16px; border-bottom: 1px solid var(--line); } .gd-head b { display: block; font-size: 17px; } .gd-head span { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; } .gd-head .dev-logo img { max-height: 30px; max-width: 110px; } .gd-x { margin-inline-start: auto; color: var(--muted); font-size: 26px; line-height: 1; padding: 0 6px; } .gd-x:hover { color: var(--ink); } .gd-steps { list-style: none; counter-reset: gd; margin: 18px 0 0; padding: 0; display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } .gd-steps li { counter-increment: gd; display: flex; flex-direction: column; gap: 10px; } .gd-txt { display: flex; gap: 10px; color: var(--ink); font-size: 14px; line-height: 1.5; } .gd-txt::before { content: counter(gd); flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--brand-red); color: #fff; font-size: 13px; font-weight: 700; display: grid; place-items: center; } .gd-shot { width: 100%; border-radius: 10px; border: 1px solid var(--line); background: #000; } .gd-go { display: inline-flex; margin-top: 20px; } /* ТВ-инструкции: кадр телевизора горизонтальный, в узкой колонке текст на нём не прочитать. Ведём шаги одним столбцом во всю ширину — листается вниз. */ .gd-wide .gd-steps { grid-template-columns: 1fr; gap: 26px; max-width: 900px; } .gd-wide .gd-txt { font-size: 15.5px; } /* Любой скриншот открывается крупно: кнопка-обёртка вместо голой картинки */ .gd-zoom { position: relative; display: block; width: 100%; padding: 0; border: none; background: none; cursor: zoom-in; } .gd-zoom:hover .gd-shot { border-color: var(--brand-accent); } .gd-zi { position: absolute; inset-block-end: 8px; inset-inline-end: 8px; width: 26px; height: 26px; border-radius: 50%; background: rgba(0, 0, 0, .6); color: #fff; font-size: 15px; line-height: 26px; text-align: center; } /* Просмотрщик изображения */ .lb { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; background: rgba(4, 6, 13, .93); backdrop-filter: blur(4px); } .lb[hidden] { display: none; } .lb-img { max-width: min(1400px, 96vw); max-height: 86vh; border-radius: 10px; border: 1px solid var(--line-strong); } .lb-bar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: center; } .lb-cap { color: var(--muted); font-size: 13.5px; } .lb-x { position: absolute; inset-block-start: 16px; inset-inline-end: 20px; background: none; border: none; color: #fff; font-size: 34px; line-height: 1; cursor: pointer; padding: 4px 10px; } .lb-x:hover { color: var(--brand-red-hover); } .faq { padding: 40px 0 70px; } .acc { margin-top: 24px; display: grid; gap: 12px; } .acc-item { background: var(--bg-card); border: 1px solid var(--line); border-radius: 12px; padding: 4px 18px; } .acc-item summary { list-style: none; cursor: pointer; font-weight: 700; padding: 16px 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; } .acc-item summary::-webkit-details-marker { display: none; } .acc-item summary::after { content: '+'; color: var(--muted); font-size: 22px; font-weight: 400; } .acc-item[open] summary::after { content: '−'; } .acc-body { color: var(--muted); padding: 0 0 18px; font-size: 14.5px; } /* --- Футер --- */ .ft { border-top: 1px solid var(--line); padding: 44px 0 24px; background: #080a14; } .ft-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 32px 40px; } .ft-tagline { color: var(--muted); font-size: 13px; line-height: 1.55; margin: 0 0 16px; max-width: 300px; } .ft-col h4 { font-size: 12px; letter-spacing: .08em; color: var(--faint); margin: 0 0 14px; } .ft-col a { display: block; color: var(--muted); font-size: 13.5px; padding: 5px 0; } .ft-col a:hover { color: var(--ink); } .ft-brand .brand { margin-bottom: 14px; } /* Полоса приложений во всю ширину футера (как у ivi) — ТОЛЬКО десктоп. На мобиле приложения остаются в бренд-колонке (.ft-apps-m), как раньше. */ .ft-approw { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--line); } .ft-approw .ft-badges, .ft-approw .ft-pills { display: contents; } .ft-apps-m { display: none; } .ft-m-only { display: none; } .ft-bpay { display: inline-flex; align-items: center; gap: 8px; } .ft-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; } .ft-badges .store-badge { display: inline-flex; } .ft-badges .store-badge img { height: 42px; width: auto; display: block; } .ft-badges .store-badge:hover { opacity: .82; } .ft-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .ft-pills .store, .ft-approw > .store { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line-strong); border-radius: 10px; padding: 8px 13px; font-size: 12.5px; font-weight: 600; color: var(--ink); } .ft-pills .store:hover, .ft-approw > .store:hover { border-color: var(--brand-accent); background: rgba(255, 255, 255, .04); } .ft-pills .store svg, .ft-approw > .store svg { width: 17px; height: 17px; flex: none; } .ft-social { display: flex; flex-wrap: wrap; gap: 8px; } .ft-social .soc { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 13px; padding: 6px 10px; border-radius: 8px; } .ft-social .soc:hover { color: var(--ink); background: rgba(255, 255, 255, .05); } .ft-social .soc svg { width: 16px; height: 16px; flex: none; } .ft-bpay .pay { height: 16px; width: auto; background: #fff; border-radius: 4px; padding: 4px 6px; box-sizing: content-box; } /* Нижняя строка: © + Документы слева, соцсети по центру, платёжки справа. */ .ft-bottom { display: flex; justify-content: flex-start; align-items: center; gap: 16px; margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--faint); font-size: 12.5px; } .ft-social-b { margin-inline: auto; } /* Плашка cookie-согласия: низ экрана, контент по центру (десктоп); на мобиле текст короткий (.cb-short), полный (.cb-full) скрыт. */ .cb { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 55; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 18px; padding: 14px 20px; background: rgba(8, 10, 20, .97); border-top: 1px solid var(--line-strong); backdrop-filter: blur(8px); } .cb-short { display: none; } .cb[hidden] { display: none; } /* display:flex перебивает браузерный [hidden] — как у .ib/.sw-panel */ .cb p { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.5; max-width: 900px; } .cb a { color: var(--ink); text-decoration: underline; } .cb-ok { background: var(--brand-red); color: #fff; border: none; border-radius: 8px; font-weight: 700; font-size: 12.5px; letter-spacing: .04em; padding: 10px 18px; cursor: pointer; } .cb-ok:hover { background: var(--brand-red-hover); } .doc-wrap { padding: 40px 0 64px; } .doc-list { display: grid; gap: 12px; margin-top: 20px; max-width: 720px; } .doc-item { background: var(--bg-card); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; } .doc-item b { display: block; font-size: 15px; } .doc-item span { display: block; color: var(--muted); font-size: 13px; margin-top: 4px; } .doc-note { color: var(--muted); font-size: 13px; margin-top: 22px; } .doc-note a { color: var(--brand-accent); } /* --- Статьи (блог) --- */ .article-wrap { padding: 40px 0 64px; } .crumbs { color: var(--faint); font-size: 13px; margin-bottom: 18px; } .crumbs a { color: var(--muted); } .crumbs a:hover { color: var(--ink); } .article h1, .help-article h1 { font-size: 30px; font-weight: 800; margin: 0 0 14px; line-height: 1.15; } .article-lead { color: var(--muted); font-size: 17px; margin: 0 0 22px; } .article h2, .help-article h2 { font-size: 20px; margin: 26px 0 10px; } .article p, .help-article p { color: #c9cfe0; margin: 0 0 12px; } .article ul, .help-article ul { color: #c9cfe0; padding-inline-start: 22px; margin: 0 0 14px; display: grid; gap: 6px; } .article-cta { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; } .art-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; } .art-card { background: var(--bg-card); border: 1px solid var(--line); border-radius: 12px; padding: 20px; display: block; } .art-card:hover { border-color: var(--line-strong); } .art-card h3 { margin: 0 0 8px; font-size: 17px; } .art-card p { color: var(--muted); font-size: 13.5px; margin: 0 0 10px; } .art-more { color: var(--brand-accent); font-weight: 700; font-size: 13px; } /* --- Справочный центр --- */ .help-hero { padding: 46px 0 30px; text-align: center; background: radial-gradient(900px 300px at 50% -20%, rgba(108, 86, 239, .22), transparent 60%); } .help-hero h1 { font-size: 34px; font-weight: 800; margin: 0 0 8px; } .help-hero p { color: var(--muted); margin: 0; } .help-layout { display: grid; grid-template-columns: 260px 1fr; gap: 26px; padding-bottom: 70px; align-items: start; } .help-nav { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 78px; } .help-nav a { padding: 12px 16px; border-radius: 10px; color: var(--muted); font-weight: 600; font-size: 14px; } .help-nav a:hover { background: var(--bg-card); color: var(--ink); } .help-nav a.active { background: var(--brand-red); color: #fff; } .help-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; } .help-cat-card { background: var(--bg-card); border: 1px solid var(--line); border-radius: 12px; padding: 20px; display: block; } .help-cat-card:hover { border-color: var(--brand-accent); } .help-cat-card h3 { margin: 0 0 8px; font-size: 17px; } .help-cat-card span { color: var(--brand-accent); font-weight: 700; font-size: 13px; } .help-cat-title { font-size: 22px; margin: 0 0 18px; } .acc-more { margin-top: 12px; } .acc-more a { color: var(--brand-accent); font-weight: 700; font-size: 13.5px; } /* --- Установи на ТВ --- */ .install-wrap { padding: 42px 20px 70px; } .install-title { font-size: 32px; font-weight: 800; line-height: 1.2; margin: 0 0 28px; } .dev-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .dev-card { background: var(--bg-card); border: 1px solid var(--line); border-radius: 14px; min-height: 116px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 18px; text-align: center; } .dev-card:hover { border-color: var(--brand-accent); background: var(--bg-card-2); } .dev-soon { opacity: .55; cursor: default; } .dev-soon:hover { border-color: var(--line); background: var(--bg-card); } .dev-logo img { max-height: 34px; max-width: 140px; object-fit: contain; } .dev-word { font-size: 20px; font-weight: 800; letter-spacing: .01em; } .dev-sub { color: var(--muted); font-size: 12px; } /* --- Контакты --- */ .contact-wrap { padding: 40px 20px 70px; } .contact-lead { color: var(--muted); margin: 0 0 26px; max-width: 620px; } .contact-grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: 26px; align-items: start; } .contact-form { display: grid; gap: 14px; background: var(--bg-card); border: 1px solid var(--line); border-radius: 14px; padding: 22px; } .contact-form label { display: grid; gap: 6px; font-size: 13px; color: var(--muted); font-weight: 600; } .contact-form input, .contact-form select, .contact-form textarea { background: var(--bg); border: 1px solid var(--line-strong); border-radius: 10px; padding: 11px 12px; color: var(--ink); font-size: 14px; font-family: inherit; } .contact-form textarea { resize: vertical; } .contact-form button { justify-self: start; } .contact-status { font-size: 13px; color: var(--brand-accent); margin: 0; min-height: 18px; } .contact-side { background: var(--bg-card); border: 1px solid var(--line); border-radius: 14px; padding: 22px; } .contact-side h3 { margin: 0 0 6px; font-size: 18px; } .contact-side > p { color: var(--muted); font-size: 13.5px; margin: 0 0 16px; } .contact-item { padding: 10px 0; border-top: 1px solid var(--line); } .contact-item b { display: block; font-size: 12px; color: var(--faint); font-weight: 600; margin-bottom: 3px; } .contact-item a { color: var(--brand-accent); font-size: 14px; } /* --- Виджет поддержки --- */ .sw { position: fixed; inset-block-end: 20px; inset-inline-end: 20px; z-index: 60; } .sw-fab { width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer; background: var(--brand-red); color: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .4); display: flex; align-items: center; justify-content: center; } .sw-fab:hover { background: var(--brand-red-hover); } .sw-panel { position: absolute; inset-block-end: 70px; inset-inline-end: 0; width: 340px; max-width: calc(100vw - 32px); height: 460px; max-height: calc(100vh - 120px); display: flex; flex-direction: column; background: var(--bg-card); border: 1px solid var(--line-strong); border-radius: 16px; overflow: hidden; box-shadow: 0 24px 70px rgba(0, 0, 0, .55); } .sw-panel[hidden] { display: none; } /* иначе display:flex перебивает браузерный [hidden] → виджет висит открытым и не закрывается */ .sw-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--line); background: var(--bg-soft); } .sw-close { background: none; border: none; color: var(--muted); font-size: 22px; cursor: pointer; line-height: 1; } .sw-body { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; } .sw-msg { font-size: 14px; line-height: 1.5; padding: 10px 12px; border-radius: 12px; max-width: 90%; } .sw-bot { background: var(--bg-soft); color: var(--ink); align-self: flex-start; border-bottom-left-radius: 4px; } .sw-user { background: var(--brand-accent); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; } .sw-typing { color: var(--faint); } .sw-topics { display: flex; flex-wrap: wrap; gap: 6px; } .sw-chip { font-size: 12.5px; background: var(--bg-card-2); border: 1px solid var(--line); border-radius: 16px; padding: 6px 12px; color: var(--ink); } .sw-chip:hover { border-color: var(--brand-accent); } .sw-res { display: grid; gap: 8px; margin-top: 8px; } .sw-res a { display: block; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; } .sw-res a:hover { border-color: var(--brand-accent); } .sw-res b { display: block; font-size: 13.5px; } .sw-res span { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; } .sw-hint { margin-top: 10px; font-size: 12.5px; color: var(--muted); } .sw-cta { display: inline-block; margin-top: 6px; background: var(--brand-red); color: #fff; font-weight: 700; font-size: 12.5px; padding: 8px 14px; border-radius: 8px; } .sw-link { display: inline-block; margin-top: 6px; color: var(--brand-accent); font-size: 12.5px; margin-inline-end: 10px; } .sw-input { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); } .sw-input input { flex: 1; background: var(--bg); border: 1px solid var(--line-strong); border-radius: 10px; padding: 10px 12px; color: var(--ink); font-size: 14px; } .sw-input button { background: var(--brand-red); color: #fff; border: none; border-radius: 10px; width: 42px; font-size: 18px; cursor: pointer; } /* --- Адаптив --- */ /* Баннер заменяет текстовый hero на всех разрешениях (как в WP-версии) */ .has-hb .hero { display: none; } /* Десктопная графика панорамная (2.6:1), поэтому тянем её во всю ширину окна: высота при этом остаётся сдержанной (1900px → ~725px). */ @media (min-width: 861px) { .hb { background: #0b0e1a; } } @media (max-width: 860px) { /* мобайл (как в WP): картинка целиком, кнопка под ней по центру на фоне секции */ .hb { background: #0b0e1a; padding-block-end: 22px; } .hb-slide { display: flex; flex-direction: column; } .hb-cta { position: static; align-self: center; margin-block-start: 18px; padding: 15px 34px; font-size: 15px; white-space: nowrap; } .hb-dots { position: static; margin-block-start: 14px; } .hb-dots button { background: rgba(255, 255, 255, .3); } .nav { display: none; position: absolute; inset-inline: 0; top: 64px; flex-direction: column; background: var(--bg-soft); border-bottom: 1px solid var(--line); margin: 0; padding: 8px 20px 16px; } .nav.open { display: flex; } .nav a { padding: 12px 0; border-bottom: 1px solid var(--line); } .burger { display: flex; } .hd-actions { display: flex; margin-inline-start: auto; gap: 8px; } /* группу «Войти + бургер» прижимаем вправо */ .hd-actions .btn-red { display: none; } /* ПОПРОБОВАТЬ убран из мобильной шапки */ /* «Войти» вровень с бургером: тот же зрительный вес, не крупнее иконки */ .hd-actions .btn-ghost { padding: 8px 14px; font-size: 13px; border-radius: 8px; } .hero-grid { grid-template-columns: 1fr; gap: 30px; } .hero-left { order: 2; } .hero-title { font-size: 30px; } .plans { grid-template-columns: 1fr; } .ft-grid { grid-template-columns: 1fr 1fr; } .ft-brand { grid-column: 1 / -1; } /* мобильный футер — как раньше: приложения под лого, соцсети+оплата в бренд- колонке, без тэглайна/полосы; внизу Документы, затем копирайт */ .ft-apps-m { display: block; margin-bottom: 16px; } .ft-approw { display: none; } .ft-tagline { display: none; } .ft-m-only { display: block; } .ft-social-b { display: none; } /* соцсети на мобиле — в бренд-колонке */ .cb { padding: 12px 64px 12px 16px; } /* справа резерв под FAB виджета */ .cb-full { display: none; } .cb-short { display: inline; } /* на мобиле — короткий текст */ /* низ на мобиле: Документы → иконки оплаты → копирайт */ .ft-bottom a { order: -2; } .ft-bpay { order: -1; } .help-layout { grid-template-columns: 1fr; } .help-nav { position: static; flex-direction: row; overflow-x: auto; gap: 8px; padding-bottom: 6px; } .help-nav a { white-space: nowrap; padding: 9px 13px; font-size: 13px; } .dev-grid { grid-template-columns: repeat(2, 1fr); } /* на узком экране логотип и название инструкции не помещаются в строку */ .gd { padding: 16px; } .gd-head { flex-wrap: wrap; gap: 10px; } .gd-head .dev-logo img { max-height: 24px; max-width: 90px; } .contact-grid { grid-template-columns: 1fr; } .install-title { font-size: 25px; } } @media (max-width: 480px) { .ft-grid { grid-template-columns: 1fr; } .ft-bottom { flex-direction: column; align-items: flex-start; } .preview-posters { grid-template-columns: repeat(4, 1fr); } } /* =========================================================================== Телепрограмма (/tv) Mobile-first и не «та же сетка, но уже»: на телефоне канал — это карточка со списком передач, на широком экране карточки выстраиваются в колонки. Состав каналов одинаков везде, различается плотность: лишние передачи скрыты классом .is-extra, но лежат в разметке — скрытое CSS-ом индексируется, отсутствующее нет. =========================================================================== */ .tv-wrap { padding-top: 28px; padding-bottom: 56px; } .tv-wrap h1 { font-size: 28px; line-height: 1.15; margin: 0 0 10px; } .tv-lead { color: var(--muted); margin: 0 0 20px; max-width: 720px; } .tv-empty { color: var(--muted); } .tv-sections { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; } .tv-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--ink); text-decoration: none; font-size: 14px; } .tv-chip b { color: var(--muted); font-weight: 500; } .tv-chip:hover { border-color: var(--brand-accent); } .tv-grid { display: grid; gap: 14px; grid-template-columns: 1fr; } .tv-card { background: var(--bg-card); border: 1px solid var(--line); border-radius: 14px; padding: 14px; } .tv-card-head { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; } .tv-card-name { font-weight: 600; } .tv-logo { width: 48px; height: 48px; object-fit: contain; border-radius: 10px; background: #fff1; flex: none; } .tv-logo-sm { width: 32px; height: 32px; } .tv-logo-lg { width: 72px; height: 72px; } /* Заглушка вместо битой картинки: логотипы будут не у всех каналов. */ .tv-logo-stub { display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; color: var(--muted); background: var(--bg-card-2); border: 1px solid var(--line); } .tv-progs { list-style: none; margin: 12px 0 0; padding: 0; } .tv-prog { display: flex; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 14px; } .tv-prog:first-child { border-top: 0; } .tv-prog-time { color: var(--muted); font-variant-numeric: tabular-nums; flex: none; min-width: 44px; } .tv-prog-body { display: flex; flex-direction: column; gap: 2px; } .tv-prog-note { color: var(--muted); font-size: 13px; } .tv-prog.is-live .tv-prog-title { font-weight: 600; } .tv-prog-live { position: relative; color: var(--brand-accent); font-size: 12px; padding-top: 6px; } .tv-prog-bar { position: absolute; inset-inline-start: 0; top: 0; height: 2px; background: var(--brand-accent); border-radius: 2px; } /* Свернуто на телефоне, раскрыто на широких экранах — данные одни и те же. */ .tv-card .tv-prog.is-extra { display: none; } .tv-card.is-open .tv-prog.is-extra { display: flex; } .tv-more { margin-top: 10px; background: none; border: 0; padding: 0; color: var(--brand-accent); font: inherit; font-size: 13px; cursor: pointer; } .tv-watch { margin-top: 12px; display: inline-flex; } .tv-alt { display: inline-block; margin-top: 10px; font-size: 13px; color: var(--brand-accent); } .tv-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .tv-list-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); } .tv-list-item a { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; } .tv-badge { font-size: 12px; color: var(--brand-accent); border: 1px solid var(--line-strong); border-radius: 999px; padding: 3px 9px; white-space: nowrap; } .tv-crumbs { color: var(--muted); font-size: 13px; margin-bottom: 12px; } .tv-crumbs a { color: var(--muted); } .tv-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; } .tv-head h1 { font-size: 24px; margin: 0 0 6px; } .tv-facts { color: var(--muted); font-size: 14px; margin: 0 0 10px; } .tv-summary { max-width: 760px; margin: 0 0 18px; } .tv-nowbox { background: var(--bg-card); border: 1px solid var(--line-strong); border-radius: 14px; padding: 14px; margin-bottom: 18px; } .tv-nowbox h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0 0 6px; } .tv-now-title { font-size: 18px; font-weight: 600; margin: 0 0 4px; } .tv-now-time { color: var(--muted); font-size: 14px; margin: 0; } /* Лента дат: прокрутка внутри себя, страница по горизонтали не едет. */ .tv-dates { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 16px; scrollbar-width: none; } .tv-dates::-webkit-scrollbar { display: none; } .tv-date { flex: none; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); text-decoration: none; font-size: 14px; white-space: nowrap; } .tv-date.is-cur { border-color: var(--brand-accent); color: var(--brand-accent); } .tv-day { font-size: 16px; margin: 0 0 8px; } .tv-progs-full .tv-prog { padding: 10px 0; } .tv-pages { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 20px; } .tv-page { padding: 6px 11px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); text-decoration: none; font-size: 14px; } .tv-page.is-cur { border-color: var(--brand-accent); color: var(--brand-accent); } .tv-back { margin-top: 24px; } /* Тап-цель не меньше 44px там, где по ссылкам попадают пальцем. */ @media (max-width: 767px) { .tv-date, .tv-chip { min-height: 44px; display: inline-flex; align-items: center; } .tv-list-item a { min-height: 44px; } } @media (min-width: 768px) { .tv-grid { grid-template-columns: repeat(2, 1fr); } .tv-card .tv-prog.is-extra { display: flex; } .tv-more { display: none; } .tv-wrap h1 { font-size: 34px; } .tv-list { grid-template-columns: repeat(2, 1fr); gap: 0 28px; } } @media (min-width: 1100px) { .tv-grid { grid-template-columns: repeat(3, 1fr); } .tv-list { grid-template-columns: repeat(3, 1fr); } }