/* =============================================================
Semarti, poprawka koloru naglowka (Etap 3C)
Blocksy renderuje aktywny link menu, hover menu, ikone wyszukiwarki
i panel mobilny (#offcanvas, ktory nosi tez klase .ct-header) przez
CSS custom properties --theme-palette-color-1/-2, ustawione globalnie
na :root z Blocksy Customizera (Paleta kolorow motywu) na stara,
fioletowa wartosc (#5B38ED, #4928cf), niezalezna od plikow Etapu 3B.
Zamiast zmieniac opcje Customizera (co wplynelo by tez na Elementor
"Global Color 1" na stronie O nas i na linki breadcrumbs WooCommerce,
poza zakresem tego etapu), nadpisujemy te dwie zmienne WYLACZNIE
w obrebie .ct-header. Poniewaz deklaracja na elemencie zawsze wygrywa
z dziedziczeniem z :root, to bezpiecznie i w pelni pokrywa naglowek
(desktop, mobilny panel offcanvas, ikone szukania), nie dotykajac
stopki, tresci stron ani WooCommerce.
============================================================= */
.ct-header {
--theme-palette-color-1: #B88442; /* karmel/zloto, zamiast fioletu */
--theme-palette-color-2: #9F6F35; /* hover karmelu */
--theme-link-hover-color: #B88442;
--theme-link-active-color: #B88442;
}
/* Zabezpieczenie: computed check pokazal, ze --theme-link-hover-color dla
aktywnej/hover pozycji menu bywa w Blocksy "zamrozone" na konkretny HEX
w bardziej zagniezdzonej regule niz powyzszy override zmiennych, wiec
dodatkowo nadpisujemy sam kolor wprost, z !important, tylko w obrebie
naglowka (desktop i panel mobilny #offcanvas, oba .ct-header). */
.ct-header a:hover,
.ct-header nav[class*="menu"] li[class*="current-menu-"] > .ct-menu-link {
color: #B88442 !important;
}
/* =============================================================
Etap 4: dopracowanie headera pod palete Semarti.
============================================================= */
/* Logo bylo bardzo male (52px) dla delikatnego, cienkolinijnego
znaku, przez co ledwo bylo widoczne. Docelowo wieksze, bez zmiany
samego pliku logo. Uwaga z Etapu 7A.1: ta regula w praktyce nigdy
nie dzialala, bo Blocksy ma wlasna, bardziej specyficzna regule w
wygenerowanym global.css ([data-header*="type-1"] .ct-header
[data-id="logo"] .site-logo-container), ktora zawsze wygrywala i
logo realnie renderowalo sie na 52px od Etapu 4. Naprawione przez
dodanie prefiksu header#header, co podnosi specificity ponad
regule Blocksy. Potwierdzone bezposrednim odczytem dopasowanych
regul CSS w przegladarce przed poprawka. */
header#header.ct-header [data-id="logo"] .site-logo-container {
--logo-max-height: 60px;
}
/* Napis "SeMarti" dziedziczyl domyslny, chlodny, szary kolor
Blocksy (#4D5D6D), niepasujacy do cieplej palety Semarti.
Zamieniony na ciemny grafit z palety (--semarti-text). Od Etapu
7A.1 caly ten blok tekstowy jest ukryty (patrz sekcja Etap 7A.1
nizej), regula koloru zostaje w pliku na wypadek przywrocenia
napisu w przyszlosci, bez efektu wizualnego przy ukrytym elemencie. */
.ct-header .site-title,
.ct-header .site-title a {
color: #1F1D1A !important;
}
/* Ikona wyszukiwarki: ten sam chlodny szary jak wyzej, teraz
ciemny grafit w spoczynku i karmel na hover/focus, spojnie
z reszta interaktywnych elementow headera. */
.ct-header .ct-header-search svg {
fill: #1F1D1A;
transition: fill .2s ease;
}
.ct-header .ct-header-search:hover svg,
.ct-header .ct-header-search:focus-visible svg {
fill: #B88442;
}
/* =============================================================
Etap 7A: nowoczesny header i nawigacja.
Wszystko w obrebie .ct-header (desktop) i #offcanvas (panel
mobilny, ktory tez nosi klase .ct-header), bez zmian w
Customizerze i bez zmian w ukladzie wierszy/kolumn konstruktora
headera Blocksy. Struktura menu Produkty zostala splaszczona z
dwupoziomowego flyoutu do jednego, plaskiego dropdownu (8 pozycji)
przez WP-CLI (wp menu item update --parent-id), opisane w
raporcie tego etapu, nie w tym pliku.
============================================================= */
/* Tlo headera: cieply krem zamiast czystej bieli, subtelny dolny
border i bardzo lekki cien, zamiast plaskiego, pustego paska. */
header#header.ct-header {
background-color: #FAF7F1;
border-bottom: 1px solid #E3D6C4;
box-shadow: 0 6px 20px -18px rgba(31, 29, 26, 0.35);
}
/* Linki menu gornego poziomu: troche wieksza waga, wlasny padding
i zaokraglony, miekki hover z tlem, zamiast samej zmiany koloru
tekstu na goly link. Selektor celuje wylacznie w linki gornego
poziomu (Strona glowna, Produkty, Na zamowienie, O nas, Kontakt),
nie w pozycje wewnatrz dropdownu Produkty.
Poprawka z Etapu 7A.1: natywny link Blocksy (.ct-menu-link) ma
domyslnie display:flex i height:100%, wiec dziedziczy pelna
wysokosc wiersza menu. Przy aktywnym/hover tle w Etapie 7A dawalo
to wysoki, pionowy prostokat zamiast eleganckiej pigulki (dokladnie
problem zgloszony przez wlasciciela na przykladzie Produkty).
Naprawione tak samo jak przy CTA w Etapie 7A: wlasna wysokosc
(auto) i wysrodkowanie w wierszu, niezaleznie od wysokosci headera. */
/* Odstep miedzy pozycjami gornego poziomu: bez tego sasiednie
"pigulki" hover/aktywna stykaly sie krawedziami i wygladaly jak
jedna, zlana plama tla zamiast dwoch osobnych pozycji menu
(zgloszony problem: tla hover "zlewaja sie ze soba"). ul.menu jest
flex (potwierdzone computed style), wiec zwykly column-gap
wystarcza, bez zmiany kolejnosci czy szerokosci pozycji. */
header#header.ct-header #header-menu-1 > ul.menu {
column-gap: 6px;
}
header#header.ct-header #header-menu-1 > ul.menu > li.menu-item > a.ct-menu-link {
display: inline-flex;
align-items: center;
height: auto !important;
align-self: center;
font-size: 15px;
font-weight: 600;
padding: 8px 14px;
border-radius: 8px;
transition: background-color .2s ease, color .2s ease;
}
header#header.ct-header #header-menu-1 > ul.menu > li.menu-item > a.ct-menu-link:hover {
background-color: rgba(184, 132, 66, 0.1);
}
/* Aktywna pozycja: oprocz ciepszego tla dostaje tez cienka, dolna
kreske, zeby "biezaca strona" byla czytelnie odrozniona od zwyklego
stanu hover, nie tylko nieznacznie inna wartoscia przezroczystosci
tego samego tla (zgloszony problem: hover i active wygladaly
prawie identycznie). */
header#header.ct-header #header-menu-1 > ul.menu > li.current-menu-item > a.ct-menu-link {
background-color: rgba(184, 132, 66, 0.16);
box-shadow: inset 0 -2px 0 0 #B88442;
}
/* CTA "Na zamowienie" wypchniete na sam koniec wiersza menu przez
flex order, bez zmiany kolejnosci pozycji w bazie. ul.menu jest
naturalnym kontenerem flex (potwierdzone odczytem computed style),
wiec wysoka wartosc order przesuwa ten jeden element na koniec,
za O nas i Kontakt, a wyszukiwarka (poza ul.menu, dalszy sasiad w
tej samej kolumnie headera) zostaje naturalnie ostatnia w calym
ukladzie, dokladnie tak jak w docelowym ukladzie z polecenia. */
header#header.ct-header #header-menu-1 > ul.menu > li.menu-item-3294 {
order: 99;
}
/* Dropdown Produkty, Etap 7A.1: kompaktowe mini mega menu, siatka
kart zamiast zwyklej, wysokiej, pionowej listy linkow z Etapu 7A.
Blocksy (wersja bez platnego rozszerzenia Companion Pro) nie ma
wlasnego, gotowego mechanizmu mega menu z kolumnami w edytorze
menu WordPress, wiec efekt osiagnieto najbezpieczniejszym
sposobem: wykorzystaniem istniejacego, plaskiego submenu (8
pozycji ze splaszczenia z Etapu 7A) i ostylowaniem go jako CSS
grid, bez zadnego pluginu i bez JS. Cieple tlo, subtelny border,
wieksze zaokraglenie, cien, siatka 3 kolumny na desktopie. */
header#header.ct-header #header-menu-1 .sub-menu {
background-color: #FFFDF8;
border: 1px solid #E3D6C4;
border-radius: 16px;
box-shadow: 0 24px 48px -20px rgba(31, 29, 26, 0.28);
padding: 14px;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 4px;
width: 600px;
}
header#header.ct-header #header-menu-1 .sub-menu li.menu-item > a.ct-menu-link {
display: block;
color: #1F1D1A;
font-weight: 600;
font-size: 14px;
line-height: 1.35;
padding: 13px 14px;
border-radius: 10px;
transition: background-color .2s ease;
}
/* Kolor tekstu na hover (karmel) pochodzi juz z ogolnej reguly
.ct-header a:hover wyzej w tym pliku, tu dodajemy tylko cieple
tlo pod spodem, zeby cala karta wygladala jak wybrana pozycja,
nie tylko sam tekst. */
header#header.ct-header #header-menu-1 .sub-menu li.menu-item > a.ct-menu-link:hover {
background-color: rgba(184, 132, 66, 0.12);
}
/* CTA "Na zamowienie": wyroznione jako elegancki przycisk (ciemny
grafit, jasny tekst, zaokraglona pigulka), nie zwykly link
tekstowy, ale bez krzykliwosci i bez fioletu. Wlasciwosci
display/align-items/height/align-self dziedziczy juz z ogolnej
reguly linkow gornego poziomu wyzej (ten sam fix na wysokosc),
tu zostaja tylko wlasciwosci unikalne dla przycisku. Kolor tekstu
na hover ma !important, bo bez tego globalna regula .ct-header
a:hover (karmel) zmienilaby tekst na przycisku na trudno czytelny
na ciemnym tle. */
header#header.ct-header #header-menu-1 > ul.menu > li.menu-item-3294 > a.ct-menu-link {
background-color: #2A2520;
color: #FFFDF8 !important;
padding: 10px 22px;
border-radius: 999px;
font-weight: 700;
}
header#header.ct-header #header-menu-1 > ul.menu > li.menu-item-3294 > a.ct-menu-link:hover {
background-color: #3A3129;
color: #FFFDF8 !important;
}
/* Wyszukiwarka: maly, spojny, okragly przycisk z cieplym tlem,
zamiast surowej ikony na golym tle. Fill ikony na hover (bialy)
nadpisuje wczesniejsza regule z Etapu 4 (karmel) dzieki kolejnosci
w pliku, bo teraz tlo samo w sobie staje sie karmelowe. */
header#header.ct-header .ct-header-search {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #F1E8D9;
transition: background-color .2s ease;
}
header#header.ct-header .ct-header-search:hover,
header#header.ct-header .ct-header-search:focus-visible {
background-color: #B88442;
}
header#header.ct-header .ct-header-search:hover svg,
header#header.ct-header .ct-header-search:focus-visible svg {
fill: #FFFDF8;
}
/* Panel mobilny (offcanvas): CTA "Na zamowienie" dostaje ten sam
jezyk wizualny co na desktopie (pigulka, ciemne tlo, jasny
tekst), zeby byla wyraznie widoczna rowniez na mobile. */
#offcanvas.ct-header .mobile-menu .menu-item-3294 > a.ct-menu-link {
display: inline-block;
background-color: #2A2520;
color: #FFFDF8 !important;
padding: 10px 20px;
border-radius: 999px;
font-weight: 700;
margin-top: 6px;
}
/* Panel mobilny: drobna korekta odstepow w rozwinietym dropdownzie
Produkty (8 splaszczonych pozycji), zeby lista byla przewiewna
i czytelna, bez psucia dzialania natywnego mechanizmu Blocksy. */
#offcanvas.ct-header .mobile-menu .sub-menu li.menu-item > a.ct-menu-link {
font-size: 15px;
padding: 10px 0;
}
/* =============================================================
Etap 7A.1: hotfix ukladu headera (wysokosc, logo, CTA, mini
mega menu Produkty). Naprawia problemy zglaszane po Etapie 7A:
header za wysoki, aktywne tlo Produkty jak wysoki blok, dropdown
jak zwykla, luzna lista, CTA nie dosc po prawej. Wszystko nadal
w obrebie .ct-header / header#header, bez zmian w Customizerze
i bez zmian ukladu wierszy/kolumn konstruktora Blocksy. Poprawki
specificity dla logo i dla linkow gornego poziomu, oraz CTA
order, sa scalone w istniejace regule wyzej w tym pliku, nie tu.
============================================================= */
/* Wysokosc wiersza headera: Blocksy ustawia ja przez zmienna CSS
--height na elemencie [data-row="middle"], wygenerowana z
Customizera (global.css, wartosc 120px, selektor z prefiksem
[data-header*="type-1"] o wyzszym specificity niz prosta klasa
.ct-header). Nadpisana tu z prefiksem header#header, co gwarantuje
wygrana. Docelowa wysokosc okolo 80px, w orientacyjnym zakresie
72 do 88px z polecenia, dopasowana do wiekszego logo bez napisu. */
header#header.ct-header [data-row*="middle"] {
--height: 80px;
}
/* Logo po lewej: wlasciciel chce zostac sam znak graficzny, bez
napisu "SeMarti" pod spodem. Napis jest osobnym elementem HTML
(.site-title-container), nie czescia pliku logo (potwierdzone w
DOM: logo to ![]()
w .site-logo-container, napis to oddzielny
obok), wiec da sie go bezpiecznie ukryc
samym CSS, bez podmiany ani optymalizacji pliku logo. */
header#header.ct-header .site-title-container {
display: none;
}
/* Po ukryciu napisu kolumna z logo (.site-branding, flex-column)
ma tylko jedno dziecko. Wysrodkowanie w pionie w nizszym wierszu
headera, zeby logo nie "przywieralo" do gory. */
header#header.ct-header .site-branding {
display: flex;
justify-content: center;
}
/* =============================================================
Etap 11: pasek CTA "Dla firm" w mini mega menu Produkty.
Dodana dziewiata pozycja menu (dziecko Produkty, ostatnia w
kolejnosci), wyroznona wizualnie jako pelnoszerokosciowy pasek
pod siatka 8 kategorii, nie jako dziewiata karta kategorii. Bez
opisu pod tytulem (domyslny walker WordPressa nie renderuje opisu
pozycji menu, potwierdzone w Etapie 7A.1), zgodnie z dopuszczonym
przez polecenie fallbackiem: sam tytul plus mocne wyroznienie
wizualne zamiast dwuwierszowego tekstu.
============================================================= */
header#header.ct-header #header-menu-1 .sub-menu li.menu-item-3298 {
grid-column: 1 / -1;
}
header#header.ct-header #header-menu-1 .sub-menu li.menu-item-3298 > a.ct-menu-link {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 4px;
padding: 13px 14px;
background-color: #2A2520;
color: #FFFDF8 !important;
font-weight: 700;
border-radius: 10px;
}
header#header.ct-header #header-menu-1 .sub-menu li.menu-item-3298 > a.ct-menu-link::after {
content: "\2192";
}
header#header.ct-header #header-menu-1 .sub-menu li.menu-item-3298 > a.ct-menu-link:hover {
background-color: #3A3129;
color: #FFFDF8 !important;
}
/* To samo wyroznienie w panelu mobilnym, w rozwinietym Produkty. */
#offcanvas.ct-header .mobile-menu .menu-item-3298 > a.ct-menu-link {
display: flex;
align-items: center;
justify-content: space-between;
background-color: rgba(184, 132, 66, 0.14);
border-radius: 8px;
padding: 10px 14px;
margin-top: 4px;
font-weight: 700;
}
#offcanvas.ct-header .mobile-menu .menu-item-3298 > a.ct-menu-link::after {
content: "\2192";
color: #B88442;
}