:root { --zd-navy-975: #030e1c; --zd-navy-950: #04101f; --zd-navy-900: #061c37; --zd-navy: #0b2e59; --zd-blue: #114a8b; --zd-cyan: #00b7d9; --zd-cyan-bright: #24d0e9; --zd-mist: #eef2f5; /* A szekció aktuális háttere. A timeline bogyói ezzel maszkolják ki maguk alatt a függőleges vonalat, ezért témánként követnie kell a hátteret. */ --zd-surface: var(--zd-navy-950); /* Szekció-akcentus – alapérték (= a "deep" téma). A szekció-témák írják át (lásd 3/b blokk); minden más (menüsáv, banner, footer, admin) ezt az alapértéket kapja, vagyis marad cián. */ --zd-accent: var(--zd-cyan); --zd-accent-bright: var(--zd-cyan-bright); --zd-accent-deep: var(--zd-blue); --zd-accent-rgb: 0, 183, 217; --zd-accent-bright-rgb: 36, 208, 233; --zd-nav-h: 76px; } /* A layout – innen kap a Bootstrap sötét témája arculati színeket. Minden komponens (card, form, dropdown…) ezt követi. */ [data-bs-theme="dark"] { --bs-body-bg: var(--zd-navy-950); --bs-body-color: #eaf2fa; --bs-body-font-family: Montserrat, ui-sans-serif, system-ui, "Segoe UI", sans-serif; --bs-emphasis-color: #ffffff; --bs-emphasis-color-rgb: 255, 255, 255; --bs-heading-color: #ffffff; --bs-secondary-color: rgba(157, 179, 204, 0.92); --bs-secondary-bg: rgba(6, 28, 55, 0.55); --bs-tertiary-color: rgba(157, 179, 204, 0.72); --bs-tertiary-bg: rgba(4, 16, 31, 0.55); --bs-border-color: rgba(160, 200, 240, 0.14); --bs-border-color-translucent: rgba(160, 200, 240, 0.14); --bs-border-radius: 14px; --bs-border-radius-sm: 10px; --bs-border-radius-lg: 18px; --bs-border-radius-xl: 26px; --bs-primary: var(--zd-cyan); --bs-primary-rgb: 0, 183, 217; --bs-primary-bg-subtle: rgba(0, 183, 217, 0.12); --bs-primary-border-subtle: rgba(0, 183, 217, 0.28); --bs-primary-text-emphasis: var(--zd-cyan-bright); --bs-info: var(--zd-cyan-bright); --bs-info-rgb: 36, 208, 233; --bs-info-bg-subtle: rgba(36, 208, 233, 0.1); --bs-info-border-subtle: rgba(36, 208, 233, 0.26); --bs-info-text-emphasis: var(--zd-cyan-bright); --bs-link-color: var(--zd-cyan-bright); --bs-link-color-rgb: 36, 208, 233; --bs-link-hover-color: #ffffff; --bs-link-hover-color-rgb: 255, 255, 255; --bs-box-shadow-lg: 0 24px 70px rgba(2, 10, 22, 0.55); } /* Elsődleges gomb: a logó világos zöldeskékje, egyszínűen (nincs gradiens). A felirat sötét navy, mert fehérrel a #24d0e9 kontrasztja csak 1.9:1. */ .btn-primary { --bs-btn-color: var(--zd-navy-950); --bs-btn-bg: var(--zd-cyan-bright); --bs-btn-border-color: var(--zd-cyan-bright); --bs-btn-hover-color: var(--zd-navy-950); --bs-btn-hover-bg: #48daef; --bs-btn-hover-border-color: #48daef; --bs-btn-active-color: var(--zd-navy-950); --bs-btn-active-bg: #12bcd6; --bs-btn-active-border-color: #12bcd6; --bs-btn-disabled-color: rgba(4, 16, 31, 0.55); --bs-btn-disabled-bg: rgba(36, 208, 233, 0.45); --bs-btn-disabled-border-color: rgba(36, 208, 233, 0.45); background-image: none; box-shadow: 0 10px 28px rgba(36, 208, 233, 0.28); transition: transform 0.2s ease, box-shadow 0.2s ease; } .btn-primary:hover, .btn-primary:focus-visible { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(36, 208, 233, 0.4); } /* Másodlagos ("ghost") gomb */ .btn-outline-light { --bs-btn-color: #eaf2fa; --bs-btn-bg: rgba(238, 242, 245, 0.06); --bs-btn-border-color: rgba(160, 200, 240, 0.22); --bs-btn-hover-color: #ffffff; --bs-btn-hover-bg: rgba(var(--zd-accent-rgb), 0.12); --bs-btn-hover-border-color: var(--zd-accent); --bs-btn-active-color: #ffffff; --bs-btn-active-bg: rgba(var(--zd-accent-rgb), 0.18); --bs-btn-active-border-color: var(--zd-accent); } /* Szegmentált választó és nyelvváltó (btn-check + btn-outline-primary) */ .btn-outline-primary { --bs-btn-color: rgba(157, 179, 204, 0.92); --bs-btn-bg: rgba(4, 16, 31, 0.5); --bs-btn-border-color: rgba(160, 200, 240, 0.18); --bs-btn-hover-color: #eaf2fa; --bs-btn-hover-bg: rgba(0, 183, 217, 0.1); --bs-btn-hover-border-color: rgba(0, 183, 217, 0.4); --bs-btn-active-color: #ffffff; --bs-btn-active-bg: rgba(0, 183, 217, 0.16); --bs-btn-active-border-color: var(--zd-cyan); --bs-btn-disabled-color: rgba(157, 179, 204, 0.45); --bs-btn-disabled-bg: rgba(4, 16, 31, 0.4); --bs-btn-disabled-border-color: rgba(160, 200, 240, 0.14); } /* Űrlapelemek: sötét panel + cián fókusz */ .form-control, .form-select { --bs-body-bg: rgba(4, 16, 31, 0.55); --bs-border-color: rgba(160, 200, 240, 0.18); } .form-control:focus, .form-select:focus, .form-check-input:focus, .btn-check:focus-visible + .btn { border-color: var(--zd-cyan); box-shadow: 0 0 0 0.25rem rgba(0, 183, 217, 0.16); } .form-check-input { background-color: rgba(4, 16, 31, 0.6); border-color: rgba(160, 200, 240, 0.32); } .form-check-input:checked { background-color: var(--zd-cyan); border-color: var(--zd-cyan); } /* Kártya: arculati üveg-panel */ .card { --bs-card-bg: transparent; --bs-card-border-color: rgba(160, 200, 240, 0.14); --bs-card-border-radius: var(--bs-border-radius-xl); --bs-card-inner-border-radius: var(--bs-border-radius-lg); background-image: linear-gradient(165deg, rgba(17, 74, 139, 0.28), rgba(6, 28, 55, 0.72)); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } /* Olvasási haladásjelző a menüsáv alatt */ .zd-progress { --bs-progress-bg: transparent; --bs-progress-border-radius: 0; --bs-progress-height: 2px; } .zd-progress .progress-bar { background-image: linear-gradient(90deg, var(--zd-cyan), var(--zd-cyan-bright), var(--zd-blue)); box-shadow: 0 0 12px rgba(0, 183, 217, 0.6); } /* Menüsáv linkek: alul futó cián jelölés */ .navbar .nav-link { --bs-nav-link-color: rgba(157, 179, 204, 0.92); --bs-nav-link-hover-color: #ffffff; position: relative; } .navbar .nav-link.active { color: #ffffff; } @media (min-width: 992px) { .navbar .nav-link::after { content: ''; position: absolute; left: 0.75rem; right: 0.75rem; bottom: 0.25rem; height: 2px; border-radius: 2px; background: var(--zd-cyan); transform: scaleX(0); transform-origin: left; transition: transform 0.25s ease; } .navbar .nav-link:hover::after, .navbar .nav-link.active::after { transform: scaleX(1); } } html { scroll-behavior: smooth; scroll-padding-top: var(--zd-nav-h); } body { overflow-x: hidden; -webkit-font-smoothing: antialiased; } body::before { content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(1100px 700px at 8% -10%, rgba(24, 96, 176, 0.55), transparent 62%), radial-gradient(900px 600px at 95% 4%, rgba(0, 183, 217, 0.22), transparent 64%), radial-gradient(1200px 900px at 50% 108%, rgba(17, 74, 139, 0.42), transparent 62%), linear-gradient(180deg, #0a2c52 0%, #0a2848 42%, #071e39 100%); } body::after { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.5; background-image: linear-gradient(rgba(0, 183, 217, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 183, 217, 0.05) 1px, transparent 1px); background-size: 52px 52px; mask-image: radial-gradient(circle at 50% 30%, #000 25%, transparent 78%); -webkit-mask-image: radial-gradient(circle at 50% 30%, #000 25%, transparent 78%); } ::selection { background: var(--zd-cyan); color: var(--zd-navy-950); } * { scrollbar-width: thin; scrollbar-color: rgba(0, 183, 217, 0.45) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background: rgba(0, 183, 217, 0.35); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; } /* Két szekció-téma (háttér + akcentus) Két téma váltakozik, mindkettő a MEGLÉVŐ két arculati színből: deep (alap) sötét navy háttér + világos kék (cián) kiemelés sky világos kék háttér + sötétkék (navy) szöveg és kiemelés Ugyanaz a színpár, felcserélve – ez a .btn-primary logikája is (cián alap, navy felirat), csak szekció méretben. A téma nem csak színt cserél: átírja a Bootstrap color-mode változóit, ezért a benne lévő card / badge / border / text-* utility-k maguktól követik. Használat a viewben:
-> deep
A data-bs-theme="light" a Bootstrap 5.3 beágyazott színmódja: minden komponens-változót átállít (form, dropdown, table…), amit itt nem írunk felül külön. Ezért kell az attribútum a class MELLETT. */ /* Minden szekció a saját --zd-accent-jéből adja a Bootstrap primary/info színét, így a text-primary, border-primary(-subtle) és text-info utility-k témánként mást jelentenek – új szabály nélkül. */ .zd-section, .zd-section-sm { --bs-primary: var(--zd-accent); --bs-primary-rgb: var(--zd-accent-rgb); --bs-primary-bg-subtle: rgba(var(--zd-accent-rgb), 0.12); --bs-primary-border-subtle: rgba(var(--zd-accent-rgb), 0.28); --bs-primary-text-emphasis: var(--zd-accent-bright); --bs-info: var(--zd-accent-bright); --bs-info-rgb: var(--zd-accent-bright-rgb); --bs-info-bg-subtle: rgba(var(--zd-accent-bright-rgb), 0.1); --bs-info-border-subtle: rgba(var(--zd-accent-bright-rgb), 0.26); --bs-info-text-emphasis: var(--zd-accent-bright); } /* Világos téma: egy világos alap, két háttérrel – a .zd-bg-* modifikátor dönti el, melyik. Az akcentus mindkettőn a sötétkék --zd-navy (7,3:1 a ciánon, 11,9:1 a miston), a szöveg navy-900, a címek navy-950 – mind WCAG AA felett. A --zd-accent-bright itt nem világosabb, hanem SÖTÉTEBB: világos alapon a kiemelés lefelé megy. */ .zd-theme-light { --bs-body-color: var(--zd-navy-900); --bs-emphasis-color: var(--zd-navy-950); --bs-emphasis-color-rgb: 4, 16, 31; --bs-heading-color: var(--zd-navy-950); --bs-secondary-color: rgba(6, 28, 55, 0.82); --bs-secondary-bg: rgba(255, 255, 255, 0.42); --bs-tertiary-color: rgba(6, 28, 55, 0.7); --bs-tertiary-bg: rgba(255, 255, 255, 0.34); --bs-border-color: rgba(4, 16, 31, 0.18); --bs-border-color-translucent: rgba(4, 16, 31, 0.18); --bs-link-color: var(--zd-navy); --bs-link-color-rgb: 11, 46, 89; --bs-link-hover-color: var(--zd-navy-950); --bs-link-hover-color-rgb: 4, 16, 31; --bs-box-shadow-lg: 0 24px 60px rgba(4, 16, 31, 0.18); --zd-accent: var(--zd-navy); --zd-accent-bright: var(--zd-navy-950); --zd-accent-deep: var(--zd-blue); --zd-accent-rgb: 11, 46, 89; --zd-accent-bright-rgb: 4, 16, 31; background-color: var(--bs-body-bg); color: var(--bs-body-color); } /* Háttér-modifikátorok. A --zd-surface-nek követnie kell a hátteret: a timeline bogyói ezzel maszkolják ki maguk alatt a függőleges vonalat. */ .zd-bg-abyss { --bs-body-bg: rgba(4, 16, 31, 0.55); --zd-surface: var(--zd-navy-975); background-color: rgba(4, 16, 31, 0.55); } /* Világos kék: a logó világos zöldeskékje, tömören. */ .zd-bg-cyan { --bs-body-bg: var(--zd-cyan-bright); --zd-surface: var(--zd-cyan-bright); } /* Mist: közel-fehér, hűvös tónus (#eef2f5). Hosszú, sűrű tartalomhoz (program-timeline) ez a legolvashatóbb alap. A felületi változók itt tömör fehérek: a féláttetsző fehér a mist fölött nem látszana. */ .zd-bg-mist { --bs-body-bg: var(--zd-mist); --zd-surface: var(--zd-mist); --bs-secondary-bg: #ffffff; --bs-tertiary-bg: #ffffff; --bs-border-color: rgba(4, 16, 31, 0.14); --bs-border-color-translucent: rgba(4, 16, 31, 0.14); --bs-box-shadow-lg: 0 24px 60px rgba(4, 16, 31, 0.1); } /* Miston a féláttetsző fehér kártya eltűnne: tömör fehér panel lesz. */ .zd-bg-mist .card { --bs-card-border-color: rgba(4, 16, 31, 0.12); background-image: linear-gradient(165deg, #ffffff, #f7fafc); } /* A .card arculati gradiense fixen sötét – itt fehér üvegpanel lesz belőle. */ .zd-theme-light .card { --bs-card-border-color: rgba(4, 16, 31, 0.14); background-image: linear-gradient(165deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.3)); } /* Az elsődleges gomb ciánja itt eltűnne a cián háttéren: megfordítjuk. */ .zd-theme-light .btn-primary { --bs-btn-color: var(--zd-cyan-bright); --bs-btn-bg: var(--zd-navy-950); --bs-btn-border-color: var(--zd-navy-950); --bs-btn-hover-color: var(--zd-cyan-bright); --bs-btn-hover-bg: var(--zd-navy-900); --bs-btn-hover-border-color: var(--zd-navy-900); --bs-btn-active-color: var(--zd-cyan-bright); --bs-btn-active-bg: var(--zd-navy); --bs-btn-active-border-color: var(--zd-navy); box-shadow: 0 10px 28px rgba(4, 16, 31, 0.28); } /* A ghost gomb világos alapon sötét kontúrt kap (a fehéres alapváltozat ott láthatatlan lenne). */ .zd-theme-light .btn-outline-light { --bs-btn-color: var(--zd-navy-950); --bs-btn-bg: rgba(255, 255, 255, 0.42); --bs-btn-border-color: rgba(4, 16, 31, 0.26); --bs-btn-hover-color: var(--zd-cyan-bright); --bs-btn-hover-bg: var(--zd-navy-950); --bs-btn-hover-border-color: var(--zd-navy-950); --bs-btn-active-color: var(--zd-cyan-bright); --bs-btn-active-bg: var(--zd-navy-900); --bs-btn-active-border-color: var(--zd-navy-900); } /* A .zd-glass panel (helyszín-vizuál) szándékosan sötét sziget marad a világos szekcióban – ezért benne visszakapcsol a cián akcentus. */ .zd-theme-light .zd-glass { --zd-accent: var(--zd-cyan); --zd-accent-bright: var(--zd-cyan-bright); --zd-accent-rgb: 0, 183, 217; --zd-accent-bright-rgb: 36, 208, 233; color: #eaf2fa; } /* Világos panel a szekció saját (cián/mist) hátterénél is világosabb – pl. a Szakmai együttműködők kártyái. A szöveget a szekció zd-theme-light-ja már navy-ra állította, ide nem kell külön data-bs-theme. */ .zd-panel-light { background-color: #ffffff; box-shadow: 0 14px 34px rgba(4, 16, 31, 0.12); } /* Szekció-ritmus: a Bootstrap py-5 (3rem) ehhez kevés. A --zd-pad változóban tartjuk, mert a .zd-slant hozzáadja a ferdeség mélységét (különben a levágott sarokban a tartalom is elveszne). */ .zd-section { --zd-pad: clamp(56px, 6.5vw, 94px); padding-block: var(--zd-pad); } .zd-section-sm { --zd-pad: clamp(32px, 4vw, 54px); padding-block: var(--zd-pad); } /* Ferde él fent és lent. A clip-path a szekció SAJÁT hátterét vágja le, a kivágásban a body navy-950-e látszik – vagyis pont a szomszédos sötét szekciók színe, ezért hézagmentes. A két él párhuzamos. Figyelem: a clip-path levágja a position: fixed leszármazottakat is. Emiatt kerültek az előadó-modalok a szekción kívülre. */ .zd-slant { --zd-slant: clamp(26px, 3.4vw, 62px); padding-block: calc(var(--zd-pad) + var(--zd-slant)); clip-path: polygon(0 var(--zd-slant), 100% 0, 100% calc(100% - var(--zd-slant)), 0 100%); } .zd-slant-top { --zd-slant: clamp(26px, 3.4vw, 62px); padding-top: calc(var(--zd-pad) + var(--zd-slant)); clip-path: polygon(0 var(--zd-slant), 100% 0, 100% 100%, 0 100%); } .zd-slant-tuck { margin-top: calc(var(--zd-slant) * -1); } /* Betűtávolság */ .zd-track { letter-spacing: 0.2em; } .zd-track-sm { letter-spacing: 0.12em; } .zd-tight { letter-spacing: -0.035em; } /* Táblázatos számjegyek (visszaszámláló, időpontok) */ .zd-tnum { font-variant-numeric: tabular-nums; } /* Skálázó betűméretek (a display-* fix méretek helyett) */ .zd-display { font-size: clamp(3.4rem, 11vw, 8rem); line-height: 0.86; letter-spacing: -0.045em; } .zd-display-sm { font-size: clamp(1.5rem, 3.4vw, 2.4rem); } .zd-h2 { font-size: clamp(1.85rem, 3.6vw, 2.9rem); line-height: 1.12; } .zd-h2-sm { font-size: clamp(1.5rem, 2.6vw, 2.15rem); } /* A nyelvi fájlban -nel kiemelt címrész (pl. about.title) */ .zd-h2 span, .zd-h2-sm span { color: var(--zd-accent-bright); } .zd-num-lg { font-size: clamp(2rem, 5vw, 3.4rem); } /* A Bootstrap fs-1..fs-6 skála folytatása apró feliratokhoz */ .fs-7 { font-size: 0.8rem; } .fs-8 { font-size: 0.68rem; } .fs-9 { font-size: 0.58rem; } /* Gradiens szöveg (DAY, statisztikai számok) */ .zd-grad { background: linear-gradient(120deg, var(--zd-accent-bright), var(--zd-accent-deep) 92%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* Kártya-emelés hoverre */ .zd-lift { transition: transform 0.3s ease, border-color 0.3s ease; } .zd-lift:hover { transform: translateY(-4px); border-color: rgba(var(--zd-accent-rgb), 0.38) !important; } /* Arculati jelzőpont (badge-ek elején) + pulzáló változat */ .zd-dot { display: inline-block; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--zd-accent); box-shadow: 0 0 14px var(--zd-accent); } .zd-dot.zd-pulse { background: var(--zd-accent-bright); box-shadow: 0 0 0 0 rgba(var(--zd-accent-bright-rgb), 0.6); animation: zd-pulse 2s infinite; } @keyframes zd-pulse { 70% { box-shadow: 0 0 0 10px rgba(var(--zd-accent-bright-rgb), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--zd-accent-bright-rgb), 0); } } /* Node-háló minta panelekre (logó-keret, helyszín-panel) */ .zd-mesh::before { content: ''; position: absolute; inset: 0; opacity: 0.55; pointer-events: none; background-image: linear-gradient(rgba(var(--zd-accent-rgb), 0.11) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--zd-accent-rgb), 0.11) 1px, transparent 1px); background-size: 32px 32px; mask-image: radial-gradient(circle at 50% 45%, #000 20%, transparent 78%); -webkit-mask-image: radial-gradient(circle at 50% 45%, #000 20%, transparent 78%); } /* Cián fénykeretes panel (logó-keret, helyszín-vizuál) */ .zd-glass { border: 1px solid rgba(var(--zd-accent-rgb), 0.22); background: radial-gradient(circle at 30% 20%, rgba(var(--zd-accent-rgb), 0.16), transparent 60%), linear-gradient(165deg, rgba(17, 74, 139, 0.3), rgba(4, 16, 31, 0.7)); box-shadow: var(--bs-box-shadow-lg); } .zd-glass img { filter: drop-shadow(0 10px 30px rgba(2, 10, 22, 0.55)); } /* Arculati mark (SVG): fény + méretek (SVG-t nem méretez a Bootstrap) */ .zd-mark { flex: none; filter: drop-shadow(0 0 14px rgba(0, 183, 217, 0.38)); transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); } .zd-mark-lg { width: clamp(90px, 10vw, 130px); height: auto; } /* Csak nagy (xl+) kijelzőn nőjön nagyobbra, tableten maradjon a kisebb méret */ @media (min-width: 1200px) { .zd-mark-lg { width: clamp(148px, 15vw, 216px); } } /* Banner wordmark: a markkal együtt másfélszeres méret (Bootstrap display-5 x1.5) */ .zd-wordmark { font-size: clamp(2.25rem, 4vw + 0.75rem, 4.5rem); } /* „Korábbi konferenciák" gomb: lg-től kikerül a sorokból a banner jobb felső sarkába, így a lockup melletti oszlop a teljes maradék szélességet megkapja. */ @media (min-width: 992px) { .zd-banner-archive { position: absolute; top: 1.5rem; right: calc(var(--bs-gutter-x) * 0.5); z-index: 2; } } /* Banner jobb oszlopa: méret-kontextus a headline-nak (container query) */ .zd-banner-info { container-type: inline-size; } /* Banner headline: a saját oszlopa szélességéhez skálázódik, így nagyobb lehet és mégsem tördel. A vw-s sor a cqw-t nem ismerő böngészők tartaléka. */ .zd-headline { font-size: clamp(1.3rem, 2.4vw, 2.1rem); font-size: clamp(1.4rem, 5.95cqw, 2.8rem); letter-spacing: 0.08em; line-height: 1.15; } /* Egyetemi logó a fejléc sorában, fehér jelvényen belül */ .zd-uni-logo { display: block; height: 40px; width: auto; max-width: 100%; } /* Egyetemi logó a "Szakmai együttműködők" kártyákban, világos háttéren */ .zd-org-logo { height: 48px; width: auto; max-width: 100%; } .zd-mark-md { width: 46px; height: 48px; } .zd-mark-sm { width: 40px; height: 42px; } a:hover > .zd-mark, a:hover .zd-mark { transform: rotate(-8deg) scale(1.06); } /* Nincs saját háttér: az oldal (body) háttere folytatódik alatta. */ .zd-banner { position: relative; overflow: hidden; background: transparent; } /* Arculati grafikon: a banner jobb alsó sarkában, háttérben */ .zd-banner::before { content: ''; position: absolute; right: 0; bottom: 0; width: clamp(260px, 38vw, 820px); aspect-ratio: 349.6 / 157.7; pointer-events: none; background-image: url('../img/zeroday-graph.svg'); background-repeat: no-repeat; background-position: right bottom; background-size: contain; opacity: 0.5; } .zd-banner > * { position: relative; z-index: 1; } .zd-register-graph { position: relative; overflow: hidden; } .zd-register-graph::before { content: ''; position: absolute; right: 0; bottom: 0; width: clamp(800px, 123vw, 3000px); aspect-ratio: 349.6 / 157.7; pointer-events: none; background-image: url('../img/zeroday-graph.svg'); background-repeat: no-repeat; background-position: right bottom; background-size: contain; opacity: 0.5; } .zd-register-graph > * { position: relative; z-index: 1; } /* Előadó-ikonok: méret + helyőrző sorszám */ .zd-avatar { width: clamp(46px, 4.9vw, 62px); height: clamp(46px, 4.9vw, 62px); } .zd-avatar svg { width: 60%; height: 60%; } /* Előadó-kártya nagy kör portréja: méret + halvány cián fénygyűrű */ .zd-avatar-lg { width: clamp(84px, 8vw, 112px); height: clamp(84px, 8vw, 112px); box-shadow: 0 0 0 6px rgba(var(--zd-accent-rgb), 0.07), 0 12px 30px rgba(2, 10, 22, 0.5); } /* A világos szekcióban a navy elnyomná a ciánt: itt visszakapcsoljuk, hogy a portré gyűrűje és a kártya kékei is látszódjanak. */ .zd-theme-light .zd-avatar-lg { --zd-accent-rgb: 0, 183, 217; } .zd-avatar-lg svg { width: 52%; height: 52%; opacity: 0.65; } /* Előadó-kártya: a "Bemutatkozás" gomb nyila hoverre elindul */ .zd-bio-btn svg { transition: transform 0.25s ease; } .zd-bio-btn:hover svg, .zd-bio-btn:focus-visible svg { transform: translateX(3px); } /* Bemutatkozás-modal: a .card-dal egyező arculati üveg-panel */ .zd-modal .modal-content { --bs-modal-bg: var(--zd-navy-950); --bs-modal-border-color: rgba(var(--zd-accent-rgb), 0.24); --bs-modal-border-radius: var(--bs-border-radius-xl); background-image: linear-gradient(165deg, rgba(17, 74, 139, 0.32), rgba(4, 16, 31, 0.94)); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); } .zd-avatar-num { bottom: 0; left: 50%; transform: translateX(-50%); padding: 1px 6px 2px; border-radius: 6px 6px 0 0; font-size: 0.6rem; } .zd-navbar { background: rgba(4, 16, 31, 0.72); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); transition: background 0.3s ease, box-shadow 0.3s ease; } .zd-navbar.is-scrolled { background: rgba(4, 16, 31, 0.94); box-shadow: 0 14px 40px rgba(2, 8, 18, 0.5); } .zd-footer { background: linear-gradient(180deg, rgba(6, 28, 55, 0.62), rgba(4, 16, 31, 0.95)); } .zd-footer::before { content: ''; position: absolute; top: -1px; left: 50%; transform: translateX(-50%); width: min(680px, 80%); height: 1px; opacity: 0.75; background: linear-gradient(90deg, transparent, var(--zd-cyan), transparent); } /* A vonal és a bogyók ugyanabból a három mértékből számolódnak, ezért a térközöket itt tartjuk, nem utility osztályokban. A calc()-ok szándékosan egyszintűek: a var()-ban tárolt calc() iOS Safariban kiszámíthatatlan. */ .zd-timeline { --zd-tl-time-w: 8rem; --zd-tl-gap: 1rem; --zd-tl-node: 11px; position: relative; } /* A vonal a tartalom alatt: soha ne húzódjon át a szövegen. */ .zd-timeline::before { content: ''; position: absolute; top: 12px; bottom: 12px; left: calc(var(--zd-tl-time-w) + var(--zd-tl-gap) + var(--zd-tl-node) / 2); z-index: 0; width: 1px; margin-left: -0.5px; background: linear-gradient(180deg, transparent, rgba(var(--zd-accent-rgb), 0.35) 8%, rgba(var(--zd-accent-rgb), 0.35) 92%, transparent); } .zd-tl-item { position: relative; z-index: 1; } .zd-tl-time { width: var(--zd-tl-time-w); padding-right: 0.75rem; text-align: right; } /* flex-basis: 0 – enélkül a hosszú cím max-content szélessége új flex-sorba töri a szöveget a bogyó alá, a bal szélre. A min-width: 0 a szó-tördelést engedi a zsugorodó elemben. */ .zd-tl-body { flex: 1 1 0; min-width: 0; } .zd-tl-node { width: var(--zd-tl-node); height: var(--zd-tl-node); margin-left: var(--zd-tl-gap); margin-right: var(--zd-tl-gap); border-radius: 50%; background: var(--zd-surface); border: 2px solid var(--zd-accent); box-shadow: 0 0 0 4px var(--zd-surface); } .zd-tl-item.is-talk .zd-tl-node { background: var(--zd-accent); box-shadow: 0 0 0 4px var(--zd-surface), 0 0 14px rgba(var(--zd-accent-rgb), 0.7); } .zd-tl-item.is-break .zd-tl-node { border-color: rgba(157, 179, 204, 0.45); } /* Telefon: az időpont a saját sorába kerül, a tengely a bal szélre húzódik, a szöveg és az időpont egy vonalban indul. */ @media (max-width: 767.98px) { .zd-timeline { --zd-tl-time-w: 0px; --zd-tl-gap: 0.5rem; } /* A behúzás = rés + bogyó + rés, vagyis pontosan ott kezdődik, ahol a cím és a leírás is. */ .zd-tl-time { width: 100%; padding-right: 0; padding-left: calc(var(--zd-tl-gap) * 2 + var(--zd-tl-node)); padding-bottom: 0.35rem; text-align: left; } } /* Helyszín-térkép: a .container-en kívül, a szekció (=teljes oldal) szélességében fut végig. A negatív margó kioltja a szekció alsó paddingját (--zd-pad), hogy a térkép közvetlenül a következő szekció fölött legyen. */ .zd-venue-strip { width: 100%; height: clamp(280px, 32vw, 420px); margin-bottom: calc(-1 * var(--zd-pad)); } .zd-venue-strip iframe { display: block; width: 100%; height: 100%; border: 0; } @media (prefers-reduced-motion: no-preference) { .zd-reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.65s ease var(--zd-delay, 0ms), transform 0.65s cubic-bezier(0.2, 0.8, 0.2, 1) var(--zd-delay, 0ms); } .zd-reveal.is-visible { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .btn-primary:hover, .zd-lift:hover { transform: none; } }