/* ============================================================ ORCN bendra meniu juosta — .orcn-menu ------------------------------------------------------------ Vienas komponentas visiems trims projektams: color-register.org (color-new/inc/site-header.php) color-register.org/color/ ir /list/ store.color-register.org (store-new/app/Views/layouts/store_layout.php) SALTINIS: color-new/assets/css/orcn-menu.css KOPIJA: store-new/public/assets/css/orcn-menu.css (kitas serveris) Kopijas lygina php color-new/tools/menu-sync-check.php (md5). Etalonas — buves color-register.org Gridlove header'is: fonas #ffffff · tekstas #111111 · hover/aktyvus #0072C6 Cabin 700 14px didziosiomis · logotipas ORCN_logo_h44_pos.png Jokio Bootstrap ir jokio Popper'io: dropdown'ai desktop'e — gryna CSS (:hover + :focus-within), mobiliame —

-tipo klase per maza JS. Butent Popper'io trukumas 2026-08-06 buvo palikes /color/ ir /list/ dropdown'us visai neveikiancius. ============================================================ */ :root { --orcn-menu-bg: #ffffff; --orcn-menu-fg: #111111; --orcn-menu-acc: #0072C6; /* 4,97:1 ant balto (WCAG AA) */ --orcn-menu-h: 46px; /* juostos auksis: 32px logo + 2x7px */ --orcn-menu-logo-h: 32px; } /* --- juosta ------------------------------------------------ */ .orcn-menu { position: fixed; top: 0; left: 0; right: 0; z-index: 1030; min-height: var(--orcn-menu-h); background-color: var(--orcn-menu-bg); color: var(--orcn-menu-fg); display: flex; align-items: center; padding: 0 12px; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); border-bottom: 1px solid rgba(17, 17, 17, .07); font-family: 'Cabin', sans-serif; box-sizing: border-box; } .orcn-menu *, .orcn-menu *::before, .orcn-menu *::after { box-sizing: border-box; } /* Turinio kompensacija: juosta yra fixed, tad be sito po ja dingtu pirmas ekrano gabalas. Klase kabinama ant . */ /* +1px — apatinis juostos remelis eina uz min-height ribu. */ body.has-orcn-menu { padding-top: calc(var(--orcn-menu-h) + 1px); } /* MOBILIAME JUOSTA AUKSTESNE, ir tai lengva praziureti. Hamburgerio mygtukas turi min-height:44px (WCAG 2.5.5 lietimo taikinys) — jis aukštesnis uz 32px logotipa, todel juosta issitempia iki 59px, o kompensacija liko 47px. Rezultatas: 12px teksto amzinai po juosta. Rista prie to paties 991px slenkscio, kur atsiranda hamburgeris. */ @media (max-width: 991px) { body.has-orcn-menu { padding-top: 60px; } } /* --- logotipas --------------------------------------------- */ .orcn-menu__brand { display: flex; align-items: center; justify-content: space-between; padding: 7px 8px; flex: 0 0 auto; } /* Logotipo nuoroda neima bendro punktu padding'o — kitaip juosta isauga iki 58px (32px logo + 2x6px nuorodos + 2x7px juostos). Selektorius su dviem klasemis salyginai, nes `.orcn-menu a` (zemiau) turi toki pati svori ir, budamas veliau faile, laimetu. */ .orcn-menu .orcn-menu__brand > a { padding: 0; } .orcn-menu__logo { height: var(--orcn-menu-logo-h); /* BUTINA width:auto — turi width="264" atributa; be sito height:32px + atributo plotis duotu iskraipyta 264x32. */ width: auto; display: block; } /* --- punktai ------------------------------------------------ */ .orcn-menu__items { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; flex: 1 1 auto; flex-wrap: wrap; } .orcn-menu__items > li { position: relative; display: flex; align-items: center; } .orcn-menu a { display: flex; align-items: center; color: var(--orcn-menu-fg); text-decoration: none; padding: 6px 12px; font-weight: 700; font-size: 14px; line-height: 1.2; text-transform: uppercase; white-space: nowrap; transition: color .2s, background-color .2s; } .orcn-menu a:hover, .orcn-menu a:focus-visible { color: var(--orcn-menu-acc); background-color: rgba(17, 17, 17, .05); } /* Aktyvus punktas. Buvusiame Gridlove/Bootstrap variante aktyvus punktas buvo baltas tekstas ant pilkos (#6E6E6E) — cia uztenka melynos + rusva apacios linija, kontrastas 4,97:1, spalva ne vienintelis skirtukas. */ .orcn-menu .is-active > a { color: var(--orcn-menu-acc); box-shadow: inset 0 -3px 0 var(--orcn-menu-acc); } /* --- submeniu ----------------------------------------------- */ .orcn-menu__sub { display: none; position: absolute; top: 100%; left: 0; min-width: 220px; margin: 0; padding: 0; list-style: none; background-color: var(--orcn-menu-bg); border-top: 1px solid rgba(17, 17, 17, .05); box-shadow: 0 8px 16px rgba(0, 0, 0, .15); z-index: 1031; } .orcn-menu__items > li:hover > .orcn-menu__sub, .orcn-menu__items > li:focus-within > .orcn-menu__sub { display: block; } .orcn-menu__sub a { width: 100%; padding: 9px 15px; /* Registro submeniu niekada nebuvo didziosiomis */ text-transform: none; font-weight: 400; white-space: normal; } /* Rodykle prie punkto su submeniu */ .orcn-menu__caret { margin-left: 6px; font-size: 10px; line-height: 1; } /* --- papildomas lizdas (store krepselis) --------------------- */ .orcn-menu__extra { margin-left: auto; display: flex; align-items: center; flex: 0 0 auto; } .orcn-menu__extra svg { stroke: var(--orcn-menu-fg); } .orcn-menu__badge { position: absolute; top: 2px; right: 2px; background-color: #C62828; /* 5,4:1 su baltu tekstu */ color: #fff; font-size: 10px; padding: 2px 5px; border-radius: 50%; min-width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; } /* --- mobilus ------------------------------------------------ */ .orcn-menu__toggle { display: none; background: none; border: 0; color: var(--orcn-menu-fg); font-size: 22px; line-height: 1; cursor: pointer; /* 44x44 — minimalus lietimo taikinys (WCAG 2.5.5) */ min-width: 44px; min-height: 44px; padding: 0; } .orcn-menu__toggle:hover { color: var(--orcn-menu-acc); } @media (max-width: 991px) { .orcn-menu { flex-direction: column; align-items: stretch; padding: 0; } .orcn-menu__brand { width: 100%; padding: 7px 12px; } .orcn-menu__toggle { display: block; } .orcn-menu__items { display: none; flex-direction: column; align-items: stretch; width: 100%; max-height: calc(100vh - var(--orcn-menu-h)); overflow-y: auto; border-top: 1px solid rgba(17, 17, 17, .07); } .orcn-menu__items.is-open { display: flex; } .orcn-menu__items > li { display: block; width: 100%; } .orcn-menu a { padding: 12px 16px; font-size: 15px; } /* Mobiliame submeniu visada isskleistas — hover'io nera, o dviguba lieciamoji logika (spusteliu tevui, kad atsidarytu) sulaužytu nuoroda i pati puslapi. */ .orcn-menu__sub { display: block; position: static; box-shadow: none; border-top: 0; min-width: 0; } .orcn-menu__sub a { padding-left: 32px; font-size: 14px; } .orcn-menu__caret { display: none; } /* Krepselis (store) — absoliuciai, logotipo eiluteje kaireje nuo hamburgerio. Iki tol jis buvo atskiras flex vaikas ir mobiliame uzimdavo VISA antra eilute: juosta tapdavo ~106px, o kompensacija liko 47px, tad puslapio virsus dingdavo po ja. Absoliutus pozicionavimas aukscio neprideda, o `top` fiksuotas — kad issiskleidus meniu krepselis neliktu centre. right:56px = 44px mygtukas + tarpas. */ .orcn-menu__extra { position: absolute; top: 8px; right: 56px; margin: 0; padding: 0; } .orcn-menu__extra a { padding: 6px 8px; } }