/*Start - css/cortina.css*/
.cortina-botao-box {
width: 100%;
background-color: var(--teste00);
display:flex;
justify-content: center;
}
.cortina-botao {
cursor: pointer;
transition: transform 0.2s ease;
background-color: var(--karazan-amber);
border-radius: 2vw;
height: 12vw;
width: 43vw;
position: relative;
float: left;
}
.cortina-botao img {
width: 100%;
height: 100%;
display: block;
}
.cortina-botao-texto {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: var(--euphorigenic), sans-serif;
font-size: 6.4vw;
color: var(--karazan-cream, #fff);
background-color: transparent;
white-space: nowrap;
cursor: pointer;
pointer-events: none;
}
.cortina-drink,
.cortina-pizza01,
.cortina-pizza02,
.cortina-titulo,
.cortina-texto {
opacity: 0;
/* animações mais rápidas e com easing mais direto para uma sensação menos lenta */
/* muito mais rápida: curta e responsiva */
transition: opacity 0.35s cubic-bezier(.2, 0, .2, 1), transform 0.4s cubic-bezier(.2, 0, .2, 1);
}
.cortina-animar .cortina-drink {
opacity: 1;
transform: translateX(0);
transition-delay: 0s;
}
.cortina-drink {
transform: translateX(-60vw);
}
.cortina-animar .cortina-pizza01 {
opacity: 1;
transform: translateY(0);
transition-delay: 0.02s;
}
.cortina-pizza01 {
transform: translateX(60vw);
}
.cortina-animar .cortina-pizza02 {
opacity: 1;
transform: translateX(0);
transition-delay: 0.04s;
}
.cortina-pizza02 {
transform: translateX(-60vw);
}
.cortina-titulo,
.cortina-texto {
opacity: 1;
transition: none;
transform: none;
}
.cortina-animar .cortina-titulo {
opacity: 1;
transition-delay: 0.06s;
}
.cortina-animar .cortina-texto {
opacity: 1;
transition-delay: 0.08s;
}
.cortina {
width: 100%;
position: relative;
float: left;
height:200vw;
background: var(--transp);
overflow: hidden;
background-image: url(img/cortina.webp);
background-size: auto 103%;
background-position: center -4vw;
background-repeat: no-repeat;
background-color: var(--teste00);
z-index: 2;
}
.cortina-drink {
position: absolute;
top: 22vw;
left: 0;
width: 40vw;
height: 36vw;
z-index: 1;
background-image: url(img/drink.webp);
background-size: contain;
background-repeat: no-repeat;
background-position: right top;
}
.cortina-titulo {
font-family: var(--euphorigenic);
font-size: 9vw;
color: var(--fontColor);
text-align: left;
line-height: 10vw;
font-weight: normal;
letter-spacing: 0.05em;
}
.cortina-titulo-linha01 {
font-family: var(--euphorigenic);
font-size: 11vw;
color: var(--fontColor);
text-align: left;
line-height: 11vw;
font-weight: normal;
letter-spacing: 0.05em;
float: left;
height: auto;
padding-left: 31vw;
}
.cortina-titulo-linha02 {
font-family: var(--euphorigenic);
font-size: 10vw;
color: var(--fontColor);
text-align: left;
line-height: 14vw;
font-weight: normal;
letter-spacing: 0.05em;
float: left;
height: auto;
padding-left: 18vw;
margin-bottom: 3vw;
}
.cortina-texto {
width: 100%;
float: left;
margin-bottom: 1vw;
}
.cortina-texto p {
font-family: var(--linbiolinum);
font-size: var(--fontSizeTexto);
color: var(--fontColor);
text-align: center;
line-height: 5.2vw;
margin-top: 0.5vw;
margin-bottom: 4vw;
}
.cortina-pizza01 {
position: absolute;
top: 122vw;
right: 0vw;
width: 74vw;
height: 34vw;
z-index: 1;
background-image: url(img/pizza01.webp);
background-size: contain;
background-repeat: no-repeat;
background-position: left top;
}
.cortina-pizza02 {
position: absolute;
bottom: 20vw;
left: 0vw;
width: 56vw;
height: 34vw;
z-index: 3;
background-image: url(img/pizza02.webp);
background-size: contain;
background-repeat: no-repeat;
background-position: left top;
}
.cortina-esquerda {
position: absolute;
top: 9vw;
left: -8vw;
width: 30vw;
height: 174vw;
z-index: 2;
background-image: url(img/cortina-pedaco-esquerdo.webp);
background-size: contain;
background-repeat: no-repeat;
background-position: left top;
}
.cortina-direita {
position: absolute;
top: 10vw;
right: -7vw;
width: 30vw;
height: 173vw;
z-index: 2;
background-image: url(img/cortina-pedaco-direito.webp);
background-size: contain;
background-repeat: no-repeat;
background-position: right top;
}
.cortina-conteudo {
position: absolute;
top: 56vw;
left: 50%;
transform: translateX(-50%);
width: 80vw;
z-index: 4;
text-align: center;
height: auto;
}
.cortina-titulo-a {
font-family: var(--euphorigenic);
font-size: 5vw;
color: var(--fontColor);
margin-bottom: 0.5vw;
text-align: center;
font-weight: bold;
}
.cortina-titulo-principal {
font-family: var(--euphorigenic);
font-size: 9vw;
color: var(--fontColor);
text-align: center;
line-height: 10vw;
font-weight: normal;
letter-spacing: 0.05em;
margin-bottom: 1vw;
float: left;
width: 100%;
}
.cortina-subtitulo {
font-family: var(--linbiolinum);
font-size: var(--fontSizeTexto);
color: var(--fontColor);
text-align: center;
margin-bottom: 2vw;
font-style: italic;
float: left;
width: 100%;
height: auto;
line-height: var(--lineHeightTexto);
}
.cortina-btn {
position: absolute;
left: 50%;
top: 100vw;
transform: translateX(-50%);
width: 28vw;
height: 7vw;
background-color: var(--karazan-ember);
border-radius: 2vw;
color: var(--karazan-cream, #fff);
font-family: var(--euphorigenic), sans-serif;
font-size: 2.6vw;
text-align: center;
line-height: 7vw;
text-decoration: none;
z-index: 10;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
cursor: pointer;
transition: background 0.2s, color 0.2s;
}
.cortina-btn:hover {
background: #d4b06a;
color: #222;
}
.cortina-gatilho {
position: absolute;
top: 118vw;
width: 1vw;
height: 1vw;
background-color: var(--teste00);
}
/*End - css/cortina.css*/