/* *ANYSIDE BUTTON* */ a.bc-anyside-button, a.bc-anyside-button:hover{ color: unset; } .bc-anyside-button { display: block; width: fit-content; white-space: wrap; --colortransition: 800ms; --colortransition-ida: 800ms; --pathtransition: 800ms; --pathtransition-ida: 800ms; --easing: ease; --hover-color: #fff; --click-dimensions: 500px; border: 0; position: relative; overflow: hidden; background: white; /**/ color: #1a1a1a; /**/ border-radius: 15px; text-align: center; padding: 40px; } .bc-anyside-button__title { position: relative; z-index: 2; transition: color var(--colortransition) var(--easing); } .bc-anyside-button__anyside-div { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); border-radius: 50%; background: #252527; /**/ clip-path: circle(0% at 50% 50%); transition: clip-path var(--pathtransition) var(--easing); z-index: 1; } .bc-anyside-button[data-type='hover']:hover .bc-anyside-button__title { color: var(--hover-color); /**/ transition: color var(--colortransition-ida) var(--easing); } .bc-anyside-button[data-type='hover']:hover .bc-anyside-button__anyside-div { clip-path: circle(100% at 50% 50%); transition: clip-path var(--pathtransition-ida) var(--easing); } /* a { display: inline-block; }*/ [data-type='click'] .bc-anyside-button__anyside-span { background: #252527; position: absolute; transform: translate(-50%, -50%); pointer-events: none; border-radius: 50%; animation: animate var(--pathtransition) linear infinite; } @keyframes animate { 0% { width: 0; height: 0; opacity: 0.5; } 100% { width: var(--click-dimensions); height: var(--click-dimensions); opacity: 0; } } /* *ARROW BUTTON* */ .bc-arrow-button{ white-space: wrap; text-decoration: unset !important; color: unset !important; display: flex; justify-content: center; align-items: center; flex-direction: row-reverse; /**/ width: fit-content; height: fit-content; --scale: 1.25; --dimensions: 23px; --transitionduration: 0.5s; --ease: cubic-bezier(0.1, 0, 0.3, 1); --transitiondurationswap: 0.5s; --easeswap: cubic-bezier(0.1, 0, 0.3, 1); --arrow-distance: 300%; } /*Title*/ .bc-arrow-button .bc-arrow-button_title-wrapper{ width: 100%; padding: 15px 20px 15px 20px; background-color: rgb(44, 43, 43); /**/ border-radius: 100px; /**/ color: white; /*typography*/ text-align: center; font-size: 18px; letter-spacing: -.5px; line-height: 1.15; } .bc-arrow-button .bc-arrow-button_title-wrap{ position: relative; overflow: hidden; } .bc-arrow-button .bc-arrow-button__title{ all: unset; display: block; outline: none; border: none; transition: transform; transition-duration: var(--transitiondurationswap); transition-timing-function: var(--easeswap); } /*Swap Title*/ .bc-arrow-button[data-swap='enable'] .bc-arrow-button__title::after{ display: block; content: attr(data-content); position: absolute; top: 100%; } .bc-arrow-button[data-swap='enable']:hover .bc-arrow-button__title{ transform: translateY(-100%); } .bc-arrow-button[data-swap='enable']:hover .bc-arrow-button__title::after{ transform: translateY(0%); } /*Arrow*/ .bc-arrow-button .bc-arrow-button__circle{ padding: 25px; background-color: rgb(44, 43, 43); /**/ border-radius: 50%; /**/ position: relative; overflow: hidden; display: flex; justify-content: center; align-items: center; min-width: var(--dimensions) !important; min-height: var(--dimensions) !important; transition: scale; transition-duration: var(--transitionduration); transition-timing-function: var(--ease); } .bc-arrow-button .bc-arrow-button__arrow{ position: absolute; transition: transform; transition-duration: var(--transitionduration); transition-timing-function: var(--ease); min-width: var(--dimensions) !important; min-height: var(--dimensions) !important; max-width: var(--dimensions) !important; max-height: var(--dimensions) !important; rotate: -45deg; /**/ --fill: white; stroke-width: 0.1; stroke: var(--fill); fill: var(--fill); } .bc-arrow-button .bc-arrow-button__arrow-right{ transform: translateX(calc(var(--arrow-distance) * -1)); } .bc-arrow-button:hover .bc-arrow-button__circle{ scale: var(--scale); /**/ } .bc-arrow-button:hover .bc-arrow-button__arrow-left{ transform: translateX(var(--arrow-distance)); } .bc-arrow-button:hover .bc-arrow-button__arrow-right{ transform: translateX(0%); } /* *CRYSTAL BUTTON* */ a.bc-crystal-button, a.bc-crystal-button:hover{ color: unset; } .bc-crystal-button { display: block; width: fit-content; box-sizing: border-box; white-space: wrap; --radius: 15px; /*border-radius*/ --filter: 0.7; --border: 1px; --padding: 1px; border-radius: var(--radius); border: 1px solid #d1d1d1; position: relative; place-items: center; padding: 1px; transition: transform 0.1s; padding: 12px 36px; /**/ } .bc-crystal-button:is(:hover, :focus-visible) { --hover: 1; } .bc-crystal-button:before{ content: ""; position: absolute; inset: 0px; border-radius: calc(var(--radius) - var(--border)); background: conic-gradient( from calc(var(--rx, 0) * 180deg) at calc(var(--x, 0) * 100%) calc(var(--y, 0) * 100%), hsl(10 90% 70%), hsl(140 80% 70%), hsl(320 80% 70%), hsl(210 80% 70%), hsl(10 80% 70%) ); filter: saturate(var(--filter)); /**/ opacity: var(--hover, 0); transition: opacity 0.2s; } .bc-crystal-button__backdrop { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: calc(var(--radius) - var(--padding)); display: block; grid-column: 1; grid-row: 1; } .bc-crystal-button__title { grid-row: 1; grid-column: 1; position: relative; z-index: 2; display: grid; align-items: center; gap: 0.5rem; } .bc-crystal-button--dark { outline: none; } .bc-crystal-button__backdrop { --blur: 20px; --brightness: 1.2; --saturate: 1; background: hsla(0,0,0, 0.3); /*crystal color*/ -webkit-backdrop-filter: blur(var(--blur)) brightness(var(--brightness)) saturate(var(--saturate)); /**/ backdrop-filter: blur(var(--blur)) brightness(var(--brightness)) saturate(var(--saturate)); /**/ } .bc-crystal-button--dark:after { background: hsl(0 0% 10% / calc(1 - var(--hover, 0) * 0.25)); } /* *GLOWING BUTTON* */ .bc-glowing-button{ --transition-duration: 0.4s; --dimensions: 1px; isolation: isolate; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; align-items: center; width: fit-content; height: fit-content; padding: var(--dimensions); /*dimensiones spark*/ text-decoration: none; border-radius: 15px; transition: all var(--transition-duration); /*duracion del hover box shadow*/ } .bc-glowing-button__background{ position: relative; z-index: 0; --padding: 20px 40px;/*padding*/ padding: var(--padding); background-color: #f5f5f5; /*background button*/ border-radius: 15px; } .bc-glowing-button__title{ opacity: 1; --color: black; background: var(--color); /*color texto*/ white-space: nowrap; -webkit-text-fill-color: transparent; -webkit-background-clip: text; background-clip: text; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .bc-glowing-button__border-gradient{ width: 500%; min-height: 500%; position: absolute; z-index: -1; transform: rotate(0deg); --animation-duration: 3s; animation: spin var(--animation-duration) linear infinite; /*duracion spark*/ --first-color: rgba(0,0,0,.5); /*first color*/ --second-color: rgba(255,255,255,0); /*second color*/ background: conic-gradient(from 0 at 50% 50%,var(--first-color) 0deg,var(--second-color) 60deg,var(--second-color) 310deg,var(--first-color) 360deg); } /* *LAYER BUTTON* */ a.bc-layer-button, a.bc-layer-button:hover{ color: unset; } .bc-layer-button { position: relative; display: flex; width: fit-content; height: fit-content; background: unset; } .bc-layer-button__original-layer{ position: relative; background: #080808; /**/ color: white; padding: 20px 40px; border-radius: 5px; /**/ --translate3dpxto: 0px; /*from*/ transform: translate3d(0, 0, 0); --color: white; --background: #080808; transition: color, background, transform; transition-timing-function: cubic-bezier(0.7, 0, 0.2, 1); transition-duration: 0.3s; z-index: 1; /*z-index*/ /**/ --z-index: 1; } .bc-layer-button:hover .bc-layer-button__original-layer{ color: var(--color) !important; background: var(--background) !important; transform: translate3d(var(--translate3dpxto), var(--translate3dpxto), 0); /*to*/ z-index: var(--z-index) !important; /*z-index on hover*/ /**/ } .bc-layer-button__first-layer { position: absolute; z-index: 1; top: 0; left: 0; width: 100%; /**/ /**/ height: 100%; /**/ /**/ padding: 20px 40px; display: flex; justify-content: center; align-items: center; background: #3754F5; /**/ border: 0; border-radius: 5px; /**/ color: #080808; pointer-events: none; --translate3dpxfrom: 6px; /*from*/ --translate3dpxto: 0px; /*from*/ transform: translate3d(var(--translate3dpxfrom), var(--translate3dpxfrom), 0); --color: #080808; --background: #3754F5; transition: color, background, transform; transition-timing-function: cubic-bezier(0.7, 0, 0.2, 1); transition-duration: 0.3s; /*s*/ z-index: 0; /*z-index*/ /**/ --z-index: 0; } .bc-layer-button:hover .bc-layer-button__first-layer { transform: translate3d(var(--translate3dpxto), var(--translate3dpxto), 0); /*to*/ color: var(--color) !important; background: var(--background) !important; z-index: var(--z-index) !important; /*z-index on hover*/ /**/ } .bc-layer-button__second-layer { position: absolute; z-index: 1; top: 0; left: 0; width: 100%; /**/ /**/ height: 100%; /**/ /**/ padding: 20px 40px; display: flex; justify-content: center; align-items: center; background: #D95FF8; /**/ border: 0; border-radius: 5px; /**/ color: #080808; pointer-events: none; --translate3dpxfrom: 12px; /*from*/ --translate3dpxto: 0; /*from*/ transform: translate3d(var(--translate3dpxfrom), var(--translate3dpxfrom), 0); --color: #080808; --background: #D95FF8; transition: color, background, transform; transition-timing-function: cubic-bezier(0.7, 0, 0.2, 1); transition-duration: 0.3s; /*s*/ z-index: -1; /*z-index*/ /**/ --z-index: -1; } .bc-layer-button:hover .bc-layer-button__second-layer { transform: translate3d(var(--translate3dpxto), var(--translate3dpxto), 0); /*to*/ color: var(--color) !important; background: var(--background) !important; z-index: var(--z-index) !important; /*z-index on hover*/ /**/ } .bc-layer-button__third-layer { position: absolute; z-index: 1; top: 0; left: 0; width: 100%; /**/ /**/ height: 100%; /**/ /**/ padding: 20px 40px; display: flex; justify-content: center; align-items: center; background: #3754F5; /**/ border: 0; border-radius: 5px; /**/ color: #080808; pointer-events: none; --translate3dpxfrom: 18px; /*from*/ --translate3dpxto: 0; /*from*/ transform: translate3d(var(--translate3dpxfrom), var(--translate3dpxfrom), 0); --color: #080808; --background: #3754F5; transition: color, background, transform; transition-timing-function: cubic-bezier(0.7, 0, 0.2, 1); transition-duration: 0.3s; /*s*/ z-index: -2; /*z-index*/ /**/ --z-index: -2; } .bc-layer-button:hover .bc-layer-button__third-layer { transform: translate3d(var(--translate3dpxto), var(--translate3dpxto), 0); /*to*/ color: var(--color) !important; background: var(--background) !important; z-index: var(--z-index) !important; /*z-index on hover*/ /**/ } .bc-layer-button__fourth-layer { position: absolute; z-index: 1; top: 0; left: 0; width: 100%; /**/ /**/ height: 100%; /**/ /**/ padding: 20px 40px; display: flex; justify-content: center; align-items: center; background: #D95FF8; /**/ border: 0; border-radius: 5px; /**/ color: #080808; pointer-events: none; --translate3dpxfrom: 24px; /*from*/ --translate3dpxto: 0; /*from*/ transform: translate3d(var(--translate3dpxfrom), var(--translate3dpxfrom), 0); --color: #080808; --background: #D95FF8; transition: color, background, transform; transition-timing-function: cubic-bezier(0.7, 0, 0.2, 1); transition-duration: 0.3s; /*s*/ z-index: -3; /*z-index*/ /**/ --z-index: -3; } .bc-layer-button:hover .bc-layer-button__fourth-layer { transform: translate3d(var(--translate3dpxto), var(--translate3dpxto), 0); /*to*/ color: var(--color) !important; background: var(--background) !important; z-index: var(--z-index) !important; /*z-index on hover*/ /**/ } /* *MARQUEE BUTTON* */ a.bc-marquee-button, a.bc-marquee-button:hover{ color: unset; } .bc-marquee-button { display: block; width: fit-content; white-space: wrap; pointer-events: auto; border: none; position: relative; background: white; /**/ padding: 20px 50px; /*establecer un máximo de 200px para padding-left y padding-right*/ border: 1px solid rgb(201, 201, 201); border-radius: 15px; } .bc-marquee-button::before, .bc-marquee-button::after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .bc-marquee-button__title { display: inline-block; } .bc-marquee-button:hover .bc-marquee-button__title { opacity: 0; } .bc-marquee-button__marquee { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; } .bc-marquee-button__units-wrapper { width: fit-content; height: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; position: relative; --offset: 1rem; --move-initial: calc(-25% + var(--offset)); --move-final: calc(-50% + var(--offset)); transform: translate3d(var(--move-initial), 0, 0); animation: marquee linear infinite; animation-duration: 4s; /*s*/ animation-play-state: paused; opacity: 0; --transition-duration: 0.4s; /*s*/ } .bc-marquee-button--rtl .bc-marquee-button__units-wrapper{ --move-initial: calc(25% - var(--offset)); /* Ajuste del desplazamiento inicial */ --move-final: calc(50% - var(--offset)); /* Ajuste del desplazamiento final */ } .bc-marquee-button:hover .bc-marquee-button__units-wrapper { animation-play-state: running; opacity: 1; transition-duration: 0.4s; } .bc-marquee-button__unit { text-align: center; white-space: nowrap; } @keyframes marquee { 0% { transform: translate3d(var(--move-initial), 0, 0); } 100% { transform: translate3d(var(--move-final), 0, 0); } } /* *MICROBOX BUTTON* */ .bc-microbox-button{ position: relative; --multiply: 0.75; /*multiply*/ width: calc(300px * var(--multiply)); /*dimensiones boton*/ /*múltiplo para editar junto las demás dimensiones*/ height: calc(100px * var(--multiply)); /*dimensiones boton*/ /*múltiplo para editar junto las demás dimensiones*/ display: flex; justify-content: center; align-items: center; border: 0; /*border properties*/ border-radius: 15px; overflow: hidden; white-space: wrap; } .bc-microbox-button__grid{ position: absolute; width: calc(300px * var(--multiply)); /*dimensiones boton*/ /*múltiplo para editar junto las demás dimensiones*/ height: calc(100px * var(--multiply)); /*dimensiones boton*/ /*múltiplo para editar junto las demás dimensiones*/ display: grid; justify-content: center; align-items: center; grid-auto-columns: 1fr; grid-template-areas: ". . . . . . . . . . . . . ." ". . . . . . . . . . . . . ." ". . . . . . . . . . . . . ." ". . . . . . . . . . . . . ." ". . . . . . . . . . . . . ." ". . . . . . . . . . . . . ." ". . . . . . . . . . . . . ." ". . . . . . . . . . . . . ." ". . . . . . . . . . . . . ." ". . . . . . . . . . . . . ." ". . . . . . . . . . . . . ." ". . . . . . . . . . . . . Area"; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; grid-template-rows: auto auto auto auto auto auto auto auto auto auto; background: #2d61f0; /*background squares*/ } .bc-microbox-button__square{ -webkit-box-direction: normal; box-sizing: border-box; width: calc(10px * var(--multiply)); /*dimensiones boxes*/ /*múltiplo para editar junto las demás dimensiones*/ height: calc(10px * var(--multiply)); /*dimensiones boxes*/ /*múltiplo para editar junto las demás dimensiones*/ background: #1f1f1f; /*background boton*/ transform: scale(1); } .bc-microbox-button__title{ position: absolute; color: #fff; /*typography settings*/ } /* *RIPPLE BUTTON* */ .bc-ripple-button { display: flex; justify-content: center; width: fit-content; white-space: nowrap; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; color: #000; line-height: normal; padding: 15px 50px; /**/ border-radius: 50px; /*minimo 32 px*/ background: white; /**/ overflow: hidden; position: relative; transition: var(--transition-duration) var(--transition-ease); /*s*/ transform: translateZ(0); backface-visibility: hidden; -webkit-font-smoothing: subpixel-antialiased; -webkit-perspective: 1000; will-change: transform; --transition-duration: 0.8s; --transition-duration-in: 0.8s; --transition-ease: cubic-bezier(0.22, 1, 0.36, 1); --skew-text: 10deg; --amplitude: 0%; } .bc-ripple-button__text { opacity: 0; will-change: transform; } .bc-ripple-button__pseudo { position: relative; overflow: hidden; will-change: transform; } .bc-ripple-button__pseudo::before { content: attr(data-content); position: absolute; top: 0; /*posicion inicial del texto original*/ /*change*/ transform: skewY(0); transition: var(--transition-duration) var(--transition-ease); /*s*/ will-change: transform; } .bc-ripple-button__pseudo::after { content: attr(data-content); position: absolute; top: 300%; /*posicion inicial del texto que suplanta*/ /*change*/ left: 0; transform: skewY(var(--skew-text)); /**/ z-index: 5; color: white; /**/ transition: var(--transition-duration) var(--transition-ease); /*s*/ will-change: transform; } .bc-ripple-button__hover-fill { position: absolute; top: -155%; /*posicion inicial de la mascara*/ /*change*/ left: calc(var(--amplitude) * -1); /*change*/ height: 150%; /*altura de la mascara*/ /*change*/ width: calc(100% + var(--amplitude)*2); /*change*/ background: #000; /**/ z-index: -5; border-radius: 0 0 50% 50%; /*bordes de la mascara*/ transition: var(--transition-duration) var(--transition-ease); /*s*/ } .bc-ripple-button:hover .bc-ripple-button__pseudo::before, .bc-ripple-button:focus .bc-ripple-button__pseudo::before { transform: skewY(var(--skew-text)); /**/ top: -300%; /*translateY del texto original*/ /*change*/ will-change: transform; transition: var(--transition-duration-in) var(--transition-ease); } .bc-ripple-button:hover .bc-ripple-button__pseudo::after, .bc-ripple-button:focus .bc-ripple-button__pseudo::after { transform: skewY(0); top: 0; /*translateY del texto que suplanta*/ /*change*/ will-change: transform; transition: var(--transition-duration-in) var(--transition-ease); } .bc-ripple-button:hover .bc-ripple-button__hover-fill, .bc-ripple-button:focus .bc-ripple-button__hover-fill { transform: translateY(100%); /*translateY de la mascara*/ /*change*/ transition: var(--transition-duration-in) var(--transition-ease); } /*ripple from bottom*/ [data-type="bc-ripple-button--from-bottom"] .bc-ripple-button__pseudo::after { top: -300%; } [data-type="bc-ripple-button--from-bottom"] .bc-ripple-button__hover-fill { border-radius: 50% 50% 0 0; top: 105%; } [data-type="bc-ripple-button--from-bottom"]:hover .bc-ripple-button__pseudo::before, [data-type="bc-ripple-button--from-bottom"]:focus .bc-ripple-button__pseudo::before { top: 300%; transition: var(--transition-duration-in) var(--transition-ease); } [data-type="bc-ripple-button--from-bottom"]:hover .bc-ripple-button__hover-fill, [data-type="bc-ripple-button--from-bottom"]:focus .bc-ripple-button__hover-fill { transform: translateY(-100%); transition: var(--transition-duration-in) var(--transition-ease); } /*ripple from left*/ [data-type="bc-ripple-button--from-left"] .bc-ripple-button__pseudo::after { top: -300%; } [data-type="bc-ripple-button--from-left"] .bc-ripple-button__hover-fill { border-radius: 0 0 0 0; top: -25%; left: -155%; width: 150%; } [data-type="bc-ripple-button--from-left"]:hover .bc-ripple-button__pseudo::before, [data-type="bc-ripple-button--from-left"]:focus .bc-ripple-button__pseudo::before { top: 300%; transition: var(--transition-duration-in) var(--transition-ease); } [data-type="bc-ripple-button--from-left"]:hover .bc-ripple-button__hover-fill, [data-type="bc-ripple-button--from-left"]:focus .bc-ripple-button__hover-fill { transform: translateX(100%); transition: var(--transition-duration-in) var(--transition-ease); } /*ripple from right*/ [data-type="bc-ripple-button--from-right"] .bc-ripple-button__pseudo::after { top: -300%; } [data-type="bc-ripple-button--from-right"] .bc-ripple-button__hover-fill { border-radius: 0 0 0 0; top: -25%; left: 105%; width: 150%; } [data-type="bc-ripple-button--from-right"]:hover .bc-ripple-button__pseudo::before, [data-type="bc-ripple-button--from-right"]:focus .bc-ripple-button__pseudo::before { top: 300%; transition: var(--transition-duration-in) var(--transition-ease); } [data-type="bc-ripple-button--from-right"]:hover .bc-ripple-button__hover-fill, [data-type="bc-ripple-button--from-right"]:focus .bc-ripple-button__hover-fill { transform: translateX(-100%); transition: var(--transition-duration-in) var(--transition-ease); } /* *BLADE TITLE* */ .bc-blade-title__anchor{ display: block; width: fit-content; height: fit-content; } .bc-blade-title{ display: block; width: fit-content; } .bc-blade-title__inner{ display: block; clip-path: polygon(0 0, 150% 0, 150% 150%, 0% 150%); } .bc-blade-title__line-wrapper{ overflow: hidden; } .bc-blade-title__inner--to-hide{ opacity: 0; } /* *CIRCULAR TITLE* */ .bc-circular-title{ display: block; width: fit-content; height: fit-content; } .bc-circular-title .bc-circular-title__element[data-bc-hidden]{ opacity: 0; } .bc-circular-title .bc-circular-title__element{ width: 200px; /**/ height: 200px; /**/ display: flex; justify-content: center; align-items: center; } .bc-circular-title .bc-circular-title__wrapper--spin { animation: round; animation-duration: 15s; /*duration*/ animation-timing-function: linear; /*easing*/ animation-iteration-count: infinite; } @keyframes round { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* *HIGHLIGHT TITLE* */ .bc-highlight-title__anchor{ display: block; width: fit-content; height: fit-content; } .bc-highlight-title{ text-decoration: unset !important; color: unset !important; display: block; height: fit-content; width: fit-content; } .bc-highlight-title__element{ width: fit-content; position: relative; z-index: 0; --after-background: #73fddf; --height: 7px; --duration: 0.3s; --ease: cubic-bezier(0.16, 1, 0.3, 1); } .bc-highlight-title__bottom-to-full::after, .bc-highlight-title__full-to-bottom::after, .bc-highlight-title__left-to-full::after, .bc-highlight-title__full-to-left::after{ background-color: var(--after-background); } /*bottom to full*/ .bc-highlight-title__bottom-to-full:after { content: ''; position: absolute; z-index: -1; bottom: 0px; left: 0; width: 100%; height: var(--height); transition: var(--duration) var(--ease); } .bc-highlight-title__bottom-to-full:hover:after { height: 100%; } /*full to bottom*/ .bc-highlight-title__full-to-bottom:after { content: ''; position: absolute; z-index: -1; bottom: 0px; left: 0; width: 100%; height: 100%; transition: var(--duration) var(--ease); } .bc-highlight-title__full-to-bottom:hover:after { height: var(--height); } /*left to full*/ .bc-highlight-title__left-to-full:after { content: ''; position: absolute; z-index: -1; bottom: 0px; left: 0; width: var(--height); height: 100%; transition: var(--duration) var(--ease); } .bc-highlight-title__left-to-full:hover:after { width: 100%; } /*full to left*/ .bc-highlight-title__full-to-left:after { content: ''; position: absolute; z-index: -1; bottom: 0px; left: 0; width: 100%; height: 100%; transition: var(--duration) var(--ease); } .bc-highlight-title__full-to-left:hover:after { width: var(--height); } /* *LETTER LAUNCHER* */ .bc-letter-launcher__anchor{ display: block; width: fit-content; height: fit-content; } .bc-letter-launcher{ display: block; width: fit-content; } .bc-letter-launcher__inner--to-hide{ opacity: 0; } /* *RANDOM LETTERS* */ .bc-random-letters__anchor{ display: block; width: fit-content; height: fit-content; } .bc-random-letters{ display: block; width: fit-content; height: fit-content; } .bc-random-letters__element{ text-align: center; } .bc-to-hide{ opacity: 0; } /* *SCROLL READING* */ .bc-scroll-reading{ display: block; width: 100%; height: fit-content; } .bc-scroll-reading__element{ font-size: 8rem; /*typography*/ } .bc-scroll-reading__element .line { position: relative; } .bc-scroll-reading__line-mask { position: absolute; top: 0; right: 0; background-color: white; /*mask color*/ --opacity: 0.1; /*opacity text to read*/ opacity: calc(1 - var(--opacity)); height: 100%; width: 100%; z-index: 9999; } .bc-scroll-reading--rtl .bc-scroll-reading__line-mask{ left: 0; right: unset; } .bc-scroll-reading__to-hide{ opacity: 0; } /* *SVG TITLE* */ .bc-svg-title{ display: block; width: fit-content; height: fit-content; --animation-duration: 5s; --animation-delay: 0.2s; } .bc-svg-title__element{ display: flex; width: 250px; /*ancho del svg*/ height: auto; /*altura del svg*/ } .bc-svg-title__element text{ fill: transparent; /*color*/ stroke: black; /*color del stroke*/ stroke-width: 1; /*width del stroke*/ font-family: helvetica; /*typography*/ visibility: hidden; stroke-dasharray: 0 50%; } .bc-svg-title__animation text{ visibility: visible; animation: SVGTitleAnimate var(--animation-duration) var(--animation-delay) forwards; } [data-ready="bc-svg-title__animation"] text{ visibility: visible; animation: SVGTitleAnimate var(--animation-duration) var(--animation-delay) forwards; } [data-ready="bc-svg-title__animation--played"] text{ visibility: visible; stroke-dasharray: 0 50%; } @keyframes SVGTitleAnimate { 0% { stroke-dasharray: 0 50%; } 100% { stroke-dasharray: 50% 0; } } /* *SWAP TITLE* */ .bc-swap-title__anchor{ display: block; width: fit-content; height: fit-content; } .bc-swap-title *{ will-change: transform; /*FIXES BLUR*/ } .bc-swap-title { display: block; width: fit-content; position: relative; padding: 0; line-height: normal; } .bc-swap-title__span-wrapper { display: block; overflow: hidden; } .bc-swap-title__span, .bc-swap-title__span .char, .bc-swap-title__span .word { --skew: 0deg; --duration: 1s; --ease: cubic-bezier(0.19, 1, 0.22, 1); --fromtype: 1; display: block; position: relative; -webkit-transform-origin: left top; -moz-transform-origin: left top; -ms-transform-origin: left top; -o-transform-origin: left top; transform-origin: left top; transition: transform var(--duration) var(--ease), -webkit-transform var(--duration) var(--ease), -moz-transform var(--duration) var(--ease), -o-transform var(--duration) var(--ease); } .bc-swap-title__span::after, .bc-swap-title__span .char::after, .bc-swap-title__span .word::after { content: var(--after-content); display: block; position: absolute; top: calc(var(--fromtype) * 100%); left: 0; -webkit-transform-origin: left top; -moz-transform-origin: left top; -ms-transform-origin: left top; -o-transform-origin: left top; transform-origin: left top; transform: skewY(calc(var(--skew) * var(--fromtype))); transition: transform var(--duration) var(--ease), -webkit-transform var(--duration) var(--ease), -moz-transform var(--duration) var(--ease), -o-transform var(--duration) var(--ease); } .bc-swap-title:hover .bc-swap-title__span, .bc-swap-title:hover .bc-swap-title__span .char, .bc-swap-title:hover .bc-swap-title__span .word { -webkit-transform: translateY(calc(var(--fromtype) * -100%)) skewY(calc(var(--skew) * -1 * var(--fromtype))); -moz-transform: translateY(calc(var(--fromtype) * -100%)) skewY(calc(var(--skew) * -1 * var(--fromtype))); -ms-transform: translateY(calc(var(--fromtype) * -100%)) skewY(calc(var(--skew) * -1 * var(--fromtype))); -o-transform: translateY(calc(var(--fromtype) * -100%)) skewY(calc(var(--skew) * -1 * var(--fromtype))); transform: translateY(calc(var(--fromtype) * -100%)) skewY(calc(var(--skew) * -1 * var(--fromtype))); } .bc-swap-title--remove-line:hover .bc-swap-title__span-wrapper .bc-swap-title__span{ -webkit-transform: none !important; -moz-transform: none !important; -ms-transform: none !important; -o-transform: none !important; transform: none !important; } .bc-swap-title:hover .bc-swap-title__span::after, .bc-swap-title:hover .bc-swap-title__span .char::after, .bc-swap-title:hover .bc-swap-title__span .word::after { -webkit-transform: skewY(calc(var(--skew) * var(--fromtype))); -moz-transform: skewY(calc(var(--skew) * var(--fromtype))); -ms-transform: skewY(calc(var(--skew) * var(--fromtype))); -o-transform: skewY(calc(var(--skew) * var(--fromtype))); transform: skewY(calc(var(--skew) * var(--fromtype))); } /* *TITLE IMAGES* (nestable) */ .bc-title-images{ width: fit-content; height: fit-content; } .bc-title-images__wrapper{ display: flex; flex-direction: column; justify-content: center; align-items: center; } .bc-inline-div{ margin-block: 0px; display: flex; flex-direction: row; justify-content: center; align-items: center; width: fit-content; } .bc-inline-img, .bc-inline-div video{ /*cada imagen debe ser unica*/ border-radius: 15px; /*borde de la imagen*/ width: 100px; /*anchura de la imagen*/ height: 65px; /*altura de la imagen*/ background-position: center; background-repeat: no-repeat; background-size: cover; display: inline-block; margin: 0 14px; /*margenes de la imagen*/ } .bc-inline-span div{ display: inline; } /* *TWIST TITLE* */ .bc-twist-title__anchor{ display: block; width: fit-content; height: fit-content; } .bc-twist-title{ width: fit-content; display: block; } .bc-twist-title__span{ display: block; opacity: 0; transform-origin: center top; transform-style: preserve-3d; transform: translateY(100%) rotateX(-80deg); transition: opacity 0s cubic-bezier(0.215, 0.61, 0.355, 1), transform 0s cubic-bezier(0.215, 0.61, 0.355, 1); } .bc-twist-title__is-ready .bc-twist-title__span{ transform: none; opacity: 1; } [data-ready="bc-twist-title__is-ready"] .bc-twist-title__span{ transform: none; opacity: 1; } /* *UNDERLINE TITLE* */ .bc-underlined-title__anchor{ display: flex; width: fit-content; height: fit-content; } .bc-underlined-title{ text-decoration: unset !important; color: unset !important; display: block; width: fit-content; height: fit-content; } .bc-underlined-title__element{ position: relative; display: block; width: 100%; --width: 0px; --height: 1px; --bottom-distance: 0px; --duration: 0.7s; --ease: cubic-bezier(0.16, 1, 0.3, 1); --background: currentColor; } /*sidetoside*/ .bc-underlined-title__side-to-side:before { content: ""; display: block; position: absolute; left: 0; right: 0; bottom: var(--bottom-distance); height: var(--height); -webkit-transform: scaleX(0); -moz-transform: scaleX(0); -ms-transform: scaleX(0); -o-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: right center; -moz-transform-origin: right center; -ms-transform-origin: right center; -o-transform-origin: right center; transform-origin: right center; background: var(--background); -webkit-transition: -webkit-transform var(--duration) var(--ease); transition: -webkit-transform var(--duration) var(--ease); -o-transition: -o-transform var(--duration) var(--ease); -moz-transition: transform var(--duration) var(--ease), -moz-transform var(--duration) var(--ease); transition: transform var(--duration) var(--ease); transition: transform var(--duration) var(--ease), -webkit-transform var(--duration) var(--ease), -moz-transform var(--duration) var(--ease), -o-transform var(--duration) var(--ease); } .bc-underlined-title__side-to-side:hover:before { -webkit-transform: scaleX(1); -moz-transform: scaleX(1); -ms-transform: scaleX(1); -o-transform: scaleX(1); transform: scaleX(1); -webkit-transform-origin: left center; -moz-transform-origin: left center; -ms-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center; transition-delay: unset; -webkit-transition-delay: unset; -o-transition-delay: unset; -moz-transition-delay: unset; } /*one sided y twosided*/ .bc-underlined-title__one-sided:after { content: ''; position: absolute; bottom: var(--bottom-distance); left: 0; width: var(--width); border-bottom: var(--height) solid var(--background); transition: var(--duration) var(--ease); } .bc-underlined-title__two-sided:after { content: ''; display: block; margin: auto; bottom: var(--bottom-distance); left: 0; width: var(--width); height: var(--height); background: var(--background); transition: width var(--duration) var(--ease); position: relative; border-bottom: unset; } .bc-underlined-title__one-sided:hover:after, .bc-underlined-title__two-sided:hover:after { width: 100%; } .bc-underlined-title__one-sided:hover::after, .bc-underlined-title__two-sided:hover::after { -webkit-transition: width var(--duration) var(--ease); transition: width var(--duration) var(--ease); -o-transition: width var(--duration) var(--ease); -moz-transition: width var(--duration) var(--ease); transition: width var(--duration) var(--ease); transition: width var(--duration) var(--ease); } /*Full sided*/ .bc-underlined-title__full-sided::after, .bc-underlined-title__full-sided::before { content: ""; position: absolute; left: 0; right: 0; bottom: var(--bottom-distance); height: var(--height); background: var(--background); -webkit-transition: -webkit-transform var(--duration) var(--ease); transition: -webkit-transform var(--duration) var(--ease); -o-transition: -o-transform var(--duration) var(--ease); -moz-transition: transform var(--duration) var(--ease), -moz-transform var(--duration) var(--ease); transition: transform var(--duration) var(--ease); transition: transform var(--duration) var(--ease), -webkit-transform var(--duration) var(--ease), -moz-transform var(--duration) var(--ease), -o-transform var(--duration) var(--ease); } .bc-underlined-title__full-sided::before { -webkit-transform-origin: left; -moz-transform-origin: left; -ms-transform-origin: left; -o-transform-origin: left; transform-origin: left; -webkit-transform: scaleX(0); -moz-transform: scaleX(0); -ms-transform: scaleX(0); -o-transform: scaleX(0); transform: scaleX(0); } .bc-underlined-title__full-sided::after { -webkit-transform-origin: right; -moz-transform-origin: right; -ms-transform-origin: right; -o-transform-origin: right; transform-origin: right; -webkit-transform: scaleX(1); -moz-transform: scaleX(1); -ms-transform: scaleX(1); -o-transform: scaleX(1); transform: scaleX(1); } .bc-underlined-title__full-sided:hover::before { -webkit-transform: scaleX(1); -moz-transform: scaleX(1); -ms-transform: scaleX(1); -o-transform: scaleX(1); transform: scaleX(1); transition-delay: 0.25s; -webkit-transition-delay: 0.25s; -o-transition-delay: 0.25s; -moz-transition-delay: 0.25s; } .bc-underlined-title__full-sided:hover::after { width: unset; -webkit-transform: scaleX(0); -moz-transform: scaleX(0); -ms-transform: scaleX(0); -o-transform: scaleX(0); transform: scaleX(0); } /* *BACK TO TOP* */ .bc-back-to-top { position: fixed; right: 50px; /*posicion respecto la derecha*/ bottom: 50px; /*posicion respecto abajo*/ height: 46px; width: 46px; cursor: pointer; border-radius: 50px; box-shadow: inset 0 0 0 2px; color: rgba(255, 255, 255, 0.2); /*color del progress interior*/ background-color: none; /*color de fondo del circulo*/ z-index: 10000; opacity: 0; visibility: hidden; transform: translateY(15px) !important; transition-duration: 200ms; /*s*/ transition-timing-function: linear; /*ease*/ display: flex; justify-content: center; align-items: center; } .bc-back-to-top__active-progress { opacity: 1; visibility: visible; transform: translateY(0) !important; } .bc-back-to-top__arrow-svg { position: absolute; fill: grey; width: 25px; height: 100%; cursor: pointer; display: block; z-index: 1; } .bc-back-to-top__circle-path { fill: none; stroke: grey; /*color del progress*/ stroke-width: 5; box-sizing:border-box; } .bc-back-to-top__to-hide{ opacity: 0; } /* *CURSOR* */ /* *DARK MODE* */ .bc-dark-mode{ display: block; width: fit-content; height: fit-content; } .bc-dark-mode .theme-toggle{ --duration: 1s; --theme-toggle__classic--duration: var(--duration) !important; /*duracion de la animacion*/ --theme-toggle__lightbulb--duration: var(--duration) !important; --theme-toggle__eclipse--duration: var(--duration) !important; --theme-toggle__horizon--duration: var(--duration) !important; --theme-toggle__simple--duration: var(--duration) !important; --theme-toggle__around--duration: var(--duration) !important; --theme-toggle__within--duration: var(--duration) !important; --theme-toggle__expand--duration: var(--duration) !important; --theme-toggle__inner-moon--duration: var(--duration) !important; color: black; line-height: 0; font-size: 32px; } .bc-dark-mode .theme-toggle--toggled{ color: black; } .bc-dark-mode__list--colors{ display: none; } .bc-dark-mode__list--backgrounds{ display: none; } .bc-dark-mode__list--borders{ display: none; } [bc-dark-mode__transition]{ transition: color, background, border-color, stroke, fill; transition-duration: var(--dark-mode-transition-duration); } /* *GLITCHY* */ /* *GRAINED* (nestable) */ .bc-grained{ position: relative; height: 500px; width: 100%; background: grey; } .bc-grained__child { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0.05; } [bc-grained__to-hide]{ opacity: 0; } /* *IMAGE REVEAL* */ .bc-img-reveal { contain: paint; display: block; width: fit-content; /*width*/ height: auto; } .bc-img-reveal__element { visibility: hidden; overflow: hidden; width: 100%; height: 100%; --scale: 1.3; } .bc-img-reveal__element[data-direction='top'] { transform: translateY(-100%); } .bc-img-reveal__element[data-direction='bottom'] { transform: translateY(100%); } .bc-img-reveal__element[data-direction='left'] { transform: translateX(-100%); } .bc-img-reveal__element[data-direction='right'] { transform: translateX(100%); } .bc-img-reveal__element .bc-img-reveal__img { height: 100%; width: 100%; object-fit: cover; transform-origin: left; } .bc-img-reveal__element[data-direction='top'] .bc-img-reveal__img { transform: translateY(100%) scale(var(--scale)); } .bc-img-reveal__element[data-direction='bottom'] .bc-img-reveal__img { transform: translateY(-100%) scale(var(--scale)); } .bc-img-reveal__element[data-direction='left'] .bc-img-reveal__img { transform: translateX(100%) scale(var(--scale)); } .bc-img-reveal__element[data-direction='right'] .bc-img-reveal__img { transform: translateX(-100%) scale(var(--scale)); } /* *LOTTIE* */ .bc-lottie{ display: block; width: 350px; /**/ height: fit-content; /**/ } .bc-lottie__element{ width: 100%; /*width lottie*/ height: auto; } .bc-lottie__to-hide{ opacity: 0; } /* *MARQUEE* (nestable) */ .bc-reel{ direction: ltr !important; --rotate: 0deg; transform: rotate(var(--rotate)); /*control de rotate va en reeller.container*/ --color: #fff; --width: 25%; } .bc-reel[data-blur-edges="1"]::before{ background-image: linear-gradient(to right, var(--color), rgba(0, 0, 0, 0)); content: ""; position: absolute; z-index: 99; top: 0; left: 0; width: var(--width); height: 100%; } .bc-reel[data-blur-edges="1"]::after{ background-image: linear-gradient(270deg, var(--color), rgba(0, 0, 0, 0)); content: ""; position: absolute; z-index: 99; top: 0; right: 0; width: var(--width); height: 100%; } .bc-reel__wrapper { /**/ display: flex; } .bc-reel__item { /**/ display: flex; align-items: center; justify-content: center; } .bc-reel__nestable{ /*gap necesario*/ visibility: hidden; min-width: 1px; } .bc-reel__example-heading{ /*elemento nestable por defecto*/ background: #080808; padding: 10px 20px; color: white; } .bc-reel__to-hide{ opacity: 0; } /* *PARALLAX* */ .bc-parallax{ display: block; width: fit-content; height: fit-content; overflow: visible; } .bc-parallax .simpleParallax{ height: 100%; display: flex; align-items: center; } .bc-parallax__element{ width: 100%; height: 100%; } .bc-parallax__to-hide{ opacity: 0; } /* *SCROLLBAR* */ .bc-data-scrollbar{ --track-color: rgba(0,0,0,0); --track-hovercolor: rgba(0,0,0,0); --track-activecolor: rgba(0,0,0,0); --thumb-color: rgba(0,0,0,0.44); --thumb-hovercolor: rgba(0,0,0,0.55); --thumb-activecolor: rgba(0,0,0,0.66); } /* *SHARER* */ .bc-sharer{ cursor: pointer; width: fit-content; } /* *ZOOM LENS* */ .bc-zoom-lens{ display: block; width: fit-content; /**/ height: fit-content; /**/ } .bc-zoom-lens__image { position: relative; /**/ display: block; /**/ object-fit: cover; /**/ width: 100%; height: 100%; /**/ --bgimage: url(https://images.pexels.com/photos/17050728/pexels-photo-17050728/free-photo-of-madera-carretera-paisaje-agua.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1); } .bc-zoom-lens__glass { /*zoom*/ position: absolute; /**/ --glasstop: 0; /**/ --glassleft: 0; /**/ --width: 50px; top: calc(var(--glasstop) - var(--width)/2); /*dimensiones entre 2*/ left: calc(var(--glassleft) - var(--width)/2); /*dimensiones entre 2*/ width: var(--width); /*dimensiones*/ height: var(--width); /*dimensiones*/ background-image: var(--bgimage); /*mismo src que en el html de la imagen*/ border: 1px solid white; /*border*/ border-radius: 50%; /*border*/ pointer-events: none; /**/ opacity: 0; /**/ transform: scale(0); /**/ --scale-duration: 200ms; transition: transform var(--scale-duration); /*duracion scale*/ z-index: 9999; } .bc-zoom-lens__show { opacity: 1; /**/ --scale: 2; transform: scale(var(--scale)); /*scale zoom*/ } /* *TIPPY* */ /* *SMOOTH SCROLL* */ /* EXPANDER (nestable) */ .bc-expander-container{ width: 600px; /**/ background-color: black; /*background*/ border-radius: 20px; /*border*/ } .bc-expander-question { padding: 10px 20px; /*padding*/ position: relative; display: flex; align-items: center; /**/ justify-content: space-between; /**/ flex-direction: row; /**/ width: 100%; cursor: pointer; --icon-transition-duration: 0.2s; } .bc-expander-question-heading { font-size: 16px; /*typography*/ color: white; } .bc-expander-question-icon { font-size: 16px; /*typography*/ color: white; transition: var(--icon-transition-duration); /**/ } .bc-expander-question.bc-expander-active > .bc-expander-question-icon { --rotate-degree: 180deg; transform: rotate(var(--rotate-degree)); /**/ } .bc-expander-answercont { max-height: 0; overflow: hidden; transition: 0.3s; /**/ width: 100%; } .bc-expander-answer { font-size: 1.6rem; /*typography*/ line-height: 1.5; color: white; padding: 0 20px 15px 20px; /*padding*/ } /* CORE SLIDER (nestable) */ .bc-core-slider-wrapper.splide{ opacity: 0; } .bc-core-slider-wrapper .splide__track{ height: 100%; width: 100%; } .bc-core-slider-wrapper .splide__slide{ border: unset !important; cursor: grab !important; /**/ } .bc-core-slider-wrapper .splide__track--nav>.splide__list>.splide__slide.is-active{ border: 3px solid transparent; } .bc-core-slider-wrapper .splide__arrow{ /*personalizaciones ambas arrows*/ background-color: #c6afe6; --scale-arrow: 1; font-size: 100%; align-items: center; background: #ccc; cursor: pointer; display: flex; height: 30px; -ms-flex-pack: center; justify-content: center; opacity: .7; padding: 0; position: absolute; top: 50%; transform: translateY(-50%) scale(var(--scale-arrow)); width: 30px; z-index: 1; } .bc-core-slider-wrapper .splide__arrow--prev{ /*personalizaciones arrow previo*/ background-color: #6200ed; left: 15px; outline: 0 !important; } .bc-core-slider-wrapper .splide__arrow--next{ /*personalizaciones arrow siguiente*/ background-color: #6200ed; right: 15px; outline: 0 !important; } .bc-core-slider-wrapper .splide__arrow--prev .prevarrowicon, .bc-core-slider-wrapper .splide__arrow--next .nextarrowicon{ /*personalizaciones arrow previo*/ color: white; } .bc-core-slider-wrapper .splide__pagination .splide__pagination__page.is-active{ /*personalizaciones punto de la paginacion activo en ese momento*/ background-color: #6200ed; } .bc-core-slider-wrapper .splide__pagination .splide__pagination__page{ /*personalizaciones puntos de la paginacion no activos en ese momento*/ background-color: #c6afe6; outline: 0 !important; border: 0; border-radius: 50%; display: inline-block; height: 8px; margin: 3px; opacity: .7; padding: 0; position: relative; transition: transform .2s linear; width: 8px; z-index: 1; } .bc-core-slider-wrapper .splide__pagination{ bottom: unset; left: 0; padding: 0 1em; position: absolute; right: 0; z-index: 1; transform: unset; margin-top: 20px; } .bc-core-slider-wrapper img { /*propiedades de los elementos del slider (ajenas al elemento slider/carousel)*/ width: 100%; height: 300px; object-fit: cover; } .bc-core-slider-wrapper .splide__slide { outline: 0 !important; } .bc-core-slider-wrapper .splide__slide{ width: fit-content; } .bc-core-slider-wrapper .bc-slider-block{ width: 100%; height: 500px; background-color:#c6afe6; display: flex; justify-content: center; align-items: center; } .bc-core-slider-wrapper .bc-slider-block-heading{ color: white; text-align: center; max-width: 600px; } /* CLICK AND COPY (nestable) */ .bc-click-and-copy{ width: fit-content; cursor: pointer; } .bc-click-and-copy > .bc-click-and-copy__icon{ border: unset; border-radius: 10px; padding: 10px; color: white; --icon-size: auto; } .bc-click-and-copy > .bc-click-and-copy__icon::before{ font-size: var(--icon-size); } .bc-click-and-copy .bc-click-and-copy__icon--hidden{ visibility: hidden; display: none; } /* BEFORE/AFTER IMAGE */ .bc-before-after-image{ width: 100%; /*ancho wrapper ambas imagenes*/ height: 100%; /*altura wrapper*/ overflow: hidden; position: relative; transform: rotate(0deg); } .bc-before-after-image *::selection{ background: transparent; } .bc-before-after-image__content-image{ width: 100%; height: 100%; object-fit: cover; max-width: unset; outline: unset; } .bc-before-after-image__before, .bc-before-after-image__after { width:100%; height:100%; background-repeat:no-repeat; background-size: cover; background-position: center; position: absolute; top:0; left:0; pointer-events:none; overflow: hidden; } .bc-before-after-image__before{ position: relative; } .bc-before-after-image__scroller{ display: flex; justify-content: center; align-items: center; column-gap: 15px; width: 50px; /**/ height: 50px; /**/ position: absolute; top: 50%; --transition-duration: 0.2s; transform: translateY(-50%); background-color: transparent; opacity: 0.8; /**/ transition: opacity var(--transition-duration); pointer-events:auto; cursor: pointer; background: transparent; border-radius: 50%; /**/ border: 2px solid #fff; /*grosor circulo*/ --color-line: white; --width: 2px; } .bc-before-after-image__scroller:hover{ opacity:1 !important; } .bc-before-after-image__scrolling{ pointer-events:none; opacity:1 !important; } .bc-before-after-image__scroller--thumb{ --dimensions: 15px; width: 100%; /**/ height: 100%; /**/ fill: white; /**/ display: flex; align-items: center; justify-content: center; column-gap: 5px; } .bc-before-after-image .bc-before-after-image__scroller--thumb svg{ min-width: unset; min-height: unset; width: var(--dimensions); /**/ height: var(--dimensions); /**/ } .bc-before-after-image__scroller:before, .bc-before-after-image__scroller:after{ content:" "; display: block; width: 10px; /*grosor lineas*/ height: 9999px; position: absolute; left: 50%; width: var(--width); margin-left: calc(var(--width) / -2 - .5px); z-index: 30; transition: 0.1s; background: var(--color-line); /*color linea*/ } .bc-before-after-image__scroller:before{ top:100%; } .bc-before-after-image__scroller:after{ bottom:100%; } /* 3D Hover (nestable) */ .bc-parallax-hover { width: fit-content; } .atropos-inner{ width: auto; height: auto; background-color: #b53df6; border-radius: 15px; } .bc-parallax-hover__heading{ width: 550px; } /* Scribble Title (nestable) */ .bc-scribble-title{ display: block; width: fit-content; height: auto; } .bc-scribble-title__element > *, .bc-scribble-title__element > * > div{ display: inline-block; } .bc-scribble-title__element em{ position: relative; /**/ z-index: 1; font-style: normal; width: fit-content; height: fit-content; } .bc-scribble-title__svg{ z-index: -1; /**/ position: absolute; /**/ top: 60%; /*cambiar por tipo*/ left: 0; /*cambiar por tipo*/ width: 100%; /*cambiar por tipo*/ overflow: visible !important; /**/ transform: scaleX(1.01) scaleY(1.01) scaleZ(1.01); /*FIXES BLUR*/ --svg-duration: 1.3s; --svg-easing: cubic-bezier(0.65,0,0.35,1); } .bc-scribble-title__svg path{ fill: none; /**/ stroke: #ffc107; /*color linea*/ stroke-width: 75px; /*cambiar por tipo*/ opacity: 0; /**/ transition: stroke-dashoffset var(--svg-duration) var(--svg-easing); /*duration y ease*/ } .bc-scribble-title__active-scribble path{ opacity: 1; /**/ stroke-dashoffset: 0; /**/ } [data-active="bc-scribble-title__active-scribble"] path{ opacity: 1; /**/ stroke-dashoffset: 0; /**/ } /*Type Line*/ .bc-scribble-title__line{ stroke-dasharray: 2947.2548828125; /*js length*/ stroke-dashoffset: 2947.2548828125; /*js length*/ } /*Type stacked1*/ .bc-scribble-title__stacked{ stroke-dasharray: 3822.566162109375; /*js length*/ stroke-dashoffset: 3822.566162109375; /*js length*/ } [data-active="bc-scribble-title__active-scribble--played"] .bc-scribble-title__stacked{ opacity: 1; /**/ stroke-dashoffset: 3822.566162109375; /**/ } /*Type stacked2*/ .bc-scribble-title__stacked2{ stroke-dasharray: 3436.10302734375; /*js length*/ stroke-dashoffset: 3436.10302734375; /*js length*/ } [data-active="bc-scribble-title__active-scribble--played"] .bc-scribble-title__stacked2{ opacity: 1; /**/ stroke-dashoffset: 3436.10302734375; /**/ } /*Type stacked3*/ .bc-scribble-title__stacked3{ stroke-dasharray: 6885.6689453125; /*js length*/ stroke-dashoffset: 6885.6689453125; /*js length*/ } [data-active="bc-scribble-title__active-scribble--played"] .bc-scribble-title__stacked3{ opacity: 1; /**/ stroke-dashoffset:6885.6689453125; /**/ } /*Type scratch1*/ .bc-scribble-title__scratch1{ stroke-dasharray: 2775.923828125; /*js length*/ stroke-dashoffset: 2775.923828125; /*js length*/ } [data-active="bc-scribble-title__active-scribble--played"] .bc-scribble-title__scratch1{ opacity: 1; /**/ stroke-dashoffset: 2775.923828125; /**/ } /*Type scratch2*/ .bc-scribble-title__scratch2{ stroke-dasharray: 1729.8441162109375; /*js length*/ stroke-dashoffset: 1729.8441162109375; /*js length*/ } [data-active="bc-scribble-title__active-scribble--played"] .bc-scribble-title__scratch2{ opacity: 1; /**/ stroke-dashoffset: 1729.8441162109375; /**/ } /*Type scratch3*/ .bc-scribble-title__scratch3{ stroke-dasharray: 4528.685546875; /*js length*/ stroke-dashoffset: 4528.685546875; /*js length*/ } [data-active="bc-scribble-title__active-scribble--played"] .bc-scribble-title__scratch3{ opacity: 1; /**/ stroke-dashoffset: 4528.685546875; /**/ } /*Type signature*/ .bc-scribble-title__signature{ stroke-dasharray: 5843.31396484375; /*js length*/ stroke-dashoffset: 5843.31396484375; /*js length*/ } [data-active="bc-scribble-title__active-scribble--played"] .bc-scribble-title__signature{ opacity: 1; /**/ stroke-dashoffset: 5843.31396484375; /**/ } /*Type circle*/ .bc-scribble-title__svg-circle{ top: -25%; } .bc-scribble-title__circle{ stroke-dasharray: 6136.572265625; /*js length*/ stroke-dashoffset: 6136.572265625; /*js length*/ } [data-active="bc-scribble-title__active-scribble--played"] .bc-scribble-title__circle{ opacity: 1; /**/ stroke-dashoffset: 6136.572265625; /**/ } /* Morphing Menu (nestable) */ .bc-morphing-menu { position: relative; width: fit-content; display: flex; flex-direction: unset; --transition-duration: 0.3s; --transition-delay: 0s; --transition-ease: ease; } /*Menu item*/ .bc-morphing-menu > *{ height: fit-content; position: relative; z-index: 2; } .bc-morphing-menu__item--active{ transition: color var(--transition-duration); } /*Morphing div + Estado*/ .bc-morphing-menu__morphing-div { position: absolute; top: 0; left: 0; height: 1px; width: 1px; pointer-events: none; opacity: 0; transition: opacity var(--transition-duration); /**/ transform-origin: left top; -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 1; background-color: #D1C9FF; /*box color*/ } /*Morphing div en los items*/ .demo-morph-bg-target { position: absolute; top: 0; left: 0; --height: 100%; height: var(--height); /*box height*/ width: 100%; /*box width*/ pointer-events: none; border-radius: 100px; /*box border*/ } /*Transiciones en js*/ .morph-bg--visible { opacity: 1; } .morph-bg--has-transition { transition: var(--transition-duration); /**/ will-change: transform, border-radius, height, width; } /* OffCanvas Menu (nestable) */ .bc-offcanvas-menu{ width: fit-content; --transition-duration-backdrop: 1s; --transition-easing-backdrop: linear; } .bc-core-burguer--offcanvas-menu{ top: 0px; z-index: 3; } .bc-offcanvas-menu__items-wrapper{ position: absolute; width: fit-content; height: 100vh; padding: 50px; background: #a0e806; display: flex; pointer-events: none; z-index: 2; overflow: auto; } [data-classtype=bc-offcanvas-menu--fromtop] .bc-offcanvas-menu__items-wrapper{ clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); top: 0; } [data-classtype=bc-offcanvas-menu--fromleft] .bc-offcanvas-menu__items-wrapper{ clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); top: 0; left: 0; } [data-classtype=bc-offcanvas-menu--fromright] .bc-offcanvas-menu__items-wrapper{ clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); top: 0; right: 0; } .bc-offcanvas-menu__backdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; pointer-events: none; visibility: hidden; opacity: 0; background: rgba(2, 105, 33, 0.4); -webkit-transition: visibility 0s calc(var(--transition-duration-backdrop) * 2), opacity var(--transition-duration-backdrop) var(--transition-easing-backdrop); transition: visibility 0s calc(var(--transition-duration-backdrop) * 2), opacity var(--transition-duration-backdrop) var(--transition-easing-backdrop); } [data-open=bc-offcanvas-menu--opened] .bc-offcanvas-menu__backdrop { pointer-events: auto; visibility: visible; opacity: 1; -webkit-transition: opacity var(--transition-duration-backdrop) var(--transition-easing-backdrop); transition: opacity var(--transition-duration-backdrop) var(--transition-easing-backdrop); } .bc-offcanvas-menu[data-hide-content=true] .bc-offcanvas-menu__items-wrapper{ opacity: 0; visibility: hidden; } /* Overlay Menu */ .bc-overlay-menu{ width: fit-content; } .bc-core-burguer--overlay-menu{ position: relative; z-index: 3; } .bc-overlay-menu__items-wrapper{ position: absolute; top: 0; left: 0; height: 100vh; width: 100%; background: #a0e806; display: flex; padding: 50px; justify-content: center; flex-direction: row; column-gap: 15px; visibility: hidden; pointer-events: none; } .bc-overlay-menu__content{ position: relative; z-index: 1; width: 100vw; height: fit-content; } /* Mask Button */ a.bc-mask-button{ cursor: pointer; } .bc-mask-button{ all: unset; --bg: rgba(0,0,0); --fg: hsl(0 0% 90%); --button-bg: var(--bg); --button-fg: var(--fg); --transition-duration: 0.5s; /*duration*/ color: var(--button-fg); /*typography*/ padding: 15px 30px; /*padding*/ border-radius: 0; background: var(--button-bg); touch-action: none; position: relative; overflow: hidden; display: grid; width: fit-content; } .bc-mask-button__title{ position: relative; mix-blend-mode: difference; } .bc-mask-button__back{ will-change: transform; position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .bc-mask-button__back > span{ left: calc(var(--x, 0) * 1px); top: calc(var(--y, 0) * 1px); width: 50%; /*width de la mask*/ display: inline-block; aspect-ratio: 1; transform: translate(-50%, -50%) scale(var(--active, 0)); transition: transform; transition-duration: calc(var(--transition-duration) / 2); /*exit duration*/ background: hsl(0 0% 90%); position: absolute; pointer-events: none; overflow: hidden; --border-radius2-top: 100px; /*border-radius*/ --border-radius2-left: 100px; /*border-radius*/ --border-radius2-bottom: 100px; /*border-radius*/ --border-radius2-right: 100px; /*border-radius*/ border-radius: var(--border-radius2-top) var(--border-radius2-left) var(--border-radius2-bottom) var(--border-radius2-right); /*border de la mask*/ } .bc-mask-button:is(:hover, :focus-visible) { --active: 1.5; } .bc-mask-button:active { --active: 3; } .bc-mask-button:active .bc-mask-button__back > span { transition: transform 0.15s; } @supports (transition-timing-function: linear(0, 1)) { .bc-mask-button:is(:hover, :focus-visible) .bc-mask-button__back > span { transition-duration: var(--transition-duration); /**/ transition-timing-function: linear( 0, 0.5007 7.21%, 0.7803 12.29%, 0.8883 14.93%, 0.9724 17.63%, 1.0343 20.44%, 1.0754 23.44%, 1.0898 25.22%, 1.0984 27.11%, 1.1014 29.15%, 1.0989 31.4%, 1.0854 35.23%, 1.0196 48.86%, 1.0043 54.06%, 0.9956 59.6%, 0.9925 68.11%, 1 ); } } /* Video Sequence (nestable) */ .bc-video-sequence{ height: 600vh; /**/ } [data-no-full] .bc-video-sequence__generator{ height: 100vh; --dimensions: 500px; } [data-no-full] .bc-video-sequence__generator video{ width: var(--dimensions) !important; height: var(--dimensions) !important; min-width: var(--dimensions) !important; min-height: var(--dimensions) !important; max-width: var(--dimensions) !important; max-height: var(--dimensions) !important; } .bc-video-sequence video { display: none; } .bc-video-sequence > *{ position: relative; } .bc-video-sequence video:nth-child(1) { display: inline-block; position: absolute; z-index: 0; } /* Stripe megaMenu (nestable) */ .bc-stripe__coreburguer button{ overflow: hidden; } .bc-stripe{ position: relative; height: fit-content; width: 100%; --top-distance: 60px; --from-distance: 20px; --from-duration: 0.3s; --stripe-duration: 0.3s; --stripe-distance: 100px; --opacity-duration: 0.3s; --arrow-size: 8px; --arrow-color: white; } .bc-stripe__main-nav { /*header nav styles*/ display: flex; flex-direction: row; align-items: center; justify-content: center; } .bc-stripe [class*=brxe-]{ max-width: unset; } .bc-stripe::before { content: 'desktop'; display: none; } .bc-stripe__nav-trigger { display: none; } .bc-stripe__morph-dropdown-wrapper { position: absolute; top: var(--top-distance); /*distancia a la que se posiciona*/ will-change: transform; transform: translateY(var(--from-distance)); /*from distance*/ transition: transform var(--from-duration); } [bc-stripe__is-dropdown-visible=true] .bc-stripe__morph-dropdown-wrapper { transform: translateY(0); } .bc-stripe__dropdown[bc-stripe__active=true] { opacity: 1; visibility: visible; } .bc-stripe__dropdown-list > .bc-stripe__dropdown-wrapper { position: relative; z-index: 1; height: 100%; width: 100%; overflow: hidden; } [bc-stripe__is-dropdown-visible=true] .bc-stripe__dropdown-list { visibility: visible; transition: transform var(--stripe-duration), width var(--stripe-duration), height var(--stripe-duration); } .bc-stripe__dropdown-list { position: absolute; top: 0; left: 0; opacity: 0; visibility: hidden; transform: translateZ(0); will-change: transform, width, height; transition: visibility var(--opacity-duration), opacity var(--opacity-duration); border-radius: 15px; /*border para todos los dropdowns*/ background: white; /*background para todos los dropdowns*/ box-shadow: none; /*box-shadow para todos los dropdowns*/ } .bc-stripe__dropdown { position: absolute; left: 0; top: 0; opacity: 0; visibility: hidden; width: 100%; transition: opacity var(--opacity-duration), visibility var(--opacity-duration); } [bc-stripe__move-left=true] .bc-stripe__content { transform: translateX(calc(var(--stripe-distance) * -1)); } [bc-stripe__move-right=true] .bc-stripe__content { transform: translateX(var(--stripe-distance)); } .bc-stripe__content { display: flex; flex-direction: column; width: fit-content; transition: transform var(--stripe-duration); } .bc-stripe__bg-layer { /* morph dropdown background */ position: absolute; top: 0; left: 0; height: 1px; width: 1px; opacity: 0; transition: opacity var(--opacity-duration); transform-origin: top left; transform: translateZ(0); will-change: transform; -webkit-backface-visibility: hidden; backface-visibility: hidden; } [bc-stripe__is-dropdown-visible=true] .bc-stripe__bg-layer { opacity: 1; transition: transform var(--stripe-duration), opacity var(--opacity-duration); } [bc-stripe__is-dropdown-visible=true] .bc-stripe__dropdown-list { opacity: 1; } /*items por defecto*/ .bc-stripe__has-dropdown{ padding: 25px; } .bc-stripe__paragraph-test{ width: 400px; } .bc-stripe__paragraph-test--v2{ width: 250px; } /*mobile label*/ .bc-stripe__label{ display: none; } /*arrow*/ [data-arrow=arrow-enable] .bc-stripe__dropdown-list::before { opacity: 0; content: ''; position: absolute; bottom: 99%; left: 50%; right: auto; height: 0; width: 0; border: var(--arrow-size) solid transparent;/**/ border-bottom-color: var(--arrow-color);/**/ transform: translateX(-50%); transition: opacity var(--opacity-duration); } [data-arrow=arrow-enable][bc-stripe__is-dropdown-visible=true] .bc-stripe__dropdown-list::before { opacity: 1; } /*burguer*/ .bc-stripe__coreburguer{ display: none; } /*Responsive en el builder forzado desde el JS*/ [data-responsive=bc-stripe-responsive] .bc-stripe__dropdown-list, [data-responsive=bc-stripe-responsive] .bc-stripe__dropdown, [data-responsive=bc-stripe-responsive] .bc-stripe__morph-dropdown-wrapper { all: unset; } [data-responsive=bc-stripe-responsive]::before { /* never visible - used in JS to check mq */ content: 'mobile'; display: none; } [data-responsive=bc-stripe-responsive] .bc-stripe__main-nav { display: none; } [data-responsive=bc-stripe-responsive] .bc-stripe__content .bc-stripe__dropdown::after { clear: both; content: ""; } [data-open='bc-stripe--opened'][data-responsive=bc-stripe-responsive] .bc-stripe__morph-dropdown-wrapper { display: block; } [data-responsive=bc-stripe-responsive] .bc-stripe__morph-dropdown-wrapper { display: none; position: absolute; top: 0; left: 0; width: 100%; } [data-responsive=bc-stripe-responsive] .bc-stripe__morph-dropdown-wrapper { display: none; position: absolute; top: 0; left: 0; width: 100%; } [data-responsive=bc-stripe-responsive][data-displaybuilderresponsive="1"] .bc-stripe__morph-dropdown-wrapper { display: block; } [data-responsive=bc-stripe-responsive] .bc-stripe__label{ display: block; } /*burguer*/ [data-responsive=bc-stripe-responsive] .bc-stripe__coreburguer{ display: flex; position: absolute; z-index: 10; top: 10px; right: 10px; } [data-builder-hidden="true"]{ display: none; } /* Generatorism (nestable) */ .bc-generatorism{ width: 100%; /*dimensions*/ height: auto; /*dimensions*/ } .bc-generatorism[data-class='bc-generatorism--glassmorphism']{ border: 1px solid rgba(236, 236, 236, 0.1); /*border con nota de opacity*/ border-radius: 25%; /*border con nota de opacity*/ background: rgba(255, 255, 255, 0.1); /*background con nota de opacity*/ box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.1); /*box-shadow con nota de opacity*/ --filter: 10px; /*blur*/ -webkit-backdrop-filter: blur(var(--filter)); /*backdrop blur*/ backdrop-filter: blur(var(--filter)); /*backdrop blur*/ } .bc-generatorism[data-class='bc-generatorism--neumorphism']{ border-radius: 25%; /*border*/ --neumorphism-left-color: #fff9; /*left color*/ --neumorphism-right-color: #0001; /*right color*/ --dimensions: 20px; /*dimensions*/ box-shadow: calc(var(--dimensions) * -0.4) calc(var(--dimensions) * -0.4) var(--dimensions) 0px var(--neumorphism-left-color), calc(var(--dimensions) * -0.3) calc(var(--dimensions) * -0.3) calc(var(--dimensions) * 0.3) 0px var(--neumorphism-left-color), calc(var(--dimensions) * 0.4) calc(var(--dimensions) * 0.4) var(--dimensions) 0px var(--neumorphism-right-color), calc(var(--dimensions) * 0.25) calc(var(--dimensions) * 0.25) calc(var(--dimensions) * 0.3) 0px var(--neumorphism-right-color), inset 0px 0px 0px 0px var(--neumorphism-left-color), inset 0px 0px 0px 0px var(--neumorphism-right-color), inset 0px 0px 0px 0px var(--neumorphism-left-color), inset 0px 0px 0px 0px var(--neumorphism-right-color); } .bc-generatorism[data-class='bc-generatorism--neumorphism-v2']{ border-radius: 25%; /*border*/ --neumorphism-v2-left-color: #0001; /*left color*/ --neumorphism-v2-right-color: #fff9; /*right color*/ --dimensions-v2: 20px; /*dimensions*/ box-shadow: 0px 0px 0px 0px var(--neumorphism-v2-right-color), 0px 0px 0px 0px var(--neumorphism-v2-right-color), 0px 0px 0px 0px var(--neumorphism-v2-left-color), 0px 0px 0px 0px var(--neumorphism-v2-left-color), inset calc(var(--dimensions-v2) * -0.4) calc(var(--dimensions-v2) * -0.4) var(--dimensions-v2) 0px var(--neumorphism-v2-right-color), inset calc(var(--dimensions-v2) * -0.25) calc(var(--dimensions-v2) * -0.25) calc(var(--dimensions-v2) * 0.3) 0px var(--neumorphism-v2-right-color), inset calc(var(--dimensions-v2) * 0.4) calc(var(--dimensions-v2) * 0.4) var(--dimensions-v2) 0px var(--neumorphism-v2-left-color), inset calc(var(--dimensions-v2) * 0.25) calc(var(--dimensions-v2) * 0.25) calc(var(--dimensions-v2) * 0.3) 0px var(--neumorphism-v2-left-color); } .bc-generatorism[data-class='bc-generatorism--neobrutalism']{ border-radius: 25%; /*border*/ background: #00ff9f; /*background*/ --thickness: 10px; /*thickness*/ --thickness-color: #000; /*thickness color*/ box-shadow: var(--thickness) var(--thickness) var(--thickness-color); /*box-shadow*/ border: solid var(--thickness) var(--thickness-color); } /* Image Hotspots (nestable) */ .bc-image-hotspots { position: relative; width: fit-content; } .bc-image-hotspots__img{ width: 100%; height: 100%; } .bc-image-hotspots__hotspot { position: absolute; cursor: pointer; outline: unset; left: 20%; /*position*/ top: 20%; /*position*/ min-width: 20px; /*dimensions*/ min-height: 20px; /*dimensions*/ width: fit-content; /*dimensions*/ height: fit-content; /*dimensions*/ background: #c23616; /*background*/ border-radius: 15px; /*border*/ padding: 5px 10px; /*padding*/ --wave-duration: 1s; --wave-intensity: 10px; --wave-color: #c23616; --reveal-duration: 0.4s; --y-distance: 100%; --x-distance: 100%; animation: wave var(--wave-duration) infinite; } @keyframes wave { from { box-shadow: 0 0 0 0 var(--wave-color); } to { box-shadow: 0 0 0 var(--wave-intensity) #c2351600; } } .bc-image-hotspots__tooltip { /*tooltip*/ all: unset; width: max-content; position: absolute; background: white; /*background*/ padding: 5px 10px; /*padding*/ border-radius: 3px; /*border*/ transition: opacity var(--reveal-duration); display: block; opacity: 0; pointer-events: none; } .bc-image-hotspots__hotspot[data-arrow=top] .bc-image-hotspots__tooltip{ /*top position*/ bottom: var(--y-distance); left: 50%; transform: translateX(-50%); } .bc-image-hotspots__hotspot[data-arrow=bottom] .bc-image-hotspots__tooltip{ /*bottom position*/ top: var(--y-distance); left: 50%; transform: translateX(-50%); } .bc-image-hotspots__hotspot[data-arrow=left] .bc-image-hotspots__tooltip{ /*left position*/ right: var(--x-distance); top: 50%; transform: translateY(-50%); } .bc-image-hotspots__hotspot[data-arrow=right] .bc-image-hotspots__tooltip{ /*right position*/ left: var(--x-distance); top: 50%; transform: translateY(-50%); } .bc-image-hotspots__tooltip::after { /*arrow tooltip*/ all: unset; content: ''; --bordercolor: white; border-color: transparent transparent var(--bordercolor); border-width: 0 8px 6px; border-style: solid; position: absolute; transition: opacity var(--reveal-duration); display: block; opacity: 0; pointer-events: none; } .bc-image-hotspots__hotspot[data-arrow=top] .bc-image-hotspots__tooltip::after { /*top position*/ bottom: -6px; left: 50%; transform: translateX(-50%) rotate(180deg); } .bc-image-hotspots__hotspot[data-arrow=bottom] .bc-image-hotspots__tooltip::after { /*bottom position*/ top: -6px; left: 50%; transform: translateX(-50%); } .bc-image-hotspots__hotspot[data-arrow=left] .bc-image-hotspots__tooltip::after { /*left position*/ right: -10px; top: 50%; transform: translateY(-50%) rotate(90deg); } .bc-image-hotspots__hotspot[data-arrow=right] .bc-image-hotspots__tooltip::after { /*right position*/ left: -10px; top: 50%; transform: translateY(-50%) rotate(-90deg); } .bc-image-hotspots__hotspot.bc-image-hotspots__hotspot--focused .bc-image-hotspots__tooltip, .bc-image-hotspots__hotspot.bc-image-hotspots__hotspot--focused .bc-image-hotspots__tooltip::after{ opacity: 1; pointer-events: all; } .bc-image-hotspots__hotspot[data-hotspot=triggered] .bc-image-hotspots__tooltip, .bc-image-hotspots__hotspot[data-hotspot=triggered] .bc-image-hotspots__tooltip::after{ opacity: 1; pointer-events: all; } .bc-image-hotspots__hotspot[data-bc-hide]{ opacity: 0; } /* Prism Button */ .bc-prism-button { white-space: nowrap; z-index: 1; display: block; --padding-prism-top: 10px; /**/ --padding-prism-bottom: 10px; /**/ --padding-prism-left: 10px; /**/ --padding-prism-right: 10px; /**/ --padding-prism-top-bottom: calc(var(--padding-prism-top) + var(--padding-prism-bottom)); --padding-prism-top-bottom-aux: calc(var(--padding-prism-top-bottom) / -2); line-height: 1; --font-size: 27px; /*font-size*/ font-size: var(--font-size); width: fit-content; height: calc(var(--padding-prism-top) + var(--padding-prism-bottom) + var(--font-size)); --perspective: 1000px; /**/ perspective: var(--perspective); -webkit-perspective: var(--perspective); --transition-duration: 0.5s; /**/ --ease: cubic-bezier(0.645, 0.045, 0.355, 1); /**/ } .bc-prism-button .bc-prism-button__wrapper { pointer-events: none; display: grid; position: relative; width: fit-content; height: 100%; transform-origin: 50% 50% calc(var(--padding-prism-top-bottom-aux) + var(--font-size) / -2); transform-style: preserve-3d; will-change: transform; transition: transform var(--transition-duration) var(--ease); } .bc-prism-button[data-from-top]:hover .bc-prism-button__wrapper { transform: rotateX(-90deg); } .bc-prism-button[data-from-bottom]:hover .bc-prism-button__wrapper { transform: rotateX(90deg); } .bc-prism-button .bc-prism-button__front-text { width: 100%; padding-top: var(--padding-prism-top); padding-bottom: var(--padding-prism-bottom); padding-left: var(--padding-prism-left); padding-right: var(--padding-prism-right); -webkit-backface-visibility: hidden; backface-visibility: hidden; position: relative; z-index: 2; text-align: center; /*typography sin font-size*/ color: #fff; /*typography sin font-size*/ background: #000; /*background*/ } .bc-prism-button .bc-prism-button__back-text { width: 100%; padding-top: var(--padding-prism-top); padding-bottom: var(--padding-prism-bottom); padding-left: var(--padding-prism-left); padding-right: var(--padding-prism-right); -webkit-backface-visibility: hidden; backface-visibility: hidden; position: relative; left: 0; text-align: center; /*typography sin font-size*/ color: #499103; /*typography sin font-size*/ background: #fff; /*background*/ } .bc-prism-button[data-from-top] .bc-prism-button__back-text { bottom: 200%; transform-origin: center bottom; transform: rotateX(90deg); } .bc-prism-button[data-from-bottom] .bc-prism-button__back-text { top: 0%; transform-origin: center top; transform: rotateX(-90deg); } /* Core Tabs (nestable) */ .bc-core-tabs[data-to-hide]{ opacity: 0; } .bc-core-tabs{ --animation-duration: 0.4s; --animation-ease: ease; --opacity-from: 0; --translate-x-from: 0; --translate-y-from: 0; } .bc-core-tabs__tab-content[data-hide] { display: none; } .bc-core-tabs__tab-content[data-show] { opacity: var(--opacity-from); transform: translate(var(--translate-x-from), var(--translate-y-from)); animation: coreTabsAnimationIn var(--animation-duration) var(--animation-ease) forwards; } @keyframes coreTabsAnimationIn { 100% { opacity: 1; transform: translateX(0px); } } /* 3D Swap Title */ .bc-3dswap-title__anchor{ display: block; width: fit-content; height: fit-content; } [bc-3dswap-title-hide]{ opacity: 0; } .bc-3dswap-title{ position: relative; width: fit-content; height: fit-content; display: block; line-height: 0.9; } .bc-3dswap-title__inner-wrapper{ position: relative; } .bc-3dswap-title .bc-3dswap-title__title { position: relative; z-index: 1; margin: 0; } .bc-3dswap-title .bc-3dswap-title__title--back { position: absolute; left: 0%; top: 0%; right: auto; bottom: auto; } .bc-3dswap-title .bc-3dswap-title__title--front .char { transform-origin: 50% 0%; } .bc-3dswap-title .bc-3dswap-title__title--back .char { transform-origin: 50% 100%; } /* Neumorphic Button */ .bc-neumorphic-button { display: block; width: fit-content; height: fit-content; background-color: transparent; white-space: wrap; --left-color: rgba(180,180,180,.7); /**/ --right-color: rgba(255,255,255,1); /**/ --spread: 2px; /**/ box-shadow: var(--spread) calc(var(--spread) * 0.5) var(--spread) var(--left-color),inset calc(var(--spread) * 1.5) var(--spread) calc(var(--spread) * 2.5) var(--right-color); border-radius: 100px; /*border*/ font-size: 16px; /*typography*/ padding: 8px 15px; /*padding*/ --duration: 0.3s; /**/ --ease: ease-in-out; /**/ transition: all var(--duration) var(--ease); } .bc-neumorphic-button:hover, .bc-neumorphic-button:focus { box-shadow: calc(var(--spread) * -1) calc(var(--spread) * -0.5) var(--spread) var(--left-color),inset calc(var(--spread) * -1.5) calc(var(--spread) * -1) calc(var(--spread) * 1.5) var(--right-color); } /* Blended Title */ .bc-blended-title__anchor{ display: block; width: fit-content; height: fit-content; } [bc-blended-title-hide]{ opacity: 0; } .bc-blended-title{ display: block; width: fit-content; height: fit-content; } .bc-blended-title__inner-wrapper{ position: relative; overflow: hidden; line-height: 0.9; /*typography*/ height: fit-content; width: fit-content; display: block; } .bc-blended-title__title{ position: relative; z-index: 1; margin: 0; } .bc-blended-title__title--back{ position: absolute; left: 0%; top: 0%; right: auto; bottom: auto; } /* Decode Hover */ .bc-decode-hover__anchor{ display: block; width: fit-content; height: fit-content; } .bc-decode-hover{ display: block; width: fit-content; height: fit-content; } /* Decode Reveal */ .bc-decode-reveal__anchor{ display: block; width: fit-content; height: fit-content; } .bc-decode-reveal, .bc-decode-reveal__element{ display: block; width: fit-content; height: fit-content; } .bc-decode-reveal__element[data-hide]{ opacity: 0; } /* Unfold Reveal */ .bc-unfold-reveal__anchor{ display: block; width: fit-content; height: fit-content; } .bc-unfold-reveal, .bc-unfold-reveal__element{ display: block; width: fit-content; height: fit-content; } .bc-unfold-reveal__element[data-hide]{ opacity: 0; } /* Spotlight (nestable) */ .bc-spotlight{ position: relative; display: block; /*block settings*/ height: 100vh; /**/ width: 100%; /**/ --stripes: repeating-linear-gradient( 100deg, #fff 0%, #fff 7%, transparent 10%, transparent 12%, #fff 16% ); --stripesDark: repeating-linear-gradient( 100deg, #000 0%, #000 7%, transparent 10%, transparent 12%, #000 16% ); --rainbow: repeating-linear-gradient( 100deg, #60a5fa 10%, #e879f9 15%, #60a5fa 20%, #5eead4 25%, #60a5fa 30% ); --speed: 60s; --easing: linear; } .bc-spotlight__wrapper{ position: absolute; inset: 0px; overflow: hidden; } .bc-spotlight__spotlight { position: absolute; inset: -10px; opacity: 0.5; /**/ height: 100%; /**/ background-size: 300%, 200%; background-position: 50% 50%, 50% 50%; mask-image: radial-gradient(ellipse at 100% 0%, black 40%, transparent 70%); pointer-events: none; will-change: transform, opacity; /* Optimización */ } .bricks-draggable-root .bc-spotlight[data-builderedit="1"] .bc-spotlight__spotlight::after{ animation: none !important; } .bc-spotlight__spotlight::after { content: ""; position: absolute; inset: 0; background-size: 200%, 100%; animation: spotlight var(--speed) var(--easing) infinite; /*duration y easing*/ background-attachment: fixed; mix-blend-mode: difference; } [data-light] .bc-spotlight__spotlight{ background-image: var(--stripes), var(--rainbow); filter: blur(5px) invert(100%); /* Reducido el blur */ } [data-dark] .bc-spotlight__spotlight{ background-image: var(--stripesDark), var(--rainbow); filter: blur(5px) opacity(50%) saturate(150%); /* Reducido el blur y saturación */ } [data-light] .bc-spotlight__spotlight::after{ background-image: var(--stripes), var(--rainbow); } [data-dark] .bc-spotlight__spotlight::after{ background-image: var(--stripesDark), var(--rainbow); } @keyframes spotlight { from { background-position: 50% 50%, 50% 50%; } to { background-position: 250% 50%, 250% 50%; /* Reducida la distancia de movimiento */ } } /* Mask Hover (nestable) */ .bc-mask-hover{ position: relative; --easing: cubic-bezier(.165,.84,.44,1); --duration: 0.6s; } .bc-mask-hover__title { font-size: 36px; line-height: 1.3; } .bc-mask-hover__title--2{ font-size: 36px; line-height: 1.3; } .bc-mask-hover__content-wrapper{ position: absolute; left: 0; transition: clip-path var(--duration) var(--easing), -webkit-clip-path var(--duration) var(--easing); background: #eb5939; width: 100%; height: 100%; display: flex; justify-content: center; z-index: 2; } .bc-mask-hover[data-type="fromTop"] .bc-mask-hover__content-wrapper{ top: 0; -webkit-clip-path: inset(0 0 100% 0); clip-path: inset(0 0 100% 0); } .bc-mask-hover[data-type="fromCenter"] .bc-mask-hover__content-wrapper{ top: 50%; -webkit-clip-path: inset(50% 0 50% 0); clip-path: inset(50% 0 50% 0); transform: translateY(-50%); } .bc-mask-hover[data-type="fromBottom"] .bc-mask-hover__content-wrapper{ top: 0; -webkit-clip-path: inset(100% 0 0 0); clip-path: inset(100% 0 0 0); } .bc-mask-hover:hover .bc-mask-hover__content-wrapper{ -webkit-clip-path: inset(0); clip-path: inset(0); } .brx-body.iframe .bc-mask-hover[data-openatbuilder="1"] .bc-mask-hover__content-wrapper{ -webkit-clip-path: inset(0); clip-path: inset(0); } /* Divider */ .bc-divider{ width: 100%; /**/ } .bc-divider__motion{ --height: 1px; border-top: var(--height) solid; width: 0; border-color: black; } /* Flipbox */ .bc-flipbox[data-bc-hide]{ opacity: 0; } .bc-flipbox{ width: 300px; /*dimensiones*/ --height: 300px; /*dimensiones*/ height: var(--height); perspective: 800px; /*intensidad de la perspectiva*/ } .bc-flipbox__wrapper{ position: relative; width: 100%; height: 100%; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; border-radius: 30px; /*borde común*/ /*box shadow*/ --trans-duration: 1.3s; --trans-easing: cubic-bezier(0.175, 0.885, 0.32, 1.275); -webkit-transition: -webkit-transform var(--trans-duration) var(--trans-easing); /*duration*/ /*easing*/ transition: transform var(--trans-duration) var(--trans-easing); /*duration*/ /*easing*/ } .bc-flipbox__flip--front{ position: relative; perspective: 1000px; } .bc-flipbox__flip--back{ position: absolute; top: 0; left: 0; } .bc-flipbox__flip{ width: 100%; height: 100%; backface-visibility: hidden; -webkit-font-smoothing: antialiased; border-radius: 30px; /*borde común*/ background: #fff; /*background*/ } .bc-flipbox__wrapper[data-x] .bc-flipbox__flip--back{ -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } .bc-flipbox__wrapper[data-x][data-flipped]{ -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } .bc-flipbox__wrapper[data-x-reverse] .bc-flipbox__flip--back{ -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); } .bc-flipbox__wrapper[data-x-reverse][data-flipped]{ -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); } .bc-flipbox__wrapper[data-y] .bc-flipbox__flip--back{ -webkit-transform: rotateX(180deg); transform: rotateX(180deg); } .bc-flipbox__wrapper[data-y][data-flipped]{ -webkit-transform: rotateX(180deg); transform: rotateX(180deg); } .bc-flipbox__wrapper[data-y-reverse] .bc-flipbox__flip--back{ -webkit-transform: rotateX(-180deg); transform: rotateX(-180deg); } .bc-flipbox__wrapper[data-y-reverse][data-flipped]{ -webkit-transform: rotateX(-180deg); transform: rotateX(-180deg); } /* Exchange Title (nestable) */ .bc-exchange-title{ overflow: hidden; position: relative; display: flex; flex-direction: column; width: 100%; --duration: 0.2s; --easing: ease-in-out; } .bc-exchange-title__wrapper{ position: relative; display: flex; flex-direction: column; min-width: 100%; /*typography general*/ } /*Para el primer item generado por el builder*/ .bc-exchange-title:not(.brx-draggable) .bc-exchange-title__wrapper > *:not(:first-child) { position: absolute; top: 100%; width: 100%; } .bc-exchange-title.brx-draggable .bc-exchange-title__wrapper > *:not(:first-child):not(:nth-child(2)) { position: absolute; top: 100%; width: 100%; } /*don't return to top animation*/ .bc-exchange-title__wrapper[data-returntotop="2"] > *{ position: absolute; top: 100%; width: 100%; } .bc-exchange-title__wrapper[data-returntotop="2"] > *[data-show] { transform: translateY(-100%); transition: var(--duration) transform var(--easing); } .bc-exchange-title__wrapper[data-returntotop="2"] > *[data-up] { transform: translateY(-200%); transition: var(--duration) transform var(--easing); } /* Expanding Menu (nestable) */ .bc-expanding-menu{ width: 100%; display: flex; } .bc-core-burguer--expanding-menu { position: relative; z-index: 2; } .bc-expanding-menu__expanding { display: block; position: absolute; width: fit-content; height: fit-content; padding: 50px; background: white; transform: scale(0); } [data-type="bc-expanding-menu--fromtopleft"] .bc-expanding-menu__expanding{ transform-origin: top left; } [data-type="bc-expanding-menu--fromtopright"] .bc-expanding-menu__expanding{ transform-origin: top right; } [data-type="bc-expanding-menu--frombottomleft"] .bc-expanding-menu__expanding{ transform-origin: bottom left; } [data-type="bc-expanding-menu--frombottomright"] .bc-expanding-menu__expanding{ transform-origin: bottom right; } [data-fade="1"] .bc-expanding-menu__expanding{ opacity: 0 } [data-aux-scale="1"] .bc-expanding-menu__expanding.bricks-draggable-item{ transform: scale(0) !important; } /* Simple Menu (nestable) */ .bc-simple-menu{ position: relative; width: 100%; } .bc-core-burguer--simple-menu { position: relative; z-index: 2; } .bc-simple-menu__content { display: block; position: absolute; pointer-events: none; left: 0; width: fit-content; height: fit-content; background: white; opacity: 0; } [data-aux-fade="1"] .bc-simple-menu__content.bricks-draggable-item{ opacity: 0 !important; } /* Bubbles (nestable) */ .bc-bubbles { width: 100%; /**/ height: 100vh; /**/ overflow: hidden; background: rgb(108, 0, 162); /**/ } .bc-bubbles svg{ display: none; } .bc-bubbles__content { position: relative; z-index: 1; float: left; } .bc-bubbles__wrapper { --blur: 40px; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); width: 100%; height: 100%; } .bc-bubbles__bubble{ position: absolute; } .bc-bubbles__bubble{ filter: blur(var(--blur)); /*blur de los bubbles*/ -webkit-filter: blur(var(--blur)) ; /*blur de los bubbles*/ } .bricks-draggable-root .bc-bubbles[data-builderedit="1"] .bc-bubbles__bubble{ animation: none !important; } .bc-bubbles__bubble--1 { --inner-background: rgba(18, 113, 255, 0.8); background: radial-gradient(circle at center, var(--inner-background) 0, rgba(18, 113, 255, 0) 50%) no-repeat; /*background o gradient*/ --blending: hard-light; mix-blend-mode: var(--blending); /*blend mode*/ --circle-size: 80%; width: var(--circle-size); /*dimensions*/ height: var(--circle-size); /*dimensions*/ top: calc(50% - var(--circle-size) / 2); /*top*/ left: calc(50% - var(--circle-size) / 2); /*left*/ --speed: 30s; --easing: ease; transform-origin: center center; animation: moveVertical var(--speed) var(--easing) infinite; } .bc-bubbles__bubble--2 { --inner-background: rgba(221, 74, 255, 0.8); background: radial-gradient(circle at center, var(--inner-background) 0, rgba(221, 74, 255, 0) 50%) no-repeat; /*background o gradient*/ --blending: hard-light; mix-blend-mode: var(--blending); /*blend mode*/ --circle-size: 80%; width: var(--circle-size); /*dimensions*/ height: var(--circle-size); /*dimensions*/ top: calc(50% - var(--circle-size) / 2); /*top*/ left: calc(50% - var(--circle-size) / 2); /*left*/ --speed: 20s; transform-origin: calc(50% - 400px); animation: moveInCircle var(--speed) reverse infinite; } .bc-bubbles__bubble--3 { --inner-background: rgba(100, 220, 255, 0.8); background: radial-gradient(circle at center, var(--inner-background) 0, rgba(100, 220, 255, 0) 50%) no-repeat; /*background o gradient*/ --blending: hard-light; mix-blend-mode: var(--blending); /*blend mode*/ --circle-size: 80%; width: var(--circle-size); /*dimensions*/ height: var(--circle-size); /*dimensions*/ top: calc(50% - var(--circle-size) / 2 + 200px); /*top*/ left: calc(50% - var(--circle-size) / 2 - 500px); /*left*/ --speed: 40s; transform-origin: calc(50% + 400px); animation: moveInCircle var(--speed) linear infinite; } .bc-bubbles__bubble--4 { --inner-background: rgba(200, 50, 50, 0.8); background: radial-gradient(circle at center, var(--inner-background) 0, rgba(200, 50, 50, 0) 50%) no-repeat; /*background o gradient*/ --blending: hard-light; mix-blend-mode: var(--blending); /*blend mode*/ --circle-size: 80%; width: var(--circle-size); /*dimensions*/ height: var(--circle-size); /*dimensions*/ top: calc(50% - var(--circle-size) / 2); /*top*/ left: calc(50% - var(--circle-size) / 2); /*left*/ opacity: 0.7; /*opacity*/ --speed: 40s; transform-origin: center center; animation: moveHorizontal var(--speed) ease infinite; } .bc-bubbles__bubble--5 { --inner-background: rgba(180, 180, 50, 0.8); background: radial-gradient(circle at center, var(--inner-background) 0, rgba(180, 180, 50, 0) 50%) no-repeat; /*background o gradient*/ --blending: hard-light; mix-blend-mode: var(--blending); /*blend mode*/ --circle-size: 80%; width: calc(var(--circle-size) * 2); /*dimensions*/ height: calc(var(--circle-size) * 2); /*dimensions*/ top: calc(50% - var(--circle-size)); /*top*/ left: calc(50% - var(--circle-size)); /*left*/ --speed: 20s; transform-origin: calc(50% - 800px) calc(50% + 200px); animation: moveInCircle var(--speed) ease infinite; } .bc-bubbles__bubble[data-type="vertical"]{ --speed: 30s; --easing: ease; transform-origin: center center; animation: moveVertical var(--speed) var(--easing) infinite; } .bc-bubbles__bubble[data-type="horizontal"]{ --speed: 40s; transform-origin: center center; animation: moveHorizontal var(--speed) ease infinite; } .bc-bubbles__bubble[data-type="incircle1"]{ --speed: 20s; transform-origin: calc(50% - 400px); animation: moveInCircle var(--speed) reverse infinite; } .bc-bubbles__bubble[data-type="incircle2"]{ --speed: 40s; transform-origin: calc(50% + 400px); animation: moveInCircle var(--speed) linear infinite; } .bc-bubbles__bubble[data-type="incircle3"]{ --speed: 20s; transform-origin: calc(50% - 800px) calc(50% + 200px); animation: moveInCircle var(--speed) ease infinite; } [data-bubble-cursor="1"] .bc-bubbles__bubble--cursor { --inner-background: rgba(140, 100, 255, 0.8); background: radial-gradient(circle at center, var(--inner-background) 0, rgba(140, 100, 255, 0) 50%) no-repeat; /*background o gradient*/ --blending: hard-light; mix-blend-mode: var(--blending); /*blend mode*/ --dimensions: 100%; width: var(--dimensions); /*dimensions*/ height: var(--dimensions); /*dimensions*/ top: calc(var(--dimensions) / -2); /*dimensions / -2*/ left: calc(var(--dimensions) / -2); /*dimensions / -2*/ opacity: 0.7; /*opacity*/ } @keyframes moveInCircle { 0% { transform: rotate(0deg); } 50% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } } @keyframes moveVertical { 0% { transform: translateY(-50%); } 50% { transform: translateY(50%); } 100% { transform: translateY(-50%); } } @keyframes moveHorizontal { 0% { transform: translateX(-50%) translateY(-10%); } 50% { transform: translateX(50%) translateY(10%); } 100% { transform: translateX(-50%) translateY(-10%); } } /* Observer */ .bc-observer__eg-heading{ padding: 200px; background-color: #3754F5; } /* Drawer (nestable) */ .bc-drawer[data-edit], .bc-drawer[data-edit] *{ pointer-events: none !important; } .bc-drawer__overlay{ --overlay-duration: .4s; --overlay-easing: cubic-bezier(.32,.72,0,1); transition: opacity var(--overlay-duration) var(--overlay-easing); /*duration y ease del opacity de overlay*/ opacity: 0; pointer-events: none; position: fixed; top: 0; left: 0; z-index: 99998; /*zIndex*/ width: 100vw; height: 100vh; background-color: rgba(0,0,0,.8); /*background*/ } .bc-drawer__overlay[data-open]{ opacity: 1; pointer-events: all; } .bc-drawer__drawer{ --drawer-duration: .4s; --drawer-easing: cubic-bezier(.32,.72,0,1); transition: transform var(--drawer-duration) var(--drawer-easing); /*duration y ease del transform de drawer*/ position: fixed; transform: translateY(100%); bottom: 0; left: 0; z-index: 99999; /*zIndex*/ width: 100%; height: 500px; display: flex; /*display*/ flex-direction: column; align-items: center; padding: 15px 150px; /*padding, background, shadow, border*/ background-color: hsl(240 10% 3.9%); border: 1px solid #27272A; border-top-left-radius: 10px; border-top-right-radius: 10px; /*remove text selection*/ -webkit-user-select: none; -ms-user-select: none; user-select: none; } .bc-drawer__drawer[data-close]{ transform: translateY(100%) !important; } .bc-drawer__drawer[data-open]{ transform: translateY(0%); } .bc-drawer__drag{ /*elemento en nestable*/ width: 100px; height: 8px; border-radius: 100px; background-color: hsl(240 3.7% 15.9%); } /* Multi OffCanvas (nestable) */ .bc-multi-offcanvas-menu{ width: fit-content; --transition-duration-backdrop: 1s; --transition-easing-backdrop: linear; --slide-duration: 1s; --slide-easing: cubic-bezier(.33,1,.68,1); --width: 50vw; /*width items wrapper*/ } .bc-core-burguer--multi-offcanvas-menu{ top: 0px; z-index: 3; } [data-classtype=bc-multi-offcanvas-menu--fromright] .bc-multi-offcanvas-menu__items-wrapper{ -webkit-transform: translateX(var(--width)); transform: translateX(var(--width)); top: 0; right: 0; } [data-classtype=bc-multi-offcanvas-menu--fromleft] .bc-multi-offcanvas-menu__items-wrapper{ -webkit-transform: translateX(calc(var(--width)*-1)); transform: translateX(calc(var(--width)*-1)); top: 0; left: 0; } .bc-multi-offcanvas-menu__backdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; pointer-events: none; visibility: hidden; opacity: 0; background: rgba(2, 105, 33, 0.4); -webkit-transition: visibility 0s calc(var(--transition-duration-backdrop) * 2), opacity var(--transition-duration-backdrop) var(--transition-easing-backdrop); transition: visibility 0s calc(var(--transition-duration-backdrop) * 2), opacity var(--transition-duration-backdrop) var(--transition-easing-backdrop); } [data-open=bc-multi-offcanvas-menu--opened] .bc-multi-offcanvas-menu__backdrop { pointer-events: auto; visibility: visible; opacity: 1; -webkit-transition: opacity var(--transition-duration-backdrop) var(--transition-easing-backdrop); transition: opacity var(--transition-duration-backdrop) var(--transition-easing-backdrop); } /*añadir accesibilidad*/ .bc-multi-offcanvas-menu__items-wrapper{ position: fixed; top: 0; -webkit-transition: -webkit-transform var(--slide-duration) var(--slide-easing); /*duration*/ /*easing*/ transition: transform var(--slide-duration) var(--slide-easing); /*duration*/ /*easing*/ height: 100vh; /*height*/ width: var(--width); /*width*/ padding: 50px; /*padding*/ --background: #a0e806; background: var(--background);/*background*/ /*border*/ /*boxshadow*/ display: flex; z-index: 190; pointer-events: none; } [data-classtype=bc-multi-offcanvas-menu--fromright] .bc-multi-offcanvas-menu__items-wrapper{ right: 0; } [data-classtype=bc-multi-offcanvas-menu--fromleft] .bc-multi-offcanvas-menu__items-wrapper{ left: 0; } [data-open=bc-multi-offcanvas-menu--opened] .bc-multi-offcanvas-menu__items-wrapper{ -webkit-transform: translateX(0); transform: translateX(0); } [data-classtype=bc-multi-offcanvas-menu--fromright] .bc-multi-offcanvas-menu__items-wrapper[data-open]{ -webkit-transform: translate(-100%, 0px) !important; transform: translate(-100%, 0px) !important; } [data-classtype=bc-multi-offcanvas-menu--fromleft] .bc-multi-offcanvas-menu__items-wrapper[data-open]{ -webkit-transform: translate(100%, 0px) !important; transform: translate(100%, 0px) !important; } .bc-multi-offcanvas-menu__items-wrapper::after{ position: fixed; top: 0; background: var(--background); /*mismo background que en items-wrapper*/ content: ""; height: 100%; width: 100%; } [data-classtype=bc-multi-offcanvas-menu--fromright] .bc-multi-offcanvas-menu__items-wrapper::after{ right: calc(-100% + 1px); } [data-classtype=bc-multi-offcanvas-menu--fromleft] .bc-multi-offcanvas-menu__items-wrapper::after{ left: calc(-100% + 1px); } .bc-multi-offcanvas-menu__subcanvas{ --subcanvas-duration: 1s; --subcanvas-easing: cubic-bezier(.33,1,.68,1); position: fixed; z-index: 2; top: 0; padding: 50px;/*padding*/ background: red; /*background*/ /*border*/ /*boxshadow*/ height: 100vh; /*height*/ width: 50vw; /*width*/ -webkit-transition: right var(--subcanvas-duration) var(--subcanvas-easing), left var(--subcanvas-duration) var(--subcanvas-easing); /*duration*/ /*easing*/ transition: right var(--subcanvas-duration) var(--subcanvas-easing), left var(--subcanvas-duration) var(--subcanvas-easing); /*duration*/ /*easing*/ } [data-classtype=bc-multi-offcanvas-menu--fromright] .bc-multi-offcanvas-menu__subcanvas{ right: -200%; } [data-classtype=bc-multi-offcanvas-menu--fromright] .bc-multi-offcanvas-menu__subcanvas[data-open]{ right: -100%; } [data-classtype=bc-multi-offcanvas-menu--fromleft] .bc-multi-offcanvas-menu__subcanvas{ left: -200%; } [data-classtype=bc-multi-offcanvas-menu--fromleft] .bc-multi-offcanvas-menu__subcanvas[data-open]{ left: -100%; } /* Codepen */ .bc-codepen{ width: 100%; overflow: hidden; } .bc-codepen[bc-codepen--to-hide]{ opacity: 0; } .bc-codepen__pen{ height: 600px; width: 100%; display: flex; align-items: center; justify-content: center; border: 20px solid; margin: 1em 0; padding: 1em; } /* Glowing Card */ [data-hide="bc-glowing-card--hide"]{ opacity: 0; } .bc-glowing-card[data-disable-touch-devices] { --base: 80; /*base hue*/ --spread: 500; /*hue spread*/ --saturation: 100; /*saturation*/ --lightness: 50; /*lightness*/ --outer: 0; /*outer glow via checkbox*/ --size: 200; /*spotlight size*/ --cardblur: 5; /*backdrop blur*/ --backdrop: hsl(0 0% 60% / 0.12); /*border y backdrop color*/ --bg-spot-opacity: 0.1; /*backdrop spot alpha*/ --backup-border: var(--backdrop); --get-border-radius: 14; /*border radius*/ --border-radius: calc(var(--get-border-radius) * 1px); --border-width: 3; /*border width*/ --border-spot-opacity: 1; /*border spot alpha*/ --border-light-opacity: 1; /*border light alpha*/ backdrop-filter: blur(calc(var(--cardblur, 5) * 1px)); border-radius: var(--border-radius); width: 300px; /*width*/ height: 300px; /*height*/ padding: 15px; /*padding*/ box-shadow: 0 15px 30px -15px black; /*box shadow*/ } /* Glow specific styles */ .bc-glowing-card[data-glow] { --border-size: calc(var(--border-width, 2) * 1px); --spotlight-size: calc(var(--size, 150) * 1px); --hue: calc(var(--base) + (var(--xp, 0) * var(--spread, 0))); border: var(--border-size) solid var(--backup-border); position: relative; } .bc-glowing-card[data-glow]::before, .bc-glowing-card[data-glow]::after { pointer-events: none; content: ""; position: absolute; inset: calc(var(--border-size) * -1); border: var(--border-size) solid transparent; border-radius: var(--border-radius); background-attachment: fixed; background-size: calc(100% + (2 * var(--border-size))) calc(100% + (2 * var(--border-size))); background-repeat: no-repeat; background-position: 50% 50%; mask: linear-gradient(transparent, transparent), linear-gradient(white, white); mask-clip: padding-box, border-box; mask-composite: intersect; will-change: opacity; } /* This is the emphasis light */ .bc-glowing-card[data-glow]::before { background-image: radial-gradient( calc(var(--spotlight-size) * 0.75) calc(var(--spotlight-size) * 0.75) at calc(var(--x, 0) * 1px) calc(var(--y, 0) * 1px), hsl(var(--hue, 210) calc(var(--saturation, 100) * 1%) calc(var(--lightness, 50) * 1%) / var(--border-spot-opacity, 1)), transparent 100% ); filter: brightness(2); } /* This is the spotlight */ .bc-glowing-card[data-glow]::after { background-image: radial-gradient( calc(var(--spotlight-size) * 0.5) calc(var(--spotlight-size) * 0.5) at calc(var(--x, 0) * 1px) calc(var(--y, 0) * 1px), hsl(0 100% 100% / var(--border-light-opacity, 1)), transparent 100% ); } .bc-glowing-card[data-glow] [data-glow] { position: absolute; inset: 0; will-change: filter; opacity: var(--outer, 1); } .bc-glowing-card[data-glow] > [data-glow] { border-radius: var(--border-radius); border-width: calc(var(--border-size) * 20); filter: blur(calc(var(--border-size) * 10)); background: none; pointer-events: none; } .bc-glowing-card[data-glow] > [data-glow]::before { inset: -10px; border-width: 10px; } .bc-glowing-card[data-glow] [data-glow] { border: none; } .bc-glowing-card[data-glow] :is(a, button) { border-radius: var(--border-radius); border: var(--border-size) solid transparent; } .bc-glowing-card[data-glow] :is(a, button) [data-glow] { background: none; } .bc-glowing-card[data-glow] :is(a, button) [data-glow]::before { inset: calc(var(--border-size) * -1); border-width: calc(var(--border-size) * 1); } /* Disable at touch devices */ .bc-glowing-card[data-disable]{ opacity: 1; } .bc-glowing-card[data-disable]::before, .bc-glowing-card[data-disable]::after{ display: none !important; } /* Spinner */ .bc-spinner { --dimensions: 200px; width: var(--dimensions); /*width*/ height: var(--dimensions); /*height*/ stroke-width: 3px; /*stroke width*/ stroke: white; /*stroke color*/ } [data-hide="bc-spinner--hide"]{ opacity: 0; } /* Gradiently */ .bc-gradiently{ width: 100%; height: 500px; position: relative; } .bc-gradiently__canvas{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1; } /* Fluid Gradient Title */ .bc-fuid-gradient__anchor{ display: block; width: fit-content; height: fit-content; } .bc-fuid-gradient{ display: block; width: fit-content; height: fit-content; } .bc-fuid-gradient__gradient{ --bg-size: 400%; /*typography*/ --duration: 15s; --easing: linear; background: var(--gradients); /*gradient control*/ -webkit-background-clip: text; color: transparent; -webkit-animation: hue var(--duration) infinite var(--easing); /*duration y easing*/ background-clip: text; animation: hue var(--duration) infinite var(--easing); /*duration y easing*/ } @keyframes hue { to { background-position: var(--bg-size) 0; } } /* Scroll Gradient */ .bc-scroll-gradient{ display: flex; justify-content: center; align-items: center; width: 100%; height: 100vh; padding: 250px 25px; } [data-hide="bc-scroll-gradient--to-hide"]{ opacity: 0; } .bc-scroll-gradient__text { position: relative; max-width: 780px; /*typography sin color*/ font-size: 36px; color: transparent; -webkit-background-clip: text; background-clip: text; background-size: 100% 400%; background-position: center 0; background-image: var(--gradients); /*gradient control*/ } /* Mousefill Title */ .bc-mousefill-title__anchor{ display: block; width: fit-content; height: fit-content; } .bc-mousefill-title{ --stroke-color: #fff; /*stroke color*/ --fill-color: #fff; /*fill color*/ --stroke-width: 2px; font-size: 64px; /*typography*/ font-weight: 700; text-transform: uppercase; display: flex; -webkit-text-stroke: var(--stroke-width) var(--stroke-color); background: linear-gradient(to right, var(--fill-color) 0 100%) left / 0 no-repeat; color: transparent; background-clip: text; background-size: 0% 100%; position: relative; } .bc-mousefill-title[data-shadow='true']{ background: linear-gradient(to right, var(--fill-color), transparent 75%, transparent) left / 0 no-repeat; background-clip: text; } /* * Vertical Marquee */ .bc-infinite-title{ position: relative; overflow: hidden; --gap: 10px; /**/ display: flex; flex-direction: column; row-gap: var(--gap); /**/ width: 100%; /**/ height: auto; /**/ color: white; --height: 50%; } .bc-infinite-title[data-blur-edges="1"]{ mask-image: linear-gradient( to bottom, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0) var(--height), rgba(0, 0, 0) calc(100% - var(--height)), rgba(0, 0, 0, 0) 100% ); } .bc-infinite-title[data-reverse="1"]{ flex-direction: column-reverse; } .bc-infinite-title__wrapper{ display: flex; flex-direction: column; row-gap: var(--gap); } /* Split Button */ .bc-split-button { position: relative; z-index: 1; width: fit-content; --hover-background: hsla(230, 13%, 9%, 0.075); --transition-duration: 0.3s; /*transition duration*/ --transition-easing: ease; /*transition easing*/ } .bc-split-button__btn, .bc-split-button__list-item{ all: unset; box-sizing: border-box; padding: 0; margin: 0; } /*general split button*/ .bc-split-button__morph-bg { position: absolute; top: 0; left: 0; height: 100%; width: 100%; border-radius: 6px; /*general split button border radius*/ pointer-events: none; transform-origin: left top; -webkit-backface-visibility: hidden; backface-visibility: hidden; background: hsl(0, 0%, 100%); /*general split button background*/ box-shadow: 0 0 0 1px hsla(230, 13%, 9%, 0.05), 0 0.3px 0.4px hsla(230, 13%, 9%, 0.02), 0 0.9px 1.5px hsla(230, 13%, 9%, 0.045), 0 3.5px 6px hsla(230, 13%, 9%, 0.09); /*general split button box shadow*/ transition: box-shadow var(--transition-duration), transform var(--transition-duration) var(--transition-easing), background var(--transition-duration) var(--transition-easing), height var(--transition-duration) var(--transition-easing), width var(--transition-duration) var(--transition-easing); will-change: transform, height, width; } [bc-split-button--expanded] .bc-split-button__btn { opacity: 0; pointer-events: none; } [bc-split-button--expanded] .bc-split-button__list-wrapper { opacity: 1; pointer-events: auto; } [bc-split-button--expanded] .bc-split-button__list { transform: scale(1); } .bc-split-button__btn { position: relative; z-index: 1; display: inline-flex; justify-content: center; align-items: center; gap: 8px; /*gap between button text and arrow*/ white-space: nowrap; /*white-space*/ text-decoration: none; border-radius: 6px; /*border*/ padding: 8px 16px; /*padding*/ font-weight: 500; /*typography*/ line-height: 1.2; color: hsl(230, 13%, 9%); cursor: pointer; transition: var(--transition-duration); --translate-y: 2px; } .bc-split-button__btn:focus-visible { outline: none; } .bc-split-button__btn:focus-visible ~ .bc-split-button__morph-bg { box-shadow: 0 0 0 1px hsla(230, 13%, 9%, 0.05), 0 0.3px 0.4px hsla(230, 13%, 9%, 0.02), 0 0.9px 1.5px hsla(230, 13%, 9%, 0.045), 0 3.5px 6px hsla(230, 13%, 9%, 0.09), 0 0 0 2px hsl(0, 0%, 100%), 0 0 0 4px hsl(230, 7%, 23%); } .bc-split-button__btn:active { transform: translateY(var(--translate-y)); /*translateY when active click*/ } .bc-split-button__btn-icon { --dimensions: 12px;/*icon dimensions*/ height: var(--dimensions); width: var(--dimensions); min-width: unset !important; min-height: unset !important; } .bc-split-button__list-wrapper { position: absolute; z-index: 1; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; pointer-events: none; transition: opacity var(--transition-duration); } .bc-split-button__list { transform: scale(0.5); transition: var(--transition-duration) var(--transition-easing); } .bc-split-button__list-item { display: flex; width: 100%; white-space: nowrap; /*sub button white-space*/ font-size: 16px; /*sub button typography*/ color: hsl(230, 13%, 9%); line-height: 1; font-weight: 500; margin: 4px; /*sub button margin*/ padding: 8px 12px; /*sub button padding*/ border-radius: 3px; /*sub button border radius*/ cursor: pointer; transition: background var(--transition-duration); } .bc-split-button__list-item:hover, .bc-split-button__list-item:focus-visible { background-color: var(--hover-background); /*sub button background on hover*/ } /* Typed */ .bc-typed__anchor{ display: block; width: fit-content; height: fit-content; } .bc-typed, .bc-typed__wrapper{ display: block; width: fit-content; height: fit-content; } .typed-cursor + .typed-cursor{ /*builder flick*/ display: none; } /* Unfold Hover */ .bc-unfold-hover__anchor{ display: block; width: fit-content; height: fit-content; } [data-hide-unfold-hover]{ opacity: 0; } .bc-unfold-hover { display: block; width: fit-content; --intensity: 7px; /**/ --link-translate-x: 32px; /**/ --delay-between-letters: 25ms; /**/ --transition-duration: 0.4s; /**/ --transition-easing: cubic-bezier(0.445, 0.05, 0.55, 0.95); /**/ } .bc-unfold-hover__wrapper{ display: grid; } .bc-unfold-hover__text { grid-area: 1 / 1; transition: opacity var(--transition-duration) var(--transition-easing), transform var(--transition-duration) var(--transition-easing); } .bc-unfold-hover__text .word { white-space: nowrap; } .bc-unfold-hover__text .char { display: block; transform-origin: 50% 50% var(--intensity); transition: transform var(--transition-duration) var(--transition-easing); transition-delay: calc(0ms + var(--char-index) * var(--delay-between-letters)); backface-visibility: hidden; } .bc-unfold-hover__text:nth-child(1) { /*typography 1*/ } .bc-unfold-hover__text:nth-child(2) { /*typography 2*/ opacity: 0; position: absolute; } .bc-unfold-hover__text:nth-child(2) .char { transform: rotate3d(1, -0.5, 0, 90deg); } .bc-unfold-hover:hover .bc-unfold-hover__text { transform: translateX(var(--link-translate-x)); } .bc-unfold-hover:hover .bc-unfold-hover__text:nth-child(1) { opacity: 0; } .bc-unfold-hover:hover .bc-unfold-hover__text:nth-child(1) .char { transform: rotate3d(1, 0.3, 0, -90deg); } .bc-unfold-hover:hover .bc-unfold-hover__text:nth-child(2) { opacity: 1; } .bc-unfold-hover:hover .bc-unfold-hover__text:nth-child(2) .char { transform: rotate3d(0, 0, 0, 90deg); } /* * Scroll Cascading */ .bc-scroll-cascading { min-height: calc(var(--scroll) * 1vh); view-timeline: --section; align-content: start; display: grid; place-items: center; --hue: 0; --saturation: 0; --lightness: 0; --stroke: var(--hue) calc(var(--saturation) * 1%) calc(var(--lightness) * 1%); --color: #000; --stroke-width: 4px; --leading: 0.25; --scroll: 162; } .bc-scroll-cascading__sticker { min-height: 100vh; position: sticky; top: 0; display: grid; place-items: center; font-size: 132px; font-weight: 700; text-transform: uppercase; } .bc-scroll-cascading__title { display: block; line-height: calc(var(--leading) * 1lh); margin: 0; -webkit-text-stroke: var(--stroke-width) hsl(var(--stroke) / calc((1 / var(--count)) * (var(--i) + 1))); color: transparent; white-space: nowrap; } .bc-scroll-cascading__title:last-of-type { color: var(--color, canvasText); } /* * Media */ media-player { /*root styles*/ --width: 600px; --height: 100%; max-width: var(--width) !important; height: var(--height) !important; --video-controls-color: #2710f800; --video-focus-ring-color: rgb(78 156 246); --video-focus-ring: 0 0 0 3px var(--media-focus-ring-color); --video-font-family: sans-serif; --video-bg: black; /*background*/ --video-border-radius: 6px; /*border*/ --video-border: 1px solid rgb(255 255 255 / 0.1); /* Buffering. */ --media-buffering-duration: 1s; /*transition duration*/ --media-buffering-animation: vds-buffering-spin var(--media-buffering-duration) linear infinite; --media-buffering-size: 64px; /*size*/ --media-buffering-track-color: #f5f5f5; /*color*/ --media-buffering-track-fill-color: #fff; /*fill color*/ --media-buffering-track-fill-offset: 50; --media-buffering-track-fill-opacity: 0.75; --media-buffering-thick: 9; /*thickness*/ --media-buffering-track-fill-width: var(--media-buffering-thick); --media-buffering-track-opacity: 0.25; --media-buffering-track-width: calc(var(--media-buffering-thick) - 1); --media-buffering-transition: opacity 200ms ease; /* Buttons. */ --media-controls-color: #f5f5f5; /*background*/ --video-sm-play-button-bg: rgba(0, 0, 0, 0.6); /*play button background*/ --media-button-color: var(--media-controls-color, #f5f5f5); --media-button-hover-transform: scale(1); --media-button-hover-transition: transform 0.2s ease-in; --media-button-icon-size: 80%; --media-button-padding: 0px; --media-button-border-radius: 8px; /*border*/ --media-button-touch-hover-border-radius: 100%; --media-button-size: 40px; /*size*/ --media-sm-fullscreen-button-size: 40px; --media-fullscreen-button-size: 40px; /* Tooltips. */ --media-tooltip-bg-color: black; /*background*/ --media-tooltip-border-radius: 4px; /*border*/ --media-tooltip-border: 1px solid rgb(255 255 255 / 0.1); --media-tooltip-color: hsl(0, 0%, 80%); /*typography*/ --media-tooltip-font-size: 13px; --media-tooltip-font-weight: 500; --media-tooltip-padding: 2px 8px; /*padding*/ --media-tooltip-entrance-duration: 0.2s; /*transition duration*/ --media-tooltip-enter-animation: vds-tooltip-enter var(--media-tooltip-entrance-duration) ease-in; --media-tooltip-exit-animation: vds-tooltip-exit var(--media-tooltip-entrance-duration) ease-out; /* Live Indicator. */ --media-live-button-edge-bg: #dc2626; /*background*/ --media-slider-track-fill-live-bg: #dc2626; /*track color*/ --media-live-button-border-radius: 2px; /*border*/ --media-live-button-height: 40px; --media-live-button-padding: 1px 4px; --media-live-button-width: 40px; --media-live-button-edge-color: #f5f5f5; /*typography*/ --media-live-button-font-size: 12px; --media-live-button-font-weight: 600; --media-live-button-letter-spacing: 1.5px; /* Controls. */ --media-controls-padding: 0px; --media-controls-entrance-duration: 0.2s; /*transition duration*/ --media-controls-in-transition: opacity var(--media-controls-entrance-duration) ease-in; --media-controls-out-transition: opacity var(--media-controls-entrance-duration) ease-out; /* Thumbnails. */ --media-thumbnail-bg: black; /*background*/ --media-thumbnail-border: 1px solid white; /*border*/ --media-thumbnail-aspect-ratio: 16 / 9; --media-thumbnail-min-width: 120px; /*min-width*/ --media-thumbnail-min-height: calc(var(--media-thumbnail-min-width) / var(--aspect-ratio)); --media-thumbnail-max-width: 180px; /*max-width*/ --media-thumbnail-max-height: calc(var(--media-thumbnail-max-width) / var(--aspect-ratio)); /* Time. */ --media-time-bg: unset; --media-time-border-radius: unset; --media-time-border: unset; --media-time-color: #f5f5f5; /*time typography*/ --media-time-font-size: 14px; --media-time-font-weight: 400; --media-time-letter-spacing: 0.025em; --media-time-divider-color: #f5f5f5; --media-time-divider-gap: 2.5px; /*divider gap*/ /* Sliders. */ --media-slider-width: 100%; --media-slider-height: 48px; /* Slider Thumb. */ --media-slider-thumb-bg: #fff; --media-slider-thumb-border-radius: 9999px; --media-slider-thumb-border: 1px solid #cacaca; --media-slider-thumb-size: 15px; --media-slider-thumb-transition: opacity 0.2s ease-in, box-shadow 0.2s ease; /* Slider Tracks. */ --media-slider-track-width: 100%; --media-slider-track-bg: rgb(255 255 255 / 0.3); --media-slider-track-border-radius: 1px; --media-slider-track-fill-bg: var(--media-brand); --media-slider-track-height: 5px; --media-slider-track-progress-bg: rgb(255 255 255 / 0.5); --media-slider-focused-thumb-shadow: 0 0 0 4px hsla(0, 0%, 100%, 0.4); --media-slider-focused-thumb-size: calc(var(--thumb-size) * 1.1); --media-slider-focused-track-height: calc(var(--track-height) * 1.25); --media-slider-focused-track-height: var(--track-height); --media-slider-focused-track-width: calc(var(--track-width) * 1.25); --media-slider-focused-track-width: var(--track-width); /* Slider Steps. */ --media-slider-step-width: 2.5px; --media-slider-step-color: rgb(124, 124, 124); /* Slider Chapter. */ --media-slider-chapter-hover-transform: scaleY(2); --media-slider-chapter-hover-transition: transform 0.1s cubic-bezier(0.4, 0, 1, 1); /* Slider Preview. */ --media-slider-preview-bg: unset; --media-slider-preview-border-radius: 2px; /* Slider Chapter Title. */ --media-slider-chapter-title-bg: unset; --media-slider-chapter-title-color: #f5f5f5; --media-slider-chapter-title-font-size: 14px; --media-slider-chapter-title-gap: 6px; /* Slider Value. */ --media-slider-value-bg: black; --media-slider-value-border-radius: 2px; --media-slider-value-border: unset; --media-slider-value-color: white; --media-slider-value-gap: 0px; --media-slider-value-padding: 1px 10px; } media-player[hide-controls="1"] media-controls{ display: none; } .vds-buffering-spinner{ width: var(--media-buffering-size); height: var(--media-buffering-size); } /* * Counter */ .bc-counter__anchor{ display: block; width: fit-content; height: fit-content; } .bc-counter{ display: block; width: fit-content; height: fit-content; } /* * Dropdown */ .next-dropdown{ position: absolute; background: #d2d2d2; width: fit-content; height: fit-content; border-radius: 8px; opacity: 0; pointer-events: none; --scale: 0; --x: 0px; --y: -30px; transform: scale(var(--scale)) translateX(var(--x)) translateY(var(--y)); --opacity-easing: ease; --opacity-duration: .2s; --opacity-delay: 0s; --transform-easing: ease; --transform-duration: .2s; --transform-delay: 0s; transition: opacity var(--opacity-duration) var(--opacity-easing) var(--opacity-delay), transform var(--transform-duration) var(--transform-easing) var(--transform-delay); } .next-dropdown[data-toggled]{ opacity: 1; pointer-events: all; transform: scale(1) translateX(0) translateY(0); } .next-dropdown[data-toggled-builder]{ opacity: 1; pointer-events: all; transform: scale(1) translateX(0) translateY(0); } /*mask hover*/ .next-dropdown::before{ content: ""; position: absolute; --mask-top: 0px; --mask-bottom: 0px; --mask-left: 0px; --mask-right: 0px; top: calc(var(--mask-top) * -1); bottom: var(--mask-bottom); left: calc(var(--mask-left) * -1); right: var(--mask-right); display: block; width: calc(100% + var(--mask-left) + var(--mask-right)); height: calc(100% + var(--mask-top) + var(--mask-bottom)); z-index: -1; } /* * Arrow Icon */ .next-arrow-icon{ display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; width: 40px; height: 40px; --arrow-scale: 0.5; --icon-hover-scale: 1.3; --scale-duration: .4s; --scale-easing: ease; --scale-delay: 0s; transition: scale var(--scale-duration) var(--scale-easing) var(--scale-delay); --arrow-rotate: 0deg; --distance-between-arrows: 50px; --transform-duration: .4s; --transform-easing: ease; --transform-delay: 0s; --arrow-hover-rotate: 45deg; --rotate-duration: .4s; --rotate-easing: ease; --rotate-delay: 0s; } .next-arrow-icon__arrow{ position: absolute; min-width: unset !important; min-height: unset !important; scale: var(--arrow-scale); rotate: var(--arrow-rotate); fill: black; transition: rotate var(--rotate-duration) var(--rotate-easing) var(--rotate-delay), transform var(--transform-duration) var(--transform-easing) var(--transform-delay); } .next-arrow-icon__arrow:nth-child(2){ transform: translateX(calc(-100% - var(--distance-between-arrows))); } .next-arrow-icon[data-active][data-enable-scale]{ scale: var(--icon-hover-scale); } .next-arrow-icon[data-active][data-enable-transform] .next-arrow-icon__arrow:nth-child(1){ transform: translateX(calc(100% + var(--distance-between-arrows))); } .next-arrow-icon[data-active][data-enable-transform] .next-arrow-icon__arrow:nth-child(2){ transform: translateX(0%); } .next-arrow-icon[data-active][data-enable-rotate] .next-arrow-icon__arrow{ rotate: var(--arrow-hover-rotate); } /* * Dropdown Wrapper */ .next-dropdown-wrapper{ width: fit-content; } .next-dropdown-toggle{ display: flex; justify-content: center; align-items: center; flex-direction: row; gap: 10px; width: fit-content; } /* * Dropdown megaMenu */ .next-dropdown-mega-menu{ display: flex; } .next-dropdown-mega-menu__site-wrapper{ display: flex; justify-content: center; align-items: center; flex-direction: row; gap: 10px; width: fit-content; } .next-dropdown-mega-menu__dropdowns-wrapper{ display: flex; justify-content: center; align-items: center; flex-direction: row; gap: 10px; width: fit-content; } /*Responsive*/ .next-dropdown-mega-menu__mobile-wrapper{ display: none; } /*Force Responsive at builder*/ .next-dropdown-mega-menu[data-toggled-enable-mobile-menu] .next-dropdown-mega-menu__mobile-wrapper{ display: flex; } .next-dropdown-mega-menu[data-toggled-enable-mobile-menu] .next-dropdown-mega-menu__dropdowns-wrapper{ position: absolute; z-index: 99; pointer-events: none; opacity: 0; } .next-dropdown-mega-menu[data-toggled-display-builder] .next-dropdown-mega-menu__dropdowns-wrapper{ opacity: 1; pointer-events: all; transform: scale(1) translateX(0) translateY(0); } /* * Ripple Button v2 */ .next-ripple-button-v2[data-next-hide]{ opacity: 0; } .next-ripple-button-v2{ display: flex; white-space: nowrap; overflow: hidden; width: fit-content; height: fit-content; border-radius: 100px; /*border*/ --scale: 1.1; --scale-animation-duration: .5s; /**/ --scale-animation-easing: cubic-bezier(.76,0,.24,1); /**/ --scale-animation-delay: 0s; /**/ transition: transform var(--scale-animation-duration) var(--scale-animation-easing) var(--scale-animation-delay); } .next-ripple-button-v2__ripple-masks{ position: relative; width: fit-content; --translate-animation-duration: .5s; /**/ --translate-animation-easing: cubic-bezier(.76,0,.24,1); /**/ --translate-animation-delay: 0s; /**/ transition: transform var(--translate-animation-duration) var(--translate-animation-easing) var(--translate-animation-delay); --text-rotate: 90deg; --text-translate: 15px; --text-rotate-animation-duration: .75s; /**/ --text-rotate-animation-easing: cubic-bezier(.76,0,.24,1); /**/ --text-rotate-animation-delay: .2s; /**/ } .next-ripple-button-v2__ripple-mask--top, .next-ripple-button-v2__ripple-mask--bottom{ display: flex; justify-content: center; align-items: center; padding: 10px 25px; /*padding*/ /*typography*/ } .next-ripple-button-v2__ripple-mask--top{ background: greenyellow; /*background*/ color: black; /*color*/ } .next-ripple-button-v2__ripple-mask--bottom{ position: absolute; top: 100%; background: black; /*background*/ color: white; /*color*/ } .next-ripple-button-v2__ripple-title--top-show, .next-ripple-button-v2__ripple-title--bottom-show{ position: absolute; transform-origin: bottom center; transform: rotateX(calc(var(--text-rotate) * -1)) translateY(var(--text-translate)); opacity: 0; } .next-ripple-button-v2__ripple-title--top-hide, .next-ripple-button-v2__ripple-title--top-show, .next-ripple-button-v2__ripple-title--bottom-hide, .next-ripple-button-v2__ripple-title--bottom-show{ transition: opacity var(--text-rotate-animation-duration) var(--text-rotate-animation-easing) var(--text-rotate-animation-delay), transform var(--text-rotate-animation-duration) var(--text-rotate-animation-easing) var(--text-rotate-animation-delay); } /*Animations*/ .next-ripple-button-v2:hover{ transform: scale(var(--scale)); } .next-ripple-button-v2:hover .next-ripple-button-v2__ripple-masks{ transform: translateY(-100%); } .next-ripple-button-v2:hover .next-ripple-button-v2__ripple-title--bottom-hide{ transform: rotateX(var(--text-rotate)) translateY(calc(var(--text-translate) * -1)); opacity: 0; } .next-ripple-button-v2:hover .next-ripple-button-v2__ripple-title--bottom-show{ opacity: 1; transform: rotateX(0deg) translateY(0px); } .next-ripple-button-v2:not(:hover) .next-ripple-button-v2__ripple-title--top-hide{ transform: rotateX(var(--text-rotate)) translateY(calc(var(--text-translate) * -1)); opacity: 0; } .next-ripple-button-v2:not(:hover) .next-ripple-button-v2__ripple-title--top-show{ opacity: 1; transform: rotateX(0deg) translateY(0px); } .next-ripple-button-v2[data-from-top] .next-ripple-button-v2__ripple-mask--bottom{ position: absolute; top: -100%; } .next-ripple-button-v2[data-from-top]:hover .next-ripple-button-v2__ripple-masks{ transform: translateY(100%); } /* * Lamp */ .next-lamp { --div-width: 100%; /**/ --div-height: 250px; /**/ --div-background: rgb(2 6 23); /**/ --lamp-width-size: 300px; /**/ --lamp-height-size: 200px; /**/ --lamp-color: rgb(6 182 212); /**/ --lamp-blur-intensity: 0.5; /*rango min 0 - max 1*/ --lamp-light-intensity: 1; /*rango min 0.7 - max 3*/ --lamp-angle: 0deg; --line-height: 1.25px; /**/ --line-color: #38bdf8; /**/ position: relative; z-index: -1; /**/ display: flex; height: var(--div-height); width: var(--div-width); flex-direction: column; align-items: center; justify-content: center; background: var(--div-background) !important; --tw-translate-x: 0; --tw-translate-y: calc(var(--lamp-height-size) * -0.48); --tw-translate-y-2: -50%; --tw-translate-y-3: calc(var(--lamp-height-size) * 0.3); --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-x-3: 1.5; --tw-scale-y: 1; --tw-backdrop-blur: blur(calc(12px / var(--lamp-light-intensity))); --tw-blur: blur(calc(40px / var(--lamp-light-intensity))); --tw-blur-2: blur(calc(64px / var(--lamp-light-intensity))); --conic-position: from calc(360deg - var(--lamp-angle)) at center top; --conic-position-2: from calc(0deg + var(--lamp-angle)) at center top; --tw-gradient-to-position: ; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to: transparent var(--tw-gradient-to-position); --tw-gradient-from: var(--lamp-color) var(--tw-gradient-from-position); --tw-gradient-stops: var(--tw-gradient-from), transparent var(--tw-gradient-via-position), var(--tw-gradient-to); --tw-gradient-to-2: var(--lamp-color) var(--tw-gradient-to-position); --tw-gradient-from-2: transparent var(--tw-gradient-from-position); --tw-gradient-stops-2: var(--tw-gradient-from-2), transparent var(--tw-gradient-via-position), var(--tw-gradient-to-2); } .next-lamp *{ margin-top: 50px; } .next-lamp__mask-left { position: absolute; inset: auto; overflow: visible; right: 50%; height: calc(var(--lamp-height-size) * 0.5); width: calc(var(--lamp-width-size) * 0.5); background: conic-gradient(var(--conic-position-2), var(--tw-gradient-stops)); } .next-lamp__mask-left__child-left{ position: absolute; left: 0; bottom: 0; z-index: 2; width: 100%; height: calc(var(--lamp-height-size) * 1/3); background-color: var(--div-background); -webkit-mask-image: linear-gradient(0deg, #fff, transparent); mask-image: linear-gradient(0deg, #fff, transparent); } .next-lamp__mask-left__child-right{ position: absolute; left: 0; bottom: 0; z-index: 2; width: calc(var(--lamp-width-size) * 1/3); height: 100%; background-color: var(--div-background); -webkit-mask-image: linear-gradient(90deg, #fff, transparent); mask-image: linear-gradient(90deg, #fff, transparent); } .next-lamp__mask-right { position: absolute; inset: auto; left: 50%; height: calc(var(--lamp-height-size) * 0.5); width: calc(var(--lamp-width-size) * 0.5); background: conic-gradient(var(--conic-position), var(--tw-gradient-stops-2)); } .next-lamp__mask-right__child-left{ position: absolute; right: 0; bottom: 0; z-index: 2; width: calc(var(--lamp-width-size) * 1/3); height: 100%; background-color: var(--div-background); -webkit-mask-image: linear-gradient(270deg, #fff, transparent); mask-image: linear-gradient(270deg, #fff, transparent); } .next-lamp__mask-right__child-right{ position: absolute; right: 0; bottom: 0; z-index: 2; width: 100%; height: calc(var(--lamp-height-size) * 1/3); background-color: var(--div-background); -webkit-mask-image: linear-gradient(0deg, #fff, transparent); mask-image: linear-gradient(0deg, #fff, transparent); } .next-lamp__blur-bg { position: absolute; top: 50%; height: calc(var(--lamp-height-size) * 0.4); width: 100%; transform: translateY(var(--tw-translate-x), var(--tw-translate-y-3)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleY(var(--tw-scale-y)); background-color: var(--div-background); filter: var(--tw-blur); } .next-lamp__backdrop-blur { position: absolute; top: 50%; height: calc(var(--lamp-height-size) * 0.4); width: 100%; background-color: transparent; opacity: 0.1; -webkit-backdrop-filter: var(--tw-backdrop-blur); backdrop-filter: var(--tw-backdrop-blur); } .next-lamp__bg-top-line { position: absolute; inset: auto; height: calc(var(--lamp-height-size) * 0.35); width: var(--lamp-width-size); transform: translate(var(--tw-translate-x), var(--tw-translate-y-2)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); border-radius: 9999px; background-color: var(--lamp-color); opacity: var(--lamp-blur-intensity); filter: var(--tw-blur-2); z-index: 5; } .next-lamp__bg-mid-line { position: absolute; inset: auto; height: calc(var(--lamp-height-size) * 0.3); width: calc(var(--lamp-width-size) * 0.25); transform: translateY(calc(var(--lamp-height-size) * -0.2)); border-radius: 50%; background-color: var(--lamp-color); filter: var(--tw-blur); z-index: 3; } .next-lamp__bg-bottom-line{ position: absolute; z-index: 4; background-color: var(--div-background); width: 100%; height: calc(var(--lamp-height-size) * 0.5); transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .next-lamp__line { position: absolute; inset: auto; height: var(--line-height); width: calc(var(--lamp-width-size) * 0.5); transform: translateY(calc(var(--lamp-height-size) * -0.23)); background-color: var(--line-color); z-index: 5; } /* * Spotlight v2 */ .next-spotlight-v2-wrapper{ overflow: hidden; position: relative; width: 100%; /**/ height: 500px; /**/ background-color: #111111; } .next-spotlight-v2{ overflow: unset !important; /*remove Bricks style*/ pointer-events: none; position: absolute; z-index: 1; /**/ top: -50px; /**/ left: auto; /**/ --width: 750px; --height: 750px; min-width: var(--width) !important; /**/ min-height: var(--height) !important; /**/ max-width: var(--width) !important; /**/ max-height: var(--height) !important; /**/ opacity: 0; --from-scale: 0.5; transform: translate(-72%, -62%) scale(var(--from-scale)); } .next-spotlight-v2 ellipse{ fill: white; fill-opacity: 0.21; } /* * Ripple Button v3 */ .next-ripple-button-v3[data-next-hide]{ opacity: 0; } /**/ .next-ripple-button-v3{ display: flex; white-space: nowrap; overflow: hidden; text-align: center; width: fit-content; height: fit-content; --border-radius: 100px; /*border-radius*/ border-radius: var(--border-radius); /*border*/ background: white; /*background*/ } .next-ripple-button-v3__wrapper{ position: relative; padding: 15px 30px; /*padding*/ --translate-animation-duration: 0.4s; --translate-animation-easing: cubic-bezier(.33,1,.68,1); --translate-animation-delay: 0s; transition: transform var(--translate-animation-duration) var(--translate-animation-easing) var(--translate-animation-delay); /*animation*/ } .next-ripple-button-v3__title--top{ /*top & bottom typography*/ color: black; /*color*/ } .next-ripple-button-v3__bottom{ position: absolute; top: 100%; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .next-ripple-button-v3__title--bottom{ position: absolute; /*top & bottom typography*/ color: black; /*color*/ } .next-ripple-button-v3__mask{ background-color: #c9ff18; /*mask background*/ border-radius: 50%; width: 50%; /**/ height: 100%; --ripple-animation-duration: 0.4s; --ripple-animation-easing: cubic-bezier(.33,1,.68,1); --ripple-animation-delay: 0s; transition: all var(--ripple-animation-duration) var(--ripple-animation-easing) var(--ripple-animation-delay); /*animation*/ } /*Hover*/ .next-ripple-button-v3:hover .next-ripple-button-v3__wrapper{ transform: translateY(-100%); } .next-ripple-button-v3:hover .next-ripple-button-v3__mask{ border-radius: var(--border-radius); width: 100%; } .next-ripple-button-v3[data-from-top] .next-ripple-button-v3__bottom{ top: -100%; } .next-ripple-button-v3[data-from-top]:hover .next-ripple-button-v3__wrapper{ transform: translateY(100%); } /* * Marquee Button v2 */ .next-marquee-button-v2[data-next-hide]{ opacity: 0; } /**/ .next-marquee-button-v2{ overflow: hidden; white-space: nowrap; display: flex; align-items: center; justify-content: center; width: fit-content; height: fit-content; --gap: 15px; --padding-top: 15px; --padding-bottom: 15px; --padding-left: 15px; --padding-right: 15px; padding: var(--padding-top) 0 var(--padding-bottom) 0; /*padding*/ background: #fff; /*background*/ border-radius: 100px; /*border*/ --background-duration: 0.25s; /**/ --background-easing: ease-out; /**/ --background-delay: 0s; /**/ transition: background var(--background-duration) var( --background-easing) var(--background-delay); /*animation*/ --marquee-translate-duration: 0.75s; /**/ --marquee-translate-easing: ease-out; /**/ --marquee-translate-delay: 0s; /**/ --marquee-speed: 3s; /**/ --marquee-easing: linear; /**/ --swap-duration: 0.25s; /**/ --swap-easing: ease-out; /**/ --swap-delay: 0s; /**/ } .next-marquee-button-v2__wrapper{ overflow: hidden; position: relative; } /*Marquee*/ .next-marquee-button-v2__marquee{ position: relative; display: flex; transition: translate var(--marquee-translate-duration) var(--marquee-translate-easing) var(--marquee-translate-delay); /*animation*/ animation: marquee-button-v2-animation var(--marquee-speed) var(--marquee-easing) 0s infinite; /*animation*/ } .next-marquee-button-v2__marquee > span{ color: #000; /*typography*/ } .next-marquee-button-v2__marquee > span:nth-child(2){ position: absolute; left: calc(100% + var(--gap)); /*15px is the gap between titles*/ } @keyframes marquee-button-v2-animation { 100% { transform: translateX(calc(-100% - var(--gap))); /*15px is the gap between titles*/ } } /*Swap*/ .next-marquee-button-v2__swap{ position: absolute; top: 0; left: 50%; height: 100%; transform: translateX(-50%); color: #fff; /*typography*/ } .next-marquee-button-v2[data-type=line] .next-marquee-button-v2__swap .next-marquee-button-v2__swap-line, .next-marquee-button-v2[data-type=words] .next-marquee-button-v2__swap .next-marquee-button-v2__swap-word, .next-marquee-button-v2[data-type=chars] .next-marquee-button-v2__swap .next-marquee-button-v2__swap-letter{ position: relative; top: 100%; transition: top var(--swap-duration) var(--swap-easing) var(--swap-delay); } /*Hover*/ .next-marquee-button-v2:hover{ --background-hover: #000; background: var(--background-hover) !important; } .next-marquee-button-v2:hover .next-marquee-button-v2__marquee{ translate: 0 -100%; opacity: 0; } .next-marquee-button-v2[data-type=line]:hover .next-marquee-button-v2__swap .next-marquee-button-v2__swap-line, .next-marquee-button-v2[data-type=words]:hover .next-marquee-button-v2__swap .next-marquee-button-v2__swap-word, .next-marquee-button-v2[data-type=chars]:hover .next-marquee-button-v2__swap .next-marquee-button-v2__swap-letter{ top: 0; } /* * Particles */ .next-particles{ position: relative; width: 100%; height: 500px; } .next-particles canvas{ position: absolute; top: 0; left: 0; } /* * Physics */ .next-physics{ position: relative; width: 100%; height: 500px; --background-color: red; } .next-physics canvas{ position: absolute; top: 0; left: 0; z-index: -1; background-color: var(--background-color) !important; } /* * Horizontal Scroll */ .next-horizontal-scroll{ overflow-x: hidden; } /* * Table of Contents */ /* used in JS - detect when the next-toc needs to switch from a collapsed to a static version */ [class*=next-toc--static]::before { display: none; content: "collapsed"; } /* force responsive at builder */ .next-toc[data-builder-responsive="true"].next-toc--static\@md::before { content: 'static'; } .next-toc { height: fit-content; /* outline */ --outline-color-from: hsla(250, 84%, 54%, 0.5); --outline-color-to: hsla(250, 84%, 54%, 0); --outline-width: 2px; --outline-style: solid; --outline-animation-duration: 2s; /* text swap animation at responsive */ --text-swap-from: -10px; --text-swap-duration: 0.4s; --text-swap-easing: cubic-bezier(0.215, 0.61, 0.355, 1); /* arrow */ --arrow-dimensions: 16px; --arrow-transform-rotate: -90deg; --arrow-transform-from: 3px; --arow-transform-intensity: 8px; --arrow-transform-duration: 0.3s; --arrow-transform-easing: cubic-bezier(0.215, 0.61, 0.355, 1); /* responsive dropdown */ --dropdown-from: 10px; --dropdown-duration: 0.4s; --dropdown-easing: cubic-bezier(0.215, 0.61, 0.355, 1); } .next-toc--sticky{ position: sticky; top: 0; } .next-toc *{ list-style: none; padding: 0; margin: 0; } .toc-content__target { scroll-margin-top: 0px; } /*Titles (links)*/ .next-toc__link { position: relative; padding: 8px 16px; /*padding*/ /*typography*/ /*border*/ } /*Left line selected title*/ .next-toc__link::before { content: ""; width: 1px; /**/ height: 100%; position: absolute; left: 0; top: 0; } .next-toc__link:hover{ color: hsl(250, 84%, 54%); /**/ } .next-toc__link--selected { color: hsl(250, 84%, 54%); /**/ } /*Outline animation*/ .next-toc-content--next-toc-static *:target { -webkit-animation: next-toc-target var(--outline-animation-duration); animation: next-toc-target var(--outline-animation-duration); } @-webkit-keyframes next-toc-target { 0%, 50% { outline: var(--outline-width) var(--outline-style) var(--outline-color-from); } 100% { outline: var(--outline-width) var(--outline-style) var(--outline-color-to); } } @keyframes next-toc-target { 0%, 50% { outline: var(--outline-width) var(--outline-style) var(--outline-color-from); } 100% { outline: var(--outline-width) var(--outline-style) var(--outline-color-to); } } /* Desktop */ .next-toc--static .next-toc__control { display: none; } .next-toc--static .next-toc__link--selected::before { background-color: hsl(250, 84%, 54%); /**/ } /* * Responsive */ /*Wrapper of Title and Arrow*/ .next-toc__control { all: unset; width: 100%; display: flex; justify-content: space-between; align-items: center; } /*Title*/ .next-toc__control-text { position: relative; /*typography*/ } .next-toc__control-text > * { display: inline-block; transition: opacity var(--text-swap-duration), -webkit-transform var(--text-swap-duration) var(--text-swap-easing); transition: opacity var(--text-swap-duration), transform var(--text-swap-duration) var(--text-swap-easing); transition: opacity var(--text-swap-duration), transform var(--text-swap-duration) var(--text-swap-easing), -webkit-transform var(--text-swap-duration) var(--text-swap-easing); } .next-toc__control-text > *:last-child { position: absolute; top: 0; left: 0; opacity: 0; pointer-events: none; -webkit-transform: translateY(var(--text-swap-from)); transform: translateY(var(--text-swap-from)); } /*Arrow icon*/ .next-toc__icon-arrow { height: var(--arrow-dimensions); width: var(--arrow-dimensions); min-height: unset !important; min-width: unset !important; display: inline-block; color: inherit; line-height: 1; flex-shrink: 0; max-width: initial; fill: currentColor; /**/ } .next-toc__icon-arrow .next-toc-icon__group { will-change: transform; -webkit-transform-origin: var(--arow-transform-intensity) var(--arow-transform-intensity); transform-origin: var(--arow-transform-intensity) var(--arow-transform-intensity); transition: -webkit-transform var(--arrow-transform-duration) var(--arrow-transform-easing); transition: transform var(--arrow-transform-duration) var(--arrow-transform-easing); transition: transform var(--arrow-transform-duration) var(--arrow-transform-easing), -webkit-transform var(--arrow-transform-duration) var(--arrow-transform-easing); } .next-toc__icon-arrow .next-toc-icon__group > * { -webkit-transform-origin: var(--arow-transform-intensity) var(--arow-transform-intensity); transform-origin: var(--arow-transform-intensity) var(--arow-transform-intensity); stroke-dasharray: 17; -webkit-transform: translateY(var(--arrow-transform-from)); transform: translateY(var(--arrow-transform-from)); transition: stroke-dashoffset var(--arrow-transform-duration), -webkit-transform var(--arrow-transform-duration); transition: transform var(--arrow-transform-duration), stroke-dashoffset var(--arrow-transform-duration); transition: transform var(--arrow-transform-duration), stroke-dashoffset var(--arrow-transform-duration), -webkit-transform var(--arrow-transform-duration); transition-timing-function: var(--arrow-transform-easing); } .next-toc__icon-arrow .next-toc-icon__group > *:first-child { stroke-dashoffset: 10; } .next-toc__icon-arrow .next-toc-icon__group > *:last-child { stroke-dashoffset: 10; } .next-toc:not(.next-toc--static).next-toc--expanded .next-toc__icon-arrow .next-toc-icon__group { -webkit-transform: rotate(var(--arrow-transform-rotate)); transform: rotate(var(--arrow-transform-rotate)); } .next-toc:not(.next-toc--static).next-toc--expanded .next-toc__icon-arrow .next-toc-icon__group > *:first-child, .next-toc:not(.next-toc--static).next-toc--expanded .next-toc__icon-arrow .next-toc-icon__group *:last-child { stroke-dashoffset: 0; -webkit-transform: translateY(0px); transform: translateY(0px); } /*Responsive builder*/ .iframe .next-toc:not([data-responsive="1"][data-builder-responsive="true"]) .next-toc__control { display: none !important; } .iframe .next-toc[data-responsive="1"]:not([data-builder-responsive="true"]) .next-toc__control { display: flex !important; } .iframe .next-toc[data-responsive="1"]:not([data-builder-responsive="true"]) .next-toc__nav { display: none !important; } /* Mobile */ .next-toc[data-responsive="1"]:not(.next-toc--static) .next-toc__nav { display: none; } .next-toc:not(.next-toc--static).next-toc--expanded .next-toc__control-text > *:first-child { -webkit-transform: translateY(var(--dropdown-from)); transform: translateY(var(--dropdown-from)); opacity: 0; pointer-events: none; } .next-toc:not(.next-toc--static).next-toc--expanded .next-toc__control-text > *:last-child { opacity: 1; pointer-events: auto; -webkit-transform: translateY(0); transform: translateY(0); } .next-toc:not(.next-toc--static).next-toc--expanded .next-toc__nav { display: block; -webkit-animation: next-toc-entry-animation var(--dropdown-duration) var(--dropdown-easing); animation: next-toc-entry-animation var(--dropdown-duration) var(--dropdown-easing); } @-webkit-keyframes next-toc-entry-animation { from { opacity: 0; -webkit-transform: translateY(calc(var(--dropdown-from) * -1)); transform: translateY(calc(var(--dropdown-from) * -1)); } to { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } } @keyframes next-toc-entry-animation { from { opacity: 0; -webkit-transform: translateY(calc(var(--dropdown-from) * -1)); transform: translateY(calc(var(--dropdown-from) * -1)); } to { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } } /* * Timeline */ /* Root */ .next-timeline{ clip-path: inset(0 0 0 0); /*hide progress-bar (position fixed) out of the element*/ position: relative; display: flex; justify-content: center; align-items: center; flex-direction: column; background-color: black; /**/ color: white; width: 100%; /**/ height: auto; /**/ --progress-bar: 3px; /**/ --progress-start: 50vh; /**/ --progress-fade-edges-height: 50px; /**/ --sticky-top: 50vh; /**/ --from-opacity: 0.25; /**/ } /* Progress bar */ .next-timeline--progress{ position: absolute; left: auto; /**/ right: auto; /**/ width: var(--progress-bar); height: 100%; /**/ background-color: #414141; /**/ mask-image: linear-gradient( to bottom, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0) var(--progress-fade-edges-height), rgba(0, 0, 0) calc(100% - var(--progress-fade-edges-height)), rgba(0, 0, 0, 0) 100% ); } .next-timeline--progress-bar{ position: fixed; left: auto; top: 0px; right: auto; bottom: var(--progress-start); width: var(--progress-bar); height: var(--progress-start); background-image: var(--gradient); } /* Item */ .next-timeline--item{ position: relative; z-index: 2; width: auto; height: auto; padding: 40px 0; display: grid; grid-auto-columns: 1fr; grid-column-gap: 0px; grid-row-gap: 0px; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: minmax(auto, 1fr); } .next-timeline--sticky-wrapper{ position: sticky; top: var(--sticky-top); display: flex; align-items: center; flex-direction: column; } .next-timeline[data-left-fade="true"] .next-timeline--left-section .next-timeline--sticky-wrapper > *{ opacity: var(--from-opacity); will-change: opacity; } .next-timeline[data-center-fade="true"] .next-timeline--center-section .next-timeline--sticky-wrapper > *{ opacity: var(--from-opacity); will-change: opacity; } .next-timeline[data-right-fade="true"] .next-timeline--right-section .next-timeline--sticky-wrapper > *{ opacity: var(--from-opacity); will-change: opacity; } /* Left Section */ .next-timeline--left-section{ display: flex; align-items: center; flex-direction: column; height: 100%; /**/ } /* Center Section */ .next-timeline--center-section{ display: flex; align-items: center; flex-direction: column; height: 100%; /**/ } .next-timeline--center-section > .next-timeline--sticky-wrapper{ --sticky-wrapper-outline-color: black; /**/ --sticky-wrapper-outline-width: 8px; /**/ width: fit-content; background: var(--sticky-wrapper-outline-color); box-shadow: 0 0 0 var(--sticky-wrapper-outline-width) var(--sticky-wrapper-outline-color); } .next-timeline--circle{ --dimensions: 15px; /**/ width: var(--dimensions); height: var(--dimensions); max-height: var(--dimensions); max-width: var(--dimensions); min-height: var(--dimensions); min-width: var(--dimensions); border-radius: 100%; background-color: white; /**/ } /* Right Section */ .next-timeline--right-section{ display: flex; align-items: center; flex-direction: column; height: 100%; /**/ } /* * Border Beam */ .nb-border-beam{ position: relative; width: 400px; height: 400px; background: #171717; } .nb-border-beam__mask{ --size: 200; /*style*/ --anchor: 90; /*style*/ --border-width: 1.5; /*style*/ --color-from: #ffaa40; /*style*/ --color-to: #0096FE; /*style*/ --duration: 10s; /*anim*/ --easing: linear; /*anim*/ -webkit-mask: linear-gradient(transparent, transparent), linear-gradient(#fff, #fff); mask: linear-gradient(transparent, transparent), linear-gradient(#fff, #fff); border: calc(var(--border-width)* 1px) solid transparent; -webkit-mask-composite: source-in, xor !important; mask-composite: intersect !important; -webkit-mask-clip: padding-box, border-box !important; mask-clip: padding-box, border-box !important; inset: 0; position: absolute; pointer-events: none; } .nb-border-beam__mask::after{ content: ""; offset-path: rect(0 auto auto 0 round calc(var(--size)* 1px)); offset-anchor: calc(var(--anchor)* 1%) 50%; background: linear-gradient(to left, var(--color-from), var(--color-to), transparent); animation: border-beam calc(var(--duration)) infinite var(--easing); width: calc(var(--size)* 1px); aspect-ratio: 1 / 1; position: absolute; } @keyframes border-beam{ 100% { offset-distance: 100%; } } .brx-body.iframe .nb-border-beam--disable-builder .nb-border-beam__mask::after{ animation: unset; } /* * Circular Menu */ .nb-circular-menu{ width: fit-content; height: fit-content; } .bc-core-burguer--circular-menu { position: relative; z-index: 2; } .nb-circular-menu__content { position: absolute; display: flex; width: 100svw; /**/ height: 100svh; /**/ background: #c4c4c4; /**/ inset: 0px; overflow: hidden; transform: none; transform-origin: 50% 50% 0px; --from-top: 24px; --from-left: 24px; pointer-events: none; clip-path: circle(0px at var(--from-left) var(--from-top)); /*0% for top and left*/ /*100% for bottom and right*/ --clip-path: circle(150% at var(--from-left) var(--from-top)); } /* CORE BURGUER */ html[bc-core-burguer--body-toggled]{ overflow: hidden !important; } html[bc-core-burguer--body-toggled] > body > .os-scrollbar-horizontal, html[bc-core-burguer--body-toggled] > body > .os-scrollbar-vertical{ display: none !important; } .bc-core-burguer svg{ overflow: unset !important; min-width: unset !important; min-height: unset !important; } .bc-core-burguer{ display: flex; width: fit-content; height: fit-content; } .bc-core-burguer button{ background: unset; } /*style1*/ .bc-burguer-style1, .bc-burguer-style1 *, .bc-burguer-style1 *::before, .bc-burguer-style1 *::after{ will-change: unset; } .bc-burguer-style1 { all: unset; cursor: pointer; display: flex; --burguer-dimensions: 50px; /*dimensiones*/ --burguer-stroke-color: black; /*stroke color*/ --burguer-stroke-width: 2px; /*stroke width*/ --burguer-duration: 600ms; /*animation duration*/ --burguer-easing: ease; /*animation ease*/ --burguer-rounded: round; /*redondeado*/ stroke-linecap: var(--burguer-rounded); width: var(--burguer-dimensions); height: var(--burguer-dimensions); }.bc-burguer-style1:focus-visible{outline: auto;} .bc-burguer-style1__line--line1 { fill: none; stroke: var(--burguer-stroke-color); transition: stroke-dasharray var(--burguer-duration) var(--burguer-easing), stroke-dashoffset var(--burguer-duration) var(--burguer-easing); stroke-dasharray: 60 207; stroke-width: var(--burguer-stroke-width); } .bc-burguer-style1__line--line2 { fill: none; stroke: var(--burguer-stroke-color); transition: stroke-dasharray var(--burguer-duration) var(--burguer-easing), stroke-dashoffset var(--burguer-duration) var(--burguer-easing); stroke-dasharray: 60 30; stroke-width: var(--burguer-stroke-width); } .bc-burguer-style1__line--line3 { fill: none; stroke: var(--burguer-stroke-color); transition: stroke-dasharray var(--burguer-duration) var(--burguer-easing), stroke-dashoffset var(--burguer-duration) var(--burguer-easing); stroke-dasharray: 60 207; stroke-width: var(--burguer-stroke-width); } .bc-burguer-style1--opened .bc-burguer-style1__line--line1 { stroke-dasharray: 90 207; stroke-dashoffset: -134; stroke-width: var(--burguer-stroke-width); } .bc-burguer-style1--opened .bc-burguer-style1__line--line2 { stroke-dasharray: 1 60; stroke-dashoffset: -30; stroke-width: var(--burguer-stroke-width); } .bc-burguer-style1--opened .bc-burguer-style1__line--line3 { stroke-dasharray: 90 207; stroke-dashoffset: -134; stroke-width: var(--burguer-stroke-width); } /*style2*/ .bc-burguer-style2, .bc-burguer-style2 *, .bc-burguer-style2 *::before, .bc-burguer-style2 *::after{ will-change: transform; } .bc-burguer-style2 svg{ overflow: unset !important; min-width: unset !important; min-height: unset !important; } .bc-burguer-style2 { all: unset; overflow: hidden; display: flex; cursor: pointer; --burguer-dimensions: 50px; /*dimensiones*/ --burguer-stroke-color: black; /*stroke color*/ --burguer-stroke-width: 2px; /*stroke width*/ --burguer-duration: 600ms; /*animation duration*/ --burguer-easing: cubic-bezier(0.4, 0, 0.2, 1); /*animation ease*/ --burguer-rounded: 100px; /*redondeado*/ --burguer-reversed: 1; /*reversed*/ }.bc-burguer-style2:focus-visible{outline: auto;} .bc-burguer-style2--reversed{ --burguer-reversed: -1; /*reversed*/ } .bc-burguer-style2__wrapper { width: var(--burguer-dimensions); height: var(--burguer-dimensions); display: flex; flex-direction: column; justify-content: space-between; transition: transform var(--burguer-duration) var(--burguer-easing); } .bc-burguer-style2__line { background: var(--burguer-stroke-color); width: 100%; height: var(--burguer-stroke-width); border-radius: var(--burguer-rounded); } .bc-burguer-style2__line--half-first { width: 50%; background: var(--burguer-stroke-color); height: var(--burguer-stroke-width); transition: transform var(--burguer-duration) var(--burguer-easing); transform-origin: right; border-radius: var(--burguer-rounded); } .bc-burguer-style2--reversed .bc-burguer-style2__line--half-first{ align-self: flex-end; transform-origin: left; } .bc-burguer-style2__line--half-last { width: 50%; background: var(--burguer-stroke-color); height: var(--burguer-stroke-width); align-self: flex-end; transition: transform var(--burguer-duration) var(--burguer-easing); transform-origin: left; border-radius: var(--burguer-rounded); } .bc-burguer-style2--reversed .bc-burguer-style2__line--half-last{ align-self: flex-start; transform-origin: right; } .bc-burguer-style2--opened .bc-burguer-style2__wrapper { transform: rotate(calc(-45deg * var(--burguer-reversed))); } .bc-burguer-style2--opened .bc-burguer-style2__line--half-first { transform: rotate(calc(-90deg * var(--burguer-reversed))) translateX(calc(var(--burguer-stroke-width)/2*var(--burguer-reversed))); } .bc-burguer-style2--opened .bc-burguer-style2__line--half-last { transform: rotate(calc(-90deg * var(--burguer-reversed))) translateX(calc(var(--burguer-stroke-width)/2*var(--burguer-reversed)*-1)); } /*style3*/ .bc-burguer-style3, .bc-burguer-style3 *, .bc-burguer-style3 *::before, .bc-burguer-style3 *::after{ will-change: transform; } .bc-burguer-style3 svg{ overflow: unset !important; min-width: unset !important; min-height: unset !important; } .bc-burguer-style3 { all: unset; cursor: pointer; display: block; position: relative; --burguer-dimensions: 50px; /*dimensiones*/ --burguer-stroke-width: 2px; /*!!!establecer un maximo de 4px!!!*/ /*stroke width*/ --burguer-stroke-color: black; /*stroke color*/ --burguer-duration: 200ms; /*animation duration*/ --burguer-easing: cubic-bezier(0.4, 0, 0.2, 1); /*animation ease*/ width: var(--burguer-dimensions); height: var(--burguer-dimensions); --burguer-rounded: 100px; /*redondeado*/ }.bc-burguer-style3:focus-visible{outline: auto;} .bc-burguer-style3__line { display: block; width: 100%; position: relative; top: 0; border-radius: var(--burguer-rounded); height: var(--burguer-stroke-width); margin: calc(var(--burguer-stroke-width)*3) 0; background: var(--burguer-stroke-color); transition: top var(--burguer-duration) var(--burguer-duration), transform var(--burguer-duration); transition-timing-function: var(--burguer-easing); } .bc-burguer-style3--opened .bc-burguer-style3__line { transition: top var(--burguer-duration), transform var(--burguer-duration) var(--burguer-duration); transition-timing-function: var(--burguer-easing); } .bc-burguer-style3--opened .bc-burguer-style3__line:first-child { top: calc(var(--burguer-stroke-width)*2); -webkit-transform: rotate(45deg); transform: rotate(45deg); } .bc-burguer-style3--opened .bc-burguer-style3__line:last-child { top: calc(var(--burguer-stroke-width)*-2); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } /*style4*/ .bc-burguer-style4, .bc-burguer-style4 *, .bc-burguer-style4 *::before, .bc-burguer-style4 *::after{ will-change: transform; } .bc-burguer-style4 svg{ overflow: unset !important; min-width: unset !important; min-height: unset !important; } .bc-burguer-style4 { all: unset; cursor: pointer; display: flex; align-items: center; justify-content: center; --burguer-dimensions: 50px; /*dimensiones*/ --burguer-stroke-width: 2px; /*stroke width*/ --burguer-stroke-color: black; /*stroke color*/ --burguer-duration: 300ms; /*animation duration*/ --burguer-easing: cubic-bezier(0.23, 1, 0.32, 1); /*animation ease*/ width: var(--burguer-dimensions); height: var(--burguer-dimensions); --burguer-rounded: 100px; /*redondeado*/ }.bc-burguer-style4:focus-visible{outline: auto;} .bc-burguer-style4__line, .bc-burguer-style4__line::before, .bc-burguer-style4__line::after { display: block; width: 100%; height: var(--burguer-stroke-width); background-color: var(--burguer-stroke-color); } .bc-burguer-style4__line { position: relative; border-radius: var(--burguer-rounded); } .bc-burguer-style4__line::before, .bc-burguer-style4__line::after { position: absolute; border-radius: var(--burguer-rounded); left: 0; width: 100%; content: ''; } .bc-burguer-style4__line::before { top: calc(var(--burguer-dimensions)/4); transition: top var(--burguer-duration) var(--burguer-duration) var(--burguer-easing), transform var(--burguer-duration) var(--burguer-easing); } .bc-burguer-style4__line::after { bottom: calc(var(--burguer-dimensions)/4); transition: bottom var(--burguer-duration) var(--burguer-duration) var(--burguer-easing), transform var(--burguer-duration) var(--burguer-easing); } .bc-burguer-style4--opened .bc-burguer-style4__line { background: rgba(255, 255, 255, 0); } .bc-burguer-style4--opened .bc-burguer-style4__line::before { top: 0; transition: top var(--burguer-duration) var(--burguer-easing), transform var(--burguer-duration) var(--burguer-duration) var(--burguer-easing); transform: rotate(-45deg); } .bc-burguer-style4--opened .bc-burguer-style4__line::after { bottom: 0; transition: bottom var(--burguer-duration) var(--burguer-easing), transform var(--burguer-duration) var(--burguer-duration) var(--burguer-easing); transform: rotate(45deg); } /*style5*/ .bc-burguer-style5, .bc-burguer-style5 *, .bc-burguer-style5 *::before, .bc-burguer-style5 *::after{ will-change: transform; } .bc-burguer-style5 svg{ overflow: unset !important; min-width: unset !important; min-height: unset !important; } .bc-burguer-style5 { all: unset; cursor: pointer; display: flex; justify-content: center; align-items: center; position: relative; --burguer-dimensions: 50px; /*dimensiones*/ --burguer-stroke-width: 2px; /*stroke width*/ --burguer-stroke-color: black; /*stroke color*/ --burguer-duration: 300ms; /*animation duration*/ --burguer-easing: cubic-bezier(0.23, 1, 0.32, 1); /*animation ease*/ height: var(--burguer-dimensions); width: var(--burguer-dimensions); --burguer-rounded: 100px; /*redondeado*/ transition: all var(--burguer-duration); --burguer-reversed: 1; /*reversed*/ }.bc-burguer-style5:focus-visible{outline: auto;} .bc-burguer-style5--reversed{ --burguer-reversed: -1; /*reversed*/ } .bc-burguer-style5__line { height: var(--burguer-stroke-width); background: var(--burguer-stroke-color); width: var(--burguer-dimensions); border-radius: var(--burguer-rounded); display: inline-block; position: absolute; top: 50%; transition: all var(--burguer-duration); transition-timing-function: var(--burguer-easing); } .bc-burguer-style5__line::before { content: " "; position: absolute; top: calc(var(--burguer-stroke-width)*-1); display: inline-block; height: var(--burguer-stroke-width); background: var(--burguer-stroke-color); transform: translateY(calc(var(--burguer-dimensions)*-0.1)); width: var(--burguer-dimensions); border-radius: var(--burguer-rounded); transition: all var(--burguer-duration); transition-timing-function: var(--burguer-easing); } .bc-burguer-style5--opened .bc-burguer-style5__line { transform: rotate(calc(45deg * var(--burguer-reversed))); background: var(--burguer-stroke-color); } .bc-burguer-style5--opened .bc-burguer-style5__line::before { top: unset; transform: rotate(calc(-90deg * var(--burguer-reversed))); background: var(--burguer-stroke-color); } .bc-burguer-style5--opened:hover .bc-burguer-style5__line::before { top: unset; } /*style6*/ .bc-burguer-style6, .bc-burguer-style6 *, .bc-burguer-style6 *::before, .bc-burguer-style6 *::after{ will-change: transform; } .bc-burguer-style6 svg{ overflow: unset !important; min-width: unset !important; min-height: unset !important; } .bc-burguer-style6 { all: unset; cursor: pointer; --burguer-dimensions: 50px; /*dimensiones*/ --burguer-stroke-width: 2px; /*stroke width*/ --burguer-stroke-color: black; /*stroke color*/ --burguer-duration: 500ms; /*animation duration*/ --burguer-easing: ease; /*animation ease*/ width: var(--burguer-dimensions); height: var(--burguer-dimensions); --burguer-rounded: 100px; /*redondeado*/ transition-duration: var(--burguer-duration); transition-timing-function: var(--burguer-easing); --burguer-reversed: 1; /*reversed*/ }.bc-burguer-style6:focus-visible{outline: auto;} .bc-burguer-style6--reversed{ --burguer-reversed: -1; /*reversed*/ } .bc-burguer-style6__icon { transition-duration: var(--burguer-duration); transition-timing-function: var(--burguer-easing); position: absolute; height: var(--burguer-stroke-width); width: var(--burguer-dimensions); border-radius: var(--burguer-rounded); top: calc(var(--burguer-dimensions)/2); background-color: var(--burguer-stroke-color); } .bc-burguer-style6__icon:before { transition-duration: var(--burguer-duration); transition-timing-function: var(--burguer-easing); position: absolute; width: var(--burguer-dimensions); height: var(--burguer-stroke-width); border-radius: var(--burguer-rounded); top: calc(var(--burguer-dimensions)/-3); background-color: var(--burguer-stroke-color); content: ""; } .bc-burguer-style6__icon:after { transition-duration: var(--burguer-duration); transition-timing-function: var(--burguer-easing); position: absolute; width: var(--burguer-dimensions); height: var(--burguer-stroke-width); border-radius: var(--burguer-rounded); top: calc(var(--burguer-dimensions)/3); background-color: var(--burguer-stroke-color); content: ""; } .bc-burguer-style6--opened .bc-burguer-style6__icon { transition-duration: var(--burguer-duration); transition-timing-function: var(--burguer-easing); background: transparent; } .bc-burguer-style6--opened .bc-burguer-style6__icon:before { transform: rotateZ(calc(45deg * var(--burguer-reversed))) scaleX(1.25) translate(calc(var(--burguer-dimensions)/4.615 * var(--burguer-reversed)), calc(var(--burguer-dimensions)/4.615)); } .bc-burguer-style6--opened .bc-burguer-style6__icon:after { transform: rotateZ(calc(-45deg * var(--burguer-reversed))) scaleX(1.25) translate(calc(var(--burguer-dimensions)/5 * var(--burguer-reversed)), calc(var(--burguer-dimensions)/-5)); } /*style7*/ .bc-burguer-style7, .bc-burguer-style7 *, .bc-burguer-style7 *::before, .bc-burguer-style7 *::after{ will-change: transform; } .bc-burguer-style7 svg{ overflow: unset !important; min-width: unset !important; min-height: unset !important; } .bc-burguer-style7 { all: unset; cursor: pointer; display: flex; justify-content: center; align-items: center; position: relative; --burguer-dimensions: 50px; /*dimensiones*/ --burguer-stroke-width: 2px; /*stroke width*/ --burguer-stroke-color: black; /*stroke color*/ --burguer-duration: 600ms; /*animation duration*/ --burguer-easing: cubic-bezier(0.23, 1, 0.32, 1); /*animation ease*/ height: var(--burguer-dimensions); width: var(--burguer-dimensions); --burguer-rounded: 100px; /*redondeado*/ transition: all var(--burguer-duration); --burguer-reversed: 1; /*reversed*/ }.bc-burguer-style7:focus-visible{outline: auto;} .bc-burguer-style7--reversed{ --burguer-reversed: -1; /*reversed*/ } .bc-burguer-style7__line { height: var(--burguer-stroke-width); background: var(--burguer-stroke-color); width: var(--burguer-dimensions); border-radius: var(--burguer-rounded); display: inline-block; position: absolute; top: 50%; transition: all var(--burguer-duration); transition-timing-function: var(--burguer-easing); } .bc-burguer-style7__line::before { content: " "; position: absolute; top: calc(var(--burguer-stroke-width)*-1); display: inline-block; height: var(--burguer-stroke-width); background: var(--burguer-stroke-color); transform: translateY(calc(var(--burguer-dimensions)*-0.1)); width: var(--burguer-dimensions); border-radius: var(--burguer-rounded); transition: all var(--burguer-duration); transition-timing-function: var(--burguer-easing); } .bc-burguer-style7--opened .bc-burguer-style7__line { transform: rotate(calc(45deg * var(--burguer-reversed))); background: var(--burguer-stroke-color); } .bc-burguer-style7--opened .bc-burguer-style7__line::before { top: unset; transform: rotate(calc(90deg * var(--burguer-reversed))); background: var(--burguer-stroke-color); } .bc-burguer-style7--opened:hover .bc-burguer-style7__line::before { top: unset; } /*style8*/ .bc-burguer-style8, .bc-burguer-style8 *, .bc-burguer-style8 *::before, .bc-burguer-style8 *::after{ will-change: transform; } .bc-burguer-style8 svg{ overflow: unset !important; min-width: unset !important; min-height: unset !important; } .bc-burguer-style8 { all: unset; cursor: pointer; --burguer-dimensions: 50px; /*dimensiones*/ --burguer-stroke-width: 2px; /*stroke width*/ --burguer-stroke-color: black; /*stroke color*/ --burguer-duration: 500ms; /*animation duration*/ --burguer-easing: ease; /*animation ease*/ width: var(--burguer-dimensions); height: var(--burguer-dimensions); --burguer-rounded: 100px; /*redondeado*/ transition-duration: var(--burguer-duration); transition-timing-function: var(--burguer-easing); position: relative; }.bc-burguer-style8:focus-visible{outline: auto;} .bc-burguer-style8__left-icon { height: var(--burguer-stroke-width); width: calc(var(--burguer-dimensions)/2); top: calc(var(--burguer-dimensions)/2); border-top-left-radius: var(--burguer-rounded); border-bottom-left-radius: var(--burguer-rounded); transition-duration: var(--burguer-duration); transition-timing-function: var(--burguer-easing); position: absolute; background-color: var(--burguer-stroke-color); } .bc-burguer-style8__left-icon:before { width: calc(var(--burguer-dimensions)/2); height: var(--burguer-stroke-width); top: calc(var(--burguer-dimensions)/-3); border-top-left-radius: var(--burguer-rounded); border-bottom-left-radius: var(--burguer-rounded); transition-duration: var(--burguer-duration); transition-timing-function: var(--burguer-easing); position: absolute; background-color: var(--burguer-stroke-color); content: ""; } .bc-burguer-style8__left-icon:after { width: calc(var(--burguer-dimensions)/2); height: var(--burguer-stroke-width); top: calc(var(--burguer-dimensions)/3); border-top-left-radius: var(--burguer-rounded); border-bottom-left-radius: var(--burguer-rounded); transition-duration: var(--burguer-duration); transition-timing-function: var(--burguer-easing); position: absolute; background-color: var(--burguer-stroke-color); content: ""; } .bc-burguer-style8__left-icon:hover { cursor: pointer; } .bc-burguer-style8__right-icon { height: var(--burguer-stroke-width); width: calc(var(--burguer-dimensions)/2); top: calc(var(--burguer-dimensions)/2); left: calc(var(--burguer-dimensions)/2); border-top-right-radius: var(--burguer-rounded); border-bottom-right-radius: var(--burguer-rounded); transition-duration: var(--burguer-duration); transition-timing-function: var(--burguer-easing); position: absolute; background-color: var(--burguer-stroke-color); } .bc-burguer-style8__right-icon:before { width: calc(var(--burguer-dimensions)/2); height: var(--burguer-stroke-width); top: calc(var(--burguer-dimensions)/-3); border-top-right-radius: var(--burguer-rounded); border-bottom-right-radius: var(--burguer-rounded); transition-duration: var(--burguer-duration); transition-timing-function: var(--burguer-easing); position: absolute; background-color: var(--burguer-stroke-color); content: ""; } .bc-burguer-style8__right-icon:after { width: calc(var(--burguer-dimensions)/2); height: var(--burguer-stroke-width); top: calc(var(--burguer-dimensions)/3);; border-top-right-radius: var(--burguer-rounded); border-bottom-right-radius: var(--burguer-rounded); transition-duration: var(--burguer-duration); transition-timing-function: var(--burguer-easing); position: absolute; background-color: var(--burguer-stroke-color); content: ""; } .bc-burguer-style8--opened .bc-burguer-style8__left-icon { transition-duration: var(--burguer-duration); transition-timing-function: var(--burguer-easing); background: transparent; } .bc-burguer-style8--opened .bc-burguer-style8__left-icon:before { transform: rotateZ(45deg) scaleX(1.4) translate(calc(var(--burguer-dimensions)/15), calc(var(--burguer-dimensions)/15)); } .bc-burguer-style8--opened .bc-burguer-style8__left-icon:after { transform: rotateZ(-45deg) scaleX(1.4) translate(calc(var(--burguer-dimensions)/15), calc(var(--burguer-dimensions)/-15)); } .bc-burguer-style8--opened .bc-burguer-style8__right-icon { transition-duration: var(--burguer-duration); transition-timing-function: var(--burguer-easing); background: transparent; } .bc-burguer-style8--opened .bc-burguer-style8__right-icon:before { transform: rotateZ(-45deg) scaleX(1.4) translate(calc(var(--burguer-dimensions)/-15), calc(var(--burguer-dimensions)/15)); } .bc-burguer-style8--opened .bc-burguer-style8__right-icon:after { transform: rotateZ(45deg) scaleX(1.4) translate(calc(var(--burguer-dimensions)/-15), calc(var(--burguer-dimensions)/-15)); } /*style9*/ .bc-burguer-style9, .bc-burguer-style9 *, .bc-burguer-style9 *::before, .bc-burguer-style9 *::after{ will-change: transform; } .bc-burguer-style9 svg{ overflow: unset !important; min-width: unset !important; min-height: unset !important; } .bc-burguer-style9 { all: unset; cursor: pointer; display: flex; align-items: center; justify-content: center; --burguer-dimensions: 50px; /*dimensiones*/ --burguer-stroke-width: 2px; /*stroke width*/ --burguer-stroke-color: black; /*stroke color*/ --burguer-duration: 300ms; /*animation duration*/ --burguer-easing: cubic-bezier(0.23, 1, 0.32, 1); /*animation ease*/ width: var(--burguer-dimensions); height: var(--burguer-dimensions); --burguer-rounded: 100px; /*redondeado*/ }.bc-burguer-style9:focus-visible{outline: auto;} .bc-burguer-style9__line, .bc-burguer-style9__line::before, .bc-burguer-style9__line::after { display: block; width: 100%; height: var(--burguer-stroke-width); background-color: var(--burguer-stroke-color); border-radius: var(--burguer-rounded); } .bc-burguer-style9__line { position: relative; } .bc-burguer-style9__line::before, .bc-burguer-style9__line::after { position: absolute; left: 0; width: 100%; content: ''; } .bc-burguer-style9__line::before { top: calc(var(--burguer-dimensions)/4); transition: top var(--burguer-duration) var(--burguer-easing); } .bc-burguer-style9__line::after { bottom: calc(var(--burguer-dimensions)/4); transition: bottom var(--burguer-duration) var(--burguer-easing); } .bc-burguer-style9--opened .bc-burguer-style9__line { background: rgba(255, 255, 255, 0); } .bc-burguer-style9--opened .bc-burguer-style9__line::before { top: 0; transition: top var(--burguer-duration) var(--burguer-easing); } .bc-burguer-style9--opened .bc-burguer-style9__line::after { bottom: 0; transition: bottom var(--burguer-duration) var(--burguer-easing); } /*style10*/ .bc-burguer-style10, .bc-burguer-style10 *, .bc-burguer-style10 *::before, .bc-burguer-style10 *::after{ will-change: transform; } .bc-burguer-style10 svg{ overflow: unset !important; min-width: unset !important; min-height: unset !important; } .bc-burguer-style10{ all: unset; cursor: pointer; display: flex; flex-direction: column; justify-content: center; align-items: center; --burguer-dimensions: 50px; /*dimensiones*/ --burguer-rotate: calc(var(--burguer-dimensions) * -0.30); --burguer-stroke-width: 2px; /*stroke width*/ --burguer-stroke-color: black; /*stroke color*/ --burguer-duration: 600ms; /*animation duration*/ --burguer-easing: ease; /*animation ease*/ width: calc(var(--burguer-dimensions)); height: calc(var(--burguer-dimensions)); --burguer-rounded: 100px; /*redondeado*/ transition: var(--burguer-duration) var(--burguer-easing); --burguer-reversed: 1; /*reversed*/ }.bc-burguer-style10:focus-visible{outline: auto;} .bc-burguer-style10--reversed{ --burguer-reversed: -1; /*reversed*/ } .bc-burguer-style10__first-line{ width: 100%; height: var(--burguer-stroke-width); border-radius: var(--burguer-rounded); background: var(--burguer-stroke-color); transition: var(--burguer-duration) var(--burguer-easing); } .bc-burguer-style10__second-line{ width: 100%; height: var(--burguer-stroke-width); border-radius: var(--burguer-rounded); margin-top: 30%; background: var(--burguer-stroke-color); transition: var(--burguer-duration) var(--burguer-easing); } .bc-burguer-style10--opened{ transform: rotateZ(180deg) } .bc-burguer-style10--opened .bc-burguer-style10__first-line{ background: var(--burguer-stroke-color); transform: translate(0, 100%) rotateZ(calc(45deg * var(--burguer-reversed))); } .bc-burguer-style10--opened .bc-burguer-style10__second-line{ background: var(--burguer-stroke-color); width: 100%; transform: translateY(var(--burguer-rotate)) rotateZ(calc(-45deg * var(--burguer-reversed))); } /* * CORE BURGUER - TASTY HAMBURGERS */ .hamburger { cursor: pointer; background-color: transparent; --burguer-dimensions: 50px; --burguer-stroke-color: black; /*stroke color*/ --burguer-duration: 600ms; /*animation duration*/ --burguer-easing: ease; /*animation ease*/ /*TASTY HAMBURGERS SPECIFIC*/ --hamburger-layer-spacing: 6px; --hamburger-layer-height: 4px; --hamburger-border-radius: 4px; } .hamburger-box { display: inline-block; position: relative; width: var(--burguer-dimensions); /**/ height: calc(var(--hamburger-layer-spacing) * 3 + var(--hamburger-layer-height) * 2); } .hamburger-inner { display: block; top: 50%; margin-top: calc(var(--hamburger-layer-height) / -2); } .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after { width: var(--burguer-dimensions); /**/ height: var(--hamburger-layer-height); /**/ background-color: var(--burguer-stroke-color); /**/ border-radius: var(--hamburger-border-radius); /**/ position: absolute; transition-property: transform; transition-duration: var(--burguer-duration); transition-timing-function: var(--burguer-easing); } .hamburger-inner::before, .hamburger-inner::after { content: ""; display: block; } .hamburger-inner::before { top: calc((var(--hamburger-layer-spacing) + var(--hamburger-layer-height)) * -1); } .hamburger-inner::after { bottom: calc((var(--hamburger-layer-spacing) + var(--hamburger-layer-height)) * -1); } /* * Slider */ .hamburger--slider .hamburger-inner { top: calc(var(--hamburger-layer-height) / 2); } .hamburger--slider .hamburger-inner::before { top: calc(var(--hamburger-layer-spacing) + var(--hamburger-layer-height)); transition-property: transform, opacity; transition-duration: var(--burguer-duration); transition-timing-function: var(--burguer-easing); } .hamburger--slider .hamburger-inner::after { top: calc(var(--hamburger-layer-spacing) * 2 + var(--hamburger-layer-height) * 2); } .hamburger--slider--opened .hamburger-inner { transform: translate3d(0, calc(var(--hamburger-layer-spacing) + var(--hamburger-layer-height)), 0) rotate(45deg); } .hamburger--slider--opened .hamburger-inner::before { transform: rotate(-45deg) translate3d(calc(var(--burguer-dimensions) / -7), calc(var(--hamburger-layer-spacing) / -1), 0); opacity: 0; } .hamburger--slider--opened .hamburger-inner::after { transform: translate3d(0, calc((var(--hamburger-layer-spacing) + var(--hamburger-layer-height)) * -2), 0) rotate(-90deg); } /* * Slider Reverse */ .hamburger--slider-r .hamburger-inner { top: calc(var(--hamburger-layer-height) / 2); } .hamburger--slider-r .hamburger-inner::before { top: calc(var(--hamburger-layer-spacing) + var(--hamburger-layer-height)); transition-property: transform, opacity; transition-duration: var(--burguer-duration); transition-timing-function: var(--burguer-easing); } .hamburger--slider-r .hamburger-inner::after { top: calc(var(--hamburger-layer-spacing) * 2 + var(--hamburger-layer-height) * 2); } .hamburger--slider-r--opened .hamburger-inner { transform: translate3d(0, calc(var(--hamburger-layer-spacing) + var(--hamburger-layer-height)), 0) rotate(-45deg); } .hamburger--slider-r--opened .hamburger-inner::before { transform: rotate(45deg) translate3d(calc(var(--burguer-dimensions) / 7), calc(var(--hamburger-layer-spacing) / -1), 0); opacity: 0; } .hamburger--slider-r--opened .hamburger-inner::after { transform: translate3d(0, calc((var(--hamburger-layer-spacing) + var(--hamburger-layer-height)) * -2), 0) rotate(90deg); } /* * 3DX */ .hamburger--3dx .hamburger-box { perspective: calc(var(--burguer-dimensions) * 2); } .hamburger--3dx .hamburger-inner { transition: transform var(--burguer-duration) var(--burguer-easing), background-color 0s calc(var(--burguer-duration) / 1.75) var(--burguer-easing); } .hamburger--3dx .hamburger-inner::before, .hamburger--3dx .hamburger-inner::after { transition: transform 0s calc(var(--burguer-duration) / 1.75) var(--burguer-easing); } .hamburger--3dx--opened .hamburger-inner { background-color: transparent !important; transform: rotateY(180deg); } .hamburger--3dx--opened .hamburger-inner::before { transform: translate3d(0, calc(var(--hamburger-layer-spacing) + var(--hamburger-layer-height)), 0) rotate(45deg); } .hamburger--3dx--opened .hamburger-inner::after { transform: translate3d(0, calc((var(--hamburger-layer-spacing) + var(--hamburger-layer-height)) * -1), 0) rotate(-45deg); } /* * 3DX Reverse */ .hamburger--3dx-r .hamburger-box { perspective: calc(var(--burguer-dimensions) * 2); } .hamburger--3dx-r .hamburger-inner { transition: transform var(--burguer-duration) var(--burguer-easing), background-color 0s calc(var(--burguer-duration) / 1.75) var(--burguer-easing); } .hamburger--3dx-r .hamburger-inner::before, .hamburger--3dx-r .hamburger-inner::after { transition: transform 0s calc(var(--burguer-duration) / 1.75) var(--burguer-easing); } .hamburger--3dx-r--opened .hamburger-inner { background-color: transparent !important; transform: rotateY(-180deg); } .hamburger--3dx-r--opened .hamburger-inner::before { transform: translate3d(0, calc(var(--hamburger-layer-spacing) + var(--hamburger-layer-height)), 0) rotate(45deg); } .hamburger--3dx-r--opened .hamburger-inner::after { transform: translate3d(0, calc((var(--hamburger-layer-spacing) + var(--hamburger-layer-height)) * -1), 0) rotate(-45deg); } /* * 3DY */ .hamburger--3dy .hamburger-box { perspective: calc(var(--burguer-dimensions) * 2); } .hamburger--3dy .hamburger-inner { transition: transform var(--burguer-duration) var(--burguer-easing), background-color 0s calc(var(--burguer-duration) / 1.75) var(--burguer-easing); } .hamburger--3dy .hamburger-inner::before, .hamburger--3dy .hamburger-inner::after { transition: transform 0s calc(var(--burguer-duration) / 1.75) var(--burguer-easing); } .hamburger--3dy--opened .hamburger-inner { background-color: transparent !important; transform: rotateX(-180deg); } .hamburger--3dy--opened .hamburger-inner::before { transform: translate3d(0, calc(var(--hamburger-layer-spacing) + var(--hamburger-layer-height)), 0) rotate(45deg); } .hamburger--3dy--opened .hamburger-inner::after { transform: translate3d(0, calc((var(--hamburger-layer-spacing) + var(--hamburger-layer-height)) * -1), 0) rotate(-45deg); } /* * 3DY Reverse */ .hamburger--3dy-r .hamburger-box { perspective: calc(var(--burguer-dimensions) * 2); } .hamburger--3dy-r .hamburger-inner { transition: transform var(--burguer-duration) var(--burguer-easing), background-color 0s calc(var(--burguer-duration) / 1.75) var(--burguer-easing); } .hamburger--3dy-r .hamburger-inner::before, .hamburger--3dy-r .hamburger-inner::after { transition: transform 0s calc(var(--burguer-duration) / 1.75) var(--burguer-easing); } .hamburger--3dy-r--opened .hamburger-inner { background-color: transparent !important; transform: rotateX(180deg); } .hamburger--3dy-r--opened .hamburger-inner::before { transform: translate3d(0, calc(var(--hamburger-layer-spacing) + var(--hamburger-layer-height)), 0) rotate(45deg); } .hamburger--3dy-r--opened .hamburger-inner::after { transform: translate3d(0, calc((var(--hamburger-layer-spacing) + var(--hamburger-layer-height)) * -1), 0) rotate(-45deg); } /* * 3DXY */ .hamburger--3dxy .hamburger-box { perspective: calc(var(--burguer-dimensions) * 2); } .hamburger--3dxy .hamburger-inner { transition: transform var(--burguer-duration) var(--burguer-easing), background-color 0s calc(var(--burguer-duration) / 1.75) var(--burguer-easing); } .hamburger--3dxy .hamburger-inner::before, .hamburger--3dxy .hamburger-inner::after { transition: transform 0s calc(var(--burguer-duration) / 1.75) var(--burguer-easing); } .hamburger--3dxy--opened .hamburger-inner { background-color: transparent !important; transform: rotateX(180deg) rotateY(180deg); } .hamburger--3dxy--opened .hamburger-inner::before { transform: translate3d(0, calc(var(--hamburger-layer-spacing) + var(--hamburger-layer-height)), 0) rotate(45deg); } .hamburger--3dxy--opened .hamburger-inner::after { transform: translate3d(0, calc((var(--hamburger-layer-spacing) + var(--hamburger-layer-height)) * -1), 0) rotate(-45deg); } /* * 3DXY Reverse */ .hamburger--3dxy-r .hamburger-box { perspective: calc(var(--burguer-dimensions) * 2); } .hamburger--3dxy-r .hamburger-inner { transition: transform var(--burguer-duration) var(--burguer-easing), background-color 0s calc(var(--burguer-duration) / 1.75) var(--burguer-easing); } .hamburger--3dxy-r .hamburger-inner::before, .hamburger--3dxy-r .hamburger-inner::after { transition: transform 0s calc(var(--burguer-duration) / 1.75) var(--burguer-easing); } .hamburger--3dxy-r--opened .hamburger-inner { background-color: transparent !important; transform: rotateX(180deg) rotateY(180deg) rotateZ(-180deg); } .hamburger--3dxy-r--opened .hamburger-inner::before { transform: translate3d(0, calc(var(--hamburger-layer-spacing) + var(--hamburger-layer-height)), 0) rotate(45deg); } .hamburger--3dxy-r--opened .hamburger-inner::after { transform: translate3d(0, calc((var(--hamburger-layer-spacing) + var(--hamburger-layer-height)) * -1), 0) rotate(-45deg); } /* * Arrow */ .hamburger--arrow--opened .hamburger-inner::before { transform: translate3d(calc(var(--burguer-dimensions) * -0.2), 0, 0) rotate(-45deg) scale(0.7, 1); } .hamburger--arrow--opened .hamburger-inner::after { transform: translate3d(calc(var(--burguer-dimensions) * -0.2), 0, 0) rotate(45deg) scale(0.7, 1); } /* * Arrow Reverse */ .hamburger--arrow-r--opened .hamburger-inner::before { transform: translate3d(calc(var(--burguer-dimensions) * 0.2), 0, 0) rotate(45deg) scale(0.7, 1); } .hamburger--arrow-r--opened .hamburger-inner::after { transform: translate3d(calc(var(--burguer-dimensions) * 0.2), 0, 0) rotate(-45deg) scale(0.7, 1); } /* * Arrow Alt */ .hamburger--arrowalt .hamburger-inner::before { transition: top var(--burguer-duration) var(--burguer-duration) var(--burguer-easing), transform var(--burguer-duration) var(--burguer-easing); } .hamburger--arrowalt .hamburger-inner::after { transition: bottom var(--burguer-duration) var(--burguer-duration) var(--burguer-easing), transform var(--burguer-duration) var(--burguer-easing); } .hamburger--arrowalt--opened .hamburger-inner::before { top: 0; transform: translate3d(calc(var(--burguer-dimensions) * -0.2), calc(var(--burguer-dimensions) * -0.25), 0) rotate(-45deg) scale(0.7, 1); transition: top var(--burguer-duration) var(--burguer-easing), transform var(--burguer-duration) var(--burguer-duration) var(--burguer-easing); } .hamburger--arrowalt--opened .hamburger-inner::after { bottom: 0; transform: translate3d(calc(var(--burguer-dimensions) * -0.2), calc(var(--burguer-dimensions) * 0.25), 0) rotate(45deg) scale(0.7, 1); transition: bottom var(--burguer-duration) var(--burguer-easing), transform var(--burguer-duration) var(--burguer-duration) var(--burguer-easing); } /* * Arrow Alt Reverse */ .hamburger--arrowalt-r .hamburger-inner::before { transition: top var(--burguer-duration) var(--burguer-duration) var(--burguer-easing), transform var(--burguer-duration) var(--burguer-easing); } .hamburger--arrowalt-r .hamburger-inner::after { transition: bottom var(--burguer-duration) var(--burguer-duration) var(--burguer-easing), transform var(--burguer-duration) var(--burguer-easing); } .hamburger--arrowalt-r--opened .hamburger-inner::before { top: 0; transform: translate3d(calc(var(--burguer-dimensions) * 0.2), calc(var(--burguer-dimensions) * -0.25) 0) rotate(45deg) scale(0.7, 1); transition: top var(--burguer-duration) var(--burguer-easing), transform var(--burguer-duration) var(--burguer-duration) var(--burguer-easing); } .hamburger--arrowalt-r--opened .hamburger-inner::after { bottom: 0; transform: translate3d(calc(var(--burguer-dimensions) * 0.2), calc(var(--burguer-dimensions) * 0.25) 0) rotate(-45deg) scale(0.7, 1); transition: bottom var(--burguer-duration) var(--burguer-easing), transform var(--burguer-duration) var(--burguer-duration) var(--burguer-easing); } /* * Arrow Turn */ .hamburger--arrowturn--opened .hamburger-inner { transform: rotate(-180deg); } .hamburger--arrowturn--opened .hamburger-inner::before { transform: translate3d(calc(var(--burguer-dimensions) * 0.2), 0, 0) rotate(45deg) scale(0.7, 1); } .hamburger--arrowturn--opened .hamburger-inner::after { transform: translate3d(calc(var(--burguer-dimensions) * 0.2), 0, 0) rotate(-45deg) scale(0.7, 1); } /* * Arrow Turn Reverse */ .hamburger--arrowturn-r--opened .hamburger-inner { transform: rotate(-180deg); } .hamburger--arrowturn-r--opened .hamburger-inner::before { transform: translate3d(calc(var(--burguer-dimensions) * -0.2), 0, 0) rotate(-45deg) scale(0.7, 1); } .hamburger--arrowturn-r--opened .hamburger-inner::after { transform: translate3d(calc(var(--burguer-dimensions) * -0.2), 0, 0) rotate(45deg) scale(0.7, 1); } /* * Boring */ .hamburger--boring .hamburger-inner, .hamburger--boring .hamburger-inner::before, .hamburger--boring .hamburger-inner::after { transition-property: none; } .hamburger--boring--opened .hamburger-inner { transform: rotate(45deg); } .hamburger--boring--opened .hamburger-inner::before { top: 0; opacity: 0; } .hamburger--boring--opened .hamburger-inner::after { bottom: 0; transform: rotate(-90deg); } /* * Collapse */ .hamburger--collapse .hamburger-inner { top: auto; bottom: 0; transition-duration: calc(var(--burguer-duration) * 0.65); transition-delay: calc(var(--burguer-duration) * 0.65); transition-timing-function: var(--burguer-easing); } .hamburger--collapse .hamburger-inner::after { top: calc((var(--hamburger-layer-spacing) * 2 + var(--hamburger-layer-height) * 2) * -1); transition: top var(--burguer-duration) var(--burguer-duration) var(--burguer-easing), opacity calc(var(--burguer-duration) * 0.5) var(--burguer-easing); } .hamburger--collapse .hamburger-inner::before { transition: top calc(var(--burguer-duration) * 0.6) var(--burguer-duration) var(--burguer-easing), transform calc(var(--burguer-duration) * 0.65) var(--burguer-easing); } .hamburger--collapse--opened .hamburger-inner { transform: translate3d(0, calc((var(--hamburger-layer-spacing) + var(--hamburger-layer-height)) * -1), 0) rotate(-45deg); transition-delay: calc(var(--burguer-duration) * 1.1); transition-timing-function: var(--burguer-easing); } .hamburger--collapse--opened .hamburger-inner::after { top: 0; opacity: 0; transition: top var(--burguer-duration) var(--burguer-easing), opacity calc(var(--burguer-duration) * 0.5) calc(var(--burguer-duration) * 1.1) var(--burguer-easing); } .hamburger--collapse--opened .hamburger-inner::before { top: 0; transform: rotate(-90deg); transition: top calc(var(--burguer-duration) * 0.5) calc(var(--burguer-duration) * 0.8) var(--burguer-easing), transform calc(var(--burguer-duration) * 0.65) calc(var(--burguer-duration) * 1.25) var(--burguer-easing); } /* * Collapse Reverse */ .hamburger--collapse-r .hamburger-inner { top: auto; bottom: 0; transition-duration: calc(var(--burguer-duration) * 0.65); transition-delay: calc(var(--burguer-duration) * 0.65); transition-timing-function: var(--burguer-easing); } .hamburger--collapse-r .hamburger-inner::after { top: calc((var(--hamburger-layer-spacing) * 2 + var(--hamburger-layer-height) * 2) * -1); transition: top var(--burguer-duration) var(--burguer-duration) var(--burguer-easing), opacity calc(var(--burguer-duration) * 0.5) var(--burguer-easing); } .hamburger--collapse-r .hamburger-inner::before { transition: top calc(var(--burguer-duration) * 0.6) var(--burguer-duration) var(--burguer-easing), transform calc(var(--burguer-duration) * 0.65) var(--burguer-easing); } .hamburger--collapse-r--opened .hamburger-inner { transform: translate3d(0, calc((var(--hamburger-layer-spacing) + var(--hamburger-layer-height)) * -1), 0) rotate(45deg); transition-delay: calc(var(--burguer-duration) * 1.1); transition-timing-function: var(--burguer-easing); } .hamburger--collapse-r--opened .hamburger-inner::after { top: 0; opacity: 0; transition: top var(--burguer-duration) var(--burguer-easing), opacity calc(var(--burguer-duration) * 0.5) calc(var(--burguer-duration) * 1.1) var(--burguer-easing); } .hamburger--collapse-r--opened .hamburger-inner::before { top: 0; transform: rotate(90deg); transition: top calc(var(--burguer-duration) * 0.5) calc(var(--burguer-duration) * 0.8) var(--burguer-easing), transform calc(var(--burguer-duration) * 0.65) calc(var(--burguer-duration) * 1.25) var(--burguer-easing); } /* * Elastic */ .hamburger--elastic .hamburger-inner { top: calc(var(--hamburger-layer-height) / 2); transition-duration: var(--burguer-duration); transition-timing-function: var(--burguer-easing); } .hamburger--elastic .hamburger-inner::before { top: calc(var(--hamburger-layer-height) + var(--hamburger-layer-spacing)); transition: opacity calc(var(--burguer-duration) * 0.45) var(--burguer-duration) var(--burguer-easing); } .hamburger--elastic .hamburger-inner::after { top: calc(var(--hamburger-layer-height) * 2 + var(--hamburger-layer-spacing) * 2); transition: transform var(--burguer-duration) var(--burguer-easing); } .hamburger--elastic--opened .hamburger-inner { transform: translate3d(0, calc(var(--hamburger-layer-height) + var(--hamburger-layer-spacing)), 0) rotate(135deg); transition-delay: calc(var(--burguer-duration) * 0.3); } .hamburger--elastic--opened .hamburger-inner::before { transition-delay: 0s; opacity: 0; } .hamburger--elastic--opened .hamburger-inner::after { transform: translate3d(0, calc((var(--hamburger-layer-height) + var(--hamburger-layer-spacing)) * -2), 0) rotate(-270deg); transition-delay: calc(var(--burguer-duration) * 0.3); } /* * Elastic Reverse */ .hamburger--elastic-r .hamburger-inner { top: calc(var(--hamburger-layer-height) / 2); transition-duration: var(--burguer-duration); transition-timing-function: var(--burguer-easing); } .hamburger--elastic-r .hamburger-inner::before { top: calc(var(--hamburger-layer-height) + var(--hamburger-layer-spacing)); transition: opacity calc(var(--burguer-duration) * 0.45) var(--burguer-duration) var(--burguer-easing); } .hamburger--elastic-r .hamburger-inner::after { top: calc(var(--hamburger-layer-height) * 2 + var(--hamburger-layer-spacing) * 2); transition: transform var(--burguer-duration) var(--burguer-easing); } .hamburger--elastic-r--opened .hamburger-inner { transform: translate3d(0, calc(var(--hamburger-layer-height) + var(--hamburger-layer-spacing)), 0) rotate(-135deg); transition-delay: calc(var(--burguer-duration) * 0.3); } .hamburger--elastic-r--opened .hamburger-inner::before { transition-delay: 0s; opacity: 0; } .hamburger--elastic-r--opened .hamburger-inner::after { transform: translate3d(0, calc((var(--hamburger-layer-height) + var(--hamburger-layer-spacing)) * -2), 0) rotate(270deg); transition-delay: calc(var(--burguer-duration) * 0.3); } /* * Emphatic */ .hamburger--emphatic .hamburger-inner { transition: background-color calc(var(--burguer-duration) * 0.7) var(--burguer-duration) var(--burguer-easing); } .hamburger--emphatic .hamburger-inner::before { left: 0; transition: transform calc(var(--burguer-duration) * 0.7) var(--burguer-easing), top calc(var(--burguer-duration) * 0.3) calc(var(--burguer-duration) * 0.7) var(--burguer-easing), left calc(var(--burguer-duration) * 0.7) var(--burguer-duration) var(--burguer-easing); } .hamburger--emphatic .hamburger-inner::after { top: calc(var(--hamburger-layer-height) + var(--hamburger-layer-spacing)); right: 0; transition: transform calc(var(--burguer-duration) * 0.7) var(--burguer-easing), top calc(var(--burguer-duration) * 0.3) calc(var(--burguer-duration) * 0.7) var(--burguer-easing), right calc(var(--burguer-duration) * 0.7) var(--burguer-duration) var(--burguer-easing); } .hamburger--emphatic--opened .hamburger-inner { transition-delay: 0s; transition-timing-function: var(--burguer-easing); background-color: transparent !important; } .hamburger--emphatic--opened .hamburger-inner::before { left: calc(var(--burguer-dimensions) * -2); top: calc(var(--burguer-dimensions) * -2); transform: translate3d(calc(var(--burguer-dimensions) * 2), calc(var(--burguer-dimensions) * 2), 0) rotate(45deg); transition: transform calc(var(--burguer-duration) * 0.7) var(--burguer-easing), top calc(var(--burguer-duration) * 0.3) calc(var(--burguer-duration) * 0.7) var(--burguer-easing), left calc(var(--burguer-duration) * 0.7) var(--burguer-duration) var(--burguer-easing); } .hamburger--emphatic--opened .hamburger-inner::after { right: calc(var(--burguer-dimensions) * -2); top: calc(var(--burguer-dimensions) * -2); transform: translate3d(calc(var(--burguer-dimensions) * -2), calc(var(--burguer-dimensions) * 2), 0) rotate(-45deg); transition: transform calc(var(--burguer-duration) * 0.7) var(--burguer-easing), top calc(var(--burguer-duration) * 0.3) calc(var(--burguer-duration) * 0.7) var(--burguer-easing), right calc(var(--burguer-duration) * 0.7) var(--burguer-duration) var(--burguer-easing); } /* * Emphatic Reverse */ .hamburger--emphatic-r .hamburger-inner { transition: background-color var(--burguer-duration) var(--burguer-duration) var(--burguer-easing); } .hamburger--emphatic-r .hamburger-inner::before { left: 0; transition: transform calc(var(--burguer-duration) * 0.7) var(--burguer-easing), top calc(var(--burguer-duration) * 0.3) calc(var(--burguer-duration) * 0.7) var(--burguer-easing), left calc(var(--burguer-duration) * 0.7) var(--burguer-duration) var(--burguer-easing); } .hamburger--emphatic-r .hamburger-inner::after { top: calc(var(--hamburger-layer-height) + var(--hamburger-layer-spacing)); right: 0; transition: transform calc(var(--burguer-duration) * 0.7) var(--burguer-easing), top calc(var(--burguer-duration) * 0.3) calc(var(--burguer-duration) * 0.7) var(--burguer-easing), right calc(var(--burguer-duration) * 0.7) var(--burguer-duration) var(--burguer-easing); } .hamburger--emphatic-r--opened .hamburger-inner { transition-delay: 0s; transition-timing-function: var(--burguer-easing); background-color: transparent !important; } .hamburger--emphatic-r--opened .hamburger-inner::before { left: calc(var(--burguer-dimensions) * -2); top: calc(var(--burguer-dimensions) * 2); transform: translate3d(calc(var(--burguer-dimensions) * 2), calc(var(--burguer-dimensions) * -2), 0) rotate(-45deg); transition: transform calc(var(--burguer-duration) * 0.7) var(--burguer-easing), top calc(var(--burguer-duration) * 0.3) calc(var(--burguer-duration) * 0.7) var(--burguer-easing), left calc(var(--burguer-duration) * 0.7) var(--burguer-duration) var(--burguer-easing); } .hamburger--emphatic-r--opened .hamburger-inner::after { right: calc(var(--burguer-dimensions) * -2); top: calc(var(--burguer-dimensions) * 2); transform: translate3d(calc(var(--burguer-dimensions) * -2), calc(var(--burguer-dimensions) * -2), 0) rotate(45deg); transition: transform calc(var(--burguer-duration) * 0.7) var(--burguer-easing), top calc(var(--burguer-duration) * 0.3) calc(var(--burguer-duration) * 0.7) var(--burguer-easing), right calc(var(--burguer-duration) * 0.7) var(--burguer-duration) var(--burguer-easing); } /* * Minus */ .hamburger--minus .hamburger-inner::before, .hamburger--minus .hamburger-inner::after { transition: bottom var(--burguer-duration) 0s var(--burguer-easing), top var(--burguer-duration) 0s var(--burguer-easing), opacity 0s var(--burguer-easing); } .hamburger--minus--opened .hamburger-inner::before, .hamburger--minus--opened .hamburger-inner::after { opacity: 0; transition: bottom var(--burguer-duration) var(--burguer-easing), top var(--burguer-duration) var(--burguer-easing), opacity 0s var(--burguer-duration) var(--burguer-easing); } .hamburger--minus--opened .hamburger-inner::before { top: 0; } .hamburger--minus--opened .hamburger-inner::after { bottom: 0; } /* * Spin */ .hamburger--spin .hamburger-inner { transition-duration: var(--burguer-duration); transition-timing-function: var(--burguer-easing); } .hamburger--spin .hamburger-inner::before { transition: top var(--burguer-duration) var(--burguer-duration) var(--burguer-easing), opacity var(--burguer-duration) var(--burguer-easing); } .hamburger--spin .hamburger-inner::after { transition: bottom var(--burguer-duration) var(--burguer-duration) var(--burguer-easing), transform var(--burguer-duration) var(--burguer-easing); } .hamburger--spin--opened .hamburger-inner { transform: rotate(225deg); transition-delay: var(--burguer-duration); transition-timing-function: var(--burguer-easing); } .hamburger--spin--opened .hamburger-inner::before { top: 0; opacity: 0; transition: top var(--burguer-duration) var(--burguer-easing), opacity var(--burguer-duration) var(--burguer-duration) var(--burguer-easing); } .hamburger--spin--opened .hamburger-inner::after { bottom: 0; transform: rotate(-90deg); transition: bottom var(--burguer-duration) var(--burguer-easing), transform var(--burguer-duration) var(--burguer-duration) var(--burguer-easing); } /* * Spin Reverse */ .hamburger--spin-r .hamburger-inner { transition-duration: var(--burguer-duration); transition-timing-function: var(--burguer-easing); } .hamburger--spin-r .hamburger-inner::before { transition: top var(--burguer-duration) var(--burguer-duration) var(--burguer-easing), opacity var(--burguer-duration) var(--burguer-easing); } .hamburger--spin-r .hamburger-inner::after { transition: bottom var(--burguer-duration) var(--burguer-duration) var(--burguer-easing), transform var(--burguer-duration) var(--burguer-easing); } .hamburger--spin-r--opened .hamburger-inner { transform: rotate(-225deg); transition-delay: var(--burguer-duration); transition-timing-function: var(--burguer-easing); } .hamburger--spin-r--opened .hamburger-inner::before { top: 0; opacity: 0; transition: top var(--burguer-duration) var(--burguer-easing), opacity var(--burguer-duration) var(--burguer-duration) var(--burguer-easing); } .hamburger--spin-r--opened .hamburger-inner::after { bottom: 0; transform: rotate(90deg); transition: bottom var(--burguer-duration) var(--burguer-easing), transform var(--burguer-duration) var(--burguer-duration) var(--burguer-easing); } /* * Spring */ .hamburger--spring .hamburger-inner { top: calc(var(--hamburger-layer-height) / 2); transition: background-color 0s var(--burguer-duration) var(--burguer-easing); } .hamburger--spring .hamburger-inner::before { top: calc(var(--hamburger-layer-height) + var(--hamburger-layer-spacing)); transition: top calc(var(--burguer-duration) / 2) var(--burguer-duration) var(--burguer-easing), transform calc(var(--burguer-duration) / 2) var(--burguer-easing); } .hamburger--spring .hamburger-inner::after { top: calc(var(--hamburger-layer-height) * 2 + var(--hamburger-layer-spacing) * 2); transition: top var(--burguer-duration) var(--burguer-duration) var(--burguer-easing), transform calc(var(--burguer-duration) / 2) var(--burguer-easing); } .hamburger--spring--opened .hamburger-inner { transition-delay: var(--burguer-duration); background-color: transparent !important; } .hamburger--spring--opened .hamburger-inner::before { top: 0; transition: top calc(var(--burguer-duration) / 2) var(--burguer-duration) var(--burguer-easing), transform calc(var(--burguer-duration) / 2) var(--burguer-duration) var(--burguer-easing); transform: translate3d(0, calc(var(--hamburger-layer-height) + var(--hamburger-layer-spacing)), 0) rotate(45deg); } .hamburger--spring--opened .hamburger-inner::after { top: 0; transition: top var(--burguer-duration) var(--burguer-easing), transform calc(var(--burguer-duration) / 2) var(--burguer-duration) var(--burguer-easing); transform: translate3d(0, calc(var(--hamburger-layer-height) + var(--hamburger-layer-spacing)), 0) rotate(-45deg); } /* * Spring Reverse */ .hamburger--spring-r .hamburger-inner { top: auto; bottom: 0; transition-duration: var(--burguer-duration); transition-delay: 0s; transition-timing-function: var(--burguer-easing); } .hamburger--spring-r .hamburger-inner::after { top: calc((var(--hamburger-layer-height) * 2 + var(--hamburger-layer-spacing) * 2) * -1); transition: top var(--burguer-duration) var(--burguer-duration) var(--burguer-easing), opacity 0s var(--burguer-easing); } .hamburger--spring-r .hamburger-inner::before { transition: top var(--burguer-duration) var(--burguer-duration) var(--burguer-easing), transform var(--burguer-duration) var(--burguer-easing); } .hamburger--spring-r--opened .hamburger-inner { transform: translate3d(0, calc((var(--hamburger-layer-height) + var(--hamburger-layer-spacing)) * -1), 0) rotate(-45deg); transition-delay: var(--burguer-duration); transition-timing-function: var(--burguer-easing); } .hamburger--spring-r--opened .hamburger-inner::after { top: 0; opacity: 0; transition: top var(--burguer-duration) var(--burguer-easing), opacity 0s var(--burguer-duration) var(--burguer-easing); } .hamburger--spring-r--opened .hamburger-inner::before { top: 0; transform: rotate(90deg); transition: top var(--burguer-duration) var(--burguer-duration) var(--burguer-easing), transform var(--burguer-duration) var(--burguer-duration) var(--burguer-easing); } /* * Stand */ .hamburger--stand .hamburger-inner { transition: transform calc(var(--burguer-duration) / 2) var(--burguer-duration) var(--burguer-easing), background-color 0s calc(var(--burguer-duration) / 2) var(--burguer-easing); } .hamburger--stand .hamburger-inner::before { transition: top calc(var(--burguer-duration) / 2) calc(var(--burguer-duration) / 2) var(--burguer-easing), transform calc(var(--burguer-duration) / 2) 0s var(--burguer-easing); } .hamburger--stand .hamburger-inner::after { transition: bottom calc(var(--burguer-duration) / 2) calc(var(--burguer-duration) / 2) var(--burguer-easing), transform calc(var(--burguer-duration) / 2) 0s var(--burguer-easing); } .hamburger--stand--opened .hamburger-inner { transform: rotate(90deg); background-color: transparent !important; transition: transform calc(var(--burguer-duration) / 2) 0s var(--burguer-easing), background-color 0s var(--burguer-duration) var(--burguer-easing); } .hamburger--stand--opened .hamburger-inner::before { top: 0; transform: rotate(-45deg); transition: top calc(var(--burguer-duration) / 2) var(--burguer-duration) var(--burguer-easing), transform calc(var(--burguer-duration) / 2) var(--burguer-duration) var(--burguer-easing); } .hamburger--stand--opened .hamburger-inner::after { bottom: 0; transform: rotate(45deg); transition: bottom calc(var(--burguer-duration) / 2) var(--burguer-duration) var(--burguer-easing), transform calc(var(--burguer-duration) / 2) var(--burguer-duration) var(--burguer-easing); } /* * Stand Reverse */ .hamburger--stand-r .hamburger-inner { transition: transform calc(var(--burguer-duration) / 2) var(--burguer-duration) var(--burguer-easing), background-color 0s calc(var(--burguer-duration) / 2) var(--burguer-easing); } .hamburger--stand-r .hamburger-inner::before { transition: top calc(var(--burguer-duration) / 2) calc(var(--burguer-duration) / 2) var(--burguer-easing), transform calc(var(--burguer-duration) / 2) 0s var(--burguer-easing); } .hamburger--stand-r .hamburger-inner::after { transition: bottom calc(var(--burguer-duration) / 2) calc(var(--burguer-duration) / 2) var(--burguer-easing), transform calc(var(--burguer-duration) / 2) 0s var(--burguer-easing); } .hamburger--stand-r--opened .hamburger-inner { transform: rotate(-90deg); background-color: transparent !important; transition: transform calc(var(--burguer-duration) / 2) 0s var(--burguer-easing), background-color 0s var(--burguer-duration) var(--burguer-easing); } .hamburger--stand-r--opened .hamburger-inner::before { top: 0; transform: rotate(-45deg); transition: top calc(var(--burguer-duration) / 2) var(--burguer-duration) var(--burguer-easing), transform calc(var(--burguer-duration) / 2) var(--burguer-duration) var(--burguer-easing); } .hamburger--stand-r--opened .hamburger-inner::after { bottom: 0; transform: rotate(45deg); transition: bottom calc(var(--burguer-duration) / 2) var(--burguer-duration) var(--burguer-easing), transform calc(var(--burguer-duration) / 2) var(--burguer-duration) var(--burguer-easing); } /* * Squeeze */ .hamburger--squeeze .hamburger-inner { transition-duration: calc(var(--burguer-duration) * 0.65); transition-timing-function: var(--burguer-easing); } .hamburger--squeeze .hamburger-inner::before { transition: top calc(var(--burguer-duration) * 0.65) var(--burguer-duration) var(--burguer-easing), opacity calc(var(--burguer-duration) * 0.65) var(--burguer-easing); } .hamburger--squeeze .hamburger-inner::after { transition: bottom var(--burguer-duration) var(--burguer-duration) var(--burguer-easing), transform var(--burguer-duration) var(--burguer-easing); } .hamburger--squeeze--opened .hamburger-inner { transform: rotate(45deg); transition-delay: var(--burguer-duration); transition-timing-function: var(--burguer-easing); } .hamburger--squeeze--opened .hamburger-inner::before { top: 0; opacity: 0; transition: top calc(var(--burguer-duration) * 0.65) var(--burguer-easing), opacity calc(var(--burguer-duration) * 0.65) var(--burguer-duration) var(--burguer-easing); } .hamburger--squeeze--opened .hamburger-inner::after { bottom: 0; transform: rotate(-90deg); transition: bottom calc(var(--burguer-duration) * 0.65) var(--burguer-easing), transform calc(var(--burguer-duration) * 0.65) var(--burguer-duration) var(--burguer-easing); } /* * Vortex */ .hamburger--vortex .hamburger-inner { transition-duration: var(--burguer-duration); transition-timing-function: var(--burguer-easing); } .hamburger--vortex .hamburger-inner::before, .hamburger--vortex .hamburger-inner::after { transition-duration: 0s; transition-delay: calc(var(--burguer-duration) / 2); transition-timing-function: var(--burguer-easing); } .hamburger--vortex .hamburger-inner::before { transition-property: top, opacity; } .hamburger--vortex .hamburger-inner::after { transition-property: bottom, transform; } .hamburger--vortex--opened .hamburger-inner { transform: rotate(765deg); transition-timing-function: var(--burguer-easing); } .hamburger--vortex--opened .hamburger-inner::before, .hamburger--vortex--opened .hamburger-inner::after { transition-delay: 0s; } .hamburger--vortex--opened .hamburger-inner::before { top: 0; opacity: 0; } .hamburger--vortex--opened .hamburger-inner::after { bottom: 0; transform: rotate(90deg); } /* * Vortex Reverse */ .hamburger--vortex-r .hamburger-inner { transition-duration: var(--burguer-duration); transition-timing-function: var(--burguer-easing); } .hamburger--vortex-r .hamburger-inner::before, .hamburger--vortex-r .hamburger-inner::after { transition-duration: 0s; transition-delay: calc(var(--burguer-duration) / 2); transition-timing-function: var(--burguer-easing); } .hamburger--vortex-r .hamburger-inner::before { transition-property: top, opacity; } .hamburger--vortex-r .hamburger-inner::after { transition-property: bottom, transform; } .hamburger--vortex-r--opened .hamburger-inner { transform: rotate(-765deg); transition-timing-function: var(--burguer-easing); } .hamburger--vortex-r--opened .hamburger-inner::before, .hamburger--vortex-r--opened .hamburger-inner::after { transition-delay: 0s; } .hamburger--vortex-r--opened .hamburger-inner::before { top: 0; opacity: 0; } .hamburger--vortex-r--opened .hamburger-inner::after { bottom: 0; transform: rotate(-90deg); } /* * CORE BURGUER - ANIMATED */ .next-burger-animated{ cursor: pointer; position: relative; --burguer-rounded: round; /*redondeado*/ --burguer-stroke-color: black; /*stroke color*/ --burguer-duration: 600ms; /*animation duration*/ --burguer-easing: ease; /*animation ease*/ /*ANIMATED HAMBURGERS SPECIFIC*/ --burguer-dimensions: 50px; --hamburger-layer-height: 4px; width: var(--burguer-dimensions); height: var(--burguer-dimensions); } .next-burger-animated, .next-burger-animated *{ will-change: unset; } .next-burger-animated svg{ transform-origin: center center; } .next-burger-animated svg *{ transform-origin: center center; transform: scale(1.65); } .next-burger-animated input{ display: none; } .next-burger-animated label { all: unset; display: block; cursor: pointer; position: absolute; width: var(--burguer-dimensions); height: var(--burguer-dimensions); } .next-burger-animated path { fill: none; stroke: var(--burguer-stroke-color); stroke-width: var(--hamburger-layer-height); stroke-linecap: var(--burguer-rounded); stroke-linejoin: var(--burguer-rounded); --length: 24; --offset: -38; stroke-dasharray: var(--length) var(--total-length); stroke-dashoffset: var(--offset); transition: all var(--burguer-duration) var(--burguer-easing); } .next-burger-animated circle { fill: #fff3; opacity: 0; } .next-burger-animated--1--opened svg .line--1, .next-burger-animated--1--opened svg .line--3, .next-burger-animated--2--opened svg .line--1, .next-burger-animated--2--opened svg .line--3 { --length: 22.627416998; } .next-burger-animated--1--opened svg .line--2, .next-burger-animated--2--opened svg .line--2 { --length: 0; } .next-burger-animated--3--opened svg .line--1, .next-burger-animated--3--opened svg .line--3, .next-burger-animated--4--opened svg .line--1, .next-burger-animated--4--opened svg .line--3 { --length: 8.602325267; } .next-burger-animated--1 .line--1, .next-burger-animated--1 .line--3 { --total-length: 126.74183044433594; } .next-burger-animated--1 .line--2 { --total-length: 70; } .next-burger-animated--1--opened svg .line--1, .next-burger-animated--1--opened svg .line--3 { --offset: -94.1149185097; } .next-burger-animated--1--opened svg .line--2 { --offset: -50; } .next-burger-animated--2 .line--1, .next-burger-animated--2 .line--3 { --total-length: 111.22813415527344; --offset: -50.22813415527344; } .next-burger-animated--2 .line--2 { --total-length: 99; } .next-burger-animated--2--opened svg path { transform: scale(1.65) translateX(30px); } .next-burger-animated--2--opened svg .line--1, .next-burger-animated--2--opened svg .line--3 { --offset: -16.9705627485; } .next-burger-animated--2--opened svg .line--2 { --offset: -20; } .next-burger-animated--3 .line--1, .next-burger-animated--3 .line--3 { --total-length: 126.38166809082031; } .next-burger-animated--3 .line--2 { --total-length: 80; } .next-burger-animated--3--opened svg .line--1, .next-burger-animated--3--opened svg .line--3 { --offset: -109.1770175568; } .next-burger-animated--4 .line--1, .next-burger-animated--4 .line--3 { --total-length: 103.35061645507812; --offset: -42.35061645507812; } .next-burger-animated--4 .line--2 { --total-length: 99; } .next-burger-animated--4--opened svg path { transform: scale(1.65) translateX(31px); } .next-burger-animated--4--opened svg .line--1, .next-burger-animated--4--opened svg .line--3 { --offset: -8.602325267; } .next-burger-animated--4--opened svg .line--2 { --offset: -7; } /* * CORE BURGUER - ANIMATED - DISTORSION V3 */ .next-burger-animated--distorsionv3 { cursor: pointer; position: relative; background: none; --burguer-rounded: round; /*redondeado*/ --burguer-stroke-color: black; /*stroke color*/ --burguer-duration: 600ms; /*animation duration*/ --burguer-easing: ease; /*animation ease*/ /*ANIMATED HAMBURGERS SPECIFIC*/ --burguer-dimensions: 50px; --hamburger-layer-height: 4px; width: var(--burguer-dimensions); height: var(--burguer-dimensions); } .next-burger-animated--distorsionv3 svg { width: calc(var(--burguer-dimensions) * 1.777); height: calc(var(--burguer-dimensions) * 1.333); top: calc(var(--burguer-dimensions) * -0.1666); left: calc(var(--burguer-dimensions) * -0.3888); stroke: var(--burguer-stroke-color); stroke-width: var(--hamburger-layer-height); stroke-linecap: var(--burguer-rounded); stroke-linejoin: var(--burguer-rounded); fill: none; display: block; position: absolute; } .next-burger-animated--distorsionv3 svg path { transition: stroke-dasharray var(--duration, var(--burguer-duration)) var(--easing, var(--burguer-easing)) var(--delay, 0s), stroke-dashoffset var(--duration, var(--burguer-duration)) var(--easing, var(--burguer-easing)) var(--delay, 0s); stroke-dasharray: var(--array-1, 26px) var(--array-2, 100px); stroke-dashoffset: var(--offset, 126px); transform: translateZ(0); } .next-burger-animated--distorsionv3 svg path:nth-child(2) { --duration: var(--burguer-duration); --easing: ease-in; --offset: 100px; --array-2: 74px; } .next-burger-animated--distorsionv3 svg path:nth-child(3) { --offset: 133px; --array-2: 107px; } .next-burger-animated--distorsionv3--opened svg path { --offset: 57px; } .next-burger-animated--distorsionv3--opened svg path:nth-child(1), .next-burger-animated--distorsionv3--opened svg path:nth-child(3) { --delay: calc(var(--burguer-duration) * 0.2142); --easing: cubic-bezier(0.2, 0.4, 0.2, 1.1); } .next-burger-animated--distorsionv3--opened svg path:nth-child(2) { --duration: calc(var(--burguer-duration) * 0.5714); --offset: 2px; --array-1: 1px; } .next-burger-animated--distorsionv3--opened svg path:nth-child(3) { --offset: 58px; } /* * CORE BURGUER - ANIMATED - CHEVRON */ .next-burger-animated--chevron { cursor: pointer; position: relative; --burguer-dimensions: 50px; --burguer-rounded: round; /*redondeado*/ --burguer-stroke-color: black; /*stroke color*/ --burguer-duration: 600ms; /*animation duration*/ --burguer-duration-reduced: calc(var(--burguer-duration) / 4); --burguer-easing: ease; /*animation ease*/ /*ANIMATED HAMBURGERS SPECIFIC*/ --hamburger-layer-height: 4px; } .next-burger-animated--chevron, .next-burger-animated--chevron *{ will-change: unset; } .next-burger-animated--chevron .nav { width: var(--burguer-dimensions); height: var(--burguer-dimensions); --color: var(--burguer-stroke-color); background: none; position: relative; display: flex; justify-content: center; align-items: center; } .next-burger-animated--chevron .nav svg { width: var(--burguer-dimensions); height: var(--burguer-dimensions); fill: none; stroke: var(--color); stroke-width: var(--hamburger-layer-height); stroke-linecap: var(--burguer-rounded); stroke-linejoin: var(--burguer-rounded); } .next-burger-animated--chevron .nav svg use:nth-of-type(1) { opacity: 1; stroke-dashoffset: 221; stroke-dasharray: 46 249; transition: stroke-dashoffset var(--burguer-duration-reduced) var(--burguer-easing) calc(var(--burguer-duration-reduced) * 1.666), stroke-dasharray var(--burguer-duration-reduced) var(--burguer-easing) calc(var(--burguer-duration-reduced) * 1.666), opacity 0s var(--burguer-easing) calc(var(--burguer-duration-reduced) * 1.666); } .next-burger-animated--chevron .nav svg use:nth-of-type(2) { animation: stroke-animation-reverse calc(var(--burguer-duration-reduced) * 10) ease-out forwards; } .next-burger-animated--chevron .nav input { position: absolute; height: 100%; width: 100%; z-index: 2; cursor: pointer; opacity: 0; } .next-burger-animated--chevron .nav input:checked + svg use:nth-of-type(1) { stroke-dashoffset: 175; stroke-dasharray: 0 295; opacity: 0; transition: stroke-dashoffset calc(var(--burguer-duration-reduced) * 0.58333) var(--burguer-easing) calc(var(--burguer-duration-reduced) * 0.58333), stroke-dasharray calc(var(--burguer-duration-reduced) * 0.58333) var(--burguer-easing) calc(var(--burguer-duration-reduced) * 0.58333), opacity 0s var(--burguer-easing) calc(var(--burguer-duration-reduced) * 1.1666); } .next-burger-animated--chevron .nav input:checked + svg use:nth-of-type(2) { animation: stroke-animation calc(var(--burguer-duration-reduced) * 10) ease-out forwards; } @keyframes stroke-animation { 0% { stroke-dashoffset: 295; stroke-dasharray: 25 270; } 50% { stroke-dashoffset: 68; stroke-dasharray: 59 236; } 65% { stroke-dashoffset: 59; stroke-dasharray: 59 236; } 100% { stroke-dashoffset: 68; stroke-dasharray: 59 236; } } @keyframes stroke-animation-reverse { 0% { stroke-dashoffset: 68; stroke-dasharray: 59 236; } 50% { stroke-dashoffset: 290; stroke-dasharray: 25 270; } 65% { stroke-dashoffset: 295; stroke-dasharray: 25 270; } 100% { stroke-dashoffset: 290; stroke-dasharray: 25 270; } } /* * CORE BURGUER - FLIPPED */ .next-burger-flipped { background-color: transparent; cursor: pointer; position: relative; --burguer-dimensions: 50px; --burguer-rounded: round; /*redondeado*/ --burguer-stroke-color: black; /*stroke color*/ --burguer-duration: 600ms; /*animation duration*/ --burguer-easing: ease; /*animation ease*/ /*FLIPPED HAMBURGERS SPECIFIC*/ --hamburger-layer-height: 4px; width: var(--burguer-dimensions); height: var(--burguer-dimensions); } .next-burger-flipped svg{ -webkit-tap-highlight-color: transparent; transition: transform var(--burguer-duration); -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; width: var(--burguer-dimensions); height: var(--burguer-dimensions); } .next-burger-flipped[class$="--opened"] .hamRotate { transform: rotate(45deg); } .next-burger-flipped[class$="--opened"] .hamRotate180 { transform: rotate(180deg); } .next-burger-flipped .line { fill: none; transition: stroke-dasharray var(--burguer-duration), stroke-dashoffset var(--burguer-duration); transition-timing-function: var(--burguer-easing); stroke: var(--burguer-stroke-color); stroke-width: var(--hamburger-layer-height); stroke-linecap: var(--burguer-rounded); } .next-burger-flipped--flipping svg .top { stroke-dasharray: 40.1 139; } .next-burger-flipped--flipping svg .bottom { stroke-dasharray: 40.1 180; } .next-burger-flipped--flipping--opened svg .top { stroke-dashoffset: -98px; } .next-burger-flipped--flipping--opened svg .bottom { stroke-dashoffset: -138px; } .next-burger-flipped--flippingarrow svg .top { stroke-dasharray: 40.1 121; } .next-burger-flipped--flippingarrow svg .bottom { stroke-dasharray: 40.1 121; } .next-burger-flipped--flippingarrow--opened svg .top { stroke-dashoffset: -102px; } .next-burger-flipped--flippingarrow--opened svg .bottom { stroke-dashoffset: -102px; } .next-burger-flipped--flippingtitle svg .top { stroke-dasharray: 40.1 130; } .next-burger-flipped--flippingtitle svg .middle { stroke-dasharray: 40.1 140; } .next-burger-flipped--flippingtitle svg .bottom { stroke-dasharray: 40.1 205; } .next-burger-flipped--flippingtitle--opened svg .top { stroke-dasharray: 75 130; stroke-dashoffset: -63px; } .next-burger-flipped--flippingtitle--opened svg .middle { stroke-dashoffset: -102px; } .next-burger-flipped--flippingtitle--opened svg .bottom { stroke-dasharray: 110 205; stroke-dashoffset: -86px; } .next-burger-flipped--flippingv4 svg .top { stroke-dasharray: 40.1 121; } .next-burger-flipped--flippingv4 svg .bottom { stroke-dasharray: 40.1 121; } .next-burger-flipped--flippingv4--opened svg .top { stroke-dashoffset: -68px; } .next-burger-flipped--flippingv4--opened svg .bottom { stroke-dashoffset: -68px; } .next-burger-flipped--flippingarrowv2 svg .top { stroke-dasharray: 40.1 82; } .next-burger-flipped--flippingarrowv2 svg .bottom { stroke-dasharray: 40.1 82; } .next-burger-flipped--flippingarrowv2--opened svg .top { stroke-dasharray: 14 82; stroke-dashoffset: -72px; } .next-burger-flipped--flippingarrowv2--opened svg .bottom { stroke-dasharray: 14 82; stroke-dashoffset: -72px; } .next-burger-flipped--flippingv3 svg .top { stroke-dasharray: 40.1 172; } .next-burger-flipped--flippingv3 svg .middle { stroke-dasharray: 40.1 111; } .next-burger-flipped--flippingv3 svg .bottom { stroke-dasharray: 40.1 172; } .next-burger-flipped--flippingv3--opened svg .top { stroke-dashoffset: -132px; } .next-burger-flipped--flippingv3--opened svg .middle { stroke-dashoffset: -71px; } .next-burger-flipped--flippingv3--opened svg .bottom { stroke-dashoffset: -132px; } .next-burger-flipped--flippingv2 svg .top { stroke-dasharray: 40.1 82; } .next-burger-flipped--flippingv2 svg .middle { stroke-dasharray: 40.1 111; } .next-burger-flipped--flippingv2 svg .bottom { stroke-dasharray: 40.1 161; } .next-burger-flipped--flippingv2--opened svg .top { stroke-dasharray: 17 82; stroke-dashoffset: -62px; } .next-burger-flipped--flippingv2--opened svg .middle { stroke-dashoffset: 23px; } .next-burger-flipped--flippingv2--opened svg .bottom { stroke-dashoffset: -83px; } .next-burger-flipped--flippingv5 svg .top { stroke-dasharray: 40.1 160; } .next-burger-flipped--flippingv5 svg .middle { stroke-dasharray: 40.1 142; transform-origin: 50%; transition: transform var(--burguer-duration); transition-timing-function: var(--burguer-easing); } .next-burger-flipped--flippingv5 svg .bottom { stroke-dasharray: 40.1 85; transform-origin: 50%; transition: transform var(--burguer-duration), stroke-dashoffset var(--burguer-duration); transition-timing-function: var(--burguer-easing); } .next-burger-flipped--flippingv5--opened svg .top { stroke-dashoffset: -64px; } .next-burger-flipped--flippingv5--opened svg .middle { transform: rotate(90deg); } .next-burger-flipped--flippingv5--opened svg .bottom { stroke-dashoffset: -64px; } /* * CORE BURGUER - DISFIGURED */ .next-burger-disfigured{ --burguer-dimensions: 50px; --hamburger-layer-height: 5px; --burguer-stroke-color: black; /*stroke color*/ --burguer-duration: 600ms; /*animation duration*/ --burguer-easing: ease; /*animation ease*/ --hamburger-border-radius: 4px; } .next-burger-disfigured--bottom-arrow{ width: calc(var(--burguer-dimensions) * 1.1666); height: var(--burguer-dimensions); position: relative; cursor: pointer; display: inline-block; } .next-burger-disfigured--bottom-arrow span{ background-color: var(--burguer-stroke-color); position: absolute; border-radius: var(--hamburger-border-radius); transition: var(--burguer-duration) var(--burguer-easing); } .next-burger-disfigured--bottom-arrow span:nth-child(1){ width: 100%; height: var(--hamburger-layer-height); display: block; top: 0px; left: 0px; } .next-burger-disfigured--bottom-arrow span:nth-child(2){ width: 100%; height: var(--hamburger-layer-height); display: block; top: calc(var(--burguer-dimensions) * 0.4333); left: 0px; } .next-burger-disfigured--bottom-arrow span:nth-child(3){ width: 100%; height: var(--hamburger-layer-height); display: block; bottom: 0px; left: 0px; } .next-burger-disfigured--bottom-arrow:not(.next-burger-disfigured--bottom-arrow--opened):hover span:nth-child(1){ width: 100%; height: var(--hamburger-layer-height); display: block; top: calc(var(--burguer-dimensions) * -0.0666); left: 0px; transition: var(--burguer-duration) var(--burguer-easing); } .next-burger-disfigured--bottom-arrow:not(.next-burger-disfigured--bottom-arrow--opened):hover span:nth-child(2){ width: 100%; height: var(--hamburger-layer-height); display: block; top: calc(var(--burguer-dimensions) * 0.4333); left: 0px; transition: calc(var(--burguer-duration) * 1.3333) var(--burguer-easing); } .next-burger-disfigured--bottom-arrow:not(.next-burger-disfigured--bottom-arrow--opened):hover span:nth-child(3){ width: 100%; height: var(--hamburger-layer-height); display: block; bottom: calc(var(--burguer-dimensions) * -0.0666); left: 0px; transition: var(--burguer-duration) var(--burguer-easing); } .next-burger-disfigured--bottom-arrow--opened span:nth-child(1){ left: calc(var(--burguer-dimensions) * 0.1); top: calc(var(--burguer-dimensions) * 0.4333); width: var(--burguer-dimensions); transition: var(--burguer-duration) var(--burguer-easing); transform: rotate(90deg); transition-delay: calc(var(--burguer-duration) / 2); } .next-burger-disfigured--bottom-arrow--opened span:nth-child(2){ left: calc(var(--burguer-dimensions) * 0.0666); top: calc(var(--burguer-dimensions) * 0.666); width: calc(var(--burguer-dimensions) * 0.666); transition: var(--burguer-duration) var(--burguer-easing); transform: rotate(45deg); transition-delay: alc(var(--burguer-duration) / 6); } .next-burger-disfigured--bottom-arrow--opened span:nth-child(3){ left: calc(var(--burguer-dimensions) * 0.4666); top: calc(var(--burguer-dimensions) * 0.666); width: calc(var(--burguer-dimensions) * 0.666); transition: var(--burguer-duration) var(--burguer-easing); transform: rotate(-45deg); transition-delay: calc(var(--burguer-duration) / 3); } .next-burger-disfigured--right-arrow{ width: calc(var(--burguer-dimensions) * 1.1666); height: var(--burguer-dimensions); position: relative; cursor: pointer; display: inline-block; } .next-burger-disfigured--right-arrow span{ background-color: var(--burguer-stroke-color); position: absolute; border-radius: var(--hamburger-border-radius); transition: var(--burguer-duration) var(--burguer-easing); } .next-burger-disfigured--right-arrow span:nth-child(1){ width: 100%; height: var(--hamburger-layer-height); display: block; top: 0px; left: 0px; } .next-burger-disfigured--right-arrow span:nth-child(2){ width: 100%; height: var(--hamburger-layer-height); display: block; top: calc(var(--burguer-dimensions) * 0.4333); left: 0px; } .next-burger-disfigured--right-arrow span:nth-child(3){ width: 100%; height: var(--hamburger-layer-height); display: block; bottom: 0px; left: 0px; } .next-burger-disfigured--right-arrow:not(.next-burger-disfigured--right-arrow--opened):hover span:nth-child(1){ width: 100%; height: var(--hamburger-layer-height); display: block; top: calc(var(--burguer-dimensions) * -0.0666); left: 0px; transition: var(--burguer-duration) var(--burguer-easing); } .next-burger-disfigured--right-arrow:not(.next-burger-disfigured--right-arrow--opened):hover span:nth-child(2){ width: 100%; height: var(--hamburger-layer-height); display: block; top: calc(var(--burguer-dimensions) * 0.4333); left: 0px; transition: calc(var(--burguer-duration) * 1.3333) var(--burguer-easing); } .next-burger-disfigured--right-arrow:not(.next-burger-disfigured--right-arrow--opened):hover span:nth-child(3){ width: 100%; height: var(--hamburger-layer-height); display: block; bottom: calc(var(--burguer-dimensions) * -0.0666); left: 0px; transition: var(--burguer-duration) var(--burguer-easing); } .next-burger-disfigured--right-arrow--opened { transform: rotate(-90deg); } .next-burger-disfigured--right-arrow--opened span:nth-child(1){ left: calc(var(--burguer-dimensions) * 0.1); top: calc(var(--burguer-dimensions) * 0.4333); width: var(--burguer-dimensions); transition: var(--burguer-duration) var(--burguer-easing); transform: rotate(90deg); transition-delay: calc(var(--burguer-duration) / 2); } .next-burger-disfigured--right-arrow--opened span:nth-child(2){ left: calc(var(--burguer-dimensions) * 0.0666); top: calc(var(--burguer-dimensions) * 0.666); width: calc(var(--burguer-dimensions) * 0.666); transition: var(--burguer-duration) var(--burguer-easing); transform: rotate(45deg); transition-delay: calc(var(--burguer-duration) / 6); } .next-burger-disfigured--right-arrow--opened span:nth-child(3){ left: calc(var(--burguer-dimensions) * 0.4666); top: calc(var(--burguer-dimensions) * 0.666); width: calc(var(--burguer-dimensions) * 0.666); transition: var(--burguer-duration) var(--burguer-easing); transform: rotate(-45deg); transition-delay: calc(var(--burguer-duration) / 3); } .next-burger-disfigured--left-arrow{ width: calc(var(--burguer-dimensions) * 1.1666); height: var(--burguer-dimensions); position: relative; cursor: pointer; display: inline-block; } .next-burger-disfigured--left-arrow span{ background-color: var(--burguer-stroke-color); position: absolute; border-radius: var(--hamburger-border-radius); transition: var(--burguer-duration) var(--burguer-easing); } .next-burger-disfigured--left-arrow span:nth-child(1){ width: 100%; height: var(--hamburger-layer-height); display: block; top: 0px; left: 0px; } .next-burger-disfigured--left-arrow span:nth-child(2){ width: 100%; height: var(--hamburger-layer-height); display: block; top: calc(var(--burguer-dimensions) * 0.4333); left: 0px; } .next-burger-disfigured--left-arrow span:nth-child(3){ width: 100%; height: var(--hamburger-layer-height); display: block; bottom: 0px; left: 0px; } .next-burger-disfigured--left-arrow:not(.next-burger-disfigured--left-arrow--opened):hover span:nth-child(1){ width: 100%; height: var(--hamburger-layer-height); display: block; top: calc(var(--burguer-dimensions) * -0.0666); left: 0px; transition: var(--burguer-duration) var(--burguer-easing); } .next-burger-disfigured--left-arrow:not(.next-burger-disfigured--left-arrow--opened):hover span:nth-child(2){ width: 100%; height: var(--hamburger-layer-height); display: block; top: calc(var(--burguer-dimensions) * 0.4333); left: 0px; transition: calc(var(--burguer-duration) * 1.3333) var(--burguer-easing); } .next-burger-disfigured--left-arrow:not(.next-burger-disfigured--left-arrow--opened):hover span:nth-child(3){ width: 100%; height: var(--hamburger-layer-height); display: block; bottom: calc(var(--burguer-dimensions) * -0.0666); left: 0px; transition: var(--burguer-duration) var(--burguer-easing); } .next-burger-disfigured--left-arrow--opened { transform: rotate(90deg); } .next-burger-disfigured--left-arrow--opened span:nth-child(1){ left: calc(var(--burguer-dimensions) * 0.1); top: calc(var(--burguer-dimensions) * 0.4333); width: var(--burguer-dimensions); transition: var(--burguer-duration) var(--burguer-easing); transform: rotate(90deg); transition-delay: calc(var(--burguer-duration) / 2); } .next-burger-disfigured--left-arrow--opened span:nth-child(2){ left: calc(var(--burguer-dimensions) * 0.0666); top: calc(var(--burguer-dimensions) * 0.666); width: calc(var(--burguer-dimensions) * 0.666); transition: var(--burguer-duration) var(--burguer-easing); transform: rotate(45deg); transition-delay: calc(var(--burguer-duration) / 6); } .next-burger-disfigured--left-arrow--opened span:nth-child(3){ left: calc(var(--burguer-dimensions) * 0.4666); top: calc(var(--burguer-dimensions) * 0.666); width: calc(var(--burguer-dimensions) * 0.666); transition: var(--burguer-duration) var(--burguer-easing); transform: rotate(-45deg); transition-delay: calc(var(--burguer-duration) / 3); } .next-burger-disfigured--cross{ width: calc(var(--burguer-dimensions) * 1.1666); height: var(--burguer-dimensions); position: relative; cursor: pointer; display: inline-block; } .next-burger-disfigured--cross span{ background-color: var(--burguer-stroke-color); position: absolute; border-radius: var(--hamburger-border-radius); transition: var(--burguer-duration) var(--burguer-easing); width: 100%; height: var(--hamburger-layer-height); } .next-burger-disfigured--cross span:nth-child(1){ top:0px; left: 0px; } .next-burger-disfigured--cross span:nth-child(2){ top: calc(var(--burguer-dimensions) * 0.4333); left: 0px; opacity: 1; } .next-burger-disfigured--cross span:nth-child(3){ bottom:0px; left: 0px; } .next-burger-disfigured--cross:not(.next-burger-disfigured--cross--opened):hover span:nth-child(1){ transform: rotate(-3deg) scaleY(1.1); } .next-burger-disfigured--cross:not(.next-burger-disfigured--cross--opened):hover span:nth-child(2){ transform: rotate(3deg) scaleY(1.1); } .next-burger-disfigured--cross:not(.next-burger-disfigured--cross--opened):hover span:nth-child(3){ transform: rotate(-4deg) scaleY(1.1); } .next-burger-disfigured--cross--opened span:nth-child(1){ transform: rotate(45deg); top: calc(var(--burguer-dimensions) * 0.4333); } .next-burger-disfigured--cross--opened span:nth-child(2){ opacity:0; } .next-burger-disfigured--cross--opened span:nth-child(3){ transform: rotate(-45deg); top: calc(var(--burguer-dimensions) * 0.4333); } .next-burger-disfigured--chevron{ width: calc(var(--burguer-dimensions) * 1.1666); height: var(--burguer-dimensions); position: relative; cursor: pointer; display: inline-block; } .next-burger-disfigured--chevron span{ background-color: var(--burguer-stroke-color); position: absolute; border-radius: var(--hamburger-border-radius); transition: var(--burguer-duration) var(--burguer-easing); width: 100%; height: var(--hamburger-layer-height); } .next-burger-disfigured--chevron span:nth-child(1){ top:0px; left: 0px; } .next-burger-disfigured--chevron span:nth-child(2){ top: calc(var(--burguer-dimensions) * 0.4333); left: 0px; } .next-burger-disfigured--chevron span:nth-child(3){ bottom:0px; left: 0px; } .next-burger-disfigured--chevron:not(.next-burger-disfigured--chevron--opened):hover span:nth-child(1){ transform: scaleY(1.2); left: calc(var(--burguer-dimensions) * -0.1666); } .next-burger-disfigured--chevron:not(.next-burger-disfigured--chevron--opened):hover span:nth-child(2){ transform: rotate(5deg) scaleY(1.1); } .next-burger-disfigured--chevron:not(.next-burger-disfigured--chevron--opened):hover span:nth-child(3){ transform: scaleY(1.2); left: calc(var(--burguer-dimensions) * 0.1666); } .next-burger-disfigured--chevron--opened span:nth-child(1){ transform: rotate(45deg) scaleX(0.7); top: calc(var(--burguer-dimensions) * 0.4333); left: calc(var(--burguer-dimensions) * -0.2666); } .next-burger-disfigured--chevron--opened span:nth-child(2){ transform: scale(0); transition-duration: calc(var(--burguer-duration) / 6); } .next-burger-disfigured--chevron--opened span:nth-child(3){ transform: rotate(-45deg) scaleX(0.7); top: calc(var(--burguer-dimensions) * 0.4333); left: calc(var(--burguer-dimensions) * 0.2333); } .next-burger-disfigured--plus{ width: calc(var(--burguer-dimensions) * 1.1666); height: var(--burguer-dimensions); position: relative; cursor: pointer; display: inline-block; } .next-burger-disfigured--plus span{ background-color: var(--burguer-stroke-color); position: absolute; border-radius: var(--hamburger-border-radius); transition: var(--burguer-duration) var(--burguer-easing); width: 100%; height: var(--hamburger-layer-height); } .next-burger-disfigured--plus span:nth-child(1){ top:0px; left: 0px; } .next-burger-disfigured--plus span:nth-child(2){ top: calc(var(--burguer-dimensions) * 0.4333); left: 0px; } .next-burger-disfigured--plus span:nth-child(3){ bottom:0px; left: 0px; } .next-burger-disfigured--plus:not(.next-burger-disfigured--plus--opened):hover span:nth-child(1){ transform: scaleX(.8); } .next-burger-disfigured--plus:not(.next-burger-disfigured--plus--opened):hover span:nth-child(2){ transform: scaleX(.5); } .next-burger-disfigured--plus:not(.next-burger-disfigured--plus--opened):hover span:nth-child(3){ transform: scaleX(.8); } .next-burger-disfigured--plus--opened span:nth-child(1){ transform: rotate(90deg); top: calc(var(--burguer-dimensions) * 0.4333); } .next-burger-disfigured--plus--opened span:nth-child(2){ transform: scale(0); transition-duration: calc(var(--burguer-duration) / 6); } .next-burger-disfigured--plus--opened span:nth-child(3){ top: calc(var(--burguer-dimensions) * 0.4333); } .next-burger-disfigured--minus{ width: calc(var(--burguer-dimensions) * 1.1666); height: var(--burguer-dimensions); position: relative; cursor: pointer; display: inline-block; } .next-burger-disfigured--minus span{ background-color: var(--burguer-stroke-color); position: absolute; border-radius: var(--hamburger-border-radius); transition: var(--burguer-duration) var(--burguer-easing); width: 100%; height: var(--hamburger-layer-height); } .next-burger-disfigured--minus span:nth-child(1){ top:0px; left: 0px; } .next-burger-disfigured--minus span:nth-child(2){ top: calc(var(--burguer-dimensions) * 0.4333); left: 0px; } .next-burger-disfigured--minus span:nth-child(3){ bottom:0px; left: 0px; } .next-burger-disfigured--minus:not(.next-burger-disfigured--minus--opened):hover span:nth-child(1){ transform: scaleX(.8); } .next-burger-disfigured--minus:not(.next-burger-disfigured--minus--opened):hover span:nth-child(2){ transform: scaleX(.5); } .next-burger-disfigured--minus:not(.next-burger-disfigured--minus--opened):hover span:nth-child(3){ transform: scaleX(.8); } .next-burger-disfigured--minus--opened span:nth-child(1){ top: calc(var(--burguer-dimensions) * 0.4333); } .next-burger-disfigured--minus--opened span:nth-child(2){ top: calc(var(--burguer-dimensions) * 0.4333); } .next-burger-disfigured--minus--opened span:nth-child(3){ top: calc(var(--burguer-dimensions) * 0.4333); } /* * CORE BURGUER - ARROWS */ .next-burger-arrow { --burguer-dimensions: 50px; --hamburger-layer-height: 4px; --burguer-stroke-color: black; /*stroke color*/ --burguer-duration: 600ms; /*animation duration*/ --burguer-easing: ease; /*animation ease*/ --hamburger-border-radius: 4px; background: none; --anim-menu-btn-icon-size: calc(var(--burguer-dimensions) * 0.6666); display: flex; justify-content: center; align-items: center; width: var(--burguer-dimensions); height: var(--burguer-dimensions); } .next-burger-arrow__icon { position: relative; display: block; font-size: var(--anim-menu-btn-icon-size); width: 1em; height: var(--hamburger-layer-height); color: inherit; background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; -webkit-transform: scale(1); transform: scale(1); color: var(--burguer-stroke-color); } .next-burger-arrow__icon::before, .next-burger-arrow__icon::after { content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-image: inherit; border-radius: inherit; color: var(--burguer-stroke-color); } .next-burger-arrow__icon--close { background-size: 100% 100%; will-change: transform, background-size; transition-property: background-size, -webkit-transform; transition-property: transform, background-size; transition-property: transform, background-size, -webkit-transform; transition-duration: var(--burguer-duration); transition-timing-function: var(--burguer-easing); } .next-burger-arrow__icon--close::before, .next-burger-arrow__icon--close::after { will-change: inherit; transition: inherit; } .next-burger-arrow__icon--close::before { -webkit-transform: translateY(-0.25em) rotate(0); transform: translateY(-0.25em) rotate(0); } .next-burger-arrow__icon--close::after { -webkit-transform: translateY(0.25em) rotate(0); transform: translateY(0.25em) rotate(0); } [class^="next-burger-arrow--"][class$="--opened"] .next-burger-arrow__icon--close { background-size: 0% 100%; } [class^="next-burger-arrow--"][class$="--opened"] .next-burger-arrow__icon--close::before { -webkit-transform: translateY(0) rotate(45deg); transform: translateY(0) rotate(45deg); } [class^="next-burger-arrow--"][class$="--opened"] .next-burger-arrow__icon--close::after { -webkit-transform: translateY(0) rotate(-45deg); transform: translateY(0) rotate(-45deg); } .next-burger-arrow_icon-left, .next-burger-arrow_icon-right, .next-burger-arrow_icon-up, .next-burger-arrow_icon-down { border-radius: var(--hamburger-border-radius); will-change: transform; transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform; transition-duration: var(--burguer-duration); transition-timing-function: var(--burguer-easing); } .next-burger-arrow_icon-left::before, .next-burger-arrow_icon-left::after, .next-burger-arrow_icon-right::before, .next-burger-arrow_icon-right::after, .next-burger-arrow_icon-up::before, .next-burger-arrow_icon-up::after, .next-burger-arrow_icon-down::before, .next-burger-arrow_icon-down::after { -webkit-transform-origin: calc(var(--hamburger-layer-height)/2) 50%; transform-origin: calc(var(--hamburger-layer-height)/2) 50%; will-change: transform, width; transition-property: width, -webkit-transform; transition-property: transform, width; transition-property: transform, width, -webkit-transform; transition-duration: var(--burguer-duration); transition-timing-function: var(--burguer-easing); } .next-burger-arrow_icon-left::before, .next-burger-arrow_icon-right::before, .next-burger-arrow_icon-up::before, .next-burger-arrow_icon-down::before { -webkit-transform: translateY(-0.25em) rotate(0); transform: translateY(-0.25em) rotate(0); } .next-burger-arrow_icon-left::after, .next-burger-arrow_icon-right::after, .next-burger-arrow_icon-up::after, .next-burger-arrow_icon-down::after { -webkit-transform: translateY(0.25em) rotate(0); transform: translateY(0.25em) rotate(0); } .next-burger-arrow_icon-right { -webkit-transform: rotate(180deg); transform: rotate(180deg); } [class^="next-burger-arrow--"][class$="--opened"] .next-burger-arrow_icon-left::before, [class^="next-burger-arrow--"][class$="--opened"] .next-burger-arrow_icon-left::after, [class^="next-burger-arrow--"][class$="--opened"] .next-burger-arrow_icon-right::before, [class^="next-burger-arrow--"][class$="--opened"] .next-burger-arrow_icon-right::after, [class^="next-burger-arrow--"][class$="--opened"] .next-burger-arrow_icon-up::before, [class^="next-burger-arrow--"][class$="--opened"] .next-burger-arrow_icon-up::after, [class^="next-burger-arrow--"][class$="--opened"] .next-burger-arrow_icon-down::before, [class^="next-burger-arrow--"][class$="--opened"] .next-burger-arrow_icon-down::after { width: 50%; } [class^="next-burger-arrow--"][class$="--opened"] .next-burger-arrow_icon-left::before, [class^="next-burger-arrow--"][class$="--opened"] .next-burger-arrow_icon-right::before, [class^="next-burger-arrow--"][class$="--opened"] .next-burger-arrow_icon-up::before, [class^="next-burger-arrow--"][class$="--opened"] .next-burger-arrow_icon-down::before { -webkit-transform: translateY(0) rotate(-45deg); transform: translateY(0) rotate(-45deg); } [class^="next-burger-arrow--"][class$="--opened"] .next-burger-arrow_icon-left::after, [class^="next-burger-arrow--"][class$="--opened"] .next-burger-arrow_icon-right::after, [class^="next-burger-arrow--"][class$="--opened"] .next-burger-arrow_icon-up::after, [class^="next-burger-arrow--"][class$="--opened"] .next-burger-arrow_icon-down::after { -webkit-transform: translateY(0) rotate(45deg); transform: translateY(0) rotate(45deg); } [class^="next-burger-arrow--"][class$="--opened"] .next-burger-arrow_icon-up { -webkit-transform: rotate(90deg); transform: rotate(90deg); } [class^="next-burger-arrow--"][class$="--opened"] .next-burger-arrow_icon-down { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } /* * CORE BURGUER - BOUNCE */ .next-burger-bounce { --burguer-dimensions: 50px; --hamburger-layer-height: 1.5px; --burguer-stroke-color: black; /*stroke color*/ --burguer-duration: 600ms; /*animation duration*/ --burguer-easing: ease; /*animation ease*/ width: var(--burguer-dimensions); aspect-ratio: 1; display: grid; place-items: center; padding: 0; scale: 1; background: transparent; border: 0; cursor: pointer; } .next-burger-bounce, .next-burger-bounce *{ will-change: unset; } .next-burger-bounce rect { height: var(--hamburger-layer-height); transform-box: fill-box; transform-origin: 50% 50%; fill: var(--burguer-stroke-color); } .next-burger-bounce rect { transition: rotate var(--burguer-duration) 0s, translate var(--burguer-duration) var(--burguer-duration); transition-timing-function: var(--burguer-easing); } .next-burger-bounce--opened rect:nth-of-type(1) { translate: 0 333%; rotate: -45deg; } .next-burger-bounce--opened rect:nth-of-type(2) { rotate: 45deg; } .next-burger-bounce--opened rect:nth-of-type(3) { translate: 0 -333%; rotate: 45deg; } .next-burger-bounce--opened rect { transition: translate var(--burguer-duration), rotate var(--burguer-duration) calc(var(--burguer-duration) * 1.5); transition-timing-function: var(--burguer-easing); } .next-burger-bounce--opened svg { rotate: 90deg; transition: rotate calc(var(--burguer-duration) * 5) calc(var(--burguer-duration) * 2); } @supports (--custom: linear()) { .next-burger-bounce { --elastic-out: linear( 0, 0.2178 2.1%, 1.1144 8.49%, 1.2959 10.7%, 1.3463 11.81%, 1.3705 12.94%, 1.3726, 1.3643 14.48%, 1.3151 16.2%, 1.0317 21.81%, 0.941 24.01%, 0.8912 25.91%, 0.8694 27.84%, 0.8698 29.21%, 0.8824 30.71%, 1.0122 38.33%, 1.0357, 1.046 42.71%, 1.0416 45.7%, 0.9961 53.26%, 0.9839 57.54%, 0.9853 60.71%, 1.0012 68.14%, 1.0056 72.24%, 0.9981 86.66%, 1 ); --elastic-in-out: linear( 0, 0.0009 8.51%, -0.0047 19.22%, 0.0016 22.39%, 0.023 27.81%, 0.0237 30.08%, 0.0144 31.81%, -0.0051 33.48%, -0.1116 39.25%, -0.1181 40.59%, -0.1058 41.79%, -0.0455, 0.0701 45.34%, 0.9702 55.19%, 1.0696 56.97%, 1.0987 57.88%, 1.1146 58.82%, 1.1181 59.83%, 1.1092 60.95%, 1.0057 66.48%, 0.986 68.14%, 0.9765 69.84%, 0.9769 72.16%, 0.9984 77.61%, 1.0047 80.79%, 0.9991 91.48%, 1 ); } .next-burger-bounce--opened svg { transition-timing-function: var(--elastic-out); } } /* Sticky Nav (nestable) */ .bc-core-burguer--stickynav-menu{ display: none; } .bc-core-burguer--stickynav-menu-show{ display: flex; } .bc-stickynav-menu{ width: fit-content; height: fit-content; position: fixed; /*Sticky*/ z-index: 9999; top: 0; --transition-duration: 0.5s; --transition-easing: ease; transition: transform var(--transition-duration) var(--transition-easing), height var(--transition-duration) var(--transition-easing); /*duration, delay y ease*/ --transition-duration-responsive: 0.3s; --transition-delay-responsive: 0s; --transition-easing-responsive: ease; } .bc-stickynav-menu__items-wrapper{ position: relative; width: 100vw; display: flex; flex-direction: row; align-items: center; justify-content: center; column-gap: 15px; padding: 25px; background: #a0e806; --nav-transition-duration: 0.2s; --nav-transition-easing: ease; transition: background var(--nav-transition-duration) var(--nav-transition-easing); } .bc-stickynav-menu--scroll-start .bc-stickynav-menu__items-wrapper{ --filter: 0px; -webkit-backdrop-filter: blur(var(--filter)); backdrop-filter: blur(var(--filter)); } .bc-stickynav-menu[data-sticky=bc-stickynav-menu--sticky]{ transform: translateY(-100%); } .bc-stickynav-menu__items-wrapper--show{ /*responsive en el front*/ opacity: 1 !important; /*Animacion opacity*/ top: 0 !important; /*Animacion translateY*/ left: 0 !important; /*Animacion translateX*/ pointer-events: all !important; } .bc-stickynav-menu__items-wrapper--hide{ /*responsive en el builder*/ display: none; pointer-events: none; } .bricks-draggable-root [data-class=bc-stickynav-menu--responsive-media] .bc-stickynav-menu__items-wrapper{ /*responsive en el builder pero mostrandolo*/ display: flex; pointer-events: all; } /* * Blur reveal */ .next-blur-reveal__anchor{ display: block; width: fit-content; height: fit-content; } .next-blur-reveal{ display: block; width: fit-content; } .next-blur-reveal__inner{ display: block; clip-path: polygon(0 0, 150% 0, 150% 150%, 0% 150%); } .next-blur-reveal__line-wrapper{ overflow: hidden; } .next-blur-reveal__inner--to-hide{ opacity: 0; } /* * Blur reading */ .next-blur-reading { width: 100%; height: auto; font-size: 36px; } .blur-word, .blur-char{ -webkit-backface-visibility: hidden; -webkit-perspective: 1000; backface-visibility: hidden; perspective: 1000; } /* * CTA nav */ .next-cta-nav *{ white-space: nowrap; flex-wrap: nowrap; box-sizing: border-box; } .next-cta-nav { overflow: hidden; width: auto; height: auto; background-color: #FF98ED; --offset: 20px; --duration: 0.7s; --easing: ease; transition: width var(--duration) var(--easing), height var(--duration) var(--easing); } .next-cta-nav--stick{ margin-top: unset; position: fixed; top: var(--offset); } .next-cta-nav__cta, .next-cta-nav__nav{ display: flex; flex-direction: row; column-gap: 8px; width: fit-content; height: auto; padding: 10px 20px; } .next-cta-nav--stick .next-cta-nav__cta { display: none; } .next-cta-nav:not(.next-cta-nav--stick) .next-cta-nav__nav { display: none; } .next-cta-nav__cta--get-width, .next-cta-nav__nav--get-width{ display: flex !important; } /* * Dock */ .next-dock-menu { width: fit-content; height: auto; padding: 8px; display: flex; align-items: center; justify-content: center; gap: 8px; } .next-dock-menu__item { --dimensions: 40px; width: var(--dimensions); height: var(--dimensions); min-width: unset !important; min-height: unset !important; outline: unset !important; cursor: pointer; position: relative; } .next-dock-menu__item::before { white-space: nowrap; content: attr(data-tooltip); display: block; padding: 5px; position: absolute; top: -28px; left: 50%; transform: translateX(-50%); font-size: 10px; color: #e0e0e0; opacity: 0; pointer-events: none; transition: 0.1s ease-out opacity; } .next-dock-menu__item:hover::before { opacity: 1; } /* * Inverted Corner */ .next-inverted-corner{ --block-background: #8EFF71; --corners-background: #fff; --block-border-radius: 20px; --thickness: var(--block-border-radius); --inverted-corner-border-radius: 50%; --content-corner-width: 60px; --content-corner-height: 60px; --content-corner-distance: 6px; width: 400px; height: 400px; } .next-inverted-corner__inner { position: relative; width: 100%; height: 100%; background: var(--corners-background); border-radius: var(--block-border-radius); overflow: hidden; } .next-inverted-corner__box { width: 100%; height: 100%; background: var(--corners-background); border-radius: var(--block-border-radius); overflow: hidden; } /*block content*/ .next-inverted-corner__content-wrapper { position: absolute; inset: 0; background: var(--block-background); display: flex; align-items: center; justify-content: center; } .next-inverted-corner__content-corner { position: absolute; z-index: 1; width: var(--content-corner-width); height: var(--content-corner-height); background: var(--corners-background); } .next-inverted-corner__content-corner::before { position: absolute; z-index: -1; content: ""; background: transparent; width: var(--thickness); height: var(--thickness); } .next-inverted-corner__content-corner::after { position: absolute; z-index: -1; content: ""; background: transparent; width: var(--thickness); height: var(--thickness); } /*top left corner position*/ .next-inverted-corner--top-left .next-inverted-corner__inner{ border-top-left-radius: 0; } .next-inverted-corner--top-left .next-inverted-corner__content-corner{ border-bottom-right-radius: var(--inverted-corner-border-radius); } .next-inverted-corner--top-left .next-inverted-corner__content-corner{ top: calc(var(--content-corner-distance) * -1); left: calc(var(--content-corner-distance) * -1); } .next-inverted-corner--top-left .next-inverted-corner__content-corner::before{ top: var(--content-corner-distance); right: calc(var(--thickness) * -1); border-top-left-radius: var(--thickness); box-shadow: calc(var(--block-border-radius) * -1) calc(var(--block-border-radius) * -1) 0 var(--block-border-radius) var(--corners-background); } .next-inverted-corner--top-left .next-inverted-corner__content-corner::after{ bottom: calc(var(--thickness) * -1); left: var(--content-corner-distance); border-top-left-radius: var(--thickness); box-shadow: calc(var(--block-border-radius) * -1) calc(var(--block-border-radius) * -1) 0 var(--block-border-radius) var(--corners-background); } /*top right corner position*/ .next-inverted-corner--top-right .next-inverted-corner__inner{ border-top-right-radius: 0; } .next-inverted-corner--top-right .next-inverted-corner__content-corner{ border-bottom-left-radius: var(--inverted-corner-border-radius); } .next-inverted-corner--top-right .next-inverted-corner__content-corner{ top: calc(var(--content-corner-distance) * -1); right: calc(var(--content-corner-distance) * -1); } .next-inverted-corner--top-right .next-inverted-corner__content-corner::before{ top: var(--content-corner-distance); left: calc(var(--thickness) * -1); border-top-right-radius: var(--thickness); box-shadow: var(--block-border-radius) calc(var(--block-border-radius) * -1) 0 var(--block-border-radius) var(--corners-background); } .next-inverted-corner--top-right .next-inverted-corner__content-corner::after{ bottom: calc(var(--thickness) * -1); right: var(--content-corner-distance); border-top-right-radius: var(--thickness); box-shadow: var(--block-border-radius) calc(var(--block-border-radius) * -1) 0 var(--block-border-radius) var(--corners-background); } /*bottom left corner position*/ .next-inverted-corner--bottom-left .next-inverted-corner__inner{ border-bottom-left-radius: 0; } .next-inverted-corner--bottom-left .next-inverted-corner__content-corner{ border-top-right-radius: var(--inverted-corner-border-radius); } .next-inverted-corner--bottom-left .next-inverted-corner__content-corner{ bottom: calc(var(--content-corner-distance) * -1); left: calc(var(--content-corner-distance) * -1); } .next-inverted-corner--bottom-left .next-inverted-corner__content-corner::before{ bottom: var(--content-corner-distance); right: calc(var(--thickness) * -1); border-bottom-left-radius: var(--thickness); box-shadow: calc(var(--block-border-radius) * -1) var(--block-border-radius) 0 var(--block-border-radius) var(--corners-background); } .next-inverted-corner--bottom-left .next-inverted-corner__content-corner::after{ top: calc(var(--thickness) * -1); left: var(--content-corner-distance); border-bottom-left-radius: var(--thickness); box-shadow: calc(var(--block-border-radius) * -1) var(--block-border-radius) 0 var(--block-border-radius) var(--corners-background); } /*bottom right corner position*/ .next-inverted-corner--bottom-right .next-inverted-corner__inner{ border-bottom-right-radius: 0; } .next-inverted-corner--bottom-right .next-inverted-corner__content-corner{ border-top-left-radius: var(--inverted-corner-border-radius); } .next-inverted-corner--bottom-right .next-inverted-corner__content-corner{ bottom: calc(var(--content-corner-distance) * -1); right: calc(var(--content-corner-distance) * -1); } .next-inverted-corner--bottom-right .next-inverted-corner__content-corner::before{ bottom: var(--content-corner-distance); left: calc(var(--thickness) * -1); border-bottom-right-radius: var(--thickness); box-shadow: var(--block-border-radius) var(--block-border-radius) 0 var(--block-border-radius) var(--corners-background); } .next-inverted-corner--bottom-right .next-inverted-corner__content-corner::after{ top: calc(var(--thickness) * -1); right: var(--content-corner-distance); border-bottom-right-radius: var(--thickness); box-shadow: var(--block-border-radius) var(--block-border-radius) 0 var(--block-border-radius) var(--corners-background); } /*ball*/ .next-inverted-corner__ball { position: absolute; inset: 10px; background: #282828; border-radius: 100px; width: unset; min-width: unset !important; min-height: unset !important; outline: unset !important; } /* * Tiles */ .next-tiles{ overflow: hidden; position: relative; width: 400px; /**/ height: 400px; /**/ border: 1px solid rgba(229, 229, 229, 1); /**/ border-radius: 16px; /**/ display: flex; justify-content: center; align-items: center; --offset: 20px; --mouseenter-color: rgba(236, 236, 236, 1); --mouseleave-color: rgba(129, 129, 129, 1); --duration: 0.2s; --easing: ease-in-out; } .next-tiles__content{ position: relative; z-index: 1; width: fit-content; height: fit-content; } .next-tiles__squares-layout{ position: absolute; top: calc(-50% - var(--offset)); left: calc(-50% - var(--offset)); width: 100%; height: 100%; } .next-tiles__square{ border: .5px solid rgba(229, 229, 229, 1); /**/ transition: background-color var(--duration) var(--easing); position: absolute; } .next-tiles__square--mouseleave{ background-color: var(--mouseleave-color); } .next-tiles__square--mouseenter{ background-color: var(--mouseenter-color); } /* * Designer Cursor */ /*flickering*/ .next-designer-cursor--to-hide{ opacity: 0; } .next-designer-cursor--animation-enabled{ --floating-duration: 2s; --floating-easing: ease-in-out; } .next-designer-cursor--animation-enabled.next-designer-cursor--animation-horizontal.next-designer-cursor--relative{ animation: floatingX var(--floating-duration) var(--floating-easing) infinite; } .next-designer-cursor--animation-enabled.next-designer-cursor--animation-vertical.next-designer-cursor--relative{ animation: floatingY var(--floating-duration) var(--floating-easing) infinite; } @keyframes floatingX { 0% { transform: translateX(0); } 50% { transform: translateX(-10px); } 100% { transform: translateX(0); } } @keyframes floatingY { 0% { transform: translateY(0); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0); } } /*attached to cursor*/ .next-designer-cursor--attached { position: fixed; z-index: 9999; /**/ pointer-events: none; opacity: 0; --scale: 0.5; /**/ --duration: 0.3s; /**/ --easing: ease; /**/ transform: scale(var(--scale)); transition: opacity var(--duration) var(--easing), transform var(--duration) var(--easing); } .next-designer-cursor--attached.active { opacity: 1; transform: scale(1); } /*non attached to cursor*/ .next-designer-cursor-relative-parent{ position: relative; } .next-designer-cursor--relative{ position: absolute; top: 0; left: 0; z-index: 9999; /**/ pointer-events: none; } /*shared pointer styles*/ .next-designer-cursor__pointer { min-height: unset !important; min-width: unset !important; --dimensions: 24px; /**/ --rotate: -70deg; /**/ stroke: #0284c7; /**/ stroke-width: 1px; /**/ fill: #0ea5e9; /**/ width: var(--dimensions); height: var(--dimensions); transform: translate(-50%, -50%) rotate(var(--rotate)); } .next-designer-cursor__pointer-name { position: absolute; white-space: nowrap; padding: 4px 8px; /*padding*/ top: 12px; /**/ left: 12px; /**/ background-color: #0ea5e9; /**/ border-radius: 100px; /*border*/ /*border-shadow*/ font-size: 14px; /*typography*/ font-weight: 400; /*typography*/ line-height: 1.7; /*typography*/ color: white; /*typography*/ } /* * Stacking Cards */ .next-stacking-cards{ display: flex; flex-direction: column; justify-content: center; align-items: center; --offset: 0px; /**/ --width: 100vw; /**/ --height: 100vh; /**/ } .next-stacking-cards__card{ display: flex; flex-direction: column; justify-content: center; align-items: center; position: sticky; top: var(--offset); width: var(--width); height: var(--height); color: white; /*typography - general*/ } .next-stacking-cards__card--1{ background: #2f251e; } .next-stacking-cards__card--2{ background: #43392f; } .next-stacking-cards__card--3{ background: #12100e; } /* * Parallax Slider */ [data-flickering]{ opacity: 0; } .next-parallax-slider{ --items-width: 40vw; /*slider items width*/ --parallax-scale: 1.75; /*parallax scale*/ --progress-height: 1px; /*progress height*/ color: white; /*default headings*/ } /*Slider*/ .next-parallax-slider__slider { display: flex; align-items: center; overflow-x: hidden; will-change: transform; width: 100%; /*item width*/ height: 600px; /*item height*/ } .next-parallax-slider__container { display: grid; grid-template-columns: repeat(var(--slidesTotal), var(--items-width)); gap: 50px; /*slider gap*/ cursor: grab; padding: 0 50px; /*slider padding*/ height: 100%; } .next-parallax-slider__item { display: flex; align-items: center; justify-content: center; pointer-events: none; will-change: transform; height: 100% } .next-parallax-slider__item-img-wrap { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; } .next-parallax-slider__item-content { display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 1; user-select: none; } .next-parallax-slider__item-img { max-width: unset; pointer-events: none; user-select: none; transform-origin: left center; transform: scale(var(--parallax-scale)); /*scale*/ will-change: transform; } .is-dragging .next-parallax-slider__container { cursor: grabbing; } /*Progress*/ .next-parallax-slider__progress{ margin-top: 50px; /*progress margin*/ width: 100%; display: flex; align-items: center; justify-content: center; height: fit-content; } .next-parallax-slider__progress-line-wrap { display: block; width: 80%; /**/ height: var(--progress-height); overflow: hidden; background-color: #d6d6d6; /*progress path color*/ transform-origin: left center; will-change: transform; } .next-parallax-slider__progress-line { display: block; width: 100%; height: var(--progress-height); background-color: #000; /*progress line color*/ transform: scaleX(0); transform-origin: left center; will-change: transform; } /* * Cursor Slide */ .next-cursor-slide{ position: fixed; overflow: hidden; pointer-events: none; --width: 300px; /*slide item width*/ --height: 300px; /*slide item height*/ --slide-duration: .4s; /*slide duration*/ --slide-easing: cubic-bezier(.76,0,.24,1); /*slide easing*/ --cursor-duration: .5s; /*cursor duration*/ --cursor-easing: cubic-bezier(.76,0,.24,1); /*cursor easing*/ width: var(--width); height: var(--height); transform: translate(-50%, -50%) scale(0); transform-origin: center center; transition: transform var(--slide-duration) var(--slide-easing); } .next-cursor-slide--opened { transform: translate(-50%, -50%) scale(1); } .next-cursor-slide--closed { transform: translate(-50%, -50%) scale(0); } .next-cursor-slide__transform{ width: 100%; height: fit-content; display: flex; flex-direction: column; position: absolute; top: 0; transition: top var(--cursor-duration) var(--cursor-easing); } .next-cursor-slide__item{ width: var(--width); height: var(--height); } .next-cursor-slide__item img{ width: 100%; height: 100%; object-fit: cover; } /* * Fluids */ .next-fluids{ position: relative; width: 100vw; /**/ height: 100vh; /**/ background-color: #000; /**/ } .next-fluids__canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .next-fluids__content{ position: relative; z-index: 1; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: white; pointer-events: none; } .next-fluids__content > * { pointer-events: auto; } /* * Progress Bar */ .next-progress-bar { position: fixed; z-index: 9999; /*z-index*/ /*top*/ /*left*/ right: 75px; /*right*/ bottom: 50px; /*bottom*/ width: 1px; /*width*/ height: 100px; /*height*/ background: #0080ff3f; /*path color*/ } .next-progress-bar__inner { background: #007fff; /*fill color*/ width: 100%; height: 0%; position: absolute; } .next-progress-bar__number { position: absolute; --top: -15px; /*number top*/ transform: translateY(var(--top)); top: 0; left: 10px; /*number left*/ font-size: 14px; /*typography*/ color: #007fff; /*typography*/ } /* * Interactive Divider */ .next-interactive-divider { display: flex; flex-direction: column; align-items: flex-end; width: 100%; /*width*/ --divider-height: 1px; /*height*/ --drag-height: 40px; /*drag height anim*/ --drop-height: 500px; /*drop height anim*/ } .next-interactive-divider__line { height: var(--divider-height); width: 100%; position: relative; } .next-interactive-divider__svg { width: 100%; height: var(--drop-height); position: absolute; top: calc(-1 * var(--drop-height) / 2); overflow: visible; } .next-interactive-divider__path { stroke: black; /*color*/ stroke-width: var(--divider-height); fill: none; } .next-interactive-divider__box { height: var(--drag-height); width: 100%; position: relative; top: calc(-1 * var(--drag-height) / 2); z-index: 1; } .next-interactive-divider__box:hover { height: var(--drop-height); top: calc(-1 * var(--drop-height) / 2); } /* * QR Code */ .next-qr-code[data-flickering]{ opacity: 0; } .next-qr-code{ overflow: hidden; width: 150px; height: 150px; background-color: #fff; } .next-qr-code img{ margin-top: -10px; } /* * Meteors */ .next-meteors{ width: 100vw; /*width*/ height: 100vh; /*height*/ position: relative; display: flex; justify-content: center; align-items: center; overflow: hidden; } .next-meteors__content { width: 350px; /*content width*/ height: 300px; /*content height*/ background: #00000056; /*content background*/ border-radius: 12px; /*content radius*/ --blur: 5px; /*content blur*/ -webkit-backdrop-filter: blur(var(--blur)); backdrop-filter: blur(var(--blur)); position: relative; z-index: 2; display: flex; justify-content: center; align-items: center; color: white; } .next-meteors__line { container-type: size; position: absolute; left: 50%; translate: 0 -50%; height: 150vmax; /*line height*/ width: 2px; /*line width*/ background: #00000015; /*line background*/ rotate: 50deg; /*line rotate*/ } .next-meteors__line:nth-of-type(1) { /*line top*/ --speed: 8s; /*meteor speed*/ --ease: linear; /*meteor ease*/ --delay: -2s; /*meteor delay*/ } .next-meteors__line:nth-of-type(2) { /*line top*/ --speed: 8s; /*meteor speed*/ --ease: linear; /*meteor ease*/ --delay: -2s; /*meteor delay*/ } .next-meteors__line:nth-of-type(3) { /*line top*/ --speed: 8s; /*meteor speed*/ --ease: linear; /*meteor ease*/ --delay: -2s; /*meteor delay*/ } .next-meteors__line:nth-of-type(4) { /*line top*/ --speed: 8s; /*meteor speed*/ --ease: linear; /*meteor ease*/ --delay: -2s; /*meteor delay*/ } .next-meteors__meteor { aspect-ratio: 1; filter: url(#drop); position: absolute; left: 50%; bottom: 100%; translate: -50% 0%; animation: scale var(--speed) calc(var(--delay, var(--speed) * -0.5)) infinite var(--ease); } #bricks-preview .next-meteors[data-disable-builder="1"] .next-meteors__meteor { display: none; } @keyframes scale { to { transform: translateY(calc(var(--distance, 100cqh) + (var(--buffer, 100%)))); } } /* * Cookies */ .next-cookies{ --notification-translate: 25px; /**/ --notification-transition-duration: 0.3s; /**/ --notification-transition-easing: ease; /**/ } .next-cookies__notification{ position: fixed; /**/ z-index: 9998; /**/ left: 25px; /**/ bottom: 25px; /**/ display: flex; flex-wrap: wrap; flex-direction: row; column-gap: 72px; row-gap: 24px; align-items: center; justify-content: flex-start; max-width: fit-content; /**/ width: calc(100% - 50px); /**/ height: auto; /**/ padding: 24px; /**/ border-radius: 23px; /**/ border: .5px solid rgb(220, 220, 220); /**/ box-shadow: 6px 50px 40px -10px rgba(0,0,0,0.3); /**/ opacity: 0; pointer-events: none; transform: translateY(var(--notification-translate)); transition: opacity var(--notification-transition-duration) var(--notification-transition-easing), transform var(--notification-transition-duration) var(--notification-transition-easing); } .next-cookies__content{ width: fit-content; display: flex; flex-direction: column; row-gap: 4px; } .next-cookies__label{ font-size: 18px; /*typography*/ line-height: normal; color: #000; } .next-cookies__info{ font-size: 14px; /*typography*/ line-height: normal; color: #606060; } .next-cookies__buttons{ display: flex; flex-direction: row; column-gap: 12px; align-items: center; width: fit-content; } .next-cookies__manage, .next-cookies__allow{ cursor: pointer; } .next-cookies__manage{ padding: 12px 24px; /**/ border-radius: 12px; /**/ background: #eaeaea; /**/ font-size: 14px; /*typography*/ font-weight: 600; color: #000; } .next-cookies__allow{ padding: 12px 24px; /**/ border-radius: 12px; /**/ background: #000; /**/ font-size: 14px; /*typography*/ font-weight: 600; color: white; } .next-cookies__notification--opacity-disabled{ /**/ transition: transform var(--notification-transition-duration) var(--notification-transition-easing); } .next-cookies__notification--transform-disabled{ /**/ transition: opacity var(--notification-transition-duration) var(--notification-transition-easing); } .next-cookies__notification--opacity-transform-disabled{ /**/ transition: none; } .next-cookies__notification[data-opened]{ transform: translateY(0); opacity: 1; pointer-events: all; }