/* Google font (doporučeno přidat do ): */ /* Reset */ * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } /* Luxusní přírodní pozadí */ body { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at top, #1b2b1b, #0d1a0d); overflow-x: hidden; color: #f5f5f5; } /* TŘPYTKY */ body::before { content: ""; position: fixed; width: 200%; height: 200%; background-image: radial-gradient(white 1px, transparent 1px), radial-gradient(gold 1px, transparent 1px); background-size: 80px 80px, 120px 120px; animation: sparkle 20s linear infinite; opacity: 0.15; z-index: -2; } /* SVĚTELNÉ LISTOVÉ SKVRNY */ body::after { content: ""; position: fixed; width: 100%; height: 100%; background: radial-gradient(circle at 20% 30%, rgba(0,255,150,0.15), transparent 40%), radial-gradient(circle at 80% 70%, rgba(255,200,0,0.15), transparent 40%); z-index: -1; } /* KARTA */ .wrap { max-width: 950px; padding: 40px; border-radius: 30px; background: rgba(255,255,255,0.05); backdrop-filter: blur(25px); box-shadow: 0 0 80px rgba(255,215,0,0.15), inset 0 0 40px rgba(255,255,255,0.05); position: relative; overflow: hidden; animation: fadeIn 1.5s ease; } /* Lesklý odlesk přes kartu */ .wrap::before { content: ""; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(120deg, transparent, rgba(255,255,255,0.2), transparent); transform: rotate(25deg); animation: shineMove 6s infinite; } /* Hover luxusní efekt */ .wrap:hover { transform: translateY(-12px) scale(1.02); box-shadow: 0 30px 100px rgba(255,215,0,0.35), inset 0 0 50px rgba(255,255,255,0.1); } /* NADPIS */ h1 { text-align: center; font-size: 3.5rem; margin-bottom: 25px; background: linear-gradient(90deg, #ffd700, #fff, #ffd700); background-size: 200%; -webkit-background-clip: text; color: transparent; animation: shineText 5s linear infinite; letter-spacing: 2px; } /* Layout */ .row { display: flex; gap: 25px; flex-wrap: wrap; } /* Obrázek */ img { width: 320px; border-radius: 20px; transition: 0.6s; filter: brightness(0.9) saturate(1.2); } img:hover { transform: scale(1.1); filter: brightness(1.1) saturate(1.4); box-shadow: 0 0 50px gold; } /* Tabulka */ table { width: 100%; border-collapse: collapse; } th, td { padding: 14px; } th { color: #ffd700; } tr { background: rgba(255,255,255,0.04); transition: 0.3s; } tr:hover { background: linear-gradient(90deg, rgba(0,255,150,0.2), transparent); transform: translateX(8px); } /* Sekce */ section { margin-top: 30px; } h2 { margin-bottom: 10px; color: #ffd700; } p { line-height: 1.7; color: #ddd; } /* ANIMACE */ @keyframes sparkle { from { transform: translateY(0); } to { transform: translateY(-200px); } } @keyframes shineMove { 0% { transform: translateX(-100%) rotate(25deg); } 100% { transform: translateX(100%) rotate(25deg); } } @keyframes shineText { 0% { background-position: 0%; } 100% { background-position: 200%; } } @keyframes fadeIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } /* Responsivita */ @media (max-width: 768px) { .row { flex-direction: column; align-items: center; } img { width: 100%; } }