/* ========================================================================= Orimatcha — arkusz motywu potomnego Mobile first. Bez frameworków, bez bibliotek, bez preprocesora. Jedyny arkusz witryny: style WooCommerce są zdjęte w inc/odchudzanie.php. Spis: 0. Fonty (self-hosted woff2) 1–16. Design system i komponenty — identyczne jak w makiecie 17. Mostek GeneratePress + WooCommerce ========================================================================= */ /* ------------------------------------------------------------------------- 0. Fonty Pliki z gwfh.mranftl.com, zakresy latin + latin-ext w jednym pliku. Świadomie bez unicode-range: przy sklejonym zakresie dzielenie na dwa deklaracje nic nie daje, a każda dodatkowa @font-face to kolejna reguła do policzenia przy pierwszym renderze. Fallback dla znaków, których krój nie ma (np. ō w nazwach japońskich): przeglądarka podmienia POJEDYNCZY znak na kolejny krój ze stosu, nie całe słowo. Dlatego w stosie stoi Georgia — ma makrony i pasuje proporcjami. Czy Marcellus ich potrzebuje, sprawdzisz plikiem test-fontow.html. ------------------------------------------------------------------------- */ @font-face { font-family: "Marcellus"; src: url("../fonts/marcellus-v14-latin_latin-ext-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Inter"; src: url("../fonts/inter-v20-latin_latin-ext-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } /* ------------------------------------------------------------------------- 1. Tokeny ------------------------------------------------------------------------- */ :root { /* Kolory — jedyne dopuszczone wartości w projekcie */ --tlo: #ffffff; --tekst: #1a1a1a; --tekst-2: #5c5c58; --tekst-3: #8a8a85; --linia: #e4e4e1; --linia-mocna: #c9c9c5; --kafelek: #f4f4f2; --zielen: #1f541c; --zielen-hover: #163d14; /* wyłącznie stan :hover przycisku głównego */ /* Kroje. --font-naglowek podmienia przełącznik makiety. */ --font-naglowek: "Marcellus", Georgia, "Times New Roman", serif; --font-tekst: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Skala typograficzna — wartości mobilne */ --t-xs: 0.6875rem; /* 11px — etykiety, metadane */ --t-sm: 0.8125rem; /* 13px — tekst pomocniczy */ --t-base: 0.9375rem; /* 15px — tekst */ --t-md: 1.0625rem; /* 17px — lead */ --t-lg: 1.375rem; /* 22px — h3 */ --t-xl: 1.75rem; /* 28px — h2 */ --t-2xl: 2.25rem; /* 36px — h1 */ /* Odstępy — skala 4px */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; /* Promienie — twarda zasada briefu */ --r-kontrolka: 8px; --r-karta: 12px; /* Linia 0.5px zamiast ramek i cieni */ --kreska: 0.5px solid var(--linia); --kreska-mocna: 0.5px solid var(--linia-mocna); --maks: 1240px; --przejscie: 120ms ease-out; } /* Wariant zapasowy kroju — do przełączenia jedną klasą na , gdyby Marcellus nie sprawdził się w druku na opakowaniu. */ .kroj-fraunces { --font-naglowek: "Fraunces", Georgia, "Times New Roman", serif; } /* ------------------------------------------------------------------------- 2. Reset i podstawy ------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--tlo); color: var(--tekst); font-family: var(--font-tekst); font-size: var(--t-base); font-weight: 400; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { font-family: var(--font-naglowek); font-weight: 500; /* nigdy 600 ani 700 */ line-height: 1.2; letter-spacing: -0.01em; margin: 0; } h1 { font-size: var(--t-2xl); } h2 { font-size: var(--t-xl); } h3 { font-size: var(--t-lg); } h4 { font-size: var(--t-md); font-family: var(--font-tekst); } /* Fraunces jest krojem zmiennym — trzymamy niską wagę i miękką optykę */ .kroj-fraunces h1, .kroj-fraunces h2, .kroj-fraunces h3, .kroj-fraunces .wordmark, .kroj-fraunces .cena { font-variation-settings: "SOFT" 20, "WONK" 1, "opsz" 30; letter-spacing: -0.02em; } p { margin: 0 0 var(--s-4); } p:last-child { margin-bottom: 0; } a { color: var(--tekst); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 0.5px; text-decoration-color: var(--linia-mocna); transition: text-decoration-color var(--przejscie); } a:hover { text-decoration-color: var(--tekst); } img, svg { display: block; max-width: 100%; } button { font: inherit; color: inherit; } fieldset { border: 0; padding: 0; margin: 0; min-inline-size: 0; } legend { padding: 0; } ul, ol { margin: 0; padding: 0; } li { list-style: none; } /* Focus — jedyny dopuszczony wyjątek od zakazu cieni: funkcjonalny pierścień */ :focus-visible { outline: 2px solid var(--zielen); outline-offset: 2px; border-radius: 2px; } :focus:not(:focus-visible) { outline: none; } /* ------------------------------------------------------------------------- 3. Klasy pomocnicze ------------------------------------------------------------------------- */ [hidden] { display: none !important; } .tylko-czytnik { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .pomin-do-tresci { position: absolute; left: var(--s-4); top: -5rem; z-index: 50; background: var(--tlo); border: var(--kreska-mocna); border-radius: var(--r-kontrolka); padding: var(--s-2) var(--s-4); text-decoration: none; transition: top var(--przejscie); } .pomin-do-tresci:focus { top: var(--s-4); } .kontener { width: 100%; max-width: var(--maks); margin-inline: auto; padding-inline: var(--s-4); } .etykieta { font-size: var(--t-xs); letter-spacing: 0.08em; text-transform: uppercase; /* wersaliki wyłącznie w drobnych etykietach */ color: var(--tekst-3); } .wyciszony { color: var(--tekst-2); font-size: var(--t-sm); } .drugorzedny { color: var(--tekst-2); } .liczby { font-variant-numeric: tabular-nums; } /* ------------------------------------------------------------------------- 4. Znak marki ------------------------------------------------------------------------- */ .znak { width: 26px; height: 26px; color: var(--zielen); flex: none; } .znak .scianka { fill: currentColor; stroke: var(--tlo); stroke-width: 0.5; } .wordmark { font-family: var(--font-naglowek); font-size: 1.25rem; font-weight: 500; letter-spacing: 0.01em; line-height: 1; color: var(--tekst); } .logo { display: inline-flex; align-items: center; gap: var(--s-2); text-decoration: none; } /* ------------------------------------------------------------------------- 5. Nagłówek strony ------------------------------------------------------------------------- */ .pasek-info { border-bottom: var(--kreska); } .pasek-info p { margin: 0; padding: var(--s-2) 0; text-align: center; font-size: var(--t-xs); letter-spacing: 0.04em; color: var(--tekst-2); } .naglowek-strony { position: sticky; top: 0; z-index: 20; background: var(--tlo); border-bottom: var(--kreska); } .naglowek-wnetrze { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 60px; } .nawigacja { display: none; } .nawigacja ul { display: flex; gap: var(--s-5); } .nawigacja a { text-decoration: none; font-size: var(--t-sm); color: var(--tekst-2); padding-block: var(--s-2); border-bottom: 0.5px solid transparent; transition: color var(--przejscie), border-color var(--przejscie); } .nawigacja a:hover, .nawigacja a[aria-current="page"] { color: var(--tekst); border-bottom-color: var(--tekst); } .narzedzia-naglowka { display: flex; align-items: center; gap: var(--s-1); } .ikona-przycisk { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-width: 40px; height: 40px; padding-inline: var(--s-2); background: none; border: 0; border-radius: var(--r-kontrolka); color: var(--tekst); cursor: pointer; text-decoration: none; font-size: var(--t-sm); transition: background-color var(--przejscie); } .ikona-przycisk:hover { background: var(--kafelek); } .ikona-przycisk svg { width: 18px; height: 18px; } .licznik-koszyka { font-variant-numeric: tabular-nums; color: var(--tekst-2); } /* ------------------------------------------------------------------------- 6. Okruchy ------------------------------------------------------------------------- */ .okruchy { padding-block: var(--s-4); font-size: var(--t-sm); } .okruchy ol { display: flex; flex-wrap: wrap; gap: var(--s-2); } .okruchy li { display: flex; gap: var(--s-2); align-items: center; color: var(--tekst-2); } .okruchy a { color: var(--tekst-2); text-decoration: none; } .okruchy a:hover { text-decoration: underline; } .okruchy .strzalka { color: var(--linia-mocna); } /* ------------------------------------------------------------------------- 7. Produkt — układ ------------------------------------------------------------------------- */ .produkt { display: grid; gap: var(--s-6); padding-bottom: var(--s-7); } .galeria { display: grid; gap: var(--s-3); } .foto-glowne { position: relative; aspect-ratio: 1 / 1; background: var(--kafelek); border-radius: var(--r-karta); overflow: hidden; } .foto-glowne svg { width: 100%; height: 100%; } .plakietka-foto { position: absolute; left: var(--s-3); top: var(--s-3); background: var(--tlo); border: var(--kreska); border-radius: 999px; padding: 2px var(--s-3); font-size: var(--t-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--tekst-2); } .miniatury { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-2); } .miniatura { aspect-ratio: 1 / 1; background: var(--kafelek); border: 0.5px solid transparent; border-radius: var(--r-kontrolka); padding: 0; overflow: hidden; cursor: pointer; transition: border-color var(--przejscie); } .miniatura:hover { border-color: var(--linia-mocna); } .miniatura[aria-current="true"] { border-color: var(--tekst); } .zakup { display: grid; gap: var(--s-5); align-content: start; } .naglowek-produktu { display: grid; gap: var(--s-3); } .nazwa-produktu { font-size: clamp(1.75rem, 6vw, 2.5rem); } .podtytul { color: var(--tekst-2); font-size: var(--t-md); line-height: 1.5; margin: 0; max-width: 46ch; } .ocena { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-sm); color: var(--tekst-2); } .ocena .gwiazdki { display: flex; gap: 2px; color: var(--tekst); } .ocena svg { width: 13px; height: 13px; } .ocena a { color: var(--tekst-2); } .cena-blok { display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; } .cena { font-family: var(--font-naglowek); font-size: 1.75rem; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; } .cena--subskrypcja { color: var(--zielen); } /* cena subskrypcyjna — dozwolone użycie zieleni */ .cena-za-gram { font-size: var(--t-sm); color: var(--tekst-2); font-variant-numeric: tabular-nums; } /* ------------------------------------------------------------------------- 8. Wybór gramatury ------------------------------------------------------------------------- */ .pole-wyboru { display: grid; gap: var(--s-3); } .naglowek-pola { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); } .naglowek-pola .tytul { font-size: var(--t-sm); color: var(--tekst-2); } .naglowek-pola .wartosc { font-size: var(--t-sm); } .warianty { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); border: 0; padding: 0; margin: 0; min-inline-size: 0; } .wariant { position: relative; } .wariant input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; } /* Uwaga: selektor MUSI celować w bezpośrednie dziecko etykiety. Zapis „.wariant span" łapał też zagnieżdżone .gramatura i .cena-wariantu, przez co każdy kafelek dostawał ramkę w ramce. */ .wariant > span { display: grid; gap: 2px; justify-items: center; padding: var(--s-3) var(--s-2); border: var(--kreska-mocna); border-radius: var(--r-kontrolka); text-align: center; transition: border-color var(--przejscie), color var(--przejscie); } .wariant .gramatura { font-size: var(--t-base); } .wariant .cena-wariantu { font-size: var(--t-xs); color: var(--tekst-2); font-variant-numeric: tabular-nums; } .wariant input:hover + span { border-color: var(--tekst-2); } .wariant input:checked + span { border-color: var(--zielen); color: var(--zielen); } .wariant input:checked + span .cena-wariantu { color: var(--zielen); } .wariant input:focus-visible + span { outline: 2px solid var(--zielen); outline-offset: 2px; } .wariant input:disabled + span { color: var(--tekst-3); border-color: var(--linia); cursor: not-allowed; } /* ------------------------------------------------------------------------- 9. Tryb zakupu — jednorazowo / subskrypcja ------------------------------------------------------------------------- */ .tryby { display: grid; gap: var(--s-2); border: 0; padding: 0; margin: 0; min-inline-size: 0; } /* Kafelek trybu: input leży niewidocznie na całej karcie, dzięki czemu klik w dowolne miejsce zaznacza opcję, a znaczniki zostają poprawne. */ .tryb { position: relative; padding: var(--s-4); border: var(--kreska-mocna); border-radius: var(--r-karta); transition: border-color var(--przejscie); } .tryb input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; width: 100%; height: 100%; } .tryb input:disabled { cursor: not-allowed; } .tryb:hover:has(input:enabled) { border-color: var(--tekst-2); } .tryb:has(input:checked) { border-color: var(--zielen); } .tryb:has(input:focus-visible) { outline: 2px solid var(--zielen); outline-offset: 2px; } .tryb:has(input:disabled) { border-color: var(--linia); } .tryb:has(input:disabled) .tryb-tytul, .tryb:has(input:disabled) .tryb-detal, .tryb:has(input:disabled) .tryb-cena .kwota { color: var(--tekst-3); } .tryb-tresc { display: grid; grid-template-columns: 18px 1fr auto; align-items: start; gap: var(--s-2) var(--s-3); } .kropka { width: 18px; height: 18px; border: 0.5px solid var(--linia-mocna); border-radius: 999px; margin-top: 3px; position: relative; transition: border-color var(--przejscie); } .kropka::after { content: ""; position: absolute; inset: 4px; border-radius: 999px; background: var(--zielen); transform: scale(0); transition: transform var(--przejscie); } .tryb:has(input:checked) .kropka { border-color: var(--zielen); } .tryb:has(input:checked) .kropka::after { transform: scale(1); } .tryb-opis { display: grid; gap: 2px; } .tryb-tytul { font-size: var(--t-base); } .tryb-detal { font-size: var(--t-sm); color: var(--tekst-2); } .tryb-cena { text-align: right; font-variant-numeric: tabular-nums; display: grid; gap: 2px; } .tryb-cena .kwota { font-size: var(--t-md); } .tryb-cena .przed { font-size: var(--t-sm); color: var(--tekst-2); text-decoration: line-through; } .tryb:has(input:checked) .tryb-cena .kwota { color: var(--zielen); } .plakietka-rabat { display: inline-block; align-self: start; width: fit-content; font-size: var(--t-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--zielen); border: 0.5px solid var(--zielen); border-radius: 999px; padding: 1px var(--s-2); line-height: 1.5; } .tryb:has(input:disabled) .plakietka-rabat { color: var(--tekst-3); border-color: var(--linia-mocna); } /* Szczegóły subskrypcji — widoczne dopiero po wyborze */ .tryb-rozwiniecie { display: none; gap: var(--s-2); margin-top: var(--s-4); padding-top: var(--s-4); padding-left: calc(18px + var(--s-3)); border-top: var(--kreska); font-size: var(--t-sm); color: var(--tekst-2); } .tryb:has(input:checked) .tryb-rozwiniecie { display: grid; } .tryb-rozwiniecie li { display: flex; gap: var(--s-2); align-items: flex-start; } .tryb-rozwiniecie svg { width: 14px; height: 14px; margin-top: 4px; flex: none; color: var(--zielen); } /* ------------------------------------------------------------------------- 10. Ilość, przyciski, ekspres ------------------------------------------------------------------------- */ .wiersz-zakupu { display: grid; gap: var(--s-3); } .stepper { display: inline-grid; grid-template-columns: 44px minmax(40px, auto) 44px; align-items: center; border: var(--kreska-mocna); border-radius: var(--r-kontrolka); height: 48px; overflow: hidden; } .stepper button { height: 100%; background: none; border: 0; cursor: pointer; color: var(--tekst); font-size: var(--t-md); line-height: 1; transition: background-color var(--przejscie); } .stepper button:hover { background: var(--kafelek); } .stepper button:disabled { color: var(--tekst-3); cursor: not-allowed; } .stepper button:disabled:hover { background: none; } .stepper .wartosc { text-align: center; font-variant-numeric: tabular-nums; font-size: var(--t-base); } .przycisk { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); height: 48px; padding-inline: var(--s-5); border-radius: var(--r-kontrolka); border: 0.5px solid transparent; font-size: var(--t-base); font-weight: 400; text-decoration: none; cursor: pointer; transition: background-color var(--przejscie), border-color var(--przejscie), color var(--przejscie); } .przycisk--glowny { background: var(--zielen); color: #ffffff; width: 100%; } .przycisk--glowny:hover { background: var(--zielen-hover); } .przycisk--drugi { background: var(--tlo); color: var(--tekst); border-color: var(--linia-mocna); } .przycisk--drugi:hover { border-color: var(--tekst); } .przycisk--tekst { height: auto; padding: 0; background: none; border: 0; text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 0.5px; text-decoration-color: var(--linia-mocna); color: var(--tekst-2); font-size: var(--t-sm); } .przycisk--tekst:hover { color: var(--tekst); text-decoration-color: var(--tekst); } .przycisk--pelny { width: 100%; } /* Przyciski ekspresowe — makieta Stripe Express Checkout Element */ .ekspres { display: grid; gap: var(--s-3); } .separator-ekspres { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s-3); color: var(--tekst-2); font-size: var(--t-xs); } .separator-ekspres::before, .separator-ekspres::after { content: ""; height: 0; border-top: var(--kreska); } .ekspres-przyciski { display: grid; gap: var(--s-2); grid-template-columns: 1fr 1fr; } .przycisk-ekspres { display: flex; align-items: center; justify-content: center; height: 48px; border-radius: var(--r-kontrolka); border: 0; background: #000000; /* wymóg brandingowy Apple/Google — poza systemem kolorów */ color: #ffffff; cursor: pointer; } .przycisk-ekspres svg { height: 20px; width: auto; } /* ------------------------------------------------------------------------- 11. Informacje przy produkcie ------------------------------------------------------------------------- */ .lista-atutow { display: grid; gap: var(--s-2); padding-top: var(--s-4); border-top: var(--kreska); font-size: var(--t-sm); color: var(--tekst-2); } .lista-atutow li { display: flex; gap: var(--s-3); align-items: flex-start; } .lista-atutow svg { width: 15px; height: 15px; margin-top: 4px; flex: none; color: var(--tekst-3); } .akordeon { border-top: var(--kreska); } .akordeon details { border-bottom: var(--kreska); } .akordeon summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-4) 0; cursor: pointer; list-style: none; font-size: var(--t-base); } .akordeon summary::-webkit-details-marker { display: none; } .akordeon summary .plus { position: relative; width: 12px; height: 12px; flex: none; } .akordeon summary .plus::before, .akordeon summary .plus::after { content: ""; position: absolute; background: var(--tekst-2); } .akordeon summary .plus::before { left: 0; right: 0; top: 50%; height: 0.5px; } .akordeon summary .plus::after { top: 0; bottom: 0; left: 50%; width: 0.5px; transition: transform var(--przejscie); transform-origin: center; } .akordeon details[open] summary .plus::after { transform: scaleY(0); } .akordeon .tresc { padding-bottom: var(--s-5); color: var(--tekst-2); font-size: var(--t-sm); max-width: 62ch; } .akordeon .tresc dl { display: grid; grid-template-columns: minmax(8rem, auto) 1fr; gap: var(--s-2) var(--s-4); margin: 0; } .akordeon .tresc dt { color: var(--tekst-2); } .akordeon .tresc dd { margin: 0; color: var(--tekst); } /* ------------------------------------------------------------------------- 12. Sekcje treściowe (SEO) ------------------------------------------------------------------------- */ .sekcja { padding-block: var(--s-7); border-top: var(--kreska); } .sekcja-naglowek { display: grid; gap: var(--s-2); margin-bottom: var(--s-5); } .sekcja-naglowek p { color: var(--tekst-2); margin: 0; max-width: 60ch; } .siatka-kart { display: grid; gap: var(--s-4); grid-template-columns: repeat(2, 1fr); } .karta-produktu { display: grid; gap: var(--s-3); } .karta-produktu a { text-decoration: none; } .karta-produktu a:hover .nazwa { text-decoration: underline; text-underline-offset: 0.2em; } .karta-produktu .foto { aspect-ratio: 1 / 1; background: var(--kafelek); border-radius: var(--r-karta); overflow: hidden; } .karta-produktu .nazwa { font-size: var(--t-base); } .karta-produktu .cena-mini { font-size: var(--t-sm); color: var(--tekst-2); font-variant-numeric: tabular-nums; } .lista-wpisow { display: grid; gap: var(--s-4); } .wpis { display: grid; gap: var(--s-1); padding-bottom: var(--s-4); border-bottom: var(--kreska); } .wpis a { text-decoration: none; font-size: var(--t-md); } .wpis a:hover { text-decoration: underline; } /* ------------------------------------------------------------------------- 13. Koszyk ------------------------------------------------------------------------- */ .koszyk { display: grid; gap: var(--s-6); padding-bottom: var(--s-7); } .tytul-koszyka { display: flex; align-items: baseline; gap: var(--s-3); margin-bottom: var(--s-4); } .pozycje { display: grid; } .pozycja { display: grid; grid-template-columns: 76px 1fr; gap: var(--s-4); padding-block: var(--s-5); border-bottom: var(--kreska); } .pozycja:first-child { border-top: var(--kreska); } .pozycja .foto { aspect-ratio: 1 / 1; background: var(--kafelek); border-radius: var(--r-kontrolka); overflow: hidden; } .pozycja-dane { display: grid; gap: var(--s-3); align-content: start; } .pozycja-gora { display: grid; grid-template-columns: 1fr auto; gap: var(--s-3); align-items: start; } .pozycja-tytul { display: grid; gap: var(--s-2); justify-items: start; } .pozycja-nazwa { font-size: var(--t-base); text-decoration: none; } .pozycja-nazwa:hover { text-decoration: underline; text-underline-offset: 0.2em; } .pozycja-meta { font-size: var(--t-sm); color: var(--tekst-2); margin: 0; } .pozycja-kwota { text-align: right; font-variant-numeric: tabular-nums; } .pozycja-kwota .jednostkowa { display: block; font-size: var(--t-xs); color: var(--tekst-2); } .plakietka-sub { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--t-xs); letter-spacing: 0.05em; text-transform: uppercase; color: var(--zielen); border: 0.5px solid var(--zielen); border-radius: 999px; padding: 1px var(--s-2); line-height: 1.6; } .pozycja-akcje { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; } .pozycja .stepper { height: 40px; grid-template-columns: 38px minmax(36px, auto) 38px; } .podsumowanie { display: grid; gap: var(--s-5); padding: var(--s-5); border: var(--kreska); border-radius: var(--r-karta); align-content: start; } .linie-podsumowania { display: grid; gap: var(--s-3); font-size: var(--t-sm); } .linia { display: flex; justify-content: space-between; gap: var(--s-4); color: var(--tekst-2); } .linia .kwota { color: var(--tekst); font-variant-numeric: tabular-nums; } .linia--razem { padding-top: var(--s-4); border-top: var(--kreska); font-size: var(--t-md); color: var(--tekst); align-items: baseline; } .linia--razem .kwota { font-family: var(--font-naglowek); font-size: 1.5rem; line-height: 1; } .linia--rabat .kwota { color: var(--zielen); } .dostawa { display: grid; gap: var(--s-2); border: 0; padding: 0; margin: 0; min-inline-size: 0; } .dostawa legend { font-size: var(--t-sm); color: var(--tekst-2); padding: 0; margin-bottom: var(--s-1); } .opcja-dostawy { position: relative; } .opcja-dostawy input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; } .opcja-dostawy-tresc { display: grid; grid-template-columns: 18px 1fr auto; gap: var(--s-3); align-items: center; padding: var(--s-3) var(--s-4); border: var(--kreska-mocna); border-radius: var(--r-kontrolka); font-size: var(--t-sm); transition: border-color var(--przejscie); } .opcja-dostawy input:hover + .opcja-dostawy-tresc { border-color: var(--tekst-2); } .opcja-dostawy input:checked + .opcja-dostawy-tresc { border-color: var(--zielen); } .opcja-dostawy input:focus-visible + .opcja-dostawy-tresc { outline: 2px solid var(--zielen); outline-offset: 2px; } .opcja-dostawy .kropka { margin-top: 0; } .opcja-dostawy input:checked + .opcja-dostawy-tresc .kropka { border-color: var(--zielen); } .opcja-dostawy input:checked + .opcja-dostawy-tresc .kropka::after { transform: scale(1); } .opcja-dostawy .nazwa-dostawy { display: grid; gap: 1px; } .opcja-dostawy .czas { color: var(--tekst-2); font-size: var(--t-xs); } .opcja-dostawy .koszt { font-variant-numeric: tabular-nums; } .pole { display: grid; grid-template-columns: 1fr auto; gap: var(--s-2); } input[type="text"], input[type="email"], input[type="tel"] { height: 48px; padding-inline: var(--s-3); border: var(--kreska-mocna); border-radius: var(--r-kontrolka); background: var(--tlo); color: var(--tekst); font: inherit; font-size: var(--t-base); width: 100%; } input::placeholder { color: var(--tekst-2); } input:focus-visible { outline: 2px solid var(--zielen); outline-offset: 1px; border-color: var(--zielen); } .pasek-progu { display: grid; gap: var(--s-2); font-size: var(--t-sm); color: var(--tekst-2); } .tor { height: 2px; background: var(--linia); border-radius: 999px; overflow: hidden; } .tor span { display: block; height: 100%; background: var(--zielen); } .uwaga-koszyka { font-size: var(--t-sm); color: var(--tekst-2); padding: var(--s-4); background: var(--kafelek); border-radius: var(--r-kontrolka); } /* Pusty koszyk to osobny szablon Woo (cart/cart-empty.php), więc nie ma tu żadnego przełącznika — jeśli się renderuje, ma być widoczny. */ .pusty-koszyk { display: grid; gap: var(--s-4); justify-items: start; padding-block: var(--s-8) var(--s-9); max-width: 42rem; } .pusty-koszyk p { max-width: 40ch; } /* ------------------------------------------------------------------------- 14. Stopka ------------------------------------------------------------------------- */ .stopka { border-top: var(--kreska); padding-block: var(--s-6) var(--s-5); margin-top: var(--s-7); } .stopka-siatka { display: grid; gap: var(--s-6); grid-template-columns: 1fr 1fr; } .stopka-kolumna { display: grid; gap: var(--s-2); align-content: start; } .stopka-kolumna h3 { font-family: var(--font-tekst); font-size: var(--t-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--tekst-2); font-weight: 400; margin-bottom: var(--s-1); } .stopka a { font-size: var(--t-sm); color: var(--tekst-2); text-decoration: none; } .stopka a:hover { color: var(--tekst); text-decoration: underline; } .stopka-opis { font-size: var(--t-sm); color: var(--tekst-2); max-width: 34ch; } .stopka-dol { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); justify-content: space-between; align-items: center; margin-top: var(--s-6); padding-top: var(--s-4); border-top: var(--kreska); font-size: var(--t-xs); color: var(--tekst-2); } /* ------------------------------------------------------------------------- 16. Punkty rozłamu ------------------------------------------------------------------------- */ @media (min-width: 40em) { :root { --t-base: 1rem; --t-md: 1.125rem; --t-lg: 1.5rem; --t-xl: 2rem; --t-2xl: 2.75rem; } .kontener { padding-inline: var(--s-5); } .siatka-kart { grid-template-columns: repeat(4, 1fr); } .stopka-siatka { grid-template-columns: 2fr 1fr 1fr 1fr; } .wiersz-zakupu { grid-template-columns: auto 1fr; align-items: center; } .pozycja { grid-template-columns: 96px 1fr; } } @media (min-width: 60em) { .nawigacja { display: block; } .produkt { grid-template-columns: minmax(0, 1.1fr) minmax(380px, 0.9fr); gap: var(--s-8); padding-block: var(--s-4) var(--s-9); } .galeria { position: sticky; top: 84px; align-self: start; } .koszyk { grid-template-columns: minmax(0, 1.5fr) minmax(330px, 0.5fr); gap: var(--s-8); align-items: start; } .podsumowanie { position: sticky; top: 84px; } .stopka { margin-top: var(--s-9); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } } /* ------------------------------------------------------------------------- 17. Mostek GeneratePress + WooCommerce Tu i tylko tu mapujemy cudze klasy na nasz układ. Jeśli coś po instalacji wygląda jak surowy HTML, przyczyna jest w tej sekcji — nie w komponentach. ------------------------------------------------------------------------- */ /* GeneratePress opakowuje treść w .site-content > .content-area > article. Na stronach sklepu zdejmujemy jego ramkę i odstępy, bo kontener robimy sami. */ .orimatcha-sklep .site-content { padding: 0; } .orimatcha-sklep .content-area { width: 100%; } .orimatcha-sklep .inside-article { padding: 0; border: 0; background: none; } .orimatcha-sklep .entry-header, .orimatcha-sklep .entry-meta, .orimatcha-sklep .page-header-image { display: none; } .orimatcha-sklep .site-main { width: 100%; max-width: var(--maks); margin-inline: auto; padding-inline: var(--s-4); } @media (min-width: 40em) { .orimatcha-sklep .site-main { padding-inline: var(--s-5); } } /* Nagłówek: pasek menu GeneratePressa mieści nasze ikony konta i koszyka. */ .main-navigation .menu-bar-items { display: flex; align-items: center; gap: var(--s-1); } .main-navigation .menu-bar-items .ikona-przycisk { color: var(--tekst); } /* --- Karta produktu ------------------------------------------------------ */ /* Woo renderuje
z naszą galerią i .summary obok. */ .single-product div.product { display: grid; gap: var(--s-6); padding-bottom: var(--s-7); } .single-product div.product .summary { display: grid; gap: var(--s-5); align-content: start; margin: 0; } @media (min-width: 60em) { .single-product div.product { grid-template-columns: minmax(0, 1.1fr) minmax(380px, 0.9fr); gap: var(--s-8); padding-block: var(--s-4) var(--s-9); } .single-product div.product .galeria { position: sticky; top: 84px; align-self: start; } } /* Zdjęcie główne wstawia WordPress, więc kadr wymuszamy tutaj. */ .foto-glowne img, .miniatura img { width: 100%; height: 100%; object-fit: cover; } /* Formularz zakupu: Woo dokłada własne wrappery, które nam nie przeszkadzają, ale muszą przestać być blokami z marginesami. */ .formularz-zakupu { display: grid; gap: var(--s-5); margin: 0; } .formularz-zakupu .quantity { display: contents; } /* Natywne pole ilości w środku naszego steppera. */ .stepper input.qty { height: 100%; width: 100%; min-width: 40px; border: 0; background: none; text-align: center; font: inherit; font-size: var(--t-base); font-variant-numeric: tabular-nums; color: var(--tekst); -moz-appearance: textfield; } .stepper input.qty::-webkit-outer-spin-button, .stepper input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .stepper input.qty:focus-visible { outline-offset: -2px; } /* Cena renderowana przez Woo (get_price_html) — zdejmujemy jego znaczniki. */ .cena .woocommerce-Price-amount { font: inherit; color: inherit; } .cena del, .cena ins { text-decoration: none; } .cena ins { background: none; color: inherit; } /* --- Produkty powiązane -------------------------------------------------- */ .related.products, .upsells.products { padding-block: var(--s-7); border-top: var(--kreska); clear: both; } .related.products > h2, .upsells.products > h2 { margin-bottom: var(--s-5); } ul.products { display: grid; gap: var(--s-4); grid-template-columns: repeat(2, 1fr); margin: 0; padding: 0; } @media (min-width: 40em) { ul.products { grid-template-columns: repeat(4, 1fr); } } ul.products li.product { display: grid; gap: var(--s-3); align-content: start; } ul.products li.product a { text-decoration: none; } ul.products li.product img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: var(--kafelek); border-radius: var(--r-karta); } ul.products li.product .woocommerce-loop-product__title { font-family: var(--font-tekst); font-size: var(--t-base); font-weight: 400; margin: 0; padding: 0; } ul.products li.product .price { font-size: var(--t-sm); color: var(--tekst-2); font-variant-numeric: tabular-nums; } ul.products li.product .button { display: none; } /* dodawanie z listingu bez wyboru gramatury nie ma sensu */ /* --- Opinie -------------------------------------------------------------- */ #reviews { padding-block: var(--s-7); border-top: var(--kreska); } #reviews .comment-form { display: grid; gap: var(--s-3); max-width: 42rem; } #reviews textarea { border: var(--kreska-mocna); border-radius: var(--r-kontrolka); padding: var(--s-3); font: inherit; min-height: 8rem; background: var(--tlo); color: var(--tekst); } #reviews .commentlist { display: grid; gap: var(--s-5); } #reviews .comment_container { display: grid; gap: var(--s-2); padding-bottom: var(--s-5); border-bottom: var(--kreska); } #reviews .star-rating { color: var(--tekst); } /* --- Komunikaty Woo ------------------------------------------------------ */ .woocommerce-message, .woocommerce-info, .woocommerce-error { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); margin: 0 0 var(--s-5); padding: var(--s-4); border: var(--kreska-mocna); border-radius: var(--r-kontrolka); font-size: var(--t-sm); list-style: none; } .woocommerce-message { border-color: var(--zielen); } .woocommerce-message .button, .woocommerce-info .button { margin-left: auto; font-size: var(--t-sm); text-decoration: underline; text-underline-offset: 0.2em; } /* --- Blog i strony treściowe --------------------------------------------- */ .entry-content > * + * { margin-top: var(--s-4); } .entry-content h2 { margin-top: var(--s-6); } .entry-content h3 { margin-top: var(--s-5); } .entry-content p, .entry-content li { max-width: 68ch; } .entry-content ul { padding-left: var(--s-5); } .entry-content ul li { list-style: disc; } .entry-content img { border-radius: var(--r-karta); } /* ------------------------------------------------------------------------- 18. Koszyk — dopięcie do znaczników WooCommerce Formularz koszyka jest jednocześnie siatką dwukolumnową: lewa kolumna to pozycje, prawa to podsumowanie. Dzięki temu wybór przewoźnika i ilości wysyłają się jednym POST-em, bez AJAX-a. ------------------------------------------------------------------------- */ form.koszyk { margin: 0; } .kolumna-pozycji { min-width: 0; } .pod-pozycjami { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-5); } /* Przycisk aktualizacji jest potrzebny tylko bez JS — ze skryptem klika go za nas koszyk.js. Nie ukrywamy go, bo wtedy nawigacja klawiaturą traci jedyną drogę do przeliczenia koszyka. Wyciszamy wizualnie. */ .aktualizuj { height: 40px; font-size: var(--t-sm); color: var(--tekst-2); } /* Stan oczekiwania na przeliczenie. Bez animacji i bez skakania układu — zmienia się tylko przezroczystość kwot. */ .koszyk--oczekuje .linie-podsumowania, .koszyk--aktualizuje .linie-podsumowania { opacity: 0.5; } .koszyk--aktualizuje { pointer-events: none; } /* Pole ilości Woo wewnątrz naszego steppera (ten sam wzorzec co na produkcie). */ .pozycja .quantity { display: contents; } .pozycja .stepper { height: 40px; grid-template-columns: 38px minmax(36px, auto) 38px; } .pozycja-meta.uwaga { color: var(--zielen); } /* Link usuwania: krótki, ale nie może się łamać na dwie linie obok steppera. */ .usun-pozycje { white-space: nowrap; } /* Sumy renderowane przez Woo niosą własne znaczniki cen. */ .linia .woocommerce-Price-amount { font: inherit; color: inherit; } .linia--razem .kwota .woocommerce-Price-amount { font-family: var(--font-naglowek); } .linia--rabat .kwota { color: var(--zielen); } /* Przycisk kasy dokłada Woo w hooku woocommerce_proceed_to_checkout. */ .wc-proceed-to-checkout { display: grid; gap: var(--s-3); } .wc-proceed-to-checkout .checkout-button { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding-inline: var(--s-5); border-radius: var(--r-kontrolka); border: 0; background: var(--zielen); color: #fff; font-size: var(--t-base); text-decoration: none; transition: background-color var(--przejscie); } .wc-proceed-to-checkout .checkout-button:hover { background: var(--zielen-hover); } /* Przyciski ekspresowe Stripe'a wchodzą w ten sam kontener. */ #wc-stripe-express-checkout-element, .wc-stripe-express-checkout-element { margin: 0; } /* Produkty proponowane pod koszykiem. */ .cross-sells { padding-block: var(--s-7); border-top: var(--kreska); grid-column: 1 / -1; } .cross-sells > h2 { margin-bottom: var(--s-5); } @media (min-width: 60em) { form.koszyk { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(330px, 0.5fr); gap: var(--s-8); align-items: start; } }