/* =========================================================================
UJEDNOLICENIE: WIDOK ARTYKULU = WIDOK LISTY KATEGORII
Joomla renderuje te sama tresc w dwoch roznych kontenerach:
- lista kategorii -> .item-content
- pojedynczy artykul -> .com-content-article__body
Arkusz celowal prawie wylacznie w pierwszy, wiec 45 stron pojedynczych
artykulow (18 z trescia, ktorej to dotyczylo) traciło stylizacje list,
tabel i obrazow oblewanych. Wszystkie selektory `.item-content` zostaly
rozszerzone o drugi kontener przez :is(), ktore NIE zmienia specyficznosci
(oba argumenty to klasy), wiec kolejnosc regul zostaje bez zmian.
========================================================================= */
/* Fonty laduje WebAssetManager w index.php (preconnect + link), nie @import. */
/* =========================================================================
TERMOCERT - child template Cassiopei
System projektowy: ui-ux-pro-max, styl "Trust & Authority"
Zrodlo prawdy: design-system/termocert/MASTER.md
========================================================================= */
:root {
/* Paleta */
--tc-primary: #0F172A;
--tc-secondary: #334155;
--tc-cta: #0369A1;
--tc-cta-hover: #075985;
--tc-bg: #F8FAFC;
--tc-surface: #FFFFFF;
--tc-text: #020617;
--tc-muted: #475569;
--tc-border: #E2E8F0;
--tc-border-str: #CBD5E1;
--tc-accent-warm:#C2410C;
/* Odstepy */
--tc-xs: .25rem; --tc-sm: .5rem; --tc-md: 1rem;
--tc-lg: 1.5rem; --tc-xl: 2rem; --tc-2xl: 3rem; --tc-3xl: 4rem;
/* Cienie */
--tc-shadow-sm: 0 1px 2px rgba(2,6,23,.05);
--tc-shadow-md: 0 4px 6px rgba(2,6,23,.08);
--tc-shadow-lg: 0 10px 15px rgba(2,6,23,.10);
--tc-radius: 10px;
--tc-speed: 200ms;
--tc-measure: 68ch;
/* Nadpisania zmiennych Cassiopei */
--cassiopeia-color-primary: var(--tc-cta);
--cassiopeia-color-link: var(--tc-cta);
--cassiopeia-color-hover: var(--tc-cta-hover);
--body-bg: var(--tc-bg);
--link-color: var(--tc-cta);
}
/* ============================ TYPOGRAFIA ============================ */
body.site {
background: var(--tc-bg);
color: var(--tc-text);
font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
font-size: 1rem;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6,
.page-header h1, .page-header h2 {
font-family: "Poppins", system-ui, sans-serif;
color: var(--tc-primary);
font-weight: 600;
line-height: 1.25;
letter-spacing: -.01em;
margin-block: var(--tc-xl) var(--tc-md);
text-wrap: balance;
}
h1 { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem); }
h2 { font-size: clamp(1.4rem, 1.1rem + 1.3vw, 2rem); }
h3 { font-size: clamp(1.2rem, 1.05rem + .7vw, 1.5rem); }
h4 { font-size: 1.125rem; }
/* miara wiersza na kontenerze, nie na akapicie - inaczej tekst obok
oblewanego obrazu zwezal sie podwojnie (patrz sekcja WZORZEC TRESCI) */
:is(.item-content, .com-content-article__body) p, :is(.item-content, .com-content-article__body) li { color: var(--tc-secondary); }
a { color: var(--tc-cta); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--tc-cta-hover); }
/* ====================== DOSTEPNOSC - priorytet 1 ====================== */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
outline: 3px solid var(--tc-cta);
outline-offset: 2px;
border-radius: 4px;
}
.tc-skip-link {
position: absolute; left: var(--tc-md); top: -100px; z-index: 100;
background: var(--tc-primary); color: #fff;
padding: var(--tc-sm) var(--tc-md); border-radius: var(--tc-radius);
transition: top var(--tc-speed);
}
.tc-skip-link:focus { top: var(--tc-md); color: #fff; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important; animation-iteration-count: 1 !important;
transition-duration: .01ms !important; scroll-behavior: auto !important;
}
}
/* ========================= NAGLOWEK I NAWIGACJA ========================= */
.container-header {
background: var(--tc-primary);
color: #fff;
box-shadow: var(--tc-shadow-md);
border: 0;
}
.container-header a { color: #fff; }
.container-header .navbar-brand { font-family: "Poppins", sans-serif; font-weight: 700; }
.container-topbar {
background: #0B1220;
color: #CBD5E1;
font-size: .875rem;
}
.container-topbar a { color: #CBD5E1; }
.container-topbar a:hover { color: #fff; }
.container-nav .mod-menu { gap: var(--tc-xs); }
.container-nav .mod-menu > li > a,
.container-nav .mod-menu > li > span {
display: flex; align-items: center;
min-height: 44px;
padding-inline: var(--tc-md);
border-radius: var(--tc-radius);
font-weight: 600;
cursor: pointer;
transition: background-color var(--tc-speed), color var(--tc-speed);
}
.container-nav .mod-menu > li > a:hover { background: rgba(255,255,255,.12); }
.container-nav .mod-menu > li.current > a { background: var(--tc-cta); }
/* ============================== UKLAD ============================== */
.site-grid { gap: var(--tc-xl); }
.container-component { min-width: 0; }
.container-sidebar-left .mod-menu,
.container-sidebar-right > * {
background: var(--tc-surface);
border: 1px solid var(--tc-border);
border-radius: var(--tc-radius);
box-shadow: var(--tc-shadow-sm);
padding: var(--tc-md);
}
.container-sidebar-left .mod-menu a {
display: block; min-height: 44px;
padding: .6rem var(--tc-sm);
border-radius: 6px;
color: var(--tc-secondary);
text-decoration: none;
cursor: pointer;
transition: background-color var(--tc-speed), color var(--tc-speed);
}
.container-sidebar-left .mod-menu a:hover { background: #EFF6FF; color: var(--tc-cta); }
.container-sidebar-left .mod-menu .current > a {
background: #E0F2FE; color: var(--tc-cta); font-weight: 600;
box-shadow: inset 3px 0 0 var(--tc-cta);
}
.container-sidebar-left .mod-menu ul {
margin-left: var(--tc-sm);
border-left: 1px solid var(--tc-border);
padding-left: var(--tc-sm);
}
/* ============================ OKRUSZKI ============================ */
.mod-breadcrumbs {
background: transparent; border: 0;
padding-inline: 0 !important;
font-size: .875rem;
}
.mod-breadcrumbs__item a { color: var(--tc-muted); text-decoration: none; }
.mod-breadcrumbs__item a:hover { color: var(--tc-cta); text-decoration: underline; }
/* ============================== TRESC ============================== */
.container-component > .com-content-article,
.com-content-category-blog__item,
.item-page {
background: var(--tc-surface);
border: 1px solid var(--tc-border);
border-radius: var(--tc-radius);
box-shadow: var(--tc-shadow-sm);
padding: clamp(var(--tc-md), 3vw, var(--tc-xl));
margin-bottom: var(--tc-lg);
}
.page-header { border-bottom: 2px solid var(--tc-border); padding-bottom: var(--tc-sm); }
.page-header h1, .page-header h2 { margin-top: 0; }
:is(.item-content, .com-content-article__body) img,
.com-content-article img,
.item-page img { max-width: 100%; height: auto; border-radius: 8px; }
/* zdjecia termowizyjne - material dowodowy, wyrozniony ramka */
:is(.item-content, .com-content-article__body) img[src*="termo"], :is(.item-content, .com-content-article__body) img[src*="ir_"] {
border: 2px solid var(--tc-accent-warm);
box-shadow: var(--tc-shadow-md);
}
:is(.item-content, .com-content-article__body) table {
width: 100%; border-collapse: collapse; margin-block: var(--tc-lg);
font-size: .9375rem;
}
:is(.item-content, .com-content-article__body) th {
background: var(--tc-primary); color: #fff;
text-align: left; padding: var(--tc-sm) var(--tc-md); font-weight: 600;
}
:is(.item-content, .com-content-article__body) td { padding: var(--tc-sm) var(--tc-md); border-bottom: 1px solid var(--tc-border); }
:is(.item-content, .com-content-article__body) tbody tr:nth-child(even) { background: #F1F5F9; }
/* =========================== PRZYCISKI / CTA =========================== */
.btn, .readmore .btn, button.btn {
display: inline-flex; align-items: center; justify-content: center;
gap: var(--tc-sm);
min-height: 44px; padding: .625rem 1.25rem;
font-family: "Poppins", sans-serif; font-weight: 600; font-size: 1rem;
border-radius: var(--tc-radius); border: 1px solid transparent;
cursor: pointer;
transition: background-color var(--tc-speed), border-color var(--tc-speed), color var(--tc-speed), box-shadow var(--tc-speed);
}
.btn-primary, .readmore .btn {
background: var(--tc-cta); border-color: var(--tc-cta); color: #fff;
}
.btn-primary:hover, .readmore .btn:hover {
background: var(--tc-cta-hover); border-color: var(--tc-cta-hover); color: #fff;
box-shadow: var(--tc-shadow-md);
}
.btn-secondary {
background: transparent; border-color: var(--tc-border-str); color: var(--tc-primary);
}
.btn-secondary:hover { background: var(--tc-primary); border-color: var(--tc-primary); color: #fff; }
/* ================= MODULY WEZWAN ("Jesli chcesz ...") ================= */
.main-bottom { margin-top: var(--tc-2xl); }
.main-bottom .card,
.main-bottom .mod-custom {
background: linear-gradient(180deg, #EFF6FF 0%, var(--tc-surface) 100%);
border: 1px solid #BFDBFE;
border-left: 4px solid var(--tc-cta);
border-radius: var(--tc-radius);
padding: var(--tc-lg);
}
/* =============================== STOPKA =============================== */
.container-footer {
background: var(--tc-primary);
color: #CBD5E1;
margin-top: var(--tc-3xl);
padding-block: var(--tc-2xl);
}
.container-footer a { color: #E2E8F0; }
.container-footer a:hover { color: #fff; }
.back-to-top-link { background-color: var(--tc-cta); border: 0; cursor: pointer; }
/* ============================ RESPONSYWNOSC ============================ */
@media (max-width: 767.98px) {
.site-grid { display: block; }
.container-sidebar-left, .container-sidebar-right { margin-top: var(--tc-xl); }
body.site { font-size: 1rem; }
h1 { margin-top: var(--tc-md); }
.container-nav .mod-menu { flex-direction: column; align-items: stretch; }
.container-nav .mod-menu > li > a { min-height: 48px; }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
.container-sidebar-right { display: none; }
}
@media (min-width: 1440px) {
.site-grid, .container-header > .grid-child { max-width: 1320px; margin-inline: auto; }
}
html, body { overflow-x: clip; }
img, video, iframe, table { max-width: 100%; }
/* ================== SPRZATANIE PO STARYM SZABLONIE ================== */
/* martwy widget Google+ - usluga wylaczona w 2019 */
.g-plusone, div[class*="g-plusone"] { display: none !important; }
/* =========================================================================
POPRAWKI PO PIERWSZEJ BRAMIE WIZUALNEJ
========================================================================= */
/* --- 1. Justowanie wklejone w tresc 86 artykulow -------------------------
Stary edytor zapisal text-align:justify w atrybucie style. Justowanie przy
waskiej kolumnie tworzy "rzeki" i psuje czytelnosc. Nadpisujemy punktowo.
Docelowo tresc nalezy wyczyscic - to obejscie, nie rozwiazanie. */
:is(.item-content, .com-content-article__body) [style*="justify"],
.com-content-article [style*="justify"],
.item-page [style*="justify"],
.mod-custom [style*="justify"] { text-align: left !important; }
:is(.item-content, .com-content-article__body) p, :is(.item-content, .com-content-article__body) li { hyphens: none; }
/* --- 2. Kolejnosc na mobile: TRESC PRZED nawigacja -----------------------
Domyslnie grid renderuje sidebar-left przed komponentem, wiec na telefonie
trzeba bylo przewinac cala nawigacje, zeby dojsc do artykulu. */
@media (max-width: 767.98px) {
.site-grid { display: flex; flex-direction: column; }
.container-component { order: 1; }
.container-sidebar-left { order: 2; }
.container-sidebar-right{ order: 3; }
.container-banner, .container-top-a { order: 0; }
}
/* --- 3. Menu glowne: rowne odstepy zamiast rozjezdzania sie --------------- */
.container-nav { width: 100%; }
.container-nav .mod-menu {
display: flex; flex-wrap: wrap;
justify-content: flex-start;
gap: var(--tc-xs) var(--tc-sm);
padding-block: var(--tc-sm);
}
.container-nav .mod-menu > li > a { padding-inline: .875rem; font-size: .9375rem; }
/* --- 4. Pasek uzytkowy: czytelny, nie scisniety --------------------------- */
.container-topbar .mod-menu {
display: flex; flex-wrap: wrap; gap: 0 var(--tc-md);
justify-content: flex-end;
padding-block: .25rem;
}
.container-topbar .mod-menu a {
display: inline-flex; align-items: center;
min-height: 36px; padding-inline: .25rem;
font-size: .8125rem; text-decoration: none;
cursor: pointer;
}
@media (max-width: 767.98px) {
.container-topbar .mod-menu { justify-content: flex-start; gap: 0 var(--tc-sm); }
.container-topbar .mod-menu a { font-size: .75rem; }
}
/* --- 5. Marka: napis zamiast obrazka, skalowalny -------------------------- */
.container-header .brand-logo,
.container-header .navbar-brand {
display: flex; flex-direction: column; gap: 2px;
text-decoration: none; padding-block: var(--tc-md);
}
.container-header .site-title,
.container-header .navbar-brand > span:first-child {
font-family: "Poppins", sans-serif;
font-weight: 700;
font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
letter-spacing: .06em;
line-height: 1.1;
color: #fff;
}
.container-header .site-description,
.container-header .navbar-brand > span + span {
font-family: "Open Sans", sans-serif;
font-weight: 400; font-size: .875rem; letter-spacing: .02em;
color: #94A3B8;
}
/* --- 6. Obrazy w bocznych paskach nie moga rozpychac kart ----------------- */
.container-sidebar-left img,
.container-sidebar-right img { max-width: 100%; height: auto; border-radius: 6px; }
/* --- 7. Odstep pod przyklejonym naglowkiem -------------------------------- */
.container-header + * { padding-top: var(--tc-md); }
/* =========================================================================
KOMPAKTOWY NAGLOWEK
Przed: ~360 px do pierwszej tresci. Marka i menu leza jedno pod drugim,
kazde w osobnym wierszu siatki. Ustawiamy je obok siebie.
========================================================================= */
@media (min-width: 992px) {
.container-header > .grid-child {
display: flex;
align-items: center;
flex-wrap: nowrap;
gap: var(--tc-xl);
padding-block: var(--tc-sm);
}
.container-header .navbar-brand,
.container-header .brand-logo { flex: 0 0 auto; padding-block: var(--tc-sm); }
.container-header .container-nav { flex: 1 1 auto; min-width: 0; }
.container-header .container-search { flex: 0 0 auto; }
/* menu w jednym wierszu, ciasniej, bez rozjezdzania sie */
/* zawijanie, nie przewijanie - przewijanie ucinalo pierwsze pozycje */
.container-nav .mod-menu {
flex-wrap: wrap;
justify-content: flex-end;
row-gap: 2px;
padding-block: 0;
}
.container-nav .mod-menu > li > a {
white-space: nowrap;
padding-inline: .625rem;
font-size: .875rem;
min-height: 40px;
}
}
/* marka wezsza, opis pod spodem bez duzego odstepu */
.container-header .site-title,
.container-header .navbar-brand > span:first-child { font-size: clamp(1.375rem, 1rem + 1.2vw, 1.875rem); }
.container-header .site-description,
.container-header .navbar-brand > span + span { font-size: .8125rem; }
/* pole wyszukiwania proporcjonalne do naglowka */
.container-search input[type="search"],
.container-search input[type="text"] {
min-height: 40px; border-radius: var(--tc-radius) 0 0 var(--tc-radius);
border: 1px solid var(--tc-border-str); max-width: 200px;
}
.container-search .btn {
min-height: 40px; border-radius: 0 var(--tc-radius) var(--tc-radius) 0;
background: var(--tc-cta); border-color: var(--tc-cta);
}
/* mniejszy odstep miedzy naglowkiem a trescia */
.site-grid { padding-top: var(--tc-lg); }
/* =========================================================================
SCALONY WIERSZ NAGLOWKA (.container-headbar)
Nadpisanie index.php laczy marke, menu i wyszukiwarke w JEDNYM wierszu
siatki. Wczesniej byly trzy osobne .grid-child, kazdy z wlasnym
centrowaniem i paddingiem 2.5rem - stad nagłowek na ~290 px.
========================================================================= */
.container-headbar {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--tc-md) var(--tc-xl);
padding-block: var(--tc-sm) !important;
}
.container-headbar .navbar-brand {
flex: 0 0 auto;
padding-block: 0;
gap: 0;
}
.container-headbar .container-nav {
flex: 1 1 auto;
min-width: 0;
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--tc-md);
}
/* marka: napis i podtytul ciasno, bez rozpychania wiersza */
.container-headbar .brand-logo { line-height: 1.05; }
.container-headbar .site-description { margin-top: 1px; }
/* menu: zawija sie, nigdy nie chowa pozycji */
.container-headbar .mod-menu {
flex-wrap: wrap;
justify-content: flex-end;
row-gap: 2px;
padding-block: 0;
margin-bottom: 0;
}
.container-headbar .mod-menu > li > a { min-height: 38px; padding-inline: .625rem; }
/* wyszukiwarka nie rozpycha wiersza */
.container-headbar .container-search { flex: 0 0 auto; }
.container-headbar .container-search input { max-width: 170px; }
/* na waskich ekranach marka nad menu, ale bez ogromnych odstepow */
@media (max-width: 991.98px) {
.container-headbar { gap: var(--tc-sm); }
.container-headbar .container-nav { justify-content: flex-start; width: 100%; }
.container-headbar .mod-menu { justify-content: flex-start; }
}
/* --- LOGO KLIENTA -------------------------------------------------------
Zrodlo: images/grafika/top-logo-680.jpg (2013, biale tlo, czarny tekst).
Wygenerowane: tlo przezroczyste + tekst rozjasniony, cegly bez zmian.
Cassiopeia nie ogranicza .logo zadna regula - stad jawne wymiary (7.4). */
.container-headbar .brand-logo img,
.container-header .brand-logo img {
height: clamp(38px, 3.2vw, 52px);
width: auto;
max-width: 100%;
display: block;
}
@media (max-width: 575.98px) {
.container-headbar .brand-logo img { height: 34px; }
}
/* --- ODSTEP MIEDZY NAGLOWKIEM A TRESCIA ---------------------------------
Cassiopeia daje .grid-child padding 2.5rem, co przy pustych pozycjach
(banner, top-a) tworzy pas pustki. Scinamy go i zostawiamy oddech. */
.site-grid { padding-top: var(--tc-md); }
.container-header + * { padding-top: 0; }
.container-banner:empty, .container-top-a:empty, .container-below-top:empty { display: none; }
.container-banner > :only-child:empty { display: none; }
/* =========================================================================
NAGLOWEK: SAMA IKONA ZNAKU
Pelny znak (680x80) zjadal cala szerokosc i spychal menu na trzy wiersze.
W naglowku zostaje sam sygnet; napis firmowy przeniesiony do stopki.
========================================================================= */
.container-headbar .brand-logo img,
.container-header .brand-logo img {
height: 44px;
width: auto;
max-width: none;
display: block;
}
@media (max-width: 575.98px) {
.container-headbar .brand-logo img { height: 36px; }
}
/* menu ma teraz miejsce - ciasniej i wyzej */
.container-headbar { padding-block: var(--tc-xs) !important; }
.container-headbar .mod-menu > li > a { padding-inline: .75rem; font-size: .9375rem; }
/* =========================================================================
PADDINGI TRESCI
Karty dotykaly krawedzi okna na wezszych ekranach. Skalowany odstep
boczny na wszystkich kontenerach siatki.
========================================================================= */
.site-grid,
.container-header > .grid-child,
.container-footer > .grid-child,
.container-banner,
.container-top-a,
.container-bottom-a,
.container-bottom-b {
padding-inline: clamp(var(--tc-md), 3vw, var(--tc-xl));
}
/* wewnetrzny oddech kart - wiecej niz domyslne 1rem */
.container-component > .com-content-article,
.com-content-category-blog__item,
.item-page {
padding: clamp(var(--tc-lg), 2.5vw, var(--tc-2xl));
}
.container-sidebar-left .mod-menu,
.container-sidebar-right > * { padding: var(--tc-lg); }
/* na telefonie odstep mniejszy, zeby nie zjadac szerokosci tekstu */
@media (max-width: 575.98px) {
.site-grid { padding-inline: var(--tc-md); }
.container-component > .com-content-article,
.com-content-category-blog__item,
.item-page { padding: var(--tc-md); }
}
/* =========================================================================
STOPKA: PELNY ZNAK FIRMOWY
Tu ladują tresci wyjete z naglowka - napis i lista specjalizacji.
========================================================================= */
.tc-footer-grid {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
gap: var(--tc-xl);
}
.tc-footer-brand { flex: 1 1 320px; max-width: 620px; }
.tc-footer-brand img {
width: 100%; max-width: 420px; height: auto; display: block;
}
.tc-footer-scope {
margin-top: var(--tc-sm);
font-size: .8125rem;
line-height: 1.6;
color: #94A3B8;
max-width: 46ch;
}
.tc-footer-modules { flex: 0 1 auto; }
@media (max-width: 767.98px) {
.tc-footer-grid { flex-direction: column; gap: var(--tc-lg); }
.tc-footer-brand img { max-width: 300px; }
}
/* =========================================================================
ZGODNOSC Z WEB INTERFACE GUIDELINES
========================================================================= */
:root { color-scheme: light; }
/* sticky naglowek zaslanial cel skip-linka i kotwice naglowkow */
html { scroll-padding-top: 6rem; }
:where(h1, h2, h3, h4, [id]) { scroll-margin-top: 6rem; }
/* bez 300 ms opoznienia i bez domyslnej poswiaty na dotyku */
:where(a, button, .btn, summary, [role="button"], input[type="submit"]) {
touch-action: manipulation;
-webkit-tap-highlight-color: rgba(3, 105, 161, .18);
}
/* kolumny liczbowe w tabelach technicznych rownej szerokosci */
:is(.item-content, .com-content-article__body) table td,
:is(.item-content, .com-content-article__body) table th { font-variant-numeric: tabular-nums; }
/* logo: rezerwacja miejsca przed zaladowaniem obrazu */
.tc-logo { aspect-ratio: 131 / 100; }
/* =========================================================================
KOREKTY PO POMIARZE
Zmierzone: tresc 1 px od ramki karty, prawy pasek 24+16 px podwojnie.
========================================================================= */
/* --- 3. PADDING TRESCI --------------------------------------------------
Cassiopeia ma selektor dwuklasowy (.blog-items .blog-item), wiec moja
pojedyncza klasa przegrywala specyficznoscia. Dorownuje. */
.com-content-category-blog__items .com-content-category-blog__item,
.container-component .com-content-article,
.container-component .item-page,
.container-component > .com-content-single-article {
padding: clamp(1.5rem, 2.2vw, 2.5rem) !important;
}
/* obrazy w tresci nie moga wychodzic poza padding */
.com-content-category-blog__item :is(.item-content, .com-content-article__body) > :first-child { margin-top: 0; }
.com-content-category-blog__item :is(.item-content, .com-content-article__body) img { max-width: 100%; height: auto; }
/* --- 4. PASKI BOCZNE: KONIEC PODWOJNEGO PADDINGU ------------------------
Zostaje jeden poziom - .card-body. Karta zewnetrzna bez wlasnego. */
.container-sidebar-left .card,
.container-sidebar-right .card {
padding: 0 !important;
}
.container-sidebar-left .card-body,
.container-sidebar-right .card-body {
padding: var(--tc-md) !important;
}
/* menu sekcyjne: ciasniej, bo pozycji jest duzo */
.container-sidebar-left .mod-menu { padding: 0 !important; border: 0; box-shadow: none; }
.container-sidebar-left .mod-menu a { padding: .5rem .625rem; min-height: 40px; }
/* obrazy w paskach bocznych na cala szerokosc karty */
.container-sidebar-left .card-body img,
.container-sidebar-right .card-body img { width: 100%; height: auto; }
/* --- 2. WIEKSZE LOGO ----------------------------------------------------
Sygnet 88x61 przy 44 px wysokosci byl ledwo czytelny. */
.container-headbar .brand-logo img,
.container-header .brand-logo img {
height: clamp(52px, 4.4vw, 72px);
width: auto;
}
@media (max-width: 575.98px) {
.container-headbar .brand-logo img { height: 48px; }
}
/* =========================================================================
NAWIGACJA MOBILNA - HAMBURGER
Ponizej 992 px menu chowa sie za przyciskiem. Powyzej przycisk znika
i menu jest zawsze widoczne (progressive enhancement - bez JS menu
pozostaje rozwiniete, bo domyslnie ukrywa je dopiero regula mobilna).
========================================================================= */
.tc-nav-toggle {
display: none;
align-items: center;
justify-content: center;
width: 44px; height: 44px; /* cel dotykowy */
margin-left: auto;
padding: 0;
background: transparent;
border: 1px solid rgba(255,255,255,.25);
border-radius: var(--tc-radius);
color: #fff;
cursor: pointer;
transition: background-color var(--tc-speed), border-color var(--tc-speed);
}
.tc-nav-toggle:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.45); }
.tc-nav-toggle:focus-visible { outline: 3px solid #7DD3FC; outline-offset: 2px; }
.tc-nav-toggle .tc-ico-close { display: none; }
.tc-nav-toggle[aria-expanded="true"] .tc-ico-open { display: none; }
.tc-nav-toggle[aria-expanded="true"] .tc-ico-close { display: block; }
@media (max-width: 991.98px) {
.tc-nav-toggle { display: inline-flex; }
.container-headbar { flex-wrap: wrap; align-items: center; }
.container-headbar .navbar-brand { flex: 0 1 auto; }
/* panel menu: pelna szerokosc pod naglowkiem */
.container-headbar .container-nav {
flex: 1 0 100%;
display: none;
flex-direction: column;
align-items: stretch;
gap: var(--tc-sm);
padding-block: var(--tc-sm) var(--tc-md);
border-top: 1px solid rgba(255,255,255,.14);
margin-top: var(--tc-sm);
}
body.tc-nav-open .container-headbar .container-nav { display: flex; }
.container-headbar .mod-menu {
flex-direction: column;
align-items: stretch;
gap: 2px;
width: 100%;
}
.container-headbar .mod-menu > li { width: 100%; }
.container-headbar .mod-menu > li > a {
min-height: 48px; /* wiekszy cel na dotyku */
justify-content: flex-start;
padding-inline: var(--tc-md);
font-size: 1rem;
}
.container-headbar .container-search { width: 100%; }
.container-headbar .container-search input { max-width: none; width: 100%; }
.container-headbar .container-search form { display: flex; width: 100%; }
}
/* bez JS menu zostaje widoczne - zadnego martwego przycisku */
@media (max-width: 991.98px) {
html.no-js .container-headbar .container-nav { display: flex; }
html.no-js .tc-nav-toggle { display: none; }
}
/* pasek gorny: dane firmowe, drugorzedne */
.container-topbar .mod-menu a { color: #94A3B8; }
.container-topbar .mod-menu a:hover { color: #fff; }
@media (max-width: 991.98px) {
.container-topbar { display: none; } /* na telefonie tresc, nie metryczka */
}
/* =========================================================================
PASKI BOCZNE - JEDNA POWIERZCHNIA, NIE DWIE
Zmierzone: .card ma tlo #F8FAFC (kolor strony), a ul.mod-menu w srodku
tlo biale -> bialy prostokat w szarej karcie = wizualna ramka w ramce.
Powierzchnia ma byc jedna: karta. Wszystko w niej przezroczyste.
========================================================================= */
.container-sidebar-left .card,
.container-sidebar-right .card {
background: var(--tc-surface);
border: 1px solid var(--tc-border);
border-radius: var(--tc-radius);
box-shadow: var(--tc-shadow-sm);
overflow: hidden;
}
.container-sidebar-left .card-body,
.container-sidebar-right .card-body {
padding: var(--tc-sm) !important;
background: transparent;
}
/* nic wewnatrz karty nie tworzy wlasnej powierzchni */
.container-sidebar-left .mod-menu,
.container-sidebar-right .mod-menu,
.container-sidebar-left .mod-custom,
.container-sidebar-right .mod-custom {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0;
}
/* naglowek modulu jako pasek karty, nie osobne pudelko */
.container-sidebar-left .card-header,
.container-sidebar-right .card-header {
background: transparent;
border-bottom: 1px solid var(--tc-border);
padding: var(--tc-sm) var(--tc-md);
font-family: "Poppins", sans-serif;
font-size: 1rem;
font-weight: 600;
color: var(--tc-primary);
margin: 0;
}
/* pozycje menu: ciasniej, bez zbednego luzu miedzy nimi */
.container-sidebar-left .mod-menu li { padding-block: 0; }
.container-sidebar-left .mod-menu a {
padding: .5rem .625rem;
min-height: 40px;
border-radius: 6px;
}
/* --- STOPKA: pelny znak firmowy ----------------------------------------
Grafika zawiera juz sygnet, nazwe i liste specjalizacji, wiec zaden
tekst pod spodem sie nie powtarza. Tresc opisowa jest w atrybucie alt. */
.tc-footer-brand img {
width: 100%;
max-width: 520px;
height: auto;
display: block;
}
@media (max-width: 767.98px) {
.tc-footer-brand img { max-width: 100%; }
}
/* =========================================================================
WYSZUKIWARKA (mod_finder / Smart Search)
Stary mod_search prowadzil do com_search, usunietego w Joomli 4 -
kazde zapytanie konczylo sie bledem 500. Podmienione na Smart Search.
========================================================================= */
.container-search { display: flex; align-items: center; }
.container-search search,
.container-search .mod-finder { width: 100%; }
.container-search form { margin: 0; width: 100%; }
/* pole i przycisk jako jeden spojny element */
.container-search .mod-finder__search,
.container-search .input-group {
display: flex;
align-items: stretch; /* rowna wysokosc - to naprawia rozjazd */
width: 100%;
border-radius: var(--tc-radius);
overflow: hidden;
background: #fff;
border: 1px solid transparent;
transition: border-color var(--tc-speed), box-shadow var(--tc-speed);
}
/* obwodka fokusu na CALEJ grupie, nie na samym polu */
.container-search .input-group:focus-within,
.container-search .mod-finder__search:focus-within {
border-color: #7DD3FC;
box-shadow: 0 0 0 3px rgba(3, 105, 161, .35);
}
.container-search input[type="text"],
.container-search input[type="search"] {
flex: 1 1 auto;
min-width: 0;
height: 44px; /* cel dotykowy */
padding: 0 var(--tc-md);
border: 0;
border-radius: 0;
background: #fff;
color: var(--tc-text);
font-family: "Open Sans", sans-serif;
font-size: .9375rem;
line-height: 44px;
box-shadow: none;
outline: none; /* fokus pokazuje grupa powyzej */
}
.container-search input::placeholder { color: var(--tc-muted); opacity: 1; }
/* wlasny fokus pola nie dubluje sie z obwodka grupy */
.container-search input:focus,
.container-search input:focus-visible { outline: none; box-shadow: none; }
.container-search .btn,
.container-search button[type="submit"] {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
gap: .375rem;
height: 44px; /* identyczna wysokosc jak pole */
min-height: 44px;
padding-inline: var(--tc-md);
border: 0;
border-radius: 0;
background: var(--tc-cta);
color: #fff;
font-family: "Poppins", sans-serif;
font-size: .875rem;
font-weight: 600;
white-space: nowrap;
cursor: pointer;
transition: background-color var(--tc-speed);
}
.container-search .btn:hover { background: var(--tc-cta-hover); }
.container-search .btn:focus-visible { outline: 3px solid #7DD3FC; outline-offset: -3px; }
/* szerokosc pola w naglowku - nie rozpycha menu */
@media (min-width: 992px) {
.container-search { max-width: 260px; }
/* przy ciasnocie zostaje sama ikona lupy */
.container-search .btn span:not([class*="icon"]) { display: none; }
.container-search .btn { padding-inline: .875rem; }
}
@media (max-width: 991.98px) {
.container-search { max-width: none; width: 100%; }
}
/* podpowiedzi wyszukiwania (autosuggest) w palecie szablonu */
.container-search .awesomplete > ul {
background: #fff;
border: 1px solid var(--tc-border);
border-radius: var(--tc-radius);
box-shadow: var(--tc-shadow-lg);
z-index: 50;
}
.container-search .awesomplete > ul > li[aria-selected="true"] { background: #E0F2FE; color: var(--tc-cta); }
/* =========================================================================
BLOKI WEZWANIA DO DZIALANIA ("Jesli chcesz ...")
17 modulow w main-bottom. Wczesniej: zwykle linki z wymuszonym
color:#0000ff i wielokropkiem przed nimi. Teraz przyciski.
========================================================================= */
/* zastapione ponizej - jedna powierzchnia zamiast kafelka w kafelku */
.main-bottom .card-header {
background: transparent;
border: 0;
padding: var(--tc-lg) var(--tc-lg) 0;
font-family: "Poppins", sans-serif;
font-size: 1.25rem;
font-weight: 600;
color: var(--tc-primary);
}
.main-bottom .card-body { padding: var(--tc-lg); }
/* lista korzysci - znaczniki w kolorze marki zamiast szarych kropek */
.main-bottom ul {
list-style: none;
padding-left: 0;
margin-bottom: var(--tc-lg);
}
.main-bottom ul li {
position: relative;
padding-left: 1.75rem;
margin-bottom: .5rem;
color: var(--tc-secondary);
max-width: var(--tc-measure);
}
.main-bottom ul li::before {
content: "";
position: absolute;
left: .25rem; top: .6em;
width: 7px; height: 7px;
border-radius: 2px;
background: var(--tc-cta);
}
/* wiersz z wezwaniami: h3 przestaje byc naglowkiem wizualnie, staje sie paskiem akcji */
.main-bottom h3 {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--tc-sm) var(--tc-md);
margin: var(--tc-lg) 0 0;
padding-top: var(--tc-md);
border-top: 1px solid #BFDBFE;
font-size: .9375rem;
font-weight: 400;
font-family: "Open Sans", sans-serif;
color: var(--tc-muted);
}
/* pierwszy link = akcja glowna */
.main-bottom h3 a {
display: inline-flex;
align-items: center;
gap: .5rem;
min-height: 44px;
padding: .625rem 1.25rem;
border-radius: var(--tc-radius);
background: var(--tc-cta);
color: #fff !important;
font-family: "Poppins", sans-serif;
font-size: 1rem;
font-weight: 600;
text-decoration: none;
cursor: pointer;
transition: background-color var(--tc-speed), box-shadow var(--tc-speed);
}
.main-bottom h3 a:hover {
background: var(--tc-cta-hover);
box-shadow: var(--tc-shadow-md);
color: #fff !important;
}
.main-bottom h3 a span { color: inherit !important; }
/* drugi link = akcja poboczna, obrys zamiast wypelnienia */
.main-bottom h3 a:nth-of-type(2) {
background: transparent;
border: 1px solid var(--tc-cta);
color: var(--tc-cta) !important;
}
.main-bottom h3 a:nth-of-type(2):hover {
background: var(--tc-cta);
color: #fff !important;
}
/* =========================================================================
STARE TABELE UKLADU W MODULACH
Tresc z 2013 uzywa tabel do ukladu, ze sztywna szerokoscia. Zamieniamy
je w elastyczny pasek odnosnikow, ktory zawija sie zamiast rozpychac.
========================================================================= */
.main-bottom table,
.container-bottom-a table {
width: 100% !important;
max-width: 100%;
border-collapse: collapse;
display: block;
}
.main-bottom table tbody,
.main-bottom table tr {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--tc-xs) var(--tc-sm);
width: 100%;
}
.main-bottom table td {
display: inline-flex;
border: 0;
padding: 0;
}
/* odnosniki jako pigulki - czytelne, z celem dotykowym */
.main-bottom table td a {
display: inline-flex;
align-items: center;
min-height: 40px;
padding: .375rem .875rem;
border: 1px solid var(--tc-border-str);
border-radius: 999px;
background: var(--tc-surface);
color: var(--tc-secondary);
font-size: .875rem;
font-weight: 500;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
transition: background-color var(--tc-speed), border-color var(--tc-speed), color var(--tc-speed);
}
.main-bottom table td a:hover {
background: var(--tc-cta);
border-color: var(--tc-cta);
color: #fff;
}
.main-bottom table td a strong { font-weight: 500; }
/* --- PRZYCISK "DO GORY" -------------------------------------------------
Cassiopeia rysuje chevron kolorem currentColor. Poniewaz przemapowalem
--cassiopeia-color-primary na kolor CTA, ikona stala sie niebieska na
niebieskim tle - czyli niewidoczna. Wymuszamy biel. */
.back-to-top-link {
background-color: var(--tc-cta);
color: #fff;
border: 1px solid var(--tc-cta);
box-shadow: var(--tc-shadow-md);
cursor: pointer;
}
.back-to-top-link svg,
.back-to-top-link svg path { fill: currentColor; stroke: currentColor; }
.back-to-top-link:hover,
.back-to-top-link:focus-visible {
background-color: var(--tc-cta-hover);
color: #fff;
border-color: var(--tc-cta-hover);
}
.back-to-top-link:focus-visible { outline: 3px solid #7DD3FC; outline-offset: 2px; }
/* =========================================================================
FORMULARZE RSForm! Pro
Jeden zestaw regul obsluguje wszystkie 12 formularzy - RSForm renderuje
je wspolnym szablonem. Klasy zweryfikowane w realnym renderze.
========================================================================= */
.formResponsive { max-width: 46rem; }
.formResponsive .formBody { max-width: none; }
/* --- wiersz pola ------------------------------------------------------- */
.formResponsive .rsform-block {
margin-bottom: var(--tc-lg);
padding-bottom: 0;
border: 0;
}
/* --- etykieta ---------------------------------------------------------- */
.formResponsive .formControlLabel {
display: block;
margin-bottom: .375rem;
font-family: "Poppins", sans-serif;
font-size: .9375rem;
font-weight: 600;
color: var(--tc-primary);
cursor: pointer;
}
/* gwiazdka pola wymaganego w kolorze akcentu, nie krzyczaca czerwien */
.formResponsive .formRequired,
.formResponsive .formControlLabel strong,
.formResponsive .formControlLabel .formRequired {
color: var(--tc-accent-warm);
font-weight: 700;
margin-left: .15rem;
}
/* --- pola -------------------------------------------------------------- */
.formResponsive .rsform-input-box,
.formResponsive .rsform-select-box,
.formResponsive .rsform-text-box,
.formResponsive .rsform-captcha-box,
.formResponsive input[type="text"],
.formResponsive input[type="email"],
.formResponsive input[type="tel"],
.formResponsive select,
.formResponsive textarea {
width: 100%;
max-width: 100%;
min-height: 44px; /* cel dotykowy */
padding: .625rem var(--tc-md);
border: 1px solid var(--tc-border-str);
border-radius: var(--tc-radius);
background: var(--tc-surface);
color: var(--tc-text);
font-family: "Open Sans", sans-serif;
font-size: 1rem; /* 16px - bez zoomu na iOS */
line-height: 1.5;
transition: border-color var(--tc-speed), box-shadow var(--tc-speed);
}
.formResponsive textarea { min-height: 9rem; resize: vertical; }
.formResponsive select { cursor: pointer; }
.formResponsive input:focus,
.formResponsive select:focus,
.formResponsive textarea:focus {
outline: none;
border-color: var(--tc-cta);
box-shadow: 0 0 0 3px rgba(3, 105, 161, .22);
}
.formResponsive input::placeholder,
.formResponsive textarea::placeholder { color: var(--tc-muted); opacity: 1; }
/* --- opisy pod polami -------------------------------------------------- */
.formResponsive .formDescription {
margin: .25rem 0 0;
font-size: .8125rem;
color: var(--tc-muted);
max-width: var(--tc-measure);
}
/* --- komunikaty walidacji --------------------------------------------- */
.formResponsive .formValidation,
.formResponsive .formNoError,
.formResponsive .formError {
display: block;
margin-top: .25rem;
font-size: .875rem;
color: #B91C1C;
font-weight: 600;
}
.formResponsive .rsform-error input,
.formResponsive .rsform-error select,
.formResponsive .rsform-error textarea {
border-color: #B91C1C;
box-shadow: 0 0 0 3px rgba(185, 28, 28, .15);
}
/* --- captcha ----------------------------------------------------------- */
.formResponsive .rsform-block-captcha .formBody {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--tc-sm) var(--tc-md);
}
.formResponsive .rsform-block-captcha img {
border: 1px solid var(--tc-border);
border-radius: 6px;
background: #fff;
padding: 2px;
}
.formResponsive .rsform-captcha-box { max-width: 10rem; }
.formResponsive .rsform-block-captcha a {
display: inline-flex;
align-items: center;
min-height: 44px;
padding-inline: .5rem;
color: var(--tc-cta);
font-size: .875rem;
cursor: pointer;
}
/* --- przyciski --------------------------------------------------------- */
.formResponsive .rsform-block-submit .formBody {
display: flex;
flex-wrap: wrap;
gap: var(--tc-sm) var(--tc-md);
align-items: center;
padding-top: var(--tc-md);
border-top: 1px solid var(--tc-border);
}
.formResponsive .rsform-submit-button,
.formResponsive .rsform-reset-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: .625rem 1.5rem;
border-radius: var(--tc-radius);
font-family: "Poppins", sans-serif;
font-size: 1rem;
font-weight: 600;
text-transform: none;
cursor: pointer;
transition: background-color var(--tc-speed), border-color var(--tc-speed), color var(--tc-speed), box-shadow var(--tc-speed);
}
/* akcja glowna */
.formResponsive .rsform-submit-button {
background: var(--tc-cta);
border: 1px solid var(--tc-cta);
color: #fff;
}
.formResponsive .rsform-submit-button:hover {
background: var(--tc-cta-hover);
border-color: var(--tc-cta-hover);
box-shadow: var(--tc-shadow-md);
}
/* czyszczenie formularza to akcja poboczna, nie ostrzegawcza czerwien */
.formResponsive .rsform-reset-button {
background: transparent;
border: 1px solid var(--tc-border-str);
color: var(--tc-secondary);
}
.formResponsive .rsform-reset-button:hover {
background: var(--tc-border);
border-color: var(--tc-border-str);
color: var(--tc-primary);
}
.formResponsive .rsform-submit-button:focus-visible,
.formResponsive .rsform-reset-button:focus-visible {
outline: 3px solid var(--tc-cta);
outline-offset: 2px;
}
/* --- tresc opisowa w formularzu ---------------------------------------- */
/* justowanie wpisane w tresc formularzy, tak samo jak w artykulach */
.formResponsive [style*="justify"] { text-align: left !important; }
.formResponsive p { max-width: var(--tc-measure); color: var(--tc-secondary); }
/* naglowki sekcji formularza jako wyrazny podzial */
.formResponsive h1, .formResponsive h2, .formResponsive h3, .formResponsive h4 {
margin-top: var(--tc-xl);
padding-bottom: .375rem;
border-bottom: 1px solid var(--tc-border);
font-size: 1.25rem;
}
.formResponsive .rsform-block:first-child h1,
.formResponsive .rsform-block:first-child h2 { margin-top: 0; }
/* klauzula RODO - czytelna, nie mikrodruk kursywa */
.formResponsive .rsform-block em,
.formResponsive em[style*="font-size"] {
font-style: normal;
font-size: .8125rem !important;
color: var(--tc-muted);
line-height: 1.55;
}
/* --- waskie ekrany ----------------------------------------------------- */
@media (max-width: 575.98px) {
.formResponsive .rsform-block-submit .formBody { flex-direction: column; align-items: stretch; }
.formResponsive .rsform-submit-button,
.formResponsive .rsform-reset-button { width: 100%; }
.formResponsive .rsform-block-captcha .formBody { flex-direction: column; align-items: flex-start; }
.formResponsive .rsform-captcha-box { max-width: 100%; }
}
/* =========================================================================
1. BLOKI CTA - JEDNA POWIERZCHNIA
Cassiopeia renderuje modul jako .main-bottom.card (biala karta), a ja
dokladalem w srodku druga - niebieska. Kafelek w kafelku.
Powierzchnia ma byc jedna: sama karta modulu.
========================================================================= */
.main-bottom.card {
background: linear-gradient(180deg, #EFF6FF 0%, #FFFFFF 100%);
border: 1px solid #BFDBFE;
border-left: 4px solid var(--tc-cta);
border-radius: var(--tc-radius);
box-shadow: var(--tc-shadow-sm);
overflow: hidden;
margin-bottom: var(--tc-lg);
}
/* nic w srodku nie tworzy wlasnej powierzchni */
.main-bottom .card-body,
.main-bottom .mod-custom,
.main-bottom .card-header {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
.main-bottom .card-body { padding: var(--tc-lg) !important; }
.main-bottom .card-header {
padding: var(--tc-lg) var(--tc-lg) 0 !important;
font-family: "Poppins", sans-serif;
font-size: 1.25rem;
font-weight: 600;
color: var(--tc-primary);
}
/* pasek odnosnikow: bez wlasnej ramki, tylko pigulki */
.main-bottom table { background: transparent; margin: 0; }
/* =========================================================================
2. KOMUNIKATY WALIDACJI - MOJ BLAD
Ustawilem display:block, wiec "Nieprawidlowe dane" pokazywalo sie pod
kazdym polem od razu po wejsciu. RSForm steruje tym sam - oddajemy mu
kontrole i stylujemy tylko wyglad, nie widocznosc.
========================================================================= */
.formResponsive .formValidation { display: inline; }
.formResponsive .formValidation:empty { display: none; }
.formResponsive .formNoError,
.formResponsive .formError {
display: block;
margin-top: .25rem;
font-size: .875rem;
font-weight: 600;
color: #B91C1C;
}
/* RSForm ukrywa komunikaty tym stylem - nie nadpisujemy go */
.formResponsive .formValidation span[style*="display: none"],
.formResponsive .formValidation span[style*="display:none"] { display: none !important; }
/* =========================================================================
3. PRZYCISKI FORMULARZA
Wlasny arkusz RSForma ma wyzsza specyficznosc, stad domyslny niebieski
i czerwony. Dorownujemy identyfikatorem formularza.
========================================================================= */
.formResponsive button.rsform-submit-button,
.formResponsive input.rsform-submit-button,
form.formResponsive button[type="submit"] {
background: var(--tc-cta) !important;
border: 1px solid var(--tc-cta) !important;
color: #fff !important;
min-height: 44px;
padding: .625rem 1.5rem;
border-radius: var(--tc-radius) !important;
font-family: "Poppins", sans-serif;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
}
.formResponsive button.rsform-submit-button:hover,
form.formResponsive button[type="submit"]:hover {
background: var(--tc-cta-hover) !important;
border-color: var(--tc-cta-hover) !important;
box-shadow: var(--tc-shadow-md);
}
.formResponsive button.rsform-reset-button,
.formResponsive input.rsform-reset-button,
form.formResponsive button[type="reset"] {
background: transparent !important;
border: 1px solid var(--tc-border-str) !important;
color: var(--tc-secondary) !important;
min-height: 44px;
padding: .625rem 1.5rem;
border-radius: var(--tc-radius) !important;
font-family: "Poppins", sans-serif;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
}
.formResponsive button.rsform-reset-button:hover,
form.formResponsive button[type="reset"]:hover {
background: var(--tc-border) !important;
color: var(--tc-primary) !important;
}
/* klauzula RODO - czytelna, bez kursywy i mikrodruku */
.formResponsive [style*="font-size: 10px"],
.formResponsive [style*="font-size:10px"],
.formResponsive [style*="font-size: 11px"] {
font-size: .8125rem !important;
font-style: normal !important;
color: var(--tc-muted) !important;
line-height: 1.55;
}
/* --- KOREKTA: .formNoError znaczy "BRAK bledu" -------------------------
Wymusilem na niej display:block, przez co komunikat "Nieprawidlowe dane"
pokazywal sie pod kazdym polem od razu. RSForm podmienia te klase na
.formError dopiero po nieudanej walidacji - tylko ta ma byc widoczna. */
.formResponsive .formNoError { display: none !important; }
.formResponsive .formError {
display: block !important;
margin-top: .25rem;
font-size: .875rem;
font-weight: 600;
color: #B91C1C;
}
.formResponsive .rsform-error input,
.formResponsive .rsform-error select,
.formResponsive .rsform-error textarea,
.formResponsive input.rsform-error,
.formResponsive select.rsform-error,
.formResponsive textarea.rsform-error {
border-color: #B91C1C;
box-shadow: 0 0 0 3px rgba(185, 28, 28, .15);
}
/* =========================================================================
POLA POMIAROWE W FORMULARZACH
RSForm wpisuje szerokosc inline: style="width: 50px; text-align:right".
Styl inline bije arkusz, stad pola wielkosci kwadratu. Jednostka [m]
ladowala w , czyli pod polem.
Rozwiazanie: wiersz pola jako flex, jednostka jako sufiks obok pola.
========================================================================= */
/* wiersz: pole + jednostka obok siebie */
.formResponsive .formControls > .formBody {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .5rem .625rem;
}
/* pola z wpisana szerokoscia inline - nadpisujemy na czytelna */
.formResponsive input.rsform-input-box[style*="width"],
.formResponsive select.rsform-select-box[style*="width"] {
width: auto !important;
min-width: 7.5rem;
max-width: 14rem;
flex: 0 0 auto;
}
/* pola bez wpisanej szerokosci - pelna szerokosc kolumny */
.formResponsive input.rsform-input-box:not([style*="width"]),
.formResponsive textarea.rsform-text-box {
flex: 1 1 100%;
min-width: 0;
}
/* jednostka jako sufiks: [m], [mm], [°C], [m2] */
.formResponsive .formDescription {
flex: 0 0 auto;
margin: 0;
padding: 0 .5rem;
border-radius: 6px;
background: var(--tc-border);
color: var(--tc-secondary);
font-size: .875rem;
font-weight: 600;
line-height: 2.2;
white-space: nowrap;
}
/* dluzsze objasnienia to nie jednostka - wracaja pod pole, bez tla */
.formResponsive .formDescription:has(> *),
.formResponsive .rsform-block-trescZapytania .formDescription,
.formResponsive .formDescription:not([class]):nth-child(n) { }
.formResponsive .rsform-text-box + .formValidation + .formDescription,
.formResponsive textarea ~ .formDescription {
flex: 1 1 100%;
background: transparent;
padding: 0;
font-weight: 400;
line-height: 1.5;
color: var(--tc-muted);
}
/* liczby wyrownane do prawej to dobra praktyka - zachowujemy,
ale dokladamy cyfry o stalej szerokosci, zeby nie skakaly */
.formResponsive input[style*="text-align:right"],
.formResponsive input[style*="text-align: right"] {
font-variant-numeric: tabular-nums;
}
/* =========================================================================
LISTA WIELOKROTNEGO WYBORU
Domyslnie waski box z paskiem przewijania, ktory ucina tekst opcji.
========================================================================= */
.formResponsive select[multiple],
.formResponsive select[size]:not([size="1"]) {
width: 100% !important;
min-height: 11rem;
max-width: none;
padding: .5rem;
flex: 1 1 100%;
line-height: 1.6;
}
.formResponsive select[multiple] option,
.formResponsive select[size]:not([size="1"]) option {
padding: .4rem .5rem;
border-radius: 4px;
white-space: normal; /* opcje nie moga byc uciete */
}
.formResponsive select[multiple] option:checked {
background: #E0F2FE linear-gradient(0deg, #E0F2FE 0%, #E0F2FE 100%);
color: var(--tc-cta);
font-weight: 600;
}
/* podpowiedz o Ctrl czytelna, nie mikrodruk w nawiasie */
.formResponsive .formControlLabel small,
.formResponsive .formControlLabel span[style*="font-size"] {
display: block;
margin-top: .15rem;
font-size: .8125rem !important;
font-weight: 400;
color: var(--tc-muted);
}
/* =========================================================================
LISTY ROZWIJANE
========================================================================= */
.formResponsive select[size="1"],
.formResponsive select:not([multiple]):not([size]) {
min-width: 9rem;
max-width: 22rem;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right .75rem center;
padding-right: 2.25rem;
appearance: none;
}
/* =========================================================================
NAGLOWKI SEKCJI FORMULARZA
========================================================================= */
.formResponsive .rsform-block h1,
.formResponsive .rsform-block h2,
.formResponsive .rsform-block h3 {
margin: var(--tc-xl) 0 var(--tc-md);
padding-bottom: .5rem;
border-bottom: 2px solid var(--tc-border);
font-size: 1.25rem;
color: var(--tc-primary);
}
/* waskie ekrany: jednostka pod polem, pole na pelna szerokosc */
@media (max-width: 575.98px) {
.formResponsive input.rsform-input-box[style*="width"],
.formResponsive select.rsform-select-box[style*="width"] {
min-width: 0;
max-width: none;
flex: 1 1 auto;
}
}
/* =========================================================================
DOPRACOWANIE POL - ROZROZNIENIE JEDNOSTKI OD OPISU
Poprzednio kazdy .formDescription dostawal wyglad "pigulki jednostki",
przez co dlugie objasnienia tez wygladaly jak jednostka. Rozrozniamy je
po kontekscie: jednostka towarzyszy polu o wpisanej szerokosci.
========================================================================= */
/* domyslnie: opis pod polem, zwykly tekst */
.formResponsive .formDescription {
flex: 1 1 100%;
background: transparent;
padding: 0;
margin: .25rem 0 0;
font-size: .8125rem;
font-weight: 400;
line-height: 1.5;
color: var(--tc-muted);
white-space: normal;
}
/* jednostka: tylko obok pola liczbowego (wyrownanego do prawej) */
.formResponsive .formBody:has(input[style*="text-align"]) .formDescription {
flex: 0 0 auto;
margin: 0;
padding: 0 .625rem;
border-radius: 6px;
background: var(--tc-border);
color: var(--tc-secondary);
font-size: .875rem;
font-weight: 600;
line-height: 2.4;
white-space: nowrap;
}
/* =========================================================================
SZEROKOSCI POL WEDLUG TYPU DANYCH
Wytyczna: pole ma sugerowac dlugosc oczekiwanej odpowiedzi.
========================================================================= */
/* liczby - waskie, wyrownane do prawej */
.formResponsive input[style*="text-align"] {
min-width: 7rem !important;
max-width: 10rem !important;
}
/* tekst z wpisana szerokoscia inline - szersze, czytelne */
.formResponsive input.rsform-input-box[style*="width"]:not([style*="text-align"]) {
min-width: 18rem !important;
max-width: 28rem !important;
}
/* =========================================================================
ETYKIETY - GWIAZDKA W LINII, PODPOWIEDZ POD SPODEM
Gwiazdka wymagalnosci ladowala w osobnym wierszu, oderwana od nazwy pola.
========================================================================= */
.formResponsive .formControlLabel {
display: block;
line-height: 1.35;
}
.formResponsive .formControlLabel br { display: none; }
.formResponsive .formControlLabel .formRequired,
.formResponsive .formControlLabel strong.formRequired {
display: inline;
margin-left: .2rem;
color: var(--tc-accent-warm);
}
/* podpowiedz w nawiasie jako osobny, mniejszy wiersz */
.formResponsive .formControlLabel span[style],
.formResponsive .formControlLabel em,
.formResponsive .formControlLabel small {
display: block;
margin-top: .1rem;
font-size: .8125rem !important;
font-weight: 400 !important;
font-style: normal !important;
color: var(--tc-muted) !important;
}
/* =========================================================================
KLAUZULA RODO
Byla rozowa kursywa w mikrodruku - trudna do przeczytania, a to
informacja prawna, ktora klient MUSI moc przeczytac.
========================================================================= */
.formResponsive .rsform-block p[style*="color"],
.formResponsive .rsform-block span[style*="color"]:not(.formRequired),
.formResponsive .rsform-block em {
color: var(--tc-muted) !important;
font-style: normal !important;
font-size: .8125rem !important;
line-height: 1.6 !important;
}
/* wyrozniamy ja jako blok informacyjny, nie przypis drobnym drukiem */
.formResponsive .rsform-block:has(> .formControls > .formBody > p[style*="color"]) {
padding: var(--tc-md);
border-left: 3px solid var(--tc-border-str);
background: #F8FAFC;
border-radius: 0 6px 6px 0;
}
/* nazwy firm w klauzuli zachowuja wyroznienie */
.formResponsive .rsform-block strong { color: var(--tc-secondary) !important; font-weight: 600; }
/* =========================================================================
CAPTCHA - pole i obrazek w jednej linii, czytelny odsylacz
========================================================================= */
.formResponsive .rsform-block-captcha .formBody { align-items: center; }
.formResponsive .rsform-captcha-box {
min-width: 8rem !important;
max-width: 10rem !important;
flex: 0 0 auto;
}
/* --- KOLEJNOSC W ETYKIECIE ---------------------------------------------
W kodzie etykieta ma uklad: nazwa,
, podpowiedz, gwiazdka.
Przez to gwiazdka ladowala w osobnym wierszu pod podpowiedzia.
Flexem ustawiamy ja tuz za nazwa, a podpowiedz spychamy nizej. */
.formResponsive .formControlLabel {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0 .2rem;
}
.formResponsive .formControlLabel .formRequired,
.formResponsive .formControlLabel strong.formRequired { order: 1; }
.formResponsive .formControlLabel span[style],
.formResponsive .formControlLabel em,
.formResponsive .formControlLabel small { order: 2; flex: 1 1 100%; }
/* =========================================================================
OZNACZENIE POZYCJI AKTYWNEJ - JEDEN SYGNAL, NIE CZTERY
Cassiopeia dodaje podkreslenie do pozycji biezacej, a my mamy juz tlo,
pogrubienie i kreske z lewej. Podkreslenie to sygnal linku, nie stanu -
przy trzech innych wskaznikach jest szumem.
========================================================================= */
.container-sidebar-left .mod-menu a,
.container-sidebar-left .mod-menu .current > a,
.container-sidebar-left .mod-menu a:hover,
.container-nav .mod-menu a,
.container-headbar .mod-menu a,
.container-topbar .mod-menu a {
text-decoration: none;
}
/* =========================================================================
LISTY ROZWIJANE W FORMULARZACH
Najdluzsza opcja ma 54 znaki - przy limicie 14rem tekst byl uciety.
Lista musi miescic swoja tresc, inaczej uzytkownik nie wie, co wybiera.
========================================================================= */
.formResponsive select.rsform-select-box,
.formResponsive select:not([multiple]) {
width: 100% !important;
min-width: 16rem !important;
max-width: 34rem !important;
flex: 1 1 auto;
text-overflow: ellipsis;
}
/* przy waskiej kolumnie lista i tak zajmie cala dostepna szerokosc */
@media (max-width: 767.98px) {
.formResponsive select.rsform-select-box,
.formResponsive select:not([multiple]) { min-width: 0 !important; max-width: none !important; }
}
/* =========================================================================
WSKAZNIK HOVER W MENU - JEDEN, NIE DWA
Cassiopeia rysuje wlasny podkreslnik pseudoelementem li::after (bialy
pasek 2px przy dolnej krawedzi). My mamy juz pigulke. Dwa sygnaly dla
jednego stanu to szum - zostawiamy pigulke, pasek wylaczamy.
========================================================================= */
.container-headbar .mod-menu > li::after,
.container-nav .mod-menu > li::after,
.container-topbar .mod-menu > li::after,
.container-headbar .mod-menu > li::before,
.container-nav .mod-menu > li::before {
content: none !important;
display: none !important;
}
/* =========================================================================
WZORZEC TRESCI - widok kategorii (45 pozycji menu) i artykulu (13)
Oba renderuja to samo: dlugi tekst techniczny z obrazami oblewanymi.
Jeden zestaw regul obsluguje oba.
========================================================================= */
/* --- rytm czytania ------------------------------------------------------ */
:is(.item-content, .com-content-article__body) > p,
.com-content-article__body > p,
.item-page > p {
margin-block: 0 var(--tc-md);
}
:is(.item-content, .com-content-article__body) > p + p { margin-top: 0; }
/* naglowki w tresci - wyrazny podzial dlugiego tekstu */
:is(.item-content, .com-content-article__body) h2,
.com-content-article__body h2 {
margin-block: var(--tc-2xl) var(--tc-md);
padding-bottom: .5rem;
border-bottom: 2px solid var(--tc-border);
clear: both; /* naglowek nie moze wpasc obok obrazu */
}
:is(.item-content, .com-content-article__body) h3,
.com-content-article__body h3 {
margin-block: var(--tc-xl) var(--tc-sm);
color: var(--tc-secondary);
clear: both;
}
/* --- obrazy oblewane tekstem -------------------------------------------- */
:is(.item-content, .com-content-article__body) img[style*="float: left"],
:is(.item-content, .com-content-article__body) img[style*="float:left"] {
float: left;
margin: .35rem var(--tc-lg) var(--tc-md) 0 !important;
}
:is(.item-content, .com-content-article__body) img[style*="float: right"],
:is(.item-content, .com-content-article__body) img[style*="float:right"] {
float: right;
margin: .35rem 0 var(--tc-md) var(--tc-lg) !important;
}
/* obraz nie moze zajac wiecej niz polowy kolumny - inaczej tekst sie sypie */
:is(.item-content, .com-content-article__body) img[style*="float"] {
max-width: min(48%, 380px);
height: auto;
border-radius: 8px;
}
/* akapit po obrazie nie wchodzi pod niego */
:is(.item-content, .com-content-article__body) p::after { content: ""; display: table; clear: none; }
/* --- zdjecia termowizyjne jako material dowodowy ------------------------ */
:is(.item-content, .com-content-article__body) img[src*="termo"],
:is(.item-content, .com-content-article__body) img[src*="/ir_"],
:is(.item-content, .com-content-article__body) img[src*="-ir."] {
border: 2px solid var(--tc-accent-warm);
box-shadow: var(--tc-shadow-md);
}
/* --- listy -------------------------------------------------------------- */
:is(.item-content, .com-content-article__body) ul,
.com-content-article__body ul {
margin-block: var(--tc-md) var(--tc-lg);
padding-left: 0;
list-style: none;
}
/* UWAGA: `list-style: none` wyzej dotyczy OBU kontenerow, wiec wlasny znacznik
tez musi. Wczesniej ::before mial tylko :is(.item-content, .com-content-article__body) (widok listy kategorii),
a widok pojedynczego artykulu (.com-content-article__body) zostawal bez
punktorow w ogole - dotyczylo 26 z 83 opublikowanych artykulow. */
:is(.item-content, .com-content-article__body) ul > li,
.com-content-article__body ul > li {
position: relative;
padding-left: 1.5rem;
margin-bottom: .4rem;
}
:is(.item-content, .com-content-article__body) ul > li::before,
.com-content-article__body ul > li::before {
content: "";
position: absolute;
left: .2rem; top: .62em;
width: 6px; height: 6px;
border-radius: 2px;
background: var(--tc-cta);
}
:is(.item-content, .com-content-article__body) ol,
.com-content-article__body ol { margin-block: var(--tc-md) var(--tc-lg); padding-left: 1.35rem; }
:is(.item-content, .com-content-article__body) ol > li,
.com-content-article__body ol > li { margin-bottom: .4rem; }
/* --- zdania wyroznione (wysrodkowane, kolorowe) jako wezwanie ----------- */
:is(.item-content, .com-content-article__body) p[style*="text-align: center"] strong,
:is(.item-content, .com-content-article__body) p[style*="text-align:center"] strong,
:is(.item-content, .com-content-article__body) p[style*="center"] span[style*="color"] {
display: inline-block;
padding: .5rem 1rem;
border-radius: var(--tc-radius);
background: #FEF3C7;
color: #92400E !important;
font-family: "Poppins", sans-serif;
font-size: 1.0625rem;
line-height: 1.4;
}
/* --- widok kategorii z wieloma wpisami ---------------------------------- */
.com-content-category-blog__items { display: grid; gap: var(--tc-lg); }
.com-content-category-blog__item + .com-content-category-blog__item { margin-top: 0; }
.com-content-category-blog__item .page-header h2 a {
color: var(--tc-primary);
text-decoration: none;
}
.com-content-category-blog__item .page-header h2 a:hover { color: var(--tc-cta); }
/* przycisk "czytaj dalej" */
.readmore { margin-top: var(--tc-md); clear: both; }
.readmore .btn {
background: transparent;
border: 1px solid var(--tc-cta);
color: var(--tc-cta);
}
.readmore .btn:hover { background: var(--tc-cta); color: #fff; }
/* --- metadane wpisu (data, autor, kategoria) ---------------------------- */
.article-info {
display: flex; flex-wrap: wrap; gap: .35rem var(--tc-md);
margin: 0 0 var(--tc-md);
padding: 0;
font-size: .8125rem;
color: var(--tc-muted);
list-style: none;
}
.article-info dd { margin: 0; }
.article-info__term { font-weight: 600; }
/* --- tabele techniczne -------------------------------------------------- */
:is(.item-content, .com-content-article__body) table { clear: both; }
:is(.item-content, .com-content-article__body) table caption {
caption-side: top;
padding-bottom: .5rem;
font-weight: 600;
color: var(--tc-primary);
text-align: left;
}
/* --- nawigacja miedzy artykulami ---------------------------------------- */
.pagenavigation {
display: flex; flex-wrap: wrap; gap: var(--tc-sm);
margin-top: var(--tc-2xl);
padding-top: var(--tc-md);
border-top: 1px solid var(--tc-border);
}
.pagenavigation .btn { flex: 0 1 auto; }
/* =========================================================================
WASKIE EKRANY - oblewanie nie ma sensu ponizej ~700 px
========================================================================= */
@media (max-width: 700px) {
:is(.item-content, .com-content-article__body) img[style*="float"] {
float: none !important;
display: block;
max-width: 100%;
margin: var(--tc-md) 0 !important;
}
:is(.item-content, .com-content-article__body) h2 { margin-top: var(--tc-xl); }
}
/* --- MIARA WIERSZA NA KONTENERZE ---------------------------------------
Ograniczenie szerokosci na akapicie sumowalo sie z oblewaniem obrazu
i tekst schodzil do ~40 znakow. Miare nakladamy na kolumne tresci. */
:is(.item-content, .com-content-article__body),
.com-content-article__body,
.item-page > *:not(.page-header) {
max-width: 74ch;
}
/* w blogu kategorii kolumna jest juz waska - bez dodatkowego limitu */
.com-content-category-blog__item :is(.item-content, .com-content-article__body) { max-width: none; }
/* akapity i listy wypelniaja dostepna szerokosc */
:is(.item-content, .com-content-article__body) p,
:is(.item-content, .com-content-article__body) li,
.com-content-article__body p { max-width: none; }
/* poza trescia artykulu miara nadal obowiazuje */
.main-bottom p, .main-bottom li { max-width: 68ch; }
/* =========================================================================
PROPORCJE SIATKI - TRESC POTRZEBUJE MIEJSCA
Cassiopeia dzieli obszar glowny na 4 rowne scieżki po 274 px:
pasek lewy zajmuje 1, tresc 2, pasek prawy 1. Kolumna tresci wychodzila
580 px, a po odjeciu oblewanego obrazu tekstowi zostawalo ~40 znakow
w wierszu (zalecane 65-75).
Zmieniamy SAME SZEROKOSCI scieżek - przypisania Cassiopei zostaja.
========================================================================= */
@media (min-width: 992px) {
.site-grid {
grid-template-columns:
[full-start] 0 [main-start] 250px 1fr 1fr 265px [main-end] 0 [full-end];
}
}
/* obraz oblewany nie moze zjadac wiecej niz ~1/3 kolumny */
:is(.item-content, .com-content-article__body) img[style*="float"] { max-width: min(34%, 300px); }
/* =========================================================================
OBLEWANIE ZALEZNE OD SZEROKOSCI KOLUMNY, NIE OKNA
Oblewany obraz w waskiej kolumnie zawsze sciesnia tekst. Wiazemy wiec
zachowanie z realna szerokoscia kolumny tresci (zapytanie kontenerowe),
a nie z szerokoscia okna - bo ta sama kolumna ma inna szerokosc
w zaleznosci od tego, ile paskow bocznych jest widocznych.
========================================================================= */
.container-component { container-type: inline-size; container-name: tresc; }
/* ponizej 700 px kolumny obraz przestaje oblewac - idzie na cala szerokosc */
@container tresc (max-width: 700px) {
:is(.item-content, .com-content-article__body) img[style*="float"] {
float: none !important;
display: block;
max-width: 100%;
margin: var(--tc-md) auto !important;
}
}
/* trzy kolumny potrzebuja miejsca - ponizej 1200 px prawy pasek schodzi pod tresc */
@media (max-width: 1199.98px) {
.site-grid { grid-template-columns: [full-start] 0 [main-start] 250px 1fr 1fr [main-end] 0 [full-end]; }
.container-sidebar-right { grid-column: 2 / 5; }
.container-sidebar-right > * { max-width: 100%; }
}
/* --- OBLEWANIE PRZYWROCONE W WASKIEJ KOLUMNIE --------------------------
Kolumna tresci ma 613 px. Zeby tekstowi obok obrazu zostalo 45+ znakow
(~360 px), obraz moze miec najwyzej ~220 px. Prog zapytania kontenerowego
obnizamy do 560 px - ponizej tej szerokosci oblewanie nie ma juz sensu,
bo tekst schodzi do ~35 znakow i rozjezdza sie na drabinke. */
@container tresc (min-width: 560px) {
:is(.item-content, .com-content-article__body) img[style*="float: left"],
:is(.item-content, .com-content-article__body) img[style*="float:left"] {
float: left !important;
margin: .35rem var(--tc-lg) var(--tc-sm) 0 !important;
}
:is(.item-content, .com-content-article__body) img[style*="float: right"],
:is(.item-content, .com-content-article__body) img[style*="float:right"] {
float: right !important;
margin: .35rem 0 var(--tc-sm) var(--tc-lg) !important;
}
:is(.item-content, .com-content-article__body) img[style*="float"] {
display: inline;
max-width: min(35%, 220px) !important;
}
}
@container tresc (max-width: 559.98px) {
:is(.item-content, .com-content-article__body) img[style*="float"] {
float: none !important;
display: block;
max-width: 100%;
margin: var(--tc-md) auto !important;
}
}
/* =========================================================================
TYTUL STRONY: JEDNA KRESKA ZAMIAST DWOCH
Naglowek pozycji na listach kategorii siedzi w :is(.item-content, .com-content-article__body) .page-header h2,
wiec lapal dwie reguly naraz: wlasna kreske z ":is(.item-content, .com-content-article__body) h2" (sekcja
"naglowki w tresci") i kreske kontenera ".page-header". Wychodzily dwie
linie rozdzielone paddingiem. Zostaje kreska .page-header - obejmuje cala
szerokosc naglowka, a nie tylko tekst.
========================================================================= */
:is(.item-content, .com-content-article__body) .page-header h2,
.com-content-article__body .page-header h2 {
border-bottom: 0;
padding-bottom: 0;
}
/* =========================================================================
TRESC WYROWNANA DO NAGLOWKA
Siatka zaczyna sie od sciezki [full-start] o zerowej szerokosci, po ktorej
idzie gap 32px. Przez to obszar glowny zaczynal sie 32px na prawo od logo
i konczyl 32px na lewo od wyszukiwarki - na kazdej szerokosci ekranu.
Zerujemy boczny padding samej siatki tam, gdzie jest ona wielokolumnowa;
role odstepu od krawedzi przejmuje wtedy gap. Ponizej 768px siatka jest
blokiem (bez gapu), wiec padding musi zostac.
========================================================================= */
@media (min-width: 768px) {
.site-grid { padding-inline: 0; }
}
/* =========================================================================
BANER top-a NA WASKICH EKRANACH
Banery maja 960x240, czyli proporcje 4,65:1. Skalowane proporcjonalnie
schodzily przy 390px do 63px wysokosci, a podpis (position:absolute,
staly font 16px) rosl do 109px i ZAKRYWAL caly obraz - 174% jego wysokosci.
Rozwiazanie: staly kadr o sensownej wysokosci, obraz przyciety przez
object-fit i wysrodkowany, podpis zsuniety POD obraz.
Dotyczy wylacznie top-a - paski boczne (190x127) i bottom-a maja zdrowe
proporcje i zostaja bez zmian.
========================================================================= */
@media (max-width: 767.98px) {
/* pelna szerokosc karty - znosimy paddingi lancucha nad obrazem */
.container-top-a { padding-inline: 0; }
.container-top-a .card { overflow: hidden; }
.container-top-a .card-body { padding: 0; }
/* staly kadr zamiast proporcji zrodla; JS wpisuje height inline, stad !important */
.container-top-a .djslider {
height: 50vw !important;
min-height: 150px;
max-height: 200px;
max-width: none !important;
}
.container-top-a .slider-container,
.container-top-a .djslider-in,
.container-top-a .djslider-in > li {
height: 100% !important;
overflow: visible !important;
}
/* obraz wypelnia kadr; nadmiar CSS obcina rowno z obu stron */
.container-top-a img.dj-image {
width: 100% !important;
height: 100% !important;
object-fit: cover;
object-position: center;
border-radius: 0;
}
/* podpis POD obrazem. Pasek ma STALA wysokosc rowna rezerwie w kontenerze,
wiec nie ma jak wyjsc poza karte niezaleznie od dlugosci tytulu. */
.container-top-a .djslider-loader { padding-bottom: 4rem !important; }
.container-top-a .slide-desc {
top: 100% !important;
bottom: auto !important;
left: 0 !important;
width: 100% !important;
height: 4rem !important;
display: flex;
align-items: center;
overflow: hidden;
background: var(--tc-primary);
}
.container-top-a .slide-desc,
.container-top-a .slide-desc * { color: #fff; text-align: left; }
/* wlasna warstwa tla modulu jest zbedna - tlo siedzi na .slide-desc */
.container-top-a .slide-desc-bg { display: none !important; }
.container-top-a .slide-desc-in { padding: 0 !important; width: 100%; }
.container-top-a .slide-desc-text { padding: var(--tc-sm) var(--tc-md) !important; }
/* tytul slajdu mial 24px - w tym kadrze schodzi do 17px i najwyzej 2 wierszy */
.container-top-a .slide-title {
font-size: 1.0625rem !important;
line-height: 1.3;
font-weight: 600;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
}
/* =========================================================================
PRZYCISK ROZWIJANIA PODSTRON W PASKU BOCZNYM
Byla sama strzalka 24x16 px pod linkiem - bez etykiety (nie wiadomo, po co),
bez tla i ponizej minimum dotykowego 44x44. Etykieta dla czytnikow ekranu
szla po angielsku ("More about: ..."), bo pl-PL nie definiuje tej stalej;
tlumaczenie dodane w language/overrides/pl-PL.override.ini.
Teraz: przycisk z widocznym tekstem, ktory mowi CO ZROBI, i strzalka
obracajaca sie o 180 stopni przy rozwinieciu (podwojny sygnal stanu).
========================================================================= */
.sidebar-left .mod-menu__toggle-sub {
display: inline-flex;
align-items: center;
gap: var(--tc-sm);
min-height: 44px;
padding: var(--tc-xs) var(--tc-md);
margin-top: var(--tc-xs);
background: transparent;
border: 1px solid var(--tc-border);
border-radius: 8px;
color: var(--tc-cta);
font-family: inherit;
font-size: 1rem;
font-weight: 600;
line-height: 1;
cursor: pointer;
transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}
/* tekst mowi o akcji i zmienia sie razem ze stanem aria-expanded */
.sidebar-left .mod-menu__toggle-sub::after { content: "Rozwiń"; }
.sidebar-left .mod-menu__toggle-sub[aria-expanded="true"]::after { content: "Zwiń"; }
.sidebar-left .mod-menu__toggle-sub [class*="icon-chevron"] {
transition: transform 200ms ease;
}
.sidebar-left .mod-menu__toggle-sub[aria-expanded="true"] [class*="icon-chevron"] {
transform: rotate(180deg);
}
/* stan rozwiniety widoczny BEZ najechania - na dotyku hover nie istnieje */
.sidebar-left .mod-menu__toggle-sub[aria-expanded="true"] {
background: var(--tc-cta);
border-color: var(--tc-cta);
color: #fff;
}
/* hover tylko tam, gdzie kursor faktycznie jest - inaczej na dotyku
podswietlenie potrafi zostac przyklejone po tapnieciu */
@media (hover: hover) {
.sidebar-left .mod-menu__toggle-sub:hover {
background: var(--tc-cta);
border-color: var(--tc-cta);
color: #fff;
}
}
.sidebar-left .mod-menu__toggle-sub:focus-visible {
outline: 3px solid var(--tc-cta);
outline-offset: 2px;
}
/* odstep miedzy celami dotykowymi - link i przycisk nie moga sie stykac */
.sidebar-left .mod-menu > li > a { display: block; padding-block: var(--tc-xs); }
.sidebar-left .mod-menu__sub { margin-top: var(--tc-sm); }
@media (prefers-reduced-motion: reduce) {
.sidebar-left .mod-menu__toggle-sub,
.sidebar-left .mod-menu__toggle-sub [class*="icon-chevron"] { transition: none; }
}
/* =========================================================================
BANER BLOGA W MODULE TRESCI (main-bottom)
Na stronie Blower Door baner "Badania termowizyjne" siedzial w tym samym
module co przyciski CTA, z ZEROWYM odstepem od nich (zmierzone: 0 px)
i wysrodkowany, podczas gdy przyciski sa do lewej - obraz zaczynal sie
178 px na prawo od nich. Stad wrazenie rozjechania.
Wyrownujemy go do lewej krawedzi przyciskow i dajemy oddech.
Selektor celuje wylacznie w akapit, ktorego jedyna trescia jest baner
z /images/banners/ - zwykle akapity ze zdjeciami zostaja nietkniete.
========================================================================= */
.main-bottom .mod-custom p:has(> a > img[src*="/images/banners/"]),
.container-component .mod-custom p:has(> a > img[src*="/images/banners/"]) {
margin-top: var(--tc-xl) !important;
text-align: left !important;
}
/* =========================================================================
SZUKAJKA W MENU MOBILNYM - NA PELNA SZEROKOSC
Formularz zajmowal 308 px w kontenerze 358 px, bo wrapper .mod-finder__search
zwezal sie do tresci. Zostawalo 49 px pustego po prawej, przez co pole
wygladalo na wciete i nie siegalo krawedzi menu.
========================================================================= */
@media (max-width: 767.98px) {
.container-search search,
.container-search .mod-finder,
.container-search .mod-finder__search { width: 100%; }
/* Awesomplete opakowuje pole w
i to ON jest
elementem flex - bez tego samo pole nie ma jak urosnac. */
.container-search .mod-finder__search > .awesomplete {
flex: 1 1 auto;
min-width: 0;
}
.container-search .mod-finder__search > .awesomplete > .form-control,
.container-search .mod-finder__search > .form-control {
width: 100%;
flex: 1 1 auto;
min-width: 0;
}
}
/* =========================================================================
BANER BLOGA W PASKU BOCZNYM - BEZ KAFELKA
Sam obraz nie potrzebuje ramki karty; kafelek dodawal tlo, obramowanie
i podwojny padding wokol grafiki 211x58. Zdejmujemy chrom karty.
Selektor strukturalny: karta w pasku bocznym BEZ naglowka, ktorej jedyna
trescia jest obraz - nie trafia w menu ani w moduly z tytulem.
Obrazu NIE rozciagamy: plik ma 211x58 px, wiec skalowanie do szerokosci
kolumny (250 px) tylko by go rozmylo.
========================================================================= */
.sidebar-left.card:not(:has(.card-header)):has(.card-body .mod-custom img) {
background: none;
border: 0;
box-shadow: none;
}
.sidebar-left.card:not(:has(.card-header)):has(.card-body .mod-custom img) .card-body {
padding: 0 !important;
}
.sidebar-left.card:not(:has(.card-header)):has(.card-body .mod-custom img) p {
margin: 0;
text-align: center;
}
.sidebar-left.card:not(:has(.card-header)):has(.card-body .mod-custom img) img {
border-radius: 6px;
}
/* =========================================================================
SLIDER top-a BEZ CHROMU KARTY (od 768 px w gore)
Karta miala 1192 px, a baner w srodku 960 px - twardy limit wpisany inline
z !important przez sam modul, zgodny z natywna rozdzielczoscia pliku
(940x202). Ramka nie opinala wiec zawartosci: po kazdej stronie zostawalo
116 px pustej karty. Obramowanie, ktore nie obejmuje tego, co w nim jest,
czyta sie jako przypadkowe. Zdejmujemy chrom - baner definiuje sie sam.
Ponizej 768 px NIE ruszamy: tam baner wypelnia karte od krawedzi do
krawedzi, wiec zaokraglony rog dziala jak maska na obrazie, nie jak pusta
ramka - opina zawartosc i sie broni.
W pozycji top-a stoja wylacznie moduly slidera (129, 236, 321, 322).
========================================================================= */
@media (min-width: 768px) {
.container-top-a .card {
background: none;
border: 0;
border-radius: 0;
box-shadow: none;
}
.container-top-a .card-body { padding: 0; }
}
/* =========================================================================
SIATKA STRONY MA ZAWSZE WYPELNIAC DOSTEPNA SZEROKOSC
Blad ukladu, ktory dawal rozne szerokosci na roznych podstronach.
`body.site` to flex w kolumnie, a `.site-grid` dostal `margin-inline: auto`
(zeby sie wysrodkowac). W flexboxie AUTO-MARGINESY NA OSI POPRZECZNEJ
WYLACZAJA ROZCIAGANIE - element przestaje sie stretchowac i dopasowuje
szerokosc do TRESCI, a `max-width` tylko ja przycina.
Skutek: strony z duza zawartoscia (slider 960px + oba paski + odstepy)
przekraczaly 1320px i trafialy w limit, wiec wygladaly poprawnie.
Strony ubogie w tresc - FAQ, o-firmie, referencje, dyplomy, dokumenty,
dane kontaktowe, mam-pytanie - zwijaly sie do 1088px, czyli byly wsuniete
o 116px z kazdej strony wzgledem naglowka.
`width: 100%` przywraca wypelnianie; `max-width` i wysrodkowanie zostaja.
========================================================================= */
.site-grid { width: 100%; }