{"id":10,"date":"2026-05-04T17:28:08","date_gmt":"2026-05-04T17:28:08","guid":{"rendered":"https:\/\/everstead.club\/?page_id=10"},"modified":"2026-05-05T18:00:21","modified_gmt":"2026-05-05T18:00:21","slug":"everstead-smp","status":"publish","type":"page","link":"https:\/\/everstead.club\/","title":{"rendered":"Everstead SMP"},"content":{"rendered":"\n\n\n\n\n\nEverstead \u2014 Survival SMP<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400&family=VT323&family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&display=swap\" rel=\"stylesheet\">\n<style>\n:root {\n --forest: #5c8a45;\n --forest-bright: #7db862;\n --forest-deep: #3d6030;\n --forest-glow: #4a7a36;\n --sage: #8ab878;\n --moss: #a4c290;\n --blood: #a83838;\n --night: #0b0f09;\n --night-deep: #050703;\n --night-soft: #111a0d;\n --night-warm: #192413;\n --parchment: #ddecd2;\n --aged: #b4cba0;\n --stone: #7a8a6e;\n --soft: #9aaf88;\n --shadow: rgba(0,0,0,0.55);\n --glow: rgba(92, 138, 69, 0.18);\n\n \/* Motion *\/\n --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);\n --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);\n --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);\n --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);\n}\n\n* { margin: 0; padding: 0; box-sizing: border-box; }\nhtml { scroll-behavior: smooth; }\n\nbody {\n font-family: 'Fraunces', serif;\n background: var(--night-deep);\n color: var(--parchment);\n overflow-x: hidden;\n line-height: 1.5;\n}\n\n::selection { background: var(--forest); color: var(--night-deep); }\n\n\/* ====================================================\n ANIMATED GRADIENT MESH BG\n==================================================== *\/\n.mesh-bg {\n position: fixed;\n inset: 0;\n z-index: 0;\n overflow: hidden;\n pointer-events: none;\n}\n\n.mesh-bg::before, .mesh-bg::after {\n content: '';\n position: absolute;\n border-radius: 50%;\n filter: blur(120px);\n opacity: 0.35;\n will-change: transform;\n}\n\n.mesh-bg::before {\n width: 60vw; height: 60vw;\n background: radial-gradient(circle, var(--forest-glow), transparent 70%);\n top: -10vw; left: -10vw;\n animation: drift1 28s var(--ease-in-out) infinite;\n}\n\n.mesh-bg::after {\n width: 50vw; height: 50vw;\n background: radial-gradient(circle, var(--forest-deep), transparent 70%);\n bottom: -10vw; right: -10vw;\n animation: drift2 32s var(--ease-in-out) infinite;\n}\n\n.mesh-bg .blob {\n position: absolute;\n border-radius: 50%;\n filter: blur(100px);\n opacity: 0.25;\n width: 40vw; height: 40vw;\n top: 40%; left: 40%;\n background: radial-gradient(circle, var(--forest), transparent 70%);\n animation: drift3 36s var(--ease-in-out) infinite;\n}\n\n@keyframes drift1 {\n 0%, 100% { transform: translate(0, 0) scale(1); }\n 33% { transform: translate(20vw, 15vh) scale(1.15); }\n 66% { transform: translate(-10vw, 30vh) scale(0.85); }\n}\n@keyframes drift2 {\n 0%, 100% { transform: translate(0, 0) scale(1); }\n 33% { transform: translate(-25vw, -20vh) scale(1.1); }\n 66% { transform: translate(15vw, -30vh) scale(0.9); }\n}\n@keyframes drift3 {\n 0%, 100% { transform: translate(-50%, -50%) scale(1); }\n 50% { transform: translate(-30%, -60%) scale(1.2); }\n}\n\n\/* ====================================================\n ATMOSPHERE \/ OVERLAY\n==================================================== *\/\n.atmosphere {\n position: fixed;\n inset: 0;\n pointer-events: none;\n z-index: 1;\n overflow: hidden;\n}\n\n.grain {\n position: absolute;\n inset: 0;\n background-image:\n radial-gradient(circle at 20% 30%, rgba(180, 220, 150, 0.018) 0%, transparent 1.5%),\n radial-gradient(circle at 70% 60%, rgba(180, 220, 150, 0.014) 0%, transparent 1.5%),\n radial-gradient(circle at 40% 80%, rgba(180, 220, 150, 0.018) 0%, transparent 1.5%),\n radial-gradient(circle at 90% 20%, rgba(180, 220, 150, 0.012) 0%, transparent 1.5%);\n background-size: 180px 180px, 240px 240px, 200px 200px, 160px 160px;\n opacity: 0.7;\n}\n\n.vignette {\n position: absolute;\n inset: 0;\n background: radial-gradient(ellipse at center, transparent 35%, rgba(0,0,0,0.65) 100%);\n}\n\n\/* Fireflies *\/\n.fireflies { position: absolute; inset: 0; }\n\n.firefly {\n position: absolute;\n width: 4px;\n height: 4px;\n background: var(--forest-bright);\n border-radius: 50%;\n box-shadow:\n 0 0 6px var(--forest-bright),\n 0 0 16px var(--forest-glow),\n 0 0 28px rgba(92,138,69,0.4);\n opacity: 0;\n animation: fly var(--dur, 14s) var(--ease-in-out) var(--delay, 0s) infinite;\n}\n\n@keyframes fly {\n 0% { transform: translate(0, 0) scale(0.6); opacity: 0; }\n 10% { opacity: 0.9; }\n 25% { transform: translate(var(--mx, 40px), var(--my, -60px)) scale(1); opacity: 0.7; }\n 50% { transform: translate(var(--mx2,-30px), var(--my2,-130px)) scale(0.95); opacity: 0.85; }\n 75% { transform: translate(var(--mx3, 20px), var(--my3,-200px)) scale(0.85); opacity: 0.5; }\n 100% { transform: translate(var(--mx4,-10px), var(--my4,-280px)) scale(0.5); opacity: 0; }\n}\n\n\/* ====================================================\n SCROLL PROGRESS BAR\n==================================================== *\/\n.scroll-progress {\n position: fixed;\n top: 0; left: 0;\n height: 2px;\n width: 0%;\n background: linear-gradient(90deg, var(--forest), var(--forest-bright), var(--moss));\n box-shadow: 0 0 12px var(--forest-bright);\n z-index: 200;\n transition: width 0.1s linear;\n}\n\n\/* ====================================================\n NAV\n==================================================== *\/\nnav {\n position: fixed;\n top: 0; left: 0; right: 0;\n z-index: 100;\n padding: 1.4rem 3rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n background: rgba(5, 7, 3, 0.4);\n backdrop-filter: blur(20px) saturate(120%);\n -webkit-backdrop-filter: blur(20px) saturate(120%);\n border-bottom: 1px solid rgba(92, 138, 69, 0.1);\n transition: all 0.6s var(--ease-out-expo);\n}\n\nnav.scrolled {\n padding: 1rem 3rem;\n background: rgba(5, 7, 3, 0.85);\n border-bottom-color: rgba(92, 138, 69, 0.2);\n box-shadow: 0 4px 32px rgba(0,0,0,0.5);\n}\n\n.logo {\n font-family: 'Cormorant Garamond', serif;\n font-weight: 600;\n font-size: 1.5rem;\n letter-spacing: 0.18em;\n color: var(--parchment);\n display: flex;\n align-items: center;\n gap: 0.75rem;\n text-decoration: none;\n transition: color 0.4s var(--ease-soft);\n}\n\n.logo:hover { color: var(--forest-bright); }\n\n.logo-mark {\n width: 26px; height: 26px;\n background: var(--forest);\n border-radius: 3px;\n position: relative;\n transform: rotate(45deg);\n box-shadow: 0 0 16px var(--forest), 0 0 32px rgba(61,96,48,0.5);\n animation: logoPulse 4s var(--ease-in-out) infinite;\n transition: transform 0.5s var(--ease-spring);\n}\n\n.logo:hover .logo-mark { transform: rotate(135deg); }\n\n@keyframes logoPulse {\n 0%, 100% { box-shadow: 0 0 16px var(--forest), 0 0 32px rgba(61,96,48,0.5); }\n 50% { box-shadow: 0 0 24px var(--forest-bright), 0 0 48px rgba(92,138,69,0.6); }\n}\n\n.logo-mark::after {\n content: '';\n position: absolute;\n inset: 6px;\n background: var(--night-deep);\n border-radius: 1px;\n}\n\n.nav-links { display: flex; gap: 2.5rem; list-style: none; }\n\n.nav-links a {\n font-family: 'VT323', monospace;\n font-size: 1.2rem;\n color: var(--soft);\n text-decoration: none;\n letter-spacing: 0.1em;\n position: relative;\n transition: color 0.4s var(--ease-soft);\n padding: 0.3rem 0;\n}\n\n.nav-links a::after {\n content: '';\n position: absolute;\n bottom: 0; left: 0;\n width: 0; height: 1px;\n background: var(--forest-bright);\n box-shadow: 0 0 8px var(--forest-bright);\n transition: width 0.5s var(--ease-out-expo);\n}\n\n.nav-links a:hover { color: var(--forest-bright); }\n.nav-links a:hover::after { width: 100%; }\n\n.nav-ip {\n font-family: 'VT323', monospace;\n font-size: 1rem;\n color: var(--sage);\n background: rgba(0,0,0,0.4);\n padding: 0.45rem 1.1rem;\n border: 1px dashed rgba(92,138,69,0.4);\n border-radius: 3px;\n cursor: pointer;\n letter-spacing: 0.1em;\n transition: all 0.5s var(--ease-out-expo);\n}\n\n.nav-ip:hover {\n background: var(--forest);\n color: var(--night-deep);\n border-style: solid;\n border-color: var(--forest);\n transform: translateY(-1px);\n box-shadow: 0 4px 16px rgba(92,138,69,0.3);\n}\n\n\/* ====================================================\n HERO\n==================================================== *\/\n.hero {\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n padding: 8rem 2rem 4rem;\n position: relative;\n text-align: center;\n z-index: 3;\n}\n\n.hero-glow {\n position: absolute;\n top: 50%; left: 50%;\n width: 1000px; height: 1000px;\n transform: translate(-50%, -50%);\n background: radial-gradient(circle,\n rgba(92,138,69,0.25) 0%,\n rgba(61,96,48,0.10) 35%,\n transparent 65%);\n pointer-events: none;\n z-index: -1;\n animation: heroPulse 8s var(--ease-in-out) infinite;\n will-change: transform;\n}\n\n@keyframes heroPulse {\n 0%, 100% { opacity: 0.7; transform: translate(-50%,-50%) scale(1); }\n 50% { opacity: 1; transform: translate(-50%,-50%) scale(1.15); }\n}\n\n\/* SVG corner ornaments *\/\n.hero-corner {\n position: absolute;\n width: 120px; height: 120px;\n opacity: 0;\n pointer-events: none;\n animation: cornerFade 1.5s var(--ease-out-expo) 0.8s forwards;\n}\n.hero-corner.tl { top: 100px; left: 40px; }\n.hero-corner.tr { top: 100px; right: 40px; transform: scaleX(-1); }\n.hero-corner.bl { bottom: 60px; left: 40px; transform: scaleY(-1); }\n.hero-corner.br { bottom: 60px; right: 40px; transform: scale(-1,-1); }\n\n@keyframes cornerFade {\n to { opacity: 0.25; }\n}\n\n.hero-eyebrow {\n font-family: 'VT323', monospace;\n font-size: 1.1rem;\n color: var(--forest-bright);\n letter-spacing: 0.5em;\n text-transform: uppercase;\n margin-bottom: 2rem;\n opacity: 0;\n animation: fadeUp 1.2s var(--ease-out-expo) 0.2s forwards;\n text-shadow: 0 0 20px rgba(125,184,98,0.6);\n display: flex;\n align-items: center;\n gap: 1rem;\n}\n\n.hero-eyebrow .dot {\n width: 6px; height: 6px;\n background: var(--forest-bright);\n border-radius: 50%;\n box-shadow: 0 0 12px var(--forest-bright);\n animation: blink 2s var(--ease-in-out) infinite;\n}\n\n@keyframes blink {\n 0%, 100% { opacity: 1; transform: scale(1); }\n 50% { opacity: 0.2; transform: scale(0.7); }\n}\n\n.hero h1 {\n font-family: 'Cormorant Garamond', serif;\n font-weight: 500;\n font-size: clamp(4rem, 13vw, 10rem);\n line-height: 0.92;\n letter-spacing: -0.025em;\n margin-bottom: 2rem;\n color: var(--parchment);\n perspective: 1000px;\n}\n\n\/* Letter-by-letter reveal *\/\n.hero h1 .word { display: inline-block; }\n.hero h1 .char {\n display: inline-block;\n opacity: 0;\n transform: translateY(60px) rotateX(-40deg);\n animation: charReveal 1s var(--ease-out-expo) forwards;\n}\n\n@keyframes charReveal {\n to { opacity: 1; transform: translateY(0) rotateX(0); }\n}\n\n.hero h1 em {\n font-style: italic;\n color: var(--forest-bright);\n font-weight: 400;\n text-shadow: 0 0 60px rgba(125,184,98,0.6);\n}\n\n.hero-sub {\n font-size: 1.35rem;\n font-style: italic;\n color: var(--aged);\n max-width: 620px;\n line-height: 1.65;\n margin-bottom: 3rem;\n opacity: 0;\n animation: fadeUp 1.2s var(--ease-out-expo) 1.4s forwards;\n}\n\n.hero-cta {\n display: flex;\n gap: 1.2rem;\n flex-wrap: wrap;\n justify-content: center;\n opacity: 0;\n animation: fadeUp 1.2s var(--ease-out-expo) 1.6s forwards;\n}\n\n.scroll-cue {\n position: absolute;\n bottom: 2.5rem; left: 50%;\n transform: translateX(-50%);\n font-family: 'VT323', monospace;\n font-size: 0.85rem;\n color: var(--stone);\n letter-spacing: 0.4em;\n text-transform: uppercase;\n opacity: 0;\n animation: fadeUp 1s var(--ease-out-expo) 2s forwards, bob 3.5s var(--ease-in-out) 3s infinite;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 0.5rem;\n}\n\n.scroll-cue::after {\n content: '';\n width: 1px; height: 40px;\n background: linear-gradient(to bottom, var(--forest-bright), transparent);\n}\n\n@keyframes bob {\n 0%, 100% { transform: translateX(-50%) translateY(0); }\n 50% { transform: translateX(-50%) translateY(10px); }\n}\n\n\/* ====================================================\n BUTTONS\n==================================================== *\/\n.btn {\n font-family: 'Cormorant Garamond', serif;\n font-size: 1.1rem;\n letter-spacing: 0.18em;\n padding: 1.1rem 2.5rem;\n text-decoration: none;\n border-radius: 2px;\n text-transform: uppercase;\n font-weight: 600;\n display: inline-flex;\n align-items: center;\n gap: 0.6rem;\n cursor: pointer;\n border: none;\n position: relative;\n overflow: hidden;\n transition: transform 0.5s var(--ease-out-expo), box-shadow 0.5s var(--ease-out-expo), background 0.4s var(--ease-soft), border-color 0.4s var(--ease-soft), color 0.4s var(--ease-soft);\n will-change: transform;\n}\n\n.btn-primary {\n background: var(--forest);\n color: var(--night-deep);\n border: 1px solid var(--forest);\n box-shadow: 0 4px 24px rgba(92,138,69,0.4), 0 0 40px rgba(92,138,69,0.15);\n}\n\n.btn-primary::before {\n content: '';\n position: absolute;\n inset: 0;\n background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.3) 50%, transparent 70%);\n transform: translateX(-100%);\n transition: transform 0.8s var(--ease-out-expo);\n}\n\n.btn-primary:hover::before { transform: translateX(100%); }\n\n.btn-primary:hover {\n background: var(--forest-bright);\n border-color: var(--forest-bright);\n transform: translateY(-3px) scale(1.02);\n box-shadow: 0 12px 40px rgba(125,184,98,0.5), 0 0 60px rgba(92,138,69,0.4);\n}\n\n.btn-ghost {\n background: transparent;\n color: var(--parchment);\n border: 1px solid rgba(221,236,210,0.3);\n}\n\n.btn-ghost:hover {\n background: rgba(92,138,69,0.15);\n border-color: var(--forest-bright);\n color: var(--forest-bright);\n transform: translateY(-3px) scale(1.02);\n box-shadow: 0 8px 28px rgba(92,138,69,0.2);\n}\n\n.btn-discord {\n background: #5865F2;\n color: white;\n border: 1px solid #5865F2;\n box-shadow: 0 4px 20px rgba(88,101,242,0.4);\n}\n\n.btn-discord:hover {\n background: #6f7bf5;\n border-color: #6f7bf5;\n transform: translateY(-3px) scale(1.02);\n box-shadow: 0 12px 40px rgba(88,101,242,0.5);\n}\n\n\/* ====================================================\n SECTION DIVIDERS (curved SVG)\n==================================================== *\/\n.divider {\n position: relative;\n width: 100%;\n height: 100px;\n z-index: 4;\n margin-top: -50px;\n margin-bottom: -50px;\n pointer-events: none;\n}\n\n.divider svg {\n width: 100%;\n height: 100%;\n display: block;\n}\n\nsection { position: relative; z-index: 3; }\n\n.section-eyebrow {\n font-family: 'VT323', monospace;\n font-size: 1.05rem;\n color: var(--forest-bright);\n letter-spacing: 0.5em;\n text-transform: uppercase;\n margin-bottom: 1rem;\n text-shadow: 0 0 16px rgba(125,184,98,0.45);\n}\n\n.section-title {\n font-family: 'Cormorant Garamond', serif;\n font-weight: 500;\n line-height: 1;\n color: var(--parchment);\n letter-spacing: -0.02em;\n}\n\n.section-title em {\n font-style: italic;\n color: var(--forest-bright);\n text-shadow: 0 0 30px rgba(125,184,98,0.4);\n}\n\n\/* ====================================================\n TENETS\n==================================================== *\/\n.tenets {\n padding: 12rem 2rem 10rem;\n max-width: 1200px;\n margin: 0 auto;\n}\n\n.tenets-header {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 4rem;\n align-items: end;\n margin-bottom: 6rem;\n}\n\n.tenets-header h2 { font-size: clamp(3rem, 7vw, 5.5rem); }\n\n.tenets-header .lead {\n font-size: 1.2rem;\n font-style: italic;\n color: var(--aged);\n line-height: 1.7;\n padding-bottom: 0.5rem;\n}\n\n\/* TIMELINE LIST *\/\n.tenets-list {\n display: grid;\n gap: 0;\n position: relative;\n padding-left: 60px;\n}\n\n\/* Vertical timeline spine *\/\n.tenets-list::before {\n content: '';\n position: absolute;\n left: 24px;\n top: 80px;\n bottom: 80px;\n width: 1px;\n background: linear-gradient(\n to bottom,\n transparent,\n rgba(92,138,69,0.4) 15%,\n rgba(92,138,69,0.4) 85%,\n transparent\n );\n}\n\n\/* Animated glow that travels down the spine *\/\n.tenets-list::after {\n content: '';\n position: absolute;\n left: 23px;\n top: 80px;\n width: 3px;\n height: 80px;\n background: linear-gradient(\n to bottom,\n transparent,\n var(--forest-bright),\n transparent\n );\n filter: blur(2px);\n opacity: 0.6;\n animation: spineFlow 6s var(--ease-in-out) infinite;\n pointer-events: none;\n}\n\n@keyframes spineFlow {\n 0% { top: 80px; opacity: 0; }\n 10% { opacity: 0.7; }\n 90% { opacity: 0.7; }\n 100% { top: calc(100% - 160px); opacity: 0; }\n}\n\n.tenet {\n display: grid;\n grid-template-columns: 90px 1fr 200px;\n gap: 2.5rem;\n padding: 3.5rem 0;\n align-items: center;\n cursor: default;\n position: relative;\n transition:\n transform 0.9s var(--ease-out-expo),\n background 0.7s var(--ease-soft);\n border-radius: 4px;\n}\n\n\/* Soft horizontal divider that fades at edges (replaces hard border) *\/\n.tenet:not(:first-child)::before {\n content: '';\n position: absolute;\n top: 0;\n left: 10%;\n right: 10%;\n height: 1px;\n background: linear-gradient(\n 90deg,\n transparent,\n rgba(92,138,69,0.18) 30%,\n rgba(92,138,69,0.18) 70%,\n transparent\n );\n transition: opacity 0.6s var(--ease-soft);\n}\n\n\/* Subtle gradient sweep on hover \u2014 replaces the harsh padding shift *\/\n.tenet::after {\n content: '';\n position: absolute;\n inset: 0;\n background: linear-gradient(\n 90deg,\n rgba(92,138,69,0.08) 0%,\n rgba(92,138,69,0.04) 30%,\n transparent 70%\n );\n opacity: 0;\n border-radius: 4px;\n transition: opacity 0.7s var(--ease-out-expo);\n pointer-events: none;\n}\n\n\/* Timeline dot \u2014 sits on the spine *\/\n.tenet-dot {\n position: absolute;\n left: -41px;\n top: 50%;\n width: 12px;\n height: 12px;\n background: var(--night-deep);\n border: 2px solid var(--forest);\n border-radius: 50%;\n transform: translateY(-50%);\n transition:\n transform 0.7s var(--ease-spring),\n background 0.6s var(--ease-soft),\n border-color 0.6s var(--ease-soft),\n box-shadow 0.6s var(--ease-out-expo);\n z-index: 2;\n}\n\n.tenet-dot::after {\n content: '';\n position: absolute;\n inset: -6px;\n border: 1px solid rgba(92,138,69,0.3);\n border-radius: 50%;\n opacity: 0;\n transform: scale(0.5);\n transition:\n opacity 0.6s var(--ease-out-expo),\n transform 0.6s var(--ease-spring);\n}\n\n\/* HOVER: gentle lift + glow, no jarring padding shift *\/\n.tenet:hover {\n transform: translateX(8px);\n}\n\n.tenet:hover::after { opacity: 1; }\n\n.tenet:hover .tenet-dot {\n background: var(--forest-bright);\n border-color: var(--forest-bright);\n transform: translateY(-50%) scale(1.4);\n box-shadow:\n 0 0 0 4px rgba(125,184,98,0.15),\n 0 0 20px var(--forest-bright),\n 0 0 40px rgba(125,184,98,0.4);\n}\n\n.tenet:hover .tenet-dot::after {\n opacity: 1;\n transform: scale(1);\n}\n\n.tenet:hover .tenet-num {\n color: var(--forest-bright);\n letter-spacing: 0.04em;\n text-shadow: 0 0 30px rgba(125,184,98,0.6);\n}\n\n.tenet:hover .tenet-icon {\n transform: translateX(-12px) rotate(-8deg) scale(1.18);\n filter: drop-shadow(0 0 20px rgba(125,184,98,0.6));\n}\n\n.tenet:hover .tenet-content h3 {\n color: var(--forest-bright);\n letter-spacing: 0;\n}\n\n.tenet:hover .tenet-content p { color: var(--aged); }\n\n.tenet-num {\n font-family: 'Cormorant Garamond', serif;\n font-style: italic;\n font-size: 3.2rem;\n color: var(--forest);\n font-weight: 500;\n text-shadow: 0 0 20px rgba(92,138,69,0.35);\n transition:\n color 0.6s var(--ease-soft),\n letter-spacing 0.7s var(--ease-out-expo),\n text-shadow 0.6s var(--ease-soft);\n letter-spacing: 0;\n}\n\n.tenet-content h3 {\n font-family: 'Cormorant Garamond', serif;\n font-size: 2rem;\n font-weight: 600;\n margin-bottom: 0.6rem;\n color: var(--parchment);\n letter-spacing: -0.005em;\n transition:\n color 0.6s var(--ease-soft),\n letter-spacing 0.7s var(--ease-out-expo);\n}\n\n.tenet-content h3 em { font-style: italic; color: var(--forest-bright); }\n\n.tenet-content p {\n color: var(--soft);\n line-height: 1.7;\n font-size: 1.05rem;\n max-width: 520px;\n transition: color 0.6s var(--ease-soft);\n}\n\n.tenet-icon {\n font-size: 3.5rem;\n text-align: right;\n filter: drop-shadow(0 0 12px rgba(92,138,69,0.4));\n transition:\n transform 0.8s var(--ease-spring),\n filter 0.6s var(--ease-soft);\n animation: tenetIconFloat 5s var(--ease-in-out) infinite;\n}\n\n.tenet:nth-child(2) .tenet-icon { animation-delay: -1.2s; }\n.tenet:nth-child(3) .tenet-icon { animation-delay: -2.4s; }\n.tenet:nth-child(4) .tenet-icon { animation-delay: -3.6s; }\n\n@keyframes tenetIconFloat {\n 0%, 100% { transform: translateY(0); }\n 50% { transform: translateY(-6px); }\n}\n\n\/* ====================================================\n RULES\n==================================================== *\/\n.rules {\n padding: 10rem 2rem;\n max-width: 1100px;\n margin: 0 auto;\n position: relative;\n}\n\n.rules-header {\n text-align: center;\n margin-bottom: 5rem;\n position: relative;\n}\n\n.rules-header h2 { font-size: clamp(3rem, 7vw, 5rem); }\n\n.rules-tldr {\n margin: 2rem auto 0;\n max-width: 600px;\n padding: 1.5rem 2rem;\n background: rgba(17,26,13,0.7);\n border: 1px dashed rgba(92,138,69,0.35);\n border-radius: 3px;\n font-style: italic;\n color: var(--aged);\n font-size: 1.1rem;\n line-height: 1.6;\n backdrop-filter: blur(10px);\n -webkit-backdrop-filter: blur(10px);\n}\n\n.rules-tldr strong {\n color: var(--forest-bright);\n font-style: normal;\n font-weight: 600;\n letter-spacing: 0.1em;\n font-family: 'VT323', monospace;\n font-size: 1rem;\n display: block;\n margin-bottom: 0.4rem;\n}\n\n.rules-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 2rem;\n position: relative;\n}\n\n.rule-pillar {\n background: linear-gradient(160deg, var(--night-soft), var(--night-warm));\n border: 1px solid rgba(92,138,69,0.15);\n border-radius: 4px;\n padding: 2.5rem 2rem;\n position: relative;\n overflow: hidden;\n transition: all 0.6s var(--ease-out-expo);\n backdrop-filter: blur(8px);\n -webkit-backdrop-filter: blur(8px);\n}\n\n.rule-pillar::before {\n content: '';\n position: absolute;\n top: 0; left: 0; right: 0;\n height: 2px;\n background: linear-gradient(90deg, transparent, var(--forest-bright), transparent);\n box-shadow: 0 0 16px var(--forest-bright);\n transform: scaleX(0);\n transition: transform 0.7s var(--ease-out-expo);\n}\n\n.rule-pillar::after {\n content: '';\n position: absolute;\n inset: 0;\n background: radial-gradient(circle at top, rgba(92,138,69,0.1), transparent 60%);\n opacity: 0;\n transition: opacity 0.6s var(--ease-soft);\n pointer-events: none;\n}\n\n.rule-pillar:hover {\n transform: translateY(-8px);\n border-color: rgba(92,138,69,0.45);\n box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 40px var(--glow);\n}\n\n.rule-pillar:hover::before { transform: scaleX(1); }\n.rule-pillar:hover::after { opacity: 1; }\n\n.pillar-icon {\n font-size: 2rem;\n margin-bottom: 1rem;\n filter: drop-shadow(0 0 12px rgba(92,138,69,0.5));\n transition: transform 0.5s var(--ease-spring);\n}\n\n.rule-pillar:hover .pillar-icon { transform: scale(1.15) rotate(-5deg); }\n\n.pillar-title {\n font-family: 'Cormorant Garamond', serif;\n font-size: 1.6rem;\n font-weight: 600;\n margin-bottom: 1.5rem;\n color: var(--parchment);\n padding-bottom: 1rem;\n border-bottom: 1px solid rgba(92,138,69,0.2);\n}\n\n.pillar-title em { font-style: italic; color: var(--forest-bright); }\n\n.pillar-rules { list-style: none; display: flex; flex-direction: column; gap: 0.85rem; }\n\n.pillar-rules li {\n display: flex;\n align-items: flex-start;\n gap: 0.75rem;\n font-size: 1rem;\n color: var(--soft);\n line-height: 1.5;\n transition: all 0.4s var(--ease-soft);\n}\n\n.pillar-rules li:hover { padding-left: 0.5rem; color: var(--parchment); }\n\n.mark { font-size: 1.05rem; min-width: 1.2rem; margin-top: 0.1rem; }\n.yes { color: var(--forest-bright); }\n.no { color: var(--blood); }\n\n.pillar-rules strong { color: var(--parchment); font-weight: 600; }\n\n.staff-banner {\n margin-top: 4rem;\n padding: 2.5rem;\n background: linear-gradient(135deg, rgba(61,96,48,0.12), rgba(17,26,13,0.7));\n border: 1px solid rgba(92,138,69,0.3);\n border-radius: 4px;\n text-align: center;\n position: relative;\n overflow: hidden;\n backdrop-filter: blur(10px);\n -webkit-backdrop-filter: blur(10px);\n}\n\n.staff-banner::before {\n content: '\ud83d\udee1\ufe0f';\n position: absolute;\n font-size: 12rem;\n opacity: 0.04;\n top: 50%; left: 50%;\n transform: translate(-50%,-50%);\n pointer-events: none;\n transition: transform 1s var(--ease-out-expo);\n}\n\n.staff-banner:hover::before {\n transform: translate(-50%,-50%) scale(1.1) rotate(-5deg);\n}\n\n.staff-banner h3 {\n font-family: 'Cormorant Garamond', serif;\n font-size: 2rem;\n font-weight: 600;\n margin-bottom: 0.6rem;\n color: var(--parchment);\n position: relative;\n}\n\n.staff-banner h3 em { font-style: italic; color: var(--forest-bright); }\n\n.staff-banner p {\n color: var(--aged);\n font-style: italic;\n position: relative;\n font-size: 1.05rem;\n}\n\n\/* ====================================================\n JOIN\n==================================================== *\/\n.join {\n padding: 10rem 2rem;\n position: relative;\n overflow: hidden;\n background: linear-gradient(180deg, transparent, var(--night) 30%, var(--night) 70%, transparent);\n}\n\n.join::before {\n content: '';\n position: absolute;\n inset: 0;\n background:\n radial-gradient(circle at 15% 50%, rgba(61,96,48,0.22) 0%, transparent 50%),\n radial-gradient(circle at 85% 50%, rgba(92,138,69,0.14) 0%, transparent 50%);\n pointer-events: none;\n}\n\n.join-inner {\n max-width: 1100px;\n margin: 0 auto;\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 5rem;\n align-items: center;\n position: relative;\n}\n\n.join-text h2 { font-size: clamp(3rem, 6vw, 4.5rem); margin-bottom: 1.5rem; }\n\n.join-text p {\n font-size: 1.2rem;\n font-style: italic;\n color: var(--aged);\n line-height: 1.7;\n margin-bottom: 2.5rem;\n}\n\n.join-cta-row { display: flex; gap: 1rem; flex-wrap: wrap; }\n\n.ip-card {\n background: linear-gradient(145deg, var(--night-soft), var(--night-warm));\n border: 1px solid rgba(92,138,69,0.3);\n border-radius: 6px;\n padding: 3rem 2.5rem;\n position: relative;\n box-shadow: 0 16px 56px rgba(0,0,0,0.6), 0 0 70px var(--glow);\n overflow: hidden;\n transition: transform 0.6s var(--ease-out-expo), box-shadow 0.6s var(--ease-out-expo);\n backdrop-filter: blur(12px);\n -webkit-backdrop-filter: blur(12px);\n}\n\n.ip-card:hover {\n transform: translateY(-6px);\n box-shadow: 0 28px 80px rgba(0,0,0,0.7), 0 0 100px rgba(92,138,69,0.25);\n}\n\n.ip-card::after {\n content: '';\n position: absolute;\n inset: 0;\n background: radial-gradient(circle at top right, rgba(92,138,69,0.18) 0%, transparent 60%);\n pointer-events: none;\n}\n\n.ip-card-corner {\n position: absolute;\n font-family: 'VT323', monospace;\n font-size: 0.8rem;\n color: var(--stone);\n letter-spacing: 0.2em;\n z-index: 1;\n}\n.ip-card-corner.tl { top: 1rem; left: 1.5rem; }\n.ip-card-corner.tr { top: 1rem; right: 1.5rem; color: var(--forest-bright); }\n.ip-card-corner.tr::before {\n content: '\u25cf';\n margin-right: 0.4rem;\n animation: blink 2s var(--ease-in-out) infinite;\n}\n\n.ip-label {\n font-family: 'VT323', monospace;\n font-size: 0.95rem;\n color: var(--stone);\n letter-spacing: 0.3em;\n text-transform: uppercase;\n margin: 1.5rem 0 0.8rem;\n position: relative;\n z-index: 1;\n}\n\n.ip-address {\n font-family: 'VT323', monospace;\n font-size: clamp(1.8rem, 4vw, 2.5rem);\n color: var(--sage);\n letter-spacing: 0.05em;\n text-shadow: 0 0 16px rgba(138,184,120,0.6);\n cursor: pointer;\n transition: color 0.4s var(--ease-soft), text-shadow 0.4s var(--ease-soft);\n word-break: break-all;\n margin-bottom: 1rem;\n position: relative;\n z-index: 1;\n display: block;\n}\n\n.ip-address:hover {\n color: var(--parchment);\n text-shadow: 0 0 24px rgba(221,236,210,0.7);\n}\n\n.ip-version {\n font-family: 'VT323', monospace;\n font-size: 0.95rem;\n color: var(--soft);\n letter-spacing: 0.2em;\n margin-bottom: 1.5rem;\n position: relative;\n z-index: 1;\n}\n\n.ip-version strong { color: var(--forest-bright); font-weight: normal; }\n\n.ip-divider {\n height: 1px;\n background: linear-gradient(90deg, transparent, rgba(92,138,69,0.3), transparent);\n margin: 1.5rem 0;\n position: relative;\n z-index: 1;\n}\n\n.ip-copy-btn {\n background: var(--forest);\n color: var(--night-deep);\n border: none;\n padding: 0.95rem 1.8rem;\n font-family: 'VT323', monospace;\n font-size: 1.05rem;\n letter-spacing: 0.2em;\n cursor: pointer;\n border-radius: 3px;\n text-transform: uppercase;\n transition: all 0.5s var(--ease-out-expo);\n width: 100%;\n font-weight: bold;\n position: relative;\n z-index: 1;\n overflow: hidden;\n}\n\n.ip-copy-btn::before {\n content: '';\n position: absolute;\n inset: 0;\n background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.3) 50%, transparent 70%);\n transform: translateX(-100%);\n transition: transform 0.7s var(--ease-out-expo);\n}\n\n.ip-copy-btn:hover::before { transform: translateX(100%); }\n\n.ip-copy-btn:hover {\n background: var(--forest-bright);\n box-shadow: 0 6px 28px rgba(92,138,69,0.5);\n transform: translateY(-2px);\n}\n\n\/* ====================================================\n FOOTER\n==================================================== *\/\nfooter {\n padding: 4rem 2rem 2rem;\n text-align: center;\n background: var(--night-deep);\n position: relative;\n z-index: 3;\n}\n\n.footer-mark {\n font-family: 'Cormorant Garamond', serif;\n font-size: 2rem;\n font-weight: 500;\n color: var(--parchment);\n letter-spacing: 0.3em;\n margin-bottom: 0.5rem;\n}\n\n.footer-mark em {\n font-style: italic;\n color: var(--forest-bright);\n text-shadow: 0 0 20px rgba(125,184,98,0.45);\n}\n\n.footer-tag {\n font-family: 'VT323', monospace;\n font-size: 1rem;\n color: var(--stone);\n letter-spacing: 0.3em;\n margin-bottom: 2rem;\n}\n\n.footer-divider {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 1rem;\n margin: 2rem auto;\n max-width: 400px;\n}\n\n.footer-divider .line { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(92,138,69,0.3), transparent); }\n.footer-divider .ornament { color: var(--forest-bright); font-size: 1rem; }\n\n.footer-meta {\n font-family: 'VT323', monospace;\n font-size: 0.9rem;\n color: var(--stone);\n letter-spacing: 0.2em;\n opacity: 0.7;\n}\n\n\/* ====================================================\n ANIMATIONS \/ REVEAL\n==================================================== *\/\n@keyframes fadeUp {\n from { opacity: 0; transform: translateY(40px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n.reveal {\n opacity: 0;\n transform: translateY(50px);\n transition: opacity 1s var(--ease-out-expo), transform 1s var(--ease-out-expo);\n}\n\n.reveal.visible {\n opacity: 1;\n transform: translateY(0);\n}\n\n\/* ====================================================\n TOAST\n==================================================== *\/\n.toast {\n position: fixed;\n bottom: 2rem; left: 50%;\n transform: translateX(-50%) translateY(100px) scale(0.9);\n background: var(--forest);\n color: var(--night-deep);\n padding: 1rem 2rem;\n border-radius: 4px;\n font-family: 'VT323', monospace;\n letter-spacing: 0.2em;\n box-shadow: 0 12px 40px rgba(92,138,69,0.5), 0 0 32px rgba(92,138,69,0.3);\n transition: transform 0.6s var(--ease-spring), opacity 0.4s var(--ease-soft);\n z-index: 200;\n text-transform: uppercase;\n font-weight: bold;\n font-size: 1rem;\n opacity: 0;\n}\n\n.toast.show {\n transform: translateX(-50%) translateY(0) scale(1);\n opacity: 1;\n}\n\n\/* ====================================================\n RESPONSIVE\n==================================================== *\/\n@media (max-width: 900px) {\n .tenets-header { grid-template-columns: 1fr; gap: 2rem; }\n .tenets-list { padding-left: 36px; }\n .tenets-list::before { left: 12px; }\n .tenets-list::after { left: 11px; }\n .tenet { grid-template-columns: 60px 1fr; gap: 1.5rem; padding: 2.5rem 0; }\n .tenet-icon { display: none; }\n .tenet-num { font-size: 2rem; }\n .tenet-content h3 { font-size: 1.5rem; }\n .tenet-dot { left: -29px; width: 10px; height: 10px; }\n .rules-grid { grid-template-columns: 1fr; }\n .join-inner { grid-template-columns: 1fr; gap: 3rem; }\n}\n\n@media (max-width: 768px) {\n nav { padding: 1rem 1.2rem; }\n nav.scrolled { padding: 0.75rem 1.2rem; }\n .nav-links { gap: 1rem; }\n .nav-links a { font-size: 1rem; }\n .nav-ip { display: none; }\n .logo { font-size: 1.1rem; }\n .hero { padding: 7rem 1.2rem 4rem; }\n .hero-corner { display: none; }\n .tenets, .rules, .join { padding: 6rem 1.2rem; }\n .ip-card { padding: 2rem 1.5rem; }\n}\n\n\/* Reduce motion *\/\n@media (prefers-reduced-motion: reduce) {\n *, *::before, *::after {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n }\n}\n<\/style>\n<\/head>\n<body>\n\n<!-- Scroll progress -->\n<div class=\"scroll-progress\" id=\"scrollProgress\"><\/div>\n\n<!-- Animated mesh background -->\n<div class=\"mesh-bg\">\n <div class=\"blob\"><\/div>\n<\/div>\n\n<!-- Atmosphere overlay -->\n<div class=\"atmosphere\">\n <div class=\"grain\"><\/div>\n <div class=\"fireflies\">\n <div class=\"firefly\" style=\"left:8%; bottom:15%; --dur:14s; --delay:0s; --mx:50px; --my:-80px; --mx2:-30px; --my2:-160px; --mx3:25px; --my3:-240px; --mx4:-15px; --my4:-320px;\"><\/div>\n <div class=\"firefly\" style=\"left:18%; bottom:25%; --dur:16s; --delay:1.5s; --mx:-40px; --my:-70px; --mx2:50px; --my2:-150px; --mx3:-20px; --my3:-220px; --mx4:30px; --my4:-300px;\"><\/div>\n <div class=\"firefly\" style=\"left:28%; bottom:10%; --dur:13s; --delay:2.8s; --mx:60px; --my:-90px; --mx2:-50px; --my2:-170px; --mx3:35px; --my3:-250px; --mx4:-20px; --my4:-330px;\"><\/div>\n <div class=\"firefly\" style=\"left:38%; bottom:20%; --dur:15s; --delay:0.8s; --mx:-30px; --my:-60px; --mx2:40px; --my2:-140px; --mx3:-15px; --my3:-200px; --mx4:25px; --my4:-280px;\"><\/div>\n <div class=\"firefly\" style=\"left:50%; bottom:8%; --dur:18s; --delay:3.5s; --mx:45px; --my:-100px; --mx2:-60px; --my2:-180px; --mx3:25px; --my3:-260px; --mx4:-40px; --my4:-340px;\"><\/div>\n <div class=\"firefly\" style=\"left:60%; bottom:30%; --dur:14s; --delay:1.2s; --mx:-55px; --my:-75px; --mx2:35px; --my2:-145px; --mx3:-20px; --my3:-215px; --mx4:45px; --my4:-295px;\"><\/div>\n <div class=\"firefly\" style=\"left:70%; bottom:15%; --dur:17s; --delay:4.0s; --mx:30px; --my:-85px; --mx2:-45px; --my2:-165px; --mx3:40px; --my3:-245px; --mx4:-25px; --my4:-325px;\"><\/div>\n <div class=\"firefly\" style=\"left:80%; bottom:22%; --dur:14s; --delay:2.2s; --mx:-20px; --my:-65px; --mx2:55px; --my2:-135px; --mx3:-30px; --my3:-205px; --mx4:20px; --my4:-285px;\"><\/div>\n <div class=\"firefly\" style=\"left:90%; bottom:14%; --dur:16s; --delay:5.0s; --mx:40px; --my:-95px; --mx2:-35px; --my2:-175px; --mx3:20px; --my3:-255px; --mx4:-30px; --my4:-335px;\"><\/div>\n <div class=\"firefly\" style=\"left:13%; bottom:35%; --dur:12s; --delay:6.5s; --mx:-60px; --my:-55px; --mx2:25px; --my2:-125px; --mx3:-35px; --my3:-195px; --mx4:50px; --my4:-275px;\"><\/div>\n <div class=\"firefly\" style=\"left:45%; bottom:28%; --dur:15s; --delay:3.0s; --mx:35px; --my:-78px; --mx2:-42px; --my2:-158px; --mx3:22px; --my3:-228px; --mx4:-18px; --my4:-308px;\"><\/div>\n <div class=\"firefly\" style=\"left:73%; bottom:40%; --dur:13s; --delay:7.0s; --mx:-48px; --my:-68px; --mx2:38px; --my2:-148px; --mx3:-25px; --my3:-208px; --mx4:32px; --my4:-288px;\"><\/div>\n <div class=\"firefly\" style=\"left:55%; bottom:45%; --dur:18s; --delay:4.5s; --mx:55px; --my:-88px; --mx2:-65px; --my2:-168px; --mx3:35px; --my3:-238px; --mx4:-50px; --my4:-318px;\"><\/div>\n <div class=\"firefly\" style=\"left:33%; bottom:50%; --dur:11s; --delay:1.8s; --mx:-25px; --my:-72px; --mx2:48px; --my2:-152px; --mx3:-15px; --my3:-212px; --mx4:35px; --my4:-292px;\"><\/div>\n <\/div>\n <div class=\"vignette\"><\/div>\n<\/div>\n\n<!-- NAV -->\n<nav id=\"nav\">\n <a href=\"#\" class=\"logo\">\n <span class=\"logo-mark\"><\/span>\n EVERSTEAD\n <\/a>\n <ul class=\"nav-links\">\n <li><a href=\"#tenets\">World<\/a><\/li>\n <li><a href=\"#rules\">Rules<\/a><\/li>\n <li><a href=\"#join\">Join<\/a><\/li>\n <\/ul>\n <div class=\"nav-ip\" onclick=\"copyIp()\">everstead.club<\/div>\n<\/nav>\n\n<!-- HERO -->\n<section class=\"hero\">\n <div class=\"hero-glow\" id=\"heroGlow\"><\/div>\n\n <svg class=\"hero-corner tl\" viewBox=\"0 0 120 120\" fill=\"none\">\n <path d=\"M5 5 L5 60 M5 5 L60 5 M5 5 L40 40\" stroke=\"var(--forest)\" stroke-width=\"1\"\/>\n <circle cx=\"5\" cy=\"5\" r=\"3\" fill=\"var(--forest-bright)\"\/>\n <circle cx=\"40\" cy=\"40\" r=\"2\" fill=\"var(--forest)\"\/>\n <\/svg>\n <svg class=\"hero-corner tr\" viewBox=\"0 0 120 120\" fill=\"none\">\n <path d=\"M5 5 L5 60 M5 5 L60 5 M5 5 L40 40\" stroke=\"var(--forest)\" stroke-width=\"1\"\/>\n <circle cx=\"5\" cy=\"5\" r=\"3\" fill=\"var(--forest-bright)\"\/>\n <circle cx=\"40\" cy=\"40\" r=\"2\" fill=\"var(--forest)\"\/>\n <\/svg>\n <svg class=\"hero-corner bl\" viewBox=\"0 0 120 120\" fill=\"none\">\n <path d=\"M5 5 L5 60 M5 5 L60 5 M5 5 L40 40\" stroke=\"var(--forest)\" stroke-width=\"1\"\/>\n <circle cx=\"5\" cy=\"5\" r=\"3\" fill=\"var(--forest-bright)\"\/>\n <circle cx=\"40\" cy=\"40\" r=\"2\" fill=\"var(--forest)\"\/>\n <\/svg>\n <svg class=\"hero-corner br\" viewBox=\"0 0 120 120\" fill=\"none\">\n <path d=\"M5 5 L5 60 M5 5 L60 5 M5 5 L40 40\" stroke=\"var(--forest)\" stroke-width=\"1\"\/>\n <circle cx=\"5\" cy=\"5\" r=\"3\" fill=\"var(--forest-bright)\"\/>\n <circle cx=\"40\" cy=\"40\" r=\"2\" fill=\"var(--forest)\"\/>\n <\/svg>\n\n <div class=\"hero-eyebrow\">\n <span class=\"dot\"><\/span>\n Survival \u00b7 PvP \u00b7 No Mercy\n <span class=\"dot\"><\/span>\n <\/div>\n\n <h1 id=\"heroHeadline\">Forge or<br>be <em>forgotten<\/em><\/h1>\n\n <p class=\"hero-sub\">A long-form survival SMP where the world fights back. Build, raid, betray, defend \u2014 your story is yours to write, and your enemies might just rewrite it.<\/p>\n\n <div class=\"hero-cta\">\n <a href=\"#join\" class=\"btn btn-primary\">Enter the world \u2192<\/a>\n <a href=\"https:\/\/discord.gg\/y7zJDa55\" target=\"_blank\" rel=\"noopener\" class=\"btn btn-discord\">Join Discord<\/a>\n <\/div>\n\n <div class=\"scroll-cue\">Descend<\/div>\n<\/section>\n\n<!-- Curved divider -->\n<div class=\"divider\">\n <svg viewBox=\"0 0 1440 100\" preserveAspectRatio=\"none\">\n <path d=\"M0,50 C360,90 720,10 1080,50 C1260,70 1380,40 1440,50 L1440,100 L0,100 Z\" fill=\"rgba(17,26,13,0.4)\"\/>\n <\/svg>\n<\/div>\n\n<!-- TENETS -->\n<section class=\"tenets\" id=\"tenets\">\n <div class=\"tenets-header reveal\">\n <div>\n <div class=\"section-eyebrow\">\u2014 I. The World \u2014<\/div>\n <h2 class=\"section-title\">A realm <em>with teeth<\/em><\/h2>\n <\/div>\n <p class=\"lead\">Everstead isn’t a sandbox \u2014 it’s a battleground with a beating heart. We run a long-form survival world where alliances form, kingdoms fall, and every chunk holds a story worth telling.<\/p>\n <\/div>\n\n <div class=\"tenets-list\">\n <div class=\"tenet reveal\" data-delay=\"0\">\n <span class=\"tenet-dot\"><\/span>\n <div class=\"tenet-num\">01<\/div>\n <div class=\"tenet-content\">\n <h3>Survival, <em>uncompromised<\/em><\/h3>\n <p>No pay-to-win. No keep-inventory crutch. Loot is earned, lost, and earned again \u2014 the way the game was meant to be played.<\/p>\n <\/div>\n <div class=\"tenet-icon\">\u2692\ufe0f<\/div>\n <\/div>\n <div class=\"tenet reveal\" data-delay=\"180\">\n <span class=\"tenet-dot\"><\/span>\n <div class=\"tenet-num\">02<\/div>\n <div class=\"tenet-content\">\n <h3>PvP & <em>raiding live here<\/em><\/h3>\n <p>Conflict isn’t an event \u2014 it’s the climate. Build defenses, forge alliances, plan ambushes. Your base is only as safe as your last patrol.<\/p>\n <\/div>\n <div class=\"tenet-icon\">\u2694\ufe0f<\/div>\n <\/div>\n <div class=\"tenet reveal\" data-delay=\"360\">\n <span class=\"tenet-dot\"><\/span>\n <div class=\"tenet-num\">03<\/div>\n <div class=\"tenet-content\">\n <h3>Curated <em>texture packs<\/em><\/h3>\n <p>Hand-picked resource packs that bring grit and atmosphere to every block, blade, and lantern without breaking the vanilla feel.<\/p>\n <\/div>\n <div class=\"tenet-icon\">\ud83c\udfa8<\/div>\n <\/div>\n <div class=\"tenet reveal\" data-delay=\"540\">\n <span class=\"tenet-dot\"><\/span>\n <div class=\"tenet-num\">04<\/div>\n <div class=\"tenet-content\">\n <h3>A world that <em>endures<\/em><\/h3>\n <p>No constant resets. Builds persist. Rivalries deepen. Legends grow into landmarks. Stake your claim and make history.<\/p>\n <\/div>\n <div class=\"tenet-icon\">\ud83c\udf0d<\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<!-- Curved divider -->\n<div class=\"divider\">\n <svg viewBox=\"0 0 1440 100\" preserveAspectRatio=\"none\">\n <path d=\"M0,50 C360,10 720,90 1080,50 C1260,30 1380,60 1440,50 L1440,0 L0,0 Z\" fill=\"rgba(17,26,13,0.4)\"\/>\n <\/svg>\n<\/div>\n\n<!-- RULES -->\n<section class=\"rules\" id=\"rules\">\n <div class=\"rules-header reveal\">\n <div class=\"section-eyebrow\">\u2014 II. The Code \u2014<\/div>\n <h2 class=\"section-title\">Rules of <em>the realm<\/em><\/h2>\n <div class=\"rules-tldr\">\n <strong>\u2014 TL;DR \u2014<\/strong>\n Don’t cheat. Don’t doxx. Don’t break the server itself.<br>\n Everything else? Fair game.\n <\/div>\n <\/div>\n\n <div class=\"rules-grid\">\n <div class=\"rule-pillar reveal\">\n <div class=\"pillar-icon\">\ud83d\udcdc<\/div>\n <h3 class=\"pillar-title\">Fair <em>Play<\/em><\/h3>\n <ul class=\"pillar-rules\">\n <li><span class=\"mark no\">\u2715<\/span><span><strong>No cheating<\/strong> \u2014 no hacks, x-ray, unfair clients<\/span><\/li>\n <li><span class=\"mark no\">\u2715<\/span><span><strong>No exploiting glitches<\/strong> \u2014 duping, item bugs, world exploits off-limits<\/span><\/li>\n <li><span class=\"mark yes\">\u2713<\/span><span><strong>PvP allowed<\/strong> \u2014 fight fair, fight smart<\/span><\/li>\n <\/ul>\n <\/div>\n <div class=\"rule-pillar reveal\">\n <div class=\"pillar-icon\">\ud83d\udcac<\/div>\n <h3 class=\"pillar-title\">Chat <em>Conduct<\/em><\/h3>\n <ul class=\"pillar-rules\">\n <li><span class=\"mark yes\">\u2713<\/span><span><strong>Swearing allowed<\/strong> \u2014 keep it casual, not cruel<\/span><\/li>\n <li><span class=\"mark no\">\u2715<\/span><span><strong>No spam<\/strong> \u2014 don’t flood chat<\/span><\/li>\n <li><span class=\"mark no\">\u2715<\/span><span><strong>No doxxing or real threats<\/strong> \u2014 instant ban, no exceptions<\/span><\/li>\n <\/ul>\n <\/div>\n <div class=\"rule-pillar reveal\">\n <div class=\"pillar-icon\">\ud83c\udfd7\ufe0f<\/div>\n <h3 class=\"pillar-title\">Gameplay <em>& Chaos<\/em><\/h3>\n <ul class=\"pillar-rules\">\n <li><span class=\"mark yes\">\u2713<\/span><span><strong>Raiding allowed<\/strong> \u2014 defend your loot or lose it<\/span><\/li>\n <li><span class=\"mark yes\">\u2713<\/span><span><strong>Griefing allowed<\/strong> \u2014 unless an area is marked otherwise<\/span><\/li>\n <li><span class=\"mark no\">\u2715<\/span><span><strong>No lag machines or server abuse<\/strong> \u2014 don’t ruin it for everyone<\/span><\/li>\n <\/ul>\n <\/div>\n <\/div>\n\n <div class=\"staff-banner reveal\">\n <h3>Staff decisions are <em>final<\/em><\/h3>\n <p>If a moderator makes a call, it sticks. Argue politely on Discord, not in-game.<\/p>\n <\/div>\n<\/section>\n\n<!-- JOIN -->\n<section class=\"join\" id=\"join\">\n <div class=\"join-inner\">\n <div class=\"join-text reveal\">\n <div class=\"section-eyebrow\">\u2014 III. The Threshold \u2014<\/div>\n <h2 class=\"section-title\">Step into <em>the forest<\/em><\/h2>\n <p>The world is loaded. The fireflies are out. All that’s missing is your name on the server list \u2014 and your story written in the dirt.<\/p>\n <div class=\"join-cta-row\">\n <a href=\"https:\/\/discord.gg\/y7zJDa55\" target=\"_blank\" rel=\"noopener\" class=\"btn btn-discord\">Join Discord \u2192<\/a>\n <button class=\"btn btn-ghost\" onclick=\"copyIp()\">Copy IP<\/button>\n <\/div>\n <\/div>\n\n <div class=\"ip-card reveal\">\n <span class=\"ip-card-corner tl\">\/\/ CONNECT<\/span>\n <span class=\"ip-card-corner tr\">ONLINE<\/span>\n\n <div class=\"ip-label\">Server Address<\/div>\n <div class=\"ip-address\" onclick=\"copyIp()\">everstead.club<\/div>\n <div class=\"ip-version\">JAVA EDITION \u00b7 <strong>1.21+<\/strong><\/div>\n <div class=\"ip-divider\"><\/div>\n <button class=\"ip-copy-btn\" onclick=\"copyIp()\">\u29c9 Copy Server IP<\/button>\n <\/div>\n <\/div>\n<\/section>\n\n<!-- FOOTER -->\n<footer>\n <div class=\"footer-mark\">EVER<em>STEAD<\/em><\/div>\n <div class=\"footer-tag\">\u2014 FORGED IN THE OVERWORLD \u2014<\/div>\n <div class=\"footer-divider\">\n <span class=\"line\"><\/span>\n <span class=\"ornament\">\u2726<\/span>\n <span class=\"line\"><\/span>\n <\/div>\n <div class=\"footer-meta\">EST. 2026 \u00b7 EVERSTEAD.CLUB<\/div>\n<\/footer>\n\n<div class=\"toast\" id=\"toast\">IP COPIED TO CLIPBOARD<\/div>\n\n<script>\n\/* ============================================\n LETTER-BY-LETTER HERO REVEAL\n============================================ *\/\n(function splitHeroChars() {\n const h = document.getElementById('heroHeadline');\n if (!h) return;\n const html = h.innerHTML;\n \/\/ Walk text nodes, wrapping each char in a span; keep <br>, <em> intact.\n function processNode(node) {\n if (node.nodeType === 3) {\n const frag = document.createDocumentFragment();\n [...node.textContent].forEach(ch => {\n if (ch === ' ') {\n frag.appendChild(document.createTextNode(' '));\n } else {\n const span = document.createElement('span');\n span.className = 'char';\n span.textContent = ch;\n frag.appendChild(span);\n }\n });\n node.replaceWith(frag);\n } else if (node.nodeType === 1 && node.tagName !== 'BR') {\n [...node.childNodes].forEach(processNode);\n }\n }\n [...h.childNodes].forEach(processNode);\n\n \/\/ Assign stagger\n const chars = h.querySelectorAll('.char');\n chars.forEach((c, i) => {\n c.style.animationDelay = (0.5 + i * 0.04) + 's';\n });\n})();\n\n\/* ============================================\n COPY IP\n============================================ *\/\nfunction copyIp() {\n navigator.clipboard.writeText('everstead.club').then(() => {\n const toast = document.getElementById('toast');\n toast.classList.add('show');\n clearTimeout(window._toastTimer);\n window._toastTimer = setTimeout(() => toast.classList.remove('show'), 2200);\n });\n}\n\n\/* ============================================\n NAV SCROLL STATE + SCROLL PROGRESS + PARALLAX\n============================================ *\/\nconst nav = document.getElementById('nav');\nconst progress = document.getElementById('scrollProgress');\nconst heroGlow = document.getElementById('heroGlow');\n\nlet ticking = false;\nfunction onScroll() {\n if (ticking) return;\n ticking = true;\n requestAnimationFrame(() => {\n const sy = window.scrollY;\n nav.classList.toggle('scrolled', sy > 80);\n\n const max = document.documentElement.scrollHeight - window.innerHeight;\n const pct = max > 0 ? (sy \/ max) * 100 : 0;\n progress.style.width = pct + '%';\n\n \/\/ Subtle parallax on hero glow (slower than scroll)\n if (heroGlow && sy < window.innerHeight * 1.5) {\n heroGlow.style.transform = `translate(-50%, calc(-50% + ${sy * 0.3}px))`;\n }\n\n ticking = false;\n });\n}\nwindow.addEventListener('scroll', onScroll, { passive: true });\n\n\/* ============================================\n STAGGERED REVEAL ON SCROLL\n============================================ *\/\nconst observer = new IntersectionObserver((entries) => {\n entries.forEach((entry, i) => {\n if (entry.isIntersecting) {\n const delay = (entry.target.dataset.delay || (i * 100));\n setTimeout(() => entry.target.classList.add('visible'), delay);\n observer.unobserve(entry.target);\n }\n });\n}, { threshold: 0.12, rootMargin: '0px 0px -80px 0px' });\n\ndocument.querySelectorAll('.reveal').forEach(el => observer.observe(el));\n\n\/* ============================================\n MAGNETIC-FEEL BUTTONS\n (slight pull toward cursor on big buttons)\n============================================ *\/\ndocument.querySelectorAll('.btn-primary, .btn-discord, .ip-copy-btn').forEach(btn => {\n btn.addEventListener('mousemove', (e) => {\n const rect = btn.getBoundingClientRect();\n const x = e.clientX - rect.left - rect.width \/ 2;\n const y = e.clientY - rect.top - rect.height \/ 2;\n btn.style.transform = `translate(${x * 0.15}px, ${y * 0.25}px) translateY(-3px) scale(1.02)`;\n });\n btn.addEventListener('mouseleave', () => {\n btn.style.transform = '';\n });\n});\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Everstead \u2014 Survival SMP EVERSTEAD World Rules Join everstead.club Survival \u00b7 PvP \u00b7 No Mercy Forge orbe forgotten A long-form survival SMP where the world fights back. Build, raid, betray, defend \u2014 your story is yours to write, and your enemies might just rewrite it. Enter the world \u2192 Join Discord Descend \u2014 I. The […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-10","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/everstead.club\/index.php?rest_route=\/wp\/v2\/pages\/10","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/everstead.club\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/everstead.club\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/everstead.club\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/everstead.club\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=10"}],"version-history":[{"count":5,"href":"https:\/\/everstead.club\/index.php?rest_route=\/wp\/v2\/pages\/10\/revisions"}],"predecessor-version":[{"id":23,"href":"https:\/\/everstead.club\/index.php?rest_route=\/wp\/v2\/pages\/10\/revisions\/23"}],"wp:attachment":[{"href":"https:\/\/everstead.club\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=10"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}