/* Theme Name: Tokyo Toybox Child Theme URI: https://tokyotoybox.pl Description: Motyw potomny (child theme) dla Tokyo Toybox oparty na Storefront. Zastępuje sekcje zbudowane w Elementorze natywnym designem WordPress + WooCommerce. Edytuj wyłącznie warstwę wizualną w tym motywie. Author: Tokyo Toybox Template: storefront Version: 3.10.0 Text Domain: tokyotoybox-child */ /* ========================================================= ZMIENNE / KOLORY ========================================================= */ :root { --tt-black: #121212; --tt-black-soft: #17151c; --tt-topbar: #222222; --tt-accent: #ff3f3f; --tt-accent-2: #00e5ff; --tt-jp-red: #e2231a; --tt-white: #ffffff; --tt-gray-text: #cfcfcf; --tt-gray-light: #f5f5f5; /* Russo One — mocny, blokowy krój gamingowy do nagłówków, menu, przycisków i UI. Zastąpił Rajdhani, który na tym motywie wyglądał zbyt cienko/nijako. */ --tt-font-heading: "Russo One", sans-serif; /* Titan One — jeszcze grubszy, "zabawkowy" krój zarezerwowany WYŁĄCZNIE do największych napisów (tytuł hero, hasło w stopce) — użyty wszędzie byłby zbyt ciężki do czytania w mniejszych rozmiarach. */ --tt-font-display: "Titan One", "Russo One", sans-serif; /* Roboto zdejmujemy CAŁKOWICIE ze strony — zgłoszenie: "nie pasuje". Chakra Petch to techniczny, "retro-terminalowy" krój (kwadratowe litery, lekko sci-fi), który trzyma ten sam klimat co Russo One/Press Start 2P, ale w normalnej grubości (400) nadaje się do dłuższych akapitów — nie wygląda pogrubiony jak Russo One. */ --tt-font-body: "Chakra Petch", sans-serif; --tt-font-pixel: "Press Start 2P", cursive; } body, button, input, select, textarea { font-family: var(--tt-font-body); } /* ========================================================= TŁO CAŁEJ STRONY — deseń pikselartowych ikonek (serduszko, gwiazdka/ iskierka, moneta, krzyż d-pada) w klimacie retro-arcade 8-bit, zamiast poprzedniego wzoru trójkąt/kółko/kwadrat/krzyżyk — ten kojarzył się zbyt jednoznacznie z przyciskami kontrolera PlayStation. Ikonki zbudowane z twardych, prostokątnych bloków (bez zaokrągleń/krzywych), żeby faktycznie wyglądały jak pixel art, nie jak gładkie kształty. Dajemy je na body jako bazę, a sekcjom z WŁASNYM jednolitym tłem (białym/jasnoszarym/czarnym) dokładamy ten sam deseń osobno — bo solidny background-color na sekcji i tak zasłoniłby wzór z body. Dwa warianty (jasny/ciemny) jako zmienne, żeby nie powtarzać długiego data-URI wszędzie. ZGŁOSZENIE "za grube/za masywne": pierwsza wersja miała bloki 4px na kafelku 160px — zbyt ciężkie, dominowały nad resztą strony zamiast być subtelną fakturą. Bloki zmniejszone do 2px (ikonki są teraz o połowę mniejsze), opacity też lekko ściągnięte (0.10/0.09 -> 0.07/0.06), kafelek powiększony do 200x200, żeby ikonek było mniej na ekranie i miały więcej pustej przestrzeni wokół. ========================================================= */ :root { --tt-pattern-dark: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22200%22%20height%3D%22200%22%3E%3Crect%20x%3D%2222%22%20y%3D%2216%22%20width%3D%224%22%20height%3D%222%22%20fill%3D%22rgba%2818%2C18%2C18%2C0.07%29%22%2F%3E%3Crect%20x%3D%2228%22%20y%3D%2216%22%20width%3D%224%22%20height%3D%222%22%20fill%3D%22rgba%2818%2C18%2C18%2C0.07%29%22%2F%3E%3Crect%20x%3D%2220%22%20y%3D%2218%22%20width%3D%2214%22%20height%3D%222%22%20fill%3D%22rgba%2818%2C18%2C18%2C0.07%29%22%2F%3E%3Crect%20x%3D%2220%22%20y%3D%2220%22%20width%3D%2214%22%20height%3D%222%22%20fill%3D%22rgba%2818%2C18%2C18%2C0.07%29%22%2F%3E%3Crect%20x%3D%2220%22%20y%3D%2222%22%20width%3D%2214%22%20height%3D%222%22%20fill%3D%22rgba%2818%2C18%2C18%2C0.07%29%22%2F%3E%3Crect%20x%3D%2222%22%20y%3D%2224%22%20width%3D%2210%22%20height%3D%222%22%20fill%3D%22rgba%2818%2C18%2C18%2C0.07%29%22%2F%3E%3Crect%20x%3D%2224%22%20y%3D%2226%22%20width%3D%226%22%20height%3D%222%22%20fill%3D%22rgba%2818%2C18%2C18%2C0.07%29%22%2F%3E%3Crect%20x%3D%2226%22%20y%3D%2228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22rgba%2818%2C18%2C18%2C0.07%29%22%2F%3E%3Crect%20x%3D%22154%22%20y%3D%2224%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22rgba%2818%2C18%2C18%2C0.07%29%22%2F%3E%3Crect%20x%3D%22154%22%20y%3D%2226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22rgba%2818%2C18%2C18%2C0.07%29%22%2F%3E%3Crect%20x%3D%22150%22%20y%3D%2228%22%20width%3D%2210%22%20height%3D%222%22%20fill%3D%22rgba%2818%2C18%2C18%2C0.07%29%22%2F%3E%3Crect%20x%3D%22154%22%20y%3D%2230%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22rgba%2818%2C18%2C18%2C0.07%29%22%2F%3E%3Crect%20x%3D%22154%22%20y%3D%2232%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22rgba%2818%2C18%2C18%2C0.07%29%22%2F%3E%3Crect%20x%3D%2236%22%20y%3D%22140%22%20width%3D%2210%22%20height%3D%222%22%20fill%3D%22rgba%2818%2C18%2C18%2C0.07%29%22%2F%3E%3Crect%20x%3D%2234%22%20y%3D%22142%22%20width%3D%2214%22%20height%3D%222%22%20fill%3D%22rgba%2818%2C18%2C18%2C0.07%29%22%2F%3E%3Crect%20x%3D%2234%22%20y%3D%22144%22%20width%3D%224%22%20height%3D%222%22%20fill%3D%22rgba%2818%2C18%2C18%2C0.07%29%22%2F%3E%3Crect%20x%3D%2240%22%20y%3D%22144%22%20width%3D%228%22%20height%3D%222%22%20fill%3D%22rgba%2818%2C18%2C18%2C0.07%29%22%2F%3E%3Crect%20x%3D%2234%22%20y%3D%22146%22%20width%3D%2214%22%20height%3D%222%22%20fill%3D%22rgba%2818%2C18%2C18%2C0.07%29%22%2F%3E%3Crect%20x%3D%2234%22%20y%3D%22148%22%20width%3D%2214%22%20height%3D%222%22%20fill%3D%22rgba%2818%2C18%2C18%2C0.07%29%22%2F%3E%3Crect%20x%3D%2234%22%20y%3D%22150%22%20width%3D%2214%22%20height%3D%222%22%20fill%3D%22rgba%2818%2C18%2C18%2C0.07%29%22%2F%3E%3Crect%20x%3D%2236%22%20y%3D%22152%22%20width%3D%2210%22%20height%3D%222%22%20fill%3D%22rgba%2818%2C18%2C18%2C0.07%29%22%2F%3E%3Crect%20x%3D%22156%22%20y%3D%22148%22%20width%3D%226%22%20height%3D%222%22%20fill%3D%22rgba%2818%2C18%2C18%2C0.07%29%22%2F%3E%3Crect%20x%3D%22156%22%20y%3D%22150%22%20width%3D%226%22%20height%3D%222%22%20fill%3D%22rgba%2818%2C18%2C18%2C0.07%29%22%2F%3E%3Crect%20x%3D%22152%22%20y%3D%22152%22%20width%3D%2214%22%20height%3D%222%22%20fill%3D%22rgba%2818%2C18%2C18%2C0.07%29%22%2F%3E%3Crect%20x%3D%22152%22%20y%3D%22154%22%20width%3D%2214%22%20height%3D%222%22%20fill%3D%22rgba%2818%2C18%2C18%2C0.07%29%22%2F%3E%3Crect%20x%3D%22152%22%20y%3D%22156%22%20width%3D%2214%22%20height%3D%222%22%20fill%3D%22rgba%2818%2C18%2C18%2C0.07%29%22%2F%3E%3Crect%20x%3D%22156%22%20y%3D%22158%22%20width%3D%226%22%20height%3D%222%22%20fill%3D%22rgba%2818%2C18%2C18%2C0.07%29%22%2F%3E%3Crect%20x%3D%22156%22%20y%3D%22160%22%20width%3D%226%22%20height%3D%222%22%20fill%3D%22rgba%2818%2C18%2C18%2C0.07%29%22%2F%3E%3C%2Fsvg%3E"); --tt-pattern-light: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22200%22%20height%3D%22200%22%3E%3Crect%20x%3D%2222%22%20y%3D%2216%22%20width%3D%224%22%20height%3D%222%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.06%29%22%2F%3E%3Crect%20x%3D%2228%22%20y%3D%2216%22%20width%3D%224%22%20height%3D%222%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.06%29%22%2F%3E%3Crect%20x%3D%2220%22%20y%3D%2218%22%20width%3D%2214%22%20height%3D%222%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.06%29%22%2F%3E%3Crect%20x%3D%2220%22%20y%3D%2220%22%20width%3D%2214%22%20height%3D%222%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.06%29%22%2F%3E%3Crect%20x%3D%2220%22%20y%3D%2222%22%20width%3D%2214%22%20height%3D%222%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.06%29%22%2F%3E%3Crect%20x%3D%2222%22%20y%3D%2224%22%20width%3D%2210%22%20height%3D%222%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.06%29%22%2F%3E%3Crect%20x%3D%2224%22%20y%3D%2226%22%20width%3D%226%22%20height%3D%222%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.06%29%22%2F%3E%3Crect%20x%3D%2226%22%20y%3D%2228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.06%29%22%2F%3E%3Crect%20x%3D%22154%22%20y%3D%2224%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.06%29%22%2F%3E%3Crect%20x%3D%22154%22%20y%3D%2226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.06%29%22%2F%3E%3Crect%20x%3D%22150%22%20y%3D%2228%22%20width%3D%2210%22%20height%3D%222%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.06%29%22%2F%3E%3Crect%20x%3D%22154%22%20y%3D%2230%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.06%29%22%2F%3E%3Crect%20x%3D%22154%22%20y%3D%2232%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.06%29%22%2F%3E%3Crect%20x%3D%2236%22%20y%3D%22140%22%20width%3D%2210%22%20height%3D%222%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.06%29%22%2F%3E%3Crect%20x%3D%2234%22%20y%3D%22142%22%20width%3D%2214%22%20height%3D%222%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.06%29%22%2F%3E%3Crect%20x%3D%2234%22%20y%3D%22144%22%20width%3D%224%22%20height%3D%222%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.06%29%22%2F%3E%3Crect%20x%3D%2240%22%20y%3D%22144%22%20width%3D%228%22%20height%3D%222%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.06%29%22%2F%3E%3Crect%20x%3D%2234%22%20y%3D%22146%22%20width%3D%2214%22%20height%3D%222%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.06%29%22%2F%3E%3Crect%20x%3D%2234%22%20y%3D%22148%22%20width%3D%2214%22%20height%3D%222%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.06%29%22%2F%3E%3Crect%20x%3D%2234%22%20y%3D%22150%22%20width%3D%2214%22%20height%3D%222%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.06%29%22%2F%3E%3Crect%20x%3D%2236%22%20y%3D%22152%22%20width%3D%2210%22%20height%3D%222%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.06%29%22%2F%3E%3Crect%20x%3D%22156%22%20y%3D%22148%22%20width%3D%226%22%20height%3D%222%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.06%29%22%2F%3E%3Crect%20x%3D%22156%22%20y%3D%22150%22%20width%3D%226%22%20height%3D%222%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.06%29%22%2F%3E%3Crect%20x%3D%22152%22%20y%3D%22152%22%20width%3D%2214%22%20height%3D%222%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.06%29%22%2F%3E%3Crect%20x%3D%22152%22%20y%3D%22154%22%20width%3D%2214%22%20height%3D%222%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.06%29%22%2F%3E%3Crect%20x%3D%22152%22%20y%3D%22156%22%20width%3D%2214%22%20height%3D%222%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.06%29%22%2F%3E%3Crect%20x%3D%22156%22%20y%3D%22158%22%20width%3D%226%22%20height%3D%222%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.06%29%22%2F%3E%3Crect%20x%3D%22156%22%20y%3D%22160%22%20width%3D%226%22%20height%3D%222%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.06%29%22%2F%3E%3C%2Fsvg%3E"); } body { background-color: var(--tt-white); background-image: var(--tt-pattern-dark); background-size: 200px 200px; } /* UWAGA: .tt-usp / .tt-import / .tt-series / .site-footer mają WŁASNE, późniejsze reguły `background: ` (skrót), które zerują background-image. Wzór dla nich jest doklejony bezpośrednio przy tamtych regułach (szukaj "deseń retro" niżej w pliku), żeby uniknąć nadpisania przez kaskadę. */ h1, h2, h3, h4, h5, h6 { font-family: var(--tt-font-heading); font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; } a { transition: color 0.2s ease, background-color 0.2s ease; } /* ========================================================= TOPBAR (pasek "darmowa dostawa") ========================================================= */ /* Topbar w TYM SAMYM kolorze i z tym samym wzorem kropek co header — wcześniej był o jeden odcień jaśniejszy (--tt-topbar), przez co wyglądał jak osobny, "doklejony" pasek zamiast naturalnego przedłużenia headera. */ .tt-topbar { background-color: var(--tt-black); background-image: var(--tt-pattern-light); background-size: 200px 200px; color: var(--tt-white); } .tt-topbar .col-full { /* mniejszy padding = mniejszy wizualny odstęp od headera poniżej */ padding-top: 7px; padding-bottom: 7px; text-align: center; } .tt-topbar p { margin: 0; font-size: 0.85rem; letter-spacing: 0.03em; } /* ========================================================= HEADER ========================================================= */ .site-header { background-color: var(--tt-black); border-bottom: none; /* sticky zamiast relative: header ma zostawać przyklejony do góry podczas scrollowania. Sticky nadal tworzy kontekst pozycjonowania dla .site-header::after (neonowa kreska), więc nic więcej się nie psuje. Topbar "darmowa dostawa" NIE jest sticky — celowo znika po przewinięciu, żeby przyklejony pasek nie zajmował zbyt dużo miejsca. */ position: sticky; top: 0; z-index: 999; background-image: var(--tt-pattern-light); background-size: 200px 200px; } /* STICKY HEADER NIE DZIAŁAŁ: Storefront ustawia `.site { overflow-x: hidden; }` na wrapperze #page. Sama obecność overflow-x:hidden bez jawnego overflow-y sprawia, że przeglądarka automatycznie liczy overflow-y jako "auto" (to standardowa pułapka CSS) — a jeśli NAJBLIŻSZY przewijalny przodek elementu ma overflow inny niż "visible", position:sticky przestaje działać względem okna i przestaje się "przyklejać". Bezpieczeństwo przed poziomym scrollem (potrzebne przez nasze pełnoszerokie sekcje 100vw) i tak już zapewnia `body { overflow-x: hidden; }`, więc na .site możemy bez ryzyka zresetować overflow do "visible". */ .site { overflow-x: visible !important; overflow-y: visible !important; } /* HEADER "PRZYKLEJONY DO DOŁU": Storefront daje .site-header padding-top/padding-bottom: 1.618em, ale w praktyce (przez responsywne reguły motywu dot. sticky/handheld nav) wychodziło z tego asymetryczne ~42px górą i 0 dołem — logo i menu wisiały tuż nad neonową kreską zamiast być wyśrodkowane. .tt-header-inner ma WŁASNY, symetryczny padding (14px/14px), więc zerujemy padding na samym .site-header i całą pionową przestrzeń oddajemy w ręce .tt-header-inner. */ .site-header { padding-top: 0 !important; padding-bottom: 0 !important; } /* Dwukolorowa kreska pod headerem — nawiązanie do retro/arcade krawędzi (neonowa ramka CRT), zamiast płaskiej, nudnej linii. DWIE PUŁAPKI, na które tu trafiliśmy (obie z tej samej rodziny co .col-full/.products — Storefront wszędzie doczepia clearfix ::before/::after z `display: table`): 1) Musi siedzieć W ŚRODKU boxa headera (bottom: 0, nie -4px) — jeśli wystaje poza jego granicę, kolejny element strony (renderowany później w dokumencie) zamalowuje ją swoim tłem. 2) Storefront ma WŁASNY clearfix `.site-header::after { display: table; }`. Skoro nie nadpisaliśmy jawnie `display`, ta wartość się odziedziczyła i element (jako tabela, nie blok) zignorował rozciąganie na pełną szerokość przez left/right — stąd kreska była niewidoczna mimo poprawnych pozostałych właściwości. Trzeba jawnie wymusić `display: block`. */ .site-header::after { content: ""; display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; /* "ŻYWY" LED: pasek to teraz powtarzający się gradient dwa razy szerszy niż element (background-size:200%), którego pozycję animujemy — efekt płynących, przesuwających się świateł (jak listwa RGB w obudowie PC), plus osobna animacja pulsującego blasku (box-shadow/brightness) nałożona na to samo. Dwie niezależne animacje na jednym elemencie = ruch koloru + oddychające światło. */ background: linear-gradient( 90deg, var(--tt-accent) 0%, var(--tt-accent) 20%, var(--tt-accent-2) 30%, var(--tt-accent-2) 45%, var(--tt-accent) 55%, var(--tt-accent) 70%, var(--tt-accent-2) 80%, var(--tt-accent-2) 100% ); background-size: 200% 100%; animation: tt-led-flow 3.2s linear infinite, tt-led-pulse 2.1s ease-in-out infinite; } @keyframes tt-led-flow { 0% { background-position: 0% 0; } 100% { background-position: -200% 0; } } @keyframes tt-led-pulse { 0%, 100% { box-shadow: 0 0 6px 0 rgba(255, 63, 63, 0.5), 0 0 10px 0 rgba(0, 229, 255, 0.3); filter: brightness(1); } 50% { box-shadow: 0 0 16px 1px rgba(255, 63, 63, 0.8), 0 0 20px 1px rgba(0, 229, 255, 0.6); filter: brightness(1.3); } } @media (prefers-reduced-motion: reduce) { .site-header::after { animation: none; } } /* PRZERWA MIĘDZY HEADEREM A HERO: Storefront dokleja `.home.page:not(.page-template-template-homepage) .site-header { margin-bottom: 4.2358em; }` — zakłada, że strona główna to zwykły blog i zostawia miejsce nad listą wpisów. Nasz front-page.php nie jest rozpoznawany jako "template-homepage", więc ta reguła się uruchamiała i wstawiała ~68px pustej, białej przerwy tuż nad hero. Zerujemy ją jawnie (Storefrontowy selektor ma wysoką specyficzność, stąd !important). */ .site-header { margin-bottom: 0 !important; } /* PRZYCIĘTE LOGO: ta reguła (z oryginalnego motywu) miała zerować domyślny padding Storefronta na .col-full wewnątrz headera, ale .tt-header-inner NOSI OBIE klasy na raz ("tt-header-inner col-full"), więc selektor `.site-header .col-full` (specyficzność 0,2,0) też trafiał w NASZ własny `.tt-header-inner { padding: 18px 0; }` (specyficzność 0,1,0) i wygrywał, zerując go do 0. Efekt: logo stykało się z górną/dolną krawędzią headera — a dolna krawędź to dokładnie tam, gdzie rysuje się neonowa kreska, więc wyglądało na "przycięte". Wykluczamy .tt-header-inner z tej reguły. */ .site-header .col-full:not(.tt-header-inner) { padding-top: 0; padding-bottom: 0; } .tt-header-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; padding: 14px 0; } .tt-branding { display: flex; align-items: center; } .tt-branding .tt-logo, .tt-branding img, .tt-branding .custom-logo { max-height: 60px !important; width: auto !important; height: auto; display: block; } .tt-primary-navigation { flex: 1 1 auto; display: flex; justify-content: center; } .tt-menu { display: flex; align-items: center; gap: 30px; list-style: none; margin: 0; padding: 0; } .tt-menu > li { position: relative; } /* Separator w stylu "START HERE | THE VAULT | ..." — pochylona kreska między pozycjami menu zamiast zwykłego znaku "|", żeby pasowała do dynamicznej, "rozjechanej" stylistyki retro reszty motywu. */ .tt-menu > li:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: -16px; width: 2px; height: 14px; background: var(--tt-accent-2); opacity: 0.55; transform: translateY(-50%) rotate(14deg); } .tt-menu li a { color: var(--tt-white); text-decoration: none; font-family: var(--tt-font-heading); text-transform: uppercase; font-size: 1.05rem; letter-spacing: 0.02em; } .tt-menu li a:hover { color: var(--tt-accent); } .tt-menu li.menu-item-has-children > a::after { content: ""; display: inline-block; margin-left: 6px; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); } .tt-menu .sub-menu { list-style: none; margin: 0; padding: 10px 0; background: var(--tt-black); position: absolute; min-width: 200px; box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35); opacity: 0; visibility: hidden; transform: translateY(6px); transition: all 0.15s ease; } .tt-menu li.menu-item-has-children:hover > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); } .tt-menu .sub-menu li a { display: block; padding: 8px 20px; } .tt-header-actions { display: flex; align-items: center; gap: 18px; } /* HAMBURGER — chowany na desktopie (menu mieści się w jednym rzędzie), pokazywany dopiero poniżej breakpointu, w którym pozycje menu ("SKLEP / RETRO PRODUKTY / POKEMON / O NAS / KONTAKT") przestają się mieścić i zaczynają się łamać na kilka linijek — patrz media query niżej. Trzy kreski zmieniają się w "X" przez CSS (bez dodatkowych ikon/SVG), sama logika otwierania/zamykania w tt-bouncer.js. */ .tt-nav-toggle { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 38px; height: 38px; background: transparent; border: 2px solid var(--tt-white); border-radius: 2px; padding: 0; cursor: pointer; order: -1; } .tt-nav-toggle__bar { display: block; width: 16px; height: 2px; background: var(--tt-white); transition: transform 0.2s ease, opacity 0.2s ease; } .tt-nav-toggle:hover { border-color: var(--tt-accent-2); } .tt-nav-toggle:hover .tt-nav-toggle__bar { background: var(--tt-accent-2); } .tt-nav-toggle[aria-expanded="true"] .tt-nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .tt-nav-toggle[aria-expanded="true"] .tt-nav-toggle__bar:nth-child(2) { opacity: 0; } .tt-nav-toggle[aria-expanded="true"] .tt-nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .tt-account-link, .tt-cart-link { color: var(--tt-white); display: inline-flex; position: relative; } .tt-account-link svg, .tt-cart-link svg { width: 22px; height: 22px; fill: currentColor; } .tt-account-link:hover, .tt-cart-link:hover { color: var(--tt-accent); } /* DYMEK Z LICZBĄ SZTUK W KOSZYKU: pusty (patrz tokyotoybox_cart_count_badge() w functions.php) jest chowany przez :empty, więc gdy koszyk jest pusty, nie widać żadnego kółka — dopiero pierwszy dodany produkt je pokazuje. Aktualizuje się na żywo przez WooCommerce AJAX cart fragments, bez przeładowania strony. */ .tt-cart-count { position: absolute; top: -8px; right: -10px; min-width: 18px; height: 18px; padding: 0 4px; display: flex; align-items: center; justify-content: center; background: var(--tt-accent); color: var(--tt-white); border: 2px solid var(--tt-black); border-radius: 50%; font-family: var(--tt-font-heading); font-size: 0.65rem; line-height: 1; box-shadow: 0 0 8px rgba(255, 63, 63, 0.6); pointer-events: none; } .tt-cart-count:empty { display: none; } /* "Wskoczenie" produktu do koszyka: klasa .tt-cart-bump jest dopinana przez tt-bouncer.js na .tt-cart-link w momencie zdarzenia jQuery "added_to_cart" (odpala je sam WooCommerce po udanym AJAX-owym dodaniu) — ikonka podskakuje/kołysze się, a dymek z liczbą robi wyraźny "pop", żeby zmiana liczby rzuciła się w oczy zamiast cicho podmienić się w tle. */ .tt-cart-link.tt-cart-bump { animation: tt-cart-jump 0.5s ease; } .tt-cart-link.tt-cart-bump .tt-cart-count { animation: tt-cart-count-pop 0.5s ease; } @keyframes tt-cart-jump { 0% { transform: translateY(0) rotate(0deg); } 25% { transform: translateY(-5px) rotate(-10deg); } 50% { transform: translateY(0) rotate(8deg); } 75% { transform: translateY(-2px) rotate(-4deg); } 100% { transform: translateY(0) rotate(0deg); } } @keyframes tt-cart-count-pop { 0% { transform: scale(1); box-shadow: 0 0 8px rgba(255, 63, 63, 0.6); } 40% { transform: scale(1.55); box-shadow: 0 0 18px rgba(255, 63, 63, 0.95); } 70% { transform: scale(0.92); } 100% { transform: scale(1); box-shadow: 0 0 8px rgba(255, 63, 63, 0.6); } } @media (prefers-reduced-motion: reduce) { .tt-cart-link.tt-cart-bump, .tt-cart-link.tt-cart-bump .tt-cart-count { animation: none; } } /* ========================================================= MENU MOBILNE — poniżej ok. 860px pozycje menu ("SKLEP / RETRO PRODUKTY / POKEMON / O NAS / KONTAKT") przestają się mieścić w jednym rzędzie i zaczynają się łamać w środku słów (patrz zgłoszenie "dostosuj pod urządzenia mobilne") — chowamy poziome menu, pokazujemy hamburger, a po kliknięciu menu wysuwa się jako pełnoszerokościowy, pionowy panel pod headerem. Breakpoint 860px, nie 600px, bo to właśnie przy szerokościach tabletowych menu zaczynało się rwać — telefony są tym bardziej objęte tą samą regułą. ========================================================= */ @media (max-width: 860px) { .tt-nav-toggle { display: flex; } .tt-primary-navigation { display: none; flex-basis: 100%; order: 4; justify-content: flex-start; } .tt-primary-navigation.is-open { display: block; } .tt-menu { flex-direction: column; align-items: stretch; gap: 0; width: 100%; padding: 6px 0 14px; } .tt-menu > li { border-top: 1px solid rgba(255, 255, 255, 0.12); } .tt-menu > li:not(:last-child)::after { display: none; } .tt-menu li a { display: block; padding: 14px 4px; font-size: 1rem; } .tt-menu li.menu-item-has-children > a::after { float: right; margin-top: 6px; transform: rotate(45deg); transition: transform 0.15s ease; } .tt-menu li.menu-item-has-children.tt-submenu-open > a::after { transform: rotate(-135deg); } /* Na dotyku nie ma hover — podmenu chowane/pokazywane wyłącznie przez klasę dopinaną w JS (pierwsze dotknięcie linku-rodzica). */ .tt-menu .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; background: rgba(255, 255, 255, 0.04); min-width: 0; padding: 0; display: none; } .tt-menu li.menu-item-has-children.tt-submenu-open > .sub-menu { display: block; } .tt-menu .sub-menu li a { padding: 12px 4px 12px 20px; } .tt-header-inner { padding: 12px 0; } .tt-branding .tt-logo, .tt-branding img, .tt-branding .custom-logo { max-height: 46px !important; } } /* ========================================================= FRONT PAGE — sekcje ogólne ========================================================= */ .tt-front-page section { padding: 60px 0; } .tt-front-page h2 { text-align: center; font-size: 2rem; margin-bottom: 36px; } /* ========================================================= FULL-BLEED — Storefront domyślnie wsadza treść strony w kontener o ograniczonej szerokości (.col-full). Sekcje z ciemnym tłem mają sięgać brzegów ekranu, więc "wyłamujemy" je z tego kontenera niezależnie od tego, jak szeroki jest rodzic. ========================================================= */ .tt-hero, .tt-series, .tt-figures, .tt-retro, .tt-featured-products { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; } /* ========================================================= BOUNCER — piksel-artowe ikonki odbijające się od krawędzi sekcji jak klasyczny wygaszacz DVD (patrz tt-bouncer.js). Same z siebie są tylko statycznie ustawionym elementem w rogu (position: 0,0) — cały ruch dopisuje JS przez transform:translate(), żeby CSS pozostawał prostym fallbackiem gdy JS/reduced-motion jest wyłączony. ========================================================= */ .tt-bouncer { position: absolute; top: 0; left: 0; z-index: 1; pointer-events: none; opacity: 0.6; color: var(--tt-accent); will-change: transform; } .tt-bouncer svg { display: block; width: 100%; height: 100%; fill: currentColor; filter: drop-shadow(0 0 6px currentColor); } .tt-bouncer-diamond, .tt-bouncer-heart { width: 30px; height: 30px; } .tt-bouncer-invader { width: 40px; height: 29px; } /* Druga ikonka w każdej sekcji (start z prawej) dodatkowo się kręci — .tt-bouncer-spinner to wewnętrzny wrapper, który dostaje WŁASNĄ, ciągłą animację rotacji; zewnętrzny .tt-bouncer nadal tylko przesuwa się (JS, translate), więc oba transformy się nie gryzą — obrót dzieje się "w miejscu" wewnątrz przesuwanego pudełka. */ .tt-bouncer-spinner { width: 100%; height: 100%; } .tt-bouncer-spin .tt-bouncer-spinner { animation: tt-spin 2.6s linear infinite; } @keyframes tt-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .tt-bouncer-spin .tt-bouncer-spinner { animation: none; } } /* Mały "pop" (squash/stretch) w momencie odbicia — dodaje wrażenia fizyki zamiast płaskiej, mechanicznej zmiany kierunku. */ @keyframes tt-bounce-pop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } } .tt-bouncer.tt-bounce-pop svg { animation: tt-bounce-pop 0.18s ease; } /* Sekcje jasne (USP, tt-worlds) nie mają bouncerów, więc bez obaw o kontrast — ale gdyby ktoś kiedyś dodał go na jasnym tle, delikatnie przyciemniamy cień zamiast poświaty. Nieużywane teraz, zostawione jako haczyk na przyszłość: */ .tt-usp .tt-bouncer svg, .tt-worlds .tt-bouncer svg { filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.35)); } @media (prefers-reduced-motion: reduce) { .tt-bouncer { display: none; } } /* SEKCJE Z GRIDAMI PRODUKTÓW ZA WĄSKIE: cały motyw dzieli jeden, wspólny .col-full (max-width ok. 1064px) ze Storefronta — dobry dla tekstu (hero, USP), ale przy 5-kolumnowym gridzie kart zostawiał mnóstwo pustego miejsca po bokach i ściskał karty. Poszerzamy kontener WYŁĄCZNIE w sekcjach z gridami produktów (reszta strony — header, hero, USP, stopka — zostaje przy oryginalnej szerokości). */ .tt-featured-products .col-full, .tt-retro .col-full { max-width: 1440px; } /* ========================================================= NAGŁÓWKI SEKCJI + EFEKT "GLITCH" NA HOVER ========================================================= */ .tt-eyebrow { font-family: var(--tt-font-pixel); font-size: 0.6rem; letter-spacing: 0.1em; color: var(--tt-accent); margin: 0 0 14px; text-align: center; } .tt-eyebrow-light { color: var(--tt-accent-2); } .tt-section-title { position: relative; display: inline-block; width: 100%; } .tt-section-title-light { color: var(--tt-white); } .tt-section-subtitle { text-align: center; max-width: 620px; margin: -20px auto 36px; color: #666; font-family: var(--tt-font-body); text-transform: none; letter-spacing: normal; font-size: 0.98rem; } .tt-section-subtitle-light { color: var(--tt-gray-text); } /* NEON FLICKER — druga wersja. Pierwsza (na hover, cykl 2.2s ze zbyt gęstymi/regularnymi mrugnięciami) dalej wyglądała "falująco/epileptycznie". Zgłoszenie: ma migać CAŁY CZAS (nie na hover), wolno, w konkretnym, "zepsuty neon" rytmie: mrugnięcie → przerwa ~0.5s → podwójne mrugnięcie → przerwa ~1s → pojedyncze mrugnięcie → długa przerwa → od nowa. Zbudowane jako jeden cykl @keyframes na osi czasu 5s (żeby dało się dokładnie odwzorować odstępy w milisekundach), animacja działa NIEZALEŻNIE od hover — .tt-glitch świeci się i miga zawsze. */ .tt-glitch { position: relative; display: inline-block; animation: tt-neon-flicker 5s ease-in-out infinite; /* NAPIS ZUPEŁNIE NIECZYTELNY: blur na text-shadow (dawniej do 60-90px) przy grubym, blokowym Titan One zwyczajnie zlewał sąsiednie litery w jedną białą plamę bez żadnych czytelnych kształtów — nie tylko w Safari (tam WebKit dodatkowo rozmywa cienie mocniej niż Chrome przy tych samych wartościach, pogłębiając problem). Cienki, ciemny stroke wokół liter daje twardą, zawsze widoczną krawędź NIEZALEŻNIE od tego, jak mocno dana przeglądarka rozmywa poświatę wokół niej. */ -webkit-text-stroke: 1px rgba(0, 0, 0, 0.45); } @keyframes tt-neon-flicker { /* stan "zapalony" — blur mocno zmniejszony (był 8/18/34/60px) i ograniczony do 3 warstw zamiast 4, żeby poświata otaczała litery zamiast je zalewać/sklejać ze sobą */ 0%, 1.5%, 3.3%, 13%, 14.7%, 16.7%, 18.3%, 38%, 39.7%, 100% { opacity: 1; text-shadow: 0 0 3px rgba(255, 255, 255, 0.85), 0 0 10px var(--tt-accent), 0 0 18px var(--tt-accent-2); } /* KRÓTKI "SKOK NAPIĘCIA" tuż po powrocie z każdego mrugnięcia — zamiast płynnie wracać do normalnego blasku, neon na ułamek sekundy "przepala się" jaśniej (biały rozbłysk), jakby prąd wracał ze skokiem, a dopiero potem się stabilizuje. To razem ze skrą (::after niżej) daje wrażenie zwarcia, nie tylko zgaszenia/zapalenia. Blur również mocno przycięty (był do 90px) z tego samego powodu co wyżej. */ 3.1% { opacity: 1; text-shadow: 0 0 3px #fff, 0 0 8px #fff, 0 0 16px var(--tt-accent-2), 0 0 26px var(--tt-accent-2); } 14.6% { opacity: 1; text-shadow: 0 0 3px #fff, 0 0 8px #fff, 0 0 16px var(--tt-accent-2), 0 0 26px var(--tt-accent-2); } 16.6% { opacity: 1; text-shadow: 0 0 3px #fff, 0 0 8px #fff, 0 0 16px var(--tt-accent-2), 0 0 26px var(--tt-accent-2); } 39.6% { opacity: 1; text-shadow: 0 0 3px #fff, 0 0 8px #fff, 0 0 16px var(--tt-accent-2), 0 0 26px var(--tt-accent-2); } /* pojedyncze mrugnięcie (~0.1s) */ 2% { opacity: 0.25; text-shadow: none; } /* przerwa ~0.5s (3% -> 13% na osi 5s), potem podwójne mrugnięcie */ 13.7% { opacity: 0.25; text-shadow: none; } 15.5% { opacity: 0.25; text-shadow: none; } /* przerwa ~1s (18% -> 38% na osi 5s), potem pojedyncze mrugnięcie */ 38.7% { opacity: 0.25; text-shadow: none; } } /* ISKRA / "ZWARCIE" — mały, poszarpany błysk energii (kształt pioruna) pojawiający się dokładnie w momentach mrugnięcia, tuż przy napisie — jakby w tym miejscu faktycznie przeskoczył prąd. ::after było wolne (stary efekt RGB-split z ::before/::after już nie istnieje), więc nie koliduje z niczym innym. */ .tt-glitch::after { content: ""; position: absolute; top: -10%; right: -7%; width: 26px; height: 30px; background: radial-gradient(circle, #ffffff 0%, var(--tt-accent-2) 45%, transparent 75%); clip-path: polygon(45% 0%, 70% 0%, 40% 42%, 68% 42%, 25% 100%, 42% 50%, 12% 50%); opacity: 0; pointer-events: none; filter: drop-shadow(0 0 6px var(--tt-accent-2)) drop-shadow(0 0 16px #ffffff); transform: scale(0.5) rotate(-8deg); animation: tt-spark 5s ease-in-out infinite; } @keyframes tt-spark { 0%, 1.7%, 2.3%, 13.4%, 14%, 15.2%, 15.8%, 38.4%, 39%, 100% { opacity: 0; transform: scale(0.5) rotate(-8deg); } 2%, 13.7%, 15.5%, 38.7% { opacity: 1; transform: scale(1.2) rotate(6deg); } } @media (prefers-reduced-motion: reduce) { .tt-glitch { animation: none; } .tt-glitch::after { animation: none; opacity: 0; } } /* ========================================================= BUTTONS ========================================================= */ .tt-btn { display: inline-block; padding: 13px 30px; text-decoration: none; font-family: var(--tt-font-heading); font-weight: 400; text-transform: uppercase; letter-spacing: 0.05em; border-radius: 2px; border: 2px solid transparent; font-size: 0.95rem; transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease; } .tt-btn:hover { transform: translateY(-2px); } .tt-btn-solid { background: var(--tt-accent); border-color: var(--tt-accent); color: var(--tt-white); } .tt-btn-solid:hover { box-shadow: 0 6px 22px rgba(255, 63, 63, 0.45); color: var(--tt-white); } .tt-btn-outline { background: transparent; border-color: var(--tt-white); color: var(--tt-white); } .tt-btn-outline:hover { background: var(--tt-white); color: var(--tt-black); } .tt-btn-outline-light { background: transparent; border-color: var(--tt-accent-2); color: var(--tt-accent-2); } .tt-btn-outline-light:hover { background: var(--tt-accent-2); color: var(--tt-black); } /* ========================================================= HERO ========================================================= */ .tt-hero { background: radial-gradient(circle at 15% 20%, rgba(226, 35, 26, 0.25), transparent 45%), radial-gradient(circle at 85% 80%, rgba(0, 229, 255, 0.15), transparent 40%), var(--tt-black); color: var(--tt-white); overflow: hidden; padding: 100px 0 90px; text-align: center; } .tt-hero-scanlines { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: repeating-linear-gradient( to bottom, rgba(255, 255, 255, 0.05) 0px, rgba(255, 255, 255, 0.05) 1px, transparent 1px, transparent 3px ); } .tt-hero-glow { position: absolute; z-index: 0; top: -20%; left: 50%; transform: translateX(-50%); width: 60vw; height: 60vw; max-width: 700px; max-height: 700px; background: radial-gradient(circle, rgba(226, 35, 26, 0.35) 0%, transparent 70%); pointer-events: none; } .tt-hero-inner { position: relative; z-index: 1; } .tt-hero-title { /* Titan One tylko tutaj — najbardziej "krzyczący" napis na stronie zasługuje na najgrubszy krój, reszta nagłówków zostaje na Russo One */ font-family: var(--tt-font-display); font-size: clamp(2.6rem, 6vw, 5rem); margin: 0 0 20px; letter-spacing: 0.02em; color: var(--tt-white) !important; text-shadow: 0 0 18px rgba(226, 35, 26, 0.55), 0 0 40px rgba(0, 229, 255, 0.15); } .tt-glitch { color: var(--tt-white) !important; } .tt-hero-subtitle { max-width: 560px; margin: 0 auto 34px; color: var(--tt-gray-text); /* Russo One tutaj wyglądało zbyt ciężko/pogrubione jak na dłuższe zdanie — --tt-font-body (Chakra Petch) ma normalną grubość i jest w tym samym, techno-retro klimacie co reszta motywu, więc pasuje lepiej niż zarówno Roboto (za "zwykłe"), jak i Russo One (za grube). */ font-family: var(--tt-font-body); text-transform: none; letter-spacing: 0.01em; font-size: 1.1rem; line-height: 1.7; } .tt-hero-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; } /* ========================================================= DWA ŚWIATY — kafle Figurki / Retro ========================================================= */ .tt-worlds-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; } /* Ramka w stylu neubrutalizmu (ta sama rodzina co kwadraty USP): gruba czarna obwódka + twardy, przesunięty cień w kolorze akcentu (czerwony dla "Świat Anime", cyjan dla "Retro Zone") — spina te kafle wizualnie z resztą strony zamiast zaokrąglonych, "gołych" rogów bez charakteru. */ .tt-world-card { position: relative; display: block; border-radius: 2px; overflow: hidden; aspect-ratio: 16 / 10; text-decoration: none; isolation: isolate; border: 3px solid var(--tt-black); box-shadow: 8px 8px 0 var(--tt-accent); transition: transform 0.2s ease, box-shadow 0.2s ease; } .tt-world-card:nth-child(2) { box-shadow: 8px 8px 0 var(--tt-accent-2); } .tt-world-card:hover { transform: translate(-4px, -4px); box-shadow: 12px 12px 0 var(--tt-accent); } .tt-world-card:nth-child(2):hover { box-shadow: 12px 12px 0 var(--tt-accent-2); } .tt-world-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .tt-world-card:hover img { transform: scale(1.08); } /* Nakładka: treść (tag+tytuł+opis+cta) zajmuje niemal CAŁĄ wysokość kafla, więc gradient "ciemno na dole, jasno na górze" nie wystarczał — górna część tekstu (tytuł) i tak lądowała w zbyt jasnej strefie. Zamiast tego: wysoki, jednolity "podłoga" ciemności (62% czerni nawet na samej górze) + dodatkowe pogłębienie przy samym dole. Działa niezależnie od tego, jak jasne/ciemne i "zabałaganione" jest zdjęcie pod spodem (neony, jasne kartridże itp.). */ .tt-world-overlay { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, 0.93) 0%, rgba(0, 0, 0, 0.62) 100%); display: flex; flex-direction: column; justify-content: flex-end; padding: 28px; color: var(--tt-white); } /* Tag jako wypełniona "plakietka", nie goły kolorowy tekst na zdjęciu — gwarantuje czytelność bez względu na to, co dzieje się w tle (nawet przy czerwonych/niebieskich neonach na nowych zdjęciach). */ .tt-world-tag { display: inline-block; align-self: flex-start; font-family: var(--tt-font-pixel); font-size: 0.6rem; background: var(--tt-accent); color: var(--tt-white); padding: 5px 10px; margin-bottom: 12px; letter-spacing: 0.05em; box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.6); } .tt-world-card:nth-child(2) .tt-world-tag { background: var(--tt-accent-2); color: var(--tt-black); } /* TYTUŁ WYGLĄDAŁ NA "ZLANY" Z TŁEM: to nie kwestia zbyt słabej nakładki — Storefront ma WŁASNĄ, globalną regułę `h1,h2,h3,h4,h5,h6 { color:#333 }` z Customizera. Dziedziczenie koloru z rodzica (.tt-world-overlay ma color:white) ZAWSZE przegrywa z jakąkolwiek regułą bezpośrednio celującą w sam element — nawet gołym selektorem znacznika — więc h3 był ciemnoszary na ciemnym zdjęciu i praktycznie znikał. Trzeba jawnie nadpisać kolor na tym elemencie, nie polegać na dziedziczeniu. */ .tt-world-overlay h3 { margin: 0 0 8px; font-size: 1.6rem; font-family: var(--tt-font-heading); text-transform: uppercase; letter-spacing: 0.01em; color: var(--tt-white) !important; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.95), 0 0 30px rgba(0, 0, 0, 0.8); } .tt-world-overlay p { margin: 0 0 14px; color: var(--tt-gray-text); font-family: var(--tt-font-body); text-transform: none; letter-spacing: normal; font-size: 0.9rem; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8); } .tt-world-cta { font-family: var(--tt-font-heading); font-weight: 400; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; transition: transform 0.2s ease, color 0.2s ease; display: inline-block; color: var(--tt-white); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8); } .tt-world-card:hover .tt-world-cta { transform: translateX(6px); color: var(--tt-accent); } .tt-world-card:nth-child(2):hover .tt-world-cta { color: var(--tt-accent-2); } @media (max-width: 800px) { .tt-worlds-grid { grid-template-columns: 1fr; } } /* ========================================================= POPULARNE SERIE — chipy ========================================================= */ .tt-series { /* deseń retro na ciemnym tle */ background-color: var(--tt-black-soft); background-image: var(--tt-pattern-light); background-size: 200px 200px; padding: 46px 0 !important; } .tt-series-chips { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; } .tt-chip { display: inline-block; padding: 10px 22px; border: 1.5px solid rgba(255, 255, 255, 0.2); border-radius: 999px; color: var(--tt-white); text-decoration: none; font-size: 0.88rem; font-weight: 500; transition: all 0.2s ease; } .tt-chip:hover { border-color: var(--tt-accent-2); color: var(--tt-accent-2); box-shadow: 0 0 16px rgba(0, 229, 255, 0.35); } /* Nasz wybór — produkty WooCommerce */ .tt-featured-products ul.products { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; list-style: none; margin: 0; padding: 0; } /* PRAWDZIWA PRZYCZYNA "rozjechanych" siatek produktów: WooCommerce dokleja do