/* ========================================================= szamlalo-splash-site.css Az élő oldalon megjelenő visszaszámláló sáv + splash popup. Kapcsold be a -ben, a style.css UTÁN. ========================================================= */ /* ===== VISSZASZÁMLÁLÓ SÁV (fixen az oldal tetején, a fixed-top navbar FÖLÖTT - a JS a navbart és a body paddingjét is automatikusan lejjebb tolja ennyivel, így semmit nem takar el) ===== */ .akcio-szamlalo-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 1029; /* Bootstrap .fixed-top z-index-e 1030, mi épp alá/fölé kerülünk átfedés nélkül */ display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; padding: 10px 16px; background: linear-gradient(90deg, #b91c1c, #ef4444, #b91c1c); background-size: 200% 100%; animation: akcioSzamlaloGradient 6s ease infinite; color: #fff; font-size: 14px; font-weight: 700; box-shadow: 0 3px 10px rgba(0,0,0,0.2); } @keyframes akcioSzamlaloGradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .akcio-szamlalo-cim { letter-spacing: 0.2px; } .akcio-szamlalo-idok { font-family: "Consolas", monospace; font-size: 14px; background: rgba(0,0,0,0.2); padding: 3px 10px; border-radius: 6px; letter-spacing: 0.4px; } @media (max-width: 480px) { .akcio-szamlalo-bar { font-size: 12.5px; padding: 8px 10px; } .akcio-szamlalo-idok { font-size: 12.5px; } } /* ===== SPLASH POPUP ===== */ .akcio-splash-overlay { position: fixed; inset: 0; z-index: 10000; background: rgba(0, 0, 0, 0.65); display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; transition: opacity 0.25s ease; backdrop-filter: blur(3px); } .akcio-splash-overlay.show { opacity: 1; } .akcio-splash-box { position: relative; max-width: min(720px, 94vw); max-height: 90vh; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.4); transform: scale(0.92); transition: transform 0.25s ease; } .akcio-splash-overlay.show .akcio-splash-box { transform: scale(1); } .akcio-splash-box img { display: block; width: 100%; max-height: 90vh; object-fit: contain; } .akcio-splash-link { display: block; line-height: 0; } .akcio-splash-close { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border-radius: 50%; background: rgba(17, 24, 39, 0.75); color: #fff; border: none; font-size: 22px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s, transform 0.15s; z-index: 2; } .akcio-splash-close:hover { background: #dc2626; transform: scale(1.08); } @media (prefers-reduced-motion: reduce) { .akcio-szamlalo-bar { animation: none; } }