.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
word-wrap: normal !important;
} @media(hover: hover) {
body.modal--open,
body.offside-js--is-open {
overflow-y: hidden;
padding-right: 8px;
touch-action: none;
}
body.modal--open dialog {
left: calc(50% - 4px);
}
body.modal--open .cta,
body.offside-js--is-open .cta  {
padding-right: 8px;
}
body.modal--open .header,
body.offside-js--is-open .header {
padding-right: 8px;
}
}
@media (hover: none) {
body.modal--open,
body.offside-js--is-open {
overflow-y: hidden;
}
}
body {
--color: var(--main);
}
.title {
font-size: var(--h2-size);
line-height: var(--h2-line-height);
margin-bottom: 16px;
}
@media(max-width: 1000px) {
h1 {
font-size: var(--h2-size);
line-height: var(--h2-line-height);
}
}
.container {
max-width: 960px;
padding: 0 10px;
margin: auto;
width: 100%;
}
.btn {
display: block;
width: fit-content;
}
.btn__inner {
width: fit-content;
display: flex;
gap: 4px;
align-items: center;
font-size: calc(14 / 16 * 1rem);
line-height: 20px;
padding: 8px 14px;
color: var(--main);
background-color: var(--main-bg);
border: 2px solid var(--main-bg);
border-radius: 8px;
transition: transform 250ms;
font-weight: 600;
min-height: 44px;
will-change: transform, opacity;
}
@media(hover: hover) {
.btn:hover .btn__inner {
transform: translateY(-4px);
transition: transform 125ms;
}
}
.btn--white .btn__inner {
color: var(--slate-600);
background-color: #fff;
border-color: #fff;
font-weight: 600;
}
.btn--white .btn__inner svg {
color: var(--slate-600);
}
.btn--subtle .btn__inner {
color: var(--slate-700);
background: var(--gradient-subtle);
border: none;
}
.btn__inner svg {
flex-shrink: 0;
}
.btn_arrow {
display: block;
width: fit-content;
}
.btn_arrow__inner {
display: flex;
align-items: center;
gap: 4px;
width: fit-content;
padding: 10px;
margin: -10px;
transition: 250ms;
}
.btn_arrow span {
font-size: calc(14 / 16 * 1rem);
line-height: 20px;
color: var(--slate-700);
font-weight: 600;
}
@media(hover: hover) {
.btn_arrow:hover .btn_arrow__inner {
transform: translateX(4px);
transition: 125ms;
}
}
.content a {
text-decoration: underline;
color: currentColor;
}
.badge {
color: var(--slate-600);
font-weight: 600;
background-color: var(--slate-100);
border-radius: 6px;
padding: 1px 8px;
width: fit-content;
}
span.emblem {
display: block;
width: fit-content;
background-color: #fff;
font-size: calc(12 / 16 * 1rem);
line-height: 16px;
font-weight: 600;
color: var(--slate-700);
padding: 4px 9px;
border-radius: 60px;
}
.page404 {
margin-top: 60px;
}
.page404 > div {
padding: 60px;
border-radius: 6px;
box-shadow: var(--box-shadow-warm);
background: var(--gradient-subtle);
}
.page404 a {
margin-top: 16px;
}
.iframe {
aspect-ratio: 16 / 9;
overflow: hidden;
}
.iframe iframe {
width: 100%;
height: 100%;
border: 0;
}
dialog {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 24px;
box-shadow: var(--box-shadow-next);
border: none;
overflow: visible;
max-width: min(calc(100% - 20px), 960px);
width: 100%;
padding: 0;
}
dialog::backdrop {
background-color: var(--slate-700);
opacity: .8;
}
.modal__container {
max-height: 700px;
padding: 20px;
padding-bottom: 28px;
overflow-y: auto;
}
.modal__container:has(> .modal__content:only-child > p:only-child > iframe:only-child) {
padding: 0;
}
.modal__container--overflow {
border-radius: 24px 1px 1px 24px;
}
.modal__content iframe {
border-radius: 12px;
}
.close-modal {
position: absolute;
top: -26px;
right: 16px;
}
.close-modal__inner {
color: #fff;
font-size: calc(14 / 16 * 1rem);
line-height: 20px;
display: flex;
align-items: center;
gap: 4px;
padding: 10px;
margin: -10px;
transition: 250ms;
}
@media(hover: hover) {
.close-modal:hover .close-modal__inner {
transform: translateX(4px);
transition: 125ms;
}
}
@media(max-width: 1000px) {
dialog {
margin-left: unset;
}
}
@media(max-width: 500px) {
.modal__container {
max-height: 600px;
}
.modal__container--overflow {
border-radius: 24px;
}
} ::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #888;
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}
summary::-webkit-details-marker {
display: none;
}
@media(max-width: 1000px) {
.btn--white .btn__inner {
box-shadow: var(--box-shadow-warm);
}
.page404 > div {
border-radius: 0;
}
} .blocks > section {
overflow-x: clip;
scroll-margin-top: 80px;
}
.single .blocks {
margin-top: 60px;
}
.content__container {
padding-top: 60px;
padding-bottom: 70px;
}
[data-type='dark'] .content__container .prose {
color: #fff;
} .header {
display: flex;
flex-direction: column;
flex-shrink: 0;
box-shadow: var(--box-shadow-warm);
position: fixed;
width: 100%;
z-index: 3;
background-color: #fff;
height: auto;
}
.header__container {
height: 80px;
width: 100%;
display: flex;
gap: 8px;
align-items: center;
}
.header__contact {
display: flex;
height: 40px;
background-color: #f3f3f3;
border-bottom: 1px solid #dfdfdf;
}
.header__contact_container {
display: flex;
gap: 24px;
}
.header__contact_container a {
display: flex;
gap: 4px;
align-items: center;
font-size: calc(14 / 16 * 1rem);
line-height: 20px;
color: var(--slate-600);
}
.header__contact_container svg {
max-width: 18px;
}
.header__logo_placeholder {
margin-right: auto;
}
.header__logo {
margin-right: auto;
}
.header__logo img {
object-fit: contain;
}
.header__logo_placeholder {
font-size: var(--h2-size);
line-height: var(--h2-line-height);
color: var(--slate-700);
}
.header__menu {
display: flex;
flex-wrap: wrap;
position: relative;
margin-right: 8px;
}
.header__menu li {
position: relative;
}
.header__menu li a {
display: inline-block;
font-size: calc(14 / 16 * 1rem);
line-height: 20px;
color: var(--slate-700);
padding: 11px 12px 12px;
border-radius: 6px;
}
.header__menu li a:has(~ .sub-menu) {
padding-right: 20px;
}
.header__menu li a:has(~ .sub-menu):after {
content: '';
border-style: solid;
border-color: var(--slate-600);
border-width: 1px 1px 0 0;
content: '';
display: inline-block;
height: 6px;
left: 8px;
position: relative;
top: 6px;
transform: rotate(135deg);
vertical-align: top;
width: 6px;
}
.header__menu li a:hover {
color: var(--slate-900);
background-color: var(--slate-100);
}
.header__menu li .sub-menu {
background-color: #fff;
padding: 4px;
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
border-radius: 6px;
box-shadow: var(--box-shadow-next);
opacity: 0;
transform: translateY(4px);
transition: 125ms;
}
.header__menu li:hover > .sub-menu {
visibility: visible;
opacity: 1;
transform: translateY(0);
transition: 125ms;
}
.header__menu .sub-menu a {
width: 100%;
white-space: nowrap;
}
.header__buttons {
display: flex;
gap: 8px;
margin-right: 8px;
}
.header__search {
padding: 8px;
border-radius: 8px;
}
body:has(.header__contact) .sidebar__open {
margin-right: -12px;
}
body:has(.header__contact) .blocks {
margin-top: 40px;
}
@media(hover: hover) {
.header__search:hover {
background-color: var(--slate-100);
}
.header__contact_container a:hover {
color: var(--slate-900);
}
}
@media(max-width: 1000px) {
.header__contact {
display: none;
}
body:has(.header__contact) .blocks {
margin-top: unset;
}
}
@media(max-width: 1000px) {
.header__logo img {
max-width: 160px;
}
.header__menu {
display: none;
}
.header__buttons {
display: none;
}
} .sidebar {
background-color: #fff;
display: none;
}
.sidebar.is-open {
display: initial;
z-index: 99999;
}
.sidebar__button {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border-radius: 8px;
}
.sidebar__button:hover {
background-color: var(--slate-100);
}
.sidebar__button:focus {
background: transparent;
}
.sidebar__button svg {
flex-shrink: 0;
}
.sidebar__menu {
margin-top: 50px;
}
.sidebar__menu_close {
position: absolute;
top: 4px;
right: 4px;
padding: 10px;
background: transparent;
border-radius: 50%;
}
.sidebar__menu_close:hover {
background: var(--slate-100);
}
.sidebar__link {
display: flex;
align-items: center;
color: var(--slate-500);
padding: 7px 24px 8px;
border-bottom: 1px solid var(--slate-100);
position: relative;
}
.sub-menu .sidebar__link {
font-size: calc(14 / 16 * 1rem);
line-height: 20px;
padding: 7px 40px 8px;
}
.sidebar__link:hover {
background-color: var(--slate-100);
color: var(--slate-600);
}
.color .sidebar__link {
background-color: var(--color);
color: #fff;
}
.current-menu-item>.sidebar__link::before {
content: '';
display: block;
height: 100%;
width: 4px;
background: var(--main);
position: absolute;
left: 0;
}
.overlay {
background-color: transparent;
position: fixed;
inset: 0;
z-index: 3;
opacity: 0;
visibility: hidden;
transition: 250ms;
}
.offside-js--is-open .overlay {
background-color: var(--slate-700);
opacity: .8;
visibility: visible;
transition: 125ms;
} .footer {
margin-top: 60px;
padding-top: 32px;
padding-bottom: 70px;
}
.footer__social_container {
border-bottom: 1px solid var(--slate-200);
padding-bottom: 24px;
display: flex;
gap: 16px;
}
.footer__social_title {
display: block;
font-size: calc(18 / 16 * 1rem);
}
.footer__social {
display: flex;
gap: 16px;
}
.footer__social svg {
color: var(--slate-700);
}
.footer__cards {
margin: 40px 0;
}
.footer .cards_1__item {
flex-basis: 450px;
}
.footer__cards li {
width: fit-content;
}
.footer__cards .cards_1__item a {
text-decoration: unset;
}
.footer__cards .cards_1__content {
margin-top: 16px;
}
.footer__credits {
padding-top: 60px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 20px 40px;
}
.footer__credits > span {
color: var(--slate-600);
font-size: calc(14 / 16 * 1rem);
}
.footer .developer {
margin-left: auto;
}
.footer .developer a {
color: var(--slate-600);
}
.footer .developer a:hover {
text-decoration: underline;
}
@media(min-width: 1001px) {
.footer__social a>svg {
transition: transform 250ms;
}
@media(hover: hover) {
.footer__social a:hover>svg {
transform: translateY(-4px);
transition: transform 125ms;
}
}
}
@media(max-width: 1000px) {
.footer__social_container {
flex-direction: column;
align-items: center;
}
.footer .cards_1__item {
flex-basis: unset;
justify-items: center;
}
.footer__credits {
flex-direction: column;
align-items: center;
}
.footer .developer {
margin-left: unset;
}
} .animate {
position: relative;
}
.animate::before {
content: '';
background-color: var(--slate-50);
position: absolute;
inset: 0;
}
.viewport .animate::before {
animation: hide forwards;
animation-delay: 1100ms; pointer-events: none;
}
.animate::after {
content: '';
inset: 0;
position: absolute;
width: 0%;
height: 100%;
background-color: var(--slate-300);
}
.viewport .animate::after {
animation: reveal 1000ms forwards;
animation-delay: 600ms;
}
@keyframes reveal {
0% {
left: 0;
width: 0%;
}
50% {
left: 0;
width: calc(100% + 1px);
}
100% {
left: calc(100% + 1px);
width: 0;
}
}
@media(max-width: 1000px) {
@keyframes reveal {
0% {
left: 0;
width: 0%;
}
50% {
left: 0;
width: 100%;
}
100% {
left: 100%;
width: 0;
}
}
}
@keyframes hide {
0% {opacity: 1;}
100% {opacity: 0;}
}
@keyframes shimmer {
100% {
transform: translate(100%);
}
}
.show > * {
opacity: 0;
}
.viewport .show > * {
animation: show 300ms forwards;
--base-delay: 300ms;
}
.viewport .show > *:first-child {
animation-delay: var(--base-delay);
}
.viewport .show > *:nth-child(2) {
animation-delay: calc(var(--base-delay) + 300ms * 1);
}
.viewport .show > *:nth-child(3) {
animation-delay: calc(var(--base-delay) + 300ms * 2);
}
.viewport .show > *:nth-child(4) {
animation-delay: calc(var(--base-delay) + 300ms * 3);
}
.viewport .show > *:nth-child(5) {
animation-delay: calc(var(--base-delay) + 300ms * 4);
}
.viewport .show > *:nth-child(6) {
animation-delay: calc(var(--base-delay) + 300ms * 5);
}
.viewport .show > *:nth-child(7) {
animation-delay: calc(var(--base-delay) + 300ms * 6);
}
.viewport .show > *:nth-child(8) {
animation-delay: calc(var(--base-delay) + 300ms * 7);
}
.viewport .show > *:nth-child(9) {
animation-delay: calc(var(--base-delay) + 300ms * 8);
}
.viewport .show > *:nth-child(10) {
animation-delay: calc(var(--base-delay) + 300ms * 9);
}
.viewport .show > *:nth-child(11) {
animation-delay: calc(var(--base-delay) + 300ms * 10);
}
.viewport .show > *:nth-child(12) {
animation-delay: calc(var(--base-delay) + 300ms * 11);
}
.viewport .show > *:nth-child(13) {
animation-delay: calc(var(--base-delay) + 300ms * 12);
}
.viewport .show > *:nth-child(14) {
animation-delay: calc(var(--base-delay) + 300ms * 13);
}
.viewport .show > *:nth-child(15) {
animation-delay: calc(var(--base-delay) + 300ms * 14);
}
.viewport .show > *:nth-child(16) {
animation-delay: calc(var(--base-delay) + 300ms * 15);
}
.viewport .show > *:nth-child(17) {
animation-delay: calc(var(--base-delay) + 300ms * 16);
}
.viewport .show > *:nth-child(18) {
animation-delay: calc(var(--base-delay) + 300ms * 17);
}
.viewport .show > *:nth-child(19) {
animation-delay: calc(var(--base-delay) + 300ms * 18);
}
.viewport .show > *:nth-child(20) {
animation-delay: calc(var(--base-delay) + 300ms * 19);
}
.viewport .show > *:nth-child(21) {
animation-delay: calc(var(--base-delay) + 300ms * 20);
}
.viewport .show > *:nth-child(22) {
animation-delay: calc(var(--base-delay) + 300ms * 21);
}
.viewport .show > *:nth-child(23) {
animation-delay: calc(var(--base-delay) + 300ms * 22);
}
.viewport .show > *:nth-child(24) {
animation-delay: calc(var(--base-delay) + 300ms * 23);
}
.viewport .show > *:nth-child(25) {
animation-delay: calc(var(--base-delay) + 300ms * 24);
}
.viewport .show > *:nth-child(26) {
animation-delay: calc(var(--base-delay) + 300ms * 25);
}
.viewport .show > *:nth-child(27) {
animation-delay: calc(var(--base-delay) + 300ms * 26);
}
.viewport .show > *:nth-child(28) {
animation-delay: calc(var(--base-delay) + 300ms * 27);
}
.viewport .show > *:nth-child(29) {
animation-delay: calc(var(--base-delay) + 300ms * 28);
}
.viewport .show > *:nth-child(30) {
animation-delay: calc(var(--base-delay) + 300ms * 29);
}
.viewport .show > *:nth-child(31) {
animation-delay: calc(var(--base-delay) + 300ms * 30);
}
.viewport .show > *:nth-child(32) {
animation-delay: calc(var(--base-delay) + 300ms * 31);
}
.viewport .show > *:nth-child(33) {
animation-delay: calc(var(--base-delay) + 300ms * 32);
}
.viewport .show > *:nth-child(34) {
animation-delay: calc(var(--base-delay) + 300ms * 33);
}
.viewport .show > *:nth-child(35) {
animation-delay: calc(var(--base-delay) + 300ms * 34);
}
.viewport .show > *:nth-child(36) {
animation-delay: calc(var(--base-delay) + 300ms * 35);
}
.viewport .show > *:nth-child(37) {
animation-delay: calc(var(--base-delay) + 300ms * 36);
}
.viewport .show > *:nth-child(38) {
animation-delay: calc(var(--base-delay) + 300ms * 37);
}
.viewport .show > *:nth-child(39) {
animation-delay: calc(var(--base-delay) + 300ms * 38);
}
.viewport .show > *:nth-child(40) {
animation-delay: calc(var(--base-delay) + 300ms * 39);
}
.viewport .show > *:nth-child(41) {
animation-delay: calc(var(--base-delay) + 300ms * 40);
}
.viewport .show > *:nth-child(42) {
animation-delay: calc(var(--base-delay) + 300ms * 41);
}
.viewport .show > *:nth-child(43) {
animation-delay: calc(var(--base-delay) + 300ms * 42);
}
.viewport .show > *:nth-child(44) {
animation-delay: calc(var(--base-delay) + 300ms * 43);
}
.viewport .show > *:nth-child(45) {
animation-delay: calc(var(--base-delay) + 300ms * 44);
}
.viewport .show > *:nth-child(46) {
animation-delay: calc(var(--base-delay) + 300ms * 45);
}
.viewport .show > *:nth-child(47) {
animation-delay: calc(var(--base-delay) + 300ms * 46);
}
.viewport .show > *:nth-child(48) {
animation-delay: calc(var(--base-delay) + 300ms * 47);
}
.viewport .show > *:nth-child(49) {
animation-delay: calc(var(--base-delay) + 300ms * 48);
}
.viewport .show > *:nth-child(50) {
animation-delay: calc(var(--base-delay) + 300ms * 49);
}
@keyframes show {
from {
opacity: 0;
transform: translateY(8px);
}
to {
visibility: visible;
opacity: 1;
}
}
@keyframes reveal_left {
0% {
opacity: 0;
transform: translate(-8px);
clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
}
100% {
opacity: 1;
transform: translate(0);
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
} .underline {
background-image: linear-gradient(to right, rgba(255, 235, 59, 0.4) 50%, transparent 50%);
background-size: 200% 100%;
background-position: 100% 0;
animation: highlight 1000ms forwards;
animation-delay: 500ms;
}
@keyframes highlight {
to {
background-position: 0 0;
}
} .no-animation *,
.no-animation *::before,
.no-animation *::after {
transition: none !important;
scale: none !important;
animation: none !important;
opacity: 1 !important;
}
.no-animation *::before {
content: unset !important;
animation: unset !important;
}
.no-animation *::after {
animation: unset !important;
}
.no-animation .viewport .show > * {
opacity: 1;
}
.no-animation .btn:hover .btn__inner {
transform: none !important;
}.offside,
.overlay {
transition: none !important;
}
:root { --offside-width: 360px;
}
@media(max-width: 1000px) {
:root {
--offside-width: 320px;
}
}
@media(max-width: 350px) {
:root {
--offside-width: 280px;
}
} .offside {
position: fixed; width: var(--offside-width); height: 100%;
top: 0;
z-index: 9999;
overflow: auto;
-webkit-overflow-scrolling: touch; } .offside,
.offside--left {
left: calc(-1 * var(--offside-width)); } .offside--right {
left: auto;
right: calc(-1 * var(--offside-width)); } .offside--left.is-open,
.offside-js--is-left .offside-sliding-element {
-webkit-transform: translate3d(var(--offside-width), 0, 0); transform: translate3d(var(--offside-width), 0, 0); } .offside--right.is-open,
.offside-js--is-right .offside-sliding-element {
-webkit-transform: translate3d(calc(-1 * var(--offside-width)), 0, 0); transform: translate3d(calc(-1 * var(--offside-width)), 0, 0); } .offside-js--interact .offside,
.offside-js--interact .offside-sliding-element {
-webkit-transition: -webkit-transform 125ms cubic-bezier(.16, .68, .43, .99);
transition: transform 125ms cubic-bezier(.16, .68, .43, .99); -webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
} .offside-js--init {
overflow-x: hidden;
}  .no-csstransforms3d .offside {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.no-csstransforms3d .offside-sliding-element {
overflow-x: hidden;
position: relative;
} .no-csstransforms3d .offside--left.is-open {
left: 0;
}
.no-csstransforms3d .offside--right.is-open {
right: 0;
} .no-csstransforms3d > .offside-js--is-left .offside-sliding-element {
right: calc(-1 * var(--offside-width)); }
.no-csstransforms3d > .offside-js--is-right .offside-sliding-element {
left: calc(-1 * var(--offside-width)); }.header__languages{position:relative;padding:8px;border-radius:8px}.header__languages li{position:relative}.header__languages li a{display:inline-block;font-size:calc(14 / 16 * 1rem);line-height:20px;color:var(--slate-700);padding:11px 12px 12px;border-radius:6px}.header__languages li a:hover{color:var(--slate-900);background-color:var(--slate-100)}.header__languages .sub-menu{background-color:#fff;padding:4px;visibility:hidden;position:absolute;top:100%;left:0;border-radius:6px;box-shadow:var(--box-shadow-next);opacity:0;transform:translateY(4px);transition:125ms}.header__languages:hover>.sub-menu{visibility:visible;opacity:1;transform:translateY(0);transition:125ms}.header__languages .sub-menu a{width:100%;white-space:nowrap}.header__language{position:absolute;top:0;right:0}.sidebar__languages{display:flex;align-items:center;position:absolute;top:20px;right:38px;margin:0 20px;background-color:var(--slate-100);padding:0 12px;border-radius:20px}.sidebar__languages+.menu-header-container{margin-top:90px}a.glink.gt-current-lang{font-weight:400!important}.sidebar__languages a.glink{font-size:calc(14 / 16 * 1rem);padding:8px 6px;color:var(--slate-500)}.sidebar__languages a.glink.gt-current-lang{color:var(--slate-900)}.breadcrumbs {
list-style: none;
padding-left: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
}
.breadcrumbs__link {
display: flex;
align-items: center;
gap: 4px;
color: var(--slate-500);
font-size: calc(14 / 16 * 1rem);
line-height: 20px;
}
.breadcrumbs__link:hover {
text-decoration: underline;
text-underline-offset: 2px;
}
.breadcrumbs__link--current {
pointer-events: none;
color: var(--slate-900);
}
.breadcrumbs li {
display: flex;
align-items: center;
}
.breadcrumbs li svg {
margin-left: -2px;
margin-right: 7px;
}
.breadcrumbs li:first-child svg {
margin-left: unset;
margin-right: unset;
}.archive__header {
background: url(//wgpmetalurgica.com.br/wp-content/themes/artneo-static/assets/bg-texture.webp);
min-height: 180px;
background-size: cover;
padding-top: 46px;
}
body:has(.header__contact) .archive__header {
padding-top: 86px;
}
.archive__header_container {
display: flex;
flex-direction: column;
justify-content: flex-end;
height: 100%;
padding-bottom: 60px;
}
.archive__title_container {
padding-top: 22px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
.archive__title {
flex-shrink: 0;
font-size: var(--h2-size);
line-height: var(--h2-line-height);
}
.archive__list {
display: grid;
gap: 20px;
margin-top: -36px;
position: relative;
}
.archive__btns_container {
position: relative;
}
.archive__btns {
display: flex;
flex-wrap: wrap;
gap: 8px;
position: absolute;
top: -38px;
right: 10px;
}
@media(max-width: 1000px) {
.archive__btns {
position: unset;
padding-bottom: 24px;
margin-top: -24px;
}
.archive__list {
grid-template-columns: repeat(auto-fit, calc(50% - 10px));
}
} .archive_1__item {
box-shadow: var(--box-shadow-next);
border-radius: 6px;
background-color: #fff;
display: flex;
flex-direction: column;
height: 100%;
transition: transform 250ms;
}
@media(hover: hover) {
.archive_1__item_link:hover .archive_1__item {
transform: translateY(-4px);
transition: transform 125ms;
}
.no-animation .archive_1__item_link:hover .archive_1__item {
transform: unset;
}
}
.archive_1__item_image {
padding: 4px;
padding-bottom: 0;
display: grid;
}
.archive_1__item_image > * {
grid-area: 1/1;
}
.archive_1__item_image > *:last-child {
z-index: 1;
}
.archive_1__item_image_loading {
background-color: var(--slate-200);
aspect-ratio: 16 / 9;
border-radius: 4px;
position: relative;
overflow: hidden;
}
.archive_1__item_image_loading::after {
content: "";
background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .2) 20%, rgba(255, 255, 255, .5) 60%, rgba(255, 255, 255, 0));
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: translate(-100%);
animation: shimmer 1.2s infinite;
}
.archive_1__item_image img {
border-radius: 4px;
aspect-ratio: 16 / 9;
object-fit: cover;
height: 100%;
}
.archive_1__item_content {
padding: 16px;
padding-bottom: 20px;
text-align: center;
gap: 4px;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
.archive_1__item_title {
font-size: calc(14 / 16 * 1rem);
line-height: 20px;
color: var(--slate-700);
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
max-height: calc(20px * 2);
}
.archive_1__item_excerpt {
font-size: calc(12 / 16 * 1rem);
line-height: 16px;
color: var(--slate-600);
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
max-height: calc(20px * 2);
} .nav-links {
display: flex;
flex-wrap: wrap;
margin-top: 40px;
gap: 4px;
}
.nav-links > * {
display: block;
width: 40px;
height: 40px;
background-color: var(--slate-50);
border-radius: 6px;
display: flex;
justify-content: center;
align-items: center;
font-size: calc(14 / 16 * 1rem);
line-height: 20px;
font-weight: 600;
color: var(--slate-500);
flex-shrink: 0;
}
.nav-links > *:hover {
background-color: var(--slate-100);
}
.nav-links > .current {
color: var(--main);
background-color: var(--slate-100);
pointer-events: none;
}
.archive__pagination--custom_color .nav-links > .current {
background-color: transparent;
border: 1px solid;
}
.nav-links > .dots {
pointer-events: none;
}
@media (max-width: 1000px) {
.archive__list {
grid-template-columns: repeat(2, 1fr) !important;
}
}
@media (max-width: 500px) {
.archive__list {
grid-template-columns: 1fr !important;
}
}.fuse {
position: relative;
width: 100%;
max-width: 420px;
}
#searchInput {
width: 100%;
min-height: 40px;
padding: 0 12px;
border: 1px solid var(--slate-200);
border-radius: 4px;
font-size: calc(16 / 16 * 1rem);
line-height: 24px;
font-weight: normal;
color: var(--slate-700);
}
#searchInput:focus-within {
outline: 2px solid var(--slate-300);
outline-offset: 2px;
}
#searchInput::placeholder {
position: relative;
left: -2px;
}
#searchResults {
position: absolute;
margin-top: 8px;
box-shadow: var(--box-shadow-next);
width: 100%;
border-radius: 4px;
background-color: var(--slate-100);
flex-direction: column;
overflow: hidden;
max-height: 320px;
overflow-y: auto;
z-index: 9;
animation: show 125ms forwards;
}
#searchResults > a,
#searchResults > span {
padding: 8px;
background-color: #fff;
font-size: calc(14 / 16 * 1rem);
display: flex;
gap: 8px;
align-items: baseline;
}
#searchResults > a:hover {
background-color: var(--slate-50);
}
#searchResults > a:focus-visible {
outline-offset: -1px;
} 
#searchResults > a + a {
border-top: 1px solid var(--slate-100);
}
#searchResults > a > span:first-child {
height: 100%;
align-self: center;
}
#searchResults > a > span:last-child {
display: block;
font-size: calc(12 / 16 * 1rem);
color: var(--slate-500);
border: 1px solid var(--slate-300);
padding: 0px 6px;
border-radius: 24px;
margin-left: auto;
margin-bottom: 4px;
max-width: 120px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
flex-shrink: 0;
position: relative;
top: 2px;
}
#clearButton {
position: absolute;
top: 2px;
right: 2px;
padding: 8px;
background-color: #fff;
border-radius: 4px;
}
#clearButton:hover {
background-color: var(--slate-50);
}.cards_1__container {
padding-top: 60px;
padding-bottom: 70px;
}
.cards_1__section_content {
margin-bottom: 40px;
}
.cards_1__list {
display: flex;
flex-wrap: wrap;
gap: 60px 40px;
}
.cards_1--cards .cards_1__list {
gap: 20px;
}
.cards_1--cards .cards_1__list--2-columns {
gap: 20px;
}
.cards_1__section_title + .cards_1__list {
padding-top: 16px;
}
.cards_1__item {
flex-basis: 286px;
}
.cards_1--cards .cards_1__item {
flex-basis: 300px;
}
.cards_1__list--2-columns .cards_1__item {
flex-basis: 450px;
}
.cards_1--cards .cards_1__item {
flex-basis: 460px;
background: #fff;
padding: 40px;
padding-bottom: 48px;
border-radius: 48px;
box-shadow: var(--box-shadow-warm);
}
.cards_1--cards .cards_1__list--3-columns .cards_1__item {
flex-basis: 300px;
}
.cards_1__image img {
height: auto;
}
.cards_1__icon {
height: 48px;
width: 48px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.cards_1__title {
display: block;
font-size: calc(18 / 16 * 1rem);
font-weight: 600;
margin-top: 10px;
}
.cards_1__content {
margin-top: 8px;
}
.cards_1__content ul,
.cards_1__content ol {
padding-left: 20px;
}
.cards_1__content li {
padding-inline-start: unset;
}
.cards_1 .btn_arrow {
margin-top: 16px;
}
.cards_1__buttons {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 24px;
} [data-type='dark'] .title,
[data-type='dark'] .prose,
[data-type='dark']:not(.cards_1--cards) .cards_1__title {
color: #fff;
}
[data-type='dark'].cards_1--cards .cards_1__item .prose {
color: unset;
}
@media(max-width: 1000px) {
.cards_1__list {
flex-direction: column;
}
.cards_1__item,
.cards_1--cards .cards_1__item,
.cards_1__list--2-columns .cards_1__item {
flex-basis: unset !important;
}
}.cta {
position: fixed;
right: 16px;
bottom: 16px;
z-index: 2;
display: flex;
flex-direction: column;
gap: 8px;
align-items: flex-end;
opacity: 0;
visibility: hidden;
animation: show 250ms 3000ms forwards;
}
.cta__contact {
position: relative;
}
.contact {
display: flex;
align-items: center;
padding: 6px 8px 6px 15px;
box-shadow: var(--box-shadow-warm);
border-radius: 6px;
background-color: #fff;
z-index: 1;
}
.contact > span {
display: flex;
align-items: center;
color: var(--slate-900);
}
.contact > span::after {
content: '';
display: block;
width: 1px;
height: 32px;
background-color: var(--slate-200);
margin-left: 16px;
margin-right: 8px;
}
.contact > svg {
color: var(--slate-600);
transition: 250ms;
}
.contact.focus > svg {
rotate: 180deg;
transition: 125ms;
}
.contact__btns {
position: absolute;
right: 0;
bottom: 48px;
display: flex;
flex-wrap: wrap;
justify-content: end;
gap: 8px;
visibility: hidden;
z-index: 1;
}
.contact__btn {
visibility: hidden;
opacity: 0;
transform: translateY(0);
transition: 250ms;
width: max-content;
}
.contact__btn_inner {
display: flex;
align-items: center;
gap: 6px;
padding: 10px 16px;
box-shadow: var(--box-shadow-warm);
background-color: #fff;
border-radius: 6px;
color: var(--slate-900);
transition: 250ms;
}
.contact__btn_inner svg {
flex-shrink: 0;
}
@media(hover: hover) {
.contact__btn:hover .contact__btn_inner {
transform: translateY(-4px);
transition: 125ms;
}
}
.contact.focus + .contact__btns > * {
visibility: visible;
opacity: 1;
transform: translateY(-4px);
transition: 125ms;
}
.contact__btns > *:nth-child(1), .contact.focus + .contact__btns > *:nth-child(1) {
transition-delay: 50ms;
}
.contact__btns > *:nth-child(2), .contact.focus + .contact__btns > *:nth-child(2) {
transition-delay: 100ms;
}
.contact__btns > *:nth-child(3), .contact.focus + .contact__btns > *:nth-child(3) {
transition-delay: 150ms;
}
.contact__btns > *:nth-child(4), .contact.focus + .contact__btns > *:nth-child(4) {
transition-delay: 200ms;
}
.contact__btns > *:nth-child(5), .contact.focus + .contact__btns > *:nth-child(5) {
transition-delay: 250ms;
}
.contact__btns > *:nth-child(6), .contact.focus + .contact__btns > *:nth-child(6) {
transition-delay: 300ms;
}
.contact__btn > svg {
color: var(--slate-600);
}
.cta__buttons {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: end;
}