/* A @font-face deklaraciok 2026-09-09 ota KIZAROLAG az assets/css/fonts.css-ben vannak. Korabban itt is szerepelt egy masodpeldany, ami TTF-re mutatott, es mivel ez a fajl a fonts.css UTAN toltodik be, felulirta azt: emiatt a bongeszo a nagy TTF fajlokat toltotte le a kis WOFF2 helyett. Ide NE kerüljon ujra @font-face. */ /* ============================================================= WEBRAKÉTA — TELJES DESIGN RENDSZER (WordPress) · v3 Egységesített tipográfiai rendszer — külön mobil és desktop értékekkel, központi tokenekkel állítható. v3 változás: 8. blokk — HEADER / NAVIGATION TOKENEK. ============================================================= */ :root { /* ----------------------------------------------------------- 1. SZÍNEK (brand + semantic) ----------------------------------------------------------- */ --ink: oklch(0.34 0.09 260); /* #1b3c6f deep navy */ --ink-soft: oklch(0.44 0.08 260); --paper: oklch(0.985 0.005 100); /* warm off-white */ --coral: oklch(0.63 0.22 25); /* #f03a47 red */ --coral-soft: oklch(0.74 0.16 25); --sky: oklch(0.85 0.06 250); --line: oklch(0.88 0.012 258); --peach: oklch(0.95 0.04 50); /* #FFE9DD barackszín */ --surface-alt: oklch(0.97 0.002 258); /* #F6F7F7 halványszürke háttér */ --muted-alt: oklch(0.67 0.02 258); /* #9aa0ab meta szöveg, halványabb mint muted-foreground */ --background: var(--paper); --foreground: var(--ink); --card: oklch(1 0 0); --card-foreground: var(--ink); --primary: var(--ink); --primary-foreground: var(--paper); --secondary: oklch(0.96 0.008 258); --secondary-foreground:var(--ink); --muted: oklch(0.96 0.008 258); --muted-foreground: oklch(0.46 0.03 258); --accent: var(--coral); --accent-foreground: oklch(1 0 0); --destructive: oklch(0.6 0.22 27); --border: var(--line); --ring: var(--coral); /* ----------------------------------------------------------- 1/B. WEBRAKÉTA SZEKCIÓ TOKENEK (alias réteg a sections.css-nek) ----------------------------------------------------------- */ --wr-ink: var(--ink); --wr-ink-soft: var(--ink-soft); --wr-paper: var(--paper); --wr-paper-2: var(--paper); --wr-coral: var(--coral); --wr-coral-hover: oklch(0.62 0.22 32); /* coral hover / darken */ --wr-green: oklch(0.72 0.19 142); --wr-line: var(--line); --wr-muted: var(--muted-foreground); --wr-card: var(--card); --wr-peach: var(--peach); --wr-surface-alt: var(--surface-alt); --wr-muted-alt: var(--muted-alt); --wr-shadow-soft: var(--shadow-soft); --wr-shadow-launch: var(--shadow-launch); --wr-font-display: var(--font-display); --wr-font-sans: var(--font-sans); --wr-font-mono: var(--font-mono); /* ----------------------------------------------------------- 2. TIPOGRÁFIA — fontok ----------------------------------------------------------- */ --font-display: "Space Grotesk", system-ui, sans-serif; --font-sans: "Inter", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; /* ============================================================= 2/B. KÖZPONTI TIPOGRÁFIAI SKÁLA ============================================================= */ --wr-font-eyebrow: clamp(0.75rem, 0.71rem + 0.18vw, 0.8125rem); --wr-font-button: 0.9375rem; --wr-font-body-sm: clamp(0.9375rem, 0.91rem + 0.14vw, 1rem); --wr-font-body: clamp(1rem, 0.96rem + 0.21vw, 1.0625rem); --wr-font-body-lg: clamp(1.0625rem, 1rem + 0.32vw, 1.1875rem); --wr-font-lead: 16px; /* 2026-09-09: a kartyacim a fooldali es a /weboldal-keszites/ kartyaval azonos meretre igazitva (26px asztalon). Ez ugyanaz az ertek, mint a --wr-font-title-sm, ezert arra hivatkozunk, nem masoljuk a clamp-et. A landing-kartyak eddig 23.5px-en alltak, a fooldaliak 26px-en. */ --wr-font-card-title: var(--wr-font-title-sm); --wr-font-title-sm: clamp(1.375rem, 1.29rem + 0.43vw, 1.625rem); --wr-font-title-md: clamp(1.625rem, 1.43rem + 0.98vw, 2.125rem); --wr-font-title-lg: clamp(2.125rem, 1.45rem + 3.39vw, 3.5rem); /* Wrike (Erno 2026-09-08): a hero-cimsorok a Lovable arányaira igazitva. A mert Lovable-clampek: service=clamp(2rem,4.2vw,3.5rem), home=clamp(2.5rem,6vw,5.5rem). A korabbi (nagyobb offset+magasabb max) miatt a cim asztalon nagyobb volt es a honlapkeszites statisztika-sav lecsuszott a kepbol. */ --wr-font-hero-home: clamp(2.5rem, 6vw, 5.5rem); --wr-font-hero-service: clamp(2rem, 4.2vw, 3.5rem); --wr-font-hero: var(--wr-font-hero-home); /* Kapcsolat-oldal (2026-09) — NÉVvel felvett mono-címke + kis szövegméretek. A forrás (kapcsolat.tsx) sűrűn használ 11px JetBrains Mono uppercase "tracking-widest" (0.1em) címkéket — ez NEM a 13/12px eyebrow (0.18em), ezért külön token. + szerep/inline-elérhetőség 14px, jogi mikroszöveg 12px. Csak a .wr-contact szekció használja; a meglévő oldalak nem változnak. */ --wr-font-label: 11px; /* mono uppercase micro-címke */ --wr-ls-label: 0.1em; /* tracking-widest */ --wr-font-sm: 0.875rem; /* 14px — szerep, inline e-mail/tel */ --wr-font-xs: 0.75rem; /* 12px — jogi mikroszöveg */ --wr-font-quote: clamp(1.5rem, 1.35rem + 0.7vw, 1.875rem); /* 24→30px — szolgáltatás-aloldal idézet-blokk */ --wr-lh-hero: 1.02; --wr-lh-title: 1.1; --wr-lh-card: 1.25; --wr-lh-body: 1.6; --wr-lh-lead: 26px; --wr-ls-hero: -0.035em; --wr-ls-title: -0.03em; --wr-ls-card: -0.018em; --wr-ls-eyebrow: 0.18em; --wr-fw-display: 600; --wr-fw-body: 400; --wr-fw-button: 500; /* ----------------------------------------------------------- 3. BORDER RADIUS ----------------------------------------------------------- */ --radius: 0.5rem; --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 6px); --radius-2xl: calc(var(--radius) + 14px); --radius-3xl: calc(var(--radius) + 22px); --radius-pill: 9999px; /* ----------------------------------------------------------- 4. SPACING ----------------------------------------------------------- */ --space-0: 0; --space-px: 1px; --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 2.5rem; --space-3xl: 3.5rem; --space-4xl: 5rem; --space-5xl: 7rem; /* --- Szekció + komponens méretek --- */ --wr-section-pad-md: 6rem; /* 96px — közepes szekció padding */ --wr-eyebrow-dash: 1.75rem; /* 28px — eyebrow dekorációs vonal */ /* ----------------------------------------------------------- 5. CONTAINER ----------------------------------------------------------- */ --container-max: 80rem; --container-pad-mobile: 1.25rem; --container-pad-tablet: 1.5rem; --container-pad-desktop: 2.5rem; /* ----------------------------------------------------------- 6. SHADOW ----------------------------------------------------------- */ --shadow-soft: 0 1px 2px oklch(0.34 0.09 260 / 0.06), 0 12px 32px -12px oklch(0.34 0.09 260 / 0.18); --shadow-launch: 0 18px 50px -16px oklch(0.63 0.22 25 / 0.45); --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); /* ----------------------------------------------------------- 7. GRADIENT ----------------------------------------------------------- */ --gradient-launch: linear-gradient(135deg, oklch(0.63 0.22 25), oklch(0.72 0.18 50)); --gradient-night: linear-gradient(160deg, oklch(0.34 0.09 260), oklch(0.22 0.07 260)); /* ============================================================= 8. HEADER / NAVIGATION TOKENEK (v3 — új blokk) ------------------------------------------------------------- A header.css KIZÁRÓLAG ezekből az értékekből dolgozik. Minden elemre külön mobil és desktop tokent definiáltunk (font-size, line-height, weight, color, padding, méret). Ha valamit a headerben módosítani szeretnél, ITT állítsd. ============================================================= */ /* — Header váz (sáv) — */ --wr-header-z: 9999; --wr-header-bg: color-mix(in srgb, var(--paper) 94%, transparent); --wr-header-border: var(--line); --wr-header-border-width: 1px; --wr-header-shadow-scrolled: 0 2px 16px -4px oklch(0.34 0.09 260 / 0.10); --wr-header-transition: box-shadow 0.3s ease; --wr-header-height-desktop: 72px; /* spacer + min-height desktop */ --wr-header-height-mobile: 64px; /* min-height ≤1024px */ --wr-header-pad-y-desktop: 14px; --wr-header-pad-y-mobile: 12px; --wr-header-pad-y-xs: 8px; /* ≤640px */ --wr-header-pad-x-mobile: var(--container-pad-mobile); --wr-header-pad-x-desktop: var(--container-pad-desktop); --wr-header-inner-gap: var(--space-sm); /* — Logo — Lovable: h-9 mobil (36px) / md:h-10 desktop (40px) */ --wr-logo-height-desktop: 40px; --wr-logo-height-mobile: 36px; /* ≤1024px */ --wr-logo-height-xs: 34px; /* ≤640px */ --wr-logo-hover-lift: -2px; /* — Asztali nav link — Lovable: text-[17px] leading-[21px] font-semibold, color ink/85 */ --wr-nav-link-font-family: var(--font-sans); --wr-nav-link-font-size: 17px; --wr-nav-link-line-height: 21px; --wr-nav-link-weight: 600; --wr-nav-link-color: color-mix(in srgb, var(--ink) 85%, transparent); --wr-nav-link-color-hover: var(--ink); --wr-nav-link-padding: 8px 14px; /* px-3.5 py-2 */ --wr-nav-link-gap: 4px; --wr-nav-link-radius: var(--radius-lg); --wr-nav-link-underline: var(--coral); --wr-nav-link-underline-h: 1px; /* Lovable: h-px */ --wr-nav-link-underline-offset: -2px; /* -bottom-0.5 */ --wr-nav-link-underline-inset: 14px; /* inset-x-3.5 */ /* — Chevron — */ --wr-nav-chevron-size: 14px; /* — Dropdown panel — */ --wr-dropdown-width: 560px; --wr-dropdown-offset-top: 10px; /* a link és a kártya közti rés */ --wr-dropdown-bg: var(--card); --wr-dropdown-border: var(--line); --wr-dropdown-radius: var(--radius-2xl); --wr-dropdown-shadow: var(--shadow-soft); --wr-dropdown-padding: 12px; --wr-dropdown-gap: 4px; --wr-dropdown-columns: 1fr 1fr; /* — Szolgáltatás tétel a dropdownban — */ --wr-svc-padding: 12px; --wr-svc-gap: 12px; --wr-svc-radius: var(--radius-xl); --wr-svc-color: var(--ink); --wr-svc-bg-hover: var(--secondary); --wr-svc-icon-size: 36px; --wr-svc-icon-mt: 2px; --wr-svc-icon-bg: var(--ink); --wr-svc-icon-bg-hover: var(--coral); --wr-svc-icon-svg-size: 16px; --wr-svc-icon-svg-color: #ffffff; --wr-svc-title-font-family: var(--font-sans); --wr-svc-title-font-size: 14px; --wr-svc-title-weight: 500; /* Lovable: font-medium */ --wr-svc-title-line-height: 20px; /* Lovable: leading-5 = 20px */ --wr-svc-title-color: lab(22.7152 3.05282 -31.6161); /* Lovable pontos szín */ --wr-svc-tag-font-family: var(--font-sans); --wr-svc-tag-font-size: 12px; --wr-svc-tag-line-height: 16px; /* Lovable: leading-4 */ --wr-svc-tag-color: var(--muted-foreground); --wr-svc-tag-mt: 2px; /* — Header CTA gomb (asztali + mobil külön) — Lovable: btn-launch text-sm (14px) font-semibold */ --wr-cta-font-family: var(--font-sans); --wr-cta-font-size-desktop: 14px; /* text-sm */ --wr-cta-font-size-mobile: 15px; --wr-cta-weight: 600; /* btn-launch semibold */ --wr-cta-line-height: 1; --wr-cta-padding-desktop: 12px 22px; --wr-cta-padding-mobile: 14px 22px; --wr-cta-gap: 6px; --wr-cta-radius: var(--radius-pill); --wr-cta-bg: var(--coral); --wr-cta-bg-hover: var(--wr-coral-hover); --wr-cta-color: #ffffff; --wr-cta-shadow: var(--shadow-launch); --wr-cta-icon-size: 16px; /* h-4 w-4 */ --wr-cta-hover-lift: -1px; /* — Burger gomb (mobil) — */ --wr-burger-size: 44px; --wr-burger-offset-right: var(--container-pad-mobile); --wr-burger-bg: var(--card); --wr-burger-bg-hover: var(--secondary); --wr-burger-border: var(--line); --wr-burger-radius: var(--radius-pill); --wr-burger-icon-size: 24px; --wr-burger-icon-color: var(--ink); /* — Mobil menü panel — */ --wr-mob-bg: color-mix(in srgb, var(--paper) 94%, transparent); --wr-mob-border-top: var(--line); --wr-mob-max-h-offset: 64px; /* calc(100svh - X) */ --wr-mob-pad-x: var(--container-pad-mobile); --wr-mob-pad-top: 8px; --wr-mob-pad-bottom: 32px; /* Mobil top-level link — Lovable: text-base font-medium */ --wr-mob-link-font-family: var(--font-sans); --wr-mob-link-font-size: 16px; /* text-base */ --wr-mob-link-weight: 500; /* font-medium */ --wr-mob-link-line-height: 1.5; --wr-mob-link-color: var(--ink); --wr-mob-link-color-hover: var(--ink); --wr-mob-link-bg-hover: var(--secondary); --wr-mob-link-padding: 10px 12px; /* px-3 py-2.5 */ --wr-mob-link-radius: var(--radius-lg); /* Mobil al-link (dropdown elem) */ --wr-mob-sub-font-family: var(--font-sans); --wr-mob-sub-font-size: 15px; --wr-mob-sub-weight: 400; --wr-mob-sub-line-height: 1.4; --wr-mob-sub-color: var(--muted-foreground); --wr-mob-sub-color-hover: var(--coral); --wr-mob-sub-padding: 6px 8px; --wr-mob-sub-radius: var(--radius-md); --wr-mob-sub-indent: 14px; /* margin-left */ --wr-mob-sub-pad-left: 16px; /* padding-left */ --wr-mob-sub-border: var(--line); --wr-mob-sub-border-w: 2px; --wr-mob-cta-mt: 16px; } /* ============================================================= BASE ============================================================= */ * { border-color: var(--border); box-sizing: border-box; } html { scroll-behavior: smooth; } body { background-color: var(--background); color: var(--foreground); font-family: var(--font-sans); font-size: var(--wr-font-body); line-height: var(--wr-lh-body); -webkit-font-smoothing: antialiased; font-feature-settings: "ss01", "cv11"; /* Dekoratív SVG-k (header/footer trajectory) geometriája mobilon pár px-t túllóghat → vízszintes scroll. A `clip` (nem `hidden`) elvágja anélkül, hogy scroll-konténert hozna létre, így a sticky header NEM törik. — 2026-09-04 */ overflow-x: clip; } ::selection { background: var(--coral); color: #fff; } /* ============================================================= TIPOGRÁFIA — display + heading + szöveg utility-k ============================================================= */ .display-xl, .wr-h1 { font-family: var(--font-display); font-weight: var(--wr-fw-display); font-size: var(--wr-font-hero-home); line-height: var(--wr-lh-hero); letter-spacing: var(--wr-ls-hero); } .display-service, .wr-h1--service { font-family: var(--font-display); font-weight: var(--wr-fw-display); font-size: var(--wr-font-hero-service); line-height: var(--wr-lh-hero); letter-spacing: var(--wr-ls-hero); } .display-lg, .wr-h2 { font-family: var(--font-display); font-weight: var(--wr-fw-display); font-size: var(--wr-font-title-lg); line-height: var(--wr-lh-title); letter-spacing: var(--wr-ls-title); } .wr-h3 { font-family: var(--font-display); font-weight: var(--wr-fw-display); font-size: var(--wr-font-title-sm); line-height: var(--wr-lh-card); letter-spacing: var(--wr-ls-card); } h1, h2, h3, h4, .h1, .h2, .h3, .h4 { font-family: var(--font-display); font-weight: var(--wr-fw-display); letter-spacing: var(--wr-ls-card); } .h1 { font-size: var(--wr-font-hero-home); line-height: var(--wr-lh-hero); letter-spacing: var(--wr-ls-hero); } .h2 { font-size: var(--wr-font-title-lg); line-height: var(--wr-lh-title); letter-spacing: var(--wr-ls-title); } .h3 { font-size: var(--wr-font-title-sm); line-height: var(--wr-lh-card); letter-spacing: var(--wr-ls-card); } .h4 { font-size: var(--wr-font-card-title); line-height: var(--wr-lh-card); letter-spacing: var(--wr-ls-card); } .h5 { font-family: var(--font-sans); font-weight: var(--wr-fw-display); font-size: var(--wr-font-body-lg); line-height: var(--wr-lh-card); letter-spacing: var(--wr-ls-card); } .h6 { font-family: var(--font-sans); font-weight: var(--wr-fw-display); font-size: var(--wr-font-body); line-height: var(--wr-lh-body); letter-spacing: 0; } .wr-card-title, .card-title { font-family: var(--font-display); font-weight: var(--wr-fw-display); font-size: var(--wr-font-card-title); line-height: var(--wr-lh-card); letter-spacing: var(--wr-ls-card); } /* A kártya-címsorban álló link a címsor betűjét és színét ÖRÖKÖLJE. Enélkül a böngésző alapértelmezett kék (és meglátogatva lila), aláhúzott linkstílusa érvényesül, mert a .card-title-ra nem volt link-szabály. MÉRVE 2026-09-09: az /unas-webaruhaz-keszites/ és a /shopify-webshop-keszites/ „Ez is érdekelhet" kártyáin 4 ilyen link volt. Kiss Ernő szúrta ki. */ .wr-card-title a, .card-title a { color: inherit; text-decoration: none; transition: color .2s ease; } .wr-card-title a:hover, .card-title a:hover, .wr-card-title a:focus-visible, .card-title a:focus-visible { color: var(--coral); } .lead, .wr-lead { font-family: var(--font-sans); font-size: var(--wr-font-lead); font-weight: var(--wr-fw-body); line-height: var(--wr-lh-lead); color: var(--muted-foreground); } .body, .wr-body { font-family: var(--font-sans); font-size: var(--wr-font-body); font-weight: var(--wr-fw-body); line-height: var(--wr-lh-body); } .body-sm, .wr-body-sm, .small, .text-small { font-family: var(--font-sans); font-size: var(--wr-font-body-sm); font-weight: var(--wr-fw-body); line-height: var(--wr-lh-body); } .body-lg, .wr-body-lg { font-family: var(--font-sans); font-size: var(--wr-font-body-lg); font-weight: var(--wr-fw-body); line-height: var(--wr-lh-body); } .eyebrow { font-family: var(--font-mono); font-size: var(--wr-font-eyebrow); font-weight: var(--wr-fw-body); line-height: 1; text-transform: uppercase; letter-spacing: var(--wr-ls-eyebrow); color: var(--coral); display: inline-flex; align-items: center; gap: 0.5rem; } .eyebrow::before { content: ""; width: var(--wr-eyebrow-dash); height: 1px; background: var(--coral); } .chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.75rem; border: 1px solid var(--line); border-radius: var(--radius-pill); font-family: var(--font-mono); font-size: var(--wr-font-eyebrow); font-weight: 400; line-height: 1; color: var(--ink-soft); background: #fff; } /* ============================================================= GOMBOK ============================================================= */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; white-space: nowrap; border-radius: var(--radius-md); font-family: var(--font-sans); font-size: var(--wr-font-button); font-weight: var(--wr-fw-button); line-height: 1.25rem; cursor: pointer; transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease; border: 1px solid transparent; text-decoration: none; } .btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; } .btn:focus-visible { outline: none; box-shadow: 0 0 0 1px var(--ring); } .btn--primary { background: var(--primary); color: var(--primary-foreground); box-shadow: var(--shadow-sm); } .btn--primary:hover { background: color-mix(in oklab, var(--primary) 90%, transparent); } .btn--secondary { background: var(--secondary); color: var(--secondary-foreground); box-shadow: var(--shadow-xs); } .btn--secondary:hover { background: color-mix(in oklab, var(--secondary) 80%, transparent); } .btn--outline { background: var(--background); color: var(--foreground); border-color: var(--input); box-shadow: var(--shadow-xs); } .btn--outline:hover { background: var(--accent); color: var(--accent-foreground); } .btn--ghost { background: transparent; color: var(--foreground); } .btn--ghost:hover { background: var(--accent); color: var(--accent-foreground); } .btn--link { background: transparent; color: var(--primary); padding: 0; height: auto; text-underline-offset: 4px; } .btn--link:hover { text-decoration: underline; } .btn--destructive { background: var(--destructive); color: #fff; box-shadow: var(--shadow-xs); } .btn--sm { height: 2rem; padding: 0 0.75rem; font-size: 0.8125rem; line-height: 1rem; border-radius: var(--radius-md); } .btn--md { height: 2.25rem; padding: 0.5rem 1rem; font-size: var(--wr-font-button); line-height: 1.25rem; border-radius: var(--radius-md); } .btn--lg { height: 2.75rem; padding: 0 2rem; font-size: var(--wr-font-button); line-height: 1.25rem; border-radius: var(--radius-md); } .btn--icon { height: 2.25rem; width: 2.25rem; padding: 0; } .btn-launch { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.95rem 1.4rem; font-family: var(--font-sans); font-size: var(--wr-font-button); font-weight: var(--wr-fw-button); line-height: 1; background: var(--coral); color: #fff; border-radius: var(--radius-pill); box-shadow: var(--shadow-launch); text-decoration: none; transition: transform .25s ease, box-shadow .25s ease, background .25s ease; } .btn-launch:hover { transform: translateY(-2px); background: var(--wr-coral-hover); } .btn-ghost-ink { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.95rem 1.4rem; font-family: var(--font-sans); font-size: var(--wr-font-button); font-weight: var(--wr-fw-button); line-height: 1; border: 1px solid var(--ink); border-radius: var(--radius-pill); color: var(--ink); background: transparent; text-decoration: none; transition: all .25s ease; } .btn-ghost-ink:hover { background: var(--ink); color: #fff; } .btn-icon-unicode { display: inline-block; width: 1em; min-width: 1em; color: inherit; font-family: Arial, "Helvetica Neue", system-ui, sans-serif; font-size: 1.05rem; font-weight: 500; line-height: 0.9; text-align: center; transform: translateY(-0.01em); } .btn-icon-unicode--external::before { content: "↗︎"; } .btn-icon-unicode--arrow::before { content: "→"; } /* ============================================================= KÁRTYA + KONTÉNER + SZEKCIÓ ============================================================= */ .card-elevated { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-2xl); box-shadow: var(--shadow-soft); } .container-wr { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad-mobile); } @media (min-width: 768px) { .container-wr { padding-inline: var(--container-pad-tablet); } } @media (min-width: 1024px) { .container-wr { padding-inline: var(--container-pad-desktop); } } .section { padding-block: 5rem; } @media (min-width: 1024px) { .section { padding-block: 7rem; } } /* Lead szöveg desktop override: 16px/26px → 17px/27px */ @media (min-width: 1024px) { :root { --wr-font-lead: 17px; --wr-lh-lead: 27px; } } .section-tight { padding-block: 3rem; } .trajectory-grid { background-image: linear-gradient(to right, oklch(0.34 0.09 260 / 0.05) 1px, transparent 1px), linear-gradient(to bottom, oklch(0.34 0.09 260 / 0.05) 1px, transparent 1px); background-size: 64px 64px; } .ink-grid { background-image: linear-gradient(to right, oklch(1 0 0 / 0.05) 1px, transparent 1px), linear-gradient(to bottom, oklch(1 0 0 / 0.05) 1px, transparent 1px); background-size: 64px 64px; } /* -------------------------------------------------------------------------- KATTINTHATÓ ELEM = KÉZ KURZOR (Ernő, 2026-09-09) "Ha marad a nyíl, nem tudják, hogy kattintható-e." MÉRVE 5 oldalon: a linkek rendben voltak, de a