{"id":8,"date":"2026-05-19T09:21:27","date_gmt":"2026-05-19T09:21:27","guid":{"rendered":"https:\/\/whewonsol.fun\/?page_id=8"},"modified":"2026-05-19T10:40:05","modified_gmt":"2026-05-19T10:40:05","slug":"elementor-8","status":"publish","type":"page","link":"https:\/\/whewonsol.fun\/","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\r\n\r\n\r\n\r\n\r\nWHEW! \u2014 When reality glitches for a second.<\/title>\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.cdnfonts.com\">\r\n<style>\r\n @font-face {\r\n font-family: \"Stack Sans Notch\";\r\n src: url(\"https:\/\/fonts.cdnfonts.com\/s\/110890\/StackSansNotch-Regular.woff\") format(\"woff\");\r\n font-weight: 400; font-display: swap;\r\n }\r\n @font-face {\r\n font-family: \"Stack Sans Notch\";\r\n src: url(\"https:\/\/fonts.cdnfonts.com\/s\/110890\/StackSansNotch-Bold.woff\") format(\"woff\");\r\n font-weight: 700; font-display: swap;\r\n }\r\n\r\n :root {\r\n --gold: #ffcc00;\r\n --bg: #000000;\r\n --card: #0a0a0a;\r\n --border: rgba(255,255,255,0.08);\r\n --text: #ffffff;\r\n --muted: #9e9e9e;\r\n --grid: rgba(255,255,255,0.035);\r\n }\r\n\r\n \/* Force font untuk semua elemen *\/\r\n * { box-sizing: border-box; margin: 0; padding: 0; border-color: var(--border); font-family: \"Stack Sans Notch\", sans-serif; }\r\n html, body { overflow-x: hidden; }\r\n body {\r\n background:\r\n radial-gradient(1200px 600px at 50% -10%, rgba(255,204,0,0.06), transparent 60%),\r\n radial-gradient(800px 500px at 80% 40%, rgba(255,204,0,0.03), transparent 60%),\r\n #000;\r\n background-attachment: fixed;\r\n color: var(--text);\r\n -webkit-font-smoothing: antialiased;\r\n line-height: 1.5;\r\n min-height: 100vh;\r\n }\r\n a { color: inherit; text-decoration: none; }\r\n button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }\r\n img { display: block; max-width: 100%; }\r\n ::selection { background: rgba(255,204,0,0.35); color: #000; }\r\n\r\n \/* ===== Utilities ===== *\/\r\n .font-display { letter-spacing: -0.04em; font-weight: 700; }\r\n .text-gold { color: var(--gold); }\r\n .muted { color: var(--muted); }\r\n\r\n .grid-overlay {\r\n background-image:\r\n linear-gradient(var(--grid) 1px, transparent 1px),\r\n linear-gradient(90deg, var(--grid) 1px, transparent 1px);\r\n background-size: 56px 56px;\r\n }\r\n\r\n .glass {\r\n background: rgba(10,10,10,0.55);\r\n backdrop-filter: blur(24px) saturate(140%);\r\n -webkit-backdrop-filter: blur(24px) saturate(140%);\r\n border: 1px solid var(--border);\r\n box-shadow:\r\n 0 1px 0 rgba(255,255,255,0.04) inset,\r\n 0 30px 80px -30px rgba(0,0,0,0.8);\r\n }\r\n .glass-strong {\r\n background: rgba(10,10,10,0.7);\r\n backdrop-filter: blur(32px) saturate(160%);\r\n -webkit-backdrop-filter: blur(32px) saturate(160%);\r\n border: 1px solid var(--border);\r\n }\r\n .gold-text-glow {\r\n text-shadow: 0 0 30px rgba(255,204,0,0.35), 0 0 80px rgba(255,204,0,0.15);\r\n }\r\n\r\n .shine { position: relative; overflow: hidden; }\r\n .shine::before {\r\n content: \"\"; position: absolute; inset: 0;\r\n background: linear-gradient(120deg, transparent 25%, rgba(255,204,0,0.1) 50%, transparent 75%);\r\n transform: translateX(-100%);\r\n transition: transform 1.2s ease;\r\n pointer-events: none;\r\n }\r\n .shine:hover::before { transform: translateX(100%); }\r\n\r\n .card-hover {\r\n transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.5s, box-shadow 0.5s;\r\n }\r\n .card-hover:hover {\r\n transform: translateY(-6px);\r\n border-color: rgba(255,204,0,0.25);\r\n box-shadow: 0 30px 80px -30px rgba(0,0,0,0.9), 0 0 60px -20px rgba(255,204,0,0.3);\r\n }\r\n\r\n \/* ===== Animations ===== *\/\r\n @keyframes float-soft { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }\r\n .anim-float { animation: float-soft 6s ease-in-out infinite; }\r\n\r\n @keyframes shake-soft {\r\n 0%,100% { transform: translate(0,0) rotate(0); }\r\n 20% { transform: translate(-2px,1px) rotate(-0.6deg); }\r\n 40% { transform: translate(2px,-1px) rotate(0.6deg); }\r\n 60% { transform: translate(-1px,-2px) rotate(-0.3deg); }\r\n 80% { transform: translate(1px,2px) rotate(0.3deg); }\r\n }\r\n .anim-shake { animation: shake-soft 2.4s ease-in-out infinite; }\r\n\r\n @keyframes pulse-ring { 0%,100% { opacity: 0.4; transform: scale(1); } 50% { opacity: 0.9; transform: scale(1.04); } }\r\n .anim-pulse-ring { animation: pulse-ring 3s ease-in-out infinite; }\r\n\r\n \/* Animasi Particles *\/\r\n @keyframes drift-up {\r\n 0% { transform: translateY(0) translateX(0); opacity: 0; }\r\n 10% { opacity: var(--p-op, 0.5); }\r\n 90% { opacity: var(--p-op, 0.5); }\r\n 100% { transform: translateY(-120vh) translateX(var(--p-x, 20px)); opacity: 0; }\r\n }\r\n .particle {\r\n position: absolute; pointer-events: none;\r\n animation: drift-up var(--p-dur, 22s) linear infinite, shake-soft 2.4s ease-in-out infinite;\r\n }\r\n\r\n @keyframes fade-in-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }\r\n .reveal { opacity: 0; }\r\n .reveal.in { animation: fade-in-up 0.9s cubic-bezier(0.22,1,0.36,1) forwards; }\r\n\r\n \/* ===== Layout ===== *\/\r\n .fixed-bg { position: fixed; inset: 0; pointer-events: none; z-index: 0; }\r\n .fixed-bg.grid-overlay { opacity: 0.5; }\r\n .global-glow {\r\n position: fixed; top: 0; left: 50%; transform: translateX(-50%);\r\n width: 80vw; height: 80vh; pointer-events: none; z-index: 0;\r\n background: radial-gradient(ellipse at top, rgba(255,204,0,0.08), transparent 60%);\r\n }\r\n main { position: relative; z-index: 2; }\r\n section { padding: 5rem 1rem; }\r\n .container { max-width: 72rem; margin: 0 auto; }\r\n .narrow { max-width: 56rem; margin: 0 auto; }\r\n .center-col { display: flex; flex-direction: column; align-items: center; text-align: center; }\r\n\r\n \/* ===== Navbar ===== *\/\r\n @keyframes nav-fade-in-up { \r\n from { opacity: 0; transform: translate(-50%, 20px); } \r\n to { opacity: 1; transform: translate(-50%, 0); } \r\n }\r\n .nav {\r\n position: fixed; top: 20px; left: 50%; transform: translateX(-50%);\r\n z-index: 50; width: min(94%, 820px);\r\n display: flex; align-items: center; justify-content: space-between;\r\n padding: 8px 8px 8px 24px;\r\n border-radius: 999px;\r\n animation: nav-fade-in-up 0.8s cubic-bezier(0.22,1,0.36,1) both;\r\n }\r\n .nav .logo { font-weight: 700; font-size: 1.25rem; letter-spacing: -0.04em; }\r\n .nav-right { display: flex; gap: 8px; align-items: center; }\r\n .btn-pill {\r\n display: inline-flex; align-items: center; gap: 8px;\r\n padding: 8px 16px; border-radius: 999px; font-size: 0.875rem;\r\n border: 1px solid var(--border); color: rgba(255,255,255,0.8);\r\n transition: all 0.3s ease;\r\n }\r\n .btn-pill:hover { color: #fff; border-color: rgba(255,255,255,0.18); }\r\n .btn-gold {\r\n display: inline-flex; align-items: center; gap: 8px;\r\n padding: 8px 16px; border-radius: 999px; font-size: 0.875rem; font-weight: 600;\r\n background: var(--gold); color: #000;\r\n box-shadow: 0 0 30px -8px rgba(255,204,0,0.6);\r\n transition: all 0.3s ease;\r\n }\r\n .btn-gold:hover { filter: brightness(1.1); }\r\n .btn-lg { padding: 16px 32px; font-size: 0.95rem; }\r\n .btn-outline-lg {\r\n display: inline-flex; align-items: center; gap: 8px;\r\n padding: 16px 32px; border-radius: 999px; font-weight: 500;\r\n border: 1px solid rgba(255,255,255,0.1); color: #fff;\r\n transition: all 0.3s ease;\r\n }\r\n .btn-outline-lg:hover { border-color: rgba(255,255,255,0.25); }\r\n\r\n \/* ===== Hero ===== *\/\r\n .hero { padding: 10rem 1rem 7rem; position: relative; }\r\n .hero-halo {\r\n position: absolute; top: 80px; left: 50%; transform: translateX(-50%);\r\n width: 900px; height: 900px; pointer-events: none;\r\n background: radial-gradient(circle, rgba(255,204,0,0.14), transparent 60%);\r\n }\r\n .chip {\r\n display: inline-flex; align-items: center; gap: 8px;\r\n padding: 6px 16px; border-radius: 999px; margin-bottom: 2.5rem;\r\n font-size: 10px; text-transform: uppercase; letter-spacing: 0.3em; color: rgba(255,255,255,0.7);\r\n }\r\n .dot {\r\n width: 6px; height: 6px; border-radius: 999px; background: var(--gold);\r\n box-shadow: 0 0 10px var(--gold);\r\n }\r\n .char-wrap { position: relative; margin-bottom: 2.5rem; }\r\n .char-halo {\r\n position: absolute; inset: 0; border-radius: 999px; pointer-events: none;\r\n background: radial-gradient(circle, rgba(255,204,0,0.4), transparent 65%);\r\n transform: scale(1.6);\r\n }\r\n .char-btn { position: relative; display: block; transition: transform 0.3s; }\r\n .char-btn:hover { transform: scale(1.04); }\r\n .char-btn:active { transform: scale(0.92); }\r\n .char-img {\r\n width: 240px; height: auto;\r\n filter: drop-shadow(0 40px 80px rgba(255,204,0,0.45)) drop-shadow(0 0 30px rgba(255,204,0,0.3));\r\n user-select: none; -webkit-user-drag: none;\r\n }\r\n @media (min-width: 768px) { .char-img { width: 320px; } }\r\n\r\n .hero-title { font-size: 22vw; line-height: 0.82; }\r\n @media (min-width: 768px) { .hero-title { font-size: 14rem; } }\r\n .hero-desc { font-size: 1rem; color: var(--muted); max-width: 32rem; margin-top: 2rem; line-height: 1.6; }\r\n @media (min-width: 768px) { .hero-desc { font-size: 1.125rem; } }\r\n\r\n .ca-btn {\r\n display: inline-flex; align-items: center; gap: 12px;\r\n padding: 8px 8px 8px 20px; border-radius: 999px; margin-top: 3rem;\r\n transition: border-color 0.3s;\r\n }\r\n .ca-btn:hover { border-color: rgba(255,204,0,0.4); }\r\n .ca-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.25em; color: var(--muted); }\r\n .ca-code {\r\n font-size: 0.75rem; color: rgba(255,255,255,0.9);\r\n max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;\r\n }\r\n @media (min-width: 768px) { .ca-code { font-size: 0.875rem; max-width: 360px; } }\r\n .ca-copy {\r\n display: inline-flex; align-items: center; gap: 6px;\r\n background: var(--gold); color: #000; font-weight: 600;\r\n padding: 8px 16px; border-radius: 999px; font-size: 0.75rem;\r\n }\r\n .cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 1.5rem; }\r\n\r\n \/* Confetti Styles Baru *\/\r\n .confetti-layer { position: absolute; top: 50%; left: 50%; pointer-events: none; z-index: 10; }\r\n .confetti {\r\n position: absolute;\r\n margin: -5px; \/* Center offset *\/\r\n will-change: transform, opacity;\r\n }\r\n\r\n \/* ===== Section headers ===== *\/\r\n .eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 1.5rem; }\r\n .eyebrow span:not(.line) { font-size: 11px; text-transform: uppercase; letter-spacing: 0.3em; color: var(--gold); }\r\n .line { width: 32px; height: 1px; background: var(--gold); display: block; }\r\n .h-section { font-size: 3rem; line-height: 0.95; margin-bottom: 0; }\r\n @media (min-width: 768px) { .h-section { font-size: 4.5rem; } }\r\n\r\n \/* ===== About ===== *\/\r\n .about-card {\r\n border-radius: 40px; padding: 2.5rem; position: relative; overflow: hidden;\r\n }\r\n @media (min-width: 768px) { .about-card { padding: 5rem; } }\r\n .about-card .glow-tr {\r\n position: absolute; top: -80px; right: -80px; width: 400px; height: 400px; border-radius: 999px;\r\n background: radial-gradient(circle, rgba(255,204,0,0.1), transparent 60%);\r\n }\r\n .about-text { font-size: 1.125rem; color: var(--muted); max-width: 42rem; line-height: 1.6; margin-top: 2rem; }\r\n @media (min-width: 768px) { .about-text { font-size: 1.25rem; } }\r\n\r\n \/* ===== Bento ===== *\/\r\n .bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }\r\n @media (min-width: 768px) { .bento { gap: 20px; } }\r\n .bento-supply { grid-column: span 12; padding: 2rem; min-height: 340px; border-radius: 34px; position: relative; overflow: hidden; display: flex; flex-direction: column; }\r\n .bento-radar { grid-column: span 12; padding: 2rem; min-height: 340px; border-radius: 34px; position: relative; overflow: hidden; display: flex; flex-direction: column; }\r\n .bento-small { grid-column: span 6; padding: 1.5rem; min-height: 180px; border-radius: 28px; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; }\r\n @media (min-width: 768px) {\r\n .bento-supply { grid-column: span 7; padding: 3rem; }\r\n .bento-radar { grid-column: span 5; }\r\n .bento-small { grid-column: span 3; }\r\n }\r\n .supply-num { font-size: 26vw; line-height: 1; }\r\n @media (min-width: 768px) { .supply-num { font-size: 14rem; } }\r\n .bars { display: flex; align-items: flex-end; gap: 6px; height: 80px; margin-top: 1rem; }\r\n .bar { flex: 1; border-radius: 2px; box-shadow: 0 0 12px rgba(255,204,0,0.15); }\r\n .icon-tile {\r\n width: 40px; height: 40px; border-radius: 12px;\r\n display: flex; align-items: center; justify-content: center;\r\n background: rgba(255,204,0,0.1); border: 1px solid rgba(255,204,0,0.25);\r\n color: var(--gold);\r\n }\r\n .small-title { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.04em; }\r\n .small-desc { font-size: 0.875rem; color: var(--muted); margin-top: 4px; }\r\n .live-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; color: var(--gold); text-transform: uppercase; }\r\n\r\n \/* ===== Roadmap ===== *\/\r\n .roadmap-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }\r\n @media (min-width: 768px) { .roadmap-grid { grid-template-columns: 1fr 1fr; gap: 20px; } }\r\n @media (min-width: 1024px) { .roadmap-grid { grid-template-columns: 1fr 1fr 1fr; } }\r\n .phase-card {\r\n border-radius: 28px; padding: 2rem; min-height: 240px; position: relative; overflow: hidden;\r\n display: flex; flex-direction: column; justify-content: space-between;\r\n }\r\n .phase-top { display: flex; align-items: flex-start; justify-content: space-between; }\r\n .phase-num { font-size: 0.75rem; color: var(--muted); }\r\n .phase-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--gold); box-shadow: 0 0 12px var(--gold); }\r\n .phase-title { font-size: 2.25rem; font-weight: 700; letter-spacing: -0.04em; margin-bottom: 12px; }\r\n .phase-desc { font-size: 0.875rem; color: var(--muted); line-height: 1.6; }\r\n\r\n \/* ===== Community ===== *\/\r\n .community { padding: 8rem 1rem; position: relative; overflow: hidden; }\r\n .community-glow {\r\n position: absolute; inset: 0; pointer-events: none;\r\n background: radial-gradient(ellipse at 50% 50%, rgba(255,204,0,0.18), transparent 55%);\r\n }\r\n .rings { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); pointer-events: none; }\r\n .ring { position: absolute; border-radius: 999px; border: 1px solid rgba(255,255,255,0.05); }\r\n .community-title { font-size: 4rem; line-height: 0.88; }\r\n @media (min-width: 768px) { .community-title { font-size: 8rem; } }\r\n\r\n \/* ===== Footer ===== *\/\r\n footer { padding: 2.5rem 1rem 4rem; text-align: center; position: relative; }\r\n .footer-title { font-size: 4.5rem; line-height: 1; }\r\n @media (min-width: 768px) { .footer-title { font-size: 10rem; } }\r\n .footer-sub { color: var(--muted); margin-top: 1rem; font-size: 0.875rem; font-style: italic; }\r\n .copyr { margin-top: 2.5rem; font-size: 10px; text-transform: uppercase; letter-spacing: 0.3em; color: #555; }\r\n\r\n svg { display: block; }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<!-- Global background layers -->\r\n<div class=\"fixed-bg grid-overlay\"><\/div>\r\n<div class=\"global-glow\"><\/div>\r\n<!-- z-index diubah agar global particles dipastikan muncul di atas glow -->\r\n<div class=\"fixed-bg\" id=\"globalParticles\" style=\"z-index: 1;\"><\/div>\r\n\r\n<!-- Navbar -->\r\n<nav class=\"nav glass\">\r\n <a href=\"#top\" class=\"logo\">Whew<span class=\"text-gold\">!<\/span><\/a>\r\n <div class=\"nav-right\">\r\n <a href=\"https:\/\/twitter.com\" target=\"_blank\" rel=\"noreferrer\" class=\"btn-pill shine\">Twitter<\/a>\r\n <a href=\"https:\/\/telegram.org\" target=\"_blank\" rel=\"noreferrer\" class=\"btn-gold shine\">Telegram<\/a>\r\n <\/div>\r\n<\/nav>\r\n\r\n<main>\r\n <!-- HERO -->\r\n <section id=\"top\" class=\"hero\">\r\n <div class=\"hero-halo\"><\/div>\r\n <div class=\"narrow center-col\">\r\n <div class=\"chip glass\">\r\n <span class=\"dot anim-pulse-ring\"><\/span>\r\n <span>Live on Solana<\/span>\r\n <\/div>\r\n\r\n <div class=\"char-wrap\">\r\n <div class=\"char-halo anim-pulse-ring\"><\/div>\r\n <button class=\"char-btn anim-float\" id=\"charBtn\" aria-label=\"Whew character\">\r\n <img decoding=\"async\" class=\"char-img anim-shake\"\r\n src=\"https:\/\/whewonsol.fun\/wp-content\/uploads\/2026\/05\/Asset-1.png\"\r\n alt=\"WHEW character\" \/>\r\n <\/button>\r\n <div class=\"confetti-layer\" id=\"confettiLayer\"><\/div>\r\n <\/div>\r\n\r\n <h1 class=\"font-display hero-title gold-text-glow\">WHEW<span class=\"text-gold\">!<\/span><\/h1>\r\n <p class=\"hero-desc\">\r\n When reality glitches for a second.<br\/>\r\n The chart goes vertical. The timeline loses its mind.\r\n <\/p>\r\n\r\n <button class=\"ca-btn glass-strong shine\" id=\"caBtn\">\r\n <span class=\"ca-label\">CA<\/span>\r\n <span class=\"ca-code\" id=\"caCode\">7xK9mP4wYzQ31FhA92LmWHEW69xTnSolExample<\/span>\r\n <span class=\"ca-copy\" id=\"caCopy\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\"\/><path d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\"\/><\/svg>\r\n COPY\r\n <\/span>\r\n <\/button>\r\n\r\n <div class=\"cta-row\">\r\n <a href=\"#\" class=\"btn-gold btn-lg shine\" style=\"box-shadow:0 20px 60px -15px rgba(255,204,0,0.6);\">\r\n BUY NOW\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"7\" y1=\"17\" x2=\"17\" y2=\"7\"\/><polyline points=\"7 7 17 7 17 17\"\/><\/svg>\r\n <\/a>\r\n <a href=\"#community\" class=\"btn-outline-lg shine\">\r\n JOIN COMMUNITY\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2\"\/><circle cx=\"9\" cy=\"7\" r=\"4\"\/><path d=\"M23 21v-2a4 4 0 0 0-3-3.87\"\/><path d=\"M16 3.13a4 4 0 0 1 0 7.75\"\/><\/svg>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- ABOUT -->\r\n <section>\r\n <div class=\"container reveal\">\r\n <div class=\"glass card-hover about-card\">\r\n <div class=\"glow-tr\"><\/div>\r\n <div class=\"center-col\">\r\n <div class=\"eyebrow\">\r\n <span class=\"line\"><\/span><span>About<\/span><span class=\"line\"><\/span>\r\n <\/div>\r\n <h2 class=\"font-display h-section\">\r\n One moment.<br\/>\r\n <span class=\"muted\">Frozen forever.<\/span>\r\n <\/h2>\r\n <p class=\"about-text\">\r\n WHEW! captures the exact moment when the internet becomes too insane to process.\r\n One shocking candle. One unbelievable meme. One moment that freezes the timeline.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- TOKENOMICS -->\r\n <section>\r\n <div class=\"container\">\r\n <div class=\"center-col reveal\" style=\"margin-bottom:3.5rem;\">\r\n <div class=\"eyebrow\">\r\n <span class=\"line\"><\/span><span>Tokenomics<\/span><span class=\"line\"><\/span>\r\n <\/div>\r\n <h2 class=\"font-display h-section\">Built for <span class=\"text-gold\">degens<\/span>.<\/h2>\r\n <\/div>\r\n\r\n <div class=\"bento\">\r\n <!-- Supply -->\r\n <div class=\"bento-supply glass card-hover reveal\">\r\n <div style=\"position:absolute;top:-128px;right:-128px;width:400px;height:400px;border-radius:999px;background:radial-gradient(circle,rgba(255,204,0,0.15),transparent 60%);\"><\/div>\r\n <div style=\"position:relative;display:flex;flex-direction:column;height:100%;\">\r\n <span class=\"ca-label\">Total Supply<\/span>\r\n <div style=\"flex:1;display:flex;align-items:center;\">\r\n <div class=\"font-display supply-num gold-text-glow\">1<span class=\"text-gold\">B<\/span><\/div>\r\n <\/div>\r\n <div class=\"bars\" id=\"bars\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Radar -->\r\n <div class=\"bento-radar glass card-hover reveal\">\r\n <div style=\"display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;\">\r\n <span class=\"ca-label\">Vibe Radar<\/span>\r\n <span class=\"live-pill\"><span class=\"dot anim-pulse-ring\"><\/span> LIVE<\/span>\r\n <\/div>\r\n <div style=\"flex:1;display:flex;align-items:center;justify-content:center;\">\r\n <svg viewBox=\"0 0 200 200\" width=\"100%\" height=\"100%\">\r\n <defs>\r\n <radialGradient id=\"rg\" cx=\"50%\" cy=\"50%\" r=\"50%\">\r\n <stop offset=\"0%\" stop-color=\"rgba(255,204,0,0.3)\"\/>\r\n <stop offset=\"100%\" stop-color=\"rgba(255,204,0,0)\"\/>\r\n <\/radialGradient>\r\n <\/defs>\r\n <circle cx=\"100\" cy=\"100\" r=\"90\" fill=\"url(#rg)\"\/>\r\n <circle cx=\"100\" cy=\"100\" r=\"20\" fill=\"none\" stroke=\"rgba(255,255,255,0.06)\"\/>\r\n <circle cx=\"100\" cy=\"100\" r=\"40\" fill=\"none\" stroke=\"rgba(255,255,255,0.06)\"\/>\r\n <circle cx=\"100\" cy=\"100\" r=\"60\" fill=\"none\" stroke=\"rgba(255,255,255,0.06)\"\/>\r\n <circle cx=\"100\" cy=\"100\" r=\"80\" fill=\"none\" stroke=\"rgba(255,255,255,0.06)\"\/>\r\n <line x1=\"10\" y1=\"100\" x2=\"190\" y2=\"100\" stroke=\"rgba(255,255,255,0.06)\"\/>\r\n <line x1=\"100\" y1=\"10\" x2=\"100\" y2=\"190\" stroke=\"rgba(255,255,255,0.06)\"\/>\r\n <polygon points=\"100,100 160,60 170,120 110,150 60,130 50,70\" fill=\"rgba(255,204,0,0.15)\" stroke=\"#ffcc00\" stroke-width=\"1\"\/>\r\n <circle cx=\"100\" cy=\"100\" r=\"3\" fill=\"#ffcc00\"\/>\r\n <\/svg>\r\n <\/div>\r\n <div style=\"display:flex;justify-content:space-between;font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:0.05em;\">\r\n <span>Hype <span style=\"color:#fff;\">98%<\/span><\/span>\r\n <span>Chaos <span style=\"color:#fff;\">\u221e<\/span><\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- small cards -->\r\n <div class=\"bento-small glass card-hover shine reveal\">\r\n <div class=\"icon-tile\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"4.93\" y1=\"4.93\" x2=\"19.07\" y2=\"19.07\"\/><\/svg><\/div>\r\n <div><div class=\"small-title\">0% TAX<\/div><div class=\"small-desc\">Pure, untaxed flow.<\/div><\/div>\r\n <\/div>\r\n <div class=\"bento-small glass card-hover shine reveal\">\r\n <div class=\"icon-tile\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\"\/><path d=\"M7 11V7a5 5 0 0 1 10 0v4\"\/><\/svg><\/div>\r\n <div><div class=\"small-title\">LOCKED LP<\/div><div class=\"small-desc\">Liquidity sealed shut.<\/div><\/div>\r\n <\/div>\r\n <div class=\"bento-small glass card-hover shine reveal\">\r\n <div class=\"icon-tile\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"\/><polyline points=\"9 12 11 14 15 10\"\/><\/svg><\/div>\r\n <div><div class=\"small-title\">RENOUNCED<\/div><div class=\"small-desc\">Contract abandoned.<\/div><\/div>\r\n <\/div>\r\n <div class=\"bento-small glass card-hover shine reveal\">\r\n <div class=\"icon-tile\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M18.178 8c5.096 0 5.096 8 0 8-5.095 0-7.133-8-12.739-8-4.585 0-4.585 8 0 8 5.606 0 7.644-8 12.74-8z\"\/><\/svg><\/div>\r\n <div><div class=\"small-title\">UNLIMITED VIBES<\/div><div class=\"small-desc\">Capped at infinity.<\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- ROADMAP -->\r\n <section>\r\n <div class=\"container\">\r\n <div class=\"center-col reveal\" style=\"margin-bottom:3.5rem;\">\r\n <div class=\"eyebrow\">\r\n <span class=\"line\"><\/span><span>Roadmap<\/span><span class=\"line\"><\/span>\r\n <\/div>\r\n <h2 class=\"font-display h-section\">Six phases.<br\/><span class=\"muted\">One outcome.<\/span><\/h2>\r\n <\/div>\r\n <div class=\"roadmap-grid\" id=\"roadmap\"><\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- COMMUNITY -->\r\n <section id=\"community\" class=\"community\">\r\n <div class=\"community-glow\"><\/div>\r\n <div class=\"rings\">\r\n <div class=\"ring anim-pulse-ring\" style=\"width:300px;height:300px;left:-150px;top:-150px;\"><\/div>\r\n <div class=\"ring anim-pulse-ring\" style=\"width:500px;height:500px;left:-250px;top:-250px;animation-delay:0.6s;\"><\/div>\r\n <div class=\"ring anim-pulse-ring\" style=\"width:720px;height:720px;left:-360px;top:-360px;animation-delay:1.2s;\"><\/div>\r\n <div class=\"ring anim-pulse-ring\" style=\"width:960px;height:960px;left:-480px;top:-480px;animation-delay:1.8s;\"><\/div>\r\n <\/div>\r\n <div class=\"community-particles\" id=\"communityParticles\" style=\"position:absolute;inset:0;pointer-events:none;\"><\/div>\r\n <div class=\"narrow center-col reveal\" style=\"position:relative;\">\r\n <div class=\"eyebrow\">\r\n <span class=\"line\"><\/span><span>Community<\/span><span class=\"line\"><\/span>\r\n <\/div>\r\n <h2 class=\"font-display community-title gold-text-glow\">JOIN THE<br\/><span class=\"text-gold\">CHAOS<\/span><\/h2>\r\n <p class=\"hero-desc\" style=\"margin-top:2.5rem;\">\r\n Something ridiculous is always one refresh away.<br\/>Stay close to the chaos.\r\n <\/p>\r\n <div class=\"cta-row\" style=\"margin-top:3rem;\">\r\n <a href=\"https:\/\/twitter.com\" target=\"_blank\" rel=\"noreferrer\" class=\"btn-gold btn-lg shine\" style=\"box-shadow:0 20px 60px -15px rgba(255,204,0,0.6);\">Twitter<\/a>\r\n <a href=\"https:\/\/telegram.org\" target=\"_blank\" rel=\"noreferrer\" class=\"btn-outline-lg shine\">Telegram<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- FOOTER -->\r\n <footer>\r\n <div class=\"container\">\r\n <div class=\"font-display footer-title gold-text-glow\">WHEW<span class=\"text-gold\">!<\/span><\/div>\r\n <p class=\"footer-sub\">Cover your mouth. Watch history happen.<\/p>\r\n <div class=\"copyr\">\u00a9 <span id=\"year\"><\/span> \u2014 Not financial advice.<\/div>\r\n <\/div>\r\n <\/footer>\r\n<\/main>\r\n\r\n<script>\r\n \/* ===== MENGUBAH PARTICLES MENGGUNAKAN CSS murni (Tanpa Gambar External) ===== *\/\r\n function spawnParticles(container, count) {\r\n const frag = document.createDocumentFragment();\r\n for (let i = 0; i < count; i++) {\r\n const el = document.createElement(\"div\");\r\n el.className = \"particle\";\r\n \r\n const size = 3 + Math.random() * 6; \/\/ Ukuran dot partikel\r\n const duration = 18 + Math.random() * 22;\r\n \r\n el.style.left = (Math.random() * 100) + \"%\";\r\n el.style.bottom = (-10 - Math.random() * 30) + \"%\";\r\n el.style.width = size + \"px\";\r\n el.style.height = size + \"px\";\r\n el.style.background = \"var(--gold)\";\r\n el.style.borderRadius = \"50%\"; \/\/ Membentuk lingkaran (dot)\r\n el.style.boxShadow = `0 0 ${size * 2}px var(--gold)`; \/\/ Efek glow\r\n \r\n el.style.setProperty(\"--p-dur\", duration + \"s\");\r\n el.style.setProperty(\"--p-x\", ((Math.random() - 0.5) * 120) + \"px\");\r\n el.style.setProperty(\"--p-op\", (0.2 + Math.random() * 0.6).toFixed(2));\r\n el.style.animationDelay = (-Math.random() * 30) + \"s, \" + (-Math.random() * 2) + \"s\";\r\n \r\n frag.appendChild(el);\r\n }\r\n container.appendChild(frag);\r\n }\r\n \r\n spawnParticles(document.getElementById(\"globalParticles\"), 40);\r\n spawnParticles(document.getElementById(\"communityParticles\"), 25);\r\n\r\n \/* ===== MENGUBAH CONFETTI MENGGUNAKAN CSS murni ===== *\/\r\n const charBtn = document.getElementById(\"charBtn\");\r\n const confettiLayer = document.getElementById(\"confettiLayer\");\r\n \r\n charBtn.addEventListener(\"click\", () => {\r\n for (let i = 0; i < 35; i++) {\r\n const angle = Math.random() * Math.PI * 2;\r\n const dist = 80 + Math.random() * 220;\r\n const dx = Math.cos(angle) * dist;\r\n const dy = Math.sin(angle) * dist - 60;\r\n const rot = Math.random() * 720 - 360;\r\n const scale = 0.6 + Math.random() * 0.8;\r\n const isCircle = Math.random() > 0.5;\r\n\r\n const el = document.createElement(\"div\");\r\n el.className = \"confetti\";\r\n \r\n \/\/ Styling confetti\r\n el.style.width = (6 + Math.random() * 8) + \"px\";\r\n el.style.height = isCircle ? el.style.width : (12 + Math.random() * 14) + \"px\";\r\n el.style.borderRadius = isCircle ? \"50%\" : \"2px\";\r\n el.style.background = Math.random() > 0.3 ? \"var(--gold)\" : \"#ffffff\";\r\n el.style.boxShadow = `0 0 10px ${el.style.background}`;\r\n \r\n el.style.transform = `translate(0px, 0px) scale(${scale}) rotate(0deg)`;\r\n el.style.opacity = \"1\";\r\n el.style.transition = \"transform 1.4s cubic-bezier(0.16,1,0.3,1), opacity 1.4s cubic-bezier(0.16,1,0.3,1)\";\r\n \r\n confettiLayer.appendChild(el);\r\n\r\n \/\/ Memastikan render awal selesai sebelum transisi berjalan\r\n requestAnimationFrame(() => {\r\n requestAnimationFrame(() => {\r\n el.style.transform = `translate(${dx}px, ${dy}px) scale(${scale * 0.5}) rotate(${rot}deg)`;\r\n el.style.opacity = \"0\";\r\n });\r\n });\r\n \r\n setTimeout(() => el.remove(), 1500);\r\n }\r\n });\r\n\r\n \/* ===== Copy CA ===== *\/\r\n const caBtn = document.getElementById(\"caBtn\");\r\n const caCopy = document.getElementById(\"caCopy\");\r\n const caCode = document.getElementById(\"caCode\").textContent;\r\n caBtn.addEventListener(\"click\", async () => {\r\n try { await navigator.clipboard.writeText(caCode); } catch(e) {}\r\n caCopy.innerHTML = `<svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg> COPIED!`;\r\n setTimeout(() => {\r\n caCopy.innerHTML = `<svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\"\/><path d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\"\/><\/svg> COPY`;\r\n }, 1600);\r\n });\r\n\r\n \/* ===== Bars ===== *\/\r\n const heights = [40,70,30,85,55,95,65,80,45,75,60,90];\r\n const barsEl = document.getElementById(\"bars\");\r\n heights.forEach(h => {\r\n const b = document.createElement(\"div\");\r\n b.className = \"bar\";\r\n b.style.height = h + \"%\";\r\n b.style.background = `linear-gradient(180deg, rgba(255,204,0,${0.3 + h\/200}), rgba(255,204,0,0.05))`;\r\n barsEl.appendChild(b);\r\n });\r\n\r\n \/* ===== Roadmap ===== *\/\r\n const phases = [\r\n { n: \"01\", t: \"Arrival\", d: \"WHEW! enters the timeline.\" },\r\n { n: \"02\", t: \"Spread\", d: \"The memes begin taking over.\" },\r\n { n: \"03\", t: \"Chaos\", d: \"Group chats completely lose control.\" },\r\n { n: \"04\", t: \"Pump\", d: \"The candles become physically concerning.\" },\r\n { n: \"05\", t: \"Freeze\", d: \"The timeline stops scrolling.\" },\r\n { n: \"06\", t: \"Domination\", d: \"Worldwide WHEW! energy.\" },\r\n ];\r\n const rm = document.getElementById(\"roadmap\");\r\n phases.forEach(p => {\r\n const el = document.createElement(\"div\");\r\n el.className = \"phase-card glass card-hover shine reveal\";\r\n el.innerHTML = `\r\n <div class=\"phase-top\">\r\n <span class=\"phase-num\">PHASE ${p.n}<\/span>\r\n <span class=\"phase-dot\"><\/span>\r\n <\/div>\r\n <div>\r\n <div class=\"phase-title\">${p.t}<\/div>\r\n <div class=\"phase-desc\">${p.d}<\/div>\r\n <\/div>`;\r\n rm.appendChild(el);\r\n });\r\n\r\n \/* ===== Scroll reveal ===== *\/\r\n const io = new IntersectionObserver((entries) => {\r\n entries.forEach((e, i) => {\r\n if (e.isIntersecting) {\r\n e.target.style.animationDelay = (i * 0.06) + \"s\";\r\n e.target.classList.add(\"in\");\r\n io.unobserve(e.target);\r\n }\r\n });\r\n }, { threshold: 0.12, rootMargin: \"0px 0px -50px 0px\" });\r\n document.querySelectorAll(\".reveal\").forEach(el => io.observe(el));\r\n\r\n \/* ===== Footer year ===== *\/\r\n document.getElementById(\"year\").textContent = new Date().getFullYear();\r\n<\/script>\r\n<\/body>\r\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>WHEW! \u2014 When reality glitches for a second. Whew! Twitter Telegram Live on Solana WHEW! When reality glitches for a second. The chart goes vertical. The timeline loses its mind. CA 7xK9mP4wYzQ31FhA92LmWHEW69xTnSolExample COPY BUY NOW JOIN COMMUNITY About One moment. Frozen forever. WHEW! captures the exact moment when the internet becomes too insane to process. […]<\/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:\/\/whewonsol.fun\/index.php?rest_route=\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/whewonsol.fun\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/whewonsol.fun\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/whewonsol.fun\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/whewonsol.fun\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=8"}],"version-history":[{"count":16,"href":"https:\/\/whewonsol.fun\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":33,"href":"https:\/\/whewonsol.fun\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions\/33"}],"wp:attachment":[{"href":"https:\/\/whewonsol.fun\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}