/* ============================================
ACID ALPINISM - GŁÓWNY STYLESHEET
Przepisany z Tailwind na czysty CSS
============================================ */
/* Fonty ładowane przez w header.php (lepsza wydajność, brak CLS) */
/* ---------- ZMIENNE / KOLORY ---------- */
:root {
--color-acid-yellow: #E1FF00;
--color-rescue-orange: #FF4500;
--color-smoky-black: #090A0C;
--color-off-white: #F4F4F5;
--color-white: #ffffff;
--font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
--font-display: "Space Grotesk", "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
--max-width: 80rem; /* 1280px - max-w-7xl */
}
/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 60px; }
body {
background-color: var(--color-off-white);
color: var(--color-smoky-black);
font-family: var(--font-sans);
font-weight: 400;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
input { font: inherit; }
ul { list-style: none; }
/* WordPress admin bar fix */
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
/* Selekcja */
::selection { background: var(--color-acid-yellow); color: var(--color-smoky-black); }
/* ---------- TYPOGRAFIA UTILITY ---------- */
.text-gigant {
font-family: var(--font-display);
font-weight: 700;
text-transform: uppercase;
letter-spacing: -0.05em;
line-height: 0.85;
}
.text-mikro {
font-family: var(--font-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.2em;
font-feature-settings: "cv14" 1;
}
.font-mono { font-family: var(--font-mono); }
.font-display { font-family: var(--font-display); }
/* ---------- LAYOUT ---------- */
.container-wide {
max-width: var(--max-width);
margin-left: auto;
margin-right: auto;
padding-left: 1.5rem;
padding-right: 1.5rem;
position: relative;
z-index: 10;
}
@media (min-width: 768px) {
.container-wide { padding-left: 3rem; padding-right: 3rem; }
}
/* ============================================
HEADER
============================================ */
.site-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 48px;
background: var(--color-white);
border-bottom: 1px solid var(--color-smoky-black);
z-index: 50;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 1.5rem;
}
.site-header__logo {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.2em;
}
.site-header__nav { display: none; align-items: center; gap: 1.5rem; }
@media (min-width: 768px) { .site-header__nav { display: flex; } }
.site-header__nav-link {
font-family: var(--font-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.2em;
transition: color 0.2s;
}
.site-header__nav-link:hover { color: var(--color-rescue-orange); }
.site-header__cta {
margin-left: 1rem;
background: var(--color-smoky-black);
color: var(--color-acid-yellow);
padding: 0.25rem 1rem;
font-family: var(--font-mono);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
transition: all 0.2s;
}
.site-header__cta:hover { background: var(--color-rescue-orange); color: var(--color-white); }
.site-header__menu-btn { display: block; }
@media (min-width: 768px) { .site-header__menu-btn { display: none; } }
/* Mobile menu */
.mobile-menu {
position: fixed;
top: 48px;
left: 0;
width: 100%;
background: var(--color-white);
border-bottom: 1px solid var(--color-smoky-black);
padding: 1rem 1.5rem;
z-index: 49;
display: none;
}
.mobile-menu.is-open { display: block; }
.mobile-menu a {
display: block;
padding: 0.75rem 0;
font-family: var(--font-mono);
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.2em;
border-bottom: 1px solid rgba(0,0,0,0.1);
}
/* ============================================
HERO
============================================ */
.hero {
position: relative;
height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background: var(--color-smoky-black);
cursor: crosshair;
}
.hero__bg {
position: absolute;
inset: 0;
overflow: hidden;
background: var(--color-smoky-black);
/* Stałe wymiary zapobiegają CLS podczas ładowania obrazka */
width: 100%;
height: 100%;
contain: layout style paint;
}
/* Bazowa warstwa - rozmyte, ciemne góry */
.hero__bg-base {
position: absolute;
inset: 0;
transform: scale(1.1);
animation: hero-zoom 30s linear infinite;
width: 100%;
height: 100%;
}
.hero__bg-base img {
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(100%) brightness(0.3) blur(2px);
/* Zapobiega CLS - obrazek od razu zajmuje pełny container */
display: block;
}
@keyframes hero-zoom {
0%, 100% { transform: scale(1.1); }
50% { transform: scale(1.15); }
}
/* Particles */
.hero__particles {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
opacity: 0.2;
z-index: 10;
}
.hero__particle {
position: absolute;
width: 2px;
height: 2px;
background: var(--color-acid-yellow);
border-radius: 50%;
animation: particle-fall 25s linear infinite;
}
@keyframes particle-fall {
0% { transform: translateY(0); opacity: 0; }
10% { opacity: 1; }
90% { opacity: 1; }
100% { transform: translateY(100vh); opacity: 0; }
}
/* Scanning beam */
.hero__scanbeam {
position: absolute;
left: 0;
width: 100%;
height: 1px;
background: rgba(225, 255, 0, 0.1);
z-index: 10;
pointer-events: none;
box-shadow: 0 0 20px rgba(225, 255, 0, 0.2);
animation: scanbeam-move 12s linear infinite;
}
@keyframes scanbeam-move {
0% { top: -5%; }
100% { top: 105%; }
}
/* Mgła atmosferyczna */
.hero__mist {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 10;
opacity: 0.3;
background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.05), transparent 70%);
animation: mist-drift 15s ease-in-out infinite;
}
@keyframes mist-drift {
0%, 100% { transform: scale(1) translate(-20px, -10px); opacity: 0.3; }
50% { transform: scale(1.2) translate(20px, 10px); opacity: 0.5; }
}
/* Corner brackets */
.hero__brackets {
position: absolute;
top: 2rem;
left: 2rem;
right: 2rem;
bottom: 2rem;
pointer-events: none;
z-index: 30;
opacity: 0.4;
}
.hero__bracket {
position: absolute;
width: 32px;
height: 32px;
animation: bracket-pulse 2s ease-in-out infinite;
}
.hero__bracket--tl { top: 0; left: 0; border-top: 2px solid var(--color-acid-yellow); border-left: 2px solid var(--color-acid-yellow); }
.hero__bracket--tr { top: 0; right: 0; border-top: 2px solid var(--color-acid-yellow); border-right: 2px solid var(--color-acid-yellow); animation-delay: 0.5s; }
.hero__bracket--bl { bottom: 0; left: 0; border-bottom: 2px solid var(--color-acid-yellow); border-left: 2px solid var(--color-acid-yellow); animation-delay: 1s; }
.hero__bracket--br { bottom: 0; right: 0; border-bottom: 2px solid var(--color-acid-yellow); border-right: 2px solid var(--color-acid-yellow); animation-delay: 1.5s; }
@keyframes bracket-pulse {
0%, 100% { opacity: 0.4; }
50% { opacity: 1; }
}
/* Glitch overlay */
.hero__glitch {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 40;
background: rgba(225, 255, 0, 0.05);
opacity: 0;
animation: glitch-flash 4.2s linear infinite;
}
@keyframes glitch-flash {
0%, 95.2%, 100% { opacity: 0; transform: translateX(0); }
95.5% { opacity: 0.1; transform: translateX(2px); }
95.8% { opacity: 0; transform: translateX(-2px); }
96.1% { opacity: 0.05; transform: translateX(1px); }
96.4% { opacity: 0; transform: translateX(0); }
}
/* X-Ray scanner */
.hero__scanner-layer {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 20;
clip-path: circle(0px at 50% 50%);
transition: clip-path 0.05s linear;
}
.hero__scanner-bg {
position: absolute;
inset: 0;
transform: scale(1.1);
}
.hero__scanner-bg img {
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(100%) brightness(1.25) contrast(1.5);
}
.hero__scanner-frost {
position: absolute;
inset: 0;
backdrop-filter: blur(2px);
background: rgba(225, 255, 0, 0.05);
mix-blend-mode: overlay;
}
.hero__scanner-ring {
position: absolute;
width: 300px;
height: 300px;
border: 1px solid rgba(225, 255, 0, 0.5);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
z-index: 21;
transition: left 0.1s ease-out, top 0.1s ease-out;
}
.hero__scanner-ring::before {
content: "";
position: absolute;
inset: 0;
border: 20px solid rgba(225, 255, 0, 0.05);
border-radius: 50%;
animation: pulse-soft 2s ease-in-out infinite;
}
@keyframes pulse-soft {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.hero__scanner-label {
position: absolute;
top: -1rem;
left: 50%;
transform: translateX(-50%);
font-size: 8px;
font-family: var(--font-mono);
color: var(--color-acid-yellow);
white-space: nowrap;
background: rgba(9, 10, 12, 0.8);
padding: 0.125rem 0.5rem;
border: 1px solid rgba(225, 255, 0, 0.2);
}
.hero__scanner-cross-h, .hero__scanner-cross-v {
position: absolute;
background: rgba(225, 255, 0, 0.5);
}
.hero__scanner-cross-h { width: 16px; height: 1px; }
.hero__scanner-cross-v { width: 1px; height: 16px; }
/* HUD scanline grid */
.hero__scanline {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 30;
background:
linear-gradient(rgba(18,16,16,0) 50%, rgba(0,0,0,0.1) 50%),
linear-gradient(90deg, rgba(255,0,0,0.03), rgba(0,255,0,0.01), rgba(0,0,255,0.03));
background-size: 100% 4px, 3px 100%;
}
.hero__grid-dots {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 30;
opacity: 0.1;
background-image: radial-gradient(#E1FF00 0.5px, transparent 0.5px);
background-size: 64px 64px;
}
.hero__vignette {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 40;
box-shadow: inset 0 0 200px rgba(0,0,0,0.9);
}
/* Hero content */
.hero__content {
position: relative;
z-index: 10;
text-align: center;
padding: 0 1rem;
pointer-events: none;
}
.hero__content--xray {
z-index: 20;
}
.hero__sysinit {
font-family: var(--font-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.2em;
margin-bottom: 1rem;
color: var(--color-acid-yellow);
animation: fade-up 0.6s ease-out backwards;
}
.hero__content--xray .hero__sysinit { color: var(--color-smoky-black); }
.hero__title {
font-family: var(--font-display);
font-weight: 700;
text-transform: uppercase;
letter-spacing: -0.05em;
line-height: 0.85;
font-size: clamp(48px, 9vw, 120px);
color: var(--color-white);
animation: fade-up 0.6s 0.2s ease-out backwards;
}
.hero__content--xray .hero__title { color: var(--color-acid-yellow); }
@media (min-width: 768px) { .hero__title { font-size: clamp(64px, 7.5vw, 130px); } }
.hero__subtitle {
font-family: var(--font-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.4em;
margin-top: 1rem;
color: rgba(255,255,255,0.7);
animation: fade-up 0.6s 0.4s ease-out backwards;
}
.hero__content--xray .hero__subtitle { color: var(--color-smoky-black); }
.hero__cta {
margin-top: 3rem;
padding: 1rem 2rem;
font-family: var(--font-mono);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.2em;
transition: background-color 0.2s, color 0.2s;
pointer-events: auto;
background: var(--color-rescue-orange);
color: var(--color-smoky-black);
animation: fade-up 0.6s 0.6s ease-out backwards;
display: inline-block;
}
.hero__cta:hover { background: var(--color-acid-yellow); }
.hero__content--xray .hero__cta {
background: var(--color-acid-yellow);
color: var(--color-smoky-black);
border: 2px solid var(--color-smoky-black);
}
@keyframes fade-up {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
/* GPS HUD */
.hero__gps {
position: absolute;
bottom: 2rem;
right: 2rem;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.25rem;
z-index: 30;
}
.hero__gps-loc { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.2em; color: var(--color-acid-yellow); opacity: 0.8; }
.hero__gps-coord { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.2em; color: var(--color-white); font-weight: 700; }
.hero__gps-line { width: 96px; height: 1px; background: rgba(255,255,255,0.2); margin-top: 0.5rem; }
.hero__gps-meta { font-size: 8px; font-family: var(--font-mono); color: rgba(255,255,255,0.3); }
/* ============================================
BLOG SECTIONS
============================================ */
.blog-section {
padding: 6rem 1.5rem;
border-bottom: 1px solid var(--color-smoky-black);
position: relative;
overflow: hidden;
}
@media (min-width: 768px) { .blog-section { padding: 6rem 3rem; } }
.blog-section--mental { background: var(--color-acid-yellow); color: var(--color-smoky-black); }
.blog-section--sprzet { background: var(--color-off-white); color: var(--color-smoky-black); }
.blog-section--raporty { background: var(--color-rescue-orange); color: var(--color-smoky-black); }
.blog-section--szlaki { background: var(--color-off-white); color: var(--color-smoky-black); }
.blog-section__title {
font-family: var(--font-display);
font-weight: 700;
text-transform: uppercase;
letter-spacing: -0.05em;
line-height: 0.85;
font-size: clamp(3rem, 12vw, 8rem);
margin-bottom: 1rem;
word-break: break-word;
overflow-wrap: break-word;
hyphens: auto;
max-width: 100%;
}
.blog-section__desc {
font-family: var(--font-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.2em;
margin-bottom: 3rem;
word-break: break-word;
overflow-wrap: break-word;
max-width: 100%;
line-height: 1.6;
}
@media (max-width: 480px) {
.blog-section__desc { letter-spacing: 0.1em; font-size: 9px; }
}
/* Standard layout - grid 4 kolumny: 1 image + 3 posty */
.blog-grid-standard {
display: grid;
grid-template-columns: 1fr;
border: 1px solid var(--color-smoky-black);
}
@media (min-width: 768px) {
.blog-grid-standard { grid-template-columns: repeat(4, 1fr); }
}
.blog-grid-standard__image {
border-right: 1px solid var(--color-smoky-black);
min-height: 300px;
background-size: cover;
background-position: center;
filter: grayscale(100%) contrast(1.25);
}
.blog-grid-standard__post {
border-right: 1px solid var(--color-smoky-black);
padding: 2rem;
display: flex;
flex-direction: column;
justify-content: space-between;
transition: all 0.3s;
cursor: pointer;
}
.blog-grid-standard__post:last-child { border-right: 0; }
.blog-grid-standard__post-date { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.2em; opacity: 0.7; margin-bottom: 1rem; }
.blog-grid-standard__post-title { font-size: 1.25rem; font-weight: 700; text-transform: uppercase; line-height: 1.2; }
.blog-grid-standard__post-readmore { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.2em; margin-top: 2rem; }
/* Hover dla MENTAL: black bg, yellow text */
.blog-section--mental .blog-grid-standard__post:hover { background: var(--color-smoky-black); color: var(--color-acid-yellow); }
.blog-section--sprzet .blog-grid-standard__post:hover { background: var(--color-rescue-orange); color: var(--color-white); }
.blog-section--raporty .blog-grid-standard__post:hover { background: var(--color-smoky-black); color: var(--color-rescue-orange); }
.blog-section--szlaki .blog-grid-standard__post:hover { background: var(--color-smoky-black); color: var(--color-acid-yellow); }
.blog-section__cta-wrap { margin-top: 2rem; display: flex; justify-content: flex-end; }
.blog-section__cta {
padding: 1rem 2rem;
font-family: var(--font-mono);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.2em;
transition: background-color 0.2s, color 0.2s;
border: 1px solid transparent;
}
.blog-section--mental .blog-section__cta { background: var(--color-smoky-black); color: var(--color-acid-yellow); }
.blog-section--mental .blog-section__cta:hover { background: var(--color-white); color: var(--color-smoky-black); }
.blog-section--sprzet .blog-section__cta { background: var(--color-rescue-orange); color: var(--color-white); }
.blog-section--sprzet .blog-section__cta:hover { background: var(--color-white); color: var(--color-smoky-black); }
.blog-section--raporty .blog-section__cta { background: var(--color-smoky-black); color: var(--color-rescue-orange); }
.blog-section--raporty .blog-section__cta:hover { background: var(--color-white); color: var(--color-smoky-black); }
/* Featured layout - duże zdjęcia 3x */
.blog-section--featured .blog-section__header {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 3rem;
gap: 1rem;
}
@media (min-width: 768px) {
.blog-section--featured .blog-section__header { flex-direction: row; align-items: baseline; }
}
.blog-grid-featured {
display: grid;
grid-template-columns: 1fr;
gap: 4px;
}
@media (min-width: 768px) {
.blog-grid-featured { grid-template-columns: repeat(3, 1fr); }
}
.blog-grid-featured__item {
position: relative;
aspect-ratio: 3 / 4;
overflow: hidden;
cursor: pointer;
border: 1px solid var(--color-smoky-black);
}
.blog-grid-featured__item img {
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(60%);
transition: transform 0.7s, filter 0.7s;
}
.blog-grid-featured__item:hover img { transform: scale(1.05); filter: grayscale(0%); }
.blog-grid-featured__overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(9,10,12,0.92) 0%, rgba(9,10,12,0.4) 40%, transparent 70%);
opacity: 1;
transition: background 0.5s;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 2rem;
}
.blog-grid-featured__item:hover .blog-grid-featured__overlay {
background: linear-gradient(to top, rgba(9,10,12,0.95) 0%, rgba(9,10,12,0.6) 50%, rgba(9,10,12,0.2) 80%);
}
.blog-grid-featured__date { font-size: 10px; font-family: var(--font-mono); color: var(--color-acid-yellow); margin-bottom: 0.5rem; }
.blog-grid-featured__title { color: var(--color-white); font-size: 1.5rem; font-weight: 700; text-transform: uppercase; line-height: 1.2; }
.blog-grid-featured__line { margin-top: 1rem; height: 2px; width: 48px; background: var(--color-acid-yellow); transition: width 0.5s; }
.blog-grid-featured__item:hover .blog-grid-featured__line { width: 100%; }
.blog-grid-featured__num {
position: absolute;
top: 1rem;
right: 1rem;
font-size: 10px;
font-family: var(--font-mono);
color: rgba(255,255,255,0.5);
}
.blog-grid-featured__item:hover .blog-grid-featured__num { color: var(--color-acid-yellow); }
.blog-section--featured .blog-section__cta-wrap { justify-content: flex-start; margin-top: 3rem; }
.blog-section--featured .blog-section__cta {
background: var(--color-smoky-black);
color: var(--color-acid-yellow);
padding: 1.25rem 3rem;
}
.blog-section--featured .blog-section__cta:hover { background: var(--color-acid-yellow); color: var(--color-smoky-black); }
/* ============================================
SUMMIT LOG (LOG_MISJI)
============================================ */
.summit-log {
background: var(--color-smoky-black);
padding: 6rem 1.5rem;
color: var(--color-white);
border-top: 1px solid rgba(255,255,255,0.1);
}
@media (min-width: 768px) { .summit-log { padding: 6rem 3rem; } }
.summit-log__header {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 4rem;
gap: 1.5rem;
}
@media (min-width: 768px) { .summit-log__header { flex-direction: row; } }
.summit-log__title {
font-family: var(--font-display);
font-weight: 700;
text-transform: uppercase;
letter-spacing: -0.05em;
line-height: 0.85;
font-size: clamp(4rem, 12vw, 8rem);
color: var(--color-white);
}
.summit-log__subtitle {
font-family: var(--font-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--color-acid-yellow);
margin-top: 0.5rem;
}
.summit-log__stats {
display: flex;
gap: 2rem;
font-family: var(--font-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.2em;
opacity: 0.4;
}
.summit-table {
border: 1px solid rgba(255,255,255,0.1);
overflow: hidden;
}
.summit-table__head {
display: grid;
grid-template-columns: 1fr auto;
background: rgba(255,255,255,0.05);
padding: 1rem;
font-size: 10px;
font-family: var(--font-mono);
color: var(--color-acid-yellow);
text-transform: uppercase;
letter-spacing: 0.2em;
border-bottom: 1px solid rgba(255,255,255,0.1);
gap: 1rem;
}
@media (min-width: 768px) {
.summit-table__head { grid-template-columns: repeat(5, 1fr); gap: 0; }
}
.summit-table__head-cell--hide-mobile { display: none; }
@media (min-width: 768px) { .summit-table__head-cell--hide-mobile { display: block; } }
.summit-table__head-cell--right { text-align: right; }
@media (min-width: 768px) { .summit-table__head-cell--right { text-align: left; } }
.summit-table__row {
display: grid;
grid-template-columns: 1fr auto;
padding: 1.5rem;
align-items: center;
transition: background-color 0.2s;
cursor: crosshair;
border-top: 1px solid rgba(255,255,255,0.05);
gap: 1rem;
}
@media (min-width: 768px) {
.summit-table__row { grid-template-columns: repeat(5, 1fr); gap: 0; }
}
.summit-table__row:first-child { border-top: 0; }
.summit-table__row:hover { background: rgba(255,255,255,0.05); }
.summit-table__name { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.025em; transition: color 0.2s; }
.summit-table__row:hover .summit-table__name { color: var(--color-acid-yellow); }
.summit-table__cell { display: none; font-family: var(--font-mono); font-size: 14px; opacity: 0.6; }
@media (min-width: 768px) { .summit-table__cell { display: block; } }
.summit-table__status { text-align: right; }
@media (min-width: 768px) { .summit-table__status { text-align: left; } }
.summit-table__badge {
font-size: 10px;
padding: 0.25rem 0.5rem;
font-weight: 700;
border: 1px solid;
}
.summit-table__badge--completed { border-color: var(--color-acid-yellow); color: var(--color-acid-yellow); }
.summit-table__badge--progress { border-color: var(--color-rescue-orange); color: var(--color-rescue-orange); }
.summit-table__badge--planned { border-color: rgba(255,255,255,0.2); color: rgba(255,255,255,0.4); }
.summit-log__footer {
margin-top: 3rem;
padding: 2rem;
border: 1px dashed rgba(255,255,255,0.1);
background: rgba(255,255,255,0.02);
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
}
@media (min-width: 768px) { .summit-log__footer { flex-direction: row; } }
.summit-log__footer-text {
font-family: var(--font-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.2em;
opacity: 0.6;
max-width: 36rem;
}
.summit-log__footer-btn {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--color-acid-yellow);
border-bottom: 1px solid var(--color-acid-yellow);
padding-bottom: 0.25rem;
transition: all 0.2s;
}
.summit-log__footer-btn:hover { color: var(--color-white); border-bottom-color: var(--color-white); }
/* ============================================
RECOVERY LOG (DRUGA_GRAŃ)
============================================ */
.recovery {
background: var(--color-acid-yellow);
padding: 6rem 1.5rem;
color: var(--color-smoky-black);
border-top: 1px solid var(--color-smoky-black);
position: relative;
overflow: hidden;
}
@media (min-width: 768px) { .recovery { padding: 6rem 3rem; } }
.recovery::before {
content: "";
position: absolute;
inset: 0;
opacity: 0.05;
background-image: radial-gradient(#000 1px, transparent 1px);
background-size: 24px 24px;
pointer-events: none;
}
.recovery__header {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 4rem;
gap: 1.5rem;
}
@media (min-width: 768px) { .recovery__header { flex-direction: row; } }
.recovery__title { font-size: clamp(4rem, 12vw, 8rem); }
.recovery__subtitle {
font-family: var(--font-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.2em;
color: rgba(9,10,12,0.6);
margin-top: 0.5rem;
}
.recovery__heart {
background: var(--color-smoky-black);
color: var(--color-acid-yellow);
padding: 1.5rem;
font-family: var(--font-mono);
font-size: 12px;
border-left: 4px solid var(--color-white);
}
.recovery__heart-row {
display: flex;
justify-content: space-between;
gap: 3rem;
margin-bottom: 0.5rem;
}
.recovery__heart-bar { width: 100%; height: 4px; background: rgba(255,255,255,0.2); }
.recovery__heart-fill { height: 100%; background: var(--color-acid-yellow); width: 92%; transition: width 1.5s ease-out; }
.recovery__grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
}
@media (min-width: 768px) { .recovery__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .recovery__grid { grid-template-columns: repeat(3, 1fr); } }
.recovery__card {
background: rgba(255,255,255,0.4);
border: 1px solid var(--color-smoky-black);
padding: 2rem;
display: flex;
flex-direction: column;
justify-content: space-between;
transition: all 0.5s;
}
.recovery__card:hover { background: var(--color-smoky-black); color: var(--color-acid-yellow); }
.recovery__card-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 1.5rem;
}
.recovery__card-step { font-size: 10px; font-family: var(--font-mono); opacity: 0.5; }
.recovery__card:hover .recovery__card-step { opacity: 1; }
.recovery__card-status {
font-size: 10px;
font-weight: 700;
padding: 0.125rem 0.5rem;
border: 1px solid var(--color-smoky-black);
}
.recovery__card:hover .recovery__card-status { border-color: var(--color-acid-yellow); }
.recovery__card-status--completed {
background: var(--color-smoky-black);
color: var(--color-acid-yellow);
}
.recovery__card:hover .recovery__card-status--completed { background: var(--color-acid-yellow); color: var(--color-smoky-black); }
.recovery__card-name { font-size: 1.5rem; font-weight: 700; line-height: 1.2; margin-bottom: 0.5rem; }
.recovery__card-meta { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.2em; opacity: 0.6; margin-bottom: 2rem; }
.recovery__card:hover .recovery__card-meta { opacity: 0.8; }
.recovery__card-progress-label {
display: flex;
justify-content: space-between;
font-size: 10px;
font-family: var(--font-mono);
margin-bottom: 0.5rem;
}
.recovery__card-bar { width: 100%; height: 2px; background: rgba(9,10,12,0.1); }
.recovery__card:hover .recovery__card-bar { background: rgba(255,255,255,0.2); }
.recovery__card-fill { height: 100%; background: var(--color-smoky-black); transition: width 1s; }
.recovery__card:hover .recovery__card-fill { background: var(--color-acid-yellow); }
.recovery__footer {
margin-top: 3rem;
display: flex;
justify-content: center;
}
.recovery__footer-btn {
display: flex;
align-items: center;
gap: 1rem;
font-family: var(--font-mono);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.2em;
}
.recovery__footer-btn span { width: 48px; height: 1px; background: var(--color-smoky-black); transition: width 0.3s; }
.recovery__footer-btn:hover span { width: 96px; }
/* ============================================
VIDEO SECTION
============================================ */
.video-section {
background: var(--color-smoky-black);
padding: 6rem 1.5rem;
border-top: 1px solid rgba(255,255,255,0.1);
}
@media (min-width: 768px) { .video-section { padding: 6rem 3rem; } }
.video-section__header {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 3rem;
gap: 1rem;
}
@media (min-width: 768px) { .video-section__header { flex-direction: row; } }
.video-section__title {
font-family: var(--font-display);
font-weight: 700;
text-transform: uppercase;
letter-spacing: -0.05em;
line-height: 0.85;
font-size: clamp(3.5rem, 10vw, 6rem);
color: var(--color-acid-yellow);
}
.video-section__subtitle {
font-family: var(--font-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.2em;
color: rgba(255,255,255,0.5);
margin-top: 0.5rem;
}
.video-section__meta {
font-family: var(--font-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--color-acid-yellow);
opacity: 0.5;
}
.video-frame {
position: relative;
aspect-ratio: 16 / 9;
border: 2px solid rgba(225,255,0,0.2);
background: #000;
overflow: hidden;
}
.video-frame iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
filter: grayscale(100%);
transition: filter 0.7s;
}
.video-frame:hover iframe { filter: grayscale(0%); }
/* ============================================
BOOKS SECTION
============================================ */
.books {
background: var(--color-smoky-black);
padding: 6rem 1.5rem;
color: var(--color-white);
overflow: hidden;
}
@media (min-width: 768px) { .books { padding: 6rem 3rem; } }
.books__container {
display: flex;
flex-direction: column;
gap: 3rem;
}
@media (min-width: 768px) { .books__container { flex-direction: row; } }
.books__title-wrap { width: 100%; }
@media (min-width: 768px) { .books__title-wrap { width: 25%; } }
.books__title {
font-family: var(--font-display);
font-weight: 700;
text-transform: uppercase;
letter-spacing: -0.05em;
line-height: 0.85;
font-size: clamp(4rem, 12vw, 8rem);
opacity: 0.2;
}
@media (min-width: 768px) {
.books__title {
writing-mode: vertical-rl;
transform: rotate(180deg);
opacity: 1;
}
}
.books__list { width: 100%; }
@media (min-width: 768px) { .books__list { width: 75%; } }
.book {
cursor: pointer;
position: relative;
padding: 1rem 0;
}
.book + .book { margin-top: 1rem; }
.book__meta {
display: flex;
align-items: center;
gap: 1rem;
font-family: var(--font-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--color-acid-yellow);
margin-bottom: 0.5rem;
}
.book__line { height: 1px; flex-grow: 1; background: rgba(225,255,0,0.2); transition: background 0.2s; }
.book:hover .book__line { background: var(--color-acid-yellow); }
.book__row { display: flex; justify-content: space-between; align-items: flex-end; }
.book__title {
font-size: 1.5rem;
font-weight: 700;
text-transform: uppercase;
transition: color 0.2s;
}
@media (min-width: 768px) { .book__title { font-size: 2.25rem; } }
.book:hover .book__title { color: var(--color-acid-yellow); }
.book__author { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.2em; opacity: 0.5; }
.books__cta-wrap { margin-top: 3rem; display: flex; justify-content: flex-end; }
.books__cta {
background: var(--color-acid-yellow);
color: var(--color-smoky-black);
padding: 1rem 2rem;
font-family: var(--font-mono);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.2em;
transition: background 0.2s;
}
.books__cta:hover { background: var(--color-white); }
/* ============================================
ABOUT SECTION (O_MNIE)
============================================ */
.about {
background: var(--color-smoky-black);
padding: 6rem 1.5rem;
border-top: 1px solid rgba(255,255,255,0.1);
position: relative;
overflow: hidden;
}
@media (min-width: 768px) { .about { padding: 6rem 3rem; } }
.about::before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 100%;
background: rgba(255,255,255,0.02);
transform: skewX(-12deg) translateX(25%);
pointer-events: none;
}
.about__grid {
display: grid;
grid-template-columns: 1fr;
gap: 3rem;
align-items: flex-start;
}
@media (min-width: 1024px) { .about__grid { grid-template-columns: 5fr 7fr; } }
.about__image-wrap {
position: relative;
}
.about__image {
aspect-ratio: 4 / 5;
overflow: hidden;
border: 1px solid rgba(255,255,255,0.2);
filter: grayscale(100%) contrast(1.25);
transition: filter 0.7s;
}
.about__image:hover { filter: grayscale(0%) contrast(1.25); }
.about__image img { width: 100%; height: 100%; object-fit: cover; }
.about__image-id { position: absolute; top: 1rem; left: 1rem; font-size: 8px; font-family: var(--font-mono); color: var(--color-acid-yellow); opacity: 0.4; }
.about__profile-tag {
display: inline-block;
padding: 0.25rem 0.75rem;
background: var(--color-acid-yellow);
color: var(--color-smoky-black);
font-size: 10px;
font-family: var(--font-mono);
font-weight: 700;
margin-bottom: 1.5rem;
}
.about__title {
font-family: var(--font-display);
font-weight: 700;
text-transform: uppercase;
letter-spacing: -0.05em;
line-height: 0.85;
font-size: clamp(4rem, 12vw, 8rem);
color: var(--color-white);
margin-bottom: 2rem;
}
.about__quote {
border-left: 2px solid var(--color-acid-yellow);
padding-left: 1.5rem;
margin-bottom: 2rem;
}
.about__quote p {
font-size: 1.25rem;
color: var(--color-white);
font-weight: 700;
line-height: 1.2;
text-transform: uppercase;
}
@media (min-width: 768px) { .about__quote p { font-size: 1.5rem; } }
.about__text {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
color: rgba(255,255,255,0.6);
font-size: 0.875rem;
line-height: 1.6;
font-weight: 300;
margin-bottom: 3rem;
}
@media (min-width: 768px) { .about__text { grid-template-columns: 1fr 1fr; } }
.about__stats {
padding-top: 3rem;
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
border-top: 1px solid rgba(255,255,255,0.1);
}
@media (min-width: 640px) { .about__stats { grid-template-columns: repeat(3, 1fr); } }
.about__stat-label { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.2em; color: var(--color-acid-yellow); margin-bottom: 0.5rem; }
.about__stat-value { color: var(--color-white); font-weight: 700; text-transform: uppercase; font-size: 12px; }
.about__status-bar {
margin-top: 3rem;
padding-top: 2rem;
border-top: 1px solid rgba(255,255,255,0.05);
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.about__status-label { font-size: 10px; font-family: var(--font-mono); color: rgba(225,255,0,0.5); margin-bottom: 0.25rem; }
.about__status-value { color: var(--color-white); font-weight: 700; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.2em; }
/* ============================================
NEWSLETTER
============================================ */
.newsletter {
background: var(--color-acid-yellow);
padding: 6rem 1.5rem;
border-top: 1px solid var(--color-smoky-black);
}
@media (min-width: 768px) { .newsletter { padding: 6rem 3rem; } }
.newsletter__container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
gap: 3rem;
}
@media (min-width: 768px) { .newsletter__container { flex-direction: row; } }
.newsletter__left { width: 100%; }
@media (min-width: 768px) { .newsletter__left { width: 50%; } }
.newsletter__title {
font-family: var(--font-display);
font-weight: 700;
text-transform: uppercase;
letter-spacing: -0.05em;
line-height: 0.85;
font-size: clamp(3.5rem, 10vw, 6rem);
margin-bottom: 1rem;
}
.newsletter__subtitle {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.2em;
}
.newsletter__right { width: 100%; }
@media (min-width: 768px) { .newsletter__right { width: 50%; } }
.newsletter__form { display: flex; flex-direction: column; gap: 1rem; }
.newsletter__input-wrap { position: relative; }
.newsletter__input {
width: 100%;
background: transparent;
border: 2px solid var(--color-smoky-black);
padding: 1rem;
font-family: var(--font-mono);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.2em;
}
.newsletter__input::placeholder { color: rgba(9,10,12,0.3); }
.newsletter__input:focus { outline: none; background: var(--color-white); }
.newsletter__input-meta {
position: absolute;
top: 0;
right: 0;
height: 100%;
display: flex;
align-items: center;
padding-right: 1rem;
pointer-events: none;
opacity: 0.2;
font-family: var(--font-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.2em;
}
.newsletter__btn {
background: var(--color-smoky-black);
color: var(--color-acid-yellow);
padding: 1rem;
font-family: var(--font-mono);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.2em;
transition: all 0.2s;
}
.newsletter__btn:hover { background: var(--color-white); color: var(--color-smoky-black); }
.newsletter__disclaimer {
font-size: 10px;
font-family: var(--font-mono);
opacity: 0.85;
text-transform: uppercase;
}
/* ============================================
FOOTER
============================================ */
.site-footer {
background: var(--color-smoky-black);
color: var(--color-white);
padding: 4rem 1.5rem;
border-top: 1px solid rgba(255,255,255,0.1);
}
@media (min-width: 768px) { .site-footer { padding: 4rem 3rem; } }
.site-footer__grid {
display: grid;
grid-template-columns: 1fr;
gap: 3rem;
margin-bottom: 4rem;
}
@media (min-width: 768px) { .site-footer__grid { grid-template-columns: repeat(4, 1fr); } }
.site-footer__brand { grid-column: span 1; }
@media (min-width: 768px) { .site-footer__brand { grid-column: span 2; } }
.site-footer__logo { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.025em; margin-bottom: 1.5rem; }
.site-footer__about {
font-family: var(--font-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.2em;
color: rgba(255,255,255,0.5);
max-width: 28rem;
line-height: 1.6;
}
.site-footer__col-title {
font-family: var(--font-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--color-acid-yellow);
margin-bottom: 1.5rem;
}
.site-footer__col-list { display: flex; flex-direction: column; gap: 0.75rem; }
.site-footer__col-list a {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.2em;
transition: color 0.2s;
}
.site-footer__col-list a:hover { color: var(--color-acid-yellow); }
.site-footer__bottom {
padding-top: 2rem;
border-top: 1px solid rgba(255,255,255,0.05);
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
gap: 1.5rem;
}
@media (min-width: 768px) { .site-footer__bottom { flex-direction: row; } }
.site-footer__version {
font-size: 10px;
font-family: var(--font-mono);
color: rgba(255,255,255,0.3);
text-transform: uppercase;
letter-spacing: 0.2em;
}
.site-footer__copy {
font-family: var(--font-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.2em;
opacity: 0.5;
}
.site-footer__legal {
font-family: var(--font-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.15em;
display: flex;
gap: 0.75rem;
align-items: center;
flex-wrap: wrap;
justify-content: center;
}
.site-footer__legal a {
color: rgba(255,255,255,0.5);
text-decoration: none;
transition: color 0.2s;
}
.site-footer__legal a:hover {
color: var(--color-acid-yellow);
}
.site-footer__legal-sep {
color: rgba(255,255,255,0.2);
}
/* ============================================
SINGLE POST / PAGE
============================================ */
.single-content {
padding: 8rem 1.5rem 4rem;
background: var(--color-off-white);
min-height: 80vh;
min-height: 80svh;
}
@media (min-width: 768px) { .single-content { padding: 8rem 3rem 4rem; } }
.single-content__inner {
max-width: 48rem;
margin: 0 auto;
}
.single-content__meta {
display: flex;
gap: 1rem;
font-family: var(--font-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--color-rescue-orange);
margin-bottom: 1rem;
}
.single-content__title {
font-family: var(--font-display);
font-weight: 700;
text-transform: uppercase;
letter-spacing: -0.05em;
line-height: 0.95;
font-size: clamp(2.5rem, 6vw, 4rem);
margin-bottom: 2rem;
}
.single-content__featured {
margin-bottom: 2rem;
}
.single-content__featured img {
width: 100%;
border: 1px solid var(--color-smoky-black);
filter: grayscale(100%);
transition: filter 0.5s;
}
.single-content__featured img:hover { filter: grayscale(0); }
.single-content__body {
font-size: 1.0625rem;
line-height: 1.7;
}
.single-content__body p { margin-bottom: 1.25rem; }
.single-content__body h2, .single-content__body h3, .single-content__body h4 {
font-family: var(--font-display);
font-weight: 700;
text-transform: uppercase;
letter-spacing: -0.025em;
margin: 2rem 0 1rem;
line-height: 1.1;
}
.single-content__body h2 { font-size: 2rem; }
.single-content__body h3 { font-size: 1.5rem; }
.single-content__body h4 { font-size: 1.25rem; }
.single-content__body a {
color: var(--color-rescue-orange);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
.single-content__body a:hover { color: var(--color-smoky-black); background: var(--color-acid-yellow); }
.single-content__body ul, .single-content__body ol { margin: 1rem 0 1.25rem 1.5rem; }
.single-content__body ul { list-style: square; }
.single-content__body ol { list-style: decimal; }
.single-content__body li { margin-bottom: 0.5rem; }
.single-content__body blockquote {
border-left: 4px solid var(--color-acid-yellow);
padding: 1rem 1.5rem;
margin: 1.5rem 0;
font-weight: 700;
text-transform: uppercase;
background: rgba(225,255,0,0.05);
}
.single-content__body img {
margin: 1.5rem 0;
border: 1px solid var(--color-smoky-black);
filter: grayscale(100%);
transition: filter 0.5s;
}
.single-content__body img:hover { filter: grayscale(0); }
.single-content__body code {
background: var(--color-smoky-black);
color: var(--color-acid-yellow);
padding: 0.125rem 0.375rem;
font-family: var(--font-mono);
font-size: 0.875em;
}
.single-content__body pre {
background: var(--color-smoky-black);
color: var(--color-acid-yellow);
padding: 1rem;
overflow-x: auto;
margin: 1rem 0;
}
.single-content__body pre code { background: transparent; padding: 0; }
/* Lista postów na archive / category */
.archive-header {
padding: 8rem 1.5rem 4rem;
background: var(--color-smoky-black);
color: var(--color-white);
}
@media (min-width: 768px) { .archive-header { padding: 8rem 3rem 4rem; } }
.archive-header__inner { max-width: var(--max-width); margin: 0 auto; }
.archive-header__pretitle {
font-family: var(--font-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--color-acid-yellow);
margin-bottom: 1rem;
}
.archive-header__title {
font-family: var(--font-display);
font-weight: 700;
text-transform: uppercase;
letter-spacing: -0.05em;
line-height: 0.9;
font-size: clamp(4rem, 12vw, 8rem);
color: var(--color-white);
}
.archive-list {
padding: 4rem 1.5rem;
background: var(--color-off-white);
}
@media (min-width: 768px) { .archive-list { padding: 4rem 3rem; } }
.archive-list__grid {
max-width: var(--max-width);
margin: 0 auto;
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
background: transparent;
border: none;
}
@media (min-width: 768px) { .archive-list__grid { grid-template-columns: repeat(3, 1fr); } }
.archive-card {
background: var(--color-off-white);
border: 1px solid var(--color-smoky-black);
padding: 2rem;
display: flex;
flex-direction: column;
gap: 1rem;
transition: background 0.2s;
cursor: pointer;
}
.archive-card:hover { background: var(--color-smoky-black); color: var(--color-acid-yellow); }
.archive-card__image {
aspect-ratio: 16/10;
overflow: hidden;
border: 1px solid var(--color-smoky-black);
margin-bottom: 1rem;
}
.archive-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(100%);
transition: all 0.5s;
}
.archive-card:hover .archive-card__image img { filter: grayscale(0); transform: scale(1.05); }
.archive-card__date { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.2em; color: var(--color-rescue-orange); }
.archive-card__title { font-size: 1.25rem; font-weight: 700; text-transform: uppercase; line-height: 1.2; }
.archive-card__excerpt { font-size: 0.875rem; opacity: 0.7; }
.archive-card__readmore {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.2em;
margin-top: auto;
padding-top: 1rem;
}
/* Pagination */
.pagination {
max-width: var(--max-width);
margin: 3rem auto 0;
display: flex;
gap: 0.5rem;
justify-content: center;
flex-wrap: wrap;
}
.pagination a, .pagination span {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 700;
padding: 0.75rem 1rem;
border: 1px solid var(--color-smoky-black);
text-transform: uppercase;
letter-spacing: 0.2em;
}
.pagination a:hover, .pagination .current {
background: var(--color-smoky-black);
color: var(--color-acid-yellow);
}
/* Reduced motion - dla użytkowników z prefersami */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.hero__particle, .hero__scanbeam, .hero__bracket, .hero__glitch, .hero__bg-base { animation: none !important; }
}
/* ============================================
ANIMACJE ON SCROLL (data-animate)
============================================ */
/* Fallback: jeśli JS się nie załaduje / opóźni, po 300ms pokaż elementy */
[data-animate] {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.7s ease-out, transform 0.7s ease-out;
animation: aa-animate-fallback 0.7s ease-out 2s forwards;
}
[data-animate].is-visible {
opacity: 1;
transform: translateY(0);
animation: none;
}
@keyframes aa-animate-fallback {
to { opacity: 1; transform: translateY(0); }
}
[data-animate="slide-left"] {
transform: translateX(-20px);
}
[data-animate="slide-left"].is-visible {
transform: translateX(0);
}
/* Wrapper dla x-ray content */
.hero__content--xray-wrap,
.hero__content--xray-wrap * {
pointer-events: none !important;
}
.hero__content--xray-wrap {
position: absolute;
inset: 0;
z-index: 20;
display: flex;
align-items: center;
justify-content: center;
clip-path: circle(0px at 50% 50%);
}
/* ============================================
CPT KSIĄŻKI - ARCHIVE (/ksiazki/)
============================================ */
.books-archive {
background: var(--color-smoky-black);
color: var(--color-white);
padding: 4rem 1.5rem 6rem;
min-height: 60vh;
min-height: 60svh;
position: relative;
}
@media (min-width: 768px) { .books-archive { padding: 4rem 3rem 8rem; } }
/* Subtle pattern */
.books-archive::before {
content: "";
position: absolute;
inset: 0;
background-image: radial-gradient(rgba(225,255,0,0.05) 1px, transparent 1px);
background-size: 40px 40px;
pointer-events: none;
}
.books-archive__grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1fr;
gap: 0;
border: 1px solid rgba(255,255,255,0.1);
}
@media (min-width: 640px) { .books-archive__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .books-archive__grid { grid-template-columns: repeat(3, 1fr); } }
.book-card {
display: block;
padding: 2rem;
border-right: 1px solid rgba(255,255,255,0.1);
border-bottom: 1px solid rgba(255,255,255,0.1);
color: var(--color-white);
transition: background 0.3s, color 0.3s;
cursor: pointer;
position: relative;
}
.book-card:hover { background: var(--color-acid-yellow); color: var(--color-smoky-black); }
.book-card__num {
font-family: var(--font-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--color-acid-yellow);
margin-bottom: 1rem;
opacity: 0.5;
}
.book-card:hover .book-card__num { color: var(--color-smoky-black); opacity: 0.8; }
.book-card__cover {
position: relative;
aspect-ratio: 2 / 3;
overflow: hidden;
background: var(--color-smoky-black);
border: 1px solid rgba(255,255,255,0.2);
margin-bottom: 1.5rem;
transition: border-color 0.3s;
}
.book-card:hover .book-card__cover { border-color: var(--color-smoky-black); }
.book-card__cover img {
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(100%) contrast(1.1);
transition: filter 0.7s, transform 0.7s;
}
.book-card:hover .book-card__cover img { filter: grayscale(0) contrast(1); transform: scale(1.03); }
.book-card__cover-empty {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--color-smoky-black) 0%, #1a1a1f 100%);
font-family: var(--font-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.2em;
color: rgba(225,255,0,0.4);
}
.book-card__cover-overlay {
position: absolute;
inset: 0;
background: rgba(9,10,12,0.85);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s;
}
.book-card:hover .book-card__cover-overlay { opacity: 1; }
.book-card__cta {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--color-acid-yellow);
border: 1px solid var(--color-acid-yellow);
padding: 0.75rem 1.25rem;
}
.book-card__meta {
display: flex;
gap: 0.5rem;
font-family: var(--font-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--color-acid-yellow);
margin-bottom: 0.5rem;
opacity: 0.7;
}
.book-card:hover .book-card__meta { color: var(--color-smoky-black); opacity: 1; }
.book-card__title {
font-size: 1.125rem;
font-weight: 700;
text-transform: uppercase;
line-height: 1.2;
letter-spacing: -0.01em;
margin-bottom: 0.5rem;
}
.book-card__subtitle {
font-size: 11px;
opacity: 0.6;
margin-bottom: 0.75rem;
line-height: 1.4;
font-style: italic;
}
.book-card:hover .book-card__subtitle { opacity: 0.8; }
.book-card__author {
font-family: var(--font-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.2em;
opacity: 0.6;
margin-top: 0.5rem;
}
.book-card:hover .book-card__author { opacity: 1; font-weight: 700; }
/* ============================================
CPT KSIĄŻKI - SINGLE (/ksiazki/tytul/)
============================================ */
.book-single {
background: var(--color-off-white);
color: var(--color-smoky-black);
padding-top: 48px; /* offset pod fixed header */
}
.book-single__header {
background: var(--color-smoky-black);
color: var(--color-white);
padding: 3rem 1.5rem 2rem;
}
@media (min-width: 768px) { .book-single__header { padding: 3rem 3rem 2rem; } }
.book-single__breadcrumb {
font-family: var(--font-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.2em;
display: flex;
gap: 1rem;
align-items: center;
}
.book-single__breadcrumb a {
color: var(--color-acid-yellow);
border-bottom: 1px solid transparent;
transition: border-color 0.2s;
}
.book-single__breadcrumb a:hover { border-bottom-color: var(--color-acid-yellow); }
.book-single__breadcrumb span { color: rgba(255,255,255,0.4); }
.book-single__main {
background: var(--color-smoky-black);
color: var(--color-white);
padding: 2rem 1.5rem 6rem;
position: relative;
overflow: hidden;
}
@media (min-width: 768px) { .book-single__main { padding: 2rem 3rem 8rem; } }
.book-single__main::before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 40%;
height: 100%;
background: rgba(255,255,255,0.02);
transform: skewX(-12deg) translateX(30%);
pointer-events: none;
}
.book-single__grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1fr;
gap: 3rem;
align-items: flex-start;
}
@media (min-width: 1024px) {
.book-single__grid { grid-template-columns: 5fr 7fr; gap: 5rem; }
}
/* Sidebar (okładka + spec) */
.book-single__sidebar {
position: relative;
}
@media (min-width: 1024px) {
.book-single__sidebar { position: sticky; top: 80px; }
}
.book-single__cover-wrap {
position: relative;
margin-bottom: 2rem;
}
.book-single__cover {
aspect-ratio: 2 / 3;
overflow: hidden;
border: 1px solid rgba(255,255,255,0.2);
filter: grayscale(100%) contrast(1.1);
transition: filter 0.7s;
background: var(--color-smoky-black);
}
.book-single__cover:hover { filter: grayscale(0) contrast(1); }
.book-single__cover img { width: 100%; height: 100%; object-fit: cover; }
.book-single__cover--empty {
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #1a1a1f 0%, var(--color-smoky-black) 100%);
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.2em;
color: rgba(225,255,0,0.5);
filter: none;
}
.book-single__cover-id {
position: absolute;
top: 1rem;
left: 1rem;
font-family: var(--font-mono);
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--color-acid-yellow);
background: rgba(9,10,12,0.8);
padding: 0.25rem 0.5rem;
border: 1px solid rgba(225,255,0,0.3);
}
/* Specyfikacja techniczna */
.book-single__specs {
border: 1px dashed rgba(255,255,255,0.15);
padding: 1.5rem;
background: rgba(255,255,255,0.02);
}
.book-single__specs-title {
font-family: var(--font-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--color-acid-yellow);
margin-bottom: 1rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.book-single__spec-row {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 1rem;
padding: 0.5rem 0;
border-top: 1px solid rgba(255,255,255,0.05);
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.book-single__spec-row:first-of-type { border-top: 0; }
.book-single__spec-label {
color: rgba(225,255,0,0.6);
flex-shrink: 0;
}
.book-single__spec-value {
color: var(--color-white);
font-weight: 700;
text-align: right;
word-break: break-word;
}
/* Content */
.book-single__content {}
.book-single__profile-tag {
display: inline-block;
padding: 0.25rem 0.75rem;
background: var(--color-acid-yellow);
color: var(--color-smoky-black);
font-size: 10px;
font-family: var(--font-mono);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.2em;
margin-bottom: 1.5rem;
}
.book-single__title {
font-family: var(--font-display);
font-weight: 700;
text-transform: uppercase;
letter-spacing: -0.03em;
line-height: 0.9;
font-size: clamp(2.5rem, 6vw, 4.5rem);
color: var(--color-white);
margin-bottom: 1rem;
}
.book-single__subtitle {
font-family: var(--font-mono);
font-size: 13px;
color: rgba(255,255,255,0.6);
margin-bottom: 1.5rem;
font-style: italic;
letter-spacing: 0.05em;
line-height: 1.5;
}
.book-single__author-line {
display: flex;
gap: 0.75rem;
align-items: baseline;
margin-bottom: 2rem;
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.2em;
}
.book-single__author-prefix { color: var(--color-acid-yellow); }
.book-single__author-name { color: var(--color-white); font-weight: 700; }
.book-single__tagline {
border-left: 3px solid var(--color-acid-yellow);
padding: 1rem 1.5rem;
margin-bottom: 2rem;
font-size: 1.125rem;
color: var(--color-white);
font-weight: 700;
font-style: italic;
line-height: 1.4;
background: rgba(255,255,255,0.03);
}
.book-single__divider {
margin: 2.5rem 0 2rem;
padding-top: 1.5rem;
border-top: 1px solid rgba(255,255,255,0.1);
font-family: var(--font-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--color-acid-yellow);
}
/* Body (Gutenberg content) */
.book-single__body {
color: rgba(244,244,245,0.85);
font-size: 1.0625rem;
line-height: 1.75;
}
.book-single__body > * { margin-bottom: 1.25rem; }
.book-single__body > *:last-child { margin-bottom: 0; }
.book-single__body p {}
.book-single__body h2,
.book-single__body h3,
.book-single__body h4 {
font-family: var(--font-display);
font-weight: 700;
text-transform: uppercase;
letter-spacing: -0.02em;
color: var(--color-white);
margin-top: 2.5rem;
margin-bottom: 1rem;
line-height: 1.1;
}
.book-single__body h2 { font-size: 1.875rem; color: var(--color-acid-yellow); }
.book-single__body h3 { font-size: 1.375rem; }
.book-single__body h4 { font-size: 1.125rem; }
.book-single__body a {
color: var(--color-acid-yellow);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
transition: all 0.2s;
}
.book-single__body a:hover {
color: var(--color-smoky-black);
background: var(--color-acid-yellow);
text-decoration: none;
padding: 0 4px;
}
.book-single__body ul,
.book-single__body ol {
padding-left: 1.5rem;
margin: 1rem 0 1.5rem;
}
.book-single__body ul { list-style: none; }
.book-single__body ul li::before {
content: "//";
color: var(--color-acid-yellow);
font-family: var(--font-mono);
font-weight: 700;
margin-right: 0.75rem;
}
.book-single__body ol { list-style: decimal; }
.book-single__body ol li::marker { color: var(--color-acid-yellow); font-weight: 700; }
.book-single__body li { margin-bottom: 0.75rem; }
.book-single__body blockquote {
border-left: 3px solid var(--color-rescue-orange);
padding: 1rem 1.5rem;
margin: 1.5rem 0;
background: rgba(255,69,0,0.05);
font-style: italic;
color: var(--color-white);
}
.book-single__body blockquote p:last-child { margin-bottom: 0; }
.book-single__body img,
.book-single__body figure {
margin: 2rem 0;
border: 1px solid rgba(255,255,255,0.1);
max-width: 100%;
height: auto;
}
.book-single__body figure { padding: 0; }
.book-single__body figcaption {
font-family: var(--font-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--color-acid-yellow);
padding: 0.75rem 1rem;
background: rgba(0,0,0,0.3);
border-top: 1px solid rgba(255,255,255,0.1);
}
.book-single__body code {
background: rgba(225,255,0,0.1);
color: var(--color-acid-yellow);
padding: 0.125rem 0.375rem;
font-family: var(--font-mono);
font-size: 0.875em;
border: 1px solid rgba(225,255,0,0.2);
}
.book-single__body pre {
background: rgba(0,0,0,0.4);
color: var(--color-acid-yellow);
padding: 1.25rem;
overflow-x: auto;
border: 1px solid rgba(225,255,0,0.2);
margin: 1.5rem 0;
}
.book-single__body pre code { background: transparent; padding: 0; border: 0; }
/* Gutenberg-specific blocks */
.book-single__body .wp-block-quote {
border-left: 3px solid var(--color-acid-yellow);
padding: 1rem 1.5rem;
background: rgba(225,255,0,0.05);
font-style: italic;
margin: 1.5rem 0;
}
.book-single__body .wp-block-quote cite {
display: block;
margin-top: 0.5rem;
font-family: var(--font-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--color-acid-yellow);
font-style: normal;
}
.book-single__body .wp-block-pullquote {
border-top: 2px solid var(--color-acid-yellow);
border-bottom: 2px solid var(--color-acid-yellow);
padding: 2rem 0;
text-align: center;
margin: 2rem 0;
}
.book-single__body .wp-block-pullquote p {
font-family: var(--font-display);
font-size: 1.75rem;
font-weight: 700;
text-transform: uppercase;
line-height: 1.2;
color: var(--color-white);
}
.book-single__body .wp-block-separator {
border: 0;
border-top: 1px dashed rgba(255,255,255,0.2);
margin: 3rem 0;
}
.book-single__body .wp-block-gallery {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
margin: 2rem 0;
}
@media (min-width: 640px) {
.book-single__body .wp-block-gallery.columns-3 { grid-template-columns: repeat(3, 1fr); }
}
.book-single__body .wp-block-button {
margin: 1rem 0;
}
.book-single__body .wp-block-button__link {
background: var(--color-acid-yellow);
color: var(--color-smoky-black);
padding: 1rem 2rem;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.2em;
border-radius: 0;
display: inline-block;
transition: background 0.2s;
}
.book-single__body .wp-block-button__link:hover {
background: var(--color-white);
text-decoration: none;
padding: 1rem 2rem;
}
/* ============================================
POWIĄZANE KSIĄŻKI
============================================ */
.book-single__related {
background: var(--color-off-white);
color: var(--color-smoky-black);
padding: 4rem 1.5rem 6rem;
border-top: 1px solid var(--color-smoky-black);
}
@media (min-width: 768px) { .book-single__related { padding: 4rem 3rem 6rem; } }
.book-single__related-header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 2.5rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid var(--color-smoky-black);
}
.book-single__related-title {
font-family: var(--font-display);
font-weight: 700;
text-transform: uppercase;
letter-spacing: -0.03em;
font-size: clamp(2rem, 5vw, 3rem);
}
.book-single__related-subtitle {
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.2em;
opacity: 0.6;
}
.book-single__related-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
}
@media (min-width: 640px) { .book-single__related-grid { grid-template-columns: repeat(3, 1fr); } }
.book-card--related {
border: 1px solid var(--color-smoky-black);
color: var(--color-smoky-black);
}
.book-card--related:hover { background: var(--color-smoky-black); color: var(--color-acid-yellow); }
.book-card--related .book-card__cover { border-color: var(--color-smoky-black); }
.book-card--related:hover .book-card__cover { border-color: var(--color-acid-yellow); }
/* ============================================
SINGLE POST - VERGE-INSPIRED LAYOUT
============================================ */
.post-single {
background: var(--color-off-white);
color: var(--color-smoky-black);
padding-top: 48px; /* offset pod fixed header */
}
/* --- HERO --- */
.post-single__hero {
position: relative;
width: 100%;
min-height: 70vh;
min-height: 70svh;
background: var(--color-smoky-black);
display: flex;
align-items: flex-end;
overflow: hidden;
}
@media (min-width: 768px) {
.post-single__hero { min-height: 80vh; }
}
.post-single__hero--no-image {
min-height: 50vh;
min-height: 50svh;
padding: 6rem 0 4rem;
}
.post-single__hero-image {
position: absolute;
inset: 0;
z-index: 1;
}
.post-single__hero-image img {
width: 100%;
height: 100%;
object-fit: cover;
filter: brightness(0.7) contrast(1.05);
}
.post-single__hero-overlay {
position: absolute;
inset: 0;
z-index: 2;
background: linear-gradient(to top, rgba(9,10,12,0.95) 0%, rgba(9,10,12,0.5) 50%, rgba(9,10,12,0.2) 100%);
}
.post-single__hero-content {
position: relative;
z-index: 3;
width: 100%;
padding: 3rem 0 4rem;
}
@media (min-width: 768px) {
.post-single__hero-content { padding: 4rem 0 5rem; }
}
.post-single__category {
margin-bottom: 1.5rem;
}
.post-single__category a {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.3em;
color: var(--color-acid-yellow);
border-bottom: 1px solid transparent;
transition: border-color 0.2s;
}
.post-single__category a:hover { border-bottom-color: var(--color-acid-yellow); }
.post-single__title {
font-family: var(--font-display);
font-weight: 700;
text-transform: uppercase;
letter-spacing: -0.04em;
line-height: 0.9;
font-size: clamp(2.5rem, 7vw, 6rem);
color: var(--color-white);
margin-bottom: 1.5rem;
max-width: 1100px;
}
.post-single__lead {
font-family: var(--font-sans);
font-size: clamp(1.125rem, 2vw, 1.5rem);
line-height: 1.4;
color: rgba(255,255,255,0.85);
max-width: 800px;
font-weight: 400;
}
/* --- MAIN LAYOUT --- */
.post-single__main {
padding: 4rem 1.5rem 6rem;
}
@media (min-width: 768px) {
.post-single__main { padding: 5rem 3rem 8rem; }
}
.post-single__layout {
display: grid;
grid-template-columns: 1fr;
gap: 3rem;
}
@media (min-width: 1024px) {
.post-single__layout {
grid-template-columns: minmax(0, 1fr) 280px;
gap: 4rem;
}
}
@media (min-width: 1280px) {
.post-single__layout {
grid-template-columns: minmax(0, 1fr) 320px;
gap: 6rem;
}
}
/* --- META BAR --- */
.post-single__meta-bar {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 1rem;
padding-bottom: 2rem;
margin-bottom: 2.5rem;
border-bottom: 2px solid var(--color-smoky-black);
}
.post-single__byline {
display: flex;
gap: 0.75rem;
align-items: baseline;
font-family: var(--font-mono);
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.2em;
}
.post-single__byline-label { color: var(--color-rescue-orange); font-weight: 700; }
.post-single__byline-name {
color: var(--color-smoky-black);
font-weight: 700;
border-bottom: 1px solid var(--color-smoky-black);
padding-bottom: 1px;
transition: color 0.2s, border-color 0.2s;
}
.post-single__byline-name:hover { color: var(--color-rescue-orange); border-bottom-color: var(--color-rescue-orange); }
.post-single__meta-info {
display: flex;
gap: 0.75rem;
align-items: center;
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.2em;
color: rgba(9,10,12,0.6);
}
/* --- BODY (treść wpisu) --- */
.post-single__body {
font-size: 1.25rem;
line-height: 1.7;
color: var(--color-smoky-black);
max-width: 720px;
font-family: var(--font-sans);
}
@media (min-width: 768px) {
.post-single__body { font-size: 1.3125rem; }
}
.post-single__body > * { margin-bottom: 1.5rem; }
.post-single__body > *:last-child { margin-bottom: 0; }
/* Dropcap - pierwszy akapit */
.post-single__body > p:first-of-type::first-letter {
font-family: var(--font-display);
font-weight: 700;
font-size: 5rem;
line-height: 0.85;
float: left;
padding: 0.5rem 0.75rem 0 0;
color: var(--color-rescue-orange);
text-transform: uppercase;
}
/* Akapity - lekkie spacjowanie */
.post-single__body p {
margin-bottom: 1.5rem;
}
/* Nagłówki */
.post-single__body h2,
.post-single__body h3,
.post-single__body h4 {
font-family: var(--font-display);
font-weight: 700;
text-transform: uppercase;
letter-spacing: -0.025em;
color: var(--color-smoky-black);
line-height: 1.05;
margin-top: 3.5rem;
margin-bottom: 1.25rem;
}
.post-single__body h2 {
font-size: clamp(1.875rem, 3.5vw, 2.75rem);
padding-top: 1rem;
border-top: 2px solid var(--color-smoky-black);
}
.post-single__body h3 {
font-size: clamp(1.5rem, 2.5vw, 2rem);
}
.post-single__body h4 {
font-size: 1.25rem;
}
/* Linki - bardzo wyraźne, jak Verge */
.post-single__body a {
color: var(--color-smoky-black);
text-decoration: none;
background-image: linear-gradient(var(--color-acid-yellow), var(--color-acid-yellow));
background-size: 100% 0.35em;
background-position: 0 88%;
background-repeat: no-repeat;
font-weight: 700;
padding: 0 2px;
transition: background-size 0.2s;
}
.post-single__body a:hover {
background-size: 100% 100%;
}
/* Listy */
.post-single__body ul,
.post-single__body ol {
padding-left: 0;
margin: 1.5rem 0 2rem;
list-style: none;
}
.post-single__body ul li,
.post-single__body ol li {
padding-left: 2rem;
position: relative;
margin-bottom: 0.75rem;
}
.post-single__body ul li::before {
content: "//";
position: absolute;
left: 0;
top: 0;
color: var(--color-rescue-orange);
font-family: var(--font-mono);
font-weight: 700;
}
.post-single__body ol {
counter-reset: list-counter;
}
.post-single__body ol li {
counter-increment: list-counter;
}
.post-single__body ol li::before {
content: counter(list-counter, decimal-leading-zero) "_";
position: absolute;
left: 0;
top: 0;
color: var(--color-rescue-orange);
font-family: var(--font-mono);
font-weight: 700;
font-size: 0.875em;
}
/* Cytaty - duże, dramatyczne */
.post-single__body blockquote,
.post-single__body .wp-block-quote {
margin: 3rem 0;
padding: 2rem 0 2rem 2rem;
border-left: 6px solid var(--color-acid-yellow);
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(1.5rem, 3vw, 2.25rem);
line-height: 1.15;
letter-spacing: -0.02em;
text-transform: uppercase;
color: var(--color-smoky-black);
}
.post-single__body blockquote p,
.post-single__body .wp-block-quote p {
margin-bottom: 0.5rem;
}
.post-single__body blockquote cite,
.post-single__body .wp-block-quote cite {
display: block;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--color-rescue-orange);
font-style: normal;
margin-top: 1rem;
}
/* Pullquote - bardzo duży cytat wyciągnięty z tekstu */
.post-single__body .wp-block-pullquote {
margin: 4rem -2rem;
padding: 3rem 2rem;
border-top: 4px solid var(--color-smoky-black);
border-bottom: 4px solid var(--color-smoky-black);
text-align: center;
background: transparent;
}
.post-single__body .wp-block-pullquote p {
font-family: var(--font-display);
font-size: clamp(2rem, 5vw, 3.5rem);
font-weight: 700;
text-transform: uppercase;
letter-spacing: -0.03em;
line-height: 1;
color: var(--color-smoky-black);
margin-bottom: 0;
}
.post-single__body .wp-block-pullquote cite {
display: block;
margin-top: 1.5rem;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--color-rescue-orange);
font-style: normal;
}
/* Media w treści - obraz i embed tworzą JEDNĄ spójną kartę z podpisem */
.post-single__body img {
max-width: 100%;
height: auto;
}
/* Samodzielny obraz (poza ) - własna obwódka i odstęp */
.post-single__body > img,
.post-single__body p > img {
display: block;
margin: 3rem 0;
border: 1px solid var(--color-smoky-black);
}
@media (min-width: 1024px) {
/* Obraz może wystawać po bokach treści dla efektu WOW */
.post-single__body .alignwide,
.post-single__body .wp-block-image.alignwide {
margin-left: -4rem;
margin-right: -4rem;
max-width: calc(100% + 8rem);
}
.post-single__body .alignfull,
.post-single__body .wp-block-image.alignfull {
margin-left: calc(-50vw + 50%);
margin-right: calc(-50vw + 50%);
width: 100vw;
max-width: 100vw;
}
}
/* = karta: obwódka i margines TYLKO tutaj (nie na mediach w środku) */
.post-single__body figure {
margin: 3rem 0;
padding: 0;
max-width: 100%;
border: 1px solid var(--color-smoky-black);
}
/* Media w środku figure - przyklejone, bez własnego marginesu i obwódki */
.post-single__body figure img,
.post-single__body figure iframe,
.post-single__body figure video {
display: block;
margin: 0;
border: 0;
max-width: 100%;
height: auto;
}
/* Podpis - przyklejony do medium, jedna kreska dzieląca (border-top) */
.post-single__body figcaption {
margin: 0;
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.2em;
color: rgba(9,10,12,0.6);
padding: 0.75rem 1rem;
border-top: 1px solid var(--color-smoky-black);
background: var(--color-off-white);
}
/* Code */
.post-single__body code {
background: var(--color-smoky-black);
color: var(--color-acid-yellow);
padding: 0.125rem 0.375rem;
font-family: var(--font-mono);
font-size: 0.875em;
}
.post-single__body pre {
background: var(--color-smoky-black);
color: var(--color-acid-yellow);
padding: 1.5rem;
overflow-x: auto;
margin: 2rem 0;
border-left: 4px solid var(--color-acid-yellow);
}
.post-single__body pre code { background: transparent; padding: 0; }
/* Strong, em */
.post-single__body strong { font-weight: 700; color: var(--color-smoky-black); }
.post-single__body em { font-style: italic; }
/* hr / separator */
.post-single__body hr,
.post-single__body .wp-block-separator {
border: 0;
border-top: 2px dashed var(--color-smoky-black);
margin: 3rem 0;
width: 100%;
}
/* Tabela */
.post-single__body table {
width: 100%;
border-collapse: collapse;
margin: 2rem 0;
font-size: 0.9375rem;
}
.post-single__body th,
.post-single__body td {
padding: 0.75rem 1rem;
border: 1px solid var(--color-smoky-black);
text-align: left;
}
.post-single__body th {
background: var(--color-smoky-black);
color: var(--color-acid-yellow);
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.2em;
}
/* Embed (YouTube, Vimeo) - obwódkę ma figure, iframe przyklejony i bez baseline gap */
.post-single__body .wp-block-embed__wrapper {
margin: 0;
line-height: 0;
}
.post-single__body .wp-block-embed iframe {
display: block;
width: 100%;
aspect-ratio: 16/9;
border: 0;
}
/* Button block */
.post-single__body .wp-block-button__link {
background: var(--color-smoky-black);
color: var(--color-acid-yellow);
padding: 1rem 2rem;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.2em;
border-radius: 0;
background-image: none;
display: inline-block;
transition: background 0.2s, color 0.2s;
}
.post-single__body .wp-block-button__link:hover {
background: var(--color-rescue-orange);
color: var(--color-white);
background-image: none;
}
/* --- TAGS --- */
.post-single__tags {
margin-top: 3rem;
padding-top: 2rem;
border-top: 2px solid var(--color-smoky-black);
}
.post-single__tags-label {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--color-rescue-orange);
margin-bottom: 1rem;
}
.post-single__tags-list {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.post-single__tag {
display: inline-block;
padding: 0.5rem 0.875rem;
background: var(--color-smoky-black);
color: var(--color-acid-yellow);
font-family: var(--font-mono);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.2em;
transition: background 0.2s, color 0.2s;
}
.post-single__tag:hover { background: var(--color-rescue-orange); color: var(--color-white); }
/* --- SIDEBAR --- */
.post-single__sidebar {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
@media (min-width: 1024px) {
.post-single__sidebar {
position: sticky;
top: 80px;
align-self: flex-start;
max-height: calc(100vh - 100px);
overflow-y: auto;
}
}
.post-single__sidebar-card {
border: 1px solid var(--color-smoky-black);
padding: 1.5rem;
background: rgba(9,10,12,0.02);
}
.post-single__sidebar-label {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--color-rescue-orange);
padding-bottom: 0.75rem;
margin-bottom: 1rem;
border-bottom: 1px solid var(--color-smoky-black);
}
.post-single__sidebar-row {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 1rem;
padding: 0.625rem 0;
border-bottom: 1px dashed rgba(9,10,12,0.15);
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.post-single__sidebar-row:last-child { border-bottom: 0; }
.post-single__sidebar-key {
color: rgba(9,10,12,0.5);
flex-shrink: 0;
font-weight: 400;
}
.post-single__sidebar-val {
color: var(--color-smoky-black);
font-weight: 700;
text-align: right;
word-break: break-word;
}
a.post-single__sidebar-val { transition: color 0.2s; }
a.post-single__sidebar-val:hover { color: var(--color-rescue-orange); }
/* Share buttons */
.post-single__share {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.5rem;
}
.post-single__share-btn {
display: flex;
align-items: center;
justify-content: center;
padding: 0.75rem 0;
background: var(--color-smoky-black);
color: var(--color-acid-yellow);
font-family: var(--font-mono);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
transition: background 0.2s, color 0.2s;
}
.post-single__share-btn:hover { background: var(--color-rescue-orange); color: var(--color-white); }
/* --- RELATED --- */
.post-single__related {
background: var(--color-smoky-black);
color: var(--color-white);
padding: 4rem 1.5rem 5rem;
}
@media (min-width: 768px) { .post-single__related { padding: 5rem 3rem; } }
.post-single__related-header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 2.5rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid rgba(255,255,255,0.2);
gap: 1rem;
flex-wrap: wrap;
}
.post-single__related-title {
font-family: var(--font-display);
font-weight: 700;
text-transform: uppercase;
letter-spacing: -0.03em;
font-size: clamp(2rem, 5vw, 3rem);
color: var(--color-white);
}
.post-single__related-subtitle {
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--color-acid-yellow);
}
.post-single__related-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
}
@media (min-width: 640px) { .post-single__related-grid { grid-template-columns: repeat(3, 1fr); } }
.related-card {
display: block;
border: 1px solid rgba(255,255,255,0.2);
padding: 1.5rem;
color: var(--color-white);
transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.related-card:hover {
background: var(--color-acid-yellow);
color: var(--color-smoky-black);
border-color: var(--color-smoky-black);
}
.related-card__image {
margin-bottom: 1rem;
aspect-ratio: 16/10;
overflow: hidden;
border: 1px solid rgba(255,255,255,0.1);
}
.related-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(100%);
transition: filter 0.5s, transform 0.5s;
}
.related-card:hover .related-card__image img { filter: grayscale(0); transform: scale(1.05); }
.related-card__date {
font-family: var(--font-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--color-acid-yellow);
margin-bottom: 0.5rem;
}
.related-card:hover .related-card__date { color: var(--color-rescue-orange); }
.related-card__title {
font-size: 1.0625rem;
font-weight: 700;
text-transform: uppercase;
line-height: 1.2;
}
/* --- COMMENTS --- */
.post-single__comments {
background: var(--color-off-white);
padding: 4rem 1.5rem 6rem;
border-top: 1px solid var(--color-smoky-black);
}
@media (min-width: 768px) { .post-single__comments { padding: 5rem 3rem 6rem; } }
/* ============================================
STRONA KONTAKT v2 (template-kontakt.php)
Styl biznesowy, czytelny, bez cyber-poetyki
============================================ */
.kontakt-v2 {
background: var(--color-off-white);
color: var(--color-smoky-black);
padding-top: 48px; /* offset pod fixed header */
}
/* Wspólne elementy: section tag, section title */
.kontakt-v2__section-tag {
display: inline-block;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.3em;
color: var(--color-rescue-orange);
padding-bottom: 0.5rem;
border-bottom: 2px solid var(--color-rescue-orange);
margin-bottom: 1.5rem;
}
.kontakt-v2__section-tag--light {
color: var(--color-acid-yellow);
border-bottom-color: var(--color-acid-yellow);
}
.kontakt-v2__section-title {
font-family: var(--font-display);
font-weight: 700;
text-transform: uppercase;
letter-spacing: -0.03em;
line-height: 0.95;
font-size: clamp(2rem, 5.5vw, 4rem);
color: var(--color-smoky-black);
margin-bottom: 1rem;
}
.kontakt-v2__section-subtitle {
font-size: 1.0625rem;
line-height: 1.6;
color: rgba(9,10,12,0.7);
max-width: 640px;
margin-bottom: 0;
}
/* ----- HERO ----- */
.kontakt-v2__hero {
background: var(--color-off-white);
padding: 5rem 1.5rem 4rem;
border-bottom: 1px solid var(--color-smoky-black);
}
@media (min-width: 768px) { .kontakt-v2__hero { padding: 7rem 3rem 5rem; } }
.kontakt-v2__hero-pretitle {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.3em;
color: var(--color-rescue-orange);
margin-bottom: 2rem;
}
.kontakt-v2__hero-title {
font-family: var(--font-display);
font-weight: 700;
letter-spacing: -0.05em;
line-height: 0.9;
font-size: clamp(4rem, 14vw, 10rem);
color: var(--color-smoky-black);
margin-bottom: 2rem;
}
.kontakt-v2__hero-intro {
font-size: clamp(1.125rem, 1.8vw, 1.375rem);
line-height: 1.5;
color: var(--color-smoky-black);
max-width: 720px;
margin-bottom: 3rem;
font-weight: 400;
}
/* Hero paths - dwie ścieżki */
.kontakt-v2__hero-paths {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
max-width: 900px;
}
@media (min-width: 768px) {
.kontakt-v2__hero-paths { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
}
.kontakt-v2__path {
display: grid;
grid-template-areas: "label arrow" "sub sub";
grid-template-columns: 1fr auto;
gap: 0.25rem 1rem;
padding: 1.75rem;
border: 2px solid var(--color-smoky-black);
transition: all 0.2s ease-out;
text-decoration: none;
}
.kontakt-v2__path-label {
grid-area: label;
font-family: var(--font-sans);
font-size: 1.25rem;
font-weight: 700;
color: var(--color-smoky-black);
}
.kontakt-v2__path-arrow {
grid-area: arrow;
font-family: var(--font-mono);
font-size: 1.5rem;
color: var(--color-smoky-black);
transition: transform 0.2s;
}
.kontakt-v2__path-sub {
grid-area: sub;
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.15em;
color: rgba(9,10,12,0.6);
}
.kontakt-v2__path:hover { transform: translateY(-2px); }
.kontakt-v2__path:hover .kontakt-v2__path-arrow { transform: translateX(4px); }
.kontakt-v2__path--primary {
background: var(--color-acid-yellow);
border-color: var(--color-smoky-black);
}
.kontakt-v2__path--primary:hover {
background: var(--color-smoky-black);
}
.kontakt-v2__path--primary:hover .kontakt-v2__path-label,
.kontakt-v2__path--primary:hover .kontakt-v2__path-arrow {
color: var(--color-acid-yellow);
}
.kontakt-v2__path--primary:hover .kontakt-v2__path-sub {
color: rgba(225,255,0,0.7);
}
.kontakt-v2__path--secondary {
background: var(--color-off-white);
}
.kontakt-v2__path--secondary:hover {
background: var(--color-smoky-black);
}
.kontakt-v2__path--secondary:hover .kontakt-v2__path-label,
.kontakt-v2__path--secondary:hover .kontakt-v2__path-arrow {
color: var(--color-white);
}
.kontakt-v2__path--secondary:hover .kontakt-v2__path-sub {
color: rgba(255,255,255,0.6);
}
/* ----- STATS ----- */
.kontakt-v2__stats {
background: var(--color-smoky-black);
color: var(--color-white);
padding: 3rem 1.5rem;
border-bottom: 1px solid var(--color-smoky-black);
}
@media (min-width: 768px) { .kontakt-v2__stats { padding: 4rem 3rem; } }
.kontakt-v2__stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
@media (min-width: 768px) { .kontakt-v2__stats-grid { gap: 2rem; } }
.kontakt-v2__stat {
border-left: 2px solid var(--color-acid-yellow);
padding-left: 1rem;
}
@media (min-width: 768px) { .kontakt-v2__stat { padding-left: 1.5rem; } }
.kontakt-v2__stat-value {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(2rem, 5vw, 3.5rem);
line-height: 1;
color: var(--color-acid-yellow);
letter-spacing: -0.03em;
margin-bottom: 0.5rem;
}
.kontakt-v2__stat-label {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.15em;
color: rgba(255,255,255,0.7);
line-height: 1.4;
}
/* ----- ZASADY (RULES) ----- */
.kontakt-v2__rules {
background: var(--color-off-white);
padding: 5rem 1.5rem;
border-bottom: 1px solid var(--color-smoky-black);
}
@media (min-width: 768px) { .kontakt-v2__rules { padding: 7rem 3rem; } }
.kontakt-v2__rules-header { margin-bottom: 3.5rem; max-width: 800px; }
.kontakt-v2__rules-list {
display: grid;
grid-template-columns: 1fr;
gap: 2.5rem;
max-width: 1000px;
}
.kontakt-v2__rule {
display: grid;
grid-template-columns: auto 1fr;
gap: 1.5rem;
padding-bottom: 2rem;
border-bottom: 1px dashed rgba(9,10,12,0.2);
}
.kontakt-v2__rule:last-child { border-bottom: 0; padding-bottom: 0; }
@media (min-width: 768px) {
.kontakt-v2__rule { gap: 2.5rem; }
}
.kontakt-v2__rule-num {
font-family: var(--font-mono);
font-size: clamp(1.5rem, 3vw, 2.5rem);
font-weight: 700;
color: var(--color-rescue-orange);
line-height: 1;
letter-spacing: -0.05em;
min-width: 60px;
}
.kontakt-v2__rule-content {}
.kontakt-v2__rule-title {
font-family: var(--font-sans);
font-size: clamp(1.25rem, 2.2vw, 1.625rem);
font-weight: 700;
color: var(--color-smoky-black);
margin-bottom: 0.625rem;
line-height: 1.25;
letter-spacing: -0.01em;
}
.kontakt-v2__rule-body {
font-size: 1rem;
line-height: 1.6;
color: rgba(9,10,12,0.75);
max-width: 720px;
margin: 0;
}
/* ----- WSPÓŁPRACA ----- */
.kontakt-v2__coop {
background: var(--color-smoky-black);
color: var(--color-white);
padding: 5rem 1.5rem;
}
@media (min-width: 768px) { .kontakt-v2__coop { padding: 7rem 3rem; } }
.kontakt-v2__coop .kontakt-v2__section-title { color: var(--color-white); }
.kontakt-v2__coop .kontakt-v2__section-subtitle { color: rgba(255,255,255,0.65); }
.kontakt-v2__coop .kontakt-v2__section-tag {
color: var(--color-acid-yellow);
border-bottom-color: var(--color-acid-yellow);
}
.kontakt-v2__coop-header { margin-bottom: 3.5rem; max-width: 800px; }
.kontakt-v2__coop-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1px;
background: rgba(255,255,255,0.15);
border: 1px solid rgba(255,255,255,0.15);
}
@media (min-width: 1024px) { .kontakt-v2__coop-grid { grid-template-columns: repeat(3, 1fr); } }
.kontakt-v2__coop-item {
background: var(--color-smoky-black);
padding: 2.5rem 2rem;
display: flex;
flex-direction: column;
transition: background 0.3s;
}
.kontakt-v2__coop-item:hover {
background: rgba(225,255,0,0.04);
}
.kontakt-v2__coop-tag {
display: inline-block;
align-self: flex-start;
font-family: var(--font-mono);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.25em;
color: var(--color-smoky-black);
background: var(--color-acid-yellow);
padding: 0.25rem 0.625rem;
margin-bottom: 1.5rem;
}
.kontakt-v2__coop-title {
font-family: var(--font-sans);
font-size: 1.375rem;
font-weight: 700;
color: var(--color-white);
margin-bottom: 1rem;
line-height: 1.25;
letter-spacing: -0.01em;
}
.kontakt-v2__coop-body {
font-size: 0.9375rem;
line-height: 1.6;
color: rgba(255,255,255,0.7);
margin-bottom: 1.25rem;
flex-grow: 1;
}
.kontakt-v2__coop-note {
padding-top: 1.25rem;
border-top: 1px dashed rgba(255,255,255,0.15);
font-family: var(--font-mono);
font-size: 11px;
font-style: normal;
color: var(--color-acid-yellow);
text-transform: uppercase;
letter-spacing: 0.15em;
line-height: 1.5;
display: flex;
gap: 0.5rem;
}
.kontakt-v2__coop-note span {
flex-shrink: 0;
opacity: 0.6;
}
/* ----- CTA BIG ----- */
.kontakt-v2__cta {
background: var(--color-acid-yellow);
color: var(--color-smoky-black);
padding: 5rem 1.5rem;
border-top: 1px solid var(--color-smoky-black);
border-bottom: 1px solid var(--color-smoky-black);
position: relative;
overflow: hidden;
}
@media (min-width: 768px) { .kontakt-v2__cta { padding: 7rem 3rem; } }
.kontakt-v2__cta::before {
content: "";
position: absolute;
inset: 0;
background-image: radial-gradient(rgba(9,10,12,0.06) 1.5px, transparent 1.5px);
background-size: 32px 32px;
pointer-events: none;
}
.kontakt-v2__cta .kontakt-v2__section-tag {
color: var(--color-smoky-black);
border-bottom-color: var(--color-smoky-black);
}
.kontakt-v2__cta-inner {
position: relative;
display: grid;
grid-template-columns: 1fr;
gap: 3rem;
align-items: center;
}
@media (min-width: 1024px) {
.kontakt-v2__cta-inner { grid-template-columns: 5fr 6fr; gap: 4rem; }
}
.kontakt-v2__cta-title {
font-family: var(--font-display);
font-weight: 700;
letter-spacing: -0.04em;
line-height: 0.9;
font-size: clamp(2.5rem, 7vw, 5rem);
color: var(--color-smoky-black);
margin-bottom: 1.25rem;
}
.kontakt-v2__cta-text {
font-size: 1.0625rem;
line-height: 1.55;
color: rgba(9,10,12,0.8);
max-width: 32rem;
}
.kontakt-v2__cta-btn {
display: grid;
grid-template-areas: "label arrow" "email arrow";
grid-template-columns: 1fr auto;
align-items: center;
gap: 0.25rem 1.5rem;
background: var(--color-smoky-black);
color: var(--color-acid-yellow);
padding: 2rem 2rem;
border: 2px solid var(--color-smoky-black);
text-decoration: none;
transition: all 0.2s;
margin-bottom: 1.5rem;
}
.kontakt-v2__cta-btn:hover {
background: var(--color-rescue-orange);
border-color: var(--color-rescue-orange);
color: var(--color-white);
}
.kontakt-v2__cta-btn-label {
grid-area: label;
font-family: var(--font-sans);
font-size: 1.375rem;
font-weight: 700;
}
.kontakt-v2__cta-btn-email {
grid-area: email;
font-family: var(--font-mono);
font-size: 13px;
letter-spacing: 0.05em;
opacity: 0.75;
word-break: break-all;
}
.kontakt-v2__cta-btn-arrow {
grid-area: arrow;
font-family: var(--font-mono);
font-size: 2.5rem;
line-height: 1;
transition: transform 0.2s;
}
.kontakt-v2__cta-btn:hover .kontakt-v2__cta-btn-arrow { transform: translateX(6px); }
.kontakt-v2__cta-phone {
font-family: var(--font-mono);
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.15em;
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1rem;
}
.kontakt-v2__cta-phone-label { opacity: 0.6; }
.kontakt-v2__cta-phone-num {
color: var(--color-smoky-black);
font-weight: 700;
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 4px;
}
/* ----- FORMULARZ SEKCJA ----- */
.kontakt-v2__form-section {
background: var(--color-off-white);
padding: 5rem 1.5rem;
border-bottom: 1px solid var(--color-smoky-black);
}
@media (min-width: 768px) { .kontakt-v2__form-section { padding: 7rem 3rem; } }
.kontakt-v2__form-header { margin-bottom: 3rem; max-width: 700px; }
.kontakt-v2__form-wrap { max-width: 700px; }
/* Styl pól Contact Form 7 / WPForms - przykryjemy domyślny styl */
.kontakt-v2__form-wrap input[type="text"],
.kontakt-v2__form-wrap input[type="email"],
.kontakt-v2__form-wrap input[type="tel"],
.kontakt-v2__form-wrap textarea,
.kontakt-v2__form-wrap select {
width: 100%;
background: var(--color-white);
border: 2px solid var(--color-smoky-black);
padding: 0.875rem 1rem;
font-family: var(--font-sans);
font-size: 1rem;
color: var(--color-smoky-black);
border-radius: 0;
margin-bottom: 1rem;
}
.kontakt-v2__form-wrap input:focus,
.kontakt-v2__form-wrap textarea:focus {
outline: none;
border-color: var(--color-rescue-orange);
}
.kontakt-v2__form-wrap input[type="submit"],
.kontakt-v2__form-wrap button[type="submit"] {
background: var(--color-smoky-black);
color: var(--color-acid-yellow);
border: 0;
padding: 1rem 2rem;
font-family: var(--font-mono);
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.2em;
cursor: pointer;
}
.kontakt-v2__form-wrap input[type="submit"]:hover,
.kontakt-v2__form-wrap button[type="submit"]:hover {
background: var(--color-rescue-orange);
color: var(--color-white);
}
/* ----- DLA CZYTELNIKÓW ----- */
.kontakt-v2__readers {
background: var(--color-off-white);
padding: 5rem 1.5rem;
border-bottom: 1px solid var(--color-smoky-black);
}
@media (min-width: 768px) { .kontakt-v2__readers { padding: 7rem 3rem; } }
.kontakt-v2__readers-inner { max-width: 800px; }
.kontakt-v2__readers-title {
font-family: var(--font-display);
font-weight: 700;
text-transform: uppercase;
letter-spacing: -0.03em;
line-height: 0.95;
font-size: clamp(2rem, 5vw, 3.5rem);
margin-bottom: 1.5rem;
}
.kontakt-v2__readers-text {
font-size: 1.0625rem;
line-height: 1.65;
color: rgba(9,10,12,0.8);
margin-bottom: 1.25rem;
}
.kontakt-v2__readers-text strong {
color: var(--color-smoky-black);
font-weight: 700;
background: linear-gradient(var(--color-acid-yellow), var(--color-acid-yellow));
background-size: 100% 0.4em;
background-position: 0 85%;
background-repeat: no-repeat;
padding: 0 2px;
}
.kontakt-v2__readers-social {
margin-top: 2rem;
padding-top: 2rem;
border-top: 1px dashed rgba(9,10,12,0.2);
}
.kontakt-v2__readers-social-label {
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.2em;
color: rgba(9,10,12,0.5);
margin-bottom: 1rem;
}
.kontakt-v2__readers-social-grid {
display: flex;
flex-wrap: wrap;
gap: 0.625rem;
}
.kontakt-v2__readers-social-link {
padding: 0.625rem 1rem;
background: var(--color-smoky-black);
color: var(--color-acid-yellow);
font-family: var(--font-mono);
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.15em;
transition: background 0.2s, color 0.2s;
}
.kontakt-v2__readers-social-link:hover {
background: var(--color-rescue-orange);
color: var(--color-white);
}
/* ----- OUTRO ----- */
.kontakt-v2__outro {
background: var(--color-smoky-black);
color: var(--color-white);
padding: 4rem 1.5rem 5rem;
text-align: center;
}
@media (min-width: 768px) { .kontakt-v2__outro { padding: 5rem 3rem 6rem; } }
.kontakt-v2__outro-text {
font-size: clamp(1.125rem, 1.8vw, 1.5rem);
line-height: 1.5;
color: rgba(255,255,255,0.85);
max-width: 800px;
margin: 0 auto 2.5rem;
font-style: italic;
}
.kontakt-v2__outro-sign {
font-family: var(--font-mono);
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--color-acid-yellow);
}
/* ============================================
SOCIAL SHARE BUTTONS
Spójny styl dla różnych wtyczek (Jetpack, Sassy, AddToAny, ShareThis)
============================================ */
/* Wspólny kontener - sekcja share */
.sharedaddy,
.sharedaddy *,
.sd-content,
.sd-sharing,
.ssba-wrap,
.heateor_sss_sharing_container,
.a2a_kit {
font-family: var(--font-mono) !important;
}
.sharedaddy h3.sd-title,
.sd-title {
font-family: var(--font-mono) !important;
font-size: 11px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.2em !important;
color: var(--color-rescue-orange) !important;
margin-bottom: 1rem !important;
border: none !important;
}
.sharedaddy h3.sd-title::before { display: none !important; }
/* Kontener przycisków */
.sd-content > ul,
.sd-sharing > ul,
.sd-social-icon-text > ul,
.sd-social-text > ul {
display: flex !important;
flex-wrap: wrap !important;
gap: 0.5rem !important;
padding: 0 !important;
margin: 0 !important;
list-style: none !important;
}
/* Pojedynczy przycisk share - bazowy reset */
.sd-content li,
.sd-sharing li,
.ssba-wrap a,
.sd-button,
.sharedaddy .sd-button {
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
background: none !important;
}
/* Przycisk - styl Acid Alpinism */
.sd-content a.sd-button,
.sd-content a,
.sharedaddy a.sd-button,
.sharedaddy .sd-content li > a,
.ssba-wrap a,
.heateor_sss_button_instagram > a,
.a2a_button_facebook,
.a2a_button_twitter,
.a2a_button_linkedin,
.a2a_button_pinterest {
display: inline-flex !important;
align-items: center !important;
gap: 0.5rem !important;
padding: 0.625rem 1rem !important;
background: var(--color-off-white) !important;
color: var(--color-smoky-black) !important;
border: 2px solid var(--color-smoky-black) !important;
border-bottom: 6px solid var(--color-acid-yellow) !important;
font-family: var(--font-mono) !important;
font-size: 12px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.1em !important;
text-decoration: none !important;
border-radius: 0 !important;
box-shadow: none !important;
transition: all 0.15s ease-out !important;
cursor: pointer !important;
}
.sd-content a.sd-button:hover,
.sd-content a:hover,
.sharedaddy a.sd-button:hover,
.ssba-wrap a:hover,
.a2a_button_facebook:hover,
.a2a_button_twitter:hover,
.a2a_button_linkedin:hover,
.a2a_button_pinterest:hover {
background: var(--color-acid-yellow) !important;
color: var(--color-smoky-black) !important;
border-bottom-color: var(--color-smoky-black) !important;
transform: translateY(-1px);
}
/* Ikony w środku */
.sd-content .genericon,
.sd-content svg,
.sharedaddy svg,
.sharedaddy .genericon,
.a2a_button_facebook svg,
.a2a_button_twitter svg {
width: 16px !important;
height: 16px !important;
fill: currentColor !important;
color: currentColor !important;
background: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* Tekst etykiety wewnątrz przycisku */
.sd-content .share-text,
.sharedaddy .share-text {
display: inline !important;
font-family: var(--font-mono) !important;
font-size: 12px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.1em !important;
color: currentColor !important;
background: none !important;
padding: 0 !important;
margin: 0 !important;
}
/* Like button (osobny - z licznikiem) */
.sd-block.sd-like a,
.wp-likes a,
.sd-like-content a {
display: inline-flex !important;
align-items: center !important;
gap: 0.5rem !important;
}
.sd-like .count {
background: rgba(9,10,12,0.08) !important;
color: var(--color-smoky-black) !important;
border-radius: 999px !important;
padding: 0.125rem 0.5rem !important;
font-size: 10px !important;
font-family: var(--font-mono) !important;
font-weight: 700 !important;
margin-left: 0.5rem !important;
}
/* AddToAny */
.a2a_kit a.a2a_button_facebook,
.a2a_kit a.a2a_button_twitter,
.a2a_kit a.a2a_button_linkedin,
.a2a_kit a.a2a_button_pinterest {
margin-right: 0.5rem !important;
margin-bottom: 0.5rem !important;
}
/* ============================================
KOMENTARZE - styl Acid Alpinism
============================================ */
.post-single__comments {
background: var(--color-off-white);
color: var(--color-smoky-black);
padding: 5rem 1.5rem 6rem;
border-top: 2px solid var(--color-smoky-black);
}
@media (min-width: 768px) {
.post-single__comments { padding: 6rem 3rem 8rem; }
}
.post-single__comments .container-wide {
max-width: 820px;
}
.comments-area {
margin-top: 0;
}
.comments-area > h3,
.comments-title,
#reply-title {
font-family: var(--font-mono) !important;
font-size: 12px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.3em !important;
color: var(--color-rescue-orange) !important;
margin: 0 0 2rem !important;
padding-bottom: 1rem;
border-bottom: 2px solid var(--color-smoky-black);
}
#reply-title {
margin-top: 3rem !important;
}
/* Lista komentarzy */
.comment-list {
list-style: none !important;
padding: 0 !important;
margin: 0 0 3rem !important;
}
.comment-list .comment,
.comment-list .pingback,
.comment-list .trackback {
list-style: none !important;
margin-bottom: 2rem !important;
padding-bottom: 2rem !important;
border-bottom: 1px dashed rgba(9,10,12,0.15) !important;
}
.comment-list .comment:last-child { border-bottom: none !important; }
.comment-list .children {
list-style: none !important;
padding: 1.5rem 0 0 1.5rem !important;
margin-top: 1.5rem !important;
border-left: 2px solid var(--color-acid-yellow) !important;
}
@media (min-width: 768px) {
.comment-list .children { padding-left: 2rem !important; }
}
/* Body komentarza */
.comment-body {
background: transparent;
padding: 0;
}
/* Meta: avatar + autor + data */
.comment-meta,
.comment-author {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.75rem;
flex-wrap: wrap;
}
.comment-author .avatar,
.comment .avatar {
border-radius: 0 !important;
border: 2px solid var(--color-smoky-black);
width: 40px !important;
height: 40px !important;
filter: grayscale(100%) contrast(1.1);
}
.comment-author .fn,
.comment-author b,
.comment-author cite {
font-family: var(--font-mono) !important;
font-size: 12px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.1em !important;
color: var(--color-smoky-black) !important;
font-style: normal !important;
}
.comment-author a {
color: var(--color-smoky-black) !important;
text-decoration: none !important;
border-bottom: 1px solid var(--color-smoky-black);
}
.comment-author a:hover {
color: var(--color-rescue-orange) !important;
border-bottom-color: var(--color-rescue-orange);
}
.comment-meta a,
.comment-metadata,
.comment-metadata a {
font-family: var(--font-mono) !important;
font-size: 10px !important;
text-transform: uppercase !important;
letter-spacing: 0.2em !important;
color: rgba(9,10,12,0.5) !important;
text-decoration: none !important;
}
.comment-metadata a:hover { color: var(--color-rescue-orange) !important; }
/* Treść komentarza */
.comment-content {
margin: 0.75rem 0 1rem 0;
font-size: 1rem;
line-height: 1.6;
color: var(--color-smoky-black);
}
.comment-content p {
margin-bottom: 0.75rem;
}
.comment-content p:last-child { margin-bottom: 0; }
.comment-content a {
color: var(--color-rescue-orange);
text-decoration: underline;
text-underline-offset: 3px;
}
.comment-content blockquote {
border-left: 3px solid var(--color-acid-yellow);
padding: 0.5rem 0 0.5rem 1rem;
margin: 0.75rem 0;
background: rgba(225,255,0,0.08);
}
/* Przycisk "Odpowiedz" */
.comment-reply-link,
.reply a {
display: inline-block !important;
font-family: var(--font-mono) !important;
font-size: 10px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.2em !important;
color: var(--color-smoky-black) !important;
background: transparent !important;
border: 1px solid var(--color-smoky-black) !important;
padding: 0.5rem 0.875rem !important;
text-decoration: none !important;
border-radius: 0 !important;
transition: all 0.15s ease-out !important;
margin-top: 0.5rem;
}
.comment-reply-link:hover,
.reply a:hover {
background: var(--color-smoky-black) !important;
color: var(--color-acid-yellow) !important;
}
/* Edit link */
.comment-edit-link {
margin-left: 0.5rem;
font-family: var(--font-mono) !important;
font-size: 10px !important;
text-transform: uppercase !important;
letter-spacing: 0.2em !important;
color: rgba(9,10,12,0.4) !important;
}
/* Bypass / Moderation msg */
.comment-awaiting-moderation {
display: inline-block;
background: var(--color-rescue-orange);
color: var(--color-white);
padding: 0.25rem 0.625rem;
font-family: var(--font-mono);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.2em;
margin-bottom: 0.75rem;
}
/* ============================================
FORMULARZ KOMENTARZA
============================================ */
.comment-respond,
#respond {
margin-top: 3rem;
padding: 2rem;
border: 2px solid var(--color-smoky-black);
background: rgba(9,10,12,0.02);
}
.comment-form,
#commentform {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.comment-form-comment,
.comment-form-author,
.comment-form-email,
.comment-form-url,
.comment-form-cookies-consent {
margin: 0 !important;
}
.comment-form label {
display: block;
font-family: var(--font-mono);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--color-smoky-black);
margin-bottom: 0.5rem;
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea,
#commentform input[type="text"],
#commentform input[type="email"],
#commentform input[type="url"],
#commentform textarea {
width: 100% !important;
background: var(--color-white) !important;
border: 2px solid var(--color-smoky-black) !important;
padding: 0.875rem 1rem !important;
font-family: var(--font-mono) !important;
font-size: 13px !important;
color: var(--color-smoky-black) !important;
border-radius: 0 !important;
box-shadow: none !important;
transition: border-color 0.15s !important;
}
.comment-form textarea,
#commentform textarea {
font-family: var(--font-sans) !important;
font-size: 15px !important;
line-height: 1.5 !important;
resize: vertical;
min-height: 140px;
}
.comment-form input:focus,
.comment-form textarea:focus {
outline: none !important;
border-color: var(--color-rescue-orange) !important;
}
/* Wymagane * */
.comment-form .required,
.comment-form .required-field-message {
color: var(--color-rescue-orange);
}
/* Cookies consent checkbox */
.comment-form-cookies-consent {
display: flex !important;
align-items: flex-start;
gap: 0.5rem;
flex-direction: row !important;
}
.comment-form-cookies-consent input[type="checkbox"] {
margin-top: 0.25rem;
accent-color: var(--color-rescue-orange);
}
.comment-form-cookies-consent label {
font-family: var(--font-sans) !important;
font-size: 13px !important;
font-weight: 400 !important;
letter-spacing: 0 !important;
text-transform: none !important;
line-height: 1.5;
color: rgba(9,10,12,0.7);
}
/* Submit button */
.comment-form .submit,
.comment-form input[type="submit"],
#commentform input[type="submit"] {
background: var(--color-smoky-black) !important;
color: var(--color-acid-yellow) !important;
border: none !important;
padding: 1rem 2rem !important;
font-family: var(--font-mono) !important;
font-size: 12px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.2em !important;
border-radius: 0 !important;
cursor: pointer !important;
transition: background 0.15s, color 0.15s !important;
align-self: flex-start;
}
.comment-form .submit:hover,
.comment-form input[type="submit"]:hover {
background: var(--color-rescue-orange) !important;
color: var(--color-white) !important;
}
/* Logged in as */
.logged-in-as {
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.15em;
color: rgba(9,10,12,0.6);
margin-bottom: 1rem;
}
.logged-in-as a {
color: var(--color-smoky-black);
border-bottom: 1px solid var(--color-smoky-black);
}
/* "Must be logged in" */
.must-log-in {
font-family: var(--font-mono);
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.15em;
}
.must-log-in a {
color: var(--color-rescue-orange);
font-weight: 700;
}
/* Comment nav (older / newer) */
.comment-navigation,
.comments-pagination,
.comment-pagination {
margin-top: 2rem;
display: flex;
justify-content: space-between;
gap: 1rem;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.2em;
}
.comment-navigation a,
.comments-pagination a {
color: var(--color-smoky-black);
border: 1px solid var(--color-smoky-black);
padding: 0.625rem 1rem;
text-decoration: none;
transition: all 0.15s;
}
.comment-navigation a:hover {
background: var(--color-smoky-black);
color: var(--color-acid-yellow);
}
/* No comments */
.no-comments {
font-family: var(--font-mono);
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.2em;
color: rgba(9,10,12,0.5);
padding: 2rem;
border: 1px dashed rgba(9,10,12,0.2);
text-align: center;
}
/* ============================================
MOBILE SAFETY - łamanie długich podpisów
(np. PSYCHOLOGIA_STRACH_WYTRZYMAŁOŚĆ)
============================================ */
.blog-section__title,
.blog-section__desc,
.summit-log__subtitle,
.recovery__subtitle,
.video-section__subtitle,
.video-section__meta,
.about__profile-tag,
.summit-log__stats,
.blog-grid-standard__post-title,
.blog-grid-featured__title,
.summit-table__name,
.recovery__card-name {
word-break: break-word;
overflow-wrap: break-word;
max-width: 100%;
}
/* Zapobiega poziomemu scrollowi na całej stronie */
/* clip zamiast hidden: nie tworzy kontenera przewijania, więc position: sticky działa (od 1.4.0) */
html, body { max-width: 100%; overflow-x: clip; }
@media (max-width: 480px) {
.summit-log__subtitle,
.recovery__subtitle,
.video-section__subtitle {
letter-spacing: 0.1em;
}
}
/* ============================================
SINGLE BOOK - RAW (treść z Gutenberga, bez layoutu motywu)
============================================ */
.book-single-raw {
padding-top: 48px; /* offset pod fixed header */
background: #090A0C;
min-height: 60vh;
min-height: 60svh;
}
/* ============================================
CTA POD KSIĄŻKĄ (łapanie leadów)
============================================ */
.book-cta {
background: #E1FF00;
color: #090A0C;
padding: 72px 24px 80px;
border-top: 2px solid #090A0C;
position: relative;
overflow: hidden;
}
@media (min-width: 768px) { .book-cta { padding: 96px 48px; } }
.book-cta::before {
content: "";
position: absolute; inset: 0;
background-image: radial-gradient(rgba(9,10,12,0.06) 1.5px, transparent 1.5px);
background-size: 32px 32px;
pointer-events: none;
}
.book-cta__inner {
position: relative;
max-width: 800px;
margin: 0 auto;
text-align: center;
}
.book-cta__tag {
font-family: var(--font-mono);
font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.3em;
color: #FF4500;
margin-bottom: 24px;
}
.book-cta__title {
font-family: var(--font-display);
font-weight: 700; text-transform: uppercase;
letter-spacing: -0.03em; line-height: 0.95;
font-size: clamp(28px, 5vw, 52px);
color: #090A0C;
margin: 0 0 20px;
}
.book-cta__text {
font-size: clamp(16px, 1.6vw, 19px);
line-height: 1.55;
color: rgba(9,10,12,0.8);
max-width: 620px;
margin: 0 auto 36px;
}
.book-cta__actions {
display: flex;
flex-wrap: wrap;
gap: 16px;
justify-content: center;
margin-bottom: 24px;
}
.book-cta__btn {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 18px 32px;
font-family: var(--font-mono);
font-size: 13px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.15em;
text-decoration: none;
transition: all 0.2s;
border: 2px solid #090A0C;
}
.book-cta__btn--primary {
background: #090A0C; color: #E1FF00;
}
.book-cta__btn--primary:hover {
background: #FF4500; border-color: #FF4500; color: #fff;
}
.book-cta__btn--primary:hover .book-cta__btn-arrow { transform: translateX(5px); }
.book-cta__btn-arrow { font-family: var(--font-mono); transition: transform 0.2s; }
.book-cta__btn--secondary {
background: transparent; color: #090A0C;
}
.book-cta__btn--secondary:hover {
background: #090A0C; color: #E1FF00;
}
.book-cta__note {
font-family: var(--font-mono);
font-size: 11px; text-transform: uppercase; letter-spacing: 0.15em;
color: rgba(9,10,12,0.55);
}
/* ============================================
FIX: CENTROWANIE SHARE BUTTONS (socjale)
============================================ */
.sd-content > ul,
.sd-sharing > ul,
.sd-social-icon-text > ul,
.sd-social-text > ul,
.jetpack-sharing-buttons__services-list,
.wp-block-jetpack-sharing-buttons,
.aa-bs-body .sd-content ul,
.book-single-raw .sd-content ul,
.book-single-raw .sharedaddy .sd-content ul {
justify-content: center !important;
align-items: center !important;
}
/* Kontener share - wycentruj cały blok */
.book-single-raw .sharedaddy,
.book-single-raw .sd-block,
.aa-bs-body .sharedaddy {
text-align: center !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
}
.book-single-raw .sharedaddy .sd-content,
.aa-bs-body .sharedaddy .sd-content {
width: 100%;
display: flex;
justify-content: center;
}
/* ============================================
STRONA BIBLIOTEKA (template-biblioteka.php)
============================================ */
.biblioteka {
background: var(--color-smoky-black);
color: var(--color-off-white);
padding-top: 48px;
}
/* Hero */
.biblioteka__hero {
padding: 80px 24px 56px;
border-bottom: 1px solid rgba(255,255,255,0.15);
}
@media (min-width: 768px) { .biblioteka__hero { padding: 112px 48px 64px; } }
.biblioteka__pretitle {
font-family: var(--font-mono);
font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.3em;
color: var(--color-acid-yellow);
margin: 0 0 24px;
}
.biblioteka__title {
font-family: var(--font-display);
font-weight: 700; letter-spacing: -0.05em; line-height: 0.9;
font-size: clamp(60px, 14vw, 160px);
text-transform: uppercase;
color: var(--color-off-white);
margin: 0 0 28px;
}
.biblioteka__lead {
font-size: clamp(17px, 1.6vw, 21px);
line-height: 1.5;
max-width: 720px;
color: rgba(255,255,255,0.8);
margin: 0 0 32px;
}
.biblioteka__lead p { margin: 0 0 16px; }
.biblioteka__lead p:last-child { margin-bottom: 0; }
.biblioteka__meta {
display: flex; flex-wrap: wrap; gap: 32px;
font-family: var(--font-mono);
font-size: 11px; text-transform: uppercase; letter-spacing: 0.2em;
}
.biblioteka__meta-row { display: flex; gap: 12px; }
.biblioteka__meta-key { color: rgba(225,255,0,0.6); }
.biblioteka__meta-val { color: var(--color-off-white); font-weight: 700; }
/* Lista książek */
.biblioteka__list {
padding: 64px 24px 96px;
}
@media (min-width: 768px) { .biblioteka__list { padding: 80px 48px 112px; } }
.biblioteka__empty {
text-align: center; padding: 64px 24px;
font-family: var(--font-mono);
text-transform: uppercase; letter-spacing: 0.2em;
color: rgba(255,255,255,0.4);
}
.biblioteka__grid {
display: grid; grid-template-columns: 1fr;
gap: 1.5rem;
}
@media (min-width: 640px) { .biblioteka__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .biblioteka__grid { grid-template-columns: repeat(3, 1fr); } }
/* Karta książki */
.biblioteka__card {
background: var(--color-smoky-black);
border: 1px solid rgba(255,255,255,0.15);
padding: 28px;
display: flex; flex-direction: column;
text-decoration: none;
color: var(--color-off-white);
transition: background 0.3s, color 0.3s, border-color 0.3s, transform 0.2s;
}
.biblioteka__card:hover {
background: var(--color-acid-yellow);
color: var(--color-smoky-black);
border-color: var(--color-smoky-black);
transform: translateY(-2px);
text-decoration: none;
}
.biblioteka__card-num {
font-family: var(--font-mono);
font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.25em;
color: var(--color-acid-yellow);
margin-bottom: 16px;
opacity: 0.7;
}
.biblioteka__card:hover .biblioteka__card-num {
color: var(--color-smoky-black);
opacity: 0.9;
}
.biblioteka__card-cover {
aspect-ratio: 2/3;
overflow: hidden;
background: #1a1a1f;
border: 1px solid rgba(255,255,255,0.2);
margin-bottom: 20px;
display: flex; align-items: center; justify-content: center;
}
.biblioteka__card:hover .biblioteka__card-cover {
border-color: var(--color-smoky-black);
}
.biblioteka__card-cover img {
width: 100%; height: 100%; object-fit: cover;
filter: grayscale(100%) contrast(1.1);
transition: filter 0.5s, transform 0.5s;
display: block;
}
.biblioteka__card:hover .biblioteka__card-cover img {
filter: grayscale(0) contrast(1);
transform: scale(1.04);
}
.biblioteka__card-cover-empty {
font-family: var(--font-mono);
font-size: 10px; letter-spacing: 0.2em;
color: rgba(225,255,0,0.5);
text-transform: uppercase;
}
.biblioteka__card-date {
font-family: var(--font-mono);
font-size: 10px; text-transform: uppercase; letter-spacing: 0.2em;
color: var(--color-acid-yellow);
margin-bottom: 6px;
}
.biblioteka__card:hover .biblioteka__card-date {
color: var(--color-rescue-orange);
}
.biblioteka__card-title {
font-family: var(--font-display);
font-weight: 700; text-transform: uppercase;
letter-spacing: -0.01em;
line-height: 1.15;
font-size: 18px;
margin: 0 0 6px;
color: inherit;
}
.biblioteka__card-author {
font-family: var(--font-mono);
font-size: 10px; text-transform: uppercase; letter-spacing: 0.2em;
color: rgba(255,255,255,0.6);
margin: 0 0 16px;
}
.biblioteka__card:hover .biblioteka__card-author {
color: rgba(9,10,12,0.7);
font-weight: 700;
}
.biblioteka__card-excerpt {
font-size: 14px; line-height: 1.55;
color: rgba(255,255,255,0.7);
margin: 0 0 20px;
flex-grow: 1;
}
.biblioteka__card:hover .biblioteka__card-excerpt {
color: rgba(9,10,12,0.8);
}
.biblioteka__card-readmore {
margin-top: auto;
padding-top: 16px;
border-top: 1px dashed rgba(255,255,255,0.15);
font-family: var(--font-mono);
font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.2em;
color: var(--color-acid-yellow);
}
.biblioteka__card:hover .biblioteka__card-readmore {
border-top-color: rgba(9,10,12,0.2);
color: var(--color-smoky-black);
}
/* CTA na dole */
.biblioteka__cta {
background: var(--color-acid-yellow);
color: var(--color-smoky-black);
padding: 64px 24px 80px;
border-top: 2px solid var(--color-smoky-black);
}
@media (min-width: 768px) { .biblioteka__cta { padding: 80px 48px; } }
.biblioteka__cta-inner {
max-width: 800px; margin: 0 auto;
text-align: center;
}
.biblioteka__cta-tag {
font-family: var(--font-mono);
font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.3em;
color: var(--color-rescue-orange);
margin-bottom: 16px;
}
.biblioteka__cta-title {
font-family: var(--font-display);
font-weight: 700; text-transform: uppercase;
letter-spacing: -0.03em; line-height: 0.95;
font-size: clamp(28px, 5vw, 52px);
color: var(--color-smoky-black);
margin: 0 0 16px;
}
.biblioteka__cta-text {
font-size: 17px; line-height: 1.55;
color: rgba(9,10,12,0.8);
max-width: 600px; margin: 0 auto 32px;
}
.biblioteka__cta-btn {
display: inline-flex; align-items: center; gap: 12px;
background: var(--color-smoky-black);
color: var(--color-acid-yellow);
padding: 18px 32px;
font-family: var(--font-mono);
font-size: 13px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.15em;
text-decoration: none;
border: 2px solid var(--color-smoky-black);
transition: all 0.2s;
}
.biblioteka__cta-btn:hover {
background: var(--color-rescue-orange);
border-color: var(--color-rescue-orange);
color: var(--color-white);
text-decoration: none;
}
.biblioteka__cta-btn-arrow {
transition: transform 0.2s;
}
.biblioteka__cta-btn:hover .biblioteka__cta-btn-arrow {
transform: translateX(4px);
}
/* ============================================
WARIANT KOLORÓW: SPRZĘT (czarny tech-readout)
Estetyka odwrócona względem DRUGA_GRAŃ - czarne tło, żółte akcenty,
dot pattern w tle, karty z półprzezroczystym tłem (technical dashboard)
============================================ */
.blog-section--sprzet-violet {
background: #090A0C;
color: #F4F4F5;
position: relative;
overflow: hidden;
}
/* Dot pattern w tle (jak DRUGA_GRAŃ, ale jasne kropki na ciemnym tle) */
.blog-section--sprzet-violet::before {
content: "";
position: absolute;
inset: 0;
opacity: 0.08;
background-image: radial-gradient(#E1FF00 1px, transparent 1px);
background-size: 24px 24px;
pointer-events: none;
z-index: 0;
}
.blog-section--sprzet-violet > * {
position: relative;
z-index: 1;
}
/* Tytuł i opis */
.blog-section--sprzet-violet .blog-section__title {
color: #F4F4F5;
}
.blog-section--sprzet-violet .blog-section__desc {
color: rgba(225, 255, 0, 0.7);
}
/* Grid - żółte ramki na czarnym (jak DRUGA_GRAŃ ma czarne ramki na żółtym) */
.blog-section--sprzet-violet .blog-grid-standard {
border-color: #E1FF00;
}
.blog-section--sprzet-violet .blog-grid-standard__image {
border-right-color: #E1FF00;
filter: grayscale(100%) contrast(1.2) brightness(0.85);
transition: filter 0.5s, transform 0.5s;
}
.blog-section--sprzet-violet .blog-grid-standard__image:hover {
filter: grayscale(0) contrast(1.1) brightness(1);
}
/* Karty wpisów - półprzezroczyste tło z żółtą ramką (analogia do white-translucent cards w recovery) */
.blog-section--sprzet-violet .blog-grid-standard__post {
background: rgba(225, 255, 0, 0.04);
border-right-color: #E1FF00;
color: #F4F4F5;
transition: background 0.3s, color 0.3s;
}
.blog-section--sprzet-violet .blog-grid-standard__post-date {
color: #E1FF00;
opacity: 1;
font-weight: 700;
}
.blog-section--sprzet-violet .blog-grid-standard__post-readmore {
color: #E1FF00;
}
/* Hover - żółte tło, czarny tekst (klasyczne dla całej strony) */
.blog-section--sprzet-violet .blog-grid-standard__post:hover {
background: #E1FF00;
color: #090A0C;
}
.blog-section--sprzet-violet .blog-grid-standard__post:hover .blog-grid-standard__post-date,
.blog-section--sprzet-violet .blog-grid-standard__post:hover .blog-grid-standard__post-readmore {
color: #090A0C;
}
/* CTA - żółty przycisk na czarnym (jak recovery footer button) */
.blog-section--sprzet-violet .blog-section__cta {
background: #E1FF00;
color: #090A0C;
border: 1px solid #E1FF00;
font-weight: 700;
}
.blog-section--sprzet-violet .blog-section__cta:hover {
background: #FF4500;
border-color: #FF4500;
color: #F4F4F5;
}
/* ============================================
NEWSLETTER - styl shortcode (MailerLite/CF7/WPForms)
Wymusza spójny styl Acid Alpinism niezależnie od wtyczki
============================================ */
.newsletter__shortcode-wrap {
width: 100%;
}
/* MailerLite */
.newsletter__shortcode-wrap .ml-form-embedContainer,
.newsletter__shortcode-wrap .ml-form-embedWrapper {
background: transparent !important;
box-shadow: none !important;
border: none !important;
max-width: 100% !important;
}
.newsletter__shortcode-wrap .ml-form-embedHeader,
.newsletter__shortcode-wrap .ml-form-embedBody h4,
.newsletter__shortcode-wrap .ml-form-embedBody p {
display: none !important; /* ukryj tytuł i opis - mamy własne */
}
.newsletter__shortcode-wrap .ml-form-embedBody {
padding: 0 !important;
background: transparent !important;
}
.newsletter__shortcode-wrap input[type="email"],
.newsletter__shortcode-wrap input[type="text"],
.newsletter__shortcode-wrap .ml-form-embedSubmit input,
.newsletter__shortcode-wrap .ml-form-embedSubmit button {
font-family: var(--font-mono) !important;
font-size: 13px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.15em !important;
border-radius: 0 !important;
border: 2px solid var(--color-smoky-black) !important;
padding: 14px 18px !important;
box-shadow: none !important;
}
.newsletter__shortcode-wrap input[type="email"]:focus {
outline: 0 !important;
border-color: var(--color-rescue-orange) !important;
}
.newsletter__shortcode-wrap .ml-form-embedSubmit button,
.newsletter__shortcode-wrap button[type="submit"] {
background: var(--color-smoky-black) !important;
color: var(--color-acid-yellow) !important;
cursor: pointer !important;
transition: background 0.2s !important;
}
.newsletter__shortcode-wrap .ml-form-embedSubmit button:hover,
.newsletter__shortcode-wrap button[type="submit"]:hover {
background: var(--color-rescue-orange) !important;
color: var(--color-white) !important;
}
/* MailerLite success message */
.newsletter__shortcode-wrap .ml-form-successContent,
.newsletter__shortcode-wrap .ml-form-successBody {
background: transparent !important;
color: var(--color-acid-yellow) !important;
font-family: var(--font-mono) !important;
text-transform: uppercase !important;
letter-spacing: 0.15em !important;
}
/* Hide MailerLite branding "Powered by" */
.newsletter__shortcode-wrap .ml-form-embedFooter {
display: none !important;
}
/* ============================================
STRONA BLOG (template-blog.php)
AJAX filtrowanie, mix layout: 1 duża + 3 mniejsze
============================================ */
.aa-blog {
background: var(--color-smoky-black);
color: var(--color-off-white);
padding-top: 48px;
}
/* HERO */
.aa-blog__hero {
padding: 80px 24px 48px;
border-bottom: 1px solid rgba(255,255,255,0.15);
}
@media (min-width: 768px) { .aa-blog__hero { padding: 112px 48px 56px; } }
.aa-blog__hero-pretitle {
font-family: var(--font-mono);
font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.3em;
color: var(--color-acid-yellow);
margin: 0 0 20px;
}
.aa-blog__hero-title {
font-family: var(--font-display);
font-weight: 700; letter-spacing: -0.05em; line-height: 0.9;
font-size: clamp(60px, 14vw, 160px);
text-transform: uppercase;
color: var(--color-off-white);
margin: 0 0 24px;
}
.aa-blog__hero-meta {
font-family: var(--font-mono);
font-size: 11px; text-transform: uppercase; letter-spacing: 0.2em;
color: rgba(255,255,255,0.55);
}
/* TOOLBAR */
.aa-blog__toolbar {
padding: 32px 24px;
border-bottom: 1px solid rgba(255,255,255,0.15);
}
@media (min-width: 768px) { .aa-blog__toolbar { padding: 40px 48px; } }
/* Search */
.aa-blog__search {
display: flex;
gap: 8px;
margin-bottom: 24px;
max-width: 600px;
}
.aa-blog__search-input {
flex: 1;
background: transparent;
border: 1px solid rgba(255,255,255,0.25);
color: var(--color-off-white);
padding: 12px 16px;
font-family: var(--font-mono);
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.1em;
outline: none;
}
.aa-blog__search-input::placeholder {
color: rgba(255,255,255,0.4);
}
.aa-blog__search-input:focus {
border-color: var(--color-acid-yellow);
}
.aa-blog__search-btn {
background: var(--color-acid-yellow);
color: var(--color-smoky-black);
border: none;
padding: 12px 20px;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
cursor: pointer;
transition: background 0.2s;
}
.aa-blog__search-btn:hover {
background: var(--color-rescue-orange);
color: var(--color-off-white);
}
/* Filters chips */
.aa-blog__filters {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 20px;
}
.aa-blog__chip {
background: transparent;
border: 1px solid rgba(255,255,255,0.25);
color: var(--color-off-white);
padding: 8px 16px;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
cursor: pointer;
transition: all 0.2s;
}
.aa-blog__chip:hover {
border-color: var(--color-acid-yellow);
color: var(--color-acid-yellow);
}
.aa-blog__chip.is-active {
background: var(--color-acid-yellow);
color: var(--color-smoky-black);
border-color: var(--color-acid-yellow);
}
/* Toolbar row (count + sort) */
.aa-blog__toolbar-row {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 16px;
border-top: 1px dashed rgba(255,255,255,0.15);
flex-wrap: wrap;
gap: 12px;
}
.aa-blog__count {
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.15em;
color: rgba(255,255,255,0.55);
}
.aa-blog__sort {
display: flex;
gap: 16px;
}
.aa-blog__sort-btn {
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.15em;
color: rgba(255,255,255,0.55);
cursor: pointer;
transition: color 0.2s;
background: none; border: none; padding: 0;
}
.aa-blog__sort-btn:hover {
color: var(--color-off-white);
}
.aa-blog__sort-btn.is-active {
color: var(--color-acid-yellow);
font-weight: 700;
}
/* RESULTS */
.aa-blog__results {
padding: 48px 24px 96px;
}
@media (min-width: 768px) { .aa-blog__results { padding: 64px 48px 112px; } }
.aa-blog__loader {
text-align: center;
font-family: var(--font-mono);
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--color-acid-yellow);
padding: 48px 0;
animation: aa-blog-pulse 1.4s ease-in-out infinite;
}
@keyframes aa-blog-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
.aa-blog__empty {
text-align: center;
padding: 80px 24px;
font-family: var(--font-mono);
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.2em;
color: rgba(255,255,255,0.4);
border: 1px dashed rgba(255,255,255,0.15);
}
#aa-blog-content {
transition: opacity 0.2s;
}
.aa-blog__results-grid {
display: flex;
flex-direction: column;
gap: 24px;
}
/* Karta */
.aa-blog__card {
background: transparent;
border: 1px solid rgba(255,255,255,0.15);
color: var(--color-off-white);
text-decoration: none;
display: flex;
flex-direction: column;
transition: border-color 0.3s, transform 0.2s;
overflow: hidden;
}
.aa-blog__card:hover {
border-color: var(--color-acid-yellow);
text-decoration: none;
color: var(--color-off-white);
transform: translateY(-2px);
}
/* Karta FEATURED (duża u góry) */
.aa-blog__card--featured {
/* na desktopie: side-by-side, na mobile: stack */
}
@media (min-width: 768px) {
.aa-blog__card--featured {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 0;
min-height: 360px;
}
.aa-blog__card--featured .aa-blog__card-img {
aspect-ratio: auto;
height: 100%;
min-height: 360px;
}
.aa-blog__card--featured .aa-blog__card-body {
padding: 32px 36px;
justify-content: center;
}
.aa-blog__card--featured .aa-blog__card-title {
font-size: clamp(24px, 2.6vw, 36px);
line-height: 1.05;
}
.aa-blog__card--featured .aa-blog__card-excerpt {
font-size: 15px;
line-height: 1.55;
-webkit-line-clamp: 4;
line-clamp: 4;
}
}
/* Karta image */
.aa-blog__card-img {
aspect-ratio: 16/10;
background: #1a1a1f;
position: relative;
overflow: hidden;
}
.aa-blog__card-img img {
width: 100%; height: 100%;
object-fit: cover;
filter: grayscale(100%) contrast(1.1);
transition: filter 0.4s, transform 0.5s;
display: block;
}
.aa-blog__card:hover .aa-blog__card-img img {
filter: grayscale(0) contrast(1);
transform: scale(1.03);
}
/* Badge kategorii */
.aa-blog__card-cat {
position: absolute;
top: 12px; left: 12px;
padding: 5px 10px;
font-family: var(--font-mono);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
background: var(--color-acid-yellow);
color: var(--color-smoky-black);
z-index: 2;
}
.aa-blog__card-cat--gory {
background: var(--color-smoky-black);
color: var(--color-acid-yellow);
border: 1px solid var(--color-acid-yellow);
}
.aa-blog__card-cat--mental {
background: var(--color-acid-yellow);
color: var(--color-smoky-black);
}
.aa-blog__card-cat--sprzet {
background: var(--color-off-white);
color: var(--color-smoky-black);
}
.aa-blog__card-cat--raporty {
background: var(--color-rescue-orange);
color: var(--color-off-white);
}
.aa-blog__card-cat--ksiazki {
background: var(--color-acid-yellow);
color: var(--color-smoky-black);
}
/* Karta body */
.aa-blog__card-body {
padding: 20px 22px 22px;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.aa-blog__card-date {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--color-acid-yellow);
margin-bottom: 8px;
}
.aa-blog__card-title {
font-family: var(--font-display);
font-weight: 700;
font-size: 17px;
line-height: 1.2;
text-transform: uppercase;
letter-spacing: -0.01em;
margin: 0 0 10px;
color: inherit;
}
.aa-blog__card-excerpt {
font-size: 13px;
line-height: 1.5;
color: rgba(255,255,255,0.6);
margin: 0 0 16px;
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.aa-blog__card-more {
margin-top: auto;
padding-top: 12px;
border-top: 1px dashed rgba(255,255,255,0.15);
font-family: var(--font-mono);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--color-acid-yellow);
}
.aa-blog__card:hover .aa-blog__card-more {
color: var(--color-rescue-orange);
}
/* Grid 3-kolumnowy (pod featured) */
.aa-blog__cards-grid {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
}
@media (min-width: 640px) {
.aa-blog__cards-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
.aa-blog__cards-grid { grid-template-columns: repeat(3, 1fr); }
}
/* Paginacja */
.aa-blog__pagination {
display: flex;
justify-content: center;
gap: 6px;
margin-top: 40px;
flex-wrap: wrap;
}
.aa-blog__pag-btn {
padding: 10px 14px;
background: transparent;
border: 1px solid rgba(255,255,255,0.25);
color: var(--color-off-white);
font-family: var(--font-mono);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.15em;
cursor: pointer;
transition: all 0.2s;
min-width: 40px;
}
.aa-blog__pag-btn:hover {
border-color: var(--color-acid-yellow);
color: var(--color-acid-yellow);
}
.aa-blog__pag-btn.is-active {
background: var(--color-acid-yellow);
color: var(--color-smoky-black);
border-color: var(--color-acid-yellow);
}
/* ============================================
GEAR_LOG (SPRZĘT - dedykowana sekcja tabelaryczna)
Reużywa stylów .summit-log i .summit-table z LOG_MISJI
============================================ */
.gear-log {
/* Reużywa .summit-log - identyczne tło i layout */
}
/* Wiersz tabeli jako link (klikalny cały) */
.summit-table__row--link {
text-decoration: none !important;
color: inherit !important;
cursor: pointer;
transition: background 0.2s, transform 0.2s;
}
.summit-table__row--link:hover {
background: rgba(225, 255, 0, 0.06);
transform: translateX(4px);
text-decoration: none !important;
}
.summit-table__row--link:hover .summit-table__name {
color: var(--color-acid-yellow);
}
/* Footer button jako link (jak istniejący .summit-log__footer-btn, ale dla ) */
a.summit-log__footer-btn {
text-decoration: none !important;
display: inline-block;
}
a.summit-log__footer-btn:hover {
text-decoration: none !important;
}
/* Rating w tabeli SPRZĘT - żółte gwiazdki */
.summit-table__cell--rating {
color: var(--color-acid-yellow) !important;
opacity: 1 !important;
letter-spacing: 0.1em;
}
/* ============================================
GEAR GRID - sekcja SPRZĘT/TECHNIKA (2 kolumny)
Karty wpisów z miniaturą featured image
============================================ */
.gear-grid {
display: grid;
grid-template-columns: 1fr;
gap: 32px;
margin-bottom: 32px;
}
@media (min-width: 768px) {
.gear-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}
.gear-grid__col {
display: flex;
flex-direction: column;
gap: 12px;
}
.gear-grid__col-head {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 12px;
margin-bottom: 8px;
border-bottom: 1px solid rgba(225, 255, 0, 0.3);
}
.gear-grid__col-title {
font-family: var(--font-mono);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--color-acid-yellow);
}
.gear-grid__col-count {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.2em;
color: rgba(225, 255, 0, 0.55);
}
.gear-grid__empty {
text-align: center;
padding: 64px 24px;
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.25em;
color: rgba(255, 255, 255, 0.35);
border: 1px dashed rgba(255, 255, 255, 0.15);
margin-bottom: 32px;
}
/* Karta wpisu */
.gear-card {
display: grid;
grid-template-columns: 96px 1fr auto;
gap: 16px;
padding: 12px;
background: rgba(255, 255, 255, 0.025);
border: 1px solid rgba(255, 255, 255, 0.08);
text-decoration: none !important;
color: inherit !important;
transition: background 0.2s, border-color 0.2s, transform 0.2s;
align-items: center;
}
.gear-card:hover {
background: rgba(225, 255, 0, 0.06);
border-color: rgba(225, 255, 0, 0.4);
transform: translateX(4px);
text-decoration: none !important;
}
.gear-card:hover .gear-card__title {
color: var(--color-acid-yellow);
}
.gear-card--empty {
display: block;
text-align: center;
padding: 24px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.2em;
color: rgba(255, 255, 255, 0.3);
border-style: dashed;
}
.gear-card--empty:hover {
background: transparent;
border-color: rgba(255, 255, 255, 0.08);
transform: none;
}
.gear-card__thumb {
width: 96px;
height: 96px;
background: #1a1a1f;
border: 1px solid rgba(225, 255, 0, 0.15);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.gear-card__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(100%) contrast(1.15) brightness(0.9);
transition: filter 0.4s, transform 0.5s;
display: block;
}
.gear-card:hover .gear-card__thumb img {
filter: grayscale(0) contrast(1.05) brightness(1);
transform: scale(1.05);
}
.gear-card__thumb-placeholder {
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.2em;
color: rgba(225, 255, 0, 0.75);
}
.gear-card__body {
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0; /* żeby tekst się prawidłowo łamał */
}
.gear-card__title {
font-family: var(--font-display);
font-weight: 700;
font-size: 14px;
line-height: 1.2;
letter-spacing: -0.005em;
text-transform: uppercase;
margin: 0;
color: var(--color-off-white);
transition: color 0.2s;
/* truncate na 3 linie */
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.gear-card__meta {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.gear-card__date {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.15em;
color: rgba(225, 255, 0, 0.7);
}
.gear-card__badge {
font-family: var(--font-mono);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.18em;
padding: 3px 8px;
border: 1px solid var(--color-acid-yellow);
color: var(--color-acid-yellow);
}
.gear-card__badge--completed {
border-color: var(--color-acid-yellow);
color: var(--color-acid-yellow);
}
.gear-card__badge--progress {
border-color: var(--color-rescue-orange);
color: var(--color-rescue-orange);
}
.gear-card__badge--planned {
border-color: rgba(255, 255, 255, 0.4);
color: rgba(255, 255, 255, 0.6);
}
/* Strzałka → po prawej stronie karty (zamiast badge) */
.gear-card__arrow {
font-family: var(--font-mono);
font-size: 22px;
font-weight: 700;
color: var(--color-acid-yellow);
padding: 0 8px 0 4px;
transition: transform 0.3s, color 0.2s;
opacity: 0.7;
}
.gear-card:hover .gear-card__arrow {
transform: translateX(6px);
opacity: 1;
}
/* ============================================
SPIS TREŚCI (Table of Contents) w sidebarze artykułu
Artykuł ma JASNE tło (off-white), więc tekst ciemny
============================================ */
.post-toc {
border: 1px solid rgba(9, 10, 12, 0.18);
padding: 20px;
margin-bottom: 24px;
background: rgba(9, 10, 12, 0.02);
}
.post-toc__list {
list-style: none;
margin: 12px 0 0;
padding: 0;
}
.post-toc__item {
margin: 0;
padding: 0;
line-height: 1.3;
}
.post-toc__item--h3 {
padding-left: 16px;
}
.post-toc__link {
display: block;
padding: 7px 0 7px 12px;
border-left: 2px solid rgba(9, 10, 12, 0.18);
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.05em;
color: rgba(9, 10, 12, 0.65);
text-decoration: none;
transition: color 0.2s, border-color 0.2s, padding-left 0.2s, background 0.2s;
}
.post-toc__link:hover {
color: var(--color-smoky-black);
border-left-color: var(--color-smoky-black);
text-decoration: none;
}
.post-toc__item--h3 .post-toc__link {
font-size: 10px;
color: rgba(9, 10, 12, 0.5);
}
.post-toc__link.is-active {
color: var(--color-smoky-black);
border-left-color: var(--color-rescue-orange);
border-left-width: 3px;
padding-left: 15px;
font-weight: 700;
background: rgba(225, 255, 0, 0.25);
}
/* ============================================
SZLAKI_WIEDZY - kuratorskie ścieżki tematyczne
Grid kart na czarnym tle, hover → lime
============================================ */
.szlaki {
background: var(--color-smoky-black);
color: var(--color-off-white);
padding: 80px 24px;
}
@media (min-width: 768px) { .szlaki { padding: 112px 48px; } }
.szlaki__header {
margin-bottom: 48px;
}
.szlaki__title {
font-family: var(--font-display);
font-weight: 700;
letter-spacing: -0.04em;
line-height: 0.9;
font-size: clamp(48px, 9vw, 110px);
text-transform: uppercase;
color: var(--color-off-white);
margin: 0 0 16px;
}
.szlaki__subtitle {
font-family: var(--font-mono);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--color-acid-yellow);
margin: 0;
}
.szlaki__grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
}
@media (min-width: 640px) { .szlaki__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .szlaki__grid { grid-template-columns: repeat(3, 1fr); } }
/* Karta szlaku */
.szlak-card {
position: relative;
display: flex;
flex-direction: column;
padding: 28px;
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.15);
text-decoration: none !important;
color: var(--color-off-white);
transition: background 0.3s, color 0.3s, border-color 0.3s, transform 0.2s;
min-height: 240px;
}
.szlak-card:hover {
background: var(--color-acid-yellow);
color: var(--color-smoky-black);
border-color: var(--color-acid-yellow);
transform: translateY(-3px);
text-decoration: none !important;
}
.szlak-card__num {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.2em;
color: var(--color-acid-yellow);
margin-bottom: 20px;
}
.szlak-card:hover .szlak-card__num {
color: var(--color-smoky-black);
}
.szlak-card__title {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(20px, 2.2vw, 26px);
line-height: 1.05;
letter-spacing: -0.02em;
text-transform: uppercase;
margin: 0 0 14px;
color: inherit;
}
.szlak-card__desc {
font-size: 14px;
line-height: 1.5;
color: rgba(255, 255, 255, 0.65);
margin: 0 0 24px;
flex-grow: 1;
}
.szlak-card:hover .szlak-card__desc {
color: rgba(9, 10, 12, 0.8);
}
.szlak-card__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding-top: 16px;
border-top: 1px dashed rgba(255, 255, 255, 0.2);
flex-wrap: wrap;
}
.szlak-card:hover .szlak-card__footer {
border-top-color: rgba(9, 10, 12, 0.25);
}
.szlak-card__count {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.15em;
color: rgba(255, 255, 255, 0.5);
}
.szlak-card:hover .szlak-card__count {
color: rgba(9, 10, 12, 0.7);
}
.szlak-card__cta {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--color-acid-yellow);
}
.szlak-card:hover .szlak-card__cta {
color: var(--color-smoky-black);
}
/* ============================================
ARCHIWUM SZLAKU (taxonomy-szlak_wiedzy.php)
============================================ */
.szlak-archive {
background: var(--color-smoky-black);
color: var(--color-off-white);
padding-top: 48px;
}
.szlak-archive__hero {
padding: 80px 24px 48px;
border-bottom: 1px solid rgba(255,255,255,0.15);
}
@media (min-width: 768px) { .szlak-archive__hero { padding: 112px 48px 56px; } }
.szlak-archive__pretitle {
font-family: var(--font-mono);
font-size: 11px; font-weight: 700;
letter-spacing: 0.3em; text-transform: uppercase;
color: var(--color-acid-yellow);
margin: 0 0 20px;
}
.szlak-archive__title {
font-family: var(--font-display);
font-weight: 700; letter-spacing: -0.04em; line-height: 0.9;
font-size: clamp(48px, 11vw, 130px);
text-transform: uppercase;
margin: 0 0 24px;
}
.szlak-archive__desc {
font-size: clamp(16px, 1.6vw, 20px);
line-height: 1.5;
max-width: 680px;
color: rgba(255,255,255,0.75);
margin: 0 0 24px;
}
.szlak-archive__meta {
font-family: var(--font-mono);
font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
color: rgba(255,255,255,0.5);
}
.szlak-archive__list { padding: 56px 24px 80px; }
@media (min-width: 768px) { .szlak-archive__list { padding: 72px 48px 96px; } }
.szlak-archive__grid {
display: grid; grid-template-columns: 1fr; gap: 1.5rem;
}
@media (min-width: 640px) { .szlak-archive__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .szlak-archive__grid { grid-template-columns: repeat(3, 1fr); } }
.szlak-post {
display: flex; flex-direction: column;
border: 1px solid rgba(255,255,255,0.15);
text-decoration: none !important;
color: var(--color-off-white);
transition: border-color 0.3s, transform 0.2s;
}
.szlak-post:hover { border-color: var(--color-acid-yellow); transform: translateY(-2px); text-decoration: none !important; }
.szlak-post__img {
aspect-ratio: 16/10;
background: #1a1a1f;
position: relative; overflow: hidden;
}
.szlak-post__img img {
width: 100%; height: 100%; object-fit: cover;
filter: grayscale(100%) contrast(1.1);
transition: filter 0.4s, transform 0.5s;
}
.szlak-post:hover .szlak-post__img img { filter: grayscale(0); transform: scale(1.04); }
.szlak-post__num {
position: absolute; top: 10px; left: 12px;
font-family: var(--font-mono); font-size: 11px; font-weight: 700;
letter-spacing: 0.15em; color: var(--color-acid-yellow);
text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}
.szlak-post__cat {
position: absolute; top: 10px; right: 12px;
font-family: var(--font-mono); font-size: 9px; font-weight: 700;
letter-spacing: 0.18em; padding: 3px 8px;
background: var(--color-acid-yellow); color: var(--color-smoky-black);
}
.szlak-post__cat--gory { background: var(--color-smoky-black); color: var(--color-acid-yellow); border: 1px solid var(--color-acid-yellow); }
.szlak-post__cat--raporty { background: var(--color-rescue-orange); color: var(--color-off-white); }
.szlak-post__cat--sprzet { background: var(--color-off-white); color: var(--color-smoky-black); }
.szlak-post__body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex-grow: 1; }
.szlak-post__date {
font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em;
color: var(--color-acid-yellow); margin-bottom: 8px;
}
.szlak-post__title {
font-family: var(--font-display); font-weight: 700; font-size: 16px;
line-height: 1.2; text-transform: uppercase; margin: 0 0 16px;
}
.szlak-post__more {
margin-top: auto; padding-top: 12px;
border-top: 1px dashed rgba(255,255,255,0.15);
font-family: var(--font-mono); font-size: 10px; font-weight: 700;
letter-spacing: 0.2em; color: var(--color-acid-yellow);
}
.szlak-archive__empty {
text-align: center; padding: 80px 24px;
font-family: var(--font-mono); font-size: 13px;
letter-spacing: 0.2em; color: rgba(255,255,255,0.4);
border: 1px dashed rgba(255,255,255,0.15);
}
.szlak-archive__pagination { margin-top: 48px; }
.szlak-archive__pagination .page-numbers {
font-family: var(--font-mono); font-size: 12px; font-weight: 700;
padding: 10px 14px; border: 1px solid rgba(255,255,255,0.25);
color: var(--color-off-white); text-decoration: none;
margin: 0 3px; transition: all 0.2s;
}
.szlak-archive__pagination .page-numbers.current {
background: var(--color-acid-yellow); color: var(--color-smoky-black);
border-color: var(--color-acid-yellow);
}
.szlak-archive__pagination .page-numbers:hover:not(.current) {
border-color: var(--color-acid-yellow); color: var(--color-acid-yellow);
}
.szlak-archive__back { padding: 0 24px 80px; }
@media (min-width: 768px) { .szlak-archive__back { padding: 0 48px 96px; } }
.szlak-archive__back-link {
font-family: var(--font-mono); font-size: 12px; font-weight: 700;
letter-spacing: 0.2em; text-transform: uppercase;
color: var(--color-acid-yellow); text-decoration: none;
}
.szlak-archive__back-link:hover { color: var(--color-rescue-orange); }
/* ============================================
ARCHIWUM - wyszukiwarka kontekstowa
============================================ */
.archiwum {
background: var(--color-smoky-black);
color: var(--color-off-white);
padding-top: 48px;
}
/* Hero */
.archiwum__hero {
padding: 80px 24px 48px;
position: relative;
overflow: hidden;
}
@media (min-width: 768px) { .archiwum__hero { padding: 112px 48px 56px; } }
/* Linia skanująca pod nagłówkiem */
.archiwum__hero::after {
content: "";
position: absolute;
left: 24px; right: 24px;
bottom: 0;
height: 1px;
background: linear-gradient(90deg, var(--color-acid-yellow), transparent);
opacity: 0.4;
}
.archiwum__pretitle {
font-family: var(--font-mono);
font-size: 11px; font-weight: 700;
letter-spacing: 0.3em; text-transform: uppercase;
color: var(--color-acid-yellow);
margin: 0 0 20px;
}
.archiwum__title {
font-family: var(--font-display);
font-weight: 700; letter-spacing: -0.04em; line-height: 0.85;
font-size: clamp(64px, 16vw, 200px);
text-transform: uppercase;
margin: 0 0 20px;
}
.archiwum__slogan {
font-family: var(--font-mono);
font-size: clamp(13px, 1.8vw, 18px);
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--color-off-white);
margin: 0 0 40px;
}
/* Pole wyszukiwania */
.archiwum__search {
display: flex;
align-items: stretch;
gap: 0;
max-width: 800px;
border: 2px solid var(--color-off-white);
margin-bottom: 32px;
transition: border-color 0.2s;
}
.archiwum__search:focus-within {
border-color: var(--color-acid-yellow);
}
.archiwum__search-prompt {
display: flex; align-items: center;
padding: 0 16px;
font-family: var(--font-mono);
font-size: 20px; font-weight: 700;
color: var(--color-acid-yellow);
background: rgba(225,255,0,0.05);
}
.archiwum__search-input {
flex: 1;
background: transparent;
border: none;
color: var(--color-off-white);
padding: 18px 16px;
font-family: var(--font-mono);
font-size: 15px;
letter-spacing: 0.05em;
outline: none;
min-width: 0;
}
.archiwum__search-input::placeholder { color: rgba(255,255,255,0.35); }
.archiwum__search-btn {
background: var(--color-acid-yellow);
color: var(--color-smoky-black);
border: none;
padding: 0 24px;
font-family: var(--font-mono);
font-size: 12px; font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
cursor: pointer;
white-space: nowrap;
transition: background 0.2s;
}
.archiwum__search-btn:hover {
background: var(--color-rescue-orange);
color: var(--color-off-white);
}
@media (max-width: 600px) {
.archiwum__search { flex-wrap: wrap; }
.archiwum__search-btn { width: 100%; padding: 14px; }
}
/* Popularne tematy */
.archiwum__topics { margin-top: 8px; }
.archiwum__topics-label {
display: block;
font-family: var(--font-mono);
font-size: 10px; letter-spacing: 0.25em;
text-transform: uppercase;
color: rgba(255,255,255,0.4);
margin-bottom: 14px;
}
.archiwum__topics-tags {
display: flex; flex-wrap: wrap; gap: 8px;
}
.archiwum__tag {
background: transparent;
border: 1px solid rgba(255,255,255,0.25);
color: var(--color-off-white);
padding: 8px 14px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.1em;
cursor: pointer;
transition: all 0.2s;
}
.archiwum__tag:hover {
background: var(--color-acid-yellow);
color: var(--color-smoky-black);
border-color: var(--color-acid-yellow);
}
/* Filtry */
.archiwum__filters-section {
padding: 32px 24px;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
@media (min-width: 768px) { .archiwum__filters-section { padding: 40px 48px; } }
.archiwum__filters {
display: flex;
flex-direction: column;
gap: 18px;
}
.archiwum__filter-group {
display: flex;
align-items: baseline;
gap: 16px;
flex-wrap: wrap;
}
.archiwum__filter-label {
font-family: var(--font-mono);
font-size: 11px; font-weight: 700;
letter-spacing: 0.2em;
color: var(--color-acid-yellow);
min-width: 70px;
}
.archiwum__filter-opts {
display: flex; flex-wrap: wrap; gap: 6px;
}
.archiwum__filter-opt {
background: transparent;
border: 1px solid rgba(255,255,255,0.15);
color: rgba(255,255,255,0.6);
padding: 6px 12px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.05em;
cursor: pointer;
transition: all 0.2s;
}
.archiwum__filter-opt:hover {
color: var(--color-off-white);
border-color: rgba(255,255,255,0.4);
}
.archiwum__filter-opt.is-active {
background: var(--color-off-white);
color: var(--color-smoky-black);
border-color: var(--color-off-white);
font-weight: 700;
}
/* Wyniki */
.archiwum__results-section {
padding: 48px 24px 96px;
}
@media (min-width: 768px) { .archiwum__results-section { padding: 56px 48px 112px; } }
.archiwum__results-meta {
font-family: var(--font-mono);
font-size: 12px; letter-spacing: 0.15em;
text-transform: uppercase;
color: rgba(255,255,255,0.55);
margin-bottom: 32px;
}
.archiwum__loader {
font-family: var(--font-mono);
font-size: 12px; letter-spacing: 0.2em;
color: var(--color-acid-yellow);
padding: 32px 0;
animation: aa-blog-pulse 1.4s ease-in-out infinite;
}
.archiwum__results { transition: opacity 0.2s; }
.archiwum__grid {
display: grid; grid-template-columns: 1fr; gap: 1.5rem;
}
@media (min-width: 640px) { .archiwum__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .archiwum__grid { grid-template-columns: repeat(3, 1fr); } }
.archiwum__empty {
text-align: center; padding: 80px 24px;
font-family: var(--font-mono); font-size: 13px;
letter-spacing: 0.2em; color: rgba(255,255,255,0.4);
border: 1px dashed rgba(255,255,255,0.15);
}
/* Karta wyniku */
.archiwum-card {
display: flex; flex-direction: column;
border: 1px solid rgba(255,255,255,0.15);
text-decoration: none !important;
color: var(--color-off-white);
transition: border-color 0.3s, transform 0.2s;
}
.archiwum-card:hover { border-color: var(--color-acid-yellow); transform: translateY(-2px); text-decoration: none !important; }
.archiwum-card__img {
aspect-ratio: 16/10;
background: #1a1a1f;
position: relative; overflow: hidden;
}
.archiwum-card__img img {
width: 100%; height: 100%; object-fit: cover;
filter: grayscale(100%) contrast(1.1);
transition: filter 0.4s, transform 0.5s;
}
.archiwum-card:hover .archiwum-card__img img { filter: grayscale(0); transform: scale(1.04); }
.archiwum-card__format {
position: absolute; top: 10px; left: 12px;
font-family: var(--font-mono); font-size: 9px; font-weight: 700;
letter-spacing: 0.18em; padding: 3px 8px;
background: var(--color-acid-yellow); color: var(--color-smoky-black);
}
.archiwum-card__body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex-grow: 1; }
.archiwum-card__date {
font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em;
color: var(--color-acid-yellow); margin-bottom: 8px;
}
.archiwum-card__title {
font-family: var(--font-display); font-weight: 700; font-size: 16px;
line-height: 1.2; text-transform: uppercase; margin: 0 0 16px;
}
.archiwum-card__more {
margin-top: auto; padding-top: 12px;
border-top: 1px dashed rgba(255,255,255,0.15);
font-family: var(--font-mono); font-size: 10px; font-weight: 700;
letter-spacing: 0.2em; color: var(--color-acid-yellow);
}
/* ============================================
DZIŚ_W_ARCHIWUM - wąski pasek/karta pod hero
Mocny blok koloru lime (powód powrotu)
============================================ */
.dzis {
background: var(--color-smoky-black);
padding: 40px 24px;
}
@media (min-width: 768px) { .dzis { padding: 56px 48px; } }
.dzis__card {
max-width: 800px;
margin: 0 auto;
background: var(--color-acid-yellow);
color: var(--color-smoky-black);
padding: 28px 32px;
border: 2px solid var(--color-smoky-black);
}
@media (min-width: 768px) { .dzis__card { padding: 32px 40px; } }
.dzis__header {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
padding-bottom: 18px;
margin-bottom: 18px;
border-bottom: 2px solid var(--color-smoky-black);
flex-wrap: wrap;
}
.dzis__label {
font-family: var(--font-mono);
font-size: 13px; font-weight: 700;
letter-spacing: 0.2em; text-transform: uppercase;
color: var(--color-smoky-black);
}
.dzis__date {
font-family: var(--font-display);
font-size: clamp(28px, 5vw, 44px);
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1;
color: var(--color-smoky-black);
}
.dzis__body {
display: flex;
flex-direction: column;
gap: 12px;
}
.dzis__entry {
display: flex;
align-items: baseline;
gap: 12px;
font-size: 15px;
line-height: 1.4;
}
.dzis__year {
font-family: var(--font-mono);
font-weight: 700;
font-size: 14px;
letter-spacing: 0.05em;
color: var(--color-smoky-black);
flex-shrink: 0;
min-width: 42px;
}
.dzis__dash {
flex-shrink: 0;
opacity: 0.5;
}
.dzis__desc {
color: rgba(9, 10, 12, 0.85);
font-family: var(--font-sans);
}
.dzis__desc--link {
color: var(--color-smoky-black);
text-decoration: none;
border-bottom: 1px solid rgba(9,10,12,0.3);
transition: border-color 0.2s;
}
.dzis__desc--link:hover {
border-bottom-color: var(--color-smoky-black);
color: var(--color-smoky-black);
}
.dzis__entry--latest .dzis__desc {
font-weight: 700;
}
.dzis__footer {
margin-top: 22px;
padding-top: 18px;
border-top: 1px dashed rgba(9,10,12,0.3);
}
.dzis__cta {
display: inline-block;
font-family: var(--font-mono);
font-size: 12px; font-weight: 700;
letter-spacing: 0.15em; text-transform: uppercase;
color: var(--color-smoky-black);
background: transparent;
border: 2px solid var(--color-smoky-black);
padding: 12px 20px;
text-decoration: none;
transition: background 0.2s, color 0.2s;
}
.dzis__cta:hover {
background: var(--color-smoky-black);
color: var(--color-acid-yellow);
text-decoration: none;
}
/* ============================================
DOSSIER - wyróżnione na froncie
============================================ */
.dossier-feat {
background: var(--color-smoky-black);
color: var(--color-off-white);
padding: 80px 24px;
}
@media (min-width: 768px) { .dossier-feat { padding: 112px 48px; } }
.dossier-feat__header {
display: flex; align-items: baseline; justify-content: space-between;
gap: 16px; margin-bottom: 40px; flex-wrap: wrap;
}
.dossier-feat__heading {
font-family: var(--font-display); font-weight: 700;
letter-spacing: -0.04em; line-height: 0.9;
font-size: clamp(48px, 9vw, 110px); text-transform: uppercase;
margin: 0;
}
.dossier-feat__all {
font-family: var(--font-mono); font-size: 12px; font-weight: 700;
letter-spacing: 0.15em; text-transform: uppercase;
color: var(--color-acid-yellow); text-decoration: none;
}
.dossier-feat__all:hover { color: var(--color-rescue-orange); }
.dossier-feat__card {
display: grid; grid-template-columns: 1fr;
border: 1px solid rgba(255,255,255,0.15);
text-decoration: none !important; color: inherit !important;
transition: border-color 0.3s, transform 0.2s;
overflow: hidden;
}
@media (min-width: 768px) { .dossier-feat__card { grid-template-columns: 1.2fr 1fr; min-height: 400px; } }
.dossier-feat__card:hover { border-color: var(--color-acid-yellow); transform: translateY(-3px); text-decoration: none !important; }
.dossier-feat__media {
background-size: cover; background-position: center;
filter: grayscale(100%) contrast(1.15) brightness(0.85);
min-height: 240px;
transition: filter 0.5s;
}
.dossier-feat__card:hover .dossier-feat__media { filter: grayscale(0) contrast(1.05); }
.dossier-feat__content {
padding: 32px 36px; display: flex; flex-direction: column; justify-content: center;
}
.dossier-feat__label {
font-family: var(--font-mono); font-size: 11px; font-weight: 700;
letter-spacing: 0.25em; text-transform: uppercase;
color: var(--color-acid-yellow); margin-bottom: 16px;
}
.dossier-feat__title {
font-family: var(--font-display); font-weight: 700;
font-size: clamp(28px, 4vw, 52px); line-height: 0.95;
letter-spacing: -0.03em; text-transform: uppercase;
margin: 0 0 14px;
}
.dossier-feat__sub {
font-size: 16px; line-height: 1.5;
color: rgba(255,255,255,0.7); margin: 0 0 24px;
}
.dossier-feat__channels {
display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px;
}
.dossier-feat__channel {
font-family: var(--font-mono); font-size: 10px; font-weight: 700;
letter-spacing: 0.15em; padding: 5px 10px;
border: 1px solid rgba(225,255,0,0.4); color: var(--color-acid-yellow);
}
.dossier-feat__cta {
font-family: var(--font-mono); font-size: 13px; font-weight: 700;
letter-spacing: 0.15em; text-transform: uppercase;
color: var(--color-acid-yellow);
}
/* ============================================
DOSSIER - single
============================================ */
.dossier-single {
background: var(--color-smoky-black);
color: var(--color-off-white);
padding-top: 48px;
}
.dossier-single__hero {
position: relative;
padding: 100px 24px 64px;
overflow: hidden;
}
@media (min-width: 768px) { .dossier-single__hero { padding: 140px 48px 80px; } }
.dossier-single__hero-bg {
position: absolute; inset: 0;
background-size: cover; background-position: center;
filter: grayscale(100%) contrast(1.2) brightness(0.35);
z-index: 0;
}
.dossier-single__hero-inner { position: relative; z-index: 1; }
.dossier-single__pretitle {
font-family: var(--font-mono); font-size: 11px; font-weight: 700;
letter-spacing: 0.25em; color: var(--color-acid-yellow); margin: 0 0 20px;
}
.dossier-single__title {
font-family: var(--font-display); font-weight: 700;
letter-spacing: -0.04em; line-height: 0.9;
font-size: clamp(48px, 11vw, 130px); text-transform: uppercase;
margin: 0 0 20px;
}
.dossier-single__subtitle {
font-size: clamp(16px, 2vw, 22px); line-height: 1.4;
color: rgba(255,255,255,0.8); max-width: 640px; margin: 0 0 32px;
}
.dossier-single__metrics { display: flex; flex-wrap: wrap; gap: 32px; }
.dossier-single__metric { display: flex; flex-direction: column; gap: 4px; }
.dossier-single__metric span {
font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em;
color: rgba(225,255,0,0.7);
}
.dossier-single__metric strong {
font-family: var(--font-display); font-size: 22px; font-weight: 700;
}
.dossier-single__intro { padding: 56px 24px; border-bottom: 1px solid rgba(255,255,255,0.1); }
@media (min-width: 768px) { .dossier-single__intro { padding: 64px 48px; } }
.dossier-single__intro-body {
max-width: 720px; font-size: 18px; line-height: 1.6;
color: rgba(255,255,255,0.85);
}
.dossier-single__channels { padding: 56px 24px; }
@media (min-width: 768px) { .dossier-single__channels { padding: 72px 48px; } }
.dossier-single__channels-label {
font-family: var(--font-mono); font-size: 12px; font-weight: 700;
letter-spacing: 0.25em; color: var(--color-acid-yellow); margin-bottom: 28px;
}
.dossier-channels { display: flex; flex-direction: column; gap: 12px; }
.dossier-channel {
display: grid; grid-template-columns: 48px 140px 1fr 32px;
align-items: center; gap: 16px;
padding: 20px 24px;
border: 1px solid rgba(255,255,255,0.15);
text-decoration: none !important; color: var(--color-off-white) !important;
transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.dossier-channel:hover {
background: rgba(225,255,0,0.06); border-color: var(--color-acid-yellow);
transform: translateX(4px); text-decoration: none !important;
}
.dossier-channel__num {
font-family: var(--font-mono); font-size: 18px; font-weight: 700;
color: var(--color-acid-yellow);
}
.dossier-channel__type {
font-family: var(--font-mono); font-size: 12px; font-weight: 700;
letter-spacing: 0.15em; color: var(--color-acid-yellow);
}
.dossier-channel__title {
font-family: var(--font-sans); font-size: 15px;
color: rgba(255,255,255,0.85);
}
.dossier-channel__arrow {
font-family: var(--font-mono); font-size: 18px; text-align: right;
color: var(--color-acid-yellow);
}
@media (max-width: 600px) {
.dossier-channel { grid-template-columns: 36px 1fr 24px; }
.dossier-channel__title { display: none; }
}
.dossier-single__sources, .dossier-single__related { padding: 0 24px 56px; }
@media (min-width: 768px) { .dossier-single__sources, .dossier-single__related { padding: 0 48px 72px; } }
.dossier-single__sources-label, .dossier-single__related-label {
font-family: var(--font-mono); font-size: 12px; font-weight: 700;
letter-spacing: 0.25em; color: var(--color-acid-yellow); margin-bottom: 20px;
}
.dossier-sources-list { list-style: none; margin: 0; padding: 0; }
.dossier-sources-list li {
padding: 12px 0; border-bottom: 1px dashed rgba(255,255,255,0.15);
font-family: var(--font-mono); font-size: 13px; color: rgba(255,255,255,0.7);
}
.dossier-sources-list a { color: var(--color-acid-yellow); text-decoration: none; }
.dossier-sources-list a:hover { color: var(--color-rescue-orange); }
.dossier-related-grid {
display: grid; grid-template-columns: 1fr; gap: 16px;
}
@media (min-width: 640px) { .dossier-related-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .dossier-related-grid { grid-template-columns: repeat(3, 1fr); } }
.dossier-related-card {
display: flex; flex-direction: column; padding: 24px;
border: 1px solid rgba(255,255,255,0.15);
text-decoration: none !important; color: var(--color-off-white) !important;
transition: background 0.3s, color 0.3s, transform 0.2s;
}
.dossier-related-card:hover {
background: var(--color-acid-yellow); color: var(--color-smoky-black) !important;
transform: translateY(-2px); text-decoration: none !important;
}
.dossier-related-card__label {
font-family: var(--font-mono); font-size: 10px; font-weight: 700;
letter-spacing: 0.2em; color: var(--color-acid-yellow); margin-bottom: 12px;
}
.dossier-related-card:hover .dossier-related-card__label { color: var(--color-smoky-black); }
.dossier-related-card__title {
font-family: var(--font-display); font-weight: 700; font-size: 18px;
line-height: 1.1; text-transform: uppercase; margin: 0 0 8px;
}
.dossier-related-card__sub { font-size: 13px; color: rgba(255,255,255,0.6); margin: 0 0 16px; flex-grow: 1; }
.dossier-related-card:hover .dossier-related-card__sub { color: rgba(9,10,12,0.7); }
.dossier-related-card__arrow {
font-family: var(--font-mono); font-size: 16px; font-weight: 700;
color: var(--color-acid-yellow); margin-top: auto;
}
.dossier-related-card:hover .dossier-related-card__arrow { color: var(--color-smoky-black); }
.dossier-single__back { padding: 0 24px 80px; }
@media (min-width: 768px) { .dossier-single__back { padding: 0 48px 96px; } }
.dossier-single__back-link {
font-family: var(--font-mono); font-size: 12px; font-weight: 700;
letter-spacing: 0.2em; text-transform: uppercase;
color: var(--color-acid-yellow); text-decoration: none;
}
.dossier-single__back-link:hover { color: var(--color-rescue-orange); }
/* ============================================
DOSSIER - archiwum
============================================ */
.dossier-archive { background: var(--color-smoky-black); color: var(--color-off-white); padding-top: 48px; }
.dossier-archive__hero { padding: 80px 24px 48px; border-bottom: 1px solid rgba(255,255,255,0.15); }
@media (min-width: 768px) { .dossier-archive__hero { padding: 112px 48px 56px; } }
.dossier-archive__pretitle {
font-family: var(--font-mono); font-size: 11px; font-weight: 700;
letter-spacing: 0.3em; color: var(--color-acid-yellow); margin: 0 0 20px;
}
.dossier-archive__title {
font-family: var(--font-display); font-weight: 700;
letter-spacing: -0.04em; line-height: 0.85;
font-size: clamp(64px, 14vw, 180px); text-transform: uppercase; margin: 0 0 24px;
}
.dossier-archive__desc {
font-size: clamp(16px, 1.6vw, 20px); line-height: 1.5;
max-width: 680px; color: rgba(255,255,255,0.75); margin: 0;
}
.dossier-archive__list { padding: 56px 24px 96px; }
@media (min-width: 768px) { .dossier-archive__list { padding: 72px 48px 112px; } }
.dossier-archive__grid {
display: grid; grid-template-columns: 1fr; gap: 1.5rem;
}
@media (min-width: 640px) { .dossier-archive__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .dossier-archive__grid { grid-template-columns: repeat(3, 1fr); } }
.dossier-arch-card {
display: flex; flex-direction: column;
border: 1px solid rgba(255,255,255,0.15);
text-decoration: none !important; color: var(--color-off-white) !important;
transition: border-color 0.3s, transform 0.2s;
}
.dossier-arch-card:hover { border-color: var(--color-acid-yellow); transform: translateY(-2px); }
.dossier-arch-card__img { aspect-ratio: 16/10; background: #1a1a1f; position: relative; overflow: hidden; }
.dossier-arch-card__img img {
width: 100%; height: 100%; object-fit: cover;
filter: grayscale(100%) contrast(1.1); transition: filter 0.4s, transform 0.5s;
}
.dossier-arch-card:hover .dossier-arch-card__img img { filter: grayscale(0); transform: scale(1.04); }
.dossier-arch-card__num {
position: absolute; top: 10px; left: 12px;
font-family: var(--font-mono); font-size: 11px; font-weight: 700;
letter-spacing: 0.15em; color: var(--color-acid-yellow);
text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}
.dossier-arch-card__body { padding: 20px; display: flex; flex-direction: column; flex-grow: 1; }
.dossier-arch-card__label {
font-family: var(--font-mono); font-size: 10px; font-weight: 700;
letter-spacing: 0.2em; color: var(--color-acid-yellow); margin-bottom: 10px;
}
.dossier-arch-card__title {
font-family: var(--font-display); font-weight: 700; font-size: 18px;
line-height: 1.1; text-transform: uppercase; margin: 0 0 8px;
}
.dossier-arch-card__sub { font-size: 13px; line-height: 1.4; color: rgba(255,255,255,0.6); margin: 0 0 16px; flex-grow: 1; }
.dossier-arch-card__footer {
display: flex; align-items: center; justify-content: space-between;
padding-top: 14px; border-top: 1px dashed rgba(255,255,255,0.15);
}
.dossier-arch-card__channels {
font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.15em;
color: rgba(255,255,255,0.5);
}
.dossier-arch-card__cta {
font-family: var(--font-mono); font-size: 10px; font-weight: 700;
letter-spacing: 0.15em; color: var(--color-acid-yellow);
}
.dossier-archive__empty {
text-align: center; padding: 80px 24px;
font-family: var(--font-mono); font-size: 13px;
letter-spacing: 0.2em; color: rgba(255,255,255,0.4);
border: 1px dashed rgba(255,255,255,0.15);
}
/* ============================================
FIX: karty wstrzykiwane przez AJAX (archiwum, blog)
nie są obserwowane przez scroll observer, więc muszą
być widoczne od razu (inaczej zostają opacity:0)
============================================ */
#archiwum-results [data-animate],
#aa-blog-content [data-animate],
.archiwum__grid [data-animate],
.archiwum-card[data-animate] {
opacity: 1 !important;
transform: none !important;
}
/* ============================================
POLECANE_NA_DZIŚ - 3 karty codziennie losowane
============================================ */
.polecane {
background: var(--color-smoky-black);
color: var(--color-off-white);
padding: 56px 24px;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
@media (min-width: 768px) { .polecane { padding: 72px 48px; } }
.polecane__header {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
margin-bottom: 32px;
padding-bottom: 16px;
border-bottom: 1px dashed rgba(255,255,255,0.2);
flex-wrap: wrap;
}
.polecane__label {
font-family: var(--font-mono);
font-size: 13px; font-weight: 700;
letter-spacing: 0.25em; text-transform: uppercase;
color: var(--color-acid-yellow);
}
.polecane__date {
font-family: var(--font-mono);
font-size: 12px; letter-spacing: 0.2em;
color: rgba(255,255,255,0.5);
}
.polecane__grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
}
@media (min-width: 640px) { .polecane__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .polecane__grid { grid-template-columns: repeat(3, 1fr); } }
.polecane-card {
display: flex;
flex-direction: column;
border: 1px solid rgba(255,255,255,0.15);
text-decoration: none !important;
color: var(--color-off-white) !important;
transition: border-color 0.3s, transform 0.2s, background 0.3s;
}
.polecane-card:hover {
border-color: var(--color-acid-yellow);
transform: translateY(-3px);
text-decoration: none !important;
}
.polecane-card__top {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.polecane-card__num {
font-family: var(--font-mono);
font-size: 12px; font-weight: 700;
letter-spacing: 0.2em;
color: var(--color-acid-yellow);
}
.polecane-card__cat {
font-family: var(--font-mono);
font-size: 9px; font-weight: 700;
letter-spacing: 0.18em;
padding: 3px 8px;
background: var(--color-acid-yellow);
color: var(--color-smoky-black);
}
.polecane-card__img {
aspect-ratio: 16/10;
background: #1a1a1f;
overflow: hidden;
}
.polecane-card__img img {
width: 100%; height: 100%; object-fit: cover;
filter: grayscale(100%) contrast(1.1);
transition: filter 0.4s, transform 0.5s;
display: block;
}
.polecane-card:hover .polecane-card__img img {
filter: grayscale(0) contrast(1);
transform: scale(1.04);
}
.polecane-card__body {
padding: 18px 20px;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.polecane-card__date {
font-family: var(--font-mono);
font-size: 10px; letter-spacing: 0.2em;
color: var(--color-acid-yellow);
margin-bottom: 8px;
}
.polecane-card__title {
font-family: var(--font-display);
font-weight: 700;
font-size: 17px;
line-height: 1.18;
letter-spacing: -0.01em;
text-transform: uppercase;
margin: 0 0 10px;
color: var(--color-off-white);
}
.polecane-card__excerpt {
font-size: 13px;
line-height: 1.5;
color: rgba(255,255,255,0.6);
margin: 0;
flex-grow: 1;
}
.polecane-card__cta {
display: block;
padding: 14px 20px;
border-top: 1px dashed rgba(255,255,255,0.15);
font-family: var(--font-mono);
font-size: 10px; font-weight: 700;
letter-spacing: 0.2em; text-transform: uppercase;
color: var(--color-acid-yellow);
}
.polecane-card:hover .polecane-card__cta {
color: var(--color-rescue-orange);
}
/* ============================================
ARCHIWUM_MINI - kompaktowa wyszukiwarka pod hero
============================================ */
.archiwum-mini {
background: var(--color-smoky-black);
color: var(--color-off-white);
padding: 56px 24px;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
@media (min-width: 768px) { .archiwum-mini { padding: 72px 48px; } }
.archiwum-mini__inner { max-width: 900px; }
.archiwum-mini__label {
font-family: var(--font-mono);
font-size: 11px; font-weight: 700;
letter-spacing: 0.3em; text-transform: uppercase;
color: var(--color-acid-yellow);
margin: 0 0 16px;
}
.archiwum-mini__heading {
font-family: var(--font-mono);
font-size: clamp(14px, 2vw, 20px);
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-off-white);
margin: 0 0 28px;
}
.archiwum-mini__search {
display: flex;
align-items: stretch;
border: 2px solid var(--color-off-white);
margin-bottom: 24px;
transition: border-color 0.2s;
}
.archiwum-mini__search:focus-within { border-color: var(--color-acid-yellow); }
.archiwum-mini__prompt {
display: flex; align-items: center;
padding: 0 16px;
font-family: var(--font-mono); font-size: 20px; font-weight: 700;
color: var(--color-acid-yellow);
background: rgba(225,255,0,0.05);
}
.archiwum-mini__input {
flex: 1; background: transparent; border: none;
color: var(--color-off-white);
padding: 16px;
font-family: var(--font-mono); font-size: 15px; letter-spacing: 0.05em;
outline: none; min-width: 0;
}
.archiwum-mini__input::placeholder { color: rgba(255,255,255,0.35); }
.archiwum-mini__btn {
background: var(--color-acid-yellow);
color: var(--color-smoky-black);
border: none; padding: 0 24px;
font-family: var(--font-mono); font-size: 12px; font-weight: 700;
letter-spacing: 0.15em; text-transform: uppercase;
cursor: pointer; white-space: nowrap;
transition: background 0.2s;
}
.archiwum-mini__btn:hover { background: var(--color-rescue-orange); color: var(--color-off-white); }
@media (max-width: 600px) {
.archiwum-mini__search { flex-wrap: wrap; }
.archiwum-mini__btn { width: 100%; padding: 14px; }
}
.archiwum-mini__topics {
display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
}
.archiwum-mini__topics-label {
font-family: var(--font-mono); font-size: 10px;
letter-spacing: 0.25em; text-transform: uppercase;
color: rgba(255,255,255,0.4);
margin-right: 4px;
}
.archiwum-mini__tag {
font-family: var(--font-mono); font-size: 11px;
letter-spacing: 0.1em;
padding: 7px 13px;
border: 1px solid rgba(255,255,255,0.25);
color: var(--color-off-white);
text-decoration: none;
transition: all 0.2s;
}
.archiwum-mini__tag:hover {
background: var(--color-acid-yellow);
color: var(--color-smoky-black);
border-color: var(--color-acid-yellow);
}
.hero__content--xray .hero__search {
background: transparent;
backdrop-filter: none;
border-color: var(--color-smoky-black);
}
.hero__content--xray .hero__search-prompt { color: var(--color-smoky-black); }
.hero__content--xray .hero__search-input { color: var(--color-smoky-black); }
.hero__content--xray .hero__search-input::placeholder { color: rgba(9,10,12,0.5); }
.hero__content--xray .hero__search-btn {
background: var(--color-smoky-black);
color: var(--color-acid-yellow);
}
.hero__content--xray .hero__search-topics-label { color: rgba(9,10,12,0.6); }
.hero__content--xray .hero__search-tag {
border-color: rgba(9,10,12,0.4);
color: var(--color-smoky-black);
}
/* ============================================
WYSZUKIWARKA W HERO (baner)
============================================ */
.hero__search {
display: flex;
align-items: stretch;
max-width: 640px;
margin: 2rem auto 0;
border: 2px solid var(--color-off-white);
background: rgba(9,10,12,0.65);
backdrop-filter: blur(6px);
pointer-events: auto;
animation: fade-up 0.6s 0.6s ease-out backwards;
transition: border-color 0.2s;
}
.hero__search:focus-within { border-color: var(--color-acid-yellow); }
.hero__search-prompt {
display: flex; align-items: center;
padding: 0 14px;
font-family: var(--font-mono); font-size: 18px; font-weight: 700;
color: var(--color-acid-yellow);
}
.hero__search-input {
flex: 1; background: transparent; border: none;
color: var(--color-off-white);
padding: 14px 12px;
font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.03em;
outline: none; min-width: 0;
text-align: left;
}
.hero__search-input::placeholder { color: rgba(255,255,255,0.4); }
.hero__search-btn {
background: var(--color-acid-yellow);
color: var(--color-smoky-black);
border: none; padding: 0 20px;
font-family: var(--font-mono); font-size: 11px; font-weight: 700;
letter-spacing: 0.15em; text-transform: uppercase;
cursor: pointer; white-space: nowrap;
transition: background 0.2s;
}
.hero__search-btn:hover { background: var(--color-rescue-orange); color: var(--color-off-white); }
@media (max-width: 600px) {
.hero__search { flex-wrap: wrap; }
.hero__search-btn { width: 100%; padding: 12px; }
}
.hero__search-topics {
display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
gap: 8px;
max-width: 640px;
margin: 16px auto 0;
pointer-events: auto;
animation: fade-up 0.6s 0.7s ease-out backwards;
}
.hero__search-topics-label {
font-family: var(--font-mono); font-size: 9px;
letter-spacing: 0.25em; text-transform: uppercase;
color: rgba(255,255,255,0.45);
}
.hero__search-tag {
font-family: var(--font-mono); font-size: 10px;
letter-spacing: 0.08em;
padding: 5px 11px;
border: 1px solid rgba(255,255,255,0.3);
color: var(--color-off-white);
text-decoration: none;
transition: all 0.2s;
}
.hero__search-tag:hover {
background: var(--color-acid-yellow);
color: var(--color-smoky-black);
border-color: var(--color-acid-yellow);
}
/* ============================================================
HERO PORTRET - postać + góry parallax + animowana mgła
============================================================ */
.hero--portrait {
position: relative;
min-height: 100vh; /* fallback dla starszych przeglądarek */
min-height: 100svh; /* stabilna wysokość mobile (bez skoku paska adresu) */
width: 100%;
overflow: hidden;
background: var(--color-smoky-black);
display: flex;
align-items: center;
cursor: default;
}
/* WARSTWA 1: góry w tle z parallax/zoom */
.hero-bg-mountains {
position: absolute;
inset: 0;
z-index: 1;
overflow: hidden;
}
.hero-bg-mountains__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
/* gwarancja pokrycia całego kadru niezależnie od proporcji pliku
(rozmiar boxa zależy tylko od kontenera => zero CLS) */
max-width: none;
transform: scale(1.12);
object-fit: cover;
filter: grayscale(100%) contrast(1.4) brightness(0.42);
animation: hero-mountains-drift 28s ease-in-out infinite alternate;
will-change: transform;
}
@keyframes hero-mountains-drift {
0% { transform: scale(1.12) translate(0, 0); }
100% { transform: scale(1.2) translate(-1.3%, -0.9%); }
}
.hero-bg-mountains__darken {
position: absolute;
inset: 0;
background:
linear-gradient(90deg, rgba(9,10,12,0.9) 0%, rgba(9,10,12,0.5) 38%, rgba(9,10,12,0.05) 62%, rgba(9,10,12,0.3) 100%);
}
/* X-RAY: pionowa smuga przesuwająca się przez góry, ujawnia jaśniejszy detal */
.hero-bg-mountains__scanbeam {
position: absolute;
top: 0; bottom: 0;
width: 22%;
left: -25%;
background: linear-gradient(90deg,
transparent 0%,
rgba(225,255,0,0.04) 40%,
rgba(225,255,0,0.1) 50%,
rgba(225,255,0,0.04) 60%,
transparent 100%);
mix-blend-mode: screen;
animation: hero-xray-sweep 9s ease-in-out infinite;
pointer-events: none;
}
.hero-bg-mountains__scanbeam::after {
content: "";
position: absolute;
top: 0; bottom: 0; left: 50%;
width: 1px;
background: rgba(225,255,0,0.4);
}
@keyframes hero-xray-sweep {
0% { left: -25%; opacity: 0; }
15% { opacity: 1; }
85% { opacity: 1; }
100% { left: 100%; opacity: 0; }
}
/* WARSTWA 2: animowana mgła - WYRAŹNA, nad przyciemnieniem, pod postacią */
.hero-mist {
position: absolute;
inset: 0;
z-index: 5;
pointer-events: none;
overflow: hidden;
mix-blend-mode: screen;
}
.hero-mist__layer {
position: absolute;
width: 180%;
height: 180%;
left: -40%;
top: -40%;
background-repeat: repeat;
will-change: transform;
}
.hero-mist__layer--1 {
background:
radial-gradient(ellipse 50% 30% at 40% 72%, rgba(235,240,245,0.5), transparent 60%),
radial-gradient(ellipse 45% 26% at 70% 68%, rgba(220,228,238,0.42), transparent 56%),
radial-gradient(ellipse 55% 22% at 55% 85%, rgba(240,245,250,0.4), transparent 58%);
opacity: 0.8;
animation: hero-mist-drift-1 30s linear infinite;
}
.hero-mist__layer--2 {
background:
radial-gradient(ellipse 50% 24% at 60% 78%, rgba(225,255,0,0.12), transparent 58%),
radial-gradient(ellipse 42% 30% at 25% 65%, rgba(225,232,240,0.4), transparent 54%),
radial-gradient(ellipse 48% 24% at 80% 72%, rgba(230,238,245,0.36), transparent 56%);
opacity: 0.72;
animation: hero-mist-drift-2 40s linear infinite;
}
.hero-mist__layer--3 {
background:
radial-gradient(ellipse 60% 26% at 78% 75%, rgba(218,226,236,0.38), transparent 58%),
radial-gradient(ellipse 40% 22% at 45% 60%, rgba(240,245,250,0.32), transparent 50%);
opacity: 0.65;
animation: hero-mist-drift-3 50s linear infinite;
}
@keyframes hero-mist-drift-1 {
0% { transform: translateX(0) translateY(0) scale(1); }
50% { transform: translateX(9%) translateY(-4%) scale(1.14); }
100% { transform: translateX(0) translateY(0) scale(1); }
}
@keyframes hero-mist-drift-2 {
0% { transform: translateX(0) translateY(0) scale(1.08); }
50% { transform: translateX(-11%) translateY(3%) scale(1); }
100% { transform: translateX(0) translateY(0) scale(1.08); }
}
@keyframes hero-mist-drift-3 {
0% { transform: translateX(0) translateY(0) scale(1); }
50% { transform: translateX(7%) translateY(5%) scale(1.16); }
100% { transform: translateX(0) translateY(0) scale(1); }
}
/* WARSTWA 3: postać po prawej */
.hero-figure {
position: absolute;
z-index: 3;
right: 0;
bottom: 0;
height: 96%;
display: flex;
align-items: flex-end;
pointer-events: none;
animation: hero-figure-in 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}
.hero-figure__img {
height: 100%;
width: auto;
object-fit: contain;
object-position: bottom right;
filter: drop-shadow(0 0 40px rgba(9,10,12,0.6));
}
@keyframes hero-figure-in {
from { opacity: 0; transform: translateX(40px); }
to { opacity: 1; transform: translateX(0); }
}
/* WARSTWA 4: treść po lewej */
.hero-inner {
position: relative;
z-index: 4;
width: 100%;
max-width: 1400px;
margin: 0 auto;
padding: 0 48px;
}
.hero-content {
max-width: 620px;
}
.hero-content__pretitle {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--color-acid-yellow);
margin: 0 0 24px;
animation: fade-up 0.6s ease-out backwards;
}
.hero-content__title {
font-family: var(--font-display);
font-weight: 700;
text-transform: uppercase;
letter-spacing: -0.04em;
line-height: 0.85;
font-size: clamp(56px, 8vw, 130px);
color: var(--color-off-white);
margin: 0;
animation: fade-up 0.6s 0.15s ease-out backwards;
}
.hero-content__subtitle {
font-family: var(--font-sans);
font-size: clamp(16px, 1.6vw, 20px);
line-height: 1.4;
color: rgba(255,255,255,0.75);
margin: 20px 0 0;
max-width: 420px;
animation: fade-up 0.6s 0.3s ease-out backwards;
}
/* Wyszukiwarka */
.hero-search {
display: flex;
align-items: stretch;
max-width: 520px;
margin: 36px 0 0;
border: 2px solid var(--color-off-white);
background: rgba(9,10,12,0.6);
backdrop-filter: blur(6px);
animation: fade-up 0.6s 0.45s ease-out backwards;
transition: border-color 0.2s;
}
.hero-search:focus-within { border-color: var(--color-acid-yellow); }
.hero-search__prompt {
display: flex; align-items: center;
padding: 0 14px;
font-family: var(--font-mono); font-size: 18px; font-weight: 700;
color: var(--color-acid-yellow);
}
.hero-search__input {
flex: 1; background: transparent; border: none;
color: var(--color-off-white);
padding: 15px 12px;
font-family: var(--font-mono); font-size: 14px;
outline: none; min-width: 0;
}
.hero-search__input::placeholder { color: rgba(255,255,255,0.4); }
.hero-search__btn {
background: var(--color-acid-yellow);
color: var(--color-smoky-black);
border: none; padding: 0 22px;
font-family: var(--font-mono); font-size: 11px; font-weight: 700;
letter-spacing: 0.15em; text-transform: uppercase;
cursor: pointer; white-space: nowrap;
transition: background 0.2s, color 0.2s;
}
.hero-search__btn:hover { background: var(--color-rescue-orange); color: var(--color-off-white); }
.hero-search__topics {
display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
max-width: 520px;
margin: 16px 0 0;
animation: fade-up 0.6s 0.55s ease-out backwards;
}
.hero-search__topics-label {
font-family: var(--font-mono); font-size: 9px;
letter-spacing: 0.25em; text-transform: uppercase;
color: rgba(255,255,255,0.45);
}
.hero-search__tag {
font-family: var(--font-mono); font-size: 10px;
letter-spacing: 0.08em;
padding: 5px 11px;
border: 1px solid rgba(255,255,255,0.3);
color: var(--color-off-white);
text-decoration: none;
transition: all 0.2s;
}
.hero-search__tag:hover {
background: var(--color-acid-yellow);
color: var(--color-smoky-black);
border-color: var(--color-acid-yellow);
}
/* GPS w wersji portret */
.hero__gps--portrait {
position: absolute;
z-index: 5;
top: 50%;
right: 24px;
transform: translateY(-50%);
text-align: right;
}
/* RESPONSYWNOŚĆ */
@media (max-width: 1024px) {
.hero-figure { height: 70%; opacity: 0.55; right: -5%; }
.hero-content { max-width: 100%; }
.hero__gps--portrait { display: none; }
}
@media (max-width: 600px) {
.hero-inner { padding: 0 24px; }
.hero-figure { opacity: 0.3; height: 60%; }
.hero-search { flex-wrap: wrap; max-width: 100%; }
.hero-search__btn { width: 100%; padding: 13px; }
.hero-search__input { text-align: left; }
}
/* Respektuj preferencję ograniczenia ruchu */
@media (prefers-reduced-motion: reduce) {
.hero-bg-mountains__img,
.hero-mist__layer { animation: none; }
}
/* ============================================================
HERO ACID ALPINISM - elementy HUD / brutalistyczne FX
============================================================ */
/* Siatka kropek/linii */
.hero-fx {
position: absolute;
inset: 0;
pointer-events: none;
}
.hero-fx--grid {
z-index: 3;
background-image:
linear-gradient(rgba(225,255,0,0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(225,255,0,0.04) 1px, transparent 1px);
background-size: 56px 56px;
mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 30%, transparent 75%);
-webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 30%, transparent 75%);
}
/* Skanlinie poziome - TYLKO na tle (pod postacią) */
.hero-fx--scanlines {
z-index: 3;
background: repeating-linear-gradient(
0deg,
rgba(0,0,0,0) 0px,
rgba(0,0,0,0) 2px,
rgba(0,0,0,0.12) 3px,
rgba(0,0,0,0) 4px
);
opacity: 0.4;
animation: hero-scan-move 8s linear infinite;
}
@keyframes hero-scan-move {
0% { background-position-y: 0; }
100% { background-position-y: 56px; }
}
.hero-fx--vignette {
z-index: 3;
background: radial-gradient(ellipse 90% 85% at 50% 45%, transparent 50%, rgba(9,10,12,0.75) 100%);
}
/* Narożne ramki HUD - na tle, pod postacią */
.hero-hud { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.hero-hud__bracket {
position: absolute;
width: 48px; height: 48px;
border: 2px solid var(--color-acid-yellow);
opacity: 0.7;
}
.hero-hud__bracket--tl { top: 90px; left: 28px; border-right: none; border-bottom: none; }
.hero-hud__bracket--tr { top: 90px; right: 28px; border-left: none; border-bottom: none; }
.hero-hud__bracket--bl { bottom: 28px; left: 28px; border-right: none; border-top: none; }
.hero-hud__bracket--br { bottom: 28px; right: 28px; border-left: none; border-top: none; }
@media (min-width: 768px) {
.hero-hud__bracket { width: 64px; height: 64px; }
.hero-hud__bracket--tl, .hero-hud__bracket--tr { top: 100px; }
}
/* Techniczne etykiety krawędziowe */
.hero-hud__label {
position: absolute;
z-index: 4;
font-family: var(--font-mono);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.25em;
text-transform: uppercase;
color: rgba(225,255,0,0.55);
pointer-events: none;
}
.hero-hud__label--top {
top: 104px; left: 50%; transform: translateX(-50%);
white-space: nowrap;
}
.hero-hud__label--left {
left: 40px; top: 50%;
transform: rotate(-90deg) translateX(50%);
transform-origin: left center;
}
.hero-hud__readout {
position: absolute;
z-index: 4;
bottom: 40px; left: 50%; transform: translateX(-50%);
font-family: var(--font-mono);
font-size: 10px; font-weight: 700; letter-spacing: 0.2em;
color: rgba(255,255,255,0.5);
display: flex; align-items: center; gap: 8px;
pointer-events: none;
}
.hero-hud__dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--color-acid-yellow);
box-shadow: 0 0 8px var(--color-acid-yellow);
}
.hero-hud__blink {
color: var(--color-rescue-orange);
animation: hero-blink 1.2s steps(2) infinite;
}
@keyframes hero-blink { 0%,50% { opacity: 1; } 51%,100% { opacity: 0.15; } }
@media (max-width: 768px) {
.hero-hud__label--left, .hero-hud__label--top, .hero-hud__readout { display: none; }
}
/* Skanlinia przebiegająca przez postać */
.hero-figure__scanline {
position: absolute;
left: 0; right: 0;
height: 80px;
background: linear-gradient(0deg, transparent, rgba(225,255,0,0.12), transparent);
z-index: 1;
animation: hero-fig-scan 5s ease-in-out infinite;
pointer-events: none;
mix-blend-mode: screen;
}
@keyframes hero-fig-scan {
0% { top: -80px; opacity: 0; }
20% { opacity: 1; }
80% { opacity: 1; }
100% { top: 100%; opacity: 0; }
}
/* Postać nad wszystkimi FX tła (z-index 6) - mieści się w kadrze */
.hero-figure {
position: absolute;
z-index: 6;
right: 2%;
bottom: 0;
height: 94%;
display: flex;
align-items: flex-end;
pointer-events: none;
animation: hero-figure-in 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}
.hero-figure__img {
height: 100%;
width: auto;
object-fit: contain;
object-position: bottom right;
filter: drop-shadow(-20px 0 50px rgba(9,10,12,0.7));
}
@media (min-width: 1600px) {
.hero-figure { right: 6%; height: 92%; }
}
/* Treść ponad wszystkim */
.hero-inner { z-index: 8; }
.hero__gps--portrait { z-index: 8; }
/* Pretitle z migającym kursorem */
.hero-content__pretitle::after {
content: "_";
animation: hero-blink 1s steps(2) infinite;
color: var(--color-rescue-orange);
}
/* ============================================
PODCAST - ostatni odcinek
============================================ */
.podcast {
background: var(--color-smoky-black);
color: var(--color-off-white);
padding: 80px 24px;
border-top: 1px solid rgba(255,255,255,0.1);
}
@media (min-width: 768px) { .podcast { padding: 112px 48px; } }
.podcast__header { margin-bottom: 48px; }
.podcast__title {
font-family: var(--font-display);
font-weight: 700; letter-spacing: -0.04em; line-height: 0.9;
font-size: clamp(48px, 9vw, 110px); text-transform: uppercase;
margin: 0 0 16px;
}
.podcast__subtitle {
font-family: var(--font-mono);
font-size: 12px; font-weight: 700; letter-spacing: 0.2em;
text-transform: uppercase; color: var(--color-acid-yellow); margin: 0;
}
.podcast__body {
display: grid; grid-template-columns: 1fr; gap: 40px;
align-items: center;
}
@media (min-width: 900px) { .podcast__body { grid-template-columns: 1fr 1.3fr; gap: 56px; } }
.podcast__label {
font-family: var(--font-mono); font-size: 12px; font-weight: 700;
letter-spacing: 0.18em; color: var(--color-acid-yellow); margin-bottom: 16px;
}
.podcast__desc {
font-size: 17px; line-height: 1.6; color: rgba(255,255,255,0.75);
margin: 0 0 28px; max-width: 440px;
}
.podcast__cta {
display: inline-block;
font-family: var(--font-mono); font-size: 12px; font-weight: 700;
letter-spacing: 0.15em; text-transform: uppercase;
color: var(--color-smoky-black); background: var(--color-acid-yellow);
padding: 14px 24px; text-decoration: none;
transition: background 0.2s, color 0.2s;
}
.podcast__cta:hover { background: var(--color-rescue-orange); color: var(--color-off-white); }
.podcast__player {
border: 1px solid rgba(255,255,255,0.15);
padding: 8px; background: rgba(255,255,255,0.02);
}
.podcast__fallback {
display: flex; align-items: center; justify-content: center; gap: 14px;
padding: 48px 24px;
font-family: var(--font-mono); font-size: 13px; font-weight: 700;
letter-spacing: 0.2em; color: var(--color-acid-yellow);
text-decoration: none; transition: background 0.2s;
}
.podcast__fallback:hover { background: rgba(225,255,0,0.06); }
.podcast__fallback-icon {
width: 40px; height: 40px; border-radius: 50%;
border: 2px solid var(--color-acid-yellow);
display: flex; align-items: center; justify-content: center;
font-size: 14px;
}
/* ============================================
FIX CLS: rezerwacja miejsca dla obrazów lazy-load
Kluczowe dla LiteSpeed lazy-load, który podmienia src
na placeholder do momentu załadowania.
============================================ */
/* Wszystkie karty z obrazami — kontener rezerwuje wysokość */
.polecane-card__img,
.gear-card__thumb,
.szlak-card__img,
.dossier-feat__media,
.aa-blog__card-img,
/* Placeholder LiteSpeed - wymuś rozmiar rodzica dopóki obraz się nie załaduje */
img[data-lazyloaded],
img.litespeed-loaded,
img[data-ll-status] {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Obrazy w kartach - zablokuj skoki przy hover-transform */
.polecane-card__img img,
.gear-card__thumb img,
.szlak-card__img img,
.dossier-feat__media img,
.aa-blog__card-img img {
will-change: transform;
contain: layout paint;
}
/* ============================================
NEWSLETTER - minimalny styling pluginu MailerLite
Prosty i niezawodny. Bez agresywnych resetów.
Wygląd niech ustawi się w pluginie / MailerLite.
============================================ */
/* Sam kontener na shortcode - trochę tła + ramka acid lime */
.newsletter__shortcode-wrap {
padding: 0;
}
/* Pola email z pluginu MailerLite - styl Acid Alpinism */
.newsletter__shortcode-wrap input[type="email"],
.newsletter__shortcode-wrap input[type="text"] {
width: 100%;
background: rgba(9,10,12,0.7);
border: 2px solid var(--color-off-white);
color: var(--color-off-white);
padding: 14px 18px;
font-family: var(--font-mono);
font-size: 14px;
letter-spacing: 0.05em;
outline: none;
border-radius: 0;
box-sizing: border-box;
transition: border-color 0.2s;
margin-bottom: 12px;
}
.newsletter__shortcode-wrap input[type="email"]::placeholder,
.newsletter__shortcode-wrap input[type="text"]::placeholder {
color: rgba(255,255,255,0.4);
font-family: var(--font-mono);
text-transform: uppercase;
letter-spacing: 0.1em;
font-size: 12px;
}
.newsletter__shortcode-wrap input[type="email"]:focus,
.newsletter__shortcode-wrap input[type="text"]:focus {
border-color: var(--color-acid-yellow);
}
/* Przycisk - acid lime */
.newsletter__shortcode-wrap button,
.newsletter__shortcode-wrap input[type="submit"] {
display: block;
width: 100%;
background: var(--color-acid-yellow);
color: var(--color-smoky-black);
border: 2px solid var(--color-acid-yellow);
padding: 14px 24px;
font-family: var(--font-mono);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
cursor: pointer;
border-radius: 0;
box-sizing: border-box;
transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.newsletter__shortcode-wrap button:hover,
.newsletter__shortcode-wrap input[type="submit"]:hover {
background: var(--color-rescue-orange);
color: var(--color-off-white);
border-color: var(--color-rescue-orange);
}
/* Labele - drobny mono - opis nad polem email */
.newsletter__shortcode-wrap label {
display: block;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: rgba(255,255,255,0.6);
margin-bottom: 6px;
}
/* Description z pluginu (nasz tekst RODO) - mono, mniejszy, w bloku */
.newsletter__shortcode-wrap p {
font-family: var(--font-mono);
font-size: 11px;
line-height: 1.5;
color: rgba(255,255,255,0.7);
margin: 12px 0;
padding: 10px 14px;
background: rgba(9,10,12,0.4);
border-left: 2px solid var(--color-acid-yellow);
}
.newsletter__shortcode-wrap p a {
color: var(--color-acid-yellow);
text-decoration: underline;
text-underline-offset: 2px;
}
.newsletter__shortcode-wrap p a:hover {
color: var(--color-rescue-orange);
}
/* Komunikat sukcesu - acid lime */
.newsletter__shortcode-wrap .success,
.newsletter__shortcode-wrap span[style*="color"] {
color: var(--color-acid-yellow) !important;
font-family: var(--font-mono);
font-size: 13px;
padding: 12px 16px;
background: rgba(225,255,0,0.08);
border: 1px solid var(--color-acid-yellow);
display: block;
margin-top: 10px;
}
/* Mobile - input trochę większy dla dotyku */
@media (max-width: 767px) {
.newsletter__shortcode-wrap input[type="email"],
.newsletter__shortcode-wrap input[type="text"] {
font-size: 16px; /* iOS auto-zoom fix */
padding: 16px 18px;
}
.newsletter__shortcode-wrap button {
padding: 16px 20px;
font-size: 13px;
}
.newsletter__shortcode-wrap p {
font-size: 12px;
}
}
/* ==========================================================================
POPRAWKI 1.2.0 (audyt z 2026-10-16)
Dostępność WCAG 2.2 AA, układ na telefonie, ograniczenie ruchu.
Paleta bez zmian; przyciemnione tylko odcienie poniżej progu kontrastu.
========================================================================== */
:root {
/* Pomarańcz do tekstu na jasnym tle: #FF4500 na #F4F4F5 daje 3,13:1,
#B83200 daje 5,5:1 (próg dla małego tekstu: 4,5:1). */
--color-rescue-orange-text: #B83200;
/* Szarości na ciemnym tle podniesione do co najmniej 4,5:1. */
--color-muted-on-dark: #9B9C9E;
/* Szarości na jasnym tle (#EFEFF0): #55575A daje 6,7:1. */
--color-muted-on-light: #55575A;
}
/* --- Telefon: kafelki „Polecane na dziś” wychodziły poza ekran (774 px przy 390 px).
Kolumna 1fr rozciągała się do naturalnej szerokości obrazka. --- */
.polecane__grid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .polecane__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .polecane__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.polecane-card { min-width: 0; }
.polecane-card__title, .polecane-card__excerpt { overflow-wrap: anywhere; }
/* --- Elementy zamienione na nagłówki (h2/h3) w 1.2.0: bez zmiany wyglądu --- */
h2.polecane__label,
h3.gear-grid__col-title,
h2.site-footer__col-title { margin-top: 0; line-height: inherit; }
h2.polecane__label, h3.gear-grid__col-title { margin-bottom: 0; }
h2.site-footer__col-title { font-weight: 400; }
.site-footer__contact-link { color: var(--color-acid-yellow); }
a.recovery__footer-btn { color: inherit; text-decoration: none; }
.archive-header--404 { min-height: 70vh; display: flex; align-items: center; }
.newsletter__right .newsletter__disclaimer { margin-top: 1rem; }
/* --- Kontrast: pomarańczowy tekst na jasnym tle --- */
.post-single__byline-label,
.post-single__tags-label,
.post-single__sidebar-label,
.post-single__comments .required-field-message,
.post-single__comments .required,
.kontakt-v2__hero-pretitle,
.kontakt-v2__rules .kontakt-v2__section-tag,
.kontakt-v2__readers .kontakt-v2__section-tag { color: var(--color-rescue-orange-text); }
/* Reguła #reply-title wyżej używa !important, więc tu też trzeba */
.comments-area > h3,
.comments-title,
#reply-title { color: var(--color-rescue-orange-text) !important; }
/* --- Kontrast: pomarańczowy dopisek na żółtym tle (3,0:1 → 5,3:1) --- */
.biblioteka__cta-tag,
.book-cta__tag { color: var(--color-rescue-orange-text); }
/* --- Kontrast: szary tekst na jasnym tle (spis treści, metadane wpisu) --- */
.post-toc__link,
.post-toc__item--h3 .post-toc__link,
.post-single__sidebar-key { color: var(--color-muted-on-light); }
/* --- Kontrast: tekst na pomarańczowym tle (czarny daje 5,7:1, biały tylko 3,4:1) --- */
.blog-section--raporty .blog-grid-standard__post-date { color: var(--color-smoky-black); opacity: 1; }
.blog-section--sprzet .blog-section__cta { color: var(--color-smoky-black); }
.aa-blog__card-cat--raporty { color: var(--color-smoky-black); }
/* --- Kontrast: szary tekst na ciemnym tle --- */
.summit-log__stats { opacity: 1; color: var(--color-muted-on-dark); }
.site-footer__version { color: var(--color-muted-on-dark); }
/* Duży tytuł „BIBLIOTEKA.”: celowo przygaszony (wcześniej opacity 0,2 = 1,2:1),
teraz kolor zamiast przezroczystości, co najmniej 3:1 dla dużego tekstu. */
.books__title { opacity: 1; color: #707275; }
/* --- Newsletter: opis zgody w MailerLite był żółty na oliwkowym (2,7:1) --- */
.newsletter__shortcode-wrap .mailerlite-form-description p { background: var(--color-smoky-black); }
.newsletter__shortcode-wrap .mailerlite-form-description a,
.newsletter__shortcode-wrap .mailerlite-form-description strong { color: var(--color-acid-yellow); }
/* --- Widoczny fokus z klawiatury (wcześniej outline: none w polach wyszukiwania) --- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
outline: 3px solid var(--color-acid-yellow);
outline-offset: 2px;
box-shadow: 0 0 0 5px var(--color-smoky-black);
}
.hero-search:focus-within,
.archiwum__search:focus-within,
.aa-blog__search:focus-within { outline: 3px solid var(--color-acid-yellow); outline-offset: 2px; }
.hero-search__input:focus-visible,
.archiwum__search-input:focus-visible,
.aa-blog__search-input:focus-visible { outline: none; box-shadow: none; }
/* --- Cele dotykowe min. 24×24 px (WCAG 2.2, kryterium 2.5.8) --- */
.site-header__nav-link,
.site-footer__col-list a,
.site-footer__legal a,
.post-single__tag,
.hero-search__tag { display: inline-flex; align-items: center; min-height: 24px; }
.site-header__menu-btn { min-width: 44px; min-height: 44px; }
.site-header__menu-icon { font-family: monospace; font-size: 14px; }
.mobile-menu a { display: block; padding-top: 10px; padding-bottom: 10px; }
/* --- CLS na komputerze (0,189): skaner w hero animował właściwość „left”,
więc każda klatka była przesunięciem układu. Ten sam ruch przez transform
(element ma 22% szerokości: -25% kontenera = -113,6%, 100% = 454,5%). --- */
.hero-bg-mountains__scanbeam {
left: 0;
will-change: transform, opacity;
animation-name: aa-hero-scan-sweep;
}
@keyframes aa-hero-scan-sweep {
0% { transform: translateX(-113.6%); opacity: 0; }
15% { opacity: 1; }
85% { opacity: 1; }
100% { transform: translateX(454.5%); opacity: 0; }
}
/* --- Ograniczenie ruchu: zatrzymanie animacji hero, nie tylko ich skrócenie --- */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto !important; }
.hero-bg-mountains__img,
.hero-bg-mountains__scanbeam,
.hero-mist__layer,
.hero-fx,
.hero-hud__blink,
.hero-hud__dot { animation: none !important; transition: none !important; }
.hero-bg-mountains__scanbeam { display: none; }
[data-animate] { opacity: 1 !important; transform: none !important; }
}
/* ==========================================================================
LIFTING 1.4.0: szlif wpisów
Te same kolory i krój, nowocześniejsze wykonanie. Bez ciężkich efektów:
pasek postępu i przejścia stron w samym CSS, ruch wyłączany przy
„ogranicz ruch”.
========================================================================== */
/* --- Płynne przejścia między stronami (Chrome, Edge, Safari 18.2+) --- */
@media (prefers-reduced-motion: no-preference) {
@view-transition { navigation: auto; }
}
/* --- Pasek postępu czytania --- */
.aa-progress {
position: fixed; top: 0; left: 0; right: 0; height: 3px;
z-index: 1001; pointer-events: none;
}
.aa-progress__bar {
display: block; height: 100%; width: 100%;
background: var(--color-rescue-orange);
transform: scaleX(0); transform-origin: 0 50%;
}
@supports (animation-timeline: scroll()) {
.aa-progress__bar { animation: aa-progress-grow linear both; animation-timeline: scroll(root); }
}
@keyframes aa-progress-grow { to { transform: scaleX(1); } }
.admin-bar .aa-progress { top: 32px; }
/* --- Tekst wpisu: wygodniejsze czytanie --- */
.post-single__body {
max-width: 68ch;
font-size: 1.125rem;
line-height: 1.75;
}
@media (min-width: 768px) { .post-single__body { font-size: 1.1875rem; } }
.post-single__body p { margin: 0 0 1.4em; }
.post-single__body h2,
.post-single__body h3 { scroll-margin-top: 96px; text-wrap: balance; }
.post-single__body h2 { margin: 2.6em 0 0.8em; }
.post-single__body h3 { margin: 2em 0 0.6em; }
.post-single__body > :first-child { margin-top: 0; }
.post-single__body p, .post-single__body li { text-wrap: pretty; }
.post-single__body ul,
.post-single__body ol { padding-left: 1.4em; margin: 0 0 1.4em; }
.post-single__body li { margin-bottom: 0.4em; }
.post-single__body li::marker { color: var(--color-rescue-orange-text); }
.post-single__body a {
color: inherit;
text-decoration: underline;
text-decoration-color: var(--color-rescue-orange);
text-decoration-thickness: 2px;
text-underline-offset: 3px;
}
.post-single__body a:hover { text-decoration-color: var(--color-smoky-black); }
.post-single__body blockquote {
margin: 2em 0;
padding: 0.2em 0 0.2em 1.25em;
border-left: 4px solid var(--color-acid-yellow);
font-size: 1.15em;
line-height: 1.55;
font-weight: 700;
background: none;
}
.post-single__body blockquote p:last-child { margin-bottom: 0; }
.post-single__body figure { margin: 2em 0; }
.post-single__body figcaption,
.post-single__body .wp-element-caption {
margin-top: 0.6em;
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.02em;
color: var(--color-muted-on-light);
}
.post-single__body img { height: auto; }
/* Etykiety pisane zwykłym językiem: bez wersalików i rozstrzelenia */
.post-single__sidebar-label,
.post-single__byline-label,
.post-single__tags-label,
.post-single__sidebar-key {
text-transform: none;
letter-spacing: 0.02em;
}
.post-single__sidebar-label { font-size: 12px; }
.post-single__sidebar-key { font-size: 12px; }
/* --- Spis treści na komputerze --- */
.post-toc {
border: 0;
background: none;
padding: 0;
margin-bottom: 8px;
}
.post-toc .post-single__sidebar-label { border-bottom: 0; padding-bottom: 0; margin-bottom: 0.5rem; }
.post-toc__list {
counter-reset: aa-toc; margin: 0; padding: 0; list-style: none;
position: relative;
}
/* Jedna ciągła szyna: szare tło + pomarańczowe wypełnienie do miejsca czytania */
.post-toc__list::before,
.post-toc__list::after {
content: '';
position: absolute; left: 0; top: 0; width: 2px;
border-radius: 2px;
}
.post-toc__list::before { bottom: 0; background: rgba(9, 10, 12, 0.12); }
.post-toc__list::after {
height: var(--aa-fill, 0px);
background: var(--color-rescue-orange);
transition: height 0.15s linear;
}
@media (prefers-reduced-motion: reduce) {
.post-toc__list::after { transition: none; }
}
.post-toc__item { counter-increment: aa-toc; }
.post-toc__item--h3 { counter-increment: none; }
.post-toc__link {
display: grid;
grid-template-columns: 2.2em 1fr;
align-items: baseline;
padding: 8px 0 8px 14px;
border: 0;
font-family: var(--font-sans);
font-size: 14px;
line-height: 1.35;
letter-spacing: 0;
background: none;
}
.post-toc__link::before {
content: counter(aa-toc, decimal-leading-zero);
font-family: var(--font-mono);
font-size: 11px;
color: var(--color-muted-on-light);
}
.post-toc__item--h3 .post-toc__link { font-size: 13px; }
.post-toc__item--h3 .post-toc__link::before { content: ''; }
.post-toc__link.is-read { color: var(--color-muted-on-light); }
.post-toc__link.is-active {
color: var(--color-smoky-black);
font-weight: 700;
background: none;
}
.post-toc__link.is-active::before { color: var(--color-rescue-orange-text); }
.post-toc__link:hover { color: var(--color-smoky-black); background: rgba(225, 255, 0, 0.18); }
/* Na telefonie i tablecie spis w kolumnie bocznej zastępuje przycisk */
@media (max-width: 1023px) {
.post-toc { display: none !important; }
}
/* --- Spis treści na telefonie: przycisk + wysuwana lista --- */
.aa-toc-pill {
position: fixed; left: 50%; bottom: 16px; z-index: 900;
display: inline-flex; align-items: center; gap: 12px;
min-height: 44px; padding: 10px 18px;
border: 1px solid var(--color-acid-yellow);
background: var(--color-smoky-black);
color: var(--color-off-white);
font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.02em;
box-shadow: 0 8px 24px rgba(9, 10, 12, 0.25);
cursor: pointer;
transform: translate(-50%, 140%);
opacity: 0;
transition: transform 0.3s ease, opacity 0.3s ease;
}
.aa-toc-pill.is-visible { transform: translate(-50%, 0); opacity: 1; }
.aa-toc-pill__count { color: var(--color-acid-yellow); font-weight: 700; }
@media (min-width: 1024px) { .aa-toc-pill { display: none; } }
.aa-toc-sheet {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 901;
max-height: 70vh; overflow-y: auto;
padding: 16px 20px 24px;
background: var(--color-off-white);
color: var(--color-smoky-black);
border-top: 3px solid var(--color-acid-yellow);
box-shadow: 0 -12px 32px rgba(9, 10, 12, 0.3);
}
.aa-toc-sheet[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
.aa-toc-sheet:not([hidden]) { animation: aa-sheet-up 0.25s ease-out; }
}
@keyframes aa-sheet-up { from { transform: translateY(100%); } to { transform: none; } }
.aa-toc-sheet__head {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 8px;
}
.aa-toc-sheet__title { font-family: var(--font-mono); font-size: 13px; font-weight: 700; }
.aa-toc-sheet__close {
min-height: 44px; padding: 0 12px;
background: none; border: 1px solid var(--color-smoky-black);
font-family: var(--font-mono); font-size: 12px; cursor: pointer;
}
.aa-toc-sheet__list { list-style: none; margin: 0; padding: 0; counter-reset: aa-sheet; }
.aa-toc-sheet__item { counter-increment: aa-sheet; }
.aa-toc-sheet__item--h3 { counter-increment: none; }
.aa-toc-sheet__link {
display: grid; grid-template-columns: 2.4em 1fr; align-items: baseline;
padding: 12px 0; min-height: 44px;
border-bottom: 1px solid rgba(9, 10, 12, 0.1);
color: var(--color-smoky-black); text-decoration: none;
font-size: 15px; line-height: 1.35;
}
.aa-toc-sheet__link::before {
content: counter(aa-sheet, decimal-leading-zero);
font-family: var(--font-mono); font-size: 12px; color: var(--color-muted-on-light);
}
.aa-toc-sheet__item--h3 .aa-toc-sheet__link::before { content: ''; }
.aa-toc-sheet__item--h3 .aa-toc-sheet__link { font-size: 14px; }
.aa-toc-sheet__link.is-active { font-weight: 700; }
.aa-toc-sheet__link.is-active::before { color: var(--color-rescue-orange-text); }
@media (prefers-reduced-motion: reduce) {
.aa-toc-pill { transition: none; }
}
/* overflow-x: clip zamiast hidden (html, body): hidden psuło position: sticky
bocznej kolumny wpisu, więc spis treści nie podążał za czytaniem. */
html, body { overflow-x: clip; }
/* =====================================================
HERO 1.5.1: filmowe tło jak w 1.4 (góry, mgła, skan, HUD),
w środku główna historia, po prawej jej kadr, na dole „Najnowsze”
===================================================== */
.hero--story {
flex-direction: column;
align-items: stretch;
/* od góry: przy treści wyższej niż ekran środek ucinał początek pod nagłówkiem */
justify-content: flex-start;
padding: calc(48px + 2.5rem) 0 0;
}
.hero--story .hero-inner {
flex: 1 0 auto;
display: grid;
grid-template-columns: minmax(0, 1fr);
align-content: center;
gap: 1.5rem;
padding-bottom: 2rem;
}
.hero--story .hero-content { max-width: 760px; }
.hero--story .hero-content__pretitle {
font-size: 12px;
line-height: 1.5;
letter-spacing: 0.18em;
margin: 0 0 20px;
}
.hero-story__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.35rem 0.75rem;
margin: 0 0 18px;
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.06em;
color: #C9CACC;
animation: fade-up 0.6s 0.1s ease-out backwards;
}
.hero-story__cat {
background: var(--color-acid-yellow);
color: var(--color-smoky-black);
font-weight: 700;
padding: 3px 8px;
text-transform: uppercase;
}
.hero--story .hero-content__title {
font-size: clamp(38px, 5vw, 84px);
line-height: 0.92;
letter-spacing: -0.035em;
text-wrap: balance;
}
.hero-story__title a { color: var(--color-off-white); text-decoration: none; }
.hero-story__title a:hover { color: var(--color-acid-yellow); }
.hero--story .hero-content__subtitle { max-width: 54ch; color: rgba(255, 255, 255, 0.82); }
.hero-story__cta {
display: inline-flex;
align-items: center;
gap: 0.6rem;
min-height: 48px;
margin-top: 28px;
padding: 0 1.5rem;
background: var(--color-acid-yellow);
color: var(--color-smoky-black);
font-family: var(--font-mono);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
text-decoration: none;
animation: fade-up 0.6s 0.45s ease-out backwards;
transition: background 0.2s, color 0.2s;
}
.hero-story__cta:hover { background: var(--color-rescue-orange); color: var(--color-off-white); }
/* Kadr historii */
.hero-shot {
position: relative;
display: block;
order: -1;
color: var(--color-acid-yellow);
text-decoration: none;
animation: hero-figure-in 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}
.hero-shot__frame {
position: relative;
display: block;
aspect-ratio: 16 / 10;
overflow: hidden;
border: 1px solid rgba(225, 255, 0, 0.35);
background: #15171a;
}
.hero-shot__img {
width: 100%;
height: 100%;
object-fit: cover;
filter: saturate(0.85) contrast(1.08);
transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.hero-shot:hover .hero-shot__img { transform: scale(1.04); }
.hero-shot__corner {
position: absolute;
width: 22px; height: 22px;
border: 2px solid var(--color-acid-yellow);
z-index: 2;
}
.hero-shot__corner--tl { top: 8px; left: 8px; border-right: 0; border-bottom: 0; }
.hero-shot__corner--br { bottom: 8px; right: 8px; border-left: 0; border-top: 0; }
.hero-shot__caption {
display: block;
margin-top: 8px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.2em;
color: var(--color-acid-yellow);
}
/* Pasek „Najnowsze” na dole hero */
.hero-latest {
position: relative;
z-index: 8;
border-top: 1px solid rgba(225, 255, 0, 0.25);
background: rgba(9, 10, 12, 0.72);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
.hero-latest__inner {
max-width: 1400px;
margin: 0 auto;
padding: 1rem 24px 1.25rem;
}
.hero-latest__label {
margin: 0 0 0.25rem;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--color-acid-yellow);
}
.hero-latest__list { counter-reset: aa-latest; list-style: none; margin: 0; padding: 0; }
.hero-latest__list li { counter-increment: aa-latest; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.hero-latest__link {
display: grid;
grid-template-columns: 2rem minmax(0, 1fr);
grid-template-areas: "num meta" "num title";
row-gap: 4px;
padding: 0.75rem 0;
color: var(--color-off-white);
text-decoration: none;
}
.hero-latest__link::before {
content: counter(aa-latest, decimal-leading-zero);
grid-area: num;
font-family: var(--font-mono);
font-size: 12px;
color: var(--color-rescue-orange);
padding-top: 1px;
}
.hero-latest__meta { grid-area: meta; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--color-muted-on-dark); }
.hero-latest__title { grid-area: title; font-family: var(--font-display); font-weight: 700; font-size: 15px; line-height: 1.3; }
.hero-latest__link:hover .hero-latest__title { color: var(--color-acid-yellow); }
.hero-latest__all {
display: inline-flex;
align-items: center;
gap: 0.4rem;
min-height: 44px;
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.08em;
color: var(--color-acid-yellow);
text-decoration: underline;
text-underline-offset: 4px;
}
.hero--story a:focus-visible { outline: 2px solid var(--color-acid-yellow); outline-offset: 3px; }
@media (min-width: 1024px) {
.hero--story .hero-inner {
grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.9fr);
align-items: center;
gap: 4rem;
}
.hero-shot { order: 0; }
.hero-shot__frame { aspect-ratio: 4 / 5; max-height: 62vh; margin-left: auto; }
.hero-shot__caption { text-align: right; }
.hero-latest__inner {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 2rem;
padding: 0.75rem 48px;
}
.hero-latest__label { margin: 0; }
.hero-latest__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.hero-latest__list li { border-bottom: 0; }
.hero-latest__title {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
}
@media (max-width: 600px) {
.hero--story { padding-top: calc(48px + 1.5rem); }
.hero--story .hero-inner { padding: 0 24px 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
.hero-shot, .hero-story__meta, .hero-story__cta { animation: none; }
.hero-shot__img { transition: none; }
.hero-shot:hover .hero-shot__img { transform: none; }
}
/* Skan po kadrze: transform zamiast top, żeby nie przesuwać układu (CLS) */
.hero-shot__scan {
position: absolute;
left: 0; right: 0; top: 0;
height: 80px;
background: linear-gradient(0deg, transparent, rgba(225, 255, 0, 0.14), transparent);
mix-blend-mode: screen;
pointer-events: none;
z-index: 1;
animation: hero-shot-scan 5s ease-in-out infinite;
will-change: transform;
}
@keyframes hero-shot-scan {
0% { transform: translateY(-80px); opacity: 0; }
20% { opacity: 1; }
80% { opacity: 1; }
100% { transform: translateY(min(62vh, 700px)); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .hero-shot__scan { animation: none; display: none; } }
/* =====================================================
ODŚWIEŻENIE 1.6.0: ten sam styl, więcej ruchu i treści w kartach
===================================================== */
/* Wjazd przy przewijaniu: sam CSS (scroll-driven), bez skryptów.
Przeglądarki bez wsparcia i „ogranicz ruch” widzą wszystko od razu. */
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
.aa-reveal {
animation: aa-reveal-up linear both;
animation-timeline: view();
animation-range: entry 0% entry 55%;
}
.blog-section__title.aa-reveal,
.video-section__title.aa-reveal,
.newsletter__title.aa-reveal,
.channels__header.aa-reveal {
animation-name: aa-reveal-wipe;
animation-range: entry 10% cover 30%;
}
}
}
@keyframes aa-reveal-up {
from { opacity: 0; transform: translateY(28px); }
to { opacity: 1; transform: none; }
}
@keyframes aa-reveal-wipe {
/* ujemny zapas góra/dół, żeby nie ucinać ogonków i kresek (Ó, Ę, Ą) */
from { clip-path: inset(-30% 100% -30% 0); transform: translateX(-24px); }
to { clip-path: inset(-30% -10% -30% 0); transform: none; }
}
/* Licznik wpisów przy opisie sekcji */
.blog-section__count {
display: inline-block;
margin-left: 0.75rem;
padding: 2px 8px;
border: 1px solid currentColor;
white-space: nowrap;
}
/* Karty tekstowe: lead i animowana strzałka */
.blog-grid-standard__post-excerpt {
margin: 0.875rem 0 0;
font-size: 0.9375rem;
line-height: 1.55;
text-transform: none;
letter-spacing: 0;
opacity: 0.85;
}
.blog-grid-standard__post-readmore,
.polecane-card__cta { transition: transform 0.25s ease, letter-spacing 0.25s ease; }
.blog-grid-standard__post:hover .blog-grid-standard__post-readmore,
.polecane-card:hover .polecane-card__cta { transform: translateX(6px); letter-spacing: 0.28em; }
.blog-grid-standard__post-title { transition: transform 0.3s ease; }
.blog-grid-standard__post:hover .blog-grid-standard__post-title { transform: translateY(-2px); }
/* VIDEO_LOG: kadr z przyciskiem (odtwarzacz po kliknięciu) */
.video-frame--facade { cursor: pointer; }
.video-frame__poster {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
filter: grayscale(100%) contrast(1.15) brightness(0.55);
transform: scale(1.02);
transition: filter 0.7s, transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.video-frame--facade:hover .video-frame__poster { filter: grayscale(0%) brightness(0.7); transform: scale(1.05); }
.video-frame__corner {
position: absolute;
width: 34px; height: 34px;
border: 2px solid var(--color-acid-yellow);
z-index: 2;
}
.video-frame__corner--tl { top: 16px; left: 16px; border-right: 0; border-bottom: 0; }
.video-frame__corner--br { bottom: 16px; right: 16px; border-left: 0; border-top: 0; }
.video-frame__play {
position: absolute;
inset: 0;
z-index: 3;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1rem;
width: 100%;
background: none;
border: 0;
color: var(--color-acid-yellow);
cursor: pointer;
}
.video-frame__play-icon {
position: relative;
width: 88px; height: 88px;
background: var(--color-acid-yellow);
transition: transform 0.3s ease, background 0.3s;
}
.video-frame__play-icon::after {
content: '';
position: absolute;
top: 50%; left: 54%;
transform: translate(-50%, -50%);
border-style: solid;
border-width: 16px 0 16px 26px;
border-color: transparent transparent transparent var(--color-smoky-black);
}
.video-frame__play:hover .video-frame__play-icon,
.video-frame__play:focus-visible .video-frame__play-icon { transform: scale(1.08); background: var(--color-white); }
.video-frame__play:focus-visible { outline: 2px solid var(--color-acid-yellow); outline-offset: -8px; }
.video-frame__play-label {
font-family: var(--font-mono);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.25em;
background: rgba(9, 10, 12, 0.75);
padding: 4px 10px;
}
.video-frame__note {
position: absolute;
left: 16px; right: 16px; bottom: 14px;
z-index: 3;
font-family: var(--font-mono);
font-size: 11px;
color: #C9CACC;
text-align: center;
pointer-events: none;
}
@media (max-width: 600px) {
.video-frame__play-icon { width: 64px; height: 64px; }
.video-frame__play-icon::after { border-width: 12px 0 12px 20px; }
.video-frame__note { display: none; }
.video-frame__corner { width: 20px; height: 20px; }
.video-frame__corner--tl { top: 10px; left: 10px; }
.video-frame__corner--br { bottom: 10px; right: 10px; }
}
/* KANAŁY (zamiast „O mnie”) */
.channels {
background: var(--color-smoky-black);
color: var(--color-off-white);
padding: 6rem 0;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.channels__header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 3rem; }
.channels__title {
margin: 0;
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(56px, 9vw, 140px);
line-height: 0.85;
letter-spacing: -0.04em;
color: var(--color-off-white);
}
.channels__subtitle { margin: 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; color: var(--color-acid-yellow); }
.channels__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
@media (min-width: 900px) {
.channels__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.channels__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.channel {
position: relative;
display: flex;
flex-direction: column;
gap: 0.875rem;
height: 100%;
min-height: 260px;
padding: 1.5rem;
text-decoration: none;
color: var(--color-smoky-black);
border: 1px solid var(--color-smoky-black);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.channel:hover { transform: translate(-4px, -4px); box-shadow: 8px 8px 0 var(--color-off-white); }
.channel:focus-visible { outline: 2px solid var(--color-acid-yellow); outline-offset: 4px; }
@media (min-width: 900px) { .channel { min-height: 340px; } }
.channel--instagram { background: var(--color-acid-yellow); }
.channel--tiktok { background: var(--color-rescue-orange); }
.channel--youtube { background: var(--color-smoky-black); color: var(--color-off-white); border-color: var(--color-acid-yellow); }
.channel--youtube:hover { box-shadow: 8px 8px 0 var(--color-acid-yellow); }
.channel__top { display: flex; justify-content: space-between; gap: 1rem; font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; }
.channel__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid currentColor; }
.channel__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%) contrast(1.1); transition: filter 0.5s, transform 0.6s; }
.channel:hover .channel__media img { filter: none; transform: scale(1.04); }
.channel__name {
margin-top: auto;
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(40px, 3.5vw, 56px);
line-height: 0.9;
letter-spacing: -0.04em;
white-space: nowrap;
}
.channel__desc { font-size: 1rem; line-height: 1.45; }
.channel__count { font-family: var(--font-mono); font-size: 13px; font-weight: 700; }
.channel__count small { font-weight: 400; font-size: 11px; }
.channel__cta {
display: inline-flex;
align-self: flex-start;
align-items: center;
gap: 0.5rem;
min-height: 44px;
padding: 0 1.1rem;
background: var(--color-smoky-black);
color: var(--color-acid-yellow);
font-family: var(--font-mono);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.15em;
}
.channel--youtube .channel__cta { background: var(--color-acid-yellow); color: var(--color-smoky-black); }
.channel:hover .channel__cta span[aria-hidden] { transform: translateX(4px); }
.channel__cta span[aria-hidden] { transition: transform 0.25s; }
.channels__more { margin: 2rem 0 0; font-family: var(--font-mono); font-size: 12px; color: var(--color-muted-on-dark); }
.channels__more a { color: var(--color-acid-yellow); text-underline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
.channel, .channel__media img, .video-frame__poster, .blog-grid-standard__post-title,
.blog-grid-standard__post-readmore, .polecane-card__cta { transition: none; }
.channel:hover, .blog-grid-standard__post:hover .blog-grid-standard__post-title { transform: none; }
}
/* =====================================================
NEWSLETTER 1.6.1: czarny pas z poświatą, pasek działów, panel HUD
(style działają na formularzu MailerLite i na zapasowym)
===================================================== */
.newsletter--v2 {
position: relative;
overflow: hidden;
background: var(--color-smoky-black);
color: var(--color-off-white);
padding: 0 0 6rem;
border-top: 0;
}
.newsletter__fx {
position: absolute; inset: 0;
pointer-events: none;
background:
radial-gradient(60% 70% at 85% 60%, rgba(225, 255, 0, 0.16), transparent 70%),
linear-gradient(rgba(225, 255, 0, 0.05) 1px, transparent 1px) 0 0 / 48px 48px,
linear-gradient(90deg, rgba(225, 255, 0, 0.05) 1px, transparent 1px) 0 0 / 48px 48px;
}
/* Pasek działów przewijany w poziomie */
.newsletter__ticker {
position: relative;
z-index: 2;
overflow: hidden;
background: var(--color-acid-yellow);
color: var(--color-smoky-black);
border-block: 1px solid var(--color-smoky-black);
margin-bottom: 5rem;
}
.newsletter__ticker-track { display: flex; width: max-content; animation: aa-ticker 112s linear infinite; }
.newsletter__ticker-group { display: flex; align-items: center; gap: 1.5rem; padding: 0.85rem 1.5rem 0.85rem 0; white-space: nowrap; }
.newsletter__ticker-group span { font-family: var(--font-display); font-weight: 700; font-size: clamp(20px, 2.4vw, 32px); letter-spacing: -0.02em; }
.newsletter__ticker-group i { font-style: normal; font-family: var(--font-mono); font-size: 14px; color: var(--color-rescue-orange-text); }
@keyframes aa-ticker { to { transform: translateX(-50%); } }
.newsletter--v2 .newsletter__container { position: relative; z-index: 2; align-items: center; gap: 3.5rem; }
.newsletter__kicker { margin: 0 0 1rem; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; color: var(--color-acid-yellow); }
.newsletter--v2 .newsletter__title {
margin: 0;
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(64px, 11vw, 168px);
line-height: 0.82;
letter-spacing: -0.05em;
color: var(--color-off-white);
}
.newsletter__lead { margin: 1.75rem 0 0; max-width: 34ch; font-size: clamp(1.0625rem, 1.4vw, 1.25rem); line-height: 1.5; color: #D6D7D9; }
.newsletter--v2 .newsletter__subtitle { margin-top: 1.25rem; color: var(--color-muted-on-dark); font-size: 11px; line-height: 1.6; }
/* Panel z formularzem */
.newsletter__panel {
position: relative;
overflow: hidden;
padding: 1.5rem;
background: rgba(21, 23, 26, 0.85);
border: 1px solid rgba(225, 255, 0, 0.35);
box-shadow: 0 0 0 1px rgba(9, 10, 12, 1), 0 30px 80px -30px rgba(225, 255, 0, 0.35);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
@media (min-width: 768px) { .newsletter__panel { padding: 2rem 2.25rem 2.25rem; } }
.newsletter__corner { position: absolute; width: 22px; height: 22px; border: 2px solid var(--color-acid-yellow); }
.newsletter__corner--tl { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.newsletter__corner--br { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.newsletter__scan {
position: absolute; left: 0; right: 0; top: 0; height: 60px;
background: linear-gradient(0deg, transparent, rgba(225, 255, 0, 0.08), transparent);
pointer-events: none;
animation: aa-news-scan 6s ease-in-out infinite;
}
@keyframes aa-news-scan { 0% { transform: translateY(-60px); } 100% { transform: translateY(420px); } }
.newsletter__panel-bar {
display: flex; justify-content: space-between; align-items: center;
padding-bottom: 0.9rem; margin-bottom: 1.25rem;
border-bottom: 1px dashed rgba(225, 255, 0, 0.25);
font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; color: var(--color-acid-yellow);
}
.newsletter__status { display: inline-flex; align-items: center; gap: 0.5rem; color: #C9CACC; }
.newsletter__status i { width: 8px; height: 8px; border-radius: 50%; background: var(--color-acid-yellow); box-shadow: 0 0 10px var(--color-acid-yellow); animation: pulse-soft 2s ease-in-out infinite; }
.newsletter__prompt { margin: 0 0 0.75rem; font-family: var(--font-mono); font-size: 14px; color: var(--color-off-white); }
.newsletter__caret { color: var(--color-rescue-orange); animation: hero-blink 1s steps(2) infinite; }
/* Pole i przycisk: wersja zapasowa + MailerLite */
#newsletter .newsletter__input,
#newsletter .mailerlite-form input[type="email"] {
display: block;
width: 100%;
min-height: 60px;
padding: 0 1rem;
background: var(--color-smoky-black);
border: 1px solid rgba(244, 244, 245, 0.35);
border-radius: 0;
color: var(--color-white);
font-family: var(--font-mono);
font-size: 16px;
letter-spacing: 0.02em;
transition: border-color 0.2s, box-shadow 0.2s;
}
#newsletter .newsletter__input::placeholder,
#newsletter .mailerlite-form input[type="email"]::placeholder { color: #8E9093; opacity: 1; }
#newsletter .newsletter__input:focus,
#newsletter .mailerlite-form input[type="email"]:focus {
outline: none;
border-color: var(--color-acid-yellow);
box-shadow: 0 0 0 3px rgba(225, 255, 0, 0.25);
}
#newsletter .newsletter__btn,
#newsletter .mailerlite-subscribe-submit {
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
width: 100%;
min-height: 60px;
margin-top: 0.75rem;
padding: 0 1.5rem;
background: var(--color-acid-yellow);
color: var(--color-smoky-black);
border: 0;
border-radius: 0;
font-family: var(--font-mono);
font-size: 14px;
font-weight: 700;
letter-spacing: 0.2em;
cursor: pointer;
overflow: hidden;
transition: background 0.25s, color 0.25s, letter-spacing 0.25s;
}
#newsletter .newsletter__btn:hover,
#newsletter .mailerlite-subscribe-submit:hover { background: var(--color-rescue-orange); color: var(--color-off-white); letter-spacing: 0.28em; }
#newsletter .newsletter__btn:focus-visible,
#newsletter .mailerlite-subscribe-submit:focus-visible { outline: 2px solid var(--color-off-white); outline-offset: 3px; }
#newsletter .mailerlite-subscribe-submit:disabled { opacity: 0.6; cursor: wait; }
#newsletter .mailerlite-form-inputs { display: block; }
#newsletter .mailerlite-form-field label:empty { display: none; }
#newsletter .mailerlite-form-loader,
#newsletter .mailerlite-form-response { display: none; }
#newsletter .mailerlite-form-loader { margin-top: 0.75rem; font-family: var(--font-mono); font-size: 12px; color: var(--color-acid-yellow); }
#newsletter .mailerlite-form-response h4 { margin: 0; font-family: var(--font-mono); font-size: 14px; color: var(--color-acid-yellow); }
#newsletter .mailerlite-form-error { display: block; margin-top: 0.5rem; font-family: var(--font-mono); font-size: 12px; color: #FF8A5C; }
/* Tekst zgody pod formularzem (w MailerLite jest nad polem: przenosimy go pod spód) */
#newsletter .mailerlite-form form { display: flex; flex-direction: column; }
#newsletter .mailerlite-form-description { order: 3; margin-top: 1rem; }
#newsletter .mailerlite-form-description p { margin: 0; background: none; font-size: 12px; line-height: 1.55; }
#newsletter .mailerlite-form-description a { color: #C9CACC; text-decoration: none; }
#newsletter .mailerlite-form-description a:hover { color: var(--color-off-white); }
#newsletter .mailerlite-form-description strong { color: var(--color-acid-yellow); text-decoration: underline; text-underline-offset: 3px; }
.newsletter--v2 .newsletter__disclaimer { margin-top: 1rem; color: var(--color-muted-on-dark); opacity: 1; }
@media (max-width: 767px) {
.newsletter--v2 { padding-bottom: 4rem; }
.newsletter__ticker { margin-bottom: 3rem; }
.newsletter--v2 .newsletter__title { font-size: clamp(64px, 21vw, 110px); }
}
@media (prefers-reduced-motion: reduce) {
.newsletter__ticker-track, .newsletter__scan, .newsletter__caret, .newsletter__status i { animation: none; }
}
/* Stare reguły formularza (1.1.x) mają !important: w nowym newsletterze wygrywa nowy wygląd */
#newsletter.newsletter--v2 .newsletter__shortcode-wrap button[type="submit"],
#newsletter.newsletter--v2 .mailerlite-subscribe-submit {
background: var(--color-acid-yellow) !important;
color: var(--color-smoky-black) !important;
border: 0 !important;
}
#newsletter.newsletter--v2 .newsletter__shortcode-wrap button[type="submit"]:hover,
#newsletter.newsletter--v2 .mailerlite-subscribe-submit:hover {
background: var(--color-rescue-orange) !important;
color: var(--color-off-white) !important;
}
#newsletter.newsletter--v2 .newsletter__shortcode-wrap input[type="email"] {
background: var(--color-smoky-black) !important;
border: 1px solid rgba(244, 244, 245, 0.35) !important;
color: var(--color-white) !important;
}
#newsletter.newsletter--v2 .newsletter__shortcode-wrap input[type="email"]:focus { border-color: var(--color-acid-yellow) !important; }
#newsletter.newsletter--v2 .mailerlite-form-description p { border: 0 !important; padding: 0 !important; background: none !important; }
#newsletter.newsletter--v2 .newsletter__shortcode-wrap input[type="email"] {
min-height: 60px !important;
padding: 0 1rem !important;
font-size: 16px !important;
font-weight: 400 !important;
text-transform: none !important;
letter-spacing: 0.02em !important;
}
#newsletter.newsletter--v2 .newsletter__shortcode-wrap button[type="submit"] {
min-height: 60px !important;
padding: 0 1.5rem !important;
font-size: 14px !important;
letter-spacing: 0.2em !important;
}
/* 1.6.2: obraz w karcie kategorii jako ![]()
(wcześniej tło CSS) */
.blog-grid-standard__image { position: relative; overflow: hidden; }
.blog-grid-standard__image img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
}
.polecane-card__img img { width: 100%; height: 100%; object-fit: cover; }
/* =====================================================
RUCH 1.7.0: bez „skanera”, nowocześniejsze wejście hero
i więcej animacji przy przewijaniu
===================================================== */
.hero-bg-mountains__scanbeam, .hero-fx--scanlines, .hero-shot__scan, .hero-figure__scanline { display: none !important; }
/* Tytuł historii: słowa wyjeżdżają z masek po kolei */
.hero-w {
display: inline-block;
overflow: hidden;
vertical-align: top;
/* zapas na kreski i ogonki (Ż, Ą, Ę) przy line-height < 1 */
padding: 0.14em 0.02em 0.08em;
margin: -0.14em -0.02em -0.08em;
}
.hero-w > span { display: inline-block; }
.hero--story .hero-content__title { animation: none; }
@media (prefers-reduced-motion: no-preference) {
.hero-w > span {
animation: aa-word-up 0.9s cubic-bezier(0.2, 0.85, 0.2, 1) both;
animation-delay: calc(var(--i, 0) * 55ms + 120ms);
}
}
@keyframes aa-word-up {
from { transform: translateY(110%) rotate(4deg); }
to { transform: none; }
}
/* Kadr historii: żółta kurtyna odjeżdża w górę, zdjęcie „osiada”.
Bez przezroczystości, więc obraz liczy się do LCP od razu. */
.hero--story .hero-shot { animation: none; }
.hero-shot__frame { transform-style: preserve-3d; }
/* Od 1.7.4 tylko na komputerze i krócej: na telefonie kurtyna opóźniała LCP o ~0,7 s */
@media (prefers-reduced-motion: no-preference) and (min-width: 1024px) {
.hero-shot__frame::before {
content: '';
position: absolute; inset: 0;
z-index: 3;
background: var(--color-acid-yellow);
transform-origin: top;
animation: aa-curtain 0.7s cubic-bezier(0.7, 0, 0.2, 1) 0.05s both;
pointer-events: none;
}
.hero-shot__img { animation: aa-settle 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) 0.05s both; }
}
@keyframes aa-curtain { from { transform: scaleY(1); } to { transform: scaleY(0); } }
@keyframes aa-settle { from { transform: scale(1.18); } to { transform: scale(1); } }
/* Pochylenie kadru za kursorem + odblask (JS ustawia --rx, --ry, --gx, --gy) */
.hero-shot[data-tilt] { perspective: 1000px; }
.hero-shot[data-tilt] .hero-shot__frame {
transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
will-change: transform;
}
.hero-shot__glare {
position: absolute; inset: 0;
z-index: 2;
pointer-events: none;
background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 0%), rgba(225, 255, 0, 0.22), transparent 55%);
opacity: 0;
transition: opacity 0.4s;
mix-blend-mode: screen;
}
.hero-shot.is-tilting .hero-shot__glare { opacity: 1; }
/* „Najnowsze” w hero: kolejno od dołu */
@media (prefers-reduced-motion: no-preference) {
.hero-latest__list li { animation: fade-up 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.hero-latest__list li:nth-child(1) { animation-delay: 0.7s; }
.hero-latest__list li:nth-child(2) { animation-delay: 0.8s; }
.hero-latest__list li:nth-child(3) { animation-delay: 0.9s; }
}
/* Paralaksa hero przy przewijaniu (właściwość translate, nie koliduje z transform) */
@supports (animation-timeline: scroll()) {
@media (prefers-reduced-motion: no-preference) {
.hero--story .hero-shot,
.hero--story .hero-content,
.hero--story .hero-topo,
.hero--story .hero-bg-mountains {
animation: aa-par-slow linear both;
animation-timeline: scroll(root);
animation-range: 0 100vh;
}
.hero--story .hero-shot { animation-name: aa-par-fast; }
.hero--story .hero-content { animation-name: aa-par-mid; }
}
}
@keyframes aa-par-slow { to { translate: 0 18vh; } }
@keyframes aa-par-mid { to { translate: 0 -6vh; opacity: 0.35; } }
@keyframes aa-par-fast { to { translate: 0 -14vh; } }
/* Więcej wejść przy przewijaniu w całej stronie (bez dopisywania klas w szablonach) */
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
.blog-section__desc, .blog-section__cta-wrap, .polecane__header,
.video-section__subtitle, .video-frame, .books__title-wrap, .book__row,
.gear-grid__col, .gear-grid__col-head, .summit-log__header,
.channels__more, .site-footer__grid > *, .newsletter__panel, .newsletter__lead,
.szlaki__header, .dossier-feat__card {
animation: aa-reveal-up linear both;
animation-timeline: view();
animation-range: entry 0% entry 55%;
}
/* Kolejne elementy w rzędzie wchodzą odrobinę później */
.aa-reveal:nth-child(2), .book__row:nth-child(2), .gear-grid__col:nth-child(2), .site-footer__grid > :nth-child(2) { animation-range: entry 8% entry 63%; }
.aa-reveal:nth-child(3), .book__row:nth-child(3), .site-footer__grid > :nth-child(3) { animation-range: entry 16% entry 71%; }
.aa-reveal:nth-child(4), .book__row:nth-child(4) { animation-range: entry 24% entry 79%; }
/* Wielkie nagłówki: odsłonięcie + powolny dryf w poziomie przy przewijaniu */
.blog-section__title.aa-reveal, .video-section__title.aa-reveal,
.newsletter__title.aa-reveal, .channels__header.aa-reveal {
animation-name: aa-reveal-wipe, aa-drift;
animation-timeline: view(), view();
animation-range: entry 10% cover 30%, cover 0% cover 100%;
animation-fill-mode: both, both;
animation-timing-function: linear, linear;
}
.summit-log__title, .books__title {
animation: aa-drift linear both;
animation-timeline: view();
animation-range: cover 0% cover 100%;
}
}
}
@keyframes aa-drift { from { translate: -2.5vw 0; } to { translate: 2.5vw 0; } }
/* =====================================================
AUTOR 1.8.0: blok pod wpisem i nagłówek strony /redakcja/
===================================================== */
.aa-author {
display: grid;
grid-template-columns: 96px minmax(0, 1fr);
gap: 1.25rem;
margin: 3rem 0 1rem;
padding: 1.5rem;
border: 1px solid currentColor;
border-left: 4px solid var(--color-rescue-orange);
}
.aa-author__photo { width: 96px; height: 96px; object-fit: cover; border-radius: 0; filter: grayscale(100%) contrast(1.1); }
.aa-author__kicker { margin: 0 0 0.35rem; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; color: var(--color-rescue-orange-text); }
.aa-author__name { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; line-height: 1.1; letter-spacing: -0.02em; text-transform: none; }
.aa-author__name a { color: inherit; text-decoration: none; }
.aa-author__name a:hover { text-decoration: underline; text-decoration-color: var(--color-rescue-orange); text-underline-offset: 4px; }
.aa-author__role { margin: 0.35rem 0 0; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; opacity: 0.85; }
.aa-author__bio { margin-top: 0.85rem; font-size: 1rem; line-height: 1.6; }
.aa-author__bio p { margin: 0 0 0.6rem; }
.aa-author__links { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.75rem 0 0; padding: 0; list-style: none; }
.aa-author__links a {
display: inline-flex; align-items: center; min-height: 36px; padding: 0 0.75rem;
border: 1px solid currentColor; color: inherit; text-decoration: none;
font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
}
.aa-author__links a:hover { background: var(--color-acid-yellow); color: var(--color-smoky-black); border-color: var(--color-acid-yellow); }
.aa-author__more { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; margin-top: 0.5rem; font-family: var(--font-mono); font-size: 12px; color: inherit; text-underline-offset: 4px; }
.aa-author a:focus-visible { outline: 2px solid var(--color-rescue-orange); outline-offset: 3px; }
/* Strona autora: większe zdjęcie, imię jako nagłówek strony */
.aa-author--page { grid-template-columns: 160px minmax(0, 1fr); margin: 0; border-left-width: 4px; max-width: 900px; }
.aa-author--page .aa-author__photo { width: 160px; height: 160px; }
.aa-author--page .aa-author__name { font-size: clamp(2.25rem, 6vw, 4.5rem); line-height: 0.9; letter-spacing: -0.04em; }
.aa-author--page .aa-author__kicker { color: var(--color-acid-yellow); }
@media (max-width: 600px) {
.aa-author, .aa-author--page { grid-template-columns: 1fr; }
.aa-author--page .aa-author__photo { width: 120px; height: 120px; }
}
/* 1.8.0: data w kartach archiwum (kategorie, autor) z kontrastem AA na jasnym tle */
.archive-card__date { color: var(--color-rescue-orange-text) !important; }
/* 1.8.1: zdjęcie autora zawsze kwadratowe (globalne img{height:auto} rozciągało awatar) */
.aa-author__media { width: 96px; height: 96px; overflow: hidden; }
.aa-author--page .aa-author__media { width: 160px; height: 160px; }
.aa-author img.aa-author__photo { width: 100% !important; height: 100% !important; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
@media (max-width: 600px) { .aa-author--page .aa-author__media { width: 120px; height: 120px; } }
/* 1.9.0: „Czytaj też” w środku wpisu + okruszki */
.post-single__body .aa-readmore {
margin: 2.5rem 0;
padding: 1.25rem 1.5rem;
border-left: 4px solid var(--color-acid-yellow);
background: var(--color-smoky-black);
color: var(--color-off-white);
}
.aa-readmore__label { margin: 0 0 0.5rem !important; font-family: var(--font-mono); font-size: 11px !important; letter-spacing: 0.18em; color: var(--color-acid-yellow); }
.post-single__body .aa-readmore__list { margin: 0; padding: 0; list-style: none; }
.post-single__body .aa-readmore__list li { margin: 0; padding: 0.4rem 0; border-top: 1px solid rgba(244, 244, 245, 0.12); }
.post-single__body .aa-readmore__list li:first-child { border-top: 0; }
.post-single__body .aa-readmore__list li::before { content: none; }
.post-single__body .aa-readmore a {
color: var(--color-off-white);
font-family: var(--font-display);
font-weight: 700;
font-size: 1.0625rem;
line-height: 1.35;
text-decoration: none;
background: none;
}
.post-single__body .aa-readmore a::after { content: ' →'; color: var(--color-acid-yellow); }
.post-single__body .aa-readmore a:hover { color: var(--color-acid-yellow); }
.post-single__body .aa-readmore a:focus-visible { outline: 2px solid var(--color-acid-yellow); outline-offset: 3px; }
.post-single__crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.post-single__crumbs a { text-decoration: none; }
.post-single__crumbs a:hover { text-decoration: underline; }
/* =====================================================
2.0.0 „MAPA TERENU” (inspiracja: język wizualny Marathon)
A: nawiasy w menu, krzyżyki rejestracyjne, ikony działów, [+] w kartach
B: warstwice gór, pionowy pasek z logotypem, panel DANE_ w hero
===================================================== */
/* Ikony działów (pikselowe) */
.aa-icon { display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px; flex: none; }
/* A: nawiasy w menu: kotwica na stronie [↓], inna podstrona [↗] */
.site-header__nav-link::after,
.mobile-menu a::after,
.site-footer__col-list a::after {
content: " [↗]" / "";
font-size: 0.85em;
letter-spacing: 0;
opacity: 0.5;
transition: opacity 0.2s;
}
.site-header__nav-link[href*="#"]::after,
.mobile-menu a[href*="#"]::after,
.site-footer__col-list a[href*="#"]::after { content: " [↓]" / ""; }
.site-header__nav-link:hover::after,
.mobile-menu a:hover::after,
.site-footer__col-list a:hover::after { opacity: 1; }
/* A: krzyżyki rejestracyjne w rogach siatek kart */
.polecane__grid, .blog-grid-standard, .blog-grid-featured, .channels__grid { position: relative; }
.polecane__grid::before, .polecane__grid::after,
.blog-grid-standard::before, .blog-grid-standard::after,
.blog-grid-featured::before, .blog-grid-featured::after,
.channels__grid::before, .channels__grid::after {
content: "";
position: absolute;
width: 15px; height: 15px;
pointer-events: none;
background:
linear-gradient(currentColor, currentColor) center / 1px 100% no-repeat,
linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat;
opacity: 0.55;
}
.polecane__grid::before, .blog-grid-standard::before, .blog-grid-featured::before, .channels__grid::before { top: -18px; left: -18px; }
.polecane__grid::after, .blog-grid-standard::after, .blog-grid-featured::after, .channels__grid::after { bottom: -18px; right: -18px; }
.polecane__grid, .channels__grid { color: var(--color-acid-yellow); }
.polecane__grid > *, .channels__grid > * { color: initial; }
@media (max-width: 600px) {
.polecane__grid::before, .blog-grid-standard::before, .blog-grid-featured::before, .channels__grid::before { top: -12px; left: -6px; }
.polecane__grid::after, .blog-grid-standard::after, .blog-grid-featured::after, .channels__grid::after { bottom: -12px; right: -6px; }
}
/* A: [+] w stopce kart */
.polecane-card__cta, .blog-grid-standard__post-readmore { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.polecane-card__cta::after, .blog-grid-standard__post-readmore::after {
content: "[+]" / "";
font-family: var(--font-mono);
font-weight: 700;
letter-spacing: 0;
opacity: 0.7;
transition: transform 0.25s, opacity 0.25s;
}
.polecane-card:hover .polecane-card__cta::after,
.blog-grid-standard__post:hover .blog-grid-standard__post-readmore::after { transform: rotate(90deg); opacity: 1; }
/* Etykiety działów z ikoną */
.polecane-card__cat, .hero-story__cat { display: inline-flex; align-items: center; }
/* B: warstwice w hero */
.hero-topo {
position: absolute; inset: -6% -4%;
z-index: 2;
pointer-events: none;
background: var(--aa-topo) center / cover no-repeat;
opacity: 0.2;
mix-blend-mode: screen;
-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 70%, transparent 100%);
mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 70%, transparent 100%);
}
@media (prefers-reduced-motion: no-preference) {
.hero-topo { animation: aa-topo-drift 70s ease-in-out infinite alternate; }
}
@keyframes aa-topo-drift {
from { transform: translate3d(0, 0, 0) scale(1); }
to { transform: translate3d(-3%, 2%, 0) scale(1.06); }
}
/* B: panel DANE_ (prawdziwe liczby serwisu) */
.hero-data {
position: absolute;
z-index: 8;
top: calc(48px + 18px);
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 2.25rem;
margin: 0;
font-family: var(--font-mono);
pointer-events: none;
}
.hero-data div { display: grid; gap: 2px; }
.hero-data dt { font-size: 10px; letter-spacing: 0.2em; color: var(--color-muted-on-dark); }
.hero-data dd { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; color: var(--color-acid-yellow); }
@media (max-width: 1023px) { .hero-data { display: none; } }
/* B: pionowy pasek z logotypem (szerokie ekrany) */
.hero-rail { display: none; }
@media (min-width: 1280px) {
.hero-rail {
position: absolute;
z-index: 9;
top: 48px; right: 0; bottom: 0;
width: 84px;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
gap: 1.25rem;
padding: 1.5rem 0;
border-left: 1px solid rgba(225, 255, 0, 0.22);
background: rgba(9, 10, 12, 0.55);
pointer-events: none;
}
.hero-rail__word {
writing-mode: vertical-rl;
transform: rotate(180deg);
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(34px, 5.4vh, 50px);
line-height: 1;
letter-spacing: -0.03em;
color: var(--color-acid-yellow);
white-space: nowrap;
margin-top: auto;
}
.hero-rail__meta {
writing-mode: vertical-rl;
transform: rotate(180deg);
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.2em;
color: var(--color-muted-on-dark);
white-space: nowrap;
}
.hero-rail__plus { font-family: var(--font-mono); color: var(--color-acid-yellow); font-size: 18px; }
.hero--story .hero-inner { padding-right: 132px; }
.hero--story .hero-latest__inner { padding-right: 132px; }
.hero-hud__bracket--tr, .hero-hud__bracket--br { right: 108px !important; }
}
/* B: warstwice w newsletterze i w „Kanałach” */
.newsletter__fx::after,
.channels::before {
content: "";
position: absolute; inset: 0;
pointer-events: none;
background: var(--aa-topo) center / cover no-repeat;
opacity: 0.1;
}
.newsletter__fx { position: absolute; }
.channels { position: relative; overflow: hidden; }
.channels > .container-wide { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
.polecane-card__cta::after, .blog-grid-standard__post-readmore::after { transition: none; }
}
/* =====================================================
2.1.0: nagłówki litera po literze, komentarze, okładki w Bibliotece
===================================================== */
/* Nagłówki: litery wjeżdżają po kolei (klasy dokłada main.js) */
.aa-split .aa-word { display: inline-block; white-space: nowrap; }
.aa-split .aa-ch {
display: inline-block;
opacity: 0;
transform: translateY(0.55em) rotate(8deg);
transform-origin: 0 100%;
transition: transform 0.75s cubic-bezier(0.2, 0.85, 0.2, 1), opacity 0.45s ease;
transition-delay: calc(var(--i, 0) * 32ms);
}
.aa-split.is-in .aa-ch { opacity: 1; transform: none; }
/* Pionowy napis BIBLIOTEKA: litery wjeżdżają z boku */
.books__title.aa-split .aa-ch { transform: translateX(-0.5em); }
.books__title.aa-split.is-in .aa-ch { transform: none; }
/* Biblioteka: okładka w tle po najechaniu / fokusie */
.books { position: relative; isolation: isolate; }
/* Kontener bez pozycjonowania: okładka zaczepia się o całą sekcję (pełna wysokość, do krawędzi ekranu) */
.books .books__container, .books .books__list, .books .book { position: static; }
.books__title-wrap, .book__meta, .book__row, .books__cta-wrap { position: relative; z-index: 1; }
.book__cover {
position: absolute;
z-index: -1;
top: 0; bottom: 0; right: 0;
width: 58%;
pointer-events: none;
opacity: 0;
transform: scale(1.06) translateX(2%);
transition: opacity 0.6s ease, transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%), linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
-webkit-mask-composite: source-in;
mask-image: linear-gradient(90deg, transparent 0%, #000 45%), linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
mask-composite: intersect;
}
.book__cover img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%) contrast(1.1); }
.book:hover .book__cover, .book:focus-visible .book__cover { opacity: 0.22; transform: none; }
@media (hover: none) { .book__cover { display: none; } }
/* Komentarze */
.post-single__comments { background: var(--color-smoky-black); padding: 5rem 0; }
.aa-comments {
position: relative;
overflow: hidden;
padding: 2rem 1.5rem 2.25rem;
color: var(--color-off-white);
background: #15171a;
border: 1px solid rgba(225, 255, 0, 0.35);
}
@media (min-width: 768px) { .aa-comments { padding: 2.75rem 3rem 3rem; } }
.aa-comments__fx { position: absolute; inset: 0; pointer-events: none; background: var(--aa-topo) center / cover no-repeat; opacity: 0.08; }
.aa-comments > *:not(.aa-comments__fx) { position: relative; }
.aa-comments__corner { position: absolute !important; width: 22px; height: 22px; border: 2px solid var(--color-acid-yellow); }
.aa-comments__corner--tl { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.aa-comments__corner--br { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.aa-comments__kicker { margin: 0 0 0.75rem; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; color: var(--color-acid-yellow); }
.aa-comments__title {
margin: 0 0 1rem;
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(2.25rem, 6vw, 4rem);
line-height: 0.9;
letter-spacing: -0.04em;
color: var(--color-off-white);
text-transform: uppercase;
}
.aa-comments__title small a { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; color: var(--color-acid-yellow); text-transform: none; }
.aa-comments__lead { margin: 0 0 1.25rem; max-width: 52ch; font-size: 1.0625rem; line-height: 1.55; color: #D6D7D9; }
.aa-comments__starters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }
.aa-comments__starters button {
min-height: 40px;
padding: 0 0.9rem;
background: transparent;
border: 1px solid rgba(244, 244, 245, 0.35);
color: var(--color-off-white);
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.06em;
cursor: pointer;
transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.aa-comments__starters button::before { content: "+ " / ""; color: var(--color-acid-yellow); }
.aa-comments__starters button:hover, .aa-comments__starters button:focus-visible { background: var(--color-acid-yellow); color: var(--color-smoky-black); border-color: var(--color-acid-yellow); }
.aa-comments__starters button:hover::before { color: inherit; }
.aa-comments__form { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 768px) {
.aa-comments__form { grid-template-columns: 1fr 1fr; }
.aa-comments__form .comment-form-comment, .aa-comments__form .comment-form-cookies-consent, .aa-comments__form .form-submit, .aa-comments__form .aa-comments__privacy { grid-column: 1 / -1; }
}
.aa-comments__form p { margin: 0; }
.aa-comments__form label { display: block; margin-bottom: 0.4rem; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: #C9CACC; }
.aa-comments__form label span { text-transform: none; letter-spacing: 0.04em; opacity: 0.8; }
.aa-comments__form input[type="text"], .aa-comments__form input[type="email"], .aa-comments__form textarea {
display: block;
width: 100%;
padding: 0.9rem 1rem;
background: var(--color-smoky-black) !important;
border: 1px solid rgba(244, 244, 245, 0.35) !important;
border-radius: 0;
color: var(--color-white) !important;
font-family: var(--font-sans);
font-size: 16px;
line-height: 1.5;
transition: border-color 0.2s, box-shadow 0.2s;
}
.aa-comments__form textarea { min-height: 160px; resize: vertical; }
.aa-comments__form input::placeholder, .aa-comments__form textarea::placeholder { color: #8E9093; opacity: 1; }
.aa-comments__form input:focus, .aa-comments__form textarea:focus { outline: none; border-color: var(--color-acid-yellow) !important; box-shadow: 0 0 0 3px rgba(225, 255, 0, 0.25); }
.aa-comments__form .comment-form-cookies-consent { display: flex; align-items: flex-start; gap: 0.6rem; }
.aa-comments__form .comment-form-cookies-consent input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--color-acid-yellow); flex: none; }
.aa-comments__form .comment-form-cookies-consent label { margin: 0; font-family: var(--font-sans); font-size: 14px; letter-spacing: 0; text-transform: none; }
.aa-comments__submit {
min-height: 56px;
padding: 0 1.75rem;
background: var(--color-acid-yellow) !important;
color: var(--color-smoky-black) !important;
border: 0 !important;
font-family: var(--font-mono);
font-size: 14px;
font-weight: 700;
letter-spacing: 0.18em;
cursor: pointer;
transition: background 0.25s, color 0.25s, letter-spacing 0.25s;
}
.aa-comments__submit:hover { background: var(--color-rescue-orange) !important; color: var(--color-off-white) !important; letter-spacing: 0.24em; }
.aa-comments__submit:focus-visible, .aa-comments__starters button:focus-visible { outline: 2px solid var(--color-off-white); outline-offset: 3px; }
.aa-comments__privacy { font-size: 13px; color: #C9CACC; }
.aa-comments__privacy a { color: var(--color-acid-yellow); text-underline-offset: 3px; }
/* Lista komentarzy */
.aa-comments__list { list-style: none; margin: 0 0 2.5rem; padding: 0; }
.aa-comments__list .comment { margin: 0 0 1rem; padding: 1.25rem; border: 1px solid rgba(244, 244, 245, 0.14); background: rgba(9, 10, 12, 0.6); }
.aa-comments__list .children { list-style: none; margin: 1rem 0 0 1.5rem; padding: 0; border-left: 2px solid var(--color-rescue-orange); }
.aa-comments__list .comment-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; font-family: var(--font-mono); font-size: 12px; color: #C9CACC; }
.aa-comments__list .avatar { width: 40px; height: 40px; filter: grayscale(100%); }
.aa-comments__list .fn, .aa-comments__list .fn a { color: var(--color-acid-yellow); font-style: normal; font-weight: 700; text-decoration: none; }
.aa-comments__list .comment-metadata a { color: #C9CACC; text-decoration: none; }
.aa-comments__list .comment-content { color: var(--color-off-white); line-height: 1.6; }
.aa-comments__list .reply a { display: inline-flex; min-height: 36px; align-items: center; font-family: var(--font-mono); font-size: 12px; color: var(--color-acid-yellow); }
.aa-comments .says { display: none; }
@media (prefers-reduced-motion: reduce) {
.book__cover { transition: none; }
}
/* Stare reguły formularza komentarzy (1.1.x) mają !important: w nowym panelu wygrywa nowy wygląd */
#comments.aa-comments #respond { padding: 0 !important; border: 0 !important; background: none !important; margin: 0 !important; }
#comments.aa-comments #reply-title {
font-family: var(--font-display) !important;
font-size: clamp(2.25rem, 6vw, 4rem) !important;
font-weight: 700 !important;
letter-spacing: -0.04em !important;
text-transform: uppercase !important;
color: var(--color-off-white) !important;
margin: 0 0 1rem !important;
padding: 0 !important;
border: 0 !important;
line-height: 0.9;
}
#comments.aa-comments input[type="text"],
#comments.aa-comments input[type="email"],
#comments.aa-comments textarea {
background: var(--color-smoky-black) !important;
border: 1px solid rgba(244, 244, 245, 0.35) !important;
color: var(--color-white) !important;
font-family: var(--font-sans) !important;
font-size: 16px !important;
padding: 0.9rem 1rem !important;
}
#comments.aa-comments input:focus,
#comments.aa-comments textarea:focus { border-color: var(--color-acid-yellow) !important; box-shadow: 0 0 0 3px rgba(225, 255, 0, 0.25) !important; }
#comments.aa-comments input[type="submit"] {
background: var(--color-acid-yellow) !important;
color: var(--color-smoky-black) !important;
border: 0 !important;
min-height: 56px;
padding: 0 1.75rem !important;
font-family: var(--font-mono) !important;
font-size: 14px !important;
font-weight: 700 !important;
letter-spacing: 0.18em !important;
}
#comments.aa-comments input[type="submit"]:hover { background: var(--color-rescue-orange) !important; color: var(--color-off-white) !important; }
#comments.aa-comments label { color: #C9CACC !important; }
/* 2.1.1: hero bez zdjęcia gór, warstwice wyraźniejsze */
.hero--story .hero-topo { opacity: 0.34; }
.hero--story .hero-bg-mountains { background: radial-gradient(80% 70% at 70% 40%, #1b1e22 0%, var(--color-smoky-black) 70%); }
.hero--story .hero-mist { display: none; }
/* 2.1.3: komentarze szeroko, żółty pas jak MENTAL, dwie kolumny */
.post-single__comments { background: var(--color-acid-yellow); padding: 0; border-top: 1px solid var(--color-smoky-black); }
.post-single__comments > .container-wide { padding-top: 5rem; padding-bottom: 5rem; }
#comments.aa-comments {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 2.5rem;
padding: 0;
background: none;
border: 0;
color: var(--color-smoky-black);
overflow: visible;
}
@media (min-width: 1024px) { #comments.aa-comments { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4rem; align-items: start; } }
#comments .aa-comments__fx { inset: -5rem -50vw; opacity: 0.12; filter: invert(1) grayscale(1); }
#comments .aa-comments__corner { border-color: var(--color-smoky-black); }
#comments .aa-comments__corner--tl { top: -2.5rem; left: -1rem; }
#comments .aa-comments__corner--br { bottom: -2.5rem; right: -1rem; }
#comments .aa-comments__kicker { color: var(--color-smoky-black); }
#comments .aa-comments__title { font-size: clamp(3rem, 9vw, 8.5rem); color: var(--color-smoky-black); margin-bottom: 1.5rem; text-transform: uppercase; }
#comments .aa-comments__lead { color: var(--color-smoky-black); font-size: 1.1875rem; max-width: 36ch; }
#comments .aa-comments__starters-label { margin: 0 0 0.6rem; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; }
#comments .aa-comments__starters button { border-color: var(--color-smoky-black); color: var(--color-smoky-black); background: transparent; min-height: 44px; font-weight: 700; }
#comments .aa-comments__starters button::before { color: var(--color-rescue-orange-text); }
#comments .aa-comments__starters button:hover, #comments .aa-comments__starters button:focus-visible { background: var(--color-smoky-black); color: var(--color-acid-yellow); }
#comments .aa-comments__starters button:hover::before { color: var(--color-acid-yellow); }
#comments .aa-comments__starters button:focus-visible, #comments .aa-comments__submit:focus-visible { outline: 2px solid var(--color-smoky-black); outline-offset: 3px; }
#comments .aa-comments__main { min-width: 0; background: var(--color-off-white); border: 1px solid var(--color-smoky-black); box-shadow: 10px 10px 0 var(--color-smoky-black); padding: 1.75rem; }
@media (min-width: 768px) { #comments .aa-comments__main { padding: 2.25rem 2.5rem; } }
#comments .aa-comments__replyto { margin: 0 0 1rem; font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--color-smoky-black); }
#comments .aa-comments__replyto:empty { display: none; }
#comments .aa-comments__replyto a { color: var(--color-rescue-orange-text); margin-left: 0.75rem; }
#comments.aa-comments #reply-title { all: unset; display: block; font-family: var(--font-mono) !important; font-size: 12px !important; font-weight: 700 !important; color: var(--color-smoky-black) !important; margin: 0 0 1rem !important; }
#comments.aa-comments #reply-title:empty { display: none; }
#comments.aa-comments label { color: var(--color-smoky-black) !important; }
#comments.aa-comments input[type="text"],
#comments.aa-comments input[type="email"],
#comments.aa-comments textarea {
background: var(--color-white) !important;
border: 1px solid var(--color-smoky-black) !important;
color: var(--color-smoky-black) !important;
}
#comments.aa-comments input::placeholder, #comments.aa-comments textarea::placeholder { color: #6b6d70; }
#comments.aa-comments input:focus, #comments.aa-comments textarea:focus { border-color: var(--color-smoky-black) !important; box-shadow: 0 0 0 3px var(--color-acid-yellow), 0 0 0 4px var(--color-smoky-black) !important; }
#comments.aa-comments input[type="submit"] { background: var(--color-smoky-black) !important; color: var(--color-acid-yellow) !important; }
#comments.aa-comments input[type="submit"]:hover { background: var(--color-rescue-orange) !important; color: var(--color-off-white) !important; }
#comments .aa-comments__privacy { color: var(--color-smoky-black); }
#comments .aa-comments__privacy a { color: var(--color-smoky-black); font-weight: 700; text-decoration: underline; }
#comments .comment-form-cookies-consent input { accent-color: var(--color-smoky-black); }
#comments .aa-comments__list .comment { background: var(--color-white); border-color: var(--color-smoky-black); }
#comments .aa-comments__list .comment-content, #comments .aa-comments__list .comment-meta, #comments .aa-comments__list .comment-metadata a { color: var(--color-smoky-black); }
#comments .aa-comments__list .fn, #comments .aa-comments__list .fn a, #comments .aa-comments__list .reply a { color: var(--color-rescue-orange-text); }
/* 2.1.3: pełna szerokość treści (stara reguła ograniczała do 820 px) */
.post-single__comments .container-wide { max-width: var(--max-width) !important; }
@media (min-width: 768px) { .post-single__comments { padding-left: 0 !important; padding-right: 0 !important; } }
#comments .aa-comments__title { font-size: clamp(3rem, 7vw, 6.75rem); overflow-wrap: normal; }
@media (min-width: 1024px) { #comments .aa-comments__title { font-size: clamp(3.5rem, 5.6vw, 6.75rem); } }
/* =====================================================
2.2.0 HERO „OKŁADKA” (wzór: Marathon): zdjęcie na całą szerokość,
żółty pas z pionowym logotypem, żółty blok z historią, czarny pasek DANE_
===================================================== */
.hero--cover {
--rail: clamp(180px, 17vw, 260px);
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto auto auto;
padding-top: 48px;
background: var(--color-smoky-black);
color: var(--color-smoky-black);
overflow: hidden;
}
.hero-cover__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #1c1e22; }
.hero-cover__img { width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: no-preference) {
.hero-cover__img { animation: aa-settle 1.4s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
}
.hero--cover .hero-data { position: static; transform: none; display: none; }
.hero-cover__block {
position: relative;
z-index: 2;
background: var(--color-acid-yellow);
padding: 1.75rem 1.5rem 2rem;
}
.hero-cover__claim {
margin: 0 0 1rem;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--color-smoky-black);
}
.hero--cover .hero-story__meta { color: var(--color-smoky-black); margin-bottom: 0.9rem; animation: none; }
.hero--cover .hero-story__cat { background: var(--color-smoky-black); color: var(--color-acid-yellow); }
.hero-cover__title {
margin: 0;
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(2rem, 3.4vw, 3.75rem);
line-height: 0.95;
letter-spacing: -0.035em;
text-transform: uppercase;
text-wrap: balance;
}
.hero-cover__title a { color: var(--color-smoky-black); text-decoration: none; }
.hero-cover__title a:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }
.hero-cover__lead { margin: 1rem 0 0; max-width: 58ch; font-size: 1rem; line-height: 1.55; color: var(--color-smoky-black); }
.hero-cover__cta {
display: inline-flex; align-items: center; gap: 0.6rem;
min-height: 48px; margin-top: 1.25rem; padding: 0 1.4rem;
background: var(--color-smoky-black); color: var(--color-acid-yellow);
font-family: var(--font-mono); font-size: 13px; font-weight: 700; letter-spacing: 0.14em;
text-decoration: none;
transition: background 0.2s, color 0.2s;
}
.hero-cover__block:hover .hero-cover__cta { background: var(--color-rescue-orange); color: var(--color-off-white); }
.hero--cover .hero-rail { display: none; }
.hero--cover .hero-latest { grid-column: 1 / -1; background: var(--color-smoky-black); border-top: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
.hero--cover .hero-latest__title { color: var(--color-off-white); }
@media (min-width: 1024px) {
.hero--cover {
grid-template-columns: minmax(0, 1fr) var(--rail);
grid-template-rows: auto 1fr auto;
min-height: 100vh;
min-height: 100svh;
}
.hero-cover__media { grid-column: 1; grid-row: 1 / 4; aspect-ratio: auto; }
.hero-cover__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(9,10,12,0.35) 0%, rgba(9,10,12,0) 22%, rgba(9,10,12,0) 60%, rgba(9,10,12,0.45) 100%); }
.hero--cover .hero-data {
grid-column: 1; grid-row: 1;
position: relative; z-index: 3;
display: flex; gap: 0; align-self: start; justify-self: start;
margin: 0; padding: 0;
background: var(--color-smoky-black);
pointer-events: none;
}
.hero--cover .hero-data div { padding: 0.65rem 1.25rem; border-right: 1px solid rgba(225, 255, 0, 0.25); }
.hero-cover__block {
grid-column: 1; grid-row: 2;
align-self: end; justify-self: start;
width: min(780px, 64%);
margin-bottom: 0;
padding: 2rem 2.5rem 2.25rem;
}
.hero--cover .hero-latest { grid-column: 1; grid-row: 3; position: relative; z-index: 3; }
.hero--cover .hero-latest__inner { padding-right: 48px; }
/* Żółty pas z pionowym logotypem */
.hero--cover .hero-rail {
grid-column: 2; grid-row: 1 / 4;
position: relative; top: auto; right: auto; bottom: auto;
display: flex; flex-direction: column; align-items: center; justify-content: space-between;
width: auto;
padding: 1.25rem 0.75rem;
background: var(--color-acid-yellow);
border-left: 0;
overflow: hidden;
}
.hero--cover .hero-rail::before {
content: ""; position: absolute; inset: 0;
background: var(--aa-topo) center / cover no-repeat;
filter: invert(1) grayscale(1);
opacity: 0.1;
}
.hero--cover .hero-rail > * { position: relative; }
.hero--cover .hero-rail__word {
writing-mode: vertical-rl;
transform: none;
margin: 0;
font-family: var(--font-display);
font-weight: 700;
font-size: min(12.5vh, 6.4vw);
line-height: 0.82;
letter-spacing: -0.045em;
color: var(--color-smoky-black);
white-space: nowrap;
}
.hero--cover .hero-rail__meta { color: var(--color-smoky-black); opacity: 0.75; transform: none; writing-mode: vertical-rl; font-size: 10px; }
.hero--cover .hero-rail__plus { color: var(--color-smoky-black); font-family: var(--font-mono); font-size: 22px; line-height: 1; }
.hero--cover .hero-rail__code {
width: 28px; height: 64px;
background: repeating-linear-gradient(180deg, var(--color-smoky-black) 0 2px, transparent 2px 4px, var(--color-smoky-black) 4px 7px, transparent 7px 9px);
}
}
@media (prefers-reduced-motion: no-preference) and (min-width: 1024px) {
.hero--cover .hero-rail__word { animation: aa-rail-in 1s cubic-bezier(0.2, 0.85, 0.2, 1) 0.1s both; }
.hero-cover__block { animation: aa-block-in 0.8s cubic-bezier(0.2, 0.85, 0.2, 1) 0.15s both; }
}
@keyframes aa-rail-in { from { transform: translateY(-8%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes aa-block-in { from { transform: translateY(24px); } to { transform: none; } }
.hero--cover a:focus-visible { outline: 2px solid var(--color-smoky-black); outline-offset: 3px; }
.hero--cover .hero-latest a:focus-visible { outline-color: var(--color-acid-yellow); }
/* =====================================================
2.2.0 RYTM KOLORÓW: newsletter żółty, Sprzęt jasny, Video czarny,
Biblioteka pomarańczowa, Kanały jasne, stopka czarna
===================================================== */
/* Newsletter: żółty */
.newsletter--v2 { background: var(--color-acid-yellow); color: var(--color-smoky-black); }
.newsletter--v2 .newsletter__fx { background: none; }
.newsletter--v2 .newsletter__fx::after { filter: invert(1) grayscale(1); opacity: 0.1; }
.newsletter--v2 .newsletter__ticker { background: var(--color-smoky-black); color: var(--color-acid-yellow); border-color: var(--color-smoky-black); }
.newsletter--v2 .newsletter__ticker-group i { color: var(--color-rescue-orange); }
.newsletter--v2 .newsletter__kicker, .newsletter--v2 .newsletter__title, .newsletter--v2 .newsletter__lead { color: var(--color-smoky-black); }
.newsletter--v2 .newsletter__subtitle { color: var(--color-smoky-black); opacity: 0.75; }
.newsletter--v2 .newsletter__panel { background: var(--color-white); border: 1px solid var(--color-smoky-black); box-shadow: 10px 10px 0 var(--color-smoky-black); -webkit-backdrop-filter: none; backdrop-filter: none; }
.newsletter--v2 .newsletter__corner { border-color: var(--color-smoky-black); }
.newsletter--v2 .newsletter__scan { display: none; }
.newsletter--v2 .newsletter__panel-bar { color: var(--color-smoky-black); border-bottom-color: rgba(9, 10, 12, 0.3); }
.newsletter--v2 .newsletter__status { color: var(--color-smoky-black); }
.newsletter--v2 .newsletter__status i { background: #1f9d55; box-shadow: none; }
.newsletter--v2 .newsletter__prompt { color: var(--color-smoky-black); }
#newsletter.newsletter--v2 .newsletter__shortcode-wrap input[type="email"],
#newsletter.newsletter--v2 .newsletter__input { background: var(--color-white) !important; border: 1px solid var(--color-smoky-black) !important; color: var(--color-smoky-black) !important; }
#newsletter.newsletter--v2 .newsletter__shortcode-wrap input[type="email"]::placeholder { color: #6b6d70 !important; }
#newsletter.newsletter--v2 .newsletter__shortcode-wrap input[type="email"]:focus { box-shadow: 0 0 0 3px var(--color-acid-yellow), 0 0 0 4px var(--color-smoky-black) !important; }
#newsletter.newsletter--v2 .newsletter__shortcode-wrap button[type="submit"],
#newsletter.newsletter--v2 .mailerlite-subscribe-submit,
#newsletter.newsletter--v2 .newsletter__btn { background: var(--color-smoky-black) !important; color: var(--color-acid-yellow) !important; }
#newsletter.newsletter--v2 .mailerlite-form-description a { color: var(--color-smoky-black) !important; }
#newsletter.newsletter--v2 .mailerlite-form-description strong { color: var(--color-smoky-black) !important; }
#newsletter.newsletter--v2 .newsletter__disclaimer { color: var(--color-smoky-black); opacity: 0.8; }
/* Sprzęt: jasny */
#sprzet.gear-log { background: var(--color-off-white); color: var(--color-smoky-black); border-top: 1px solid var(--color-smoky-black); }
#sprzet .summit-log__title { color: var(--color-smoky-black); }
#sprzet .summit-log__subtitle, #sprzet .gear-grid__col-title { color: var(--color-rescue-orange-text) !important; }
#sprzet .summit-log__stats, #sprzet .gear-grid__col-count, #sprzet .gear-card__date { color: var(--color-muted-on-light) !important; opacity: 1; }
#sprzet .gear-grid__col-head { border-bottom-color: var(--color-smoky-black); }
#sprzet .gear-grid__empty { color: var(--color-muted-on-light); border-color: rgba(9, 10, 12, 0.3); }
#sprzet .gear-card { background: var(--color-white); border-color: var(--color-smoky-black); color: var(--color-smoky-black) !important; }
#sprzet .gear-card:hover { background: var(--color-acid-yellow); border-color: var(--color-smoky-black); }
#sprzet .gear-card__title, #sprzet .gear-card:hover .gear-card__title { color: var(--color-smoky-black) !important; }
#sprzet .gear-card__arrow { color: var(--color-smoky-black) !important; }
#sprzet .gear-card__thumb { background: #e4e4e6; border-color: var(--color-smoky-black); }
#sprzet .gear-card__thumb-placeholder { color: var(--color-muted-on-light); }
#sprzet .summit-log__footer { background: var(--color-white); border: 1px solid var(--color-smoky-black); }
#sprzet .summit-log__footer-text { color: var(--color-smoky-black); opacity: 1; }
#sprzet .summit-log__footer-btn { color: var(--color-smoky-black); border-bottom-color: var(--color-smoky-black); }
#sprzet .summit-log__footer-btn:hover { color: var(--color-rescue-orange-text); }
/* Biblioteka: pomarańczowa */
#biblioteka.books { background: var(--color-rescue-orange); color: var(--color-smoky-black); }
#biblioteka .books__title { color: var(--color-smoky-black); opacity: 1; }
#biblioteka .book__meta, #biblioteka .book__meta span { color: var(--color-smoky-black) !important; opacity: 1; }
#biblioteka .book__line { background: rgba(9, 10, 12, 0.35); }
#biblioteka .book:hover .book__line { background: var(--color-smoky-black); }
#biblioteka .book__title { color: var(--color-smoky-black); }
#biblioteka .book:hover .book__title { color: var(--color-white); }
#biblioteka .book__author { color: var(--color-smoky-black); opacity: 0.85; }
#biblioteka .books__cta { background: var(--color-smoky-black) !important; color: var(--color-acid-yellow) !important; }
#biblioteka .book__cover { mix-blend-mode: multiply; }
#biblioteka .book:hover .book__cover, #biblioteka .book:focus-visible .book__cover { opacity: 0.45; }
#biblioteka a:focus-visible { outline: 2px solid var(--color-smoky-black); outline-offset: 3px; }
/* Kanały: jasne */
.channels { background: var(--color-off-white); color: var(--color-smoky-black); border-top: 1px solid var(--color-smoky-black); }
.channels::before { filter: invert(1) grayscale(1); opacity: 0.08; }
.channels__title { color: var(--color-smoky-black); }
.channels__subtitle { color: var(--color-rescue-orange-text); }
.channels__grid { color: var(--color-smoky-black); }
.channel:hover { box-shadow: 8px 8px 0 var(--color-smoky-black); }
.channel--youtube:hover { box-shadow: 8px 8px 0 var(--color-rescue-orange); }
.channels__more { color: var(--color-muted-on-light); }
.channels__more a { color: var(--color-smoky-black); font-weight: 700; }
/* 2.2.0: poprawki układu okładki (stare reguły .hero wymuszały wysokość i przesunięcia) */
.hero.hero--cover { height: auto; min-height: 0; align-items: stretch; justify-content: flex-start; cursor: default; }
.hero--cover .hero-data { top: auto; left: auto; transform: none; }
@media (min-width: 1024px) {
.hero.hero--cover { min-height: 100vh; min-height: 100svh; }
.hero-cover__media { position: absolute; top: 48px; left: 0; right: var(--rail); bottom: 0; grid-row: auto; }
.hero--cover .hero-data { margin-top: 0; }
}
/* 2.2.0: warstwice komentarzy na całej sekcji (bez wychodzenia poza ekran) */
#comments .aa-comments__fx { display: none; }
.post-single__comments { position: relative; overflow: hidden; }
.post-single__comments::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--aa-topo) center / cover no-repeat; filter: invert(1) grayscale(1); opacity: 0.12; }
.post-single__comments > .container-wide { position: relative; }
/* =====================================================
2.3.0 NAGŁÓWEK (wzór: Marathon): czarny pasek, żółte bloki logo i KONTAKT,
na telefonie menu na pełny ekran
===================================================== */
.site-header {
padding: 0;
background: var(--color-smoky-black);
border-bottom: 1px solid rgba(225, 255, 0, 0.25);
color: var(--color-off-white);
}
.site-header__logo {
align-self: stretch;
display: flex;
align-items: center;
padding: 0 1.25rem;
background: var(--color-acid-yellow);
color: var(--color-smoky-black) !important;
font-size: 12px;
letter-spacing: 0.14em;
text-decoration: none;
transition: background 0.2s;
}
.site-header__logo:hover { background: var(--color-white); }
.site-header__logo img { max-height: 32px; width: auto; }
.site-header__nav { display: none; align-self: stretch; gap: 1.75rem; }
.site-header__nav-link { color: var(--color-off-white) !important; font-size: 11px; letter-spacing: 0.16em; }
.site-header__nav-link:hover, .site-header__nav-link:focus-visible { color: var(--color-acid-yellow) !important; }
.site-header__cta {
align-self: stretch;
display: flex;
align-items: center;
margin-left: 0.5rem;
padding: 0 1.75rem;
background: var(--color-acid-yellow);
color: var(--color-smoky-black) !important;
font-size: 12px;
letter-spacing: 0.14em;
}
.site-header__cta:hover { background: var(--color-rescue-orange); color: var(--color-off-white) !important; }
.site-header a:focus-visible, .site-header button:focus-visible { outline: 2px solid var(--color-acid-yellow); outline-offset: -4px; }
.site-header__logo:focus-visible, .site-header__cta:focus-visible { outline-color: var(--color-smoky-black); }
/* Przycisk menu (telefon / tablet) */
.site-header__menu-btn {
display: flex;
align-items: center;
align-self: stretch;
padding: 0 1.25rem;
background: var(--color-acid-yellow);
border: 0;
color: var(--color-smoky-black);
font-family: var(--font-mono);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.14em;
cursor: pointer;
}
.site-header__menu-btn b { font-weight: 700; margin-left: 0.25rem; }
.site-header__menu-close { display: none; }
.site-header__menu-btn[aria-expanded="true"] { background: var(--color-off-white); }
.site-header__menu-btn[aria-expanded="true"] .site-header__menu-open { display: none; }
.site-header__menu-btn[aria-expanded="true"] .site-header__menu-close { display: inline; }
@media (min-width: 768px) {
.site-header__nav { display: none; }
.site-header__menu-btn { display: flex; }
}
@media (min-width: 1100px) {
.site-header__nav { display: flex; }
.site-header__menu-btn { display: none; }
}
/* Menu na pełny ekran */
.mobile-menu {
top: 48px;
bottom: 0;
height: auto;
padding: 1rem 1.5rem 2rem;
background: var(--color-smoky-black);
border-bottom: 0;
overflow-y: auto;
counter-reset: aa-menu;
}
.mobile-menu::before {
content: "";
position: absolute; inset: 0;
pointer-events: none;
background: var(--aa-topo) center / cover no-repeat;
opacity: 0.12;
}
.mobile-menu a {
position: relative;
display: flex !important;
align-items: baseline;
gap: 0.75rem;
padding: 0.9rem 0 !important;
border-bottom: 1px solid rgba(244, 244, 245, 0.14) !important;
color: var(--color-off-white) !important;
font-family: var(--font-display) !important;
font-size: clamp(1.75rem, 8vw, 2.5rem) !important;
font-weight: 700;
letter-spacing: -0.02em !important;
line-height: 1;
text-decoration: none;
counter-increment: aa-menu;
}
.mobile-menu a::before {
content: counter(aa-menu, decimal-leading-zero);
order: -1;
font-family: var(--font-mono);
font-size: 12px;
font-weight: 400;
letter-spacing: 0.1em;
color: var(--color-rescue-orange);
}
.mobile-menu a::after { font-family: var(--font-mono); font-size: 0.4em !important; margin-left: auto; color: var(--color-acid-yellow); opacity: 0.8 !important; }
.mobile-menu a:hover, .mobile-menu a:focus-visible { color: var(--color-acid-yellow) !important; }
html.aa-menu-open { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
.mobile-menu.is-open a { animation: fade-up 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.mobile-menu.is-open a:nth-child(2) { animation-delay: 0.04s; }
.mobile-menu.is-open a:nth-child(3) { animation-delay: 0.08s; }
.mobile-menu.is-open a:nth-child(4) { animation-delay: 0.12s; }
.mobile-menu.is-open a:nth-child(5) { animation-delay: 0.16s; }
.mobile-menu.is-open a:nth-child(6) { animation-delay: 0.2s; }
.mobile-menu.is-open a:nth-child(7) { animation-delay: 0.24s; }
}
/* 2.3.0 HERO: skromniejszy pas z logotypem, bez paska DANE_ */
@media (min-width: 1024px) {
.hero--cover { --rail: 96px; }
.hero--cover .hero-rail { padding: 1.25rem 0; }
.hero--cover .hero-rail__word {
font-size: clamp(26px, 3.4vh, 36px);
line-height: 1;
letter-spacing: 0.02em;
}
.hero--cover .hero-rail__code { width: 22px; height: 48px; }
.hero-cover__block { grid-row: 1 / 3; }
}
/* Telefon i tablet: pas z logotypem jako poziomy żółty pasek nad zdjęciem */
@media (max-width: 1023px) {
.hero--cover .hero-rail {
display: flex;
order: -1;
align-items: center;
justify-content: space-between;
gap: 1rem;
height: 44px;
padding: 0 1.5rem;
background: var(--color-acid-yellow);
border-bottom: 1px solid var(--color-smoky-black);
position: relative; top: auto; right: auto; bottom: auto; width: auto;
}
.hero--cover .hero-rail__word { writing-mode: horizontal-tb; transform: none; margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: 0.02em; color: var(--color-smoky-black); white-space: nowrap; }
.hero--cover .hero-rail__code { width: 44px; height: 16px; background: repeating-linear-gradient(90deg, var(--color-smoky-black) 0 2px, transparent 2px 4px, var(--color-smoky-black) 4px 7px, transparent 7px 9px); }
.hero--cover .hero-rail__meta, .hero--cover .hero-rail__plus--bottom { display: none; }
.hero--cover .hero-rail__plus { color: var(--color-smoky-black); font-family: var(--font-mono); font-size: 18px; }
.hero--cover .hero-rail__code { order: 3; }
}
@media (max-width: 380px) { .hero--cover .hero-rail__code { display: none; } }
/* 2.3.0: telefon: jeden żółty blok (logo), przycisk menu czarny, bez powtórzonego paska z logotypem */
.site-header__logo, .site-header__menu-btn, .site-header__cta { white-space: nowrap; }
@media (max-width: 1099px) {
.site-header__logo { font-size: 11px; letter-spacing: 0.1em; max-width: 70vw; overflow: hidden; text-overflow: ellipsis; }
.site-header__menu-btn { background: var(--color-smoky-black); color: var(--color-acid-yellow); border-left: 1px solid rgba(225, 255, 0, 0.35); }
.site-header__menu-btn[aria-expanded="true"] { background: var(--color-acid-yellow); color: var(--color-smoky-black); }
}
@media (max-width: 1023px) { .hero--cover .hero-rail { display: none; } }
/* 2.4.0: kadr YouTube we wpisach */
.post-single__body .aa-yt { margin: 2rem 0; aspect-ratio: 16 / 9; }
.post-single__body .aa-yt img { margin: 0; }
.wp-block-embed__wrapper .aa-yt { margin: 0; }
/* =====================================================
2.4.0: powrót do białego nagłówka (decyzja właściciela)
i tytuł hero zawsze widoczny (animacja słów wyłączona)
===================================================== */
.hero--cover .hero-w { overflow: visible; padding: 0; margin: 0; }
.hero--cover .hero-w > span { animation: none !important; transform: none !important; opacity: 1 !important; }
.site-header { background: var(--color-white); border-bottom: 1px solid var(--color-smoky-black); color: var(--color-smoky-black); }
.site-header__logo {
align-self: center;
padding: 0 1.5rem;
background: none;
color: var(--color-smoky-black) !important;
font-size: 10px;
letter-spacing: 0.2em;
}
.site-header__logo:hover { background: none; color: var(--color-rescue-orange-text) !important; }
.site-header__nav { align-self: center; gap: 1.5rem; padding-right: 1.5rem; }
.site-header__nav-link { color: var(--color-smoky-black) !important; font-size: 10px; letter-spacing: 0.2em; }
.site-header__nav-link:hover, .site-header__nav-link:focus-visible { color: var(--color-rescue-orange-text) !important; }
.site-header__nav-link::after { opacity: 0.6; }
.site-header__cta {
align-self: center;
margin-left: 1rem;
padding: 0.35rem 1rem;
background: var(--color-smoky-black);
color: var(--color-acid-yellow) !important;
font-size: 10px;
letter-spacing: 0.1em;
}
.site-header__cta:hover { background: var(--color-rescue-orange); color: var(--color-white) !important; }
.site-header a:focus-visible, .site-header button:focus-visible { outline: 2px solid var(--color-smoky-black); outline-offset: 2px; }
.site-header__menu-btn,
.site-header__menu-btn[aria-expanded="true"] {
align-self: center;
margin-right: 0.75rem;
padding: 0 0.75rem;
min-height: 44px;
background: none;
border: 0;
color: var(--color-smoky-black);
font-size: 11px;
}
@media (max-width: 1099px) {
.site-header__logo { max-width: 60vw; }
.site-header__menu-btn, .site-header__menu-btn[aria-expanded="true"] { background: none; color: var(--color-smoky-black); border-left: 0; }
}
/* Menu na telefonie: pełny ekran, biały, duże pozycje */
.mobile-menu { background: var(--color-white); border-bottom: 0; }
.mobile-menu::before { filter: invert(1) grayscale(1); opacity: 0.06; }
.mobile-menu a { color: var(--color-smoky-black) !important; border-bottom-color: rgba(9, 10, 12, 0.14) !important; }
.mobile-menu a::before { color: var(--color-rescue-orange-text); }
.mobile-menu a::after { color: var(--color-smoky-black) !important; }
.mobile-menu a:hover, .mobile-menu a:focus-visible { color: var(--color-rescue-orange-text) !important; }
/* =====================================================
2.5.0: stopka „Baza”
===================================================== */
:is(.site-footer--base, .site-footer--code) { padding: 0; border-top: 0; overflow: hidden; }
/* Pas newslettera (poza stroną główną) */
.foot-news { background: var(--color-acid-yellow); color: var(--color-smoky-black); padding: 3rem 1.5rem; }
@media (min-width: 768px) { .foot-news { padding: 3.5rem 3rem; } }
.foot-news__inner { display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 900px) { .foot-news__inner { grid-template-columns: 1fr 1.2fr; gap: 3rem; } }
.foot-news__title { margin: 0 0 0.5rem; font-family: var(--font-display); font-weight: 700; font-size: clamp(2.25rem, 6vw, 4rem); line-height: 0.9; letter-spacing: -0.03em; color: var(--color-smoky-black); }
.foot-news__lead { margin: 0; max-width: 32rem; font-size: 1rem; line-height: 1.5; }
.foot-news .mailerlite-form-description { order: 2; margin-top: 0.75rem; font-size: 12px; line-height: 1.5; }
.foot-news .mailerlite-form-description a { color: var(--color-smoky-black); text-decoration: underline; text-underline-offset: 2px; }
.foot-news .mailerlite-form form { display: flex; flex-direction: column; }
.foot-news .mailerlite-form-inputs { display: flex; flex-wrap: wrap; gap: 0; border: 2px solid var(--color-smoky-black); }
.foot-news .mailerlite-form-field { flex: 1 1 14rem; margin: 0; }
.foot-news .mailerlite-form-field input { width: 100%; min-height: 56px; margin: 0; padding: 0 1rem; border: 0; border-radius: 0; background: var(--color-white); color: var(--color-smoky-black); font: 500 1rem var(--font-mono); }
.foot-news .mailerlite-form-field input:focus-visible { outline: 3px solid var(--color-smoky-black); outline-offset: -3px; }
.foot-news .mailerlite-subscribe-button-container { flex: 0 0 auto; }
.foot-news .mailerlite-subscribe-submit { min-height: 56px; width: 100%; margin: 0; padding: 0 1.5rem; border: 0; border-radius: 0; background: var(--color-smoky-black); color: var(--color-acid-yellow); font: 700 12px var(--font-mono); letter-spacing: 0.15em; text-transform: uppercase; cursor: pointer; transition: background 0.2s, color 0.2s; }
.foot-news .mailerlite-subscribe-submit:hover, .foot-news .mailerlite-subscribe-submit:focus-visible { background: var(--color-white); color: var(--color-smoky-black); }
@media (max-width: 520px) { .foot-news .mailerlite-subscribe-button-container { flex-basis: 100%; } }
.foot-news .mailerlite-form-response h4 { margin: 0.5rem 0 0; font: 700 13px var(--font-mono); }
.foot-news .mailerlite-form-response span { color: var(--color-smoky-black) !important; }
/* Kolumny */
.site-footer__main { padding: 4rem 1.5rem 3rem; }
@media (min-width: 768px) { .site-footer__main { padding: 5rem 3rem 3.5rem; } }
:is(.site-footer--base, .site-footer--code) .site-footer__grid { margin: 0; gap: 3rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { :is(.site-footer--base, .site-footer--code) .site-footer__grid { grid-template-columns: 1fr 1.6fr 1.2fr; } }
:is(.site-footer--base, .site-footer--code) .site-footer__col-title { margin-bottom: 1.25rem; padding-bottom: 0.75rem; border-bottom: 1px solid rgba(255,255,255,0.14); }
:is(.site-footer--base, .site-footer--code) .site-footer__col-list a { display: inline-block; padding: 0.3rem 0; font-size: 12px; }
.foot-hot { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.foot-hot__item { display: grid; grid-template-columns: 2.25rem 1fr; gap: 0.5rem; padding: 0.9rem 0; border-bottom: 1px dashed rgba(255,255,255,0.14); }
.foot-hot__item:first-child { padding-top: 0; }
.foot-hot__num { font: 700 12px var(--font-mono); color: var(--color-acid-yellow); padding-top: 0.2rem; }
.foot-hot__link { display: block; color: var(--color-white); text-decoration: none; }
.foot-hot__title { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; line-height: 1.3; transition: color 0.2s; }
.foot-hot__meta { display: block; margin-top: 0.3rem; font: 11px var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-muted-on-dark); }
.foot-hot__link:hover .foot-hot__title, .foot-hot__link:focus-visible .foot-hot__title { color: var(--color-acid-yellow); }
.foot-channels { list-style: none; margin: 0; padding: 0; }
.foot-channels li { border-bottom: 1px solid rgba(255,255,255,0.14); }
.foot-channels__link { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; min-height: 48px; padding: 0.85rem 0; color: var(--color-white); text-decoration: none; }
.foot-channels__name { font: 700 12px var(--font-mono); letter-spacing: 0.2em; }
.foot-channels__handle { font-size: 0.95rem; color: var(--color-muted-on-dark); text-align: right; overflow-wrap: anywhere; transition: color 0.2s; }
.foot-channels__link:hover .foot-channels__handle, .foot-channels__link:focus-visible .foot-channels__handle,
.foot-channels__link:hover .foot-channels__name { color: var(--color-acid-yellow); }
/* Wielki napis na całą szerokość */
.site-footer__wordmark { margin: 0; padding: 0 1rem; font-family: var(--font-display); font-weight: 700; font-size: 11.2vw; line-height: 0.8; letter-spacing: -0.05em; white-space: nowrap; color: var(--color-acid-yellow); text-align: center; user-select: none; transform: translateY(0.06em); }
.site-footer__wordmark span { color: transparent; -webkit-text-stroke: 1.5px var(--color-acid-yellow); }
/* Dół */
:is(.site-footer--base, .site-footer--code) .site-footer__bottom { padding: 1.5rem 1.5rem 5.5rem; border-top: 1px solid rgba(255,255,255,0.14); gap: 1rem; }
@media (min-width: 768px) { :is(.site-footer--base, .site-footer--code) .site-footer__bottom { padding: 1.5rem 3rem; } }
:is(.site-footer--base, .site-footer--code) .site-footer__legal { gap: 0.5rem 1.5rem; font-size: 11px; letter-spacing: 0.1em; }
:is(.site-footer--base, .site-footer--code) .site-footer__legal a { display: inline-block; padding: 0.5rem 0; color: rgba(255,255,255,0.75); }
:is(.site-footer--base, .site-footer--code) .site-footer__legal a:hover, :is(.site-footer--base, .site-footer--code) .site-footer__legal a:focus-visible { color: var(--color-acid-yellow); }
:is(.site-footer--base, .site-footer--code) .site-footer__copy { opacity: 1; color: var(--color-muted-on-dark); }
.site-footer__top { font: 700 11px var(--font-mono); letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-acid-yellow); text-decoration: none; padding: 0.5rem 0; }
.site-footer__top:hover, .site-footer__top:focus-visible { color: var(--color-white); }
:is(.site-footer--base, .site-footer--code) a:focus-visible { outline: 2px solid var(--color-acid-yellow); outline-offset: 3px; }
:is(.site-footer--base, .site-footer--code) .site-footer__col-list a::after { content: none; }
/* Pas newslettera biały: nad nim bywa żółta sekcja komentarzy */
.foot-news { background: var(--color-white); border-top: 1px solid var(--color-smoky-black); }
.foot-news__title span { color: var(--color-rescue-orange-text); }
.foot-news .mailerlite-form-loader, .foot-news .mailerlite-form-response { display: none; }
.foot-news .mailerlite-subscribe-submit:hover, .foot-news .mailerlite-subscribe-submit:focus-visible { background: var(--color-acid-yellow); color: var(--color-smoky-black); }
.site-footer__wordmark { font-size: 9.6vw; transform: none; padding: 0 2vw 0.6vw; }
.site-footer__wordmark span { -webkit-text-stroke-width: max(1px, 0.12vw); }
/* Przycisk „Rozdziały” chowa się, gdy widać stopkę */
html.aa-foot-in .aa-toc-pill { opacity: 0; visibility: hidden; pointer-events: none; }
/* 2.5.0: pas „Najnowsze” pod hero na pomarańczowym tle, żeby odróżniał się od ciemnych sekcji */
.hero--cover .hero-latest { background: var(--color-rescue-orange); color: var(--color-smoky-black); }
.hero--cover .hero-latest__label,
.hero--cover .hero-latest__title,
.hero--cover .hero-latest__all,
.hero--cover .hero-latest__link::before { color: var(--color-smoky-black); }
.hero--cover .hero-latest__meta { color: rgba(9, 10, 12, 0.78); }
.hero--cover .hero-latest__list li { border-bottom-color: rgba(9, 10, 12, 0.2); }
.hero--cover .hero-latest__link:hover .hero-latest__title,
.hero--cover .hero-latest__link:focus-visible .hero-latest__title { color: var(--color-white); }
.hero--cover .hero-latest__all { border-color: var(--color-smoky-black); text-decoration-color: var(--color-smoky-black); }
.hero--cover .hero-latest__all:hover, .hero--cover .hero-latest__all:focus-visible { color: var(--color-white); }
.hero--cover .hero-latest a:focus-visible { outline-color: var(--color-smoky-black); }
/* 2.5.1: pas „Najnowsze” biały zamiast pomarańczowego (decyzja właściciela) */
.hero--cover .hero-latest { background: var(--color-white); border-top: 1px solid var(--color-smoky-black); border-bottom: 1px solid var(--color-smoky-black); }
.hero--cover .hero-latest__meta { color: #55575B; }
.hero--cover .hero-latest__link::before { color: var(--color-rescue-orange-text); }
.hero--cover .hero-latest__link:hover .hero-latest__title,
.hero--cover .hero-latest__link:focus-visible .hero-latest__title,
.hero--cover .hero-latest__all:hover, .hero--cover .hero-latest__all:focus-visible { color: var(--color-rescue-orange-text); }
/* 2.6.5: tytuł hero po najechaniu nie może zmienić koloru na żółty (żółty na żółtym bloku = znika).
Stara reguła .hero-story__title a:hover z hero 1.5.x miała wyższą specyficzność. */
.hero--cover .hero-cover__title a,
.hero--cover .hero-cover__title a:hover,
.hero--cover .hero-cover__title a:focus-visible { color: var(--color-smoky-black); }
/* =====================================================
2.7.0: stopka „Kod kreskowy”
===================================================== */
.foot-code { position: relative; overflow: hidden; padding: 2.5rem 0 0; border-top: 1px solid rgba(225, 255, 0, 0.25); }
.foot-code__bars { display: block; width: 100%; height: clamp(56px, 9vw, 128px); fill: var(--color-acid-yellow); }
.foot-code__bars rect { transform-box: fill-box; transform-origin: 50% 100%; }
.foot-code__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1.5rem; padding-top: 0.9rem; padding-bottom: 0.9rem; font: 500 10px var(--font-mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-muted-on-dark); }
.foot-code__caption { color: var(--color-off-white); }
.foot-code__scan { position: absolute; top: 2.5rem; left: -4%; width: 3px; height: clamp(56px, 9vw, 128px); background: #fff; box-shadow: 0 0 18px 6px rgba(225, 255, 0, 0.55), 0 0 60px 18px rgba(255, 69, 0, 0.25); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
.aa-js .foot-code:not(.is-in) .foot-code__bars rect { transform: scaleY(0); }
.foot-code__bars rect { transition: transform 0.55s cubic-bezier(0.2, 0.85, 0.2, 1); transition-delay: calc(var(--i) * 7ms); }
.foot-code.is-in .foot-code__scan { animation: aa-foot-scan 7s cubic-bezier(0.45, 0, 0.2, 1) 1.1s infinite; }
}
@keyframes aa-foot-scan {
0% { left: -4%; opacity: 0; }
4% { opacity: 1; }
32% { left: 102%; opacity: 1; }
34%, 100% { left: 102%; opacity: 0; }
}
/* Newsletter wtopiony w stopkę */
.foot-news2 { border-top: 1px solid rgba(255, 255, 255, 0.12); border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.foot-news2__inner { display: grid; gap: 1.25rem; align-items: center; padding-top: 2.5rem; padding-bottom: 2.5rem; }
@media (min-width: 900px) { .foot-news2__inner { grid-template-columns: 1fr 1.25fr; gap: 3rem; } }
.foot-news2__title { margin: 0 0 0.4rem; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.9rem, 4vw, 3rem); line-height: 0.9; letter-spacing: -0.03em; color: var(--color-acid-yellow); }
.foot-news2__lead { margin: 0; max-width: 34rem; color: rgba(244, 244, 245, 0.8); font-size: 0.95rem; line-height: 1.5; }
.foot-news2 .mailerlite-form form { display: flex; flex-direction: column; }
.foot-news2 .mailerlite-form-inputs { display: flex; flex-wrap: wrap; border: 1px solid rgba(225, 255, 0, 0.6); }
.foot-news2 .mailerlite-form-field { flex: 1 1 14rem; margin: 0; }
.foot-news2 .mailerlite-form-field input { width: 100%; min-height: 54px; margin: 0; padding: 0 1rem; border: 0; border-radius: 0; background: transparent; color: var(--color-off-white); font: 500 1rem var(--font-mono); }
.foot-news2 .mailerlite-form-field input::placeholder { color: var(--color-muted-on-dark); }
.foot-news2 .mailerlite-form-field input:focus-visible { outline: 2px solid var(--color-acid-yellow); outline-offset: -2px; }
.foot-news2 .mailerlite-subscribe-button-container { flex: 0 0 auto; }
.foot-news2 .mailerlite-subscribe-submit { min-height: 54px; width: 100%; margin: 0; padding: 0 1.5rem; border: 0; border-radius: 0; background: var(--color-acid-yellow); color: var(--color-smoky-black); font: 700 12px var(--font-mono); letter-spacing: 0.15em; text-transform: uppercase; cursor: pointer; transition: background 0.2s, color 0.2s; }
.foot-news2 .mailerlite-subscribe-submit:hover, .foot-news2 .mailerlite-subscribe-submit:focus-visible { background: var(--color-off-white); }
@media (max-width: 520px) { .foot-news2 .mailerlite-subscribe-button-container { flex-basis: 100%; } }
.foot-news2 .mailerlite-form-description { order: 2; margin-top: 0.75rem; font-size: 12px; line-height: 1.5; }
.foot-news2 .mailerlite-form-description a { color: rgba(244, 244, 245, 0.75); text-decoration: underline; text-underline-offset: 2px; }
.foot-news2 .mailerlite-form-loader, .foot-news2 .mailerlite-form-response { display: none; }
.foot-news2 .mailerlite-form-response h4, .foot-news2 .mailerlite-form-response span { color: var(--color-acid-yellow) !important; font: 700 13px var(--font-mono); }
/* Wielki napis: druga połowa obrysowana, wypełnia się przy przewijaniu */
.foot-word { margin: 0; padding: 0 2vw 0.6vw; font-family: var(--font-display); font-weight: 700; font-size: 9.6vw; line-height: 0.8; letter-spacing: -0.05em; white-space: nowrap; text-align: center; color: var(--color-acid-yellow); user-select: none; }
.foot-word__b { position: relative; display: inline-block; color: transparent; -webkit-text-stroke: max(1px, 0.12vw) var(--color-acid-yellow); }
.foot-word__b::after { content: attr(data-text); position: absolute; inset: 0; color: var(--color-acid-yellow); -webkit-text-stroke: 0; clip-path: inset(0 100% 0 0); }
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
.foot-word__b::after { animation: aa-word-fill linear both; animation-timeline: view(); animation-range: entry 20% cover 55%; }
}
}
@keyframes aa-word-fill { to { clip-path: inset(0 0 0 0); } }
.site-footer--code .site-footer__main { padding-top: 3.5rem; }
.site-footer--code .site-footer__grid > * { animation: none; }
/* Podkreślenie tytułu hero rysowało się kreskami między słowami (słowa to osobne bloki) */
.hero--cover .hero-cover__title a:hover, .hero--cover .hero-cover__title a:focus-visible { text-decoration: none; }
/* 2.7.1: kod kreskowy w stopce subtelny, w skali znacznika z hero */
.foot-code { padding: 0; }
.foot-code__row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.75rem; padding-top: 1.4rem; padding-bottom: 1.4rem; font: 500 10px var(--font-mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-muted-on-dark); }
.foot-code__end { margin-left: auto; }
.foot-code__mark { position: relative; display: inline-block; width: 96px; height: 22px; overflow: hidden; }
.foot-code__mark .foot-code__bars { width: 100%; height: 100%; fill: var(--color-acid-yellow); opacity: 0.85; }
.foot-code__mark .foot-code__scan { top: 0; left: -10%; width: 2px; height: 100%; box-shadow: 0 0 8px 2px rgba(225, 255, 0, 0.6); }
@media (prefers-reduced-motion: no-preference) {
.foot-code__mark .foot-code__bars rect { transition-duration: 0.4s; transition-delay: calc(var(--i) * 18ms); }
.foot-code.is-in .foot-code__scan { animation: aa-foot-scan2 9s ease-in-out 1.2s infinite; }
}
@keyframes aa-foot-scan2 {
0% { left: -10%; opacity: 0; }
3% { opacity: 1; }
14% { left: 105%; opacity: 1; }
15%, 100% { left: 105%; opacity: 0; }
}
@media (max-width: 600px) { .foot-code__end { margin-left: 0; } }
/* =====================================================
2.8.0: recenzja książki (style przeniesione z treści 45 recenzji do motywu)
===================================================== */
/* === ACID ALPINISM - POJEDYNCZA KSIĄŻKA === */
.aa-book-single { font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif; color: #F4F4F5; background: #090A0C; }
.aa-book-single * { box-sizing: border-box; }
.aa-bs-top { background: #090A0C; padding: 40px 24px 24px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.aa-bs-top-inner { max-width: 1280px; margin: 0 auto; }
.aa-bs-crumb { font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.2em; display: flex; gap: 12px; align-items: center; }
.aa-bs-crumb a { color: #E1FF00; text-decoration: none; border-bottom: 1px solid transparent; }
.aa-bs-crumb a:hover { border-bottom-color: #E1FF00; }
.aa-bs-crumb span { color: rgba(255,255,255,0.4); }
.aa-bs-main { background: #090A0C; color: #fff; padding: 40px 24px 96px; position: relative; overflow: hidden; }
@media (min-width: 768px) { .aa-bs-main { padding: 48px 48px 112px; } }
.aa-bs-grid { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 48px; align-items: start; position: relative; z-index: 1; }
@media (min-width: 1024px) { .aa-bs-grid { grid-template-columns: 5fr 7fr; gap: 80px; } }
.aa-bs-sidebar {}
@media (min-width: 1024px) { .aa-bs-sidebar { position: sticky; top: 80px; } }
.aa-bs-cover-wrap { position: relative; margin-bottom: 32px; }
.aa-bs-cover { aspect-ratio: 2 / 3; overflow: hidden; border: 1px solid rgba(255,255,255,0.2); background: #1a1a1f; filter: grayscale(100%) contrast(1.1); transition: filter 0.6s; display: flex; align-items: center; justify-content: center; }
.aa-bs-cover:hover { filter: grayscale(0) contrast(1); }
.aa-bs-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aa-bs-cover-empty { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.2em; color: rgba(225,255,0,0.5); text-transform: uppercase; }
.aa-bs-cover-id { position: absolute; top: 12px; left: 12px; font-family: "JetBrains Mono", monospace; font-size: 9px; letter-spacing: 0.2em; color: #E1FF00; text-transform: uppercase; background: rgba(9,10,12,0.8); padding: 4px 8px; border: 1px solid rgba(225,255,0,0.3); }
.aa-bs-specs { border: 1px dashed rgba(255,255,255,0.15); padding: 24px; background: rgba(255,255,255,0.02); }
.aa-bs-specs-title { font-family: "JetBrains Mono", monospace; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; color: #E1FF00; padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.aa-bs-spec { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.05); font-family: "JetBrains Mono", monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; }
.aa-bs-spec:last-child { border-bottom: 0; }
.aa-bs-spec-key { color: rgba(225,255,0,0.6); flex-shrink: 0; }
.aa-bs-spec-val { color: #fff; font-weight: 700; text-align: right; }
.aa-bs-tag { display: inline-block; padding: 4px 12px; background: #E1FF00; color: #090A0C; font-family: "JetBrains Mono", monospace; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; margin-bottom: 24px; }
.aa-bs-title { font-family: "Space Grotesk", "Inter", sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: -0.03em; line-height: 0.92; font-size: clamp(40px, 6vw, 72px); color: #fff; margin: 0 0 16px; }
.aa-bs-subtitle { font-family: "JetBrains Mono", monospace; font-size: 14px; color: rgba(255,255,255,0.6); font-style: italic; letter-spacing: 0.04em; line-height: 1.5; margin: 0 0 24px; }
.aa-bs-author { display: flex; gap: 12px; align-items: baseline; margin-bottom: 32px; font-family: "JetBrains Mono", monospace; font-size: 12px; text-transform: uppercase; letter-spacing: 0.2em; }
.aa-bs-author-prefix { color: #E1FF00; }
.aa-bs-author-name { color: #fff; font-weight: 700; }
.aa-bs-divider { margin: 32px 0 28px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.1); font-family: "JetBrains Mono", monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.2em; color: #E1FF00; }
.aa-bs-body { color: rgba(244,244,245,0.85); font-size: 18px; line-height: 1.75; }
.aa-bs-body p { margin: 0 0 22px; }
.aa-bs-body p.aa-bs-lead:first-of-type::first-letter { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 72px; line-height: 0.85; float: left; padding: 8px 12px 0 0; color: #FF4500; text-transform: uppercase; }
.aa-bs-body h2 { font-family: "Space Grotesk", sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: -0.02em; font-size: 30px; color: #E1FF00; margin: 40px 0 16px; line-height: 1.1; }
.aa-bs-body h3 { font-family: "Space Grotesk", sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: -0.02em; font-size: 22px; color: #fff; margin: 32px 0 14px; line-height: 1.15; }
.aa-bs-body a { color: #E1FF00; text-decoration: underline; text-underline-offset: 3px; }
.aa-bs-body strong { color: #fff; font-weight: 700; }
.aa-bs-body em { font-style: italic; }
.aa-bs-body ul { margin: 16px 0 24px; padding-left: 0; list-style: none; }
.aa-bs-body ul li { padding-left: 32px; position: relative; margin-bottom: 14px; }
.aa-bs-body ul li::before { content: "//"; position: absolute; left: 0; top: 0; color: #FF4500; font-family: "JetBrains Mono", monospace; font-weight: 700; }
.aa-bs-body blockquote { border-left: 4px solid #E1FF00; padding: 16px 0 16px 24px; margin: 28px 0; font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 26px; line-height: 1.2; text-transform: uppercase; letter-spacing: -0.01em; color: #fff; }
/* Box "dla kogo" */
.aa-bs-forwho {
border: 1px solid #E1FF00;
padding: 28px 32px;
margin: 32px 0;
background: rgba(225,255,0,0.04);
}
.aa-bs-forwho-title {
font-family: "Space Grotesk", sans-serif;
font-weight: 700; text-transform: uppercase; letter-spacing: -0.01em;
font-size: 20px; color: #E1FF00; margin: 0 0 20px;
}
.aa-bs-forwho ul { margin: 0; }
.aa-bs-body .wp-block-quote, .aa-bs-body blockquote p { margin: 0; }
/* 2.8.2: kontrast okruszków, mniejsza okładka na telefonie (tytuł wyżej) */
.aa-bs-crumb span { color: var(--color-muted-on-dark); }
@media (max-width: 1023px) {
.aa-bs-cover-wrap { max-width: 240px; }
.aa-bs-specs { max-width: 480px; }
}