/* ============================================================ BOOKING ENGINE — arkusz wdrożeniowy (szablon per klient) ------------------------------------------------------------ ⚠ To NIE jest ten sam plik co CSS strony. Osobne miejsce w panelu, osobne nazwy zmiennych, osobna robota. ⛔ KOLORY SĄ KLIENTA, NIE DIRELO. Silnik rezerwacji buduje markę GOSPODARZA — gość ma tam widzieć jego obiekt, nie mojego dostawcę. Wartości niżej to placeholdery: podmieniam je na paletę klienta. ⛔ PODSTAWA: schemat „Green". Wkleić PO jego wybraniu. Każdy schemat ma OSOBNY arkusz — przełączenie schematu cicho kasuje ten plik, bez żadnego ostrzeżenia. → zapisać w karcie klienta, na którym schemacie stoi. ⚠ Walidator panelu podkreśli zmienne na czerwono. Fałszywy alarm, tak samo jak przy stronie. Zapisać mimo tego. ============================================================ */ :root { /* ========================================================== ⭐ JEDYNE MIEJSCE DO EDYCJI PRZY KLIENCIE — 8 linii. Reszta pliku przelicza się sama. ========================================================== */ --dl-brand: #2F5D50; /* kolor wiodący klienta */ --dl-brand-dark: #1E3F36; /* hover / wariant ciemny */ --dl-text: #1C1F24; /* tekst podstawowy */ --dl-bg: #F6F7F5; /* tło strony i paska górnego */ --dl-tile: #FFFFFF; /* kafle, kalendarz, pola */ --dl-tile-alt: #EDEFEC; /* kafle drugorzędne, tabele */ --dl-border: #DCE1E3; /* ramki */ --dl-day-free: #CFE0D9; /* dzień wolny w kalendarzu */ --dl-day-weekend: #AEC3BC; /* weekend */ /* --------------------------------------------------------- PONIŻEJ NIC NIE RUSZAĆ przy zwykłym wdrożeniu. Nazwy zmiennych są IdoBookinga — łącznie z ich literówkami, które są oznaczone. Poprawienie literówki = zmienna przestaje działać. --------------------------------------------------------- */ /* --- KOLOR WIODĄCY -------------------------------------- */ --breadcrumb-active: var(--dl-brand); --button1-background: var(--dl-brand); --button2-background: var(--dl-brand); --button3-background: var(--dl-brand); --button-background-proceed: var(--dl-brand); --link-text: var(--dl-brand); --addonprice-background: var(--dl-brand); --summary-color: var(--dl-brand); --tab-top-1: var(--dl-brand); --main-nav-button: var(--dl-brand); --main-nav-button-color: var(--dl-brand); --supportcolor1: var(--dl-brand); --calendar-persons-icon: var(--dl-brand); /* --- HOVER / CIEMNY WARIANT ----------------------------- */ --button1-background-hover: var(--dl-brand-dark); --button2-background-hover: var(--dl-brand-dark); --button3-background-hover: var(--dl-brand-dark); --link-text-hover: var(--dl-brand-dark); --input-text-hover: var(--dl-brand-dark); --input-border-hover: var(--dl-brand-dark); --filter-category-button-color: var(--dl-brand-dark); /* --- TEKST ---------------------------------------------- */ --body-color: var(--dl-text); --background-text-color: var(--dl-text); --table-text: var(--dl-text); --main-nav-bar-text-color: var(--dl-text); --calendar-text-color: var(--dl-text); --dark-background-text: var(--dl-text); --subbutton-text: var(--dl-text); --input-text: var(--dl-text); /* było #394263 - niebieskawe */ --input2-text: var(--dl-text); /* --- TŁA ------------------------------------------------ Szare tło strony + białe kafle to DOBRY zabieg - kafle się odcinają. Nie zmieniam na białe, tylko ocieplam. */ --body-background-color: var(--dl-bg); --main-nav-bar: var(--dl-bg); --button-top-login: var(--dl-bg); --buttton-top-contact: var(--dl-bg); /* ⚠ ICH literówka: 3x "t" */ --flag-border: var(--dl-bg); --dark-background-icon: var(--dl-bg); --background-section-color: var(--dl-tile); --background-section-color-callendar: var(--dl-tile); /* ⚠ ICH literówka: 2x "l" */ --calendar-background-color: var(--dl-tile); --tile-background: var(--dl-tile); --input-background: var(--dl-tile); --mainColor: var(--dl-tile-alt); /* ⚠ ICH zapis: duże C */ --subtile-background: var(--dl-tile-alt); --share-background: var(--dl-tile-alt); --table-background: var(--dl-tile-alt); /* --- RAMKI ---------------------------------------------- */ --input-border: var(--dl-border); --input2-border: var(--dl-border); --tile-border: var(--dl-border); --callendar-border-color: var(--dl-border); /* ⚠ ICH literówka: 2x "l" */ --subbutton-background: var(--dl-border); /* --- KALENDARZ - odcienie koloru wiodącego -------------- To najważniejsze kolory w całym silniku: po nich gość rozpoznaje, które dni są wolne. SPRAWDZIĆ NA ŻYWO. */ --calendar-day-available-day: var(--dl-day-free); --calendar-day-weekend: var(--dl-day-weekend); --calendar-day-highlight: var(--dl-brand); --calendar-day-highlight-hover: var(--dl-brand); --calendar-day-highlight-color: var(--dl-tile); /* --- CENA PROMOCYJNA ------------------------------------ 8 znaków = kolor + przezroczystość (D7 ≈ 84%). ⚠ Jedyne miejsce, gdzie hex nie idzie przez zmienną - przy zmianie palety podmienić ręcznie. */ --promo-price-color: #1E3F36D7; } /* ============================================================ ⛔ CZEGO NIE ZMIENIAM - i dlaczego ------------------------------------------------------------ --calendar-day-highlight-disabled: #db5e61 ← CZERWONY --tab-top-2: #da5e61 ← CZERWONY To są kolory „niedostępne / błąd". Czerwony niesie znaczenie, którego gość uczył się przez całe życie w internecie. Przemalowanie ich na zielono pod markę = gość nie odróżni terminu wolnego od zajętego. Zostają czerwone ZAWSZE. --cross-price-color: #aaa ← cena przekreślona --button-background-grey: #999 ← przycisk nieaktywny --breadcrumb-inactive: #858585 ← krok jeszcze nieosiągnięty Szarość też niesie znaczenie („nieaktywne"). Zostaje. ============================================================ */ /* ============================================================ KONTROLA PO WDROŻENIU - przejść wzrokiem, nie na wiarę ------------------------------------------------------------ 1. Kalendarz: czy wolne / weekend / zaznaczone / niedostępne są od siebie odróżnialne. NAJWAŻNIEJSZE. 2. Przycisk „Rezerwuj" w stanie normalnym i hover. 3. Krok płatności - breadcrumb aktywny vs nieosiągnięty. 4. Telefon, nie tylko podgląd w panelu. 5. Twarde odświeżenie (Ctrl+Shift+R) - inaczej widać cache. ============================================================ */