/* Szekció-layoutok: hero, who-we-are, footprint, solutions, ambition,
aloldal-hero, névbontás, listák, cikk, dokumentumlista, kontakt. */
/* A header fixed, ezért az első szekció alápadolása kell,
különben a cím a header alá csúszik. A heroban ezt a
100svh magasság oldja meg, itt viszont kézzel kell. */
/* A nav lebeg, tehat nem foglal helyet a folyamban. Az elso szekcio
felso padolasa a nav magassaga + a beloges + egy kis levego. */
main > .nw-section:first-child,
main > article > header.nw-section {
padding-block-start: calc(var(--nw-section-y) + var(--nw-nav-h) + var(--nw-nav-inset));
}
/* --- Hero ----------------------------------------------------- */
.nw-hero {
position: relative;
isolation: isolate;
min-block-size: 100svh;
display: grid;
align-items: end;
/* A tema hattere, nem bedrotozott Blue tint 1: az ugyfel navy-t kert
("We want to go with navy blue/dark the background colour"), a
szekcio pedig mar .nw-theme-navy. */
background: var(--nw-bg);
color: var(--nw-white);
overflow: clip;
}
.nw-hero__video {
position: absolute; inset: 0;
inline-size: 100%; block-size: 100%;
object-fit: cover;
z-index: 0;
transition: opacity 200ms linear; /* a loop-átúszáshoz */
}
.nw-hero__scrim {
position: absolute; inset: 0; z-index: 1;
background:
linear-gradient(to top, rgb(39 57 147 / 0.90) 0%, rgb(39 57 147 / 0.34) 46%, rgb(39 57 147 / 0.12) 100%);
}
.nw-hero__inner {
position: relative; z-index: 2;
padding-block: var(--nw-space-12) var(--nw-space-8);
}
.nw-hero__title { font-size: var(--nw-text-4xl); margin-bottom: var(--nw-space-3); color: var(--nw-white); }
.nw-hero__lead {
font-size: var(--nw-text-lg);
color: var(--nw-blue-4);
max-width: 52ch;
margin-bottom: var(--nw-space-4);
}
.nw-hero__actions { display: flex; flex-wrap: wrap; gap: var(--nw-space-2); margin: 0; }
/* --- Who we are ----------------------------------------------- */
.nw-prose { margin-top: var(--nw-space-4); }
.nw-prose > * + * { margin-top: var(--nw-space-2); }
.nw-who {
display: grid;
gap: var(--nw-space-6);
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
align-items: start;
}
@media (max-width: 900px) {
.nw-who { grid-template-columns: minmax(0, 1fr); gap: var(--nw-space-4); }
}
@media (min-width: 901px) {
/* A cím marad a helyén, amíg a szöveg elgördül mellette -- így a
szekció végig kontextusban van, és a jobb hasáb nem lóg a semmiben. */
.nw-who__aside { position: sticky; top: calc(var(--nw-nav-h) + var(--nw-nav-inset) + var(--nw-space-3)); }
}
/* Eredet-jelölés: Continental OES -> neuwerk. A nyíl a logó ferde
vonását idézi, ezért ugyanaz a dőlés, mint a patternnél. */
.nw-origin {
display: flex; align-items: center; gap: var(--nw-space-2);
margin-top: var(--nw-space-4);
font-family: var(--nw-font-display);
font-size: var(--nw-text-sm);
font-weight: var(--nw-fw-medium);
}
.nw-origin__from { color: var(--nw-fg-secondary); }
.nw-origin__to { color: var(--nw-fg); font-weight: var(--nw-fw-semibold); }
.nw-origin__arrow {
inline-size: 34px; block-size: 3px;
background: var(--nw-blue-2);
border-radius: var(--nw-radius-pill);
transform: rotate(-24deg);
}
/* --- Kinetikus vezérmondat -------------------------------------- */
.nw-kinetic {
font-family: var(--nw-font-display);
font-size: var(--nw-text-xl);
font-weight: var(--nw-fw-medium);
line-height: var(--nw-leading-snug);
letter-spacing: var(--nw-tracking-tight);
max-width: 30ch;
margin: 0 0 var(--nw-space-6);
color: var(--nw-fg);
}
/* A kiinduló halvány állapotot csak akkor tesszük rá, ha a JS
lefutott -- különben JS nélkül olvashatatlanul halvány maradna. */
.nw-kinetic[data-kinetic-ready] .nw-kinetic__w {
color: var(--nw-grey-04);
transition: color 380ms var(--nw-ease);
}
.nw-kinetic[data-kinetic-ready] .nw-kinetic__w[data-on] { color: var(--nw-fg); }
@media (prefers-reduced-motion: reduce) {
.nw-kinetic[data-kinetic-ready] .nw-kinetic__w { color: var(--nw-fg); transition: none; }
}
/* Hosszu vezermondat. A master copy 2026-09-01-i bevezetoje a Who we
are-ben ketszer olyan hosszu, mint a korabbi: 30ch-n hetsoros oszlop
lenne belole. Szelesebb sorhossz, valtozatlan tipografiai suly. */
.nw-kinetic--long { max-width: 40ch; }
/* --- Kinetikus CIM, mondatonkent ----------------------------------
A "German roots. Global know how. Close to our customers." harmas cim.
Az ugyfel verzallal irta; verzal helyett a sajat animacionkkal emeljuk
ki, de a cim TIPOGRAFIAJA h2 marad -- ezert all itt vissza minden, amit
a .nw-kinetic alapszabalya lekicsinyitene.
Mondatonkent block: a harom allitas kulon sorban all, ugyanugy, ahogy
korabban a
tordelte a ket tagot. */
.nw-kinetic--title {
font-size: var(--nw-text-3xl);
font-weight: var(--nw-fw-bold);
line-height: var(--nw-leading-tight);
max-width: 20ch;
margin: 0;
}
.nw-kinetic--title .nw-kinetic__s { display: block; }
/* A kiindulo (meg nem bevilagitott) allapot. Nem a szo-modban hasznalt
--nw-grey-04: a cim navy szekcioban all, ott a tompitott FEHER a
helyes -- igy a szin a szekciotemaval egyutt valt.
55%-os fehernel a kontraszt navy-n 5,05:1 (AA meg normal szovegre is),
a vegallapot pedig a teljes feher, 15,51:1. */
.nw-kinetic[data-kinetic-ready] .nw-kinetic__s {
color: color-mix(in oklab, var(--nw-fg) 55%, transparent);
transition: color 520ms var(--nw-ease);
}
.nw-kinetic[data-kinetic-ready] .nw-kinetic__s[data-on] { color: var(--nw-fg); }
@media (prefers-reduced-motion: reduce) {
.nw-kinetic[data-kinetic-ready] .nw-kinetic__s { color: var(--nw-fg); transition: none; }
}
/* --- Tagolt törzsszöveg ----------------------------------------- */
.nw-who__blocks { display: grid; gap: var(--nw-space-4); }
.nw-who__block {
display: grid;
grid-template-columns: 7rem minmax(0, 1fr);
gap: var(--nw-space-2);
padding-block-start: var(--nw-space-3);
border-block-start: 1px solid var(--nw-rule);
}
@media (max-width: 640px) {
.nw-who__block { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
}
.nw-who__label {
margin: 0;
font-family: var(--nw-font-display);
font-size: var(--nw-text-xs);
font-weight: var(--nw-fw-semibold);
letter-spacing: var(--nw-tracking-wide);
text-transform: uppercase;
color: var(--nw-fg-secondary);
}
/* Csak az ALSO margot vesszuk le -- ez volt a szabaly eredeti celja is.
A korabbi `margin: 0` a felso margot is nullazta, es mivel ez a
szelektor specifikusabb a lenti .nw-who__text > * + * szabalynal,
a lista utan allo zaro bekezdes odatapadt a lista utolso teteléhez. */
.nw-who__block p:last-child { margin-block-end: 0; }
/* A .nw-who__block ket oszlopos racs (cimke | szoveg). Ha a szovegoldalon
egynel tobb elem all (bekezdes + lista + bekezdes), azoknak EGY
racscellaban kell lenniuk, kulonben a masodik elem visszaesne a
cimke-oszlopba. Ez a burkolo. */
.nw-who__text > * + * { margin-block-start: var(--nw-space-2); }
/* --- "From ... to ..." felsorolas ----------------------------------
Uj elem a Who we are-ben (master copy 0039-0041): harom parhuzamos
allitas a kepessegekrol. Nem a .nw-principles: az az ambition-szekcio
interaktiv elv-indexe, gorgetesre kovetett aktiv sorral -- itt viszont
harom egyenrangu teny all, amin nincs mit kovetni.
A jelolo a marka atlos vonasa (--nw-pattern-tilt), nem pont es nem
kotojel: ugyanaz a formanyelv, mint a logo es a pattern. Sun toltes --
a brandbook a Sunt VONALKENT es kitoltéskent vilagos alapon is
engedi (tiltva csak SZOVEGKENT van, 1,97:1 miatt), es harom ~14 px-es
vonaska nagysagrendekkel a 10-15%-os keret alatt marad. */
.nw-spanlist {
display: grid;
gap: var(--nw-space-2);
}
.nw-spanlist li {
position: relative;
padding-inline-start: 1.75rem;
color: var(--nw-fg);
}
.nw-spanlist li::before {
content: "";
position: absolute;
inset-inline-start: 0;
/* A vonaska a sor ELSO sorkozenek kozepere ul, nem a doboz kozepere:
tobbsoros tetelnel a doboz kozepe mar a masodik sornal jarna. */
inset-block-start: calc(var(--nw-leading-body) * 0.5em);
inline-size: 14px; block-size: 2px;
margin-block-start: -1px;
background: var(--nw-sun);
border-radius: var(--nw-radius-pill);
transform: rotate(var(--nw-pattern-tilt));
}
/* --- Career: "At neuwerk" dobozok --------------------------------
Sajat osztaly, nem a megosztott .nw-who__block ujrafelhasznalasa --
igy a fooldal es az identity oldal sorozott, also-vonalas valtozata
erintetlen marad. Nem linkek, tehat NINCS hover-lift/szinvaltas: az
affordancia csak a valodi kattinthato elemeken jelenik meg. */
.nw-career__blocks {
display: grid; gap: var(--nw-space-3);
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
margin-top: var(--nw-space-4);
}
.nw-career__block {
padding: var(--nw-space-4);
border: 1px solid var(--nw-rule);
border-radius: var(--nw-radius-card);
box-shadow: var(--nw-shadow-nav);
}
.nw-career__label {
margin: 0 0 var(--nw-space-2);
font-family: var(--nw-font-display);
font-size: var(--nw-text-xs);
font-weight: var(--nw-fw-semibold);
letter-spacing: var(--nw-tracking-wide);
text-transform: uppercase;
color: var(--nw-accent-text);
}
.nw-career__block p:last-child { margin: 0; color: var(--nw-fg); }
/* --- Teljes szélességű képsáv ------------------------------------
Átvezet a világos Who we are-ből a sötét Global footprintbe. */
.nw-band {
margin: var(--nw-space-8) 0 0;
position: relative;
}
.nw-band img {
inline-size: 100%; block-size: auto;
display: block;
}
.nw-band figcaption {
display: flex; align-items: center; gap: 0.75rem;
max-inline-size: var(--nw-max-width);
margin-inline: auto;
padding: var(--nw-space-2) var(--nw-gutter) 0;
font-size: var(--nw-text-sm);
color: var(--nw-fg-secondary);
}
.nw-band__mark {
flex: none;
inline-size: 22px; block-size: 3px;
background: var(--nw-blue-2);
border-radius: var(--nw-radius-pill);
transform: rotate(-24deg);
}
/* --- Global footprint ------------------------------------------ */
.nw-map { margin-block: var(--nw-space-6); position: relative; }
.nw-map__canvas { position: relative; }
/* A world.svg pont-rács, fix #8895cb kitöltéssel. Nem recolouroljuk --
csak az áttetszőséget állítjuk, hogy a pulzáló pontok kiemelkedjenek. */
.nw-map__base {
inline-size: 100%; block-size: auto;
/* Az ugyfel 2026-08-21: "Too less contrast between dots and blue one that
represents cities/countries." Az alapterkep pottyei es a jelolok
ugyanabban a kek csaladban voltak. Most az alap hatrahuzodik, a jelolo
pedig feher -- ket kulon retegge valik.
2026-08-24: "legyenek lathatobbak, kicsit feherebbek a pottyok".
A racs szine tint 3-rol tint 4-re valtott (tools/build_map.py), az
opacitas 0,5-rol 0,62-re. Igy a racs 2,37:1 helyett 4,29:1 navy-n,
a feher jelolok pedig meg mindig 3,62:1-gyel valnak el tole. */
opacity: 0.62;
}
/* A pont gomb, nem span: hoverrel megszerezhető információt
billentyűvel is meg kell tudni szerezni. */
.nw-map__dot {
position: absolute;
inline-size: 26px; block-size: 26px; /* nagyobb kattintható felület */
margin: -13px 0 0 -13px;
padding: 0; border: 0; background: none; cursor: pointer;
display: grid; place-items: center;
}
.nw-map__dot::before {
content: "";
inline-size: 10px; block-size: 10px;
border-radius: 50%;
/* Feher a navy szekcion: 15,51:1, mig a blue-1 ott csak 1,55:1 lenne.
A Sun-t NEM az osszes pontra tesszuk (az tenyleg tullepne a 10-15%-os
keretet), csak a kivalasztottra -- az igy egyertelmu "itt vagy" jel. */
background: var(--nw-white);
transition: transform var(--nw-dur-fast) var(--nw-ease);
animation: nw-pulse 2.6s var(--nw-ease-in-out) infinite;
animation-delay: inherit;
}
.nw-map__dot::after {
content: "";
position: absolute; inset: 0;
border: 1px solid var(--nw-accent-on-navy, var(--nw-sun));
border-radius: 50%;
opacity: 0; transform: scale(0.6);
transition: opacity var(--nw-dur-fast) var(--nw-ease),
transform var(--nw-dur-fast) var(--nw-ease);
}
.nw-map__dot:hover::before,
.nw-map__dot[data-active]::before {
transform: scale(1.6);
animation-play-state: paused;
background: var(--nw-sun);
}
.nw-map__dot:hover::after,
.nw-map__dot[data-active]::after { opacity: 1; transform: scale(1); }
@keyframes nw-pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.5); opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
.nw-map__dot::before { animation: none; }
}
/* --- Europa-gyujtopont ---------------------------------------------
Egyetlen nagy, pulzalo pont tizenegy orszag helyett. A merete jelzi,
hogy tobbet takar, a Sun-gyuru pedig azt, hogy ez KATTINTHATO -- a
tobbi pont csak informaciot mutat, ez viszont nezetet valt. */
.nw-map__dot--cluster { inline-size: 44px; block-size: 44px; margin: -22px 0 0 -22px; }
.nw-map__dot--cluster::before {
inline-size: 22px; block-size: 22px;
box-shadow: 0 0 0 2px var(--nw-sun);
}
.nw-map__dot--cluster::after {
/* A masodik, tagabb gyuru csak itt fut -- ez a "van ide meg valami" jel. */
opacity: 0.55; transform: scale(1);
border-color: var(--nw-sun);
animation: nw-cluster-ring 2.6s var(--nw-ease-in-out) infinite;
}
.nw-map__dot--cluster:hover::after,
.nw-map__dot--cluster[data-active]::after { opacity: 1; }
@keyframes nw-cluster-ring {
0%, 100% { transform: scale(1); opacity: 0.55; }
50% { transform: scale(1.35); opacity: 0.15; }
}
@media (prefers-reduced-motion: reduce) {
.nw-map__dot--cluster::after { animation: none; }
}
/* --- Vissza a vilagterkepre ----------------------------------------
A vaszon FOLOTT all, nem benne: a ket nezet magassaga kulonbozik, a
gomb helye viszont ne ugraljon. */
.nw-map__back {
display: inline-flex; align-items: center; gap: 0.5rem;
margin-block-end: var(--nw-space-2);
padding: 0.45rem 0.9rem;
background: none;
color: var(--nw-fg);
border: 1px solid var(--nw-rule);
border-radius: 9999px;
font-family: var(--nw-font-display);
font-size: var(--nw-text-sm);
font-weight: var(--nw-fw-semibold);
cursor: pointer;
transition: border-color var(--nw-dur-fast) var(--nw-ease),
background var(--nw-dur-fast) var(--nw-ease);
}
.nw-map__back:hover { border-color: var(--nw-sun); }
/* A [hidden] UA-szabalya csak `display: none` kis specifikussaggal -- a
fenti display: inline-flex felulirna, es a gomb a vilagnezetben is
latszana. Ezert kell kiirni. */
.nw-map__back[hidden] { display: none; }
.nw-map__back:focus-visible { outline: 2px solid var(--nw-sun); outline-offset: 2px; }
/* --- A ket terkepreteg ----------------------------------------------
A [data-layered] attributumot a js/map.js teszi ki, tehat JS nelkul a
markupban levo egyetlen ![]()
a regi modon, normal folyamban jelenik
meg -- a vilagterkep akkor is lathato marad.
JS-sel a ket reteg egymasra kerul es keresztbe usztat. A vaszon
magassagat ilyenkor a JS adja (a nezet aranyabol), es ugyanabban a
320 ms-ban animalodik, mint az opacitas -- igy a 150x60 -> 120x66
aranyvaltas nem kulon rantas, hanem az atmenet resze. */
.nw-map__canvas[data-layered] {
transition: height var(--nw-dur-base) var(--nw-ease);
}
.nw-map__canvas[data-layered] .nw-map__base {
position: absolute; inset: 0;
inline-size: 100%; block-size: 100%;
object-fit: contain;
opacity: 0;
transition: opacity var(--nw-dur-base) var(--nw-ease);
}
/* Az elol levo reteg ugyanazt a visszahuzott ertéket kapja, mint a
nem-retegzett (JS nelkuli) eset -- lasd .nw-map__base fentebb. */
.nw-map__canvas[data-layered] .nw-map__base[data-front] { opacity: 0.5; }
@media (prefers-reduced-motion: reduce) {
.nw-map__canvas[data-layered],
.nw-map__canvas[data-layered] .nw-map__base { transition: none; }
}
/* Tooltip. Egyetlen példány, a pontok mozgatják a helyére. */
.nw-map__tip {
position: absolute;
/* Explicit block: a .nw-map__tip egy , amit desktopon csak a
position:absolute blokkosit. A keskeny ag static-ra allitja vissza,
amitol a span ujra inline lett -- ket display:block gyerekkel az inline
doboz szetesik, a navy hatter csak ket csikkent festodott ki a sorok
elejen, a feher szoveg pedig a vilagos lapra futott ki. */
display: block;
z-index: 3;
inset-inline-start: var(--tip-x, 0);
inset-block-start: var(--tip-y, 0);
transform: translate(-50%, calc(-100% - 16px));
padding: 0.35rem 0.7rem;
/* NEM --nw-ink: az pont a navy szekcio hattereszine, a buborek eltunt
volna benne. Feher lap, navy szoveg -- 15,51:1, es elvalik a terkeptol. */
background: var(--nw-white);
color: var(--nw-ink);
border-radius: var(--nw-radius-card);
font-family: var(--nw-font-display);
font-size: var(--nw-text-sm);
font-weight: var(--nw-fw-semibold);
pointer-events: none;
opacity: 0;
transition: opacity var(--nw-dur-fast) var(--nw-ease);
/* Ket sor: az orszag neve, alatta a telephelyek. Az ugyfel 2026-08-24-en
kerte a varosokat vissza, ezert a korabbi nowrap megszunt -- Nemetorszag
ot varosa egy sorban kilogna a terkep dobozabol. */
text-align: start;
max-inline-size: 22ch;
}
.nw-map__tip-country { display: block; }
.nw-map__tip-cities {
display: block;
margin-block-start: 0.15rem;
font-family: var(--nw-font-body);
font-size: var(--nw-text-xs);
font-weight: var(--nw-fw-regular);
line-height: var(--nw-leading-snug);
opacity: 0.82;
}
/* A szelso orszagoknal a kozepre igazitott tooltip kilogna a terkep
dobozabol, ezert ott a szelehez tapad. */
.nw-map__tip[data-align="start"] { transform: translate(-12%, calc(-100% - 16px)); }
.nw-map__tip[data-align="end"] { transform: translate(-88%, calc(-100% - 16px)); }
.nw-map__tip[data-visible] { opacity: 1; }
/* Keskeny kepernyon a terkep ~133 px magas: a pont fole rakott buborek a
szekcio cimebe lognA. Ott a buborek a terkep ALATT all, statikusan, es a
helye akkor is le van foglalva, ha nem latszik -- kulonben a megjegyzes
ugralna hover kozben. */
@media (max-width: 48rem) {
.nw-map__tip {
position: static;
transform: none;
max-inline-size: none;
margin-block-start: var(--nw-space-2);
border-radius: var(--nw-r-sm);
/* A hely akkor is le van foglalva, ha a buborek ures: kulonben az elso
erintesnel az alatta levo tartalom megugrana. Ket sor + belso margo --
a varosnevek visszakerultek, tehat a korabbi egysoros meret keves. */
min-block-size: 3.4rem;
/* Flex, nem align-content: az utobbi block containeren csak ujabb
bongeszokben mukodik, es itt a fuggoleges kozepre igazitas a
lefoglalt 3.4rem-en belul latvanyos kulonbseg. */
display: flex;
flex-direction: column;
justify-content: center;
}
.nw-map__tip:not([data-visible]) { visibility: hidden; }
.nw-map__tip[data-align] { transform: none; }
}
.nw-map__note { font-size: var(--nw-text-sm); color: var(--nw-fg-secondary); margin-top: var(--nw-space-2); }
/* Telephely-index: mindig lathato, nem hoverre jelenik meg -- a
kozep-europai pontok akkor is szuk celpontok, ha szet vannak lokve, es
tapintasos eszkozon nincs hover. Regionkent egy hasab. */
.nw-map__detail {
margin-top: var(--nw-space-3);
padding: var(--nw-space-3);
/* Nem tomor feher: a szekcio navy lett, egy feher tabla kettevagna.
Hajszalnyival vilagosabb navy + hajszalvonal -- a panel elvalik, de a
felulet vegig navy marad. A szovegszinek a temabol jonnek. */
background: color-mix(in oklab, var(--nw-white) 7%, transparent);
border: 1px solid var(--nw-rule);
border-radius: var(--nw-radius-card);
}
.nw-map__detail-label {
margin: 0;
font-family: var(--nw-font-display);
font-size: var(--nw-text-sm);
font-weight: var(--nw-fw-semibold);
color: var(--nw-fg);
}
.nw-map__detail-groups {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: var(--nw-space-3);
margin-top: var(--nw-space-3);
}
.nw-map__area-label {
margin: 0 0 var(--nw-space-1);
padding-block-end: 0.35rem;
border-block-end: 1px solid var(--nw-rule);
font-family: var(--nw-font-display);
font-size: var(--nw-text-xs);
font-weight: var(--nw-fw-semibold);
letter-spacing: var(--nw-tracking-wide);
text-transform: uppercase;
color: var(--nw-fg-secondary);
}
.nw-map__area-list { display: grid; gap: 0.55rem; }
.nw-map__detail-item { display: block; }
.nw-map__detail-country {
display: block;
font-family: var(--nw-font-display);
font-size: var(--nw-text-sm);
font-weight: var(--nw-fw-semibold);
color: var(--nw-fg);
}
.nw-map__detail-cities {
display: block;
font-size: var(--nw-text-xs);
line-height: var(--nw-leading-snug);
color: var(--nw-fg-secondary);
}
/* JELENLEG NEM HASZNALT (2026-09-07). A szamlalosor kikerult a fooldalrol,
mert az ugyfel keresere a letszam nem jelenhet meg a kulso
kommunikacioban. A szabalyok szandekosan maradtak: a ket masik szam
(17 orszag, 38 telephely) barmikor visszakerulhet. */
.nw-stats {
display: grid; gap: var(--nw-space-4);
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
margin: 0; padding-top: var(--nw-space-4);
}
.nw-stats dt {
font-family: var(--nw-font-display);
font-size: var(--nw-text-3xl);
font-weight: var(--nw-fw-bold);
line-height: 1;
color: var(--nw-fg);
}
.nw-stats dd {
margin: 0.5rem 0 0;
font-size: var(--nw-text-sm);
letter-spacing: var(--nw-tracking-wide);
text-transform: uppercase;
color: var(--nw-fg-secondary);
}
/* --- Solutions: két hasáb --------------------------------------
Balra a képességlista, jobbra az autó. Kattintásra a videó lejátssza
az adott szakaszt -- a korábbi scroll-scrub gyakorlatilag állóképnek
látszott, ezért lett kattintás-vezérelt. */
.nw-solutions__intro { max-width: 52ch; }
.nw-solutions {
display: grid;
gap: var(--nw-space-4);
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
align-items: start;
margin-top: var(--nw-space-6);
}
@media (max-width: 900px) {
.nw-solutions { grid-template-columns: minmax(0, 1fr); }
.nw-solutions__stage { order: -1; } /* mobilon előbb a kép */
}
.nw-solutions__list { display: grid; gap: 0; }
.nw-solutions__item {
inline-size: 100%;
display: block; /* a sorszam-oszlop megszunt */
text-align: left;
text-align: left;
cursor: pointer;
padding: var(--nw-space-3) var(--nw-space-2) var(--nw-space-3) 0;
background: none; color: inherit; font: inherit;
border: 0; border-block-start: 1px solid var(--nw-rule);
position: relative;
transition: padding-inline-start var(--nw-dur-base) var(--nw-ease);
}
.nw-solutions__list li:last-child .nw-solutions__item { border-block-end: 1px solid var(--nw-rule); }
/* A narancs jelölővonal a bal szélen fut, nem a teljes kereten --
így az akcent kis felületen marad. */
.nw-solutions__item::before {
content: "";
position: absolute; inset-block: 0; inset-inline-start: 0;
inline-size: 2px; background: var(--nw-sun);
transform: scaleY(0); transform-origin: top;
transition: transform var(--nw-dur-base) var(--nw-ease);
}
.nw-solutions__item:hover { padding-inline-start: var(--nw-space-2); }
.nw-solutions__item[aria-pressed="true"] { padding-inline-start: var(--nw-space-2); }
.nw-solutions__item[aria-pressed="true"]::before { transform: scaleY(1); }
.nw-solutions__body { display: block; }
.nw-solutions__title {
display: block;
font-family: var(--nw-font-display);
font-size: var(--nw-text-lg);
font-weight: var(--nw-fw-semibold);
line-height: var(--nw-leading-snug);
}
/* Ketszintu kartyaszoveg (master copy 2026-09-01): pillerenkent egy
haszon-allitas ES egy termek/alkalmazas felsorolas. A ketto kulon
szinten all -- az allitas a fo hang (--nw-fg, base), a felsorolas a
reszlet (--nw-fg-secondary, sm). Nincs harmadik, meg halvanyabb szin:
navy-n az mar bukna a kontraszton. */
.nw-solutions__desc {
display: block;
margin-block-start: 0.4rem;
font-size: var(--nw-text-base);
line-height: var(--nw-leading-snug);
color: var(--nw-fg);
max-inline-size: 46ch;
}
.nw-solutions__scope {
display: block;
margin-block-start: 0.5rem;
font-size: var(--nw-text-sm);
line-height: var(--nw-leading-body);
color: var(--nw-fg-secondary);
max-inline-size: 48ch;
}
/* --- A színpad -------------------------------------------------- */
.nw-solutions__stage {
position: relative;
margin: 0;
/* 16:9 -- a négy klip pontosan ebben az arányban készült, így nem kell
CSS-ből nagyítani és vágni. A korábbi 4:3-as színpad `scale(1.24)`-gyel
próbálta lecsípni a beégetett padlófeliratot; az nem is működött (a
felirat nem az alsó harmadban ül), és a képet is felnagyította. */
aspect-ratio: 16 / 9;
background: var(--nw-deep);
border: 1px solid var(--nw-rule);
border-radius: var(--nw-radius-card);
overflow: clip;
}
@media (min-width: 901px) {
.nw-solutions__stage { position: sticky; top: calc(var(--nw-nav-h) + var(--nw-nav-inset) + var(--nw-space-3)); }
}
/* Pillerenkent egy egymasra fektetett RETEG. Alapbol mind átlátszó; az
aktív úszik be fölülre, a leváltott alatta marad átlátszatlanul, amíg az
úsztatás tart (klasszikus A/B dissolve). Így sehol nem villan át a
navy háttér.
A reteg nem feltetlenul video: ahol nincs forgatott anyagunk, allo
markafelulet all (lasd .nw-solutions__still). Ezert a kozos szabalyok
a .nw-solutions__layer-en ulnek, es csak az object-fit maradt a
video-specifikus .nw-solutions__video-n. */
.nw-solutions__layer {
position: absolute; inset: 0;
display: block;
inline-size: 100%; block-size: 100%;
opacity: 0;
z-index: 0;
/* NINCS usztatas: a valtas azonnali.
A videos valtozatnal a 640 ms-os keresztusztatas indokolt volt, ott ket
mozgokep folyt egymasba. Ikonoknal viszont barmilyen atmenet ugy hatott,
mintha a kattintas nem fogna azonnal -- eloszor 180 ms-ra vittuk le,
majd az ugyfel keresere teljesen elhagytuk. A retegek igy egyszeruen
ki-be kapcsolnak.
A --nw-dur-slow / --nw-dur-fast tokenekhez nem nyultunk, mashol
hasznalatban vannak. */
}
.nw-solutions__video { object-fit: cover; }
.nw-solutions__layer.is-prev { opacity: 1; z-index: 1; transition: none; }
.nw-solutions__layer.is-active { opacity: 1; z-index: 2; }
/* --- Allo markafelulet video helyett -------------------------------
Az Industrial Applications es a Compounds pillerhez NINCS forgatott
anyagunk. Egy masik piller klipjet alajuk tenni felrevezetes lenne
(autos belso ipari vagy anyagtechnologiai allitas alatt), generalt
videot pedig nem gyartunk. Amig az ugyfel nem kuld anyagot, ez a ket
piller markafeluletet kap.
Brandbook: a pattern CSAK navy hatteren, nagy leptekben. A szinpad
alaphattere Blue tint 1, ezert a reteg SAJAT navy hatteret hoz; a
brandband.svg mintaja maga Blue tint 1 navy-n, es object-fit: cover
mellett a 16:9-es szinpadon egyetlen nagy forma tolti ki -- pontosan
az a leptek, amit a brandbook eloir. */
/* A wireframe-badge a szinpad bal felso sarkaban -- a felirat a jobb also
sarokban ul, tehat nem takarjak egymast. */
/* z-index 3, mert az aktiv reteg 2-n all. Enelkul a felirat es a
jelzosav a reteg ALA kerult (pozicionalt elem z-index: auto-val a
pozitiv z-indexu testverek ala festodik) -- a klipeken ez alig
latszott, az allo markafeluleten viszont a piller neve tunt volna el. */
.nw-solutions__caption {
position: absolute; inset-inline: 0; inset-block-end: 0;
z-index: 3;
padding: var(--nw-space-3);
font-family: var(--nw-font-display);
font-size: var(--nw-text-base);
font-weight: var(--nw-fw-semibold);
color: var(--nw-white);
background: linear-gradient(to top, rgb(27 30 82 / 0.92), rgb(27 30 82 / 0));
}
/* Lejátszás-állapotjelző: vékony narancs sáv a színpad tetején. */
.nw-solutions__progress {
position: absolute; inset-block-start: 0; inset-inline: 0;
z-index: 3;
block-size: 2px; background: var(--nw-sun);
transform: scaleX(var(--p, 0)); transform-origin: left;
transition: transform 90ms linear;
opacity: 0;
}
.nw-solutions[data-playing] .nw-solutions__progress,
[data-solutions][data-playing] .nw-solutions__progress { opacity: 1; }
/* --- Solutions zaro allitas ----------------------------------------
Master copy 0129-0130: a hat piller UTAN all, es azt mondja ki, ami
mindegyikben kozos. Nem a .nw-statement szekcio (az onallo, teljes
szekcionyi blokk, es abbol egy van az oldalon) -- ez a Solutions
szekcio sajat lezarasa, ezert kisebb, de a folyoszovegnel erosebb. */
.nw-solutions__closing {
margin-block-start: var(--nw-space-8);
font-family: var(--nw-font-display);
font-size: var(--nw-text-xl);
font-weight: var(--nw-fw-medium);
line-height: var(--nw-leading-snug);
letter-spacing: var(--nw-tracking-tight);
color: var(--nw-fg);
max-inline-size: 34ch;
}
/* --- Lifecycle -------------------------------------------------- */
.nw-lifecycle { margin-top: var(--nw-space-8); }
/* A .nw-lifecycle__lead megszunt (2026-09-01): a szekcio felvezeto
bekezdese az ugyfel master copyjaban a Solutions ZARO allitasa lett,
es sajat osztalyt kapott (.nw-solutions__closing), a lepessor
bevezetojet pedig a .nw-lifecycle__note viszi. */
/* Mostantol valodi cim, nem eyebrow-cimke. */
.nw-lifecycle__label {
margin-block: var(--nw-space-6) var(--nw-space-2);
font-size: var(--nw-text-lg);
font-weight: var(--nw-fw-semibold);
}
/* A cim ala kerult magyarazo sor. Halvanyabb, mint a lifecycle__lead --
az a szekcio osszefoglaloja, ez csak a lepessort vezeti fel. */
.nw-lifecycle__note {
margin-block-end: var(--nw-space-3);
font-size: var(--nw-text-base);
color: var(--nw-fg-secondary);
max-width: 62ch;
}
/* --- Lepesenkent nyilo folyamatsor ---------------------------------
Vizszintes harmonika. A nyitott lepes szeles, a tobbi keskeny hasab.
A szelesseget flex-grow animalja, nem width: igy nincs layout-ugras,
es a hat hasab egyutt mindig pontosan kitolti a sort.
Miert nem csak nagyobb pottyok: az ugyfel nem (csak) a lathatosagot
kifogasolta, hanem azt is, hogy "too minimalistic". Egy vegigkattinthato
folyamat megmutatja, hogy hat allomasrol van szo, es hogy ezek
SORRENDBEN kovetik egymast -- ezt egy statikus lista nem mondja el. */
.nw-lifecycle__steps {
display: flex;
gap: var(--nw-space-2);
align-items: stretch;
}
.nw-step { display: flex; flex: 1 1 0; min-inline-size: 0; }
/* UJRAHANGOLVA 2026-09-01. Az ugyfel master copyja a lepesekhez 3-4-szer
hosszabb magyarazatot ad, mint a korabbi agency-copy (a Virtual
Validation ketmondatos, ~330 karakter). A regi 2.4-es grow mellett a
nyitott hasab a sor ~32%-a volt: a szoveg 8-9 sorba tort, es a mellette
allo, ures osszecsukott hasabok ugyanolyan magasra nyultak.
3.4-nel a nyitott hasab a sor ~42%-a, a szoveg 5-6 sor. Feljebb nem
erdemes menni: az osszecsukott hasabok szelessegebol venne el, es az
"Industrialization" (a leghosszabb egybefuggo szo) mar nem ferne el
tordeles nelkul. */
.nw-step:has(> [aria-expanded="true"]) { flex-grow: 3.4; }
.nw-step__btn {
inline-size: 100%;
display: flex; flex-direction: column; gap: 0.5rem;
/* A vizszintes margo szandekosan kisebb a fuggolegesnel: egy ~140 px-es
hasabban minden pixel szamit, es az "Industrialization" (a leghosszabb
egybefuggo szo) csak igy fer el tordeles nelkul. */
padding: var(--nw-space-3) 0.8rem;
text-align: start;
background: color-mix(in oklab, var(--nw-white) 5%, transparent);
border: 1px solid var(--nw-rule);
border-radius: var(--nw-radius-card);
color: var(--nw-fg);
cursor: pointer;
overflow: hidden;
transition: background var(--nw-dur-base) var(--nw-ease),
border-color var(--nw-dur-base) var(--nw-ease);
}
.nw-step__btn:hover { border-color: color-mix(in oklab, var(--nw-sun) 60%, transparent); }
.nw-step__btn:focus-visible { outline: 2px solid var(--nw-sun); outline-offset: 2px; }
.nw-step__num {
font-family: var(--nw-font-display);
font-size: var(--nw-text-sm);
font-weight: var(--nw-fw-bold);
letter-spacing: var(--nw-tracking-wide);
color: var(--nw-fg-secondary);
transition: color var(--nw-dur-base) var(--nw-ease);
}
.nw-step__name {
font-family: var(--nw-font-display);
font-weight: var(--nw-fw-medium);
line-height: var(--nw-leading-snug);
color: var(--nw-fg);
/* A meret az allapottol fugg, lasd lentebb: osszecsukva kicsi, hogy a
~150 px-es hasabban ertelmes helyeken torjon a sor. Az xs azert kell,
mert sm-nel az "Industrialization" meg mindig 4 px-szel tullogott. */
font-size: var(--nw-text-xs);
transition: font-size var(--nw-dur-base) var(--nw-ease);
}
/* A magyarazo mondat CSAK a nyitott lepesen latszik. Osszecsukva nincs
renderelve, tehat nem is befolyasolja a hasab magassagat.
NINCS max-inline-size: a korabbi 46ch-s korlat a regi, egymondatos
agency-copyhoz keszult. A master copy hosszabb szovegeinel a korlat
csak szukebbre fogta volna a sort, tehat MAGASABBRA nyujtotta volna a
nyitott hasabot -- pont az ellenkezojet annak, amit akarunk. A hasab
szelesseget a flex-grow szabja meg, ez itt kitolti. */
.nw-step__desc {
display: none;
font-size: var(--nw-text-sm);
line-height: var(--nw-leading-body);
color: var(--nw-fg-secondary);
}
[aria-expanded="true"] .nw-step__desc { display: block; }
/* --- A nyitott lepes ------------------------------------------------
A Sun itt jelenik meg, es CSAK itt: egyszerre legfeljebb egy lepes
nyitott, tehat az akcent egy hasabnyi felulet -- boven a 10-15%-os
keret alatt. */
[aria-expanded="true"].nw-step__btn {
background: color-mix(in oklab, var(--nw-white) 12%, transparent);
border-color: color-mix(in oklab, var(--nw-sun) 75%, transparent);
}
[aria-expanded="true"] .nw-step__num { color: var(--nw-sun); }
[aria-expanded="true"] .nw-step__name { font-size: var(--nw-text-lg); }
/* A nyitott hasabon a sorszam es a nev EGY sorba kerul. A hosszabb
magyarazo szovegek mellett igy ket sornyi (~48 px) magassag szabadul
fel, es a fejlec egyben olvashato: "01 Requirements Engineering". */
[aria-expanded="true"].nw-step__btn {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: baseline;
column-gap: 0.65rem;
row-gap: 0.6rem;
}
[aria-expanded="true"] .nw-step__desc { grid-column: 1 / -1; }
/* Osszecsukva szukebb vizszintes margo. Ez adja vissza azt a ~10 px-et,
amit a nyitott hasab kiszelesitese (2.4 -> 3.4 grow) elvett -- az
"Industrialization" igy tovabbra is elfer egy sorban. */
[aria-expanded="false"].nw-step__btn { padding-inline: 0.6rem; }
/* Osszecsukva a nev TORDELHET, nem csonkul. Az elso valtozat
ellipszissel vagta ("Virtual val..."), csakhogy pont az informaciot
vette el, amiert a lepessor egyaltalan ott van: az ugyfel azt
kifogasolta, hogy tul keveset mond. A kartyak egyforma magasak, tehat
a tobbsoros nev nem tori el a sort. */
[aria-expanded="false"] .nw-step__name {
/* NINCS hyphens: auto. Az elso valtozat azzal ment, es csunya helyeken
vagott ("Virtual valida-tion"). Helyette a kisebb betumeret + a
szukebb vizszintes margo oldja meg: a szavak igy egeszben elfernek.
A break-word csak vegso hato nagyon keskeny vasznon -- normal
szelessegen nem szabad bekapcsolnia ("Industrializatio-n"). */
overflow-wrap: break-word;
}
/* Keskeny kepernyon a vizszintes harmonika ertelmetlen: hat hasab egy
~360 px-es sorban olvashatatlan. Ott fuggoleges lista lesz, a nyitott
lepes pedig csak kiemelt, nem szelesebb.
A hatar 52rem -> 80rem (2026-09-01), meressel. Az "Industrialization"
(a leghosszabb egybefuggo lepesnev) a hasab betumeretén 105 px-t
igenyel egy sorban. A 3.4-es grow mellett ehhez legalabb ~124 px-es
osszecsukott hasab kell, ami ~1230 px-es viewportnal all elo; 1281
px-tol mar ~112 px a belso hely, tehat van tartalek a betukeszlet
metrikajanak ingadozasara is.
Az az alatti savban a regi hatar (832 px) mellett az "Industrializat /
ion" a szo kozepen tort ket sorba. Tableten es kis laptopon ezert most
a fuggoleges lista megy, ahol minden lepesnek egesz sor jut. */
@media (max-width: 80rem) {
.nw-lifecycle__steps { flex-direction: column; }
.nw-step, .nw-step:has(> [aria-expanded="true"]) { flex: 0 0 auto; }
[aria-expanded="false"] .nw-step__name { white-space: normal; }
.nw-step__btn { flex-direction: row; align-items: baseline; gap: var(--nw-space-2); }
/* Fuggoleges listaban van hely: az osszecsukott nev is olvashato meretu. */
[aria-expanded="false"] .nw-step__name { font-size: var(--nw-text-base); }
[aria-expanded="false"].nw-step__btn { padding-inline: var(--nw-space-3); }
/* Itt a hasab a teljes sor szelessege: 1200 px-en a magyarazat egyetlen
~140 karakteres sorra nyulna. A sorhosszt ezert visszafogjuk az
olvashato mertekre -- fuggolegesen ugyis van hely. */
.nw-step__desc { max-inline-size: var(--nw-measure); }
}
.nw-stack__body {
margin-block-start: var(--nw-space-4);
max-inline-size: 62ch;
}
.nw-stack__body > * + * { margin-top: var(--nw-space-2); }
.nw-stack__body p { color: var(--nw-fg); }
/* Ketoszlopos editorial. Korabban a cim teljes szelessegben allt, alatta
62ch-re fogott szoveg, a jobb fel meg ures maradt -- es a negy elv
kulon, a bekezdesek alatt logott. Igy a szoveg es az elvek egymas
mellett allnak: az ures fel megszunik, a szekcio rovidebb lesz, es a
kettonek vegre koze van egymashoz.
Ez NEM a "nagy cim balra + kis magyarazo bekezdes jobbra" AI-minta:
ott a jobb oszlop masodlagos fuggelek, itt mindketto elsodleges
tartalom, es a cim mindketto folott all. */
.nw-ambition__grid {
margin-block-start: var(--nw-space-4);
display: grid;
gap: var(--nw-space-5);
}
@media (min-width: 60rem) {
.nw-ambition__grid {
/* Az ugyfel 2026-08-21: "Left side and right side need to have more
white space between. The page is not well structure and it is not
harmonized." A fix 3rem-es koz egy 1200+ px-es layouton osszeert;
most a koz a viewporttal no, es a szovegoszlop is kap egy felso
hatart, hogy a sorhossz ne fusson szet. Ugyanaz a clamp-recept,
mint a media ures allapotanal -- egy rendszer, nem ket megoldas. */
grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
gap: clamp(3rem, 1rem + 6vw, 7rem);
align-items: start;
}
.nw-ambition__grid .nw-stack__body { max-inline-size: 58ch; }
/* Az elv-index kitart, amig a bekezdeseket olvasod. */
.nw-ambition__grid .nw-principles {
position: sticky;
inset-block-start: calc(var(--nw-nav-h) + var(--nw-nav-inset) + var(--nw-space-4));
}
}
.nw-ambition__grid .nw-stack__body { margin-block-start: 0; }
/* A cim ala kerult alcim (master copy 0163: "Not as a promise - but
through the way we work, collaborate and deliver, every day.").
Ugyanaz a tipografiai szerep, mint az aloldali hero .nw-subhero__lead-je:
a cim a fo hang, ez a magyarazata -- ezert lg meret, snug sorkoz es
masodlagos szin, nem a .nw-lead torzsszoveg-hangja. Nem ujrahasznaljuk
magat a .nw-subhero__lead-et: az a subhero szekcio-komponensehez
tartozik, es ha ott valtozik a hero-kontextus, az itt nem hathat vissza.
A grid folott all, teljes szelessegben, hogy ne az elv-oszlopot szoritsa. */
.nw-ambition__lead {
margin-block-start: var(--nw-space-3);
margin-block-end: 0;
max-inline-size: 52ch;
font-size: var(--nw-text-lg);
line-height: var(--nw-leading-snug);
color: var(--nw-fg-secondary);
text-wrap: pretty;
}
.nw-principles {
border-block-start: 1px solid var(--nw-rule);
}
.nw-principles li {
position: relative;
display: block; /* a sorszam-oszlop megszunt */
padding-block: var(--nw-space-3);
border-block-end: 1px solid var(--nw-rule);
transition: padding-inline-start var(--nw-dur-base) var(--nw-ease);
}
/* A narancs csík csak hoverre jelenik meg, és csak a bal szélen --
így az akcent akkor sem lépi túl a 10-15%-os keretet, ha mind a
négy sor egyszerre látszik. */
.nw-principles li::before {
content: "";
position: absolute; inset-block: 0; inset-inline-start: 0;
inline-size: 2px; background: var(--nw-sun);
transform: scaleY(0); transform-origin: center;
transition: transform var(--nw-dur-base) var(--nw-ease);
}
.nw-principles li:hover,
.nw-principles li[data-active] { padding-inline-start: var(--nw-space-2); }
.nw-principles li:hover::before,
.nw-principles li[data-active]::before { transform: scaleY(1); }
.nw-principles__text {
font-family: var(--nw-font-display);
font-size: var(--nw-text-xl);
font-weight: var(--nw-fw-medium);
line-height: var(--nw-leading-snug);
letter-spacing: var(--nw-tracking-tight);
color: var(--nw-fg-secondary);
transition: color var(--nw-dur-base) var(--nw-ease);
}
.nw-principles li:hover .nw-principles__text,
.nw-principles li[data-active] .nw-principles__text { color: var(--nw-fg); }
/* Levegosebb valtozat. Az ambition pillerek otrol NEGYRE csokkentek
(master copy 2026-09-01), es az ugyfel korabban pont azt kifogasolta,
hogy a szoveg rossz helyeken torik. Egy sorral kevesebb tetel mellett
van hely a nagyobb fuggoleges levegore, a text-wrap: balance pedig
kiegyenliti a ket-harom soros teteleket, hogy ne maradjon arva szo. */
.nw-principles--airy li { padding-block: var(--nw-space-4); }
.nw-principles--airy .nw-principles__text { text-wrap: balance; }
/* A nem-hoverelt sorok NEM halványodnak tovább. Kipróbáltam a
--nw-blue-2-re halványítást, de az 2,84:1 navy-n -- bukott kontraszt
elsődleges tartalmon. A hoverelt sor kiemelése önmagában elég:
alap 5,32:1 (AA), hoverelve 15,51:1 (AAA). */
/* --- Kártyák --------------------------------------------------- */
.nw-cards {
display: grid; gap: var(--nw-space-3);
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
margin-top: var(--nw-space-4);
}
.nw-cards a {
display: block; block-size: 100%;
padding: var(--nw-space-3);
text-decoration: none;
border: 1px solid var(--nw-rule);
border-radius: var(--nw-radius-card);
transition: transform var(--nw-dur-base) var(--nw-ease),
border-color var(--nw-dur-base) var(--nw-ease);
}
.nw-cards a:hover { transform: translateY(-4px); border-color: var(--nw-accent-text); }
.nw-cards h3 { margin-bottom: 0.6rem; }
/* Az ugyfel 2026-08-21-en ezt a blokkot jelolte meg: "Letters are to small
it is hard to read after the title." Ket dolog volt kicsi rajta: a
--nw-text-sm (14-15 px) egy nagy h2 utan, es a masodlagos szovegszin
(5,32:1). Most base meret es teljes kontraszt. */
.nw-cards p { font-size: var(--nw-text-base); color: var(--nw-fg); line-height: var(--nw-leading-body); }
.nw-cards__go {
display: flex; align-items: center; justify-content: center;
inline-size: 2rem; block-size: 2rem;
margin-top: var(--nw-space-2);
border-radius: 50%;
border: 1px solid var(--nw-rule);
color: var(--nw-fg);
transition: transform var(--nw-dur-fast) var(--nw-ease),
border-color var(--nw-dur-fast) var(--nw-ease);
}
.nw-cards a:hover .nw-cards__go { transform: translateX(4px); border-color: var(--nw-navy); }
/* --- Aloldal-hero --------------------------------------------- */
.nw-subhero { min-block-size: 60svh; display: grid; align-items: end; }
/* Subheadline a subhero fociime alatt.
Az aloldalak bevezeto mondata korabban a hero ALATTI vilagos szekcio elso
bekezdese volt, a dolt statement-kiserlet utan pedig kulon kiemelt
blokkent lebegett ott. Mindketto elszakitotta a cimtol, pedig a
tervezes szerint a cim ala tartozik.
A szin --nw-fg-secondary: navy hatteren ez a blue-4, 8,90:1. Feher lenne a
masik lehetoseg, de az versenyezne a h1-gyel; itt a cim a fo hang, ez
pedig a magyarazata. */
.nw-subhero__lead {
margin-block-start: var(--nw-space-3);
margin-block-end: 0;
max-inline-size: 46ch;
font-size: var(--nw-text-lg);
line-height: var(--nw-leading-snug);
color: var(--nw-fg-secondary);
text-wrap: pretty;
}
.nw-subhero h1 { font-size: var(--nw-text-3xl); }
/* --- Névbontás ------------------------------------------------- */
.nw-namesplit {
display: grid; gap: var(--nw-space-3);
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
margin-top: var(--nw-space-6);
}
.nw-namesplit li { padding-top: var(--nw-space-2); border-top: 2px solid var(--nw-sun); }
.nw-namesplit strong {
display: block;
font-family: var(--nw-font-display);
font-size: var(--nw-text-2xl);
font-weight: var(--nw-fw-bold);
letter-spacing: var(--nw-tracking-tight);
}
.nw-namesplit span { font-size: var(--nw-text-sm); color: var(--nw-fg-secondary); }
/* --- Listák ----------------------------------------------------- */
.nw-section__sub { font-size: var(--nw-text-2xl); margin-top: var(--nw-space-8); }
.nw-joblist { margin-top: var(--nw-space-3); }
.nw-job { padding-block: var(--nw-space-2); border-bottom: 1px solid var(--nw-rule); }
.nw-job__title { font-size: var(--nw-text-lg); }
.nw-job__meta { font-size: var(--nw-text-sm); color: var(--nw-fg-secondary); margin-top: 0.25rem; }
.nw-note { margin-top: var(--nw-space-3); font-size: var(--nw-text-sm); color: var(--nw-fg-secondary); }
/* --- Media: cikk nelkuli allapot ---------------------------------
Nem "ures oldal" es nem "coming soon": egy rovid Newsroom-szekcio,
mellette a sajto-kapcsolat. Igy az oldal onmagaban is kerek, amig
az ugyfel tartalmat ad. A racs visszaepitese egy sor a data/news.js-ben. */
.nw-mediaempty {
display: grid;
gap: var(--nw-space-6);
margin-top: var(--nw-space-5);
align-items: start;
}
/* A `hidden` attributumot a `display: grid` FELULIRJA -- a bongeszo UA
stiluslapjaban a [hidden]{display:none} kisebb sulyu, mint egy sajat
osztaly. Amig a hirlista ures volt, ez nem latszott (a blokk ugyis
lathato volt); az elso valodi cikk megjelenesevel viszont a js/lists.js
hiaba allitotta a .hidden-t, a "cikk nelkuli" szoveg ott maradt a
kartya alatt. Mindket iranyra kell a szabaly, mert a hirlista -je
is grid es ugyanigy indul rejtve. */
.nw-mediaempty[hidden],
.nw-newslist[hidden] { display: none; }
@media (min-width: 56rem) {
.nw-mediaempty {
/* A jobb hasab keskenyebb: kapcsolati adat, nem folyoszoveg.
A nagy koz szandekos -- az ugyfel a fooldalon kifejezetten tobb
levegot kert a bal es jobb oldal koze. */
grid-template-columns: minmax(0, 1.55fr) minmax(16rem, 0.85fr);
gap: clamp(3rem, 1rem + 6vw, 7rem);
}
}
.nw-mediaempty__body > * + * { margin-top: var(--nw-space-3); }
.nw-mediaempty__body h2 { margin: 0; }
/* --- Media: sajto-kapcsolat --------------------------------------
2026-09-01-ig ez a kartya az "ures allapot" blokk jobb hasabja volt
(.nw-mediaempty__contact). Amint megjott az elso valodi cikk, a
js/lists.js elrejti azt a blokkot -- vagyis a sajto-kapcsolat is
eltunt volna vele. Ezert onallo, MINDIG lathato elem lett a hirlista
alatt, sajat osztallyal.
A bal el vastag kek savja ugyanaz a jel, mint a pullquote-nal:
"ez kiemelt, nem folyoszoveg". A max-inline-size azert kell, mert a
kartya itt mar nem egy racs hasabjaban ul, hanem a teljes szelesseget
megkapna -- kapcsolati adatbol pedig nem csinalunk folyoszoveg-sort. */
/* Kiemelt kapcsolatkartya. Eloszor a Media oldalon keszult, majd az ugyfel
2026-09-04-en azt kerte, hogy a karrier-cim is ILYEN onallo, jol lathato
blokk legyen ("should be separate to be more visible like media contact
as example"), ezert oldalfuggetlen komponens lett belole. */
.nw-contactcard {
margin-block-start: var(--nw-space-6);
max-inline-size: 26rem;
padding: var(--nw-space-4);
border: 1px solid var(--nw-rule);
border-radius: var(--nw-radius-card);
border-inline-start: 3px solid var(--nw-blue-2);
}
.nw-contactcard h2 {
margin: 0 0 var(--nw-space-2);
font-size: var(--nw-text-lg);
}
.nw-contactcard p { margin: 0; }
.nw-contactcard p + p { margin-top: var(--nw-space-2); }
.nw-contactcard__note {
font-size: var(--nw-text-sm);
color: var(--nw-fg-secondary);
}
/* --- Hírlista és cikk ------------------------------------------- */
/* auto-FILL, nem auto-fit. Kulonbseg: auto-fit osszevonja az ures
savokat, ezert EGY cikknel a kartya vegignyult volna a teljes soron
(2026-09-01 ota pontosan ez az allapot: egy valodi hir). Az auto-fill
meghagyja az ures savokat, tehat egy kartya is a megszokott
harmadnyi szelessegen all. Harom vagy tobb cikknel a ketto viselkedese
azonos, tehat a korabbi harmas racs nem valtozik.
A min() a keskeny kepernyot vedi: 340px-nel szukebb viewporton a sav
nem tullogna a kepernyon. */
.nw-newslist {
display: grid; gap: var(--nw-space-3);
grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
margin-top: var(--nw-space-4);
}
.nw-news a {
display: block; block-size: 100%;
padding: var(--nw-space-3);
text-decoration: none;
border: 1px solid var(--nw-rule);
border-radius: var(--nw-radius-card);
transition: transform var(--nw-dur-base) var(--nw-ease),
border-color var(--nw-dur-base) var(--nw-ease);
}
.nw-news a:hover { transform: translateY(-4px); border-color: var(--nw-accent-text); }
/* A kep a kartya teljes szelesseget elfoglalja, a padding ala nyulva.
Fix 16:9 arany, hogy a harom kartya egy vonalban alljon meg akkor is,
ha kesobb mas meretu kepet toltenek fel. */
.nw-news__media {
/* Szandekosan NINCS inline-size megadva: a szelesseget a negativ
margoval egyutt a "width:auto" hataroza meg, hogy a doboz PONTOSAN
a kartya szeleig erjen mindket oldalon. Ha a szelesseg is explicit
(100%) VOLNA, a width/margin-left/margin-right harmasa
tulhatarozott lenne, es a bongeszo a margin-right-ot szamolja at --
ettol a doboz a bal szelen jol veruzik, de a jobb szelen nem,
tehat elcsusznak nezett ki. */
display: block;
aspect-ratio: 16 / 9;
margin: calc(var(--nw-space-3) * -1) calc(var(--nw-space-3) * -1) var(--nw-space-3);
border-start-start-radius: calc(var(--nw-radius-card) - 1px);
border-start-end-radius: calc(var(--nw-radius-card) - 1px);
overflow: hidden;
/* Kep helyett a neuwerk brand pattern, navy hatteren -- ugyanaz az
asset, mint az aloldali herokban es a brand-savban. Miert nem
sertes a brandbook "csak nagy leptekben" szabalya: a kep 1920x260-as
savbol jon, a cover a kartya MAGASSAGAHOZ igazit (a kep sokkal
szelesebb, mint a 16:9 doboz), ezert egy kartyara mindossze egy-ket
forma esik, teljes kartyamagassagban -- nem suru, nem kicsi.
A navy alaszin akkor is helyes hatteret ad, ha az SVG meg tolt. */
background: var(--nw-navy) url("../assets/img/brandband.svg") center / cover no-repeat;
}
/* Harom kartya egymas mellett ugyanabbol a savbol MAS reszletet mutat,
kulonben a sor harom azonos kepkivagasbol allna. Csak a vizszintes
pozicio valtozik, a leptek nem. */
.nw-news:nth-child(3n + 2) .nw-news__media { background-position: 32% center; }
.nw-news:nth-child(3n + 3) .nw-news__media { background-position: 78% center; }
.nw-news time {
display: block; margin-bottom: 0.5rem;
font-size: var(--nw-text-xs);
letter-spacing: var(--nw-tracking-wide);
color: var(--nw-fg-secondary);
}
.nw-news h3 { font-size: var(--nw-text-lg); margin-bottom: 0.5rem; }
.nw-news p { font-size: var(--nw-text-sm); color: var(--nw-fg-secondary); }
.nw-article__date { font-size: var(--nw-text-sm); color: var(--nw-fg-secondary); margin-top: var(--nw-space-2); }
.nw-article__body { max-width: 72ch; }
.nw-article__body > * + * { margin-top: var(--nw-space-2); }
.nw-article__body h2 { font-size: var(--nw-text-xl); margin-top: var(--nw-space-6); margin-bottom: var(--nw-space-2); }
.nw-article__body code {
font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
font-size: 0.9em;
padding: 0.1em 0.35em;
background: var(--nw-grey-06);
border-radius: 3px;
}
/* --- Dokumentumlista -------------------------------------------- */
.nw-doclist {
display: grid; gap: var(--nw-space-2);
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
margin-top: var(--nw-space-3);
}
.nw-doclist a {
display: flex; flex-direction: column; block-size: 100%;
padding: var(--nw-space-3);
text-decoration: none;
border: 1px solid var(--nw-rule);
border-radius: var(--nw-radius-card);
transition: transform var(--nw-dur-base) var(--nw-ease),
border-color var(--nw-dur-base) var(--nw-ease);
}
.nw-doclist a:hover { transform: translateY(-4px); border-color: var(--nw-accent-text); }
.nw-doclist h3 { font-size: var(--nw-text-lg); margin-bottom: 0.5rem; }
.nw-doclist p { font-size: var(--nw-text-sm); color: var(--nw-fg-secondary); flex: 1; }
.nw-doclist__meta {
display: inline-block; margin-top: var(--nw-space-2);
font-family: var(--nw-font-display);
font-size: var(--nw-text-xs);
font-weight: var(--nw-fw-semibold);
letter-spacing: var(--nw-tracking-wide);
color: var(--nw-accent-text);
}
.nw-doclist--dark { grid-template-columns: minmax(0, 420px); }
/* --- Kontakt ---------------------------------------------------- */
.nw-contact {
display: grid; gap: var(--nw-space-4);
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
margin-top: var(--nw-space-6);
}
.nw-contact li { padding-top: var(--nw-space-2); }
.nw-contact h3 { font-size: var(--nw-text-base); margin-bottom: var(--nw-space-1); }
.nw-contact p { font-size: var(--nw-text-sm); margin-bottom: 0.35rem; }
.nw-contact__addr { color: var(--nw-fg); }
/* --- Képes aloldal-hero ------------------------------------------
Az Identity panasza az volt, hogy tömör szövegfal. A hero így
kap egy vizuális belépőt, a szöveg olvashatóságát pedig a scrim
biztosítja -- kép fölött soha nem hagyunk szöveget scrim nélkül. */
.nw-subhero--image { position: relative; isolation: isolate; overflow: clip; }
.nw-subhero__bg {
position: absolute; inset: 0;
inline-size: 100%; block-size: 100%;
object-fit: cover; object-position: center 38%;
z-index: 0;
}
.nw-subhero__scrim {
position: absolute; inset: 0; z-index: 1;
background: linear-gradient(to top,
rgb(27 30 82 / 0.95) 0%, rgb(27 30 82 / 0.62) 55%, rgb(27 30 82 / 0.38) 100%);
}
.nw-subhero--image > .nw-shell { position: relative; z-index: 2; }
/* Pattern-hero: a .nw-pill primitivbol epul. Csak a kontenert kell megadni --
a formak stilusat a .nw-pill szabalyok viszik, a meretuket pedig a --nw-bh,
amit itt a hero magassagara allitunk. */
.nw-subhero__shapes {
--nw-bh: 60svh;
position: absolute; inset: 0; z-index: 0;
overflow: clip;
background: var(--nw-bg);
}
.nw-subhero__pattern-img {
position: absolute; inset: 0;
inline-size: 100%; block-size: 100%;
object-fit: cover; object-position: center;
transform: scale(1.06);
}
/* Széles kinetikus mondat: aloldalon a vezérmondat egy sor, nem blokk. */
.nw-kinetic--wide {
max-width: 22ch;
font-size: var(--nw-text-2xl);
font-weight: var(--nw-fw-bold);
margin-bottom: var(--nw-space-8);
}
/* A harmadik névbontás-elem az összegzés, ezért kiemelve. */
.nw-namesplit--sum { border-block-start-width: 3px; }
.nw-namesplit--sum strong { color: var(--nw-fg); }
/* A cikkoldalakon a placeholder-badge a cim melle kerult, mert az
eyebrow-cimkek szamat le kellett vinni. Igy a cim melletti jeloles
ugyanolyan lathato, de nem gyarapitja a cimkeket. */
.nw-article h1 .nw-ph { vertical-align: middle; margin-inline-end: 0.5rem; }
/* --- Munkacsalad szerinti csoportositas a Career oldalon ----------
Az ugyfel benchmarkjai (Netflix About, Mercedes-Benz Group Careers)
lokacio es munkacsalad menten szervezik a poziciokat. Lapos lista
nem mutatja meg, milyen teruletei vannak a cegnek. */
.nw-jobgroup + .nw-jobgroup { margin-block-start: var(--nw-space-6); }
.nw-jobgroup__title {
display: flex; align-items: baseline; gap: 0.6rem;
padding-block-end: var(--nw-space-1);
border-block-end: 2px solid var(--nw-rule);
font-size: var(--nw-text-lg);
font-weight: var(--nw-fw-semibold);
}
.nw-jobgroup__count {
font-size: var(--nw-text-sm);
font-weight: var(--nw-fw-medium);
color: var(--nw-fg-secondary);
}
.nw-jobgroup__list { margin-block-start: 0.25rem; }
.nw-job__title { font-size: var(--nw-text-base); font-weight: var(--nw-fw-semibold); }
/* --- Brand-sav ----------------------------------------------------
Masodik nekifutas. Az elso valtozat kilenc pasztillaja MAGATOL mozgott:
mindegyik sajat idozitessel uszott, nott-zsugorodott es halvanyodott.
A visszajelzes szerint ez "gagyi" lett -- es jogosan: kilenc egymastol
fuggetlenul pulzalo elem screensaver-hatast ad, nem markajelet. A
kiserohoz generalt felirat is felesleges volt, a szekcio cime mar
elmondta ugyanazt.
Az uj valtozat harom nagy formaja NEM mozog magatol. Kizarolag a
gorgetesre reagal: mindharom mas sebesseggel csuszik vizszintesen, igy a
sav a lapozas kozben nyilik szet es zarodik ossze. Ket kovetkezmenye van,
ami mindketto szandekos:
- allo lapon a sav teljesen mozdulatlan, tehat nem vonja el a figyelmet
- a mozgas a felhasznalo sajat mozdulatabol szarmazik, nem autoplaybol
A csusztatas SZULOI tengely menten tortenik (a translate a rotate UTAN,
de a translateY(-50%) elott all), tehat vizszintes. Ha a sajat
hossztengelye menten csusztatnank, a formak fuggolegesen is elmozdulnanak
es kiesnenek a savbol.
A --shift erteket a js/pattern.js irja, ami prefers-reduced-motion
eseten el sem indul: ilyenkor a --shift vegig 0, a sav statikus. */
.nw-brandband {
position: relative;
margin-block-start: var(--nw-space-8);
/* A sav a szekcio also elehez tapad: a negativ also margo felszivja a
szekcio alsó paddingjet. Enelkul a sotet sav alatt maradt egy szeles
feher csik, mielott a kovetkezo szekcio elkezdodott volna. */
margin-block-end: calc(var(--nw-section-y) * -1);
/* A formak merete EBBOL szarmazik, nem a viewport szelessegebol.
Igy az arany minden felbontason ugyanaz marad. */
--nw-bh: clamp(200px, 26vw, 340px);
block-size: var(--nw-bh);
/* Explicit navy, nem --nw-bg: a sav vilagos szekcion belul is all,
a pattern viszont a brandbook szerint CSAK navy hatteren mehet. */
background: var(--nw-navy);
overflow: clip;
isolation: isolate;
}
/* --- A sav KET SZEKCIO KOZOTT --------------------------------------
A fenti margok arra az esetre valok, amikor a sav egy szekcion BELUL,
annak aljan ul (igy van az identity.html-en): felul leveg, alul negativ
margo, ami felszivja a szekcio also paddingjet.
Az index.html-en viszont a sav kozvetlenul a gyereke, ket vilagos
szekcio KOZOTT. Ott ugyanez felborul. Merve 1440 px-en:
felette 120 px szekcio-padding + 64 px sajat margo = 184 px feher
alatta a -120 px felszivja a kovetkezo szekcio TELJES felso
paddingjat, tehat 0 px
Vagyis minden leveg a sav fole kerult, alatta meg semmi.
Itt ezert mindket oldalon ugyanakkora, felbe vett szekciokoz all
(120 -> 60 px), a sav maga pedig 340 -> 480 px. A kep object-fit: cover,
tehat a magasabb savban egyszeruen tobb latszik a mintabol. */
main > .nw-brandband {
margin-block: calc(var(--nw-section-y) * -0.5);
--nw-bh: clamp(280px, 34vw, 480px);
}
/* A generalt pasztilla-mezot lecserelte egy kesz kepasset (ugyanaz a
formanyelv, csak raszterezve) -- egyetlen kep tolti ki a savot, a
meglevo [data-pattern]/[data-depth] scroll-shift mechanika valtozatlanul
viszi tovabb az enyhe parallaxot. */
.nw-brandband__img {
position: absolute;
inset-block: 0;
/* A kep szelesebb, mint a doboz -- pontosan annyival, amennyit a
max. --shift (data-depth 0.35 * 260px = ~91px) igenyel. Enelkul a
sav gorgetesre a kep szelen tul mozdul, es a doboz sotet hattere
latszik ki az elen a minta folytatasa helyett. A szulon mar van
overflow:clip, tehat a tobblet nyugalmi allapotban nem latszik. */
inset-inline-start: -100px;
/* A base.css globalis `img{max-width:100%}` reset enelkul visszavagna
a szelesseget a doboz meretere -- pont azt a tobbletet nyelve el,
amiert az egesz szabaly itt van. */
inline-size: calc(100% + 200px); max-inline-size: none;
block-size: 100%;
object-fit: cover;
transform: translate3d(var(--shift, 0px), 0, 0);
will-change: transform;
}
/* Szemcse a sav folott. A .nw-brandband-en mar van isolation: isolate,
ezert az overlay blend CSAK a savon belul hat -- nem szivarog at a
szomszedos szekciokra.
Az opacity szandekosan nagyon alacsony: 0,06-nal a szemcse nem "textura",
csak annyi, hogy a sik szinfoltoknak legyen anyaguk, es a nagy egyszinu
feluleteken ne savosodjon a szin. Ha latszik, hogy szemcse van rajta,
akkor mar tul sok. */
.nw-brandband::after {
content: "";
position: absolute;
inset: 0;
background-image: url("../assets/img/grain.png");
background-size: 96px 96px;
mix-blend-mode: overlay;
opacity: 0.06;
pointer-events: none;
}
/* --- Statement-blokk (Aptiv-minta) --------------------------------
Egyetlen nagy allitas, sajat szekcioban. NEM split-header: nincs
mellette magyarazo bekezdes, nincs eyebrow, nincs CTA. Az allitas
maga a tartalom.
Dramaturgiai helye a "kik vagyunk" es a "mit csinalunk" kozotti
valtas. Egyben megtori a szekcio-elrendezesek ismetlodeset is. */
.nw-statement {
background: var(--nw-bg);
color: var(--nw-fg);
padding-block: clamp(5rem, 4rem + 9vw, 11rem);
border-block: 1px solid var(--nw-rule);
}
.nw-statement__line {
margin: 0;
max-inline-size: 20ch;
font-family: var(--nw-font-display);
font-size: clamp(2rem, 1.2rem + 4.2vw, 5rem);
font-weight: var(--nw-fw-bold);
line-height: 1.04;
letter-spacing: var(--nw-tracking-tight);
text-wrap: balance;
}
/* Zaro valtozat a Career oldal aljara (master copy 2026-09-01: az
INVITATION az utolso elem, az Open positions utan).
Miert kell sajat fokozat: a fooldali statement egy hatszavas mondat,
annak all jol az 5rem es a 20ch. Az invitation ennek a tobbszorose --
ugyanezen a fokozaton ot-hat soros fuggoleges fallá nott volna, es
elnyomta volna a folotte allo CTA-t. Kisebb betu + szelesebb sormeret:
a mondat harom sorban zar, a szekcio pedig a lablec sotet savjaba er. */
.nw-statement--invite { padding-block: clamp(4rem, 3rem + 6vw, 8rem); }
.nw-statement--invite .nw-statement__line {
max-inline-size: 30ch;
font-size: clamp(1.75rem, 1.1rem + 2.6vw, 3.25rem);
line-height: 1.12;
}
/* --- Pull-quote ---------------------------------------------------
A brandbook a Lorat editorial szerepre irja elo. Egy oldalon egyszer,
ott ahol a mondat tenyleg allitas, nem folyoszoveg. */
.nw-pullquote {
margin: var(--nw-space-6) 0;
padding-inline-start: var(--nw-space-3);
border-inline-start: 3px solid var(--nw-blue-2);
}
/* Oldalnyito valtozat: nincs felso margoja, es valamivel nagyobb, mert
itt a statement a bevezeto, nem a szoveg kozepen ul. */
.nw-pullquote--lead { margin-block-start: 0; }
.nw-pullquote--lead p { font-size: var(--nw-text-2xl, var(--nw-text-xl)); max-inline-size: 42ch; }
.nw-pullquote p {
margin: 0;
font-family: var(--nw-font-editorial);
font-style: italic;
font-size: var(--nw-text-xl);
/* Az italic leszarhagas miatt 1.1 a minimum, kulonben a g es a p
alja levagodik. */
line-height: 1.25;
padding-block-end: 0.15em;
color: var(--nw-fg);
max-inline-size: 34ch;
}
/* A subhero hattere lehet kep VAGY video, ugyanaz a szabaly. */
video.nw-subhero__bg { object-fit: cover; }
/* --- Kinetikus statement ------------------------------------------
A szavak alulrol usznak be, sajat maszkjuk mogul, lepcsozetesen.
CSS-bol es nem videobol, mert igy a szoveg kijelolheto marad, a
kepernyoolvaso felolvassa, elesen skalazodik minden felbontason,
es nulla byte. Egy mp4 mindharmat elveszitene. */
.nw-statement__line .nw-kw {
display: inline-block;
overflow: hidden;
vertical-align: bottom;
padding-block-end: 0.08em; /* a leszarhagas (p, g, y) ne vagodjon le */
}
.nw-statement__line .nw-kw > span {
display: inline-block;
transform: translateY(105%);
transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
transition-delay: calc(var(--i, 0) * 90ms);
}
.nw-statement__line[data-on] .nw-kw > span { transform: none; }
@media (prefers-reduced-motion: reduce) {
.nw-statement__line .nw-kw > span { transform: none; transition: none; }
}
/* --- Lebego kep-hatter a heroban -----------------------------------
A contact es a legal-compliance hero hatteren a kep onallo, gorgetestol
fuggetlen, nagyon visszafogott lebegtetest kap -- nem parallax, csak
annyi mozgas, hogy a felulet ne alljon meg teljesen. Nincs mogottuk
gorgetheto szekcio, amihez a brand-sav parallaxat kotni lehetne. */
@media (prefers-reduced-motion: no-preference) {
.nw-subhero__pattern-img { animation: nw-drift-img 16s ease-in-out infinite alternate; }
}
@keyframes nw-drift-img {
from { transform: scale(1.06) translate3d(-1.2%, 0, 0); }
to { transform: scale(1.1) translate3d(1.2%, 0, 0); }
}
/* --- Atvezeto CTA-szekcio ------------------------------------------
Egy allitas es egy gomb, sotet felulettel elvalasztva. Ott hasznaljuk,
ahol a felhasznalo utja NEM ezen az oldalon folytatodik (Career ->
kulso karrierportal). */
.nw-cta .nw-lead { max-inline-size: 56ch; }
.nw-cta__action { margin-block-start: var(--nw-space-4); max-inline-size: none; }
/* --- Kategoria-index (Legal & Compliance) --------------------------
Harom ugroling a lap tetejen. Nem sticky oldalsav: harom elemnel az
tobb kromot adna, mint amennyi navigaciot. */
.nw-catnav {
display: flex; flex-wrap: wrap; gap: var(--nw-space-1);
margin-block-start: var(--nw-space-4);
}
.nw-catnav a {
display: block;
padding: 0.6rem 1.1rem;
border: 1px solid var(--nw-rule);
border-radius: var(--nw-radius-pill);
font-family: var(--nw-font-display);
font-size: var(--nw-text-sm);
font-weight: var(--nw-fw-medium);
color: var(--nw-fg);
text-decoration: none;
transition: border-color var(--nw-dur-base) var(--nw-ease),
background-color var(--nw-dur-base) var(--nw-ease);
}
.nw-catnav a:hover {
border-color: var(--nw-blue-1);
background: var(--nw-sunk);
}
/* --- MARKASAV LOGO-VALTOZAT (ugyfel-keres, 2026-09-03) ---------------
Ugyanaz a sav, csak a gorgetesre csuszo pattern-formak helyett a
logo-reveal klip tolti ki. A klip aranya 1600x314 (5,1:1), a sav
magassaga viszont a --nw-bh-bol jon, ezert `cover` a helyes illesztes:
szeles viewporton a klip felso-also szelebol vag, keskenyen a
szelessegbol. A logo a kep kozepen ul, tehat mindket esetben bent marad.
A klip hattere (26,28,80) es a --nw-navy (27,30,82) csatornankent 1-2
ertekkel ter el, ezert a video szele nem latszik a savon belul. */
.nw-brandband--logo {
/* A pattern-valtozat isolation/overflow beallitasai itt is kellenek,
azokat a .nw-brandband alapszabaly adja. */
display: block;
}
.nw-brandband__video {
position: absolute;
/* MIERT NEM `inset: 0`.
A sav negativ also margoval ul ket vilagos szekcio kozott
(main > .nw-brandband), tehat a KOVETKEZO szekcio rafedi a doboz
aljara. A festesi sorrend miatt ez nem szimmetrikus: az elozo
szekciora a sav fest ra (a sav a kesobbi elem), a kovetkezo viszont
a savra -- vagyis felul semmi nem vesz el, alul viszont igen.
A video a TELJES dobozt toltotte ki, a logo a doboz kozepen ult, es
ezert a LATHATO savban lejjebb latszott. Merve 1455 px-en: 210 px
felette, 124 px alatta, tehat 43 px-szel a latszo kozep alatt --
az ugyfel is ezt jelezte (2026-09-04).
A megoldas nem object-position: a video magassaga pontosan kiadja a
doboz magassagat (cover mellett nincs fuggoleges vagas), tehat az
object-position fuggolegesen nem mozdit semmit. Ehelyett a video
dobozat huzzuk fel pontosan annyival, amennyit a kovetkezo szekcio
elfed. */
inset-block-start: 0;
inset-inline: 0;
inline-size: 100%;
/* Explicit magassag, nem inset-block-end + auto: egy csereelt elemnel
(video) az `auto` magassag az intrinsic magassagot venne at, nem a
ket inset kozotti tavolsagot, es a sav nagy resze uresen maradna. */
block-size: calc(100% - var(--nw-section-y) * 0.5);
object-fit: cover;
object-position: center;
/* Nincs sajat hatter: a savtol orokli, igy a poszter betoltese elott is
navy all a helyen, nem fekete teglalap. */
}
/* Reduced motion: a js/brandloop.js el sem inditja a klipet, a poszter
viszont csak akkor latszik, ha a bongeszo mar letoltotte. Ezert itt a
sav MAGA kapja meg ugyanazt a kepet hatterkent, a videot pedig
elrejtjuk -- igy a kesz logo mozgas nelkul is ott van. */
@media (prefers-reduced-motion: reduce) {
.nw-brandband--logo {
background-image: url("../assets/video/logo-reveal.jpg");
background-size: cover;
background-position: center;
}
.nw-brandband__video { display: none; }
}
/* --- Career kartyafotok (ugyfel-keres, 2026-09-03) -------------------
A kep a kartya FELSO elejeig er ki, ugyanazzal a fogassal, amit a
hircikk-kartya hasznal (.nw-news__media): negativ margo szivja fel a
kartya paddingjet, es csak a KET FELSO sarok kerekitett, hogy a kep a
kartya keretehez simuljon.
A blokk paddingja --nw-space-4, tehat a negativ margo is annyi. A
sarok-sugar 1 px-szel kisebb a kartyaenal: a keret vonala igy nem
villan ki a kep ala. */
.nw-career__media {
display: block;
/* A szelesseget EXPLICIT adjuk meg, nem auto-t: az ![]()
intrinsic
szelessege es a base.css max-inline-size: 100% szabalya kulonben a
kartya BELSO szelessegehez igazitana, es a kep a negativ margo miatt
balra csuszna, jobbrol pedig 2x padding hianyozna. Merve: 446 px
helyett 494 px kell egy 535 px-es kartyaban. */
inline-size: calc(100% + var(--nw-space-4) * 2);
max-inline-size: none;
block-size: auto;
aspect-ratio: 16 / 9;
object-fit: cover;
margin: calc(var(--nw-space-4) * -1) calc(var(--nw-space-4) * -1)
var(--nw-space-3);
border-start-start-radius: calc(var(--nw-radius-card) - 1px);
border-start-end-radius: calc(var(--nw-radius-card) - 1px);
}
/* --- SOLUTIONS IKONOK (ugyfel-dontes, 2026-09-04) --------------------
A hat pillert vonalas SVG ikon kepviseli a szinpadon, a kocsi-animatikok
helyett. Ugyanaz a vonalvastagsag es kerekites mindegyiken, alapszin a
blue-4 (navy hatteren 8,90:1), es minden ikonon PONTOSAN EGY Sun elem --
igy a szekcio Sun-aranya a brandbook 10-15%-a alatt marad.
A retegkezelest (abszolut pozicio, usztatas) a .nw-solutions__layer adja;
itt csak a kozepre igazitas es a mozgas van. */
.nw-solutions__icon {
display: grid;
place-items: center;
}
.nw-solutions__icon svg {
inline-size: min(52%, 300px);
block-size: auto;
/* A stroke-linecap: round kilog a viewBoxbol; enelkul levagodna. */
overflow: visible;
}
.nw-si-l {
fill: none;
stroke: var(--nw-blue-4);
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
}
.nw-si-tooth {
fill: none;
stroke: var(--nw-blue-4);
stroke-width: 5;
stroke-linecap: round;
}
.nw-si-f { fill: var(--nw-sun); stroke: none; }
.nw-si-sun { stroke: var(--nw-sun); }
.nw-si-dim { opacity: .45; }
/* A nem aktiv ikon animacioja all: felesleges munka egy 0 opacitasu
retegen, es a valtaskor igy nem "kozepen" veszi at a mozgast. */
.nw-solutions__icon:not(.is-active):not(.is-prev) * { animation-play-state: paused; }
.nw-solutions__icon.is-active * { animation-play-state: running; }
/* 1. Thermal: a hutokor korbefut az akkumulatorcsomagon */
@keyframes nw-si-flow { to { stroke-dashoffset: -60; } }
.nw-si-loop { stroke-dasharray: 10 8; animation: nw-si-flow 2.2s linear infinite; }
@keyframes nw-si-warm { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.nw-si-bulb { animation: nw-si-warm 2.6s ease-in-out infinite; }
/* 2. Emission: a reszecskek belepnek es tisztan tavoznak */
@keyframes nw-si-drift {
0% { transform: translateX(0); opacity: 0; }
15% { opacity: 1; }
70% { opacity: 1; }
100% { transform: translateX(58px); opacity: 0; }
}
.nw-si-p { animation: nw-si-drift 2.4s linear infinite; }
.nw-si-p2 { animation-delay: .8s; }
.nw-si-p3 { animation-delay: 1.6s; }
/* 3. Sealing: a csepp lepattan a tomitesrol */
@keyframes nw-si-drop {
0% { transform: translateY(-26px); opacity: 0; }
25% { opacity: 1; }
55% { transform: translateY(0); opacity: 1; }
70% { transform: translateY(-8px); }
100% { transform: translateY(-8px); opacity: 0; }
}
.nw-si-drop { animation: nw-si-drop 2.6s ease-in infinite; }
@keyframes nw-si-pulse { 0%, 100% { transform: scale(1); } 55% { transform: scale(1.06); } }
.nw-si-ring { transform-origin: 60px 75px; animation: nw-si-pulse 2.6s ease-out infinite; }
/* 4. Anti-vibration: a rezges elhal, a bak osszenyomodik */
@keyframes nw-si-damp { 0% { transform: scaleY(1); } 100% { transform: scaleY(.12); } }
.nw-si-wave { transform-origin: 60px 56px; animation: nw-si-damp 2.4s ease-out infinite; }
@keyframes nw-si-squash { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.84); } }
.nw-si-mount { transform-origin: 60px 100px; animation: nw-si-squash 2.4s ease-in-out infinite; }
/* 5. Industrial: gep halad a szantofoldon, mellette forgo fogaskerek.
Az elso valtozat egy nagy, kozepre tett fogaskerek volt; barmennyire
vastagitottuk a fogakat, napkent olvasodott (kor + sugarasan allo rovid
vonalak). Most jelenet van egy jel helyett, es a fogaskerek csak
melleksereplo. */
@keyframes nw-si-spin { to { transform: rotate(360deg); } }
.nw-si-gear { transform-origin: 27px 29px; animation: nw-si-spin 8s linear infinite; }
/* A barazdak a nezo fele futnak: ettol lesz a jelenetbol HALADAS. */
@keyframes nw-si-till { to { stroke-dashoffset: 50; } }
.nw-si-furrow {
/* Rovid kihagyas: nagyobb resnel a barazdak szikrakent olvastak, nem
folytonos vonalkent. */
stroke-dasharray: 20 5;
animation: nw-si-till 1.9s linear infinite;
}
/* A ket hatso barazda hatterebb: igy lesz melysege a jelenetnek. */
.nw-si-f2, .nw-si-furrow:not(.nw-si-sun):not(.nw-si-f2) { opacity: .6; }
.nw-si-f2 { animation-duration: 2.3s; }
.nw-si-f3 { animation-duration: 1.6s; }
/* Alig eszrevehető bukdacsolas: egyenetlen talajon halad. */
@keyframes nw-si-bump { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.6px); } }
.nw-si-machine { animation: nw-si-bump 1.1s ease-in-out infinite; }
/* 6. Compounds: a szemcsek osszeallnak reteggé */
@keyframes nw-si-settle {
0% { transform: translateY(-16px); opacity: 0; }
35% { opacity: 1; }
100% { transform: translateY(0); opacity: 1; }
}
.nw-si-g { animation: nw-si-settle 2.8s ease-out infinite; }
.nw-si-g2 { animation-delay: .35s; }
.nw-si-g3 { animation-delay: .7s; }
@media (prefers-reduced-motion: reduce) {
.nw-solutions__icon * { animation: none !important; }
}