/* ============================================================================================================ TARTALOMTÍPUSOK — types.css (2026-11-01) ------------------------------------------------------------------------------------------------------------ Szabály: a visszatérő szakasz-típusok markupja CSAK a típus nevét viseli (.qa, .faq-…, .bq-…, .dq-…, .shot-open), formát (f-sheet, f-cols, kártya, árnyék) és inline stílust nem. A típus mai kinézete ITT van — a következő formanyelv-váltáskor ezt a fájlt (és a modern-design-system.css tokenjeit) kell átírni, nem az oldalakat. A .f-* osztályok továbbra is használhatók egyedi, egyszer előforduló szakaszokra; ha egy forma másodszor is kell ugyanarra a tartalomra, abból típus lesz, és ide költözik. Tokenek: --f-rule, --f-hair, --f-tick (modern-design-system.css „IPARI CSEND”), --font-display, --font-mono. Betöltés: pages/learning-modern.php (a homepage.css + hello-2027.css után). ============================================================================================================ */ /* ------------------------------------------------------------------------------------------------------------ .qa — KÉRDÉS + VÁLASZ ADATLAP (ma: oneDox #dox-problem, oneTiming #timing-questions) Markup: .qa > ul.qa-list > li.qa-item > .qa-field? + .qa-q + .qa-a (+ .qa-close a lista után) Ma: ipari adatlap — erős felső vonal, két hasáb, hajszálvonalas sorok, a kérdés fölött a rendszer MEZŐNEVE monospace címkével, a záró állítás sarokjelben. Sorszám nincs (a sorrend felcserélhető). ------------------------------------------------------------------------------------------------------------ */ .qa { max-width: 1040px; margin: clamp(28px, 3.4vw, 44px) auto 0; border-top: 1.5px solid var(--f-rule); } .qa-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 3.4vw, 48px); } .qa-item { padding: 14px 0 16px; border-bottom: 1px solid var(--f-hair); } .qa-field { display: block; margin-bottom: 5px; font-family: var(--font-mono); font-weight: 500; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-secondary); } .qa-q { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; letter-spacing: -.01em; line-height: 1.3; color: var(--text-primary); } .qa-a { display: block; margin-top: 4px; font-size: .88rem; line-height: 1.55; color: var(--text-secondary); } @media (max-width: 760px) { .qa-list { grid-template-columns: 1fr; } } /* a záró állítás: sarokjel (négy 12 px-es L), tintával — nem akcentus-színnel */ .qa-close { --tk: var(--f-tick); max-width: 62ch; margin: clamp(28px, 3.4vw, 44px) auto 0; padding: clamp(22px, 2.6vw, 30px) clamp(22px, 2.8vw, 32px); text-align: center; color: var(--text-primary); font-weight: 500; line-height: 1.55; background: linear-gradient(var(--tk), var(--tk)) top left / 12px 1px no-repeat, linear-gradient(var(--tk), var(--tk)) top left / 1px 12px no-repeat, linear-gradient(var(--tk), var(--tk)) top right / 12px 1px no-repeat, linear-gradient(var(--tk), var(--tk)) top right / 1px 12px no-repeat, linear-gradient(var(--tk), var(--tk)) bottom left / 12px 1px no-repeat, linear-gradient(var(--tk), var(--tk)) bottom left / 1px 12px no-repeat, linear-gradient(var(--tk), var(--tk)) bottom right / 12px 1px no-repeat, linear-gradient(var(--tk), var(--tk)) bottom right / 1px 12px no-repeat; } /* ------------------------------------------------------------------------------------------------------------ .faq-section — GYIK (blocks/faq.php, minden brand) Markup: section.faq-section > .faq-list > details.faq-item > summary.faq-q + .faq-a Ma: MÁSODLAGOS szakasz (kompakt ritmus, kisebb cím) és adatlap — erős felső vonal, hajszálvonalas lenyíló sorok, monospace „+” akcentus-színnel. ------------------------------------------------------------------------------------------------------------ */ .faq-section .section-title { font-size: clamp(1.35rem, 2.2vw, 1.72rem); margin-bottom: 8px; } .faq-section .section-subtitle { font-size: .98rem; } .faq-section .feature-details-header { margin-bottom: clamp(22px, 2.6vw, 30px); } .faq-list { max-width: 740px; margin: 0 auto; border-top: 1.5px solid var(--f-rule); } .faq-item { padding: 0; border-bottom: 1px solid var(--f-hair); } .faq-q { cursor: pointer; padding: 15px 0; font-size: 1rem; font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 14px; } .faq-q::-webkit-details-marker { display: none; } .faq-q::after { content: '+'; font-family: var(--font-mono); font-weight: 500; font-size: 1.15em; line-height: 1; color: var(--accent-current); transition: transform .2s ease; } .faq-item[open] .faq-q::after { transform: rotate(45deg); } .faq-a { padding: 0 32px 17px 0; font-size: .97rem; color: var(--text-secondary, #5a6572); line-height: 1.62; } /* ------------------------------------------------------------------------------------------------------------ .bq — KÉRDÉSSOR VÁLASZ NÉLKÜL (hub/brief-questions.php, a Röviden „Ismerős?” blokkja minden brandnél) Markup: section.bq > .bq-title? + .bq-lead? + .bq-body[--answer] > .bq-qcol > ul.bq-list > li.bq-item > .bq-num + .bq-q (+ .bq-close) + figure.bq-answer? (valódi képernyő, ami egy helyen felel) Ma: betű — halk monospace sorszám, nagy kérdés; asztalon scroll-fókusz (a JS csak --bq-o-t és .is-focused-et ír). A Röviden-ritmus felülírásai a brief.css-ben (body[data-depth="brief"] .bq…). ------------------------------------------------------------------------------------------------------------ */ .bq { padding: clamp(56px, 8vw, 104px) 0; border-bottom: 1px solid var(--f-hair); } .bq-title { text-align: center; font-size: clamp(1.5rem, 2.8vw, 2.1rem); margin: 0 0 clamp(18px, 2.4vw, 26px); } .bq-title + .bq-lead { margin-top: 0; } /* cím nélkül a lead nyit, ott marad a nagyobb alsó térköz */ .bq-lead { max-width: 44ch; margin: 0 auto clamp(34px, 5vw, 56px); text-align: center; font-size: clamp(1.05rem, 1.8vw, 1.25rem); line-height: 1.6; color: var(--text-secondary, #5a6678); } .bq-close { max-width: 46ch; margin: clamp(34px, 5vw, 56px) auto 0; text-align: center; font-size: clamp(1.05rem, 1.9vw, 1.28rem); line-height: 1.6; color: var(--text-primary, #16202e); } /* a lista blokként középen, a sorok balra zártak: a sorszámok egy vonalra esnek */ .bq-list { list-style: none; margin: 0 auto; padding: 0; max-width: 34ch; display: flex; flex-direction: column; gap: clamp(20px, 2.8vw, 34px); } @media (min-width: 768px) { .bq-list { max-width: 40rem; } } @media (min-width: 1200px) { .bq-list { max-width: 46rem; } } .bq-item { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: clamp(12px, 1.6vw, 20px); } .bq-num { font-family: var(--font-mono); font-size: clamp(.7rem, 1.1vw, .8rem); font-weight: 600; letter-spacing: .06em; color: var(--text-muted); font-variant-numeric: tabular-nums; transition: color .5s ease; } .bq-q { font-size: clamp(1.2rem, 2.5vw, 1.72rem); font-weight: 600; line-height: 1.32; letter-spacing: -.01em; color: var(--text-primary, #16202e); text-wrap: balance; } /* scroll-fókusz: csak láthatóság, méret/pozíció nem — nincs ugrás */ .bq-focus .bq-item { opacity: var(--bq-o, 1); transition: opacity .55s cubic-bezier(.22, .61, .36, 1); } .bq-focus .bq-item.is-focused .bq-num { color: var(--accent-current); } /* válasz-kép a kérdéssor után */ .bq-answer { max-width: 600px; margin: clamp(40px, 5vw, 64px) auto 0; text-align: center; } .bq-answer-label { display: inline-block; font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-current); margin-bottom: 14px; } .bq-answer img { display: block; width: 100%; height: auto; border-radius: 16px; border: 1px solid var(--f-hair); box-shadow: 0 26px 54px -30px rgba(16, 30, 54, .45); } .bq-answer figcaption { margin: 14px auto 0; max-width: 52ch; font-size: .95rem; line-height: 1.55; color: var(--text-secondary, #5a6678); } /* két hasáb, ha van válasz-kép: bal = kérdések, jobb = a válasz; keskenyen egymás alá (kérdés előbb) */ .bq-body--answer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: clamp(36px, 5vw, 72px); align-items: center; max-width: 1060px; margin: 0 auto; } .bq-body--answer .bq-list { max-width: none; margin: 0; gap: clamp(16px, 2vw, 24px); } .bq-body--answer .bq-q { font-size: clamp(1.1rem, 1.8vw, 1.42rem); } .bq-body--answer .bq-close { margin-left: 0; text-align: left; } .bq-body--answer .bq-answer { margin: 0; max-width: none; text-align: left; } @media (max-width: 960px) { .bq-body--answer { grid-template-columns: 1fr; max-width: 620px; } .bq-body--answer .bq-answer { margin-top: 8px; } } @media (max-width: 767px) { .bq-list { max-width: none; gap: 22px; } .bq-item { gap: 10px; } } @media (prefers-reduced-motion: reduce) { .bq-focus .bq-item { opacity: 1 !important; transition: none; } .bq-num { transition: none; } } /* ------------------------------------------------------------------------------------------------------------ .shot-open — KATTINTHATÓ KÉPERNYŐKÉP (a kép a Riportgaléria lightboxát nyitja; hub/brief-questions.php, hub/hr-now.php) Markup: button.shot-open[data-dgal-open] > img + span.shot-open-hint ------------------------------------------------------------------------------------------------------------ */ .shot-open { position: relative; display: block; width: 100%; padding: 0; margin: 0; border: 0; background: none; cursor: zoom-in; border-radius: 16px; text-align: inherit; font: inherit; color: inherit; } .shot-open img { transition: transform .35s cubic-bezier(.22, .61, .36, 1), box-shadow .35s ease; } .shot-open:hover img { transform: translateY(-3px); box-shadow: 0 38px 70px -34px rgba(16, 30, 54, .5); } .shot-open:focus-visible { outline: 3px solid var(--accent-current); outline-offset: 4px; } .shot-open-hint { position: absolute; right: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: var(--radius-btn); background: rgba(16, 24, 40, .78); color: #fff; font-size: .8rem; font-weight: 600; line-height: 1; transition: background .2s ease; /* 2026-11-02: pirula + lebegő árnyék helyett szögletes cédula (kezelőszerv) */ } .shot-open-hint svg { width: 14px; height: 14px; } .shot-open:hover .shot-open-hint { background: var(--accent-current); } @media (prefers-reduced-motion: reduce) { .shot-open img { transition: none; } .shot-open:hover img { transform: none; } } /* ------------------------------------------------------------------------------------------------------------ .dq — KÉRDÉS → VALÓDI RIPORT (oneDashboard Áttekintés #dashboard-questions; a kártya a Részletesen galériájába visz) Markup: section.dq > .dq-head > h2 + .dq-sub · .dq-grid > a.dq-card > .dq-shot > img · .dq-body > .dq-q (+ .dq-arrow) + .dq-line Ma: SÍK KÁRTYA (navigáció) — egy hajszálvonal, árnyék és emelkedés nélkül; rámutatásra akcentus-keret, a nyíl 2 px-t lép. ------------------------------------------------------------------------------------------------------------ */ .dq { padding: clamp(56px, 7vw, 96px) 0; background: var(--bg-secondary, #f6f8fb); border-bottom: 1px solid var(--f-hair); } .dq-head { max-width: 60ch; margin: 0 auto clamp(32px, 4vw, 52px); text-align: center; } .dq-sub { margin: 8px 0 0; color: var(--text-secondary, #5a6678); font-size: 1.02rem; line-height: 1.55; } .dq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: clamp(16px, 2.2vw, 26px); align-items: stretch; } .dq-card { display: flex; flex-direction: column; overflow: hidden; text-decoration: none; color: inherit; background: var(--bg-primary, #fff); border: 1px solid var(--f-hair); border-radius: 14px; box-shadow: none; transition: border-color .2s ease; } .dq-card:hover, .dq-card:focus-visible { border-color: color-mix(in srgb, var(--accent-current) 55%, var(--f-hair)); } .dq-card:focus-visible { outline: 2px solid var(--accent-current); outline-offset: 3px; } .dq-shot { background: #eef2f7; aspect-ratio: 16 / 10; overflow: hidden; border-bottom: 1px solid var(--f-hair); } .dq-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; } .dq-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; } .dq-q { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; line-height: 1.3; color: var(--text-primary, #16202e); } .dq-arrow { flex: none; width: 15px; height: 15px; margin-top: 4px; color: var(--text-muted); transition: transform .18s ease, color .18s ease; } .dq-card:hover .dq-arrow { transform: translateX(2px); color: var(--accent-current); } .dq-line { margin: 0; font-size: .95rem; line-height: 1.55; color: var(--text-secondary, #5a6678); } /* ------------------------------------------------------------------------------------------------------------ .contact-section / .cf — KAPCSOLAT (hub/contact.php, minden Áttekintés/Részletesen alja; sötét szakasz mindkét témában) Markup: section.contact-section > h2.section-title + .contact-grid > form.cf + .contact-info .cf > .cf-field > label.cf-label + span.cf-box > input|textarea (+ .cf-hint) · fieldset.cf-fieldset > legend.cf-label + .cf-seg > label.cf-opt > input + .cf-opt-label .cf-actions > button.btn.btn-primary (állapot: .is-sent) Ma (2026-11-01, „black cyberpunk, ha már black theme” — de csak a kezelőszerveken): két adatlap egymás mellett (űrlap · elérhetőség), mindkettő erős felső vonallal; monospace MEZŐNÉV a mező fölött; szögletes, süllyesztett mezők; a kijelölés (fókusz / választott opció) a Találd meg csempe nyelve — a keret NEM vált színt, négy akcentus-sarokjel simul rá, a jobb alsó 2 px-szel elcsúszva (glitch). Két hasáb: elfér egy normál képernyőn (volt: 1142 px). Új szín nincs; a gomb a közös .btn-primary. ------------------------------------------------------------------------------------------------------------ */ .contact-section { background: var(--bg-dark); color: var(--text-on-dark); /* sötét szakasz: a gomb a sötét pala; a kijelölés a lap brand-akcentusa — a hubon neon-türkiz (a pala a feketén láthatatlan) */ --gradient-cta: #5F6B75; --cf-ink: #e9f0f8; --cf-dim: #7b8ca2; --cf-hair: rgba(233, 240, 250, .16); --cf-rule: rgba(233, 240, 250, .7); padding: clamp(56px, 7vw, 88px) 0; } :root body[data-focus="solution"] .contact-section { --accent-current: #7fd1e8; } .contact-section .section-title { color: var(--cf-ink); font-size: clamp(1.5rem, 2.6vw, 2rem); margin: 0 0 clamp(22px, 3vw, 34px); } .contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(32px, 5vw, 72px); align-items: start; } @media (max-width: 960px) { .contact-grid { grid-template-columns: 1fr; } } /* az űrlap: adatlap két hasábban */ .cf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px clamp(16px, 2vw, 28px); border-top: 1.5px solid var(--cf-rule); padding-top: 18px; margin: 0; } .cf-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .cf-fieldset { margin: 0; padding: 0; border: 0; min-inline-size: 0; } .cf-fieldset > legend { padding: 0; margin-bottom: 6px; } .cf-field--wide, .cf-actions { grid-column: 1 / -1; } .cf-label { display: flex; align-items: baseline; gap: 8px; font-family: var(--font-mono); font-weight: 500; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--cf-dim); } .cf-label i { font-style: normal; text-transform: none; letter-spacing: .04em; } .cf-hint { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .03em; line-height: 1.4; color: var(--cf-dim); } .cf-hint::before { content: '// '; opacity: .6; } /* mező: süllyesztett, szögletes (a sugár a modern-design-system.css SZÖGLETES listájából) */ .cf-box { position: relative; display: block; isolation: isolate; background: rgba(255, 255, 255, .04); border: 1px solid var(--cf-hair); transition: border-color .15s ease, background-color .15s ease; } .cf-box:hover { border-color: rgba(233, 240, 250, .3); } .cf-box input, .cf-box textarea { display: block; width: 100%; margin: 0; padding: 10px 12px; background: none; border: 0; outline: none; box-shadow: none; color: var(--cf-ink); font: inherit; font-size: .95rem; line-height: 1.4; border-radius: 0; } .cf-box textarea { min-height: 88px; resize: vertical; } .cf-box input::placeholder, .cf-box textarea::placeholder { color: #5f6f86; } .cf-box input:-webkit-autofill { -webkit-text-fill-color: var(--cf-ink); -webkit-box-shadow: 0 0 0 1000px #15161a inset; } /* az ÉPP írt mező (2026-11-01, Gábor): türkiz betű + blokk-kurzor, ami „punkosan” akadva villog (be · ki · egy rövid villanás · hosszú szünet). A böngésző saját villogását a `caret-animation: manual` kapcsolja ki; ahol ez nincs, ott csak a szín jön (két villogás egymásra rakva zaj lenne). Csökkentett mozgásnál álló blokk. */ .cf-box input:focus, .cf-box textarea:focus, .cf-box input:-webkit-autofill:focus { color: #7fd1e8; -webkit-text-fill-color: #7fd1e8; caret-color: #7fd1e8; caret-shape: block; } @supports (caret-animation: manual) { .cf-box input:focus, .cf-box textarea:focus { caret-animation: manual; animation: cf-caret 1.15s steps(1, end) infinite; } } @keyframes cf-caret { 0% { caret-color: #7fd1e8; } 46% { caret-color: transparent; } 53% { caret-color: #7fd1e8; } 59% { caret-color: transparent; } 100% { caret-color: transparent; } } /* KIJELÖLÉS: a keret nem vált színt — négy sarokjel (2 px, akcentus) simul rá, a jobb alsó 2 px-szel elcsúszva, kisebb (8 px) és türkiz (Találd meg csempe) */ .cf-box::before, .cf-opt-label::before { --tk: var(--accent-current, #7fd1e8); --tk2: var(--sig, #7fd1e8); /* a glitch-sarok: kisebb, türkiz (Gábor 2026-11-01) */ content: ''; position: absolute; inset: -1px; z-index: 1; pointer-events: none; background: linear-gradient(var(--tk), var(--tk)) top left / 14px 2px no-repeat, linear-gradient(var(--tk), var(--tk)) top left / 2px 14px no-repeat, linear-gradient(var(--tk), var(--tk)) top right / 14px 2px no-repeat, linear-gradient(var(--tk), var(--tk)) top right / 2px 14px no-repeat, linear-gradient(var(--tk), var(--tk)) bottom left / 14px 2px no-repeat, linear-gradient(var(--tk), var(--tk)) bottom left / 2px 14px no-repeat, linear-gradient(var(--tk2), var(--tk2)) right 2px bottom 2px / 8px 3px no-repeat, linear-gradient(var(--tk2), var(--tk2)) right 2px bottom 2px / 3px 8px no-repeat; opacity: 0; transform: scale(1.06); transition: opacity .12s ease, transform .22s cubic-bezier(.2, .9, .3, 1.35); } .cf-box:focus-within::before, .cf-opt input:checked + .cf-opt-label::before { opacity: 1; transform: scale(1); } .cf-box:focus-within { background: rgba(255, 255, 255, .06); } /* szegmentált kapcsoló (E-mailben · Telefonon) */ .cf-seg { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--cf-hair); background: rgba(255, 255, 255, .04); } .cf-opt { position: relative; min-width: 0; cursor: pointer; margin: 0; } .cf-opt + .cf-opt { border-left: 1px solid var(--cf-hair); } .cf-opt input { position: absolute; opacity: 0; pointer-events: none; } .cf-opt-label { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 10px; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; line-height: 1.3; color: var(--cf-dim); transition: color .15s ease, background-color .15s ease; } .cf-opt-label svg { width: 14px; height: 14px; flex: none; opacity: .7; } .cf-opt:hover .cf-opt-label { color: var(--cf-ink); } .cf-opt input:checked + .cf-opt-label { color: var(--cf-ink); background: color-mix(in srgb, var(--accent-current, #7fd1e8) 10%, transparent); } .cf-opt input:checked + .cf-opt-label svg { opacity: 1; } .cf-opt input:focus-visible + .cf-opt-label { outline: 2px solid var(--accent-current, #7fd1e8); outline-offset: -5px; } /* küldés */ .cf-actions { display: flex; align-items: center; gap: 16px; padding-top: 2px; } .cf .btn.is-sent, .cf .btn.is-sent:hover { background: #1f9d63; color: #fff; } /* elérhetőség: betű-sorok (mezőnév + érték), ugyanolyan felső vonallal, mint az űrlap */ .contact-info { display: flex; flex-direction: column; border-top: 1.5px solid var(--cf-rule); padding-top: 4px; } .contact-card { display: flex; flex-direction: column; gap: 4px; padding: 14px 0; border-bottom: 1px solid rgba(233, 240, 250, .10); } .contact-card :is(h3, h4) { margin: 0; font-family: var(--font-mono); font-weight: 500; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--cf-dim); } .contact-card a, .contact-card p { margin: 0; color: var(--cf-ink); line-height: 1.55; font-variant-numeric: tabular-nums; } .contact-card a:hover { color: #7fd1e8; } @media (max-width: 720px) { .cf { grid-template-columns: 1fr; gap: 16px; } .cf-actions .btn { width: 100%; justify-content: center; } } @media (prefers-reduced-motion: reduce) { .cf-box::before, .cf-opt-label::before { transition: none; transform: none; } .cf-box input:focus, .cf-box textarea:focus { animation: none; caret-color: #7fd1e8; } } /* ------------------------------------------------------------------------------------------------------------ .site-footer — LÁBLÉC (learning-modern.php, minden brand-oldal; sötét mindkét témában) Markup: footer.site-footer > .container > .footer-content > .footer-brand (a.logo > img.logo-icon + .logo-text) + .footer-tagline · nav.footer-nav > a… (+ .footer-nav-tools) · .footer-bottom > .footer-slogan + .footer-meta (+ a.footer-privacy-link) + .footer-readout (> .footer-led) + .footer-subsites > a.footer-subsite-link (a saját domain: .nx[aria-current] > i.nx-ch > b) Ma (2026-11-01, Gábor: „a contact alatti rész up for grabs … közepesen mérsékelt neon/nixie vonalon jöhet a bladerunner”): a PULT ALJA — EGY izzószín (a cél-mélység narancsa, a board-sztori nixie-családja), neoncső a felső élen, halk CRT-sorok, mono navigáció, LED-es „nem követünk” leolvasás, és az aloldal-sorban a SAJÁT domain nixie-csövekben ég (bemelegedés: .nx-arm → .nx-lit, homepage.js; Gábor: a fő márkanév maradjon sima betű). 2026-11-01 (3. kör): a narancs CSAK a nixie-é (--nx), a LED, a link-sáv és a fókusz türkiz (--ft-sig); a többi szöveg tinta és szürke. ------------------------------------------------------------------------------------------------------------ */ .site-footer { position: relative; overflow: hidden; margin: 0; background: #0A0A0A; color: #e9f0f8; --nx: #FFC583; /* CSAK a nixie-csöveké (2026-11-01, Gábor: „láblécben egyedül a nixie maradjon narancs”) */ --ft-sig: #7fd1e8; --ft-sig-glow: rgba(127, 209, 232, .4); --ft-sig-dim: rgba(127, 209, 232, .1); /* minden más jelzés türkiz: LED, link-sáv, fókusz */ --ft-ink: #e9f0f8; --ft-dim: #7b8ca2; --ft-hair: rgba(233, 240, 250, .12); padding: clamp(52px, 6.5vw, 76px) 0 26px; } /* neoncső a felső élen — TÜRKIZ (2026-11-01, Gábor: „lent az elválasztó is türkiz legyen”): a márka fénye választja el a lapot a lábléctől; a narancs izzás a lábléc BELSEJÉÉ marad (nixie, LED) */ .site-footer::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; z-index: 0; background: linear-gradient(90deg, transparent, #7fd1e8 14%, #7fd1e8 86%, transparent); box-shadow: 0 0 7px 1px rgba(127, 209, 232, .4), 0 0 24px 3px rgba(127, 209, 232, .1); opacity: .85; } /* CRT-sorok, nagyon halkan (2026-11-01, 2. kör: felére véve — „együtt már sok”) */ .site-footer::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .015) 0 1px, transparent 1px 3px); } .footer-content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: clamp(22px, 3vw, 32px); text-align: center; } /* márka: pixel-logó + sima betű (a fejléc .logo-text / .logo-bold szabályai, tintával) */ .footer-brand { display: flex; flex-direction: column; align-items: center; gap: 12px; } .footer-brand .logo { display: inline-flex; align-items: center; gap: 12px; color: var(--ft-ink); text-decoration: none; margin: 0; } .footer-brand .logo-icon { width: 40px; height: 40px; opacity: .9; } .footer-brand .logo-mark { color: var(--ft-ink); } /* NIXIE-CSÖVEK — az aloldal-sorban a saját domain: betűnként egy kis cső, anódrács a betű ELŐTT (így hiteles), leszívó csúcs a tetején */ .nx { display: inline-flex; align-items: flex-end; gap: 3px; padding-bottom: 0 !important; background: none !important; } .nx-ch { position: relative; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; width: 18px; height: 31px; /* +28% (Gábor: „alig olvasható, lehet bután nagyobb”) */ border: 1px solid rgba(233, 240, 250, .14); border-radius: 50% 50% 3px 3px / 32% 32% 3px 3px; background: radial-gradient(ellipse at 50% 72%, rgba(255, 120, 40, .12), transparent 70%), #0d0f13; font-family: var(--font-mono); font-weight: 500; font-size: 14px; line-height: 1; font-style: normal; color: var(--nx); } .nx-ch > b { font-weight: inherit; text-shadow: 0 0 5px rgba(255, 140, 60, .4); } .nx-ch::before { content: ''; position: absolute; inset: 5px 2px 2px; pointer-events: none; background-image: radial-gradient(circle, transparent 1px, rgba(170, 120, 90, .24) 1.25px, transparent 1.6px); background-size: 5px 4px; } .nx-ch::after { content: ''; position: absolute; left: 50%; top: -1px; width: 3px; height: 4px; margin-left: -1.5px; background: rgba(210, 225, 230, .45); border-radius: 2px 2px 0 0; } .footer-subsite-link.nx:hover .nx-ch, .footer-subsite-link.nx:focus-visible .nx-ch { border-color: rgba(255, 197, 131, .45); } /* bemelegedés (homepage.js): sötét várakozás → csövenként eltérő, rebbenő felizzás; csökkentett mozgásnál kezdettől ég */ .site-footer.nx-arm .nx-ch > b { opacity: 0; } .site-footer.nx-lit .nx-ch > b { animation: nx-warm .9s steps(1, end) both; animation-delay: var(--nxd, 0s); } .nx-ch:nth-child(1) { --nxd: .15s; } .nx-ch:nth-child(2) { --nxd: .42s; } .nx-ch:nth-child(3) { --nxd: .21s; } .nx-ch:nth-child(4) { --nxd: .55s; } .nx-ch:nth-child(5) { --nxd: .33s; } .nx-ch:nth-child(6) { --nxd: .18s; } .nx-ch:nth-child(7) { --nxd: .48s; } .nx-ch:nth-child(8) { --nxd: .27s; } .nx-ch:nth-child(9) { --nxd: .6s; } .nx-ch:nth-child(10) { --nxd: .36s; } .nx-ch:nth-child(11) { --nxd: .24s; } .nx-ch:nth-child(12) { --nxd: .51s; } .nx-ch:nth-child(13) { --nxd: .3s; } .nx-ch:nth-child(14) { --nxd: .45s; } .nx-ch:nth-child(15) { --nxd: .39s; } .nx-ch:nth-child(n+16) { --nxd: .57s; } @keyframes nx-warm { 0% { opacity: 0; } 30% { opacity: .55; } 45% { opacity: .12; } 60% { opacity: .85; } 75% { opacity: .4; } 100% { opacity: 1; } } .footer-tagline { margin: 0; font-size: .92rem; color: var(--ft-dim); } /* navigáció: mono, a közös link-nyelv (hajszálvonal → sraffozott sáv) */ .footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px clamp(18px, 2.4vw, 32px); } .footer-nav-tools { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 10px clamp(18px, 2.4vw, 32px); } .footer-nav a { font-size: .9rem; font-weight: 500; color: var(--ft-dim); text-decoration: none; background: linear-gradient(var(--ft-hair), var(--ft-hair)) 0 100% / 100% 1px no-repeat; padding-bottom: 3px; transition: color .15s ease; } .footer-nav a:hover, .footer-nav a:focus-visible { color: var(--ft-ink); background-image: repeating-linear-gradient(-45deg, var(--ft-sig) 0 1.5px, transparent 1.5px 4.5px); background-size: 100% 4px; } .footer-nav a:focus-visible { outline: 2px solid var(--ft-sig); outline-offset: 3px; } /* alsó sáv: szlogen · © + tájékoztató · LED-leolvasás · aloldalak */ .footer-bottom { width: 100%; border-top: 1px solid var(--ft-hair); padding-top: 22px; display: grid; gap: 10px; justify-items: center; text-align: center; } .footer-slogan { margin: 0; font-size: .9rem; color: var(--ft-dim); letter-spacing: .01em; } .footer-meta { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 6px; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .04em; color: var(--ft-dim); } .footer-privacy-separator { margin: 0 6px; } .footer-privacy-link { color: var(--ft-ink); text-decoration: none; background: linear-gradient(var(--ft-hair), var(--ft-hair)) 0 100% / 100% 1px no-repeat; padding-bottom: 2px; } .footer-privacy-link:hover, .footer-privacy-link:focus-visible { background-image: repeating-linear-gradient(-45deg, var(--ft-sig) 0 1.5px, transparent 1.5px 4.5px); background-size: 100% 4px; } .footer-readout { margin: 2px 0 0; display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: #c9d4e2; } .footer-led { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ft-sig); box-shadow: 0 0 6px var(--ft-sig-glow), 0 0 14px var(--ft-sig-dim); } .footer-subsites { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; margin-top: 8px; } .footer-subsite-link { font-size: .8rem; color: var(--ft-dim); text-decoration: none; padding-bottom: 2px; transition: color .15s ease; } .footer-subsite-link:hover, .footer-subsite-link:focus-visible { color: var(--ft-ink); background: linear-gradient(var(--ft-hair), var(--ft-hair)) 0 100% / 100% 1px no-repeat; } .footer-subsite-link[aria-current="true"] { color: var(--nx); } .footer-subsite-link:focus-visible { outline: 2px solid var(--ft-sig); outline-offset: 3px; } @media (max-width: 520px) { .footer-readout { white-space: normal; max-width: 34ch; line-height: 1.5; } .footer-privacy-separator { display: none; } .footer-privacy-link { flex-basis: 100%; } } @media (prefers-reduced-motion: reduce) { .site-footer.nx-lit .nx-ch > b { animation: none; opacity: 1; } .site-footer.nx-arm .nx-ch > b { opacity: 1; } } /* ------------------------------------------------------------------------------------------------------------ .privacy-modal — ADATKEZELÉSI TÁJÉKOZTATÓ (learning-modern.php; a lábléc linkje nyitja, homepage.js initPrivacyModal; JS nélkül a