/* ========================================================= JIANI STUDIO — SELECTED WORKS Full framed image behind the project titles This file must be loaded only on /selected-works/ ========================================================= */ .selected-works-page { --sw-page-bg: #ffffff; --sw-text: #111111; --sw-text-on-image: #ffffff; --sw-text-dimmed: rgba(255, 255, 255, 0.42); --sw-frame-gap: clamp(18px, 1.7vw, 32px); --sw-padding-x: clamp(24px, 4vw, 72px); --sw-padding-top: clamp(28px, 4vw, 58px); --sw-padding-bottom: clamp(54px, 7vw, 100px); } /* --------------------------------------------------------- Default white canvas --------------------------------------------------------- */ html, body, #page, .site, .site-main, main#content { background-color: #ffffff; } body:has(.selected-works-page), body:has(.selected-works-page) #page, body:has(.selected-works-page) .site, body:has(.selected-works-page) .site-main, body:has(.selected-works-page) main#content, body:has(.selected-works-page) .elementor-location-single, body:has(.selected-works-page) .elementor-location-archive { background-color: #ffffff !important; background-image: none !important; } /* --------------------------------------------------------- Header --------------------------------------------------------- */ body:has(.selected-works-page) .elementor-location-header, body:has(.selected-works-page) #site-header, body:has(.selected-works-page) .site-header { position: relative; z-index: 300 !important; width: 100%; margin: 0 !important; background-color: #ffffff !important; background-image: none !important; } /* --------------------------------------------------------- Main page --------------------------------------------------------- */ .selected-works-page { position: relative; z-index: 120; display: block !important; width: 100% !important; max-width: none !important; min-height: 100svh; margin: 0 !important; padding: var(--sw-padding-top) var(--sw-padding-x) var(--sw-padding-bottom) !important; overflow: visible !important; isolation: auto !important; background-color: var(--sw-page-bg) !important; background-image: none !important; transition: background-color 180ms ease; } /* * The page must become transparent while the body-level * preview is open, otherwise its white background covers it. */ .selected-works-page.is-previewing { background-color: transparent !important; } /* Elementor wrappers inside the page */ .selected-works-page > .e-con-inner { display: block !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } .selected-works-page > .elementor-element, .selected-works-page > .e-con-inner > .elementor-element, .works-content, .works-content > .e-con-inner, .works-list, .dynamic-works-grid, .dynamic-works-grid .elementor-loop-container, .dynamic-works-grid .e-loop-item, .work-item, .work-heading-row, .work-title, .work-location { background-color: transparent !important; background-image: none !important; } /* --------------------------------------------------------- New independent preview layer JavaScript creates this directly under . --------------------------------------------------------- */ .sw-preview { position: fixed !important; top: var(--sw-preview-top, 110px) !important; right: var(--sw-preview-gap, 24px) !important; bottom: var(--sw-preview-gap, 24px) !important; left: var(--sw-preview-gap, 24px) !important; display: block !important; width: auto !important; max-width: none !important; height: auto !important; max-height: none !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; pointer-events: none !important; opacity: 0; visibility: hidden; transform: translate3d(0, 8px, 0) scale(0.995); transition: opacity 180ms ease, visibility 0s linear 180ms, transform 500ms cubic-bezier(.16, 1, .3, 1); background-color: #111111; z-index: 100 !important; } body.sw-preview-open .sw-preview { opacity: 1; visibility: visible; transform: translate3d(0, 0, 0) scale(1); transition-delay: 0s; } .sw-preview__image { position: absolute; inset: 0; display: block; width: 100%; height: 100%; margin: 0; padding: 0; object-fit: cover; object-position: center center; opacity: 0; transform: scale(1.025) translateZ(0); transition: opacity 360ms ease, transform 850ms cubic-bezier(.16, 1, .3, 1); backface-visibility: hidden; will-change: opacity, transform; } body.sw-preview-open .sw-preview__image.is-ready { opacity: 1; transform: scale(1) translateZ(0); } /* * Disable the old Elementor preview elements completely. * They are no longer used, so their nesting and z-index * cannot break the new preview. */ .works-background, .works-overlay, .works-background-layer { display: none !important; } /* --------------------------------------------------------- Content stays above the preview --------------------------------------------------------- */ .works-content { position: relative; z-index: 140; width: 100% !important; max-width: 100% !important; min-width: 0; margin: 0 !important; padding: 0 !important; } .works-content > .e-con-inner { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } /* --------------------------------------------------------- Page label --------------------------------------------------------- */ .works-label { position: relative; z-index: 145; width: fit-content; max-width: 100%; margin: 0 !important; padding: 0 !important; } .works-label, .works-label *, .works-label .elementor-heading-title, .works-label .elementor-heading-title a { color: var(--sw-text) !important; transition: color 220ms ease, text-shadow 220ms ease; } .selected-works-page.is-previewing .works-label, .selected-works-page.is-previewing .works-label *, .selected-works-page.is-previewing .works-label .elementor-heading-title, .selected-works-page.is-previewing .works-label .elementor-heading-title a { color: var(--sw-text-on-image) !important; text-shadow: 0 1px 20px rgba(0, 0, 0, 0.28); } /* --------------------------------------------------------- Projects list and Loop Grid --------------------------------------------------------- */ .works-list { position: relative; z-index: 145; width: 100% !important; max-width: 100% !important; min-width: 0; margin: 0 !important; padding: clamp(24px, 4vw, 54px) 0 clamp(48px, 7vw, 96px) !important; } .dynamic-works-grid { position: relative; z-index: 145; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; } .dynamic-works-grid .elementor-loop-container { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; align-items: flex-start !important; justify-content: flex-start !important; grid-template-columns: none !important; width: 100% !important; max-width: 100% !important; gap: 0 !important; margin: 0 !important; padding: 0 !important; } .dynamic-works-grid .e-loop-item { position: relative; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; } .dynamic-works-grid .e-loop-item + .e-loop-item { margin-top: 5px !important; } /* --------------------------------------------------------- Individual project --------------------------------------------------------- */ .work-item { position: relative; z-index: 150; display: block; width: fit-content !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; opacity: 1 !important; transform: translate3d(0, 0, 0); transition: transform 600ms cubic-bezier(.16, 1, .3, 1); cursor: pointer; } .work-item.is-hovered, .work-item.is-active, .work-item:hover, .work-item:focus-within { transform: translate3d(12px, 0, 0) !important; } /* --------------------------------------------------------- Project title --------------------------------------------------------- */ .work-title { position: relative; display: block; width: fit-content !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; } .work-title .elementor-widget-container { margin: 0 !important; padding: 0 !important; } .work-title .elementor-heading-title { margin: 0 !important; padding: 0 !important; color: var(--sw-text) !important; font-size: clamp(34px, 4.4vw, 72px); font-weight: 400; line-height: 1.02; letter-spacing: -0.035em; opacity: 1 !important; transition: color 220ms ease, opacity 220ms ease, text-shadow 220ms ease; } .work-title .elementor-heading-title a { display: block; color: inherit !important; text-decoration: none !important; outline: none; } /* All titles sit on top of the image */ .selected-works-page.is-previewing .work-title .elementor-heading-title { color: var(--sw-text-dimmed) !important; text-shadow: 0 1px 22px rgba(0, 0, 0, 0.34); } /* Current project */ .selected-works-page.is-previewing .work-item.is-hovered .work-title .elementor-heading-title, .selected-works-page.is-previewing .work-item.is-active .work-title .elementor-heading-title { color: var(--sw-text-on-image) !important; opacity: 1 !important; } .work-title .elementor-heading-title a:focus-visible { outline: 1px solid currentColor; outline-offset: 6px; } /* --------------------------------------------------------- Optional project location --------------------------------------------------------- */ .work-location { position: relative; width: fit-content; max-width: 100%; margin: 0 !important; padding: 0 !important; } .work-location .elementor-widget-container { margin: 0 !important; padding: 0 !important; } .work-location, .work-location *, .work-location .elementor-heading-title, .work-location .elementor-heading-title a { color: var(--sw-text) !important; transition: color 220ms ease, text-shadow 220ms ease; } .work-location .elementor-heading-title { margin: 0 !important; padding: 0 !important; font-size: clamp(16px, 1.5vw, 24px); font-weight: 400; line-height: 1.15; letter-spacing: -0.01em; } .selected-works-page.is-previewing .work-location, .selected-works-page.is-previewing .work-location *, .selected-works-page.is-previewing .work-location .elementor-heading-title, .selected-works-page.is-previewing .work-location .elementor-heading-title a { color: var(--sw-text-dimmed) !important; text-shadow: 0 1px 18px rgba(0, 0, 0, 0.32); } .selected-works-page.is-previewing .work-item.is-hovered .work-location .elementor-heading-title, .selected-works-page.is-previewing .work-item.is-active .work-location .elementor-heading-title { color: var(--sw-text-on-image) !important; } .work-heading-row { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: baseline !important; justify-content: flex-start !important; width: fit-content !important; max-width: 100% !important; gap: 8px !important; margin: 0 !important; padding: 0 !important; } /* --------------------------------------------------------- Hidden Featured Image source --------------------------------------------------------- */ .work-background-source { position: absolute !important; width: 1px !important; max-width: 1px !important; min-width: 1px !important; height: 1px !important; max-height: 1px !important; min-height: 1px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } .work-background-source .elementor-widget-container, .work-background-source img { display: block !important; width: 1px !important; max-width: 1px !important; min-width: 1px !important; height: 1px !important; max-height: 1px !important; min-height: 1px !important; margin: 0 !important; padding: 0 !important; opacity: 0 !important; } /* --------------------------------------------------------- Bottom links --------------------------------------------------------- */ .works-bottom-links { position: relative; z-index: 145; display: flex; flex-direction: row; justify-content: space-between; align-items: center; width: 100%; margin: 0 !important; padding: 0 !important; } .works-bottom-links, .works-bottom-links * { color: var(--sw-text) !important; } .selected-works-page.is-previewing .works-bottom-links, .selected-works-page.is-previewing .works-bottom-links * { color: var(--sw-text-on-image) !important; text-shadow: 0 1px 20px rgba(0, 0, 0, 0.28); } /* --------------------------------------------------------- Tablet --------------------------------------------------------- */ @media (max-width: 1180px) and (min-width: 768px) { .selected-works-page { --sw-padding-x: 28px; } .work-title .elementor-heading-title { font-size: clamp(32px, 5.5vw, 58px); } .work-location .elementor-heading-title { font-size: clamp(16px, 2vw, 22px); } } /* --------------------------------------------------------- Mobile / touch --------------------------------------------------------- */ @media (max-width: 767px), (hover: none) { .sw-preview { display: none !important; } .selected-works-page, .selected-works-page.is-previewing { min-height: 100svh; padding: 28px 20px 56px !important; background-color: #ffffff !important; } .works-content, .works-list { width: 100% !important; max-width: 100% !important; } .works-list { padding-top: 28px !important; padding-bottom: 56px !important; } .dynamic-works-grid .elementor-loop-container { align-items: stretch !important; } .dynamic-works-grid .e-loop-item { width: 100% !important; } .dynamic-works-grid .e-loop-item + .e-loop-item { margin-top: 13px !important; } .work-item, .work-item:hover, .work-item:focus-within, .work-item.is-active, .work-item.is-hovered { width: 100% !important; opacity: 1 !important; transform: none !important; } .works-label, .works-label *, .work-title .elementor-heading-title, .work-location, .work-location *, .work-location .elementor-heading-title, .works-bottom-links, .works-bottom-links * { color: var(--sw-text) !important; text-shadow: none !important; } .work-title { width: 100% !important; } .work-title .elementor-heading-title { font-size: clamp(29px, 9.5vw, 46px); line-height: 1.06; letter-spacing: -0.025em; } .work-location .elementor-heading-title { font-size: 16px; line-height: 1.2; } .work-heading-row { width: 100% !important; gap: 5px !important; } .works-bottom-links { flex-direction: column; align-items: flex-start; gap: 14px; } } /* --------------------------------------------------------- Reduced motion --------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .sw-preview, .sw-preview__image, .work-item, .work-title .elementor-heading-title { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } } /* ========================================================= FIXED VIEWPORT — ALL DEVICES The page itself never scrolls. Only the project-title list scrolls. ========================================================= */ html.sw-selected-works-lock, body.sw-selected-works-lock { width: 100%; height: 100%; overflow: hidden !important; overscroll-behavior: none !important; } body.sw-selected-works-lock #page, body.sw-selected-works-lock .site, body.sw-selected-works-lock .site-main, body.sw-selected-works-lock main#content { height: 100svh !important; min-height: 100svh !important; max-height: 100svh !important; overflow: hidden !important; overscroll-behavior: none !important; } .selected-works-page { height: var( --sw-page-height, calc(100svh - 96px) ) !important; min-height: 0 !important; max-height: var( --sw-page-height, calc(100svh - 96px) ) !important; padding-bottom: 0 !important; overflow: hidden !important; } .works-content { display: flex !important; flex-direction: column !important; height: 100% !important; min-height: 0 !important; overflow: hidden !important; } .works-content > .e-con-inner { display: flex !important; flex-direction: column !important; width: 100% !important; height: 100% !important; min-height: 0 !important; overflow: hidden !important; } .works-label { flex: 0 0 auto !important; } .works-list { flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; overflow-x: hidden !important; overscroll-behavior: contain !important; -webkit-overflow-scrolling: touch; touch-action: pan-y; padding-top: clamp(24px, 4vh, 56px) !important; padding-bottom: clamp(110px, 15vh, 190px) !important; scroll-padding-top: clamp(24px, 4vh, 56px); scroll-padding-bottom: clamp(110px, 15vh, 190px); scrollbar-width: none; -ms-overflow-style: none; } .works-list::-webkit-scrollbar { display: none; width: 0; height: 0; } .dynamic-works-grid { flex: 0 0 auto; } .works-bottom-links { flex: 0 0 auto; padding-top: clamp(14px, 2vh, 28px) !important; padding-bottom: clamp(18px, 2.5vh, 36px) !important; } /* --------------------------------------------------------- Tablet --------------------------------------------------------- */ @media (max-width: 1180px) { .selected-works-page { padding-top: clamp(14px, 2.2vh, 24px) !important; padding-right: 28px !important; padding-left: 28px !important; } .works-list { padding-top: clamp(14px, 2.2vh, 24px) !important; padding-bottom: clamp(86px, 12vh, 140px) !important; scroll-padding-top: clamp(14px, 2.2vh, 24px); scroll-padding-bottom: clamp(86px, 12vh, 140px); } } /* --------------------------------------------------------- Mobile --------------------------------------------------------- */ @media (max-width: 767px), (hover: none) { .selected-works-page, .selected-works-page.is-previewing { height: var( --sw-page-height, calc(100svh - 72px) ) !important; min-height: 0 !important; max-height: var( --sw-page-height, calc(100svh - 72px) ) !important; padding: clamp(8px, 1.5vh, 14px) 18px 0 !important; overflow: hidden !important; background-color: #ffffff !important; } .works-content, .works-content > .e-con-inner { height: 100% !important; min-height: 0 !important; overflow: hidden !important; } .works-label { margin: 0 !important; padding: 0 !important; } .works-list { min-height: 0 !important; overflow-y: auto !important; overflow-x: hidden !important; padding-top: clamp(10px, 2vh, 18px) !important; padding-bottom: clamp(74px, 11vh, 112px) !important; scroll-padding-top: clamp(10px, 2vh, 18px); scroll-padding-bottom: clamp(74px, 11vh, 112px); -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; } .dynamic-works-grid .e-loop-item + .e-loop-item { margin-top: 9px !important; } .works-bottom-links { padding-top: 10px !important; padding-bottom: 14px !important; } }