Mew page "Zespół"

This commit is contained in:
2025-08-28 12:12:48 +02:00
parent d376a5d38f
commit 1118b1543c
6 changed files with 581 additions and 52 deletions

View File

@@ -496,7 +496,9 @@ body.page-id-25 main .box-1 .row {
column-gap: 40px;
}
body.page-id-25 main .box-1 .row .col-2 {
position: relative;
position: absolute;
top: 0;
right: 0;
z-index: 1;
}
body.page-id-25 main .box-1 .box-head {
@@ -1199,4 +1201,173 @@ body.page-id-38 main .box-4 .row .col-2 .box-text p {
font-size: 16px;
line-height: 1.5;
letter-spacing: -0.32px;
}
body.page-id-47.no-scroll {
overflow: hidden;
}
body.page-id-47 main {
padding-top: 80px;
}
body.page-id-47 main .box-1 {
margin-bottom: 80px;
}
body.page-id-47 main .box-1 .row .col-1 .box-head h2 {
color: #232323;
font-weight: 500;
font-size: 64px;
line-height: 1.2;
letter-spacing: -0.96px;
}
body.page-id-47 main .box-2 {
margin-bottom: 180px;
}
body.page-id-47 main .box-2 .row .tiles {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
-moz-column-gap: 32px;
column-gap: 32px;
row-gap: 40px;
}
body.page-id-47 main .box-2 .row .tiles .tile .tile--btn {
width: 45px;
min-width: 45px;
height: 45px;
line-height: 0;
border-radius: 0;
margin: 0;
padding: 0;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
background: #ffffff;
}
body.page-id-47 main .box-2 .row .tiles .tile .tile--btn img {
width: 100%;
max-width: -moz-fit-content;
max-width: fit-content;
}
body.page-id-47 main .box-2 .row .tiles .tile .tile--wrapper .tile--img {
position: relative;
margin-bottom: 24px;
}
body.page-id-47 main .box-2 .row .tiles .tile .tile--wrapper .tile--img > img {
width: 100%;
}
body.page-id-47 main .box-2 .row .tiles .tile .tile--wrapper .tile--img .tile--btn {
bottom: 16px;
right: 16px;
}
body.page-id-47 main .box-2 .row .tiles .tile .tile--wrapper .tile--data h3 {
color: #d9ba5c;
font-weight: 400;
font-size: 28px;
line-height: 1.2;
letter-spacing: -0.56px;
margin-bottom: 16px;
}
body.page-id-47 main .box-2 .row .tiles .tile .tile--wrapper .tile--data p {
color: #232323;
font-weight: 400;
font-size: 16px;
line-height: 1.2;
letter-spacing: -0.32px;
}
body.page-id-47 main .box-2 .row .tiles .tile .tile-sidebar {
position: fixed;
top: 0;
right: 0;
bottom: 0;
z-index: 10;
display: none;
}
body.page-id-47 main .box-2 .row .tiles .tile .tile-sidebar .tile-sidebar-bg {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.35);
}
body.page-id-47 main .box-2 .row .tiles .tile .tile-sidebar .tile-sidebar--wrapper {
position: relative;
width: 346px;
height: 100%;
background: #232323;
overflow: auto;
}
body.page-id-47 main .box-2 .row .tiles .tile .tile-sidebar .tile-sidebar--wrapper .tile--btn {
top: 24px;
right: 16px;
}
body.page-id-47 main .box-2 .row .tiles .tile .tile-sidebar .tile-sidebar--wrapper .tile--btn img {
transform: rotate(45deg);
}
body.page-id-47 main .box-2 .row .tiles .tile .tile-sidebar .tile-sidebar--wrapper .tile--img img {
width: 100%;
}
body.page-id-47 main .box-2 .row .tiles .tile .tile-sidebar .tile-sidebar--wrapper .tile--data {
padding: 24px;
}
body.page-id-47 main .box-2 .row .tiles .tile .tile-sidebar .tile-sidebar--wrapper .tile--data .tile--data-head {
padding-bottom: 24px;
border-bottom: 1px solid #6a6a6a;
}
body.page-id-47 main .box-2 .row .tiles .tile .tile-sidebar .tile-sidebar--wrapper .tile--data .tile--data-head h3 {
color: #d9ba5c;
font-weight: 400;
font-size: 24px;
line-height: 1.2;
letter-spacing: -0.45px;
margin-bottom: 8px;
}
body.page-id-47 main .box-2 .row .tiles .tile .tile-sidebar .tile-sidebar--wrapper .tile--data .tile--data-head p {
color: #ffffff;
font-weight: 400;
font-size: 16px;
line-height: 1.2;
letter-spacing: -0.32px;
}
body.page-id-47 main .box-2 .row .tiles .tile .tile-sidebar .tile-sidebar--wrapper .tile--data .tile--data-contact {
padding: 14px 0 28px 0;
margin: 0;
border-bottom: 1px solid #6a6a6a;
}
body.page-id-47 main .box-2 .row .tiles .tile .tile-sidebar .tile-sidebar--wrapper .tile--data .tile--data-contact li {
display: flex;
flex-direction: column;
row-gap: 2px;
}
body.page-id-47 main .box-2 .row .tiles .tile .tile-sidebar .tile-sidebar--wrapper .tile--data .tile--data-contact li:not(:last-child) {
margin-bottom: 14px;
}
body.page-id-47 main .box-2 .row .tiles .tile .tile-sidebar .tile-sidebar--wrapper .tile--data .tile--data-contact li label {
color: #bebebe;
font-weight: 400;
font-size: 12px;
line-height: 1.2;
letter-spacing: -0.24px;
}
body.page-id-47 main .box-2 .row .tiles .tile .tile-sidebar .tile-sidebar--wrapper .tile--data .tile--data-contact li a {
color: #ffffff;
font-weight: 400;
font-size: 14px;
line-height: 1.2;
letter-spacing: -0.28px;
}
body.page-id-47 main .box-2 .row .tiles .tile .tile-sidebar .tile-sidebar--wrapper .tile--data .tile--data-text {
padding-top: 14px;
}
body.page-id-47 main .box-2 .row .tiles .tile .tile-sidebar .tile-sidebar--wrapper .tile--data .tile--data-text p {
color: #ffffff;
font-weight: 400;
line-height: 1.3;
letter-spacing: -0.28px;
}
body.page-id-47 main .box-2 .row .tiles .tile .tile-sidebar .tile-sidebar--wrapper .tile--data .tile--data-text .text-1 {
margin-bottom: 1.5em;
}
body.page-id-47 main .box-2 .row .tiles .tile .tile-sidebar .tile-sidebar--wrapper .tile--data .tile--data-text .text-1 p {
font-size: 14px;
}
body.page-id-47 main .box-2 .row .tiles .tile .tile-sidebar .tile-sidebar--wrapper .tile--data .tile--data-text .text-2 p {
font-size: 12px;
}/*# sourceMappingURL=custom.css.map */

File diff suppressed because one or more lines are too long

View File

@@ -495,12 +495,12 @@ body.page-id-25 {
&-1 {
}
&-2 {
position: relative;
z-index: 1;
// position: absolute;
// top: 0;
// right: 0;
// position: relative;
// z-index: 1;
position: absolute;
top: 0;
right: 0;
z-index: 1;
}
}
}
@@ -1087,3 +1087,223 @@ body.page-id-38 {
}
}
}
//* Zespół
body.page-id-47 {
&.no-scroll {
overflow: hidden;
}
main {
padding-top: 80px;
.box-1 {
margin-bottom: 80px;
.row {
.col {
&-1 {
.box-head {
h2 {
color: $cBlack;
font-weight: 500;
font-size: 64px;
line-height: 1.2;
letter-spacing: -0.96px;
}
}
}
}
}
}
.box-2 {
margin-bottom: 180px;
.row {
.tiles {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
column-gap: 32px;
row-gap: 40px;
.tile {
.tile--btn {
width: 45px;
min-width: 45px;
height: 45px;
line-height: 0;
border-radius: 0;
margin: 0;
padding: 0;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
background: $cWhite;
img {
width: 100%;
max-width: fit-content;
}
}
.tile--wrapper {
.tile--img {
position: relative;
margin-bottom: 24px;
> img {
width: 100%;
}
.tile--btn {
bottom: 16px;
right: 16px;
}
}
.tile--data {
h3 {
color: $cGold;
font-weight: 400;
font-size: 28px;
line-height: 1.2;
letter-spacing: -0.56px;
margin-bottom: 16px;
}
p {
color: $cBlack;
font-weight: 400;
font-size: 16px;
line-height: 1.2;
letter-spacing: -0.32px;
}
}
}
.tile-sidebar {
position: fixed;
top: 0;
right: 0;
bottom: 0;
z-index: 10;
display: none;
.tile-sidebar-bg {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.35);
}
.tile-sidebar--wrapper {
position: relative;
width: 346px;
height: 100%;
background: $cBlack;
overflow: auto;
.tile--btn {
top: 24px;
right: 16px;
img {
transform: rotate(45deg);
}
}
.tile--img {
img {
width: 100%;
}
}
.tile--data {
padding: 24px;
.tile--data-head {
padding-bottom: 24px;
border-bottom: 1px solid #6a6a6a;
h3 {
color: $cGold;
font-weight: 400;
font-size: 24px;
line-height: 1.2;
letter-spacing: -0.45px;
margin-bottom: 8px;
}
p {
color: $cWhite;
font-weight: 400;
font-size: 16px;
line-height: 1.2;
letter-spacing: -0.32px;
}
}
.tile--data-contact {
padding: 14px 0 28px 0;
margin: 0;
border-bottom: 1px solid #6a6a6a;
li {
display: flex;
flex-direction: column;
row-gap: 2px;
&:not(:last-child) {
margin-bottom: 14px;
}
label {
color: #bebebe;
font-weight: 400;
font-size: 12px;
line-height: 1.2;
letter-spacing: -0.24px;
}
a {
color: $cWhite;
font-weight: 400;
font-size: 14px;
line-height: 1.2;
letter-spacing: -0.28px;
}
}
}
.tile--data-text {
padding-top: 14px;
p {
color: $cWhite;
font-weight: 400;
line-height: 1.3;
letter-spacing: -0.28px;
}
.text-1 {
margin-bottom: 1.5em;
p {
font-size: 14px;
}
}
.text-2 {
p {
font-size: 12px;
}
}
}
}
}
}
}
}
}
}
}
}

View File

@@ -16,40 +16,40 @@ get_header();
?>
<main id="primary" class="site-main">
<div class="container">
<?php
if ( have_posts() ) :
<?php
if ( have_posts() ) :
if ( is_home() && ! is_front_page() ) :
?>
<header>
<h1 class="page-title screen-reader-text"><?php single_post_title(); ?></h1>
</header>
<?php
endif;
/* Start the Loop */
while ( have_posts() ) :
the_post();
/*
* Include the Post-Type-specific template for the content.
* If you want to override this in a child theme, then include a file
* called content-___.php (where ___ is the Post Type name) and that will be used instead.
*/
get_template_part( 'template-parts/content', get_post_type() );
endwhile;
the_posts_navigation();
else :
get_template_part( 'template-parts/content', 'none' );
if ( is_home() && ! is_front_page() ) :
?>
<header>
<h1 class="page-title screen-reader-text"><?php single_post_title(); ?></h1>
</header>
<?php
endif;
/* Start the Loop */
while ( have_posts() ) :
the_post();
/*
* Include the Post-Type-specific template for the content.
* If you want to override this in a child theme, then include a file
* called content-___.php (where ___ is the Post Type name) and that will be used instead.
*/
get_template_part( 'template-parts/content', get_post_type() );
endwhile;
the_posts_navigation();
else :
get_template_part( 'template-parts/content', 'none' );
endif;
?>
?>
</div>
</main><!-- #main -->
<?php

View File

@@ -1,16 +1,65 @@
jQuery(function ($) {
gsap.registerPlugin(ScrollTrigger)
if($('body.page-id-25').length) {
gsap.registerPlugin(ScrollTrigger);
gsap.to('.box-1 .col-2 img', {
scrollTrigger: {
trigger: '.box-1 .col-2',
start: 'top top',
endTrigger: '.box-2 .row',
end: 'bottom bottom',
pin: true,
scrub: true,
anticipatePin: 1,
markers: true,
},
})
})
function initSticky() {
ScrollTrigger.getById('heroImagePin')?.kill();
const $pin = $('.box-1 .col-2');
const $end = $('.box-2 .row');
if (!$pin.length || !$end.length) return;
const $row = $pin.closest('.row');
$row.css('min-height', $('img', $pin).outerHeight());
ScrollTrigger.create({
id: 'heroImagePin',
trigger: $pin[0],
pin: true,
start: "top top",
end: () => {
const pinTop = $pin.offset().top;
const pinH = $pin.outerHeight();
const endBottom = $end.offset().top + $end.outerHeight();
return "+=" + Math.max(0, endBottom - pinTop - pinH);
},
scrub: 0.5,
anticipatePin: 1,
invalidateOnRefresh: true,
pinSpacing: true,
pinReparent: true
});
}
$(window).on('load', initSticky);
$(window).on('resize orientationchange', () => ScrollTrigger.refresh());
}
});
jQuery(function ($) {
if (!$('body').hasClass('page-id-47')) return;
const $body = $('body');
$body.on('click', '.tile .tile--wrapper .tile--btn', function (e) {
e.preventDefault();
$body.addClass('no-scroll');
const $tile = $(this).closest('.tile');
const $sidebar = $tile.find('.tile-sidebar');
$('.tile').not($tile).removeClass('active')
.find('.tile-sidebar').fadeOut(200);
$sidebar.fadeToggle(200);
$tile.toggleClass('active');
});
$body.on('click', '.tile .tile-sidebar .tile--btn, .tile .tile-sidebar-bg', function (e) {
e.preventDefault();
$body.removeClass('no-scroll');
$(this).closest('.tile-sidebar').fadeOut(200)
.closest('.tile').removeClass('active');
});
});

View File

@@ -0,0 +1,89 @@
<?php
/**
* Page: Zespół BRPP
*/
get_header();
?>
<main id="primary" class="site-main">
<div class="box-0">
<?php get_template_part('inc/breadcrumb');?>
</div>
<div class="box-1">
<div class="container">
<div class="row">
<div class="col col-1">
<div class="box-head">
<h2>Poznaj specjalistów<br/> w swojej dziedzinie.</h2>
</div>
</div>
</div>
</div>
</div>
<div class="box-2">
<div class="container">
<div class="row">
<div class="tiles">
<?php for ($i = 1; $i <= 6; $i++) : ?>
<div class="tile">
<div class="tile--wrapper">
<div class="tile--img">
<img src="/wp-content/uploads/2025/08/Jakub-Bronski.jpg" alt="">
<button class="tile--btn">
<img src="/wp-content/uploads/2025/08/plus-icon.svg" alt="">
</button>
</div>
<div class="tile--data">
<h3>Jakub Broński</h3>
<p>Wspólnik zarządzający, Adwokat</p>
</div>
</div>
<div class="tile-sidebar">
<div class="tile-sidebar-bg"></div>
<div class="tile-sidebar--wrapper">
<button class="tile--btn">
<img src="/wp-content/uploads/2025/08/plus-icon.svg" alt="">
</button>
<div class="tile--img">
<img src="/wp-content/uploads/2025/08/Jakub-Bronski-mini.jpg" alt="">
</div>
<div class="tile--data">
<div class="tile--data-head">
<h3>Jakub Broński</h3>
<p>Wspólnik zarządzający, Adwokat</p>
</div>
<ul class="tile--data-contact">
<li>
<label>E-mail:</label>
<a href="mailto:">j.bronski@brpp.pl</a>
</li>
<li>
<label>Telefon:</label>
<a href="tel:">+48 793 387 045</a>
</li>
</ul>
<div class="tile--data-text">
<div class="text-1">
<p>Na co dzień zajmuje się doradztwem z zakresu prawa gospodarczego (w tym karnego gospodarczego), cywilnego, handlowego i podatkowego.</p>
</div>
<div class="text-2">
<p>Specjalizuje się w doradztwie korporacyjnym, sporach potransakcyjnych, postępowaniach sądowych oraz badaniach compliance. Posiada wieloletnie doświadczenie w doradztwie prawnym i podatkowym dla biznesu. Prowadził złożone projekty z zakresu fuzji, restrukturyzacji udziałowych i akcyjnych, compliance.</p>
<p>Współpracuje ze znaczącymi przedstawicielami branży turystycznej i rekreacyjnej, inwestycyjnej, finansowej, budowlanej i wieloma innymi. Jest autorem i współautorem wielu publikacji o tematyce gospodarczej, handlowej i sukcesyjnej.<br/> Jakub jest absolwentem studiów prawniczych na Uniwersytecie Marii Curie-Skłodowskiej oraz Studiów Podyplomowych prawa karnego gospodarczego i skarbowego na Uniwersytecie Jagiellońskim.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<?php endfor; ?>
</div>
</div>
</div>
</div>
</main>
<?php
get_footer();