<section id="nasi-prelegenci" style="font-family: 'Fahkwang', sans-serif !important; background: url('/files/pages/assets/2026-07-11/rectangle-34_mrg5awzi.png') no-repeat center center / cover !important; padding: 100px 20px; color: #ffffff; position: relative; z-index: 10; overflow: hidden;">
<style>
#nasi-prelegenci .container {
max-width: 1200px;
margin: 0 auto;
text-align: center;
position: relative;
z-index: 20;
}
#nasi-prelegenci .tag {
color: #cda753 !important;
font-size: 16px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
margin-bottom: 12px;
font-family: 'Fahkwang', sans-serif !important;
}
#nasi-prelegenci .section-title {
font-size: 42px;
font-weight: 600;
color: #ffffff;
margin-bottom: 15px;
font-family: 'Fahkwang', sans-serif !important;
}
#nasi-prelegenci .sub-heading {
font-size: 18px;
font-weight: 400;
color: rgba(255, 255, 255, 0.82);
margin-bottom: 50px;
line-height: 1.6;
max-width: 700px;
margin-left: auto;
margin-right: auto;
font-family: 'Fahkwang', sans-serif !important;
}
/* Karuzela / Slider Wrapper */
#nasi-prelegenci .slider-container {
position: relative;
max-width: 1100px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
}
#nasi-prelegenci .slider-track-wrap {
overflow: hidden;
width: 100%;
padding: 20px 10px;
}
#nasi-prelegenci .speakers-grid {
display: flex;
gap: 30px;
transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
width: max-content;
}
/* Gdy są dokładnie 3 karty, wyśrodkuj je i rozciągnij równomiernie */
#nasi-prelegenci .speakers-grid.cards-three {
width: 100%;
justify-content: center;
flex-wrap: nowrap;
}
#nasi-prelegenci .speakers-grid.cards-three .speaker-card-container {
flex: 1 1 0;
min-width: 0;
max-width: 340px;
width: auto;
}
/* 3D efekty dla rotacji (Flipping Card) */
#nasi-prelegenci .speaker-card-container {
width: 320px;
height: 380px;
perspective: 1000px;
flex-shrink: 0;
}
#nasi-prelegenci .speaker-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
transform-style: preserve-3d;
cursor: pointer;
}
/* Obrót na drugą stronę przy najechaniu myszką */
#nasi-prelegenci .speaker-card-container:hover .speaker-card-inner {
transform: rotateY(180deg);
}
/* FRONT oraz BACK strony karty */
#nasi-prelegenci .card-front, #nasi-prelegenci .card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.08);
backdrop-filter: blur(12px);
box-shadow: 0 10px 40px rgba(0,0,0,0.15);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 30px 24px;
}
/* Konkretne pozycjonowanie przodu (szklany, lekko przejrzysty) */
#nasi-prelegenci .card-front {
background: rgba(255, 255, 255, 0.04);
z-index: 2;
}
/* Tył karty (obrócony o 180st, ciemniejsze tło ułatwiające czytanie biogramu) */
#nasi-prelegenci .card-back {
background: rgba(20, 18, 12, 0.85);
border-color: rgba(205, 167, 83, 0.3);
transform: rotateY(180deg);
z-index: 1;
}
/* POWIĘKSZONE KÓŁKA ZE ZDJĘCIAMI */
#nasi-prelegenci .speaker-avatar-wrap {
border-radius: 50%;
overflow: hidden;
width: 165px;
height: 165px;
margin-bottom: 20px;
border: 2px solid rgba(255, 255, 255, 0.2);
transition: border-color 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
#nasi-prelegenci .speaker-card-container:hover .speaker-avatar-wrap {
border-color: #cda753;
}
#nasi-prelegenci .speaker-avatar-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Placeholder dla oczekiwanych gości */
#nasi-prelegenci .speaker-placeholder-icon {
font-size: 54px;
color: rgba(255, 255, 255, 0.25);
font-weight: 300;
line-height: 1;
}
#nasi-prelegenci .speaker-topic-badge {
display: inline-block;
background: rgba(205, 167, 83, 0.15);
color: #cda753;
font-size: 11px;
font-weight: 600;
border-radius: 999px;
padding: 4px 14px;
margin-bottom: 12px;
letter-spacing: 0.05em;
text-transform: uppercase;
font-family: 'Fahkwang', sans-serif !important;
}
#nasi-prelegenci .speaker-role {
font-size: 14px;
color: #cda753;
font-weight: 500;
margin-bottom: 4px;
text-transform: uppercase;
letter-spacing: 0.03em;
font-family: 'Fahkwang', sans-serif !important;
}
#nasi-prelegenci .speaker-name {
font-size: 24px;
font-weight: 600;
color: #ffffff;
margin-bottom: 6px;
font-family: 'Fahkwang', sans-serif !important;
}
#nasi-prelegenci .speaker-company {
font-size: 13px;
color: rgba(255, 255, 255, 0.5);
font-family: 'Fahkwang', sans-serif !important;
}
/* Elegancki styl biogramu na odwrocie */
#nasi-prelegenci .speaker-bio {
font-size: 14px;
color: rgba(255, 255, 255, 0.9);
line-height: 1.6;
margin-bottom: 0;
font-family: 'Fahkwang', sans-serif !important;
}
#nasi-prelegenci .card-back-title {
font-size: 16px;
font-weight: 600;
color: #cda753;
margin-bottom: 12px;
text-transform: uppercase;
letter-spacing: 0.05em;
font-family: 'Fahkwang', sans-serif !important;
}
@media (max-width: 768px) {
#nasi-prelegenci .speakers-grid.cards-three {
flex-wrap: wrap;
width: 100%;
justify-content: center;
}
#nasi-prelegenci .speakers-grid.cards-three .speaker-card-container {
width: 280px;
flex: 0 0 280px;
}
}
</style>
<div class="container">
<h3 class="tag">Konferencja 2028</h3>
<h2 class="section-title">Nasi prelegenci</h2>
<p class="sub-heading">Poznaj ekspertów, którzy podzielą się swoją wiedzą i doświadczeniem podczas tegorocznych prelekcji.</p>
<div class="slider-container">
<div class="slider-track-wrap">
<div class="speakers-grid cards-three">
<!-- Kafel 1: Piotr Mosak (Opublikowany) -->
<div class="speaker-card-container">
<div class="speaker-card-inner">
<div class="card-front">
<div class="speaker-avatar-wrap">
<img src="/files/pages/assets/2026-07-11/cover-5zakisk4l5mcmq_mrgf2ukv.webp" alt="Portret Piotra Mosaka" loading="lazy">
</div>
<span class="speaker-topic-badge">Psychologia</span>
<p class="speaker-role">Znany Psycholog & Terapeuta</p>
<p class="speaker-name">Piotr Mosak</p>
<p class="speaker-company">Instytut Psychoterapii</p>
</div>
<div class="card-back">
<p class="card-back-title">O prelegencie</p>
<p class="speaker-bio">Ceniony psycholog, terapeuta i ekspert medialny z wieloletnim doświadczeniem w pracy z parami, rodzinami oraz klientem indywidualnym. Inspirujący mówca i uczestnik paneli dyskusyjnych.</p>
</div>
</div>
</div>
<!-- Kafel 2: Oczekiwanie na prelegenta -->
<div class="speaker-card-container">
<div class="speaker-card-inner">
<div class="card-front" style="background: rgba(255, 255, 255, 0.02); border-style: dashed; border-color: rgba(205, 167, 83, 0.25);">
<div class="speaker-avatar-wrap" style="background: rgba(255, 255, 255, 0.03); border-style: dashed; border-color: rgba(205, 167, 83, 0.3);">
<div class="speaker-placeholder-icon">?</div>
</div>
<span class="speaker-topic-badge" style="background: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.6);">Kolejny gość</span>
<p class="speaker-role" style="color: rgba(255, 255, 255, 0.4); text-transform: none; font-style: italic;">Ogłoszenie wkrótce...</p>
<p class="speaker-name" style="color: rgba(255, 255, 255, 0.7); font-weight: 500;">Prelegent </p>
<p class="speaker-company" style="color: rgba(255, 255, 255, 0.35);">Odkryjemy karty już niedługo</p>
</div>
<div class="card-back" style="background: rgba(15, 14, 10, 0.9); border-style: dashed; border-color: rgba(205, 167, 83, 0.3);">
<p class="card-back-title">Tajemnica...</p>
<p class="speaker-bio" style="color: rgba(255, 255, 255, 0.65);">W tym miejscu już wkrótce ogłosimy kolejną wspaniałą osobowość ze świata nauki, kultury lub biznesu. Bądź na bieżąco!</p>
</div>
</div>
</div>
<!-- Kafel 3: Oczekiwanie na prelegenta -->
<div class="speaker-card-container">
<div class="speaker-card-inner">
<div class="card-front" style="background: rgba(255, 255, 255, 0.02); border-style: dashed; border-color: rgba(205, 167, 83, 0.25);">
<div class="speaker-avatar-wrap" style="background: rgba(255, 255, 255, 0.03); border-style: dashed; border-color: rgba(205, 167, 83, 0.3);">
<div class="speaker-placeholder-icon">?</div>
</div>
<span class="speaker-topic-badge" style="background: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.6);">Kolejny gość</span>
<p class="speaker-role" style="color: rgba(255, 255, 255, 0.4); text-transform: none; font-style: italic;">Ogłoszenie wkrótce...</p>
<p class="speaker-name" style="color: rgba(255, 255, 255, 0.7); font-weight: 500;">Prelegent </p>
<p class="speaker-company" style="color: rgba(255, 255, 255, 0.35);">Odkryjemy karty już niedługo</p>
</div>
<div class="card-back" style="background: rgba(15, 14, 10, 0.9); border-style: dashed; border-color: rgba(205, 167, 83, 0.3);">
<p class="card-back-title">Tajemnica...</p>
<p class="speaker-bio" style="color: rgba(255, 255, 255, 0.65);">W tym miejscu już wkrótce ogłosimy kolejną wspaniałą osobowość ze świata nauki, kultury lub biznesu. Bądź na bieżąco!</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>