{"id":9,"date":"2026-08-11T16:40:24","date_gmt":"2026-08-11T16:40:24","guid":{"rendered":"https:\/\/dafrog.online\/?page_id=9"},"modified":"2026-08-11T17:53:42","modified_gmt":"2026-08-11T17:53:42","slug":"elementor-9","status":"publish","type":"page","link":"https:\/\/dafrog.online\/","title":{"rendered":"Elementor #9"},"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 dafrog \u2014 $dafrog<\/title>\n <style>\n :root {\n --ink: #102018;\n --paper: #f3f0e8;\n --acid: #d8f94a;\n --lime: #b9dc35;\n --moss: #1d382b;\n --muted: rgba(16, 32, 24, 0.62);\n --line: rgba(16, 32, 24, 0.18);\n --white-line: rgba(255, 255, 255, 0.24);\n --display: Impact, Haettenschweiler, \"Arial Narrow Bold\", sans-serif;\n --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,\n \"Segoe UI\", sans-serif;\n --mono: \"SFMono-Regular\", Consolas, \"Liberation Mono\", monospace;\n }\n\n * {\n box-sizing: border-box;\n }\n\n html {\n scroll-behavior: smooth;\n background: var(--ink);\n }\n\n body {\n margin: 0;\n color: var(--ink);\n background: var(--paper);\n font-family: var(--sans);\n overflow-x: hidden;\n }\n\n a {\n color: inherit;\n text-decoration: none;\n }\n\n button,\n a {\n -webkit-tap-highlight-color: transparent;\n }\n\n .site-nav {\n position: fixed;\n z-index: 20;\n inset: 0 0 auto;\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 22px clamp(20px, 4vw, 64px);\n color: #fff;\n mix-blend-mode: difference;\n pointer-events: none;\n }\n\n .site-nav > * {\n pointer-events: auto;\n }\n\n .wordmark {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n font-size: 14px;\n font-weight: 800;\n letter-spacing: -0.04em;\n }\n\n .wordmark-mark {\n display: inline-grid;\n place-items: center;\n width: 25px;\n height: 25px;\n border: 2px solid currentColor;\n border-radius: 50%;\n font-size: 11px;\n }\n\n .nav-links {\n display: flex;\n gap: clamp(16px, 3vw, 38px);\n font-family: var(--mono);\n font-size: 10px;\n font-weight: 700;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n }\n\n .nav-links a {\n position: relative;\n padding: 5px 0;\n }\n\n .nav-links a::after {\n position: absolute;\n right: 0;\n bottom: 0;\n left: 0;\n height: 1px;\n background: currentColor;\n content: \"\";\n transform: scaleX(0);\n transform-origin: right;\n transition: transform 240ms ease;\n }\n\n .nav-links a:hover::after,\n .nav-links a:focus-visible::after {\n transform: scaleX(1);\n transform-origin: left;\n }\n\n .section {\n position: relative;\n isolation: isolate;\n min-height: 100svh;\n overflow: hidden;\n }\n\n .section::after {\n position: absolute;\n z-index: -1;\n inset: 0;\n background: linear-gradient(\n 180deg,\n rgba(4, 17, 10, 0.02) 30%,\n rgba(4, 17, 10, 0.42) 100%\n );\n content: \"\";\n pointer-events: none;\n }\n\n .section-number {\n position: absolute;\n z-index: 2;\n top: 102px;\n left: clamp(20px, 4vw, 64px);\n color: currentColor;\n font-family: var(--mono);\n font-size: 10px;\n letter-spacing: 0.14em;\n text-transform: uppercase;\n }\n\n .section-number::before {\n display: inline-block;\n width: 34px;\n height: 1px;\n margin: 0 10px 3px 0;\n background: currentColor;\n content: \"\";\n }\n\n .hero {\n display: flex;\n align-items: flex-end;\n min-height: 100svh;\n padding: clamp(110px, 16vh, 170px) clamp(20px, 6vw, 96px) clamp(28px, 6vw, 78px);\n color: #fff;\n background:\n linear-gradient(180deg, rgba(4, 12, 7, 0.08), rgba(4, 12, 7, 0.18)),\n url(\"http:\/\/dafrog.online\/wp-content\/uploads\/2026\/08\/bg1.png\") center \/ cover\n no-repeat;\n }\n\n .hero::after {\n background:\n linear-gradient(90deg, rgba(3, 12, 6, 0.5), transparent 60%),\n linear-gradient(180deg, transparent 52%, rgba(3, 12, 6, 0.68));\n }\n\n .hero-content {\n position: relative;\n z-index: 1;\n max-width: 940px;\n }\n\n .eyebrow {\n margin: 0 0 15px;\n font-family: var(--mono);\n font-size: 11px;\n font-weight: 700;\n letter-spacing: 0.16em;\n text-transform: uppercase;\n }\n\n .hero h1 {\n max-width: 950px;\n margin: 0;\n font-family: var(--display);\n font-size: clamp(76px, 17vw, 250px);\n font-weight: 900;\n line-height: 0.75;\n letter-spacing: -0.065em;\n text-transform: lowercase;\n text-shadow: 0 7px 0 rgba(0, 0, 0, 0.1);\n }\n\n .hero h1 span {\n display: inline-block;\n color: var(--acid);\n transform: translateX(0.08em);\n }\n\n .hero-bottom {\n display: flex;\n align-items: flex-end;\n justify-content: space-between;\n gap: 30px;\n margin-top: clamp(32px, 7vw, 76px);\n }\n\n .hero-copy {\n max-width: 315px;\n margin: 0;\n color: rgba(255, 255, 255, 0.82);\n font-size: 14px;\n line-height: 1.6;\n }\n\n .primary-link {\n display: inline-flex;\n align-items: center;\n gap: 15px;\n padding: 15px 18px 15px 20px;\n color: var(--ink);\n background: var(--acid);\n border: 1px solid var(--acid);\n font-family: var(--mono);\n font-size: 10px;\n font-weight: 800;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n transition:\n background 180ms ease,\n color 180ms ease,\n transform 180ms ease;\n }\n\n .primary-link::after {\n content: \"\u2197\";\n font-family: var(--sans);\n font-size: 17px;\n line-height: 0;\n }\n\n .primary-link:hover,\n .primary-link:focus-visible {\n color: var(--acid);\n background: transparent;\n transform: translateY(-3px);\n }\n\n .hero-tag {\n position: absolute;\n right: clamp(20px, 5vw, 72px);\n bottom: clamp(30px, 5vw, 68px);\n display: grid;\n place-items: center;\n width: 84px;\n height: 84px;\n border: 1px solid rgba(216, 249, 74, 0.6);\n border-radius: 50%;\n color: var(--acid);\n font-family: var(--mono);\n font-size: 9px;\n letter-spacing: 0.08em;\n text-align: center;\n text-transform: uppercase;\n animation: slow-spin 18s linear infinite;\n }\n\n .intro {\n display: flex;\n align-items: center;\n padding: 130px clamp(20px, 11vw, 180px);\n background:\n linear-gradient(90deg, rgba(243, 240, 232, 0.95) 0%, rgba(243, 240, 232, 0.66) 36%, rgba(243, 240, 232, 0.05) 74%),\n url(\"http:\/\/dafrog.online\/wp-content\/uploads\/2026\/08\/bg2.png\") center \/ cover\n no-repeat;\n }\n\n .intro::after {\n display: none;\n }\n\n .intro-content {\n position: relative;\n z-index: 1;\n max-width: 590px;\n }\n\n .intro h2,\n .community h2,\n .final h2 {\n margin: 0;\n font-family: var(--display);\n font-weight: 900;\n letter-spacing: -0.055em;\n line-height: 0.87;\n text-transform: uppercase;\n }\n\n .intro h2 {\n max-width: 570px;\n color: var(--moss);\n font-size: clamp(62px, 9vw, 136px);\n }\n\n .intro h2 em {\n display: block;\n color: var(--lime);\n font-style: normal;\n -webkit-text-stroke: 1px var(--moss);\n }\n\n .intro-rule {\n width: 100%;\n height: 1px;\n margin: 34px 0 22px;\n background: var(--ink);\n opacity: 0.5;\n }\n\n .intro-copy {\n max-width: 405px;\n margin: 0;\n color: var(--muted);\n font-size: clamp(15px, 1.5vw, 20px);\n line-height: 1.5;\n }\n\n .intro-side-note {\n position: absolute;\n right: -140px;\n bottom: 6px;\n color: var(--moss);\n font-family: var(--mono);\n font-size: 10px;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n transform: rotate(-90deg);\n transform-origin: center;\n }\n\n .character {\n display: grid;\n place-items: center;\n min-height: 100svh;\n color: #fff;\n background: var(--moss);\n }\n\n .character::before {\n position: absolute;\n z-index: -1;\n inset: 9% 13%;\n border: 1px solid rgba(216, 249, 74, 0.25);\n content: \"\";\n transform: rotate(-4deg);\n }\n\n .character::after {\n display: none;\n }\n\n .character-watermark {\n position: absolute;\n top: 49%;\n left: 50%;\n color: rgba(216, 249, 74, 0.08);\n font-family: var(--display);\n font-size: min(43vw, 640px);\n line-height: 0.6;\n letter-spacing: -0.1em;\n transform: translate(-50%, -50%);\n user-select: none;\n }\n\n .featured-image {\n position: relative;\n z-index: 1;\n display: block;\n width: min(69vw, 890px);\n max-height: 79svh;\n object-fit: contain;\n filter: drop-shadow(0 30px 25px rgba(0, 0, 0, 0.25));\n animation: float 5.6s ease-in-out infinite;\n }\n\n .character-label {\n position: absolute;\n z-index: 2;\n right: clamp(20px, 9vw, 150px);\n bottom: clamp(38px, 8vw, 100px);\n max-width: 190px;\n color: var(--acid);\n font-family: var(--mono);\n font-size: 10px;\n line-height: 1.6;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n }\n\n .character-label::before {\n display: block;\n width: 45px;\n height: 1px;\n margin-bottom: 13px;\n background: var(--acid);\n content: \"\";\n }\n\n .community {\n display: flex;\n align-items: flex-end;\n padding: 110px clamp(20px, 6vw, 96px) clamp(28px, 6vw, 78px);\n color: #fff;\n background:\n linear-gradient(180deg, rgba(6, 15, 9, 0.1), rgba(6, 15, 9, 0.5)),\n url(\"http:\/\/dafrog.online\/wp-content\/uploads\/2026\/08\/bg4.png\") center \/ cover\n no-repeat;\n }\n\n .community::after {\n background:\n linear-gradient(90deg, rgba(3, 13, 7, 0.62), transparent 68%),\n linear-gradient(180deg, transparent 35%, rgba(3, 13, 7, 0.55));\n }\n\n .community-content {\n position: relative;\n z-index: 1;\n width: 100%;\n }\n\n .community h2 {\n max-width: 1000px;\n color: var(--acid);\n font-size: clamp(66px, 13vw, 196px);\n }\n\n .community h2 span {\n color: #fff;\n }\n\n .community-meta {\n display: grid;\n grid-template-columns: minmax(200px, 340px) 1fr;\n gap: 40px;\n align-items: end;\n margin-top: 35px;\n padding-top: 17px;\n border-top: 1px solid var(--white-line);\n }\n\n .community-meta p {\n max-width: 330px;\n margin: 0;\n color: rgba(255, 255, 255, 0.77);\n font-size: 14px;\n line-height: 1.5;\n }\n\n .stat-row {\n display: flex;\n justify-content: flex-end;\n gap: clamp(28px, 6vw, 110px);\n }\n\n .stat strong {\n display: block;\n color: var(--acid);\n font-family: var(--display);\n font-size: clamp(38px, 5vw, 72px);\n line-height: 0.9;\n letter-spacing: -0.04em;\n }\n\n .stat span {\n display: block;\n margin-top: 8px;\n color: rgba(255, 255, 255, 0.65);\n font-family: var(--mono);\n font-size: 9px;\n letter-spacing: 0.1em;\n text-transform: uppercase;\n }\n\n .final {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 110px clamp(20px, 7vw, 112px);\n color: #fff;\n background:\n linear-gradient(90deg, rgba(5, 15, 8, 0.8), rgba(5, 15, 8, 0.2)),\n url(\"http:\/\/dafrog.online\/wp-content\/uploads\/2026\/08\/bg5.png\") center \/ cover\n no-repeat;\n }\n\n .final::after {\n background: linear-gradient(90deg, rgba(5, 15, 8, 0.35), transparent);\n }\n\n .final-content {\n position: relative;\n z-index: 1;\n display: grid;\n grid-template-columns: minmax(280px, 1fr) minmax(240px, 0.8fr);\n gap: clamp(50px, 13vw, 210px);\n align-items: center;\n width: 100%;\n max-width: 1270px;\n }\n\n .final h2 {\n max-width: 580px;\n color: var(--acid);\n font-size: clamp(76px, 12vw, 182px);\n }\n\n .final h2 span {\n display: block;\n color: #fff;\n }\n\n .final-aside {\n max-width: 300px;\n }\n\n .final-aside p {\n margin: 0 0 27px;\n color: rgba(255, 255, 255, 0.8);\n font-size: 15px;\n line-height: 1.55;\n }\n\n .final .primary-link {\n width: max-content;\n }\n\n .footer-line {\n position: absolute;\n right: clamp(20px, 7vw, 112px);\n bottom: 28px;\n left: clamp(20px, 7vw, 112px);\n display: flex;\n justify-content: space-between;\n color: rgba(255, 255, 255, 0.52);\n font-family: var(--mono);\n font-size: 9px;\n letter-spacing: 0.09em;\n text-transform: uppercase;\n }\n\n .reveal {\n opacity: 0;\n transform: translateY(24px);\n transition:\n opacity 800ms cubic-bezier(0.22, 1, 0.36, 1),\n transform 800ms cubic-bezier(0.22, 1, 0.36, 1);\n }\n\n .reveal.is-visible {\n opacity: 1;\n transform: translateY(0);\n }\n\n @keyframes float {\n 0%,\n 100% {\n transform: translateY(-10px) rotate(-1deg);\n }\n 50% {\n transform: translateY(13px) rotate(1deg);\n }\n }\n\n @keyframes slow-spin {\n from {\n transform: rotate(0);\n }\n to {\n transform: rotate(360deg);\n }\n }\n\n @media (max-width: 720px) {\n .site-nav {\n padding-top: 18px;\n }\n\n .nav-links {\n gap: 12px;\n font-size: 8px;\n }\n\n .nav-links a:nth-child(2) {\n display: none;\n }\n\n .section-number {\n top: 85px;\n }\n\n .hero {\n padding-bottom: 34px;\n }\n\n .hero h1 {\n font-size: clamp(74px, 24vw, 150px);\n }\n\n .hero-bottom {\n align-items: flex-start;\n flex-direction: column;\n gap: 24px;\n margin-top: 40px;\n }\n\n .hero-tag {\n right: 20px;\n bottom: 35px;\n width: 67px;\n height: 67px;\n font-size: 7px;\n }\n\n .intro {\n align-items: flex-end;\n min-height: 90svh;\n padding: 125px 20px 60px;\n background-position: 62% center;\n }\n\n .intro h2 {\n font-size: clamp(57px, 17vw, 115px);\n }\n\n .intro::before {\n position: absolute;\n inset: 0;\n background: linear-gradient(0deg, rgba(243, 240, 232, 0.97), rgba(243, 240, 232, 0.25));\n content: \"\";\n }\n\n .intro-side-note {\n display: none;\n }\n\n .character {\n min-height: 90svh;\n }\n\n .character::before {\n inset: 14% 5%;\n }\n\n .featured-image {\n width: 95vw;\n max-height: 66svh;\n }\n\n .character-label {\n right: 20px;\n bottom: 35px;\n }\n\n .community {\n min-height: 92svh;\n padding: 105px 20px 36px;\n }\n\n .community h2 {\n font-size: clamp(62px, 20vw, 132px);\n }\n\n .community-meta {\n grid-template-columns: 1fr;\n gap: 30px;\n }\n\n .stat-row {\n justify-content: flex-start;\n }\n\n .final {\n min-height: 90svh;\n align-items: flex-end;\n padding: 115px 20px 65px;\n }\n\n .final-content {\n grid-template-columns: 1fr;\n gap: 36px;\n }\n\n .final h2 {\n font-size: clamp(72px, 21vw, 145px);\n }\n\n .footer-line {\n bottom: 21px;\n font-size: 8px;\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 <nav class=\"site-nav\" aria-label=\"Main navigation\">\n <a class=\"wordmark\" href=\"#top\" aria-label=\"dafrog home\">\n <!--<span class=\"wordmark-mark\">d<\/span>-->\n <span>$dafrog<\/span>\n <\/a>\n <div class=\"nav-links\">\n <a href=\"#story\">story<\/a>\n <a href=\"#character\">character<\/a>\n <a href=\"#community\">community<\/a>\n <\/div>\n <\/nav>\n\n <main>\n <section class=\"section hero\" id=\"top\" aria-labelledby=\"hero-title\">\n <span class=\"section-number\">01 \/ make noise<\/span>\n <div class=\"hero-content\">\n <p class=\"eyebrow reveal\">the frog has entered the chat<\/p>\n <h1 id=\"hero-title\" class=\"reveal\">da<span>frog<\/span><\/h1>\n <div class=\"hero-bottom reveal\">\n <p class=\"hero-copy\">\n A little green signal in a very loud internet. No roadmap to nowhere.\n Just character, community, and a ticker you will remember.\n <\/p>\n <a class=\"primary-link\" href=\"#community\">enter the pond<\/a>\n <\/div>\n <\/div>\n <!--<div class=\"hero-tag\" aria-hidden=\"true\">born<br \/>to hop<\/div>-->\n <\/section>\n\n <section class=\"section intro\" id=\"story\" aria-labelledby=\"story-title\">\n <span class=\"section-number\">02 \/ the idea<\/span>\n <div class=\"intro-content reveal\">\n <h2 id=\"story-title\">small pond.<em>big energy.<\/em><\/h2>\n <div class=\"intro-rule\"><\/div>\n <p class=\"intro-copy\">\n dafrog is for the ones who show up early, stay weird, and know that the\n best communities are built one unforgettable moment at a time.\n <\/p>\n <span class=\"intro-side-note\">internet native \/ community powered<\/span>\n <\/div>\n <\/section>\n\n <section class=\"section character\" id=\"character\" aria-labelledby=\"character-title\">\n <span class=\"section-number\">03 \/ meet dafrog<\/span>\n <div class=\"character-watermark\" aria-hidden=\"true\">d<\/div>\n <img decoding=\"async\"\n class=\"featured-image\"\n src=\"http:\/\/dafrog.online\/wp-content\/uploads\/2026\/08\/featured3.png\"\n alt=\"The dafrog character\"\n \/>\n <p id=\"character-title\" class=\"character-label reveal\">\n iconic by accident.<br \/>\n impossible to ignore.\n <\/p>\n <\/section>\n\n <section class=\"section community\" id=\"community\" aria-labelledby=\"community-title\">\n <span class=\"section-number\">04 \/ join the energy<\/span>\n <div class=\"community-content\">\n <h2 id=\"community-title\" class=\"reveal\">one pond.<br \/><span>zero lurkers.<\/span><\/h2>\n <div class=\"community-meta reveal\">\n <p>\n This is not a spectator sport. Pull up, find your people, and add your\n own weird little ripple to the story.\n <\/p>\n <div class=\"stat-row\" aria-label=\"Community highlights\">\n <div class=\"stat\">\n <strong>24\/7<\/strong>\n <span>pond energy<\/span>\n <\/div>\n <div class=\"stat\">\n <strong>\u221e<\/strong>\n <span>ways to hop<\/span>\n <\/div>\n <div class=\"stat\">\n <strong>1<\/strong>\n <span>dafrog<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"section final\" aria-labelledby=\"final-title\">\n <span class=\"section-number\">05 \/ see you inside<\/span>\n <div class=\"final-content\">\n <h2 id=\"final-title\" class=\"reveal\">come<br \/><span>hop in.<\/span><\/h2>\n <div class=\"final-aside reveal\">\n <p>\n The pond is open. Bring your curiosity, your best takes, and a little\n room for the unexpected.\n <\/p>\n <!--<a class=\"primary-link\" href=\"#top\">join dafrog<\/a>-->\n <a class=\"primary-link\" href=\"#top\">Twitter<\/a>\n <a class=\"primary-link\" href=\"#top\">Telegram<\/a>\n <\/div>\n <\/div>\n <div class=\"footer-line\">\n <span>$dafrog \/ 2026<\/span>\n <span>stay weird, stay moving<\/span>\n <\/div>\n <\/section>\n <\/main>\n\n <script>\n const revealItems = document.querySelectorAll(\".reveal\");\n const revealObserver = new IntersectionObserver(\n (entries, observer) => {\n entries.forEach((entry) => {\n if (!entry.isIntersecting) return;\n entry.target.classList.add(\"is-visible\");\n observer.unobserve(entry.target);\n });\n },\n { threshold: 0.14 }\n );\n\n revealItems.forEach((item, index) => {\n item.style.transitionDelay = `${Math.min(index * 45, 220)}ms`;\n revealObserver.observe(item);\n });\n\n const hero = document.querySelector(\".hero\");\n let ticking = false;\n\n window.addEventListener(\n \"scroll\",\n () => {\n if (ticking) return;\n ticking = true;\n window.requestAnimationFrame(() => {\n const offset = Math.min(window.scrollY * 0.12, 70);\n hero.style.backgroundPosition = `center ${offset}px`;\n ticking = false;\n });\n },\n { passive: true }\n );\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>dafrog \u2014 $dafrog $dafrog story character community 01 \/ make noise the frog has entered the chat dafrog A little green signal in a very loud internet. No roadmap to nowhere. Just character, community, and a ticker you will remember. enter the pond 02 \/ the idea small pond.big energy. dafrog is for the ones […]<\/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-9","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/dafrog.online\/index.php?rest_route=\/wp\/v2\/pages\/9","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dafrog.online\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/dafrog.online\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/dafrog.online\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dafrog.online\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=9"}],"version-history":[{"count":31,"href":"https:\/\/dafrog.online\/index.php?rest_route=\/wp\/v2\/pages\/9\/revisions"}],"predecessor-version":[{"id":47,"href":"https:\/\/dafrog.online\/index.php?rest_route=\/wp\/v2\/pages\/9\/revisions\/47"}],"wp:attachment":[{"href":"https:\/\/dafrog.online\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=9"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}