LEMONMC - Ultimate Minecraft Experience</meta> <meta name="description" content="LEMONMC - An Ultimate Minecraft Experience. Join our community of 100+ players!"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Outfit:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet"> <style> :root { --lemon: #FFD60A; --lemon-dark: #FFC300; --lemon-glow: #FFE066; --bg: #0F0F0F; --bg-elevated: #1A1A1A; --card: rgba(26, 26, 26, 0.85); --card-border: rgba(255, 214, 10, 0.15); --text: #FFFFFF; --text-muted: #A0A0A0; --text-dim: #6B6B6B; --green: #00E676; --red: #FF3B30; --white: #FFFFFF; } * { margin: 0; padding: 0; box-sizing: border-box; } @keyframes float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-20px) rotate(2deg); } } @keyframes float-slow { 0%, 100% { transform: translateY(0) translateX(0); } 33% { transform: translateY(-15px) translateX(10px); } 66% { transform: translateY(10px) translateX(-5px); } } @keyframes pulse-glow { 0%, 100% { box-shadow: 0 0 20px rgba(255, 214, 10, 0.3), 0 0 40px rgba(255, 214, 10, 0.15); } 50% { box-shadow: 0 0 40px rgba(255, 214, 10, 0.5), 0 0 80px rgba(255, 214, 10, 0.3); } } @keyframes pulse-dot { 0%, 100% { transform: scale(1); opacity: 1; box-shadow: 0 0 10px currentColor; } 50% { transform: scale(1.3); opacity: 0.7; box-shadow: 0 0 20px currentColor; } } @keyframes glow-underline { 0%, 100% { width: 0; opacity: 0; } 50% { width: 60px; opacity: 1; } } @keyframes typing { from { width: 0; } to { width: 100%; } } @keyframes blink-caret { 0%, 100% { border-color: transparent; } 50% { border-color: var(--lemon); } } @keyframes slide-up { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } } @keyframes slide-in-left { from { opacity: 0; transform: translateX(-60px); } to { opacity: 1; transform: translateX(0); } } @keyframes slide-in-right { from { opacity: 0; transform: translateX(60px); } to { opacity: 1; transform: translateX(0); } } @keyframes scale-in { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } @keyframes ripple { 0% { transform: scale(0); opacity: 0.6; } 100% { transform: scale(4); opacity: 0; } } @keyframes toast-in { from { opacity: 0; transform: translateX(100px) scale(0.9); } to { opacity: 1; transform: translateX(0) scale(1); } } @keyframes toast-out { from { opacity: 1; transform: translateX(0) scale(1); } to { opacity: 0; transform: translateX(100px) scale(0.9); } } @keyframes accordion-down { from { height: 0; opacity: 0; } to { height: var(--accordion-height); opacity: 1; } } @keyframes accordion-up { from { height: var(--accordion-height); opacity: 1; } to { height: 0; opacity: 0; } } @keyframes shimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } } html { scroll-behavior: smooth; } body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; overflow-x: hidden; position: relative; } /* Background */ .bg-layer { position: fixed; inset: 0; z-index: -2; background: url('https://i.postimg.cc/BbLyYFMY/smth.png') center/cover no-repeat; filter: blur(15px) brightness(0.4); transform: scale(1.1); } .bg-overlay { position: fixed; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(15,15,15,0.8) 0%, rgba(15,15,15,0.6) 50%, rgba(15,15,15,0.9) 100%); } .bg-particles { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .particle { position: absolute; width: 4px; height: 4px; background: var(--lemon); border-radius: 50%; opacity: 0; animation: float-slow 20s infinite ease-in-out; } /* Scrollbar */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--lemon), var(--lemon-dark)); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--lemon-dark), var(--lemon)); } /* Utility */ .font-outfit { font-family: 'Outfit', sans-serif; } .glass { background: var(--card); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--card-border); border-radius: 24px; } .text-gradient { background: linear-gradient(135deg, var(--lemon) 0%, var(--lemon-dark) 50%, #FFA500 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; background-size: 200% 200%; animation: shimmer 3s ease-in-out infinite; } /* Reveal animations */ .reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); } .reveal.visible { opacity: 1; transform: translateY(0); } .reveal-left { transform: translateX(-60px); } .reveal-left.visible { transform: translateX(0); } .reveal-right { transform: translateX(60px); } .reveal-right.visible { transform: translateX(0); } .reveal-scale { transform: scale(0.9); } .reveal-scale.visible { transform: scale(1); } /* Stagger delays */ .stagger-1 { transition-delay: 100ms; } .stagger-2 { transition-delay: 200ms; } .stagger-3 { transition-delay: 300ms; } .stagger-4 { transition-delay: 400ms; } .stagger-5 { transition-delay: 500ms; } .stagger-6 { transition-delay: 600ms; } /* Container */ .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } section { padding: 100px 0; position: relative; z-index: 1; } .section-title { font-family: 'Outfit', sans-serif; font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800; text-align: center; margin-bottom: 16px; line-height: 1.1; } .section-subtitle { font-size: clamp(1rem, 2.5vw, 1.25rem); color: var(--text-muted); text-align: center; max-width: 600px; margin: 0 auto 60px; font-weight: 400; line-height: 1.6; } /* ===== HERO ===== */ #hero { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 120px 0 80px; position: relative; } .hero-content { text-align: center; max-width: 800px; padding: 0 20px; } .hero-title { font-family: 'Outfit', sans-serif; font-size: clamp(3rem, 10vw, 7rem); font-weight: 900; line-height: 1; margin-bottom: 24px; position: relative; display: inline-flex; align-items: center; gap: 16px; } .hero-title .typing-wrapper { display: inline-block; overflow: hidden; white-space: nowrap; border-right: 3px solid var(--lemon); animation: typing 2s steps(7, end) 0.5s forwards, blink-caret 0.75s step-end infinite; width: 0; } .hero-title .lemon-emoji { font-size: clamp(2.5rem, 8vw, 5.5rem); animation: float 3s ease-in-out infinite; filter: drop-shadow(0 0 30px rgba(255, 214, 10, 0.6)); } .hero-subtitle { font-family: 'Outfit', sans-serif; font-size: clamp(1.25rem, 3vw, 2rem); font-weight: 500; color: var(--text-muted); margin-bottom: 16px; position: relative; display: inline-block; } .hero-subtitle::after { content: ''; position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); width: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--lemon), transparent); border-radius: 2px; animation: glow-underline 2s ease-in-out infinite; filter: drop-shadow(0 0 10px var(--lemon)); } .hero-description { font-size: clamp(1rem, 2vw, 1.125rem); color: var(--text-dim); max-width: 500px; margin: 0 auto 48px; line-height: 1.7; } .hero-cta { display: inline-flex; align-items: center; gap: 12px; padding: 18px 40px; background: linear-gradient(135deg, var(--lemon) 0%, var(--lemon-dark) 100%); color: var(--bg); font-family: 'Outfit', sans-serif; font-size: 1.125rem; font-weight: 700; border: none; border-radius: 16px; cursor: pointer; text-decoration: none; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 10px 40px rgba(255, 214, 10, 0.3), 0 0 0 1px rgba(255, 214, 10, 0.2); position: relative; overflow: hidden; } .hero-cta::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, var(--lemon-dark) 0%, var(--lemon) 100%); opacity: 0; transition: opacity 0.3s; } .hero-cta:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 20px 60px rgba(255, 214, 10, 0.4), 0 0 0 1px rgba(255, 214, 10, 0.3); } .hero-cta:hover::before { opacity: 1; } .hero-cta:active { transform: translateY(0) scale(0.98); } .hero-cta span { position: relative; z-index: 1; } .hero-scroll { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--text-dim); font-size: 0.875rem; animation: float 2s ease-in-out infinite; opacity: 0.7; } .hero-scroll svg { width: 24px; height: 24px; stroke: var(--lemon); animation: float 1.5s ease-in-out infinite; } /* ===== SERVER STATUS ===== */ #status { background: radial-gradient(ellipse at 50% 0%, rgba(255, 214, 10, 0.08) 0%, transparent 70%); } .status-card { max-width: 900px; margin: 0 auto; padding: 40px; position: relative; overflow: hidden; animation: pulse-glow 4s ease-in-out infinite; } .status-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255, 214, 10, 0.05) 0%, transparent 50%, rgba(255, 214, 10, 0.05) 100%); pointer-events: none; } .status-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 32px; flex-wrap: wrap; gap: 16px; } .status-title { font-family: 'Outfit', sans-serif; font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; background: linear-gradient(135deg, var(--lemon), var(--lemon-dark)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .status-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 100px; font-size: 0.875rem; font-weight: 600; font-family: 'Outfit', sans-serif; } .status-badge.online { background: rgba(0, 230, 118, 0.15); color: var(--green); border: 1px solid rgba(0, 230, 118, 0.3); } .status-badge.offline { background: rgba(255, 59, 48, 0.15); color: var(--red); border: 1px solid rgba(255, 59, 48, 0.3); } .status-dot { width: 10px; height: 10px; border-radius: 50%; animation: pulse-dot 1.5s ease-in-out infinite; } .status-dot.online { background: var(--green); color: var(--green); } .status-dot.offline { background: var(--red); color: var(--red); } .status-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 32px; } .status-item { padding: 24px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 214, 10, 0.1); border-radius: 16px; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); position: relative; overflow: hidden; } .status-item::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 214, 10, 0.05), transparent); transition: left 0.5s; } .status-item:hover { border-color: rgba(255, 214, 10, 0.3); transform: translateY(-4px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); } .status-item:hover::before { left: 100%; } .status-item-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-dim); margin-bottom: 8px; font-family: 'Outfit', sans-serif; } .status-item-value { font-size: 1.25rem; font-weight: 600; color: var(--text); font-family: 'Outfit', sans-serif; } .status-item-value .highlight { color: var(--lemon); } .status-motd { padding: 20px; background: rgba(255, 214, 10, 0.08); border: 1px solid rgba(255, 214, 10, 0.2); border-radius: 16px; font-style: italic; color: var(--text-muted); line-height: 1.6; margin-bottom: 24px; position: relative; } .status-motd::before { content: '"'; font-size: 4rem; color: var(--lemon); opacity: 0.15; position: absolute; top: -10px; left: 16px; font-family: 'Outfit', sans-serif; line-height: 1; } .status-motd span { position: relative; z-index: 1; } .offline-message { text-align: center; padding: 40px 20px; color: var(--text-muted); } .offline-message .icon { font-size: 3rem; margin-bottom: 16px; opacity: 0.5; } .offline-message h3 { font-family: 'Outfit', sans-serif; font-size: 1.5rem; color: var(--text); margin-bottom: 8px; } /* Copy IP */ .copy-ip-section { margin-top: 32px; } .copy-ip-label { font-size: 0.875rem; color: var(--text-dim); margin-bottom: 12px; text-align: center; font-weight: 500; } .copy-ip-box { display: flex; align-items: center; gap: 12px; padding: 16px 24px; background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(255, 214, 10, 0.2); border-radius: 16px; max-width: 400px; margin: 0 auto 24px; position: relative; overflow: hidden; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .copy-ip-box:hover { border-color: rgba(255, 214, 10, 0.4); box-shadow: 0 0 30px rgba(255, 214, 10, 0.15); } .copy-ip-box.ripple-active::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at center, rgba(255, 214, 10, 0.3) 0%, transparent 70%); animation: ripple 0.6s ease-out forwards; pointer-events: none; } .copy-ip-text { flex: 1; font-family: 'Outfit', sans-serif; font-size: 1.125rem; font-weight: 600; color: var(--lemon); letter-spacing: 0.05em; user-select: all; -webkit-user-select: all; } .copy-btn { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 24px; background: linear-gradient(135deg, var(--lemon) 0%, var(--lemon-dark) 100%); color: var(--bg); font-family: 'Outfit', sans-serif; font-size: 0.875rem; font-weight: 700; border: none; border-radius: 12px; cursor: pointer; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); white-space: nowrap; position: relative; overflow: hidden; } .copy-btn::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, var(--lemon-dark) 0%, var(--lemon) 100%); opacity: 0; transition: opacity 0.2s; } .copy-btn:hover { transform: scale(1.05); } .copy-btn:hover::before { opacity: 1; } .copy-btn:active { transform: scale(0.95); } .copy-btn span { position: relative; z-index: 1; } .copy-btn.copied { background: var(--green); } .copy-btn.copied::before { background: #00C868; } /* Community badge */ .community-badge { display: inline-flex; align-items: center; gap: 10px; padding: 12px 24px; background: linear-gradient(135deg, rgba(255, 214, 10, 0.15) 0%, rgba(255, 195, 0, 0.1) 100%); border: 1px solid rgba(255, 214, 10, 0.3); border-radius: 100px; font-size: 0.9375rem; font-weight: 600; color: var(--lemon); animation: pulse-glow 3s ease-in-out infinite; } .community-badge svg { flex-shrink: 0; } /* ===== WHY PLAY ===== */ #why { background: radial-gradient(ellipse at 50% 100%, rgba(255, 214, 10, 0.06) 0%, transparent 60%); } .why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; max-width: 1000px; margin: 0 auto; } .why-card { padding: 40px 32px; text-align: center; position: relative; overflow: hidden; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .why-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--lemon), var(--lemon-dark), var(--lemon)); background-size: 200% 100%; animation: shimmer 2s linear infinite; opacity: 0; transition: opacity 0.3s; } .why-card:hover { transform: translateY(-8px); border-color: rgba(255, 214, 10, 0.4); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4), 0 0 60px rgba(255, 214, 10, 0.1); } .why-card:hover::before { opacity: 1; } .why-icon { width: 72px; height: 72px; margin: 0 auto 24px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(255, 214, 10, 0.15), rgba(255, 195, 0, 0.1)); border: 1px solid rgba(255, 214, 10, 0.2); border-radius: 20px; transition: all 0.3s; } .why-card:hover .why-icon { background: linear-gradient(135deg, rgba(255, 214, 10, 0.25), rgba(255, 195, 0, 0.15)); border-color: rgba(255, 214, 10, 0.4); transform: scale(1.1) rotate(5deg); box-shadow: 0 0 40px rgba(255, 214, 10, 0.2); } .why-icon svg { width: 36px; height: 36px; stroke: var(--lemon); transition: stroke 0.3s; } .why-card:hover .why-icon svg { stroke: var(--lemon-dark); } .why-title { font-family: 'Outfit', sans-serif; font-size: 1.5rem; font-weight: 700; margin-bottom: 12px; color: var(--text); } .why-desc { color: var(--text-muted); line-height: 1.7; font-size: 1rem; } /* ===== RULES ===== */ #rules { background: radial-gradient(ellipse at 50% 0%, rgba(255, 214, 10, 0.08) 0%, transparent 60%); } .rules-header { text-align: center; margin-bottom: 48px; position: relative; } .rules-ascii { font-family: 'Monospace', 'Courier New', monospace; font-size: clamp(0.75rem, 1.5vw, 1rem); line-height: 1.4; color: var(--lemon); white-space: pre; margin-bottom: 24px; font-weight: 600; letter-spacing: 0.02em; overflow-x: auto; } .rules-intro { max-width: 700px; margin: 0 auto 24px; padding: 20px; background: rgba(255, 214, 10, 0.08); border: 1px solid rgba(255, 214, 10, 0.2); border-radius: 16px; color: var(--text-muted); line-height: 1.7; font-size: 1rem; text-align: center; position: relative; } .rules-divider { width: 100%; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 214, 10, 0.3), transparent); margin-bottom: 32px; } .rules-accordion { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; } .accordion-item { border: 1px solid rgba(255, 214, 10, 0.15); border-radius: 16px; overflow: hidden; background: rgba(255, 255, 255, 0.02); transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .accordion-item:hover { border-color: rgba(255, 214, 10, 0.3); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); } .accordion-item.open { border-color: rgba(255, 214, 10, 0.4); box-shadow: 0 0 40px rgba(255, 214, 10, 0.1); } .accordion-trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 20px 24px; background: transparent; border: none; color: var(--text); font-family: 'Outfit', sans-serif; font-size: 1.125rem; font-weight: 600; text-align: left; cursor: pointer; gap: 16px; transition: all 0.2s; } .accordion-trigger:hover { background: rgba(255, 214, 10, 0.05); } .accordion-trigger-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: linear-gradient(135deg, rgba(255, 214, 10, 0.15), rgba(255, 195, 0, 0.1)); border: 1px solid rgba(255, 214, 10, 0.2); border-radius: 12px; flex-shrink: 0; transition: all 0.3s; } .accordion-item.open .accordion-trigger-icon { background: linear-gradient(135deg, rgba(255, 214, 10, 0.25), rgba(255, 195, 0, 0.15)); border-color: rgba(255, 214, 10, 0.4); transform: rotate(45deg); } .accordion-trigger-icon svg { width: 20px; height: 20px; stroke: var(--lemon); transition: stroke 0.3s; } .accordion-item.open .accordion-trigger-icon svg { stroke: var(--lemon-dark); } .accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), padding 0.3s; } .accordion-content-inner { padding: 0 24px 24px; color: var(--text-muted); line-height: 1.8; } .accordion-content-inner ul { list-style: none; } .accordion-content-inner li { position: relative; padding-left: 24px; margin-bottom: 10px; } .accordion-content-inner li::before { content: '✦'; position: absolute; left: 0; color: var(--lemon); font-size: 0.875rem; animation: float 2s ease-in-out infinite; } .accordion-content-inner li:nth-child(2n)::before { animation-delay: 0.5s; } .accordion-content-inner li:nth-child(3n)::before { animation-delay: 1s; } .punishments-list { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; } .punishment-tag { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 100px; font-size: 0.875rem; font-weight: 600; font-family: 'Outfit', sans-serif; border: 1px solid; } .punishment-tag.warning { background: rgba(255, 214, 10, 0.15); color: #FFD60A; border-color: rgba(255, 214, 10, 0.3); } .punishment-tag.mute { background: rgba(255, 165, 0, 0.15); color: #FFA500; border-color: rgba(255, 165, 0, 0.3); } .punishment-tag.temp-ban { background: rgba(255, 59, 48, 0.15); color: #FF3B30; border-color: rgba(255, 59, 48, 0.3); } .punishment-tag.perm-ban { background: rgba(255, 255, 255, 0.1); color: #FFFFFF; border-color: rgba(255, 255, 255, 0.2); } /* ===== DISCORD ===== */ #discord { background: radial-gradient(ellipse at 50% 50%, rgba(88, 101, 242, 0.12) 0%, transparent 60%), radial-gradient(ellipse at 50% 100%, rgba(255, 214, 10, 0.06) 0%, transparent 50%); } .discord-card { max-width: 600px; margin: 0 auto; padding: 60px 40px; text-align: center; position: relative; overflow: hidden; } .discord-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(88, 101, 242, 0.1) 0%, rgba(255, 214, 10, 0.05) 100%); pointer-events: none; } .discord-icon { width: 100px; height: 100px; margin: 0 auto 24px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #5865F2 0%, #4752C4 100%); border-radius: 28px; box-shadow: 0 20px 60px rgba(88, 101, 242, 0.3); animation: float 4s ease-in-out infinite; } .discord-icon svg { width: 50px; height: 50px; stroke: white; } .discord-title { font-family: 'Outfit', sans-serif; font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 800; margin-bottom: 12px; background: linear-gradient(135deg, #FFFFFF, #5865F2, var(--lemon)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; background-size: 200% 200%; animation: shimmer 3s ease-in-out infinite; } .discord-desc { color: var(--text-muted); font-size: 1.125rem; line-height: 1.6; margin-bottom: 32px; } .discord-btn { display: inline-flex; align-items: center; gap: 12px; padding: 20px 48px; background: linear-gradient(135deg, #5865F2 0%, #4752C4 100%); color: white; font-family: 'Outfit', sans-serif; font-size: 1.125rem; font-weight: 700; border: none; border-radius: 16px; cursor: pointer; text-decoration: none; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 15px 40px rgba(88, 101, 242, 0.4), 0 0 0 1px rgba(88, 101, 242, 0.2); position: relative; overflow: hidden; } .discord-btn::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, #4752C4 0%, #5865F2 100%); opacity: 0; transition: opacity 0.3s; } .discord-btn:hover { transform: translateY(-4px) scale(1.03); box-shadow: 0 25px 60px rgba(88, 101, 242, 0.5), 0 0 40px rgba(88, 101, 242, 0.3); } .discord-btn:hover::before { opacity: 1; } .discord-btn:active { transform: translateY(0) scale(0.98); } .discord-btn span { position: relative; z-index: 1; } .discord-btn svg { width: 24px; height: 24px; flex-shrink: 0; } /* ===== FOOTER ===== */ footer { padding: 60px 0 40px; border-top: 1px solid rgba(255, 214, 10, 0.1); background: rgba(0, 0, 0, 0.3); } .footer-content { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; } .footer-brand { font-family: 'Outfit', sans-serif; font-size: 1.5rem; font-weight: 800; background: linear-gradient(135deg, var(--lemon), var(--lemon-dark)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .footer-info { color: var(--text-dim); font-size: 0.9375rem; line-height: 1.6; } .footer-copyright { color: var(--text-dim); font-size: 0.875rem; opacity: 0.7; } /* ===== TOAST ===== */ .toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 10000; display: flex; flex-direction: column; gap: 12px; pointer-events: none; } .toast { display: flex; align-items: center; gap: 12px; padding: 16px 24px; background: var(--card); border: 1px solid var(--card-border); border-radius: 14px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4); color: var(--text); font-size: 0.9375rem; font-weight: 500; animation: toast-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; pointer-events: auto; } .toast.success { border-color: rgba(0, 230, 118, 0.4); } .toast.success::before { content: ''; width: 20px; height: 20px; background: var(--green); border-radius: 50%; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat; } .toast.hiding { animation: toast-out 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards; } /* ===== NAV INDICATOR ===== */ .nav-indicator { position: fixed; right: 24px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 12px; z-index: 100; opacity: 0; visibility: hidden; transition: all 0.3s; } .nav-indicator.visible { opacity: 1; visibility: visible; } .nav-dot { width: 12px; height: 12px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); border: 2px solid rgba(255, 214, 10, 0.3); cursor: pointer; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); position: relative; } .nav-dot::after { content: attr(data-label); position: absolute; right: 20px; top: 50%; transform: translateY(-50%); white-space: nowrap; font-size: 0.75rem; font-weight: 600; color: var(--text); opacity: 0; visibility: hidden; transition: all 0.2s; font-family: 'Outfit', sans-serif; } .nav-dot:hover { background: var(--lemon); border-color: var(--lemon); transform: scale(1.3); } .nav-dot:hover::after { opacity: 1; visibility: visible; right: 24px; } .nav-dot.active { background: var(--lemon); border-color: var(--lemon); box-shadow: 0 0 20px rgba(255, 214, 10, 0.5); } /* ===== REDUCED MOTION ===== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .hero-title .typing-wrapper { animation: none; width: 100%; border-right: none; } .particle { display: none; } } /* ===== RESPONSIVE ===== */ @media (max-width: 768px) { section { padding: 70px 0; } .status-card { padding: 24px; } .status-grid { grid-template-columns: 1fr; } .why-card { padding: 32px 24px; } .discord-card { padding: 40px 24px; } .accordion-trigger { padding: 16px 20px; font-size: 1rem; } .accordion-content-inner { padding: 0 20px 20px; } .nav-indicator { display: none; } .toast-container { left: 16px; right: 16px; bottom: 16px; } } @media (max-width: 480px) { .hero-title { gap: 10px; } .copy-ip-box { flex-direction: column; gap: 12px; text-align: center; max-width: 100%; } .copy-btn { width: 100%; justify-content: center; } .punishments-list { justify-content: center; } } /* Focus visible */ :focus-visible { outline: 2px solid var(--lemon); outline-offset: 3px; } /* Selection */ ::selection { background: rgba(255, 214, 10, 0.3); color: var(--text); } </style> </head> <body>  <div class="bg-layer" aria-hidden="true"></div> <div class="bg-overlay" aria-hidden="true"></div> <div class="bg-particles" id="particles" aria-hidden="true"></div>  <nav class="nav-indicator" id="navIndicator" aria-label="Section navigation"> <a href="#hero" class="nav-dot" data-label="Home" data-section="hero"></a> <a href="#status" class="nav-dot" data-label="Status" data-section="status"></a> <a href="#why" class="nav-dot" data-label="Why Play" data-section="why"></a> <a href="#rules" class="nav-dot" data-label="Rules" data-section="rules"></a> <a href="#discord" class="nav-dot" data-label="Discord" data-section="discord"></a> </nav>  <div class="toast-container" id="toastContainer" aria-live="polite"></div>  <section id="hero" aria-labelledby="hero-title"> <div class="container"> <div class="hero-content reveal"> <h1 class="hero-title" id="hero-title"> <span class="lemon-emoji" aria-hidden="true">🍋</span> <span class="typing-wrapper font-outfit">LEMONMC</span> </h1> <p class="hero-subtitle font-outfit">An Ultimate Minecraft Experience</p> <p class="hero-description">Join 100+ players in a fair, fun, and friendly survival community. No pay-to-win, just pure Minecraft.</p> <a href="#status" class="hero-cta font-outfit" aria-label="View server status and join"> <span>Play Now</span> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M12 5l7 7-7 7"/></svg> </a> </div> <div class="hero-scroll" aria-hidden="true"> <span>Scroll to explore</span> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M19 12l-7 7-7-7"/></svg> </div> </div> </section>  <section id="status" aria-labelledby="status-title"> <div class="container"> <header class="reveal"> <h2 class="section-title font-outfit" id="status-title">Server Status</h2> <p class="section-subtitle">Real-time server information from play.lemonmc.in</p> </header> <div class="status-card glass reveal stagger-1" id="statusCard"> <div class="status-header"> <h3 class="status-title font-outfit">LEMONMC Network</h3> <div class="status-badge offline" id="statusBadge"> <span class="status-dot offline" id="statusDot" aria-hidden="true"></span> <span id="statusText">Checking...</span> </div> </div> <div class="status-grid" id="statusGrid" aria-live="polite"> <div class="status-item"> <div class="status-item-label">Players Online</div> <div class="status-item-value" id="playersOnline">— / —</div> </div> <div class="status-item"> <div class="status-item-label">Version</div> <div class="status-item-value" id="serverVersion">—</div> </div> <div class="status-item"> <div class="status-item-label">Protocol</div> <div class="status-item-value" id="serverProtocol">—</div> </div> <div class="status-item"> <div class="status-item-label">Last Updated</div> <div class="status-item-value" id="lastUpdated">—</div> </div> </div> <div class="status-motd" id="statusMotd" hidden> <span id="motdText"></span> </div> <div class="offline-message" id="offlineMessage" hidden> <div class="icon" aria-hidden="true">🍋</div> <h3>Server is currently offline</h3> <p>Join our Discord for updates and maintenance notices!</p> </div>  <div class="copy-ip-section"> <p class="copy-ip-label">Copy Server Address</p> <div class="copy-ip-box glass" id="copyIpBox" role="group" aria-label="Copy server IP"> <span class="copy-ip-text" id="ipText" aria-label="Server IP address">play.lemonmc.in</span> <button class="copy-btn font-outfit" id="copyBtn" aria-label="Copy IP to clipboard"> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg> <span id="copyBtnText">COPY</span> </button> </div> <div class="community-badge font-outfit" aria-label="Community size"> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg> <span>100+ people who join our community</span> </div> </div> </div> </div> </section>  <section id="why" aria-labelledby="why-title"> <div class="container"> <header class="reveal"> <h2 class="section-title font-outfit" id="why-title">Why Play LEMONMC?</h2> <p class="section-subtitle">Three pillars that make our community special</p> </header> <div class="why-grid"> <article class="why-card glass reveal stagger-1"> <div class="why-icon" aria-hidden="true"> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><path d="M9 12l2 2 4-4"/></svg> </div> <h3 class="why-title font-outfit">Play Fair</h3> <p class="why-desc">No pay-to-win mechanics. Pure skill, strategy, and fun. Everyone starts equal and earns their place through gameplay.</p> </article> <article class="why-card glass reveal stagger-2"> <div class="why-icon" aria-hidden="true"> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg> </div> <h3 class="why-title font-outfit">Respect Others</h3> <p class="why-desc">Chill community of 100+ players. Friendly staff, zero tolerance for toxicity. Make friends, build together, have fun.</p> </article> <article class="why-card glass reveal stagger-3"> <div class="why-icon" aria-hidden="true"> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2" ry="2"/></svg> </div> <h3 class="why-title font-outfit">Have Fun!</h3> <p class="why-desc">Events, minigames, seasonal content, and friendly staff. Something new every week. Your adventure starts here.</p> </article> </div> </div> </section>  <section id="rules" aria-labelledby="rules-title"> <div class="container"> <header class="reveal"> <h2 class="section-title font-outfit" id="rules-title">Server Rules</h2> <p class="section-subtitle">Keep LemonMC fun and fair for everyone</p> </header> <div class="rules-header reveal stagger-1"> <pre class="rules-ascii" aria-hidden="true"><code>🍋 ╭━━━━━━━━━━╮ 🍋 🍋 │ LEMONMC • RULES │ 🍋 🍋 ╰━━━━━━━━━━━━━━━━━━╯</code></pre> <div class="rules-intro"> ✨ Welcome to LemonMC! By playing here, you agree to follow all rules. Staff may punish any harmful behavior. </div> <div class="rules-divider" aria-hidden="true"></div> </div> <div class="rules-accordion" id="rulesAccordion">  </div> </div> </section>  <section id="discord" aria-labelledby="discord-title"> <div class="container"> <div class="discord-card glass reveal"> <div class="discord-icon" aria-hidden="true"> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.38-.42.765-.63 1.15a18.27 18.27 0 0 0-5.436 0 12.64 12.64 0 0 0-.629-1.15.077.077 0 0 0-.079-.037A19.735 19.735 0 0 0 3.676 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.083.083 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.079.079 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.007-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.645.747 1.252 1.227 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054A19.86 19.86 0 0 0 20.317 4.37a.067.067 0 0 0-.001-.033z"/><path d="M10 15.066v1.946a1.85 1.85 0 0 0 2.809 1.188l2.474-2.473a.25.25 0 0 1 .354 0l2.25 2.25a.25.25 0 0 0 .354 0l2.744-2.743a1.85 1.85 0 0 0 1.19-2.811V8.76a2.2 2.2 0 0 0-1.083-1.89 35.961 35.961 0 0 0-4.752-1.285.075.075 0 0 1-.08-.085 35.66 35.66 0 0 0-4.416 1.117 2.176 2.176 0 0 0-.757 1.82v4.853a.074.074 0 0 1-.074.074H10.074a.074.074 0 0 1-.074-.074z"/></svg> </div> <h3 class="discord-title font-outfit" id="discord-title">Join Our Community</h3> <p class="discord-desc">Connect with 100+ players, get updates, report bugs, and join events. The heart of LemonMC beats on Discord.</p> <a href="https://discord.gg/KP6RTnNDKy" target="_blank" rel="noopener noreferrer" class="discord-btn font-outfit" aria-label="Join LemonMC Discord"> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.38-.42.765-.63 1.15a18.27 18.27 0 0 0-5.436 0 12.64 12.64 0 0 0-.629-1.15.077.077 0 0 0-.079-.037A19.735 19.735 0 0 0 3.676 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.083.083 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.079.079 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.007-.1 <span class="ripple-active"></span> </button> </div> </div> </div> </section>  <footer> <div class="container"> <div class="footer-content reveal stagger-4"> <h2 class="footer-brand font-outfit">LEMONMC</h2> <p class="-info"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20.317 4.37a19.79 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.79.037c-.21.38-.42.765-.63 1.15a18.27 18.270 0 0-5.436 0 12.64 12.64 0 0 0-.629-1.15077.077 0 0 0-.079-.037A19.735 19.735 0 0 0 3.676 4.37a.07.07 0 0 0-.032.027C.533 9046-.32 13.58.099 18.057a.083.083 0 0 0 .01.057 19.9 19.9 0 0 0 5.993 3.03.079.0790 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.94.076.076 0 0 0-.041-.106 13.107 13.107 00 1-1.872-.892.077.077 0 0 1-.007-.128 10.210.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c.928 1.793 8.18 1.793 12.062 0a.074.074 0 1 .078.01c.12.098.246.198.373.292a.077077 0 0 1-.006.127 12.299 12.299 0 0 1-1.73.892.077.077 0 0 0-.041.107c.36.645.7471.252 1.227 1.993a.076.076 0 0 0 .084.02819.839 19.839 0 0 0 6.002-3.03.077.077 00 0 .032-.054A19.86 19.86 0 0 0 20.317 4.3a.067.067 0 0 0-.001-.033z"/><path d="M10 15.066v1946a1.85 1.85 0 0 0 2.809 1.188l2.474-2.73a.25.25 0 0 1 .354 0l2.25 2.25a.25.25 00 0 .354 0l2.744-2.743a1.85 1.85 0 0 0 1.9-2.811V8.76a2.2 2.2 0 0 0-1.083-1.89 35961 35.961 0 0 0-4.752-1.285.075.075 0 01-.08-.085 35.66 35.66 0 0 0-4.416 1.117 2176 2.176 0 0 0-.757 1.82v4.853a.074.074 0 1-.074.074H10.074a.074.074 0 0 1-.074-.04z"/></svg> <span>Join our Discord community and stay connected with the latest updates, events, and player discussions.</span> </p> <p class="footer-copyright © 2024 LEMONMC. All rights reserved. </p> </div> </div> </footer> <script> // ===== INITIALIZATION ===== document.addEventListener('DOMContentLoaded', () => { initializeAnimations(); initializeParticles(); initializeStatusCheck(); initializeCopyIP(); initializeRules(); SmoothScroll(); initializeNavIndicator(); }); // ===== ANIMATIONS ===== function initializeAnimations() { const observerOptions = { threshold: 0., rootMargin: '0px 0px -50px 0px' }; const observer = new IntersectionObserver((entries) => { .forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add('visible'); } }); }, observer); const revealElements = document.querySelectorAll('.reveal'); revealElements.forEach(el => observer.observe(el)); } function initializeParticles() { particlesContainer = document.getElementById('particles'); const particleCount = 30; const colors = ['#FFD60A', '#FFC300', '#500', '#FF8A00', '#FF6B00']; for (let i = 0; i < particleCount; i++) { particle = document.createElement('div'); particle.className = 'particle'; particle.style.left = Math.random() * 100 + '%'; .style.animationDelay = Math.random() * 20 + 's'; particle.style.animationDuration = (15 + Math.random() * 10) 's'; particle.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)]; particle.setAttribute('aria-hidden', 'true'); particlesContainer.appendChild(particle); } } // ===== SERVER STATUS ===== function initializeStatusCheck() { const statusBadge = document.getElementById('status'); const statusDot = document.getElementById('statusDot'); const statusText = document.getElementById('statusText'); const statusCard = document.getElementById('statusCard'); const statusGrid = document.getElementById('statusGrid'); const statusMotd = document.getElementById('statusMotd'); const offlineMessage = document.getElementById('offlineMessage const ipText = document.getElementById('ipText'); const statusInterval = setInterval(checkStatus, 30000); async function checkStatus() { try { const response = await fetch('https://play.lemonmc.in/api'); if (response.ok) { const data = await response.json(); updateStatus(data); } else { showOffline(); } } catch (error) { showOffline(); } } function updateStatus(data) { // Update status badge statusBadge.classList.remove('offline'); statusBadge.classList.add('online'); statusDot..remove('offline'); statusDot.classList.add('online'); statusDot.style.backgroundColor = '#00E676'; statusText.textContent =Online'; // Update server info const playersOnline = document.getElementById('playersOnline'); const serverVersion = document.getElementById('serverVersion'); constProtocol = document.getElementById('serverProtocol'); const lastUpdated = document.getElementById('lastUpdated'); playersOnline.innerHTML = `${data.players} / ${data._players}`; serverVersion.textContent = data.version?.name || 'Unknown'; serverProtocol.textContent = data.version?.protocol || 'Unknown'; lastUpdatedtextContent = new Date().toLocaleTimeString(); // Update MOTD if (data.motd) { const motdText = document.getElementById('motdText motdText.textContent = data.motd; statusMotd.hidden = false; offlineMessage.hidden = true; } else { statusd.hidden = true; if (!data.motd) { statusMotd.hidden = true; } } // Add glow statusCard.style.animation = 'none'; setTimeout(() => { statusCard.style.animation = 'pulse-glow 2s ease-in-out infinite }, 10); } function showOffline() { statusBadge.classList.remove('online'); statusBadge.classList.add('offline'); statusDot.classList.remove('online'); statusDot.classList.add('offline'); statusDot.style.backgroundColor = '#FF3B30'; status.textContent = 'Offline'; statusGrid.style.display = 'none'; statusMotd.hidden = true; offlineMessage.hidden = false; statusCard.style.animation = 'none'; setTimeout(() => { statusCard.style.animation = 'pulse-glow 2s ease-in-out infinite }, 10); } // Initial check checkStatus(); } // ===== COPY IP FUNCTIONALITY ===== function initializeCopyIP() const copyBtn = document.getElementById('copyBtn'); const copyBtnText = document.getElementById('copyBtnText'); const ipText = document.getElementById('ipText const copyIpBox = document.getElementById('copyIpBox'); const toastContainer = document.getElementById('toastContainer'); copyBtn.addEventListener('click', async () => try { await navigator.clipboard.writeText(ipText.textContent); // Update button state copyBtn.classList.add('copied'); copyBtn.classList.remove('ripple-active'); copyBtnText.textContent = 'COPIED!'; // Create ripple effect copyIpBox.classList.('ripple-active'); setTimeout(() => { copyIpBox.classList.remove('ripple-active'); }, 600); // Show showToast('Server IP copied to clipboard!', 'success'); // Reset button state after delay setTimeout(() => { copyBtn.classList.remove('copied copyBtnText.textContent = 'COPY'; }, 2000); } catch (error) { showToast('Failed to copy IP. Please copy.', 'error'); } }); } function showToast(message, type = 'success') { const toastContainer = document.getElementById('toastContainer const toast = document.createElement('div'); toast.className = `toast ${type}`; toast.innerHTML = ` <span style="display: flex; align-: center; gap: 8px;"> ${type === 'success' ? '✓' : '⚠'} <span>${message}</span> </span> `; toastContainer.appendChild(toast); setTimeout(() => { toast.classList.add('hiding'); setTimeout(() => { toastContainer.removeChildtoast); }, 300); }, 3000); } // ===== RULES ===== function initializeRules() { const rulesAccordion document.getElementById('rulesAccordion'); const rulesData = [ { title: 'No Griefing', icon: '🛡', content: [ Do not destroy or modify other players'' builds without permission.', 'Use WorldEdit/Protection plugins responsibly.', 'Report griefing immediately to staff.' ], pun: ['Warning', 'Rollback', 'Mute', 'Temp-Ban'] }, { title: 'No Cheating', icon: '⚔', content: [ 'No hacked clients, X-Ray, or fly.', 'No exploiting bugs or glitches.', 'No sharing client files that give advantage.' punishments: ['Warning', 'Temp-Ban', 'Perm-Ban'] }, { title: 'Respect Staff', icon: '👑', content: [ 'Follow all directions from staff members.', 'No disrespect or harassment of staff.', 'Staff decisions are final and binding.' ], punishments ['Warning', 'Mute', 'Temp-Ban'] }, { title: 'No Spam', icon: '📢', content: [ 'No excessive chat spam or advertising.', 'Use appropriate channels for announcements.', 'No abusive or inappropriate language.' ], punishments: ['Warning', 'Mute 'Temp-Ban'] }, { title: 'PvP Rules', icon: '❤️', content: [ 'PvP is allowed but it friendly.', 'No kill-hunting or camping spawn.', 'Respect other players'' builds and bases.' ], punishments: ['Warning', 'Temp-'] }, { title: 'Economy Rules', icon: '💰', content: [ 'No duping or exploiting economy bugs.', Trade fairly and honestly.', 'No scamming or misleading trades.' ], punishments: ['Warning', 'Rollback', 'Mute', 'Temp-Ban'] } ]; rulesData.forEach((rule, index) => { const accordionItem = document.createElement('div'); accordionItem.className = 'accordion-'; accordionItem.innerHTML = ` <button class="accordion-trigger" aria-expanded="false"> <div class="accordion-trigger-icon" aria-hidden="true <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round <path d="M9 17l6-6-6-6" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <span class="accordion-title">${rule.title}</span> <svg width="20" height="20" viewBox="0 0 24 24" fill="none stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> <path d="M6 9l6 6-6"/> </svg> </button> <div class="accordion-content" id="accordion-${index}"> <div class="accordion-content-inner"> <p><strong>${rule.icon} ${rule.title}</strong></p> ${rule.content.map(item => ` <ul> <li>${item}</li> </ul> `).join('')} <div class="punishments-list"> ${rule.punishments.map(p => ` <span class="punishment-tag ${p.toLowerCase().includes('perm') ? 'perm-ban' : p.toLowerCase().includes('temp') ? 'temp-ban' : 'warning'}">${p}</span> `).('')} </div> </div> </div> `; rulesAccordion.appendChild(accordionItem); // Add click event to accordion trigger const = accordionItem.querySelector('.accordion-trigger'); trigger.addEventListener('click', () => { const isOpen = accordionItem.classList.contains('open'); Close other items document.querySelectorAll('.accordion-item').forEach(item => { if (item !== accordionItem && item.classList.contains('open')) item.classList.remove('open'); const content = item.querySelector('.accordion-content'); content.style.maxHeight = '0'; (() => { content.style.maxHeight = ''; }, 300); Toggle current item if (isOpen) { accordionItem..remove('open'); const content = accordionItem.querySelector('.accordion-content'); content.style.maxHeight = '0'; } else { accordionItemclassList.add('open'); const content = accordionItem.querySelector('.accordion-content'); content.style.maxHeight = content.scrollHeight + 'px'; } }); }); } // ===== SMOOTH SCROLL ===== function SmoothScroll() { document.querySelectorAll('a[href^="#"]').forEach(anchor => anchor.addEventListener('click', function (e) { e.preventDefault(); const target = document.querySelector(this.getAttribute('href')); if (target { const navOffset = 80; const elementPosition = target.getBoundingClientRect().top; const offsetPosition = elementPosition + window.pageYOffset - navOffset window.scrollTo({ top: offsetPosition, behavior: 'smooth' }); } }); }); } // ===== NAVIGATIONATOR ===== function initializeNavIndicator() { const sections = document.querySelectorAll('section[id]'); const navIndicator = document.getElementById('navIndicator'); constDots = navIndicator.querySelectorAll('.nav-dot'); function updateNavIndicator() { const scrollPos = window.scrollY; let currentSection = ''; sections.forEach(section => { const sectionTop = section.offsetTop; const sectionHeight = section.clientHeight; if (scrollPos >= sectionTop - 00 && scrollPos < sectionTop + sectionHeight + 100) { currentSection = section.getAttribute('id'); } }); nav.forEach(dot => { dot.classList.remove('active'); if (dot.dataset.section === currentSection) { dot.classList.add('active'); } }); } window.addEventListener('scroll', updateNavIndicator); updateNavIndicator(); navDots.forEach(dot => dot.addEventListener('click', () => { const targetId = dot.dataset.section; const targetSection = document.getElementById(targetId); if (Section) { const navOffset = 80; const elementPosition = targetSection.getBoundingClientRect().top; const offsetPosition = elementPosition + window.pageYOffset navOffset; window.scrollTo({ top: offsetPosition, behavior: 'smooth' }); } }); }); } // ===== SCROLL EFFECT ===== window.addEventListener('scroll', () => { const scrolled = window.pageYOffset; const heroTitle = document.getElementById('hero-title const heroSubtitle = document.querySelector('.hero-subtitle'); const heroDescription = document.querySelector('.hero-description'); const heroCta = document.querySelector('.-cta'); if (heroTitle && scrolled < window.innerHeight) { heroTitle.style.transform = `translateY(${scrolled * 0.4})`; heroTitle.style.opacity = 1 - scrolled / window.innerHeight * 0.5; } if (heroSubtitle && scrolled < window.) { heroSubtitle.style.transform = `translateY(${scrolled * 0.3}px)`; heroSubtitle.style.opacity = 1 - scrolled /.innerHeight * 0.6; } if (heroDescription && scrolled < window.innerHeight) { heroDescription.style.transform = `translateY(${rolled * 0.2}px)`; heroDescription.style.opacity = 1 - scrolled / window.innerHeight * 0.7; } ifheroCta && scrolled < window.innerHeight) { heroCta.style.transform = `translateY(${scrolled * 0.1}px)`; heroCtastyle.opacity = 1 - scrolled / window.innerHeight * 0.8; } }); // ===== KEYBOARD NAVIGATION ===== document.addEventListener('keydown (e) => { if (e.key === 'Escape') { const openAccordions = document.querySelectorAll('.accordion-item.open'); openAccordions.(accordion => { accordion.classList.remove('open'); const content = accordion.querySelector('.accordion-content'); content.style.maxHeight = '0'; }); } }); // ===== RESPONSIVE HANDLING ===== window.addEventListener('resize', () => { const statusCard = document.getElementById('statusCard const accordionItems = document.querySelectorAll('.accordion-item'); if (window.innerWidth < 480) { statusCard.classList.add('glass accordionItems.forEach(item => { const trigger = item.querySelector('.accordion-trigger'); if (trigger) { trigger.classList.remove('fontoutfit'); } }); } else { statusCard.classList.remove('glass'); accordionItems.forEach(item => { const trigger =.querySelector('.accordion-trigger'); if (trigger) { trigger.classList.add('font-outfit'); } }); } }); // ===== PERFORMANCE OPTIMIZATION ===== const debounce = (func, wait) => { let timeout; return function executedFunction(...args) { const later = => { clearTimeout(timeout); func(...args); }; clearTimeout(timeout); timeout = setTimeout(later, wait); }; const throttledScroll = debounce(() => { // Scroll-dependent calculations here }, 16); window.addEventListener('scroll', throttledScroll); ===== ACCESSIBILITY ===== document.addEventListener('DOMContentLoaded', () => { const mainContent = document.querySelector('main') || document.body; mainContent.setAttributetabindex', '-1'); }); // Announce page load for screen readers window.addEventListener('load', () => { const announcement = document.createElement('div announcement.setAttribute('aria-live', 'polite'); announcement.setAttribute('aria-atomic', 'true'); announcement.style.position = ''; announcement.style.left = '-10000px'; announcement.textContent = 'LEMONMC website loaded successfully'; document.body.appendChildannouncement); setTimeout(() => announcement.remove(), 1000); }); </script> </body> </html>