/* Basterek — style komponentów (uzupełnienie theme.json) */ :root { --bst-primary: #D64545; --bst-primary-strong: #BE3A3A; --bst-primary-hover: #9E2E2E; --bst-cream: #EEDCC8; --bst-cream-soft: #F6ECE0; --bst-accent: #6B8F5E; --bst-bg: #F7F7F5; --bst-surface: #FFFFFF; --bst-text: #2F2F2F; --bst-muted: #6B6660; --bst-muted-on-cream: #5C5750; /* 4.5:1 na #EEDCC8 */ --bst-primary-on-cream: #A32017; /* 5.1:1 na #EEDCC8 */ --bst-border: #E6E3DD; --bst-success: #4E6E43; --bst-success-soft: #EDF2E8; --bst-error: #A32017; --bst-error-soft: #FBEDEC; --bst-warning: #8A6200; --bst-warning-soft: #FBF2DF; --bst-info: #2C5E86; --bst-info-soft: #E9F1F7; --bst-r-card: 12px; --bst-r-control: 8px; --bst-r-badge: 4px; --bst-r-pill: 999px; --bst-shadow-card: 0 1px 2px rgba(47,47,47,.05); --bst-shadow-float: 0 10px 28px rgba(47,47,47,.16); --bst-font-heading: 'Playfair Display', Georgia, serif; --bst-font-body: Inter, system-ui, sans-serif; --bst-font-hand: Caveat, cursive; /* Nagłówek i hero — paleta „prosto z pola" (jaśniejsze tło, głęboka zieleń, cegła). */ --bst-deep: #1F4938; /* zieleń marki: logo, nagłówki, obrys przycisku */ --bst-deep-ink: #18382D; --bst-leaf: #52734F; /* zielony podpis nad tytułem, 4.9:1 na #F8F6F0 */ --bst-brick: #D94A43; /* czerwień akcentu */ --bst-brick-dark: #B93838; --bst-sand: #F8F6F0; /* tło hero */ --bst-line: #E5E1D8; --bst-ink: #202A27; --bst-ink-soft: #5C625E; /* 5.5:1 na #F8F6F0 */ --bst-r-hero: 18px; } html { scroll-behavior: smooth; } body { -webkit-font-smoothing: antialiased; text-wrap: pretty; } img { height: auto; max-width: 100%; } :focus-visible { outline: 2px solid var(--bst-primary); outline-offset: 2px; border-radius: 2px; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); } /* ---------- Nagłówek ---------- Układ: logo | nawigacja | konto | koszyk. Pasek jest celowo niski (72 px) — po usunięciu wyszukiwarki nic nie wymusza wysokiego rzędu, więc treść strony zaczyna się wyżej. Na tablecie znika podpis „Moje konto”, poniżej 961 px nawigacja zwija się w hamburger (blok wp:navigation, progi w rwd.css). Nagłówek pływa: sam
jest przezroczysty i daje tylko margines, a paskiem jest __inner — zaokrąglona karta z rozmytym tłem, która unosi się nad treścią. Wysokość zostaje stała przy przewijaniu:
stoi w normalnym przepływie, więc zmiana jego wysokości podrzucałaby treść pod nim. Zmienia się tylko cień i krycie tła (klasa is-scrolled z theme.js). --------------------------------------------------------------------------- */ /* Sticky musi siąść na
od template-part, nie na .bst-header w środku: element przyklejony wędruje tylko w obrębie rodzica, a rodzicem .bst-header jest opakowanie równe mu wysokością — pasek odjeżdżał więc z treścią mimo position: sticky. */ .wp-site-blocks > header.wp-block-template-part { position: sticky; top: 0; z-index: 50; } .bst-header { position: relative; background: none; border-bottom: 0; padding-block: 12px; } .bst-header .bst-header__inner { position: relative; min-height: 72px; gap: 18px; padding-inline: 20px; background: none; border: 1px solid var(--bst-line); border-radius: var(--bst-r-pill); box-shadow: 0 4px 18px rgba(32,42,39,.06); transition: box-shadow .25s ease; } .bst-header.is-scrolled .bst-header__inner { box-shadow: 0 10px 30px rgba(32,42,39,.13); } /* Tło i rozmycie siedzą na pseudo-elementach, nie na samych blokach. backdrop-filter na elemencie robi z niego blok zawierający dla position:fixed w środku — overlay menu (hamburger) przestawał być pełnoekranowy i zwijał się do wysokości paska. Pseudo-element nie ma potomków, więc nikomu niczego nie przestawia. */ .bst-header .bst-header__inner::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; background: rgba(255,255,255,.78); -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px); transition: background-color .25s ease; } .bst-header.is-scrolled .bst-header__inner::before { background: rgba(255,255,255,.92); } /* Nad i pod pigułką zostaje szczelina, przez którą przesuwa się treść — o to w pływającym pasku chodzi, ale ostry tekst w 12 px szparze robi bałagan. Po odjechaniu w dół cały pas dostaje delikatne rozmycie: przejeżdżająca treść zostaje miękką plamą koloru, a pasek nie traci przezroczystości. */ .bst-header::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .25s ease; -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); } .bst-header.is-scrolled::before { opacity: 1; } /* Bez backdrop-filter (starsze WebKity) półprzezroczyste tło odkrywałoby treść pod paskiem. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .bst-header .bst-header__inner::before, .bst-header.is-scrolled .bst-header__inner::before { background: var(--bst-surface); } } .bst-header__tools { display: flex; align-items: center; gap: 10px; flex: 0 1 auto; min-width: 0; } .bst-logo { display: inline-flex; align-items: center; gap: 10px; margin-right: 10px; text-decoration: none !important; color: var(--bst-deep-ink); flex: none; } .bst-logo__word { font: 700 26px/1 var(--bst-font-heading); letter-spacing: -.015em; color: var(--bst-deep-ink); } .bst-header .wp-block-navigation { --wp--style--block-gap: 2px; font-size: 15px; font-weight: 500; } /* Siedem pozycji musi zostać w jednej linii — inaczej „Kontakt” spada pod logo.
    menu leży cztery poziomy pod