/* ========================================================= TELESAM — Design rendszer (publikus oldal) Mobil-first, függőségmentes CSS. Betűtípus: Google Fonts (Space Grotesk + Inter) — élesben internetkapcsolat kell hozzá, ez szándékos, nem hiba. ========================================================= */ :root{ /* Márkaszínek */ --ink:#0B1220; --ink-2:#151f33; --paper:#F7F8FC; --paper-2:#EEF1F8; --line:#E2E6F0; --muted:#5B6472; --muted-2:#646C7F; /* 2026-09-24: #8A93A6 → #646C7F (WCAG AA: 2.9:1 → 5.0:1 a papír-háttéren) */ /* Felület-token (kártyák, panelek háttere) — sötét módban átvált, szemben a lenti --ink-band tokennel, ami mindig sötét marad. */ --surface:#fff; /* Mindig sötét, dekoratív "sáv" háttér (fejléc-chat, lábléc, kiemelt doboz stb.) — szándékosan NEM ugyanaz, mint a szöveghez használt, sötét módban megforduló --ink token. */ --ink-band:#0B1220; --header-bg:rgba(247,248,252,.86); --primary:#6C5CE7; --primary-2:#5847d1; --primary-tint:#EFEBFF; /* Neon lila akcent-réteg (2026-09-02) — kizárólag gombokon, hover- állapotokon és kiemeléseken jelenik meg, visszafogott, halvány "glow" formájában (nem villog, nem tolakodó). A --neon-glow-soft/ --neon-glow tokenek sötét módban erősebbre váltanak (lásd lent), mert sötét háttéren jobban érvényesül egy fényeffekt. */ --neon:#C77DFF; --neon-strong:#B026FF; --neon-glow-soft:#B026FF2E; --neon-glow:#B026FF52; --accent:#22D3EE; --accent-tint:#E3FBFF; --emerald:#10B981; --emerald-2:#059669; --emerald-tint:#E7FBF3; --amber:#F59E0B; --amber-tint:#FEF3E0; --blue:#3B82F6; --blue-tint:#E7F0FF; --red:#EF4444; --red-tint:#FDE9E9; --radius-sm:10px; --radius-md:16px; --radius-lg:24px; --shadow-sm:0 2px 8px rgba(11,18,32,.06); --shadow-md:0 10px 30px rgba(11,18,32,.10); --shadow-lg:0 20px 60px rgba(11,18,32,.16); --container:1180px; --font-head:'Space Grotesk', 'Segoe UI', system-ui, sans-serif; --font-body:'Inter', 'Segoe UI', system-ui, sans-serif; color-scheme: light; } /* ---------- Sötét mód ---------- A attribútumot a js/script.js (illetve admin/js/admin.js) kapcsolja be/ki, a választást localStorage-ban megjegyezve — lásd a fejléc/oldalsáv "🌙/☀️" gombját minden oldalon. Az --ink-band szándékosan NEM változik itt: a vele színezett elemek (chat-fejléc, lábléc, kiemelt dobozok stb.) mindkét témában sötétek maradnak, csak a --ink (törzsszöveg) fordul meg. */ html[data-theme="dark"]{ color-scheme: dark; --ink:#E9ECF5; --paper:#0B1220; --paper-2:#131B2E; --line:#232C42; --muted:#A9B2C3; --muted-2:#7C8598; --surface:#151f33; --header-bg:rgba(11,18,32,.88); --neon-glow-soft:#C77DFF40; --neon-glow:#C77DFF7A; } /* Vizuálisan rejtett, de képernyőolvasónak/keresőmotornak elérhető szöveg — pl. a főoldal hero-jában, ahol a látható H1 helyét a Telesam logó veszi át, de az oldalnak a minőségi ellenőrzőlista szerint (SEO alapok) akkor is pontosan egy valódi, szemantikus H1 elemmel kell rendelkeznie. */ .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ margin:0; font-family:var(--font-body); background:var(--paper); color:var(--ink); line-height:1.6; -webkit-font-smoothing:antialiased; transition:background-color .2s ease, color .2s ease; } img{ max-width:100%; display:block; } h1,h2,h3,h4{ font-family:var(--font-head); line-height:1.15; margin:0 0 .5em; letter-spacing:-0.02em; } h1{ font-size:clamp(2rem,4.5vw,3.4rem); } h2{ font-size:clamp(1.6rem,3.2vw,2.4rem); } h3{ font-size:1.3rem; } p{ margin:0 0 1em; color:var(--muted); } a{ color:var(--primary-2); text-decoration:none; } a:hover{ text-decoration:underline; } ul{ padding-left:1.2em; } /* Fókuszjelzés — akadálymentesség */ a:focus-visible,button:focus-visible,input:focus-visible, textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; border-radius:4px; } .skip-link{ position:absolute; left:-999px; top:0; background:var(--ink-band); color:#fff; padding:.8em 1.2em; z-index:1000; border-radius:0 0 8px 0; } .skip-link:focus{ left:0; } .container{ max-width:var(--container); margin:0 auto; padding:0 20px; } .section{ padding:64px 0; } .section-tight{ padding:36px 0; } .section-alt{ background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .section-dark{ background:var(--ink-band); color:#fff; } .section-dark p{ color:#B7BFCF; } .section-dark h2,.section-dark h3{ color:#fff; } .eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:.8rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--primary-2); background:var(--primary-tint); padding:6px 14px; border-radius:999px; margin-bottom:14px; } .lead{ font-size:1.15rem; max-width:60ch; } .center{ text-align:center; margin-left:auto; margin-right:auto; } .grid{ display:grid; gap:24px; } @media(min-width:720px){ .grid-2{ grid-template-columns:1fr 1fr; } .grid-3{ grid-template-columns:repeat(3,1fr); } .grid-4{ grid-template-columns:repeat(4,1fr);} } .stack{ display:flex; flex-direction:column; gap:12px; } .row{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; } .spread{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; } /* ---------- Gombok ---------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--font-body); font-weight:700; font-size:.95rem; padding:13px 24px; border-radius:999px; border:2px solid transparent; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease; text-decoration:none; line-height:1; } .btn:hover{ text-decoration:none; transform:translateY(-2px); } .btn:active{ transform:translateY(0); } .btn-primary{ background:linear-gradient(135deg,var(--primary),var(--primary-2)); color:#fff; box-shadow:var(--shadow-sm); transition:box-shadow .18s ease, transform .18s ease; } .btn-primary:hover, .btn-primary:focus-visible{ box-shadow:var(--shadow-md), 0 0 22px var(--neon-glow-soft); transform:translateY(-1px); } .btn-outline{ background:transparent; border-color:var(--ink); color:var(--ink); } .btn-outline:hover{ background:var(--ink-band); color:#fff; } .btn-ghost{ background:var(--paper-2); color:var(--ink); } .btn-emerald{ background:linear-gradient(135deg,var(--emerald),var(--emerald-2)); color:#fff; box-shadow:0 8px 24px rgba(16,185,129,.35); } .btn-block{ width:100%; } .btn-sm{ padding:9px 16px; font-size:.85rem; } .btn[disabled]{ opacity:.5; cursor:not-allowed; transform:none; } /* ---------- Fejléc / navigáció ---------- */ .site-header{ position:sticky; top:0; z-index:200; background:var(--header-bg); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); } /* gap: a felhasználó jelezte, hogy szűkebb ablaknál a fejléc jobb oldali csoportjai (nav-linkek vége / fiók-klaszter / "Ajánlatot kérek" gomb) szinte összeértek, mert a justify-content:space-between önmagában csak a MARADÉK helyet osztja szét — ha alig marad hely, a rések eltűnnek. A gap egy garantált MINIMUM távolságot ad minden csoport közé, a space-between pedig ezen felül osztja el, ha van felesleges hely. */ .nav{ display:flex; align-items:center; justify-content:space-between; padding:14px 0; gap:10px; } /* 2026-09-04, felhasználói visszajelzés ("a fejléc nagyon zsúfolt lett"): a fejléc-sor (logó + navigáció + fiók-widget + "Ajánlatot kérek" gomb) szélesebb, mint az oldal többi részének olvasási szélessége (--container, 1180px) — emiatt 1200-1920px közötti nézeteknél a flexbox kényszerűen összenyomta a jobb szélső gombot, ami két sorba tört. A navigáció idegen-menüpontok Tudástár-legördülőbe vonása (lásd .nav-dropdown lentebb) már önmagában csökkentette a zsúfoltságot, de ez a szélesség-korlátozás önmagában nem volt elég — ezért a fejléc-sor KIFEJEZETTEN szélesebb konténert kap, mint a tartalmi szekciók: ez nagyon elterjedt, bevett mintázat (a fejléc gyakran szélesebb, mint az olvasási tartalom), és nem befolyásolja a lenti szekciók igazítását/olvasási szélességét. */ .site-header .container{ max-width:1360px; padding-left:14px; padding-right:14px; } .nav-logo img{ height:38px; width:auto; } /* 2026-09-06: a fejléc logója is a hero-márkajelvénnyel megegyező okból témafüggő — a logo.svg sötét szövegszíne sötét módban a sötét fejléc- háttéren (var(--header-bg)) gyakorlatilag olvashatatlanná vált. */ .nav-logo .nav-logo-dark{ display:none; } html[data-theme="dark"] .nav-logo .nav-logo-light{ display:none; } html[data-theme="dark"] .nav-logo .nav-logo-dark{ display:block; } .nav-links{ display:none; gap:15px; list-style:none; margin:0; padding:0; align-items:center; } .nav-links a{ color:var(--ink); font-weight:600; font-size:.92rem; white-space:nowrap; transition:color .15s ease, text-shadow .15s ease; } .nav-links a:hover{ color:var(--primary-2); } .nav-links a.active{ color:var(--primary-2); text-shadow:0 0 14px var(--neon-glow-soft); } /* ---------- "Prémium" fejléc-gomb (2026-09-03) ---------- A felhasználó kifejezetten kérte, hogy a fejlécben a "Prémium" gomb szavai NE folyjanak össze a szomszédos navigációs elemekkel — ezért ez NEM sima szöveges nav-link, hanem önálló, jól látható, arany/neon szegélyű "pill" gomb saját háttérrel és bal oldali térközzel, ami egyértelműen elkülöníti a többi (egyszerű szöveges) linktől. */ .nav-premium-link{ display:inline-flex; align-items:center; gap:5px; margin-left:3px; padding:6px 12px; border-radius:999px; border:1px solid #E0A030; background:linear-gradient(135deg,#E0A03022,#B0263022); color:#B8842A !important; font-weight:700 !important; font-size:.86rem !important; white-space:nowrap; transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease; } .nav-premium-link:hover{ border-color:#E0A030; box-shadow:0 0 14px #E0A03055; transform:translateY(-1px); color:#B8842A !important; } html[data-theme="dark"] .nav-premium-link{ color:#F2C572 !important; } .nav-mobile .nav-premium-link{ display:inline-flex; width:fit-content; margin:4px 0; border-bottom:none; } /* ---------- Prémium pontegyenleg-jelvény ("💎 1100 PP") ---------- Futásidőben a js/script.js renderPremiumBadge()-je szúrja be a .nav-account konténerbe, csak bejelentkezett, már vásárolt ügyfeleknél — lásd az ottani megjegyzést. */ .nav-premium-badge{ display:inline-flex; align-items:center; gap:5px; padding:7px 12px; white-space:nowrap; border-radius:999px; border:1px solid #E0A030; background:#E0A03018; color:#B8842A; font-weight:700; font-size:.84rem; transition:box-shadow .15s ease, transform .15s ease; } .nav-premium-badge:hover{ box-shadow:0 0 14px #E0A03055; transform:translateY(-1px); } html[data-theme="dark"] .nav-premium-badge{ color:#F2C572; background:#E0A03026; } .nav-mobile .nav-premium-badge{ width:fit-content; } .nav-cta{ display:none; align-items:center; gap:10px; } .nav-cta .btn{ white-space:nowrap; flex-shrink:0; } .nav-account{ display:none; align-items:center; gap:8px; } /* A teljes (nem hamburger-menüs) fejléc-nézet küszöbét 960px-ről 1200px-re emeltük (2026-09-03): bejelentkezett, Prémium-jelvényes állapotban (Prémium pill + PP-egyenleg jelvény + téma-váltó + fiók- gomb + "Ajánlatot kérek" gomb EGYÜTT) 960–1179px szélességben a teljes tartalom nem fért ki egy sorban, és vagy összepréselődött, vagy lecsípődött a jobb szélen — lásd .nav-toggle lentebb, azonos küszöbbel. (A .nav-auth-item lenti max-width/ellipsis-szabálya egy hosszabb ügyfélnév esetére is biztonsági tartalék, hogy az sose feszítse szét a fejlécet.) */ @media(min-width:1200px){ .nav-links{ display:flex; } .nav-cta{ display:flex; } .nav-account{ display:flex; } } /* ---------- Kétsoros fejléc, 1200px+ (2026-09-04, ismételt felhasználói visszajelzés: "ez sem tetszik, legyen 2 sor") ---------- A korábbi javítási kör (Tudástár-legördülő + tömörebb közök) egy sorban próbálta elférni a teljes fejlécet — ez technikailag működött (nem tört sorba, nem volt vízszintes túlcsordulás), de a felhasználó szerint még mindig zsúfoltnak hatott. Ehelyett most SZÁNDÉKOSAN két sorra bontjuk a fejlécet: a felső sorban csak a logó (balra) és a fiók-klaszter + "Ajánlatot kérek" gomb (jobbra) marad, az ALSÓ, teljes szélességű sorba kerül a navigáció (nav-links) — így minden elemnek sokkal több levegője van, nem kell a legkisebb betűméretre/közre szorítani semmit. A fejléc `position:sticky`, NEM `fixed`, ezért a nagyobb magasság automatikusan feljebb tolja a tartalmat — nincs szükség kompenzáló padding-re máshol az oldalon. */ @media(min-width:1200px){ .site-header .container.nav{ flex-wrap:wrap; row-gap:12px; } .site-header .container.nav > .nav-logo{ order:1; } .site-header .container.nav > .nav-account{ order:2; } .site-header .container.nav > .nav-cta{ order:3; } .site-header .container.nav > nav[aria-label="Fő navigáció"]{ order:4; flex-basis:100%; display:flex; justify-content:center; padding-top:12px; border-top:1px solid var(--line); } .nav-links{ gap:26px; } .nav-links a{ font-size:.95rem; } .nav-dropdown-trigger{ font-size:.95rem; } .nav-account{ gap:12px; } .nav-auth-item{ padding:8px 14px; } .nav-premium-link{ margin-left:6px; padding:7px 14px; } } /* ---------- "Ügyintézés" lenyíló menü a fejlécben ---------- A korábban 7 egyenrangú linket tartalmazó, zsúfolt fejléc helyett a ritkábban kattintott, inkább "ügyintézés" jellegű aloldalak (Ajánlat- kérés / Időpontkérés / Megrendeléseim) egy közös lenyílóba kerültek — lásd js/script.js setupNav()-ban a kattintás-kezelést. */ .nav-dropdown{ position:relative; } .nav-dropdown-trigger{ display:inline-flex; align-items:center; gap:5px; background:none; border:none; padding:2px 0; color:var(--ink); font-weight:600; font-size:.92rem; font-family:inherit; cursor:pointer; white-space:nowrap; } .nav-dropdown-trigger:hover{ color:var(--primary-2); } .nav-dropdown-trigger.active{ color:var(--primary-2); text-shadow:0 0 14px var(--neon-glow-soft); } .nav-caret{ width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); margin-top:-3px; transition:transform .15s ease; } .nav-dropdown.open .nav-caret{ transform:rotate(-135deg); margin-top:2px; } .nav-dropdown-menu{ position:absolute; top:calc(100% + 16px); left:50%; transform:translateX(-50%); min-width:200px; margin:0; padding:8px; list-style:none; background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-md); display:none; flex-direction:column; gap:2px; z-index:220; } .nav-dropdown.open .nav-dropdown-menu{ display:flex; } .nav-dropdown-menu a{ display:block; padding:9px 12px; border-radius:9px; font-weight:600; font-size:.92rem; color:var(--ink); } .nav-dropdown-menu a:hover, .nav-dropdown-menu a.active{ background:var(--primary-tint); color:var(--primary-2); } /* ---------- Fiók-klaszter a fejlécben (téma-váltó + belépés/profil) ---------- Ezt a konténert (#navAccount) a script.js tölti fel futásidőben — lásd renderThemeToggle()/renderAuthNav(). Külön csoport a fő navigációtól és a elsődleges CTA-gombtól, hogy a fejléc ne tűnjön zsúfoltnak. */ .nav-auth-item{ display:inline-flex; align-items:center; gap:6px; padding:8px 12px; white-space:nowrap; border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--ink); font-weight:600; font-size:.86rem; transition:border-color .15s ease, color .15s ease, box-shadow .15s ease; /* Biztonsági tartalék egy szokatlanul hosszú ügyfélnévhez (pl. "👤 Teszt Elek Harmadik Named Ügyfél Kft.") — inkább "…"-tal vágja el, mintsem szétfeszítse/kicsípje a fejléc jobb szélét. */ max-width:220px; overflow:hidden; text-overflow:ellipsis; } .nav-auth-item:hover{ border-color:var(--primary); color:var(--primary-2); box-shadow:0 0 14px var(--neon-glow-soft); } .nav-auth-item.active{ border-color:var(--primary); color:var(--primary-2); background:var(--primary-tint); box-shadow:0 0 14px var(--neon-glow-soft); } .nav-toggle{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:10px; border:1px solid var(--line); background:var(--surface); cursor:pointer; } @media(min-width:1200px){ .nav-toggle{ display:none; } } .nav-mobile{ display:none; flex-direction:column; gap:4px; padding:12px 20px 20px; background:var(--surface); border-top:1px solid var(--line); } .nav-mobile.open{ display:flex; } .nav-mobile a{ padding:12px 6px; color:var(--ink); font-weight:600; border-bottom:1px solid var(--line); } .nav-mobile .btn{ margin-top:10px; } /* ---------- Sötét/világos mód kapcsoló ---------- */ .theme-toggle-btn{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; flex-shrink:0; border-radius:10px; border:1px solid var(--line); background:var(--surface); color:var(--ink); cursor:pointer; font-size:1.05rem; line-height:1; transition:border-color .15s ease, transform .15s ease; } .theme-toggle-btn:hover{ border-color:var(--primary); transform:translateY(-1px); box-shadow:0 0 14px var(--neon-glow-soft); } .nav-mobile .theme-toggle-btn{ width:100%; height:auto; justify-content:flex-start; gap:8px; padding:12px 14px; font-size:.95rem; font-weight:600; } /* ---------- Hero ---------- */ .hero{ background:radial-gradient(1100px 500px at 85% -10%, rgba(108,92,231,.16), transparent), radial-gradient(700px 400px at 0% 0%, rgba(34,211,238,.14), transparent), var(--paper); padding:56px 0 32px; } .hero-grid{ display:grid; gap:36px; align-items:center; } @media(min-width:960px){ .hero-grid{ grid-template-columns:1.15fr .85fr; } } .hero-art{ background:linear-gradient(160deg,var(--ink-band),#1c2a47); border-radius:var(--radius-lg); padding:22px; box-shadow:var(--shadow-lg); color:#fff; } .hero-art .browser-bar{ display:flex; gap:6px; margin-bottom:14px; } .hero-art .dot{ width:10px; height:10px; border-radius:50%; background:#39435a; } .hero-stats{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:18px; } .hero-stat{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:14px; padding:16px; } .hero-stat b{ font-family:var(--font-head); font-size:1.6rem; display:block; } .hero-stat span{ font-size:.82rem; color:#A9B2C3; } /* ---------- Főoldal hero-márkajelvény (2026-09-06) ---------- A felhasználó kérésére a hero korábbi, hosszú mondatos

-je ("Weboldal, ami dolgozik Ön helyett — és friss hírek is várják minden látogatóját.") helyett most a Telesam logó + a logóba épített felirat ("WEBFEJLESZTÉS & ÜZEMELTETÉS") jelenik meg, egy szép, kártyaszerű keretbe csomagolva. Sötét/világos módban külön SVG-t mutatunk (lásd assets/logo.svg / logo-white.svg — az előbbi sötét, az utóbbi világos szövegszínű), mert a hero saját háttere (var(--paper)) témánként megfordul, és egy sötét szövegű logó sötét háttéren olvashatatlan lenne — pontosan az a fajta kontraszthiba, amit korábban az 50+ oldalon is javítottunk. */ .hero-brand{ display:inline-flex; align-items:center; gap:14px; padding:20px 26px; border-radius:var(--radius-lg); background:linear-gradient(160deg, rgba(108,92,231,.14), rgba(34,211,238,.10)), var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-md), 0 0 30px var(--neon-glow-soft); margin:2px 0 18px; } .hero-brand img{ height:56px; width:auto; display:block; } .hero-brand .hero-brand-dark{ display:none; } html[data-theme="dark"] .hero-brand .hero-brand-light{ display:none; } html[data-theme="dark"] .hero-brand .hero-brand-dark{ display:block; } @media(min-width:640px){ .hero-brand img{ height:68px; } } /* ---------- Kártyák ---------- */ .card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); padding:26px; box-shadow:var(--shadow-sm); } .card-hover{ transition:transform .2s ease, box-shadow .2s ease; } .card-hover:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md), 0 0 20px var(--neon-glow-soft); } .icon-tile{ width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:var(--primary-tint); color:var(--primary-2); margin-bottom:14px; font-size:1.4rem; } /* ---------- Futó oldalak státusz-lista ---------- */ .sites-list{ display:flex; flex-direction:column; gap:10px; } .site-row{ display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:14px 16px; } .dot-status{ width:11px; height:11px; border-radius:50%; box-shadow:0 0 0 4px; } .dot-status.up{ background:var(--emerald); box-shadow-color:var(--emerald-tint); box-shadow:0 0 0 4px var(--emerald-tint); } .dot-status.down{ background:var(--red); box-shadow:0 0 0 4px var(--red-tint); } .site-row .name{ font-weight:700; } .site-row .meta{ color:var(--muted-2); font-size:.85rem; } .site-traffic{ display:flex; gap:16px; font-size:.82rem; color:var(--muted); } .site-traffic b{ color:var(--ink); font-family:var(--font-head); } /* ---------- Csomagok ---------- */ .plans{ display:grid; gap:22px; } @media(min-width:720px){ .plans{ grid-template-columns:repeat(2,1fr); } } @media(min-width:1180px){ .plans{ grid-template-columns:repeat(5,1fr); } } .plan{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); padding:26px 22px; display:flex; flex-direction:column; gap:14px; position:relative; transition:transform .2s ease, box-shadow .2s ease; } .plan:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); } .plan .tier{ font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--primary-2); } .plan .price{ font-family:var(--font-head); font-size:2rem; margin:2px 0; } .plan .price small{ font-family:var(--font-body); font-size:.85rem; font-weight:600; color:var(--muted-2); } .plan .includes-note{ font-size:.82rem; color:var(--primary-2); font-weight:700; background:var(--primary-tint); padding:8px 10px; border-radius:8px; } .plan ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:9px; font-size:.9rem; } .plan ul li{ padding-left:24px; position:relative; } .plan ul li::before{ content:"✓"; position:absolute; left:0; color:var(--emerald); font-weight:800; } .plan.featured{ border-color:var(--primary); box-shadow:var(--shadow-md), 0 0 30px var(--neon-glow-soft); } .plan.featured::before{ content:"Legnépszerűbb"; position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--primary); color:#fff; font-size:.72rem; font-weight:700; padding:5px 14px; border-radius:999px; } /* Custom csomag — smaragdzöld fénylő kiemelés */ .plan-custom{ background:var(--surface); border:2px solid var(--emerald); border-radius:var(--radius-lg); box-shadow:0 0 0 4px rgba(16,185,129,.12), 0 0 46px rgba(16,185,129,.35), var(--shadow-md); animation:emerald-pulse 3.2s ease-in-out infinite; padding:30px; } @keyframes emerald-pulse{ 0%,100%{ box-shadow:0 0 0 4px rgba(16,185,129,.12), 0 0 30px rgba(16,185,129,.28), var(--shadow-md); } 50%{ box-shadow:0 0 0 6px rgba(16,185,129,.18), 0 0 58px rgba(16,185,129,.5), var(--shadow-md); } } @media (prefers-reduced-motion: reduce){ .plan-custom{ animation:none; } } .plan-custom .tier{ color:var(--emerald-2); } .plan-custom .includes-note{ color:var(--emerald-2); background:var(--emerald-tint); } /* Heti Prémium-pont kupon — kezdőoldali, NAGYON jól látható kiemelés (2026-09-12, majd újratervezve ugyanaznap, 13. kör, a felhasználó visszajelzése alapján: az eredeti, világos, arany-tintás doboz "kezdetlegesnek, bénának" hatott a többi elemhez képest — a kérés: máshová helyezni és "neon kiemeléssel", a témához illeszkedve). Ugyanazt a mintát követi, mint a lentebbi .live-visitors-card (mindig sötét --ink-band hátterű kártya, lágyan lüktető neon-fényű kerettel, sarokban egy visszafogott radiális fényfolttal) — csak a Prémium-modul már bevett arany márkaszínével (#E0A030/#F2C572, lásd .nav-premium-link/ .nav-premium-badge) "arany neon" változatban, hogy a két kártya összetartozó, de egymástól megkülönböztethető párt alkosson. Az animáció villanásszáma jóval a fotoszenzitív rohamkockázati 3/mp alatt marad, és leáll csökkentett mozgás igénylése (prefers-reduced-motion) esetén. */ .coupon-neon-section{ padding:52px 0; } .coupon-neon-card{ position:relative; overflow:hidden; display:flex; align-items:center; gap:clamp(20px,4vw,36px); flex-wrap:wrap; border-radius:var(--radius-lg); background:linear-gradient(150deg,var(--ink-band) 0%,#2E2308 55%,var(--ink-band) 100%); border:1px solid #E0A03070; box-shadow:var(--shadow-lg), 0 0 46px #E0A03038; padding:clamp(24px,4vw,40px); animation:coupon-neon-breathe 3.6s ease-in-out infinite; } .coupon-neon-card::before{ content:''; position:absolute; inset:0; pointer-events:none; background:radial-gradient(560px 280px at 10% -15%, #E0A03050, transparent 70%); } @keyframes coupon-neon-breathe{ 0%,100%{ box-shadow:var(--shadow-lg), 0 0 46px #E0A03038; border-color:#E0A03070; } 50%{ box-shadow:var(--shadow-lg), 0 0 82px #E0A03068; border-color:#F2C572; } } @media (prefers-reduced-motion: reduce){ .coupon-neon-card{ animation:none; } } .coupon-neon-qr{ position:relative; flex:none; background:#fff; padding:14px; border-radius:18px; box-shadow:0 0 0 1px #E0A030, 0 0 30px #E0A03055; } .coupon-neon-qr img{ width:150px; height:150px; display:block; } .coupon-neon-text{ position:relative; flex:1 1 320px; min-width:260px; } .coupon-neon-badge{ display:inline-flex; align-items:center; gap:6px; background:linear-gradient(135deg,#E0A030,#F2C572); color:#241a00; font-weight:800; font-size:.8rem; letter-spacing:.02em; padding:5px 14px; border-radius:999px; margin-bottom:12px; box-shadow:0 0 18px #E0A03060; animation:coupon-neon-badge-blink 1.6s steps(2,jump-none) infinite; } @keyframes coupon-neon-badge-blink{ 50%{ opacity:.55; } } @media (prefers-reduced-motion: reduce){ .coupon-neon-badge{ animation:none; } } .coupon-neon-text h2{ margin:0 0 8px; color:#fff; display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; } .coupon-neon-percent{ font-family:var(--font-head); font-weight:700; font-size:clamp(1.9rem,4vw,2.7rem); background:linear-gradient(135deg,#F2C572,#E0A030); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:#F2C572; line-height:1; } .coupon-neon-text p.lead{ color:rgba(255,255,255,.78); margin:0 0 4px; } .coupon-neon-week{ display:inline-block; font-weight:700; color:#F2C572; background:rgba(255,255,255,.08); padding:6px 14px; border-radius:10px; border:1px solid #E0A03055; margin:10px 0 18px; } .coupon-neon-cta:hover, .coupon-neon-cta:focus-visible{ box-shadow:var(--shadow-md), 0 0 26px #E0A03060; } /* Custom builder */ .builder{ display:grid; gap:20px; } @media(min-width:960px){ .builder{ grid-template-columns:1.5fr 1fr; } } .builder-group{ margin-bottom:22px; } .builder-group h4{ font-family:var(--font-head); margin-bottom:10px; } .service-item{ display:flex; align-items:center; gap:12px; padding:13px 14px; border:1px solid var(--line); border-radius:12px; margin-bottom:8px; cursor:pointer; background:var(--surface); transition:border-color .15s, background .15s; } .service-item:hover{ border-color:var(--emerald); } .service-item input[type="checkbox"]{ width:20px; height:20px; accent-color:var(--emerald); flex:none; } .service-item .s-name{ flex:1; font-weight:600; font-size:.92rem; } .service-item .s-desc{ display:block; font-weight:400; color:var(--muted-2); font-size:.8rem; margin-top:2px; } .service-item .s-price{ font-family:var(--font-head); font-weight:700; color:var(--emerald-2); white-space:nowrap; } .service-item.checked{ border-color:var(--emerald); background:var(--emerald-tint); color:var(--ink-band); } .summary-box{ position:sticky; top:90px; align-self:start; background:var(--ink-band); color:#fff; border-radius:var(--radius-lg); padding:24px; box-shadow:var(--shadow-lg); } .summary-box h4{ color:#fff; } .summary-list{ list-style:none; padding:0; margin:14px 0; display:flex; flex-direction:column; gap:8px; max-height:280px; overflow-y:auto; } .summary-list li{ display:flex; justify-content:space-between; gap:10px; font-size:.85rem; border-bottom:1px dashed rgba(255,255,255,.15); padding-bottom:6px; } .summary-empty{ color:var(--muted-2); font-size:.85rem; } .summary-total{ display:flex; justify-content:space-between; align-items:baseline; padding-top:12px; border-top:1px solid rgba(255,255,255,.18); font-family:var(--font-head); font-size:1.5rem; } .summary-total span{ font-size:.85rem; font-family:var(--font-body); color:#A9B2C3; } /* ---------- Badge / státusz ---------- */ .badge{ display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px; font-size:.78rem; font-weight:700; } .badge::before{ content:""; width:8px; height:8px; border-radius:50%; } .badge-orange{ background:var(--amber-tint); color:#B45309; } .badge-orange::before{ background:var(--amber); } .badge-blue{ background:var(--blue-tint); color:#1D4ED8; } .badge-blue::before{ background:var(--blue); } .badge-green{ background:var(--emerald-tint); color:var(--emerald-2); } .badge-green::before{ background:var(--emerald); } .badge-red{ background:var(--red-tint); color:#B91C1C; } .badge-red::before{ background:var(--red); } /* ---------- Űrlapok ---------- */ .field{ margin-bottom:18px; } .field label{ display:block; font-weight:700; font-size:.9rem; margin-bottom:6px; } /* Önálló .hint (nem csak .field-en belül) — pl. jogi/tájékoztató oldalakon (adatvedelem.html, impresszum.html) használt apró, tompított szövegekhez. A 2026-09-12-i adatvédelmi átvilágítás során derült ki, hogy korábban csak a .field-en belüli .hint volt stílusozva, önmagában a böngésző alapértelmezett

stílusát kapta. */ .hint{ font-size:.85rem; color:var(--muted-2); } .field .hint{ font-size:.78rem; margin-top:4px; } input[type="text"],input[type="email"],input[type="tel"],input[type="number"], input[type="date"],textarea,select{ width:100%; padding:12px 14px; border:1.5px solid var(--line); border-radius:12px; font-family:var(--font-body); font-size:.95rem; background:var(--surface); color:var(--ink); } textarea{ min-height:120px; resize:vertical; } input:focus,textarea:focus,select:focus{ border-color:var(--primary); } .field-row{ display:grid; gap:16px; } @media(min-width:640px){ .field-row-2{ grid-template-columns:1fr 1fr; } } .radio-card{ display:flex; gap:10px; align-items:flex-start; border:1.5px solid var(--line); border-radius:12px; padding:14px; cursor:pointer; } .radio-card input{ margin-top:3px; accent-color:var(--primary); } .radio-card.active{ border-color:var(--primary); background:var(--primary-tint); color:var(--ink-band); } .upload-box{ border:2px dashed var(--line); border-radius:14px; padding:22px; text-align:center; color:var(--muted); background:var(--paper-2); } .honeypot{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; } .form-success{ display:none; background:var(--emerald-tint); border:1px solid var(--emerald); color:var(--emerald-2); padding:16px 18px; border-radius:14px; font-weight:600; margin-bottom:20px; } .form-success.show{ display:block; } /* ---------- Időpont / konzultáció ---------- */ .duration-options{ display:grid; gap:12px; } @media(min-width:640px){ .duration-options{ grid-template-columns:repeat(3,1fr); } } .duration-card{ border:1.5px solid var(--line); border-radius:14px; padding:16px; text-align:center; cursor:pointer; background:var(--surface); } .duration-card.active{ border-color:var(--primary); background:var(--primary-tint); box-shadow:var(--shadow-sm); color:var(--ink-band); } .duration-card b{ display:block; font-family:var(--font-head); font-size:1.3rem; } /* ---------- Google térkép ---------- */ .map-wrap{ border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-sm); } .map-wrap iframe{ width:100%; height:340px; border:0; display:block; } /* ---------- Modal ---------- */ .modal-backdrop{ position:fixed; inset:0; background:rgba(11,18,32,.55); display:none; align-items:center; justify-content:center; padding:20px; z-index:1000; } .modal-backdrop.open{ display:flex; } .modal{ background:var(--surface); border-radius:var(--radius-lg); max-width:640px; width:100%; max-height:88vh; overflow-y:auto; padding:28px; box-shadow:var(--shadow-lg); position:relative; } .modal-close{ position:absolute; top:16px; right:16px; width:36px; height:36px; border-radius:50%; border:1px solid var(--line); background:var(--surface); cursor:pointer; font-size:1.1rem; line-height:1; } .detail-grid{ display:grid; gap:10px; margin:16px 0; } .detail-grid .drow{ display:flex; justify-content:space-between; gap:14px; padding:9px 0; border-bottom:1px solid var(--line); font-size:.92rem; } .detail-grid .drow span:first-child{ color:var(--muted); } .detail-grid .drow span:last-child{ font-weight:700; text-align:right; } /* ---------- Chat widget ---------- */ .chat-launcher{ position:fixed; right:20px; bottom:20px; z-index:900; width:60px; height:60px; border-radius:50%; background:linear-gradient(135deg,var(--primary),var(--accent)); color:#fff; border:none; cursor:pointer; box-shadow:var(--shadow-lg), 0 0 22px var(--neon-glow-soft); font-size:1.5rem; display:flex; align-items:center; justify-content:center; transition:box-shadow .18s ease, transform .18s ease; } .chat-launcher:hover{ box-shadow:var(--shadow-lg), 0 0 32px var(--neon-glow); transform:translateY(-1px); } .chat-launcher .badge-dot{ position:absolute; top:-2px; right:-2px; background:var(--red); color:#fff; font-size:.68rem; font-weight:800; min-width:18px; height:18px; border-radius:999px; display:none; align-items:center; justify-content:center; padding:0 4px; } .chat-launcher .badge-dot.show{ display:flex; } .chat-panel{ position:fixed; right:20px; bottom:92px; width:min(340px,88vw); max-height:70vh; background:var(--surface); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); border:1px solid var(--line); display:none; flex-direction:column; overflow:hidden; z-index:900; } .chat-panel.open{ display:flex; } .chat-head{ background:var(--ink-band); color:#fff; padding:14px 16px; display:flex; justify-content:space-between; align-items:center; } .chat-head strong{ font-family:var(--font-head); } .chat-head button{ background:none; border:none; color:#fff; font-size:1.1rem; cursor:pointer; } .chat-body{ flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:8px; background:var(--paper); min-height:180px; } .chat-msg{ max-width:82%; padding:9px 12px; border-radius:14px; font-size:.86rem; } .chat-msg.me{ align-self:flex-end; background:var(--primary); color:#fff; border-bottom-right-radius:4px; } .chat-msg.them{ align-self:flex-start; background:var(--surface); border:1px solid var(--line); border-bottom-left-radius:4px; } .chat-foot{ display:flex; gap:8px; padding:10px; border-top:1px solid var(--line); background:var(--surface); } .chat-foot input{ flex:1; } .chat-foot button{ border:none; background:var(--primary); color:#fff; width:42px; border-radius:10px; cursor:pointer; font-size:1rem; } .chat-gate{ padding:16px; } /* ---------- Lábléc ---------- */ .site-footer{ background:var(--ink-band); color:#B7BFCF; padding:52px 0 26px; } .footer-grid{ display:grid; gap:32px; margin-bottom:32px; } @media(min-width:720px){ .footer-grid{ grid-template-columns:1.4fr 1fr 1fr; } } .footer-grid h4{ color:#fff; font-size:1rem; margin-bottom:14px; } .footer-grid ul{ list-style:none; padding:0; display:flex; flex-direction:column; gap:9px; } .footer-grid a{ color:#B7BFCF; } .footer-bottom{ border-top:1px solid rgba(255,255,255,.12); padding-top:20px; font-size:.82rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; } /* ---------- Egyéb ---------- */ .toast{ position:fixed; left:50%; bottom:24px; transform:translate(-50%,120%); background:var(--ink-band); color:#fff; padding:14px 22px; border-radius:999px; box-shadow:var(--shadow-lg); z-index:1200; transition:transform .25s ease; font-weight:600; font-size:.9rem; } .toast.show{ transform:translate(-50%,0); } .table-wrap{ overflow-x:auto; } table{ width:100%; border-collapse:collapse; font-size:.9rem; } th,td{ padding:11px 12px; text-align:left; border-bottom:1px solid var(--line); white-space:nowrap; } th{ color:var(--muted); font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; } .visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; } /* ---------- Élő látogatottság (2026-09-03) ---------- Feltűnő, a --neon tokenekre épülő szekció a főoldalon — a felhasználó kifejezett kérésére ("feltűnő színvilággal, mely passzol a weblap stílusához — emeljük ki, mindenki számára láthatóan"). Lásd index.html "Élő látogatottság" szekció + TS.siteActivityApi. */ .live-visitors-section{ padding:52px 0; } .live-visitors-card{ position:relative; overflow:hidden; border-radius:var(--radius-lg); background:linear-gradient(150deg,var(--ink-band) 0%,#241238 55%,var(--ink-band) 100%); border:1px solid var(--neon-glow); box-shadow:var(--shadow-lg), 0 0 60px var(--neon-glow-soft); padding:32px clamp(20px,4vw,40px); } .live-visitors-card::before{ content:''; position:absolute; inset:0; pointer-events:none; background:radial-gradient(560px 280px at 88% -10%, var(--neon-glow), transparent 70%); } .live-visitors-head{ position:relative; display:flex; flex-wrap:wrap; gap:22px; align-items:flex-end; justify-content:space-between; margin-bottom:26px; } .live-visitors-head h2{ margin:2px 0 8px; } .live-visitors-counter{ display:flex; align-items:baseline; gap:9px; padding:14px 22px; border-radius:999px; background:rgba(255,255,255,.07); border:1px solid var(--neon-glow); box-shadow:0 0 34px var(--neon-glow-soft); white-space:nowrap; } .live-visitors-counter b{ font-family:var(--font-head); font-size:1.9rem; color:#fff; line-height:1; } .live-visitors-counter span{ color:rgba(255,255,255,.72); font-size:.86rem; font-weight:600; } .live-dot{ width:12px; height:12px; border-radius:50%; background:var(--neon); flex-shrink:0; box-shadow:0 0 0 0 var(--neon-glow); animation:live-dot-pulse 1.8s ease-out infinite; } @keyframes live-dot-pulse{ 0%{ box-shadow:0 0 0 0 var(--neon-glow); } 70%{ box-shadow:0 0 0 12px transparent; } 100%{ box-shadow:0 0 0 0 transparent; } } .live-visitors-chart{ position:relative; display:flex; align-items:flex-end; gap:clamp(2px,.6vw,6px); height:150px; padding:10px 6px 0; border-bottom:1px solid rgba(255,255,255,.14); } .live-bar-wrap{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; min-width:0; } .live-bar{ width:100%; max-width:22px; border-radius:6px 6px 2px 2px; background:linear-gradient(180deg,var(--neon) 0%,var(--neon-strong) 100%); box-shadow:0 0 14px var(--neon-glow-soft); transition:height .4s ease; min-height:4px; } .live-bar-label{ margin-top:6px; font-size:.62rem; color:rgba(255,255,255,.5); display:none; } .live-bar-wrap:nth-child(4n+1) .live-bar-label{ display:block; } .live-visitors-note{ position:relative; margin:12px 0 0; color:rgba(255,255,255,.55); font-size:.8rem; } @media (prefers-reduced-motion: reduce){ .live-dot{ animation:none; } } /* ---------- Hírkártya-kép / sablon előnézeti kép (2026-09-05) ---------- Korábban ez a két szabály (.news-card-img / .news-card-img-placeholder) szó szerint duplikálva élt az index.html és a hirek.html saját, oldal- szintű