/* ========================================================================== QEMOSA redesign - HEADER LAYER Author: TEDBG - https://tedbg.com Loaded after Journal's generated CSS, so it wins at equal specificity. Owns: the marquee bar above the header (Header Notice 56 -> marquee 518) and the mobile (hamburger) menu typography. ========================================================================== */ /* ----- 1. Marquee bar above the header (client note 42) ------------------- Journal renders it as Header Notice 56 in "grid" mode with the marquee module 518 as its only item, which puts it above .global-wrapper - the same spot as on the reference site. The texts themselves are editable in the admin under Modules -> Marquee -> "Горна лента - Marquee". */ html body .module-header_notice-56 { background-color: var(--qr-footer-bg) !important; padding: 0 !important; border: 0 !important; } html body .module-header_notice-56 .hn-body, html body .module-header_notice-56 .hn-content, html body .module-header_notice-56 .grid-rows, html body .module-header_notice-56 .grid-row, html body .module-header_notice-56 .grid-cols-wrapper, html body .module-header_notice-56 .grid-cols, html body .module-header_notice-56 .grid-col, html body .module-header_notice-56 .grid-items, html body .module-header_notice-56 .grid-item { padding: 0 !important; margin: 0 !important; max-width: none !important; width: 100% !important; background: none !important; border: 0 !important; } html body .module-marquee-518 { width: 100% !important; background: none !important; } html body .module-marquee-518 .marquee-slider { padding: 10px 0 !important; } /* One weight, one size, everywhere - the bar reads as a single quiet line. */ html body .module-marquee-518 .module-item { --item-gap: 26px; text-decoration: none !important; } html body .module-marquee-518 .module-item > span { font-family: var(--qr-font) !important; font-weight: var(--qr-w-medium) !important; font-size: 11px !important; line-height: 1.2 !important; letter-spacing: .14em !important; text-transform: uppercase !important; color: #ffffff !important; white-space: nowrap !important; } /* Separator between the texts. Drawn as a dot rather than typed as a character so it never depends on the icon font being present. */ html body .module-marquee-518 .module-item::after { content: "" !important; display: inline-block !important; width: 4px !important; height: 4px !important; border-radius: 50% !important; background-color: rgba(255, 255, 255, .45) !important; margin: 0 0 0 26px !important; vertical-align: middle !important; } @media (max-width: 767px) { html body .module-marquee-518 .marquee-slider { padding: 8px 0 !important; } html body .module-marquee-518 .module-item > span { font-size: 10px !important; letter-spacing: .12em !important; } html body .module-marquee-518 .module-item { --item-gap: 20px; } html body .module-marquee-518 .module-item::after { margin-left: 20px !important; } } /* ----- 2. Мобилно меню (хамбургер) - бележка на клиента 40 ---------------- Шрифтът вече беше Helvetica Neue, но линковете стояха с малки букви и с маслинено зелен OUTLET от старата палитра. Сега са с главни букви, леко разредени и в цветовете на новия дизайн, за да съвпадат с футъра и заглавията на секциите. */ html body .mobile-main-menu-wrapper .main-menu > ul > li > a > .links-text, html body .mobile-main-menu-wrapper .main-menu > ul > li > a { font-family: var(--qr-font) !important; font-weight: var(--qr-w-bold) !important; font-size: 15px !important; line-height: 1.35 !important; letter-spacing: .06em !important; text-transform: uppercase !important; color: var(--qr-ink) !important; } /* OUTLET беше единственият зелен надпис (стария "Accent 6"). Цветът му се сменя в настройките на меню модул 219, а не тук - Journal генерира за него правило с ID селектор, което бие всеки CSS override отвън. */ /* Второто ниво остава по-леко, но също с главни букви и същия шрифт. */ html body .mobile-main-menu-wrapper .main-menu ul ul li > a > .links-text, html body .mobile-main-menu-wrapper .main-menu ul ul li > a { font-family: var(--qr-font) !important; font-weight: var(--qr-w-regular) !important; font-size: 13px !important; letter-spacing: .05em !important; text-transform: uppercase !important; color: var(--qr-ink) !important; } /* Заглавието на панела (езикът) и бутонът за затваряне в същия ритъм. */ html body .mobile-container.mobile-main-menu-container .mobile-wrapper-header span, html body .mobile-container.mobile-main-menu-container .mobile-wrapper-header a { font-family: var(--qr-font) !important; font-weight: var(--qr-w-medium) !important; letter-spacing: .06em !important; text-transform: uppercase !important; } /* ----- 3. Панелът на мобилното меню - прозрачност при скролване ----------- Journal дава на .mobile-container "position: fixed; height: 100%". На телефон 100% се мери спрямо малкия viewport (с показана адресна лента на браузъра). Щом менюто се доскролва до края, скролът се предава на страницата отзад, лентата на браузъра се прибира, видимата площ става по-висока от панела и отдолу лъсва сайтът - точно "прозрачността" при размерите. Двете части на фикса: - 100dvh вместо 100% - височината следва прибирането на лентата; - overscroll-behavior: contain - скролът изобщо не изтича към страницата, така че лентата не мърда. Важи за всички плъзгащи панели (меню, количка, филтри). */ html body .mobile-container { height: 100vh; height: 100dvh; min-height: 100%; overscroll-behavior: contain; background-color: #ffffff; } /* ----- 4. Симетрични плочки на размерите в мобилното меню ------------------ Модулите с размери (481 обувки мъже, 515 дрехи мъже, 491 и 514 - жени) са решетка "repeat(3, 0.2fr)" с justify-content: flex-start. Сборът на fr- единиците е под 1, затова колоните излизат фиксирани ~71px и целият блок се сбива вляво, а вдясно остава 127px празно под центрирано заглавие. Тук колоните стават три равни части от ширината на панела. */ html body .mobile-container .mega-menu-content { padding-left: 13px !important; padding-right: 13px !important; } html body .mobile-container .links-menu-481 .module-body, html body .mobile-container .links-menu-491 .module-body, html body .mobile-container .links-menu-514 .module-body, html body .mobile-container .links-menu-515 .module-body { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; justify-content: stretch !important; justify-items: stretch !important; gap: 10px !important; /* На таблет панелът е широк над 700px и три равни колони правят плочки от по 234px за "XS". Затова решетката е ограничена и центрирана - под ~470px тя пълни ширината и стои симетрично спрямо ръбовете на панела. */ width: auto !important; max-width: 420px !important; margin-left: auto !important; margin-right: auto !important; } /* Плочката е в flex
  • . Journal ѝ дава width: 100% И margin: 2px, заради което тя стърчи 4px извън клетката - при равни колони това вече се вижда. Разстоянието идва от gap-а на решетката, не от margin. */ html body .mobile-container .links-menu-481 .module-body > li, html body .mobile-container .links-menu-491 .module-body > li, html body .mobile-container .links-menu-514 .module-body > li, html body .mobile-container .links-menu-515 .module-body > li { width: auto !important; margin: 0 !important; align-items: stretch !important; } html body .mobile-container .links-menu-481 .module-body > li > a, html body .mobile-container .links-menu-491 .module-body > li > a, html body .mobile-container .links-menu-514 .module-body > li > a, html body .mobile-container .links-menu-515 .module-body > li > a { display: flex !important; flex: 1 1 auto !important; width: auto !important; margin: 0 !important; padding: 8px 4px !important; min-height: 46px !important; align-items: center !important; justify-content: center !important; text-align: center !important; }