* { margin: 0; padding: 0; box-sizing: border-box; font-family: Arial, sans-serif; } html { scroll-behavior: smooth; } html, body { min-height: 100%; } body { position: relative; background: #05040a; color: white; overflow-x: hidden; } /* Background */ .bg-gradient { position: fixed; inset: -30%; z-index: 0; background: radial-gradient(circle at 20% 30%, #0d0680 0%, transparent 55%), radial-gradient(circle at 80% 20%, #4a0d8c 0%, transparent 50%), radial-gradient(circle at 30% 80%, #051a80 0%, transparent 55%), radial-gradient(circle at 75% 75%, #2a0645 0%, transparent 55%), linear-gradient(135deg, #000000 0%, #05010f 50%, #000000 100%); background-size: 220% 220%; filter: blur(50px) saturate(150%); animation: drift 30s ease-in-out infinite; } @keyframes drift { 0% { background-position: 0% 0%, 100% 0%, 0% 100%, 100% 100%, 0% 0%; } 20% { background-position: 40% 10%, 60% 40%, 10% 60%, 90% 70%, 10% 10%; } 40% { background-position: 80% 40%, 20% 70%, 70% 20%, 40% 90%, 20% 30%; } 60% { background-position: 60% 80%, 80% 10%, 30% 80%, 10% 30%, 30% 60%; } 80% { background-position: 20% 60%, 40% 90%, 90% 40%, 60% 10%, 10% 40%; } 100% { background-position: 0% 0%, 100% 0%, 0% 100%, 100% 100%, 0% 0%; } } /* Sections */ .section { position: relative; z-index: 1; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 100px 24px 60px; text-align: center; } .glass-card { max-width: 680px; width: 100%; padding: 55px 45px; border-radius: 32px; display: flex; flex-direction: column; align-items: center; background: linear-gradient( 135deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .04) ); backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%); border: 1px solid rgba(255,255,255,.18); box-shadow: 0 8px 32px rgba(0,0,0,.45), inset 0 1px 1px rgba(255,255,255,.25), inset 0 -1px 1px rgba(0,0,0,.2); } .reveal { transition: opacity .9s ease, transform .9s ease; } /* Nav Wrapper to maintain layout spacing */ .nav-wrapper { min-height: 58px; margin-top: 30px; display: flex; justify-content: center; align-items: center; } /* ========================= */ /* MAIN STICKY NAV PILL */ /* ========================= */ .nav-pill { position: relative; display: inline-flex; justify-content: center; align-items: center; gap: 6px; padding: 8px; border-radius: 999px; background: rgba(255,255,255,.1); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); border: 1px solid rgba(255,255,255,.18); box-shadow: 0 4px 20px rgba(0,0,0,.35), inset 0 1px 1px rgba(255,255,255,.2); transition: transform .3s ease, top .3s ease; } /* ========================= */ /* DETACHED STICKY NAV CLONE */ /* ========================= */ /* This is a SEPARATE copy of the pill, placed directly under (not inside .glass-card). It has to live outside .glass-card because that element uses backdrop-filter, and any ancestor with filter / backdrop-filter creates a new containing block for fixed-position descendants — which traps position:fixed inside it instead of letting it float over the whole viewport. Keeping this clone outside that subtree is what lets it truly hang at the top of the page. */ .sticky-nav { position: fixed; top: 20px; left: 50%; z-index: 1000; transform: translateX(-50%) translateY(-16px) scale(.92); opacity: 0; pointer-events: none; transition: opacity .35s cubic-bezier(.34, 1.56, .64, 1), transform .35s cubic-bezier(.34, 1.56, .64, 1); } .sticky-nav.visible { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0) scale(1); } .pill-slider { position: absolute; top: 8px; left: 0; height: 42px; width: 0; border-radius: 999px; background: rgba(255,255,255,.18); box-shadow: inset 0 1px 1px rgba(255,255,255,.25); transition: transform .4s cubic-bezier(.65,0,.35,1), width .4s cubic-bezier(.65,0,.35,1); z-index: 0; } .pill-btn { position: relative; z-index: 1; display: inline-flex; align-items: center; padding: 10px 20px; border-radius: 999px; color: #d8d3e6; text-decoration: none; font-size: 15px; transition: color .25s; } .pill-btn:hover, .pill-btn.active { color: white; } /* ========================= */ /* GLASS SUB-TABS (MATCHING PILL DESIGN) */ /* ========================= */ .tab-bar { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 999px; padding: 6px; margin-bottom: 25px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.15); max-width: 100%; overflow-x: auto; } .tab-btn { background: transparent; border: none; outline: none; color: #d8d3e6; padding: 8px 18px; font-size: 14px; font-weight: 500; border-radius: 999px; cursor: pointer; transition: all 0.25s ease; white-space: nowrap; } .tab-btn:hover { color: #ffffff; } .tab-btn.active { background: rgba(255, 255, 255, 0.18); color: #ffffff; box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.25); } .tab-content { display: none; width: 100%; } .tab-content.active { display: block; animation: fadeIn 0.35s ease forwards; } @keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* ========================= */ /* MEDIA / GAME CARDS GRID */ /* ========================= */ .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; width: 100%; margin-top: 15px; justify-content: center; } .media-card { position: relative; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 20px; overflow: hidden; text-align: left; transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; aspect-ratio: 3 / 4; display: flex; flex-direction: column; justify-content: flex-end; } .media-card:hover { transform: translateY(-6px); border-color: rgba(255, 255, 255, 0.35); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5); } .card-image { position: absolute; inset: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); z-index: 1; } .card-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; } .media-card:hover .card-image img { transform: scale(1.06); } .card-info { position: relative; z-index: 2; padding: 14px; width: 100%; background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.3) 70%, transparent 100%); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .card-info h3 { font-size: 15px; font-weight: bold; color: #ffffff; margin-bottom: 2px; } .card-info .blurb { font-size: 12px; color: #b8b3c9; line-height: 1.3; } /* Greeting */ .greeting-row { display: flex; align-items: center; justify-content: center; gap: 14px; } .wave { display: inline-block; font-size: 42px; animation: wave 3.5s ease-in-out infinite; transform-origin: 70% 70%; } .greeting-box { height: 60px; min-width: 260px; overflow: hidden; display: flex; align-items: center; font-size: 42px; font-weight: bold; } #greeting-text { animation: slide .8s ease; } h1 { margin-top: 10px; font-size: 64px; } h2 { font-size: 42px; margin-bottom: 25px; } .section-text, p { color: #b8b3c9; font-size: 18px; line-height: 1.6; } /* Achievement Cards */ .achievement-card { padding: 24px 20px; border-radius: 20px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); width: 100%; } .achievement-card h3 { color: white; margin-bottom: 10px; } .achievement-card p { font-size: 15px; } /* Buttons */ .buttons { margin-top: 30px; } .button { display: inline-block; margin: 8px; padding: 12px 25px; border-radius: 30px; text-decoration: none; color: white; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); transition: .3s; } .button:hover { transform: translateY(-3px); border-color: #8f5fd6; background: rgba(255,255,255,.14); } @keyframes slide { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes wave { 0%,100% { transform: rotate(0deg); } 15% { transform: rotate(16deg); } 30% { transform: rotate(-6deg); } 45% { transform: rotate(12deg); } 60% { transform: rotate(0deg); } } @media (max-width:700px){ .glass-card{ padding:40px 20px; } h1{ font-size:42px; } h2{ font-size:32px; } .greeting-box{ min-width:200px; font-size:30px; } .pill-btn{ padding:8px 14px; font-size:14px; } }