/* ========================================================================== Zebra Tur — strat de tema peste motorul unit.travel ========================================================================== Motorul aduce 17 foi de stil, 14.619 reguli si ZERO variabile CSS, deci nu exista nimic de comutat: tema se scrie ca un strat propriu, injectat de proxy ultimul in . De aici doua consecinte care se vad in tot fisierul: 1. `!important` nu e lene, e singura cale peste reguli de tip `.basic-form .form-item input[type=text]` scrise de ei. Il folosim doar unde chiar e nevoie (culoare, tipografie, raza, umbra), niciodata pe layout — pozitionarea ramane a motorului, altfel se rup paginile pe care nu le-am vazut. 2. Selectorii sunt legati de clasele LOR. Daca unit isi schimba markup-ul, tema degradeaza in vechiul aspect, nu in pagina stricata — de asta nu ascundem si nu repozitionam nimic esential. Kill-switch: `` opreste tot (vezi proxy.js). ========================================================================== */ :root { /* Portocaliul e deja al motorului (#E46D31) — il pastram ca sa nu rupem iconitele si SVG-urile lor care il folosesc hardcodat, dar ii dam o scara. */ --zbr-orange: #e46d31; --zbr-orange-600: #cf5c22; --zbr-orange-700: #b44d19; --zbr-orange-050: #fdf1ea; /* Navy-ul e culoarea de brand din manifest (theme-color) — pana acum nu era folosit nicaieri vizibil. Devine culoarea titlurilor si a antetului. */ --zbr-navy: #123a63; --zbr-navy-700: #0d2b4a; --zbr-navy-050: #eef3f9; /* Scara de gri e aleasa ca sa treaca WCAG AA (4,5:1) pe TOATE cele trei suprafete pe care le foloseste motorul, nu doar pe alb. Prima varianta avea #7B8794 pentru etichete: 3,66:1 pe alb, dar doar 2,96:1 pe albastrul deschis al formularului de pe mobil — adica exact acolo unde e citit cel mai des. Cifrele de mai jos sunt masurate pe alb / #E1E8F0 / #F5F7FA. */ --zbr-ink: #1f2933; /* principal 14,8 / 12,0 / 13,8 — #3E3E3E era prea spalacit */ --zbr-ink-2: #4b5563; /* secundar 7,6 / 6,1 / 7,0 */ --zbr-ink-3: #5a6672; /* etichete 5,9 / 4,8 / 5,5 */ --zbr-line: #e3e8ef; --zbr-bg: #ffffff; --zbr-bg-soft: #f5f7fa; --zbr-r-sm: 10px; --zbr-r: 14px; --zbr-r-lg: 18px; --zbr-sh-1: 0 1px 2px rgba(16, 24, 40, .04), 0 2px 6px rgba(16, 24, 40, .06); --zbr-sh-2: 0 2px 6px rgba(16, 24, 40, .06), 0 10px 24px rgba(16, 24, 40, .09); --zbr-sh-3: 0 8px 18px rgba(16, 24, 40, .10), 0 22px 48px rgba(16, 24, 40, .14); --zbr-ring: 0 0 0 3px rgba(228, 109, 49, .28); } html[data-zbr-theme="off"] body { all: revert; } /* -------------------------------------------------------------------------- 1. Tipografie Baza era 13px. Pentru un site pe care oamenii citesc preturi si conditii de anulare de pe telefon, 13px inseamna ca nimeni nu citeste conditiile. Urcam la 15px si dam titlurilor Montserrat, familia pe care motorul o incarca deja dar o foloseste inconsecvent (h2-urile erau Roboto 900). -------------------------------------------------------------------------- */ body { font-size: 15px !important; line-height: 1.55 !important; color: var(--zbr-ink) !important; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, .block-h2, .block-h1, .page-title, .hotel-name, .b-title { font-family: Montserrat, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important; letter-spacing: -.015em !important; line-height: 1.2 !important; } /* Culoarea titlurilor se da SEPARAT de familie, si niciodata orbeste. Motorul are dale cu fundal inchis (`.tile-grid_item.dark`) si carduri peste poza (`.tile-content`) unde titlul e deja alb — un `color: navy !important` global le facea text invizibil pe fundal inchis. Excludem static contextele pe care le stim, iar pentru paginile pe care nu le-am vazut, scriptul din proxy marcheaza cu `data-zbr-keep` orice titlu care sta pe un fundal inchis sau e deja deschis la culoare. Regula de aici nu poate produce text invizibil. */ h1, h2, h3, h4, h5, .block-h2, .block-h1, .page-title, .b-title { color: var(--zbr-navy) !important; } .dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark .b-title, [class*="dark"] h1, [class*="dark"] h2, [class*="dark"] h3, [class*="dark"] h4, [class*="dark"] h5, .tile-content h1, .tile-content h2, .tile-content h3, .tile-content h4, .tile-content h5, footer h1, footer h2, footer h3, footer h4, footer h5, [data-zbr-keep], [data-zbr-keep] h1, [data-zbr-keep] h2, [data-zbr-keep] h3, [data-zbr-keep] h4, [data-zbr-keep] h5 { color: inherit !important; } .block-h2 { font-size: 30px !important; font-weight: 800 !important; } h4.text-center { font-size: 16px !important; color: var(--zbr-ink-2) !important; font-weight: 400 !important; } /* Textul mic al motorului (etichete, conditii, note) urca de la 10-11px la un prag citibil. Fara asta, restul temei doar infrumuseteaza un text pe care turistul tot nu-l poate citi. */ small, .small, .text-small, .note, .hint, .tile-content .product-info, .room-rates-row .conditions, [class*="-note"], [class*="-hint"] { font-size: 13px !important; line-height: 1.5 !important; } /* -------------------------------------------------------------------------- 2. Butoane Un singur limbaj: portocaliu plin = actiunea principala, contur = secundara. Tinta de atingere urca la 44px, minimul pentru degete. -------------------------------------------------------------------------- */ .button, .btn, button[type="submit"], .room-rates-bookBtn, a.w-book-btn, a.t-btn-book-detail { border-radius: var(--zbr-r-sm) !important; font-weight: 700 !important; letter-spacing: .005em !important; transition: background-color .16s ease, box-shadow .16s ease, transform .16s ease !important; } .button, button[type="submit"], .room-rates-bookBtn, a.w-book-btn, a.t-btn-book-detail { background-color: var(--zbr-orange) !important; color: #fff !important; border: 0 !important; min-height: 44px !important; box-shadow: 0 1px 2px rgba(180, 77, 25, .18), 0 6px 16px rgba(228, 109, 49, .22) !important; } .button:hover, button[type="submit"]:hover, .room-rates-bookBtn:hover, a.w-book-btn:hover, a.t-btn-book-detail:hover { background-color: var(--zbr-orange-600) !important; box-shadow: 0 2px 4px rgba(180, 77, 25, .20), 0 10px 22px rgba(228, 109, 49, .30) !important; transform: translateY(-1px); } .button:active, button[type="submit"]:active, .room-rates-bookBtn:active, a.w-book-btn:active { background-color: var(--zbr-orange-700) !important; transform: translateY(0); box-shadow: 0 1px 2px rgba(180, 77, 25, .24) !important; } /* Focus vizibil — motorul nu avea niciunul, deci navigarea din tastatura era oarba, iar asta e si o cerinta de accesibilitate, nu doar estetica. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--zbr-orange) !important; outline-offset: 2px !important; border-radius: 6px; } /* -------------------------------------------------------------------------- 3. Formularul de cautare — elementul cel mai folosit de pe site -------------------------------------------------------------------------- */ .basic-form, .basic-form-container > .basic-form { border-radius: var(--zbr-r-lg) !important; box-shadow: var(--zbr-sh-2) !important; border: 1px solid rgba(255, 255, 255, .6) !important; } .basic-form .form-item, .basic-form .field, .main-form .form-item { border-radius: var(--zbr-r-sm) !important; transition: box-shadow .16s ease, border-color .16s ease !important; } .basic-form .form-item:focus-within, .main-form .form-item:focus-within { box-shadow: var(--zbr-ring) !important; border-color: var(--zbr-orange) !important; } .basic-form input[type="text"], .basic-form input[type="search"], .main-form input[type="text"] { font-size: 15px !important; color: var(--zbr-ink) !important; } /* Eticheta de deasupra campului era 11px in toate formularele motorului — si in cel de pe pagina de hotel, care nu e `.basic-form`, de unde si `.form-part`. */ .basic-form label, .form-part > label, .form-item > label, .form-item .label, .form-item > .title { color: var(--zbr-ink-3) !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: .02em !important; text-transform: none !important; } /* Tab-urile de produs (Vacante / Zboruri / Hoteluri…) */ ul.tabs_btn > li > a { color: var(--zbr-ink-2) !important; font-weight: 600 !important; } ul.tabs_btn > li.active > a, ul.tabs_btn > li[class*="active"] > a { color: var(--zbr-navy) !important; } /* -------------------------------------------------------------------------- 4. Carduri (oferte speciale, rezultate, dale de continut) Motorul le desena cu raza 8px si fara nicio umbra, deci pluteau pe alb fara sa arate ca sunt clicabile. -------------------------------------------------------------------------- */ .tile-item, .tile-item-inner, .tile-grid > div, .default-container, .listing-content .limit > .default-container { border-radius: var(--zbr-r) !important; } .tile-item { overflow: hidden !important; box-shadow: var(--zbr-sh-1) !important; transition: box-shadow .2s ease, transform .2s ease !important; } .tile-item:hover { box-shadow: var(--zbr-sh-3) !important; transform: translateY(-3px); } .tile-item .tile-img { transition: transform .35s ease !important; } .tile-item:hover .tile-img { transform: scale(1.045); } /* Gradientul peste poza: al lor pornea de la 30% si lasa numele hotelului sa se piarda in cer. */ .tile-item .tile-bg { background-image: linear-gradient( to bottom, rgba(9, 20, 33, 0) 0%, rgba(9, 20, 33, .10) 35%, rgba(9, 20, 33, .62) 72%, rgba(9, 20, 33, .88) 100%) !important; } .tile-content .direction { color: rgba(255, 255, 255, .82) !important; font-size: 13px !important; } .tile-content .arrival { font-size: 19px !important; font-weight: 800 !important; } .tile-content .hotel-name { color: rgba(255, 255, 255, .92) !important; font-size: 13px !important; } /* Pretul de pe card — cel mai important numar din tot cardul */ .tile-content .product-info .price, .tile-content .price, .tile-content [class*="price"] { font-family: Montserrat, Roboto, sans-serif !important; font-weight: 800 !important; color: #fff !important; } /* Dalele de continut („Cinci beneficii…"). Motorul le da deja raza 16px si un contur de 1px, dar zero umbra, deci stau lipite de fundal. Umbra merge pe `.tile-grid_item` — pe `.tile-grid > div` ar cadea pe coloana transparenta care le contine si ar desena un al doilea chenar in jurul primului. */ .block-tile .tile-grid_item { box-shadow: var(--zbr-sh-1) !important; } .block-tile .tile-grid_item p, .block-tile .tile-aside p { font-size: 14.5px !important; line-height: 1.6 !important; } /* -------------------------------------------------------------------------- 5. Antet -------------------------------------------------------------------------- */ .header, .adaptiveHeader-wrap { background: #fff !important; box-shadow: 0 1px 0 var(--zbr-line), 0 1px 12px rgba(16, 24, 40, .05) !important; } /* Logo-ul: slotul mobil are 48px inaltime si 194px latime, dar motorul punea acolo un „U" de 45x46. Proxy-ul il inlocuieste cu al nostru; aici doar ne asiguram ca are loc sa respire si nu se intinde. */ .adaptiveHeader-logo a.logo img, .header a.logo img, .header img.t-logo { object-fit: contain !important; width: auto !important; max-height: 40px !important; max-width: 180px !important; } .head-btn, a[href="/login"], .head-option a { font-weight: 600 !important; color: var(--zbr-ink) !important; } /* -------------------------------------------------------------------------- 6. Pagina de hotel si tarife — zidul de text de 10px -------------------------------------------------------------------------- */ .room-rates-row-inner, .room-rates-row { border-radius: var(--zbr-r-sm) !important; } .room-rates-row-inner:hover { background: var(--zbr-orange-050) !important; } /* Pretul tarifului trebuie sa fie lucrul pe care ochiul il gaseste primul. Selectorii sunt EXACTI, nu `[class*="price"]`: in acelasi rand mai exista `.price-for-night` (pretul pe zi, care trebuie sa ramana secundar) si `.price-include`, care traieste in tooltipul `.hover-hint-wrap` — acolo textul e alb pe fundal inchis, deci un navy aplicat cu joker l-ar face invizibil. */ .room-rates-price .price.new, .room-rates-price .price.new .eur-currency, .minimumPrice { font-family: Montserrat, Roboto, sans-serif !important; font-weight: 800 !important; color: var(--zbr-navy) !important; } .room-rates-price .price.new, .room-rates-price .price.new .eur-currency { font-size: 22px !important; line-height: 1.15 !important; } /* Pretul pe zi e context, nu oferta — ramane mic si linistit, altfel randul are doua numere mari care se bat intre ele. */ .room-rates-price .price-for-night, .room-rates-price .price-for-night .eur-currency { font-size: 13px !important; font-weight: 400 !important; color: var(--zbr-ink-3) !important; } /* Tooltipul cu „Pretul include" ramane exact cum il deseneaza motorul. */ .hover-hint-wrap, .hover-hint-wrap * { font-size: 13px !important; } /* Etichetele de conditii (`.listing-deadline`) sunt cea mai importanta informatie de pe pagina dupa pret — spun daca rezervarea se confirma imediat si daca banii se mai intorc. Doua dintre ele erau practic necitibile pe alb, masurat, nu din ochi: „Confirmare imediata" #FCB316 pe alb = 1,81:1 „Tarif nerambursabil" #F67142 pe alb = 2,85:1 „Anulare gratuită" #03A500 pe alb = 3,29:1 Pragul WCAG AA pentru text normal e 4,5:1. Pastram nuanta (galben = atentie, portocaliu-rosu = restrictie, verde = inclus), doar o coboram pana trece. */ .listing-deadline { font-size: 12.5px !important; line-height: 1.45 !important; } .listing-deadline.i-instantConfirm { color: #9a6300 !important; } /* 5,05:1 */ .listing-deadline.i-nonRef { color: #c0431a !important; } /* 5,17:1 */ .listing-deadline.i-green, .listing-deadline.i-free { color: #067f04 !important; } /* 5,19:1 */ /* -------------------------------------------------------------------------- 7. Subsol -------------------------------------------------------------------------- */ footer { background: var(--zbr-bg-soft) !important; border-top: 1px solid var(--zbr-line) !important; } footer .bottom-panel { color: var(--zbr-ink-3) !important; font-size: 12.5px !important; } footer a { color: var(--zbr-ink-2) !important; } footer a:hover { color: var(--zbr-orange) !important; } /* -------------------------------------------------------------------------- 8. Mobil Bara de jos si antetul sunt singurele elemente pe care le atinge tema pe telefon — restul se rezolva din tipografia si cardurile de mai sus. -------------------------------------------------------------------------- */ @media (max-width: 767px) { body { font-size: 15px !important; } .block-h2 { font-size: 23px !important; } .adaptiveHeader-logo a.logo img { max-height: 36px !important; } /* Butonul principal pe latimea ecranului, cu tinta generoasa */ .basic-form .button, .basic-form button[type="submit"] { min-height: 52px !important; font-size: 17px !important; } .tile-item:hover { transform: none; } /* fara hover fals pe touch */ .tile-content .arrival { font-size: 20px !important; } }