/* ============================================================
TRAWERS — motyw kolorystyczny (leśna zieleń / górski pomarańcz).
Ten plik NIE używa zmiennych CSS (patrz main.css - cross-file
var() nie działa niezawodnie w tym projekcie, ustalone empirycznie
przy Wędrowniku) - literalne wartości, wygenerowane programowo
z main.css.
Paleta Trawers:
primary #2D4A3E (leśna zieleń) | primary-hover/dark #1E2522
primary-active/darker #121614 | secondary #D46A37 (górski pomarańcz)
text #2C3531 | accent #8C7864 (tertiary, wysuszony szlak)
quaternary #4A6984 (lodowcowy błękit - nieużywany bezpośrednio w main.css,
dostępny do przyszłych, punktowych akcentów jeśli zajdzie potrzeba)
lighter #F9F9F6 | light #EAECE6 | warning #E5A93C
PEŁNA PALETA dostarczona przez użytkownika (potwierdzona ponownie
2026-08-03) - zapisana w CAŁOŚCI, także kolory jeszcze NIE użyte
nigdzie w tym pliku (success/danger), żeby nie zgubić ich drugi raz:
$primary: #2D4A3E (głęboka, leśna zieleń - główny kolor marki, nagłówki, menu)
$secondary: #D46A37 (górski pomarańcz - kolor akcji, CTA)
$tertiary: #8C7864 (kolor wysuszonego szlaku/ziemi - elementy strukturalne)
$quaternary: #4A6984 (lodowcowy błękit - dodatkowy akcent dla odznak/linków)
$default: #2C3531 (ciemny, iglasty grafit - domyślny kolor tekstu)
$success: #527948 (żywa zieleń mchu)
$info: #3B7197 (czyste niebo - informacje, komunikaty techniczne)
$warning: #E5A93C (kolor schroniskowego światła - ostrzeżenia)
$danger: #C0392B (czerwień alarmowa GOPR - błędy, niebezpieczeństwo)
$lighter: #F9F9F6 (mglisty off-white - główne tło strony)
$light: #EAECE6 (jasny granit/kamień - tła kart, sekcji, paneli)
$dark: #1E2522 (nocny las - tło stopki, ciemne sekcje nawigacji)
$darker: #121614 (głęboki cień skalny - najciemniejszy tekst/nagłówki)
($info użyty w sekcji 10, tło baneru cookieconsent - jedyny dotąd
użyty z "nieużywanej" czwórki success/info/warning/danger).
Podpięcie: config/sites/trawers/setup.typoscript, page.includeCSS,
ładowane po main.css.
============================================================ */
/* Mostek do reszty ekosystemu Bootstrap (klasy narzędziowe typu
.text-primary/.bg-primary/.border-primary, alerty, odznaki itd.,
których main.css nie nadpisuje selektor-po-selektorze) — literalne
wartości, bez zależności od --site-*. */
:root {
--bs-primary: #2D4A3E;
--bs-primary-rgb: 45, 74, 62;
--bs-link-color: #2D4A3E;
--bs-link-color-rgb: 45, 74, 62;
--bs-link-hover-color: #2D4A3E;
--bs-link-hover-color-rgb: 45, 74, 62;
--bs-body-color: #2C3531;
--mainnavigation-hightlight: #D46A37;
}
/* ============================================================
0. KOLORY MARKI — komponenty, które bootstrap-package "wypieka"
na sztywno przy kompilacji SCSS (nie czytają zmiennej --bs-primary
w locie), więc trzeba je nadpisać wprost, per komponent.
============================================================ */
/* przyciski — gradient secondary→primary, na hover pogłębiony do primary→dark */
.btn-primary,
.frame-type-felogin_login input[type=submit] {
--bs-btn-color: #ffffff;
--bs-btn-bg: #2D4A3E;
--bs-btn-border-color: #2D4A3E;
--bs-btn-hover-color: #ffffff;
--bs-btn-hover-bg: #1E2522;
--bs-btn-hover-border-color: #1E2522;
--bs-btn-active-bg: #121614;
--bs-btn-active-border-color: #121614;
--bs-btn-focus-shadow-rgb: 45, 74, 62;
background-image: linear-gradient(135deg, #D46A37, #2D4A3E);
border: none;
box-shadow: 0 2px 8px rgba(3, 37, 42, .25);
transition: box-shadow .2s ease, transform .2s ease, background-image .2s ease;
}
.btn-primary:hover,
.frame-type-felogin_login input[type=submit]:hover {
background-image: linear-gradient(135deg, #2D4A3E, #1E2522);
box-shadow: 0 4px 14px rgba(3, 37, 42, .35);
transform: translateY(-1px);
}
.btn-outline-primary {
--bs-btn-color: #D46A37;
--bs-btn-border-color: #D46A37;
--bs-btn-hover-color: #ffffff;
--bs-btn-hover-bg: #D46A37;
--bs-btn-hover-border-color: #D46A37;
}
/* tła ramek (pole "Ramka" → kolor tła elementu treści) — gradient dla głębi.
Wariant "ciemny środek" (ujednolicony 2026-08-09 na wszystkich serwisach) -
TE SAME dwa kolory co poprzednio (secondary/primary), tylko układ: primary
(ciemniejszy) na środku, secondary (jaśniejszy) rozchodzący się na boki,
poziomo (90deg). */
.frame-background-primary {
--frame-color: #ffffff;
--frame-background: #2D4A3E;
--frame-link-color: #ffffff;
--frame-link-hover-color: #ffffff;
background-image: linear-gradient(90deg, #D46A37 0%, #2D4A3E 50%, #D46A37 100%);
}
.frame-background-dark {
--frame-color: #ffffff;
--frame-background: #1E2522;
--frame-link-color: #2D4A3E;
--frame-link-hover-color: #1E2522;
}
.frame-background-light {
--frame-color: #1E2522;
--frame-background: #f8f9fa;
--frame-link-color: #2D4A3E;
--frame-link-hover-color: #1E2522;
}
/* stopka górna (linki, cała treść) — linki w kolorze akcentu, NIE primary:
primary jest tak ciemny, że na ciemnym tle stopki byłby praktycznie
niewidoczny (ciemne na ciemnym). */
.footer-section-content {
/* ten sam kąt co gradient nagłówków (135°), ale z jaśniejszym środkiem
(secondary) i ciemnymi krawędziami (dark) zamiast płaskiego dwustopniowego */
background: linear-gradient(135deg, #1E2522 0%, #2D4A3E 50%, #1E2522 100%) !important;
--frame-color: #ffffff;
--frame-background: #1E2522;
--frame-link-color: #8C7864;
--frame-link-hover-color: #ffffff;
}
/* przycisk "do góry" — stały kolor to dotychczasowy hover (primary),
hover to akcent (--site-accent, $tertiary). Kolor ikony na hover
przełączony na ciemny (primary) — biała ikona na jasnym piaskowym
tle byłaby słabo czytelna. */
.scroll-top {
--scrolltop-bg: #2D4A3E;
--scrolltop-hover-bg: #8C7864;
--scrolltop-hover-color: #2D4A3E;
transition: background-color .3s ease-in-out, color .3s ease-in-out, transform .25s ease, box-shadow .25s ease;
}
/* Uniesienie + poświata w kolorze akcentu na hover, ten sam charakter
co unoszenie kart tekst-ikona/galerii — tylko przeniesiony na
okrągły przycisk, w umiarkowanym zakresie (1.08), żeby przycisk
przypięty do rogu ekranu nie wyglądał na "nerwowy". */
.scroll-top:hover,
.scroll-top:focus {
transform: scale(1.08);
box-shadow: 0 6px 18px rgba(140, 120, 100, .55);
}
.scroll-top .scroll-top-icon {
transition: transform .25s ease;
}
.scroll-top:hover .scroll-top-icon,
.scroll-top:focus .scroll-top-icon {
/* rotate(45deg) to baza kształtu strzałki (theme) — trzeba go
zachować w tym samym transform, inaczej podbicie nadpisałoby
obrót i ikona straciłaby kształt */
transform: rotate(45deg) translateY(-3px);
}
/* Ikony w modułach "Tekst i ikona" — dotychczas kolor tła kółka był zapisany
na sztywno (inline style) per element treści, z poprzedniej, zielonej
palety. Nadpisujemy !important, żeby wszystkie ikony spójnie używały
nowego zestawu barw niezależnie od tego, co ma w sobie rekord. */
.texticon-inner-icon {
background-image: linear-gradient(135deg, #D46A37, #2D4A3E) !important;
background-color: #2D4A3E !important;
color: #ffffff !important;
}
/* ============================================================
0b. PASEK NAWIGACJI — nowe tło, tekst, dolna linia, podkreślenie hover
============================================================
Dotyczy TYLKO stanów z pełnym tłem (.navbar-default na podstronach,
.navbar-transition na stronie głównej po scrollu) — stan przezroczysty
na starcie strony głównej (na tle karuzeli, biały tekst) zostaje bez zmian,
bo ma osobne, bardziej specyficzne reguły w bootstrap-package. */
.navbar-mainnavigation {
/* tło paska w stanie "solid" — .navbar-default/.navbar-transition czytają
kolor przez rgba(var(--bs-white-rgb), var(--bs-bg-opacity)), więc
wystarczy podmienić samą zmienną RGB zamiast walczyć z !important */
--bs-white-rgb: 249, 249, 246; /* #F9F9F6 - site-lighter Trawers */
/* tekst i ikony linków menu w stanie "solid" — transparentny stan
ma WŁASne, bardziej specyficzne nadpisanie na biało, więc to tutaj
go nie dotyczy */
--bs-navbar-color: #2D4A3E;
--bs-navbar-hover-color: #2D4A3E;
--bs-navbar-active-color: #2D4A3E;
}
.navbar-default,
.navbar-mainnavigation.navbar-transition {
border-bottom: 1.5px solid #CFD4C6;
}
/* Podkreślenie najechanej pozycji menu — grubsze, w kolorze warning,
animacja "wysuwania" (scaleX) zamiast domyślnego zanikania opacity,
ten sam charakter co animowane podkreślenie linków w treści. */
.navbar-mainnavigation .nav-link.nav-link-main:before {
height: 3px;
background: #E5A93C;
opacity: 1;
transform: scaleX(0);
transform-origin: center;
transition: transform .25s ease;
}
.navbar-mainnavigation .nav-link.nav-link-main:hover:before,
.navbar-mainnavigation .nav-link.nav-link-main:focus-visible:before {
opacity: 1;
transform: scaleX(1);
}
/* ============================================================
1. NAWIGACJA — drobne uzupełnienia, których SCSS nie obejmuje
============================================================ */
/* Logo skaluje się razem z paskiem przy scrollowaniu (BP używa --mainnavigation-nav-height) */
.navbar-mainnavigation .navbar-brand-image img {
max-height: calc(var(--mainnavigation-nav-height) * 0.45); /* +12.5% względem poprzednich 0.40 */
transition: max-height 0.27s cubic-bezier(0, 0, 0.58, 1);
}
/* Ikony logowania / wyszukiwania dodane w MainAfter.html — kolor jak standardowy
Bootstrap "navbar-light" (taki sam odcień jak reszta ikon/togglera w jasnym pasku).
Na stronie głównej (navbar-default-transition) białe dopóki nie przewinięto -
te same selektory co bootstrap-package używa dla .nav-link (patrz theme.css:
".navbar-default-transition:not(.navbar-transition) .navbar-nav>li>.nav-link"),
więc zachowanie jest identyczne i tak samo niezawodne (czysty CSS, bez JS-timingu). */
a.nav-login-icon,
a.nav-search-icon {
color: #2D4A3E;
display: flex;
align-items: center;
text-decoration: none;
transition: color 0.15s ease;
}
a.nav-login-icon {
margin-left: 1.5rem;
}
a.nav-search-icon {
margin-left: 1rem;
}
a.nav-login-icon:hover,
a.nav-search-icon:hover {
color: rgba(0, 0, 0, .9);
}
a.nav-login-icon svg,
a.nav-search-icon svg {
width: 20px;
height: 20px;
}
.navbar-default-transition:not(.navbar-transition) a.nav-login-icon,
.navbar-default-transition:not(.navbar-transition) a.nav-search-icon,
.navbar-inverse-transition:not(.navbar-transition) a.nav-login-icon,
.navbar-inverse-transition:not(.navbar-transition) a.nav-search-icon {
color: rgba(255, 255, 255, .9);
}
.navbar-default-transition:not(.navbar-transition) a.nav-login-icon:hover,
.navbar-default-transition:not(.navbar-transition) a.nav-search-icon:hover,
.navbar-inverse-transition:not(.navbar-transition) a.nav-login-icon:hover,
.navbar-inverse-transition:not(.navbar-transition) a.nav-search-icon:hover {
color: #fff;
}
.navbar-default-transition:not(.navbar-transition) .navbar-nav > li > .nav-link,
.navbar-inverse-transition:not(.navbar-transition) .navbar-nav > li > .nav-link {
text-shadow: 0 1px 3px rgba(0, 0, 0, .85), 0 1px 10px rgba(0, 0, 0, .5);
}
.navbar-default-transition:not(.navbar-transition) .navbar-brand-image img,
.navbar-inverse-transition:not(.navbar-transition) .navbar-brand-image img,
.navbar-default-transition:not(.navbar-transition) a.nav-login-icon,
.navbar-default-transition:not(.navbar-transition) a.nav-search-icon,
.navbar-inverse-transition:not(.navbar-transition) a.nav-login-icon,
.navbar-inverse-transition:not(.navbar-transition) a.nav-search-icon,
.navbar-default-transition:not(.navbar-transition) .navbar-toggler,
.navbar-inverse-transition:not(.navbar-transition) .navbar-toggler {
filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .85));
}
/* Reguła wymuszająca hamburger 992-1199px USUNIĘTA 2026-08-12 - był to ślepy
duplikat main.css bez żadnej personalizacji per-site (patrz zasada w
feedback_css_theming), main.css teraz obsługuje ten zakres inaczej (poziomy
pasek bez ikon, tak jak 1200-1399px), duplikat tutaj by to blokował. */
/* ============================================================
1c. NAGŁÓWKI KARUZELI (Border/Header Media) — białe i pogrubione
============================================================
Produkcja ustawia kolor nagłówka karuzeli inline (style="color:#FFFFFF"
na otaczającym divie .valign) per slajd. Nowsza wersja bootstrap-package
w tym projekcie nie generuje już tego wrappera/inline stylu wcale
(uproszczona struktura karuzeli), więc domyślnie tekst wychodził ciemny
i nieczytelny na zdjęciu w tle. Odtworzone jako stały, globalny styl. */
.carousel-header,
.carousel-subheader {
color: #fff;
font-weight: 700;
text-shadow: 0 2px 6px rgba(0, 0, 0, .75);
}
/* Gradient od dołu slajdu USUNIĘTY na życzenie użytkownika (2026-08-01) -
patrz main.css sekcja 1c po wyjaśnienie. */
.carousel-content {
position: relative;
}
.carousel-content-inner {
position: relative;
z-index: 1;
}
/* ============================================================
1d. ELEMENT TREŚCI "TYLKO NAGŁÓWEK" (CType=header) — białe, pogrubione
============================================================
Ten typ elementu w bootstrap-package zawsze renderuje się z kolorowym
tłem (frame-background-primary, zielone), więc potrzebuje białego,
pogrubionego tekstu żeby był czytelny - w przeciwieństwie do zwykłych
nagłówków innych elementów (texticon itp.), które mają jasne tło i
muszą zostać przy domyślnym ciemnym kolorze. */
.frame-type-header .element-header {
color: #fff;
font-weight: 700;
}
.frame-type-header .element-subheader {
color: #fff;
font-weight: 400;
}
/* ============================================================
1e. MENU BOCZNE (subnav) — stylistyka "karty", jak zakładki (tabs):
biały panel z ramką/cieniem, aktywna/najechana pozycja podświetlona
tłem + kolorowy pasek z boku zamiast domyślnego trójkąta.
============================================================ */
/* Ramka menu bocznego - "light" tej witryny (#EAECE6) jest zbyt blisko
bieli tła panelu, ledwo widoczna (zgłoszenie użytkownika, 2026-08-09) -
zamieniona na neutralny szary, ten sam co ramka kart galerii
main.css (rgba(3,37,42,.12)), niezależny od palety. */
.subnav-nav {
background: #ffffff;
border: 1px solid rgba(3, 37, 42, .12);
border-radius: var(--bs-border-radius);
overflow: hidden;
box-shadow: 0 8px 22px rgba(3, 37, 42, .08);
}
.subnav-item + .subnav-item {
border-top: 1px solid rgba(3, 37, 42, .12);
}
.subnav-link {
border: none !important;
padding: .65rem 1rem;
color: #2D4A3E;
transition: background-color .2s ease, color .2s ease, padding-left .2s ease, box-shadow .2s ease;
}
.subnav-link:before {
display: none !important;
}
.subnav-link:hover,
.subnav-link:focus {
background-color: #F9F9F6 !important;
color: #2D4A3E;
padding-left: 1.25rem;
/* linia boczna na hover w primary — dla pozycji aktywnej i tak
wygrywa box-shadow z reguły .active (deklarowana niżej, ta sama
specyficzność, kolejność w pliku rozstrzyga), więc kolor warning
aktywnej pozycji zostaje nienaruszony nawet pod kursorem */
box-shadow: inset 3px 0 0 0 #2D4A3E;
}
.active > .subnav-link {
color: #2D4A3E !important;
background-color: #F9F9F6 !important;
font-weight: 600;
box-shadow: inset 3px 0 0 0 #E5A93C;
}
/* ============================================================
1f. STOPKA DOLNA (footer-section-meta) — odcień jak produkcja
============================================================
Analogicznie: domyślny motyw daje tu #212121, produkcja ma #232323. */
.footer-section-meta {
background: #121614 !important;
--frame-background: #121614;
--frame-link-color: #8C7864;
--frame-link-hover-color: #ffffff;
}
/* ============================================================
1g. STOPKA GÓRNA, KOLUMNA ŚRODKOWA — logo PTTK wyśrodkowane
============================================================
Element treści (textpic/gallery) domyślnie wyrównuje obrazek do lewej
krawędzi kolumny (flex, justify-content: flex-start). */
.footer-section-content-column-middle .gallery-row {
justify-content: center;
}
/* To samo miejsce renderuje też logo PTTK jako element "galerii" (textpic) —
ale logo jest okrągłe, więc ogólny styl "karty" (biała ramka, cień,
padding) dodany niżej dla właściwych galerii zdjęć wygląda tu źle
(białe kwadratowe tło pod okrągłym logo). Neutralizujemy go punktowo. */
.footer-section-content-column-middle .gallery-item figure {
border: none;
box-shadow: none;
padding: 0;
background: transparent;
border-radius: 0;
}
.footer-section-content-column-middle .gallery-item:hover figure {
box-shadow: none;
border-color: transparent;
}
.footer-section-content-column-middle .gallery-item figure img {
background-color: transparent;
/* rozmiar źródłowego pliku to 150x150 - bootstrap-package dolicza
własny, większy rozmiar z układu kolumn galerii, więc wymuszamy
wprost, żeby logo nie było większe niż na pozostałych serwisach */
max-width: 150px;
width: 100%;
}
/* Link z logiem PTTK w tej kolumnie NIE ma żadnego tekstu (samo `![]()
`
w ``) - animowane podkreślenie linków w treści (sekcja niżej,
"Linki w treści") liczy pozycję kreski względem wysokości LINII TEKSTU
(line-height), nie względem faktycznej wysokości obrazka, więc kreska
wychodziła w poprzek środka loga zamiast pod nim. Zamiast poprawiać
pozycjonowanie tylko dla tego jednego linku - po prostu wyłączona,
bo pod samym logiem i tak nie ma tekstu do podkreślenia. */
.footer-section-content-column-middle .frame :not(.btn) > a:not([class]),
.footer-section-content-column-middle .frame p a:not([class]) {
background-image: none;
}
/* Na telefonach (poniżej 768px kolumny stopki górnej stackują się jedna
pod drugą) — wyśrodkuj całą zawartość, łącznie z kolumną "Dane rejestrowe"
(ma na sztywno .text-end) i "Strony oddziałowe" (domyślnie do lewej). */
@media (max-width: 767.98px) {
.footer-section-content-column {
text-align: center;
}
.footer-section-content-column .text-end,
.footer-section-content-column .text-start,
.footer-section-content-column .text-right,
.footer-section-content-column .text-left {
text-align: center !important;
}
}
/* ============================================================
2. KONTENER TREŚCI
============================================================ */
#page-content {
max-width: 1320px;
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
width: 100%;
}
/* ============================================================
TEXT AND ICON — ramka z zaokrąglonymi narożnikami i cieniem wersja CLAUDE
============================================================ */
/* TEXT AND ICON — ramka z zaokrąglonymi narożnikami i cieniem wersja GEMINI
wyrównuje wysokości ramek */
/* 1. RAMKA + TŁO — gradient light->lighter->biel (zamiast zdjęcia,
które okazało się zbyt rozpraszające), ramka w kolorze secondary */
.frame-type-texticon .texticon {
border: 1.5px solid #D46A37 !important;
border-radius: 8px;
padding: 1.5rem;
/* radialny, niecentryczny — "źródło światła" w lewym górnym rogu,
gasnące przez lighter do light w kierunku przeciwległego rogu.
Tło większe niż karta (background-size) + przesuwana pozycja,
żeby "światło" mogło płynnie wędrować na hover (patrz niżej) */
background: radial-gradient(circle at 20% 15%, #ffffff 0%, #F9F9F6 45%, #EAECE6 100%);
background-size: 160% 160%;
background-position: 0% 0%;
transition: box-shadow .25s ease, border-color .25s ease, border-width .25s ease, transform .25s ease, background-position .5s ease;
}
/* 2. ŁAŃCUCH WYSOKOŚCI (EQUAL HEIGHT) */
/* Rząd musi być flexem */
.section-row {
display: flex !important;
flex-wrap: wrap;
align-items: stretch !important;
}
/* Kolumna musi być flexem */
.section-column-third {
display: flex !important;
flex-direction: column !important;
}
/* WYMUSZENIE WZROSTU NA WSZYSTKICH WARSTWACH WEWNĄTRZ */
/* Dodajemy tutaj klasy, które widzę w Twoim inspektorze: .frame-container-default oraz .frame-inner */
.section-column-third .frame,
.frame-group-container,
.frame-group-inner,
.frame-container-default,
.frame-inner,
.texticon {
display: flex !important;
flex-direction: column !important;
flex-grow: 1 !important;
height: auto !important;
}
/* Opcjonalnie: upewnij się, że tekst w środku nie jest ściśnięty */
.texticon-content {
flex-grow: 1;
}
/* Hover dla ramki — lekkie uniesienie + głębszy cień. Kolor ramki
zostaje w tej samej rodzinie (secondary), tylko "przyciemniony" do
primary (ten sam zabieg co animowane podkreślenie linków — nie
zmiana koloru, tylko pogłębienie tego samego tonu) + delikatnie
grubsza. */
.frame-type-texticon .texticon:hover {
box-shadow: 0 10px 24px rgba(3, 37, 42, 0.18);
border-width: 2.5px !important;
border-color: #2D4A3E !important;
transform: translateY(-3px);
/* "światło" wędruje w stronę przeciwległego rogu */
background-position: 100% 100%;
}
/* ============================================================
ODŚWIEŻENIE WYGLĄDU 2026-07-27 — mikroanimacje i detale
============================================================ */
/* Galeria zdjęć — jednakowa wysokość kafli z zachowaniem proporcji zdjęć
(bez przycinania), delikatna ramka, cień pogłębiający się po najechaniu,
plus zoom samego zdjęcia. Ten sam wzorzec co custom-online.css. */
.gallery-row {
align-items: stretch;
}
.gallery-item {
display: flex;
flex-direction: column;
}
.gallery-item figure {
flex: 1;
display: flex;
flex-direction: column;
margin-bottom: 0;
overflow: hidden;
border-radius: var(--bs-border-radius);
border: 1px solid rgba(3, 37, 42, .12);
padding: 6px;
/* cień bez przesunięcia (0 0) — rozkłada się równo dookoła zamiast "uciekać" w dół */
box-shadow: 0 0 8px rgba(3, 37, 42, .08);
transition: box-shadow .25s ease, border-color .25s ease;
}
.gallery-item:hover figure {
box-shadow: 0 0 22px rgba(3, 37, 42, .4);
border-color: rgba(3, 37, 42, .3);
}
.gallery-item figure picture,
.gallery-item figure a {
flex: 1;
display: flex;
min-height: 140px;
}
.gallery-item figure img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center center;
background-color: #ffffff;
display: block;
transition: transform .35s ease;
}
.gallery-item:hover figure img {
transform: scale(1.06);
}
/* Podpis pod zdjęciem — wyśrodkowany, z odstępem odsuwającym go od
zdjęcia (transform:scale na hover wizualnie "wjeżdża" na sąsiada
w tym samym elemencie figure, bo overflow:hidden tnie tylko na
zewnętrznej krawędzi, nie między rodzeństwem) */
.gallery-item .caption {
text-align: center;
margin-top: .6rem;
}
/* Linki w treści — animowane podkreślenie zamiast statycznego,
ten sam język co pasek nawigacji (nav-link-main:before) */
.frame :not(.btn) > a:not([class]),
.frame p a:not([class]) {
text-decoration: none;
background-image: linear-gradient(#E5A93C, #E5A93C);
background-position: 0 100%;
background-repeat: no-repeat;
background-size: 0% 2px;
transition: background-size .25s ease, color .15s ease;
}
.frame :not(.btn) > a:not([class]):hover,
.frame p a:not([class]):hover {
background-size: 100% 2px;
}
/* Pasek nawigacji — efekt "szkła" i cień, gdy ma pełne tło (podstrony
z .navbar-default ORAZ strona główna po przewinięciu, .navbar-transition).
Stan przezroczysty (hero na stronie głównej przed scrollem) zostaje bez
zmian, żeby nie rozmywać zdjęcia w tle karuzeli. */
.navbar-default,
.navbar-mainnavigation.navbar-transition {
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: 0 4px 20px rgba(3, 37, 42, .22);
}
.navbar-default,
.navbar-default-transition.navbar-transition {
--bs-bg-opacity: .92;
}
/* Cytat / wyróżniony fragment tekstu — akcent w kolorze marki zamiast
domyślnej szarej kreski Bootstrapa */
.frame blockquote,
blockquote.blockquote {
border-left: 3px solid #8C7864;
padding-left: 1rem;
font-style: italic;
}
/* Nagłówek karuzeli — delikatne wejście przy załadowaniu strony */
@keyframes szb-fade-up {
from {
opacity: 0;
transform: translateY(16px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.carousel-item.active .carousel-header {
animation: szb-fade-up .6s ease-out both;
}
.carousel-item.active .carousel-subheader {
animation: szb-fade-up .6s ease-out .12s both;
}
@media (prefers-reduced-motion: reduce) {
.carousel-item.active .carousel-header,
.carousel-item.active .carousel-subheader {
animation: none;
}
}
/* ============================================================
ZAKŁADKI (element "Tabs") — wygląd "połączonej karty": aktywna
zakładka zlewa się wizualnie z panelem treści pod nią, akcentowany
górny pasek w kolorze warning, reszta w języku kart z innych sekcji
(biel, delikatna ramka, zaokrąglenie, cień).
============================================================ */
/* Kontener zakładek (.contentcontainer, b13/container) to CSS grid
z globalnym odstępem --contentcontainer-gap:40px (używanym też do
rozstawiania kolumn w innych typach kontenerów, np. 2/3/4-kolumnowych)
— to on wpychał 40px przerwy między pasek zakładek a panel treści,
mimo że oba mają być wizualnie połączone. Zerowany TYLKO tutaj. */
.contentcontainer[data-container-identifier="szlakbrdy_tabs"] {
--contentcontainer-gap: 0;
}
.nav-tabs {
border-bottom: 1px solid #EAECE6;
gap: .25rem;
}
.nav-tabs .nav-link {
position: relative;
border: 1px solid transparent;
border-top-left-radius: var(--bs-border-radius);
border-top-right-radius: var(--bs-border-radius);
color: #2D4A3E;
font-weight: 600;
padding: .6rem 1.25rem;
transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
border-color: transparent;
background-color: #F9F9F6;
isolation: isolate;
}
.nav-tabs .nav-link.active {
color: #2D4A3E;
background-color: #ffffff;
border-color: #EAECE6 #EAECE6 #ffffff;
box-shadow: 0 -4px 14px rgba(3, 37, 42, .1);
}
.nav-tabs .nav-link.active:before {
content: "";
position: absolute;
top: -1px;
left: -1px;
right: -1px;
height: 3px;
border-top-left-radius: var(--bs-border-radius);
border-top-right-radius: var(--bs-border-radius);
background: linear-gradient(90deg, #E5A93C, #8C7864);
}
.tab-content {
background-color: #ffffff;
border: 1px solid #EAECE6;
border-top: none;
border-bottom-left-radius: var(--bs-border-radius);
border-bottom-right-radius: var(--bs-border-radius);
border-top-right-radius: var(--bs-border-radius);
padding: 1.5rem;
box-shadow: 0 8px 22px rgba(3, 37, 42, .08);
}
/* ============================================================
3. SUBMENU GÓRNEGO MENU (dropdown) — ten sam język "karty"
co menu boczne (subnav, patrz 1e.): biały panel, ramka w
--site-light, cień, kolorowy pasek z boku przy najechanej/
aktywnej pozycji zamiast domyślnego szarego tła Bootstrapa.
Na desktopie (pełne poziome menu, od 1200px — patrz breakpoint
hamburgera w 1.) rozwija się dodatkowo po najechaniu myszką,
niezależnie od dotychczasowego mechanizmu kliknięcia (Bootstrap
JS/Popper) używanego na dotyku/mobile — oba działają równolegle.
============================================================ */
.navbar-mainnavigation .dropdown-menu {
--bs-dropdown-bg: #ffffff;
--bs-dropdown-border-color: #EAECE6;
--bs-dropdown-border-radius: var(--bs-border-radius);
--bs-dropdown-box-shadow: 0 8px 22px rgba(3, 37, 42, .16);
padding: .4rem 0;
overflow: hidden;
}
.navbar-mainnavigation .dropdown-menu-simple .dropdown-nav > .nav-item + .nav-item,
.navbar-mainnavigation .dropdown-menu-mega .dropdown-nav .dropdown-nav > .nav-item + .nav-item {
border-top: 1px solid #EAECE6;
}
.navbar-mainnavigation .nav-link-dropdown {
padding: .65rem 1rem;
color: #2D4A3E;
transition: background-color .2s ease, color .2s ease, padding-left .2s ease, box-shadow .2s ease;
}
.navbar-mainnavigation .nav-link-dropdown:hover,
.navbar-mainnavigation .nav-link-dropdown:focus {
background-color: #F9F9F6;
color: #2D4A3E;
padding-left: 1.25rem;
/* jw. (subnav) — linia boczna na hover w primary, aktywna pozycja
(reguła .active niżej, ta sama specyficzność) zachowuje warning */
box-shadow: inset 3px 0 0 0 #2D4A3E;
}
.navbar-mainnavigation .nav-link-dropdown.active {
color: #2D4A3E;
background-color: #F9F9F6;
font-weight: 600;
box-shadow: inset 3px 0 0 0 #E5A93C;
}
/* Rozwijanie po najechaniu myszką — tylko tam, gdzie realnie widać
pełne poziome menu bez hamburgera (patrz sekcja 1.: 992-1199px jest
celowo wymuszony na hamburger, więc prawdziwy próg desktopu to
1200px). Menu trzyma się w layoucie (position:absolute niezależnie
od hover), więc pokazywanie/ukrywanie przez opacity+visibility
zamiast display nie powoduje "skoków" treści pod spodem i pozwala
na płynne przejście spójne z resztą mikroanimacji serwisu. */
@media (min-width: 1200px) {
.navbar-mainnavigation .nav-style-simple .dropdown-menu,
.navbar-mainnavigation .nav-style-mega .dropdown-menu {
display: block;
top: 100%;
/* margin-top:0 (nie --bs-dropdown-spacer, domyślnie .5rem) —
motyw zostawiał martwą, niehoverowalną strefę między linkiem
a panelem; kursor tracił hover w tej przerwie zanim zdążył
dotrzeć do menu, więc ono znikało zanim dało się kliknąć
pozycję. Panel przylega teraz bezpośrednio do paska. */
margin-top: 0;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(6px);
/* przy CHOWANIU dodatkowy grace period (.28s) zanim visibility
faktycznie przełączy się na hidden — margines bezpieczeństwa
na wypadek chwilowej niedokładności ruchu myszką; przy hover
(:hover/:focus-within) ten delay jest zerowany, więc otwarcie
reaguje od razu, bez opóźnienia */
transition: opacity .18s ease, transform .18s ease, visibility 0s linear .28s;
}
.navbar-mainnavigation .nav-style-simple .dropdown-menu {
left: 0;
}
.navbar-mainnavigation .nav-item.nav-style-simple:hover > .dropdown-menu,
.navbar-mainnavigation .nav-item.nav-style-mega:hover > .dropdown-menu,
.navbar-mainnavigation .nav-item.nav-style-simple:focus-within > .dropdown-menu,
.navbar-mainnavigation .nav-item.nav-style-mega:focus-within > .dropdown-menu {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0);
transition-delay: 0s;
}
/* Strzałka rozwijania niepotrzebna przy hover — chowamy ją tylko
wizualnie (klik nadal działa dla klawiatury/dotyku na tym
breakpoincie, gdyby ktoś mimo wszystko z niego skorzystał). */
.navbar-mainnavigation .nav-link-toggle .nav-link-indicator {
transition: transform .18s ease;
}
.navbar-mainnavigation .nav-item.nav-style-simple:hover .nav-link-toggle .nav-link-indicator,
.navbar-mainnavigation .nav-item.nav-style-mega:hover .nav-link-toggle .nav-link-indicator {
transform: rotate(180deg);
}
}
/* Zagnieżdżony (3.) poziom w mega-dropdownie — wystąpi tylko na witrynach,
których struktura stron jest głębsza niż na szlakbrdy (tam mega nigdy
się nie pojawia, bo żaden dropdown nie schodzi tam do 3. poziomu).
Bootstrap Package renderuje kolumny 2. poziomu pogrubione, ale zagnieżdżone
dzieci bez żadnego stylu (płaska lista tej samej szerokości) — dodajemy
wcięcie + mniejszą czcionkę + --site-secondary, żeby hierarchia była
czytelna niezależnie od tego, ile poziomów ma dana witryna. */
.navbar-mainnavigation .dropdown-menu-mega .dropdown-nav .dropdown-nav {
margin-top: .15rem;
margin-bottom: .35rem;
}
.navbar-mainnavigation .dropdown-menu-mega .dropdown-nav .dropdown-nav .nav-link-dropdown {
padding-top: .35rem;
padding-bottom: .35rem;
padding-left: 1.5rem;
font-size: .875rem;
font-weight: 400;
color: #D46A37;
}
.navbar-mainnavigation .dropdown-menu-mega .dropdown-nav .dropdown-nav .nav-link-dropdown:hover,
.navbar-mainnavigation .dropdown-menu-mega .dropdown-nav .dropdown-nav .nav-link-dropdown:focus {
padding-left: 1.75rem;
}
/* ============================================================
4. TABELE (element treści "Tabela") — kontener jak karta
(ramka --site-light, cień, zaokrąglone rogi), nagłówek w
--site-secondary z białym pogrubionym tekstem, wiersze treści
naprzemienne: pierwszy biały, potem co drugi --site-lighter.
============================================================ */
.frame-type-table .table-responsive {
border: 1px solid #EAECE6;
border-radius: var(--bs-border-radius);
box-shadow: 0 8px 22px rgba(3, 37, 42, .08);
/* tylko overflow-y ukryty (żeby zaokrąglenie realnie przycinało
górne/dolne rogi tabeli) — overflow-x zostaje auto, inaczej
szerokie tabele straciłyby poziomy scroll na wąskich ekranach */
overflow-x: auto;
overflow-y: hidden;
}
.frame-type-table .table {
margin-bottom: 0;
--bs-table-border-color: #EAECE6;
}
.frame-type-table .table > :not(caption) > * > * {
padding: .65rem 1rem;
vertical-align: middle;
}
.frame-type-table thead th {
background-color: #D46A37;
color: #ffffff;
font-weight: 700;
border-bottom-color: #D46A37;
}
.frame-type-table tbody tr td {
background-color: #ffffff;
}
.frame-type-table tbody tr:nth-child(even) td {
background-color: #F9F9F6;
}
.frame-type-table tbody tr td {
transition: background-color .2s ease;
}
.frame-type-table tbody tr:hover td {
background-color: #EAECE6;
}
/* Akcentowy pasek "wysuwający się od środka" w pierwszej kolumnie —
ten sam motyw animacji (transform:scaleY, transform-origin:center)
co podkreślenie linku w menu głównym i w treści, tylko obrócony
pionowo. */
.frame-type-table tbody tr td:first-child {
position: relative;
transition: background-color .2s ease, color .2s ease, font-weight .2s ease;
}
.frame-type-table tbody tr td:first-child:before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 3px;
background: #E5A93C;
transform: scaleY(0);
transform-origin: center;
transition: transform .22s ease;
}
.frame-type-table tbody tr:hover td:first-child:before {
transform: scaleY(1);
}
.frame-type-table tbody tr:hover td:first-child {
color: #2D4A3E;
font-weight: 600;
}
.frame-type-html {
overflow-x: auto;
}
.frame-type-html table {
border-collapse: collapse;
max-width: 100%;
}
.frame-type-html table td,
.frame-type-html table th {
border: 1px solid #EAECE6;
padding: .5rem .75rem;
}
/* ============================================================
5. POLA FORMULARZY — spójna kolorystyka z paletą marki. Motyw
"wypieka" kolor ramki/fokusu na sztywno przy kompilacji SCSS
(patrz zasada w sekcji 0.), więc trzeba go nadpisać wprost.
Obejmuje też "gołe" pola felogin bez klasy .form-control w
markupie (motyw celuje w nie osobno przez input[type], w tym
samym miejscu co .form-control — stąd te same selektory tutaj)
oraz checkbox zgody RODO w rejestracji sf_register: markup tego
pola to .custom-control/-input/-label, klasy z Bootstrapa 4 —
ten motyw (BS5) nie ma dla nich ŻADNEGO CSS, więc bez tych
reguł pole renderowało się jako gołe, natywne query bez stylu.
============================================================ */
.form-control,
.form-select,
.frame-type-felogin_login input[type=text],
.frame-type-felogin_login input[type=password] {
border-color: #EAECE6;
/* kreska pod polem, "wysuwana" na fokusie — ten sam motyw co
podkreślenie linków w treści/menu, tu w kolorze warning dla
kontrastu z tealową ramką fokusu (2 tony zamiast dublowania
tego samego koloru w dwóch miejscach) */
background-image: linear-gradient(#E5A93C, #E5A93C);
background-repeat: no-repeat;
background-position: left bottom;
background-size: 0% 2px;
transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out, background-size .3s ease;
}
.form-control:focus,
.form-select:focus,
.form-group input[type=file]:focus,
.frame-type-felogin_login input[type=text]:focus,
.frame-type-felogin_login input[type=password]:focus {
border-color: #D46A37;
box-shadow: 0 0 0 .25rem rgba(212, 106, 55, .25);
background-size: 100% 2px;
}
/* Autouzupełnianie przeglądarki (np. zapamiętane logowanie/hasło) nakłada
WŁASNE, natywne tło pola (Chrome/Edge: niebieskawe lub żółte) przez
pseudo-klasę :-webkit-autofill - background-color/background-image
same w sobie tego nie nadpiszą, jedyny niezawodny sposób to
"oszukanie" ogromnym, wstawionym (inset) box-shadow w tym samym
kolorze co tło pola. Bez tego pole logowania po zapamiętaniu przez
przeglądarkę wygląda inaczej niż reszta formularzy i "zjada"
widoczność cienkiego paska pod spodem. */
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus,
.frame-type-felogin_login input:-webkit-autofill,
.frame-type-felogin_login input:-webkit-autofill:hover,
.frame-type-felogin_login input:-webkit-autofill:focus {
-webkit-text-fill-color: #2C3531;
-webkit-box-shadow: 0 0 0 1000px #ffffff inset;
box-shadow: 0 0 0 1000px #ffffff inset;
transition: background-color 5000s ease-in-out 0s, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.form-label {
color: #2D4A3E;
font-weight: 600;
transition: color .2s ease;
}
/* Etykieta reaguje na fokus pola pod nią — mikro-feedback, że pole
jest aktywne. Trzy różne miejsca to trzy różne markupy formularzy
(EXT:form ma klasę .form-label, felogin/sf_register mają gołe