/* ============================================================ TopmusicUA — Design System (style.css) Этап 2: фундамент (переменные, темы, reset, типографика) Стиль: Apple / Apple Music · минимализм · 🇺🇦 акценты Технологии: CSS3, CSS Variables, Flexbox, Grid, Mobile First ============================================================ */ /* ---------------------------------------------------------------- 1. DESIGN TOKENS — светлая тема (по умолчанию) ---------------------------------------------------------------- */ :root { /* Бренд-палитра (флаг України) */ --ua-blue: #0057B7; --ua-blue-600: #0066d6; /* hover / активные состояния */ --ua-blue-050: #eaf2fc; /* очень светлый фон-подложка */ --ua-yellow: #FFD700; --ua-yellow-600: #f5c400; /* hover для жёлтых акцентов */ /* Семантические акценты (используются компонентами) */ --accent: var(--ua-blue); --accent-hover: var(--ua-blue-600); --accent-soft: var(--ua-blue-050); --highlight: var(--ua-yellow); /* активный трек, индикаторы */ /* Поверхности и фон */ --bg: #f5f6f8; /* общий фон страницы (очень светло-серый) */ --surface: #ffffff; /* карточки, панели */ --surface-2: #f0f2f5; /* вторичные поверхности / hover */ --surface-glass: rgba(255, 255, 255, 0.72); /* glassmorphism */ /* Текст */ --text: #1c1c1e; /* основной */ --text-secondary: #5b5f66; /* вторичный */ --text-muted: #8a8f98; /* приглушённый */ --text-on-accent: #ffffff; /* текст на синем */ /* Границы и разделители */ --border: #e4e6ea; --border-strong: #d4d7dd; /* Радиусы (мягкие скругления) */ --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 24px; --r-pill: 999px; /* Тени (аккуратные, мягкие) */ --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05); --shadow-sm: 0 2px 8px rgba(16, 24, 40, 0.06); --shadow-md: 0 6px 20px rgba(16, 24, 40, 0.08); --shadow-lg: 0 16px 40px rgba(16, 24, 40, 0.12); --shadow-accent: 0 6px 18px rgba(0, 87, 183, 0.28); /* Типографика — системный «Apple» стек */ --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --fs-xs: 0.8125rem; /* 13px */ --fs-sm: 0.875rem; /* 14px */ --fs-base: 1rem; /* 16px */ --fs-md: 1.125rem; /* 18px */ --fs-lg: 1.375rem; /* 22px */ --fs-xl: 1.75rem; /* 28px */ --fs-2xl: 2.25rem; /* 36px */ --lh: 1.6; --lh-tight: 1.25; /* Пространство (щедрые отступы) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; /* Контейнер */ --container: 1100px; /* Анимации (плавные) */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --t-fast: 0.15s; --t-base: 0.25s; --t-slow: 0.4s; /* Высота нижнего плеера (учитываем в отступах body) */ --player-h: 76px; color-scheme: light; } /* ---------------------------------------------------------------- 2. DESIGN TOKENS — тёмная тема (графит + сине/жёлтые акценты) Активируется классом .dark на или системной настройкой ---------------------------------------------------------------- */ @media (prefers-color-scheme: dark) { :root:not(.light) { --accent: #3b8aff; --accent-hover: #5b9eff; --accent-soft: rgba(59, 138, 255, 0.14); --highlight: var(--ua-yellow); --bg: #0e0f12; --surface: #1a1c20; --surface-2: #24262b; --surface-glass: rgba(26, 28, 32, 0.72); --text: #f2f3f5; --text-secondary: #b6bac1; --text-muted: #80858e; --text-on-accent: #ffffff; --border: #2c2f35; --border-strong: #3a3e45; --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.45); --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.5); --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.6); --shadow-accent: 0 6px 18px rgba(59, 138, 255, 0.35); color-scheme: dark; } } /* Ручное переключение темы (на будущее: класс на ) */ :root.dark { --accent: #3b8aff; --accent-hover: #5b9eff; --accent-soft: rgba(59, 138, 255, 0.14); --bg: #0e0f12; --surface: #1a1c20; --surface-2: #24262b; --surface-glass: rgba(26, 28, 32, 0.72); --text: #f2f3f5; --text-secondary: #b6bac1; --text-muted: #80858e; --border: #2c2f35; --border-strong: #3a3e45; --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.45); --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.5); --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.6); --shadow-accent: 0 6px 18px rgba(59, 138, 255, 0.35); color-scheme: dark; } /* ---------------------------------------------------------------- 3. RESET / NORMALIZE (лёгкий, современный) ---------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; } body { margin: 0; padding: 0; min-height: 100vh; background: var(--bg); color: var(--text); font-family: var(--font); font-size: var(--fs-base); line-height: var(--lh); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; /* никаких горизонтальных прокруток */ } img, picture, video, canvas { max-width: 100%; height: auto; display: block; } input, button, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; border: none; background: none; } a { color: var(--accent); text-decoration: none; transition: color var(--t-fast) var(--ease); } a:hover { color: var(--accent-hover); } h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 700; line-height: var(--lh-tight); letter-spacing: -0.02em; color: var(--text); } p { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } table { border-collapse: collapse; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); } /* Уважение к пользователям, отключившим анимации */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ---------------------------------------------------------------- 4. БАЗОВЫЙ КАРКАС (контейнер + утилиты) Компоненты (header, карточки, плеер) добавятся на своих этапах ---------------------------------------------------------------- */ .bodywrap { width: 100%; margin: 0; padding: 0; background: var(--bg); color: var(--text); } .container, .content, .maincontainer { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--space-4); } main { display: block; padding-bottom: calc(var(--player-h) + var(--space-6)); /* место под плеер */ } .clr { clear: both; } /* Доступный, но визуально скрытый текст */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Заголовок секции (Популярна музика / Інші пісні и т.п.) */ .menus { font-size: var(--fs-lg); font-weight: 700; text-align: center; margin: var(--space-7) 0 var(--space-5); text-transform: uppercase; letter-spacing: 0.02em; } /* ============================================================ Этап 3 — HEADER · SEARCH · NAV · FOOTER ============================================================ */ /* ---------- HEADER (sticky, glassmorphism) ---------- */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--surface-glass); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--border); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); max-width: var(--container); margin-inline: auto; padding: var(--space-3) var(--space-4); } /* Лого */ .logo { display: inline-flex; align-items: center; gap: var(--space-2); flex-shrink: 0; font-size: var(--fs-lg); font-weight: 800; letter-spacing: -0.03em; color: var(--text); background: none; padding: 0; margin: 0; height: auto; width: auto; } .logo:hover { color: var(--accent); } .logo .logotype { font-weight: 800; } /* Мини-флаг 🇺🇦 как акцент перед названием */ .logo::before { content: ""; width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0; background: linear-gradient(180deg, var(--ua-blue) 0 50%, var(--ua-yellow) 50% 100%); box-shadow: var(--shadow-xs); } /* ---------- SEARCH ---------- */ .q { float: none; margin: 0; clear: none; } .search { position: relative; width: clamp(180px, 38vw, 320px); margin: 0; } .search .input { width: 100%; padding: 10px 42px 10px 16px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface-2); color: var(--text); font-size: var(--fs-sm); outline: none; box-shadow: none; transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); -webkit-appearance: none; appearance: none; } .search .input::placeholder { color: var(--text-muted); } .search .input:focus { background: var(--surface); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); color: var(--text); } .search .submit { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%; cursor: pointer; background: transparent; opacity: 1; /* иконка лупы через SVG-маску (текущий цвет, без шрифтов и картинок) */ -webkit-mask: var(--icon-search) center / 18px no-repeat; mask: var(--icon-search) center / 18px no-repeat; background-color: var(--text-muted); transition: background-color var(--t-fast) var(--ease); } .search .submit:hover { background-color: var(--accent); opacity: 1; } :root { --icon-search: url("data:image/svg+xml;utf8,"); } /* ---------- CATEGORY NAV (теги-чипы) ---------- */ .cat { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin: var(--space-6) auto; padding: 0 var(--space-4); } .cat a { display: inline-flex; align-items: center; gap: 4px; padding: 8px 16px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--border); color: var(--text-secondary); font-size: var(--fs-sm); font-weight: 600; text-transform: none; margin: 0; box-shadow: var(--shadow-xs); transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); } .cat a::before { content: "#"; color: var(--accent); font-size: var(--fs-xs); font-weight: 700; } .cat a:hover { background: var(--accent); border-color: var(--accent); color: var(--text-on-accent); transform: translateY(-1px); } .cat a:hover::before { color: var(--ua-yellow); } /* ---------- "Наверх" / домой ---------- */ .goto { display: flex; align-items: center; justify-content: center; gap: var(--space-3); margin-top: var(--space-7); } .goto .home a, .goto .top a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 18px; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: var(--fs-sm); font-weight: 600; box-shadow: var(--shadow-xs); transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); } .goto .home a:hover, .goto .top a:hover { background: var(--surface-2); transform: translateY(-1px); } /* ---------- FOOTER ---------- */ .site-footer { margin-top: var(--space-8); border-top: 1px solid var(--border); background: var(--surface); } .footer-inner { max-width: var(--container); margin-inline: auto; padding: var(--space-6) var(--space-4); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2) var(--space-3); color: var(--text-muted); font-size: var(--fs-sm); text-align: center; } .footer-inner a { color: var(--text-secondary); font-weight: 500; } .footer-inner a:hover { color: var(--accent); } /* ---------- Адаптив ---------- */ @media (max-width: 600px) { .header-inner { padding: var(--space-2) var(--space-3); gap: var(--space-2); } .logo { font-size: var(--fs-md); } .search { width: clamp(120px, 46vw, 200px); } } /* ============================================================ Этап 4 — СПИСОК ТРЕКОВ (карточки) .play используется в main.tpl (топ/список) и related-news ============================================================ */ /* Контейнер списка — адаптивная сетка */ ul.play { display: grid; grid-template-columns: 1fr; gap: var(--space-2); margin: var(--space-4) 0; padding: 0; list-style: none; } @media (min-width: 720px) { ul.play { grid-template-columns: 1fr 1fr; gap: var(--space-3); } } /* Карточка трека (li = flex-контейнер: кнопка play + ссылка) */ ul.play li { display: flex; align-items: center; gap: var(--space-3); min-width: 0; margin: 0; padding: var(--space-3) var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-xs); transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-base) var(--ease), transform var(--t-fast) var(--ease); } ul.play li:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-1px); } /* Ссылка-заголовок внутри карточки */ ul.play li a { flex: 1 1 auto; min-width: 0; display: block; color: var(--text); font-size: var(--fs-sm); font-weight: 500; line-height: 1.3; /* убираем старый float-layout прежней темы */ float: none; width: auto; padding: 0; background: none; border: none; white-space: normal; } ul.play li a:hover { color: var(--accent); } /* Текст трека: одна строка с многоточием */ ul.play li .ua-title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Карточка с активным (играющим) треком */ ul.play li.is-playing { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow-sm); } ul.play li.is-playing a { color: var(--accent); } /* Убираем старый псевдоэлемент ▶ из прежней темы (теперь кнопка отдельная) */ ul.play li a::before { content: none; } /* ---------- Кнопка Play (Apple-style) ---------- */ .ua-play { --size: 38px; flex: 0 0 var(--size); width: var(--size); height: var(--size); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; background: var(--accent-soft); color: var(--accent); transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease-spring), box-shadow var(--t-fast) var(--ease); -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; } .ua-play:hover { background: var(--accent); color: var(--text-on-accent); box-shadow: var(--shadow-accent); transform: scale(1.06); } .ua-play:active { transform: scale(0.96); } /* Иконка play через маску (по умолчанию ▶) */ .ua-play::before { content: ""; width: 16px; height: 16px; background-color: currentColor; -webkit-mask: var(--icon-play) center / contain no-repeat; mask: var(--icon-play) center / contain no-repeat; transition: -webkit-mask var(--t-fast), mask var(--t-fast); } /* Состояние «играет» — превращаем в ❚❚ */ .ua-play.is-playing { background: var(--accent); color: var(--text-on-accent); } .ua-play.is-playing::before { -webkit-mask: var(--icon-pause) center / contain no-repeat; mask: var(--icon-pause) center / contain no-repeat; } /* Состояние загрузки трека */ .ua-play.is-loading::before { -webkit-mask: var(--icon-loading) center / contain no-repeat; mask: var(--icon-loading) center / contain no-repeat; animation: ua-spin 0.8s linear infinite; } @keyframes ua-spin { to { transform: rotate(360deg); } } :root { --icon-play: url("data:image/svg+xml;utf8,"); --icon-pause: url("data:image/svg+xml;utf8,"); --icon-loading: url("data:image/svg+xml;utf8,"); } /* «Більше» / служебные пункты списка (li.more из прежней темы) */ ul.play li.more { grid-column: 1 / -1; display: flex; justify-content: center; background: transparent; margin: var(--space-3) 0; } ul.play li.more a { display: inline-flex; justify-content: center; width: auto; background: var(--accent); border-color: var(--accent); color: var(--text-on-accent); font-weight: 700; padding: 10px 24px; border-radius: var(--r-pill); } ul.play li.more a:hover { background: var(--accent-hover); transform: translateY(-1px); } ul.play li.more a::before { content: none; } ul.play li.more span { background: var(--accent-soft); color: var(--accent); border-radius: var(--r-pill); padding: 6px 14px; font-size: var(--fs-sm); font-weight: 600; } /* ============================================================ Этап 5 — НИЖНИЙ ПЛЕЕР (sticky mini-player) ============================================================ */ .ua-player { position: fixed; left: 0; right: 0; bottom: 0; z-index: 200; transform: translateY(calc(100% + 20px)); transition: transform var(--t-slow) var(--ease-spring); background: var(--surface-glass); -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px); border-top: 1px solid var(--border); box-shadow: 0 -8px 30px rgba(16, 24, 40, 0.10); } .ua-player.is-active { transform: translateY(0); } .ua-player__inner { max-width: var(--container); margin-inline: auto; padding: var(--space-3) var(--space-4); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-3) var(--space-4); } /* Блок управления (prev / play / next) */ .ua-player__controls { display: flex; align-items: center; gap: var(--space-1); } .ua-player__btn { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--text); background: transparent; transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease-spring); } .ua-player__btn:hover { background: var(--surface-2); } .ua-player__btn:active { transform: scale(0.92); } .ua-player__btn::before { content: ""; width: 22px; height: 22px; background-color: currentColor; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; } .ua-player__btn--prev::before { -webkit-mask-image: var(--icon-prev); mask-image: var(--icon-prev); } .ua-player__btn--next::before { -webkit-mask-image: var(--icon-next); mask-image: var(--icon-next); } /* Главная кнопка play/pause */ .ua-player__btn--play { width: 48px; height: 48px; background: var(--accent); color: var(--text-on-accent); box-shadow: var(--shadow-accent); } .ua-player__btn--play:hover { background: var(--accent-hover); } .ua-player__btn--play::before { width: 24px; height: 24px; -webkit-mask-image: var(--icon-play); mask-image: var(--icon-play); } .ua-player.is-playing .ua-player__btn--play::before { -webkit-mask-image: var(--icon-pause); mask-image: var(--icon-pause); } /* Центр: название + прогресс */ .ua-player__center { min-width: 0; } .ua-player__title { font-size: var(--fs-sm); font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 6px; } .ua-player__progress-row { display: flex; align-items: center; gap: var(--space-2); } .ua-player__time { font-size: var(--fs-xs); font-variant-numeric: tabular-nums; color: var(--text-muted); flex-shrink: 0; min-width: 38px; text-align: center; } /* Прогресс-бар (range, кастомный) */ .ua-range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: var(--r-pill); background: var(--surface-2); background-image: linear-gradient(var(--accent), var(--accent)); background-repeat: no-repeat; background-size: var(--fill, 0%) 100%; cursor: pointer; outline: none; } .ua-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); border: 2px solid var(--surface); box-shadow: var(--shadow-sm); transition: transform var(--t-fast) var(--ease); } .ua-range::-webkit-slider-thumb:hover { transform: scale(1.2); } .ua-range::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); border: 2px solid var(--surface); box-shadow: var(--shadow-sm); } .ua-range::-moz-range-progress { background: var(--accent); height: 6px; border-radius: var(--r-pill); } .ua-range::-moz-range-track { background: var(--surface-2); height: 6px; border-radius: var(--r-pill); } /* Правый блок: громкость */ .ua-player__volume { display: flex; align-items: center; gap: var(--space-2); } .ua-player__volume-icon { width: 22px; height: 22px; flex-shrink: 0; background-color: var(--text-secondary); -webkit-mask: var(--icon-volume) center / contain no-repeat; mask: var(--icon-volume) center / contain no-repeat; cursor: pointer; } .ua-player__volume-icon.is-muted { -webkit-mask-image: var(--icon-mute); mask-image: var(--icon-mute); } .ua-player__volume .ua-range { width: 90px; } /* Иконки */ :root { --icon-prev: url("data:image/svg+xml;utf8,"); --icon-next: url("data:image/svg+xml;utf8,"); --icon-volume: url("data:image/svg+xml;utf8,"); --icon-mute: url("data:image/svg+xml;utf8,"); } /* Адаптив плеера */ @media (max-width: 760px) { .ua-player__inner { grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-3); padding: var(--space-2) var(--space-3); } .ua-player__volume { display: none; } /* на мобиле громкость скрыта (системная) */ .ua-player__btn--prev, .ua-player__btn--next { display: none; } /* экономим место — Prev/Next по свайпу не нужны */ } /* ============================================================ Этап 6 — СТРАНИЦА ТРЕКА (fullstory / album / ring) ============================================================ */ .music { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-sm); padding: var(--space-5); margin: var(--space-5) 0; color: var(--text); font-size: var(--fs-base); line-height: var(--lh); } /* Шапка трека: обложка + информация */ .track-head { display: grid; grid-template-columns: 1fr; gap: var(--space-5); align-items: start; } @media (min-width: 680px) { .track-head { grid-template-columns: 220px 1fr; } } /* Обложка (фон задаётся существующим классом .cover/.covers) */ .music .cover { width: 100%; max-width: 220px; aspect-ratio: 1 / 1; height: auto; margin: 0 auto; float: none; border-radius: var(--r-lg); background-size: cover; background-position: center; box-shadow: var(--shadow-md); } .music .track { float: none; width: auto; min-width: 0; margin: 0; } .music .track h1 { font-size: var(--fs-xl); margin-bottom: var(--space-4); border: none; padding: 0; color: var(--text); } /* Действия: крупная кнопка Play + скачать */ .track-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin: var(--space-4) 0; } .track-actions .ua-play { --size: 56px; } .track-actions .ua-play::before { width: 22px; height: 22px; } .btn-download { display: inline-flex; align-items: center; gap: var(--space-2); padding: 12px 24px; border-radius: var(--r-pill); background: var(--highlight); color: #1c1c1e; font-size: var(--fs-sm); font-weight: 700; box-shadow: var(--shadow-sm); transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background var(--t-fast) var(--ease); } .btn-download::before { content: ""; width: 18px; height: 18px; background-color: currentColor; -webkit-mask: var(--icon-download) center / contain no-repeat; mask: var(--icon-download) center / contain no-repeat; } .btn-download:hover { background: var(--ua-yellow-600); color: #1c1c1e; transform: translateY(-1px); box-shadow: var(--shadow-md); } :root { --icon-download: url("data:image/svg+xml;utf8,"); } /* Таблица характеристик → аккуратные строки label/value */ .music table.info { display: block; margin: var(--space-4) 0; width: 100%; } .music table.info tr { display: flex; justify-content: space-between; gap: var(--space-4); padding: 10px 0; border-bottom: 1px solid var(--border); } .music table.info tr:last-child { border-bottom: none; } .music table.info th { text-align: left; font-weight: 500; color: var(--text-muted); white-space: nowrap; } .music table.info td { text-align: right; font-weight: 600; color: var(--text); } .music table.info td a { color: var(--accent); font-weight: 600; } /* Описание трека */ .music p { margin: var(--space-3) 0; } .music a { color: var(--accent); } /* Старый плеер из attachment.tpl ({short-story}) — аккуратно вписываем */ .music .load { margin: var(--space-4) 0; background: none; } .music .load span.dl a { color: var(--text); } .music audio { width: 100%; margin: var(--space-3) 0; border-radius: var(--r-pill); } /* FAQ-аккордеон в новом стиле */ .track-faq { max-width: 100%; margin: var(--space-6) 0 0; color: var(--text); } .track-faq h2 { font-size: var(--fs-lg); margin-bottom: var(--space-3); text-align: left; } .track-faq details { border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-2); background: var(--surface-2); transition: background var(--t-fast) var(--ease); } .track-faq details[open] { background: var(--accent-soft); } .track-faq summary { font-weight: 600; cursor: pointer; list-style: none; color: var(--text); } .track-faq summary::-webkit-details-marker { display: none; } .track-faq summary::after { content: "+"; float: right; font-weight: 700; color: var(--accent); } .track-faq details[open] summary::after { content: "\2212"; } .track-faq p { margin: var(--space-3) 0 0; color: var(--text-secondary); } /* Рекламный блок внутри страницы — отступы */ .music .adshead, .adshead { margin: var(--space-5) 0; min-height: 0; } /* ============================================================ Этап 7 — Финал: контент главной/категорий, переносим нужные классы из старого инлайн-