/* family-topbar.css — pasek gorny w kolorze rodziny surowca. * * ZASADA: wejscie w linie produktowa lub w podstrone produktu zmienia tlo * paska z ruchomymi napisami na kolor tej rodziny. Pasek staje sie dzieki temu * stalym sygnalem "gdzie jestem", widocznym na kazdym ekranie strony. * * DLACZEGO CZYSTO CSS: strony NIOSA JUZ klase rodziny na * (category-page--turicoll, pdp--turiker, ...), wiec nie trzeba dotykac ani * jednego pliku HTML. Wystarczy przypisac kolor do istniejacej klasy. * * KOLORY: przepisane 1:1 z --category-navy juz zdefiniowanych w * concept8.css:2837-2840 (.pdp--*) oraz product-category-refresh.css:27-42 * (agro/bio). Zadnych nowych wartosci - to te same glebokie odcienie rodzin, * ktorych strona uzywa w hero i naglowkach. * * KONTRAST: bialy tekst na kazdym z tych tel ma stosunek >= 9.8:1 (WCAG AAA * wymaga 7:1). Zmierzone: turicoll 15.90, turiker 15.93, turipro 12.20, * turigel 9.84, agro 15.58, bio 15.02. Dla porownania obecny granat: 15.39. * * ZAKRES: 54 dokumenty (4 linie x 3 jezyki, 36 podstron produktow, agro+bio). * Strony bez klasy rodziny (glowna, wiedza, kontakt, zastosowania) zostaja * na granatowym --navy - bez zmian. */ .category-page--turicoll, .pdp--turicoll { --topbar-fam: #11195d; } .category-page--turiker, .pdp--turiker { --topbar-fam: #3b1232; } .category-page--turipro, .pdp--turipro { --topbar-fam: #073d31; } .category-page--turigel, .pdp--turigel { --topbar-fam: #663807; } .category-page--agro { --topbar-fam: #0b291c; } .category-page--bio { --topbar-fam: #292d1c; } /* Samo tlo paska. */ .category-page--turicoll .topbar, .pdp--turicoll .topbar, .category-page--turiker .topbar, .pdp--turiker .topbar, .category-page--turipro .topbar, .pdp--turipro .topbar, .category-page--turigel .topbar, .pdp--turigel .topbar, .category-page--agro .topbar, .category-page--bio .topbar { background: var(--topbar-fam); } /* Prawy blok (mail + przelacznik jezyka) ma WLASNE tlo w home-motion.css:16, zeby ruchome napisy chowaly sie pod nim. Bez tego nadpisania zostalby granatowy prostokat na kolorowym pasku - widoczny szew. */ .category-page--turicoll .topbar .r, .pdp--turicoll .topbar .r, .category-page--turiker .topbar .r, .pdp--turiker .topbar .r, .category-page--turipro .topbar .r, .pdp--turipro .topbar .r, .category-page--turigel .topbar .r, .pdp--turigel .topbar .r, .category-page--agro .topbar .r, .category-page--bio .topbar .r { background: var(--topbar-fam); } /* Aktywny jezyk to biala pigulka z tekstem w kolorze tla paska (styles.css:38 zaszywa tam --navy). Bez tego napis PL zostalby granatowy na wszystkich rodzinach. */ .category-page--turicoll .topbar .lang a.on, .pdp--turicoll .topbar .lang a.on, .category-page--turiker .topbar .lang a.on, .pdp--turiker .topbar .lang a.on, .category-page--turipro .topbar .lang a.on, .pdp--turipro .topbar .lang a.on, .category-page--turigel .topbar .lang a.on, .pdp--turigel .topbar .lang a.on, .category-page--agro .topbar .lang a.on, .category-page--bio .topbar .lang a.on { color: var(--topbar-fam); }