/* Reset, tipográfia, layout primitívek. Tokenekre épül. */ @font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/poppins-400.woff2") format("woff2"); } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("../assets/fonts/poppins-500.woff2") format("woff2"); } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("../assets/fonts/poppins-600.woff2") format("woff2"); } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("../assets/fonts/poppins-700.woff2") format("woff2"); } @font-face { font-family: "Lora"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../assets/fonts/lora-var.woff2") format("woff2-variations"); } @font-face { font-family: "Lora"; font-style: italic; font-weight: 400 700; font-display: swap; src: url("../assets/fonts/lora-var-italic.woff2") format("woff2-variations"); } *, *::before, *::after { box-sizing: border-box; } /* A sima gorgetes ALAPBOL KI van kapcsolva, es csak a js/nav.js kapcsolja be, miutan az oldal betoltott (data-smooth a -en). Miert: egy masik oldalrol erkezo "index.html#ambition" linknel a bongeszo a kezdeti horgony-ugrast IS vegiganimalja -- a lap tetejerol a hero, a who-we-are, a terkep es a solutions mellett vegig, le az ambitionig. Az ugyfel ezt latta lassunak: eloszor a fooldal, aztan egy hosszu, magatol induló legorgetes. Auto-val egybol a helyen landol, az oldalon BELULI horgonykattintas pedig tovabbra is sima marad. */ html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; } html[data-smooth] { scroll-behavior: smooth; } body { margin: 0; /* v2: az oldal alapja VILAGOS. A navy szovegszin lett, nem hatter. */ background: var(--nw-canvas); color: var(--nw-ink); font-family: var(--nw-font-body); font-size: var(--nw-text-base); font-weight: var(--nw-fw-regular); line-height: var(--nw-leading-body); -webkit-font-smoothing: antialiased; overflow-x: hidden; } h1, h2, h3, h4 { margin: 0; font-family: var(--nw-font-display); font-weight: var(--nw-fw-bold); line-height: var(--nw-leading-tight); letter-spacing: var(--nw-tracking-tight); text-wrap: balance; } h1 { font-size: var(--nw-text-4xl); } h2 { font-size: var(--nw-text-3xl); } h3 { font-size: var(--nw-text-xl); } h4 { font-size: var(--nw-text-lg); font-weight: var(--nw-fw-semibold); } p { margin: 0 0 var(--nw-space-2); max-width: var(--nw-measure); text-wrap: pretty; } p:last-child { margin-bottom: 0; } /* A cimek margoja 0, tehat a cim ala kerulo szovegtorzsnek nincs sajat felso terkoze. Nagy kepernyon ez meg elmegy, mobilon viszont -- ahol a cim 4-5 sorra torik -- a ketto osszetapad. Ezert a cim UTANI elso blokk kap egy explicit felso terkozt. Sibling-szelektor, tehat csak ott hat, ahol tenyleg egymas mellett allnak. Csak h1/h2 utan hat: a h3 a kartyakban all, ahol a sajat 0,5rem-es also margoja mar helyes, es a ketto osszeadodna. A cimresz :is(), nem :where(): a :where() nulla specifikussagu, ezert a fenti `p { margin: 0 0 ... }` legyozne. Az :is() a legspecifikusabb argumentumat veszi fel (h1 -> 0,0,1), tehat holtverseny a p-szaballyal, es a kesobbi -- vagyis ez -- nyer. A masodik fele viszont marad :where(), hogy a komponens-szintu, osztalyalapu margok (pl. .nw-lifecycle__label) tovabbra is felulirjak. */ :is(h1, h2) + :where(p, .nw-lead, .nw-prose, .nw-stack__body, ul, ol, dl) { margin-block-start: var(--nw-flow); } img, svg, video { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; } /* Szovegen beluli link -- olyan helyeken, ahol a link egy mondat resze, nem onallo nav/kartya/gomb (pl. kontaktadatok, jegyzetek). Nyugalmi allapotban is latszik, hogy kattinthato: szin + tompitott alahuzas, ami hoverre teljesen kirajzolodik. A --nw-accent-text szekciotema szerint valt (kek vilagoson, halvanyabb kek sotet szekcioban), tehat automatikusan helyes marad barhol hasznaljak. */ .nw-link { color: var(--nw-accent-text); text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--nw-accent-text) 35%, transparent); transition: text-decoration-color var(--nw-dur-fast) var(--nw-ease); } .nw-link:hover { text-decoration-color: var(--nw-accent-text); } ul, ol { margin: 0; padding: 0; list-style: none; } :focus-visible { /* A fokuszgyuru a szekcio temajahoz igazodik. Vilagoson a Sun 1,92:1 lenne a canvason, ezert ott a Blue tint 1 megy. */ outline: 3px solid var(--nw-accent-text, var(--nw-blue-1)); outline-offset: 3px; border-radius: 2px; } /* --- Layout primitívek ------------------------------------- */ .nw-shell { width: 100%; max-width: var(--nw-max-width); margin-inline: auto; padding-inline: var(--nw-gutter); } .nw-section { position: relative; isolation: isolate; background: var(--nw-bg); color: var(--nw-fg); padding-block: var(--nw-section-y); overflow: clip; /* a nagy pill-formák nem okozhatnak vízszintes scrollt */ } .nw-section > .nw-shell { position: relative; z-index: var(--nw-z-content); } .nw-eyebrow { font-family: var(--nw-font-display); font-size: var(--nw-text-sm); font-weight: var(--nw-fw-semibold); letter-spacing: var(--nw-tracking-wide); text-transform: uppercase; color: var(--nw-accent-text); margin-bottom: var(--nw-space-2); } .nw-lead { font-size: var(--nw-text-lg); color: var(--nw-fg-secondary); } .nw-editorial { font-family: var(--nw-font-body); font-size: var(--nw-text-lg); line-height: var(--nw-leading-loose); } .nw-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .nw-skip-link { position: absolute; top: 0; left: var(--nw-gutter); transform: translateY(-120%); z-index: calc(var(--nw-z-header) + 1); padding: var(--nw-space-1) var(--nw-space-2); background: var(--nw-sun); color: var(--nw-on-sun); font-weight: var(--nw-fw-semibold); transition: transform var(--nw-dur-fast) var(--nw-ease); } .nw-skip-link:focus-visible { transform: translateY(0); } /* --- Reveal --------------------------------------------------- */ [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity var(--nw-dur-slow) var(--nw-ease), transform var(--nw-dur-slow) var(--nw-ease); /* FAILSAFE. Normál esetben a js/reveal.js teszi rá a [data-revealed] attribútumot. Ha az IntersectionObserver bármiért nem tüzel -- JS-hiba, script-blokkoló, nem renderelő környezet --, a tartalom opacity:0-n ragadna, azaz az oldal nagy része láthatatlan lenne. Ezért 5 mp után CSS-ből mindenképp megjelenik. */ animation: nw-reveal-failsafe 1ms linear 5s forwards; } @keyframes nw-reveal-failsafe { to { opacity: 1; transform: none; } } [data-revealed] { opacity: 1; transform: none; } /* --- Reduced motion ----------------------------------------- Nem "kevesebb" mozgás: NULLA mozgás, és semmi nem törik el. */ @media (prefers-reduced-motion: reduce) { html, html[data-smooth] { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } [data-reveal] { opacity: 1; transform: none; } }