/* Átlagsebesség.hu — mobilra tervezett műszerfal-felület, sötét és világos témával. A sötét az alap. A világos témát egyetlen blokk írja felül, mert a `js/tema.js` mindig konkrét értéket tesz a ``-be (a rendszerkövetést is feloldja). Így nincs kétszer leírt paletta. */ :root { color-scheme: dark; --bg: #0e0e10; --surface: #17171a; --surface-2: #1f1f24; --border: #2c2c33; --text: #f2f3f5; --muted: #9a9aa4; --accent: #ff6a1f; --accent-ink: #14100c; --danger: #ff5f56; --ok: #3ddc84; --warn: #ffbe4d; --radius: 16px; --kartya-arnyek: none; /* a logó pirosa: márkaszín, témától független */ --marka: #e8332a; /* A státuszsáv a műszerfal jelzőfénye: sötétben mély alapon világít, nem fehér táblaként vakít; nappal fordítva olvas jobban. */ --band-ok-bg: #11301e; --band-ok-ink: #7cecab; --band-ok-keret: #2f6a48; --band-hatar-bg: #33250a; --band-hatar-ink: #ffcd6b; --band-hatar-keret: #7a5a1c; --band-birsag-bg: #3a120f; --band-birsag-ink: #ff8f85; --band-birsag-keret: #83322b; } /* Világos téma. A kontrasztarányok a WCAG AA szintjét tartják a szövegszínekre, a narancs pedig sötétebb, hogy fehéren is olvasson. */ :root[data-theme="light"] { /* Világos alapon a kártyát a lágy vetett árnyék emeli ki, nem a keret: sok vonal helyett rétegek, ettől hat mainak a felület. */ --kartya-arnyek: 0 1px 2px rgba(16, 20, 30, 0.05), 0 6px 16px rgba(16, 20, 30, 0.05); color-scheme: light; --bg: #eef0f5; --surface: #ffffff; --surface-2: #f2f4f8; --border: #d3d6de; --text: #16171a; --muted: #5d5f68; --accent: #d4530b; --accent-ink: #ffffff; --danger: #c62828; --ok: #1a7f45; --warn: #a86400; --marka: #d5211a; --band-ok-bg: #c9f0d4; --band-ok-ink: #0d2a17; --band-ok-keret: #7ed39a; --band-hatar-bg: #ffe6b8; --band-hatar-ink: #3a2a05; --band-hatar-keret: #e0b45f; --band-birsag-bg: #ffd4d1; --band-birsag-ink: #3d0f0c; --band-birsag-keret: #e88a83; } /* Műszer-betű a számoknak. Táblázatos számjegyek: vezetés közben a változó érték nem ugráltatja a körülötte lévő szöveget. Csak latin karakterkészlet, két vastagság, helyben tárolva (~42 KB összesen). JetBrains Mono, OFL licenc — a licenc a vendor/fonts mappában. */ @font-face { font-family: 'Muszer'; src: url('../vendor/fonts/jetbrains-mono-400.woff2') format('woff2'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Muszer'; src: url('../vendor/fonts/jetbrains-mono-700.woff2') format('woff2'); font-weight: 700; font-display: swap; } /* Ahol szám áll, ott azonos szélességű számjegy kell. */ .ora-ertek, .ora-cimke, .ora-egyseg, .ora-cim, .adat-val, .merleg-val, .statusz-fo, .tabla, .limit-jel, .seg-limit strong, .seg-verd, .limit-gomb strong, .eredmeny-adatok dd, .kv dd, .utsav-limit, .utsav-hossz, .kapu-kozep, .big-val, .jog-kulcs strong { font-family: 'Muszer', ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } /* A rendszerbetű számjegyei is legyenek azonos szélességűek. */ body { font-variant-numeric: tabular-nums; } * { box-sizing: border-box; } [hidden] { display: none !important; } html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-text-size-adjust: 100%; } body { display: flex; flex-direction: column; } button, input, select { font: inherit; color: inherit; } /* A böngésző alapértelmezett kékje mindkét témán idegen test. */ a { color: var(--accent); text-underline-offset: 2px; } a.btn, a.chip, a.hirdetes { text-decoration: none; } /* --------------------------------------------------------------- váz */ #topbar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; padding-top: calc(10px + env(safe-area-inset-top, 0px)); background: var(--surface); border-bottom: 1px solid var(--border); } /* A jelkép sötét részei a szövegszínt veszik fel, így mindkét témában megmarad a kontraszt; a piros a márkaszín, az marad. */ #topbar .logo { width: 40px; height: 35px; flex: none; color: var(--text); } /* A szóvédjegy a logó szerint: dőlt, az „átlag” piros, a többi sötét. */ #topbar h1 { flex: 1; margin: 0; font-size: 18px; font-weight: 800; font-style: italic; letter-spacing: -0.4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #topbar .wm-elso { color: var(--marka); } .gps-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 4px 9px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); white-space: nowrap; } .gps-pill .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--muted); } .gps-pill[data-allapot="be"] { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); } .gps-pill[data-allapot="be"] .dot { background: var(--ok); box-shadow: 0 0 6px var(--ok); } .gps-pill[data-allapot="gyenge"] { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); } .gps-pill[data-allapot="gyenge"] .dot { background: var(--warn); } .ikon-gomb { width: 34px; height: 34px; flex: none; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); font: 600 14px/1 Georgia, serif; cursor: pointer; } #main { flex: 1; overflow-y: auto; overscroll-behavior-y: contain; } .pad { padding: 12px; display: flex; flex-direction: column; gap: 12px; } #tabs { display: flex; border-top: 1px solid var(--border); background: var(--surface); padding-bottom: env(safe-area-inset-bottom, 0px); } .tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border: 0; background: none; color: var(--muted); font-size: 12px; cursor: pointer; } .tab .ikon { width: 22px; height: 22px; } .tab.active { color: var(--accent); } /* ------------------------------------------------------------ gombok */ .btn { border: 1px solid var(--border); background: var(--surface-2); border-radius: 12px; padding: 11px 14px; font-weight: 600; cursor: pointer; } .btn.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; } .btn.danger { background: var(--danger); color: #fff; border-color: transparent; } .btn.ghost { background: transparent; } .btn.small { padding: 7px 11px; font-size: 13px; font-weight: 500; } .btn.block { width: 100%; } .btn.grow { flex: 1; } .btn:disabled { opacity: 0.5; cursor: default; } /* a képernyő fő cselekvése: széles, nagybetűs, narancs */ .btn.nagy { width: 100%; padding: 16px; border-radius: 12px; font-size: 16px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; background: var(--accent); color: var(--accent-ink); border: 2px solid var(--accent); } /* futó mérésnél kifordítva: keret marad, a kitöltés eltűnik */ .btn.nagy.stop { background: transparent; color: var(--accent); } .btn-row { display: flex; gap: 8px; flex-wrap: wrap; } /* ------------------------------------------------------------ térkép */ #map { height: 42dvh; min-height: 220px; background: var(--surface-2); z-index: 0; } /* A térkép alatti gombsor tördel, nem görget: oldalra csúsztatva a "Kijelölés törlése" és a nagyítógombok eltűntek a képernyő szélén, vezetés közben pedig senki nem keresi őket görgetéssel. */ .map-tools { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 12px 0; } .map-tools .chip { flex: 1 1 auto; } /* A két kapujelölő mindig egy teljes sort kap: ez a fő művelet. */ #btn-start-jelol, #btn-end-jelol { flex: 1 1 calc(50% - 4px); } /* A nézetgombok keskeny kijelzőn ikonná zsugorodnak. */ .chip-szuk { flex: 0 0 auto; } .chip-szuk .chip-szo { display: none; } @media (min-width: 460px) { .chip-szuk .chip-szo { display: inline; } } .chip { border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 999px; /* függőlegesen bőven: vezetés közben, rázkódó autóban a 33 képpontos gomb kevés volt — a szélességet nem növeljük, hogy a gombsor továbbra is két sorban elférjen. */ padding: 9px 12px; font-size: 13px; white-space: nowrap; cursor: pointer; } .chip[aria-pressed="false"] { opacity: 0.5; } .chip.aktiv { border-color: var(--accent); color: var(--accent); } /* ------------------------------------------ vezetés közbeni nézet Menet közben csak az számít, ami vezetői döntést befolyásol: a pillanatnyi sebesség, a szakaszátlag és a helyi korlátozás. A bírságrészletek, a szakaszlista, a beállítások és az állapotsorok a mérés végén, álló helyzetben olvasandók — futás közben elrejtjük őket, hogy ne vigyék el a figyelmet a műszerről. */ #meres-elo.mer-fut .reszlet, #meres-elo.mer-fut .indulas-elott { display: none !important; } /* Az indulás előtti beállítások a fő gomb alatt: itt még áll az autó. */ .indulas-elott { padding-bottom: 0; } /* A verdikt alatti pontosítás: ne muted szövegként vesszen el, mert épp azt az ellentmondást oldja fel, amit az olvasó lát („semmibe kerül, de a 30-as részen 50 000 Ft”). */ .megjegyzes { display: block; margin-top: 10px; padding: 8px 10px; border-radius: 10px; border: 1px dashed var(--border); background: var(--surface-2); color: var(--text); font-size: 12.5px; line-height: 1.45; text-align: left; } .lista-fej { margin: 0; } .merleg-lbl small { display: block; font-size: 10px; font-weight: 400; opacity: 0.75; letter-spacing: 0; text-transform: none; } /* ------------------------------------------------------ indító nézet */ .hero { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 16px; text-align: center; } .hero h2 { margin: 0 0 8px; font-size: 25px; line-height: 1.2; letter-spacing: -0.4px; } .hero-lead { margin: 0 0 18px; color: var(--muted); font-size: 15px; } .mod-valaszto { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; } .mod { display: flex; align-items: center; gap: 12px; text-align: left; padding: 13px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); cursor: pointer; } .mod:hover { border-color: var(--accent); } .mod-ikon { display: inline-flex; color: var(--accent); } .mod-szoveg { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--muted); } .mod-szoveg strong { font-size: 15px; color: var(--text); } .marka { display: flex; flex-direction: column; gap: 4px; text-align: center; padding: 14px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); } .lepesek { display: flex; flex-direction: column; gap: 10px; font-size: 14px; color: var(--muted); } .lepesek div { display: flex; align-items: center; gap: 10px; } .lepes-szam { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: 13px; font-weight: 700; } /* --------------------------------------------------- szakasz és kapuk */ .szakasz-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 8px; } .szakasz-panel h2 { margin: 0; text-align: center; font-size: 16px; font-weight: 650; } .kapu-sor { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } .kapu-cimke { font-size: 12px; color: var(--muted); white-space: nowrap; } .kapu-kozep { flex: 1; display: flex; flex-direction: column; align-items: center; font-size: 13px; color: var(--muted); line-height: 1.35; } .kapu-kozep span:first-child { color: var(--text); font-weight: 600; } .halado-sor { display: flex; align-items: center; gap: 6px; } .kapu-tick { width: 2px; height: 14px; background: var(--muted); border-radius: 1px; flex: none; } .sav { flex: 1; height: 12px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); position: relative; } .sav-kitolt { position: relative; display: block; height: 100%; width: 0; border-radius: 999px; background: var(--accent); transition: width 0.4s ease; } /* nyílhegy a haladás végén — a mozgás iránya így egy pillantásból látszik */ .sav-kitolt::after { content: ''; position: absolute; right: -7px; top: 50%; transform: translateY(-50%); border-left: 8px solid var(--accent); border-top: 6px solid transparent; border-bottom: 6px solid transparent; } .sav-kitolt[style*="width: 0%"]::after { display: none; } /* ------------------------------------------------------------- óra */ .ora-kartya { align-items: stretch; gap: 12px; } .ora-doboz { position: relative; } /* A műszer színei külön változókban. A minta egy gyári műszeregység: sötét csatornában világító gyűrű, középen nagy fehér szám. Világos témában ugyanezek sötétebbek, hogy fehéren is olvassanak. */ .ora { --m-ok: #21c26a; --m-hatar: #ffab1f; --m-birsag: #f0342b; --m-semleges: #6b6b76; --m-csatorna: color-mix(in srgb, var(--text) 9%, transparent); --m-veszely: color-mix(in srgb, var(--m-birsag) 22%, transparent); --m-vagas: var(--surface); display: block; width: 100%; height: auto; } :root[data-theme="light"] .ora { --m-ok: #0f9a4d; --m-hatar: #c47b00; --m-birsag: #d92b1f; --m-semleges: #9aa0ac; --m-csatorna: color-mix(in srgb, var(--text) 11%, transparent); --m-veszely: color-mix(in srgb, var(--m-birsag) 18%, transparent); } /* a skálagyűrű sötét csatornája: a ki nem világított rész */ .ora-csatorna { stroke: var(--m-csatorna); stroke-width: 12; } /* a bírságos tartomány, mint a fordulatszámmérő vörös mezője */ .ora-veszely { stroke: var(--m-veszely); stroke-width: 12; } /* a világító ív és a fényudvara */ .ora-iv { stroke: var(--m-semleges); stroke-width: 12; transition: stroke-dashoffset 0.5s cubic-bezier(0.16, 1, 0.3, 1); } .ora-iv.udvar { stroke-width: 24; opacity: 0.2; } /* A belső tárcsa: a nagy szám saját mezője, vékony világos kerettel. Ez választja el a számot a skálától, ahogy a gyári műszereken. */ .ora-tarcsa { fill: var(--surface-2); } :root[data-theme="light"] .ora-tarcsa { fill: #ffffff; } .ora-tarcsa-keret { stroke: color-mix(in srgb, var(--text) 30%, transparent); stroke-width: 2; } .ora-iv.ok { stroke: var(--m-ok); } .ora-iv.hatar { stroke: var(--m-hatar); } .ora-iv.birsag { stroke: var(--m-birsag); } /* a gyűrűbe vágott osztásrovátkák: a kártya színével vágunk */ .ora-rovatka { stroke: var(--m-vagas); stroke-width: 1.5; opacity: 0.6; } .ora-cimke { fill: var(--muted); font-size: 13px; font-weight: 600; opacity: 0.85; } .ora-cimke.birsag { fill: var(--m-birsag); opacity: 0.85; } /* A tartható tempó jele: eddig mehetsz. Ez a műszer legfontosabb pontja, ezért világos és van külső csücske is. */ .ora-cel { stroke: var(--text); stroke-width: 3.5; stroke-linecap: round; } .ora-cel-csucs { fill: var(--text); } /* A szakaszátlag ugyanazon a gyűrűn, karikás jellel: a bírság ebből lesz, ezért a bírság szerinti színt viseli. */ .ora-atlagjel { fill: var(--surface); stroke: var(--m-semleges); stroke-width: 3.5; } .ora-atlagjel.ok { stroke: var(--m-ok); } .ora-atlagjel.hatar { stroke: var(--m-hatar); } .ora-atlagjel.birsag { stroke: var(--m-birsag); } /* a világító ív elülső éle, mint a gyári műszeren a fényes perem */ .ora-forgo { transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); } .ora-el { stroke: #ffffff; stroke-width: 3; opacity: 0.85; } :root[data-theme="light"] .ora-el { stroke: #ffffff; opacity: 0.95; } .ora-cim { fill: var(--muted); font-size: 9px; font-weight: 600; letter-spacing: 0.2em; opacity: 0.6; } /* a nagy szám: fehér és testes, ahogy a műszerfalon */ .ora-ertek { fill: var(--text); font-size: 58px; font-weight: 700; letter-spacing: -0.05em; } .ora-ertek.halvany { fill: var(--muted); opacity: 0.45; } .ora-egyseg { fill: var(--muted); font-size: 13px; font-weight: 500; } /* ------------------------------------------- megállás és felfüggesztés */ .szunet-sav { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--warn); background: var(--band-hatar-bg); color: var(--band-hatar-ink); font-size: 13px; line-height: 1.3; } .szunet-sav .btn { flex: none; } .allas-gombok { display: flex; gap: 8px; flex-wrap: wrap; } /* A visszaszámláló csak tájékoztat: válasz nélkül a mérés megy tovább, mert vezetés közben a nem-válasz nem jelenthet beavatkozást. */ .allas-visszaszamlalo { margin: 0; text-align: center; font-size: 13px; color: var(--muted); } .allas-visszaszamlalo strong { display: inline-grid; place-items: center; min-width: 26px; height: 26px; margin-left: 4px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); font-family: 'Muszer', ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text); } /* ------------------------------------------------ sebességprofil */ /* A nulla vonal a helyben érvényes korlátozás: ami fölé megy, azzal többel haladtál. Így a korlátozás váltása nem billenti meg a képet. */ .profil { margin: 0; display: flex; flex-direction: column; gap: 6px; } .profil figcaption { font-size: 13px; font-weight: 650; } /* Nagyításkor a rajz szélesebb vászonra kerül, és ez a doboz görgeti. Valódi úton negyven fölötti korlátozásváltás is lehet: telefon szélességében azok menthetetlenül egymásra csúsznának. */ .profil-vaszon { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } .profil-vaszon svg { display: block; width: 100%; height: auto; } .profil-eszkozok { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; } .profil-nagyitas { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; } .zoom-gomb { border: 0; background: transparent; color: var(--muted); padding: 5px 11px; font-size: 12px; font-weight: 650; cursor: pointer; } .zoom-gomb + .zoom-gomb { border-left: 1px solid var(--border); } .zoom-gomb[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); } /* Teljes képernyős nézet: itt fér ki igazán a hosszú szakasz. */ .profil-lap { position: fixed; inset: 0; z-index: 1200; background: var(--bg); display: flex; flex-direction: column; gap: 10px; padding: calc(10px + env(safe-area-inset-top, 0px)) 12px calc(12px + env(safe-area-inset-bottom, 0px)); } .profil-lap-fejlec { display: flex; align-items: center; justify-content: space-between; gap: 10px; } /* A nagy nézetben a rajz nem nyúlik: a saját arányát tartja, és a maradék helyen függőlegesen középre kerül. Flex elemként zsugorodna, ezért kap `flex: none`-t és automata margót. */ .profil-vaszon.nagy { flex: none; display: block; margin: auto 0; width: 100%; } .pr-racs { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 4; } .pr-nulla { stroke: var(--text); stroke-width: 1.5; opacity: 0.55; } .pr-valtas { stroke: var(--border); stroke-width: 1; stroke-dasharray: 2 3; } .pr-felett { fill: var(--danger); opacity: 0.7; } .pr-alatt { fill: var(--ok); opacity: 0.5; } .pr-vonal { stroke: var(--text); stroke-width: 1.6; opacity: 0.8; stroke-linejoin: round; } .pr-cimke, .pr-limit { fill: var(--muted); font-family: 'Muszer', ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; font-size: 9px; } .pr-limit { opacity: 0.75; } .profil-jel { margin: 0; font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 5px; } .profil-kulcs { width: 11px; height: 11px; border-radius: 3px; display: inline-block; } .profil-kulcs.felett { background: var(--danger); opacity: 0.7; } .profil-kulcs.alatt { background: var(--ok); opacity: 0.5; margin-left: 8px; } /* Sebességkorlátozó tábla a számlap alsó nyílásában, a felirattal egy sorban. Korábban a jobb felső sarokban ült, de a szélesebb skálán ott már a számok futnak. */ /* A tábla és az utasítás a műszer alatt, egy sorban: a tárcsás számlapon belül már nem férnének el. */ .tabla-sav { display: flex; align-items: center; gap: 8px; } /* a kalkulátorban csak a tábla van, az középre kerül */ .result .tabla-sav { justify-content: center; } /* Az utasítás: menet közben ez az egyetlen dolog, amit el kell olvasni. Egy szó és egy szám, színnel megerősítve. */ .utasitas { display: flex; flex-direction: column; align-items: center; line-height: 1.05; margin-left: auto; padding: 5px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); } .utasitas-szo { font-size: 10px; font-weight: 800; letter-spacing: 0.12em; } .utasitas-val { font-family: 'Muszer', ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; font-size: 22px; font-weight: 700; color: var(--text); } .utasitas.lassits { border-color: var(--danger); background: var(--band-birsag-bg); color: var(--band-birsag-ink); } .utasitas.lassits .utasitas-val { color: var(--band-birsag-ink); } .utasitas.tartsd { border-color: var(--warn); background: var(--band-hatar-bg); color: var(--band-hatar-ink); } .utasitas.tartsd .utasitas-val { color: var(--band-hatar-ink); } .utasitas.mehetsz { border-color: var(--ok); background: var(--band-ok-bg); color: var(--band-ok-ink); } .utasitas.mehetsz .utasitas-val { color: var(--band-ok-ink); } .tabla { flex: none; width: clamp(40px, 12vw, 50px); height: clamp(40px, 12vw, 50px); display: grid; place-items: center; border-radius: 999px; background: #ffffff; border: 5px solid #d92b1f; color: #17171a; font-size: clamp(14px, 4.2vw, 18px); font-weight: 800; padding: 0; cursor: pointer; } /* ------------------------------------------------------- státuszsáv */ .statuszsav { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 11px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); text-align: center; } .statusz-fo { font-size: 17px; font-weight: 700; } .statusz-al { font-size: 14px; font-weight: 600; } .statusz-megj { font-size: 13px; opacity: 0.85; } .statuszsav.ok { background: var(--band-ok-bg); color: var(--band-ok-ink); border-color: var(--band-ok-keret); } .statuszsav.hatar { background: var(--band-hatar-bg); color: var(--band-hatar-ink); border-color: var(--band-hatar-keret); } .statuszsav.birsag { background: var(--band-birsag-bg); color: var(--band-birsag-ink); border-color: var(--band-birsag-keret); } /* --------------------------------------------------------- adatrács */ /* A három szám, ami menet közben számít, egy sorban a műszer alatt. A műszer maga a pillanatnyi sebességet mutatja nagyban; ez a sor mondja meg, mihez mérjük, és hol tart a szakaszátlag. */ .ora-adatsor { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 2px; } .oa-cella { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; padding: 8px 4px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); text-align: center; } /* A feliratok két sorig érhetnek; a rögzített magasságtól a három szám akkor is egy vonalba esik, ha az egyik felirat tördelődik. */ .oa-lbl { display: flex; align-items: center; min-height: 2.4em; font-size: 10px; font-weight: 600; line-height: 1.15; color: var(--muted); } .oa-szam { display: flex; align-items: baseline; gap: 3px; } .oa-val { font-family: 'Muszer', ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; font-size: 21px; font-weight: 700; line-height: 1.1; white-space: nowrap; } .oa-egyseg { font-size: 10px; color: var(--muted); } /* A kilométeróra becslése egy sorban a három cella alatt: a cellába nem férne el, és úgyis csak a pillanatnyi értékre vonatkozik. */ .oa-alsor { margin: 0; font-size: 11px; line-height: 1.2; color: var(--muted); text-align: center; } .oa-alsor:empty { display: none; } /* A szakaszátlag a bírság szerinti színt viseli, a pillanatnyi pedig azt, hogy a tartható tempóhoz képest hol tartasz. */ .oa-val.ok { color: var(--ok); } .oa-val.hatar { color: var(--warn); } .oa-val.birsag { color: var(--danger); } @media (max-width: 360px) { .oa-val { font-size: 18px; } .oa-lbl { font-size: 9px; } .oa-egyseg { font-size: 9px; } .oa-cella { padding: 7px 2px; } } .adatracs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } /* Címke fölé, érték alá: egy sorban a hosszabb címke és a mértékegységes érték együtt kilógna a keskeny oszlopból. */ .adatracs div { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); } .adat-lbl { font-size: 11px; color: var(--muted); line-height: 1.2; } .adat-val { font-size: 16px; font-weight: 700; } /* A műszerfalad többet mutat, mint a GPS: az .oa-alsor teszi egyértelművé, hogy nem a mérés téved. */ .projekcio { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); font-size: 14px; text-align: center; } .projekcio.jo strong:last-of-type { color: var(--ok); } .projekcio.rossz strong:last-of-type { color: var(--danger); } /* ------------------------------------------------------------ kártyák */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--kartya-arnyek); padding: 12px; display: flex; flex-direction: column; gap: 10px; } .card-title { margin: 0; font-size: 15px; font-weight: 650; } .card p { margin: 0; } .card ul { margin: 0; } .muted { color: var(--muted); } .small { font-size: 13px; } .center { text-align: center; } .mt { margin-top: 4px; } /* Keskeny kijelzőn a címke és a mező inkább egymás alá kerül, mint hogy a sor túllógjon: 320 px-en a két számmező és a feliratok nem férnek ki. */ .row-between { display: flex; align-items: center; justify-content: space-between; gap: 6px 10px; flex-wrap: wrap; } .inline { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; flex: 1 1 auto; justify-content: flex-end; min-width: 0; } .inline input { width: 84px; min-width: 52px; flex: 0 1 84px; } input[type="number"], select { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; min-width: 0; } /* ------------------------------------------------ kalkulátor eredmény */ .result { align-items: stretch; } .big { text-align: center; padding: 4px 0 0; } .big-val { font-size: 52px; font-weight: 700; line-height: 1; letter-spacing: -1px; } .big-unit { font-size: 18px; color: var(--muted); margin-left: 4px; } .big-lbl { display: block; font-size: 13px; color: var(--muted); margin-top: 4px; } .verdikt { border-radius: 12px; padding: 11px 12px; text-align: center; border: 1px solid var(--border); background: var(--surface-2); } .verdikt.ok { border-color: color-mix(in srgb, var(--ok) 55%, transparent); background: color-mix(in srgb, var(--ok) 14%, transparent); } .verdikt.hatar { border-color: color-mix(in srgb, var(--warn) 55%, transparent); background: color-mix(in srgb, var(--warn) 16%, transparent); } .verdikt.birsag { border-color: color-mix(in srgb, var(--danger) 55%, transparent); background: color-mix(in srgb, var(--danger) 16%, transparent); } /* --------------------------------------------------- eredménykártya */ .eredmeny { border-color: var(--accent); } .eredmeny-cim { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); text-align: center; } .eredmeny-alcim { margin: -6px 0 0; text-align: center; font-size: 14px; font-weight: 600; color: var(--muted); } .eredmeny-adatok { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 7px 12px; font-size: 15px; } .eredmeny-adatok dt { color: var(--muted); } .eredmeny-adatok dd { margin: 0; text-align: right; font-weight: 650; } /* --------------------------------------------------------- szakaszok */ .seglist { display: flex; flex-direction: column; gap: 8px; } .seg { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--border); border-left-width: 4px; border-radius: 10px; background: var(--surface-2); } .seg.ok { border-left-color: var(--ok); } .seg.hatar { border-left-color: var(--warn); } .seg.birsag { border-left-color: var(--danger); } .seg-limit { display: flex; flex-direction: column; align-items: center; min-width: 58px; line-height: 1.1; } .seg-limit strong { font-size: 19px; } .seg-limit span { font-size: 10px; color: var(--muted); } .seg-limit input { width: 62px; text-align: center; padding: 5px 4px; } .seg-info { flex: 1; min-width: 0; font-size: 13px; } .seg-info label { color: var(--muted); display: flex; align-items: center; gap: 5px; min-width: 0; } .seg-info input { width: auto; min-width: 0; flex: 1 1 88px; max-width: 88px; } .seg-verd { font-weight: 650; white-space: nowrap; text-align: right; } .seg-verd.ok { color: var(--ok); } .seg-verd.hatar { color: var(--warn); } .seg-verd.birsag { color: var(--danger); } .seg-torol { border: 0; background: none; color: var(--muted); font-size: 17px; cursor: pointer; padding: 4px 6px; } /* A javítható szakaszsor: az egész sor koppintható, és ez látszódjon is */ .seg.kattinthato { cursor: pointer; } .seg.kattinthato:active { background: var(--surface); } .seg.kattinthato .limit-gomb { pointer-events: none; } .badge { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); } .badge.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 50%, transparent); } /* ----------------------------------------------- haladó beállítások */ .halado { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); } .halado summary { padding: 12px; cursor: pointer; font-weight: 600; list-style: none; } .halado summary::-webkit-details-marker { display: none; } .halado summary::after { content: ' ▾'; color: var(--muted); } .halado[open] summary::after { content: ' ▴'; } .halado-tartalom { padding: 12px 12px 12px; display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--border); } .halado-tartalom p { margin: -4px 0 0; } /* ------------------------------------------------------------ listák */ .kv { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; font-size: 13px; } .kv dt { color: var(--muted); } .kv dd { margin: 0; text-align: right; font-weight: 600; } /* Hosszabb, mondatnyi értékekhez: balra igazítva, nem félkövéren. Keskeny kijelzőn a két hasáb egymás alá kerül. */ .kv.szeles { grid-template-columns: minmax(84px, max-content) 1fr; gap: 8px 14px; } .kv.szeles dd { text-align: left; font-weight: 400; } @media (max-width: 420px) { .kv.szeles { grid-template-columns: 1fr; gap: 2px; } .kv.szeles dd { margin-bottom: 8px; } } .tick { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; } /* Bírságsávok: kategóriánként a két lényeges szám, a részletezés zárva. */ .jog-kat { display: flex; flex-direction: column; gap: 6px; padding: 12px 0; } .jog-kat + .jog-kat { border-top: 1px solid var(--border); } .jog-kat h3 { margin: 0; font-size: 14px; font-weight: 650; } .jog-kulcs { font-size: 14px; color: var(--muted); } .jog-kulcs strong { color: var(--text); } .jog-savok summary { font-size: 13px; color: var(--accent); cursor: pointer; list-style: none; padding: 2px 0; } .jog-savok summary::-webkit-details-marker { display: none; } .jog-savok summary::after { content: ' +'; } .jog-savok[open] summary::after { content: ' -'; } .jog-savok .kv { padding-top: 6px; } /* ------------------------------------------- adatvédelem, impresszum */ /* Külön oldal, saját URL-lel: a hirdetési rendszerek és az áruházak is linkelhető tájékoztatót kérnek, nem egy fülre rejtett szakaszt. */ .jogi { max-width: 720px; margin: 0 auto; padding-bottom: 32px; } .jog-focim { margin: 4px 0 0; font-size: 22px; line-height: 1.2; letter-spacing: -0.4px; } .jog-alcim { margin: 6px 0 0; font-size: 14px; font-weight: 650; } .jogi code { font-size: 12px; word-break: break-all; } /* Itt nevek és címek állnak, nem műszeradatok: nem kell műszer-betű. */ .jogi .kv dd { font-family: inherit; } #topbar .jog-vissza-jel { display: flex; flex: none; color: var(--text); text-decoration: none; } /* Az adatvédelmi blokk saját arca, hogy ne öt egyforma kártya jöjjön. */ .card.kiemelt { background: var(--surface-2); border-left: 4px solid var(--accent); } /* --------------------------------------------------------- hirdetés */ /* Ide kerül majd a hirdetéskód. Amíg nincs hirdető, nem „Hirdetés helye” fejlesztői felirat áll itt, hanem maga az ajánlat: a szaggatott keret így is elmondja, hogy a felület szabad. Fix minimummagassággal foglaljuk a helyet, hogy a betöltődő hirdetés ne ugráltassa a tartalmat. */ .hirdetes { min-height: 100px; display: grid; place-content: center; justify-items: center; gap: 5px; padding: 14px 16px; border: 1px dashed var(--border); border-radius: var(--radius); color: var(--muted); font-size: 12px; text-align: center; text-decoration: none; } .hirdetes strong { font-size: 15px; font-weight: 700; letter-spacing: -0.2px; color: var(--accent); } a.hirdetes:hover strong, a.hirdetes:focus-visible strong { text-decoration: underline; } a.hirdetes:hover, a.hirdetes:focus-visible { border-color: var(--accent); } .leaflet-container { background: var(--surface-2); font: inherit; } .leaflet-control-attribution { font-size: 10px; } /* ------------------------------------------- sebességhatár-választó */ /* A táblára koppintva nyílik; ugyanez a lap szolgálja ki a kalkulátor sorait és a szakaszlistát is, hogy a határ mindenhol egyformán állítható legyen. */ .tabla { font-family: inherit; } .tabla:active { transform: scale(0.96); } /* A tábla melletti felirat: balra igazítva, két sorban is elfér. */ .tabla-sugo { font-size: 10px; line-height: 1.25; color: var(--muted); text-align: left; min-width: 0; } .lap { position: fixed; inset: 0; z-index: 400; display: flex; align-items: flex-end; justify-content: center; } .lap-hatter { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); } .lap-doboz { position: relative; width: 100%; max-width: 520px; background: var(--surface); border: 1px solid var(--border); border-radius: 18px 18px 0 0; padding: 16px 14px calc(16px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 12px; max-height: 85dvh; overflow-y: auto; } .lap-doboz h2 { margin: 0; font-size: 17px; } .lap-doboz > p { margin: -6px 0 0; } .limit-racs { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 10px; } /* a választható értékek maguk is sebességtáblák — így nem kell elolvasni, elég ránézni */ .limit-jel { aspect-ratio: 1; display: grid; place-items: center; border-radius: 999px; background: #ffffff; border: 5px solid #d92b1f; color: #17171a; font-size: 17px; font-weight: 800; cursor: pointer; padding: 0; } .limit-jel.aktiv { outline: 3px solid var(--accent); outline-offset: 2px; } /* kompakt, táblaszerű gomb a kalkulátorsorokban és a szakaszlistában */ .limit-gomb { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 58px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); cursor: pointer; line-height: 1.1; } .limit-gomb strong { font-size: 19px; } .limit-gomb span { font-size: 10px; color: var(--muted); } /* ------------------------------------------------------ témaválasztó */ .tema-valaszto { display: flex; gap: 6px; } .tema-opcio { flex: 1; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 6px; font-size: 13px; font-weight: 600; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); color: var(--muted); cursor: pointer; } .tema-opcio[aria-checked="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } /* -------------------------------------------------- keskeny kijelző */ /* A fejlécben a szóvédjegy a legfontosabb: ha nem fér ki, előbb a „GPS” felirat megy — a pötty magában is megmondja, van-e jel, a jelentése pedig a súgócímkében ott van. 430 px alatt (a mai telefonok zöme) már szükség van rá, mert a nagyobb ikongombok elvennék a helyét. */ @media (max-width: 430px) { .gps-szo { display: none; } /* Csak a pötty marad: vegye fel az ikongombok méretét, hogy a fejléc egyenletes maradjon. */ .gps-pill { padding: 0; width: 34px; height: 34px; justify-content: center; } } /* 360 px alatt a nagybetűs státuszsáv és a szóvédjegy tördelődne. */ @media (max-width: 360px) { #topbar h1 { font-size: 15px; } #topbar { gap: 6px; } #topbar .logo { width: 32px; height: 28px; } /* 320 px-en a szóvédjegy nem fér ki 34-es gombokkal; a WCAG 2.5.8 minimuma 24, ezt a 28 még tartja. */ .ikon-gomb, .gps-pill { width: 28px; height: 28px; } .statusz-fo { font-size: 15px; } .statusz-al { font-size: 13px; } .statusz-megj { font-size: 12px; } .adat-lbl { font-size: 11px; } .adat-val { font-size: 14px; } .btn.nagy { font-size: 15px; padding: 14px; letter-spacing: 0.3px; } .hero h2 { font-size: 22px; } .tema-opcio { flex-direction: column; gap: 3px; font-size: 12px; } } /* A szakaszlistában a „+X km/h” önmagában nem mondja meg, mihez képest. */ .seg-verd small { display: block; font-size: 10px; font-weight: 500; color: var(--muted); } /* ---------------------------------------------- fókusz és mozgásérzék */ /* Billentyűzetes és képernyőolvasós használathoz látható fókuszgyűrű. :focus-visible, hogy egérrel ne villogjon feleslegesen. */ :where(button, a, input, select, summary, [tabindex]):focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; } /* A sebességtáblánál a kör alakot követi a gyűrű. */ .tabla:focus-visible, .limit-jel:focus-visible { outline-offset: 3px; border-radius: 999px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ------------------------------------------------------------- ikonok */ /* Phosphor Icons (MIT), sprite-ként a lap tetején. Egyetlen ikoncsalád emoji helyett: az emoji platformonként máshogy néz ki, és nem veszi fel a téma színét. */ .ikon { width: 1.15em; height: 1.15em; flex: none; fill: currentColor; vertical-align: -0.2em; } .nagy-ikon { width: 28px; height: 28px; } .btn.nagy, .chip, .btn.block, .seg-torol { display: inline-flex; align-items: center; justify-content: center; gap: 8px; } .badge { display: inline-flex; align-items: center; gap: 4px; } .ikon-gomb { display: grid; place-items: center; } .ikon-gomb .ikon { width: 16px; height: 16px; } /* A határlekérés hibája ne vesszen el a halvány segédszövegek között. */ .figyelem { color: var(--warn) !important; } input[type="checkbox"] { width: 24px; height: 24px; accent-color: var(--accent); } /* A némítás vezetés közben egy koppintás legyen, ne a beállítások alól. */ .hang-kapcsolo { align-self: center; } .hang-kapcsolo[aria-pressed="false"] { opacity: 1; color: var(--muted); } .hang-kapcsolo[aria-pressed="true"] { border-color: color-mix(in srgb, var(--accent) 55%, transparent); color: var(--accent); } /* ------------------------------------------------- tapadó fő cselekvés */ /* A mérés indítása és leállítása egyetlen mozdulat legyen: a gomb a lap tetején marad, akkor is, ha a térképig görgetsz. */ .fo-gomb-sav { position: sticky; top: 0; z-index: 30; padding: 10px 12px; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); } /* ------------------------------------------------ kalkulátor: útsáv */ /* A szakasz arányos képe. A szélesség a hossz, a szín az ítélet: egy pillantásból látszik, melyik rész viszi el az egészet. */ /* A sáv szélessége a szakasz hosszát mutatja. Két dolog ronthatja el: egy pár száz méteres rész pár képpontnyi csíkká zsugorodna, sok rész pedig kitolná a sávot a kijelzőből. Ezért minden résznek van egy olvasható minimuma, és ha így sem fér ki, a sáv maga görget: a kártya és az oldal soha nem lóg túl. */ .utsav { display: flex; gap: 3px; height: 46px; border-radius: 10px; max-width: 100%; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; } .utsav::-webkit-scrollbar { display: none; } /* Ha nem fér ki, a jobb szél elhalványul: ennyiből látszik, hogy oldalt folytatódik. A pontos adatok úgyis a lenti listában vannak. */ .utsav.gorgetheto { mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); } .utsav-resz { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 30px; gap: 1px; color: #0d1b12; font-weight: 700; overflow: hidden; border-radius: 3px; } .utsav-resz.ok { background: #35c46a; } .utsav-resz.hatar { background: #ffb020; } .utsav-resz.birsag { background: #ff4d43; color: #2b0906; } .utsav-limit { font-size: 15px; line-height: 1; } .utsav-hossz { font-size: 10px; opacity: 0.8; white-space: nowrap; } /* Szűk részen a hossz lemarad: a levágott „3,0…” félrevezetőbb, mint a puszta korlátozás. A pontos hossz a részletes listában ott marad. */ .utsav-resz.szuk .utsav-hossz { display: none; } .utsav-resz.szuk .utsav-limit { font-size: 13px; } /* ------------------------------------------------ kalkulátor: mérleg */ /* A projekt legjobban megosztható üzenete: mennyi időt nyersz, és mennyibe kerül. Egymás mellett, hogy az arány is látsszon. */ .merleg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .merleg-tetel { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); text-align: center; } .merleg-lbl { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.6px; } .merleg-val { font-size: clamp(17px, 5.2vw, 21px); font-weight: 700; line-height: 1.15; text-wrap: balance; } .merleg-tetel.nyereseg .merleg-val { color: var(--ok); } .merleg-tetel.ar .merleg-val { color: var(--danger); } .merleg-tetel.ar.ingyen .merleg-val { color: var(--ok); } /* Vegyes korlátozásnál a megengedett átlag sehol nincs kitáblázva, ezért nem közúti táblát rajzolunk köré, hanem semleges jelet. */ .tabla.atlagjel { background: var(--surface-2); border-color: var(--accent); color: var(--text); font-size: clamp(12px, 3.6vw, 15px); }