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-04 13:40:30 +02:00
parent b17f2f4766
commit 4e91810bb6
5 changed files with 1060 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -24,6 +24,9 @@ $header-height: 77px;
@include respond-below(lg) {
font-size: 48px;
}
@include respond-below(sm) {
font-size: 40px;
}
}
@mixin box_title_line($color, $bgColor) {
@@ -98,6 +101,11 @@ $header-height: 77px;
font-family: $fHelveticaNeue;
}
body {
&.no-scroll {
overflow: hidden;
}
}
p {
&:last-child {
margin-bottom: 0;
@@ -316,6 +324,9 @@ header#masthead {
padding-top: 90px;
padding-bottom: 90px;
height: 100svh;
max-height: calc(100svh - $header-height);
}
&.active {
}
@@ -343,19 +354,24 @@ header#masthead {
align-items: center;
gap: 7px;
&::before {
content: '';
position: relative;
display: inline-block;
width: 5px;
height: 5px;
border-radius: 100%;
background: $cGold;
margin-bottom: 2px;
@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%;
}
}
}
@@ -381,6 +397,29 @@ header#masthead {
display: none;
}
}
@include respond-below(lg) {
&#menu-item-344 {
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;
}
}
}
}
}
}
@@ -463,8 +502,9 @@ header#masthead {
}
.text {
display: inline-block;
height: 11px;
height: 12px;
padding-left: 8px;
margin-top: -1px;
width: 45px;
opacity: 1;
overflow: hidden;
@@ -483,7 +523,7 @@ header#masthead {
position: absolute;
top: 0;
left: 0;
height: 1.5px;
height: 2px;
width: 11px;
background: $cWhite;
transition: all 250ms ease-in-out;
@@ -492,9 +532,9 @@ header#masthead {
&::after {
content: '';
position: absolute;
top: calc(100% - 1.5px);
top: calc(100% - 2px);
left: 0;
height: 1.5px;
height: 2px;
width: 11px;
background: $cWhite;
transition: all 250ms ease-in-out;
@@ -686,6 +726,10 @@ article.article-card {
width: 100%;
height: 286px;
object-fit: cover;
@include respond-below(md) {
height: 200px;
}
}
}
}
@@ -700,6 +744,13 @@ article.article-card {
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;
@@ -1291,15 +1342,24 @@ body.page-id-38 {
column-gap: 120px;
margin-bottom: 80px;
@include respond-below(lg) {
column-gap: 60px;
}
@include respond-below(md) {
flex-direction: column;
row-gap: 40px;
}
.col {
&-1 {
.box-head {
@include respond-below(xl) {
position: sticky;
top: 30px;
}
h2 {
color: $cBlack;
font-weight: 500;
font-size: 64px;
line-height: 1.2;
letter-spacing: -0.96px;
@include h2($cBlack);
}
}
}
@@ -1316,6 +1376,13 @@ body.page-id-38 {
font-size: 28px;
line-height: 1.5;
letter-spacing: -0.53px;
@include respond-below(xl) {
font-size: 24px;
}
@include respond-below(md) {
font-size: 22px;
}
}
}
}
@@ -1347,31 +1414,67 @@ body.page-id-38 {
}
}
&-2 {
@include respond-below(md) {
margin-bottom: 80px;
}
.tiles {
display: flex;
flex-direction: row;
justify-content: space-between;
@include respond-below(md) {
flex-direction: column;
}
.tile {
flex-basis: calc(100% / 3);
padding-left: 40px;
border-right: 1px solid;
border-image-source: linear-gradient(
180deg,
$cGold 0%,
transparent 100%
);
border-image-slice: 1;
padding-bottom: 230px;
&:first-child {
border-left: 1px solid;
@include respond-below(lg) {
padding-left: 20px;
padding-bottom: 150px;
}
@include respond-above(md) {
border-right: 1px solid;
border-image-source: linear-gradient(
180deg,
$cGold 0%,
transparent 100%
);
border-image-slice: 1;
&:first-child {
border-left: 1px solid;
}
}
@include respond-below(md) {
padding-left: 0px;
padding-bottom: 0px;
&:not(:last-child) {
padding-bottom: 30px;
margin-bottom: 30px;
border-bottom: 1px solid;
border-image-source: linear-gradient(
90deg,
$cGold 0%,
transparent 100%
);
border-image-slice: 1;
}
}
.tile-data {
position: relative;
padding-left: 48px;
@include respond-below(lg) {
padding-left: 30px;
padding-right: 30px;
}
&::before {
content: '';
position: absolute;
@@ -1384,6 +1487,12 @@ body.page-id-38 {
background-position: center;
background-repeat: no-repeat;
background-size: contain;
@include respond-below(lg) {
width: 22px;
min-width: 22px;
height: 22px;
}
}
h3 {
@@ -1393,6 +1502,10 @@ body.page-id-38 {
line-height: 1;
letter-spacing: -0.68px;
margin-bottom: 24px;
@include respond-below(lg) {
font-size: 26px;
}
}
p {
color: $cBlack;
@@ -1400,6 +1513,15 @@ body.page-id-38 {
font-size: 20px;
line-height: 1.5;
letter-spacing: -0.38px;
@include respond-below(lg) {
font-size: 16px;
}
@include respond-below(md) {
br {
display: none;
}
}
}
}
}
@@ -1417,16 +1539,35 @@ body.page-id-38 {
display: flex;
flex-direction: row;
column-gap: 50px;
padding: 150px 0 130px;
@include respond-above(lg) {
padding: 150px 0 130px;
}
@include respond-below(lg) {
padding: 0 0 100px;
row-gap: 100px;
flex-direction: column-reverse;
}
.col {
&-1 {
@include box_title_line($cWhite, $cBlack);
padding-left: 90px;
padding-bottom: 30px;
width: 100%;
max-width: 660px;
@include respond-above(lg) {
padding-left: 90px;
}
@include respond-below(xxl) {
max-width: 590px;
}
@include respond-below(lg) {
padding-top: 64px;
max-width: unset;
}
.box-title {
margin-bottom: 32px;
@@ -1436,6 +1577,13 @@ body.page-id-38 {
font-size: 36px;
line-height: 1.5;
letter-spacing: -0.68px;
@include respond-below(xxl) {
font-size: 32px;
}
@include respond-below(sm) {
font-size: 24px;
}
}
}
@@ -1463,21 +1611,46 @@ body.page-id-38 {
}
&-2 {
position: absolute;
right: 0;
top: 0;
bottom: 0;
&::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
90deg,
$cBlack 0%,
rgba(0, 0, 0, 0) 100%
);
z-index: 1;
@include respond-above(lg) {
inset: 0;
}
@include respond-below(lg) {
width: 100svw;
left: 50%;
top: 0;
bottom: 0;
background: linear-gradient(
0deg,
$cBlack 0%,
rgba(0, 0, 0, 0) 100%
);
transform: translateX(-50%);
}
}
@include respond-above(lg) {
position: absolute;
right: 0;
top: 0;
bottom: 0;
}
@include respond-below(lg) {
position: relative;
height: 300px;
}
@include respond-below(sm) {
height: 200px;
}
video {
@@ -1485,6 +1658,21 @@ body.page-id-38 {
width: 640px;
object-fit: cover;
filter: grayscale(1);
@include respond-below(xxl) {
max-width: 520px;
}
@include respond-below(xl) {
max-width: 360px;
}
@include respond-below(lg) {
width: 100svw;
max-width: unset;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
}
}
}
}
@@ -1496,24 +1684,60 @@ body.page-id-38 {
padding-bottom: 220px;
background: #fafafa;
@include respond-below(xl) {
padding-top: 140px;
padding-bottom: 170px;
}
@include respond-below(lg) {
padding-top: 100px;
padding-bottom: 130px;
}
.row {
display: flex;
flex-direction: row;
column-gap: 100px;
align-items: center;
@include respond-below(lg) {
flex-direction: column;
row-gap: 64px;
}
.col {
&-1 {
@include box_title_line(#d4d4d4, #fafafa);
padding-left: 115px;
@include respond-above(lg) {
padding-left: 115px;
}
@include respond-below(lg) {
width: 100%;
padding-bottom: 84px;
&::before {
bottom: 0;
top: auto;
}
&::after {
top: auto;
bottom: 6px;
}
}
img {
width: 100%;
max-width: fit-content;
@include respond-below(lg) {
margin: 0 auto;
}
}
}
&-2 {
max-width: 403px;
@include respond-above(lg) {
max-width: 403px;
}
.box-title {
margin-bottom: 32px;
@@ -1524,6 +1748,10 @@ body.page-id-38 {
font-size: 28px;
line-height: 1.5;
letter-spacing: -0.56px;
@include respond-below(sm) {
font-size: 24px;
}
}
}
@@ -1566,11 +1794,7 @@ body.page-id-47 {
max-width: 600px;
h2 {
color: $cBlack;
font-weight: 500;
font-size: 64px;
line-height: 1.2;
letter-spacing: -0.96px;
@include h2($cBlack);
}
}
}
@@ -1588,6 +1812,10 @@ body.page-id-47 {
column-gap: 32px;
row-gap: 40px;
@include respond-below(md) {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.tile {
.tile--btn {
width: 45px;
@@ -1610,6 +1838,12 @@ body.page-id-47 {
width: 100%;
max-width: fit-content;
}
@include respond-below(sm) {
width: 35px;
min-width: 35px;
height: 35px;
}
}
.tile--wrapper {
@@ -1617,6 +1851,10 @@ body.page-id-47 {
position: relative;
margin-bottom: 24px;
@include respond-below(sm) {
margin-bottom: 12px;
}
> img {
width: 100%;
}
@@ -1634,6 +1872,14 @@ body.page-id-47 {
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;
@@ -1641,6 +1887,10 @@ body.page-id-47 {
font-size: 16px;
line-height: 1.2;
letter-spacing: -0.32px;
@include respond-below(sm) {
font-size: 14px;
}
}
}
}
@@ -1667,6 +1917,11 @@ body.page-id-47 {
background: $cBlack;
overflow: auto;
@include respond-below(sm) {
width: 100%;
max-width: 346px;
}
.tile--btn {
top: 24px;
right: 16px;
@@ -2221,6 +2476,14 @@ body.blog {
position: relative;
height: 568px;
padding: 64px;
@include respond-below(lg) {
height: 460px;
}
@include respond-below(sm) {
padding: 30px;
height: 400px;
}
}
.box-bg {
position: absolute;
@@ -2266,6 +2529,16 @@ body.blog {
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;
}
}
}
}
@@ -2276,11 +2549,25 @@ body.blog {
.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;
@@ -2361,16 +2648,22 @@ body.page-id-59 {
flex: 1;
.box-head {
max-width: 700px;
margin-top: 24px;
margin-bottom: 24px;
@include respond-above(lg) {
max-width: 700px;
}
h2 {
color: $cBlack;
font-weight: 500;
font-size: 64px;
line-height: 1.2;
letter-spacing: -0.96px;
@include h2($cBlack);
@include respond-below(xl) {
font-size: 48px;
}
@include respond-below(sm) {
font-size: 40px;
}
}
}
.box-text {
@@ -2393,6 +2686,10 @@ body.page-id-59 {
column-gap: 80px;
row-gap: 40px;
@include respond-below(sm) {
flex-direction: column;
}
.contact-card {
.card-title {
margin-bottom: 16px;
@@ -2446,6 +2743,13 @@ body.page-id-59 {
}
&-2 {
flex-basis: 500px;
@include respond-below(xl) {
flex-basis: 400px;
}
@include respond-below(lg) {
display: none;
}
}
}
}
@@ -2465,17 +2769,29 @@ body.single-post {
.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;
padding-right: 70px;
border-right: 1px solid #d4d4d4;
width: 100%;
max-width: 800px;
@include respond-above(lg) {
padding-right: 70px;
border-right: 1px solid #d4d4d4;
max-width: 800px;
}
.btn-back-page {
&:hover {
@@ -2489,14 +2805,29 @@ body.single-post {
}
}
&-2 {
flex-basis: 480px;
@include respond-above(lg) {
flex-basis: 480px;
}
@include respond-below(lg) {
height: 300px;
}
.post-thumbnail {
position: sticky;
top: 0px;
@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;
}
}
}
}
@@ -2508,9 +2839,19 @@ body.single-post {
padding-bottom: 160px;
background: #fafafa;
@include respond-below(lg) {
padding-top: 100px;
padding-bottom: 100px;
}
.row {
@include box_title_line(#d4d4d4, #fafafa);
padding-left: 64px;
@include respond-above(lg) {
padding-left: 64px;
}
@include respond-below(lg) {
padding-top: 64px;
}
.box-head {
h2 {
@@ -2520,6 +2861,10 @@ body.single-post {
font-size: 48px;
line-height: 1;
letter-spacing: -0.96px;
@include respond-below(lg) {
font-size: 32px;
}
}
}
@@ -2527,6 +2872,39 @@ body.single-post {
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;
}
}
}
}
@@ -2542,6 +2920,13 @@ body.single-post {
line-height: 1.2;
letter-spacing: -0.96px;
margin: 0;
@include respond-below(xl) {
font-size: 42px;
}
@include respond-below(md) {
font-size: 32px;
}
}
}
@@ -2569,6 +2954,10 @@ body.single-post {
height: 1px;
background: $cGold;
}
@include respond-below(md) {
font-size: 20px;
}
}
h2 {
@@ -2578,6 +2967,10 @@ body.single-post {
font-size: 24px;
line-height: 1.5;
letter-spacing: -0.48px;
@include respond-below(md) {
font-size: 20px;
}
}
p {
@@ -2590,6 +2983,10 @@ body.single-post {
strong {
color: $cGold;
}
@include respond-below(md) {
font-size: 16px;
}
}
a {
@@ -2625,6 +3022,10 @@ body.single-post {
background: $cGold;
transform: translateY(-50%);
}
@include respond-below(md) {
font-size: 16px;
}
}
}
@@ -2684,6 +3085,10 @@ body.single-post {
background-repeat: no-repeat;
}
@include respond-below(md) {
padding: 24px 70px 24px 24px;
}
p {
color: $cBlack;
font-weight: 500;
@@ -2691,6 +3096,10 @@ body.single-post {
line-height: 1.5;
letter-spacing: -0.38px;
margin-bottom: 0;
@include respond-below(md) {
font-size: 16px;
}
}
cite {
position: relative;
@@ -2713,6 +3122,9 @@ body.single-post {
background: $cGold;
transform: translateY(-50%);
}
@include respond-below(md) {
font-size: 16px;
}
}
}
}