/* ============================================================================= EBAN Chemicals — tokeny marki Design language: „Clean Water in a White Gallery" (DESIGN.md v0.1) Plik jest ładowany na KAŻDEJ stronie (inc/assets.php, wp_enqueue_scripts prio domyślne — czyli po arkuszu rodzica z wp_head prio 1, więc :root childa wygrywa). Nie przechodzi przez build: to czysty CSS, żeby zmiana koloru nie wymagała `npm run build`. Trzy warstwy, w tej kolejności: 1. @font-face — kroje marki (self-host, RODO). 2. :root --eb-* — źródło prawdy designu, cytat z eban-tokens.css. 3. :root --color-* / --radius-* — MAPOWANIE na tokeny rodzica (shopkit-theme global/theme.css), żeby szablony, których nie piszemy sami (koszyk, checkout, konto, drawery), od razu wpadły w skórę EBAN. Jeden design language obowiązuje CAŁY serwis, także landing B2B — landing dostaje tę samą paletę i typografię (jego lp.css cytuje te tokeny zamiast trzymać własne wartości). Reguły systemu — patrz DESIGN.md §2.2: --eb-deep to płaszczyzna (nigdy tło przycisku), jeden akcent na widok, zero cieni, hairline zamiast ramek. ========================================================================== */ /* ── 1. Kroje ───────────────────────────────────────────────────────────── Inter i JetBrains Mono to fonty ZMIENNE — Google serwuje jeden plik na subset dla całego zakresu wag, stąd `font-weight: 100 900` zamiast siedmiu osobnych @font-face. */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('resources/fonts/inter-var.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: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('resources/fonts/inter-var-ext.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: 'JetBrains Mono'; font-style: normal; font-weight: 100 800; font-display: swap; src: url('resources/fonts/jetbrains-mono-var.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: 'JetBrains Mono'; font-style: normal; font-weight: 100 800; font-display: swap; src: url('resources/fonts/jetbrains-mono-var-ext.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; } /* ── 2. Źródło prawdy: tokeny EBAN ───────────────────────────────────────── */ :root { /* Powierzchnie */ --eb-canvas: #ffffff; /* ściana galerii — domyślne tło strony i produktu */ --eb-surface: #f5f8fa; /* chłodna mgła — pasy naprzemienne, blog */ --eb-surface-sunk: #eaf0f5; /* wypełnienie pól, zebra w tabelach */ /* Linie — jedyny separator w systemie */ --eb-line: #e3e8ee; --eb-line-strong: #c9d3de; /* na tłach tintowanych, ramki inputów */ /* Tekst */ --eb-ink: #0d1b2a; /* czerń z granatem — NIGDY #000 */ --eb-ink-muted: #5b6b7c; /* metadane, ceny na listingu, placeholdery */ --eb-ink-disabled: #8497a8; /* wyłącznie stan disabled (3,01:1) */ /* Marka */ --eb-deep: #061a5c; /* WODA — tylko płaszczyzny pełnej szerokości */ --eb-accent: #0b4fd8; /* jedyny kolor akcji */ --eb-accent-hover: #0940b0; --eb-aqua: #37c2d9; /* dekoracja i dane; nigdy tekst na białym */ --eb-aqua-soft: #d8f1f6; /* Semantyka bezpieczeństwa chemicznego */ --eb-danger: #c0392b; /* CLP/GHS żrące i toksyczne, błędy */ --eb-warn: #a35f00; /* CLP/GHS utleniacz, niski stan */ --eb-success: #12704a; /* w magazynie, zamówienie przyjęte */ /* Kroje */ --eb-font-sans: 'Inter', 'Söhne', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --eb-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace; /* Skala typograficzna — trackling odwrotny: ciaśniej im większy stopień */ --eb-display-size: 64px; --eb-display-lh: 1.05; --eb-display-ls: -0.03em; --eb-h1-size: 48px; --eb-h1-lh: 1.08; --eb-h1-ls: -0.028em; --eb-h2-size: 32px; --eb-h2-lh: 1.15; --eb-h2-ls: -0.022em; --eb-h3-size: 24px; --eb-h3-lh: 1.25; --eb-h3-ls: -0.015em; --eb-h4-size: 20px; --eb-h4-lh: 1.30; --eb-h4-ls: -0.010em; --eb-body-size: 16px; --eb-body-lh: 1.60; --eb-body-ls: 0; --eb-body-sm-size: 14px; --eb-body-sm-lh: 1.55; --eb-body-sm-ls: 0; --eb-caption-size: 12px; --eb-caption-lh: 1.40; --eb-caption-ls: 0.01em; --eb-label-size: 11px; --eb-label-lh: 1.00; --eb-label-ls: 0.14em; --eb-data-size: 14px; --eb-data-lh: 1.40; --eb-data-ls: 0.01em; --eb-data-lg-size: 20px; --eb-data-lg-lh: 1.20; --eb-data-lg-ls: 0; /* Layout */ --eb-max: 1440px; --eb-max-content: 1180px; --eb-max-prose: 72ch; --eb-gutter: 24px; --eb-section: 80px; --eb-grid-gap: 24px; --eb-nav-h: 64px; --eb-control-h: 44px; /* minimalny cel dotykowy */ /* Kształt */ --eb-radius-none: 0; --eb-radius-sm: 4px; --eb-radius-md: 8px; --eb-radius-pill: 999px; /* Ruch */ --eb-dur-fast: 150ms; --eb-dur-base: 250ms; --eb-ease: cubic-bezier(0.2, 0, 0, 1); } @media (max-width: 900px) { :root { --eb-display-size: 40px; --eb-h1-size: 32px; --eb-h2-size: 26px; --eb-gutter: 16px; --eb-section: 48px; } } @media (prefers-reduced-motion: reduce) { :root { --eb-dur-fast: 1ms; --eb-dur-base: 1ms; } } /* ── 3. Mapowanie na tokeny rodzica ─────────────────────────────────────── Rodzic trzyma tokeny jako właściwości niestandardowe, więc reskin jego szablonów to podmiana wartości, nie rebuild. Nazwy po lewej są kontraktem rodzica (shopkit-theme/resources/css/global/theme.css) — nie zmieniamy ich. `--color-primary` jest u rodzica tłem przycisku głównego I kolorem tekstu nagłówków. W naszym systemie to dwie różne role: akcja ma być --eb-accent, tekst --eb-ink. Rozstrzygamy na korzyść tekstu (występuje częściej), a przyciski przestawia warstwa shop.css. */ :root { --color-primary: var(--eb-ink); --color-primary-dark: var(--eb-deep); --color-primary-light: var(--eb-ink-muted); --color-primary-hover: var(--eb-accent-hover); --color-accent: var(--eb-accent); --color-accent-soft: var(--eb-aqua-soft); --color-accent-dark: var(--eb-accent-hover); --color-lav: var(--eb-aqua); --color-lav-soft: var(--eb-aqua-soft); --color-text: var(--eb-ink); --color-dark-text: var(--eb-ink); --color-muted: var(--eb-ink-muted); --color-border: var(--eb-line); --color-page: var(--eb-canvas); --color-bg: var(--eb-canvas); --color-bg-subtle: var(--eb-surface); --color-success: var(--eb-success); --color-success-bg: #e7f2ec; --color-success-ring: #c9e2d5; --color-danger: var(--eb-danger); --color-danger-bg: #f9ecea; --color-danger-ring: #eccdc7; --color-warning: var(--eb-warn); --color-warning-bg: #f8f0e0; --color-warning-ring: #e8d4ab; --color-info: var(--eb-deep); --color-info-bg: var(--eb-aqua-soft); --color-info-ring: #b6dfe9; --font-sans: var(--eb-font-sans); --font-heading: var(--eb-font-sans); /* jeden grotesk w całym systemie */ /* Kształt: rodzic ma promienie 6–30px, my mamy 0 / 4 / 8 / pill. --radius-btn na pill, bo przyciski i pigułki filtrów to ten sam kształt. */ --radius-xs: var(--eb-radius-sm); --radius-sm: var(--eb-radius-sm); --radius-md: var(--eb-radius-md); --radius-lg: var(--eb-radius-md); --radius-msg: var(--eb-radius-md); --radius-btn: var(--eb-radius-pill); --ob-ease: var(--eb-ease); /* Kadr kafelka produktu: projekt ma kwadrat, nie 3/4. ⚠️ Musi zostać zgodne z shopkit_img_tile_ratio() — patrz inc/images.php rodzica: PHP decyduje o kadrze obrazu, token o boxie w layoucie. */ --ratio-product-tile: 1 / 1; /* Cienie są POCHODNE tokenów u rodzica (color-mix od --color-primary). W tym systemie cienia nie ma w ogóle — głębię niesie zmiana płaszczyzny i hairline (DESIGN.md §5). Zerujemy je u źródła; twarde `box-shadow` wpisane liczbami w arkuszu rodzica zdejmuje warstwa shop.css. */ --shadow-hero: none; --shadow-card: none; --shadow-card-strong: none; --shadow-subtle: transparent; --ring-primary: color-mix(in oklab, var(--eb-accent) 35%, transparent); --scrim-primary: color-mix(in oklab, var(--eb-deep) 72%, transparent); --scrim-accent-dark: color-mix(in oklab, var(--eb-deep) 85%, transparent); --container-page: var(--eb-max-content); --container-wide: var(--eb-max); --section-space: var(--eb-section); --section-space-md: var(--eb-section); --swiper-theme-color: var(--eb-accent); --swiper-navigation-color: var(--eb-ink); --swiper-pagination-color: var(--eb-ink); }