Cs tesztel

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Kattints vagy koppints a kártyára a megfordításhoz. /* ========================================================= UNASX FLIPCARD – KÉTOLDALÚ, KATTINTHATÓ KÁRTYA (FADE+FLIP) --------------------------------------------------------- PATCH PONT – FŐ KONFIG VÁLTOZÓK ====================================================== */ .unasx-flipcard{ --unasx-fc-primary:#00a2ff; /* PATCH PONT: fókuszszín */ --unasx-fc-bg:transparent; /* PATCH PONT: blokk háttere */ --unasx-fc-radius:1rem; /* PATCH PONT: kártya lekerekítés */ --unasx-fc-shadow:0 18px 30px rgba(15,23,42,.35); /* kártya árnyék */ --unasx-fc-width:min(22rem,100%);/* PATCH PONT: max kártyaszélesség */ --unasx-fc-hint-size:.9rem; /* PATCH PONT: lábjegyzet méret */ --unasx-fc-gap:1.25rem; /* PATCH PONT: függőleges margó */ --unasx-fc-duration:.5s; /* PATCH PONT: animáció hossza */ /* PATCH PONT: háttérkép URL a flip alatt Ide írd be a saját képed URL-jét! */ --unasx-fc-bg-img:url("https://www.220volt.hu/shop_ordered/52588/pic/3.png"); } /* ========================================================= ALAP ELRENDEZÉS + TIPOGRÁFIA ====================================================== */ .unasx-flipcard{ font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; display:flex; justify-content:center; padding:var(--unasx-fc-gap); background:var(--unasx-fc-bg); } .unasx-flipcard-wrap{ display:flex; flex-direction:column; align-items:center; gap:var(--unasx-fc-gap); } /* Lábjegyzet / használati tipp */ .unasx-flipcard-hint{ margin:0; font-size:var(--unasx-fc-hint-size); line-height:1.4; color:#6b7280; text-align:center; } /* ========================================================= KÁRTYA – KATTINTHATÓ DIV ====================================================== */ .unasx-flipcard-card{ display:block; width:var(--unasx-fc-width); max-width:100%; cursor:pointer; } /* Fókuszjelölés a kártyán */ .unasx-flipcard-card:focus-visible{ outline:3px solid var(--unasx-fc-primary); outline-offset:6px; } /* Aránytartó külső keret – 1:1 NÉGYZETES KÁRTYA */ .unasx-flipcard-ratio{ position:relative; width:100%; } .unasx-flipcard-ratio::before{ content:""; display:block; padding-bottom:100%; /* 1:1 arány */ } /* Belső konténer – itt adjuk a háttérképet, amit flip közben látsz */ .unasx-flipcard-inner{ position:absolute; inset:0; border-radius:var(--unasx-fc-radius); box-shadow:var(--unasx-fc-shadow); overflow:hidden; /* EDDIGI FEKETE HELYETT: saját háttérkép + fallback szín */ background-color:#020617; /* fallback, ha nincs kép */ background-image:var(--unasx-fc-bg-img); background-repeat:no-repeat; background-position:center; background-size:cover; min-height:180px; /* biztonsági minimum magasság */ } /* Elő- és hátlap közös stílus */ .unasx-flipcard-face{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; backface-visibility:hidden; -webkit-backface-visibility:hidden; transform-origin:center; transition: transform var(--unasx-fc-duration) ease, opacity var(--unasx-fc-duration) ease; } /* Előlap – alapállapotban látszik */ .unasx-flipcard-front{ opacity:1; transform:rotateY(0deg); } /* Hátlap – alapállapotban rejtve, kifordítva */ .unasx-flipcard-back{ opacity:0; transform:rotateY(-180deg); } /* Képek egységes viselkedése */ .unasx-flipcard-face img{ width:100%; height:100%; object-fit:cover; display:block; } /* ========================================================= FLIP LOGIKA – CSAK A KÉPEKET VÁLTJUK ====================================================== */ .unasx-flipcard-card.is-flipped .unasx-flipcard-front{ opacity:0; transform:rotateY(180deg); } .unasx-flipcard-card.is-flipped .unasx-flipcard-back{ opacity:1; transform:rotateY(0deg); } /* ========================================================= ANIMÁCIÓK CSÖKKENTÉSE – AKADÁLYMENTESÍTÉS ====================================================== */ @media (prefers-reduced-motion:reduce){ .unasx-flipcard-face{ transition:none; } } /* ========================================================= BREAKPOINTOK – RESZPONZIVITÁS ====================================================== */ @media (min-width:480px){ .unasx-flipcard{ --unasx-fc-width:min(24rem,100%); } } @media (min-width:768px){ .unasx-flipcard{ --unasx-fc-width:min(26rem,100%); } } @media (min-width:1024px){ .unasx-flipcard{ --unasx-fc-width:min(28rem,100%); } } /* ========================================================= UNASX FLIPCARD – JS ENHANCEMENT --------------------------------------------------------- - NO-JS fallback: az előlap mindig látszik. - JS-sel: kattintás / Enter / Space megfordítja a kártyát (front ↔ back). - NÉVTÉR: window.UnasX_FlipCard ====================================================== */ (function(window, document){ "use strict"; function toggleCard(card){ var flipped = card.classList.toggle("is-flipped"); card.setAttribute("aria-pressed", flipped ? "true" : "false"); } function init(){ var cards = document.querySelectorAll(".unasx-flipcard-card"); if(!cards.length){ return; } for(var i=0;i