/* * Вёрстка веб-части «Топы». * Все значения берутся из дизайн-токенов kanso (--kp-*) — без «магических» чисел, * как требует дизайн-система. Тема переключается атрибутом data-theme на . */ * { box-sizing: border-box; } html, body { margin: 0; height: 100%; } body { background: var(--kp-color-surface-base); color: var(--kp-color-text-default); font-family: var(--kp-font-family-sans, "Onest"), "Onest", system-ui, sans-serif; font-size: var(--kp-font-size-md); font-weight: var(--kp-font-weight-regular); line-height: 1.5; } /* ---------- раскладка: боковое меню + контент ---------- */ .layout { display: grid; grid-template-columns: minmax(220px, 280px) 1fr; min-height: 100vh; } .sidebar { display: flex; flex-direction: column; gap: var(--kp-spacing-lg); padding: var(--kp-spacing-xl); background: var(--kp-color-surface-muted); border-right: 1px solid var(--kp-color-border-subtle); position: sticky; top: 0; height: 100vh; overflow-y: auto; } .brand { display: flex; align-items: center; gap: var(--kp-spacing-sm); font-weight: var(--kp-font-weight-bold); font-size: var(--kp-font-size-lg); color: var(--kp-color-text-strong); } .brand-logo { width: 2.5rem; height: 2.5rem; flex: 0 0 auto; border-radius: var(--kp-radius-comp-md); object-fit: cover; box-shadow: var(--kp-elevation-raised); } .brand-text { display: flex; flex-direction: column; line-height: 1.1; } .brand-text small { font-weight: var(--kp-font-weight-regular); font-size: var(--kp-font-size-xs); color: var(--kp-color-text-muted); } nav { display: flex; flex-direction: column; gap: var(--kp-spacing-lg); flex: 1; } .nav-group { display: flex; flex-direction: column; gap: var(--kp-spacing-3xs); } .nav-title { text-transform: uppercase; letter-spacing: .06em; font-size: var(--kp-font-size-2xs); font-weight: var(--kp-font-weight-semibold); color: var(--kp-color-text-muted); padding: 0 var(--kp-spacing-sm) var(--kp-spacing-3xs); } .nav-item { appearance: none; text-align: left; border: 1px solid transparent; background: transparent; color: var(--kp-color-text-default); font: inherit; padding: var(--kp-spacing-xs) var(--kp-spacing-sm); border-radius: var(--kp-radius-comp-md); cursor: pointer; transition: background var(--kp-motion-duration-fast, 120ms) ease, color var(--kp-motion-duration-fast, 120ms) ease; } .nav-item:hover { background: var(--kp-color-surface-strong); } .nav-item--accent { color: var(--kp-color-accent-primary-fg); font-weight: var(--kp-font-weight-medium); } .nav-item.is-active { background: color-mix(in srgb, var(--kp-color-accent-primary-fg) 14%, transparent); color: var(--kp-color-accent-primary-fg); border-color: color-mix(in srgb, var(--kp-color-accent-primary-fg) 30%, transparent); font-weight: var(--kp-font-weight-semibold); } .theme-toggle { appearance: none; border: 1px solid var(--kp-color-border-default); background: var(--kp-color-surface-base); color: var(--kp-color-text-default); font: inherit; padding: var(--kp-spacing-xs) var(--kp-spacing-sm); border-radius: var(--kp-radius-comp-md); cursor: pointer; } .theme-toggle:hover { background: var(--kp-color-surface-strong); } /* ---------- контент ---------- */ .content { padding: var(--kp-spacing-2xl); max-width: 820px; width: 100%; margin: 0 auto; } .periodbar { display: flex; align-items: center; gap: var(--kp-spacing-sm); flex-wrap: wrap; margin-bottom: var(--kp-spacing-xl); min-height: 2.5rem; } .period-label { font-size: var(--kp-font-size-xl); font-weight: var(--kp-font-weight-semibold); color: var(--kp-color-text-strong); } .stepper { display: inline-flex; align-items: center; gap: var(--kp-spacing-2xs); } .step-btn, .picker, .ghost-btn { appearance: none; border: 1px solid var(--kp-color-border-default); background: var(--kp-color-surface-base); color: var(--kp-color-text-default); font: inherit; border-radius: var(--kp-radius-comp-md); cursor: pointer; padding: var(--kp-spacing-2xs) var(--kp-spacing-sm); } .step-btn { min-width: 2.25rem; font-size: var(--kp-font-size-lg); line-height: 1; } .step-btn:disabled { opacity: .4; cursor: not-allowed; } .step-btn:not(:disabled):hover, .ghost-btn:hover { background: var(--kp-color-surface-strong); } .picker { color: var(--kp-color-text-default); } .ghost-btn { color: var(--kp-color-text-muted); } /* ---------- карточка победителя ---------- */ .winner { background: var(--kp-color-surface-base); border: 1px solid var(--kp-color-border-subtle); border-radius: var(--kp-radius-comp-xl); box-shadow: var(--kp-elevation-raised); padding: var(--kp-spacing-xl); display: flex; flex-direction: column; gap: var(--kp-spacing-lg); } .winner-head { display: flex; align-items: center; justify-content: space-between; gap: var(--kp-spacing-sm); flex-wrap: wrap; } .winner-author { font-weight: var(--kp-font-weight-semibold); font-size: var(--kp-font-size-lg); color: var(--kp-color-text-strong); } .winner-date { font-size: var(--kp-font-size-xs); color: var(--kp-color-text-muted); } .embed { min-height: 4rem; } .embed iframe { border-radius: var(--kp-radius-comp-lg) !important; } .stats { display: flex; flex-wrap: wrap; gap: var(--kp-spacing-2xs); align-items: center; } /* Фолбэк-стиль для kp-badge, если кастом-элемент не успел подняться */ kp-badge { display: inline-flex; align-items: center; gap: var(--kp-spacing-3xs); padding: var(--kp-spacing-3xs) var(--kp-spacing-xs); border-radius: var(--kp-radius-full); font-size: var(--kp-font-size-sm); font-weight: var(--kp-font-weight-medium); background: var(--kp-color-surface-muted); border: 1px solid var(--kp-color-border-subtle); } .winner-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--kp-spacing-sm); flex-wrap: wrap; border-top: 1px solid var(--kp-color-border-subtle); padding-top: var(--kp-spacing-md); } .tg-link { text-decoration: none; color: var(--kp-color-accent-primary-fg); font-weight: var(--kp-font-weight-medium); border: 1px solid color-mix(in srgb, var(--kp-color-accent-primary-fg) 35%, transparent); border-radius: var(--kp-radius-comp-md); padding: var(--kp-spacing-2xs) var(--kp-spacing-md); } .tg-link:hover { background: color-mix(in srgb, var(--kp-color-accent-primary-fg) 10%, transparent); } /* ---------- пустое состояние / ошибка / скелетон ---------- */ .placeholder { text-align: center; padding: var(--kp-spacing-4xl) var(--kp-spacing-xl); color: var(--kp-color-text-muted); border: 1px dashed var(--kp-color-border-default); border-radius: var(--kp-radius-comp-xl); } .placeholder .emoji { font-size: 2.5rem; display: block; margin-bottom: var(--kp-spacing-sm); } .placeholder--error { color: var(--kp-color-accent-danger-fg); border-color: color-mix(in srgb, var(--kp-color-accent-danger-fg) 40%, transparent); } .skeleton { height: 22rem; border-radius: var(--kp-radius-comp-xl); background: linear-gradient(90deg, var(--kp-color-surface-muted) 25%, var(--kp-color-surface-strong) 37%, var(--kp-color-surface-muted) 63%); background-size: 400% 100%; animation: shimmer 1.3s ease infinite; } @keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } } /* ---------- адаптив: на узких экранах меню сверху ---------- */ @media (max-width: 720px) { .layout { grid-template-columns: 1fr; } .sidebar { position: static; height: auto; flex-direction: column; border-right: none; border-bottom: 1px solid var(--kp-color-border-subtle); } nav { flex-direction: row; flex-wrap: wrap; gap: var(--kp-spacing-md); } .content { padding: var(--kp-spacing-lg); } }