.elementor-572 .elementor-element.elementor-element-6575f72{--display:flex;--overlay-opacity:1;--margin-top:-70px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-572 .elementor-element.elementor-element-6575f72::before, .elementor-572 .elementor-element.elementor-element-6575f72 > .elementor-background-video-container::before, .elementor-572 .elementor-element.elementor-element-6575f72 > .e-con-inner > .elementor-background-video-container::before, .elementor-572 .elementor-element.elementor-element-6575f72 > .elementor-background-slideshow::before, .elementor-572 .elementor-element.elementor-element-6575f72 > .e-con-inner > .elementor-background-slideshow::before, .elementor-572 .elementor-element.elementor-element-6575f72 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';}.elementor-widget-icon-list .elementor-icon-list-item:not(:last-child):after{border-color:var( --e-global-color-text );}.elementor-widget-icon-list .elementor-icon-list-icon i{color:var( --e-global-color-primary );}.elementor-widget-icon-list .elementor-icon-list-icon svg{fill:var( --e-global-color-primary );}.elementor-widget-icon-list .elementor-icon-list-item > .elementor-icon-list-text, .elementor-widget-icon-list .elementor-icon-list-item > a{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-icon-list .elementor-icon-list-text{color:var( --e-global-color-secondary );}.elementor-572 .elementor-element.elementor-element-fe5dabe{padding:13px 0px 0px 0px;--e-icon-list-icon-size:9px;--icon-vertical-align:flex-start;--icon-vertical-offset:8px;}.elementor-572 .elementor-element.elementor-element-fe5dabe .elementor-icon-list-icon i{transition:color 0.3s;}.elementor-572 .elementor-element.elementor-element-fe5dabe .elementor-icon-list-icon svg{transition:fill 0.3s;}.elementor-572 .elementor-element.elementor-element-fe5dabe .elementor-icon-list-item > .elementor-icon-list-text, .elementor-572 .elementor-element.elementor-element-fe5dabe .elementor-icon-list-item > a{font-family:"urw-din-semi-condensed", Sans-serif;font-weight:400;}.elementor-572 .elementor-element.elementor-element-fe5dabe .elementor-icon-list-text{color:var( --e-global-color-text );transition:color 0.3s;}.elementor-572 .elementor-element.elementor-element-be49eb8{padding:13px 0px 0px 0px;--e-icon-list-icon-size:9px;--icon-vertical-align:flex-start;--icon-vertical-offset:8px;}.elementor-572 .elementor-element.elementor-element-be49eb8 .elementor-icon-list-icon i{transition:color 0.3s;}.elementor-572 .elementor-element.elementor-element-be49eb8 .elementor-icon-list-icon svg{transition:fill 0.3s;}.elementor-572 .elementor-element.elementor-element-be49eb8 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-572 .elementor-element.elementor-element-be49eb8 .elementor-icon-list-item > a{font-family:"urw-din-semi-condensed", Sans-serif;font-weight:400;}.elementor-572 .elementor-element.elementor-element-be49eb8 .elementor-icon-list-text{color:var( --e-global-color-text );transition:color 0.3s;}.elementor-572 .elementor-element.elementor-element-d0f146b{padding:13px 0px 0px 0px;--e-icon-list-icon-size:9px;--icon-vertical-align:flex-start;--icon-vertical-offset:8px;}.elementor-572 .elementor-element.elementor-element-d0f146b .elementor-icon-list-icon i{transition:color 0.3s;}.elementor-572 .elementor-element.elementor-element-d0f146b .elementor-icon-list-icon svg{transition:fill 0.3s;}.elementor-572 .elementor-element.elementor-element-d0f146b .elementor-icon-list-item > .elementor-icon-list-text, .elementor-572 .elementor-element.elementor-element-d0f146b .elementor-icon-list-item > a{font-family:"urw-din-semi-condensed", Sans-serif;font-weight:400;}.elementor-572 .elementor-element.elementor-element-d0f146b .elementor-icon-list-text{color:var( --e-global-color-text );transition:color 0.3s;}.elementor-572 .elementor-element.elementor-element-b844de4{padding:13px 0px 0px 0px;--e-icon-list-icon-size:9px;--icon-vertical-align:flex-start;--icon-vertical-offset:8px;}.elementor-572 .elementor-element.elementor-element-b844de4 .elementor-icon-list-icon i{transition:color 0.3s;}.elementor-572 .elementor-element.elementor-element-b844de4 .elementor-icon-list-icon svg{transition:fill 0.3s;}.elementor-572 .elementor-element.elementor-element-b844de4 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-572 .elementor-element.elementor-element-b844de4 .elementor-icon-list-item > a{font-family:"urw-din-semi-condensed", Sans-serif;font-weight:400;}.elementor-572 .elementor-element.elementor-element-b844de4 .elementor-icon-list-text{color:var( --e-global-color-text );transition:color 0.3s;}.elementor-572 .elementor-element.elementor-element-0d53608{--display:flex;--overlay-opacity:1;}.elementor-572 .elementor-element.elementor-element-0d53608::before, .elementor-572 .elementor-element.elementor-element-0d53608 > .elementor-background-video-container::before, .elementor-572 .elementor-element.elementor-element-0d53608 > .e-con-inner > .elementor-background-video-container::before, .elementor-572 .elementor-element.elementor-element-0d53608 > .elementor-background-slideshow::before, .elementor-572 .elementor-element.elementor-element-0d53608 > .e-con-inner > .elementor-background-slideshow::before, .elementor-572 .elementor-element.elementor-element-0d53608 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';}.elementor-572 .elementor-element.elementor-element-f241e29{padding:13px 0px 0px 0px;--e-icon-list-icon-size:9px;--icon-vertical-align:flex-start;--icon-vertical-offset:8px;}.elementor-572 .elementor-element.elementor-element-f241e29 .elementor-icon-list-icon i{transition:color 0.3s;}.elementor-572 .elementor-element.elementor-element-f241e29 .elementor-icon-list-icon svg{transition:fill 0.3s;}.elementor-572 .elementor-element.elementor-element-f241e29 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-572 .elementor-element.elementor-element-f241e29 .elementor-icon-list-item > a{font-family:"urw-din-semi-condensed", Sans-serif;font-weight:400;}.elementor-572 .elementor-element.elementor-element-f241e29 .elementor-icon-list-text{color:var( --e-global-color-text );transition:color 0.3s;}.elementor-572 .elementor-element.elementor-element-2f60ba3{padding:13px 0px 0px 0px;--e-icon-list-icon-size:9px;--icon-vertical-align:flex-start;--icon-vertical-offset:8px;}.elementor-572 .elementor-element.elementor-element-2f60ba3 .elementor-icon-list-icon i{transition:color 0.3s;}.elementor-572 .elementor-element.elementor-element-2f60ba3 .elementor-icon-list-icon svg{transition:fill 0.3s;}.elementor-572 .elementor-element.elementor-element-2f60ba3 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-572 .elementor-element.elementor-element-2f60ba3 .elementor-icon-list-item > a{font-family:"urw-din-semi-condensed", Sans-serif;font-weight:400;}.elementor-572 .elementor-element.elementor-element-2f60ba3 .elementor-icon-list-text{color:var( --e-global-color-text );transition:color 0.3s;}.elementor-572 .elementor-element.elementor-element-35b02d4{padding:13px 0px 0px 0px;--e-icon-list-icon-size:9px;--icon-vertical-align:flex-start;--icon-vertical-offset:8px;}.elementor-572 .elementor-element.elementor-element-35b02d4 .elementor-icon-list-icon i{transition:color 0.3s;}.elementor-572 .elementor-element.elementor-element-35b02d4 .elementor-icon-list-icon svg{transition:fill 0.3s;}.elementor-572 .elementor-element.elementor-element-35b02d4 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-572 .elementor-element.elementor-element-35b02d4 .elementor-icon-list-item > a{font-family:"urw-din-semi-condensed", Sans-serif;font-weight:400;}.elementor-572 .elementor-element.elementor-element-35b02d4 .elementor-icon-list-text{color:var( --e-global-color-text );transition:color 0.3s;}.elementor-572 .elementor-element.elementor-element-56d3111{padding:13px 0px 0px 0px;--e-icon-list-icon-size:9px;--icon-vertical-align:flex-start;--icon-vertical-offset:8px;}.elementor-572 .elementor-element.elementor-element-56d3111 .elementor-icon-list-icon i{transition:color 0.3s;}.elementor-572 .elementor-element.elementor-element-56d3111 .elementor-icon-list-icon svg{transition:fill 0.3s;}.elementor-572 .elementor-element.elementor-element-56d3111 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-572 .elementor-element.elementor-element-56d3111 .elementor-icon-list-item > a{font-family:"urw-din-semi-condensed", Sans-serif;font-weight:400;}.elementor-572 .elementor-element.elementor-element-56d3111 .elementor-icon-list-text{color:var( --e-global-color-text );transition:color 0.3s;}.elementor-572 .elementor-element.elementor-element-a198725{--display:flex;--overlay-opacity:1;}.elementor-572 .elementor-element.elementor-element-a198725::before, .elementor-572 .elementor-element.elementor-element-a198725 > .elementor-background-video-container::before, .elementor-572 .elementor-element.elementor-element-a198725 > .e-con-inner > .elementor-background-video-container::before, .elementor-572 .elementor-element.elementor-element-a198725 > .elementor-background-slideshow::before, .elementor-572 .elementor-element.elementor-element-a198725 > .e-con-inner > .elementor-background-slideshow::before, .elementor-572 .elementor-element.elementor-element-a198725 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';}.elementor-572 .elementor-element.elementor-element-5539e7a{padding:13px 0px 0px 0px;--e-icon-list-icon-size:9px;--icon-vertical-align:flex-start;--icon-vertical-offset:8px;}.elementor-572 .elementor-element.elementor-element-5539e7a .elementor-icon-list-icon i{transition:color 0.3s;}.elementor-572 .elementor-element.elementor-element-5539e7a .elementor-icon-list-icon svg{transition:fill 0.3s;}.elementor-572 .elementor-element.elementor-element-5539e7a .elementor-icon-list-item > .elementor-icon-list-text, .elementor-572 .elementor-element.elementor-element-5539e7a .elementor-icon-list-item > a{font-family:"urw-din-semi-condensed", Sans-serif;font-weight:400;}.elementor-572 .elementor-element.elementor-element-5539e7a .elementor-icon-list-text{color:var( --e-global-color-text );transition:color 0.3s;}.elementor-572 .elementor-element.elementor-element-69ca2d9{padding:13px 0px 0px 0px;--e-icon-list-icon-size:9px;--icon-vertical-align:flex-start;--icon-vertical-offset:8px;}.elementor-572 .elementor-element.elementor-element-69ca2d9 .elementor-icon-list-icon i{transition:color 0.3s;}.elementor-572 .elementor-element.elementor-element-69ca2d9 .elementor-icon-list-icon svg{transition:fill 0.3s;}.elementor-572 .elementor-element.elementor-element-69ca2d9 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-572 .elementor-element.elementor-element-69ca2d9 .elementor-icon-list-item > a{font-family:"urw-din-semi-condensed", Sans-serif;font-weight:400;}.elementor-572 .elementor-element.elementor-element-69ca2d9 .elementor-icon-list-text{color:var( --e-global-color-text );transition:color 0.3s;}.elementor-572 .elementor-element.elementor-element-554bbb0{padding:13px 0px 0px 0px;--e-icon-list-icon-size:9px;--icon-vertical-align:flex-start;--icon-vertical-offset:8px;}.elementor-572 .elementor-element.elementor-element-554bbb0 .elementor-icon-list-icon i{transition:color 0.3s;}.elementor-572 .elementor-element.elementor-element-554bbb0 .elementor-icon-list-icon svg{transition:fill 0.3s;}.elementor-572 .elementor-element.elementor-element-554bbb0 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-572 .elementor-element.elementor-element-554bbb0 .elementor-icon-list-item > a{font-family:"urw-din-semi-condensed", Sans-serif;font-weight:400;}.elementor-572 .elementor-element.elementor-element-554bbb0 .elementor-icon-list-text{color:var( --e-global-color-text );transition:color 0.3s;}.elementor-572 .elementor-element.elementor-element-6ce2912{padding:13px 0px 0px 0px;--e-icon-list-icon-size:9px;--icon-vertical-align:flex-start;--icon-vertical-offset:8px;}.elementor-572 .elementor-element.elementor-element-6ce2912 .elementor-icon-list-icon i{transition:color 0.3s;}.elementor-572 .elementor-element.elementor-element-6ce2912 .elementor-icon-list-icon svg{transition:fill 0.3s;}.elementor-572 .elementor-element.elementor-element-6ce2912 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-572 .elementor-element.elementor-element-6ce2912 .elementor-icon-list-item > a{font-family:"urw-din-semi-condensed", Sans-serif;font-weight:400;}.elementor-572 .elementor-element.elementor-element-6ce2912 .elementor-icon-list-text{color:var( --e-global-color-text );transition:color 0.3s;}.elementor-572 .elementor-element.elementor-element-9743c1a{--display:flex;--overlay-opacity:1;}.elementor-572 .elementor-element.elementor-element-9743c1a::before, .elementor-572 .elementor-element.elementor-element-9743c1a > .elementor-background-video-container::before, .elementor-572 .elementor-element.elementor-element-9743c1a > .e-con-inner > .elementor-background-video-container::before, .elementor-572 .elementor-element.elementor-element-9743c1a > .elementor-background-slideshow::before, .elementor-572 .elementor-element.elementor-element-9743c1a > .e-con-inner > .elementor-background-slideshow::before, .elementor-572 .elementor-element.elementor-element-9743c1a > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-572 .elementor-element.elementor-element-158c272 .elementor-button{background-color:var( --e-global-color-primary );font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );fill:var( --e-global-color-text );color:var( --e-global-color-text );}.elementor-572 .elementor-element.elementor-element-158c272 .elementor-button:hover, .elementor-572 .elementor-element.elementor-element-158c272 .elementor-button:focus{background-color:var( --e-global-color-text );color:var( --e-global-color-secondary );}.elementor-572 .elementor-element.elementor-element-158c272.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-572 .elementor-element.elementor-element-158c272 .elementor-button:hover svg, .elementor-572 .elementor-element.elementor-element-158c272 .elementor-button:focus svg{fill:var( --e-global-color-secondary );}body.elementor-page-572:not(.elementor-motion-effects-element-type-background), body.elementor-page-572 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://gobyteme.com/wp-content/uploads/2026/07/Portfolio-Background-v8.jpg");background-position:top center;background-repeat:no-repeat;background-size:cover;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-572 .elementor-element.elementor-element-6575f72{--content-width:60%;}.elementor-572 .elementor-element.elementor-element-0d53608{--content-width:60%;}.elementor-572 .elementor-element.elementor-element-a198725{--content-width:60%;}.elementor-572 .elementor-element.elementor-element-9743c1a{--content-width:60%;}}@media(max-width:1024px) and (min-width:768px){.elementor-572 .elementor-element.elementor-element-6575f72{--content-width:90%;}.elementor-572 .elementor-element.elementor-element-0d53608{--content-width:90%;}.elementor-572 .elementor-element.elementor-element-a198725{--content-width:90%;}.elementor-572 .elementor-element.elementor-element-9743c1a{--content-width:90%;}}@media(min-width:1025px){body.elementor-page-572:not(.elementor-motion-effects-element-type-background), body.elementor-page-572 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-attachment:fixed;}}@media(max-width:1024px){body.elementor-page-572:not(.elementor-motion-effects-element-type-background), body.elementor-page-572 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://gobyteme.com/wp-content/uploads/2026/07/spacer.png");}}@media(max-width:767px){.elementor-572 .elementor-element.elementor-element-6575f72{--content-width:100%;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-572 .elementor-element.elementor-element-fe5dabe{--e-icon-list-icon-align:center;--e-icon-list-icon-margin:0 calc(var(--e-icon-list-icon-size, 1em) * 0.125);--icon-vertical-align:flex-start;--icon-vertical-offset:16px;}.elementor-572 .elementor-element.elementor-element-be49eb8{--icon-vertical-offset:16px;}.elementor-572 .elementor-element.elementor-element-d0f146b{--icon-vertical-offset:16px;}.elementor-572 .elementor-element.elementor-element-b844de4{--icon-vertical-offset:16px;}.elementor-572 .elementor-element.elementor-element-0d53608{--content-width:100%;}.elementor-572 .elementor-element.elementor-element-f241e29{--icon-vertical-offset:16px;}.elementor-572 .elementor-element.elementor-element-2f60ba3{--icon-vertical-offset:16px;}.elementor-572 .elementor-element.elementor-element-35b02d4{--icon-vertical-offset:16px;}.elementor-572 .elementor-element.elementor-element-56d3111{--icon-vertical-offset:16px;}.elementor-572 .elementor-element.elementor-element-a198725{--content-width:100%;}.elementor-572 .elementor-element.elementor-element-5539e7a{--icon-vertical-offset:16px;}.elementor-572 .elementor-element.elementor-element-69ca2d9{--icon-vertical-offset:16px;}.elementor-572 .elementor-element.elementor-element-554bbb0{--icon-vertical-offset:16px;}.elementor-572 .elementor-element.elementor-element-6ce2912{--icon-vertical-offset:16px;}.elementor-572 .elementor-element.elementor-element-9743c1a{--content-width:70%;}.elementor-572 .elementor-element.elementor-element-158c272{width:var( --container-widget-width, 140px );max-width:140px;--container-widget-width:140px;--container-widget-flex-grow:0;}body.elementor-page-572:not(.elementor-motion-effects-element-type-background), body.elementor-page-572 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://gobyteme.com/wp-content/uploads/2026/07/spacer.png");background-size:auto;}}/* Start custom CSS for container, class: .elementor-element-6575f72 *//* ========================================================= BYTE PIXEL PORTFOLIO — STUDIO MOUNT STYLE FULL REPLACEMENT CSS Add to: Byte Pixel Portfolio Widget Advanced → Custom CSS IMPORTANT: Delete the previous version before adding this one. ========================================================= */ /* ========================================================= 1. GLOBAL STYLE SETTINGS Adjust these variables to customize the appearance. ========================================================= */ .elementor-572 .elementor-element.elementor-element-6575f72 { --byte-mount-size: 5px; --byte-mount-color: #171717; --byte-inner-edge-color: rgba(255, 255, 255, 0.09); --byte-image-edge-color: rgba(255, 255, 255, 0.06); --byte-orange: #f57c00; --byte-orange-light: #ff911e; --byte-corner-radius: 3px; --byte-image-radius: 1px; --byte-hover-lift: -5px; --byte-hover-scale: 1.012; --byte-transition-speed: 350ms; --byte-shadow-normal: 0 10px 22px rgba(0, 0, 0, 0.44), 0 3px 7px rgba(0, 0, 0, 0.52); --byte-shadow-hover: 0 20px 34px rgba(0, 0, 0, 0.62), 0 6px 12px rgba(0, 0, 0, 0.48); } /* ========================================================= 2. OUTER PORTFOLIO ITEMS Keeps frames, shadows and decorations visible. ========================================================= */ .elementor-572 .elementor-element.elementor-element-6575f72 .byte-portfolio-item, .elementor-572 .elementor-element.elementor-element-6575f72 .byte-me-portfolio-item, .elementor-572 .elementor-element.elementor-element-6575f72 .bmp-portfolio-item, .elementor-572 .elementor-element.elementor-element-6575f72 .bmp-item, .elementor-572 .elementor-element.elementor-element-6575f72 .portfolio-item { position: relative; overflow: visible; isolation: isolate; transition: transform 400ms ease, opacity 320ms ease, filter 320ms ease; } /* Raise the entire item while hovering so it appears above neighboring portfolio images. */ .elementor-572 .elementor-element.elementor-element-6575f72 .byte-portfolio-item:hover, .elementor-572 .elementor-element.elementor-element-6575f72 .byte-me-portfolio-item:hover, .elementor-572 .elementor-element.elementor-element-6575f72 .bmp-portfolio-item:hover, .elementor-572 .elementor-element.elementor-element-6575f72 .bmp-item:hover, .elementor-572 .elementor-element.elementor-element-6575f72 .portfolio-item:hover { z-index: 30; } /* ========================================================= 3. IMAGE LINK AND MOUNTING BOARD The frame is attached to the visible image link. ========================================================= */ .elementor-572 .elementor-element.elementor-element-6575f72 .byte-portfolio-item > a, .elementor-572 .elementor-element.elementor-element-6575f72 .byte-me-portfolio-item > a, .elementor-572 .elementor-element.elementor-element-6575f72 .bmp-portfolio-item > a, .elementor-572 .elementor-element.elementor-element-6575f72 .bmp-item > a, .elementor-572 .elementor-element.elementor-element-6575f72 .portfolio-item > a, .elementor-572 .elementor-element.elementor-element-6575f72 .byte-portfolio-image, .elementor-572 .elementor-element.elementor-element-6575f72 .byte-me-portfolio-image, .elementor-572 .elementor-element.elementor-element-6575f72 .bmp-portfolio-image, .elementor-572 .elementor-element.elementor-element-6575f72 .bmp-image-wrapper { position: relative; display: block; box-sizing: border-box; padding: var(--byte-mount-size); background: var(--byte-mount-color); border: 1px solid var(--byte-inner-edge-color); border-radius: var(--byte-corner-radius); box-shadow: var(--byte-shadow-normal); transform: translateY(0) scale(1); transform-origin: center center; transition: transform var(--byte-transition-speed) ease, box-shadow var(--byte-transition-speed) ease, border-color var(--byte-transition-speed) ease; overflow: visible; z-index: 1; } /* ========================================================= 4. PORTFOLIO IMAGES Keeps the artwork clean and unchanged. ========================================================= */ .elementor-572 .elementor-element.elementor-element-6575f72 .byte-portfolio-item img, .elementor-572 .elementor-element.elementor-element-6575f72 .byte-me-portfolio-item img, .elementor-572 .elementor-element.elementor-element-6575f72 .bmp-portfolio-item img, .elementor-572 .elementor-element.elementor-element-6575f72 .bmp-item img, .elementor-572 .elementor-element.elementor-element-6575f72 .portfolio-item img { position: relative; z-index: 1; display: block; width: 100%; max-width: 100%; height: auto; margin: 0; border: 1px solid var(--byte-image-edge-color); border-radius: var(--byte-image-radius); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18); transition: filter var(--byte-transition-speed) ease, opacity var(--byte-transition-speed) ease; } /* Preserve plugin Cover and fixed-height image behavior. */ .elementor-572 .elementor-element.elementor-element-6575f72 .byte-portfolio-item img[style*="object-fit"], .elementor-572 .elementor-element.elementor-element-6575f72 .byte-me-portfolio-item img[style*="object-fit"], .elementor-572 .elementor-element.elementor-element-6575f72 .bmp-portfolio-item img[style*="object-fit"], .elementor-572 .elementor-element.elementor-element-6575f72 .bmp-item img[style*="object-fit"], .elementor-572 .elementor-element.elementor-element-6575f72 .portfolio-item img[style*="object-fit"] { height: 100%; } /* ========================================================= 5. HOVER LIFT AND DEPTH Makes the portfolio print lift away from the wall. ========================================================= */ .elementor-572 .elementor-element.elementor-element-6575f72 .byte-portfolio-item:hover > a, .elementor-572 .elementor-element.elementor-element-6575f72 .byte-me-portfolio-item:hover > a, .elementor-572 .elementor-element.elementor-element-6575f72 .bmp-portfolio-item:hover > a, .elementor-572 .elementor-element.elementor-element-6575f72 .bmp-item:hover > a, .elementor-572 .elementor-element.elementor-element-6575f72 .portfolio-item:hover > a, .elementor-572 .elementor-element.elementor-element-6575f72 .byte-portfolio-item:hover .byte-portfolio-image, .elementor-572 .elementor-element.elementor-element-6575f72 .byte-me-portfolio-item:hover .byte-me-portfolio-image, .elementor-572 .elementor-element.elementor-element-6575f72 .bmp-portfolio-item:hover .bmp-portfolio-image, .elementor-572 .elementor-element.elementor-element-6575f72 .bmp-item:hover .bmp-image-wrapper { transform: translateY(var(--byte-hover-lift)) scale(var(--byte-hover-scale)); box-shadow: var(--byte-shadow-hover), 0 0 18px rgba(245, 124, 0, 0.11); border-color: rgba(245, 124, 0, 0.24); z-index: 20; } /* ========================================================= 6. SUBTLE ORANGE EDGE LIGHT Appears underneath the print only while hovering. ========================================================= */ .elementor-572 .elementor-element.elementor-element-6575f72 .byte-portfolio-item > a::after, .elementor-572 .elementor-element.elementor-element-6575f72 .byte-me-portfolio-item > a::after, .elementor-572 .elementor-element.elementor-element-6575f72 .bmp-portfolio-item > a::after, .elementor-572 .elementor-element.elementor-element-6575f72 .bmp-item > a::after, .elementor-572 .elementor-element.elementor-element-6575f72 .portfolio-item > a::after, .elementor-572 .elementor-element.elementor-element-6575f72 .byte-portfolio-image::after, .elementor-572 .elementor-element.elementor-element-6575f72 .byte-me-portfolio-image::after, .elementor-572 .elementor-element.elementor-element-6575f72 .bmp-portfolio-image::after, .elementor-572 .elementor-element.elementor-element-6575f72 .bmp-image-wrapper::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: -4px; height: 4px; background: linear-gradient( 90deg, transparent 0%, rgba(245, 124, 0, 0.10) 15%, rgba(245, 124, 0, 0.30) 32%, rgba(245, 124, 0, 0.55) 50%, rgba(245, 124, 0, 0.30) 68%, rgba(245, 124, 0, 0.10) 85%, transparent 100% ); opacity: 0; filter: blur(4px); transform: scaleX(0.75); transition: opacity var(--byte-transition-speed) ease, transform var(--byte-transition-speed) ease; pointer-events: none; z-index: -1; } .elementor-572 .elementor-element.elementor-element-6575f72 .byte-portfolio-item:hover > a::after, .elementor-572 .elementor-element.elementor-element-6575f72 .byte-me-portfolio-item:hover > a::after, .elementor-572 .elementor-element.elementor-element-6575f72 .bmp-portfolio-item:hover > a::after, .elementor-572 .elementor-element.elementor-element-6575f72 .bmp-item:hover > a::after, .elementor-572 .elementor-element.elementor-element-6575f72 .portfolio-item:hover > a::after, .elementor-572 .elementor-element.elementor-element-6575f72 .byte-portfolio-item:hover .byte-portfolio-image::after, .elementor-572 .elementor-element.elementor-element-6575f72 .byte-me-portfolio-item:hover .byte-me-portfolio-image::after, .elementor-572 .elementor-element.elementor-element-6575f72 .bmp-portfolio-item:hover .bmp-portfolio-image::after, .elementor-572 .elementor-element.elementor-element-6575f72 .bmp-item:hover .bmp-image-wrapper::after { opacity: 1; transform: scaleX(1); } /* ========================================================= 7. OPTIONAL ORANGE TAPE — FIXED VERSION The tape is now attached to the image link instead of the outer masonry item. This prevents tape from appearing in empty areas below or beside the visible image. Approximate frequency: One tape detail every 13th and 19th item. ========================================================= */ .elementor-572 .elementor-element.elementor-element-6575f72 .byte-portfolio-item:nth-child(13n + 3) > a::before, .elementor-572 .elementor-element.elementor-element-6575f72 .byte-me-portfolio-item:nth-child(13n + 3) > a::before, .elementor-572 .elementor-element.elementor-element-6575f72 .bmp-portfolio-item:nth-child(13n + 3) > a::before, .elementor-572 .elementor-element.elementor-element-6575f72 .bmp-item:nth-child(13n + 3) > a::before, .elementor-572 .elementor-element.elementor-element-6575f72 .portfolio-item:nth-child(13n + 3) > a::before, .elementor-572 .elementor-element.elementor-element-6575f72 .byte-portfolio-item:nth-child(19n + 7) > a::before, .elementor-572 .elementor-element.elementor-element-6575f72 .byte-me-portfolio-item:nth-child(19n + 7) > a::before, .elementor-572 .elementor-element.elementor-element-6575f72 .bmp-portfolio-item:nth-child(19n + 7) > a::before, .elementor-572 .elementor-element.elementor-element-6575f72 .bmp-item:nth-child(19n + 7) > a::before, .elementor-572 .elementor-element.elementor-element-6575f72 .portfolio-item:nth-child(19n + 7) > a::before { content: ""; position: absolute; top: -7px; left: 18px; width: 42px; height: 14px; background: linear-gradient( 90deg, rgba(214, 92, 0, 0.78) 0%, rgba(245, 124, 0, 0.88) 25%, rgba(255, 145, 30, 0.92) 50%, rgba(245, 124, 0, 0.88) 75%, rgba(214, 92, 0, 0.78) 100% ); border-left: 1px solid rgba(255, 255, 255, 0.12); border-right: 1px solid rgba(0, 0, 0, 0.18); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.42); transform: rotate(-6deg); transform-origin: center; opacity: 0.9; pointer-events: none; z-index: 40; } /* Place the second tape group on the right side. */ .elementor-572 .elementor-element.elementor-element-6575f72 .byte-portfolio-item:nth-child(19n + 7) > a::before, .elementor-572 .elementor-element.elementor-element-6575f72 .byte-me-portfolio-item:nth-child(19n + 7) > a::before, .elementor-572 .elementor-element.elementor-element-6575f72 .bmp-portfolio-item:nth-child(19n + 7) > a::before, .elementor-572 .elementor-element.elementor-element-6575f72 .bmp-item:nth-child(19n + 7) > a::before, .elementor-572 .elementor-element.elementor-element-6575f72 .portfolio-item:nth-child(19n + 7) > a::before { left: auto; right: 18px; transform: rotate(7deg); } /* ========================================================= 8. SUPPORT FOR PLUGINS USING AN IMAGE WRAPPER These .elementor-572 .elementor-element.elementor-element-6575f72s add tape when the plugin's clickable link is nested instead of being a direct child. They are intentionally limited to named image wrappers. ========================================================= */ .elementor-572 .elementor-element.elementor-element-6575f72 .byte-portfolio-item:nth-child(13n + 3) .byte-portfolio-image::before, .elementor-572 .elementor-element.elementor-element-6575f72 .byte-me-portfolio-item:nth-child(13n + 3) .byte-me-portfolio-image::before, .elementor-572 .elementor-element.elementor-element-6575f72 .bmp-portfolio-item:nth-child(13n + 3) .bmp-portfolio-image::before, .elementor-572 .elementor-element.elementor-element-6575f72 .bmp-item:nth-child(13n + 3) .bmp-image-wrapper::before { content: ""; position: absolute; top: -7px; left: 18px; width: 42px; height: 14px; background: linear-gradient( 90deg, rgba(214, 92, 0, 0.78), rgba(255, 145, 30, 0.92), rgba(214, 92, 0, 0.78) ); border-left: 1px solid rgba(255, 255, 255, 0.12); border-right: 1px solid rgba(0, 0, 0, 0.18); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.42); transform: rotate(-6deg); opacity: 0.9; pointer-events: none; z-index: 40; } .elementor-572 .elementor-element.elementor-element-6575f72 .byte-portfolio-item:nth-child(19n + 7) .byte-portfolio-image::before, .elementor-572 .elementor-element.elementor-element-6575f72 .byte-me-portfolio-item:nth-child(19n + 7) .byte-me-portfolio-image::before, .elementor-572 .elementor-element.elementor-element-6575f72 .bmp-portfolio-item:nth-child(19n + 7) .bmp-portfolio-image::before, .elementor-572 .elementor-element.elementor-element-6575f72 .bmp-item:nth-child(19n + 7) .bmp-image-wrapper::before { content: ""; position: absolute; top: -7px; right: 18px; width: 42px; height: 14px; background: linear-gradient( 90deg, rgba(214, 92, 0, 0.78), rgba(255, 145, 30, 0.92), rgba(214, 92, 0, 0.78) ); border-left: 1px solid rgba(255, 255, 255, 0.12); border-right: 1px solid rgba(0, 0, 0, 0.18); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.42); transform: rotate(7deg); opacity: 0.9; pointer-events: none; z-index: 40; } /* Prevent duplicate tape if both the direct link and named wrapper .elementor-572 .elementor-element.elementor-element-6575f72s happen to match the same portfolio item. */ .elementor-572 .elementor-element.elementor-element-6575f72 .byte-portfolio-item > a .byte-portfolio-image::before, .elementor-572 .elementor-element.elementor-element-6575f72 .byte-me-portfolio-item > a .byte-me-portfolio-image::before, .elementor-572 .elementor-element.elementor-element-6575f72 .bmp-portfolio-item > a .bmp-portfolio-image::before, .elementor-572 .elementor-element.elementor-element-6575f72 .bmp-item > a .bmp-image-wrapper::before { display: none; } /* ========================================================= 9. FILTER BUTTONS Dark industrial label styling. ========================================================= */ .elementor-572 .elementor-element.elementor-element-6575f72 button, .elementor-572 .elementor-element.elementor-element-6575f72 .filter-button, .elementor-572 .elementor-element.elementor-element-6575f72 .byte-filter, .elementor-572 .elementor-element.elementor-element-6575f72 .bmp-filter, .elementor-572 .elementor-element.elementor-element-6575f72 .portfolio-filter { border: 1px solid rgba(255, 255, 255, 0.13); border-radius: 3px; background: #171717; color: #e9e9e9; box-shadow: 9px 11px 18px rgba(0, 0, 0, 0.52), inset 0 1px 0 rgba(255, 255, 255, 0.035); transform: translateY(0); transition: background-color 220ms ease, color 220ms ease, border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease; } .elementor-572 .elementor-element.elementor-element-6575f72 button:hover, .elementor-572 .elementor-element.elementor-element-6575f72 .filter-button:hover, .elementor-572 .elementor-element.elementor-element-6575f72 .byte-filter:hover, .elementor-572 .elementor-element.elementor-element-6575f72 .bmp-filter:hover, .elementor-572 .elementor-element.elementor-element-6575f72 .portfolio-filter:hover { border-color: rgba(245, 124, 0, 0.58); color: #ffffff; box-shadow: 10px 12px 19px rgba(0, 0, 0, 0.52), inset 0 0 0 1px rgba(245, 124, 0, 0.08); transform: translateY(-1px); } /* Active filter states. */ .elementor-572 .elementor-element.elementor-element-6575f72 button.active, .elementor-572 .elementor-element.elementor-element-6575f72 button.is-active, .elementor-572 .elementor-element.elementor-element-6575f72 button[aria-pressed="true"], .elementor-572 .elementor-element.elementor-element-6575f72 .filter-button.active, .elementor-572 .elementor-element.elementor-element-6575f72 .filter-button.is-active, .elementor-572 .elementor-element.elementor-element-6575f72 .byte-filter.active, .elementor-572 .elementor-element.elementor-element-6575f72 .byte-filter.is-active, .elementor-572 .elementor-element.elementor-element-6575f72 .bmp-filter.active, .elementor-572 .elementor-element.elementor-element-6575f72 .bmp-filter.is-active, .elementor-572 .elementor-element.elementor-element-6575f72 .portfolio-filter.active, .elementor-572 .elementor-element.elementor-element-6575f72 .portfolio-filter.is-active { background: var(--byte-orange); color: #111111; border-color: rgba(255, 156, 55, 0.80); box-shadow: 0 5px 12px rgba(0, 0, 0, 0.52), inset 0 1px 0 rgba(255, 255, 255, 0.22); transform: translateY(0); } /* ========================================================= 10. KEYBOARD ACCESSIBILITY ========================================================= */ .elementor-572 .elementor-element.elementor-element-6575f72 .byte-portfolio-item a:focus-visible, .elementor-572 .elementor-element.elementor-element-6575f72 .byte-me-portfolio-item a:focus-visible, .elementor-572 .elementor-element.elementor-element-6575f72 .bmp-portfolio-item a:focus-visible, .elementor-572 .elementor-element.elementor-element-6575f72 .bmp-item a:focus-visible, .elementor-572 .elementor-element.elementor-element-6575f72 .portfolio-item a:focus-visible { outline: 2px solid var(--byte-orange); outline-offset: 4px; } /* ========================================================= 11. TABLET Slightly reduces frame thickness and hover movement. ========================================================= */ @media (max-width: 1024px) { .elementor-572 .elementor-element.elementor-element-6575f72 { --byte-mount-size: 4px; --byte-hover-lift: -3px; --byte-hover-scale: 1.008; } } /* ========================================================= 12. MOBILE Simplifies the effect and removes decorative tape. ========================================================= */ @media (max-width: 767px) { .elementor-572 .elementor-element.elementor-element-6575f72 { --byte-mount-size: 3px; --byte-hover-lift: 0px; --byte-hover-scale: 1; } /* Remove tape on mobile. */ .elementor-572 .elementor-element.elementor-element-6575f72 .byte-portfolio-item > a::before, .elementor-572 .elementor-element.elementor-element-6575f72 .byte-me-portfolio-item > a::before, .elementor-572 .elementor-element.elementor-element-6575f72 .bmp-portfolio-item > a::before, .elementor-572 .elementor-element.elementor-element-6575f72 .bmp-item > a::before, .elementor-572 .elementor-element.elementor-element-6575f72 .portfolio-item > a::before, .elementor-572 .elementor-element.elementor-element-6575f72 .byte-portfolio-image::before, .elementor-572 .elementor-element.elementor-element-6575f72 .byte-me-portfolio-image::before, .elementor-572 .elementor-element.elementor-element-6575f72 .bmp-portfolio-image::before, .elementor-572 .elementor-element.elementor-element-6575f72 .bmp-image-wrapper::before { display: none !important; } /* Use a lighter shadow for small screens. */ .elementor-572 .elementor-element.elementor-element-6575f72 .byte-portfolio-item > a, .elementor-572 .elementor-element.elementor-element-6575f72 .byte-me-portfolio-item > a, .elementor-572 .elementor-element.elementor-element-6575f72 .bmp-portfolio-item > a, .elementor-572 .elementor-element.elementor-element-6575f72 .bmp-item > a, .elementor-572 .elementor-element.elementor-element-6575f72 .portfolio-item > a, .elementor-572 .elementor-element.elementor-element-6575f72 .byte-portfolio-image, .elementor-572 .elementor-element.elementor-element-6575f72 .byte-me-portfolio-image, .elementor-572 .elementor-element.elementor-element-6575f72 .bmp-portfolio-image, .elementor-572 .elementor-element.elementor-element-6575f72 .bmp-image-wrapper { box-shadow: 0 7px 14px rgba(0, 0, 0, 0.42), 0 2px 5px rgba(0, 0, 0, 0.50); } /* Disable movement on touch devices. */ .elementor-572 .elementor-element.elementor-element-6575f72 .byte-portfolio-item:hover > a, .elementor-572 .elementor-element.elementor-element-6575f72 .byte-me-portfolio-item:hover > a, .elementor-572 .elementor-element.elementor-element-6575f72 .bmp-portfolio-item:hover > a, .elementor-572 .elementor-element.elementor-element-6575f72 .bmp-item:hover > a, .elementor-572 .elementor-element.elementor-element-6575f72 .portfolio-item:hover > a, .elementor-572 .elementor-element.elementor-element-6575f72 .byte-portfolio-item:hover .byte-portfolio-image, .elementor-572 .elementor-element.elementor-element-6575f72 .byte-me-portfolio-item:hover .byte-me-portfolio-image, .elementor-572 .elementor-element.elementor-element-6575f72 .bmp-portfolio-item:hover .bmp-portfolio-image, .elementor-572 .elementor-element.elementor-element-6575f72 .bmp-item:hover .bmp-image-wrapper { transform: none; } /* Hide orange hover reflection on mobile. */ .elementor-572 .elementor-element.elementor-element-6575f72 .byte-portfolio-item > a::after, .elementor-572 .elementor-element.elementor-element-6575f72 .byte-me-portfolio-item > a::after, .elementor-572 .elementor-element.elementor-element-6575f72 .bmp-portfolio-item > a::after, .elementor-572 .elementor-element.elementor-element-6575f72 .bmp-item > a::after, .elementor-572 .elementor-element.elementor-element-6575f72 .portfolio-item > a::after, .elementor-572 .elementor-element.elementor-element-6575f72 .byte-portfolio-image::after, .elementor-572 .elementor-element.elementor-element-6575f72 .byte-me-portfolio-image::after, .elementor-572 .elementor-element.elementor-element-6575f72 .bmp-portfolio-image::after, .elementor-572 .elementor-element.elementor-element-6575f72 .bmp-image-wrapper::after { display: none; } } /* ========================================================= 13. REDUCED MOTION ACCESSIBILITY ========================================================= */ @media (prefers-reduced-motion: reduce) { .elementor-572 .elementor-element.elementor-element-6575f72 *, .elementor-572 .elementor-element.elementor-element-6575f72 *::before, .elementor-572 .elementor-element.elementor-element-6575f72 *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } } .bmp-filters { justify-content: center; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-0d53608 *//* ========================================================= BYTE PIXEL PORTFOLIO — STUDIO MOUNT STYLE FULL REPLACEMENT CSS Add to: Byte Pixel Portfolio Widget Advanced → Custom CSS IMPORTANT: Delete the previous version before adding this one. ========================================================= */ /* ========================================================= 1. GLOBAL STYLE SETTINGS Adjust these variables to customize the appearance. ========================================================= */ .elementor-572 .elementor-element.elementor-element-0d53608 { --byte-mount-size: 5px; --byte-mount-color: #171717; --byte-inner-edge-color: rgba(255, 255, 255, 0.09); --byte-image-edge-color: rgba(255, 255, 255, 0.06); --byte-orange: #f57c00; --byte-orange-light: #ff911e; --byte-corner-radius: 3px; --byte-image-radius: 1px; --byte-hover-lift: -5px; --byte-hover-scale: 1.012; --byte-transition-speed: 350ms; --byte-shadow-normal: 0 10px 22px rgba(0, 0, 0, 0.44), 0 3px 7px rgba(0, 0, 0, 0.52); --byte-shadow-hover: 0 20px 34px rgba(0, 0, 0, 0.62), 0 6px 12px rgba(0, 0, 0, 0.48); } /* ========================================================= 2. OUTER PORTFOLIO ITEMS Keeps frames, shadows and decorations visible. ========================================================= */ .elementor-572 .elementor-element.elementor-element-0d53608 .byte-portfolio-item, .elementor-572 .elementor-element.elementor-element-0d53608 .byte-me-portfolio-item, .elementor-572 .elementor-element.elementor-element-0d53608 .bmp-portfolio-item, .elementor-572 .elementor-element.elementor-element-0d53608 .bmp-item, .elementor-572 .elementor-element.elementor-element-0d53608 .portfolio-item { position: relative; overflow: visible; isolation: isolate; transition: transform 400ms ease, opacity 320ms ease, filter 320ms ease; } /* Raise the entire item while hovering so it appears above neighboring portfolio images. */ .elementor-572 .elementor-element.elementor-element-0d53608 .byte-portfolio-item:hover, .elementor-572 .elementor-element.elementor-element-0d53608 .byte-me-portfolio-item:hover, .elementor-572 .elementor-element.elementor-element-0d53608 .bmp-portfolio-item:hover, .elementor-572 .elementor-element.elementor-element-0d53608 .bmp-item:hover, .elementor-572 .elementor-element.elementor-element-0d53608 .portfolio-item:hover { z-index: 30; } /* ========================================================= 3. IMAGE LINK AND MOUNTING BOARD The frame is attached to the visible image link. ========================================================= */ .elementor-572 .elementor-element.elementor-element-0d53608 .byte-portfolio-item > a, .elementor-572 .elementor-element.elementor-element-0d53608 .byte-me-portfolio-item > a, .elementor-572 .elementor-element.elementor-element-0d53608 .bmp-portfolio-item > a, .elementor-572 .elementor-element.elementor-element-0d53608 .bmp-item > a, .elementor-572 .elementor-element.elementor-element-0d53608 .portfolio-item > a, .elementor-572 .elementor-element.elementor-element-0d53608 .byte-portfolio-image, .elementor-572 .elementor-element.elementor-element-0d53608 .byte-me-portfolio-image, .elementor-572 .elementor-element.elementor-element-0d53608 .bmp-portfolio-image, .elementor-572 .elementor-element.elementor-element-0d53608 .bmp-image-wrapper { position: relative; display: block; box-sizing: border-box; padding: var(--byte-mount-size); background: var(--byte-mount-color); border: 1px solid var(--byte-inner-edge-color); border-radius: var(--byte-corner-radius); box-shadow: var(--byte-shadow-normal); transform: translateY(0) scale(1); transform-origin: center center; transition: transform var(--byte-transition-speed) ease, box-shadow var(--byte-transition-speed) ease, border-color var(--byte-transition-speed) ease; overflow: visible; z-index: 1; } /* ========================================================= 4. PORTFOLIO IMAGES Keeps the artwork clean and unchanged. ========================================================= */ .elementor-572 .elementor-element.elementor-element-0d53608 .byte-portfolio-item img, .elementor-572 .elementor-element.elementor-element-0d53608 .byte-me-portfolio-item img, .elementor-572 .elementor-element.elementor-element-0d53608 .bmp-portfolio-item img, .elementor-572 .elementor-element.elementor-element-0d53608 .bmp-item img, .elementor-572 .elementor-element.elementor-element-0d53608 .portfolio-item img { position: relative; z-index: 1; display: block; width: 100%; max-width: 100%; height: auto; margin: 0; border: 1px solid var(--byte-image-edge-color); border-radius: var(--byte-image-radius); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18); transition: filter var(--byte-transition-speed) ease, opacity var(--byte-transition-speed) ease; } /* Preserve plugin Cover and fixed-height image behavior. */ .elementor-572 .elementor-element.elementor-element-0d53608 .byte-portfolio-item img[style*="object-fit"], .elementor-572 .elementor-element.elementor-element-0d53608 .byte-me-portfolio-item img[style*="object-fit"], .elementor-572 .elementor-element.elementor-element-0d53608 .bmp-portfolio-item img[style*="object-fit"], .elementor-572 .elementor-element.elementor-element-0d53608 .bmp-item img[style*="object-fit"], .elementor-572 .elementor-element.elementor-element-0d53608 .portfolio-item img[style*="object-fit"] { height: 100%; } /* ========================================================= 5. HOVER LIFT AND DEPTH Makes the portfolio print lift away from the wall. ========================================================= */ .elementor-572 .elementor-element.elementor-element-0d53608 .byte-portfolio-item:hover > a, .elementor-572 .elementor-element.elementor-element-0d53608 .byte-me-portfolio-item:hover > a, .elementor-572 .elementor-element.elementor-element-0d53608 .bmp-portfolio-item:hover > a, .elementor-572 .elementor-element.elementor-element-0d53608 .bmp-item:hover > a, .elementor-572 .elementor-element.elementor-element-0d53608 .portfolio-item:hover > a, .elementor-572 .elementor-element.elementor-element-0d53608 .byte-portfolio-item:hover .byte-portfolio-image, .elementor-572 .elementor-element.elementor-element-0d53608 .byte-me-portfolio-item:hover .byte-me-portfolio-image, .elementor-572 .elementor-element.elementor-element-0d53608 .bmp-portfolio-item:hover .bmp-portfolio-image, .elementor-572 .elementor-element.elementor-element-0d53608 .bmp-item:hover .bmp-image-wrapper { transform: translateY(var(--byte-hover-lift)) scale(var(--byte-hover-scale)); box-shadow: var(--byte-shadow-hover), 0 0 18px rgba(245, 124, 0, 0.11); border-color: rgba(245, 124, 0, 0.24); z-index: 20; } /* ========================================================= 6. SUBTLE ORANGE EDGE LIGHT Appears underneath the print only while hovering. ========================================================= */ .elementor-572 .elementor-element.elementor-element-0d53608 .byte-portfolio-item > a::after, .elementor-572 .elementor-element.elementor-element-0d53608 .byte-me-portfolio-item > a::after, .elementor-572 .elementor-element.elementor-element-0d53608 .bmp-portfolio-item > a::after, .elementor-572 .elementor-element.elementor-element-0d53608 .bmp-item > a::after, .elementor-572 .elementor-element.elementor-element-0d53608 .portfolio-item > a::after, .elementor-572 .elementor-element.elementor-element-0d53608 .byte-portfolio-image::after, .elementor-572 .elementor-element.elementor-element-0d53608 .byte-me-portfolio-image::after, .elementor-572 .elementor-element.elementor-element-0d53608 .bmp-portfolio-image::after, .elementor-572 .elementor-element.elementor-element-0d53608 .bmp-image-wrapper::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: -4px; height: 4px; background: linear-gradient( 90deg, transparent 0%, rgba(245, 124, 0, 0.10) 15%, rgba(245, 124, 0, 0.30) 32%, rgba(245, 124, 0, 0.55) 50%, rgba(245, 124, 0, 0.30) 68%, rgba(245, 124, 0, 0.10) 85%, transparent 100% ); opacity: 0; filter: blur(4px); transform: scaleX(0.75); transition: opacity var(--byte-transition-speed) ease, transform var(--byte-transition-speed) ease; pointer-events: none; z-index: -1; } .elementor-572 .elementor-element.elementor-element-0d53608 .byte-portfolio-item:hover > a::after, .elementor-572 .elementor-element.elementor-element-0d53608 .byte-me-portfolio-item:hover > a::after, .elementor-572 .elementor-element.elementor-element-0d53608 .bmp-portfolio-item:hover > a::after, .elementor-572 .elementor-element.elementor-element-0d53608 .bmp-item:hover > a::after, .elementor-572 .elementor-element.elementor-element-0d53608 .portfolio-item:hover > a::after, .elementor-572 .elementor-element.elementor-element-0d53608 .byte-portfolio-item:hover .byte-portfolio-image::after, .elementor-572 .elementor-element.elementor-element-0d53608 .byte-me-portfolio-item:hover .byte-me-portfolio-image::after, .elementor-572 .elementor-element.elementor-element-0d53608 .bmp-portfolio-item:hover .bmp-portfolio-image::after, .elementor-572 .elementor-element.elementor-element-0d53608 .bmp-item:hover .bmp-image-wrapper::after { opacity: 1; transform: scaleX(1); } /* ========================================================= 7. OPTIONAL ORANGE TAPE — FIXED VERSION The tape is now attached to the image link instead of the outer masonry item. This prevents tape from appearing in empty areas below or beside the visible image. Approximate frequency: One tape detail every 13th and 19th item. ========================================================= */ .elementor-572 .elementor-element.elementor-element-0d53608 .byte-portfolio-item:nth-child(13n + 3) > a::before, .elementor-572 .elementor-element.elementor-element-0d53608 .byte-me-portfolio-item:nth-child(13n + 3) > a::before, .elementor-572 .elementor-element.elementor-element-0d53608 .bmp-portfolio-item:nth-child(13n + 3) > a::before, .elementor-572 .elementor-element.elementor-element-0d53608 .bmp-item:nth-child(13n + 3) > a::before, .elementor-572 .elementor-element.elementor-element-0d53608 .portfolio-item:nth-child(13n + 3) > a::before, .elementor-572 .elementor-element.elementor-element-0d53608 .byte-portfolio-item:nth-child(19n + 7) > a::before, .elementor-572 .elementor-element.elementor-element-0d53608 .byte-me-portfolio-item:nth-child(19n + 7) > a::before, .elementor-572 .elementor-element.elementor-element-0d53608 .bmp-portfolio-item:nth-child(19n + 7) > a::before, .elementor-572 .elementor-element.elementor-element-0d53608 .bmp-item:nth-child(19n + 7) > a::before, .elementor-572 .elementor-element.elementor-element-0d53608 .portfolio-item:nth-child(19n + 7) > a::before { content: ""; position: absolute; top: -7px; left: 18px; width: 42px; height: 14px; background: linear-gradient( 90deg, rgba(214, 92, 0, 0.78) 0%, rgba(245, 124, 0, 0.88) 25%, rgba(255, 145, 30, 0.92) 50%, rgba(245, 124, 0, 0.88) 75%, rgba(214, 92, 0, 0.78) 100% ); border-left: 1px solid rgba(255, 255, 255, 0.12); border-right: 1px solid rgba(0, 0, 0, 0.18); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.42); transform: rotate(-6deg); transform-origin: center; opacity: 0.9; pointer-events: none; z-index: 40; } /* Place the second tape group on the right side. */ .elementor-572 .elementor-element.elementor-element-0d53608 .byte-portfolio-item:nth-child(19n + 7) > a::before, .elementor-572 .elementor-element.elementor-element-0d53608 .byte-me-portfolio-item:nth-child(19n + 7) > a::before, .elementor-572 .elementor-element.elementor-element-0d53608 .bmp-portfolio-item:nth-child(19n + 7) > a::before, .elementor-572 .elementor-element.elementor-element-0d53608 .bmp-item:nth-child(19n + 7) > a::before, .elementor-572 .elementor-element.elementor-element-0d53608 .portfolio-item:nth-child(19n + 7) > a::before { left: auto; right: 18px; transform: rotate(7deg); } /* ========================================================= 8. SUPPORT FOR PLUGINS USING AN IMAGE WRAPPER These .elementor-572 .elementor-element.elementor-element-0d53608s add tape when the plugin's clickable link is nested instead of being a direct child. They are intentionally limited to named image wrappers. ========================================================= */ .elementor-572 .elementor-element.elementor-element-0d53608 .byte-portfolio-item:nth-child(13n + 3) .byte-portfolio-image::before, .elementor-572 .elementor-element.elementor-element-0d53608 .byte-me-portfolio-item:nth-child(13n + 3) .byte-me-portfolio-image::before, .elementor-572 .elementor-element.elementor-element-0d53608 .bmp-portfolio-item:nth-child(13n + 3) .bmp-portfolio-image::before, .elementor-572 .elementor-element.elementor-element-0d53608 .bmp-item:nth-child(13n + 3) .bmp-image-wrapper::before { content: ""; position: absolute; top: -7px; left: 18px; width: 42px; height: 14px; background: linear-gradient( 90deg, rgba(214, 92, 0, 0.78), rgba(255, 145, 30, 0.92), rgba(214, 92, 0, 0.78) ); border-left: 1px solid rgba(255, 255, 255, 0.12); border-right: 1px solid rgba(0, 0, 0, 0.18); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.42); transform: rotate(-6deg); opacity: 0.9; pointer-events: none; z-index: 40; } .elementor-572 .elementor-element.elementor-element-0d53608 .byte-portfolio-item:nth-child(19n + 7) .byte-portfolio-image::before, .elementor-572 .elementor-element.elementor-element-0d53608 .byte-me-portfolio-item:nth-child(19n + 7) .byte-me-portfolio-image::before, .elementor-572 .elementor-element.elementor-element-0d53608 .bmp-portfolio-item:nth-child(19n + 7) .bmp-portfolio-image::before, .elementor-572 .elementor-element.elementor-element-0d53608 .bmp-item:nth-child(19n + 7) .bmp-image-wrapper::before { content: ""; position: absolute; top: -7px; right: 18px; width: 42px; height: 14px; background: linear-gradient( 90deg, rgba(214, 92, 0, 0.78), rgba(255, 145, 30, 0.92), rgba(214, 92, 0, 0.78) ); border-left: 1px solid rgba(255, 255, 255, 0.12); border-right: 1px solid rgba(0, 0, 0, 0.18); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.42); transform: rotate(7deg); opacity: 0.9; pointer-events: none; z-index: 40; } /* Prevent duplicate tape if both the direct link and named wrapper .elementor-572 .elementor-element.elementor-element-0d53608s happen to match the same portfolio item. */ .elementor-572 .elementor-element.elementor-element-0d53608 .byte-portfolio-item > a .byte-portfolio-image::before, .elementor-572 .elementor-element.elementor-element-0d53608 .byte-me-portfolio-item > a .byte-me-portfolio-image::before, .elementor-572 .elementor-element.elementor-element-0d53608 .bmp-portfolio-item > a .bmp-portfolio-image::before, .elementor-572 .elementor-element.elementor-element-0d53608 .bmp-item > a .bmp-image-wrapper::before { display: none; } /* ========================================================= 9. FILTER BUTTONS Dark industrial label styling. ========================================================= */ .elementor-572 .elementor-element.elementor-element-0d53608 button, .elementor-572 .elementor-element.elementor-element-0d53608 .filter-button, .elementor-572 .elementor-element.elementor-element-0d53608 .byte-filter, .elementor-572 .elementor-element.elementor-element-0d53608 .bmp-filter, .elementor-572 .elementor-element.elementor-element-0d53608 .portfolio-filter { border: 1px solid rgba(255, 255, 255, 0.13); border-radius: 3px; background: #171717; color: #e9e9e9; box-shadow: 9px 11px 18px rgba(0, 0, 0, 0.52), inset 0 1px 0 rgba(255, 255, 255, 0.035); transform: translateY(0); transition: background-color 220ms ease, color 220ms ease, border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease; } .elementor-572 .elementor-element.elementor-element-0d53608 button:hover, .elementor-572 .elementor-element.elementor-element-0d53608 .filter-button:hover, .elementor-572 .elementor-element.elementor-element-0d53608 .byte-filter:hover, .elementor-572 .elementor-element.elementor-element-0d53608 .bmp-filter:hover, .elementor-572 .elementor-element.elementor-element-0d53608 .portfolio-filter:hover { border-color: rgba(245, 124, 0, 0.58); color: #ffffff; box-shadow: 10px 12px 19px rgba(0, 0, 0, 0.52), inset 0 0 0 1px rgba(245, 124, 0, 0.08); transform: translateY(-1px); } /* Active filter states. */ .elementor-572 .elementor-element.elementor-element-0d53608 button.active, .elementor-572 .elementor-element.elementor-element-0d53608 button.is-active, .elementor-572 .elementor-element.elementor-element-0d53608 button[aria-pressed="true"], .elementor-572 .elementor-element.elementor-element-0d53608 .filter-button.active, .elementor-572 .elementor-element.elementor-element-0d53608 .filter-button.is-active, .elementor-572 .elementor-element.elementor-element-0d53608 .byte-filter.active, .elementor-572 .elementor-element.elementor-element-0d53608 .byte-filter.is-active, .elementor-572 .elementor-element.elementor-element-0d53608 .bmp-filter.active, .elementor-572 .elementor-element.elementor-element-0d53608 .bmp-filter.is-active, .elementor-572 .elementor-element.elementor-element-0d53608 .portfolio-filter.active, .elementor-572 .elementor-element.elementor-element-0d53608 .portfolio-filter.is-active { background: var(--byte-orange); color: #111111; border-color: rgba(255, 156, 55, 0.80); box-shadow: 0 5px 12px rgba(0, 0, 0, 0.52), inset 0 1px 0 rgba(255, 255, 255, 0.22); transform: translateY(0); } /* ========================================================= 10. KEYBOARD ACCESSIBILITY ========================================================= */ .elementor-572 .elementor-element.elementor-element-0d53608 .byte-portfolio-item a:focus-visible, .elementor-572 .elementor-element.elementor-element-0d53608 .byte-me-portfolio-item a:focus-visible, .elementor-572 .elementor-element.elementor-element-0d53608 .bmp-portfolio-item a:focus-visible, .elementor-572 .elementor-element.elementor-element-0d53608 .bmp-item a:focus-visible, .elementor-572 .elementor-element.elementor-element-0d53608 .portfolio-item a:focus-visible { outline: 2px solid var(--byte-orange); outline-offset: 4px; } /* ========================================================= 11. TABLET Slightly reduces frame thickness and hover movement. ========================================================= */ @media (max-width: 1024px) { .elementor-572 .elementor-element.elementor-element-0d53608 { --byte-mount-size: 4px; --byte-hover-lift: -3px; --byte-hover-scale: 1.008; } } /* ========================================================= 12. MOBILE Simplifies the effect and removes decorative tape. ========================================================= */ @media (max-width: 767px) { .elementor-572 .elementor-element.elementor-element-0d53608 { --byte-mount-size: 3px; --byte-hover-lift: 0px; --byte-hover-scale: 1; } /* Remove tape on mobile. */ .elementor-572 .elementor-element.elementor-element-0d53608 .byte-portfolio-item > a::before, .elementor-572 .elementor-element.elementor-element-0d53608 .byte-me-portfolio-item > a::before, .elementor-572 .elementor-element.elementor-element-0d53608 .bmp-portfolio-item > a::before, .elementor-572 .elementor-element.elementor-element-0d53608 .bmp-item > a::before, .elementor-572 .elementor-element.elementor-element-0d53608 .portfolio-item > a::before, .elementor-572 .elementor-element.elementor-element-0d53608 .byte-portfolio-image::before, .elementor-572 .elementor-element.elementor-element-0d53608 .byte-me-portfolio-image::before, .elementor-572 .elementor-element.elementor-element-0d53608 .bmp-portfolio-image::before, .elementor-572 .elementor-element.elementor-element-0d53608 .bmp-image-wrapper::before { display: none !important; } /* Use a lighter shadow for small screens. */ .elementor-572 .elementor-element.elementor-element-0d53608 .byte-portfolio-item > a, .elementor-572 .elementor-element.elementor-element-0d53608 .byte-me-portfolio-item > a, .elementor-572 .elementor-element.elementor-element-0d53608 .bmp-portfolio-item > a, .elementor-572 .elementor-element.elementor-element-0d53608 .bmp-item > a, .elementor-572 .elementor-element.elementor-element-0d53608 .portfolio-item > a, .elementor-572 .elementor-element.elementor-element-0d53608 .byte-portfolio-image, .elementor-572 .elementor-element.elementor-element-0d53608 .byte-me-portfolio-image, .elementor-572 .elementor-element.elementor-element-0d53608 .bmp-portfolio-image, .elementor-572 .elementor-element.elementor-element-0d53608 .bmp-image-wrapper { box-shadow: 0 7px 14px rgba(0, 0, 0, 0.42), 0 2px 5px rgba(0, 0, 0, 0.50); } /* Disable movement on touch devices. */ .elementor-572 .elementor-element.elementor-element-0d53608 .byte-portfolio-item:hover > a, .elementor-572 .elementor-element.elementor-element-0d53608 .byte-me-portfolio-item:hover > a, .elementor-572 .elementor-element.elementor-element-0d53608 .bmp-portfolio-item:hover > a, .elementor-572 .elementor-element.elementor-element-0d53608 .bmp-item:hover > a, .elementor-572 .elementor-element.elementor-element-0d53608 .portfolio-item:hover > a, .elementor-572 .elementor-element.elementor-element-0d53608 .byte-portfolio-item:hover .byte-portfolio-image, .elementor-572 .elementor-element.elementor-element-0d53608 .byte-me-portfolio-item:hover .byte-me-portfolio-image, .elementor-572 .elementor-element.elementor-element-0d53608 .bmp-portfolio-item:hover .bmp-portfolio-image, .elementor-572 .elementor-element.elementor-element-0d53608 .bmp-item:hover .bmp-image-wrapper { transform: none; } /* Hide orange hover reflection on mobile. */ .elementor-572 .elementor-element.elementor-element-0d53608 .byte-portfolio-item > a::after, .elementor-572 .elementor-element.elementor-element-0d53608 .byte-me-portfolio-item > a::after, .elementor-572 .elementor-element.elementor-element-0d53608 .bmp-portfolio-item > a::after, .elementor-572 .elementor-element.elementor-element-0d53608 .bmp-item > a::after, .elementor-572 .elementor-element.elementor-element-0d53608 .portfolio-item > a::after, .elementor-572 .elementor-element.elementor-element-0d53608 .byte-portfolio-image::after, .elementor-572 .elementor-element.elementor-element-0d53608 .byte-me-portfolio-image::after, .elementor-572 .elementor-element.elementor-element-0d53608 .bmp-portfolio-image::after, .elementor-572 .elementor-element.elementor-element-0d53608 .bmp-image-wrapper::after { display: none; } } /* ========================================================= 13. REDUCED MOTION ACCESSIBILITY ========================================================= */ @media (prefers-reduced-motion: reduce) { .elementor-572 .elementor-element.elementor-element-0d53608 *, .elementor-572 .elementor-element.elementor-element-0d53608 *::before, .elementor-572 .elementor-element.elementor-element-0d53608 *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } } .bmp-filters { justify-content: center; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-a198725 *//* ========================================================= BYTE PIXEL PORTFOLIO — STUDIO MOUNT STYLE FULL REPLACEMENT CSS Add to: Byte Pixel Portfolio Widget Advanced → Custom CSS IMPORTANT: Delete the previous version before adding this one. ========================================================= */ /* ========================================================= 1. GLOBAL STYLE SETTINGS Adjust these variables to customize the appearance. ========================================================= */ .elementor-572 .elementor-element.elementor-element-a198725 { --byte-mount-size: 5px; --byte-mount-color: #171717; --byte-inner-edge-color: rgba(255, 255, 255, 0.09); --byte-image-edge-color: rgba(255, 255, 255, 0.06); --byte-orange: #f57c00; --byte-orange-light: #ff911e; --byte-corner-radius: 3px; --byte-image-radius: 1px; --byte-hover-lift: -5px; --byte-hover-scale: 1.012; --byte-transition-speed: 350ms; --byte-shadow-normal: 0 10px 22px rgba(0, 0, 0, 0.44), 0 3px 7px rgba(0, 0, 0, 0.52); --byte-shadow-hover: 0 20px 34px rgba(0, 0, 0, 0.62), 0 6px 12px rgba(0, 0, 0, 0.48); } /* ========================================================= 2. OUTER PORTFOLIO ITEMS Keeps frames, shadows and decorations visible. ========================================================= */ .elementor-572 .elementor-element.elementor-element-a198725 .byte-portfolio-item, .elementor-572 .elementor-element.elementor-element-a198725 .byte-me-portfolio-item, .elementor-572 .elementor-element.elementor-element-a198725 .bmp-portfolio-item, .elementor-572 .elementor-element.elementor-element-a198725 .bmp-item, .elementor-572 .elementor-element.elementor-element-a198725 .portfolio-item { position: relative; overflow: visible; isolation: isolate; transition: transform 400ms ease, opacity 320ms ease, filter 320ms ease; } /* Raise the entire item while hovering so it appears above neighboring portfolio images. */ .elementor-572 .elementor-element.elementor-element-a198725 .byte-portfolio-item:hover, .elementor-572 .elementor-element.elementor-element-a198725 .byte-me-portfolio-item:hover, .elementor-572 .elementor-element.elementor-element-a198725 .bmp-portfolio-item:hover, .elementor-572 .elementor-element.elementor-element-a198725 .bmp-item:hover, .elementor-572 .elementor-element.elementor-element-a198725 .portfolio-item:hover { z-index: 30; } /* ========================================================= 3. IMAGE LINK AND MOUNTING BOARD The frame is attached to the visible image link. ========================================================= */ .elementor-572 .elementor-element.elementor-element-a198725 .byte-portfolio-item > a, .elementor-572 .elementor-element.elementor-element-a198725 .byte-me-portfolio-item > a, .elementor-572 .elementor-element.elementor-element-a198725 .bmp-portfolio-item > a, .elementor-572 .elementor-element.elementor-element-a198725 .bmp-item > a, .elementor-572 .elementor-element.elementor-element-a198725 .portfolio-item > a, .elementor-572 .elementor-element.elementor-element-a198725 .byte-portfolio-image, .elementor-572 .elementor-element.elementor-element-a198725 .byte-me-portfolio-image, .elementor-572 .elementor-element.elementor-element-a198725 .bmp-portfolio-image, .elementor-572 .elementor-element.elementor-element-a198725 .bmp-image-wrapper { position: relative; display: block; box-sizing: border-box; padding: var(--byte-mount-size); background: var(--byte-mount-color); border: 1px solid var(--byte-inner-edge-color); border-radius: var(--byte-corner-radius); box-shadow: var(--byte-shadow-normal); transform: translateY(0) scale(1); transform-origin: center center; transition: transform var(--byte-transition-speed) ease, box-shadow var(--byte-transition-speed) ease, border-color var(--byte-transition-speed) ease; overflow: visible; z-index: 1; } /* ========================================================= 4. PORTFOLIO IMAGES Keeps the artwork clean and unchanged. ========================================================= */ .elementor-572 .elementor-element.elementor-element-a198725 .byte-portfolio-item img, .elementor-572 .elementor-element.elementor-element-a198725 .byte-me-portfolio-item img, .elementor-572 .elementor-element.elementor-element-a198725 .bmp-portfolio-item img, .elementor-572 .elementor-element.elementor-element-a198725 .bmp-item img, .elementor-572 .elementor-element.elementor-element-a198725 .portfolio-item img { position: relative; z-index: 1; display: block; width: 100%; max-width: 100%; height: auto; margin: 0; border: 1px solid var(--byte-image-edge-color); border-radius: var(--byte-image-radius); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18); transition: filter var(--byte-transition-speed) ease, opacity var(--byte-transition-speed) ease; } /* Preserve plugin Cover and fixed-height image behavior. */ .elementor-572 .elementor-element.elementor-element-a198725 .byte-portfolio-item img[style*="object-fit"], .elementor-572 .elementor-element.elementor-element-a198725 .byte-me-portfolio-item img[style*="object-fit"], .elementor-572 .elementor-element.elementor-element-a198725 .bmp-portfolio-item img[style*="object-fit"], .elementor-572 .elementor-element.elementor-element-a198725 .bmp-item img[style*="object-fit"], .elementor-572 .elementor-element.elementor-element-a198725 .portfolio-item img[style*="object-fit"] { height: 100%; } /* ========================================================= 5. HOVER LIFT AND DEPTH Makes the portfolio print lift away from the wall. ========================================================= */ .elementor-572 .elementor-element.elementor-element-a198725 .byte-portfolio-item:hover > a, .elementor-572 .elementor-element.elementor-element-a198725 .byte-me-portfolio-item:hover > a, .elementor-572 .elementor-element.elementor-element-a198725 .bmp-portfolio-item:hover > a, .elementor-572 .elementor-element.elementor-element-a198725 .bmp-item:hover > a, .elementor-572 .elementor-element.elementor-element-a198725 .portfolio-item:hover > a, .elementor-572 .elementor-element.elementor-element-a198725 .byte-portfolio-item:hover .byte-portfolio-image, .elementor-572 .elementor-element.elementor-element-a198725 .byte-me-portfolio-item:hover .byte-me-portfolio-image, .elementor-572 .elementor-element.elementor-element-a198725 .bmp-portfolio-item:hover .bmp-portfolio-image, .elementor-572 .elementor-element.elementor-element-a198725 .bmp-item:hover .bmp-image-wrapper { transform: translateY(var(--byte-hover-lift)) scale(var(--byte-hover-scale)); box-shadow: var(--byte-shadow-hover), 0 0 18px rgba(245, 124, 0, 0.11); border-color: rgba(245, 124, 0, 0.24); z-index: 20; } /* ========================================================= 6. SUBTLE ORANGE EDGE LIGHT Appears underneath the print only while hovering. ========================================================= */ .elementor-572 .elementor-element.elementor-element-a198725 .byte-portfolio-item > a::after, .elementor-572 .elementor-element.elementor-element-a198725 .byte-me-portfolio-item > a::after, .elementor-572 .elementor-element.elementor-element-a198725 .bmp-portfolio-item > a::after, .elementor-572 .elementor-element.elementor-element-a198725 .bmp-item > a::after, .elementor-572 .elementor-element.elementor-element-a198725 .portfolio-item > a::after, .elementor-572 .elementor-element.elementor-element-a198725 .byte-portfolio-image::after, .elementor-572 .elementor-element.elementor-element-a198725 .byte-me-portfolio-image::after, .elementor-572 .elementor-element.elementor-element-a198725 .bmp-portfolio-image::after, .elementor-572 .elementor-element.elementor-element-a198725 .bmp-image-wrapper::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: -4px; height: 4px; background: linear-gradient( 90deg, transparent 0%, rgba(245, 124, 0, 0.10) 15%, rgba(245, 124, 0, 0.30) 32%, rgba(245, 124, 0, 0.55) 50%, rgba(245, 124, 0, 0.30) 68%, rgba(245, 124, 0, 0.10) 85%, transparent 100% ); opacity: 0; filter: blur(4px); transform: scaleX(0.75); transition: opacity var(--byte-transition-speed) ease, transform var(--byte-transition-speed) ease; pointer-events: none; z-index: -1; } .elementor-572 .elementor-element.elementor-element-a198725 .byte-portfolio-item:hover > a::after, .elementor-572 .elementor-element.elementor-element-a198725 .byte-me-portfolio-item:hover > a::after, .elementor-572 .elementor-element.elementor-element-a198725 .bmp-portfolio-item:hover > a::after, .elementor-572 .elementor-element.elementor-element-a198725 .bmp-item:hover > a::after, .elementor-572 .elementor-element.elementor-element-a198725 .portfolio-item:hover > a::after, .elementor-572 .elementor-element.elementor-element-a198725 .byte-portfolio-item:hover .byte-portfolio-image::after, .elementor-572 .elementor-element.elementor-element-a198725 .byte-me-portfolio-item:hover .byte-me-portfolio-image::after, .elementor-572 .elementor-element.elementor-element-a198725 .bmp-portfolio-item:hover .bmp-portfolio-image::after, .elementor-572 .elementor-element.elementor-element-a198725 .bmp-item:hover .bmp-image-wrapper::after { opacity: 1; transform: scaleX(1); } /* ========================================================= 7. OPTIONAL ORANGE TAPE — FIXED VERSION The tape is now attached to the image link instead of the outer masonry item. This prevents tape from appearing in empty areas below or beside the visible image. Approximate frequency: One tape detail every 13th and 19th item. ========================================================= */ .elementor-572 .elementor-element.elementor-element-a198725 .byte-portfolio-item:nth-child(13n + 3) > a::before, .elementor-572 .elementor-element.elementor-element-a198725 .byte-me-portfolio-item:nth-child(13n + 3) > a::before, .elementor-572 .elementor-element.elementor-element-a198725 .bmp-portfolio-item:nth-child(13n + 3) > a::before, .elementor-572 .elementor-element.elementor-element-a198725 .bmp-item:nth-child(13n + 3) > a::before, .elementor-572 .elementor-element.elementor-element-a198725 .portfolio-item:nth-child(13n + 3) > a::before, .elementor-572 .elementor-element.elementor-element-a198725 .byte-portfolio-item:nth-child(19n + 7) > a::before, .elementor-572 .elementor-element.elementor-element-a198725 .byte-me-portfolio-item:nth-child(19n + 7) > a::before, .elementor-572 .elementor-element.elementor-element-a198725 .bmp-portfolio-item:nth-child(19n + 7) > a::before, .elementor-572 .elementor-element.elementor-element-a198725 .bmp-item:nth-child(19n + 7) > a::before, .elementor-572 .elementor-element.elementor-element-a198725 .portfolio-item:nth-child(19n + 7) > a::before { content: ""; position: absolute; top: -7px; left: 18px; width: 42px; height: 14px; background: linear-gradient( 90deg, rgba(214, 92, 0, 0.78) 0%, rgba(245, 124, 0, 0.88) 25%, rgba(255, 145, 30, 0.92) 50%, rgba(245, 124, 0, 0.88) 75%, rgba(214, 92, 0, 0.78) 100% ); border-left: 1px solid rgba(255, 255, 255, 0.12); border-right: 1px solid rgba(0, 0, 0, 0.18); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.42); transform: rotate(-6deg); transform-origin: center; opacity: 0.9; pointer-events: none; z-index: 40; } /* Place the second tape group on the right side. */ .elementor-572 .elementor-element.elementor-element-a198725 .byte-portfolio-item:nth-child(19n + 7) > a::before, .elementor-572 .elementor-element.elementor-element-a198725 .byte-me-portfolio-item:nth-child(19n + 7) > a::before, .elementor-572 .elementor-element.elementor-element-a198725 .bmp-portfolio-item:nth-child(19n + 7) > a::before, .elementor-572 .elementor-element.elementor-element-a198725 .bmp-item:nth-child(19n + 7) > a::before, .elementor-572 .elementor-element.elementor-element-a198725 .portfolio-item:nth-child(19n + 7) > a::before { left: auto; right: 18px; transform: rotate(7deg); } /* ========================================================= 8. SUPPORT FOR PLUGINS USING AN IMAGE WRAPPER These .elementor-572 .elementor-element.elementor-element-a198725s add tape when the plugin's clickable link is nested instead of being a direct child. They are intentionally limited to named image wrappers. ========================================================= */ .elementor-572 .elementor-element.elementor-element-a198725 .byte-portfolio-item:nth-child(13n + 3) .byte-portfolio-image::before, .elementor-572 .elementor-element.elementor-element-a198725 .byte-me-portfolio-item:nth-child(13n + 3) .byte-me-portfolio-image::before, .elementor-572 .elementor-element.elementor-element-a198725 .bmp-portfolio-item:nth-child(13n + 3) .bmp-portfolio-image::before, .elementor-572 .elementor-element.elementor-element-a198725 .bmp-item:nth-child(13n + 3) .bmp-image-wrapper::before { content: ""; position: absolute; top: -7px; left: 18px; width: 42px; height: 14px; background: linear-gradient( 90deg, rgba(214, 92, 0, 0.78), rgba(255, 145, 30, 0.92), rgba(214, 92, 0, 0.78) ); border-left: 1px solid rgba(255, 255, 255, 0.12); border-right: 1px solid rgba(0, 0, 0, 0.18); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.42); transform: rotate(-6deg); opacity: 0.9; pointer-events: none; z-index: 40; } .elementor-572 .elementor-element.elementor-element-a198725 .byte-portfolio-item:nth-child(19n + 7) .byte-portfolio-image::before, .elementor-572 .elementor-element.elementor-element-a198725 .byte-me-portfolio-item:nth-child(19n + 7) .byte-me-portfolio-image::before, .elementor-572 .elementor-element.elementor-element-a198725 .bmp-portfolio-item:nth-child(19n + 7) .bmp-portfolio-image::before, .elementor-572 .elementor-element.elementor-element-a198725 .bmp-item:nth-child(19n + 7) .bmp-image-wrapper::before { content: ""; position: absolute; top: -7px; right: 18px; width: 42px; height: 14px; background: linear-gradient( 90deg, rgba(214, 92, 0, 0.78), rgba(255, 145, 30, 0.92), rgba(214, 92, 0, 0.78) ); border-left: 1px solid rgba(255, 255, 255, 0.12); border-right: 1px solid rgba(0, 0, 0, 0.18); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.42); transform: rotate(7deg); opacity: 0.9; pointer-events: none; z-index: 40; } /* Prevent duplicate tape if both the direct link and named wrapper .elementor-572 .elementor-element.elementor-element-a198725s happen to match the same portfolio item. */ .elementor-572 .elementor-element.elementor-element-a198725 .byte-portfolio-item > a .byte-portfolio-image::before, .elementor-572 .elementor-element.elementor-element-a198725 .byte-me-portfolio-item > a .byte-me-portfolio-image::before, .elementor-572 .elementor-element.elementor-element-a198725 .bmp-portfolio-item > a .bmp-portfolio-image::before, .elementor-572 .elementor-element.elementor-element-a198725 .bmp-item > a .bmp-image-wrapper::before { display: none; } /* ========================================================= 9. FILTER BUTTONS Dark industrial label styling. ========================================================= */ .elementor-572 .elementor-element.elementor-element-a198725 button, .elementor-572 .elementor-element.elementor-element-a198725 .filter-button, .elementor-572 .elementor-element.elementor-element-a198725 .byte-filter, .elementor-572 .elementor-element.elementor-element-a198725 .bmp-filter, .elementor-572 .elementor-element.elementor-element-a198725 .portfolio-filter { border: 1px solid rgba(255, 255, 255, 0.13); border-radius: 3px; background: #171717; color: #e9e9e9; box-shadow: 9px 11px 18px rgba(0, 0, 0, 0.52), inset 0 1px 0 rgba(255, 255, 255, 0.035); transform: translateY(0); transition: background-color 220ms ease, color 220ms ease, border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease; } .elementor-572 .elementor-element.elementor-element-a198725 button:hover, .elementor-572 .elementor-element.elementor-element-a198725 .filter-button:hover, .elementor-572 .elementor-element.elementor-element-a198725 .byte-filter:hover, .elementor-572 .elementor-element.elementor-element-a198725 .bmp-filter:hover, .elementor-572 .elementor-element.elementor-element-a198725 .portfolio-filter:hover { border-color: rgba(245, 124, 0, 0.58); color: #ffffff; box-shadow: 10px 12px 19px rgba(0, 0, 0, 0.52), inset 0 0 0 1px rgba(245, 124, 0, 0.08); transform: translateY(-1px); } /* Active filter states. */ .elementor-572 .elementor-element.elementor-element-a198725 button.active, .elementor-572 .elementor-element.elementor-element-a198725 button.is-active, .elementor-572 .elementor-element.elementor-element-a198725 button[aria-pressed="true"], .elementor-572 .elementor-element.elementor-element-a198725 .filter-button.active, .elementor-572 .elementor-element.elementor-element-a198725 .filter-button.is-active, .elementor-572 .elementor-element.elementor-element-a198725 .byte-filter.active, .elementor-572 .elementor-element.elementor-element-a198725 .byte-filter.is-active, .elementor-572 .elementor-element.elementor-element-a198725 .bmp-filter.active, .elementor-572 .elementor-element.elementor-element-a198725 .bmp-filter.is-active, .elementor-572 .elementor-element.elementor-element-a198725 .portfolio-filter.active, .elementor-572 .elementor-element.elementor-element-a198725 .portfolio-filter.is-active { background: var(--byte-orange); color: #111111; border-color: rgba(255, 156, 55, 0.80); box-shadow: 0 5px 12px rgba(0, 0, 0, 0.52), inset 0 1px 0 rgba(255, 255, 255, 0.22); transform: translateY(0); } /* ========================================================= 10. KEYBOARD ACCESSIBILITY ========================================================= */ .elementor-572 .elementor-element.elementor-element-a198725 .byte-portfolio-item a:focus-visible, .elementor-572 .elementor-element.elementor-element-a198725 .byte-me-portfolio-item a:focus-visible, .elementor-572 .elementor-element.elementor-element-a198725 .bmp-portfolio-item a:focus-visible, .elementor-572 .elementor-element.elementor-element-a198725 .bmp-item a:focus-visible, .elementor-572 .elementor-element.elementor-element-a198725 .portfolio-item a:focus-visible { outline: 2px solid var(--byte-orange); outline-offset: 4px; } /* ========================================================= 11. TABLET Slightly reduces frame thickness and hover movement. ========================================================= */ @media (max-width: 1024px) { .elementor-572 .elementor-element.elementor-element-a198725 { --byte-mount-size: 4px; --byte-hover-lift: -3px; --byte-hover-scale: 1.008; } } /* ========================================================= 12. MOBILE Simplifies the effect and removes decorative tape. ========================================================= */ @media (max-width: 767px) { .elementor-572 .elementor-element.elementor-element-a198725 { --byte-mount-size: 3px; --byte-hover-lift: 0px; --byte-hover-scale: 1; } /* Remove tape on mobile. */ .elementor-572 .elementor-element.elementor-element-a198725 .byte-portfolio-item > a::before, .elementor-572 .elementor-element.elementor-element-a198725 .byte-me-portfolio-item > a::before, .elementor-572 .elementor-element.elementor-element-a198725 .bmp-portfolio-item > a::before, .elementor-572 .elementor-element.elementor-element-a198725 .bmp-item > a::before, .elementor-572 .elementor-element.elementor-element-a198725 .portfolio-item > a::before, .elementor-572 .elementor-element.elementor-element-a198725 .byte-portfolio-image::before, .elementor-572 .elementor-element.elementor-element-a198725 .byte-me-portfolio-image::before, .elementor-572 .elementor-element.elementor-element-a198725 .bmp-portfolio-image::before, .elementor-572 .elementor-element.elementor-element-a198725 .bmp-image-wrapper::before { display: none !important; } /* Use a lighter shadow for small screens. */ .elementor-572 .elementor-element.elementor-element-a198725 .byte-portfolio-item > a, .elementor-572 .elementor-element.elementor-element-a198725 .byte-me-portfolio-item > a, .elementor-572 .elementor-element.elementor-element-a198725 .bmp-portfolio-item > a, .elementor-572 .elementor-element.elementor-element-a198725 .bmp-item > a, .elementor-572 .elementor-element.elementor-element-a198725 .portfolio-item > a, .elementor-572 .elementor-element.elementor-element-a198725 .byte-portfolio-image, .elementor-572 .elementor-element.elementor-element-a198725 .byte-me-portfolio-image, .elementor-572 .elementor-element.elementor-element-a198725 .bmp-portfolio-image, .elementor-572 .elementor-element.elementor-element-a198725 .bmp-image-wrapper { box-shadow: 0 7px 14px rgba(0, 0, 0, 0.42), 0 2px 5px rgba(0, 0, 0, 0.50); } /* Disable movement on touch devices. */ .elementor-572 .elementor-element.elementor-element-a198725 .byte-portfolio-item:hover > a, .elementor-572 .elementor-element.elementor-element-a198725 .byte-me-portfolio-item:hover > a, .elementor-572 .elementor-element.elementor-element-a198725 .bmp-portfolio-item:hover > a, .elementor-572 .elementor-element.elementor-element-a198725 .bmp-item:hover > a, .elementor-572 .elementor-element.elementor-element-a198725 .portfolio-item:hover > a, .elementor-572 .elementor-element.elementor-element-a198725 .byte-portfolio-item:hover .byte-portfolio-image, .elementor-572 .elementor-element.elementor-element-a198725 .byte-me-portfolio-item:hover .byte-me-portfolio-image, .elementor-572 .elementor-element.elementor-element-a198725 .bmp-portfolio-item:hover .bmp-portfolio-image, .elementor-572 .elementor-element.elementor-element-a198725 .bmp-item:hover .bmp-image-wrapper { transform: none; } /* Hide orange hover reflection on mobile. */ .elementor-572 .elementor-element.elementor-element-a198725 .byte-portfolio-item > a::after, .elementor-572 .elementor-element.elementor-element-a198725 .byte-me-portfolio-item > a::after, .elementor-572 .elementor-element.elementor-element-a198725 .bmp-portfolio-item > a::after, .elementor-572 .elementor-element.elementor-element-a198725 .bmp-item > a::after, .elementor-572 .elementor-element.elementor-element-a198725 .portfolio-item > a::after, .elementor-572 .elementor-element.elementor-element-a198725 .byte-portfolio-image::after, .elementor-572 .elementor-element.elementor-element-a198725 .byte-me-portfolio-image::after, .elementor-572 .elementor-element.elementor-element-a198725 .bmp-portfolio-image::after, .elementor-572 .elementor-element.elementor-element-a198725 .bmp-image-wrapper::after { display: none; } } /* ========================================================= 13. REDUCED MOTION ACCESSIBILITY ========================================================= */ @media (prefers-reduced-motion: reduce) { .elementor-572 .elementor-element.elementor-element-a198725 *, .elementor-572 .elementor-element.elementor-element-a198725 *::before, .elementor-572 .elementor-element.elementor-element-a198725 *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } } .bmp-filters { justify-content: center; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-9743c1a *//* ========================================================= BYTE PIXEL PORTFOLIO — STUDIO MOUNT STYLE FULL REPLACEMENT CSS Add to: Byte Pixel Portfolio Widget Advanced → Custom CSS IMPORTANT: Delete the previous version before adding this one. ========================================================= */ /* ========================================================= 1. GLOBAL STYLE SETTINGS Adjust these variables to customize the appearance. ========================================================= */ .elementor-572 .elementor-element.elementor-element-9743c1a { --byte-mount-size: 5px; --byte-mount-color: #171717; --byte-inner-edge-color: rgba(255, 255, 255, 0.09); --byte-image-edge-color: rgba(255, 255, 255, 0.06); --byte-orange: #f57c00; --byte-orange-light: #ff911e; --byte-corner-radius: 3px; --byte-image-radius: 1px; --byte-hover-lift: -5px; --byte-hover-scale: 1.012; --byte-transition-speed: 350ms; --byte-shadow-normal: 0 10px 22px rgba(0, 0, 0, 0.44), 0 3px 7px rgba(0, 0, 0, 0.52); --byte-shadow-hover: 0 20px 34px rgba(0, 0, 0, 0.62), 0 6px 12px rgba(0, 0, 0, 0.48); } /* ========================================================= 2. OUTER PORTFOLIO ITEMS Keeps frames, shadows and decorations visible. ========================================================= */ .elementor-572 .elementor-element.elementor-element-9743c1a .byte-portfolio-item, .elementor-572 .elementor-element.elementor-element-9743c1a .byte-me-portfolio-item, .elementor-572 .elementor-element.elementor-element-9743c1a .bmp-portfolio-item, .elementor-572 .elementor-element.elementor-element-9743c1a .bmp-item, .elementor-572 .elementor-element.elementor-element-9743c1a .portfolio-item { position: relative; overflow: visible; isolation: isolate; transition: transform 400ms ease, opacity 320ms ease, filter 320ms ease; } /* Raise the entire item while hovering so it appears above neighboring portfolio images. */ .elementor-572 .elementor-element.elementor-element-9743c1a .byte-portfolio-item:hover, .elementor-572 .elementor-element.elementor-element-9743c1a .byte-me-portfolio-item:hover, .elementor-572 .elementor-element.elementor-element-9743c1a .bmp-portfolio-item:hover, .elementor-572 .elementor-element.elementor-element-9743c1a .bmp-item:hover, .elementor-572 .elementor-element.elementor-element-9743c1a .portfolio-item:hover { z-index: 30; } /* ========================================================= 3. IMAGE LINK AND MOUNTING BOARD The frame is attached to the visible image link. ========================================================= */ .elementor-572 .elementor-element.elementor-element-9743c1a .byte-portfolio-item > a, .elementor-572 .elementor-element.elementor-element-9743c1a .byte-me-portfolio-item > a, .elementor-572 .elementor-element.elementor-element-9743c1a .bmp-portfolio-item > a, .elementor-572 .elementor-element.elementor-element-9743c1a .bmp-item > a, .elementor-572 .elementor-element.elementor-element-9743c1a .portfolio-item > a, .elementor-572 .elementor-element.elementor-element-9743c1a .byte-portfolio-image, .elementor-572 .elementor-element.elementor-element-9743c1a .byte-me-portfolio-image, .elementor-572 .elementor-element.elementor-element-9743c1a .bmp-portfolio-image, .elementor-572 .elementor-element.elementor-element-9743c1a .bmp-image-wrapper { position: relative; display: block; box-sizing: border-box; padding: var(--byte-mount-size); background: var(--byte-mount-color); border: 1px solid var(--byte-inner-edge-color); border-radius: var(--byte-corner-radius); box-shadow: var(--byte-shadow-normal); transform: translateY(0) scale(1); transform-origin: center center; transition: transform var(--byte-transition-speed) ease, box-shadow var(--byte-transition-speed) ease, border-color var(--byte-transition-speed) ease; overflow: visible; z-index: 1; } /* ========================================================= 4. PORTFOLIO IMAGES Keeps the artwork clean and unchanged. ========================================================= */ .elementor-572 .elementor-element.elementor-element-9743c1a .byte-portfolio-item img, .elementor-572 .elementor-element.elementor-element-9743c1a .byte-me-portfolio-item img, .elementor-572 .elementor-element.elementor-element-9743c1a .bmp-portfolio-item img, .elementor-572 .elementor-element.elementor-element-9743c1a .bmp-item img, .elementor-572 .elementor-element.elementor-element-9743c1a .portfolio-item img { position: relative; z-index: 1; display: block; width: 100%; max-width: 100%; height: auto; margin: 0; border: 1px solid var(--byte-image-edge-color); border-radius: var(--byte-image-radius); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18); transition: filter var(--byte-transition-speed) ease, opacity var(--byte-transition-speed) ease; } /* Preserve plugin Cover and fixed-height image behavior. */ .elementor-572 .elementor-element.elementor-element-9743c1a .byte-portfolio-item img[style*="object-fit"], .elementor-572 .elementor-element.elementor-element-9743c1a .byte-me-portfolio-item img[style*="object-fit"], .elementor-572 .elementor-element.elementor-element-9743c1a .bmp-portfolio-item img[style*="object-fit"], .elementor-572 .elementor-element.elementor-element-9743c1a .bmp-item img[style*="object-fit"], .elementor-572 .elementor-element.elementor-element-9743c1a .portfolio-item img[style*="object-fit"] { height: 100%; } /* ========================================================= 5. HOVER LIFT AND DEPTH Makes the portfolio print lift away from the wall. ========================================================= */ .elementor-572 .elementor-element.elementor-element-9743c1a .byte-portfolio-item:hover > a, .elementor-572 .elementor-element.elementor-element-9743c1a .byte-me-portfolio-item:hover > a, .elementor-572 .elementor-element.elementor-element-9743c1a .bmp-portfolio-item:hover > a, .elementor-572 .elementor-element.elementor-element-9743c1a .bmp-item:hover > a, .elementor-572 .elementor-element.elementor-element-9743c1a .portfolio-item:hover > a, .elementor-572 .elementor-element.elementor-element-9743c1a .byte-portfolio-item:hover .byte-portfolio-image, .elementor-572 .elementor-element.elementor-element-9743c1a .byte-me-portfolio-item:hover .byte-me-portfolio-image, .elementor-572 .elementor-element.elementor-element-9743c1a .bmp-portfolio-item:hover .bmp-portfolio-image, .elementor-572 .elementor-element.elementor-element-9743c1a .bmp-item:hover .bmp-image-wrapper { transform: translateY(var(--byte-hover-lift)) scale(var(--byte-hover-scale)); box-shadow: var(--byte-shadow-hover), 0 0 18px rgba(245, 124, 0, 0.11); border-color: rgba(245, 124, 0, 0.24); z-index: 20; } /* ========================================================= 6. SUBTLE ORANGE EDGE LIGHT Appears underneath the print only while hovering. ========================================================= */ .elementor-572 .elementor-element.elementor-element-9743c1a .byte-portfolio-item > a::after, .elementor-572 .elementor-element.elementor-element-9743c1a .byte-me-portfolio-item > a::after, .elementor-572 .elementor-element.elementor-element-9743c1a .bmp-portfolio-item > a::after, .elementor-572 .elementor-element.elementor-element-9743c1a .bmp-item > a::after, .elementor-572 .elementor-element.elementor-element-9743c1a .portfolio-item > a::after, .elementor-572 .elementor-element.elementor-element-9743c1a .byte-portfolio-image::after, .elementor-572 .elementor-element.elementor-element-9743c1a .byte-me-portfolio-image::after, .elementor-572 .elementor-element.elementor-element-9743c1a .bmp-portfolio-image::after, .elementor-572 .elementor-element.elementor-element-9743c1a .bmp-image-wrapper::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: -4px; height: 4px; background: linear-gradient( 90deg, transparent 0%, rgba(245, 124, 0, 0.10) 15%, rgba(245, 124, 0, 0.30) 32%, rgba(245, 124, 0, 0.55) 50%, rgba(245, 124, 0, 0.30) 68%, rgba(245, 124, 0, 0.10) 85%, transparent 100% ); opacity: 0; filter: blur(4px); transform: scaleX(0.75); transition: opacity var(--byte-transition-speed) ease, transform var(--byte-transition-speed) ease; pointer-events: none; z-index: -1; } .elementor-572 .elementor-element.elementor-element-9743c1a .byte-portfolio-item:hover > a::after, .elementor-572 .elementor-element.elementor-element-9743c1a .byte-me-portfolio-item:hover > a::after, .elementor-572 .elementor-element.elementor-element-9743c1a .bmp-portfolio-item:hover > a::after, .elementor-572 .elementor-element.elementor-element-9743c1a .bmp-item:hover > a::after, .elementor-572 .elementor-element.elementor-element-9743c1a .portfolio-item:hover > a::after, .elementor-572 .elementor-element.elementor-element-9743c1a .byte-portfolio-item:hover .byte-portfolio-image::after, .elementor-572 .elementor-element.elementor-element-9743c1a .byte-me-portfolio-item:hover .byte-me-portfolio-image::after, .elementor-572 .elementor-element.elementor-element-9743c1a .bmp-portfolio-item:hover .bmp-portfolio-image::after, .elementor-572 .elementor-element.elementor-element-9743c1a .bmp-item:hover .bmp-image-wrapper::after { opacity: 1; transform: scaleX(1); } /* ========================================================= 7. OPTIONAL ORANGE TAPE — FIXED VERSION The tape is now attached to the image link instead of the outer masonry item. This prevents tape from appearing in empty areas below or beside the visible image. Approximate frequency: One tape detail every 13th and 19th item. ========================================================= */ .elementor-572 .elementor-element.elementor-element-9743c1a .byte-portfolio-item:nth-child(13n + 3) > a::before, .elementor-572 .elementor-element.elementor-element-9743c1a .byte-me-portfolio-item:nth-child(13n + 3) > a::before, .elementor-572 .elementor-element.elementor-element-9743c1a .bmp-portfolio-item:nth-child(13n + 3) > a::before, .elementor-572 .elementor-element.elementor-element-9743c1a .bmp-item:nth-child(13n + 3) > a::before, .elementor-572 .elementor-element.elementor-element-9743c1a .portfolio-item:nth-child(13n + 3) > a::before, .elementor-572 .elementor-element.elementor-element-9743c1a .byte-portfolio-item:nth-child(19n + 7) > a::before, .elementor-572 .elementor-element.elementor-element-9743c1a .byte-me-portfolio-item:nth-child(19n + 7) > a::before, .elementor-572 .elementor-element.elementor-element-9743c1a .bmp-portfolio-item:nth-child(19n + 7) > a::before, .elementor-572 .elementor-element.elementor-element-9743c1a .bmp-item:nth-child(19n + 7) > a::before, .elementor-572 .elementor-element.elementor-element-9743c1a .portfolio-item:nth-child(19n + 7) > a::before { content: ""; position: absolute; top: -7px; left: 18px; width: 42px; height: 14px; background: linear-gradient( 90deg, rgba(214, 92, 0, 0.78) 0%, rgba(245, 124, 0, 0.88) 25%, rgba(255, 145, 30, 0.92) 50%, rgba(245, 124, 0, 0.88) 75%, rgba(214, 92, 0, 0.78) 100% ); border-left: 1px solid rgba(255, 255, 255, 0.12); border-right: 1px solid rgba(0, 0, 0, 0.18); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.42); transform: rotate(-6deg); transform-origin: center; opacity: 0.9; pointer-events: none; z-index: 40; } /* Place the second tape group on the right side. */ .elementor-572 .elementor-element.elementor-element-9743c1a .byte-portfolio-item:nth-child(19n + 7) > a::before, .elementor-572 .elementor-element.elementor-element-9743c1a .byte-me-portfolio-item:nth-child(19n + 7) > a::before, .elementor-572 .elementor-element.elementor-element-9743c1a .bmp-portfolio-item:nth-child(19n + 7) > a::before, .elementor-572 .elementor-element.elementor-element-9743c1a .bmp-item:nth-child(19n + 7) > a::before, .elementor-572 .elementor-element.elementor-element-9743c1a .portfolio-item:nth-child(19n + 7) > a::before { left: auto; right: 18px; transform: rotate(7deg); } /* ========================================================= 8. SUPPORT FOR PLUGINS USING AN IMAGE WRAPPER These .elementor-572 .elementor-element.elementor-element-9743c1as add tape when the plugin's clickable link is nested instead of being a direct child. They are intentionally limited to named image wrappers. ========================================================= */ .elementor-572 .elementor-element.elementor-element-9743c1a .byte-portfolio-item:nth-child(13n + 3) .byte-portfolio-image::before, .elementor-572 .elementor-element.elementor-element-9743c1a .byte-me-portfolio-item:nth-child(13n + 3) .byte-me-portfolio-image::before, .elementor-572 .elementor-element.elementor-element-9743c1a .bmp-portfolio-item:nth-child(13n + 3) .bmp-portfolio-image::before, .elementor-572 .elementor-element.elementor-element-9743c1a .bmp-item:nth-child(13n + 3) .bmp-image-wrapper::before { content: ""; position: absolute; top: -7px; left: 18px; width: 42px; height: 14px; background: linear-gradient( 90deg, rgba(214, 92, 0, 0.78), rgba(255, 145, 30, 0.92), rgba(214, 92, 0, 0.78) ); border-left: 1px solid rgba(255, 255, 255, 0.12); border-right: 1px solid rgba(0, 0, 0, 0.18); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.42); transform: rotate(-6deg); opacity: 0.9; pointer-events: none; z-index: 40; } .elementor-572 .elementor-element.elementor-element-9743c1a .byte-portfolio-item:nth-child(19n + 7) .byte-portfolio-image::before, .elementor-572 .elementor-element.elementor-element-9743c1a .byte-me-portfolio-item:nth-child(19n + 7) .byte-me-portfolio-image::before, .elementor-572 .elementor-element.elementor-element-9743c1a .bmp-portfolio-item:nth-child(19n + 7) .bmp-portfolio-image::before, .elementor-572 .elementor-element.elementor-element-9743c1a .bmp-item:nth-child(19n + 7) .bmp-image-wrapper::before { content: ""; position: absolute; top: -7px; right: 18px; width: 42px; height: 14px; background: linear-gradient( 90deg, rgba(214, 92, 0, 0.78), rgba(255, 145, 30, 0.92), rgba(214, 92, 0, 0.78) ); border-left: 1px solid rgba(255, 255, 255, 0.12); border-right: 1px solid rgba(0, 0, 0, 0.18); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.42); transform: rotate(7deg); opacity: 0.9; pointer-events: none; z-index: 40; } /* Prevent duplicate tape if both the direct link and named wrapper .elementor-572 .elementor-element.elementor-element-9743c1as happen to match the same portfolio item. */ .elementor-572 .elementor-element.elementor-element-9743c1a .byte-portfolio-item > a .byte-portfolio-image::before, .elementor-572 .elementor-element.elementor-element-9743c1a .byte-me-portfolio-item > a .byte-me-portfolio-image::before, .elementor-572 .elementor-element.elementor-element-9743c1a .bmp-portfolio-item > a .bmp-portfolio-image::before, .elementor-572 .elementor-element.elementor-element-9743c1a .bmp-item > a .bmp-image-wrapper::before { display: none; } /* ========================================================= 9. FILTER BUTTONS Dark industrial label styling. ========================================================= */ .elementor-572 .elementor-element.elementor-element-9743c1a button, .elementor-572 .elementor-element.elementor-element-9743c1a .filter-button, .elementor-572 .elementor-element.elementor-element-9743c1a .byte-filter, .elementor-572 .elementor-element.elementor-element-9743c1a .bmp-filter, .elementor-572 .elementor-element.elementor-element-9743c1a .portfolio-filter { border: 1px solid rgba(255, 255, 255, 0.13); border-radius: 3px; background: #171717; color: #e9e9e9; box-shadow: 9px 11px 18px rgba(0, 0, 0, 0.52), inset 0 1px 0 rgba(255, 255, 255, 0.035); transform: translateY(0); transition: background-color 220ms ease, color 220ms ease, border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease; } .elementor-572 .elementor-element.elementor-element-9743c1a button:hover, .elementor-572 .elementor-element.elementor-element-9743c1a .filter-button:hover, .elementor-572 .elementor-element.elementor-element-9743c1a .byte-filter:hover, .elementor-572 .elementor-element.elementor-element-9743c1a .bmp-filter:hover, .elementor-572 .elementor-element.elementor-element-9743c1a .portfolio-filter:hover { border-color: rgba(245, 124, 0, 0.58); color: #ffffff; box-shadow: 10px 12px 19px rgba(0, 0, 0, 0.52), inset 0 0 0 1px rgba(245, 124, 0, 0.08); transform: translateY(-1px); } /* Active filter states. */ .elementor-572 .elementor-element.elementor-element-9743c1a button.active, .elementor-572 .elementor-element.elementor-element-9743c1a button.is-active, .elementor-572 .elementor-element.elementor-element-9743c1a button[aria-pressed="true"], .elementor-572 .elementor-element.elementor-element-9743c1a .filter-button.active, .elementor-572 .elementor-element.elementor-element-9743c1a .filter-button.is-active, .elementor-572 .elementor-element.elementor-element-9743c1a .byte-filter.active, .elementor-572 .elementor-element.elementor-element-9743c1a .byte-filter.is-active, .elementor-572 .elementor-element.elementor-element-9743c1a .bmp-filter.active, .elementor-572 .elementor-element.elementor-element-9743c1a .bmp-filter.is-active, .elementor-572 .elementor-element.elementor-element-9743c1a .portfolio-filter.active, .elementor-572 .elementor-element.elementor-element-9743c1a .portfolio-filter.is-active { background: var(--byte-orange); color: #111111; border-color: rgba(255, 156, 55, 0.80); box-shadow: 0 5px 12px rgba(0, 0, 0, 0.52), inset 0 1px 0 rgba(255, 255, 255, 0.22); transform: translateY(0); } /* ========================================================= 10. KEYBOARD ACCESSIBILITY ========================================================= */ .elementor-572 .elementor-element.elementor-element-9743c1a .byte-portfolio-item a:focus-visible, .elementor-572 .elementor-element.elementor-element-9743c1a .byte-me-portfolio-item a:focus-visible, .elementor-572 .elementor-element.elementor-element-9743c1a .bmp-portfolio-item a:focus-visible, .elementor-572 .elementor-element.elementor-element-9743c1a .bmp-item a:focus-visible, .elementor-572 .elementor-element.elementor-element-9743c1a .portfolio-item a:focus-visible { outline: 2px solid var(--byte-orange); outline-offset: 4px; } /* ========================================================= 11. TABLET Slightly reduces frame thickness and hover movement. ========================================================= */ @media (max-width: 1024px) { .elementor-572 .elementor-element.elementor-element-9743c1a { --byte-mount-size: 4px; --byte-hover-lift: -3px; --byte-hover-scale: 1.008; } } /* ========================================================= 12. MOBILE Simplifies the effect and removes decorative tape. ========================================================= */ @media (max-width: 767px) { .elementor-572 .elementor-element.elementor-element-9743c1a { --byte-mount-size: 3px; --byte-hover-lift: 0px; --byte-hover-scale: 1; } /* Remove tape on mobile. */ .elementor-572 .elementor-element.elementor-element-9743c1a .byte-portfolio-item > a::before, .elementor-572 .elementor-element.elementor-element-9743c1a .byte-me-portfolio-item > a::before, .elementor-572 .elementor-element.elementor-element-9743c1a .bmp-portfolio-item > a::before, .elementor-572 .elementor-element.elementor-element-9743c1a .bmp-item > a::before, .elementor-572 .elementor-element.elementor-element-9743c1a .portfolio-item > a::before, .elementor-572 .elementor-element.elementor-element-9743c1a .byte-portfolio-image::before, .elementor-572 .elementor-element.elementor-element-9743c1a .byte-me-portfolio-image::before, .elementor-572 .elementor-element.elementor-element-9743c1a .bmp-portfolio-image::before, .elementor-572 .elementor-element.elementor-element-9743c1a .bmp-image-wrapper::before { display: none !important; } /* Use a lighter shadow for small screens. */ .elementor-572 .elementor-element.elementor-element-9743c1a .byte-portfolio-item > a, .elementor-572 .elementor-element.elementor-element-9743c1a .byte-me-portfolio-item > a, .elementor-572 .elementor-element.elementor-element-9743c1a .bmp-portfolio-item > a, .elementor-572 .elementor-element.elementor-element-9743c1a .bmp-item > a, .elementor-572 .elementor-element.elementor-element-9743c1a .portfolio-item > a, .elementor-572 .elementor-element.elementor-element-9743c1a .byte-portfolio-image, .elementor-572 .elementor-element.elementor-element-9743c1a .byte-me-portfolio-image, .elementor-572 .elementor-element.elementor-element-9743c1a .bmp-portfolio-image, .elementor-572 .elementor-element.elementor-element-9743c1a .bmp-image-wrapper { box-shadow: 0 7px 14px rgba(0, 0, 0, 0.42), 0 2px 5px rgba(0, 0, 0, 0.50); } /* Disable movement on touch devices. */ .elementor-572 .elementor-element.elementor-element-9743c1a .byte-portfolio-item:hover > a, .elementor-572 .elementor-element.elementor-element-9743c1a .byte-me-portfolio-item:hover > a, .elementor-572 .elementor-element.elementor-element-9743c1a .bmp-portfolio-item:hover > a, .elementor-572 .elementor-element.elementor-element-9743c1a .bmp-item:hover > a, .elementor-572 .elementor-element.elementor-element-9743c1a .portfolio-item:hover > a, .elementor-572 .elementor-element.elementor-element-9743c1a .byte-portfolio-item:hover .byte-portfolio-image, .elementor-572 .elementor-element.elementor-element-9743c1a .byte-me-portfolio-item:hover .byte-me-portfolio-image, .elementor-572 .elementor-element.elementor-element-9743c1a .bmp-portfolio-item:hover .bmp-portfolio-image, .elementor-572 .elementor-element.elementor-element-9743c1a .bmp-item:hover .bmp-image-wrapper { transform: none; } /* Hide orange hover reflection on mobile. */ .elementor-572 .elementor-element.elementor-element-9743c1a .byte-portfolio-item > a::after, .elementor-572 .elementor-element.elementor-element-9743c1a .byte-me-portfolio-item > a::after, .elementor-572 .elementor-element.elementor-element-9743c1a .bmp-portfolio-item > a::after, .elementor-572 .elementor-element.elementor-element-9743c1a .bmp-item > a::after, .elementor-572 .elementor-element.elementor-element-9743c1a .portfolio-item > a::after, .elementor-572 .elementor-element.elementor-element-9743c1a .byte-portfolio-image::after, .elementor-572 .elementor-element.elementor-element-9743c1a .byte-me-portfolio-image::after, .elementor-572 .elementor-element.elementor-element-9743c1a .bmp-portfolio-image::after, .elementor-572 .elementor-element.elementor-element-9743c1a .bmp-image-wrapper::after { display: none; } } /* ========================================================= 13. REDUCED MOTION ACCESSIBILITY ========================================================= */ @media (prefers-reduced-motion: reduce) { .elementor-572 .elementor-element.elementor-element-9743c1a *, .elementor-572 .elementor-element.elementor-element-9743c1a *::before, .elementor-572 .elementor-element.elementor-element-9743c1a *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } } .bmp-filters { justify-content: center; }/* End custom CSS */