/* Custom Styles for Flexxi Website */ /* Global font smoothing */ * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -o-font-smoothing: antialiased; -webkit-appearance:none; } .global-image-reveal_overlay{ display: block; } /* Splide carousel styles */ .splide, .splide__track { overflow: visible; } .splide__sr{ display: none !important; } /* Marquee styles */ .js-marquee { display: flex; flex-direction: row; align-items: center; } .js-marquee-wrapper{ display: flex; flex-direction: row; align-items: center; } .swiper-scrollbar-drag{ background : #fff; } .swiper.is-trust{ overflow: visible; } .product_hover-image-wrapper { pointer-events: none !important; } /* Hero heading sticker styles */ .hero_heading-sticker{ position: static !important; display: block; line-height: 0; transform: rotate(-1.676deg); margin-left: 10px; } /* Desktop: tamaño exacto */ @media (min-width: 992px){ .hero_heading-sticker{ width: 36.185rem; height: auto; } } /* Las imágenes internas ya se escalan al 100%, pero por si acaso: */ .hero_heading-sticker .hero-sticker__img, .hero_heading-sticker .hero-sticker__img--flap{ display: block; width: 100% !important; height: auto !important; } /* ===== MODO LITE CORREGIDO (sin rectángulo) ===== */ /* Activo cuando el tenga .peel-lite */ .peel-lite .hero-sticker__lighting, .peel-lite .hero-sticker__flap-light{ filter: none !important; /* apaga los SVG filters costosos */ } .hero_heading-sticker{ display: inline-block; vertical-align: middle; /* o baseline, prueba cuál se ve más natural */ line-height: 0; /* evita que su caja sume altura extra */ } /* NADA de box-shadow en los contenedores (evita el "marco") */ .peel-lite .hero-sticker__main, .peel-lite .hero-sticker__flap{ filter: none !important; box-shadow: none !important; background: transparent !important; } /* Sombra que respeta el contorno del PNG (alpha) */ .peel-lite .hero-sticker__img, .peel-lite .hero-sticker__img--flap{ /* usa BOTH por compat con Safari */ -webkit-filter: drop-shadow(0 8px 20px rgba(0,0,0,0.25)); filter: drop-shadow(0 8px 20px rgba(0,0,0,0.25)); } /* Transiciones algo más ligeras en móvil */ @media (hover:none) and (pointer:coarse){ .hero-sticker__main, .hero-sticker__flap{ transition: transform 0.2s ease !important; } } /* Featured work styles */ .featured_head-wrap { width: fit-content !important; display: inline-block; white-space: nowrap; } .featured_head-wrap .heading-style-h2 { white-space: nowrap; line-height: 104px; } #awwwards { display:none; } .nav_open-bottom { pointer-events: none; } .nav_open-bottom .nav_botton-left, .nav_open-bottom .navbar-booking-wrap { pointer-events: all; } /* Global styles */ body * { color: inherit; } a, .w-input, .w-select, .w-tab-link, .w-nav-link, .w-slider-arrow-left, .w-slider-arrow-right, .w-dropdown-btn, .w-dropdown-toggle, .w-dropdown-link { color: inherit; text-decoration: inherit; font-size: inherit; } /* Focus state style for keyboard navigation for the focusable elements */ .w-tab-link:focus, .w-nav-link:focus, .w-dropdown-btn:focus, .w-dropdown-toggle:focus, .w-dropdown-link:focus, .w-slider-arrow-left:focus, .w-slider-arrow-right:focus { outline: 2px solid #005bd3; outline-offset: 2px; } /* ===== Sticker Peel (Hover only, Webflow-safe) ===== */ :root{ --sticker-rotate: 30deg; /* rotates the artwork */ --sticker-p: 10px; /* padding for the peel math */ --sticker-peelback-hover: 30%; /* peel depth on hover */ } /* === Sticker Layout + Responsive Fix === */ /* Default: flow-based element, not absolute */ .hero_heading-sticker{ position: static !important; /* cancel absolute */ display: inline-block; /* allows transform without affecting layout */ vertical-align: middle; /* aligns with text baseline */ line-height: 0; /* prevents extra height */ margin: 0 0.5rem; /* small gap from text */ } /* Desktop: exact size */ @media (min-width: 992px){ .hero_heading-sticker{ width: 36.185rem; height: auto; } } /* Mobile: responsive scaling */ @media (max-width: 991px){ .hero_heading-sticker{ width: 20rem; /* smaller on mobile */ height: auto; } } /* Ensure internal images scale properly */ .hero_heading-sticker .hero-sticker__img, .hero_heading-sticker .hero-sticker__img--flap{ display: block; width: 100% !important; height: auto !important; } /* Responsive video/image display for project images */ .is-desktop-img { display: block; } .is-mobile-img { display: none; } /* Ensure videos and images with project_img class display properly */ video.project_img, img.project_img { width: 100%; height: auto; object-fit: cover; display: block; } @media screen and (max-width: 991px) { .is-desktop-img { display: none !important; } .is-mobile-img { display: block !important; } } @media screen and (min-width: 992px) { .is-desktop-img { display: block !important; } .is-mobile-img { display: none !important; } }