/* ═══════════════════════════════════════════════════════════════ IGÉNYFELMÉRŐ · V06 mockup — oldal-specifikus stílusok Alap: main.css (nav, footer, tokenek, tipográfia) ─────────────────────────────────────────────────────────── SZÍNVÁLTÓ: a téma a -en. A színek --if-* tokenekben, így egyetlen kapcsoló váltja az egész oldalt. CHANGELOG v1 (2026-07-18) — sötét/világos témázott hero + 4-csoportos űrlap (chip-alapú checkbox/radio) + köszönöm-állapot. ═══════════════════════════════════════════════════════════════ */ body { overflow-x: clip; } /* ============ TÉMA-TOKENEK ============ */ html[data-theme="dark"] { --if-bg: #0a0a0c; --if-text: #f5f5f7; --if-mute: rgba(245, 245, 247, 0.62); --if-faint: rgba(245, 245, 247, 0.4); --if-line: rgba(255, 255, 255, 0.1); --if-card: rgba(255, 255, 255, 0.03); --if-in-bg: rgba(255, 255, 255, 0.05); --if-in-border: rgba(255, 255, 255, 0.15); --if-chip-on: rgba(255, 255, 255, 0.1); --if-grid-line: rgba(255, 255, 255, 0.065); --if-eyebrow-border: rgba(255, 255, 255, 0.18); /* primary gomb = a szöveg ellentéte (nem narancs), az akcent csak a kis számokon */ --if-btn-bg: #f5f5f7; --if-btn-text: #0a0a0c; --if-btn-hover: #ffffff; --if-focus: rgba(255, 255, 255, 0.55); --if-focus-ring: rgba(255, 255, 255, 0.16); } html[data-theme="light"] { --if-bg: #ffffff; --if-text: #0a0a0c; --if-mute: #6b7280; --if-faint: #9ca3af; --if-line: #dfe3e8; --if-card: #eceff3; --if-in-bg: #ffffff; --if-in-border: #ccd2d9; --if-chip-on: rgba(15, 18, 22, 0.06); --if-grid-line: rgba(15, 18, 22, 0.055); --if-eyebrow-border: var(--line-2); --if-btn-bg: #0a0a0c; --if-btn-text: #ffffff; --if-btn-hover: #26292e; --if-focus: #0a0a0c; --if-focus-ring: rgba(15, 18, 22, 0.12); } /* ============ FEJLÉC: sötét témában tiszta fekete, egybeolvad a heróval ============ */ html[data-theme="dark"] .nav.nav--dark { background: #0a0a0c; } /* ============ SZÍNVÁLTÓ GOMB ============ */ .if-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid currentColor; background: transparent; color: var(--text); cursor: pointer; opacity: 0.7; transition: opacity 0.2s var(--ease), transform 0.35s var(--ease); } .nav--dark .if-theme-toggle { color: #f5f5f4; } /* fekete fejlécen fehér színváltó */ .if-theme-toggle:hover { opacity: 1; transform: rotate(18deg); } .if-theme-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .if-theme-toggle .ic-moon { fill: currentColor; stroke: none; } html[data-theme="dark"] .if-theme-toggle .ic-sun { display: none; } html[data-theme="light"] .if-theme-toggle .ic-moon { display: none; } /* ============ HERO ============ */ .if-hero { position: relative; min-height: calc(100vh - 70px); min-height: calc(100dvh - 70px); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; background: var(--if-bg); color: var(--if-text); overflow: hidden; padding: clamp(104px, 13vh, 148px) clamp(24px, 5vw, 60px) clamp(60px, 8vh, 110px); text-align: center; transition: background 0.4s var(--ease), color 0.4s var(--ease); } .if-hero-grid { position: absolute; inset: 0; background-image: repeating-linear-gradient(90deg, var(--if-grid-line) 0 1px, transparent 1px 38px), repeating-linear-gradient(0deg, var(--if-grid-line) 0 1px, transparent 1px 38px); -webkit-mask: radial-gradient(ellipse 78% 74% at 50% 32%, #000, transparent 82%); mask: radial-gradient(ellipse 78% 74% at 50% 32%, #000, transparent 82%); pointer-events: none; } .if-hero-inner { position: relative; z-index: 2; max-width: 720px; margin: 0 auto; } .if-eyebrow { display: inline-block; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--if-mute); padding: 6px 14px; border: 1px solid var(--if-eyebrow-border); border-radius: 999px; margin-bottom: 22px; } .if-hero h1 { font-family: var(--font-display); font-size: clamp(2.4rem, 5.4vw, 4.5rem); font-weight: 700; letter-spacing: -0.035em; line-height: 1.05; margin-bottom: clamp(16px, 2.2vw, 24px); } .if-hero h1 span { color: var(--if-faint); } .if-lead { max-width: 580px; margin: 0 auto clamp(28px, 3.4vw, 38px); color: var(--if-mute); font-size: clamp(1.02rem, 1.3vw, 1.18rem); line-height: 1.62; } .if-hero-cta { display: inline-flex; align-items: center; gap: 8px; padding: 13px 26px; background: var(--if-btn-bg); color: var(--if-btn-text); font-weight: 600; font-size: 0.98rem; border-radius: 10px; transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease); } .if-hero-cta svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .if-hero-cta:hover { background: var(--if-btn-hover); transform: translateY(-2px); box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.45); } /* ============ ŰRLAP ============ */ .if-form-wrap { position: relative; background: var(--if-bg); color: var(--if-text); padding: calc(clamp(60px, 9vw, 115px) + 40px) clamp(24px, 5vw, 60px) clamp(70px, 8vw, 120px); scroll-margin-top: 60px; /* a #urlap-ra ugrás a nav-magasság (~68px) ALÁ álljon, hogy a hero (görbe) TELJESEN a nav mögé kerüljön, ne maradjon narancs csík; a szekció padding-top adja a rést a progressbar és a nav közt */ transition: background 0.4s var(--ease), color 0.4s var(--ease); } .if-form-inner { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; } /* a hero comb-vonalainak folytatása a kvíz-szekció tetején, lefelé elhalványulva (szekció-átmenet) */ .if-comb-fade { position: absolute; top: 0; left: 0; right: 0; height: clamp(60px, 9vw, 115px); z-index: 0; pointer-events: none; -webkit-mask: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.5) 50%, transparent 100%); mask: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.5) 50%, transparent 100%); } .if-comb-fade svg { width: 100%; height: 100%; display: block; } .if-group { border: 1px solid var(--if-line); background: var(--if-card); border-radius: 18px; padding: clamp(22px, 3vw, 34px); margin: 0 0 18px; } .if-group legend { display: flex; align-items: baseline; gap: 12px; font-family: var(--font-display); font-size: clamp(1.15rem, 1.8vw, 1.45rem); font-weight: 700; letter-spacing: -0.02em; color: var(--if-text); padding: 0; margin-bottom: 20px; } .if-group legend .if-no { font-family: var(--font-mono); font-size: 0.8rem; font-weight: 500; color: var(--accent); } .if-help { color: var(--if-mute); font-size: 0.95rem; line-height: 1.55; margin-bottom: 14px; } .if-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; } .if-field { display: flex; flex-direction: column; gap: 7px; } .if-field.if-span2 { grid-column: 1 / -1; } .if-field.if-mt { margin-top: 18px; } .if-field label { font-size: 0.86rem; font-weight: 500; color: var(--if-text); } .if-field label i { font-style: normal; color: var(--if-faint); font-weight: 400; } .if-field input, .if-field select, .if-field textarea { width: 100%; font-family: var(--font-sans); font-size: 0.98rem; color: var(--if-text); background: var(--if-in-bg); border: 1px solid var(--if-in-border); border-radius: 10px; padding: 12px 14px; transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease); } .if-field textarea { min-height: 96px; resize: vertical; line-height: 1.55; } .if-field input::placeholder, .if-field textarea::placeholder { color: var(--if-faint); } .if-field input:focus, .if-field select:focus, .if-field textarea:focus { outline: none; border-color: var(--if-focus); box-shadow: 0 0 0 3px var(--if-focus-ring); } .if-field select { appearance: none; -webkit-appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; padding-right: 40px; } /* chip-alapú checkbox / radio */ .if-chips { display: flex; flex-wrap: wrap; gap: 10px; } .if-chip { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px solid var(--if-in-border); background: var(--if-in-bg); border-radius: 999px; font-size: 0.9rem; color: var(--if-text); cursor: pointer; transition: border-color 0.2s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease); } .if-chip input { position: absolute; opacity: 0; width: 0; height: 0; } .if-chip span { position: relative; } .if-chip:hover { border-color: var(--if-faint); } .if-chip:has(input:checked) { border-color: var(--if-text); background: var(--if-chip-on); color: var(--if-text); font-weight: 600; } .if-chip:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--if-focus-ring); } .if-chip-soft { border-style: dashed; color: var(--if-mute); } /* honeypot: embernek láthatatlan */ .if-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; } /* gdpr + beküldés */ .if-gdpr { display: flex; align-items: flex-start; gap: 10px; margin: 22px 2px 20px; font-size: 0.92rem; color: var(--if-mute); line-height: 1.5; } .if-gdpr input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--if-text); flex-shrink: 0; } .if-gdpr a { color: var(--if-text); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } .if-submit { display: inline-flex; align-items: center; justify-content: center; width: 100%; padding: 16px 28px; background: var(--if-btn-bg); color: var(--if-btn-text); font-weight: 600; font-size: 1.02rem; border: none; border-radius: 12px; cursor: pointer; transition: background 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease); } .if-submit:hover { background: var(--if-btn-hover); transform: translateY(-2px); box-shadow: 0 16px 34px -16px rgba(0, 0, 0, 0.5); } .if-note { text-align: center; margin-top: 14px; font-size: 0.86rem; color: var(--if-faint); } /* ============ KÖSZÖNÖM-ÁLLAPOT ============ */ .if-success { text-align: center; padding: clamp(30px, 5vw, 60px) 0; } .if-chk { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: var(--if-btn-bg); margin-bottom: 22px; } .if-chk svg { width: 30px; height: 30px; fill: none; stroke: var(--if-btn-text); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .if-success h2 { font-family: var(--font-display); font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 700; letter-spacing: -0.03em; color: var(--if-text); margin-bottom: 14px; } .if-success p { max-width: 480px; margin: 0 auto; color: var(--if-mute); font-size: 1.04rem; line-height: 1.6; } .if-success-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 30px; } .if-submit.if-inline { width: auto; padding: 13px 26px; font-size: 0.98rem; } .if-ghost { display: inline-flex; align-items: center; padding: 13px 26px; border: 1px solid var(--if-in-border); border-radius: 12px; color: var(--if-text); font-weight: 600; font-size: 0.98rem; transition: border-color 0.2s var(--ease), background 0.2s var(--ease); } .if-ghost:hover { border-color: var(--if-faint); } /* ============ RESZPONZÍV ============ */ @media (max-width: 620px) { .if-grid2 { grid-template-columns: 1fr; } } /* ============ 2K ============ */ @media (min-width: 1900px) { .if-hero-inner { max-width: 860px; } .if-hero h1 { font-size: 4.6rem; } .if-lead { font-size: 1.2rem; max-width: 660px; } .if-form-inner { max-width: 860px; } } /* ============ KVÍZ-WIZARD (10 lépéses igényfelmérő) ============ */ .if-quiz { max-width: 620px; margin: 0 auto; } /* haladás-csík */ .if-prog { margin-bottom: clamp(30px, 4vw, 48px); } .if-prog-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .if-prog-count { font-family: var(--font-mono, 'Inter', sans-serif); font-size: 0.9rem; color: var(--if-mute); } .if-prog-count b { color: var(--if-text); font-weight: 700; font-size: 1.06rem; } .if-prog-count i { font-style: normal; margin-left: 2px; } .if-prog-label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); } .if-prog-track { height: 6px; border-radius: 999px; background: var(--if-card); overflow: hidden; } .if-prog-fill { display: block; height: 100%; width: 10%; border-radius: 999px; background: var(--accent); transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1); } /* lépés-panelek */ .if-steps { min-height: clamp(250px, 33vh, 330px); } .if-step { border: 0; padding: 0; margin: 0; min-width: 0; } .if-step:not(.is-active) { display: none; } .if-step.is-active { display: block; animation: ifStepIn 0.4s cubic-bezier(0.22, 1, 0.36, 1); } @keyframes ifStepIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .if-q { font-family: var(--font-display); font-size: clamp(1.4rem, 1rem + 1.7vw, 2rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.16; color: var(--if-text); } .if-step .if-help { margin-top: 10px; margin-bottom: 22px; } .if-chips-pick .if-chip { font-size: 1rem; padding: 13px 20px; } /* navigáció */ .if-nav { display: flex; align-items: center; gap: 12px; margin-top: clamp(28px, 4vw, 40px); } .if-nav-sp { flex: 1 1 auto; } .if-back { background: transparent; border: 1px solid var(--if-in-border); color: var(--if-mute); padding: 12px 22px; border-radius: 12px; font-weight: 600; font-size: 0.96rem; cursor: pointer; transition: border-color 0.2s, color 0.2s; } .if-back:hover { border-color: var(--if-faint); color: var(--if-text); } .if-next, .if-send { width: auto; min-width: 200px; margin: 0; } .if-hint { text-align: right; margin: 12px 2px 0; font-size: 0.9rem; color: var(--accent); } .if-turnstile { margin: 6px 0; min-height: 66px; } @media (prefers-reduced-motion: reduce) { .if-step.is-active { animation: none; } .if-prog-fill { transition: none; } } @media (max-width: 560px) { .if-nav { flex-wrap: wrap; } .if-nav-sp { display: none; } .if-next, .if-send { flex: 1 1 100%; order: 1; min-width: 0; } .if-back { order: 2; flex: 1 1 100%; text-align: center; } .if-hint { text-align: center; } } /* FONTOS: a .if-submit display-je felülírná az UA [hidden]-t → a nav-gombok hidden-je expliciten */ .if-next[hidden], .if-send[hidden], .if-back[hidden] { display: none !important; } /* opcionális második pipa (értesítés-opt-in): szorosabban a kötelező alá */ .if-gdpr.if-optin { margin: 2px 2px 18px; } .if-gdpr:has(+ .if-optin) { margin-bottom: 6px; } /* narancs növekedés-görbe a heróban (mint a főoldal „Veled nő") */ .if-curve { position: absolute; inset: auto 0 0 0; height: 64%; z-index: 1; pointer-events: none; } .if-curve svg { width: 100%; height: 100%; display: block; }