/* ========================================================== XSPEEDYQ WEBSITE STYLE.CSS ========================================================== */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap'); /* backdrop-filter is expensive to repaint outside Chrome and on mobile GPUs. script.js adds .no-blur to when the browser doesn't really support it or the device is flagged as low-end; !important is required here because script.js also writes backdrop-filter directly via inline styles in a few places, and inline styles otherwise win over an external stylesheet. */ .no-blur header, .no-blur .glass, .no-blur .card, .no-blur .gear-column{ backdrop-filter:none !important; -webkit-backdrop-filter:none !important; } :root{ --gold:#f8b400; --gold-light:#ffd45a; --gold-dark:#c18a00; --bg:#050505; --bg2:#0d0d0d; --card:#111111; --white:#ffffff; --text:#d6d6d6; --border:rgba(255,255,255,.08); --transition:.35s ease; --shadow: 0 0 12px rgba(248,180,0,.25), 0 0 30px rgba(248,180,0,.12); } *{ margin:0; padding:0; box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ font-family:"Poppins",sans-serif; background: url("assets/noise.png"), linear-gradient(#060606,#0b0b0b); color:white; overflow-x:hidden; min-height:100vh; min-height:100dvh; position:relative; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-size-adjust:100%; -webkit-text-size-adjust:100%; -webkit-tap-highlight-color:transparent; } body::before{ content:""; position:fixed; inset:0; background:url("assets/bg.webp"); background-size:cover; background-position:center; opacity:.08; pointer-events:none; z-index:-3; } body::after{ content:""; position:fixed; inset:0; background: radial-gradient(circle at top, rgba(248,180,0,.10), transparent 65%); z-index:-2; pointer-events:none; } a{ color:inherit; text-decoration:none; } img{ user-select:none; -webkit-user-drag:none; } section{ width:min(1400px,92%); margin:auto; } /* ========================================================== LOADER ========================================================== */ #loader{ position:fixed; inset:0; background:#050505; display:flex; align-items:center; justify-content:center; flex-direction:column; z-index:99999; transition:1s; } #loader img{ width:120px; margin-bottom:35px; filter: drop-shadow(0 0 25px rgba(248,180,0,.45)); } .loader-bar{ width:280px; height:6px; border-radius:999px; background:#181818; overflow:hidden; } .loader-bar span{ display:block; width:0%; height:100%; background:linear-gradient(90deg, var(--gold), #ffe48a, var(--gold)); animation:loading 2s forwards; } @keyframes loading{ 0%{ width:0%; } 100%{ width:100%; } } /* ========================================================== BACKGROUND EFFECTS ========================================================== */ .noise{ position:fixed; inset:0; background:url("assets/noise.png"); opacity:.06; pointer-events:none; z-index:-1; } .smoke{ position:fixed; inset:0; background: radial-gradient(circle, rgba(255,255,255,.03), transparent 65%); mix-blend-mode:screen; animation:smoke 18s linear infinite; pointer-events:none; } @keyframes smoke{ 0%{ transform:translateY(0px); } 50%{ transform:translateY(-30px); } 100%{ transform:translateY(0px); } } #particles{ position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:-1; } /* ========================================================== NAVBAR ========================================================== */ header{ position:fixed; width:100%; top:0; left:0; z-index:1000; -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); background:rgba(5,5,5,.35); border-bottom:1px solid rgba(255,255,255,.05); transition:.35s; } nav{ width:min(1400px,92%); margin:auto; display:flex; justify-content:space-between; align-items:center; height:85px; } .logo img{ width:58px; filter:drop-shadow(0 0 18px rgba(248,180,0,.35)); } nav ul{ display:flex; list-style:none; gap:42px; } nav a{ color:white; font-weight:600; letter-spacing:1px; position:relative; } nav a::after{ content:""; position:absolute; left:0; bottom:-7px; width:0%; height:2px; background:var(--gold); transition:.35s; } nav a:hover{ color:var(--gold); } nav a:hover::after{ width:100%; } /* ========================================================== HERO ========================================================== */ .hero{ min-height:100vh; min-height:100dvh; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:80px; position:relative; padding-top:120px; padding-bottom:80px; } .hero-bg{ position:absolute; inset:0; background: radial-gradient(circle at 70% 30%, rgba(248,180,0,.18), transparent 55%), radial-gradient(circle at 20% 80%, rgba(248,180,0,.08), transparent 60%); filter:blur(20px); z-index:-1; } .hero-left{ position:relative; display:flex; justify-content:center; align-items:center; } .brush-ring{ position:absolute; inset:0; margin:auto; width:620px; height:auto; opacity:.95; animation:ringRotate 28s linear infinite; filter: drop-shadow(0 0 25px rgba(248,180,0,.45)) drop-shadow(0 0 80px rgba(248,180,0,.25)); } .hero-image{ width:520px; max-width:100%; position:relative; z-index:2; filter: brightness(.82) contrast(1.08) drop-shadow(0 35px 80px rgba(0,0,0,.6)); animation:heroFloat 6s ease-in-out infinite; } .hero-left::before{ content:""; position:absolute; inset:0; margin:auto; width:460px; height:460px; border-radius:50%; background: radial-gradient(circle, rgba(248,180,0,.28), rgba(248,180,0,.05), transparent 70%); filter:blur(40px); animation:pulseGlow 5s ease-in-out infinite; } .hero-right{ display:flex; flex-direction:column; justify-content:center; align-items:flex-start; } .thanks{ color:var(--gold); font-size:18px; letter-spacing:6px; margin-bottom:10px; text-transform:uppercase; } .hero h1{ font-size:clamp(58px,9vw,120px); line-height:.9; font-weight:800; text-transform:uppercase; color:white; text-shadow: 0 0 30px rgba(248,180,0,.18); } .subtitle{ margin-top:24px; font-size:18px; color:#cfcfcf; max-width:520px; line-height:1.7; } .hero h2{ margin-top:34px; font-size:34px; color:var(--gold); letter-spacing:2px; } .hero span{ margin-top:10px; color:#8f8f8f; letter-spacing:2px; font-size:14px; } /* ========================================================== WATCH BUTTON ========================================================== */ .hero-buttons{ margin-top:42px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; } .watch-btn{ display:inline-flex; align-items:center; gap:15px; padding:18px 38px; background:linear-gradient( 135deg, var(--gold), #ffcb37); color:#111; border-radius:999px; font-weight:700; overflow:hidden; position:relative; transition:var(--transition); box-shadow: 0 0 25px rgba(248,180,0,.35); } .watch-btn i{ font-size:20px; } .watch-btn:hover{ transform:translateY(-6px) scale(1.03); box-shadow: 0 0 40px rgba(248,180,0,.55), 0 15px 45px rgba(248,180,0,.18); } .watch-btn::before{ content:""; position:absolute; top:0; left:-120%; width:60%; height:100%; background: linear-gradient( 90deg, transparent, rgba(255,255,255,.55), transparent); transform:skewX(-25deg); } .watch-btn:hover::before{ animation:shine 1s; } /* ========================================================== SCROLL INDICATOR ========================================================== */ .hero::after{ content:""; position:absolute; bottom:25px; left:50%; transform:translateX(-50%); width:2px; height:70px; background: linear-gradient( transparent, var(--gold), transparent); animation:scrollLine 2s infinite; opacity:.7; } /* ========================================================== GLOW DECORATION ========================================================== */ .hero-right::before{ content:""; position:absolute; right:-150px; top:120px; width:240px; height:240px; border-radius:50%; background: radial-gradient(circle, rgba(248,180,0,.25), transparent 70%); filter:blur(55px); pointer-events:none; } /* ========================================================== PAPER TEAR ========================================================== */ .hero::before{ content:""; position:absolute; left:0; bottom:-2px; width:100%; height:110px; background:url("assets/torn-bottom.png"); background-size:cover; background-repeat:no-repeat; pointer-events:none; opacity:.85; } /* ========================================================== BENTO SECTION ========================================================== */ .bento{ margin-top:120px; margin-bottom:120px; display:grid; grid-template-columns: repeat(3,1fr); gap:30px; position:relative; } .card{ position:relative; background: linear-gradient( 180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)); border:1px solid var(--border); border-radius:28px; padding:34px; overflow:hidden; transition:.35s ease; -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); } .card::before{ content:""; position:absolute; inset:0; background: radial-gradient(circle at top right, rgba(248,180,0,.18), transparent 55%); opacity:0; transition:.35s; } .card:hover{ transform: translateY(-10px); border-color: rgba(248,180,0,.35); box-shadow: 0 0 30px rgba(248,180,0,.12), 0 20px 60px rgba(0,0,0,.45); } .card:hover::before{ opacity:1; } .card h3{ display:flex; align-items:center; gap:12px; color:var(--gold); font-size:22px; margin-bottom:26px; } .card h3 i{ font-size:20px; } /* ========================================================== PARTNERS ========================================================== */ .card a{ display:flex; align-items:center; justify-content:space-between; gap:15px; padding:16px 18px; margin-bottom:14px; border-radius:18px; background: rgba(255,255,255,.02); border:1px solid transparent; transition:.3s; position:relative; overflow:hidden; } .card a::before{ content:""; position:absolute; inset:0; background: linear-gradient( 90deg, transparent, rgba(248,180,0,.12), transparent); transform:translateX(-120%); } .card a:hover::before{ transform:translateX(120%); transition:.8s; } .card a:hover{ border-color: rgba(248,180,0,.4); background: rgba(248,180,0,.08); transform:translateX(6px); } .card a img{ width:24px; height:24px; border-radius:50%; } .card a span{ flex:1; margin-left:10px; font-weight:600; } .card a i:last-child{ color:var(--gold); transition:.3s; } .card a:hover i:last-child{ transform:translateX(6px); } /* ========================================================== SOCIAL ========================================================== */ .card .fab, .card .fa-play{ width:22px; text-align:center; color:var(--gold); font-size:18px; } /* ========================================================== CONTACT ========================================================== */ .mail{ display:flex; align-items:center; gap:10px; margin-bottom:18px; } .mail input{ flex:1; background:#0c0c0c; border:1px solid rgba(255,255,255,.08); color:white; padding:15px; border-radius:14px; outline:none; -webkit-appearance:none; -moz-appearance:none; appearance:none; font-family:inherit; font-size:15px; } .copy{ padding:15px 22px; border:none; border-radius:14px; cursor:pointer; background:var(--gold); color:#111; font-weight:700; font-family:inherit; font-size:14px; -webkit-appearance:none; -moz-appearance:none; appearance:none; transition:.3s; position:relative; overflow:hidden; } .copy:hover{ transform:translateY(-3px); box-shadow: 0 0 25px rgba(248,180,0,.4); } .copy::after{ content:""; position:absolute; width:0; height:0; left:50%; top:50%; background: rgba(255,255,255,.4); border-radius:50%; transform:translate(-50%,-50%); } .copy:active::after{ width:260px; height:260px; transition:.45s; opacity:0; } /* ========================================================== REVEAL ========================================================== */ .reveal{ opacity:0; transform: translateY(50px); transition: opacity .9s, transform .9s; } .reveal.active{ opacity:1; transform: translateY(0); } /* ========================================================== GEAR SECTION ========================================================== */ .gear{ display:grid; grid-template-columns:1fr 1fr; gap:35px; margin-bottom:140px; position:relative; } .gear-column{ background: linear-gradient( 180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)); border:1px solid var(--border); border-radius:30px; padding:40px; position:relative; overflow:hidden; transition:.35s; } .gear-column::before{ content:""; position:absolute; top:-150px; right:-150px; width:280px; height:280px; border-radius:50%; background: radial-gradient(circle, rgba(248,180,0,.15), transparent 70%); opacity:0; transition:.4s; } .gear-column:hover{ transform:translateY(-8px); border-color: rgba(248,180,0,.28); box-shadow: 0 0 40px rgba(248,180,0,.12), 0 20px 60px rgba(0,0,0,.4); } .gear-column:hover::before{ opacity:1; } .gear-column h2{ color:var(--gold); font-size:34px; margin-bottom:28px; letter-spacing:2px; } .gear-column ul{ list-style:none; } .gear-column li{ display:flex; align-items:center; gap:16px; padding:16px 0; border-bottom: 1px solid rgba(255,255,255,.05); transition:.25s; font-weight:500; } .gear-column li:last-child{ border-bottom:none; } .gear-column li:hover{ transform:translateX(10px); color:white; } .gear-column li i{ color:var(--gold); width:24px; text-align:center; font-size:18px; } /* ========================================================== SECTION DECORATIONS ========================================================== */ .gear::before{ content:""; position:absolute; top:-80px; left:50%; transform:translateX(-50%); width:600px; height:250px; background: radial-gradient(circle, rgba(248,180,0,.12), transparent 70%); filter:blur(45px); pointer-events:none; } .gear::after{ content:""; position:absolute; bottom:-120px; left:0; width:100%; height:110px; background:url("assets/torn-bottom.png"); background-size:cover; background-repeat:no-repeat; opacity:.85; pointer-events:none; } /* ========================================================== TWITCH WIDGET ========================================================== */ #twitch-widget{ position:fixed; right:24px; bottom:24px; width:380px; background: rgba(12,12,12,.95); border: 1px solid rgba(248,180,0,.2); border-radius:22px; overflow:hidden; -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); z-index:999; box-shadow: 0 0 30px rgba(248,180,0,.12), 0 20px 60px rgba(0,0,0,.45); transition:.35s; } #twitch-widget.minimized{ height:58px; } .widget-header{ display:flex; align-items:center; justify-content:space-between; padding:16px 18px; background: linear-gradient( 90deg, rgba(248,180,0,.18), rgba(248,180,0,.05)); border-bottom: 1px solid rgba(255,255,255,.05); } .widget-header span{ font-size:14px; font-weight:700; letter-spacing:1px; color:var(--gold); } .widget-header button{ width:34px; height:34px; border:none; border-radius:10px; cursor:pointer; background: rgba(255,255,255,.06); color:white; font-size:20px; font-family:inherit; -webkit-appearance:none; -moz-appearance:none; appearance:none; transition:.25s; } .widget-header button:hover{ background: rgba(248,180,0,.18); color:var(--gold); } #twitch-widget iframe{ width:100%; height:220px; border:none; display:block; } /* ========================================================== LIVE STATUS ========================================================== */ .live-section{ width:min(1400px,92%); margin:0 auto 120px; } .live-box{ position:relative; display:flex; justify-content:space-between; align-items:center; padding:34px 40px; border-radius:28px; overflow:hidden; background: linear-gradient( 135deg, rgba(255,255,255,.03), rgba(255,255,255,.015) ); border:1px solid var(--border); transition:.35s; } .live-box::before{ content:""; position:absolute; inset:0; background: radial-gradient(circle at right, rgba(248,180,0,.15), transparent 60%); opacity:0; transition:.35s; } .live-box:hover{ transform:translateY(-8px); border-color:rgba(248,180,0,.35); box-shadow: 0 0 40px rgba(248,180,0,.15), 0 20px 60px rgba(0,0,0,.4); } .live-box:hover::before{ opacity:1; } .live-left{ display:flex; flex-direction:column; gap:8px; } .live-left h2{ font-size:34px; color:white; } .live-left p{ color:#9f9f9f; } .live-status{ display:flex; align-items:center; gap:14px; font-size:18px; font-weight:700; } .live-dot{ width:14px; height:14px; border-radius:50%; background:#ff3434; box-shadow: 0 0 12px red, 0 0 25px red; animation:livePulse 1.5s infinite; } .live-offline .live-dot{ background:#777; box-shadow:none; } .live-button{ display:flex; align-items:center; gap:12px; padding:18px 34px; border-radius:999px; background:var(--gold); color:#111; font-weight:700; transition:.3s; } .live-button:hover{ transform:scale(1.05); box-shadow: 0 0 35px rgba(248,180,0,.4); } /* ========================================================== BACK TO TOP ========================================================== */ #top{ position:fixed; right:30px; bottom:280px; width:58px; height:58px; border:none; border-radius:50%; background:var(--gold); color:#111; cursor:pointer; font-size:20px; -webkit-appearance:none; -moz-appearance:none; appearance:none; display:flex; align-items:center; justify-content:center; box-shadow: 0 0 25px rgba(248,180,0,.35); transition:.3s; opacity:0; pointer-events:none; z-index:998; } #top.show{ opacity:1; pointer-events:auto; } #top:hover{ transform: translateY(-6px) rotate(360deg); } /* ========================================================== FOOTER ========================================================== */ footer{ margin-top:120px; padding:50px 20px; text-align:center; color:#888; border-top: 1px solid rgba(255,255,255,.05); position:relative; } footer::before{ content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); width:320px; height:2px; background: linear-gradient( transparent, var(--gold), transparent); } /* ========================================================== SCROLLBAR ========================================================== */ html{ scrollbar-width:thin; scrollbar-color:var(--gold) #080808; } ::-webkit-scrollbar{ width:12px; } ::-webkit-scrollbar-track{ background:#080808; } ::-webkit-scrollbar-thumb{ background: linear-gradient( var(--gold), #e29f00); border-radius:999px; } ::-webkit-scrollbar-thumb:hover{ background:#ffd04c; } /* ========================================================== SELECTION ========================================================== */ ::selection{ background:var(--gold); color:#111; } /* ========================================================== GLOBAL GLOW ========================================================== */ .glow{ position:absolute; width:500px; height:500px; border-radius:50%; background: radial-gradient(circle, rgba(248,180,0,.18), transparent 70%); filter:blur(60px); pointer-events:none; z-index:-1; } .gold-line{ width:100%; height:1px; background: linear-gradient( transparent, rgba(248,180,0,.5), transparent); margin:70px 0; } /* ========================================================== LIVE ANIMATION ========================================================== */ @keyframes livePulse{ 0%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.45); opacity:.55; } 100%{ transform:scale(1); opacity:1; } } /* ========================================================== ANIMATIONS ========================================================== */ @keyframes heroFloat{ 0%{ transform: translateY(0px); } 25%{ transform: translateY(-10px); } 50%{ transform: translateY(-20px); } 75%{ transform: translateY(-10px); } 100%{ transform: translateY(0px); } } /* ---------------------------------------------------------- */ @keyframes ringRotate{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } } /* ---------------------------------------------------------- */ @keyframes pulseGlow{ 0%{ transform:scale(1); opacity:.5; } 50%{ transform:scale(1.08); opacity:1; } 100%{ transform:scale(1); opacity:.5; } } /* ---------------------------------------------------------- */ @keyframes shine{ from{ left:-120%; } to{ left:160%; } } /* ---------------------------------------------------------- */ @keyframes scrollLine{ 0%{ opacity:0; transform: translateX(-50%) translateY(-15px); } 50%{ opacity:1; } 100%{ opacity:0; transform: translateX(-50%) translateY(25px); } } /* ---------------------------------------------------------- */ @keyframes fadeUp{ from{ opacity:0; transform: translateY(50px); } to{ opacity:1; transform: translateY(0); } } /* ---------------------------------------------------------- */ @keyframes fadeLeft{ from{ opacity:0; transform: translateX(-60px); } to{ opacity:1; transform: translateX(0); } } /* ---------------------------------------------------------- */ @keyframes fadeRight{ from{ opacity:0; transform: translateX(60px); } to{ opacity:1; transform: translateX(0); } } /* ---------------------------------------------------------- */ @keyframes zoomIn{ from{ opacity:0; transform:scale(.9); } to{ opacity:1; transform:scale(1); } } /* ========================================================== FLOATING ELEMENTS ========================================================== */ .float{ animation: floating 5s ease-in-out infinite; } .float-slow{ animation: floating 8s ease-in-out infinite; } .float-fast{ animation: floating 3s ease-in-out infinite; } @keyframes floating{ 0%{ transform:translateY(0px); } 50%{ transform:translateY(-14px); } 100%{ transform:translateY(0px); } } /* ========================================================== GLOW PULSE ========================================================== */ .glow-pulse{ animation: glowPulse 2.5s infinite; } @keyframes glowPulse{ 0%{ box-shadow: 0 0 12px rgba(248,180,0,.25); } 50%{ box-shadow: 0 0 40px rgba(248,180,0,.5), 0 0 80px rgba(248,180,0,.25); } 100%{ box-shadow: 0 0 12px rgba(248,180,0,.25); } } /* ========================================================== BUTTON RIPPLE ========================================================== */ .ripple{ position:relative; overflow:hidden; } .ripple span{ position:absolute; border-radius:50%; transform:scale(0); background: rgba(255,255,255,.35); animation: ripple .7s linear; } @keyframes ripple{ to{ transform:scale(4); opacity:0; } } /* ========================================================== CARD HOVER ========================================================== */ .hover-glow{ transition:.35s; } .hover-glow:hover{ transform: translateY(-8px) scale(1.02); box-shadow: 0 0 35px rgba(248,180,0,.18), 0 20px 60px rgba(0,0,0,.4); } /* ========================================================== GRADIENT TEXT ========================================================== */ .gold-text{ background: linear-gradient( 90deg, #ffe28d, var(--gold), #ffdb67, var(--gold)); background-size:300%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; animation: goldMove 6s linear infinite; } @keyframes goldMove{ from{ background-position:0%; } to{ background-position:300%; } } /* ========================================================== MOUSE LIGHT ========================================================== */ #mouse-light{ position:fixed; width:700px; height:700px; border-radius:50%; pointer-events:none; z-index:-1; transform:translate(-50%,-50%); background: radial-gradient(circle, rgba(248,180,0,.18), rgba(248,180,0,.08), transparent 70%); filter:blur(45px); transition: transform .05s linear; } /* ========================================================== PARTICLES ========================================================== */ .particle{ position:fixed; width:4px; height:4px; border-radius:50%; background:var(--gold); pointer-events:none; box-shadow: 0 0 8px rgba(248,180,0,.8), 0 0 18px rgba(248,180,0,.5); animation: particleFloat linear forwards; } @keyframes particleFloat{ 0%{ transform: translateY(0) scale(0); opacity:0; } 10%{ opacity:1; transform: scale(1); } 100%{ transform: translateY(-250px) translateX(60px) scale(0); opacity:0; } } /* ========================================================== GOLD SPARKS ========================================================== */ .spark{ position:absolute; width:2px; height:2px; background:#ffd65e; border-radius:50%; box-shadow: 0 0 10px #ffd65e, 0 0 25px var(--gold); animation: sparkle 4s linear infinite; } @keyframes sparkle{ from{ transform: translateY(0) scale(0); opacity:0; } 15%{ opacity:1; transform:scale(1); } 100%{ transform: translateY(-220px) translateX(50px) scale(0); opacity:0; } } /* ========================================================== SMOKE LAYERS ========================================================== */ .smoke-layer{ position:fixed; inset:-20%; pointer-events:none; z-index:-2; opacity:.18; filter:blur(60px); mix-blend-mode:screen; animation: smokeMove 35s linear infinite; } .smoke-layer:nth-child(2){ animation-duration:50s; animation-direction:reverse; } .smoke-layer:nth-child(3){ animation-duration:70s; } @keyframes smokeMove{ 0%{ transform: translateX(-5%) translateY(0) rotate(0deg); } 50%{ transform: translateX(5%) translateY(-4%) rotate(4deg); } 100%{ transform: translateX(-5%) translateY(0) rotate(0deg); } } /* ========================================================== ANIMATED GOLD BORDER ========================================================== */ .gold-border{ position:relative; overflow:hidden; } .gold-border::after{ content:""; position:absolute; inset:-2px; border-radius:inherit; padding:2px; background: linear-gradient( 90deg, transparent, var(--gold), #ffe28b, var(--gold), transparent); background-size:300%; animation: borderMove 5s linear infinite; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; } @keyframes borderMove{ from{ background-position:0%; } to{ background-position:300%; } } /* ========================================================== GLASS ========================================================== */ .glass{ background: rgba(255,255,255,.04); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); border: 1px solid rgba(255,255,255,.08); } /* ========================================================== BACKGROUND GRADIENT ========================================================== */ .animated-gradient{ background: linear-gradient( 135deg, rgba(248,180,0,.08), transparent, rgba(248,180,0,.04), transparent); background-size:400%; animation: gradientMove 15s ease infinite; } @keyframes gradientMove{ 0%{ background-position:0%; } 50%{ background-position:100%; } 100%{ background-position:0%; } } /* ========================================================== IMAGE HOVER ========================================================== */ img{ transition: transform .35s, filter .35s; } img:hover{ transform:scale(1.02); } /* ========================================================== LINKS ========================================================== */ a{ transition: color .3s, transform .3s; } a:hover{ color:var(--gold); } /* ========================================================== SMOOTH SHADOW ========================================================== */ .soft-shadow{ box-shadow: 0 15px 45px rgba(0,0,0,.4); } /* ========================================================== PARTNER / SOCIAL LINK TEXT (link-info) ========================================================== */ .card a strong{ display:block; color:white; font-size:15px; font-weight:600; margin-bottom:2px; } .card a small{ display:block; color:var(--gold); font-size:12px; font-weight:400; opacity:.85; } /* Brand colors for social links */ .card a:has(.fa-twitch){ border-color:rgba(145,71,255,.35); } .card a:has(.fa-twitch):hover{ background:rgba(145,71,255,.1); border-color:rgba(145,71,255,.55); } .card a:has(.fa-twitch) .fa-twitch{ color:#9147ff; } .card a:has(.fa-youtube){ border-color:rgba(255,0,0,.3); } .card a:has(.fa-youtube):hover{ background:rgba(255,0,0,.08); border-color:rgba(255,0,0,.5); } .card a:has(.fa-youtube) .fa-youtube{ color:#ff0000; } .card a:has(.fa-tiktok){ border-color:rgba(0,242,234,.3); } .card a:has(.fa-tiktok):hover{ background:rgba(0,242,234,.08); border-color:rgba(0,242,234,.5); } .card a:has(.fa-tiktok) .fa-tiktok{ color:#00f2ea; } .card a:has(.fa-play){ border-color:rgba(83,213,55,.3); } .card a:has(.fa-play):hover{ background:rgba(83,213,55,.08); border-color:rgba(83,213,55,.5); } .card a:has(.fa-play) .fa-play{ color:#53d537; } .card a:has(.fa-instagram){ border-color:rgba(225,48,108,.3); } .card a:has(.fa-instagram):hover{ background:rgba(225,48,108,.08); border-color:rgba(225,48,108,.5); } .card a:has(.fa-instagram) .fa-instagram{ color:#e1306c; } /* ========================================================== GEAR LIST LABEL / SEPARATOR / VALUE ========================================================== */ .gear-column li{ flex-wrap:wrap; } .g-label{ color:#c9c9c9; font-weight:500; } .g-sep{ color:#555; margin:0 -4px 0 -8px; } .g-value{ color:var(--gold); font-weight:600; } /* ========================================================== NAV ACTIVE LINK ========================================================== */ nav a.active{ color:var(--gold); } nav a.active::after{ width:100%; } /* ========================================================== AGE DISCLAIMER ========================================================== */ .disclaimer{ display:flex; align-items:center; gap:24px; margin-bottom:100px; padding:28px 34px; border-radius:24px; background: linear-gradient( 180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)); border:1px solid var(--border); } .badge{ flex-shrink:0; width:56px; height:56px; border-radius:50%; border:2px solid var(--gold); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:16px; color:var(--gold); } .disclaimer p{ color:#a0a0a0; font-size:15px; line-height:1.6; } .disclaimer p strong{ display:block; color:var(--gold); margin-top:4px; } /* ========================================================== CONTACT EXTRAS ========================================================== */ .contact-label{ color:#9f9f9f; font-size:14px; margin-bottom:16px; } .copy-hint{ margin-top:6px; font-size:12px; color:#777; display:flex; align-items:center; gap:6px; } .copy-hint i{ color:var(--gold); font-size:11px; } /* ========================================================== TWITCH WIDGET EXTRAS ========================================================== */ .header-left{ display:flex; flex-direction:column; gap:3px; } .open-link{ font-size:11px; color:#9f9f9f; font-weight:500; letter-spacing:0; display:inline-flex; align-items:center; gap:5px; } .open-link:hover{ color:var(--gold); } .twitch-frame-wrap{ position:relative; } .widget-live-badge{ position:absolute; top:12px; left:12px; z-index:2; display:flex; align-items:center; gap:6px; background:rgba(0,0,0,.65); padding:5px 10px; border-radius:999px; font-size:11px; font-weight:700; letter-spacing:.5px; color:white; } .dot{ width:8px; height:8px; border-radius:50%; background:#ff3434; box-shadow:0 0 8px red; animation:livePulse 1.5s infinite; } /* ========================================================== FOOTER LAYOUT ========================================================== */ footer{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; text-align:left; } .footer-year{ color:#888; font-size:14px; } .made-with{ color:#888; font-size:14px; display:flex; align-items:center; gap:6px; } .made-with i{ color:var(--gold); } /* ========================================================== RESPONSIVE ========================================================== */ @media (max-width:1400px){ .hero{ gap:40px; } .hero-image{ width:450px; } .brush-ring{ width:520px; } } /* ---------------------------------------------------------- */ @media (max-width:1200px){ .hero{ grid-template-columns:1fr; text-align:center; gap:70px; } .hero-left{ order:1; } .hero-right{ order:2; align-items:center; } .hero-right::before{ display:none; } .bento{ grid-template-columns: repeat(2,1fr); } .gear{ grid-template-columns:1fr; } } /* ---------------------------------------------------------- */ @media (max-width:900px){ nav{ height:75px; } nav ul{ gap:22px; } nav a{ font-size:14px; } .hero{ padding-top:140px; } .hero h1{ font-size:74px; } .hero h2{ font-size:28px; } .hero-image{ width:360px; } .brush-ring{ width:430px; } .bento{ gap:20px; } .card{ padding:28px; } #twitch-widget{ width:320px; } } /* ---------------------------------------------------------- */ @media (max-width:768px){ nav{ justify-content:center; } nav ul{ display:none; } .logo img{ width:50px; } .hero{ min-height:auto; padding-bottom:80px; } .hero-image{ width:320px; } .brush-ring{ width:380px; } .hero h1{ font-size:58px; } .subtitle{ font-size:16px; } .hero-buttons{ width:100%; flex-direction:column; } .watch-btn{ width:100%; justify-content:center; } .bento{ grid-template-columns:1fr; } .card{ border-radius:24px; } .gear-column{ padding:30px; } .gear-column h2{ font-size:28px; } .live-box{ flex-direction:column; gap:30px; text-align:center; } .live-button{ width:100%; justify-content:center; } #twitch-widget{ right:15px; left:15px; width:auto; } #top{ right:18px; bottom:160px; } } /* ---------------------------------------------------------- */ @media (max-width:520px){ .hero{ padding-top:120px; } .hero-image{ width:270px; } .brush-ring{ width:320px; } .hero h1{ font-size:46px; } .hero h2{ font-size:24px; } .thanks{ font-size:15px; letter-spacing:3px; } .subtitle{ font-size:15px; } .hero span{ font-size:12px; line-height:1.8; } .card{ padding:24px; } .card h3{ font-size:20px; } .mail{ flex-direction:column; } .mail input{ width:100%; } .copy{ width:100%; } .gear-column{ padding:24px; } .gear-column li{ font-size:14px; } .live-left h2{ font-size:28px; } .live-button{ padding:16px; } .widget-header{ padding:14px; } #twitch-widget iframe{ height:190px; } footer{ padding:40px 15px; font-size:14px; } } /* ---------------------------------------------------------- */ @media (max-width:380px){ .hero-image{ width:230px; } .brush-ring{ width:280px; } .hero h1{ font-size:38px; } .watch-btn{ padding:16px 22px; font-size:14px; } .card{ padding:20px; } } /* ========================================================== PERFORMANCE ========================================================== */ .hero-image, .brush-ring, .card, .gear-column, .watch-btn, #top, #twitch-widget{ will-change: transform; } canvas{ image-rendering:auto; } html{ scroll-padding-top:100px; } body.loading{ overflow:hidden; } body.loaded #loader{ opacity:0; visibility:hidden; pointer-events:none; } .hidden{ display:none !important; }