/* ================================================================ LILSLAP.COM — main.css Shared structure & components across all pages. 👉 All colours, fonts and sizes live in css/theme.css — edit that file to re-skin the site. This file only uses the variables. theme.css must be linked BEFORE main.css on every page. ================================================================ */ /* ---------------------------------------------------------------- RESET ---------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; } body { background: var(--bg); color: var(--text); font-family: var(--font-body); line-height: 1.7; overflow-x: hidden; min-height: 100vh; } img, video { max-width: 100%; border-radius: var(--radius); display: block; } a { color: var(--blue-soft); text-decoration: none; transition: color .2s; } a:hover { color: var(--pink-soft); } ::selection { background: var(--blue); color: #fff; } /* ---------------------------------------------------------------- NOISE OVERLAY ---------------------------------------------------------------- */ body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9000; opacity: .025; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"); background-repeat: repeat; } /* ---------------------------------------------------------------- SCROLLBAR ---------------------------------------------------------------- */ ::-webkit-scrollbar { width: 5px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: var(--blue-dark); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--blue); } /* ---------------------------------------------------------------- TICKER BANNER Add

just inside before

on each page. ticker.html in root contains the quote items. TO ADD A QUOTE: edit ticker.html only — updates all pages. ---------------------------------------------------------------- */ .ticker-wrap { position: fixed; top: 0; left: 0; right: 0; height: var(--ticker-h); z-index: 600; background: linear-gradient(135deg, #831843, #ec4899, #831843); border-bottom: 1px solid rgba(255,255,255,.12); overflow: hidden; white-space: nowrap; } .ticker-wrap::before, .ticker-wrap::after { content: ''; position: absolute; top: 0; bottom: 0; width: 60px; z-index: 2; pointer-events: none; } .ticker-wrap::before { left: 0; background: linear-gradient(90deg, #831843, transparent); } .ticker-wrap::after { right: 0; background: linear-gradient(-90deg, #831843, transparent); } .ticker-track { display: inline-flex; align-items: center; height: 100%; animation: ticker-scroll 50s linear infinite; will-change: transform; } .ticker-track:hover { animation-play-state: paused; } @keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .ticker-half { display: inline-flex; align-items: center; flex-shrink: 0; } .ticker-item { display: inline-flex; align-items: center; gap: .45rem; padding: 0 2rem; font-family: 'DM Sans', sans-serif; font-size: .8rem; font-weight: 400; color: rgba(255,255,255,.95); white-space: nowrap; line-height: 1; } .ticker-item em { font-style: italic; } .ticker-item .ticker-author { font-weight: 700; opacity: .75; font-style: normal; } .ticker-sep { color: rgba(255,255,255,.3); font-size: .65rem; flex-shrink: 0; } /* ---------------------------------------------------------------- NAV Pushed down by ticker height ---------------------------------------------------------------- */ .nav { position: fixed; top: var(--ticker-h); left: 0; right: 0; height: var(--nav-h); z-index: 500; display: flex; align-items: center; justify-content: space-between; padding: 0 2.5rem; background: rgba(7, 9, 15, .85); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); border-bottom: 1px solid var(--border); } .nav-logo { font-family: var(--font-head); font-size: 1.4rem; font-weight: 800; letter-spacing: .01em; background: linear-gradient(135deg, var(--blue-soft) 0%, var(--pink-soft) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-decoration: none; } .nav-links { display: flex; align-items: center; list-style: none; gap: .25rem; } .nav-links a { display: block; padding: .45rem .9rem; font-size: .82rem; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; color: var(--text-faint); border-radius: 7px; transition: color .2s, background .2s; } .nav-links a:hover, .nav-links a.active { color: var(--blue-soft); background: rgba(59, 130, 246, .08); } .nav-links a.active { color: var(--blue-soft); } .nav-right { display: flex; align-items: center; gap: 1rem; } .nav-discord { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem 1.1rem; background: var(--blue); color: #fff !important; border-radius: 8px; font-size: .82rem; font-weight: 600; letter-spacing: .02em; -webkit-text-fill-color: #fff !important; transition: background .2s, transform .15s, box-shadow .2s; box-shadow: 0 2px 20px rgba(26, 78, 216, .35); } .nav-discord:hover { background: var(--blue-mid); transform: translateY(-1px); box-shadow: 0 4px 28px rgba(26, 78, 216, .5); color: #fff !important; -webkit-text-fill-color: #fff !important; } /* Mobile nav hamburger */ .nav-toggle { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: .4rem; } .nav-toggle span { display: block; width: 22px; height: 2px; background: var(--text-dim); border-radius: 2px; transition: transform .3s, opacity .3s; } /* ---------------------------------------------------------------- PAGE WRAPPER Offset for both ticker and nav ---------------------------------------------------------------- */ .page-wrap { padding-top: calc(var(--ticker-h) + var(--nav-h)); min-height: 100vh; } /* ---------------------------------------------------------------- SHARED SECTION HEADER ---------------------------------------------------------------- */ .sec-label { display: inline-flex; align-items: center; gap: .55rem; font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--blue-soft); margin-bottom: .9rem; } .sec-label::before { content: ''; display: block; width: 20px; height: 1px; background: currentColor; opacity: .7; } .sec-label.pink { color: var(--pink-soft); } .sec-label.pink::before { background: var(--pink-soft); } .sec-title { font-family: var(--font-head); font-size: clamp(2.2rem, 4.5vw, 3.5rem); font-weight: 800; letter-spacing: -.005em; line-height: 1.08; color: var(--text); margin-bottom: .75rem; } .sec-desc { font-size: 1rem; color: var(--text-dim); max-width: 520px; line-height: 1.8; margin-bottom: 3rem; } /* ---------------------------------------------------------------- BUTTONS ---------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1.8rem; border-radius: 9px; font-family: var(--font-head); font-weight: 700; font-size: .88rem; letter-spacing: .04em; cursor: pointer; transition: transform .15s, box-shadow .2s, background .2s; text-decoration: none; } .btn:active { transform: scale(.98); } .btn-primary { background: linear-gradient(135deg, var(--blue-dark) 0%, var(--blue-mid) 100%); color: #fff; -webkit-text-fill-color: #fff; box-shadow: 0 2px 28px var(--glow-b); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 36px var(--glow-b); color: #fff; -webkit-text-fill-color: #fff; } .btn-ghost { background: transparent; color: var(--text-dim); border: 1px solid var(--border); -webkit-text-fill-color: var(--text-dim); } .btn-ghost:hover { border-color: var(--pink); color: var(--pink-soft); -webkit-text-fill-color: var(--pink-soft); transform: translateY(-2px); } /* ---------------------------------------------------------------- CARD BASE ---------------------------------------------------------------- */ .card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: transform .22s, border-color .22s, box-shadow .22s; } .card:hover { transform: translateY(-4px); border-color: rgba(59, 130, 246, .35); box-shadow: 0 10px 40px rgba(59, 130, 246, .15); } .card.pink:hover { border-color: var(--border2); box-shadow: 0 10px 40px rgba(236, 72, 153, .12); } /* ---------------------------------------------------------------- BADGE / PILL ---------------------------------------------------------------- */ .badge { display: inline-block; padding: .22rem .65rem; border-radius: 6px; font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; } .badge-blue { background: rgba(59,130,246,.14); color: var(--blue-soft); } .badge-pink { background: rgba(236,72,153,.14); color: var(--pink-soft); } .badge-purple { background: rgba(168,85,247,.14); color: #c084fc; } .badge-green { background: var(--success-tint); color: var(--success); } .badge-red { background: var(--danger-tint); color: var(--danger); } .pill { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .7rem; border-radius: 99px; font-size: .7rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; border: 1px solid transparent; } .pill-win { background: var(--success-tint); color: var(--success); border-color: rgba(34,197,94,.2); } .pill-loss { background: var(--danger-tint); color: var(--danger); border-color: rgba(239,68,68,.2); } .pill-team { background: rgba(59,130,246,.1); color: var(--blue-soft); border-color: var(--border); } .pill-enemy { background: rgba(236,72,153,.1); color: var(--pink-soft); border-color: var(--border2); } /* ---------------------------------------------------------------- DIVIDER ---------------------------------------------------------------- */ hr.fancy { border: none; height: 1px; background: linear-gradient(90deg, transparent, var(--border), transparent); margin: 0; } /* ---------------------------------------------------------------- FOOTER ---------------------------------------------------------------- */ .footer { border-top: 1px solid var(--border); padding: 2rem 2.5rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-top: 5rem; } .footer-logo { font-family: var(--font-head); font-weight: 800; font-size: 1.1rem; background: linear-gradient(135deg, var(--blue-soft), var(--pink-soft)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .footer-text { font-size: .78rem; color: var(--text-faint); } .footer-link { font-size: .78rem; color: var(--text-faint); } .footer-link:hover { color: var(--blue-soft); } /* ---------------------------------------------------------------- ANIMATIONS ---------------------------------------------------------------- */ @keyframes pulse-dot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(1.5)} } @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} } @keyframes shimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } } @keyframes fadeUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes scanline { 0% { transform: translateY(-100%); } 100% { transform: translateY(100vh); } } .fade-up { animation: fadeUp .65s ease both; } .fade-in { animation: fadeIn .5s ease both; } .delay-1 { animation-delay: .1s; } .delay-2 { animation-delay: .2s; } .delay-3 { animation-delay: .3s; } .delay-4 { animation-delay: .4s; } .delay-5 { animation-delay: .5s; } .delay-6 { animation-delay: .6s; } /* Intersection observer reveal */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; } .reveal.visible { opacity: 1; transform: none; } .reveal-delay-1 { transition-delay: .1s; } .reveal-delay-2 { transition-delay: .2s; } .reveal-delay-3 { transition-delay: .3s; } /* ---------------------------------------------------------------- RESPONSIVE — mobile ---------------------------------------------------------------- */ @media (max-width: 768px) { .nav { padding: 0 1.2rem; gap: .7rem; } /* logo on the left, Discord + hamburger grouped together on the right */ .nav-logo { margin-right: auto; } .nav-right { order: 2; gap: .6rem; } .nav-toggle { display: flex; order: 3; } .nav-links { display: none; position: absolute; top: var(--nav-h); left: 0; right: 0; background: var(--bg2); border-bottom: 1px solid var(--border); flex-direction: column; padding: 1rem 1.2rem; gap: .25rem; } .nav-links.open { display: flex; } .nav-links a { font-size: .9rem; } .footer { padding: 1.5rem 1.2rem; } } /* ---------------------------------------------------------------- GLOBAL MOBILE POLISH (applies to every page) ---------------------------------------------------------------- */ @media (max-width: 600px) { html { font-size: 15px; } /* gently scale the whole type system down */ .nav { padding: 0 1rem; } .nav-discord { padding: .4rem .8rem; } /* keep the top bar from crowding */ .sec-desc { margin-bottom: 2rem; } .footer { justify-content: center; text-align: center; } } /* never allow a stray wide element to cause sideways scrolling */ html, body { max-width: 100%; overflow-x: hidden; } /* ---------------------------------------------------------------- CURSOR LASER (desktop / fine-pointer only — created by main.js) A pink laser-pointer that trails the cursor. JS decides when it exists; it's skipped on touch devices and under reduced-motion. The home intro takeover hides it via body.intro-active below. ---------------------------------------------------------------- */ .ls-laser { position: fixed; top: 0; left: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px; /* centre the dot on the cursor point */ border-radius: 50%; background: var(--pink-soft); box-shadow: 0 0 6px 2px var(--pink), 0 0 16px 6px var(--glow-p), 0 0 34px 13px var(--glow-p); pointer-events: none; /* must never intercept clicks */ mix-blend-mode: screen; /* reads like emitted light */ z-index: 9998; /* below the intro takeover (9999) */ opacity: 0; /* fades in on first cursor move */ transition: opacity .25s ease; will-change: transform; } .ls-laser.is-on { opacity: 1; } /* the trailing beam — stretches from the lagging glow to the cursor */ .ls-laser-beam { position: fixed; top: 0; left: 0; height: 2px; transform-origin: 0 50%; background: linear-gradient(90deg, var(--pink) 0%, transparent 100%); box-shadow: 0 0 8px 1px var(--glow-p); pointer-events: none; mix-blend-mode: screen; z-index: 9997; opacity: 0; will-change: transform, width; } /* the intro takeover owns the whole screen — no laser over it */ body.intro-active .ls-laser, body.intro-active .ls-laser-beam { opacity: 0 !important; }