/* ACF Portfolio carousel compatibility additions. Load after the existing Benvoo carousel CSS. */ .portfolio-video-carousel-block { position: relative; width: 100%; max-width: none; overflow: hidden; } .demo-label { justify-items: center; } .portfolio-video-carousel-block, .portfolio-video-carousel-block * { box-sizing: border-box; } .portfolio-video-carousel-block .video-carousel, .portfolio-video-carousel-block .video-carousel-stage { min-width: 0; max-width: 100%; } /* The dynamic block uses accessible buttons instead of decorative dots. */ .portfolio-video-carousel-block .video-pagination button { display: block; width: 7px; height: 7px; margin: 0; padding: 0; border: 0; border-radius: 99px; background: #484843; box-shadow: none; cursor: pointer; transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1), background 0.4s ease; } .portfolio-video-carousel-block .video-pagination button.active { width: 30px; background: var(--limon, #d1e55c); } .portfolio-video-carousel-block .video-pagination button:focus-visible { outline: 2px solid var(--limon, #d1e55c); outline-offset: 3px; } /* Ensure every external player fills its clipped video surface. */ .portfolio-video-carousel-block .demo-scene.real-video iframe { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; } /* Benvoo's legacy player has internal gutters around the video surface. Enlarge only Benvoo player iframes and let .demo-scene crop the excess. */ .portfolio-video-carousel-block .demo-scene.real-video iframe.demo-video-iframe--benvoo, .video-gallery .demo-scene.real-video iframe.demo-video-iframe--benvoo { inset: auto !important; top: -12.5% !important; left: -12.5% !important; right: auto !important; bottom: auto !important; width: 125% !important; height: 125% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; } @media (max-width: 620px) { .portfolio-video-carousel-block .video-carousel-stage { overflow: hidden; } .portfolio-video-carousel-block .demo-video { width: calc(100% - 36px) !important; max-width: calc(100% - 36px) !important; } .portfolio-video-carousel-block .demo-video.prev { left: -55% !important; } .portfolio-video-carousel-block .demo-video.next { left: 155% !important; } } @media (prefers-reduced-motion: reduce) { .portfolio-video-carousel-block .demo-video, .portfolio-video-carousel-block .video-pagination button { transition: none !important; } } #examples .section-head { margin-left: auto !important; margin-right: auto !important; } /* FULL-WIDTH PERSONALISED VIDEO CAROUSEL */ .video-gallery{padding-inline:0;overflow:hidden;isolation:isolate}.video-gallery:before{content:"";position:absolute;z-index:-1;width:70vw;height:70vw;left:15%;top:18%;border-radius:50%;filter:blur(75px);animation:section-glow-three 15s ease-in-out infinite alternate}.video-gallery-head{max-width:1050px;margin-inline:auto;text-align:center}.video-gallery-head p{margin-inline:auto}.video-carousel{position:relative;width:100%;min-height:720px;display:flex;align-items:center;justify-content:center}.video-carousel-stage{position:relative;width:100%;height:650px;perspective:1500px}.demo-video{position:absolute;top:50%;left:50%;width:min(68vw,1020px);transform:translate(-50%,-50%) scale(.68);opacity:.32;filter:saturate(.55);transition:transform .9s var(--ease),left .9s var(--ease),opacity .9s ease,filter .9s ease;pointer-events:none}.demo-video.prev{left:3%;transform:translate(-50%,-50%) scale(.68) rotateY(8deg)}.demo-video.next{left:97%;transform:translate(-50%,-50%) scale(.68) rotateY(-8deg)}.demo-video.active{left:50%;z-index:4;transform:translate(-50%,-50%) scale(1);opacity:1;filter:none;pointer-events:auto}.demo-browser{overflow:hidden;border:1px solid rgba(255,255,255,.2);border-radius:24px;background:rgba(18,18,17,.65);backdrop-filter:blur(26px);box-shadow:0 55px 110px -48px #000,0 0 70px -44px rgba(209,229,92,.65)}.demo-browser-bar{display:flex;align-items:center;gap:7px;height:46px;padding:0 16px;border-bottom:1px solid rgba(255,255,255,.1);background:rgba(5,5,5,.38)}.demo-browser-bar>i{width:7px;height:7px;border-radius:50%;background:#555}.demo-browser-bar>i:first-child{background:var(--limon)}.demo-browser-bar>i:nth-child(2){background:var(--seagreen)}.demo-browser-bar span{margin-left:auto;margin-right:auto;padding:6px 18px;border-radius:99px;background:rgba(255,255,255,.055);color:#8d8d87;font-size:10px}.demo-scene{position:relative;aspect-ratio:16/8.5;overflow:hidden;background:#111}.scene-super{background:radial-gradient(circle at 70% 28%,rgba(209,229,92,.3),transparent 35%),linear-gradient(135deg,#101b15,#090a09)}.scene-cover{background:radial-gradient(circle at 68% 30%,rgba(67,249,153,.34),transparent 35%),linear-gradient(135deg,#12241b,#080a08)}.scene-sport{background:radial-gradient(circle at 70% 28%,rgba(209,229,92,.28),transparent 36%),linear-gradient(135deg,#202612,#090a08)}.scene-grid{position:absolute;inset:0;background:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(90deg,transparent,black);animation:grid-move 7s linear infinite}.scene-figure{position:absolute;right:14%;top:17%;width:20%;height:58%;border-radius:48% 48% 28% 28% / 35% 35% 14% 14%;background:linear-gradient(145deg,rgba(255,255,255,.78),rgba(255,255,255,.08));box-shadow:0 0 70px rgba(67,249,153,.2)}.scene-figure:before{content:"";position:absolute;left:50%;top:-22%;translate:-50% 0;width:41%;aspect-ratio:1;border-radius:50%;background:linear-gradient(145deg,#efefe7,#73766f)}.scene-copy{position:absolute;z-index:2;left:8%;top:50%;translate:0 -50%;width:48%}.scene-copy small{color:var(--seagreen);font-size:9px;letter-spacing:.16em}.scene-copy h3{margin-top:13px;font-size:clamp(34px,4vw,64px);line-height:.92}.scene-copy h3 em{font-style:normal;color:var(--limon)}.scene-copy p{margin-top:18px;color:#fff;font-size:clamp(13px,1.2vw,18px)}.scene-copy p strong{color:var(--limon)}.scene-copy a{display:inline-flex;align-items:center;gap:12px;margin-top:24px;padding:12px 16px;border-radius:99px;background:var(--limon);color:#111;font-size:11px;font-weight:800}.scene-copy a i{font-size:9px}.demo-play{position:absolute;z-index:3;left:50%;top:50%;translate:-50% -50%;display:grid;place-items:center;width:68px;height:68px;border-radius:50%;background:rgba(209,229,92,.92);color:#111;box-shadow:0 0 55px rgba(209,229,92,.42);opacity:0;transition:opacity .3s ease}.demo-video:not(.active) .demo-play{opacity:1}.demo-controls{display:flex;align-items:center;gap:14px;height:52px;padding:0 18px;background:#0b0b0a;color:#ddd;font-size:10px}.demo-controls>div{flex:1;height:3px;border-radius:99px;background:#333;overflow:hidden}.demo-controls>div span{display:block;width:10%;height:100%;background:var(--limon);box-shadow:0 0 9px var(--limon)}.demo-video.active .demo-controls>div span{animation:demo-playing 8s linear infinite}.demo-controls time{color:#777}@keyframes demo-playing{from{width:8%}to{width:92%}}.demo-label{display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center;margin:20px 10px 0}.demo-label span{grid-row:1/3;color:var(--seagreen);font:700 11px 'Sora'}.demo-label b{font:600 16px 'Sora'}.demo-label small{color:#777;font-size:10px}.video-nav{position:absolute;z-index:8;top:50%;translate:0 -50%;display:grid;place-items:center;width:58px;height:58px;border:1px solid rgba(255,255,255,.2);border-radius:50%;background:rgba(18,18,17,.68);backdrop-filter:blur(20px);color:#fff;cursor:pointer;transition:background .3s ease,color .3s ease,transform .3s var(--ease)}.video-nav:hover{background:var(--limon);color:#111;transform:scale(1.08)}.video-prev{left:clamp(18px,3vw,55px)}.video-next{right:clamp(18px,3vw,55px)}.video-pagination{display:flex;justify-content:center;gap:8px;margin-top:10px}.video-pagination i{width:7px;height:7px;border-radius:99px;background:#484843;transition:width .4s var(--ease),background .4s ease}.video-pagination i.active{width:30px;background:var(--limon)} @media(max-width:900px){.video-carousel{min-height:580px}.video-carousel-stage{height:520px}.demo-video{width:82vw}.demo-video.prev{left:-16%}.demo-video.next{left:116%}.video-nav{width:50px;height:50px}.scene-copy{left:7%;width:54%}.scene-figure{right:10%;width:25%}} @media(max-width:620px){.video-gallery-head{text-align:left}.video-gallery-head p{margin-inline:0}.video-carousel{min-height:500px}.video-carousel-stage{height:450px}.demo-video{width:90vw}.demo-video.prev{left:-30%}.demo-video.next{left:130%}.demo-browser{border-radius:17px}.demo-browser-bar{height:38px}.demo-browser-bar span{font-size:7px}.demo-scene{aspect-ratio:4/3}.scene-copy{width:64%;top:55%}.scene-copy h3{font-size:34px}.scene-copy p{font-size:11px}.scene-copy a{margin-top:15px;padding:9px 11px;font-size:8px}.scene-figure{right:4%;top:20%;width:30%}.demo-controls{height:44px}.demo-label{margin-top:13px}.video-nav{top:auto;bottom:10px;translate:0 0;width:46px;height:46px}.video-prev{left:calc(50% - 58px)}.video-next{right:calc(50% - 58px)}.video-pagination{display:none}} /* ========================================================= VIEW MORE EXAMPLES ========================================================= */ .video-more-examples { display: flex; justify-content: center; width: 100%; margin-top: clamp(34px, 4vw, 54px); } .video-more-examples-button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 15px 24px; color: var(--ink, #161616); background: var(--limon, #d1e55c); border: 1px solid rgba(209, 229, 92, .6); border-radius: 999px; font-family: "Sora", sans-serif; font-size: 14px; font-weight: 650; line-height: 1; letter-spacing: -.02em; text-decoration: none; box-shadow: 0 12px 34px -18px rgba(209, 229, 92, .7), 0 0 0 rgba(67, 249, 153, 0); transition: transform .35s cubic-bezier(.16, 1, .3, 1), background .3s ease, box-shadow .35s ease; } .video-more-examples-button i { font-size: 12px; transition: transform .35s cubic-bezier(.16, 1, .3, 1); } .video-more-examples-button:hover { color: var(--ink, #161616); background: var(--seagreen, #43f999); transform: translateY(-3px); box-shadow: 0 18px 42px -18px rgba(67, 249, 153, .8), 0 0 28px rgba(67, 249, 153, .12); text-decoration: none; } .video-more-examples-button:hover i { transform: translateX(4px); } .video-more-examples-button:focus-visible { outline: 2px solid #fff; outline-offset: 4px; } @media (max-width: 600px) { .video-more-examples { margin-top: 30px; } .video-more-examples-button { padding: 14px 20px; font-size: 13px; } }