{} *{} {}/*endBaseStyles*/ #IE-warning { display: none; position: fixed; width: 100%; height: 100%; z-index: 9999; background: white; } .IE-warning-message { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --bg: #0a0a12; --neon-pink: #ff2d78; --neon-cyan: #00f5ff; --neon-yellow: #ffe600; --neon-purple: #b44dff; --dim: rgba(255,255,255,0.07); --text: #f0eeff; --muted: rgba(240,238,255,0.45); } body { background: var(--bg); color: var(--text); font-family: 'Exo 2', sans-serif; overflow-x: hidden; } /* scanline overlay */ body::before { content: ''; position: fixed; inset: 0; background: repeating-linear-gradient( 0deg, transparent, transparent 3px, rgba(0,0,0,0.08) 3px, rgba(0,0,0,0.08) 4px ); pointer-events: none; z-index: 200; } /* grid floor */ .grid-floor { position: fixed; bottom: 0; left: 0; right: 0; height: 280px; background: linear-gradient(rgba(0,245,255,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(0,245,255,0.06) 1px, transparent 1px); background-size: 60px 60px; transform: perspective(400px) rotateX(60deg); transform-origin: bottom center; pointer-events: none; z-index: 0; } /* ── TOP BAR ── */ .top-bar { background: rgba(0,0,0,0.6); border-bottom: 1px solid rgba(0,245,255,0.2); padding: 8px 2rem; display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 10; } .top-bar-left { font-family: 'Orbitron', monospace; font-size: 10px; color: var(--neon-cyan); letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.7; } .top-bar-right { font-family: 'Orbitron', monospace; font-size: 10px; color: var(--neon-pink); letter-spacing: 0.15em; opacity: 0.7; } /* ── HERO ── */ .hero { min-height: 94vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 4rem 2rem 6rem; position: relative; z-index: 2; } .hero-badge { font-family: 'Orbitron', monospace; font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--neon-yellow); border: 1px solid rgba(255,230,0,0.35); padding: 6px 20px; margin-bottom: 2.5rem; display: inline-block; background: rgba(255,230,0,0.05); } .hero-title { font-family: 'Orbitron', monospace; font-weight: 900; font-size: clamp(60px, 14vw, 148px); line-height: 0.9; letter-spacing: -0.02em; margin-bottom: 1.5rem; position: relative; } .title-kc { display: block; color: var(--neon-cyan); text-shadow: 0 0 20px rgba(0,245,255,0.6), 0 0 60px rgba(0,245,255,0.25), 3px 3px 0 rgba(0,245,255,0.15); } .title-nerd { display: block; color: var(--neon-pink); text-shadow: 0 0 20px rgba(255,45,120,0.7), 0 0 60px rgba(255,45,120,0.3), 3px 3px 0 rgba(255,45,120,0.15); position: relative; left: clamp(10px, 3vw, 40px); } .title-fest { display: block; color: var(--neon-yellow); text-shadow: 0 0 20px rgba(255,230,0,0.7), 0 0 60px rgba(255,230,0,0.3), 3px 3px 0 rgba(255,230,0,0.15); position: relative; left: clamp(20px, 6vw, 80px); } .hero-sub { font-family: 'Exo 2', sans-serif; font-size: clamp(14px, 2.5vw, 19px); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin-bottom: 2.5rem; } .hero-chips { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 2.5rem; } .chip { font-family: 'Orbitron', monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; padding: 7px 16px; border: 1px solid; } .chip-cyan { color: var(--neon-cyan); border-color: rgba(0,245,255,0.4); background: rgba(0,245,255,0.06); } .chip-pink { color: var(--neon-pink); border-color: rgba(255,45,120,0.4); background: rgba(255,45,120,0.06); } .chip-yellow { color: var(--neon-yellow); border-color: rgba(255,230,0,0.4); background: rgba(255,230,0,0.06); } .chip-purple { color: var(--neon-purple); border-color: rgba(180,77,255,0.4); background: rgba(180,77,255,0.06); } .hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; } .btn-neon { font-family: 'Orbitron', monospace; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 13px 30px; text-decoration: none; display: inline-block; transition: all 0.2s; position: relative; } .btn-neon-cyan { color: var(--bg); background: var(--neon-cyan); box-shadow: 0 0 24px rgba(0,245,255,0.45), 0 0 60px rgba(0,245,255,0.15); } .btn-neon-cyan:hover { box-shadow: 0 0 40px rgba(0,245,255,0.7), 0 0 80px rgba(0,245,255,0.3); } .btn-neon-outline { color: var(--neon-pink); background: transparent; border: 2px solid var(--neon-pink); box-shadow: 0 0 16px rgba(255,45,120,0.2); } .btn-neon-outline:hover { background: rgba(255,45,120,0.1); box-shadow: 0 0 30px rgba(255,45,120,0.4); } /* ── TICKER ── */ .ticker-wrap { background: var(--neon-pink); padding: 10px 0; overflow: hidden; white-space: nowrap; border-top: 1px solid rgba(255,45,120,0.5); border-bottom: 1px solid rgba(255,45,120,0.5); position: relative; z-index: 5; } .ticker-inner { display: inline-block; animation: scroll 30s linear infinite; font-family: 'Orbitron', monospace; font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bg); } @keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* ── CONTENT ── */ .content { max-width: 900px; margin: 0 auto; padding: 0 2rem; position: relative; z-index: 5; } /* section header */ .s-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem; } .s-head-label { font-family: 'Orbitron', monospace; font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--neon-cyan); white-space: nowrap; } .s-head-rule { flex: 1; height: 1px; background: rgba(0,245,255,0.18); } /* ── DETAILS GRID ── */ .details { padding: 3.5rem 0 3rem; border-bottom: 1px solid var(--dim); } .details-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: rgba(0,245,255,0.1); border: 1px solid rgba(0,245,255,0.15); } .detail-item { background: var(--bg); padding: 1.25rem 1.5rem; } .d-label { font-family: 'Orbitron', monospace; font-size: 9px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--neon-cyan); opacity: 0.6; margin-bottom: 6px; } .d-value { font-family: 'Exo 2', sans-serif; font-size: 17px; font-weight: 800; color: var(--text); line-height: 1.2; } /* ── WHAT'S ON ── */ .whats-on { padding: 3.5rem 0 3rem; border-bottom: 1px solid var(--dim); } .on-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--dim); } @media (max-width: 580px) { .on-grid { grid-template-columns: 1fr 1fr; } } .on-item { background: var(--bg); padding: 1.5rem 1.25rem; border: 1px solid transparent; transition: border-color 0.2s; position: relative; overflow: hidden; } .on-item::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; } .on-item:nth-child(1)::after { background: var(--neon-cyan); } .on-item:nth-child(2)::after { background: var(--neon-pink); } .on-item:nth-child(3)::after { background: var(--neon-yellow); } .on-item:nth-child(4)::after { background: var(--neon-purple); } .on-item:nth-child(5)::after { background: var(--neon-cyan); } .on-item:nth-child(6)::after { background: var(--neon-pink); } .on-icon { font-size: 26px; margin-bottom: 10px; display: block; } .on-name { font-family: 'Exo 2', sans-serif; font-size: 15px; font-weight: 800; color: var(--text); margin-bottom: 5px; letter-spacing: 0.04em; } .on-desc { font-size: 13px; color: var(--muted); line-height: 1.5; } /* ── MISSION ── */ .mission { padding: 3.5rem 0 3rem; border-bottom: 1px solid var(--dim); display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; } @media (max-width: 580px) { .mission { grid-template-columns: 1fr; } } .mission-card { border: 1px solid; padding: 2rem; position: relative; overflow: hidden; } .mission-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; } .m-cyan { border-color: rgba(0,245,255,0.2); } .m-cyan::before { background: var(--neon-cyan); box-shadow: 0 0 12px rgba(0,245,255,0.6); } .m-pink { border-color: rgba(255,45,120,0.2); } .m-pink::before { background: var(--neon-pink); box-shadow: 0 0 12px rgba(255,45,120,0.6); } .m-num { font-family: 'Orbitron', monospace; font-size: 11px; letter-spacing: 0.2em; margin-bottom: 0.75rem; } .m-cyan .m-num { color: var(--neon-cyan); } .m-pink .m-num { color: var(--neon-pink); } .m-title { font-family: 'Exo 2', sans-serif; font-size: 22px; font-weight: 800; color: var(--text); margin-bottom: 0.75rem; line-height: 1.2; } .m-body { font-size: 14px; color: var(--muted); line-height: 1.7; } /* ── CTA ── */ .cta-section { padding: 5rem 0 6rem; text-align: center; position: relative; } .cta-section::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(180,77,255,0.06), transparent); pointer-events: none; } .cta-label { font-family: 'Orbitron', monospace; font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--neon-purple); margin-bottom: 1.25rem; opacity: 0.75; } .cta-title { font-family: 'Orbitron', monospace; font-weight: 900; font-size: clamp(38px, 8vw, 82px); line-height: 1; letter-spacing: -0.01em; margin-bottom: 0.75rem; } .cta-title .c1 { color: var(--neon-cyan); text-shadow: 0 0 30px rgba(0,245,255,0.4); } .cta-title .c2 { color: var(--text); } .cta-title .c3 { color: var(--neon-pink); text-shadow: 0 0 30px rgba(255,45,120,0.4); } .cta-detail { font-family: 'Orbitron', monospace; font-size: 12px; letter-spacing: 0.15em; color: var(--muted); margin-bottom: 2.5rem; } .cta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } /* ── FOOTER ── */ .footer-band { background: rgba(0,0,0,0.5); border-top: 1px solid var(--dim); padding: 1.25rem 2rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; position: relative; z-index: 5; } .footer-sponsors { font-size: 13px; color: rgba(240,238,255,0.35); } .footer-sponsors strong { color: rgba(240,238,255,0.55); font-weight: 600; } .footer-org { font-family: 'Orbitron', monospace; font-size: 9px; letter-spacing: 0.15em; color: rgba(240,238,255,0.2); text-align: right; } .footer-org a { color: var(--neon-cyan); text-decoration: none; opacity: 0.5; }