This commit is contained in:
Roman Pyrih
2025-08-29 11:05:59 +02:00
parent 468136d4d1
commit 8a6b114721
11 changed files with 452 additions and 75 deletions

View File

@@ -1752,4 +1752,101 @@ body.page-id-54 main .box-4 .row-2 .c-acc .c-acc--item .c-acc--body .c-acc--body
font-size: 20px;
line-height: 1.5;
letter-spacing: -0.38px;
}
body.blog main.blog-page {
padding-top: 32px;
}
body.blog main.blog-page .box-1 {
margin-bottom: 48px;
}
body.blog main.blog-page .box-1 .box--wrapper {
position: relative;
height: 568px;
padding: 64px;
}
body.blog main.blog-page .box-1 .box-bg {
position: absolute;
inset: 0;
}
body.blog main.blog-page .box-1 .row {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
row-gap: 40px;
height: 100%;
}
body.blog main.blog-page .box-1 .row .col-1 #breadcrumbs_box .container {
padding: 0;
}
body.blog main.blog-page .box-1 .row .col-1 #breadcrumbs_box #breadcrumbs {
color: #ffffff;
}
body.blog main.blog-page .box-1 .row .col-2 .box-head {
max-width: 785px;
margin-bottom: 32px;
}
body.blog main.blog-page .box-1 .row .col-2 .box-head h2 {
color: #ffffff;
font-weight: 500;
font-size: 48px;
line-height: 1.2;
letter-spacing: -0.96px;
}
body.blog main.blog-page .box-2 {
padding-bottom: 150px;
}
body.blog main.blog-page .box-2 .posts-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 64px;
margin-bottom: 100px;
}
body.blog main.blog-page .box-2 .posts-more {
text-align: center;
}
body.blog main.blog-page .box-2 .posts-more a {
display: inline-flex;
flex-direction: row;
gap: 16px;
}
body.blog main.blog-page .box-2 .posts-more a:hover .loader::after, body.blog main.blog-page .box-2 .posts-more a:hover .loader::before {
background: #ffffff;
}
body.blog main.blog-page .box-2 .posts-more a .loader {
width: 16px;
height: 16px;
display: inline-block;
position: relative;
margin-top: -3px;
display: none;
}
body.blog main.blog-page .box-2 .posts-more a .loader::after, body.blog main.blog-page .box-2 .posts-more a .loader::before {
content: "";
box-sizing: border-box;
width: 20px;
height: 20px;
border-radius: 50%;
background: #d9ba5c;
position: absolute;
left: 0;
top: 0;
animation: animloader 1s linear infinite;
transition: all 250ms ease-in-out;
}
body.blog main.blog-page .box-2 .posts-more a .loader::after {
opacity: 0;
animation-delay: 0.5s;
}
@keyframes animloader {
0% {
transform: scale(0);
opacity: 1;
}
100% {
transform: scale(1);
opacity: 0;
}
}/*# sourceMappingURL=custom.css.map */

File diff suppressed because one or more lines are too long

View File

@@ -1352,7 +1352,7 @@ body.page-id-47 {
}
}
//* ONasze usługi
//* O nasze usługi
body.page-id-54 {
main {
padding-top: 80px;
@@ -1791,3 +1791,129 @@ body.page-id-54 {
}
}
}
//* Blog
body.blog {
main.blog-page {
padding-top: 32px;
.box-1 {
margin-bottom: 48px;
.box--wrapper {
position: relative;
height: 568px;
padding: 64px;
}
.box-bg {
position: absolute;
inset: 0;
}
.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;
}
}
}
}
}
}
.box-2 {
padding-bottom: 150px;
.posts-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 64px;
margin-bottom: 100px;
}
.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;
}
}
}
}
}
}
}