* { box-sizing: border-box; } body {margin: 0; font-family: Arial, Helvetica, sans-serif; background: #0b1625; color: #e9f1ff; padding-top: 60px; padding-top: 70px; } a { text-decoration: none; color: inherit; } .header { background: #0e2236; padding: 16px; text-align: center; } .header h1 { margin: 0; } .container { max-width: 1280px; margin: 0 auto; padding: 24px; } /* Home tiles */ .home-tiles { display: grid; grid-template-columns: repeat(2, minmax(260px, 1fr)); gap: 24px; align-items: center; justify-items: center; } .home-tile { width: 100%; max-width: 1080px; background: #13283f; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 28px rgba(0,0,0,.45); transition: transform .18s, box-shadow .18s; } .home-tile:hover { transform: translateY(-2px); box-shadow: 0 12px 34px rgba(0,0,0,.55); } .home-tile img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; } .home-tile h2 { margin: 0; padding: 12px 14px; text-align: center; color: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 8px; } /* Category grid */ .categories { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; } .card { background: #13283f; border-radius: 14px; overflow: hidden; color: #fff; box-shadow: 0 10px 28px rgba(0,0,0,.45); transition: transform .18s, box-shadow .18s; cursor: pointer; } .card:hover { transform: translateY(-2px); box-shadow: 0 12px 34px rgba(0,0,0,.55); } .card img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; } .card h3 { margin: 0; padding: 10px 12px; text-align: center; } /* Gallery */ .gallery-section { margin-top: 32px; } .gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; } body.Desktop .gallery img { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; border-radius: 12px; box-shadow: 0 6px 18px rgba(0,0,0,.4); } body.Mobile .gallery img { aspect-ratio: 9 / 16; width: 100%; object-fit: cover; border-radius: 12px; box-shadow: 0 6px 18px rgba(0,0,0,.4); } /* Lightbox */ .lightbox { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.9); align-items: center; justify-content: center; flex-direction: column; gap: 12px; z-index: 9999; } .lightbox.show { display: flex; } .lightbox img { max-width: 92%; max-height: 85%; } #downloadBtn { background: #3aa1ff; color: #0b1625; padding: 10px 16px; border-radius: 8px; text-decoration: none; font-weight: 600; } /* Ads */ .ad { background: #263246; color: #9fb3d1; text-align: center; font-size: 13px; } .ad-top { padding: 8px; } .ad-bottom { padding: 8px; margin-top: 16px; } .ad-side { position: fixed; top: 120px; width: 160px; height: 600px; display: flex; align-items: center; justify-content: center; } .ad-left { left: 8px; } .ad-right { right: 8px; } /* Footer */ footer { background: #121a27; color: #cfe2ff; text-align: center; padding: 18px 10px; border-top: 1px solid #2a3a52; font-size: .95rem; } footer a { color: #66aaff; } /* Responsive */ @media (max-width: 980px) { .categories { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .home-tiles { grid-template-columns: 1fr; } .categories { grid-template-columns: 1fr; } .ad-side { display: none; } } /* Cookie banner */ .cookie-banner { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); max-width: 480px; width: calc(100% - 32px); background: rgba(5, 10, 20, 0.96); color: #e9f1ff; padding: 16px 18px; border-radius: 12px; box-shadow: 0 6px 18px rgba(0,0,0,0.7); font-size: 14px; display: none; z-index: 9999; } .cookie-banner.show { display: block; } .cookie-banner p { margin: 0 0 8px; line-height: 1.4; } .cookie-banner a { color: #8ec5ff; text-decoration: underline; } .cookie-buttons { display: flex; justify-content: flex-end; gap: 8px; } .cookie-buttons button { border: none; border-radius: 999px; padding: 6px 14px; font-size: 13px; cursor: pointer; } #cookie-accept { background: #28a745; color: #fff; } #cookie-decline { background: #444; color: #fff; } /* Legal pages basic layout */ body.Legal { background: #050915; } .legal-page { max-width: 900px; margin: 40px auto 80px; padding: 0 16px; } .legal-page h1 { font-size: 28px; margin-bottom: 16px; } .legal-page h2 { font-size: 20px; margin-top: 24px; margin-bottom: 8px; } .legal-page p { line-height: 1.6; margin: 4px 0 10px; } /* Home hero & subtitles */ .home-hero, .mobile-hero { display: flex; flex-direction: column; align-items: center; gap: 6px; } .site-title { font-size: 40px; letter-spacing: 0.04em; margin: 0; background: linear-gradient(120deg, #6be7ff, #9f7bff); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 18px rgba(0,0,0,.7); animation: fadeUpTitle .8s ease-out forwards; } .home-tagline, .mobile-note { font-size: 16px; color: #c9d5f5; margin: 4px 0 0; padding: 6px 16px; border-radius: 999px; background: rgba(11, 22, 37, 0.85); border: 1px solid rgba(155, 192, 255, 0.25); backdrop-filter: blur(4px); display: inline-block; animation: fadeUpSubtitle 1s ease-out .1s forwards; opacity: 0; } /* Home info section */ .home-info { max-width: 720px; margin: 32px auto 0; text-align: center; line-height: 1.6; color: #d7e3ff; } .home-info h2 { font-size: 22px; margin-bottom: 8px; } .home-info p { margin: 0; font-size: 15px; opacity: 0.9; } /* Simple fade-up animations */ @keyframes fadeUpTitle { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeUpSubtitle { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 640px) { .site-title { font-size: 30px; } .home-info { padding: 0 14px; margin-top: 24px; } } .home-tile-icon { font-size: 1.3em; display: inline-flex; align-items: center; filter: drop-shadow(0 0 4px rgba(0,0,0,.6)); } /* Language Switcher */ .lang-switcher{position:fixed;top:10px;right:14px;z-index:10001;display:flex;align-items:center;gap:6px;background:transparent;padding:0;margin:0;} .lang-switcher a { color: #fff; margin-left: 8px; font-weight: 500; text-decoration: none; } .lang-switcher a.active { text-decoration: underline; font-weight: 700; } /* Logo link */ .logo-link { color: inherit; text-decoration: none; } .logo-link:hover { text-decoration: underline; } /* Language Switcher with flags */ .lang-switcher { display: flex; align-items: center; justify-content: flex-end; gap: 6px; padding: 8px 16px; background: rgba(0, 0, 0, 0.35); backdrop-filter: blur(6px); border-bottom-left-radius: 999px; border-top-left-radius: 999px; position: sticky; top: 0; z-index: 999; font-size: 0.9rem; } .lang-switcher .lang-label { opacity: 0.85; margin-right: 4px; font-weight: 500; } .lang-switcher a { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; color: #fff; text-decoration: none; font-weight: 500; opacity: 0.85; } .lang-switcher a:hover { opacity: 1; background: rgba(255, 255, 255, 0.1); } .lang-switcher a.active { background: rgba(255, 255, 255, 0.18); opacity: 1; font-weight: 600; } /* Ensure logo link still looks good */ .logo-link { color: inherit; text-decoration: none; } .logo-link:hover { text-decoration: underline; } /* Flag icons in language switcher */ .flag-icon { width: 18px; height: 18px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 2px rgba(0,0,0,0.4); }.site-topbar{position:fixed;top:0;left:0;width:100%;padding:10px 0;background:linear-gradient(135deg,rgba(8,8,16,.95),rgba(16,10,40,.96));backdrop-filter:blur(10px);box-shadow:0 8px 30px rgba(0,0,0,.7);text-align:center;z-index:10000;}.btn-site{display:inline-block;padding:11px 30px;background:linear-gradient(135deg,#5b2aff,#9b4dff,#f472ff);border-radius:999px;border:1px solid rgba(244,114,255,.6);color:#fff;font-size:20px;font-weight:800;letter-spacing:1.1px;text-transform:uppercase;text-decoration:none;box-shadow:0 0 18px rgba(148,92,255,.8);transition:0.28s ease;}.btn-site:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 0 25px rgba(244,114,255,.9),0 0 45px rgba(88,80,236,.7);background:linear-gradient(135deg,#7c3aed,#c084fc,#f472b6);}@media (max-width:768px){.ad-side{display:none;}.ad-top img,.ad-bottom img{max-width:100%;height:auto;display:inline-block;}}@media (min-width:769px){.ad-bottom{display:none;}.ad-side{display:block;}}