/* ========================================================================== paulinajanik.pl - design system i layout (F1) Świat: „Stół nakryty dla jednej osoby". Porcelanowa biel, butelkowa zieleń z logo, jeden złocony akcent w dwóch odcieniach, podwójne ranty 16/26, hairline'y rgba. Bez szkła, rozmyć i gradientów. Ruch: tylko transform i opacity. Klasy komponentów są stałe (SPEC §5) - opis w _zrodla/API-F1.md. ========================================================================== */ /* ---------- 1. Fonty (self-hosted, OFL; podział unicode-range jak w fontsource) ---------- */ @font-face { font-family: "Bodoni Moda"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("../fonts/bodoni-moda-latin-standard-normal.woff2") format("woff2-variations"), url("../fonts/bodoni-moda-latin-standard-normal.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: "Bodoni Moda"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("../fonts/bodoni-moda-latin-ext-standard-normal.woff2") format("woff2-variations"), url("../fonts/bodoni-moda-latin-ext-standard-normal.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: "Albert Sans"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/albert-sans-latin-wght-normal.woff2") format("woff2-variations"), url("../fonts/albert-sans-latin-wght-normal.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: "Albert Sans"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/albert-sans-latin-ext-wght-normal.woff2") format("woff2-variations"), url("../fonts/albert-sans-latin-ext-wght-normal.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: "Albert Sans"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("../fonts/albert-sans-latin-wght-italic.woff2") format("woff2-variations"), url("../fonts/albert-sans-latin-wght-italic.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: "Albert Sans"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("../fonts/albert-sans-latin-ext-wght-italic.woff2") format("woff2-variations"), url("../fonts/albert-sans-latin-ext-wght-italic.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; } /* Podzbiory "pl" (tests/qa-seo/subset/build-pl.py): ASCII + polskie litery + znaki z treści, ~45% lżejsze. Zadeklarowane PO plikach latin/latin-ext, więc przeglądarka sprawdza je pierwsze (CSS Fonts: przy nakładających się unicode-range wygrywa reguła późniejsza); unicode-range = dokładnie cmap pliku, każdy inny znak (np. wpisany w panelu) bierze oryginalny plik powyżej. Nowe nazwy plików - fonty są cache'owane na rok bez wersji. */ @font-face { font-family: "Bodoni Moda"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("../fonts/bodoni-moda-pl1-standard-normal.woff2") format("woff2-variations"), url("../fonts/bodoni-moda-pl1-standard-normal.woff2") format("woff2"); unicode-range: U+0020-007E, U+00A0-00AC, U+00AE-00BF, U+00D3, U+00D7, U+00E0, U+00E9, U+00F3, U+2009, U+200B, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2039-203A, U+20AC, U+2212; } @font-face { font-family: "Bodoni Moda"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("../fonts/bodoni-moda-pl2-standard-normal.woff2") format("woff2-variations"), url("../fonts/bodoni-moda-pl2-standard-normal.woff2") format("woff2"); unicode-range: U+0104-0107, U+0118-0119, U+0141-0144, U+015A-015B, U+0179-017C; } @font-face { font-family: "Albert Sans"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/albert-sans-pl1-wght-normal.woff2") format("woff2-variations"), url("../fonts/albert-sans-pl1-wght-normal.woff2") format("woff2"); unicode-range: U+0020-007E, U+00A0-00BF, U+00D3, U+00D7, U+00E0, U+00E9, U+00F3, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2039-203A, U+20AC, U+2212; } @font-face { font-family: "Albert Sans"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/albert-sans-pl2-wght-normal.woff2") format("woff2-variations"), url("../fonts/albert-sans-pl2-wght-normal.woff2") format("woff2"); unicode-range: U+0104-0107, U+0118-0119, U+0141-0144, U+015A-015B, U+0179-017C; } @font-face { font-family: "Albert Sans"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("../fonts/albert-sans-pl1-wght-italic.woff2") format("woff2-variations"), url("../fonts/albert-sans-pl1-wght-italic.woff2") format("woff2"); unicode-range: U+0020-007E, U+00A0-00BF, U+00D3, U+00D7, U+00E0, U+00E9, U+00F3, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2039-203A, U+20AC, U+2212; } @font-face { font-family: "Albert Sans"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("../fonts/albert-sans-pl2-wght-italic.woff2") format("woff2-variations"), url("../fonts/albert-sans-pl2-wght-italic.woff2") format("woff2"); unicode-range: U+0104-0107, U+0118-0119, U+0141-0144, U+015A-015B, U+0179-017C; } /* Zamienniki o dopasowanych metrykach. Zanim fonty dojdą (i zanim dojdą pliki latin-ext z polskimi literami), tekst stoi w Georgii / Times / Arialu przeskalowanych do szerokości Bodoni i Alberta, więc podmiana fontu nie przełamuje wierszy i nie przesuwa strony (CLS 0,33 -> patrz RAPORT-QA, grupa core). size-adjust zmierzony w Chromium na tytułach, nagłówkach i akapitach strony (Bodoni wght 500, opsz 28/20; Albert 400 i 600), ascent/descent = metryki fontu webowego / size-adjust (Bodoni 1,125/0,4; Albert 0,95/0,25). Georgia ma też prawie tę samą szerokość cyfry „0" co Bodoni (jednostki ch w nagłówkach), Times to zapas dla systemów bez Georgii (Linux: Liberation Serif, Tinos). */ @font-face { font-family: "Bodoni Moda Fallback"; font-style: normal; font-weight: 400 900; src: local("Georgia"); size-adjust: 105.4%; ascent-override: 106.74%; descent-override: 37.95%; line-gap-override: 0%; } @font-face { font-family: "Bodoni Moda Fallback Times"; font-style: normal; font-weight: 400 900; src: local("Times New Roman"), local("TimesNewRomanPSMT"), local("Liberation Serif"), local("Tinos"); size-adjust: 114%; ascent-override: 98.68%; descent-override: 35.09%; line-gap-override: 0%; } @font-face { font-family: "Albert Sans Fallback"; font-style: normal; font-weight: 100 500; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Arimo"); size-adjust: 103%; ascent-override: 92.23%; descent-override: 24.27%; line-gap-override: 0%; } @font-face { font-family: "Albert Sans Fallback"; font-style: normal; font-weight: 600 900; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Arimo Bold"); size-adjust: 96.9%; ascent-override: 98.04%; descent-override: 25.8%; line-gap-override: 0%; } /* ---------- 2. Tokeny ---------- */ :root { /* Grunt */ --porcelain: #FAFBF8; --glaze: #F1F4EF; --glaze-2: #E6ECE6; --white: #FFFFFF; /* Tekst na jasnym (muted >= 5.1:1 na glaze) */ --ink: #142817; --ink-2: #3A4D3D; --muted: #5B6B5D; /* Zieleń z logo i pola butelkowe */ --brand: #274629; --bottle: #1F3B22; --bottle-2: #274629; --bottle-3: #33593A; --on-bottle: #F4F7F2; --on-bottle-muted: #ADC4AF; /* Złocony akcent (§19): wyłącznie pierścień fokusu (gilt-ink) i gwiazdki opinii; gilt tylko w stopce */ --gilt: #C9A45A; --gilt-bright: #D4B36A; --gilt-ink: #7D5F17; /* Hairline'y */ --line: rgba(31, 59, 34, .12); --line-strong: rgba(31, 59, 34, .22); --line-on-bottle: rgba(244, 247, 242, .16); /* Obrys kontrolek formularza (pole, checkbox, radio, znacznik karty wyboru, przełącznik): WCAG 1.4.11 - min. 3:1 względem tła (3,8:1 na bieli, 3,7:1 na porcelanie, 3,2:1 na glaze-2). Hairline'y --line/--line-strong zostają wyłącznie do dekoracji. */ --line-control: #768778; /* Stany */ --danger: #A3332B; --success: #1F6B47; --warning: #8A5A00; --danger-soft: #FBEFED; --success-soft: #EDF5F0; --warning-soft: #FBF4E6; --danger-on-bottle: #F0B9B2; /* ikona błędu w toaście na butelkowym tle (ok. 7:1 na #1F3B22) */ /* Nie-kolory: alfa maski (wygaszanie krawędzi pasków) i czerń/szarość wydruku */ --mask: #000; --print-ink: #000; --print-muted: #555; /* Promienie */ --r-hair: 2px; /* paski, tory, znaczniki i ramki fokusu cieńsze niż 4 px */ --r-xs: 6px; /* pola wyboru 22 px (checkbox), kod w linii, ramka fokusu tytułów */ --r-sm: 10px; /* drobne kontrolki poniżej 48 px: wiersze menu, ramka fokusu logo, szkielety, komórki macierzy */ --r: 16px; --r-lg: 26px; --r-pill: 999px; /* Głębia - miękka, z przesunięciem */ --shadow-plate: none; --shadow-lift: 0 1px 2px rgba(31, 59, 34, .04), 0 10px 24px -18px rgba(31, 59, 34, .22); --shadow-panel: 0 1px 2px rgba(31, 59, 34, .04), 0 18px 40px -26px rgba(20, 40, 23, .3); /* Ruch */ --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-out-quart: cubic-bezier(.25, 1, .5, 1); --ease-in-out: cubic-bezier(.65, 0, .35, 1); --t-fast: 160ms; --t-ui: 220ms; --t-enter: 600ms; /* Typografia */ --font-display: "Bodoni Moda", "Bodoni Moda Fallback", "Bodoni Moda Fallback Times", "Times New Roman", serif; --font-text: "Albert Sans", "Albert Sans Fallback", system-ui, -apple-system, "Segoe UI", sans-serif; --font-script: var(--font-text); /* §19: bez pisma odręcznego - nazwa zmiennej zostaje dla zgodności */ --fs-display: clamp(2.75rem, 1.6rem + 3.4vw, 4.5rem); --fs-h1: clamp(2.5rem, 1.6rem + 3vw, 4.5rem); --fs-h2: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); /* h2 sekcji (.h2), Bodoni 500 */ --fs-h2-sub: clamp(1.5rem, 1.25rem + .9vw, 2rem); /* jedyny mniejszy stopień h2 (podsekcja, karta), Bodoni 500 */ --fs-h3: clamp(1.125rem, 1.05rem + .3vw, 1.25rem); --fs-h4: 1.0625rem; --fs-lede: clamp(1.0625rem, 1rem + .35vw, 1.25rem); --fs-body: 1.0625rem; --fs-small: .875rem; --fs-xs: .8125rem; /* Rytm */ --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; --space-10: 8rem; --sec-y: clamp(4rem, 2.5rem + 5vw, 7.5rem); /* 1240 px przy 16 px; w rem, żeby przy tekście 115/130 % kolumna rosła razem z tekstem (jak przy powiększeniu). */ --container: 77.5rem; --gutter: 16px; --pad-x: max(var(--gutter), env(safe-area-inset-left)); --header-h: 4rem; /* Kontekst (jasne tło) - nadpisywany na polach butelkowych */ --fg: var(--ink); --fg-2: var(--ink-2); --fg-muted: var(--muted); --accent: var(--brand); --focus-ring: var(--gilt-ink); --line-ctx: var(--line); --line-ctx-strong: var(--line-strong); --z-header: 120; --z-panel: 130; --z-menu: 110; --z-toast: 250; --z-intro: 300; --z-skip: 400; color-scheme: light; } @media (min-width: 1024px) { :root { --gutter: 32px; --header-h: 4.75rem; --fs-body: 1.125rem; } } /* Ultra-wide (SPEC §20): kontener rośnie do ~1320 / 1440 px (miara tekstu pilnowana osobno, ≤ 68ch), a na dużych ekranach o wysokiej rozdzielczości przy DPR 1 (QHD 2560x1440, 21:9 3440x1440, 4K 3840x2160) cała skala w rem rośnie łagodnie, jak lekkie powiększenie przeglądarki: tekst nie robi się drobny, kontener nie jest małą wyspą pośrodku, a zdjęcia od krawędzi i stopka i tak zajmują całą szerokość. Warunek wysokości chroni szerokie, ale niskie okna. Media queries liczą rem od wartości domyślnej, więc progi się nie przesuwają. */ @media (min-width: 1600px) { :root { --container: 82.5rem; } } @media (min-width: 2200px) { :root { --container: 90rem; --gutter: 48px; } } /* Panel dostępności ustawia html style="font-size:115%|130%" - na dużym ekranie mnożymy obie skale (!important, bo styl inline wygrywa z arkuszem), inaczej „większy tekst" byłby tu mniejszy niż domyślny. */ @media (min-width: 2400px) and (min-height: 1300px) { html { font-size: 112.5%; } html.a11y-scaled[style*="115%"] { font-size: 129.375% !important; } html.a11y-scaled[style*="130%"] { font-size: 146.25% !important; } } @media (min-width: 3600px) and (min-height: 2000px) { html { font-size: 137.5%; } html.a11y-scaled[style*="115%"] { font-size: 158.125% !important; } html.a11y-scaled[style*="130%"] { font-size: 178.75% !important; } } /* Pole butelkowe (§19): tylko stopka (i jawne .on-bottle). .section--bottle, .cta-band i .menu-list--bottle są jasne. */ .site-footer, .on-bottle { --fg: var(--on-bottle); --fg-2: var(--on-bottle); --fg-muted: var(--on-bottle-muted); --accent: var(--gilt); --focus-ring: var(--gilt-bright); --line-ctx: var(--line-on-bottle); --line-ctx-strong: rgba(244, 247, 242, .3); color: var(--fg); } /* ---------- 3. Reset i baza ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); background: var(--porcelain); overflow-x: clip; } @media (prefers-reduced-motion: no-preference) { html.pj-motion { scroll-behavior: smooth; } } body { margin: 0; min-height: 100dvh; background: var(--porcelain); color: var(--ink); font-family: var(--font-text); font-size: var(--fs-body); line-height: 1.6; font-weight: 400; font-optical-sizing: auto; font-kerning: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: clip; overflow-wrap: break-word; caret-color: var(--brand); } h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ol, ul { margin: 0; } ol, ul { padding: 0; } img, svg, video, canvas { display: block; max-width: 100%; height: auto; } img { border-style: none; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; } button { cursor: pointer; background: none; border: 0; padding: 0; } button:disabled { cursor: not-allowed; } address { font-style: normal; } table { border-collapse: collapse; } [hidden] { display: none !important; } :where(h1, h2, h3, h4) { text-wrap: balance; } ::placeholder { color: var(--muted); opacity: 1; } main { display: block; } main:focus { outline: none; } .site-main { padding-top: var(--header-h); } /* ---------- 4. Powierzchnie przeglądarki ---------- */ ::selection { background: var(--brand); color: var(--porcelain); } .site-footer ::selection, .on-bottle ::selection { background: var(--on-bottle); color: var(--bottle); } :where(a, button, input, select, textarea, summary, [tabindex], .placecard, .choice-card):focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; border-radius: var(--r-xs); } :where(input, select, textarea):focus-visible { outline-offset: 2px; } html { scrollbar-color: rgba(31, 59, 34, .32) var(--porcelain); } ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-track { background: var(--porcelain); } ::-webkit-scrollbar-thumb { background: rgba(31, 59, 34, .28); border-radius: var(--r-pill); border: 3px solid var(--porcelain); } ::-webkit-scrollbar-thumb:hover { background: rgba(31, 59, 34, .45); } .num, time, .tabular { font-variant-numeric: tabular-nums lining-nums; } /* Cyfry Bodoni w numerach telefonu i latach: tabularna „1" w komórce szerokości „0" dawała „5I0 7I5" z nierównymi odstępami, a automatyczny opsz gubił włoskowate kreski. Proporcjonalne + opsz ograniczony. */ .cta-band__tel, .mobile-menu__tel, .home-free__tel, .page-book__tel, .visit-card__tel, .edu__year { font-variant-numeric: lining-nums proportional-nums; font-variation-settings: "opsz" 18; } /* ---------- 5. Typografia ---------- */ .display, .h1, .h2, .page-intro__title, .cta-band__title { font-family: var(--font-display); font-optical-sizing: auto; font-weight: 400; font-style: normal; color: var(--fg); } /* Optyczny rozmiar Bodoni ograniczony: przy auto duże nagłówki brały opsz 96/52 i włoskowate kreski znikały na ekranach 1x („ł" czytało się jak „l", „w" rozpadało się na dwie kreski). */ body { font-variation-settings: "opsz" 20; } /* dziedziczone: każdy nagłówek Bodoni (moduły też) ma jeden krój; Albert Sans nie ma osi opsz */ h1, .display, .h1, .page-intro__title, .ap-head__title, .rd-head__title { font-variation-settings: "opsz" 28; } .display { font-size: var(--fs-display); line-height: 1.06; letter-spacing: -.01em; } .h1 { font-size: var(--fs-h1); line-height: 1.08; letter-spacing: -.01em; } .h2 { font-size: var(--fs-h2); line-height: 1.14; letter-spacing: -.01em; font-weight: 500; } /* §19: bez kursywy i mieszanych krojów w nagłówkach - / w tytule to zwykły tekst. */ :is(h1, h2, h3, h4, h5, h6, .display, .h1, .h2, .h3, .h4, .page-intro__title, .cta-band__title, .menu-list__title) :is(em, i) { font-style: normal !important; font-family: inherit !important; font-weight: inherit; color: inherit; } .h3 { font-family: var(--font-text); font-size: var(--fs-h3); line-height: 1.35; font-weight: 600; letter-spacing: 0; color: var(--fg); } /* h3+ bez klasy: 600 zamiast UA bold 700 (cennik, kalkulatory); klasa modułu wygrywa (zerowa specyficzność). */ :where(h3, h4, h5, h6) { font-weight: 600; } .h4 { font-family: var(--font-text); font-size: var(--fs-h4); line-height: 1.4; font-weight: 600; color: var(--fg); } .lede { font-size: var(--fs-lede); line-height: 1.6; color: var(--fg-2); max-width: 36em; text-wrap: pretty; } .small { font-size: var(--fs-small); } .muted { color: var(--fg-muted); } .text-balance { text-wrap: balance; } .text-pretty { text-wrap: pretty; } /* §19: podpis to zwykły tekst (bez pisma odręcznego). */ .signature { font-family: var(--font-text); font-style: normal; font-weight: 500; font-size: 1rem; line-height: 1.4; color: var(--fg-2); letter-spacing: 0; } /* ---------- 6. Układ ---------- */ .container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right)); } .container--narrow { max-width: calc(51.25rem + 2 * var(--gutter)); } .section { padding-block: var(--sec-y); position: relative; } .section--tight { padding-block: calc(var(--sec-y) * .6); } .section--glaze { background: var(--glaze); } .section--bottle { background: var(--porcelain); } /* §19: bez zielonych pasów w treści */ .section__head { display: grid; gap: var(--space-4); margin-bottom: clamp(2rem, 4vw, 3.5rem); max-width: 46rem; } .section__head .lede { color: var(--fg-muted); } .stack > * + * { margin-top: var(--stack, 1rem); } .hairline { border: 0; border-top: 1px solid var(--line-ctx); margin: 0; } .with-subnav { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.75rem, 4vw, 4.5rem); align-items: start; } .with-subnav__main { min-width: 0; } @media (min-width: 1024px) { .with-subnav { grid-template-columns: 17.5rem minmax(0, 1fr); } .with-subnav > .subnav { position: sticky; top: calc(var(--header-h) + 1.5rem); } } /* Dostępność */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .skip-link { position: fixed; left: 16px; top: 12px; z-index: var(--z-skip); background: var(--bottle); color: var(--on-bottle); padding: 12px 18px; border-radius: var(--r-pill); font-weight: 600; font-size: .9375rem; transform: translateY(-160%); transition: transform var(--t-ui) var(--ease-out); } .skip-link:focus, .skip-link:focus-visible { transform: none; outline-color: var(--gilt-bright); } /* Ikony (Phosphor Light) */ .icon { width: 1.25em; height: 1.25em; flex: none; fill: currentColor; } /* ---------- 7. Przyciski i linki ---------- */ .btn { --btn-bg: var(--brand); --btn-fg: var(--porcelain); --btn-border: transparent; --disc-bg: transparent; --disc-fg: currentColor; --btn-h: 3rem; --disc: 1em; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .625rem; min-height: var(--btn-h); padding: 0 1.5rem; border-radius: var(--r-pill); background: var(--btn-bg); color: var(--btn-fg); border: 1px solid var(--btn-border); font-family: var(--font-text); font-size: 1rem; font-weight: 600; line-height: 1.1; letter-spacing: .005em; white-space: nowrap; text-decoration: none; user-select: none; -webkit-tap-highlight-color: transparent; transition: background-color var(--t-ui) var(--ease-out), color var(--t-ui) var(--ease-out), border-color var(--t-ui) var(--ease-out), transform var(--t-fast) var(--ease-out); } .btn--disc { padding-right: 1.375rem; } .btn__label { position: relative; } /* §19: bez „przycisku w przycisku" - tarcza to już tylko strzałka w linii napisu. */ .btn__disc { display: inline-flex; align-items: center; justify-content: center; width: auto; height: auto; border-radius: 0; background: none; color: inherit; flex: none; transition: transform var(--t-ui) var(--ease-out); } .btn__disc .icon { width: 1rem; height: 1rem; } .btn:active { transform: scale(.98); } .btn--primary { box-shadow: none; } .btn--gilt { --btn-bg: var(--brand); --btn-fg: var(--porcelain); } /* §19: złoty wariant = główny (API bez zmian) */ .btn--ghost { --btn-bg: transparent; --btn-fg: var(--fg); --btn-border: var(--line-ctx-strong); } .btn--quiet { --btn-bg: transparent; --btn-fg: var(--fg); padding-inline: .5rem; min-height: 2.75rem; } .site-footer .btn--primary, .site-footer .btn--gilt, .on-bottle .btn--primary, .on-bottle .btn--gilt { --btn-bg: var(--on-bottle); --btn-fg: var(--bottle); } .btn--sm { --btn-h: 2.75rem; font-size: .9375rem; padding: 0 1.125rem; gap: .5rem; } .btn--lg { --btn-h: 3.25rem; font-size: 1.0625rem; padding: 0 1.75rem; } .btn--block { display: flex; width: 100%; } .btn--block.btn--disc { padding-inline: 1.5rem; } .btn[aria-disabled="true"], .btn:disabled { opacity: .45; pointer-events: none; box-shadow: none; } .btn.is-loading { pointer-events: none; } .btn.is-loading .btn__disc .icon { opacity: 0; } .btn.is-loading .btn__disc::after { content: ""; position: absolute; width: 1rem; height: 1rem; border-radius: 50%; border: 1.5px solid currentColor; border-right-color: transparent; animation: pj-spin .7s linear infinite; } .btn.is-loading .btn__disc { position: relative; } @keyframes pj-spin { to { transform: rotate(360deg); } } .link-arrow { display: inline-flex; align-items: center; gap: .4rem; font-weight: 500; color: var(--fg); text-decoration: underline; text-decoration-color: var(--line-ctx-strong); text-underline-offset: .3em; text-decoration-thickness: 1px; transition: color var(--t-ui) var(--ease-out), text-decoration-color var(--t-ui) var(--ease-out); } .link-arrow__icon { width: 1em; height: 1em; color: currentColor; transition: transform var(--t-ui) var(--ease-out); } .icon-btn { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid var(--line-strong); color: var(--ink-2); background: transparent; transition: background-color var(--t-ui) var(--ease-out), border-color var(--t-ui) var(--ease-out), color var(--t-ui) var(--ease-out), transform var(--t-fast) var(--ease-out); } .icon-btn .icon { width: 1.3rem; height: 1.3rem; } .icon-btn[aria-expanded="true"] { background: var(--glaze-2); border-color: var(--line-strong); color: var(--brand); } .icon-btn:active { transform: scale(.96); } .tel-link { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; } /* ---------- 8. Nagłówek ---------- */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: var(--z-header); height: var(--header-h); padding-right: var(--scrollbar-comp, 0px); } .site-header__plate { position: absolute; inset: 0; background: var(--porcelain); border-bottom: 1px solid var(--line); box-shadow: none; opacity: 0; transition: opacity var(--t-ui) var(--ease-out); } .site-header.is-scrolled .site-header__plate, .is-menu-open .site-header__plate { opacity: 1; } .site-header__inner { position: relative; height: 100%; display: flex; align-items: center; gap: 1rem; } .site-header__brand { display: inline-flex; align-items: center; color: var(--brand); margin-right: auto; flex: 0 1 auto; min-width: 0; border-radius: var(--r-sm); transform-origin: left center; transition: transform var(--t-ui) var(--ease-out); } /* Logo nigdy się nie ściska (max-width: none) - przy braku miejsca wchodzi wyższy stopień ciasnego nagłówka, a w najgorszym razie logo zachodzi pod narzędzia zamiast wypychać hamburger poza ekran (marka ma min-width: 0). */ .site-header__logo { height: 1.5rem; width: auto; max-width: none; flex: none; } .site-header__mark { display: none; height: 2.125rem; width: auto; max-width: none; flex: none; } /* Ciasny nagłówek (wąski ekran, powiększony tekst, dłuższe etykiety EN): najpierw samo jabłko z logo, potem bez przycisku „Umów wizytę" (jest w menu). Klasy ustawia skrypt w (zgadnięcie z progów layout_header_fit()) i main.js (pomiar) - hamburger nigdy nie wypada poza ekran. */ @media (max-width: 379px) { .site-header__logo { display: none; } .site-header__mark { display: block; } } html.hdr-mark .site-header__logo { display: none; } html.hdr-mark .site-header__mark { display: block; } html.hdr-nocta .site-header__cta { display: none; } @media (min-width: 1024px) { .site-header__logo { height: 1.875rem; } } .site-header__tools { display: flex; align-items: center; gap: .5rem; flex: none; } @media (max-width: 1023px) { .site-header__cta { --btn-h: 2.5rem; font-size: .875rem; padding: 0 .875rem; } .site-header .lang-switch--bar { display: none; } } @media (max-width: 359px) { .site-header__cta { padding: 0 .75rem; } } /* Menu główne (desktop) */ .primary-nav { display: none; min-width: 0; } @media (min-width: 1024px) { .primary-nav { display: block; margin-right: auto; } } /* Gdy menu nie mieści się w jednym wierszu (np. tekst 130% albo dłuższe etykiety EN), main.js dodaje html.nav-collapsed i nagłówek przechodzi w tryb hamburgera także na szerokim ekranie. */ html.nav-collapsed .primary-nav { display: none; } html.nav-collapsed .site-header .lang-switch--bar { display: none; } .primary-nav__list { list-style: none; display: flex; align-items: center; gap: .125rem; } .primary-nav__item { position: relative; } .primary-nav__trigger, .primary-nav__link { position: relative; white-space: nowrap; display: inline-flex; align-items: center; gap: .3rem; height: 2.75rem; padding: 0 .8rem; font-size: .9375rem; font-weight: 500; color: var(--ink); border-radius: var(--r-pill); transition: color var(--t-ui) var(--ease-out); } .primary-nav__trigger::after, .primary-nav__link::after { content: ""; position: absolute; left: .8rem; right: .8rem; bottom: .55rem; height: 1px; background: var(--brand); transform: scaleX(0); transform-origin: left center; transition: transform var(--t-ui) var(--ease-out); } .primary-nav__trigger[aria-expanded="true"]::after, .primary-nav__item.is-current > .primary-nav__trigger::after, .primary-nav__item.is-current > .primary-nav__link::after { transform: scaleX(1); } .primary-nav__trigger::after { right: 2rem; } /* iPad poziomo i małe laptopy (1024-1199 px): ciaśniejsze menu, żeby zostało w jednym wierszu (SPEC: iPad poziomo = desktop). */ @media (min-width: 1024px) and (max-width: 1199px) { .primary-nav__trigger, .primary-nav__link { padding: 0 .55rem; } .primary-nav__trigger::after, .primary-nav__link::after { left: .55rem; right: .55rem; } .primary-nav__trigger::after { right: 1.7rem; } .site-header__logo { height: 1.625rem; } } /* Przy powiększonym tekście ten sam ciaśniejszy wariant do 1279 px - menu dłużej zostaje w jednym wierszu. */ @media (min-width: 1200px) and (max-width: 1279px) { html.a11y-scaled .primary-nav__trigger, html.a11y-scaled .primary-nav__link { padding: 0 .55rem; } html.a11y-scaled .primary-nav__trigger::after, html.a11y-scaled .primary-nav__link::after { left: .55rem; right: .55rem; } html.a11y-scaled .primary-nav__trigger::after { right: 1.7rem; } html.a11y-scaled .site-header__logo { height: 1.625rem; } } .primary-nav__item.is-current > .primary-nav__trigger, .primary-nav__item.is-current > .primary-nav__link, .primary-nav__trigger[aria-expanded="true"] { color: var(--brand); } .primary-nav__caret { width: .9rem; height: .9rem; transition: transform var(--t-ui) var(--ease-out); } .primary-nav__trigger[aria-expanded="true"] .primary-nav__caret { transform: rotate(180deg); } /* Panele rozwijane (§19): jedna biała karta z hairline, r16, grupy rozdzielone pionowym hairline */ .nav-panel { position: absolute; top: calc(100% + .75rem); left: -1rem; z-index: var(--z-panel); width: max-content; max-width: min(40rem, calc(100vw - 2rem)); opacity: 0; transform: translateY(-6px) scale(.985); transform-origin: 2rem 0; transition: opacity var(--t-fast) var(--ease-out), transform var(--t-ui) var(--ease-out); } .nav-panel.is-open { opacity: 1; transform: none; } .nav-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -1rem; height: 1rem; } .nav-panel__plate { padding: 0; border-radius: var(--r); background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-panel); } .nav-panel__core { display: flex; align-items: stretch; gap: .5rem; padding: .75rem; border-radius: var(--r); background: transparent; border: 0; } .nav-panel__list { list-style: none; display: grid; gap: 2px; min-width: 15rem; } .nav-panel__list--main { padding: .25rem 0; align-content: start; } .nav-panel__link { position: relative; display: flex; align-items: center; padding: .55rem .875rem; border-radius: var(--r-sm); font-size: .96875rem; font-weight: 500; color: var(--ink); transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out); } .nav-panel__link::before { content: none; } .nav-panel__link.is-current { color: var(--brand); font-weight: 600; } .nav-panel__link.is-current::before { transform: scale(1); } .nav-panel__group { padding: .25rem 0 .25rem .75rem; border-left: 1px solid var(--line); min-width: 15rem; } .nav-panel__group-label { padding: 0 .875rem .4rem; font-family: var(--font-text); font-style: normal; font-size: .875rem; font-weight: 500; line-height: 1.3; color: var(--muted); } .nav-panel__group .nav-panel__link:focus-visible { background: var(--porcelain); } .nav-panel__person { display: grid; justify-items: start; align-content: start; gap: .25rem; padding: .5rem 1rem .5rem 1.25rem; border-left: 1px solid var(--line); min-width: 12rem; } .nav-panel__avatar { width: 5rem; height: 6.25rem; border-radius: var(--r-sm); overflow: hidden; box-shadow: none; margin-bottom: .5rem; } .nav-panel__avatar img { width: 100%; height: 100%; object-fit: cover; } .nav-panel__signature { font-size: 1rem; font-weight: 600; color: var(--ink); } .nav-panel__role { font-size: var(--fs-xs); color: var(--muted); } /* Przełącznik języka */ .lang-switch__list { list-style: none; display: flex; align-items: center; } .lang-switch--bar .lang-switch__list { gap: 0; margin-right: .25rem; } .lang-switch--bar li + li { position: relative; } .lang-switch--bar li + li::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: .875rem; margin-top: -.4375rem; background: var(--line-strong); } .lang-switch__item { display: inline-flex; align-items: center; justify-content: center; min-width: 2.5rem; height: 2.5rem; padding: 0 .5rem; font-size: .8125rem; font-weight: 600; letter-spacing: .08em; color: var(--muted); border-radius: var(--r-sm); transition: color var(--t-fast) var(--ease-out); } .lang-switch__item.is-current { color: var(--ink); } /* Strona główna: przezroczysty nagłówek leży nad lawendowym tłem portretu (#CAC4CB-#D7D1D8); --muted ma tam 3,3-3,9:1, --ink-2 ok. 5,7-6,1:1 (AA dla 13 px). */ .route-home .lang-switch--bar .lang-switch__item:not(.is-current) { color: var(--ink-2); } .lang-switch__item.is-disabled { opacity: .45; cursor: not-allowed; } .lang-switch--menu .lang-switch__list { justify-content: center; gap: .5rem; } .lang-switch--menu .lang-switch__item { letter-spacing: 0; font-size: .9375rem; height: 2.75rem; padding: 0 1rem; border-radius: var(--r-pill); border: 1px solid var(--line); } .lang-switch--menu .lang-switch__item.is-current { border-color: var(--brand); color: var(--brand); } /* Panel ułatwień dostępu */ .a11y { position: relative; } .a11y__panel { position: absolute; right: -.5rem; top: calc(100% + .9rem); z-index: var(--z-panel); width: min(20rem, calc(100vw - 2rem)); opacity: 0; transform: translateY(-6px) scale(.985); transform-origin: calc(100% - 1.75rem) 0; transition: opacity var(--t-fast) var(--ease-out), transform var(--t-ui) var(--ease-out); } /* Telefon i tablet (także tryb hamburgera na szerokim ekranie): panel przypięty do ekranu pod nagłówkiem, z marginesami strony - przycisk stoi daleko od prawej krawędzi, więc panel zakotwiczony do niego wychodził poza lewą krawędź (przy 320 px od -153 px). */ @media (max-width: 1023px) { .a11y__panel { position: fixed; top: calc(var(--header-h) + .5rem); right: var(--pad-x); left: auto; width: min(22rem, calc(100vw - 2 * var(--gutter))); transform-origin: calc(100% - 4rem) 0; } } html.nav-collapsed .a11y__panel { position: fixed; top: calc(var(--header-h) + .5rem); right: max(var(--pad-x), calc((100vw - var(--container)) / 2)); left: auto; width: min(22rem, calc(100vw - 2 * var(--gutter))); } .a11y__panel.is-open { opacity: 1; transform: none; } .a11y__plate { max-height: calc(100dvh - var(--header-h) - 1.5rem); overflow-y: auto; overscroll-behavior: contain; padding: 1.125rem; border-radius: var(--r-lg); background: var(--porcelain); border: 1px solid var(--line); box-shadow: var(--shadow-panel); /* §19: bez wewnętrznej podwójnej obwódki (double bezel) */ display: grid; gap: .375rem; } .a11y__head { display: flex; align-items: center; justify-content: space-between; padding: .25rem .25rem .5rem .5rem; } .a11y__title { font-family: var(--font-display); font-size: 1.25rem; font-weight: 500; color: var(--ink); } .a11y__close { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; color: var(--ink-2); } .a11y__row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .375rem .5rem .625rem; border-bottom: 1px solid var(--line); margin-bottom: .25rem; } .a11y__label { font-size: .9375rem; font-weight: 500; color: var(--ink); } .a11y__seg { display: inline-flex; padding: 3px; border-radius: var(--r-pill); background: var(--glaze); border: 1px solid var(--line); } .a11y__seg button { display: inline-grid; place-items: center; width: 2.5rem; height: 2.25rem; border-radius: var(--r-pill); color: var(--ink-2); transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out); } .a11y__seg button[aria-pressed="true"] { background: var(--brand); color: var(--porcelain); } .a11y__a { font-family: var(--font-display); font-weight: 600; line-height: 1; } .a11y__a--1 { font-size: .875rem; } .a11y__a--2 { font-size: 1.0625rem; } .a11y__a--3 { font-size: 1.3125rem; } .a11y__switch { display: flex; align-items: center; gap: .75rem; width: 100%; min-height: 2.875rem; padding: 0 .5rem; border-radius: var(--r-sm); text-align: left; transition: background-color var(--t-fast) var(--ease-out); } .a11y__switch .a11y__label { flex: 1; } .a11y__icon { width: 1.25rem; height: 1.25rem; color: var(--brand); } .a11y__box { position: relative; width: 2.375rem; height: 1.375rem; border-radius: var(--r-pill); flex: none; background: var(--white); border: 1.5px solid var(--line-control); transition: background-color var(--t-ui) var(--ease-out), border-color var(--t-ui) var(--ease-out); } /* Wyłączony: ciemna gałka na białym torze (5,7:1); włączony: biała gałka na zieleni (10,5:1). */ .a11y__box::after { content: ""; position: absolute; left: 2px; top: 50%; width: .9rem; height: .9rem; margin-top: -.45rem; border-radius: 50%; background: var(--muted); transition: transform var(--t-ui) var(--ease-out), background-color var(--t-ui) var(--ease-out); } .a11y__switch[aria-pressed="true"] .a11y__box { background: var(--brand); border-color: var(--brand); } .a11y__switch[aria-pressed="true"] .a11y__box::after { transform: translateX(1rem); background: var(--white); } .a11y__reset { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; margin-top: .5rem; min-height: 2.75rem; border-radius: var(--r-pill); border: 1px solid var(--line-strong); font-size: .875rem; font-weight: 600; color: var(--ink-2); transition: background-color var(--t-fast) var(--ease-out); } .a11y__note { font-size: var(--fs-xs); color: var(--muted); text-align: center; padding-top: .25rem; } /* Hamburger morfujący w X */ .burger { display: inline-grid; place-items: center; position: relative; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid var(--line-strong); color: var(--ink); transition: background-color var(--t-ui) var(--ease-out), transform var(--t-fast) var(--ease-out); } .burger:active { transform: scale(.96); } .burger__line { position: absolute; left: 50%; top: 50%; width: 1.125rem; height: 1.5px; margin-left: -.5625rem; border-radius: var(--r-hair); background: currentColor; transition: transform var(--t-ui) var(--ease-out); } .burger__line:nth-child(1) { transform: translateY(-4px); } .burger__line:nth-child(2) { transform: translateY(4px); } .burger[aria-expanded="true"] { background: var(--glaze-2); } .burger[aria-expanded="true"] .burger__line:nth-child(1) { transform: rotate(45deg); } .burger[aria-expanded="true"] .burger__line:nth-child(2) { transform: rotate(-45deg); } @media (min-width: 1024px) { html:not(.nav-collapsed) .burger { display: none; } } /* ---------- 9. Menu mobilne ---------- */ .mobile-menu { position: fixed; inset: var(--header-h) 0 0 0; z-index: var(--z-menu); background: var(--porcelain); opacity: 0; transition: opacity var(--t-ui) var(--ease-out); } .mobile-menu.is-open { opacity: 1; } @media (min-width: 1024px) { html:not(.nav-collapsed) .mobile-menu { display: none !important; } } .mobile-menu__scroll { height: 100%; overflow-y: auto; overscroll-behavior: contain; padding: clamp(1.5rem, 6vh, 3rem) var(--pad-x) calc(2rem + env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; gap: 2.25rem; } .mobile-menu__nav { width: 100%; max-width: 26rem; } .mobile-menu__list { list-style: none; text-align: left; } .mobile-menu__item { border-bottom: 1px solid var(--line); } .mobile-menu__item > * { opacity: 1; } .mobile-menu__toggle, .mobile-menu__link { position: relative; display: flex; align-items: center; justify-content: flex-start; gap: .75rem; width: 100%; min-height: 3.5rem; padding: .5rem 2.5rem .5rem 0; text-align: left; font-family: var(--font-text); font-size: 1.25rem; font-weight: 500; letter-spacing: 0; line-height: 1.25; color: var(--ink); } .mobile-menu__item.is-current > .mobile-menu__toggle, .mobile-menu__item.is-current > .mobile-menu__link { color: var(--brand); } .mobile-menu__plus { position: absolute; right: .5rem; top: 50%; width: 1rem; height: 1rem; margin-top: -.5rem; } .mobile-menu__plus::before, .mobile-menu__plus::after { content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 1.5px; margin-top: -.75px; background: var(--ink-2); transition: transform var(--t-ui) var(--ease-out); } .mobile-menu__plus::after { transform: rotate(90deg); } .mobile-menu__toggle[aria-expanded="true"] .mobile-menu__plus::after { transform: rotate(0deg) scaleX(0); } .mobile-menu__sub { padding: 0 0 1.25rem; } .mobile-menu__sub:not([hidden]) { animation: pj-sub-in var(--t-ui) var(--ease-out); } @keyframes pj-sub-in { from { opacity: 0; transform: translateY(-4px); } } .mobile-menu__sublist { list-style: none; display: grid; gap: .125rem; } .mobile-menu__sublink { display: inline-flex; align-items: center; justify-content: flex-start; min-height: 2.75rem; padding: .25rem 0; font-size: 1.0625rem; color: var(--ink-2); border-radius: var(--r-pill); } .mobile-menu__sublink.is-current { color: var(--brand); font-weight: 600; } .mobile-menu__sublink.is-current span { text-decoration: underline; text-decoration-color: var(--brand); text-underline-offset: .35em; text-decoration-thickness: 1px; } .mobile-menu__group { margin: .5rem 0; padding: .75rem 0 .25rem; border-top: 1px solid var(--line); } .mobile-menu__group-label { display: block; font-family: var(--font-text); font-style: normal; font-size: .875rem; font-weight: 500; color: var(--muted); } .mobile-menu__meta { width: 100%; max-width: 26rem; display: grid; justify-items: center; gap: 1rem; text-align: center; } .mobile-menu__cta { width: 100%; } .mobile-menu__tel { display: inline-flex; align-items: center; gap: .5rem; font-size: 1.25rem; font-weight: 600; color: var(--brand); min-height: 2.75rem; } .mobile-menu__tel .icon { width: 1.25rem; height: 1.25rem; color: var(--brand); } .mobile-menu__mail { color: var(--ink-2); font-size: .9375rem; min-height: 2.75rem; display: inline-flex; align-items: center; } .mobile-menu__close { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.75rem; padding: 0 1rem; border-radius: var(--r-pill); color: var(--ink-2); font-size: .9375rem; font-weight: 600; transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out); } .mobile-menu__close .icon { width: 1.1rem; height: 1.1rem; } .is-menu-open .site-header .site-header__cta { visibility: visible; } html.is-scroll-locked, html.is-scroll-locked body { overflow: hidden; } /* Bez JavaScriptu: panele działów rozwijają się po najechaniu i fokusie, hamburger otwiera menu przez #mobile-menu (:target), a wszystkie podlisty menu mobilnego są rozwinięte. */ html:not(.pj-js) .primary-nav__item:hover > .nav-panel, html:not(.pj-js) .primary-nav__item:focus-within > .nav-panel { display: block !important; opacity: 1; transform: none; } html:not(.pj-js) .primary-nav__item:hover > .primary-nav__trigger .primary-nav__caret, html:not(.pj-js) .primary-nav__item:focus-within > .primary-nav__trigger .primary-nav__caret { transform: rotate(180deg); } html:not(.pj-js) .mobile-menu:target { display: block !important; opacity: 1; } html:not(.pj-js) .mobile-menu__sub[hidden] { display: block !important; } html:not(.pj-js) .mobile-menu__toggle { pointer-events: none; } html:not(.pj-js) .mobile-menu__plus { display: none; } /* ---------- 10. Plansza wstępna ---------- */ /* Cała choreografia jest w CSS i rusza z pierwszym malowaniem (1,54 s, tylko transform i opacity): nie czeka na GSAP ani main.js, więc na wolnym łączu plansza nie wisi pusta i nigdy nie gra drugi raz. main.js tylko zdejmuje planszę z DOM, odsłania stronę w chwili otwarcia (1,04 s) i obsługuje pominięcie (klik, klawisz -> .is-skipping). Bez JS (brak html.pj-motion) i przy powrocie w tej samej sesji (html.pj-no-intro z flagi ustawionej w ) plansza w ogóle się nie pokazuje. */ .intro { position: fixed; inset: 0; z-index: var(--z-intro); display: none; place-items: center; background: var(--porcelain); cursor: pointer; } /* §19: samo jabłko z logo pojawia się na bieli; całość < 1 s (0,6 s do odsłonięcia strony, 0,9 s do końca). */ html.pj-motion:not(.pj-no-intro) .intro { display: grid; animation: pj-intro-out .3s cubic-bezier(.33, 1, .68, 1) .6s both; } html.pj-motion:not(.pj-no-intro) .intro.is-skipping { animation: pj-intro-skip .2s cubic-bezier(.33, 1, .68, 1) both; } @keyframes pj-intro-out { from { opacity: 1; visibility: visible; } to { opacity: 0; visibility: hidden; } } @keyframes pj-intro-skip { from { opacity: 1; visibility: visible; } to { opacity: 0; visibility: hidden; } } @keyframes pj-intro-mark { from { opacity: 0; } to { opacity: 1; } } html.pj-motion:not(.pj-no-intro) .intro__mark { animation: pj-intro-mark .45s cubic-bezier(.33, 1, .68, 1) both; } .intro__stage { display: grid; place-items: center; } .intro__mark { display: block; width: clamp(3.5rem, 12vw, 4.5rem); color: var(--brand); } .intro__mark .logo { display: block; width: 100%; height: auto; } /* ---------- 11. Stopka ---------- */ .site-footer { background: var(--bottle); color: var(--on-bottle); padding-top: clamp(4rem, 3rem + 5vw, 7rem); padding-bottom: calc(1.5rem + env(safe-area-inset-bottom)); } .site-footer a { transition: color var(--t-fast) var(--ease-out); } .site-footer__top { display: grid; gap: 3rem 2rem; grid-template-columns: minmax(0, 1fr); } @media (min-width: 760px) { .site-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } .site-footer__nav { grid-column: 1 / -1; } } @media (min-width: 1100px) { .site-footer__top { grid-template-columns: minmax(0, 1.15fr) minmax(0, .95fr) minmax(0, 1.9fr); gap: 3rem clamp(2rem, 4vw, 4rem); } .site-footer__nav { grid-column: auto; } } .site-footer__brand { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; justify-items: start; gap: 1.5rem; } .site-footer__logo { display: inline-block; color: var(--on-bottle); border-radius: var(--r-sm); } .site-footer__logo .logo { height: 2.375rem; width: auto; } .site-footer__blurb { color: var(--on-bottle-muted); font-size: 1rem; line-height: 1.6; max-width: 21.4em; text-wrap: pretty; } .site-footer__head { font-family: var(--font-text); font-weight: 600; font-size: 1rem; line-height: 1.3; letter-spacing: 0; color: var(--on-bottle); margin-bottom: 1rem; } .site-footer__address { display: grid; gap: .125rem; color: var(--on-bottle); line-height: 1.55; font-size: 1rem; } .site-footer__address span:first-child { font-weight: 600; } .site-footer__directions, .site-footer__social { display: inline-flex; align-items: center; gap: .5rem; margin-top: .875rem; min-height: 2.75rem; color: var(--on-bottle); font-weight: 500; font-size: .9375rem; text-decoration: underline; text-decoration-color: var(--line-on-bottle); text-underline-offset: .3em; text-decoration-thickness: 1px; } .site-footer__directions .icon, .site-footer__social .icon { width: 1.15rem; height: 1.15rem; } .site-footer__facts { display: grid; gap: .875rem; margin-top: 1rem; padding-top: 1.25rem; border-top: 1px solid var(--line-on-bottle); } .site-footer__facts div { display: grid; gap: .125rem; } .site-footer__facts dt { font-size: var(--fs-xs); color: var(--on-bottle-muted); } .site-footer__facts dd { font-size: 1rem; color: var(--on-bottle); } .site-footer__facts dd a { text-decoration: underline; text-decoration-color: var(--line-on-bottle); text-underline-offset: .3em; text-decoration-thickness: 1px; } .site-footer__social { margin-top: .5rem; } .site-footer__write { display: flex; width: fit-content; align-items: center; gap: .5rem; margin-top: 1rem; min-height: 2.75rem; color: var(--on-bottle); font-weight: 500; font-size: .9375rem; text-decoration: underline; text-decoration-color: var(--line-on-bottle); text-underline-offset: .3em; text-decoration-thickness: 1px; } .site-footer__write .icon { width: 1.15rem; height: 1.15rem; } .site-footer__write + .site-footer__social { margin-top: 0; } .site-footer__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 1.5rem; } @media (min-width: 760px) { .site-footer__nav { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 1100px) { .site-footer__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem clamp(1.5rem, 3vw, 3rem); } } .site-footer__links { list-style: none; display: grid; gap: .125rem; } .site-footer__links a { display: inline-flex; min-height: 2.25rem; align-items: center; color: var(--on-bottle-muted); font-size: .96875rem; line-height: 1.35; } .site-footer__legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 2rem; margin-top: clamp(3rem, 6vw, 4.5rem); padding-top: 1.5rem; border-top: 1px solid var(--line-on-bottle); } .site-footer__legal-list { list-style: none; display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; } .site-footer__legal-list a { display: inline-flex; min-height: 2.25rem; align-items: center; font-size: .875rem; color: var(--on-bottle-muted); } .site-footer__company { font-size: .8125rem; color: var(--on-bottle-muted); } /* Pasek stopki i podpis lightByte - reguły 1:1 ze Szkoły Statystyków (statystyk-map §1), kolory przemapowane na butelkową stopkę. Jedyne odstępstwo: tekst podpisu spełnia WCAG AA (≈5,2:1). */ .footer__bar { margin-top: 1.5rem; padding-top: 22px; border-top: 1px solid var(--line-on-bottle); display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; font-size: .85rem; color: rgba(244, 247, 242, .72); } .lb-credit { display: inline-flex; align-items: center; gap: 9px; color: rgba(244, 247, 242, .6); } .lb-credit > span:first-child { opacity: 1; } .lb-credit__logo { display: inline-flex; color: rgba(244, 247, 242, .45); transition: color .2s var(--ease-out); } .lb-credit__logo svg { height: 15px; width: auto; } .lb-credit:hover .lb-credit__logo, .lb-credit:focus-visible .lb-credit__logo { color: var(--on-bottle); } @media (max-width: 760px) { .footer__bar { flex-direction: column; align-items: center; text-align: center; } .footer__bar p { text-wrap: balance; } .site-footer__legal { flex-direction: column; align-items: flex-start; } } /* ---------- 12. Nagłówek strony wewnętrznej i okruszki ---------- */ .page-intro { padding-top: clamp(2rem, 1rem + 4vw, 4.5rem); padding-bottom: clamp(3rem, 2rem + 4vw, 6rem); } .page-intro__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; } .page-intro__text { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; justify-items: start; } /* Okruszki u góry nagłówka strony, na całą szerokość - nie zjeżdżają w dół razem z wysokim zdjęciem. */ .page-intro__crumbs { margin-bottom: clamp(1.25rem, 3vw, 2rem); } /* Miary w em, nie w ch: „ch" to szerokość cyfry 0 w foncie, który akurat rysuje tekst - przy podmianie fontu kolumna zmieniała szerokość i wiersze przełamywały się od nowa (CLS). 17ch Bodoni (opsz 28) = 10,72em, 34/60/70/40ch Alberta (0 = 0,629em) = 21,4/37,75/44/25,15em. */ .page-intro__title { font-size: var(--fs-h1); line-height: 1.08; letter-spacing: -.01em; max-width: 12em; } .page-intro__lead { font-size: var(--fs-lede); line-height: 1.6; color: var(--ink-2); max-width: 36em; text-wrap: pretty; } .page-intro__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin-top: .5rem; } @media (min-width: 1024px) { .page-intro--media .page-intro__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .page-intro--media .page-intro__media { max-width: 26rem; justify-self: end; width: 100%; } } @media (max-width: 1023px) { .page-intro__media { max-width: 22rem; } } .breadcrumbs__list { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 0; font-size: var(--fs-small); color: var(--muted); } .breadcrumbs__item { display: inline-flex; align-items: center; } .breadcrumbs__item + .breadcrumbs__item::before { content: "/"; margin: 0 .6rem; color: var(--muted); opacity: .6; } .breadcrumbs__link { color: var(--muted); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: .3em; transition: color var(--t-fast) var(--ease-out), text-decoration-color var(--t-fast) var(--ease-out); } .breadcrumbs__current { color: var(--ink-2); font-weight: 500; } /* ---------- 13. Podnawigacja działu („karta menu") ---------- */ .subnav__title { font-family: var(--font-text); font-weight: 600; font-size: 1.0625rem; line-height: 1.3; letter-spacing: 0; color: var(--ink); padding: 0 .75rem .875rem; margin-bottom: .5rem; border-bottom: 1px solid var(--line); } .subnav__list, .subnav__sublist { list-style: none; } .subnav__link { position: relative; display: flex; align-items: center; min-height: 2.5rem; padding: .45rem .75rem; border-radius: var(--r-sm); font-size: .9375rem; font-weight: 500; line-height: 1.35; color: var(--ink-2); transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out); } .subnav__link::before { content: none; } .subnav__link.is-current { color: var(--brand); font-weight: 600; background: var(--glaze); } .subnav__link.is-current::before { transform: scale(1); } .subnav__group { margin: .5rem 0; } .subnav__group-label { display: block; padding: .75rem .75rem .25rem; font-family: var(--font-text); font-style: normal; font-size: .875rem; font-weight: 500; color: var(--muted); } .subnav__sublist { padding-left: .5rem; border-left: 1px solid var(--line); margin-left: .9rem; } .subnav__cta { display: grid; gap: .25rem; margin-top: 1rem; padding: 1rem .75rem .25rem; border-top: 1px solid var(--line); } .subnav__phone { font-size: .9375rem; color: var(--ink-2); min-height: 2.5rem; } @media (min-width: 1024px) { .subnav__card { padding: 0; background: none; border: 0; } .subnav__core { padding: 0; background: none; border: 0; } } @media (max-width: 1023px) { .subnav { margin-inline: calc(var(--gutter) * -1); } .subnav__title, .subnav__cta { display: none; } .subnav__list { display: flex; align-items: center; gap: .5rem; overflow-x: auto; overscroll-behavior-x: contain; padding: .25rem var(--gutter) .75rem; scroll-padding-inline: var(--gutter); scrollbar-width: none; /* Przewijany pasek: krawędzie gasną na szerokości marginesu (jak marquee opinii), więc ucięta pigułka czyta się jako „jest dalej”, a nie jako błąd. W spoczynku pierwsza i ostatnia pigułka leżą poza strefą wygaszenia. */ -webkit-mask-image: linear-gradient(90deg, transparent 0, var(--mask) var(--gutter), var(--mask) calc(100% - var(--gutter)), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, var(--mask) var(--gutter), var(--mask) calc(100% - var(--gutter)), transparent 100%); } .subnav__list::-webkit-scrollbar { display: none; } .subnav__item, .subnav__group { flex: none; } .subnav__group { display: flex; align-items: center; gap: .5rem; margin: 0; } .subnav__sublist { display: flex; gap: .5rem; padding: 0; margin: 0; border: 0; } .subnav__group-label { padding: 0 .25rem 0 .5rem; white-space: nowrap; } .subnav__link { white-space: nowrap; min-height: 2.5rem; padding: 0 1rem; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--porcelain); } .subnav__link.is-current { background: var(--brand); border-color: var(--brand); color: var(--porcelain); } } /* ---------- 14. Pas rezerwacji ---------- */ /* §19: jasne wezwanie - nagłówek, tekst, główny przycisk; od treści oddziela je hairline, nie zielone pole. */ .cta-band { position: relative; background: transparent; padding-block: calc(var(--sec-y) * .8); } .cta-band__plate { position: relative; padding: 0; border-radius: 0; background: none; box-shadow: none; } .cta-band__plate::before, .cta-band__plate::after { content: none; } .cta-band__inner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; align-items: end; padding: clamp(2.5rem, 2rem + 2vw, 4rem) 0 0; border-top: 1px solid var(--line); } @media (min-width: 900px) { .cta-band__inner { grid-template-columns: minmax(0, 1fr) auto; } } .cta-band__text { display: grid; gap: 1rem; max-width: 40rem; } .cta-band__title { font-size: var(--fs-h2); line-height: 1.14; letter-spacing: -.01em; font-weight: 500; } .cta-band__lead { color: var(--muted); font-size: var(--fs-lede); line-height: 1.6; max-width: 34em; text-wrap: pretty; } .cta-band__actions { display: grid; justify-items: start; gap: 1rem; } .cta-band__phone { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; color: var(--muted); font-size: .9375rem; } .cta-band__tel { font-family: var(--font-text); font-size: 1.125rem; font-weight: 600; color: var(--ink); } /* ---------- 15. Zdjęcia i karty (§19: zwykłe prostokąty r16, bez rantów, owali, podpisów i złotej linii) ---------- */ .rim { padding: 0; border-radius: var(--r); background: none; border: 0; } .rim__core { position: relative; border-radius: var(--r); background: transparent; border: 0; overflow: hidden; } .rim--media .rim__core { aspect-ratio: var(--ratio, auto); } .rim__img, .rim--media .rim__core > img { width: 100%; height: 100%; object-fit: cover; } .rim__caption { padding: .75rem 0 0; font-size: var(--fs-small); color: var(--muted); } .on-bottle .rim--pad { background: rgba(244, 247, 242, .06); border-color: var(--line-on-bottle); } .rim--media .rim__core { background: var(--glaze); } .rim--pad, .card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); } .rim--pad .rim__core { padding: clamp(1.5rem, 3vw, 2.5rem); overflow: visible; } .card { padding: clamp(1.5rem, 3vw, 2.5rem); } .card--glaze { background: var(--glaze); border-color: transparent; } .plate-oval { position: relative; margin: 0; aspect-ratio: 4 / 5; width: 100%; isolation: isolate; } .plate-oval__well { position: absolute; inset: 0; border-radius: var(--r); padding: 0; overflow: hidden; background: var(--glaze); border: 0; box-shadow: none; } .plate-oval__img { width: 100%; height: 100%; border-radius: 0; object-fit: cover; } /* Kroki (ścieżka pacjenta, rezerwacja, wywiad): małe cyfry Albert Sans i hairline między krokami. */ .steps { list-style: none; display: grid; border-top: 1px solid var(--line-ctx); counter-reset: none; } .steps__item { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 1rem; padding: 1.25rem 0; border-bottom: 1px solid var(--line-ctx); } .steps__num { font-size: .875rem; font-weight: 600; line-height: 1.6; color: var(--fg-muted); } /* ---------- 16. Winietki (wolne terminy): cichy rząd hairline, jeden wygląd w całym serwisie ---------- Mobile: wiersze jeden pod drugim (dzień i data z lewej, typ wizyty z prawej, strzałka →). Od 640px: trzy komórki obok siebie z pionowymi liniami hairline. */ .placecards { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--line-strong); } .placecards__item { display: flex; min-width: 0; border-bottom: 1px solid var(--line); } .placecard { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; row-gap: .125rem; align-items: center; flex: 1 1 auto; width: 100%; min-height: 0; padding: .875rem 1.75rem .875rem 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--ink); text-decoration: none; transition: background-color var(--t-ui) var(--ease-out); } .placecard::after { content: "\2192"; position: absolute; right: 0; top: 50%; translate: 0 -50%; pointer-events: none; font-size: 1rem; line-height: 1; color: var(--muted); transition: color var(--t-ui) var(--ease-out), transform var(--t-ui) var(--ease-out); } .placecard__name { grid-column: 1; font-family: var(--font-text); font-size: .875rem; font-weight: 400; line-height: 1.35; color: var(--muted); text-wrap: balance; } .placecard__name::first-letter { text-transform: uppercase; } .placecard__when { grid-column: 1; display: inline-flex; align-items: baseline; gap: .5rem; font-size: 1.0625rem; font-weight: 600; color: var(--ink); transition: color var(--t-ui) var(--ease-out); } .placecard__sep { align-self: center; width: 3px; height: 3px; border-radius: 50%; background: var(--muted); opacity: .6; } .placecard__time { font-size: 1.0625rem; } .placecard__type { grid-column: 2; grid-row: 1 / span 2; margin: 0; font-size: var(--fs-small); color: var(--muted); text-align: right; } @media (min-width: 640px) { .placecards { grid-template-columns: repeat(3, minmax(0, 1fr)); } .placecards__item:not(:nth-child(3n+1)) { border-left: 1px solid var(--line); } .placecard { grid-template-columns: minmax(0, 1fr); align-items: start; padding: 1rem 1.75rem 1.125rem 1.25rem; } .placecards__item:nth-child(3n+1) .placecard { padding-left: 0; } .placecard__type { grid-column: 1; grid-row: auto; text-align: left; } .placecard::after { top: 1.125rem; right: 1.25rem; translate: none; } } /* ---------- 17. Cennik: wiersze (nazwa z lewej, cena z prawej, hairline między wierszami) ---------- */ .menu-list { color: var(--fg); } .menu-list__title { font-family: var(--font-text); font-weight: 600; font-style: normal; font-size: var(--fs-h3); line-height: 1.3; margin-bottom: 1rem; color: var(--fg); } .menu-list__items { list-style: none; border-top: 1px solid var(--line-ctx); } .menu-list__item { padding: 1.125rem 0 1.25rem; border-bottom: 1px solid var(--line-ctx); } .menu-list__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; } .menu-list__name { font-size: 1.0625rem; font-weight: 600; line-height: 1.35; color: var(--fg); min-width: 0; text-wrap: pretty; } .menu-list__meta { font-size: var(--fs-small); color: var(--fg-muted); white-space: nowrap; } .menu-list__price { margin-left: auto; font-family: var(--font-text); font-size: 1.0625rem; font-weight: 600; line-height: 1.35; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; } .menu-list__desc { margin-top: .4rem; font-size: .96875rem; line-height: 1.55; color: var(--fg-muted); max-width: 37.75em; text-wrap: pretty; } .menu-list__note { margin-top: .35rem; font-size: var(--fs-xs); color: var(--fg-muted); } .menu-list__action { margin-top: .6rem; } .menu-list--bottle { background: none; border-radius: 0; padding: 0; } /* §19: bez zielonej karty menu */ /* ---------- 18. FAQ ---------- */ .faq { border-top: 1px solid var(--line-ctx); } .faq__item { border-bottom: 1px solid var(--line-ctx); } .faq__q { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; padding: 1.25rem 0; cursor: pointer; list-style: none; font-size: 1.0625rem; font-weight: 600; line-height: 1.4; color: var(--fg); } .faq__q::-webkit-details-marker { display: none; } .faq__q::marker { content: ""; } .faq__q-text { text-wrap: pretty; } .faq__icon { display: inline-grid; place-items: center; flex: none; width: 2rem; height: 2rem; border-radius: 50%; border: 0; color: var(--ink-2); transition: transform var(--t-ui) var(--ease-out); } .faq__icon .icon { width: 1rem; height: 1rem; } .faq__item[open] .faq__icon { transform: rotate(45deg); } .faq__a { padding: 0 3.5rem 1.5rem 0; color: var(--fg-2); } .faq__item[open] .faq__a { animation: pj-faq-in var(--t-ui) var(--ease-out); } @keyframes pj-faq-in { from { opacity: 0; transform: translateY(-6px); } } /* ---------- 19. Proza (długie teksty przeniesione ze starej strony) ---------- */ .prose { color: var(--fg-2); max-width: 44em; font-size: var(--fs-body); line-height: 1.7; } .prose > * + * { margin-top: 1.1em; } .prose p, .prose li { text-wrap: pretty; } .prose h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.18; letter-spacing: -.01em; color: var(--fg); margin-top: 2.2em; } .prose h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.3; color: var(--fg); margin-top: 1.9em; } .prose h4 { font-size: 1.0625rem; font-weight: 600; color: var(--fg); margin-top: 1.6em; } .prose h2 + *, .prose h3 + *, .prose h4 + * { margin-top: .6em; } .prose > :first-child { margin-top: 0; } .prose strong, .prose b { font-weight: 600; color: var(--fg); } .prose a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; text-decoration-color: currentColor; font-weight: 500; transition: color var(--t-fast) var(--ease-out); } .prose ul, .prose ol { padding-left: 1.4em; } .prose li + li { margin-top: .45em; } .prose li::marker { color: var(--accent); } .prose ul > li { list-style: none; position: relative; } .prose ul > li::before { content: ""; position: absolute; left: -1.05em; top: .72em; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); } .prose ol { list-style: decimal; } .prose ol > li { padding-left: .25em; } .prose ol > li::marker { font-variant-numeric: tabular-nums; font-weight: 600; } /* Quill 2: listy jako
  1. */ .prose ol > li[data-list="bullet"] { list-style: none; position: relative; } .prose ol > li[data-list="bullet"]::before { content: ""; position: absolute; left: -1.05em; top: .72em; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); } .prose .ql-align-center { text-align: center; } .prose .ql-align-right { text-align: right; } .prose .ql-indent-1 { padding-left: 2em; } .prose .ql-indent-2 { padding-left: 4em; } .prose blockquote { margin: 1.8em 0; padding: .25em 0 .25em 1.4em; border-left: 1px solid var(--line-strong); font-family: var(--font-text); font-style: normal; font-size: var(--fs-lede); line-height: 1.6; color: var(--fg); } .prose blockquote p + p { margin-top: .6em; } .prose hr { border: 0; height: 1px; background: var(--line-ctx); margin: 2.5em 0; } .prose img { border-radius: var(--r); border: 1px solid var(--line); height: auto; } .prose figure img, .prose > p > img { max-height: 36rem; width: auto; } .prose figure { margin: 2em 0; } .prose figcaption { margin-top: .6em; font-size: var(--fs-small); color: var(--fg-muted); } .prose code { font-size: .9em; background: var(--glaze); padding: .1em .35em; border-radius: var(--r-xs); } .table-scroll { overflow-x: auto; margin: 1.75em 0; border: 1px solid var(--line); border-radius: var(--r); background: var(--white); -webkit-overflow-scrolling: touch; } .prose table { width: 100%; min-width: 30rem; font-size: .9375rem; line-height: 1.45; font-variant-numeric: tabular-nums lining-nums; } .prose th, .prose td { padding: .8rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); } .prose thead th, .prose tr:first-child th { background: var(--glaze); color: var(--fg); font-weight: 600; } .prose tr:last-child td { border-bottom: 0; } .prose > .table-scroll:first-child { margin-top: 0; } /* ---------- 20. Formularze ---------- */ .field { display: grid; gap: .45rem; } .field__label { display: flex; align-items: baseline; gap: .35rem; font-size: .9375rem; font-weight: 500; color: var(--fg); } .field__req { color: var(--danger); font-weight: 600; } .field__opt { font-weight: 400; font-size: var(--fs-xs); color: var(--fg-muted); } .field__input { width: 100%; min-height: 3rem; padding: .75rem 1rem; border-radius: var(--r); border: 1px solid var(--line-control); background: var(--white); color: var(--ink); font-size: 1rem; line-height: 1.4; transition: border-color var(--t-fast) var(--ease-out); appearance: none; } textarea.field__input { min-height: 8rem; resize: vertical; line-height: 1.55; } .field__input:focus { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); outline: none; } .field__input:focus-visible { outline: 2px solid var(--gilt-ink); outline-offset: 2px; } .field.is-invalid .field__input, .field__input[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger); } /* Błędne pole z fokusem (pierwsze błędne dostaje fokus po wysłaniu): jeden czerwony pierścień zamiast złotego obrysu wokół czerwonej ramki, które razem dawały brudny brązowo-czerwony podwójny kontur. */ .field.is-invalid .field__input:focus-visible, .field__input[aria-invalid="true"]:focus-visible { outline-color: var(--danger); box-shadow: none; } .field.is-disabled .field__input, .field__input:disabled { background: var(--glaze); color: var(--muted); cursor: not-allowed; } .field__control { position: relative; } .field__control--select select { padding-right: 2.75rem; cursor: pointer; } .field__caret { position: absolute; right: 1rem; top: 50%; width: 1rem; height: 1rem; margin-top: -.5rem; color: var(--muted); pointer-events: none; } .field__help { font-size: var(--fs-small); color: var(--fg-muted); line-height: 1.5; } .field__error { display: flex; align-items: flex-start; gap: .4rem; font-size: var(--fs-small); color: var(--danger); font-weight: 500; line-height: 1.45; } .field__error .icon { width: 1.05rem; height: 1.05rem; margin-top: .1em; } .field__count { justify-self: end; font-size: var(--fs-xs); color: var(--fg-muted); margin-top: -.25rem; } .form-grid { display: grid; gap: 1.25rem; } @media (min-width: 640px) { .form-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .form-grid .span-2 { grid-column: 1 / -1; } } .form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: .5rem; } .check { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .75rem; row-gap: .35rem; align-items: start; } .check__input { appearance: none; -webkit-appearance: none; margin: .1rem 0 0; position: relative; width: 1.375rem; height: 1.375rem; border-radius: var(--r-xs); border: 1.5px solid var(--line-control); background: var(--white); cursor: pointer; flex: none; transition: background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out); } .check__input::after { content: ""; position: absolute; left: 50%; top: 45%; width: .375rem; height: .7rem; margin: -.35rem 0 0 -.1875rem; border: solid var(--porcelain); border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform var(--t-fast) var(--ease-out); } .check__input:checked { background: var(--brand); border-color: var(--brand); } .check__input:checked::after { transform: rotate(45deg) scale(1); } .check--radio .check__input { border-radius: 50%; } .check--radio .check__input::after { left: 50%; top: 50%; width: .5rem; height: .5rem; margin: -.25rem 0 0 -.25rem; border: 0; border-radius: 50%; background: var(--porcelain); transform: scale(0); } .check--radio .check__input:checked::after { transform: scale(1); } .check__input:disabled { opacity: .5; cursor: not-allowed; } .check.is-invalid .check__input, .check__input[aria-invalid="true"] { border-color: var(--danger); } .check.is-invalid .check__input:focus-visible, .check__input[aria-invalid="true"]:focus-visible { outline-color: var(--danger); } .check__label { font-size: .96875rem; line-height: 1.55; color: var(--fg-2); cursor: pointer; text-wrap: pretty; } .check__label a { color: var(--accent); text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; } .check .field__help, .check .field__error { grid-column: 2; } /* Pełne brzmienie zgody pod krótką etykietą (consent_more_html): natywne
    poza