/* ============================================================= neuwerk design tokens Forrás: brandbook v1.1 (Arculat/01_neuwerk_brandbook/) Ez az EGYETLEN fájl, ahol hex érték szerepelhet. ============================================================= */ :root { /* --- Elsődleges paletta (brandbook 04) ------------------- */ --nw-navy: #1b1e52; /* Pantone 2766 C — nagy felületeken dominál */ --nw-white: #ffffff; /* egyenrangú vászon a navy-vel */ --nw-blue-1: #273993; /* a neuwerk pattern színe */ --nw-blue-2: #4e66af; --nw-blue-3: #8895cb; --nw-blue-4: #afc6e7; /* --- Akcent ---------------------------------------------- */ /* Sun: max. a látható felület 10-15%-a. SOHA nem háttér. */ --nw-sun: #ffa500; /* Pantone 137 C */ /* --- Szürkék --------------------------------------------- */ --nw-black: #000000; --nw-grey-01: #333333; --nw-grey-02: #666666; --nw-grey-03: #999999; --nw-grey-04: #b4b4b4; --nw-grey-05: #cccccc; --nw-grey-06: #e6e6e6; /* --- Másodlagos paletta ---------------------------------- A brandbook KIZÁRÓLAG infografikára, diagramra, illusztrációra engedi. Fő brandfelületen ne használd. */ --nw-mint: #1eb78b; --nw-azure: #48c3cb; --nw-melon: #f37558; --nw-levander: #d18ab5; /* --- Szemantikus párok ----------------------------------- Ezek kényszerítik ki a kontrasztszabályokat. Ha ezeket használod, nem tudsz bukó párt leírni. Számított arányok a specben (3.6). */ --nw-on-navy: var(--nw-white); /* 15,51:1 AAA */ --nw-on-navy-secondary: var(--nw-blue-3); /* 5,32:1 AA */ --nw-on-navy-muted: var(--nw-blue-4); /* 8,90:1 AAA */ --nw-on-white: var(--nw-navy); /* 15,51:1 AAA */ --nw-on-white-secondary: var(--nw-grey-02); /* 5,74:1 AA */ --nw-on-sun: var(--nw-navy); /* 7,85:1 AAA SOHA ne legyen white: az 1,97:1 */ /* Sun mint SZÖVEG csak navy háttéren (7,85:1). Fehéren 1,97:1 → tilos. */ --nw-accent-on-navy: var(--nw-sun); /* --- Tipográfia ------------------------------------------ Poppins: headline, UI, gomb, kiemelés Lora: hosszú szöveg, idézet, editorial Ha megjön az egyedi brand font, itt az egy sor. */ --nw-font-display: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif; --nw-font-body: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif; --nw-font-editorial: "Lora", Georgia, "Times New Roman", serif; --nw-fw-regular: 400; --nw-fw-medium: 500; --nw-fw-semibold: 600; --nw-fw-bold: 700; /* Fluid típusskála. clamp(min, preferált, max) */ --nw-text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem); --nw-text-sm: clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem); --nw-text-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem); --nw-text-lg: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem); --nw-text-xl: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem); --nw-text-2xl: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem); --nw-text-3xl: clamp(2.25rem, 1.6rem + 3vw, 4rem); --nw-text-4xl: clamp(2.75rem, 1.6rem + 5vw, 6rem); --nw-leading-tight: 1.08; --nw-leading-snug: 1.25; --nw-leading-body: 1.6; --nw-leading-loose: 1.75; /* Lora-hoz, editorial szövegnél */ --nw-tracking-tight: -0.02em; --nw-tracking-wide: 0.08em; /* --- Térköz (8px alapskála) ------------------------------- */ --nw-space-1: 0.5rem; --nw-space-2: 1rem; --nw-space-3: 1.5rem; --nw-space-4: 2rem; --nw-space-6: 3rem; --nw-space-8: 4rem; --nw-space-12: 6rem; --nw-space-16: 8rem; --nw-space-24: 12rem; /* Szekció-belmagasság, viewporttal skálázva */ /* Harmadik beallitas. 160 px oldalankent (320 px ket szekcio kozott) szet- szakitotta az oldalt; a valaszul beallitott 88 px viszont mar tomornek bizonyult -- a grafikusok visszajelzese szerint "nem eleg airy". A mostani 120 px oldalankent (240 px kozottuk) a ketto kozott van. */ --nw-section-y: clamp(3.5rem, 2.4rem + 6vw, 7.5rem); /* A szekcion BELULI ritmus is ehhez tartozik: hiaba no a kulso terkoz, ha a cim es a szovegtorzs osszetapad. Ezt a base.css hasznalja. */ --nw-flow: clamp(1.25rem, 1rem + 1.6vw, 2rem); /* --- Layout ----------------------------------------------- */ --nw-max-width: 1440px; --nw-measure: 68ch; /* olvasható sorhossz */ --nw-gutter: clamp(1.25rem, 0.8rem + 2.4vw, 3rem); --nw-header-h: 72px; /* --- Forma ------------------------------------------------ */ --nw-radius-pill: 9999px; --nw-radius-card: 18px; --nw-pattern-tilt: -45deg; /* a neuwerk pattern dőlése */ /* --- Mozgás ----------------------------------------------- */ --nw-ease: cubic-bezier(0.22, 1, 0.36, 1); --nw-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --nw-dur-fast: 180ms; --nw-dur-base: 320ms; --nw-dur-slow: 640ms; --nw-dur-intro: 1200ms; --nw-z-pattern: 0; --nw-z-content: 10; --nw-z-header: 100; --nw-z-intro: 1000; } /* ============================================================= v2 — VILÁGOS-DOMINÁNS RENDSZER ============================================================= Miért változott: az oldal túl közel került a Lufthansához. A mérés szerint nem a színek a baj, hanem az arányok: mindkét rendszer navy-domináns, meleg akcenttel. A Sun (#ffa500) és a Lufthansa-sárga (#FFAD00) RGB-távolsága 8,0 -- megkülönböztethetetlen. A megoldás három lépés: 1. A NAVY MOSTANTÓL SZÖVEGSZÍN, NEM HÁTTÉR. Ez az egyetlen legnagyobb lépés. A navy-dominancia adta a légitársaság-benyomást. 2. A SÖTÉT FELÜLETET A BLUE TINT 1 VISZI (#273993), nem a navy. Telítettebb, elektromosabb, és a Lufthansa navy-jától 85,3 RGB-egységre van a korábbi 23,9 helyett -- 3,6-szor messzebb. 3. A SUN SZEREPE RADIKÁLISAN SZŰKÜL: logó, egyetlen primer CTA, aktív állapot. Semmi más. A narancs sorszámok és hairline-ok összeadódva adták a "sárgás" összbenyomást. Számolt kontrasztok (WCAG 2.1): világos alapon (#fbfcfe): navy 15,11 | tint1 9,77 | tint2 5,32 tint1 alapon (#273993): fehér 10,03 | tint4 5,76 | Sun 5,08 A tint 3 és 4 világos alapon NEM szöveg (2,84 és 1,70) -- kizárólag felület és forma. ============================================================= */ :root { /* --- Felületek ------------------------------------------- */ --nw-canvas: #fbfcfe; /* az oldal alapja: majdnem fehér, hajszálnyi hideg */ --nw-surface: #ffffff; /* kiemelt lapok, kártyák */ --nw-sunk: #eef2fb; /* süllyesztett sáv, tint 4-ből levezetve */ --nw-deep: #273993; /* a SÖTÉT felület: Blue tint 1, nem navy */ --nw-deeper: #1e2c72; /* a mély felület mélyebb vége, gradienshez */ /* --- Tinta ------------------------------------------------ */ --nw-ink: #1b1e52; /* navy MINT SZÖVEG, 15,11:1 a canvason */ --nw-ink-2: #4e66af; /* másodlagos szöveg világoson, 5,32:1 */ /* --- Hajszálvonalak --------------------------------------- */ --nw-line: rgb(27 30 82 / 0.10); --nw-line-strong: rgb(27 30 82 / 0.18); --nw-line-dark: rgb(255 255 255 / 0.16); /* --- Tonális kékek felületnek ------------------------------ Nem AI-lila gradiens: a saját tintjeikből kevert, alacsony kontrasztú mosás. Ez adja a "lágy formákat" világos alapon. */ --nw-wash-1: color-mix(in oklab, var(--nw-blue-4) 42%, white); --nw-wash-2: color-mix(in oklab, var(--nw-blue-3) 26%, white); --nw-wash-3: color-mix(in oklab, var(--nw-blue-4) 20%, white); /* --- Lebegő nav ------------------------------------------- */ --nw-nav-h: 56px; --nw-nav-inset: 14px; /* mennyivel lóg be a viewport szélétől */ --nw-nav-radius: 9999px; --nw-nav-radius-open: 26px; --nw-shadow-nav: 0 1px 2px rgb(27 30 82 / 0.06), 0 8px 28px rgb(27 30 82 / 0.10); --nw-shadow-lift: 0 2px 6px rgb(27 30 82 / 0.05), 0 18px 44px rgb(27 30 82 / 0.12); /* Egységes sarokkerekítés-rendszer. Egy skála, nincs keverés. */ --nw-r-sm: 8px; --nw-r-md: 14px; --nw-r-lg: 22px; --nw-r-xl: 32px; } /* Szekció-témák. NEM felhasználói kapcsoló -- szekció-tulajdonság. A világos az ALAPÉRTELMEZETT és a domináns; a mély kék a kivétel. */ .nw-theme-light { --nw-bg: var(--nw-canvas); --nw-fg: var(--nw-ink); --nw-fg-secondary: var(--nw-ink-2); --nw-fg-muted: var(--nw-ink-2); --nw-accent-text: var(--nw-blue-1); /* 9,77:1 -- a Sun itt tilos lenne */ --nw-rule: var(--nw-line); --nw-pattern-fill: var(--nw-wash-1); /* a pattern VILÁGOSBAN is él */ } /* Süllyesztett világos sáv: ugyanaz a téma, más felület. */ .nw-theme-sunk { --nw-bg: var(--nw-sunk); --nw-fg: var(--nw-ink); --nw-fg-secondary: var(--nw-ink-2); --nw-fg-muted: var(--nw-ink-2); --nw-accent-text: var(--nw-blue-1); --nw-rule: var(--nw-line-strong); --nw-pattern-fill: var(--nw-wash-2); } /* A NAVY felület. Ez a domináns nagy felület (brandbook 04: "nagy felületeken dominál"), és az ugyfel 2026-08-21-i visszajelzese is ezt kerte ("We want to go with navy blue/dark the background colour" / "Always use the navy blue as background color"). Miert kulon a .nw-theme-dark-tol: az Blue tint 1 (#273993), nem navy. A ketto egymas mellett 1,55:1 -- eppen annyi, hogy ket egymast koveto sotet szekcio elvaljon, de ne legyen kemeny vagas. Kontrasztok navy-n (#1b1e52): feher 15,51:1 AAA blue-4 8,90:1 AAA -- masodlagos szoveg Sun 7,85:1 AAA -- CTA, a brandbook szerint navy-n megengedett blue-2 2,84:1 -- SZOVEGNEK TILOS, csak hajszalvonal A pattern Blue tint 1 navy-n: ez maga a brandbook-szabaly. */ .nw-theme-navy { --nw-bg: var(--nw-navy); --nw-fg: var(--nw-white); --nw-fg-secondary: var(--nw-blue-4); --nw-fg-muted: var(--nw-blue-4); --nw-accent-text: var(--nw-blue-4); --nw-rule: var(--nw-line-dark); --nw-pattern-fill: var(--nw-blue-1); } /* A mély felület. Blue tint 1, nem navy. */ .nw-theme-dark { --nw-bg: var(--nw-deep); --nw-fg: var(--nw-white); --nw-fg-secondary: var(--nw-blue-4); /* 5,76:1 a tint 1-en */ --nw-fg-muted: var(--nw-blue-4); --nw-accent-text: var(--nw-blue-4); /* NEM Sun: a Sun csak CTA és logó */ --nw-rule: var(--nw-line-dark); --nw-pattern-fill: color-mix(in oklab, var(--nw-deeper) 70%, white 6%); }