{"id":8,"date":"2026-08-14T03:49:28","date_gmt":"2026-08-14T03:49:28","guid":{"rendered":"https:\/\/wenfrog.space\/?page_id=8"},"modified":"2026-08-14T06:34:22","modified_gmt":"2026-08-14T06:34:22","slug":"elementor-8","status":"publish","type":"page","link":"https:\/\/wenfrog.space\/","title":{"rendered":"Elementor #8"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\n\n \n \n \n \n WENFROG \u2014 WEN?<\/title>\n <style>\n :root {\n --ink: #13231f;\n --soft-ink: #365149;\n --paper: #f3f1e8;\n --acid: #d9ff42;\n --frog: #72d646;\n --deep-green: #17483b;\n --lilac: #d7c8ff;\n --orange: #ff7547;\n --line: rgba(19, 35, 31, 0.18);\n --shadow: 0 22px 70px rgba(12, 39, 30, 0.18);\n --display: Impact, Haettenschweiler, \"Arial Narrow Bold\", \"Arial Black\",\n sans-serif;\n --title: \"Segoe Print\", \"Bradley Hand\", \"Comic Sans MS\", \"Marker Felt\",\n cursive;\n --body: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\",\n sans-serif;\n }\n\n * {\n box-sizing: border-box;\n }\n\n html {\n scroll-behavior: smooth;\n background: var(--paper);\n }\n\n body {\n margin: 0;\n color: var(--ink);\n background: var(--paper);\n font-family: var(--body);\n overflow-x: hidden;\n }\n\n body::selection {\n color: var(--ink);\n background: var(--acid);\n }\n\n a {\n color: inherit;\n text-decoration: none;\n }\n\n img {\n display: block;\n max-width: 100%;\n }\n\n button {\n font: inherit;\n }\n\n .progress {\n position: fixed;\n inset: 0 auto auto 0;\n z-index: 100;\n width: 100%;\n height: 4px;\n transform-origin: left;\n transform: scaleX(0);\n background: var(--acid);\n box-shadow: 0 0 16px rgba(217, 255, 66, 0.8);\n }\n\n .site-nav {\n position: fixed;\n top: 24px;\n left: 50%;\n z-index: 90;\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: min(92vw, 1180px);\n min-height: 52px;\n padding: 7px 8px 7px 18px;\n transform: translateX(-50%);\n border: 1px solid rgba(255, 255, 255, 0.3);\n border-radius: 999px;\n background: rgba(17, 48, 40, 0.75);\n color: #fff;\n box-shadow: 0 12px 32px rgba(11, 35, 28, 0.18);\n backdrop-filter: blur(16px);\n }\n\n .nav-brand {\n font-family: var(--display);\n font-size: 18px;\n letter-spacing: 0.05em;\n }\n\n .nav-links {\n display: flex;\n gap: 28px;\n margin-left: auto;\n margin-right: 22px;\n font-size: 11px;\n font-weight: 800;\n letter-spacing: 0.13em;\n text-transform: uppercase;\n }\n\n .nav-links a {\n opacity: 0.74;\n transition: opacity 180ms ease, color 180ms ease;\n }\n\n .nav-links a:hover,\n .nav-links a:focus-visible {\n color: var(--acid);\n opacity: 1;\n }\n\n .nav-buy {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-height: 38px;\n padding: 0 19px;\n border-radius: 999px;\n background: var(--acid);\n color: var(--ink);\n font-size: 11px;\n font-weight: 900;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n transition: transform 180ms ease, box-shadow 180ms ease;\n }\n\n .nav-buy:hover,\n .nav-buy:focus-visible {\n transform: translateY(-2px) rotate(-1deg);\n box-shadow: 0 7px 0 rgba(0, 0, 0, 0.16);\n }\n\n .menu-toggle {\n display: none;\n width: 40px;\n height: 38px;\n border: 1px solid rgba(255, 255, 255, 0.32);\n border-radius: 999px;\n background: transparent;\n color: #fff;\n cursor: pointer;\n }\n\n .eyebrow {\n display: inline-flex;\n align-items: center;\n gap: 9px;\n margin: 0;\n font-size: 11px;\n font-weight: 900;\n letter-spacing: 0.2em;\n line-height: 1;\n text-transform: uppercase;\n }\n\n .eyebrow::before {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background: currentColor;\n content: \"\";\n }\n\n .section-number {\n position: absolute;\n top: 34px;\n right: 5vw;\n font-family: var(--display);\n font-size: 12px;\n letter-spacing: 0.12em;\n opacity: 0.66;\n }\n\n .hero {\n position: relative;\n display: grid;\n min-height: max(780px, 100svh);\n place-items: center;\n overflow: hidden;\n isolation: isolate;\n background:\n radial-gradient(circle at 50% 44%, rgba(217, 255, 66, 0.88) 0 12%, transparent 34%),\n radial-gradient(circle at 12% 20%, rgba(114, 214, 70, 0.3), transparent 22%),\n linear-gradient(136deg, #bddfb0 0%, #eff1d4 52%, #e5efbd 100%);\n }\n\n .hero::before,\n .hero::after {\n position: absolute;\n z-index: -1;\n border: 1px solid rgba(19, 35, 31, 0.12);\n border-radius: 50%;\n content: \"\";\n }\n\n .hero::before {\n width: 78vw;\n height: 78vw;\n max-width: 920px;\n max-height: 920px;\n }\n\n .hero::after {\n width: 60vw;\n height: 60vw;\n max-width: 700px;\n max-height: 700px;\n border-style: dashed;\n animation: slow-spin 44s linear infinite;\n }\n\n .hero-grid {\n position: absolute;\n inset: 0;\n z-index: -1;\n opacity: 0.22;\n background-image:\n linear-gradient(rgba(19, 35, 31, 0.15) 1px, transparent 1px),\n linear-gradient(90deg, rgba(19, 35, 31, 0.15) 1px, transparent 1px);\n background-size: 42px 42px;\n mask-image: linear-gradient(to bottom, black, transparent 72%);\n }\n\n .hero-copy {\n position: relative;\n z-index: 3;\n align-self: end;\n width: min(90vw, 760px);\n margin-bottom: 8vh;\n text-align: center;\n }\n\n .hero-copy .eyebrow {\n color: var(--deep-green);\n }\n\n .hero-title {\n margin: 18px 0 0;\n font-family: var(--display);\n font-size: clamp(110px, 22vw, 300px);\n font-weight: 900;\n letter-spacing: -0.085em;\n line-height: 0.72;\n color: var(--deep-green);\n text-shadow:\n 5px 6px 0 rgba(217, 255, 66, 0.9),\n 10px 11px 0 rgba(19, 35, 31, 0.12);\n }\n\n .hero-subtitle {\n max-width: 450px;\n margin: 31px auto 0;\n font-size: clamp(15px, 1.8vw, 19px);\n font-weight: 700;\n letter-spacing: -0.02em;\n line-height: 1.35;\n }\n\n .hero-actions {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n gap: 12px;\n margin-top: 28px;\n }\n\n .button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-height: 51px;\n padding: 0 23px;\n border: 1px solid var(--ink);\n border-radius: 999px;\n cursor: pointer;\n font-size: 11px;\n font-weight: 900;\n letter-spacing: 0.12em;\n text-transform: uppercase;\n transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;\n }\n\n .button:hover,\n .button:focus-visible {\n transform: translateY(-4px) rotate(-1deg);\n box-shadow: 0 8px 0 rgba(19, 35, 31, 0.22);\n }\n\n .button-primary {\n background: var(--deep-green);\n color: #fff;\n }\n\n .button-secondary {\n background: rgba(255, 255, 255, 0.22);\n color: var(--ink);\n }\n\n .hero-logo {\n position: absolute;\n z-index: 1;\n top: 19%;\n left: 50%;\n width: min(82vw, 850px);\n transform: translateX(-50%) rotate(-3deg);\n filter: drop-shadow(0 30px 25px rgba(21, 61, 37, 0.14));\n animation: logo-breathe 7s ease-in-out infinite;\n }\n\n .hero-character {\n position: absolute;\n z-index: 2;\n top: 9%;\n left: 50%;\n width: min(54vw, 570px);\n transform: translateX(-50%) rotate(4deg);\n filter: drop-shadow(0 34px 22px rgba(21, 61, 37, 0.3));\n animation: character-float 5.5s ease-in-out infinite;\n }\n\n .hero-sticker {\n position: absolute;\n z-index: 4;\n right: 9vw;\n bottom: 18%;\n display: grid;\n width: 88px;\n height: 88px;\n place-items: center;\n transform: rotate(11deg);\n border: 2px solid var(--ink);\n border-radius: 50%;\n background: var(--acid);\n box-shadow: 7px 8px 0 var(--ink);\n font-family: var(--display);\n font-size: 19px;\n line-height: 0.85;\n text-align: center;\n }\n\n .scroll-cue {\n position: absolute;\n right: 5vw;\n bottom: 30px;\n display: flex;\n align-items: center;\n gap: 11px;\n transform: rotate(90deg) translateX(100%);\n transform-origin: right bottom;\n font-size: 10px;\n font-weight: 900;\n letter-spacing: 0.18em;\n text-transform: uppercase;\n }\n\n .scroll-cue::after {\n width: 44px;\n height: 1px;\n background: currentColor;\n content: \"\";\n }\n\n .concept {\n position: relative;\n min-height: 870px;\n overflow: hidden;\n isolation: isolate;\n color: #fff;\n background: var(--deep-green) url(\"http:\/\/wenfrog.space\/wp-content\/uploads\/2026\/08\/bg2.png\")\n center \/ cover no-repeat;\n }\n\n \/*.concept::before,*\/\n \/*.community::before,*\/\n \/*.gallery::after {*\/\n \/* position: absolute;*\/\n \/* right: 0;*\/\n \/* bottom: -1px;*\/\n \/* left: 0;*\/\n \/* z-index: 5;*\/\n \/* height: 58px;*\/\n \/* pointer-events: none;*\/\n \/* content: \"\";*\/\n \/* clip-path: polygon(*\/\n \/* 0 44%,*\/\n \/* 9% 58%,*\/\n \/* 19% 39%,*\/\n \/* 29% 68%,*\/\n \/* 41% 46%,*\/\n \/* 53% 73%,*\/\n \/* 65% 40%,*\/\n \/* 78% 61%,*\/\n \/* 89% 35%,*\/\n \/* 100% 56%,*\/\n \/* 100% 100%,*\/\n \/* 0 100%*\/\n \/* );*\/\n \/*}*\/\n\n .concept::before {\n background: #d9c9ff;\n }\n\n .community::before {\n background: var(--paper);\n }\n\n .gallery::after {\n background: var(--deep-green);\n }\n\n .concept::after,\n .community::after,\n .finale::after {\n position: absolute;\n inset: 0;\n z-index: -1;\n background: linear-gradient(90deg, rgba(11, 46, 36, 0.82), rgba(11, 46, 36, 0.26));\n content: \"\";\n }\n\n .concept-wrap {\n display: grid;\n grid-template-columns: 0.9fr 1.1fr;\n align-items: center;\n gap: 7vw;\n width: min(90vw, 1220px);\n min-height: 870px;\n margin: auto;\n padding: 120px 0;\n }\n\n .concept-intro {\n transform: rotate(-3deg);\n }\n\n .concept-intro .eyebrow {\n color: var(--acid);\n }\n\n .concept h2,\n .community h2,\n .finale h2 {\n margin: 22px 0 0;\n font-family: var(--title);\n font-size: clamp(72px, 11vw, 160px);\n font-weight: 800;\n letter-spacing: -0.07em;\n line-height: 0.82;\n text-transform: uppercase;\n }\n\n .concept h2 span {\n color: var(--acid);\n }\n\n .concept-note {\n align-self: end;\n max-width: 460px;\n padding: 26px 30px;\n border: 1px solid rgba(217, 255, 66, 0.6);\n border-radius: 3px;\n background: rgba(19, 35, 31, 0.4);\n transform: rotate(2.7deg);\n backdrop-filter: blur(8px);\n }\n\n .concept-note p {\n margin: 0;\n color: rgba(255, 255, 255, 0.86);\n font-size: clamp(18px, 2.1vw, 25px);\n font-weight: 700;\n letter-spacing: -0.03em;\n line-height: 1.16;\n }\n\n .concept-note small {\n display: block;\n margin-top: 24px;\n color: var(--acid);\n font-size: 10px;\n font-weight: 900;\n letter-spacing: 0.15em;\n text-transform: uppercase;\n }\n\n .concept-side {\n position: relative;\n min-height: 530px;\n }\n\n .concept-side::before {\n position: absolute;\n top: -5%;\n right: 2%;\n width: 255px;\n height: 255px;\n border: 1px solid var(--acid);\n border-radius: 50%;\n content: \"\";\n opacity: 0.7;\n }\n\n .concept-side::after {\n position: absolute;\n right: 13%;\n bottom: 5%;\n width: 105px;\n height: 105px;\n border: 1px dashed rgba(217, 255, 66, 0.8);\n content: \"\";\n transform: rotate(19deg);\n }\n\n .word-stack {\n position: absolute;\n top: 50%;\n left: 6%;\n transform: translateY(-50%) rotate(-8deg);\n font-family: var(--title);\n font-weight: 800;\n font-size: clamp(76px, 12vw, 165px);\n letter-spacing: -0.08em;\n line-height: 0.75;\n text-transform: uppercase;\n }\n\n .word-stack span {\n display: block;\n color: transparent;\n -webkit-text-stroke: 1px rgba(255, 255, 255, 0.8);\n }\n\n .word-stack span:nth-child(2) {\n margin-left: 70px;\n color: var(--acid);\n -webkit-text-stroke: 0;\n }\n\n .word-stack span:nth-child(3) {\n margin-left: 22px;\n }\n\n .community {\n position: relative;\n min-height: 900px;\n overflow: hidden;\n isolation: isolate;\n background: #d9c9ff url(\"http:\/\/wenfrog.space\/wp-content\/uploads\/2026\/08\/bg3.png\")\n center \/ cover no-repeat;\n }\n\n .community::after {\n background:\n linear-gradient(135deg, rgba(219, 201, 255, 0.82), rgba(255, 255, 255, 0.08) 55%, rgba(255, 117, 71, 0.55)),\n linear-gradient(90deg, rgba(27, 42, 35, 0.1), transparent);\n }\n\n .community-wrap {\n position: relative;\n display: flex;\n align-items: center;\n width: min(90vw, 1220px);\n min-height: 900px;\n margin: auto;\n padding: 130px 0;\n }\n\n .community-copy {\n position: relative;\n z-index: 2;\n width: min(540px, 56vw);\n }\n\n .community .eyebrow {\n color: var(--deep-green);\n }\n\n .community h2 {\n color: var(--deep-green);\n }\n\n .community h2 em {\n display: block;\n color: var(--orange);\n font-style: normal;\n }\n\n .community-copy p {\n max-width: 380px;\n margin: 31px 0 0;\n font-size: 18px;\n font-weight: 700;\n line-height: 1.4;\n }\n\n .community-image {\n position: absolute;\n z-index: 1;\n top: 15%;\n right: -1%;\n width: min(58vw, 690px);\n transform: rotate(7deg);\n filter: drop-shadow(0 28px 24px rgba(12, 39, 30, 0.25));\n clip-path: polygon(8% 4%, 94% 0, 100% 86%, 87% 100%, 8% 95%, 0 18%);\n animation: image-sway 8s ease-in-out infinite;\n }\n\n .community-image img {\n width: 100%;\n height: 100%;\n aspect-ratio: 0.97;\n object-fit: contain;\n }\n\n .community-burst {\n position: absolute;\n right: 39%;\n bottom: 15%;\n z-index: 3;\n padding: 24px 18px;\n border-radius: 8px;\n background: var(--orange);\n box-shadow: 8px 9px 0 var(--deep-green);\n color: #fff;\n font-family: var(--title);\n font-weight: 800;\n font-size: 25px;\n line-height: 0.88;\n text-align: center;\n transform: rotate(-9deg);\n }\n\n .community-ticker {\n position: absolute;\n right: 0;\n bottom: 34px;\n left: 0;\n z-index: 6;\n overflow: hidden;\n padding: 14px 0;\n border-top: 1px solid rgba(19, 35, 31, 0.3);\n border-bottom: 1px solid rgba(19, 35, 31, 0.3);\n background: rgba(255, 255, 255, 0.2);\n font-family: var(--display);\n font-size: clamp(22px, 3vw, 43px);\n letter-spacing: 0.02em;\n white-space: nowrap;\n }\n\n .ticker-track {\n display: inline-block;\n padding-left: 100%;\n animation: ticker 22s linear infinite;\n }\n\n .ticker-track span {\n display: inline-block;\n margin-right: 46px;\n }\n\n .ticker-track span::before {\n display: inline-block;\n width: 10px;\n height: 10px;\n margin: 0 20px 7px 0;\n border-radius: 50%;\n background: var(--orange);\n content: \"\";\n }\n\n .gallery {\n position: relative;\n min-height: 910px;\n overflow: hidden;\n background: var(--paper);\n }\n\n .gallery::before {\n position: absolute;\n top: 0;\n right: 0;\n width: 52%;\n height: 100%;\n background: var(--acid);\n clip-path: polygon(24% 0, 100% 0, 100% 100%, 0 100%);\n content: \"\";\n }\n\n .gallery-header {\n position: relative;\n z-index: 2;\n width: min(90vw, 1220px);\n margin: auto;\n padding-top: 127px;\n }\n\n .gallery-header .eyebrow {\n color: var(--orange);\n }\n\n .gallery h2 {\n max-width: 770px;\n margin: 18px 0 0;\n font-family: var(--title);\n font-weight: 800;\n font-size: clamp(70px, 10.8vw, 150px);\n letter-spacing: -0.09em;\n line-height: 0.78;\n }\n\n .gallery h2 span {\n color: var(--orange);\n }\n\n .gallery-scene {\n position: relative;\n z-index: 1;\n width: min(90vw, 1220px);\n height: 570px;\n margin: 20px auto 0;\n }\n\n .gallery-frame {\n position: absolute;\n overflow: hidden;\n background: transparent;\n filter: drop-shadow(12px 14px 0 rgba(19, 35, 31, 0.18));\n }\n\n .gallery-frame img {\n width: 100%;\n height: 100%;\n object-fit: contain;\n transition: transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1);\n }\n\n .gallery-frame:hover img {\n transform: scale(1.08);\n }\n\n .gallery-main {\n top: 12px;\n left: 12%;\n width: min(43vw, 520px);\n height: min(55vw, 490px);\n transform: rotate(-5deg);\n border-radius: 47% 53% 44% 56% \/ 53% 42% 58% 47%;\n }\n\n .gallery-main img {\n object-position: center;\n }\n\n .gallery-small {\n top: 122px;\n right: 10%;\n width: min(25vw, 290px);\n height: min(31vw, 360px);\n transform: rotate(8deg);\n border-radius: 53% 47% 59% 41% \/ 44% 56% 43% 57%;\n }\n\n .gallery-small img {\n object-position: 72% center;\n }\n\n .gallery-label {\n position: absolute;\n right: 23%;\n bottom: 80px;\n display: grid;\n width: 138px;\n height: 138px;\n place-items: center;\n border: 2px solid var(--ink);\n border-radius: 50%;\n background: var(--orange);\n color: #fff;\n font-family: var(--title);\n font-weight: 800;\n font-size: 29px;\n line-height: 0.82;\n text-align: center;\n transform: rotate(-15deg);\n box-shadow: 7px 8px 0 var(--ink);\n }\n\n .gallery-caption {\n position: absolute;\n bottom: 68px;\n left: 2%;\n max-width: 220px;\n font-size: 11px;\n font-weight: 900;\n letter-spacing: 0.08em;\n line-height: 1.35;\n text-transform: uppercase;\n }\n\n .finale {\n position: relative;\n display: grid;\n min-height: 840px;\n place-items: center;\n overflow: hidden;\n isolation: isolate;\n color: #fff;\n text-align: center;\n background: var(--deep-green) url(\"http:\/\/wenfrog.space\/wp-content\/uploads\/2026\/08\/bg5.png\")\n center \/ cover no-repeat;\n }\n\n .finale::after {\n background:\n radial-gradient(circle at 50% 56%, rgba(217, 255, 66, 0.5), transparent 35%),\n rgba(8, 40, 31, 0.58);\n }\n\n .finale::before {\n position: absolute;\n inset: 9%;\n border: 1px solid rgba(217, 255, 66, 0.55);\n content: \"\";\n transform: rotate(2deg);\n }\n\n .finale-copy {\n position: relative;\n z-index: 2;\n width: min(90vw, 830px);\n }\n\n .finale .eyebrow {\n color: var(--acid);\n }\n\n .finale h2 {\n font-size: clamp(95px, 18vw, 245px);\n text-shadow: 8px 9px 0 rgba(217, 255, 66, 0.3);\n }\n\n .finale h2 span {\n display: block;\n color: var(--acid);\n font-size: 0.58em;\n letter-spacing: -0.04em;\n }\n\n .finale p {\n max-width: 490px;\n margin: 30px auto 0;\n color: rgba(255, 255, 255, 0.8);\n font-size: 17px;\n font-weight: 700;\n line-height: 1.4;\n }\n\n .finale .button {\n margin-top: 30px;\n border-color: var(--acid);\n background: var(--acid);\n color: var(--ink);\n }\n\n .footer {\n position: absolute;\n right: 5vw;\n bottom: 28px;\n left: 5vw;\n z-index: 3;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding-top: 17px;\n border-top: 1px solid rgba(255, 255, 255, 0.25);\n color: rgba(255, 255, 255, 0.6);\n font-size: 10px;\n font-weight: 800;\n letter-spacing: 0.13em;\n text-transform: uppercase;\n }\n\n .footer strong {\n color: var(--acid);\n }\n\n .reveal {\n opacity: 0;\n transform: translateY(28px);\n transition: opacity 900ms ease, transform 900ms cubic-bezier(0.2, 0.8, 0.2, 1);\n }\n\n .reveal.is-visible {\n opacity: 1;\n transform: translateY(0);\n }\n\n @keyframes character-float {\n 0%,\n 100% {\n transform: translateX(-50%) translateY(0) rotate(4deg);\n }\n 50% {\n transform: translateX(-50%) translateY(-18px) rotate(1deg);\n }\n }\n\n @keyframes logo-breathe {\n 0%,\n 100% {\n transform: translateX(-50%) rotate(-3deg) scale(1);\n }\n 50% {\n transform: translateX(-50%) rotate(-1deg) scale(1.025);\n }\n }\n\n @keyframes image-sway {\n 0%,\n 100% {\n transform: rotate(7deg) translateY(0);\n }\n 50% {\n transform: rotate(5deg) translateY(-12px);\n }\n }\n\n @keyframes slow-spin {\n to {\n transform: rotate(360deg);\n }\n }\n\n @keyframes ticker {\n to {\n transform: translateX(-100%);\n }\n }\n\n @media (max-width: 760px) {\n .site-nav {\n top: 14px;\n width: calc(100vw - 28px);\n }\n\n .nav-links {\n position: absolute;\n top: calc(100% + 9px);\n right: 0;\n left: 0;\n display: none;\n flex-direction: column;\n gap: 18px;\n margin: 0;\n padding: 20px;\n border: 1px solid rgba(255, 255, 255, 0.2);\n border-radius: 18px;\n background: rgba(17, 48, 40, 0.94);\n }\n\n .site-nav.is-open .nav-links {\n display: flex;\n }\n\n .nav-buy {\n display: none;\n }\n\n .menu-toggle {\n display: block;\n }\n\n .hero {\n min-height: 790px;\n }\n\n .hero-logo {\n top: 21%;\n width: 104vw;\n }\n\n .hero-character {\n top: 13%;\n width: 72vw;\n }\n\n .hero-copy {\n align-self: end;\n margin-bottom: 11vh;\n }\n\n .hero-title {\n font-size: clamp(94px, 29vw, 190px);\n }\n\n .hero-subtitle {\n max-width: 310px;\n margin-top: 23px;\n font-size: 15px;\n }\n\n .hero-sticker {\n right: 8vw;\n bottom: 24%;\n width: 69px;\n height: 69px;\n font-size: 15px;\n box-shadow: 5px 6px 0 var(--ink);\n }\n\n .scroll-cue {\n right: 9vw;\n bottom: 20px;\n }\n\n .concept,\n .concept-wrap,\n .community,\n .community-wrap {\n min-height: 790px;\n }\n\n .concept-wrap {\n display: flex;\n flex-direction: column;\n justify-content: center;\n gap: 55px;\n padding: 115px 0 80px;\n }\n\n .concept-intro {\n width: 100%;\n }\n\n .concept h2,\n .community h2 {\n font-size: clamp(68px, 18vw, 120px);\n }\n\n .concept-side {\n min-height: 240px;\n width: 100%;\n }\n\n .word-stack {\n top: 45%;\n left: 10%;\n font-size: clamp(56px, 16vw, 110px);\n }\n\n .word-stack span:nth-child(2) {\n margin-left: 46px;\n }\n\n .concept-note {\n position: absolute;\n right: 0;\n bottom: 0;\n max-width: 280px;\n padding: 17px;\n }\n\n .concept-note p {\n font-size: 16px;\n }\n\n .concept-note small {\n margin-top: 14px;\n font-size: 8px;\n }\n\n .community-wrap {\n align-items: flex-start;\n padding-top: 140px;\n }\n\n .community-copy {\n width: 85%;\n }\n\n .community-copy p {\n max-width: 280px;\n font-size: 15px;\n }\n\n .community-image {\n top: auto;\n right: -8%;\n bottom: 16%;\n width: 74vw;\n }\n\n .community-burst {\n right: 48%;\n bottom: 13%;\n padding: 17px 12px;\n font-size: 18px;\n box-shadow: 5px 6px 0 var(--deep-green);\n }\n\n .community-ticker {\n bottom: 20px;\n font-size: 23px;\n }\n\n .gallery {\n min-height: 760px;\n }\n\n .gallery-header {\n padding-top: 110px;\n }\n\n .gallery h2 {\n font-size: clamp(64px, 17vw, 115px);\n }\n\n .gallery-scene {\n height: 450px;\n margin-top: 24px;\n }\n\n .gallery-main {\n left: 7%;\n width: 57vw;\n height: 65vw;\n max-height: 380px;\n }\n\n .gallery-small {\n top: 77px;\n right: 3%;\n width: 34vw;\n height: 43vw;\n max-height: 270px;\n }\n\n .gallery-label {\n right: 15%;\n bottom: 45px;\n width: 94px;\n height: 94px;\n font-size: 20px;\n box-shadow: 5px 6px 0 var(--ink);\n }\n\n .gallery-caption {\n bottom: 54px;\n left: 4%;\n max-width: 160px;\n font-size: 8px;\n }\n\n .finale {\n min-height: 730px;\n }\n\n .finale::before {\n inset: 7%;\n }\n\n .finale h2 {\n font-size: clamp(88px, 26vw, 170px);\n }\n\n .finale p {\n max-width: 290px;\n font-size: 15px;\n }\n\n .footer {\n flex-direction: column;\n gap: 10px;\n align-items: flex-start;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n html {\n scroll-behavior: auto;\n }\n\n *,\n *::before,\n *::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 <div class=\"progress\" aria-hidden=\"true\"><\/div>\n\n <header class=\"site-nav\" aria-label=\"Primary navigation\">\n <a class=\"nav-brand\" href=\"#top\" aria-label=\"WENFROG home\">$WENFROG<\/a>\n <nav class=\"nav-links\">\n <a href=\"#concept\">The frog<\/a>\n <a href=\"#community\">The signal<\/a>\n <a href=\"#gallery\">The lore<\/a>\n <\/nav>\n <a class=\"nav-buy\" href=\"#wen\">Wen?<\/a>\n <button class=\"menu-toggle\" type=\"button\" aria-label=\"Open menu\" aria-expanded=\"false\">\n <span>Menu<\/span>\n <\/button>\n <\/header>\n\n <main id=\"top\">\n <section class=\"hero\" aria-labelledby=\"hero-title\">\n <div class=\"hero-grid\" aria-hidden=\"true\"><\/div>\n <img decoding=\"async\"\n class=\"hero-logo\"\n src=\"http:\/\/wenfrog.space\/wp-content\/uploads\/2026\/08\/logo.png\"\n alt=\"WENFROG\"\n \/>\n <img decoding=\"async\"\n class=\"hero-character\"\n src=\"http:\/\/wenfrog.space\/wp-content\/uploads\/2026\/08\/featured1.png\"\n alt=\"The WENFROG character\"\n \/>\n <div class=\"hero-copy reveal\">\n <!--<p class=\"eyebrow\">A question for the timeline<\/p>-->\n <!--<h1 class=\"hero-title\" id=\"hero-title\">WEN?<\/h1>-->\n <!--<p class=\"hero-subtitle\">-->\n <!-- One frog. One simple question. An unreasonable amount of internet energy.-->\n <!--<\/p>-->\n <div class=\"hero-actions\">\n <a class=\"button button-primary\" href=\"#wen\">[CA HERE]<\/a>\n <a class=\"button button-secondary\" href=\"#concept\">Understand nothing<\/a>\n <\/div>\n <\/div>\n <div class=\"hero-sticker\" aria-hidden=\"true\">NO<br \/>RUSH<\/div>\n <div class=\"scroll-cue\" aria-hidden=\"true\">Scroll for signal<\/div>\n <\/section>\n\n <section class=\"concept\" id=\"concept\" aria-labelledby=\"concept-title\">\n <span class=\"section-number\">02 \/ 05<\/span>\n <div class=\"concept-wrap\">\n <div class=\"concept-intro reveal\">\n <p class=\"eyebrow\">The core philosophy<\/p>\n <h2 id=\"concept-title\">Wen<br \/><span>again?<\/span><\/h2>\n <\/div>\n <div class=\"concept-side reveal\">\n <div class=\"word-stack\" aria-hidden=\"true\">\n <span>when<\/span>\n <span>wen<\/span>\n <span>moon<\/span>\n <\/div>\n <aside class=\"concept-note\">\n <p>\n No roadmap. No boardroom. No ten-step master plan. Just the pure,\n beautiful art of asking at exactly the right time.\n <\/p>\n <small>Internet philosophy, frog edition<\/small>\n <\/aside>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"community\" id=\"community\" aria-labelledby=\"community-title\">\n <span class=\"section-number\">03 \/ 05<\/span>\n <div class=\"community-wrap\">\n <div class=\"community-copy reveal\">\n <p class=\"eyebrow\">The community signal<\/p>\n <h2 id=\"community-title\">Make<br \/><em>some noise.<\/em><\/h2>\n <p>\n The pond is open. Bring the memes, the theories, the screenshots, and\n the one question that never gets old.\n <\/p>\n <\/div>\n <figure class=\"community-image reveal\">\n <img decoding=\"async\"\n src=\"http:\/\/wenfrog.space\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-14-Agu-2026-13.22.57.png\"\n alt=\"A surreal WENFROG community scene\"\n \/>\n <\/figure>\n <div class=\"community-burst\" aria-hidden=\"true\">LOUD<br \/>WEN<\/div>\n <\/div>\n <!--<div class=\"community-ticker\" aria-hidden=\"true\">-->\n <!-- <div class=\"ticker-track\">-->\n <!-- <span>WEN IS A STATE OF MIND<\/span>-->\n <!-- <span>THE POND IS OPEN<\/span>-->\n <!-- <span>WEN IS A STATE OF MIND<\/span>-->\n <!-- <\/div>-->\n <!--<\/div>-->\n <\/section>\n\n <section class=\"gallery\" id=\"gallery\" aria-labelledby=\"gallery-title\">\n <span class=\"section-number\">04 \/ 05<\/span>\n <div class=\"gallery-header reveal\">\n <p class=\"eyebrow\">Artifacts from the pond<\/p>\n <h2 id=\"gallery-title\">A little<br \/><span>frog lore.<\/span><\/h2>\n <\/div>\n <div class=\"gallery-scene\">\n <figure class=\"gallery-frame gallery-main reveal\">\n <img decoding=\"async\"\n src=\"http:\/\/wenfrog.space\/wp-content\/uploads\/2026\/08\/featured1.png\"\n alt=\"WENFROG character portrait\"\n \/>\n <\/figure>\n <figure class=\"gallery-frame gallery-small reveal\">\n <img decoding=\"async\"\n src=\"http:\/\/wenfrog.space\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-14-Agu-2026-13.22.57.png\"\n alt=\"WENFROG visual artwork\"\n \/>\n <\/figure>\n <div class=\"gallery-label\" aria-hidden=\"true\">VERY<br \/>ONLINE<\/div>\n <p class=\"gallery-caption\">Collected from the wild internet. Preserved for future WEN.<\/p>\n <\/div>\n <\/section>\n\n <section class=\"finale\" id=\"wen\" aria-labelledby=\"finale-title\">\n <span class=\"section-number\">05 \/ 05<\/span>\n <div class=\"finale-copy reveal\">\n <p class=\"eyebrow\">The only next move<\/p>\n <h2 id=\"finale-title\">WEN?<span>$WENFROG<\/span><\/h2>\n <p>\n You already know the question. Now make it impossible for the timeline\n to ignore.\n <\/p>\n <a class=\"button\" href=\"https:\/\/x.com\/\" target=\"_blank\" rel=\"noreferrer\">\n Twitter\n <\/a>\n <a class=\"button\" href=\"https:\/\/x.com\/\" target=\"_blank\" rel=\"noreferrer\">\n Telegram\n <\/a>\n <\/div>\n <footer class=\"footer\">\n <span><strong>$WENFROG<\/strong> \u2014 no promises, just vibes<\/span>\n <span>Built for the pond \/ 2026<\/span>\n <\/footer>\n <\/section>\n <\/main>\n\n <script>\n const progress = document.querySelector(\".progress\");\n const nav = document.querySelector(\".site-nav\");\n const menuToggle = document.querySelector(\".menu-toggle\");\n const navLinks = document.querySelectorAll(\".nav-links a\");\n const revealItems = document.querySelectorAll(\".reveal\");\n\n const updateProgress = () => {\n const scrollable = document.documentElement.scrollHeight - window.innerHeight;\n progress.style.transform = `scaleX(${scrollable > 0 ? window.scrollY \/ scrollable : 0})`;\n };\n\n window.addEventListener(\"scroll\", updateProgress, { passive: true });\n updateProgress();\n\n menuToggle.addEventListener(\"click\", () => {\n const isOpen = nav.classList.toggle(\"is-open\");\n menuToggle.setAttribute(\"aria-expanded\", String(isOpen));\n menuToggle.setAttribute(\"aria-label\", isOpen ? \"Close menu\" : \"Open menu\");\n });\n\n navLinks.forEach((link) => {\n link.addEventListener(\"click\", () => {\n nav.classList.remove(\"is-open\");\n menuToggle.setAttribute(\"aria-expanded\", \"false\");\n menuToggle.setAttribute(\"aria-label\", \"Open menu\");\n });\n });\n\n const observer = new IntersectionObserver(\n (entries) => {\n entries.forEach((entry) => {\n if (entry.isIntersecting) {\n entry.target.classList.add(\"is-visible\");\n observer.unobserve(entry.target);\n }\n });\n },\n { threshold: 0.12 },\n );\n\n revealItems.forEach((item) => observer.observe(item));\n <\/script>\n <\/body>\n<\/html>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>WENFROG \u2014 WEN? $WENFROG The frog The signal The lore Wen? Menu [CA HERE] Understand nothing NORUSH Scroll for signal 02 \/ 05 The core philosophy Wenagain? when wen moon No roadmap. No boardroom. No ten-step master plan. Just the pure, beautiful art of asking at exactly the right time. Internet philosophy, frog edition 03 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-8","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/wenfrog.space\/index.php?rest_route=\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wenfrog.space\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wenfrog.space\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wenfrog.space\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wenfrog.space\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=8"}],"version-history":[{"count":25,"href":"https:\/\/wenfrog.space\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":44,"href":"https:\/\/wenfrog.space\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions\/44"}],"wp:attachment":[{"href":"https:\/\/wenfrog.space\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}