/* ============================================================================= far360 — DIZÁJN-TOKENEK. Forrás: DESIGN.md (2026-09-20-i megrendelői döntés). A paletta, a lekerekítések és a tipográfia AZONOS a marketingoldallal (marketing/css/tokens.css) — a kettő nem tarthat szét. Ami itt PLUSZ: az „Liquid Glass" gomb-rendszer tokenjei (üveg-töltetek, homály, él, mélység) és a régi alkalmazás-tokenek (--f-radius-*, --glass-bg, --f-badge-*), amiket a portal.css, az ertekeles.css és a nézetek Styles-blokkjai már használnak. FONTOS SZABÁLY (DESIGN.md): a kontrasztot MINDIG a TÉNYLEGES háttér fölött mérjük. Az üveg áttetsző, tehát a gomb felirata nem a tokenszínhez, hanem a kikeveredett felülethez képest olvasható — a teljes mért táblázat a DESIGN.md-ben áll. ============================================================================= */ :root { /* --- Felületek ------------------------------------------------------- */ --f-ground: #F3F0E8; /* alapháttér — meleg törtfehér */ --f-hero: #F4F5F3; /* a publikus hero hűvös törtfehére (marketing) */ --f-white: #FFFFFF; /* kártya */ --f-light: #F4F2EC; /* halvány felület (chip, táblázat-fejléc) */ --f-border: #E3DFD5; /* alap szegély */ --f-white-60: rgba(255, 255, 255, .6); /* --- Szöveg ---------------------------------------------------------- */ --f-ink: #101010; /* elsődleges szöveg, sötét felület */ --f-black: #101010; /* mélysötét felület (admin fejléc) */ --f-dark: #2B2B2B; /* lábléc / másodlagos sötét felület */ --f-ink-soft: #2B2B2B; /* másodlagos szöveg világos alapon */ --f-on-dark: #DAD7CF; /* másodlagos szöveg sötét alapon */ /* --- Akcentusok ------------------------------------------------------ */ --f-primary: #3A2BD6; --f-primary-dark: #2A1FA8; --f-primary-soft: rgba(58, 43, 214, .08); --f-danger: #8A2418; /* valódi romboló művelet (törlés, visszavonás) */ /* --- Formaszínek ------------------------------------------------------ A marketingoldalon dekoratív síkformák, az alkalmazásban KIZÁRÓLAG állapot- és modulazonosítás. Mindegyik alatt SÖTÉT (--f-ink) szöveg áll, fehér SOHA. */ --f-coral: #F26B5B; --f-mustard: #F2C14E; --f-mint: #7CC6A4; --f-sky: #A9C9F5; /* --- Szürkék — WCAG AA (4,5:1) a --f-ground HÁTTÉREN IS ----------------- A méréseket a tools/kontraszt_ellenorzo.py adja; a részletes indoklás a DESIGN.md „Szürkék" szakaszában áll. */ --f-grey: #5A6472; /* ground 5,27:1 · fehér 6,00:1 */ --f-grey-2: #55616F; /* ground 5,54:1 · fehér 6,31:1 */ --f-grey-light: #646C7A; /* ground 4,65:1 · fehér 5,29:1 */ /* --- LIQUID GLASS ---------------------------------------------------- Töltetek: áttetsző kitöltés + backdrop-filter. Az alfák MÉRTEK, nem becsültek — a legrosszabb eset mindig a LEGVILÁGOSABB háttér (fehér kártya), mert ott keveredik ki a legvilágosabb töltet a fehér felirat alá. */ --glass-primary: rgba(58, 43, 214, .86); --glass-primary-hover: rgba(42, 31, 168, .92); --glass-secondary: rgba(255, 255, 255, .72); --glass-secondary-hover: rgba(255, 255, 255, .88); --glass-ghost: rgba(16, 16, 16, .06); --glass-ghost-hover: rgba(16, 16, 16, .10); --glass-danger: rgba(138, 36, 24, .90); --glass-danger-hover: rgba(138, 36, 24, .96); /* Az üveg határvonala. A --glass-line a KEZELŐSZERV KÖRVONALA (WCAG 1.4.11: legalább 3:1 a szomszédos felülethez) — .55-nél 4,05:1 a lapháttéren és 4,17:1 a fehér kártyán. A --glass-edge a felső fénytörés-csík: DÍSZ, nincs kontraszt-követelménye, és sosem hordoz információt. */ --glass-line: rgba(16, 16, 16, .55); --glass-line-soft: rgba(16, 16, 16, .16); --glass-edge: rgba(255, 255, 255, .55); --glass-edge-low: rgba(16, 16, 16, .07); --glass-blur: 18px; --glass-blur-sm: 10px; --glass-saturate: 180%; --glass-depth-1: 0 1px 2px rgba(16, 16, 16, .06), 0 4px 12px rgba(16, 16, 16, .08); --glass-depth-2: 0 2px 6px rgba(16, 16, 16, .09), 0 10px 26px rgba(16, 16, 16, .14); /* Régi nevek (portal.css, ertekeles.css, nézet-Styles-blokkok használják) */ --glass-bg: rgba(255, 255, 255, .72); --glass-bg-dark: rgba(16, 16, 16, .82); --glass-border: rgba(16, 16, 16, .12); --glass-shadow: var(--glass-depth-1); --f-shadow-sm: var(--glass-depth-1); --f-shadow-md: var(--glass-depth-2); /* --- Lekerekítés (DESIGN.md) ----------------------------------------- */ --f-radius-xs: 10px; --f-radius-sm: 14px; --f-radius-md: 22px; /* kártya */ --f-radius-tile: 26px; /* csempe */ --f-radius-section: 40px; /* szekcióváltás */ --f-radius-btn: 999px; /* gomb — teljes pirula */ --f-radius-chip: 999px; /* --- Állapot-chipek (Jelentkezes.Statusz) ---------------------------- */ --f-badge-generalva-bg: rgba(107, 114, 128, .14); --f-badge-generalva-fg: #3F4653; --f-badge-var-bg: rgba(242, 193, 78, .30); --f-badge-var-fg: #6B4E06; --f-badge-alairva-bg: rgba(124, 198, 164, .32); --f-badge-alairva-fg: #1C5B42; --f-badge-far-bg: rgba(169, 201, 245, .38); --f-badge-far-fg: #1B3F73; --f-badge-lejart-bg: rgba(242, 107, 91, .26); --f-badge-lejart-fg: #8A2418; /* --- Tipográfia ------------------------------------------------------ */ --f-font: "Archivo", "Helvetica Neue", Arial, system-ui, sans-serif; --f-font-mono: "DM Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* A marketingoldal címsor-skálája. Az alkalmazás MUNKAFELÜLETE ennek a visszafogott felét használja (base.css) — a nagy skála a publikus kezdő- és köszönő-oldalé (hero.css, public.css). */ --t-h1-hero: clamp(2.375rem, 6vw, 4.5rem); --t-h2-hero: clamp(1.875rem, 4.4vw, 3rem); --t-lead: clamp(1.0625rem, 1.5vw, 1.25rem); --t-mono: 0.75rem; /* --- Ritmus ---------------------------------------------------------- */ --f-container-width: 1120px; --f-block: clamp(40px, 6vw, 72px); --f-gutter: clamp(16px, 3vw, 28px); /* --- Mozgás ---------------------------------------------------------- */ --f-ease: cubic-bezier(.32, .72, 0, 1); --f-dur: 180ms; } /* ----------------------------------------------------------------------------- ÁTLÁTSZÓSÁG-CSÖKKENTÉS (prefers-reduced-transparency) A rendszerbeállítás tiszteletben tartása: az üveg-töltetek ÁTLÁTSZATLANRA váltanak. Nem „kicsit kevésbé áttetsző" — ha a használó ezt kéri, akkor a homály és az áttetszőség egyaránt kikapcsol (a blurt a buttons.css oldja fel). A kikeveredett értékek a legrosszabb esetű (fehér kártya) színek, tehát a kontraszt SOSEM lesz kisebb, mint az üveges változatnál. ----------------------------------------------------------------------------- */ @media (prefers-reduced-transparency: reduce) { :root { --glass-primary: #3A2BD6; --glass-primary-hover: #2A1FA8; --glass-secondary: #FBFAF7; --glass-secondary-hover: #FFFFFF; --glass-ghost: #EFECE3; --glass-ghost-hover: #E7E4DA; --glass-danger: #8A2418; --glass-danger-hover: #7A1F14; --glass-bg: #FFFFFF; --glass-bg-dark: #101010; --glass-edge: transparent; } }