/* * Tokeny DaviBikes — patrz ~/clients/davibikes/notes/06-tokeny-i-klasy-bazowe.md * Jedyny plik, w którym wolno wpisać surową wartość. Wszędzie indziej var(--…). * Wczytywany PRZED davi-home.css. */ /* Prawdziwie globalne tokeny (nie .davi-home) - potrzebne wszędzie tam, gdzie davi-product-card.css się ładuje (2026-09-18: cała witryna - sklep, kategorie, powiązane produkty - nie tylko front-page.php/.davi-home). Te same wartości co odpowiedniki w .davi-home poniżej - tam zostają jako own scope dla reszty strony głównej, tu żyją jako :root, żeby kafelek produktu działał identycznie poza .davi-home. */ :root { --base: 17, 18, 21; /* #111215 */ --card-border: 229, 233, 238; /* #E5E9EE - z Figmy (node 1:236), inna niż --border */ --card-radius: 20px; --badge-radius: 6px; --discount: 255, 205, 1; /* #FFCD01 - Figma var(--prime), akcent Flatsome, nie nasz --primary */ --gray-caption: 99, 105, 113; /* #636971 - z Figmy, tekst pomocniczy na kafelku produktu */ --pdp-muted: 110, 122, 138; /* #6E7A8A - z Figmy PDP (node 81:570) - osobny, realnie inny odcień szarości niż --gray-caption, używany konsekwentnie w wielu miejscach tej strony (stara cena, licznik opinii, qty +/-, wiersze zaufania, cena katalogowa) - nie to samo co --gray-caption (ten zostaje tylko dla podtytułu, gdzie Figma faktycznie użyła #636971, sprawdzone 2026-09-23). */ /* Realnie globalne tokeny układu (2026-09-22) - były tylko w .davi-home, więc każdy element renderujący się POZA .davi-home (kafelek produktu na kategorii, teraz też sitewide footer.php) po prostu ich nie widział: --page-width niezdefiniowany = max-width:none (stopka nie była wcale ograniczona/wyśrodkowana), a .davi-home .clickable-parent::before nigdy się nie stosował poza stroną główną - CAŁY mechanizm "kliknij gdziekolwiek na kafelku" był realnie martwy na każdej stronie kategorii/sklepu, znaleziono 2026-09-22 sprawdzając realny computed style na /rowery/rowery-damskie/ (content:none zamiast pustego stringa). Te same wartości, po prostu przeniesione z .davi-home (patrz niżej - nie duplikowane, żeby nie było dwóch źródeł prawdy). */ --page-width: 1440px; --page-padding-inline: clamp(16px, -0.96875rem + 8.75vw, 100px); /* Kolory specyficzne dla stopki (sitewide, node 70:384/71:472 w Figmie) - realne wartości z Dev Mode, nie wymyślone; #969BA1 (desktop) i #9CA4AB (mobile) to naprawdę dwa różne, bliskie odcienie w samej Figmie, nie literówka - zachowane osobno. */ --footer-chip-bg: 45, 47, 54; /* #2D2F36 */ --footer-muted: 150, 155, 161; /* #969BA1 - desktop tagline/linki */ --footer-muted-mobile: 156, 164, 171; /* #9CA4AB - mobile tagline */ /* --primary/--focus* przeniesione tu z .davi-home (2026-09-22) - :focus-visible (niżej) musi działać sitewide (dostępność, nie tylko na stronie głównej), a bez tego --focus rozwiązywał się w nic poza .davi-home. */ --primary: 245, 175, 8; /* #F5AF08 */ --focus: 2px solid rgb(var(--primary)); --focus-offset: 2px; /* --primary-tint przeniesiony tu z .davi-home (2026-09-26) - ten sam błąd co reszta powyżej: strona produktu nie jest w .davi-home, więc `background: rgb(var(--primary-tint))` na odznace kategorii (.davi-pdp__category, node 81:584) rozwiązywał się w nic - CSS z var() do NIEISTNIEJĄCEJ zmiennej (bez fallbacku) jest inwalidowany w całości, nie "spada" na żadną domyślną wartość - sprawdzone live (computed background: rgba(0,0,0,0), czyli w ogóle się nie zadziałało), nie zgadywane. */ --primary-tint: 254, 247, 230; /* #FEF7E6 */ /* --section-pad przeniesiony tu z .davi-home (2026-09-26) - ten sam błąd raz jeszcze: .davi-section (patrz niżej, przy .davi-container) musi działać sitewide, ale samo przeniesienie KLASY nie wystarczyło - var(--section-pad) nadal rozwiązywał się w nic na PDP, bo sam TOKEN został w .davi-home, więc cała deklaracja `padding-block` padała w całości (bez fallbacku) - sprawdzone live (computed padding-block: "0px / 0px" na .davi-pdp__upsells mimo klasy .davi-section w class="", brak tokena to brak stylu, nie zgadywane). */ --section-pad: clamp(40px, 2.03125rem + 2.0833vw, 60px); /* PDP-specific tokens (2026-09-26) - real values pulled OUT of davi-pdp.css component rules where the same color was written raw 2+ times (07-standardy-frontu.md #3: "Zero surowych wartości w komponentach... jedyny plik z surowymi wartościami to tokens.css"). A handful of other one-off PDP colors (used exactly once each, confirmed by grepping the real declarations, not guessed) stay raw in davi-pdp.css itself, per this same rule's own explicit carve-out: "Token musi mieć powód - wartość użyta raz i nigdzie indziej to nie token." */ --white: 255, 255, 255; /* #FFFFFF - card/thumbnail backgrounds, 6 uses */ --specs-border: 232, 236, 239; /* #E8ECEF - specs/instrukcje/info card border, 3 uses - real Figma value, close to but genuinely different from --card-border (#E5E9EE), same "two close-but-distinct exports" situation already documented for other grays. */ --specs-muted: 94, 98, 106; /* #5E626A - specs card label/subtitle text, 3 uses */ --danger-tint: 254, 242, 242; /* #FEF2F2 - saving-badge/out-of-stock backgrounds, 2 uses */ --danger: 239, 68, 68; /* #EF4444 - saving-badge/out-of-stock text, 2 uses */ --icon-bg: 243, 244, 246; /* #F3F4F6 - instruction/info-card icon circle backgrounds, 2 uses */ --checkbox-border: 209, 214, 224; /* #D1D6E0 - upsells checkbox default border, 2 uses */ } .davi-home { /* ------------------------------------------------------------- układ */ --gutter: 16px; /* --page-width i --page-padding-inline przeniesione do :root powyżej (2026-09-22) - zostają tu jako komentarz historyczny: jeden padding boczny dla CAŁEJ strony, ta sama wartość niezależnie od tego, czy sekcja używa .container czy jeszcze starego .davi-home (przed "etapem drugim") - inaczej hero i sąsiednia sekcja mają różny odstęp od krawędzi na tej samej szerokości ekranu (zgłoszenie 2026-09-17: "hero na tablecie ma 40px a kolejna sekcja 16px"). Fluid 16px→100px (360px→1320px viewport), formuła z pula-tokenow.md: B = (max-min)/9.6vw, A = (min-(max-min)*0.375)/16 rem. */ /* --------------------------------------------- odstępy: skala ręczna */ --size-xs: 0.25rem; --size-s: 0.5rem; --size-m: clamp(0.5rem, 0.3125rem + 0.8333vw, 1rem); --size-l: clamp(1rem, 0.8125rem + 0.8333vw, 1.5rem); --size-xl: clamp(1.5rem, 1.3125rem + 0.8333vw, 2rem); /* ------------------------------------- odstępy: dokładane domyślnie */ --gap: 1rem; --content: clamp(0.5rem, 0.3125rem + 0.8333vw, 1rem); --container-gap: clamp(2rem, 1.8125rem + 0.8333vw, 2.5rem); --section-padding-inline: 100px; /* --section-pad przeniesiony do :root (patrz góra pliku, przy --primary-tint) - zostaje tu tylko jako komentarz historyczny. */ /* --------------------------------------- kolory marki, z Dev Mode Figmy */ /* --base, --primary i --primary-tint żyją teraz w :root (patrz góra pliku) - zostają tu tylko jako inherited, nie redeklarowane drugi raz. */ --background: 250, 249, 246; /* #FAF9F6 */ --text-muted: 85, 86, 90; /* #55565A */ --border: 210, 214, 220; /* #D2D6DC */ /* -------------------------------------------------------- typografia */ --h1: clamp(2rem, 1.5rem + 2.5vw, 3.375rem); /* 32 → 54px */ --subtitle: 1rem; --small-text: 0.8125rem; /* 13px */ --tag: 0.75rem; /* 12px */ /* ------------------------------------------- promienie i przyciski */ --radius: 12px; --radius-pill: 999px; --btn-radius: 12px; --btn-padding-block: 16px; --btn-padding-inline: 28px; --btn-font-size: 15px; --btn-font-weight: 700; --btn-fill: rgb(var(--primary)); --btn-text: rgb(var(--base)); /* ------------------------------------------------------------- ruch */ --motion: 0.3s ease-out; /* --focus/--focus-offset żyją teraz w :root - patrz góra pliku. */ font-family: 'Onest', sans-serif; } /* Flatsome's own Customizer CSS sets `font-family: Manrope` directly on `h1,h2,h3,h4,h5,h6` (sitewide, out of our scope to touch). A direct rule on an element always wins over an inherited value, no matter how low its specificity is - .davi-home's own font-family (above) is inherited by our headings, so it never had a chance regardless of any specificity math. Found 2026-09-18 via getComputedStyle after the Onest rollout silently didn't apply to any heading. Needs its own direct rule to win. */ .davi-home h1, .davi-home h2, .davi-home h3, .davi-home h4, .davi-home h5, .davi-home h6 { font-family: 'Onest', sans-serif; } @media (prefers-reduced-motion: reduce) { .davi-home { --motion: 0.01s linear; } } .davi-home .btn { display: inline-flex; gap: 8px; align-items: center; justify-content: center; padding: var(--btn-padding-block) var(--btn-padding-inline); border: 1px solid var(--btn-fill); border-radius: var(--btn-radius); background: var(--btn-fill); color: var(--btn-text); font: inherit; font-size: var(--btn-font-size); font-weight: var(--btn-font-weight); text-decoration: none; cursor: pointer; transition: background var(--motion), color var(--motion), border-color var(--motion); } .davi-home .btn--outline { --btn-fill: #FFF; --btn-text: rgb(var(--base)); border-color: rgb(var(--base)); } @media (hover: hover) { .davi-home .btn:hover { filter: brightness(0.92); } } .davi-home .btn:active { filter: brightness(0.92); translate: 0 1px; } /* Global (not .davi-home-scoped, 2026-09-22): focus outline is an accessibility baseline, needed on every page, not just the home page. */ :focus-visible { outline: var(--focus); outline-offset: var(--focus-offset); } /* Sekcja/kontener: patrz 07-standardy-frontu.md #13. Reguła generyczna Every section is full-bleed by nature now (davi-home.css's shared ".davi-home section" rule carries padding-inline directly on the section) - .davi-container's only job is width-capping + centering, so it does NOT also carry padding-inline (2026-09-18: it used to, which double-padded any section that got its own container - see the davi-categories fix that flagged this exact bug). Named .davi-container, NOT the bare ".container" it was called until this same fix: Flatsome's own global CSS already defines an unscoped ".container { padding-left:15px; padding-right:15px }" - our rule's higher specificity (.davi-home .container) never mattered, because we weren't overriding padding at all, just not declaring it, so Flatsome's still applied and quietly ate into the grid's available width (found 2026-09-18: an auto-fit grid that should have shown 2 columns collapsed to 1 at narrow widths because of the ~30px this stole). Exactly the name-collision risk 06-tokeny-i-klasy-bazowe.md already flagged as real, not theoretical - a bare, unprefixed utility class name is not safe in this theme, even one this generic-sounding. Global (not .davi-home-scoped, 2026-09-22): the sitewide footer (footer.php) needs the exact same width-cap/centering job on every page, not just the home page - found real via a live check that max-width computed to "none" on the footer (no .davi-home ancestor to read --page-width from), so it wasn't capped/centered at all. */ .davi-container { width: 100%; max-width: var(--page-width); margin-inline: auto; box-sizing: border-box; } /* Shared box model for EVERY typical section (06-tokeny-i-klasy-bazowe.md): one real class, .davi-section - reused as-is on any plain section on any page, no per-section CSS needed at all unless that section genuinely differs (then it gets its own class alongside, or instead of, .davi-section - e.g. the home page's .davi-hero, or the PDP's breadcrumb