/* Фирменный стиль 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.5rem; font-size: .95rem; } 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; } @keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } } @media (prefers-reduced-motion: reduce) { .card { animation: none; } } table { width: 100%; border-collapse: collapse; } th, td { padding: .8rem 1rem; text-align: left; font-size: .93rem; border-bottom: 1px solid var(--border); } th { color: var(--muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 500; } 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); } 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; } .bar { height: 2px; border-radius: 1px; background: linear-gradient(90deg, var(--accent), var(--featured)); margin-top: 4px; max-width: 100%; } .delta-up { color: var(--up); font-size: .8rem; } .delta-down { color: var(--down); font-size: .8rem; } /* --- Модалка запроса доступа --- */ .modal { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, .5); z-index: 100; } .modal .box { background: var(--card); color: var(--text); max-width: 420px; margin: 15vh auto; border-radius: 16px; padding: 1.6rem; border: 1px solid var(--border); } .modal input { width: 100%; padding: .6rem .8rem; border: 1px solid var(--border); border-radius: 8px; margin: .7rem 0; font-size: 1rem; background: var(--bg); color: var(--text); font-family: inherit; } .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; } /* --- Страница компании --- */ .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; } .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 { margin-bottom: 1.1rem; } .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; } .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; } /* --- Фаза 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; } .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.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; } .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-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 .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; }