:root{
--bg:#0a0a0a; --card:#121212; --muted:#acacac; --text:#eaeaea;
--fuchsia:#f43f5e; --sky:#38bdf8; --violet:#6366f1; --green:#22c55e; --apple:#ffffff;
--border:rgba(255,255,255,.12); --shadow:0 10px 30px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
a{color:inherit;text-decoration:none}
.container{max-width:1150px;margin:0 auto;padding:0 20px}
.neon-pink{color:var(--fuchsia);text-shadow:0 0 18px rgba(244,63,94,.55)}
.neon-blue{color:var(--sky);text-shadow:0 0 18px rgba(56,189,248,.55)}
.btn {
display:inline-flex;
align-items:center;
justify-content:center;
gap:.5rem;
padding:.8rem 1.1rem;
border-radius:999px;
font-weight:700;
color:#fff;
border:1px solid transparent;
box-shadow:0 4px 12px rgba(0,0,0,0.4);
transition:0.3s all;
text-decoration:none;
}
/* Альбом — основной цвет #f43f5e, тёмный оттенок #c12b4d */
.album-btn {
background: linear-gradient(90deg, #f43f5e, #c12b4d);
border: 1px solid #f43f5e;
}
.album-btn:hover {
background: linear-gradient(90deg, #c12b4d, #f43f5e);
transform: translateY(-2px);
}
/* Синглы — основной цвет #38bdf8, тёмный оттенок #0f95d8 */
.single-btn {
background: linear-gradient(90deg, #38bdf8, #0f95d8);
border: 1px solid #38bdf8;
}
.single-btn:hover {
background: linear-gradient(90deg, #0f95d8, #38bdf8);
transform: translateY(-2px);
}
/* YouTube — основной цвет #ff0033, тёмный оттенок #b20027 */
.youtube-btn {
background: linear-gradient(90deg, #ff0033, #b20027);
border: 1px solid #ff0033;
}
.youtube-btn:hover {
background: linear-gradient(90deg, #b20027, #ff0033);
transform: translateY(-2px);
}
.btn.alt{background:linear-gradient(90deg,var(--sky),var(--violet))}
.btn.small{padding:.55rem .8rem;font-weight:800;font-size:.9rem;border-radius:999px}
.chip{display:inline-block;border:1px solid var(--border);border-radius:10px;padding:.3rem .6rem;color:#cfcfcf;font-size:.85rem}
header.sticky{position:sticky;top:0;z-index:50;backdrop-filter:saturate(140%) blur(8px);background:rgba(10,10,10,.7);border-bottom:1px solid var(--border)}
nav a{opacity:.9} nav a:hover{opacity:1}
section{padding:80px 0;border-top:1px solid var(--border)}
h1{font-family:Oxanium,Inter,sans-serif;font-size:58px;line-height:.9;margin:0}
h2{font-size:30px;margin:0 0 18px}
h3{margin:0 0 8px}
.hero {
position: relative;
overflow: hidden;
/* фон наследуется из :root (--bg), оставляем #0a0a0a) */
z-index: 0; /* чтобы ::before был под контентом */

}
.hero::before {
content:"";
position:absolute;
inset:0;
z-index:-1; /* позади текста */
background:
radial-gradient(circle at 15% 10%, rgba(255,255,230,0.08), transparent 60%), /* мягкий свет слева сверху */
radial-gradient(circle at 85% 25%, rgba(0,0,0,0.12), transparent 60%),      /* тень справа */
radial-gradient(circle at 50% 85%, rgba(200,180,150,0.05), transparent 60%); /* лёгкий “пожелтевший” блик снизу */
pointer-events:none;
/* добавляем для яркости на тёмном фоне */
mix-blend-mode: screen;
}
.hero-card{margin-top:28px;display:grid;gap:16px;grid-template-columns:repeat(4,minmax(0,1fr))}
.card{
background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01));
border:1px solid var(--border);border-radius:16px;padding:14px;text-align:center;color:#cfcfcf
}
.grid{display:grid;gap:22px}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.member{background:var(--card);border:1px solid var(--border);border-radius:18px;overflow:hidden;box-shadow:var(--shadow)}
/* Portrait-friendly frames */
.member .media{width:100%;background:#0f0f10}
.member .media img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;display:block}
.member .body{padding:16px}
.timeline{position:relative;border-left:1px solid var(--border);margin-left:10px;padding-left:18px}
.dot{position:absolute;left:-9px;top:4px;width:14px;height:14px;border-radius:50%;
background:linear-gradient(135deg,var(--fuchsia),var(--sky));box-shadow:0 0 12px rgba(56,189,248,.6)}
.album{display:grid;gap:24px}
.dot:last-of-type{display:none;}
@media(min-width:980px){.album{grid-template-columns:2fr 1fr}}
.cover{aspect-ratio:1/1;border:1px solid var(--border);border-radius:18px;overflow:hidden;background:#0f0f10;display:block}
.cover img{width:100%;height:100%;object-fit:cover;display:block}
aside ol{padding-left: 20px;}
.tracklist li{display:flex;gap:.6rem;align-items:center;padding:.25rem 0;color:#d2d2d2}
.tracklist .no{width:26px;color:#8e8e8e}
.gallery{display:grid;gap:14px;grid-template-columns:repeat(4,1fr)}
.gallery figure{margin:0;border:1px solid var(--border);border-radius:14px;overflow:hidden;background:#0f0f10}
.gallery figure.portrait{aspect-ratio:3/4}
.gallery img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;display:block}
.gallery figcaption{padding:8px;color:#b5b5b5;font-size:.8rem}
footer{border-top:1px solid var(--border);padding:38px 0 16px;color:#c9c9c9}
.easter{display:none;border-top:1px solid var(--border);background:linear-gradient(90deg,rgba(244,63,94,.15),rgba(56,189,248,.15),rgba(99,102,241,.15));color:#cfcfcf}
.easter.show{display:block}
.muted{color:var(--muted);font-size:.9rem}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.buy-box{border:1px solid var(--border);background:#111;border-radius:14px;padding:16px}
.callout{border:1px dashed var(--border);background:rgba(244,63,94,.06);border-radius:14px;padding:16px}
.ratio{position:relative;width:100%;padding-top:56.25%;border:1px solid var(--border);border-radius:14px;overflow:hidden;background:#0f0f10}
.ratio iframe{position:absolute;inset:0;width:100%;height:100%}
.streaming{margin-top:12px}
.streaming .row{display:flex;flex-wrap:wrap;gap:8px}
.spotify{background:#1db954}
.apple{background:#000; border:1px solid #fff}
.amazon{background:linear-gradient(90deg,#ffd814,#ffa41c);color:#111}
.pandora{background:#0057ff}
.ytm{background:#ff0033}
.deezer{background:#111}
.tidal{background:#111}
.badge{display:inline-flex;align-items:center;gap:.5rem;padding:.55rem .8rem;border-radius:999px;font-weight:800;font-size:.9rem;color:#fff;text-decoration:none}
.badge svg{width:16px;height:16px}
/* Курсор на картинках галереи */
/* Стили галереи */
.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  margin-top: 20px;
}

.gallery figure {
  margin: 0;
  overflow: hidden;
  border-radius: 10px;
}

.gallery img {
  width: 100%;
  height: auto;
  cursor: zoom-in;
  transition: transform 0.3s ease;
}

.gallery img:hover {
  transform: scale(1.03);
}

/* Модальное окно - сохраняем ваши классы */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.9);
  justify-content: center;
  align-items: center;
}

/* Контейнер картинки и кнопок */
.modal-container {
  position: relative;
  display: inline-block;
  max-width: 90vw;
  max-height: 90vh;
}

/* Картинка */
.modal-content {
  display: block;
  max-width: 100%;
  max-height: 90vh;
  border-radius: 10px;
  transition: transform 0.3s ease;
}

/* Кнопки управления и крестик - сохраняем классы но делаем адаптивными */
.close, .prev, .next {
  position: absolute;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
  user-select: none;
  z-index: 1001;
  transition: all 0.3s ease;
}

.close { 
  top: -45px; 
  right: -45px; 
}

.prev { 
  top: 50%; 
  left: -45px; 
  transform: translateY(-50%); 
}

.next { 
  top: 50%; 
  right: -45px; 
  transform: translateY(-50%); 
}

.close:hover, .prev:hover, .next:hover { 
  color: #bbb; 
}

.modal.show { 
  display: flex; 
  animation: fadeIn 0.3s ease; 
}

@keyframes fadeIn { 
  from {opacity: 0;} 
  to {opacity: 1;} 
}

/* Адаптация для планшетов */
@media (max-width: 1024px) {
  .gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Адаптация для мобильных - исправляем проблему с кнопками */
@media (max-width: 768px) {
  .gallery {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Перемещаем кнопки внутрь видимой области */
  .close {
    top: 10px;
    right: 10px;
    font-size: 35px;
    background: rgba(0,0,0,0.5);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .prev, .next {
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
  }
  
  .prev { left: 10px; }
  .next { right: 10px; }
}

/* Адаптация для маленьких смартфонов */
@media (max-width: 480px) {
  .gallery {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  
  .close {
    top: 5px;
    right: 5px;
    font-size: 30px;
    width: 35px;
    height: 35px;
  }
  
  .prev, .next {
    width: 35px;
    height: 35px;
    font-size: 20px;
  }
  
  .prev { left: 5px; }
  .next { right: 5px; }
}

/* Для очень маленьких экранов */
@media (max-width: 360px) {
  .prev, .next {
    width: 30px;
    height: 30px;
    font-size: 18px;
  }
  
  .close {
    width: 30px;
    height: 30px;
    font-size: 25px;
  }
}
.youtube-card {
display: flex;
align-items: center;
color: #fff;
border-radius: 12px;
padding: 8px 12px;
gap: 12px;
max-width: 400px;
box-shadow: 0 2px 8px rgba(0,0,0,0.5);
font-family: Arial, sans-serif;
}
.youtube-card .avatar {
width: 48px;
height: 48px;
border-radius: 50%;
}
.youtube-card .channel-info {
display: flex;
flex-direction: column;
flex-grow: 1;
overflow: hidden;
}
.youtube-card .channel-name {
font-weight: bold;
font-size: 1.3rem; /* больше название канала */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.youtube-card .channel-nick {
font-size: 0.7rem; /* никнейм меньше */
color: #ccc;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.youtube-card .subscribe-btn {
display: flex;
align-items: center;
gap: 6px;
background: #000;
color: #fff;
padding: 6px 14px;
border-radius: 6px;
text-decoration: none;
white-space: nowrap;
transition: all 0.2s ease;
border: 1px solid #fff;
}
.youtube-card .subscribe-btn .yt-icon {
width: 18px;
height: 18px;
}
.youtube-card .subscribe-btn:hover {
opacity: 0.85;
transform: scale(1.05);
}
.heart::after {
content: "❤️";
font-size:18px;
}
.heart2::after {
content: "❤️";
font-size:14px;
}
.merch{
margin: 0;
border: 1px solid var(--border);
border-radius: 14px;
overflow: hidden;
background: #0f0f10;
}
.merch {
display: flex;
justify-content: center;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.merch img {
width: 48%;
border-radius: 12px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.merch img:hover {
transform: scale(1.03);
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
@media (max-width: 600px) {
.merch img {
width: 100%;
max-width: none;
}
}
/* --- Адаптация под планшеты и смартфоны --- */
/* До 1024px — планшеты */
@media (max-width: 1024px) {
.hero-card {
grid-template-columns: repeat(2, 1fr);
}
.grid-3 {
grid-template-columns: repeat(2, 1fr);
}
h1 {
font-size: 42px;
}
section {
padding: 60px 0;
}
.container {
padding: 0 16px;
}
}
/* До 768px — крупные смартфоны */
@media (max-width: 768px) {
.hero-card {
grid-template-columns: 1fr;
}
.grid-3 {
grid-template-columns: 1fr;
}
.album {
grid-template-columns: 1fr;
}
h1 {
font-size: 34px;
line-height: 1.1;
}
h2 {
font-size: 24px;
}
section {
padding: 50px 0;
}
nav {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
padding: 8px 0;
}
.youtube-card {
flex-direction: column;
text-align: center;
max-width: 100%;
}
.youtube-card .avatar {
width: 60px;
height: 60px;
}
.youtube-card .channel-info {
align-items: center;
}
.youtube-card .subscribe-btn {
width: 100%;
justify-content: center;
}
.member .media img {
object-position: center top;
}
.tracklist li {
font-size: 0.95rem;
}
footer {
text-align: center;
}
}
/* До 480px — маленькие смартфоны */
@media (max-width: 480px) {
h1 {
font-size: 28px;
}
h2 {
font-size: 20px;
}
.btn {
padding: 0.7rem 0.9rem;
font-size: 0.9rem;
}
.hero {
text-align: center;
}
.hero-card {
grid-template-columns: 1fr;
gap: 12px;
}
.gallery {
grid-template-columns: 1fr;
}
.member .body {
padding: 12px;
}
section {
padding: 40px 0;
}
.modal-content {
max-width: 95vw;
max-height: 85vh;
}
.prev, .next {
font-size: 32px;
left: 10px;
right: 10px;
}
.close {
top: -28px;
right: -28px;
font-size: 32px;
}
}
/* --- Исправления мобильной адаптации и отступов --- */
@media (max-width: 768px) {
.container {
padding: 0 16px; /* добавляем боковые отступы */
}
}
@media (max-width: 480px) {
.container {
padding: 0 12px; /* чуть меньше на совсем узких экранах */
}
}
/* --- Адаптация футера --- */
/* Общая структура футера */
footer {
border-top: 1px solid var(--border);
padding: 38px 0 16px;
color: #c9c9c9;
}
/* Предположим, что футер использует грид или флекс */
footer .footer-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
/* На планшетах — 2 колонки */
@media (max-width: 900px) {
footer .footer-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* На телефонах — 1 колонка */
@media (max-width: 600px) {
footer .footer-grid {
grid-template-columns: 1fr;
text-align: center;
}
footer .footer-grid > * {
margin-bottom: 20px;
}
}
/* --- Футер --- */
footer {
border-top: 1px solid var(--border);
padding: 38px 0 16px;
color: #c9c9c9;
background: var(--bg);
}
/* Сетка футера */
.footer-grid {
display: grid;
gap: 18px;
grid-template-columns: repeat(3, 1fr);
align-items: start;
}
/* Нижняя подпись */
.footer-note {
text-align: center;
color: #8c8c8c;
font-size: 0.7rem;
margin-top: 10px;
line-height: 1.4;
}
/* Планшеты — две колонки */
@media (max-width: 900px) {
.footer-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* Смартфоны — одна колонка */
@media (max-width: 600px) {
.footer-grid {
grid-template-columns: 1fr;
text-align: center;
}
.footer-grid > * {
margin-bottom: 18px;
}
.footer-grid a {
display: inline-block;
margin: 4px 6px;
}
}
/* --- Header --- */
header.sticky {
position: sticky;
top: 0;
z-index: 50;
backdrop-filter: saturate(140%) blur(8px);
background: rgba(10,10,10,.7);
border-bottom: 1px solid var(--border);
}
/* Внутренний контейнер */
.header-inner {
display: flex;
align-items: center;
gap: 20px;
padding: 12px 0;
}
/* Логотип */
.logo {
font-weight: 900;
letter-spacing: .18em;
font-size: 25px;
color: var(--text);
text-decoration: none;
}
/* Основное меню - ПК по умолчанию */
.main-nav {
display: flex;
gap: 18px;
font-weight: 600;
}
.main-nav a {
color: var(--text);
text-decoration: none;
transition: opacity 0.2s;
}
.main-nav a:hover {
opacity: 0.7;
}
/* Кнопка гамбургер */
.nav-toggle {
display: none;
background: none;
border: none;
font-size: 28px;
color: var(--text);
cursor: pointer;
}
/* --- Мобильная адаптация --- */
@media (max-width: 768px) {
.main-nav {
position: absolute;
top: 100%;
right: 0;
background: var(--bg);
flex-direction: column;
width: 200px;
padding: 12px;
gap: 12px;
display: none;      /* скрыто по умолчанию */
border: 1px solid var(--border);
border-radius: 10px;
transition: all 0.3s ease;
opacity: 0;
transform: translateY(-10px);
pointer-events: none;
}
.main-nav.show {
display: flex;
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.nav-toggle {
display: block;
margin-left: auto;
}
}
/* Маленькие экраны */
@media (max-width: 480px) {
.logo {
font-size: 20px;
}
.header-inner {
padding: 8px 0;
gap: 12px;
}
.main-nav {
width: 180px;
right: 8px;
}
}
/* Толкаем меню вправо на ПК */
.main-nav.right {
margin-left: auto;
}
.header-inner {
display: flex;
align-items: center;
gap: 20px;
padding-left: 8px;
padding-right: 8px;
}
@media (max-width: 480px) {
.header-inner {
padding-left: 4px;
padding-right: 4px;
}
}
.topselect{padding:90px 0 64px;}