/** * Styles for the "Componentes (sandbox)" page template only. * * Loaded conditionally (see hello_elementor_child_enqueue_componentes_template_assets * in functions.php) only on pages using templates/componentes.php, and every * rule is nested under .kuaa-componentes-template (set on by * header-componentes.php) so nothing here can leak into other pages. */ /* Path is relative to this file (templates/), so it points to assets/fonts/. */ @font-face { font-family: "HelveticaNeueW01"; src: url("../assets/fonts/HelveticaNeueW01-77BdCnObl.woff2") format("woff2"), url("../assets/fonts/HelveticaNeueW01-77BdCnObl.woff") format("woff"), url("../assets/fonts/HelveticaNeueW01-77BdCnObl.ttf") format("truetype"); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: "HelveticaNeueLTW06-97BlkCnObl"; src: url("../assets/fonts/HelveticaNeueLTW06-97BlkCnObl.woff2") format("woff2"), url("../assets/fonts/HelveticaNeueLTW06-97BlkCnObl.woff") format("woff"), url("../assets/fonts/HelveticaNeueLTW06-97BlkCnObl.ttf") format("truetype"); font-weight: 900; font-style: italic; font-display: swap; } @font-face { font-family: "MyriadPro"; src: url("../assets/fonts/MyriadPro-Regular.woff2") format("woff2"), url("../assets/fonts/MyriadPro-Regular.woff") format("woff"), url("../assets/fonts/MyriadPro-Regular.ttf") format("truetype"); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: "HelveticaNeue"; src: url("../assets/fonts/HelveticaNeue-Heavy.woff2") format("woff2"), url("../assets/fonts/HelveticaNeue-Heavy.woff") format("woff"), url("../assets/fonts/HelveticaNeue-Heavy.ttf") format("truetype"); font-weight: 900; font-style: normal; font-display: swap; } @font-face { font-family: 'HelveticaNeue'; src: url('../assets/fonts/HelveticaNeue-Medium.woff2') format('woff2'), url('../assets/fonts/HelveticaNeue-Medium.woff') format('woff'), url('../assets/fonts/HelveticaNeue-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'HelveticaNeue'; src: url('../assets/fonts/HelveticaNeue-MediumItalic.woff2') format('woff2'), url('../assets/fonts/HelveticaNeue-MediumItalic.woff') format('woff'), url('../assets/fonts/HelveticaNeue-MediumItalic.ttf') format('truetype'); font-weight: 500; font-style: italic; font-display: swap; } :root { --bs-primary: #e3ff28; --bs-gray-100: #dfdfdf; --bs-gray-200: #cccccc; --bs-gray-300: #ededed; --bs-gray-900: #b8b8b8; --bs-red: #a52907; --bs-green: #34703a; /* --swiper-pagination-bullet-width: 20px; */ /* --swiper-pagination-bullet-height: 4px; */ --swiper-pagination-color: var(--bs-primary); --swiper-pagination-bullet-inactive-color: var(--bs-gray-900); } .text-primary { color: var(--bs-primary) !important; } .bg-primary { background-color: var(--bs-primary) !important; } .text-gray-100 { color: var(--bs-gray-100) !important; } .bg-gray-100 { background-color: var(--bs-gray-100) !important; } .text-gray-200 { color: var(--bs-gray-200) !important; } .bg-gray-200 { background-color: var(--bs-gray-200) !important; } .text-gray-300 { color: var(--bs-gray-300) !important; } .bg-gray-300 { background-color: var(--bs-gray-300) !important; } .text-gray-900 { color: var(--bs-gray-900) !important; } .bg-gray-900 { background-color: var(--bs-gray-900) !important; } .text-red { color: var(--bs-red) !important; } .bg-red { background-color: var(--bs-red) !important; } .text-green { color: var(--bs-green) !important; } .bg-green { background-color: var(--bs-green) !important; } .kuaaComponentesTemplate { /* font-family: "HelveticaNeue"; */ -webkit-font-smoothing: antialiased; } .kuaaComponentesTemplate img:not(.h-100) { height: auto; } .kuaaComponentesTemplate p { font-family: "HelveticaNeue"; } .kuaaComponentesTemplate strong { font-family: "HelveticaNeue"; } .font-HelveticaNeueLTW06 { font-family: "HelveticaNeueLTW06-97BlkCnObl"; } .font-HelveticaNeueW01 { font-family: "HelveticaNeueW01"; } .font-MyriadPro { font-family: "MyriadPro"; } .font-HelveticaNeue { font-family: "HelveticaNeue"; } .customBtn { font-family: "HelveticaNeue"; display: block; font-size: 14px !important; width: 100%; padding: 16px 20px 12px 20px; text-align: center; font-weight: bold; /* letter-spacing: 1px; */ border-radius: 6px; text-transform: uppercase; text-decoration: none; } .customBtn-primary { color: var(--bs-black) !important; background: var(--bs-primary); } @media only screen and (min-width: 992px) { .customBtn { width: max-content; } } .customBtn { background-image: linear-gradient( 105deg, var(--bs-black) 0 50%, transparent 50% 100% ); background-repeat: no-repeat; background-size: 220% 100%; background-position: 100% 0; transition: background-position 0.45s cubic-bezier( 0.65, 0, 0.35, 1 ), color 0.3s ease; } .customBtn:hover, .customBtn:focus-visible { background-position: 0 0; color: var(--bs-primary) !important; } @media ( prefers-reduced-motion: reduce ) { .customBtn { transition: none; } } .display-1 { font-size: 16vw !important; line-height: 13vw !important; } .kuaaHero__contenido { font-size: 6vw !important; line-height: 6vw !important; font-weight: normal !important; } .display-2 { font-size: 14vw !important; line-height: 13.9vw !important; } .display-3 { font-size: 6vw !important; line-height: 6.9vw !important; } .kuaaHero__linea-left:before, .kuaaHero__linea-left:after, .kuaaHero__linea-right:before, .kuaaHero__linea-right:after { content: ""; display: block; position: absolute; background-color: var(--bs-primary); } .kuaaHero__linea-left:before, .kuaaHero__linea-right:before { width: 2px; height: 40px; } .kuaaHero__linea-left:after, .kuaaHero__linea-right:after { width: 40px; height: 2px; } .kuaaHero__linea-left:before, .kuaaHero__linea-left:after { top: -10px; left: -10px; transform-origin: top left; } .kuaaHero__linea-right:before, .kuaaHero__linea-right:after { bottom: -10px; right: -10px; transform-origin: bottom right; } @media only screen and (min-width: 992px) { .display-1 { font-size: 7vw !important; line-height: 5.6vw !important; } .kuaaHero__contenido { font-size: 3vw !important; line-height: 3vw !important; } .display-2 { font-size: 4vw !important; line-height: 3.9vw !important; } .display-3 { font-size: 4vw !important; line-height: 3.9vw !important; } } .kuaaCaja { display: inline-block; position: relative; z-index: 1; } .kuaaCaja-verde:before, .kuaaCaja-negro:before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 101%; height: 100%; transform: skew(-10deg, 0deg); transform-origin: left center; z-index: -1; } .kuaaCaja-verde:before { background-color: var(--bs-primary); } .kuaaCaja-negro:before { background-color: var(--bs-black); } /* kuaaItems */ .kuaaItems h3 { font-size: 16px; } .kuaaItems__items { background-color: var(--bs-primary); } .kuaaItems__item { border-bottom: 1px solid var(--bs-black); } .kuaaItems__items .col-12:last-child .kuaaItems__item { border: 0px solid var(--bs-black); } .kuaaItems__item span { margin-left: -20px; } .kuaaItems__item p { font-size: 16px; } @media only screen and (min-width: 992px) { .kuaaItems h3 { font-size: 24px !important; } .kuaaItems__items { background-color: var(--bs-white); } .kuaaItems__item { border: 1px solid var(--bs-black); border-radius: var(--bs-border-radius-xl); } .kuaaItems__items .col-12:last-child .kuaaItems__item { border: 1px solid var(--bs-black); } .kuaaItems__item span { margin-left: -24px; } .kuaaItems__item p { font-size: 24px; } } /* kuaaTextoImagen */ .kuaaTextoImagen { background-color: var(--bs-primary); } .kuaaTextoImagen__img { width: 50vw; } .kuaaTextoImagen__video { max-width: 720px; aspect-ratio: 16 / 9; } .kuaaTextoImagen__video iframe { width: 100%; height: 100%; } .kuaaTextoImagen__triangulo { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 400px; background-color: var(--bs-gray-100); transform: translate(0%, -73%) skew(0deg, -40deg); z-index: 2; } @media only screen and (min-width: 400px) { .kuaaTextoImagen__triangulo { height: 526px; transform: translate(0%, -65%) skew(0deg, -40deg); } } @media only screen and (min-width: 680px) { .kuaaTextoImagen__triangulo { height: 600px; transform: translate(0%, -76%) skew(0deg, -40deg); } } @media only screen and (min-width: 992px) { .kuaaTextoImagen { background-color: var(--bs-white); } .kuaaTextoImagen__triangulo { height: 400px; transform: translate(0%, -73%) skew(0deg, -40deg); } } /* kuaaItemsCheck */ .kuaaItemsCheck__item { border-bottom: 1px solid var(--bs-black); } .kuaaItemsCheck .col-12:last-child .kuaaItemsCheck__item:last-child { border-bottom: 0; } .kuaaItemsCheck .col-12:last-child .kuaaItemsCheck__item:first-child { border-top: 1px solid var(--bs-black); } @media only screen and (min-width: 992px) { .kuaaItemsCheck__item, .kuaaItemsCheck .col-12:last-child .kuaaItemsCheck__item:first-child { border: 0; } } /* ============================================================ * Reveal system (vanilla JS — see initializeHeroReveal, which plays the * hero on load, and initializeScrollReveals, which plays everything else * as it's scrolled into view — in componentes-2.js) * * Pre-hidden only while carries "kuaa-reveal-ready" (printed in * by functions.php, skipped under prefers-reduced-motion). With JS * off — or if componentes-2.js fails to take over — the failsafe timeout * there removes the flag and everything falls back to plainly visible * instead of staying hidden forever. * * --reveal-delay is set per element by componentes-2.js from its * data-reveal-order, so elements sharing an order (e.g. both "Empezar * Ahora" buttons, desktop+mobile) animate in together. Grouped elements * (inside a [data-reveal-group]) reveal when the *group* is scrolled into * view, not each one individually — see componentes-2.js. * * Driven by `animation`, deliberately never `transition`: several revealed * elements (e.g. .customBtn) have their own hover transition, and * `transition` is a shorthand — a second rule declaring it (even for * different properties, like opacity/filter here) replaces the component's * entire transition instead of merging with it, silently killing its hover * animation. `animation` is a separate property, so it can't collide. * Once each element's entrance animation ends, componentes-2.js strips its * data-reveal attribute, fully handing the element back to normal CSS * (hover states included) instead of leaving these rules matching forever. * ============================================================ */ .kuaa-reveal-ready [data-reveal] { opacity: 0; } .kuaa-reveal-ready [data-reveal="blur"] { filter: blur( 28px ); transform: translateY( 26px ); } .kuaa-reveal-ready [data-reveal="fade"] { transform: translateY( 22px ); } .kuaa-reveal-ready [data-reveal="pop"] { transform: scale( 0.8 ); } /* Curtain reveal for images/video: clipped shut from the left and slightly * zoomed in, so it un-scales into place as the clip uncovers it. Kept * filter-free (no blur) since filter:blur is heavy on the GPU and behaves * inconsistently on video/iframes across mobile browsers. */ .kuaa-reveal-ready [data-reveal="curtain"] { clip-path: inset( 0 0 0 100% ); transform: scale( 0.88 ); } @keyframes kuaaRevealBlur { from { opacity: 0; filter: blur( 28px ); transform: translateY( 26px ); } to { opacity: 1; filter: none; transform: none; } } @keyframes kuaaRevealFade { from { opacity: 0; transform: translateY( 22px ); } to { opacity: 1; transform: none; } } @keyframes kuaaRevealPop { from { opacity: 0; transform: scale( 0.8 ); } to { opacity: 1; transform: none; } } @keyframes kuaaRevealCurtain { from { opacity: 0; clip-path: inset( 0 0 0 100% ); transform: scale( 0.88 ); } to { opacity: 1; clip-path: inset( 0 0 0 0% ); transform: none; } } .is-revealed[data-reveal="blur"], .is-revealed [data-reveal="blur"] { animation: kuaaRevealBlur 1.4s ease var( --reveal-delay, 0ms ) both; } .is-revealed[data-reveal="fade"], .is-revealed [data-reveal="fade"] { animation: kuaaRevealFade 1.4s ease var( --reveal-delay, 0ms ) both; } .is-revealed[data-reveal="pop"], .is-revealed [data-reveal="pop"] { animation: kuaaRevealPop 1.4s ease var( --reveal-delay, 0ms ) both; } .is-revealed[data-reveal="curtain"], .is-revealed [data-reveal="curtain"] { animation: kuaaRevealCurtain 1.7s cubic-bezier( 0.22, 1, 0.36, 1 ) var( --reveal-delay, 0ms ) both; } /* Hero LCP image: same curtain, but CSS-only and self-starting on first * render — never pre-hidden waiting for componentes-2.js, because on slow * mobile that JS lands seconds after the image is already downloaded and * the delay counts directly against LCP. Without the flag (reduced motion, * or the failsafe cleared it) the rule doesn't match and the image is * simply visible. */ .kuaa-reveal-ready .kuaaHero__curtain { animation: kuaaRevealCurtain 1.7s cubic-bezier( 0.22, 1, 0.36, 1 ) both; } /* ============================================================ * YouTube facade (see initializeYoutubeFacades in componentes-2.js): shows * a static thumbnail + play button instead of loading the real iframe (and * the YouTube player JS it pulls in) until the visitor actually asks for * the video. * ============================================================ */ .kuaaYoutubeFacade { cursor: pointer; overflow: hidden; } .kuaaYoutubeFacade img { display: block; } /* YouTube bakes black letterbox/pillarbox bars into maxresdefault.jpg when * the source video isn't exactly 16:9. Zooming into the image (its * container already clips via overflow:hidden) crops those bars out. */ .kuaaTextoImagen__video .kuaaYoutubeFacade img { transform: scale( 1.18 ); transform-origin: center; } .kuaaYoutubeFacade__play { position: absolute; top: 50%; left: 50%; transform: translate( -50%, -50% ); width: 68px; height: 48px; background-color: rgba( 0, 0, 0, 0.7 ); border-radius: 12px; } .kuaaYoutubeFacade__play:before { content: ""; position: absolute; top: 50%; left: 54%; transform: translate( -50%, -50% ); border-style: solid; border-width: 11px 0 11px 19px; border-color: transparent transparent transparent var( --bs-white ); } .kuaaYoutubeFacade:hover .kuaaYoutubeFacade__play { background-color: var( --bs-primary ); } .kuaaYoutubeFacade:hover .kuaaYoutubeFacade__play:before { border-color: transparent transparent transparent var( --bs-black ); } .kuaaYoutubeFacade iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* Hover zoom on the carousel photos. * * Deliberately CSS-only and applied to the , never to .swiper-slide: * Swiper drives the slides' own transform on every frame, so animating them * would fight the slider. Styling the inner image is safe, and because it's * plain CSS it also works on the slides Swiper clones for the loop. */ .kuaaCarrusel .swiper-slide img, .kuaaCarruselGaleria .swiper-slide img { transition: transform 0.5s cubic-bezier( 0.22, 1, 0.36, 1 ); } .kuaaCarrusel .swiper-slide:hover img, .kuaaCarruselGaleria .swiper-slide:hover img { transform: scale( 1.06 ); } /* kuaaCarrusel's frame already clips (rounded-4 overflow-hidden); the gallery's * doesn't, so without this the enlarged photo would spill over its neighbours. */ .kuaaCarruselGaleria .swiper-slide > div { overflow: hidden; border-radius: var( --bs-border-radius ); } @media ( prefers-reduced-motion: reduce ) { .kuaaCarrusel .swiper-slide img, .kuaaCarruselGaleria .swiper-slide img { transition: none; } .kuaaCarrusel .swiper-slide:hover img, .kuaaCarruselGaleria .swiper-slide:hover img { transform: none; } } /* kuaaCountdown */ .kuaaCountdown__unit { position: relative; } .kuaaCountdown__unit:before, .kuaaCountdown__unit:after { content: ""; display: block; position: absolute; left: -4px; width: 110%; background: #414141; } .kuaaCountdown__unit:before { top: 5px; height: 30%; background: linear-gradient(0deg, rgb(65 65 65) 39%, rgba(0, 0, 0, 0.48) 100%); } .kuaaCountdown__unit:after { bottom: 30%; height: 30%; } @media only screen and (min-width: 992px) { .kuaaCountdown__unit:before, .kuaaCountdown__unit:after { height: 34%; bottom: 26px; } } @media only screen and (min-width: 1200px) { .kuaaCountdown__unit:before, .kuaaCountdown__unit:after { height: 34%; bottom: 30px; } } .kuaaImagenTexto__valor { font-size: 60px !important; } @media only screen and (min-width: 992px) { .kuaaImagenTexto__valor { font-size: 60px !important; } }