` UTÁNI tartalom-dobozt
érinti, így a szerkesztő saját felületi címeit nem változtatja meg.
--------------------------------------------------------------------------- */
#tutor-course-builder h5 + div :is(h1, h2, h3, h4, h5, h6),
#tutor-course-builder h5 + div :is(strong, b) {
font-weight: 700;
}
/* ---------------------------------------------------------------------------
2. SZÖVEG ÉS LINKEK
--------------------------------------------------------------------------- */
.bal-content p,
.bal-content li {
font-size: 1rem;
line-height: 1.72;
color: #475569;
}
.bal-content p {
margin: 0 0 1.1em;
}
.bal-content a {
color: var(--bal-blue);
text-decoration: none;
transition: color 0.16s;
}
.bal-content a:hover {
color: var(--bal-blue-dark);
text-decoration: underline;
text-underline-offset: 3px;
}
.bal-content strong,
.bal-content b {
font-weight: 700;
color: #1e293b;
}
.bal-content blockquote {
margin: 1.6em 0;
padding: 6px 0 6px 20px;
border-left: 4px solid var(--bal-green);
color: #4b5563;
font-style: italic;
}
.bal-content hr {
height: 1px;
border: 0;
background: var(--bal-line);
margin: 2.2em 0;
}
.bal-content ul,
.bal-content ol {
margin: 0 0 1.2em;
padding-left: 1.5em;
}
.bal-content ul {
list-style: disc;
}
.bal-content ol {
list-style: decimal;
}
.bal-content li {
margin-bottom: 0.4em;
}
.bal-content img {
max-width: 100%;
height: auto;
border-radius: 12px;
}
.bal-content code {
background: #f1f5f9;
padding: 2px 6px;
border-radius: 5px;
font-size: 0.9em;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.bal-content pre {
background: #0f172a;
color: #e2e8f0;
padding: 16px 18px;
border-radius: 12px;
overflow-x: auto;
}
.bal-content pre code {
background: none;
color: inherit;
padding: 0;
}
/* ---------------------------------------------------------------------------
3. TÁBLÁZAT — a landingszerű, tiszta táblázat
--------------------------------------------------------------------------- */
.bal-content table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
border: 1px solid var(--bal-line);
border-radius: 12px;
overflow: hidden;
margin: 0 0 1.6em;
}
.bal-content th {
padding: 11px 14px;
background: var(--bal-paper);
border-bottom: 1px solid var(--bal-line);
color: var(--bal-muted);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
text-align: left;
}
.bal-content td {
padding: 11px 14px;
border-bottom: 1px solid var(--bal-line);
font-size: 0.95rem;
}
.bal-content tr:last-child td {
border-bottom: 0;
}
/* ---------------------------------------------------------------------------
4. ŰRLAPOK — a landing `.input-premium` viselkedése
--------------------------------------------------------------------------- */
.bal-content input[type="text"],
.bal-content input[type="email"],
.bal-content input[type="password"],
.bal-content input[type="search"],
.bal-content input[type="tel"],
.bal-content input[type="url"],
.bal-content input[type="number"],
.bal-content input[type="date"],
.bal-content select,
.bal-content textarea,
.bal-content .tutor-form-control,
.bal-content .tutor-form-select {
width: 100%;
padding: 0.8rem 1rem;
border: 1.5px solid var(--bal-line-strong);
border-radius: var(--bal-radius-input);
background: #fff;
color: var(--bal-ink);
font-family: inherit;
font-size: 0.925rem;
line-height: 1.5;
outline: none;
transition: border-color 0.2s, box-shadow 0.2s;
}
.bal-content input::placeholder,
.bal-content textarea::placeholder,
.bal-content .tutor-form-control::placeholder {
color: #94a3b8;
}
.bal-content input:focus,
.bal-content select:focus,
.bal-content textarea:focus,
.bal-content .tutor-form-control:focus {
border-color: var(--bal-green);
box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.12);
}
.bal-content textarea {
resize: vertical;
min-height: 110px;
}
/* ⚠️ A CHECKBOX SZÉLESSÉGE NEM LEHET `auto`!
A Tutor checkboxa `appearance: none` — azaz **nulláról épített** doboz, aminek
a méretét a saját `width: 16px`-e adja. Ha itt `width: auto`-t adunk, a doboz
tartalom nélkül **1.6px-re zsugorodik** (mérve!), és csak egy vékony csík
látszik belőle.
Ez minden Tutor checkboxot érintett az oldalon, nem csak a regisztrációs
consentet. Ezért itt KIZÁRÓLAG a paddinget nullázzuk, a méretet nem bántjuk. */
.bal-content input[type="checkbox"],
.bal-content input[type="radio"] {
padding: 0;
accent-color: var(--bal-green);
}
.bal-content label {
font-size: 0.9rem;
font-weight: 600;
color: #334155;
margin-bottom: 6px;
display: inline-block;
}
.bal-content a:focus-visible,
.bal-content button:focus-visible,
.bal-content input:focus-visible,
.bal-content select:focus-visible,
.bal-content textarea:focus-visible {
outline: 2px solid var(--bal-blue);
outline-offset: 2px;
}
/* ---------------------------------------------------------------------------
5. GOMBOK — CSAK a saját, Balance-gombok
---------------------------------------------------------------------------
⚠ FONTOS: itt SZÁNDÉKOSAN NINCS `.tutor-btn`, `.button`, `#submit` és
semmilyen elem-szintű (`button`) szabály.
Eredetileg mindet átformáltam a landing gradiensére, 46px-es magassággal
és 14px lekerekítéssel. Ennek két baja volt:
1. A Tutor LMS gombjai „megváltoztak" — a felhasználó kérésére visszaállt.
2. A csupasz `button` elemszelektor MINDEN gombot elkapott a `.bal-content`
alatt (a Tutor modáljait, a WooCommerce kisegítő gombjait, a
h5p-vezérlőket), és 46px magasra húzta őket — ez a Tartalomjegyzék
összecsukását is elrontotta.
Amit használunk helyette: a `.bal-btn` család, KIZÁRÓLAG a saját sablonjainkban
(a `tutor-shell.php` „Új kurzus felfedezése" sávja, a belépő oldal, a 404).
A Tutor és a WordPress gombjait a saját stílusukkal hagyjuk — a színvilágot
a `--tutor-*` és a WordPress-változók adják.
--------------------------------------------------------------------------- */
.bal-content .bal-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 46px;
padding: 0 20px;
border: 1px solid transparent;
border-radius: var(--bal-radius-btn);
font-family: inherit;
font-size: 0.9rem;
font-weight: 680;
line-height: 1.2;
text-align: center;
text-decoration: none;
cursor: pointer;
transition: transform 0.16s, box-shadow 0.16s, background 0.16s, border-color 0.16s;
}
/* --- ELSŐDLEGES: a landing gradiense ------------------------------------- */
.bal-content .bal-btn--primary {
color: #fff;
background: var(--bal-grad);
box-shadow: var(--bal-shadow-btn);
}
.bal-content .bal-btn--primary:hover {
color: #fff;
transform: translateY(-1px);
box-shadow: var(--bal-shadow-hover);
text-decoration: none;
}
/* --- MÁSODLAGOS: üveges fehér -------------------------------------------- */
.bal-content .bal-btn--secondary {
color: #334155;
background: rgba(255, 255, 255, 0.72);
border-color: var(--bal-line-strong);
box-shadow: 0 5px 14px rgba(22, 42, 70, 0.035);
}
.bal-content .bal-btn--secondary:hover {
color: #334155;
transform: translateY(-1px);
border-color: #a7f3d0;
box-shadow: 0 12px 26px -10px rgba(16, 185, 129, 0.35);
text-decoration: none;
}
/* ⚠ EZ A ZÁRÓ KAPCSOLÓ SOKÁIG HIÁNYZOTT.
Nélküle a fenti `.bal-btn--secondary:hover` blokk SOHA nem záródott le: a
következő szabály (`.tutor-badge`, `.bal-badge`) a hover BELSEJÉBE került,
és így `.bal-btn--secondary:hover .bal-content .tutor-badge` szelektorrá
vált — ami soha nem illeszkedik. A címke-stílus ezért NÉMÁN halott volt:
a CSS érvényesnek látszott, a böngésző viszont eldobta. */
/* --- CÍMKE — a landing `.micro-badge` ------------------------------------ */
.bal-content .tutor-badge,
.bal-content .bal-badge {
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0.3rem 0.7rem;
border-radius: 999px;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
background: #ecfdf5;
border: 1px solid #a7f3d0;
color: #047857;
}
/* ---------------------------------------------------------------------------
5b. A KURZUS GOMBJA — a landing gradiensével, FEHÉR BETŰVEL
---------------------------------------------------------------------------
A felhasználó kérése: „a Kurzusok lapon a »Tanulás indítása« gomb
kezdetleges, hasonlítson a »Böngészd a képzéseket« gombra, és mindkettő
legyen kicsit élénkebb (kék-zöld tenger) és fehér betűkkel. A tanulás
megkezdése is legyen ugyanilyen."
⚠ SZÁNDÉKOSAN SZŰK A HATÓKÖR. A 2026-09-26-i visszakérés után a Tutor
gombjait ÁLTALÁNOSAN nem formáljuk (lásd az 5. pont figyelmeztetését).
Ez a blokk KIZÁRÓLAG a kurzuskártya láblécének gombjára és a kurzus-oldal
oldalsávjának elsődleges gombjára hat — a vezérlőpult, a modálok és a
WooCommerce gombjai érintetlenek maradnak.
A szelektorok a MÉRT DOM-ból valók (2026-09-30), nem feltevésből:
.tutor-card.tutor-course-card > .tutor-card-footer > .tutor-course-list-btn > .tutor-btn
.tutor-card.tutor-course-card > .tutor-card-footer > .list-item-button > .tutor-btn
--------------------------------------------------------------------------- */
.bal-content .tutor-course-card .tutor-card-footer .tutor-btn,
.bal-content .tutor-single-course-sidebar .tutor-btn-primary {
/* A FORMA is a landing gombjáét követi — a felhasználó kérése szerint a
„Tanulás indítása" a „Böngészd a képzéseket" gombra hasonlítson. A mért
alapérték 35,6px magas és 6px sugarú volt; a landing gombja 49px / 14px.
A 46px egy köztes, kártyában is elférő magasság, a 14px pedig pontosan
a `.bal-btn--primary` sugara. */
min-height: 46px;
border-radius: 14px;
border-color: transparent;
color: #fff;
background-image: var(--bal-grad);
background-color: #0a58ff;
box-shadow: var(--bal-shadow-btn);
font-size: 0.9rem;
font-weight: 680;
transition: transform 0.16s, box-shadow 0.16s, filter 0.16s;
}
.bal-content .tutor-course-card .tutor-card-footer .tutor-btn:hover,
.bal-content .tutor-single-course-sidebar .tutor-btn-primary:hover {
color: #fff;
transform: translateY(-1px);
box-shadow: var(--bal-shadow-hover);
filter: saturate(1.06);
}
/* A gombon belüli ikon és felirat is fehér maradjon. */
.bal-content .tutor-course-card .tutor-card-footer .tutor-btn *,
.bal-content .tutor-single-course-sidebar .tutor-btn-primary * {
color: inherit;
}
.bal-content .tutor-course-card .tutor-card-footer .tutor-btn:focus-visible,
.bal-content .tutor-single-course-sidebar .tutor-btn-primary:focus-visible {
outline: 2px solid #0a58ff;
outline-offset: 2px;
}
/* ---------------------------------------------------------------------------
6. KÁRTYÁK — képzés, oktató, lecke
--------------------------------------------------------------------------- */
.bal-content .tutor-course-card,
.bal-content .tutor-card,
.bal-content .tutor-single-course-card,
.bal-content .bal-card {
background: #fff;
border: 1px solid #e9eef1;
border-radius: var(--bal-radius-card);
box-shadow: var(--bal-shadow-card);
overflow: hidden;
transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.bal-content .tutor-course-card:hover,
.bal-content .tutor-card:hover,
.bal-content .tutor-single-course-card:hover,
.bal-content .bal-card:hover {
transform: translateY(-6px);
border-color: #d5e6dd;
box-shadow: var(--bal-shadow-lift);
}
.bal-content .bal-card-body {
padding: 18px 20px 20px;
}
.bal-content .tutor-course-card .tutor-course-title a,
.bal-content .bal-card-title {
font-weight: 700;
color: #0f172a;
letter-spacing: -0.01em;
}
.bal-content .tutor-course-card .tutor-course-title a:hover {
color: var(--bal-green-deep);
text-decoration: none;
}
/* ---------------------------------------------------------------------------
7. A TUTOR általános felületei — fülek, jelvények, lista, előrehaladás
--------------------------------------------------------------------------- */
.bal-content .tutor-tabs,
.bal-content .tutor-nav {
border-bottom: 1px solid var(--bal-line);
gap: 4px;
display: flex;
flex-wrap: wrap;
}
.bal-content .tutor-nav-link,
.bal-content .tutor-tab-link {
padding: 12px 18px;
border: 0;
border-bottom: 2px solid transparent;
background: none;
color: var(--bal-muted);
font-weight: 600;
font-size: 0.9rem;
text-decoration: none;
transition: color 0.16s, border-color 0.16s;
}
.bal-content .tutor-nav-link:hover,
.bal-content .tutor-tab-link:hover {
color: var(--bal-green-dark);
text-decoration: none;
}
.bal-content .tutor-nav-link.is-active,
.bal-content .tutor-tab-link.is-active,
.bal-content .tutor-nav-link.active,
.bal-content .tutor-tab-link.active {
color: var(--bal-green-dark);
border-bottom-color: var(--bal-green);
background: none;
}
.bal-content .tutor-progress-bar,
.bal-content .tutor-progress-bar-wrap {
background: #eef2f6;
border-radius: 999px;
height: 8px;
overflow: hidden;
}
.bal-content .tutor-progress-bar-fill,
.bal-content .tutor-progress-value {
background: var(--bal-grad);
border-radius: 999px;
height: 100%;
}
/* A vezérlőpult statisztika-dobozai */
.bal-content .tutor-dashboard-info-card,
.bal-content .tutor-dashboard-stats-card,
.bal-content .bal-stat {
background: #fff;
border: 1px solid var(--bal-line);
border-radius: var(--bal-radius-card);
padding: 18px 20px;
box-shadow: var(--bal-shadow-card);
}
.bal-content .tutor-dashboard-info-card .tutor-dashboard-info-val,
.bal-content .tutor-dashboard-info-card strong {
font-size: 1.5rem;
font-weight: 800;
color: #0f172a;
letter-spacing: -0.02em;
}
.bal-content .tutor-dashboard-info-card .tutor-dashboard-info-label,
.bal-content .tutor-dashboard-info-card span {
color: var(--bal-muted);
font-size: 0.82rem;
font-weight: 600;
}
/* Az értesítések és figyelmeztetések */
.bal-content .tutor-alert,
.bal-content .tutor-notice {
border: 1px solid var(--bal-line);
border-radius: 12px;
padding: 14px 18px;
background: var(--bal-paper);
color: #334155;
font-size: 0.92rem;
}
.bal-content .tutor-alert-success {
background: #ecfdf5;
border-color: #a7f3d0;
color: #047857;
}
.bal-content .tutor-alert-warning {
background: #fffbeb;
border-color: #fde68a;
color: #b45309;
}
.bal-content .tutor-alert-danger {
background: #fef2f2;
border-color: #fecaca;
color: #b91c1c;
}
/* ---------------------------------------------------------------------------
8. WOOCOMMERCE — kosár és pénztár
--------------------------------------------------------------------------- */
.bal-content .woocommerce-message,
.bal-content .woocommerce-info {
background: #ecfdf5;
border-top-color: var(--bal-green);
color: #047857;
border-radius: 12px;
padding: 14px 18px;
}
.bal-content .woocommerce-error {
background: #fef2f2;
border-top-color: #ef4444;
color: #b91c1c;
border-radius: 12px;
padding: 14px 18px;
list-style: none;
}
.bal-content .woocommerce table.shop_table,
.bal-content .woocommerce-checkout-review-order-table {
border: 1px solid var(--bal-line);
border-radius: 12px;
overflow: hidden;
}
.bal-content .woocommerce table.shop_table th {
background: var(--bal-paper);
color: var(--bal-muted);
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.bal-content .woocommerce .price,
.bal-content .woocommerce-Price-amount {
font-weight: 700;
color: #0f172a;
letter-spacing: -0.01em;
}
.bal-content .woocommerce del .woocommerce-Price-amount {
color: var(--bal-muted);
font-weight: 500;
text-decoration: line-through;
}
.bal-content .woocommerce ins .woocommerce-Price-amount {
color: var(--bal-green-deep);
text-decoration: none;
}
/* ---------------------------------------------------------------------------
9. H5P és beágyazott tananyag
--------------------------------------------------------------------------- */
.bal-content .h5p-iframe-wrapper,
.bal-content .h5p-content {
border-radius: 14px;
overflow: hidden;
border: 1px solid var(--bal-line);
}
/* ---------------------------------------------------------------------------
10. A MOZGÁS TISZTELETE
--------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.bal-content *,
.bal-content *::before,
.bal-content *::after {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
}
}
/* ============================================================
2D / 3D NÉZETVÁLTÓ (üvegszerű)
A kurzusok archívumán a footer adja ki, a JS teszi a rács fölé;
a 3D aloldalon a rövidkód rendereli a tartalomba.
⚠ Ez a stíluslap MINDEN oldalon töltődik (a landing-page.css nem),
ezért a sáv itt van.
============================================================ */
.bal-nezet {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin: 0 0 24px;
padding: 10px 12px 10px 18px;
border-radius: 18px;
/* üvegszerű: áttetsző, elmosott, fényes peremmel */
background: linear-gradient(135deg, #ffffffd9, #e0f2fe8c 55%, #ede9fe80);
-webkit-backdrop-filter: blur(16px) saturate(160%);
backdrop-filter: blur(16px) saturate(160%);
border: 1px solid #ffffffd9;
box-shadow: 0 16px 44px -26px #0f172a5c, inset 0 1px 0 #ffffffeb;
}
/* a bal oldali csoport: a „fejlődés útja" és a Képzés-ajánló gomb */
.bal-nezet-bal {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
/* ⚠⚠ EZ A SZABÁLY EDDIG CSAK A `landing-page.css`-BEN ÉLT, ami a
`/tanfolyamok/` archívumon NEM TÖLTŐDIK (a `balance_is_landing_like()`
függvény ott hamis) — ezért a „A fejlődés útja" gomb ott NYERS böngésző-
linkstílust kapott (kék, aláhúzott). MÉRVE 2026-10-03.
A szabály itt megismétlődik (a `landing-page.css`-ben érintetlenül marad),
mert EZ a stíluslap töltődik minden oldalon — így a javítás nem kockáztat
semmit a landingen: azonos értékek, csak egy második helyen. */
.bal-nezet-ut {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 9px 18px 9px 13px;
border-radius: 999px;
border: 1px solid #e0e7ff;
font-size: 13px;
font-weight: 800;
color: #4f46e5;
text-decoration: none;
background: #eef2ff;
transition: transform .2s, box-shadow .25s, background .25s;
}
.bal-nezet-ut:hover { transform: translateY(-2px); background: #e0e7ff; box-shadow: 0 14px 30px -14px #4f46e580 }
.bal-nezet-ut svg { flex: 0 0 auto }
/* ★ KÉPZÉS-AJÁNLÓ gomb — ugyanaz az alak, más hangsúly (zöld = növekedés),
hogy a két bal oldali gomb egy pillantásra megkülönböztethető legyen. */
.bal-nezet-ajanlo {
color: #047857;
background: #ecfdf5;
border-color: #a7f3d0;
}
.bal-nezet-ajanlo:hover { background: #d1fae5; box-shadow: 0 14px 30px -14px #04785780 }
.bal-nezet-ajanlo.is-active { background: #10b981; border-color: #10b981; color: #ffffff }
@media (max-width: 900px) {
.bal-nezet-bal { gap: 8px }
.bal-nezet-ut { font-size: 12px; padding: 8px 14px 8px 11px }
}
.bal-nezet-felirat {
font-size: 11.5px;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
color: #64748b;
}
/* a jobb oldali csoport: a „Nézet" felirat + a 2D/3D kapcsoló */
.bal-nezet-jobb {
display: flex;
align-items: center;
gap: 12px;
}
.bal-nezet-kapcsolo {
display: inline-flex;
gap: 4px;
padding: 4px;
border-radius: 999px;
background: #ffffff8c;
border: 1px solid #ffffffeb;
box-shadow: inset 0 1px 3px #0f172a14;
}
/* ⚠ A kapcsoló a `.bal-content` alá kerül, ahol a téma `.bal-content a`
szabálya (0,1,1) erősebb a sima `.bal-nezet-gomb`-nál — ezért itt
`.bal-nezet .bal-nezet-gomb` (0,2,0) szerepel. */
.bal-nezet .bal-nezet-gomb {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 8px 18px 8px 14px;
border-radius: 999px;
font-size: 13px;
font-weight: 800;
letter-spacing: .04em;
color: #475569;
text-decoration: none;
transition: background .25s, color .25s, box-shadow .25s;
}
.bal-nezet .bal-nezet-gomb svg { flex: 0 0 auto }
.bal-nezet .bal-nezet-gomb:hover { color: #0f172a; background: #ffffffb3 }
.bal-nezet .bal-nezet-gomb.is-active {
background: linear-gradient(135deg, #0f172a, #334155);
color: #fff;
box-shadow: 0 10px 22px -10px #0f172ab3;
}
.bal-nezet .bal-nezet-gomb.is-active:hover { color: #fff }
.bal-nezet .bal-nezet-gomb:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 2px }
@media (max-width: 600px) {
.bal-nezet { flex-direction: column; align-items: stretch; gap: 10px }
.bal-nezet-felirat { text-align: center }
.bal-nezet-kapcsolo { justify-content: center }
.bal-nezet-gomb { flex: 1 1 0; justify-content: center; padding: 9px 12px }
}
/* ===========================================================================
6c. ⚠⚠ A HATODIK SPECIFICITÁS-CSAPDA — „kék betű a kék gombon” (2026-10-04)
===========================================================================
A felhasználó: „A 3D képzéskártyákon a Jelentkezem szó legyen fehérrel, mert
a gomb kék. Vizsgáld meg a többi gombot is, hogy ne legyen ugyanez a hiba.”
⚠⚠ AZ OK: a téma `.bal-content a { color: var(--bal-blue) }` szabálya (0,1,1)
FELÜLÍRJA az EGYOSZTÁLYOS link-szabályokat (0,1,0). MÉRVE (2026-10-04):
· `.bal-top-join` → a CSS-ben `#fff`, a képernyőn `rgb(37,99,235)` ✗
(a „Jelentkezem” a kék gradiensen KÉK betűvel — olvashatatlan)
· `.bal-top-details` → a CSS-ben `#0b7a5c`, a képernyőn szintén kék ✗
· `.bal-nezet-ut` → a CSS-ben `#4f46e5` (indigó), a képernyőn kék ✗
· `.bal-nezet-ajanlo` → a CSS-ben `#047857` (zöld), a képernyőn kék ✗
⚠ A javítás EMELT SPECIFICITÁSSAL (nem `!important`), a SZÜLŐ osztályával:
`.bal-top-card .bal-top-join` = (0,2,0) — ez (0,1,1)-nél is erősebb.
⚠ A `.bal-top-card` előtag azért kell (és NEM a `.bal-content`), mert a
LANDINGEN nincs `.bal-content` a wrappern (a `header.php` csak a nem-landing
oldalakra teszi rá) — így a javítás mindkét helyen hat.
⚠ A sáv linkjeinél `:not(.is-active)` KELL: az aktív állapot szabálya
(`.bal-nezet-ajanlo.is-active` = fehér) ugyanolyan specificitású, és ha ez a
blokk később jön, felülírná — az aktív link elveszítené a fehérjét.
⚠ Ez a hatodik eset ebben a projektben (margó, checkbox, kártyaszöveg,
ikonok, fejléc-ikonok, most a gombok) — ÚJ SZABÁLY: a `.bal-content` alá
kerülő komponens MINDEN szín-szabálya kapjon szülő-előtagot.
--------------------------------------------------------------------------- */
.bal-top-card .bal-top-join { color: #fff }
.bal-top-card .bal-top-details { color: #0b7a5c }
.bal-nezet .bal-nezet-ut:not(.is-active) { color: #4f46e5 }
.bal-nezet .bal-nezet-ajanlo:not(.is-active) { color: #047857 }
/* ===========================================================================
6d. A 2D KÁRTYA MODERNIZÁLÁSA — egységes a 3D kártyával (2026-10-04)
===========================================================================
A felhasználó: „A 2d kártyák kicsit elavult designt képviselnek 3d kártyákhoz
képest. Legyen egységes, modernebb. A csillag nem kell rá és az sem, hogy most
hányan jelentkeztek rá mivel új képzés. A kép maradhat, a kategória is.”
A 3D kártya MÉRT mértékei (`.bal-top-card`), amiket innen átveszünk:
cím 17px / 800 / -0.02em · kategória-pirula · ár 17px / 800 / #059669 ·
halvány meta (#94a3b8) · 19px ív + lágy árnyék + hover-emelés (már megvan)
⚠ A MÉRT DOM (2026-10-04): a cím osztálya `.tutor-course-name` — a fájlban
feljebb `.tutor-course-title`-ra írt szabály EZÉRT nem hatott soha
(a cím 19,5px/700 és 27px felső margóval állt). Itt a MÉRT osztályokra írunk.
--------------------------------------------------------------------------- */
/* 1. A CSILLAG ÉS A LÉTSZÁM ELTŰNIK — a 3D kártyán sincs egyik sem.
⚠ A hossz (óra) értéke MEGMARAD: a `:has()` a létszám SORÁT veszi ki, nem az
összes `.tutor-meta-value`-t. `:has()` nélkül a szabály eldobódik (nem törik el
semmi, csak marad a régi kinézet). */
.bal-content .tutor-course-card .tutor-course-ratings { display: none }
.bal-content .tutor-course-card .tutor-card-body .tutor-meta > div:has(.tutor-icon-user-line) { display: none }
/* 2. A CÍM — a 3D kártya fejszövegének mértékei, 3 sorban elvágva
(így a rács kártyái egyforma magasak maradnak) */
.bal-content .tutor-course-card .tutor-course-name {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
margin: 2px 0 10px;
font-size: 17px;
font-weight: 800;
line-height: 1.34;
letter-spacing: -.02em;
}
.bal-content .tutor-course-card .tutor-course-name a { color: #0f172a; text-decoration: none }
.bal-content .tutor-course-card .tutor-course-name a:hover { color: var(--bal-green-deep) }
/* 3. A META-SOR (hossz) — a 3D kártya óra+lecke sorának MÉRT értékei
(2026-10-06): 20px felső margó, #64748b, 500 súly. ⚠ EZ a szabály nyeri a
`balance-2d-kartya.css`-szel szemben ((0,5,0) a (0,4,0)-nal), ezért a margó
és a szín ITT él — ne duplázd máshová. */
.bal-content .tutor-course-card .tutor-card-body .tutor-meta:not(.tutor-mt-auto) {
margin: 20px 0 0;
gap: 14px;
color: #64748b;
font-size: 12.5px;
font-weight: 500;
}
/* ⚠⚠ A FLEX-SZABÁLY KIZÁRJA AZ ELREJTETT LÉTSZÁM-SOROT (2026-10-04, MÉRVE).
A `display: flex` szabály ugyanolyan erős, mint a létszámot elrejtő `:has()`
szabály, és KÉSŐBB van — ezért visszahozta a létszámot. Ha itt kizárjuk, az
elrejtő szabály érvényesül: nem kell `!important`, sem extra ős. */
.bal-content .tutor-course-card .tutor-card-body .tutor-meta:not(.tutor-mt-auto) > div:not(:has(.tutor-icon-user-line)) { align-items: center; gap: 6px; display: flex }
.bal-content .tutor-course-card .tutor-card-body .tutor-meta:not(.tutor-mt-auto) .tutor-meta-value { color: #64748b; font-size: 12.5px; font-weight: 500 }
/* 4. AZ OKTATÓ + KATEGÓRIA sor — a kategória PIRULA (a 3D kártya jelvénye) */
.bal-content .tutor-course-card .tutor-card-body .tutor-meta.tutor-mt-auto {
margin-top: auto;
padding-top: 12px;
border-top: 1px dashed #e2e8f0;
gap: 10px;
color: #94a3b8;
font-size: 12.5px;
font-weight: 600;
}
.bal-content .tutor-course-card .tutor-card-body a[href*="/course-category/"] {
display: inline-block;
margin-left: 4px;
padding: 3px 10px;
border-radius: 999px;
background: #eef7f3;
color: #0b7a5c;
font-size: 11.5px;
font-weight: 800;
text-decoration: none;
}
.bal-content .tutor-course-card .tutor-card-body a[href*="/course-category/"]:hover { background: #d9f0e6; color: #075a44 }
/* 5. AZ ÁR — a mostani ár hangsúlyos, a régi áthúzva, halványan */
/* ⚠⚠ AZ ÁR (2026-10-06): az ÉLŐ (akciós vagy normál) ár ZÖLD és 17px — ugyanaz,
mint a 3D kártyán (`bal-top-price`). Az áthúzott eredeti ár szürke, 12.5px.
⚠ EZ a szabály nyeri a `balance-2d-kartya.css`-t ((0,4,0) a (0,3,0)-nal), ezért
az értékek ITT élnek — ne duplázd máshová. MÉRVE korábban: #0f172a / 18px. */
.bal-content .tutor-course-card .tutor-card-footer .list-item-price .price { color: #059669; font-size: 17px; font-weight: 800; letter-spacing: -.02em }
.bal-content .tutor-course-card .tutor-card-footer .list-item-price del { margin-left: 6px; color: #94a3b8; font-size: 12.5px; font-weight: 600 }
/* 6. A LÁBLÉC íve kövesse a KÁRTYA ívét (mért hiba: 5px volt a 19px helyett) */
.bal-content .tutor-course-card .tutor-card-footer { border-radius: 0 0 var(--bal-radius-card) var(--bal-radius-card) }
/* 7. A KÖNYVJELZŐ üvegszerű korong — így a kép fölött is elviselhető */
.bal-content .tutor-course-card .tutor-course-bookmark .tutor-iconic-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 999px;
background: #ffffffd9;
box-shadow: 0 6px 16px #0f172a1f;
backdrop-filter: blur(6px);
}
.bal-content .tutor-course-card .tutor-course-bookmark .tutor-iconic-btn:hover { background: #fff; color: #0b7a5c }
/* ⚠⚠ SORREND-CSAPDA A SAJÁT BLOKKON BELÜL (2026-10-04) — MÉRVE
A létszámot elrejtő `:has()` szabály és a meta-sor `display: flex` szabálya
UGYANOLYAN specificitású volt, és a `flex` szabály KÉSŐBB — ezért visszahozta
a létszámot (mérve: a `
` `display: flex`, az „1” továbbra is látszott).
A böngésző szerint a `div.matches()` ILLESZKEDETT és a szabály a CSSOM-ban
benne volt — a láthatóságot KIZÁRÓLAG a sorrend döntötte el.
⚠ ELSŐ JAVÍTÁSOM HIBÁS VOLT: `.bal-page` előtaggal erősítettem — de az az
ős a `/tanfolyamok/` archívumon NINCS meg (csak a `.bal-content`), ezért a
szabály soha nem illeszkedett. MÉRVE, nem feltevés: az őslánc.
⚠ A HELYES erősítés ős-FÜGGETLEN: a `.tutor-course-card` osztály kétszer
szerepel a compound szelektorban (6 osztály a flex-szabály 5-ével szemben),
ÉS a blokk végén van. Mellette a flex-szabály `:not(:has(…))` kizárása is
védi — bármelyik elég. */
.bal-content .tutor-course-card.tutor-course-card .tutor-card-body .tutor-meta > div:has(.tutor-icon-user-line) { display: none }
/* ===========================================================================
6e. ★ „SZÍNES GOMB ⇒ FEHÉR FELIRAT” — ÁLTALÁNOS SZABÁLY (2026-10-04)
===========================================================================
A felhasználó kérése: „Ha színes a gomb, nem lehet alapból fehér a szöveg?”
IGEN — és ez a helyes védekezés a visszatérő specificitás-csapda ellen:
a téma `.bal-content a { color: var(--bal-blue) }` (0,1,1) MINDEN
egyosztályos gomb-szabályt (0,1,0) legyőz, ezért a színes gombok felirata
kékre váltott. MÉRT esetek: Jelentkezem · Részletek · A fejlődés útja ·
Képzés-ajánló · a pakli üres állapotának „Kezdjük a paklival” gombja ·
a Tutor Pro előfizetés-addon „Részletek megtekintése” gombja.
⚠ NEM `!important`: egy helyen, (0,2,0) specificitással soroljuk fel a
SZÍNES gomb-osztályokat — új gombnál ide kell beírni.
⚠ A `.main-column` előtag MINDEN oldalon megvan (a `header.php` adja), a
landingen is — ezért erősebb a `.bal-content a`-nál.
⚠ Csak azok a osztályok kerülnek bele, amelyeket a téma TÉNYLEG színesre
fest (gradiens). A puszta `.tutor-btn` / `.tutor-btn-outline-primary`
SZÁNDÉKOSAN nincs itt: azok átlátszó, keretes pirulák, ahol a fehér
felirat olvashatatlan lenne.
--------------------------------------------------------------------------- */
.main-column .button-primary,
.main-column .bal-top-join,
.main-column .bal-btn--primary,
.main-column .bal-content .bal-btn--primary,
.main-column .tutor-btn-primary,
.main-column .tutor-course-list-btn { color: #fff }
/* ★ A KÁRTYAFEJLÉC a SZÍNES gradiensen ül — a feliratai FEHÉREK.
⚠ MÉRVE (2026-10-06, a TALÁLATOK oldalán): a „NYERTES RUTIN" kategória-jelvény
és a „Kurzus"/„Középfokú" pirula `rgb(37,99,235)` volt, mert a fejléc EGY LINK,
és a `.bal-content a` (0,1,1) szabálya nyert az egyosztályos színeken.
A korábbi javítás CSAK a `.bal-3d` aloldalon élt (`landing-page.css:1106`),
ezért a találatok oldalán (és a landingen) nem hatott.
⚠ Sorrend számít: az „Ingyenes" pirula SÖTÉTZÖLD marad világos zöld alapon —
az a szabály ugyanilyen erős, ezért KÉSŐBB kell lennie. */
.main-column .bal-top-visual,
.main-column .bal-top-cat,
.main-column .bal-top-chip { color: #fff }
.main-column .bal-top-chip--free { color: #042e1c }
/* ⚠⚠ AZ ÉRTESÍTÉSEK CTA-GOMBJA — a Tutor Pro előfizetés-addon
(`.tutor-btn.tutor-btn-outline-primary.tutor-btn-md.tutor-btn-block`,
„Részletek megtekintése”). A Tutor alapból ÁTLÁTSZÓ, keretes pirulát rajzol,
amiben a felhasználó „színes gombot” lát — ezért ez a gomb MEGKAPJA a
márka-gradienst, így a fehér felirat a helyes és olvasható választás.
⚠ A `.bal-content .tutor-alert` ág a beiratkozás-visszaigazoló üzenet
dobozára hat; a második ág a kurzus-listában megjelenő azonos gombra. */
.tutor-alert .tutor-btn,
.tutor-notice .tutor-btn,
a.tutor-btn-block.tutor-btn-md.tutor-btn-outline-primary {
color: #fff;
background-image: var(--bal-grad);
background-color: #0a58ff;
border-color: transparent;
box-shadow: var(--bal-shadow-btn);
/* ⚠ a Tutor alapértéke 6px — a többi gombunk 14px, ezért egységesítve */
border-radius: 14px;
}
.tutor-alert .tutor-btn:hover,
.tutor-notice .tutor-btn:hover,
a.tutor-btn-block.tutor-btn-md.tutor-btn-outline-primary:hover {
color: #fff;
transform: translateY(-1px);
box-shadow: var(--bal-shadow-hover);
filter: saturate(1.06);
}