/* MultiTrack Player — страница раздела (Hugo). Публикация: скопируйте в свой Hugo-сайт: docs/site/static/css/multitrack.css -> static/css/multitrack.css и подключите в либо через параметр custom_css / css: []. Токены ниже переопределяют переменные Hugo-темы, если она их использует. Если тема не поддерживает кастом-токены — просто пропустите :root (классы .mt-* работают автономно). */ :root { --mt-accent: #6ba7ff; /* основной акцент (волны waveform) */ --mt-accent-hover: #83b7ff; --mt-bg: #0f1115; /* фон страницы (тёмная тема плеера) */ --mt-card: #171a20; /* фон карточек/секций */ --mt-border: #2a2f3a; /* рамки */ --mt-text: #e8ebef; /* основной текст */ --mt-muted: #98a0ab; /* вторичный текст */ --mt-code-bg: #1b1f27; /* фон инлайн-кода */ --mt-radius: 14px; /* скругление карточек/скриншотов */ } /* ---------- Хиро ---------- */ .mt-hero { display: grid; grid-template-columns: 1.15fr 1fr; gap: 2.5rem; align-items: center; padding: 3rem 0 1rem; } .mt-hero h1 { font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.06; margin: 0 0 0.75rem; color: var(--mt-text); } .mt-hero .mt-tagline { font-size: clamp(1.05rem, 2vw, 1.25rem); color: var(--mt-muted); margin-bottom: 1.5rem; } .mt-hero-img img, .mt-screenshots img { width: 100%; border-radius: var(--mt-radius); border: 1px solid var(--mt-border); } /* ---------- Бейджи (платформы) ---------- */ .mt-badges { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.5rem 0 2.5rem; } .mt-badge { display:inline-flex; align-items:center; gap: 0.5rem; padding: 0.45rem 0.9rem; border-radius: 999px; border: 1px solid var(--mt-border); background: var(--mt-card); font-size: 0.9rem; color: var(--mt-text); text-decoration: none; transition: border-color .15s, transform .15s; } .mt-badge:hover { border-color: var(--mt-accent); transform: translateY(-1px); } .mt-badge svg { width: 18px; height: 18px; fill: currentColor; } /* ---------- Возможности (грид) ---------- */ .mt-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.25rem; margin: 2rem 0; } .mt-feature { padding: 1.5rem; border-radius: var(--mt-radius); border: 1px solid var(--mt-border); background: var(--mt-card); } .mt-feature h3 { margin: 0 0 0.5rem; font-size: 1.1rem; color: var(--mt-text); } .mt-feature p { margin: 0; font-size: 0.95rem; color: var(--mt-muted); } /* ---------- Скриншоты ---------- */ .mt-screenshots { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.25rem; margin: 2rem 0; } .mt-screenshots figure { margin: 0; } .mt-screenshots figcaption { margin-top: 0.4rem; font-size: 0.85rem; color: var(--mt-muted); text-align: center; } /* ---------- Кнопки / анимация ---------- */ .mt-cta { display: inline-flex; align-items: center; gap: 0.6rem; margin: 1.5rem 0; padding: 0.8rem 2rem; border-radius: 999px; background: var(--mt-accent); color: #0b0d10; font-weight: 600; text-decoration: none; transition: background .15s; } .mt-cta:hover { background: var(--mt-accent-hover); } .mt-fade-in { opacity: 0; transform: translateY(10px); animation: mtFade .5s ease forwards; } @keyframes mtFade { to { opacity: 1; transform: none; } } /* ---------- Адаптив ---------- */ @media (max-width: 900px) { .mt-hero { grid-template-columns: 1fr; gap: 1.5rem; } .mt-hero-img { order: -1; } }