Page "Usługi"

This commit is contained in:
2025-08-28 15:41:26 +02:00
parent 1118b1543c
commit 468136d4d1
5 changed files with 1050 additions and 1 deletions

View File

@@ -483,6 +483,39 @@ article.article-card .article-card--wrapper .article-card--content .article-card
letter-spacing: inherit;
text-decoration: inherit;
}
.c-tabs .c-tabs--nav {
padding: 0;
margin: 0 0 64px 0;
border-bottom: 1px solid #6a6a6a;
display: flex;
flex-direction: row;
-moz-column-gap: 80px;
column-gap: 80px;
}
.c-tabs .c-tabs--nav 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;
}
.c-tabs .c-tabs--nav li.active {
color: #ffffff;
border-bottom: 1px solid #d9ba5c;
}
.c-tabs .c-tabs--content .c-tab--item {
display: none;
}
.c-acc .c-acc--item .c-acc--head {
cursor: pointer;
}
body.page-id-25 main {
margin-top: 60px;
}
@@ -1370,4 +1403,353 @@ body.page-id-47 main .box-2 .row .tiles .tile .tile-sidebar .tile-sidebar--wrapp
}
body.page-id-47 main .box-2 .row .tiles .tile .tile-sidebar .tile-sidebar--wrapper .tile--data .tile--data-text .text-2 p {
font-size: 12px;
}
body.page-id-54 main {
padding-top: 80px;
}
body.page-id-54 main .box-1 {
padding-bottom: 100px;
}
body.page-id-54 main .box-1 .row .col-1 .box-head h2 {
color: #232323;
font-weight: 500;
font-size: 48px;
line-height: 1.2;
letter-spacing: -0.96px;
margin-bottom: 24px;
}
body.page-id-54 main .box-1 .row .col-1 .box-head h2 strong {
color: #d9ba5c;
font-weight: 500;
}
body.page-id-54 main .box-1 .row .col-1 .box-text {
margin-bottom: 32px;
}
body.page-id-54 main .box-1 .row .col-1 .box-text p {
color: #232323;
font-weight: 400;
font-size: 20px;
line-height: 1.5;
letter-spacing: -0.38px;
}
body.page-id-54 main .box-2 {
position: relative;
background: #232323;
}
body.page-id-54 main .box-2::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 105px;
background: linear-gradient(0deg, #d9d9d9 0%, rgba(255, 255, 255, 0) 100%);
transform: translateY(-100%);
z-index: -1;
}
body.page-id-54 main .box-2 .row-1 img {
width: 100%;
max-width: 1920px;
height: 250px;
margin-left: auto;
margin-right: auto;
-o-object-fit: cover;
object-fit: cover;
}
body.page-id-54 main .box-2 .row-2 {
padding-top: 130px;
padding-bottom: 120px;
}
body.page-id-54 main .box-2 .row-2 .t-row-1 {
margin-bottom: 100px;
}
body.page-id-54 main .box-2 .row-2 .t-row-1 .t-col-1 .t-head {
margin-bottom: 24px;
}
body.page-id-54 main .box-2 .row-2 .t-row-1 .t-col-1 .t-head h2 {
color: #ffffff;
font-weight: 400;
font-size: 36px;
line-height: 1.2;
letter-spacing: -0.72px;
}
body.page-id-54 main .box-2 .row-2 .t-row-1 .t-col-1 .t-text p {
color: #ffffff;
font-weight: 400;
font-size: 20px;
line-height: 1.5;
letter-spacing: -0.38px;
}
body.page-id-54 main .box-2 .row-2 .t-row-2 {
display: flex;
flex-direction: row;
}
body.page-id-54 main .box-2 .row-2 .t-row .t-col-1 {
width: 60%;
}
body.page-id-54 main .box-2 .row-2 .t-row .t-col-2 {
width: 40%;
}
body.page-id-54 main .box-2 .row-2 .t-row .tab-description {
padding-left: 48px;
border-left: 1px solid #d9ba5c;
}
body.page-id-54 main .box-2 .row-2 .t-row .tab-description .tab-description--head {
margin-bottom: 24px;
}
body.page-id-54 main .box-2 .row-2 .t-row .tab-description .tab-description--head h3 {
color: #d9ba5c;
font-weight: 400;
font-size: 24px;
line-height: 1.1;
letter-spacing: -0.48px;
}
body.page-id-54 main .box-2 .row-2 .t-row .tab-description .tab-description--text {
margin-bottom: 40px;
}
body.page-id-54 main .box-2 .row-2 .t-row .tab-description .tab-description--text p {
color: #ffffff;
font-weight: 400;
font-size: 16px;
line-height: 1.5;
letter-spacing: -0.32px;
}
body.page-id-54 main .box-2 .row-2 .t-row .tab-description .tab-description--text p:last-child {
margin-bottom: 0;
}
body.page-id-54 main .box-2 .row-2 .t-row .c-acc {
padding: 0;
margin: 0;
max-width: 630px;
margin-right: 30px;
}
body.page-id-54 main .box-2 .row-2 .t-row .c-acc .c-acc--item:not(:last-child) {
border-bottom: 1px solid #6a6a6a;
}
body.page-id-54 main .box-2 .row-2 .t-row .c-acc .c-acc--item.active .c-acc--head {
padding-left: 27px;
transition-delay: 0ms;
}
body.page-id-54 main .box-2 .row-2 .t-row .c-acc .c-acc--item.active .c-acc--head .icon {
opacity: 1;
visibility: visible;
transition-delay: 250ms;
}
body.page-id-54 main .box-2 .row-2 .t-row .c-acc .c-acc--item.active .c-acc--head span {
color: #d9ba5c;
transition-delay: 0ms;
}
body.page-id-54 main .box-2 .row-2 .t-row .c-acc .c-acc--item .c-acc--head {
position: relative;
transition: all 250ms ease-in-out;
cursor: pointer;
transition-delay: 250ms;
}
body.page-id-54 main .box-2 .row-2 .t-row .c-acc .c-acc--item .c-acc--head .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;
}
body.page-id-54 main .box-2 .row-2 .t-row .c-acc .c-acc--item .c-acc--head .icon::before {
content: "";
position: absolute;
top: 50%;
left: 0;
width: 12px;
height: 1px;
background: #d9ba5c;
transform: translateY(-50%);
}
body.page-id-54 main .box-2 .row-2 .t-row .c-acc .c-acc--item .c-acc--head .icon::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 1px;
height: 12px;
background: #d9ba5c;
transform: translateY(-50%) translateX(-50%);
}
body.page-id-54 main .box-2 .row-2 .t-row .c-acc .c-acc--item .c-acc--head span {
display: block;
padding: 16px 0;
color: #ffffff;
font-weight: 400;
font-size: 20px;
line-height: 1.1;
letter-spacing: -0.38px;
transition: all 250ms ease-in-out;
transition-delay: 250ms;
}
body.page-id-54 main .box-2 .row-2 .t-row .c-acc .c-acc--item .c-acc--body {
display: none;
}
body.page-id-54 main .box-2 .row-2 .t-row .c-acc .c-acc--item .c-acc--body .c-acc--body-text {
padding-bottom: 16px;
}
body.page-id-54 main .box-2 .row-2 .t-row .c-acc .c-acc--item .c-acc--body .c-acc--body-text p {
color: #ffffff;
font-weight: 400;
font-size: 16px;
line-height: 1.5;
letter-spacing: -0.32px;
}
body.page-id-54 main .box-3 {
position: relative;
background: #fafafa;
}
body.page-id-54 main .box-3 .row {
display: flex;
flex-direction: row;
-moz-column-gap: 110px;
column-gap: 110px;
padding: 140px 0;
}
body.page-id-54 main .box-3 .row .col-1 {
position: absolute;
left: 0;
top: 0;
bottom: 0;
}
body.page-id-54 main .box-3 .row .col-1 img {
height: 100%;
width: 673px;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
}
body.page-id-54 main .box-3 .row .col-2 {
width: 100%;
max-width: 569px;
margin-left: auto;
}
body.page-id-54 main .box-3 .row .col-2 > p {
color: #232323;
font-weight: 400;
font-size: 20px;
line-height: 1.1;
letter-spacing: -0.38px;
}
body.page-id-54 main .box-3 .row .col-2 .box-text {
margin-bottom: 95px;
}
body.page-id-54 main .box-3 .row .col-2 .box-text p {
color: #232323;
font-weight: 400;
font-size: 28px;
line-height: 1.5;
letter-spacing: -0.56px;
}
body.page-id-54 main .box-3 .row .col-2 .box-text p strong {
color: #d9ba5c;
font-weight: 400;
}
body.page-id-54 main .box-3 .row .col-2 ul {
padding: 0;
margin: 0;
}
body.page-id-54 main .box-3 .row .col-2 ul li {
padding-top: 16px;
padding-bottom: 16px;
color: #232323;
font-weight: 400;
font-size: 20px;
line-height: 1.1;
letter-spacing: -0.38px;
}
body.page-id-54 main .box-3 .row .col-2 ul li:not(:last-child) {
border-bottom: 1px solid #d4d4d4;
}
body.page-id-54 main .box-4 {
padding-top: 130px;
padding-bottom: 160px;
}
body.page-id-54 main .box-4 .row-1 {
margin-bottom: 64px;
}
body.page-id-54 main .box-4 .row-1 h2 {
color: #232323;
font-weight: 400;
font-size: 20px;
line-height: 1.1;
letter-spacing: -0.38px;
}
body.page-id-54 main .box-4 .row-2 .c-acc {
padding: 0;
margin: 0;
}
body.page-id-54 main .box-4 .row-2 .c-acc .c-acc--item {
border-bottom: 1px solid #d4d4d4;
}
body.page-id-54 main .box-4 .row-2 .c-acc .c-acc--item:first-child {
border-top: 1px solid #d4d4d4;
}
body.page-id-54 main .box-4 .row-2 .c-acc .c-acc--item.active .c-acc--head .icon::after {
height: 0;
}
body.page-id-54 main .box-4 .row-2 .c-acc .c-acc--item .c-acc--head {
position: relative;
padding-top: 24px;
padding-bottom: 24px;
padding-left: 48px;
}
body.page-id-54 main .box-4 .row-2 .c-acc .c-acc--item .c-acc--head span {
color: #232323;
font-weight: 400;
font-size: 28px;
line-height: 1.5;
letter-spacing: -0.56px;
}
body.page-id-54 main .box-4 .row-2 .c-acc .c-acc--item .c-acc--head .icon {
position: absolute;
display: inline-block;
width: 24px;
height: 24px;
top: 50%;
left: 0;
transform: translateY(-50%);
transition: all 250ms ease-in-out;
}
body.page-id-54 main .box-4 .row-2 .c-acc .c-acc--item .c-acc--head .icon::before {
content: "";
position: absolute;
top: 50%;
left: 0;
width: 24px;
height: 1px;
background: #d9ba5c;
transform: translateY(-50%);
}
body.page-id-54 main .box-4 .row-2 .c-acc .c-acc--item .c-acc--head .icon::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 1px;
height: 24px;
background: #d9ba5c;
transform: translateY(-50%) translateX(-50%);
transition: all 250ms ease-in-out;
}
body.page-id-54 main .box-4 .row-2 .c-acc .c-acc--item .c-acc--body {
display: none;
}
body.page-id-54 main .box-4 .row-2 .c-acc .c-acc--item .c-acc--body .c-acc--body-text {
padding-bottom: 24px;
}
body.page-id-54 main .box-4 .row-2 .c-acc .c-acc--item .c-acc--body .c-acc--body-text p {
color: #232323;
font-weight: 400;
font-size: 20px;
line-height: 1.5;
letter-spacing: -0.38px;
}/*# sourceMappingURL=custom.css.map */

File diff suppressed because one or more lines are too long

View File

@@ -477,6 +477,50 @@ article.article-card {
}
}
.c-tabs {
.c-tabs--nav {
padding: 0;
margin: 0 0 64px 0;
border-bottom: 1px solid #6a6a6a;
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: $cWhite;
border-bottom: 1px solid $cGold;
}
}
}
.c-tabs--content {
.c-tab--item {
display: none;
}
}
}
.c-acc {
.c-acc--item {
.c-acc--head {
cursor: pointer;
}
}
}
//* END Global
//* Home
body.page-id-25 {
main {
@@ -1307,3 +1351,443 @@ body.page-id-47 {
}
}
}
//* ONasze usługi
body.page-id-54 {
main {
padding-top: 80px;
.box-1 {
padding-bottom: 100px;
.row {
.col {
&-1 {
.box-head {
h2 {
color: $cBlack;
font-weight: 500;
font-size: 48px;
line-height: 1.2;
letter-spacing: -0.96px;
margin-bottom: 24px;
strong {
color: $cGold;
font-weight: 500;
}
}
}
.box-text {
margin-bottom: 32px;
p {
color: $cBlack;
font-weight: 400;
font-size: 20px;
line-height: 1.5;
letter-spacing: -0.38px;
}
}
}
}
}
}
.box-2 {
@include box_top_shadow($cLightGray);
background: $cBlack;
.row {
&-1 {
img {
width: 100%;
max-width: 1920px;
height: 250px;
margin-left: auto;
margin-right: auto;
object-fit: cover;
}
}
&-2 {
padding-top: 130px;
padding-bottom: 120px;
.c-tabs {
.c-tabs--nav {
li {
}
}
.c-tabs--content {
.c-tab--item {
}
}
}
.t-row {
&-1 {
margin-bottom: 100px;
.t-col {
&-1 {
.t-head {
margin-bottom: 24px;
h2 {
color: $cWhite;
font-weight: 400;
font-size: 36px;
line-height: 1.2;
letter-spacing: -0.72px;
}
}
.t-text {
p {
color: $cWhite;
font-weight: 400;
font-size: 20px;
line-height: 1.5;
letter-spacing: -0.38px;
}
}
}
}
}
&-2 {
display: flex;
flex-direction: row;
}
.t-col {
&-1 {
width: 60%;
}
&-2 {
width: 40%;
}
}
.tab-description {
padding-left: 48px;
border-left: 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: $cWhite;
font-weight: 400;
font-size: 16px;
line-height: 1.5;
letter-spacing: -0.32px;
&:last-child {
margin-bottom: 0;
}
}
}
}
.c-acc {
padding: 0;
margin: 0;
max-width: 630px;
margin-right: 30px;
.c-acc--item {
&:not(:last-child) {
border-bottom: 1px solid #6a6a6a;
}
&.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: $cWhite;
font-weight: 400;
font-size: 20px;
line-height: 1.1;
letter-spacing: -0.38px;
transition: all 250ms ease-in-out;
transition-delay: 250ms;
}
}
.c-acc--body {
display: none;
.c-acc--body-text {
padding-bottom: 16px;
p {
color: $cWhite;
font-weight: 400;
font-size: 16px;
line-height: 1.5;
letter-spacing: -0.32px;
}
}
}
}
}
}
}
}
}
.box-3 {
position: relative;
background: #fafafa;
.row {
display: flex;
flex-direction: row;
column-gap: 110px;
padding: 140px 0;
.col {
&-1 {
position: absolute;
left: 0;
top: 0;
bottom: 0;
img {
height: 100%;
width: 673px;
object-fit: cover;
object-position: center;
}
}
&-2 {
width: 100%;
max-width: 569px;
margin-left: auto;
> p {
color: $cBlack;
font-weight: 400;
font-size: 20px;
line-height: 1.1;
letter-spacing: -0.38px;
}
.box-text {
margin-bottom: 95px;
p {
color: $cBlack;
font-weight: 400;
font-size: 28px;
line-height: 1.5;
letter-spacing: -0.56px;
strong {
color: $cGold;
font-weight: 400;
}
}
}
ul {
padding: 0;
margin: 0;
li {
padding-top: 16px;
padding-bottom: 16px;
color: $cBlack;
font-weight: 400;
font-size: 20px;
line-height: 1.1;
letter-spacing: -0.38px;
&:not(:last-child) {
border-bottom: 1px solid #d4d4d4;
}
}
}
}
}
}
}
.box-4 {
padding-top: 130px;
padding-bottom: 160px;
.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;
}
.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;
}
}
}
}
}
}
}
}
}
}