/* MAKEYCOLLECTION — Mobile Home Final Layout (FIXED) Цель (как просил Слава): - 6 кнопок: тоньше по высоте, ровно 3x2, от края до края, ближе к логотипу - сразу под кнопками: 4 коллажа (2x2) плотно, по всей ширине - внутри коллажей: видео-«брелок» (вертикаль), чуть шире по бокам (~2мм), НЕ лезет на кнопки - ничего не уходит за низ экрана Файл полностью перебивает старые патчи (в т.ч. те, что прятали .gallery). */ @media (max-width: 980px){ :root{ /* Кнопки */ --mc-btn-h: 34px; /* «сплюснуть» по высоте */ --mc-btn-fs: 13px; --mc-btn-gap-x: 8px; --mc-btn-gap-y: 8px; --mc-nav-pad-x: 10px; --mc-nav-lift: -6px; /* ближе к логотипу (минус = вверх) */ /* Галерея (4 коллажа) */ --mc-g-pad-x: 10px; --mc-g-gap: 10px; /* Видео в центре */ --mc-peek: 12px; /* сколько видно коллажей вокруг видео */ --mc-video-y: 10px; /* опустить видео вниз (плюс = вниз) */ --mc-video-x: 0px; --mc-video-scale-x: 1.04; /* «+2мм слева/справа» примерно */ --mc-video-scale-y: 0.98; /* чуть «сжать» по высоте */ --mc-video-radius: 26px; /* Звук */ --mc-snd: 28px; --mc-snd-inset: 6px; } /* 0) Убираем все старые запреты/стили, которые ломали мобильную сцену */ html, body{ height: 100%; overflow: hidden; /* без прокрутки на главной */ overscroll-behavior: none; -webkit-overflow-scrolling: auto; touch-action: manipulation; } /* На мобиле фон без fixed (иногда дергается) */ body{ background-attachment: scroll; } /* 1) Stage делаем полноширинным и компактным */ .stage{ width: 100vw !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column; gap: 6px; overflow: hidden; } /* 2) ЛОГО + КНОПКИ (3x2, от края до края) */ .headline-nav{ display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--mc-btn-gap-y) var(--mc-btn-gap-x); width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; padding: 0 var(--mc-nav-pad-x) !important; margin-top: var(--mc-nav-lift) !important; margin-bottom: 2px !important; } .headline-nav .hbtn{ width: 100% !important; height: var(--mc-btn-h) !important; min-height: var(--mc-btn-h) !important; padding: 0 8px !important; display: flex !important; align-items: center; justify-content: center; font-size: var(--mc-btn-fs) !important; line-height: 1.05 !important; border-radius: 16px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 3) ГАЛЕРЕЯ: 4 коллажа (2x2) + видео в центре */ /* ВАЖНО: в index.html есть inline-style, который прятал .gallery — перебиваем */ .gallery{ display: block !important; position: relative !important; width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; padding: 0 var(--mc-g-pad-x) calc(10px + env(safe-area-inset-bottom, 0px)) !important; margin-top: 2px !important; /* высота сцены с коллажами: стараемся влезть в экран */ height: min(calc(100svh - 220px), 640px); min-height: 420px; max-height: 640px; overflow: hidden; } /* Сбрасываем «десктопные» эффекты карточек */ .gallery > a.card{ margin: 0 !important; transform: none !important; } .gallery > a.card:hover{ transform: none !important; } /* 4 коллажа по углам */ .gallery > a.card:nth-of-type(1), .gallery > a.card:nth-of-type(2), .gallery > a.card:nth-of-type(3), .gallery > a.card:nth-of-type(4){ position: absolute !important; z-index: 1; border-radius: 22px !important; overflow: hidden !important; width: calc((100% - var(--mc-g-gap)) / 2); height: calc((100% - var(--mc-g-gap)) / 2); box-shadow: 0 10px 26px rgba(0,0,0,0.55), 0 0 14px rgba(255,170,70,0.12); } .gallery > a.card:nth-of-type(1){ left: var(--mc-g-pad-x); top: 0; } .gallery > a.card:nth-of-type(2){ right: var(--mc-g-pad-x); top: 0; } .gallery > a.card:nth-of-type(3){ left: var(--mc-g-pad-x); bottom: 0; } .gallery > a.card:nth-of-type(4){ right: var(--mc-g-pad-x); bottom: 0; } .gallery > a.card img{ width: 100% !important; height: 100% !important; object-fit: cover !important; display: block; } /* Прячем десктопный видео-тайл */ #videoOverlay, .video-overlay{ display: none !important; } /* 4) Видео-брелок в центре (используем уже существующий #mcMobileHero) */ #mcMobileHero{ display: flex !important; position: absolute !important; inset: 0 !important; z-index: 5; align-items: center; justify-content: center; pointer-events: none; /* коллажи кликабельны */ margin: 0 !important; padding: 0 !important; transform: none !important; } #mcMobileHero .mc-mobile-frame{ height: calc(100% - (var(--mc-peek) * 2)); aspect-ratio: 9 / 16; width: auto; max-height: 100%; max-width: calc(100% - (var(--mc-peek) * 2)); border-radius: var(--mc-video-radius) !important; overflow: hidden; position: relative; transform: translateX(var(--mc-video-x)) translateY(var(--mc-video-y)) scaleX(var(--mc-video-scale-x)) scaleY(var(--mc-video-scale-y)); box-shadow: 0 0 0 1px rgba(255,170,70,.35), 0 0 26px rgba(255,120,0,.22), 0 16px 46px rgba(0,0,0,.55); background: rgba(0,0,0,.12); } #mcMobileHero video{ width: 100% !important; height: 100% !important; display: block; object-fit: cover !important; object-position: 56% 50%; border-radius: inherit; pointer-events: none; } /* 5) Значок звука маленький и в угол видео */ #mcMobileHero .mc-sound-btn{ pointer-events: auto; width: var(--mc-snd) !important; height: var(--mc-snd) !important; top: var(--mc-snd-inset) !important; right: var(--mc-snd-inset) !important; } #mcMobileHero .mc-sound-btn svg{ width: 14px !important; height: 14px !important; } /* 6) Водяной знак — оставляем внизу экрана (не добавляет высоты) */ .mc-watermark{ position: fixed !important; right: 12px !important; bottom: 10px !important; z-index: 30; pointer-events: none; font-size: 12px !important; opacity: .78; } }