/* swup transition begin */ /** * Portfolio video handoff + Swup (listă ↔ single work) */ /* ALEX-FIX: reserve scrollbar gutter to prevent horizontal shift on overflow toggle */ html { scrollbar-gutter: stable; } /* ALEX-FIX: disable Chrome scroll anchoring. On back-handoff the post-return relayout (applyListBoxMinHeights + ScrollTrigger pin spacers) changes the height of content ABOVE the viewport; Chrome silently re-adjusts scrollTop to keep the anchored element fixed, drifting the scroll the manual handoff correction (_D in custom.js) doesn't catch. The drift scales with how many sections sit above the card → jump grows the further down you scroll, and feeds computeOuterProgress wrong → card width snaps small-then-big. Firefox's anchoring is conservative around programmatic scroll so it never showed. */ html, body { overflow-anchor: none; } html.is-handoff-active, body.is-handoff-active { overflow: hidden !important; scroll-behavior: auto !important; } /* Suprascrie style="scroll-behavior: smooth" de pe în timpul handoff */ html.is-handoff-active[style*='scroll-behavior'], html.is-handoff-list-pending[style*='scroll-behavior'] { scroll-behavior: auto !important; } body.is-handoff-active #swup.is-handoff-surface-hidden, html.is-handoff-list-pending #swup, body.is-handoff-list-pending #swup { opacity: 0; visibility: hidden; pointer-events: none; } /* Fundal neutru în timpul fetch-ului listei */ html.is-handoff-list-pending body.is-handoff-active, body.is-handoff-list-pending.is-handoff-active { background: var(--bg, #f4f4f0); } .wire-handoff-backdrop { position: fixed; inset: 0; z-index: 400; background: var(--bg, #f4f4f0); opacity: 0; pointer-events: none; transition: opacity 0.15s ease; } .wire-handoff-backdrop.is-visible { opacity: 1; } /* ALEX-FIX: work overlay — AJAX work content layered on top of the listing (replaces the Swup #swup swap). The listing stays mounted underneath at its exact scroll position. The overlay sits ABOVE the listing content + works filter (z-index 100) but BELOW the masthead (z-index 110), so the site menu + injected back button stay visible and usable — it reads like a normal page load with a persistent header and footer. The flying card (z-index 950 forward / fly-root 9999 on close) animates on top during the open/close transition. */ .wire-work-overlay { position: fixed; inset: 0; z-index: 105; background: #fff; overflow: hidden; } .wire-work-overlay__scroll { position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; /* ALEX-FIX: restore the top gap the old #swup .main-website-content had (padding-top:100px), so the work content sits below the fixed masthead instead of being flush to the top. */ padding-top: 100px; } .admin-bar .wire-work-overlay__scroll { padding-top: 132px; } /* ALEX-FIX: lock background (listing) scroll while the overlay is open. scrollY is preserved because the listing DOM is never touched; html already has scrollbar-gutter: stable (no shift). */ html.wire-overlay-open, body.wire-overlay-open { overflow: hidden !important; } /* FIX-SCROLLING-ISSUE: overlay images-scrolling slider — manual scoped subsystem (window.wireOverlaySlider). The spacer reserves vertical scroll room (the slider section is height:auto !important, so it can't be grown directly); transforms are applied inline by JS. */ #wire-work-overlay .wire-overlay-hslider-spacer { width: 100%; pointer-events: none; } #wire-work-overlay .wire-overlay-hslider-block, #wire-work-overlay .images-scrolling-slider-wrapper .horizontal { will-change: transform; } /* Card în zbor: doar transform pe card, fără position:fixed pe card */ .wire-handoff-fly-root { position: fixed; inset: 0; z-index: 9999; pointer-events: none; overflow: visible; } .wire-handoff-fly-root > .custom-video-container.is-handoff-flying { pointer-events: none; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2); will-change: transform, width, height; backface-visibility: hidden; aspect-ratio: auto !important; } .custom-video-container.is-handoff-flying video.custom-video { width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover !important; object-position: center center !important; background: #000; backface-visibility: hidden; transform: translateZ(0); } /* works single back: același crop ca în listă pe tot parcursul fly/shrink */ .custom-video-container.is-handoff-flying.is-portfolio-exiting video.custom-video, .custom-video-container.is-portfolio-exiting.is-handoff-flying video.custom-video { width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover !important; object-position: center center !important; } body.is-handoff-active .video-scroll-section .custom-video-container:not(.is-handoff-pinned):not(.is-portfolio-exiting) video, body.is-handoff-active .working-listing .custom-video-container:not(.is-handoff-pinned):not(.is-portfolio-exiting) video { visibility: hidden; } .custom-video-container.is-handoff-pinned, .custom-video-container.is-portfolio-exiting { z-index: 500; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2); will-change: top, left, width, height, transform; backface-visibility: hidden; aspect-ratio: auto !important; } /* Back: fullscreen maschează #swup + scroll în spate */ body.is-handoff-list-pending .custom-video-container.is-portfolio-exiting { z-index: 600; } .custom-video-container.is-portfolio-exiting video.custom-video { pointer-events: none; opacity: 1; backface-visibility: hidden; transform: translateZ(0); background: #000; } .custom-video-container.is-handoff-pinned video.custom-video { background: #000; } html.is-handoff-list-pending #swup, body.is-handoff-list-pending #swup { transition: none; } .custom-video-container.is-handoff-target { cursor: default; } .list-video-slot { width: 100%; display: flex; justify-content: center; align-items: flex-start; overflow: visible; } .list-video-slot > .custom-video-container.js-video-expand { position: relative; flex: 0 0 auto; max-width: none; width: 100%; cursor: pointer; } .list-video-slot > .custom-video-container.js-video-handoff .link-wrapper { cursor: pointer; } /* video-scroll-wrapper-list: păstrează margin-bottom (și cu js-video-expand din widget) */ .video-scroll-wrapper-list .list-video-slot > .custom-video-container.js-video-handoff:not(.is-handoff-flying):not(.is-portfolio-exiting):not( .is-portfolio-expanding ) { margin-top: 0 !important; margin-left: auto !important; margin-right: auto !important; margin-bottom: var(--margin-bottom-section) !important; } .video-scroll-wrapper-list .video-media-box.video-scroll-wrapper-outer:last-child .list-video-slot > .custom-video-container.js-video-handoff { margin-bottom: 0; } /* overview works: 15px + aspect-ratio 9/16 din custom.css (fără height inline forțat) */ .working-listing-wrapper-inner .video-scroll-wrapper-single .list-video-slot > .custom-video-container.js-video-handoff:not(.is-handoff-flying):not(.is-portfolio-exiting):not( .is-portfolio-expanding ) { margin-top: 0 !important; margin-left: auto !important; margin-right: auto !important; margin-bottom: 15px !important; aspect-ratio: 9 / 16 !important; height: auto !important; } /* categorie work: video în content-center, 16/9, fără lățime scrub 100vw după back */ .work-category-template .list-video-slot > .custom-video-container.js-video-handoff:not(.is-handoff-flying):not(.is-portfolio-exiting):not( .is-portfolio-expanding ) { width: 100% !important; max-width: none !important; margin: 0 !important; height: auto !important; aspect-ratio: 16 / 9 !important; } .list-video-slot:empty::after { content: ""; display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 16px; background: rgba(0, 0, 0, 0.04); } @media (max-width: 767px) { /* Mobile: list cards are 4/5, keep placeholder consistent during handoff */ .list-video-slot:empty::after { aspect-ratio: 4 / 5; } .wire-handoff-slot-placeholder__spacer { height: var(--wire-handoff-placeholder-h, calc(100vw * 5 / 4)); min-height: var(--wire-handoff-placeholder-h, calc(100vw * 5 / 4)); } } .list-video-slot:has(.wire-handoff-slot-placeholder)::after, .list-video-slot:has(.wire-handoff-slot-placeholder):empty::after { display: none; } /* Host off-screen: măsoară înălțimea cardului din HTML-ul listei fetch-uit */ .wire-handoff-measure-host { position: fixed; left: 0; top: 0; width: 100%; max-width: 100vw; visibility: hidden; pointer-events: none; z-index: -1; overflow: hidden; } .wire-handoff-measure-host .content-center { max-width: var(--content-center, 1040px); margin-left: auto; margin-right: auto; } /* Rezervă layout real în slot — ținta GSAP pe __spacer */ .wire-handoff-slot-placeholder { display: block; width: 100%; max-width: none; flex: 0 0 auto; box-sizing: border-box; margin: 0; overflow: hidden; pointer-events: none; } .wire-handoff-slot-placeholder__spacer { display: block; width: 100%; height: var(--wire-handoff-placeholder-h, 585px); min-height: var(--wire-handoff-placeholder-h, 585px); box-sizing: border-box; } .list-video-slot .wire-handoff-slot-placeholder { position: relative; z-index: 0; } body.is-handoff-active .list-video-slot:empty:not(:has(.wire-handoff-slot-placeholder))::after { display: none; } /* Categorie: distanța 50px e pe anchor — placeholder doar video, fără margin dublat */ .work-category-template .video-scroll-anchor.video-scroll-wrapper { margin-bottom: 50px; } .work-category-template .list-video-slot:empty::after { display: none; } .work-category-template .list-video-slot .wire-handoff-slot-placeholder { margin: 0; } /* Single: slot hero (handoff / Swup) */ .video-scroll-wrapper-outer--fullbleed { width: 100%; max-width: none; margin: 0; padding: 0; } #portfolio-video-slot { position: relative; width: 100%; max-width: none; margin: 0; padding: 0; display: flex; justify-content: center; } #portfolio-video-slot:empty { min-height: 0; } .custom-video-container.js-video-portfolio { width: 100%; max-width: none; margin: 0; aspect-ratio: auto; height: auto; border-radius: 0; box-shadow: none; } .custom-video-container.js-video-portfolio.is-portfolio-expanded { width: 100% !important; max-width: var(--content-center, 1040px) !important; margin-left: auto !important; margin-right: auto !important; border-radius: 16px; } .custom-video-container.js-video-portfolio.is-portfolio-expanding { position: relative; transform-origin: center center; } @media (max-width: 767px) { .custom-video-container.js-video-portfolio.is-portfolio-expanded { width: 100% !important; max-width: 96vw !important; aspect-ratio: 4 / 5 !important; height: auto !important; } } /* Hero duplicat: doar la acces direct URL */ .wire-single-direct-hero { display: none; } /* La acces direct pe /work// — WordPress adauga body.single-work, * deci hero-ul devine vizibil imediat, fara sa depinda de JS pentru FOUC. * Clasa wire-single-direct ramane suportata pentru flow-ul programatic. */ body.single-work .wire-single-direct-hero, body.wire-single-direct .wire-single-direct-hero { display: block; } body.single-work #portfolio-video-slot:empty, body.wire-single-direct #portfolio-video-slot:empty { display: none; } body.wire-portfolio-active .wire-single-direct-hero { display: none !important; } /* Swup */ html.is-changing #swup { transition: opacity 0.2s ease; } html.is-animating #swup { opacity: 1; } /* ALEX-FIX: shell + skeleton loader while single page fetch is pending */ .wire-portfolio-shell { width: 100%; /* ALEX-FIX: reserve height so footer doesn't jump when shell is replaced by real page */ min-height: 100vh; } .wire-portfolio-loading { display: block; width: 100%; max-width: var(--content-center, 1040px); margin: 48px auto; padding: 0 24px; box-sizing: border-box; } .wire-portfolio-loading__row { height: 14px; margin-bottom: 14px; border-radius: 4px; background: linear-gradient( 90deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.05) 100% ); background-size: 200% 100%; animation: wire-skeleton-shimmer 1.4s ease-in-out infinite; } .wire-portfolio-loading__row--short { width: 60%; } .wire-portfolio-loading__row--mid { width: 80%; } @keyframes wire-skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } @media (prefers-reduced-motion: reduce) { .wire-portfolio-loading__row { animation: none; } } /* swup transition end */ .video-scroll-wrapper-outer + .work-content-wrapper { padding-top: 100px; } /* feedback 1.1 */ #portfolio-video-slot .link-wrapper { display: none !important; } @media(max-width:1279px){ .video-scroll-wrapper-outer + .work-content-wrapper { padding-top: 80px; } } @media (max-width: 767px) { .video-scroll-wrapper-outer + .work-content-wrapper { padding-top: 60px; } .custom-video-container.js-video-portfolio .custom-video { width: 100%; height: 100%; max-width: none; object-fit: cover; } /* Transition states: inner video must fully fill fixed/flying card */ .custom-video-container.is-handoff-flying video.custom-video, .custom-video-container.is-handoff-pinned video.custom-video, .custom-video-container.is-portfolio-exiting video.custom-video { width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover !important; } /* Overview → single: fără mobile-badge pe cardul în zbor / hero */ .custom-video-container.is-handoff-flying .mobile-badge, .custom-video-container.is-handoff-pinned .mobile-badge, .custom-video-container.is-handoff-target .mobile-badge, .custom-video-container.is-portfolio-expanding .mobile-badge, .custom-video-container.is-portfolio-expanded .mobile-badge, .custom-video-container.is-portfolio-exiting .mobile-badge, .custom-video-container.js-video-portfolio .mobile-badge, #portfolio-video-slot .mobile-badge { display: none !important; visibility: hidden !important; pointer-events: none !important; } /* .custom-video-container.is-handoff-flying{border: 5px solid red;} .custom-video-container.is-handoff-pinned{border: 5px solid blue;} .custom-video-container.is-portfolio-exiting{border: 5px solid green;} .custom-video-container.is-portfolio-expanded{border: 5px solid yellow;} .custom-video-container.is-portfolio-expanding{border: 5px solid purple;} .custom-video-container.is-handoff-target{border: 5px solid orange;} .custom-video-container.js-video-portfolio{border: 5px solid pink;} .custom-video-container.js-video-expand{border: 5px solid brown;} .custom-video-container.js-video-handoff{border: 5px solid gray;} .custom-video-container.js-video-portfolio.is-portfolio-expanded{border: 5px solid lime;} .custom-video-container.js-video-portfolio.is-portfolio-expanding{border: 5px solid teal;} */ .video-scroll-wrapper-list .list-video-slot > .custom-video-container.js-video-handoff:not(.is-handoff-flying):not(.is-portfolio-exiting):not(.is-portfolio-expanding) { margin-bottom: 0px !important; } .working-listing-wrapper-inner .video-scroll-wrapper-single .list-video-slot > .custom-video-container.js-video-handoff:not(.is-handoff-flying):not(.is-portfolio-exiting):not(.is-portfolio-expanding) { aspect-ratio: 4/5 !important; } .work-category-template .list-video-slot > .custom-video-container.js-video-handoff:not(.is-handoff-flying):not(.is-portfolio-exiting):not(.is-portfolio-expanding) { aspect-ratio: 4/5 !important; } }