/* ───────────────────────────────────────────────────────────── Learning Agents — Premium Landing Brand: Expert Flow Premium Dark Library Inspiráció a struktúrához: hermes-agent.nousresearch.com Fonts loaded via in HTML for non-blocking parallel fetch (no @import, no extra Inter family). ───────────────────────────────────────────────────────────── */ :root { color-scheme: dark; --bg: #0a0a0c; --bg-elev: #111114; --bg-elev-2: #16161a; --card: #131316; --card-hover: #1a1a1e; --border: #1f1f23; --border-strong: #2a2a2e; --border-cell: #232327; /* etalon-token: section-bordered grid (ev-landings, expert-flow-agents) */ --text: #fafafa; --text-muted: #a1a1aa; --text-dim: #8b8b94; --accent: #b9a7e0; --accent-soft: rgba(185, 167, 224, 0.10); --accent-strong: #cdb9eb; --accent-glow: rgba(185, 167, 224, 0.18); --font-sans: 'Instrument Sans', "Instrument Sans Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --font-serif: 'Instrument Serif', Georgia, "Times New Roman", serif; --font-mono: 'JetBrains Mono', ui-monospace, "SF Mono", Menlo, monospace; --radius-sm: 10px; --radius: 16px; --radius-lg: 20px; --radius-pill: 999px; --container: 1200px; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans); font-feature-settings: 'cv11', 'ss01'; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: -0.011em; line-height: 1.6; } html { scroll-behavior: smooth; } ::selection { background: var(--accent); color: var(--bg); } a { color: inherit; text-decoration: none; } *:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: inherit; } img, svg { display: block; max-width: 100%; } /* ─── Accessibility utilities ───────────────────────────────── */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; top: -100px; left: 16px; z-index: 200; padding: 10px 18px; background: var(--accent); color: var(--bg); font-size: 13px; font-weight: 600; border-radius: 8px; text-decoration: none; transition: top 0.2s var(--ease-out); } .skip-link:focus, .skip-link:focus-visible { top: 16px; outline: 2px solid var(--text); outline-offset: 2px; } /* Inline-style replacements (CSP-friendly utility classes) */ .link-accent { color: var(--accent); border-bottom: 1px solid rgba(185, 167, 224, 0.3); } .link-accent:hover { border-bottom-color: var(--accent); } .final-ctas { margin-top: 40px; } .install-meta { text-align: center; margin-top: 40px; color: var(--text-dim); font-size: 13px; } main#main { display: block; } /* ───────────────────────────────────────────────────────────── Brand bar — sticky top-left identity ───────────────────────────────────────────────────────────── */ /* brand-bar — etalon top-stripe (overrides brand.css inline as stripe, not fixed) */ .brand-bar { position: relative; z-index: 5; top: auto; left: auto; pointer-events: auto; /* inherit brand.css layout: display inline-flex, padding, border-bottom */ } .brand-bar .dot { animation: pulse 2.4s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.55; transform: scale(0.85); } } .nav-links { position: fixed; top: 22px; right: 28px; z-index: 50; display: flex; gap: 24px; font-size: 13px; color: var(--text-muted); } .nav-links a { transition: color 0.18s var(--ease-out); text-decoration: none; border: none; } .nav-links a:hover { color: var(--text); } .nav-links .nav-github { color: var(--accent); } .nav-links .nav-github:hover { color: var(--accent-strong); } /* ───────────────────────────────────────────────────────────── Hero ───────────────────────────────────────────────────────────── */ header.hero { padding: 160px 24px 100px; text-align: center; background: var(--bg); position: relative; overflow: hidden; } header.hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 55% at 50% 0%, rgba(185, 167, 224, 0.12), transparent 65%), radial-gradient(ellipse 40% 30% at 50% 100%, rgba(185, 167, 224, 0.04), transparent 70%); pointer-events: none; z-index: 0; } header.hero::after { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 1px; height: 100%; background: linear-gradient(to bottom, transparent 0%, rgba(185, 167, 224, 0.18) 30%, rgba(185, 167, 224, 0.18) 70%, transparent 100%); pointer-events: none; z-index: 0; opacity: 0.4; } header.hero > * { position: relative; z-index: 1; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); font-weight: 500; margin-bottom: 28px; padding: 6px 14px; background: var(--accent-soft); border: 1px solid rgba(185, 167, 224, 0.22); border-radius: var(--radius-pill); } header.hero h1 { font-family: var(--font-serif); font-size: clamp(48px, 7.6vw, 96px); font-weight: 400; margin: 0 0 24px; letter-spacing: -0.025em; line-height: 1.02; color: var(--text); max-width: 920px; margin-left: auto; margin-right: auto; } header.hero h1 em { font-style: italic; color: var(--accent); font-weight: 400; } header.hero .lede { font-size: 19px; color: var(--text-muted); margin: 0 auto; max-width: 660px; line-height: 1.55; } .stats { display: flex; gap: 12px; justify-content: center; margin-top: 52px; flex-wrap: wrap; } .stat { background: var(--card); border: 1px solid var(--border); padding: 18px 26px; border-radius: 14px; text-align: left; min-width: 120px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset; transition: transform 0.3s var(--ease-out), border-color 0.3s var(--ease-out); } .stat:hover { transform: translateY(-2px); border-color: var(--border-strong); } .stat b { font-family: var(--font-serif); font-size: 32px; font-weight: 400; display: block; color: var(--text); letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 4px; } .stat span { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.12em; } /* Hero CTAs */ .hero-ctas { display: flex; gap: 14px; justify-content: center; margin-top: 48px; flex-wrap: wrap; } .cta { display: inline-flex; align-items: center; gap: 10px; padding: 15px 28px; border-radius: var(--radius-pill); font-size: 14px; font-weight: 500; letter-spacing: -0.005em; cursor: pointer; border: 1px solid transparent; background: transparent; color: var(--text); transition: background 0.22s var(--ease-out), border-color 0.22s var(--ease-out), transform 0.22s var(--ease-out), box-shadow 0.22s var(--ease-out); font-family: inherit; text-decoration: none; /* WCAG 2.5.5 touch target — 44×44 minimum (HIG/Material baseline) */ min-height: 44px; min-width: 44px; } /* Primary "try it now" CTA — strong lavender, the conversion driver */ .cta-try { background: var(--accent); color: var(--bg); border-color: var(--accent); box-shadow: 0 0 0 rgba(185, 167, 224, 0); } .cta-try:hover { background: var(--accent-strong); border-color: var(--accent-strong); box-shadow: 0 0 32px var(--accent-glow); transform: translateY(-1px); } /* GitHub icon */ .cta svg { width: 16px; height: 16px; flex-shrink: 0; } /* CTA states (loading / copied / error) — visual feedback for data-try-prompt */ .cta-try.is-loading { opacity: 0.85; cursor: progress; } .cta-try.is-copied { background: var(--accent-strong); border-color: var(--accent-strong); box-shadow: 0 0 24px var(--accent-glow); } .cta-try.is-error { background: var(--card); color: var(--text); border-color: var(--border-strong); } /* ───────────────────────────────────────────────────────────── Container ───────────────────────────────────────────────────────────── */ .container { max-width: var(--container); margin: 0 auto; padding: 0 24px; } section { padding: 112px 0; } .section-header { text-align: center; margin-bottom: 72px; } .section-header .eyebrow { margin-bottom: 16px; } .section-header h2 { font-family: var(--font-serif); font-size: clamp(34px, 4.8vw, 56px); font-weight: 400; margin: 0 0 16px; letter-spacing: -0.022em; line-height: 1.1; } .section-header h2 em { font-style: italic; color: var(--accent); } .section-header p { font-size: 17px; color: var(--text-muted); max-width: 640px; margin: 0 auto; line-height: 1.65; } /* ───────────────────────────────────────────────────────────── Dual pathway — oktató vs tanuló (post-hero) ───────────────────────────────────────────────────────────── */ .dual-pathway { padding-top: 24px; padding-bottom: 8px; } .pathway-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; max-width: 880px; margin: 0 auto; } .pathway-card { background: var(--accent-soft); border: 1px solid rgba(185, 167, 224, 0.22); border-radius: var(--radius); padding: 28px 26px; display: flex; flex-direction: column; gap: 10px; } .pathway-card .pathway-tag { font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); font-weight: 500; font-family: var(--font-mono); } .pathway-card h3 { font-family: var(--font-serif); font-size: 22px; font-weight: 400; margin: 4px 0 4px; color: var(--text); letter-spacing: -0.018em; font-style: italic; } .pathway-card p { font-size: 14.5px; color: var(--text-muted); line-height: 1.6; margin: 0; } .pathway-link { margin-top: auto; padding-top: 8px; font-size: 13px; color: var(--accent); font-weight: 500; border-bottom: none; transition: color 0.18s var(--ease-out); } .pathway-link:hover { color: var(--accent-strong); } /* ───────────────────────────────────────────────────────────── Problem section — mit old meg ───────────────────────────────────────────────────────────── */ .problem { text-align: center; } .problem .quote-large { font-family: var(--font-serif); font-size: clamp(26px, 3.2vw, 38px); font-weight: 400; font-style: italic; line-height: 1.4; letter-spacing: -0.012em; color: var(--text); max-width: 880px; margin: 0 auto; } .problem .quote-large em { background: linear-gradient(135deg, var(--accent), var(--accent-strong)); -webkit-background-clip: text; background-clip: text; color: transparent; font-style: italic; } .problem .attribution { margin-top: 28px; font-size: 13px; color: var(--text-dim); letter-spacing: 0.06em; text-transform: uppercase; } /* ───────────────────────────────────────────────────────────── Characters grid (4+2) ───────────────────────────────────────────────────────────── */ .characters-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; } .character-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 36px 32px; position: relative; overflow: hidden; transition: background 0.3s var(--ease-out), border-color 0.3s var(--ease-out), transform 0.3s var(--ease-out); } .character-card:hover { background: var(--card-hover); border-color: var(--border-strong); transform: translateY(-2px); } .character-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(to right, transparent, rgba(185, 167, 224, 0.4), transparent); opacity: 0; transition: opacity 0.35s var(--ease-out); } .character-card:hover::before { opacity: 1; } .character-card .icon { margin-bottom: 22px; display: inline-flex; width: 48px; height: 48px; align-items: center; justify-content: center; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 12px; color: var(--accent); transition: border-color 0.3s var(--ease-out), background 0.3s var(--ease-out); } .character-card:hover .icon { border-color: rgba(185, 167, 224, 0.32); background: rgba(185, 167, 224, 0.06); } .character-card .icon svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .character-card h3 { font-family: var(--font-serif); font-size: 26px; font-weight: 400; margin: 0 0 8px; letter-spacing: -0.02em; color: var(--text); } .character-card h3 em { font-style: italic; color: var(--accent); } .character-card .role { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 18px; display: block; } .character-card p { font-size: 15px; color: var(--text-muted); line-height: 1.65; margin: 0 0 20px; } .character-card .helps, .character-card .when-use { padding-top: 16px; border-top: 1px solid var(--border); font-size: 13.5px; color: var(--text-muted); line-height: 1.6; } .character-card .helps strong, .character-card .when-use strong { color: var(--text-dim); font-weight: 600; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; display: block; margin-bottom: 6px; } .character-card .when-use { color: var(--text-dim); font-size: 13px; margin-top: 12px; } /* Magyar domain példa aside — konkrét piaci kontextus minden karakterhez */ .character-card .character-example { margin-top: 16px; padding: 14px 16px; border-left: 2px solid var(--accent); background: rgba(185, 167, 224, 0.05); border-radius: 0 6px 6px 0; font-size: 12.5px; line-height: 1.6; color: var(--text-muted); } .character-card .character-example strong { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; font-weight: 500; } .character-card .character-example em { font-style: italic; color: var(--text); } /* ───────────────────────────────────────────────────────────── How it works — 4 step ───────────────────────────────────────────────────────────── */ .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; position: relative; } .step { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px 24px; position: relative; } .step .step-num { font-family: var(--font-serif); font-style: italic; font-size: 56px; color: var(--accent); line-height: 1; display: block; margin-bottom: 16px; letter-spacing: -0.04em; } .step h4 { font-size: 17px; font-weight: 600; margin: 0 0 12px; color: var(--text); letter-spacing: -0.012em; } .step p { font-size: 14px; color: var(--text-muted); margin: 0; line-height: 1.65; } /* ───────────────────────────────────────────────────────────── Code blocks ───────────────────────────────────────────────────────────── */ .code-block { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); position: relative; margin: 0; overflow: hidden; } .code-block .code-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--border); background: var(--bg-elev-2); } .code-block .code-label { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); font-family: var(--font-mono); } .code-block pre { margin: 0; padding: 22px 24px; font-family: var(--font-mono); font-size: 13.5px; line-height: 1.65; color: var(--text); overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } .code-block pre::-webkit-scrollbar { height: 6px; } .code-block pre::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; } .code-block pre::-webkit-scrollbar-track { background: transparent; } .code-block .copy-btn { background: transparent; border: 1px solid var(--border-strong); color: var(--text-muted); padding: 6px 12px; border-radius: 8px; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; font-family: inherit; cursor: pointer; transition: all 0.2s var(--ease-out); /* WCAG 2.5.5 touch target — 44×44 minimum (HIG/Material baseline) */ min-height: 44px; min-width: 44px; } .code-block .copy-btn:hover { border-color: var(--accent); color: var(--accent); } .code-block .copy-btn.copied { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); } /* Syntax tokens */ .tok-comment { color: var(--text-dim); font-style: italic; } .tok-cmd { color: var(--accent); } .tok-flag { color: var(--accent-strong); } .tok-string { color: #c8b6e2; } /* ───────────────────────────────────────────────────────────── Example session (chat-like) ───────────────────────────────────────────────────────────── */ .session-example { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 36px; max-width: 820px; margin: 0 auto; position: relative; } .session-example::before { content: ""; position: absolute; top: -1px; left: 28px; right: 28px; height: 1px; background: linear-gradient(to right, transparent, rgba(185, 167, 224, 0.32), transparent); } .session-turn { margin-bottom: 24px; } .session-turn:last-child { margin-bottom: 0; } .session-speaker { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 8px; font-weight: 500; display: flex; align-items: center; gap: 8px; } .session-turn.student .session-speaker { color: var(--text-muted); } .session-turn.character .session-speaker { color: var(--accent); } .session-turn.character .session-speaker .role-icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 1px solid rgba(185, 167, 224, 0.32); border-radius: 6px; background: var(--accent-soft); color: var(--accent); } .session-message { font-size: 15px; line-height: 1.65; color: var(--text); font-family: var(--font-mono); background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px 18px; } .session-turn.student .session-message { border-left: 2px solid var(--border-strong); color: var(--text-muted); } .session-turn.character .session-message { border-left: 2px solid var(--accent); color: var(--text); } .session-message strong { color: var(--accent-strong); font-weight: 500; } /* ───────────────────────────────────────────────────────────── Starter prompts — tab-switcher + cards ───────────────────────────────────────────────────────────── */ .prompt-tabs { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 36px; } .prompt-tab { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 10px 18px; font-family: inherit; font-size: 13px; font-weight: 500; color: var(--text-muted); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: background 0.22s var(--ease-out), border-color 0.22s var(--ease-out), color 0.22s var(--ease-out), transform 0.22s var(--ease-out); /* WCAG 2.5.5 touch target — 44×44 minimum */ min-height: 44px; min-width: 44px; } .prompt-tab:hover { border-color: var(--border-strong); color: var(--text); } .prompt-tab.active { background: var(--accent-soft); border-color: rgba(185, 167, 224, 0.4); color: var(--accent-strong); } .prompt-tab svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .prompt-panel { display: none; } .prompt-panel.active { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; animation: fadeInPanel 0.4s var(--ease-out); } @keyframes fadeInPanel { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .prompt-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 22px 18px; position: relative; cursor: pointer; transition: background 0.25s var(--ease-out), border-color 0.25s var(--ease-out), transform 0.25s var(--ease-out); display: flex; flex-direction: column; gap: 16px; min-height: 130px; text-align: left; font: inherit; color: inherit; } .prompt-card:hover { background: var(--card-hover); border-color: rgba(185, 167, 224, 0.32); transform: translateY(-2px); } .prompt-card .prompt-text { font-family: var(--font-mono); font-size: 13px; line-height: 1.6; color: var(--text); letter-spacing: 0; margin: 0; } .prompt-card .prompt-action { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border); font-size: 10.5px; color: var(--text-dim); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; } .prompt-card .prompt-action .copy-hint { display: flex; align-items: center; gap: 6px; } .prompt-card .prompt-action svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .prompt-card:hover .prompt-action { color: var(--accent); } .prompt-card.copied { border-color: var(--accent); background: rgba(185, 167, 224, 0.06); } .prompt-card.copied .prompt-action { color: var(--accent); } .prompts-help { text-align: center; font-size: 13px; color: var(--text-dim); margin-top: 36px; } .prompts-help code { font-family: var(--font-mono); font-size: 12px; color: var(--accent); padding: 1px 8px; background: var(--accent-soft); border-radius: 4px; border: 1px solid rgba(185, 167, 224, 0.18); } /* ───────────────────────────────────────────────────────────── Platforms grid ───────────────────────────────────────────────────────────── */ .platforms { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; } .platform { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; text-align: center; transition: border-color 0.25s var(--ease-out), background 0.25s var(--ease-out); } .platform:hover { border-color: var(--border-strong); background: var(--card-hover); } .platform .platform-name { font-family: var(--font-serif); font-size: 22px; letter-spacing: -0.018em; color: var(--text); margin-bottom: 6px; display: block; } .platform .platform-name em { font-style: italic; color: var(--accent); } .platform .platform-desc { font-size: 12px; color: var(--text-dim); letter-spacing: 0.04em; } .platform.featured { border-color: rgba(185, 167, 224, 0.32); background: linear-gradient(180deg, rgba(185, 167, 224, 0.06), transparent 100%); } .platform.featured .platform-name em { display: inline; } /* ───────────────────────────────────────────────────────────── Install — 3 step code blocks ───────────────────────────────────────────────────────────── */ .install-steps { display: flex; flex-direction: column; gap: 24px; } .install-step .step-label { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); font-weight: 500; margin-bottom: 12px; display: flex; align-items: center; gap: 10px; } .install-step .step-label .num { font-family: var(--font-serif); font-style: italic; font-size: 18px; color: var(--accent); letter-spacing: 0; text-transform: none; } .install-step .step-title { font-size: 16px; color: var(--text); margin-bottom: 12px; font-weight: 500; } .install-note { font-size: 13.5px; color: var(--text-muted); line-height: 1.55; margin-top: 14px; margin-bottom: 0; } .install-note code { background: var(--bg-elev-2); padding: 1px 6px; border-radius: 4px; font-size: 12.5px; color: var(--accent-strong); } /* ── Install mode tabs (Skill csomag vs Subagent csapat) ── */ .install-tabs { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 30px; } .install-tab { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 10px 20px; font-family: inherit; font-size: 13.5px; font-weight: 500; color: var(--text-muted); cursor: pointer; display: inline-flex; align-items: center; gap: 9px; min-height: 44px; transition: background 0.22s var(--ease-out), border-color 0.22s var(--ease-out), color 0.22s var(--ease-out); } .install-tab:hover { border-color: var(--border-strong); color: var(--text); } .install-tab.active { background: var(--accent-soft); border-color: rgba(185, 167, 224, 0.4); color: var(--accent-strong); } .install-tab svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .install-panel { display: none; } .install-panel.active { display: block; animation: fadeInPanel 0.4s var(--ease-out); } .install-mode-lead { max-width: 760px; margin: 0 auto 30px; text-align: center; font-size: 15px; line-height: 1.62; color: var(--text-muted); } .install-mode-lead code { background: var(--bg-elev-2); padding: 1px 6px; border-radius: 4px; font-size: 13px; color: var(--accent-strong); } .install-mode-best { display: block; margin-top: 10px; font-size: 13.5px; color: var(--text-dim); } .install-compare { max-width: 760px; margin: 36px auto 0; padding: 18px 22px; background: var(--card); border: 1px solid var(--border); text-align: center; } .install-compare-label { display: block; font-family: var(--font-mono, monospace); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; } .install-compare p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--text-muted); } /* ── Use-case cards (újrahasznosítja a character-card vizuált) ── */ .usecase-grid .character-card code, .usecase-note code { background: var(--bg-elev-2); padding: 1px 6px; border-radius: 4px; font-size: 12.5px; color: var(--accent-strong); font-family: var(--font-mono, monospace); word-break: break-word; } .usecase-note { max-width: 760px; margin: 28px auto 0; text-align: center; font-size: 14px; line-height: 1.6; color: var(--text-muted); } /* Szimmetrikus 2×2 rács (felülírja a characters-grid auto-fit-jét, ami 3+1-re tört) */ .cell-grid.characters-grid.usecase-grid { grid-template-columns: repeat(2, 1fr); max-width: 820px; margin-left: auto; margin-right: auto; } @media (max-width: 560px) { .cell-grid.characters-grid.usecase-grid { grid-template-columns: 1fr; } } /* JS nélkül: install fülek elrejtve, mindkét panel egymás alatt látható */ html:not(.js) .install-tabs { display: none !important; } html:not(.js) .install-panel, html:not(.js) .install-panel[hidden] { display: block !important; margin-bottom: 32px; } html:not(.js) .install-panel::before { content: attr(data-label); display: block; font-family: var(--font-mono, monospace); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent, #b9a7e0); margin-bottom: 16px; } /* 2.a / 2.b install-paths — Claude Code vs ChatGPT/Gemini/Cursor szétválasztás */ .install-paths { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; } .install-path { padding: 18px 20px; border: 1px solid var(--border-cell); border-radius: var(--radius-sm); background: var(--card); } .install-path-label { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); font-weight: 500; margin-bottom: 10px; } .install-path p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--text-muted); } .install-path code { background: var(--bg-elev-2); padding: 1px 6px; border-radius: 4px; font-size: 12.5px; color: var(--accent-strong); } @media (max-width: 720px) { .install-paths { grid-template-columns: 1fr; } } /* ZIP letöltés CTA — primer install button */ .cta.cta-zip { margin-top: 4px; background: var(--accent-soft); border: 1px solid var(--accent); color: var(--accent); display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: var(--radius-pill); font-weight: 500; text-decoration: none; transition: all 0.2s var(--ease-out); } .cta.cta-zip svg { width: 18px; height: 18px; } .cta.cta-zip:hover { background: var(--accent); color: var(--bg); transform: translateY(-1px); } /* Fejlesztőknek collapsible blokk */ .install-advanced { margin-top: 36px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-elev); overflow: hidden; } .install-advanced > summary { cursor: pointer; padding: 16px 22px; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); font-family: var(--font-mono); list-style: none; display: flex; align-items: center; justify-content: space-between; transition: color 0.2s var(--ease-out); } .install-advanced > summary::-webkit-details-marker { display: none; } .install-advanced > summary::after { content: "+"; font-size: 18px; color: var(--accent); font-family: var(--font-mono); transition: transform 0.2s var(--ease-out); } .install-advanced[open] > summary::after { content: "−"; } .install-advanced > summary:hover { color: var(--text); } .install-advanced-body { padding: 4px 22px 22px; border-top: 1px solid var(--border); } .install-advanced-body p { font-size: 14px; color: var(--text-muted); line-height: 1.6; margin: 16px 0 12px; } .install-advanced-body .code-block { margin-bottom: 4px; } /* ───────────────────────────────────────────────────────────── Pedagogy quote section ───────────────────────────────────────────────────────────── */ .pedagogy { background: var(--bg-elev); border-radius: var(--radius-lg); border: 1px solid var(--border); padding: 64px 48px; max-width: 880px; margin: 0 auto; text-align: center; position: relative; overflow: hidden; } .pedagogy::before { content: "\201C"; /* left double quotation mark */ position: absolute; top: -40px; left: 24px; font-family: var(--font-serif); font-size: 220px; color: var(--accent); opacity: 0.08; line-height: 1; font-style: italic; } .pedagogy blockquote { font-family: var(--font-serif); font-size: clamp(22px, 2.6vw, 32px); font-weight: 400; font-style: italic; line-height: 1.45; margin: 0; color: var(--text); letter-spacing: -0.012em; position: relative; } .pedagogy blockquote em { background: linear-gradient(135deg, var(--accent), var(--accent-strong)); -webkit-background-clip: text; background-clip: text; color: transparent; } .pedagogy .pedagogy-tags { margin-top: 36px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; } .pedagogy .pedagogy-tag { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); padding: 6px 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); } /* 2026 kontextus aside — Khanmigo / Duolingo / Claude 4.7 referencia */ .pedagogy .pedagogy-context { margin: 32px auto 0; max-width: 720px; border-left: 3px solid var(--accent); background: rgba(185, 167, 224, 0.06); padding: 18px 22px; border-radius: 0 8px 8px 0; } .pedagogy .pedagogy-context p { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--text-muted); } .pedagogy .pedagogy-context strong { color: var(--accent-strong); font-weight: 500; } .pedagogy .pedagogy-context em { font-style: italic; color: var(--text); } /* Comparison: hagyományos AI tutor vs Learning Agents */ .compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; max-width: 880px; margin: 48px auto 0; border: 1px solid var(--border-cell); border-radius: var(--radius); overflow: hidden; } .compare-col { padding: 28px 28px 32px; background: var(--card); } .compare-col + .compare-col { border-left: 1px solid var(--border-cell); } .compare-col--against { background: var(--bg-elev); } .compare-col--for { background: linear-gradient(180deg, rgba(185, 167, 224, 0.06), transparent 100%); } .compare-tag { display: inline-block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 16px; padding: 4px 10px; border-radius: 6px; } .compare-col--against .compare-tag { color: var(--text-dim); border: 1px solid var(--border-strong); } .compare-col--for .compare-tag { color: var(--accent); border: 1px solid rgba(185, 167, 224, 0.4); background: var(--accent-soft); } .compare-col ul { list-style: none; padding: 0; margin: 0; } .compare-col li { font-size: 14px; line-height: 1.55; color: var(--text-muted); padding: 8px 0 8px 24px; position: relative; border-bottom: 1px solid var(--border); } .compare-col li:last-child { border-bottom: none; } .compare-col li::before { position: absolute; left: 0; top: 8px; font-family: var(--font-mono); font-size: 14px; font-weight: 600; line-height: 1.55; } .compare-col--against li::before { content: "−"; color: var(--text-dim); } .compare-col--for li::before { content: "+"; color: var(--accent); } .pedagogy-meta { text-align: center; margin-top: 32px; font-size: 13px; color: var(--text-dim); } .pedagogy-meta a { color: var(--accent); border-bottom: 1px solid rgba(185, 167, 224, 0.3); } .pedagogy-meta a:hover { border-bottom-color: var(--accent); } /* ───────────────────────────────────────────────────────────── Final CTA ───────────────────────────────────────────────────────────── */ .final-cta { text-align: center; padding: 120px 0; } .final-cta h2 { font-family: var(--font-serif); font-size: clamp(40px, 5.4vw, 64px); font-weight: 400; letter-spacing: -0.024em; line-height: 1.05; margin: 0 0 20px; } .final-cta h2 em { font-style: italic; color: var(--accent); } .final-cta .lede { font-size: 17px; color: var(--text-muted); max-width: 540px; margin: 0 auto 40px; line-height: 1.55; } /* ───────────────────────────────────────────────────────────── Footer ───────────────────────────────────────────────────────────── */ footer { border-top: 1px solid var(--border); padding: 56px 24px 40px; text-align: center; color: var(--text-dim); font-size: 13px; } footer .footer-brand { font-family: var(--font-serif); font-size: 22px; font-style: italic; color: var(--text); letter-spacing: -0.014em; } footer .footer-meta { margin-top: 12px; font-size: 12px; letter-spacing: 0.04em; } footer .footer-links { margin-top: 24px; display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; font-size: 13px; } footer .footer-links a { color: var(--text-muted); transition: color 0.18s var(--ease-out); } footer .footer-links a:hover { color: var(--accent); } /* ───────────────────────────────────────────────────────────── Animations — scroll-triggered reveal ───────────────────────────────────────────────────────────── */ .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); will-change: opacity, transform; } .reveal.visible { opacity: 1; transform: translateY(0); } .reveal-delay-1 { transition-delay: 80ms; } .reveal-delay-2 { transition-delay: 160ms; } .reveal-delay-3 { transition-delay: 240ms; } .reveal-delay-4 { transition-delay: 320ms; } .reveal-delay-5 { transition-delay: 400ms; } .reveal-delay-6 { transition-delay: 480ms; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .brand-bar .dot, .eyebrow .dot { animation: none; } html { scroll-behavior: auto; } } /* ───────────────────────────────────────────────────────────── Responsive ───────────────────────────────────────────────────────────── */ @media (max-width: 860px) { /* Sticky nav követi a scrollt — nincs üres sáv a brand bar alatt görgetésnél */ .nav-links { position: sticky; top: 0; left: 0; right: 0; z-index: 40; padding: 8px 16px; gap: 18px; font-size: 12px; background: rgba(10, 10, 12, 0.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); overflow-x: auto; overflow-y: hidden; white-space: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch; justify-content: flex-start; } .nav-links::-webkit-scrollbar { display: none; } .nav-links a { flex-shrink: 0; padding: 4px 0; } } @media (max-width: 720px) { header.hero { padding: 168px 18px 72px; } /* extra top for sticky nav */ section { padding: 80px 0; } .container { padding: 0 18px; } .pedagogy { padding: 48px 24px; } .session-example { padding: 24px; } .session-message { font-size: 13.5px; } .stat { padding: 14px 18px; min-width: 100px; } .stat b { font-size: 26px; } .character-card { padding: 28px 22px; } .compare-grid { grid-template-columns: 1fr; } .compare-col + .compare-col { border-left: none; border-top: 1px solid var(--border-cell); } .pathway-card { padding: 24px 22px; } /* Code block mobile padding-bottom for scroll affordance */ .code-block pre { padding-bottom: 20px; font-size: 12.5px; } } /* Toast — safe-area-aware position to clear iOS home indicator */ .toast { position: fixed; bottom: max(32px, env(safe-area-inset-bottom, 32px)); left: 50%; transform: translateX(-50%) translateY(20px); background: var(--bg-elev); border: 1px solid var(--accent); color: var(--accent); padding: 12px 22px; border-radius: var(--radius-pill); font-size: 13px; letter-spacing: 0.04em; z-index: 100; opacity: 0; transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out); pointer-events: none; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 16px var(--accent-glow); max-width: calc(100vw - 32px); text-align: center; } .toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); } @media (max-width: 720px) { .toast { bottom: max(24px, env(safe-area-inset-bottom, 24px)); font-size: 12.5px; padding: 10px 18px; } } /* ═════════════════════════════════════════════════════════════ Etalon cell-bordered grid pattern (matches ev-landings .features-wrap, expert-flow-agents .g-feat) ═════════════════════════════════════════════════════════════ */ /* Gap-as-border cell grid: black cells by default, thin gridlines, hover lights up. (High specificity here is intentional — it must beat any earlier per-cell rule.) */ .characters-grid, .steps, .platforms { gap: 1px !important; background: var(--border-cell); border: 1px solid var(--border-cell); } .characters-grid .character-card, .steps .step, .platforms .platform { border-radius: 0 !important; border: none !important; background: var(--bg) !important; /* BLACK by default — matches the page */ transition: background 220ms ease; } .characters-grid .character-card:hover, .steps .step:hover, .platforms .platform:hover { background: var(--accent-soft) !important; /* violet highlight on hover */ } /* ───────────────────────────────────────────────────────────── Brand unification overrides (brand.css integration) ───────────────────────────────────────────────────────────── */ /* Ensure nav-links stays above brand.css body > * z-index:2 */ .nav-links { z-index: 50; } /* cell-grid on characters uses brand.css border tokens — ensure border-cell maps correctly for the existing characters-grid override block */ .cell-grid.characters-grid { border-color: var(--color-border-strong, var(--border-cell)); } .cell-grid.characters-grid .character-card { border-color: var(--color-border-strong, var(--border-cell)); /* padding comes from cell-grid > * in brand.css (2.5rem), character-card had 36px 32px — keep the larger value to preserve layout */ padding: 36px 32px; } /* hero-stage: keep existing hero padding, just ensure overflow:hidden for glyph */ header.hero.hero-stage { overflow: hidden; } /* em-violet inside h1 should keep display font style (brand.css handles this, but hero h1 em override in style.css takes precedence — reset it) */ header.hero h1 .em-violet, header.hero h1 em.em-violet { color: var(--color-accent-violet); font-family: var(--font-display); font-style: italic; background: none; -webkit-background-clip: unset; background-clip: unset; } /* ─── 404 page — uses brand-bar + cta from brand.css; layout below ── */ .notfound-main { max-width: 720px; margin: 0 auto; padding: clamp(120px, 18vh, 200px) 24px 80px; text-align: center; } .notfound-eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px; border: 1px solid var(--border-cell, var(--border-strong)); background: var(--bg-elev); border-radius: var(--radius-pill); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; color: var(--text-muted); text-transform: uppercase; margin-bottom: 32px; } .notfound-h1 { font-family: var(--font-serif); font-size: clamp(2.5rem, 6vw, 4.5rem); line-height: 1.04; letter-spacing: -0.02em; margin: 0 0 24px; color: var(--text); font-weight: 400; } .notfound-h1 em { color: var(--accent); font-style: italic; font-family: var(--font-serif); } .notfound-p { color: var(--text-muted); font-size: 1.125rem; line-height: 1.65; max-width: 60ch; margin: 0 auto 56px; } /* ───────────────────────────────────────────────────────────── Pro Tip — aside a prompts szekció végén ───────────────────────────────────────────────────────────── */ .pro-tip { margin: 48px auto 0; max-width: 720px; padding: 22px 26px; background: var(--accent-soft); border: 1px solid rgba(185, 167, 224, 0.22); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); } .pro-tip-label { display: inline-block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; font-weight: 500; } .pro-tip p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--text); } .pro-tip strong { color: var(--accent-strong); font-weight: 500; } /* ───────────────────────────────────────────────────────────── Expert Flow Ökoszisztéma — shared footer block ───────────────────────────────────────────────────────────── */ .ecosystem-footer { border-top: 1px solid var(--border); padding: 72px 0 56px; background: var(--bg-elev); } .ecosystem-footer .container { padding-left: 24px; padding-right: 24px; } .ecosystem-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); margin: 0 0 10px; font-weight: 500; } .ecosystem-footer h3 { font-family: var(--font-serif); font-style: italic; font-size: clamp(24px, 3.4vw, 32px); font-weight: 400; letter-spacing: -0.018em; margin: 0 0 28px; color: var(--text); } .ecosystem-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; } .ecosystem-grid a { display: block; padding: 14px 16px; border: 1px solid var(--border-cell); border-radius: var(--radius-sm); color: var(--text); text-decoration: none; font-size: 14px; line-height: 1.5; background: var(--card); transition: border-color 0.22s var(--ease-out), background 0.22s var(--ease-out), transform 0.22s var(--ease-out); } .ecosystem-grid a:hover { border-color: var(--accent); background: rgba(185, 167, 224, 0.06); transform: translateY(-1px); } /* ───────────────────────────────────────────────────────────── 320 / 480 px responsive — edge cases (iPhone SE, Galaxy Fold) ───────────────────────────────────────────────────────────── */ @media (max-width: 480px) { .container { padding: 0 16px; } header.hero { padding: 132px 16px 60px; } header.hero h1 { font-size: clamp(36px, 9.6vw, 56px); } header.hero .lede { font-size: 16.5px; } section { padding: 64px 0; } .section-header { margin-bottom: 48px; } .section-header h2 { font-size: clamp(28px, 7vw, 40px); } .section-header p { font-size: 15.5px; } .stats { gap: 8px; margin-top: 36px; } .stat { padding: 12px 16px; min-width: 88px; } .stat b { font-size: 22px; } .hero-ctas { gap: 10px; margin-top: 36px; } .cta { padding: 13px 22px; font-size: 13.5px; } .nav-links { padding: 8px 14px; gap: 14px; font-size: 11.5px; } .brand-bar { font-size: 11.5px; padding: 8px 14px; } .prompt-tabs { gap: 6px; margin-bottom: 28px; } .prompt-tab { padding: 8px 13px; font-size: 12px; } .prompt-panel.active { grid-template-columns: 1fr; gap: 10px; } .prompt-card { padding: 18px 18px 14px; min-height: auto; } .prompt-card .prompt-text { font-size: 12.5px; } .pro-tip { padding: 18px 20px; margin-top: 36px; } .pro-tip p { font-size: 13.5px; } .character-card { padding: 24px 18px; } .ecosystem-footer { padding: 56px 0 40px; } .ecosystem-footer .container { padding-left: 16px; padding-right: 16px; } .ecosystem-grid { grid-template-columns: 1fr; } footer { padding: 48px 16px 32px; } footer .footer-links { gap: 14px; font-size: 12.5px; } .session-example { padding: 20px; } .install-step { padding-left: 0; } .final-cta { padding: 80px 0; } } @media (max-width: 360px) { /* 320–360 px: Galaxy Fold, iPhone SE 1. gen */ .container { padding: 0 14px; } header.hero { padding: 120px 14px 52px; } header.hero h1 { font-size: 32px; line-height: 1.06; } header.hero .lede { font-size: 15.5px; line-height: 1.55; } .eyebrow { font-size: 10px; padding: 5px 11px; letter-spacing: 0.16em; } .stats { gap: 6px; } .stat { padding: 10px 12px; min-width: 78px; } .stat b { font-size: 20px; } .stat span { font-size: 10px; letter-spacing: 0.08em; } .cta { padding: 12px 18px; font-size: 13px; } .nav-links { padding: 6px 12px; gap: 12px; font-size: 11px; } .brand-bar { font-size: 11px; padding: 6px 12px; } .prompt-tab { padding: 7px 11px; font-size: 11.5px; gap: 6px; } .prompt-tab svg { width: 12px; height: 12px; } .prompt-card { padding: 16px 14px 12px; } .prompt-card .prompt-text { font-size: 12px; line-height: 1.55; } .pro-tip { padding: 16px 16px; } .character-card { padding: 22px 16px; } .character-card h3 { font-size: 22px; } .section-header h2 { font-size: 26px; } .ecosystem-footer { padding: 48px 0 36px; } .ecosystem-footer .container { padding-left: 14px; padding-right: 14px; } .ecosystem-footer h3 { font-size: 22px; } .ecosystem-grid a { padding: 12px 14px; font-size: 13px; } footer .footer-brand { font-size: 19px; } footer .footer-links { gap: 12px; font-size: 12px; } } /* ───────────────────────────────────────────────────────────── Standard breakpoint stack — 320 / 375 / 414 / 768 / 1024 (kiegészíti a meglévő 360 / 480 / 720 / 860 px szabályokat) ───────────────────────────────────────────────────────────── */ /* 320 px — iPhone SE 1.gen, Galaxy Fold (zárva) */ @media (max-width: 320px) { .container { padding: 0 12px; } header.hero { padding: 116px 12px 48px; } header.hero h1 { font-size: 28px; } header.hero .lede { font-size: 14.5px; } .stats { flex-wrap: wrap; gap: 6px; } .stat { padding: 9px 11px; min-width: 70px; } .stat b { font-size: 18px; } .cta { padding: 12px 16px; font-size: 12.5px; } .section-header h2 { font-size: 24px; } .character-card h3 { font-size: 20px; } .prompt-tab { padding: 7px 10px; font-size: 11px; } .ecosystem-grid a { padding: 10px 12px; font-size: 12.5px; } /* Code block extra-tight horizontal scroll affordance */ .code-block pre { padding: 18px 16px 14px; font-size: 11.5px; } } /* 360–375 px — iPhone SE 2.gen, iPhone 13 mini */ @media (min-width: 361px) and (max-width: 375px) { header.hero h1 { font-size: clamp(32px, 9vw, 40px); } .container { padding: 0 15px; } } /* 376–414 px — iPhone Plus, iPhone 11, Pro Max */ @media (min-width: 376px) and (max-width: 414px) { .container { padding: 0 17px; } header.hero h1 { font-size: clamp(34px, 9.2vw, 44px); } } /* 768 px — iPad portrait átmenet (720 és desktop között) */ @media (min-width: 721px) and (max-width: 768px) { .container { padding: 0 24px; } header.hero { padding: 156px 24px 72px; } .characters-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; } .prompt-panel.active { grid-template-columns: repeat(2, 1fr); } .ecosystem-grid { grid-template-columns: repeat(2, 1fr); } } /* 1024 px — iPad landscape (desktop layout, enyhe sűrítés) */ @media (min-width: 769px) and (max-width: 1024px) { .container { padding: 0 28px; } .characters-grid { grid-template-columns: repeat(2, 1fr); } } /* Code block @ 360 px — explicit scroll-affordance (Safari iOS no native indicator) */ @media (max-width: 360px) { .code-block pre { padding-bottom: 14px; scrollbar-width: thin; } .code-block pre::-webkit-scrollbar { height: 6px; } .code-block pre::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; } } /* ═════════════════════════════════════════════════════════════ v2 — Expert Flow main-site alignment (2026-06-06) Framed header · squared corners · grid frame close · light + dark mode · solid violet emphasis ═════════════════════════════════════════════════════════════ */ /* ── Site header — framed box (matches expertflow.hu main site) ── */ .site-header { position: relative; z-index: 10; padding: 16px 24px 0; } .site-header-inner { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 16px 28px; border: 1px solid var(--border-strong); background: transparent; } .site-logo { justify-self: start; font-family: var(--font-serif); font-style: italic; font-size: 24px; letter-spacing: -0.02em; color: var(--text); border: none; transition: color 0.2s var(--ease-out); } .site-logo:hover { color: var(--accent); } .site-nav { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 26px; } .site-nav a { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.22em; color: var(--text-muted); border: none; transition: color 0.2s var(--ease-out); } .site-nav a:hover { color: var(--text); } .site-nav .site-nav-github { color: var(--accent); } .site-nav .site-nav-github:hover { color: var(--accent-strong); } .site-header-actions { justify-self: end; } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--radius-pill); border: 1px solid var(--border-strong); background: transparent; color: var(--text-muted); cursor: pointer; transition: color 0.2s var(--ease-out), background 0.2s var(--ease-out), border-color 0.2s var(--ease-out); } .theme-toggle:hover { color: var(--text); background: var(--card); border-color: var(--accent); } .theme-toggle svg { width: 18px; height: 18px; } /* dark → show sun (switch to light); light → show moon (switch to dark) */ .theme-toggle .icon-moon { display: none; } html.light .theme-toggle .icon-sun { display: none; } html.light .theme-toggle .icon-moon { display: block; } @media (max-width: 860px) { .site-header { padding: 12px 16px 0; } .site-header-inner { grid-template-columns: 1fr auto; grid-template-areas: "logo actions" "nav nav"; gap: 14px; padding: 14px 18px; } .site-logo { grid-area: logo; } .site-header-actions { grid-area: actions; } .site-nav { grid-area: nav; justify-content: flex-start; gap: 8px 18px; overflow-x: auto; flex-wrap: nowrap; white-space: nowrap; scrollbar-width: none; } .site-nav::-webkit-scrollbar { display: none; } } /* ── Hero — header is in normal flow now, trim top offset ─────── */ header.hero { padding: 88px 24px 96px; } @media (max-width: 720px) { header.hero { padding: 64px 18px 72px; } } @media (max-width: 480px) { header.hero { padding: 52px 16px 56px; } } @media (max-width: 360px) { header.hero { padding: 44px 14px 48px; } } /* ── Unified squared corners — match main-site sharp framing ──── */ :root { --radius-sm: 0px; --radius: 0px; --radius-lg: 0px; } /* eyebrow → plain mono text (no pill capsule), matches main site */ .eyebrow { background: none; border: none; padding: 0; border-radius: 0; color: var(--text-muted); } /* ── Cell-grids: close the open left + right outer edges ──────── */ .characters-grid, .steps, .platforms { border-left: 1px solid var(--border-cell); border-right: 1px solid var(--border-cell); } /* ── prompts-help: true center (brand.css p {max-width:68ch} broke it) ── */ .prompts-help { max-width: 640px; margin-left: auto; margin-right: auto; } /* ── Solid violet emphasis (drop the gradient text fill) ──────── */ .problem .quote-large em, .pedagogy blockquote em { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--accent); font-style: italic; } /* ════════════════════════════════════════════════════════════ LIGHT MODE — warm-paper palette (html.light), brand-matched ════════════════════════════════════════════════════════════ */ html, body { transition: background-color 0.3s ease, color 0.3s ease; } html.light { color-scheme: light; /* style.css tokens */ --bg: #f6f4ee; --bg-elev: #efece3; --bg-elev-2: #e7e3d8; --card: #fbf9f4; --card-hover: #f1eee5; --border: rgba(35, 33, 41, 0.12); --border-strong: rgba(35, 33, 41, 0.20); --border-cell: rgba(35, 33, 41, 0.15); --text: #232129; --text-muted: rgba(35, 33, 41, 0.66); --text-dim: rgba(35, 33, 41, 0.50); --accent: #6a57bf; --accent-soft: rgba(106, 87, 191, 0.10); --accent-strong: #564aa0; --accent-glow: rgba(106, 87, 191, 0.20); /* brand.css tokens (cell-grid, em, base .cta, callout, headings) */ --color-background: #f6f4ee; --color-foreground: #232129; --color-foreground-soft: rgba(35, 33, 41, 0.74); --color-foreground-muted: rgba(35, 33, 41, 0.62); --color-foreground-dim: rgba(35, 33, 41, 0.40); --color-border: rgba(35, 33, 41, 0.12); --color-border-strong: rgba(35, 33, 41, 0.20); --color-surface: #efece3; --color-accent-violet: #6a57bf; } /* Light: neutralise the grain overlay (white noise is invisible on paper) */ html.light body::before { opacity: 0; } /* ═════════════════════════════════════════════════════════════ v3 — EXACT match to expertflow-v3-dark (2026-06-06) Zero rounded corners (buttons too) · bulletproof cell borders · plain-icon theme toggle · uniform nav ═════════════════════════════════════════════════════════════ */ /* 1 — Everything rectangular. The reference has NO rounded corners, not even on buttons/tabs/chips. Override every pill + small radius. */ .cta, .cta-try, .cta-ghost, .cta-zip, .cta-github, .prompt-tab, .toast, .copy-btn, .code-block .copy-btn, .compare-tag, .pedagogy .pedagogy-tag, .pro-tip, .callout, .pedagogy .pedagogy-context, .skip-link, .notfound-eyebrow, .character-card .icon, .install-path, .ecosystem-grid a { border-radius: 0 !important; } /* 2 — Theme toggle = bare icon button (no circle), like the reference */ .theme-toggle { width: auto; height: auto; padding: 6px; border: none; border-radius: 0; background: transparent; } .theme-toggle:hover { background: transparent; border-color: transparent; color: var(--text); } /* 3 — Nav GitHub link uses the same muted treatment (uniform top nav) */ .site-nav .site-nav-github { color: var(--text-muted); } .site-nav .site-nav-github:hover { color: var(--text); } /* 4 — Bulletproof cell borders via "gap-as-border": the grid background is the line colour, 1px gaps reveal it, opaque cells cover the rest, and a 1px outer border closes the frame. No doubles, no missing edges, no rounded corners — identical at any responsive column count. This fully supersedes the earlier per-cell border hacks. */ .characters-grid, .steps, .platforms { gap: 1px !important; background: var(--border-cell); border: 1px solid var(--border-cell); } .characters-grid > *, .steps > *, .platforms > * { border: none !important; background: var(--bg) !important; } .characters-grid > *:hover, .steps > *:hover, .platforms > *:hover { background: var(--bg-elev) !important; } /* 5 — Primary CTA stays accent-filled but rectangular; hover still shifts colour */ .cta-try { border-radius: 0 !important; } /* ═════════════════════════════════════════════════════════════ v4 — header nav spacing + visible card hover (2026-06-06) ═════════════════════════════════════════════════════════════ */ /* Nav links were cramped — more breathing room, stay centered */ .site-nav { gap: 10px 40px; } /* Cards should LIGHT UP on hover (violet tint), not sit flat grey. Overrides the v3 bg-elev hover. */ .characters-grid > *:hover, .steps > *:hover, .platforms > *:hover { background: var(--accent-soft) !important; } /* ═════════════════════════════════════════════════════════════ v5 — character card internals: stop the "line soup" / blending ═════════════════════════════════════════════════════════════ */ /* Drop the internal hairline dividers — they made every block blend into a uniform grey texture. Use spacing + accent labels for clear separation. */ .character-card .role { margin-bottom: 28px; } .character-card .helps, .character-card .when-use { border-top: none; padding-top: 0; margin-top: 26px; font-size: 14px; color: var(--text-muted); line-height: 1.6; } /* Labels pop in violet so each section reads as its own thing */ .character-card .helps strong, .character-card .when-use strong { color: var(--accent); font-weight: 600; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; display: block; margin-bottom: 8px; } /* ═════════════════════════════════════════════════════════════ v6 — make the cell gridlines actually VISIBLE (were too faint: #232327 on near-black read as "no divider line") ═════════════════════════════════════════════════════════════ */ .characters-grid, .steps, .platforms { background: rgba(223, 222, 218, 0.22) !important; border-color: rgba(223, 222, 218, 0.22) !important; } html.light .characters-grid, html.light .steps, html.light .platforms { background: rgba(35, 33, 41, 0.22) !important; border-color: rgba(35, 33, 41, 0.22) !important; } /* ═════════════════════════════════════════════════════════════ v7.1 — RELIABLE dividers via borders. The CELL draws LEFT+TOP: the later-painted cell owns the divider, so a fractional-width neighbour's background can never paint over it (that's what ate the last internal divider in v7). Container closes the frame with RIGHT+BOTTOM. Every line rendered exactly once. ═════════════════════════════════════════════════════════════ */ :root { --grid-line: rgba(223, 222, 218, 0.20); } html.light { --grid-line: rgba(35, 33, 41, 0.22); } .characters-grid, .steps, .platforms { gap: 0 !important; background: transparent !important; border: none !important; border-right: 1px solid var(--grid-line) !important; border-bottom: 1px solid var(--grid-line) !important; } .characters-grid > *, .steps > *, .platforms > *, .characters-grid .character-card, .steps .step, .platforms .platform { border: none !important; border-left: 1px solid var(--grid-line) !important; border-top: 1px solid var(--grid-line) !important; background: var(--bg) !important; } .characters-grid .character-card:hover, .steps .step:hover, .platforms .platform:hover { background: var(--accent-soft) !important; } /* ═════════════════════════════════════════════════════════════ v8 — mobil: a telepítési prompt (code-block) törjön sorba, hogy a teljes GitHub-URL látszódjon vízszintes scroll/levágás nélkül ═════════════════════════════════════════════════════════════ */ @media (max-width: 720px) { .code-block pre { white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; overflow-x: visible; } } /* ═════════════════════════════════════════════════════════════ v9 — audit-javítások (AI review-csoport, 2026-06-12) ═════════════════════════════════════════════════════════════ */ /* span-re váltott prompt-kártya belsők (érvényes HTML: button-ben nem lehet p/div) — a block viselkedés megtartása */ .prompt-card .prompt-text { display: block; margin: 0; } /* JS nélkül (CSP miatt a noscript-beli inline style tilos volt): fülek elrejtve, minden panel látható, panel-címke a data-label-ből */ html:not(.js) .prompt-tabs { display: none !important; } html:not(.js) .prompt-panel, html:not(.js) .prompt-panel[hidden] { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-bottom: 32px; } html:not(.js) .prompt-panel::before { content: attr(data-label); grid-column: 1 / -1; font-family: var(--font-mono, monospace); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent, #b9a7e0); margin-bottom: 4px; } .noscript-note { text-align: center; color: var(--text-dim); font-size: 13px; margin: 0 0 24px; } /* Telepítés-záró és prompts-help sor: mindig a konténer közepén */ .install-meta, .prompts-help { margin-left: auto; margin-right: auto; } /* Pedagógia díszidézőjel: a kártya felső éle elvágta („két szürke folt” hatás) — bevisszük a kártyán belülre */ .pedagogy { overflow: hidden; } .pedagogy::before { top: -16px; left: 16px; font-size: 160px; opacity: 0.07; } /* Mobil nav: ne vesszen el a Pedagógia + Telepítés link — két sorba törhet, nem kell láthatatlan vízszintes görgetés */ @media (max-width: 720px) { .site-nav { flex-wrap: wrap !important; white-space: normal !important; overflow-x: visible !important; justify-content: flex-start; row-gap: 6px; } }