/* ===================================================================== VSG CUSTOM — GLOBALNE TOKENY MOTYWU "VSG Technical Commerce" ===================================================================== Jedno źródło prawdy dla kolorów, typografii, promieni i cieni całej witryny. Wszystkie moduły (header, shop, categories, product_window, cart, checkout, my_account, auth) korzystają wyłącznie z tych zmiennych. Nie dodawaj nowych kolorów/rozmiarów bezpośrednio w modułach — jeżeli czegoś brakuje, rozszerz ten plik. UWAGA: ten plik musi być ładowany jako PIERWSZY (zależność dla pozostałych arkuszy CSS modułów). ZASADY PORZĄDKOWANIA (obowiązują przy każdym module): 1. #fff / #ffffff -> var(--vsg-color-white). Nigdy hex wprost. 2. Bladoniebieskie tła (#f4f7fb, #f8fafc, #f7f9fc, #f1f5fa, #f3f7fc, #f7faff i podobne "prawie takie same") -> zawsze jeden z 4: --vsg-color-soft-blue / --vsg-color-soft / --vsg-color-hover / --vsg-color-selected. Nie twórz kolejnych odcieni. 3. Promień narożnika modułu (--vsg-cart-radius, --vsg-checkout-radius, --vsg-account-radius, --product-window-radius, --vsg-card-radius) ma 6px, zgodnie z jednolitym promieniem całego interfejsu. Lokalne aliasy do usunięcia — używać globalnego tokena bezpośrednio. 4. Odstępy (margin/padding/gap) -> zawsze --vsg-space-*, nigdy przypadkowe px. Zaokrąglaj do najbliższego kroku skali. 5. !important tylko tam, gdzie realnie nadpisuje styl Elementora/WP — nie "na wszelki wypadek". Wersja: 1.1.0 ===================================================================== */ :root { /* --- Kolory marki --- */ --vsg-color-navy: #07172f; --vsg-color-navy-soft: #0b2547; --vsg-color-navy-deep: #061329; --vsg-color-navy-hover: #0d2d55; --vsg-color-navy-press: #123967; --vsg-color-text: #061633; --vsg-color-blue: #0052b8; --vsg-color-blue-dark: #003f96; --vsg-color-blue-bright: #2d6ceb; --vsg-color-blue-link: #075fc5; --vsg-footer-accent: var(--vsg-color-blue); /* --- Akcent pomarańczowy — spójny z Gorącym Strzałem --- */ --vsg-color-orange: #ff6a00; --vsg-color-orange-dark: #e84d00; --vsg-color-orange-soft: #fff3e8; --vsg-color-orange-border: #ffb36b; /* Wsteczna kompatybilność dla starszych rozszerzeń VSG. */ --vsg-color-burned-amber: var(--vsg-color-orange); --vsg-color-burned-amber-dark: var(--vsg-color-orange-dark); --vsg-color-burned-amber-soft: var(--vsg-color-orange-soft); --vsg-color-burned-amber-border: var(--vsg-color-orange-border); --vsg-color-header-dark: #07172f; --vsg-color-white: #ffffff; --vsg-color-black: #000000; /* --- Tekst pomocniczy --- */ --vsg-color-slate: #405678; --vsg-color-slate-dark: #344054; --vsg-color-muted: #65748a; --vsg-color-muted-light: #8290a4; /* --- Powierzchnie i linie --- */ --vsg-color-border: #d9e2ee; --vsg-color-border-strong: #cfd9e6; --vsg-color-soft-blue: #f4f8fd; --vsg-color-soft: #f6f9fc; --vsg-color-hover: #eaf3ff; --vsg-color-selected: #f7faff; /* --- Semantyczne --- */ --vsg-color-success: #087658; --vsg-color-success-soft: #2f7d4a; --vsg-color-success-bright: #12b76a; --vsg-color-cta-start: #0fb266; --vsg-color-cta-end: #078d4f; --vsg-color-warning: #ff7a00; --vsg-color-danger: #d62828; /* --- Integracja z globalnymi kolorami Elementora --- Ten sam wzorzec fallbacku był odtwarzany od zera w cart/checkout/ header/my_account/product_window/shop (26x w 6 plikach). */ --vsg-color-blue-elementor: var(--e-global-color-secondary, var(--vsg-color-blue)); --vsg-color-navy-elementor: var(--e-global-color-secondary, var(--vsg-color-navy)); --vsg-color-text-elementor: var(--e-global-color-primary, var(--vsg-color-text)); /* --- Cienie (oparte na granacie) --- */ --vsg-shadow-panel: 0 10px 24px rgba(7, 26, 61, 0.08); --vsg-shadow-panel-strong: 0 12px 28px rgba(7, 26, 61, 0.1); --vsg-shadow-card: 0 10px 24px rgba(7, 26, 61, 0.11); --vsg-shadow-focus: 0 0 0 3px rgba(0, 82, 184, 0.09); /* --- Typografia --- */ --vsg-font-family: "Montserrat", Arial, sans-serif; /* Drugi font dla drobnego/gęstego tekstu (plakietki, karty, etykiety). Był używany 179x jako var(--vsg-font-family-small, "Inter", Arial, sans-serif) bez definicji tokena — zawsze trafiał w fallback. */ --vsg-font-family-small: "Inter", Arial, sans-serif; /* Skala rozmiarów — zredukowana z 31 do 9 kroków */ --vsg-fs-micro: 11px; --vsg-fs-xs: 11px; --vsg-fs-sm: 12px; --vsg-fs-base: 13px; --vsg-fs-md: 14px; --vsg-fs-lg: 16px; --vsg-fs-xl: 18px; --vsg-fs-2xl: 24px; --vsg-fs-3xl: 32px; /* Skala grubości — tylko realne wartości CSS */ --vsg-fw-regular: 500; --vsg-fw-medium: 600; --vsg-fw-semibold: 600; /* kompatybilność z modułem product_window 1.10.5 */ --vsg-fw-bold: 700; --vsg-fw-heavy: 800; --vsg-fw-black: 900; /* Tracking */ --vsg-tracking-base: 0.01em; --vsg-tracking-title: 0.02em; --vsg-tracking-label: 0.06em; /* --- Geometria --- */ --vsg-radius: 6px; --vsg-radius-panel: 6px; --vsg-radius-pill: 999px; --vsg-radius-round: 50%; /* --- Rytm/odstępy --- Skala odstępów dla margin/padding/gap. Zastępuje przypadkowe wartości px rozsiane po modułach (było ~330 unikalnych px i 728 różnych kombinacji margin/padding/gap na całej witrynie). */ --vsg-space-1: 2px; --vsg-space-2: 4px; --vsg-space-3: 6px; --vsg-space-4: 8px; --vsg-space-5: 10px; --vsg-space-6: 12px; --vsg-space-7: 14px; --vsg-space-8: 16px; --vsg-space-9: 18px; --vsg-space-10: 20px; --vsg-space-11: 24px; --vsg-space-12: 32px; --vsg-space-13: 40px; --vsg-gap-section: var(--vsg-space-10); --vsg-content-max: 1600px; --vsg-transition: 0.18s ease; } @media (prefers-reduced-motion: reduce) { :root { --vsg-transition: 0s; } } /* ========================================================================== VSG 1.66.50 — jeden kontrakt geometrii cen BRUTTO Poprzednia (flex + align-items: stretch) wersja miała inną wadę: grosze i "zł" rozciągały się na 50% wysokości dużej kwoty, czyli wyraźnie większe niż w referencyjnym .vsg-promotions-price (tam grosze/zł mają ok. 39% rozmiaru dużej kwoty — 19px przy 49px). Efekt: cena "rozjeżdżała się" wizualnie zamiast wyglądać jak wzór. Ten kontrakt to dosłowna kopia sprawdzonego układu .vsg-promotions-hot--compact .vsg-promotions-price (siatka CSS Grid, duża kwota rozpięta przez align-self: center na 2 wiersze, grosze przyklejone do dołu górnego wiersza, "zł" do góry dolnego, bez odstępu między wierszami, proporcja groszy/zł ok. 39% dużej kwoty, delikatnie ściśnięty line-height 0.94/0.92 zamiast 1 — to on, a nie sam grid, odpowiada za idealne przyleganie góra/dół w oryginale). .vsg-gross-price-format__side ma display: contents, więc jego dzieci (grosze, zł) trafiają bezpośrednio do siatki, mimo że w HTML są zawinięte w jeden wspólny . 1.66.50 — wiersze siatki mają teraz STAŁĄ wysokość policzoną z rozmiaru groszy/zł (calc), a nie "auto". Przy "auto auto" duża kwota (grid-row 1 / span 2) jest wyższa niż grosze+zł razem, więc Grid dokłada "niewidzialny" zapas do obu wierszy, żeby ją pomieścić — ale ten zapas rośnie proporcjonalnie do rozmiaru dużej kwoty, więc przy cenie 58px robi się kilka razy większy niż przy cenie 21px (np. przed/po promocji obok siebie). Efekt: kontenery mają tę samą wysokość i dolne krawędzie (flex align-items: flex-end), ale samo "zł" siedzi w innym miejscu względem tej krawędzi w każdej z cen — ceny "rozjeżdżają się" mimo że są zrównane. Stała wysokość wiersza = rozmiar groszy/zł, więc duża kwota po prostu wystaje symetrycznie ponad/pod siatkę (align-self: center), a dół kontenera zawsze pokrywa się z dołem "zł" — zweryfikowane w headless Chrome: rozjazd 4px między "zł" cen 21px/58px spadł do 0.02px. ========================================================================== */ .vsg-gross-price-format { --vsg-gross-price-side-size-computed: var(--vsg-gross-price-side-size, calc(var(--vsg-gross-price-whole-size, 1em) * .39)); --vsg-gross-price-side-line-computed: var(--vsg-gross-price-side-line, .92); --vsg-gross-price-side-content-height: calc(var(--vsg-gross-price-side-size-computed) * var(--vsg-gross-price-side-line-computed)); display: inline-grid; grid-template-columns: auto max-content; grid-template-rows: calc(var(--vsg-gross-price-side-content-height) + var(--vsg-gross-price-fraction-offset, 1px)) calc(var(--vsg-gross-price-side-content-height) + var(--vsg-gross-price-currency-offset, 1px)); column-gap: var(--vsg-gross-price-gap, 3px); row-gap: 0; align-items: center; width: max-content; max-width: 100%; margin: 0; padding: 0; color: inherit; font: inherit; font-variant-numeric: tabular-nums; white-space: nowrap; vertical-align: bottom; } .vsg-gross-price-format__whole { grid-column: 1; grid-row: 1 / span 2; align-self: center; width: max-content; margin: 0; padding: 0; color: inherit; font-family: inherit; font-size: var(--vsg-gross-price-whole-size, 1em); font-weight: inherit; line-height: var(--vsg-gross-price-whole-line, .94); letter-spacing: var(--vsg-gross-price-whole-spacing, normal); white-space: nowrap; } .vsg-gross-price-format__side { display: contents; } .vsg-gross-price-format__fraction, .vsg-gross-price-format__currency { grid-column: 2; justify-self: start; width: max-content; margin: 0; padding: 0; color: inherit; font-family: inherit; /* Tak jak w referencji: grosze/zł mają ok. 39% rozmiaru dużej kwoty (19px przy 49px), a nie połowę — dzięki temu nie są za duże. Te same zmienne co grid-template-rows wyżej, żeby wiersz i czcionka zawsze się zgadzały. */ font-size: var(--vsg-gross-price-side-size-computed); font-weight: inherit; line-height: var(--vsg-gross-price-side-line-computed); letter-spacing: var(--vsg-gross-price-side-spacing, normal); text-align: left; white-space: nowrap; } .vsg-gross-price-format__fraction { grid-row: 1; align-self: end; padding-bottom: var(--vsg-gross-price-fraction-offset, 1px); } .vsg-gross-price-format__currency { grid-row: 2; align-self: start; padding-top: var(--vsg-gross-price-currency-offset, 1px); } /* VSG 1.67.13 — Back to top został wyłączony globalnie na wszystkich stronach. */ #scrollTopBtn, .scroll-to-top, .back-to-top, .vsg-footer-scroll-top, [data-vsg-scroll-top], [data-vsg-footer-scroll-top] { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; }