{"id":8,"date":"2026-05-22T13:51:43","date_gmt":"2026-05-22T13:51:43","guid":{"rendered":"https:\/\/dotonsol.fun\/?page_id=8"},"modified":"2026-05-22T14:59:35","modified_gmt":"2026-05-22T14:59:35","slug":"elementor-8","status":"publish","type":"page","link":"https:\/\/dotonsol.fun\/","title":{"rendered":"Elementor #8"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"8\" class=\"elementor elementor-8\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ca507a5 e-con-full e-flex e-con e-parent\" data-id=\"ca507a5\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4fed50a elementor-widget elementor-widget-html\" data-id=\"4fed50a\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!-- =========================\r\nDOT \u2014 ARCHITECTURAL INTERFACE\r\nFOR ELEMENTOR\r\n========================= -->\r\n\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Instrument+Serif:ital@0;1&family=Satoshi:wght@300;400;500;700;900&family=IBM+Plex+Mono:wght@300;400;500&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n\r\n:root{\r\n    --bg:#f5f3ee;\r\n    --ink:#050505;\r\n    --soft:#6d6d6d;\r\n    --line:rgba(0,0,0,.065);\r\n    --panel:rgba(255,255,255,.6);\r\n    --glass:blur(24px);\r\n    --ease:cubic-bezier(.16,1,.3,1);\r\n}\r\n\r\n*{\r\n    margin:0;\r\n    padding:0;\r\n    box-sizing:border-box;\r\n}\r\n\r\nhtml,body{\r\n    width:100%;\r\n    height:100%;\r\n    overflow:hidden;\r\n    background:var(--bg);\r\n}\r\n\r\nbody{\r\n    font-family:'Satoshi',sans-serif;\r\n    color:var(--ink);\r\n    cursor:crosshair;\r\n    -webkit-font-smoothing:antialiased;\r\n    text-rendering:optimizeLegibility;\r\n}\r\n\r\n\/* =========================\r\nLOADING\r\n========================= *\/\r\n\r\n.dot-loader{\r\n    position:fixed;\r\n    inset:0;\r\n    z-index:999999;\r\n    background:var(--bg);\r\n    display:flex;\r\n    align-items:center;\r\n    justify-content:center;\r\n    flex-direction:column;\r\n    overflow:hidden;\r\n    transition:all 1.8s var(--ease);\r\n}\r\n\r\n.dot-loader.hide{\r\n    opacity:0;\r\n    transform:scale(1.15);\r\n    pointer-events:none;\r\n}\r\n\r\n.loader-noise{\r\n    position:absolute;\r\n    inset:0;\r\n    opacity:.06;\r\n    background-image:\r\n        radial-gradient(circle at 20% 20%, rgba(0,0,0,.25) .6px, transparent .6px),\r\n        radial-gradient(circle at 80% 80%, rgba(0,0,0,.2) .6px, transparent .6px);\r\n    background-size:4px 4px;\r\n    mix-blend-mode:multiply;\r\n    animation:noiseMove .2s infinite;\r\n}\r\n\r\n@keyframes noiseMove{\r\n    0%{transform:translate(0,0);}\r\n    25%{transform:translate(1px,-1px);}\r\n    50%{transform:translate(-1px,1px);}\r\n    75%{transform:translate(1px,1px);}\r\n    100%{transform:translate(0,0);}\r\n}\r\n\r\n.loader-core{\r\n    position:relative;\r\n    width:320px;\r\n    height:320px;\r\n    display:flex;\r\n    align-items:center;\r\n    justify-content:center;\r\n}\r\n\r\n.loader-orbit{\r\n    position:absolute;\r\n    border-radius:50%;\r\n    border:1px solid rgba(0,0,0,.06);\r\n}\r\n\r\n.loader-orbit:nth-child(1){\r\n    width:320px;\r\n    height:320px;\r\n    animation:spin 28s linear infinite;\r\n}\r\n\r\n.loader-orbit:nth-child(2){\r\n    width:240px;\r\n    height:240px;\r\n    animation:spinReverse 18s linear infinite;\r\n}\r\n\r\n.loader-orbit:nth-child(3){\r\n    width:160px;\r\n    height:160px;\r\n    animation:spin 10s linear infinite;\r\n}\r\n\r\n.loader-orbit::before{\r\n    content:'';\r\n    position:absolute;\r\n    width:7px;\r\n    height:7px;\r\n    background:#000;\r\n    border-radius:50%;\r\n    top:-4px;\r\n    left:50%;\r\n    transform:translateX(-50%);\r\n}\r\n\r\n.loader-dot{\r\n    width:16px;\r\n    height:16px;\r\n    background:#000;\r\n    border-radius:50%;\r\n    position:absolute;\r\n    animation:loaderPulse 2.2s infinite ease-in-out;\r\n}\r\n\r\n.loader-dot::before{\r\n    content:'';\r\n    position:absolute;\r\n    inset:-30px;\r\n    border:1px solid rgba(0,0,0,.08);\r\n    border-radius:50%;\r\n    animation:ripple 3s infinite;\r\n}\r\n\r\n@keyframes ripple{\r\n    0%{\r\n        transform:scale(.4);\r\n        opacity:1;\r\n    }\r\n    100%{\r\n        transform:scale(2.5);\r\n        opacity:0;\r\n    }\r\n}\r\n\r\n@keyframes loaderPulse{\r\n    0%,100%{\r\n        transform:scale(1);\r\n    }\r\n    50%{\r\n        transform:scale(2);\r\n    }\r\n}\r\n\r\n@keyframes spin{\r\n    from{transform:rotate(0deg);}\r\n    to{transform:rotate(360deg);}\r\n}\r\n\r\n@keyframes spinReverse{\r\n    from{transform:rotate(360deg);}\r\n    to{transform:rotate(0deg);}\r\n}\r\n\r\n.loader-text{\r\n    margin-top:70px;\r\n    font-family:'IBM Plex Mono',monospace;\r\n    font-size:.72rem;\r\n    letter-spacing:.4em;\r\n    text-transform:uppercase;\r\n    color:rgba(0,0,0,.4);\r\n}\r\n\r\n\/* =========================\r\nMAIN INTERFACE\r\n========================= *\/\r\n\r\n.dot-system-ui{\r\n    position:relative;\r\n    width:100%;\r\n    height:100vh;\r\n    overflow:hidden;\r\n    background:\r\n        linear-gradient(rgba(0,0,0,.018) 1px, transparent 1px),\r\n        linear-gradient(90deg, rgba(0,0,0,.018) 1px, transparent 1px);\r\n    background-size:100px 100px;\r\n}\r\n\r\n\/* BIG RADIAL FIELD *\/\r\n\r\n.dot-system-ui::before{\r\n    content:'';\r\n    position:absolute;\r\n    inset:-20%;\r\n    background:\r\n        radial-gradient(circle at center,\r\n        rgba(0,0,0,.05),\r\n        transparent 55%);\r\n    animation:fieldMove 18s ease-in-out infinite;\r\n}\r\n\r\n@keyframes fieldMove{\r\n    0%,100%{\r\n        transform:scale(1);\r\n    }\r\n    50%{\r\n        transform:scale(1.08);\r\n    }\r\n}\r\n\r\n\/* FILM GRAIN *\/\r\n\r\n.grain{\r\n    position:absolute;\r\n    inset:0;\r\n    pointer-events:none;\r\n    opacity:.08;\r\n    background-image:\r\n        radial-gradient(circle at 20% 20%, rgba(0,0,0,.25) .6px, transparent .6px),\r\n        radial-gradient(circle at 80% 80%, rgba(0,0,0,.2) .6px, transparent .6px);\r\n    background-size:4px 4px;\r\n    mix-blend-mode:multiply;\r\n}\r\n\r\n\r\n\/* =========================\r\nTOPBAR\r\n========================= *\/\r\n\r\n.topbar{\r\n    position:absolute;\r\n    top:0;\r\n    left:0;\r\n    width:100%;\r\n    padding:28px 34px;\r\n    display:flex;\r\n    justify-content:space-between;\r\n    align-items:center;\r\n    z-index:200;\r\n    border-bottom:1px solid var(--line);\r\n    backdrop-filter:blur(10px);\r\n}\r\n\r\n.brand{\r\n    font-family:'Instrument Serif',serif;\r\n    font-size:3rem;\r\n    letter-spacing:-.07em;\r\n    line-height:1;\r\n}\r\n\r\n.nav-right{\r\n    display:flex;\r\n    align-items:center;\r\n    gap:16px;\r\n    flex-wrap:wrap;\r\n}\r\n\r\n.status{\r\n    font-family:'IBM Plex Mono',monospace;\r\n    font-size:.62rem;\r\n    text-transform:uppercase;\r\n    letter-spacing:.3em;\r\n    color:rgba(0,0,0,.45);\r\n    display:flex;\r\n    align-items:center;\r\n    gap:10px;\r\n}\r\n\r\n.status::before{\r\n    content:'';\r\n    width:6px;\r\n    height:6px;\r\n    background:#000;\r\n    border-radius:50%;\r\n    animation:blink 2s infinite;\r\n}\r\n\r\n@keyframes blink{\r\n    0%,100%{opacity:1;}\r\n    50%{opacity:.2;}\r\n}\r\n\r\n.nav-links{\r\n    display:flex;\r\n    gap:10px;\r\n    flex-wrap:wrap;\r\n}\r\n\r\n.nav-links a{\r\n    text-decoration:none;\r\n    color:#000;\r\n    border:1px solid rgba(0,0,0,.07);\r\n    padding:14px 20px;\r\n    font-size:.66rem;\r\n    font-weight:700;\r\n    text-transform:uppercase;\r\n    letter-spacing:.2em;\r\n    position:relative;\r\n    overflow:hidden;\r\n    transition:all .5s var(--ease);\r\n    background:rgba(255,255,255,.3);\r\n    backdrop-filter:blur(12px);\r\n}\r\n\r\n.nav-links a::before{\r\n    content:'';\r\n    position:absolute;\r\n    inset:0;\r\n    background:#000;\r\n    transform:translateY(102%);\r\n    transition:transform .5s var(--ease);\r\n    z-index:-1;\r\n}\r\n\r\n.nav-links a:hover{\r\n    color:#fff;\r\n    border-color:#000;\r\n}\r\n\r\n.nav-links a:hover::before{\r\n    transform:translateY(0);\r\n}\r\n\r\n\/* =========================\r\nCENTER DOT SYSTEM\r\n========================= *\/\r\n\r\n.center-system{\r\n    position:absolute;\r\n    top:50%;\r\n    left:50%;\r\n    transform:translate(-50%,-50%);\r\n    width:720px;\r\n    height:720px;\r\n    display:flex;\r\n    align-items:center;\r\n    justify-content:center;\r\n}\r\n\r\n\/* ORBITS *\/\r\n\r\n.orbit{\r\n    position:absolute;\r\n    border-radius:50%;\r\n    border:1px solid rgba(0,0,0,.055);\r\n}\r\n\r\n.orbit:nth-child(1){\r\n    width:720px;\r\n    height:720px;\r\n    animation:spin 50s linear infinite;\r\n}\r\n\r\n.orbit:nth-child(2){\r\n    width:560px;\r\n    height:560px;\r\n    animation:spinReverse 34s linear infinite;\r\n}\r\n\r\n.orbit:nth-child(3){\r\n    width:400px;\r\n    height:400px;\r\n    animation:spin 18s linear infinite;\r\n}\r\n\r\n.orbit:nth-child(4){\r\n    width:220px;\r\n    height:220px;\r\n    animation:spinReverse 10s linear infinite;\r\n}\r\n\r\n.orbit::before{\r\n    content:'';\r\n    position:absolute;\r\n    width:8px;\r\n    height:8px;\r\n    background:#000;\r\n    border-radius:50%;\r\n    top:-4px;\r\n    left:50%;\r\n    transform:translateX(-50%);\r\n}\r\n\r\n\/* CENTER DOT *\/\r\n\r\n.main-dot{\r\n    width:20px;\r\n    height:20px;\r\n    background:#000;\r\n    border-radius:50%;\r\n    position:absolute;\r\n    z-index:10;\r\n    animation:dotPulse 4s infinite ease-in-out;\r\n}\r\n\r\n.main-dot::before{\r\n    content:'';\r\n    position:absolute;\r\n    inset:-35px;\r\n    border:1px solid rgba(0,0,0,.08);\r\n    border-radius:50%;\r\n    animation:innerRipple 4s infinite;\r\n}\r\n\r\n.main-dot::after{\r\n    content:'';\r\n    position:absolute;\r\n    inset:-80px;\r\n    border:1px solid rgba(0,0,0,.04);\r\n    border-radius:50%;\r\n    animation:innerRipple 6s infinite;\r\n}\r\n\r\n@keyframes innerRipple{\r\n    0%{\r\n        transform:scale(.5);\r\n        opacity:1;\r\n    }\r\n    100%{\r\n        transform:scale(2);\r\n        opacity:0;\r\n    }\r\n}\r\n\r\n@keyframes dotPulse{\r\n    0%,100%{\r\n        transform:scale(1);\r\n    }\r\n    50%{\r\n        transform:scale(1.45);\r\n    }\r\n}\r\n\r\n\/* =========================\r\nSWISS TYPOGRAPHY\r\n========================= *\/\r\n\r\n.hero-title{\r\n    position:absolute;\r\n    font-family:'Instrument Serif',serif;\r\n    line-height:.85;\r\n    letter-spacing:-.07em;\r\n    font-weight:400;\r\n    z-index:30;\r\n}\r\n\r\n.hero-a{\r\n    top:16%;\r\n    left:6%;\r\n    font-size:clamp(5rem,7vw,8rem);\r\n    max-width:520px;\r\n}\r\n\r\n.hero-b{\r\n    right:8%;\r\n    bottom:12%;\r\n    font-size:clamp(3.5rem,6vw,6rem);\r\n    max-width:480px;\r\n    text-align:right;\r\n}\r\n\r\n\/* MICRO TYPOGRAPHY *\/\r\n\r\n.micro{\r\n    position:absolute;\r\n    font-family:'IBM Plex Mono',monospace;\r\n    font-size:.62rem;\r\n    letter-spacing:.35em;\r\n    text-transform:uppercase;\r\n    color:rgba(0,0,0,.38);\r\n    line-height:2;\r\n}\r\n\r\n.micro-a{\r\n    left:7%;\r\n    top:52%;\r\n}\r\n\r\n.micro-b{\r\n    right:10%;\r\n    top:24%;\r\n    text-align:right;\r\n}\r\n\r\n\/* =========================\r\nBUTTON SYSTEM\r\n========================= *\/\r\n\r\n.action-group{\r\n    position:absolute;\r\n    left:7%;\r\n    bottom:12%;\r\n    display:flex;\r\n    flex-wrap:wrap;\r\n    gap:12px;\r\n    z-index:100;\r\n}\r\n\r\n.action-btn{\r\n    border:1px solid rgba(0,0,0,.07);\r\n    background:rgba(255,255,255,.32);\r\n    backdrop-filter:blur(12px);\r\n    padding:16px 24px;\r\n    font-size:.68rem;\r\n    font-weight:700;\r\n    letter-spacing:.22em;\r\n    text-transform:uppercase;\r\n    cursor:pointer;\r\n    transition:all .5s var(--ease);\r\n    position:relative;\r\n    overflow:hidden;\r\n}\r\n\r\n.action-btn::before{\r\n    content:'';\r\n    position:absolute;\r\n    inset:0;\r\n    background:#000;\r\n    transform:translateY(102%);\r\n    transition:transform .5s var(--ease);\r\n    z-index:-1;\r\n}\r\n\r\n.action-btn:hover{\r\n    color:#fff;\r\n    border-color:#000;\r\n}\r\n\r\n.action-btn:hover::before{\r\n    transform:translateY(0);\r\n}\r\n\r\n\/* =========================\r\nCA TERMINAL\r\n========================= *\/\r\n\r\n.ca-terminal{\r\n    position:absolute;\r\n    right:9%;\r\n    top:18%;\r\n    width:480px;\r\n    border:1px solid rgba(0,0,0,.07);\r\n    background:rgba(255,255,255,.35);\r\n    backdrop-filter:blur(14px);\r\n    padding:20px 24px;\r\n    display:flex;\r\n    align-items:center;\r\n    justify-content:space-between;\r\n    gap:20px;\r\n    cursor:pointer;\r\n    transition:all .5s var(--ease);\r\n    z-index:100;\r\n}\r\n\r\n.ca-terminal:hover{\r\n    background:#000;\r\n}\r\n\r\n.ca-terminal:hover .ca-text,\r\n.ca-terminal:hover .ca-copy{\r\n    color:#fff;\r\n}\r\n\r\n.ca-text{\r\n    font-family:'IBM Plex Mono',monospace;\r\n    font-size:.72rem;\r\n    overflow:hidden;\r\n    text-overflow:ellipsis;\r\n    white-space:nowrap;\r\n    transition:color .5s ease;\r\n}\r\n\r\n.ca-copy{\r\n    font-size:.64rem;\r\n    letter-spacing:.2em;\r\n    text-transform:uppercase;\r\n    font-weight:700;\r\n    transition:color .5s ease;\r\n}\r\n\r\n\/* =========================\r\nSIDEBAR\r\n========================= *\/\r\n\r\n.sidebar{\r\n    position:fixed;\r\n    top:0;\r\n    right:-560px;\r\n    width:560px;\r\n    height:100vh;\r\n    background:rgba(255,255,255,.68);\r\n    backdrop-filter:blur(32px);\r\n    border-left:1px solid rgba(0,0,0,.06);\r\n    z-index:999;\r\n    padding:50px;\r\n    transition:all 1s var(--ease);\r\n    overflow:auto;\r\n}\r\n\r\n.sidebar.active{\r\n    right:0;\r\n}\r\n\r\n\/* CLOSE *\/\r\n\r\n.close-btn{\r\n    border:none;\r\n    background:none;\r\n    font-family:'IBM Plex Mono',monospace;\r\n    font-size:.65rem;\r\n    letter-spacing:.28em;\r\n    text-transform:uppercase;\r\n    color:rgba(0,0,0,.45);\r\n    margin-bottom:50px;\r\n    cursor:pointer;\r\n}\r\n\r\n\/* SIDEBAR DOT *\/\r\n\r\n.sidebar-dot{\r\n    width:160px;\r\n    height:160px;\r\n    position:relative;\r\n    display:flex;\r\n    align-items:center;\r\n    justify-content:center;\r\n    margin-bottom:50px;\r\n}\r\n\r\n.sidebar-dot::before,\r\n.sidebar-dot::after{\r\n    content:'';\r\n    position:absolute;\r\n    border-radius:50%;\r\n    border:1px solid rgba(0,0,0,.07);\r\n}\r\n\r\n.sidebar-dot::before{\r\n    width:160px;\r\n    height:160px;\r\n    animation:spin 20s linear infinite;\r\n}\r\n\r\n.sidebar-dot::after{\r\n    width:100px;\r\n    height:100px;\r\n    animation:spinReverse 12s linear infinite;\r\n}\r\n\r\n.sidebar-dot span{\r\n    width:14px;\r\n    height:14px;\r\n    background:#000;\r\n    border-radius:50%;\r\n    animation:dotPulse 3s infinite ease-in-out;\r\n}\r\n\r\n\/* CONTENT *\/\r\n\r\n.sidebar-title{\r\n    font-family:'Instrument Serif',serif;\r\n    font-size:4rem;\r\n    line-height:.85;\r\n    letter-spacing:-.07em;\r\n    margin-bottom:30px;\r\n}\r\n\r\n.sidebar-desc{\r\n    font-size:1rem;\r\n    line-height:2;\r\n    color:rgba(0,0,0,.65);\r\n    margin-bottom:24px;\r\n}\r\n\r\n.sidebar-section{\r\n    margin-top:50px;\r\n    padding-top:30px;\r\n    border-top:1px solid rgba(0,0,0,.07);\r\n}\r\n\r\n.sidebar-label{\r\n    font-family:'IBM Plex Mono',monospace;\r\n    font-size:.65rem;\r\n    letter-spacing:.35em;\r\n    text-transform:uppercase;\r\n    color:rgba(0,0,0,.38);\r\n    margin-bottom:20px;\r\n}\r\n\r\n\/* =========================\r\nRESPONSIVE\r\n========================= *\/\r\n\r\n@media(max-width:1100px){\r\n\r\n    .hero-title,\r\n    .micro,\r\n    .action-group,\r\n    .ca-terminal{\r\n        position:relative;\r\n        top:auto;\r\n        left:auto;\r\n        right:auto;\r\n        bottom:auto;\r\n        text-align:center;\r\n        margin:auto;\r\n    }\r\n\r\n    .hero-a,\r\n    .hero-b{\r\n        font-size:4rem;\r\n        max-width:100%;\r\n        padding:0 20px;\r\n    }\r\n\r\n    .center-system{\r\n        transform:translate(-50%,-50%) scale(.65);\r\n    }\r\n\r\n    .action-group{\r\n        justify-content:center;\r\n        margin-top:30px;\r\n    }\r\n\r\n    .ca-terminal{\r\n        width:92%;\r\n        margin-top:30px;\r\n    }\r\n\r\n    .sidebar{\r\n        width:100%;\r\n    }\r\n\r\n    .topbar{\r\n        flex-direction:column;\r\n        gap:20px;\r\n    }\r\n\r\n}\r\n\r\n<\/style>\r\n\r\n<!-- LOADER -->\r\n<div class=\"dot-loader\" id=\"loader\">\r\n\r\n    <div class=\"loader-noise\"><\/div>\r\n\r\n    <div class=\"loader-core\">\r\n\r\n        <div class=\"loader-orbit\"><\/div>\r\n        <div class=\"loader-orbit\"><\/div>\r\n        <div class=\"loader-orbit\"><\/div>\r\n\r\n        <div class=\"loader-dot\"><\/div>\r\n\r\n    <\/div>\r\n\r\n    <div class=\"loader-text\" id=\"loadingText\">\r\n        LOCATING CENTER\r\n    <\/div>\r\n\r\n<\/div>\r\n\r\n<!-- MAIN -->\r\n<div class=\"dot-system-ui\">\r\n\r\n    <div class=\"grain\"><\/div>\r\n\r\n    <div class=\"scanline\"><\/div>\r\n    <div class=\"scanline\"><\/div>\r\n\r\n    <!-- NAV -->\r\n    <div class=\"topbar\">\r\n\r\n        <div class=\"brand\">DOT<\/div>\r\n\r\n        <div class=\"nav-right\">\r\n\r\n            <div class=\"status\">\r\n                SIGNAL ACTIVE\r\n            <\/div>\r\n\r\n            <div class=\"nav-links\">\r\n                <a href=\"#\">Twitter<\/a>\r\n                <a href=\"#\">Telegram<\/a>\r\n                <a href=\"#\">Chart<\/a>\r\n                <a href=\"#\">Buy $DOT<\/a>\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n    <!-- DOT SYSTEM -->\r\n    <div class=\"center-system\">\r\n\r\n        <div class=\"orbit\"><\/div>\r\n        <div class=\"orbit\"><\/div>\r\n        <div class=\"orbit\"><\/div>\r\n        <div class=\"orbit\"><\/div>\r\n\r\n        <div class=\"main-dot\" id=\"mainDot\"><\/div>\r\n\r\n    <\/div>\r\n\r\n    <!-- TITLES -->\r\n<h1 class=\"hero-title hero-a\">\r\n    The smallest<br>\r\n    thing often<br>\r\n    draws the most.\r\n<\/h1>\r\n    <h1 class=\"hero-title hero-b\">\r\n    DOT is not<br>\r\n    everywhere.<br>\r\n    Only where it matters.\r\n<\/h1>\r\n    <!-- MICRO -->\r\n\r\n    <div class=\"micro micro-b\">\r\n        SIGNAL STABILIZED<br>\r\n        OBSERVATION ACTIVE\r\n    <\/div>\r\n\r\n    <!-- CA -->\r\n    <div class=\"ca-terminal\" onclick=\"copyCA()\">\r\n\r\n        <div class=\"ca-text\" id=\"caText\">\r\n            7Gh9XkP4dL2mN8vQ1rT5yU6aBcDeFgHiJkLmNoPqRsTu\r\n        <\/div>\r\n\r\n        <div class=\"ca-copy\" id=\"copyBtn\">\r\n            Copy CA\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n    <!-- BUTTONS -->\r\n    <div class=\"action-group\">\r\n\r\n        <button class=\"action-btn\" onclick=\"openPanel('about')\">\r\n            About\r\n        <\/button>\r\n\r\n        <button class=\"action-btn\" onclick=\"openPanel('tokenomics')\">\r\n            Tokenomics\r\n        <\/button>\r\n\r\n        <button class=\"action-btn\" onclick=\"openPanel('buy')\">\r\n            How To Buy\r\n        <\/button>\r\n\r\n    <\/div>\r\n\r\n<\/div>\r\n\r\n<!-- SIDEBAR -->\r\n<div class=\"sidebar\" id=\"sidebar\">\r\n\r\n    <button class=\"close-btn\" onclick=\"closePanel()\">\r\n        CLOSE INTERFACE\r\n    <\/button>\r\n\r\n    <div class=\"sidebar-dot\">\r\n        <span><\/span>\r\n    <\/div>\r\n\r\n    <div id=\"sidebarContent\"><\/div>\r\n\r\n<\/div>\r\n\r\n<script>\r\n\r\n\/* LOADER *\/\r\n\r\nconst loadingTexts = [\r\n    'LOCATING CENTER',\r\n    'CALIBRATING SPACE',\r\n    'STABILIZING SIGNAL',\r\n    'POINT DETECTED'\r\n];\r\n\r\nlet currentText = 0;\r\n\r\nconst loadingLoop = setInterval(() => {\r\n\r\n    currentText = (currentText + 1) % loadingTexts.length;\r\n\r\n    document.getElementById('loadingText').innerText = loadingTexts[currentText];\r\n\r\n},1200);\r\n\r\nwindow.addEventListener('load',()=>{\r\n\r\n    setTimeout(()=>{\r\n\r\n        clearInterval(loadingLoop);\r\n\r\n        document.getElementById('loader').classList.add('hide');\r\n\r\n    },5200);\r\n\r\n});\r\n\r\n\/* MAGNETIC DOT *\/\r\n\r\nconst dot = document.getElementById('mainDot');\r\n\r\ndocument.addEventListener('mousemove',(e)=>{\r\n\r\n    const x = (window.innerWidth\/2 - e.clientX)\/24;\r\n    const y = (window.innerHeight\/2 - e.clientY)\/24;\r\n\r\n    dot.style.transform = `translate(${x}px, ${y}px)`;\r\n\r\n});\r\n\r\n\/* COPY *\/\r\n\r\nfunction copyCA(){\r\n\r\n    const text = document.getElementById('caText').innerText;\r\n    const btn = document.getElementById('copyBtn');\r\n\r\n    navigator.clipboard.writeText(text).then(()=>{\r\n\r\n        btn.innerText = 'COPIED';\r\n\r\n        setTimeout(()=>{\r\n            btn.innerText = 'COPY CA';\r\n        },2000);\r\n\r\n    });\r\n\r\n}\r\n\r\n\/* SIDEBAR *\/\r\n\r\nconst sidebar = document.getElementById('sidebar');\r\nconst content = document.getElementById('sidebarContent');\r\n\r\nfunction openPanel(type){\r\n\r\n    sidebar.classList.add('active');\r\n\r\n    if(type === 'about'){\r\n\r\n        content.innerHTML = `\r\n        <h2 class=\"sidebar-title\">\r\n            A point<br>within chaos.\r\n        <\/h2>\r\n\r\n        <p class=\"sidebar-desc\">\r\n            DOT exists as a singular presence inside an increasingly noisy digital landscape. Minimal in appearance, yet impossible to ignore.\r\n        <\/p>\r\n\r\n        <div class=\"sidebar-section\">\r\n            <div class=\"sidebar-label\">\r\n                Philosophy\r\n            <\/div>\r\n\r\n            <p class=\"sidebar-desc\">\r\n                The smallest object inside a system often becomes the center of gravity. DOT embraces restraint, precision, and silence as its strongest visual language.\r\n            <\/p>\r\n        <\/div>\r\n        `;\r\n    }\r\n\r\n    if(type === 'tokenomics'){\r\n\r\n        content.innerHTML = `\r\n        <h2 class=\"sidebar-title\">\r\n            Structured.<br>\r\n            Balanced.<br>\r\n            Precise.\r\n        <\/h2>\r\n\r\n        <p class=\"sidebar-desc\">\r\n            DOT follows a clean architecture focused on clarity and simplicity without unnecessary complexity.\r\n        <\/p>\r\n\r\n        <div class=\"sidebar-section\">\r\n            <div class=\"sidebar-label\">\r\n                Supply\r\n            <\/div>\r\n\r\n            <p class=\"sidebar-desc\">\r\n                Fixed supply with a transparent structure designed around accessibility and continuity.\r\n            <\/p>\r\n        <\/div>\r\n\r\n        <div class=\"sidebar-section\">\r\n            <div class=\"sidebar-label\">\r\n                Liquidity\r\n            <\/div>\r\n\r\n            <p class=\"sidebar-desc\">\r\n                Stabilized and maintained to ensure uninterrupted movement throughout the ecosystem.\r\n            <\/p>\r\n        <\/div>\r\n        `;\r\n    }\r\n\r\n    if(type === 'buy'){\r\n\r\n        content.innerHTML = `\r\n        <h2 class=\"sidebar-title\">\r\n            Enter the<br>\r\n            signal.\r\n        <\/h2>\r\n\r\n        <p class=\"sidebar-desc\">\r\n            Acquiring DOT is intentionally frictionless. Connect your wallet, access the market, and converge toward the point.\r\n        <\/p>\r\n\r\n        <div class=\"sidebar-section\">\r\n            <div class=\"sidebar-label\">\r\n                Step 01\r\n            <\/div>\r\n\r\n            <p class=\"sidebar-desc\">\r\n                Install a Solana-compatible wallet and prepare your balance for the transaction.\r\n            <\/p>\r\n        <\/div>\r\n\r\n        <div class=\"sidebar-section\">\r\n            <div class=\"sidebar-label\">\r\n                Step 02\r\n            <\/div>\r\n\r\n            <p class=\"sidebar-desc\">\r\n                Access the official trading interface using the chart or buy button provided on the main screen.\r\n            <\/p>\r\n        <\/div>\r\n\r\n        <div class=\"sidebar-section\">\r\n            <div class=\"sidebar-label\">\r\n                Step 03\r\n            <\/div>\r\n\r\n            <p class=\"sidebar-desc\">\r\n                Paste the official contract address carefully and complete the swap securely.\r\n            <\/p>\r\n        <\/div>\r\n        `;\r\n    }\r\n\r\n}\r\n\r\nfunction closePanel(){\r\n    sidebar.classList.remove('active');\r\n}\r\n\r\n<\/script>\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>LOCATING CENTER DOT SIGNAL ACTIVE Twitter Telegram Chart Buy $DOT The smallest thing often draws the most. DOT is not everywhere. Only where it matters. SIGNAL STABILIZED OBSERVATION ACTIVE 7Gh9XkP4dL2mN8vQ1rT5yU6aBcDeFgHiJkLmNoPqRsTu Copy CA About Tokenomics How To Buy CLOSE INTERFACE<\/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:\/\/dotonsol.fun\/index.php?rest_route=\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dotonsol.fun\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/dotonsol.fun\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/dotonsol.fun\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dotonsol.fun\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=8"}],"version-history":[{"count":43,"href":"https:\/\/dotonsol.fun\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":56,"href":"https:\/\/dotonsol.fun\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions\/56"}],"wp:attachment":[{"href":"https:\/\/dotonsol.fun\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}