/* ============================================================
RAPORT — Polski Rynek Paliw (raport.informationmarket.pl)
Brand CSS dla szablonu imsa-multi (Joomla 6)
Ścieżka docelowa:
media/templates/site/imsa-multi/css/brands/raport/style.css
Ładowany z brands/raport/index.php przez:
$wa->registerAndUseStyle('brand.raport', 'brands/raport/style.css');
ZAKRES: wszystkie reguły są zaprefiksowane .brand-raport, więc plik
nie może wpłynąć na pozostałe marki multi-szablonu.
MOTYW: ciemna wersja jest sterowana atrybutem data-bs-theme="dark"
na — tak jak w całym imsa-multi (NIE data-theme, jak
w prototypie HTML; selektory zostały przepięte przy porcie).
PALETA (sekcja :root ok. linii 2600):
--primary-color #1f2937 grafit — nagłówki, stopka, CTA
--accent-color #C2410C rdza paliwowa — akcent sygnaturowy
--accent-warm #F59E0B amber — akcent na ciemnym tle
--sec-hurt #1a1a1a Hurt
--sec-detal #6F4E37 Detal
--sec-bio #166534 Biopaliwa
--sec-lpg #1d4ed8 LPG
--sec-em #EA580C Elektromobilność
--sec-pink #ec4899 Zimna Fuzja
============================================================ */
/* ================================================================
NA STACJI PALIW — style marki (homepage + komponenty wspólne)
Plik ładowany z templates/imsa-multi/brands/{brandKey}/index.php
Zależność: Bootstrap 5.3 (ładowany w _shared/head-setup.php)
================================================================ */
/* --- TOKENY ---------------------------------------------------- */
:root {
--primary-color: #2A1810;
--accent-color: #B86A2A;
--text-color:#425466;
--bg-light: #F6F9FC;
--border-color: #e2e8f0;
}
.text-primary { color: var(--accent-color) !important; }
html, body { overflow-x: hidden; }
/* --- BAZA ------------------------------------------------------ */
body.brand-raport {
font-family: 'Open Sans', sans-serif;
color: var(--text-color);
background-color: #fff;
}
.brand-raport h1,
.brand-raport h2,
.brand-raport h3,
.brand-raport h4,
.brand-raport h5,
.brand-raport .navbar-brand {
font-family: 'Montserrat', sans-serif;
color: var(--primary-color);
padding: 0;
}
/* --- NAVBAR (glassmorphism) ------------------------------------ */
.brand-raport .container-header {
position: sticky;
top: 0;
z-index: 1030;
}
.brand-raport .container-header .navbar {
background-color: rgba(255, 255, 255, 0.9) !important;
backdrop-filter: blur(10px);
box-shadow: 0 2px 15px rgba(0,0,0,0.05);
transition: all 0.3s ease;
padding: 0;
}
.brand-raport .nav-link {
font-weight: 600;
color: var(--primary-color) !important;
position: relative;
}
.brand-raport .nav-link::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: 0;
left: 0;
background-color: var(--accent-color);
transition: width 0.3s ease;
}
.brand-raport .nav-link:hover::after,
.brand-raport .nav-link.active::after {
width: 100%;
}
.brand-raport .footer-logo {
max-height: 40px;
width: auto;
}
/* Logo SVG w navbarze — renderowane przez ![]()
, więc CSS currentColor
NIE działa (img tworzy osobny dokument). Zostawiamy naturalny kolor
SVG (ciemny szaroczarny #232020 z oryginału Illustratora) — na białym
tle navbara wygląda profesjonalnie i jest blisko granatu palety.
Wysokość większa niż w slim-footerze, bo navbar to główny punkt
identyfikacji marki. */
.brand-raport .navbar-logo {
height: 90px;
width: auto;
display: block;
}
@media (max-width: 768px) {
/* Na mobile zmniejszamy logo — żeby mieściło się w jednej linii z hamburgerem */
.brand-raport .navbar-logo {
height: 44px;
}
}
/* Flagi językowe PL/EN — spójne z navem informationmarket.pl */
.brand-raport .im-nav-flags {
/* Stała szerokość flag, nie pozwalamy żeby się rozjechały w navbarze */
}
.brand-raport .im-lang-flag {
display: inline-flex;
align-items: center;
line-height: 0;
border-radius: 3px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(42, 24, 16, 0.15);
opacity: 0.85;
transition: opacity 0.2s ease, transform 0.2s ease;
}
.brand-raport .im-lang-flag:hover {
opacity: 1;
transform: translateY(-1px);
}
.brand-raport .im-lang-flag img {
width: 24px;
height: auto;
display: block;
}
/* --- PRZYCISKI ------------------------------------------------- */
.brand-raport .btn-primary {
background-color: var(--primary-color);
border: none;
padding: 12px 30px;
font-weight: 600;
border-radius: 50px;
transition: all 0.3s ease;
}
.brand-raport .btn-primary:hover {
background-color: #1a0d08;
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(42, 24, 16, 0.2);
}
.brand-raport .btn-accent {
background-color: var(--accent-color);
color: var(--primary-color);
border: none;
padding: 12px 30px;
font-weight: 700;
border-radius: 50px;
transition: all 0.3s ease;
}
.brand-raport .btn-accent:hover {
background-color: #9a5520;
color: var(--primary-color);
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(184, 106, 42, 0.25);
}
.brand-raport .btn-outline-light-custom {
background-color: transparent;
color: #fff;
border: 2px solid rgba(255,255,255,0.6);
padding: 10px 28px;
font-weight: 600;
border-radius: 50px;
transition: all 0.3s ease;
}
.brand-raport .btn-outline-light-custom:hover {
background-color: #fff;
color: var(--primary-color);
border-color: #fff;
}
/* Outline pasujący wymiarami do btn-primary (na jasnym tle hero) */
.brand-raport .btn-outline-secondary-custom {
background-color: transparent;
color: var(--primary-color);
border: 2px solid var(--primary-color);
padding: 10px 28px;
font-weight: 600;
border-radius: 50px;
transition: all 0.3s ease;
line-height: 1.5;
}
.brand-raport .btn-outline-secondary-custom:hover {
background-color: var(--primary-color);
color: #fff;
}
/* Dostosowanie btn-primary aby line-height był identyczny */
.brand-raport .btn-primary {
line-height: 1.5;
}
/* --- HERO HOME — editorial dark, kafelek pełen warstw graficznych --- */
.brand-raport .hero-home {
padding: 30px 0 30px;
/*background-color: var(--bg-light);*/
}
[data-bs-theme="dark"] .brand-raport .hero-home {
/*background-color: #241510;*/
}
/* Główny kafelek — granatowe tło, gradient z głębią */
.brand-raport .hero-card {
position: relative;
overflow: hidden;
border-radius: 24px;
padding: 70px 60px;
/* Gradient od ciemnogranatu w lewym górnym do głębszego granatu w prawym dolnym */
background:
linear-gradient(135deg, #2a1810 0%, #1f1109 50%, #150a05 100%);
box-shadow:
0 20px 60px rgba(0, 0, 0, 0.35),
inset 0 1px 0 rgba(255, 255, 255, 0.05);
color: #fff;
isolation: isolate; /* tworzy lokalny stacking context dla warstw deco */
}
/* === WARSTWY DEKORACYJNE TŁA === */
.brand-raport .hero-deco {
position: absolute;
pointer-events: none;
z-index: 0;
}
/* 1. Subtelna siatka kropek — bazowa warstwa */
.brand-raport .hero-deco-grid {
inset: 0;
background-image:
radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.08) 1px, transparent 0);
background-size: 22px 22px;
opacity: 0.6;
}
/* 2. Diagonalne cienkie linie — sugeruje "techniczność" branży paliwowej */
.brand-raport .hero-deco-lines {
inset: 0;
background-image: repeating-linear-gradient(
135deg,
transparent 0,
transparent 60px,
rgba(184, 106, 42, 0.03) 60px,
rgba(184, 106, 42, 0.03) 61px
);
}
/* 3. Cyjanowy "spotlight" w prawym górnym rogu */
.brand-raport .hero-deco-glow-cyan {
top: -150px;
right: -120px;
width: 500px;
height: 500px;
background: radial-gradient(circle, rgba(184, 106, 42, 0.18) 0%, transparent 60%);
filter: blur(20px);
}
/* 4. Fioletowo-błękitny "spotlight" w lewym dolnym rogu */
.brand-raport .hero-deco-glow-violet {
bottom: -180px;
left: -150px;
width: 480px;
height: 480px;
background: radial-gradient(circle, rgba(212, 165, 116, 0.15) 0%, transparent 60%);
filter: blur(20px);
}
/* Treść hero musi być nad warstwami deco */
.brand-raport .hero-content {
position: relative;
z-index: 1;
}
/* === EYEBROW z animowaną kropką "live" === */
.brand-raport .hero-card .hero-eyebrow {
display: inline-flex;
align-items: center;
color: var(--accent-color);
text-transform: uppercase;
letter-spacing: 2.5px;
font-weight: 700;
font-size: 0.78rem;
padding: 8px 16px;
background-color: rgba(184, 106, 42, 0.1);
border: 1px solid rgba(184, 106, 42, 0.25);
border-radius: 50px;
}
.brand-raport .hero-eyebrow-dot {
display: inline-block;
width: 7px;
height: 7px;
background-color: var(--accent-color);
border-radius: 50%;
margin-right: 10px;
box-shadow: 0 0 0 0 rgba(184, 106, 42, 0.7);
animation: hero-pulse 2s infinite;
}
@keyframes hero-pulse {
0% { box-shadow: 0 0 0 0 rgba(184, 106, 42, 0.7); }
70% { box-shadow: 0 0 0 10px rgba(184, 106, 42, 0); }
100% { box-shadow: 0 0 0 0 rgba(184, 106, 42, 0); }
}
/* === BOLD TYTUŁ z kolorowym akcentowym słowem === */
.brand-raport .hero-title {
font-family: 'Montserrat', sans-serif;
font-size: 3.2rem;
line-height: 1.05;
font-weight: 800;
color: #fff;
margin-top: 1.2rem;
letter-spacing: -0.5px;
}
.brand-raport .hero-title-accent {
/* Akcentowane słowo "wodorowa" — gradient cyjan→błękit */
background: linear-gradient(120deg, #B86A2A 0%, #D4A574 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* === LEAD — jasny tekst na ciemnym tle === */
.brand-raport .hero-lead {
font-size: 1.1rem;
line-height: 1.65;
color: rgba(255, 255, 255, 0.75);
max-width: 540px;
}
/* === CTA BUTTONS — primary granatowo-cyjanowy, outline jak w "Archiwum" === */
.brand-raport .btn-hero-primary {
display: inline-flex;
align-items: center;
background-color: var(--accent-color);
color: var(--primary-color);
border: 2px solid var(--accent-color);
padding: 12px 28px;
font-weight: 700;
border-radius: 50px;
transition: all 0.25s ease;
text-decoration: none;
line-height: 1.5;
}
.brand-raport .btn-hero-primary:hover {
background-color: #fff;
border-color: #fff;
color: var(--primary-color);
transform: translateY(-2px);
box-shadow: 0 12px 24px rgba(184, 106, 42, 0.25);
}
.brand-raport .btn-hero-outline {
display: inline-flex;
align-items: center;
background-color: transparent;
color: #fff;
border: 2px solid rgba(255, 255, 255, 0.4);
padding: 12px 28px;
font-weight: 600;
border-radius: 50px;
transition: all 0.25s ease;
text-decoration: none;
line-height: 1.5;
}
.brand-raport .btn-hero-outline:hover {
background-color: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.7);
color: #fff;
transform: translateY(-2px);
}
/* === META PASEK — drobne info pod CTA === */
.brand-raport .hero-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 14px;
margin-top: 28px;
padding-top: 24px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
font-size: 0.82rem;
color: rgba(255, 255, 255, 0.55);
letter-spacing: 0.3px;
}
.brand-raport .hero-meta-item {
display: inline-flex;
align-items: center;
}
.brand-raport .hero-meta-item .bi {
color: var(--accent-color);
}
.brand-raport .hero-meta-divider {
width: 3px;
height: 3px;
background-color: rgba(255, 255, 255, 0.3);
border-radius: 50%;
}
/* === OKŁADKA z numerem wydania w tle (jak masthead magazynu) === */
.brand-raport .hero-cover-wrap {
position: relative;
text-align: center;
}
.brand-raport .hero-issue-number {
/* Duża cyfra "35" za okładką — graficzny akcent */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: 'Montserrat', sans-serif;
font-weight: 800;
font-size: 22rem;
line-height: 1;
color: rgba(255, 255, 255, 0.04);
z-index: 0;
user-select: none;
pointer-events: none;
letter-spacing: -0.05em;
}
.brand-raport .hero-cover {
position: relative;
z-index: 1;
max-width: 100%;
max-height: 420px;
width: auto;
height: auto;
border-radius: 4px;
/* Pochylenie + cień jak na biurku */
transform: perspective(800px) rotateY(-8deg) rotateX(2deg);
box-shadow:
0 30px 60px -10px rgba(0, 0, 0, 0.5),
0 18px 36px -18px rgba(0, 0, 0, 0.4),
-8px 0 20px -10px rgba(184, 106, 42, 0.15);
transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.brand-raport .hero-cover:hover {
transform: perspective(800px) rotateY(-2deg) rotateX(0deg) translateY(-8px);
}
/* --- SEKCJA O MAGAZYNIE ---------------------------------------- */
.brand-raport .about-section {
padding: 30px 0 30px;
background-color: var(--bg-light);
}
/* Pojedyncza karta zawierająca całą sekcję */
.brand-raport .about-panel {
background-color: #fff;
border: 1px solid var(--border-color);
border-radius: 15px;
padding: 40px 40px 30px;
box-shadow: 0 4px 14px rgba(42, 24, 16, 0.04);
}
/* Mniejszy nagłówek niż wcześniej (poprzednio display-5 ~ 2.5rem) */
.brand-raport .about-title {
font-size: 1.6rem;
color: var(--primary-color);
}
.brand-raport .about-intro {
font-size: 0.95rem;
line-height: 1.65;
}
.brand-raport .about-intro p {
margin-bottom: 0.85rem;
}
.brand-raport .about-intro strong {
color: var(--primary-color);
}
/* Toggle button — pokazywanie/zwijanie obszarów tematycznych */
.brand-raport .btn-toggle-topics .label-collapse { display: none; }
.brand-raport .btn-toggle-topics:not(.collapsed) .label-collapse { display: inline; }
.brand-raport .btn-toggle-topics:not(.collapsed) .label-expand { display: none; }
/* Bootstrap dodaje .collapsed gdy kontener jest zwinięty.
Domyślny stan = bez .collapsed = ROZWINIĘTE = pokazujemy "Zwiń" */
.brand-raport .btn-toggle-topics .chevron-icon {
transition: transform 0.3s ease;
display: inline-block;
}
.brand-raport .btn-toggle-topics:not(.collapsed) .chevron-icon {
transform: rotate(180deg);
}
/* Mniejszy wariant kart — używany w sekcji About */
.brand-raport .topic-item-sm {
padding: 16px 14px;
height: 100%;
}
.brand-raport .topic-item-sm .topic-icon {
font-size: 1.3rem;
margin-bottom: 6px;
color: var(--accent-color);
}
.brand-raport .topic-item-sm h5 {
font-size: 0.92rem;
margin-bottom: 4px;
font-weight: 700;
}
.brand-raport .topic-item-sm p {
font-size: 0.8rem;
line-height: 1.45;
margin-bottom: 0;
}
.brand-raport .about-card {
background-color: #fff;
border: 1px solid var(--border-color);
border-radius: 15px;
padding: 35px;
height: 100%;
transition: all 0.3s ease;
}
.brand-raport .about-card:hover {
border-color: var(--accent-color);
box-shadow: 0 15px 35px rgba(42, 24, 16, 0.08);
}
.brand-raport .about-icon {
width: 60px;
height: 60px;
border-radius: 12px;
background: linear-gradient(135deg, var(--primary-color), #4a2f1c);
color: var(--accent-color);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.6rem;
margin-bottom: 20px;
}
/* --- SEKCJA ARTYKUŁÓW ------------------------------------------ */
.brand-raport .articles-section {
background-color: var(--bg-light);
padding: 90px 0;
}
.brand-raport .article-card {
background-color: #fff;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 5px 20px rgba(42, 24, 16, 0.05);
transition: all 0.3s ease;
height: 100%;
display: flex;
flex-direction: column;
}
.brand-raport .article-card:hover {
box-shadow: 0 20px 40px rgba(42, 24, 16, 0.12);
}
.brand-raport .article-card img {
width: 100%;
height: 220px;
object-fit: cover;
}
.brand-raport .article-card-body {
padding: 25px;
flex: 1;
display: flex;
flex-direction: column;
}
.brand-raport .article-category {
font-family: 'Montserrat', sans-serif;
font-weight: 800;
font-size: 0.75rem;
color: var(--primary-color);
background-color: var(--accent-color);
padding: 4px 12px;
display: inline-block;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 12px;
align-self: flex-start;
}
.brand-raport .article-title {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
color: var(--primary-color);
font-size: 1.35rem;
line-height: 1.3;
margin-bottom: 10px;
}
.brand-raport .article-meta {
font-size: 0.85rem;
color: #94a3b8;
margin-top: auto;
padding-top: 15px;
border-top: 1px solid #f0f4f8;
}
.brand-raport .article-read-more {
color: var(--primary-color);
font-weight: 700;
text-decoration: none;
font-size: 0.9rem;
}
.brand-raport .article-read-more:hover {
color: var(--accent-color);
}
/* --- SEKCJA TEMATYKI ------------------------------------------- */
.brand-raport .topics-section {
padding: 90px 0;
}
.brand-raport .topic-item {
padding: 15px 10px;
height: 100%;
}
.brand-raport .topic-icon {
font-size: 2.2rem;
color: var(--accent-color);
margin-bottom: 15px;
display: block;
}
.brand-raport .topic-item h5 {
font-weight: 700;
margin-bottom: 10px;
}
.brand-raport .topic-item p {
font-size: 0.92rem;
margin-bottom: 0;
}
/* --- BIEŻĄCY NUMER (newspaper-style, sklonowane z numer.html) -- */
.brand-raport .featured-issue {
padding: 30px 0;
background-color: #fff;
}
/* Nagłówek dziennikarski — Playfair, oddzielony grubą kreską */
.brand-raport .issue-header {
text-align: center;
}
.brand-raport .issue-header .hero-eyebrow {
color: var(--accent-color);
}
.brand-raport .issue-header-title {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 2.2rem;
line-height: 1.2;
color: var(--primary-color);
margin-bottom: 12px;
}
.brand-raport .issue-header-lead {
font-family: 'Montserrat', sans-serif;
font-size: 1.1rem;
color: var(--text-color);
margin: 0 auto 22px;
}
.brand-raport .issue-header-divider {
border: 0;
border-top: 2px solid var(--primary-color);
opacity: 1;
width: 80px;
margin: 0 auto;
}
.brand-raport .topic-hero-img {width: 100%;height: 360px;object-fit: cover;border-radius: 4px;box-shadow: 0 20px 40px rgba(42, 24, 16, 0.15);}
.brand-raport .section-divider {border-top: 2px solid var(--primary-color);margin: 40px 0;position: relative;}
.brand-raport .main-article-title {font-family: 'Montserrat', sans-serif;font-size: 2.5rem;line-height: 1.1;margin-top: 15px;color: var(--primary-color);}
.brand-raport .newspaper-columns {column-count: 3;column-gap: 40px;text-align: justify;column-rule: 1px solid var(--border-color);}
.brand-raport .newspaper-columns p {margin-bottom: 1rem;}
.brand-raport .article-lead-inline {font-weight: 600;color: var(--primary-color);}
.brand-raport .dropcap {font-family: 'Montserrat', sans-serif;font-weight: 700;font-size: 3.2rem;line-height: 0.9;color: var(--primary-color);float: left;padding: 4px 8px 0 0;margin-top: 4px;}
.brand-raport .topic-badge {background-color: var(--accent-color);color: var(--primary-color);font-weight: 800;text-transform: uppercase;padding: 5px 15px;font-size: 0.8rem;display: inline-block;}
.brand-raport .alt-article {padding: 30px 0;}
.brand-raport .alt-article img {width: 100%;height: 300px;object-fit: cover;}
.brand-raport .alt-article-title {font-family: 'Montserrat', sans-serif;font-size: 1.8rem;}
.brand-raport .page-number {font-family: 'Montserrat', sans-serif;font-weight: 800;font-size: 1.2rem;color: var(--primary-color);border-top: 1px solid var(--primary-color);display: inline-block;padding-top: 5px;}
.brand-raport .btn-more {background-color: var(--primary-color);color: white;border-radius: 0;padding: 15px 40px;font-weight: 700;transition: 0.3s;}
.brand-raport .btn-more:hover {background-color: var(--accent-color);color: var(--primary-color);}
/* --- PASEK NEWSLETTERA ----------------------------------------- */
.brand-raport .newsletter-strip {background: linear-gradient(135deg, var(--primary-color) 0%, #4a2f1c 100%);color: #fff;padding: 60px 0;}
.brand-raport .newsletter-strip h3 {color: #fff;}
.brand-raport .newsletter-form .form-control {border-radius: 50px 0 0 50px;border: none;padding: 14px 25px;}
.brand-raport .newsletter-form .btn {border-radius: 0 50px 50px 0;padding: 14px 30px;}
.brand-raport .editorial-section {padding: 60px 0;}
.brand-raport .editor-card {text-align: center;background-color: #fff;border-radius: 12px;padding: 20px 12px 18px;transition: all 0.3s ease;height: 100%;border: 1px solid var(--border-color);}
.brand-raport .editor-img {width: 88px;height: 88px;object-fit: cover;border-radius: 50%;border: 3px solid #fff;box-shadow: 0 8px 20px rgba(42, 24, 16, 0.15);margin-bottom: 12px;}
.brand-raport .editor-role {color: var(--accent-color);font-weight: 700;font-size: 0.72rem;text-transform: uppercase;letter-spacing: 0.5px;display: block;margin-bottom: 4px;}
.brand-raport .editor-card h5 {font-weight: 700;margin-bottom: 0;font-size: 0.95rem;line-height: 1.25;}
@media (max-width: 991px) {.brand-raport .editor-img { width: 100px; height: 100px; }.brand-raport .editor-card h5 { font-size: 1.05rem; }.brand-raport .editor-role { font-size: 0.78rem; }}
/* --- FOOTER ---------------------------------------------------- */
.brand-raport .footer {background-color: var(--primary-color);color: #a0aec0;padding: 50px 0 24px;margin-top: auto;font-size: 0.82rem;line-height: 1.5;}
.brand-raport .footer p { font-size: 0.82rem; }
.brand-raport .footer .small { font-size: 0.78rem; }
.brand-raport .footer h5 {color: #fff;font-weight: 700;margin-bottom: 18px;font-size: 1rem;}
.brand-raport .footer a {color: #a0aec0;text-decoration: none;transition: color 0.3s ease;}
.brand-raport .footer a:hover {color: var(--accent-color);}
.brand-raport .footer-logo,.brand-raport .footer-brand {font-size: 1.3rem;font-weight: 800;color: #fff;text-decoration: none;}
.brand-raport .footer .footer-logo {max-height: 44px;width: auto;}
.brand-raport .im-home-footer {background-color: var(--primary-color);border-top: 1px solid rgba(255, 255, 255, 0.08);color: #fff;}
.brand-raport .im-footer-logo {height: 80px;width: auto;display: block;filter: brightness(0) invert(1) drop-shadow(0 1px 2px rgba(0,0,0,0.15));}
@media (max-width: 575px) {.brand-raport .im-footer-logo {text-align: center !important;display: inline;margin: 1rem 0;height: 64px;}}
.brand-raport .im-footer-link {color: var(--accent-color);text-decoration: none;transition: color .2s ease, text-shadow .2s ease;}
.brand-raport .im-footer-link:hover {color: #fff;text-decoration: underline;}
.brand-raport .im-footer-sep {color: rgba(255, 255, 255, 0.3);margin: 0 .35rem;}
@media (max-width: 768px) {
.brand-raport .hero-home { padding: 20px 0 12px; }
.brand-raport .hero-card { padding: 40px 24px; border-radius: 18px; }
.brand-raport .hero-title { font-size: 2.2rem; }
.brand-raport .hero-lead { font-size: 1rem; }
.brand-raport .hero-cover {max-height: 320px;margin-top: 32px;transform: perspective(800px) rotateY(-4deg) rotateX(1deg);}
.brand-raport .hero-issue-number { font-size: 14rem; }
.brand-raport .hero-meta { gap: 10px; font-size: 0.75rem; }
.brand-raport .about-section,
.brand-raport .articles-section,
.brand-raport .topics-section,
.brand-raport .featured-issue,
.brand-raport .editorial-section { padding: 20px 0; }
.brand-raport .about-panel { padding: 24px 20px; }
.brand-raport .about-title { font-size: 1.35rem; }
.brand-raport .main-article-title { font-size: 2rem; }
.brand-raport .issue-header-title { font-size: 1.7rem; }
.brand-raport .topic-hero-img { height: 220px; }
.brand-raport .dropcap { font-size: 2.6rem; }
}
@media (max-width: 992px) {.brand-raport .newspaper-columns { column-count: 2; }.brand-raport .hero-card { padding: 50px 40px; }.brand-raport .hero-title { font-size: 2.6rem; }.brand-raport .hero-issue-number { font-size: 18rem; }.brand-raport .topic-hero-img { height: 280px; }}
@media (max-width: 768px) {.brand-raport .newspaper-columns { column-count: 1; }}
.brand-raport .im-lang-flag.is-active {opacity: 1;box-shadow: 0 0 0 2px var(--accent-color), 0 1px 3px rgba(42, 24, 16, 0.2);}
.brand-raport .floating-tools {position: fixed;right: 24px;bottom: 24px;z-index: 1040;display: flex;flex-direction: column;gap: 10px;pointer-events: none;}
.brand-raport .floating-tool-btn {width: 44px;height: 44px;border-radius: 50%;border: none;background-color: var(--primary-color);color: #fff;display: inline-flex;align-items: center;justify-content: center;cursor: pointer;font-size: 1.2rem;box-shadow: 0 8px 20px rgba(42, 24, 16, 0.3);padding: 0;pointer-events: auto;transition: background-color 0.2s ease, transform 0.2s ease, opacity 0.3s ease;}
.brand-raport .floating-tool-btn:hover {background-color: var(--accent-color);color: var(--primary-color);transform: translateY(-2px);}
.brand-raport .im-theme-toggle .theme-icon-light { display: none; }
.brand-raport .im-theme-toggle .theme-icon-dark { display: inline; }
[data-bs-theme="dark"] .brand-raport .im-theme-toggle .theme-icon-light { display: inline; }
[data-bs-theme="dark"] .brand-raport .im-theme-toggle .theme-icon-dark { display: none; }
.brand-raport .back-to-top {opacity: 0;pointer-events: none;transform: translateY(12px);}
.brand-raport .back-to-top.is-visible {opacity: 1;pointer-events: auto;transform: translateY(0);}
@media (max-width: 575px) {
.brand-raport .floating-tools {right: 16px;bottom: 16px;gap: 8px;}
.brand-raport .floating-tool-btn {width: 40px;height: 40px;font-size: 1.05rem;}}
/* ================================================================
DARK THEME — nadpisuje tła i kolory tekstu dla [data-bs-theme="dark"].
Kolory marki (primary, accent) zostają niezmienione w obu motywach.
Płynne przejście — body ma transition na background-color i color.
================================================================ */
body.brand-raport {transition: background-color 0.3s ease, color 0.3s ease;}
[data-bs-theme="dark"] body.brand-raport {background-color: #1f1109;color: #cbd5e1;}
[data-bs-theme="dark"] .brand-raport .container-header .navbar {background-color: rgba(6, 22, 41, 0.92) !important;box-shadow: 0 2px 15px rgba(0, 0, 0, 0.3);}
[data-bs-theme="dark"] .brand-raport .nav-link {color: #e2e8f0 !important;}
[data-bs-theme="dark"] .brand-raport .navbar-logo {filter: brightness(0) invert(1);}
[data-bs-theme="dark"] .brand-raport .hero-card {background:linear-gradient(135deg, #150a05 0%, #0d0604 50%, #080302 100%);box-shadow:0 20px 60px rgba(0, 0, 0, 0.6),inset 0 1px 0 rgba(255, 255, 255, 0.04);}
[data-bs-theme="dark"] .brand-raport .text-muted {color: #94a3b8 !important;}
[data-bs-theme="dark"] .brand-raport .topic-item-sm p.text-muted {color: #cbd5e1 !important;}
[data-bs-theme="dark"] .brand-raport .editorial-section p.lead.text-muted,
[data-bs-theme="dark"] .brand-raport .editorial-section .lead {color: #cbd5e1 !important;}
[data-bs-theme="dark"] .brand-raport h1,
[data-bs-theme="dark"] .brand-raport h2,
[data-bs-theme="dark"] .brand-raport h3,
[data-bs-theme="dark"] .brand-raport h4,
[data-bs-theme="dark"] .brand-raport h5,
[data-bs-theme="dark"] .brand-raport .hero-title,
[data-bs-theme="dark"] .brand-raport .issue-header-title,
[data-bs-theme="dark"] .brand-raport .main-article-title,
[data-bs-theme="dark"] .brand-raport .alt-article-title,
[data-bs-theme="dark"] .brand-raport .article-title,
[data-bs-theme="dark"] .brand-raport .about-title {color: #f1f5f9;}
[data-bs-theme="dark"] .brand-raport .btn-outline-secondary-custom {color: #e2e8f0;border-color: rgba(255, 255, 255, 0.4);}
[data-bs-theme="dark"] .brand-raport .btn-outline-secondary-custom:hover {background-color: #fff;color: var(--primary-color);border-color: #fff;}
[data-bs-theme="dark"] .brand-raport .about-section { background-color: #241510; }
[data-bs-theme="dark"] .brand-raport .about-panel {background-color: #2d1d12;border-color: rgba(255, 255, 255, 0.08);}
[data-bs-theme="dark"] .brand-raport .about-intro strong { color: var(--accent-color); }
[data-bs-theme="dark"] .brand-raport .topic-item-sm {background-color: #3a2618;border-color: rgba(255, 255, 255, 0.06);}
[data-bs-theme="dark"] .brand-raport .topic-item-sm:hover { background-color: #4a3020; }
[data-bs-theme="dark"] .brand-raport .topics-divider { border-top-color: rgba(255, 255, 255, 0.1); }
[data-bs-theme="dark"] .brand-raport .featured-issue { background-color: #1f1109; }
[data-bs-theme="dark"] .brand-raport .issue-header-divider { border-top-color: var(--accent-color); }
[data-bs-theme="dark"] .brand-raport .issue-header-lead { color: #cbd5e1; }
[data-bs-theme="dark"] .brand-raport .section-divider { border-top-color: rgba(255, 255, 255, 0.15); }
[data-bs-theme="dark"] .brand-raport .newspaper-columns { column-rule-color: rgba(255, 255, 255, 0.08); }
[data-bs-theme="dark"] .brand-raport .newspaper-columns,
[data-bs-theme="dark"] .brand-raport .alt-article p {color: #cbd5e1 !important;}
[data-bs-theme="dark"] .brand-raport .dropcap { color: var(--accent-color); }
[data-bs-theme="dark"] .brand-raport .article-lead-inline { color: #f1f5f9; }
[data-bs-theme="dark"] .brand-raport .page-number {color: #cbd5e1;border-top-color: rgba(255, 255, 255, 0.3);}
[data-bs-theme="dark"] .brand-raport .articles-section { background-color: #241510; }
[data-bs-theme="dark"] .brand-raport .article-card {background-color: #2d1d12;box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);}
[data-bs-theme="dark"] .brand-raport .article-meta { border-top-color: rgba(255, 255, 255, 0.08); }
[data-bs-theme="dark"] .brand-raport .article-read-more { color: var(--accent-color); }
[data-bs-theme="dark"] .brand-raport .editor-card {background-color: #2d1d12;border-color: rgba(255, 255, 255, 0.08);}
[data-bs-theme="dark"] .brand-raport .footer {background-color: #1a0d08;}
.goog-te-banner-frame.skiptranslate,.goog-te-banner-frame {display: none !important;}
body {top: 0 !important;}
html {margin-top: 0 !important;}
#google_translate_element {display: block;height: 0;overflow: hidden;}
.skiptranslate iframe { display: none !important; }
.skiptranslate { display: none !important; }
.goog-tooltip,.goog-tooltip:hover { display: none !important; }
.goog-text-highlight {background-color: transparent !important;box-shadow: none !important;}
.goog-te-spinner-pos,.goog-te-spinner-animation {display: none !important;}
.brand-raport button.im-lang-flag {background: transparent;border: 0;padding: 0;cursor: pointer;}
@media (max-width: 575px) {
.brand-raport .im-home-footer .col-md-3.text-md-end {display: flex;flex-direction: column;gap: 6px;align-items: center;}
.brand-raport .im-home-footer .im-footer-sep {display: none;}}
.brand-raport .floating-tool-btn {background-color: #1a0d08;border: 1px solid rgba(184, 106, 42, 0.25);color: var(--accent-color);}
.brand-raport .floating-tool-btn:hover {background-color: var(--accent-color);color: var(--primary-color);border-color: var(--accent-color);}
[data-bs-theme="dark"] .brand-raport .floating-tool-btn {background-color: #0d0604;}
.brand-raport .btn-toggle-topics {color: var(--accent-color);border-color: var(--accent-color);}
.brand-raport .btn-toggle-topics:hover,.brand-raport .btn-toggle-topics:focus {background-color: var(--accent-color);color: var(--primary-color);border-color: var(--accent-color);box-shadow: 0 4px 12px rgba(184, 106, 42, 0.25);}
[data-bs-theme="dark"] .brand-raport .btn-toggle-topics {color: var(--accent-color);border-color: rgba(184, 106, 42, 0.5);}
.brand-raport .about-panel {background-color: #fff;border-radius: 18px;padding: 20px 15px;box-shadow: 0 12px 32px rgba(42, 24, 16, 0.06);border: 1px solid var(--border-color);position: relative;background-image:radial-gradient(circle at 1px 1px, rgba(42, 24, 16, 0.04) 1px, transparent 0);background-size: 22px 22px;}
.brand-raport .about-panel::before {content: '';position: absolute;top: 0;left: 36px;width: 60px;height: 4px;background: linear-gradient(90deg, var(--accent-color), transparent);border-radius: 0 0 4px 4px;}
.brand-raport .about-panel .about-title {position: relative;padding-top: 4px;}
.brand-raport .about-panel .about-title::before {content: 'Roczny raport branży paliwowej';display: block;font-family: 'Montserrat', sans-serif;font-size: 0.72rem;font-weight: 700;letter-spacing: 3px;text-transform: uppercase;color: var(--accent-color);margin-bottom: 10px;}
@media (max-width: 768px) {
.brand-raport .hero-home { padding: 16px 0 8px; }
.brand-raport .hero-card {padding: 32px 20px;border-radius: 16px;}
.brand-raport .hero-title {font-size: 1.85rem;line-height: 1.1;}
.brand-raport .hero-lead {font-size: 0.95rem;line-height: 1.55;}
.brand-raport .hero-card .hero-eyebrow {font-size: 0.7rem;letter-spacing: 1.5px;padding: 6px 12px;}
.brand-raport .hero-meta {flex-direction: column;gap: 8px;align-items: flex-start;margin-top: 20px;padding-top: 18px;}
.brand-raport .hero-meta-divider { display: none; }
.brand-raport .btn-hero-primary,.brand-raport .btn-hero-outline {width: 100%;justify-content: center;padding: 14px 24px;}
.brand-raport .hero-cover-wrap {margin-top: 24px;}
.brand-raport .hero-cover {max-height: 280px;transform: perspective(800px) rotateY(-3deg);margin: 0 auto;}
.brand-raport .hero-issue-number {font-size: 11rem;}}
@media (max-width: 380px) {
.brand-raport .hero-title { font-size: 1.65rem; }.brand-raport .hero-card { padding: 28px 16px; }.brand-raport .hero-issue-number { font-size: 9rem; }}
@media (max-width: 768px) {
.brand-raport .topic-hero-img {border-radius: 8px;}
.brand-raport .issue-header-title { font-size: 1.5rem; }.brand-raport .issue-header-lead { font-size: 0.95rem; }}
.brand-raport .editorial-section.m-0 {padding-top: 70px;padding-bottom: 0;}
@media (max-width: 768px) {
.brand-raport .editorial-section.m-0 {padding-top: 50px;padding-bottom: 50px;}}
@media (max-width: 575px) {
.brand-raport .btn-more {font-size: 0.72rem;padding: 12px 16px;letter-spacing: 0.5px;white-space: normal;line-height: 1.3;}}
@media (max-width: 380px) {
.brand-raport .btn-more {font-size: 0.65rem;padding: 10px 12px;}}
.brand-raport .footer-shortcuts {display: flex;flex-direction: column;padding-left: 0;margin-bottom: 0;}
.brand-raport .footer-shortcuts li {padding-left: 0 !important;}
@media (max-width: 768px) {
.brand-raport .newsletter-strip {padding-left: 16px;padding-right: 16px;}
.brand-raport .newsletter-strip > .container {padding-left: 8px;padding-right: 8px;}}
@media (max-width: 768px) {
body.brand-raport main .item-page,body.brand-raport main .article-body {padding-left: 4px;padding-right: 4px;}}
@media (max-width: 768px) {
body.brand-raport .hero-home {padding: 12px 0 8px;}
body.brand-raport .hero-home > .container {padding-left: 12px;padding-right: 12px;}
body.brand-raport .hero-card {padding: 28px 20px;border-radius: 16px;}
body.brand-raport .hero-title {font-size: 1.75rem;line-height: 1.1;margin-top: 16px;}
body.brand-raport .hero-lead {font-size: 0.92rem;line-height: 1.55;}
body.brand-raport .hero-card .hero-eyebrow {font-size: 0.65rem;letter-spacing: 1px;padding: 5px 10px;}
body.brand-raport .hero-issue-number {display: none;}
body.brand-raport .hero-cover-wrap {margin-top: 24px;text-align: center;}
body.brand-raport .hero-cover {max-height: 260px;transform: perspective(800px) rotateY(-3deg);margin: 0 auto;display: inline-block;}
body.brand-raport .hero-meta {flex-direction: column;gap: 6px;align-items: flex-start;margin-top: 18px;padding-top: 16px;font-size: 0.75rem;}
body.brand-raport .hero-meta-divider {display: none;}
body.brand-raport .btn-hero-primary,body.brand-raport .btn-hero-outline {width: 100%;justify-content: center;padding: 13px 20px;font-size: 0.92rem;}}
@media (max-width: 380px) {
body.brand-raport .hero-title { font-size: 1.55rem; }body.brand-raport .hero-card { padding: 24px 16px; }}
.brand-raport .im-nav-toggle {width: 44px;height: 44px;border: 1px solid var(--border-color);background-color: transparent;border-radius: 8px;padding: 10px;display: inline-flex;flex-direction: column;justify-content: space-between;align-items: stretch;cursor: pointer;transition: border-color 0.25s ease, background-color 0.25s ease;}
.brand-raport .im-nav-toggle:hover {background-color: rgba(42, 24, 16, 0.05);border-color: var(--accent-color);}
.brand-raport .im-nav-toggle:focus {outline: none;box-shadow: 0 0 0 3px rgba(184, 106, 42, 0.25);}
.brand-raport .im-nav-toggle span {display: block;height: 2.5px;background-color: var(--primary-color);border-radius: 2px;transition: transform 0.3s ease, opacity 0.25s ease;transform-origin: center;}
.brand-raport .im-nav-toggle:not(.collapsed) {border-color: var(--accent-color);}
.brand-raport .im-nav-toggle:not(.collapsed) span:nth-child(1) {transform: translateY(8.5px) rotate(45deg);}
.brand-raport .im-nav-toggle:not(.collapsed) span:nth-child(2) {opacity: 0;}
.brand-raport .im-nav-toggle:not(.collapsed) span:nth-child(3) {transform: translateY(-8.5px) rotate(-45deg);}
[data-bs-theme="dark"] .brand-raport .im-nav-toggle span {background-color: #e2e8f0;}
[data-bs-theme="dark"] .brand-raport .im-nav-toggle {border-color: rgba(255, 255, 255, 0.2);}
@media (max-width: 991px) {
.brand-raport .navbar-collapse {padding-top: 0;padding-bottom: 0;margin-top: 0;}
.brand-raport .navbar-nav .nav-link {padding-top: 12px !important;padding-bottom: 12px !important;border-bottom: 1px solid rgba(42, 24, 16, 0.06);}
.brand-raport .navbar-nav .nav-item:last-child .nav-link {border-bottom: none;}
.brand-raport .im-nav-tools {margin-top: 16px;justify-content: center;}}
@media (max-width: 768px) {
.brand-raport .navbar-logo {height: 56px;}}
@media (max-width: 380px) {
.brand-raport .navbar-logo {height: 48px;}}
@media (max-width: 575px) {
.brand-raport .im-home-footer .row > div {text-align: center !important;}
.brand-raport .im-home-footer .col-md-3.text-md-end {display: flex;flex-direction: column;gap: 4px;align-items: center;}
.brand-raport .im-home-footer .im-footer-sep {display: none;}}
@media (max-width: 768px) {
body.brand-raport .featured-issue,body.brand-raport .editorial-section,body.brand-raport .editorial-section.m-0,body.brand-raport .articles-section,body.brand-raport .topics-section,body.brand-raport .about-section,body.brand-raport .newsletter-strip,body.brand-raport .hero-home {padding-left: 0 !important;padding-right: 0 !important;}
body.brand-raport .featured-issue > .container,body.brand-raport .editorial-section > .container,body.brand-raport .articles-section > .container,body.brand-raport .topics-section > .container,body.brand-raport .about-section > .container,body.brand-raport .newsletter-strip > .container,body.brand-raport .hero-home > .container {padding-left: 16px !important;padding-right: 16px !important;max-width: 100% !important;margin-left: auto !important;margin-right: auto !important;}
body.brand-raport .featured-issue .row,body.brand-raport .editorial-section .row,body.brand-raport .articles-section .row,body.brand-raport .topics-section .row,body.brand-raport .about-section .row,body.brand-raport .newsletter-strip .row,body.brand-raport .hero-home .row {margin-left: 0 !important;margin-right: 0 !important;}
body.brand-raport .featured-issue [class*="col-"],body.brand-raport .editorial-section [class*="col-"],body.brand-raport .articles-section [class*="col-"],body.brand-raport .topics-section [class*="col-"],body.brand-raport .about-section [class*="col-"] {padding-left: 0 !important;padding-right: 0 !important;}
body.brand-raport section *,body.brand-raport section *::before,body.brand-raport section *::after {box-sizing: border-box;}
body.brand-raport .featured-issue img,body.brand-raport .articles-section img,body.brand-raport .alt-article img,body.brand-raport .topic-hero-img {max-width: 100% !important;height: auto !important;width: 100%;}
body.brand-raport .alt-article .pe-lg-5,body.brand-raport .alt-article .ps-lg-5 {padding-left: 0 !important;padding-right: 0 !important;}}
@media (max-width: 768px) {
body.brand-raport .hero-card .hero-content {flex-direction: column;align-items: stretch;}
body.brand-raport .hero-card .hero-content > .col-6,body.brand-raport .hero-card .hero-content > .col-md-8,body.brand-raport .hero-card .hero-content > .col-md-4 {flex: 0 0 100% !important;max-width: 100% !important;width: 100% !important;padding-left: 0 !important;padding-right: 0 !important;}
body.brand-raport .hero-card .hero-content > .col-6:first-child,body.brand-raport .hero-card .hero-content > .col-md-8 {display: contents;}
body.brand-raport .hero-card .hero-content > .col-6:first-child > .hero-eyebrow,body.brand-raport .hero-card .hero-content .hero-eyebrow {order: 1;align-self: flex-start;margin-bottom: 16px;}
body.brand-raport .hero-card .hero-content > .col-6:last-child,body.brand-raport .hero-card .hero-content > .col-md-4 {order: 2;margin-bottom: 20px;text-align: center;}
body.brand-raport .hero-card .hero-content .hero-title {order: 3;margin-top: 0 !important;margin-bottom: 16px !important;font-size: 1.75rem;line-height: 1.15;}
body.brand-raport .hero-card .hero-content .hero-title p {margin: 0;}
body.brand-raport .hero-card .hero-content .hero-lead {display: none !important;}
body.brand-raport .hero-card .hero-content .d-flex.flex-wrap.gap-3 {order: 5;flex-direction: column !important;flex-wrap: nowrap !important;gap: 12px !important;width: 100%;}
body.brand-raport .hero-card .hero-content .btn-hero-primary,body.brand-raport .hero-card .hero-content .btn-hero-outline {width: 100%;justify-content: center;padding: 13px 20px;font-size: 0.95rem;}
body.brand-raport .hero-card .hero-cover-wrap {margin: 0 auto;max-width: 220px;}
body.brand-raport .hero-card .hero-cover-wrap img,body.brand-raport .hero-card .hero-cover {max-width: 100%;max-height: 280px;width: auto;height: auto;margin: 0 auto;display: block;transform: perspective(800px) rotateY(-3deg);}
body.brand-raport .hero-card .hero-issue-number {display: none !important;}}
@media (min-width: 992px) {
.brand-raport .navbar-expand-lg .navbar-toggler,.brand-raport .im-nav-toggle {display: none !important;}
.brand-raport .navbar-expand-lg .navbar-collapse {display: flex !important;flex-basis: auto;height: auto !important;visibility: visible !important;overflow: visible !important;}
.brand-raport .navbar-expand-lg .navbar-nav {flex-direction: row;}}
@media (max-width: 991.98px) {
.brand-raport .navbar-expand-lg .im-nav-toggle {display: inline-flex !important;}
.brand-raport #imsaNav.collapse:not(.show) {display: none !important;}
.brand-raport #imsaNav.collapse.show {display: block !important;}
.brand-raport #imsaNav .navbar-nav {flex-direction: column;width: 100%;margin-top: 2px;padding-top: 0;border-top: 1px solid var(--border-color);}
.brand-raport #imsaNav .nav-item {width: 100%;}
.brand-raport #imsaNav .nav-link {padding: 12px 0 !important;border-bottom: 1px solid rgba(42, 24, 16, 0.06);}
.brand-raport #imsaNav .nav-item:last-child .nav-link {border-bottom: none;}
.brand-raport #imsaNav .im-nav-tools {justify-content: center;padding: 12px 0;border-top: 1px solid rgba(42, 24, 16, 0.06);margin-top: 4px;}}
@media (max-width: 991.98px) {
.brand-raport .im-nav-toggle[aria-expanded="false"] + #imsaNav {display: none !important;}
.brand-raport .im-nav-toggle[aria-expanded="true"] + #imsaNav {display: block !important;}}
@media (max-width: 991px) {
body.brand-raport .editorial-section .row > [class*="col-"] {padding-left: 6px !important;padding-right: 6px !important;}
body.brand-raport .editorial-section .row {--bs-gutter-y: 12px;--bs-gutter-x: 12px;margin-left: -6px !important;margin-right: -6px !important;}
body.brand-raport .editorial-section .editor-card {padding: 18px 12px;height: 100%;}}
@media (max-width: 380px) {
body.brand-raport .editorial-section .row > [class*="col-"] {padding-left: 5px !important;padding-right: 5px !important;}
body.brand-raport .editorial-section .row {--bs-gutter-y: 10px;--bs-gutter-x: 10px;margin-left: -5px !important;margin-right: -5px !important;}}
/* Smooth scroll dla przycisku "Przewiń niżej" w pasku teasera */
.imh-teaser-bar {border-bottom: 1px solid var(--bs-border-color, #dee2e6);}
.imh-scroll-btn .bi-chevron-double-down {animation: imh-bounce 1.4s infinite;}
@keyframes imh-bounce {0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); }}
/* ============================================================
DODATKI DLA RAPORTU — komponenty podstron archiwum / reklama / wydawca
============================================================ */
/* PAGE HEADER (podstrony) */
.brand-raport .page-header-section {
padding: 70px 0 50px;
background-color: var(--bg-light);
background-image: radial-gradient(circle at 1px 1px, rgba(42, 24, 16, 0.05) 1px, transparent 0);
background-size: 22px 22px;
}
.brand-raport .page-header-section h1 {
font-family: 'Montserrat', sans-serif;
font-weight: 800;
font-size: 3.2rem;
line-height: 1.05;
letter-spacing: -0.5px;
margin-bottom: 16px;
}
.brand-raport .page-header-section h1 em {
font-weight: 400;
color: var(--text-color);
}
.brand-raport .page-header-section .lede {
font-size: 1.15rem;
line-height: 1.6;
color: var(--text-color);
max-width: 60ch;
}
.brand-raport .page-header-section .eyebrow {
display: inline-flex;
align-items: center;
color: var(--accent-color);
text-transform: uppercase;
letter-spacing: 2.5px;
font-weight: 700;
font-size: 0.78rem;
padding: 8px 16px;
background-color: rgba(184, 106, 42, 0.1);
border: 1px solid rgba(184, 106, 42, 0.25);
border-radius: 50px;
margin-bottom: 24px;
}
[data-bs-theme="dark"] .brand-raport .page-header-section {
background-color: #241510;
background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.05) 1px, transparent 0);
}
[data-bs-theme="dark"] .brand-raport .page-header-section h1 { color: #f1f5f9; }
[data-bs-theme="dark"] .brand-raport .page-header-section .lede { color: #cbd5e1; }
@media (max-width: 768px) {
.brand-raport .page-header-section { padding: 50px 0 36px; }
.brand-raport .page-header-section h1 { font-size: 2.1rem; }
.brand-raport .page-header-section .lede { font-size: 1rem; }
}
/* ============================================================
ARCHIVE GRID — kafelki wcześniejszych wydań
============================================================ */
.brand-raport .archive-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 24px;
}
.brand-raport .archive-tile {
text-align: center;
transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.brand-raport .archive-tile:hover { transform: translateY(-6px); }
.brand-raport .archive-tile .cover {
aspect-ratio: 0.71;
background-color: #fff;
border: 1px solid var(--border-color);
border-radius: 4px;
padding: 16px;
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: 0 4px 14px rgba(42, 24, 16, 0.05);
margin-bottom: 12px;
transition: box-shadow 0.3s ease, border-color 0.3s ease;
position: relative;
overflow: hidden;
}
.brand-raport .archive-tile .cover::before {
/* Akcent w lewym górnym rogu — pasuje do hero deco */
content: '';
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 4px;
background: linear-gradient(90deg, var(--accent-color), transparent);
}
.brand-raport .archive-tile:hover .cover {
box-shadow: 0 20px 40px rgba(42, 24, 16, 0.12);
border-color: var(--accent-color);
}
.brand-raport .archive-tile .top {
font-family: 'Montserrat', sans-serif;
font-size: 0.65rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--accent-color);
}
.brand-raport .archive-tile .mid {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 1rem;
line-height: 1.2;
color: var(--primary-color);
}
.brand-raport .archive-tile .mid em {
font-weight: 400;
display: block;
margin-top: 4px;
font-size: 0.82rem;
color: var(--text-color);
}
.brand-raport .archive-tile .bot {
font-family: 'Montserrat', sans-serif;
font-size: 0.65rem;
font-weight: 700;
color: var(--text-color);
letter-spacing: 1px;
}
.brand-raport .archive-tile .meta {
font-family: 'Open Sans', sans-serif;
font-size: 0.78rem;
color: var(--text-color);
}
.brand-raport .archive-tile .meta .num {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
color: var(--primary-color);
display: block;
font-size: 0.8rem;
}
[data-bs-theme="dark"] .brand-raport .archive-tile .cover {
background-color: #2d1d12;
border-color: rgba(255, 255, 255, 0.08);
}
[data-bs-theme="dark"] .brand-raport .archive-tile .mid { color: #f1f5f9; }
[data-bs-theme="dark"] .brand-raport .archive-tile .mid em { color: #cbd5e1; }
[data-bs-theme="dark"] .brand-raport .archive-tile .bot { color: #cbd5e1; }
[data-bs-theme="dark"] .brand-raport .archive-tile .meta { color: #cbd5e1; }
[data-bs-theme="dark"] .brand-raport .archive-tile .meta .num { color: #f1f5f9; }
[data-bs-theme="dark"] .brand-raport .archive-tile:hover .cover { border-color: var(--accent-color); }
@media (max-width: 1199px) { .brand-raport .archive-grid { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 991px) { .brand-raport .archive-grid { grid-template-columns: repeat(4, 1fr); gap: 18px; } }
@media (max-width: 768px) { .brand-raport .archive-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
@media (max-width: 480px) { .brand-raport .archive-grid { grid-template-columns: repeat(2, 1fr); } }
/* ============================================================
FEATURED-EDITION — wyróżniona aktualna edycja na archiwum
============================================================ */
.brand-raport .featured-edition {
background: linear-gradient(135deg, #2a1810 0%, #1f1109 50%, #150a05 100%);
color: #fff;
border-radius: 24px;
padding: 50px;
position: relative;
overflow: hidden;
isolation: isolate;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}
.brand-raport .featured-edition::before {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.06) 1px, transparent 0);
background-size: 22px 22px;
z-index: 0;
}
.brand-raport .featured-edition::after {
content: '';
position: absolute;
top: -100px; right: -100px;
width: 360px; height: 360px;
background: radial-gradient(circle, rgba(184, 106, 42, 0.18) 0%, transparent 60%);
filter: blur(20px);
z-index: 0;
}
.brand-raport .featured-edition > * { position: relative; z-index: 1; }
.brand-raport .featured-edition h2 {
color: #fff;
font-family: 'Montserrat', sans-serif;
font-weight: 800;
font-size: 2.4rem;
line-height: 1.05;
letter-spacing: -0.5px;
}
.brand-raport .featured-edition .edition-eyebrow {
display: inline-flex;
align-items: center;
color: var(--accent-color);
text-transform: uppercase;
letter-spacing: 2.5px;
font-weight: 700;
font-size: 0.78rem;
padding: 8px 16px;
background-color: rgba(184, 106, 42, 0.1);
border: 1px solid rgba(184, 106, 42, 0.25);
border-radius: 50px;
margin-bottom: 16px;
}
.brand-raport .featured-edition .edition-lead {
font-size: 1.05rem;
color: rgba(255, 255, 255, 0.78);
line-height: 1.65;
}
.brand-raport .featured-edition .edition-cover {
display: block;
margin: 0 auto;
max-width: 100%;
max-height: 380px;
width: auto;
border-radius: 4px;
transform: perspective(800px) rotateY(-6deg) rotateX(2deg);
box-shadow: 0 30px 60px -10px rgba(0,0,0,0.5), 0 18px 36px -18px rgba(0,0,0,0.4);
transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.brand-raport .featured-edition .edition-cover:hover { transform: perspective(800px) rotateY(-2deg) rotateX(0deg) translateY(-6px); }
@media (max-width: 768px) {
.brand-raport .featured-edition { padding: 36px 24px; border-radius: 18px; }
.brand-raport .featured-edition h2 { font-size: 1.7rem; }
.brand-raport .featured-edition .edition-cover { max-height: 280px; margin-top: 24px; }
}
/* ============================================================
PAKIETY REKLAMOWE
============================================================ */
.brand-raport .package-card {
background-color: #fff;
border: 1px solid var(--border-color);
border-radius: 15px;
padding: 40px 32px;
height: 100%;
display: flex;
flex-direction: column;
position: relative;
transition: all 0.3s ease;
box-shadow: 0 4px 14px rgba(42, 24, 16, 0.04);
}
.brand-raport .package-card:hover {
border-color: var(--accent-color);
box-shadow: 0 15px 35px rgba(42, 24, 16, 0.08);
transform: translateY(-4px);
}
.brand-raport .package-card.is-featured {
border-color: var(--accent-color);
border-width: 2px;
box-shadow: 0 15px 35px rgba(184, 106, 42, 0.15);
}
.brand-raport .package-card.is-featured::before {
content: 'Polecane';
position: absolute;
top: -14px; left: 32px;
background-color: var(--accent-color);
color: var(--primary-color);
font-family: 'Montserrat', sans-serif;
font-weight: 800;
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 1.5px;
padding: 6px 16px;
border-radius: 50px;
}
.brand-raport .package-card .pkg-meta {
font-family: 'Montserrat', sans-serif;
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--accent-color);
margin-bottom: 12px;
}
.brand-raport .package-card h3 {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 1.6rem;
color: var(--primary-color);
margin-bottom: 24px;
letter-spacing: -0.3px;
}
.brand-raport .package-card .pkg-price {
padding: 18px 0;
border-top: 1px solid var(--border-color);
border-bottom: 1px solid var(--border-color);
margin-bottom: 24px;
}
.brand-raport .package-card .pkg-amount {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 2rem;
color: var(--primary-color);
letter-spacing: -0.5px;
display: block;
line-height: 1.1;
}
.brand-raport .package-card .pkg-unit {
font-family: 'Montserrat', sans-serif;
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--text-color);
margin-top: 6px;
display: block;
}
.brand-raport .package-card ul {
list-style: none;
padding: 0;
margin: 0 0 28px;
font-size: 0.95rem;
line-height: 1.55;
flex: 1;
}
.brand-raport .package-card ul li {
padding: 8px 0 8px 28px;
position: relative;
color: var(--text-color);
}
.brand-raport .package-card ul li::before {
content: '✓';
position: absolute;
left: 0;
top: 8px;
color: var(--accent-color);
font-weight: 800;
font-size: 1.1rem;
}
[data-bs-theme="dark"] .brand-raport .package-card {
background-color: #2d1d12;
border-color: rgba(255, 255, 255, 0.08);
}
[data-bs-theme="dark"] .brand-raport .package-card h3,
[data-bs-theme="dark"] .brand-raport .package-card .pkg-amount { color: #f1f5f9; }
[data-bs-theme="dark"] .brand-raport .package-card ul li { color: #cbd5e1; }
[data-bs-theme="dark"] .brand-raport .package-card .pkg-unit { color: #94a3b8; }
[data-bs-theme="dark"] .brand-raport .package-card .pkg-price { border-color: rgba(255, 255, 255, 0.1); }
/* Brakuje btn w pakiecie */
.brand-raport .package-card .btn-pkg {
display: inline-flex;
align-items: center;
justify-content: center;
background-color: var(--primary-color);
color: #fff;
border: 2px solid var(--primary-color);
padding: 12px 24px;
font-weight: 700;
border-radius: 50px;
transition: all 0.3s ease;
text-decoration: none;
width: 100%;
font-size: 0.92rem;
}
.brand-raport .package-card .btn-pkg:hover {
background-color: var(--accent-color);
border-color: var(--accent-color);
color: var(--primary-color);
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(184, 106, 42, 0.2);
}
.brand-raport .package-card.is-featured .btn-pkg {
background-color: var(--accent-color);
border-color: var(--accent-color);
color: var(--primary-color);
}
.brand-raport .package-card.is-featured .btn-pkg:hover {
background-color: var(--primary-color);
color: #fff;
}
[data-bs-theme="dark"] .brand-raport .package-card .btn-pkg { background-color: var(--accent-color); color: var(--primary-color); border-color: var(--accent-color); }
[data-bs-theme="dark"] .brand-raport .package-card .btn-pkg:hover { background-color: #fff; color: var(--primary-color); border-color: #fff; }
/* ============================================================
SALES REP — wizytówka Damiana Czyża
============================================================ */
.brand-raport .sales-rep {
background-color: #fff;
border: 1px solid var(--border-color);
border-radius: 20px;
padding: 48px;
display: grid;
grid-template-columns: 180px 1fr auto;
gap: 40px;
align-items: center;
box-shadow: 0 15px 40px rgba(42, 24, 16, 0.06);
position: relative;
overflow: hidden;
}
.brand-raport .sales-rep::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 50%;
height: 4px;
background: linear-gradient(90deg, var(--accent-color), transparent);
}
.brand-raport .sales-rep .rep-photo {
width: 180px; height: 180px;
object-fit: cover;
border-radius: 50%;
border: 4px solid #fff;
box-shadow: 0 10px 30px rgba(42, 24, 16, 0.15);
}
.brand-raport .sales-rep h3 {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 2rem;
color: var(--primary-color);
letter-spacing: -0.5px;
margin-bottom: 4px;
}
.brand-raport .sales-rep .rep-role {
font-family: 'Montserrat', sans-serif;
font-size: 0.72rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--accent-color);
margin-bottom: 20px;
}
.brand-raport .sales-rep p { font-size: 0.98rem; margin: 4px 0; color: var(--text-color); }
.brand-raport .sales-rep p a { color: var(--primary-color); font-weight: 700; text-decoration: none; }
.brand-raport .sales-rep p a:hover { color: var(--accent-color); }
.brand-raport .sales-rep .rep-actions {
display: flex; flex-direction: column; gap: 12px;
}
[data-bs-theme="dark"] .brand-raport .sales-rep {
background-color: #2d1d12;
border-color: rgba(255, 255, 255, 0.08);
}
[data-bs-theme="dark"] .brand-raport .sales-rep h3 { color: #f1f5f9; }
[data-bs-theme="dark"] .brand-raport .sales-rep p { color: #cbd5e1; }
[data-bs-theme="dark"] .brand-raport .sales-rep p a { color: #f1f5f9; }
[data-bs-theme="dark"] .brand-raport .sales-rep p a:hover { color: var(--accent-color); }
[data-bs-theme="dark"] .brand-raport .sales-rep .rep-photo { border-color: #2d1d12; }
@media (max-width: 768px) {
.brand-raport .sales-rep { grid-template-columns: 1fr; padding: 32px 24px; text-align: center; gap: 24px; }
.brand-raport .sales-rep .rep-photo { width: 140px; height: 140px; margin: 0 auto; }
.brand-raport .sales-rep h3 { font-size: 1.6rem; }
.brand-raport .sales-rep .rep-actions { flex-direction: row; flex-wrap: wrap; justify-content: center; }
}
/* ============================================================
CONTACT CARDS — 3 kontakty IM (sekretariat, sprzedaż, IOD)
============================================================ */
.brand-raport .contact-card {
background-color: #fff;
border: 1px solid var(--border-color);
border-radius: 15px;
padding: 32px;
height: 100%;
transition: all 0.3s ease;
position: relative;
}
.brand-raport .contact-card:hover {
border-color: var(--accent-color);
transform: translateY(-4px);
box-shadow: 0 15px 35px rgba(42, 24, 16, 0.08);
}
.brand-raport .contact-card .contact-icon {
width: 56px; height: 56px;
border-radius: 14px;
background: linear-gradient(135deg, var(--primary-color), #4a2f1c);
color: var(--accent-color);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.4rem;
margin-bottom: 20px;
}
.brand-raport .contact-card h3 {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 1.3rem;
color: var(--primary-color);
margin-bottom: 4px;
}
.brand-raport .contact-card .contact-role {
font-family: 'Montserrat', sans-serif;
font-size: 0.7rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 1.5px;
color: var(--accent-color);
margin-bottom: 16px;
display: block;
}
.brand-raport .contact-card p { font-size: 0.92rem; color: var(--text-color); margin: 4px 0; }
.brand-raport .contact-card p a { color: var(--primary-color); font-weight: 700; text-decoration: none; }
.brand-raport .contact-card p a:hover { color: var(--accent-color); }
[data-bs-theme="dark"] .brand-raport .contact-card { background-color: #2d1d12; border-color: rgba(255, 255, 255, 0.08); }
[data-bs-theme="dark"] .brand-raport .contact-card h3 { color: #f1f5f9; }
[data-bs-theme="dark"] .brand-raport .contact-card p { color: #cbd5e1; }
[data-bs-theme="dark"] .brand-raport .contact-card p a { color: #f1f5f9; }
/* ============================================================
DATA-BOX — dane firmy
============================================================ */
.brand-raport .data-box {
background-color: #fff;
border: 1px solid var(--border-color);
border-radius: 15px;
padding: 36px;
box-shadow: 0 4px 14px rgba(42, 24, 16, 0.04);
}
.brand-raport .data-box h3 {
font-family: 'Montserrat', sans-serif;
font-size: 0.72rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--accent-color);
margin: 22px 0 12px;
padding-bottom: 8px;
border-bottom: 1px solid var(--border-color);
}
.brand-raport .data-box h3:first-child { margin-top: 0; }
.brand-raport .data-box dl {
display: grid;
grid-template-columns: auto 1fr;
gap: 8px 24px;
font-size: 0.95rem;
margin: 0;
}
.brand-raport .data-box dt { color: var(--text-color); font-family: 'Open Sans', sans-serif; margin: 0; }
.brand-raport .data-box dd {
text-align: right;
font-weight: 700;
color: var(--primary-color);
font-family: 'Montserrat', sans-serif;
margin: 0;
}
.brand-raport .data-box dd a { color: var(--primary-color); text-decoration: none; }
.brand-raport .data-box dd a:hover { color: var(--accent-color); }
[data-bs-theme="dark"] .brand-raport .data-box { background-color: #2d1d12; border-color: rgba(255, 255, 255, 0.08); }
[data-bs-theme="dark"] .brand-raport .data-box dd { color: #f1f5f9; }
[data-bs-theme="dark"] .brand-raport .data-box dd a { color: #f1f5f9; }
[data-bs-theme="dark"] .brand-raport .data-box h3 { border-color: rgba(255, 255, 255, 0.1); }
/* ============================================================
CONTACT FORM
============================================================ */
.brand-raport .contact-form-wrap {
background-color: #fff;
border: 1px solid var(--border-color);
border-radius: 18px;
padding: 40px;
box-shadow: 0 12px 32px rgba(42, 24, 16, 0.06);
}
.brand-raport .contact-form-wrap h3 {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 1.7rem;
color: var(--primary-color);
margin-bottom: 8px;
letter-spacing: -0.3px;
}
.brand-raport .contact-form-wrap .intro {
font-size: 0.95rem;
color: var(--text-color);
margin-bottom: 28px;
line-height: 1.55;
}
.brand-raport .field { margin-bottom: 20px; }
.brand-raport .field label {
display: block;
font-family: 'Montserrat', sans-serif;
font-size: 0.72rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--text-color);
margin-bottom: 8px;
}
.brand-raport .field input,
.brand-raport .field textarea {
width: 100%;
background-color: #fff;
border: 1px solid var(--border-color);
border-radius: 10px;
padding: 12px 16px;
font-family: 'Open Sans', sans-serif;
font-size: 0.95rem;
color: var(--primary-color);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.brand-raport .field input:focus,
.brand-raport .field textarea:focus {
outline: 0;
border-color: var(--accent-color);
box-shadow: 0 0 0 4px rgba(184, 106, 42, 0.12);
}
.brand-raport .field textarea { resize: vertical; min-height: 120px; }
.brand-raport .checkbox {
display: flex;
gap: 12px;
font-size: 0.85rem;
line-height: 1.5;
color: var(--text-color);
margin-bottom: 20px;
}
.brand-raport .checkbox input {
width: 18px; height: 18px;
accent-color: var(--accent-color);
flex-shrink: 0;
margin-top: 3px;
}
.brand-raport .contact-form-footer {
display: grid;
grid-template-columns: 1fr auto;
gap: 16px;
align-items: center;
padding-top: 18px;
border-top: 1px solid var(--border-color);
margin-top: 8px;
}
.brand-raport .contact-form-footer .note {
font-size: 0.75rem;
color: var(--text-color);
margin: 0;
}
[data-bs-theme="dark"] .brand-raport .contact-form-wrap { background-color: #2d1d12; border-color: rgba(255, 255, 255, 0.08); }
[data-bs-theme="dark"] .brand-raport .contact-form-wrap h3 { color: #f1f5f9; }
[data-bs-theme="dark"] .brand-raport .contact-form-wrap .intro,
[data-bs-theme="dark"] .brand-raport .checkbox { color: #cbd5e1; }
[data-bs-theme="dark"] .brand-raport .field label { color: #cbd5e1; }
[data-bs-theme="dark"] .brand-raport .field input,
[data-bs-theme="dark"] .brand-raport .field textarea {
background-color: #3a2618; border-color: rgba(255, 255, 255, 0.1); color: #f1f5f9;
}
[data-bs-theme="dark"] .brand-raport .contact-form-footer { border-color: rgba(255, 255, 255, 0.08); }
[data-bs-theme="dark"] .brand-raport .contact-form-footer .note { color: #94a3b8; }
/* ============================================================
RODO LIST — 8 punktów z italic numerami
============================================================ */
.brand-raport .rodo-list {
counter-reset: rodo;
list-style: none;
padding: 0;
margin: 0;
}
.brand-raport .rodo-list li {
counter-increment: rodo;
display: grid;
grid-template-columns: 56px 1fr;
gap: 24px;
padding: 22px 0;
border-bottom: 1px solid var(--border-color);
font-size: 0.95rem;
line-height: 1.65;
color: var(--text-color);
}
.brand-raport .rodo-list li::before {
content: counter(rodo, decimal-leading-zero);
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 2rem;
line-height: 1;
color: var(--accent-color);
letter-spacing: -0.03em;
}
.brand-raport .rodo-list li a { color: var(--accent-color); font-weight: 700; text-decoration: underline; }
[data-bs-theme="dark"] .brand-raport .rodo-list li { color: #cbd5e1; border-color: rgba(255, 255, 255, 0.08); }
/* ============================================================
AUDIENCE / SECTOR TILES (reklama → grupy docelowe / index → sektory)
============================================================ */
.brand-raport .sector-card {
background-color: #fff;
border: 1px solid var(--border-color);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 5px 20px rgba(42, 24, 16, 0.05);
transition: all 0.3s ease;
height: 100%;
display: flex;
flex-direction: column;
}
.brand-raport .sector-card:hover {
box-shadow: 0 20px 40px rgba(42, 24, 16, 0.12);
transform: translateY(-4px);
}
.brand-raport .sector-card .sector-img {
width: 100%; height: 210px;
object-fit: cover;
display: block;
transition: transform 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.brand-raport .sector-card:hover .sector-img { transform: scale(1.06); }
.brand-raport .sector-card .sector-img-wrap {
position: relative;
overflow: hidden;
}
.brand-raport .sector-card .sector-img-wrap .badge-num {
position: absolute;
top: 14px;
left: 14px;
background-color: var(--accent-color);
color: var(--primary-color);
padding: 5px 14px;
font-family: 'Montserrat', sans-serif;
font-size: 0.7rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 1px;
border-radius: 4px;
}
.brand-raport .sector-card .sector-body {
padding: 24px;
flex: 1;
display: flex;
flex-direction: column;
}
.brand-raport .sector-card .sector-title {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 1.35rem;
color: var(--primary-color);
margin-bottom: 10px;
line-height: 1.25;
}
.brand-raport .sector-card .sector-body p {
font-size: 0.92rem;
line-height: 1.55;
margin-bottom: 14px;
color: var(--text-color);
flex: 1;
}
.brand-raport .sector-card .sector-topics {
list-style: none;
padding: 12px 0 0;
margin: 0;
border-top: 1px solid var(--border-color);
font-size: 0.85rem;
}
.brand-raport .sector-card .sector-topics li {
padding: 4px 0 4px 18px;
position: relative;
color: var(--text-color);
}
.brand-raport .sector-card .sector-topics li::before {
content: '›';
position: absolute;
left: 0; top: 4px;
color: var(--accent-color);
font-weight: 800;
}
[data-bs-theme="dark"] .brand-raport .sector-card { background-color: #2d1d12; border-color: rgba(255, 255, 255, 0.06); box-shadow: 0 5px 20px rgba(0,0,0,0.3); }
[data-bs-theme="dark"] .brand-raport .sector-card .sector-title { color: #f1f5f9; }
[data-bs-theme="dark"] .brand-raport .sector-card .sector-body p,
[data-bs-theme="dark"] .brand-raport .sector-card .sector-topics li { color: #cbd5e1; }
[data-bs-theme="dark"] .brand-raport .sector-card .sector-topics { border-color: rgba(255, 255, 255, 0.08); }
/* ============================================================
TOP200 CALLOUT
============================================================ */
.brand-raport .top200-callout {
background-color: rgba(184, 106, 42, 0.06);
border: 1px solid rgba(184, 106, 42, 0.2);
border-radius: 18px;
padding: 40px;
text-align: center;
position: relative;
overflow: hidden;
}
.brand-raport .top200-callout::before {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(circle at 1px 1px, rgba(184, 106, 42, 0.04) 1px, transparent 0);
background-size: 22px 22px;
pointer-events: none;
}
.brand-raport .top200-callout > * { position: relative; }
.brand-raport .top200-callout .num {
font-family: 'Montserrat', sans-serif;
font-weight: 800;
font-size: 5.5rem;
line-height: 1;
color: var(--accent-color);
display: block;
margin-bottom: 12px;
letter-spacing: -0.03em;
background: linear-gradient(120deg, #B86A2A 0%, #D4A574 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.brand-raport .top200-callout h3 {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 1.5rem;
color: var(--primary-color);
margin-bottom: 12px;
}
.brand-raport .top200-callout p {
color: var(--text-color);
max-width: 50ch;
margin: 0 auto;
line-height: 1.55;
}
[data-bs-theme="dark"] .brand-raport .top200-callout { background-color: rgba(184, 106, 42, 0.04); border-color: rgba(184, 106, 42, 0.15); }
[data-bs-theme="dark"] .brand-raport .top200-callout h3 { color: #f1f5f9; }
[data-bs-theme="dark"] .brand-raport .top200-callout p { color: #cbd5e1; }
/* ============================================================
ARGUMENT TILES — w about-section reklamy
============================================================ */
.brand-raport .arg-tile {
background-color: #fff;
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 24px;
height: 100%;
transition: all 0.3s ease;
}
.brand-raport .arg-tile:hover {
border-color: var(--accent-color);
transform: translateY(-3px);
box-shadow: 0 12px 28px rgba(42, 24, 16, 0.08);
}
.brand-raport .arg-tile .arg-num {
font-family: 'Montserrat', sans-serif;
font-weight: 800;
font-size: 2.4rem;
line-height: 1;
color: var(--accent-color);
display: block;
margin-bottom: 10px;
}
.brand-raport .arg-tile h4 {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 1.1rem;
color: var(--primary-color);
margin-bottom: 8px;
}
.brand-raport .arg-tile p {
font-size: 0.9rem;
line-height: 1.55;
color: var(--text-color);
margin: 0;
}
[data-bs-theme="dark"] .brand-raport .arg-tile { background-color: #2d1d12; border-color: rgba(255, 255, 255, 0.08); }
[data-bs-theme="dark"] .brand-raport .arg-tile h4 { color: #f1f5f9; }
[data-bs-theme="dark"] .brand-raport .arg-tile p { color: #cbd5e1; }
/* ============================================================
STAT CARDS — 19 / 200 / 4 / 230 na home
============================================================ */
.brand-raport .stat-card {
background-color: #fff;
border: 1px solid var(--border-color);
border-radius: 14px;
padding: 28px 20px;
text-align: center;
transition: all 0.3s ease;
height: 100%;
}
.brand-raport .stat-card:hover {
border-color: var(--accent-color);
transform: translateY(-3px);
box-shadow: 0 12px 28px rgba(42, 24, 16, 0.08);
}
.brand-raport .stat-card .stat-num {
font-family: 'Montserrat', sans-serif;
font-weight: 800;
font-size: 3rem;
line-height: 1;
color: var(--primary-color);
display: block;
margin-bottom: 8px;
background: linear-gradient(120deg, #2A1810 0%, #B86A2A 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.brand-raport .stat-card .stat-label {
font-family: 'Montserrat', sans-serif;
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
color: var(--text-color);
}
[data-bs-theme="dark"] .brand-raport .stat-card { background-color: #2d1d12; border-color: rgba(255, 255, 255, 0.08); }
[data-bs-theme="dark"] .brand-raport .stat-card .stat-num { background: linear-gradient(120deg, #B86A2A 0%, #D4A574 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
[data-bs-theme="dark"] .brand-raport .stat-card .stat-label { color: #94a3b8; }
/* ============================================================
MODAL ORDER (popup zamówienia)
============================================================ */
.brand-raport .modal-order {
position: fixed; inset: 0;
background: rgba(42, 24, 16, 0.7);
backdrop-filter: blur(8px);
display: none;
align-items: flex-start;
justify-content: center;
z-index: 1050;
padding: 24px;
overflow-y: auto;
}
.brand-raport .modal-order.is-open { display: flex; animation: rfade .3s ease both; }
@keyframes rfade { from { opacity: 0; } to { opacity: 1; } }
.brand-raport .modal-order .dialog {
width: 100%;
max-width: 560px;
background-color: #fff;
border-radius: 18px;
margin-top: 5vh;
overflow: hidden;
animation: rslide .4s cubic-bezier(.2,.8,.2,1) both;
box-shadow: 0 40px 90px rgba(0,0,0,.4);
}
@keyframes rslide { from { transform: translateY(40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.brand-raport .modal-order .modal-head {
padding: 28px 32px 20px;
border-bottom: 1px solid var(--border-color);
display: grid;
grid-template-columns: 1fr auto;
gap: 16px;
align-items: flex-start;
}
.brand-raport .modal-order .modal-head h2 {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 1.6rem;
color: var(--primary-color);
margin: 0 0 6px;
letter-spacing: -0.3px;
}
.brand-raport .modal-order .modal-head p {
font-size: 0.92rem; color: var(--text-color); margin: 0;
}
.brand-raport .modal-order .modal-close {
width: 38px; height: 38px;
background-color: var(--bg-light);
border: 0;
border-radius: 50%;
display: grid; place-items: center;
font-size: 1.2rem;
cursor: pointer;
color: var(--primary-color);
transition: background-color .2s ease;
}
.brand-raport .modal-order .modal-close:hover { background-color: var(--accent-color); color: var(--primary-color); }
.brand-raport .modal-order .modal-body { padding: 24px 32px; }
.brand-raport .modal-order .modal-foot {
padding: 20px 32px;
background-color: var(--bg-light);
border-top: 1px solid var(--border-color);
display: grid;
grid-template-columns: 1fr auto;
gap: 16px;
align-items: center;
}
.brand-raport .modal-order .modal-foot .note {
font-size: 0.72rem;
color: var(--text-color);
margin: 0;
}
.brand-raport .modal-order .modal-success { display: none; padding: 48px 32px; text-align: center; }
.brand-raport .modal-order .modal-success.is-open { display: block; animation: rfade .4s ease both; }
.brand-raport .modal-order .modal-success .success-mark {
width: 72px; height: 72px;
background-color: var(--accent-color);
color: var(--primary-color);
display: grid; place-items: center;
margin: 0 auto 20px;
font-size: 2rem;
font-weight: 800;
border-radius: 50%;
}
.brand-raport .modal-order .modal-success h3 {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 1.6rem;
color: var(--primary-color);
margin-bottom: 12px;
}
.brand-raport .modal-order .modal-success p {
color: var(--text-color); max-width: 380px; margin: 0 auto 24px; font-size: 0.95rem;
}
[data-bs-theme="dark"] .brand-raport .modal-order .dialog { background-color: #2d1d12; }
[data-bs-theme="dark"] .brand-raport .modal-order .modal-head { border-color: rgba(255,255,255,.08); }
[data-bs-theme="dark"] .brand-raport .modal-order .modal-head h2,
[data-bs-theme="dark"] .brand-raport .modal-order .modal-success h3 { color: #f1f5f9; }
[data-bs-theme="dark"] .brand-raport .modal-order .modal-head p,
[data-bs-theme="dark"] .brand-raport .modal-order .modal-success p { color: #cbd5e1; }
[data-bs-theme="dark"] .brand-raport .modal-order .modal-foot { background-color: #3a2618; border-color: rgba(255,255,255,.08); }
[data-bs-theme="dark"] .brand-raport .modal-order .modal-foot .note { color: #94a3b8; }
[data-bs-theme="dark"] .brand-raport .modal-order .modal-close { background-color: #3a2618; color: #e2e8f0; }
/* ============================================================
COOKIES BANNER
============================================================ */
.brand-raport .cookies {
position: fixed;
left: 20px; right: 20px;
bottom: 20px;
max-width: 820px;
margin: 0 auto;
background-color: var(--primary-color);
color: #fff;
border-radius: 14px;
padding: 22px 26px;
box-shadow: 0 20px 50px rgba(0,0,0,.3);
border-top: 3px solid var(--accent-color);
display: none;
z-index: 1040;
}
.brand-raport .cookies.is-open { display: block; animation: rfade .4s ease both; }
.brand-raport .cookies-grid {
display: grid;
grid-template-columns: 1fr auto;
gap: 20px;
align-items: center;
}
.brand-raport .cookies p { font-size: 0.88rem; line-height: 1.55; color: #cbd5e1; margin: 0; }
.brand-raport .cookies p strong { color: #fff; }
.brand-raport .cookies a { color: var(--accent-color); text-decoration: underline; }
.brand-raport .cookies-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.brand-raport .cookies-actions .btn-accent,
.brand-raport .cookies-actions .btn-outline-light-custom { padding: 10px 18px; font-size: 0.82rem; }
@media (max-width: 680px) { .brand-raport .cookies-grid { grid-template-columns: 1fr; } }
/* ============================================================
AUDIENCE GRID — sektor cards w 4 kolumnach
============================================================ */
@media (max-width: 991px) { .brand-raport .sector-card .sector-img { height: 180px; } }
/* ============================================================
POPRAWKI — light page principle
============================================================ */
/* Bardziej powietrzne padding na sekcjach */
.brand-raport .featured-issue { padding: 2rem 0; }
.brand-raport .editorial-section { padding: 90px 0; }
.brand-raport .about-section { padding: 90px 0; }
.brand-raport .articles-section { padding: 90px 0; }
.brand-raport .topics-section { padding: 90px 0; }
@media (max-width: 768px) {
.brand-raport .featured-issue,
.brand-raport .editorial-section,
.brand-raport .about-section,
.brand-raport .articles-section,
.brand-raport .topics-section { padding: 60px 0; }
}
/* Reveal animations */
.brand-raport .reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1);
}
.brand-raport .reveal.is-in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
.brand-raport .reveal { opacity: 1; transform: none; }
.brand-raport .hero-cover { transform: none !important; }
.brand-raport .hero-eyebrow-dot { animation: none; }
}
/* ============================================================
OVERRIDES v3 — Raport: brąz, sans-serif, mniej zaokrągleń,
jaśniejszy hero, sektorowe kolory, numerowane eyebrows
============================================================ */
/* --- TOKENY DOPEŁNIAJĄCE -------------------------------------- */
:root {
--paper-bg: #FAF6EE; /* kremowo-papierowe tło hero/sekcji */
--accent-warm: #D4A574; /* caramel — drugi akcent na gradienty */
--primary-dim: #4a2f1c; /* lżejszy odcień brązu — tła ciemne */
/* Kolory sektorowe */
--sec-bio: #166534; /* zielony — biopaliwa */
--sec-lpg: #1d4ed8; /* niebieski — LPG */
--sec-hurt: #1a1a1a; /* czarny — hurt */
--sec-detal: #6F4E37; /* brązowy — detal */
--sec-em: #EA580C; /* pomarańczowy — elektromobilność */
}
/* --- BEZ ITALIC NIGDZIE --------------------------------------- */
.brand-raport em,
.brand-raport i,
.brand-raport .hero-title em,
.brand-raport .page-header-section h1 em,
.brand-raport h1 em, .brand-raport h2 em, .brand-raport h3 em,
.brand-raport h4 em, .brand-raport h5 em,
.brand-raport .hero-title-accent {
font-style: normal !important;
}
.brand-raport em, .brand-raport .hero-title em,
.brand-raport h1 em, .brand-raport h2 em, .brand-raport h3 em {
font-weight: 400;
color: var(--primary-dim);
}
/* --- TYPOGRAFIA — Montserrat wszędzie ------------------------- */
body.brand-raport {
font-family: 'Open Sans', sans-serif;
color: var(--text-color);
background-color: #fff;
}
.brand-raport h1, .brand-raport h2, .brand-raport h3,
.brand-raport h4, .brand-raport h5, .brand-raport h6 {
font-family: 'Montserrat', sans-serif;
font-weight: 800;
letter-spacing: -0.01em;
color: var(--primary-color);
}
/* --- ZMNIEJSZONE BORDER-RADIUS GLOBALNIE ---------------------- */
.brand-raport .hero-card { border-radius: 8px; }
.brand-raport .about-panel { border-radius: 8px; }
.brand-raport .article-card,
.brand-raport .sector-card,
.brand-raport .package-card,
.brand-raport .contact-card,
.brand-raport .data-box,
.brand-raport .arg-tile,
.brand-raport .stat-card,
.brand-raport .top200-callout,
.brand-raport .editor-card,
.brand-raport .about-card { border-radius: 4px; }
.brand-raport .contact-form-wrap { border-radius: 6px; }
.brand-raport .modal-order .dialog { border-radius: 8px; }
.brand-raport .featured-edition { border-radius: 8px; }
.brand-raport .about-icon { border-radius: 4px; }
.brand-raport .archive-tile .cover { border-radius: 2px; }
.brand-raport .topic-hero-img { border-radius: 2px; }
.brand-raport .hero-cover { border-radius: 2px; }
.brand-raport .edition-cover { border-radius: 2px; }
.brand-raport .article-card img,
.brand-raport .sector-card .sector-img { border-radius: 0; }
/* --- BUTTONY mniej zaokrąglone ------------------------------- */
.brand-raport .btn-primary,
.brand-raport .btn-accent,
.brand-raport .btn-outline-light-custom,
.brand-raport .btn-outline-secondary-custom,
.brand-raport .btn-hero-primary,
.brand-raport .btn-hero-outline,
.brand-raport .package-card .btn-pkg { border-radius: 3px !important; }
.brand-raport .hero-eyebrow,
.brand-raport .featured-edition .edition-eyebrow,
.brand-raport .page-header-section .eyebrow { border-radius: 3px; }
/* Field inputs */
.brand-raport .field input,
.brand-raport .field textarea { border-radius: 3px; }
/* Pill removed from price-tag */
.brand-raport .topic-badge { border-radius: 0; }
.brand-raport .article-category { border-radius: 0; }
.brand-raport .sector-card .badge-num { border-radius: 0; }
/* Cookies banner */
.brand-raport .cookies { border-radius: 6px; }
/* Floating tools — kanciaste, niech będą okrągłe (kółka są OK) */
/* Modal-close — kanciasty */
.brand-raport .modal-order .modal-close { border-radius: 3px; }
/* ============================================================
HERO JASNY — kremowo-papierowy zamiast granatu
============================================================ */
.brand-raport .hero-card {
background: var(--paper-bg);
background-image:
radial-gradient(circle at 1px 1px, rgba(42, 24, 16, 0.06) 1px, transparent 0);
background-size: 22px 22px;
color: var(--text-color);
box-shadow: 0 2px 0 rgba(42, 24, 16, .04), 0 20px 50px -20px rgba(42, 24, 16, .15);
border: 1px solid var(--border-color);
padding: 70px 60px;
position: relative;
overflow: hidden;
isolation: isolate;
}
/* Pasek dwukolorowy na górze hero — element signaturowy */
.brand-raport .hero-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
background: linear-gradient(90deg,
var(--primary-color) 0%,
var(--primary-color) 35%,
var(--accent-color) 35%,
var(--accent-color) 100%);
z-index: 2;
}
/* Wyłączamy ciemne deko warstwy NSP */
.brand-raport .hero-card .hero-deco-glow-cyan,
.brand-raport .hero-card .hero-deco-glow-violet,
.brand-raport .hero-card .hero-deco-lines {
display: none;
}
/* Pozostała tylko hero-deco-grid jako siatka kropek */
.brand-raport .hero-card .hero-deco-grid {
background-image: radial-gradient(circle at 1px 1px, rgba(42, 24, 16, 0.08) 1px, transparent 0);
background-size: 22px 22px;
opacity: 0.6;
}
/* Numer "19" — duży, brązowy outline, lżejszy ton */
.brand-raport .hero-issue-number {
font-family: 'Montserrat', sans-serif;
font-weight: 800;
font-size: 22rem;
color: transparent;
-webkit-text-stroke: 2px rgba(184, 106, 42, 0.18);
text-stroke: 2px rgba(184, 106, 42, 0.18);
letter-spacing: -0.08em;
}
/* Eyebrow w hero — kreska + uppercase, BEZ pulsującej kropki */
.brand-raport .hero-card .hero-eyebrow {
background-color: transparent;
border: 0;
padding: 0;
color: var(--accent-color);
letter-spacing: 3px;
font-size: 0.72rem;
font-weight: 800;
text-transform: uppercase;
display: inline-flex;
align-items: center;
gap: 14px;
border-radius: 0;
}
.brand-raport .hero-card .hero-eyebrow::before {
content: '';
width: 48px;
height: 2px;
background-color: var(--accent-color);
}
.brand-raport .hero-card .hero-eyebrow-dot { display: none !important; }
/* Tytuł hero — sans-serif, brązowy ciemny */
.brand-raport .hero-title {
font-family: 'Montserrat', sans-serif;
font-weight: 800;
color: var(--primary-color);
font-size: 3.2rem;
line-height: 1.05;
letter-spacing: -0.025em;
}
.brand-raport .hero-title-accent {
/* Drugi człon tytułu — w cognac, bez gradientu, bez italic */
background: none;
-webkit-background-clip: initial;
background-clip: initial;
color: var(--accent-color);
font-style: normal;
font-weight: 800;
}
/* Lead na jasnym tle */
.brand-raport .hero-lead {
color: var(--text-color);
font-size: 1.1rem;
line-height: 1.6;
}
/* Buttony hero na jasnym tle */
.brand-raport .btn-hero-primary {
background-color: var(--primary-color);
color: #fff;
border-color: var(--primary-color);
}
.brand-raport .btn-hero-primary:hover {
background-color: var(--accent-color);
border-color: var(--accent-color);
color: #fff;
box-shadow: 0 8px 20px rgba(184, 106, 42, 0.25);
}
.brand-raport .btn-hero-outline {
background-color: transparent;
color: var(--primary-color);
border: 2px solid var(--primary-color);
}
.brand-raport .btn-hero-outline:hover {
background-color: var(--primary-color);
color: #fff;
}
/* Meta — drobniejsze na jasnym */
.brand-raport .hero-meta {
border-top-color: rgba(42, 24, 16, 0.15);
color: var(--text-color);
}
.brand-raport .hero-meta-item { color: var(--primary-color); font-weight: 600; }
.brand-raport .hero-meta-item .bi { color: var(--accent-color); }
.brand-raport .hero-meta-divider { background-color: rgba(42, 24, 16, 0.25); }
/* Okładka w hero — mniej zaokrąglona, słabszy cień */
.brand-raport .hero-cover {
box-shadow:
0 20px 45px -10px rgba(42, 24, 16, .3),
0 12px 25px -15px rgba(42, 24, 16, .25);
}
/* DARK MODE adjustments dla hero */
[data-bs-theme="dark"] .brand-raport .hero-card {
background-color: var(--primary-dim);
background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.05) 1px, transparent 0);
color: #e8d9c5;
}
[data-bs-theme="dark"] .brand-raport .hero-title { color: #f5e6d3; }
[data-bs-theme="dark"] .brand-raport .hero-title-accent { color: var(--accent-warm); }
[data-bs-theme="dark"] .brand-raport .hero-issue-number {
-webkit-text-stroke: 2px rgba(212, 165, 116, 0.18);
}
[data-bs-theme="dark"] .brand-raport .hero-lead { color: #cbb89e; }
[data-bs-theme="dark"] .brand-raport .hero-meta { border-top-color: rgba(255,255,255,0.1); color: #cbb89e; }
[data-bs-theme="dark"] .brand-raport .hero-meta-item { color: #f5e6d3; }
[data-bs-theme="dark"] .brand-raport .btn-hero-primary { background-color: var(--accent-color); border-color: var(--accent-color); color: #fff; }
[data-bs-theme="dark"] .brand-raport .btn-hero-primary:hover { background-color: #fff; color: var(--primary-color); border-color: #fff; }
[data-bs-theme="dark"] .brand-raport .btn-hero-outline { color: #f5e6d3; border-color: rgba(255,255,255,0.4); }
/* ============================================================
ELEMENT SIGNATUROWY — numerowany eyebrow sekcji
"─── 01 NAZWA SEKCJI"
To odróżnia stronę od NSP (NSP używa pulsującej kropki)
============================================================ */
.brand-raport .section-num {
display: inline-flex;
align-items: center;
gap: 16px;
font-family: 'Montserrat', sans-serif;
font-weight: 800;
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 3px;
color: var(--accent-color);
margin-bottom: 18px;
}
.brand-raport .section-num::before {
content: '';
width: 48px;
height: 2px;
background-color: var(--accent-color);
flex-shrink: 0;
}
.brand-raport .section-num .num {
color: var(--primary-color);
font-weight: 800;
font-size: 0.85rem;
}
[data-bs-theme="dark"] .brand-raport .section-num .num { color: #f5e6d3; }
/* ============================================================
SECTION TITLES — bez italic, sans-serif
============================================================ */
.brand-raport .main-article-title,
.brand-raport .issue-header-title,
.brand-raport .article-title,
.brand-raport .alt-article-title,
.brand-raport .about-title,
.brand-raport .article-card .article-title,
.brand-raport .sector-card .sector-title,
.brand-raport .featured-edition h2,
.brand-raport .top200-callout h3 {
font-family: 'Montserrat', sans-serif;
font-weight: 800;
letter-spacing: -0.015em;
}
.brand-raport .issue-header-lead {
font-family: 'Open Sans', sans-serif;
font-style: normal;
color: var(--text-color);
}
/* Section divider — gruby brąz */
.brand-raport .section-divider { border-top-color: var(--primary-color); }
.brand-raport .issue-header-divider { border-top-color: var(--accent-color); }
/* Dropcap — bez serif */
.brand-raport .dropcap {
font-family: 'Montserrat', sans-serif;
font-weight: 800;
color: var(--accent-color);
}
/* ============================================================
SEKTORY — kolorowe top-borders
============================================================ */
.brand-raport .sector-card {
position: relative;
overflow: hidden;
}
.brand-raport .sector-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
z-index: 2;
background-color: var(--sector-color, var(--accent-color));
}
.brand-raport .sector-card[data-sector="bio"] { --sector-color: var(--sec-bio); }
.brand-raport .sector-card[data-sector="lpg"] { --sector-color: var(--sec-lpg); }
.brand-raport .sector-card[data-sector="hurt"] { --sector-color: var(--sec-hurt); }
.brand-raport .sector-card[data-sector="detal"] { --sector-color: var(--sec-detal); }
.brand-raport .sector-card[data-sector="em"] { --sector-color: var(--sec-em); }
.brand-raport .sector-card[data-sector="bio"] .badge-num { background-color: var(--sec-bio); color: #fff; }
.brand-raport .sector-card[data-sector="lpg"] .badge-num { background-color: var(--sec-lpg); color: #fff; }
.brand-raport .sector-card[data-sector="hurt"] .badge-num { background-color: var(--sec-hurt); color: #fff; }
.brand-raport .sector-card[data-sector="detal"] .badge-num { background-color: var(--sec-detal); color: #fff; }
.brand-raport .sector-card[data-sector="em"] .badge-num { background-color: var(--sec-em); color: #fff; }
/* Sektor — mniejsza fotka (5 w rzędzie wymaga mniej miejsca) */
.brand-raport .sector-card .sector-img { height: 170px; }
/* Tytuł sektora w kolorze sektora */
.brand-raport .sector-card[data-sector="bio"] .sector-title { color: var(--sec-bio); }
.brand-raport .sector-card[data-sector="lpg"] .sector-title { color: var(--sec-lpg); }
.brand-raport .sector-card[data-sector="hurt"] .sector-title { color: var(--sec-hurt); }
.brand-raport .sector-card[data-sector="detal"] .sector-title { color: var(--sec-detal); }
.brand-raport .sector-card[data-sector="em"] .sector-title { color: var(--sec-em); }
[data-bs-theme="dark"] .brand-raport .sector-card .sector-title { filter: brightness(1.6); }
/* ============================================================
ARCHIVE TILE — pasek lewy w cognac (sygnaturowy)
============================================================ */
.brand-raport .archive-tile .cover {
border-left: 3px solid var(--accent-color);
border-top: 1px solid var(--border-color);
border-right: 1px solid var(--border-color);
border-bottom: 1px solid var(--border-color);
}
.brand-raport .archive-tile .cover::before { display: none; }
/* ============================================================
PAGE HEADER — kremowe tło, kanciaste
============================================================ */
.brand-raport .page-header-section {
background-color: var(--paper-bg);
background-image: radial-gradient(circle at 1px 1px, rgba(42, 24, 16, 0.06) 1px, transparent 0);
background-size: 22px 22px;
border-bottom: 1px solid var(--border-color);
position: relative;
}
.brand-raport .page-header-section::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
background: linear-gradient(90deg,
var(--primary-color) 0%,
var(--primary-color) 35%,
var(--accent-color) 35%,
var(--accent-color) 100%);
}
.brand-raport .page-header-section h1 {
font-family: 'Montserrat', sans-serif;
font-weight: 800;
font-size: 3rem;
letter-spacing: -0.025em;
}
.brand-raport .page-header-section .eyebrow {
background-color: transparent;
border: 0;
padding: 0;
letter-spacing: 3px;
display: inline-flex;
align-items: center;
gap: 14px;
}
.brand-raport .page-header-section .eyebrow::before {
content: '';
width: 48px;
height: 2px;
background-color: var(--accent-color);
display: inline-block;
}
/* ============================================================
FEATURED EDITION (archiwum) — niech będzie ale jasna, brązowa
(mimo że teraz wyłączymy ją w HTML archiwum)
============================================================ */
.brand-raport .featured-edition {
background: var(--primary-color);
color: #f5e6d3;
}
.brand-raport .featured-edition::after {
background: radial-gradient(circle, rgba(212, 165, 116, 0.18) 0%, transparent 60%);
}
.brand-raport .featured-edition h2 {
font-family: 'Montserrat', sans-serif;
font-weight: 800;
}
.brand-raport .featured-edition h2 span,
.brand-raport .featured-edition h2 .hero-title-accent {
color: var(--accent-warm) !important;
background: none !important;
-webkit-background-clip: initial !important;
background-clip: initial !important;
}
/* ============================================================
ARTICLES / FEATURED-ISSUE sekcje — tła
============================================================ */
.brand-raport .articles-section,
.brand-raport .about-section {
background-color: var(--paper-bg);
}
/* About panel — bez pochylonego eyebrow nadpisu */
.brand-raport .about-panel { background-color: #fff; }
.brand-raport .about-panel::before {
background: linear-gradient(90deg, var(--accent-color), transparent);
}
.brand-raport .about-panel .about-title::before {
/* z NSP: dodaje "Kwartalnik" nad tytułem; my chcemy "ROCZNY RAPORT" */
content: 'Roczny raport branży paliwowej';
display: block;
font-family: 'Montserrat', sans-serif;
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--accent-color);
margin-bottom: 10px;
}
/* ============================================================
NEWSLETTER STRIP — ciemny brąz zamiast gradientu navy
============================================================ */
.brand-raport .newsletter-strip {
background: var(--primary-color);
background-image:
radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.04) 1px, transparent 0);
background-size: 22px 22px;
}
.brand-raport .newsletter-strip h3,
.brand-raport .newsletter-strip h2 {
font-family: 'Montserrat', sans-serif;
font-weight: 800;
color: #fff !important;
}
.brand-raport .newsletter-strip h3 em,
.brand-raport .newsletter-strip h3 span {
color: var(--accent-warm) !important;
background: none !important;
-webkit-background-clip: initial !important;
background-clip: initial !important;
font-style: normal !important;
}
/* ============================================================
STAT CARDS — gradient brązowy
============================================================ */
.brand-raport .stat-card .stat-num {
background: linear-gradient(120deg, var(--primary-color) 0%, var(--accent-color) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-family: 'Montserrat', sans-serif;
}
[data-bs-theme="dark"] .brand-raport .stat-card .stat-num {
background: linear-gradient(120deg, var(--accent-color) 0%, var(--accent-warm) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* ============================================================
TOP 200 CALLOUT — bez gradientu cyjan-fiolet
============================================================ */
.brand-raport .top200-callout .num {
background: linear-gradient(120deg, var(--accent-color) 0%, var(--accent-warm) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-family: 'Montserrat', sans-serif;
font-weight: 800;
}
/* ============================================================
ARG TILES — bez italic numerów
============================================================ */
.brand-raport .arg-tile .arg-num {
font-family: 'Montserrat', sans-serif;
font-weight: 800;
color: var(--accent-color);
}
.brand-raport .rodo-list li::before {
font-family: 'Montserrat', sans-serif;
font-weight: 800;
}
/* ============================================================
FOOTER — ciemny brąz
============================================================ */
.brand-raport .im-home-footer { background-color: var(--primary-color); }
/* ============================================================
FOOTER IM FOOTER LINK — cognac
============================================================ */
.brand-raport .im-footer-link { color: var(--accent-warm); }
.brand-raport .im-footer-link:hover { color: #fff; }
/* ============================================================
POŁOŻENIA POZA SEKTOR-CARD - kolory pakietów cards
============================================================ */
.brand-raport .package-card.is-featured {
border: 2px solid var(--accent-color);
box-shadow: 0 15px 35px rgba(184, 106, 42, 0.15);
}
.brand-raport .package-card.is-featured::before {
background-color: var(--accent-color);
color: #fff;
}
/* ============================================================
IZOLACJA: usuń pochylenia okładek (lekkie)
============================================================ */
.brand-raport .hero-cover {
transform: perspective(800px) rotateY(-5deg) rotateX(1deg);
}
/* ============================================================
RESPONSIVE - hero
============================================================ */
@media (max-width: 768px) {
.brand-raport .hero-card { padding: 40px 24px; }
.brand-raport .hero-title { font-size: 2rem; }
.brand-raport .page-header-section h1 { font-size: 2rem; }
.brand-raport .hero-issue-number { font-size: 12rem; }
}
/* ============================================================
v4 POPRAWKI
1. Tła paliwowe pod page-header
2. Bogatsza paleta (mniej brązu)
3. RODO akordeon
4. Akordeon reklama — desktop panel pod grafiką
5. Sektor "Zimna Fuzja" pink + col-md-6 grid
6. Dark mode fix
7. Wstępniak na home (about-intro-strip)
8. Zajawki artykułów (article-teasers)
============================================================ */
/* --- 1. NOWA, BOGATSZA PALETA ---------------------------------
Ograniczamy brąz tylko do akcentu sygnaturowego;
główne tła stają się szare-grafitowe, dające dystans do brązu.
*/
:root {
/* Stary primary (espresso) zostaje tylko jako --signature na pasek górny */
--signature-brown: #8B4513;
/* Nowy primary: ciemny grafit — neutralny, "raportowy" */
--primary-color: #1f2937; /* dark slate */
--primary-dim: #374151; /* lighter slate */
--accent-color: #C2410C; /* paliwowa rdza/cynober — odróżnia się od cognac NSP */
--accent-warm: #F59E0B; /* amber — sekundarny */
--paper-bg: #F8F5EF; /* zachowujemy kremowy papier */
--text-color: #4B5563;
--border-color: #E5E7EB;
--bg-light: #fff;
/* Sektorowe — jaśniejsze warianty (dla wypełnień tła) */
--sec-hurt-bg: #f1f1f1;
--sec-detal-bg: #fef3e0;
--sec-bio-bg: #ecfdf5;
--sec-lpg-bg: #eff6ff;
--sec-em-bg: #fff7ed;
--sec-pink: #ec4899; /* Zimna Fuzja */
--sec-pink-bg: #fdf2f8;
}
/* --- 2. CIAŁO STRONY ----------------------------------------- */
body.brand-raport {
background-color: #fff;
color: var(--text-color);
}
/* --- 3. NAV w nowej palecie ---------------------------------- */
.brand-raport .container-header {
background-color: rgba(255,255,255,0.95) !important;
border-bottom: 1px solid var(--border-color);
}
.brand-raport .navbar-logo > span:first-child,
.brand-raport .nav-cta {
background-color: var(--primary-color) !important;
}
.brand-raport .nav-link {
color: var(--text-color) !important;
}
.brand-raport .nav-link.active,
.brand-raport .nav-link:hover {
color: var(--accent-color) !important;
}
.brand-raport .nav-link::after {
background-color: var(--accent-color) !important;
}
.brand-raport .btn-primary {
background-color: var(--accent-color) !important;
border-color: var(--accent-color) !important;
}
.brand-raport .btn-primary:hover {
background-color: var(--primary-color) !important;
border-color: var(--primary-color) !important;
}
/* --- 4. HERO — nowa paleta ---------------------------------- */
.brand-raport .hero-card {
background-color: var(--paper-bg);
}
.brand-raport .hero-card::before {
/* Pasek dwukolorowy — primary + accent rdza */
background: linear-gradient(90deg,
var(--primary-color) 0%,
var(--primary-color) 35%,
var(--accent-color) 35%,
var(--accent-color) 100%) !important;
}
.brand-raport .hero-issue-number {
-webkit-text-stroke: 2px rgba(194, 65, 12, 0.18) !important;
}
.brand-raport .hero-eyebrow {
color: var(--accent-color) !important;
}
.brand-raport .hero-eyebrow::before {
background-color: var(--accent-color) !important;
}
.brand-raport .hero-title-accent {
color: var(--accent-color) !important;
}
.brand-raport .btn-hero-primary {
background-color: var(--primary-color);
color: #fff;
border-color: var(--primary-color);
}
.brand-raport .btn-hero-primary:hover {
background-color: var(--accent-color);
border-color: var(--accent-color);
box-shadow: 0 8px 20px rgba(194, 65, 12, 0.25);
}
.brand-raport .btn-hero-outline {
color: var(--primary-color);
border-color: var(--primary-color);
}
.brand-raport .btn-hero-outline:hover {
background-color: var(--primary-color);
color: #fff;
}
.brand-raport .hero-meta-item .bi { color: var(--accent-color); }
/* --- 5. ELEMENT SIGNATUROWY (section-num) --------------------- */
.brand-raport .section-num {
color: var(--accent-color) !important;
}
.brand-raport .section-num::before {
background-color: var(--accent-color) !important;
}
.brand-raport .section-num .num {
color: var(--primary-color) !important;
}
/* --- 6. WSTĘPNIAK pod hero ----------------------------------- */
.brand-raport .about-strip {
padding: 70px 0 50px;
background-color: #fff;
}
.brand-raport .about-strip .lead-text {
font-family: 'Open Sans', sans-serif;
font-size: 1.18rem;
line-height: 1.65;
color: var(--text-color);
max-width: 70ch;
margin: 0 auto;
}
.brand-raport .about-strip .lead-text strong {
color: var(--primary-color);
font-weight: 700;
}
.brand-raport .about-strip .mini-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
max-width: 700px;
margin: 36px auto 0;
}
.brand-raport .about-strip .mini-stat {
text-align: center;
padding: 18px 8px;
background-color: var(--paper-bg);
border-radius: 4px;
border-top: 3px solid var(--accent-color);
}
.brand-raport .about-strip .mini-stat .num {
font-family: 'Montserrat', sans-serif;
font-weight: 800;
font-size: 1.9rem;
color: var(--primary-color);
line-height: 1;
display: block;
margin-bottom: 6px;
letter-spacing: -0.02em;
}
.brand-raport .about-strip .mini-stat .label {
font-family: 'Montserrat', sans-serif;
font-size: 0.68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--text-color);
}
@media (max-width: 768px) {
.brand-raport .about-strip { padding: 48px 0 32px; }
.brand-raport .about-strip .lead-text { font-size: 1.02rem; }
.brand-raport .about-strip .mini-stats { grid-template-columns: repeat(2, 1fr); }
}
/* --- 7. ZAJAWKI ARTYKUŁÓW ------------------------------------ */
.brand-raport .teasers-section {
padding: 80px 0;
background-color: var(--paper-bg);
}
.brand-raport .teaser-card {
display: grid;
grid-template-columns: 280px 1fr;
gap: 32px;
background-color: #fff;
border: 1px solid var(--border-color);
border-radius: 4px;
overflow: hidden;
height: 100%;
transition: all 0.3s ease;
border-left: 3px solid var(--teaser-color, var(--accent-color));
}
.brand-raport .teaser-card:hover {
transform: translateY(-3px);
box-shadow: 0 16px 36px rgba(31, 41, 55, 0.1);
}
.brand-raport .teaser-card .teaser-img {
width: 100%;
height: 100%;
min-height: 220px;
object-fit: cover;
}
.brand-raport .teaser-card .teaser-body {
padding: 28px 32px 28px 0;
display: flex;
flex-direction: column;
justify-content: center;
}
.brand-raport .teaser-card .teaser-meta {
font-family: 'Montserrat', sans-serif;
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--teaser-color, var(--accent-color));
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 12px;
}
.brand-raport .teaser-card .teaser-meta::before {
content: '';
width: 32px;
height: 2px;
background-color: var(--teaser-color, var(--accent-color));
}
.brand-raport .teaser-card h3 {
font-family: 'Montserrat', sans-serif;
font-weight: 800;
font-size: 1.45rem;
letter-spacing: -0.015em;
color: var(--primary-color);
margin-bottom: 12px;
line-height: 1.25;
}
.brand-raport .teaser-card .teaser-excerpt {
font-size: 0.98rem;
line-height: 1.6;
color: var(--text-color);
margin-bottom: 14px;
}
.brand-raport .teaser-card .teaser-author {
font-family: 'Montserrat', sans-serif;
font-size: 0.78rem;
font-weight: 600;
color: var(--text-color);
}
.brand-raport .teaser-card .teaser-author strong {
color: var(--primary-color);
}
@media (max-width: 768px) {
.brand-raport .teaser-card {
grid-template-columns: 1fr;
}
.brand-raport .teaser-card .teaser-img {
height: 200px;
min-height: auto;
}
.brand-raport .teaser-card .teaser-body {
padding: 20px 24px 24px;
}
.brand-raport .teaser-card h3 { font-size: 1.2rem; }
}
/* --- 8. SEKTORY — 6 sektorów, col-6 na md+, większe obrazki --- */
.brand-raport .sector-card .sector-img { height: 240px; }
@media (max-width: 991px) {
.brand-raport .sector-card .sector-img { height: 200px; }
}
@media (max-width: 576px) {
.brand-raport .sector-card .sector-img { height: 180px; }
}
/* Pink sektor — Zimna Fuzja */
.brand-raport .sector-card[data-sector="fuzja"] { --sector-color: var(--sec-pink); }
.brand-raport .sector-card[data-sector="fuzja"] .badge-num { background-color: var(--sec-pink); color: #fff; }
.brand-raport .sector-card[data-sector="fuzja"] .sector-title { color: var(--sec-pink); }
/* --- 9. PAGE HEADER — tło paliwowe (jak hero reklamy) ---------
Z e-petrol.pl: paliwo-detal.jpg. Każda podstrona ma własny obraz.
*/
.brand-raport .page-header-section {
position: relative;
min-height: 380px;
display: flex;
align-items: center;
background: #1f2937 var(--page-bg-image, url('https://raport.informationmarket.pl/images/raporty/2023/paliwo-detal.jpg')) center/cover no-repeat;
color: #fff;
padding: 70px 0;
overflow: hidden;
}
.brand-raport .page-header-section::before {
/* Pasek dwukolorowy */
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
background: linear-gradient(90deg,
var(--primary-color) 0%, var(--primary-color) 35%,
var(--accent-color) 35%, var(--accent-color) 100%) !important;
z-index: 3;
}
.brand-raport .page-header-section::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(31, 41, 55, 0.55) 0%, rgba(31, 41, 55, 0.80) 100%);
z-index: 1;
}
.brand-raport .page-header-section .container { position: relative; z-index: 2; }
.brand-raport .page-header-section h1 {
color: #fff !important;
font-size: 3.2rem;
}
.brand-raport .page-header-section h1 em {
color: rgba(255,255,255,0.7) !important;
}
.brand-raport .page-header-section .lede {
color: rgba(255,255,255,0.85) !important;
font-size: 1.15rem;
max-width: 70ch;
}
.brand-raport .page-header-section .eyebrow {
color: var(--accent-warm) !important;
background-color: transparent;
border: 0;
}
.brand-raport .page-header-section .eyebrow::before {
background-color: var(--accent-warm) !important;
}
/* Per-page background images */
.brand-raport.page-archiwum .page-header-section {
--page-bg-image: url('https://raport.informationmarket.pl/images/raporty/2024/bkg-intro.jpg');
}
.brand-raport.page-wydawca .page-header-section {
--page-bg-image: url('https://raport.informationmarket.pl/images/raporty/2026/bkg-intro.jpg');
}
.brand-raport.page-archiwum .page-header-section,
.brand-raport.page-wydawca .page-header-section {
background-image: var(--page-bg-image);
background-color: #1f2937;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
@media (max-width: 768px) {
.brand-raport .page-header-section {
min-height: 280px;
padding: 50px 0;
}
.brand-raport .page-header-section h1 { font-size: 2rem; }
}
/* --- 10. RODO AKORDEON --------------------------------------- */
.brand-raport .rodo-accordion {
max-width: 900px;
margin: 0 auto;
}
.brand-raport .rodo-item {
background-color: #fff;
border: 1px solid var(--border-color);
border-left: 3px solid var(--accent-color);
border-radius: 4px;
margin-bottom: 12px;
overflow: hidden;
}
.brand-raport .rodo-toggle {
width: 100%;
display: grid;
grid-template-columns: 56px 1fr 32px;
gap: 16px;
align-items: center;
padding: 18px 24px;
background: transparent;
border: 0;
text-align: left;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 0.98rem;
color: var(--primary-color);
cursor: pointer;
transition: background-color 0.2s ease;
line-height: 1.35;
}
.brand-raport .rodo-toggle:hover { background-color: var(--paper-bg); }
.brand-raport .rodo-toggle .num {
font-family: 'Montserrat', sans-serif;
font-weight: 800;
font-size: 1.6rem;
color: var(--accent-color);
line-height: 1;
letter-spacing: -0.02em;
}
.brand-raport .rodo-toggle .chev {
color: var(--accent-color);
font-size: 1.2rem;
transition: transform 0.3s ease;
}
.brand-raport .rodo-toggle[aria-expanded="true"] .chev {
transform: rotate(180deg);
}
.brand-raport .rodo-panel {
display: none;
padding: 0 24px 22px 96px;
font-size: 0.95rem;
line-height: 1.65;
color: var(--text-color);
}
.brand-raport .rodo-panel.is-open {
display: block;
animation: rodoFade 0.35s ease both;
}
@keyframes rodoFade {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
.brand-raport .rodo-panel a {
color: var(--accent-color);
font-weight: 700;
text-decoration: underline;
}
@media (max-width: 600px) {
.brand-raport .rodo-toggle {
grid-template-columns: 40px 1fr 24px;
gap: 12px;
padding: 14px 16px;
font-size: 0.92rem;
}
.brand-raport .rodo-toggle .num { font-size: 1.3rem; }
.brand-raport .rodo-panel { padding: 0 16px 18px 68px; }
}
/* --- 11. REKLAMA — panel akordeonu pod grafiką w desktop ----- */
/* Każdy panel pojawia się pod swoją grafiką, nie pod całym wierszem */
.brand-raport .acc-tile-wrap {
display: flex;
flex-direction: column;
}
.brand-raport .acc-tile-wrap .acc-panel-inline {
display: none;
background-color: var(--paper-bg);
border-left: 3px solid var(--accent-color);
border-radius: 0 4px 4px 0;
padding: 24px 26px;
margin-top: 16px;
}
.brand-raport .acc-tile-wrap .acc-panel-inline.is-open {
display: block;
animation: accFade 0.35s ease both;
}
.brand-raport .acc-tile-wrap .acc-panel-inline p {
font-size: 0.95rem;
line-height: 1.55;
color: var(--text-color);
margin-bottom: 10px;
}
.brand-raport .acc-tile-wrap .acc-panel-inline p strong { color: var(--primary-color); }
.brand-raport .acc-tile-wrap .acc-panel-inline ul {
list-style: none;
padding: 0;
margin: 0;
}
.brand-raport .acc-tile-wrap .acc-panel-inline ul li {
padding: 5px 0 5px 22px;
position: relative;
color: var(--text-color);
font-size: 0.92rem;
line-height: 1.5;
}
.brand-raport .acc-tile-wrap .acc-panel-inline ul li::before {
content: '✓';
position: absolute;
left: 0;
color: var(--accent-color);
font-weight: 800;
}
.brand-raport .acc-tile-wrap .acc-panel-inline ul li strong { color: var(--primary-color); font-weight: 700; }
/* --- 12. ABOUT SECTION — schowana na home (przeniesiona pod hero) */
/* W indexie nie używamy już sekcji .about-section — wstępniak przejął rolę */
/* --- 13. NEWSLETTER STRIP — w nowej palecie ------------------- */
.brand-raport .newsletter-strip {
background-color: var(--primary-color);
}
.brand-raport .newsletter-strip h3,
.brand-raport .newsletter-strip h3 em,
.brand-raport .newsletter-strip h3 span {
color: #fff !important;
}
/* --- 14. FOOTER --------------------------------------------- */
.brand-raport .im-home-footer {
background-color: var(--primary-color) !important;
}
.brand-raport .im-footer-link {
color: var(--accent-warm) !important;
}
.brand-raport .im-footer-link:hover {
color: #fff !important;
}
/* --- 15. STAT CARDS, TOP200 — nowy gradient ------------------- */
.brand-raport .stat-card .stat-num {
background: linear-gradient(120deg, var(--primary-color) 0%, var(--accent-color) 100%) !important;
-webkit-background-clip: text;
background-clip: text;
color: transparent !important;
}
.brand-raport .top200-callout .num {
background: linear-gradient(120deg, var(--accent-color) 0%, var(--accent-warm) 100%) !important;
-webkit-background-clip: text;
background-clip: text;
color: transparent !important;
}
/* --- 16. KONTAKT-CARD ikona — gradient grafit→accent ---------- */
.brand-raport .contact-card .contact-icon {
background: linear-gradient(135deg, var(--primary-color), var(--primary-dim));
color: var(--accent-warm);
}
/* --- 17. ARG-TILE numery ------------------------------------ */
.brand-raport .arg-tile .arg-num { color: var(--accent-color); }
/* --- 18. PACKAGE-CARD ------------------------------------- */
.brand-raport .package-card.is-featured {
border: 2px solid var(--accent-color);
box-shadow: 0 15px 35px rgba(194, 65, 12, 0.15);
}
.brand-raport .package-card.is-featured::before {
background-color: var(--accent-color);
}
.brand-raport .package-card .btn-pkg {
background-color: var(--primary-color);
border-color: var(--primary-color);
}
.brand-raport .package-card .btn-pkg:hover {
background-color: var(--accent-color);
border-color: var(--accent-color);
}
.brand-raport .package-card.is-featured .btn-pkg {
background-color: var(--accent-color);
border-color: var(--accent-color);
}
/* ============================================================
19. DARK MODE — KOMPLETNY REMASTER
============================================================ */
[data-bs-theme="dark"] {
--primary-color: #f9fafb; /* zamiast brązu — białe nagłówki */
--primary-dim: #d1d5db;
--accent-color: #FB923C; /* żywszy pomarańcz w ciemności */
--accent-warm: #FCD34D;
--paper-bg: #1f2937; /* "papierowe" tło dark */
--text-color: #cbd5e1;
--border-color: rgba(255,255,255,0.10);
--bg-light: #1f2937;
}
[data-bs-theme="dark"] body.brand-raport {
background-color: #0f172a;
color: var(--text-color);
}
[data-bs-theme="dark"] .brand-raport h1,
[data-bs-theme="dark"] .brand-raport h2,
[data-bs-theme="dark"] .brand-raport h3,
[data-bs-theme="dark"] .brand-raport h4,
[data-bs-theme="dark"] .brand-raport h5,
[data-bs-theme="dark"] .brand-raport h6 {
color: #f9fafb !important;
}
[data-bs-theme="dark"] .brand-raport h1 em,
[data-bs-theme="dark"] .brand-raport h2 em,
[data-bs-theme="dark"] .brand-raport h3 em {
color: #94a3b8 !important;
}
/* Nav */
[data-bs-theme="dark"] .brand-raport .container-header {
background-color: rgba(15, 23, 42, 0.95) !important;
border-bottom-color: rgba(255,255,255,0.08);
}
[data-bs-theme="dark"] .brand-raport .navbar-logo > span:first-child,
[data-bs-theme="dark"] .brand-raport .nav-cta {
background-color: var(--accent-color) !important;
color: #0f172a !important;
}
[data-bs-theme="dark"] .brand-raport .navbar-logo span[style*="color:var(--primary-color)"] {
color: #f9fafb !important;
}
[data-bs-theme="dark"] .brand-raport .nav-link { color: #e2e8f0 !important; }
[data-bs-theme="dark"] .brand-raport .nav-link.active,
[data-bs-theme="dark"] .brand-raport .nav-link:hover { color: var(--accent-color) !important; }
[data-bs-theme="dark"] .brand-raport .btn-primary {
background-color: var(--accent-color) !important;
border-color: var(--accent-color) !important;
color: #0f172a !important;
}
/* Hero */
[data-bs-theme="dark"] .brand-raport .hero-card {
background-color: #1e293b;
background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.05) 1px, transparent 0);
border-color: rgba(255,255,255,0.08);
}
[data-bs-theme="dark"] .brand-raport .hero-card .hero-deco-grid {
background-image: radial-gradient(circle at 1px 1px, rgba(251,146,60,0.10) 1px, transparent 0);
}
[data-bs-theme="dark"] .brand-raport .hero-title { color: #f9fafb !important; }
[data-bs-theme="dark"] .brand-raport .hero-title-accent { color: var(--accent-color) !important; }
[data-bs-theme="dark"] .brand-raport .hero-eyebrow { color: var(--accent-color) !important; }
[data-bs-theme="dark"] .brand-raport .hero-eyebrow::before { background-color: var(--accent-color); }
[data-bs-theme="dark"] .brand-raport .hero-issue-number {
-webkit-text-stroke: 2px rgba(251,146,60,0.18);
}
[data-bs-theme="dark"] .brand-raport .hero-lead { color: #cbd5e1; }
[data-bs-theme="dark"] .brand-raport .hero-meta { border-top-color: rgba(255,255,255,0.10); color: #cbd5e1; }
[data-bs-theme="dark"] .brand-raport .hero-meta-item { color: #f9fafb; }
[data-bs-theme="dark"] .brand-raport .hero-meta-item .bi { color: var(--accent-color); }
[data-bs-theme="dark"] .brand-raport .hero-meta-divider { background-color: rgba(255,255,255,0.15); }
[data-bs-theme="dark"] .brand-raport .btn-hero-primary {
background-color: var(--accent-color);
border-color: var(--accent-color);
color: #0f172a;
}
[data-bs-theme="dark"] .brand-raport .btn-hero-primary:hover {
background-color: #fff;
border-color: #fff;
color: #0f172a;
}
[data-bs-theme="dark"] .brand-raport .btn-hero-outline {
color: #f9fafb;
border-color: rgba(255,255,255,0.4);
}
[data-bs-theme="dark"] .brand-raport .btn-hero-outline:hover {
background-color: #f9fafb;
color: #0f172a;
border-color: #f9fafb;
}
/* Sekcje */
[data-bs-theme="dark"] .brand-raport .about-strip { background-color: #0f172a; }
[data-bs-theme="dark"] .brand-raport .about-strip .lead-text { color: #cbd5e1; }
[data-bs-theme="dark"] .brand-raport .about-strip .lead-text strong { color: #f9fafb; }
[data-bs-theme="dark"] .brand-raport .about-strip .mini-stat {
background-color: #1e293b;
border-top-color: var(--accent-color);
}
[data-bs-theme="dark"] .brand-raport .about-strip .mini-stat .num {
color: var(--accent-color);
}
[data-bs-theme="dark"] .brand-raport .about-strip .mini-stat .label { color: #94a3b8; }
[data-bs-theme="dark"] .brand-raport .featured-issue { background-color: #0f172a; }
[data-bs-theme="dark"] .brand-raport .articles-section { background-color: #1e293b; }
[data-bs-theme="dark"] .brand-raport .teasers-section { background-color: #1e293b; }
[data-bs-theme="dark"] .brand-raport .editorial-section { background-color: #0f172a; }
[data-bs-theme="dark"] .brand-raport .section-num { color: var(--accent-color) !important; }
[data-bs-theme="dark"] .brand-raport .section-num::before { background-color: var(--accent-color) !important; }
[data-bs-theme="dark"] .brand-raport .section-num .num { color: #f9fafb !important; }
[data-bs-theme="dark"] .brand-raport .issue-header-lead,
[data-bs-theme="dark"] .brand-raport .page-header-section .lede { color: #cbd5e1 !important; }
[data-bs-theme="dark"] .brand-raport .issue-header-divider { border-top-color: var(--accent-color); }
[data-bs-theme="dark"] .brand-raport .section-divider { border-top-color: rgba(255,255,255,0.1); }
[data-bs-theme="dark"] .brand-raport .newspaper-columns { color: #cbd5e1; column-rule-color: rgba(255,255,255,0.1); }
[data-bs-theme="dark"] .brand-raport .newspaper-columns p { color: #cbd5e1; }
[data-bs-theme="dark"] .brand-raport .dropcap { color: var(--accent-color); }
[data-bs-theme="dark"] .brand-raport .topic-badge {
background-color: rgba(251,146,60,0.15);
color: var(--accent-color);
border-color: rgba(251,146,60,0.3);
}
[data-bs-theme="dark"] .brand-raport .page-number { color: #94a3b8; }
/* Sektor cards */
[data-bs-theme="dark"] .brand-raport .sector-card {
background-color: #1e293b;
border-color: rgba(255,255,255,0.08);
}
[data-bs-theme="dark"] .brand-raport .sector-card .sector-title {
filter: brightness(1.6) saturate(0.9);
}
[data-bs-theme="dark"] .brand-raport .sector-card .sector-body p,
[data-bs-theme="dark"] .brand-raport .sector-card .sector-topics li { color: #cbd5e1; }
[data-bs-theme="dark"] .brand-raport .sector-card .sector-topics { border-color: rgba(255,255,255,0.08); }
/* Teaser cards */
[data-bs-theme="dark"] .brand-raport .teaser-card {
background-color: #0f172a;
border-color: rgba(255,255,255,0.08);
}
[data-bs-theme="dark"] .brand-raport .teaser-card h3 { color: #f9fafb; }
[data-bs-theme="dark"] .brand-raport .teaser-card .teaser-excerpt { color: #cbd5e1; }
[data-bs-theme="dark"] .brand-raport .teaser-card .teaser-author { color: #94a3b8; }
[data-bs-theme="dark"] .brand-raport .teaser-card .teaser-author strong { color: #f9fafb; }
/* Stat cards */
[data-bs-theme="dark"] .brand-raport .stat-card {
background-color: #1e293b;
border-color: rgba(255,255,255,0.08);
}
[data-bs-theme="dark"] .brand-raport .stat-card .stat-num {
background: linear-gradient(120deg, var(--accent-color) 0%, var(--accent-warm) 100%) !important;
-webkit-background-clip: text;
background-clip: text;
color: transparent !important;
}
[data-bs-theme="dark"] .brand-raport .stat-card .stat-label { color: #94a3b8; }
/* Page header (background image — dark overlay) */
[data-bs-theme="dark"] .brand-raport .page-header-section::after {
background: linear-gradient(180deg, rgba(15, 23, 42, 0.70) 0%, rgba(15, 23, 42, 0.90) 100%);
}
[data-bs-theme="dark"] .brand-raport .page-header-section .eyebrow { color: var(--accent-warm) !important; }
[data-bs-theme="dark"] .brand-raport .page-header-section .eyebrow::before { background-color: var(--accent-warm) !important; }
/* Topic hero img */
[data-bs-theme="dark"] .brand-raport .topic-hero-img {
box-shadow: 0 30px 60px -10px rgba(0,0,0,0.6);
}
/* Data box */
[data-bs-theme="dark"] .brand-raport .data-box {
background-color: #1e293b;
border-color: rgba(255,255,255,0.08);
}
[data-bs-theme="dark"] .brand-raport .data-box h3 {
color: var(--accent-color) !important;
border-color: rgba(255,255,255,0.1);
}
[data-bs-theme="dark"] .brand-raport .data-box dt { color: #94a3b8; }
[data-bs-theme="dark"] .brand-raport .data-box dd,
[data-bs-theme="dark"] .brand-raport .data-box dd a { color: #f9fafb; }
/* Contact card */
[data-bs-theme="dark"] .brand-raport .contact-card {
background-color: #1e293b;
border-color: rgba(255,255,255,0.08);
}
[data-bs-theme="dark"] .brand-raport .contact-card h3 { color: #f9fafb; }
[data-bs-theme="dark"] .brand-raport .contact-card .contact-role { color: var(--accent-color); }
[data-bs-theme="dark"] .brand-raport .contact-card p { color: #cbd5e1; }
[data-bs-theme="dark"] .brand-raport .contact-card p a { color: #f9fafb; }
/* Form */
[data-bs-theme="dark"] .brand-raport .contact-form-wrap {
background-color: #1e293b;
border-color: rgba(255,255,255,0.08);
}
[data-bs-theme="dark"] .brand-raport .contact-form-wrap h3 { color: #f9fafb; }
[data-bs-theme="dark"] .brand-raport .contact-form-wrap .intro,
[data-bs-theme="dark"] .brand-raport .checkbox { color: #cbd5e1; }
[data-bs-theme="dark"] .brand-raport .field label { color: #cbd5e1; }
[data-bs-theme="dark"] .brand-raport .field input,
[data-bs-theme="dark"] .brand-raport .field textarea {
background-color: #0f172a;
border-color: rgba(255,255,255,0.10);
color: #f9fafb;
}
[data-bs-theme="dark"] .brand-raport .field input:focus,
[data-bs-theme="dark"] .brand-raport .field textarea:focus {
border-color: var(--accent-color);
box-shadow: 0 0 0 3px rgba(251,146,60,0.15);
}
[data-bs-theme="dark"] .brand-raport .contact-form-footer { border-color: rgba(255,255,255,0.08); }
[data-bs-theme="dark"] .brand-raport .contact-form-footer .note { color: #94a3b8; }
/* Audience tile */
[data-bs-theme="dark"] .brand-raport .audience-tile {
background-color: #1e293b;
border-color: rgba(255,255,255,0.08);
}
[data-bs-theme="dark"] .brand-raport .audience-tile .label { color: #f9fafb; }
/* Benefit */
[data-bs-theme="dark"] .brand-raport .benefit { border-color: rgba(255,255,255,0.08); }
[data-bs-theme="dark"] .brand-raport .benefit .check {
background-color: #1e293b;
color: var(--accent-color);
}
[data-bs-theme="dark"] .brand-raport .benefit .text { color: #f9fafb; }
/* Info block */
[data-bs-theme="dark"] .brand-raport .info-block h2 { color: #f9fafb; }
[data-bs-theme="dark"] .brand-raport .info-block p { color: #cbd5e1; }
[data-bs-theme="dark"] .brand-raport .info-block .top200-link { color: var(--accent-color); border-color: var(--accent-color); }
/* Akordeon reklama */
[data-bs-theme="dark"] .brand-raport .acc-tile-wrap .acc-panel-inline {
background-color: #1e293b;
border-left-color: var(--accent-color);
}
[data-bs-theme="dark"] .brand-raport .acc-tile-wrap .acc-panel-inline p,
[data-bs-theme="dark"] .brand-raport .acc-tile-wrap .acc-panel-inline ul li { color: #cbd5e1; }
[data-bs-theme="dark"] .brand-raport .acc-tile-wrap .acc-panel-inline p strong,
[data-bs-theme="dark"] .brand-raport .acc-tile-wrap .acc-panel-inline ul li strong { color: #f9fafb; }
/* Contact rep */
[data-bs-theme="dark"] .brand-raport .contact-card-rep {
background-color: #1e293b;
border-color: rgba(255,255,255,0.08);
}
[data-bs-theme="dark"] .brand-raport .contact-card-rep h3 { color: #f9fafb; }
[data-bs-theme="dark"] .brand-raport .contact-card-rep p { color: #cbd5e1; }
[data-bs-theme="dark"] .brand-raport .contact-card-rep p a { color: #f9fafb; }
[data-bs-theme="dark"] .brand-raport .contact-card-rep .role { color: var(--accent-color); }
/* Archive list */
[data-bs-theme="dark"] .brand-raport .archive-list .item .cover {
background-color: #1e293b;
border-color: rgba(255,255,255,0.08);
border-left-color: var(--accent-color);
}
[data-bs-theme="dark"] .brand-raport .archive-list .item .mid,
[data-bs-theme="dark"] .brand-raport .archive-list .item .meta .num { color: #f9fafb; }
[data-bs-theme="dark"] .brand-raport .archive-list .item .mid em,
[data-bs-theme="dark"] .brand-raport .archive-list .item .bot,
[data-bs-theme="dark"] .brand-raport .archive-list .item .meta { color: #cbd5e1; }
/* RODO accordion */
[data-bs-theme="dark"] .brand-raport .rodo-item {
background-color: #1e293b;
border-color: rgba(255,255,255,0.08);
border-left-color: var(--accent-color);
}
[data-bs-theme="dark"] .brand-raport .rodo-toggle {
color: #f9fafb;
}
[data-bs-theme="dark"] .brand-raport .rodo-toggle:hover { background-color: #0f172a; }
[data-bs-theme="dark"] .brand-raport .rodo-toggle .num { color: var(--accent-color); }
[data-bs-theme="dark"] .brand-raport .rodo-toggle .chev { color: var(--accent-color); }
[data-bs-theme="dark"] .brand-raport .rodo-panel { color: #cbd5e1; }
[data-bs-theme="dark"] .brand-raport .rodo-panel a { color: var(--accent-color); }
/* Newsletter */
[data-bs-theme="dark"] .brand-raport .newsletter-strip {
background-color: #0b1220 !important;
}
/* Footer */
[data-bs-theme="dark"] .brand-raport .im-home-footer {
background-color: #0a1220 !important;
border-top: 4px solid var(--accent-color);
}
/* Modal */
[data-bs-theme="dark"] .brand-raport .modal-order .dialog { background-color: #1e293b; }
[data-bs-theme="dark"] .brand-raport .modal-order .modal-head { border-color: rgba(255,255,255,0.08); }
[data-bs-theme="dark"] .brand-raport .modal-order .modal-head h2 { color: #f9fafb; }
[data-bs-theme="dark"] .brand-raport .modal-order .modal-head p { color: #cbd5e1; }
[data-bs-theme="dark"] .brand-raport .modal-order .modal-foot {
background-color: #0f172a;
border-top-color: rgba(255,255,255,0.08);
}
[data-bs-theme="dark"] .brand-raport .modal-order .modal-foot .note { color: #94a3b8; }
[data-bs-theme="dark"] .brand-raport .modal-order .modal-close {
background-color: #0f172a;
color: #f9fafb;
}
[data-bs-theme="dark"] .brand-raport .modal-order .modal-close:hover {
background-color: var(--accent-color);
color: #0f172a;
}
/* Floating tools */
[data-bs-theme="dark"] .brand-raport .floating-tool-btn {
background-color: #1e293b;
border-color: rgba(255,255,255,0.10);
color: #f9fafb;
}
[data-bs-theme="dark"] .brand-raport .floating-tool-btn:hover {
background-color: var(--accent-color);
border-color: var(--accent-color);
color: #0f172a;
}
/* Cookies */
[data-bs-theme="dark"] .brand-raport .cookies {
background-color: #0a1220;
border-top-color: var(--accent-color);
}
/* ============================================================
v5 — tło białe, większy hero, mniej beżu, ujednolicone podstrony
============================================================ */
/* --- 1. ZIKWIDOWANIE BEŻU ---------------------------------- */
:root {
--paper-bg: #FAFAFA; /* prawie biały — bardzo lekka separacja */
}
/* Białe tła wszędzie */
body.brand-raport { background-color: #fff !important; }
.brand-raport .about-strip,
.brand-raport .featured-issue,
.brand-raport .articles-section,
.brand-raport .teasers-section,
.brand-raport .editorial-section { background-color: #fff !important; }
/* Hero — bardzo subtelne tło zamiast beżu */
.brand-raport .hero-card {
background-color: #FAFAFA !important;
background-image: radial-gradient(circle at 1px 1px, rgba(31, 41, 55, 0.05) 1px, transparent 0) !important;
}
/* Page-header (reklama, archiwum, wydawca) — dark grafit overlay zostaje
ale TERAZ DLA WSZYSTKICH PODSTRON IDENTYCZNE ZDJĘCIE TŁA */
.brand-raport.page-reklama .page-header-section,
.brand-raport.page-archiwum .page-header-section,
.brand-raport.page-wydawca .page-header-section {
--page-bg-image: url('https://raport.informationmarket.pl/images/raporty/2023/paliwo-detal.jpg');
background: #1f2937 var(--page-bg-image) center/cover no-repeat;
}
/* Mini-stats — bez kremowego tła */
.brand-raport .about-strip .mini-stat {
background-color: #fff !important;
border: 1px solid var(--border-color) !important;
border-top: 3px solid var(--accent-color) !important;
}
/* Archive tiles — białe tło, bez papierowego */
.brand-raport .archive-list .item .cover {
background-color: #fff !important;
}
/* Karty — bez kremowego */
.brand-raport .about-panel,
.brand-raport .about-card,
.brand-raport .editor-card,
.brand-raport .contact-card,
.brand-raport .data-box,
.brand-raport .contact-form-wrap,
.brand-raport .contact-card-rep,
.brand-raport .audience-tile,
.brand-raport .rodo-item {
background-color: #fff !important;
}
/* Teaser card — białe */
.brand-raport .teaser-card { background-color: #fff !important; }
/* Akordeon reklama panel inline — bardzo lekki kremowy */
.brand-raport .acc-tile-wrap .acc-panel-inline {
background-color: #FAFAFA !important;
}
/* Benefit check — białe */
.brand-raport .benefit .check { background-color: #fff !important; border: 1px solid var(--border-color); }
/* Newsletter strip — czysty grafit primary */
.brand-raport .newsletter-strip {
background-color: #1f2937 !important;
background-image: none !important;
}
/* ============================================================
2. HERO — wyższy, mniej tekstu, większa okładka
============================================================ */
.brand-raport .hero-home { padding: 30px 0 60px; }
.brand-raport .hero-card {
padding: 90px 70px;
min-height: 620px;
display: flex;
align-items: center;
}
/* Okładka — zdecydowanie większa */
.brand-raport .hero-cover {
max-width: 100%;
width: auto;
max-height: 540px;
transform: perspective(900px) rotateY(-6deg) rotateX(2deg);
box-shadow:
0 35px 70px -10px rgba(31, 41, 55, 0.35),
0 18px 30px -15px rgba(31, 41, 55, 0.30);
}
.brand-raport .hero-cover:hover {
transform: perspective(900px) rotateY(-3deg) rotateX(0deg) translateY(-6px);
}
/* Numer 19 — większy, jeszcze bardziej wyróżniony jako akcent */
.brand-raport .hero-issue-number {
font-size: 26rem !important;
right: -60px;
top: -40px;
-webkit-text-stroke: 2px rgba(194, 65, 12, 0.16) !important;
}
@media (max-width: 991px) {
.brand-raport .hero-card { padding: 60px 40px; min-height: auto; }
.brand-raport .hero-cover { max-height: 380px; margin-top: 40px; }
.brand-raport .hero-issue-number { font-size: 16rem !important; }
}
@media (max-width: 768px) {
.brand-raport .hero-card { padding: 50px 24px; }
.brand-raport .hero-cover { max-height: 320px; }
.brand-raport .hero-issue-number { font-size: 12rem !important; right: -20px; }
}
/* ============================================================
3. NEWSLETTER STRIP — odstęp większy
============================================================ */
.brand-raport .newsletter-strip { padding: 90px 0; }
/* ============================================================
4. DARK MODE — białe → ciemne ----------------------------- */
[data-bs-theme="dark"] body.brand-raport { background-color: #0f172a !important; }
[data-bs-theme="dark"] .brand-raport .about-strip,
[data-bs-theme="dark"] .brand-raport .featured-issue,
[data-bs-theme="dark"] .brand-raport .editorial-section { background-color: #0f172a !important; }
[data-bs-theme="dark"] .brand-raport .articles-section,
[data-bs-theme="dark"] .brand-raport .teasers-section { background-color: #1e293b !important; }
[data-bs-theme="dark"] .brand-raport .hero-card {
background-color: #1e293b !important;
background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.05) 1px, transparent 0) !important;
}
[data-bs-theme="dark"] .brand-raport .about-strip .mini-stat {
background-color: #1e293b !important;
border-color: rgba(255,255,255,0.08) !important;
}
[data-bs-theme="dark"] .brand-raport .archive-list .item .cover { background-color: #1e293b !important; }
[data-bs-theme="dark"] .brand-raport .about-panel,
[data-bs-theme="dark"] .brand-raport .contact-card,
[data-bs-theme="dark"] .brand-raport .data-box,
[data-bs-theme="dark"] .brand-raport .contact-form-wrap,
[data-bs-theme="dark"] .brand-raport .contact-card-rep,
[data-bs-theme="dark"] .brand-raport .audience-tile,
[data-bs-theme="dark"] .brand-raport .rodo-item,
[data-bs-theme="dark"] .brand-raport .teaser-card { background-color: #1e293b !important; }
[data-bs-theme="dark"] .brand-raport .acc-tile-wrap .acc-panel-inline { background-color: #1e293b !important; }
[data-bs-theme="dark"] .brand-raport .benefit .check { background-color: #1e293b !important; border-color: rgba(255,255,255,0.1); }
/* ============================================================
5. FEATURED-ISSUE — bez okładki, tekst full width
(gdy dodamy klasę .full-width)
============================================================ */
.brand-raport .featured-issue.full-width .newspaper-columns {
column-count: 3;
column-gap: 50px;
}
@media (max-width: 991px) {
.brand-raport .featured-issue.full-width .newspaper-columns { column-count: 2; }
}
@media (max-width: 600px) {
.brand-raport .featured-issue.full-width .newspaper-columns { column-count: 1; }
}
/* ============================================================
6. ARCHIWUM — okładki z tytułem "Raport YYYY/YYYY"
(już istnieje, drobne tweaki)
============================================================ */
.brand-raport .archive-list .item .cover {
padding: 32px 22px;
text-align: center;
justify-content: center;
gap: 14px;
}
.brand-raport .archive-list .item .raport-mark {
font-family: 'Montserrat', sans-serif;
font-size: 0.65rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 3px;
color: var(--accent-color);
}
.brand-raport .archive-list .item .raport-title {
font-family: 'Montserrat', sans-serif;
font-weight: 800;
font-size: 1.4rem;
line-height: 1.1;
color: var(--primary-color);
letter-spacing: -0.02em;
}
.brand-raport .archive-list .item .raport-year {
font-family: 'Montserrat', sans-serif;
font-size: 0.75rem;
font-weight: 600;
color: var(--text-color);
letter-spacing: 0.5px;
}
[data-bs-theme="dark"] .brand-raport .archive-list .item .raport-title { color: #f9fafb; }
[data-bs-theme="dark"] .brand-raport .archive-list .item .raport-year { color: #cbd5e1; }
/* ============================================================
7. WYDAWCA RODO — jeden akordeon na całość
============================================================ */
.brand-raport .rodo-single {
background-color: #fff;
border: 1px solid var(--border-color);
border-left: 3px solid var(--accent-color);
border-radius: 4px;
margin: 0 auto 24px;
max-width: 900px;
overflow: hidden;
}
.brand-raport .rodo-single .rodo-single-toggle {
width: 100%;
display: grid;
grid-template-columns: 56px 1fr 32px;
gap: 16px;
align-items: center;
padding: 22px 28px;
background: transparent;
border: 0;
text-align: left;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 1.05rem;
color: var(--primary-color);
cursor: pointer;
transition: background-color 0.2s ease;
}
.brand-raport .rodo-single .rodo-single-toggle:hover { background-color: #FAFAFA; }
.brand-raport .rodo-single .rodo-single-toggle .ico {
width: 40px;
height: 40px;
display: grid;
place-items: center;
background-color: #FAFAFA;
color: var(--accent-color);
border-radius: 4px;
font-size: 1.3rem;
}
.brand-raport .rodo-single .rodo-single-toggle .chev {
color: var(--accent-color);
font-size: 1.2rem;
transition: transform 0.3s ease;
}
.brand-raport .rodo-single .rodo-single-toggle[aria-expanded="true"] .chev {
transform: rotate(180deg);
}
.brand-raport .rodo-single .rodo-single-panel {
display: none;
padding: 0 28px 28px 28px;
font-size: 0.92rem;
line-height: 1.7;
color: var(--text-color);
}
.brand-raport .rodo-single .rodo-single-panel.is-open {
display: block;
animation: rodoFade 0.35s ease both;
}
.brand-raport .rodo-single .rodo-single-panel ol {
padding-left: 22px;
margin: 0;
counter-reset: rodo;
list-style: none;
}
.brand-raport .rodo-single .rodo-single-panel ol li {
counter-increment: rodo;
padding: 12px 0;
border-bottom: 1px solid var(--border-color);
position: relative;
padding-left: 36px;
}
.brand-raport .rodo-single .rodo-single-panel ol li::before {
content: counter(rodo, decimal-leading-zero);
position: absolute;
left: 0;
top: 12px;
font-family: 'Montserrat', sans-serif;
font-weight: 800;
font-size: 0.85rem;
color: var(--accent-color);
letter-spacing: 0.5px;
}
.brand-raport .rodo-single .rodo-single-panel ol li:last-child { border-bottom: 0; }
.brand-raport .rodo-single .rodo-single-panel a {
color: var(--accent-color);
font-weight: 700;
text-decoration: underline;
}
[data-bs-theme="dark"] .brand-raport .rodo-single {
background-color: #1e293b !important;
border-color: rgba(255,255,255,0.08) !important;
border-left-color: var(--accent-color) !important;
}
[data-bs-theme="dark"] .brand-raport .rodo-single .rodo-single-toggle { color: #f9fafb; }
[data-bs-theme="dark"] .brand-raport .rodo-single .rodo-single-toggle:hover { background-color: #0f172a; }
[data-bs-theme="dark"] .brand-raport .rodo-single .rodo-single-toggle .ico {
background-color: #0f172a;
color: var(--accent-color);
}
[data-bs-theme="dark"] .brand-raport .rodo-single .rodo-single-panel { color: #cbd5e1; }
[data-bs-theme="dark"] .brand-raport .rodo-single .rodo-single-panel ol li { border-color: rgba(255,255,255,0.08); }
[data-bs-theme="dark"] .brand-raport .rodo-single .rodo-single-panel a { color: var(--accent-color); }
@media (max-width: 600px) {
.brand-raport .rodo-single .rodo-single-toggle {
grid-template-columns: 32px 1fr 24px;
padding: 16px 18px;
font-size: 0.95rem;
}
.brand-raport .rodo-single .rodo-single-toggle .ico { width: 32px; height: 32px; font-size: 1.05rem; }
.brand-raport .rodo-single .rodo-single-panel { padding: 0 18px 22px; }
}
/* ============================================================
8. HERO CTA — jeden duży button (mniej tekstu = mniej CTA)
============================================================ */
.brand-raport .hero-card .hero-eyebrow {
font-size: 0.75rem;
letter-spacing: 4px;
}
.brand-raport .hero-card .hero-title { font-size: 3.4rem; margin-bottom: 28px; }
@media (max-width: 991px) {
.brand-raport .hero-card .hero-title { font-size: 2.4rem; }
}
@media (max-width: 600px) {
.brand-raport .hero-card .hero-title { font-size: 1.85rem; }
}
/* ============================================================
PORT DO JOOMLA — kompatybilność z modułami mod_menu
i przełącznikiem języka (moduł 766) w nawigacji imsa-multi.
Prototyp HTML miał menu wpisane na sztywno; w Joomla renderuje
je Modules Anywhere, więc dokładamy reguły dla znaczników,
których w prototypie nie było.
============================================================ */
/* --- Menu z mod_menu: wyrównanie i odstępy w pasku marki -------- */
.brand-raport .im-navbar .navbar-nav { gap: .25rem; margin: 0; }
.brand-raport .im-navbar .navbar-nav > .nav-item { margin: 0; }
/* Aktywna pozycja menu — Joomla dokłada .current / .active na */
.brand-raport .im-navbar .nav-item.current > .nav-link,
.brand-raport .im-navbar .nav-item.active > .nav-link {
color: var(--accent-color) !important;
}
.brand-raport .im-navbar .nav-item.current > .nav-link::after,
.brand-raport .im-navbar .nav-item.active > .nav-link::after {
transform: scaleX(1);
}
/* Dropdowny (jeśli w menu pojawi się podmenu) */
.brand-raport .im-navbar .dropdown-menu {
border: 1px solid var(--border-color);
border-radius: 4px;
box-shadow: 0 12px 30px rgba(31, 41, 55, .10);
padding: .35rem;
}
.brand-raport .im-navbar .dropdown-item {
border-radius: 3px;
font-size: .92rem;
font-weight: 600;
color: var(--text-color);
}
.brand-raport .im-navbar .dropdown-item:hover,
.brand-raport .im-navbar .dropdown-item:focus {
background-color: var(--paper-bg);
color: var(--accent-color);
}
[data-bs-theme="dark"] .brand-raport .im-navbar .dropdown-menu {
background-color: #1e293b;
border-color: rgba(255, 255, 255, .10);
}
[data-bs-theme="dark"] .brand-raport .im-navbar .dropdown-item { color: #cbd5e1; }
[data-bs-theme="dark"] .brand-raport .im-navbar .dropdown-item:hover,
[data-bs-theme="dark"] .brand-raport .im-navbar .dropdown-item:focus {
background-color: #0f172a;
color: var(--accent-color);
}
/* --- Przełącznik języka (moduł 766) — plakietki PL/EN ----------- */
.brand-raport .im-lang ul,
.brand-raport .im-lang .nav {
display: flex;
align-items: center;
gap: .4rem;
margin: 0;
padding: 0;
list-style: none;
}
.brand-raport .im-lang li { margin: 0; }
.brand-raport .im-lang a,
.brand-raport .im-lang .im-lang-flag {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 24px;
padding: 0;
border: 1px solid var(--border-color);
border-radius: 3px;
overflow: hidden;
background: transparent;
opacity: .55;
transition: opacity .2s ease, border-color .2s ease;
}
.brand-raport .im-lang a img,
.brand-raport .im-lang .im-lang-flag img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.brand-raport .im-lang a:hover { opacity: .9; }
.brand-raport .im-lang a.active,
.brand-raport .im-lang li.lang-active a,
.brand-raport .im-lang .im-lang-flag.is-active {
opacity: 1;
border-color: var(--accent-color);
}
[data-bs-theme="dark"] .brand-raport .im-lang a,
[data-bs-theme="dark"] .brand-raport .im-lang .im-lang-flag {
border-color: rgba(255, 255, 255, .18);
}
/* --- Breadcrumbs (podstrony) ----------------------------------- */
.brand-raport .breadcrumb {
font-size: .82rem;
margin: 0;
padding: 0;
background: transparent;
}
.brand-raport .breadcrumb a { color: var(--text-color); text-decoration: none; }
.brand-raport .breadcrumb a:hover { color: var(--accent-color); }
.brand-raport .breadcrumb-item.active { color: var(--accent-color); font-weight: 600; }
/* --- Treść artykułu z edytora (com_content fulltext) -----------
Redakcja wkleja zwykły HTML — nadajemy mu rytm zgodny z projektem.
Komponenty projektowe (.sector-card, .archive-list, .rodo-single…)
wklejane w treści działają bez zmian, bo mają własne klasy. */
.brand-raport .article-body { font-size: 1.02rem; line-height: 1.7; }
.brand-raport .article-body > h2 {
font-family: 'Montserrat', sans-serif;
font-weight: 800;
font-size: 1.9rem;
letter-spacing: -.02em;
margin: 2.4rem 0 1rem;
}
.brand-raport .article-body > h3 {
font-family: 'Montserrat', sans-serif;
font-weight: 800;
font-size: 1.35rem;
letter-spacing: -.015em;
margin: 2rem 0 .75rem;
}
.brand-raport .article-body > p { margin-bottom: 1.15rem; }
.brand-raport .article-body a { color: var(--accent-color); font-weight: 600; }
.brand-raport .article-body ul,
.brand-raport .article-body ol { margin-bottom: 1.15rem; padding-left: 1.35rem; }
.brand-raport .article-body li { margin-bottom: .4rem; }
.brand-raport .article-body img { max-width: 100%; height: auto; border-radius: 4px; }
.brand-raport .article-body table {
width: 100%;
margin-bottom: 1.5rem;
border-collapse: collapse;
font-size: .95rem;
}
.brand-raport .article-body table th {
background-color: var(--primary-color);
color: #fff;
font-family: 'Montserrat', sans-serif;
font-size: .78rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 1px;
padding: 12px 14px;
text-align: left;
}
.brand-raport .article-body table td {
padding: 11px 14px;
border-bottom: 1px solid var(--border-color);
}
[data-bs-theme="dark"] .brand-raport .article-body table td { border-color: rgba(255, 255, 255, .08); }
/* --- Pływające narzędzia z nav.php imsa-multi -------------------
Szablon renderuje je jako .btn.rounded-circle w kontenerze
.bd-mode-toggle — projekt stylował .floating-tool-btn.
Dociągamy wygląd projektu do znaczników szablonu. */
.brand-raport .bd-mode-toggle .btn {
width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
background-color: #fff;
border: 1px solid var(--border-color);
color: var(--primary-color);
box-shadow: 0 4px 14px rgba(31, 41, 55, .10);
transition: all .2s ease;
}
.brand-raport .bd-mode-toggle .btn:hover {
background-color: var(--accent-color);
border-color: var(--accent-color);
color: #fff;
transform: translateY(-2px);
}
.brand-raport .bd-mode-toggle #backToTop {
opacity: 0;
visibility: hidden;
transform: translateY(10px);
}
.brand-raport .bd-mode-toggle #backToTop.is-visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.brand-raport .im-theme-toggle .theme-icon-light { display: none; }
[data-bs-theme="dark"] .brand-raport .im-theme-toggle .theme-icon-dark { display: none; }
[data-bs-theme="dark"] .brand-raport .im-theme-toggle .theme-icon-light { display: inline-block; }
[data-bs-theme="dark"] .brand-raport .bd-mode-toggle .btn {
background-color: #1e293b;
border-color: rgba(255, 255, 255, .10);
color: #f9fafb;
}
[data-bs-theme="dark"] .brand-raport .bd-mode-toggle .btn:hover {
background-color: var(--accent-color);
border-color: var(--accent-color);
color: #0f172a;
}
/* --- Stopka: przyciski udostępniania z footer.php imsa-multi ---- */
.brand-raport .im-share-btn {
color: rgba(255, 255, 255, .70);
background: rgba(255, 255, 255, .06);
border: 1px solid rgba(255, 255, 255, .12);
}
.brand-raport .im-share-btn:hover,
.brand-raport .im-share-btn:focus-visible {
color: #fff;
background: var(--accent-color);
border-color: var(--accent-color);
}
.brand-raport .im-footer-label { color: rgba(255, 255, 255, .55) !important; }
/* --- Komunikaty systemowe Joomla ------------------------------- */
.brand-raport .system-message-container { margin-top: 1rem; }
/* ============================================================
AKTUALIZACJA UKŁADU STRONY GŁÓWNEJ (wersja z lipca 2026)
Zmiany wynikające z nowszego projektu index.html:
· hero stracił nadtytuł, numer edycji w tle i pasek metadanych
— zostały tylko H1, lead i dwa przyciski,
· „Temat numeru” przeniósł się do sekcji „Co w numerze”,
· nadtytuł sekcji sektorów jest bez numeru („Sektory paliw”).
============================================================ */
/* --- 1. HERO bez nadtytułu i metadanych -------------------------
Karta była liczona pod cztery elementy tekstowe (eyebrow, tytuł,
lead, meta). Po ich usunięciu kolumna z tekstem jest krótsza od
okładki, więc zdejmujemy sztywną wysokość i pozwalamy karcie
dopasować się do okładki — inaczej u dołu rósł martwy pas. */
.brand-raport .hero-card {
min-height: 0;
padding: 72px 70px;
}
.brand-raport .hero-card .hero-title { margin-top: 0; }
/* Okładka wyznacza wysokość karty — nieco większa niż poprzednio,
bo ma teraz do dyspozycji całą prawą kolumnę. */
.brand-raport .hero-cover { max-height: 560px; }
@media (max-width: 991px) {
.brand-raport .hero-card { padding: 56px 40px; }
.brand-raport .hero-cover { max-height: 400px; }
}
@media (max-width: 768px) {
.brand-raport .hero-card { padding: 44px 24px; }
.brand-raport .hero-cover { max-height: 320px; }
}
/* --- 2. DWA PRZYCISKI W HERO -----------------------------------
Projekt daje obu klasę .btn-hero-primary. Zostawiamy jednakową
formę, ale drugi (kotwica „Zobacz więcej”) dostaje wypełnienie
przezroczyste, żeby nie konkurował o uwagę z zamówieniem —
pozostaje ten sam kształt, waga i wysokość.
Chcesz dwa identyczne przyciski? Usuń ten blok. */
.brand-raport .hero-card .btn-hero-primary + .btn-hero-primary {
background-color: transparent;
color: var(--primary-color);
border: 2px solid var(--primary-color);
}
.brand-raport .hero-card .btn-hero-primary + .btn-hero-primary:hover {
background-color: var(--primary-color);
color: #fff;
border-color: var(--primary-color);
box-shadow: none;
}
[data-bs-theme="dark"] .brand-raport .hero-card .btn-hero-primary + .btn-hero-primary {
color: #f9fafb;
border-color: rgba(255, 255, 255, .40);
}
[data-bs-theme="dark"] .brand-raport .hero-card .btn-hero-primary + .btn-hero-primary:hover {
background-color: #f9fafb;
color: #0f172a;
border-color: #f9fafb;
}
/* Kotwica „Zobacz więcej” — margines pod paskiem nawigacji, żeby
nagłówek sekcji nie chował się pod przyklejonym headerem. */
.brand-raport #co-w-numerze { scroll-margin-top: 90px; }
.brand-raport #sectors { scroll-margin-top: 90px; }
/* --- 3. TEMAT NUMERU wewnątrz sekcji „Co w numerze” -------------
Blok gazetowy stał wcześniej w .featured-issue.full-width, która
nadawała mu trzy kolumny. Po przeniesieniu do .teasers-section
odtwarzamy ten sam rytm i oddzielamy go od kart zajawek. */
.brand-raport .teasers-section .newspaper-columns {
column-count: 3;
column-gap: 50px;
}
.brand-raport .teasers-section .topic-badge { display: inline-block; }
.brand-raport .teasers-section .main-article-title { max-width: 28ch; }
@media (max-width: 991px) {
.brand-raport .teasers-section .newspaper-columns { column-count: 2; column-gap: 36px; }
.brand-raport .teasers-section .main-article-title { max-width: none; }
}
@media (max-width: 600px) {
.brand-raport .teasers-section .newspaper-columns { column-count: 1; }
}
/* --- 4. NADTYTUŁ SEKCJI BEZ NUMERU -----------------------------
„Sektory paliw” nie ma zagnieżdżonego , więc
sama kreska musiała dostać własny odstęp — bez tego napis kleił
się do niej. */
.brand-raport .section-num:not(:has(.num))::before { margin-right: 4px; }
/* Zapasowa reguła dla przeglądarek bez :has() — nadtytuł ma wtedy
gap z flexa, więc różnica jest kosmetyczna i nic się nie psuje. */
/* --- 5. ZAJAWKI BEZ WIERSZA METADANYCH -------------------------
Karty straciły .teaser-meta („Sektor 04 · LPG”), więc tytuł
startuje od góry — wyrównujemy odstęp wewnętrzny. */
.brand-raport .teaser-card .teaser-body > h3:first-child { margin-top: 0; }