/*
Theme Name: Blocksy Child
Theme URI: https://creativethemes.com/blocksy/
Template: blocksy
Author: CreativeThemes
Author URI: https://creativethemes.com
Description: Blocksy is a fast, modern WordPress theme with advanced WooCommerce support and full compatibility with the block editor.
Tags: accessibility-ready,blog,block-patterns,e-commerce,wide-blocks,block-styles,grid-layout,one-column,two-columns,three-columns,four-columns,right-sidebar,left-sidebar,translation-ready,custom-colors,custom-logo,custom-menu,featured-images,footer-widgets,full-width-template,theme-options,threaded-comments
Version: 2.1.48.1783452172
Updated: 2026-07-07 21:22:52
*/
#footer img {
width: 200px;
height: auto !important;
}
#footer .wp-block-paragraph {
padding-right: 35%;
}
.footer-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 16px;
}
.footer-links a {
color: inherit;
text-decoration: none;
transition: opacity .2s ease;
}
.footer-links a:hover {
opacity: 0.7;
color: #FFD100; /* Żółty akcent w stopce */
}
/* --- PRZYCISKI (Button) --- */
.wp-block-button__link {
background-color: #E31837 !important; /* Kabaretowa czerwień */
color: #FFFFFF !important;
font-weight: 700;
border: none !important;
border-radius: 4px;
padding: 12px 30px;
font-size: 16px;
text-decoration: none;
position: relative;
transition: background-color 0.3s ease, box-shadow 0.3s ease;
display: inline-block;
line-height: 31px;
font-family: 'Roboto', sans-serif;
display: inline;
}
@media (max-width: 1024px) {
.wp-block-button__link {
font-size: 15px;
line-height: 23px;
padding: 12px 27px 12px 27px;
}
}
@media (max-width: 767px) {
.wp-block-button__link {
font-size: 14px;
line-height: 22px;
padding: 10px 20px 10px 20px;
}
}
/* Efekt po najechaniu (bez skakania) */
.wp-block-button__link:hover {
background-color: #C2132D !important;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
/* Niebieski pasek postępu (bez przeskoku) */
.wp-block-button__link::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: repeating-linear-gradient(
to right,
#0033A0 0 8px,
transparent 8px 14px);
transition: width 0.4s ease;
}
.wp-block-button__link:hover::after {
width: 100%;
}
/* --- LINKI TEKSTOWE (Klasa .link-kabaret) --- */
.link-kabaret {
position: relative;
text-decoration: none;
color: #FFFFFF;
transition: color 0.3s ease;
display: inline-block;
}
.link-kabaret:hover {
color: #E31837; /* Czerwony po najechaniu */
}
/* Przerywany niebieski pasek dla linków (w stylu buttona) */
.link-kabaret::after {
content: "";
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background: repeating-linear-gradient(
to right,
#0033A0 0 8px,
transparent 8px 14px
);
transition: width 0.4s ease;
}
.link-kabaret:hover::after {
width: 100%;
}
/* --- OPTYMALIZACJA MOBILNA --- */
@media (max-width: 768px) {
#footer .wp-block-paragraph {
padding-right: 0; /* Pełna szerokość na mobile */
}
}
/* Dodanie efektu przerywanego niebieskiego paska i cienia do przycisków Elementora */
.przycisk {
position: relative;
overflow: hidden; /* Zapewnia, że pasek nie wyjdzie poza ramki */
transition: box-shadow 0.3s ease !important;
}
/* Cień przy najechaniu */
.przycisk:hover {
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
}
/* Przerywany niebieski pasek (wsuwa się od lewej) */
.przycisk::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px; /* Grubość paska */
background: repeating-linear-gradient(
to right,
#0033A0 0 8px,
transparent 8px 14px
) !important;
transition: width 0.4s ease;
}
/* Wysuwanie paska */
.przycisk:hover::after {
width: 100%;
}
.swiper-slide-image {
width: 50% !important;
}
.ct-review-box:hover {
box-shadow: 0px 20px 50px 0px rgba(255, 205.0000000000001, 5.000000000000011, 0.2) !important;
}
.ozdoba:hover svg {
fill: #ffffff !important;
}
.film:hover svg {
fill: #E31837 !important;
}
.elementor-element-3f8cbd4,
.elementor-element-9448340,
.elementor-element-3989499{
padding: 0 !important;
margin: 0 !important;
display: block !important;
}
/* --- EFEKT OBRAMOWANIA DLA KONTENERA (.ozdoba) --- */
.ozdoba {
position: relative;
transition: border-color 0.3s ease !important; /* Płynne znikanie starej ramki */
border: 2px dashed #333333 !important;
border-radius: 16px !important;
}
/* 1. Ukrywamy domyślną ramkę z Elementora po najechaniu myszką */
.ozdoba:hover {
border-color: transparent !important;
background-color: #C2132D !important;
}
/* 2. Tworzymy nową, cieńszą i delikatniejszą ramkę przerywaną */
.ozdoba::after {
content: "";
position: absolute;
/* Ujemne wartości wysuwają linię idealnie na miejsce starego borderu */
top: -1px;
left: -1px;
right: -1px;
bottom: -1px;
pointer-events: none;
z-index: 10;
/* Wzór: kreska 6px, przerwa 6px */
background-image:
repeating-linear-gradient(to right, #0033A0 0 6px, transparent 6px 12px),
repeating-linear-gradient(to bottom, #0033A0 0 6px, transparent 6px 12px),
repeating-linear-gradient(to left, #0033A0 0 6px, transparent 6px 12px),
repeating-linear-gradient(to top, #0033A0 0 6px, transparent 6px 12px);
background-position:
top left,
top right,
bottom right,
bottom left;
/* Grubość linii: 2px */
background-size:
0 2px,
2px 0,
0 2px,
2px 0;
background-repeat: no-repeat;
transition: background-size 0.5s ease;
border-radius: inherit;
}
/* 3. Po najechaniu myszką rozciągamy cienkie linie na 100% */
.ozdoba:hover::after {
background-size:
100% 2px,
2px 100%, /* Boczne linie mają teraz dokładnie 2px */
100% 2px,
2px 100%; /* Boczne linie mają teraz dokładnie 2px */
}
.colorheading {
color: #E31837 !important;
}
/* --- EFEKT WIDEO DLA ZDJĘCIA (.miniatura-wideo) --- */
.miniatura-wideo {
position: relative;
display: block;
border-radius: 12px; /* Opcjonalne: ładnie zaokrągla rogi */
overflow: hidden;
cursor: pointer;
transition: transform 0.4s ease, box-shadow 0.4s ease;
}
/* 1. Nakładka przyciemniająca obraz (lekko ciemna w spoczynku) */
.miniatura-wideo::before {
content: "";
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.2);
z-index: 1;
transition: background 0.4s ease;
}
/* 2. Przycisk Play na środku (kółko + ikona SVG) */
.miniatura-wideo::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80px;
height: 80px;
background-color: rgba(227, 24, 55, 0.9); /* Twój kabaretowy czerwony */
border-radius: 50%;
z-index: 2;
/* Ikona Play zakodowana w CSS */
background-image: url('data:image/svg+xml;utf8,');
background-size: 25px;
background-repeat: no-repeat;
background-position: 55% 50%; /* Trójkąt lekko w prawo, by wyglądał symetrycznie */
transition: all 0.3s ease;
box-shadow: 0 0 0 0 rgba(227, 24, 55, 0.7);
animation: pulsowanie-play 2s infinite;
}
/* Płynne skalowanie samego zdjęcia */
.miniatura-wideo img {
transition: transform 0.6s ease;
display: block;
width: 100%;
}
/* --- EFEKTY PO NAJECHANIU MYSZKĄ (HOVER) --- */
/* Twój żółty cień i lekkie uniesienie */
.miniatura-wideo:hover {
transform: translateY(-5px);
box-shadow: 0px 20px 80px 0px rgba(255, 205, 5, 0.4);
}
/* Lekkie powiększenie zdjęcia wewnątrz */
.miniatura-wideo:hover img {
transform: scale(1.05);
}
/* Mocniejsze przyciemnienie zdjęcia, by przycisk był czytelniejszy */
.miniatura-wideo:hover::before {
background: rgba(0, 0, 0, 0.5);
}
/* Przycisk Play robi się biały, a ikona czerwona (przestaje pulsować) */
.miniatura-wideo:hover::after {
background-color: #ffffff;
background-image: url('data:image/svg+xml;utf8,');
transform: translate(-50%, -50%) scale(1.1);
animation: none;
}
/* Animacja pulsowania wokół przycisku */
@keyframes pulsowanie-play {
0% { transform: translate(-50%, -50%) scale(0.95); box-shadow: 0 0 0 0 rgba(227, 24, 55, 0.7); }
70% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 0 15px rgba(227, 24, 55, 0); }
100% { transform: translate(-50%, -50%) scale(0.95); box-shadow: 0 0 0 0 rgba(227, 24, 55, 0); }
}
/* --- WSPÓLNE DLA OBU WERSJI --- */
.obraz-z-ramka {
position: relative;
z-index: 1;
}
.obraz-z-ramka img {
border-radius: 16px;
transition: transform 0.5s ease, box-shadow 0.5s ease !important;
display: block;
width: 100%;
}
/* --- EFEKTY HOVER (Wspólne) --- */
.obraz-z-ramka:hover img {
transform: translateY(-10px) scale(1.02);
box-shadow: 0px 20px 80px 0px rgba(255, 205, 5, 0.4) !important;
}
/* --- WERSJA LEWA (Ramka wystaje z lewej i góry) --- */
.ramka-lewa {
padding: 20px 0 0 20px !important;
}
.ramka-lewa::before {
content: '';
position: absolute;
top: 0;
right: 15px;
bottom: 15px;
left: 0px;
border: 3px dashed #333333 !important;
border-radius: 10px;
z-index: -1 !important;
transition: all 0.5s ease;
}
.ramka-lewa:hover::before {
top: -4px; left: 5px;
border-color: #E31837 !important;
}
/* --- WERSJA PRAWA (Ramka wystaje z prawej i góry) --- */
.ramka-prawa {
padding: 20px 20px 0 0 !important;
}
.ramka-prawa::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 15px;
left: 15px;
border: 3px dashed #333333 !important;
border-radius: 10px;
z-index: -1 !important;
transition: all 0.5s ease;
}
.ramka-prawa:hover::before {
top: -4px; right: 5px;
border-color: #E31837 !important;
}
/* --- CSS DLA KARUZELI OPINII --- */
/* Główny kontener musi ukrywać to, co wyjeżdża na boki */
.karuzela-opinii {
overflow: hidden !important;
width: 100% !important;
max-width: 100vw !important;
}
/* Wymuszamy na Elementorze układ poziomy bez zawijania */
.karuzela-opinii .swiper-wrapper {
display: flex !important;
flex-wrap: nowrap !important;
flex-direction: row !important;
align-items: stretch !important; /* Rozciąga opinie do tej samej wysokości */
}
/* Każda pojedyncza opinia (slajd) */
.karuzela-opinii .swiper-slide {
flex-shrink: 0 !important; /* Zabrania Elementorowi zgniatania slajdów */
height: auto !important; /* Karty będą równej wysokości */
display: flex !important;
flex-direction: column !important;
}
@media (max-width: 767px) {
/* 1. Upewniamy się, że wrapper Swipera ma 100% i nic nie wystaje */
.karuzela-opinii {
overflow: hidden !important;
padding: 0 15px !important;
}
/* 2. WYMUSZENIE: Każdy slajd ma szerokość 100% ekranu - to rozwiąże problem "dwóch opinii" */
.karuzela-opinii .swiper-slide {
width: 100% !important;
max-width: 100% !important;
flex: 0 0 100% !important;
margin-right: 0 !important;
}
/* 3. Wyśrodkowanie karty wewnątrz slajdu */
.ozdoba {
width: 100% !important;
margin: 0 auto !important;
}
}
/* --- CSS DLA KARUZELI OPINII -- END -- */
/* --- NIEZALEŻNY PRZYCISK PLAY (PULSUJĄCY) --- */
.przycisk-play {
position: relative;
display: inline-block;
cursor: pointer;
transition: all 0.3s ease;
}
/* Przycisk (kółko + ikona) */
.przycisk-play::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80px;
height: 80px;
background-color: rgba(227, 24, 55, 0.9); /* Czerwony */
border-radius: 50%;
z-index: 10;
background-image: url('data:image/svg+xml;utf8,');
background-size: 25px;
background-repeat: no-repeat;
background-position: 55% 50%;
box-shadow: 0 0 0 0 rgba(227, 24, 55, 0.7);
animation: pulsowanie-play 2s infinite;
transition: all 0.3s ease;
}
/* Efekt po najechaniu na przycisk */
.przycisk-play:hover::after {
background-color: #ffffff;
background-image: url('data:image/svg+xml;utf8,');
transform: translate(-50%, -50%) scale(1.1);
animation: none;
}
@keyframes pulsowanie-play {
0% { transform: translate(-50%, -50%) scale(0.95); box-shadow: 0 0 0 0 rgba(227, 24, 55, 0.7); }
70% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 0 15px rgba(227, 24, 55, 0); }
100% { transform: translate(-50%, -50%) scale(0.95); box-shadow: 0 0 0 0 rgba(227, 24, 55, 0); }
}
@media (max-width: 689px) {
#block-9 .wp-block-buttons {
justify-content: center;
}
#block-9 .wp-block-paragraph {
gap: 2px;
display: grid;
}
}
input {
color: #151012 !important;
}
.wpforms-field-large {
color: #151012 !important;
}
.wpforms-submit {
background-color: #69727D;
font-weight: 700;
fill: var(--e-global-color-blocksy_palette_3);
color: var(--e-global-color-blocksy_palette_3);
border-style: none;
font-size: 16px;
line-height: 24px;
border-radius: 4px 4px 4px 4px;
padding: 12px 30px 12px 30px;
font-family: 'Roboto', sans-serif;
letter-spacing: 0.2px;
}
@media (max-width: 1024px) {
.wpforms-submit {
font-size: 15px;
line-height: 23px;
padding: 12px 27px 12px 27px;
}
}
@media (max-width: 767px) {
.wpforms-submit {
font-size: 14px;
line-height: 22px;
padding: 10px 20px 10px 20px;
}
}
.wpforms-submit:hover {
background-color: #69727D;
color: var(--e-global-color-blocksy_palette_3);
}
/* --- WSPÓLNY WYGLĄD SCENICZNEGO MARKERA (DLA H1 i H2) --- */
h1.elementor-heading-title span.colorheading,
h2.elementor-heading-title span.colorheading {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
background-color: #E31837 !important;
padding: 4px 12px !important;
border: 3px dashed #0033A0 !important;
border-radius: 6px !important;
display: inline-block !important;
transform: rotate(-3deg) !important;
box-shadow: 0px 15px 35px rgba(255, 205, 5, 0.5) !important;
font-weight: 900 !important;
margin: 5px 0 5px 8px !important;
}
/* --- WSPÓLNY WYGLĄD SCENICZNEGO MARKERA (DLA H1 i H2) --- */
h1.elementor-heading-title span.colorheading,
h2.elementor-heading-title span.colorheading {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
background-color: #E31837 !important;
padding: 4px 12px !important;
border: 3px dashed #0033A0 !important;
border-radius: 6px !important;
display: inline-block !important;
transform: rotate(-3deg) !important;
box-shadow: 0px 15px 35px rgba(255, 205, 5, 0.5) !important;
font-weight: 900 !important;
margin: 5px 0 5px 8px !important;
}
/* --- ROZMIARY DLA EKRANÓW POWYŻEJ TABLETÓW --- */
h1.elementor-heading-title span.colorheading { font-size: 51px !important; line-height: 62px !important; }
h2.elementor-heading-title span.colorheading { font-size: 32px !important; line-height: 40px !important; }
/* --- TABLET (do 1024px) --- */
@media (max-width: 1024px) {
h1.elementor-heading-title span.colorheading,
h2.elementor-heading-title span.colorheading {
font-size: 25px !important;
line-height: 35px !important;
}
}
/* --- MOBILKA (do 767px) --- */
@media (max-width: 767px) {
h1.elementor-heading-title span.colorheading,
h2.elementor-heading-title span.colorheading {
font-size: 22px !important;
line-height: 32px !important;
/* Na mobilce lekko zmniejszamy też padding, żeby wlepka nie była za wielka */
padding: 2px 8px !important;
}
}
.hero-zajawka {
display: inline-block;
color: #FFD100;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 25px;
background: rgba(255, 205, 5, 0.1);
padding: 6px 18px;
border-radius: 50px;
border: 1px solid rgba(255, 205, 5, 0.3);
font-family: 'Roboto', sans-serif;
}
@media (max-width: 767px) {
.hero-zajawka {
font-size: 12px !important;
margin-bottom: 12px !important;
padding: 4px 16px !important;
}
}
/* --- Czerwona winieta TYLKO na środku --- */
.hero-scena {
position: relative;
overflow: hidden;
}
.hero-scena::after {
content: "";
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
/* Gradient: Czerwony w środku (0.3 przezroczystości), przeźroczysty na bokach */
background: radial-gradient(circle at center, rgba(227, 24, 55, 0.4) 0%, rgba(0,0,0,0.2) 60%, transparent 100%);
pointer-events: none; /* Pozwala klikać w przyciski pod spodem */
z-index: 1;
}
/* Upewnij się, że cała zawartość jest nad gradientem */
.hero-ramka-wewnetrzna {
position: relative;
z-index: 2;
}
.wpforms-container {
margin: 0px !important;
}
/* --- GŁÓWNY KONTENER GALERII (Siatka) --- */
.kabaret-galeria-grid {
display: grid;
/* Domyślnie na komputerach: 4 kolumny */
grid-template-columns: repeat(4, 1fr);
gap: 25px;
padding: 20px 0;
}
/* TABLETY (np. iPad, ekrany do 1024px) -> 3 zdjęcia obok siebie */
@media (max-width: 1024px) {
.kabaret-galeria-grid {
grid-template-columns: repeat(3, 1fr) !important;
gap: 15px; /* Troszkę mniejsza przerwa na mniejszym ekranie */
}
}
/* MOBILKI / TELEFONY (ekrany do 768px) -> 2 zdjęcia obok siebie */
@media (max-width: 768px) {
.kabaret-galeria-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 10px; /* Mniejsza przerwa, żeby zdjęcia były większe */
}
}
/* --- POJEDYNCZY KAFELEK ZDJĘCIA (.galeria-item) --- */
.galeria-item {
position: relative;
overflow: hidden; /* Utrzymuje powiększające się zdjęcie wewnątrz */
border: 2px dashed #333333; /* Domyślna szara ramka */
border-radius: 16px;
aspect-ratio: 4 / 3; /* Utrzymuje ładne proporcje zdjęć */
transition: all 0.4s ease;
}
/* 1. Efekt na główny kafelek (znikająca stara ramka + żółty cień) */
.galeria-item:hover {
border-color: transparent; /* Płynnie chowa szarą ramkę */
box-shadow: 0px 20px 50px 0px rgba(255, 205, 5, 0.4);
}
/* 2. Tworzymy animowaną niebieską ramkę wewnątrz kafelka */
.galeria-item::after {
content: "";
position: absolute;
/* Ustawiamy na 0, aby 'overflow: hidden' nie ucięło linii */
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none; /* Pozwala kliknąć w zdjęcie pod spodem */
z-index: 10;
/* Wzór: kreska 6px, przerwa 6px (Niebieski kolor #0033A0) */
background-image:
repeating-linear-gradient(to right, #0033A0 0 6px, transparent 6px 12px),
repeating-linear-gradient(to bottom, #0033A0 0 6px, transparent 6px 12px),
repeating-linear-gradient(to left, #0033A0 0 6px, transparent 6px 12px),
repeating-linear-gradient(to top, #0033A0 0 6px, transparent 6px 12px);
background-position:
top left,
top right,
bottom right,
bottom left;
/* Grubość linii: 2px, ukryta na start (długość 0) */
background-size:
0 2px,
2px 0,
0 2px,
2px 0;
background-repeat: no-repeat;
transition: background-size 0.5s ease;
border-radius: inherit; /* Dziedziczy zaokrąglenie rogów (16px) */
}
/* 3. Po najechaniu myszką rysujemy cienkie niebieskie linie na 100% */
.galeria-item:hover::after {
background-size:
100% 2px,
2px 100%,
100% 2px,
2px 100%;
}
/* --- OBRAZEK --- */
.galeria-item img {
width: 100%;
height: 100% !important;
object-fit: cover; /* Wypełnia ramkę bez zniekształceń */
display: block;
transition: transform 0.6s ease;
}
/* Zoom zdjęcia przy najechaniu myszką */
.galeria-item:hover img {
transform: scale(1.15); /* Zdjęcie się powiększa */
opacity: 0.85; /* Lekkie przyciemnienie */
}
/* Stylizacja kontenera paginacji */
.kabaret-pagination {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 40px;
padding: 20px;
}
/* Stylizacja przycisków stron */
.kabaret-pagination .page-link {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: 2px dashed #69727D; /* Szara przerywana ramka */
border-radius: 8px;
color: #333;
text-decoration: none;
font-weight: bold;
transition: all 0.3s ease;
}
/* Efekt po najechaniu i dla aktywnej strony */
.kabaret-pagination .page-link:hover,
.kabaret-pagination .page-link.active {
background-color: #E31837; /* Czerwone tło po najechaniu/aktywne */
color: #fff;
border-color: #E31837;
}
/* =================================================================
RESPONSYWNA PAGINACJA WPISÓW (STYL KABARETOWY)
================================================================= */
/* Główny kontener paginacji */
.ct-pagination {
display: flex !important;
justify-content: center !important;
align-items: center !important;
gap: 10px !important;
margin-top: 40px !important;
padding: 20px 0 !important;
}
/* Wyprostowanie wewnętrznego kontenera z numerami */
.ct-pagination .ct-hidden-sm {
display: flex !important;
gap: 10px !important;
align-items: center !important;
}
/* Wspólny wygląd wszystkich kafli (liczb i przycisku Następne) */
.ct-pagination .page-numbers {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 40px !important;
height: 40px !important;
padding: 0 14px !important; /* Bezpieczna przestrzeń dla tekstu "Następne" */
border: 2px dashed #69727D !important; /* Szara przerywana ramka */
border-radius: 8px !important;
color: #333 !important;
text-decoration: none !important;
font-weight: bold !important;
background: transparent !important;
transition: all 0.3s ease !important;
box-sizing: border-box !important;
}
/* Stan aktywnej (obecnej) strony */
.ct-pagination .page-numbers.current {
background-color: #E31837 !important; /* Czerwone tło */
color: #fff !important;
border-color: #E31837 !important;
}
/* Efekt najechania myszką (hover) */
.ct-pagination .page-numbers:hover {
background-color: #E31837 !important; /* Czerwone tło */
color: #fff !important;
border-color: #E31837 !important;
}
/* Stylizacja strzałki SVG w przycisku "Następne" */
.ct-pagination .page-numbers svg {
margin-left: 8px !important;
fill: currentColor !important; /* Dzięki temu ikona zmieni kolor na biały razem z tekstem */
transition: transform 0.3s ease !important;
}
/* Delikatne, dynamiczne wysunięcie strzałki w prawo po najechaniu */
.ct-pagination .page-numbers:hover svg {
transform: translateX(3px) !important;
}
/* Wyłączenie klikalności dla autora wpisu */
.meta-author .ct-meta-element-author {
pointer-events: none !important; /* Blokuje jakiekolwiek kliknięcia */
cursor: default !important; /* Zmienia kursor z rączki na zwykłą strzałkę */
text-decoration: none !important; /* Usuwa ewentualne podkreślenie linku */
color: inherit !important; /* Sprawia, że tekst przyjmie kolor zwykłego tekstu wokół niego */
}
/* Ucinanie długich tytułów wpisów na liście (archiwum) */
.blog .entry-title a {
display: -webkit-box !important;
-webkit-line-clamp: 2 !important; /* Tutaj określasz po ilu linijkach tekst ma się uciąć */
-webkit-box-orient: vertical !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: normal !important;
}
/* =================================================================
STYLIZACJA META DANYCH WPISU (Autor i Data) na styl .hero-zajawka
================================================================= */
/* Główny kontener paska ("pastylka") */
.single-post .entry-meta {
display: inline-block !important;
margin-bottom: 25px !important;
padding: 6px 18px !important;
background: rgba(255, 205, 5, 0.1) !important;
border: 1px solid rgba(255, 205, 5, 0.3) !important;
border-radius: 50px !important;
list-style: none !important;
}
/* Formatowanie tekstu wewnątrz (aby wszystko było złote i pisane wielkimi literami) */
.single-post .entry-meta,
.single-post .entry-meta li,
.single-post .entry-meta a,
.single-post .entry-meta span,
.single-post .entry-meta time {
color: #FFD100 !important;
font-size: 14px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 2px !important;
text-decoration: none !important;
}
/* Opcjonalnie: Delikatne odsunięcie daty od autora (jeśli Twój motyw używa ukośnika, to zrobi mu trochę miejsca) */
.single-post .entry-meta li {
display: inline-block !important;
margin-right: 5px !important;
}
/* =================================================================
NAKŁADKA (GRADIENT) NA BANER HERO
================================================================= */
/* 1. Ustawienie pozycjonowania dla głównego kontenera baneru */
.hero-section[data-type="type-2"] {
position: relative !important;
}
/* 2. Twój efekt radial-gradient dodany jako ::after */
.hero-section[data-type="type-2"]::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at center, rgba(227, 24, 55, 0.4) 0%, rgba(0, 0, 0, 0.2) 60%, transparent 100%);
pointer-events: none;
z-index: 1;
}
/* 3. Wyciągnięcie tekstu nagłówka ponad nakładkę (z-index: 2) */
.hero-section[data-type="type-2"] .entry-header {
position: relative;
z-index: 2;
}
/* =================================================================
STYLIZACJA STATYCZNEGO BOKSU KABARETOWEGO ([kabaret_boks])
================================================================= */
/* Główny kontener boksu */
.kabaret-static-box {
background: #1a1a1a; /* Ciemne eleganckie tło */
border-radius: 16px;
border: 1px dashed #ffd100 !important;
box-shadow: 0 10px 30px rgba(0,0,0,0.3); /* Subtelny cień */
overflow: hidden;
color: #fff;
margin: 20px 0; /* Odstęp od elementów wokół */
}
/* Układ siatki Flexbox */
.kabaret-box-grid {
display: flex;
flex-wrap: wrap;
align-items: center; /* Centruje w pionie */
}
/* Obszar zdjęcia/plakatu */
.kabaret-box-image-area {
flex: 1 1 35%; /* Zajmuje 35% szerokości */
min-width: 200px; /* Minimalna szerokość, żeby nie był zbyt mały */
}
.kabaret-box-image-area img {
width: 100%;
height: 100%;
object-fit: cover; /* Wypełnia przestrzeń bez zniekształceń */
display: block;
}
/* Obszar treści tekstowej */
.kabaret-box-content-area {
flex: 1 1 65%; /* Zajmuje resztę szerokości */
padding: 30px; /* Odstępy wewnątrz */
display: flex;
flex-direction: column;
justify-content: center;
}
/* Stylizacja nagłówka */
.kabaret-box-content-area h3 {
color: #FFD100; /* Złoty/żółty kolor */
margin-top: 0;
font-size: 22px;
margin-bottom: 10px;
line-height: 1.2;
}
/* Stylizacja tekstu */
.kabaret-box-content-area p {
font-size: 15px;
line-height: 1.6;
margin-bottom: 20px;
color: #ddd;
}
.ct-hidden-sm .wpforms-submit {
width: fit-content !important;
}
/* --- RESPONSYWNOŚĆ (Media Queries) --- */
/* Dla tabletów i mniejszych ekranów */
@media (max-width: 768px) {
.kabaret-box-image-area {
flex: 1 1 100%; /* Zdjęcie zajmuje całą szerokość */
height: 300px;
max-height: 300px; /* Ograniczamy wysokość zdjęcia */
}
.kabaret-box-content-area {
flex: 1 1 100%; /* Treść zajmuje całą szerokość */
padding: 20px;
text-align: center; /* Centrujemy tekst */
}
.kabaret-box-content-area h3 { font-size: 19px; }
.kabaret-box-btn {
align-self: center; /* Centrujemy przycisk */
}
}
/* =================================================================
PŁYWAJĄCY PASEK BOCZNY (Sticky Sidebar)
================================================================= */
#sidebar .ct-sidebar {
position: -webkit-sticky !important; /* Wsparcie dla Safari */
position: sticky !important;
/* Odległość paska od góry ekranu podczas przewijania.
Jeśli masz przyklejone menu główne (header), zwiększ tę wartość np. do 120px */
top: 60px !important;
/* Zapobiega rozciąganiu się paska na całą wysokość kontenera */
height: max-content !important;
/* Delikatne, opcjonalne odsunięcie od dolnej krawędzi okna */
margin-bottom: 40px !important;
}
.hero-section {
position: relative !important;
}
.hero-section::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #151012;
opacity: 0.6;
z-index: 1;
pointer-events: none;
}
.hero-section > * {
position: relative;
z-index: 2;
}
/* =================================================================
WYMUSZENIE WIDOCZNOŚCI PASKA BOCZNEGO NA URZĄDZENIACH MOBILNYCH
================================================================= */
@media (max-width: 1024px) {
aside#sidebar.ct-hidden-sm,
aside#sidebar.ct-hidden-md {
display: block !important;
width: 100% !important; /* Upewniamy się, że na telefonie pasek zajmie pełną szerokość pod wpisami */
margin-top: 40px; /* Odstęp od ostatniego wpisu */
}
}
.nag {
font-size: 16px !important;
font-family: 'Sen', sans-serif;
}
.imgozd img{
border-radius: 4px !important;
}
.imgozd:hover img {
transform: scale(1.1) !important;
}
.imgozd {
overflow: hidden;
}
.imgozd:hover {
box-shadow: 0px 15px 48px 0px rgba(255, 205.0000000000001, 5.000000000000011, 0.4);
}
.imgozd .elementor-image-box-content {
padding-left: 9px;
padding-right: 9px;
}
.cky-banner-element:hover {
color: #FFD100 !important;
}
.cky-banner-element {
cursor: pointer;
}