/* ========================================================================== WILCZY ŁUP — strona marki, tokeny 1:1 z wilczylup-sklep-theme/wilczylup.css (fonty self-hosted, paleta, geometria kanciasta border-radius:0). Skala typograficzna WEB jest propozycją D2a (ARCHITEKTURA_v0.4.md §5) — NIE nadpisuje Typografia.md (druk), czeka na ratyfikację (O12). ========================================================================== */ /* ---------- 1. FONTY SELF-HOSTED (kopie 1:1 z motywu sklepu) ---------- */ @font-face{font-family:'Big Shoulders Display';font-style:normal;font-weight:800 900;font-display:swap; src:url('/fonts/bigshouldersdisplay-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Big Shoulders Display';font-style:normal;font-weight:800 900;font-display:swap; src:url('/fonts/bigshouldersdisplay-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;} @font-face{font-family:'Work Sans';font-style:normal;font-weight:300 600;font-display:swap; src:url('/fonts/worksans-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Work Sans';font-style:normal;font-weight:300 600;font-display:swap; src:url('/fonts/worksans-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;} /* Work Sans Italic (zmienna, oś wght; OFL 1.1 — src/fonts/OFL-WorkSans.txt). Dodana 2026-09-30 za zgodą właściciela: cytat na slajdzie 6 karuzeli QR v2 ma być prawdziwą kursywą, nie syntetycznym pochyleniem. Te same zakresy znaków co krój pionowy; przeglądarka pobiera plik dopiero przy pierwszym użyciu font-style:italic. */ @font-face{font-family:'Work Sans';font-style:italic;font-weight:300 600;font-display:swap; src:url('/fonts/worksans-italic-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Work Sans';font-style:italic;font-weight:300 600;font-display:swap; src:url('/fonts/worksans-italic-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;} @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 700;font-display:swap; src:url('/fonts/jetbrainsmono-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 700;font-display:swap; src:url('/fonts/jetbrainsmono-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;} /* ---------- 2. TOKENY (identyczne ze sklepem, D2) ---------- */ :root{ --wl-orange:#F1611F; --wl-lime:#9ABF38; --wl-sky:#59B1DA; --wl-magenta:#D787B0; --wl-black:#000000; --wl-white:#FFFFFF; /* --wl-paper: token = --ivory z ratyfikowanego decku (deck_components.md §1) — tekst chipa na czerni, tekst na czarnym pasie i w stopce. Unifikacja 2026-09-29: wchodzi do systemu globalnie (używają go .wl-chip, .wl-band, .wl-footer), a nie tylko strona produktu. */ --wl-paper:#FAF7F2; /* --wl-muted: kontrast 5,38:1 na bieli (zmierzone, WCAG AA ≥4,5:1 dla tekstu 11-13 px). Wyłącznie na BIELI (meta kafla, EAN, noty) — na czerni 3,9:1, na polu koloru nie używać (ux-ui-director poz. 5, 2026-09-11; SPEC_unifikacji §1). */ --wl-muted:#6E6A62; --wl-display:"Big Shoulders Display","Arial Narrow",Impact,sans-serif; --wl-body:"Work Sans",system-ui,-apple-system,sans-serif; --wl-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace; --wl-rule:2px solid var(--wl-black); /* kreska sekcji, belka, chip uzupełniający */ --wl-hair:1px solid var(--wl-black); /* wiersze FAQ, tabele, separatory kotwic */ --wl-ctl:48px; /* JEDNA wysokość kontrolki (przycisk, link menu, link akcji) */ --wl-ease:cubic-bezier(.22,1,.36,1); --wl-pad:20px; /* ≥800 px: 40 px (ujednolica dawne 20 z site.css i 40 z hub.css) */ --wl-col:1120px; --wl-accent:var(--wl-orange); /* alias historyczny (dosing); nowy kod używa --wl-orange */ } @media (min-width:800px){:root{--wl-pad:40px}} /* ---------- 3. KANON: promień 0 wszędzie (D3), bez cieni/blasków ---------- */ *,*::before,*::after{border-radius:0 !important;box-sizing:border-box;} body *:not(:focus-visible){box-shadow:none;text-shadow:none;} /* FOKUS — jeden na cały serwis (SPEC_unifikacji §11): podwójny pierścień, widoczny na każdym tle (na czerni odwrócony, patrz `.wl-on-black`). Zastępuje pomarańczowy pierścień (3,3:1 na bieli) i pierścienie lokalne. */ :focus-visible{outline:3px solid var(--wl-black);outline-offset:2px;box-shadow:0 0 0 7px var(--wl-white);} [hidden]{display:none !important;} img,figure{border-radius:0 !important;} /* ---------- 4. BAZA / SKALA WEB (propozycja D2a, mobile >=375px) ---------- */ html{-webkit-text-size-adjust:100%; /* Stały rezerwat na pasek przewijania: otwarcie arkusza menu (html{overflow:hidden}) nie przesuwa układu na desktopie z klasycznym paskiem (OCENA_UX_seo-rafal_v1.md; wcześniej gutter tylko pod `nav-open`). */ scrollbar-gutter:stable;} body{ font-family:var(--wl-body); font-weight:400; font-size:16px; /* D2a — próg zoomu iOS Safari na focusie pola */ line-height:1.55; color:var(--wl-black); background:var(--wl-white); -webkit-font-smoothing:antialiased; margin:0; } main{display:block;} a{color:var(--wl-black);} small,.wl-small{font-size:0.8125rem;} /* ~13px, D2a small/caption */ h1,h2,h3,h4,.wl-display{ font-family:var(--wl-display); font-weight:900; text-transform:uppercase; line-height:0.92; letter-spacing:-0.01em; color:var(--wl-black); margin:0 0 0.4em 0; overflow-wrap:break-word; max-width:100%; } /* Równe łamanie nagłówków (fix round 1, OCENA_BRAND_wdrozenia_v1 pkt 5): bez sierot typu „MA.” w H1 404 i „ŁUP” w drugiej linii. */ h1,h2{text-wrap:balance;} .hub-display{text-wrap:wrap;} /* saga hubu: choreografia bez zmian */ /* `clip` zamiast `hidden`: `overflow-x:hidden` na / tworzy KONTENER SCROLLA, przez co `view-timeline` na hubie mierzy postęp względem czegoś, co się nie przewija (oś zastyga na 100 %). `clip` przycina bez tworzenia scrollportu i nie zmienia niczego na pozostałych stronach. */ html,body{overflow-x:clip;} h1{font-size:clamp(2.25rem,1.4rem + 4vw,4.5rem);} h2{font-size:clamp(1.5rem,1.2rem + 1.6vw,2.25rem);} h3{font-size:1.25rem;font-weight:800;} /* ETYKIETA — mono 600 / 12 px / .16em (zastępuje `.wl-eyebrow`, `.hub-eyebrow`, SPEC_unifikacji §1). */ .wl-lbl{ display:block;font:600 12px/1.2 var(--wl-mono);letter-spacing:0.16em;text-transform:uppercase; color:inherit;margin:0 0 12px;max-width:none; } p{margin:0 0 1em 0;max-width:62ch;} .wl-rule{border:0;border-top:var(--wl-rule);margin:0;} /* IKONY — strzałki i znaki jako SVG (partials/icon.njk). Podzbiór JetBrains Mono nie ma ↗ → ← ↓. */ .wl-ic{width:12px;height:12px;flex:none;display:block;} .wl-ic path{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:square;stroke-linejoin:miter;} /* Strzałka wewnątrz zdania (link w akapicie): w linii z tekstem, bez kolumny flex. */ .wl-ic--inline{display:inline-block;vertical-align:-1px;margin-left:6px;} /* ---------- 5. LAYOUT / KONTENER ---------- */ /* Kolumna treści = 1120 px na każdej stronie (SPEC_unifikacji §1): padding poziomy `--wl-pad` (20 / 40 px od 800). */ .wl-section{max-width:calc(var(--wl-col) + 2 * var(--wl-pad));margin:0 auto;padding:48px var(--wl-pad);} .wl-section--tight{padding-top:28px;padding-bottom:28px;} /* SEKCJA podstrony (O marce, FAQ, Produkty, produkt): pełna szerokość + wewnętrzna kolumna 1120. */ .wl-sec{padding:48px var(--wl-pad);} .wl-sec__in{max-width:var(--wl-col);margin:0 auto;} .wl-sec--flush{padding-top:0;} @media (min-width:800px){ .wl-sec{padding-top:96px;padding-bottom:96px;} .wl-sec--flush{padding-top:0;} } /* WZÓR NAGŁÓWKA SEKCJI (SPEC_unifikacji §8.2): kreska 2 px → 16 px → etykieta mono → 12 px → H2 display → 14 px → podtytuł; nagłówek → treść 28 px. Zastępuje `.wl-block__title`, `.linia__head`, kreski `.pas__inner` / `.stado__inner` i szare kreski #E4E0D8. Etykieta nigdy nie jest H2. */ .wl-sh{border-top:var(--wl-rule);padding-top:16px;margin:0 0 28px;} .wl-sh__h{ font:900 clamp(1.875rem,1.25rem + 2.6vw,3.25rem)/.92 var(--wl-display);text-transform:uppercase; letter-spacing:-.01em;margin:0;max-width:22ch; } .wl-sh__sub{font-size:16px;line-height:1.45;max-width:52ch;margin:14px 0 0;} .wl-two{display:grid;gap:24px;} .wl-two > .wl-sh{margin:0;} @media (min-width:800px){ .wl-two{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:56px;} /* prawa kolumna startuje od tej samej kreski co nagłówek (etykieta + H2 po lewej, treść po prawej) */ .wl-two__side{border-top:var(--wl-rule);padding-top:16px;} } .wl-prose p{max-width:66ch;} .wl-sec__after,.wl-tiles.wl-sec__after{margin-top:56px;} .wl-sec__link{margin:24px 0 0;} .wl-sec__links{display:flex;flex-wrap:wrap;gap:0 24px;max-width:none;} .wl-band .wl-two__side{border-top-color:var(--wl-paper);} .wl-prose p:last-child{margin-bottom:0;} /* ---------- 6. NAGŁÓWEK / STOPKA (reżim PEŁNY, D1) ---------- */ /* SKIP-LINK — widoczny dopiero na focusie, ale ZAWSZE pierwszy w kolejności tabulacji. Na hubie jest ich dwa: do treści i wprost do linii produktów (#produkty), bo tam prowadzi jedyna nawigacja strony i cel 301 z /products/ (ux-ui-director poz. 14). */ .wl-skip{ position:absolute;left:-9999px;top:0;z-index:100; font-family:var(--wl-mono);font-weight:700;font-size:0.8125rem;letter-spacing:0.1em; text-transform:uppercase;background:var(--wl-black);color:var(--wl-white); padding:12px 16px;text-decoration:none; } .wl-skip:focus-visible,.wl-skip:focus{left:0;outline:3px solid var(--wl-orange);outline-offset:-3px;box-shadow:none;} /* NAGŁÓWEK (jeden partial: hub, podstrony, strony skupione, arkusz) — SPEC_unifikacji §3. Belka min. 72 px (padding 12 + kontrolka 48), wnętrze 1200 px, kreska dolna 2 px. Sticky (podstrony); hub: `fixed` (hub.css §2). */ .wl-header{position:sticky;top:0;z-index:50;background:var(--wl-white);border-bottom:var(--wl-rule);} .wl-header__inner{ max-width:calc(var(--wl-col) + 2 * var(--wl-pad));margin:0 auto;min-height:72px;padding:12px var(--wl-pad); display:flex;align-items:center;justify-content:space-between;gap:24px; } /* LOGO — sama plakietka (Brandbook V3 s.18–20): 36 px (<800) / 40 px, nigdy < 32 px; pole ochronne ≥ ⅓ wysokości (belka 72 px daje 16 px nad i pod); bez kafla, obrysu, cienia i napisu obok (nazwa tylko w `alt`). */ .wl-logo{display:inline-flex;align-items:center;flex:none;line-height:0;text-decoration:none;} .wl-logo img{display:block;height:36px;width:auto;} .wl-logo .wl-logo__neg{display:none;} @media (min-width:800px){.wl-logo img{height:40px;}} .wl-nav{display:flex;align-items:center;gap:8px;} .wl-nav__list{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0;} .wl-nav__list li{margin:0;} /* LINK MENU (B1) — mono 700 / 12 px / .10em, 48 px; hover = blok pomarańczowy z czarnym tekstem (6,4:1); bieżący = kreska 3 px pod tekstem (bez animacji); zero podkreśleń i obrysów. */ .wl-nav__link{ position:relative;display:inline-flex;align-items:center;height:var(--wl-ctl);padding:0 12px; font:700 12px/1 var(--wl-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--wl-black);text-decoration:none; } .wl-nav__link::after{ content:"";position:absolute;left:12px;right:12px;bottom:9px;height:3px;background:currentColor; transform:scaleX(0);transform-origin:left center; } .wl-nav__link[aria-current="page"]::after,.wl-nav__link[aria-current="true"]::after{transform:scaleX(1);} /* `true` = „jesteś w tej sekcji” (podstrony /niezbednik//) */ .wl-nav__link:hover{background:var(--wl-orange);color:var(--wl-black);} .wl-nav__link:active{transform:translateY(1px);} /* Przycisk „Menu” — pokazywany dopiero po zdjęciu `hidden` przez src/js/nav.js (i tylko w trybie zwiniętym). */ .wl-nav .wl-menu-btn{display:none;} .wl-menu-btn__icon{display:block;width:18px;height:14px;fill:currentColor;flex:none;} /* ARKUSZ MENU (B1) — pełny ekran, pomarańcz (język snu), z-index 60 (nagłówek 50, skip-link 100). Belka arkusza = ten sam układ co nagłówek: logo (plik pełny na pomarańczu) + „Zamknij”. Pozycje display 900, kreska 2 px pod każdą, strzałka → po prawej; bieżąca = czarny blok, hover = biały. Dół: Alfa w biegu (dekoracja) nad SKLEP. */ html.nav-open{overflow:hidden;} .wl-sheet{ --wl-gut:max(var(--wl-pad),calc(50% - 560px)); position:fixed;inset:0;z-index:60;background:var(--wl-orange);color:var(--wl-black);display:flex;flex-direction:column; overflow-y:auto;animation:wl-sheet-in .16s ease-out; } .wl-sheet[hidden]{display:none;} @keyframes wl-sheet-in{from{opacity:0;}to{opacity:1;}} .wl-sheet__bar{ flex:none;min-height:72px;padding:12px var(--wl-gut);display:flex;justify-content:space-between;align-items:center; border-bottom:var(--wl-rule); } .wl-sheet__list{list-style:none;margin:0;padding:0;flex:1;display:flex;flex-direction:column;} .wl-sheet__list > li{margin:0;} .wl-sheet__list > .wl-sheet__foot{margin-top:auto;} .wl-sheet__list > li > a:not(.wl-btn){ display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:0 var(--wl-gut); border-bottom:var(--wl-rule);font:900 40px/1 var(--wl-display);text-transform:uppercase;letter-spacing:-0.01em; color:var(--wl-black);text-decoration:none; } .wl-sheet__list > li > a:not(.wl-btn) .wl-ic{width:20px;height:20px;} .wl-sheet__list > li > a[aria-current="page"],.wl-sheet__list > li > a[aria-current="true"]{background:var(--wl-black);color:var(--wl-white);} .wl-sheet__list > li > a:not(.wl-btn):hover{background:var(--wl-white);color:var(--wl-black);} .wl-sheet__foot{ margin-top:auto;position:sticky;bottom:0;background:var(--wl-orange); padding:16px var(--wl-gut) max(20px,env(safe-area-inset-bottom));display:grid;gap:10px; } .wl-sheet__alfa{height:84px;width:auto;justify-self:end;margin-bottom:-2px;} .wl-sheet__hint{font:500 11px/1.3 var(--wl-mono);letter-spacing:0.08em;text-transform:uppercase;color:var(--wl-black);margin:0;max-width:none;} @media (min-width:800px){ .wl-sheet__foot .wl-btn{max-width:360px;} .wl-sheet__list > li > a:not(.wl-btn){min-height:112px;font-size:72px;} .wl-sheet__list > li > a:not(.wl-btn) .wl-ic{width:32px;height:32px;} } /* Mobile (≤767): logo + SKLEP + „Menu”; lista w nagłówku zwinięta do samego SKLEPU, gdy JS działa. Bez JS lista jest zawijanym rzędem linków pod logo (wzorzec z dawnego @media 480). */ @media (max-width:767px){ .wl-header__inner{gap:12px;} html.nav-js .wl-nav .wl-menu-btn{display:inline-flex;order:2;} /* na telefonie: SKLEP, potem „Menu” */ html.nav-js .wl-nav__list li:not(.wl-nav__shop-li){display:none;} .wl-nav__shop-li .wl-btn{padding:0 14px;} html:not(.nav-js) .wl-header__inner{flex-wrap:wrap;} html:not(.nav-js) .wl-nav{width:100%;} html:not(.nav-js) .wl-nav__list{flex-wrap:wrap;} /* strona skupiona (`data-compact`, bez skryptów): logo + „Produkty” + SKLEP zawsze w jednym wierszu */ html:not(.nav-js) [data-compact] .wl-header__inner{flex-wrap:nowrap;} html:not(.nav-js) [data-compact] .wl-nav{width:auto;} html:not(.nav-js) [data-compact] .wl-nav__list{flex-wrap:nowrap;} } @media (prefers-reduced-motion:reduce){ .wl-header{position:static;} .wl-sheet{animation:none;} } /* Kotwice pod sticky belką: 72 px belki + 16 px oddechu (SPEC_unifikacji §12). */ main [id]{scroll-margin-top:88px;} /* STOPKA (jedna: hub, podstrony, strony skupione) — czarna, `.wl-on-black`; kreska 2 px w kolorze papieru zamyka przejście z czarnego pasa. Etykiety kolumn w pomarańczu (6,4:1), linki w papierze (19,6:1). SPEC_unifikacji §10. */ .wl-footer{background:var(--wl-black);color:var(--wl-paper);border-top:2px solid var(--wl-paper);margin:0;} .wl-footer__inner{max-width:calc(var(--wl-col) + 2 * var(--wl-pad));margin:0 auto;padding:48px var(--wl-pad) 32px;} @media (min-width:800px){.wl-footer__inner{padding:72px var(--wl-pad) 40px;}} .wl-footer__top{ display:flex;justify-content:space-between;align-items:flex-end;gap:20px;padding-bottom:24px; border-bottom:2px solid var(--wl-paper); } .wl-footer__top .wl-logo img{height:48px;} .wl-footer__claim{font:900 22px/.95 var(--wl-display);text-transform:uppercase;text-align:right;margin:0;color:var(--wl-white);} .wl-footer__cols{display:grid;grid-template-columns:1fr;gap:8px 32px;margin-top:8px;} @media (min-width:560px){.wl-footer__cols{grid-template-columns:1fr 1fr;}} @media (min-width:800px){.wl-footer__cols{grid-template-columns:1.3fr 1fr 1fr 1.2fr;}} .wl-footer__col{margin:0;} .wl-footer__h{font:600 12px/1.2 var(--wl-mono);letter-spacing:.16em;text-transform:uppercase;margin:24px 0 6px;color:var(--wl-orange);} .wl-footer ul{list-style:none;margin:0;padding:0;} .wl-footer li{margin:0;} .wl-footer__col a,.wl-footer__row a{ display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 4px;margin-left:-4px; font:700 12px/1.2 var(--wl-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--wl-paper);text-decoration:none; } @media (min-width:800px){.wl-footer__col a{min-height:34px;}} .wl-footer__col a:hover,.wl-footer__row a:hover{background:var(--wl-orange);color:var(--wl-black);} .wl-footer__sq{width:10px;height:10px;background:var(--sku);flex:none;} .wl-footer__note{font:700 12px/1.2 var(--wl-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--wl-paper);} /* Wariant `minimal` (strony skupione): góra z logo + rząd linków + linia prawna. */ .wl-footer__row{display:flex;flex-wrap:wrap;gap:0 20px;margin-top:8px;} .wl-footer__legal{ font:400 13px/1.5 var(--wl-body);letter-spacing:normal;text-transform:none;color:var(--wl-paper); margin:32px 0 0;padding-top:16px;border-top:2px solid var(--wl-paper);max-width:none; } /* Zapobiega łamaniu NIP/REGON w połowie numeru w wąskich kolumnach stopki (triage Rafała A, poz. A2). */ .wl-nowrap{white-space:nowrap;} /* Ukrycie wizualne bez usuwania z drzewa dostępności (etykiety pól, nazwa marki przy plakietce hubu). */ .wl-sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip-path:inset(50%);white-space:nowrap;border:0; } /* ---------- 7. POWIERZCHNIE (reguła powierzchni SPEC_unifikacji §5.1) ---------- */ /* Czerń (pas, stopka, belka na ciemnym kadrze): przycisk pomarańczowy, fokus odwrócony. Pole koloru (otwarcia, hero produktu, 0 %, arkusz): przycisk czarny. Biel: czarny (K1). */ .wl-on-black,.wl-band,.wl-footer{color:var(--wl-paper);} .wl-on-black :focus-visible,.wl-band :focus-visible,.wl-footer :focus-visible{ outline-color:var(--wl-white);box-shadow:0 0 0 7px var(--wl-black); } /* ---------- 8. PRZYCISKI — ranga 1 `.wl-btn` + ranga 2 `.wl-link` (SPEC_unifikacji §5) ---------- */ /* Jedna forma, jeden rozmiar (48 px), jedno rozstrzelenie (.10em), jeden hover (blok pomarańczowy), K1: czarny. */ .wl-btn{ --bg:var(--wl-black);--fg:var(--wl-white);--bg-h:var(--wl-orange);--fg-h:var(--wl-black); display:inline-flex;align-items:center;justify-content:center;gap:10px; min-height:var(--wl-ctl);padding:0 20px;border:0;cursor:pointer; font:700 12px/1 var(--wl-mono);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;white-space:nowrap; background:var(--bg);color:var(--fg); } .wl-btn:hover{background:var(--bg-h);color:var(--fg-h);} .wl-btn:active{transform:translateY(1px);} .wl-btn .wl-ic{margin-right:-2px;} .wl-btn--block{display:flex;width:100%;} /* reguła powierzchni — wspólna dla wszystkich tłumaczeń koloru */ .wl-on-black .wl-btn,.wl-band .wl-btn,.wl-footer .wl-btn{--bg:var(--wl-orange);--fg:var(--wl-black);--bg-h:var(--wl-white);--fg-h:var(--wl-black);} .wl-on-color .wl-btn,.wl-sheet .wl-btn{--bg:var(--wl-black);--fg:var(--wl-white);--bg-h:var(--wl-white);--fg-h:var(--wl-black);} /* Wyłączony: na stronie nie występuje. Gdyby się pojawił: opacity .4, cursor:not-allowed + aria-disabled. */ .wl-btn[aria-disabled="true"]{opacity:.4;cursor:not-allowed;} /* Ranga 2 — link akcji: ten sam krój, kreska 2 px pod tekstem (12 px od dołu), hover = blok pomarańczowy. */ .wl-link{ display:inline-flex;align-items:center;gap:8px;min-height:var(--wl-ctl);padding:0 2px; font:700 12px/1 var(--wl-mono);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--wl-black); background:linear-gradient(currentColor,currentColor) left calc(100% - 12px)/100% 2px no-repeat; } .wl-link:hover{background:var(--wl-orange);color:var(--wl-black);} .wl-on-color .wl-link:hover{background:var(--wl-white);} .wl-on-black .wl-link,.wl-band .wl-link{color:var(--wl-paper);} .wl-on-black .wl-link:hover,.wl-band .wl-link:hover{background:var(--wl-orange);color:var(--wl-black);} .wl-link:active{transform:translateY(1px);} /* Link w treści akapitu (np. „Ile podawać” w `.wl-id__dose`): zwykłe podkreślenie Work Sans 600; hover pogrubia podkreślenie do 4 px, BEZ koloru SKU (audyt poz. 6). */ .wl-textlink{ font-weight:600;color:inherit;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px; } .wl-textlink:hover{text-decoration-thickness:4px;} /* CHIP KLASY (jeden; ratyfikacja W1 — werdykt brand-guardiana 16.09, SPEC_unifikacji §6): czarny = karma pełnoporcjowa, papier z kreską 2 px = uzupełniająca. Kreska to rozróżnienie klasy, nie łatka kontrastu. Zawsze `Karma ` przed skrótem (warunek ratyfikacji). */ .wl-chip{ display:inline-block;font:700 10px/1.25 var(--wl-mono);letter-spacing:.08em;text-transform:uppercase; background:var(--wl-black);color:var(--wl-paper);padding:3px 7px; } .wl-chip--c{background:var(--wl-paper);color:var(--wl-black);border:var(--wl-rule);padding:1px 5px;} /* ---------- 9. OTWARCIE PODSTRONY `.wl-ph` (SPEC_unifikacji §8.1) ---------- Pole koloru (`--field`, domyślnie pomarańcz; produkt ma własne hero v4 w kolorze SKU): H1 jako PIERWSZY tekst sekcji (warunek SEO), lede, meta (chipy), Alfa stoi na dolnej krawędzi pola. Tekst czarny (6,4:1). Pieczęć 100/0 tylko na O marce i FAQ (decyzja właściciela 2026-09-29); stoi po przeciwnej stronie Alfy niż tekst i nie dotyka lede (brand-guardian OCENA_BRAND_propozycji_v1 p.6). */ .wl-ph{background:var(--field,var(--wl-orange));color:var(--wl-black);} .wl-ph__in{max-width:calc(var(--wl-col) + 2 * var(--wl-pad));margin:0 auto;padding:40px var(--wl-pad) 0;display:grid;gap:20px;} .wl-ph__txt{padding-bottom:40px;} .wl-ph__h1{ font:900 clamp(2.5rem,1.4rem + 4.6vw,5.5rem)/.88 var(--wl-display);text-transform:uppercase;letter-spacing:-.012em; margin:0;max-width:14ch;overflow-wrap:normal; } .wl-ph__lede{font-size:18px;line-height:1.5;max-width:46ch;margin:18px 0 0;} .wl-ph__meta{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;margin-top:18px;} .wl-ph__meta .wl-lbl{margin:0;} .wl-ph__art{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;min-height:140px;} /* Alfa stoi na dolnej krawędzi pola; przy zbyt wąskiej kolumnie skaluje się w dół (contain), nigdy nie wchodzi w tekst. */ .wl-ph__alfa{height:clamp(130px,6px + 24vw,300px);width:auto;max-width:100%;min-width:0;object-fit:contain;object-position:left bottom;flex:0 1 auto;} .wl-ph__seal{width:clamp(140px,8px + 16vw,230px);height:auto;flex:0 0 auto;align-self:center;margin-bottom:24px;} /* Wariant zwarty (strona dawkowania, fix round 1): to samo otwarcie w kolorze SKU, bez Alfy i pieczęci, niższe — narzędzie, nie strona wizerunkowa. */ .wl-ph--compact .wl-ph__in{padding-top:32px;gap:0;} .wl-ph--compact .wl-ph__txt{padding-bottom:32px;} .wl-ph--compact .wl-lbl{margin:0 0 12px;} .wl-ph--compact .wl-ph__h1{font-size:clamp(2.25rem,1.4rem + 3vw,3.75rem);} @media (min-width:800px){ .wl-ph--compact .wl-ph__in{padding-top:48px;} .wl-ph--compact .wl-ph__txt{padding-bottom:40px;} } @media (min-width:800px){ .wl-ph__in{padding-top:88px;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:end;gap:40px;} .wl-ph__txt{padding-bottom:72px;} .wl-ph__art{justify-content:flex-end;gap:24px;min-width:0;} .wl-ph__alfa{object-position:right bottom;} .wl-ph__alfa--flip{transform:scaleX(-1);object-position:left bottom;} /* 2026-10-02: Produkty — popiersie alfa-27 patrzy w prawo; przy tekście z lewej odbicie poziome (nigdy obrót), pysk ku tekstowi */ } /* O MARCE v2 — SLAJD PO SLAJDZIE (layout v3, runda 4, 2026-09-29; flaga `pages_live.o_marce_v2`, partials/o-marce-v2.njk). JEDEN komponent `.wl-om` × 8 (werdykt właściciela: „ogrywajmy całość wilkiem”): display → tekst, obok DUŻY wilk; strony na przemian (`--flip` = wilk z lewej); pola płaskie na przemian pomarańcz / biel; Alfa zawsze czarna. Wysokość slajdu = ekran pod sticky belką (72 px + kreska 2 px). Tokeny i kroje istniejące, promień 0, zero cieni. RUNDA 3 (krytyk marki): 1) JEDNA kolumna tekstu (`--txt`), jej zewnętrzna krawędź = krawędź siatki nagłówka i kafli (`--gut` = max(--wl-pad, 50 % − --wl-col / 2), ten sam wzór co kontener 1200 px nagłówka), identyczna na S1–S8 (lustrzanie przy `--flip`). Wilk bierze resztę miejsca: obok tekstu (odstęp `--gap`), w dół do wysokości slajdu − 2 × `--inset`, a nadwyżka szerokości spada poza zewnętrzną krawędź ekranu (`overflow:clip`). 2) < 1100 px: układ piętrowy ze STAŁĄ sceną wilka `--stage` (max(320 px, 40 % slajdu)) nad tekstem, tak samo na wszystkich ośmiu; wilk skalowany do wysokości sceny, poza szeroka wychodzi poza jedną krawędź (ogon), głowa ≥ `--edge` od krawędzi; nagłówek startuje na tym samym y. 3) KADR: wilk = min(wysokość, miejsce / (1 − b)), gdzie b = spad z danych pozy (`--bd` ≥ 1100, `--bt` 400–1099, `--bp` < 400). Strefy dozwolonego przycięcia (ogon / tułów, nigdy kończyna) są w o_marce_v2_layout.json (`clean`) i sprawdza je test OM1. RUNDA 4 (krytyk marki): 1) rozmiar wilka wg WIELKOŚCI GŁOWY: wspólna wysokość głowy `--T` = min(`--kw` × miejsce w poziomie, `--kh` × dostępna wysokość); poza dostaje szerokość `--wt` = T / hf × proporcje (hf = wysokość głowy jako ułamek obrazu, dane `head` w o_marce_v2_layout.json), obciętą przez wysokość, spad `--b` i — dla póz z `snap` — przyciągniętą do bliższej krawędzi strefy `clean` (`--z0` koniec strefy ogona, `--z1` początek strefy tułowia), żeby krawędź ekranu nie wpadła w kończynę. Wymaga `sign()` (Chrome 125, Safari 18.2, Firefox 118). 2) < 1100 px scena wilka wyższa: 600–1099 px clamp(320px, 48svh, 520px), < 600 px min(380px, max(320px, 40svh)); stała na wszystkich ośmiu slajdach. 3) S1: jeden

= etykieta `.wl-lbl` (display:block, jak numerowane etykiety S2–S8) + display; od 600 px pieczęć stoi obok akapitu (mieści się na pierwszym ekranie). Dane póz wchodzą jako zmienne na `.wl-om__in`: --ar (proporcje), --hf (głowa), --bd/--bt/--bp (spad), --z0/--z1 (snap), --dy (korekta masy, ≥ 1100), --fx (odbicie). */ .wl-om{ --om-body-s:16px;--om-body-l:18px; /* JEDNO miejsce na rozmiar tekstu treści slajdów (decyzja właściciela czeka): telefon/tablet · desktop ≥ 1100 px */ --hdr:74px;--slide-h:calc(100svh - var(--hdr)); --gut:max(var(--wl-pad),calc(50cqw - var(--wl-col) / 2)); /* zewnętrzna krawędź treści nagłówka/kafli (kontener 1200 px); używać tylko w potomkach (cqw) */ --edge:12px; /* min. odstęp głowy od krawędzi ekranu (piętrowo) */ --inset:36px; /* stały odstęp góra/dół wilka od krawędzi slajdu (≥ 1100 px) */ --stage:min(380px,max(320px,40svh)); /* stała scena wilka (< 1100 px): telefon < 600 px */ --kw:.383;--kh:.45; /* T = min(kw × szerokość miejsca, kh × dostępna wysokość); kw z okna: atak/drzemie (najmniejsza głowa przy spadzie) ≥ −15 %, bieg (snap w górę) ≤ +15 % */ --h:clamp(2.5rem,1.3rem + 3.6vw,4.75rem); /* wielkość display (bez zmian względem otwarcia) */ --body:var(--om-body-s); min-height:var(--slide-h);display:flex;align-items:flex-start;container-type:inline-size;overflow:clip; background:var(--wl-white);color:var(--wl-black); } .wl-om--orange{background:var(--wl-orange);} @media (min-width:600px){.wl-om{--stage:clamp(320px,48svh,520px);}} /* tablet: scena wyższa */ main .wl-om[id]{scroll-margin-top:var(--hdr);} /* zatrzymanie kotwicy dokładnie pod belką (nadpisuje `main [id]` 88 px) */ /* < 1100 px: scena wilka NAD tekstem na całą szerokość slajdu; wilk = min(wysokość sceny, szerokość widoczna / (1 − b)); pysk `--edge` od krawędzi wewnętrznej, ogon poza zewnętrzną. */ .wl-om__in{ width:100%;padding:24px var(--gut) 40px; display:grid;grid-template-columns:minmax(0,1fr);row-gap:24px;align-items:start; --b:var(--bp); --avail:calc(100cqw - var(--edge)); /* widoczna szerokość dla wilka (od głowy do zewnętrznej krawędzi ekranu) */ --hmax:var(--stage); /* największa wysokość wilka */ --T:min(calc(var(--avail) * var(--kw)),calc(var(--hmax) * var(--kh))); /* wspólna wysokość głowy */ --wt:calc(var(--T) * var(--ar) / var(--hf)); /* szerokość wilka, którego głowa ma T */ --w0:calc(var(--avail) / (1 - var(--z0))); /* szerokość, przy której kadr = koniec strefy ogona */ --w1:calc(var(--avail) / (1 - var(--z1))); /* szerokość, przy której kadr = początek strefy tułowia */ --wm:calc((var(--w0) + var(--w1)) / 2); /* snap: wt między w0 a w1 (kadr w kończynie) → bliższa z dwóch; poza luką wt bez zmian */ --wup:calc((1 + sign(var(--hmax) * var(--ar) - var(--w1) + .01px)) / 2); /* 1 = strefa tułowia osiągalna (w1 ≤ wysokość sceny × proporcje), 0 = wysokość sceny ucina wilka przed nią → snap tylko do strefy ogona (korekta 2026-10-01, S8 01 STOI z kością) */ --wsn:calc(var(--wt) + (1 + sign(var(--wt) - var(--w0))) / 2 * (1 + sign(var(--w1) - var(--wt))) / 2 * (var(--w0) + (var(--w1) - var(--w0)) * (1 + sign(var(--wt) - var(--wm))) / 2 * var(--wup) - var(--wt))); --wf:min(var(--wsn),calc(var(--hmax) * var(--ar)),calc(var(--avail) / (1 - var(--b)))); } @media (min-width:400px){.wl-om__in{--b:var(--bt);}} .wl-om__txt{min-width:0;} .wl-om__art{order:-1;min-width:0;height:var(--stage);margin:0 calc(-1 * var(--gut));padding:0 var(--edge);display:flex;align-items:center;justify-content:flex-start;} .wl-om--flip .wl-om__art{justify-content:flex-end;} /* Obraz przycięty do sylwetki (bez pustych marginesów), więc ramka = wilk. Marginesy auto = wyśrodkowanie, gdy wilk się mieści; gdy nie, ogon wychodzi na zewnątrz. */ .wl-om__alfa{ display:block;flex:none;width:var(--wf);height:auto;max-width:none;margin-inline:auto; transform:scaleX(var(--fx,1)); } .wl-om .wl-lbl{margin:0 0 16px;} .wl-om__h{ font:900 var(--h)/.9 var(--wl-display);text-transform:uppercase;letter-spacing:-.012em; margin:0;max-width:none;overflow-wrap:normal;text-wrap:balance; } .wl-om__p{font-size:var(--body);line-height:1.5;max-width:46ch;margin:20px 0 0;text-wrap:pretty;} .wl-om__link{margin:12px 0 0;} .wl-om__seal{display:block;width:clamp(140px,8px + 16vw,230px);max-width:100%;height:auto;margin-top:28px;} /* SPEC_unifikacji §8.1: pieczęć ≥ 140 px */ /* S1 na tablecie (600–1099 px): pieczęć obok akapitu, żeby cała treść otwarcia mieściła się na pierwszym ekranie (1024 × 768) */ @media (min-width:600px) and (max-width:1099.98px){ .wl-om--first .wl-om__txt{display:grid;grid-template-columns:minmax(0,46ch) auto;column-gap:32px;align-items:end;justify-content:start;} .wl-om--first .wl-om__txt > h1{grid-column:1 / -1;} .wl-om--first .wl-om__seal{margin-top:0;} } /* S6: akordeon = komponent FAQ (`.wl-faqs` > `.wl-qa`, znak `.wl-pm`), wersja zwarta. Jedna kreska na wiersz: NAD wierszem (pierwsza 2 px jak w FAQ, dalsze 1 px), zamknięcia pod ostatnim brak — bez podwójnej linii (runda 3: pojedynczy wiersz S5 miał kreskę 2 px nad i 1 px pod). */ .wl-faqs--slide{margin-top:24px;border-top:0;} .wl-faqs--slide .wl-qa{border-bottom:0;border-top:var(--wl-hair);} .wl-faqs--slide .wl-qa:first-child{border-top:var(--wl-rule);} .wl-faqs--slide .wl-qa > summary{min-height:52px;padding:8px 0;gap:12px;} .wl-faqs--slide .wl-qa h3{font-size:clamp(1.0625rem,.95rem + .35vw,1.25rem);} .wl-faqs--slide .wl-qa__a{padding:0 44px 16px 0;max-width:none;} .wl-faqs--slide .wl-qa__a p{margin:0 0 .8em;max-width:46ch;font-size:var(--body);line-height:1.5;} .wl-faqs--slide .wl-qa__a p:last-child{margin-bottom:0;} /* S5 (2026-10-02, właściciel): „Monokarma w faktach” ZAWSZE OTWARTE — etykieta `.wl-lbl` + trzy zdania jako trzy punkty, bez przycisku i bez kreski (ozdobne kreski zakazane). Styl punktów = `.v2-short__facts li` z „W skrócie” Monokarmy (krój tekstowy 600, interlinia, rytm odstępów), skalowany do slajdu: 17–20 px zamiast 20–32 px, żeby S5 mieścił się w ekranie 1280×720. */ .wl-om__factlist{margin-top:28px;} .wl-om__factlist .wl-lbl{margin:0 0 14px;} .wl-om__pts{list-style:none;margin:0;padding:0;display:grid;gap:12px;max-width:46ch;} .wl-om__pts li{margin:0;font:600 clamp(1.0625rem,.98rem + .45vw,1.25rem)/1.25 var(--wl-body);text-wrap:pretty;} /* ≥ 1100 px: kolumna tekstu (`--txt` = 5,9 × wysokość display — najdłuższy wers display się mieści) stoi na krawędzi siatki (`--gut`), wilk w pozostałej części od odstępu `--gap`. Wilk = min(wysokość slajdu − 2 × --inset, miejsce / (1 − bd)): przy szerokiej pozie kadr = bd (ogon), przy wysokiej wilk mieści się w całości. Tekst i wilk wyśrodkowane w pionie. */ @media (min-width:1100px){ .wl-om{--body:var(--om-body-l);--gap:clamp(28px,2.8vw,56px);--txt:calc(var(--h) * 5.9);align-items:center;} .wl-om__in{ --b:var(--bd); --avail:calc(100cqw - var(--gut) - var(--txt) - var(--gap)); --hmax:calc(var(--slide-h) - 2 * var(--inset)); padding:var(--inset) 0;row-gap:0;align-items:center; grid-template-columns:var(--gut) var(--txt) var(--gap) minmax(0,1fr); } .wl-om--flip .wl-om__in{grid-template-columns:minmax(0,1fr) var(--gap) var(--txt) var(--gut);} .wl-om__txt{grid-column:2;grid-row:1;} .wl-om__art{order:0;grid-column:4;grid-row:1;height:auto;margin:0;padding:0;} .wl-om--flip .wl-om__txt{grid-column:3;} .wl-om--flip .wl-om__art{grid-column:1;} .wl-om__alfa{transform:translateY(var(--dy,0%)) scaleX(var(--fx,1));} } /* „W skrócie” po kaflach: zwarty blok drobnego druku, bez kresek */ .wl-brief__h{font:900 clamp(1.5rem,1.2rem + 1vw,2rem)/.95 var(--wl-display);text-transform:uppercase;letter-spacing:-.01em;margin:0 0 14px;} .wl-brief .wl-small{margin:0 0 .6em;max-width:52ch;} /* CZARNY PAS (SPEC_unifikacji §8.3): zamyka treść i przechodzi w czarną stopkę. Kicker w kolorze SKU / pomarańczu (mały tekst na czerni: 6,4:1 pomarańcz, 9,9 limonka, 8,7 błękit, 8,0 magenta — decyzja właściciela 2026-09-29). Alfa w pasie: BEZ niej (kanon: sierść zawsze czarna, biała Alfa zakazana — OCENA_BRAND p.9). */ .wl-band{background:var(--wl-black);color:var(--wl-paper);} .wl-band .wl-sh{border-top-color:var(--wl-paper);} .wl-band .wl-sh__h{color:var(--wl-white);} .wl-band p{color:var(--wl-paper);} .wl-band .wl-band__kicker{ font:900 26px/.95 var(--wl-display);text-transform:uppercase;color:var(--sku,var(--wl-orange)); margin:0 0 20px;max-width:16ch; } @media (min-width:960px){.wl-band .wl-band__kicker{font-size:40px;}} /* ---------- 10. KAFEL PRODUKTU — jeden komponent (partials/tile.njk; hub, Produkty, Reszta linii, O marce, 404) ---------- */ .wl-tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 14px;} .wl-tile{display:flex;flex-direction:column;gap:10px;min-width:0;} .wl-tile__link{display:flex;flex-direction:column;gap:10px;color:var(--wl-black);text-decoration:none;} .wl-tile__bar{display:block;height:8px;background:var(--sku);} /* POWIETRZE WOKÓŁ SŁOIKA (ocena właściciela 2026-09-16; runda 2, 2026-10-07): padding procentowy liczony względem SZEROKOŚCI kafla; apla 5:6, wspólna linia podstawy (`object-position:center bottom`). Od rundy 2 powietrze niosą PLIKI (kafel: słoik = 76 % szerokości pliku, scripts/build-packshoty-studio-2026-10.py), więc padding jest jeden dla WSZYSTKICH kafli (5 % boki i góra, 9 % dół = dawny wariant `.v2-trio`) — dawne 13 % boków dublowało margines w pliku i zmniejszało słoik o 1/5. */ .wl-tile__shot{display:block;background:var(--sku);aspect-ratio:5 / 6;padding:5% 5% 9%;overflow:hidden;} .wl-tile__img{ display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom; transition:transform .16s var(--wl-ease); } a.wl-tile__link:hover .wl-tile__img{transform:translateY(-4px);} .wl-tile__name{font:800 17px/1 var(--wl-display);text-transform:uppercase;letter-spacing:-.005em;min-height:2em;} /* stała wysokość = 2 wiersze: meta i chip równo w rzędzie */ a.wl-tile__link:hover .wl-tile__name,a.wl-tile__link:focus-visible .wl-tile__name{ text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px; } .wl-tile__info{display:grid;gap:6px;justify-items:start;} .wl-tile__meta{font:500 11px/1.3 var(--wl-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--wl-muted);} .wl-tile__pending{font-size:.75rem;line-height:1.35;color:var(--wl-muted);max-width:none;margin:0;} .wl-tile__buy{margin-top:auto;padding-top:2px;} /* wyrównuje przyciski w wierszu */ .wl-tile__buy .wl-btn{padding:0 14px;} /* mały przycisk „Kup ↗” (decyzja właściciela 2026-09-29), nie na całą szerokość kafla */ .wl-tile .wl-link{min-height:44px;} /* siatki */ @media (min-width:560px){.wl-tiles--hub,.wl-tiles--cat{grid-template-columns:repeat(3,minmax(0,1fr));}} @media (min-width:800px){ .wl-tiles--hub{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 18px;} .wl-tiles--hub .wl-tile__name,.wl-tiles--rest .wl-tile__name{font-size:16px;} .wl-tiles--cat{gap:48px 32px;} .wl-tiles--cat .wl-tile__name{font-size:22px;} .wl-tiles--rest{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 18px;} } /* 5 kolumn „Reszty linii” i 6 kolumn hubu dopiero tam, gdzie przycisk „Kup w sklepie ↗” mieści się w kolumnie (fix round 1: ≥ 1100 / ≥ 1200 px; poniżej 3 kolumny — audyt DOM `ovf0` w 800–1100 px) */ @media (min-width:1100px){.wl-tiles--rest{grid-template-columns:repeat(5,minmax(0,1fr));}} @media (min-width:1200px){.wl-tiles--hub{grid-template-columns:repeat(6,minmax(0,1fr));}} @media (max-width:799px){.wl-tiles--rest > .wl-tile:last-child:nth-child(odd){grid-column:1 / -1;width:calc(50% - 7px);justify-self:center;}} /* ---------- 11. STRONA PRODUKTU ---------- */ /* .wl-product-header* i .wl-zero-list (v3) usunięte 2026-09-16 — komponent hero i lista 0% przebudowane na v4, patrz §16 na końcu pliku (SPEC_strona_produktu_v4.md). Oba były używane WYŁĄCZNIE przez src/products/product.njk (sprawdzone: grep całego src/), więc ich usunięcie nie dotyka innych szablonów. */ /* Sekcje strony produktu = `.wl-sec` + `.wl-sh` (§5, §8.2); dawne `.wl-block` i szara kreska #E4E0D8 wypadły. */ .wl-copy-todo{ font-family:var(--wl-mono);font-size:0.8125rem;letter-spacing:0.04em;color:var(--wl-muted); border:1px dashed var(--wl-muted);padding:14px 16px;max-width:70ch; } .wl-fn-table{width:100%;border-collapse:collapse;margin:0;} .wl-fn-table th,.wl-fn-table td{border-bottom:1px solid var(--wl-black);padding:10px 8px;text-align:left;vertical-align:top;} .wl-fn-table th{font-family:var(--wl-mono);font-size:0.75rem;letter-spacing:0.08em;text-transform:uppercase;width:44%;} .wl-dosing-hint{border:var(--wl-rule);padding:18px 20px;max-width:60ch;} .wl-dosing-hint__row{font-family:var(--wl-mono);font-weight:700;font-size:1rem;margin:0 0 8px 0;} .wl-dosing-hint a{color:var(--wl-black);} /* ---------- 12. DAWKOWANIE (moduł M3) ---------- */ /* Strona dawkowania (fix round 1): kalkulator bez zewnętrznej ramki (pola i opcje mają własne obwódki — ramka w ramce wypadła); sekcje w tej samej kolumnie 1120 px co reszta serwisu (`.wl-sec`), ale zwarte, bo to narzędzie, nie strona treściowa. */ .wl-calc{margin:0;} .wl-dosing .wl-sec{padding-top:32px;padding-bottom:32px;} @media (min-width:800px){.wl-dosing .wl-sec{padding-top:56px;padding-bottom:56px;}} .wl-calc fieldset{border:0;padding:0;margin:0 0 16px 0;} .wl-calc legend{ font-family:var(--wl-mono);font-size:0.75rem;letter-spacing:0.1em;text-transform:uppercase;padding:0;margin-bottom:10px; } .wl-field{margin:0 0 16px 0;} .wl-field label{display:block;font-family:var(--wl-mono);font-size:0.75rem;letter-spacing:0.08em;text-transform:uppercase;margin-bottom:8px;} .wl-field input[type="text"]{ font-family:var(--wl-body);font-size:16px;border:2px solid var(--wl-black);background:var(--wl-white); padding:12px 14px;width:100%;max-width:220px; } .wl-field__hint{font-size:0.8125rem;color:var(--wl-muted);margin-top:6px;} /* STAN BŁĘDU POLA (fix round 1, OCENA_UX_wdrozenia_v1 pkt 6): treść „Błąd: …” stoi w DOM (wstawia ją JS; wcześniej prefiks z CSS `::before` = WCAG F87), `role="alert"` na komunikacie, `aria-invalid="true"` na polu. Wskaźnik NIEkolorystyczny w języku marki (czerń, kanciasto): pasek 4 px z lewej strony pola (obwódka lewa 6 px zamiast 2 px) + kwadratowa ikona „!” rysowana CSS-em (gradienty na tokenach) w polu i przy komunikacie. */ .wl-field__ctl{position:relative;max-width:220px;} .wl-field input[type="text"][aria-invalid="true"]{border-left-width:6px;padding-right:42px;} .wl-field.is-invalid .wl-field__ctl::after,.wl-field__error::before{ content:"";display:block;width:18px;height:18px;flex:none; background: linear-gradient(var(--wl-white),var(--wl-white)) 8px 3px / 2px 8px no-repeat, linear-gradient(var(--wl-white),var(--wl-white)) 8px 13px / 2px 2px no-repeat, var(--wl-black); } .wl-field.is-invalid .wl-field__ctl::after{position:absolute;right:12px;top:50%;margin-top:-9px;pointer-events:none;} .wl-field__error{ display:flex;align-items:flex-start;gap:10px;font-size:0.9375rem;line-height:1.35;font-weight:700;color:var(--wl-black); margin-top:8px;border-left:4px solid var(--wl-black);padding:2px 0 2px 12px;max-width:52ch; } .wl-columns{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;} .wl-columns label{ display:flex;align-items:center;gap:10px;border:2px solid var(--wl-black);padding:12px 14px; min-height:44px;cursor:pointer;font-size:0.9375rem; } .wl-columns input{width:20px;height:20px;flex:none;accent-color:var(--wl-black);} .wl-checkline{display:flex;align-items:flex-start;gap:10px;margin:4px 0 18px 0;} .wl-checkline input{width:22px;height:22px;flex:none;margin-top:2px;accent-color:var(--wl-black);} .wl-checkline label{font-size:0.9375rem;line-height:1.4;} .wl-result{border:var(--wl-rule);padding:16px 18px;margin:0 0 20px 0;min-height:52px;} .wl-result:empty{display:none;} .wl-result__line{font-family:var(--wl-mono);font-weight:700;font-size:1.125rem;margin:0 0 4px 0;} .wl-result__note{font-size:0.875rem;margin:6px 0 0 0;} .wl-table-wrap{width:100%;overflow-x:hidden;} table.wl-dosing-table{width:100%;border-collapse:collapse;font-size:0.875rem;table-layout:fixed;} table.wl-dosing-table caption{ text-align:left;font-family:var(--wl-mono);font-size:0.75rem;letter-spacing:0.04em; color:var(--wl-muted);padding:0 0 10px 0; } table.wl-dosing-table th,table.wl-dosing-table td{ border-bottom:var(--wl-hair);padding:8px 4px;text-align:right;font-variant-numeric:tabular-nums; word-break:break-word; } table.wl-dosing-table thead th{ font-family:var(--wl-mono);font-weight:600;font-size:0.6875rem;letter-spacing:0.02em;text-transform:none; text-align:right;vertical-align:bottom;line-height:1.25; } table.wl-dosing-table th[scope="row"]{text-align:left;font-family:var(--wl-mono);font-weight:700;} table.wl-dosing-table th[scope="row"] button{ all:unset;cursor:pointer;display:block;width:100%;min-height:44px;padding:6px 4px; font-family:var(--wl-mono);font-weight:700; } table.wl-dosing-table th[scope="row"] button:focus-visible{outline:3px solid var(--wl-black);outline-offset:2px;box-shadow:0 0 0 7px var(--wl-white);} table.wl-dosing-table tr[aria-current="true"]{background:var(--sku,var(--wl-orange));} /* kolor SKU produktu (fix round 1: nie zawsze pomarańcz) */ table.wl-dosing-table tr[aria-current="true"] th, table.wl-dosing-table tr[aria-current="true"] td{font-weight:700;color:var(--wl-black);} .wl-row-marker{display:block;font-family:var(--wl-body);font-weight:400;font-size:0.6875rem;text-transform:none;letter-spacing:0;color:var(--wl-black);} .wl-disclaimer{max-width:70ch;font-size:0.875rem;margin:20px 0 0 0;padding:14px 0 0 0;border-top:var(--wl-hair);} .wl-source-line{font-family:var(--wl-mono);font-size:0.75rem;color:var(--wl-muted);max-width:70ch;} /* ---------- 13b. STRONY TREŚCIOWE: O marce, FAQ (SPEC_unifikacji §8–§9, 2026-09-29) ---------- Otwarcie `.wl-ph`, pasek kotwic `.wl-jump`, sekcje `.wl-sec` > `.wl-two` z `.wl-sh` (nagłówek po lewej, treść po prawej od 800 px), akapity do 66ch. FAQ = akordeon `
` (odpowiedzi w surowym HTML, id na `h3`, działa bez JS). */ /* FAQ — akordeon (§9): wiersz 64 px, pytanie display 800, kwadratowy znak +/− rysowany CSS-em (czerń, promień 0). */ .wl-faqs{border-top:var(--wl-rule);} .wl-qa{border-bottom:var(--wl-hair);} .wl-qa > summary{ list-style:none;display:grid;grid-template-columns:minmax(0,1fr) 32px;gap:16px;align-items:center; min-height:64px;padding:14px 0;cursor:pointer; } .wl-qa > summary::-webkit-details-marker{display:none;} .wl-qa h3{ font:800 clamp(1.1875rem,.95rem + .7vw,1.5rem)/1.08 var(--wl-display);text-transform:uppercase;letter-spacing:-.005em;margin:0; } .wl-pm{position:relative;width:32px;height:32px;background:var(--wl-black);} .wl-pm::before,.wl-pm::after{content:"";position:absolute;left:50%;top:50%;background:var(--wl-white);} .wl-pm::before{width:14px;height:2px;margin:-1px 0 0 -7px;} .wl-pm::after{width:2px;height:14px;margin:-7px 0 0 -1px;transition:transform .16s var(--wl-ease);} .wl-qa[open] > summary .wl-pm::after{transform:scaleY(0);} .wl-qa > summary:hover h3{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;} .wl-qa > summary:hover .wl-pm{background:var(--wl-orange);} .wl-qa > summary:hover .wl-pm::before,.wl-qa > summary:hover .wl-pm::after{background:var(--wl-black);} .wl-qa__a{padding:0 48px 24px 0;max-width:calc(66ch + 48px);} .wl-qa__a p{margin:0 0 .8em;max-width:none;} .wl-qa[open] .wl-qa__a{animation:wl-qa-in .16s var(--wl-ease);} @keyframes wl-qa-in{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}} /* na czerni (ostatnia kategoria w pasie) */ .wl-band .wl-faqs{border-top-color:var(--wl-paper);} .wl-band .wl-qa{border-bottom-color:var(--wl-paper);} .wl-band .wl-qa h3{color:var(--wl-white);} .wl-band .wl-pm{background:var(--wl-paper);} .wl-band .wl-pm::before,.wl-band .wl-pm::after{background:var(--wl-black);} .wl-band .wl-qa > summary:hover .wl-pm{background:var(--wl-orange);} @media (prefers-reduced-motion:reduce){ .wl-pm::after,.wl-tile__img{transition:none;} .wl-qa[open] .wl-qa__a{animation:none;} } /* ---------- 14. TABELE OGÓLNE / STRONY PRAWNE ---------- */ .wl-legal-list{padding-left:1.2em;} .wl-legal-list li{margin-bottom:0.6em;} /* Strona polityki prywatności (src/legal/privacy.njk): kolumna jak podstrony (`.wl-sec__in`), H1 w skali nagłówka sekcji, H2 z oddechem, tabela zapisów skanu zwęzona do kolumny tekstu i ułożona w stos poniżej 600 px (bez przewijania w bok). Tokeny i rozmiary jak wyżej — żadnych nowych wartości koloru. */ .wl-legal .wl-sh__h{margin-bottom:28px;} .wl-legal h2{margin:56px 0 16px;} .wl-legal-list{max-width:66ch;} .wl-legal .wl-fn-table{max-width:66ch;margin:0 0 1em;} .wl-legal .wl-fn-table th{width:auto;} .wl-legal__after{margin-top:20px;} @media (max-width:599px){ .wl-legal .wl-fn-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;} /* nagłówki zostają dla czytników (jak .wl-sr-only) */ .wl-legal .wl-fn-table,.wl-legal .wl-fn-table tbody,.wl-legal .wl-fn-table tr,.wl-legal .wl-fn-table td{display:block;width:100%;} .wl-legal .wl-fn-table tr{border-bottom:1px solid var(--wl-black);padding:10px 0;} .wl-legal .wl-fn-table td{border:0;padding:2px 8px;} } /* ---------- 15. ZNACZNIK „PROPOSED” (wyłącznie podgląd, noindex) ---------- */ /* Treść approved przez gate compliance, ale czekająca na sign-off (prawnik/dossier). Cienka kreska po lewej + etykieta mono, ten sam idiom co .wl-copy-todo (braki), inny kolor sygnalizacyjny — nie ma nowego koloru marki, tylko istniejący --wl-muted. */ .wl-preview p[data-compliance="proposed"],.wl-preview h2[data-compliance="proposed"]{border-left:2px dashed var(--wl-muted);padding-left:10px;} /* ZNACZNIK ISTNIEJE WYŁĄCZNIE NA PODGLĄDZIE (ux-ui-director poz. 15, 2026-09-11). Domyślnie NIE RENDERUJE SIĘ w ogóle — ani wizualnie, ani w drzewie dostępności. Włącza go klasa `wl-preview` na , którą build dokłada tylko wtedy, gdy WL_FLAGS=on (patrz eleventy.config.js). Produkcyjny build bez tej zmiennej nie pokazuje ani jednego „do bramki”, więc właściciel nie przeczyta strony jako projektu. Kontrast: znacznik potrafi stanąć na pomarańczu (gate w beatach snu), gdzie --wl-muted daje 1,66:1. Dlatego ma WŁASNY, twardy styl — czerń na bieli, 21:1 — a nie kolor tekstu pomocniczego. */ .wl-proposed-flag{display:none;} .wl-preview .wl-proposed-flag{ display:inline-block;font-family:var(--wl-mono);font-weight:700;font-size:0.6875rem; letter-spacing:0.08em;text-transform:uppercase; color:var(--wl-black);background:var(--wl-white);padding:1px 5px; border-bottom:1px dashed var(--wl-black); } /* ========================================================================== 16. STRONA PRODUKTU v4 (SPEC_strona_produktu_v4.md, 2026-09-16) Źródło: makieta _work/strona_www_2026-09/produkt_v4_design/produkt_v4_mockup.html, przeniesiona 1:1 jako komponenty, z fixami OCENA_UX_v4.md + OCENA_BRAND_v4.md naniesionymi (patrz komentarze przy każdym fixie). Konsument: src/products/product.njk. Kolor SKU wchodzi jako custom property `--sku` (ustawiana inline przez szablon, jak już robi hub.css dla `.linia__cell`) — JEDEN szablon, sześć kolorów, bez powielania CSS. ========================================================================== */ .wl-product{--sku:var(--wl-orange);--sku-ink:var(--wl-black);} /* Reguła powierzchni: pola koloru SKU niosą czarne przyciski (SPEC_unifikacji §5.1); kolor TEKSTU na polu bierze się z danych SKU (`ink_hex` → `--sku-ink`, dziś #000 dla wszystkich sześciu — brandbook s.29–32). */ .wl-hero__say,.wl-id,.wl-zero{color:var(--sku-ink);} /* ---------- 16.1 HERO ---------- */ .wl-hero{ display:grid;grid-template-columns:1fr; /* Skala H1 (hasło jest teraz etykietą mono 12 px, nie nagłówkiem; OCENA_UX_seo-rafal_v1.md: hasło nie może być większe od H1). */ --wl-h1:clamp(1.5rem,9vw - 2.5px,2.5rem); } .wl-hero__say{background:var(--sku);padding:30px var(--wl-pad) 0;} .wl-hero__claim{ /* FIX ROUND 1 (2026-09-29, OCENA_BRAND_wdrozenia_v1 pkt 7): hasło konkurowało z H1 (ta sama waga, dawniej wyższy w DOM i wizualnie). Teraz etykieta mono z tokenów systemu (`.wl-lbl`: mono 600 / 12 px / .16em, wersaliki) — H1 jest najcięższym elementem hero. */ font:600 12px/1.2 var(--wl-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--sku-ink); margin:0;max-width:none; } /* Hak podglądu ?headline=statement|meal (przełącznik żywy, nie tylko WL_FLAGS) chowa/ pokazuje warianty inline scriptem w product.njk; domyślny render wybiera content/site/product_page.json#hero_headline po stronie serwera (SPEC "renderowane per wartość"), więc bez JS/z JS wyłączonym strona i tak pokazuje właściwy wariant. */ .wl-hero__claim-txt[hidden]{display:none;} .wl-hero__seal{ /* Rozmiar pieczęci bez zmian (compliance: litera „INSTYNKTU” ≥ 13 px cap-height, pomiar 2026-09-16: 144 px wys. mobile / 168 px desktop). FIX ROUND 1 (2026-09-29): pieczęć stoi w kolumnie packshotu, pod słojem, wyśrodkowana (nie przy chipie klasy ani zdaniu o dawkowaniu); `display:block` + `margin:auto` zamiast dawnego `align-self:flex-start` w kolumnie tekstowej. */ display:block;height:144px;width:auto;margin:20px auto 0; } /* Pole zdjęcia — fix „ucięcia do kwadratu” (oba audyty, wspólny mianownik): 4:5, NIE 1:1, NIGDY object-fit:cover ani ramka 2px (deck kadruje kolorem, nie ramkuje). */ .wl-shot{margin:0;background:var(--wl-paper);padding-bottom:18px;} .wl-shot__field{aspect-ratio:4/5;padding:10% 14% 12%;display:flex;align-items:center;justify-content:center;} .wl-shot__field img{max-width:100%;max-height:100%;width:auto;height:auto;} .wl-shot figcaption{ font-family:var(--wl-mono);font-weight:600;font-size:0.6875rem;letter-spacing:0.12em; text-transform:uppercase;color:var(--wl-muted);text-align:center;padding:0 var(--wl-pad); } .wl-shot .wl-hero__seal + figcaption{margin-top:16px;} /* Przełącznik hero A/B (SPEC §4 — decyzja właściciela, domyślne B „te same reguły co w kaflach” wg briefu 2026-09-16). Wariant renderowany przez content/site/product_page.json (klasa na
), nadpisywalny na żywo hakiem ?hero=A|B (patrz