/* ========================================================================== NETDOKTOR VISUAL 2.0 — SAJAT IMPLEMENTACIO -------------------------------------------------------------------------- Eredet: NEW CLEAN IMPLEMENTATION. A regi demobol EGYETLEN sor kod, osztalynev vagy komponens sem szarmazik. A demo kizarolag VIZUALIS ES SZERKEZETI referencia volt; az itt latott elveket sajat kodban, a jelenlegi NetDoktor tokenrendszerere epitve valositjuk meg. Ez a fajl a meglevo stiluslapok UTAN tolt be, es kizarolag BOVIT: egyetlen meglevo szabalyt sem ir felul romboloan. ========================================================================== */ /* ------------------------------------------------------ 1. VISUAL 2 TOKENEK */ :root { /* melyseg — a projekt sajat arnyektokenjeire epulve */ --v2-shadow-rest: 0 1px 2px rgba(12, 92, 122, .05), 0 4px 14px rgba(12, 92, 122, .06); --v2-shadow-hover: 0 2px 4px rgba(12, 92, 122, .07), 0 12px 28px rgba(12, 92, 122, .12); --v2-lift: 3px; --v2-transition: 180ms cubic-bezier(.2, .6, .3, 1); /* SZAKMASZIN-LETRA — a `--nd-role` a MEGLEVO, jovahagyott szakmaszin. A fokozatokat ebbol SZARMAZTATJUK: nincs uj hue, nincs uj paletta. A fooldalon a `--nd-role` a NetDoktor alapszine. */ --nd-role: #0c5c7a; --nd-role-tint: color-mix(in srgb, var(--nd-role) 7%, transparent); --nd-role-soft: color-mix(in srgb, var(--nd-role) 20%, transparent); --nd-role-line: color-mix(in srgb, var(--nd-role) 60%, transparent); --nd-role-solid: var(--nd-role); } /* ---------------------------------------------- 2. SZEKCIO-HATTER RENDSZER A meglevo `.nd-section-light / -mist / -tint` es `.nd-hex--band` marad az alap. A Visual 2.0 EGY dolgot tesz hozza: a szekciohatarokat lathatova teszi ott, ahol ket azonos hatteru szekcio kovetkezik egymas utan, es bevezet egy nagyon halvany, szakmaszinbol szarmaztatott savot. */ .v2 .nd-section-echo { background: var(--nd-role-tint); } /* Ket szomszedos FEHER szekcio kozott hajszalvekony valaszto - igy a hosszu feher futam is tagolt marad, anelkul hogy uj szint vinnenk be. */ .v2 .nd-section-light + .nd-section-light, .v2 .nd-section-light + .nd-partners, .v2 .nd-partners + .nd-section-light { border-block-start: 1px solid var(--border-subtle); } /* ------------------------------------------------------------- 3. KARTYAK A demo egyik jol mukodo elve: a kartya elvalik a hatterrol, es interakciora FINOMAN megemelkedik. Sajat megvalositas, a projekt tokenjeivel. */ .v2 .gs-card, .v2 .nd-targetcard, .v2 .nd-review { transition: transform var(--v2-transition), box-shadow var(--v2-transition), border-color var(--v2-transition); } .v2 .gs-card:hover, .v2 .nd-targetcard:hover { transform: translateY(calc(var(--v2-lift) * -1)); box-shadow: var(--v2-shadow-hover); border-color: var(--nd-role-soft); } /* A tintelt szekcioban allo feher kartya kapjon finom keretet, hogy a szinezett hatteren is hataroltnak lassek. */ .v2 .nd-section-tint .gs-card, .v2 .nd-section-echo .gs-card { border: 1px solid var(--border-subtle); box-shadow: var(--v2-shadow-rest); } /* --------------------------------------------------------- 4. GOMBRENDSZER PRIMARY (narancs CTA) / SECONDARY (outline) / TEXT LINK hierarchia. A meglevo `.gs-btn` valtozatok maradnak; csak a mikrointerakciot adjuk. */ .v2 .gs-btn { transition: transform var(--v2-transition), box-shadow var(--v2-transition), background-color var(--v2-transition), border-color var(--v2-transition); } .v2 .gs-btn:hover { transform: translateY(-1px); } .v2 .nd-btn-accent:hover { box-shadow: 0 8px 20px rgba(232, 122, 42, .28); } /* TEXT LINK: a nyil finoman elmozdul - a kartyakon mar letezo idioma kiterjesztese a szoveges linkekre is. */ .v2 .gs-card__more .gs-card__arrow, .v2 .nd-targetcard__arrow { transition: transform var(--v2-transition); } /* ------------------------------------------------- 5. NARANCS AKCENTUS Ritka es celzott: a szemoldok-szoveg (eyebrow) elott egy rovid vonal. Nem szinezi at a szoveget, csak jelol. */ .v2 .gs-section__head:not(.gs-section__head--centered) .gs-section__eyebrow::before { content: ""; display: inline-block; inline-size: 1.5rem; block-size: 2px; margin-inline-end: .6rem; vertical-align: middle; background: var(--nd-accent, #e87a2a); border-radius: 2px; } /* --------------------------------------------------- 6. IKONCSEMPE MELYSEG A meglevo ikonkapszula kap egy hajszalvekony keretet, hogy a tintelt hatteren is elvaljon. Meret es szin valtozatlan. */ .v2 .gs-card__icon, .v2 .nd-targetcard__ico { border: 1px solid var(--nd-role-soft); } /* ------------------------------------------------------ 7. MOZGAS-TISZTELET */ @media (prefers-reduced-motion: reduce) { .v2 .gs-card, .v2 .nd-targetcard, .v2 .nd-review, .v2 .gs-btn, .v2 .gs-card__arrow, .v2 .nd-targetcard__arrow { transition: none; } .v2 .gs-card:hover, .v2 .nd-targetcard:hover, .v2 .gs-btn:hover { transform: none; } } /* ------------------------------------------------------- 8. STAGING JELZES Egyertelmuen lathato legyen, hogy ez NEM az eles oldal. */ .v2-jelzes { position: fixed; inset-block-end: 0; inset-inline: 0; z-index: 9999; padding: .35rem .75rem; font: 600 12px/1.4 system-ui, sans-serif; text-align: center; color: #fff; background: #b9375e; letter-spacing: .02em; } /* ------------------------------------- 9. A ZARO FEHER FUTAM MEGTORESE Merve: a fooldal vegen harom feher szekcio kovetkezett egymas utan (Kinek ajanljuk / Partnerek / GYIK). A kozepso kap halvany alaphatteret, igy a hosszu feher futam tagolt lesz - uj szin bevezetese nelkul. A `.nd-partners` sajat hattere kesobb all a stiluslapban, ezert kell a `.v2` hatokorrel felulirni. */ .v2 .nd-partners { background: var(--surface-alt); } /* ========================================================================== VISUAL 2.0 — SZAKMASZIN TOVABBVEZETESE A BODYBA -------------------------------------------------------------------------- Eredet: NEW CLEAN IMPLEMENTATION. A regi demobol egyetlen sor kod sem szarmazik; ott csak azt MERTUK meg, hogy a szakmaszin opacitas-letran (7% / 20% / 60% / 100%) jelenik meg a bodyban - ezt az ELVET epitjuk ujra. A szin maga a MEGLEVO, jovahagyott szakmaszin: uj hue nem keletkezik. Minden fokozat `color-mix`-szel SZARMAZIK belole. ========================================================================== */ /* --- a jovahagyott szakmaszinek tokenkent (a production hero-gradiensbol) -- */ .v2-role--fogorvos { --nd-role: #357d68; --nd-role-2: #3e7c65; } .v2-role--haziorvos, .v2-role--borgyogyasz, .v2-role--szemesz, .v2-role--maganklinika { --nd-role: #0c5c7a; --nd-role-2: #3594b7; } .v2-role--uzemorvos { --nd-role: #2c3e50; --nd-role-2: #607d8b; } .v2-role--maganorvos { --nd-role: #1873c5; --nd-role-2: #137a8f; } .v2-role--nogyogyasz { --nd-role: #4e3e82; --nd-role-2: #8c879d; } .v2-role--plasztikai { --nd-role: #b9375e; --nd-role-2: #ea0048; } .v2-role--esztetika { --nd-role: #8c5e58; --nd-role-2: #c25846; } /* --- a letra: minden fokozat a MEGLEVO szinbol szarmazik ------------------ */ .v2-role { --nd-role-tint: color-mix(in srgb, var(--nd-role) 7%, transparent); --nd-role-soft: color-mix(in srgb, var(--nd-role) 20%, transparent); --nd-role-line: color-mix(in srgb, var(--nd-role) 60%, transparent); --nd-role-solid: var(--nd-role); } /* --- 7%: nagyobb felulet, szekciohatter ---------------------------------- */ .v2-role .v2-role-tint { background: var(--nd-role-tint); } /* --- 100%: sav. A MEGLEVO `.nd-hex--band` komponenst hasznaljuk ujra: csak a gradiens-tokenjet irjuk felul, igy a feher szoveg, a hexagon-minta es minden mas szabalya valtozatlanul ervenyes - nincs duplikalt komponens. */ .v2-role .v2-band--role { --nd-gradient-band: linear-gradient(135deg, var(--nd-role) 0%, var(--nd-role-2) 100%); } /* --- 20%: ikoncsempe, kartyakeret hoverkor ------------------------------- */ .v2-role .gs-card__icon, .v2-role .nd-targetcard__ico { border-color: var(--nd-role-soft); } .v2-role .gs-card:hover, .v2-role .nd-targetcard:hover { border-color: var(--nd-role-soft); } /* A tintelt szekcioban allo feher kartya finom szakmaszin-keretet kap. */ .v2-role .v2-role-tint .gs-card, .v2-role .v2-role-tint .nd-targetcard { border: 1px solid var(--nd-role-soft); background: var(--surface); } /* --- 60%: vekony vonalak, kis akcentusok --------------------------------- */ /* A szemoldok-szoveg elotti rovid vonal a VILAGOS szekcioban a szakmaszint veszi fel (a fooldalon ez narancs; ott nincs szakmaszin). */ .v2-role .nd-section-light .gs-section__eyebrow::before, .v2-role .nd-section-mist .gs-section__eyebrow::before, .v2-role .v2-role-tint .gs-section__eyebrow::before { background: var(--nd-role-line); } /* A szemoldok szovege maga is a szakmaszint kapja - de csak vilagos hatteren; a savokon a meglevo feher szabaly marad ervenyben. */ .v2-role .nd-section-light .gs-section__eyebrow, .v2-role .nd-section-mist .gs-section__eyebrow, .v2-role .v2-role-tint .gs-section__eyebrow { color: var(--nd-role-solid); } /* --- NARANCS: ritka es celzott. A lapon egyedul az elsodleges CTA-gomb marad narancs (a meglevo `.nd-btn-accent`), es a hozza tartozo hover-arnyek. Uj narancs feluletet nem vezetunk be. */ /* --- JAVITAS: a szemoldok-vonal szine kovetkezetesen -------------------- Merve: az alap (narancs) szabaly specificitasa magasabb volt, mint a szakmaszines valtozate, ezert a vonal hol narancs, hol zold lett ugyanazon a lapon. Szabaly: VILAGOS hatteren a szakmaszin, SOTET savon a narancs (ott az a ritka akcentus). */ .v2-role .nd-section-light .gs-section__head .gs-section__eyebrow::before, .v2-role .nd-section-mist .gs-section__head .gs-section__eyebrow::before, .v2-role .v2-role-tint .gs-section__head .gs-section__eyebrow::before { background: var(--nd-role-line); inline-size: 1.5rem; block-size: 2px; display: inline-block; margin-inline-end: .6rem; vertical-align: middle; border-radius: 2px; content: ""; } /* ========================================================================== 10. BODY-KOMPOZICIO — A REGI DEMO GEOMETRIAJA, SAJAT KODDAL -------------------------------------------------------------------------- CLEAN-ROOM: a regi demobol EGYETLEN sor kod, egyetlen classnev es egyetlen DOM-megoldas sem szarmazik. Csak a RENDERELESET mertuk meg 1440 px-en (getBoundingClientRect + getComputedStyle), es az ott talalt ARANYOKAT irtuk ujra a jelenlegi clean komponensekre. MERT DEMO-GEOMETRIA (1425 px-es viewport): tartalom-szelesseg .......... 1300 px (mar egyezett) kozponti olvasooszlop ....... 1000 px <- ezt allitjuk vissza alcim-sav ................... 820 px szekcio fuggoleges padding .. 80 px cim -> tartalom ............. 40 px blokk -> blokk .............. 80 px elonykartyak ................ 4 oszlop (299 px) galeria ..................... a kozponti oszlopot tolti ki szekciofejek ................ KOZEPRE zartak Ez a blokk KIZAROLAG geometriat allit. A szinek, a szakmaszin-tintek, a role-sav, a hoverek, az arnyekok, a gombstilus es a narancs akcentus valtozatlanok. HATOKOR: minden szabaly `.v2-role`-lal kezdodik, igy kizarolag a szakmai mintaoldalra hat - a staging fooldal renderje valtozatlan. ========================================================================== */ .v2-role { --v2-olvaso: 62.5rem; /* 1000 px - a demo kozponti olvasooszlopa */ --v2-lead: 51.25rem; /* 820 px - a demo alcim-savja */ --v2-ritmus: 5rem; /* 80 px - a demo szekcio-ritmusa */ --v2-fejkoz: 2.5rem; /* 40 px - cim -> tartalom */ } /* --- 10.1 SZEKCIORITMUS ------------------------------------------------- A jelenlegi `--section-space-y` clamp 1425 px-en 73,8 px-et ad; a demo fix 80 px-cel dolgozik. Csak asztali szelessegen allitjuk at, hogy a mobil suruseg ne romoljon. A CTA-savot nem erintjuk. */ @media (min-width: 64rem) { .v2-role main > .gs-section { padding-block: var(--v2-ritmus); } } /* --- 10.2 SZEKCIOFEJEK: KOZEPRE ZARVA ----------------------------------- A demoban minden blokkcim es alcim kozepre zart, es az alcim egy szuk, 820 px-es savban all. Ez adja a "kozepre szervezett tortenet" olvasatot a jelenlegi balra zart, dashboard-szeru elrendezes helyett. */ .v2-role main > .gs-section > .gs-container > .gs-section__head { text-align: center; margin-inline: auto; margin-block-end: var(--v2-fejkoz); } .v2-role main > .gs-section > .gs-container > .gs-section__head .gs-section__lead { max-inline-size: var(--v2-lead); margin-inline: auto; } /* --- 10.3 BEMUTATAS: FOLYOSZOVEG + ALATTA A KIEMELT DOBOZ --------------- A demoban a bevezeto sima folyoszoveg egy 1000 px-es oszlopban, es a "Kinek ajanljuk" tartalom KULON, alatta allo kiemelt doboz. A stagingen ez ket egyenrangu, egymas MELLETT allo kartya volt - ettol lett a felso body-resz "szethuzott" es dashboard-szeru. */ .v2-role .v2-role-tint > .gs-container > .gs-grid { display: block; } .v2-role .v2-role-tint > .gs-container > .gs-grid > .gs-card { max-inline-size: var(--v2-olvaso); margin-inline: auto; } /* Az elso blokk a demoban nem kartya, hanem folyoszoveg. */ .v2-role .v2-role-tint > .gs-container > .gs-grid > .gs-card:not(:has(.nd-targetlist)) { background: transparent; border: 0; box-shadow: none; } .v2-role .v2-role-tint > .gs-container > .gs-grid > .gs-card:not(:has(.nd-targetlist)):hover { transform: none; box-shadow: none; } .v2-role .v2-role-tint > .gs-container > .gs-grid > .gs-card:not(:has(.nd-targetlist)) > .gs-card__body { padding-inline: 0; padding-block-start: 0; } /* A masodik blokk a demohoz hasonloan bosegesebb belso terrel, es a felette allo szoveghez tartozva: 80 px - ugyanaz a ritmusegyseg, mint a demoban. */ .v2-role .v2-role-tint > .gs-container > .gs-grid > .gs-card:has(.nd-targetlist) { margin-block-start: var(--v2-ritmus); } @media (min-width: 48rem) { .v2-role .v2-role-tint > .gs-container > .gs-grid > .gs-card:has(.nd-targetlist) > .gs-card__body { padding: var(--space-xl); } } /* --- 10.4 GALERIA: A KOZPONTI OSZLOPOT TOLTSE KI ------------------------ A demoban a kepsor a tartalomszelesseget kitolto, egyenlo oszlopokra osztott sor (~300 px-es bélyegkepek). A stagingen egy kozepre huzott, 734 px-es csik volt. Csak a LAYOUT valtozik: a kepek, a sorrendjuk, az ALT-juk, a captionjuk es a lightbox-logika valtozatlan. */ @media (min-width: 48rem) { .v2-role .v2-band--role .nd-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); max-inline-size: var(--v2-olvaso); margin-inline: auto; } .v2-role .v2-band--role .nd-gallery > .nd-gallery__item { flex: initial; inline-size: auto; max-inline-size: none; } .v2-role .v2-band--role .nd-gallery > .nd-gallery__item > .nd-gallery__btn { inline-size: 100%; } .v2-role .v2-band--role .nd-gallery img { inline-size: 100%; block-size: auto; } } /* --- 10.5 A PROGRAM FELEPITESE: 1000 PX-ES OSZLOP ---------------------- A demoban a blokk szovege es az accordion is 1000 px szeles, kozepre zart cimmel. A stagingen 768 px volt, balra zart fejjel - ettol hatott szuk, mégis "kulonallo" blokknak. */ @media (min-width: 64rem) { .v2-role main > .gs-section > .gs-container--md { max-inline-size: calc(var(--v2-olvaso) + 2 * var(--container-gutter)); } } /* --- 10.6 TERMEKELONYOK: 4 OSZLOP -------------------------------------- A demoban a 8 elonykartya 2 x 4-es racsban all (299 px). A stagingen az auto-fit racs 5 + 3-as, szakadt sort adott. */ @media (min-width: 64rem) { .v2-role main > .gs-section .gs-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* --- 10.7 TOVABBI PROGRAMOK: SZELESEBB, VIZSZINTES KARTYAK ------------- A demoban ez egy teljes szelessegu, egyoszlopos lista, kartyankent nagy (a kartya ~31%-at kitolto) kepoldallal. Egy az egyben atvéve a lap ~1350 px-rel hosszabb lenne, ezert a demo KOMPOZICIOS LOGIKAJAT tartjuk meg: kevesebb, szelesebb, vizszintes arany kartya - nem harmas racs. A keposzlop aranya is a demoet koveti (~22%). */ @media (min-width: 64rem) { .v2-role .nd-targetgrid:has(.nd-targetcard--kep) { grid-template-columns: repeat(2, minmax(0, 1fr)); } .v2-role .nd-targetgrid .nd-targetcard--kep > .nd-targetcard__media { flex-basis: 8.5rem; } } /* --- 10.8 A BEVEZETO SZOVEG MERTEKE ------------------------------------ A blokk mar nem kartya, ezert a kartya-tipografia (14 px, 513 px-re zart sorhossz) nem illik ra: 1000 px-es oszlopban felig ures maradt. A demoban ez folyoszoveg, amely kitolti a teljes olvasooszlopot. A meglevo `--font-size-md` tokent hasznaljuk - uj tipografiai skala nem keletkezik. */ .v2-role .v2-role-tint > .gs-container > .gs-grid > .gs-card:not(:has(.nd-targetlist)) > .gs-card__body { padding-block: 0; } .v2-role .v2-role-tint > .gs-container > .gs-grid > .gs-card:not(:has(.nd-targetlist)) .gs-card__text { max-inline-size: none; font-size: var(--font-size-md); line-height: 1.7; } /* --- 10.9 A KIEMELT DOBOZ KETOSZTATU BELSEJE --------------------------- A demoban ez a doboz ket egyenlo oszlopra oszlik (600 + 600 px), es a felsorolas a JOBB oldali, ~600 px-es savban all. Nalunk a bal oszlopban nincs kep (a production tartalomban ilyen kep nem szerepel, es nem is talalunk ki ujat), ezert a cim kerul balra, a felsorolas jobbra - igy all vissza a demo ~600 px-es sorhossza a jelenlegi 885 px helyett, valtozatlan szoveggel. */ @media (min-width: 64rem) { .v2-role .v2-role-tint > .gs-container > .gs-grid > .gs-card:has(.nd-targetlist) > .gs-card__body { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); column-gap: var(--space-xl); align-items: start; } } /* ========================================================================== 10.10 A „KINEK AJANLJUK" DOBOZ — DEMO-KOMPOZICIO + VEGLEGES KEPHELY -------------------------------------------------------------------------- MERT DEMO-GEOMETRIA (1425 px): doboz ................ 1300 px, belso padding 80 / 50 belso savszelesseg ... 1200 px, KET oszlop: 600 + 600 bal kepterulet ....... 540 x 422 px, object-fit: CONTAIN jobb szovegoszlop .... 600 px cim

............. 24,88 px / 800 / lh 1,20 / ls -0,025em cim -> lista ......... 40 px A bal oldali KEPHELY a layout VEGLEGES resze. Most ideiglenesen egy teljesen transzparens, dekorativ placeholder tolti ki; a vegleges kepet kesobb a felhasznalo valasztja ki. A csere KIZAROLAG az `src` erteket erinti - a keret merete, aranya (5:4) es az object-fit viselkedese mar most vegleges, tovabbi CSS-modositas nem lesz szukseges. ========================================================================== */ /* A doboz visszakapja a demo teljes tartalomszelesseget (a szoveges bevezeto marad a 1000 px-es olvasooszlopban - pontosan mint a demoban). */ .v2-role .v2-role-tint > .gs-container > .gs-grid > .gs-card:has(.nd-targetlist) { max-inline-size: none; } .v2-role .v2-role-tint > .gs-container > .gs-grid > .gs-card:has(.nd-targetlist) > .gs-card__body { padding: var(--space-2xl) var(--space-xl); } /* KET OSZLOP: bal = kepterulet, jobb = kiemelt cim + lista. A cim es a lista kulon racscella, ezert nincs szukseg extra burkolo elemre a markupban. */ @media (min-width: 64rem) { .v2-role .v2-role-tint > .gs-container > .gs-grid > .gs-card:has(.nd-targetlist) > .gs-card__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: var(--space-2xl); align-items: start; } .v2-role .v2-kephely { grid-column: 1; grid-row: 1 / span 2; align-self: center; } .v2-role .v2-role-tint .gs-card:has(.nd-targetlist) .gs-card__title { grid-column: 2; grid-row: 1; } .v2-role .v2-role-tint .gs-card:has(.nd-targetlist) .nd-targetlist { grid-column: 2; grid-row: 2; } } /* --- A KEPHELY: VEGLEGES KERET ------------------------------------------ `aspect-ratio` + `object-fit: contain` = barmilyen kesobbi kep befer vagas nelkul, es a keret magassaga nem valtozik. A demo is `contain`-t hasznal. */ .v2-kephely { display: block; inline-size: 100%; aspect-ratio: 5 / 4; margin-block-end: var(--space-xl); border-radius: var(--radius-lg); overflow: clip; } @media (min-width: 64rem) { .v2-kephely { margin-block-end: 0; } } .v2-kephely__img { display: block; inline-size: 100%; block-size: 100%; object-fit: contain; object-position: center; } /* --- A CIM VIZUALIS HIERARCHIAJA --------------------------------------- A demo

-e 24,88 px / 800 / lh 1,20. A kartyacim-alapertelmezes (18 px / 600) beleolvadt a felsorolasba. A szakmaszin itt jelenik meg finoman - uj szin nem keletkezik, a meglevo `--nd-role` tokent hasznaljuk. Kontraszt feher kartyan: 4,9:1 (nagy, felkover szoveg -> AA teljesul). */ .v2-role .v2-role-tint > .gs-container > .gs-grid > .gs-card:has(.nd-targetlist) .gs-card__title { font-size: clamp(1.375rem, 1.05rem + 1.1vw, 1.5625rem); font-weight: 800; line-height: 1.22; letter-spacing: -0.025em; color: var(--nd-role-solid); margin-block-end: 2.5rem; } /* Finomhangolas: a cim es a lista kozotti tavolsag PONTOSAN 40 px legyen (a demoban is ennyi). A racs sajat row-gap-je es a lista sajat felso margoja osszeadodott, ezert mindkettot nullazzuk. */ .v2-role .v2-role-tint > .gs-container > .gs-grid > .gs-card:has(.nd-targetlist) > .gs-card__body { row-gap: 0; } .v2-role .v2-role-tint > .gs-container > .gs-grid > .gs-card:has(.nd-targetlist) .nd-targetlist { margin-block-start: 0; } /* A cim es a lista kozos burkoloba kerult (`.v2-szovegoszlop`), igy a ket oszlop fuggolegesen egymashoz kozepezheto: a kepterulet magassaga tobbe nem tolja lejjebb a szoveget. A demoban a ket oszlop egyforma magas volt, ezert ott ez a kerdes fel sem merult - nalunk a kesobbi valodi kep magassagatol fuggetlenul kiegyensulyozott marad a blokk. */ @media (min-width: 64rem) { .v2-role .v2-role-tint > .gs-container > .gs-grid > .gs-card:has(.nd-targetlist) > .gs-card__body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto; align-items: center; } .v2-role .v2-kephely { grid-column: 1; grid-row: 1; align-self: center; } .v2-role .v2-szovegoszlop { grid-column: 2; grid-row: 1; } } /* A doboz belso terenek lepcsozese. A demo asztali 80/50-es padingje mobilon tul sokat venne el: 390 px-en a tartalom 262 px-re szukult. Asztalin marad a demo-kozeli 64/48. */ .v2-role .v2-role-tint > .gs-container > .gs-grid > .gs-card:has(.nd-targetlist) > .gs-card__body { padding: var(--space-lg) var(--space-md); } @media (min-width: 48rem) { .v2-role .v2-role-tint > .gs-container > .gs-grid > .gs-card:has(.nd-targetlist) > .gs-card__body { padding: var(--space-xl) var(--space-lg); } } @media (min-width: 64rem) { .v2-role .v2-role-tint > .gs-container > .gs-grid > .gs-card:has(.nd-targetlist) > .gs-card__body { padding: var(--space-2xl) var(--space-xl); } } /* --- 10.11 A BEVEZETO CIM A DEMO HIERARCHIA-SZINTJERE ------------------ MERT DEMO-REFERENCIA (1425 px), „A NetDoktor, mint egeszsegugyi platform":

24,88 px / 800 / line-height 29,86 px (1,20) / ls -0,025em szin: a demo sajat zoldje A SZINT vesszuk at, a SZINT NEM: a demo hue-ja helyett a MAR JOVAHAGYOTT fogorvosi role color all be (`--nd-role`), ugyanaz, mint a „Kinek ajanljuk" doboz cimen - igy a lapon egyetlen, kovetkezetes bevezeto- cimszint van, es uj szin nem keletkezik. Kizarolag tipografia: a blokk szelessege (1000 px), x-pozicioja (213) es a margoi valtozatlanok. */ .v2-role .v2-role-tint > .gs-container > .gs-grid > .gs-card:not(:has(.nd-targetlist)) .gs-card__title { font-size: clamp(1.375rem, 1.05rem + 1.1vw, 1.5625rem); font-weight: 800; line-height: 1.22; letter-spacing: -0.025em; color: var(--nd-role-solid); } /* ========================================================================== 10.12 A TOBBI SZAKMAI OLDAL SAJAT DEMO-KOMPOZICIOJA -------------------------------------------------------------------------- Ugyanaz a Visual 2.0 rendszer, csak azok az elteresek, amelyeket az adott lap SAJAT regi demoja mutat. Uj szin, uj komponens es uj hover-rendszer nem keletkezik. ========================================================================== */ /* --- 10.12.1 GALERIA: 4 OSZLOP, HA 4-NEL TOBB KEP VAN ------------------ A demoban a bélyegkepek ~300 px szelesek es a tartalomszelesseget toltik ki. 3 kepnel a 3 x 1000 px-es valtozat adja ezt (fogorvos), 4-tol viszont a teljes 1236 px-es savon 4 oszlop ad ~291 px-es bélyegeket - ugyanazt a surusegett, es nem lesz belole 6 soros oszlop. */ @media (min-width: 48rem) { .v2-role .v2-band--role .nd-gallery:has(> .nd-gallery__item:nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); max-inline-size: none; } } /* --- 10.12.2 HAZIORVOS: „SZOFTVERVALTAS" KIEMELT DOBOZ ---------------- A haziorvos demojaban ez a blokk ugyanolyan kiemelt, ketoszlopos doboz, mint mashol a „Kinek ajanljuk": BAL oldalt a kep, JOBB oldalt a szoveg. A LIVE lapon mar van hozza JOVAHAGYOTT kep (`minden-platformon-2.webp`), ezert ide NEM kerul placeholder - a meglevo kepet hasznaljuk. A `gs-split` mar ketoszlopos; csak dobozza tesszuk es megforditjuk. */ .v2-role--haziorvos .v2-split-doboz .gs-split { background: var(--surface); border: 1px solid var(--nd-role-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-lg) var(--space-md); } @media (min-width: 48rem) { .v2-role--haziorvos .v2-split-doboz .gs-split { padding: var(--space-xl) var(--space-lg); } } @media (min-width: 64rem) { .v2-role--haziorvos .v2-split-doboz .gs-split { padding: var(--space-2xl) var(--space-xl); align-items: center; } /* a demo szerint a kep a BAL oldalon all */ .v2-role--haziorvos .v2-split-doboz .gs-split__media { order: -1; } } /* --- 10.12.3 ESZTETIKA: „DOKUMENTACIO" KESKENY BLOKK ------------------- A demoban ez egy 1000 px szeles, vilagosan tintelt blokk, a Termekelonyok ELOTT. A szelesseget a mar meglevo `.gs-container--md` szabalyunk adja (1000 px tartalom), a tintet a `v2-role-tint`; itt csak a doboz belso levegojet igazitjuk. */ .v2-role--esztetika .v2-keskeny .gs-section__head { margin-block-end: var(--v2-fejkoz); } /* Ahol a bevezetoben TOBB folyoszoveg-blokk all egymas alatt (haziorvos 3, maganklinika 4, esztetika/plasztikai 2), ott a blokkok kozott legyen levego - a demoban is kulon bekezdes-csoportkent olvasodnak. A fogorvosi lapon csak EGY ilyen blokk van, igy ez a szabaly ott nem hat. */ .v2-role .v2-role-tint > .gs-container > .gs-grid > .gs-card:not(:has(.nd-targetlist)) + .gs-card:not(:has(.nd-targetlist)) { margin-block-start: var(--space-lg); } /* ========================================================================== 10.13 FOOLDAL — VISUAL 2.0 -------------------------------------------------------------------------- A fooldalnak nincs szakmaszine: a szerepe a MARKA maga. Ezert a fooldal „role"-ja a MEGLEVO, jovahagyott NetDoktor brandkek (a hero/CTA sav gradiensebol) - uj szin itt sem keletkezik. Igy a fooldalra ugyanaz a Visual 2.0 rendszer ervenyes, mint a 10 szakmai lapra: kozos ritmus, kozepre zart szekciofejek, kozponti olvasooszlop, kartya- es gombviselkedes, ikoncsempe-keret. ========================================================================== */ .v2-role--brand { --nd-role: #0c5c7a; --nd-role-2: #1a7d9c; } /* --- ELONYKARTYAK: 3 oszlop --------------------------------------------- A fooldal 6 elonykartyaja `gs-grid--3`, de az auto-fit 4 + 2-es, szakadt sort adott. 3 x 2 a demo-szeru, kiegyensulyozott racs. */ @media (min-width: 64rem) { .v2-role main > .gs-section .gs-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* --- ALKALMAZAS-SAV ----------------------------------------------------- A hero alatti kompakt alkalmazas-sav a demoban is a teljes szekcio- ritmust kapja, de itt megtartjuk kisse szellosebbnek a herohoz kepest. */ @media (min-width: 64rem) { .v2-role--brand main > .gs-section.nd-appcards { padding-block: var(--space-2xl); } } /* ========================================================================== 10.14 SZAKORVOSI PROGRAMOK — GYUJTOLAP -------------------------------------------------------------------------- Sajat, uj komponens (`v2-progkartya`): a regi demo gyujtolapjanak KOMPOZICIOS elve (felul vizualis resz, alatta szakmaszinu cimsav, leiras es CTA), de teljesen sajat koddal, a MAR JOVAHAGYOTT LIVE kartyakepekkel es a MAR JOVAHAGYOTT szakmaszinekkel. A regi demobol sem kod, sem class, sem asset nem szarmazik. ========================================================================== */ .v2-proggrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); } @media (min-width: 48rem) { .v2-proggrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 64rem) { .v2-proggrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .v2-progkartya { display: flex; flex-direction: column; overflow: clip; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--v2-shadow-rest, 0 6px 18px rgba(12, 92, 122, .08)); transition: transform var(--v2-transition, 180ms) ease, box-shadow var(--v2-transition, 180ms) ease; } .v2-progkartya:hover, .v2-progkartya:focus-within { transform: translateY(calc(-1 * var(--v2-lift, 3px))); box-shadow: var(--v2-shadow-hover, 0 14px 38px rgba(12, 92, 122, .16)); } /* --- felso vizualis resz: a szakmaszin 7%-os tintje, a kep vagas nelkul -- */ .v2-progkartya__media { display: block; inline-size: 100%; aspect-ratio: 4 / 3; background: var(--nd-role-tint); overflow: clip; } .v2-progkartya__img { display: block; inline-size: 100%; block-size: 100%; object-fit: contain; object-position: center bottom; } /* --- cimsav + leiras + CTA: teli szakmaszin, feher szoveggel ------------- */ .v2-progkartya__body { display: flex; flex-direction: column; gap: var(--space-sm, .75rem); flex: 1 1 auto; padding: var(--space-lg) var(--space-md) var(--space-md); background: var(--nd-role-solid); color: #fff; text-align: center; } .v2-progkartya__title { margin: 0; font-size: var(--font-size-lg); font-weight: 800; line-height: 1.25; letter-spacing: -0.015em; text-transform: uppercase; } .v2-progkartya__link { color: inherit; text-decoration: none; } .v2-progkartya__link::after { content: ""; position: absolute; inset: 0; } .v2-progkartya__link:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } .v2-progkartya { position: relative; } .v2-progkartya__text { margin: 0; flex: 1 1 auto; font-size: var(--font-size-sm); line-height: 1.6; color: rgba(255, 255, 255, .92); } .v2-progkartya__more { margin: 0; align-self: center; padding: .5rem 1.1rem; border-radius: 999px; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .34); font-size: var(--font-size-sm); font-weight: 600; transition: background var(--v2-transition, 180ms) ease; } .v2-progkartya:hover .v2-progkartya__more { background: rgba(255, 255, 255, .26); } .v2-progkartya__arrow { display: inline-block; margin-inline-start: .35rem; transition: transform var(--v2-transition, 180ms) ease; } .v2-progkartya:hover .v2-progkartya__arrow { transform: translateX(3px); } @media (prefers-reduced-motion: reduce) { .v2-progkartya, .v2-progkartya__arrow, .v2-progkartya__more { transition: none; } .v2-progkartya:hover, .v2-progkartya:focus-within { transform: none; } } /* ========================================================================== 10.15 KESKENY SZEKCIO (ISO-blokk, dokumentacio) A demoban ezek a blokkok a kozponti 1000 px-es oszlopban allnak. ========================================================================== */ @media (min-width: 64rem) { .v2-role .v2-keskeny > .gs-container { max-inline-size: calc(var(--v2-olvaso) + 2 * var(--container-gutter)); } } /* ========================================================================== 10.16 NAVIGACIO — a „Kinek ajanljuk" fomenupont kattinthato -------------------------------------------------------------------------- A felirat ONALLO LINK lett, a nyil pedig kulon, kicsi nyitogomb. A dropdown JS-e valtozatlan: tovabbra is a `[data-gs-dropdown-trigger]` elemre kot, a hover-regio pedig a kozos `li`, igy az egesz menupontra ravive tovabbra is kinyilik a panel. ========================================================================== */ .nd-nav__caretbtn { display: inline-flex; align-items: center; padding-inline: .35rem; background: none; border: 0; cursor: pointer; color: inherit; } .gs-nav__item:has(> .nd-nav__caretbtn) { display: inline-flex; align-items: center; } .gs-nav__item:has(> .nd-nav__caretbtn) > .gs-nav__link { padding-inline-end: .15rem; } /* A gyujtolap kartyai sajat szakmaszint kapnak, ezert a szin-letrat MAGARA A KARTYARA is fel kell venni - igy nem a body role-jat oroklik, hanem a sajat `--nd-role` ertekukbol szarmaztatjak a tintet es a tomor szint. Uj szin itt sem keletkezik: minden fokozat a MAR JOVAHAGYOTT szakmaszinbol jon `color-mix`-szel. */ .v2-progkartya { --nd-role-tint: color-mix(in srgb, var(--nd-role) 7%, transparent); --nd-role-soft: color-mix(in srgb, var(--nd-role) 20%, transparent); --nd-role-line: color-mix(in srgb, var(--nd-role) 60%, transparent); --nd-role-solid: var(--nd-role); } /* JAVITAS: a kepterulet magassagat a `` sajat aranya hatarozta meg (a 100%-os magassag hatarozatlan magassaghoz kepest auto-ra esett vissza), ezert a kartyak kepteruletei kulonbozo magasak lettek. A kep mostantol abszolut pozicionalva tolti ki a fix aranyu keretet. */ .v2-progkartya__media { position: relative; flex: 0 0 auto; } .v2-progkartya__img { position: absolute; inset: 0; object-fit: cover; object-position: center top; } /* ========================================================================== 10.17 FUNKCIOK — KARTYARACS SURUSEGE -------------------------------------------------------------------------- MERT DEMO-GEOMETRIA (1425 px, funkciok.html): „Mindennapi funkciok" ... 5 oszlop, kartyaszelesseg 235 px „Extra funkciok" ........ 4 oszlop, kartyaszelesseg 300 px A LIVE-on mindket racs `nd-targetgrid--quad`; a szekcio hattere kulonbozteti meg oket, ezert azon keresztul allitjuk a suruseget. Igy all vissza a demo tomor kartyarendszere a szethuzott 2 oszlop helyett. ========================================================================== */ @media (min-width: 64rem) { .v2-role--brand .nd-section-light .nd-targetgrid--quad { grid-template-columns: repeat(5, minmax(0, 1fr)); } .v2-role--brand .nd-section-mist .nd-targetgrid--quad { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 48rem) and (max-width: 63.999rem) { .v2-role--brand .nd-targetgrid--quad { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ========================================================================== 10.18 GYUJTOLAP — A KEPI ZONA VISSZAFOGASA -------------------------------------------------------------------------- A kartya nem orvosbemutatkozo, hanem PROGRAMVALASZTO: a fo azonosito a szakmaszin es a cim, a portre csak vizualis kiegeszito. Ezert a felso kepi terulet fix, alacsonyabb savva valik, a portre `contain`-nel all a szinsavon, boseges negativ terrel. A KEPFAJLOK VALTOZATLANOK - ez tisztan layout-finomitas, es nincs agresszive vagott arc. ========================================================================== */ .v2-progkartya__media { aspect-ratio: auto; block-size: 9.5rem; } @media (min-width: 48rem) { .v2-progkartya__media { block-size: 10rem; } } .v2-progkartya__img { object-fit: contain; object-position: center bottom; padding-block-start: .5rem; } /* Finomhangolas: a kepi zona ~36%-ra all be (160 -> 136 px), es minden sor egyforma magas lesz, igy mind a 10 kartya azonos magassagu es a „Bovebben" gombok egy vonalban allnak. */ .v2-proggrid { grid-auto-rows: 1fr; } @media (min-width: 48rem) { .v2-progkartya__media { block-size: 8.5rem; } } /* A lakossagi lap velemeny-blokkjaban 2 kartya all egy auto-fit racsban, ami 4 savot nyitott: a ket kartya balra tolodott. Ha a racsban legfeljebb 2 elem van, tolt ki ket egyenlo oszlopot. A 8 kartyas `--2` racsot („Mire hasznalhatja") ez nem erinti. */ @media (min-width: 64rem) { .v2-role main > .gs-section .gs-grid--2:not(:has(> :nth-child(3))) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ========================================================================== 10.19 LAKOSSAGI OLDAL — A REGI DEMO KOMPOZICIOJANAK VISSZAALLITASA -------------------------------------------------------------------------- MERT DEMO-GEOMETRIA (1425 px, lakossagi-szolgaltatasok.html): tartalomszelesseg .......... 1320 px ketoszlopos kepes blokk .... 1232 px belso, 591 + 591 px oszlop kep pozicio ................ BAL oldal trustbar ................... 5 db 58x58 px kerek portre + egy mondat 4 elonykartya .............. KARTYA (feher, radius 20, arnyek) 4 x 312 px Termekelonyok .............. NEM kartya, sima szovegoszlopok GYIK ....................... vilagos hatteru sav, 1232 px lista Sajat kod: a regi demobol egyetlen sor sem szarmazik, csak a MERT aranyokat epitjuk ujra a jelenlegi clean komponensekre. ========================================================================== */ /* --- 10.19.1 TRUSTBAR-AVATAROK ---------------------------------------- */ .v2-avatarok { display: inline-flex; align-items: center; margin-inline-end: .65rem; vertical-align: middle; } .v2-avatar { inline-size: 2rem; block-size: 2rem; border-radius: 50%; object-fit: cover; border: 2px solid var(--surface); box-shadow: 0 1px 4px rgba(12, 92, 122, .18); } .v2-avatar + .v2-avatar { margin-inline-start: -.7rem; } /* --- 10.19.2 KETOSZLOPOS KEPES BLOKKOK -------------------------------- */ .v2-lakkep { display: block; inline-size: 100%; border-radius: var(--radius-lg); overflow: clip; } .v2-lakkep__img { display: block; inline-size: 100%; block-size: auto; } /* „Miben segithet": BAL kep, JOBB szoveg, alatta teljes szelessegben a checklist-panel — a demo szerinti kep-BAL kompozicio. */ @media (min-width: 64rem) { .v2-role--brand .nd-split.v2-kepes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; } .v2-role--brand .nd-split.v2-kepes > .v2-lakkep { grid-column: 1; grid-row: 1; } .v2-role--brand .nd-split.v2-kepes > .nd-split__text { grid-column: 2; grid-row: 1; } .v2-role--brand .nd-split.v2-kepes > .nd-split__panel { grid-column: 1 / -1; grid-row: 2; margin-block-start: var(--space-xl); } } /* „Mire hasznalhatja": BAL kep, JOBB a kartyaracs. */ .v2-lakblokk { display: grid; gap: var(--space-lg); } @media (min-width: 64rem) { .v2-lakblokk { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: var(--space-2xl); align-items: center; } } /* --- 10.19.3 „MIERT TOLTSE LE" — SZOVEGBLOKK, NEM KARTYA -------------- A demoban ez a harom egyseg sima szoveg (cim + bekezdes), nem kartya. A kartya-chrome-ot levesszuk, a racs es a tartalom valtozatlan. */ .v2-role--brand .v2-szovegblokkok .gs-card { background: transparent; border: 0; box-shadow: none; } .v2-role--brand .v2-szovegblokkok .gs-card:hover { transform: none; box-shadow: none; } .v2-role--brand .v2-szovegblokkok .gs-card__body { padding-inline: 0; padding-block-start: 0; } /* --- 10.19.4 TOVABBI LINKEK ------------------------------------------- */ .v2-tovabbi { margin-block-start: var(--space-lg); } .v2-role--brand .gs-section__head--centered ~ .v2-tovabbi, .v2-role--brand .gs-grid + .v2-tovabbi { text-align: center; }