Project-Pro/brpp.pl
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Page "Usługi"

Browse Source
This commit is contained in:
Roman Pyrih
2025-08-28 15:41:26 +02:00
parent 1118b1543c
commit 468136d4d1
5 changed files with 1050 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

484
wp-content/themes/brpp-prawo-podatki/css/custom.scss
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;
}
}
}
}
}
}
}
}
}
}