@import '../assets/fonts/HelveticaNeue/stylesheet.css'; @import '_mixins'; @import '_reset'; $cWhite: #ffffff; $cGold: #d9ba5c; $cGolder: #ba962b; $cGray: #8b8b8b; $cGray2: #9e9e9e; $cBlack: #232323; $cLightGray: #d9d9d9; $fHelveticaNeue: 'Helvetica Neue', sans-serif; $header-height: 77px; @mixin h2($color) { color: $color; font-weight: 500; font-size: 64px; line-height: 120%; letter-spacing: -1.4px; @include respond-below(lg) { font-size: 48px; } @include respond-below(sm) { font-size: 40px; } } @mixin box_title_line($color, $bgColor) { position: relative; &::before { content: attr(box-title); color: $color; font-weight: 700; font-size: 16px; line-height: 1; letter-spacing: -0.34px; position: absolute; left: 0; top: 0; background: $bgColor; z-index: 1; } &::after { content: ''; position: absolute; left: 7px; background: $color; } @include respond-above(lg) { &::before { writing-mode: vertical-rl; padding-top: 24px; transform: rotate(180deg); } &::after { top: 10px; bottom: 0; width: 1px; } } @include respond-below(lg) { &::before { padding-right: 24px; } &::after { top: 7px; right: 0; height: 1px; width: 100%; } } } @mixin box_top_shadow($color) { position: relative; &::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 105px; background: linear-gradient(0deg, $color 0%, rgba(255, 255, 255, 0) 100%); transform: translateY(-100%); z-index: -1; } } //* Global * { font-family: $fHelveticaNeue; } body { &.no-scroll { overflow: hidden; } } p { &:last-child { margin-bottom: 0; } } input[type='checkbox'] { &:not([name='gdprPrefItem']) { appearance: none !important; position: relative; display: inline-block; width: 19px; min-width: 19px; height: 19px; border: 1px solid $cGold; border-radius: 6px; transition: all 250ms ease-in-out; overflow: hidden; cursor: pointer; &::before { content: ''; position: absolute; top: -7px; left: 20px; width: 11px; height: 2px; background: $cWhite; transform: rotate(-50deg); transition: all 250ms linear; } &::after { content: ''; position: absolute; top: -5px; left: -12px; width: 6px; height: 2px; background: $cWhite; transform: rotate(50deg); transition: all 250ms linear; } &:checked { background: $cGold; &::before { top: 8px; left: 5px; } &::after { top: 10px; left: 3px; } } } } .container { width: 100%; margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px; @each $breakpoint, $max in $container-max-widths { @if $breakpoint == sm { @media (min-width: 576px) { max-width: $max; } } @else if $breakpoint == md { @media (min-width: 768px) { max-width: $max; } } @else if $breakpoint == lg { @media (min-width: 992px) { max-width: $max; } } @else if $breakpoint == xl { @media (min-width: 1200px) { max-width: $max; } } @else if $breakpoint == xxl { @media (min-width: 1370px) { max-width: $max; } } } } .btn_1 { color: $cBlack !important; font-size: 16px; font-weight: 500; line-height: 1; display: inline-block; padding: 15px 24px 13px; border-radius: 100px; background: rgba($cGray, 0.1); text-wrap-mode: nowrap; transition: all 250ms ease-in-out; &:hover { color: $cWhite !important; background: $cBlack; } } .btn_2 { color: $cWhite !important; font-size: 16px; font-weight: 500; line-height: 1; display: inline-block; padding: 15px 24px 13px; border-radius: 100px; background: $cGold; text-wrap-mode: nowrap; transition: all 250ms ease-in-out; &:hover { background: $cGolder; } } .btn_3 { color: $cGold !important; font-size: 16px; font-weight: 500; line-height: 1; display: inline-block; padding: 15px 24px 13px; border-radius: 100px; background: rgba($cGold, 0.1); text-wrap-mode: nowrap; transition: all 250ms ease-in-out; &:hover { color: $cWhite !important; background: $cGold; } } .btn_4 { color: $cGold !important; font-size: 16px; font-weight: 500; line-height: 1; display: inline-block; padding: 15px 24px 13px; border-radius: 100px; background: $cWhite; text-wrap-mode: nowrap; transition: all 250ms ease-in-out; &:hover { color: $cWhite !important; background: $cGold; } } .btn_5 { color: $cGold !important; font-size: 16px; font-weight: 500; line-height: 1; text-wrap-mode: nowrap; transition: all 250ms ease-in-out; &:hover { text-decoration: underline; } } #breadcrumbs_box { margin-bottom: 24px; #breadcrumbs { display: flex; flex-direction: row; align-items: center; gap: 10px; color: rgba(30, 30, 30, 0.502); font-weight: 500; font-size: 16px; line-height: 1; letter-spacing: -0.32px; ul { margin: 0; padding: 0; display: flex; flex-direction: row; align-items: center; gap: 10px; li { a { color: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; text-decoration: none; } } } } } header#masthead { position: relative; height: $header-height; transition: all 250ms ease-in-out; transition-delay: 600ms; &.active { background: $cBlack; transition-delay: 0ms; } .row { display: flex; flex-direction: row; align-items: center; justify-content: space-between; column-gap: 40px; height: $header-height; .site-branding { img { width: 246px; min-width: 246px; transition: all 250ms ease-in-out; transition-delay: 600ms; @include respond-between(lg, xl) { width: 200px; min-width: 200px; } @include respond-below(sm) { width: 200px; min-width: 200px; } } &.active { img { filter: brightness(0) invert(1); transition-delay: 0ms; } } } nav#site-navigation { @include respond-below(lg) { position: absolute; top: calc($header-height - 1px); left: 0; right: 0; background: $cBlack; z-index: 10; padding-top: 90px; padding-bottom: 90px; height: 100svh; max-height: calc(100svh - $header-height); } &.active { } ul#primary-menu { gap: 50px; justify-content: center; @include respond-below(xl) { gap: 30px; } @include respond-below(lg) { display: flex; flex-direction: column; gap: 40px; } li { position: relative; &.current-menu-item { display: flex; flex-direction: row; align-items: center; gap: 7px; @include respond-above(lg) { &::before { content: ''; position: relative; display: inline-block; width: 5px; height: 5px; border-radius: 100%; background: $cGold; margin-bottom: 2px; } } a { color: $cGold; @include respond-below(lg) { width: 100%; } } } a { color: $cBlack; font-size: 16px; font-weight: 500; line-height: 1; @include respond-below(lg) { color: $cWhite; font-weight: 500; font-size: 40px; line-height: 1; letter-spacing: -0.8px; text-align: center; } } @include respond-above(lg) { &#menu-item-18, &#menu-item-19 { display: none; } } @include respond-below(lg) { &#menu-item-19 { text-align: center; a { color: $cBlack; font-size: 16px; font-weight: 500; line-height: 1; display: inline-block; padding: 11px 24px 12px; border-radius: 100px; background: $cWhite; text-wrap-mode: nowrap; transition: all 250ms ease-in-out; &:hover { color: $cWhite !important; background: $cGold; } } } } } } @include respond-below(lg) { display: none; } } .main-navigation-secondary { padding: 0; margin: 0; list-style: none; display: flex; flex-direction: row; align-items: center; gap: 16px; li { &:nth-child(1) { a { @extend .btn_1; } } &:nth-child(2) { a { @extend .btn_2; } } } @include respond-below(lg) { display: none; } } #nav-menu-toggle { color: $cWhite; font-size: 14px; font-weight: 500; line-height: 1; display: inline-flex; align-items: center; padding: 9px 18px; border-radius: 100px; border: none; background: $cBlack; text-wrap-mode: nowrap; transition: all 250ms ease-in-out; transition-delay: 600ms; &.active { padding: 12px 14px 12px 12px; background: rgba($cWhite, 0.2); transition-delay: 0ms; .text { padding-left: 0; width: 0; opacity: 0; } .icon { width: 11px; height: 11px; &::before { width: 13px; top: 50%; rotate: 45deg; } &::after { width: 13px; top: 50%; rotate: -45deg; } } } .text { display: inline-block; height: 12px; padding-left: 8px; margin-top: -1px; width: 45px; opacity: 1; overflow: hidden; transition: all 250ms ease-in-out; transition-delay: 600ms; } .icon { position: relative; display: inline-block; width: 13px; height: 8px; transition-delay: 600ms; &::before { content: ''; position: absolute; top: 0; left: 0; height: 2px; width: 11px; background: $cWhite; transition: all 250ms ease-in-out; transition-delay: 600ms; } &::after { content: ''; position: absolute; top: calc(100% - 2px); left: 0; height: 2px; width: 11px; background: $cWhite; transition: all 250ms ease-in-out; transition-delay: 600ms; } } @include respond-above(lg) { display: none; } } } } footer#site-footer { background: $cBlack; .footer-1 { padding-top: 140px; padding-bottom: 100px; border-bottom: 1px solid #6a6a6a; .row { display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 80px; .col { &-1 { .box-contact { padding: 48px; background: #faf8f2; border-radius: 10px; .box-title { margin-bottom: 24px; h2 { color: $cBlack; font-weight: 400; font-size: 36px; line-height: 1.2; letter-spacing: -0.68px; strong { color: $cGold; font-weight: inherit; } } } .box-text { margin-bottom: 40px; p { color: $cBlack; font-weight: 400; font-size: 16px; line-height: 1.5; letter-spacing: -0.32px; } } form { .form-fields { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; row-gap: 16px; grid-template-areas: 'i1 i2' 'i3 i4' 'i5 i5' 'i6 i6'; .c-item { &-1 { grid-area: i1; } &-2 { grid-area: i2; } &-3 { grid-area: i3; } &-4 { grid-area: i4; } &-5 { grid-area: i5; margin-bottom: 26px; } &-6 { grid-area: i6; .c-row { display: flex; flex-direction: row; justify-content: space-between; .c-col { &-1 { max-width: 290px; span { margin: 0px; } label { display: flex; flex-direction: row; gap: 16px; span { color: $cBlack; font-weight: 400; font-size: 16px; line-height: 1.5; letter-spacing: -0.32px; a { color: inherit; text-decoration: underline; } } } } &-2 { display: flex; flex-direction: row-reverse; input { @extend .btn_2; border: none; cursor: pointer; width: 260px; } } } } } } } label { position: relative; display: block; > span { display: block; } } input { &[type='tel'], &[type='text'], &[type='email'] { height: 51px; width: 100%; background: #fff; border: none !important; border-radius: 10px; box-shadow: none !important; outline: none !important; padding: 15px 19px 5px; transition: all 250ms ease-in-out; color: $cBlack; font-weight: 400; font-size: 16px; line-height: 1; letter-spacing: -0.32px; margin: 0; &:focus, &:not(:placeholder-shown) { + p { top: 8px; color: #9e9e9e !important; padding: 3px 10px; font-size: 9px; } } } } textarea { height: 170px; width: 100%; background: #fff; border: none !important; border-radius: 10px; box-shadow: none !important; outline: none !important; padding: 20px 19px 5px; transition: all 250ms ease-in-out; color: $cBlack; font-weight: 400; font-size: 16px; line-height: 1; letter-spacing: -0.32px; margin: 0; resize: none; &:focus, &:not(:placeholder-shown) { + p { top: 8px; color: #9e9e9e !important; padding: 3px 10px; font-size: 9px; } } } p { color: $cBlack; font-weight: 400; font-size: 16px; line-height: 1; letter-spacing: -0.32px; margin: 0; position: absolute; top: 14px; left: 9px; padding: 4px 10px; transition: all 250ms ease-in-out; @include respond-below(lg) { font-size: 13px; top: 14px; } } .wpcf7-not-valid-tip { font-size: 12px; padding: 3px; } } } } &-2 { width: 100%; max-width: 400px; .box-logo { margin-bottom: 24px; img { width: 100%; max-width: 205px; } } .box-text { p { color: $cGray2; font-weight: 400; font-size: 20px; line-height: 1.5; letter-spacing: -0.38px; margin-bottom: 24px; } ol { padding: 0; margin: 0; counter-reset: custom-counter; li { position: relative; color: $cWhite; font-weight: 400; font-size: 24px; line-height: 1.4; letter-spacing: -0.48px; padding-left: 25px; counter-increment: custom-counter; &::before { content: counter(custom-counter) '. '; position: absolute; top: 0; left: 0; color: $cWhite; font-weight: 400; font-size: 24px; line-height: 1.4; letter-spacing: -0.48px; } } } } .box-info { p { color: $cGray2; font-weight: 400; font-size: 20px; line-height: 1.5; letter-spacing: -0.38px; margin-bottom: 16px; } } } } } } .footer-2 { padding-top: 32px; padding-bottom: 32px; .row { display: flex; flex-direction: row; @include respond-below(lg) { flex-direction: column; row-gap: 24px; } .col { &-1 { flex-basis: 40%; display: flex; flex-direction: column; justify-content: space-between; row-gap: 20px; p { color: $cWhite; font-weight: 400; font-size: 16px; line-height: 1; letter-spacing: -0.32px; margin: 0; } a { color: $cGray2; font-weight: 400; font-size: 16px; line-height: 1; letter-spacing: -0.32px; @include respond-below(lg) { display: none; } } } &-2 { flex-basis: 60%; ol { display: flex; flex-direction: row; justify-content: space-between; column-gap: 30px; margin: 0; padding: 0; @include respond-below(lg) { flex-direction: column; row-gap: 24px; } li { p { color: $cGray2; margin: 0; font-weight: 400; font-size: 16px; line-height: 1.5; letter-spacing: -0.32px; } } } } &-3 { @include respond-above(lg) { display: none; } a { color: $cGray2; font-weight: 400; font-size: 16px; line-height: 1; letter-spacing: -0.32px; } } } } } } article.article-card { .article-card--wrapper { .article-card--image { margin-bottom: 24px; a { img { width: 100%; height: 286px; object-fit: cover; @include respond-below(md) { height: 200px; } } } } .article-card--content { .article-card--title { margin-bottom: 24px; h3 { color: $cBlack; font-weight: 400; font-size: 24px; line-height: 1.2; letter-spacing: -0.45px; @include respond-below(md) { font-size: 20px; } @include respond-below(sm) { font-size: 18px; } a { color: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: inherit; text-decoration: inherit; } } } > a { } } } } .c-tabs { .c-tabs--nav { padding: 0; margin: 0 0 64px 0; border-bottom: 1px solid #6a6a6a66; display: flex; flex-direction: row; column-gap: 80px; li { color: #9e9e9e; font-weight: 400; font-size: 16px; line-height: 120%; letter-spacing: -0.32px; display: inline-block; padding-bottom: 15px; margin-bottom: -1px; cursor: pointer; transition: all 250ms ease-in-out; &.active { color: $cGold; border-bottom: 1px solid $cGold; } } } .c-tabs--content { .c-tab--item { display: none; } } } .c-acc { .c-acc--item { .c-acc--head { cursor: pointer; } } } .c-acc-advanced { .c-acc--item { .c-acc--head { cursor: pointer; } } } //* END Global //* Home body.page-id-72 { main { margin-top: 60px; .box-1 { @include respond-below(md) { overflow: hidden; } .row { position: relative; display: flex; flex-direction: row; justify-content: space-between; align-items: center; column-gap: 40px; @include respond-below(sm) { min-height: 500px; } .col { &-1 { max-width: 680px; @include respond-below(xl) { max-width: 500px; } @include respond-below(lg) { max-width: 330px; padding-bottom: 60px; } } &-2 { // position: relative; // z-index: 1; // position: absolute; // top: 0; // right: 0; // z-index: 1; // @include respond-below(xxl) { // max-width: 430px; // } // @include respond-below(lg) { // max-width: 360px; // } // @include respond-below(md) { // left: 0; // right: auto; // transform: translateX(100%); // max-width: 400px; // } // @include respond-below(sm) { // max-width: unset; // width: 100svw; // inset: 0; // img { // max-width: unset; // width: 100%; // } // } } } } .box-head { margin-bottom: 24px; h2 { @include h2($cBlack); strong { color: $cGold; font-weight: inherit; } } } .box-text { margin-bottom: 24px; max-width: 670px; p { color: $cBlack; font-weight: 400; font-size: 20px; line-height: 150%; letter-spacing: -0.38px; } } .box-quote { padding-left: 24px; margin-top: 64px; border-left: 1px solid $cBlack; max-width: 550px; p { color: $cBlack; font-weight: 400; font-size: 14px; line-height: 150%; letter-spacing: -0.27px; margin-bottom: 16px; } @include respond-below(lg) { display: none; } } } .box-2 { @include box_top_shadow($cLightGray); margin-top: 36px; padding-top: 160px; padding-bottom: 136px; background: $cBlack; @include respond-below(lg) { padding-top: 100px; padding-bottom: 100px; } .row { display: flex; flex-direction: row; justify-content: space-between; column-gap: 100px; .col { &-1 { @include box_title_line(#6a6a6a, $cBlack); padding-left: 100px; padding-top: 38px; padding-bottom: 64px; max-width: 650px; .box-head { h2 { color: $cWhite; font-weight: 400; font-size: 36px; line-height: 1.2; letter-spacing: -0.68px; margin-bottom: 64px; } } .box-list { padding: 0; margin: 0; .box-list__item { display: flex; flex-direction: row; column-gap: 40px; &:not(:last-child) { margin-bottom: 64px; } .box-list__image { width: 75px; min-width: 75px; height: 75px; display: flex; align-items: center; justify-content: center; background: rgba($cGold, 0.32); border-radius: 29px; img { } } .box-list__data { h3 { color: $cWhite; font-weight: 400; font-size: 28px; line-height: 1.2; letter-spacing: -0.54px; margin-bottom: 16px; } p { color: $cGray2; font-weight: 400; font-size: 16px; line-height: 1.5; letter-spacing: -0.32px; } a { color: $cGray2; font-weight: 400; font-size: 16px; line-height: 1.5; letter-spacing: -0.32px; text-decoration: underline; } } } } } &-2 { img { width: 100%; max-width: 450px; } } } } } .box-3 { padding-top: 140px; padding-bottom: 140px; background: #fafafa; .row { display: flex; flex-direction: row; align-items: flex-end; column-gap: 64px; .col { &-1 { @include box_title_line(#d4d4d4, #fafafa); padding-left: 64px; img { width: 100%; max-width: 530px; } } &-2 { width: 100%; max-width: 600px; .mini_title { margin-bottom: 40px; p { color: $cBlack; font-weight: 400; font-size: 20px; line-height: 1.5; letter-spacing: -0.38px; } } ul { padding: 0; margin: 0 0 80px 0; li { position: relative; padding-left: 33px; &:not(:last-child) { margin-bottom: 40px; } &::before { content: ''; position: absolute; width: 9px; min-width: 9px; height: 9px; left: 0; top: 15px; border-radius: 100%; background: $cGold; } p { color: $cBlack; font-weight: 400; font-size: 36px; line-height: 1.2; letter-spacing: -0.68px; margin-bottom: 0; } } } .info_box { display: flex; flex-direction: row; gap: 20px; align-items: center; justify-content: center; padding: 24px; border-radius: 20px; background: rgba($cGold, 0.1); p { color: $cBlack; font-weight: 400; font-size: 16px; line-height: 1.5; letter-spacing: -0.32px; margin-bottom: 0; strong { color: $cGold; } } a { } } } } } } .box-4 { padding-top: 180px; padding-bottom: 140px; .row { @include box_title_line(#d4d4d4, $cWhite); padding-left: 100px; ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 64px; padding: 0; margin: 0 0 60px 0; @include respond-below(lg) { grid-template-columns: 1fr 1fr; } @include respond-below(md) { grid-template-columns: 1fr; } li { position: relative; padding-top: 16px; &::before { content: ''; position: absolute; width: 71px; height: 2px; left: 0; top: 0; background: $cGold; } p { color: $cBlack; font-weight: 400; font-size: 36px; line-height: 1.2; letter-spacing: -0.68px; } } } .info_box { padding: 24px; border-radius: 20px; background: rgba($cGold, 0.1); display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 20px; p { margin: 0; strong { color: $cGold; } } } } } .box-5 { position: relative; background: #faf8f2; .row { display: flex; @include respond-above(lg) { flex-direction: row; column-gap: 100px; padding: 160px 0 130px; } @include respond-below(lg) { flex-direction: column-reverse; padding: 0 0 80px; row-gap: 80px; } .col { &-1 { @include box_title_line(#d9ba5cbf, #faf8f2); width: 100%; @include respond-above(lg) { padding-left: 100px; max-width: 700px; } @include respond-below(lg) { padding-top: 64px; } .box-text { @include respond-above(lg) { margin-bottom: 120px; } @include respond-below(lg) { margin-bottom: 70px; } p { color: $cBlack; font-weight: 400; font-size: 28px; line-height: 1.5; letter-spacing: -0.53px; strong { color: $cGold; font-weight: inherit; } } } ul { padding: 0; margin: 0; display: flex; @include respond-above(lg) { flex-direction: row; align-items: center; column-gap: 40px; } @include respond-below(lg) { flex-direction: column; align-items: flex-start; row-gap: 32px; } } } &-2 { @include respond-above(lg) { position: absolute; right: 0; top: 0; bottom: 0; } @include respond-below(lg) { height: 400px; } img { height: 100%; object-fit: cover; object-position: center; @include respond-above(xxl) { width: 673px; } @include respond-between(xl, xxl) { width: 530px; } @include respond-between(lg, xl) { width: 350px; } @include respond-below(lg) { width: 100%; } } } } } } .box-6 { background: $cBlack; padding: 200px 0; .row { @include box_title_line(#6a6a6a, $cBlack); padding-left: 100px; .col { &-1 { margin-bottom: 100px; h2 { color: $cWhite; font-weight: 400; font-size: 36px; line-height: 1.2; letter-spacing: -0.68px; } } &-2 { .box-list { padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; .box-list__item { display: flex; flex-direction: row; column-gap: 40px; .box-list__image { width: 75px; min-width: 75px; height: 75px; display: flex; align-items: center; justify-content: center; background: rgba($cGold, 0.32); border-radius: 29px; img { } } .box-list__data { h3 { color: $cWhite; font-weight: 400; font-size: 28px; line-height: 1.2; letter-spacing: -0.54px; margin-bottom: 16px; } p { color: $cGray2; font-weight: 400; font-size: 16px; line-height: 1.5; letter-spacing: -0.32px; } a { color: $cGray2; font-weight: 400; font-size: 16px; line-height: 1.5; letter-spacing: -0.32px; text-decoration: underline; } } } } } } } } .box-7 { @include respond-above(lg) { padding-top: 164px; padding-bottom: 200px; } @include respond-below(lg) { padding-top: 100px; padding-bottom: 100px; } .row { @include box_title_line(#d4d4d4, $cWhite); @include respond-above(lg) { padding-left: 64px; } @include respond-below(lg) { padding-top: 64px; } .col { &-1 { .box-title { margin-bottom: 40px; h2 { color: $cBlack; font-weight: 400; font-size: 48px; line-height: 1.5; letter-spacing: -0.96px; } } } &-2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; @include respond-between(sm, lg) { padding-top: 64px; grid-template-columns: repeat(2, 1fr); .article-card { &:nth-child(3) { display: none; } } } @include respond-below(sm) { grid-template-columns: 1fr; } } } } } } } //* Oferta body.page-id-91 { main { .box-1 { position: relative; height: 740px; display: flex; align-items: flex-end; .box-bg { position: absolute; inset: 0; &::before { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); } img { height: 100%; width: 100%; object-fit: cover; object-position: top center; } } .row { position: relative; margin-bottom: 100px; .col-1 { #breadcrumbs_box { margin-bottom: 24px; #breadcrumbs { color: rgba($cWhite, 0.7); } } .box-title { padding-bottom: 40px; margin-bottom: 40px; border-bottom: 1px solid rgba($cWhite, 0.5); h2 { color: $cWhite; font-weight: 500; font-size: 48px; line-height: 1.2; letter-spacing: -0.96px; } } .box-info { display: flex; justify-content: space-between; align-items: center; gap: 40px; p { color: $cWhite; font-weight: 400; font-size: 20px; line-height: 1.5; letter-spacing: -0.38px; margin-bottom: 0; max-width: 520px; } } } } } .box-2 { @include box_top_shadow($cLightGray); background: $cWhite; .row { &-2 { padding-top: 130px; padding-bottom: 120px; @include respond-below(lg) { padding-top: 100px; padding-bottom: 100px; } .c-tabs { .c-tabs--nav { @include respond-below(md) { flex-direction: column; border-left: 1px solid #d4d4d4; border-bottom: none; } li { @include respond-below(md) { padding-top: 15px; padding-left: 16px; margin-left: -1px; border-left: 1px solid #6a6a6a; &.active { border-bottom: none; border-left-color: $cGold; } } } } .c-tabs--content { .c-tab--item { } } } .t-row { .t-col { &-1 { width: 60%; } &-2 { width: 40%; } @include respond-below(lg) { width: 100%; } } &-1 { margin-bottom: 100px; @include respond-below(lg) { margin-bottom: 40px; } .t-col { &-1 { width: 65%; .t-head { margin-bottom: 24px; h2 { color: $cBlack; font-weight: 400; font-size: 36px; line-height: 1.2; letter-spacing: -0.72px; @include respond-below(md) { font-size: 32px; } } } .t-text { p { color: $cBlack; font-weight: 400; font-size: 20px; line-height: 1.5; letter-spacing: -0.38px; @include respond-below(md) { font-size: 18px; } } } } } } &-2 { display: flex; flex-direction: row; @include respond-below(lg) { flex-direction: column; row-gap: 40px; } .t-col { &-1 { .c-acc-advanced { .c-acc--item { &:not(:last-child) { border-bottom: 1px solid #6a6a6a66; } } } } &-2 { .c-acc-advanced { .c-acc--item { display: none; } } } } } .c-acc-advanced { padding: 0; margin: 0; @include respond-above(lg) { margin-right: 30px; max-width: 630px; } .c-acc--item { &.active { .c-acc--head { padding-left: 27px; transition-delay: 0ms; .icon { opacity: 1; visibility: visible; transition-delay: 250ms; } span { color: $cGold; transition-delay: 0ms; } } } .c-acc--head { position: relative; transition: all 250ms ease-in-out; cursor: pointer; transition-delay: 250ms; .icon { position: absolute; display: inline-block; width: 12px; height: 12px; top: 50%; left: 0; transform: translateY(-50%); opacity: 0; visibility: hidden; transition: all 250ms ease-in-out; &::before { content: ''; position: absolute; top: 50%; left: 0; width: 12px; height: 1px; background: $cGold; transform: translateY(-50%); } &::after { content: ''; position: absolute; top: 50%; left: 50%; width: 1px; height: 12px; background: $cGold; transform: translateY(-50%) translateX(-50%); } } span { display: block; padding: 16px 0; color: $cBlack; font-weight: 400; font-size: 20px; line-height: 1.1; letter-spacing: -0.38px; transition: all 250ms ease-in-out; transition-delay: 250ms; @include respond-above(sm) { font-size: 18px; } } } .c-acc--body { @include respond-above(lg) { padding-left: 48px; border-left: 1px solid $cGold; } @include respond-below(lg) { padding-top: 40px; border-top: 1px solid $cGold; } .tab-description--head { margin-bottom: 24px; h3 { color: $cGold; font-weight: 400; font-size: 24px; line-height: 1.1; letter-spacing: -0.48px; } } .tab-description--text { margin-bottom: 40px; p { color: $cBlack; font-weight: 400; font-size: 16px; line-height: 1.5; letter-spacing: -0.32px; &:last-child { margin-bottom: 0; } } } } } } } } } } .box-3 { position: relative; background: #1b1b1b; padding-top: 100px; padding-bottom: 100px; .row { display: flex; @include respond-above(lg) { flex-direction: row; column-gap: 100px; padding: 80px 0 50px; } @include respond-below(lg) { flex-direction: column-reverse; padding: 0 0 80px; row-gap: 80px; } .col { &-1 { @include box_title_line(#6a6a6a, #1b1b1b); width: 100%; max-width: 670px; @include respond-above(lg) { padding-left: 100px; max-width: 700px; } @include respond-below(lg) { padding-top: 64px; } .box-head { margin-bottom: 24px; h2 { color: $cWhite; font-weight: 400; font-size: 36px; line-height: 1.2; letter-spacing: -0.72px; } } .box-text { margin-bottom: 80px; p { color: #9e9e9e; font-weight: 400; font-size: 16px; line-height: 1.5; letter-spacing: -0.32px; } } ul { padding: 0; margin: 0; li { color: $cWhite; font-weight: 400; font-size: 20px; line-height: 1.2; letter-spacing: -0.4px; &:not(:last-child) { margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid #6a6a6a; } } } } &-2 { margin-top: 100px; margin-bottom: 100px; @include respond-above(lg) { position: absolute; left: 60%; top: 0; bottom: 0; } @include respond-below(lg) { height: 400px; } img { height: 100%; object-fit: cover; object-position: left; } } } } } .box-4 { padding-top: 130px; padding-bottom: 160px; @include respond-below(lg) { padding-top: 100px; padding-bottom: 130px; } .row { &-1 { margin-bottom: 64px; h2 { color: $cBlack; font-weight: 400; font-size: 20px; line-height: 1.1; letter-spacing: -0.38px; } } &-2 { .c-acc { padding: 0; margin: 0; .c-acc--item { border-bottom: 1px solid #d4d4d4; &:first-child { border-top: 1px solid #d4d4d4; } &.active { .c-acc--head { .icon { &::after { height: 0; } } } } .c-acc--head { position: relative; padding-top: 24px; padding-bottom: 24px; padding-left: 48px; span { color: $cBlack; font-weight: 400; font-size: 28px; line-height: 1.5; letter-spacing: -0.56px; @include respond-below(lg) { font-size: 20px; } @include respond-below(sm) { font-size: 18px; } } .icon { position: absolute; display: inline-block; width: 24px; height: 24px; top: 50%; left: 0; transform: translateY(-50%); transition: all 250ms ease-in-out; &::before { content: ''; position: absolute; top: 50%; left: 0; width: 24px; height: 1px; background: $cGold; transform: translateY(-50%); } &::after { content: ''; position: absolute; top: 50%; left: 50%; width: 1px; height: 24px; background: $cGold; transform: translateY(-50%) translateX(-50%); transition: all 250ms ease-in-out; } } } .c-acc--body { display: none; .c-acc--body-text { padding-bottom: 24px; p { color: $cBlack; font-weight: 400; font-size: 20px; line-height: 1.5; letter-spacing: -0.38px; @include respond-below(lg) { font-size: 18px; } @include respond-below(sm) { font-size: 16px; } } ul { margin-left: 20px; list-style: initial; li { color: $cBlack; font-weight: 400; font-size: 20px; line-height: 1.5; letter-spacing: -0.38px; @include respond-below(lg) { font-size: 18px; } @include respond-below(sm) { font-size: 16px; } } } } } } } } } } } } //* Zespół body.page-id-134 { &.no-scroll { overflow: hidden; } main { padding-top: 80px; .box-1 { margin-bottom: 80px; .row { .col { &-1 { .box-head { width: 100%; max-width: 600px; h2 { @include h2($cBlack); } } } } } } .box-2 { margin-bottom: 180px; .row { .tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; row-gap: 40px; @include respond-below(md) { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tile { .tile--btn { width: 45px; min-width: 45px; height: 45px; line-height: 0; border-radius: 0; margin: 0; padding: 0; position: absolute; display: flex; align-items: center; justify-content: center; background: $cWhite; img { width: 100%; max-width: fit-content; } @include respond-below(sm) { width: 35px; min-width: 35px; height: 35px; } } .tile--wrapper { .tile--img { position: relative; margin-bottom: 24px; @include respond-below(sm) { margin-bottom: 12px; } > img { width: 100%; } .tile--btn { bottom: 16px; right: 16px; } } .tile--data { h3 { color: $cGold; font-weight: 400; font-size: 28px; line-height: 1.2; letter-spacing: -0.56px; margin-bottom: 16px; @include respond-below(lg) { font-size: 22px; } @include respond-below(sm) { font-size: 18px; padding-bottom: 12px; } } p { color: $cBlack; font-weight: 400; font-size: 16px; line-height: 1.2; letter-spacing: -0.32px; @include respond-below(sm) { font-size: 14px; } } } } .tile-sidebar { position: fixed; top: 0; right: 0; bottom: 0; z-index: 10; display: none; .tile-sidebar-bg { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.35); } .tile-sidebar--wrapper { position: relative; width: 346px; height: 100%; background: $cBlack; overflow: auto; @include respond-below(sm) { width: 100%; max-width: 346px; } .tile--btn { top: 24px; right: 16px; img { transform: rotate(45deg); } } .tile--img { img { width: 100%; } } .tile--data { padding: 24px; .tile--data-head { padding-bottom: 24px; border-bottom: 1px solid #6a6a6a; h3 { color: $cGold; font-weight: 400; font-size: 24px; line-height: 1.2; letter-spacing: -0.45px; margin-bottom: 8px; } p { color: $cWhite; font-weight: 400; font-size: 16px; line-height: 1.2; letter-spacing: -0.32px; } } .tile--data-contact { padding: 14px 0 28px 0; margin: 0; border-bottom: 1px solid #6a6a6a; li { display: flex; flex-direction: column; row-gap: 2px; &:not(:last-child) { margin-bottom: 14px; } label { color: #bebebe; font-weight: 400; font-size: 12px; line-height: 1.2; letter-spacing: -0.24px; } a { color: $cWhite; font-weight: 400; font-size: 14px; line-height: 1.2; letter-spacing: -0.28px; } } } .tile--data-text { padding-top: 14px; p { color: $cWhite; font-weight: 400; line-height: 1.3; letter-spacing: -0.28px; } .text-1 { margin-bottom: 1.5em; p { font-size: 14px; } } .text-2 { p { font-size: 12px; } } } } } } } } } } } } //* Jak pracujemy body.page-id-132 { main { padding-top: 80px; .box-1 { margin-bottom: 130px; .row { display: flex; flex-direction: row; column-gap: 100px; .col { &-1 { width: 100%; max-width: 630px; h2 { color: $cBlack; font-weight: 500; font-size: 48px; line-height: 1.2; letter-spacing: -0.96px; } } &-2 { width: 100%; max-width: 525px; p { color: $cBlack; font-weight: 400; font-size: 28px; line-height: 1.5; letter-spacing: -0.56px; } } } } } .box-2 { padding-top: 140px; background: #1b1b1b; .row { @include box_title_line(#6a6a6a, #1b1b1b); padding-left: 100px; .col { &-1 { .box-title { margin-bottom: 80px; h2 { color: $cWhite; font-weight: 500; font-size: 40px; line-height: 1.5; letter-spacing: -0.8px; } } } &-2 { .tiles { display: flex; flex-direction: row; justify-content: space-between; .tile { flex-basis: calc(100% / 4); &:not(:last-child) { .tile-data { @include respond-above(md) { border-right: 1px solid; border-image-source: linear-gradient( 180deg, $cGold 0%, transparent 100% ); border-image-slice: 1; } } } .tile-img { display: flex; align-items: center; justify-content: center; width: 75px; min-width: 75px; height: 75px; background: rgba(217, 186, 92, 0.32); border-radius: 29px; margin-bottom: 40px; img { } } .tile-data { padding-bottom: 230px; padding-right: 30px; margin-right: 30px; h3 { color: $cWhite; font-weight: 400; font-size: 28px; line-height: 1.2; letter-spacing: -0.56px; margin-bottom: 16px; } p { color: rgba(166, 166, 166, 1); font-weight: 400; font-size: 16px; line-height: 1.5; letter-spacing: -0.32px; } } } } } } } } .box-3 { padding-top: 150px; padding-bottom: 125px; .row { &-1 { @include box_title_line(#d4d4d4, $cWhite); padding-left: 80px; display: flex; flex-direction: row; column-gap: 100px; .col { &-1 { } &-2 { max-width: 640px; .box-mini-title { margin-bottom: 40px; h3 { color: $cBlack; font-weight: 400; font-size: 20px; line-height: 1.2; letter-spacing: -0.38px; } } .box-title { margin-bottom: 64px; h2 { color: $cBlack; font-weight: 400; font-size: 36px; line-height: 1.2; letter-spacing: -0.68px; } } ul { padding: 0; margin: 0; max-width: 570px; li { position: relative; padding-left: 32px; color: $cBlack; font-weight: 400; font-size: 20px; line-height: 1.2; letter-spacing: -0.38px; &:not(:last-child) { padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid #d4d4d4; } &::before { content: ''; position: absolute; left: 0; top: 2px; width: 16px; min-width: 16px; height: 16px; background-image: url('/wp-content/uploads/2025/09/Check.svg'); background-position: center; background-repeat: no-repeat; background-size: contain; } } } } } } &-2 { position: relative; margin-top: -150px; .box-info { max-width: 1120px; padding: 64px; background: rgba(250, 248, 242, 1); margin-left: auto; h3 { color: $cBlack; font-weight: 400; font-size: 20px; line-height: 1.5; letter-spacing: -0.38px; margin-bottom: 26px; } p { color: $cBlack; font-weight: 400; font-size: 36px; line-height: 1.2; letter-spacing: -0.68px; strong { color: $cGold; font-weight: initial; } } } } } } } } //* Blog body.blog { main.blog-page { padding-top: 32px; .box-1 { margin-bottom: 48px; &:hover { .box-bg { img { transform: scale(1.3); transition: all 10s ease-in-out; } } } .box--wrapper { position: relative; height: 568px; padding: 64px; @include respond-below(lg) { height: 460px; } @include respond-below(sm) { padding: 30px; height: 400px; } } .box-bg { position: absolute; inset: 0; filter: brightness(0.7); overflow: hidden; img { width: 100%; object-fit: cover; height: 100%; object-position: center; transition: all 250ms ease-in-out; } } .row { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; row-gap: 40px; height: 100%; .col { &-1 { #breadcrumbs_box { .container { padding: 0; } #breadcrumbs { color: $cWhite; } } } &-2 { .box-head { max-width: 785px; margin-bottom: 32px; h2 { color: $cWhite; font-weight: 500; font-size: 48px; line-height: 1.2; letter-spacing: -0.96px; @include respond-below(lg) { font-size: 40px; } @include respond-below(md) { font-size: 30px; } @include respond-below(sm) { font-size: 24px; } } } } } } } .box-2 { padding-bottom: 150px; @include respond-below(lg) { padding-bottom: 100px; } .posts-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 64px; margin-bottom: 100px; @include respond-below(lg) { grid-template-columns: repeat(2, 1fr); margin-bottom: 30px; gap: 40px; } @include respond-below(sm) { gap: 50px 24px; } } .posts-more { text-align: center; a { display: inline-flex; flex-direction: row; gap: 16px; &:hover { .loader { &::after, &::before { background: $cWhite; } } } .loader { width: 16px; height: 16px; display: inline-block; position: relative; margin-top: -3px; display: none; &::after, &::before { content: ''; box-sizing: border-box; width: 20px; height: 20px; border-radius: 50%; background: $cGold; position: absolute; left: 0; top: 0; animation: animloader 1s linear infinite; transition: all 250ms ease-in-out; } &::after { opacity: 0; animation-delay: 0.5s; } } @keyframes animloader { 0% { transform: scale(0); opacity: 1; } 100% { transform: scale(1); opacity: 0; } } } } } } } //* Single post body.single-post { main.page-single-post { margin-top: 50px; .box-1 { margin-bottom: 120px; @include respond-below(lg) { margin-bottom: 100px; } .row { display: flex; flex-direction: row; @include respond-below(lg) { flex-direction: column-reverse; row-gap: 50px; } .col { &-1 { // flex: 1; width: 100%; @include respond-above(lg) { padding-right: 70px; border-right: 1px solid #d4d4d4; max-width: 800px; } .btn-back-page { &:hover { path { stroke: $cWhite; } } path { transition: all 250ms ease-in-out; } } } &-2 { @include respond-above(lg) { flex-basis: 480px; } @include respond-below(lg) { height: 300px; } .post-thumbnail { @include respond-above(lg) { position: sticky; top: 0px; } @include respond-below(lg) { height: 100%; } } img { width: 100%; @include respond-below(lg) { height: 100%; object-fit: cover; } } } } } } .box-2 { padding-top: 135px; padding-bottom: 160px; background: #fafafa; @include respond-below(lg) { padding-top: 100px; padding-bottom: 100px; } .row { @include box_title_line(#d4d4d4, #fafafa); @include respond-above(lg) { padding-left: 64px; } @include respond-below(lg) { padding-top: 64px; } .box-head { h2 { margin-bottom: 40px; color: $cBlack; font-weight: 400; font-size: 48px; line-height: 1; letter-spacing: -0.96px; @include respond-below(lg) { font-size: 32px; } } } .other-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; @include respond-below(lg) { article.article-card { .article-card--wrapper { .article-card--image { a { img { height: 180px; } } } .article-card--content { .article-card--title { h3 { font-size: 18px; } } } } } } @include respond-between(sm, md) { grid-template-columns: repeat(2, 1fr); article.article-card { &:last-child { display: none; } } } @include respond-below(sm) { grid-template-columns: 1fr; } } } } article.post { .entry-header { margin: 32px 0; h1 { color: $cBlack; font-weight: 500; font-size: 48px; line-height: 1.2; letter-spacing: -0.96px; margin: 0; @include respond-below(xl) { font-size: 42px; } @include respond-below(md) { font-size: 32px; } } } .entry-content { margin-bottom: 50px; pre.wp-block-preformatted { position: relative; color: $cBlack; font-family: $fHelveticaNeue; font-weight: 400; font-size: 24px; line-height: 1.5; letter-spacing: -0.48px; padding: 0 0 50px 0; margin: 0 0 16px 0; background: transparent; &::before { content: ''; position: absolute; bottom: 0; left: 0; width: 100px; height: 1px; background: $cGold; } @include respond-below(md) { font-size: 20px; } } h2 { color: $cBlack; margin-bottom: 32px; font-weight: 400; font-size: 24px; line-height: 1.5; letter-spacing: -0.48px; @include respond-below(md) { font-size: 20px; } } p { color: $cBlack; font-weight: 500; font-size: 18px; line-height: 1.5; letter-spacing: -0.36px; strong { color: $cGold; } @include respond-below(md) { font-size: 16px; } } a { color: $cGold; text-decoration: underline; } ul { padding: 0; margin-left: 0; li { position: relative; padding-left: 40px; color: $cBlack; font-weight: 500; font-size: 18px; line-height: 1.5; letter-spacing: -0.36px; &:not(:last-child) { margin-bottom: 16px; } &::before { content: ''; position: absolute; top: 12px; left: 0; width: 18px; height: 1px; background: $cGold; transform: translateY(-50%); } @include respond-below(md) { font-size: 16px; } } } ol { counter-reset: custom-counter; padding: 0; margin-left: 0; li { position: relative; padding-left: 40px; color: $cBlack; font-weight: 500; font-size: 18px; line-height: 1.5; letter-spacing: -0.36px; &:not(:last-child) { margin-bottom: 16px; } &::before { counter-increment: custom-counter; content: counter(custom-counter) '.'; position: absolute; top: 0; left: 0; color: $cGold; font-weight: 500; font-size: 18px; } } } figure.wp-block-pullquote { padding: 0; margin: 50px 0; blockquote { position: relative; padding: 32px 130px 32px 32px; background-color: #fafafa; &::before { content: ''; position: absolute; top: 32px; right: 32px; width: 32px; height: 28px; background-image: url('/wp-content/uploads/2025/08/quote.svg'); background-position: center; background-size: contain; background-repeat: no-repeat; } @include respond-below(md) { padding: 24px 70px 24px 24px; } p { color: $cBlack; font-weight: 500; font-size: 20px; line-height: 1.5; letter-spacing: -0.38px; margin-bottom: 0; @include respond-below(md) { font-size: 16px; } } cite { position: relative; color: $cBlack; font-weight: 500; font-size: 18px; font-style: normal; line-height: 1; letter-spacing: -0.36px; padding-left: 35px; margin-top: 24px; &::before { content: ''; position: absolute; top: 50%; left: 0; width: 18px; height: 1px; background: $cGold; transform: translateY(-50%); } @include respond-below(md) { font-size: 16px; } } } } } .entry-footer { .entry-meta { display: flex; flex-direction: row; align-items: center; > span { &:not(:last-child) { margin-right: 5px; padding-right: 5px; border-right: 1px solid #8f8f8f; } } * { color: #8f8f8f; font-weight: 400; font-size: 16px; line-height: 1; letter-spacing: -0.32px; } } } } } }