* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-font-smoothing: antialised;
-moz-osx-smoothing: grayscale;
}
:root {
font-family: "Inter", sans-serif;
font-size: 62.5%;
--color-text: #2b2b2b;
--content-blue: rgba(44, 169, 167, 0.8);
--light-blue: #2ca9a7;
--white: #f8f8f8;
--transparent-white: rgba(248, 248, 248, 0.8);
}
.flex {
display: flex;
}
.grid {
display: grid;
}
html {
scroll-behavior: smooth;
}
body {
font-size: 1.6rem;
color: var(--color-text);
background: url(https://pousadaalvorada.com/wp-content/themes/alvorada/assets/bg.png) top center no-repeat;
background-size: contain;
width: 100vw;
overflow-x: hidden;
}
main {
display: flex;
flex-direction: column;
gap: 48px;
margin: 0 auto;
width: 100%;
}
p {
margin-top: 0;
margin-bottom: 1rem;
}
.container {
max-width: 128rem;
width: 100%;
margin: 0 auto;
padding: 2rem;
}
.header {
height: 12rem;
margin-bottom: 2rem;
display: flex;
align-items: center;
justify-content: center;
position: fixed;
top: 0;
left: 0;
z-index: 100;
width: 100%;
}
.header .container {
justify-content: center;
}
.header nav {
justify-content: space-between;
align-items: center;
}
.header nav ul {
display: flex;
gap: 2.8rem;
}
.header nav ul li {
display: inline;
}
.header nav ul li a {
font-size: 2rem;
color: var(--white);
font-weight: 700;
font-family: "Phudu", sans-serif;
text-decoration: none;
text-transform: uppercase;
transition: all ease-in 0.2s;
}
.header nav ul .menu-servicos:hover ul.sub-menu {
display: flex;
}
.header nav ul.sub-menu {
max-width: 20rem;
background-color: #e8e7e7;
border: 0.1rem solid #b1b0b0;
border-radius: 0.8rem;
flex-direction: column;
position: absolute;
gap: 0;
display: none;
}
.header nav .sub-menu li {
padding: 1rem 2rem;
transition: 0.2s;
}
.header nav .sub-menu a {
font-size: 1.4rem;
text-transform: none;
}
.header nav .sub-menu li:hover {
background-color: #cacaca;
}
nav .logo {
width: 15rem;
}
.banner {
width: 100%;
margin-top: 12rem;
position: relative;
margin-bottom: -5rem;
}
.banner img {
max-width: 100%;
}
.page-content {
margin: 20rem 2rem 2rem 2rem;
position: relative;
max-width: 128rem;
width: 100%;
padding: 4rem;
align-self: center;
border-radius: 12px;
background: rgb(255 255 255/ 0.8);
}
.page-content h2 {
margin-bottom: 1rem;
}
.apresentacao {
height: 440px;
overflow: hidden;
align-items: center;
}
.apresentacao .container {
display: flex;
}
.apresentacao .content {
max-width: calc(100% - 420px);
display: flex;
flex-direction: column;
gap: 28px;
padding: 20px;
border-radius: 12px;
}
.apresentacao .fotos {
flex: 1;
display: flex;
flex-wrap: wrap;
gap: 32px;
}
.apresentacao .fotos img {
max-width: 190px;
border-radius: 32px;
transform: rotate(3deg);
transition: all 0.2s;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4);
}
.apresentacao .fotos img:last-child,
.apresentacao .fotos img:first-child {
transform: rotate(-3deg);
}
.apresentacao .fotos img:hover {
transform: rotate(0) scale(1.6);
border-radius: 0;
}
.dayuse {
background-color: rebeccapurple;
background-image: url(https://pousadaalvorada.com/wp-content/themes/alvorada/assets/agua-piscina.jpg);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
padding: 20px;
color: aliceblue;
display: flex;
justify-content: space-between;
align-items: center;
height: 400px;
overflow: hidden;
margin-bottom: 48px;
}
.dayuse .container {
position: relative;
}
.moca {
position: absolute;
top: -20px;
right: -20px;
width: 400px;
animation: float 4s ease-in-out infinite;
}
.moca img {
width: 40rem;
}
@keyframes float {
0%,
100% {
transform: translatey(0);
}
50% {
transform: translatey(-1rem);
}
}
.hospedagem {
background-color: rebeccapurple;
background-image: url(https://pousadaalvorada.com/wp-content/themes/alvorada/assets/paisagem.jpg);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
padding: 20px;
color: aliceblue;
display: flex;
justify-content: space-between;
align-items: center;
height: 400px;
overflow: hidden;
}
.hospedagem .container {
position: relative;
}
.dayuse .content,
.hospedagem .content {
max-width: calc(100% - 420px);
display: grid;
gap: 28px;
padding: 20px;
border-radius: 12px;
background-color: var(--content-blue);
}
.hospedagem .galeria {
position: absolute;
top: 0;
right: 20px;
display: flex;
flex-direction: column;
gap: 24px;
padding: 20px 0;
animation: galery 26s forwards infinite;
}
.hospedagem .galeria,
.hospedagem img {
width: 300px;
}
.hospedagem img {
border-radius: 32px;
transform: rotate(1deg);
transition: all 0.2s;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4);
}
.hospedagem img:hover {
transform: rotate(5deg);
}
@keyframes galery {
0%,
100% {
top: -950px;
}
50% {
top: 0;
}
}
.btn {
display: flex;
width: 150px;
height: 32px;
place-self: center;
justify-content: center;
align-items: center;
gap: 8px;
background-color: brown;
border: 0;
border-radius: 8px;
color: white;
font-weight: 600;
text-decoration: none;
transition: all 0.2s;
cursor: pointer;
}
.btn:hover {
background-color: crimson;
}
.btns {
padding: 48px 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
a.btn-reserva {
display: flex;
align-items: center;
gap: 8px;
height: 48px;
padding: 0 12px;
width: fit-content;
border-radius: 8px;
color: white;
text-decoration: none;
}
a.btn-reserva.hosp {
background-color: crimson;
}
a.btn-reserva.hosp:hover {
background-color: rgb(245, 11, 57);
}
a.btn-reserva.dayu {
background-color: green;
}
a.btn-reserva.dayu:hover {
background-color: rgb(1, 155, 1);
}
h1,
h2 {
font-weight: 700;
font-family: "Phudu", sans-serif;
}
h1 {
font-size: 56px;
}
h2 {
font-size: 48px;
}
.livre {
height: 40vh;
} .depoimentos {
background-image: url(https://pousadaalvorada.com/wp-content/themes/alvorada/assets/depoimentos.jpg);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
padding: 20px;
display: flex;
justify-content: space-between;
align-items: center;
height: 500px;
overflow: hidden;
}
.depoimentos h2 {
color: var(--white);
}
.depoimentos > .container {
display: flex;
gap: 28px;
flex-direction: column;
}
.depoimentos .slide {
display: flex;
gap: 3.2rem;
flex-wrap: nowrap;
}
.depoimentos .depoimento {
border: 1px solid var(--color-text);
background-color: var(--white);
width: 32rem;
border-radius: 1.2rem;
overflow: hidden;
font-size: 1.4rem;
opacity: 0.6;
transition: all 0.2s;
}
.depoimentos .depoimento:hover {
opacity: 1;
}
.depoimentos .depoimento img {
width: 100%;
}
.depoimentos .depoimento .depo-main {
border-bottom: 1px solid #b1b0b0;
padding-bottom: 2rem;
}
.depoimentos .depoimento .depo-footer {
display: flex;
align-items: center;
justify-content: space-around;
}
.depoimentos .depoimento .depo-footer .stars {
color: darkgoldenrod;
}
.depoimentos .depoimento .depo-main,
.depoimentos .depoimento .depo-footer {
margin: 2rem;
text-align: center;
}
.depoimentos .slick-track {
gap: 3.2rem;
display: flex;
}
.depoimentos .slick-current {
opacity: 1;
}
.slick-arrow {
content: "";
}
.slick-arrow::after {
content: ">";
} .header nav {
display: flex;
align-items: center;
justify-content: space-between; }
.header nav ul {
align-items: center;
gap: 4.8rem;
}
.header nav ul li {
text-align: center;
}
.header nav ul li a {
transition: color 0.2s;
position: relative;
}
.header nav ul li a:hover,
.header nav ul li a.active {
color: #000;
}
.header nav ul li a::after {
content: "";
width: 0%;
height: 2px;
background: #000;
position: absolute;
left: 0;
bottom: -1.5rem;
transition: width 0.2s;
}
.header nav ul li a:hover::after,
.header nav ul li a.active::after {
width: 100%;
}
.header nav ul li.logotipo a:hover::after,
.header nav ul li.logotiopo a.active::after {
width: 0%;
}
.header nav .menu {
opacity: 1;
visibility: hidden;
top: -20rem;
transition: 0.2s;
}
.header nav .menu .logo {
opacity: 1 !important;
visibility: visible !important;
} .header nav.show .menu {
opacity: 1;
visibility: visible;
height: 100vh;
width: 100vw;
position: fixed;
top: 0;
left: 0;
display: grid;
place-content: center;
}
.header nav.show .menu ul {
display: grid;
}
.header nav.show ul.grid {
gap: 4rem;
} .toggle {
color: var(--white);
font-size: 4rem;
cursor: pointer;
position: absolute;
top: 1.5rem;
right: 1.5rem;
transition: 0.2s;
}
nav .icon-close {
visibility: hidden;
opacity: 0;
color: #fff;
position: absolute;
top: -1.5rem;
right: 1.5rem;
transition: 0.2s;
}
nav.show div.icon-close {
visibility: visible;
opacity: 1;
top: 1.5rem;
}
nav.show div.icon-menu {
visibility: hidden;
opacity: 0;
}
.footer {
background: var(--content-blue);
color: var(--white);
padding: 2rem 0;
}
.footer .container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 2rem;
}
.footer .container a {
color: var(--white);
text-decoration: none;
transition: all 0.3s;
}
.footer .container a:hover {
color: #a92929;
text-decoration: none;
}
.footer .container ion-icon {
font-size: 2.2rem;
}
.footer .logo {
width: 20rem;
margin-bottom: 2rem;
}
.footer .contato {
font-size: 1.3rem;
display: flex;
flex-direction: column;
}
.footer .menu ul {
list-style: none;
margin-top: 2rem;
}
.footer .telefone {
font-size: 1.6rem;
color: var(--white);
text-decoration: none;
display: inline-block;
margin-top: 1rem;
}
.footer .links {
margin-top: 2rem;
display: flex;
flex-direction: column;
justify-content: center;
gap: 1rem;
align-self: center;
}
@media (min-width: 800px) {
.header,
.title-page {
height: 18rem;
transition: all 0.4s;
}
.scroll {
height: 12rem;
background: var(--light-blue);
border-bottom: 1px solid #e4e4e4;
} .header nav .menu {
opacity: 1;
visibility: visible;
top: 0;
}
.header nav .menu > ul {
display: flex;
gap: 2rem;
}
.header nav .menu ul li a.title {
font: 400 1rem var(--body-font);
-webkit-font-smoothing: antialiased;
}
.header nav .menu ul li a.title.active {
font-weight: bold;
-webkit-font-smoothing: auto;
}
.header nav .icon-menu {
display: none;
}
.header nav .logo {
width: 20rem;
}
.header nav .logo-menor {
width: 10rem;
}
.title-page,
.banner {
margin-top: 18rem;
}
} .back-to-top {
background: var(--base-color);
color: var(--text-color-light);
position: fixed;
right: 1rem;
bottom: 1rem;
padding: 0.5rem;
clip-path: circle();
font-size: 1.5rem;
line-height: 0;
visibility: hidden;
opacity: 0;
transition: 0.3s;
transform: translateY(100%);
}
@media (max-width: 900px) {
body {
background-size: 100rem;
}
h2 {
font-size: 3.6rem;
}
.apresentacao {
height: fit-content;
overflow: visible;
margin-top: -3.6rem;
}
.apresentacao .container {
flex-direction: column;
}
.apresentacao .content {
max-width: 100%;
margin-bottom: 1.6rem;
}
.apresentacao .fotos {
gap: 2%;
justify-content: center;
}
.dayuse .moca {
right: -150px;
}
.dayuse .content,
.hospedagem .content {
max-width: calc(100% - 300px);
}
.hospedagem .galeria,
.hospedagem .galeria img {
width: 26rem;
}
.hospedagem .galeria {
right: 1.2rem;
}
.footer .container {
display: grid;
grid-template-columns: 1fr;
text-align: center;
gap: 4rem;
}
.footer .logo {
margin: 0 auto 1rem auto;
}
}
@media (max-width: 670px) {
:root {
font-size: 50%;
}
}
@media (max-width: 580px) {
.dayuse .moca {
right: -200px;
top: 20px;
}
.dayuse .content,
.hospedagem .content {
max-width: calc(100% - 30rem);
}
.hospedagem .galeria,
.hospedagem .galeria img {
width: 26rem;
}
.hospedagem .galeria {
right: 1.2rem;
}
}
@media (max-width: 580px) {
.dayuse .moca {
right: -5rem;
width: 30rem;
}
.dayuse .moca img {
width: 30rem;
}
.dayuse .content,
.hospedagem .content {
max-width: calc(100% - 20rem);
}
.hospedagem .galeria,
.hospedagem .galeria img {
width: 20rem;
}
}
@media (max-width: 435px) {
.apresentacao .fotos img {
width: 150px;
border-radius: 2rem;
}
.dayuse .moca {
right: -15rem;
width: 30rem;
}
.dayuse .moca img {
width: 30rem;
}
.dayuse .content {
max-width: calc(100% - 10rem);
}
.hospedagem {
height: fit-content;
}
.hospedagem .container {
padding-bottom: 20rem;
}
.hospedagem .content {
max-width: 100%;
}
.hospedagem .galeria {
width: 100%;
flex-direction: row;
top: auto;
animation: galerySmall 26s forwards infinite;
}
}
@keyframes galerySmall {
0%,
100% {
left: -950px;
}
50% {
left: 0;
}
}
@media (max-width: 350px) {
.hospedagem .galeria,
.dayuse .moca {
display: none;
}
.hospedagem .content,
.dayuse .content {
max-width: 100%;
}
}
@media (max-width: 800px) {
.header,
.header nav.show .menu {
background-color: var(--light-blue);
}
.header nav ul li a {
color: #fff;
}
.header nav ul li a:hover,
.header nav ul li a.active {
color: var(--white);
}
.header nav .sub-menu a {
color: #000;
}
.header nav .sub-menu a:hover {
color: #000;
} .header nav ul.sub-menu {
position: inherit;
}
.header nav ul li.menu-servicos > a:hover::after {
width: 0;
}
}
.texto .contato {
display: flex;
gap: 3rem;
margin-bottom: 3rem;
}
.texto .contato .form {
width: 65%;
}
.texto .contato .form input:not(.btn),
.texto .contato .form textarea {
padding: 6px 12px;
width: 90%;
border-radius: 12px;
background: var(--white);
border: 1px solid var(--color-text);
}
.texto .contato .telefones {
width: 35%;
}
.texto .contato .telefones a {
color: black;
text-decoration: none;
}
.texto ul {
margin-bottom: 3rem;
}
.texto ul li {
margin-left: 2rem;
}
.texto h3 {
margin-top: 3rem;
margin-bottom: 2rem;
}
.video-container {
position: relative;
width: 100%;
padding-bottom: 56.25%;
margin-top: 3rem;
}
.video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
filter: url(#ambilight);
}
.btn-fotos {
display: flex;
justify-content: center;
gap: 2rem;
margin-bottom: 3rem;
}
.btn-fotos a {
background-color: brown;
border-radius: 8px;
color: white;
font-weight: 600;
text-decoration: none;
transition: all 0.2s;
padding: 6px 12px;
}
.btn-fotos a:hover {
background-color: crimson;
}