:root {
--black: #040404;
--green: #50e18d80;
--white: #ffffff;
--current-color: var(--white);
}
::selection {
background-color: var(--white);
color: var(--black);
text-shadow: none;
}
* {
color: var(--white);
}
@font-face {
font-family: 'Circular';
src: url(//clavoenhip.com/wp-content/themes/clavo-food-child/fonts/CircularStd-Bold.woff2) format('woff2'),
url(//clavoenhip.com/wp-content/themes/clavo-food-child/fonts/CircularStd-Bold.woff) format('woff'),
url(//clavoenhip.com/wp-content/themes/clavo-food-child/fonts/CircularStd-Bold.otf) format('opentype');
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Circular';
src: url(//clavoenhip.com/wp-content/themes/clavo-food-child/fonts/CircularStd-Light.woff2) format('woff2'),
url(//clavoenhip.com/wp-content/themes/clavo-food-child/fonts/CircularStd-Light.woff) format('woff'),
url(//clavoenhip.com/wp-content/themes/clavo-food-child/fonts/CircularStd-Light.otf) format('opentype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Space Grotesk';
src: url(//clavoenhip.com/wp-content/themes/clavo-food-child/fonts/SpaceGrotesk-Bold.woff2) format('woff2'),
url(//clavoenhip.com/wp-content/themes/clavo-food-child/fonts/SpaceGrotesk-Bold.woff) format('woff'),
url(//clavoenhip.com/wp-content/themes/clavo-food-child/fonts/SpaceGrotesk-Bold.otf) format('opentype');
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Space Grotesk';
src: url(//clavoenhip.com/wp-content/themes/clavo-food-child/fonts/SpaceGrotesk-Light.woff2) format('woff2'),
url(//clavoenhip.com/wp-content/themes/clavo-food-child/fonts/SpaceGrotesk-Light.woff) format('woff'),
url(//clavoenhip.com/wp-content/themes/clavo-food-child/fonts/SpaceGrotesk-Light.otf) format('opentype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Return';
src: url(//clavoenhip.com/wp-content/themes/clavo-food-child/fonts/ReturnOfGanonReg.woff2) format('woff2'),
url(//clavoenhip.com/wp-content/themes/clavo-food-child/fonts/ReturnOfGanonReg.woff) format('woff'),
url(//clavoenhip.com/wp-content/themes/clavo-food-child/fonts/ReturnOfGanonReg.otf) format('opentype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
body {
background-color: var(--black);
}
html,
body {
overflow-x: hidden;
}
div#footer,
div#header,
hr {
display: none;
}
#viewportSize {
position: fixed;
top: 0;
z-index: 999999;
background: black;
padding: 20px;
font-weight: bold;
}
.responsive-svg {
width: 100%;
height: auto;
max-width: 100vw;
}
.gradient-top {
position: absolute;
top: 0;
left: auto;
z-index: -1;
width: 100%;
pointer-events: none;
}
main {
max-width: 100vw;
}
.centered-flex {
align-items: center;
justify-content: center;
}
.fixed-header {
height: 34vh;
display: flex;
position: fixed;
box-shadow: 0px -18vw 250vw #50e18d80;
flex-flow: column;
padding: 0 10vw;
width: calc(100vw - 20vw);
align-items: center;
justify-content: space-between;
background-color: var(--black);
z-index: 999;
}
.lottie-container {
width: 100vw;
display: flex;
overflow: hidden;
}
.lottie-container video {
mix-blend-mode: lighten;
}
.marquee {
--gap: 1rem;
position: relative;
display: flex;
overflow: hidden;
user-select: none;
gap: var(--gap);
padding: 20px 0;
width: 100vw;
mix-blend-mode: color-dodge;
}
.marquee__content {
flex-shrink: 0;
display: flex;
justify-content: space-around;
gap: var(--gap);
min-width: 100%;
animation: scroll 20s linear infinite;
}
.marquee__content.reverse {
animation-name: scroll-reverse;
}
@keyframes scroll-reverse {
from {
transform: translateX(calc(-100% - var(--gap)));
}
to {
transform: translateX(0);
}
}
@keyframes scroll {
from {
transform: translateX(0);
}
to {
transform: translateX(calc(-100% - var(--gap)));
}
}
.marquee__content * {
font-family: 'Return', monospace;
font-size: 1.3vh;
line-height: 1;
}
.clavo-logo {
display: flex;
width: 100%;
}
.clavo-logo * {
width: 17vw;
}
.lottie-container * {
max-width: 40vh;
font-size: 5.5vw;
text-align: center;
line-height: 1;
font-family: 'Space Grotesk';
text-transform: uppercase;
position: relative;
}
span.animated-badge.last {
left: 1vw;
bottom: 0.5vw;
}
span.animated-badge.first {
top: 0;
left: 4vw;
}
span.animated-badge.year {
right: -3vw;
top: 4vw;
}
.text-animation {
padding-bottom: 2vw;
}
.lottie-container p {
margin: 0;
}
.animated .char {
transform: translateY(30px);
transition: all 0.45s cubic-bezier(0.15, 0.75, 0.5, 1);
}
.splitting .word {
vertical-align: bottom;
position: relative;
display: inline-block;
}
.splitting .char {
position: relative;
display: inline-block;
}
span.animated-badge {
text-transform: none;
font-size: 1.3vw;
padding: 0.5vw 1.2vw;
border: 1px solid #ffffff;
border-radius: 4vw;
background-color: transparent;
position: absolute;
z-index: 999;
mask-image: linear-gradient(white, white);
mask-size: 100% 100%;
}
.scaner-text p {
text-align: right;
font-size: 2vw;
font-family: 'Space Grotesk', monospace;
line-height: 1.1;
}
.scaner {
display: flex;
width: 100vw;
justify-content: flex-end;
float: right;
}
.scanner-qr {
background-color: var(--white);
padding: 2vw;
border-bottom-left-radius: 2vw;
border-top-left-radius: 2vw;
padding-right: 3vw;
}
.scanner-qr * {
width: 10vw;
}
.scaner-text {
max-width: 14vw;
margin-right: 4vw;
display: flex;
flex-flow: column;
align-items: self-end;
justify-content: flex-end;
padding-bottom: 2vw;
}
.scaner-text svg {
width: 50%;
display: flex;
justify-self: right;
}
.main-content {
padding-top: 34vh;
z-index: -1;
}
.desliza {
display: flex;
width: 100vw;
justify-content: start;
padding: 10vw;
gap: 1vw;
}
.desliza svg {
width: 1vw;
}
.desliza p {
font-size: 2vw;
font-family: 'Space Grotesk', monospace;
line-height: 1.1;
max-width: 13vw;
}
.carousel {
overflow-x: clip;
position: relative;
}
.swiper {
padding: 5rem 0;
overflow: visible;
}
.carousel .swiper-slide,
.fabricas-slide {
width: 18.7vw;
aspect-ratio: 1 / 1;
}
.single {
position: relative;
pointer-events: none;
user-select: none;
aspect-ratio: 1 / 1;
}
.single img {
width: 100%;
height: 100%;
vertical-align: top;
pointer-events: none;
object-fit: cover;
}
.single::after {
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: #0000001e;
z-index: 99;
display: block;
}
.swiper-horizontal {
height: 16vh;
}
.swiper-slide .single,
.fabricas-slide .single {
border-radius: 1vw;
overflow: hidden;
background: rgb(189, 255, 138);
background: linear-gradient(30deg, rgba(189, 255, 138, 0.1) 0%, rgba(44, 255, 251, 0.5) 38%, rgba(255, 255, 255, 1) 100%);
padding: 1px;
}
.carousel::before,
.footer::before {
position: absolute;
top: -38%;
left: 50%;
width: 42vw;
height: 42vw;
content: '';
background: rgb(80, 223, 225);
background: radial-gradient(circle, rgba(80, 223, 225, 0.19892622576374297) 0%, rgba(4, 4, 4, 0) 100%);
transform: translateX(-50%);
filter: blur(7vw);
border-radius: 100%;
}
.footer::before {
z-index: -1;
top: 10vw;
}
.swiper-slide .single img,
.fabricas-slide .single img {
border-radius: 1vw;
}
p.swiper-title,
p.fabricas-title {
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
font-family: 'Space Grotesk', monospace;
font-size: 1.6vw;
z-index: 99999;
}
p.content-title {
text-align: center;
font-size: 4vw;
font-family: 'Circular';
position: relative;
}
p.content-title::after {
content: url('data:image/svg+xml,<svg viewBox="0 0 216 10" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="216" height="10" fill="url(%23paint0_linear_1_162)"/><defs><linearGradient id="paint0_linear_1_162" x1="22.8734" y1="0.0982528" x2="23.332" y2="19.3799" gradientUnits="userSpaceOnUse"><stop stop-color="white"/><stop offset="0.794898" stop-color="%232CFFFD" stop-opacity="0.5"/><stop offset="1" stop-color="%23BDFF8A" stop-opacity="0"/></linearGradient></defs></svg>');
position: absolute;
left: 30vw;
bottom: -39%;
display: block;
width: 10vw;
}
.contact-title {
font-family: 'Space Grotesk', monospace;
font-size: 6vw;
padding: 0 10vw;
}
.qr-contact {
max-width: 14vw;
background-color: white;
padding: 2vw;
border-radius: 1vw;
display: flex;
margin: 0 auto;
margin-top: 1vw;
}
svg.contact-arrow {
height: 3vh;
}
.contact-section .content-title::after {
display: none;
}
.content-three-columns {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10vw;
padding: 0 26vw;
margin-bottom: 90px;
}
.content-two-columns {
display: grid;
grid-template-columns: repeat(2, 1fr);
padding: 0 26vw;
margin-bottom: 90px;
gap: 1vh;
}
.grey-content {
opacity: 50%;
}
.content-6.content-three-columns {
gap: 0;
padding: 0 4vw;
text-align: center;
}
.content-column ul {
list-style: none;
padding: 0;
}
.content-column ul li::before {
content: '·';
position: relative;
margin-right: 0.2vw;
}
.logo-1 {
margin-bottom: 1vw;
}
.content-four-columns {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 5vw;
padding: 0 10vw;
margin-bottom: 90px;
}
.arrow-separation {
display: flex;
justify-content: center;
align-items: center;
padding: 10vw 0;
flex-flow: column;
}
.arrow-separation svg {
height: 10vw;
}
.fabricas {
pointer-events: none;
display: flex;
justify-content: center;
gap: 4vw;
}
.fabricas-slide:first-child {
transform: rotate(-5deg) translateY(1vw);
}
.fabricas-slide:last-child {
transform: rotate(5deg) translateY(1vw);
}
.center-text,
.center-small-text {
text-align: center;
}
.center-small-text {
font-size: 1.2vw;
font-family: 'Circular';
max-width: 65ch;
margin: auto;
padding: 2vh 0;
}
.center-small-text:first-child {
margin-bottom: 5vh;
}
.content-three-columns,
.center-text,
.content-four-columns {
font-size: 2.1vw;
font-family: 'Circular';
line-height: 1.1;
}
strong {
font-weight: 600;
}
.content-column.with-dot strong::before {
content: url('data:image/svg+xml,<svg viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="13" cy="13" r="13" fill="%23D9D9D9"/></svg>');
margin-right: 1vw;
width: 1vw;
display: inline-block;
}
.footer .desliza {
display: flex;
width: 100vw;
justify-content: end;
padding: 0;
}
.footer .desliza svg {
transform: rotate(180deg);
}
.footer .clavo-logo {
align-self: center;
justify-content: center;
margin-bottom: 5vh;
}
.to-top {
display: flex;
gap: 1vw;
align-items: start;
}
.footer {
position: relative;
overflow: hidden;
padding-top: 6vh;
display: flex;
flex-flow: column;
}
.content-full {
padding: 0 25vw;
}
.custom-section .content-three-columns {
padding: 0;
gap: 7vw;
padding-right: 5vw;
margin-bottom: 0;
}
.custom-section {
display: flex;
padding: 5vw;
align-items: center;
}
.with-arrow {
position: relative;
padding-right: 2vw;
}
.contact-section {
padding-top: 10vh;
text-align: center;
position: relative;
}
.with-arrow::after {
content: url('data:image/svg+xml,<svg width="43" height="16" viewBox="0 0 43 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M42.7071 8.70711C43.0976 8.31658 43.0976 7.68342 42.7071 7.29289L36.3431 0.928932C35.9526 0.538408 35.3195 0.538408 34.9289 0.928932C34.5384 1.31946 34.5384 1.95262 34.9289 2.34315L40.5858 8L34.9289 13.6569C34.5384 14.0474 34.5384 14.6805 34.9289 15.0711C35.3195 15.4616 35.9526 15.4616 36.3431 15.0711L42.7071 8.70711ZM0 9H42V7H0V9Z" fill="white"/></svg>');
position: absolute;
right: 0;
top: 0;
}
.gradient-bg {
position: absolute;
top: 21vh;
width: 100%;
left: auto;
z-index: -1;
}
.gradient-bg svg {
width: 78vw;
height: auto;
}
.fullsvg img {
width: 100vw;
}
.grecaptcha-badge {
visibility: hidden;
}
form p,
textarea,
input {
width: 100%;
margin: 0;
}
form {
padding: 0 10vw;
padding-top: 10vh;
}
input,
textarea {
font-size: 30px !important;
line-height: 1.3;
font-family: 'Circular', sans-serif;
padding: 1px;
border-radius: 18px;
position: relative;
overflow: hidden;
background-color: #040404;
min-height: 60px;
border: none;
padding: 15px;
box-sizing: border-box;
}
.form-border {
margin: 15px 0 30px 0;
background-image: linear-gradient(#040404, #040404),
linear-gradient(30deg, rgba(189, 255, 138, 0.1) 0%, rgba(44, 255, 251, 0.5) 38%, rgba(255, 255, 255, 1) 100%);
border: solid 2px transparent;
border-radius: 18px;
background-origin: border-box;
background-clip: content-box, border-box;
}
input.wpcf7-form-control.wpcf7-submit.has-spinner {
background: #ffffff;
color: #040404;
font-family: 'Space Grotesk', monospace;
font-weight: 600;
border: none;
cursor: pointer;
}
.wpcf7-not-valid-tip {
position: absolute;
top: 50px;
right: 0;
}
.content-badge svg {
width: 17vw;
}
.onlydesktop {
display: none;
}
.onlydesktop a {
text-decoration: none;
padding: 1vw 2vw;
border: 1px solid #ffffff;
border-radius: 4vw;
transition: all 0.3s ease;
font-size: 1.1vw;
}
.onlydesktop a:hover {
color: #040404;
background-color: #ffffff;
}
@media (orientation: portrait) and (max-width: 790px) {
.onlydesktop {
display: block;
}
.fixed-header .scaner {
display: none;
}
}
@media (orientation: landscape) {
.onlydesktop {
display: block;
}
.clavo-logo * {
width: 8vw;
}
.scaner-text p {
text-align: right;
font-size: 1vw;
}
.scanner-qr * {
width: 7vw;
}
.scaner-text {
padding-bottom: 1vw;
}
.scanner-qr {
background-color: var(--white);
padding: 1.5vw;
border-bottom-left-radius: 1vw;
border-top-left-radius: 1vw;
padding-right: 3.5vw;
}
.lottie-container * {
max-width: 57vw;
}
.marquee__content * {
font-size: 1.2vw;
}
.swiper-horizontal {
height: 32vw;
}
.fixed-header {
height: 60vh;
position: relative;
}
.fixed-header .scaner {
display: none;
}
.main-content {
padding-top: 0;
}
.desktop-half img {
width: 40vw;
}
.desktop-half {
margin: 0 auto;
display: flex;
justify-content: center;
}
.desktop-top {
top: -22vh;
position: relative;
}
input,
textarea {
font-size: 20px !important;
}
.contact-content {
position: relative;
top: -50vh;
}
.fixed-header .clavo-logo {
justify-content: center;
}
.lottie-container * {
font-size: 4vw;
}
span.animated-badge {
font-size: 1vw;
}
span.animated-badge.first {
left: 2vw;
}
span.animated-badge.year {
top: 3vw;
}
}