/* ========================================================================== WAXCAST — system projektowy -------------------------------------------------------------------------- Ten plik jest JEDYNYM miejscem, w którym żyją tokeny, nawigacja, stopka i wspólne klasy układu z makiety. Fragmenty treści wgrywane przez klienta (wtyczka „WAXCAST Treści”) tych rzeczy NIE definiują — używają ich. Skąd wartości: makieta waxcast-makieta_46. Występowały w niej trzy lekko rozjechane zestawy tokenów (strony główne, strony prawne + „projekt”, kalkulator). Poniżej jest jeden zestaw kanoniczny: wartości większościowe ze stron głównych, plus suma zmiennych dodatkowych (--glass, --ok, --warn, --wax, --panel), żeby fragment dowolnej strony miał komplet. Kolejność sekcji: 1. Tokeny 6. Stopka 2. Reset i typografia 7. Klasy układu z makiety 3. Układ (.wrap) 8. Treść z edytora (strony tekstowe) 4. Ruch (.reveal) 9. WooCommerce 5. Nawigacja 10. Kalkulator i fragmenty ========================================================================== */ /* 1. TOKENY ============================================================== */ :root{ --bg:#0A0A0A; --panel:#111110; --glass:rgba(13,13,11,.62); --glass2:rgba(18,18,15,.7); --line:rgba(191,181,154,.16); --line-strong:rgba(191,181,154,.42); --gold:#BFB59A; --gold-bright:#D8CCAD; --text:#EDEAE1; --muted:#93907F; --ok:#8FBF9A; --warn:#C9906B; --wax:#3E63C4; --serif:'Cormorant Garamond',Georgia,serif; --sans:'Hanken Grotesk',system-ui,-apple-system,sans-serif; --mono:'JetBrains Mono',ui-monospace,Consolas,monospace; /* Fonty grawerskie — czcionki do WYBORU grawerunku, nie typografia serwisu. Są zadeklarowane razem z resztą w assets/css/fonty.css; plik pobierze się dopiero wtedy, gdy na stronie faktycznie stanie tekst w tym kroju. */ --script:'Great Vibes',cursive; --roman:'Cinzel',serif; --wrap:1240px; --wrap-pad:28px; --wrap-pad-s:16px; /* Nawigacja — szczegóły w sekcji 5. --nav-wlasna wysokość samej nawigacji; nawigacja dostaje ją jako min-height, więc liczba i rzeczywistość się nie rozjadą, --admin-h przesunięcie od paska administratora (0 u kupującego), --nav-h odległość DOLNEJ krawędzi nawigacji od góry okna — to czyta przyklejona kolumna kalkulatora i każdy element sticky/fixed. */ --nav-wlasna:87px; --admin-h:0px; --nav-h:calc(var(--nav-wlasna) + var(--admin-h)); } /* 2. RESET I TYPOGRAFIA ================================================== */ *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{ background:var(--bg); color:var(--text); font-family:var(--sans); font-size:15.5px; font-weight:300; line-height:1.65; overflow-x:hidden; -webkit-font-smoothing:antialiased; } ::selection{background:var(--gold);color:#0A0A0A} img,video{max-width:100%;height:auto;display:block} a{color:var(--gold-bright)} /* Widoczny focus dla klawiatury. Makieta go nie miała — brak jest błędem dostępności, nie decyzją projektową, więc dokładamy go tutaj raz. */ :focus-visible{outline:2px solid var(--gold);outline-offset:3px} .wx-skip{ position:absolute;left:-9999px;top:0;z-index:1000; background:var(--gold);color:#0A0A0A; font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase; padding:14px 22px;text-decoration:none; } .wx-skip:focus{left:0} .screen-reader-text{ position:absolute!important;width:1px;height:1px;overflow:hidden; clip:rect(1px,1px,1px,1px);clip-path:inset(50%);white-space:nowrap; } /* 3. UKŁAD =============================================================== */ .wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--wrap-pad)} /* Sekcja na pełną szerokość okna, ale z wewnętrznym marginesem. */ .wx-full{width:100%;margin-inline:0} /* 4. RUCH ================================================================ */ .reveal{ opacity:0;transform:translateY(30px); transition:opacity 1s cubic-bezier(.2,.6,.2,1),transform 1s cubic-bezier(.2,.6,.2,1); } .reveal.in{opacity:1;transform:none} .reveal.from-left{transform:translateX(-46px)} .reveal.from-right{transform:translateX(46px)} .reveal.in.from-left,.reveal.in.from-right{transform:none} @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .reveal,.reveal.from-left,.reveal.from-right{opacity:1;transform:none;transition:none} } /* Bezpiecznik: gdyby JS nie wystartował, treść i tak musi być widoczna. Klasa wx-js jest dodawana do przez skrypt motywu. */ html:not(.wx-js) .reveal{opacity:1;transform:none} /* 5. NAWIGACJA =========================================================== */ /* mix-blend-mode:difference jest z makiety — nawigacja czyta się i na ciemnym tle, i na jasnym zdjęciu, bez drugiego wariantu kolorystycznego. WYSOKOŚĆ (poprawione 18.09.2026). Do wersji 1.0.0 nawigacja miała padding 22 px, a --nav-h stałe 78 px — wartość z makiety, w której podstrony miały w nawigacji tylko logo i „← Strona główna”. Motyw ma pełne menu wszędzie, a wysokość wyznacza najwyższy element: przycisk „Wyceń plik” (42 px) albo burger (48,5 px). Zmierzone: 87,1 px powyżej 900 px, 93,5 px w 561–900, 81,5 px do 560 — czyli 78 ZANIŻAŁO na każdej szerokości, a przyklejona kolumna kalkulatora chowała się zalogowanym 7 px pod nawigacją. Teraz jest odwrotnie: zmienna wyznacza wysokość (min-height, treść wyśrodkowana), a wartości są tymi zmierzonymi, więc wygląd się nie zmienia. min-height, nie height: gdyby treść kiedyś urosła, nawigacja urośnie z nią zamiast ją uciąć. */ .wx-nav{ position:fixed;top:0;left:0;right:0;z-index:100; min-height:var(--nav-wlasna); padding:0 var(--wrap-pad); display:flex;justify-content:space-between;align-items:center; mix-blend-mode:difference; } /* Strony bez własnego tła pod nawigacją (dokumenty, WooCommerce, wyniki wyszukiwania) dostają tło i kreskę zamiast trybu mieszania — na jednolitym tle difference dałby brudny, odwrócony kolor. */ .wx-nav--solid{ mix-blend-mode:normal; background:rgba(10,10,10,.85); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--line); } .logo{display:flex;flex-direction:column;line-height:1;text-decoration:none} .logo .wm{ font-family:var(--serif);font-size:22px;letter-spacing:.24em;font-weight:500;color:#fff; display:inline-flex;align-items:center; /* Makieta ma znak firmowy wersalikami. Nazwa witryny w ustawieniach WordPressa może być zapisana dowolnie („Waxcast”) — to jest miejsce, w którym wygląd przestaje zależeć od tego zapisu. */ text-transform:uppercase; } .logo .wm svg{width:13px;height:17px;margin-right:9px;flex:none} .logo .by{ font-family:var(--mono);font-size:8.5px;letter-spacing:.22em;text-transform:uppercase; color:#fff;opacity:.6;margin-top:5px; } .nav-links{display:flex;gap:26px;align-items:center;margin-left:auto;margin-right:28px;list-style:none} .nav-links a{ /* Bez tego w przedziale 901–999 px „Na gotowo” i „Z grafiki 2D” łamały się na dwie linie i nawigacja rosła do 121,7 px. Z menu z produkcji wszystko mieści się w jednym wierszu już od 901 px (zmierzone 18.09.2026). */ white-space:nowrap; font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase; color:#fff;opacity:.65;text-decoration:none;transition:opacity .2s; } .nav-links a:hover,.nav-links .current-menu-item > a{opacity:1} .nav-cta{ font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase; color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.5); padding:11px 22px;transition:opacity .2s;white-space:nowrap; } .nav-cta:hover{opacity:.7} .nav-back{ font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase; color:#fff;text-decoration:none;opacity:.7; } .nav-back:hover{opacity:1} .burger{display:none;background:none;border:0;cursor:pointer;padding:10px;margin-left:auto} .burger span{display:block;width:24px;height:1.5px;background:#fff;margin:6px 0;transition:.2s} .mmenu{ position:fixed;inset:0;z-index:200;background:#0A0A0A; display:none;flex-direction:column;justify-content:center;align-items:center;gap:34px; list-style:none; } .mmenu.open{display:flex} .mmenu a{font-family:var(--serif);font-size:30px;color:#fff;text-decoration:none;letter-spacing:.06em} .mmenu a.cta{ font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase; border:1px solid rgba(255,255,255,.5);padding:14px 30px;margin-top:14px; } .mmenu .mclose{ position:absolute;top:18px;right:20px;background:none;border:0;color:#fff; font-size:30px;line-height:1;cursor:pointer;padding:10px;font-family:var(--sans); } /* Zalogowany redaktor widzi pasek administratora — przypięta nawigacja chowałaby się pod nim. WordPress dokłada wtedy klasę .admin-bar do i sam odsuwa treść, ale elementów position:fixed nie rusza. --nav-h jest liczone PONOWNIE na , bo zmienna złożona z innych zmiennych rozwija się tam, gdzie ją zadeklarowano: potomkowie dziedziczą z :root gotowe 87 px i zmiana --admin-h na nic by im nie dała. Przesunięcie trafia wyłącznie do --nav-h (dla sticky/fixed). Treść w normalnym przepływie odsuwa już sam WordPress marginesem , więc odstępy liczone od --nav-wlasna nie dublują paska. */ body{--nav-h:calc(var(--nav-wlasna) + var(--admin-h))} .admin-bar{--admin-h:32px} .admin-bar .wx-nav{top:32px} .admin-bar .mmenu{top:32px} @media screen and (max-width:782px){ .admin-bar{--admin-h:46px} .admin-bar .wx-nav{top:46px} .admin-bar .mmenu{top:46px} } /* 6. STOPKA ============================================================== */ .wx-footer{ border-top:1px solid var(--line); padding:30px var(--wrap-pad); display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap; font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--muted); } .wx-footer a{text-decoration:none;color:inherit} .wx-footer a:hover{color:var(--gold-bright)} .wx-footer ul{list-style:none;display:inline} .wx-footer li{display:inline} .wx-footer li:not(:last-child)::after{content:" · "} /* 7. KLASY UKŁADU Z MAKIETY ============================================= Te klasy są kontraktem z fragmentami treści: fragment ich UŻYWA i nie redefiniuje. Ich lista jest w PROMPT-TRESC.md — jeżeli coś tu zmieniasz, zmień też tam. ====================================================================== */ .eyebrow{ font-family:var(--mono);font-size:11px;letter-spacing:.3em;text-transform:uppercase; color:var(--gold); } .btn{ display:inline-flex;align-items:center;gap:12px;white-space:nowrap;flex:none; background:var(--gold);color:#0A0A0A; font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase; padding:16px 30px;text-decoration:none;border:1px solid var(--gold);cursor:pointer; transition:background .2s,border-color .2s,color .2s; } .btn:hover{background:var(--gold-bright);border-color:var(--gold-bright)} .btn::after{content:"→"} .btn.ghost{background:none;color:var(--text);border-color:var(--line-strong)} .btn.ghost:hover{color:var(--gold-bright);border-color:var(--gold);background:none} /* Tło zdjęciowe/wideo: wspólny mechanizm dla .hero, .svc i .band. */ .media{position:absolute;inset:-12% 0;will-change:transform} .media img,.media video,.media .ph{width:100%;height:100%;object-fit:cover} .media .ph{ background:radial-gradient(ellipse at 50% 50%,#1a1410 0%,#0A0A0A 75%); display:flex;align-items:center;justify-content:center; } .media .ph span{ font-family:var(--mono);font-size:11px;letter-spacing:.3em;text-transform:uppercase; color:var(--muted); } .shade{ position:absolute;inset:0; background:linear-gradient(180deg,rgba(10,10,10,.3) 0%,rgba(10,10,10,.05) 42%,rgba(10,10,10,.9) 100%); } .veil{position:absolute;inset:0;background:rgba(10,10,10,.38)} /* HERO */ .hero{position:relative;height:100svh;min-height:560px;display:flex;align-items:flex-end;overflow:hidden} .hero .media img{animation:heroZoom 3s cubic-bezier(.2,.6,.2,1) both} @keyframes heroZoom{from{transform:scale(1.1)}to{transform:scale(1)}} .hero-content{position:relative;z-index:2;width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--wrap-pad) 70px} .hero .eyebrow{margin-bottom:20px} .hero h1{font-family:var(--serif);font-weight:500;font-size:clamp(44px,7.8vw,110px);line-height:.96;letter-spacing:-.01em} .hero h1 em{font-style:italic;color:var(--gold-bright)} .hero p{color:rgba(237,234,225,.85);max-width:440px;font-size:16px;margin-top:26px} .hero-anim{opacity:0;transform:translateY(26px);animation:heroIn 1s cubic-bezier(.2,.6,.2,1) forwards} .hero-anim.d1{animation-delay:.15s} .hero-anim.d2{animation-delay:.3s} /* d3 dołożone 2.09.2026: fragment Technologii ma cztery elementy w kaskadzie nagłówka, makieta przewidywała trzy. Krok opóźnienia zostaje ten sam. */ .hero-anim.d3{animation-delay:.45s} @keyframes heroIn{to{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){ .hero .media img{animation:none} .hero-anim{opacity:1;transform:none;animation:none} } /* PASY USŁUGOWE */ .svc{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;padding:90px 0} .svc .inner{position:relative;z-index:2;width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--wrap-pad);display:flex} .svc.right .inner{justify-content:flex-end} /* KARTA */ .card{ background:var(--glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); border:1px solid var(--line);padding:44px 42px;max-width:520px;width:100%;position:relative; } .card::before{ content:"";position:absolute;top:0;left:0;right:0;height:1px; background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.6; } .card .n{font-family:var(--mono);font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold)} .card h2{font-family:var(--serif);font-weight:500;font-size:clamp(36px,5vw,62px);line-height:1;margin:14px 0 10px} .card .sub{color:var(--muted);font-size:15px;margin-bottom:26px} .card ul{list-style:none;margin-bottom:28px} .card li{position:relative;padding:11px 0 11px 26px;border-bottom:1px solid var(--line);font-size:14px} .card li:last-child{border-bottom:none} .card li::before{content:"—";color:var(--gold);position:absolute;left:0;top:11px} .card .meta{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;padding-top:20px;border-top:1px solid var(--line-strong);margin-bottom:26px} .card .meta .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)} .card .meta .v{font-family:var(--serif);font-size:20px;color:var(--gold-bright);margin-top:4px} /* PAS ZE ZDJĘCIEM I PODPISEM */ .band{position:relative;overflow:hidden} .band .cap{ position:absolute;left:0;right:0;bottom:0;z-index:2;padding:26px var(--wrap-pad); background:linear-gradient(180deg,rgba(10,10,10,0),rgba(10,10,10,.85)); } .band .cap .wrap{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;padding:0} .band .cap .t{font-family:var(--serif);font-size:clamp(20px,2.6vw,30px);color:var(--text)} .band .cap .s{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)} /* PASEK WYRÓŻNIONY */ .abo{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(255,255,255,.015)} .abo .in{max-width:var(--wrap);margin:0 auto;padding:64px var(--wrap-pad);display:flex;justify-content:space-between;align-items:center;gap:36px;flex-wrap:wrap} .abo h2{font-family:var(--serif);font-weight:500;font-size:clamp(26px,3.6vw,44px);line-height:1.1;max-width:520px} .abo p{color:var(--muted);max-width:400px;margin-top:12px;font-size:14.5px} /* WEZWANIE KOŃCOWE */ .cta{padding:150px var(--wrap-pad);text-align:center} .cta h2{font-family:var(--serif);font-weight:500;font-size:clamp(36px,6.2vw,84px);line-height:1.02;margin-bottom:40px} .cta h2 em{font-style:italic;color:var(--gold-bright)} .cta .note{margin-top:26px;font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)} /* PANEL */ .panel{background:var(--panel);border:1px solid var(--line);padding:32px} /* AKORDEON (FAQ) Rozwijane pytania robimy natywnym
/ — bez ani jednej linii JavaScriptu. To nie jest oszczędność, tylko lepsze rozwiązanie: działa przed wykonaniem skryptów, obsługuje klawiaturę i czytniki ekranu bez atrybutów aria, a wyszukiwarka widzi treść odpowiedzi nawet zwiniętej. Dzięki temu fragment FAQ nie łamie zasady „zachowanie należy do motywu" — po prostu nie potrzebuje żadnego zachowania. To są style DOMYŚLNE. Fragment może je nadpisać własną klasą — reguły są zaskopowane pod kontenery treści, więc nie wyciekają na strony sklepowe. */ .wx-tresc details, .wx-doc details{border-bottom:1px solid var(--line)} .wx-tresc summary, .wx-doc summary{ cursor:pointer;list-style:none;padding:22px 40px 22px 0;position:relative; font-family:var(--serif);font-size:clamp(18px,2vw,22px);color:var(--text); } .wx-tresc summary::-webkit-details-marker, .wx-doc summary::-webkit-details-marker{display:none} .wx-tresc summary::after, .wx-doc summary::after{ content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%); font-family:var(--mono);font-size:20px;color:var(--gold);transition:transform .2s; } .wx-tresc details[open] summary::after, .wx-doc details[open] summary::after{content:"−"} .wx-tresc summary:hover, .wx-doc summary:hover{color:var(--gold-bright)} .wx-tresc details > *:not(summary), .wx-doc details > *:not(summary){color:var(--muted);font-size:15px;margin:0 0 18px;max-width:70ch} /* 8. TREŚĆ Z EDYTORA ===================================================== Strony tekstowe (regulamin, polityka prywatności) są zwykłymi stronami WordPressa. Skala typograficzna jest przeniesiona z makiety stron prawnych — inaczej klient dostałby dokument w domyślnych stylach. ====================================================================== */ /* Interlinia 1.7, nie 1.65 jak w reszcie serwisu — tak miały strony prawne w makiecie i tak się po prostu lepiej czyta długi tekst prawny. */ .wx-doc{max-width:820px;margin:0 auto;padding:150px var(--wrap-pad) 90px;line-height:1.7} .wx-doc .eyebrow{font-size:10px;letter-spacing:.22em} .wx-doc h1{font-family:var(--serif);font-weight:500;font-size:clamp(38px,6vw,56px);line-height:1.1;margin:14px 0 10px} .wx-doc h2{font-family:var(--serif);font-weight:500;font-size:26px;margin:44px 0 12px;color:var(--gold-bright)} .wx-doc h3{font-family:var(--serif);font-weight:500;font-size:20px;margin:32px 0 10px;color:var(--gold-bright)} .wx-doc p{color:var(--muted);margin:0 0 14px;font-size:15px} /* Listy w dokumentach. Makieta ich nie miała — regulamin i polityka były w niej samymi akapitami — ale w edytorze powstaną natychmiast, bo tak się pisze dokumenty prawne. Zamiast zostawiać domyślne znaczniki przeglądarki, ubieramy je w ten sam język, co reszta serwisu: znacznik na złoto, treść w kolorze tekstu drugoplanowego, rytm pionowy zgodny z akapitem. */ .wx-doc ul,.wx-doc ol{margin:0 0 18px;padding-left:26px} .wx-doc li{color:var(--muted);font-size:15px;margin-bottom:8px;padding-left:4px} .wx-doc li::marker{color:var(--gold)} .wx-doc ol{list-style:decimal} .wx-doc ol li::marker{font-family:var(--mono);font-size:12px;letter-spacing:.04em} .wx-doc li > ul,.wx-doc li > ol{margin:8px 0 0} .wx-doc li:last-child{margin-bottom:0} /* Zagnieżdżony poziom odróżniamy kształtem, nie tylko wcięciem. */ .wx-doc ul ul{list-style:circle} .wx-doc ol ol{list-style:lower-alpha} .wx-doc b,.wx-doc strong{color:var(--text);font-weight:500} .wx-doc a{color:var(--gold-bright);text-decoration:underline;text-underline-offset:3px} .wx-doc table{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:14px} .wx-doc th,.wx-doc td{border:1px solid var(--line);padding:10px 12px;text-align:left} .wx-doc th{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)} .wx-doc blockquote{border-left:2px solid var(--gold);padding-left:18px;margin:0 0 18px;color:var(--muted);font-style:italic} .wx-doc figure{margin:0 0 20px} .wx-doc .draft{ margin:26px 0 40px;border:1px dashed rgba(191,181,154,.45);padding:14px 18px; font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--gold-bright); } /* Wyrównania bloków WordPressa w kolumnie dokumentu. */ .wx-doc .alignleft{float:left;margin:0 20px 16px 0} .wx-doc .alignright{float:right;margin:0 0 16px 20px} .wx-doc .aligncenter{margin-left:auto;margin-right:auto} .wx-doc .alignwide,.wx-doc .alignfull{max-width:none} /* Lista wpisów i wyniki wyszukiwania — szablon zapasowy index.php. Serwis nie prowadzi dziś bloga, ale archiwum i wyszukiwarka muszą wyglądać jak reszta serwisu, a nie jak niestylowany HTML. */ .wx-wpis{border-bottom:1px solid var(--line);padding:26px 0} .wx-wpis:last-of-type{border-bottom:none} .wx-wpis h2{font-family:var(--serif);font-weight:500;font-size:28px;margin:0 0 6px} .wx-wpis h2 a{color:var(--text);text-decoration:none} .wx-wpis h2 a:hover{color:var(--gold-bright)} .wx-meta{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:10px} .wx-strony{font-family:var(--mono);font-size:11px;letter-spacing:.12em;margin-top:24px} .navigation.pagination{margin-top:36px;font-family:var(--mono);font-size:11px;letter-spacing:.12em} .navigation.pagination .page-numbers{padding:8px 12px;border:1px solid var(--line);text-decoration:none;color:var(--muted)} .navigation.pagination .current{color:#0A0A0A;background:var(--gold);border-color:var(--gold)} /* Formularze motywu (wyszukiwarka, komentarze) w palecie makiety. */ .wx-doc input[type=text],.wx-doc input[type=search],.wx-doc input[type=email], .wx-doc input[type=url],.wx-doc textarea{ background:var(--panel);border:1px solid var(--line);color:var(--text); font-family:var(--sans);font-size:15px;padding:12px 14px;width:100%;max-width:420px; } .wx-doc input[type=submit],.wx-doc button[type=submit]{ background:var(--gold);color:#0A0A0A;border:1px solid var(--gold);cursor:pointer; font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase; padding:14px 26px;margin-top:12px; } .wx-komentarze{margin-top:54px;border-top:1px solid var(--line);padding-top:34px} .wx-komentarze ol{list-style:none;margin:0} .wx-komentarze .comment-body{border-bottom:1px solid var(--line);padding:18px 0} /* 9. WOOCOMMERCE ========================================================= Zakres celowo minimalny: doprowadzić domyślne szablony WooCommerce do ciemnej palety i typografii makiety, bez przeprojektowywania ścieżki zakupowej. Makieta nie zawiera koszyka ani zamawiania — to jest luka w materiałach źródłowych, zgłoszona osobno. ====================================================================== */ .wx-shop{max-width:var(--wrap);margin:0 auto;padding:calc(var(--nav-wlasna) + 42px) var(--wrap-pad) 90px} .wx-shop h1{font-family:var(--serif);font-weight:500;font-size:clamp(32px,5vw,52px);line-height:1.1;margin-bottom:28px} .wx-shop h2,.wx-shop h3{font-family:var(--serif);font-weight:500;color:var(--gold-bright)} .woocommerce table{border-collapse:collapse;width:100%} .woocommerce table th,.woocommerce table td{border:1px solid var(--line);padding:12px;color:var(--text)} .woocommerce table th{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)} .woocommerce .button, .woocommerce button.button, .woocommerce input.button, .woocommerce a.button, .woocommerce #respond input#submit{ background:var(--gold);color:#0A0A0A;border:1px solid var(--gold);border-radius:0; font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase; padding:16px 30px;font-weight:400;transition:background .2s; } .woocommerce .button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce a.button:hover, .woocommerce #respond input#submit:hover{background:var(--gold-bright);color:#0A0A0A} .woocommerce input[type=text],.woocommerce input[type=email],.woocommerce input[type=tel], .woocommerce input[type=password],.woocommerce input[type=number],.woocommerce textarea, .woocommerce select,.woocommerce .select2-selection{ background:var(--panel);border:1px solid var(--line);color:var(--text); font-family:var(--sans);padding:12px 14px;border-radius:0; } .woocommerce-message,.woocommerce-info,.woocommerce-error,.woocommerce-notice{ background:var(--panel);border-top:2px solid var(--gold);color:var(--text); list-style:none;padding:16px 20px;margin-bottom:22px; } .woocommerce-error{border-top-color:var(--warn)} .woocommerce-message{border-top-color:var(--ok)} .woocommerce .price,.woocommerce .amount{font-family:var(--serif);font-size:20px;color:var(--gold-bright)} .woocommerce ul.products li.product{background:var(--panel);border:1px solid var(--line);padding:18px} .woocommerce ul.products li.product .woocommerce-loop-product__title{font-family:var(--serif);font-size:22px;color:var(--text)} .woocommerce nav.woocommerce-breadcrumb{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:24px} .woocommerce nav.woocommerce-breadcrumb a{color:var(--muted)} /* Strony sklepowe tej witryny są zbudowane z BLOKÓW WooCommerce (wp:woocommerce/cart, wp:woocommerce/checkout), a nie z klasycznych shortcode'ów, więc reguły „.woocommerce .button" wyżej ich nie dotyczą — blokowy markup ma własne rodziny klas. To poniżej domyka tę samą rzecz, którą robią reguły wyżej: paletę. Układu nie ruszamy. */ .wp-block-button__link, .wc-block-components-button, .wc-block-grid__product-add-to-cart .add_to_cart_button{ background:var(--gold)!important;color:#0A0A0A!important; border:1px solid var(--gold);border-radius:0; font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase; padding:14px 26px; } .wp-block-button__link:hover, .wc-block-components-button:hover{background:var(--gold-bright)!important} .wc-block-cart__empty-cart__title, .wc-block-components-title{font-family:var(--serif);font-weight:500;color:var(--text)} /* Zastępnik zdjęcia produktu jest jasnym plikiem WooCommerce — na ciemnym tle świeci białym prostokątem. Przygaszamy go, zamiast podmieniać plik wtyczki. */ .woocommerce-placeholder{opacity:.14;filter:invert(1)} .wc-block-components-product-name, .wc-block-grid__product-title{color:var(--text);font-family:var(--serif)} .wc-block-components-product-price, .wc-block-grid__product-price{color:var(--gold-bright);font-family:var(--serif)} .wc-block-components-panel, .wc-block-components-totals-wrapper, .wc-block-cart-items__row{border-color:var(--line)!important} .wc-block-components-text-input input, .wc-block-components-textarea, .wc-block-components-combobox input{ background:var(--panel)!important;border:1px solid var(--line)!important; color:var(--text)!important;border-radius:0!important; } /* 10. KALKULATOR I FRAGMENTY ============================================ Wtyczka „WAXCAST Casting” opakowuje wgrany plik w .waxcast-calculator, a sam plik od klienta zawiera w środku .waxcast-calc. Motyw nie może zakładać niczego o wnętrzu — poza tym, że ma dostać pełną szerokość i że motyw nie wolno mu przechwytywać kliknięć. ====================================================================== */ .waxcast-calculator, .wx-tresc{width:100%;max-width:none;margin-inline:0} /* Fragment i kalkulator dostają pełną szerokość okna niezależnie od tego, w jakim kontenerze wylądowały. Bez tego wracamy do problemu 645 px. */ .wx-main--fragment{width:100%;max-width:none;padding:0} .wx-main--fragment > .waxcast-calculator, .wx-main--fragment > .wx-tresc{width:100%} /* Kalkulator stoi pod nawigacją, więc potrzebuje odsunięcia — makieta dawała je w .grid.wrap wewnątrz pliku, ale plik jest wymienny i motyw nie może na tym polegać. */ .wx-main--kalkulator{padding-top:calc(var(--nav-wlasna) + 34px)} /* 10a. EKRAN „WKRÓTCE” =================================================== Tryb widoczności WooCommerce — patrz inc/wkrotce.php. Kolumnę, nagłówki i odsyłacze daje .wx-doc (ten sam układ co regulamin); tu tylko to, czego dokument nie ma: wstęp, wiersz kontaktu i tabelka danych firmy. ====================================================================== */ .wx-wkrotce-wstep{color:var(--text);font-size:17px;max-width:60ch;margin:6px 0 22px} .wx-wkrotce-kontakt{display:flex;flex-wrap:wrap;gap:10px 28px;font-family:var(--mono);font-size:12px;letter-spacing:.08em} .wx-doc .wx-wkrotce-kontakt a{text-decoration:none;border-bottom:1px solid var(--line-strong);padding-bottom:2px} .wx-wkrotce-firma{display:grid;grid-template-columns:max-content 1fr;gap:10px 28px;margin:0 0 18px} .wx-wkrotce-firma dt{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);padding-top:5px} .wx-wkrotce-firma dd{color:var(--text);font-size:15px;margin:0} @media(max-width:560px){ .wx-wkrotce-firma{grid-template-columns:1fr;gap:2px} .wx-wkrotce-firma dd{margin-bottom:12px} } /* 11. RESPONSYWNOŚĆ ===================================================== */ @media(max-width:900px){ /* burger (48,5 px) przy paddingu z desktopu — zmierzone 93,5 px */ :root{--nav-wlasna:94px} .nav-links,.nav-cta{display:none} .burger{display:block} } @media(max-width:560px){ /* burger przy węższym paddingu — zmierzone 81,5 px */ :root{--wrap-pad:var(--wrap-pad-s);--nav-wlasna:82px} .wx-nav{padding:0 16px} .hero-content{padding:0 16px 56px} .svc{padding:70px 0;min-height:auto} .card{padding:30px 24px} .abo .in{padding:48px 16px} .cta{padding:100px 16px} .wx-doc{padding:120px 16px 70px} .band .cap{padding:20px 16px} .wx-footer{padding:26px 16px} } /* 12. WIDEO TŁA ========================================================= Wideo gra na każdym urządzeniu (decyzja właściciela z 2.09.2026, przy przekodowanych plikach: komplet 5,9 MB, hero 0,8 MB). Źródło nadal siedzi w data-src i trafia do src dopiero ze skryptu motywu — sam CSS by nie wystarczył, bo przeglądarka pobiera plik z