* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 10px;
scroll-behavior: smooth;
overflow-x: hidden;
cursor: url('data:image/svg+xml,'), auto;
}
body {
background: #040405;
font-family: "Plus Jakarta Sans", sans-serif;
overflow-x: hidden;
}
a, button, input[type=radio], input[type=checkbox] {
cursor: url('data:image/svg+xml,'), auto;
}
input[type=text], p, h1, h2, h3, h4, h5, h6 {
cursor: url('data:image/svg+xml,'), auto;
}
p, ul, li, input, label {
font-family: "Plus Jakarta Sans", sans-serif;
}
h1 {
font-size: 5em;
margin-bottom: 2.4rem;
line-height: 1.4;
max-width: 50%;
}
h1:after {
content: "";
display: block;
width: 100px;
height: 8px;
margin-top: 20px;
background: #0762C8;
}
h2 {
font-size: 4rem;
margin-bottom: 4rem;
line-height: 1.5;
}
h3 {
font-size: 2.4rem;
margin-bottom: 1.8rem;
line-height: 1.5;
font-weight: 600;
}
p {
font-size: 2rem;
max-width: 60rem;
line-height: 1.5;
margin-bottom: 2rem;
}
p:last-of-type {
margin-bottom: 0;
}
img {
max-width: 100%;
display: block;
}
.fadeInLeft {
animation-fill-mode: forwards;
}
.container {
max-width: 1470px;
margin: 0 auto;
padding: 0 3rem;
display: flex;
width: 100%;
}
.container.main {
position: relative;
flex-direction: column;
}
header {
background: #040405;
padding: 3rem 0;
position: sticky;
z-index: 1;
top: 0;
}
header img {
max-width: 13rem;
}
header .container {
display: flex;
justify-content: space-between;
align-items: center;
}
header ul {
list-style: none;
padding: 0;
}
header ul li {
display: inline-block;
font-size: 2rem;
margin-left: 3rem;
vertical-align: middle;
}
header ul li a {
color: white;
text-decoration: none;
}
header ul li a i {
color: #0762C8;
}
header ul .social {
display: inline-block;
}
main {
padding: 10rem 0;
display: flex;
color: #fff;
justify-content: center;
align-items: center;
}
main h1 {
font-weight: 600;
}
blockquote {
padding: 4rem;
background: #0762C8;
margin-bottom: 5rem;
border-bottom-right-radius: 15rem;
}
blockquote p {
font-family: "Plus Jakarta Sans", sans-serif;
font-size: 2.5rem;
font-weight: 500;
color: white;
}
blockquote p .q1, blockquote p .q2 {
color: white;
font-family: "Plus Jakarta Sans", sans-serif;
}
blockquote cite {
color: white;
font-size: 1.6rem;
margin-top: 2rem;
display: block;
}
section {
padding: 10rem 0;
}
#about {
background: white;
}
#about p a {
color: #0762c8;
font-weight: 600;
}
#about .intro {
flex: 0 0 50%;
padding-right: 8rem;
}
#about .intro img[alt="Foto Douglas Oliveira"] {
border-top-right-radius: 15rem;
}
#about .text {
flex: 0 0 40%;
}
#about .text div {
position: sticky;
top: 0;
}
#about .text img {
/*animation: rotate 2s ease 2s forwards infinite;*/
margin-bottom: 3rem;
max-width: 40px;
}
#about blockquote img {
border-radius: 50%;
max-width: 75px;
margin-bottom: 2rem;
border: 5px solid #C19636;
}
#services {
background: #0762C8;
color: white;
}
#services .container {
flex-direction: column;
}
#services .container p {
margin-bottom: 3rem;
}
#services .container .services-list {
display: flex;
justify-content: space-between;
list-style: none;
gap: 2rem;
}
#services .service {
border: 4px solid white;
padding: 3rem;
flex: 1 0 0;
}
#services .service img {
max-height: 5rem;
margin-bottom: 2rem;
}
#services .service p {
font-size: 1.8rem;
line-height: 1.5;
}
#projects {
background: white;
}
#projects .container {
flex-direction: column;
}
#projects .container .projects-list {
display: flex;
flex-wrap: wrap;
list-style: none;
gap: 5rem 2%;
}
#projects .container .projects-list .project {
flex: 0 0 32%;
}
#projects .container .projects-list .project a {
transition: all 0.2s ease;
}
#projects .container .projects-list .project a:hover, #projects .container .projects-list .project a:focus {
opacity: 0.75;
transition: all 0.2s ease;
}
#projects .container .projects-list .project h3 {
margin-top: 1.5rem;
margin-bottom: 0.25rem;
font-family: "Plus Jakarta Sans", sans-serif;
color: #202020;
}
#projects .container .projects-list .project small {
color: #666;
font-size: 1.5rem;
}
#contact {
padding-top: 6rem;
display: flex;
justify-content: center;
align-items: center;
color: white;
}
#contact a {
color: white;
text-decoration: none;
font-size: 3rem;
margin-bottom: 2rem;
word-break: break-word;
font-family: "Plus Jakarta Sans", sans-serif;
}
#contact a.btn-secondary {
font-size: 1.8rem;
color: #0762C8;
margin-bottom: 4rem;
margin-top: 0;
display: flex;
align-items: center;
width: fit-content;
}
#contact a.btn-secondary img {
margin-right: 2rem;
max-width: 3.25rem;
}
#contact a i {
color: #0762C8;
margin-right: 1.5rem;
}
#contact p {
margin-bottom: 3rem;
font-family: "Plus Jakarta Sans", sans-serif;
font-size: 3rem;
}
#contact p strong {
font-weight: 500;
}
#contact .container {
flex-direction: column;
text-align: left;
}
#contact ul {
list-style: none;
padding-top: 3rem;
border-top: 3px solid white;
}
#contact ul li {
display: inline-block;
font-size: 2rem;
margin-left: 3rem;
margin-bottom: 2rem;
}
#contact ul li:first-child {
margin-left: 0;
}
#line {
background: #e4e4e4;
padding: 2rem 0;
overflow: hidden;
white-space: nowrap;
}
#line span {
animation: marquee 15s linear infinite;
color: #b5b5b5;
display: inline-block;
font-family: "Plus Jakarta Sans", sans-serif;
font-weight: 500;
padding-left: 100%;
font-size: 3rem;
max-width: initial;
}
.btn-whatsapp {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 1;
width: 60px;
height: 60px;
display: block;
height: block;
}
.btn-whatsapp img {
max-width: 60px;
}
.btn {
display: inline-block;
font-size: 1.75rem;
font-family: "Plus Jakarta Sans";
padding: 1.25rem 3rem;
font-weight: 500;
text-decoration: none;
margin-top: 3rem;
width: fit-content;
border-radius: 10rem;
}
.btn.btn-secondary {
background: white;
color: #0762C8;
transition: background-color 0.2s ease;
padding: 1.2rem 2.2rem;
font-size: 1.75rem;
}
.btn.btn-secondary i {
margin-right: 1rem;
}
.btn.btn-primary {
background: #0762C8;
transition: background-color 0.2s ease;
color: white;
}
.btn.btn-primary:hover, .btn.btn-primary:focus {
background: #264BB2;
transition: background-color 0.2s ease;
}
.btn-link {
display: inline-block;
font-size: 1rem;
color: #fff;
font-weight: 400;
font-size: 1.25rem;
text-decoration: none;
margin-top: 1rem;
}
.btn-link .fas {
margin-left: 0.5rem;
transform: rotate(-45deg);
}
.arrow {
color: #333;
font-size: 4rem;
animation: 0.5s intro ease;
position: absolute;
position: absolute;
bottom: -40%;
left: 0;
}
.arrow:hover {
color: #666;
}
@media screen and (max-width: 767px) {
html {
font-size: 8px;
}
h1 {
font-size: 4.5rem;
margin-bottom: 3rem;
max-width: inherit;
}
h2 {
font-size: 3rem;
margin-bottom: 2rem;
}
p {
font-size: 2.5rem;
}
#line span {
font-size: 2rem;
}
#about .intro {
padding-right: 0;
}
#about .intro img {
margin-bottom: 4rem;
}
#services .service p {
font-size: 2rem;
}
#projects .container .projects-list {
flex-direction: column;
gap: 3rem;
}
ul#social li {
margin-right: 0;
margin-left: 0;
display: block;
}
ul#social li a {
font-size: 2rem;
}
#contact {
padding-bottom: 10rem;
}
}
@media screen and (max-width: 1000px) {
header .container {
flex-direction: row;
}
header nav.menu-open ul {
left: 0;
transition: all 0.4s ease-out;
}
header nav ul {
position: absolute;
display: flex;
top: 0;
left: 100%;
transition: all 0.4s ease-in;
width: 100%;
height: 100vh;
justify-content: center;
align-items: center;
background: #0762C8;
z-index: 1;
flex-direction: column;
}
header nav ul li {
display: block;
font-size: 3.5rem;
margin-left: 0;
margin-top: 2rem;
font-family: "Plus Jakarta Sans", sans-serif;
font-weight: 500;
}
header nav ul li::first-child {
margin-top: 0;
}
header nav ul .social {
display: flex;
width: 50%;
align-items: center;
justify-content: space-evenly;
margin-top: 2rem;
}
header nav ul a[rel=external] {
margin-top: 1rem;
display: inline-block;
}
header nav ul a i {
color: white;
}
header nav {
cursor: pointer;
}
header nav::before, header nav::after {
content: "";
display: block;
height: 2px;
background: white;
position: relative;
z-index: 2;
}
header nav::before {
width: 30px;
transition: all 0.2s ease;
}
header nav::after {
width: 25px;
margin-top: 6px;
transition: all 0.2s ease 0.3s;
}
header nav.menu-open::before {
transform: rotate(45deg);
top: 8px;
transition: all 0.2s ease;
}
header nav.menu-open::after {
transform: rotate(-45deg);
width: 30px;
transition: all 0.2s ease 0.3s;
box-shadow: 0px -2px 0px #0762c8, 0px -3px 0px #0762c8;
}
.container {
padding: 0 4rem;
flex-direction: column;
}
#services .container .services-list {
flex-direction: column;
gap: 3rem;
}
}
@media screen and (min-width: 1001px) {
header nav ul li a:after, #social li a:after {
content: "";
height: 3px;
width: 0;
display: block;
background: #0762C8;
margin-top: 0.5rem;
transition: width 0.2s ease;
}
header nav ul li a:hover::after, #social li a:hover::after {
width: 100%;
transition: width 0.2s ease;
}
}
@media screen and (min-width: 767px) and (max-width: 1200px) {
h1 {
font-size: 5rem;
}
.rotate {
right: -140px;
top: 50%;
margin-top: -175px;
}
.rotate, .rotate .circle {
width: 350px;
height: 350px;
}
.rotate img {
width: 35px;
}
#projects .container .projects-list .project {
flex: 0 0 48%;
}
}
@keyframes intro {
0% {
opacity: 0;
transform: translateX(-2rem);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(180deg);
}
}
@keyframes rotate360 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.animate-rotate-360 {
transform-origin: center;
animation: rotate360 13s infinite linear;
}
@keyframes marquee {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(-100%, 0);
}
}
.cookies {
position: fixed;
pointer-events: none;
display: flex;
flex-direction: row;
align-items: end;
justify-content: center;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 9999;
animation: 0.5s intro ease;
}
.cookie-box {
pointer-events: all;
max-width: 70rem;
background: #fff;
border: 3px solid #000;
margin-bottom: 2rem;
padding: 2rem;
text-align: center;
align-self: flex-end;
font-size: 1rem;
font-family: sans-serif;
}
.cookie-box p {
font-size: 1.5rem;
line-height: 1.5;
margin-bottom: 2rem;
font-weight: 500;
}
.cookie-box .buttons-choice {
display: flex;
flex-direction: row;
justify-content: center;
}
.cookie-box button.button-cookie-choice {
border: 2px solid #ddd;
font-size: 1.5rem;
font-weight: 600;
display: inline-block;
padding: 1rem 3rem;
color: #000;
text-decoration: none;
cursor: pointer;
background: transparent;
font-family: "Sora", sans-serif;
}
.cookie-box button.button-cookie-choice:hover {
background: #ddd;
border-color: #ddd;
}
.cookie-box button.button-cookie-choice:last-child {
background: #333;
margin-left: 1.5rem;
color: #fff;
border-color: #333;
}
.cookie-box button.button-cookie-choice:last-child:hover {
background: #000;
border-color: #000;
}
@media screen and (max-width: 767px) {
.cookie-box {
max-width: initial;
margin-bottom: 0;
border-width: 3px 0px 0px 0px;
}
}