/* ============================================================ 420market.pl — motyw „market420" v0.1.0 (Fala 1) Port design systemu z prototypu (prototyp/styl.css) na markup WordPressa/WooCommerce. Tokeny :root i nazwy komponentów 1:1 z prototypem; adaptacje WP/Woo i wtyczek na końcu pliku. Zasady nadrzędne: lekkość (zero webfontów, zero JS-frameworków), mobile-first, kwadratowe kafle produktów (stałe proporcje = zero CLS). ============================================================ */ :root{ --zielen:#262624; /* główny ciemny marki */ --zielen-2:#3b3b38; /* hover / gradient ciemnego */ --zielen-tlo:#e6faf8; /* pastelowe tło teal */ --akcent:#00CDBF; /* teal 420market: CTA, akcenty */ --akcent-2:#00b3a7; --akcent-tekst:#00857c; --tusz:#262624; /* tekst główny */ --tusz-2:#4b5563; /* tekst drugorzędny */ --linia:#e7e7e5; --tlo:#ffffff; --tlo-2:#f8f8f7; --blad:#b91c1c; --ok:#15803d; --r:14px; --r-s:8px; --cien:0 1px 2px rgba(21,26,23,.06),0 8px 24px -12px rgba(21,26,23,.18); --max:1200px; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color:var(--tusz);background:var(--tlo)} img{max-width:100%;height:auto;display:block} /* To NIE jest kosmetyka - bez tej reguly reset img{display:block} wyzej LAMIE atrybut hidden na obrazkach. Styl autora bije styl przegladarki niezaleznie od specyficznosci, wiec img{display:block} wygrywa z wbudowanym [hidden]{display:none} i element oznaczony jako ukryty... jest widoczny. Objaw zgloszony 26.08: w wysuwanym mini-koszyku kazdy produkt mial DWIE miniatury. WooCommerce renderuje tam dwa obrazki naraz - jeden w linku, drugi bez - i przelacza je atrybutem hidden przez Interactivity API. Nasz reset odslanial ten, ktory mial zostac schowany. Specyficznosc [hidden] to (0,1,0) i bije img (0,0,1), wiec wystarcza bez !important. Regula jest globalna celowo: ten sam mechanizm psuje kazdy obrazek przelaczany atrybutem, nie tylko koszyk. */ [hidden]{display:none} a{color:var(--akcent-tekst);text-decoration:none} a:hover{color:var(--tusz)} .srodek{max-width:var(--max);margin:0 auto;padding:0 20px} h1,h2,h3,h4,h5,h6{line-height:1.25;font-weight:700} h1{font-size:clamp(26px,4vw,38px)} h2{font-size:clamp(21px,3vw,28px)} h3{font-size:18px} /* 🔴 h4–h6 nie mialy ZADNEJ reguly stopnia pisma, wiec zostawaly przy 16 px — nieodroznialne od pogrubionego akapitu. Regulamin sklepu ma 27 naglowkow h4 (kazdy paragraf) i 3 naglowki h2: cala jego struktura byla dla czytelnika niewidoczna. Rozne stopnie sa tanim sposobem na pokazanie hierarchii tam, gdzie tresc pisal ktos inny niz autor motywu. */ h4{font-size:16.5px} h5{font-size:15px} h6{font-size:13.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--tusz-2)} .sekcja{padding:44px 0} .sekcja--szara{background:var(--tlo-2)} .sekcja__naglowek{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:22px} .sekcja__naglowek a{font-size:14px;font-weight:600;white-space:nowrap} /* ---------- pasek górny + nagłówek ---------- */ .topbar{background:var(--zielen);color:#d6d6d3;font-size:13px;text-align:center;padding:7px 12px} .topbar b{color:#fff} .naglowek{border-bottom:1px solid var(--linia);background:#fff;position:sticky;top:0;z-index:50} .naglowek__rzad{display:flex;align-items:center;gap:18px;padding:14px 0} .logo{font-size:24px;font-weight:800;letter-spacing:-.5px;color:var(--tusz);white-space:nowrap} .logo span{color:var(--zielen)} .logo em{color:var(--akcent);font-style:normal} .logo img{max-height:44px;width:auto} .szukaj{flex:1;display:flex;position:relative} .szukaj input{width:100%;padding:11px 44px 11px 16px;border:2px solid var(--linia);border-radius:999px;font-size:15px;background:var(--tlo-2)} .szukaj input:focus{outline:none;border-color:var(--zielen)} .szukaj button{position:absolute;right:5px;top:50%;transform:translateY(-50%);border:0;background:var(--zielen);color:#fff;width:34px;height:34px;border-radius:50%;cursor:pointer;display:grid;place-items:center} .ikony{display:flex;gap:16px;align-items:center} .ikona{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;color:var(--tusz-2)} .ikona svg{width:22px;height:22px;stroke:var(--tusz)} .ikona--koszyk{position:relative} /* licznik sztuk: tekst CIEMNY na akcencie. Biel na #00CDBF daje 2,03:1, czyli poniżej progu WCAG AA (4,5:1) — a przy tym stopniu pisma był to najgorzej czytelny element nagłówka. #123330 na akcencie to 6,72:1, tak samo jak .btn--glowny i .plakietka--nowosc. Bliźniacza reguła dla licznika bloku Mini-Cart: assets/css/bloki.css (.wc-block-mini-cart__badge). */ .ikona--koszyk .licznik{position:absolute;top:-4px;right:2px;background:var(--akcent);color:#123330;font-size:11px;font-weight:700;min-width:17px;height:17px;border-radius:9px;display:grid;place-items:center} /* podpowiedzi szukajki (na żywo wypełnia je motyw.js ze Store API); widocznością steruje WYŁĄCZNIE klasa --otwarte z JS — reguła :focus-within pokazywała pustą ramkę przy każdym fokusie pola i wygrywała z Escape */ .szukaj__wyniki{display:none;position:absolute;top:calc(100% + 6px);left:0;right:0;background:#fff;border:1px solid var(--linia);border-radius:var(--r-s);box-shadow:var(--cien);overflow:hidden;z-index:60} .szukaj__wynik{display:flex;gap:10px;align-items:center;padding:8px 12px;border-bottom:1px solid var(--linia)} .szukaj__wynik:last-child{border-bottom:0} .szukaj__wynik img{width:40px;height:40px;object-fit:contain;background:var(--tlo-2);border-radius:6px} .szukaj__wynik small{color:var(--tusz-2)} /* ---------- nawigacja / mega-menu (CSS hover) ---------- 🔴 RUNDA 4 (20.08): selektory paska NIE PASOWAŁY do markupu. Realna struktura (header.php, OBA tryby menu — z wp_nav_menu i z nawigacji zastępczej budowanej z kategorii sklepu):