/* ==================== TOKENS — alap + tipográfia ==================== */ /* =================================================================================== RINGFÉNY — 1. TÖREDÉK: TOKENEK, TIPOGRÁFIA, GLOBÁLIS FELÜLETEK Ez a fájl a MEGLÉVŐ stíluslapok UTÁN töltődik. Nem ír át semmit a régiekből, csak felülír. Egy kivételével minden pontosan olyan lesz, mint eddig. ⚠️ A LEGFONTOSABB FELFEDEZÉS (enélkül a fájl nem csinálna semmit): a konzol NEM a :root-ból veszi a színeit. A miatt három meglévő blokk a BODY-ra írja ugyanazokat a változókat: styles.css:1503 body.beta (0,2,1) styles.css:1546 :root:not([data-theme="light"]) body.beta (0,3,2) skin.css:37 body.skin2, body.beta.skin2, :root:not([data-theme="light"]) body.beta.skin2 (0,4,2) A body-ra írt változó KÖZELEBB van minden elemhez, mint a :root — ezért a :root-os felülírás önmagában HATÁSTALAN. Ezért ismételjük meg a teljes paletta-blokkot body-szinten is, pontosan ugyanazzal a szelektor-listával. =================================================================================== */ /* ---------------------------------------------------------------------------------- 1/a. ÉJSZAKA — :root szint (a -nek és mindennek a -n kívül) ---------------------------------------------------------------------------------- */ :root { --bg: #07080d; --bg-2: #0a0c14; --panel: #141a29; --surface: #131826; --surface-2: #1b2234; --line: #2a3247; --line-2: #5b6884; --text: #f4f6fb; --muted: #aab3c9; --muted-2: #8e99b1; --brand-pink: #ff2e8a; --brand-pink-rgb: 255, 46, 138; --grad: linear-gradient(100deg, #ff2e8a, #bf5cff 58%, #8f66ff); --green: #16c784; --green-rgb: 22, 199, 132; --red: #ff3355; --red-rgb: 255, 51, 85; --yellow: #ffb547; --yellow-rgb: 255, 181, 71; --radius: 4px; --radius-sm: 2px; --shadow: 0 22px 52px rgba(0, 0, 0, 0.62); --shadow-soft: 0 8px 22px rgba(0, 0, 0, 0.46); --font: "Space Grotesk", "Segoe UI", system-ui, sans-serif; --font-display: "Oswald", "Space Grotesk", "Segoe UI", system-ui, sans-serif; --font-body: "IBM Plex Sans", "DM Sans", "Segoe UI", system-ui, sans-serif; --font-num: "Chivo Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; --page-bg: radial-gradient(1200px 620px at 50% -10%, rgba(255, 46, 138, 0.055), transparent 62%), #07080d; --focus: #ff5da6; --focus-ring: inset 0 0 0 2px #ff5da6; /* levágott sarkú elemhez: az outline-t a clip-path levágja */ --scroll-thumb: rgba(244, 246, 251, 0.16); --scroll-thumb-hover: rgba(244, 246, 251, 0.30); color-scheme: dark; scrollbar-color: rgba(244, 246, 251, 0.16) transparent; } /* ---------------------------------------------------------------------------------- 1/b. ÉJSZAKA — BODY szint. A szelektor-lista SZÁNDÉKOSAN a skin.css:37 listájának másolata (+ body.beta), hogy minden fajsúly-szinten pontosan legyőzze: azonos fajsúly, de KÉSŐBBI fájl. ---------------------------------------------------------------------------------- */ body.skin2, body.beta, body.beta.skin2, :root:not([data-theme="light"]) body.beta, :root:not([data-theme="light"]) body.beta.skin2 { --bg: #07080d; --bg-2: #0a0c14; --panel: #141a29; --surface: #131826; --surface-2: #1b2234; --field: #0f1421; --line: #2a3247; --line-2: #5b6884; --text: #f4f6fb; --muted: #aab3c9; --muted-2: #8e99b1; /* A pink SZÁNDÉKOSAN egy helyen szól: kiemelés (eyebrow), fókusz, „most fut" tábla. A gombok/menü a gradiens LILA végét kapják, hogy a pink ne kenődjön szét. */ --brand-pink: #ff2e8a; --brand-pink-rgb: 255, 46, 138; --eyebrow: #ff2e8a; --accent: #8f66ff; --accent-2: #bf5cff; --accent-cyan: #ff5da6; --accent-cyan-rgb: 255, 93, 166; /* ez a fókuszgyűrű színe (skin.css:155) */ --ok: #16c784; --live: #16c784; --new: #ff2e8a; --switch-on: #16c784; --switch-on-2: #0f9c66; --switch-off: #3c4661; --grad: linear-gradient(100deg, #ff2e8a, #bf5cff 58%, #8f66ff); --grad-cta: linear-gradient(100deg, #ff2e8a, #bf5cff 58%, #8f66ff); --grad-title: linear-gradient(100deg, #ff2e8a, #bf5cff 58%, #8f66ff); --grad-cyan: linear-gradient(100deg, #ff2e8a, #bf5cff 58%, #8f66ff); --grad-soft: linear-gradient(100deg, rgba(255, 46, 138, 0.14), rgba(143, 102, 255, 0.10)); /* A régi szivárvány-nevekre ~330 szabály hivatkozik. Nem nevezzük át őket, hanem ráhúzzuk a jóváhagyott 5 színre — így a még át nem öltöztetett panelek is a Ringfény-palettát kapják, és VILÁGOS módban sem lesz olvashatatlan tinta. */ --cyan: #8f66ff; --cyan-rgb: 143, 102, 255; --blue: #8f66ff; --blue-rgb: 143, 102, 255; --violet: #bf5cff; --violet-rgb: 191, 92, 255; --pink: #ff2e8a; --pink-rgb: 255, 46, 138; --green: #16c784; --green-rgb: 22, 199, 132; --teal: #16c784; --teal-rgb: 22, 199, 132; --red: #ff3355; --red-rgb: 255, 51, 85; --yellow: #ffb547; --yellow-rgb: 255, 181, 71; --orange: #ffb547; --orange-rgb: 255, 181, 71; --gold: #ffb547; --silver: #aab3c9; --bronze: #d08a52; --radius: 4px; --radius-sm: 2px; --radius-pill: 999px; /* skin.css:120 `--shadow: none`-ra állítja. A Ringfény éjszaka mély árnyékot és halvány akcent-ragyogást használ, nappal valódi lágy vetett árnyékot. */ --shadow: 0 22px 52px rgba(0, 0, 0, 0.62); --shadow-soft: 0 8px 22px rgba(0, 0, 0, 0.46); --glow-accent: 0 8px 24px rgba(255, 46, 138, 0.28); --font: "Space Grotesk", "Segoe UI", system-ui, sans-serif; --font-display: "Oswald", "Space Grotesk", "Segoe UI", system-ui, sans-serif; --font-body: "IBM Plex Sans", "DM Sans", "Segoe UI", system-ui, sans-serif; --font-num: "Chivo Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; --page-bg: radial-gradient(1200px 620px at 50% -10%, rgba(255, 46, 138, 0.055), transparent 62%), #07080d; --focus: #ff5da6; --focus-ring: inset 0 0 0 2px #ff5da6; --scroll-thumb: rgba(244, 246, 251, 0.16); --scroll-thumb-hover: rgba(244, 246, 251, 0.30); /* a color-scheme ÖRÖKLŐDIK: a natív legördülők/görgetősávok emiatt sötétek */ color-scheme: dark; } /* ---------------------------------------------------------------------------------- 2/a. NAPPAL — :root szint ---------------------------------------------------------------------------------- */ :root[data-theme="light"] { --bg: #eceef4; --bg-2: #e4e7ef; --panel: #ffffff; --surface: #ffffff; --surface-2: #f3f5f9; --line: #cfd5e0; --line-2: #9aa2b3; --text: #14151c; --muted: #4a5162; --muted-2: #616878; --brand-pink: #c4005f; --brand-pink-rgb: 196, 0, 95; --grad: linear-gradient(100deg, #d1006b, #8d1fd6 58%, #5b2fd6); --green: #0a7a55; --green-rgb: 10, 122, 85; --red: #d13a3a; --red-rgb: 209, 58, 58; --yellow: #7a4a00; --yellow-rgb: 122, 74, 0; --shadow: 0 1px 2px rgba(20, 21, 28, 0.06), 0 16px 36px rgba(20, 21, 28, 0.13); --shadow-soft: 0 1px 2px rgba(20, 21, 28, 0.05), 0 6px 16px rgba(20, 21, 28, 0.08); --page-bg: #eceef4; --focus: #c4005f; --focus-ring: inset 0 0 0 2px #c4005f; --scroll-thumb: rgba(20, 21, 28, 0.22); --scroll-thumb-hover: rgba(20, 21, 28, 0.38); color-scheme: light; scrollbar-color: rgba(20, 21, 28, 0.22) transparent; } /* ---------------------------------------------------------------------------------- 2/b. NAPPAL — BODY szint. ⚠️ Ez a blokk KÖTELEZŐ: a skin.css:37 listájában a `body.skin2` és a `body.beta.skin2` szelektor VILÁGOS módban IS illeszkedik, tehát a sötét navy értékek ma átszivárognak a világos témába. Itt (0,4,2)-vel visszük vissza. ---------------------------------------------------------------------------------- */ :root[data-theme="light"] body.skin2, :root[data-theme="light"] body.beta, :root[data-theme="light"] body.beta.skin2 { --bg: #eceef4; --bg-2: #e4e7ef; --panel: #ffffff; --surface: #ffffff; --surface-2: #f3f5f9; --field: #ffffff; --line: #cfd5e0; --line-2: #9aa2b3; --text: #14151c; --muted: #4a5162; --muted-2: #616878; --brand-pink: #c4005f; --brand-pink-rgb: 196, 0, 95; --eyebrow: #c4005f; --accent: #5b2fd6; --accent-2: #8d1fd6; --accent-cyan: #c4005f; --accent-cyan-rgb: 196, 0, 95; --ok: #0a7a55; --live: #0a7a55; --new: #c4005f; --switch-on: #0a7a55; --switch-on-2: #086546; --switch-off: #9aa2b3; --grad: linear-gradient(100deg, #d1006b, #8d1fd6 58%, #5b2fd6); --grad-cta: linear-gradient(100deg, #d1006b, #8d1fd6 58%, #5b2fd6); --grad-title: linear-gradient(100deg, #d1006b, #8d1fd6 58%, #5b2fd6); --grad-cyan: linear-gradient(100deg, #d1006b, #8d1fd6 58%, #5b2fd6); --grad-soft: linear-gradient(100deg, rgba(196, 0, 95, 0.09), rgba(91, 47, 214, 0.07)); --cyan: #5b2fd6; --cyan-rgb: 91, 47, 214; --blue: #5b2fd6; --blue-rgb: 91, 47, 214; --violet: #8d1fd6; --violet-rgb: 141, 31, 214; --pink: #c4005f; --pink-rgb: 196, 0, 95; --green: #0a7a55; --green-rgb: 10, 122, 85; --teal: #0a7a55; --teal-rgb: 10, 122, 85; --red: #d13a3a; --red-rgb: 209, 58, 58; --yellow: #7a4a00; --yellow-rgb: 122, 74, 0; --orange: #7a4a00; --orange-rgb: 122, 74, 0; --gold: #7a4a00; --silver: #616878; --bronze: #8a5a2b; /* Csak az a három funkció-szín, ami FEHÉREN megbukna (ikon < 3:1). A többi --fun-* közepes tónus, fehéren is elmegy — azokat nem bántjuk. */ --fun-live: #0a7a55; --fun-live-rgb: 10, 122, 85; --fun-stats: #0a7a55; --fun-stats-rgb: 10, 122, 85; --fun-gold: #7a4a00; --fun-gold-rgb: 122, 74, 0; --fun-game: #a03c00; --fun-game-rgb: 160, 60, 0; --shadow: 0 1px 2px rgba(20, 21, 28, 0.06), 0 16px 36px rgba(20, 21, 28, 0.13); --shadow-soft: 0 1px 2px rgba(20, 21, 28, 0.05), 0 6px 16px rgba(20, 21, 28, 0.08); --glow-accent: 0 6px 18px rgba(20, 21, 28, 0.16); --page-bg: #eceef4; --focus: #c4005f; --focus-ring: inset 0 0 0 2px #c4005f; --scroll-thumb: rgba(20, 21, 28, 0.22); --scroll-thumb-hover: rgba(20, 21, 28, 0.38); color-scheme: light; } /* Fajsúly-megjegyzés: a `--radius`-t a skin.css:1153 (≥981px) és a console-flex.css:108 (≥1101px) MÉDIA-BLOKKBAN írja felül, `body.skin2`-n. A média-lekérdezés nem ad fajsúlyt, ez a fájl pedig később töltődik — így ez az egy sor mindkettőt legyőzi minden ablakméretnél. Külön média-blokk NEM kell. */ body.skin2, body.beta.skin2 { --radius: 4px; --radius-sm: 2px; } /* =================================================================================== 3. GLOBÁLIS FELÜLETEK =================================================================================== */ /* Lap-háttér. Le kell győznie a styles.css:1503 `body.beta { background: … kék tint }` szabályát (0,2,1) és a `[data-theme="light"] body.gamer` (0,3,1) szabályt is. */ body.skin2, body.beta, body.beta.skin2, body.gamer, :root[data-theme="light"] body.gamer { background: var(--page-bg); background-attachment: initial; color: var(--text); font-family: var(--font-body); accent-color: var(--brand-pink); } /* Görgetősáv — a styles.css:83 beégetett `rgba(255,255,255,.14)`-e világosban láthatatlan. Itt tokenre cseréljük, és a hasáb is szögletes lesz (999px → 2px). */ html { scrollbar-color: var(--scroll-thumb) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 2px; border: 2px solid transparent; background-clip: padding-box; } *::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); background-clip: padding-box; } /* a styles.css:1008 `[data-theme="light"] *::-webkit-scrollbar-thumb` (0,2,0) erősebb nálunk */ :root[data-theme="light"] *::-webkit-scrollbar-thumb { background: var(--scroll-thumb); background-clip: padding-box; } :root[data-theme="light"] *::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); background-clip: padding-box; } /* Kijelölés. A styles.css:79 `color: #fff`-et ír — világos módban fehér szöveg halvány tinten = olvashatatlan. Tokenre cseréljük. */ ::selection { background: rgba(var(--brand-pink-rgb), 0.28); color: var(--text); } body.skin2 ::selection, body.beta ::selection { background: rgba(var(--brand-pink-rgb), 0.28); color: var(--text); } /* Fókusz. A skin.css:155 `body.skin2 :focus-visible` (0,2,1) mindent legyőz a body-n belül, ezért ugyanezzel a szelektorral írjuk felül; a `--accent-cyan` átfestésén túl így a lekerekítés is a Ringfény szerinti (6px → 2px). */ body.skin2 :focus-visible, body.beta :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; } body.skin2 .switch input:focus-visible + span, body.beta .switch input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; } /* =================================================================================== 4. TIPOGRÁFIA Mérés: a `--font` a betöltött stíluslapokon KIZÁRÓLAG display-helyeken szerepel (h1–h3, .brand, .hero-title, és számok: .stat-n/.metric-n/.act-n/.pk-stat-n/ .stat-v). Folyószövegen SEHOL — a törzs a `--font-body`-t használja. Ezért az Oswald ide biztonságos. A `--font-display` és a `--font-num` alias azoknak a töredékeknek, amelyek utánunk jönnek. =================================================================================== */ h1, h2, h3 { font-family: var(--font-display); letter-spacing: 0.01em; } /* Halvány másodlagos szöveg. SZÁNDÉKOSAN alacsony fajsúly (0,2,1): a styles.css:1727 `body.beta .start-card .muted { color:#cbd5e1 }` (0,3,1) egy MINDIG SÖTÉT kártyán ül — ha legyőznénk, világos módban olvashatatlanná tennénk. */ body.skin2 .muted { color: var(--muted); } /* A `.small` SZÁNDÉKOSAN nem kap színt: 123 helyen szerepel, sok helyen teljes erősségű szövegen — a globális elhalványítás visszalépés lenne. */ body.skin2 .small { line-height: 1.5; } /* --- SZEKCIÓ-CÍMKE: keskeny, nagybetűs, kifutó vonallal -------------------------- Legyőzendő szabályok: skin.css:916 body.beta.skin2 .view .sec-block .sec-label (0,5,1) color:#dce8fa console-flex.css:56 ugyanaz a szelektor (0,5,1) styles.css:2455 body.beta :is(.view[data-view=…]) .sec-label (0,4,2) background styles.css:1767 body.beta .sec-label (0,2,2) #fff/#2563eb Ezért kell a `.view[data-view]`-os változat is: az (0,5,2). */ body.beta.skin2 .sec-label, body.beta.skin2 .view[data-view] .sec-label, body.beta.skin2 .view .sec-block .sec-label { font-family: var(--font-display); font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text); background: transparent; border: 0; border-radius: 0; padding: 0; box-shadow: none; } /* A kifutó vonal. A .sec-label a skin.css:905 miatt `display:flex`, tehát az ::after flex-elemként kitölti a maradék helyet. (Ha valahol mégis inline-block lenne, egy rövid vízszintes vonalként jelenik meg — nem törik el.) */ body.beta.skin2 .sec-label::after, body.beta.skin2 .view[data-view] .sec-label::after, body.beta.skin2 .view .sec-block .sec-label::after { content: ""; flex: 1 1 auto; display: inline-block; min-width: 24px; height: 1px; vertical-align: middle; background: var(--line); } /* --- EYEBROW: a pink EGYETLEN, szándékos helye a szövegben ---------------------- Legyőzendő: skin.css:423 (--eyebrow #7fb5f9 → fehéren 1,9:1), styles.css:2402 body.beta .live-section .eyebrow (--fun-live #22c55e → fehéren 1,9:1). */ body.beta.skin2 .eyebrow { font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brand-pink); } /* A .start-card egy MINDIG SÖTÉT (#172554) kártya mindkét módban, ezért itt a világos pinket kell hagyni — a nappali #c4005f rajta csak 2,0:1 lenne. */ body.beta.skin2 .start-card .eyebrow { color: #ff5da6; } /* Nem viszünk be új mozgást; ez csak biztosíték, ha egy korábbi réteg animálna. */ @media (prefers-reduced-motion: reduce) { body.skin2 .brand .logo::after { animation: none; } } /* ==================== SHELL — keret + navigáció ==================== */ /* =================================================================================== RINGFÉNY — 2. TERÜLET: HÉJ ÉS NAVIGÁCIÓ (shell fragment) Betöltve MINDEN meglévő stíluslap UTÁN. Semmit nem rejt el, semmit nem mozgat. SZELEKTOR-STRATÉGIA (fontos!) A osztálya ÉLESBEN: "beta skin2 apps-unreleased" — tehát a skin.css `body.skin2 …` (0,2,1) és a styles.css `[data-theme="light"] body.beta …` (0,4,1) szabályai MINDIG aktívak. Az azonos fajsúly + későbbi betöltés csak akkor nyer, ha legalább ugyanannyi osztályt sorolok fel, ezért az alap-előtagom mindenhol `body.beta.skin2`. Ahol ennél mélyebb meglévő szabály van, ott egy szinttel mélyebbre megyek — és odaírom, melyik szabályt kell ütnie. !important sehol nincs. =================================================================================== */ /* ----------------------------------------------------------------------------------- 0. TOKEN-HÍD ⚠️ EZT A BLOKKOT TÖRÖLD, HA A „tokens" FRAGMENS MÁR KEZELI. A skin.css:37-139 a TELJES palettát a -ra teszi (`body.skin2, body.beta.skin2, :root:not([data-theme="light"]) body.beta.skin2`). Egy body-ra írt custom property MINDIG üti a -ről öröklöttet — fajsúlytól függetlenül, mert más elem. Ezért egy tisztán `:root { … }` token-blokknak NULLA hatása lenne a konzol belsejére. Az `inherit` visszaadja a szót a :root-nak. A második szelektor a világos ág: ott a `:root:not([data-theme="light"])` nem illeszkedik, így a skin.css `body.skin2` (sötét navy) értékei maradnának bent. ----------------------------------------------------------------------------------- */ :root:not([data-theme="light"]) body.beta.skin2, :root[data-theme="light"] body.beta.skin2 { --bg: inherit; --bg-2: inherit; --panel: inherit; --surface: inherit; --surface-2: inherit; --line: inherit; --line-2: inherit; --text: inherit; --muted: inherit; --muted-2: inherit; --brand-pink: inherit; --grad: inherit; --green: inherit; --red: inherit; --yellow: inherit; } /* ----------------------------------------------------------------------------------- 1. HÉJ-SZINTŰ TIPOGRÁFIA ÉS ALAK A betűcsaládok NEM töltődnek le maguktól: az index.html -jébe kell egy Google-Fonts (Oswald, IBM Plex Sans, Chivo Mono). Amíg nincs, a lentebbi tartalék-készlet (Space Grotesk / DM Sans) fut — a felület akkor sem törik el. ----------------------------------------------------------------------------------- */ body.beta.skin2 { /* Csak a héj használja őket; nem paletta-token, ütközés nélkül él a többi fragmenssel. */ --pk-display: "Oswald", "Space Grotesk", "Segoe UI Semibold", system-ui, sans-serif; --pk-body: "IBM Plex Sans", "DM Sans", "Segoe UI", system-ui, sans-serif; --pk-num: "Chivo Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* Levágott jobb felső sarok — a kártyák/hero-k aláírása. */ --pk-notch: 14px; font-family: var(--pk-body); } /* A fókuszgyűrű ma cián (#18b8fc): fehér háttéren 1,9:1 — láthatatlan lenne nappali módban. Üti: skin.css:155 `body.skin2 :focus-visible` (0,2,1). */ body.beta.skin2 :focus-visible { outline: 2px solid var(--brand-pink); outline-offset: 2px; } /* ----------------------------------------------------------------------------------- 2. BAL MENÜSÁV — a keret Üti: skin.css:189 (#101b28 keret) és skin.css:1166 (@min-width:981px, #050e1b + kék radiális derengés). Mindkettő beégetett sötét érték → nappali módban fekete csík egy világos sávon. ----------------------------------------------------------------------------------- */ body.beta.skin2 .sidenav { background: var(--bg-2); border-inline-end: 1px solid var(--line); } /* Márkajel: kemény geometria, egy levágott sarokkal. A sarok levágása biztonságos, mert a .logo egy span, nincs kilógó gyereke, és nem ő kapja a fókuszgyűrűt (az a szülő -en jelenik meg). Üti: skin.css:1180 `body.skin2 .sidenav .brand .logo` (0,4,1) → nekem (0,5,1) kell. */ body.beta.skin2 .sidenav .brand .logo { border-radius: 2px; background: var(--brand-pink); box-shadow: none; font-family: var(--pk-display); font-weight: 600; letter-spacing: 0; /* Éjjel sötét betű a világító pinken (6:1); nappal fehér a mély pinken (7,7:1). */ color: #07080d; clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%); } :root[data-theme="light"] body.beta.skin2 .sidenav .brand .logo { color: #ffffff; } body.beta.skin2 .sidenav .brand-word { font-family: var(--pk-display); font-weight: 500; text-transform: uppercase; letter-spacing: .1em; color: var(--text); } /* ----------------------------------------------------------------------------------- 3. MENÜPONTOK — aktív sor = AKCENT-SÍN, nem kitöltött pirula Üti: skin.css:1197 (@981: #653176 keret + kék-lila gradiens + inset #348cff) és styles.css:1614 / :2347 `[data-theme="light"] body.beta .nav-item.active` (0,4,1), ami világos módban KÉK-re (#2563eb) festené az aktív sort. ----------------------------------------------------------------------------------- */ body.beta.skin2 .nav-item { border-radius: 2px; border-color: transparent; font-family: var(--pk-body); font-weight: 500; letter-spacing: 0; color: var(--muted); /* 40 px-es érintőfelület a mobil fiókban és a keskeny sávban is. */ min-height: 40px; } body.beta.skin2 .nav-item:hover { color: var(--text); background: var(--surface); box-shadow: inset 3px 0 0 var(--line-2); } body.beta.skin2 .nav-item.active { color: var(--text); font-weight: 600; border-color: transparent; /* Halvány pink mosás + 3 px-es sín az elülső élen. A sín box-shadow, nem ::before, mert a skin.css:1202 a ::before-t asztali méretben kikapcsolja (display:none). */ background: color-mix(in srgb, var(--brand-pink) 9%, transparent); box-shadow: inset 3px 0 0 var(--brand-pink); } /* Az ikon a menüben ma csatornánként külön funkciószínt kap (inline `--nav`), ami nappali módban 2:1 körüli kontrasztokat ad (pl. --fun-remote #18b8fc fehéren). A jóváhagyott irány szerint a pink EGY helyen szól: itt az aktív soron. A `color` közvetlen beállítása üti a skin.css `color: var(--nav, …)` értékét — az inline style csak a `--nav` változót állítja, magát a color-t nem. */ body.beta.skin2 .nav-item .nav-ic { border-radius: 2px; background: transparent; box-shadow: none; color: var(--muted-2); } body.beta.skin2 .nav-item:hover .nav-ic { color: var(--text); background: transparent; } body.beta.skin2 .nav-item.active .nav-ic { color: var(--brand-pink); background: transparent; box-shadow: none; } /* A külső célok (Távvezérlő, Játék) másodlagosak: egy fokkal halkabb ikon. */ body.beta.skin2 .nav-item.nav-external .nav-ic { color: var(--muted-2); opacity: .8; } body.beta.skin2 .nav-item.nav-external:hover .nav-ic { opacity: 1; } /* „ÚJ" jelvény. Ma #fff a #ec4899-en = 3,4:1 — 8-10 px-es szövegnél bukó érték. Éjjel sötét betű a világító pinken, nappal fehér a mély pinken: mindkettő 6:1 fölött. */ body.beta.skin2 .nav-badge { border-radius: 2px; background: var(--brand-pink); color: #07080d; font-family: var(--pk-display); font-weight: 500; text-transform: uppercase; letter-spacing: .08em; } :root[data-theme="light"] body.beta.skin2 .nav-badge { color: #ffffff; } /* Elválasztó: a rövid pink bevezető után kifutó vonal — ugyanaz a „kifutó vonal" nyelvtan, mint a szekció-feliratoknál. */ body.beta.skin2 .nav-sep { background: linear-gradient(90deg, var(--brand-pink) 0 18px, var(--line) 18px); } /* ----------------------------------------------------------------------------------- 4. A SÁV ALJA — csomagkártya, felhasználó, kerek gombok ----------------------------------------------------------------------------------- */ /* Üti: skin.css:1214 (@981) `body.skin2 .plan-card` — beégetett rgba(18,30,51,.98). */ body.beta.skin2 .plan-card { border-radius: 2px; border: 1px solid var(--line); background: var(--surface); } body.beta.skin2 .plan-card .plan-ic { border-radius: 2px; background: var(--surface-2); color: var(--muted); } body.beta.skin2 .plan-card b { font-family: var(--pk-display); font-weight: 500; text-transform: uppercase; letter-spacing: .06em; color: var(--text); } body.beta.skin2 .plan-card small { color: var(--muted); } /* A „Profil" gomb ma kék→lila gradiens (#2d68ff→#8c2ce8) fehér szöveggel: harsány, és nem is a paletta színe. Halk, kontúros gomb lesz — a hangos elem a futó adás sávja. */ body.beta.skin2 .plan-manage { border-radius: 2px; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--text); box-shadow: none; font-family: var(--pk-display); font-weight: 500; text-transform: uppercase; letter-spacing: .07em; } body.beta.skin2 .plan-manage:hover { filter: none; border-color: var(--brand-pink); color: var(--text); } /* Az avatár-gyűrű ma cián; nappal alig látszik. */ body.beta.skin2 .who-av { box-shadow: 0 0 0 1px var(--line-2); border-radius: 2px; } body.beta.skin2 .who-name { color: var(--text); font-weight: 600; } /* Üti: skin.css:311 — a #bcd2ff világos kék betű fehér háttéren 1,9:1. */ body.beta.skin2 .who-badge { border-radius: 2px; background: var(--surface-2); color: var(--muted); font-family: var(--pk-display); font-weight: 500; text-transform: uppercase; letter-spacing: .06em; } /* A VIP-rang aranyát SZÁNDÉKOSAN nem bántom: rangjelzés, és a majdnem fekete betű mindkét módban 9:1 fölött van rajta. */ body.beta.skin2 .round-btn { /* skin.css:1240 (@981) 38 px-re húzza; a szabály 40 px-es érintőfelületet ír elő. */ width: 40px; height: 40px; min-width: 40px; border-radius: 2px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); } body.beta.skin2 .round-btn:hover { color: var(--text); border-color: var(--brand-pink); background: var(--surface-2); } body.beta.skin2 .side-lang .lang-btn { width: 40px; height: 40px; min-width: 40px; border-radius: 2px; border: 1px solid var(--line); background: var(--surface); } body.beta.skin2 .side-legal a { color: var(--muted); } body.beta.skin2 .side-version { font-family: var(--pk-num); color: var(--muted-2); opacity: 1; letter-spacing: .14em; } /* ----------------------------------------------------------------------------------- 5. FELSŐ SÁV Üti: skin.css:349 (#111a25 keret) és skin.css:1246 (@981 rgba(5,14,27,.96) háttér). FIGYELEM: a .topbar-ra SOHA nem teszünk overflow/clip-path értéket — benne van a kereső legördülője (.topbar-search-results, position:absolute), levágná. ----------------------------------------------------------------------------------- */ body.beta.skin2 .topbar { background: var(--bg-2); border-bottom: 1px solid var(--line); backdrop-filter: none; } body.beta.skin2 .topbar-burger { border-radius: 2px; border: 1px solid var(--line); background: var(--surface); color: var(--text); } /* Üti: console-flex.css:1625 `body.skin2 .topbar-search` (0,2,1) — a #0b1524 fix sötét. */ body.beta.skin2 .topbar-search { border-radius: 2px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); } body.beta.skin2 .topbar-search input { color: var(--text); } body.beta.skin2 .topbar-search input::placeholder { color: var(--muted-2); } body.beta.skin2 .topbar-search kbd { border-radius: 2px; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--muted); font-family: var(--pk-num); } /* Üti: console-flex.css:1630 `body.skin2 .topbar-search:focus-within` (0,3,1). */ body.beta.skin2 .topbar-search:focus-within { border-color: var(--brand-pink); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--brand-pink); } body.beta.skin2 .topbar #channelSelect { border-radius: 2px; border: 1px solid var(--line); background: var(--surface); color: var(--text); } body.beta.skin2 .decor-ic { border-radius: 2px; color: var(--muted-2); } body.beta.skin2 .decor-ic:hover { background: var(--surface); color: var(--text); } /* Üti: console-flex.css:1586 `body.skin2 button.topbar-profile` (0,2,2) → (0,3,2) kell. A cián keret/ikon nappal 1,9:1; semleges lesz, a pink a futó adásnak marad. */ body.beta.skin2 button.topbar-profile { border-radius: 2px; border: 1px solid var(--line-2); background: var(--surface); color: var(--text); font-family: var(--pk-display); font-weight: 500; text-transform: uppercase; letter-spacing: .07em; } body.beta.skin2 button.topbar-profile i { color: var(--muted); } body.beta.skin2 button.topbar-profile:hover { border-color: var(--brand-pink); background: var(--surface-2); } /* ----------------------------------------------------------------------------------- 6. „MOST MEGY AZ ADÁS" — a FORDÍTOTT TÁBLA Ez a héj egyetlen hangos eleme. Nyugalmi (offline) állapotban halk csempe; amint a #sideDot megkapja az `.on` osztályt, a pirula tömör táblává vált. A :has() már ma is fut a kódbázisban (skin.css:925), a LIVE Studio Chromiumja tudja. Fajsúly: (0,5,1) — bőven a skin.css:734 (0,2,1) és a @981-es blokk fölött. ----------------------------------------------------------------------------------- */ body.beta.skin2 .live-pill { border-radius: 2px; border: 1px solid var(--line); background: var(--surface); } body.beta.skin2 .live-pill-label { font-family: var(--pk-display); font-weight: 500; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); } body.beta.skin2 .live-pill .dot-live { border-radius: 0; } body.beta.skin2 .live-pill:has(.dot-live.on) { border-color: #ff5da6; /* A sötét vég van ELÖL, mert a szöveg balra ül: a #f6d7e6 alszöveg így 5,7:1, a fehér főfelirat 7,5:1. A megadott két arcszín-végpont változatlan. */ background: linear-gradient(100deg, #8f1f66, #c0327d); box-shadow: 0 0 0 1px #ff5da6, 0 0 22px rgba(255, 93, 166, .28); } body.beta.skin2 .live-pill:has(.dot-live.on) .live-pill-label { color: #ffffff; } body.beta.skin2 .live-pill:has(.dot-live.on) .dot-live.on { background: #ffffff; box-shadow: none; } body.beta.skin2 .live-pill:has(.dot-live.on) .side-countdown, body.beta.skin2 .live-pill:has(.dot-live.on) .side-cap-note { color: #f6d7e6; } /* NAPPAL: fekete tábla, pinken izzó számmal — reptéri kijelző. Fajsúly (0,6,1), így a fenti éjszakai blokkot is üti. */ :root[data-theme="light"] body.beta.skin2 .live-pill:has(.dot-live.on) { border-color: #14151c; background: linear-gradient(100deg, #22242f, #14151c); box-shadow: 0 0 0 1px #14151c; } :root[data-theme="light"] body.beta.skin2 .live-pill:has(.dot-live.on) .live-pill-label { color: #ff6fb0; } :root[data-theme="light"] body.beta.skin2 .live-pill:has(.dot-live.on) .dot-live.on { background: #ff6fb0; } :root[data-theme="light"] body.beta.skin2 .live-pill:has(.dot-live.on) .side-countdown, :root[data-theme="light"] body.beta.skin2 .live-pill:has(.dot-live.on) .side-cap-note { color: #c9cdd8; } /* A visszaszámláló SZÁM: ez a héj leghangosabb adata. A --warning nincs sehol definiálva, ezért ma a styles.css:479 tartaléka (#f5b301) fut — fehér sávon 2:1. */ body.beta.skin2 .live-pill .side-countdown, body.beta.skin2 .live-pill .side-cap-note { font-family: var(--pk-num); font-variant-numeric: tabular-nums; font-weight: 600; color: var(--muted); } body.beta.skin2 .live-pill-btn { /* 29 px volt asztali méretben; 36 px már használható érintőfelület a 40 px-es pirulában. */ width: 36px; height: 36px; border-radius: 2px; background: var(--brand-pink); color: #07080d; } :root[data-theme="light"] body.beta.skin2 .live-pill-btn { color: #ffffff; } body.beta.skin2 .live-pill:has(.dot-live.on) .live-pill-btn { background: rgba(255, 255, 255, .16); color: #ffffff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4); } :root[data-theme="light"] body.beta.skin2 .live-pill:has(.dot-live.on) .live-pill-btn { background: #ff6fb0; color: #14151c; box-shadow: none; } /* ----------------------------------------------------------------------------------- 7. OLDALNYITÓ SÁVOK (HERO) — lehalkítva A tulaj panasza: „a lapok kiabálnak". Három forrása van, mindhármat itt oltjuk: a lila/pink radiális derengés a háttérben, a gradiensbe öntött cím, és az illusztráció köré tett fény-szórás. A MÉRETEKHEZ nem nyúlok (a főoldali hero asztali méretben fix 271 px magas, és a .hero-health abszolút pozícióban ül benne). ----------------------------------------------------------------------------------- */ /* Üti: skin.css:702 és skin.css:756 `body.skin2 .hero` (0,2,1). A clip-path biztonságos: a .hero-nak már ma is overflow:hidden a beállítása. */ body.beta.skin2 .hero { background: var(--panel); border: 1px solid var(--line); /* A pink vonal BORDER, nem inset box-shadow: a főoldali hero ::after fátyla `inset:0`, ami a PADDING-dobozhoz igazodik, tehát a keretet nem takarja el. A globális `* { box-sizing: border-box }` (styles.css:41) miatt a 2 px nem növeli a magasságot. */ border-top: 2px solid var(--brand-pink); border-radius: 2px; clip-path: polygon(0 0, calc(100% - var(--pk-notch)) 0, 100% var(--pk-notch), 100% 100%, 0 100%); } /* Üti: skin.css:1291 (@981) `body.skin2 .overview-page .hero-home` (0,3,1) — #091426. */ body.beta.skin2 .overview-page .hero-home { background: var(--panel); } /* A főoldali hero fölé tett sötétítő fátyol a fekvő kép miatt kell — nappal viszont sötét foltot hagyna a fehér kártyán, ezért világos módban világos fátyol. */ :root[data-theme="light"] body.beta.skin2 .overview-page .hero-home::after { background: linear-gradient(90deg, var(--panel) 0%, color-mix(in srgb, var(--panel) 96%, transparent) 27%, color-mix(in srgb, var(--panel) 55%, transparent) 51%, transparent 78%); } /* Szekció-felirat: keskeny nagybetűs felirat, belőle kifutó vonallal. Csak a hero-n belül — a .eyebrow máshol más ügynök területe. A display:flex itt biztonságos: a .eyebrow sima szöveg-doboz (egy helyen egyetlen .nav-badge span van benne), nem rács- vagy flex-konténer. */ body.beta.skin2 .hero .eyebrow { display: flex; align-items: center; gap: 10px; font-family: var(--pk-display); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: .18em; color: var(--brand-pink); } body.beta.skin2 .hero .eyebrow::after { content: ""; flex: 1 1 auto; max-width: 180px; height: 1px; background: linear-gradient(90deg, var(--brand-pink), transparent); } /* A cím ma gradiensbe van vágva (background-clip:text + color:transparent) — ez a „kiabálás" fő forrása, és nappal kiszámíthatatlan kontrasztot ad. Üti: skin.css:865 `body.skin2 .hero-home .hero-title` (0,3,1) → nekem (0,4,1) kell. */ body.beta.skin2 .hero-title, body.beta.skin2 .hero-home .hero-title { background: none; -webkit-background-clip: border-box; background-clip: border-box; -webkit-text-fill-color: currentColor; color: var(--text); font-family: var(--pk-display); font-weight: 600; letter-spacing: -.005em; line-height: 1.1; } body.beta.skin2 .hero-lead, body.beta.skin2 .hero-subtitle { color: var(--muted); font-family: var(--pk-body); } body.beta.skin2 .hero-copy { min-width: 0; } body.beta.skin2 .hero-actions { gap: 10px; } /* Az illusztrációk köré tett fény-szórás megy; a kép maga érintetlen marad (SEMMIT nem rejtünk el — csak a glóriát vesszük le róla). */ body.beta.skin2 .hero-art.hero-portal { filter: none; } body.beta.skin2 .apps-page .hero-apps .hero-art { filter: none; } /* Hero-chipek: ma rgba(255,255,255,.04) háttér — fehér alapon LÁTHATATLAN. */ body.beta.skin2 .feature-chip { border-radius: 2px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); font-family: var(--pk-body); } body.beta.skin2 .feature-chip i { color: var(--brand-pink); } /* Ugyanez a widget-hero jellemző-listájában (--eyebrow = #7fb5f9, fehéren 2,1:1). */ body.beta.skin2 .widget-hero-features > span > i, body.beta.skin2 .widget-hero-features > span .ic { color: var(--brand-pink); } body.beta.skin2 .widget-hero-features b { color: var(--text); } body.beta.skin2 .widget-hero-features small { color: var(--muted); } /* Üti: skin.css:1094 — a #d8e1ef világos szürkéskék fehér alapon 1,4:1. */ body.beta.skin2 .hero-checks { color: var(--muted); } body.beta.skin2 .hero-checks i { color: var(--green); } /* Az adás-állapot doboz a hero-képre ül, ezért MINDKÉT módban sötét marad (a kép alatta világos is lehet). A betűszínek tokenről beégetettre cserélve NEM javulnának, ezért itt szándékosan fix, magas kontrasztú értékek maradnak — csak a keret és a funkciószínek kerülnek egy nyugodtabb, egységes hangra. */ body.beta.skin2 .hero-health { border-radius: 2px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(7, 8, 13, .78); } body.beta.skin2 .hero-health b { color: #ffffff; } body.beta.skin2 .hero-health small { color: #c9cdd8; } body.beta.skin2 .hero-health i, body.beta.skin2 .hero-health span:nth-child(2) i, body.beta.skin2 .hero-health span:nth-child(3) i, body.beta.skin2 .hero-health span:nth-child(4) i { border-radius: 2px; color: #ff8ec2; background: rgba(255, 46, 138, .18); } /* ----------------------------------------------------------------------------------- 8. SZAKASZ-VÁLTÓ FÜLEK (.seg / .seg-btn) Ezek role="tab" vezérlők (Statisztika: Egy adás / Összkép; Ajándék-szabály típusok; Ajándékfal: feltöltés / meglévő) — navigáció, ezért itt vannak. Üti: styles.css:1046 `[data-theme="light"] .seg-btn.active` (0,3,0) → (0,4,1) kell. ----------------------------------------------------------------------------------- */ body.beta.skin2 .seg { border-radius: 2px; border: 1px solid var(--line); background: var(--surface); padding: 2px; gap: 2px; } body.beta.skin2 .seg-btn { border-radius: 2px; color: var(--muted); font-family: var(--pk-display); font-weight: 500; text-transform: uppercase; letter-spacing: .08em; min-height: 40px; } body.beta.skin2 .seg-btn:hover { color: var(--text); } body.beta.skin2 .seg-btn.active { background: var(--brand-pink); color: #07080d; box-shadow: none; } :root[data-theme="light"] body.beta.skin2 .seg-btn.active { color: #ffffff; } /* ----------------------------------------------------------------------------------- 9. MOZGÁS-CSÖKKENTÉS Saját animációt nem vezettem be; ez a meglévő márka-lüktetés és LIVE-pulzus biztosítéka arra az esetre, ha a héj-réteg valamelyik szabálya visszahozná őket. ----------------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { body.beta.skin2 .brand .logo::after, body.beta.skin2 .live-pill .dot-live.on { animation: none; } body.beta.skin2 .nav-item { transition: none; } } /* ==================== PANELS — panelek + kártyák ==================== */ /* =================================================================================== RINGFÉNY — 3. TERÜLET: PANELEK, KÁRTYÁK, SZEKCIÓ-SZERKEZET ----------------------------------------------------------------------------------- Ez a töredék LEGUTOLJÁRA töltődik be. Két dolgot kell tudni róla: 1) A . Ezért a skin.css / console-flex.css szabályai `body.skin2 .valami` alakúak (0,2,1), a puszta `.valami` (0,1,0) SOSEM ütné őket. Minden szabályom ezért `body.skin2`-vel kezdődik — nem a specificitás felverése miatt, hanem hogy PONTOSAN egyezzen a meglévővel, és a betöltési sorrend döntsön. 2) A `.panel` NEM kap levágott sarkot. A panelek legördülőket tartalmaznak (`.voice-picker-menu`, `.lang-menu` — lásd styles.css:259-261), a clip-path pedig levágná őket. A levágott sarok a KÁRTYÁKRA megy (`.vid-card`, `.effect-card`), pontosan ahogy az irány kéri: „spend it". Ugyanezért nincs clip a `.sec-block`-on sem: a felolvasó-oldalon hangválasztó legördülő ül benne. =================================================================================== */ /* --- A „FUT MOST" TÁBLA (slab) SAJÁT VÁLTOZÓI ------------------------------------ Nem a globális token-blokk: `--rf-` előtaggal saját, komponens-szintű változók, hogy a tábla mindkét módban EGY szabálykészletből éljen. Éjjel világos rózsaszín tábla izzik a sötétben; nappal fekete tábla, rózsaszínen izzó számmal (reptéri tábla). */ body.skin2 { --rf-slab-face: linear-gradient(150deg, #c0327d, #8f1f66); --rf-slab-edge: #ff5da6; --rf-slab-num: #ffffff; --rf-slab-sub: #f6d7e6; --rf-slab-glow: 0 0 0 1px #ff5da6, 0 14px 38px rgba(255, 93, 166, 0.26); } /* (0,3,1) — üti a fenti (0,1,1)-et. */ :root[data-theme="light"] body.skin2 { --rf-slab-face: linear-gradient(150deg, #22242f, #14151c); --rf-slab-edge: #14151c; --rf-slab-num: #ff6fb0; --rf-slab-sub: #c9cdd8; --rf-slab-glow: 0 0 0 1px #14151c, 0 14px 34px rgba(20, 21, 28, 0.22); } /* =================================================================================== 1. PANEL — kemény sarok, tömör felület, hajszálvékony felső él =================================================================================== */ /* ÜTI: skin.css:393-402 (body.skin2 .panel) és skin.css:701-710, ahol a panel háttere BEÉGETETT #101a2b, kerete #22304a. Nappali módban az a sötét navy kártya sötét szöveggel = olvashatatlan. Innentől a felület token-vezérelt. */ body.skin2 .panel { background: var(--panel); border: 1px solid var(--line); border-radius: 2px; box-shadow: none; backdrop-filter: none; } body.skin2 .panel:hover { border-color: var(--line-2); /* ÜTI: styles.css:1646 `body.beta .panel:hover { box-shadow: var(--shadow-soft) }` — a lapos, eredménykijelzős karakterhez nem kell lebegő árnyék. */ box-shadow: none; } /* Hajszálél a kártya tetején. Éjjel fényt fog, nappal tömör vonal = keret. */ body.skin2 .panel::before { /* KÉT szabály kapcsolta ki: skin.css:401 `content: none` ÉS styles.css:1652 `body.beta .panel::before { display: none }` (0,2,2) — mindkettőt vissza kell venni. */ content: ""; display: block; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), transparent); } :root[data-theme="light"] body.skin2 .panel::before { background: var(--line-2); } /* A kiemelt „gyári videók" panel: ugyanaz a kemény geometria, de a jelzés a palettából. */ body.skin2 .panel-defaults { border-color: color-mix(in srgb, var(--brand-pink) 34%, var(--line)); background: color-mix(in srgb, var(--brand-pink) 5%, var(--panel)); box-shadow: none; } /* Panel-fejléc: kondenzált, NAGYBETŰS felirat. A `.panel-head` FLEX konténer marad (display-hez nem nyúlok), csak a tipográfia változik. */ body.skin2 .panel-head h2, body.skin2 .panel-head h3, body.skin2 .rail-live h3 { font-family: var(--font-display, "Oswald", "Space Grotesk", system-ui, sans-serif); font-weight: 600; letter-spacing: 0.045em; text-transform: uppercase; color: var(--text); } /* console-flex.css:44 és :49 méretei maradnak — csak a betűtípust/nagybetűt írom felül. */ body.skin2 .panel-note { color: var(--muted); } body.skin2 .panel-note b { color: var(--text); } /* Figyelmeztető jegyzet: bal oldali kemény vonal, sarok nélkül. */ body.skin2 .panel-note.warn { border-left: 2px solid var(--yellow); border-radius: 0; padding-left: 12px; } /* =================================================================================== 2. SZEKCIÓ-SZERKEZET — .sec-block csempe + .sec-label felirat kifutó vonallal =================================================================================== */ /* ÜTI: skin.css:896-903 — ott a háttér BEÉGETETT `rgba(5,14,27,.32)`, ami nappal szürke fátyol a fehér panelen. */ body.skin2 .sec-block, body.beta.skin2 .sec-block { background: var(--surface-2); border: 1px solid var(--line); border-radius: 2px; box-shadow: none; } /* A szekció-felirat: kondenzált nagybetű + a feliratból KIFUTÓ hajszálvonal. A `.sec-label` a skin.css:905 óta `display:flex` — a ::after így flex-elem lesz és kitölti a maradék szélességet. Displayhez nem nyúlok. ÜTI: skin.css:905-911 ÉS skin.css:915-919 (`body.beta.skin2 .view .sec-block .sec-label`, 0,5,1) — ott a szín BEÉGETETT #dce8fa, ami nappal fehéren fehér. */ body.skin2 .sec-label, body.beta.skin2 .view .sec-block .sec-label { color: var(--text); font-family: var(--font-display, "Oswald", "Space Grotesk", system-ui, sans-serif); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; background: transparent; border: 0; border-radius: 0; box-shadow: none; } body.skin2 .sec-label::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--line); } /* A Videók-hub kék/sárga csempe-színezései a styles.css-ben ID-specificitással ülnek (`body.beta #videoHub .sec-block:nth-of-type(n)`, 1,3,1). A #videoHub elemnek NINCS osztálya, ezért az ID-t itt szabad használni (6. szabály). A színes tapéta helyett marad a semleges csempe + egy kemény, színes BAL VONAL: az útmutató-jelzés megmarad, de nappal is látszik (a sárga 5%-os tapéta fehéren gyakorlatilag láthatatlan volt). */ body.beta.skin2 #videoHub .sec-block:nth-of-type(2), body.beta.skin2 #videoHub .sec-block:nth-of-type(3), body.beta.skin2 #videoHub .sec-block:nth-of-type(4) { background: var(--surface-2); /* teljes keret, nem csak border-color: a styles.css:1774/1778 `border: 2px solid #2563eb` / `#d89b22` VASTAGSÁGA különben túlélné a felülírást */ border: 1px solid var(--line); } body.beta.skin2 #videoHub .sec-block:nth-of-type(2) { border-left: 2px solid var(--brand-pink); } body.beta.skin2 #videoHub .sec-block:nth-of-type(3) { border-left: 2px solid var(--yellow); } /* Widget-oldal: két csempének BEÉGETETT #0b1525 háttere van (skin.css:986-987), és a szelektorban `:has(#id)` ül → (1,3,1). Ezért kell ide is az ID-s forma. */ body.beta.skin2 .widgets-page .sec-block:has(#gvEnabled), body.beta.skin2 .widgets-page .sec-block:has(#teamBattleEnabled) { background: var(--surface-2); } /* =================================================================================== 3. EYEBROW =================================================================================== */ /* ÜTI: skin.css:423 (`color: var(--eyebrow)` = #7fb5f9). Az `--eyebrow` változó a skin.css body-blokkjában él, NEM téma-érzékeny: nappal 2,1:1 fehéren = bukik. A márka-rózsaszín mindkét módban átmegy (éjjel 5,0:1, nappal 6,0:1). */ body.skin2 .eyebrow { color: var(--brand-pink); font-family: var(--font-display, "Oswald", "Space Grotesk", system-ui, sans-serif); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; } /* =================================================================================== 4. CHIP — az „aktív / fut" jelzés kis táblaként =================================================================================== */ body.skin2 .chip { border: 1px solid var(--line-2); border-radius: 2px; background: var(--surface-2); color: var(--muted); font-family: var(--font-display, "Oswald", "Space Grotesk", system-ui, sans-serif); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; } /* ÜTI: skin.css:643 — ott a bekapcsolt chip színe BEÉGETETT #9ff0c4 (halvány menta), ami nappal fehéren olvashatatlan. Helyette: KIS FORDÍTOTT TÁBLA. */ body.skin2 .chip.on { background: var(--rf-slab-face); border-color: var(--rf-slab-edge); color: var(--rf-slab-num); box-shadow: var(--rf-slab-glow); } body.skin2 .chip.on::before { background: var(--rf-slab-num); box-shadow: none; } /* =================================================================================== 5. A „FUT MOST" KÁRTYA — fordított tábla ----------------------------------------------------------------------------------- Melyik osztály jelöli a futást? Nem találtam ki újat: az app.js:7635 a `#ovStatusChip` osztályát írja át `chip on`-ra, amikor a figyelés fut. A LIVE-kártya tehát a `:has(.chip.on)`-nal ismerhető fel — ugyanez a jel, amit a JS már ír. =================================================================================== */ body.skin2 .panel.rail-live:has(.chip.on) { background: var(--rf-slab-face); border-color: var(--rf-slab-edge); box-shadow: var(--rf-slab-glow); } body.skin2 .panel.rail-live:has(.chip.on)::before { background: var(--rf-slab-edge); } body.skin2 .panel.rail-live:has(.chip.on) h3, body.skin2 .panel.rail-live:has(.chip.on) .live-eyebrow { color: var(--rf-slab-num); } body.skin2 .panel.rail-live:has(.chip.on) .panel-note { color: var(--rf-slab-sub); } body.skin2 .panel.rail-live:has(.chip.on) .live-eyebrow-dot { background: var(--rf-slab-num); } /* A gyűrűs mérő a táblán belül: FIGYELEM, a `.live-ring` nem az én osztályom, de a táblán belül a zöld ív rózsaszín/fekete alapon ütne. Ezért CSAK a táblán belül színezem át (a héj-ügynök szabályai a táblán kívül érintetlenek). ÜTI: skin.css:828-838 (0,4,1) — ez (0,7,1). */ body.skin2 .panel.rail-live:has(.chip.on) .live-ring .lr-track { stroke: rgba(255, 255, 255, 0.20); } body.skin2 .panel.rail-live:has(.chip.on) .live-ring .lr-arc, body.skin2 .panel.rail-live:has(.chip.on) .live-ring.on .lr-arc { stroke: var(--rf-slab-num); filter: none; } body.skin2 .panel.rail-live:has(.chip.on) .live-ring-mid i, body.skin2 .panel.rail-live:has(.chip.on) .live-ring.on .live-ring-mid i { color: var(--rf-slab-num); } /* A táblán belül a chip NEM lehet tábla a táblán: körvonalas lesz. */ body.skin2 .panel.rail-live:has(.chip.on) .chip.on { background: transparent; border-color: var(--rf-slab-edge); color: var(--rf-slab-num); box-shadow: none; } /* A leállító gomb a táblán: a szürke „ghost" szöveg rózsaszín alapon eltűnne. FIGYELEM VEZÉRLŐK-ÜGYNÖK: ez a `.btn` egyetlen érintése, szigorúan a táblán belül. */ body.skin2 .panel.rail-live:has(.chip.on) .btn.ghost { border-color: var(--rf-slab-edge); background: transparent; color: var(--rf-slab-num); } body.skin2 .panel.rail-live:has(.chip.on) .btn.ghost:hover { background: rgba(255, 255, 255, 0.12); } /* =================================================================================== 6. VID-CARD — a csempe, ahol a SZÁM a leghangosabb =================================================================================== */ /* ÜTI: skin.css:965-967 (`body.skin2 .videos-page .vid-card`, 0,3,1), ahol a háttér BEÉGETETT #0b1627, a keret #27344a → nappal sötét kártya sötét szöveggel. Két alakban írom meg, mert a videó-oldalon a 3-osztályos szelektor a mérvadó. */ body.skin2 .vid-card, body.skin2 .videos-page .vid-card { border: 1px solid var(--line); border-radius: 2px; box-shadow: none; /* ÜTI: styles.css:1864 body.beta .vid-card lebegő árnyékát */ /* A levágott jobb felső sarok — EZ a formanyelv aláírása. A `