/* Фирменный стиль faina.io для публичных страниц рейтинга. Токены тем переключаются атрибутом data-theme на . */ @font-face { font-family: 'TT Firs Neue'; src: url('fonts/TT-Firs-Neue-Regular.otf') format('opentype'); font-weight: 400; font-display: swap; } @font-face { font-family: 'TT Firs Neue'; src: url('fonts/TT-Firs-Neue-Medium.otf') format('opentype'); font-weight: 500; font-display: swap; } @font-face { font-family: 'TT Firs Neue'; src: url('fonts/TT-Firs-Neue-DemiBold.otf') format('opentype'); font-weight: 600; font-display: swap; } :root { --bg: #f8f9fa; --card: #ffffff; --text: #0C0C0C; --muted: #6c757d; --border: #e0e0e0; --accent: #e94560; --accent-hover: #d63851; --featured: #6c3ce9; --up: #28a745; --down: #dc3545; --row-hover: rgba(233, 69, 96, .04); --shadow: 0 1px 3px rgba(0, 0, 0, .08); --badge-bg: rgba(233, 69, 96, .1); --corr: #d98a00; } [data-theme="dark"] { --bg: #12121f; --card: #1a1a2e; --text: #F1EAE7; --muted: #8b8b9e; --border: #2a2a44; --accent: #e94560; --accent-hover: #f05c75; --featured: #8b63f0; --up: #4cd07d; --down: #ff6b7f; --row-hover: rgba(233, 69, 96, .08); --shadow: 0 1px 3px rgba(0, 0, 0, .4); --badge-bg: rgba(233, 69, 96, .18); --corr: #f0a92e; } * { box-sizing: border-box; margin: 0; } body { font-family: 'TT Firs Neue', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--bg); color: var(--text); transition: background .3s ease, color .3s ease; } .wrap { max-width: 900px; margin: 0 auto; padding: 0 1rem 3rem; } /* --- Шапка --- */ .site-header { display: flex; align-items: center; gap: .75rem; padding: 1.1rem 0 .9rem; } .site-header img.avatar { width: 44px; height: 44px; border-radius: 50%; } .brand { display: flex; flex-direction: column; text-decoration: none; color: var(--text); line-height: 1.25; } .brand b { font-weight: 600; font-size: 1.15rem; } .brand span { font-size: .78rem; color: var(--muted); } .theme-toggle { margin-left: auto; background: none; border: 1px solid var(--border); color: var(--text); border-radius: 50px; padding: .4rem .85rem; cursor: pointer; font-size: 1rem; font-family: inherit; transition: all .3s ease; } .theme-toggle:hover { transform: translateY(-2px); border-color: var(--accent); } .theme-toggle::before { content: '🌙'; } [data-theme="dark"] .theme-toggle::before { content: '☀️'; } .brand-line { height: 3px; border-radius: 2px; background: linear-gradient(90deg, #e94560, #6c3ce9); margin-bottom: 2rem; } /* --- Типографика --- */ h1.hero { font-size: 2rem; font-weight: 600; margin: 1.1rem 0 .4rem; } .sub { color: var(--muted); margin-bottom: 1.2rem; font-size: .95rem; } .intro { color: var(--muted); font-size: 1rem; line-height: 1.5; margin: .1rem 0 .9rem; max-width: 62ch; } .table-toolbar { margin-bottom: .7rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } /* Контролы тулбара (период/поиск/отрасль) — одна высота, форма и линия: сбрасываем посторонние маржины (у select.pill был margin-bottom из старой разметки) и задаём явную общую высоту. */ .table-toolbar select.pill, .table-toolbar .search { margin: 0; padding: .5rem .95rem; font-size: .9rem; height: 2.4rem; box-sizing: border-box; } .search { padding: .5rem .95rem; border: 1px solid var(--border); border-radius: 50px; background: var(--card); color: var(--text); font-family: inherit; font-size: .9rem; width: min(300px, 100%); transition: border-color .2s; } .search:focus { outline: none; border-color: var(--accent); } .search::placeholder { color: var(--muted); } @media (max-width: 640px) { .col-posts { display: none; } } select.pill { padding: .4rem .9rem; border-radius: 50px; border: 1px solid var(--border); background: var(--card); color: var(--text); font-family: inherit; font-size: .9rem; } /* --- Карточка-таблица --- */ .card { background: var(--card); border-radius: 16px; box-shadow: var(--shadow); border: 1px solid var(--border); overflow: hidden; animation: fadeUp .5s ease both; } /* Карточка таблицы шире текстовой оболочки. .wrap ограничен 900px ради читаемости строк текста, а таблице рейтинга нужно 955px: девять колонок в 851px контейнера не влезали и давали горизонтальную прокрутку. Растягивать оболочку целиком нельзя — абзацы методологии стали бы нечитаемо длинными, поэтому за её пределы выходит только таблица. Ширина ограничена вьюпортом: иначе на узких экранах поехала бы вся страница. 2rem = горизонтальные отступы .wrap. Выносим ОТСТУПОМ, а не `margin-left: 50%; transform: translateX(-50%)`: у .card есть анимация fadeUp, которая задаёт transform в кадре from, и при fill-mode:both она перебивала бы сдвиг — карточка появлялась бы на пол-ширины правее и дёргалась на место. Геометрия у обоих приёмов одинаковая (проверено), у этого нет конфликта. */ .card--wide { width: min(980px, calc(100vw - 2rem)); margin-left: calc((100% - min(980px, 100vw - 2rem)) / 2); } @keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } } @media (prefers-reduced-motion: reduce) { .card { animation: none; } } table { width: 100%; border-collapse: collapse; } /* Горизонтальные отступы .75rem вместо 1rem, разрядка заголовков .03em вместо .05em: девять колонок с прежними значениями требовали 955px при 963px контейнера — запас 8px, который съел бы любой длинный заголовок. Сжатие даёт 64px (проверено замером), и таблица держит будущую колонку без переверстки. Ширину диктуют ЗАГОЛОВКИ, а не числа в ячейках, поэтому разрядка здесь важна не меньше отступов. */ th, td { padding: .8rem .75rem; text-align: left; font-size: .93rem; border-bottom: 1px solid var(--border); } th { color: var(--muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; font-weight: 500; } /* Окно таблицы рейтинга: вмещает 7 компаний (max-height ставит JS), остальное — скролл. */ .table-scroll { overflow-y: auto; } .table-scroll thead th { position: sticky; top: 0; background: var(--card); z-index: 2; box-shadow: 0 1px 0 var(--border); } /* Безымянная колонка чекбоксов графика (после «Места») */ .chk-col { width: 2rem; text-align: center; padding-left: .25rem; padding-right: .25rem; } .chart-chk { width: .95rem; height: .95rem; accent-color: var(--accent, #2a78d6); cursor: pointer; vertical-align: middle; } tr:last-child td { border-bottom: none; } tbody tr { transition: background .2s ease; } tbody tr:hover { background: var(--row-hover); } .rank-badge { display: inline-flex; min-width: 1.9rem; height: 1.9rem; padding: 0 .35rem; align-items: center; justify-content: center; border-radius: 50%; font-weight: 600; font-size: .85rem; } .rank-badge.top { background: var(--badge-bg); color: var(--accent); } /* Медали топ-3: цвет несёт смысл (текст-номер сортировка может переписать). */ .rank-badge.r1 { background: linear-gradient(140deg, #fce18a, #e0a72c); color: #5a4410; box-shadow: 0 2px 6px rgba(224,167,44,.35); } .rank-badge.r2 { background: linear-gradient(140deg, #edeef3, #b7b8c6); color: #444451; box-shadow: 0 2px 6px rgba(150,150,170,.30); } .rank-badge.r3 { background: linear-gradient(140deg, #eec49a, #c8814a); color: #5a3a1e; box-shadow: 0 2px 6px rgba(180,120,70,.32); } a.company { color: var(--accent); font-weight: 600; text-decoration: none; position: relative; cursor: pointer; } a.company::after { content: ''; position: absolute; left: 0; bottom: -3px; width: 0; height: 2px; background: var(--accent); transition: width .3s ease; } a.company:hover::after { width: 100%; } .pct b { font-weight: 600; } /* margin-bottom = -(height + margin-top): полоска не увеличивает бокс ячейки, иначе цифра «ИККС» центрируется выше цифр соседних колонок без полоски. */ .bar { height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--accent), var(--featured)); margin-top: 4px; margin-bottom: -7px; max-width: 100%; } /* Цветовая полоска по диапазону оценки: зелёный ≥85, янтарь 60–85, красный <60. */ .bar.good { background: linear-gradient(90deg, var(--up), #63d68a); } .bar.mid { background: linear-gradient(90deg, #d99400, #f0c14b); } .bar.low { background: linear-gradient(90deg, var(--down), #ff8b96); } /* margin вместо пробела в разметке: пробел давал точку переноса, и стрелка уезжала на следующую строку при узкой колонке. */ .delta-up { color: var(--up); font-size: 1.05rem; font-weight: 700; margin-left: .25rem; } .delta-down { color: var(--down); font-size: 1.05rem; font-weight: 700; margin-left: .25rem; } td.col-posts { text-align: center; color: var(--muted); font-variant-numeric: tabular-nums; } th.col-posts { text-align: center; } /* «Место в отрасли» и «Правописание»: блок значений по центру колонки, но сами числа выровнены по левому краю. Обёртка .cl — inline-block фикс. ширины, поэтому левые края чисел во всех строках выстраиваются в одну вертикаль. */ th.col-c, td.col-c { text-align: center; } td.col-c .cl { display: inline-block; text-align: left; font-variant-numeric: tabular-nums; } td.col-rankind .cl { min-width: 1.1em; } td.pct.col-c .cl { min-width: 4.8em; } .chart-note { color: var(--muted); font-size: .78rem; line-height: 1.45; margin: .55rem 0 0; } /* Показательные находки фактчека (страница компании, под графиком). */ .catches-section { margin-top: 1.8rem; } .catches-title { font-weight: 600; font-size: 1.05rem; margin-bottom: .2rem; } .catches-sub { color: var(--muted); font-size: .85rem; margin-bottom: .9rem; max-width: 60ch; } .catch-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: .85rem 1.05rem; margin-bottom: .7rem; } .catch-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .5rem; } .catch-badge { font-size: .72rem; font-weight: 600; padding: .2rem .6rem; border-radius: 50px; } .catch-badge.incorrect { background: rgba(220,53,69,.13); color: var(--down); } .catch-badge.manipulation { background: rgba(108,60,233,.14); color: var(--featured); } .catch-meta { font-size: .78rem; color: var(--muted); } .catch-meta a { color: var(--accent); text-decoration: none; } .catch-meta a:hover { text-decoration: underline; } .catch-claim { font-size: .9rem; color: var(--muted); font-style: italic; margin-bottom: .4rem; line-height: 1.45; } .catch-expl { font-size: .9rem; line-height: 1.5; } .catch-expl a { color: var(--accent); } /* --- Модалка запроса доступа --- */ .modal { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, .5); z-index: 100; } .modal .box { position: relative; background: var(--card); color: var(--text); max-width: 420px; margin: 15vh auto; border-radius: 16px; padding: 1.6rem; border: 1px solid var(--border); } /* Крестик закрытия в правом верхнем углу модалки */ .modal-close { position: absolute; top: .55rem; right: .7rem; background: none; border: none; font-size: 1.5rem; line-height: 1; color: var(--muted); cursor: pointer; padding: .25rem; } .modal-close:hover { color: var(--text); } /* Акцент на обязательном поле (ссылка на канал) — красная рамка */ .modal input.input-attn { border-color: var(--down, #dc3545); } .modal input { width: 100%; padding: .6rem .8rem; border: 1px solid var(--border); border-radius: 8px; margin: .35rem 0; font-size: 1rem; background: var(--bg); color: var(--text); font-family: inherit; } .modal .box > input:first-of-type { margin-top: .8rem; } /* отступ от вводного текста */ .btn { display: inline-block; padding: .55rem 1.4rem; border-radius: 50px; border: 1px solid var(--accent); background: var(--accent); color: #fff; cursor: pointer; font-family: inherit; font-size: .95rem; font-weight: 500; transition: all .3s ease; } .btn:hover { background: var(--accent-hover); transform: translateY(-2px); box-shadow: 0 4px 15px rgba(233, 69, 96, .4); } .btn.outline { background: transparent; color: var(--text); border-color: var(--border); margin-left: .5rem; } .btn.outline:hover { border-color: var(--accent); box-shadow: none; } .error-text { color: var(--down); font-size: .85rem; min-height: 1.2em; margin: .3rem 0 .2rem; } /* Кнопки модалок: flex-ряд с зазором — на узких экранах кнопки переносятся, не слипаясь ни между собой, ни с текстом статуса выше. */ .modal-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .55rem; } .modal-actions .btn { margin-left: 0; } /* зазор даёт gap, а не margin */ /* --- Страница компании --- */ .history th, .history td { text-align: center; } .history td.row-name, .history th.row-name { text-align: left; font-weight: 600; white-space: nowrap; } .history .ok-row td { font-weight: 600; color: var(--accent); } .history .ok-row td.row-name { color: var(--text); } /* Шапка истории: подложка-блок + иерархия (год — тихая группа, месяцы — основной ярлык) */ .history thead th { background: var(--bg); } .history thead th.row-name { color: var(--muted); font-weight: 600; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; vertical-align: middle; } .year-head th.yr-label { border-bottom: none; color: var(--muted); font-weight: 600; font-size: .7rem; text-transform: uppercase; letter-spacing: .09em; padding-bottom: .15rem; } .history .month-head th { color: var(--text); font-weight: 600; font-size: .85rem; text-transform: none; letter-spacing: 0; padding-top: .15rem; } .first-place { display: inline-flex; min-width: 1.7rem; height: 1.7rem; align-items: center; justify-content: center; border-radius: 50%; background: var(--badge-bg); color: var(--accent); font-weight: 600; } /* Медали мест в истории компании: золото/серебро/бронза (цвет несёт смысл). */ .place-medal { display: inline-flex; min-width: 1.7rem; height: 1.7rem; align-items: center; justify-content: center; border-radius: 50%; font-weight: 700; } .place-medal.m1 { background: linear-gradient(140deg, #fce18a, #e0a72c); color: #5a4410; } .place-medal.m2 { background: linear-gradient(140deg, #edeef3, #b7b8c6); color: #444451; } .place-medal.m3 { background: linear-gradient(140deg, #eec49a, #c8814a); color: #5a3a1e; } /* Цветовые банды оценок в таблице истории (Правописание/Фактура). */ .history td.band-good { color: var(--up); } .history td.band-mid { color: #d99400; } .history td.band-low { color: var(--down); } .history .posts-row td { color: var(--muted); font-weight: 400; font-size: .82rem; } .history .posts-row td.row-name { color: var(--muted); } .back { display: inline-block; margin-top: 1.2rem; color: var(--muted); text-decoration: none; transition: color .2s ease; } .back:hover { color: var(--accent); } @media (max-width: 640px) { h1.hero { font-size: 1.5rem; } th, td { padding: .55rem .55rem; font-size: .85rem; } .wrap { padding: 0 .6rem 2rem; } .brand span { display: none; } } /* --- Разбор постов (страница компании) --- */ .posts-title { font-weight: 600; font-size: 1.15rem; margin: 2rem 0 .8rem; } /* #period-select больше не нуждается в отступе — живёт в .table-toolbar (flex+gap) */ .posts { display: flex; flex-direction: column; } .post-card { background: var(--card); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); padding: 1rem 1.15rem; margin-bottom: .9rem; } .post-meta { font-size: .85rem; color: var(--muted); margin-bottom: .5rem; } .post-meta .post-link { color: var(--accent); text-decoration: none; font-weight: 500; } .post-meta .post-link:hover { text-decoration: underline; } .post-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .55rem; } .cat-chip { display: inline-flex; align-items: center; padding: .15rem .6rem; border-radius: 50px; font-size: .78rem; font-weight: 500; background: var(--badge-bg); color: var(--accent); } .cat-chip.fact { background: rgba(108,60,233,.12); color: var(--featured); } .cat-chip.ok { background: rgba(40,167,69,.12); color: var(--up); } .post-detail { margin-top: .6rem; } .post-detail summary { cursor: pointer; font-size: .82rem; color: var(--muted); font-weight: 500; } .post-detail summary:hover { color: var(--accent); } .detail-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: .7rem; } .detail-col { min-width: 0; } .detail-h { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; margin-bottom: .4rem; } .detail-body { font-size: .88rem; line-height: 1.55; padding-left: .8rem; border-left: 2px solid var(--border); white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; } .detail-body a { color: var(--accent); } .detail-body blockquote { margin: .3rem 0; padding-left: .7rem; border-left: 2px solid var(--accent); color: var(--muted); } @media (max-width: 640px) { .detail-cols { grid-template-columns: 1fr; gap: .9rem; } } .post-media { margin: .2rem 0 .6rem; display: flex; flex-direction: column; gap: .5rem; } .post-media.album { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; } .post-media .mitem { display: block; max-width: 100%; border-radius: 12px; position: relative; } .post-media img.mitem, .post-media a.mitem img { width: 100%; height: auto; border-radius: 12px; display: block; } .post-media.album .mitem { aspect-ratio: 1; border-radius: 6px; } .post-media.album img.mitem, .post-media.album a.mitem img { height: 100%; object-fit: cover; border-radius: 6px; } .post-media a.mitem { position: relative; } /* Одиночное видео-превью: статический эскиз Telegram ≤320px. Растянуть его на всю колонку (320→~450px) даёт мыло. Заполняем колонку РАЗМЫТЫМ фоном из того же эскиза, а поверх — резкий эскиз в натуральном размере по центру (приём blur-up). Фото (1024–1280px, грузятся целиком) не трогаем; видео в альбоме (мелкие ячейки, даунскейл) — тоже. */ .post-media:not(.album) a.mitem { position: relative; align-self: stretch; display: flex; overflow: hidden; align-items: center; justify-content: center; min-height: 200px; } .post-media:not(.album) a.mitem::before { content: ""; position: absolute; inset: 0; background-image: var(--thumb); background-size: cover; background-position: center; filter: blur(22px) brightness(.72); transform: scale(1.2); } .post-media:not(.album) a.mitem img { position: relative; width: auto; height: auto; max-width: 100%; max-height: 380px; border-radius: 8px; } .post-media .vbadge { position: absolute; inset: 0; margin: auto; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; font-size: 20px; color: #fff; background: rgba(0,0,0,.5); border-radius: 50%; } .post-media .mother { color: var(--muted); font-size: .85rem; padding: .4rem 0; } .posts-empty { color: var(--muted); font-size: .92rem; padding: 1rem 0; } /* Фото в разборе кликабельны → лайтбокс (полноразмер, читаемый текст на альбомных фото). Видео (a.mitem) не трогаем — оно ведёт на пост в Telegram. */ .post-media img.mitem { cursor: zoom-in; } .lightbox { position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,.9); display: none; align-items: center; justify-content: center; } .lightbox.open { display: flex; } .lightbox .lb-img { max-width: 94vw; max-height: 94vh; object-fit: contain; border-radius: 8px; box-shadow: 0 10px 44px rgba(0,0,0,.55); } .lightbox .lb-btn { position: absolute; width: 46px; height: 46px; border: none; cursor: pointer; background: rgba(255,255,255,.15); color: #fff; border-radius: 50%; line-height: 1; display: flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; } .lightbox .lb-btn:hover { background: rgba(255,255,255,.28); } .lightbox .lb-close { top: 18px; right: 18px; font-size: 20px; } .lightbox .lb-prev { left: 14px; top: 50%; transform: translateY(-50%); font-size: 30px; } .lightbox .lb-next { right: 14px; top: 50%; transform: translateY(-50%); font-size: 30px; } /* --- Фаза 2: привязка фрагментов --- */ .corr-list { display: flex; flex-direction: column; } .corr-entry { display: flex; gap: .5rem; align-items: flex-start; margin-bottom: .6rem; font-size: .88rem; line-height: 1.5; padding: .1rem .2rem; } .corr-x { flex: 1; min-width: 0; } .corr-x a { color: var(--accent); } /* колонка маркеров: несколько бейджей — столбиком, с промежутком, без наложения */ .marks { flex: none; display: flex; flex-direction: column; gap: .3rem; padding-top: .05rem; } .fnum, .fmark { flex: none; width: 1.25rem; height: 1.25rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-size: .72rem; font-weight: 600; line-height: 1; transition: background .1s, color .1s, box-shadow .1s, transform .1s; } .corr-entry.corr .fnum { background: rgba(217,138,0,.16); color: var(--corr); border: 1px solid var(--corr); } .corr-entry.corr .fnum.no-anchor { border-style: dashed; opacity: .5; } .corr-entry.corr.img .fmark { background: rgba(217,138,0,.12); } .corr-entry.fc .fmark { background: rgba(108,60,233,.14); color: var(--featured); } .corr-entry.fc { color: var(--text); } .corr-entry.corr.hl, .corr-entry.corr.img.hl { background: rgba(217,138,0,.12); border-radius: 6px; } /* Наведение на выделенное место в тексте/медиа подсвечивает метку описания (цифру/иконку). */ .corr-entry.corr .fnum.hl, .corr-entry.corr.hl .fnum, .corr-entry.corr.img.hl .fmark { background: var(--corr); color: #fff; border-color: var(--corr); box-shadow: 0 0 0 3px rgba(217,138,0,.30); transform: scale(1.12); } .corr-entry.fc.hl { background: rgba(108,60,233,.12); border-radius: 6px; } .corr-none { color: var(--up); font-size: .88rem; } /* незапарсенная корректура (напр. «ошибок не найдено») — приглушённой ремаркой */ .corr-entry.note .corr-x { color: var(--muted); } mark.frag { background: rgba(217,138,0,.16); border-bottom: 2px solid var(--corr); border-radius: 3px; padding: 0 1px; color: inherit; } mark.frag.hl { background: rgba(217,138,0,.34); } mark.frag .fbadge { font-size: .62rem; font-weight: 700; color: var(--corr); vertical-align: super; margin-left: 1px; } .post-media.hl-media, .post-media .mitem.hl-media { outline: 3px solid var(--corr); outline-offset: 1px; border-radius: 8px; } /* Мобильный тап (mark ⇄ описание): пульс на элементе, к которому проскроллили. */ @keyframes fainaJump { 0%,100%{ box-shadow: 0 0 0 0 rgba(217,138,0,0); } 25%{ box-shadow: 0 0 0 5px rgba(217,138,0,.5); } } .jump-flash { animation: fainaJump .9s ease-out 2; border-radius: 6px; } @media (prefers-reduced-motion: reduce) { .jump-flash { animation: none; } } .corr-fixed { margin-top: .4rem; } .corr-fixed summary { cursor: pointer; font-size: .8rem; color: var(--muted); } .corr-fixed summary:hover { color: var(--accent); } /* --- Методология на публичной странице --- */ .method { margin-top: 1.3rem; } .method summary { cursor: pointer; font-weight: 600; color: var(--muted); font-size: .92rem; } .method summary:hover { color: var(--accent); } .method-body { font-size: .88rem; color: var(--text); line-height: 1.55; margin-top: .7rem; } .method-body p { margin: .45rem 0; } .method-body b { color: var(--accent); font-weight: 600; } /* --- Графики динамики --- */ .chart-section { margin-top: 1.4rem; } .chart-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .6rem; margin-bottom: .6rem; } .chart-title { font-weight: 600; font-size: 1.05rem; } .chart-toggle { display: flex; gap: .35rem; } .chart-toggle .pill { padding: .3rem .8rem; font-size: .82rem; cursor: pointer; border: 1px solid var(--border); background: var(--card); color: var(--muted); border-radius: 50px; } .chart-toggle .pill.active { color: #fff; background: var(--accent); border-color: var(--accent); } .chart-wrap { width: 100%; } .chart-wrap .chart { display: block; } .chart-grid { stroke: var(--border); stroke-width: 1; } .chart-period-marker { stroke: var(--muted); stroke-width: .7; opacity: .7; } /* Линии графика ПОСЛЕ конца выбранного периода рисуем бледнее (фон не трогаем). */ .chart-line-after { opacity: .3; } .chart-yl, .chart-xl { fill: var(--muted); font-size: 11px; } .chart-empty { color: var(--muted); font-size: .9rem; padding: 1.5rem 0; } .chart-legend { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin-top: .5rem; font-size: .82rem; color: var(--text); } /* Подписи компаний НАД графиком (публичная страница) */ .chart-legend.legend-top { margin: 0 0 .6rem; } .chart-legend .lg { display: inline-flex; align-items: center; gap: .35rem; } .chart-legend .sw { width: 11px; height: 11px; border-radius: 3px; display: inline-block; } .chart-rank { fill: #e34948; } /* --- CTA (страница компании) --- */ .cta-block { margin: 1.8rem 0 0; padding: 1.1rem 1.3rem; border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 14px; background: var(--card); box-shadow: var(--shadow); display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } .cta-text { flex: 1 1 320px; font-size: .92rem; line-height: 1.5; color: var(--text); } .cta-btn { flex: 0 0 auto; display: inline-block; padding: .55rem 1.2rem; border-radius: 50px; background: var(--accent); color: #fff; text-decoration: none; font-weight: 600; font-size: .9rem; white-space: nowrap; transition: all .2s ease; } .cta-btn:hover { background: var(--accent-hover); transform: translateY(-2px); box-shadow: 0 4px 15px rgba(233,69,96,.4); } /* --- «Добавить свой канал» (под таблицей) --- */ .add-channel { color: var(--muted); font-size: .9rem; margin: .9rem 0 0; } .add-channel a { color: var(--accent); text-decoration: none; font-weight: 600; } .add-channel a:hover { text-decoration: underline; } /* --- Футер (обе страницы) --- */ .site-footer { margin-top: 2.6rem; } .footer-line { height: 3px; border-radius: 2px; background: linear-gradient(90deg, #e94560, #6c3ce9); opacity: .5; margin-bottom: 1rem; } .footer-about { color: var(--muted); font-size: .85rem; line-height: 1.55; max-width: 64ch; margin-bottom: .8rem; } .footer-about b { color: var(--text); font-weight: 600; } .footer-links { display: flex; flex-wrap: wrap; gap: .8rem 1.2rem; font-size: .85rem; } .footer-links a { color: var(--accent); text-decoration: none; } .footer-links a:hover { text-decoration: underline; }