/* LG Videos Portfolio – front-end */ .lgvp-grid { --lgvp-cols: 5; --lgvp-cols-t: 3; --lgvp-cols-m: 2; --lgvp-gap: 16px; --lgvp-radius: 18px; --lgvp-max: 1140px; display: grid; grid-template-columns: repeat(var(--lgvp-cols), minmax(0, 1fr)); gap: var(--lgvp-gap); max-width: var(--lgvp-max); margin-left: auto; margin-right: auto; box-sizing: border-box; } @media (max-width: 1023px) { .lgvp-grid { grid-template-columns: repeat(var(--lgvp-cols-t), minmax(0, 1fr)); } } @media (max-width: 639px) { .lgvp-grid { grid-template-columns: repeat(var(--lgvp-cols-m), minmax(0, 1fr)); gap: max(8px, calc(var(--lgvp-gap) * 0.6)); } } .lgvp-card { position: relative; margin: 0; padding: 0; border-radius: var(--lgvp-radius); overflow: hidden; background: #111 center / cover no-repeat; isolation: isolate; transform: translateZ(0); /* own layer, keeps border-radius clipping cheap */ -webkit-mask-image: -webkit-radial-gradient(#fff, #000); /* Safari radius+overflow fix */ transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s; } .lgvp-grid--zoom .lgvp-card:hover { transform: translateZ(0) scale(1.03); box-shadow: 0 18px 40px -18px rgba(0,0,0,.55); z-index: 1; } /* The poster is the only in-flow child: a replaced element with a 9:16 intrinsic size (width/height attributes), so the card's height is intrinsic and every engine sizes it correctly – including WebKit inside column-flex containers, where width-derived heights (aspect-ratio / % padding) collapse. */ .lgvp-poster { position: relative; z-index: 0; display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; pointer-events: none; margin: 0; padding: 0; border: 0; border-radius: 0; max-width: 100%; box-shadow: none; } .lgvp-video { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; /* clicks go to the toggle button below */ margin: 0; padding: 0; border: 0; border-radius: 0; max-width: none; box-shadow: none; background: transparent; opacity: 0; /* hidden until a frame is decoded; poster shows through */ transition: opacity .25s ease; } .lgvp-card--ready .lgvp-video { opacity: 1; } .lgvp-video::-webkit-media-controls { display: none !important; } /* Play / pause layer: fills the card so the whole card is the click target. */ .lgvp-toggle { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: transparent; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; outline-offset: -3px; } .lgvp-toggle:focus-visible { outline: 3px solid #fff; } .lgvp-ico { width: 22%; max-width: 64px; height: auto; aspect-ratio: 1; fill: currentColor; filter: drop-shadow(0 2px 6px rgba(0,0,0,.45)); opacity: 0; transform: scale(.85); transition: opacity .2s ease, transform .2s ease; pointer-events: none; } .lgvp-toggle .lgvp-ico { position: absolute; } /* Which icon is visible */ .lgvp-card:hover .lgvp-toggle .lgvp-ico-pause, .lgvp-card:focus-within .lgvp-toggle .lgvp-ico-pause, .lgvp-card--touched .lgvp-toggle .lgvp-ico-pause { opacity: .9; transform: none; } .lgvp-card--paused .lgvp-toggle .lgvp-ico-pause { opacity: 0 !important; } .lgvp-card--paused .lgvp-toggle .lgvp-ico-play { opacity: .95; transform: none; } .lgvp-card--paused .lgvp-toggle .lgvp-ico-play { /* ring like the reference */ border-radius: 50%; box-shadow: 0 0 0 3px #fff; padding: 6%; box-sizing: border-box; background: rgba(0,0,0,.18); } .lgvp-card--loading .lgvp-toggle .lgvp-ico { opacity: 0; } /* Spinner while the first bytes arrive */ .lgvp-spinner { position: absolute; width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(255,255,255,.35); border-top-color: #fff; opacity: 0; animation: lgvp-spin .8s linear infinite; transition: opacity .2s; } .lgvp-card--loading .lgvp-spinner { opacity: 1; } @keyframes lgvp-spin { to { transform: rotate(360deg); } } /* Sound toggle, bottom right */ .lgvp-sound { position: absolute; right: 8px; bottom: 8px; width: 40px; height: 40px; padding: 0; margin: 0; border: 0; border-radius: 50%; background: rgba(0,0,0,.42); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(4px); transition: opacity .2s, transform .2s, background .2s; -webkit-tap-highlight-color: transparent; z-index: 2; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .lgvp-sound .lgvp-ico { position: static; width: 22px; max-width: none; opacity: 1; transform: none; filter: none; } .lgvp-sound .lgvp-ico-loud { display: none; } .lgvp-sound[aria-pressed="true"] .lgvp-ico-loud { display: block; } .lgvp-sound[aria-pressed="true"] .lgvp-ico-muted { display: none; } .lgvp-sound[aria-pressed="true"] { opacity: 1; transform: none; background: rgba(0,0,0,.6); } .lgvp-card:hover .lgvp-sound, .lgvp-card:focus-within .lgvp-sound, .lgvp-card--touched .lgvp-sound { opacity: 1; transform: none; } .lgvp-sound:hover { background: rgba(0,0,0,.65); } .lgvp-sound:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } /* Touch devices: no hover, so always hint the sound control */ @media (hover: none) { .lgvp-sound { opacity: .8; transform: none; width: 36px; height: 36px; } } /* Reduced motion: no zoom animation */ @media (prefers-reduced-motion: reduce) { .lgvp-card, .lgvp-ico, .lgvp-sound { transition: none; } .lgvp-grid--zoom .lgvp-card:hover { transform: translateZ(0); } } /* Elementor editor: show the outline of the grid area */ .elementor-editor-active .lgvp-empty { padding: 24px; border: 1px dashed #999; text-align: center; } /* ------------------------------------------------------------------ Theme-proofing: themes and Elementor kits style every