/* ============================================================ Hello Biztonság — VAGYONVÉDELEM 2. („Lakásom lett") aloldal stílus Minden szabály .vv2 alá skópozva, hogy ne ütközzön a témával. A blokkjaidra tedd rá a .vv2 wrappert (ld. szekció-fájl). A dinamikus részeket (ajtóteszt-gombok, checklista) a vv2-page.js építi fel — a belső stílus ott, inline van. Három interaktív blokk: 01 Ajtóteszt — rúgd be az ajtót animációs mini-játék 02 A kötelezők — kipipálható fizikai-védelem checklista 03 Pánik van — kríziskezelés (statikus, piros keret) ============================================================ */ .vv2{ --navy:#003153; --navy-d:#00263f; --teal:#11B7A3; --lime:#C9EA3D; --amber:#FFC53D; --cream:#F7F5F0; --danger:#FF5A5A; --f-display:'Anton',sans-serif; --f-head:'Space Grotesk',sans-serif; --f-body:'DM Sans',system-ui,sans-serif; --f-mono:'Space Mono',monospace; background:var(--navy); color:var(--cream); font-family:var(--f-body); } .vv2 *{box-sizing:border-box} .vv2 img{display:block} .vv2 a{text-decoration:none} .vv2 button{font-family:inherit} .vv2 .i{display:inline-flex;align-items:center;justify-content:center} .vv2 .i svg{width:100%;height:100%;display:block} /* ---- 01 · Ajtóteszt: színház ---- A színpad magasságát a MÉDIA aránya adja (kezdőkép 1376×768, a klipek ~856×478 — mindkettő ~16:9), nem fix px. Korábban 400/340px volt, és mobilon a 16:9-es videó alatt maradt egy ~150px-es üres sáv. */ .vv2-stage{ position:relative;overflow:hidden;aspect-ratio:1376/768;border-radius:22px; background:radial-gradient(120% 90% at 50% 0,#0e4a6e,#00263f 70%); border:1.5px solid rgba(247,245,240,.1) } @supports not (aspect-ratio: 16 / 9){ .vv2-stage{height:400px} } /* Kezdőkép: az első rúgásig látszik, utána átúszik a videóba. */ .vv2 .vv2-preview{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; display:block;opacity:1;pointer-events:none;transition:opacity .3s;z-index:1} .vv2-stage.has-started .vv2-preview{opacity:0} /* a CSS-rajzos jelenet csak tartalék (ha egy videó nem tölt be): amíg a kezdőkép vagy a videó látszik, nem kell mutatni */ .vv2-stage:not(.has-started) .vv2-frame, .vv2-stage:not(.has-started) .vv2-fig, .vv2-stage:not(.has-started) .vv2-floor{opacity:0} /* videós ajtó lejátszása: a klip kitölti a színpadot, a CSS-elemek elrejtve */ .vv2-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain; background:#00263f;opacity:0;pointer-events:none;transition:opacity .25s;z-index:1} .vv2-video.is-on{opacity:1} .vv2-stage.is-video .vv2-frame, .vv2-stage.is-video .vv2-fig, .vv2-stage.is-video .vv2-floor{opacity:0} .vv2-badge{z-index:3} .vv2-flash{z-index:2} /* padló */ .vv2-floor{position:absolute;left:0;right:0;bottom:0;height:78px; background:linear-gradient(#0a3a5c,#072b44);border-top:2px solid rgba(247,245,240,.12)} /* ajtótok a falban */ .vv2-frame{position:absolute;right:70px;bottom:78px;width:150px;height:250px; background:#0a2740;border:9px solid #123f5f;border-bottom:0;border-radius:6px 6px 0 0; box-shadow:inset 0 0 0 2px rgba(0,0,0,.25);perspective:900px} /* maga az ajtólap – JS állítja a kinézetét + a kimenetel-osztályt */ .vv2-door{position:absolute;inset:0;transform-origin:left center; transition:transform .5s cubic-bezier(.36,.07,.19,.97); display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px} .vv2-door-knob{position:absolute;right:12px;top:50%;width:11px;height:11px;border-radius:50%; background:#ffd76a;box-shadow:0 0 0 2px rgba(0,0,0,.2)} /* repedés-overlay (műanyag ajtó) */ .vv2-crack{position:absolute;inset:0;opacity:0;transition:opacity .25s;pointer-events:none} .vv2-door.is-crack .vv2-crack{opacity:1} /* becsapódás-villanás */ .vv2-flash{position:absolute;right:150px;bottom:180px;width:70px;height:70px;border-radius:50%; background:radial-gradient(circle,rgba(255,197,61,.9),transparent 65%);opacity:0;pointer-events:none} .vv2-flash.is-on{animation:vv2flash .45s ease-out} /* a rúgó figura — a jobbra lévő ajtóhoz igazítva (right-anchor) */ .vv2-fig{position:absolute;right:205px;bottom:78px;width:120px;height:210px; transition:transform .35s ease} .vv2-fig.is-windup{transform:translateX(-10px)} .vv2-fig.is-kick{transform:translateX(26px)} .vv2-fig.is-recoil{transform:translateX(-24px) rotate(-4deg)} .vv2-leg-kick{transform-origin:top center;transition:transform .18s cubic-bezier(.5,0,.4,1.4)} .vv2-fig.is-windup .vv2-leg-kick{transform:rotate(30deg)} .vv2-fig.is-kick .vv2-leg-kick{transform:rotate(-62deg)} /* ajtó kimenetelek */ .vv2-door.is-hit{animation:vv2shake .4s} .vv2-door.is-burst{transform:rotateY(-104deg);box-shadow:20px 0 40px rgba(0,0,0,.5)} .vv2-door.is-crack{transform:rotateY(-12deg)} .vv2-door.is-hold{animation:vv2nudge .4s} /* eredmény-jelvény a színpad tetején */ .vv2-badge{position:absolute;top:16px;left:50%;transform:translateX(-50%) translateY(-14px); opacity:0;transition:opacity .3s,transform .3s; display:inline-flex;align-items:center;gap:9px;padding:9px 16px;border-radius:999px; font:800 14px 'Space Grotesk';letter-spacing:.02em;white-space:nowrap} .vv2-badge.is-on{opacity:1;transform:translateX(-50%) translateY(0)} /* ---- 02 · Checklista — fordulós kártyák ---- Kipipálva a kártya megfordul, és a leírás helyén a tétel képe jelenik meg (a cím + a pipa a képre úszik egy sötét sávban). A két lap ABSZOLÚT pozíciójú (egymáson ülnek), a kártya magasságát a vv2-page.js fitStep()-je állítja: kipipálatlanul a szöveges lap valódi magassága, kipipálva a kép aránya (szélesség / 2,5). Így a blokk NEM nő meg attól, hogy a képes hátlap magasabb — és a fordulásnál a magasság is szépen átúszik. Régebbi megoldás (grid-area:1/1) itt nem jó: ott a kártya MINDIG a magasabbik laphoz igazodna. A kép 800×320 (2,5:1); a hátlapon object-fit:cover tölti ki a lapot. Kép nélküli tétel (`.no-img`): a hátlapon a kép helyén „Hamarosan" felirat áll (.vv2-step-soon), ugyanabban a 2,5:1-es keretben. Az --acc / --accrgb változót a vv2-page.js teszi a gombra (lime = elengedhetetlen, teal = ajánlott). */ .vv2 .vv2-step{display:block;width:100%;padding:0;border:none;background:none;color:#F7F5F0;text-align:left;cursor:pointer;perspective:1100px;-webkit-tap-highlight-color:transparent} .vv2 .vv2-step-flip{position:relative;display:block;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.35,.05,.2,1),height .45s cubic-bezier(.35,.05,.2,1)} .vv2 .vv2-step.is-on .vv2-step-flip{transform:rotateY(180deg)} .vv2 .vv2-step-face{position:absolute;inset:0;border-radius:15px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden} /* Előlap: pipa-doboz + cím + leírás */ .vv2 .vv2-step-front{display:flex;align-items:flex-start;gap:14px;padding:16px 18px;background:#0a3a5c;border:1.5px solid rgba(247,245,240,.1);transition:border-color .2s} /* mérés közben a JS erre vált, hogy a szöveges lap valódi magassága kijöjjön */ .vv2 .vv2-step-front.is-measuring{position:static} @media (hover:hover) and (pointer:fine){.vv2 .vv2-step:hover .vv2-step-front{border-color:rgba(var(--accrgb),.45)}} .vv2 .vv2-step-box{flex:none;width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:rgba(247,245,240,.08);color:var(--acc);border:1.5px solid rgba(var(--accrgb),.35)} .vv2 .vv2-step-box .i{width:18px;height:18px} .vv2 .vv2-step-box-on{background:var(--acc);color:#003153;border-color:var(--acc)} .vv2 .vv2-step-box-on .i{width:19px;height:19px} .vv2 .vv2-step-txt{flex:1;display:block} .vv2 .vv2-step-title{display:block;font:700 16px 'Space Grotesk';color:#F7F5F0;margin-bottom:3px} .vv2 .vv2-step-desc{display:block;font-size:14px;line-height:1.5;color:rgba(247,245,240,.72)} /* Hátlap: a kép tölti ki, alul sötét sávban a pipa + a cím */ .vv2 .vv2-step-back{transform:rotateY(180deg);background:#00263f;border:1.5px solid rgba(var(--accrgb),.55)} .vv2 .vv2-step-back img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} .vv2 .vv2-step-cap{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:11px;padding:12px 14px; background:linear-gradient(to top,rgba(0,38,63,.94) 0%,rgba(0,38,63,.82) 55%,rgba(0,38,63,0) 100%)} .vv2 .vv2-step-cap .vv2-step-title{margin:0;font-size:15px;text-shadow:0 1px 2px rgba(0,0,0,.5)} /* kép nélküli tétel: „Hamarosan" a kép helyén (a cím-sáv fölött, középen) */ .vv2 .vv2-step.no-img .vv2-step-back{background: repeating-linear-gradient(-45deg,rgba(247,245,240,.035) 0 10px,transparent 10px 22px), linear-gradient(135deg,#0a3a5c,#00263f)} .vv2 .vv2-step-soon{position:absolute;inset:0 0 44px;display:flex;align-items:center;justify-content:center;gap:9px; font:700 12px 'Space Mono';letter-spacing:.14em;text-transform:uppercase;color:rgba(var(--accrgb),.85)} .vv2 .vv2-step-soon .i{width:18px;height:18px;opacity:.8} /* Csökkentett mozgás: nincs fordulás, csak lapváltás. */ @media(prefers-reduced-motion:reduce){ .vv2 .vv2-step-flip{transition:none} } /* ---- Animációk ---- */ @keyframes vv2shake{ 0%,100%{transform:translateX(0)} 15%{transform:translateX(-7px) rotate(-1deg)} 30%{transform:translateX(6px) rotate(1deg)} 45%{transform:translateX(-5px)} 60%{transform:translateX(4px)} 75%{transform:translateX(-2px)} } @keyframes vv2nudge{0%,100%{transform:translateX(0)}40%{transform:translateX(-2px)}70%{transform:translateX(1px)}} @keyframes vv2flash{0%{opacity:0;transform:scale(.4)}30%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.5)}} @keyframes vv2float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-14px) rotate(1deg)}} @keyframes vv2marq{0%{transform:translateX(0)}100%{transform:translateX(-50%)}} @keyframes vv2pulseL{0%,100%{box-shadow:0 0 0 0 rgba(201,234,61,.5)}70%{box-shadow:0 0 0 16px rgba(201,234,61,0)}} @keyframes vv2pop{from{opacity:0;transform:translateY(24px) scale(.94)}60%{transform:translateY(-4px) scale(1.01)}to{opacity:1;transform:translateY(0) scale(1)}} /* ---- Reszponzív ---- */ @media(max-width:900px){ .vv2-hero-grid{grid-template-columns:1fr!important} .vv2-two{grid-template-columns:1fr!important} .vv2-checks{grid-template-columns:1fr!important} } @media(max-width:600px){ .vv2-nav-links{display:none!important} /* a színpad magasságát az arány adja — a fix magasság hagyott egy nagy üres sávot a 16:9-es videó alatt */ .vv2-frame{right:28px;width:120px;height:200px} .vv2-fig{right:150px;transform:scale(.82);transform-origin:right bottom} /* ---- 03 · „Betörtek, és pánik van!" — mobilra rendezve ---- A piros panel rácsa INLINE `grid-template-columns:1fr 1fr` volt, ezért mobilon két ~140px-es hasábba tört a négy buborék, és a szöveg szótagonként tördelődött. Egy oszlop + kisebb paddingek. */ .vv2 .vv2-panic{padding:20px 16px!important;border-radius:18px} .vv2 .vv2-panic-grid{grid-template-columns:1fr!important;gap:11px;margin-top:18px} .vv2 .vv2-panic-card{padding:14px 14px!important;gap:11px} .vv2 .vv2-panic-card .i{width:20px;height:20px} .vv2 .vv2-panic-card > span:first-child{width:36px;height:36px;border-radius:10px} .vv2 .vv2-panic-head{gap:11px;align-items:flex-start} .vv2 .vv2-panic-ic{width:42px!important;height:42px!important;border-radius:12px!important} .vv2 .vv2-panic-ic .i{width:24px;height:24px} .vv2 .vv2-panic-title{font-size:23px!important;line-height:1.04!important} .vv2 .vv2-panic-note{font-size:13.5px;margin-top:14px} .vv2 section[id="panik"]{padding-left:20px!important;padding-right:20px!important} .vv2 section[id="panik"] h2{font-size:30px!important;line-height:1.1} } /* ============================================================ 01 · Ajtóteszt — MOBIL elrendezés (2026-09-02) ============================================================ Telefonon az eredmény-buborék (#vv2-verdict) NEM az ajtó-gombok alatt, hanem közvetlenül a színpad + mérő alatt jelenik meg — a színes jelmagyarázat (Piros/Sárga/Zöld) helyén, ami mobilon rejtve van. Markup-változás nélkül: a két hasáb-doboz display:contents-szel feloldva, így a színpad, a mérő, a buborék és a gombok közvetlen rács-elemek, és az `order` rendezi őket. Állapotok (a vv2-page.js teszi rá az osztályt): .is-idle / .is-testing → lapos, egysoros buborék (ikon + szöveg) .is-result → teljes eredmény; a jobb felső nyíl (.vv2-vd-toggle) a magyarázatot csukja össze, a „Majdnem jó / MODERN MŰANYAG AJTÓ" sor marad. Asztalin semmi nem változik (a nyíl ott rejtve). */ .vv2 .vv2-vd-toggle{display:none} @media(max-width:600px){ .vv2 .vv2-two{gap:12px!important} .vv2 .vv2-two>div{display:contents!important} /* színpad (0) → mérő-doboz (0) → eredmény (1) → ajtó-gombok (2) */ /* A színpad rács-elemként a szülő inline align-items:stretch-ét örökli, és Safari (iOS) egy MINDKÉT irányban nyújtott elemnél eldobja az aspect-ratio-t → 0 magas lett, eltűnt a kezdőkép és a videó (Chrome-ban nem). align-self:start visszaadja az arányt; a min-height tartalék. */ .vv2 #vv2-stage{align-self:start;justify-self:stretch;width:100%;min-height:calc((100vw - 80px) * 768 / 1376)} .vv2 #vv2-verdict{order:1} .vv2 #vv2-door-opts{order:2} /* a mérő alatti szín-jelmagyarázat telefonon fölösleges */ .vv2 div:has(> #vv2-meter) + div{display:none!important} .vv2 div:has(> #vv2-meter){margin-bottom:0!important} .vv2 #vv2-verdict{min-height:0!important;padding:14px 16px!important;border-radius:16px!important;flex:none!important} /* lapos, egysoros állapotok */ .vv2 .vv2-vd-state{flex-direction:row!important;justify-content:flex-start!important;text-align:left!important;gap:12px!important;height:auto!important} .vv2 .vv2-vd-state .i{width:24px!important;height:24px!important;flex:none} .vv2 .vv2-vd-state p{max-width:none!important;font-size:14px!important} /* eredmény + összecsukás */ .vv2 .vv2-vd-toggle{ display:inline-flex;align-items:center;justify-content:center;flex:none; width:34px;height:34px;border-radius:10px;border:1px solid rgba(247,245,240,.18); background:rgba(247,245,240,.06);color:rgba(247,245,240,.8);cursor:pointer;padding:0 } .vv2 .vv2-vd-toggle .i{transition:transform .25s} .vv2 #vv2-verdict.is-collapsed .vv2-vd-toggle .i{transform:rotate(180deg)} .vv2 #vv2-verdict.is-collapsed .vv2-vd-text{display:none} .vv2 #vv2-verdict.is-collapsed .vv2-vd-head{margin-bottom:0!important} .vv2 .vv2-vd-head>span:first-child{width:40px!important;height:40px!important} }