/* n8n.hu – közös stíluslap. Világos alaptéma; a sötét témát a kapcsolja be. */ :root { color-scheme: light; --bg: #F5F3EC; --bg-alt: #FFFDF8; --surface: #FFFDF8; --surface-2: #EDEAE0; --text: #15201B; --text-muted: #4A5650; --text-subtle: #5E6A64; --line: #D9D5C8; --line-soft: #E6E2D6; --dashed: #E2DED2; --grid-line: rgba(21, 32, 27, 0.05); --accent: #1E6A4B; --accent-hover: #175A3F; --on-accent: #FFFFFF; --accent-text: #19533C; --accent-em: #1E6A4B; --accent-wash: #DBE3DB; --deep: #10281E; --deep-text: #EEF2EF; --deep-muted: rgba(238, 242, 239, 0.82); --deep-accent: #A5C3B7; --deep-line: rgba(238, 242, 239, 0.22); --cta-bg: #1E6A4B; --cta-text: #FFFFFF; --cta-btn-bg: #FFFFFF; --cta-btn-hover: #EEF2EF; --cta-btn-text: #19533C; --cta-line: rgba(255, 255, 255, 0.6); --footer-bg: #15201B; --footer-text: #C9D1CC; --footer-muted: #A9B3AD; --footer-link: #E4E9E6; --footer-line: rgba(238, 242, 239, 0.16); --header-bg: rgba(245, 243, 236, 0.94); --shadow: 0 30px 60px -30px rgba(21, 32, 27, 0.35); --font-sans: 'Hanken Grotesk', 'Segoe UI', system-ui, -apple-system, sans-serif; --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace; --container: 1200px; --gutter: 20px; --section-y: 56px; --header-h: 64px; } :root[data-theme="dark"] { color-scheme: dark; --bg: #0F1613; --bg-alt: #131B17; --surface: #18221D; --surface-2: #212D27; --text: #E8EDEA; --text-muted: #B3BDB7; --text-subtle: #97A39C; --line: #2B3832; --line-soft: #223029; --dashed: #2B3832; --grid-line: rgba(232, 237, 234, 0.045); --accent: #6FD3A3; --accent-hover: #8ADDB5; --on-accent: #0B1A13; --accent-text: #86DDB4; --accent-em: #86DDB4; --accent-wash: #16261F; --deep: #0B2118; --deep-text: #EEF2EF; --deep-muted: rgba(238, 242, 239, 0.8); --deep-accent: #9FD8BD; --deep-line: rgba(238, 242, 239, 0.18); --cta-bg: #1B4D38; --cta-text: #FFFFFF; --cta-btn-bg: #6FD3A3; --cta-btn-hover: #8ADDB5; --cta-btn-text: #0B1A13; --cta-line: rgba(255, 255, 255, 0.6); --footer-bg: #0A0F0D; --footer-text: #C3CCC7; --footer-muted: #97A29C; --footer-link: #E4E9E6; --footer-line: rgba(238, 242, 239, 0.14); --header-bg: rgba(15, 22, 19, 0.9); --shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.65); } /* JavaScript nélkül a rendszer sötét beállítását követjük. */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; --bg: #0F1613; --bg-alt: #131B17; --surface: #18221D; --surface-2: #212D27; --text: #E8EDEA; --text-muted: #B3BDB7; --text-subtle: #97A39C; --line: #2B3832; --line-soft: #223029; --dashed: #2B3832; --grid-line: rgba(232, 237, 234, 0.045); --accent: #6FD3A3; --accent-hover: #8ADDB5; --on-accent: #0B1A13; --accent-text: #86DDB4; --accent-em: #86DDB4; --accent-wash: #16261F; --deep: #0B2118; --deep-muted: rgba(238, 242, 239, 0.8); --deep-accent: #9FD8BD; --deep-line: rgba(238, 242, 239, 0.18); --cta-bg: #1B4D38; --cta-btn-bg: #6FD3A3; --cta-btn-hover: #8ADDB5; --cta-btn-text: #0B1A13; --footer-bg: #0A0F0D; --footer-text: #C3CCC7; --footer-muted: #97A29C; --footer-line: rgba(238, 242, 239, 0.14); --header-bg: rgba(15, 22, 19, 0.9); --shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.65); } } @media (min-width: 640px) { :root { --gutter: clamp(24px, 8vw, 120px); --section-y: clamp(64px, 7vw, 80px); --header-h: 76px; } } /* ---------- Alapok ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; } /* Nulla specificitás: az összetevők saját térközei (pl. .log__list, .trust) mindig felülírják. */ :where(ul[role="list"], ol[role="list"]) { list-style: none; padding: 0; } img { display: block; max-width: 100%; height: auto; } a { color: var(--accent-text); } a:hover { color: var(--text); } :focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; border-radius: 4px; } ::selection { background: var(--accent-wash); color: var(--text); } [id] { scroll-margin-top: calc(var(--header-h) + 12px); } .skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; border-radius: 8px; background: var(--accent); color: var(--on-accent); font-weight: 600; text-decoration: none; } .skip-link:focus { top: 12px; color: var(--on-accent); } .container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); } .icon { display: block; flex-shrink: 0; width: 18px; height: 18px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } } /* ---------- Tipográfia ---------- */ .eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; line-height: 1.5; text-transform: uppercase; color: var(--accent-text); } .h1 { font-family: var(--font-serif); font-size: clamp(40px, 2.9vw + 28px, 70px); font-weight: 500; line-height: 1.04; letter-spacing: -0.015em; text-wrap: balance; } .h1 em { font-style: italic; color: var(--accent-em); } .h2 { font-family: var(--font-serif); font-size: clamp(30px, 1.75vw + 23px, 48px); font-weight: 500; line-height: 1.1; letter-spacing: -0.01em; text-wrap: balance; } .h2--sm { font-size: clamp(28px, 1.35vw + 22.5px, 42px); } .lead { font-size: clamp(16px, 0.3vw + 15px, 19px); line-height: 1.6; color: var(--text-muted); text-wrap: pretty; } .lead--sm { font-size: clamp(16px, 0.2vw + 15.2px, 18px); } .label { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-subtle); } .label--accent { color: var(--accent-text); } .num { font-family: var(--font-mono); font-size: 13px; color: var(--accent-text); } @media (min-width: 640px) { .eyebrow, .label { font-size: 13px; } } /* ---------- Gombok és linkek ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border: 0; border-radius: 10px; font: inherit; font-size: 17px; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .btn--primary { background: var(--accent); color: var(--on-accent); } .btn--primary:hover { background: var(--accent-hover); color: var(--on-accent); } .btn--sm { min-height: 44px; padding: 0 20px; font-size: 16px; } .btn--cta { min-height: 56px; padding: 0 28px; font-size: 18px; font-weight: 700; background: var(--cta-btn-bg); color: var(--cta-btn-text); } .btn--cta:hover { background: var(--cta-btn-hover); color: var(--cta-btn-text); } .link-arrow { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--text); font-size: 17px; font-weight: 600; text-decoration: none; } .link-arrow:hover { color: var(--accent-text); } .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); cursor: pointer; transition: border-color 0.15s ease; } .icon-btn:hover { border-color: var(--text-subtle); } .icon-btn .icon { width: 20px; height: 20px; } /* ---------- Fejléc ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--header-bg); border-bottom: 1px solid var(--line); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: var(--header-h); } .site-header__right { display: flex; align-items: center; gap: 32px; } .site-header__actions { display: flex; align-items: center; gap: 10px; } .brand { display: inline-flex; flex-direction: column; gap: 3px; color: var(--text); text-decoration: none; } .brand:hover { color: var(--text); } .brand__name { font-size: 21px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; } .brand__tld { color: var(--accent-em); } .brand__tagline { font-size: 11.5px; font-weight: 500; letter-spacing: 0.02em; line-height: 1.2; color: var(--text-subtle); } .site-nav { display: none; } .site-nav__list { display: flex; align-items: center; gap: 30px; } .site-nav a { color: var(--text); font-size: 16px; font-weight: 500; text-decoration: none; } .site-nav a:hover { color: var(--accent-text); } .site-header__cta { display: none; } .theme-toggle .icon-sun, .menu-toggle .icon-close { display: none; } :root[data-theme="dark"] .theme-toggle .icon-sun, .menu-toggle[aria-expanded="true"] .icon-close { display: block; } :root[data-theme="dark"] .theme-toggle .icon-moon, .menu-toggle[aria-expanded="true"] .icon-menu { display: none; } .mobile-nav { border-top: 1px solid var(--line); background: var(--bg); } .mobile-nav[hidden] { display: none; } .mobile-nav__list a { display: flex; align-items: center; min-height: 52px; padding-inline: var(--gutter); border-bottom: 1px solid var(--line-soft); color: var(--text); font-size: 18px; font-weight: 500; text-decoration: none; } .mobile-nav__cta { display: flex; flex-direction: column; padding-block: 16px 20px; } @media (min-width: 640px) { .brand__name { font-size: 23px; } .brand__tagline { font-size: 12px; } .site-header__cta { display: inline-flex; } .mobile-nav__cta { display: none; } } @media (min-width: 1024px) { .site-nav { display: block; } .menu-toggle, .mobile-nav { display: none !important; } } /* ---------- Szakaszok ---------- */ .section { padding-block: var(--section-y); } .section--surface { background: var(--bg-alt); } .section--line-top { border-top: 1px solid var(--line-soft); } .section--line-bottom { border-bottom: 1px solid var(--line-soft); } .section-stack { display: flex; flex-direction: column; gap: 28px; } .section-head { display: flex; flex-direction: column; gap: 12px; max-width: 760px; } .section-head--wide { max-width: 820px; } @media (min-width: 640px) { .section-stack { gap: 48px; } .section-head { gap: 16px; } } /* ---------- Nyitó rész ---------- */ .graph-paper { background-color: var(--bg); background-image: linear-gradient(to right, var(--grid-line) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px); background-size: 22px 22px; } .hero { padding-block: 36px 44px; border-bottom: 1px solid var(--line); } .hero__grid { display: grid; gap: 32px; } .hero__copy { display: flex; flex-direction: column; gap: 22px; } .hero__lead { max-width: 560px; font-size: clamp(17px, 0.3vw + 16px, 20px); line-height: 1.55; color: var(--text-muted); text-wrap: pretty; } .hero__actions { display: flex; flex-direction: column; gap: 8px; } .hero__actions .link-arrow { justify-content: center; min-height: 48px; font-size: 16px; } .trust { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.5; color: var(--text-muted); } .trust li { display: flex; align-items: flex-start; gap: 8px; } .trust .icon { margin-top: 2px; color: var(--accent-em); } @media (min-width: 640px) { .graph-paper { background-size: 24px 24px; } .hero { padding-block: 56px 72px; } .hero__copy { gap: 28px; } .hero__actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 16px 28px; } .hero__actions .link-arrow { min-height: 44px; font-size: 17px; } .trust { flex-direction: row; flex-wrap: wrap; gap: 12px 28px; margin-top: 4px; padding-top: 22px; } } @media (min-width: 1024px) { .hero { padding-block: 64px 80px; } .hero__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 72px; align-items: center; } } /* A „rendszernapló” kártya */ .log { overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); } .log__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line-soft); } .log__title { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; line-height: 1.3; } .chip { flex-shrink: 0; padding: 2px 8px; border: 1px solid var(--line); border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-subtle); } .log__status { display: flex; flex-shrink: 0; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); } .log__status-label { display: none; } .log__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-em); } .log__list { padding: 4px 18px; } .log__row { display: grid; grid-template-columns: 68px minmax(0, 1fr) 16px; gap: 12px; align-items: start; padding: 12px 0; border-bottom: 1px dashed var(--dashed); } .log__row:last-child { border-bottom: 0; } .log__time { padding-top: 2px; font-family: var(--font-mono); font-size: 12px; color: var(--text-subtle); } .log__text { font-size: 15px; line-height: 1.45; } .log__row--done .log__text { font-weight: 600; } .log__row .icon { width: 16px; height: 16px; margin-top: 3px; color: var(--accent-em); } .log__foot { padding: 14px 18px 16px; background: var(--accent-wash); font-size: 14px; line-height: 1.5; } @media (min-width: 640px) { .log { border-radius: 16px; } .log__head { padding: 18px 24px; } .log__title { gap: 10px; font-size: 16px; } .chip { padding: 3px 10px; font-size: 12px; } .log__status-label { display: inline; } .log__list { padding: 6px 24px; } .log__row { grid-template-columns: 76px minmax(0, 1fr) 18px; gap: 14px; padding: 14px 0; } .log__time { font-size: 13px; } .log__text { font-size: 16px; } .log__row .icon { width: 18px; height: 18px; margin-top: 2px; } .log__foot { padding: 16px 24px 18px; font-size: 15px; } } /* ---------- Ismerős? ---------- */ .pains { display: grid; gap: 24px; } .pain { display: flex; flex-direction: column; gap: 8px; padding-top: 18px; border-top: 2px solid var(--text); } .pain__quote { font-family: var(--font-serif); font-size: clamp(21px, 0.6vw + 18.5px, 27px); line-height: 1.33; text-wrap: pretty; } .pain__why { font-size: 15px; line-height: 1.55; color: var(--text-muted); text-wrap: pretty; } @media (min-width: 768px) { .pains { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 64px; } .pain { gap: 12px; padding-top: 22px; } .pain__why { font-size: 16px; } } /* ---------- Két példa ---------- */ .examples { display: grid; gap: 20px; } .example { display: flex; flex-direction: column; gap: 22px; padding: 24px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); } .example__head { display: flex; flex-direction: column; gap: 12px; } .pill { align-self: flex-start; padding: 4px 10px; border: 1px solid var(--accent-text); border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-text); } .example h3 { font-family: var(--font-serif); font-size: clamp(24px, 0.8vw + 20.5px, 32px); font-weight: 500; line-height: 1.18; text-wrap: balance; } .example__today { display: flex; flex-direction: column; gap: 8px; } .example__today p:last-child { font-size: 16px; line-height: 1.6; color: var(--text-muted); text-wrap: pretty; } .auto { display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: 12px; background: var(--accent-wash); } .steps { display: flex; flex-direction: column; gap: 12px; } .steps li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start; } .steps__num { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-size: 13px; font-weight: 700; } .steps__text { padding-top: 2px; font-size: 16px; line-height: 1.5; } .example__note { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line-soft); font-size: 15px; line-height: 1.55; text-wrap: pretty; } @media (min-width: 640px) { .example { gap: 28px; padding: 40px; border-radius: 16px; } .example__head { gap: 14px; } .pill { padding: 5px 12px; font-size: 13px; } .example__today { gap: 10px; } .example__today p:last-child { font-size: 17px; } .auto { gap: 16px; padding: 24px; } .steps { gap: 14px; } .steps li { grid-template-columns: 28px minmax(0, 1fr); gap: 12px; } .steps__num { width: 28px; height: 28px; font-size: 14px; } .steps__text { font-size: 17px; } .example__note { padding-top: 20px; font-size: 16px; } } @media (min-width: 1024px) { .examples { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; } } /* ---------- További feladatok ---------- */ .section--line-y { border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); } .tasks-grid { display: grid; gap: 32px; } .tasks-head { display: flex; flex-direction: column; gap: 12px; } .tasks { display: grid; gap: 20px; } .tasks li { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; border-top: 1px solid var(--line); } .tasks p { font-size: 16px; line-height: 1.5; text-wrap: pretty; } @media (min-width: 640px) { .tasks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 40px; } .tasks-head { gap: 16px; } .tasks p { font-size: 17px; } } @media (min-width: 1024px) { .tasks-grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr); gap: 72px; align-items: start; } } /* ---------- Hogyan dolgozunk ---------- */ .process li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 6px 12px; padding: 18px 0; border-top: 1px solid var(--line); } .process li:last-child { border-bottom: 1px solid var(--line); } .process .num { grid-row: span 2; padding-top: 4px; } .process h3, .process p { grid-column: 2; } .process h3 { font-size: 19px; font-weight: 600; line-height: 1.35; } .process p { font-size: 16px; line-height: 1.6; color: var(--text-muted); text-wrap: pretty; } .callout { display: flex; align-items: flex-start; gap: 14px; padding: 20px; border-radius: 12px; background: var(--accent-wash); } .callout .icon { width: 24px; height: 24px; margin-top: 2px; color: var(--accent-text); } .callout p { font-family: var(--font-serif); font-size: clamp(20px, 0.6vw + 17.5px, 26px); line-height: 1.32; text-wrap: pretty; } @media (min-width: 640px) { .process { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; } .process li, .process li:last-child { display: flex; flex-direction: column; gap: 12px; padding: 22px 0 0; border-top: 2px solid var(--text); border-bottom: 0; } .process .num { padding-top: 0; font-size: 14px; } .process h3 { font-size: 22px; line-height: 1.3; } .callout { align-items: center; gap: 20px; padding: 28px 32px; border-radius: 14px; } .callout .icon { width: 28px; height: 28px; margin-top: 0; } } @media (min-width: 1024px) { .process { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* ---------- Kontroll · Biztonság · Egyszerűség ---------- */ .section--deep { padding-block: clamp(64px, 8vw, 96px); background: var(--deep); color: var(--deep-text); } .section--deep .eyebrow { color: var(--deep-accent); } .section--deep .h2 { color: #FFFFFF; } .section--deep .lead { color: var(--deep-muted); } .section--deep a { color: #FFFFFF; } .pillars { display: grid; gap: 32px; } .pillar { display: flex; flex-direction: column; gap: 14px; padding-top: 24px; border-top: 1px solid var(--deep-line); } .pillar .icon { width: 32px; height: 32px; color: var(--deep-accent); } .pillar h3 { font-size: clamp(21px, 0.4vw + 19.5px, 24px); font-weight: 600; line-height: 1.3; color: #FFFFFF; } .pillar p { font-size: 16px; line-height: 1.6; color: var(--deep-muted); text-wrap: pretty; } @media (min-width: 640px) { .pillar p { font-size: 17px; } } @media (min-width: 1024px) { .pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; } } /* ---------- Saját termékeink ---------- */ .products { display: grid; gap: 20px; } .product { display: flex; flex-direction: column; gap: 14px; padding: 24px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); } .tag { align-self: flex-start; padding: 4px 10px; border-radius: 999px; background: var(--surface-2); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); } .product h3 { font-family: var(--font-serif); font-size: clamp(26px, 0.4vw + 24px, 30px); font-weight: 500; line-height: 1.15; } .product p { font-size: 16px; line-height: 1.6; color: var(--text-muted); text-wrap: pretty; } @media (min-width: 640px) { .product { padding: 32px; border-radius: 16px; } .product p { font-size: 17px; } } @media (min-width: 1024px) { .products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } } /* ---------- Rólunk ---------- */ .about { display: grid; gap: 32px; } .about__media { display: flex; flex-direction: column; gap: 12px; max-width: 420px; } .portrait { width: 100%; aspect-ratio: 1 / 1.1; border: 1px solid var(--line); border-radius: 16px; object-fit: cover; } .portrait--placeholder { display: flex; align-items: center; justify-content: center; background-color: var(--surface-2); background-image: linear-gradient(to right, var(--grid-line) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px); background-size: 24px 24px; } .portrait__initials { font-family: var(--font-serif); font-size: clamp(64px, 6vw + 30px, 112px); font-style: italic; font-weight: 500; line-height: 1; color: var(--accent-em); } .about__caption { font-size: 14px; color: var(--text-subtle); } .about__body { display: flex; flex-direction: column; gap: 20px; } .about__intro { font-size: clamp(17px, 0.2vw + 16.2px, 19px); line-height: 1.6; text-wrap: pretty; } .about__bio { font-size: 16px; line-height: 1.65; color: var(--text-muted); text-wrap: pretty; } .about__story { font-family: var(--font-serif); font-size: clamp(19px, 0.2vw + 18.2px, 21px); font-style: italic; line-height: 1.45; text-wrap: pretty; } .facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; margin-top: 6px; padding-top: 24px; border-top: 1px solid var(--line); } .facts div { display: flex; flex-direction: column-reverse; gap: 6px; } .facts dd { font-family: var(--font-serif); font-size: clamp(34px, 0.95vw + 30.3px, 44px); font-weight: 500; line-height: 1; } .facts dt { font-size: 14px; line-height: 1.4; color: var(--text-subtle); } @media (min-width: 640px) { .about__body { gap: 22px; } .about__bio { font-size: 17px; } .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding-top: 26px; } } @media (min-width: 1024px) { .about { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 72px; align-items: start; } .about__media { max-width: none; } } /* ---------- GYIK ---------- */ .faq-grid { display: grid; gap: 28px; } .faq { border-bottom: 1px solid var(--line); } .faq details { border-top: 1px solid var(--line); } .faq summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 0; list-style: none; cursor: pointer; font-size: clamp(17px, 0.2vw + 16.2px, 19px); font-weight: 600; line-height: 1.4; } .faq summary::-webkit-details-marker { display: none; } .faq summary:hover { color: var(--accent-text); } .faq summary .icon { width: 20px; height: 20px; transition: transform 0.2s ease; } .faq details[open] summary .icon { transform: rotate(180deg); } .faq__answer { padding: 0 0 22px; font-size: 16px; line-height: 1.65; color: var(--text-muted); text-wrap: pretty; } @media (min-width: 640px) { .faq summary { gap: 24px; padding: 22px 0; } .faq__answer { padding: 0 48px 24px 0; font-size: 17px; } } @media (min-width: 1024px) { .faq-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 72px; align-items: start; } } /* ---------- Kapcsolat ---------- */ .cta { padding-block: clamp(56px, 8vw, 96px); background: var(--cta-bg); color: var(--cta-text); } .cta__grid { display: grid; gap: 28px; } .cta h2 { font-family: var(--font-serif); font-size: clamp(32px, 2.3vw + 23px, 56px); font-weight: 500; line-height: 1.07; letter-spacing: -0.01em; text-wrap: balance; } .cta__text { margin-top: 16px; font-size: clamp(17px, 0.3vw + 16px, 20px); line-height: 1.55; text-wrap: pretty; } .cta__actions { display: flex; flex-direction: column; align-items: stretch; gap: 12px; } .cta__actions .btn { min-height: 54px; font-size: 17px; } .cta__mail { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; color: var(--cta-text); font-size: 16px; font-weight: 600; text-decoration: none; } .cta__mail:hover { color: var(--cta-text); text-decoration: underline; } .cta__note { font-size: 14px; text-align: center; } @media (min-width: 640px) { .cta__text { margin-top: 20px; } .cta__actions { align-items: flex-start; gap: 16px; } .cta__actions .btn { min-height: 56px; font-size: 18px; } .cta__mail { min-height: 0; padding-bottom: 2px; border-bottom: 1px solid var(--cta-line); font-size: 17px; } .cta__mail:hover { border-bottom-color: var(--cta-text); text-decoration: none; } .cta__note { font-size: 15px; text-align: left; } } @media (min-width: 1024px) { .cta__grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 72px; align-items: end; } } /* ---------- Lábléc ---------- */ .site-footer { padding-block: 40px 32px; background: var(--footer-bg); color: var(--footer-text); } .site-footer__grid { display: grid; gap: 24px; } .site-footer__brand { display: flex; flex-direction: column; gap: 12px; } .site-footer__brand p { font-size: 14px; line-height: 1.7; } .brand--inverse, .brand--inverse:hover { align-self: flex-start; color: #FFFFFF; } .brand--inverse .brand__tld { color: var(--deep-accent); } .brand--inverse .brand__tagline { color: var(--footer-muted); } .site-footer__col { display: flex; flex-direction: column; gap: 10px; font-size: 15px; } .site-footer__col ul { display: flex; flex-direction: column; gap: 8px; } .site-footer__heading { font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--footer-muted); } .site-footer a { color: var(--footer-link); text-decoration: none; } .site-footer a:hover { color: #FFFFFF; text-decoration: underline; } .site-footer .brand--inverse, .site-footer .brand--inverse:hover { color: #FFFFFF; text-decoration: none; } .site-footer__legal { display: flex; flex-direction: column; gap: 6px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--footer-line); font-size: 12.5px; line-height: 1.6; color: var(--footer-muted); } @media (min-width: 768px) { .site-footer { padding-block: 64px 40px; } .site-footer__grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); gap: 48px; } .site-footer__brand { gap: 14px; } .site-footer__brand p { font-size: 15px; } .site-footer__col ul { gap: 10px; } .site-footer__legal { gap: 8px; margin-top: 40px; padding-top: 24px; font-size: 13px; } } /* ---------- Jogi aloldalak ---------- */ .page-head { padding-block: clamp(40px, 6vw, 72px) clamp(32px, 4.5vw, 56px); border-bottom: 1px solid var(--line); } .page-head__title { margin-top: 12px; font-size: clamp(34px, 2vw + 26px, 56px); } .prose { max-width: 760px; font-size: 16px; line-height: 1.7; } .prose section + section { margin-top: 40px; } .prose h2 { margin-bottom: 12px; font-family: var(--font-serif); font-size: clamp(23px, 0.6vw + 20.5px, 30px); font-weight: 500; line-height: 1.2; text-wrap: balance; } .prose p + p, .prose p + ul, .prose p + ol, .prose ul + p, .prose ol + p, .prose p + .table-wrap, .prose .table-wrap + p { margin-top: 14px; } .prose ul, .prose ol { padding-left: 1.3em; } .prose li + li { margin-top: 6px; } .prose a { text-underline-offset: 2px; } .prose .notice { padding: 22px 24px; border-radius: 14px; background: var(--accent-wash); } .prose .notice h2 { margin-bottom: 10px; } .table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; } .prose table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15px; line-height: 1.5; } .prose th, .prose td { padding: 10px 14px; text-align: left; vertical-align: top; } .prose thead th { background: var(--surface-2); font-weight: 600; } .prose tbody tr + tr td { border-top: 1px solid var(--line); } @media (min-width: 640px) { .prose { font-size: 17px; } .prose section + section { margin-top: 48px; } .prose .notice { padding: 26px 30px; } }