/* Theme Name: Twenty Twenty Five Child Theme Author: M Description: Child of Twenty Twenty Five Theme Version: 1.0 Template: twentytwentyfive This is the child theme for Twenty Twenty-Five theme, generated with Generate Child Theme plugin by catchthemes. (optional values you can add: Theme URI, Author URI, License, License URI, Tags, Text Domain) */ /* ================================================ SCROLLING ON ANCHOR =============================================== */ .wp-block-group[id], section[id], div[id] { scroll-margin-bottom: 120px; } .anchor-dots-nav { position: fixed; top: 50%; right: 40px; transform: translateY(-50%); z-index: 999999; } .anchor-dots-nav-list { display: flex; flex-direction: column; gap: 20px; margin: 0; padding: 0; list-style: none; } .anchor-dots-nav-item { margin: 0; padding: 0; } .anchor-dots-nav-dot { position: relative; width: 10px; height: 10px; border: 0; padding: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.65); cursor: pointer; appearance: none; -webkit-appearance: none; transition: transform 0.25s ease, background-color 0.25s ease, opacity 0.25s ease; } .anchor-dots-nav-dot:hover { transform: scale(1.15); background: rgba(255, 255, 255, 0.95); } .anchor-dots-nav-dot::after { content: ""; position: absolute; top: 50%; left: 50%; width: 22px; height: 22px; border: 1px solid rgba(255, 255, 255, 0); border-radius: 50%; transform: translate(-50%, -50%) scale(0.9); transition: border-color 0.25s ease, transform 0.25s ease, opacity 0.25s ease; opacity: 0; pointer-events: none; } .anchor-dots-nav-dot.is-active { background: #ffffff; } .anchor-dots-nav-dot.is-active::after { border-color: rgba(255, 255, 255, 0.95); transform: translate(-50%, -50%) scale(1); opacity: 1; } @media (max-width: 768px) { .anchor-dots-nav { display:none!important; } } /*@media (max-width: 767px) { .anchor-dots-nav { right: 11px; } .anchor-dots-nav-list { gap: 35px; } .anchor-dots-nav-dot { width: 7px; height: 7px; } .anchor-dots-nav-dot::after { width: 12px; height: 12px; } }*/ /* ============================================================================================================================================================================ */ /* ================================================ MAUAL MENUS SHORTCODES =========================== ================================================ /* ============================================================================================================================================================================ */ /* ================================================ SWAP DESKTOP / MOBILE MENUS =============================================== */ .site-header-solid-desktop-nav { display: flex; align-items: center; } .site-header-solid-mobile-nav-wrap { display: none; align-items: center; } @media (max-width: 767px) { .site-header-solid-desktop-nav { display: none; } .site-header-solid-mobile-nav-wrap { display: flex; align-items: center; } } /* ================================================ CUSTOM NAVIGATION MENU SYSTEM (MANUAL 100% NO EDITOR BLOCKS) =============================================== */ body.single-portfolio .site-header-solid-submenu { padding-top: 20px; padding-bottom: 20px; } /* HEADER BASE */ .site-header-solid { width: 100%; height: 80px; background: rgba(34, 34, 34, 0.65); backdrop-filter: blur(6px); z-index: 99999999; } /* HEADER BASE - HOMA PAGE TRANSPARENT BG */ body.home .site-header-solid { z-index: 999999999999999!important; position: relative; margin-bottom:-100px!important; background:transparent!important; backdrop-filter: blur(0px)!important; } /* WRAPPER */ .site-header-solid-wrapper { display: flex; justify-content: space-between; align-items: center; height: 80px; width: 100%; padding-left: 24px; padding-right: 24px; box-sizing: border-box; z-index: 99999999; } /* LOGO */ .wp-block-group.site-header-solid-branding { display: flex; align-items: center; height: 100%; z-index: 99999999; } .site-logo { display: flex; align-items: center; height: 100%; } .site-logo img { width: 40px; height: 40px; object-fit: contain; display: block; } /* NAV BASE */ .site-header-solid-nav { display: flex; align-items: center; height: 100%; z-index: 99999999; } /* MENU RESET */ .site-header-solid-menu, .site-header-solid-submenu { list-style: none; margin: 0; padding: 0; } /* MAIN MENU */ .site-header-solid-menu { display: flex; align-items: center; justify-content: center; gap: 52px; height: 100%; margin: 0; } /* MENU ITEMS */ .site-header-solid-menu-item { position: relative; display: flex; justify-content: center; height: 30px; } /* TYPOGRAPHY */ .site-header-solid-menu-item > a { display: inline-flex; align-items: center; justify-content: center; height: 20px; line-height: 1; text-transform: uppercase; font-family: "Futura PT"; font-weight: 400; color: #ffffff; font-style: normal; text-decoration: none; font-size: 14px; letter-spacing: 2px; transition: color 0.25s ease, transform 0.25s ease, opacity 0.25s ease; transform: scale(1); transform-origin: center; } /* MENU HOVER */ .site-header-solid-menu-item > a:hover { color: #d6d6d6; /* transform: scale(1.1);*/ } /* ACTIVE MAIN MENU ITEM */ .site-header-solid-menu-item.is-active > a, .site-header-solid-menu-item.is-active-ancestor > a { color: #aaa; } /* KEEP ACTIVE COLOR ON HOVER */ .site-header-solid-menu-item.is-active > a:hover, .site-header-solid-menu-item.is-active-ancestor > a:hover { color: #aaa; } /* SUBMENU */ .site-header-solid-submenu { position: absolute; top: calc(100% + 10px); left: 50%; min-width: 220px; padding-bottom: 20px; border-radius: 10px; background: rgb(47 47 47 / 75%); backdrop-filter: blur(38px); -webkit-backdrop-filter: blur(38px); opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(12px); transition: opacity 0.28s ease, transform 0.28s ease, visibility 0.28s ease; text-align: center; } /* SHOW SUBMENU */ .site-header-solid-submenu { border-radius: 10px; } .site-header-solid-menu-item-has-children:hover .site-header-solid-submenu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); border-radius: 10px; } /* SUBMENU LINKS */ .site-header-solid-submenu li a { display: block; padding: 16px; font-style: normal; font-size: 14px; font-family: "Futura PT"; font-weight: 400; text-transform: uppercase; color: #ffffff; text-decoration: none; white-space: nowrap; letter-spacing: 2px; line-height: 1.1; text-align: center; transition: color 0.25s ease, transform 0.25s ease, background-color 0.25s ease; transform: scale(1); transform-origin: center; } /* SUBMENU LINK HOVER */ .site-header-solid-submenu li a:hover { color: #d6d6d6; /*transform: scale(1.1);*/ } /* ACTIVE SUBMENU ITEM */ .site-header-solid-submenu li.is-active > a, .site-header-solid-submenu li a.is-active { color: #aaa; } /* KEEP ACTIVE SUBMENU COLOR ON HOVER */ .site-header-solid-submenu li.is-active > a:hover, .site-header-solid-submenu li a.is-active:hover { color: #aaa; } /* ================================================ CUSTOM MOBILE NAVIGATION MENU =============================================== */ .site-header-mobile-nav { display: flex; align-items: center; position: relative; z-index: 99999999; } .site-header-mobile-toggle { width: 48px; height: 48px; padding: 0; border: 0; background: transparent; display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; cursor: pointer; } .site-header-mobile-toggle-line { display: block; width: 24px; height: 2px; background: #ffffff; transition: transform 0.3s ease, opacity 0.3s ease; } .site-header-mobile-toggle.open .site-header-mobile-toggle-line:nth-child(1) { transform: translateY(8px) rotate(45deg); } .site-header-mobile-toggle.open .site-header-mobile-toggle-line:nth-child(2) { opacity: 0; } .site-header-mobile-toggle.open .site-header-mobile-toggle-line:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } .site-header-mobile-overlay { position: fixed; inset: 0; z-index: 999999999; } .site-header-mobile-backdrop { position: absolute; inset: 0; border: 0; background: rgba(0, 0, 0, 0.45); cursor: pointer; padding: 0; } .site-header-mobile-drawer { position: absolute; top: 0; right: 0; width: 80vw; max-width: 480px; height: 100vh; background: #2d2d2d; transform: translateX(100%); transition: transform 0.35s ease; box-shadow: -10px 0 30px rgba(0, 0, 0, 0.35); overflow-y: auto; } .site-header-mobile-nav.is-open .site-header-mobile-drawer { transform: translateX(0); } .site-header-mobile-drawer-inner { min-height: 100%; padding: 24px 24px 40px; box-sizing: border-box; display: flex; flex-direction: column; } .site-header-mobile-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; } .site-header-mobile-logo { display: flex; align-items: center; justify-content: flex-start; min-height: 50px; } .site-header-mobile-logo .custom-logo, .site-header-mobile-logo img { width: 50px !important; height: 50px !important; object-fit: contain; display: block; } .site-header-mobile-close { position: relative; width: 40px; height: 40px; border: 0; background: transparent; padding: 0; cursor: pointer; } .site-header-mobile-close span { position: absolute; top: 50%; left: 50%; width: 22px; height: 2px; background: #ffffff; transform-origin: center; } .site-header-mobile-close span:first-child { transform: translate(-50%, -50%) rotate(45deg); } .site-header-mobile-close span:last-child { transform: translate(-50%, -50%) rotate(-45deg); } .site-header-mobile-menu, .site-header-mobile-submenu { list-style: none; margin: 0; padding: 0; } .site-header-mobile-menu { display: flex; flex-direction: column; gap: 2px; } .site-header-mobile-menu-item { display: flex; flex-direction: column; padding: 0; } .site-header-mobile-menu-item:not(:last-child) { border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .site-header-mobile-menu-parent { display: flex; flex-direction: column; } .site-header-mobile-menu-link, .site-header-mobile-menu-parent > span { display: block; padding: 14px 0; font-family: "Futura PT", "FuturaPT", sans-serif; font-size: 14px; font-weight: 400; line-height: 1.2; letter-spacing: 2px; text-transform: uppercase; color: #ffffff; text-decoration: none; } .site-header-mobile-submenu { padding: 0 0 8px 18px; display: flex; flex-direction: column; gap: 2px; } .site-header-mobile-submenu-link { display: block; padding: 8px 0; font-family: "Futura PT", "FuturaPT", sans-serif; font-size: 13px; font-weight: 400; line-height: 1.2; letter-spacing: 1.5px; text-transform: uppercase; color: #ffffff; text-decoration: none; opacity: 0.88; } .site-header-mobile-menu-item.is-active > .site-header-mobile-menu-link, .site-header-mobile-menu-item.is-active-ancestor > .site-header-mobile-menu-link, .site-header-mobile-submenu-item.is-active > .site-header-mobile-submenu-link, .site-header-mobile-submenu-link.is-active { color: #aaaaaa; } .site-header-mobile-menu-link:hover, .site-header-mobile-submenu-link:hover { color: #d6d6d6; } body.mobile-menu-is-open { overflow: hidden; } /* ================================================ CUSTOM MOBILE MENU - BURGER BUTTON =============================================== */ .site-header-mobile-burger { position: fixed; top: 20px; right: 15px; width: 34px; height: 34px; display: flex; justify-content: center; align-items: center; cursor: pointer; background: transparent; border: 0; padding: 0; z-index: 1000000001; appearance: none; -webkit-appearance: none; outline: none; box-shadow: none; -webkit-tap-highlight-color: transparent; transform: scale(1,0.9); } .site-header-mobile-burger:focus, .site-header-mobile-burger:focus-visible, .site-header-mobile-burger:hover, .site-header-mobile-burger:active { outline: none !important; box-shadow: none !important; background: transparent !important; border: 0 !important; } .site-header-mobile-burger .menu-btn__burger { position: relative; width: 24px; height: 2px; background: #ffffff; border-radius: 2px; transition: all 0.25s ease-in-out; display: block; } .site-header-mobile-burger .menu-btn__burger::before, .site-header-mobile-burger .menu-btn__burger::after { content: ''; position: absolute; left: 0; width: 24px; height: 2px; background: #ffffff; border-radius: 2px; transition: all 0.25s ease-in-out; } .site-header-mobile-burger .menu-btn__burger::before { transform: translateY(-10px); } .site-header-mobile-burger .menu-btn__burger::after { transform: translateY(10px); } /* animated open state */ .site-header-mobile-burger.open .menu-btn__burger { background: transparent; transform: translateX(-10px); } .site-header-mobile-burger.open .menu-btn__burger::before { transform: rotate(45deg) translate(7px, -7px); } .site-header-mobile-burger.open .menu-btn__burger::after { transform: rotate(-45deg) translate(7px, 7px); } /* ================================================ CUSTOM MOBILE MENU - REMOVE BUTTON / TAP HIGHLIGHTS ================================================ */ /* close button */ .site-header-mobile-close, .site-header-mobile-close:hover, .site-header-mobile-close:active, .site-header-mobile-close:focus, .site-header-mobile-close:focus-visible { background: transparent !important; border: 0 !important; outline: none !important; box-shadow: none !important; appearance: none !important; -webkit-appearance: none !important; -webkit-tap-highlight-color: transparent !important; } /* 20% clickable backdrop area */ .site-header-mobile-backdrop, .site-header-mobile-backdrop:hover, .site-header-mobile-backdrop:active, .site-header-mobile-backdrop:focus, .site-header-mobile-backdrop:focus-visible { border: 0 !important; outline: none !important; box-shadow: none !important; appearance: none !important; -webkit-appearance: none !important; -webkit-tap-highlight-color: none !important; } /* keep the backdrop visually invisible except for your chosen dark overlay */ .site-header-mobile-backdrop { background: none !important; } /* optional: remove generic button highlight inside the whole mobile nav */ .site-header-mobile-nav button, .site-header-mobile-nav button:hover, .site-header-mobile-nav button:active, .site-header-mobile-nav button:focus, .site-header-mobile-nav button:focus-visible { outline: none !important; box-shadow: none !important; -webkit-tap-highlight-color: none !important; } /* ============================================================================================================================================================================ */ /* ================================================ PORTFOLIO CPT CUSTOM STYLE - SINGLE TEMPLATE =========================== ================================================ /* ============================================================================================================================================================================ */ /* ================================================ SINGLE-PORTFOLIO //// HEADER & FOOTER FIXES =============================================== */ /* Portfolio header adjustments*/ .single-portfolio .site-header--transparent .wp-block-group, .single-portfolio .site-header--transparent header, .single-portfolio .site-header--transparent .wp-block-columns { max-width: 100vw; justify-content: space-between; } .single-portfolio .navLg { display:none;} @media (min-width: 782px) { .single-portfolio .navSmWrap { display: none;} .single-portfolio .navLg {display: flex;} } .navSm .wp-block-navigation__responsive-container.is-menu-open { display: block !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; position: fixed !important; inset: 0 !important; z-index: 999999 !important; } /* Portfolio footer adjustments*/ .single-portfolio .wp-block-group{ max-width: 100vw; justify-content: space-between!important; } .single-portfolio .footerWrap .custom-footer-transparent { display: none; } .single-portfolio .footerWrap .custom-footer-stack { display: flex; flex-direction: column; } @media (max-width: 768px) { .single-portfolio .footerWrap .custom-footer-transparent { display: none; } .single-portfolio .footerWrap .custom-footer-stack { display: flex; flex-direction: column; } } /* Portfolio header overlay like homepage */ .single-portfolio .site-header-transparent{ z-index: 999999999999999!important; position: relative; margin-bottom:-100px!important; top: 0; left: 0; right: 0; background: transparent; } /* Avoid the header being constrained by container widths */ .single-portfolio .site-header-transparent .wp-block-group, .single-portfolio .site-header-transparent header, .single-portfolio .site-header-transparent .wp-block-columns{ max-width: none; } /* ================================================ SINGLE-PORTFOLIO //// HERO IMAGE + TITLE =============================================== */ .single-portfolio .portfolio-hero{ position: relative; width: 100%; max-height: 500px; height: 500px; /* fixed hero height */ overflow: hidden; margin: 0; /* remove theme spacing if any */ margin-top: -100px; } @media (max-width: 768px){ .single-portfolio .portfolio-hero{ height: 250px; max-height: 250px; } } .portfolio-hero{ position: relative; height: 80vh; background-size: cover; background-position: center; background-repeat: no-repeat; /* parallax */ background-attachment: fixed; } /* optional cinematic darkening for readability */ .single-portfolio .portfolio-hero-overlay{ position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(0,0,0,.45), rgba(0,0,0,.15) 45%, rgba(0,0,0,.55) ); } /* center the title */ .single-portfolio .portfolio-hero-inner{ position: relative; display: grid; place-items: center; margin-top: 12%; text-align: center; } @media (max-width:1200px) { .single-portfolio .portfolio-hero-inner{ margin-top: 150px; padding-left: 15px; padding-right: 15px; text-align: center; } } @media (max-width:768px) { .single-portfolio .portfolio-hero-inner{ margin-top: 90px; padding-left: 15px; padding-right: 15px; text-align: center; } } .portfolio-hero-client { font-family: "Futura PT", sans-serif; color: #ddd; font-weight: 400; font-size: 28px; line-height: 1.2; margin-bottom: 0px; opacity: 0.9; /*mix-blend-mode: exclusion;*/ } @media (max-width:1200px) { .portfolio-hero-client { font-size: 18px; font-weight: 400; } } @media (max-width:768px) { .portfolio-hero-client { font-size: 13px; font-weight: 400; } } .single-portfolio .portfolio-hero-title{ margin: 0; font-size: 54px; font-weight: 400; line-height: 1.05; letter-spacing: 3px; } @media (max-width: 1200px){ .single-portfolio .portfolio-hero-title{ font-size: 45px; padding-bottom: 0px; font-weight: 400; } } @media (max-width: 768px){ .single-portfolio .portfolio-hero-title{ font-size: 25px; padding-bottom: 0px; font-weight: 400; } } /* fix shape doubletriangle ... gap in single-post page*/ .divider-shape { margin-top: 3px; margin-left: -1px; margin-right: -1px; } .divider-shape-reverse { margin-bottom: 3px; margin-left: -1px; margin-right: -1px; } /* ================================================ SINGLE-PORTFOLIO //// VIDEOS CAROUSEL =============================================== */ /* ================================================ SINGLE-PORTFOLIO //// VIDEOS CAROUSEL =============================================== */ .portfolio-video-carousel-box { position: relative; width: 100vw; height: 500px; margin: 10px 0; overflow: hidden; left: 50%; transform: translateX(-50%); background: #111111; } .portfolio-main-videos:empty { display: none; } .portfolio-video-carousel-box:has(.portfolio-main-videos:empty) { display: none; } .portfolio-main-videos { position: relative; width: 100%; height: 100%; } .portfolio-main-videos-item { position: absolute; top: 50%; left: 50%; width: 780px; max-width: 80vw; height: 440px; display: flex; align-items: center; justify-content: center; border-radius: 16px; overflow: hidden; background: #111111; transition: transform 0.4s ease, opacity 0.4s ease, filter 0.4s ease; opacity: 0.45; filter: brightness(0.55); will-change: transform, opacity, filter; } .portfolio-main-videos-item.is-active { opacity: 1; filter: brightness(1); } .portfolio-main-videos-item.is-side { opacity: 0.65; filter: brightness(0.7); } .portfolio-main-videos-item.is-fade { opacity: 0.28; filter: brightness(0.45); } .portfolio-main-videos-item.is-hidden { opacity: 0; pointer-events: none; } .portfolio-main-videos-item iframe { width: 100%; height: 100%; border: 0; display: block; border-radius: 5px; background: #000; } .portfolio-video-carousel-box::before, .portfolio-video-carousel-box::after { content: ""; position: absolute; top: 0; width: 140px; height: 100%; z-index: 3; pointer-events: none; } .portfolio-video-carousel-box::before { left: 0; background: linear-gradient(to right, rgba(17,17,17,1) 0%, rgba(17,17,17,0.65) 100%); } .portfolio-video-carousel-box::after { right: 0; background: linear-gradient(to left, rgba(17,17,17,1) 0%, rgba(17,17,17,0.65) 100%); } /* arrows */ .portfolio-video-carousel-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 60px; height: 60px; border: 0; border-radius: 5px; background: rgba(34, 34, 34, 0.65); cursor: pointer; z-index: 99999999999; display: flex; align-items: center; justify-content: center; transition: background 0.25s ease, opacity 0.25s ease; backdrop-filter: blur(6px); } .portfolio-video-carousel-arrow:hover { background: rgba(0, 0, 0, 0.85); background-color: #648e97; } .portfolio-video-carousel-arrow-left { left: 24px; } .portfolio-video-carousel-arrow-right { right: 24px; } .portfolio-video-carousel-arrow img { width: 28px; height: 28px; object-fit: contain; display: block; transition: transform 0.25s ease, opacity 0.25s ease; pointer-events: none; } .portfolio-video-carousel-arrow-left:hover img { transform: translateX(10px); } .portfolio-video-carousel-arrow-right:hover img { transform: translateX(-10px); } .portfolio-video-carousel-arrow:active { opacity: 0.9; } @media (max-width: 1200px) { .portfolio-video-carousel-box { height: 440px; } .portfolio-main-videos-item { width: 680px; height: 380px; } } @media (max-width: 900px) { .portfolio-video-carousel-box { height: 360px; } .portfolio-main-videos-item { width: 78vw; height: 300px; } .portfolio-video-carousel-arrow { width: 46px; height: 46px; } .portfolio-video-carousel-arrow img { width: 24px; height: 24px; } } @media (max-width: 768px) { .portfolio-related-projects-gallery { --related-item-expand-side: 0px; --related-gallery-arrow-size: 44px; --related-gallery-side-padding: 56px; max-width: calc(100vw - 16px); padding-top: 24px; padding-bottom: 24px; } .portfolio-related-projects-gallery-track { justify-content: center; gap: 8px; } .portfolio-related-projects-gallery-item { flex: 0 0 22vw; width: 22vw; min-height: 180px; max-height: 180px; transform: none; transition: transform 0.35s ease, opacity 0.35s ease, filter 0.35s ease, width 0.35s ease; } .portfolio-related-projects-gallery-item.is-mobile-side { flex-basis: 14vw; width: 14vw; opacity: 0.75; filter: brightness(0.8); } .portfolio-related-projects-gallery-item.is-mobile-center { flex-basis: min(44vw, 210px); width: min(44vw, 210px); z-index: 20; } .portfolio-related-projects-gallery-item.is-mobile-center img { left: 0; width: 100%; opacity: 0.96; filter: brightness(0.78); } .portfolio-related-projects-gallery-item.is-mobile-center .portfolio-related-projects-gallery-overlay { left: 0; width: 100%; opacity: 1; } .portfolio-related-projects-gallery-item.is-mobile-side .portfolio-related-projects-gallery-overlay { opacity: 0; } .portfolio-related-projects-gallery-item.is-shift-left, .portfolio-related-projects-gallery-item.is-shift-right { transform: none; } .portfolio-related-projects-gallery-arrow-left { left: 10px; } .portfolio-related-projects-gallery-arrow-right { right: 10px; } .portfolio-related-projects-gallery-arrow img { width: 22px; height: 22px; } .portfolio-related-projects-gallery-title { font-size: 12px; } .portfolio-related-projects-gallery-client { font-size: 10px; } } /* ================================================ SINGLE-PORTFOLIO //// PROJECT DESCRIPTION BLOCK =============================================== */ //* ================================ Portfolio Info (desktop only) ================================ */ /* FULL WIDTH WRAPPER */ .single-portfolio .portfolio-description-box{ width: 100%; padding: 70px 0 90px; } /* CENTERED INNER CONTAINER */ .single-portfolio .portfolio-info{ width: 850px; max-width: 80%; margin: 0 auto; /* THIS is the important part */ color: #fff; } /* stop “click/shrink” interactions globally in this block */ .single-portfolio .portfolio-description-box *{ -webkit-tap-highlight-color: transparent; } .single-portfolio .portfolio-description-box a, .single-portfolio .portfolio-description-box button, .single-portfolio .portfolio-description-box [role="button"]{ transform: unset !important; } .single-portfolio .portfolio-description-box a:active, .single-portfolio .portfolio-description-box button:active, .single-portfolio .portfolio-description-box [role="button"]:active{ transform: unset !important; } .portfolio-client-id{ font-family: "Futura PT", sans-serif; color: rgb(204, 204, 204); font-weight: 400; font-size: calc(15px); line-height: 1.2; margin-bottom: 0px; } .portfolio-info-category { font-family: 'Futura PT', sans-serif; color: #fff; font-weight: 400; font-style: italic; font-size: clamp(10px, 13px, 18px); line-height: 1.2; margin-bottom: 0px; text-transform: Capitalize; } .portfolio-info-year { font-family: 'Futura PT', sans-serif; color: #fff; font-weight: 400; font-size: clamp(12px, 15px, 20px); line-height: 1.2; margin-bottom: 0px; } /* top row */ .single-portfolio .portfolio-info-top{ display: flex; justify-content: space-between; align-items: center; gap: 18px; } @media (max-width: 768px){ .single-portfolio .portfolio-project-title-id { font-size: 17px; } .single-portfolio .portfolio-client-id { font-size: 12px; } } .single-portfolio .portfolio-info-project-heading{ /*visibility: hidden;*/ font-family: "Futura PT", sans-serif; font-size: 23px; letter-spacing: 3px; line-height: normal; text-transform: uppercase; font-weight: 400; opacity: 1; align-self: end; } .single-portfolio .portfolio-info-studio{ display: flex; align-items: center; gap: 10px; opacity: .95; } .single-portfolio .portfolio-info-studio-logo{ width: 80px; height: 80px; object-fit: contain; object-position: bottom; padding-bottom:10px; display: block; } @media (max-width: 768px){ .single-portfolio .portfolio-info-studio-logo { width: 60px; height: 60px; } } .single-portfolio .portfolio-info-studio-name{ font-family: "Futura PT", sans-serif; font-size: 18px; letter-spacing: .06em; text-transform: lowercase; } /*----- PORTFOLIO HEADING SECTION -------- */ .portfolio-section-heading-box{ padding-top: 40px; width: 850px; max-width: 80%; margin: 0 auto; color: #fff; } .portfolio-section-title{ font-family: "Futura PT", sans-serif; font-size: 18px; letter-spacing: 3px; line-height: normal; text-transform: uppercase; font-weight: 400; opacity: 1; align-self: end; } /* divider line */ .single-portfolio .portfolio-info-divider{ margin-top: 10px; border-top: 2px solid #5D5D5D; } /*----- -----------------------------------------------------------*/ /* meta row */ .single-portfolio .portfolio-info-meta{ margin-top: 14px; display: flex; justify-content: space-between; align-items: center; gap: 18px; font-family: "Futura PT", sans-serif; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; opacity: .85; } /* grid */ .single-portfolio .portfolio-info-grid{ margin-top: 26px; display: grid; grid-template-columns: 1.55fr 1fr; gap: 40px; } @media (max-width: 768px){ .single-portfolio .portfolio-info-grid{ grid-template-columns: none; } } /* left blocks */ .single-portfolio .portfolio-block{ margin-bottom: 26px; } .single-portfolio .portfolio-label{ font-family: "Futura PT", sans-serif; font-size: 12px; letter-spacing: 1.5px; color: #aaa; font-weight: 400; text-transform: none!important; font-style: italic; opacity: 1; } .single-portfolio .portfolio-text{ color: rgba(255,255,255,.70); font-size: 13px; line-height: 1.7; padding-top: 10px; } .rm-text { --rm-collapsed: 300px; /* change this */ overflow: hidden; max-height: var(--rm-collapsed); transition: max-height 0.4s ease; } .rm-text .rm-more { /* keep it in the DOM so scrollHeight includes it */ } .rm-text.expanded { /* max-height will be set inline by JS for perfect animation */ } .single-portfolio .portfolio-readmore{ margin-top: 10px; text-align: right; font-size: 12px; color: rgba(255,255,255,.55); } /* key/value credits */ .single-portfolio .portfolio-kv{ display: grid; gap: 10px; margin-top: 20px; } .single-portfolio .portfolio-kv-row{ display: flex; grid-template-columns: 150px 1fr; gap: 12px; align-items: baseline; } /*.single-portfolio .portfolio-kv__k{ font-family: "Futura PT", sans-serif; font-size: 14px; letter-spacing: 1.5px; color: #aaa; font-weight: 400; font-style: italic; opacity: 1; }*/ .single-portfolio .portfolio-kv-v{ font-family: "Futura PT", sans-serif; font-size: 16px; letter-spacing: 1.5px; font-weight: 400; text-transform: uppercase; color: #fff; } /* credits button */ .portfolio-full-credit { display: flex; justify-content: center; } .wp-element-button.portfolio-credits-btn{ margin-top: 20px; margin-bottom: 20px; } .wp-element-button.portfolio-credits-btn:hover{ transform: scale(0.95)!important; } /* right card */ .single-portfolio .portfolio-card{ background: #2D2D2D; border-radius: 0px 18px 18px 0px; padding: 40px; box-shadow: 8px 8px 8px rgba(0,0,0,0.5); } @media (max-width: 768px) { .single-portfolio .portfolio-card { border-radius: 18px!important; } } .single-portfolio .portfolio-role{ font-family: "Futura PT", sans-serif; font-size: 15px; letter-spacing: 3px; text-transform: uppercase; color: #fff; font-weight: 400; margin: 0; } /* tools */ .single-portfolio .portfolio-tools{ margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.18); } .single-portfolio .portfolio-tools__label{ font-family: "Futura PT", sans-serif; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; opacity: .65; margin-bottom: 12px; } .single-portfolio .portfolio-tools-row{ display: flex; gap: 18px; align-items: flex-end; padding: 10px 0 10px 0; } .single-portfolio .tool-badge{ display: grid; gap: 6px; justify-items: center; } .single-portfolio .tool-badge-img{ width: 35px; height: 35px; object-fit: contain; display: block; opacity: .9; } @media (max-width:768) { tool-badge-img { width: 25px!important; height: 25px!important; } } .single-portfolio .tool-badge-name{ font-family: "Futura PT", sans-serif; font-size: 9px; letter-spacing: .18em; text-transform: uppercase; opacity: .7; } /* ----------------------------- * CREDITS WRAPPER CONTAINER * ----------------------------*/ .portfolio-credits-wrapper { height: auto; background-color: #1D1D1D; border-style: none; border-color: rgba(255,255,255,0.2); border-radius: 10px; border-width: 1px; overflow: hidden; max-height: 0; opacity: 0; transition: max-height 300ms ease, opacity 300ms ease; will-change: max-height, opacity; margin-top:20px; padding: 0px; font-family: "Futura PT", sans-serif; color: rgba(255,255,255,.70); font-size: 13px; line-height: 1.7; padding-top: 10px; } .portfolio-credits-wrapper.is-open{ opacity: 1; padding-top: 50px; padding-bottom: 50px; padding-left: 20px; padding-right: 20px; box-shadow: inset 0px 4px 4px 0px rgba(0, 0, 0, 0.41); } .single-portfolio-credits-grid{ display: grid; grid-template-columns: 260px 1fr; column-gap: 48px; row-gap: 10px; align-items: start; } .single-portfolio-credits-role{ font-weight: 700; text-transform: uppercase; letter-spacing: .02em; } .single-portfolio-credits-people{ display: grid; row-gap: 4px; } .single-portfolio-credits-person{ line-height: 1.25; } /* ----------------------------- * CREDITS GRID 3 COLUMNS * ----------------------------*/ /* MAIN GRID: responsive columns */ .single-portfolio-credits-grid{ display: grid; gap: 28px; width: 100%; max-width: 100%; } /* 1 column by default (mobile-first) */ .single-portfolio-credits-grid{ grid-template-columns: 1fr; } /* 2 columns on medium screens */ @media (min-width: 768px){ .single-portfolio-credits-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* 3 columns only when there's enough space */ @media (min-width: 1200px){ .single-portfolio-credits-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* EACH SECTION: role | people */ .single-portfolio-credits-section{ display: grid; grid-template-columns: minmax(120px, 38%) minmax(0, 1fr); column-gap: 16px; row-gap: 4px; align-items: start; margin-left: -60px; min-width: 0; /* critical so text can wrap instead of forcing overflow */ } .single-portfolio-credits-role{ text-align: right; text-transform: capitalize ; min-width: 0; overflow-wrap: anywhere; font-family: "Futura PT", sans-serif; font-size: 12px; letter-spacing: 1.5px; color: #aaa; font-weight: 400; font-style: italic; opacity: 1; } .single-portfolio-credits-people{ display: grid; row-gap: 2px; min-width: 0; } .single-portfolio-credits-person{ line-height: 1.5; min-width: 0; overflow-wrap: anywhere; font-family: "Futura PT", sans-serif; font-size: 13px; letter-spacing: 1.5px; font-weight: 200; text-transform: uppercase; color: #fff; } /* -------------------------------------------------------------------- */ /* ------------ RELATED PROJECT SECTION ----------- */ /* ------------------------------------------------------------------- */ .portfolio-related-projects { width: 850px; max-width: 80%; min-height: 100px; margin: 0 auto; box-sizing: border-box; background-color: #111111; /*padding: 28px 32px;*/ padding-top: 50px; padding-bottom: 50px; display: flex; align-items: stretch; justify-content: space-between; gap: 24px; flex-wrap: nowrap; } .portfolio-related-projects a { display: flex; flex-direction: column; justify-content: center; gap: 10px; width: 100%; min-height: 100%; text-decoration: none; color: inherit; transition: opacity 0.25s ease; } .portfolio-related-projects a:hover { opacity: 0.85; } .portfolio-related-previous, .portfolio-related-gallery, .portfolio-related-next { flex: 1 1 0; min-width: 0; display: flex; align-items: center; } .portfolio-related-previous { justify-content: flex-start; } .portfolio-related-gallery { justify-content: center; } .portfolio-related-next { justify-content: flex-end; } .portfolio-related-previous a { align-items: flex-start; text-align: left; } .portfolio-related-gallery a { align-items: center; text-align: center; } .portfolio-related-next a { align-items: flex-end; text-align: right; } .portfolio-related-label { font-size: 9px; line-height: 1.2; padding-left: 30px; padding-right:30px; text-transform: uppercase; letter-spacing: 0.08em; color: #aaa; } .portfolio-related-button-content { display: flex; align-items: center; justify-content: center; gap: 12px; transition: transform 0.25s ease; transform-origin: center center; } .portfolio-related-meta-prev { justify-content: flex-start; } .portfolio-related-meta-next { justify-content: flex-end; } .portfolio-related-project-name { max-width: 100%; overflow-wrap: anywhere; } .portfolio-related-button-content-gallery { gap: 0; } .portfolio-related-meta-prev { justify-content: center; } .portfolio-related-meta-next { justify-content: center; } .portfolio-related-project-name { font-size: 14px; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.08em; color: #ffffff; white-space: nowrap; } .portfolio-related-project-name: hover{ font-size: 14px; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.08em; color: #ffffff; white-space: nowrap; } .portfolio-related-icon { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; } .portfolio-related-icon img { display: block; width: 100%; height: 100%; object-fit: contain; } .portfolio-related-gallery-icon { position: relative; } .portfolio-related-gallery-icon img { position: absolute; inset: 0; transition: opacity 0.25s ease; } .portfolio-related-gallery-icon-default { opacity: 1; } .portfolio-related-gallery-icon-hover { opacity: 0; } .portfolio-related-gallery a:hover .portfolio-related-gallery-icon-default, .portfolio-related-gallery a:focus-visible .portfolio-related-gallery-icon-default { opacity: 0; } .portfolio-related-gallery a:hover .portfolio-related-gallery-icon-hover, .portfolio-related-gallery a:focus-visible .portfolio-related-gallery-icon-hover { opacity: 1; } .portfolio-related-projects a:hover .portfolio-related-button-content { transform: scale(0.88); } /* ============================================================================================================================================================================ */ /* ================================================ HOME PAGE HERO COVER OVERLAY =========================================================================== */ /* ============================================================================================================================================================================ */ .my-hero-cover { position: relative; overflow: hidden; } .my-hero-cover::before { content: ""; position: absolute; inset: 0; background-image: url("https://milomassacci.com/wp-content/uploads/2025/12/diagonal-lines_v001-01.png"); background-size: 320px auto; /* smaller pattern */ background-position: top left; background-repeat: repeat; mix-blend-mode: overlay; opacity: 0.7; pointer-events: none; z-index: 1; } .my-hero-cover .wp-block-cover__inner-container { position: relative; z-index: 2; } /* ============================================================================================================================================================================ */ /* ================================================ HEADER & FOOTER RULES =========================================================================== */ /* ============================================================================================================================================================================ */ /* ================================================ * HEADERS AND FOOTERS RULS ALL PAGE ================================================ */ /*---------- SWAP NAVIGATION MENU PRIMARY TO MOBILE -------------*/ .navLg { display:none;} @media (min-width: 768px) { .navSmWrap { display: none; } .navLg { display: flex; } } .wp-block-group.custom-home-header-solid.menuWrapInner, .wp-block-group.custom-home-header-transparent.menuWrapInner { padding-left: 20px!important; padding-right: 20px!important; } /*---------- SWAP FOOTER FOR MOBILE -------------*/ .footerWrap .custom-footer-stack { display: none; } @media (max-width: 768px) { .footerWrap .custom-footer-transparent { display: none; } .footerWrap .custom-footer-stack { display: flex; } } /* ---------- HOME PAGE EXCEPTION ---------- */ @media (max-width: 768px) { body.home .footerWrap .custom-footer-transparent, body.front-page .footerWrap .custom-footer-transparent { display: flex; } body.home .footerWrap .custom-footer-stack, body.front-page .footerWrap .custom-footer-stack { display: none; } } /*----------HOME PAGE OVERFLOW -------------*/ body.home { overflow-y: hidden; } /*------ HEADER RULES FOR HOME PAGE ------------*/ body.home .custom-home-header-transparent { z-index: 999999999999999!important; position: relative; margin-bottom:-100px!important; } /*---------- STICKY HEADER ----------------*/ .menuWrapInner { background-color: transparent; transition: background-color 0.3s ease; } .menuWrapInner.scrolled { background: rgba(34, 34, 34, 0.65); backdrop-filter: blur(6px); } .aboutCover { margin-top: -100px!important; } /*.custom-home-header-solid.menuWrapInner.is-scrolled { background-color: rgb(6 21 28 / 80%); backdrop-filter: blur(8px); }*/ /*------ FOOTER RULES FOR HOME PAGE ------------*/ body.home .custom-footer-transparent { position: relative; margin-top: -80px; background: transparent; padding-bottom: 0px; z-index: 99999!important; } .rights-footer-transparent { font-size: 8px!important; } /*------ FOOTER RULES FOR HOME PAGE ON MOBILE ------------*/ @media (max-width: 768px) { body.home .custom-footer-transparent { justify-content: center; } .custom-footer-transparent { min-height: 50%!important; } .rights-footer-transparent { font-size: 8px!important; } } /*----- HEADER RULES ON ABOUT PAGE (page-id-211)--------*/ body.page-id-211 .wp-block-group.custom-home-header-transparent { z-index: 999999999999999!important; position: relative; margin-bottom:-100px!important; } /* ================================================ ================================================ ================================================ ================================================ /* ================================================ ================================================ ================================================ ================================================ /* ================================================ ================================================ ================================================ ================================================ /* ================================================ ================================================ ================================================ ================================================ /* ================================================ ================================================ ================================================ ================================================ /* ================================================ ================================================ ================================================ ================================================ /*--------------------------------------------------- * REMOVE HIGHLITED SQUARE POINTER ON "X" in Iphone * ------------------------------------------------*/ /* Close button of the Navigation overlay (Twenty Twenty-Five / block navigation) */ .wp-block-navigation__responsive-container-close, .wp-block-navigation__responsive-container-close:focus, .wp-block-navigation__responsive-container-close:active { background: transparent !important; box-shadow: none !important; outline: none !important; } /* Keep accessibility: only hide the focus style when it's NOT keyboard focus */ .wp-block-navigation__responsive-container-close:focus:not(:focus-visible) { outline: none !important; box-shadow: none !important; } .wp-block-navigation__responsive-container-close { -webkit-tap-highlight-color: transparent; } .wp-block-navigation-item { background-color: transparent!important; } .wp-block-navigation .has-child .wp-block-navigation__submenu-container>.wp-block-navigation-item>.wp-block-navigation-item__content { display: flex; flex-grow: 1; /* padding: .5em 1em; */ padding: 12px; } .wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item:not(:last-child) { margin-bottom: -5px!important; } .wp-block-navigation-item__label { font-size: 14px!important; } /* ================================================ ABOUT PAGE - BUTTON "+" EXPANDING WORKING EXPERIENCE (shared styles for old + new generic toggle) ================================================ */ /* Button wrapper: stacks circle + label vertically and centers */ .working-experience-timeline .we-toggle, .we-toggle.we-toggle--target { background: transparent; border: 0; padding: 50px; cursor: pointer; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; /* text closer to icon */ margin: 0 auto; color: #fff; font-family: "FuturaPT", "Futura PT", Futura, system-ui, sans-serif; transition: opacity 0.2s ease; transform: scale(0.85); /* 15% smaller */ transform-origin: center; } /* Center inside Gutenberg group (old layout helper) */ .working-experience-timeline { text-align: center; } .we-toggle:hover { opacity: 1; } .we-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 6px; } /* Plus icon inside a circular button */ .we-icon { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 2px solid #fff; border-radius: 999px; background-color: transparent; /* SVG icon */ background-repeat: no-repeat; background-position: center; background-size: 20px 20px; transition: border-color 0.8s ease; /* Default (closed) = PLUS */ background-image: url("https://milomassacci.com/wp-content/uploads/2026/02/we-plus.svg"); } /* When open → show MINUS */ .we-toggle[aria-expanded="true"] .we-icon { background-image: url("https://milomassacci.com/wp-content/uploads/2026/02/we-minus.svg"); } /* Hover/focus: border disappears */ .we-toggle:hover .we-icon, .we-toggle:focus-visible .we-icon { border-color: transparent; } /* On hover/focus: border disappears (only plus + text remains) */ .we-toggle:hover .we-icon, .we-toggle:focus-visible .we-icon { border-color: transparent; } /* Optical centering for the minus only */ .we-icon { position: relative; } .we-toggle[aria-expanded="true"] .we-icon { transform: translateY(2px); } /* Label hidden by default; slides DOWN when appearing */ .we-label { max-height: 0; overflow: hidden; opacity: 0; transform: translateY(-10px); font-size: 18px; font-weight: 200; text-transform: uppercase; letter-spacing: 0.08em; line-height: 1; transition: max-height 0.8s ease, opacity 0.8s ease, transform 0.8s ease; } /* Reveal label by sliding down */ .we-toggle:hover .we-label, .we-toggle:focus-visible .we-label { max-height: 40px; /* enough for one line */ opacity: 1; transform: translateY(0); } /* ================================================ OLD SYSTEM (keep your existing working-experience) SLIDE-DOWN ANIMATION FOR WORKING EXPERIENCE ================================================ */ body:not(.block-editor-page) .working-experience { display: block !important; /* needed for animation */ max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.8s ease, opacity 0.6s ease; } body:not(.block-editor-page) .working-experience.we-is-open { max-height: 10000px; opacity: 1; } /* ================================================ NEW GENERIC SYSTEM Any expandable panel must have class "we-panel" plus your custom class (target) ================================================ */ body:not(.block-editor-page) .we-panel { display: block !important; /* needed for animation */ max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.8s ease, opacity 0.6s ease; } body:not(.block-editor-page) .we-panel.we-is-open { max-height: 10000px; opacity: 1; } /* ================================================ FORCE MOBILE BEHAVIOR (<= 1150px) ================================================ */ /* Desktop default */ .working-experience-mobile { display: none !important; } @media (max-width: 1150px) { /* Old: Always hide desktop expanded experience on mobile */ body:not(.block-editor-page) .working-experience, body:not(.block-editor-page) .working-experience.we-is-open { display: none !important; max-height: none; opacity: 1; } /* New generic: you can choose to force-hide all generic panels on mobile */ body:not(.block-editor-page) .we-panel, body:not(.block-editor-page) .we-panel.we-is-open { display: none !important; max-height: none; opacity: 1; } /* Hide the timeline + button (your existing behavior) */ .working-experience-timeline { display: none !important; } /* Show the mobile-specific block */ .working-experience-mobile { display: block !important; } } /* ================================================ SLIDEUP AND SLIDEDONW ANIMATIONS ================================================ */ /* Base animation slidedown */ .slidedown { opacity: 0; transform: translateY(-50px); animation-name: slideDownFade; animation-duration: 2s; animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1); /* Easy Ease */ animation-fill-mode: forwards; } /* Stagger .slidedown:nth-child(1) { animation-delay: 0.05s; } .slidedown:nth-child(2) { animation-delay: 0.15s; } .slidedown:nth-child(3) { animation-delay: 0.25s; } .slidedown:nth-child(4) { animation-delay: 0.35s; } .slidedown:nth-child(5) { animation-delay: 0.45s; } .slidedown:nth-child(6) { animation-delay: 0.55s; } .slidedown:nth-child(7) { animation-delay: 0.65s; } .slidedown:nth-child(8) { animation-delay: 0.75s; } .slidedown:nth-child(9) { animation-delay: 0.85s; } .slidedown:nth-child(10) { animation-delay: 0.95s; } .slidedown:nth-child(11) { animation-delay: 1.05s; } .slidedown:nth-child(12) { animation-delay: 1.15s; } */ /* Animation keyframes */ @keyframes slideDownFade { to { opacity: 1; transform: translateY(0); } } /* Base animation slideup */ .slideup { opacity: 0; transform: translateY(50px); animation-name: slideUpFade; animation-duration: 2s; animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1); /* Easy Ease */ animation-fill-mode: forwards; } /* Stagger .slideup:nth-child(1) { animation-delay: 0.05s; } .slideup:nth-child(2) { animation-delay: 0.15s; } .slideup:nth-child(3) { animation-delay: 0.25s; } .slideup:nth-child(4) { animation-delay: 0.35s; } .slideup:nth-child(5) { animation-delay: 0.45s; } .slideup:nth-child(6) { animation-delay: 0.55s; } .slideup:nth-child(7) { animation-delay: 0.65s; } .slideup:nth-child(8) { animation-delay: 0.75s; } .slideup:nth-child(9) { animation-delay: 0.85s; } .slideup:nth-child(10) { animation-delay: 0.95s; } .slideup:nth-child(11) { animation-delay: 1.05s; } .slideup:nth-child(12) { animation-delay: 1.15s; } */ /* Animation keyframes */ @keyframes slideUpFade { to { opacity: 1; transform: translateY(0); } } /* ================================================ SUBMENU - NO WRAPPING + AUTO EXPAND ================================================ */ /* Distance navigation menu items*/ .wp-block-navigation.items-justified-right { gap: 60px; } /* Prevent text from wrapping */ .wp-block-navigation .wp-block-navigation__submenu-container a { white-space: nowrap !important; justify-content: center !important; text-align: center !important; } /* Make submenu container expand to fit text */ .wp-block-navigation .wp-block-navigation__submenu-container { width: auto !important; /* let it expand automatically */ min-width: 250px; /* optional: ensures minimum width */ max-width: 800px; /* optional: prevents it from being too wide */ text-align: center !important; /*align submenu on the right side*/ left: 50% !important; transform: translateX(-50%); background-color: rgb(47 47 47 / 69%) !important; border-radius: 5px; /*box-shadow: 5px 5px 8px rgba(0,0,0,0.5);*/ backdrop-filter: blur(8px); } /* Optional: prevent line breaking inside submenu li items */ .wp-block-navigation .wp-block-navigation__submenu-container li { white-space: nowrap !important; } .wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container { background-color: #fff; border: 0px solid #00000026; } /* ================================================ MOBILE MENU NAVIGATION ALIGN FIXES ================================================ */ @media (max-width: 768px) { /* -------- X CLOSING BUTTON PADDING -----*/ .single-portfolio .wp-block-navigation__responsive-container-close, .wp-block-navigation__responsive-container-close { padding: 24px 20px; } } /* ================================================ TITLES HOME PAGE MIX-BLENDING ================================================ */ .titles-home { mix-blend-mode: difference; } @media (max-width:768px) { .titles-home { padding-bottom: 10px; } } /* ================================================ ACTIVE / CURRENT MENU ITEM = RED ================================================ */ /* Parent items with submenus should NEVER turn red */ .wp-block-navigation > .wp-block-navigation-item.current-menu-parent > a, .wp-block-navigation > .wp-block-navigation-item.current-menu-ancestor > a, .wp-block-navigation > .wp-block-navigation-item.current_page_parent > a, .wp-block-navigation > .wp-block-navigation-item.current_page_ancestor > a { color: #919fa3 !important; font-weight: 400; } /* Only active submenu items */ .wp-block-navigation__submenu-container .wp-block-navigation-item.current-menu-item > a, .wp-block-navigation__submenu-container .wp-block-navigation-item.current_page_item > a { color: #aaa !important; } /* ================================================ ABOUT PAGE - DIVIDER SHAPES TRIANGLES ================================================ */ /*SHAPES DIVIDER FOR DECORATION*/ #doubletriangle { background-color: #111111; width: 100%; height: 200px; margin-top: -200px; z-index: 3; position: relative; clip-path: polygon(0 100%, 34% 48%, 76% 66%, 100% 44%, 100% 100%); } #doubletriangle_reverse { background-color: #111111; width: 100%; height: 200px; margin-bottom: -200px; z-index: 3; position: relative; clip-path: polygon(0 0, 0% 50%, 40% 30%, 73% 50%, 100% 30%, 100% 0); } .dividerShapeGrp-up { margin-top: 1px; } .dividerShapeGrp-down { margin-bottom: 1px; } /*SHAPES DIVIDER FOR DECORATION on MOBILE*/ @media (max-width: 768px) { #doubletriangle { height: 150px; margin-top: -150px; /*visibility: hidden;*/ } #doubletriangle_reverse { height: 150px; margin-bottom: -150px; /*visibility: hidden;*/ } } /* ================================================ ABOUT PAGE - IMAGE SWAP ON HOVER =============================================== */ .aboutImg { position: relative; background-image: url('https://milomassacci.com/wp-content/uploads/2025/10/Foto-Guille-2023-10-04-153004-edited.png'); background-size: cover; background-position: center; border-radius: 5px; transform-origin: center; overflow: hidden; } .aboutImg::after { content: ""; position: absolute; inset: 0; background-image: url('https://milomassacci.com/wp-content/uploads/2026/02/MiloFrame.png'); background-size: cover; background-position: top; opacity: 0; transition: opacity 0.4s ease; } .aboutImg:hover::after { opacity: 1; } /* ================================================ ABOUT PAGE - SUMMARY ARROW ICON ================================================ */ /*-------------SUMMARY RIGHT----------------------*/ /* Only Details blocks with the custom class */ details.summary-right > summary { display: flex; align-items: center; cursor: pointer; list-style: none; } /* Hide ALL default markers */ details.summary-right > summary::marker { content: ""; } details.summary-right > summary::-webkit-details-marker { display: none; } /* Make summary text take full width */ details.summary-right > summary .wp-block-details__summary-text { flex: 1; } /* Custom arrow (same visual size as default) */ details.summary-right > summary::after { content: ""; width: 2em; height: 2em; margin-left: auto; /* CSS triangle */ clip-path: polygon( 35% 20%, 85% 50%, 35% 80% ); transition: transform 0.2s ease; } /* Rotate when open */ details.summary-right[open] > summary::after { transform: rotate(90deg); } /*----------SUMMARY LEFT----------------*/ /* Only Details blocks with the custom class */ details.summary-left > summary { display: flex; align-items: center; cursor: pointer; list-style: none; } /* Hide ALL default markers */ details.summary-left > summary::marker { content: ""; } details.summary-left > summary::-webkit-details-marker { display: none; } /* Make summary text take full width */ details.summary-left > summary .wp-block-details__summary-text { flex: 1; } /* Custom arrow (same visual size as default) */ details.summary-left > summary::after { content: ""; width: 2em; height: 2em; margin-right: 0; background-color: currentColor; /* CSS triangle */ clip-path: polygon( 65% 20%, 15% 50%, 65% 80% ); transition: transform 0.2s ease; } /* Rotate when open */ details.summary-left[open] > summary::after { transform: rotate(-90deg); } /* ================================================ ABOUT PAGE - FIXES FOR MOBILE ================================================ */ @media (max-width: 768px) { .aboutHeadingWrapper{ margin-top: 40px!important; } .aboutMe { padding-left: 50px!important; padding-right: 50px!important; } .spacerContact { display:none!important; } .dividerShapeGrp-up{ margin-top: -200px!important; } /*.wp-block-cover__image-background.wp-image-324.size-large.has-parallax{ height:800px; }*/ .wp-block-cover.alignfull.has-parallax.coverAbout.wp-duotone-unset-2{ min-height: 800px!important; } .wp-block-spacer.aboutme-spacer{ height: 40px!important; } @media (max-width: 768px) { .wp-block-spacer.aboutme-spacer{ height: 80px!important; } } .wp-container-core-group-is-layout-0255843b > :where(:not(.alignleft):not(.alignright):not(.alignfull)) { max-width: 300px; margin-left: auto !important; margin-right: auto !important; } .wp-block-heading.has-text-align-center.textIam.has-white-color.has-text-color.has-futura-pt-font-family { font-weight: 200!important; } .wp-block-cover.alignfull.has-parallax.coverAbout.wp-duotone-unset-2 { min-height: 700px !important; } .wp-block-column.slidedown.has-accent-3-background-color.has-background.has-global-padding.is-layout-constrained.wp-container-core-column-is-layout-35a952aa.wp-block-column-is-layout-constrained { border-radius: 2px!important; padding-top: var(--wp--preset--spacing--20)!important; padding-bottom: var(--wp--preset--spacing--20)!important; flex-basis: 50px!important; } .textIam { font-size:20px!important; font-weight: 100; } } /* ================================================ BUTTONS ADJUSTMENTS ================================================ */ /*BUTTON SHOWREEL DECORATIONS AND ANIMATIONS*/ button, input[type="button"], input[type="submit"], .wp-block-button__link, a.button, .button { display: inline-block; padding: 20px 25px; transition: transform 0.25s ease-out, background-color 0.55s ease-out; will-change: transform, background-color; } /* Hover (press) effect */ button:hover, input[type="button"]:hover, input[type="submit"]:hover, .wp-block-button__link:hover, a.button:hover, .button:hover { transform: scale(1,0.9); background-color: #919FA35E; /* light gray on hover */ } /* Shrink button on mobile */ @media (max-width: 768px) { .wp-block-button__link { font-size: 15px; /* roughly 30% smaller text */ padding: 20px 25px; /* shrink padding */ transform: scale(0.9); /* optional: smooth scaling */ } } /*BUTTON WITH FILE*/ /* Make file block button behave like global buttons */ .wp-block-file__button, .wp-block-file__button:visited { display: inline-block; padding: 20px 25px; transition: transform 0.25s ease-out, background-color 0.55s ease-out; will-change: transform, background-color; border-radius: 50px; /* adjust if needed */ } /* Hover effect like all other buttons */ .wp-block-file__button:hover { transform: scale(0.93); background-color: #919FA35E; } /* Optional: mobile style */ @media (max-width: 768px) { .wp-block-file__button { font-size: 15px; padding: 20px 25px; transform: scale(0.9); } } /*---------CONTACT BUTTON ADJUSTMENTS----------*/ .wp-element-button { padding: 20px 25px 20px 25px; border-radius: 5px!important; text-transform: uppercase!important; background-color: #333333!important; } @media (max-width: 768px) { .milo-actions { padding-bottom: 70px; } .aboutInfoContact { transform: scale(0.85); } } .wp-element-button:hover { border-radius: 5px!important; background-color: #648e97!important; transform: scale(0.95)!important; } /* ========================================= CIRCLE CONTAINER SHAPE FOR EXPERIENCE - ABOUT PAGE ========================================= */ .circle-container { width: 30px; /* Or any size */ height: 30px; border: 3px solid #919fa3; /* Your border */ border-radius: 70%; display: flex; /* Use flexbox to center the dot */ justify-content: center; align-items: center; } .dot { width: 10px; /* Size of the dot */ height: 10px; background-color: #dddddd; /* Color of the dot */ border-radius: 50%; } .wp-block-column.is-vertically-aligned-center.is-layout-flow.wp-container-core-column-is-layout-3f7b68c1.wp-block-column-is-layout-flow { flex-basis: 35px!important; } /* ========================================= SCROLLING DOWN ANIMATED SHAPE ========================================= */ .portfolio-mouse-scroller-icon { display: block; height: 20px; transform: scale(0.8); } @media (max-width: 768px) { .portfolio-mouse-scroller-icon { transform: scale(0.6); } } .scroll-downs { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width :24px; height: 45px; } .mousey { width: 2px; padding: 5px 10px; height: 25px; border: 1.5px solid #fff; border-radius: 25px; opacity: 0.75; box-sizing: content-box; } .scroller { width: 3px; height: 10px; border-radius: 25%; background-color: #fff; animation-name: scroll; animation-duration: 2.2s; animation-timing-function: cubic-bezier(.15,.41,.69,.94); animation-iteration-count: infinite; } @keyframes scroll { 0% { opacity: 0; } 10% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(15px); opacity: 0;} } /* ========================================= FADE-SWAP MAIN WEB LOGO (HOVERING FX) ========================================= */ /* Site Logo fade on hover — Twenty Twenty-Five compatible */ .wp-block-site-logo img { opacity: 1; transition: opacity 0.5s ease; } .wp-block-site-logo a:hover img { opacity: 0.3; } /* Prevent parent link opacity conflicts */ .wp-block-site-logo a { opacity: 1 !important; } @media (max-width: 768px) { .wp-block-site-logo img { transform: scale(0.9); transform-origin: center; } .siteLogoNav { padding-top: 50px; } } /* ================================================================================= SOCIAL ICON FIXES (ISSUE TWENTY TWENTY FIVE THEME SMALL ICONS ALL THE TIME) ================================================================================= */ /* FIX SOCIAL ICONS IN SINGLE PORTFOLIO PAGE*/ .wp-block-social-links .wp-block-social-link.wp-social-link { display: inline-block; margin: 0; padding: 5px!important; } .is-style-default.has-medium-font-size { padding-bottom: 10px; padding-top: 5px; } .wp-block-social-links.social-icon-logo-only .wp-social-link { display: inline-flex; align-items: center; justify-content: center; width: 100% !important; height: 100% !important; padding: none !important; background: none !important; border-radius: 0 !important; } .wp-block-social-links .wp-block-social-link.wp-social-link .wp-block-social-link-anchor, .wp-block-social-links .wp-block-social-link.wp-social-link .wp-block-social-link-anchor svg, .wp-block-social-links .wp-block-social-link.wp-social-link .wp-block-social-link-anchor:active, .wp-block-social-links .wp-block-social-link.wp-social-link .wp-block-social-link-anchor:hover, .wp-block-social-links .wp-block-social-link.wp-social-link .wp-block-social-link-anchor:visited { color: currentColor; justify-content: center; fill: currentColor; } .is-style-default.has-medium-font-size { font-size: 16px!important; } /* ============= REMOVE UNRELINE LINK ON SAFARI =========================== */ a, a:visited, a:hover, a:active { text-decoration: none!important; } p a { text-decoration: none; } /*FORCE SOCIAL ICONS TO DISPALY BIGGER SIZE*/ /* Force social icon SVGs to scale properly */ .wp-block-social-links .wp-social-link svg, .wp-block-social-links .wp-social-link svg * { width: 17px !important; height: 17px !important; max-width: none !important; max-height: none !important; } .wp-block-social-links.about-social .wp-social-link svg, .wp-block-social-links.about-social .wp-social-link svg * { width: 30px !important; height: 30px !important; display: inline-flex; align-items: center; justify-content: center; padding: 7px; /* space around the icon */ border-radius: 50%; /* make background circular */ background-color: #648e97; /* your existing background */ } /* If icons are contained in a fixed container, allow scaling */ .wp-block-social-links .wp-social-link { display: inline-flex; align-items: center; justify-content: center; } /* Optionally define a size class override */ .wp-block-social-links.size-normal .wp-social-link svg { width: 40px !important; height: 40px !important; } .wp-block-social-links.size-large .wp-social-link svg { width: 60px !important; height: 60px !important; } .wp-block-social-links.size-huge .wp-social-link svg { width: 80px !important; height: 80px !important; } /* ===== Social icons logos-only, big size 120px ===== */ .wp-block-social-links.social-icon-logo-only { display: flex; /* make sure icons are in a row */ gap: 15px; /* spacing between icons */ align-items: center; } .wp-block-social-links.social-icon-logo-only .wp-social-link { display: inline-flex; align-items: center; justify-content: center; width: 70px !important; height: 80px !important; padding: 0 !important; background: none !important; /* remove any background */ border-radius: 0 !important; /* no circle */ } .wp-block-social-links.social-icon-logo-only .wp-social-link svg, .wp-block-social-links.social-icon-logo-only .wp-social-link svg * { width: 25px !important; height: 25px !important; max-width: none !important; max-height: none !important; display: block; } @media (max-width: 768px) { .wp-block-social-links.social-icon-logo-only { display: flex; /* make sure icons are in a row */ gap: 12px; /* spacing between icons */ align-items: center; } .wp-block-social-links.social-icon-logo-only .wp-social-link { display: inline-flex; align-items: center; justify-content: center; width: 40px !important; height: 60px !important; padding: 0 !important; background: none !important; /* remove any background */ border-radius: 0 !important; /* no circle */ } .wp-block-social-links.social-icon-logo-only .wp-social-link svg, .wp-block-social-links.social-icon-logo-only .wp-social-link svg * { width: 18px !important; height: 18px !important; max-width: none !important; max-height: none !important; display: block; } } @media (max-width: 768px) { p.copyright-footer-stuck { text-align: center; font-size: 8px!important; } } /* ================================================ CAREER HIGHLIGHTS - ABOUT PAGE FIXES ================================================ */ .wp-container-core-group-is-layout-27973c8d > :where(:not(.alignleft):not(.alignright):not(.alignfull)) { max-width: clamp(1100px ,60vw, 1100px)!important; margin-left: auto !important; margin-right: auto !important; } /* ================================================ SOFTWARES ICON ABOUT PAGE FIXES ================================================ */ /* Mobile icon resize for soft-icon-group */ @media (max-width: 768px) { .wp-container-core-group-is-layout-3c8805c5 { flex-wrap: wrap; } .soft-icon-group img { width: 40px !important; height: 40px !important; object-fit: contain; /* keeps the icon looking clean */ } .rendereng-icon-group img { width: 35px !important; height: 35px !important; object-fit: contain; /* keeps the icon looking clean */ } } /* ================================================ DEFAULT TWENTY TWENTY FIVE THEME OVERRIDES ================================================ */ /* NAVIGATION MENU ITEMS - UNDERLINES REMOVED*/ /* Remove underline from navigation links */ .wp-block-navigation a { text-decoration: none; } /* On hover: reduce opacity to 75% */ .wp-block-navigation a:hover { opacity: 0.75; } /* === REMOVE ALL CLICK / FOCUS OUTLINES GLOBALLY === */ /* Universal reset for outlines and shadows */ *:focus, *:active, *:focus-visible, a:focus, a:active, a:focus-visible, button:focus, button:active, button:focus-visible, .wp-block-navigation a:focus, .wp-block-navigation a:active, .wp-block-navigation a:focus-visible, .wp-block-navigation-item__content:focus, .wp-block-navigation-item__content:active, .wp-block-navigation-item__content:focus-visible, .wp-block-social-link-anchor:focus, .wp-block-social-link-anchor:active, .wp-block-social-link-anchor:focus-visible, .wp-block-site-logo a:focus, .wp-block-site-logo a:active, .wp-block-site-logo a:focus-visible { outline: none !important; box-shadow: none !important; border: none !important; } /* Remove tap highlight on mobile (iOS/Android) */ * { -webkit-tap-highlight-color: transparent !important; } /* Optional: force nav links to stay clean even when clicked */ .wp-block-navigation a, .wp-block-navigation-item__content, .wp-block-social-link-anchor, .wp-block-site-logo a { outline: none !important; box-shadow: none !important; border: none !important; } /* ================================================ PROGRESS BARS NEW SIMPLIFIED WAY from JS ================================================ */ /* Base progress bar */ .progress-bar { --progress-color: #648e97; --progress-width: 300px; --progress-height: 10px; background: rgba(255,255,255,0.1); border-radius: 10px; display: flex; align-items: center; height: var(--progress-height); width: var(--progress-width); overflow: hidden; } /* Filled bar */ .progress-bar__value { background: var(--progress-color); height: 100%; width: 0; border-radius: 10px; transition: width 1.5s ease; } /* Reverse direction */ .progress-bar.is-reverse { flex-direction: row-reverse; } /* ------------ MOBILE ADJUSTMENTS FOR PROGRESS BARS ------------ */ @media (max-width: 768px) { .progress-bar.is-reverse { flex-direction: row !important; } .progress-left { place-items: flex-start; } .wp-block-column.progress-right.is-layout-flow.wp-block-column-is-layout-flow, .wp-block-column.progress-left.is-layout-flow.wp-block-column-is-layout-flow { justify-items: anchor-center; } .wp-block-columns-is-layout-flex { gap: 15px !important; } .has-text-align-right { text-align: left; } /* Optional mobile safety for bars */ .progress-bar { max-width: 100%; } } /* ================================================ PASSWORD PAGE – FIXED VERSION ================================================ */ /* LOCKED STATE */ body.password-locked { margin-top: -100px; overflow: hidden; position: fixed; width: 100%; height 110%; } /* ------------------------------------------------ HIDE THEME CHROME ------------------------------------------------ */ body.password-locked .wp-site-blocks > .wp-block-template-part { display: none !important; } body.password-locked .entry-content > * { display: none !important; } /* ------------------------------------------------ SHOW PASSWORD SCREEN ONLY ------------------------------------------------ */ body.password-locked .secure-area-wrapper { display: flex !important; } /* ------------------------------------------------ FULLSCREEN WRAPPER ------------------------------------------------ */ .secure-area-wrapper { position: relative; min-height: 110vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; background-image: url("https://milomassacci.com/wp-content/uploads/2026/01/PasswordBG_v001.png"); background-size: cover; background-position: center; } /* DARK OVERLAY */ .secure-area-wrapper::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.15); } /* CONTENT ABOVE OVERLAY */ .secure-area-wrapper > * { position: relative; z-index: 1; } /* ------------------------------------------------ HEADER ------------------------------------------------ */ .secure-area-header { margin-bottom: 30px; } .secure-area-logo { width: 80px; margin-bottom: 12px; transition: opacity 0.3s ease; } .secure-area-logo:hover { opacity: 0.7; } .secure-area-title { font-family: "Futura PT", Futura, Arial, sans-serif; font-size: 47px; font-weight: 400; letter-spacing: 0.08em; color: #fff; margin: 0; } .secure-area-subtitle { font-size: 16px; letter-spacing: 0.12em; color: rgba(255,255,255,0.7); margin-top: 8px; } /* ------------------------------------------------ PASSWORD FORM ------------------------------------------------ */ form.post-password-form { margin-top: -15px; } /* PASSWORD FIELD WRAPPER */ .password-field { position: relative; padding: 4px; border: 2px solid #aaa; background: #fff; } /* INPUT */ .password-field input { width: 280px; height: 56px; padding: 0 56px 0 18px; border: none; font-size: 12px; letter-spacing: 0.15em; outline: none; background-color: transparent!important; } /* SUBMIT BUTTON */ .password-field button { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); width: 36px; height: 36px; border: none; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23aaa' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 5l7 7-7 7'/%3E%3C/svg%3E") center / 20px no-repeat; cursor: pointer; } /* ------------------------------------------------ ERROR MESSAGE ------------------------------------------------ */ .password-error { margin-top: 14px; font-family: 'Futura PT', sans-serif;; font-size: 17px; font-weight: 400; font-style: bold; color: red; text-align: center; } .password-error a { color: red; font-family: 'Futura PT', sans-serif;; font-size: 18px; font-weight: 400; text-decoration: underline; } /* ------------------------------------------------ SHAKE ANIMATION (SAFE) ------------------------------------------------ */ @keyframes password-shake { 0% { left: 0; } 20% { left: -6px; } 40% { left: 6px; } 60% { left: -4px; } 80% { left: 4px; } 100% { left: 0; } } .password-field.password-shake { animation: password-shake 0.4s ease; } /* ------------------------------------------------ MOBILE ------------------------------------------------ */ @media (max-width: 768px) { .secure-area-logo { width: 56px; } .secure-area-title { font-size: 34px; letter-spacing: 0.06em; } .secure-area-subtitle { font-size: 14px; letter-spacing: 0.06em; } .password-field input { width: 290px; height: 48px; padding: 0 48px 0 16px; } .password-field button { width: 30px; height: 30px; background-size: 16px; } form.post-password-form { margin-top: -30px; } } .password-field.password-shake { width: 360px; display: inline-flex; } /* ------------------------------------------------ VERTICAL BALANCE (SAFE) ------------------------------------------------ */ /* @media (min-width: 769px) { .secure-area-wrapper { margin-top: -10vh; } } @media (max-width: 768px) { .secure-area-wrapper { margin-top: -10vh; } } */ .secure-area-wrapper { margin-top: -40px; } @media (max-width: 768px) { .secure-area-wrapper { margin-top: -60px; } } /* ================================================ LIGHTBOX HOME PAGE ADJUSTMENTS ================================================ */ /* HIDE SHOWREEL BUTTON ON DESKTOP AND TABLETS */ @media (min-width: 768px) { .wp-block-button__link.wp-element-button.show-lightbox-reel.milo-video-lightbox-button { display: none; } } .milo-video-lightbox-wrap { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; min-height: 100%; position: relative; } /* Gutenberg button wrapper */ .milo-video-lightbox-button-wrap { display: flex; justify-content: center; align-items: center; width: 100%; } /* Keep native Gutenberg button behavior */ .milo-video-lightbox-button-wrap .wp-block-button__link, .milo-video-lightbox-button { cursor: pointer; text-decoration: none; display: inline-flex; } .milo-video-lightbox-button { /* animation: slideUpBtn 1.6s ease 0.3s forwards;*/ background-color: #33333399!important; backdrop-filter: blur(15px)!important; opacity: 1; } .milo-video-lightbox-icon{ max-width: 18px; padding-left: 10px; padding-right: 10px; } .milo-video-lightbox-button-animation{ animation: slideUpBtn 1.6s ease 0.3s forwards; } @keyframes slideUpBtn { from { opacity: 0; transform: translateY(80px); } to { opacity: 1; transform: translateY(0); } } /* Lightbox overlay */ .video-lightbox { position: fixed; inset: 0; display: none; justify-content: center; align-items: center; background: rgba(28, 40, 43, 0.9); backdrop-filter: blur(24px); z-index: 9999; opacity: 0; transition: opacity 0.3s ease; padding: 20px; } /* Visible state */ .video-lightbox.active { opacity: 1; } /* Content area */ .video-lightbox-content { position: relative; width: 70%; max-width: 1200px; animation: miloLightboxIn 0.3s ease; } /* Video aspect ratio box */ .video-container { position: relative; width: 100%; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 12px; background: #000; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35); } /* Vimeo iframe */ .video-container iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .video-lightbox-content { position: relative; overflow: visible; } .video-lightbox-close { position: absolute; top: 0px; right: -44px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 999px; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 100000000000000; } .video-lightbox-close-icon { display: block; width: 15px; height: 15px; pointer-events: none; } .video-lightbox-close:hover { transform: scale(.9); background: transparent; } /* Animation */ @keyframes miloLightboxIn { from { transform: translateY(10px) scale(0.98); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } } /* Mobile */ @media (max-width: 768px) { .video-lightbox { padding: 14px; } .video-lightbox-content { width: 100%; } .video-lightbox-close { top: -40px; right: 0; } } /* ================================================ WORK PAGE - MAIN VIDEO PLAYER + DESCRIPTION ================================================ */ .video-player-inner.video-player-main.show { background-image: url("https://milomassacci.com/wp-content/uploads/2025/12/diagonal-lines_v001-01.png"); background-position: top left; background-repeat: repeat; background-size: 320px auto; /* smaller pattern */ background-color: #000000; /*margin: 15px;*/ margin-left: 2%; margin-right: 2%; margin-bottom: 20px; border-radius: 15px; width: 96%; } /* Layout wrapper */ .video-player-main .main-video-wrapper { display: flex; gap: 14px; width: 100%; margin: 0 -3.5% auto; flex-wrap: nowrap; align-items: flex-start; margin-bottom: 80px; background-color: #232323; background-image: linear-gradient(to bottom right, #394244, #232627, #111111, #111111); border-radius: 20px; padding: 35px; box-shadow: inset 1px 1px 1px 1px rgba(255, 255, 255, 0.20), 8px 8px 8px rgba(0,0,0,0.5); } @media (max-width: 1200px) { .video-player-main .main-video-wrapper { align-items: center; margin: 0 -1.5% auto; } } @media (max-width: 430px) { .video-player-main .main-video-wrapper { align-items: center; width: 75%; margin: 0!important; } } .vp-center { z-index: 9999999999999999999999999999999; align-items: start!important; justify-content: start!important; } /* Main video column */ .video-player-main .video-column { flex: 0 0 65vw; min-width: 300px; position: relative; } /* 16:9 aspect ratio */ .video-player-main .video-wrapper { width: 100%; padding-top: 56.25%; position: relative; } .video-player-main iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* --------------------------------------------- NEW: BELOW VIDEO PANEL (transparent) --------------------------------------------- */ .below-video-panel{ margin-top: 18px; padding-top: 10px; color: #ffffff; } .below-video-panel-wrapper{ padding-left: 10px; padding-right: 20px; } /* 3px grey divider line */ .below-video-divider{ height: 3px; width: 100%; background: #6a6a6a; opacity: 0.6; margin-bottom: 15px; } /* 3px grey divider line */ .below-video-spacer{ height:100px; width: 100%; margin-bottom: 20px; margin-top: 20px; } /* Credits row container */ .below-video-credits{ display: flex!important; align-items: baseline; /* better for mixed font sizes */ justify-content: space-between; /* pushes year to far right */ gap: 40px; margin-bottom: 18px; font-family: 'Futura PT', sans-serif; flex-wrap: wrap; /* allow wrap only when needed */ } /* --------------------------------------------- BELOW VIDEO TOP ROW --------------------------------------------- */ .below-video-top{ display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 14px; background-color: #2d2d2d; /*background-color: transparent;*/ padding: 30px 25px 15px 0; margin-right: -40px; border-radius: 15px 0 0 0; box-shadow: 8px 8px 8px rgba(0,0,0,0.5); } @media (max-width: 1200px) { .below-video-top{ margin-bottom: 14px; background-color: transparent; padding: 10px margin-right: 0px; box-shadow: none!important; } } @media (max-width: 1200px) { .below-video-panel { transform: scale(1); } } .below-video-top-left{ display: flex; align-items: baseline; gap: 12px; min-width: 0; flex-wrap: nowrap; } /* Title + client in one line (desktop) */ .below-video-title{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 20px; } @media (max-width:1200px) { .below-video-title{ padding-left: 0px; } } .below-video-client{ font-family: 'Futura PT', sans-serif; font-size: clamp(14px, 2vw, 18px); line-height: 1.2; color: #cccccc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Right: logo always right */ .below-video-top-right{ flex: 0 0 auto; display: flex; justify-content: flex-end; align-items: flex-start; } .below-video-logo{ max-height: 35px; max-width: 100px; object-fit: contain; display: none!important; } /* MOBILE: title/client stack, logo stays right */ @media (max-width: 1200px){ .below-video-logo { max-height: 35px; max-width: 80px; object-fit: contain; display: flex!important; } } @media (max-width: 768px){ .below-video-top{ align-items: flex-start; } .below-video-top-left{ flex-direction: column; align-items: flex-start; gap: 0px; flex-wrap: nowrap; } .below-video-title, .below-video-client{ white-space: normal; /* allow wrap */ overflow: visible; text-overflow: clip; } .below-video-logo{ max-height: 25px; max-width: 70px; } .below-video-top { display: flex; } } /* LEFT SIDE (Agency / Post House / Director in ONE ROW) */ .below-video-credits-left{ display: flex; align-items: baseline; gap: 24px; /* spacing between credits */ flex-wrap: wrap; /* allow each credit block to wrap to next line */ font-size: 13px; letter-spacing: 3px; line-height: 1.6; opacity: 0.9; min-width: 0; /* IMPORTANT: lets flex items shrink instead of breaking weirdly */ } /* Individual credit item: keep "Label: Value" on ONE line */ .below-video-credits-left .credit-row{ display: inline-flex; /* more stable than flex here */ align-items: baseline; gap: 6px; white-space: nowrap; /* keeps label + value together */ min-width: max-content; /* prevents internal wrap */ } /* Year on the far right */ .below-video-credits-year{ display: inline-flex; align-items: baseline; gap: 6px; font-size: 13px; letter-spacing: 3px; white-space: nowrap; opacity: 0.9; } /* CRITICAL OVERRIDE: Your global .description-credits class is styled like a panel (max-height/overflow/etc). Below video, we want it to behave like simple inline text. */ .below-video-panel .description-credits{ max-height: none !important; overflow: visible !important; transition: none !important; cursor: default !important; display: inline !important; letter-spacing: inherit; /* keep same spacing as container */ } /* Project description under credits */ .below-video-project .description-label{ margin-top: 8px; } .below-video-project .description-texts{ cursor: default; } .below-video-project .texts-read-more{ margin-top: 6px; } /* --------------------------------------------- BELOW VIDEO CREDITS — MOBILE STACK --------------------------------------------- */ @media (max-width: 768px){ .description-credits{ margin-top: 0px!important; } .description-label { margin-top: 0px!important; } .below-video-panel-wrapper{ padding-left: 0px; padding-right: 0px; } /* reduce global spacing */ .below-video-credits{ gap: 2px; /* was 40px */ margin-bottom: 5px; align-items: flex-start; } /* stack everything */ .below-video-credits{ flex-direction: unset; /* year goes under */ /*justify-content: flex-start;*/ } /* stack left side items */ .below-video-credits-left{ flex-direction: column; /* Agency/Post/Director vertical */ gap: 2px; /* was 34/40 */ letter-spacing: 1.2px; /* optional: helps fit mobile */ } /* make each row full-width */ .below-video-credits-left .credit-row{ min-width: 0; white-space: normal; /* allow wrapping if value is long */ } /* year becomes a normal row (not right aligned) */ .below-video-credits-year{ justify-content: flex-end; text-align: left; letter-spacing: 1.2px; /* optional */ } } /* ================================================ WORK PAGE - DESCRIPTION BOX STYLE ================================================ */ /* Description column - Desktop */ .video-player-main .description-column { flex: 0 0 30%; min-width: 200px; max-height: 100%; background-color: #2D2D2D; color: #ffffff; display: flex; align-items: flex-start; justify-content: center; padding: 20px 50px 50px 50px; border-top-right-radius: 15px; border-bottom-right-radius: 15px; border-bottom-left-radius: 5px; border-top-left-radius: 5px; box-sizing: border-box; overflow: hidden; position: relative; box-shadow: 8px 8px 8px rgba(0,0,0,0.5); } .description-label{ font-family: "Futura PT", sans-serif; font-size: 13px; letter-spacing: 1.5px; color: #aaa; font-weight: 400; text-transform: none!important; font-style: italic; opacity: 1; margin-bottom: 5px; } .video-player-main .description-content { width: 100%; text-align: left; } .role-row { margin-top:40px; margin-bottom: 10px; } @media (max-width: 1200px) { .role-row { margin-top:10px; margin-bottom: 10px; } } /*About Me in The Project Text*/ .description-aboutme{ font-family: 'Futura PT', sans-serif; line-height: 1.2; font-size: 24px; font-weight: 400!important; padding-top: 15px!important; padding-bottom: 25px!important; margin: 0!important; } /* Title */ .description-title { margin-bottom: 10px; } .description-header { display: none!important; padding-top: 15px; } .below-video-title, .video-player-main .description-content h2 { font-family: 'Futura PT', sans-serif; line-height: 1.2; font-size: 26px; font-weight: 400!important; padding-bottom: 5px!important; margin: 0!important; } @media (max-width: 768px) { .description-aboutme{ font-size: 20px; text-align: left; } .below-video-title { font-size: 22px; } } @media (max-width: 430px) { .description-aboutme{ font-size: 21px; text-align: center; } } /* Client name */ .below-video-client, .description-client { font-family: 'Futura PT', sans-serif; color: #cccccc; font-weight: 400; font-size: clamp(12px, 15px, 22px); line-height: 1.2; margin-bottom: 0px; } .description-project { padding: 20px 0 20px 0; } /* Role */ .role-text { font-family: 'Futura PT', sans-serif; font-weight: 400; font-size: 15px; text-transform: uppercase; } /* Credits box */ .description-credit-box { display: flex; flex-direction: column; gap: 2px; } .description-credits { font-size: clamp(11px, 14px, 16px); line-height: 1.8; max-height: 100px; letter-spacing: 3px; overflow: hidden; transition: max-height 0.5s ease; cursor: pointer; position: relative; font-family: 'Futura PT', sans-serif; font-weight: 400; margin-top: 10px; } a.video-link { font-family: "Futura PT", sans-serif; font-size: 14px; font-weight: 400; color: #aaa; padding: 10px 10px 10px 10px; background-color: #333333; border-radius: 5px; display: inline-block; transition: transform 0.25s ease, opacity 0.25s ease; } a.video-link:hover { font-family: "Futura PT", sans-serif; font-weight: 400; color: #fff; background-color: #648e97!important; transform: scale(0.9); /* shrink */ opacity: 1; } /* Description text */ .description-texts { color: rgba(255,255,255,.70); font-size: 12px; line-height: 1.7; padding-top: 10px; /*font-size: 14px;*/ /*line-height: 1.5!important;*/ font-weight: 400; letter-spacing: 2px!important; /*color: #cccccc!important;*/ max-height: 100px; overflow: hidden; transition: max-height 0.5s ease; cursor: pointer; position: relative; } /* Truncated (...) indicator .video-player-main .description-content p.truncated::after { content: '... read more ...'; position: absolute; bottom: 0; right: 0; background: #2D2D2D; padding-left: 5px; font-weight: bold; font-style: italic; font-size: 10px; }*/ /* Description Task Text */ .description-task { } .description-task .task-title { font-family: "Futura PT", sans-serif; font-style: italic; font-size: 12.75px; color: #aaaaaa; font-weight: 400; } @media (max-width: 768px) { .description-task .task-title { font-size: 11.9px; } } .description-task .task-text { font-size: 13px; line-height: 1.5; color: #ffffff; } .description-link { margin-top: 16px; } .links-list { padding: 10px 0px 10px 0px; } /* ---------- DESCRIPTION TASK CLIPPING --------- */ .task-text { overflow: hidden; transition: max-height 0.4s ease; max-height: 1000px; /* fallback, overridden by JS */ } .task-text.collapsed { max-height: 150px; } .texts-read-more { background: transparent; border: none; color: #aaa; padding: 0; font-size: 11px; } .texts-read-more:hover { /*text-decoration: underline;*/ background: transparent; } /* ================================================ FULL PROJECT BUTTON IN DESCRIPTION BOX WRAPPER + STYLE ================================================ */ .description-full-prj-button{ background-color: #454545!important; } .description-full-prj-button:hover { } .description-full-project { align-items: flex-start; justify-self: left; text-align: -webkit-center; margin-top: 40px; margin-bottom: 40px!important; border-style: dashed; border-width: 2px; border-color: rgba(255,255,255,0.4); padding: 10px; border-radius: 5px; } @media (max-width: 1200px) { .description-full-project { justify-self: center; margin-top: 40px; margin-bottom: 40px; } } /*---------FULL PROJECT BUTTON ADJUSTMENTS----------*/ a.fullProjectBtn { display: inline-block; font-size: 12px; background-color: #3D3D3D !important; padding: 15px 25px !important; border-radius: 5px; border-width: 1px !important; border-style: solid !important; border-color: #ffffff !important; transition: transform 0.25s ease-out, background-color 0.25s ease-out; } a.fullProjectBtn:hover { transform: scale(0.93); background-color: #2D2D2D !important; } @media (max-width: 768px) { a.fullProjectBtn { padding: 15px 20px !important; font-size:12px; border-radius: 5px; border-width: 1px!important; } a.fullProjectBtn:hover { transform: scale(0.93); background-color: #2D2D2D !important; } } /* ================================================ MOBILE LAYOUT FIX — FORCE VIDEO ABOVE DESCRIPTION ================================================ */ @media (max-width: 1200px) { .description-header { padding-top: 0px; display: none!important; } .below-video-top { padding-top: 0px; padding-right: 0px; margin-right: 0; margin-left: 0; display: flex!important; } /* Force wrapper to stack vertically */ .video-player-main .main-video-wrapper, .video-player-main .video-player-main .main-video-wrapper { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; gap: 30px !important; width: 95% !important; background-color: #232323; border-radius: 20px; padding: 35px; } /* Video full width */ .video-player-main .video-column { min-width: 300px; position: relative; width: 100% !important; flex: 0 0 auto !important; } /* Description forced BELOW video */ .video-player-main .description-column { width: 100% !important; flex: 0 0 auto !important; /* Unset desktop fixed styling */ max-height: none !important; overflow: visible !important; /* Rounded box for mobile */ border-radius: 15px!important; padding: 45px!important; } /* Reduce global padding on mobile */ .video-player-inner { padding: 20px !important; } } /* ================================================ WORK PAGE - GALLERY GRID + LOOP PREVIEW + OVERLAY ================================================ */ /* Grid layout */ .portfolio-gallery .gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; width: 100%; } /* Gallery item base */ .portfolio-gallery .gallery-item { position: relative; overflow: hidden; cursor: pointer; display: none; /* controlled by JS */ /* FORCE 21:10 RATIO → fixes all stretching issues */ aspect-ratio: 21 / 9; } /* Visible items */ .portfolio-gallery .gallery-item.visible { display: block; border-radius: 5px; } /* Thumbnail image */ .portfolio-gallery .gallery-item img { width: 100%; height: 100%; object-fit: cover; /* crop any ratio into 16:9 */ display: block; transition: transform 0.3s ease; } /* Preview video */ .portfolio-gallery .gallery-item video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; /* also crops video into 16:9 */ display: none; /* shown on hover by JS */ z-index: 0; } /* Overlay element */ .portfolio-gallery .gallery-item .overlay { position: absolute; inset: 0; background-image: url("https://milomassacci.com/wp-content/uploads/2025/12/diagonal-lines_v001-01.png"); background-color: rgba(100,142,151,0.55); background-size: 320px auto; /* smaller pattern */ background-position: top left; background-repeat: repeat; mix-blend-mode: multiply; opacity: 0; transition: opacity 0.4s ease; pointer-events: none; z-index: 1; /* position: absolute; inset: 0; /* multiple backgrounds: image + color */ /*background-image: url("https://milomassacci.com/wp-content/uploads/2025/12/diagonal-lines_v001-01.png"), linear-gradient(#648E97, #648E97); background-size: cover, cover; background-position: center, center; background-repeat: no-repeat, no-repeat; background-blend-mode: overlay; mix-blend-mode: multiply; opacity: 0; transition: opacity 0.4s ease; z-index: 1;*/ } /* Show overlay on hover or active */ .portfolio-gallery .gallery-item:hover .overlay, .portfolio-gallery .gallery-item.active .overlay { opacity: 1; } /* Caption */ .portfolio-gallery .gallery-item .video-caption { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) translateY(20px); text-align: center; opacity: 0; transition: opacity 0.4s ease, transform 0.4s ease; z-index: 2; /* above overlay & video */ } /* TITLE IN GALLERY*/ .caption-title { font-size: clamp(16px,21px,24px); font-weight: 400; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: 'Futura PT', sans-serif; } @media (max-width:1200px){ .caption-title { font-size: clamp(12px,14px,16px)!important; } } @media (max-width:768px){ .caption-title { font-size: clamp(20px,22px,24px)!important; } } @media (max-width:450px){ .caption-title { font-size: clamp(13px,15px,16px)!important; } } /* ROLE IN GALLERY*/ .caption-role { font-size: clamp(13px,14px,17px);; font-weight: 200; margin-top: -6px; color: #fff; font-family: 'Futura PT', sans-serif; } @media (max-width:1200px){ .caption-role { font-size: clamp(8px,11px,13px)!important; } } @media (max-width:768px){ .caption-role { font-size: clamp(11px,13px,15px)!important; } } @media (max-width:450px){ .caption-role { font-size: clamp(8px,10px,12px)!important; } } /* Hover + active caption */ .portfolio-gallery .gallery-item:hover .video-caption, .portfolio-gallery .gallery-item.active .video-caption { opacity: 1; transform: translate(-50%, -50%) translateY(0); } /* Show more button */ .gallery-controls { text-align: center; margin-top: 20px; } .gallery-show-more { padding: 20px 25px; cursor: pointer; } /* ============================================================ WORK PAGE - GALLERY GRID + LOOP PREVIEW + OVERLAY MOBILE ADJUSTMENTS (max-width: 768px) ============================================================ */ @media (max-width: 768px) { /* Force 20:10 (2:1) ratio */ .portfolio-gallery .gallery-item { aspect-ratio: 20 / 10; } /* Make both thumbnail image & preview video obey the ratio */ .portfolio-gallery .gallery-item img, .portfolio-gallery .gallery-item video, .portfolio-gallery .gallery-item .overlay { width: 100%; height: 100%; object-fit: cover; } /* Move caption lower for mobile */ .portfolio-gallery .gallery-item .video-caption { transform: translate(-50%, 82%) !important; } } /* INITIAL STATE */ .portfolio-gallery .gallery-item { opacity: 0; transform: translateY(40px); animation: slideUp 1.3s ease-out forwards; } /* ================================================ GALLERY GRID ITEMS SLIDING UP ANIMATION ================================================ */ /* KEYFRAMES */ @keyframes slideUp { from { opacity: 0; transform: translateY(80px); } to { opacity: 1; transform: translateY(0); } } /* ================================================ VIDEO PLAYER + DESCRIPTION ================================================ */ .video-player-inner { display: none; opacity: 0; transform: translateY(50px); transition: opacity 1.3s ease, transform 1.3s ease; padding: 50px; box-sizing: border-box; } .video-player-inner.show { display: flex; opacity: 1; transform: translateY(0); } .video-player-inner.slide-out { opacity: 0; transform: translateY(-50px); transition: opacity 0.8s ease, transform 0.8s ease; } /* 16:9 aspect ratio */ .video-player-main .video-wrapper { width: 100%; padding-top: 56.25%; position: relative; overflow: hidden; } .video-player-main iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover !important; /* Fill the ratio box */ object-position: top !important; /* Always align video to top */ } /* ================================================ MOBILE LAYOUT FIXES ================================================ */ @media (max-width: 768px) { .video-player-main .video-column, .video-player-main .description-column { flex: 1 1 100%; width: 100%; } .video-player-main .description-column { border-radius: 15px; padding: 40px; max-height: none; width: 100% !important; flex: 0 0 auto !important; } /* Mobile: adjust gallery grid to single column */ .portfolio-gallery .gallery-grid { grid-template-columns: 1fr !important; } /* Keep previews hidden on mobile, captions controlled by .mobile-focus / .active */ .portfolio-gallery .gallery-item .overlay .portfolio-gallery .gallery-item .video-caption { opacity: 0!important; } .portfolio-gallery .gallery-item.mobile-focus .overlay, .portfolio-gallery .gallery-item.active .overlay { opacity: 1 !important; background: rgba(100,142,151,0.55); position: absolute; inset:0; background-image: url("https://milomassacci.com/wp-content/uploads/2025/12/diagonal-lines_v001-01.png"); background-size: 320px auto; /* smaller pattern */ background-position: top left; background-repeat: repeat; mix-blend-mode: multiply; } .portfolio-gallery .gallery-item.mobile-focus .video-caption, .portfolio-gallery .gallery-item.active .video-caption { opacity: 1 !important; transform: translate(-50%, -50%) translateY(0) !important; } /* Videos hidden on mobile previews */ .portfolio-gallery .gallery-item video { display: none !important; } /* Optional: reduce inner padding */ .video-player-inner { padding: 20px; } /* MOBILE TEXT SIZE CONTROL (ready to adjust) .video-player-main .description-content h2 { font-size: 19px; padding-top: 21px; font-weight: 400;} .video-player-main .description-content .description-client { font-size: 15px; font-weight: 400;} .video-player-main .description-content .description-role { font-size: 14px; } .video-player-main .description-content p { font-size: 12px; } .caption-role { font-size: 14px; } .description-task .task-text { font-size: 12px; line-height: 1.5; color: #ffffff; }*/ } @media (max-width: 430px) { .video-player-main .description-column { padding: 20px!important; width: 110% !important; } } /* --------------------------------------------- SOFTWARE LOGOS — DESCRIPTION PANEL --------------------------------------------- */ .description-softwares { margin-top: 32px; } .softwares-title { font-family: "Futura PT", sans-serif; font-size: 12.75px; font-weight: 400; font-style: italic; text-transform: capitalize; letter-spacing: 0.08em; color: #aaaaaa; margin-bottom: 10px; } .softwares-logos { display: flex; padding-top:5px; gap: 14px; align-items: center; flex-wrap: wrap; } .softwares-logos img { height: 35px; width: auto; /*opacity: 1; transition: opacity 0.25s ease, transform 0.25s ease;*/ } /*.softwares-logos img:hover { opacity: 1; transform: translateY(-1px); }*/ /* Mobile tweaks */ @media (max-width: 768px) { .softwares-logos img { height: 32px; } } /* --------------------------------------------- PRODUCER LOGO POSITIONING --------------------------------------------- */ .description-logPdr { width: 100%; justify-content: end; align-items: anchor-center; } .producer-logo-wrap { width: 80px; height: 80px; } img.producer-logo { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; } .description-workdone { font-family: "Futura PT", sans-serif; font-size: 11px; letter-spacing: 1.2px; color: #aaa; font-weight: 400; text-transform: none!important; font-style: italic; opacity: 1; padding-right: 10px; } /* --------------------------------------------- PRODUCER LOGO MOBILE (≤ 1200px) --------------------------------------------- */ @media (max-width: 1200px) { .video-player-main .description-logPdr { top: 25px; right: 25px; display: none!important; } .video-player-main .description-logPdr .producer-logo { max-height: 35px; /* mobile size */ } } /* ================================================ VIMEO PASSWORD SCREEN — FIX OVERLARGE TEXT ON MOBILE ================================================ */ @media (max-width: 768px) { /* Target any Vimeo iframe wrapper */ .wp-block-embed iframe, .wp-block-video iframe, iframe[src*="vimeo.com"] { font-size: 12px !important; /* shrink inherited base size */ transform-origin: top left !important; } /* Scale everything inside the iframe */ .wp-block-embed, .wp-block-video, iframe[src*="vimeo.com"] { zoom: 0.75; /* shrink whole password UI */ -moz-transform: scale(0.75); -moz-transform-origin: top left; } } /* ================================================ VIMEO PASSWORD SCREEN — FIX OVERLARGE TEXT ON MOBILE ================================================ */ /* Desktop: 60vw */ .reelvideoframe { width: 65vw; max-width: 100%; margin-left: auto; margin-right: auto; } /* Mobile: full width */ @media (max-width: 768px) { .reelvideoframe { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } } .reelvideoframe video, .reelvideoframe iframe { width: 100%; height: auto; } /* ============================================================================================================================================================================ */ /* ============================================================================================================================================================================ */ /* ============================================================================================================================================================================ */ /* ============================== CONTACT FORM STYLE for SHORTCODE ============================== */ /* ============================== Milo Contact Form ============================== */ .milo-contact-wrap, .milo-contact-wrap * { font-family: "FuturaPT", "Futura PT", Futura, system-ui, sans-serif; color: #fff; } .milo-contact-wrap { width: 100%; } .milo-contact-form { width: 100%; } /* Two-column layout */ .milo-two-col { display: flex; gap: 18px; width: 100%; flex-wrap: wrap; } @media (max-width: 1200px) { .milo-two-col { gap: 5px!important; } } @media (max-width: 565px) { .milo-two-col { gap: 0px!important; } } .milo-two-col .milo-field { flex: 1 1 240px; } /* Fields */ .milo-field { position: relative; width: 100%; margin: 14px 0; } .milo-field input, .milo-field textarea { width: 100%; padding: 22px; border-radius: 6px; border: 0; background-color: #2d2d2d; color: #fff; font-size: 1rem; box-sizing: border-box; } .milo-field textarea { min-height: 15em; resize: vertical; } /* Floating labels */ .milo-field label { position: absolute; left: 22px; top: 18px; color: rgba(255,255,255,0.65); pointer-events: none; transition: top 0.18s ease, font-size 0.18s ease, opacity 0.18s ease; } .milo-field input:focus + label, .milo-field textarea:focus + label, .milo-field input:not(:placeholder-shown) + label, .milo-field textarea:not(:placeholder-shown) + label { top: 6px; font-size: 0.75em; opacity: 0.9; } /* Focus */ .milo-field input:focus, .milo-field textarea:focus { outline: none; box-shadow: 0 0 0 2px rgba(255,255,255,0.14); } /* Actions */ .milo-actions { display: flex; justify-content: flex-end; margin-top: 10px; } /* Button styling */ .milo-contact-wrap .milo-contact-button { background: transparent !important; border: 2px solid #fff !important; border-radius: 5px !important; color: #fff !important; font-size: 18px !important; font-weight: 200; text-transform: uppercase; letter-spacing: 3px; } /* Status message */ .milo-contact-status { width: 100%; margin-top: 14px; padding: 10px 0px; border-radius: 8px; background: rgba(255,255,255,0.08); } p.milo-contact-status.success { padding-left: 20px; } .milo-contact-status.success { outline: 1px solid rgba(80, 200, 120, 0.6); } .milo-contact-status.error { outline: 1px solid rgba(255, 90, 90, 0.6); } /* Honeypot */ .milo-hp { position: absolute; left: -9999px; height: 0; overflow: hidden; } /* Stack "+" and "MORE INFO" vertically */ .working-experience-timeline .we-toggle { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; /* space between + and text */ } /* ================================================ WORKFLOW SECTIONS ================================================ */ .single-portfolio .portfolio-workflow-section-box { width: 100%; margin: 0; padding: 0 0 42px; } .single-portfolio .portfolio-workflow-section-inner { width: 850px; max-width: 80%; margin: 0 auto; padding: 60px 0 0; position: relative; } } .single-portfolio .portfolio-workflow-section-inner-gallery { width: 850px; max-width: 80%; margin: 0 auto; padding: 0; position: relative; } .single-portfolio .portfolio-workflow-section-title { margin: 0 0 18px; } .single-portfolio .portfolio-workflow-section-text { margin: 0 0 36px; } .single-portfolio .portfolio-workflow-section-text p { margin: 0 0 16px; } .single-portfolio .portfolio-workflow-video-carousel-box { position: relative; width: 100vw; height: 500px; overflow: hidden; margin: 24px 0 42px; left: 50%; transform: translateX(-50%); background: #111111; } .single-portfolio .portfolio-workflow-video-carousel-box::before, .single-portfolio .portfolio-workflow-video-carousel-box::after { content: ""; position: absolute; top: 0; width: 16%; height: 100%; z-index: 14; pointer-events: none; } .single-portfolio .portfolio-workflow-video-carousel-box::before { left: 0; background: linear-gradient(to right, rgba(17,17,17,1) 0%, rgba(17,17,17,0.65) 100%); } .single-portfolio .portfolio-workflow-video-carousel-box::after { right: 0; background: linear-gradient(to right, rgba(17,17,17,1) 0%, rgba(17,17,17,0.65) 100%); } .single-portfolio .portfolio-workflow-videos { position: relative; width: 100%; height: 100%; } .single-portfolio .portfolio-workflow-videos-item { position: absolute; top: 50%; left: 50%; width: min(72%, 850px); height: 100%; transform: translate(-50%, -50%); transition: transform .4s ease, opacity .4s ease, filter .4s ease; opacity: .36; display: flex; flex-direction: column; justify-content: center; } .single-portfolio .portfolio-workflow-videos-item.is-active { opacity: 1; } .single-portfolio .portfolio-workflow-videos-item.is-side { opacity: .62; } .single-portfolio .portfolio-workflow-videos-item.is-fade { opacity: .2; } .single-portfolio .portfolio-workflow-videos-item.is-hidden { visibility: hidden; } .single-portfolio .portfolio-workflow-video-frame { width: 100%; height: 100%; border-radius: 16px; overflow: hidden; background: #000; } .single-portfolio .portfolio-workflow-video-media { width: 100%; height: 100%; border: 0; display: block; object-fit: cover; } .single-portfolio .portfolio-workflow-video-carousel-box.is-single .portfolio-workflow-videos-item { width: min(72%, 900px); max-width: 100%; opacity: 1; } /* arrows workflow .single-portfolio .portfolio-workflow-carousel-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 9999999999999999999999; width: 52px; height: 52px; border-radius: 999px; border: 1px solid rgba(255,255,255,.35); background: rgba(0,0,0,.35); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 38px; line-height: 1; backdrop-filter: blur(6px); } .single-portfolio .portfolio-workflow-carousel-arrow-left { left: 18px; } .single-portfolio .portfolio-workflow-carousel-arrow-right { right: 18px; } .single-portfolio .portfolio-workflow-gallery { display: flex; flex-direction: column; gap: 3px; margin-top: 10px; width: 100%; } */ /* -------------------------arrows workflow----------------------*/ .portfolio-workflow-carousel-arrow { position: absolute !important; top: 50% !important; transform: translateY(-50%) !important; width: 60px; height: 60px; border: 0; border-radius: 5px; background: rgba(34, 34, 34, 0.65); cursor: pointer; z-index: 99999999999; display: flex; align-items: center; justify-content: center; transition: background 0.25s ease, opacity 0.25s ease; backdrop-filter: blur(6px); } .portfolio-workflow-carousel-arrow:hover { background: rgba(0, 0, 0, 0.85); background-color: #648e97; } .portfolio-workflow-carousel-arrow-left { left: 24px; } .portfolio-workflow-carousel-arrow-right { right: 24px; } .portfolio-workflow-carousel-arrow img { width: 28px; height: 28px; object-fit: contain; display: block; transition: transform 0.25s ease, opacity 0.25s ease; pointer-events: none; } .portfolio-workflow-carousel-arrow-left:hover img { transform: translateX(10px); } .portfolio-workflow-carousel-arrow-right:hover img { transform: translateX(-10px); } .portfolio-workflow-carousel-arrow:active { opacity: 0.9; } /* ---------------workflow gallery --------------*/ .single-portfolio .portfolio-workflow-section-inner-gallery { width: 850px; max-width: 80%; margin: 0 auto; padding: 0; position: relative; } .single-portfolio .portfolio-workflow-gallery-row { --portfolio-workflow-row-height: 200px; display: flex; gap: 3px; padding: 1.5px; flex-wrap: nowrap; min-height: var(--portfolio-workflow-row-height); } .single-portfolio .portfolio-workflow-gallery-item { position: relative; display: block; height: var(--portfolio-workflow-row-height); min-width: 0; flex-grow: 0; flex-shrink: 0; border: 0; padding: 0; margin: 0; overflow: hidden; cursor: pointer; background: #0e0e0e; border-radius: 5px; } .single-portfolio .portfolio-workflow-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; } .single-portfolio .portfolio-workflow-gallery-overlay { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 6px; padding: 24px 22px 5%; background: linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,0)); color: #fff; text-align: left; } .single-portfolio .portfolio-workflow-gallery-alt, .single-portfolio .portfolio-workflow-gallery-caption, .single-portfolio .portfolio-workflow-lightbox-alt, .single-portfolio .portfolio-workflow-lightbox-caption { display: block; } .single-portfolio .portfolio-workflow-lightbox { position: fixed; inset: 0; z-index: 9999; } .single-portfolio .portfolio-workflow-lightbox-backdrop { position: absolute; inset: 0; background: rgba(28, 40, 43, 0.9); backdrop-filter: blur(14px); } .single-portfolio .portfolio-workflow-lightbox-dialog { position: relative; z-index: 2; width: min(92vw, 1400px); height: min(88vh, 900px); margin: 6vh auto; display: flex; align-items: center; justify-content: center; gap: 16px; } .single-portfolio .portfolio-workflow-lightbox-media-wrap { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; } .single-portfolio .portfolio-workflow-lightbox-image { max-width: 100%; max-height: calc(100% - 72px); display: block; object-fit: contain; } .single-portfolio .portfolio-workflow-lightbox-meta { width: 100%; margin-top: 16px; text-align: center; } .single-portfolio .portfolio-workflow-lightbox-close{ position: absolute; top: -44px; right: -44px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 999px; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 100000000000000; } .single-portfolio .portfolio-workflow-lightbox-nav { appearance: none; border: 0; width: 56px; height: 56px; border-radius: 5px; background: rgba(34, 34, 34, 0.65); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background 0.25s ease, opacity 0.25s ease, transform 0.25s ease; } .single-portfolio .portfolio-workflow-lightbox-close:hover{ transform: scale(.9); background: transparent; } .single-portfolio .portfolio-workflow-lightbox-nav:hover { background: #648e97; } .single-portfolio .portfolio-workflow-lightbox-close:active, .single-portfolio .portfolio-workflow-lightbox-nav:active { transform: scale(0.96); } .single-portfolio .portfolio-workflow-lightbox-close:focus-visible, .single-portfolio .portfolio-workflow-lightbox-nav:focus-visible { outline: 2px solid rgba(255,255,255,0.9); outline-offset: 3px; } .single-portfolio .portfolio-workflow-lightbox-close img { display: block; width: 15px; height: 15px; pointer-events: none; } .single-portfolio .portfolio-workflow-lightbox-nav img { width: 24px; height: 24px; object-fit: contain; display: block; pointer-events: none; transition: transform 0.25s ease; } .single-portfolio .portfolio-workflow-lightbox-prev:hover img { transform: translateX(6px); } .single-portfolio .portfolio-workflow-lightbox-next:hover img { transform: translateX(-6px); } .single-portfolio .portfolio-workflow-lightbox-close:hover img { transform: scale(0.92); } .single-portfolio .portfolio-workflow-lightbox-close { position: absolute; top: 18px; right: 18px; z-index: 3; } .single-portfolio .portfolio-workflow-lightbox-nav { flex: 0 0 auto; } body.workflow-lightbox-open { overflow: hidden; } @media (max-width: 1200px) { .single-portfolio .portfolio-workflow-section-inner { max-width: 80%; } .single-portfolio .portfolio-workflow-videos-item, .single-portfolio .portfolio-workflow-video-carousel-box.is-single .portfolio-workflow-videos-item { width: min(82%, 900px); } .single-portfolio .portfolio-workflow-section-inner-gallery { width: 850px; max-width: 80%; margin: 0 auto; padding: 0; position: relative; } } @media (max-width: 900px) { .single-portfolio .portfolio-workflow-video-carousel-box { height: 380px; } .single-portfolio .portfolio-workflow-videos-item, .single-portfolio .portfolio-workflow-video-carousel-box.is-single .portfolio-workflow-videos-item { width: min(80%, 900px); } /* Keep CPT row percentages on mobile/tablet; only reduce row height */ .single-portfolio .portfolio-workflow-gallery-row { flex-wrap: nowrap; min-height: calc(var(--portfolio-workflow-row-height) * 0.5); } .single-portfolio .portfolio-workflow-gallery-item { height: calc(var(--portfolio-workflow-row-height) * 0.5); } } @media (max-width: 768px) { .portfolio-related-projects-gallery { --related-item-expand-side: 0px; --related-gallery-arrow-size: 44px; --related-gallery-side-padding: 56px; max-width: calc(100vw - 16px); padding-top: 24px; padding-bottom: 24px; } .portfolio-related-projects-gallery-track { justify-content: center; gap: 8px; } .portfolio-related-projects-gallery-item { flex: 0 0 22vw; width: 22vw; min-height: 180px; max-height: 180px; transform: none; transition: transform 0.35s ease, opacity 0.35s ease, filter 0.35s ease, width 0.35s ease; } .portfolio-related-projects-gallery-item.is-mobile-side { flex-basis: 14vw; width: 14vw; opacity: 0.75; filter: brightness(0.8); } .portfolio-related-projects-gallery-item.is-mobile-center { flex-basis: min(44vw, 210px); width: min(44vw, 210px); z-index: 20; } .portfolio-related-projects-gallery-item.is-mobile-center img { left: 0; width: 100%; opacity: 0.96; filter: brightness(0.78); } .portfolio-related-projects-gallery-item.is-mobile-center .portfolio-related-projects-gallery-overlay { left: 0; width: 100%; opacity: 1; } .portfolio-related-projects-gallery-item.is-mobile-side .portfolio-related-projects-gallery-overlay { opacity: 0; } .portfolio-related-projects-gallery-item.is-shift-left, .portfolio-related-projects-gallery-item.is-shift-right { transform: none; } .portfolio-related-projects-gallery-arrow-left { left: 10px; } .portfolio-related-projects-gallery-arrow-right { right: 10px; } .portfolio-related-projects-gallery-arrow img { width: 22px; height: 22px; } .portfolio-related-projects-gallery-title { font-size: 12px; } .portfolio-related-projects-gallery-client { font-size: 10px; } } /* ================================================ WORKFLOW GALLERY — SOFT IMAGE HOVER ZOOM ================================================ */ .single-portfolio .portfolio-workflow-gallery-item { position: relative; overflow: hidden; } .single-portfolio .portfolio-workflow-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1); transform-origin: center center; transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), filter 0.5s ease; will-change: transform; } .single-portfolio .portfolio-workflow-gallery-item:hover img { transform: scale(1.06); } /* Optional: slightly enhance overlay readability while hovering */ .single-portfolio .portfolio-workflow-gallery-item:hover .portfolio-workflow-gallery-overlay { background: linear-gradient(to top, rgba(0,0,0,.86), rgba(0,0,0,0.08)); transition: background 0.35s ease; } .portfolio-workflow-gallery-alt { text-align: center; font-size: clamp(10px, 19px, 24px); font-weight: 400; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: 'Futura PT', sans-serif; } .portfolio-workflow-gallery-caption { text-align: center; font-size: clamp(9px, 50vw, 14px); font-weight: 400; margin-top: -6px; color: #fff; font-family: 'Futura PT', sans-serif; } @media (max-width: 768px) { /* Hide role caption on mobile */ .portfolio-workflow-gallery-alt { display: none !important; } /* Title caption mobile styling */ .portfolio-workflow-gallery-caption { font-size: 14px !important; opacity: 0.8 !important; /*text-shadow: 1px 1px 1px #aaa, 1px 1px 1px #aaa !important;*/ } } /* -------------------------------------------------------------------- */ /* ------------ RELATED PROJECTS GALLERY STRIP ----------- */ /* ------------------------------------------------------------------- */ .portfolio-related-projects-gallery { --related-gallery-gap: 5px; --related-item-expand-side: 150px; --related-gallery-arrow-size: 60px; --related-gallery-side-padding: 92px; position: relative; width: min(90vw, 1400px); max-width: calc(100vw - 24px); margin: 0 auto; display: block; background-color: #111111; padding: 40px var(--related-gallery-side-padding); overflow: hidden; box-sizing: border-box; } .portfolio-related-projects-gallery-track-wrap { width: 100%; overflow: hidden; } .portfolio-related-projects-gallery-track { display: flex; align-items: stretch; justify-content: center; gap: var(--related-gallery-gap); overflow: visible; padding: 8px 0; } .portfolio-related-projects-gallery-track.is-animating { pointer-events: none; } .portfolio-related-projects-gallery-item { position: relative; flex: 0 0 clamp(60px, 5.25vw, 105px); width: clamp(60px, 5.25vw, 105px); min-width: 0; aspect-ratio: 9 / 16; min-height: 360px; max-height: 360px; border-radius: 5px; overflow: visible; background: transparent; display: block; isolation: isolate; text-decoration: none; transition: transform 0.35s ease; will-change: transform; } .portfolio-related-projects-gallery-item::before { content: ""; position: absolute; inset: 0; border-radius: 5px; background: #1a1a1a; box-shadow: 0 0 0 rgba(0, 0, 0, 0); transition: box-shadow 0.35s ease; z-index: 0; } .portfolio-related-projects-gallery-item:hover, .portfolio-related-projects-gallery-item:focus-visible, .portfolio-related-projects-gallery-item.is-hovered { z-index: 20; } .portfolio-related-projects-gallery-item:hover::before, .portfolio-related-projects-gallery-item:focus-visible::before, .portfolio-related-projects-gallery-item.is-hovered::before { box-shadow: 0 14px 32px rgba(0, 0, 0, 0.28); } .portfolio-related-projects-gallery-item img, .portfolio-related-projects-gallery-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; box-sizing: border-box; border-radius: 5px; transition: width 0.35s ease, left 0.35s ease, opacity 0.35s ease, filter 0.35s ease; } .portfolio-related-projects-gallery-item img { display: block; object-fit: cover; z-index: 1; } .portfolio-related-projects-gallery-item:hover img, .portfolio-related-projects-gallery-item:focus-visible img, .portfolio-related-projects-gallery-item.is-hovered img, .portfolio-related-projects-gallery-item:hover .portfolio-related-projects-gallery-overlay, .portfolio-related-projects-gallery-item:focus-visible .portfolio-related-projects-gallery-overlay, .portfolio-related-projects-gallery-item.is-hovered .portfolio-related-projects-gallery-overlay { left: calc(var(--related-item-expand-side) * -1); width: calc(100% + (var(--related-item-expand-side) * 2)); } .portfolio-related-projects-gallery-item:hover img, .portfolio-related-projects-gallery-item:focus-visible img, .portfolio-related-projects-gallery-item.is-hovered img { opacity: 0.96; filter: brightness(0.78); } .portfolio-related-projects-gallery-item.is-shift-left { transform: translateX(calc(var(--related-item-expand-side) * -1)); } .portfolio-related-projects-gallery-item.is-shift-right { transform: translateX(var(--related-item-expand-side)); } .portfolio-related-projects-gallery-overlay { display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; padding: 14px; background: linear-gradient( to top, rgba(0, 0, 0, 0.84) 0%, rgba(0, 0, 0, 0.42) 45%, rgba(0, 0, 0, 0) 100% ); background-repeat: no-repeat; background-size: 100% 100%; background-position: center; opacity: 0; overflow: hidden; pointer-events: none; z-index: 2; } .portfolio-related-projects-gallery-item:hover .portfolio-related-projects-gallery-overlay, .portfolio-related-projects-gallery-item:focus-visible .portfolio-related-projects-gallery-overlay, .portfolio-related-projects-gallery-item.is-hovered .portfolio-related-projects-gallery-overlay { opacity: 1; } .portfolio-related-projects-gallery-title { font-family: "Futura PT", sans-serif; font-size: 15px; line-height: 1.2; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; } .portfolio-related-projects-gallery-client { margin-top: 4px; font-family: "Futura PT", sans-serif; font-size: 11px; line-height: 1.2; letter-spacing: 0.05em; color: rgba(255,255,255,0.78); text-transform: none; } .portfolio-related-projects-gallery-arrow { position: absolute; top: 45%; width: var(--related-gallery-arrow-size); height: var(--related-gallery-arrow-size); min-width: var(--related-gallery-arrow-size); min-height: var(--related-gallery-arrow-size); border: 0; border-radius: 5px; background: rgba(34, 34, 34, 0.65); cursor: pointer; z-index: 40; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(6px); transition: background 0.25s ease, opacity 0.25s ease; } .portfolio-related-projects-gallery-arrow-left { left: 50px; } .portfolio-related-projects-gallery-arrow-right { right: 50px; } .portfolio-related-projects-gallery-arrow:hover { background: rgba(100, 142, 151, 1); } .portfolio-related-projects-gallery-arrow img { display: block; width: 28px; height: 28px; object-fit: contain; transition: transform 0.25s ease, opacity 0.25s ease; } .portfolio-related-projects-gallery-arrow-left:hover img { transform: translateX(10px); } .portfolio-related-projects-gallery-arrow-right:hover img { transform: translateX(-10px); } @media (max-width: 1200px) { .portfolio-related-projects-gallery { --related-item-expand-side: 110px; --related-gallery-side-padding: 76px; } .portfolio-related-projects-gallery-item { flex-basis: clamp(54px, 5.6vw, 90px); width: clamp(54px, 5.6vw, 90px); min-height: 320px; max-height: 320px; } } @media (max-width: 900px) { .portfolio-related-projects-gallery { --related-item-expand-side: 80px; --related-gallery-side-padding: 64px; padding-top: 32px; padding-bottom: 32px; } .portfolio-related-projects-gallery-item { flex-basis: clamp(50px, 8vw, 75px); width: clamp(50px, 8vw, 75px); min-height: 240px; max-height: 240px; } .portfolio-related-projects-gallery-title { font-size: 13px; } } @media (max-width: 768px) { .portfolio-related-projects-gallery { --related-item-expand-side: 0px; --related-gallery-arrow-size: 44px; --related-gallery-side-padding: 56px; max-width: calc(100vw - 16px); padding-top: 24px; padding-bottom: 24px; } .portfolio-related-projects-gallery-track { justify-content: center; gap: 8px; } .portfolio-related-projects-gallery-item { flex: 0 0 22vw; width: 22vw; min-height: 180px; max-height: 180px; transform: none; transition: transform 0.35s ease, opacity 0.35s ease, filter 0.35s ease, width 0.35s ease; } .portfolio-related-projects-gallery-item.is-mobile-side { flex-basis: 14vw; width: 14vw; opacity: 0.75; filter: brightness(0.8); } .portfolio-related-projects-gallery-item.is-mobile-center { flex-basis: min(44vw, 210px); width: min(44vw, 210px); z-index: 20; } .portfolio-related-projects-gallery-item.is-mobile-center img { left: 0; width: 100%; opacity: 0.96; filter: brightness(0.78); } .portfolio-related-projects-gallery-item.is-mobile-center .portfolio-related-projects-gallery-overlay { left: 0; width: 100%; opacity: 1; } .portfolio-related-projects-gallery-item.is-mobile-side .portfolio-related-projects-gallery-overlay { opacity: 0; } .portfolio-related-projects-gallery-item.is-shift-left, .portfolio-related-projects-gallery-item.is-shift-right { transform: none; } .portfolio-related-projects-gallery-arrow-left { left: 10px; } .portfolio-related-projects-gallery-arrow-right { right: 10px; } .portfolio-related-projects-gallery-arrow img { width: 22px; height: 22px; } .portfolio-related-projects-gallery-title { font-size: 12px; } .portfolio-related-projects-gallery-client { font-size: 10px; } } /* ============================================================================================================================================================================ */ /* ================================================ ILLUSTRATIONS SHORTCODE GALLERY independent from single-portfolio ================================================ */ .illustrations-gallery-shortcode { width: 100%; } .illustrations-gallery-shortcode .illustrations-grid { display: flex; flex-direction: column; gap: 3px; width: 100%; } .illustrations-gallery-shortcode .illustrations-grid-row { --illustrations-row-height: 200px; display: flex; flex-wrap: nowrap; gap: 3px; width: 100%; min-height: var(--illustrations-row-height); } .illustrations-gallery-shortcode .illustrations-grid-item { position: relative; display: block; flex: 0 0 auto; min-width: 0; height: var(--illustrations-row-height); border: 0; padding: 0; margin: 0; overflow: hidden; cursor: pointer; background: #0e0e0e; border-radius: 5px; -webkit-appearance: none; appearance: none; transform: none !important; isolation: isolate; } .illustrations-gallery-shortcode .illustrations-grid-item:active, .illustrations-gallery-shortcode .illustrations-grid-item:focus, .illustrations-gallery-shortcode .illustrations-grid-item:focus-visible { transform: none !important; outline: none; } .illustrations-gallery-shortcode .illustrations-grid-item img { position: relative; z-index: 0; width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1); transform-origin: center center; transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), filter 0.5s ease; will-change: transform; } .illustrations-gallery-shortcode .illustrations-grid-item:hover img { transform: scale(1.06); } /* full-cover texture layer only */ .illustrations-gallery-shortcode .illustrations-grid-overlay { position: absolute; inset: 0; background-image: url("https://milomassacci.com/wp-content/uploads/2025/12/diagonal-lines_v001-01.png"); background-color: rgba(100, 142, 151, 0.55);; background-size: 320px auto; background-position: top left; background-repeat: repeat; mix-blend-mode: multiply; opacity: 0; pointer-events: none; z-index: 1; transition: opacity 0.4s ease; } .illustrations-grid-meta { transition: opacity 0.4s ease 0.05s, transform 0.4s ease 0.05s; } .illustrations-gallery-shortcode .illustrations-grid-meta { position: absolute; top: 50%; left: 50%; width: calc(100% - 32px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; color: #fff; opacity: 0; transform: translate(-50%, -50%) translateY(20px); transition: opacity 0.4s ease, transform 0.4s ease; z-index: 2; pointer-events: none; } .illustrations-gallery-shortcode .illustrations-grid-meta.is-empty { display: none; } .illustrations-gallery-shortcode .illustrations-grid-item:hover .illustrations-grid-overlay, .illustrations-gallery-shortcode .illustrations-grid-item:focus-visible .illustrations-grid-overlay, .illustrations-gallery-shortcode .illustrations-grid-item:active .illustrations-grid-overlay { opacity: 1; } .illustrations-gallery-shortcode .illustrations-grid-item:hover .illustrations-grid-meta, .illustrations-gallery-shortcode .illustrations-grid-item:focus-visible .illustrations-grid-meta, .illustrations-gallery-shortcode .illustrations-grid-item:active .illustrations-grid-meta { opacity: 1; transform: translate(-50%, -50%) translateY(0); } .illustrations-gallery-shortcode .illustrations-grid-alt, .illustrations-gallery-shortcode .illustrations-grid-caption, .illustrations-gallery-shortcode .illustrations-lightbox-alt, .illustrations-gallery-shortcode .illustrations-lightbox-caption, .illustrations-gallery-shortcode .illustrations-lightbox-counter { display: block; } /* consolidated final typography matched to portfolio gallery captions */ .illustrations-gallery-shortcode .illustrations-grid-alt { display: block; font-size: clamp(16px, 21px, 24px); font-weight: 400; line-height: 2; letter-spacing: 2px; color: #fff; font-family: 'Futura PT', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .illustrations-gallery-shortcode .illustrations-grid-caption { display: block; font-size: clamp(13px, 16px, 19px); font-weight: 200; letter-spacing: 2px; margin-top: -6px; color: #fff; font-family: 'Futura PT', sans-serif; opacity: 1; max-width: 100%; } @media (max-width: 1200px) { .illustrations-gallery-shortcode .illustrations-grid-alt { font-size: clamp(12px, 14px, 16px) !important; } .illustrations-gallery-shortcode .illustrations-grid-caption { font-size: clamp(8px, 11px, 13px) !important; } } @media (max-width:768px){ .illustrations-gallery-shortcode .illustrations-grid-alt { font-size: clamp(20px,22px,24px)!important; } .illustrations-gallery-shortcode .illustrations-grid-caption { font-size: clamp(11px,13px,15px)!important; } } @media (max-width: 450px) { .illustrations-gallery-shortcode .illustrations-grid-alt { font-size: clamp(13px, 15px, 16px) !important; } .illustrations-gallery-shortcode .illustrations-grid-caption { font-size: clamp(8px, 10px, 12px) !important; } } .illustrations-gallery-shortcode .illustrations-lightbox { position: fixed; inset: 0; z-index: 9999; } .illustrations-gallery-shortcode .illustrations-lightbox-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.88); } .illustrations-gallery-shortcode .illustrations-lightbox-dialog { position: relative; z-index: 2; width: min(92vw, 1400px); height: min(88vh, 900px); margin: 6vh auto; display: flex; align-items: center; justify-content: center; gap: 16px; } .illustrations-gallery-shortcode .illustrations-lightbox-media-wrap { position: relative; flex: 1 1 auto; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; } .illustrations-gallery-shortcode .illustrations-lightbox-image { max-width: 100%; max-height: calc(88vh - 20vh); width: auto; height: auto; display: block; border-radius: 6px; margin-top: 120px; object-fit: contain; } .illustrations-gallery-shortcode .illustrations-lightbox-meta { margin-top: 16px; color: #fff; text-align: center; } .illustrations-gallery-shortcode .illustrations-lightbox-counter { margin-top: 8px; color: rgba(255, 255, 255, 0.72); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; } /* merged single desktop block */ .illustrations-gallery-shortcode .illustrations-lightbox-close { position: absolute; top: 10%; right: 18px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 999px; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 3; } .illustrations-gallery-shortcode .illustrations-lightbox-nav { appearance: none; border: 0; width: 56px; height: 56px; border-radius: 5px; background: rgba(34, 34, 34, 0.65); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background 0.25s ease, opacity 0.25s ease, transform 0.25s ease; transform: scale(0.5); } .illustrations-gallery-shortcode .illustrations-lightbox-close:hover { transform: scale(0.9); background: transparent; } .illustrations-gallery-shortcode .illustrations-lightbox-nav:hover { background: #648e97; } .illustrations-gallery-shortcode .illustrations-lightbox-close:active, .illustrations-gallery-shortcode .illustrations-lightbox-nav:active { transform: scale(0.5); } .illustrations-gallery-shortcode .illustrations-lightbox-close:focus-visible, .illustrations-gallery-shortcode .illustrations-lightbox-nav:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.9); outline-offset: 3px; transform: scale(0.5); } .illustrations-gallery-shortcode .illustrations-lightbox-close img { display: block; width: 15px; height: 15px; pointer-events: none; } .illustrations-gallery-shortcode .illustrations-lightbox-nav img { width: 24px; height: 24px; object-fit: contain; display: block; pointer-events: none; transition: transform 0.25s ease; } .illustrations-gallery-shortcode .illustrations-lightbox-prev:hover img { transform: translateX(6px); } .illustrations-gallery-shortcode .illustrations-lightbox-next:hover img { transform: translateX(-6px); } .illustrations-gallery-shortcode .illustrations-lightbox-close:hover img { transform: scale(0.72); } body.illustrations-lightbox-open { overflow: hidden; } @media (max-width: 768px) { .illustrations-gallery-shortcode .illustrations-grid-row { flex-wrap: wrap; aspect-ratio: auto; min-height: 0; } .illustrations-gallery-shortcode .illustrations-grid-item { flex-basis: 100% !important; width: 100% !important; height: auto !important; min-height: 0; aspect-ratio: 20 / 10; } .illustrations-gallery-shortcode .illustrations-lightbox-dialog { width: calc(100vw - 20px); height: calc(100vh - 20px); margin: 10px auto; gap: 10px; } .illustrations-gallery-shortcode .illustrations-lightbox-close, .illustrations-gallery-shortcode .illustrations-lightbox-nav { width: 46px; height: 46px; } .illustrations-gallery-shortcode .illustrations-lightbox-close img, .illustrations-gallery-shortcode .illustrations-lightbox-nav img { width: 20px; height: 20px; } .illustrations-gallery-shortcode .illustrations-grid-alt { font-size: clamp(20px, 22px, 24px) !important; } .illustrations-gallery-shortcode .illustrations-grid-caption { font-size: clamp(11px, 13px, 15px) !important; } .illustrations-gallery-shortcode .illustrations-grid-item.mobile-focus .illustrations-grid-overlay { opacity: 1; } .illustrations-gallery-shortcode .illustrations-grid-item.mobile-focus .illustrations-grid-meta { opacity: 1; transform: translate(-50%, -50%) translateY(0); } .illustrations-gallery-shortcode .illustrations-grid-item.mobile-focus img { transform: scale(1.06); } } /* === GALLERY HOVER UNIFICATION PATCH v2 === */ .single-portfolio .portfolio-workflow-gallery-item, .illustrations-gallery-shortcode .illustrations-grid-item { position: relative; overflow: hidden; isolation: isolate; } .single-portfolio .portfolio-workflow-gallery-item img, .illustrations-gallery-shortcode .illustrations-grid-item img { position: relative; z-index: 0; } .single-portfolio .portfolio-workflow-gallery-overlay { position: absolute; inset: 0; background-image: url("https://milomassacci.com/wp-content/uploads/2025/12/diagonal-lines_v001-01.png"); background-size: 320px auto; background-position: top left; background-repeat: repeat; mix-blend-mode: overlay; opacity: 0; pointer-events: none; z-index: 1; transition: opacity 0.4s ease; } .single-portfolio .portfolio-workflow-gallery-meta, .illustrations-gallery-shortcode .illustrations-grid-meta { position: absolute; top: 50%; left: 50%; width: calc(100% - 32px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; color: #fff; opacity: 0; transform: translate(-50%, -50%) translateY(20px); transition: opacity 0.4s ease, transform 0.4s ease; z-index: 2; pointer-events: none; } .single-portfolio .portfolio-workflow-gallery-meta.is-empty, .illustrations-gallery-shortcode .illustrations-grid-meta.is-empty { display: none; } .single-portfolio .portfolio-workflow-gallery-item:hover .portfolio-workflow-gallery-overlay, .single-portfolio .portfolio-workflow-gallery-item:focus-visible .portfolio-workflow-gallery-overlay, .single-portfolio .portfolio-workflow-gallery-item:active .portfolio-workflow-gallery-overlay { opacity: 1; } .single-portfolio .portfolio-workflow-gallery-item:hover .portfolio-workflow-gallery-meta, .single-portfolio .portfolio-workflow-gallery-item:focus-visible .portfolio-workflow-gallery-meta, .single-portfolio .portfolio-workflow-gallery-item:active .portfolio-workflow-gallery-meta { opacity: 1; transform: translate(-50%, -50%) translateY(0); } .single-portfolio .portfolio-workflow-gallery-alt, .single-portfolio .portfolio-workflow-gallery-caption { display: block; color: #fff; font-family: 'Futura PT', sans-serif; max-width: 100%; } .single-portfolio .portfolio-workflow-gallery-alt { font-size: clamp(10px, 19px, 24px); font-weight: 400; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .single-portfolio .portfolio-workflow-gallery-caption { font-size: clamp(9px, 50vw, 14px); font-weight: 400; line-height: 1.25; margin-top: -6px; opacity: 1; } .single-portfolio .portfolio-workflow-gallery-item:hover img, .illustrations-gallery-shortcode .illustrations-grid-item:hover img { transform: scale(1.06); } @media (max-width: 768px) { .single-portfolio .portfolio-workflow-lightbox-close, .single-portfolio .portfolio-workflow-lightbox-nav { width: 46px; height: 46px; } .single-portfolio .portfolio-workflow-lightbox-close img, .single-portfolio .portfolio-workflow-lightbox-nav img { width: 20px; height: 20px; } } /* ============================================================================================================================================================================ */ /* ================================================ SOLID HEADER SCROLL + MOBILE BRANDING FADE =============================================================================== */ /* ============================================================================================================================================================================ */ .header-solid-sticky { position: sticky; top: 0; z-index: 999999999; } .site-header-solid { width: 100%; height: 80px; background: transparent; backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); z-index: 99999999; transition: background 0.35s ease, backdrop-filter 0.35s ease, -webkit-backdrop-filter 0.35s ease, opacity 0.35s ease; } .site-header-solid.is-scrolled { background: rgba(34, 34, 34, 0.71); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(6px); } body.home .site-header-solid { z-index: 999999999999999 !important; position: relative; margin-bottom: -100px !important; } .wp-block-group.site-header-solid-branding { display: flex; align-items: center; height: 100%; z-index: 99999999; opacity: 1; visibility: visible; transform: translateY(0); transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease; } @media (max-width: 767px) { body.mobile-menu-is-open .wp-block-group.site-header-solid-branding { opacity: 0; visibility: hidden; transform: translateY(-8px); pointer-events: none; } } /* ================================================ UNIFIED GALLERY / LIGHTBOX OVERRIDES ================================================ */ :root { --milo-lightbox-shell-width: min(92vw, 1400px); --milo-lightbox-shell-height: min(88vh, 900px); --milo-lightbox-frame-radius: 16px; --milo-lightbox-control-size: 56px; --milo-lightbox-close-size: 44px; --milo-lightbox-edge-offset: 18px; --milo-lightbox-nav-side-offset: 18px; --milo-lightbox-media-padding: 72px; } .milo-unified-lightbox-dialog { position: relative; width: var(--milo-lightbox-shell-width); height: var(--milo-lightbox-shell-height); margin: 6vh auto; display: flex; align-items: stretch; justify-content: center; gap: 0; } .milo-unified-lightbox-media-wrap { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--milo-lightbox-media-padding); border-radius: var(--milo-lightbox-frame-radius); box-sizing: border-box; } .milo-unified-lightbox-close { position: absolute !important; top: var(--milo-lightbox-edge-offset) !important; right: var(--milo-lightbox-edge-offset) !important; width: var(--milo-lightbox-close-size) !important; height: var(--milo-lightbox-close-size) !important; display: flex; align-items: center; justify-content: center; z-index: 5 !important; } .milo-unified-lightbox-nav { position: absolute !important; top: 50%; width: var(--milo-lightbox-control-size) !important; height: var(--milo-lightbox-control-size) !important; display: flex; align-items: center; justify-content: center; transform: translateY(-50%) !important; z-index: 4; } .milo-unified-lightbox-prev { left: var(--milo-lightbox-nav-side-offset); } .milo-unified-lightbox-next { right: var(--milo-lightbox-nav-side-offset); } .single-portfolio .portfolio-workflow-lightbox-backdrop, .illustrations-gallery-shortcode .illustrations-lightbox-backdrop, .video-lightbox { background: rgba(28, 40, 43, 0.9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .single-portfolio .portfolio-workflow-lightbox-media-wrap, .illustrations-gallery-shortcode .illustrations-lightbox-media-wrap { background: transparent; } .single-portfolio .portfolio-workflow-lightbox-image, .illustrations-gallery-shortcode .illustrations-lightbox-image { width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; margin-top: 0; } .single-portfolio .portfolio-workflow-lightbox-meta, .illustrations-gallery-shortcode .illustrations-lightbox-meta { width: min(100%, 900px); margin-top: 16px; text-align: center; } .illustrations-gallery-shortcode .illustrations-lightbox-counter { margin-top: 10px; } .single-portfolio .portfolio-workflow-lightbox-nav, .illustrations-gallery-shortcode .illustrations-lightbox-nav { border-radius: 5px; background: rgba(34, 34, 34, 0.65); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .illustrations-gallery-shortcode .illustrations-lightbox-nav { transform: translateY(-50%) !important; } .single-portfolio .portfolio-workflow-lightbox-nav img, .illustrations-gallery-shortcode .illustrations-lightbox-nav img { width: 24px; height: 24px; } .video-lightbox { padding: 20px; } .milo-unified-video-lightbox-dialog { position: relative; width: min(92vw, 1200px); max-width: 1200px; display: flex; align-items: center; justify-content: center; padding: 72px; box-sizing: border-box; } .milo-unified-video-lightbox-media-wrap { width: 100%; border-radius: var(--milo-lightbox-frame-radius); overflow: hidden; } .video-lightbox-close { background: transparent; } @media (max-width: 781px) { :root { --milo-lightbox-shell-width: calc(100vw - 20px); --milo-lightbox-shell-height: calc(100vh - 20px); --milo-lightbox-control-size: 46px; --milo-lightbox-close-size: 46px; --milo-lightbox-edge-offset: 10px; --milo-lightbox-nav-side-offset: 10px; --milo-lightbox-media-padding: 56px 18px 28px; } .milo-unified-video-lightbox-dialog { width: 100%; padding: 56px 0 0; } .video-lightbox { padding: 14px; } } /* ================================================ LIGHTBOX LAYERING + OVERLAY OVERRIDES ================================================ */ :root { --milo-lightbox-overlay-z: 2147483646; } .single-portfolio .portfolio-workflow-lightbox, .illustrations-gallery-shortcode .illustrations-lightbox, .video-lightbox { z-index: var(--milo-lightbox-overlay-z) !important; } .single-portfolio .portfolio-workflow-lightbox-backdrop, .illustrations-gallery-shortcode .illustrations-lightbox-backdrop, .video-lightbox { background: rgba(0, 0, 0, 0.9) !important; backdrop-filter: blur(25px) !important; -webkit-backdrop-filter: blur(25px) !important; } .single-portfolio .portfolio-workflow-lightbox-dialog, .illustrations-gallery-shortcode .illustrations-lightbox-dialog, .video-lightbox-content { cursor: default; } .single-portfolio .portfolio-workflow-lightbox-media-wrap, .illustrations-gallery-shortcode .illustrations-lightbox-media-wrap, .video-lightbox-content { cursor: pointer; } .single-portfolio .portfolio-workflow-lightbox-image, .single-portfolio .portfolio-workflow-lightbox-meta, .illustrations-gallery-shortcode .illustrations-lightbox-image, .illustrations-gallery-shortcode .illustrations-lightbox-meta, .illustrations-gallery-shortcode .illustrations-lightbox-counter, .video-lightbox iframe, .video-lightbox .video-container, .video-lightbox .video-lightbox-close, .single-portfolio .portfolio-workflow-lightbox-close, .single-portfolio .portfolio-workflow-lightbox-nav, .illustrations-gallery-shortcode .illustrations-lightbox-close, .illustrations-gallery-shortcode .illustrations-lightbox-nav { cursor: auto; } /* ================================================ ILLUSTRATIONS GALLERY — MOBILE FOCUS / CENTERED CAPTIONS ================================================ */ @media (max-width: 768px) { .illustrations-gallery-shortcode .illustrations-grid-item img, .illustrations-gallery-shortcode .illustrations-grid-item .illustrations-grid-overlay { width: 100%; height: 100%; object-fit: cover; } .illustrations-gallery-shortcode .illustrations-grid-meta { top: 50%; left: 50%; width: 80%; max-width: 500px; text-align: center; opacity: 0; transform: translate(-50%, -40%) !important; transition: opacity 0.4s ease, transform 0.4s ease; } .illustrations-gallery-shortcode .illustrations-grid-item.mobile-focus .illustrations-grid-overlay, .illustrations-gallery-shortcode .illustrations-grid-item.mobile-focus .illustrations-grid-meta { opacity: 1; } .illustrations-gallery-shortcode .illustrations-grid-item.mobile-focus .illustrations-grid-meta { transform: translate(-50%, -50%) !important; } } /* ================================================ PORTFOLIO GALLERY MOBILE FOCUS ZOOM RESTORE ================================================ */ @media (max-width: 768px) { /* Keep mobile hidden state explicit */ .portfolio-gallery .gallery-item .overlay, .portfolio-gallery .gallery-item .video-caption { opacity: 0 !important; } /* Show overlay + captions for the focused mobile card */ .portfolio-gallery .gallery-item.mobile-focus .overlay, .portfolio-gallery .gallery-item.active .overlay { opacity: 1 !important; } .portfolio-gallery .gallery-item.mobile-focus .video-caption, .portfolio-gallery .gallery-item.active .video-caption { opacity: 1 !important; transform: translate(-50%, -50%) translateY(0) !important; } /* Restore thumbnail zoom on mobile focus */ .portfolio-gallery .gallery-item.mobile-focus img, .portfolio-gallery .gallery-item.active img { transform: scale(1.16) !important; } /* Smooth reset for non-focused items */ .portfolio-gallery .gallery-item img { transform: scale(1); transform-origin: center center; transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), filter 0.5s ease; will-change: transform; } /* Mobile previews stay image-only */ .portfolio-gallery .gallery-item video { display: none !important; } } /* ================================================ PORTFOLIO GALLERY /// FULL CREDITS TOGGLE ================================================ */ .portfolio-gallery-module .portfolio-full-credit { margin-top: 2px; } .portfolio-gallery-module .portfolio-credits-btn { margin-top: 16px; margin-bottom: 0; } .portfolio-gallery-module .portfolio-credits-wrapper { /*width: 100%;*/ margin-top: 16px; } .portfolio-gallery-module .single-portfolio-credits-section { margin-left: 0; } .portfolio-gallery-module .single-portfolio-credits-grid { grid-template-columns: 1fr; } @media (min-width: 900px) { .portfolio-gallery-module .single-portfolio-credits-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* snippet copied for single-portfolio links block */ .single-portfolio .description-link { margin-top: 18px; } /* PULIZIA MENU MOBILE */ .site-header-mobile-menu-item:not(:last-child) { border-bottom: 0 solid transparent !important; }