/* assets/css/gallery.css — v1.2 (fixed clipping, spacing, scroll lock, responsiveness, smoother UI) */ /* ---------- TOKENS ---------- */ :root{ --ink: rgba(2, 6, 23, .92); --muted: rgba(2, 6, 23, .66); --line: rgba(15, 23, 42, .10); --brand: #2bc4e3; --power: #ffd24a; --power2:#ffb200; --bg0: #ffffff; --bg1: #fbfbfc; --r: 18px; --r2: 22px; --shadow: 0 18px 50px rgba(2,6,23,.12); --shadow2: 0 26px 90px rgba(2,6,23,.20); --ease: cubic-bezier(.2,.9,.2,1); --wrap: 1160px; --px: clamp(16px, 3vw, 28px); /* stable layout when locking scroll (prevents jump) */ scrollbar-gutter: stable both-edges; } /* ---------- BASE / RESET (safe) ---------- */ html, body{ height:100%; } *{ box-sizing:border-box; } body{ margin:0; color: var(--ink); background: var(--bg0); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; } img, video{ max-width:100%; height:auto; display:block; } button, a{ -webkit-tap-highlight-color: transparent; } button{ font: inherit; } :focus-visible{ outline: 2px solid rgba(43,196,227,.55); outline-offset: 2px; } /* Scroll lock helper (toggle via JS on OR ) */ html.is-lock, body.is-lock{ overflow: hidden; height: 100%; overscroll-behavior: none; touch-action: none; } /* ---------- PAGE BACKDROP ---------- */ .page-gallery{ background: radial-gradient(900px 520px at 12% 10%, rgba(43,196,227,.10), transparent 60%), radial-gradient(820px 420px at 92% 16%, rgba(255,210,74,.12), transparent 55%), linear-gradient(180deg, var(--bg0) 0%, var(--bg1) 55%, var(--bg0) 100%); } .gallery-main{ min-height: 70vh; display:block; } /* shared wrap */ .g-wrap, .vr-wrap{ max-width: var(--wrap); margin: 0 auto; padding: 0 var(--px); } /* HERO wrapper in your HTML is missing .g-wrap, so we enforce it here */ .g-hero__wrap{ max-width: var(--wrap); margin: 0 auto; padding: 0 var(--px); } /* ---------- HERO ---------- */ .g-hero{ padding: clamp(34px, 4.8vw, 64px) 0 clamp(18px, 3vw, 36px); } .g-hero__wrap{ display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(16px, 2.6vw, 28px); align-items: stretch; } .g-hero__copy{ border-radius: var(--r2); border: 1px solid var(--line); background: rgba(255,255,255,.92); box-shadow: var(--shadow); padding: clamp(18px, 3vw, 28px); position: relative; overflow: hidden; /* ok (no clipping now because buttons won’t exceed) */ isolation: isolate; } .g-hero__copy::before{ content:""; position:absolute; inset:-2px; background: radial-gradient(600px 220px at 14% 18%, rgba(255,210,74,.22), transparent 60%), radial-gradient(520px 240px at 82% 28%, rgba(43,196,227,.18), transparent 62%), linear-gradient(120deg, rgba(255,178,0,.08), rgba(43,196,227,.08)); opacity: .85; pointer-events:none; z-index: 0; } .g-hero__copy > *{ position: relative; z-index: 1; } .g-hero__kicker{ display: inline-flex; align-items: center; gap: 10px; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; font-size: 12px; color: rgba(2,6,23,.68); margin: 0 0 10px; } .g-hero__kicker::before{ content:""; width: 12px; height: 12px; border-radius: 999px; background: linear-gradient(135deg, var(--power), var(--brand)); box-shadow: 0 10px 26px rgba(255,178,0,.28); } .g-hero__title{ margin: 0 0 10px; font-size: clamp(30px, 3.2vw, 52px); line-height: 1.02; letter-spacing: -0.02em; font-weight: 950; } .g-hero__sub{ margin: 0 0 16px; color: var(--muted); font-weight: 650; max-width: 62ch; line-height: 1.55; } .g-hero__actions{ display:flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 12px; } /* Buttons */ .g-btn{ border-radius: 16px; border: 1px solid var(--line); text-decoration: none; display: inline-flex; align-items: center; gap: 10px; padding: 12px 14px; font-weight: 850; color: var(--ink); background: rgba(255,255,255,.78); user-select:none; /* IMPORTANT: prevents “cut” feeling inside parents */ max-width: 100%; white-space: nowrap; transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease); } .g-btn--primary{ border-color: rgba(255,178,0,.30); background: linear-gradient(135deg, var(--power), var(--power2)); box-shadow: 0 18px 55px rgba(255,178,0,.22); padding: 12px 16px; /* allow multi-line content cleanly */ white-space: normal; flex-direction: column; align-items: flex-start; min-width: min(260px, 100%); } .g-btn__top{ font-size: 12px; letter-spacing: .14em; text-transform: uppercase; opacity: .86; line-height: 1.1; } .g-btn__main{ font-size: 18px; letter-spacing: -0.01em; line-height: 1.1; } .g-btn__sub{ font-size: 12px; opacity: .86; font-weight: 850; line-height: 1.1; } .g-btn--ghost{ background: rgba(255,255,255,.70); } .g-btn:hover{ transform: translateY(-1px); box-shadow: var(--shadow2); border-color: rgba(43,196,227,.25); } .g-btn--primary:hover{ border-color: rgba(255,178,0,.48); } .g-hero__trust{ margin-top: 14px; display:flex; gap: 10px; flex-wrap: wrap; } .g-pill{ display:inline-flex; align-items:center; gap: 8px; padding: 9px 12px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.82); font-weight: 850; color: rgba(2,6,23,.74); box-shadow: 0 10px 26px rgba(2,6,23,.06); } /* panel */ .g-hero__panel{ border-radius: var(--r2); border: 1px solid var(--line); background: radial-gradient(520px 320px at 70% 18%, rgba(43,196,227,.14), transparent 60%), radial-gradient(520px 360px at 18% 26%, rgba(255,210,74,.16), transparent 58%), rgba(255,255,255,.92); box-shadow: var(--shadow); padding: clamp(16px, 2.6vw, 22px); overflow: visible; /* avoid clipping badge/cta shadows */ } .g-panel__head{ display:flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .g-panel__title{ font-weight: 950; letter-spacing: -0.01em; } .g-panel__badge{ font-weight: 950; font-size: 12px; padding: 8px 10px; border-radius: 999px; border: 1px solid rgba(255,178,0,.32); background: rgba(255,210,74,.40); } .g-panel__list{ list-style:none; padding: 0; margin: 0 0 14px; display:grid; gap: 10px; color: rgba(2,6,23,.78); font-weight: 850; } .g-dot{ display:inline-block; width: 10px; height: 10px; border-radius: 999px; background: linear-gradient(135deg, var(--brand), var(--power)); box-shadow: 0 12px 22px rgba(43,196,227,.18); margin-right: 10px; vertical-align: middle; } .g-panel__cta{ display:inline-flex; align-items:center; gap: 10px; text-decoration:none; font-weight: 950; color: rgba(2,6,23,.88); padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(43,196,227,.22); background: rgba(43,196,227,.08); transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease); } .g-panel__cta:hover{ transform: translateY(-1px); box-shadow: var(--shadow); background: rgba(43,196,227,.10); } /* ---------- SECTION HEAD ---------- */ .g-section{ padding: clamp(18px, 3.2vw, 34px) 0 clamp(46px, 5.4vw, 78px); } .g-head{ margin: 0 0 16px; } .g-title{ margin: 0 0 6px; font-weight: 950; letter-spacing: -0.02em; font-size: clamp(22px, 2.4vw, 32px); } .g-sub{ margin: 0; color: var(--muted); font-weight: 650; line-height: 1.55; } /* ---------- MASONRY GRID (photos) ---------- */ .g-grid{ column-count: 5; column-gap: 14px; width: 100%; } @media (max-width: 1100px){ .g-grid{ column-count: 4; } } @media (max-width: 900px){ .g-hero__wrap{ grid-template-columns: 1fr; } .g-grid{ column-count: 3; } } @media (max-width: 640px){ .g-grid{ column-count: 2; column-gap: 12px; } } /* item */ .g-item{ break-inside: avoid; margin: 0 0 14px; border-radius: 18px; border: 1px solid var(--line); background: rgba(255,255,255,.92); box-shadow: 0 14px 40px rgba(2,6,23,.10); overflow: hidden; cursor: zoom-in; position: relative; transform: translateZ(0); transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease); } .g-item::after{ content:""; position:absolute; inset:0; background: radial-gradient(420px 220px at 70% 10%, rgba(255,210,74,.10), transparent 60%); opacity: 0; transition: opacity .22s var(--ease); pointer-events:none; } .g-item:hover{ transform: translateY(-2px); box-shadow: 0 24px 70px rgba(2,6,23,.16); border-color: rgba(255,178,0,.25); } .g-item:hover::after{ opacity: 1; } .g-thumb{ width: 100%; height: auto; transform: scale(1); transition: transform .28s var(--ease); } .g-item:hover .g-thumb{ transform: scale(1.04); } /* ---------- LOAD (photos) ---------- */ .g-actions{ margin-top: 18px; display:flex; flex-direction: column; gap: 10px; align-items: center; } .g-load{ border-radius: 16px; border: 1px solid rgba(255,178,0,.30); background: linear-gradient(135deg, var(--power), var(--power2)); color: rgba(2,6,23,.92); font-weight: 950; padding: 12px 16px; cursor: pointer; box-shadow: 0 18px 55px rgba(255,178,0,.22); transition: transform .18s var(--ease), box-shadow .18s var(--ease), filter .18s var(--ease); } .g-load:hover{ transform: translateY(-1px); box-shadow: 0 28px 80px rgba(255,178,0,.26); } .g-load:disabled{ opacity: .55; cursor: not-allowed; filter: grayscale(.2); transform: none; box-shadow: 0 10px 26px rgba(2,6,23,.10); } .g-status{ color: rgba(2,6,23,.62); font-weight: 750; min-height: 18px; } /* ---------- SEO SECTION ---------- */ .g-seo{ padding: clamp(40px, 5.6vw, 80px) 0; } .g-seo__wrap{ border-radius: 22px; border: 1px solid var(--line); background: radial-gradient(860px 420px at 18% 22%, rgba(255,210,74,.16), transparent 60%), radial-gradient(820px 420px at 88% 18%, rgba(43,196,227,.12), transparent 58%), rgba(255,255,255,.92); box-shadow: var(--shadow); padding: clamp(18px, 3vw, 28px); } .g-seo__title{ margin: 0 0 10px; font-weight: 950; letter-spacing: -0.02em; font-size: clamp(20px, 2.2vw, 30px); } .g-seo__p{ margin: 0 0 10px; color: var(--muted); font-weight: 650; line-height: 1.7; } .g-seo__link{ color: rgba(2,6,23,.92); font-weight: 950; text-decoration: none; border-bottom: 2px solid rgba(255,178,0,.55); } .g-seo__link:hover{ border-bottom-color: rgba(43,196,227,.55); } .g-seo__chips{ margin-top: 14px; display:flex; flex-wrap: wrap; gap: 10px; } .g-chip{ display:inline-flex; padding: 9px 12px; border-radius: 999px; border: 1px solid rgba(43,196,227,.18); background: rgba(43,196,227,.08); font-weight: 950; color: rgba(2,6,23,.78); } /* ---------- CTA ---------- */ .g-cta{ padding: clamp(44px, 6vw, 84px) 0; } .g-cta__shell{ border-radius: 24px; border: 1px solid var(--line); background: radial-gradient(920px 420px at 16% 22%, rgba(255,210,74,.18), transparent 62%), radial-gradient(920px 420px at 86% 18%, rgba(43,196,227,.14), transparent 60%), rgba(255,255,255,.92); box-shadow: var(--shadow2); padding: clamp(18px, 3vw, 28px); display:grid; grid-template-columns: 1.1fr .9fr; gap: clamp(14px, 2.8vw, 26px); align-items: center; } .g-cta__title{ margin: 0 0 8px; font-weight: 950; letter-spacing: -0.02em; font-size: clamp(22px, 2.6vw, 34px); } .g-cta__sub{ margin: 0 0 12px; color: var(--muted); font-weight: 650; line-height: 1.6; } .g-cta__points{ list-style:none; padding:0; margin:0; display:grid; gap: 10px; color: rgba(2,6,23,.76); font-weight: 900; } .g-cta__actions{ display:flex; flex-direction: column; gap: 12px; align-items: flex-start; } .g-cta__btn{ text-decoration:none; display:flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px 16px; border-radius: 18px; border: 1px solid rgba(255,178,0,.28); background: linear-gradient(135deg, var(--power), var(--power2)); color: rgba(2,6,23,.92); box-shadow: 0 18px 55px rgba(255,178,0,.22); transition: transform .18s var(--ease), box-shadow .18s var(--ease); min-width: min(300px, 100%); } .g-cta__btn:hover{ transform: translateY(-1px); box-shadow: 0 28px 80px rgba(255,178,0,.26); } .g-cta__btnTop{ font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 950; opacity: .86; } .g-cta__btnMain{ font-size: 18px; font-weight: 950; } .g-cta__btnSub{ font-size: 12px; font-weight: 900; opacity: .86; } .g-cta__trust{ display:flex; flex-wrap: wrap; gap: 10px; } @media (max-width: 900px){ .g-cta__shell{ grid-template-columns: 1fr; } .g-cta__actions{ align-items: stretch; } .g-cta__btn{ width: 100%; } } /* ---------- LIGHTBOX (photos) ---------- */ .g-lightbox{ position: fixed; inset: 0; z-index: 9999; display: none; } .g-lightbox.is-open{ display: block; } .g-lightbox__backdrop{ position:absolute; inset:0; background: rgba(2,6,23,.72); backdrop-filter: blur(10px); } .g-lightbox__panel{ position: absolute; inset: clamp(10px, 2.2vw, 18px); border-radius: 22px; border: 1px solid rgba(255,255,255,.12); background: rgba(8, 12, 20, .78); box-shadow: 0 30px 120px rgba(0,0,0,.45); overflow: hidden; display: grid; grid-template-columns: 56px 1fr 56px; grid-template-rows: 1fr auto; align-items: center; } .g-stage{ grid-column: 2 / 3; grid-row: 1 / 2; height: 100%; display:flex; align-items:center; justify-content:center; padding: clamp(10px, 2vw, 18px); } .g-fullimg{ max-width: 100%; max-height: 100%; border-radius: 18px; box-shadow: 0 22px 90px rgba(0,0,0,.45); opacity: 1; transform: translateX(0); transition: opacity .22s var(--ease), transform .22s var(--ease); will-change: opacity, transform; user-select: none; -webkit-user-drag: none; } .g-fullimg.is-out-left{ opacity: 0; transform: translateX(-16px); } .g-fullimg.is-out-right{ opacity: 0; transform: translateX(16px); } .g-x{ position:absolute; top: 10px; right: 10px; width: 44px; height: 44px; border-radius: 14px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.08); color: rgba(255,255,255,.92); font-size: 26px; line-height: 1; cursor: pointer; transition: transform .18s var(--ease), background .18s var(--ease); } .g-x:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } .g-nav{ grid-row: 1 / 2; width: 44px; height: 64px; border-radius: 16px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.08); color: rgba(255,255,255,.92); cursor:pointer; margin: 0 auto; transition: transform .18s var(--ease), background .18s var(--ease); } .g-nav:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } .g-nav span{ font-size: 34px; line-height: 1; display:block; transform: translateY(-1px); } .g-nav--prev{ grid-column: 1 / 2; } .g-nav--next{ grid-column: 3 / 4; } .g-lightbox__meta{ grid-column: 1 / 4; grid-row: 2 / 3; padding: 10px 14px; border-top: 1px solid rgba(255,255,255,.10); display:flex; justify-content:center; background: rgba(0,0,0,.14); } .g-count{ color: rgba(255,255,255,.86); font-weight: 900; letter-spacing: .02em; font-size: 13px; } @media (max-width: 640px){ .g-lightbox__panel{ grid-template-columns: 48px 1fr 48px; inset: 10px; } .g-nav{ height: 58px; } } /* ---------- VIDEO REELS ---------- */ .vr{ padding: clamp(46px, 6vw, 90px) 0; } .vr-head{ margin: 0 0 16px; } .vr-title{ margin: 0 0 6px; font-weight: 950; letter-spacing: -0.02em; font-size: clamp(22px, 2.4vw, 34px); } .vr-sub{ margin: 0; color: var(--muted); font-weight: 650; line-height: 1.55; } .vr-reel{ position: relative; margin-top: 14px; padding-bottom: 26px; } .vr-reel::before, .vr-reel::after{ content: ""; position: absolute; top: 0; bottom: 0; width: clamp(26px, 4vw, 62px); z-index: 3; pointer-events: none; } .vr-reel::before{ left: 0; background: linear-gradient(90deg, rgba(251,251,252,.95), rgba(251,251,252,0)); } .vr-reel::after{ right: 0; background: linear-gradient(270deg, rgba(251,251,252,.95), rgba(251,251,252,0)); } .vr-powered{ position: absolute; right: 10px; bottom: 0; z-index: 4; display: inline-flex; align-items: center; padding: 4px 9px; border-radius: 999px; border: 1px solid rgba(15,23,42,.12); background: rgba(255,255,255,.76); color: rgba(2,6,23,.68); text-decoration: none; font-size: 8px; letter-spacing: .14em; text-transform: uppercase; font-weight: 900; white-space: nowrap; } .vr-powered:hover{ color: rgba(2,6,23,.92); } .vr-grid{ --vr-card-w: clamp(280px, 30vw, 370px); display: flex; gap: 14px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scroll-behavior: smooth; overscroll-behavior-x: contain; padding: 4px 0 12px; scrollbar-width: thin; scrollbar-color: rgba(2,6,23,.32) transparent; touch-action: manipulation; } .vr-grid::-webkit-scrollbar{ height: 10px; } .vr-grid::-webkit-scrollbar-track{ background: transparent; } .vr-grid::-webkit-scrollbar-thumb{ background: linear-gradient(90deg, rgba(43,196,227,.65), rgba(255,178,0,.72)); border-radius: 999px; } .vr-card{ flex: 0 0 var(--vr-card-w); scroll-snap-align: center; border-radius: 22px; border: 1px solid var(--line); background: rgba(255,255,255,.92); box-shadow: var(--shadow); overflow: hidden; position: relative; transform: translateZ(0); transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease); } .vr-card:hover{ transform: translateY(-2px); box-shadow: var(--shadow2); border-color: rgba(255,178,0,.28); } .vr-media{ aspect-ratio: 9 / 16; width: 100%; background: linear-gradient(135deg, rgba(43,196,227,.10), rgba(255,178,0,.10)); position: relative; } .vr-video{ width: 100%; height: 100%; object-fit: cover; display: block; background: #101423; } .vr-video::-webkit-media-controls{ display: none !important; } .vr-topline{ position: absolute; top: 10px; left: 10px; right: 10px; display: flex; justify-content: space-between; align-items: center; z-index: 2; } .vr-tag{ padding: 7px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: rgba(2,6,23,.38); color: rgba(255,255,255,.96); font-weight: 900; font-size: 12px; backdrop-filter: blur(8px); } .vr-play-center{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; border: 1px solid rgba(255,255,255,.24); border-radius: 999px; background: rgba(2,6,23,.44); color: rgba(255,255,255,.95); font-size: 24px; line-height: 1; cursor: pointer; z-index: 2; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 16px 34px rgba(0,0,0,.32); transition: opacity .2s var(--ease), transform .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease); } .vr-play-center:hover{ background: rgba(2,6,23,.54); box-shadow: 0 20px 44px rgba(0,0,0,.38); } .vr-play-center i{ pointer-events: none; } .vr-card.is-playing .vr-play-center{ opacity: 0; transform: translate(-50%, -50%) scale(.9); pointer-events: none; } .vr-controls{ position: absolute; left: 10px; right: 10px; bottom: 12px; z-index: 2; display: block; } .vr-mute-corner{ border: 1px solid rgba(255,255,255,.24); background: rgba(2,6,23,.44); color: rgba(255,255,255,.96); border-radius: 999px; width: 38px; height: 38px; padding: 0; font-size: 14px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 10px 24px rgba(0,0,0,.30); } .vr-mute-corner:hover{ background: rgba(2,6,23,.56); } .vr-mute-corner i{ pointer-events: none; } .vr-seek{ width: 100%; height: 4px; border: 0; border-radius: 999px; background: rgba(255,210,74,.95); -webkit-appearance: none; appearance: none; outline: none; cursor: pointer; } .vr-seek::-webkit-slider-runnable-track{ height: 4px; border-radius: 999px; background: rgba(255,210,74,.95); } .vr-seek::-webkit-slider-thumb{ -webkit-appearance: none; appearance: none; width: 12px; height: 12px; margin-top: -4px; border: 2px solid rgba(2,6,23,.78); border-radius: 999px; background: #ffd24a; box-shadow: 0 2px 8px rgba(0,0,0,.35); } .vr-seek::-moz-range-track{ height: 4px; border: 0; border-radius: 999px; background: rgba(255,210,74,.95); } .vr-seek::-moz-range-progress{ height: 4px; border-radius: 999px; background: rgba(255,210,74,.95); } .vr-seek::-moz-range-thumb{ width: 12px; height: 12px; border: 2px solid rgba(2,6,23,.78); border-radius: 999px; background: #ffd24a; box-shadow: 0 2px 8px rgba(0,0,0,.35); } .vr-time{ position: absolute; left: 12px; bottom: 24px; z-index: 2; color: rgba(255,255,255,.92); font-weight: 900; font-size: 11px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; background: rgba(2,6,23,.44); padding: 2px 8px; text-shadow: 0 8px 18px rgba(0,0,0,.35); } .sr-only{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .vr-rail-nav{ position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 68px; border-radius: 16px; border: 1px solid rgba(15,23,42,.16); background: rgba(255,255,255,.88); color: rgba(2,6,23,.92); cursor: pointer; z-index: 4; box-shadow: 0 18px 45px rgba(2,6,23,.18); transition: transform .18s var(--ease), background .18s var(--ease), opacity .18s var(--ease); } .vr-rail-nav:hover{ transform: translateY(calc(-50% - 1px)); } .vr-rail-nav i{ font-size: 18px; line-height: 1; pointer-events: none; } .vr-rail-nav--prev{ left: 0; } .vr-rail-nav--next{ right: 0; } .vr-rail-nav.is-disabled{ opacity: .32; pointer-events: none; } /* Desktop: reels at ~50% visual size */ @media (min-width: 901px){ .vr-reel{ margin-top: 7px; padding-bottom: 13px; } .vr-grid{ --vr-card-w: clamp(140px, 15vw, 185px); gap: 7px; padding: 2px 0 6px; } .vr-card{ border-radius: 11px; } .vr-topline{ top: 5px; left: 5px; right: 5px; } .vr-tag{ padding: 4px 6px; font-size: 10px; } .vr-play-center{ width: 32px; height: 32px; font-size: 12px; } .vr-controls{ left: 5px; right: 5px; bottom: 6px; } .vr-mute-corner{ width: 19px; height: 19px; font-size: 8px; } .vr-seek{ height: 2px; } .vr-seek::-webkit-slider-runnable-track{ height: 2px; } .vr-seek::-webkit-slider-thumb{ width: 6px; height: 6px; margin-top: -2px; border-width: 1px; } .vr-seek::-moz-range-track{ height: 2px; } .vr-seek::-moz-range-progress{ height: 2px; } .vr-seek::-moz-range-thumb{ width: 6px; height: 6px; border-width: 1px; } .vr-time{ left: 6px; bottom: 12px; font-size: 9px; padding: 1px 4px; } .vr-rail-nav{ width: 21px; height: 34px; border-radius: 8px; } .vr-rail-nav i{ font-size: 9px; } } @media (max-width: 900px){ .vr-grid{ --vr-card-w: clamp(250px, 48vw, 320px); } .vr-rail-nav{ width: 38px; height: 58px; } } @media (max-width: 760px){ .vr-grid{ --vr-card-w: calc(100vw - (var(--px) * 2)); gap: 12px; padding-inline: 0; } .vr-card{ flex-basis: min(100%, var(--vr-card-w)); } .vr-reel::before, .vr-reel::after{ display: none; } .vr-rail-nav{ width: 34px; height: 52px; } .vr-rail-nav i{ font-size: 14px; } .vr-rail-nav--prev{ left: 4px; } .vr-rail-nav--next{ right: 4px; } .vr-powered{ right: 2px; } .vr-play-center{ width: 64px; height: 64px; } .vr-mute-corner{ width: 34px; height: 34px; font-size: 13px; } } /* ---------- MOBILE POLISH ---------- */ @media (max-width: 900px){ .g-hero__actions{ align-items: stretch; } .g-btn--ghost{ width: 100%; justify-content: center; } .g-btn--primary{ width: 100%; } }