This commit is contained in:
Roman Pyrih
2026-02-11 15:59:27 +01:00
parent 0dd4cbe82f
commit 5b44d2a0a3
3 changed files with 344 additions and 311 deletions

File diff suppressed because one or more lines are too long

View File

@@ -1,422 +1,423 @@
#home-page-seo { #home-page-seo {
.wrapper { .wrapper {
padding-top: 75px; padding-top: 75px;
padding-bottom: 0; padding-bottom: 0;
h2 { h2 {
margin-left: 0; margin-left: 0;
max-width: 100%; max-width: 100%;
} }
} }
} }
#garden-page-seo { #garden-page-seo {
.wrapper { .wrapper {
padding-top: 0; padding-top: 0;
padding-bottom: 75px; padding-bottom: 75px;
h2 { h2 {
margin-left: 0; margin-left: 0;
max-width: 100%; max-width: 100%;
} }
} }
} }
.pagination { .pagination {
display: flex; display: flex;
align-items: center; align-items: center;
margin: 25px 0 50px; margin: 25px 0 50px;
justify-content: center; justify-content: center;
width: 100%; width: 100%;
font-size: 16px; font-size: 16px;
gap: 10px; gap: 10px;
a { a {
font-size: 16px; font-size: 16px;
} }
} }
.c-select { .c-select {
p { p {
margin-bottom: 5px !important; margin-bottom: 5px !important;
} }
select { select {
border: 1px solid #88b14b; border: 1px solid #88b14b;
padding: 10px; padding: 10px;
width: 100%; width: 100%;
} }
} }
body.page-id-2598 { body.page-id-2598 {
main { main {
section#korzysci { section#korzysci {
.boxes.simple-cards { .boxes.simple-cards {
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
} }
} }
section#garden-page-seo { section#garden-page-seo {
.wrapper.wrapper--inner { .wrapper.wrapper--inner {
flex-direction: column; flex-direction: column;
padding-bottom: 0; padding-bottom: 0;
h2 { h2 {
margin: 0; margin: 0;
} }
p { p {
margin: 0; margin: 0;
} }
} }
} }
}
section#dlaczego_warto {
.wrapper {
}
}
}
} }
#calc-ch-1 { #calc-ch-1 {
.slide-data { .slide-data {
flex-wrap: wrap; flex-wrap: wrap;
.calc-texts { .calc-texts {
width: calc(100% - 200px) !important; width: calc(100% - 200px) !important;
} }
} }
} }
.checkboxes-confirm { .checkboxes-confirm {
padding: 5px 37px; padding: 5px 37px;
} }
.tabs_examples { .tabs_examples {
width: 100%; width: 100%;
h3 { h3 {
font-size: 18px; font-size: 18px;
font-weight: 600; font-weight: 600;
color: #333; color: #333;
} }
&-nav { &-nav {
display: flex; display: flex;
gap: 0; gap: 0;
border-bottom: 2px solid #e0e0e0; border-bottom: 2px solid #e0e0e0;
margin-bottom: 20px; margin-bottom: 20px;
button { button {
flex: 1; flex: 1;
padding: 12px 20px; padding: 12px 20px;
border: none; border: none;
background: #f5f5f5; background: #f5f5f5;
font-size: 15px; font-size: 15px;
font-weight: 500; font-weight: 500;
color: #666; color: #666;
cursor: pointer; cursor: pointer;
transition: all 0.3s ease; transition: all 0.3s ease;
border-bottom: 3px solid transparent; border-bottom: 3px solid transparent;
margin-bottom: -2px; margin-bottom: -2px;
&:hover { &:hover {
background: #eee; background: #eee;
color: #333; color: #333;
} }
&.active { &.active {
background: #fff; background: #fff;
color: #88b14b; color: #88b14b;
border-bottom-color: #88b14b; border-bottom-color: #88b14b;
font-weight: 600; font-weight: 600;
} }
} }
} }
&-content { &-content {
padding: 0; padding: 0;
} }
&-panel { &-panel {
display: flex; display: flex;
gap: 20px; gap: 20px;
align-items: flex-start; align-items: flex-start;
@media (max-width: 768px) { @media (max-width: 768px) {
flex-direction: column; flex-direction: column;
} }
} }
&-img { &-img {
flex: 0 0 45%; flex: 0 0 45%;
img { img {
width: 100%; width: 100%;
height: auto; height: auto;
border-radius: 8px; border-radius: 8px;
} }
} }
&-desc { &-desc {
flex: 1; flex: 1;
h4 { h4 {
font-size: 17px; font-size: 17px;
font-weight: 600; font-weight: 600;
margin-bottom: 10px; margin-bottom: 10px;
color: #333; color: #333;
} }
p { p {
font-size: 14px; font-size: 14px;
line-height: 1.6; line-height: 1.6;
color: #555; color: #555;
} }
} }
} }
.c-datepicker { .c-datepicker {
p { p {
margin-bottom: 5px !important; margin-bottom: 5px !important;
} }
} }
.datepicker-wrapper { .datepicker-wrapper {
position: relative; position: relative;
width: 100%; width: 100%;
} }
.datepicker-input { .datepicker-input {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 10px; gap: 10px;
border: 1px solid #88b14b; border: 1px solid #88b14b;
padding: 10px 14px; padding: 10px 14px;
cursor: pointer; cursor: pointer;
background: #fff; background: #fff;
transition: transition: border-color 0.2s, box-shadow 0.2s;
border-color 0.2s,
box-shadow 0.2s;
&:hover { &:hover {
border-color: #6d9338; border-color: #6d9338;
box-shadow: 0 0 0 3px rgba(136, 177, 75, 0.12); box-shadow: 0 0 0 3px rgba(136, 177, 75, 0.12);
} }
span { span {
flex: 1; flex: 1;
font-size: 15px; font-size: 15px;
color: #333; color: #333;
&.placeholder { &.placeholder {
color: #999; color: #999;
} }
} }
} }
.datepicker-chevron { .datepicker-chevron {
transition: transform 0.2s; transition: transform 0.2s;
&.open { &.open {
transform: rotate(180deg); transform: rotate(180deg);
} }
} }
.datepicker-calendar { .datepicker-calendar {
position: absolute; position: absolute;
top: calc(100% + 6px); top: calc(100% + 6px);
left: 0; left: 0;
z-index: 100; z-index: 100;
background: #fff; background: #fff;
border: 1px solid #e0e0e0; border: 1px solid #e0e0e0;
border-radius: 10px; border-radius: 10px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
padding: 16px; padding: 16px;
width: 310px; width: 310px;
animation: dpFadeIn 0.15s ease; animation: dpFadeIn 0.15s ease;
} }
@keyframes dpFadeIn { @keyframes dpFadeIn {
from { from {
opacity: 0; opacity: 0;
transform: translateY(-6px); transform: translateY(-6px);
} }
to { to {
opacity: 1; opacity: 1;
transform: translateY(0); transform: translateY(0);
} }
} }
.datepicker-header { .datepicker-header {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
margin-bottom: 12px; margin-bottom: 12px;
span { span {
font-weight: 600; font-weight: 600;
font-size: 15px; font-size: 15px;
color: #333; color: #333;
} }
button { button {
width: 32px; width: 32px;
height: 32px; height: 32px;
border: none; border: none;
background: #f5f5f5; background: #f5f5f5;
border-radius: 50%; border-radius: 50%;
font-size: 20px; font-size: 20px;
color: #555; color: #555;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
transition: transition: background 0.2s, color 0.2s;
background 0.2s, line-height: 1;
color 0.2s;
line-height: 1;
&:hover { &:hover {
background: #88b14b; background: #88b14b;
color: #fff; color: #fff;
} }
} }
} }
.datepicker-weekdays { .datepicker-weekdays {
display: grid; display: grid;
grid-template-columns: repeat(7, 1fr); grid-template-columns: repeat(7, 1fr);
text-align: center; text-align: center;
margin-bottom: 6px; margin-bottom: 6px;
span { span {
font-size: 12px; font-size: 12px;
font-weight: 600; font-weight: 600;
color: #999; color: #999;
text-transform: uppercase; text-transform: uppercase;
padding: 4px 0; padding: 4px 0;
} }
} }
.datepicker-days { .datepicker-days {
display: grid; display: grid;
grid-template-columns: repeat(7, 1fr); grid-template-columns: repeat(7, 1fr);
gap: 2px; gap: 2px;
} }
.datepicker-day { .datepicker-day {
width: 38px; width: 38px;
height: 38px; height: 38px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border-radius: 50%; border-radius: 50%;
font-size: 14px; font-size: 14px;
color: #333; color: #333;
cursor: pointer; cursor: pointer;
transition: transition: background 0.15s, color 0.15s;
background 0.15s,
color 0.15s;
&.empty { &.empty {
cursor: default; cursor: default;
} }
&:not(.empty):not(.disabled):hover { &:not(.empty):not(.disabled):hover {
background: rgba(136, 177, 75, 0.15); background: rgba(136, 177, 75, 0.15);
} }
&.today { &.today {
font-weight: 700; font-weight: 700;
border: 2px solid #88b14b; border: 2px solid #88b14b;
} }
&.selected { &.selected {
background: #88b14b; background: #88b14b;
color: #fff; color: #fff;
font-weight: 600; font-weight: 600;
} }
&.disabled { &.disabled {
color: #ccc; color: #ccc;
cursor: not-allowed; cursor: not-allowed;
} }
} }
.swiper-wrapper.wrapper--inner { .swiper-wrapper.wrapper--inner {
background: #000; background: #000;
.swiper-slide:first-child { .swiper-slide:first-child {
h1 { h1 {
flex: 0 0 35% !important; flex: 0 0 35% !important;
} }
.hero-slider-content { .hero-slider-content {
flex: 0 0 65% !important; flex: 0 0 65% !important;
} }
} }
} }
section#price_tiles { section#price_tiles {
>.wrapper { > .wrapper {
padding-bottom: 0; padding-bottom: 0;
} }
ol.price-tiles { ol.price-tiles {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
column-gap: 30px; column-gap: 30px;
row-gap: 30px; row-gap: 30px;
flex-wrap: wrap; flex-wrap: wrap;
li.price-tile { li.price-tile {
position: relative; position: relative;
display: flex; display: flex;
// flex-direction: column; // flex-direction: column;
flex-direction: row; flex-direction: row;
gap: 30px; gap: 30px;
// width: calc(100% / 3); // width: calc(100% / 3);
width: 80%; width: 80%;
padding: 40px 22px 30px; padding: 40px 22px 30px;
clip-path: polygon(0% 5%, clip-path: polygon(
5% 0%, 0% 5%,
100% 0%, 5% 0%,
100% 5%, 100% 0%,
100% 100%, 100% 5%,
0% 100%, 100% 100%,
0% 5%); 0% 100%,
background-color: #f7f5f5; 0% 5%
);
background-color: #f7f5f5;
&:nth-child(2) { &:nth-child(2) {
margin: 0 auto; margin: 0 auto;
} }
&:nth-child(3) { &:nth-child(3) {
margin-left: auto; margin-left: auto;
} }
.price-tile--img { .price-tile--img {
img { img {
width: 300px; width: 300px;
} }
} }
.price-tile--data { .price-tile--data {
width: 100%; width: 100%;
} }
} }
} }
} }
#app #calc-container .calc-bar-fix #calc-bar .calc-s .calc-box .prev, #app #calc-container .calc-bar-fix #calc-bar .calc-s .calc-box .prev,
#app #calc-container .calc-bar-fix #calc-bar .calc-s .calc-box .next { #app #calc-container .calc-bar-fix #calc-bar .calc-s .calc-box .next {
top: 30px !important; top: 30px !important;
} }
#main-nav nav .main-menu { #main-nav nav .main-menu {
gap: 15px !important gap: 15px !important;
} }
.page-id-2598 { .page-id-2598 {
.heading--xl { .heading--xl {
font-size: 30px !important; font-size: 30px !important;
} }
} }

View File

@@ -50,6 +50,17 @@ $collaboration = [
"Produkcja i montaż" "Produkcja i montaż"
]; ];
$why_its = [
[
'text' => 'zapewnić rezerwację terminów montażu w sezonie',
],
[
'text' => 'spokojnie opracować projekt dopasowany do obiektu',
],
[
'text' => 'zagwarantować określony budżet bez nagłych podwyżek',
]
]
?> ?>
<section id="hero_box" class="hero-with-form"> <section id="hero_box" class="hero-with-form">
<div class="hero-wrapper wrapper--inner" style="background: url('/wp-content/uploads/2023/10/ogrody-zimowe.jpg');"> <div class="hero-wrapper wrapper--inner" style="background: url('/wp-content/uploads/2023/10/ogrody-zimowe.jpg');">
@@ -125,11 +136,32 @@ $collaboration = [
<div class="col-text-content"> <div class="col-text-content">
<p>Od lat realizujemy dla klientów biznesowych <strong>systemy aluminiowe, stolarkę</strong>, żaluzje fasadowe i rolety zewnętrzne w obiektach komercyjnych.</p> <p>Od lat realizujemy dla klientów biznesowych <strong>systemy aluminiowe, stolarkę</strong>, żaluzje fasadowe i rolety zewnętrzne w obiektach komercyjnych.</p>
<p>Ogrody zimowe są naturalnym rozszerzeniem tych systemów — opartym na tej samej technologii, standardach montażu i podejściu projektowym.</p> <p>Ogrody zimowe są naturalnym rozszerzeniem tych systemów — opartym na tej samej technologii, standardach montażu i podejściu projektowym.</p>
<p>Ogrody zimowe, które oferujemy, bazują na sprawdzonych systemach aluminiowych o wysokich parametrach cieplnych. To rozwiązanie klasy premium, które zapewnia komfort użytkowania przez cały rok, a jego trwałość jest potwierdzona w realizacjach komercyjnych na obiektach użytkowych.</p>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<section id="dlaczego_warto" class="section-boxes-repeater ">
<div class="wrapper wrapper--inner">
<h2 class="section-heading heading--md">Dlaczego warto teraz</h2>
<p class="section-description">Decyzja o planowaniu ogrodu zimowego z wyprzedzeniem pozwala firmie:</p>
<div class="boxes simple-cards">
<?php foreach ($why_its as $item) : ?>
<div class="box-single ">
<span class="box-counter"></span>
<div class="box-image">
<img src="https://ostal.pl/wp-content/uploads/2023/10/Vector.png" alt="" class="img-auto">
</div>
<div class="box-content">
<p class="box-content__text text-bold"><?= $item['text'] ?></p>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
</section>
<section id="collaboration" class="section-boxes-repeater"> <section id="collaboration" class="section-boxes-repeater">
<div class="wrapper wrapper--inner"> <div class="wrapper wrapper--inner">
<h2 class="section-heading heading--md">Jak wygląda współpraca?</h2> <h2 class="section-heading heading--md">Jak wygląda współpraca?</h2>