/* ============================================================ MAKEY — MOBILE HOME: video in 4-collage frame (NO SCROLL) v1 (clean rebuild) Scope: only index.html with ============================================================ */ /* Watermark default tweak (safe for desktop too) */ body.mc-home .mc-watermark{ letter-spacing: .08em; } /* ------------------------------ MOBILE ------------------------------ */ @media (max-width: 980px){ /* no page scroll on home */ html, body{ height: 100%; } body.mc-home{ height: calc(var(--mc-vh, 1vh) * 100); overflow: hidden; overscroll-behavior: none; -webkit-overflow-scrolling: auto; } body.mc-home .stage{ min-height: calc(var(--mc-vh, 1vh) * 100); height: calc(var(--mc-vh, 1vh) * 100); overflow: hidden; display: flex; flex-direction: column; padding-bottom: env(safe-area-inset-bottom, 0px); } /* Buttons grid: 2 rows x 3, exact centering */ body.mc-home .headline-nav{ margin-top: 10px !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: min(92vw, 560px); margin-left: auto; margin-right: auto; } body.mc-home .headline-nav .hbtn{ width: 100%; display: flex !important; align-items: center; justify-content: center; text-align: center; padding: 12px 10px; line-height: 1.05; transform: none !important; } /* Калькулятор -5% */ body.mc-home .headline-nav .hbtn[data-i18n="calc"]{ font-size: .95em; } /* Disable "lift" on tap */ body.mc-home .headline-nav .hbtn:active, body.mc-home .headline-nav .hbtn:focus, body.mc-home .headline-nav .hbtn:hover{ transform: none !important; } /* HERO FRAME (gallery becomes the stage) */ body.mc-home .gallery{ /* override any older patches that hid it */ display: block !important; position: relative; width: min(94vw, 520px); margin: 10px auto 0; flex: 1 1 auto; /* Keep the whole group comfortably inside viewport */ max-height: 54vh; min-height: 320px; border-radius: 28px; overflow: hidden; padding: 0; } /* Only first 4 collage cards used as frame on mobile */ body.mc-home .gallery > a.card:nth-of-type(n+5){ display: none !important; } /* Collage "frame" pieces */ body.mc-home .gallery > a.card{ position: absolute; overflow: hidden; border-radius: 26px; /* on top of video to stay clickable */ z-index: 12; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } body.mc-home .gallery > a.card picture, body.mc-home .gallery > a.card img{ width: 100%; height: 100%; display: block; object-fit: cover; } /* Make each collage slightly larger than a quadrant, so it "protrudes" over the video edges a bit */ body.mc-home .gallery{ --mc-gap: 10px; --mc-over: 18px; /* how much they go into the center */ --mc-r: 26px; --mc-video-w: min(76vw, 360px); --mc-lift: 10px; /* move hero a bit вверх */ } body.mc-home .gallery > a.card:nth-of-type(1){ left: 0; top: 0; width: calc(50% + var(--mc-over)); height: calc(50% + var(--mc-over)); border-top-left-radius: var(--mc-r); border-bottom-right-radius: 18px; } body.mc-home .gallery > a.card:nth-of-type(2){ right: 0; top: 0; width: calc(50% + var(--mc-over)); height: calc(50% + var(--mc-over)); border-top-right-radius: var(--mc-r); border-bottom-left-radius: 18px; } body.mc-home .gallery > a.card:nth-of-type(3){ left: 0; bottom: 0; width: calc(50% + var(--mc-over)); height: calc(50% + var(--mc-over)); border-bottom-left-radius: var(--mc-r); border-top-right-radius: 18px; } body.mc-home .gallery > a.card:nth-of-type(4){ right: 0; bottom: 0; width: calc(50% + var(--mc-over)); height: calc(50% + var(--mc-over)); border-bottom-right-radius: var(--mc-r); border-top-left-radius: 18px; } /* Stop any hover/active "jump" on collages */ body.mc-home .gallery > a.card:active, body.mc-home .gallery > a.card:hover, body.mc-home .gallery > a.card:focus{ transform: none !important; filter: none !important; } /* Center video tile */ body.mc-home #videoOverlay{ position: absolute !important; left: 50%; top: 50%; transform: translate(-50%, calc(-50% - var(--mc-lift))); width: var(--mc-video-w); aspect-ratio: 9 / 16; height: auto; border-radius: 28px; overflow: hidden; /* under collages, over background */ z-index: 10; box-shadow: 0 0 0 1px rgba(255,170,70,.35), 0 0 24px rgba(255,120,0,.22); background: rgba(0,0,0,.12); } body.mc-home #videoOverlay .video-open{ width: 100%; height: 100%; } body.mc-home #videoOverlay video{ width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 28px; } /* Sound icon: a bit smaller + sits in the extreme top-right corner of video */ body.mc-home #videoOverlay .mc-sound-btn{ width: 40px; height: 40px; top: 8px; right: 8px; } body.mc-home #videoOverlay .mc-sound-btn svg{ width: 20px; height: 20px; } /* Watermark: -15%, bottom-right corner */ body.mc-home .mc-watermark{ position: fixed; right: calc(10px + env(safe-area-inset-right, 0px)); bottom: calc(10px + env(safe-area-inset-bottom, 0px)); left: auto; transform: none; font-size: .85em; /* ~ -15% */ opacity: .88; margin: 0; z-index: 50; pointer-events: none; } }