/* Theme Name: Hello Elementor Child Theme URI: https://dev.aslactive.com Description: Child theme for Hello Elementor Author: Graham Austin Author URI: https://dev.aslactive.com Template: hello-elementor Version: 1.0 Text Domain: hello-elementor-child */ /* Load CHANEY + font definitions */ @import url('fonts/fonts.css'); /* ================================================ DESIGN TOKENS =================================================== */ :root { /* === Typography tokens === */ --font-heading: 'Proxima Nova', sans-serif; --font-body: 'Proxima Nova', sans-serif; /* Base */ --step--1: clamp(0.8rem, 0.78rem + 0.2vw, 0.9rem); --step-0: clamp(1rem, 0.95rem + 0.3vw, 1.125rem); /* Body → lead */ --step-1: clamp(1.2rem, 1.05rem + 0.6vw, 1.45rem); --step-2: clamp(1.5rem, 1.25rem + 1vw, 1.9rem); /* Headings */ --step-3: clamp(2rem, 1.6rem + 2vw, 2.8rem); --step-4: clamp(3rem, 2.2rem + 4vw, 4.5rem); /* Hero */ --step-5: clamp(3.6rem, 2.8rem + 5vw, 8rem); /* Utility aliases (optional) */ --text-sm: var(--step--1); --text-base: var(--step-0); --text-lg: var(--step-1); --text-xl: var(--step-2); --text-2xl: var(--step-3); --text-4xl: var(--step-4); --text-hero: var(--step-5); /* component-level tokens */ --text-button-sm: 0.78rem; --text-ui: var(--text-base); --text-button: var(--text-base); --text-button-lg: var(--text-lg); --text-nav: var(--text-base); --text-nav-lg: var(--text-xl); --text-hero: var(--step-5); --text-hero-letter-spacing: -0.03em; --text-404: clamp(6rem, 18vw, 18rem); /* === Type scale (fluid, editorial) === */ --space-2xs: calc(var(--step--1) * 0.5); --space-xs: calc(var(--step-0) * 0.75); --space-sm: calc(var(--step-0) * 1); --space-md: calc(var(--step-1) * 1); --space-lg: calc(var(--step-2) * 1); --space-xl: calc(var(--step-3) * 0.9); --space-2xl: calc(var(--step-4) * 0.8); /* === Brand Colours === */ --default-color: var(--e-global-color-4c97ad7, #04D9FF); --default-hover-color: var(--e-global-color-4c97ad7, rgba(4, 217, 255, .7)); --black-500: var(--e-global-color-8239dcb, #000000); /* Section Brand Colours */ --active-work-500: #04D9FF; --active-about-500: #08CFFF; --active-services-500: #00C2D9; --active-news-500: #1AAEFF; --active-contact-500: #1FD4C2; /* Light Tints (for backgrounds) */ --active-work-50: #F0FDFF; --active-about-50: #F2FCFF; --active-services-50: #EFFCFE; --active-news-50: #F3F8FF; --active-contact-50: #F1FDFB; /* Editorial / Posts background */ --active-posts-50: #F3F8FF; /* or #F7F7F7 */ /* Fallback background tints */ --active-news-bg-fallback: #F3F8FF; --active-contact-bg-fallback: #F1FDFB; /* Link underline tokens */ --lnk-thickness: 1px; --lnk-offset: 0.04em; /* Logo size token */ --logo-size: clamp(2.875rem, -0.4825rem + 7.0039vw, 4rem); /* Hero images */ --hero-img-default: var(--_hero-default, url('/wp-content/uploads/2025/08/hero-default.jpg')); --hero-img-news: var(--_hero-news, url('/wp-content/uploads/2025/08/hero-news.jpg')); --hero-img-contact: var(--_hero-contact, url('/wp-content/uploads/2025/08/hero-contact.jpg')); /* More News token */ --more-news-hover: transparent; /* ASL Arrow token */ --asl-arrow-width: 2.15rem; --asl-arrow-height: 0.65em; --asl-arrow-gap: 0.4em; --asl-icon-shift: 6px; /* Form token */ --form-line-opacity: 65%; /* Media token */ --media-ratio-landscape: 16 / 9; --media-ratio-portrait: 4 / 5; --header-offset: 0px; /* visual trim between header box + perceived height */ --gap-fix: 30px; /* page left * right padding */ --page-padding: clamp(1rem, -3.9689rem + 12.4514vw, 14rem) } @media (max-width: 767px) { :root { --step-5: clamp(2.8rem, 9vw, 4.6rem); } } /* ================================================ More News Sections =================================================== */ body.home { --more-news-hover: var(--active-work-500); } body.category-news, body.single-post { --more-news-hover: var(--active-news-500); } /* ================================================ Section variables (centralised) + Background system =================================================== */ html, body { min-height: 100%; } body { isolation: isolate; /* root stacking context */ /* Section colours */ --section-500: var(--default-color); --section-50: #fff; /* Background defaults (non Home/News/Contact) */ --page-bg-color: var(--black-500); --bg-gradient: none; --bg-image: var(--hero-img-default); --image-blend: screen; --image-opacity: 1; /* NEW: default image opacity */ /* Background zoom + parallax knobs (read by JS) */ --bg-zoom: 1; --bg-zoom-min: 1; --bg-zoom-max: 1.20; --bg-zoom-span: 3; --bg-zoom-mode: vh; --bg-zoom-ease: in-out; --bg-moveY: 0px; --bg-move-start: 0px; --bg-move-end: -860px; --bg-move-span: 3; --bg-move-mode: vh; --bg-move-ease: in-out; /* Component intent (THIS is the key shift) */ --asl-btn-color: var(--section-50); --form-focus-color: var(--section-500); --news-border-opacity: var(--form-line-opacity); } /* Section palettes */ body.active-work { --section-500: var(--active-work-500); --section-50: var(--active-work-50); } body.active-about { --section-500: var(--active-about-500); --section-50: var(--active-about-50); } body.active-services { --section-500: var(--active-services-500); --section-50: var(--active-services-50); } /* News */ body.active-news { --section-500: var(--active-news-500); --section-50: var(--active-news-50); --page-bg-color: var(--active-news-bg-fallback); --bg-image: var(--hero-img-news); /*--bg-gradient: linear-gradient(135deg, #EEF1FF 0%, #F8F9FF 100%);*/ --image-blend: multiply; /* CHANGED: was screen */ --image-opacity: 0.10; /* NEW: 10% */ --asl-btn-color: var(--section-500); } /* Contact */ body.active-contact { --section-500: var(--active-contact-500); --section-50: var(--active-contact-50); --page-bg-color: var(--active-contact-bg-fallback); --bg-image: var(--hero-img-contact); /* --bg-gradient: linear-gradient(135deg, #ECFBF8 0%, #F8FFFE 100%);*/ --image-blend: multiply; /* CHANGED: was soft-light */ --image-opacity: 0.10; /* NEW: 10% */ --asl-btn-color: var(--section-500); } /* Modern vivid gradients (News/Contact) @supports (color: oklch(50% 0 0)) { body.active-news { --bg-gradient: linear-gradient(135deg, color-mix(in oklab, var(--active-news-50) 94%, var(--active-news-500) 6%) 0%, color-mix(in oklab, var(--active-news-50) 98%, var(--active-news-500) 2%) 100%); } body.active-contact { --bg-gradient: linear-gradient(135deg, color-mix(in oklab, var(--active-contact-50) 94%, var(--active-contact-500) 6%) 0%, color-mix(in oklab, var(--active-contact-50) 98%, var(--active-contact-500) 2%) 100%); } }*/ /* Apply body gradient on all non-Home pages */ body:not(.home) { background-color: var(--page-bg-color); /*background-image: var(--bg-gradient); background-repeat: no-repeat; background-position: center top; background-blend-mode: normal;*/ } /* Pinned image layer (parallax/zoom) */ body:not(.home)::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: var(--bg-image); background-repeat: no-repeat; background-position: center top; background-size: cover; mix-blend-mode: var(--image-blend, normal); opacity: var(--image-opacity, 1); /* NEW */ transform-origin: 50% 0%; transform: translate3d(0, var(--bg-moveY, 0px), 0) scale(var(--bg-zoom, 1)); will-change: transform; } @media (prefers-reduced-motion: reduce) { body:not(.home)::before { transform: none !important; } } /* Lift content above pinned bg; header shouldn't trap overlays */ body:not(.home) :is(#content, .site, .site-main, main) { position: relative; z-index: 1; } body:not(.home) .elementor-location-footer { position: relative; z-index: 1; } /* Let page canvas be transparent on News/Contact */ body:is(.active-news, .active-contact) :is(#content, .site-main, main, .elementor-location-single, .elementor-location-archive, .elementor-location-page, .elementor:not(.elementor-location-header):not(.elementor-location-footer)) { background: transparent !important; background-image: none !important; background-color: transparent !important; } /* Large titles (cards / headings) */ .elementor-heading-title { --lnk-offset: 0.06em; } /* Buttons (ASL Plain) */ .elementor-widget-button.asl-plain { --lnk-offset: 0.06em; } /* Dark */ body:is(.active-contact, .active-news) { --form-line-opacity: 85%; --form-focus-color: var(--section-500); } /* ================================================ SINGLE NEWS POST - clean reading canvas ================================================ */ body.single-post { --page-bg-color: var(--active-posts-50); --bg-gradient: none; --bg-image: none; background-color: var(--active-posts-50); background-image: none !important; color: var(--e-global-color-8239dcb); } /* Disable pinned image layer */ body.single-post::before { content: none !important; } /* Ensure wrappers stay opaque */ body.single-post .post-canvas, body.single-post main, body.single-post .site-main { background-color: var(--active-posts-50); } /* Elementor post content + common text */ body.single-post :is( .elementor-widget-theme-post-content, .elementor-widget-text-editor, .elementor-widget-heading, p, li, blockquote, figcaption ) { color: var(--e-global-color-8239dcb); } /* Optional: links keep News accent */ body.single-post a { color: var(--active-news-500); } /* ================================================ PROJECTS styling hooks =================================================== */ body.post-type-archive-project, body.tax-project_type, body.single-project { --section-500: var(--active-work-500); --section-50: var(--active-work-50); } body.single-project { --bg-image: none !important; } /* Let page canvas be transparent on News/Contact (BUT NOT single posts) */ body:is(.active-news, .active-contact):not(.single-post) :is( #content, .site-main, main, .elementor-location-single, .elementor-location-archive, .elementor-location-page, .elementor:not(.elementor-location-header):not(.elementor-location-footer) ) { background: transparent !important; background-image: none !important; background-color: transparent !important; } /* ================================================ Disable global background image on Work ================================================= */ body::before { content: none !important; } /* Safety: ensure variables never render anything */ body { --bg-image: none !important; --image-opacity: 0 !important; } /* ================================================ Sitewide link policy =================================================== */ :where(a[href]) { text-decoration: none; text-underline-offset: var(--lnk-offset); text-decoration-thickness: var(--lnk-thickness); text-decoration-color: currentColor; transition: text-decoration-thickness .15s ease, color .15s ease; } :where(a[href]:hover, a[href]:focus-visible) { text-decoration: underline; text-decoration-skip-ink: auto; text-decoration-thickness: calc(var(--lnk-thickness) + .5px); } /* No underline for real buttons, but allow .asl-plain */ :where(a.elementor-button:not(.asl-plain), .elementor-button a) { text-decoration: none !important; } /* Never underline social icons */ :where(a.elementor-social-icon, .elementor-social-icons-wrapper a) { text-decoration: none !important; } :where(a.elementor-social-icon, .elementor-social-icons-wrapper a):is(:hover, :focus-visible) { text-decoration: none !important; } /* Menu hover underline */ .elementor-nav-menu a.elementor-item, .pp-advanced-menu .pp-menu-item { text-decoration: none !important; } .elementor-nav-menu a.elementor-item:hover, .elementor-nav-menu a.elementor-item:focus-visible, .pp-advanced-menu .pp-menu-item:hover, .pp-advanced-menu .pp-menu-item:focus-visible { text-decoration: underline !important; } /* --------------------------------------- Global underline for TEXT links only --------------------------------------- */ :is(p, li, h1, h2, h3, h4, h5, h6, span, figcaption) a[href]:not(.elementor-item):not(.pp-menu-item):not(.elementor-button):not(.elementor-button *) { display: inline; text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: 0 calc(100% - var(--lnk-offset)); background-size: 0% var(--lnk-thickness); transition: background-size .25s ease; } :is(p, li, h1, h2, h3, h4, h5, h6, span, figcaption) a[href]:not(.elementor-item):not(.pp-menu-item):not(.elementor-button):not(.elementor-button *):hover { background-size: 100% var(--lnk-thickness); } /* ================================================ Buttons masked 500 border (text uses section 50) =================================================== */ .elementor-button { position: relative; display: inline-block; background: transparent !important; border: none !important; color: var(--asl-btn-color, var(--section-50)); transition: transform .25s ease, opacity .25s ease; will-change: transform, opacity; } .elementor-button::before { content: ""; position: absolute; inset: 0; padding: 3px; border-radius: inherit; background: linear-gradient(var(--section-500), var(--section-500)) top left / 100% 3px no-repeat, linear-gradient(var(--section-500), var(--section-500)) bottom left / calc(100% - 3px) 3px no-repeat, linear-gradient(var(--section-500), var(--section-500)) top left / 3px 100% no-repeat, linear-gradient(var(--section-500), var(--section-500)) top right / 3px calc(100% - 3px) no-repeat; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; transition: background .35s ease, opacity .25s ease; } .elementor-button:hover { opacity: .7; transform: translateY(-1px) scale(1.02); } .elementor-button:focus, .elementor-button:focus-visible { outline: none !important; transform: translateY(-1px) scale(1.02); } .elementor-button:focus::after, .elementor-button:focus-visible::after { content: ""; position: absolute; inset: -4px; border-radius: inherit; box-shadow: 0 0 0 3px rgba(4, 217, 255, .6); pointer-events: none; } @media (prefers-reduced-motion: reduce) { .elementor-button { transition: opacity .2s ease; } .elementor-button:hover, .elementor-button:focus, .elementor-button:focus-visible { transform: none; } } /* ================================================ Page header (News & Contact) - remove overlays =================================================== */ body.active-news .page-header, body.active-contact .page-header { background: none !important; background-color: transparent !important; background-image: none !important; mix-blend-mode: normal !important; isolation: isolate; } body.active-news .page-header::before, body.active-news .page-header::after, body.active-contact .page-header::before, body.active-contact .page-header::after { content: none !important; background: none !important; -webkit-mask: none !important; mask: none !important; box-shadow: none !important; } /* ================================================ Headings & content ink =================================================== */ body:is(.active-work, .active-about, .active-services) main :is(h1, h2, h3, h4, h5, h6) { color: var(--section-50) !important; } body.active-news main :is(p, li, dd, dt, blockquote, figcaption, h1, h2, h3, h4, h5, h6) { color: var(--active-news-500) !important; } body.active-contact main :is(p, li, dd, dt, blockquote, figcaption, h1, h2, h3, h4, h5, h6) { color: var(--active-contact-500) !important; } /* ================================================ Logo (header) =================================================== */ .elementor-location-header .custom-logo-link { display: inline-flex; align-items: center; } .elementor-location-header .custom-logo-link .site-logo { width: var(--logo-size); height: var(--logo-size); display: block; vertical-align: middle; --logo-a: var(--section-500); /* frame */ --logo-b: var(--section-50); /* fill */ transition: transform .25s ease, opacity .25s ease; will-change: transform, opacity; } .custom-logo-link:hover .site-logo { opacity: .7; transform: translateY(-1px) scale(1.02); } .custom-logo-link:focus-visible .site-logo { transform: translateY(-1px) scale(1.02); } .site-logo [style*="var(--logo-a)"] { fill: var(--logo-a); } .site-logo [style*="var(--logo-b)"] { fill: var(--logo-b); } @media (prefers-reduced-motion: reduce) { .elementor-location-header .custom-logo-link .site-logo { transition: opacity .2s ease; } .custom-logo-link:hover .site-logo, .custom-logo-link:focus-visible .site-logo { transform: none; } } /* Header ink overrides (buttons) on News/Contact */ body.active-news header.elementor-location-header .custom-logo-link .site-logo, body.active-contact header.elementor-location-header .custom-logo-link .site-logo { --logo-b: #000 !important; } body.active-news header.elementor-location-header .elementor-button, body.active-news header.elementor-location-header .elementor-button .elementor-button-text, body.active-contact header.elementor-location-header .elementor-button, body.active-contact header.elementor-location-header .elementor-button .elementor-button-text { color: #000 !important; } .elementor-button { color: var(--asl-btn-color, var(--section-50)) !important; } body { --asl-btn-color: var(--section-50); } footer { --asl-btn-color: var(--black-500); } body.active-news, body.active-contact { --asl-btn-color: var(--black-500); } /* ================================================ Footer background per section, children transparent =================================================== */ footer.elementor-location-footer { background: var(--section-500) !important; transition: background-color .2s ease; --footer-button-border: #000; /* footer-only */ } footer.elementor-location-footer .e-con, footer.elementor-location-footer [data-element_type="container"], footer.elementor-location-footer .elementor-container, footer.elementor-location-footer .elementor-element-564f082 { background: transparent !important; background-color: transparent !important; } /* Footer ink lock - keep everything black */ footer.elementor-location-footer, .elementor-location-footer footer { color: var(--black-500) !important; } footer.elementor-location-footer :is(h1, h2, h3, h4, h5, h6, p, li, dd, dt, small, blockquote, figcaption, a, strong, em, .elementor-heading-title, .elementor-item, .pp-menu-item) { color: var(--black-500) !important; } /* Footer buttons = black text + black border */ footer.elementor-location-footer .elementor-button, footer.elementor-location-footer .elementor-button .elementor-button-text { color: #000 !important; } footer.elementor-location-footer .elementor-button::before { background: linear-gradient(var(--footer-button-border), var(--footer-button-border)) top left / 100% 3px no-repeat, linear-gradient(var(--footer-button-border), var(--footer-button-border)) bottom left / calc(100% - 3px) 3px no-repeat, linear-gradient(var(--footer-button-border), var(--footer-button-border)) top left / 3px 100% no-repeat, linear-gradient(var(--footer-button-border), var(--footer-button-border)) top right / 3px calc(100% - 3px) no-repeat !important; } /* Footer link hover: keep black + underline */ footer.elementor-location-footer a:hover { color: var(--black-500) !important; text-decoration: underline !important; text-decoration-thickness: calc(var(--lnk-thickness) + .5px); text-underline-offset: var(--lnk-offset); } /* ================================================ Footer Menu: 4-row columns =================================================== */ .grid-menu-4 .elementor-nav-menu { display: grid; grid-template-rows: repeat(4, minmax(0, 1fr)); grid-auto-flow: column; grid-auto-columns: 1fr; height: 260px; gap: 4px; padding: 0; margin: 0; list-style: none; } .grid-menu-4 .elementor-nav-menu > li { display: flex; } .grid-menu-4 .elementor-nav-menu > li > a.elementor-item { display: flex; align-items: center; width: 100%; justify-content: flex-start; padding-block: 2px; outline-offset: 2px; } .grid-menu-4 nav.elementor-nav-menu--main > ul.elementor-nav-menu { margin: 0 !important; padding: 0 !important; row-gap: 4px; } .grid-menu-4 nav.elementor-nav-menu--main > ul.elementor-nav-menu > li > a.elementor-item { padding-top: 0 !important; } /* ================================================== Forms Base (all Elementor forms) ================================================== */ /* Align input text with underline */ .elementor-widget-form .elementor-field input, .elementor-widget-form .elementor-field select, .elementor-widget-form .elementor-field textarea, .elementor-widget-form .elementor-field { padding-left: 0; } /* Field styling */ .elementor-widget-form .elementor-field { border: none; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: color-mix( in srgb, currentColor var(--form-line-opacity), transparent ) !important; /* key */ background: transparent; color: inherit; transition: border-color .25s cubic-bezier(.4,0,.2,1); } /* Focus */ .elementor-widget-form .elementor-field:focus { outline: none; border-bottom-color: var(--form-focus-color) !important; } /* --------------------------------------- FIX ONLY THE FOOTER EMAIL BUTTON --------------------------------------- */ /* Remove any underline/background from the anchor itself */ .footer-email a.elementor-button, .footer-email a.elementor-button:hover { text-decoration: none !important; background-image: none !important; background-size: 0 0 !important; } /* Make sure wrapper span is clean too */ .footer-email .elementor-button-content-wrapper, .footer-email .elementor-button-content-wrapper:hover { background-image: none !important; background-size: 0 0 !important; } /* ================================================ Menus Elementor & PP Advanced =================================================== */ .pp-advanced-menu .pp-menu-item { color: var(--default-color); transition: color .3s ease, text-decoration .3s ease; } /* Show 'menu-only-dropdown' items only in dropdown mode */ .pp-advanced-menu--main .pp-advanced-menu .menu-only-dropdown { display: none !important; } .pp-advanced-menu--dropdown .pp-advanced-menu .menu-only-dropdown { display: list-item !important; } /* Full-screen (dropdown) link sizing/padding */ .pp-advanced-menu--dropdown.pp-advanced-menu__container .pp-menu-item { font-size: var(--text-nav-lg) !important; padding-left: clamp(1.5rem, -5.9611rem + 15.5642vw, 4rem) !important; } /* Full-screen backdrop - topmost + adaptive tint */ .pp-advanced-menu--dropdown.pp-menu-full-screen { position: fixed !important; inset: 0 !important; z-index: 10000 !important; background-color: rgba(255, 255, 255, .55); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); transition: background-color .3s ease, backdrop-filter .3s ease; overflow: auto !important; } @supports (background: color-mix(in oklab, white 50%, transparent)) { .pp-advanced-menu--dropdown.pp-menu-full-screen { background-color: color-mix(in oklab, var(--section-50) 80%, transparent); } } /* Unhide when open (some builds toggle aria-hidden) */ .pp-advanced-menu--dropdown[aria-hidden="false"] { display: block !important; visibility: visible !important; opacity: 1 !important; } /* News/Contact: stronger semi-white for contrast */ body.active-news .pp-advanced-menu--dropdown.pp-menu-full-screen, body.active-contact .pp-advanced-menu--dropdown.pp-menu-full-screen { background-color: rgba(255, 255, 255, .85) !important; } /* Desktop (non-dropdown) colours */ .pp-advanced-menu li.active-link > a.pp-menu-item { color: var(--section-500) !important; } .pp-advanced-menu li:not(.active-link) > a.pp-menu-item { color: var(--section-50) !important; } body.active-news .pp-advanced-menu li:not(.active-link) > a.pp-menu-item, body.active-contact .pp-advanced-menu li:not(.active-link) > a.pp-menu-item { color: #000 !important; } /* Full-screen link colours - neutralize plugin “active/current */ .pp-advanced-menu--dropdown.pp-advanced-menu__container .pp-advanced-menu li > a.pp-menu-item, .pp-advanced-menu--dropdown.pp-advanced-menu__container .pp-advanced-menu li.active-link > a.pp-menu-item, .pp-advanced-menu--dropdown.pp-advanced-menu__container .pp-advanced-menu li[class*="current"] > a.pp-menu-item { color: var(--section-50) !important; } body.active-news .pp-advanced-menu--dropdown.pp-advanced-menu__container .pp-advanced-menu li > a.pp-menu-item, body.active-contact .pp-advanced-menu--dropdown.pp-advanced-menu__container .pp-advanced-menu li > a.pp-menu-item, body.active-news .pp-advanced-menu--dropdown.pp-advanced-menu__container .pp-advanced-menu li[class*="current"] > a.pp-menu-item, body.active-contact .pp-advanced-menu--dropdown.pp-advanced-menu__container .pp-advanced-menu li[class*="current"] > a.pp-menu-item { color: #000 !important; } /* Keep underline to indicate current section in fullscreen */ body.active-work .pp-advanced-menu--dropdown.pp-advanced-menu__container .menu-work > a.pp-menu-item, body.active-about .pp-advanced-menu--dropdown.pp-advanced-menu__container .menu-about > a.pp-menu-item, body.active-services .pp-advanced-menu--dropdown.pp-advanced-menu__container .menu-services > a.pp-menu-item, body.active-news .pp-advanced-menu--dropdown.pp-advanced-menu__container .menu-news > a.pp-menu-item, body.active-contact .pp-advanced-menu--dropdown.pp-advanced-menu__container .menu-contact > a.pp-menu-item { text-decoration: underline; } /* Mobile Menu toggle label (accent everywhere) + Safari fill */ .pp-menu-toggle { background: transparent !important; } header.elementor-location-header .pp-menu-toggle-label { color: var(--section-500) !important; -webkit-text-fill-color: currentColor; /* Safari */ font-size: var(--text-nav) !important; line-height: 1; text-underline-offset: var(--lnk-offset); text-decoration-thickness: var(--lnk-thickness); transition: color .2s ease, text-decoration-thickness .2s ease; } .pp-menu-toggle-label:hover, .pp-menu-toggle-label:focus-visible, .pp-menu-toggle:focus-visible .pp-menu-toggle-label { text-decoration: underline; text-decoration-skip-ink: auto; text-decoration-thickness: calc(var(--lnk-thickness) + .5px); } /* Mobile safety: prevent header from trapping overlays */ @media (max-width: 1024px) { .elementor-location-header { transform: none !important; filter: none !important; perspective: none !important; overflow: visible !important; } } /* Menu Close Wrap positioning (support both selector shapes) */ .pp-advanced-menu--type-full-screen .pp-advanced-menu--dropdown.pp-advanced-menu__container .pp-menu-close-wrap, nav.pp-advanced-menu--dropdown.pp-menu-full-screen .pp-menu-close-wrap { position: fixed !important; top: clamp(2.5rem, -1.044rem + 7.393vw, 3.6875rem) !important; right: clamp(1.125rem, -7.4553rem + 17.8988vw, 4rem) !important; z-index: 10001 !important; } /* ================================================ CookieYes + minor tweaks =================================================== */ .cky-notice-btn-wrapper .cky-btn { font-size: 14px !important; } .wpa-test-msg { line-height: 1.5em; } /* ================================================ ASL Plain Button - opt out of global chrome ================================================ */ .elementor-widget-button.asl-plain.is-light, .elementor-widget-loop-grid.asl-plain.is-light { --asl-btn-color: var(--active-work-50); } .elementor-widget-button.asl-plain.is-dark, .elementor-widget-loop-grid.asl-plain.is-dark { --asl-btn-color: var(--black-500); } .elementor-widget-button.asl-plain .elementor-button { background: none !important; border: 0 !important; box-shadow: none !important; display: inline-flex; align-items: center; gap: 0; padding: 0; color: var(--asl-btn-color, currentColor); cursor: pointer; } /* Remove Elementor pseudo border */ .elementor-widget-button.asl-plain .elementor-button::before { content: none !important; } /* Kill Elementor hover motion */ .elementor-widget-button.asl-plain .elementor-button:hover, .elementor-widget-button.asl-plain .elementor-button:focus, .elementor-widget-button.asl-plain .elementor-button:focus-visible { opacity: 1 !important; transform: none !important; } /* Text */ .elementor-widget-button.asl-plain .elementor-button-text { color: var(--asl-btn-color, currentColor); line-height: 1.35; font-weight: 400; font-size: var(--text-button); letter-spacing: -0.02em; background-image: linear-gradient(currentColor, currentColor); background-size: 0% var(--lnk-thickness); background-repeat: no-repeat; background-position: 0 calc(100% - var(--lnk-offset)); transition: background-size .25s ease; } /* Back button text */ .elementor-widget-button.asl-plain.is-back .elementor-button-text { font-weight: 400; font-size: var(--text-button-lg); letter-spacing: -0.01em; } /* Arrow slot */ .elementor-widget-button.asl-plain .elementor-button::after { content: ""; width: var(--asl-arrow-width); height: var(--asl-arrow-height); display: inline-flex; align-items: center; justify-content: center; background-color: currentColor; -webkit-mask: url('/wp-content/uploads/2026/02/asl-arrow.svg') no-repeat center / contain; mask: url('/wp-content/uploads/2026/02/asl-arrow.svg') no-repeat center / contain; transform: translateX(0); transition: transform .35s cubic-bezier(.4,0,.2,1); } /* Hover underline */ .elementor-widget-button.asl-plain:hover .elementor-button-text { background-size: 100% var(--lnk-thickness); } /* Back button arrow BEFORE text */ .elementor-widget-button.asl-plain.is-back .elementor-button{ flex-direction: row-reverse; gap: var(--asl-arrow-gap); } /* Forward hover */ .elementor-widget-button.asl-plain:not(.is-back):hover .elementor-button::after { transform: translateX(var(--asl-icon-shift)); } /* Back arrow flip */ .elementor-widget-button.asl-plain.is-back .elementor-button::after { transform: scaleX(-1); } .elementor-widget-button.asl-plain.is-back:hover .elementor-button::after { transform: scaleX(-1) translateX(calc(var(--asl-icon-shift) * -1)); } /* ================================================ ASL Plain Load More (.is-down) opt out of hover motion ================================================ */ .elementor-widget-loop-grid.asl-plain.is-down .e-loop__load-more .elementor-button:hover, .elementor-widget-loop-grid.asl-plain.is-down .e-loop__load-more .elementor-button:focus, .elementor-widget-loop-grid.asl-plain.is-down .e-loop__load-more .elementor-button:focus-visible { opacity: 1 !important; transform: none !important; } /* Prevent transform optimisation jitter */ .elementor-widget-loop-grid.asl-plain.is-down .e-loop__load-more .elementor-button { will-change: auto; } /* ================================================ ASL Plain Button & Loop Grid Load More (.asl-plain .is-down) ================================================ */ /* Base button */ .elementor-widget-loop-grid.asl-plain .e-loop__load-more .elementor-button { display: inline-flex; align-items: center; gap: 0; padding: 0; cursor: pointer; } /* Text */ .elementor-widget-loop-grid.asl-plain .e-loop__load-more .elementor-button-text { font-weight: 400; font-size: var(--text-button-lg); letter-spacing: -0.01em; background-image: linear-gradient(currentColor, currentColor); background-size: 0% var(--lnk-thickness); background-repeat: no-repeat; background-position: 0 calc(100% - var(--lnk-offset)); transition: background-size .35s cubic-bezier(.4,0,.2,1); } /* Arrow */ .elementor-widget-loop-grid.asl-plain .e-loop__load-more .elementor-button::after { content: ""; width: var(--asl-arrow-width); height: var(--asl-arrow-height); background-color: currentColor; -webkit-mask: url('/wp-content/uploads/2026/02/asl-arrow.svg') no-repeat center / contain; mask: url('/wp-content/uploads/2026/02/asl-arrow.svg') no-repeat center / contain; transition: transform .35s cubic-bezier(.4,0,.2,1); } /* DOWN modifier */ .elementor-widget-loop-grid.asl-plain.is-down .e-loop__load-more .elementor-button::after { transform: rotate(90deg); } /* Hover underline */ .elementor-widget-loop-grid.asl-plain .e-loop__load-more:hover .elementor-button-text { background-size: 100% var(--lnk-thickness); } /* Hover motion */ .elementor-widget-loop-grid.asl-plain.is-down .e-loop__load-more:hover .elementor-button::after { transform: rotate(90deg) translateX(var(--asl-icon-shift)); } /* Vars */ .elementor-widget-loop-grid.asl-plain { --icon-shift: var(--asl-icon-shift); } /* FORCE colour ownership - Loop Grid Load More */ .elementor-widget-loop-grid.asl-plain .e-loop__load-more .elementor-button { color: var(--asl-btn-color, currentColor); } .elementor-widget-loop-grid.asl-plain .e-load-more-spinner svg { fill: currentColor; } /* Align left Loop Grid Load More */ body.active-work .elementor-widget-loop-grid.asl-plain .e-loop__load-more{ text-align: left !important; /* padding-left: clamp(1rem, -3.9689rem + 12.4514vw, 14rem);*/ padding-top: 1.5rem; border-top: var(--lnk-thickness, 1px) solid currentColor; } body.active-work .elementor-widget-loop-grid.asl-plain .e-loop__load-more{ text-align: left !important; padding-top: 1.5rem; border-top: var(--lnk-thickness, 1px) solid currentColor; } body.active-news .elementor-widget-loop-grid.asl-plain .e-loop__load-more{ text-align: left !important; padding-left: clamp(1rem, -3.9689rem + 12.4514vw, 14rem); } body.active-work .elementor-widget-loop-grid .elementor-grid { padding-bottom: clamp(1rem, 4vw, 2rem); } /* ================================================ Remove final loop-item border before Load More ================================================ */ /* Kill the Elementor "frame" pseudo-border ONLY for Load More */ .elementor-widget-loop-grid.asl-plain .e-loop__load-more .elementor-button::before{ content: none !important; /* removes the pseudo-element entirely */ } /* ================================================ Colour Contexts ================================================ */ /* Project single override (use your token, not a literal) */ body.single-project { --asl-btn-color: var(--section-50); } /* DARK CONTEXTS only affect asl-plain INSIDE dark sections */ body[data-theme="dark"] .elementor-widget-button.asl-plain, body[data-theme="dark"] .elementor-widget-loop-grid.asl-plain { --asl-btn-color: var(--section-50); } body.active-news, body.active-contact { --asl-btn-color: var(--black-500); } /* Motion safety */ @media (prefers-reduced-motion: reduce) { .elementor-widget-button.asl-plain * { transition: none !important; } } /* Motion */ .asl-plain { --asl-icon-shift: 10px; } .asl-plain.is-back {--asl-icon-shift: -10px; } /* ================================================ Extend ASL Plain Button to Elementor Forms ================================================ */ .elementor-widget-form.asl-plain.is-light { --asl-btn-color: var(--active-work-50); } .elementor-widget-form.asl-plain.is-dark { --asl-btn-color: var(--black-500); } /* Target the form submit button */ .elementor-widget-form.asl-plain .elementor-button { background: none !important; border: 0 !important; box-shadow: none !important; display: inline-flex; align-items: center; gap: 0; padding: 0; margin-top: 0.75em; color: var(--asl-btn-color, currentColor); cursor: pointer; } /* FORCE colour ownership (fix Elementor override) */ .elementor-widget-form.asl-plain .elementor-button { color: var(--asl-btn-color) !important; } /* Remove Elementor junk */ .elementor-widget-form.asl-plain .elementor-button::before { content: none !important; } /* Kill default hover */ .elementor-widget-form.asl-plain .elementor-button:hover, .elementor-widget-form.asl-plain .elementor-button:focus { opacity: 1 !important; transform: none !important; } /* Text underline system */ .elementor-widget-form.asl-plain .elementor-button-text { color: var(--asl-btn-color, currentColor); line-height: 1.2; font-weight: 600; font-size: var(--text-button-lg); letter-spacing: -0.01em; background-image: linear-gradient(currentColor, currentColor); background-size: 0% var(--lnk-thickness); background-repeat: no-repeat; background-position: 0 calc(100% - var(--lnk-offset)); transition: background-size .25s ease; } .elementor-widget-form.asl-plain:hover .elementor-button-text { background-size: 100% var(--lnk-thickness); } /* Arrow (same system) */ .elementor-widget-form.asl-plain .elementor-button::after { content: ""; width: var(--asl-arrow-width); height: var(--asl-arrow-height); display: inline-flex; align-items: center; justify-content: center; background-color: currentColor; -webkit-mask: url('/wp-content/uploads/2026/02/asl-arrow.svg') no-repeat center / contain; mask: url('/wp-content/uploads/2026/02/asl-arrow.svg') no-repeat center / contain; transform: translateX(0); transition: transform .35s cubic-bezier(.4,0,.2,1); } .elementor-widget-form.asl-plain:hover .elementor-button::after { transform: translateX(var(--asl-icon-shift)); } /* ================================================ 404 Work palette + justified "404" with smooth damped bounce =================================================== */ body.error404 { --section-500: var(--active-work-500); --section-50: var(--active-work-50); } body.error404 header.elementor-location-header .pp-menu-toggle-label { color: var(--section-500) !important; -webkit-text-fill-color: currentColor; /* iOS */ } /* Layout tretch 4 / 0 / 4 */ body.error404 h1.asl-404-justified, .elementor-825 h1.asl-404-justified, .elementor-location-single[data-elementor-type="error-404"] h1.asl-404-justified { display: flex; justify-content: space-between; align-items: flex-end; width: 100%; overflow: visible; text-align: left; font-weight: 800; line-height: .95; font-size: var(--text-404); color: var(--section-50); } /* Per-letter (single continuous animation) */ body.error404 h1.asl-404-justified .char, .elementor-825 h1.asl-404-justified .char, .elementor-location-single[data-elementor-type="error-404"] h1.asl-404-justified .char { display: inline-block; position: relative; backface-visibility: hidden; will-change: transform, opacity; opacity: 1; transform: translate3d(0, calc(-1.5em + var(--offset, 0)), 0); animation: asl-dropDamp 31s linear var(--fall-delay, 0s) both 1; /* ~0.9s fall + ~30s damped bounce */ } /* Staggered timing */ body.error404 h1.asl-404-justified .char:nth-child(1), .elementor-825 h1.asl-404-justified .char:nth-child(1), .elementor-location-single[data-elementor-type="error-404"] h1.asl-404-justified .char:nth-child(1) { --fall-delay: .00s; --offset: 0.08em; --amp: .10em; } body.error404 h1.asl-404-justified .char:nth-child(2), .elementor-825 h1.asl-404-justified .char:nth-child(2), .elementor-location-single[data-elementor-type="error-404"] h1.asl-404-justified .char:nth-child(2) { --fall-delay: .12s; --offset: -0.34em; --amp: .08em; } body.error404 h1.asl-404-justified .char:nth-child(3), .elementor-825 h1.asl-404-justified .char:nth-child(3), .elementor-location-single[data-elementor-type="error-404"] h1.asl-404-justified .char:nth-child(3) { --fall-delay: .24s; --offset: 0.44em; --amp: .16em; } /* One continuous curve */ @keyframes asl-dropDamp { 0% { transform: translate3d(0, calc(-1.5em + var(--offset)), 0); opacity: 0; filter: blur(4px); animation-timing-function: cubic-bezier(.18, .85, .25, 1); } 3% { transform: translate3d(0, var(--offset), 0); opacity: 1; filter: none; animation-timing-function: cubic-bezier(.22, 1, .36, 1); } 12% { transform: translate3d(0, calc(var(--offset) - 1.20*var(--amp, .12em)), 0); } 22% { transform: translate3d(0, calc(var(--offset) + 0.78*var(--amp, .12em)), 0); } 34% { transform: translate3d(0, calc(var(--offset) - 0.50*var(--amp, .12em)), 0); } 46% { transform: translate3d(0, calc(var(--offset) + 0.32*var(--amp, .12em)), 0); } 60% { transform: translate3d(0, calc(var(--offset) - 0.20*var(--amp, .12em)), 0); } 74% { transform: translate3d(0, calc(var(--offset) + 0.11*var(--amp, .12em)), 0); } 88% { transform: translate3d(0, calc(var(--offset) - 0.05*var(--amp, .12em)), 0); } 100% { transform: translate3d(0, var(--offset), 0); } } @media (prefers-reduced-motion: reduce) { body.error404 h1.asl-404-justified .char, .elementor-825 h1.asl-404-justified .char, .elementor-location-single[data-elementor-type="error-404"] h1.asl-404-justified .char { animation: none !important; opacity: 1 !important; transform: translate3d(0, var(--offset, 0), 0) !important; filter: none !important; } } /* ================================================ PP Advanced Menu Close (theme-aware) =================================================== */ /* Keep the wrapper pinned where you want it (alias also defined above) */ nav.pp-advanced-menu--dropdown.pp-menu-full-screen .pp-menu-close-wrap { overflow: visible !important; /* prevent any clipping */ } /* Let the X follow the theme ink */ nav.pp-advanced-menu--dropdown.pp-menu-full-screen .pp-menu-close { width: 30px; height: 30px; line-height: 0; background: transparent !important; border: 0 !important; box-shadow: none !important; color: var(--section-50, #fff); /* default on dark sections */ overflow: visible; /* ensure pseudo-lines aren’t cropped */ } /* Draw the X using currentColor */ nav.pp-advanced-menu--dropdown.pp-menu-full-screen .pp-menu-close::before, nav.pp-advanced-menu--dropdown.pp-menu-full-screen .pp-menu-close::after { content: ""; position: absolute; top: 50%; left: 50%; width: 120%; height: 3px; /* slightly longer & thicker to avoid subpixel crop */ background: currentColor !important; transform-origin: center; transform: translate(-50%, -50%) rotate(45deg); } nav.pp-advanced-menu--dropdown.pp-menu-full-screen .pp-menu-close::after { transform: translate(-50%, -50%) rotate(-45deg); } /* ink swap on light sections */ body.active-news nav.pp-advanced-menu--dropdown.pp-menu-full-screen .pp-menu-close, body.active-contact nav.pp-advanced-menu--dropdown.pp-menu-full-screen .pp-menu-close { color: var(--black-500, #000) !important; /* or use var(--section-500) if preferred */ } /* Small affordances */ nav.pp-advanced-menu--dropdown.pp-menu-full-screen .pp-menu-close:hover { opacity: .85; } nav.pp-advanced-menu--dropdown.pp-menu-full-screen .pp-menu-close:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in oklab, currentColor 35%, transparent); border-radius: 999px; } /* Reusable 'no bullets' utility */ .nobullets ul, .nobullets ol { list-style: none !important; margin: 0; padding-left: 0; padding-inline-start: 0; } .nobullets li { margin: 0 0 .5em 0; } .nobullets li::marker { content: ""; } /* modern bullets */ .nobullets li::before { content: none !important; } /* theme icon bullets */ /* Make each loop item a flex column and stretch to equal height */ .next-grid .e-loop-item, .next-grid .loop-card { height: 100%; display: flex; flex-direction: column; } /* Stable image height via aspect-ratio; no fixed heights needed */ .next-grid .loop-card img { aspect-ratio: 16/9; /* change if you prefer 4/3, 3/2, etc. */ width: 100%; height: auto; object-fit: cover; display: block; } /* Text block sits below the image and stays tidy */ .next-grid .loop-body { margin-top: auto; /* pushes text to bottom if there’s extra space */ padding: clamp(12px, 1.6vw, 20px); } /* Optional: clamp long titles so rows line up nicely */ .next-grid .loop-title .elementor-heading-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } /* Optional: neat inline terms */ .next-grid .elementor-post-info__terms-list { display: inline-flex; gap: .5rem; flex-wrap: wrap; } /* image-duo shortcode version (grid with real ) */ .image-duo { --image-duo-gap: 24px; --image-duo-ratio: 236 / 315; display: grid; grid-template-columns: 1fr 1fr; gap: var(--image-duo-gap); align-items: stretch; } .image-duo--single { grid-template-columns: 1fr; } .image-duo__item { position: relative; overflow: hidden; border-radius: 12px; aspect-ratio: var(--image-duo-ratio); } .image-duo__link, .image-duo__img { display: block; width: 100%; height: 100%; } .image-duo__img { object-fit: cover; object-position: center; transition: transform .5s ease; } @media (hover:hover) { .image-duo__item:hover .image-duo__img { transform: scale(1.03); } } @media (max-width: 900px) { .image-duo { grid-template-columns: 1fr; } } /* If the image itself is the box */ .image-single { aspect-ratio: 16 / 9; /* pick your ratio */ background-size: cover; background-position: center; min-height: 1px; } /* ========================================= HEADER — EDITORIAL + SMART STICKY ========================================= */ header + .elementor-sticky__spacer { display: none !important; } /* Desktop: fixed header + content offset + Elementor gap correction */ header.elementor-location-header + .elementor { margin-top: calc(var(--header-h) - var(--gap-fix)); } /* body.page-template-default.active-services header.elementor-location-header + .elementor > .e-con:first-child { padding-top: 0 !important; }*/ body.active-about { margin-top: calc(var(--header-h) - var(--gap-fix)); } /* Header */ header.elementor-location-header { position: fixed; top: 0; left: 0; width: 100%; z-index: 200; will-change: transform; transform: translateY(0); transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease, backdrop-filter 0.3s ease; background: var(--page-bg-color, var(--black-500)); color: var(--section-50, #fff); } /* JS hide/reveal */ header.elementor-location-header.header--hidden { transform: translateY(-100%); } body.scrolled header.elementor-location-header { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } /* Light page contrast */ body.active-news header.elementor-location-header, body.active-contact header.elementor-location-header { color: var(--section-500); } /* Mobile: header back in normal flow */ @media (max-width: 1024px) { header.elementor-location-header { position: relative; transform: none !important; } header.elementor-location-header + .elementor { margin-top: 0 !important; transform: none !important; } body.active-about .hero-row { margin-top: 0 !important; } body.active-about .asl-hero-video--hero { padding-top: var(--header-h); } } /* Ensure correct contrast on light pages */ body.active-news header.elementor-location-header, body.active-contact header.elementor-location-header { color: var(--section-500); } body.scrolled header.elementor-location-header { backdrop-filter: blur(6px); } header.elementor-location-header.header--hidden { transform: translateY(-100%); } header.elementor-location-header:not(.header--hidden) { transition-duration: 0.7s; } /* ===== HERO sizing + media layers ===== */ .hero-dyn { position: relative; isolation: isolate; overflow: hidden; background: #000; } .hero-dyn.hero--full { width: 100vw; margin-left: calc(50% - 50vw); max-width: none; min-height: 90dvh; } /* MOBILE override */ @media (max-width: 1024px) { .hero-dyn.hero--full { min-height: clamp(520px, 90dvh, 820px); } } /* Media layers */ .hero-dyn > .media-image, .hero-dyn > .media-video { position: absolute; inset: 0; display: none; z-index: 1 !important; } .hero-dyn > .media-image { background: center / cover no-repeat; } .hero-dyn[data-hero-type="image"i] > .media-image { display: block !important; } .hero-dyn[data-hero-type="video"i] > .media-video { display: block !important; } /* Video stretch */ .hero-dyn .elementor-widget-video, .hero-dyn .elementor-widget-video .elementor-widget-container { height: 100%; } /* was: .hero-dyn ... , .hero-dyn video { ... } */ .hero-dyn .elementor-widget-video .elementor-wrapper, .hero-dyn video.hero-video { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; display: block; z-index: 1 !important; } /* ===== Overlay (bottom-left, inline) ===== */ .hero-dyn > .hero-overlay { /* Compute once */ --overlay-b: calc( clamp(1.5rem, 1.3258rem + 2.4495vw, 5rem) + max(env(safe-area-inset-bottom, 0px), var(--chrome-b, 0px)) ); bottom: var(--overlay-b); position: absolute; inset: 0; z-index: 3; display: flex; align-items: flex-end; justify-content: flex-start; gap: clamp(12px, 1.6vw, 28px); padding-left: clamp(1rem, -3.9689rem + 12.4514vw, 14rem); padding-right: clamp(1rem, -3.9689rem + 12.4514vw, 14rem); padding-bottom: 0; /* important */ pointer-events: none; } .hero-dyn > .hero-overlay > * { pointer-events: auto; } .hero-dyn .hero-overlay .elementor-heading-title { margin: 0; line-height: 1; font-size: var(--text-hero); max-inline-size: 18ch; text-wrap: balance; letter-spacing: -0.06em; } /* === SVG as inline punctuation (like a full stop) === */ .hero-dyn .hero-line--bottom::after, .hero-dyn .hero-line--top::after { content: ""; display: inline-block; width: 0.28em; /* already scaled instead of transform */ height: 0.28em; margin-left: 0.02em; -webkit-mask: url('/wp-content/themes/hello-elementor-child/asl-mark.svg') no-repeat center; mask: url('/wp-content/themes/hello-elementor-child/asl-mark.svg') no-repeat center; -webkit-mask-size: contain; mask-size: contain; background-color: currentColor; /* required */ vertical-align: -0.085em; opacity: 0; animation: asl-mark-in 0.6s ease-out 0.6s forwards; } .hero-overlay .elementor-heading-title .hero-line--top { color: var(--active-work-50, #FFF); } @keyframes asl-mark-in { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: scale(0.5); } } /* Phones: ensure generous clearance even when toolbars are chunky */ @media (max-width: 767px) { .hero-dyn > .hero-overlay { --overlay-b: max(72px, /* guaranteed minimum on phones */ calc(16px + env(safe-area-inset-bottom, 0px) + var(--chrome-b, 0px))); /* keep inline (row) layout; remove these lines if you *want* stacking */ flex-direction: row; align-items: flex-end; justify-content: flex-start; } } /* === HERO - LCP patch: keep poster visible for video & fade-swap (must come AFTER previous hero rules) === */ .hero-dyn > .media-image { display: block !important; } .hero-dyn > .media-image .hero-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .4s ease; z-index: 0 !important; } /* Even when it's a video hero, keep the poster visible pre-swap */ .hero-dyn[data-hero-type="video"i] > .media-image { display: block !important; } /* Injected video styling (overrides earlier .hero-dyn video rules) */ .hero-dyn video.hero-video { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; display: block; z-index: 1 !important; /* sits above the poster */ } /* Ensure Chrome doesn't lazy-paint the hero */ .hero-dyn { content-visibility: visible !important; contain-intrinsic-size: auto !important; } /* Keep overlay clickable above the video everywhere */ .hero-dyn .media-video, .hero-dyn video.hero-video { pointer-events: none; } /* Smoother cross-fade on GPU */ .hero-dyn .hero-poster, .hero-dyn video.hero-video { will-change: opacity; transform: translateZ(0); backface-visibility: hidden; } /* Respect reduced-motion (no fade if user prefers) */ @media (prefers-reduced-motion: reduce) { .hero-dyn .hero-poster, .hero-dyn video.hero-video { transition: none !important; } } /* ================================================ Sits between media (z:0) and text overlay (z:3) [asl_hero] uses ACF if present; otherwise 20% black. [asl_hero tint="35" tint_color="#000000"] 5% black, regardless of ACF. [asl_hero tint="45"] 45% plus ACF color (if set), otherwise black. [asl_hero tint_color="#ff00ff"] ACF opacity (or 20% if none) with magenta. [asl_hero tint="0"] overlay off (transparent), color doesn't matter. =================================================== */ .hero-dyn > .media-tint { position: absolute; inset: 0; z-index: 1 !important; /* media is 0, overlay is 3 */ pointer-events: none; /* Some browsers prefer background-color when the value is a color var */ background: var(--hero-tint, transparent); background-color: var(--hero-tint, transparent); } /* ========================================= Projects filter token-driven styling (Design tokens must be defined above) ========================================= */ /* Map filter vars to your tokens */ :root { --pf-bg: var(--black-500, #000); /* panel background */ --pf-text: #fff; /* main text */ --pf-muted: rgba(255, 255, 255, .70); --pf-border: var(--active-work-500); /* panel outline */ --pf-outline: rgba(255, 255, 255, .38); /* checkbox border */ --pf-accent: var(--active-service-500, var(--default-color, #04D9FF)); --pf-tick-url: url('/wp-content/themes/hello-elementor-child/tick.svg'); /* update path if needed */ } /* Root container (optional if already present in shortcode CSS) */ .pf { position: relative; display: inline-block; } /* Toggle (Services) caret never underlines */ .pf .pf-toggle { background: transparent !important; border: 0 !important; color: var(--pf-text); padding: 0; font-weight: 600; line-height: 1.1; cursor: pointer; text-decoration: none; /* don't underline whole button */ } .pf .pf-toggle:hover .pf-label { text-decoration: underline; } /* underline WORD only */ .pf .pf-toggle .pf-caret { margin-left: 6px; color: var(--pf-text); text-decoration: none !important; /* caret never underlines */ } .pf.is-filtered .pf-label { text-decoration: underline; } /* Panel */ .pf .pf-panel { position: absolute; left: 0; top: 100%; margin-top: 24px; z-index: 9999; min-width: 440px; background: var(--pf-bg); color: var(--pf-text); border: 1px solid var(--pf-border); border-radius: 0; padding: 22px 26px; } /* List */ .pf .pf-list { display: grid; gap: 18px; margin-bottom: 18px; } .pf .pf-check { display: flex; align-items: center; gap: 14px; cursor: pointer; } .pf .pf-check span { font-size: var(--text-ui); line-height: 1; color: var(--pf-text); } /* Checkbox idle (#000 fill + 1px border) */ .pf .pf-check input[type="checkbox"] { appearance: none; width: 22px; height: 22px; box-sizing: border-box; background: var(--black-500, #000); border: 1px solid var(--pf-outline) !important; border-radius: 0; position: relative; cursor: pointer; transition: all .12s ease; } .pf .pf-check input[type="checkbox"]::after { content: none !important; } /* nuke any old ticks */ .pf .pf-check input[type="checkbox"]::before { content: none !important; } .pf .pf-check input[type="checkbox"]:hover { border-color: #fff; } /* Checkbox checked (white fill, no border, centered SVG tick) */ .pf .pf-check input[type="checkbox"]:checked { background: #fff; border-color: transparent; background-image: var(--pf-tick-url); background-repeat: no-repeat; background-position: center; background-size: 14px 14px; } /* Actions */ .pf .pf-actions { display: flex; align-items: center; justify-content: space-between; } .pf .pf-actions .pf-apply, .pf .pf-actions .pf-clear { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; color: var(--pf-muted); } .pf .pf-actions .pf-apply { color: var(--pf-accent); } .pf .pf-actions .pf-apply:hover, .pf .pf-actions .pf-clear:hover { text-decoration: underline; } /* Focus ring */ .pf .pf-check input[type="checkbox"]:focus-visible { outline: 1px solid var(--pf-accent); outline-offset: 2px; } /* Mobile */ @media (max-width:540px) { .pf .pf-panel { min-width: min(92vw, 460px); } } /* [projects_sort] filter styling */ .psort-link { color: var(--pf-muted); text-decoration: none; /* underline system */ background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: 0 100%; background-size: 0% var(--lnk-thickness, 1px); transition: background-size .25s cubic-bezier(.4,0,.2,1); } .psort-link:hover { background-size: 100% var(--lnk-thickness, 1px); } .psort { --pf-accent: var(--active-work-500); display:flex; align-items:center; gap:.5rem; } .psort-label { opacity:.7; margin-right:.25rem; } .psort-link.is-active { color: var(--active-work-500); background-size: 100% var(--lnk-thickness, 1px); } .psort-sep { opacity: 1; } /* ======================================== ASL FADE-UP (SAFE) (MATCHES asl-scroll-reveal.js) ======================================== */ .work-grid .e-loop-item.asl-reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.5s ease, transform 0.5s cubic-bezier(.22,.61,.36,1); transition-delay: var(--reveal-delay, 0ms); } .work-grid .e-loop-item.asl-reveal.is-inview { opacity: 1; transform: translateY(0); } /* ========================================= GRID CONTAINER ========================================= */ #projects-grid .elementor-loop-container { display: grid !important; grid-auto-flow: dense; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: var(--space-md); row-gap: var(--space-2xl); align-items: start; } /* Direct children ONLY */ #projects-grid .elementor-loop-container > .e-loop-item { margin: 0 !important; width: auto !important; min-width: 0; } /* ========================================= ASL 6-COL METRO — CLEAN SYSTEM (FIXED) ========================================= */ /* FEATURE — first item only */ #projects-grid .elementor-loop-container > .e-loop-item:first-child { grid-column: span 6; } /* 2 — after feature (4) */ #projects-grid .elementor-loop-container > .e-loop-item:nth-child(6n + 2) { grid-column: span 4; } /* 3 — small */ #projects-grid .elementor-loop-container > .e-loop-item:nth-child(6n + 3) { grid-column: span 2; } /* 4–5–6 — thirds */ #projects-grid .elementor-loop-container > .e-loop-item:nth-child(6n + 4), #projects-grid .elementor-loop-container > .e-loop-item:nth-child(6n + 5), #projects-grid .elementor-loop-container > .e-loop-item:nth-child(6n + 6) { grid-column: span 2; } /* 7 — full width again */ #projects-grid .elementor-loop-container > .e-loop-item:nth-child(6n + 7) { grid-column: span 2; } /* ========================================= TABLET — 3 COLUMN SYSTEM ========================================= */ @media (max-width: 1024px) { #projects-grid .elementor-loop-container { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl); } /* Reset all spans */ #projects-grid .elementor-loop-container > .e-loop-item { grid-column: span 1 !important; } /* Pattern: 3 / 3 / 1-1-1 repeat */ /* Row 1 — full */ #projects-grid .elementor-loop-container > .e-loop-item:nth-child(6n + 1) { grid-column: span 3; } /* Row 2 — full */ #projects-grid .elementor-loop-container > .e-loop-item:nth-child(6n + 2) { grid-column: span 3; } /* Row 3 — 3 equal */ #projects-grid .elementor-loop-container > .e-loop-item:nth-child(6n + 3), #projects-grid .elementor-loop-container > .e-loop-item:nth-child(6n + 4), #projects-grid .elementor-loop-container > .e-loop-item:nth-child(6n + 5) { grid-column: span 1; } /* Row 4 — full again (nice rhythm reset) */ #projects-grid .elementor-loop-container > .e-loop-item:nth-child(6n + 6) { grid-column: span 3; } } /* ========================================= MOBILE — SINGLE COLUMN ========================================= */ @media (max-width: 767px) { #projects-grid .elementor-loop-container { grid-template-columns: 1fr; gap: var(--space-2xl); } #projects-grid .elementor-loop-container > .e-loop-item { grid-column: span 1 !important; } } /* ========================================= IMAGE RHYTHM (ALL DEVICES) ========================================= */ .loop-card { display: flex; flex-direction: column; gap: var(--space-sm); } .card-hero { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; flex: 0 0 auto; } /* Larger cards */ @media (min-width: 1025px) { #projects-grid .e-loop-item[style*="span 4"] .card-hero { aspect-ratio: 3 / 2; } } /* ========================================= MEDIA LAYER ========================================= */ .card-hero-media { position: absolute; inset: 0; overflow: hidden; z-index: 1; } .card-hero-media img, .card-hero-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; pointer-events: none; } .card-hero-media video { will-change: transform, opacity; backface-visibility: hidden; } /* Poster fade */ .card-hero-poster { opacity: 1; transition: opacity .35s ease; } .loop-card.is-playing .card-hero-poster, .card-hero.is-playing .card-hero-poster { opacity: 0; } /* ========================================= OVERLAY (NEW SYSTEM) ========================================= */ .card-hero-overlay { position: absolute; inset: 0; z-index: 2; background: rgba(0,0,0,0); transition: background .35s ease; pointer-events: none; } /* ========================================= BADGE (NEW SYSTEM) ========================================= */ .card-hero-badge { position: absolute; left: 12px; bottom: 12px; width: 40px; height: 40px; background-color: var(--asl-badge-color); -webkit-mask: var(--asl-mark-url) no-repeat center / 70%; mask: var(--asl-mark-url) no-repeat center / 70%; opacity: 0; transform: translateY(4px); transition: opacity .35s ease, transform .35s ease; z-index: 3; pointer-events: none; } /* ========================================= CLICKABLE LAYER ========================================= */ .card-hero-link { position: absolute; inset: 0; z-index: 4; } /* ========================================= SHORTCODE FILL ========================================= */ .loop-card .card-hero > .elementor-widget-shortcode, .loop-card .card-hero > .elementor-widget-shortcode > .elementor-widget-container, .loop-card .card-hero > .elementor-widget-shortcode > .elementor-widget-container > .elementor-shortcode, .loop-card .card-hero > .elementor-widget-shortcode > .elementor-widget-container > .elementor-shortcode > .card-hero-media { width: 100%; height: 100%; } .loop-card .card-hero > .elementor-widget-shortcode { flex: 1 1 auto; align-self: stretch; min-width: 0; } /* ========================================= VARIABLES ========================================= */ :root { --asl-mark-url: url("/wp-content/themes/hello-elementor-child/asl-mark.svg"); --asl-badge-color: var(--default-color, #04D9FF); } /* ========================================= MEDIA ANIMATION ========================================= */ .card-hero-media img, .card-hero-media video { transition: transform .9s cubic-bezier(.22, 1, .36, 1), opacity .35s ease; } /* ========================================= DESKTOP HOVER ========================================= */ @media (hover: hover) { .card-hero:hover .card-hero-overlay { background: rgba(0,0,0,.18); } .card-hero:hover .card-hero-badge { opacity: .95; transform: none; } .card-hero:hover .card-hero-media img, .card-hero:hover .card-hero-media video { transform: scale(1.05) translateY(-2px); opacity: .92; } } .loop-card.is-hovering .card-hero-overlay { background: rgba(0,0,0,.18); } .loop-card.is-hovering .card-hero-badge { opacity: .95; transform: none; } /* ========================================= SMALL SCREENS ========================================= */ @media (max-width: 1366px) { .loop-card { flex-direction: column; var(--space-sm); } .loop-body { position: static; margin: 0; min-width: 0; } } /* ========================================= REDUCED MOTION ========================================= */ @media (prefers-reduced-motion: reduce) { .card-hero-media img, .card-hero-media video { transition: none; transform: none; } } /* ========================================= SAFARI VIDEO FIX ========================================= */ /*.hero-dyn .hero-overlay .elementor-heading-title { font-family: var(--e-global-typography-1d86d53-font-family), Sans-serif; font-size: var( --e-global-typography-9fc5aa7-font-size ) ; line-height: var( --e-global-typography-1d86d53-line-height ); letter-spacing: var( --e-global-typography-1d86d53-letter-spacing ); word-spacing: var( --e-global-typography-1d86d53-word-spacing ); font-size-adjust: 0.5; }*/ .hero-overlay .elementor-heading-title .hero-line--bottom { color: var(--active-work-500, #04D9FF); /* or your chosen color */ } .hero-overlay .elementor-heading-title { text-wrap: balance; line-height: 0.9; } .card-hero .card-hero-poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; } /* =============================================== SVG ASL Hero Mark CSS fallback in case SMIL is ever blockeds =============================================== */ /* --- Fix hero mark inside overlay only --- */ .hero-dyn .hero-overlay .asl-hero-mark, .hero-dyn .hero-overlay .asl-hero-mark * { background: transparent !important; /* kill any block fill applied by theme/plugins */ } /* ensure the stroke actually scales and we don't get a big solid square look */ .hero-dyn .hero-overlay .asl-hero-mark__path { fill: none !important; vector-effect: none !important; /* override any non-scaling-stroke */ stroke: currentColor !important; stroke-linejoin: miter; stroke-linecap: butt; shape-rendering: geometricPrecision; } /* belt-and-braces: keep the svg clean */ .hero-dyn .hero-overlay .asl-hero-mark__svg { display: block; background: transparent !important; overflow: visible !important; } .hero-dyn[data-hero-type="video"] .hero-poster { opacity: 1; transition: opacity .4s ease; } .hero-dyn[data-hero-type="video"] video.hero-video { opacity: 0; transition: opacity .4s ease; } /* flip only when JS says it's *really* playing */ .hero-dyn.hero--playing video.hero-video { opacity: 1; } .hero-dyn.hero--playing .hero-poster { opacity: 0; } /* ===================================================== ASL Fixpack hero/card layering + single reveal policy Load this LAST (after your theme + Elementor CSS) ===================================================== */ /* ---------- HERO: stable layering ---------- */ .hero-dyn { content-visibility: visible !important; contain-intrinsic-size: auto !important; } .hero-dyn > .media-image, .hero-dyn > .media-video { position: absolute; inset: 0; z-index: 0 !important; /* media base */ pointer-events: none; } .hero-dyn > .media-image { background: center / cover no-repeat; } .hero-dyn > .media-tint { position: absolute; inset: 0; z-index: 2 !important; /* above media, below overlay */ pointer-events: none; background: var(--hero-tint, transparent); background-color: var(--hero-tint, transparent); } .hero-dyn > .hero-overlay { position: absolute; inset: 0; z-index: 3 !important; /* topmost */ pointer-events: none; } .hero-dyn > .hero-overlay > * { pointer-events: auto; } /* Make sure the actual poster/video fill and stack correctly */ .hero-dyn .hero-poster, .hero-dyn video.hero-video { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; display: block; backface-visibility: hidden; -webkit-backface-visibility: hidden; transform: translateZ(0); -webkit-transform: translateZ(0); will-change: opacity; } .hero-dyn .hero-poster { z-index: 0 !important; } .hero-dyn video.hero-video { z-index: 1 !important; pointer-events: none; } /* ---------- Single reveal policy (no duplicates elsewhere) ---------- */ @media (prefers-reduced-motion: reduce) { .hero-dyn .hero-poster, .hero-dyn video.hero-video { transition: none !important; } } /* ---------- Cards: keep media click-through & GPU-stable ---------- */ .card-hero video { pointer-events: none !important; border: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; transform: translateZ(0); -webkit-transform: translateZ(0); will-change: opacity, transform; } @supports selector(:has(*)) { .loop-card:has(video) .card-hero img { transform: none !important; } } /* HERO overlay: keep a real bottom gap using padding, not bottom-positioning */ .hero-dyn > .hero-overlay{ /* remove any bottom override from older rules */ inset: 0; /* fill the hero */ /* bottom: var(--overlay-b); <-- delete if present */ padding-bottom: var(--overlay-b); /* this is the space you want */ } @media (max-width: 767px) { .loop-card { flex-direction: column; } .loop-body { position: static; } } /* ================================================== LOGO STRIP shortcode [asl_logo_strip] Example: [asl_logo_strip bg="#0b0b0b" speed="36" height="40" gap="64" mark_color="#04D9FF" animate="1"] ================================================== */ /* Container (transparent by default) */ .als-logo-strip { position: relative; background: var(--als-bg, transparent); padding: clamp(10px, 2.2vw, 18px) 0; } /* Logos: default to mono black when .is-mono is present */ .als-logo-strip.is-mono .als-logo-strip__img { /* Force black for SVG/PNG/JPG */ filter: brightness(0) saturate(100%); } /* ASL mark: default to black-500 */ .als-logo-strip__sep .asl-mark { height: calc(var(--als-h, 28px) * .4); width: auto; color: var(--als-mark-color, var(--black-500))!important; /* ← token default */ display: block; } /* Size the logos from the --als-h var set by the shortcode */ .als-logo-strip .als-logo-strip__img{ height: calc(var(--als-h, 28px) * var(--logo-scale, 1)) !important; max-height: calc(var(--als-h, 28px) * var(--logo-scale, 1)) !important; width: auto !important; object-fit: contain; display: block; } /* duplicates the list and animates the rail */ .als-logo-strip.is-animated .als-logo-strip__rail { animation: als-marquee var(--als-speed, 40s) linear infinite; will-change: transform; } /* Force mono black logos */ .als-logo-strip.is-mono .als-logo-strip__img { filter: brightness(0) saturate(100%) !important; /* enforce black */ } /* Rail animates when the section has .is-animated */ .als-logo-strip.is-animated .als-logo-strip__rail { animation: als-marquee var(--als-speed, 40s) linear infinite; will-change: transform; } /* Flex + no shrink so -50% lines up perfectly */ .als-logo-strip__rail { display: flex; align-items: center; gap: var(--als-gap, 56px); /* gap between the two