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

Save

Browse Source
This commit is contained in:
Roman Pyrih
2025-09-03 16:00:09 +02:00
parent eed2bf7ab1
commit b17f2f4766
6 changed files with 795 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

306
wp-content/themes/brpp-prawo-podatki/css/custom.scss
View File

@@ -37,12 +37,9 @@ $header-height: 77px;
line-height: 1;
letter-spacing: -0.34px;
transform: rotate(180deg);
position: absolute;
left: 0;
top: 0;
writing-mode: vertical-rl;
padding-top: 24px;
background: $bgColor;
z-index: 1;
}
@@ -51,11 +48,33 @@ $header-height: 77px;
content: '';
position: absolute;
left: 7px;
top: 10px;
bottom: 0;
width: 1px;
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) {
@@ -272,6 +291,10 @@ header#masthead {
width: 200px;
min-width: 200px;
}
@include respond-below(sm) {
width: 200px;
min-width: 200px;
}
}
&.active {
@@ -490,10 +513,16 @@ footer#site-footer {
background: $cBlack;
.footer-1 {
padding-top: 140px;
padding-bottom: 90px;
border-bottom: 1px solid $cGray2;
@include respond-above(lg) {
padding-top: 140px;
}
@include respond-below(lg) {
padding-top: 100px;
}
.row {
display: flex;
flex-direction: row;
@@ -507,6 +536,13 @@ footer#site-footer {
width: 100%;
max-width: 636px;
@include respond-below(xl) {
max-width: 430px;
}
@include respond-below(md) {
max-width: unset;
}
img {
width: 239px;
margin-bottom: 24px;
@@ -519,6 +555,10 @@ footer#site-footer {
line-height: 1.2;
letter-spacing: -0.96px;
margin-bottom: 24px;
@include respond-below(xl) {
font-size: 48px;
}
}
p {
color: $cGray2;
@@ -530,10 +570,19 @@ footer#site-footer {
}
}
&-2 {
@include respond-below(md) {
display: none;
}
img {
width: 100%;
max-width: fit-content;
margin-top: -190px;
@include respond-above(lg) {
margin-top: -190px;
}
@include respond-below(lg) {
margin-top: -140px;
}
}
}
}
@@ -547,6 +596,11 @@ footer#site-footer {
display: flex;
flex-direction: row;
@include respond-below(lg) {
flex-direction: column;
row-gap: 24px;
}
.col {
&-1 {
flex-basis: 40%;
@@ -570,6 +624,10 @@ footer#site-footer {
font-size: 16px;
line-height: 1;
letter-spacing: -0.32px;
@include respond-below(lg) {
display: none;
}
}
}
&-2 {
@@ -583,6 +641,11 @@ footer#site-footer {
margin: 0;
padding: 0;
@include respond-below(lg) {
flex-direction: column;
row-gap: 24px;
}
li {
p {
color: $cGray2;
@@ -595,6 +658,19 @@ footer#site-footer {
}
}
}
&-3 {
@include respond-above(lg) {
display: none;
}
a {
color: $cGray2;
font-weight: 400;
font-size: 16px;
line-height: 1;
letter-spacing: -0.32px;
}
}
}
}
}
@@ -690,6 +766,10 @@ body.page-id-25 {
margin-top: 60px;
.box-1 {
@include respond-below(md) {
overflow: hidden;
}
.row {
position: relative;
display: flex;
@@ -724,6 +804,12 @@ body.page-id-25 {
@include respond-below(lg) {
max-width: 360px;
}
@include respond-below(md) {
left: 0;
right: auto;
transform: translateX(100%);
max-width: 400px;
}
}
}
}
@@ -784,8 +870,6 @@ body.page-id-25 {
.row {
.col {
&-1 {
max-width: 474px;
padding-left: 64px;
@include box_title_line($cWhite, $cBlack);
.box-text {
@@ -799,20 +883,40 @@ body.page-id-25 {
letter-spacing: -0.53px;
}
}
@include respond-above(lg) {
padding-left: 64px;
max-width: 474px;
}
@include respond-below(lg) {
padding-top: 64px;
}
}
}
}
}
.box-3 {
padding-top: 120px;
padding-bottom: 215px;
@include respond-above(lg) {
padding-top: 120px;
padding-bottom: 215px;
}
@include respond-below(lg) {
padding-top: 100px;
padding-bottom: 100px;
}
.row {
@include box_title_line(#d4d4d4, $cWhite);
padding-left: 64px;
padding-top: 160px;
padding-bottom: 90px;
@include respond-above(lg) {
padding-left: 64px;
padding-top: 160px;
padding-bottom: 90px;
}
@include respond-below(lg) {
padding-top: 64px;
}
ul {
display: grid;
@@ -872,29 +976,67 @@ body.page-id-25 {
}
}
}
@include respond-below(lg) {
grid-template-columns: 1fr 1fr;
row-gap: 64px;
}
@include respond-below(md) {
grid-template-columns: 1fr;
}
}
}
}
.box-4 {
@include box_top_shadow($cLightGray);
padding-top: 164px;
padding-bottom: 164px;
background: $cBlack;
@include respond-above(lg) {
padding-top: 164px;
padding-bottom: 164px;
}
@include respond-below(lg) {
padding-bottom: 124px;
}
.row {
display: flex;
flex-direction: row;
column-gap: 110px;
@include respond-below(lg) {
flex-direction: column;
row-gap: 200px;
}
.col {
&-1 {
@include box_title_line($cWhite, $cBlack);
padding-left: 110px;
@include respond-above(lg) {
padding-left: 110px;
}
@include respond-below(lg) {
&::before {
bottom: -110px;
top: auto;
}
&:after {
top: auto;
bottom: -103px;
}
}
img {
width: 100%;
max-width: 627px;
@include respond-below(lg) {
max-width: unset;
}
}
}
&-2 {
@@ -904,7 +1046,10 @@ body.page-id-25 {
display: flex;
flex-direction: column;
row-gap: 64px;
max-width: 345px;
@include respond-above(lg) {
max-width: 345px;
}
li {
h3 {
@@ -931,13 +1076,24 @@ body.page-id-25 {
}
.box-5 {
padding-top: 200px;
padding-bottom: 200px;
@include respond-above(lg) {
padding-top: 200px;
padding-bottom: 200px;
}
@include respond-below(lg) {
padding-top: 100px;
padding-bottom: 100px;
}
.row {
.big-quote {
@include box_title_line(#d4d4d4, $cWhite);
padding-left: 64px;
@include respond-above(lg) {
padding-left: 64px;
}
@include respond-below(lg) {
padding-top: 64px;
}
h3 {
color: $cBlack;
@@ -986,20 +1142,38 @@ body.page-id-25 {
.row {
display: flex;
flex-direction: row;
column-gap: 100px;
padding: 160px 0 125px;
@include respond-above(lg) {
flex-direction: row;
column-gap: 100px;
padding: 160px 0 125px;
}
@include respond-below(lg) {
flex-direction: column-reverse;
padding: 0 0 80px;
row-gap: 80px;
}
.col {
&-1 {
@include box_title_line(#d4d4d4, #fafafa);
padding-left: 64px;
width: 100%;
max-width: 588px;
@include respond-above(lg) {
padding-left: 64px;
max-width: 588px;
}
@include respond-below(lg) {
padding-top: 64px;
}
.box-text {
margin-bottom: 120px;
@include respond-above(lg) {
margin-bottom: 120px;
}
@include respond-below(lg) {
margin-bottom: 70px;
}
p {
color: $cBlack;
font-weight: 400;
@@ -1014,22 +1188,47 @@ body.page-id-25 {
margin: 0;
display: flex;
flex-direction: row;
align-items: center;
column-gap: 40px;
@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 {
position: absolute;
right: 0;
top: 0;
bottom: 0;
@include respond-above(lg) {
position: absolute;
right: 0;
top: 0;
bottom: 0;
}
@include respond-below(lg) {
height: 400px;
}
img {
height: 100%;
width: 673px;
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%;
}
}
}
}
@@ -1037,16 +1236,41 @@ body.page-id-25 {
}
.box-7 {
padding-top: 164px;
padding-bottom: 200px;
@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);
padding-left: 64px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
@include respond-above(lg) {
padding-left: 64px;
}
@include respond-below(lg) {
padding-top: 64px;
}
@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;
}
}
}
}