/* ============================================================================ HELLO 2027 — 3. lépés: hub kísérlet (readme/hello-2027.md 9. fejezet), 2026-11-01 „Három anyag”: egy szakasz csak BETŰ, valódi KÉPERNYŐ vagy saját RAJZ lehet. Kártya csak ott marad, ahol valódi, kattintható konténer (a modulrács). Oldalanként egy sötét bizonyítószoba (a vezetői nézet). Hatókör: CSAK a hub (:root body[data-focus="solution"]) — Röviden/Áttekintés/Részletesen. A brandek a hub után jönnek. Minden blokk önálló: ha egy szakasz nem válik be, a blokkja törölhető, és az a szakasz visszaáll. ============================================================================ */ /* --- A. „Hol tart most a működésetek?” — asztalon is összecsukva indul ------------------------------------------ Eddig asztalon nyitva: ~3000 px, a végén a hat modulkártya HARMADSZOR a lapon. Mobilon már így volt. */ :root body[data-focus="solution"] .mf-open-wrap { display: block; text-align: center; margin: var(--space-md) 0 0; } :root body[data-focus="solution"] .module-filter-section:not(.is-open) .mf-body { display: none; } :root body[data-focus="solution"] .module-filter-section.is-open .mf-open-wrap { display: none; } /* --- B. „Egy rendszer. Nem öt különálló szoftver.” — kártyák helyett állomások egy vonalon (betű) -------------- */ :root body[data-focus="solution"] .lifecycle-section { background: var(--bg-primary); } :root body[data-focus="solution"] .lifecycle-flow { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0; max-width: 1140px; margin: clamp(34px, 4vw, 54px) auto 0; } :root body[data-focus="solution"] .lifecycle-flow::before { content: ''; position: absolute; left: calc(100% / 14); right: calc(100% / 14); top: 15px; height: 1px; background: color-mix(in srgb, var(--accent-current) 35%, var(--border-light, #e6eaf0)); } :root body[data-focus="solution"] .lifecycle-arrow { display: none; } :root body[data-focus="solution"] .lifecycle-step { position: relative; max-width: none; background: none; border: 0; border-radius: 0; padding: 0 12px; } :root body[data-focus="solution"] .lifecycle-num { position: relative; z-index: 1; width: 31px; height: 31px; margin-bottom: 16px; background: var(--bg-primary); color: var(--accent-current); border: 1px solid var(--accent-current); font-family: var(--font-mono); font-weight: 500; font-size: .78rem; font-variant-numeric: tabular-nums; } :root body[data-focus="solution"] .lifecycle-step:last-child .lifecycle-num { background: var(--accent-current); color: var(--on-accent); } :root body[data-focus="solution"] .lifecycle-label { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; margin-bottom: 6px; } :root body[data-focus="solution"] .lifecycle-desc { font-size: .86rem; line-height: 1.5; } @media (max-width: 900px) { :root body[data-focus="solution"] .lifecycle-flow { grid-template-columns: 1fr; max-width: 520px; row-gap: 22px; } :root body[data-focus="solution"] .lifecycle-flow::before { left: 15px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; } :root body[data-focus="solution"] .lifecycle-step { text-align: left; padding: 0 0 0 52px; flex-basis: auto; } :root body[data-focus="solution"] .lifecycle-num { position: absolute; left: 0; top: 0; margin: 0; } } /* --- D. „Amit a vezető lát” = a BIZONYÍTÓSZOBA (képernyő, sötét alapon, egyszer a lapon) ------------------------ */ :root body[data-focus="solution"] .lview { background: #0c1626; border-top: 0; color: #e9f0f8; padding-top: clamp(64px, 8vw, 112px); padding-bottom: clamp(64px, 8vw, 112px); } :root body[data-focus="solution"] .lview-title { color: #f3f6fa; } :root body[data-focus="solution"] .lview-lead { color: #9db0c6; } :root body[data-focus="solution"] .lview-title::before { content: 'VEZETŐI NÉZET'; display: block; margin-bottom: 14px; font-family: var(--font-mono); font-weight: 500; font-size: .72rem; letter-spacing: .12em; color: #7fd1e8; } :root[lang="en"] body[data-focus="solution"] .lview-title::before { content: 'LEADER VIEW'; } :root[lang="de"] body[data-focus="solution"] .lview-title::before { content: 'FÜHRUNGSANSICHT'; } :root body[data-focus="solution"] .lview-grid { max-width: 1200px; gap: clamp(20px, 2.6vw, 34px); } :root body[data-focus="solution"] .lview-fig { background: #101c2e; border: 1px solid rgba(233, 240, 250, .12); border-radius: 14px; box-shadow: 0 50px 90px -50px rgba(0, 0, 0, .8); } :root body[data-focus="solution"] .lview-fig img { aspect-ratio: auto; object-fit: contain; background: #fff; } :root body[data-focus="solution"] .lview-cap { color: #9db0c6; border-top: 1px solid rgba(233, 240, 250, .1); font-family: var(--font-mono); font-size: .76rem; letter-spacing: .02em; } :root body[data-focus="solution"] .lview-note { color: #7b8ca2; } :root body[data-focus="solution"] .lview-cta { color: #7fd1e8; } /* --- E. „Ugyanaz a rendszer. Más helyzetek.” — két oszlop egy hajszálvonallal, doboz nélkül ---------------------- */ :root body[data-focus="solution"] #two-stations .sts-cols { grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr); gap: clamp(28px, 4.4vw, 64px); max-width: 1040px; } :root body[data-focus="solution"] #two-stations .sts-card { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; } /* 2. kör (2026-11-01, külső visszajelzés: „jó tartalmilag, de vizuálisan lehetne egy fokkal markánsabb — most inkább dokumentumoldal, mint design statement”): a statement BETŰBŐL áll, dísz nélkül. A két létszám nagy számként áll szemben (80 ↔ 1500 — a különbség a számjegyek hosszában is látszik), alatta monospace leolvasás (ÉVENTE / NAPONTA, egy rövid vonallal), a címke kicsi. A funkciók hajszálvonalas sorok pipa nélkül. A záró mondat a TÉTEL: két sor, nagy címsor-betű, a változó fél halk, az állandó tinta, fölötte az adatlap 1,5 px-es vonala. */ :root body[data-focus="solution"] #two-stations .sts-num { font-family: var(--font-display); font-size: clamp(4.2rem, 9vw, 7.4rem); font-weight: 600; line-height: .88; letter-spacing: -.045em; font-variant-numeric: tabular-nums; color: var(--text-primary); margin: 0 0 14px -.04em; } :root body[data-focus="solution"] #two-stations .sts-sub { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: .72rem; letter-spacing: .12em; color: var(--accent-current); } :root body[data-focus="solution"] #two-stations .sts-sub::before { content: ''; width: 22px; height: 1.5px; background: currentColor; } :root body[data-focus="solution"] #two-stations .sts-card h3 { font-family: inherit; font-size: 1rem; font-weight: 600; letter-spacing: 0; color: var(--text-secondary); margin: 0 0 18px; } :root body[data-focus="solution"] #two-stations .sts-card > ul:not(.sts-roi) { gap: 0; } :root body[data-focus="solution"] #two-stations .sts-card > ul:not(.sts-roi) li { display: block; padding: 9px 0; border-top: 1px solid var(--f-hair); font-weight: 500; font-size: .95rem; } :root body[data-focus="solution"] #two-stations .sts-card > ul:not(.sts-roi) li:last-child { border-bottom: 1px solid var(--f-hair); } :root body[data-focus="solution"] #two-stations .sts-card > ul li svg { display: none; } :root body[data-focus="solution"] #two-stations .sts-roi-label { margin-top: 22px; letter-spacing: .1em; } :root body[data-focus="solution"] #two-stations .sts-roi { border-top: 0; padding-top: 0 !important; gap: 6px; } :root body[data-focus="solution"] #two-stations .sts-roi li::before { font-family: var(--font-mono); font-weight: 500; } :root body[data-focus="solution"] #two-stations .sts-closing { max-width: 1040px; margin: clamp(48px, 6vw, 80px) auto 0; padding-top: clamp(22px, 2.6vw, 32px); border-top: 1.5px solid var(--f-rule); font-family: var(--font-display); font-size: clamp(1.9rem, 4.2vw, 3.2rem); font-weight: 600; line-height: 1.08; letter-spacing: -.025em; text-align: left; color: var(--text-primary); } :root body[data-focus="solution"] #two-stations .sts-closing-a { color: var(--text-secondary); opacity: .7; } :root body[data-focus="solution"] #two-stations .sts-link { background: var(--border-light, #e6eaf0); } :root body[data-focus="solution"] #two-stations .sts-link svg { display: none; } @media (max-width: 760px) { :root body[data-focus="solution"] #two-stations .sts-cols { grid-template-columns: 1fr; } :root body[data-focus="solution"] #two-stations .sts-link { transform: none; height: 1px; } } /* --- F. A mélység kapuja — doboz nélkül, egy szövegsor két hajszálvonal között --------------------------------- */ :root body[data-focus="solution"] .dgate { background: var(--bg-primary); border-color: var(--border-light, #e6eaf0); } :root body[data-focus="solution"] .dgate-box { background: none; border: 0; box-shadow: none; padding-left: 0; padding-right: 0; } /* --- G. „Miért One Solution?” + árazás + üzemeltetés + helyzetek — NÉGY RÉSZ, saját formával (2. kör, 2026-11-01) ------ Gábor: „nem folyik itt vizuálisan nagyon egybe?” — a régi tónusos sávok a szakaszhatárt jelezték; ezt a funkciót hozzuk vissza, nem a színt: rész-fejléc (erős felső vonal + monospace sorszám és címke, values.php `$vbLabel`), a részek között kb. 2,5× annyi levegő, mint bennük; Miért = adatlap · Árazás = sarokjel · Üzemeltetés = süllyesztett panel-pár · Helyzetek = adatlap. Egy címsor-skála (.vb-title) a három alcímre. Díszítő ikon nincs. */ :root body[data-focus="solution"] .proof-unit { background: var(--bg-primary); } :root body[data-focus="solution"] .values-section .section-title { margin-bottom: clamp(28px, 3.4vw, 44px); } :root body[data-focus="solution"] .values-section .vb-part { margin: 0; padding: 0; border-top: 0; } :root body[data-focus="solution"] .values-section .vb-part + .vb-part { margin-top: clamp(72px, 8.5vw, 116px); } :root body[data-focus="solution"] .vb-label { display: flex; align-items: baseline; gap: 12px; margin: 0 0 clamp(18px, 2.2vw, 26px); padding-top: 12px; border-top: 1.5px solid var(--f-rule); font-family: var(--font-mono); font-weight: 500; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-secondary); } :root body[data-focus="solution"] .vb-num { color: var(--accent-current, var(--brand-primary)); font-variant-numeric: tabular-nums; } :root body[data-focus="solution"] .values-section .vb-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.3rem, 2vw, 1.6rem); letter-spacing: -.015em; line-height: 1.2; color: var(--text-primary); text-align: left; margin: 0 0 8px; } /* 01 Miért — adatlap: négy hasáb hajszálvonallal, ikon nélkül (a rész-fejléc vonala a felső él) */ :root body[data-focus="solution"] .values-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-bottom: 0; border-bottom: 1px solid var(--f-hair); } :root body[data-focus="solution"] .value-card { background: none; border: 0; border-radius: 0; text-align: left; padding: 6px 22px 26px; } :root body[data-focus="solution"] .value-card:not(:nth-child(4n+1)) { border-left: 1px solid var(--f-hair); } :root body[data-focus="solution"] .value-card:nth-child(4n+1) { padding-left: 0; } :root body[data-focus="solution"] .value-card:nth-child(n+5) { border-top: 1px solid var(--f-hair); padding-top: 22px; } :root body[data-focus="solution"] .value-card:hover { transform: none; box-shadow: none; } :root body[data-focus="solution"] .value-card-title { font-family: var(--font-display); font-weight: 600; font-size: 1.08rem; } @media (max-width: 900px) { :root body[data-focus="solution"] .values-grid { grid-template-columns: 1fr; border-bottom: 0; } :root body[data-focus="solution"] .value-card { padding: 18px 0; border-bottom: 1px solid var(--f-hair); } :root body[data-focus="solution"] .value-card:first-child { padding-top: 4px; } :root body[data-focus="solution"] .value-card:not(:nth-child(4n+1)) { border-left: 0; } :root body[data-focus="solution"] .value-card:nth-child(n+5) { border-top: 0; padding-top: 18px; } } /* 02 Árazás — sarokjel: egy kijelölt állítás, bal oldalon a mondat, jobbra a gomb */ :root body[data-focus="solution"] .pricing-message { background: none; border: 0; border-radius: 0; box-shadow: none; text-align: left; margin: 0; padding: 0; } :root body[data-focus="solution"] .pricing-content.f-mark { padding: clamp(24px, 3vw, 36px) clamp(24px, 3.2vw, 40px); } :root body[data-focus="solution"] .pricing-content { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 32px; align-items: center; } :root body[data-focus="solution"] .pricing-content .btn { grid-column: 2; grid-row: 1 / span 2; } :root body[data-focus="solution"] .pricing-desc { margin: 0; max-width: 56ch; } @media (max-width: 640px) { :root body[data-focus="solution"] .pricing-content { grid-template-columns: 1fr; row-gap: 16px; } :root body[data-focus="solution"] .pricing-content .btn { grid-column: 1; grid-row: auto; justify-self: start; } } /* 03 Üzemeltetés — süllyesztett panel-pár (felhőben / helyben): a blokk egyetlen tónusváltása */ :root body[data-focus="solution"] .hosting-section { text-align: left; } :root body[data-focus="solution"] .vb-inset { margin-top: clamp(16px, 2vw, 22px); padding-bottom: clamp(18px, 2.2vw, 26px); } :root body[data-focus="solution"] .hosting-cards { margin: 0; } :root body[data-focus="solution"] .hosting-cards .trust-card { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; text-align: left; } :root body[data-focus="solution"] .hosting-cards .trust-card:hover { transform: none; box-shadow: none; background: none; } :root body[data-focus="solution"] .hosting-cards .trust-card-title { font-size: 1.05rem; margin-bottom: 10px; } :root body[data-focus="solution"] .hosting-cards .trust-card p { margin: 0; color: var(--text-secondary); } :root body[data-focus="solution"] .hosting-section-footer { text-align: left; margin: 14px 0 0; } /* 04 Helyzetek — adatlap: két hasábos sorok, a létszám monospace kijelző, ikon nélkül */ :root body[data-focus="solution"] .hub-references-section { margin-top: 0; } :root body[data-focus="solution"] .hub-references-lead { margin-bottom: clamp(18px, 2.2vw, 24px); } :root body[data-focus="solution"] .hub-ref-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(28px, 4vw, 56px); margin-bottom: 14px; } :root body[data-focus="solution"] .hub-ref-card { display: block; background: none; border: 0; border-top: 1px solid var(--f-hair); border-radius: 0; padding: 14px 0; } :root body[data-focus="solution"] .hub-ref-card:hover { border-color: var(--f-hair); box-shadow: none; } :root body[data-focus="solution"] .hub-ref-sector { font-size: .95rem; white-space: normal; } :root body[data-focus="solution"] .hub-ref-size { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .04em; font-variant-numeric: tabular-nums; margin: 2px 0 4px; } :root body[data-focus="solution"] .hub-ref-note { font-size: .86rem; } @media (max-width: 760px) { :root body[data-focus="solution"] .hub-ref-grid { grid-template-columns: 1fr; } } /* --- H. HR School — három hasáb vonallal, doboz és színes ikonlap nélkül ---------------------------------------- */ :root body[data-focus="solution"] .hrschool-badge { background: none; color: var(--accent-current); padding: 0; border-radius: 0; font-family: var(--font-mono); font-weight: 500; font-size: .72rem; letter-spacing: .1em; } :root body[data-focus="solution"] .hrschool-badge::before { content: ''; display: inline-block; width: 16px; height: 1px; margin-right: 10px; vertical-align: .32em; background: currentColor; opacity: .7; } :root body[data-focus="solution"] .hrschool-service-card { background: none; border: 0; border-top: 1px solid var(--border-light, #e6eaf0); border-radius: 0; box-shadow: none; text-align: left; padding: 22px 0 0; } :root body[data-focus="solution"] .hrschool-service-card:hover { transform: none; box-shadow: none; } :root body[data-focus="solution"] .hrschool-service-icon { margin: 0 0 10px; color: var(--accent-current); } :root body[data-focus="solution"] .hrschool-service-card h3 { font-family: var(--font-display); font-size: 1.02rem; } /* ============================================================================ 2. KÖR (2026-11-01) ============================================================================ */ /* --- I. „Ismerős?” — pirulák helyett szöveg-tokenek: elöl egy akcentus-színű monospace „+” (hozzájött), mint egy napló halmozódó sorai. A sorrend és a tördelés marad, csak a doboz tűnik el. ------------------------------- */ :root body[data-focus="solution"] .act1 { background: var(--bg-primary); } :root body[data-focus="solution"] .act1-items { gap: 10px 26px; max-width: 860px; } :root body[data-focus="solution"] .act1-items span { background: none; border: 0; border-radius: 0; padding: 0; font-size: clamp(1rem, 1.5vw, 1.12rem); color: var(--text-primary); white-space: nowrap; } :root body[data-focus="solution"] .act1-items span::before { content: '+'; margin-right: 7px; font-family: var(--font-mono); font-weight: 500; color: var(--accent-current); } /* --- J. Modulrács („Mire keresel választ?”) — 2. kör (2026-11-01, külső visszajelzés: „még picit a régebbi világból … puhák és klasszikus SaaS card-osak”): a hét kártya EGY ADATLAPPÁ áll össze. Nincs köz, a kártyák közös hajszálvonalat osztanak (negatív margó), sarok 0; a felső él 1,5 px-es adatlap-vonal. Kártyán belül: kérdés (betű) → csupasz 22 px-es ikon + név egy sorban (az ikon színezett négyzete tiltott forma) → a funkciók hajszálvonalas sorok pipa nélkül → lábsor monospace linkkel a lap aljához tűzve. Sarokjel, levágott sarok, fénycsík NINCS — ez nyugodt navigáció, nem kezelőszerv; rámutatásra csak a keret kap akcentust és a nyíl lép 3 px-et. --------------------------------------------- */ :root body[data-focus="solution"] #solutions .solutions-grid { gap: 0; border-top: 1.5px solid var(--f-rule); padding-top: 0; } :root body[data-focus="solution"] #solutions .solution-card { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-content: start; grid-template-rows: auto auto 1fr auto; margin: 0 0 -1px -1px; padding: clamp(20px, 2.2vw, 28px); background: var(--bg-primary); background-clip: padding-box; border: 1px solid var(--f-hair); border-top-color: transparent; border-radius: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; transform: none; transition: border-color .2s ease, opacity var(--transition-slow); } :root body[data-focus="solution"] #solutions .solution-card:hover, :root body[data-focus="solution"] #solutions .solution-card:focus-within { position: relative; z-index: 1; transform: none; box-shadow: none; border-color: color-mix(in srgb, var(--accent-current) 55%, var(--f-hair)); } :root body[data-focus="solution"] #solutions :is(.slide-in-left, .slide-in-right, .fade-in), :root body[data-focus="solution"] #solutions :is(.slide-in-left, .slide-in-right, .fade-in).visible { transform: none; } :root body[data-focus="solution"] #solutions .solution-question { grid-column: 1 / -1; margin: 0 0 18px; padding: 0; border: 0; font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; line-height: 1.32; letter-spacing: -.005em; text-wrap: balance; } :root body[data-focus="solution"] #solutions .solution-icon { grid-column: 1; width: auto; height: auto; margin: 0; padding: 0; background: none; border-radius: 0; color: var(--accent-current); align-self: center; } :root body[data-focus="solution"] #solutions .solution-icon svg { width: 22px; height: 22px; stroke-width: 1.6; } :root body[data-focus="solution"] #solutions .solution-card:has(.solution-subtitle) .solution-icon { grid-row: span 2; } :root body[data-focus="solution"] #solutions .solution-subtitle { grid-column: 2; margin: 0; font-family: var(--font-mono); font-size: .68rem; font-weight: 500; letter-spacing: .08em; color: var(--text-secondary); } :root body[data-focus="solution"] #solutions .solution-title { grid-column: 2; margin: 0; font-family: var(--font-display); font-size: 1.22rem; font-weight: 600; letter-spacing: -.01em; align-self: center; } :root body[data-focus="solution"] #solutions .solution-features { grid-column: 1 / -1; margin: 14px 0 0; align-self: start; } :root body[data-focus="solution"] #solutions .solution-features li { display: block; margin: 0; padding: 8px 0; border-top: 1px solid var(--f-hair); font-size: .92rem; line-height: 1.45; color: var(--text-secondary); } :root body[data-focus="solution"] #solutions .solution-features svg { display: none; } :root body[data-focus="solution"] #solutions .solution-cta { grid-column: 1 / -1; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--f-hair); background-image: none; font-family: var(--font-mono); font-size: .74rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-current); } :root body[data-focus="solution"] #solutions .solution-cta svg { width: 14px; height: 14px; transition: transform .2s ease; } :root body[data-focus="solution"] #solutions .solution-card:hover .solution-cta svg { transform: translateX(3px); } @media (prefers-reduced-motion: reduce) { :root body[data-focus="solution"] #solutions .solution-cta svg { transition: none; } } /* zárósor (2026-11-01, utóellenőrzés): a 7. kártya („És ami ezekbe nem fér bele?” — HR Funkciók) egyedül állt a harmadik sorban, csonka volt a lap vége. Három hasábon teljes szélességű ZÁRÓSOR lesz belőle: kérdés + név balra, a négy funkció egy sorban monospace „+” tokenként (mint az „Ismerős?” sorai), a link jobbra. A tartalma is ez: ami a hat modulba nem fér, az a sor végén áll. */ @media (min-width: 1025px) { :root body[data-focus="solution"] #solutions .solution-card#hr-functions-card { grid-column: 1 / -1; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; column-gap: 18px; row-gap: 12px; padding-top: 22px; padding-bottom: 22px; } :root body[data-focus="solution"] #solutions #hr-functions-card .solution-question { grid-column: 1 / 3; grid-row: 1; margin: 0; } :root body[data-focus="solution"] #solutions #hr-functions-card .solution-icon { grid-column: 1; grid-row: 2; } :root body[data-focus="solution"] #solutions #hr-functions-card .solution-title { grid-column: 2; grid-row: 2; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; } :root body[data-focus="solution"] #solutions #hr-functions-card .solution-features { grid-column: 2; grid-row: 2; margin: 0; align-self: center; justify-self: end; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 22px; max-width: 70%; } :root body[data-focus="solution"] #solutions #hr-functions-card .solution-features li { padding: 0; border: 0; font-size: .92rem; white-space: nowrap; } :root body[data-focus="solution"] #solutions #hr-functions-card .solution-features li::before { content: '+'; margin-right: 6px; font-family: var(--font-mono); font-weight: 500; color: var(--accent-current); } :root body[data-focus="solution"] #solutions #hr-functions-card .solution-cta { grid-column: 3; grid-row: 1 / 3; margin: 0; padding: 0; border: 0; align-self: center; } } /* --- K. Modulrács mobilon — ugyanaz az adatlap egy hasábban: kérdés fent, ikon + név egy sorban, link alul. A funkciólista mobilon amúgy is rejtett (homepage.css), így a kártya tömör marad. ------------------------------------------ */ @media (max-width: 640px) { :root body[data-focus="solution"] #solutions .solution-card { padding: 18px 4px; border-left: 0; border-right: 0; margin-left: 0; } :root body[data-focus="solution"] #solutions .solution-question { margin-bottom: 12px; font-size: 1rem; } :root body[data-focus="solution"] #solutions .solution-title { font-size: 1.12rem; } :root body[data-focus="solution"] #solutions .solution-features { display: none; } :root body[data-focus="solution"] #solutions .solution-cta { margin-top: 12px; padding-top: 0; border-top: 0; } } /* ============================================================================ KÖZÖS BLOKKOK — MINDEN BRAND (2026-11-01, a katalógus 4. pontja: readme/hello-2027-katalogus.md) Ezek a partialok minden brandoldalon ugyanazok, ezért itt NEM a hubra szűkítünk (:root body). A GYIK (adatlap) és a szolgáltatások (süllyesztett panel) a saját partialjukban kapták meg a formát. ============================================================================ */ /* mélység kapuja: doboz nélkül, egy szövegsor két hajszálvonal között (a hubon már így volt) */ :root body .dgate { background: var(--bg-primary); border-color: var(--border-light, #e6eaf0); } :root body .dgate-box { background: none; border: 0; box-shadow: none; padding-left: 0; padding-right: 0; } /* kapcsolódó megoldások / HR Moduljaink: SÍK KÁRTYA (navigáció) — egy hajszálvonal, se üveg, se árnyék, se emelés */ :root body #solutions .solution-card { background: var(--bg-primary); border: 1px solid var(--border-light, #e6eaf0); border-radius: 14px; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; transition: border-color .2s ease, opacity var(--transition-slow); } :root body #solutions .solution-card:hover { transform: none; box-shadow: none; border-color: color-mix(in srgb, var(--accent-current) 55%, var(--border-light, #e6eaf0)); } :root body #solutions .slide-in-left, :root body #solutions .slide-in-left.visible { transform: none; } /* riportgaléria: SÍK KÁRTYA (kattintható kép) — az árnyék és az emelés ki, rámutatásra akcentus-keret */ :root body .dgal-card { box-shadow: none; border: 1px solid var(--border-light, #e6eaf0); } :root body .dgal-card:hover { box-shadow: none; transform: none; border-color: color-mix(in srgb, var(--accent-current) 55%, var(--border-light, #e6eaf0)); } /* szolgáltatások: a két felirat monospace címke */ :root body .service-icon-item span { font-family: var(--font-mono); font-weight: 500; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; } :root body .service-icon-divider { font-family: var(--font-mono); font-style: normal; font-size: .72rem; } /* „Népszerű” jelvény a kiemelt modulkártyán: pirula helyett monospace címke a kártya jobb felső sarkában (eddig félig a kártya fölött lebegett) */ :root body #solutions .featured-badge { top: 18px; right: 20px; margin-top: 0; padding: 0; border-radius: 0; background: none; color: var(--accent-current); font-family: var(--font-mono); font-weight: 500; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; } :root body #solutions .solution-card.featured { transform: none; border-width: 1px; border-color: color-mix(in srgb, var(--accent-current) 45%, var(--border-light, #e6eaf0)); background: var(--bg-primary); } /* riportgaléria fejléce: a címke a cím alá-fölé középre (eddig balra állt, a cím középen) */ :root body .dgal > .container > .feature-details-header { text-align: center; } /* ============================================================================ 4. LÉPÉS — BRANDEK, A MARADÉK (2026-11-01; a katalógus 5. pontja szerint: readme/hello-2027-katalogus.md) ============================================================================ */ /* --- ADATLAP: tény- és képességkártyák → erős felső vonal, doboz nélkül ------------------------------------------ .feature-item.card = a közös funkciórács (oneLearning, onePerformance, oneTiming, get-2.work megoldás-blokkjai), oneDox OTP- és útlevél-kártyák, get-2.work startForm, a Röviden bizonyíték-kártyái (.bpf-card). */ :root body :is(.feature-item.card, .dox-otp-card.card, .dox-pass-feature.card, .startform-card, .bpf-card) { background: none; border: 0; border-top: 1.5px solid var(--f-rule); border-radius: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 14px 0 0; text-align: left; overflow: visible; } :root body :is(.feature-item.card, .dox-otp-card.card, .dox-pass-feature.card, .startform-card, .bpf-card):hover { transform: none; box-shadow: none; } :root body .startform-card::before { display: none; } :root body :is(.feature-item, .dox-otp-card, .dox-pass-feature, .startform-card) :is(.feature-icon, .dox-otp-card-icon, .dox-pass-feature-icon, .startform-card-icon) { margin: 4px 0 12px; width: auto; height: auto; background: none; border-radius: 0; color: var(--accent-current); } :root body :is(.feature-item, .dox-otp-card, .dox-pass-feature, .startform-card) :is(h3, h4, .feature-title, .dox-otp-card-title, .startform-card-title) { font-family: var(--font-display); font-weight: 600; } /* --- SÜLLYESZTETT PANEL: a oneDox QES-pár ------------------------------------------------------------------------ */ :root body .dox-qes-card.card { background: var(--f-inset); border: 0; border-radius: 10px; box-shadow: none; backdrop-filter: none; } :root body .dox-qes-card.card:hover { transform: none; box-shadow: none; } /* --- SÍK KÁRTYA: kattintható navigáció — árnyék és emelés ki, rámutatásra akcentus-keret ----------------------- */ :root body :is(.lauth-card, .rcd-item) { box-shadow: none; border: 1px solid var(--f-hair); } :root body :is(.lauth-card, .rcd-item):hover { transform: none; box-shadow: none; border-color: color-mix(in srgb, var(--accent-current) 55%, var(--f-hair)); } /* --- SAROKJEL: kijelölt állítás ----------------------------------------------------------------------------------- */ :root body .philo-card, :root body[data-focus="solution"] .gband-inner { --tk: var(--f-tick); border: 0; border-radius: 0; box-shadow: none; background: linear-gradient(var(--tk), var(--tk)) top left / 12px 1px no-repeat, linear-gradient(var(--tk), var(--tk)) top left / 1px 12px no-repeat, linear-gradient(var(--tk), var(--tk)) top right / 12px 1px no-repeat, linear-gradient(var(--tk), var(--tk)) top right / 1px 12px no-repeat, linear-gradient(var(--tk), var(--tk)) bottom left / 12px 1px no-repeat, linear-gradient(var(--tk), var(--tk)) bottom left / 1px 12px no-repeat, linear-gradient(var(--tk), var(--tk)) bottom right / 12px 1px no-repeat, linear-gradient(var(--tk), var(--tk)) bottom right / 1px 12px no-repeat; } :root body[data-focus="solution"] .gband { background: var(--bg-primary); } :root body[data-focus="solution"] .gband-inner { max-width: 940px; margin: 0 auto; padding: 26px 32px; } /* --- BIZONYÍTÓSZOBA: a vezetői nézet a brandeken is (a hubon a D blokk adja, a „VEZETŐI NÉZET” címkével) ------- */ :root body .lview { background: var(--f-room-bg); border-top: 0; color: #e9f0f8; padding-top: clamp(64px, 8vw, 112px); padding-bottom: clamp(64px, 8vw, 112px); } :root body .lview-title { color: #f3f6fa; } :root body .lview-lead { color: #9db0c6; } :root body .lview-fig { background: #101c2e; border: 1px solid rgba(233, 240, 250, .12); border-radius: 14px; box-shadow: 0 50px 90px -50px rgba(0, 0, 0, .8); } :root body .lview-fig img { background: #fff; } :root body .lview-cap { color: #9db0c6; border-top: 1px solid rgba(233, 240, 250, .1); font-family: var(--font-mono); font-size: .76rem; letter-spacing: .02em; } :root body .lview--solo .lview-cap { color: #e9f0f8; font-family: inherit; font-size: 1.02rem; } :root body .lview-note { color: #7b8ca2; } :root body .lview-closer { color: #f3f6fa; } :root body .lview-cta { color: #7fd1e8; } /* a Röviden bizonyíték-kártyáinak akcentus-sínje (brief.css ::before) ki — adatlap */ :root body .bpf-card::before { display: none; } /* onePerformance Röviden: a „ugyanaz a mechanika nő” gondolat (brief.css) az adatlap nyelvén — a bal sín és a tintás háttér helyett a FELSŐ vonal vastagodik balról jobbra (1 → 1,5 → 2,5 px) */ :root body[data-depth="brief"][data-focus="performance"] .bpf-card { padding-left: 0; background: none; } :root body[data-depth="brief"][data-focus="performance"] .bpf-card:nth-child(1) { border-top-width: 1px; } :root body[data-depth="brief"][data-focus="performance"] .bpf-card:nth-child(2) { border-top-width: 1.5px; } :root body[data-depth="brief"][data-focus="performance"] .bpf-card:nth-child(3) { border-top-width: 2.5px; border-top-color: var(--text-primary); } /* --- oneDox dokumentum-útlevél = a oneDox Részletesen BIZONYÍTÓSZOBÁJA (Gábor döntése, 2026-11-01) --------------- A section .f-room osztályt kap (pass.php); itt a saját elemei igazodnak a sötét alaphoz. 3. kör (2026-11-01): a PDF-makett kikerült — a valódi képernyő egyedül, nagyban; alatta két jellemző két hasábban, ikon nélkül. */ :root body #dox-pass.f-room { background: var(--f-room-bg); border-top: 0; padding-top: clamp(64px, 8vw, 112px); padding-bottom: clamp(64px, 8vw, 112px); } :root body #dox-pass.f-room .dox-section-badge { background: none; border: 0; padding: 0; border-radius: 0; color: #7fd1e8; font-family: var(--font-mono); font-weight: 500; font-size: .72rem; letter-spacing: .12em; } :root body #dox-pass.f-room .dox-pass-visual { grid-template-columns: minmax(0, 1fr); max-width: 980px; } :root body #dox-pass.f-room .dox-pass-screenshot { border: 1px solid rgba(233, 240, 250, .12); border-radius: 14px; box-shadow: 0 50px 90px -50px rgba(0, 0, 0, .8); background: #fff; } :root body #dox-pass.f-room .dox-pass-features { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); max-width: 980px; } @media (max-width: 640px) { :root body #dox-pass.f-room .dox-pass-features { grid-template-columns: minmax(0, 1fr); } } :root body #dox-pass.f-room .dox-pass-feature { color: #e9f0f8; } :root body #dox-pass.f-room .dox-microcopy { color: #7b8ca2; } :root body #dox-pass.f-room .dox-pass-header { text-align: center; } /* --- hub HR Now = a hub Részletesen BIZONYÍTÓSZOBÁJA (Gábor döntése, 2026-11-01) ----------------------------------- Csak a Részletesenben kap .f-room-ot (hr-now.php) — az Áttekintésben a vezetői nézet a szoba. A valódi képernyő sötét keretben, a sorok hajszálvonala és a címkék a szoba tokenjeiből. */ :root body #hr-now.f-room { background: var(--f-room-bg); } :root body #hr-now.f-room .hnow-eyebrow { color: #7fd1e8; } :root body #hr-now.f-room .hnow-lead { color: #9db0c6; } :root body #hr-now.f-room .hnow-row { border-top-color: rgba(233, 240, 250, .12); } :root body #hr-now.f-room .hnow-label { font-family: var(--font-mono); font-weight: 500; font-size: .7rem; letter-spacing: .1em; color: #7b8ca2; } :root body #hr-now.f-room .hnow-text { color: #e9f0f8; } :root body #hr-now.f-room .hnow-tag { font-family: var(--font-mono); font-weight: 500; font-size: .74rem; letter-spacing: .02em; color: #7fd1e8; } :root body #hr-now.f-room .hnow-closer { color: #f3f6fa; } :root body #hr-now.f-room .hnow-fig img { border: 1px solid rgba(233, 240, 250, .12); box-shadow: 0 50px 90px -50px rgba(0, 0, 0, .8); } :root body #hr-now.f-room .shot-open:hover img { box-shadow: 0 56px 96px -50px rgba(0, 0, 0, .9); } :root body #hr-now.f-room .shot-open-hint { background: rgba(8, 14, 24, .82); border: 1px solid rgba(233, 240, 250, .16); } :root body #hr-now.f-room .shot-open:hover .shot-open-hint { background: #0c1626; border-color: #7fd1e8; } /* --- oneLearning „Nem csak tanít. Mér.” = a oneLearning Részletesen BIZONYÍTÓSZOBÁJA (Gábor döntése, 2026-11-01) -------- Csak a Részletesenben kap .f-room-ot (dashboard-teaser.php). A valódi Újraminősítés-képernyő sötét keretben, a képaláírás a keret alján mono sor; a gomb marad a oneDashboard türkize, de derengés nélkül. */ :root body #learning-dashboard-teaser.f-room { background: var(--f-room-bg); border-bottom: 0; padding-top: clamp(64px, 8vw, 112px); padding-bottom: clamp(64px, 8vw, 112px); } :root body #learning-dashboard-teaser.f-room .ldt-eyebrow { color: #7fd1e8; } :root body #learning-dashboard-teaser.f-room .ldt-cta { box-shadow: none; } :root body #learning-dashboard-teaser.f-room .ldt-shot { border: 1px solid rgba(233, 240, 250, .12); border-radius: 14px; background: #0f1b2c; box-shadow: 0 50px 90px -50px rgba(0, 0, 0, .8); } :root body #learning-dashboard-teaser.f-room .ldt-figcap { color: #7b8ca2; border-top-color: rgba(233, 240, 250, .1); } /* ============================================================================================================ ZÁRÓ KÖR (2026-11-01, a záró mérés után — Gábor: „az akcentusosokat cseréljük valamelyik újra, ha még maradtak”) A mérés (31 oldal-nézet, 1440 px) a megmaradt akcentus-csíkokat és színfoltokat ide gyűjtötte: - riportgaléria-kártya (minden galéria): a kártya testén a 2 px-es gradienses akcentus-vonal és az elmosott színfolt (.dgal-card-body ::after / ::before) ki — a sík kártya nyelve: keret, rámutatásra akcentus-keret (fent, KÖZÖS BLOKKOK) - összehasonlító pár (comparison-faq.php — onePerformance Áttekintés): a két kártya felső 3 px-es csíkja helyett SÜLLYESZTETT PANEL-pár (a katalógus szerint a „pár” formája) - oneDox „Túl a papíron” rétegek (Áttekintés): bal oldali akcentus-csíkos kártyák helyett ADATLAP-sorok, monospace index - oneDox „Így működik” állomásvonal (Áttekintés): az ikon-négyzetek csupasz jellé (a vonalat a lap színe takarja), a vonal színátmenete sík hajszálvonal; a szekció és a oneDox hero halvány színátmenete sík (A oneDox életút szabálymondata a partialban kapott .f-mark-ot; az RCC-szoba gradienses címszava az rcc-proof.php-ban sík.) Szándékosan marad: a Készenléti demó állapotjelei (.st-* — szemantikus szín a képernyőn), az állomásvonalak. */ :root body .dgal-card-body::before, :root body .dgal-card-body::after { display: none; } :root body .dox-comparison-card.card { background: var(--f-inset); border: 0; border-radius: 10px; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } :root body .dox-comparison-card.card:hover { transform: none; box-shadow: none; } :root body .dox-beyond-section { background: none; } :root body .dox-beyond-layers { gap: 0; border-top: 1.5px solid var(--f-rule); } :root body .dox-beyond-layer { background: none; border: 0; border-bottom: 1px solid var(--f-hair); border-radius: 0; box-shadow: none; padding: 18px 0; gap: 20px; } :root body .dox-beyond-layer:hover { transform: none; box-shadow: none; border-color: var(--f-hair); } :root body .dox-beyond-layer-index { background: none; padding: 3px 0 0; min-width: 2.6ch; text-align: left; border-radius: 0; font-family: var(--font-mono); font-weight: 500; font-size: .74rem; letter-spacing: .04em; font-variant-numeric: tabular-nums; color: var(--accent-current, var(--accent-document)); } :root body .dox-beyond-layer-label { font-family: var(--font-display); font-weight: 600; } :root body .dox-howitworks-section { background: none; } :root body .dox-howitworks-flow::before { background: var(--f-hair); } :root body .dox-howitworks-step-icon { width: 52px; height: 52px; border: 0; border-radius: 0; box-shadow: none; background: var(--bg-primary, #fff); color: var(--accent-current, var(--accent-document)); } :root body .dox-howitworks-step:hover .dox-howitworks-step-icon { transform: none; box-shadow: none; } :root body .hero-section[data-focus="document"] .hero-gradient { background: var(--bg-primary); } :root body .hero-section[data-focus="document"] .hero-gradient::before, :root body .hero-section[data-focus="document"] .hero-background::before, :root body .hero-section[data-focus="document"] .hero-background::after { display: none; } /* --- ZÁRÓ KÖR, 2. rész (2026-11-01, Gábor: „mehet az 1-es és a 2-es”) ------------------------------------------------- 1. A kapcsolat-blokk (hub/contact.php, minden Áttekintés/Részletesen alja) három kártyája ikon-négyzettel → BETŰ-sorok: monospace címke, alatta az érték, hajszálvonal választja el; az ikon dísz volt (nem funkcionális) → ki. Az űrlap 2026-11-01 óta szintén ott (.cf). 2. Halvány színátmenetek → sík: a megoldás-blokk márkaszínű derengése (.feature-details-section, minden brand), a oneDashboard pult-panelje (.dcp-panel). A fő gomb a modern-design-system.css --gradient-cta tokenjén lett sík. (A .philo-card és a hub .gband-inner „színátmenete” a sarokjel négy L-jele — az marad.) */ /* (a kapcsolat-blokk 1. pontja 2026-11-01 óta a css/types.css .contact-* típusában él) */ :root body .feature-details-section { background: var(--gray-50); } :root body .dcp-panel { background: #0e1828; } /* --- oneDashboard pult = a oneDashboard Áttekintés ÉS Részletesen BIZONYÍTÓSZOBÁJA (Gábor: „csináljunk”, 2026-11-01) ----- Eddig a oneDashboard két nézetében nem volt sötét felület. A trend-panel (cockpit.php) a márka jele — a szobában a panel a „képernyő” (keret + mély árnyék), a szöveg a szoba tokenjeiből; a pontok „+” tokenek, a pirula monospace sor. */ :root body #dashboard-cockpit.f-room { background: var(--f-room-bg); border-bottom: 0; padding-top: clamp(64px, 8vw, 112px); padding-bottom: clamp(64px, 8vw, 112px); } :root body #dashboard-cockpit.f-room h2 { color: #f3f6fa; } :root body #dashboard-cockpit.f-room .dcp-eyebrow { background: none; padding: 0; border-radius: 0; color: #7fd1e8; } :root body #dashboard-cockpit.f-room .dcp-lead { color: #9db0c6; } :root body #dashboard-cockpit.f-room .dcp-list { gap: 8px; } :root body #dashboard-cockpit.f-room .dcp-list li { padding-left: 22px; color: #e9f0f8; font-weight: 500; } :root body #dashboard-cockpit.f-room .dcp-list li::before { content: '+'; top: 0; width: auto; height: auto; border: 0; border-radius: 0; background: none; font-family: var(--font-mono); font-weight: 500; color: #6ff0de; } :root body #dashboard-cockpit.f-room .dcp-pill { background: none; padding: 0; border-radius: 0; color: #7fd1e8; font-family: var(--font-mono); font-weight: 500; font-size: .8rem; letter-spacing: .02em; } :root body #dashboard-cockpit.f-room .dcp-panel { background: #101c2e; border-color: rgba(233, 240, 250, .12); border-radius: 14px; box-shadow: 0 50px 90px -50px rgba(0, 0, 0, .8); } /* --- L. „Hol tart most a működésetek?” — a választó mint CÉLZÓ MŰSZER (pici edgerunner, Gábor, 2026-11-01: „a Találd meg menüben is lehetne kis cyberpunk / proof-scan-hez hasonló vizuális móka, az egy aktív szekció, user kattint”). A csempe szögletes kezelőszerv (levágott jobb alsó sarok, mint a gomb). Kattintásra „rázár”: négy sarokjel bekattan (kicsit kívülről, rugósan), egy fénycsík egyszer végigfut balról jobbra (a leolvasás vízszintes párja), és a felirat egy pillanatra kromatikusan elcsúszik (narancs/cián — a két meglévő jelszínünk). Kiválasztva a sarokjelek maradnak; levéve visszahúzódnak. Új szín nincs. Csökkentett mozgásnál nincs csík és glitch, a sarokjel azonnal áll. A találati modulkártya (.module-card.highlighted) ugyanígy zár rá — a felső akcentus-csík (tiltott forma) helyett. */ :root body[data-focus="solution"] .filter-option { position: relative; overflow: hidden; isolation: isolate; /* a keret egy fokkal erősebb a hajszálvonalnál: a világosszürke szakasz-háttéren a ki nem választott csempe is rácsként olvasódjon */ border: 1px solid color-mix(in srgb, var(--text-primary) 18%, var(--bg-primary)); border-radius: var(--radius-btn); background: var(--bg-primary); box-shadow: none; transform: none; transition: border-color .2s ease, background-color .2s ease; } :root body[data-focus="solution"] .filter-option:hover { border-color: color-mix(in srgb, var(--accent-current) 55%, var(--f-hair)); transform: none; box-shadow: none; } :root body[data-focus="solution"] .filter-option:focus-visible { outline: 2px solid var(--accent-current); outline-offset: -4px; } /* 2. kör (Gábor): „a sarkok a kereten belül nem túlzás? … csak sarok maradna, max picit erősebb, és a jobb alsó picit minimálban hibás” + „nem lecsapott, csak glitch”. Kiválasztva a keret NEM vált színt (nincs dupla jelölés): a négy sarokjel a keretre simul (2 px, akcentus), a jobb alsó 2 px-szel elcsúszva — elcsúszott regiszter, nem levágott sarok. */ :root body[data-focus="solution"] .filter-option.selected { background: color-mix(in srgb, var(--accent-current) 4%, var(--bg-primary)); } :root body[data-focus="solution"] .filter-step-hint { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; margin-top: 8px; color: var(--text-secondary); } /* sarokjelek (a jelölés) + fénycsík (a rázárás pillanata) */ :root body[data-focus="solution"] :is(.filter-option, .module-card)::before { --tk: var(--accent-current); --tk2: var(--sig, #5CC3DE); /* a glitch-sarok: kisebb, türkiz FESTÉK (3 px — felület, nem vonal; Gábor 2026-11-01) */ content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; height: auto; background: linear-gradient(var(--tk), var(--tk)) top left / 14px 2px no-repeat, linear-gradient(var(--tk), var(--tk)) top left / 2px 14px no-repeat, linear-gradient(var(--tk), var(--tk)) top right / 14px 2px no-repeat, linear-gradient(var(--tk), var(--tk)) top right / 2px 14px no-repeat, linear-gradient(var(--tk), var(--tk)) bottom left / 14px 2px no-repeat, linear-gradient(var(--tk), var(--tk)) bottom left / 2px 14px no-repeat, linear-gradient(var(--tk2), var(--tk2)) right 2px bottom 2px / 8px 3px no-repeat, linear-gradient(var(--tk2), var(--tk2)) right 2px bottom 2px / 3px 8px no-repeat; opacity: 0; transform: scale(1.1); transition: opacity .12s ease, transform .22s cubic-bezier(.2, .9, .3, 1.35); } :root body[data-focus="solution"] :is(.filter-option.selected, .module-card.highlighted)::before { opacity: 1; transform: scale(1); } :root body[data-focus="solution"] :is(.filter-option, .module-card)::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 45%; z-index: 0; pointer-events: none; background: linear-gradient(90deg, transparent 0, color-mix(in srgb, var(--accent-current) 16%, transparent) 88%, var(--accent-current) 88%, var(--accent-current) calc(88% + 1.5px), transparent calc(88% + 1.5px)); opacity: 0; transform: translateX(-100%); } :root body[data-focus="solution"] :is(.filter-option.selected, .module-card.highlighted)::after { animation: fo-scan .5s cubic-bezier(.3, .6, .4, 1) 1; } :root body[data-focus="solution"] .filter-option.selected .filter-option-label, :root body[data-focus="solution"] .module-card.highlighted .module-card-name { animation: fo-glitch .26s steps(4, end) 1; } :root body[data-focus="solution"] :is(.filter-option-icon, .filter-option-label, .module-card > *) { position: relative; z-index: 2; } @keyframes fo-scan { 0% { opacity: 1; transform: translateX(-100%); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateX(230%); } } @keyframes fo-glitch { 0% { text-shadow: 2px 0 #FFB15C, -2px 0 #7fd1e8; } 35% { text-shadow: -1.5px 0 #FFB15C, 1.5px 0 #7fd1e8; } 70% { text-shadow: 1px 0 #FFB15C, -1px 0 #7fd1e8; } 100% { text-shadow: none; } } /* találati modulkártya: sík, szögletes, emelkedés nélkül */ :root body[data-focus="solution"] .module-card { border-radius: 2px; box-shadow: none; transform: none; overflow: hidden; } :root body[data-focus="solution"] .module-card:hover { transform: none; box-shadow: none; } :root body[data-focus="solution"] .module-card.highlighted { box-shadow: none; } /* (2026-11-01, Gábor egyetértett) a „Részletek →” a kártya ALJÁRA tűzve — egy sorban a linkek egy vonalban állnak, nincs üres folt a link alatt; a nem illő kártya 0,62-re halványul (0,5-nél a szürke szöveg AA alá esett, pedig a link kattintható marad) */ :root body[data-focus="solution"] .module-card { display: flex; flex-direction: column; } :root body[data-focus="solution"] .module-card-cta { margin-top: auto; align-self: flex-start; } :root body[data-focus="solution"] .module-card.dimmed { opacity: .62; } @media (prefers-reduced-motion: reduce) { :root body[data-focus="solution"] :is(.filter-option, .module-card)::before { transition: none; } :root body[data-focus="solution"] :is(.filter-option.selected, .module-card.highlighted)::after, :root body[data-focus="solution"] .filter-option.selected .filter-option-label, :root body[data-focus="solution"] .module-card.highlighted .module-card-name { animation: none; } }