/* ========================================================================== JUTA-Soft – modern arculati réteg (2026) A main2.css UTÁN töltődik be, a régi osztályokat is modernizálja, így minden aloldal automatikusan az új megjelenést kapja. ========================================================================== */ :root { --j-primary: #1f6fb2; --j-primary-dark: #175a94; --j-primary-darker: #10456f; --j-red: #b02a37; --j-green: #2b8a3e; --j-ink: #1c2733; --j-muted: #5b6b7b; --j-bg: #f2f5f9; --j-card: #ffffff; --j-border: #e3e9f0; --j-radius: 14px; --j-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 6px 18px rgba(16, 24, 40, .07); --j-shadow-lg: 0 4px 10px rgba(16, 24, 40, .08), 0 16px 34px rgba(16, 24, 40, .14); } /* ---------- Alap ---------- */ html { scroll-behavior: smooth; scroll-padding-top: 90px; } body { font-family: "Inter", "Segoe UI", system-ui, -apple-system, Arial, sans-serif; font-size: 15px; line-height: 1.6; color: var(--j-ink); background: var(--j-bg); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 { font-weight: 700; letter-spacing: -.01em; } /* A Bootstrap 5-ből kikerült, de a régi oldalak által használt osztályok pótlása */ .text-justify { text-align: justify !important; } /* Bootstrap 3 rács: a col-xs-* ugyanaz, mint a Bootstrap 5 col-*. A doboz-tulajdonságok normál fajsúllyal jönnek, a SZÉLESSÉG viszont :where()-be csomagolva, aminek nulla a fajsúlya. Ez azért kritikus, mert a régi oldalak jelölése "col-xs-12 col-lg-3" alakú: a Bootstrap 5 col-lg-3 szabálya médialekérdezésben áll és a fájlban előbb szerepel, így egy normál fajsúlyú .col-xs-12 { width:100% } felülírná MINDEN képernyőméreten. Emiatt az űrlapokon a címke és a beviteli mező egymás alá csúszott ahelyett, hogy egy sorban álltak volna — az odbe_rend.php például emiatt volt olvashatatlan. A :where() miatt minden valódi col-sm/md/lg osztály nyer, a col-xs pedig csak akkor érvényesül, ha nincs nagyobb töréspont megadva. */ .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 { position: relative; padding-right: calc(var(--bs-gutter-x, 1.5rem) * .5); padding-left: calc(var(--bs-gutter-x, 1.5rem) * .5); flex: 0 0 auto; } :where(.col-xs-1) { width: 8.33333333%; } :where(.col-xs-2) { width: 16.66666667%; } :where(.col-xs-3) { width: 25%; } :where(.col-xs-4) { width: 33.33333333%; } :where(.col-xs-5) { width: 41.66666667%; } :where(.col-xs-6) { width: 50%; } :where(.col-xs-7) { width: 58.33333333%; } :where(.col-xs-8) { width: 66.66666667%; } :where(.col-xs-9) { width: 75%; } :where(.col-xs-10) { width: 83.33333333%; } :where(.col-xs-11) { width: 91.66666667%; } :where(.col-xs-12) { width: 100%; } /* Bootstrap 3 panel / well -> kártyaszerű doboz */ .panel { background: var(--j-card); border: 1px solid var(--j-border); border-radius: var(--j-radius); box-shadow: var(--j-shadow); margin-bottom: 1rem; overflow: hidden; } .panel-heading { padding: .7rem 1rem; border-bottom: 1px solid var(--j-border); font-weight: 600; } /* Harmonika-fejléc (pl. az odbe.php Gyakori kérdések listája). A kérdés technikailag , ezért a Bootstrap linkszínét kapta: világos témában rendben volt, sötétben viszont élénkkék szöveg világított a sötét dobozon, sorról sorra. Ez nem külső hivatkozás, hanem nyitó-záró vezérlő, ezért a szöveg alapszínét kapja, és csak rámutatáskor vált kékre. A jobb szélre került nyíl teszi egyértelművé, hogy lenyitható. */ /* A nyíl abszolút pozíciót kap, a link pedig blokk marad: flex elrendezéssel a több szövegrészből álló kérdések (idézőjeles hibaüzenet + magyarázat) külön flex-elemekké váltak volna, és a sor közepén szakadt volna szét. */ .panel-heading a { display: block; position: relative; padding-right: 1.75rem; color: var(--j-ink); text-decoration: none; font-weight: 600; } .panel-heading a::after { content: "\f282"; /* bi-chevron-down */ font-family: bootstrap-icons; font-size: .8em; font-weight: normal; position: absolute; right: 0; top: .15em; color: var(--j-muted); transition: transform .2s ease; } /* A Bootstrap a lenyitott állapotban leveszi a .collapsed osztályt. */ .panel-heading a:not(.collapsed)::after { transform: rotate(180deg); } .panel-heading a:hover, .panel-heading a:focus { color: var(--j-primary); } .panel-heading a:hover::after, .panel-heading a:focus::after { color: var(--j-primary); } .panel-title { margin: 0; font-size: 1rem; font-weight: 700; } .panel-body { padding: 1rem; } .panel-footer { padding: .7rem 1rem; border-top: 1px solid var(--j-border); } .well { background: var(--j-card); border: 1px solid var(--j-border); border-radius: var(--j-radius); box-shadow: var(--j-shadow); padding: 1rem 1.2rem; margin-bottom: 1rem; } .thumbnail { display: block; padding: .4rem; background: var(--j-card); border: 1px solid var(--j-border); border-radius: 10px; } /* Bootstrap 3 media objektum */ .media { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 1rem; } .media-body { flex: 1 1 260px; min-width: 0; } .media-heading { margin: 0 0 .35rem; font-size: 1.05rem; font-weight: 700; } .media-object { max-width: 100%; height: auto; } /* Egyéb Bootstrap 3 segédosztályok */ .pull-left { float: left; margin-right: 1rem; } .pull-right { float: right; margin-left: 1rem; } .img-responsive { display: block; max-width: 100%; height: auto; } .center-block { display: block; margin-left: auto; margin-right: auto; } .help-block { font-size: .85rem; color: var(--j-muted); } .checkbox, .radio { margin: .35rem 0; } .checkbox label, .radio label { display: inline-flex; align-items: baseline; gap: .45rem; } .btn-default { --bs-btn-color: var(--j-ink); --bs-btn-bg: #fff; --bs-btn-border-color: var(--j-border); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--j-primary); --bs-btn-hover-border-color: var(--j-primary); --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--j-primary-dark); --bs-btn-active-border-color: var(--j-primary-dark); } /* ---------- Régi űrlapoldalak (menu.css helyett, témakövető formában) ---------- */ .form_table { width: 100%; max-width: 780px; } .form_table tr { height: 42px; } .form_table th { padding: .35rem .8rem .35rem 0; text-align: right; font-weight: 600; color: var(--j-muted); white-space: nowrap; } .form_table td { text-align: left; padding: .2rem 0; } .form_table h4 { margin: 1rem 0 .3rem; color: var(--j-primary-dark); } .textbox, .textarea, .hibas { width: 100%; max-width: 420px; padding: .45rem .7rem; background: var(--j-card); color: var(--j-ink); border: 1px solid var(--j-border); border-radius: 8px; font: inherit; font-size: .95rem; } .textarea { max-width: 420px; margin: .3rem 0 0; } .textbox2 { width: 95%; max-width: none; } .hibas { border-color: var(--j-red); background: #fdecec; } .textbox:focus, .textarea:focus, .hibas:focus { outline: 0; border-color: var(--j-primary); box-shadow: 0 0 0 .2rem rgba(31, 111, 178, .18); } .gomb2 { display: inline-block; margin: 1rem .4rem; padding: .6rem 1.4rem; border: 0; border-radius: 10px; background: var(--j-primary); color: #fff !important; font-weight: 600; text-decoration: none; cursor: pointer; } .gomb2:hover { background: var(--j-primary-dark); } .top_align { vertical-align: top; } .middle-left { vertical-align: middle; text-align: left; } .double-high { min-height: 40px; } .pad_left { padding-left: 10px; } .pad_left25 { padding-left: 25px; } .padding_5 { padding: 5px; } .padding_10 { padding: 10px; } .kozep { text-align: center; } .apro { font-size: 11px; } .normal { font-size: medium; } .vastag { font-weight: bold; } .vastagpiros, .vastagpiros > a { color: var(--j-red); font-weight: bold; } .space, .space2 { height: 10px; } .btn-orange { --bs-btn-color: #fff; --bs-btn-bg: #e8590c; --bs-btn-border-color: #e8590c; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #d24b06; --bs-btn-hover-border-color: #d24b06; } .modal .close { background: none; border: 0; font-size: 1.6rem; line-height: 1; color: currentColor; opacity: .7; } .modal .close:hover { opacity: 1; } img { max-width: 100%; height: auto; } /* ---------- Fejléc / navigáció ---------- */ .jheader { position: sticky; top: 0; z-index: 1030; /* Az oldal háttere (#f2f5f9) helyett egy fokkal szürkébb sáv, hogy a fejléc elkülönüljön a tartalomtól; a menüpontok fehér kiemelést kapnak. */ background: rgba(226, 231, 238, .94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid #cfd8e3; box-shadow: 0 2px 12px rgba(16, 24, 40, .08); } .jheader .navbar { padding: .45rem 0; } .jlogo { height: 52px; width: auto; } .jbrand { font-size: 1.65rem; font-weight: 800; color: var(--j-primary-dark); line-height: 1.1; } .jbrand small { display: block; font-size: .68rem; font-weight: 500; color: var(--j-muted); letter-spacing: .04em; } .jheader .nav-link { font-weight: 600; font-size: 1.02rem; color: var(--j-ink); padding: .55rem .7rem !important; border-radius: 10px; white-space: nowrap; transition: background .15s ease, color .15s ease; } .jheader .nav-link:hover { background: #fff; color: var(--j-primary-dark); } .jheader .nav-link.active { background: var(--j-primary); color: #fff; } .jheader .navbar-toggler { border: 1px solid var(--j-border); border-radius: 10px; } .jheader .navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(31, 111, 178, .25); } /* Fejléc kereső – a menü utolsó eleme mellett nyílik le */ .jsearch { position: relative; } .jsearch-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; padding: .55rem !important; background: none; border: 0; cursor: pointer; font-size: 1.05rem; font-family: inherit; } .jsearch-toggle[aria-expanded="true"] { background: #fff; color: var(--j-primary-dark); } .jsearch-panel { position: absolute; top: calc(100% + .4rem); right: 0; z-index: 1030; width: 360px; max-width: calc(100vw - 2rem); background: var(--j-card); border: 1px solid var(--j-border); border-radius: var(--j-radius); box-shadow: var(--j-shadow-lg); padding: .75rem; } .jsearch-input { width: 100%; border: 1px solid var(--j-border); border-radius: 10px; padding: .55rem .7rem; font-size: .92rem; color: var(--j-ink); background: var(--j-bg); } .jsearch-input:focus { outline: none; border-color: var(--j-primary); box-shadow: 0 0 0 3px rgba(31, 111, 178, .18); } .jsearch-results { margin-top: .5rem; max-height: 60vh; overflow-y: auto; } .jsearch-result { display: block; padding: .55rem .6rem; border-radius: 10px; color: var(--j-ink); text-decoration: none; } .jsearch-result:hover, .jsearch-result:focus { background: var(--j-bg); } .jsearch-result b { color: var(--j-primary-dark); } .jsearch-result-title { font-weight: 700; font-size: .92rem; } .jsearch-result-desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: .8rem; line-height: 1.35; color: var(--j-muted); margin-top: .1rem; overflow: hidden; } .jsearch-result mark { background: rgba(255, 200, 0, .45); color: inherit; border-radius: 2px; padding: 0 .05em; } .jsearch-result-cat { display: inline-block; margin-top: .25rem; font-size: .7rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--j-muted); } .jsearch-empty, .jsearch-hint { padding: .6rem; font-size: .85rem; color: var(--j-muted); } /* Téma (világos/sötét) váltó gomb */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--j-border); border-radius: 10px; background: transparent; color: var(--j-ink); font-size: 1.05rem; transition: background .15s ease; } .theme-toggle:hover { background: #fff; color: var(--j-primary-dark); } .theme-ico-light { display: none; } [data-theme="dark"] .theme-ico-dark { display: none; } [data-theme="dark"] .theme-ico-light { display: inline; } /* A menü balra, a logó és a témaváltó jobbra kerül. 1200 és 1500 px között a tíz menüpont mellé csak szűkebb menüpontokkal és mottó nélkül fér el a márkanév. */ @media (min-width: 1200px) and (max-width: 1499.98px) { .jheader .nav-link { font-size: .96rem; padding: .5rem .5rem !important; } /* Ezen a szélességen a tíz menüpont + kereső ikon mellé már a márkanévnek sem marad hely – csak a logó marad látható, a teljes felirat 1500 px-től tér vissza. */ .jbrand { display: none; } } @media (max-width: 1199.98px) { .jheader .navbar-nav { padding: .5rem 0 .75rem; } .jheader .nav-link { padding: .65rem .9rem !important; } .jsearch-panel { position: static; width: auto; max-width: none; margin-top: .5rem; box-shadow: none; } } @media (max-width: 575.98px) { .jlogo { height: 42px; } .jbrand { font-size: 1.3rem; } .jbrand small { display: none; } } /* ---------- Főoldali hero ---------- */ .hero { background: radial-gradient(1100px 500px at 85% -10%, rgba(255, 255, 255, .16), transparent 60%), linear-gradient(135deg, var(--j-primary-darker) 0%, var(--j-primary) 55%, #3a8ccb 100%); color: #fff; padding: clamp(1rem, 2vw, 1.6rem) 0; height: 250px; display: flex; align-items: center; overflow: hidden; } .hero > .container-fluid { width: 100%; } .hero h1 { font-size: clamp(1.4rem, 2.8vw, 2.1rem); font-weight: 800; margin-bottom: .45rem; } .hero .lead { font-size: clamp(.98rem, 1.6vw, 1.15rem); opacity: .92; max-width: 60ch; } .hero-badges { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.2rem; } .badge-soft { display: inline-flex; align-items: center; gap: .4rem; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .28); color: #fff; border-radius: 999px; padding: .35rem .85rem; font-size: .82rem; font-weight: 600; } .hero-cta { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .85rem; } .btn-hero { background: #fff; color: #175a94; font-weight: 700; border: 0; border-radius: 12px; padding: .7rem 1.4rem; } .btn-hero:hover { background: #eaf3fb; color: #10456f; } .btn-hero-outline { background: transparent; color: #fff; font-weight: 700; border: 2px solid rgba(255, 255, 255, .65); border-radius: 12px; padding: .7rem 1.4rem; } .btn-hero-outline:hover { background: rgba(255, 255, 255, .12); color: #fff; border-color: #fff; } /* ---------- Aloldali fejléc (page hero) ---------- Ugyanaz a méret és kinézet, mint a főoldali .hero fejlécnél, hogy minden oldal fejléce egyező legyen. A sáv magassága fix (nem a szöveg hossza szabja meg), hogy azonos maradjon akkor is, ha egy oldalnak nincs alcíme, és akkor is, ha hosszabb a leírása. */ .page-hero { background: linear-gradient(120deg, var(--j-primary-darker) 0%, var(--j-primary) 70%, #3a8ccb 100%); color: #fff; padding: clamp(1rem, 2vw, 1.6rem) 0; margin-bottom: 1.6rem; height: 250px; display: flex; align-items: center; overflow: hidden; } .page-hero .container-fluid { width: 100%; } .page-hero h1 { font-size: clamp(1.4rem, 2.8vw, 2.1rem); font-weight: 800; margin: 0 0 .45rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .page-hero .page-lead { margin: 0; max-width: 60ch; opacity: .92; font-size: clamp(.98rem, 1.6vw, 1.15rem); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .page-hero img.page-ico { height: 64px; width: auto; } /* A régi kék banner (cimsor) modernizálása a még át nem írt oldalakon */ .bg-stblue.feltol { background: linear-gradient(120deg, var(--j-primary-darker) 0%, var(--j-primary) 70%, #3a8ccb 100%) !important; margin-top: 0; } .cimsor { min-height: 90px; padding: .6rem 0; align-items: center; } .cimsor img { max-height: 84px; width: auto; } /* ---------- Szekciók ---------- */ .jsection { padding: 1.3rem 0; } /* A szekció végén álló kártyarács ne adjon plusz margót a szekcióközhöz */ .jsection .jgrid:last-child, .jsection .jgrid-sm:last-child { margin-bottom: 0; } .section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem; margin: .8rem 0 1rem; } .section-head h2 { font-size: 1.35rem; font-weight: 800; color: var(--j-ink); margin: 0; padding-left: .8rem; border-left: 5px solid var(--j-primary); line-height: 1.25; } .section-head .section-more { font-weight: 600; font-size: .9rem; text-decoration: none; color: var(--j-primary); } /* Aláhúzás és linkszín csak akkor, ha tényleg link. A span csak kísérőszöveg a szakaszcím mellett (pl. "Kattintson a nagyításhoz"), ne csábítson kattintásra. */ .section-head a.section-more:hover { text-decoration: underline; } .section-head span.section-more { color: var(--j-muted); font-weight: 500; cursor: default; } /* ---------- Kártyarácsok ---------- */ .jgrid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); margin-bottom: 1rem; } /* kisebb termékcsempékhez: mobilon 2 oszlop */ .jgrid-sm { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 10.5rem), 1fr)); margin-bottom: 1rem; } @media (max-width: 400px) { .jgrid-sm { grid-template-columns: repeat(2, 1fr); gap: .7rem; } } /* Fix 3 oszlopos rács (nagy képernyőn), lefelé 2/1 oszlopra vált. Képes csempékhez, ahol a fotó és a leírás is elfér egymás alatt. */ .jgrid-3 { display: grid; gap: 1rem; grid-template-columns: repeat(3, 1fr); margin-bottom: 1rem; } @media (max-width: 991.98px) { .jgrid-3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 575.98px) { .jgrid-3 { grid-template-columns: 1fr; } } /* Fix 4 oszlopos rács (nagy képernyőn), lefelé 3/2/1 oszlopra vált */ .jgrid-4 { display: grid; gap: 1rem; grid-template-columns: repeat(4, 1fr); margin-bottom: 1rem; } @media (max-width: 1199.98px) { .jgrid-4 { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 767.98px) { .jgrid-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 575.98px) { .jgrid-4 { grid-template-columns: 1fr; } } /* ---------- Modern kártya (csempe) ---------- */ .jcard { display: flex; flex-direction: column; background: var(--j-card); border: 1px solid var(--j-border); border-radius: var(--j-radius); box-shadow: var(--j-shadow); overflow: hidden; text-decoration: none !important; color: var(--j-ink); transition: transform .18s ease, box-shadow .18s ease; } .jcard:hover, .jcard:focus-visible { transform: translateY(-4px); box-shadow: var(--j-shadow-lg); color: var(--j-ink); } .jcard-head { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 3.4rem; padding: .55rem .8rem; background: var(--j-primary); color: #fff; font-size: .98rem; font-weight: 700; line-height: 1.25; } .jcard-head.is-red { background: var(--j-red); } .jcard-head.is-green { background: var(--j-green); } .jcard-img { display: flex; align-items: center; justify-content: center; padding: 1rem 1rem .4rem; min-height: 120px; } .jcard-img img { max-height: 130px; width: auto; max-width: 100%; object-fit: contain; } .jcard-body { padding: .5rem 1rem 1rem; font-size: .88rem; color: var(--j-muted); } .jcard-body p { margin: 0; } .jcard .jcard-more { margin-top: auto; padding: .6rem 1rem .9rem; font-size: .85rem; font-weight: 700; color: var(--j-primary); } .jcard .jcard-more::after { content: " →"; } .jcard-price { text-align: center; font-weight: 700; color: var(--j-ink); padding: 0 1rem .9rem; margin: 0; } /* ---------- Ikonos kártya (kép nélküli csempe) ---------- */ .jcard2 { display: flex; flex-direction: column; gap: .55rem; background: var(--j-card); border: 1px solid var(--j-border); border-radius: var(--j-radius); box-shadow: var(--j-shadow); padding: 1.15rem 1.15rem 1rem; text-decoration: none !important; color: var(--j-ink); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .jcard2:hover, .jcard2:focus-visible { transform: translateY(-4px); box-shadow: var(--j-shadow-lg); border-color: #c7d9ea; color: var(--j-ink); } .jcard2-top { display: flex; align-items: center; gap: .8rem; margin-bottom: .2rem; } .jcard2-icon { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: #e8f1fa; color: var(--j-primary); font-size: 1.35rem; } .jcard2-title { font-size: 1.02rem; font-weight: 700; line-height: 1.3; margin: 0; } .jcard2-text { font-size: .88rem; color: var(--j-muted); margin: 0; } .jcard2-more { margin-top: auto; padding-top: .45rem; font-size: .85rem; font-weight: 700; color: var(--j-primary); } .jcard2-more::after { content: " →"; } /* Vízszintes csempeváltozat (penztargeplista.php): a kép balra kerül, a cím fölé, a leírás pedig a cím bal széléhez igazítva alá – mint a főoldali szekciókártyáknál (kép | cím+leírás egymás alatt). A csempe mérete fix minden aloldalon (nem a szöveg hossza szabja meg), hogy egy oldalon belül és oldalak között is egyforma maradjon a méret. */ .jcard2-figure { flex-direction: row; align-items: flex-start; gap: 1rem; height: 180px; overflow: hidden; } .jcard2-figure .jcard2-body { display: flex; flex-direction: column; gap: .35rem; min-width: 0; flex: 1 1 auto; } .jcard2-figure .jcard2-title-row { display: flex; align-items: center; gap: .6rem; } .jcard2-figure .jcard2-more { margin-top: auto; padding-top: 0; flex: 0 0 auto; } .jcard2-figure .jcard2-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .jcard2-figure .jcard2-text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* Képes változat: ugyanaz a csempe, de a szöveg fölött ott a termékfotó. A képsáv teljes szélességű, ezért a kártya felső belső margóját elhagyjuk, a képblokkot pedig negatív margóval kihúzzuk a kártya széléig. */ .jcard2-photo { padding-top: 0; overflow: hidden; } .jcard2-img { display: flex; align-items: center; justify-content: center; margin: 0 -1.15rem .2rem; padding: 1.1rem 1rem; min-height: 150px; border-bottom: 1px solid var(--j-border); } .jcard2-img img { max-height: 140px; width: auto; max-width: 100%; object-fit: contain; } /* ---------- Címkék (badge) ---------- */ .jbadge { display: inline-flex; align-items: center; gap: .3rem; font-size: .68rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: .28rem .6rem; border-radius: 999px; background: #e8f1fa; color: var(--j-primary-dark); white-space: nowrap; } .jbadge-red { background: #fdecec; color: #b02a37; } .jbadge-green { background: #e6f4ea; color: #2b8a3e; } /* "Hamarosan" – tömör, élénk borostyán, hogy azonnal szemet szúrjon */ .jbadge-soon { background: #f59f00; color: #3d2600; box-shadow: 0 1px 4px rgba(245, 159, 0, .45); } .jbadge-light { background: rgba(255, 255, 255, .16); color: #fff; border: 1px solid rgba(255, 255, 255, .35); } /* ---------- Hero statisztikasor ---------- */ .hero-stats { display: flex; flex-wrap: wrap; gap: .6rem 2rem; margin-top: .95rem; } .hero-stats .stat b { display: block; font-size: 1.75rem; font-weight: 800; line-height: 1.15; } .hero-stats .stat span { font-size: .85rem; opacity: .85; } /* Dun & Bradstreet (Bisnode) tanúsítvány a hero statisztikasorban. A tanúsítványkép a hero kékjével egyező háttérrel kérhető le (bg=175A94), így beleolvad. */ .hero-cert { display: inline-flex; align-items: center; max-width: 100%; padding: .35rem; border: 1px solid rgba(255, 255, 255, .28); border-radius: 12px; color: #fff; text-decoration: none; transition: border-color .15s ease, background .15s ease; } .hero-cert:hover { border-color: rgba(255, 255, 255, .75); background: rgba(255, 255, 255, .08); color: #fff; } /* Szoveges magyarazat nelkul all, ezert maga a kep legyen jol olvashato meretu. Az eredeti kep 350x95, a szelesseg megadasaval az aranya megmarad. */ .hero-cert img { display: block; width: 320px; max-width: 100%; height: auto; border-radius: 8px; } /* ---------- Ajánlatkérő sáv ---------- */ .cta-band { background: linear-gradient(120deg, var(--j-primary-darker) 0%, var(--j-primary) 80%); color: #fff; border-radius: var(--j-radius); box-shadow: var(--j-shadow); padding: 1.6rem 1.8rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin: 1.6rem 0 .6rem; } .cta-band h2 { font-size: 1.35rem; margin: 0 0 .25rem; } .cta-band p { margin: 0; opacity: .9; font-size: .95rem; } .cta-band .cta-actions { display: flex; flex-wrap: wrap; gap: .6rem; } /* ---------- One-page kategóriablokkok ---------- */ .cat-panel { background: var(--j-card); border: 1px solid var(--j-border); border-radius: var(--j-radius); box-shadow: var(--j-shadow); padding: 1.5rem; display: grid; gap: 1.3rem; } @media (min-width: 992px) { .cat-panel { grid-template-columns: minmax(300px, 5fr) 7fr; padding: 1.9rem 2rem; } } .cat-icon { flex: 0 0 auto; width: 54px; height: 54px; border-radius: 14px; background: #e8f1fa; color: var(--j-primary); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; } .cat-head { display: flex; align-items: center; gap: .9rem; margin-bottom: .8rem; } .cat-panel h2 { font-size: 1.4rem; font-weight: 800; margin-bottom: 0; } .cat-desc { color: var(--j-muted); font-size: .95rem; margin-bottom: 1.1rem; max-width: 48ch; } .cat-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--j-muted); margin-bottom: .65rem; } .cat-links { display: flex; flex-wrap: wrap; gap: .55rem; align-content: flex-start; } .cat-links .jchip { font-size: .9rem; padding: .55rem 1.05rem; } /* Szekcióképek a kategóriablokkokban: nagy képernyőn külön (első) oszlop, kisebb kijelzőn a szöveg fölött, középre igazítva. */ .cat-figure { display: flex; align-items: center; justify-content: center; padding: .2rem 0; } .cat-figure img { display: block; width: auto; height: auto; max-width: 100%; max-height: 140px; object-fit: contain; } /* Kisebb változat: a keretet teljesen kitöltő termékfotókhoz (pl. DS2208), hogy a többi, körben üres helyet hagyó képpel azonos méretűnek tűnjenek */ .cat-figure--sm img { max-height: 105px; } @media (min-width: 992px) { .cat-panel.has-figure { grid-template-columns: 200px minmax(260px, 5fr) 7fr; } .cat-figure img { max-height: 170px; } .cat-figure--sm img { max-height: 125px; } } @media (min-width: 1200px) { .cat-panel.has-figure { grid-template-columns: 230px minmax(280px, 5fr) 7fr; } } /* Széles fotósáv a kártya szélén: a kép a panel belső margóján túl, a kártya bal, felső és alsó széléig kifut (kis képernyőn a szöveg fölött, teljes szélességben). A kép abszolút helyzetű, így nem növeli a sor magasságát. */ .cat-panel.has-band { overflow: hidden; } .cat-band { position: relative; margin: -1.5rem -1.5rem 0; height: 190px; } .cat-band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 42% center; } /* Világos témában halványkék, sötétben navy hátterű változat */ .cat-band .cat-band-dark { display: none; } [data-theme="dark"] .cat-band .cat-band-light { display: none; } [data-theme="dark"] .cat-band .cat-band-dark { display: block; } /* A referenciakártya AAA-jelvénye ugyanarra a témához igazodó képsávra ül, mint a többi főoldali szekció képe. A jelvény háttere átlátszó, ezért a világos és sötét feliratváltozat között a témakapcsoló vált. */ .cat-band--cert { background: linear-gradient(145deg, #b0c9e2 0%, #eaf0f7 100%); } .cat-band img.cat-band-cert { object-fit: contain; object-position: center; padding: 8px 24px 8px 8px; filter: drop-shadow(0 5px 10px rgba(20, 40, 70, .22)); } [data-theme="dark"] .cat-band--cert { background: linear-gradient(145deg, #1f6fb2 0%, #102338 100%); } [data-theme="dark"] .cat-band img.cat-band-cert { filter: drop-shadow(0 5px 10px rgba(0, 0, 0, .42)); } /* Letöltések, támogatás – saját ikon (nem TeamViewer-logó) ugyanazon a kék sávmintán, mint a referencia jelvénye. */ .cat-band--support { background: linear-gradient(145deg, #b0c9e2 0%, #eaf0f7 100%); } .cat-band img.cat-band-icon { object-fit: contain; object-position: center; padding: 32px 48px 32px 28px; filter: drop-shadow(0 10px 18px rgba(20, 40, 70, .22)); } [data-theme="dark"] .cat-band--support { background: linear-gradient(145deg, #1f6fb2 0%, #102338 100%); } [data-theme="dark"] .cat-band img.cat-band-icon { filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .42)); } /* A kép háttere a szöveg felőli szélén a kártya színébe olvad át */ .cat-band::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, transparent 55%, var(--j-card) 100%); } @media (min-width: 992px) { .cat-panel.has-band { grid-template-columns: 200px minmax(260px, 5fr) 7fr; } .cat-band { margin: -1.9rem 0 -1.9rem -2rem; height: auto; } .cat-band::after { background: linear-gradient(to right, transparent 58%, var(--j-card) 100%); } } @media (min-width: 1200px) { .cat-panel.has-band { grid-template-columns: 230px minmax(280px, 5fr) 7fr; } } /* Logó az ikonos kártya ikonhelyén (NTAK, NAV, ODBE) – fehér alapon, hogy mindkét témában olvasható legyen */ .jcard2-icon.jcard2-logo { background: #e2e7ee; border: 1px solid var(--j-border); padding: 4px; } .jcard2-logo img { width: 100%; height: 100%; object-fit: contain; } /* Termékfotó a kártya ikonhelyén (penztargeplista.php): keret és háttér nélkül, az ikonnál kicsit nagyobb, hogy a kivágott termék felismerhető maradjon */ .jcard2-icon.jcard2-foto { width: 116px; height: 116px; background: transparent; padding: 0; } .jcard2-foto img { width: 100%; height: 100%; object-fit: contain; } [data-theme="dark"] .jcard2-icon.jcard2-foto { background: transparent; } [data-theme="dark"] .jcard2-foto img { filter: drop-shadow(0 2px 6px rgba(185, 215, 245, .35)); } /* Tömör, keret nélküli app-ikonok (letoltes.php): a teljes dobozukat kitöltik, ezért a termékfotóknál használt méretnél kisebb dobozban mutatnak jól */ .jcard2-icon.jcard2-foto.jcard2-icon-sm { width: 72px; height: 72px; } /* Fotósáv a vízszintes csempéken (aloldalak): a kivágott termékfotó színátmenetes sávon ül, amely a kártya bal, felső és alsó széléig kifut és a szöveg felől a kártya színébe olvad. A kép abszolút helyzetű, nem növeli a sor magasságát. */ .jcard2-band { overflow: hidden; } .jcard2-band .jcard2-band-img { position: relative; flex: 0 0 160px; align-self: stretch; margin: -1.15rem 0 -1rem -1.15rem; min-height: 150px; background: linear-gradient(145deg, #b0c9e2 0%, #eaf0f7 100%); } .jcard2-band .jcard2-band-img img { position: absolute; inset: 0; width: 100%; height: 100%; padding: 14px 30px 14px 12px; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(20, 40, 70, .3)); } .jcard2-band .jcard2-band-img::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to right, transparent 60%, var(--j-card) 100%); } @media (max-width: 575.98px) { .jcard2-band .jcard2-band-img { flex-basis: 128px; } } [data-theme="dark"] .jcard2-band .jcard2-band-img { background: linear-gradient(145deg, #1f6fb2 0%, #102338 100%); } [data-theme="dark"] .jcard2-band .jcard2-band-img img { filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .5)); } /* Sötétkék logó (pl. NTAK), amely a sötét téma kék sávján alig látszana – fehérre invertálva jól kiválik a háttérből, akárcsak a fotós kártyák. */ [data-theme="dark"] .jcard2-band .jcard2-band-img img.jcard2-band-logo { filter: brightness(0) invert(1) drop-shadow(0 4px 8px rgba(0, 0, 0, .35)); } /* Kapcsolat sáv képe */ .cta-band .cta-figure { flex: 0 0 auto; width: 84px; height: 84px; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .25)); } .cta-band .cta-text { flex: 1 1 320px; } /* Partnerlogó-sor (főoldal, Referenciák szekció) – a chipekhez igazodó, átlátszó hátterű gombok */ .partner-logos { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .9rem; } .partner-logos a { display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--j-border); border-radius: 999px; padding: .45rem .75rem; min-height: 44px; transition: background .15s ease, border-color .15s ease; } .partner-logos a:hover { background: #eaf1f8; border-color: var(--j-primary); } .partner-logos img { max-height: 26px; width: auto; max-width: 130px; object-fit: contain; /* a fehér hátterű logóképek így beleolvadnak a panel hátterébe */ mix-blend-mode: multiply; /* alaphelyzetben szürke, csak egérrel fölé állva színes */ filter: grayscale(1); opacity: .8; transition: filter .2s ease, opacity .2s ease; } .partner-logos a:hover img { filter: none; opacity: 1; } /* ---------- Kapcsolódó linkek (chipek) ---------- */ .jchips { display: flex; flex-wrap: wrap; gap: .55rem; margin: .4rem 0 1.4rem; } .jchip { display: inline-flex; align-items: center; gap: .45rem; background: #fff; border: 1px solid var(--j-border); border-radius: 999px; padding: .45rem 1rem; font-size: .88rem; font-weight: 600; color: var(--j-primary-dark); text-decoration: none; box-shadow: 0 1px 2px rgba(16, 24, 40, .05); transition: background .15s ease, border-color .15s ease; } .jchip:hover { background: #eaf1f8; border-color: var(--j-primary); color: var(--j-primary-darker); } /* ---------- Hírek / infó lista ---------- */ .news-card { background: #fff; border: 1px solid var(--j-border); border-radius: var(--j-radius); box-shadow: var(--j-shadow); overflow: hidden; height: 100%; } .news-card .news-title { background: var(--j-primary); color: #fff; font-weight: 700; padding: .7rem 1rem; font-size: 1rem; } .news-card .list-group-item { border-color: var(--j-border); padding: .6rem 1rem; font-size: .9rem; } .news-card .list-group-item small { color: var(--j-muted); } /* ---------- Tanúsítványok ---------- */ .cert-box { background: #fff; border: 1px solid var(--j-border); border-radius: var(--j-radius); box-shadow: var(--j-shadow); padding: 1rem; text-align: center; height: 100%; } /* ---------- Lábléc ---------- */ footer { background: #10263c; color: #c7d4e0; margin-top: 2.5rem; font-size: .92rem; } footer h5 { color: #fff; font-weight: 700; font-size: .95rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: .9rem; } footer a { color: #9fc3e2; text-decoration: none; } footer a:hover { color: #fff; text-decoration: underline; } footer .labszoveg { color: #c7d4e0; padding: 0 .3rem 0 .35rem; } footer .labszoveg a { color: #9fc3e2; } footer hr { border-color: rgba(255, 255, 255, .12); opacity: 1; } .footer-bottom { font-size: .82rem; color: #8ba0b4; } /* Vissza a tetejére gomb */ .to-top { position: fixed; right: 1rem; bottom: 1rem; z-index: 1040; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--j-primary); color: #fff !important; font-size: 1.2rem; box-shadow: var(--j-shadow-lg); text-decoration: none; opacity: .85; } .to-top:hover { opacity: 1; color: #fff; } /* ========================================================================== RÉGI OSZTÁLYOK MODERNIZÁLÁSA (a még át nem írt aloldalak is az új megjelenést kapják) ========================================================================== */ /* Csempék (list-group alapú kártyák) */ .list-group.shadow, .list-group.list-gh { border-radius: var(--j-radius); overflow: hidden; box-shadow: var(--j-shadow) !important; border: 1px solid var(--j-border); background: #fff; } .list-group.list-gh .list-group-item { border-left: 0; border-right: 0; } .list-group.list-gh .list-group-item:first-child { border-top: 0; } /* Lebegés: a régi nagyítás helyett finom emelkedés */ .list-gh:hover { transform: translateY(-4px); box-shadow: var(--j-shadow-lg) !important; } /* Csempe fejlécek */ .list-group-item.active, .list-group-item.activeRed, .list-group-item.activeGreen { border: 0; } .list-group-item.active { background: var(--j-primary) !important; } .list-group-item.activeRed, .list-group-item.activeRed:hover, .list-group-item.activeRed:focus { background: var(--j-red); border-color: var(--j-red); } .list-group-item.activeGreen, .list-group-item.activeGreen:hover, .list-group-item.activeGreen:focus { background: var(--j-green); border-color: var(--j-green); } .list-group-head { height: auto !important; min-height: 3.2rem; display: flex; align-items: center; justify-content: center; } .list-group-head h4, .list-group-item.active h4, .list-group-item.activeRed h4, .list-group-item.activeGreen h4 { font-size: .98rem !important; font-weight: 700; margin: 0; line-height: 1.3; } /* Csempeképek egységesítése */ .list-gh img.img-fluid { max-height: 140px; width: auto; object-fit: contain; } /* Gombok */ .btn { border-radius: 10px; font-weight: 600; } .btn-primary { --bs-btn-bg: var(--j-primary); --bs-btn-border-color: var(--j-primary); --bs-btn-hover-bg: var(--j-primary-dark); --bs-btn-hover-border-color: var(--j-primary-dark); --bs-btn-active-bg: var(--j-primary-darker); --bs-btn-active-border-color: var(--j-primary-darker); } /* Másodlagos akció: kontúros gomb az oldal kékjével (pl. „Részletes leírás”) */ .btn-outline-primary { --bs-btn-color: var(--j-primary-dark); --bs-btn-border-color: #b6cee4; --bs-btn-bg: #fff; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--j-primary); --bs-btn-hover-border-color: var(--j-primary); --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--j-primary-dark); --bs-btn-active-border-color: var(--j-primary-dark); } /* Táblázatok */ .table { background: #fff; } .table th { background: #eef3f8; } /* Modálok */ .modal-content { border: 0; border-radius: var(--j-radius); overflow: hidden; box-shadow: var(--j-shadow-lg); } .modal-header { background: var(--j-primary); color: #fff; border-bottom: 0; } .modal-header .btn-close { filter: invert(1) grayscale(1) brightness(2); } /* Címsor színek egységesítése */ .stblue, .text-stblue { color: var(--j-primary) !important; } .bg-stblue { background-color: var(--j-primary) !important; } /* Régi cégnév felirat (ha valahol megmaradt) */ .cegnev { color: var(--j-primary-dark); text-shadow: none; } /* Nyomtatásnál ne legyen felesleges elem */ @media print { .jheader, .to-top, footer .to-top { display: none !important; } } /* ========================================================================== SÖTÉT MÓD A attribútum kapcsolja; a választást a fejlécben lévő gomb kezeli és a localStorage őrzi meg. ========================================================================== */ [data-theme="dark"] { --j-bg: #0e1621; --j-card: #18232f; --j-border: #2b3948; --j-ink: #e7eef6; --j-muted: #a6b6c6; --j-primary: #2f7fc4; --j-primary-dark: #5aa4e0; --j-primary-darker: #0f2c46; --j-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 6px 18px rgba(0, 0, 0, .35); --j-shadow-lg: 0 4px 10px rgba(0, 0, 0, .45), 0 16px 34px rgba(0, 0, 0, .5); color-scheme: dark; /* Bootstrap linkszínek */ --bs-link-color: #6cb1e8; --bs-link-hover-color: #93c8f1; /* A Bootstrap saját alapváltozói. Enélkül minden .card, .table és társai a beépített sötét betűszínt öröklik, és olvashatatlanná válnak. */ --bs-body-color: var(--j-ink); --bs-body-color-rgb: 231, 238, 246; --bs-body-bg: var(--j-bg); --bs-body-bg-rgb: 14, 22, 33; --bs-emphasis-color: #fff; --bs-emphasis-color-rgb: 255, 255, 255; --bs-secondary-color: var(--j-muted); --bs-tertiary-color: var(--j-muted); --bs-heading-color: var(--j-ink); --bs-border-color: var(--j-border); --bs-border-color-translucent: rgba(255, 255, 255, .13); --bs-card-bg: var(--j-card); --bs-card-color: var(--j-ink); --bs-secondary-bg: #22303f; --bs-tertiary-bg: #1d2836; } /* Fejléc */ [data-theme="dark"] .jheader { /* sötétben a kártyák tónusa, hogy itt is elváljon az oldal hátterétől */ background: rgba(24, 35, 47, .94); border-bottom-color: var(--j-border); box-shadow: 0 2px 12px rgba(0, 0, 0, .4); } [data-theme="dark"] .jheader .nav-link { color: var(--j-ink); } [data-theme="dark"] .jheader .nav-link:hover { background: #22303f; color: #fff; } [data-theme="dark"] .jheader .nav-link.active { background: var(--j-primary); color: #fff; } [data-theme="dark"] .jsearch-toggle[aria-expanded="true"] { background: #22303f; color: #fff; } [data-theme="dark"] .jsearch-result:hover, [data-theme="dark"] .jsearch-result:focus { background: #22303f; } [data-theme="dark"] .jsearch-result mark { background: rgba(255, 193, 7, .3); } [data-theme="dark"] .jheader .navbar-toggler-icon { filter: invert(1) hue-rotate(180deg); } [data-theme="dark"] .theme-toggle:hover { background: #22303f; color: #fff; } /* Kártyák, csempék A termékfotók világos hátteret kívánnak, de a teljes szélességű fehér sáv bántóan kiugrik a sötét kártyából: behúzzuk, lekerekítjük és tompítjuk, egérrel fölé állva pedig teljes fényerővel villan fel. */ [data-theme="dark"] .jcard-img { /* Sötét módban nincs világos lap: a termék (átlátszó hátterű PNG) egy halvány fényfoltban ül, a sziluettjét finom ragyogás emeli ki a sötét kártyából. */ background: radial-gradient(115px 85px at 50% 45%, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 72%); transition: background .2s ease; } [data-theme="dark"] .jcard-img img { filter: drop-shadow(0 3px 12px rgba(185, 215, 245, .3)); transition: filter .2s ease; } [data-theme="dark"] .jcard:hover .jcard-img { background: radial-gradient(135px 100px at 50% 45%, rgba(255, 255, 255, .19), rgba(255, 255, 255, 0) 72%); } [data-theme="dark"] .jcard:hover .jcard-img img { filter: drop-shadow(0 3px 16px rgba(185, 215, 245, .45)); } /* Ugyanez a képes jcard2 csempékre (vonalkod.php) */ [data-theme="dark"] .jcard2-img { background: radial-gradient(130px 90px at 50% 45%, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 72%); transition: background .2s ease; } [data-theme="dark"] .jcard2-img img { filter: drop-shadow(0 3px 12px rgba(185, 215, 245, .3)); transition: filter .2s ease; } [data-theme="dark"] .jcard2-photo:hover .jcard2-img { background: radial-gradient(150px 105px at 50% 45%, rgba(255, 255, 255, .19), rgba(255, 255, 255, 0) 72%); } [data-theme="dark"] .jcard2-photo:hover .jcard2-img img { filter: drop-shadow(0 3px 16px rgba(185, 215, 245, .45)); } [data-theme="dark"] .news-card { background: var(--j-card); } [data-theme="dark"] .jchip { background: var(--j-card); border-color: var(--j-border); color: var(--j-primary-dark); box-shadow: none; } [data-theme="dark"] .jchip:hover { background: #22303f; border-color: var(--j-primary); color: #fff; } /* Lista elemek (hírek, oldalsávok) */ [data-theme="dark"] .list-group-item { background-color: var(--j-card); color: var(--j-ink); border-color: var(--j-border); } [data-theme="dark"] .list-group-item-action:hover, [data-theme="dark"] .list-group-item-action:focus { background-color: #22303f; color: #fff; } [data-theme="dark"] .list-group-item small { color: var(--j-muted); } /* A régi termékcsempék képmezői maradjanak világosak, hogy a fotók érvényesüljenek */ [data-theme="dark"] .list-gh .list-group-item:not(.active):not(.activeRed):not(.activeGreen) { background: #fff; color: #1c2733; } /* Fejléc-változatok maradnak színesek */ [data-theme="dark"] .list-group-item.active { background: var(--j-primary) !important; color: #fff; } [data-theme="dark"] .list-group-item.activeRed { background: var(--j-red); color: #fff; } [data-theme="dark"] .list-group-item.activeGreen { background: var(--j-green); color: #fff; } /* A list-group kártyakonténer (pl. referencia listák) sötét módban ne maradjon fehér */ [data-theme="dark"] .list-group.shadow, [data-theme="dark"] .list-group.list-gh { background: var(--j-card); border-color: var(--j-border); } /* Fotógaléria (referencia képek) sötét módban */ [data-theme="dark"] .photo-gallery { background-color: var(--j-card); color: var(--j-ink); } /* Táblázatok */ [data-theme="dark"] .table { --bs-table-color: var(--j-ink); --bs-table-bg: var(--j-card); --bs-table-border-color: var(--j-border); --bs-table-striped-color: var(--j-ink); --bs-table-striped-bg: #1e2b39; --bs-table-hover-color: var(--j-ink); --bs-table-hover-bg: #22303f; background: var(--j-card); color: var(--j-ink); border-color: var(--j-border); } /* Kiemelt táblázatcellák (árlisták oszlopai). A Bootstrap alapból világos pasztell hátteret és fekete betűt ad nekik – sötét módban ez olvashatatlan, ezért sötét, telítettebb változatot kapnak. */ [data-theme="dark"] .table-primary { --bs-table-color: #d8e8f8; --bs-table-bg: #1b3149; --bs-table-border-color: #2f4a68; --bs-table-striped-color: #d8e8f8; --bs-table-striped-bg: #213a53; --bs-table-hover-color: #fff; --bs-table-hover-bg: #26445f; color: #d8e8f8; } [data-theme="dark"] .table-warning { --bs-table-color: #f4e5bf; --bs-table-bg: #3a3016; --bs-table-border-color: #574a26; --bs-table-striped-color: #f4e5bf; --bs-table-striped-bg: #40361b; --bs-table-hover-color: #fff; --bs-table-hover-bg: #473c20; color: #f4e5bf; } [data-theme="dark"] .table-success { --bs-table-color: #c9e7d4; --bs-table-bg: #16321f; --bs-table-border-color: #275c39; --bs-table-striped-color: #c9e7d4; --bs-table-striped-bg: #1a3924; --bs-table-hover-color: #fff; --bs-table-hover-bg: #1f4229; color: #c9e7d4; } [data-theme="dark"] .table-danger { --bs-table-color: #f3c8ce; --bs-table-bg: #38202a; --bs-table-border-color: #5e3540; --bs-table-striped-color: #f3c8ce; --bs-table-striped-bg: #3e242f; --bs-table-hover-color: #fff; --bs-table-hover-bg: #452934; color: #f3c8ce; } [data-theme="dark"] .table-info { --bs-table-color: #cfe9f2; --bs-table-bg: #14323b; --bs-table-border-color: #245a69; --bs-table-striped-color: #cfe9f2; --bs-table-striped-bg: #183a44; --bs-table-hover-color: #fff; --bs-table-hover-bg: #1c434e; color: #cfe9f2; } [data-theme="dark"] .table th { background: #22303f; color: var(--j-ink); } /* Modálok */ [data-theme="dark"] .modal-content { background: var(--j-card); color: var(--j-ink); } [data-theme="dark"] .modal-footer { background: var(--j-card) !important; border-color: var(--j-border); } /* -------------------------------------------------------------------------- Bootstrap színes dobozok sötét módban -------------------------------------------------------------------------- A Bootstrap ezeknek világos pasztell hátteret és sötét betűt ad, amit sötét témában nem ír felül semmi. Így a program_ntak.php ajánlati kártyáin a tájékoztató dobozok és a kiemelt árak vakítóan világos foltként ültek a sötét lapon. Mindegyik változatot ugyanarra a sémára hozzuk: mély, telített háttér + világos betű + köztes keret. */ [data-theme="dark"] .alert-warning { background: #332812; color: #f0d9a8; border-color: #5c4a26; } [data-theme="dark"] .alert-info { background: #102b3a; color: #a8d6f0; border-color: #1d4f68; } [data-theme="dark"] .alert-success { background: #12301c; color: #a8e0b8; border-color: #245c37; } [data-theme="dark"] .alert-danger { background: #341419; color: #f1a3ab; border-color: #6b2730; } [data-theme="dark"] .alert-primary { background: #10263a; color: #a8cbf0; border-color: #1d4468; } [data-theme="dark"] .alert-secondary, [data-theme="dark"] .alert-light, [data-theme="dark"] .alert-dark { background: var(--j-card); color: var(--j-ink); border-color: var(--j-border); } /* A .alert-link osztály nem mindenhol elemen ül: a juta-leiras figyelmeztető dobozaiban az egész