@font-face {
font-family: "Kensington";
src: local("Kensington Compressed Black"), local("Kensington-CompressedBlack"),
url(//notagency.com.br/wp-content/themes/notagency/assets/fonts/Kensington-CompressedBlack.woff2) format("woff2"),
url(//notagency.com.br/wp-content/themes/notagency/assets/fonts/Kensington-CompressedBlack.woff) format("woff");
font-weight: 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Kensington";
src: local("Kensington Compressed Black Italic"),
local("Kensington-CompressedBlackItalic"),
url(//notagency.com.br/wp-content/themes/notagency/assets/fonts/Kensington-CompressedBlackItalic.woff2) format("woff2"),
url(//notagency.com.br/wp-content/themes/notagency/assets/fonts/Kensington-CompressedBlackItalic.woff) format("woff");
font-weight: 900;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Kensington";
src: local("Kensington Compressed Bold"), local("Kensington-CompressedBold"),
url(//notagency.com.br/wp-content/themes/notagency/assets/fonts/Kensington-CompressedBold.woff2) format("woff2"),
url(//notagency.com.br/wp-content/themes/notagency/assets/fonts/Kensington-CompressedBold.woff) format("woff");
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Kensington";
src: local("Kensington Compressed Italic"),
local("Kensington-CompressedItalic"),
url(//notagency.com.br/wp-content/themes/notagency/assets/fonts/Kensington-CompressedItalic.woff2) format("woff2"),
url(//notagency.com.br/wp-content/themes/notagency/assets/fonts/Kensington-CompressedItalic.woff) format("woff");
font-weight: normal;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Kensington Compressed Demi";
src: local("Kensington Compressed Demi"), local("Kensington-CompressedDemi"),
url(//notagency.com.br/wp-content/themes/notagency/assets/fonts/Kensington-CompressedDemi.woff2) format("woff2"),
url(//notagency.com.br/wp-content/themes/notagency/assets/fonts/Kensington-CompressedDemi.woff) format("woff");
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Kensington";
src: local("Kensington Compressed Medium"),
local("Kensington-CompressedMedium"),
url(//notagency.com.br/wp-content/themes/notagency/assets/fonts/Kensington-CompressedMedium.woff2) format("woff2"),
url(//notagency.com.br/wp-content/themes/notagency/assets/fonts/Kensington-CompressedMedium.woff) format("woff");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Kensington";
src: local("Kensington Compressed Medium Italic"),
local("Kensington-CompressedMediumItalic"),
url(//notagency.com.br/wp-content/themes/notagency/assets/fonts/Kensington-CompressedMediumItalic.woff2) format("woff2"),
url(//notagency.com.br/wp-content/themes/notagency/assets/fonts/Kensington-CompressedMediumItalic.woff) format("woff");
font-weight: 500;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Kensington";
src: local("Kensington Compressed Demi Italic"),
local("Kensington-CompressedDemiItalic"),
url(//notagency.com.br/wp-content/themes/notagency/assets/fonts/Kensington-CompressedDemiItalic.woff2) format("woff2"),
url(//notagency.com.br/wp-content/themes/notagency/assets/fonts/Kensington-CompressedDemiItalic.woff) format("woff");
font-weight: 600;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Kensington";
src: local("Kensington Compressed Bold Italic"),
local("Kensington-CompressedBoldItalic"),
url(//notagency.com.br/wp-content/themes/notagency/assets/fonts/Kensington-CompressedBoldItalic.woff2) format("woff2"),
url(//notagency.com.br/wp-content/themes/notagency/assets/fonts/Kensington-CompressedBoldItalic.woff) format("woff");
font-weight: bold;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Kensington";
src: local("Kensington Compressed Regular"),
local("Kensington-CompressedRegular"),
url(//notagency.com.br/wp-content/themes/notagency/assets/fonts/Kensington-CompressedRegular.woff2) format("woff2"),
url(//notagency.com.br/wp-content/themes/notagency/assets/fonts/Kensington-CompressedRegular.woff) format("woff");
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Skyna";
src: local("Skyna DemiBold"), local("Skyna-DemiBold"),
url(//notagency.com.br/wp-content/themes/notagency/assets/fonts/Skyna-DemiBold.woff2) format("woff2"),
url(//notagency.com.br/wp-content/themes/notagency/assets/fonts/Skyna-DemiBold.woff) format("woff");
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Skyna";
src: local("Skyna Light"), local("Skyna-Light"),
url(//notagency.com.br/wp-content/themes/notagency/assets/fonts/Skyna-Light.woff2) format("woff2"),
url(//notagency.com.br/wp-content/themes/notagency/assets/fonts/Skyna-Light.woff) format("woff");
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Skyna";
src: local("Skyna Bold"), local("Skyna-Bold"),
url(//notagency.com.br/wp-content/themes/notagency/assets/fonts/Skyna-Bold.woff2) format("woff2"),
url(//notagency.com.br/wp-content/themes/notagency/assets/fonts/Skyna-Bold.woff) format("woff");
font-weight: bold;
font-style: normal;
font-display: swap;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--black-color: #000;
--white-color: #fff;
--primary-color: #b4c941;
--secondary-color: #363633;
--primary-font: "Kensington", sans-serif;
--secondary-font: "Skyna", sans-serif;
--hsf-background__padding: 20px;
--hsf-default-background__padding: 20px;
}
body {
font-size: 16px;
} .header {
z-index: 99;
position: relative;
transform: translateY(-100px);
padding: 1.5rem 1.5rem 0.5rem 1.5rem;
opacity: 0;
& .container {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
}
}
.header__title {
font: 700 2.25rem var(--primary-font);
color: var(--secondary-color);
text-transform: uppercase;
text-decoration: none;
& span {
color: var(--primary-color);
}
}
.open-form {
background: transparent;
border: none;
cursor: pointer;
}
.header__link {
font: 500 2rem var(--primary-font);
text-decoration: none;
color: #fff;
padding: 0.25rem 0.75rem 0.25rem 0.2rem;
border-radius: 1.5rem;
background-color: var(--primary-color);
display: flex;
align-items: center;
gap: 6px;
} .section__main-hero {
position: relative;
overflow: hidden;
height: 100vh;
z-index: -1;
& .container {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
}
@media (min-width: 768px) {
.section__main-hero {
& .container {
justify-content: center;
}
}
}
@media (min-width: 1024px) {
.header__title {
font-size: 3rem;
}
.section__main-hero {
& .container {
max-width: 1200px;
margin: 0 auto;
height: 100%;
}
}
}
@media (min-width: 1536px) {
.header__title {
font-size: 4rem;
}
.section__main-hero {
height: 100vh;
}
} .section__video {
position: relative;
width: 100%;
height: 250px;
transform: scale(0.3);
& .container {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
& .video__play-button {
all: unset;
cursor: pointer;
}
& video {
position: absolute;
top: 0;
z-index: -1;
width: 100%;
height: 100%;
object-fit: cover;
}
}
@media (min-width: 768px) {
.section__video {
position: relative;
width: 100%;
height: 430px;
}
}
@media (min-width: 1024px) {
.section__video {
height: 580px;
& .video__play-button img {
width: 150px;
height: 150px;
}
}
}
@media (min-width: 1200px) {
.section__video {
height: 760px;
}
}
@media (min-width: 1536px) {
.section__video {
height: 100vh;
}
} .section__about {
padding: 5rem 1.5rem;
& .about__wrapper {
display: flex;
flex-direction: column;
gap: 5rem;
}
& .about__item {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
& .about__title {
font: 800 2rem var(--primary-font);
letter-spacing: -0.03em;
color: var(--secondary-color);
text-align: center;
}
& .about__description {
font: 600 1.25rem var(--secondary-font);
color: var(--secondary-color);
text-align: center;
max-width: 255px;
}
}
} .section__service-call {
background-size: cover;
background-position: center bottom;
background-repeat: no-repeat;
height: 850px;
overflow: hidden;
& .container {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding-top: 60px;
gap: 4rem;
}
& .element__service-call-1 {
position: relative;
width: 256px;
}
& .element__service-call-1-item {
display: block;
position: absolute;
top: 0;
left: 16px;
width: 20px;
height: 20px;
background-color: var(--primary-color);
border-radius: 100%;
&:after {
content: "";
content: "";
display: block;
width: 6px;
height: 450px;
background-color: var(--primary-color);
position: absolute;
top: 5px;
left: 6px;
}
}
& .service-call__title {
font: 800 3rem var(--primary-font);
color: var(--primary-color);
letter-spacing: -0.01em;
line-height: 40px;
text-shadow: 5px 5px 5px black;
}
} .section__services {
padding: 5rem 1.5rem;
& .container {
display: flex;
flex-direction: column;
gap: 3rem;
}
& .services__title {
font: 800 4rem var(--primary-font);
color: var(--primary-color);
line-height: 0.8;
width: 80%;
margin-left: 1.5rem;
}
& .services__wrapper {
display: flex;
flex-direction: column;
align-items: center;
}
& .services__item__divider {
width: 100%;
height: 3px;
background-color: var(--secondary-color);
}
& .services__item {
display: flex;
align-items: center;
& .services__item__title {
width: 80%;
padding: 2rem 0;
}
& .services__item__title h3 {
font: 600 1.75rem var(--secondary-font);
color: var(--secondary-color);
text-decoration: none;
}
& .services__item__title p {
font: 400 1.25rem var(--secondary-font);
color: var(--secondary-color);
text-decoration: none;
margin-top: 0.75rem;
}
}
& .services__button {
cursor: pointer;
font: 800 1.75rem var(--secondary-font);
text-align: center;
text-transform: uppercase;
color: var(--secondary-color);
text-decoration: none;
background-color: white;
padding: 1rem 3.5rem;
border-radius: 2rem;
border: 2px solid #000;
width: max-content;
margin: 0 auto;
}
} .section__clients {
padding: 5rem 1.5rem;
background-color: var(--primary-color);
& .clients__title {
font: 800 3.4rem var(--primary-font);
color: var(--secondary-color);
line-height: 0.8;
width: 80%;
margin-left: 1.5rem;
}
& .clients__wrapper {
display: flex;
justify-content: center;
flex-wrap: wrap;
width: 90%;
margin: 12px auto 0;
}
& .clients__item {
display: flex;
justify-content: center;
width: 50%;
}
} .section__pre-footer {
padding: 5rem 1.5rem;
& .container {
display: flex;
flex-direction: column;
align-items: center;
gap: 2rem;
}
& .pre-footer__logos {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2rem;
}
& .pre-footer__text {
font: 400 1.25rem var(--secondary-font);
color: var(--secondary-color);
text-align: center;
width: 80%;
}
} .footer {
background-color: #000;
color: #fff;
padding: 40px 20px;
}
.footer__container {
max-width: 1200px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 30px;
}
.open-form.footer__cta-button {
display: inline-block;
padding: 0.75em 2em;
border: 2px solid #fff;
border-radius: 50px;
color: #fff;
text-decoration: none;
font: 400 1.25rem var(--secondary-font);
transition: all 0.3s ease;
}
.footer__cta-button:hover {
background-color: #fff;
color: #000;
}
.footer__logo {
font: 700 5rem var(--primary-font);
letter-spacing: 1px;
line-height: 0.7;
}
.footer__logo .highlight {
color: var(--primary-color);
}
.footer__copyright {
font: 400 1rem var(--secondary-font);
margin: 0;
}
.footer__links {
display: flex;
gap: 32px;
justify-content: center;
max-width: 70%;
}
.footer__link {
color: #fff;
font: 400 1.25rem var(--secondary-font);
position: relative;
}
.footer__link::after {
content: "";
position: absolute;
width: 100%;
height: 1px;
background: #fff;
bottom: -2px;
left: 0;
transform: scaleX(0);
transform-origin: right;
transition: transform 0.3s ease;
}
.footer__link:hover::after {
transform: scaleX(1);
transform-origin: left;
}
.footer__social {
display: flex;
gap: 32px;
margin-top: 10px;
}
.footer__social-link {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
transition: opacity 0.3s ease;
}
.footer__social-link:hover {
opacity: 0.8;
}
.footer__social-link img {
width: 100%;
height: 100%;
object-fit: contain;
}
@media (min-width: 768px) {
.section__service-call {
background-size: 155%;
background-position: 100% center;
height: 600px;
& .container {
flex-direction: row-reverse;
justify-content: center;
align-items: center;
height: 100%;
gap: 0;
padding-top: 0;
}
& .element__service-call-1 {
position: relative;
width: 280px;
}
& .element__service-call-1-item {
top: -200px;
left: 0;
&:after {
content: "";
content: "";
display: block;
width: 250px;
height: 5px;
background-color: var(--primary-color);
position: absolute;
top: 7px;
left: 6px;
}
}
& .service-call__title {
font-size: 5rem;
line-height: 64px;
}
}
.section__services .services__title {
width: 70%;
}
.section__clients {
& .clients__title {
width: 70%;
text-align: center;
margin: 0 auto;
}
& .clients__wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
& .clients__item {
width: 100%;
}
}
}
@media (min-width: 1024px) {
.section__about {
padding: 7em 1.5rem;
& .about__wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
max-width: 980px;
margin: 0 auto;
}
& .about__item {
align-items: flex-start;
}
& .about__item:first-of-type .about__item-icon img {
width: 176px;
height: auto;
}
& .about__item .about__item-icon img {
width: 120px;
height: auto;
}
& .about__item .about__title {
width: 40%;
text-align: left;
line-height: 1;
}
& .about__item .about__description {
width: 85%;
text-align: left;
font-weight: 300;
}
}
.section__services {
padding: 7em 1.5rem;
& .container {
max-width: 1200px;
margin: 0 auto;
}
& .services__title {
margin-left: 0;
}
& .services__item {
position: relative;
width: 100%;
& .services__item__title h3 {
position: relative;
font: 400 1.75rem var(--secondary-font);
color: var(--secondary-color);
text-decoration: none;
}
& .services__item__title p {
position: absolute;
top: 30%;
transform: translateY(50%);
opacity: 0;
font: 600 1.75rem var(--secondary-font);
color: var(--primary-color);
text-decoration: none;
margin-top: 0;
}
&:hover {
& .services__item__title h3 {
transform: translateY(-70%);
opacity: 0;
transition: all 0.3s ease-in-out;
}
& .services__item__title p {
opacity: 1;
transform: translateY(0);
transition: all 0.3s ease-in-out;
}
}
}
& .services__button {
font-weight: 600;
font-size: 1.5rem;
padding: 0.875rem 4.5rem;
margin-top: 4rem;
}
}
.section__clients {
& .clients__title {
font-size: 2rem;
}
& .clients__wrapper {
display: grid;
grid-template-columns: repeat(6, 1fr);
margin-top: 3rem;
}
}
.section__pre-footer {
& .container {
flex-direction: row;
justify-content: space-between;
max-width: 1200px;
margin: 0 auto;
gap: 2rem;
}
& .pre-footer__logos {
width: 50%;
flex-direction: row;
justify-content: flex-start;
gap: 1.5rem;
& figure {
width: 100%;
height: auto;
}
& figure:first-of-type img {
width: 230px;
height: auto;
}
& figure:last-of-type img {
width: 150px;
height: auto;
}
}
& .pre-footer__text {
text-align: left;
}
}
.footer {
padding: 5rem 1.5rem;
}
.footer__container {
flex-direction: row;
flex-wrap: wrap;
gap: 40px 30px;
}
.footer__logo {
order: 1;
width: 720px;
}
.footer__cta-button {
order: 2;
}
.footer__social {
order: 3;
}
.footer__copyright {
order: 4;
width: 740px;
}
.footer__links {
order: 5;
}
}
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.7);
opacity: 0;
pointer-events: none;
z-index: 1000;
transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.modal-overlay.active {
opacity: 1;
pointer-events: all;
}
.modal-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
z-index: 1100;
transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.modal-wrapper.active {
opacity: 1;
pointer-events: all;
}
.modal {
background: #fff;
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
max-width: 660px;
width: 90vw;  opacity: 0;
overflow-y: auto;
transform: translateY(40px) scale(0.98);
transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.modal.active {
opacity: 1;
transform: translateY(0) scale(0.8);
}
.modal__header {
padding: 1rem 1rem 0 1.5rem;
& > div {
display: flex;
justify-content: space-between;
}
& h2 {
font: 600 1.5rem / 100% var(--secondary-font);
color: var(--secondary-color);
margin-top: 1.25rem;
}
& p {
font: 400 0.875rem / 148% var(--secondary-font);
color: var(--secondary-color);
width: 90%;
margin-top: 0.5rem;
}
}
.modal__content {
width: 100%;
height: 100%;
}
.modal__close {
position: absolute;
top: 18px;
right: 18px;
background: transparent;
border: none;
font-size: 2rem;
color: #222;
cursor: pointer;
z-index: 10;
transition: color 0.2s;
line-height: 1;
}
.modal__close:hover {
color: var(--primary-color, #b4c941);
} .modal::-webkit-scrollbar {
width: 10px;
background: #f6f6fc;
border-radius: 8px;
}
.modal::-webkit-scrollbar-track {
border-radius: 10px;
margin: 12px 2px;
background: #f6f6fc;
}
.modal::-webkit-scrollbar-thumb {
background: var(--primary-color, #b4c941);
border-radius: 8px;
border: 2px solid #f6f6fc;
margin: 2px;
}
.modal::-webkit-scrollbar-thumb:hover {
background: #a0b53a;
}
@media (min-width: 1024px) {
.modal__content {
min-height: 570px;
}
}
@media (min-width: 1200px) {
.modal__header {
padding: 1rem 1rem 0 2.5rem;
& h2 {
font: 600 2rem / 100% var(--secondary-font);
}
& p {
font: 400 1rem / 148% var(--secondary-font);
width: 80%;
margin-top: 1rem;
}
}
}  .blog-grid {
padding: 4rem 1.5rem;
}
.blog-grid__container {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.5rem;
}
.sidebar-blog {
display: flex;
flex-direction: column;
gap: 1.75rem;
padding: 1.5rem 0;
.title {
font: 600 2.25rem / 100% var(--primary-font);
color: var(--secondary-color);
text-transform: uppercase;
border-bottom: 2px solid var(--primary-color);
padding-bottom: 0.5rem;
}
.button-primary {
margin-inline-start: auto;
}
}
@media (min-width: 1024px) {
.blog-grid__container {
display: grid;
grid-template-columns: repeat(3, 1fr);
align-items: flex-start;
gap: 30px;
max-width: 1200px;
margin: 0 auto;
grid-template-areas:
"card-1     card-2     sidebar-1"
"card-3     card-4     sidebar-2"
"card-5     card-6     card-7"
"rest       rest       rest";
.content-grid-card-item:first-of-type {
grid-area: card-1;
}
.content-grid-card-item:nth-of-type(2) {
grid-area: card-2;
}
.content-grid-card-item:nth-of-type(3) {
grid-area: card-3;
}
.content-grid-card-item:nth-of-type(4) {
grid-area: card-4;
}
.content-grid-card-item:nth-of-type(5) {
grid-area: card-5;
}
.content-grid-card-item:nth-of-type(6) {
grid-area: card-6;
}
.content-grid-card-item:nth-of-type(7) {
grid-area: card-7;
}
}
.sidebar-downloads {
padding: 0;
grid-area: sidebar-1;
}
.sidebar-most-accessed {
padding: 0;
grid-area: sidebar-2;
}
.blog-main-layout article:nth-child(n + 8) {
grid-column: span 1;
grid-area: unset;
}
.sidebar-container {
display: flex;
}
}
@media (min-width: 1200px) {
.sidebar-container {
flex-direction: column;
}
}