/* * Bio-Science – Joomla 6 sablon: szerkezet és komponensek. * A színek, betűk, méretek a téma tokenjeiből jönnek (themes//tokens.css), * a téma-specifikus díszítések (ikonképek, színátmenetek) a themes//theme.css-ben vannak. * Rétegek: reset → tokens → base → layout → components → responsive → theme → utilities * Alap: az anamed-sablon (IntelliMed, 2026) szerkezete, a bio-science.hu mostani megjelenésére igazítva. */ @layer reset, tokens, base, layout, components, responsive, theme, content, utilities; /* ========================================================================== reset */ @layer reset { *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body, h1, h2, h3, h4, p, ul, ol, figure { margin: 0; } ul, ol { padding: 0; list-style: none; } img { max-width: 100%; height: auto; vertical-align: middle; border: 0; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } iframe { border: 0; max-width: 100%; } } /* ========================================================================== base */ @layer base { :root { --icon-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='192 192 1408 1408'%3E%3Cpath d='M1600 736v192q0 40-28 68t-68 28h-416v416q0 40-28 68t-68 28h-192q-40 0-68-28t-28-68v-416h-416q-40 0-68-28t-28-68v-192q0-40 28-68t68-28h416v-416q0-40 28-68t68-28h192q40 0 68 28t28 68v416h416q40 0 68 28t28 68z'/%3E%3C/svg%3E"); --icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='192 192 1408 1408'%3E%3Cpath d='M1600 736v192q0 40-28 68t-68 28h-1216q-40 0-68-28t-28-68v-192q0-40 28-68t68-28h1216q40 0 68 28t28 68z'/%3E%3C/svg%3E"); } body { font-family: var(--font-base); font-size: var(--fs-base); line-height: var(--lh-base); color: var(--c-text); background: var(--c-white); } a { color: var(--c-brand-strong); text-decoration: none; transition: var(--t-fast); } a:hover { color: var(--c-brand); text-decoration: underline; } :focus-visible { outline: 2px solid var(--c-brand-mid); outline-offset: 2px; } h1, h2, h3, h4 { font-weight: 700; line-height: 1.2; } h3 { color: var(--c-brand-strong); } p { margin: 5px 0; } ::selection { background: var(--c-brand-strong); color: #fff; } .visually-hidden, .element-invisible { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 2000; padding: 8px 14px; background: var(--c-brand); color: #fff; } .skip-link:focus { left: 10px; } } /* ========================================================================== layout */ @layer layout { .container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); } /* --- Fejléc: három egyforma oszlop (élőn: Bootstrap-sor -30 px margóval, oszloponként 30 px bal belső margó) ------ balra Főoldal / Hírlevél, középen a logó (balra zárva az oszlopban), jobbra elérhetőségek + kereső */ .site-header { position: relative; z-index: 100; } /* a fejléc keresőjének javaslatlistája (awesomplete) a menüsor (z 500) fölé kerüljön, amíg nyitva van */ .site-header:has(.awesomplete > ul:not([hidden])) { z-index: 600; } .site-header .awesomplete > ul { z-index: 10; } .site-header__barwrap { height: var(--header-h); overflow: hidden; } .site-header__bar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; width: calc(100% + 30px); margin-left: -30px; height: 100%; } .site-header__bar > * { padding-left: 30px; } .site-header__left { text-align: left; } .site-brand { min-width: 0; } .site-brand__link { display: block; } .site-brand__logo { display: block; width: auto; max-width: 100%; height: auto; } .site-header__right { min-width: 0; text-align: left; } .site-header__info { overflow: hidden; } .site-header__search { width: 100%; max-width: 328px; margin-top: 10px; } /* --- Főmenü ------------------------------------------------------------ */ .site-nav { position: relative; z-index: 500; border-bottom: 2px solid var(--c-brand); text-align: center; } .site-nav__inner { max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); min-height: calc(var(--nav-h) - 2px); } .site-nav__head, .nav-toggle, .nav-backdrop, .nav-tools { display: none; } /* --- Nyitólap: Workflow-k sáv ----------------------------------------- */ .home-top { display: flow-root; border-bottom: 2px solid var(--c-workflow-line); } /* --- Banner (slider sáv) ------------------------------------------------ */ .site-banner { padding: 26px 0 27px; border-bottom: 1px solid var(--c-brand-band-line); background: var(--c-brand-band); } .site-banner__inner { width: calc(var(--banner-w) + 12px); max-width: 100%; margin-inline: auto; padding: 6px; background: var(--c-white); } /* --- Nyitólap: Kategória választó + Termékajánló ------------------------- */ .home-showcase { border-bottom: 1px solid var(--c-surface-line); background: linear-gradient(var(--c-white) 0 48px, var(--c-line) 48px 50px, var(--c-surface-2) 50px); } .home-showcase__inner { display: grid; grid-template-columns: minmax(0, 1fr) 256px; column-gap: 0; max-width: var(--container); margin-inline: auto; padding-inline: 0 22px; } .home-showcase__main { min-width: 0; } .home-showcase__side { min-width: 0; } /* --- Belső oldalak ------------------------------------------------------ */ .site-main-wrap { padding: 25px 0 30px; } .is-home .site-main-wrap { padding: 8px 0 60px; } /* élőn: #jm-maincontent 30 + #jm-main-wrapper 30 alsó térköz */ .site-main-box { max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); } .site-grid { display: grid; grid-template-columns: minmax(0, 1fr); } .has-left .site-grid { grid-template-columns: var(--side-w) minmax(0, 1fr); column-gap: 26px; } .has-right .site-grid { grid-template-columns: minmax(0, var(--content-w)) var(--side-w); column-gap: 26px; justify-content: space-between; } .has-left.has-right .site-grid { grid-template-columns: var(--side-w) minmax(0, 1fr) var(--side-w); } .site-main { min-width: 0; } /* élőn: #jm-maincontent alsó margója (30 px) a #jm-main-wrapper 30 px-es alsó belső margója fölött */ /* a fő hasáb alatti 30 px a hasáb utolsó elemének alsó margója: így a tartalom utolsó elemének (pl. bekezdés, vonal) kisebb margója beleolvad, mint a régi oldalon (ott a #jm-maincontent margójába olvadt) */ .is-inner .site-main > :last-child { margin-bottom: 30px; } /* élőn: #jm-main-in max. 1218 px oldalmargó nélkül; a tartalom 980 px, a jobb oszlop 212 px a jobb szélen */ .is-inner .site-main-box { max-width: var(--container); padding-inline: 0; } /* --- Nyitólap: hírek két oszlopban ------------------------------------ */ /* élőn a fő tartalom tárolója max. 1218 px, oldalmargó nélkül; a hírek hasábja 980 px (1280 px alatt: tároló − 260 px, 15 px belső margóval) */ .is-home .site-main-box { max-width: var(--container); padding-inline: 0; } .home-news { max-width: 980px; } /* --- Lábléc ------------------------------------------------------------ */ .footer-main__inner { display: grid; grid-template-columns: 20% 60% 20%; align-items: start; } .footer-main__left, .footer-main__center, .footer-main__right { text-align: center; } .footer-main__right { padding-top: 25px; } .footer-bottom__inner { position: relative; } } /* ========================================================================== components */ @layer components { /* --- Fejléc: ikonos linkek (Egyéni modul: .head-links; élőn .headleft) ------------ */ .head-links { display: flow-root; text-align: left; } .head-link { display: inline-block; height: 55px; margin-right: 15px; font-size: 17px; line-height: 26px; color: var(--c-brand-mid); } .head-links:not(.head-links--row) .head-link { display: block; width: max-content; margin: 0; } .head-links:not(.head-links--row) .head-link + .head-link { margin-top: 0; } .head-links--row .head-link { float: left; margin-right: 8px; } .head-link:hover { color: var(--c-brand); text-decoration: none; } .head-link__icon { position: relative; top: 15px; display: inline-block; width: 40px; height: 40px; margin-right: 10px; border-radius: 5px; background-repeat: no-repeat; background-position: 0 0; } .head-link:hover .head-link__icon { background-position: 0 -40px; } .head-link--linkedin { padding-top: 18px; line-height: 1; } .head-link--linkedin img { display: block; width: 36px; height: auto; } /* --- Fejléc: kereső (Smart Search modul) ------------------------------ */ .site-header__search form { position: relative; margin: 0; } .site-header__search .input-group { display: block !important; position: relative; } .site-header__search label.finder, .site-header__search .finder { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .site-header__search input[type="text"], .site-header__search input[type="search"] { display: block; width: 318px !important; max-width: 100%; height: 40px; padding: 0 44px 0 12px; border: 1px solid var(--c-brand-border); border-radius: 5px; background: var(--c-white); font-size: 17px; line-height: 38px; font-weight: 300; color: var(--c-brand-mid); } .site-header__search input::placeholder { color: var(--c-brand-mid); opacity: 1; } .site-header__search input:focus { outline: none; border-color: var(--c-brand-mid); color: var(--c-brand); } .site-header__search .btn, .site-header__search button { position: absolute; right: 13px; top: 3px; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 0; font-size: 0; color: transparent; background-color: transparent; background-repeat: no-repeat; background-position: 0 0; } .site-header__search button > span { display: none; } .site-header__search .btn:hover, .site-header__search button:hover { background-position: 0 100%; } /* --- Főmenü ------------------------------------------------------------ */ .main-menu { display: flex; flex-wrap: wrap; justify-content: flex-start; text-align: left; position: relative; z-index: 500; } /* élőn balra zárt (lebegő menüpontok) */ .main-menu > li { position: relative; margin: 0 -1px 0 0; top: 3px; } .main-menu > li > a, .main-menu > li > .mod-menu__heading, .main-menu > li > .mod-menu__separator { display: block; height: 54px; padding: 1px 15px; border-top: 2px solid transparent; border-inline: 1px solid transparent; text-decoration: none; } .main-menu > li > a > .menu__label, .main-menu > li > .mod-menu__heading > .menu__label, .main-menu > li > .mod-menu__separator > .menu__label { display: block; height: 52px; font-family: var(--font-cond); font-size: 19px; font-weight: 700; line-height: 52px; letter-spacing: 1px; color: var(--c-nav); text-transform: uppercase; cursor: pointer; transition: var(--t-fast); } .main-menu > li > .mod-menu__heading > .menu__label { cursor: default; } /* Nyitott állapot: egérrel a sablon JS-e adja (is-hover: azonnal nyit, 0,5 s késéssel zár – mint az élő djMegaMenu), JavaScript nélkül :hover; billentyűzettel a látható fókusz (:focus-visible). Egérkattintás utáni fókusz NEM tartja nyitva. */ /* a felirat csak magán a fejlécen (rámutatás / billentyűfókusz) kék – a lenyílóba lépve visszaszürkül, mint az élőn */ .main-menu > li > :is(a, span):is(:hover, :focus-visible) > .menu__label, .main-menu > li.active > a > .menu__label, .main-menu > li.active > span > .menu__label { color: var(--c-brand); } .main-menu:not(.is-js) > li:is(.parent, .nav-mega):hover > :is(a, span), .main-menu > li:is(.parent, .nav-mega).is-hover > :is(a, span), .main-menu > li:is(.parent, .nav-mega):has(:focus-visible) > :is(a, span) { border-top-color: #84a2d3; border-inline-color: var(--c-line-hover); background: var(--c-white); } .main-menu:not(.is-js) > li:hover, .main-menu > li.is-hover { z-index: 200; } /* az élő oldalon a menü első pontja (Kezdőlap-ikon) rejtett */ .main-menu > li.nav-hidden { display: none; } .menu__toggle { display: none; } /* Lenyíló almenü (asztali nézet; mobilon a responsive réteg panelja) – az élő djMegaMenu szerint: 217 px széles fehér doboz szürke kerettel, kék, nagy, keskeny betűs menüpontok szürke elválasztóval; a 3. szint jobbra nyíló oldalpanel. Megjelenés: 0,2 s alatt felülről beúszva (élőn „fadeInDown”). */ @media (min-width: 971px) { .main-menu .menu__sub { position: absolute; top: 53px; left: -2px; z-index: 300; width: 221px; border: 2px solid var(--c-white); border-top: 0; visibility: hidden; opacity: 0; transform: translateY(-20px); transition: opacity .2s, transform .2s, visibility 0s linear .2s; } .main-menu:not(.is-js) li:hover > .menu__sub, .main-menu li.is-hover > .menu__sub, .main-menu li:has(:focus-visible) > .menu__sub, .main-menu li.is-open > .menu__sub { visibility: visible; opacity: 1; transform: none; transition: opacity .2s, transform .2s, visibility 0s; } .main-menu .menu__sub-in { margin: 0; padding: 15px 0; border: 1px solid #b3b3b3; border-top: 0; background: var(--c-white); } .main-menu .menu__sub li { position: relative; margin: 0; padding: 2px 15px; } .main-menu .menu__sub li > :is(a, .mod-menu__heading, .mod-menu__separator) { display: block; margin: 0 0 1px; padding: 8px 0; border-bottom: 1px solid #e2e2e2; color: var(--c-brand-mid); font: 300 20px/26px helvetica_bold, var(--font-cond); text-decoration: none; cursor: pointer; transition: var(--t-fast); } .main-menu .menu__sub li:last-child > :is(a, .mod-menu__heading, .mod-menu__separator) { border-bottom: 0; } .main-menu .menu__sub li:is(:hover, .is-hover, .active) > :is(a, .mod-menu__heading, .mod-menu__separator), .main-menu .menu__sub li > :is(a, .mod-menu__heading, .mod-menu__separator):focus-visible { border-bottom-color: var(--c-brand); color: var(--c-brand); text-decoration: none; } /* 3. szint: a menüpont mellett jobbra (9 px-es átlátszó „híd” a két doboz között, hogy az egér átérjen) */ .main-menu .menu__sub .menu__sub { top: -9px; left: 215px; width: 235px; border: 9px solid transparent; border-block: 0; border-bottom: 2px solid var(--c-white); } .main-menu .menu__sub .menu__sub > .menu__sub-in { border: 1px solid #ececec; } /* a jobb szélen túllógó 3. szint a 2. szint bal oldalán (template.js: is-flip) */ .main-menu .menu__sub li.is-flip > .menu__sub { left: -235px; } } .main-menu > li.nav-flat > .menu__sub, .main-menu > li.nav-flat > .menu__toggle { display: none; } /* --- Főmenü: „Termékek” lenyíló („nav-mega” menüpont + a mega-menu pozíció moduljai) – az élő oldal VirtueMart- kategóriamenüje szerint: bal oldalt a csoportok (Workflows-menü, majd a főkategóriák), föléjük húzva jobbra szürke panelen az alpontok két hasábban. Lenyitáskor az „Alapból nyitva” jelölésű kategória (kategóriamező) kiemelve, panelje látszik; bármelyik csoport fölé húzva a kiemelés megszűnik (template.js). Mobilon (≤ 970 px) a kategóriafa. -------- */ .main-menu { position: static; } .main-menu > li.nav-mega > .menu__sub, .main-menu > li.nav-mega > .menu__toggle { display: none; } .mega-mobile { display: none; } @media (min-width: 971px) { .mega { position: absolute; top: 53px; left: -110px; z-index: 300; width: 796px; border: 2px solid var(--c-white); border-top: 0; text-align: left; visibility: hidden; opacity: 0; transform: translateY(-20px); transition: opacity .2s, transform .2s, visibility 0s linear .2s; } .main-menu:not(.is-js) > li.nav-mega:hover > .mega, .main-menu > li.nav-mega.is-hover > .mega, .main-menu > li.nav-mega:has(:focus-visible) > .mega { visibility: visible; opacity: 1; transform: none; transition: opacity .2s, transform .2s, visibility 0s; } .mega__in { position: relative; padding: 8px 0; border: 1px solid #b3b3b3; border-top: 0; background: var(--c-white); } .prod-menu { margin: 0; padding: 0; list-style: none; } .prod-menu__item { width: 222px; height: 50px; margin: 0 0 0 6px; padding: 4px 0 4px 10px; border: 1px solid var(--c-white); border-width: 1px 0 1px 2px; } .prod-menu__link { display: flex; align-items: center; width: 208px; height: 40px; margin: 0; padding: 0; border: 0; background: none; font: 400 17px/18px helvetica_bold, var(--font-cond); color: #6486bd; text-align: left; text-decoration: none; cursor: pointer; } .prod-menu__item:is(:hover, .is-hl, .is-open, :has(:focus-visible)) { border-color: #e2e2e2 #e2e2e2 #e2e2e2 #84a2d3; background: #f4f4f4; } .prod-menu__item:is(:hover, .is-open, :has(:focus-visible)) > .prod-menu__link { color: var(--c-brand); text-decoration: none; } .prod-menu__link:focus-visible { outline-offset: -2px; } /* alpontok: a csoport mellett jobbra, rögzített méretű szürke panel két hasábban (mint az élőn: 556 × 450 px) */ .prod-menu__sub { display: none; position: absolute; top: 8px; left: 227px; z-index: 0; width: 556px; height: 450px; margin: 0; padding: 10px 15px; border: 1px solid #e2e2e2; background: #f4f4f4; list-style: none; column-count: 2; column-gap: 60px; column-rule: 1px dashed #dbdbdb; } .prod-menu__item.is-default > .prod-menu__sub { display: block; } .prod-menu__item:is(:hover, .is-open, :has(:focus-visible)) > .prod-menu__sub { display: block; z-index: 99; } .prod-menu__sub > li { float: left; width: 100%; margin: 0; padding: 0; overflow: hidden; } .prod-menu__sublink { float: left; padding: 6px 9px; border: 1px solid #f4f4f4; font: 700 16px/18px Arial, Helvetica, sans-serif; color: #848484; text-decoration: none; } .prod-menu__sublink:is(:hover, :focus-visible) { border-color: #6287c4; background: #8ba4cd; color: var(--c-white); text-decoration: none; } } /* --- Űrlap (Kapcsolatok „urlap” elrendezés: árajánlat, információ kérés) – a régi „online-askform” szerint ------------- */ .ask-form { container: askform / inline-size; max-width: 728px; margin: 0 auto; color: var(--c-text); font-family: var(--font-base); } .ask-form__title { position: relative; margin: 0 10px 10px; border-bottom: 2px solid var(--c-brand); } .ask-form__title :is(h1, h3) { margin: 0; padding: 16px 80px 12px; font: 400 20px/1.2 var(--font-cond); color: #6486bd; text-align: center; text-transform: uppercase; } .ask-form__product { margin: 0 10px 20px; font-size: 27px; font-weight: 400; line-height: 1.2; color: var(--c-brand); text-align: center; } .ask-form__intro { padding: 0 10px 5px; } .ask-form__outro { margin-top: 30px; } :is(.ask-form__intro, .ask-form__outro) p { margin: 0 0 15px; font-size: .9em; line-height: 1.3; text-align: center; } .ask-form .row { display: flex; flex-wrap: wrap; align-items: flex-start; margin: 0; padding: 6px 0; } .ask-form .row > label, .ask-form .row > .control-label { flex: 0 0 155px; padding: 6px 6px 4px 0; font-size: 18px; line-height: 1.2; color: #848484; text-align: right; transition: color .2s linear; } .ask-form .row > label::after { content: ":"; } .ask-form .row .star { margin: 0; } .ask-form .row:hover > label { color: #6486bd; } .ask-form .row:focus-within > label { color: #000; } .ask-form .row__control { flex: 0 1 556px; min-width: 0; } .ask-form .row input:is([type="text"], [type="email"], [type="tel"], [type="url"]), .ask-form .row textarea { display: block; width: 100%; height: 38px; margin: 0; padding: 0 6px; border: 1px solid #d2d2d2; border-radius: 0; background: #f8f8f8; font-size: 17px; color: var(--c-brand); box-shadow: none; transition: all .2s linear; } .ask-form .row textarea { height: 150px; padding: 6px; resize: none; } .ask-form .row:not(:focus-within):hover :is(input, textarea) { border-color: #8ea9d6; background-color: #f6f9fc; box-shadow: 0 3px 8px 0 rgb(0 0 0 / .1); } .ask-form .row :is(input, textarea):focus { outline: 0; border-color: #84a2d3; background-color: var(--c-white); } .ask-form .row :is(input, textarea).invalid { border-color: #b91919; background-color: var(--c-white); } .ask-form .row:has(.invalid) { background-color: #fed7d7; } /* a Joomla validate.js a „Töltse ki ezt a mezőt” üzenetet a címke BELSEJÉBE szúrja (span.form-control-feedback) – a címkében nem látszik (a sor rózsaszín háttere és a piros keret jelzi, a felső figyelmeztetés mondja ki), de felolvasónak megmarad */ .ask-form .row > label .form-control-feedback { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* üzenet: a címke középen a mező fölött; jelölőnégyzet (hozzájárulás) a mezők oszlopában */ .ask-form .row.textarea, .ask-form .row.checkbox, .ask-form .row--captcha { padding-left: 155px; } .ask-form .row.textarea > label { flex-basis: 100%; padding-right: 0; text-align: center; } .ask-form .row.textarea .row__control { flex-basis: 556px; } .ask-form .row.checkbox { flex-direction: row-reverse; justify-content: flex-end; align-items: flex-start; } .ask-form .row.checkbox > label { flex: 1 1 auto; padding: 4px 0 0; font-size: 15px; line-height: 1.4; color: var(--c-text); text-align: left; } .ask-form .row.checkbox > label::after { content: none; } .ask-form .row.checkbox .row__control { flex: 0 0 auto; margin: 6px 15px 0 0; } /* titulus: választógombok egy sorban */ .ask-form .row--choice fieldset { display: flex; flex-wrap: wrap; margin: 0; padding: 0; border: 0; } .ask-form .row--choice :is(.form-check, .radio) { display: inline-flex; align-items: center; margin: 0 50px 0 0; padding: 0; } .ask-form .row--choice input[type="radio"] { margin: 0 5px 0 10px; } .ask-form :is(input[type="radio"], input[type="checkbox"]) { width: auto; height: auto; appearance: auto; accent-color: auto; color: #000; } .ask-form .row--consent > label a { color: var(--c-brand); } .ask-form .row--consent > label .star { margin: 0; } .ask-form .row--consent > label::after { content: none; } .ask-form .row--choice .row__control label { font-size: 17px; line-height: 38px; color: #8f8e8e; cursor: pointer; } .ask-form__note { margin: 0 0 10px; padding-right: 19px; font-size: 12px; color: #848484; text-align: right; } .ask-form__footer { margin: 0 10px 8px; padding-top: 10px; height: 60px; border-top: 2px solid var(--c-brand); background: #f4f4f4; text-align: center; } .ask-form__send { position: relative; display: inline-block; height: 36px; margin: 0; padding: 0 15px 0 45px; border: 1px solid #d2d2d2; border-radius: 0; background: var(--c-white) url("../images/form/white-arrow.png") no-repeat 4px 5px; font: 400 18px/40px var(--font-cond); color: var(--c-brand); text-transform: uppercase; cursor: pointer; transition: all .2s linear; } .ask-form__send::after { content: ""; position: absolute; left: 4px; top: 5px; z-index: 1; width: 26px; height: 26px; background: var(--c-white) url("../images/form/blue-arrow.png") no-repeat 0 0; transition: all .2s linear; } .ask-form__send:is(:hover, :focus-visible) { border-color: var(--c-white); background-color: var(--c-brand); color: var(--c-white); } .ask-form__send:is(:hover, :focus-visible)::after { opacity: 0; } .ask-form__thanks { padding: 30px 10px 40px; font-size: 18px; line-height: 1.4; color: var(--c-brand); text-align: center; } /* a felugró ablakban (tmpl=component): a Joomla sikerüzenete helyett a köszönő panel */ .contentpane:has(.ask-form--sent) #system-message-container { display: none; } .contentpane:has(.ask-form) { margin: 0; padding: 4px 0 0; background: var(--c-white); } .ask-frame { display: block; width: 100%; max-width: 728px; min-height: 600px; margin: 0 auto; border: 0; } /* --- Workflow-k (Egyéni modul a home-top pozícióban; a régi #workflow-menu jelölés is működik) ----- */ .home-top .module__title, .workflow-title { margin: 10px 0; color: var(--c-brand-strong); font-size: 1.3rem; font-weight: 700; text-align: center; } .workflow-menu, #workflow-menu { margin: 0; padding: 0; text-align: center; } .workflow-menu li, #workflow-menu li { display: inline-block; max-width: 148px; margin-inline: 2px; padding: 10px 0 0; vertical-align: top; text-align: center; list-style: none; } .workflow { position: relative; display: flex; flex-direction: column; } .workflow .thumb { width: 80px; height: 80px; margin: 0 auto; border-radius: 50%; background-size: cover; background-repeat: no-repeat; } .workflow .name { padding: 5px; color: var(--c-brand-link); font-weight: 700; line-height: 1.3; transition: color .2s linear; } .workflow:hover .name { color: var(--c-brand); } .workflow a { position: absolute; inset: 0; z-index: 1; } /* --- Slider (Cikkek modul, „slider” elrendezés): kép balra, szövegpanel jobbra ---------------- */ .slider-fit { width: calc(var(--banner-w) * var(--slider-s, 1)); height: calc(var(--banner-h) * var(--slider-s, 1)); overflow: hidden; } .slider { position: relative; width: var(--banner-w); height: var(--banner-h); overflow: hidden; transform: scale(var(--slider-s, 1)); transform-origin: 0 0; user-select: none; } .slider__track { position: relative; height: 100%; } .slider__slide { position: absolute; inset: 0; display: grid; grid-template-columns: 800px minmax(0, 1fr); column-gap: 2px; opacity: 0; visibility: hidden; transition: opacity 1s ease, visibility 0s linear 1s; } .slider__slide.is-active { z-index: 1; opacity: 1; visibility: visible; transition: opacity 1s ease, visibility 0s; } .slider__media { overflow: hidden; background: var(--c-white); } .slider__media img { display: block; width: 800px; height: 352px; max-width: none; object-fit: cover; } .slider__panel { display: flex; flex-direction: column; overflow: hidden; background: var(--c-brand-muted); font-size: 12px; line-height: 1.8em; } .slider__title { display: block; padding: 17px 15px; border-bottom: 2px solid #b5c5df; background: var(--c-brand); color: var(--c-white); font-family: var(--font-cond); font-size: 22px; font-weight: 700; line-height: 1; transition: all .2s ease-in; } .slider__panel:hover .slider__title { color: var(--c-brand); background: var(--c-white); border-bottom-color: var(--c-brand); text-decoration: none; } .slider__text { padding: 17px 60px 17px 15px; color: var(--c-white); font-size: 17px; line-height: normal; hyphens: auto; } .slider__text p { margin: 0; } .slider__text a { color: #d5e8fe; text-decoration: underline; } .slider__text strong { font-weight: 700; } .slider__more { padding: 14px; } .slider__btn { display: inline; padding: 11px 15px 8px; border: 2px solid var(--c-brand-line); background: var(--c-brand-mid); color: var(--c-white); font-family: var(--font-cond); font-size: 18px; font-weight: 700; line-height: 1; text-transform: uppercase; transition: var(--t-fast); } .slider__panel:hover .slider__btn, .slider__btn:hover { border-color: #6c8bbe; color: var(--c-brand); background: var(--c-white); text-decoration: none; } /* színváltozatok (dia-szin mező) */ .slider__slide--dblue .slider__panel { background: #cfd8d7; } .slider__slide--dblue .slider__title { background: #1f3759; } .slider__slide--dblue .slider__text { color: #193d55; } .slider__slide--yellow .slider__title { color: var(--c-brand); background: linear-gradient(to right, #fad249 0%, #f7e299 100%); } .slider__slide--red .slider__title { background: linear-gradient(to right, #b91919 0%, #fb8181 100%); } /* Nyilak és számozott pöttyök – élőn Jssor d07 nyilak (53 × 106-os kép, felül 130 px) és jssort04 számok (30 × 30) */ .slider__arrow { position: absolute; top: 130px; z-index: 2; width: 53px; height: 106px; padding: 0; border: 0; background-color: transparent; background-repeat: no-repeat; cursor: pointer; } .slider__arrow--prev { left: 8px; background-position: -53px 0; } .slider__arrow--next { right: 8px; background-position: -53px -106px; } .slider__arrow--prev:hover { background-position: 0 0; } .slider__arrow--next:hover { background-position: 0 -106px; } .slider__dots { position: absolute; left: 20px; top: 22px; z-index: 2; display: flex; gap: 3px; } .slider__dot { display: block; width: 30px; height: 30px; padding: 0; border: 1px solid var(--c-white); background: var(--c-white); color: var(--c-brand); font-size: 17px; line-height: 28px; text-align: center; } .slider__dot[aria-current="true"] { background: var(--c-brand); color: var(--c-white); cursor: default; } /* --- Modulcímek (chrome: bioscience) ------------------------------------ */ .module__title { font-weight: 400; } /* Kategória választó / Termékajánló: szürke cím lefelé mutató kék nyíllal, a 48 px-es címsávban */ .home-showcase .module__header { height: 48px; } .home-showcase .module__title { display: flex; align-items: center; gap: 12px; height: 48px; margin: 0; padding-left: 15px; color: var(--c-nav); font-family: var(--font-cond); font-size: 22px; font-weight: 700; line-height: 53px; } .home-showcase .module__title::before { content: ""; flex: 0 0 19px; height: 10px; margin-top: 4px; background-repeat: no-repeat; } .home-showcase__side .module__title { padding-left: 22px; } /* --- Kategória-csempék (nyitólap: Kategória választó) ------------------- */ .cat-tiles { display: flex; flex-wrap: wrap; margin: 0 0 0 -12px; padding: 15px 0 0 17px; } .cat-tile { position: relative; width: 202px; height: 283px; margin: 11px; padding-bottom: 7px; border: 1px solid var(--c-line); background: var(--c-white); transition: .2s; } .cat-tile:hover, .cat-tile:has(:focus-visible) { z-index: 2; border-color: var(--c-brand); box-shadow: var(--shadow-card); transform: scale(1.06); } .cat-tile__link { display: block; height: 100%; text-decoration: none; } .cat-tile__link:hover { text-decoration: none; } .cat-tile__media { display: block; width: 186px; height: 186px; margin: 10px 7px 7px; overflow: hidden; background: var(--c-white); } .cat-tile__media img { display: block; width: 100%; } .cat-tile__label { position: absolute; left: 7px; bottom: 10px; display: flex; align-items: center; justify-content: center; width: calc(100% - 13px); height: 70px; padding: 0 1px; border-bottom: 2px solid var(--c-brand); color: var(--c-brand); font-family: var(--font-cond); font-size: 18px; font-weight: 700; line-height: normal; text-transform: uppercase; text-align: center; transition: var(--t-fast); } /* „Szolgáltatások: …” – élőn: #frontsection … span.small (rendszer-Helvetica, 17 px, normál) */ .cat-tile__label { flex-direction: column; } .cat-tile__label .small { display: block; font-family: helvetica; font-size: 17px; font-weight: 400; text-transform: none; } .cat-tile:hover .cat-tile__label { color: var(--c-white); background: var(--c-brand); } /* --- Szakaszfejléc sáv (élőn .FrontPageMoreNewsTitle): szürke cím kék nyíllal, jobbra „További …” link ------ */ .section-bar { display: flex; align-items: flex-start; justify-content: space-between; width: 890px; /* élőn fix 890 px, 1051–1280 px között túllóg a hasábon */ margin: 0 0 30px; border-bottom: 2px solid var(--c-line); } .section-bar__title { margin: 0; color: var(--c-nav); font-family: var(--font-cond); font-size: 22px; font-weight: 700; line-height: 40px; } .section-bar__title::before { content: ""; float: left; width: 19px; height: 10px; margin: 15px 12px 0 0; background-repeat: no-repeat; } .section-bar__more { height: 41px; margin: 0; padding: 0 6px 0 14px; background-repeat: no-repeat; background-position: 0 11px; color: var(--c-line); font-size: 14px; line-height: 40px; } .section-bar__more a { color: #a8a8a8; font-family: var(--font-base); font-weight: 700; } .section-bar__more:hover a { color: var(--c-brand-mid); text-decoration: none; } /* --- Nyitólapi hírek (élőn .nyitolapihirek): két hasáb, 290 px magas cellák, „Bővebben” gomb ----------------- */ .front-news { display: flex; flex-wrap: wrap; margin: 0; padding-top: 5px; } .front-news__item { box-sizing: content-box; width: 44%; height: 290px; padding-left: 34px; line-height: 25px; } .front-news__title { display: block; padding: 10px; color: var(--c-brand); font-family: var(--font-cond); font-size: 21px; font-weight: 700; transition: all .2s ease-in; } .front-news__item:hover .front-news__title { background: var(--c-brand); color: var(--c-white); text-decoration: none; } .front-news__intro { margin: 5px 0; padding: 10px; color: var(--c-text); font-size: 15px; line-height: normal; transition: all .2s ease-in; } .front-news__intro p { margin: 0; } .front-news__item:hover .front-news__intro { color: #000; } .front-news__more { margin: 0; padding-bottom: 10px; text-align: right; } /* „Bővebben” gomb: 89 × 28-as kétállapotú háttérkép (élőn readmore-bg.png), a szöveg a sávra vágva */ .readmore-btn { position: relative; display: inline-block; box-sizing: content-box; width: 43px; height: 28px; margin: 10px 0 0; padding: 4px 25px 7px 21px; overflow: hidden; background-repeat: no-repeat; color: #6b6c6c; font-family: var(--font-cond); font-size: 15px; font-weight: 700; line-height: 1.5em; text-align: left; text-decoration: none; transition: all .2s ease-in; } .readmore-btn:hover, .front-news__item:hover .readmore-btn { background-position: -89px 0; color: var(--c-white); text-decoration: none; } /* --- Nyílgomb (élőn .oligoRendeles: „Online oligo rendelés” a csempék alatt) ------------- Szerkesztőben: Felirat */ .arrow-btn { display: inline-flex; align-items: flex-start; width: 202px; height: 42px; margin: 10px 0; border: 1px solid var(--c-line); background: var(--c-white); color: var(--c-brand); font-family: var(--font-cond); font-size: 17px; font-weight: 700; line-height: 40px; text-align: left; vertical-align: top; transition: var(--t-fast); } .arrow-btn__icon { flex: 0 0 26px; height: 26px; margin: 6px 6px 0; background-color: var(--c-brand); background-repeat: no-repeat; background-position: 50% 50%; } .arrow-btn:hover, .arrow-btn:focus-visible { border-color: var(--c-white); background: var(--c-brand); color: var(--c-white); text-decoration: none; } .arrow-btn:hover .arrow-btn__icon, .arrow-btn:focus-visible .arrow-btn__icon { background-color: var(--c-white); } .module--arrow-btn { margin-top: -10px; padding-right: 5px; text-align: right; } .module--arrow-btn p { margin: 0; } /* --- Termékajánló (Cikkek modul „offers” elrendezés) -------------------- */ .module--offers .module__body { position: relative; padding: 20px 0 83px; border-inline: 4px solid var(--c-white); background: linear-gradient(var(--c-brand-soft) 0%, var(--c-brand-soft) 93%, #ecf2fa 100%); } .module--offers .module__body::after { content: ""; position: absolute; left: -4px; bottom: -1px; width: 260px; height: 83px; background-repeat: no-repeat; pointer-events: none; } /* nyitólap (élőn #frontsectionright .jm-module): a doboz 2 px-szel a sáv alatt kezdődik, a kártyák 26 px-től 281 px-es lépésben, a pöttyök 17 px-re az utolsó alatt (250 px széles sor), a színátmenet a pöttyök alatt 1 px-szel ér véget, utána 83 px „zászló” */ .home-showcase .module--offers { margin-bottom: 30px; } .home-showcase .module--offers .module__body { margin-top: 2px; padding: 26px 4px 84px; border: 0; background: linear-gradient(to right, var(--c-white) 0 4px, transparent 4px calc(100% - 4px), var(--c-white) calc(100% - 4px)), linear-gradient(var(--c-brand-soft) 0%, var(--c-brand-soft) 93%, #ecf2fa 100%); background-size: 100% calc(100% - 83px); background-repeat: no-repeat; } /* a jobb hasáb nem növeli a sávot (élőn úsztatott): a „zászló” a sáv aljáig lóghat */ .home-showcase__side { align-self: start; height: 0; } .home-showcase .offers { gap: 18px; padding-left: 2px; } .home-showcase .offers__dots { width: 250px; height: 38px; margin: 17px 0 0 -1px; padding: 0; } .offers { display: flex; flex-direction: column; gap: 16px; margin: 0; } .offers__item { margin: 0 auto; } .offers__link { position: relative; display: block; width: 186px; height: 247px; padding: 7px; box-sizing: content-box; border: 1px solid var(--c-brand-line); background: var(--c-white); text-decoration: none; transition: all .3s linear; } .offers__link:hover { border-color: var(--c-brand-muted); box-shadow: var(--shadow-card-blue); transform: scale(1.06); text-decoration: none; } /* élőn: a kép helye mindig 186 px magas (a kép a tetején), a cím legalább 56 px, hosszú címnél lefelé nő */ .offers__link img { display: block; width: 186px; height: 186px; margin: 0 auto 5px; object-fit: contain; object-position: 50% 0; } .offers__title { display: flex; align-items: center; justify-content: center; width: 186px; min-height: 56px; background: var(--c-surface); color: var(--c-text-card); font-size: 15px; line-height: 1.2; text-align: center; transition: all .3s linear; } .offers__link:hover .offers__title { background: var(--c-brand-soft); color: var(--c-brand); } /* „ÚJ” szalag (Újdonság = Igen; élőn .itemUjdonsag .card:before) */ .offers__item:is(.is-new, .is-sale) .offers__link::before { content: ""; position: absolute; top: 4px; right: 4px; z-index: 10; width: 104px; height: 104px; background-repeat: no-repeat; pointer-events: none; } .offers__item.is-sale .offers__link::before { top: -4px; } .offers__item[hidden] { display: none; } /* élőn ul.slick-dots: 14 px-es elemek 4 px-es margóval (22 px lépés), 25 px-es sorok, a gomb az alapvonalon */ .offers__dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; min-height: 38px; margin: 14px 0 0; padding: 0 10px; } .offers__dot { display: block; width: 12px; height: 12px; margin: 8px 5px 6px; padding: 0; border: 2px solid var(--c-dots-border); border-radius: 50%; background: var(--c-dots); transition: all .2s linear; } .offers__dot:hover:not([aria-current]) { border-color: var(--c-brand-mid); background: var(--c-brand-mid); } .offers__dot[aria-current] { background: var(--c-white); border-color: var(--c-brand-mid); transform: scale(1.2); cursor: default; } .offers__empty { margin: 5px 0; padding-top: 15px; color: var(--c-brand-mid); text-align: center; } /* --- Hírlista --------------------------------------------------------- */ .news-list { padding-top: 8px; } .news-list li { padding-bottom: 1px; } .news-list a { position: relative; display: block; padding: 12px 10px 12px 30px; font-size: 15px; line-height: 1.3; color: var(--c-text-strong); transition: var(--t-fast); } .news-list a::after { content: ""; position: absolute; left: 12px; top: 18px; width: 6px; height: 6px; background: var(--c-brand-mid); } .news-list a:hover { color: var(--c-brand); text-decoration: none; background: var(--c-brand-soft); } .news-list__title { display: block; max-height: 42px; overflow: hidden; } /* --- Gyártók sáv -------------------------------------------------------- */ .manufacturers { padding-top: 1px; background: var(--c-brand-soft-2); } .manufacturers .module__header { margin-bottom: 0; border-block: 2px solid var(--c-brand-soft-border); background: var(--c-brand-soft); } /* élőn: p.manufacturers-title (23px / 1.3, kék nyíl balra úsztatva, a második fele ) */ .manufacturers .module__title { display: flow-root; max-width: var(--container); margin: 0 auto; padding: 15px 0 10px; font-family: var(--font-cond); font-size: 23px; font-weight: 700; line-height: 1.3; color: var(--c-brand-mid); } .manufacturers .module__title small { font-size: 85%; font-weight: 700; } .manufacturers .module__title::before { content: ""; float: left; width: 19px; height: 10px; margin: 10px 12px 0 0; background-repeat: no-repeat; } .manufacturers .module__body { max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding: 5px var(--gutter); } /* élőn: 132 × 91-es cellák hézag nélkül (div 120 × 79 + 4 px belső margó + 2 px keret), a link 120 × 78 */ .logo-list { display: flex; flex-wrap: wrap; gap: 0; margin: 0; } .logo-list li { display: block; } .logo-list__item { display: block; width: 132px; height: 91px; margin: 0; padding: 4px; border: 2px solid var(--c-brand-soft-2); transition: all .3s ease-in-out; } .logo-list__link { display: flex; align-items: center; justify-content: center; width: 120px; height: 78px; border: 3px solid var(--c-white); background: var(--c-white) repeat-x 0 100%; box-shadow: 0 3px 0 0 #bed1ea; } .logo-list__item:hover { background: var(--c-brand-muted); border-color: #e4ecf7; } .logo-list img { width: auto; height: auto; max-width: 100%; max-height: 100%; } .logo-list__text { padding: 0 4px; color: var(--c-brand); font-size: 12px; line-height: 1.1; text-align: center; } /* --- Morzsamenü (élőn #jm-breadcrumbs: szürke sáv, nyíl alakú elválasztók; html/mod_breadcrumbs) ----------------- */ .site-breadcrumbs { border-bottom: 1px solid #c9c9c9; background: #f6f6f6; } .site-breadcrumbs:not(:has(.crumbs__item)) { display: none; } .site-breadcrumbs .container { max-width: var(--container); margin-inline: auto; padding-inline: 0; } .crumbs__list { margin: 0; padding: 0; font-size: 0; line-height: 0; } .crumbs__item { position: relative; display: inline-block; vertical-align: top; padding-left: 34px; margin-right: 4px; font-size: 15px; line-height: 25px; } .crumbs__item:first-child { padding-left: 34px; } .crumbs__item::after { content: ""; position: absolute; top: 0; right: -23px; z-index: 5; width: 18px; height: 45px; margin: 0 5px; background-repeat: no-repeat; } .crumbs__item:hover { background: var(--c-white); } .crumbs__link { display: block; padding: 0 10px 0 0; color: #8f8f8f; font-size: 18px; line-height: 45px; } .crumbs__link:hover { color: var(--c-brand); text-decoration: none; } /* --- Belső oldalak: jobb oszlop (Termékajánló), oldalsáv-doboz címe ------------------------------------------------ */ /* élőn: a modul 256 px (−20 px-lel balra), a belseje 4 px-től 240 px széles */ .sidebar--right .module { margin: 0 0 30px -20px; width: 256px; padding: 0 12px 0 4px; } /* élőn „Hhelvetica” + bold: a normál betű műfélkövérrel (nem a félkövér betűváltozat) */ .side-box__title, .sidebar--right .module__title { position: relative; display: block; height: 40px; margin: 0 0 0 20px; padding: 0 0 0 52px; background-repeat: no-repeat; background-position: 22px 5px; color: var(--c-nav); font-family: var(--font-cond-faux); font-size: 22px; font-weight: 700; line-height: 26.4px; text-transform: none; } .sidebar--right .module__header { margin: 0; } /* élőn (#jm-right .termekajanlo-slider): a kártyák 4 px-lel jobbra, 18 px-es közzel, a pöttyök 20 px-re az utolsó alatt */ .sidebar--right .module--offers .module__body { margin: -15px 0 0; padding: 11px 0 15px 12px; border: 0; background: none; } .sidebar--right .offers { gap: 18px; } .sidebar--right .offers__dots { width: 242px; height: 38px; margin: 20px 0 0 -13px; padding: 0; } .sidebar--right .module--offers .module__body::after { display: none; } /* --- Kategóriaoldal (élőn VirtueMart category view) -------------------------------------------------------------- */ .category-kicker { margin: 0 0 10px; color: var(--c-text); font-family: var(--font-base); font-size: 30px; font-weight: 700; line-height: 36px; } .page-title { margin: 0 20px 10px 0; padding: 0; border-bottom: 2px solid var(--c-line-light); text-align: left; } .page-title__text { display: block; margin: 0; padding: 0 0 10px 40px; border: 0; background-repeat: no-repeat; background-position: 8px 10px; color: var(--c-brand); font-family: var(--font-cond); font-size: 24px; font-weight: 700; line-height: 28.8px; text-transform: uppercase; } .category-desc { margin: 0 0 10px; } /* alkategória-csempék: 202 × (186 + 70) belső, 11 px margó, 26 px bal belső margó (élőn .category-view .row) */ /* élőn: soronként 300 px (az utolsó sor 296), alatta 25 px → 21 px alsó margó */ .cat-grid { margin: 0 0 25px; padding: 0 0 0 26px; } /* sorok négyesével (élőn .category-view .row, flex): egy sor kártyái egyforma magasak */ .cat-grid__row { display: flex; flex-wrap: wrap; margin: 0; padding: 0; } .cat-card { width: 202px; margin: 11px; border: 1px solid var(--c-line); background: var(--c-white); } /* élőn: 7 px belső margó, 186 px képhely, a cím legalább 70 px (hosszú névnél nő), alatta 1,8 px sormagasság-maradék */ .cat-card__link { display: flex; flex-direction: column; height: 100%; padding: 7px 7px 8.8px; text-decoration: none; } .cat-card__link:hover { text-decoration: none; } .cat-card__media { display: block; width: 186px; height: 186px; } .cat-card__media img { display: block; max-width: 186px; margin: 2px auto 10px; } .cat-card__title { display: flex; align-items: center; justify-content: center; flex: none; min-height: 70px; width: 186px; border-bottom: 2px solid var(--c-brand); color: var(--c-brand); font-family: var(--font-cond); font-size: 18px; font-weight: 700; line-height: normal; text-align: center; text-transform: uppercase; transition: var(--t-fast); } /* „Szolgáltatások: …” – a kettőspont utáni rész külön sorban (élőn is), a kártya magasabb lesz */ .cat-card__title { flex-wrap: wrap; align-content: center; padding: 4px 0; } .cat-card__title .small { flex: 0 0 100%; } .cat-card:hover .cat-card__title { background: var(--c-brand); color: var(--c-white); } /* keresőmező (élőn: „Keresés a webáruházban”) */ .product-browse { margin: 0 0 25px; } .product-search { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 4px; margin: 0 0 26px; } .product-search__input { width: 400px; max-width: 100%; height: 36px; padding: 0 10px; border: 1px solid #e5e5e5; background: var(--c-white); color: #acacac; font-size: 13px; line-height: 36px; } .product-search__button { width: 220px; height: 36px; padding: 8px 25px; border: 0; background: var(--c-brand-strong); color: var(--c-white); font-size: 15px; line-height: 20px; white-space: nowrap; cursor: pointer; } .product-search__button:hover { background: var(--c-brand); } /* termékrács: 220 px széles cellák, 1,5 px margó, 26 + 26 px bal belső margó (élőn kettős .row) */ /* élőn: a sorok alatt a (üres) lapozó 20 + 20 px-e */ .product-grid { margin: 0 0 40px; padding: 0 0 0 52px; } /* sorok négyesével (élőn .browse-view .row .row); egy soron belül a kártyák egyforma magasak */ .product-grid__row { display: flex; flex-wrap: wrap; margin: 0; padding: 0; } .product-card { position: relative; width: 220px; margin: 1.5px; padding: 6px 6px 12px; } .product-card__media { position: relative; display: block; margin: 0 0 15px; text-align: center; } .product-card__media img { display: inline-block; max-width: 186px; max-height: 186px; vertical-align: top; } /* „ÚJ” / „AKCIÓ” szalag a kép jobb felső sarkán (élőn: .vm-product-media-container.ujdonsag / .akcio :after) */ .product-card:is(.is-new, .is-sale) .product-card__media::after { content: ""; position: absolute; right: -5px; top: -5px; z-index: 1; width: 104px; height: 104px; background-repeat: no-repeat; pointer-events: none; } .product-card.is-sale .product-card__media::after { right: 4px; top: -4px; z-index: 10; } .product-card__title { margin: 0; font-family: var(--font-base); font-size: 14px; font-weight: 700; line-height: 16.8px; text-align: center; } .product-card__title a { color: var(--c-brand-strong); } /* --- Termékoldal (élőn VirtueMart productdetails) ---------------------------------------------------------------- */ .product { display: grid; grid-template-columns: 264px minmax(0, 1fr); column-gap: 18px; } .product--nonav { grid-template-columns: minmax(0, 1fr); } .product__nav { min-width: 0; padding-top: 6px; } .product__body { min-width: 0; } /* bal: „Kategória választó” */ .cat-nav .side-box__title { width: 258px; margin: 0; padding-left: 54px; background-position: 20px 5px; } /* élőn: a hosszú név tördelődik, a második sor rejtve (a doboz fix magas) */ .cat-nav__head { display: block; width: 258px; height: 46px; margin: 0 0 5px; padding: 0 10px; overflow: hidden; background: var(--c-brand); color: var(--c-white); font-family: var(--font-cond); font-size: 18px; font-weight: 700; line-height: 48px; } .cat-nav__head:hover { color: var(--c-white); text-decoration: none; } .cat-nav__list { width: 258px; margin: -51px 0 0; padding: 50px 0 0; border: 1px solid #b3b3b3; } .cat-nav__item { margin: 0 3px; border-bottom: 1px solid var(--c-line-light); } .cat-nav__item:last-child { border-bottom: 0; } .cat-nav__item a { display: block; height: 42px; padding: 0 8px; overflow: hidden; color: var(--c-brand-mid); font-family: var(--font-cond-faux); font-size: 17px; font-weight: 700; line-height: 45px; } .cat-nav__item a:hover { color: var(--c-brand); text-decoration: none; } .cat-nav__item.is-current a { border-bottom: 2px solid var(--c-brand); background-repeat: no-repeat; background-position: 98% 50%; color: var(--c-brand); } /* fej: gyártólogó + cím (élőn táblázat) */ /* élőn táblázat: magassága a logó (48) ill. a cím + 0,8 px alapvonal-többlet */ .product__head { display: flex; align-items: center; min-height: 48px; margin: 0 0 14px; } .product__brand { flex: 0 0 155px; } .product__brand img { display: block; max-width: 130px; height: auto; } .product__title { margin: 0 0 1px; color: var(--c-brand); font-family: var(--font-base); font-size: 26px; font-weight: 400; line-height: 31.2px; } /* kép + rövid leírás */ /* élőn: kép balra (340), a rövid leírás jobbra úsztatva (352 px, 16 px bal belső margó); ha nem fér mellé, a kép alá, jobbra zárva */ .product__top { display: flex; flex-wrap: wrap; align-items: flex-start; margin: 18px 0 0; } .product__media { flex: 0 0 340px; max-width: 100%; margin: 0 0 15px; } .product__media > a img { display: block; max-width: 100%; height: auto; } .product__zoom { display: block; cursor: zoom-in; } /* további képek (élőn .additional-images: 50 px széles kép, 10 px belső margó, átlátszó keret, 8 px köz) */ .product__thumbs { display: flex; flex-wrap: wrap; margin: 10px 0; padding: 0; } .product__thumb { display: block; margin: 0 8px 0 0; padding: 0; border: 0; background: none; cursor: pointer; } .product__thumb img { display: block; width: 50px; height: auto; padding: 10px; border: 2px solid transparent; box-sizing: content-box; transition: all .3s ease-in-out; } .product__thumb:hover img { border-color: #c2d3eb; } .product__thumb.is-active img { cursor: default; } /* az élő oldalon nincs látható „aktív” jelölés */ /* élőn a rövid leírás doboza 242 px: szöveg + 16 px margó + 26 px (üres ár- és kosársor) */ .product__lead { flex: 0 0 352px; min-width: 0; margin: 0 0 42px auto; padding: 0 0 0 16px; color: var(--c-text); font-size: 16px; line-height: 25px; } .product__lead p { margin: 5px 0; } /* élőn a régi sablon általános p-margója */ .product__cta { margin: 20px 0; text-align: center; } .btn-ask { position: relative; display: inline-block; padding: 12px 10px 6px 40px; border: 2px solid #d2d2d2; background: var(--c-white) no-repeat 4px 50%; color: var(--c-brand); font-family: var(--font-cond); font-size: 18px; font-weight: 700; line-height: 1; text-transform: uppercase; cursor: pointer; transition: var(--t-fast); } .btn-ask::after { content: ""; position: absolute; left: 4px; top: 50%; z-index: 1; width: 26px; height: 26px; margin-top: -13px; background-repeat: no-repeat; transition: opacity .2s linear; } .btn-ask:is(:hover, :focus-visible) { border-color: var(--c-brand); background-color: var(--c-brand); color: var(--c-white); text-decoration: none; } .btn-ask:is(:hover, :focus-visible)::after { opacity: 0; } /* fülek (élőn ul.productTabs: alsó vonalas, egyforma szélességű fülek) */ .tabs { display: flow-root; } .tabs__list { display: flex; margin: 0 0 30px; border-bottom: 2px solid var(--c-line); } .tabs__tab { flex: 0 0 139px; height: 62px; margin: 0 0 -2px; padding: 0 10px; border: 0; border-bottom: 2px solid var(--c-line); background: none; color: var(--c-nav); font-family: var(--font-cond); font-size: 18px; font-weight: 700; line-height: 25px; text-align: center; cursor: pointer; } .tabs__tab:hover { color: var(--c-brand-mid); } .tabs__tab[aria-selected="true"] { border-bottom-color: var(--c-brand); color: var(--c-brand-mid); cursor: default; } .tabs--single .tabs__list { display: none; } /* legördülő fülválasztó (élőn .mobile-productTabs: csak ≤ 1280 px) */ .tabs__select { display: none; padding: 15px 10px; text-align: center; } .tabs__select select { width: 180px; height: 36px; padding: 6px; border: 1px solid #e5e5e5; border-radius: 0; background-color: var(--c-brand); color: var(--c-white); font-family: var(--font-base); font-size: 13px; } .tabs__panel { color: var(--c-text); font-size: 15px; line-height: 26px; } .tabs__panel p { margin: 5px 0; } /* élőn az utolsó elem alsó margója összeolvad az oldal 30 px-es alsó margójával */ .tabs__panel > :last-child { margin-bottom: 0; } .tabs__panel ul { margin: 5px 0; padding: 0; } .tabs__panel table { max-width: 100%; border-collapse: collapse; } .tabs__panel td, .tabs__panel th { padding: 5px; border: 1px solid var(--c-line); } .tabs__panel iframe, .tabs__panel video { max-width: 100%; } .tabs__panel img { max-width: 100%; height: auto; } /* Joomla front-end szerkesztés (csak bejelentkezett szerkesztőnek) */ [role="tooltip"]:not(.show) { display: none; } /* --- Felugró tájékoztató (Egyedi modul „notice” elrendezés, natív ) ----------------- */ .notice { width: min(560px, calc(100% - 20px)); max-width: none; padding: 0; border: 0; background: transparent; color: #444; overflow: visible; } .notice::backdrop { background: rgb(13 56 128 / .6); } .notice[open] { animation: notice-in .25s ease-out; } @keyframes notice-in { from { opacity: 0; transform: scale(1.1); } to { opacity: 1; transform: none; } } .notice__box:focus { outline: none; } .notice__box { position: relative; padding: 1rem 1.5rem; border-radius: .3rem; background: var(--c-white); text-align: center; } .notice__close-form { margin: 0; } .notice__close { position: absolute; right: 1rem; top: 1rem; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; background: none; color: #ccc; font-size: 1.8rem; line-height: 1; cursor: pointer; transition: .2s linear; } .notice__close:hover, .notice__close:focus-visible { color: #666; } .notice__sign { display: flex; justify-content: center; padding-block: 1rem; } .notice__sign span { display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border: 3px solid #f00; border-radius: 50%; color: #f00; font-size: 1.8rem; font-weight: 700; } .notice__title { margin: 10px 0; color: #222; font-size: 24.5px; font-weight: 400; line-height: 40px; } .notice__body p { margin: 0 0 10px; } .jmoddiv { position: relative; } /* Front-end szerkesztés (bejelentkezett szerkesztőknek): a szerkesztő gomb ne tolja el az elrendezést. */ .jmodedit { position: absolute !important; top: 0; right: 0; z-index: 1000; padding: 2px 5px; border: 1px solid #ccc; border-radius: 3px; background: #fff; font-size: 12px; line-height: 1.2; } .jmodedit + [role="tooltip"] { display: none; } .jmodedit:is(:hover, :focus) + [role="tooltip"] { display: block; position: absolute; top: 24px; right: 0; z-index: 1001; width: max-content; max-width: 260px; padding: 6px 8px; background: #fff; border: 1px solid #ccc; color: #333; font-size: 12px; line-height: 1.4; text-align: left; } /* ====================================================================== Aloldalak (cikkek: Cégünkről, Szerviz, Szakmai anyagok, lábléc-oldalak …) A cím ikonját és színét a menüpont „Oldal osztálya” választja (theme.css). ====================================================================== */ .page-heading { margin: 0 0 4px; border-bottom: 2px solid var(--c-line); } .page-heading__text { position: relative; display: inline-block; margin: 0 0 -2px; padding: 10px 10px 6px 54px; border-bottom: 4px solid var(--c-brand); font-family: var(--font-base); font-size: 32px; font-weight: 400; line-height: 1.2; color: var(--c-heading); text-transform: uppercase; } .page-heading__text::after { content: ""; position: absolute; right: -3px; bottom: -4px; width: 3px; height: 3px; background: var(--c-white); z-index: 1; } /* --- Cikkoldal (élőn a J3 alap cikk-elrendezése: .page-header h1 oldalfejléc + .page-header h2 cím) ----------- */ .item-page { color: var(--c-text); font-size: 15px; line-height: 26px; } .item-page.rolunk { font-size: 16px; } /* élőn .item-page.rolunk */ /* vízszintes vonal a szövegben (élőn: 1 px-es halványszürke sáv, 20 px térköz) */ hr { height: 1px; margin: 20px 0; border: 0; background: #ececec; } /* felső / alsó index a sormagasság megbontása nélkül (élőn a bootstrap normalize szabálya) */ .item-page :is(sup, sub), .tabs__panel :is(sup, sub) { position: relative; font-size: 75%; line-height: 0; vertical-align: baseline; } .item-page sup, .tabs__panel sup { top: -.5em; } .item-page sub, .tabs__panel sub { bottom: -.25em; } .item-page__head { margin: 0 0 8px; } /* oldalfejléc (menüpont „Oldalfejléc”, pl. HÍREINK) – mint a hírlista fejléce */ .item-page .item-page__heading { margin: 0 0 30px; padding: 0 0 0 52px; border-bottom: 1px solid #ececec; background-color: var(--c-white); background-repeat: no-repeat; background-position: 22px 5px; color: var(--c-brand); font-family: var(--font-cond-bold-faux); font-size: 22px; font-weight: 700; line-height: 26.4px; text-transform: uppercase; } /* a cikk címe: kék, nagybetűs, nyíl a bal szélen, szürke alsó vonal */ .item-page .item-page__title { margin: 0; padding: 0 0 0 38px; border-bottom: 2px solid #e2e2e2; background-repeat: no-repeat; background-position: 7px 50%; color: var(--c-brand); font-family: var(--font-cond-bold-faux); font-size: 25px; font-weight: 700; line-height: 50px; text-transform: uppercase; } /* hírek: középre zárt alcím (élőn h3.hirtitle) */ /* hír- és adatkezelési cím: ikon nélkül – !important, mert a téma rétege (theme.css) később adja a cím-ikont */ .item-page .item-page__title--news { margin: 20px 0 25px; padding: 0; border: 0; background: none !important; line-height: 30px; text-align: center; text-transform: none; } /* oldalosztályok a régi menüpontokból */ .item-page.data-handling-page .item-page__title { padding: 0; background: none !important; line-height: 1.3; text-align: center; } @media (min-width: 1000px) { .item-page.data-handling-page .item-page__title { padding: 0 150px; } } .item-page .article__back { margin: 20px 0 0; text-align: center; } /* „Vissza” gomb (élőn a.back): keretes, kék nyíl-ikon, rámutatáskor kék alapon fehér */ .btn-back { display: inline-block; padding: 4px 20px 4px 5px; border: 2px solid #d2d2d2; background: var(--c-white); color: var(--c-brand); font-family: var(--font-cond-bold-faux); font-size: 18px; font-weight: 400; line-height: 26px; text-transform: uppercase; text-decoration: none; vertical-align: top; } .btn-back__icon { float: left; width: 26px; height: 26px; background-repeat: no-repeat; transition: all .5s ease-in-out; } .btn-back__label { position: relative; top: 2px; left: 10px; display: inline-block; transition: all .3s ease-in-out; } .btn-back:is(:hover, :focus-visible) { border-color: var(--c-brand); background: var(--c-brand); color: var(--c-white); text-decoration: none; } /* cikkszöveg alapértékei (a régi sablon általános szabályai; minden konkrétabb szabály felülírja) */ .article__body :where(h2, h3, h4, h5) { margin: 0 0 10px; font-weight: 700; } .article__body :where(h4, h5) { line-height: 1.5; } .article__body :where(h5) { font-size: 1em; } .article__body :where(ul) { margin: 5px 0; } .article__body :where(ol) { margin: 0 0 20px 25px; } .article__body :where(ol > li) { margin-bottom: 10px; line-height: 20px; } .article__body :where(table) { max-width: 100%; border-collapse: collapse; border-spacing: 0; } /* a régi tartalmak táblázatainak szélesség-attribútumai a cella tartalmára vonatkoznak */ .article__body :where(td, th) { box-sizing: content-box; } .article__body :where(td) { padding: 10px; } .item-page.contact { padding-bottom: 20px; } /* a cikkszöveg nem zárja le a lebegő elemeket, az utolsó bekezdés margója összeolvad a következővel – mint a régi oldalon */ .clear { clear: both; } .item-page h2, .item-page h3, .item-page h4 { margin: 0 0 10px; } .item-page h3 { font-size: 1.6em; margin: 30px 0 20px; } .item-page h4 { font-size: 1.4em; line-height: 1.5em; } .item-page p { margin: 5px 0; } .item-page p a:not([class]) { text-decoration: underline; } .item-page img.left { float: left; margin: 0 20px 10px 0; } .item-page img.right { float: right; margin: 0 0 5px 20px; } .item-page a.pdf-link { display: inline-block; padding-left: 24px; text-decoration: none; background-repeat: no-repeat; background-position: 0 50%; background-size: 16px; } .item-page ul { margin: 5px 0; } /* tartalmi felsorolás: élőn (style2.css „ul li”) kék pont-kép, 34 px behúzás, 25 px sormagasság – a kép a theme.css-ben */ :where(.tabs__panel, .item-page, .category-desc) ul li { margin: 0; padding-left: 34px; line-height: 25px; background-repeat: no-repeat; background-position: 0 50%; } ul.bullets { margin: 0 0 20px 10px; } ul.bullets li { position: relative; padding-left: 15px; margin-bottom: 10px; } ul.bullets li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; background: var(--c-brand); } /* Keretes gomb nyíllal (pl. „Anamed minőségügy”, „További híreink”) */ a.link-btn { position: relative; display: inline-block; padding: 0 14px 0 35px; border: 2px solid #d9d9d9; background-color: var(--c-white); background-repeat: no-repeat; background-position: 7px 9px; color: var(--c-text-grey); font-size: 15px; font-weight: 700; line-height: 34px; text-decoration: none; transition: all .2s linear; } a.link-btn::after { content: ""; position: absolute; left: 7px; top: 9px; width: 16px; height: 16px; background-repeat: no-repeat; z-index: 1; transition: all .2s linear; } a.link-btn:hover { color: var(--c-white); background-color: var(--c-accent); border-color: var(--c-accent); background-position: 11px 9px; text-decoration: none; } a.link-btn:hover::after { left: 11px; opacity: 0; } /* --- Jobb oszlop: hírdoboz (Híreink / Események) ------------------------ */ .sidebar--right { padding-top: 0; } .module--side-news { position: relative; margin: 8px 0 20px; padding-bottom: 70px; background: var(--c-surface-grey-hover); border-bottom: 3px solid #efefef; } .module--side-news .module__header { margin: 0; padding: 0; background: var(--c-white); text-align: center; } .module--side-news .module__title { display: inline-block; margin: 0; padding: 14px 0; font-family: var(--font-base); font-size: 23px; font-weight: 400; line-height: 19.2px; text-transform: none; } .module--side-news .module__body { border-top: 4px solid var(--c-white); } .side-list { margin: 5px 0; } .side-list li { margin: 0 1px; padding: 0 0 1px; background-repeat: repeat-x; background-position: 0 100%; } .side-list li:last-child { background: none; } .side-list a { position: relative; display: block; padding: 14px 10px 14px 44px; color: var(--c-text-strong); font-size: 16px; line-height: 1.3; transition: all .2s linear; } .side-list a::after { content: ""; position: absolute; left: 16px; top: 19px; width: 8px; height: 8px; background: var(--c-brand-mid); z-index: 1; transition: background-color .2s linear; } .side-list li:hover a::after { background: var(--c-accent); } .side-list a:hover { background: var(--c-white); color: var(--c-accent-strong); text-decoration: none; } .side-list__more { position: absolute; left: 0; bottom: 14px; width: 100%; margin: 0; text-align: center; } /* --- Kategória blog (Híreink; élőn .blog.hirekgyujto) ------------------------------------------- Fejléc: kék, nagybetűs cím nyíllal, szürke alsó vonal. Sorok: a menüpont „Hasábok” száma szerint (alap 2), középen pontozott elválasztó (a theme.css-ben). A dobozok magassága a saját tartalmuk (nem nyúlnak a sorhoz). */ .blog { position: relative; background-color: var(--c-white); background-repeat: repeat-y; background-position: 50% 0; } .blog__head { margin: 0; } .blog__title { margin: 0 0 30px; padding: 0 0 0 52px; border-bottom: 1px solid #ececec; background-color: var(--c-white); background-repeat: no-repeat; background-position: 22px 5px; color: var(--c-brand); font-family: var(--font-cond-bold-faux); font-size: 22px; font-weight: 700; line-height: 26.4px; text-transform: uppercase; } .blog .category-desc { margin: 0 0 20px; } .blog__empty { margin: 5px 0; } .blog__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.4617%; align-items: start; padding-bottom: 30px; } .blog__row--cols-1 { grid-template-columns: minmax(0, 1fr); } .blog__row--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .blog__row--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* a hasáb (rácselem) tartalmazza a balra úsztatott képet, a keretes doboz nem – mint élőn, ahol a kép túlnyúlhat a kereten */ .blog-item { padding: 15px 10px; border: 1px solid var(--c-white); } .blog-item:hover { border-color: #b5cbea; border-bottom: 2px solid var(--c-brand); } .blog-item__head { margin: 0 0 8px; } .blog-item__title { display: inline-block; margin: 0; padding: 10px; color: var(--c-brand); font-family: var(--font-cond-bold-faux); font-size: 21px; font-weight: 700; line-height: 36px; } .blog-item__title a { color: var(--c-brand); text-decoration: none; } .blog-item:hover .blog-item__title, .blog-item:hover .blog-item__title a { background: var(--c-brand); color: var(--c-white); } .blog-item__image { float: left; box-sizing: content-box; width: 186px; margin: 0 20px 10px 0; padding-left: 10px; } .blog-item__image img { display: inline; max-width: 100%; height: auto; vertical-align: middle; } .blog-item__text p { margin: 5px 0; padding-left: 10px; line-height: normal; word-break: break-word; } .blog-item:hover .blog-item__text p { color: #000; } .blog-item__text img { max-width: 100%; height: auto; } .blog-item__more { box-sizing: content-box; width: 100%; margin: 0; padding-right: 10px; line-height: normal; text-align: right; } /* élőn width:100% + jobb belső margó: 10 px-rel túlnyúlik */ /* kisebb „Bővebben” gomb (élőn div.blog.hirekgyujto p.readmore a): 89 × 28, Arial 12 px */ .readmore-btn--small { box-sizing: border-box; width: 89px; height: 28px; vertical-align: middle; padding: 4px 5px 7px 21px; font-family: var(--font-base); font-size: 12px; line-height: 22px; text-align: center; } .blog-item:hover .readmore-btn { background-position: -89px 0; color: var(--c-white); } .blog .pagination { position: relative; top: 50px; } /* --- Harmonika-menü a bal oszlopban (mod_menu „accordion”; élőn .jm-module.menu-left-szolgal) ------------------- Csoportfej: kék keretes doboz +/− ikonnal; nyitva kék alapon fehér. Alpont: halványkék felirat, az aktuális kék aláhúzással. */ .sidebar--left .menu-left-szolgal { width: 258px; margin: 5px 0 0; } /* élőn 30 px a hasáb tetejétől; itt a rács 25 px-cel lejjebb kezdődik */ .sidebar--left .menu-left-szolgal .module__header { margin: 0; } .sidebar--left .menu-left-szolgal .module__body { display: flow-root; } /* az utolsó menüpont alsó margója a dobozon belül marad (mint élőn) */ .sidebar--left .menu-left-szolgal .module__title { height: 40px; margin: 0; padding: 0 0 0 54px; border: 0; background-repeat: no-repeat; background-position: 20px 5px; color: var(--c-nav); font-family: var(--font-cond-faux); font-size: 22px; font-weight: 700; line-height: 26.4px; letter-spacing: 1px; text-transform: none; } .menu-acc { margin: 0; padding: 0; list-style: none; } .menu-acc li { margin: 0; padding: 0; background: none; line-height: 25px; } .menu-acc .menu-acc__item--l1 { box-sizing: content-box; width: 250px; margin: 0 0 8px; border: 1px solid #b3b3b3; border-bottom: 2px solid var(--c-brand); overflow: hidden; } .menu-acc :is(.menu-acc__toggle, .menu-acc__link, .menu-acc__label) { display: block; box-sizing: content-box; width: auto; min-height: 32px; margin: 0; padding: 8px 20px 0 8px; border: 0; background: none; color: #6486bd; font-family: var(--font-cond-faux); font-size: 17px; font-weight: 700; line-height: 25.5px; letter-spacing: .8px; text-align: left; text-decoration: none; } .menu-acc__item--l1 > :is(.menu-acc__toggle, .menu-acc__link, .menu-acc__label) { padding-left: 46px; background-repeat: no-repeat; color: var(--c-brand); } .menu-acc .menu-acc__toggle { width: 100%; min-height: 40px; box-sizing: border-box; cursor: pointer; } /* gomb: a teljes szélesség miatt border-box, így a 32 + 8 px magasság egyben */ .menu-acc__item--l1 > .menu-acc__toggle { background-position: 5px 5px; } .menu-acc__item--l1 > .menu-acc__toggle:hover { background-color: #6486bd; color: var(--c-white); } .menu-acc__item--l1.is-open > .menu-acc__toggle { background-color: var(--c-brand); color: var(--c-white); } .menu-acc__item--l1 > .menu-acc__link { background-position: 3px 3px; } .menu-acc__item--l1 > .menu-acc__link:hover { background-color: #6486bd; color: var(--c-white); } .menu-acc__item--l1.is-current > .menu-acc__link { background-color: var(--c-brand); color: var(--c-white); } .menu-acc__sub { display: none; margin: 5px 0; padding: 0 3px; list-style: none; } .menu-acc__item.is-open > .menu-acc__sub { display: block; } .menu-acc .menu-acc__sub > li { margin: 0 0 8px; border-bottom: 1px solid #e2e2e2; } .menu-acc .menu-acc__sub > li:last-child { border-bottom: 0; } .menu-acc__sub .menu-acc__link:hover { background: #8ba4cd; color: var(--c-white); } .menu-acc__sub .is-current > .menu-acc__link { border-bottom: 2px solid var(--c-brand); background-repeat: no-repeat; background-position: 98% 50%; color: var(--c-brand); } .menu-acc__sub .is-current:last-child > .menu-acc__link { border-bottom: 0; } /* a szolgáltatás-oldalak rácsa (élőn: bal hasáb 258 + 10, tartalom, 18 + jobb hasáb 212) */ .has-left .site-grid:has(> .sidebar--left .menu-left-szolgal) { grid-template-columns: 258px 10px minmax(0, 1fr) 18px var(--side-w); column-gap: 0; } .site-grid:has(> .sidebar--left .menu-left-szolgal) > .sidebar--left { grid-column: 1; } .site-grid:has(> .sidebar--left .menu-left-szolgal) > .site-main { grid-column: 3; } .site-grid:has(> .sidebar--left .menu-left-szolgal) > .sidebar--right { grid-column: 5; } /* --- Lapozó (html/layouts/joomla/pagination) – élőn div.pagination: lekerekített számgombok, nyíl-képek a li-n --- */ .pagination { clear: both; margin: 20px 0; text-align: center; } .pagination ul { display: inline-block; margin: 0; padding: 0; list-style: none; } .pagination li { display: inline-block; margin: 0 5px; padding: 0; background-repeat: no-repeat; line-height: 25px; } .pagination .pagenav { display: block; float: left; box-sizing: content-box; min-width: 36px; margin: 0 4px; padding: 0; border-radius: 6px; color: #6b6c6c; font-size: 14px; font-weight: 700; line-height: 33px; text-align: center; text-decoration: none; transition: all .2s ease-in; } .pagination a.pagenav { background: var(--c-white); } .pagination a.pagenav:hover, .pagination a.pagenav:focus-visible { background: #8ba4cd; color: var(--c-white); } .pagination .is-current .pagenav { border: 1px solid #c2d3eb; background: #e6eef9; color: #6486bd; } .pagination :is(.pagination-start, .pagination-prev, .pagination-next, .pagination-end) .pagenav { width: 36px; min-width: 0; height: 36px; border: 0; background: none; color: #444; } .pagination :is(.pagination-start, .pagination-prev, .pagination-next, .pagination-end) a.pagenav:hover { background: none; } /* --- Lábléc menü (kék sáv) ----------------------------------------------- */ .footer-menu { border-top: 2px solid var(--c-white); border-bottom: 2px solid var(--c-footer-menu-line); background: var(--c-footer-menu); text-align: center; } .footer-menu .inline-menu, .footer-menu ul { display: flex; justify-content: center; flex-wrap: wrap; margin: 0; } .footer-menu li { display: inline-block; } .footer-menu a, .footer-menu .mod-menu__heading { display: block; padding: 13px 30px 8px; border-bottom: 2px solid transparent; color: var(--c-footer-menu-text); font-family: var(--font-cond); font-size: 17px; font-weight: 700; line-height: 23px; transition: all .3s ease-in-out; } .footer-menu a:hover { border-bottom-color: var(--c-white); background-repeat: repeat-x; background-position: 0 100%; color: var(--c-footer-menu-text); text-decoration: none; } .footer-menu li.current > a, .footer-menu li.active > a { color: var(--c-footer-menu-active); background: none; } /* --- Lábléc (logó · cím · készítő) --------------------------------------- */ .footer-main { padding: 10px 0 0; background: var(--c-footer); color: var(--c-footer-text); line-height: 20px; } .footer-main a { color: var(--c-footer-text); } .footer-main a:hover { color: var(--c-white); } .footer-main p { margin: 0 0 10px; } .footer-main__inner > * { padding-bottom: 10px; } .footer-contact { font-size: 15px; line-height: 20px; color: var(--c-footer-text); text-align: center; } .footer-contact strong { color: var(--c-white); } .footer-credit { font-size: 11px; line-height: 1.2; color: var(--c-footer-text); } .footer-credit img { display: block; margin: 2px auto 0; } .footer-bottom { padding: 15px 0; border-top: 2px solid var(--c-footer-bottom-line); border-bottom: 3px solid var(--c-white); background: var(--c-footer-bottom); color: var(--c-footer-bottom-text); } .site-footer .copyright { margin: 0; font-size: 12px; line-height: 18px; color: var(--c-footer-bottom-text); text-align: center; } .site-footer .copyright a { color: var(--c-footer-link); } .site-footer .copyright a:hover { color: #d8e3f3; text-decoration: none; } .back-top { position: absolute; right: var(--gutter); top: -9px; display: flex; align-items: center; gap: 15px; color: var(--c-footer-bottom-text); font-size: 11px; line-height: 34px; } .back-top::after { content: ""; flex: 0 0 40px; width: 40px; height: 34px; background-repeat: no-repeat; } .back-top:hover { color: var(--c-white); text-decoration: none; } .back-top[data-hidden] { opacity: 0; visibility: hidden; } .back-top { transition: opacity .4s linear, visibility .4s linear; } /* Felugró ablak (a „modal_link” hivatkozások, a Joomla joomla-dialog eleme; lásd media/js/modal-links.js): világoskék, áttetsző háttér; fehér doboz 4 px-es világoskék kerettel; jobb felül „bezár ×” gomb */ joomla-dialog.bs-modal dialog { box-sizing: border-box; max-width: calc(100vw - 20px); max-height: calc(100dvh - 20px); padding: 0; border: 4px solid var(--c-brand-border); border-radius: 0; background: var(--c-white); box-shadow: none; overflow: hidden; } joomla-dialog.bs-modal dialog[open] { display: flex; } joomla-dialog.bs-modal dialog::backdrop { background: var(--c-modal-overlay); } joomla-dialog.bs-modal .joomla-dialog-container { position: relative; display: flex; flex-flow: column; width: 100%; } joomla-dialog.bs-modal .joomla-dialog-header { position: absolute; z-index: 1; top: 5px; right: 5px; padding: 0; border: 0; } joomla-dialog.bs-modal .joomla-dialog-footer { display: none; } joomla-dialog.bs-modal .joomla-dialog-body { flex: 1 1 auto; min-height: 0; padding: 12px 15px 43px; overflow: hidden; } joomla-dialog.bs-modal--titled .joomla-dialog-header { top: 14px; right: 15px; } joomla-dialog.bs-modal--titled .joomla-dialog-body { padding-top: 59px; } joomla-dialog.bs-modal iframe.iframe-content { display: block; width: 100%; height: 100%; border: 0; } joomla-dialog.bs-modal .button-close { display: block; width: 70px; height: 30px; margin: 0; padding: 0; border: 0; background-color: transparent; background-repeat: no-repeat; cursor: pointer; } joomla-dialog.bs-modal .button-close:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 2px; } joomla-dialog.bs-modal.loading dialog::after { content: ""; position: absolute; top: 50%; left: 50%; width: 32px; height: 32px; margin: -16px 0 0 -16px; border: 3px solid var(--c-brand-border); border-top-color: var(--c-brand); border-radius: 50%; animation: bs-spin 1s linear infinite; } @keyframes bs-spin { to { transform: rotate(360deg); } } /* Képes csempék (Egyedi modul „tiles” elrendezés, content-bottom pozíció; pl. a szolgáltatás-oldalak alján a csoport aloldalai – a régi oldal „tekmekbox” modulja): 202 × 272-es fehér dobozok, 186 px-es kép, alatta nagybetűs cím kék aláhúzással; rámutatáskor a doboz kissé nagyobb, a cím kék sávra fehér */ .content-bottom { margin-top: 30px; } .content-bottom > .module + .module { margin-top: 30px; } .tiles { display: flow-root; } .tiles .category-view { margin: 0 0 25px; } .tiles .category-view .row { display: flex; flex-wrap: wrap; margin: 0; padding: 0 0 0 26px; text-align: center; } .tiles .category { position: relative; box-sizing: content-box; width: 200px; margin: 11px; padding: 0; border: 1px solid #d2d2d2; background: var(--c-white); transition: .2s; } .tiles .category:is(:hover, :has(:focus-visible)) { z-index: 1; border-color: var(--c-brand); transform: scale(1.06); } .tiles .category .spacer { position: relative; padding: 6px; } .tiles .category h2 { margin: 0; padding: 0; font-size: 14px; line-height: 0; text-align: center; } .tiles .category h2 a { display: table-cell; width: 186px; height: 186px; vertical-align: middle; } .tiles .category h2 img { display: block; max-width: 100%; height: auto; margin: 2px auto 0; } .tiles .categoryTitle { display: table-cell; box-sizing: content-box; width: 186px; height: 68px; border-bottom: 2px solid var(--c-brand); color: var(--c-brand); font: 400 18px/normal helvetica_bold, var(--font-cond); text-align: center; text-transform: uppercase; vertical-align: middle; transition: var(--t-fast); } .tiles .categoryTitle a { color: var(--c-brand-strong); text-decoration: none; } .tiles .category:is(:hover, :has(:focus-visible)) .categoryTitle { background: var(--c-brand); } .tiles .category:is(:hover, :has(:focus-visible)) .categoryTitle a { color: var(--c-white); } .tiles .clear { display: none; } /* Aloldalválasztó (mod_menu „select”): csak keskeny képernyőn látszik (responsive réteg, ≤ 1050 px); a régi oldal szerint középre zárt, 300 px széles, sötétkék legördülő */ .page-select { display: none; margin: 0 0 15px; padding: 15px 5px; text-align: center; } .page-select__control { box-sizing: border-box; width: 300px; max-width: 100%; height: 36px; margin: 0; padding: 6px; border: 1px solid var(--c-brand); border-radius: 0; background-color: var(--c-brand); color: var(--c-white); font: 300 15px/20px var(--font-base); text-align: center; vertical-align: middle; cursor: pointer; } .page-select__control:focus-visible { outline: 2px solid var(--c-brand-mid); outline-offset: 2px; } /* Képnagyító (template.js, natív ): a régi oldal Slimbox-a szerint – sötét háttér, 10 px-es fehér keret, alatta félkövér felirat és „1 / 13” számláló, jobbra „BEZÁR ×”; lapozás a kép két felére kattintva / nyilakkal */ dialog.lightbox { box-sizing: content-box; max-width: calc(100vw - 40px); max-height: calc(100dvh - 40px); padding: 10px 10px 0; border: 0; background: var(--c-white); overflow: visible; } dialog.lightbox::backdrop { background: rgb(0 0 0 / .8); } dialog.lightbox > img { display: block; width: auto; height: auto; max-width: calc(100vw - 60px); max-height: calc(100dvh - 100px); } .lightbox__caption { display: flow-root; min-height: 32px; margin: 0; padding: 5px 76px 10px 0; color: #666; font: 700 10px/1.4 Verdana, Arial, Geneva, Helvetica, sans-serif; text-align: left; } .lightbox__title { display: block; } .lightbox__count { display: block; font-weight: 400; } .lightbox__close { position: absolute; right: 10px; bottom: 15px; display: flex; align-items: center; gap: 4px; height: 22px; padding: 0; border: 0; background: none; color: #555; font: 400 14px/22px var(--font-base); text-transform: uppercase; cursor: pointer; } .lightbox__close::after { content: "✕"; color: #222; font-size: 18px; font-weight: 700; } .lightbox__close:hover { color: var(--c-brand); } .lightbox__nav { position: absolute; top: 10px; bottom: 52px; width: 50%; padding: 0 12px; border: 0; background: none; color: transparent; font-size: 48px; line-height: 1; cursor: pointer; } .lightbox__nav--prev { left: 0; text-align: left; } .lightbox__nav--next { right: 0; text-align: right; } .lightbox__nav:is(:hover, :focus-visible) { color: var(--c-white); text-shadow: 0 0 6px rgb(0 0 0 / .8); } .lightbox__nav[hidden] { display: none; } @media (prefers-reduced-motion: reduce) { joomla-dialog.bs-modal.loading dialog::after { animation: none; } } } /* ========================================================================== responsive Töréspontok az élő oldal (style2.css) szerint: 1250 · 1050 · 1030 · 970 · 930 · 710 · 660 · 520 */ @layer responsive { /* űrlap: a saját szélességéhez igazodik (felugró ablakban az ablak, oldalba ágyazva a hasáb szélessége; görgetősávval is egymás melletti címke–mező 600 px felett) – élőn 930 / 500 px-es ablaknál */ @container askform (max-width: 600px) { .ask-form__title :is(h1, h3) { font-size: 24px; } .ask-form .row, .ask-form .row.checkbox, .ask-form .row.textarea, .ask-form .row--captcha { margin: 0; padding-inline: 10px; } .ask-form .row > label, .ask-form .row > .control-label { flex-basis: 100%; padding: 6px 6px 0 4px; font-size: 15px; text-align: left; } .ask-form .row__control, .ask-form .row.textarea .row__control { flex: 1 1 100%; } .ask-form .row.checkbox > label { flex: 1 1 auto; flex-basis: auto; } .ask-form .row.checkbox .row__control { flex: 0 0 auto; } } @container askform (max-width: 480px) { .ask-form__title :is(h1, h3) { padding: 16px 30px 12px; font-size: 20px; } .ask-form__product { font-size: 22px; } .ask-form .row--choice :is(.form-check, .radio) { margin-right: 10px; } } /* teljes szélességű tartalom (oldalosztály „twenty-year”, pl. a 2017-es „Húsz éves a Bio-Science” oldal; élőn twenty-year.css): a fő hasáb minden szélességen a képernyő teljes szélességében, térköz nélkül (a lenti töréspontok térközeit is felülírja) */ .is-inner.twenty-year .site-main-wrap { padding-block: 0; } .is-inner.twenty-year .site-main-box { max-width: none; padding-inline: 0; } @media (max-width: 1280px) { .has-left .site-grid:has(> .sidebar--left .menu-left-szolgal) { grid-template-columns: 255px 13px minmax(0, 1fr) 15px var(--side-w); column-gap: 0; } .sidebar--left .menu-left-szolgal { margin-left: -3px; } /* cikkcím (élőn .page-header h2, ≤ 1280 px): kisebb betű, többsoros, a nyíl a felső sorban */ .item-page .item-page__title:not(.item-page__title--news) { padding-bottom: 15px; background-position: 7px 10px; font-size: 22px; line-height: 1.3; } .home-news { max-width: none; width: calc(100% - 260px); padding-inline: 15px; } /* „Online oligo rendelés” gomb: középre, a csempék alá (élőn ≤ 1280 px) */ .module--arrow-btn { margin-top: 0; padding-right: 0; text-align: center; } /* belső oldalak: tartalom = tároló − 290 px (15 px bal margó), 15 px köz, jobb oszlop 212 px, utána 48 px üres (élőn #jm-content-wrapper) */ .is-inner .site-main-box { padding-left: 15px; } .is-inner.has-right .site-grid { grid-template-columns: minmax(0, 1fr) var(--side-w); column-gap: 15px; padding-right: 48px; } /* jobb oszlop: a modul nem lóg ki balra (élőn .termekajanlo-slider { margin-left: 0 }) */ .sidebar--right .module { margin-left: 0; padding: 0 16px 0 0; } .page-title { margin-right: 0; } /* termékoldal: fülek helyett legördülő lista (élőn .mobile-productTabs) */ .tabs__list { display: none; } .tabs__select { display: block; } } @media (min-width: 1251px) and (max-width: 1280px) { /* élőn itt a gomb dobozát a csempelista igazítja (17 px-től, 918 px széles) */ .module--arrow-btn { width: 918px; margin-left: 17px; } } @media (max-width: 1270px) { .workflow-menu li, #workflow-menu li { max-width: 120px; } } @media (max-width: 1250px) { .main-menu > li > :is(a, span) { padding-inline: 12px; } .main-menu > li > :is(a, span) > .menu__label { font-size: 17px; } .home-showcase__inner { grid-template-columns: minmax(0, 1fr); } .home-showcase__side { display: none; } .home-showcase__inner { max-width: none; padding-inline: var(--gutter); } .section-bar__title { padding-left: 15px; } .manufacturers .module__title { max-width: none; padding-left: 15px; } .home-showcase .module__header { margin-inline: calc(-1 * var(--gutter)); } .cat-tiles { width: 900px; max-width: 100%; margin-inline: auto; padding: 12px 0 0; } /* élőn: #vina-content-slider420 { margin-left: -20px } + #jm-header-top { overflow-x: hidden } – a keret a bal szélhez ugrik, jobbra levágódik */ .site-banner { overflow-x: hidden; } .site-banner__inner { width: calc(var(--banner-w) * var(--slider-s, 1) + 12px); max-width: none; margin-left: 0; } } @media (min-width: 971px) and (max-width: 1100px) { /* tablet (971–1100 px): a 9 menüpont egy sorban marad – kisebb betű és térköz, tördelés nélkül */ .main-menu { flex-wrap: nowrap; } .main-menu > li > :is(a, span) { padding-inline: 8px; } .main-menu > li > :is(a, span) > .menu__label { font-size: 15px; letter-spacing: .5px; white-space: nowrap; } } @media (max-width: 1050px) { /* szolgáltatás-oldalak: a bal menü elrejtve (élőn a képernyőn kívülre kerül, a tartalom alatt üres helyet hagyva) */ .has-left .site-grid:has(> .sidebar--left .menu-left-szolgal) { grid-template-columns: minmax(0, 1fr); } .site-grid:has(> .sidebar--left .menu-left-szolgal) > :is(.sidebar--left, .sidebar--right) { display: none; } .site-grid:has(> .sidebar--left .menu-left-szolgal) > .site-main { grid-column: 1; } /* helyette a fő hasáb tetején az aloldalválasztó (mod_menu „select” elrendezés, content-top pozíció) */ .page-select { display: block; } .home-news { width: auto; } .home-top { display: none; } .has-right .site-grid { grid-template-columns: minmax(0, 1fr); } .sidebar--right { display: none; } .is-inner .site-main-box { padding-inline: 15px; } .is-inner.has-right .site-grid { grid-template-columns: minmax(0, 1fr); padding-right: 0; } /* termékoldal: a bal „Kategória választó” rejtve, a tartalom teljes szélességű */ .product { grid-template-columns: minmax(0, 1fr); } .product__nav { display: none; } } @media (max-width: 1030px) { .site-header__search { display: none; } } @media (max-width: 970px) { /* morzsamenü: kisebb betű, 34 px-es sor, kisebb nyíl (élőn .breadcrumb li a / .divider) */ .crumbs__link { padding: 8px 10px 8px 0; font-size: 14px; line-height: 1.3; } .crumbs__item::after { width: 14px; height: 35px; background-size: 14px 35px; } /* menüsáv: 54 px magas, balra kereső ikon, jobbra 34 × 19-es „hamburger” (élőn #jm-djmenu-space) */ .site-nav__inner { position: relative; min-height: 54px; } .nav-tools { display: flex; align-items: center; height: 54px; } .nav-tools__search { display: block; width: 34px; height: 34px; background-repeat: no-repeat; background-position: 50% 0; } .nav-tools__search:hover { background-position: 50% -34px; } .nav-tools__links { display: none; } .nav-toggle { display: block; position: absolute; right: var(--gutter); top: 16px; width: 34px; height: 19px; padding: 1px 6px; border: 0; background: none; z-index: 5; } .nav-toggle span { display: block; height: 3px; border-radius: 2px; background: var(--c-brand); } .nav-toggle span + span { margin-top: 4px; } /* mobil menüpanel (élőn #mobile-menu-container): 250 px, balról, árnyékkal; az oldal 200 px-szel jobbra csúszik */ .site-nav__panel { position: fixed; left: -250px; top: 0; z-index: 999; width: 250px; height: 100vh; overflow-y: auto; background: var(--c-white); text-align: left; transition: all .3s linear; } .nav-open .site-nav__panel { left: 0; box-shadow: 0 0 15px 10px rgb(13 56 128 / .6); } .nav-open { overflow: hidden; } .page { position: relative; left: 0; transition: left .3s linear; } .nav-open .page { left: 200px; } .site-nav__head { display: block; position: relative; padding-top: 40px; } .nav-close { position: absolute; right: 10px; top: 5px; width: 30px; height: 30px; padding: 0; border: 0; background: none; color: var(--c-brand); font-size: 27px; font-weight: 700; line-height: 30px; } .nav-backdrop { display: block; position: fixed; inset: 0; z-index: 990; background: rgb(13 56 128 / .7); opacity: 0; visibility: hidden; transition: opacity .3s linear; } .nav-open .nav-backdrop { opacity: 1; visibility: visible; } .main-menu { display: block; margin-top: 5px; padding: 0 10px; } .main-menu > li { top: 0; position: relative; margin: 0; } .main-menu li + li { border-top: 1px solid #ccc; } .main-menu > li.nav-hidden + li { border-top: 0; } .main-menu > li > :is(a, span) { display: block; height: auto; padding: 8px 30px 8px 12px; border: 0; background: none !important; } .main-menu > li > :is(a, span) > .menu__label { height: auto; font-family: var(--font-base); font-size: 16.5px; font-weight: 400; line-height: 25px; letter-spacing: 0; color: var(--c-brand-mid); } .main-menu > li > a:hover > .menu__label { color: var(--c-brand); } /* almenük (élőn ul.sublist): 1. szint #e0ecff, mélyebb #cce0ff; elem 8/12 px belső margó, a link 8/20/8/8 */ .main-menu .menu__sub { position: static; display: none; visibility: visible; opacity: 1; background: #e0ecff; } .main-menu li.is-open > .menu__sub { display: block; } .main-menu :is(.menu__sub, .mega) .menu__sub { background: #cce0ff; } .main-menu .menu__sub-in { width: auto; padding: 0; border: 0; background: none; box-shadow: none; } .main-menu :is(.menu__sub, .mega) li { position: relative; margin: 0; padding: 8px 12px; } .main-menu :is(.menu__sub, .mega) li li { padding: 0; } .main-menu :is(.menu__sub, .mega) li + li { border-top: 1px solid #c6d8f4; } .main-menu :is(.menu__sub, .mega) .menu__sub li + li { border-top-color: #bacfee; } .main-menu :is(.menu__sub, .mega) :is(a, .mod-menu__heading) { display: block; margin: 0; padding: 8px 20px 8px 8px; border: 0; color: var(--c-brand-mid); font-family: var(--font-base); font-size: 15px; font-weight: 400; line-height: 1.3; } .main-menu :is(.menu__sub, .mega) a:hover { color: var(--c-brand); text-decoration: none; } .menu__toggle { display: block; position: absolute; right: 0; top: 4px; z-index: 2; width: 30px; height: 30px; padding: 0; border: 0; background: #dfebff no-repeat 50% 50% / 40%; } :is(.menu__sub, .mega) .menu__toggle { background-color: #cce0ff; } .menu__toggle[aria-expanded="true"] { transform: rotate(180deg); } .main-menu > li.nav-mega > .menu__toggle--mega { display: block; } .main-menu > li.nav-mega > .mega { position: static; display: none; width: auto; padding: 0; border: 0; box-shadow: none; visibility: visible; opacity: 1; background: #e0ecff; } .main-menu > li.nav-mega.is-open > .mega { display: block; } .prod-menu { display: none; } .mega-mobile { display: block; } /* fejléc: csak ikonok (élőn a feliratok rejtve), a jobb oszlop jobbra zárva */ .head-link__text { display: none; } .head-links:not(.head-links--row) .head-link { display: inline-block; } .head-link { margin: 0; } .head-link__icon { margin: 0; } .site-header__right .head-links { text-align: right; } .head-links--row .head-link { float: none; display: inline-block; margin-right: 4px; } /* élőn: a jobb oldali ikonok nem tolódnak le, a LinkedIn után 7 px köz, a sor 3 px-szel jobbra ér */ .site-header__right .head-link__icon { top: 0; } .site-header__right .head-links--row { margin-right: -3px; } .head-links--row .head-link--linkedin { margin-right: 7px; } } @media (max-width: 930px) { .cat-tiles { width: 674px; } .section-bar { width: auto; padding-right: 10px; } .front-news { padding-bottom: 5px; } .front-news__item { width: auto; height: auto; flex: 1 1 100%; padding-right: 30px; } .site-header__barwrap { height: auto; } .site-header__bar { grid-template-columns: 130px minmax(0, 1fr) 130px; } .site-brand { padding-left: 0; } .site-brand__logo { margin: 0 auto; } .slider-fit { display: none; } .site-banner__inner { padding: 0; background: none; } /* élőn: .custom-footer > .block { float: none; padding-top: 25px } – alsó margó nélkül, a cím-blokk p-je 5 px-es margóval */ .footer-main { padding-bottom: 10px; } .footer-main__inner { grid-template-columns: minmax(0, 1fr); } .footer-main__inner > * { padding: 25px 0 0; } .footer-main__inner img { display: block; margin: 0 auto; } .footer-main__inner .footer-contact { margin: 5px 0; } } @media (max-width: 710px) { /* hírek: egy hasáb (élőn span6 99 %, alsó margó 15 px) */ .blog__row { grid-template-columns: minmax(0, 99%); } .blog__col { margin-bottom: 15px; } .cat-tiles { width: 450px; } .manufacturers .module__title { padding-left: 55px; padding-right: 0; } .manufacturers .module__title::before { margin-left: -32px; } } @media (max-width: 685px) { /* a régi oldal keresősúgója (640 px széles angol szöveg) itt két sorba tört – a helye megmarad */ .product-search { margin-bottom: 52px; } } @media (max-width: 365px) { .product-search { margin-bottom: 78px; } } @media (max-width: 660px) { .site-header__left, .site-header__right { display: none; } .site-header__bar { display: block; width: auto; margin: 0; } .site-header__bar > * { padding-left: 0; } .site-brand__logo { margin: 0 auto; } /* a fejléc ikonjai a menüsávba kerülnek (élőn: kereső, hírlevél, telefon, e-mail, LinkedIn – 34 × 34-es ikonok) */ .site-nav__inner { min-height: 44px; } .nav-tools { align-items: flex-start; height: 44px; } .nav-tools__links, .nav-tools__links .head-links { display: contents; } .nav-tools .head-link { display: block; float: none; width: 34px; height: 34px; margin: 0; padding: 0; overflow: hidden; } .nav-tools .head-link__icon { top: 0; width: 34px; height: 34px; margin: 0; border-radius: 0; background-position: 50% -3px; } .nav-tools .head-link:hover .head-link__icon { background-position: 50% -43px; } .nav-tools .head-link__text { display: none; } .nav-tools .head-link:has(.head-link__icon--home) { display: none; } .nav-tools .head-link:has(.head-link__icon--newsletter) { order: 1; } .nav-tools .head-link:has(.head-link__icon--phone) { order: 2; } .nav-tools .head-link:has(.head-link__icon--mail) { order: 3; } .nav-tools .head-link--linkedin { order: 4; padding: 0 0 0 6px; } .nav-tools .head-link--linkedin img { width: 28px; } .nav-toggle { top: 6px; } } @media (max-width: 600px) { .tile { width: calc(50% - 10px); margin: 5px; height: 260px; } .tile__label { font-size: 14px; } } @media (max-width: 520px) { /* képes csempék: két hasáb, a kép a dobozhoz igazodik (élő style2.css szerint) */ .tiles .category-view .row { padding-left: 0; } .tiles .category { width: calc(50% - 12px); height: 260px; margin: 5px; } .tiles .category h2 a { width: auto; } .tiles .categoryTitle { width: auto; height: 88px; } .front-news__item { padding-inline: 10px; } /* kategóriaoldal: két oszlop (élőn .category-view .category / .browse-view .product.vm-col: 50% − 12 px, 260 px magas) */ .cat-grid { padding-left: 0; } .cat-card { width: calc(50% - 10px); height: 262px; margin: 5px; } /* élőn a kártya 260 px magas, a cím lelóghat róla (a kép helye 186 px marad) */ .cat-card__link { height: auto; } .cat-card__media { flex: none; width: auto; } .cat-card__media img { max-width: min(186px, 100%); height: auto; } .cat-card__title { width: 186px; max-width: 100%; min-height: 90px; margin-inline: auto; } .product-grid { padding-left: 0; } .product-card { width: calc(50% - 12px); height: 260px; margin: 5px; } .product-card__media img { max-width: 100%; height: auto; } /* élőn a csempelista teljes szélességű (0 oldalmargó), cella: (50% − 12px) + 2px keret, 260 + 7 + 2 = 269 magas */ .home-showcase__inner { padding-inline: 0; } .home-showcase .module__header { margin-inline: 0; } .cat-tiles { width: auto; } .cat-tile { width: calc(50% - 10px); min-width: auto; height: 269px; margin: 5px; } .cat-tile__media { width: calc(100% - 14px); max-height: 156px; } .cat-tile__media img { display: block; max-width: 156px; max-height: 156px; margin: 0 auto; } .cat-tile__label { width: calc(100% - 14px); font-size: 14px; } .footer-menu ul, .footer-menu .inline-menu { display: block; padding: 15px 0 5px; } .footer-menu li { display: block; line-height: 1; } .footer-menu a, .footer-menu a:hover { margin-bottom: 1px; padding: 8px; border: 0; background: none; line-height: 1.5; } .footer-bottom { padding-bottom: 50px; } .back-top { top: auto; bottom: -35px; } } @media (max-width: 440px) { .site-header__barwrap { height: 140px; } .site-brand__logo { height: 140px; width: auto; } /* termékoldal: a rövid leírás teljes szélességű a kép alatt */ .product__lead { flex-basis: 100%; margin-bottom: 57px; padding-left: 0; } /* gyártólogók: 3 oszlop, a cella teljes szélességű, a link kitölti (élőn #cf_list_…_467 li { width: 33% }) */ .manufacturers .module__body { padding: 5px 10px 20px; } .front-news__item { padding-inline: 0; } .front-news__intro { word-break: break-all; } .front-news__more .readmore-btn { color: var(--c-brand-strong); } .logo-list li { width: 33%; } .logo-list__item { position: relative; width: 100%; height: 79px; } .logo-list__link { position: absolute; inset: 0; width: auto; height: auto; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0s !important; } .slider__slide { transition: none; } .notice[open] { animation: none; } } } /* ========================================================================== utilities A régi tartalmakban előforduló segédosztályok (Bootstrap-nevek) – a szerkesztő is használhatja őket. */ @layer utilities { /* a régi tartalmak harmonikájának csukott panelje (template.js) – a régi tartalomstílusok display-ét is felülírja */ .ui-accordion-content[hidden] { display: none; } .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } .pull-left { float: left; } .pull-right { float: right; } /* termékoldal: a leírásfül utolsó elemének alsó margója ne növelje az oldalt – élőn ez a tartalomhasáb 30 px-es alsó margójába olvadt, itt a termékdoboz (rács) megtartaná */ .tabs__panel > :last-child, .tabs__panel > :last-child > :last-child { margin-bottom: 0; } } /* --- Oldaltörés fülekkel a cikkben (Tartalom - Oldaltörés bővítmény, „Fülek” stílus; élőn dl.tabs) ---------------- Fülsor halványszürke alsó vonallal, az aktív fül alatt kék vonal; a panel 20 px belső margóval. RÉTEGEN KÍVÜL: a Joomla joomla-tab.css-e rétegezetlen, és a rétegezett szabályok mindig alulmaradnak vele szemben. */ .article__body joomla-tab { display: block; } .article__body joomla-tab > div[role="tablist"] { display: flow-root; overflow: visible; width: 100%; margin: 0; padding: 0; border: 0; border-bottom: 1px solid #ececec; border-radius: 0; background: none; box-shadow: none; white-space: normal; } .article__body joomla-tab > [role="tablist"] > [role="tab"] { float: left; margin: 0 0 -1px; padding: 14px 20px; border: 0; border-bottom: 1px solid transparent; border-radius: 0; background: none; box-shadow: none; color: #858585; font-family: var(--font-base); font-size: 15px; font-weight: 400; line-height: 16.5px; cursor: pointer; transition: all .2s ease-in; } .article__body joomla-tab > [role="tablist"] > [role="tab"]:is(:hover, [aria-selected="true"]) { border-bottom-color: #2d597f; background: none; color: #444; } .article__body joomla-tab > [role="tablist"] > [role="tab"]::after { display: none; } .article__body joomla-tab > joomla-tab-element { display: none; padding: 20px; border: 0; background: none; box-shadow: none; line-height: 20px; } .article__body joomla-tab > joomla-tab-element[active] { display: block; } .article__body joomla-tab > button[aria-controls] { display: none; } /* --- Jelentkezőlapok (Convert Forms; az űrlap Megjelenés › „CSS-osztály utótag”: reg-urlap) – a régi .registration-form szerint: lebegő címke (üres mezőben a mezőn, fókuszban/kitöltve fölötte kicsiben), csak alsó vonal, egy oszlop. A színeket, betűméreteket és a gombot az űrlap saját Megjelenés-beállításai adják (CSS-változók). RÉTEGEN KÍVÜL: a Convert Forms convertforms.css-e rétegezetlen. */ .convertforms.reg-urlap .cf-form-wrap { padding: 0; } .convertforms.reg-urlap .cf-fields { flex-direction: column; flex-wrap: nowrap; margin: 0; } .convertforms.reg-urlap .cf-control-group { position: relative; margin: 0 0 30px; padding: 0; } .convertforms.reg-urlap .cf-control-group[data-type="submit"] { margin: 0; } .convertforms.reg-urlap .cf-control-label { position: absolute; top: 0; left: 0; z-index: 1; pointer-events: none; transition: top .3s; } .convertforms.reg-urlap .cf-label { display: flex; margin: 0; line-height: 20px; transition: font-size .3s; } .convertforms.reg-urlap .cf-label .cf-required-label { color: inherit; } .convertforms.reg-urlap .cf-control-group:has(.cf-input:focus, .cf-input:not(:placeholder-shown)) > .cf-control-label { top: -15px; } .convertforms.reg-urlap .cf-control-group:has(.cf-input:focus, .cf-input:not(:placeholder-shown)) > .cf-control-label .cf-label { font-size: 12px; } .convertforms.reg-urlap .cf-input:not([type="checkbox"], [type="radio"]) { height: 36px; border-width: 0 0 1px; font-weight: 300; line-height: 16px; transition: border-color .3s; } .convertforms.reg-urlap .cf-input::placeholder { color: transparent; } .convertforms.reg-urlap .cf-control-group.is-multiline { margin-top: 50px; } /* élőn .form-group.multi-line-label (kétsoros kérdés-címke) */ .convertforms.reg-urlap .cf-control-group.is-multiline > .cf-control-label { top: -12px; } .convertforms.reg-urlap .cf-control-group.is-multiline:has(.cf-input:focus, .cf-input:not(:placeholder-shown)) > .cf-control-label { top: -36px; } /* jelölőnégyzet-csoport: félkövér kék csoportcím, alatta a választások kisebb szürke betűvel */ .convertforms.reg-urlap fieldset.cf-control-group { margin: 4px 0 13px; } .convertforms.reg-urlap legend.cf-label { margin: 0 0 8px; padding: 0; font-weight: 700; color: #2c5773; } .convertforms.reg-urlap .cf-checkbox-group, .convertforms.reg-urlap .cf-radio-group { gap: 0; padding: 3px 0 3px 9px; } .convertforms.reg-urlap :is(.cf-checkbox-group, .cf-radio-group) input { margin: 2px 8px 3px 4px; } .convertforms.reg-urlap :is(.cf-checkbox-group, .cf-radio-group) .cf-label { font-size: 13px; color: #848484; cursor: pointer; } .convertforms.reg-urlap .cf-control-input { gap: 0; } .convertforms.reg-urlap .cf-btn { width: auto; line-height: 20px; } /* visszajelzés: zöld (sikeres) / piros (hiba) szöveg, mint a régin */ .convertforms.reg-urlap:is(.cf-success, .cf-error) .cf-response { margin: 0 0 16px; padding: 0; background: none; color: green; text-align: left; } .convertforms.reg-urlap.cf-error .cf-response { color: #d54242; } /* --- Convert Forms „ask-urlap” – RÉTEGEN KÍVÜL (a convertforms.css rétegezetlen, a rétegezett szabályok alulmaradnának vele szemben) --- */ /* Convert Forms-űrlap az „ask-form” (árajánlatkérő) kinézetével: hírlevél-feliratkozás, szekvenálás, peptidszintézis. Az űrlap Megjelenés › „CSS-osztály utótag”: ask-urlap, a cikkben egy .ask-form burkolóban (cím + {convertforms N}). Címke balra (155 px), mező jobbra (556 px), a kötelező „*” a címke után, a „:” a sablonból – mint a régi askform táblázat. */ .ask-form .convertforms.ask-urlap { font-family: var(--font-base); color: var(--c-text); } .ask-form .ask-urlap .cf-form-wrap { padding: 0; } .ask-form .ask-urlap .cf-fields { display: block; margin: 0; } .ask-form .ask-urlap .cf-control-group { display: flex; flex-wrap: wrap; align-items: flex-start; width: auto; max-width: none; margin: 0; padding: 6px 0; } .ask-form .ask-urlap .cf-control-label, .ask-form .ask-urlap legend.cf-label { display: flex; justify-content: flex-end; flex: 0 0 155px; max-width: none; float: none; width: 155px; margin: 0; padding: 6px 6px 4px 0; font-size: 18px; line-height: 1.2; color: #848484; text-align: right; transition: color .2s linear; } /* választógombos sor (titulus): a legend nem flex-elem, ezért úszva balra, a gombok mellette */ .ask-form .ask-urlap fieldset.cf-control-group[data-type="radio"] { display: block; } .ask-form .ask-urlap fieldset.cf-control-group[data-type="radio"] > legend.cf-label { float: left; } .ask-form .ask-urlap fieldset.cf-control-group[data-type="radio"] > .cf-control-input { margin-left: 155px; } .ask-form .ask-urlap .cf-control-label .cf-label { display: inline-flex; width: auto; margin: 0; font: inherit; color: inherit; } .ask-form .ask-urlap .cf-control-label::after, .ask-form .ask-urlap legend.cf-label::after { content: ":"; } .ask-form .ask-urlap .cf-label .cf-required-label { color: inherit; } .ask-form .ask-urlap .cf-control-group:hover > :is(.cf-control-label, legend.cf-label) { color: #6486bd; } .ask-form .ask-urlap .cf-control-group:focus-within > :is(.cf-control-label, legend.cf-label) { color: #000; } .ask-form .ask-urlap .cf-control-input { flex: 0 1 556px; min-width: 0; gap: 0; } .ask-form .ask-urlap .cf-input:not([type="checkbox"], [type="radio"]) { height: 38px; margin: 0; padding: 0 6px; border: 1px solid #d2d2d2; border-radius: 0; background: #f8f8f8; font-size: 17px; color: var(--c-brand); box-shadow: none; transition: all .2s linear; } .ask-form .ask-urlap .cf-control-group textarea.cf-input { height: 150px; padding: 6px; resize: none; } /* megjegyzés: a címke középen a mező fölött (mint az árajánlatkérőn) */ .ask-form .ask-urlap .cf-control-group[data-type="textarea"] { padding-left: 155px; } .ask-form .ask-urlap .cf-control-group[data-type="textarea"] .cf-control-label { flex-basis: 100%; width: auto; justify-content: center; padding-right: 0; } .ask-form .ask-urlap .cf-control-group:not(:focus-within):hover .cf-input:not([type="checkbox"], [type="radio"]) { border-color: #8ea9d6; background-color: #f6f9fc; box-shadow: 0 3px 8px 0 rgb(0 0 0 / .1); } .ask-form .ask-urlap .cf-input:not([type="checkbox"], [type="radio"]):focus { border-color: #84a2d3; background-color: var(--c-white); } /* választógombok egy sorban (titulus); jelölőnégyzet (hozzájárulás), robotszűrő és megjegyzés a mezők oszlopában */ .ask-form .ask-urlap .cf-list { display: flex; flex-wrap: wrap; } .ask-form .ask-urlap .cf-radio-group { display: inline-flex; align-items: center; gap: 0; margin: 0 50px 0 0; padding: 0; } .ask-form .ask-urlap .cf-radio-group input { margin: 0 5px 0 10px; } .ask-form .ask-urlap .cf-radio-group .cf-label { font-size: 17px; line-height: 38px; color: #8f8e8e; cursor: pointer; } .ask-form .ask-urlap :is(.cf-control-group[data-type="checkbox"], .cf-control-group[data-type="altcha"], .cf-control-group[data-type="html"]) { padding-left: 155px; } .ask-form .ask-urlap .cf-control-group[data-type="checkbox"] > legend.cf-sr-only + .cf-control-input { flex-basis: 556px; } .ask-form .ask-urlap .cf-checkbox-group { align-items: flex-start; gap: 0; padding: 0; } .ask-form .ask-urlap .cf-checkbox-group input { margin: 6px 15px 0 0; } .ask-form .ask-urlap .cf-checkbox-group .cf-label { padding-top: 4px; font-size: 15px; line-height: 1.4; color: var(--c-text); cursor: pointer; } .ask-form .ask-urlap .cf-checkbox-group .cf-label a { color: var(--c-brand); } .ask-form .ask-urlap .cf-control-group[data-type="html"] { display: block; margin: 0; padding: 0 19px 0 0; font-size: 12px; color: #848484; text-align: right; } .ask-form .ask-urlap .cf-control-group[data-type="html"] p { margin: 0 0 10px; } .ask-form .ask-urlap :is(input[type="radio"], input[type="checkbox"]) { width: auto; height: auto; appearance: auto; accent-color: auto; } /* küldés gomb: a régi „Elküld” nyílgomb egy szürke lábsávban */ .ask-form .ask-urlap .cf-control-group[data-type="submit"] { display: block; height: 60px; margin: 0 10px 8px; padding: 10px 0 0; border-top: 2px solid var(--c-brand); background: #f4f4f4; text-align: center; } .ask-form .ask-urlap .cf-control-group[data-type="submit"] .cf-control-input { display: block; } .ask-form .ask-urlap .cf-control-group[data-type="submit"] .cf-text-left { text-align: center; } .ask-form .ask-urlap .cf-btn { position: relative; display: inline-block; width: auto; height: 36px; margin: 0; padding: 0 15px 0 45px; border: 1px solid #d2d2d2; border-radius: 0; background: var(--c-white) url("../images/form/white-arrow.png") no-repeat 4px 5px; font: 400 18px/40px var(--font-cond); color: var(--c-brand); text-transform: uppercase; cursor: pointer; opacity: 1; transition: all .2s linear; } .ask-form .ask-urlap .cf-btn::after { content: ""; position: absolute; left: 4px; top: 5px; z-index: 1; width: 26px; height: 26px; background: var(--c-white) url("../images/form/blue-arrow.png") no-repeat 0 0; transition: all .2s linear; } .ask-form .ask-urlap .cf-btn:is(:hover, :focus-visible) { border-color: var(--c-white); background-color: var(--c-brand); color: var(--c-white); opacity: 1; } .ask-form .ask-urlap .cf-btn:is(:hover, :focus-visible)::after { opacity: 0; } .ask-form .ask-urlap .cf-btn-text { line-height: 34px; } /* visszajelzés: sikeres küldés után köszönő panel (az űrlap elrejtve), hiba piros szöveggel */ .ask-form .ask-urlap.cf-success .cf-response { margin: 0; padding: 30px 10px 40px; background: none; border-radius: 0; font-size: 18px; line-height: 1.4; color: var(--c-brand); text-align: center; } .ask-form .ask-urlap.cf-error .cf-response { margin: 0 0 10px; padding: 8px 10px; background: none; color: #b91919; text-align: center; } @container askform (max-width: 600px) { .ask-form .ask-urlap .cf-control-group, .ask-form .ask-urlap :is(.cf-control-group[data-type="checkbox"], .cf-control-group[data-type="altcha"], .cf-control-group[data-type="html"], .cf-control-group[data-type="textarea"]) { padding-inline: 10px; } .ask-form .ask-urlap .cf-control-label, .ask-form .ask-urlap legend.cf-label { flex-basis: 100%; width: auto; justify-content: flex-start; padding: 6px 6px 0 4px; font-size: 15px; text-align: left; } .ask-form .ask-urlap fieldset.cf-control-group[data-type="radio"] > legend.cf-label { float: none; } .ask-form .ask-urlap fieldset.cf-control-group[data-type="radio"] > .cf-control-input { margin-left: 0; } .ask-form .ask-urlap .cf-control-input, .ask-form .ask-urlap .cf-control-group[data-type="checkbox"] > legend.cf-sr-only + .cf-control-input { flex: 1 1 100%; } }