/* ============================================================================= tokens.css — JEDYNE źródło kolorów, fontów i odstępów motywu. Rebranding = edycja wartości w :root poniżej (patrz assets/brand.md w projekcie). Żaden inny plik CSS nie może zawierać literalnych kolorów ani nazw fontów. ============================================================================= */ :root { /* ---- Kolory: tło i tekst ------------------------------------------------ */ --color-bg: #f2f1ee; /* jasnoszare tło strony (celowo nie biel) */ --color-surface: #fbfaf7; /* karty, pola formularzy, panele */ --color-text: #2b2a27; /* ciemny grafit */ --color-text-muted: #5f5a52; /* opisy, meta, podpisy — kontrast ≥ 5:1 także na papierze i kaflach (AA) */ --color-border: #dcd8d0; /* linie, obramowania */ /* ---- Kolory: marka (dopasowane do logo) --------------------------------- */ --color-brown: #623c21; /* ciemny brąz z logo ("MUND", wnętrze kartonu) — główne CTA */ --color-brown-dark: #4a2c17; /* hover ciemnego brązu */ --color-kraft: #b8834f; /* kraft z logo ("PAK", ścianki kartonu) — akcenty dekoracyjne */ --color-kraft-light: #c69664; /* jaśniejszy kraft (klapy kartonu) */ --color-accent: #7a5430; /* linki, nadtytuły, przyciski drugorzędne — kontrast AA na tle, papierze i kaflach */ --color-beige: #d9c7ae; /* beż — tła sekcji wyróżnionych */ --color-paper: #e9e2d6; /* jasny papier — naprzemienne tła sekcji */ /* ---- Kolory: role ------------------------------------------------------- */ --color-primary: var(--color-brown); --color-primary-hover: var(--color-brown-dark); --color-on-primary: #ffffff; --color-secondary: var(--color-accent); /* przyciski drugorzędne z białym tekstem: sam kraft (#b8834f) ma 3,3:1 — za mało na tekst */ --color-secondary-hover: var(--color-brown); --color-on-secondary: #ffffff; --color-link: var(--color-accent); --color-link-hover: var(--color-brown); --color-focus: var(--color-kraft); --color-header-bg: rgba(242, 241, 238, 0.94); --color-footer-bg: var(--color-paper); --color-footer-text: var(--color-text); --color-footer-bar-bg: var(--color-brown); --color-footer-bar-text: #f2ebe2; --color-success: #2f6b3a; /* „dostępny”, komunikaty sukcesu — kontrast AA na tle i papierze */ --color-error: #a8402f; /* ---- Fonty --------------------------------------------------------------- Rubik (nagłówki) + Source Sans 3 (tekst) — wybór z etapu 02 (assets/brand.md). Zmiana fontów = nowe pliki woff2 w assets/fonts/, @font-face w fonts.css i trzy wartości poniżej. */ --font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-heading: "Rubik", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-heading-stretch: 100%; /* dla fontów z osią szerokości (np. 112%) */ --font-weight-body: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-heading: 800; --line-height-body: 1.6; --line-height-heading: 1.15; --letter-spacing-heading: -0.01em; --letter-spacing-caps: 0.06em; /* ---- Skala typograficzna (płynna) --------------------------------------- */ --text-xs: 0.8125rem; --text-sm: 0.9375rem; --text-base: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem); --text-lg: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem); --text-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); --text-2xl: clamp(1.5rem, 1.25rem + 1vw, 2rem); --text-3xl: clamp(1.875rem, 1.4rem + 1.8vw, 2.75rem); --text-4xl: clamp(2.25rem, 1.5rem + 3vw, 3.75rem); /* ---- Odstępy -------------------------------------------------------------- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; --section-padding: clamp(var(--space-7), 6vw, var(--space-9)); /* ---- Layout -------------------------------------------------------------- */ --container-max: 1200px; --container-wide: 1400px; --container-narrow: 760px; --gutter: clamp(1rem, 3vw, 2rem); --header-height: 76px; /* stała — nagłówek nie zmienia wysokości przy scrollu (brak skoków treści) */ --logo-height: 44px; --logo-height-footer: 40px; --back-to-top-size: 44px; /* ---- Strona główna: hero i kafle ------------------------------------------- */ --hero-min-height: clamp(520px, 74vh, 720px); --hero-text-on-photo: #ffffff; /* tekst na zdjęciach (wariant photo) */ --hero-overlay: linear-gradient(90deg, rgba(43, 42, 39, 0.66) 0%, rgba(43, 42, 39, 0.42) 50%, rgba(43, 42, 39, 0.10) 100%); --hero-photo-fallback-1: linear-gradient(135deg, var(--color-kraft) 0%, var(--color-brown) 100%); /* placeholdery, gdy brak zdjęć */ --hero-photo-fallback-2: linear-gradient(135deg, var(--color-beige) 0%, var(--color-kraft) 100%); --hero-photo-fallback-3: linear-gradient(135deg, var(--color-brown-dark) 0%, var(--color-kraft) 100%); --hero-duration: 6s; /* czas slajdu (autoplay); JS czyta data-interval */ --scene-shadow: rgba(43, 42, 39, 0.10); /* cień pod obiektami w scenach SVG */ --tile-bg-1: var(--color-surface); /* kafle kategorii — trzy odcienie papieru */ --tile-bg-2: var(--color-paper); --tile-bg-3: color-mix(in srgb, var(--color-beige) 55%, var(--color-surface)); --motion-ease: cubic-bezier(0.2, 0.7, 0.2, 1); /* wejścia tekstu i kafli */ /* ---- Sklep (WooCommerce) ---------------------------------------------------- */ --product-media-bg: var(--color-paper); /* tło pola zdjęcia / placeholdera produktu */ --product-media-ratio: 4 / 3; /* proporcje pola zdjęcia na kartach listingu */ --product-placeholder: var(--color-kraft); /* kolor ikony-placeholdera (brak zdjęcia) */ --price-color: var(--color-brown); /* ceny na listingu i karcie produktu */ --badge-bg: var(--color-brown); /* plakietka „Promocja!” */ --badge-text: #ffffff; --star-color: var(--color-kraft); /* gwiazdki ocen (gdy opinie włączone) */ --header-cart-badge-bg: var(--color-kraft); /* licznik pozycji przy ikonie koszyka */ --header-cart-badge-text: #ffffff; --shop-summary-width: 420px; /* kolumna podsumowania: koszyk / zamówienie */ --account-nav-width: 260px; /* nawigacja „Moje konto” */ /* ---- Kontakt: dane firmy, formularz, mapa ------------------------------------ */ --contact-info-bg: var(--color-paper); /* karta z danymi firmy */ --contact-form-width: minmax(0, 7fr); /* proporcje kolumn: formularz | dane firmy */ --contact-info-width: minmax(280px, 5fr); --map-height: clamp(320px, 45vw, 460px); /* wysokość mapy (iframe Google) */ --map-placeholder-bg: var(--color-beige); /* tło pod mapą do czasu jej załadowania */ /* ---- Stopka: koperta z opisem strony + stempel --------------------------------- */ --envelope-width: 320px; /* szerokość koperty (proporcje 320:190) */ --envelope-font-size: clamp(0.9rem, 0.78rem + 0.45vw, 1.05rem); --postmark-color: color-mix(in srgb, var(--color-brown) 78%, transparent); /* „tusz” stempla */ /* ---- O firmie: liczby, oś czasu, pieczęć, pasek CTA ----------------------------- */ --badge-size: clamp(150px, 15vw, 200px); /* obracająca się pieczęć w hero O firmie */ --badge-spin-duration: 28s; --stat-value-size: var(--text-4xl); /* liczby w pasku „firma w liczbach” */ --stat-color: var(--color-brown); --timeline-line: var(--color-kraft); /* linia i kropki osi czasu */ --timeline-dot: var(--color-brown); --cta-band-bg: var(--color-brown); /* pasek zachęty na końcu O firmie */ --cta-band-text: #ffffff; --page-hero-bg: linear-gradient(135deg, var(--color-paper) 0%, var(--color-bg) 55%, var(--color-beige) 100%); /* nagłówki Kontakt / O firmie */ --toc-width: 260px; /* spis treści na długich stronach */ /* ---- Ruch: wejścia przy scrollu (IntersectionObserver w main.js) ------------- */ --reveal-distance: 22px; /* przesunięcie startowe */ --reveal-duration: 0.65s; --reveal-stagger: 70ms; /* opóźnienie między sąsiednimi kaflami */ /* ---- Kształt i efekty ----------------------------------------------------- */ --radius-sm: 4px; --radius: 8px; --radius-lg: 16px; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgba(43, 42, 39, 0.06), 0 1px 6px rgba(43, 42, 39, 0.05); --shadow: 0 4px 16px rgba(43, 42, 39, 0.08), 0 1px 3px rgba(43, 42, 39, 0.05); --shadow-header: 0 2px 12px rgba(43, 42, 39, 0.08); --transition: 180ms ease; }