/** * V1A Global Styles * * This file is for WPCodeBox Global CSS. * Mobile/responsive fixes are in: /themes/v1a-child/css/mobile-hot-fixes.css * * Last updated: 2025-12-12 */ /* ======================================== 1. CUSTOM PROPERTIES (CSS VARIABLES) ======================================== */ @supports (padding: clamp(1vw, 2vw, 3vw)) { :root { /* Spacing Scale */ --space-xs: clamp(0.5627813555rem, calc(0.3149283195vw + 0.4620042933rem), 1.0666666667rem); --space-s: clamp(0.7501875469rem, calc(0.5311327832vw + 0.5802250563rem), 1.6rem); --space-m: clamp(1rem, calc(0.875vw + 0.72rem), 2.4rem); --space-l: clamp(1.333rem, calc(1.416875vw + 0.8796rem), 3.6rem); --space-xl: clamp(1.776889rem, calc(2.264444375vw + 1.0522668rem), 5.4rem); --space-xxl: clamp(2.368593037rem, calc(3.5821293519vw + 1.2223116444rem), 8.1rem); --space-xxxl: clamp(3.157744049rem, calc(5.6412324025vw + 1.4184154592rem), 12.15rem); --space-xxxxl: clamp(4.210325399rem, calc(8.8509547369vw + 1.6446872889rem), 18.225rem); /* Section Spacing */ --section-space-xs: clamp(0.2813906778rem, calc(0.1574641597vw + 0.2310021466rem), 0.5333333333rem); --section-space-s: clamp(0.3750937734rem, calc(0.2655663916vw + 0.2901125281rem), 0.8rem); --section-space-m: clamp(0.5rem, calc(0.4375vw + 0.36rem), 1.2rem); --section-space-l: clamp(0.6665rem, calc(0.7084375vw + 0.4398rem), 1.8rem); --section-space-xl: clamp(0.8884445rem, calc(1.1322221875vw + 0.5261334rem), 2.7rem); --section-space-xxl: clamp(1.1842965185rem, calc(1.7910646759vw + 0.6111558222rem), 4.05rem); --section-space-xxxl: clamp(1.5788720245rem, calc(2.8206162013vw + 0.7092077296rem), 6.075rem); --section-space-xxxxl: clamp(2.1051626995rem, calc(4.4254773685vw + 0.8223436444rem), 9.1125rem); --section-padding-x: clamp(1rem, calc(0.875vw + 0.72rem), 2.4rem); --gutter: clamp(1rem, calc(0.875vw + 0.72rem), 2.4rem); } } :root { /* Font Families */ --font-heading: 'Anton', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif; --font-body: 'Roboto Flex', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif; /* Font Weights */ --fw-thin: 100; --fw-extralight: 200; --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; --fw-black: 900; /* Font Size Scale - Fluid Typography Formula: clamp(MIN, PREFERRED, MAX) - MIN: Mobile minimum size - PREFERRED: Scales with viewport (vw + base) - MAX: Desktop maximum size These scale smoothly - no breakpoints needed! */ --fs-h1: clamp(2.25rem, 4vw + 1.5rem, 5rem); --fs-h2: clamp(1.875rem, 3.5vw + 1rem, 4rem); --fs-h3: clamp(1.5rem, 2.5vw + 0.875rem, 3rem); --fs-h4: clamp(1.25rem, 2vw + 0.75rem, 2.25rem); --fs-h5: clamp(1.125rem, 1.5vw + 0.625rem, 1.75rem); --fs-h6: clamp(1.5rem, 1vw + 0.5rem, 1.375rem); --fs-body: clamp(0.8rem, 0.5vw + 0.75rem, 1.125rem); --fs-small: clamp(0.8125rem, 0.25vw + 0.625rem, 0.9375rem); } /* ======================================== 1b. FONT PROFILES (TOGGLES) ======================================== */ /* Temporarily force Anton everywhere (headings + body): - Add `fonts-anton-all` to (DevTools or small JS snippet) - Example: document.documentElement.classList.add('fonts-anton-all') */ :root { --font-body: var(--font-heading); /* Anton ships as a single weight; normalize weights to avoid synthetic bold jumps */ --fw-thin: 400; --fw-extralight: 400; --fw-light: 400; --fw-regular: 400; --fw-medium: 400; --fw-semibold: 400; --fw-bold: 400; --fw-extrabold: 400; --fw-black: 400; } /* ======================================== 2. FONT FACES ======================================== */ /* Roboto Flex Variable (Body Font) */ @font-face { font-family: 'Roboto Flex'; font-style: normal; font-weight: 100 1000; font-display: swap; src: url('/wp-content/themes/v1a-child/fonts/roboto-flex.woff2') format('woff2-variations'), url('/wp-content/themes/v1a-child/fonts/roboto-flex.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Anton (Heading Font) */ @font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap; src: url('/wp-content/themes/v1a-child/fonts/anton.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* V1A Custom Icon Font */ @font-face { font-family: 'V1A'; font-style: normal; font-weight: normal; font-display: swap; src: url('/wp-content/themes/v1a-child/fonts/v1a.woff') format('woff'); } /* ======================================== 3. BASE TYPOGRAPHY ======================================== */ body { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--fs-body); line-height: 1.6; font-feature-settings: "kern" 1, "liga" 1; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } p { font-family: var(--font-body); font-weight: var(--fw-regular); line-height: 1.7; margin-bottom: 1.25rem; } /* ======================================== 4. HEADINGS ======================================== */ h1, h2, h3, h4, h5, h6, .elementor-widget-heading .elementor-heading-title, h1, h2, h3, h4, .text-h1, .text-h2, .text-h3, .text-h4 { font-family: var(--font-heading); font-weight: var(--fw-bold); line-height: 1.2; font-feature-settings: "kern" 1, "liga" 1, "calt" 1; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: font-weight 0.3s ease; text-transform: uppercase; letter-spacing: 0!important; } /* H1 - Fluid from ~36px (mobile) to ~80px (desktop) */ /* Exclude .big-title (theme's larger sizing) and .fit-text (JS-calculated sizing) */ h1:not(.big-title):not(.fit-text), .text-h1:not(.big-title):not(.fit-text), .elementor-widget-heading h1.elementor-heading-title:not(.big-title):not(.fit-text) { font-size: var(--fs-h1) !important; font-weight: var(--fw-extrabold); line-height: 1.1 !important; margin-top: 0; } /* Big Title - Fluid from 38px (mobile) to 180px (desktop/TV) */ h1.big-title, .text-h1.big-title { font-size: clamp(28px, 0.5rem + 5.5vw, 180px) !important; line-height: 1 !important; } /* H2 - Fluid from ~30px (mobile) to ~64px (desktop) */ /* Exclude .fit-text which uses JavaScript-calculated sizing */ h2:not(.fit-text), .text-h2:not(.fit-text), .elementor-widget-heading h2.elementor-heading-title:not(.fit-text) { font-size: var(--fs-h2) !important; font-weight: var(--fw-bold); line-height: 1.15 !important; margin-top: 2rem; margin-bottom: 1.25rem; } /* H3 - Fluid from ~24px (mobile) to ~48px (desktop) */ /* Exclude .fit-text which uses JavaScript-calculated sizing */ h3:not(.fit-text), .text-h3:not(.fit-text), .elementor-widget-heading h3.elementor-heading-title:not(.fit-text) { font-size: var(--fs-h3) !important; font-weight: var(--fw-semibold); line-height: 1.2 !important; margin-top: 1.75rem; margin-bottom: 1rem; } /* H4 - Fluid from ~20px (mobile) to ~36px (desktop) */ /* Exclude .fit-text which uses JavaScript-calculated sizing */ h4:not(.fit-text), .text-h4:not(.fit-text), .elementor-widget-heading h4.elementor-heading-title:not(.fit-text) { font-size: var(--fs-h4) !important; font-weight: var(--fw-medium); line-height: 1.25 !important; margin-top: 1.5rem; margin-bottom: 0.875rem; } /* H5 - Fluid from ~18px (mobile) to ~28px (desktop) */ /* Exclude .fit-text which uses JavaScript-calculated sizing */ h5:not(.fit-text), .text-h5:not(.fit-text), .elementor-widget-heading h5.elementor-heading-title:not(.fit-text) { font-size: var(--fs-h5) !important; font-weight: var(--fw-medium); line-height: 1.3 !important; margin-top: 1.25rem; margin-bottom: 0.75rem; } /* H6 - Fluid from ~16px (mobile) to ~22px (desktop) */ /* Exclude .fit-text which uses JavaScript-calculated sizing */ h6:not(.fit-text), .text-h6:not(.fit-text), .elementor-widget-heading h6.elementor-heading-title:not(.fit-text) { font-size: var(--fs-h6) !important; font-weight: var(--fw-regular); line-height: 1.4 !important; margin-top: 1rem; margin-bottom: 0.625rem; } /* ======================================== 5. FIT-TEXT STYLES ======================================== */ h1.fit-text, h2.fit-text, h3.fit-text, h4.fit-text, h5.fit-text, h6.fit-text, .fit-text { font-family: var(--font-heading) !important; line-height: 1 !important; text-transform: uppercase; margin: 0 !important; padding: 0 !important; } .fit-text .elementor-heading-title, .fit-text h1, .fit-text h2, .fit-text h3, .fit-text h4, .fit-text h5, .fit-text h6 { font-family: var(--font-heading) !important; line-height: 1 !important; text-transform: uppercase; margin: 0 !important; padding: 0 !important; } /* ======================================== 6. V1A ICON FONT ======================================== */ .v1a-icons, .big-title.with-icons { font-family: 'V1A', var(--font-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "kern" 1, "liga" 1; } [class^="icon-v1a-"]:before, [class*=" icon-v1a-"]:before { font-family: 'V1A'; font-style: normal; font-weight: normal; speak: never; display: inline-block; text-decoration: inherit; width: 1em; text-align: center; line-height: 1em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-v1a-logo:before { content: "V"; } .icon-v1a-eye:before { content: "O"; } /* Vision title icon override */ .vision-title .big-title .anim_word .anim_char:nth-child(5) { font-family: 'V1A', var(--font-body); font-size: 7.47rem; line-height: 1.1; display: inline-flex; align-items: center; justify-content: center; } /* ======================================== 7. FONT WEIGHT UTILITIES ======================================== */ .fw-thin { font-weight: var(--fw-thin) !important; } .fw-extralight { font-weight: var(--fw-extralight) !important; } .fw-light { font-weight: var(--fw-light) !important; } .fw-regular { font-weight: var(--fw-regular) !important; } .fw-medium { font-weight: var(--fw-medium) !important; } .fw-semibold { font-weight: var(--fw-semibold) !important; } .fw-bold { font-weight: var(--fw-bold) !important; } .fw-extrabold { font-weight: var(--fw-extrabold) !important; } .fw-black { font-weight: var(--fw-black) !important; } /* ======================================== 8. FONT LOADING OPTIMIZATION ======================================== */ /* Hide text briefly while font loads */ .fonts-loading * { opacity: 0; transition: opacity 0.3s ease; } .fonts-loaded * { opacity: 1; } /* Fallback styling during load */ html:not(.fonts-loaded) h1, html:not(.fonts-loaded) h2, html:not(.fonts-loaded) h3 { letter-spacing: -0.01em; font-weight: 700; } /* Reduce CLS */ h1, h2, h3, h4, h5, h6, p { min-height: 0.1em; } .font-critical { font-family: var(--font-heading); font-display: block; } /* ======================================== 9. ELEMENTOR OVERRIDES ======================================== */ .elementor-widget-heading .elementor-heading-title { font-family: var(--font-heading) !important; } .elementor-widget-text-editor { font-family: var(--font-body); } .elementor-button { font-family: var(--font-body); font-weight: var(--fw-medium); } .elementor-widget-penavmenu .main-navigation a { cursor: pointer; } /* Custom cursor hover icons */ div#mouseCursor .cursor-icon { color: #F24B59 !important; } div#mouseCursor .cursor-icon svg, div#mouseCursor .cursor-icon path { fill: currentColor !important; stroke: currentColor !important; } /* ======================================== 10. GLOBAL BORDER RADIUS ======================================== */ .border-round, .elementor-widget-pefullscreenslideshow, .elementor-widget-image img, .project--image, .single-image img, .carousel--item, .pe--team--member.member--card, .us-animated-bg, .team--member--image > img, .has-alt-image .team--member--image::after, .pe--single--project.psp--elementor .thmb div, .pe--single--project.psp--elementor .thmb img, .thmb a img, .single--image, .single-image, .project-featured-image, .testimonials-carousel .cr--item { border-radius: var(--space-m); overflow: hidden; } /* ======================================== 11. HERO SECTIONS ======================================== */ .hero-with-margin { margin: var(--space-m) !important; height: calc(100vh - (2 * var(--space-m))) !important; min-height: calc(100vh - (2 * var(--space-m))) !important; width: calc(100vw - (2 * var(--space-m))) !important; overflow: clip; border-radius: var(--space-m); } .hero-with-margin .project-featured-image { height: calc(100vh - (2 * var(--space-m))) !important; border-radius: var(--space-m); } .hero-with-margin .project-featured-image::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: transparent; background-image: linear-gradient(180deg, var(--e-global-color-secondary) 0%, #f2295b 100%); pointer-events: none; z-index: 1; mix-blend-mode: color; } /* In global.css - add after line 418 */ .hero-with-margin .project-featured-image .pe-video::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: linear-gradient(180deg, var(--e-global-color-secondary) 0%, #f2295b 100%); pointer-events: none; z-index: 11; /* Above poster (z-index: 10) */ mix-blend-mode: color; } /* Home hero background */ .elementor-10606 .elementor-element.elementor-element-08bf41c:not(.elementor-motion-effects-element-type-background), .elementor-10606 .elementor-element.elementor-element-08bf41c > .elementor-motion-effects-container > .elementor-motion-effects-layer { background-size: 80%; background-position: center center; background-repeat: no-repeat; } /* Home hero/video frame refinement (homepage only) */ body.home .elementor-10606 .elementor-element.elementor-element-08bf41c { --border-radius: 0 0 var(--space-m) var(--space-m); border-radius: 0 0 var(--space-m) var(--space-m); overflow: clip; } body.home .elementor-10606 .elementor-element.elementor-element-08bf41c::before, body.home .elementor-10606 .elementor-element.elementor-element-08bf41c > .elementor-background-video-container, body.home .elementor-10606 .elementor-element.elementor-element-08bf41c > .e-con-inner > .elementor-background-video-container, body.home .elementor-10606 .elementor-element.elementor-element-08bf41c > .elementor-background-video-container::before, body.home .elementor-10606 .elementor-element.elementor-element-08bf41c > .e-con-inner > .elementor-background-video-container::before, body.home .elementor-10606 .elementor-element.elementor-element-08bf41c > .elementor-background-slideshow, body.home .elementor-10606 .elementor-element.elementor-element-08bf41c > .e-con-inner > .elementor-background-slideshow, body.home .elementor-10606 .elementor-element.elementor-element-08bf41c > .elementor-background-slideshow::before, body.home .elementor-10606 .elementor-element.elementor-element-08bf41c > .e-con-inner > .elementor-background-slideshow::before { border-radius: 0 0 var(--space-m) var(--space-m); } /* Home header/logo breathing room + readability body.home .elementor-22 .elementor-element.elementor-element-733e9af { --padding-top: clamp(34px, 4vw, 56px); --padding-left: clamp(34px, 4vw, 56px); --padding-right: clamp(30px, 3vw, 48px); }*/ body.home .elementor-22 .elementor-element.elementor-element-888a6b1 .site-logo img, body.home .elementor-22 .elementor-element.elementor-element-888a6b1 .sticky-logo img { filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.22)); } /* Prevent the sticky-header FLIP animation from inheriting the generic hover transform rules applied elsewhere in the UI. */ .site-header .elementor-widget-pesitelogo.blur-hover, .site-header .elementor-widget-pesitelogo.blur-hover:hover, .site-header .elementor-widget-pesitelogo .site-branding a { transition: none !important; } .site-header .elementor-widget-pesitelogo.blur-hover:hover { transform: none; } .site-header .elementor-widget-pesitelogo .site-branding a:hover { transform: none !important; } @media (max-width: 767px) { body.home .elementor-22 .elementor-element.elementor-element-733e9af { --padding-top: 24px; --padding-left: 24px; --padding-right: 24px; } } /* ======================================== 12. HOVER EFFECTS ======================================== */ /* Link scale hover */ a, button, input[type="submit"] { transition: transform 0.15s ease-in-out; } a:hover, button:hover, input[type="submit"]:hover { transform: scale(1.06)!important; } .blur-hover, .menu--toggle--wrap { transition: transform 0.15s ease-in-out; cursor: pointer; } .blur-hover:hover, .menu--toggle--wrap:hover { transform: scale(1.06); } /* Scale System */ .scale { --scale-size: 1.1; --scale-duration: 0.1s; --scale-timing: ease-in-out; --scale-origin: center center; --scale-shadow: none; --scale-z-index: auto; transition: transform var(--scale-duration) var(--scale-timing), box-shadow var(--scale-duration) var(--scale-timing); transform-origin: var(--scale-origin); position: relative; } .scale:hover { transform: scale(var(--scale-size)); box-shadow: var(--scale-shadow); z-index: var(--scale-z-index); } /* Scale Size Modifiers */ .scale.xs { --scale-size: 1.05; } .scale.sm { --scale-size: 1.08; } .scale.md { --scale-size: 1.15; } .scale.lg { --scale-size: 1.2; } .scale.xl { --scale-size: 1.3; } /* Scale Speed Modifiers */ .scale.fast { --scale-duration: 0.1s; } .scale.slow { --scale-duration: 0.2s; } .scale.slower { --scale-duration: 0.3s; } /* Scale Timing Modifiers */ .scale.bounce { --scale-timing: cubic-bezier(0.68, -0.55, 0.265, 1.55); } .scale.smooth { --scale-timing: cubic-bezier(0.4, 0, 0.2, 1); } .scale.snappy { --scale-timing: cubic-bezier(0.25, 0.46, 0.45, 0.94); } /* Scale Origin Modifiers */ .scale.from-top { --scale-origin: center top; } .scale.from-bottom { --scale-origin: center bottom; } .scale.from-left { --scale-origin: left center; } .scale.from-right { --scale-origin: right center; } /* Scale Shadow Modifiers */ .scale.shadow { --scale-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); --scale-z-index: 10; } .scale.shadow-lg { --scale-shadow: 0 15px 35px rgba(0, 0, 0, 0.15); --scale-z-index: 10; } .scale-container { overflow: visible !important; } /* ======================================== 13. TEAM MEMBER CARDS ======================================== */ .pe--team--member.member--card { background: linear-gradient(180deg, rgba(14, 14, 14, .3), rgba(242, 75, 89, 0.3)); backdrop-filter: blur(5px); } .pe--team--member.member--card .team--member--cont .team--member--name { -moz-text-align-last: left; text-align-last: left; } .team--member--title { max-height: 28.8px; padding-bottom: var(--space-xl); } /* Alt Image Hover Effect */ .has-alt-image .team--member--image { position: relative; overflow: hidden; } .has-alt-image .team--member--image::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: var(--alt-image); background-size: cover; background-position: center; opacity: 0; transition: opacity 0.1s ease-in-out; pointer-events: none; z-index: 1; } .has-alt-image:hover .team--member--image::after { opacity: 1; } .has-alt-image:hover .team--member--image img { opacity: 0; transition: opacity 0.1s ease-in-out; } .pe--team--member.member--card.active .team--member--summ, .pe--team--member.active .team--member--summ { z-index: 1; } .pe--team--member.member--card .team--member--toggle { z-index: 2; } /* ======================================== 14. CAROUSEL & GALLERY ======================================== */ /* Film Strip Carousel - Fluid Scaling All dimensions derived from --frame-width for perfect proportional scaling Adjust the clamp() values to fine-tune desktop/mobile sizes */ .elementor-10197 .elementor-element.elementor-element-7e45bf3 .carousel--wrapper { /* MAIN CONTROL: Frame width scales with viewport Format: clamp(MOBILE-MIN, PREFERRED, DESKTOP-MAX) */ --frame-width: clamp(180px, 30vw, 440px); /* Frame aspect ratio (1 = square, 0.75 = landscape, 1.33 = portrait) */ --frame-ratio: 1; /* Derived values - these maintain perfect proportions */ --filmcell-width: calc(var(--frame-width) * 1.55); --filmcell-padding: calc(var(--frame-width) * 0.25); --filmcell-gap: calc(var(--frame-width) * 0.11); padding: var(--filmcell-padding) 0; background-image: url('/wp-content/uploads/2025/09/filmcell-bg.svg'); background-size: var(--filmcell-width) auto; background-repeat: repeat-x; background-position: 0 center; gap: var(--filmcell-gap); } /* Frame sizing - width and aspect ratio */ .elementor-10197 .elementor-element.elementor-element-7e45bf3 .carousel--item { width: var(--frame-width); aspect-ratio: var(--frame-ratio); } /* Images fill frames completely */ .elementor-10197 .elementor-element.elementor-element-7e45bf3 .carousel--item .single-image, .elementor-10197 .elementor-element.elementor-element-7e45bf3 .carousel--item .single-image img { width: 100%; height: 100%; object-fit: cover; object-position: center; } /* Carousel image filter effect */ .carousel--item .single-image img { filter: invert(0) hue-rotate(180deg) contrast(1.1) saturate(.2); mix-blend-mode: color-burn; transition: all 0.5s ease-in-out; } .carousel--item:hover .single-image img { filter: none; mix-blend-mode: normal; } /* Safari fix for blend modes */ @supports (-webkit-hyphens: none) { .carousel--item .single-image img, .single-image img { mix-blend-mode: multiply; } } /* Carousel Performance Optimization GPU acceleration and compositor layer promotion Reduces CPU usage for infinite scroll animations */ .pe--carousel.cr--loop--autoplay .carousel--wrapper { will-change: transform; transform: translateZ(0); backface-visibility: hidden; contain: layout style; } .pe--carousel.cr--loop--autoplay .carousel--item { contain: layout style paint; transform: translateZ(0); } .pe--carousel.cr--loop--autoplay .carousel--item img { will-change: auto; transform: translateZ(0); } /* ======================================== 15. TESTIMONIALS ======================================== */ .cr--item { position: relative; overflow: visible; } .cr--item::before { content: '"'; position: absolute; top: -0.15em; left: -0.1em; font-family: var(--font-heading); font-weight: 900; font-size: 10em; line-height: 1; color: #F24B59; opacity: 0.15; filter: blur(3px); pointer-events: none; z-index: 0; } .cr--item > * { position: relative; z-index: 1; } /* ======================================== 16. FOOTER MARQUEE GRADIENT ======================================== */ .gradient-text-animate-smooth .marquee-wrap span, .gradient-text-animate-smooth .marquee-wrap, .gradient-text-animate-smooth span { background: linear-gradient(90deg, #F24B59, #444444, #F24B59, #444444, #F24B59); background-size: 200% 100%; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: gradient-scroll-continuous 6s linear infinite; } .gradient-text-animate-smooth .seperator i, .gradient-text-animate-smooth i { background: linear-gradient(90deg, #F24B59, #444444, #F24B59, #444444, #F24B59); background-size: 200% 100%; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: gradient-scroll-continuous 2s linear infinite; } @keyframes gradient-scroll-continuous { 0% { background-position: 0% 50%; } 100% { background-position: -200% 50%; } } .gradient-text-animate-smooth span, .gradient-text-animate-smooth i { display: inline-block !important; will-change: transform; } /* ======================================== 18. BIG TITLE EFFECTS ======================================== */ h1.big-title, .mixblend-color-dodge, h3 { mix-blend-mode: normal; filter: none; } /* Footer award badges: keep them plain over the animated background */ .elementor-element-19eca5d, .elementor-element-af6e670 { position: relative; z-index: 2; isolation: isolate; opacity: 1 !important; } .elementor-element-19eca5d img, .elementor-element-af6e670 img { display: block; mix-blend-mode: normal !important; filter: none !important; opacity: 1 !important; } /* ======================================== 19. SERVICES CARDS ======================================== */ .elementor-element.e-con.bg--color.services-card { background: linear-gradient(180deg, rgba(14, 14, 14, 0.7) 0%, rgba(14, 14, 14, 1) 10%, rgba(14, 14, 14, 1) 90%, rgba(14, 14, 14, 0.8) 100%); } /* Services Cards - Mobile typography scale-down Reduces font sizes and spacing so each card fits in one mobile viewport */ @media (max-width: 767px) { .services-card { /* Override fluid typography variables for this container */ --fs-h2: clamp(1.25rem, 4vw, 1.75rem); /* ~20-28px vs global 30-64px */ --fs-h3: clamp(1.1rem, 3vw, 1.5rem); /* ~18-24px vs global 24-48px */ --fs-h4: clamp(1rem, 2.5vw, 1.25rem); /* ~16-20px vs global 20-36px */ --fs-body: clamp(0.8125rem, 2vw, 0.9375rem); /* ~13-15px vs global 15-18px */ /* Tighter card padding */ /* padding-top: clamp(1rem, 4vw, 1.5rem) !important; */ padding-bottom: clamp(1rem, 4vw, 1.5rem) !important; gap: 0.75rem !important; } /* Scale down text-h2 styled elements (service titles) */ .services-card .text-h2 { font-size: var(--fs-h2) !important; line-height: 1.15 !important; margin-top: 0.75rem !important; margin-bottom: 0.5rem !important; } /* Scale down text-h4 styled elements (section numbers like [001]) */ .services-card .text-h4 { font-size: var(--fs-h4) !important; line-height: 1.2 !important; margin-top: 0.5rem !important; margin-bottom: 0.375rem !important; } /* Scale down body text */ .services-card .text-p, .services-card p { font-size: var(--fs-body) !important; line-height: 1.5 !important; margin-bottom: 0.5rem !important; } /* Reduce accordion item spacing */ .services-card .pe-accordion-item { padding: 0.5rem 0 !important; } .services-card .pe-accordion-item-content p { margin-bottom: 0.75rem !important; } /* Reduce top margin on first content block */ .services-card > div:first-of-type { margin-top: 0 !important; } /* ---------------------------------------- Services Carousel (text slider) - Mobile ---------------------------------------- */ .services-carousel { /* Override fluid typography variables for carousel slides */ --fs-h1: clamp(1.25rem, 5vw, 1.75rem); /* ~20-28px vs global 36-80px */ --fs-h3: clamp(0.875rem, 3vw, 1.125rem); /* ~14-18px vs global 24-48px */ } /* Scale down carousel slide h1 titles */ .services-carousel .swiper-slide h1.elementor-heading-title, .services-carousel .swiper-slide .e-con h1 { font-size: clamp(1.25rem, 5vw, 1.75rem) !important; /* ~20-28px */ line-height: 1.15 !important; margin-bottom: 0.5rem !important; } /* Scale down carousel slide h3 descriptions - use direct value for higher specificity */ .services-carousel .swiper-slide h3.elementor-heading-title, .services-carousel .swiper-slide .e-con h3 { font-size: clamp(0.875rem, 2.5vw, 1rem) !important; /* ~14-16px - smaller than h1 */ line-height: 1.4 !important; margin-top: 0 !important; margin-bottom: 0.5rem !important; } /* Ensure swiper nav buttons are visible and clickable on mobile */ .services-carousel .elementor-swiper-button { visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; z-index: 10 !important; width: 40px !important; height: 40px !important; touch-action: manipulation !important; } } /* ======================================== 20. LIGHTBOX & MODALS ======================================== */ .dialog-type-lightbox { z-index: 999999; } .elementor-lightbox .elementor-video-container .elementor-video-landscape iframe, .elementor-lightbox .elementor-video-container .elementor-video-landscape video, .bg--video { overflow: clip; border-radius: var(--space-m); } /* Tally popup badge hide */ .tally-popup [class*="popupContainer"] { overflow: hidden !important; } .tally-popup [class*="popupContainer"] iframe { margin-bottom: -50px !important; } /* ======================================== 21. NEXT PROJECT SECTION ======================================== */ .next-project-section { margin: var(--space-xxxl) var(--space-m); } /* ======================================== 21b. SINGLE PROJECT - BACK TO WORK BUTTON ======================================== */ /* The "Back to Work" link injected right after the hero on single portfolio pages */ .v1a-back-to-work--single { padding: var(--space-m); display: flex; justify-content: flex-end; } button, input, select, optgroup, textarea { font-family: var(--font-body); font-weight: var(--fw-black); } .elementor-element-f09ad18 { text-transform: uppercase; } .elementor-element-7b49491 h6, .elementor-element-7b49491 .text-h6, .elementor-element-7b49491 .elementor-widget-heading, .elementor-element-7b49491 h6.elementor-heading-title { line-height: 1; margin-top: 0; margin-bottom: 0; } /* ======================================== 22. TEXT ANIMATION FIXES ======================================== */ /* Fix pe-core CSS bug: scrubbed__true class is on the parent container, but CSS rule expects it on the same element as data-animate. This correctly targets text animations inside scrubbed containers. */ .scrubbed__true *[data-animate="true"], .pinned__true *[data-animate="true"] { visibility: visible; } /* Also fix linesHighlight specifically since it needs to be visible for the opacity animation to show (GSAP handles opacity 0.3→1) */ *[data-animation="linesHighlight"] { visibility: visible !important; } .pe--button--wrapper a>span { padding-right: 0.4em; } /* Avoid duplicate hover labels on pe-core bordered/background buttons */ .pe--button.pb--background .pe--button--wrapper a > .pb__main:nth-of-type(2), .pe--button.pb--bordered .pe--button--wrapper a > .pb__main:nth-of-type(2) { display: none; } /* Keep label/icon alignment consistent once duplicate layer is hidden */ .pe--button.pb--background .pe--button--wrapper a > .pb__main, .pe--button.pb--bordered .pe--button--wrapper a > .pb__main { padding-right: 0; } /* ======================================== 23. MARQUEE FIXES ======================================== */ /* Center marquee text vertically within container */ .elementor-widget-pemarquee { display: flex; align-items: center; height: 100%; } .elementor-widget-pemarquee .elementor-widget-container { display: flex; align-items: center; width: 100%; height: 100%; } h1.pe-marquee { display: flex !important; align-items: center; margin: 0; padding-top: clamp(0rem, calc(4.55vw - 0.91rem), 2.5rem)2.5rem; } .pe-marquee .marquee-wrap { display: flex; align-items: center; } .pe-marquee .marquee-wrap .seperator { padding-bottom: 1.6rem; } .elementor-element-a08e2cd a, .elementor-element-19995a4 a { color: #282828; } /* ======================================== 24. VIDEO BACKGROUND FIXES ======================================== */ /* Ensure video backgrounds cover parent container on all devices */ .bg--video .container--bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; } .bg--video .pe-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .bg--video .pe-video-wrap { width: 100%; height: 100%; object-fit: cover; object-position: center; } /* Mobile-specific: ensure video covers on smaller screens */ @media (max-width: 767px) { .vidbginterstellar .pe-video-wrap, .bg--video .pe-video-wrap { min-width: 100%; min-height: 100%; object-fit: cover; } } /* Frosted glass testimonial cards */ .clients_carousel .cr--item { background: rgba(255, 255, 255, 0.05) !important; border-radius: 16px; border: 1px solid transparent; background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05)), linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.02) 50%, rgba(255, 80, 80, 0.1) 100%); background-origin: border-box; background-clip: padding-box, border-box; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08); } /* ======================================== 22. PORTFOLIO GRID - WORK PAGE ======================================== */ /* Hide category in grid view - only show title (full info visible in list view) */ .portfolio--grid .project--cat { display: none; } /* Truncate long titles to prevent affecting thumbnail sizes */ .portfolio--grid .project--title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } /* List view: image positioned absolutely so rows are full width */ .portfolio--list .project--image, .portfolio--list .project-image { position: absolute !important; } .pe--portfolio.portfolio--list>div.portfolio--projects--wrapper .project--image { position: absolute!important; } @media only screen and (max-width: 570px) { .portfolio--filters.filt--active ul.filter--cat--list { z-index: 999999999; } } .portfolio-template-default .text-wrapper { --color: #ffffff!important; color: #ffffff!important; } /* Work archive fix: prevent portfolio card clipping from global link scale */ body.page-id-10477 .pe--portfolio.portfolio--grid > div.portfolio--projects--wrapper .portfolio--project article a:hover, body.elementor-page-10477 .pe--portfolio.portfolio--grid > div.portfolio--projects--wrapper .portfolio--project article a:hover { transform: none !important; } /* Work archive fix: keep portfolio video cards transparent (not black) and contain self-hosted videos that lack the poster-loader sizing */ body.page-id-10477 .pe--portfolio.portfolio--grid .project--image:has(.pe-video.pe-vimeo), body.page-id-10477 .pe--portfolio.portfolio--grid .project--image:has(.pe-video.pe-youtube), body.page-id-10477 .pe--portfolio.portfolio--grid .project--image:has(.pe-video.pe-self), body.elementor-page-10477 .pe--portfolio.portfolio--grid .project--image:has(.pe-video.pe-vimeo), body.elementor-page-10477 .pe--portfolio.portfolio--grid .project--image:has(.pe-video.pe-youtube), body.elementor-page-10477 .pe--portfolio.portfolio--grid .project--image:has(.pe-video.pe-self), body.page-id-10477 .pe--portfolio .list-img .project-image:has(.pe-video.pe-vimeo), body.page-id-10477 .pe--portfolio .list-img .project-image:has(.pe-video.pe-youtube), body.page-id-10477 .pe--portfolio .list-img .project-image:has(.pe-video.pe-self), body.elementor-page-10477 .pe--portfolio .list-img .project-image:has(.pe-video.pe-vimeo), body.elementor-page-10477 .pe--portfolio .list-img .project-image:has(.pe-video.pe-youtube), body.elementor-page-10477 .pe--portfolio .list-img .project-image:has(.pe-video.pe-self), body.page-id-10477 .pe--portfolio .pe-video .plyr__video-wrapper, body.page-id-10477 .pe--portfolio .pe-video .plyr__video-embed, body.page-id-10477 .pe--portfolio .pe-video .plyr__video-wrapper.plyr__video-embed, body.elementor-page-10477 .pe--portfolio .pe-video .plyr__video-wrapper, body.elementor-page-10477 .pe--portfolio .pe-video .plyr__video-embed, body.elementor-page-10477 .pe--portfolio .pe-video .plyr__video-wrapper.plyr__video-embed { background: transparent !important; --plyr-video-background: transparent !important; } /* Work archive fix: contain self-hosted videos inside grid cards (poster-loader only constrains vimeo/youtube; pe-self needs the same treatment) */ body.page-id-10477 .pe--portfolio .project--image:has(.pe-video.pe-self), body.elementor-page-10477 .pe--portfolio .project--image:has(.pe-video.pe-self) { position: relative !important; } /* Work archive fix: keep all portfolio card videos sized by the card wrapper, not by background-video positioning rules from hero sections. */ body.page-id-10477 .pe--portfolio.portfolio--grid .portfolio--project .pe-video, body.elementor-page-10477 .pe--portfolio.portfolio--grid .portfolio--project .pe-video, body.page-id-10477 .pe--portfolio .list-img .pe-video, body.elementor-page-10477 .pe--portfolio .list-img .pe-video { position: relative !important; top: auto !important; left: auto !important; width: 100% !important; height: 100% !important; } body.page-id-10477 .pe--portfolio .project--image .pe-video.pe-self, body.elementor-page-10477 .pe--portfolio .project--image .pe-video.pe-self, body.page-id-10477 .pe--portfolio .list-img .pe-video.pe-self, body.elementor-page-10477 .pe--portfolio .list-img .pe-video.pe-self { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; overflow: hidden !important; } body.page-id-10477 .pe--portfolio .project--image .pe-video.pe-self video, body.elementor-page-10477 .pe--portfolio .project--image .pe-video.pe-self video, body.page-id-10477 .pe--portfolio .list-img .pe-video.pe-self video, body.elementor-page-10477 .pe--portfolio .list-img .pe-video.pe-self video { width: 100% !important; height: 100% !important; object-fit: cover !important; } .elementor-lightbox .elementor-lightbox-image { border-radius: var(--space-m)!important; }