This commit is contained in:
Roman Pyrih
2025-09-05 12:39:57 +02:00
parent 7ad1eefe30
commit 2a3ed50e96
8 changed files with 151 additions and 30 deletions

View File

@@ -808,6 +808,11 @@ body.page-id-25 main .box-1 .row {
-moz-column-gap: 40px;
column-gap: 40px;
}
@media (max-width: 575px) {
body.page-id-25 main .box-1 .row {
min-height: 500px;
}
}
body.page-id-25 main .box-1 .row .col-1 {
max-width: 680px;
}
@@ -846,6 +851,17 @@ body.page-id-25 main .box-1 .row .col-2 {
max-width: 400px;
}
}
@media (max-width: 575px) {
body.page-id-25 main .box-1 .row .col-2 {
max-width: unset;
width: 100svw;
inset: 0;
}
body.page-id-25 main .box-1 .row .col-2 img {
max-width: unset;
width: 100%;
}
}
body.page-id-25 main .box-1 .box-head {
margin-bottom: 24px;
}
@@ -1694,6 +1710,7 @@ body.page-id-38 main .box-2 .row .col-2 .tiles {
}
body.page-id-38 main .box-2 .row .col-2 .tiles .tile {
flex-basis: 33.3333333333%;
padding-bottom: 230px;
}
@media (max-width: 991px) {
body.page-id-38 main .box-2 .row .col-2 .tiles .tile {
@@ -2862,6 +2879,10 @@ body.blog main.blog-page {
body.blog main.blog-page .box-1 {
margin-bottom: 48px;
}
body.blog main.blog-page .box-1:hover .box-bg img {
transform: scale(1.3);
transition: all 10s ease-in-out;
}
body.blog main.blog-page .box-1 .box--wrapper {
position: relative;
height: 568px;
@@ -2882,6 +2903,7 @@ body.blog main.blog-page .box-1 .box-bg {
position: absolute;
inset: 0;
filter: brightness(0.7);
overflow: hidden;
}
body.blog main.blog-page .box-1 .box-bg img {
width: 100%;
@@ -2890,6 +2912,7 @@ body.blog main.blog-page .box-1 .box-bg img {
height: 100%;
-o-object-position: center;
object-position: center;
transition: all 250ms ease-in-out;
}
body.blog main.blog-page .box-1 .row {
position: relative;
@@ -3112,7 +3135,7 @@ body.page-id-59 main .box-1 .row .col-1 .contact-cards .contact-card .card-data
letter-spacing: -0.32px;
}
body.page-id-59 main .box-1 .row .col-1 .contact-description p {
color: #747474;
color: #232323;
font-weight: 500;
font-size: 16px;
line-height: 1.5;

File diff suppressed because one or more lines are too long

View File

@@ -829,6 +829,10 @@ body.page-id-25 {
align-items: center;
column-gap: 40px;
@include respond-below(sm) {
min-height: 500px;
}
.col {
&-1 {
max-width: 680px;
@@ -861,6 +865,16 @@ body.page-id-25 {
transform: translateX(100%);
max-width: 400px;
}
@include respond-below(sm) {
max-width: unset;
width: 100svw;
inset: 0;
img {
max-width: unset;
width: 100%;
}
}
}
}
}
@@ -1429,6 +1443,7 @@ body.page-id-38 {
.tile {
flex-basis: calc(100% / 3);
padding-bottom: 230px;
@include respond-below(lg) {
padding-left: 20px;
@@ -2585,6 +2600,15 @@ body.blog {
.box-1 {
margin-bottom: 48px;
&:hover {
.box-bg {
img {
transform: scale(1.3);
transition: all 10s ease-in-out;
}
}
}
.box--wrapper {
position: relative;
height: 568px;
@@ -2602,12 +2626,15 @@ body.blog {
position: absolute;
inset: 0;
filter: brightness(0.7);
overflow: hidden;
img {
width: 100%;
object-fit: cover;
height: 100%;
object-position: center;
transition: all 250ms ease-in-out;
}
}
@@ -2846,7 +2873,7 @@ body.page-id-59 {
.contact-description {
p {
color: #747474;
color: $cBlack;
font-weight: 500;
font-size: 16px;
line-height: 1.5;

View File

@@ -36,6 +36,26 @@ jQuery(function ($) {
$(window).on('resize orientationchange', () => ScrollTrigger.refresh())
}
if ($(window).width() <= 576) {
const box = document.querySelector('.box-1')
const col2 = box.querySelector('.col-2')
const row = box.querySelector('.row')
const moveX = row.offsetLeft - col2.offsetLeft - 30
gsap.to(col2, {
x: moveX,
ease: 'none',
scrollTrigger: {
trigger: box,
start: 'top-=15px top',
end: () => `+=${box.offsetHeight}`,
scrub: true,
pin: true,
markers: false,
},
})
}
}
})
@@ -134,3 +154,51 @@ jQuery(function ($) {
$('body').toggleClass('no-scroll')
})
})
jQuery(function ($) {
document.querySelectorAll('.animate-text').forEach((block) => {
gsap.fromTo(
block.querySelectorAll('.word .char'),
{
opacity: 0.2,
},
{
scrollTrigger: {
trigger: block,
start: 'top 80%',
toggleActions: 'play none none none',
},
opacity: 1,
duration: 0.3,
stagger: {
each: 0.02,
from: 'start',
},
ease: 'power2.out',
}
)
})
})
jQuery(function ($) {
gsap.fromTo(
document.querySelectorAll('.animate-text-linear .word .char'),
{
opacity: 0.2,
},
{
scrollTrigger: {
trigger: '.animate-text-linear',
start: 'top 80%',
toggleActions: 'play none none none',
},
opacity: 1,
duration: 0.25,
stagger: {
each: 0.015,
from: 'start',
},
ease: 'power2.out',
}
)
})

View File

@@ -112,8 +112,8 @@
<div class="row">
<div class="big-quote" box-title="<?php echo $box5['mini_title']; ?>">
<h3><?php echo $box5['author']; ?></h3>
<div class="big-quote-text">
<?php echo $box5['text']; ?>
<div class="big-quote-text animate-text">
<?php echo split_text_into_spans($box5['text']); ?>
</div>
<a class="btn_3" href="<?php echo esc_url($box5['btn']['url']); ?>" target="<?php echo esc_attr($box5['btn']['target'] ?: '_self'); ?>">
<?php echo esc_html($box5['btn']['title']); ?>
@@ -134,8 +134,8 @@
<div class="container">
<div class="row">
<div class="col col-1" box-title="<?php echo $box6['mini_title']; ?>">
<div class="box-text">
<p><?php echo $box6['text']; ?></p>
<div class="box-text animate-text">
<p><?php echo split_text_into_spans($box6['text']); ?></p>
</div>
<ul>
<a class="btn_3" href="<?php echo esc_url($box6['btn']['url']); ?>" target="<?php echo esc_attr($box6['btn']['target'] ?: '_self'); ?>">

View File

@@ -23,8 +23,8 @@
</div>
</div>
<div class="col col-2">
<div class="box-text">
<?php echo wp_kses_post($box1['text']); ?>
<div class="box-text animate-text">
<?php echo split_text_into_spans(wp_kses_post($box1['text'])); ?>
</div>
</div>
</div>
@@ -60,11 +60,11 @@
<div class="container">
<div class="row">
<div class="col col-1" box-title="<?php echo esc_html($box3['mini_title']); ?>">
<div class="box-title">
<p><?php echo esc_html($box3['title']); ?></p>
<div class="box-title animate-text">
<p><?php echo split_text_into_spans(esc_html($box3['title'])); ?></p>
</div>
<div class="box-text">
<p><?php echo esc_html($box3['text']); ?></p>
<div class="box-text animate-text">
<p><?php echo split_text_into_spans(esc_html($box3['text'])); ?></p>
</div>
<a class="btn_4" href="<?php echo esc_url($box3['btn']['url']); ?>" target="<?php echo esc_attr($box3['btn']['target'] ?: '_self'); ?>">
<?php echo esc_html($box3['btn']['title']); ?>
@@ -87,11 +87,11 @@
<img src="<?php echo esc_url($box4['img']); ?>" alt="">
</div>
<div class="col col-2">
<div class="box-title">
<p><?php echo esc_html($box4['title']); ?></p>
<div class="box-title animate-text">
<p><?php echo split_text_into_spans(esc_html($box4['title'])); ?></p>
</div>
<div class="box-text">
<p><?php echo esc_html($box4['text']); ?></p>
<div class="box-text animate-text">
<p><?php echo split_text_into_spans(esc_html($box4['text'])); ?></p>
</div>
<a class="btn_3" href="<?php echo esc_url($box4['btn']['url']); ?>" target="<?php echo esc_attr($box4['btn']['target'] ?: '_self'); ?>">
<?php echo esc_html($box4['btn']['title']); ?>

View File

@@ -112,8 +112,8 @@
<div class="col col-2">
<p><?php echo esc_html($box3['title']); ?></p>
<div class="box-text">
<?php echo $box3['text']; ?>
<div class="box-text animate-text">
<?php echo split_text_into_spans(wp_kses_post($box3['text'])); ?>
</div>
<ul>

View File

@@ -15,25 +15,28 @@
<div class="container">
<div class="row">
<div class="col col-1">
<div class="box-head">
<h2><?php echo esc_html($box1['title']); ?></h2>
<div class="box-head animate-text-linear">
<h2><?php echo split_text_into_spans(esc_html($box1['title'])); ?></h2>
</div>
<div class="box-text">
<p><?php echo esc_html($box1['text']); ?></p>
<div class="box-text animate-text-linear">
<p><?php echo split_text_into_spans(esc_html($box1['text'])); ?></p>
</div>
<div class="contact-cards">
<?php foreach ($box1['contacts'] as $item) : ?>
<div class="contact-card">
<div class="card-title">
<h3><?php echo esc_html($item['title']); ?></h3>
<div class="card-title animate-text-linear">
<h3><?php echo split_text_into_spans(esc_html($item['title'])); ?></h3>
</div>
<div class="card-data">
<?php echo wp_kses_post($item['text']); ?>
<div class="card-data animate-text-linear">
<?php echo split_text_into_spans(wp_kses_post($item['text'])); ?>
<ul class="card-list">
<?php foreach ($item['contacts_types'] as $contact) : ?>
<li>
<a href="<?php echo esc_url($contact['url']); ?>"><?php echo esc_html($contact['title']); ?></a>
<a href="<?php echo esc_url($contact['url']); ?>" class="animate-text-linear">
<?php echo split_text_into_spans(esc_html($contact['title'])); ?>
</a>
</li>
<?php endforeach; ?>
</ul>
@@ -42,8 +45,8 @@
<?php endforeach; ?>
</div>
<div class="contact-description">
<?php echo wp_kses_post($box1['description']); ?>
<div class="contact-description animate-text-linear">
<?php echo split_text_into_spans(wp_kses_post($box1['description'])); ?>
</div>
</div>
<div class="col col-2">