/* LAB header ревизија 5 (12.09.2026): ист изглед како живото whitelabel.klaudija. Андреј 12.09 02:40: „приказот убав како whitelabel.klaudija, СО функциите на LAB". Мерено во живото на 1440px (Playwright): контејнерот е нативен flex (space-between, wrap, gap 12, padding 12px 24px, висина 84); производите 0.88rem/500 rgba(0,0,0,.55), активен 700 rgb(255,115,0), растојание 28px; контакт-иконите 16–18px портокалови со сепаратори 1×16 и растојание 16; „Savana Travel" градиент-копче 32px. Тука НЕ се препишува контејнерот — се стилизираат само нашите додатоци и производите што ги додаваат LAB модулите. Ништо не е тргнато: вишокот производи е под „Повеќе ▾", јазик/валута/сметка се две икони, на телефон сè е во „Мени". Ревизија 6 (12.09 14:00): десно само „Контакт" пил · „MK · EUR" чип · сметка · Savana Travel; контакт-иконите се во popover, „Мени" и подножје (.sv-footer). Ревизија 6.1 (12.09 15:30): <768 само „Контакт" + „Мени" (и „Savana Travel" во „Мени"). */ /* Мора да надвладее над `.sv-header-navigation > a` подолу (иста !important → одлучува специфичност). */ .sv-admin-nav-source, .sv-header-navigation > a.sv-admin-nav-source { display: none !important; } /* „Најава" (Travitude) е во Моја сметка → Travitude поставки */ .sv-nav-more-src, .sv-header-navigation > a.sv-nav-more-src { display: none !important; } /* производ преместен под „Повеќе ▾" (React-owned, останува монтиран) */ /* ── Производи: типографија на живото ─────────────────────────────────────── */ .sv-header-navigation { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; gap: 28px !important; min-width: 0; position: relative; } .sv-header-navigation > a, .sv-nav-more-btn { display: inline-flex !important; align-items: center; box-sizing: border-box; min-height: 0 !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important; color: rgba(0, 0, 0, .55) !important; font-family: inherit; font-size: .88rem !important; font-weight: 500 !important; line-height: 1.3 !important; letter-spacing: 0 !important; white-space: nowrap !important; text-decoration: none !important; box-shadow: none !important; background: none; border: 0; cursor: pointer; transition: color .2s ease; } .sv-header-navigation > a:hover, .sv-nav-more-btn:hover, .sv-nav-more-btn[aria-expanded="true"] { color: rgb(255, 115, 0) !important; } .sv-header-navigation > a.sv-nav-active { color: rgb(255, 115, 0) !important; font-weight: 700 !important; } .sv-nav-more-wrap { position: relative; display: inline-flex; align-items: center; } .sv-nav-more-wrap[hidden] { display: none !important; } .sv-nav-more-btn > svg { width: 16px; height: 16px; margin-left: 1px; fill: currentColor; transition: transform .2s ease; } .sv-nav-more-btn[aria-expanded="true"] > svg { transform: rotate(180deg); } /* Паѓачкото мени: бела картичка како пребарувачот. Живее под (не во #root): во #root другите LAB модули (cruise-entry, tursrail, travelnav) би ги третирале копиите како уште едно мени и би додавале свои линкови во него. */ .sv-nav-more { position: fixed; transform: translateX(-50%); z-index: 1300; min-width: 208px; margin: 0; padding: 8px; box-sizing: border-box; background: #fff; border-radius: 16px; border: 1px solid rgba(0, 0, 0, .06); box-shadow: 0 2px 6px rgba(0, 0, 0, .04), 0 12px 32px rgba(0, 0, 0, .12); } .sv-nav-more[hidden] { display: none !important; } .sv-nav-more-item { display: flex; align-items: center; min-height: 44px; padding: 8px 14px; border-radius: 10px; color: rgba(0, 0, 0, .72); font-size: .88rem; font-weight: 500; text-decoration: none; white-space: nowrap; } .sv-nav-more-item:hover, .sv-nav-more-item:focus-visible { background: #fff3e9; color: #b34700; } .sv-nav-more-item[aria-current="page"] { color: rgb(255, 115, 0); font-weight: 700; } /* ── Десна група (ревизија 6): „Контакт" пил · „MK · EUR" чип · сметка · Savana Travel ── Нативните контакт-икони (React + Viber/WhatsApp од overlay.js) остануваат монтирани, но скриени на СИТЕ ширини: drawer.js оттаму ги чита за popover-от, „Мени" и подножјето. */ .sv-header-contacts { display: none !important; } .sv-header-drawers { display: inline-flex; align-items: center; gap: 12px; } .sv-util { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 24px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--brand-accent, #ff7900); cursor: pointer; font-family: inherit; } .sv-util > svg { width: 18px; height: 18px; fill: currentColor; transition: transform .2s ease, color .2s ease; } .sv-util:hover > svg, .sv-util[aria-expanded="true"] > svg { color: var(--brand-accent-dark, #c25700); transform: translateY(-1px); } .sv-util-sep { display: block; width: 1px; height: 16px; background: var(--brand-border, rgba(0, 0, 0, .12)); flex: 0 0 auto; } .sv-util-menu { display: none; } /* Пил и чип: мерка на „Savana Travel" копчето од живото (32px, радиус 10, .8rem/600), бела варијанта. */ .sv-util.sv-pill, .sv-util.sv-chip { gap: 6px; min-height: 32px; padding: 4px 12px; box-sizing: border-box; border: 1px solid var(--brand-border, rgba(0, 0, 0, .12)); border-radius: 10px; background: #fff; color: rgba(0, 0, 0, .72); font-size: .8rem; font-weight: 600; line-height: 1.75; white-space: nowrap; transition: border-color .2s ease, color .2s ease, background-color .2s ease; } .sv-util.sv-pill::before, .sv-util.sv-chip::before { content: ''; position: absolute; inset: -6px 0; } /* 44px допир */ .sv-util.sv-pill > svg { width: 16px; height: 16px; color: var(--brand-accent, #ff7900); } .sv-util.sv-pill:hover, .sv-util.sv-chip:hover, .sv-util.sv-pill[aria-expanded="true"], .sv-util.sv-chip[aria-expanded="true"] { border-color: var(--brand-accent, #ff7900); background: #fffaf6; color: #1a1a2e; } .sv-util.sv-pill:hover > svg, .sv-util.sv-pill[aria-expanded="true"] > svg { transform: none; color: var(--brand-accent-dark, #c25700); } /* Popover „Контакт": картичка како „Повеќе ▾" (бело, r16, сенка), редови 48px, кружни социјални икони. Панелот е tabindex=-1 (клик на padding го задржува фокусот внатре → Escape работи) — без прстен на самиот панел. */ .sv-reach:focus { outline: none; } .sv-reach { position: fixed; transform: translateX(-50%); z-index: 1300; width: 320px; max-width: calc(100vw - 24px); margin: 0; padding: 8px; box-sizing: border-box; /* иста ширина како popper-от на календарот (322) */ background: #fff; color: #1f2328; border-radius: 16px; border: 1px solid rgba(0, 0, 0, .06); box-shadow: 0 2px 6px rgba(0, 0, 0, .04), 0 12px 32px rgba(0, 0, 0, .12); overflow-y: auto; overscroll-behavior: contain; font-family: inherit; } .sv-reach[hidden] { display: none !important; } .sv-reach-list { display: flex; flex-direction: column; gap: 0; } .sv-reach .sv-drawer-link { min-height: 48px; gap: 12px; padding: 6px 12px; border: 0; border-radius: 10px; background: transparent; } .sv-reach .sv-drawer-link:hover, .sv-reach .sv-drawer-link:focus-visible { background: #fff3e9; border: 0; } .sv-reach .sv-drawer-icon { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 10px; } .sv-reach .sv-drawer-icon svg { width: 18px; height: 18px; } .sv-reach .sv-drawer-text { gap: 2px; } .sv-reach .sv-drawer-text strong { font-size: .88rem; font-weight: 650; } .sv-reach .sv-drawer-text > span { font-size: .8rem; color: rgba(0, 0, 0, .55); } .sv-reach-follow, .sv-footer-social { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .sv-reach-follow { margin: 6px 4px 2px; padding: 10px 8px 4px; border-top: 1px solid #eeeeee; font-size: .8rem; color: rgba(0, 0, 0, .55); } .sv-reach-follow > span, .sv-footer-social > span { margin-right: 2px; } .sv-social { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 40px; height: 40px; min-height: 0; padding: 0; border-radius: 50%; background: #fff1e5; color: var(--brand-accent, #ff7900); text-decoration: none; font-weight: 700; transition: background-color .2s ease; } .sv-social > svg { width: 18px; height: 18px; fill: currentColor; } .sv-social:hover, .sv-social:focus-visible { background: #ffe3cc; } .sv-reach a:focus-visible, .sv-footer a:focus-visible { outline: 2px solid #b34700; outline-offset: 3px; } /* Подножје: еден ред на десктоп (контакти · Следете нè · © + сајт), колона на телефон. */ .sv-footer { box-sizing: border-box; margin: 32px 0 0; padding: 28px 24px 24px; border-top: 1px solid var(--brand-border, rgba(0, 0, 0, .12)); background: #fafafa; color: rgba(0, 0, 0, .55); font-family: inherit; font-size: .8rem; line-height: 1.4; } .sv-footer-in { max-width: 1152px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; } .sv-footer-group { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; min-width: 0; } .sv-footer a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: rgba(0, 0, 0, .72); text-decoration: none; font-weight: 500; transition: color .2s ease; } .sv-footer a:hover { color: #b34700; } .sv-footer-contacts a > svg { width: 17px; height: 17px; flex: 0 0 auto; fill: currentColor; color: var(--brand-accent, #ff7900); } .sv-footer-legal a { font-weight: 600; } @media (max-width: 639px) { .sv-footer { padding: 20px 16px 24px; padding-bottom: max(24px, env(safe-area-inset-bottom)); } .sv-footer-in { flex-direction: column; align-items: flex-start; gap: 8px; } .sv-footer-contacts { gap: 0 20px; } /* телефон и е-пошта во свој ред, Viber + WhatsApp заедно */ } /* Текстот при hover (број, е-пошта, „Македонски · EUR") лебди ПОД иконата наместо да го шири редот: во живото има простор, овде редот е полн и би се прекршил. */ .sv-header-contacts > a { position: relative; } .sv-header-contacts .contact-reveal, .sv-util .contact-reveal { position: absolute !important; top: calc(100% - 4px); left: 50%; transform: translateX(-50%); max-width: none !important; margin: 0 !important; padding: 4px 10px; border-radius: 8px; background: #fff; color: rgba(0, 0, 0, .72); box-shadow: 0 4px 16px rgba(0, 0, 0, .16); font-size: .8rem; font-weight: 500; line-height: 1.4; white-space: nowrap; opacity: 0; pointer-events: none; z-index: 30; transition: opacity .2s ease !important; } .sv-header-contacts > a:hover .contact-reveal, .sv-header-contacts > a:focus-visible .contact-reveal, .sv-util:hover .contact-reveal, .sv-util:focus-visible .contact-reveal { opacity: 1; } /* /tours (tursrail.js гради свое заглавје): истата мерка како React заглавјето — контакти 16px растојание, 12.8px текст, „Savana Travel" 32px градиент. Само CSS. */ .svtour-header .svtour-header-inner { padding: 12px 24px !important; gap: 12px !important; } .svtour-header .sv-header-contacts { gap: 12px !important; } .svtour-header .sv-header-contacts > a { font-size: .8rem !important; color: rgba(0, 0, 0, .72) !important; } .svtour-header .sv-header-contacts > a > svg { color: var(--brand-accent, #ff7900); width: 17px !important; height: 17px !important; } /* Телефон и е-пошта имаат икона → како во живото само икона (текстот останува за читачи на екран). */ .svtour-header .sv-header-contacts > a[href^="tel:"], .svtour-header .sv-header-contacts > a[href^="mailto:"] { font-size: 0 !important; gap: 0 !important; } .svtour-header .svtour-homepage { min-height: 32px !important; padding: 4px 20px !important; border-radius: 10px !important; font-size: .8rem !important; font-weight: 600 !important; background: linear-gradient(135deg, #ff953d 0%, #ff7300 50%, #ff953d 100%) !important; color: rgba(0, 0, 0, .87) !important; box-shadow: 0 2px 12px rgba(194, 87, 0, .3) !important; } /* Focus: #b34700 е 5.5:1 на бело; брендовиот портокал #ff7900 е само 2.6:1 (WCAG 1.4.11). */ .sv-util:focus-visible, .sv-header-navigation > a:focus-visible, .sv-nav-more-btn:focus-visible, .sv-contact-drawer button:focus-visible, .sv-contact-drawer a:focus-visible { outline: 2px solid #b34700; outline-offset: 3px; } /* ── Едноставниот панел (ревизија 4): наслов, затвори, големи редови ─────── */ .sv-contact-drawer { box-sizing: border-box; position: fixed; inset: 0 0 0 auto; margin: 0; padding: 24px; width: min(440px, 100%); max-width: 100vw; height: 100%; height: 100dvh; max-height: 100dvh; border: 0; background: #fff; color: #1f2328; font-family: inherit; box-shadow: -16px 0 60px #0000001a; overflow-y: auto; overscroll-behavior: contain; } .sv-contact-drawer[open] { animation: sv-drawer-enter .2s ease-out; } .sv-contact-drawer::backdrop { background: #17171766; } .sv-drawer-head { position: sticky; top: -24px; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: -24px -24px 20px; padding: 24px 24px 12px; background: #fff; } .sv-drawer-head h2 { margin: 0; font-size: 24px; font-weight: 750; letter-spacing: -.3px; } .sv-drawer-close { flex: 0 0 48px; width: 48px; height: 48px; border: 1px solid #e6e6e6; border-radius: 50%; color: #333; background: #fff; cursor: pointer; font: 28px/1 Arial, sans-serif; } .sv-drawer-close:hover { background: #f5f5f5; } .sv-drawer-links, .sv-drawer-part { display: flex; flex-direction: column; gap: 10px; } .sv-drawer-part + .sv-drawer-part { margin-top: 14px; padding-top: 18px; border-top: 1px solid #eeeeee; } .sv-drawer-part-title { margin: 0 0 2px; color: #5b6068; font-size: 14px; font-weight: 700; } .sv-drawer-link { display: flex; align-items: center; gap: 14px; width: 100%; box-sizing: border-box; min-height: 60px; padding: 14px 16px; border: 1px solid #e8e8e8; border-radius: 14px; background: #fff; color: inherit; font: inherit; text-align: left; text-decoration: none; cursor: pointer; } .sv-drawer-link:hover:not(:disabled) { border-color: #ff7900; background: #fffaf6; } .sv-drawer-link:disabled { cursor: not-allowed; opacity: .6; } .sv-drawer-link[aria-current="true"], .sv-drawer-link[aria-current="page"] { border-color: #ff9a4d; background: #fff5ec; } .sv-drawer-link[aria-current="page"] strong { color: #b34700; } .sv-drawer-icon { display: flex; align-items: center; justify-content: center; flex: 0 0 40px; width: 40px; height: 40px; border-radius: 12px; background: #fff1e5; color: #ff7900; } .sv-drawer-icon svg { width: 21px; height: 21px; fill: currentColor; } .sv-drawer-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; overflow-wrap: anywhere; } .sv-drawer-text strong { font-size: 17px; font-weight: 650; } .sv-drawer-text > span { color: #5b6068; font-size: 14px; } .sv-drawer-badge { flex: 0 0 auto; padding: 4px 10px; border-radius: 999px; background: #ffe3cc; color: #8a3a00; font-size: 14px; font-weight: 700; } .sv-drawer-note, .sv-drawer-empty { margin: 4px 2px 0; color: #5b6068; font-size: 14px; line-height: 1.45; } .sv-drawer-error { margin: 4px 2px 0; color: #b42318; font-size: 14px; line-height: 1.45; } @keyframes sv-drawer-enter { from { transform: translateX(100%); } to { transform: translateX(0); } } /* ── Телефон (<768px): лого лево, „Мени" десно, лента со производи под нив ── Живото на 390px има 219px заглавје (икони, лого, мени во три реда); LAB ја задржува компактната лента (≈120px) — мобилно прво. Сè друго е во „Мени". */ @media (max-width: 767px) { .sv-compact-header { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px !important; padding: 10px 14px !important; } .sv-compact-header > .sv-header-brand { grid-column: 1; grid-row: 1; justify-self: start; } .sv-compact-header > .sv-header-actions { grid-column: 2; grid-row: 1; width: auto; margin: 0; padding: 0 !important; border: 0 !important; gap: 10px !important; } .sv-header-drawers { gap: 10px; } /* Видливи само „Контакт" и „Мени"; чипот, сметката и „Savana Travel" се во „Мени" (Јазик / Валута / Моја сметка / ред Savana Travel). */ .sv-header-drawers > .sv-util:not(.sv-util-menu):not(.sv-util-contact), .sv-util-sep { display: none; } .sv-header-actions > a { display: none !important; } /* „Savana Travel" → ред во „Мени" (6.1: <768, не само ≤640) */ /* Popover-от како лист под заглавјето, од раб до раб (12px). */ .sv-reach { left: 12px !important; right: 12px; width: auto; max-width: none; transform: none; } /* „Мени" во стилот на „Savana Travel" копчето од живото (градиент, радиус 10, 32px). */ .sv-util-menu { display: inline-flex; gap: 6px; min-height: 32px; padding: 4px 14px; border-radius: 10px; background: linear-gradient(135deg, #ff953d 0%, #ff7300 50%, #ff953d 100%); color: rgba(0, 0, 0, .87); box-shadow: 0 2px 12px rgba(194, 87, 0, .3); font-size: .8rem; font-weight: 600; line-height: 1.75; } .sv-util-menu > svg { width: 18px; height: 18px; color: inherit; } .sv-util-menu:hover > svg { transform: none; color: inherit; } .sv-nav-more-wrap { display: none !important; } /* Производи: една лента што се лизга настрана (страницата никогаш), избледена десно додека има уште. drawer.js става sv-nav-fits / sv-nav-overflow / sv-nav-at-end. */ .sv-header-navigation { grid-column: 1 / -1; grid-row: 2; min-width: 0; max-width: 100%; justify-content: flex-start !important; gap: 0 20px !important; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .sv-header-navigation::-webkit-scrollbar { display: none; } .sv-header-navigation > a { flex: 0 0 auto; min-height: 44px !important; font-size: .82rem !important; } .sv-header-navigation.sv-nav-fits { justify-content: center !important; justify-content: safe center !important; } .sv-header-navigation > a:focus-visible { outline-offset: -3px; } .sv-header-navigation.sv-nav-overflow:not(.sv-nav-at-end) { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent); } .sv-header-actions > a { min-height: 32px !important; box-sizing: border-box; } } /* 768–1039px: десната група паѓа во втор ред (како во живото на 768) — десно, не лево. */ @media (min-width: 768px) and (max-width: 1039px) { .sv-compact-header > .sv-header-actions { margin-left: auto; } } @media (max-width: 640px) { .sv-compact-header > .sv-header-brand { display: flex; align-items: center; justify-content: flex-start !important; width: 128px !important; max-width: 128px; min-height: 44px; padding: 0 !important; margin: 0; border-bottom: 0 !important; } .sv-compact-header > .sv-header-brand img { width: 128px !important; max-width: 128px !important; height: 46px !important; object-fit: contain; } .sv-header-navigation { gap: 0 16px !important; } .sv-contact-drawer { padding: 18px; padding-bottom: max(18px, env(safe-area-inset-bottom)); } .sv-drawer-head { top: -18px; margin: -18px -18px 16px; padding: 18px 18px 10px; } } /* ≤360px: „Контакт" само икона (34×32), за лого + пил + „Мени" да собираат во 320px (мерено 12.09). */ @media (max-width: 360px) { .sv-util-contact > span { display: none; } .sv-util.sv-util-contact { padding: 4px 8px; } } @media (prefers-reduced-motion: reduce) { .sv-contact-drawer[open] { animation: none; } .sv-nav-more-btn > svg, .sv-util > svg, .sv-util.sv-pill, .sv-util.sv-chip, .sv-social, .sv-footer a { transition: none; } } /* ── Полето „Валута" во пребарувачот: како во живото ─────────────────────── LAB bundle-от го крие штом постои window.svCurrency (валутата беше само во заглавјето). Живото го има во картичката → пак видливо; currency.js го пренесува изборот од полето во заедничката валута. */ [data-sv-search-currency="1"] { display: block !important; } /* ── LAB почетна: ред и мерка на банерите (12.09.2026) ───────────────────── Живото: наслов → пребарувач → дестинации. LAB додатоците (банер „ЛЕТО 2026", понуди од wl-widgeti, „Последни места") одат ПОД дестинациите, во мерка на дестинациска картичка (радиус 20, ~200px, без 16px внатрешен раб). Редот од wl-widgeti (управувана почетна, widgets.js) се надјачува само за овие блокови — тргни ги овие редови и се враќа админскиот ред. Ништо не се крие. */ /* Специфичност 0,3,0: widgets.js вметнува свој