2022-10-08 22:09:09 +00:00
|
|
|
/*=== Por que criei esse arquivo ===*/
|
|
|
|
/* Este é meu arquivo principal, a metodologia que vou usar será CUBE CSS <3*/
|
|
|
|
|
2022-10-09 07:08:48 +00:00
|
|
|
/* started styles */
|
|
|
|
|
|
|
|
/*--------*\
|
|
|
|
= HEADER =
|
|
|
|
\*--------*/
|
|
|
|
.l-header {
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: center;
|
|
|
|
width: 100%;
|
|
|
|
padding: 1.875rem 1rem;
|
|
|
|
}
|
|
|
|
|
|
|
|
.header-logo {
|
|
|
|
display: flex;
|
|
|
|
}
|
|
|
|
|
2022-10-09 07:57:33 +00:00
|
|
|
/*-------------*\
|
|
|
|
= MAIN BANNER =
|
|
|
|
\*-------------*/
|
|
|
|
.main-banner-image {
|
|
|
|
width: 100%;
|
|
|
|
height: auto;
|
|
|
|
}
|
|
|
|
|
2022-10-09 10:29:56 +00:00
|
|
|
/*-------------*\
|
|
|
|
= INFORMATION =
|
|
|
|
\*-------------*/
|
|
|
|
.information {
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: center;
|
|
|
|
flex-direction: column;
|
|
|
|
gap: 64px;
|
|
|
|
padding: 74px 1.875rem 90px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.information-texts {
|
|
|
|
text-align: center;
|
|
|
|
}
|
|
|
|
|
|
|
|
.information-subtitle {
|
|
|
|
font-weight: 400;
|
|
|
|
line-height: 24px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.information-title {
|
|
|
|
font-weight: 500;
|
|
|
|
line-height: 48px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.information-description {
|
|
|
|
line-height: 24px;
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
@media screen and (min-width:1025px) {
|
|
|
|
.information {
|
|
|
|
padding: 74px 0 157px;
|
|
|
|
gap: 74px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.information-texts {
|
|
|
|
width: 40%;
|
|
|
|
margin: 0 auto;
|
|
|
|
text-align: initial;
|
|
|
|
}
|
|
|
|
|
|
|
|
.information-title,
|
|
|
|
.information-subtitle {
|
|
|
|
text-align: center;
|
|
|
|
}
|
|
|
|
|
|
|
|
.information-title {
|
|
|
|
font-size: 200%;
|
|
|
|
margin-bottom: 28px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.information-subtitle {
|
|
|
|
line-height: 32px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.information-image {
|
|
|
|
width: 16%;
|
|
|
|
height: auto;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-10-09 12:23:07 +00:00
|
|
|
/*----------*\
|
|
|
|
= SERVICES =
|
|
|
|
\*----------*/
|
|
|
|
.services {
|
|
|
|
padding-bottom: 90px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.services-container {
|
|
|
|
--hs-flex-space: 20px;
|
|
|
|
--hs-flow-space: 28px;
|
|
|
|
|
|
|
|
padding: 0 26px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.services-container,
|
|
|
|
.card {
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: center;
|
|
|
|
}
|
|
|
|
|
|
|
|
.card {
|
|
|
|
width: 100%;
|
|
|
|
flex-direction: column;
|
|
|
|
min-height: 288px;
|
|
|
|
padding: 36px 26px 28px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.card-image {
|
|
|
|
width: 29%;
|
|
|
|
height: auto;
|
|
|
|
}
|
|
|
|
|
|
|
|
@media screen and (max-width: 1024px) {
|
|
|
|
.services-container {
|
|
|
|
flex-direction: column;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@media screen and (min-width:1025px) {
|
|
|
|
.services {
|
2022-10-09 18:38:51 +00:00
|
|
|
width: 57%;
|
2022-10-09 12:23:07 +00:00
|
|
|
margin: 0 auto;
|
|
|
|
}
|
|
|
|
|
2022-10-09 18:38:51 +00:00
|
|
|
.services-container {
|
|
|
|
padding: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
.services .card {
|
|
|
|
min-width: 350px;
|
2022-10-09 12:23:07 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-10-09 14:21:22 +00:00
|
|
|
/*---------*\
|
|
|
|
= GALLERY =
|
|
|
|
\*---------*/
|
|
|
|
.gallery {
|
|
|
|
--hs-grid-space: 24px 14px;
|
|
|
|
|
|
|
|
padding: 0 24px;
|
|
|
|
margin-bottom: 112px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.gallery-container {
|
|
|
|
position: relative;
|
|
|
|
grid-template-columns: repeat(2, 1fr);
|
|
|
|
justify-content: center;
|
|
|
|
transform: translateY(2rem);
|
|
|
|
}
|
|
|
|
|
|
|
|
.gallery-image-1 {
|
|
|
|
width: 100%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.gallery-image-2 {
|
|
|
|
width: 100%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.gallery-image-3 {
|
|
|
|
width: 100%;
|
|
|
|
grid-column: 1/2 span;
|
|
|
|
}
|
|
|
|
|
|
|
|
@media screen and (min-width:1025px) {
|
|
|
|
.gallery-container {
|
|
|
|
width: 88%;
|
|
|
|
margin: 0 auto;
|
|
|
|
grid-template-columns: repeat(3, 1fr);
|
|
|
|
transform: translateY(4rem);
|
|
|
|
}
|
|
|
|
|
|
|
|
.gallery-image-3 {
|
|
|
|
grid-column: auto;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-10-09 18:38:51 +00:00
|
|
|
/*----------*\
|
|
|
|
= FEATURES =
|
|
|
|
\*----------*/
|
|
|
|
.features {
|
|
|
|
padding: 0px 24px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.features-container {
|
|
|
|
--hs-flex-space: 1rem;
|
|
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
width: 100%;
|
|
|
|
padding-bottom: 98px;
|
|
|
|
margin: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
.features .card {
|
|
|
|
width: 100%;
|
|
|
|
min-height: 332px;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
@media screen and (min-width:1025px) {
|
|
|
|
.features-container {
|
|
|
|
flex-direction: row;
|
|
|
|
width: 92%;
|
|
|
|
padding-bottom: 108px;
|
|
|
|
margin: 0 auto;
|
|
|
|
}
|
|
|
|
|
|
|
|
.features .card {
|
|
|
|
width: 22.5%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.card-image {
|
|
|
|
width: 29%;
|
|
|
|
height: auto;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-10-09 20:09:30 +00:00
|
|
|
/*------*\
|
|
|
|
= BLOG =
|
|
|
|
\*------*/
|
|
|
|
.blog {
|
|
|
|
width: 100%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.blog-images-image {
|
|
|
|
width: 100%;
|
|
|
|
margin-bottom: 50px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.blog-article {
|
|
|
|
padding: 0 24px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.blog-title {
|
|
|
|
font-weight: 500;
|
|
|
|
font-size: 24px;
|
|
|
|
}
|
|
|
|
|
|
|
|
@media screen and (min-width: 1025px) {
|
|
|
|
.blog {
|
|
|
|
padding-bottom: 116px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.blog-title {
|
|
|
|
font-size: 32px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.blog-images-image {
|
|
|
|
margin: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
.blog .flex-box[data-type="reversed"] {
|
|
|
|
flex-direction: column;
|
|
|
|
}
|
|
|
|
|
|
|
|
.blog-article {
|
|
|
|
width: 28%;
|
|
|
|
margin: 0 auto;
|
|
|
|
margin-bottom: 50px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.blog-description {
|
|
|
|
line-height: 24px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.blog-images {
|
|
|
|
width: 71%;
|
|
|
|
height: auto;
|
|
|
|
margin: 0 auto;
|
|
|
|
}
|
|
|
|
}
|
2022-10-09 18:38:51 +00:00
|
|
|
|
2022-10-10 15:04:44 +00:00
|
|
|
|
|
|
|
/*--------*\
|
|
|
|
= FOOTER =
|
|
|
|
\*--------*/
|
|
|
|
.footer {
|
|
|
|
flex-direction: column;
|
|
|
|
padding: 38px 0;
|
|
|
|
}
|
|
|
|
|
2022-10-09 07:08:48 +00:00
|
|
|
/*CUBE CSS styles*/
|
|
|
|
|
2022-10-09 12:23:07 +00:00
|
|
|
/*-------------*\
|
|
|
|
= COMPOSITION =
|
|
|
|
\*-------------*/
|
|
|
|
.flow *+* {
|
|
|
|
margin-top: var(--hs-flow-space);
|
|
|
|
}
|
|
|
|
|
2022-10-09 14:21:22 +00:00
|
|
|
.grid-box {
|
|
|
|
display: grid;
|
|
|
|
gap: var(--hs-grid-space);
|
|
|
|
}
|
|
|
|
|
2022-10-09 12:23:07 +00:00
|
|
|
.flex-box {
|
|
|
|
display: flex;
|
|
|
|
gap: var(--hs-flex-space);
|
|
|
|
}
|
|
|
|
|
2022-10-09 20:09:30 +00:00
|
|
|
.flex-box[data-type="reversed"] {
|
|
|
|
flex-direction: column-reverse;
|
|
|
|
}
|
|
|
|
|
2022-10-09 07:08:48 +00:00
|
|
|
/*-------*\
|
|
|
|
= UTILS =
|
|
|
|
\*-------*/
|
2022-10-09 12:23:07 +00:00
|
|
|
.center {
|
|
|
|
align-items: center;
|
|
|
|
justify-content: center;
|
|
|
|
}
|
|
|
|
|
2022-10-09 10:29:56 +00:00
|
|
|
.text-upper {
|
|
|
|
text-transform: uppercase;
|
|
|
|
}
|
|
|
|
|
2022-10-09 12:23:07 +00:00
|
|
|
.text-center {
|
|
|
|
text-align: center;
|
|
|
|
}
|
|
|
|
|
|
|
|
.box-shadow {
|
|
|
|
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
|
|
|
|
}
|
|
|
|
|
2022-10-10 15:04:44 +00:00
|
|
|
.clr-gray-100 {
|
|
|
|
color: var(--clr-gray-100);
|
|
|
|
}
|
|
|
|
|
|
|
|
|
2022-10-09 07:08:48 +00:00
|
|
|
.bg-clr-black {
|
|
|
|
background-color: var(--bg-clr-black);
|
2022-10-09 07:57:33 +00:00
|
|
|
}
|
|
|
|
|
2022-10-09 14:21:22 +00:00
|
|
|
.bg-clr-gray {
|
|
|
|
background-color: var(--bg-clr-gray);
|
|
|
|
}
|
|
|
|
|
2022-10-09 07:57:33 +00:00
|
|
|
@media only screen and (max-width: 1024px) {
|
|
|
|
.image-mobile {
|
|
|
|
display: flex;
|
|
|
|
}
|
|
|
|
|
|
|
|
.image-desktop {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@media only screen and (min-width: 1025px) {
|
|
|
|
.image-mobile {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
.image-desktop {
|
|
|
|
display: flex;
|
|
|
|
}
|
2022-10-09 07:08:48 +00:00
|
|
|
}
|