/* VibraGame — базовые токены, темы и состояния наведения. Подключать первым файлом на всех страницах. */ :root { --vg-page: #f4f3ea; --vg-surface: #ffffff; --vg-surface-2: #fbfaf3; --vg-soft1: #eef3e2; --vg-soft2: #e6f0d4; --vg-soft3: #f7efd8; --vg-footer: #efeee4; --vg-border: #dcdbcc; --vg-heading: #23271e; --vg-text: #56574f; --vg-text2: #2a2a26; --vg-muted: #6c6d63; --vg-muted2: #7a7a6c; --vg-ph: #eceadd; --vg-ph2: #ddd9c4; --vg-badge: #e7ecd8; --vg-badge-fg: #3d6b14; --vg-accent-soft: #eef4e2; --vg-accent: #9d1230; --vg-accent-hover: #c31a3d; --vg-green-fg: #2f5c12; --vg-gold-fg: #96751a; --vg-header: #3d7a17; --vg-header-edge: #2c5a10; --vg-header-edge2: #1f4009; --vg-card-on-accent: rgba(255, 255, 255, 0.94); --vg-glass: linear-gradient(120deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.55)); --vg-bar-green: #6f9450; --vg-bar-maroon: #a4576a; --vg-bar-gold: #c9b571; } /* Ночная тема. Класс ставится на скриптом vibra.js. */ html.vg-night { --vg-page: #101208; --vg-surface: #1a1d14; --vg-surface-2: #20241a; --vg-soft1: #1e2417; --vg-soft2: #232a19; --vg-soft3: #2b2717; --vg-footer: #16180f; --vg-border: #343827; --vg-heading: #dcdfd0; --vg-text: #b7b9a8; --vg-text2: #d8dac9; --vg-muted: #8e9080; --vg-muted2: #7c7e6f; --vg-ph: #1f2217; --vg-ph2: #2b2f20; --vg-badge: #22301a; --vg-badge-fg: #a9c97c; --vg-accent-soft: #243019; --vg-accent: #f0899d; --vg-accent-hover: #ff9fb1; --vg-green-fg: #a9c97c; --vg-gold-fg: #d9b84a; --vg-header: #1e3d09; --vg-header-edge: #142905; --vg-header-edge2: #0d1b03; --vg-card-on-accent: rgba(10, 12, 6, 0.5); --vg-glass: linear-gradient(120deg, rgba(14, 17, 9, 0.88), rgba(20, 24, 14, 0.62)); --vg-bar-green: #3c5c26; --vg-bar-maroon: #6b3441; --vg-bar-gold: #6f6033; background: #101208; color-scheme: dark; } html { scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; } body { margin: 0; background: var(--vg-page); color: var(--vg-text2); font-family: Manrope, system-ui, sans-serif; -webkit-font-smoothing: antialiased; } /* Горизонтальный скролл от декоративных блобов-свечений (absolute, left:-8%/right:-6%) режем на
, а НЕ на html/body: overflow:clip на ПРЕДКЕ sticky-шапки давал repaint-ghost (зелёная полоса при hover CONTACT). clip не создаёт скролл-контейнер, вертикаль видима. */ main { overflow-x: clip; } * { box-sizing: border-box; } a { color: var(--vg-accent); text-decoration: none; } a:hover { color: var(--vg-accent-hover); } ::selection { background: #cddfae; color: #23301a; } @keyframes vgTwinkle { 0%, 100% { opacity: .35; transform: scale(.7) } 50% { opacity: 1; transform: scale(1.25) } } @keyframes vgFloatA { 0%, 100% { transform: translate3d(0, 0, 0) scale(1) } 50% { transform: translate3d(3%, -4%, 0) scale(1.08) } } @keyframes vgFloatB { 0%, 100% { transform: translate3d(0, 0, 0) scale(1.04) } 50% { transform: translate3d(-4%, 3%, 0) scale(0.94) } } @keyframes glow-pulse { 0%, 100% { opacity: .5; transform: scale(1) } 50% { opacity: 1; transform: scale(1.12) } } /* Логотип: увеличение при наведении */ .vg-logo img { transition: transform 900ms cubic-bezier(.2,.8,.2,1); transform-origin: top center; } .vg-logo:hover img { transform: scale(1.18); } /* Искры вращаются по кругу вокруг лого (как в оригинальном дизайне). Кейфрейм держит центрирование translate(-50%,-50%) + докручивает rotate. */ @keyframes vgOrbit { from { transform: translate(-50%, -50%) rotate(0deg) scale(0.65); } to { transform: translate(-50%, -50%) rotate(360deg) scale(0.65); } } .vg-sparkles { animation: vgOrbit 10s linear infinite; } /* Состояния наведения, вынесенные из инлайновых стилей макета */ .vgh1:hover { background: #c31a3d !important; color: #ffffff !important; } .vgh2:hover { background: #3d7a17 !important; color: #ffffff !important; } .vgh3:hover { border-color: #3d7a17 !important; color: inherit !important; } .vgh4:hover { background: #4d9520 !important; color: #ffffff !important; } .vgh5:hover { background: #f2ffd9 !important; color: var(--vg-green-fg, #2f5c12) !important; } .vgh6:hover { border-color: #ffffff !important; background: rgba(255,255,255,0.12) !important; color: #ffffff !important; } .vgh7:hover { background: #9d1230 !important; color: #ffffff !important; border-color: var(--vg-accent, #9d1230) !important; } .vgh8:hover { background: #2c5a10 !important; } .vgh9:hover { color: inherit !important; border-color: #3d7a17 !important; box-shadow: 0 16px 34px rgba(0,0,0,0.12) !important; } .vgh10:hover { color: inherit !important; border-color: #3d7a17 !important; transform: translateY(-4px) !important; box-shadow: 0 16px 30px rgba(0,0,0,0.13) !important; } .vgh11:hover { border-color: #3d7a17 !important; color: var(--vg-heading, #23271e) !important; } .vgh12:hover { color: inherit !important; border-color: #3d7a17 !important; transform: translateY(-3px) !important; } .vgh13:hover { background: var(--vg-accent-soft, #eef4e2) !important; } .vgh14:hover { color: inherit !important; background: var(--vg-surface, #ffffff) !important; transform: translateY(-8px) scale(1.2) !important; box-shadow: 0 22px 44px rgba(0, 0, 0, 0.26) !important; position: relative !important; z-index: 2 !important; } .vgh15:hover { background: #3d7a17 !important; color: #ffffff !important; transform: translateY(-2px) !important; } .vgh16:hover { background: linear-gradient(180deg, #c8204a 0%, #b41638 55%, #8f1029 100%) !important; color: #ffffff !important; } .vgh17:hover { border-color: #c9a227 !important; color: #ffffff !important; } .vgh18:hover { color: #f2ffd9 !important; border-bottom-color: #c9a227 !important; text-shadow: 0 1px 0 rgba(24, 46, 6, 0.9), 0 3px 9px rgba(0, 0, 0, 0.45) !important; transform: scale(1.15) !important; } .vgh19:hover { opacity: 1 !important; transform: translateY(-50%) scale(1.08) !important; border-color: #c9a227 !important; box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.28), inset 0 1px 3px rgba(0,0,0,0.25) !important; } .vgh20:hover { color: #f2ffd9 !important; } .vgh21:hover { opacity: 1 !important; transform: translateY(-50%) scale(1.1) !important; } .vgh22:hover { color: var(--vg-heading, #23271e) !important; border-color: #c9a227 !important; } .vgh23:hover { color: #ffffff !important; border-bottom-color: #c9a227 !important; } /* --- Состояния, зависящие от JS-класса на --- */ html.vg-narrow .vg-nav { display: none !important; } html.vg-narrow .vg-burger { display: flex !important; } /* Треклист релиза */ .vg-track:hover { background: var(--vg-accent-soft); } .vg-track:hover .vg-play { background: #9d1230; border-color: #9d1230; color: #ffffff; transform: scale(1.12); } /* Карточка релиза в каталоге */ .vg-release-card { transition: transform 500ms ease, box-shadow 500ms ease; } .vg-release-card:hover { background: var(--vg-surface); transform: translateY(-8px) scale(1.2); box-shadow: 0 22px 44px rgba(0,0,0,0.26); position: relative; z-index: 2; } .vg-release-card:hover .vg-cardline { left: 50%; transform: translateX(-50%); } /* Карточка модели */ .vg-model:hover { transform: translateY(-6px); box-shadow: 0 26px 54px rgba(0,0,0,0.32); z-index: 2; } .vg-model:hover .vg-model-photo { transform: scale(1.08); } .vg-model:hover .vg-model-shade { background: linear-gradient(180deg, rgba(10,12,6,0) 25%, rgba(10,12,6,0.86) 100%); } .vg-model:hover .vg-model-plate { transform: translateY(0); } .vg-model:hover .vg-model-link { opacity: 1; transform: translateY(0); } /* Плотный и минималистичный режимы каталога моделей (переключатель data-vg-view) */ html.vg-models-dense [data-vg-models] { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) !important; grid-auto-rows: 150px !important; } html.vg-models-minimal [data-vg-models] { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) !important; grid-auto-rows: 180px !important; } html.vg-models-minimal .vg-model-plate { opacity: 0; transform: translateY(14px); transition: opacity 350ms ease, transform 450ms ease; } html.vg-models-minimal .vg-model-shade { background: linear-gradient(180deg, rgba(10,12,6,0) 35%, rgba(10,12,6,0) 100%); } html.vg-models-minimal .vg-model:hover .vg-model-plate { opacity: 1; transform: translateY(0); } html.vg-models-minimal [data-vg-model-tag] { display: none; } /* Активная кнопка фильтра */ [data-vg-filter][aria-pressed="true"] { background: #9d1230 !important; color: #ffffff !important; } /* hidden ДОЛЖЕН побеждать инлайновый display: у модалок/меню/скрима в разметке стоит display:flex|grid прямо в style="", который перебивает UA-правило [hidden]{display:none}. Без !important модалки/меню видны по умолчанию (открыты при загрузке). */ [data-vg-modal][hidden], [data-vg-menu][hidden], [data-vg-scrim][hidden], [data-vg-favnudge][hidden], [data-vg-fav-link][hidden] { display: none !important; } /* ===== Футер: полоса правовых ссылок (Rules / DMCA / Privacy / Imprint) ===== */ .vg-legalbar { background-color: #5c1224; background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0 6px, transparent 6px 12px), radial-gradient(120% 180% at 8% 0%, rgba(201,162,39,0.28), rgba(201,162,39,0) 55%), radial-gradient(100% 160% at 92% 100%, rgba(61,122,23,0.3), rgba(61,122,23,0) 58%); border-top: 1px solid rgba(201,162,39,0.45); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); } .vg-legalbar__row { max-width: 1360px; margin: 0 auto; padding: 5px clamp(20px, 2.5vw, 34px); /* высота полосы (было 16px → 9px → 5px) */ display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: center; font-size: 11.7px; font-weight: 700; } .vg-legalbar__link { color: #f3d9de; padding: 4px 2px; border-bottom: 1px solid transparent; transition: color 160ms ease, border-color 160ms ease; } .vg-legalbar__link:hover { color: #ffffff; border-bottom-color: #c9a227; } /* ============================================================ ОБОЛОЧКА: шапка / футер / модалки — вынесено из инлайн-стилей ============================================================ */ /* ----- Шапка ----- */ .vg-header { position: sticky; top: 0; z-index: 40; background-color: var(--vg-header); background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.06) 0 6px, transparent 6px 12px); border-bottom: 3px solid var(--vg-header-edge); } .vg-header__inner { max-width: 1360px; margin: 0 auto; padding: 8px clamp(56px, 6vw, 90px); display: flex; align-items: center; justify-content: center; gap: clamp(10px, 2vw, 26px); flex-wrap: wrap; } .vg-nav { display: flex; gap: clamp(8px, 1.6vw, 24px); flex-wrap: wrap; align-items: center; justify-content: space-evenly; flex: 1 1 190px; min-width: 0; font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: clamp(11px, 0.9vw, 11.3px); letter-spacing: 0.06em; text-transform: uppercase; } .vg-navlink { color: #ffffff; padding: 6px 2px; border-bottom: 2px solid transparent; text-shadow: 0 1px 0 rgba(24,46,6,0.85), 0 2px 5px rgba(0,0,0,0.35); transition: text-shadow 180ms ease, transform 180ms ease; } /* Лого (эмблема, свисает под тонкой полосой шапки) */ .vg-logo { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 0 0 auto; padding: 2px 0; margin-bottom: -40px; position: relative; top: -10px; z-index: 5; } .vg-logo img { height: 90px; width: auto; display: block; position: relative; z-index: 4; } /* Искры вокруг лого */ .vg-sparkles { position: absolute; left: 50%; top: 50%; width: 150px; height: 150px; transform: translate(-50%, -50%); pointer-events: none; z-index: 3; } .vg-spark { position: absolute; border-radius: 50%; background: #ffe9a8; box-shadow: 0 0 8px 2px rgba(255,224,130,0.9); animation: vgTwinkle 2.4s ease-in-out infinite; } .vg-spark:nth-child(1) { left: 50%; top: 6%; width: 5px; height: 5px; margin-left: -2.5px; } .vg-spark:nth-child(2) { left: 91%; top: 34%; width: 4px; height: 4px; animation-delay: .5s; } .vg-spark:nth-child(3) { left: 76%; top: 84%; width: 4px; height: 4px; animation-delay: .9s; } .vg-spark:nth-child(4) { left: 22%; top: 82%; width: 4px; height: 4px; animation-delay: 1.3s; } .vg-spark:nth-child(5) { left: 7%; top: 32%; width: 5px; height: 5px; animation-delay: 1.7s; } /* Кнопки-контролы шапки (тема / бургер / язык) */ .vg-ctrl { position: absolute; top: 50%; transform: translateY(-50%); z-index: 6; width: 40px; height: 40px; padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0.85; transition: opacity 200ms ease, transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease; } .vg-ctrl--theme { left: 8px; border: none; background: transparent; opacity: 0.75; } .vg-ctrl--lang { right: 18px; border: 2px solid rgba(255,255,255,0.45); border-radius: 50%; background: rgba(255,255,255,0.1); overflow: hidden; font-size: 21.6px; line-height: 1; box-shadow: inset 0 1px 3px rgba(0,0,0,0.25); } .vg-burger { left: 68px; border: 2px solid rgba(255,255,255,0.45); border-radius: 50%; background: rgba(255,255,255,0.1); color: #ffffff; font-size: 16.2px; line-height: 1; box-shadow: inset 0 1px 3px rgba(0,0,0,0.25); display: none; } .vg-theme-icon { width: 30px; height: auto; display: block; } /* Мобильное меню + затемнение (скрыты через [hidden], см. правило выше) */ [data-vg-menu] { position: absolute; left: 0; right: 0; top: 100%; z-index: 45; background-color: var(--vg-header-edge); border-bottom: 3px solid var(--vg-header-edge2); box-shadow: 0 18px 40px rgba(0,0,0,0.35); padding: 10px 16px 18px; display: grid; gap: 2px; font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: 13.5px; letter-spacing: 0.06em; text-transform: uppercase; } .vg-menu__link { color: #ffffff; padding: 14px 6px; border-bottom: 1px solid rgba(255,255,255,0.14); } .vg-menu__cta { margin-top: 12px; padding: 15px 6px; border-radius: 4px; background: #9d1230; color: #ffffff; text-align: center; cursor: pointer; } [data-vg-scrim] { position: fixed; inset: 0; z-index: 30; background: rgba(20,24,16,0.62); backdrop-filter: blur(3px); } /* CTA-кнопка «Связаться» */ .vg-cta { padding: 9px 16px; border-radius: 4px; background: linear-gradient(180deg, #b0173a 0%, #9d1230 55%, #7d0d26 100%); color: #ffffff; font-size: 11px; cursor: pointer; box-shadow: 0 2px 0 #5c0a1c, 0 4px 10px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.22); text-shadow: 0 1px 2px rgba(0,0,0,0.4); transition: box-shadow 180ms ease, transform 180ms ease; } /* ----- Подвал ----- */ .vg-footer { margin-top: clamp(40px, 5vw, 72px); } .vg-footer__top { background: var(--vg-footer, #efeee4); border-top: 1px solid var(--vg-border, #dcdbcc); } .vg-footer__grid { max-width: 1360px; margin: 0 auto; padding: 42px clamp(20px, 2.5vw, 34px); display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 40px; } .vg-foot-coltitle { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vg-muted, #6c6d63); } .vg-foot-langgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px 26px; margin-top: 14px; font-size: 11.7px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } .vg-foot-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 28px 24px; align-content: start; } .vg-foot-linklist { display: grid; gap: 8px; margin-top: 14px; font-size: 12.2px; } .vg-footlang { display: flex; align-items: center; gap: 7px; color: var(--vg-text); font-weight: 600; cursor: pointer; } .vg-footlang__flag { font-size: 13.5px; line-height: 1; } .vg-footer__bottom { position: relative; overflow: hidden; background-color: #14150f; background-image: radial-gradient(70% 120% at 12% 0%, rgba(92,18,36,0.5), rgba(92,18,36,0) 62%), radial-gradient(60% 130% at 88% 110%, rgba(125,13,38,0.45), rgba(125,13,38,0) 60%), radial-gradient(45% 90% at 62% -10%, rgba(201,162,39,0.2), rgba(201,162,39,0) 62%), linear-gradient(180deg, #1d1e16 0%, #14150f 60%, #0e0f0a 100%); } .vg-footer__bottominner { max-width: 1360px; margin: 0 auto; padding: 26px clamp(20px, 2.5vw, 34px) 34px; text-align: center; } .vg-footer__brand { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: 13.5px; color: #f0efe6; } .vg-footer__copy { font-size: 11.3px; color: #8d8d84; margin-top: 8px; line-height: 1.6; max-width: 760px; margin-left: auto; margin-right: auto; } /* ----- Модалки (контакт / язык) ----- */ [data-vg-modal] { position: fixed; inset: 0; z-index: 200; background: rgba(20,24,16,0.62); backdrop-filter: blur(3px); display: flex; align-items: flex-start; justify-content: center; padding: clamp(16px,5vh,70px) 20px; overflow-y: auto; } [data-vg-modal="lang"] { z-index: 210; padding: clamp(16px,8vh,90px) 20px; } .vg-modal__card { width: 100%; max-width: 560px; background: var(--vg-surface-2); border-radius: 6px; border-top: 5px solid #3d7a17; box-shadow: 0 30px 80px rgba(0,0,0,0.4); overflow: hidden; position: relative; } .vg-modal__card--lang { max-width: 620px; border-top-color: #c9a227; overflow: visible; padding: clamp(24px,4vw,36px); } .vg-modal__close { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border: 1px solid var(--vg-border); background: var(--vg-surface); border-radius: 4px; color: var(--vg-muted); font-size: 16.2px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; } .vg-modal__body { padding: clamp(26px,4vw,40px); } .vg-modal__badge { display: inline-flex; align-items: center; gap: 9px; padding: 6px 12px; border-radius: 3px; background: var(--vg-badge); color: var(--vg-badge-fg); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } .vg-modal__title { font-family: 'Playfair Display', Georgia, serif; font-weight: 800; font-size: clamp(19.8px,2.16vw,27px); line-height: 1.15; margin: 16px 0 0; color: var(--vg-heading); } .vg-modal__eyebrow { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vg-muted); } .vg-modal__sub { font-size: 13px; line-height: 1.6; color: var(--vg-text); margin: 10px 0 0; } .vg-form { display: grid; gap: 16px; margin-top: 24px; } .vg-field { display: grid; gap: 7px; } .vg-field__label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--vg-muted); } .vg-input, .vg-select, .vg-textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--vg-border); border-radius: 4px; background: var(--vg-surface); font-family: Manrope, sans-serif; font-size: 13.5px; color: var(--vg-text2); outline: none; } .vg-select { cursor: pointer; } .vg-textarea { line-height: 1.55; resize: vertical; } .vg-form__row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 4px; } .vg-form__submit { padding: 14px 26px; border: none; border-radius: 4px; font-family: Manrope, sans-serif; font-weight: 700; font-size: 13.5px; color: #ffffff; background: #9d1230; cursor: pointer; } .vg-form__note { font-size: 11.3px; color: var(--vg-muted); line-height: 1.5; } .vg-langgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-top: 22px; } .vg-langlink { display: flex; align-items: center; gap: 11px; padding: 12px 14px; border-radius: 5px; border: 1px solid var(--vg-border); background: var(--vg-surface); font-size: 13px; font-weight: 600; color: var(--vg-text2); cursor: pointer; text-align: left; } .vg-langlink__flag { font-size: 18px; line-height: 1; } /* ============================================================ КОНТЕНТ: секции / карточки / статьи / авторы (лента blog+news, страницы) ============================================================ */ /* ----- Раскладка секций ----- */ .vg-sec { max-width: 1360px; margin: 0 auto; padding: clamp(40px, 5vw, 72px) clamp(20px, 2.5vw, 34px) 0; } .vg-sec--top { padding-top: clamp(24px, 4vw, 40px); position: relative; } .vg-sec--narrow { max-width: 900px; } .vg-sec--pad { padding-bottom: clamp(40px, 5vw, 64px); } /* самостоятельные страницы с полем снизу */ /* Декоративные блобы-свечения (обрезаются overflow-x:clip у main) */ .vg-glow { position: absolute; border-radius: 50%; z-index: 0; pointer-events: none; } .vg-glow--green { left: -10%; top: -6%; width: 40%; height: 60%; filter: blur(52px); background: radial-gradient(circle, rgba(61,122,23,0.2), rgba(61,122,23,0) 68%); animation: vgFloatA 18s ease-in-out infinite; } .vg-glow--gold { right: -10%; top: 2%; width: 34%; height: 52%; filter: blur(58px); background: radial-gradient(circle, rgba(201,162,39,0.24), rgba(201,162,39,0) 66%); animation: vgFloatB 24s ease-in-out infinite; } /* ----- Типографика ----- */ .vg-eyebrow { display: inline-flex; align-items: center; gap: 9px; padding: 6px 12px; border-radius: 3px; background: var(--vg-badge); color: var(--vg-badge-fg); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } .vg-h1 { font-family: 'Playfair Display', Georgia, serif; font-weight: 800; font-size: clamp(28.8px, 3.24vw, 48.6px); line-height: 1.06; letter-spacing: -0.01em; margin: 0; color: var(--vg-heading); display: flex; align-items: center; gap: 0.4em; } .vg-h1__orn { color: #c9a227; font-size: 0.5em; line-height: 1; } .vg-h2 { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: clamp(21.6px, 2.16vw, 30.6px); margin: 0; color: var(--vg-heading); display: flex; align-items: center; gap: 0.42em; } .vg-h2__orn { color: #c9a227; font-size: 0.62em; line-height: 1; } .vg-lead { font-size: clamp(13.5px, 1.08vw, 16.2px); line-height: 1.6; color: var(--vg-text); margin: 14px 0 0; max-width: 620px; } .vg-page-title { font-family: 'Playfair Display', Georgia, serif; font-weight: 800; font-size: clamp(27px, 3vw, 44px); line-height: 1.1; margin: 16px 0 0; color: var(--vg-heading); } /* ----- Хлебные крошки ----- */ .vg-crumbs { position: relative; z-index: 1; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: var(--vg-muted); font-size: 11.7px; font-weight: 600; } .vg-crumbs a { color: var(--vg-muted); font-weight: 600; } .vg-crumbs__sep { color: var(--vg-muted2); } .vg-crumbs__cur { color: var(--vg-heading); font-weight: 700; } /* ----- Заглушки-изображения ----- */ .vg-ph { background-color: var(--vg-ph); background-image: repeating-linear-gradient(135deg, var(--vg-ph2) 0 9px, transparent 9px 18px); display: grid; place-items: center; } .vg-ph--16x9 { aspect-ratio: 16/9; } .vg-ph--16x10 { aspect-ratio: 16/10; } .vg-ph--3x4 { aspect-ratio: 3/4; border: 1px solid var(--vg-border); border-radius: 6px; } .vg-ph--1x1 { aspect-ratio: 1; border-radius: 6px; } .vg-ph--cover { aspect-ratio: 16/9; border-radius: 10px; margin-top: clamp(22px, 3vw, 34px); background-image: repeating-linear-gradient(135deg, var(--vg-ph2) 0 10px, transparent 10px 20px); } .vg-ph__label { font-family: ui-monospace, monospace; font-size: 11px; color: var(--vg-muted2); } .vg-ph--img { overflow: hidden; background-image: none; } .vg-ph--img img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ----- Карточки ленты ----- */ .vg-feedhead { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: clamp(18px, 2.4vw, 26px); } .vg-feedhead__count { font-size: 11.7px; color: var(--vg-muted); font-weight: 700; } .vg-cardgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: clamp(14px, 1.8vw, 22px); } .vg-card { border: 1px solid var(--vg-border); border-radius: 10px; background: var(--vg-surface); overflow: hidden; display: block; color: inherit; transition: border-color 300ms ease, transform 300ms ease, box-shadow 300ms ease; } .vg-card:hover { color: inherit; border-color: #3d7a17; transform: translateY(-4px); box-shadow: 0 16px 30px rgba(0,0,0,0.13); } .vg-card__body { padding: 20px; } .vg-card__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .vg-cat { font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--vg-accent); } .vg-date { font-size: 11.3px; color: var(--vg-muted); } .vg-card__title { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: 17.1px; line-height: 1.25; margin: 10px 0 0; color: var(--vg-heading); } .vg-card__excerpt { font-size: 12.6px; line-height: 1.6; color: var(--vg-text); margin: 10px 0 0; } .vg-leadcard { border: 1px solid var(--vg-border); border-radius: 10px; background: var(--vg-surface); overflow: hidden; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); color: inherit; transition: border-color 300ms ease, box-shadow 300ms ease; } .vg-leadcard:hover { color: inherit; border-color: #3d7a17; box-shadow: 0 16px 34px rgba(0,0,0,0.12); } .vg-leadcard__body { padding: clamp(22px, 2.6vw, 34px); display: flex; flex-direction: column; justify-content: center; } .vg-badge { padding: 6px 12px; border-radius: 3px; background: var(--vg-badge); color: var(--vg-badge-fg); font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; } .vg-leadcard__title { font-family: 'Playfair Display', Georgia, serif; font-weight: 800; font-size: clamp(21.6px, 2.34vw, 32.4px); line-height: 1.14; margin: 16px 0 0; color: var(--vg-heading); } .vg-leadcard__excerpt { font-size: 14px; line-height: 1.65; color: var(--vg-text); margin: 14px 0 0; } .vg-readmore { margin-top: 18px; font-size: 12.6px; font-weight: 700; color: var(--vg-accent); } .vg-lead-wrap { margin-bottom: clamp(14px, 1.8vw, 22px); } /* ----- Пагинация ----- */ .vg-pager { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: clamp(28px, 3.4vw, 44px); } .vg-pager__num { min-width: 42px; padding: 11px 0; border-radius: 6px; border: 1px solid var(--vg-border); color: var(--vg-heading); font-weight: 700; font-size: 12.6px; text-align: center; display: inline-block; } .vg-pager__num:hover { color: var(--vg-heading); border-color: #3d7a17; } .vg-pager__num--active { background: #9d1230; color: #ffffff; border-color: #9d1230; } .vg-pager__btn { padding: 11px 20px; border-radius: 6px; border: 1px solid var(--vg-border); color: var(--vg-heading); font-weight: 700; font-size: 12.6px; } .vg-pager__btn:hover { color: var(--vg-heading); border-color: #3d7a17; } /* ----- Разделы (категории) ----- */ .vg-chapters { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 24px; } .vg-chapter { border: 1px solid var(--vg-border); border-radius: 10px; background: var(--vg-surface); padding: 22px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .vg-chapter__name { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: 17.1px; color: var(--vg-heading); } .vg-chapter__count { flex: 0 0 auto; font-family: ui-monospace, monospace; font-size: 11.3px; font-weight: 700; color: var(--vg-muted); } /* ----- Статья ----- */ .vg-article { position: relative; z-index: 1; margin-top: clamp(20px, 3vw, 30px); } .vg-article__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px; } .vg-article__h1 { font-family: 'Playfair Display', Georgia, serif; font-weight: 800; font-size: clamp(27px, 3.24vw, 46.8px); line-height: 1.08; letter-spacing: -0.01em; margin: 18px 0 0; color: var(--vg-heading); } .vg-article__lead { font-size: clamp(14.4px, 1.17vw, 17.1px); line-height: 1.6; color: var(--vg-text); margin: 16px 0 0; } .vg-prose { margin-top: clamp(24px, 3vw, 36px); display: grid; gap: 18px; font-size: 14.9px; line-height: 1.7; color: var(--vg-text); } .vg-prose > h2 { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: clamp(19.8px, 1.98vw, 27px); line-height: 1.2; margin: 12px 0 0; color: var(--vg-heading); } .vg-prose p { margin: 0; } .vg-prose ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; } .vg-quote { margin: 8px 0; padding: 18px 22px; border-left: 3px solid #c9a227; background: var(--vg-surface); border-radius: 0 8px 8px 0; font-family: 'Playfair Display', Georgia, serif; font-size: 17.1px; line-height: 1.5; color: var(--vg-heading); } .vg-quote__cite { display: block; margin-top: 10px; font-family: Manrope, sans-serif; font-size: 12.2px; font-weight: 700; color: var(--vg-muted); } .vg-article__cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: clamp(26px, 3vw, 36px); } /* Кнопки */ .vg-btn { padding: 14px 24px; border-radius: 4px; font-weight: 700; font-size: 13.5px; cursor: pointer; display: inline-block; } .vg-btn--accent { background: #9d1230; color: #ffffff; } .vg-btn--outline { border: 2px solid #3d7a17; color: var(--vg-green-fg); } .vg-btn--green { background: #3d7a17; color: #ffffff; font-size: 13.1px; padding: 13px 22px; margin-top: 24px; } /* Автор + E-E-A-T */ .vg-author { border: 1px solid var(--vg-border); border-radius: 12px; background: var(--vg-surface); padding: clamp(20px, 2.6vw, 28px); display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: clamp(18px, 2.4vw, 30px); } .vg-author__main { display: flex; gap: 16px; align-items: flex-start; } .vg-author__label { font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--vg-muted); } .vg-author__name { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: 18px; margin-top: 8px; color: var(--vg-heading); } .vg-author__role { font-size: 12.2px; color: var(--vg-accent); font-weight: 700; margin-top: 4px; } .vg-author__bio { font-size: 12.6px; line-height: 1.6; color: var(--vg-text); margin: 10px 0 0; } .vg-author__links { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 12px; font-size: 11.7px; font-weight: 700; } .vg-author__facts { display: grid; gap: 14px; align-content: start; } .vg-fact { display: flex; align-items: baseline; gap: 10px; font-size: 12.2px; color: var(--vg-text); } .vg-fact__k { min-width: 118px; font-weight: 700; color: var(--vg-muted); } /* Аватар-заглушка */ .vg-avatar { flex: 0 0 auto; border-radius: 50%; background-color: var(--vg-ph); background-image: repeating-linear-gradient(135deg, var(--vg-ph2) 0 8px, transparent 8px 16px); } .vg-avatar--sm { width: 56px; height: 56px; } .vg-avatar--lg { width: 76px; height: 76px; } /* FAQ */ .vg-faq { display: grid; gap: 10px; margin-top: 22px; } .vg-faq__item { border: 1px solid var(--vg-border); border-radius: 8px; background: var(--vg-surface); overflow: hidden; } .vg-faq__q { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; width: 100%; padding: 18px 20px; border: none; background: transparent; text-align: left; cursor: pointer; font-family: Manrope, sans-serif; font-size: 14.4px; font-weight: 700; color: var(--vg-heading); } .vg-faq__sign { flex: 0 0 auto; font-size: 18px; line-height: 1.2; color: #c9a227; } .vg-faq__a { margin: 0; padding: 0 20px 20px; font-size: 13.5px; line-height: 1.65; color: var(--vg-text); } /* «Ещё статьи» */ .vg-more__head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .vg-more__head + .vg-relgrid { margin-top: clamp(24px, 3vw, 36px); } .vg-more__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-top: 24px; } .vg-more__all { font-size: 12.6px; font-weight: 700; } /* Блок «наши авторы» */ .vg-authors__head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .vg-authors__note { font-size: 11.7px; color: var(--vg-muted); font-weight: 700; } .vg-authors__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 24px; } .vg-authorcard { border: 1px solid var(--vg-border); border-radius: 10px; background: var(--vg-surface); padding: 20px; display: flex; gap: 14px; align-items: flex-start; } .vg-authorcard__name { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: 15px; color: var(--vg-heading); } .vg-authorcard__role { font-size: 11.7px; color: var(--vg-accent); font-weight: 700; margin-top: 3px; } .vg-authorcard__bio { font-size: 12px; line-height: 1.55; color: var(--vg-text); margin: 8px 0 0; } /* ============================================================ ГЛАВНАЯ: уникальные блоки-виджеты (engine/lib/home_blocks.php) ============================================================ */ .vg-hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(24px, 3vw, 48px); align-items: center; position: relative; z-index: 1; } .vg-hero__title { font-family: 'Playfair Display', Georgia, serif; font-weight: 800; font-size: clamp(27px, 3.06vw, 52.2px); line-height: 1.06; letter-spacing: -0.01em; margin: 20px 0 0; color: var(--vg-heading); } .vg-hero__accent { color: var(--vg-accent); } .vg-hero__lead { font-size: clamp(13.5px, 1.08vw, 16.2px); line-height: 1.65; color: var(--vg-text); margin: 18px 0 0; max-width: 620px; } .vg-hero__cta { display: flex; gap: 10px; margin-top: 26px; flex-wrap: wrap; } .vg-hero__video { margin-top: 22px; } .vg-hero__video video { width: 100%; border-radius: 12px; border: 1px solid var(--vg-border); background: #000; display: block; box-shadow: 0 14px 40px rgba(0,0,0,0.22); } .vg-chiprow { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; } .vg-chip { padding: 6px 12px; border: 1px solid var(--vg-border); border-radius: 999px; font-size: 11.5px; font-weight: 700; color: var(--vg-muted); background: var(--vg-surface); } .vg-hero__media { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; } .vg-hero__col { display: grid; gap: 12px; } .vg-hero__tile { border-radius: 6px; background-color: var(--vg-header); background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.07) 0 6px, transparent 6px 12px); display: grid; align-content: end; padding: 16px; color: #ffffff; aspect-ratio: 1; } .vg-hero__tiletxt { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: 14.4px; line-height: 1.25; } .vg-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 18px; margin-top: 40px; padding: 22px clamp(14px, 2vw, 24px); border: 1px solid var(--vg-border); border-radius: 12px; position: relative; z-index: 1; background: var(--vg-glass); backdrop-filter: blur(6px); } .vg-stat__n { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: 23.4px; color: var(--vg-heading); } .vg-stat__l { font-size: 11.3px; color: var(--vg-muted); margin-top: 4px; } .vg-blockhead { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .vg-blockhead__note { font-size: 11.7px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--vg-muted2); font-weight: 700; } .vg-dirgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-top: 26px; } .vg-dircard { border: 1px solid var(--vg-border); border-radius: 8px; background: var(--vg-surface); overflow: hidden; display: block; color: inherit; transition: border-color 300ms ease; } .vg-dircard:hover { color: inherit; border-color: #3d7a17; } .vg-dircard__bar { height: 6px; } .vg-dircard__bar--green { background: var(--vg-bar-green); } .vg-dircard__bar--maroon { background: var(--vg-bar-maroon); } .vg-dircard__bar--gold { background: var(--vg-bar-gold); } .vg-dircard__body { padding: 22px; } .vg-dircard__kicker { font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; } .vg-dircard__kicker--green { color: var(--vg-badge-fg); } .vg-dircard__kicker--maroon { color: var(--vg-accent); } .vg-dircard__kicker--gold { color: var(--vg-gold-fg); } .vg-dircard__title { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: 18.9px; margin: 10px 0 0; color: var(--vg-heading); } .vg-dircard__text { font-size: 13.1px; line-height: 1.6; color: var(--vg-text); margin: 8px 0 0; } .vg-schools { border-radius: 14px; border: 1px solid var(--vg-border); background: linear-gradient(135deg, var(--vg-surface) 0%, var(--vg-surface-2) 55%, var(--vg-soft1) 100%); overflow: hidden; display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); } .vg-schools__body { padding: clamp(24px, 3vw, 44px); } .vg-schools__text { font-size: 13.5px; line-height: 1.65; color: var(--vg-text); margin: 14px 0 0; } .vg-points { display: grid; gap: 10px; margin-top: 22px; } .vg-point { display: flex; gap: 12px; align-items: baseline; } .vg-point__n { color: var(--vg-accent); font-weight: 800; } .vg-point__t { font-size: 13.1px; line-height: 1.5; color: var(--vg-text); } .vg-schools__ph { min-height: 280px; } .vg-svcgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 24px; } .vg-svc { border: 1px solid var(--vg-border); border-radius: 8px; background: var(--vg-surface); padding: 20px; } a.vg-svc { display: block; color: inherit; text-decoration: none; transition: border-color 300ms ease; } a.vg-svc:hover { color: inherit; border-color: #3d7a17; } .vg-svc__title { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: 16.2px; margin: 0; color: var(--vg-heading); } .vg-svc__text { font-size: 12.6px; line-height: 1.55; color: var(--vg-text); margin: 8px 0 0; } .vg-svc--feature { grid-column: 1 / -1; border-color: #3d7a17; background: linear-gradient(115deg, var(--vg-soft1) 0%, var(--vg-soft2) 45%, var(--vg-soft3) 100%); } .vg-svc--feature .vg-svc__title { font-size: 17.1px; } .vg-newsgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-top: 24px; } .vg-newscard { border: 1px solid var(--vg-border); border-radius: 8px; background: var(--vg-surface); overflow: hidden; } a.vg-newscard { display: block; color: inherit; text-decoration: none; transition: border-color 300ms ease; } a.vg-newscard:hover { border-color: #3d7a17; } .vg-blockhead__titlelink { color: inherit; text-decoration: none; } .vg-blockhead__titlelink:hover { color: var(--vg-accent); } .vg-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .vg-form__result { margin: 12px 0 0; font-size: 13.5px; line-height: 1.5; } .vg-form__result--ok { color: var(--vg-green-fg); font-weight: 600; } .vg-form__result--err { color: var(--vg-accent); } .vg-teamgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-top: 24px; } .vg-teamcard { border: 1px solid var(--vg-border); border-radius: 8px; background: var(--vg-surface); overflow: hidden; } .vg-teamcard__body { padding: 16px; } .vg-teamcard__name { font-weight: 700; font-size: 13.5px; color: var(--vg-heading); } .vg-teamcard__role { font-size: 11.3px; color: var(--vg-accent); margin-top: 4px; } .vg-ctablock { border-radius: 14px; background-color: var(--vg-header); background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.06) 0 6px, transparent 6px 12px), radial-gradient(70% 120% at 12% 10%, rgba(201,162,39,0.45), rgba(201,162,39,0) 60%), radial-gradient(80% 130% at 96% 90%, rgba(92,18,36,0.55), rgba(92,18,36,0) 62%); padding: clamp(26px, 3.5vw, 52px); display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 32px; align-items: center; } .vg-ctablock__title { font-family: 'Playfair Display', Georgia, serif; font-weight: 800; font-size: clamp(23.4px, 2.52vw, 36px); line-height: 1.1; margin: 0; color: #e6ecdc; } .vg-ctablock__text { font-size: 14.4px; line-height: 1.6; color: #e8f3d8; margin: 14px 0 0; max-width: 520px; } .vg-ctablock__actions { display: flex; gap: 10px; margin-top: 24px; flex-wrap: wrap; } .vg-contactcards { display: grid; gap: 10px; } .vg-contactcard { background: var(--vg-card-on-accent); border-radius: 6px; padding: 16px 18px; } .vg-contactcard__k { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--vg-muted); } .vg-contactcard__v { font-weight: 700; font-size: 13.5px; margin-top: 5px; color: var(--vg-heading); } .vg-btn--light { background: var(--vg-surface); color: var(--vg-green-fg); } .vg-btn--ghost { border: 2px solid rgba(255,255,255,0.6); color: #ffffff; } /* Общая ссылка-«все» в шапке блока */ .vg-blockhead__all { font-size: 12.6px; font-weight: 700; } /* ============================================================ РЕЛИЗЫ: каталог + страница релиза + плеер (engine/modules/releases.php) ============================================================ */ .vg-filterbar { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: clamp(20px, 2.6vw, 28px); padding: 6px; border-radius: 10px; border: 1px solid var(--vg-border); background: var(--vg-surface); width: fit-content; } .vg-filterbtn { padding: 10px 16px; border: none; border-radius: 6px; cursor: pointer; font-family: Manrope, sans-serif; font-size: 12.2px; font-weight: 700; background: transparent; color: var(--vg-muted); } .vg-relgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: clamp(14px, 1.8vw, 22px); } .vg-relcard { display: block; color: inherit; border-radius: 10px; transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.5s ease, background-color 0.5s ease; will-change: transform; } .vg-relcover { aspect-ratio: 1; border-radius: 10px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--vg-border); background-color: var(--vg-ph); background-image: repeating-linear-gradient(135deg, var(--vg-ph2) 0 10px, transparent 10px 20px); } .vg-relcover img { width: 100%; height: 100%; object-fit: cover; display: block; } .vg-relcard__lines { margin-top: 12px; padding: 0 10px 10px; text-align: left; transition: text-align 0.5s ease; } .vg-relcard:hover .vg-relcard__lines { text-align: center; } .vg-relcard__title { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: 15.3px; line-height: 1.25; color: var(--vg-heading); } .vg-relcard__artist { font-size: 12.2px; color: var(--vg-accent); font-weight: 700; margin-top: 5px; } .vg-relcard__meta { font-size: 11.3px; color: var(--vg-muted); margin-top: 5px; } .vg-relmore-wrap { display: flex; justify-content: center; margin-top: clamp(28px, 3.4vw, 44px); } .vg-sec--rel { max-width: 1100px; } .vg-rel { display: grid; grid-template-columns: minmax(240px, 340px) minmax(0, 1fr); gap: clamp(22px, 3vw, 40px); align-items: start; } .vg-rel__cover { aspect-ratio: 1; border-radius: 12px; overflow: hidden; background-color: var(--vg-ph); background-image: repeating-linear-gradient(135deg, var(--vg-ph2) 0 12px, transparent 12px 24px); display: grid; place-items: center; box-shadow: 0 18px 40px rgba(0,0,0,0.18); } .vg-rel__cover img { width: 100%; height: 100%; object-fit: cover; display: block; } .vg-rel__links { display: grid; gap: 8px; margin-top: 16px; } .vg-rel__link { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-radius: 6px; border: 1px solid var(--vg-border); color: var(--vg-heading); font-weight: 700; font-size: 12.6px; } .vg-rel__link--primary { background: #9d1230; color: #ffffff; border-color: #9d1230; } .vg-rel__badgerow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .vg-rel__title { font-family: 'Playfair Display', Georgia, serif; font-weight: 800; font-size: clamp(27px, 3.06vw, 45px); line-height: 1.08; margin: 16px 0 0; color: var(--vg-heading); } .vg-rel__artist { font-size: clamp(14.4px, 1.17vw, 17.1px); font-weight: 700; color: var(--vg-accent); margin-top: 10px; } .vg-rel__lead { font-size: 14.4px; line-height: 1.65; color: var(--vg-text); margin: 16px 0 0; max-width: 620px; } /* Треклист + плеер */ .vg-tracklist { margin-top: clamp(22px, 3vw, 30px); border: 1px solid var(--vg-border); border-radius: 10px; background: var(--vg-surface); overflow: hidden; } .vg-track { display: flex; align-items: center; gap: 14px; padding: 13px 18px; cursor: pointer; border-top: 1px solid var(--vg-border); transition: background 140ms ease; } .vg-track:first-child { border-top: none; } .vg-track:hover { background: var(--vg-accent-soft); } .vg-track__num { width: 26px; flex: 0 0 auto; font-family: ui-monospace, monospace; font-size: 11.3px; color: var(--vg-muted2); } .vg-play { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; font-size: 11px; padding-left: 2px; cursor: pointer; background: transparent; border: 1px solid var(--vg-border); color: var(--vg-heading); transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease; } .vg-track:hover .vg-play { background: #9d1230; border-color: #9d1230; color: #ffffff; transform: scale(1.08); } .vg-track__title { flex: 1 1 auto; min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--vg-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vg-track__feat { flex: 0 0 auto; font-size: 11.3px; color: var(--vg-muted); } .vg-track__time { flex: 0 0 auto; width: 34px; text-align: right; font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums; font-size: 11.3px; color: var(--vg-muted); } .vg-track.is-playing .vg-track__time { color: #9d1230; font-weight: 700; } .vg-track.is-playing { background: var(--vg-accent-soft); } .vg-track.is-playing .vg-play { background: #9d1230; border-color: #9d1230; color: #ffffff; padding-left: 0; } .vg-track__cover { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 6px; object-fit: cover; border: 1px solid var(--vg-border); } /* действия трека: лайк (♥) + скачать (⤓) — видны на активном/hover-треке; лайкнутый ♥ виден всегда */ .vg-track__actions { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; margin-left: 2px; } .vg-track__like, .vg-track__dl { width: 28px; height: 28px; flex: 0 0 auto; display: grid; place-items: center; padding: 0; border: none; background: transparent; border-radius: 50%; cursor: pointer; color: var(--vg-muted); font-size: 15px; line-height: 1; opacity: 0; transition: opacity 140ms ease, color 140ms ease, background 140ms ease, transform 140ms ease; } .vg-track__dl svg { display: block; } .vg-track:hover .vg-track__like, .vg-track:hover .vg-track__dl, .vg-track.is-playing .vg-track__like, .vg-track.is-playing .vg-track__dl, .vg-track:focus-within .vg-track__like, .vg-track:focus-within .vg-track__dl { opacity: 1; } .vg-track__like:hover, .vg-track__dl:hover { background: var(--vg-accent-soft); color: var(--vg-heading); transform: scale(1.1); } .vg-track__like.is-liked { opacity: 1; color: #e0245e; } .vg-track__like.is-liked:hover { color: #c01f4f; } /* Плашка «твои треки» — фирменная карточка снизу-справа (в стиле модалки) */ .vg-favnudge { position: fixed; z-index: 50; right: clamp(14px, 3vw, 26px); bottom: clamp(14px, 3vw, 26px); display: flex; align-items: stretch; background: var(--vg-surface); border: 1px solid var(--vg-border); border-radius: 14px; box-shadow: 0 18px 42px -14px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.12); overflow: hidden; max-width: min(92vw, 340px); animation: vgNudgeIn 340ms cubic-bezier(.2,.7,.2,1) both; } @keyframes vgNudgeIn { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: none; } } .vg-favnudge__main { display: flex; align-items: center; gap: 12px; padding: 11px 10px 11px 13px; text-decoration: none; color: inherit; min-width: 0; transition: background 160ms ease; } .vg-favnudge__main:hover { background: var(--vg-accent-soft); } .vg-favnudge__icon { width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: var(--vg-accent-soft); color: #e0245e; font-size: 18px; box-shadow: inset 0 0 0 1px var(--vg-border); } .vg-favnudge__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .vg-favnudge__title { font-family: 'Playfair Display', Georgia, serif; font-weight: 800; font-size: 14px; color: var(--vg-heading); letter-spacing: -0.01em; } .vg-favnudge__sub { font-size: 11.7px; color: var(--vg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vg-favnudge__main:hover .vg-favnudge__sub { color: var(--vg-heading); } .vg-favnudge__count { font-weight: 800; color: var(--vg-accent); font-variant-numeric: tabular-nums; } .vg-favnudge__close { flex: 0 0 auto; width: 36px; border: none; border-left: 1px solid var(--vg-border); background: transparent; color: var(--vg-muted); font-size: 21px; line-height: 1; cursor: pointer; transition: background 160ms ease, color 160ms ease; } .vg-favnudge__close:hover { color: var(--vg-heading); background: var(--vg-accent-soft); } @media (max-width: 560px) { .vg-favnudge { left: 12px; right: 12px; bottom: 12px; max-width: none; } } .vg-relfacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-top: 18px; } .vg-relfact { border: 1px solid var(--vg-border); border-radius: 10px; background: var(--vg-surface); padding: 16px 18px; } .vg-relfact__k { font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--vg-muted); } .vg-relfact__v { font-size: 13.1px; font-weight: 700; margin-top: 8px; color: var(--vg-heading); } /* Кредиты */ .vg-credits { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(18px, 2.4vw, 28px); } .vg-credbox { border: 1px solid var(--vg-border); border-radius: 10px; background: var(--vg-surface); padding: clamp(20px, 2.4vw, 26px); } .vg-credbox__label { font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--vg-muted); } .vg-artistrow { display: flex; gap: 14px; align-items: flex-start; margin-top: 14px; } .vg-artist__name { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: 17.1px; color: var(--vg-heading); } .vg-artist__bio { font-size: 12.6px; line-height: 1.6; color: var(--vg-text); margin: 8px 0 0; } .vg-credlist { display: grid; gap: 10px; margin-top: 14px; font-size: 12.6px; color: var(--vg-text); } .vg-cred { display: flex; gap: 12px; } .vg-cred__k { min-width: 108px; font-weight: 700; color: var(--vg-muted); } .vg-avatar--md { width: 64px; height: 64px; } /* ===================== МОБИЛЬНАЯ АДАПТАЦИЯ ===================== */ /* Тач-устройства (нет hover): действия трека видны всегда, чтобы можно было тапнуть лайк/скачать */ @media (hover: none) { .vg-track__like, .vg-track__dl { opacity: 1; width: 32px; height: 32px; } } /* Планшет/крупный телефон: релиз и двухколоночные блоки сворачиваются в одну колонку */ @media (max-width: 760px) { /* minmax(0,1fr) (не 1fr!) — колонка сжимается под экран, иначе min-content обложки распирает вправо */ .vg-rel { grid-template-columns: minmax(0, 1fr); gap: clamp(18px, 5vw, 26px); } .vg-rel > * { min-width: 0; } .vg-rel__cover, .vg-rel__links { width: 100%; max-width: 440px; margin-left: auto; margin-right: auto; } .vg-rel__title { font-size: clamp(26px, 8vw, 38px); } .vg-credits { grid-template-columns: minmax(0, 1fr); } .vg-relfacts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .vg-feedhead { align-items: flex-start; } } /* Телефон: компактные строки трека, факты в одну колонку, каталог 2-в-ряд */ @media (max-width: 480px) { .vg-relfacts { grid-template-columns: minmax(0, 1fr); } .vg-track { gap: 9px; padding: 11px 12px; } .vg-track__num { width: 18px; } .vg-track__cover { width: 30px; height: 30px; } .vg-track__time { width: 42px; } .vg-track__actions { gap: 2px; margin-left: 0; } .vg-relgrid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; } .vg-cred__k { min-width: 84px; } } /* ===== Активный пункт (текущая страница) — как при наведении. Класс is-active ставит плагин active_links.php ===== */ .vg-navlink.is-active { color: #f2ffd9; border-bottom-color: #c9a227; text-shadow: 0 1px 0 rgba(24,46,6,0.9), 0 3px 9px rgba(0,0,0,0.45); } .vg-menu__link.is-active { color: #f2ffd9; background: rgba(255,255,255,0.08); } .vg-cta.is-active { background: linear-gradient(180deg, #c8204a 0%, #b41638 55%, #8f1029 100%); } .vg-foot-linklist a.is-active { color: var(--vg-accent-hover); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } .vg-legalbar__link.is-active { color: #ffffff; border-bottom-color: #c9a227; } /* ===== Единый фирменный акцент под заголовками секций (золотая линия) — только h2, весь сайт ===== */ .vg-h2 { position: relative; padding-bottom: clamp(10px, 1.2vw, 14px); } .vg-h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 62px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #c9a227, rgba(201, 162, 39, 0)); } /* ===== Индикатор загрузки трека (nprogress-стиль): тонкая полоса сверху ===== */ .vg-nprog { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 300; pointer-events: none; opacity: 0; transition: opacity 0.3s ease; } .vg-nprog.is-on { opacity: 1; } .vg-nprog__bar { height: 100%; width: 0; border-radius: 0 3px 3px 0; background: linear-gradient(90deg, #c9a227, #ecc94b); box-shadow: 0 0 10px rgba(201,162,39,0.75), 0 0 4px rgba(201,162,39,0.55); } .vg-nprog.is-err .vg-nprog__bar { background: linear-gradient(90deg, #9d1230, #e0245e); box-shadow: 0 0 10px rgba(224,36,94,0.8), 0 0 4px rgba(224,36,94,0.6); } /* ===== Авторы: кликабельные карточки (team-виджет + список) + ссылка «все авторы» ===== */ .vg-authors__all { font-size: 12.6px; font-weight: 700; color: var(--vg-accent); } .vg-authors__all:hover { color: var(--vg-accent-hover); } .vg-teamcard { display: block; color: inherit; text-decoration: none; transition: transform 0.5s cubic-bezier(0.2,0.7,0.2,1), box-shadow 0.5s ease, border-color 0.3s ease; } .vg-authorcard { color: inherit; text-decoration: none; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } .vg-authorcard:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(0,0,0,0.12); border-color: #3d7a17; } /* ===== Аватары-инициалы (авторы): цвет из палитры по slug, без картинок ===== */ .vg-avatar { display: grid; place-items: center; overflow: hidden; } .vg-avatar__i { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; color: #fff; line-height: 1; letter-spacing: 0.01em; } .vg-avatar--sm .vg-avatar__i { font-size: 18px; } .vg-avatar--md .vg-avatar__i { font-size: 22px; } .vg-avatar--lg .vg-avatar__i { font-size: 29px; } .vg-avatar--c0 { background: linear-gradient(135deg, #3d7a17, #2c5a10); } .vg-avatar--c1 { background: linear-gradient(135deg, #c9a227, #a07d17); } .vg-avatar--c2 { background: linear-gradient(135deg, #b0173a, #7d0d26); } .vg-avatar--c3 { background: linear-gradient(135deg, #1f7a72, #13514c); } .vg-avatar--c4 { background: linear-gradient(135deg, #5b4b8a, #3c3160); } .vg-avatar--c5 { background: linear-gradient(135deg, #2f6690, #1f4763); } .vg-avatar--c6 { background: linear-gradient(135deg, #94663a, #6b4a28); } .vg-avatar--c7 { background: linear-gradient(135deg, #a83267, #7a2249); } /* team-карточка: аватар-квадрат сверху с крупными инициалами */ .vg-teamcard__av { aspect-ratio: 1; display: grid; place-items: center; } .vg-teamcard__av .vg-avatar__i { font-size: clamp(34px, 6vw, 54px); } /* фото-аватар поверх инициалов (lazy, фейд-ин при загрузке; onerror убирает img → инициалы) */ .vg-avatar, .vg-teamcard__av { position: relative; } .vg-avatar__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.35s ease; } .vg-avatar__img.is-loaded { opacity: 1; } /* ===== Видео-релиз: плеер-герой + play-бейдж на карточке каталога ===== */ .vg-relvideo { position: relative; border-radius: 12px; overflow: hidden; background: #000; box-shadow: 0 18px 40px rgba(0,0,0,0.28); line-height: 0; } .vg-relvideo__el { width: 100%; height: auto; display: block; background: #000; cursor: pointer; } /* центральная кнопка play/pause */ .vg-relvideo__toggle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: clamp(62px, 9vw, 84px); height: clamp(62px, 9vw, 84px); border: none; border-radius: 50%; cursor: pointer; display: grid; place-items: center; background: rgba(157,18,48,0.85); color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,0.45); transition: opacity 0.3s ease, transform 0.2s ease, background 0.2s ease; } .vg-relvideo__toggle:hover { background: #9d1230; transform: translate(-50%, -50%) scale(1.06); } .vg-relvideo__pi { font-size: clamp(24px, 3.4vw, 32px); line-height: 1; padding-left: 3px; } .vg-relvideo.is-btnhidden .vg-relvideo__toggle { opacity: 0; pointer-events: none; } /* лайк (в мои лайки) */ .vg-relvideo__like { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; border: none; border-radius: 50%; cursor: pointer; display: grid; place-items: center; background: rgba(0,0,0,0.42); color: #fff; font-size: 20px; line-height: 1; backdrop-filter: blur(4px); box-shadow: 0 2px 12px rgba(0,0,0,0.55), inset 0 0 0 1.5px rgba(255,255,255,0.5); text-shadow: 0 1px 3px rgba(0,0,0,0.6); transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .vg-relvideo__like:hover { transform: scale(1.1); background: rgba(0,0,0,0.62); } .vg-relvideo__like.is-liked { color: #e0245e; box-shadow: 0 2px 12px rgba(0,0,0,0.55), inset 0 0 0 1.5px rgba(224,36,94,0.75); } /* нижняя панель */ .vg-relvideo__bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 12px; padding: 14px 14px 12px; line-height: 1; background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0.6)); } .vg-relvideo__seek { flex: 1 1 auto; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.28); cursor: pointer; } .vg-relvideo__fill { display: block; height: 100%; width: 0; border-radius: 3px; background: #e0245e; } .vg-relvideo__time { flex: 0 0 auto; font-family: ui-monospace, monospace; font-size: 11.5px; color: #fff; } .vg-relvideo__ctrl { flex: 0 0 auto; width: 30px; height: 30px; border: none; background: transparent; color: #fff; cursor: pointer; display: grid; place-items: center; opacity: 0.9; } .vg-relvideo__ctrl:hover { opacity: 1; } .vg-relvideo__ctrl.is-off { opacity: 0.45; } /* мобильный пейзаж: высота плеера = высота экрана − высота хедера */ @media (orientation: landscape) and (max-height: 500px) { .vg-relvideo { height: calc(100dvh - var(--vg-header-h, 56px)); } .vg-relvideo__el { height: 100%; object-fit: contain; } } .vg-rel__info { max-width: 820px; } .vg-rel__info .vg-rel__links { margin-top: 18px; max-width: 420px; } .vg-rel__vhead { margin-bottom: clamp(16px, 2.2vw, 26px); } .vg-relcover { position: relative; } .vg-relcover__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; padding-left: 3px; background: rgba(157,18,48,0.86); color: #ffffff; font-size: 15px; box-shadow: 0 6px 18px rgba(0,0,0,0.4); transition: transform 0.3s ease, background 0.3s ease; } .vg-relcard:hover .vg-relcover__play { transform: translate(-50%, -50%) scale(1.14); background: #9d1230; } /* карточка видео в «моих лайках» */ .vg-h2 + .vg-relgrid { margin-top: clamp(20px, 2.6vw, 28px); } /* заголовок секции не лип к карточкам */ .vg-favcard { position: relative; border-radius: 10px; transition: transform 0.3s ease, box-shadow 0.3s ease; } .vg-favcard__link { display: block; color: inherit; text-decoration: none; } .vg-favcard:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(0,0,0,0.12); } .vg-favcard__like { position: absolute; top: 8px; right: 8px; z-index: 2; width: 34px; height: 34px; opacity: 1; background: rgba(20,21,15,0.5); } /* ============ REELS — вертикальные видео-галереи (модуль reels.php) ============ */ .vg-reelcats { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(16px, 2.4vw, 28px); } .vg-reelcat { display: block; color: inherit; border: 1px solid var(--vg-border); border-radius: 14px; overflow: hidden; background: var(--vg-surface); transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease; } .vg-reelcat:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(0,0,0,.18); } .vg-reelcat__cover { position: relative; aspect-ratio: 4 / 3; background: var(--vg-ph); overflow: hidden; } .vg-reelcat__cover img { width: 100%; height: 100%; object-fit: cover; display: block; } .vg-reelcat__play, .vg-reel__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: rgba(157,18,48,.86); color: #fff; font-size: 20px; padding-left: 3px; box-shadow: 0 6px 18px rgba(0,0,0,.3); transition: transform .4s ease, background .4s ease; } .vg-reelcat:hover .vg-reelcat__play { transform: translate(-50%,-50%) scale(1.12); } .vg-reelcat__lines { padding: 14px 16px 16px; } .vg-reelcat__title { font-family: 'Playfair Display', Georgia, serif; font-weight: 800; font-size: 20px; color: var(--vg-heading); } .vg-reelcat__meta { color: var(--vg-muted); font-size: 12.5px; font-weight: 600; margin-top: 4px; } .vg-reelgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: clamp(12px, 1.6vw, 20px); } .vg-reel { display: flex; flex-direction: column; gap: 8px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; text-align: left; font: inherit; -webkit-tap-highlight-color: transparent; } .vg-reel__frame { position: relative; aspect-ratio: 9 / 16; border-radius: 12px; overflow: hidden; border: 1px solid var(--vg-border); background: var(--vg-ph); display: block; } .vg-reel__poster { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2,.7,.2,1); } .vg-reel:hover .vg-reel__poster { transform: scale(1.05); } .vg-reel__play { width: 46px; height: 46px; font-size: 17px; } .vg-reel:hover .vg-reel__play { transform: translate(-50%,-50%) scale(1.12); background: #9d1230; } .vg-reel__dur { position: absolute; right: 8px; bottom: 8px; background: rgba(0,0,0,.66); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 20px; letter-spacing: .02em; } .vg-reel__title { font-size: 13px; font-weight: 600; color: var(--vg-heading); line-height: 1.35; } /* лайтбокс-плеер */ .vg-reelbox { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: clamp(12px, 3vw, 32px); } .vg-reelbox[hidden] { display: none; } .vg-reelbox__scrim { position: absolute; inset: 0; background: rgba(6,8,5,.82); backdrop-filter: blur(4px); } .vg-reelbox__panel { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: min(94vw, 520px); width: 100%; } .vg-reelbox__video { width: auto; max-width: 100%; max-height: 78vh; aspect-ratio: 9 / 16; border-radius: 14px; background: #000; box-shadow: 0 24px 70px rgba(0,0,0,.5); display: block; } .vg-reelbox__close { position: absolute; top: -8px; right: -8px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--vg-surface); color: var(--vg-heading); font-size: 20px; cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.3); display: grid; place-items: center; } .vg-reelbox__close:hover { background: var(--vg-accent); color: #fff; } .vg-reelbox__meta { text-align: center; max-width: 460px; } .vg-reelbox__title { font-family: 'Playfair Display', Georgia, serif; font-weight: 800; font-size: 20px; color: #fff; margin: 0; } .vg-reelbox__desc { color: rgba(255,255,255,.82); font-size: 13.5px; line-height: 1.55; margin: 8px 0 0; } body.vg-reelbox-open { overflow: hidden; } @media (max-width: 560px) { .vg-reelgrid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; } .vg-reelbox__video { max-height: 72vh; } } /* ============ Полоса загрузки страницы (top progress bar) ============ */ .vg-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 3000; opacity: 0; pointer-events: none; background: linear-gradient(90deg, #c9a227, #ecc94b); box-shadow: 0 0 10px rgba(201,162,39,0.75), 0 0 4px rgba(201,162,39,0.55); border-top-right-radius: 3px; border-bottom-right-radius: 3px; transition: opacity .35s ease; } .vg-progress.is-active { opacity: 1; }