{"id":4,"date":"2026-04-26T16:39:48","date_gmt":"2026-04-26T16:39:48","guid":{"rendered":"https:\/\/divi.apemedia.my\/flow\/?page_id=4"},"modified":"2026-10-19T09:09:23","modified_gmt":"2026-10-19T09:09:23","slug":"divi-glide-demo","status":"publish","type":"page","link":"https:\/\/divi.apemedia.my\/glide\/","title":{"rendered":"Divi Glide Demo"},"content":{"rendered":"
\n
\n
\n
\n\n\n \n \n \n Divi Glide \u2013 Transitions & Preloaders Demo v1.6.1<\/title>\n\n <!-- Use local plugin assets so behavior matches your install -->\n <link rel=\"stylesheet\" href=\".\/assets\/css\/transitions.css\">\n <link rel=\"stylesheet\" href=\".\/assets\/css\/preloaders.css\">\n <link rel=\"stylesheet\" href=\".\/assets\/css\/demo-page.css\">\n\n <style>\n :root{--color-option:#0f172a;--time-duration:1000ms;--diviglide-cubic-bezier:cubic-bezier(0.165,0.84,0.44,1);--diviglide-easing:var(--diviglide-cubic-bezier);}\n *,*::before,*::after{box-sizing:border-box;}\n html,body{height:100%;}\n body{font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,sans-serif;margin:0;padding:0;background:#f8fafc;color:#1e293b;}\n\n \/*\n CRITICAL (demo-only):\n The overlay MUST NOT be inside the element that receives transforms\/filters,\n otherwise `position: fixed` can become \"fixed-to-that-container\" and won't\n cover the viewport for some transitions.\n *\/\n #diviglide-overlay{position:fixed;inset:0;z-index:999999;}\n\n .demo-wrap{max-width:1200px;margin:0 auto;padding:60px 24px 100px;}\n .demo-hero{text-align:center;margin-bottom:56px;}\n .demo-hero h1{font-size:38px;font-weight:900;letter-spacing:-1px;margin:0 0 12px;background:linear-gradient(135deg,#2563eb,#7c3aed);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}\n .demo-hero p{font-size:15px;color:#64748b;margin:0;}\n .section-title{font-size:13px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:#94a3b8;margin:0 0 16px;padding-bottom:8px;border-bottom:1px solid #e2e8f0;}\n .btn-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;margin-bottom:60px;}\n .transition-btn{background:#fff;color:#3b82f6;font-size:13px;font-weight:600;padding:14px 10px;border:1.5px solid #e2e8f0;border-radius:10px;cursor:pointer;transition:all .2s;text-align:center;outline:none;}\n .transition-btn:hover{border-color:#3b82f6;transform:translateY(-2px);box-shadow:0 8px 20px rgba(59,130,246,.12);}\n .transition-btn:active{transform:translateY(0);}\n .transition-btn .label{display:block;font-size:11px;font-weight:500;color:#94a3b8;margin-top:4px;}\n .preloader-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px;}\n .pre-card{background:#fff;border:1.5px solid #e2e8f0;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px 16px 20px;gap:20px;min-height:160px;}\n .pre-card-label{font-size:11px;font-weight:700;color:#94a3b8;letter-spacing:.6px;text-transform:uppercase;text-align:center;}\n .pre-card-inner{width:60px;height:60px;display:flex;align-items:center;justify-content:center;--pre-accent:#2563eb;}\n .pre-card-inner.text-loader{width:auto;height:auto;font-size:14px;}\n .controls{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-bottom:24px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:16px 20px;}\n .controls label{font-size:11px;font-weight:700;color:#64748b;letter-spacing:.5px;text-transform:uppercase;display:flex;flex-direction:column;gap:6px;}\n .controls input[type=color]{width:40px;height:32px;border:none;border-radius:6px;cursor:pointer;padding:0;}\n .val{color:#2563eb;font-weight:700;}\n .controls input[type=range]{width:140px;height:28px;margin:0;padding:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer;accent-color:#2563eb;}\n .controls input[type=range]:focus{outline:none;}\n .controls input[type=range]:focus-visible{outline:2px solid #93c5fd;outline-offset:2px;border-radius:4px;}\n .controls input[type=range]::-webkit-slider-runnable-track{height:6px;background:#cbd5e1;border-radius:9999px;}\n .controls input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;margin-top:-5px;border-radius:50%;background:#2563eb;border:2px solid #fff;box-shadow:0 1px 4px rgba(15,23,42,.2);cursor:pointer;}\n .controls input[type=range]::-moz-range-track{height:6px;background:#cbd5e1;border-radius:9999px;}\n .controls input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#2563eb;border:2px solid #fff;box-shadow:0 1px 4px rgba(15,23,42,.2);cursor:pointer;}\n .controls input[type=range]::-moz-range-progress{background:#93c5fd;border-radius:9999px;height:6px;}\n <\/style>\n<\/head>\n\n<!-- IMPORTANT: target ONLY this wrapper, not <body> -->\n<body>\n\n <!-- ========== NAVIGATION ========== -->\n <nav class=\"dg-page-nav\" id=\"dg-nav\">\n <div class=\"dg-page-nav-inner\">\n <a href=\"#\" class=\"dg-page-logo\">\n <svg viewBox=\"0 0 512 512\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"m 379.52,440.79 c 17.14,-4.07 30.13,-13.6 40.19,-27.22 3.23,-4.37 5.51,-9.42 8.4,-14.05 1.61,-2.58 1.05,-3.69 -1.82,-4.57 -12.73,-3.87 -25.35,-8.15 -38.16,-11.75 -4.34,-1.22 -9.12,-0.99 -13.71,-1.15 -5.08,-0.18 -10.16,-0.04 -15.74,-0.04 8.05,-8.76 49.31,-11.79 76.21,-5.96 0.62,-9.62 -1.19,-18.7 -4.78,-27.43 -0.35,-0.86 -0.72,-1.72 -1.1,-2.57 -5.61,-12.52 -13.83,-23.39 -22.45,-33.99\" fill=\"#818cf8\" opacity=\".7\"\/><circle cx=\"256\" cy=\"256\" r=\"100\" fill=\"url(#lg1)\" opacity=\".3\"\/><defs><linearGradient id=\"lg1\" x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\"><stop stop-color=\"#818cf8\"\/><stop offset=\"1\" stop-color=\"#06b6d4\"\/><\/linearGradient><\/defs><\/svg>\n <span class=\"dg-page-logo-text\">Divi Glide<\/span>\n <\/a>\n <div class=\"dg-page-nav-links\">\n <a href=\"#features\">Features<\/a>\n <a href=\"#how-it-works\">How It Works<\/a>\n <a href=\"#demo\">Live Demo<\/a>\n <a href=\"#faq\">FAQ<\/a>\n <a href=\"#get-started\" class=\"dg-page-nav-cta\">Get Started<\/a>\n <\/div>\n <\/div>\n <\/nav>\n\n <!-- ========== HERO ========== -->\n <section class=\"dg-page-hero\">\n <div class=\"dg-page-grid-bg\"><\/div>\n <div class=\"dg-page-version-glow\"><\/div>\n <div class=\"dg-page-container\" style=\"position:relative;z-index:1;\">\n <div class=\"dg-page-hero-badge\"><span class=\"dot\"><\/span> Version 1.6.1 \u2014 Now Available<\/div>\n <h1>Stunning Page<br>Transitions for Divi<\/h1>\n <p class=\"dg-page-hero-sub\">Transform how visitors experience your Divi website with 60 cinematic page transitions and 20 premium preloader animations. Zero bloat. Pure performance.<\/p>\n <div class=\"dg-page-hero-actions\">\n <a href=\"#demo\" class=\"dg-page-btn-primary\">\u26a1 Try Live Demo<\/a>\n <a href=\"#features\" class=\"dg-page-btn-ghost\">Explore Features \u2192<\/a>\n <\/div>\n <div class=\"dg-page-hero-stats\">\n <div class=\"dg-page-hero-stat\"><div class=\"num\" data-count=\"60\" data-suffix=\"+\">0<\/div><div class=\"lbl\">Transitions<\/div><\/div>\n <div class=\"dg-page-hero-stat\"><div class=\"num\" data-count=\"20\" data-suffix=\"+\">0<\/div><div class=\"lbl\">Preloaders<\/div><\/div>\n <div class=\"dg-page-hero-stat\"><div class=\"num\" data-count=\"0\" data-suffix=\"ms\">0<\/div><div class=\"lbl\">Layout Shift<\/div><\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <!-- ========== FEATURES ========== -->\n <section class=\"dg-page-section dg-page-features\" id=\"features\">\n <div class=\"dg-page-container\">\n <div class=\"dg-page-section-header dg-reveal\">\n <span class=\"dg-page-section-badge\">\u2726 Why Divi Glide<\/span>\n <h2>Everything You Need for<br>Jaw-Dropping Transitions<\/h2>\n <p>Built from the ground up for the Divi ecosystem \u2014 lightweight, GPU-accelerated, and endlessly customizable.<\/p>\n <\/div>\n <div class=\"dg-page-features-grid\">\n <div class=\"dg-page-feature-card dg-reveal\">\n <div class=\"dg-page-feature-icon\">\u26a1<\/div>\n <h3>60 Transition Styles<\/h3>\n <p>From subtle fades to cinematic morphing shapes \u2014 choose from the largest collection of page transitions built for Divi.<\/p>\n <\/div>\n <div class=\"dg-page-feature-card dg-reveal\">\n <div class=\"dg-page-feature-icon\">\ud83c\udfa8<\/div>\n <h3>Fully Customizable<\/h3>\n <p>Control overlay color, duration, easing, and timing directly from the Divi Builder. No code required.<\/p>\n <\/div>\n <div class=\"dg-page-feature-card dg-reveal\">\n <div class=\"dg-page-feature-icon\">\u23f3<\/div>\n <h3>20 Preloader Styles<\/h3>\n <p>Premium preloader animations \u2014 spinners, pulse effects, text loaders, bouncing dots, and more. All CSS-only.<\/p>\n <\/div>\n <div class=\"dg-page-feature-card dg-reveal\">\n <div class=\"dg-page-feature-icon\">\ud83d\ude80<\/div>\n <h3>GPU Accelerated<\/h3>\n <p>Every animation is hardware-accelerated with <code>will-change<\/code> and compositor-friendly properties for buttery 60fps.<\/p>\n <\/div>\n <div class=\"dg-page-feature-card dg-reveal\">\n <div class=\"dg-page-feature-icon\">\ud83d\udcf1<\/div>\n <h3>Responsive Ready<\/h3>\n <p>Transitions gracefully adapt to any screen size. Works flawlessly on mobile, tablet, and desktop.<\/p>\n <\/div>\n <div class=\"dg-page-feature-card dg-reveal\">\n <div class=\"dg-page-feature-icon\">\ud83e\udeb6<\/div>\n <h3>Lightweight & Fast<\/h3>\n <p>Under 50KB total footprint with zero JavaScript dependencies. No jQuery. No bloat. Just pure performance.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <!-- ========== HOW IT WORKS ========== -->\n <section class=\"dg-page-section dg-page-how\" id=\"how-it-works\">\n <div class=\"dg-page-container\">\n <div class=\"dg-page-section-header dg-reveal\">\n <span class=\"dg-page-section-badge\">\u2726 Getting Started<\/span>\n <h2>Up and Running<br>in Under 2 Minutes<\/h2>\n <p>Three simple steps to transform your Divi website with cinematic page transitions.<\/p>\n <\/div>\n <div class=\"dg-page-steps\">\n <div class=\"dg-page-step dg-reveal\">\n <h3>Install & Activate<\/h3>\n <p>Upload the plugin to your WordPress site and activate it. Divi Glide automatically integrates with the Divi Builder.<\/p>\n <\/div>\n <div class=\"dg-page-step dg-reveal\">\n <h3>Choose Your Style<\/h3>\n <p>Pick from 60 transition effects and 20 preloader animations. Customize colors, timing, and easing to match your brand.<\/p>\n <\/div>\n <div class=\"dg-page-step dg-reveal\">\n <h3>Publish & Impress<\/h3>\n <p>Save your settings and watch your visitors experience smooth, professional page transitions on every navigation.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <!-- ========== LIVE DEMO SECTION ========== -->\n <section class=\"dg-page-demo-section\" id=\"demo\">\n <div class=\"dg-page-container\">\n <div class=\"dg-page-section-header dg-reveal\" style=\"margin-bottom:40px;\">\n <span class=\"dg-page-section-badge\">\u2726 Interactive Playground<\/span>\n <h2>Try Every Effect Live<\/h2>\n <p>Click any transition below to see it in action. Adjust the overlay color and duration to experiment in real time.<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n <main class=\"diviglide-content-target\">\n <div class=\"demo-wrap\">\n <div class=\"demo-hero\">\n <h1>Divi Glide v1.6.1<\/h1>\n <p>Interactive demo \u2014 60 page transitions & 20 preloader styles<\/p>\n <\/div>\n\n <div class=\"controls\">\n <label>Overlay Color <input type=\"color\" id=\"ctrl-color\" value=\"#0f172a\"><\/label>\n <label>Duration: <span class=\"val\" id=\"dur-val\">1000<\/span>ms\n <input type=\"range\" id=\"ctrl-dur\" min=\"300\" max=\"2000\" step=\"100\" value=\"1000\">\n <\/label>\n <\/div>\n\n <p class=\"section-title\">\u26a1 Page Transitions<\/p>\n <div class=\"btn-grid\" id=\"btn-grid\"><\/div>\n\n <p class=\"section-title\">\u23f3 Preloader Showcase<\/p>\n <div class=\"preloader-grid\" id=\"pre-grid\"><\/div>\n <\/div>\n <\/main>\n\n <!-- Must be OUTSIDE the animated target wrapper -->\n <div id=\"diviglide-overlay\" class=\"diviglide-easing\"><\/div>\n\n <script>\n (function(){\n 'use strict';\n\n var html = document.documentElement;\n var overlayWrap = document.getElementById('diviglide-overlay');\n\n document.getElementById('ctrl-color').addEventListener('input', function(){\n html.style.setProperty('--color-option', this.value);\n });\n document.getElementById('ctrl-dur').addEventListener('input', function(){\n html.style.setProperty('--time-duration', this.value + 'ms');\n document.getElementById('dur-val').textContent = this.value;\n });\n\n var types = {\n 'fade':'Fade','blur':'Blur Fade',\n 'slide-up':'Slide Up','slide-down':'Slide Down','slide-left':'Slide Left','slide-right':'Slide Right',\n 'slide-up-2':'Slide Up 2','slide-down-2':'Slide Down 2','slide-left-2':'Slide Left 2','slide-right-2':'Slide Right 2',\n 'zoom-in':'Zoom In','zoom-out':'Zoom Out',\n 'curtain-flip':'Curtain Flip','curtain-flip-2':'Curtain Flip 2','curtain-flip-3':'Curtain Flip 3','curtain-flip-4':'Curtain Flip 4',\n 'tiles-h':'Tiles H','tiles-h-2':'Tiles H 2','tiles-h-3':'Tiles H 3','tiles-h-4':'Tiles H 4',\n 'tiles-v':'Tiles V','tiles-v-2':'Tiles V 2','tiles-v-3':'Tiles V 3','tiles-v-4':'Tiles V 4',\n 'slides-h':'Slides H','slides-h-2':'Slides H 2','slides-v':'Slides V','slides-v-2':'Slides V 2',\n 'square-grid':'Square Grid','square-grid-2':'Square Grid 2','square-grid-3':'Square Grid 3','square-grid-4':'Square Grid 4',\n 'reveal-circle':'Reveal Circle','reveal-square':'Reveal Square',\n 'gradient-1':'Gradient 1','gradient-2':'Gradient 2','gradient-3':'Gradient 3','gradient-4':'Gradient 4',\n 'morph-wave-top':'Wave Top','morph-wave-bot':'Wave Bottom','morph-wave-left':'Wave Left','morph-wave-right':'Wave Right',\n 'morph-arch-top':'Arch Top','morph-arch-bot':'Arch Bottom','morph-arch-left':'Arch Left','morph-arch-right':'Arch Right',\n 'morph-swoop-top':'Swoop Top','morph-swoop-bot':'Swoop Bottom','morph-swoop-left':'Swoop Left','morph-swoop-right':'Swoop Right',\n 'morph-spill-bl':'Spilling','morph-spill-tl':'Spilling 2','morph-spill-tr':'Spilling 3','morph-spill-br':'Spilling 4',\n 'morph-frame':'Framing',\n 'morph-wiper':'Swipe Bottom','morph-wiper-right':'Swipe Top','morph-wiper-top':'Swipe Right','morph-wiper-bot':'Swipe Left',\n 'morph-origami':'Folding'\n };\n\n var grid = document.getElementById('btn-grid');\n Object.keys(types).forEach(function(k){\n var btn = document.createElement('button');\n btn.className = 'transition-btn';\n btn.setAttribute('data-t', k);\n btn.innerHTML = types[k];\n grid.appendChild(btn);\n });\n\n function mk(wrap, wipe, n, st){\n var s = '<div class=\"'+wrap+'\">';\n for(var i=0;i<n;i++) s += '<div data-wipe=\"'+wipe+'\" data-state=\"'+st+'\"><\/div>';\n return s + '<\/div>';\n }\n\n function getOverlayHtml(type, st){\n switch(type){\n case 'fade': case 'blur': case 'zoom-in': case 'zoom-out':\n return '<div class=\"fade-overlay\" data-wipe=\"fade-overlay\" data-state=\"'+st+'\"><\/div>';\n case 'slide-up': return '<div class=\"slide-elem\" data-wipe=\"slide-top\" data-state=\"'+st+'\"><\/div>';\n case 'slide-down': return '<div class=\"slide-elem\" data-wipe=\"slide-bot\" data-state=\"'+st+'\"><\/div>';\n case 'slide-left': return '<div class=\"slide-elem\" data-wipe=\"slide-left\" data-state=\"'+st+'\"><\/div>';\n case 'slide-right': return '<div class=\"slide-elem\" data-wipe=\"slide-right\" data-state=\"'+st+'\"><\/div>';\n case 'slide-up-2': return '<div class=\"slide-elem\" data-wipe=\"slide-top-2\" data-state=\"'+st+'\"><\/div>';\n case 'slide-down-2': return '<div class=\"slide-elem\" data-wipe=\"slide-bot-2\" data-state=\"'+st+'\"><\/div>';\n case 'slide-left-2': return '<div class=\"slide-elem\" data-wipe=\"slide-left-2\" data-state=\"'+st+'\"><\/div>';\n case 'slide-right-2':return '<div class=\"slide-elem\" data-wipe=\"slide-right-2\" data-state=\"'+st+'\"><\/div>';\n case 'tiles-h': return mk('tiles-h','tile-item',8,st);\n case 'tiles-h-2': return mk('tiles-h','tile-item-2',8,st);\n case 'tiles-h-3': return mk('tiles-h','tile-item-3',8,st);\n case 'tiles-h-4': return mk('tiles-h','tile-item-4',8,st);\n case 'tiles-v': return mk('tiles-v','tile-v-item',8,st);\n case 'tiles-v-2': return mk('tiles-v','tile-v-item-2',8,st);\n case 'tiles-v-3': return mk('tiles-v','tile-v-item-3',8,st);\n case 'tiles-v-4': return mk('tiles-v','tile-v-item-4',8,st);\n case 'slides-h': return mk('slides-h','slide-h-layer',3,st);\n case 'slides-h-2': return mk('slides-h','slide-h-layer-2',3,st);\n case 'slides-v': return mk('slides-v','slide-v-layer',3,st);\n case 'slides-v-2': return mk('slides-v','slide-v-layer-2',3,st);\n case 'curtain-flip': return mk('curtain-flip','curtain-item',8,st);\n case 'curtain-flip-2':return mk('curtain-flip','curtain-item-2',8,st);\n case 'curtain-flip-3':return mk('curtain-flip','curtain-item-3',8,st);\n case 'curtain-flip-4':return mk('curtain-flip','curtain-item-4',8,st);\n case 'square-grid': return mk('square-grid','grid-item',36,st);\n case 'square-grid-2':return mk('square-grid','grid-item-2',36,st);\n case 'square-grid-3':return mk('square-grid','grid-item-3',36,st);\n case 'square-grid-4':return mk('square-grid','grid-item-4',36,st);\n case 'reveal-circle':\n case 'reveal-square':\n case 'reveal-gradient':\n case 'gradient-1':\n case 'gradient-2':\n case 'gradient-3':\n case 'gradient-4':\n return '<div class=\"fade-overlay\" data-wipe=\"'+type+'\" data-state=\"'+st+'\"><\/div>';\n default: return getMorph(type, st);\n }\n }\n\n function getMorph(type, st){\n var full=(st==='in'), d='', vb='0 0 100 100';\n if(type==='morph-wave-top') d=full?\"M 0 0 L 100 0 L 100 100 C 66 100, 33 100, 0 100 Z\":\"M 0 0 L 100 0 L 100 0 C 66 0, 33 0, 0 0 Z\";\n if(type==='morph-wave-bot') d=full?\"M 0 100 L 100 100 L 100 0 C 66 0, 33 0, 0 0 Z\":\"M 0 100 L 100 100 L 100 100 C 66 100, 33 100, 0 100 Z\";\n if(type==='morph-wave-left') d=full?\"M 0 0 L 0 100 L 100 100 C 100 66, 100 33, 100 0 Z\":\"M 0 0 L 0 100 L 0 100 C 0 66, 0 33, 0 0 Z\";\n if(type==='morph-wave-right') d=full?\"M 100 0 L 100 100 L 0 100 C 0 66, 0 33, 0 0 Z\":\"M 100 0 L 100 100 L 100 100 C 100 66, 100 33, 100 0 Z\";\n if(type==='morph-arch-top') d=full?\"M 0 0 L 100 0 L 100 100 C 75 100, 25 100, 0 100 Z\":\"M 0 0 L 100 0 L 100 0 C 75 0, 25 0, 0 0 Z\";\n if(type==='morph-arch-bot') d=full?\"M 0 100 L 100 100 L 100 0 C 75 0, 25 0, 0 0 Z\":\"M 0 100 L 100 100 L 100 100 C 75 100, 25 100, 0 100 Z\";\n if(type==='morph-arch-left') d=full?\"M 0 0 L 0 100 L 100 100 C 100 75, 100 25, 100 0 Z\":\"M 0 0 L 0 100 L 0 100 C 0 75, 0 25, 0 0 Z\";\n if(type==='morph-arch-right') d=full?\"M 100 0 L 100 100 L 0 100 C 0 75, 0 25, 0 0 Z\":\"M 100 0 L 100 100 L 100 100 C 100 75, 100 25, 100 0 Z\";\n if(type==='morph-swoop-top') d=full?\"M 0 0 L 100 0 L 100 100 C 50 100, 50 100, 0 100 Z\":\"M 0 0 L 100 0 L 100 0 C 50 0, 50 0, 0 0 Z\";\n if(type==='morph-swoop-bot') d=full?\"M 0 100 L 100 100 L 100 0 C 50 0, 50 0, 0 0 Z\":\"M 0 100 L 100 100 L 100 100 C 50 100, 50 100, 0 100 Z\";\n if(type==='morph-swoop-left') d=full?\"M 0 0 L 0 100 L 100 100 C 100 50, 100 50, 100 0 Z\":\"M 0 0 L 0 100 L 0 100 C 0 50, 0 50, 0 0 Z\";\n if(type==='morph-swoop-right')d=full?\"M 100 0 L 100 100 L 0 100 C 0 50, 0 50, 0 0 Z\":\"M 100 0 L 100 100 L 100 100 C 100 50, 100 50, 100 0 Z\";\n if(type.indexOf('morph-spill')>-1){\n vb=\"0 0 80 60\";\n if(type==='morph-spill-bl') d=full?\"M 0,0 c 0,0 63.5,-16.5 80,0 16.5,16.5 0,60 0,60 L 0,60 Z\":\"M 0,0 c 0,0 -16.5,43.5 0,60 16.5,16.5 80,0 80,0 L 0,60 Z\";\n if(type==='morph-spill-tl') d=full?\"M 0,60 c 0,0 63.5,16.5 80,0 16.5,-16.5 0,-60 0,-60 L 0,0 Z\":\"M 0,60 c 0,0 -16.5,-43.5 0,-60 16.5,-16.5 80,0 80,0 L 0,0 Z\";\n if(type==='morph-spill-tr') d=full?\"M 80,60 c 0,0 -63.5,16.5 -80,0 -16.5,-16.5 0,-60 0,-60 L 80,0 Z\":\"M 80,60 c 0,0 16.5,-43.5 0,-60 -16.5,-16.5 -80,0 -80,0 L 80,0 Z\";\n if(type==='morph-spill-br') d=full?\"M 80,0 c 0,0 -63.5,-16.5 -80,0 -16.5,16.5 0,60 0,60 L 80,60 Z\":\"M 80,0 c 0,0 16.5,43.5 0,60 -16.5,16.5 -80,0 -80,0 L 80,60 Z\";\n }\n if(type==='morph-frame'){vb=\"0 0 80 60\";d=full?\"M 0,0 0,60 80,60 80,0 Z M 40,30 40,30 40,30 40,30 Z\":\"M 0,0 0,60 80,60 80,0 Z M 80,0 80,60 0,60 0,0 Z\";}\n if(type.indexOf('morph-wiper')>-1){\n vb=\"0 0 80 60\";\n if(type==='morph-wiper') d=full?\"M -40 30 L 120 -90 L 120 150 Z\":\"M -40 30 L -40 -90 L -40 150 Z\";\n if(type==='morph-wiper-right') d=full?\"M 120 30 L -40 -90 L -40 150 Z\":\"M 120 30 L 120 -90 L 120 150 Z\";\n if(type==='morph-wiper-top') d=full?\"M 40 -40 L -90 100 L 170 100 Z\":\"M 40 -40 L -90 -40 L 170 -40 Z\";\n if(type==='morph-wiper-bot') d=full?\"M 40 100 L -90 -40 L 170 -40 Z\":\"M 40 100 L -90 100 L 170 100 Z\";\n }\n if(type==='morph-origami'){vb=\"0 0 80 60\";d=full?\"M -10 -10 L -10 70 L 90 70 L 90 -10 Z M 40 -40.5 L 40 30 L 40 100 L 40 30 Z\":\"M -10 -10 L -10 70 L 90 70 L 90 -10 Z M 40 -40.5 L 120 30 L 40 100 L -40 30 Z\";}\n if(!d) return '';\n var fr=(type==='morph-frame'||type==='morph-origami')?' fill-rule=\"evenodd\"':'';\n return '<div class=\"morph-elem\" data-wipe=\"'+type+'\" data-state=\"'+st+'\"><svg viewBox=\"'+vb+'\" preserveAspectRatio=\"none\"><path class=\"morph-path\"'+fr+' d=\"'+d+'\" \/><\/svg><\/div>';\n }\n\n var busy = false;\n var fadeContent = ['blur','zoom-in','zoom-out'];\n\n document.getElementById('btn-grid').addEventListener('click', function(e){\n var btn = e.target.closest('[data-t]');\n if(!btn || busy) return;\n busy = true;\n\n var type = btn.getAttribute('data-t');\n var dur = parseInt(getComputedStyle(html).getPropertyValue('--time-duration'), 10) || 1000;\n\n html.style.setProperty('--click-x', (e.clientX||window.innerWidth\/2)+'px');\n html.style.setProperty('--click-y', (e.clientY||window.innerHeight\/2)+'px');\n html.style.setProperty('--time-duration', dur+'ms');\n html.style.setProperty('--time-out', dur+'ms');\n html.style.setProperty('--time-in', dur+'ms');\n html.classList.add('diviglide-active','is-changing');\n\n var maxDelay = 0;\n if(type.indexOf('tiles-')===0||type.indexOf('curtain-')===0) maxDelay=Math.round(dur*0.42);\n if(type.indexOf('square-grid')===0) maxDelay=Math.round(dur*0.15);\n if(type.indexOf('slides-')===0) maxDelay=Math.round(dur*0.2);\n\n overlayWrap.innerHTML = getOverlayHtml(type, '');\n overlayWrap.classList.add('is-active');\n if(fadeContent.indexOf(type)>-1) html.classList.add('anim-content-'+type);\n\n requestAnimationFrame(function(){\n var elems = overlayWrap.querySelectorAll('[data-state]');\n setTimeout(function(){ elems.forEach(function(el){el.setAttribute('data-state','in');}); }, 20);\n\n setTimeout(function(){\n html.classList.add('diviglide-is-entering');\n elems.forEach(function(el){el.setAttribute('data-state','out');});\n\n setTimeout(function(){\n overlayWrap.classList.remove('is-active');\n overlayWrap.innerHTML='';\n html.classList.remove('diviglide-active','is-changing','diviglide-is-entering','anim-content-'+type);\n busy=false;\n }, dur+maxDelay+100);\n }, dur+maxDelay+80);\n });\n });\n\n var preloaders = [\n { label:'Pulse', html:'<div class=\"pre-pulse\" style=\"width:50px;height:50px;--pre-accent:#2563eb\"><\/div>' },\n { label:'Spinner', html:'<div class=\"pre-liquid\" style=\"width:50px;height:50px;--pre-accent:#7c3aed\"><\/div>' },\n { label:'HUD Ring', html:'<div class=\"pre-hud\" style=\"width:50px;height:50px;--pre-accent:#0891b2\"><\/div>' },\n { label:'Scanner', html:'<div class=\"pre-scan\" style=\"width:50px;height:50px;--pre-accent:#059669\"><\/div>' },\n { label:'Orb Duo', html:'<div class=\"pre-orb\" style=\"width:50px;height:50px;--pre-accent:#dc2626\"><\/div>' },\n { label:'Progress Bar', html:'<div class=\"pre-bar\" style=\"width:100px;--pre-accent:#f59e0b\"><\/div>' },\n { label:'Text Fade', html:'<div class=\"divi-loader-1\" data-text=\"Loading\" style=\"--pre-accent:#2563eb;font-size:16px;\"><\/div>' },\n { label:'Text Underline',html:'<div class=\"divi-loader-2\" data-text=\"Loading\" style=\"--pre-accent:#7c3aed;font-size:16px;\"><\/div>' },\n { label:'Text Steps', html:'<div class=\"divi-loader-3\" data-text=\"Loading\" style=\"--pre-accent:#0891b2;font-size:16px;\"><\/div>' },\n { label:'Text Reveal', html:'<div class=\"divi-loader-4\" data-text=\"Loading\" style=\"--pre-accent:#059669;font-size:16px;\"><\/div>' },\n { label:'Text Jump', html:'<div class=\"divi-loader-5\" data-text=\"LOD\" style=\"--pre-accent:#dc2626;font-size:16px;\"><\/div>' },\n { label:'Dots Appear', html:'<div class=\"divi-loader-6\" style=\"--pre-accent:#2563eb\"><\/div>' },\n { label:'Dots Wave', html:'<div class=\"divi-loader-7\" style=\"--pre-accent:#7c3aed\"><\/div>' },\n { label:'Dots Blink', html:'<div class=\"divi-loader-8\" style=\"--pre-accent:#0891b2\"><\/div>' },\n { label:'Dots Bounce', html:'<div class=\"divi-loader-9\" style=\"--pre-accent:#059669\"><\/div>' },\n { label:'Drop Squares', html:'<div class=\"divi-loader-10\" style=\"--pre-accent:#dc2626\"><\/div>' },\n { label:'Toggle Dots', html:'<div class=\"divi-loader-11\" style=\"--pre-accent:#f59e0b\"><\/div>' },\n { label:'Dot Bars', html:'<div class=\"divi-loader-12\" style=\"--pre-accent:#2563eb\"><\/div>' },\n { label:'Bounce Anim', html:'<div class=\"divi-preloader-inner anim-bounce\" style=\"width:50px;height:50px;--pre-accent:#7c3aed\"><div class=\"pre-pulse\" style=\"width:40px;height:40px\"><\/div><\/div>' },\n { label:'Heartbeat', html:'<div class=\"divi-preloader-inner anim-heartbeat\" style=\"width:50px;height:50px;--pre-accent:#dc2626\"><div class=\"pre-pulse\" style=\"width:40px;height:40px\"><\/div><\/div>' }\n ];\n\n var preGrid = document.getElementById('pre-grid');\n preloaders.forEach(function(p){\n var card = document.createElement('div');\n card.className = 'pre-card';\n card.innerHTML = p.html + '<span class=\"pre-card-label\">'+p.label+'<\/span>';\n preGrid.appendChild(card);\n });\n\n })();\n <\/script>\n\n <!-- ========== FAQ ========== -->\n <section class=\"dg-page-section dg-page-faq\" id=\"faq\">\n <div class=\"dg-page-container\">\n <div class=\"dg-page-section-header dg-reveal\">\n <span class=\"dg-page-section-badge\">\u2726 Common Questions<\/span>\n <h2>Frequently Asked Questions<\/h2>\n <p>Everything you need to know about Divi Glide before getting started.<\/p>\n <\/div>\n <div class=\"dg-page-faq-grid\">\n <div class=\"dg-page-faq-item dg-reveal\">\n <div class=\"dg-page-faq-q\">Does Divi Glide work with all Divi versions? <span class=\"arrow\">\u25be<\/span><\/div>\n <div class=\"dg-page-faq-a\"><div class=\"dg-page-faq-a-inner\">Yes! Divi Glide is fully compatible with Divi 4.x and the upcoming Divi 5. It hooks into the standard Divi page lifecycle and requires no special configuration.<\/div><\/div>\n <\/div>\n <div class=\"dg-page-faq-item dg-reveal\">\n <div class=\"dg-page-faq-q\">Will it slow down my website? <span class=\"arrow\">\u25be<\/span><\/div>\n <div class=\"dg-page-faq-a\"><div class=\"dg-page-faq-a-inner\">Absolutely not. Divi Glide is under 50KB total (CSS + JS combined) with zero external dependencies. All animations are GPU-accelerated, ensuring smooth 60fps performance without impacting page load times or Core Web Vitals.<\/div><\/div>\n <\/div>\n <div class=\"dg-page-faq-item dg-reveal\">\n <div class=\"dg-page-faq-q\">Can I use different transitions on different pages? <span class=\"arrow\">\u25be<\/span><\/div>\n <div class=\"dg-page-faq-a\"><div class=\"dg-page-faq-a-inner\">Yes. Divi Glide provides per-page settings within the Divi Builder so you can assign unique transition styles, overlay colors, and preloaders to individual pages or sections.<\/div><\/div>\n <\/div>\n <div class=\"dg-page-faq-item dg-reveal\">\n <div class=\"dg-page-faq-q\">Is it compatible with caching and CDN plugins? <span class=\"arrow\">\u25be<\/span><\/div>\n <div class=\"dg-page-faq-a\"><div class=\"dg-page-faq-a-inner\">Fully compatible. Divi Glide uses pure CSS animations and vanilla JavaScript, which work seamlessly with all major caching plugins (WP Rocket, W3 Total Cache, LiteSpeed) and CDN services (Cloudflare, BunnyCDN, etc.).<\/div><\/div>\n <\/div>\n <div class=\"dg-page-faq-item dg-reveal\">\n <div class=\"dg-page-faq-q\">What happens on mobile devices? <span class=\"arrow\">\u25be<\/span><\/div>\n <div class=\"dg-page-faq-a\"><div class=\"dg-page-faq-a-inner\">Every transition is fully responsive and touch-friendly. Complex effects like grids and tiles gracefully degrade on smaller viewports to maintain smooth performance on all devices.<\/div><\/div>\n <\/div>\n <div class=\"dg-page-faq-item dg-reveal\">\n <div class=\"dg-page-faq-q\">Do you offer support and updates? <span class=\"arrow\">\u25be<\/span><\/div>\n <div class=\"dg-page-faq-a\"><div class=\"dg-page-faq-a-inner\">Yes. All licenses include priority email support. We regularly ship new transition styles, performance improvements, and Divi compatibility patches.<\/div><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <!-- ========== CTA BANNER ========== -->\n <section class=\"dg-page-cta-banner\" id=\"get-started\">\n <h2>Ready to Elevate Your Divi Site?<\/h2>\n <p>Join thousands of Divi professionals using Divi Glide to create unforgettable browsing experiences.<\/p>\n <div style=\"position:relative;display:flex;gap:16px;justify-content:center;flex-wrap:wrap;\">\n <a href=\"#demo\" class=\"dg-page-btn-primary\">\u26a1 Try the Live Demo<\/a>\n <a href=\"#features\" class=\"dg-page-btn-ghost\">View All Features \u2192<\/a>\n <\/div>\n <\/section>\n\n <!-- ========== FOOTER ========== -->\n <footer class=\"dg-page-footer\">\n <div class=\"dg-page-footer-grid\">\n <div class=\"dg-page-footer-brand\">\n <a href=\"#\" class=\"dg-page-logo\">\n <svg viewBox=\"0 0 512 512\" width=\"28\" height=\"28\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><circle cx=\"256\" cy=\"256\" r=\"100\" fill=\"url(#lgf)\" opacity=\".4\"\/><defs><linearGradient id=\"lgf\" x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\"><stop stop-color=\"#818cf8\"\/><stop offset=\"1\" stop-color=\"#06b6d4\"\/><\/linearGradient><\/defs><\/svg>\n <span class=\"dg-page-logo-text\">Divi Glide<\/span>\n <\/a>\n <p>The ultimate page transition and preloader plugin for the Divi Builder ecosystem. Crafted with precision for performance-obsessed designers.<\/p>\n <\/div>\n <div class=\"dg-page-footer-col\">\n <h4>Product<\/h4>\n <a href=\"#features\">Features<\/a>\n <a href=\"#demo\">Live Demo<\/a>\n <a href=\"#\">Changelog<\/a>\n <a href=\"#\">Roadmap<\/a>\n <\/div>\n <div class=\"dg-page-footer-col\">\n <h4>Resources<\/h4>\n <a href=\"#\">Documentation<\/a>\n <a href=\"#faq\">FAQ<\/a>\n <a href=\"#\">Support<\/a>\n <a href=\"#\">Blog<\/a>\n <\/div>\n <\/div>\n <div class=\"dg-page-footer-bottom\">\n <span>\u00a9 2026 Divi Glide by <a href=\"https:\/\/apemedia.my\/\" target=\"_blank\" rel=\"noopener\">Ape Media & Services<\/a>. All rights reserved.<\/span>\n <span>Made with precision for the Divi community.<\/span>\n <\/div>\n <\/footer>\n\n <script src=\".\/assets\/js\/demo-page.js\"><\/script>\n<\/body>\n<\/html>\n<script>\n\/* Divi Glide \u2013 Demo Page Interactions *\/\n(function(){\n 'use strict';\n\n \/* --- Navbar scroll effect --- *\/\n var nav = document.querySelector('.dg-page-nav');\n if (nav) {\n window.addEventListener('scroll', function(){\n nav.classList.toggle('scrolled', window.scrollY > 40);\n }, {passive:true});\n }\n\n \/* --- Smooth scroll for anchor links --- *\/\n document.querySelectorAll('a[href^=\"#\"]').forEach(function(a){\n a.addEventListener('click', function(e){\n var target = document.querySelector(this.getAttribute('href'));\n if (target) {\n e.preventDefault();\n target.scrollIntoView({behavior:'smooth', block:'start'});\n }\n });\n });\n\n \/* --- Scroll reveal --- *\/\n var reveals = document.querySelectorAll('.dg-reveal');\n if (reveals.length) {\n var io = new IntersectionObserver(function(entries){\n entries.forEach(function(en){\n if (en.isIntersecting) { en.target.classList.add('visible'); io.unobserve(en.target); }\n });\n }, {threshold: 0.12});\n reveals.forEach(function(el){ io.observe(el); });\n }\n\n \/* --- FAQ accordion --- *\/\n document.querySelectorAll('.dg-page-faq-q').forEach(function(q){\n q.addEventListener('click', function(){\n var item = this.closest('.dg-page-faq-item');\n var ans = item.querySelector('.dg-page-faq-a');\n var open = item.classList.contains('open');\n \/* close all *\/\n document.querySelectorAll('.dg-page-faq-item.open').forEach(function(o){\n o.classList.remove('open');\n o.querySelector('.dg-page-faq-a').style.maxHeight = '0';\n });\n if (!open) {\n item.classList.add('open');\n ans.style.maxHeight = ans.scrollHeight + 'px';\n }\n });\n });\n\n \/* --- Counter animation --- *\/\n var counted = false;\n function animateCounters(){\n if (counted) return;\n var nums = document.querySelectorAll('.dg-page-hero-stat .num');\n if (!nums.length) return;\n counted = true;\n nums.forEach(function(el){\n var target = parseInt(el.getAttribute('data-count'),10);\n var suffix = el.getAttribute('data-suffix') || '';\n var dur = 1800, start = 0, startTime = null;\n function step(ts){\n if (!startTime) startTime = ts;\n var prog = Math.min((ts - startTime) \/ dur, 1);\n var ease = 1 - Math.pow(1 - prog, 3);\n el.textContent = Math.round(ease * target) + suffix;\n if (prog < 1) requestAnimationFrame(step);\n }\n requestAnimationFrame(step);\n });\n }\n var heroStats = document.querySelector('.dg-page-hero-stats');\n if (heroStats) {\n var sio = new IntersectionObserver(function(entries){\n if (entries[0].isIntersecting) { animateCounters(); sio.disconnect(); }\n }, {threshold: 0.5});\n sio.observe(heroStats);\n }\n\n \/* --- Particles --- *\/\n var heroEl = document.querySelector('.dg-page-hero');\n if (heroEl) {\n for (var i = 0; i < 6; i++) {\n var p = document.createElement('div');\n p.className = 'dg-page-particle';\n var size = 3 + Math.random() * 5;\n p.style.cssText = 'width:'+size+'px;height:'+size+'px;left:'+Math.random()*100+'%;top:'+Math.random()*100+'%;animation-delay:'+Math.random()*4+'s;animation-duration:'+(5+Math.random()*4)+'s;';\n heroEl.appendChild(p);\n }\n }\n})();\n\n<\/script>\n<style>\n\/* ===================================================================\n Divi Glide \u2013 Demo Page Wrapper Styles (Light Theme)\n All classes prefixed with .dg-page- to avoid conflicts\n =================================================================== *\/\n\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800;900&family=Outfit:wght@400;500;600;700;800;900&display=swap');\n\n\/* --- Design Tokens (Light Palette) --- *\/\n:root {\n --dg-bg: #f8fafc;\n --dg-bg-alt: #ffffff;\n --dg-bg-soft: #f1f5f9;\n --dg-bg-card: #ffffff;\n --dg-bg-card-hover: #f8fafc;\n --dg-primary: #2563eb;\n --dg-primary-light: #3b82f6;\n --dg-primary-pale: rgba(37,99,235,0.06);\n --dg-accent: #7c3aed;\n --dg-accent2: #06b6d4;\n --dg-text: #1e293b;\n --dg-text-mid: #334155;\n --dg-text-dim: #64748b;\n --dg-text-dimmer: #94a3b8;\n --dg-border: #e2e8f0;\n --dg-border-light: #f1f5f9;\n --dg-radius: 16px;\n --dg-radius-sm: 10px;\n --dg-font: 'Inter', 'Outfit', system-ui, sans-serif;\n --dg-transition: .3s cubic-bezier(.4,0,.2,1);\n --dg-shadow-sm: 0 1px 3px rgba(15,23,42,0.04), 0 1px 2px rgba(15,23,42,0.03);\n --dg-shadow: 0 4px 16px rgba(15,23,42,0.06), 0 1px 3px rgba(15,23,42,0.04);\n --dg-shadow-lg: 0 10px 40px rgba(15,23,42,0.08), 0 2px 8px rgba(15,23,42,0.04);\n}\n\n\/* --- Reset for page sections --- *\/\n.dg-page-nav, .dg-page-hero, .dg-page-section,\n.dg-page-footer, .dg-page-cta-banner {\n font-family: var(--dg-font);\n color: var(--dg-text);\n line-height: 1.6;\n}\n.dg-page-section { padding: 100px 24px; position: relative; }\n.dg-page-container { max-width: 1200px; margin: 0 auto; }\n\n\/* --- Sticky Navigation --- *\/\n.dg-page-nav {\n position: fixed; top: 0; left: 0; right: 0; z-index: 10000;\n background: rgba(255,255,255,0.8); backdrop-filter: blur(20px) saturate(180%);\n border-bottom: 1px solid var(--dg-border);\n transition: var(--dg-transition);\n}\n.dg-page-nav.scrolled {\n background: rgba(255,255,255,0.95);\n box-shadow: 0 1px 12px rgba(15,23,42,0.06);\n}\n.dg-page-nav-inner {\n max-width: 1200px; margin: 0 auto;\n display: flex; align-items: center; justify-content: space-between;\n padding: 14px 24px;\n}\n.dg-page-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }\n.dg-page-logo svg { width: 32px; height: 32px; }\n.dg-page-logo-text {\n font-family: 'Outfit', sans-serif; font-size: 20px; font-weight: 800;\n background: linear-gradient(135deg, #2563eb, #7c3aed);\n -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;\n}\n.dg-page-nav-links { display: flex; gap: 8px; align-items: center; }\n.dg-page-nav-links a {\n color: var(--dg-text-dim); text-decoration: none; font-size: 13px; font-weight: 600;\n padding: 8px 16px; border-radius: 8px; transition: var(--dg-transition);\n letter-spacing: .3px;\n}\n.dg-page-nav-links a:hover { color: var(--dg-primary); background: var(--dg-primary-pale); }\n.dg-page-nav-cta {\n background: linear-gradient(135deg, var(--dg-primary), var(--dg-accent)) !important;\n color: #fff !important; padding: 8px 20px !important; border-radius: 8px !important;\n font-weight: 700 !important;\n}\n.dg-page-nav-cta:hover { opacity: .9; transform: translateY(-1px); }\n\n\/* --- Hero Section --- *\/\n.dg-page-hero {\n background: linear-gradient(180deg, #eef2ff 0%, #f8fafc 60%, #ffffff 100%);\n padding: 160px 24px 100px; text-align: center; position: relative; overflow: hidden;\n}\n.dg-page-hero::before {\n content: ''; position: absolute; inset: 0;\n background: radial-gradient(ellipse 80% 60% at 50% 20%, rgba(37,99,235,0.06) 0%, transparent 70%),\n radial-gradient(ellipse 60% 40% at 80% 80%, rgba(124,58,237,0.04) 0%, transparent 60%);\n pointer-events: none;\n}\n.dg-page-hero-badge {\n display: inline-flex; align-items: center; gap: 8px;\n background: rgba(37,99,235,0.06); border: 1px solid rgba(37,99,235,0.15);\n padding: 6px 18px; border-radius: 999px; font-size: 12px; font-weight: 700;\n color: var(--dg-primary); letter-spacing: 1px; text-transform: uppercase;\n margin-bottom: 28px; position: relative;\n}\n.dg-page-hero-badge .dot {\n width: 6px; height: 6px; border-radius: 50%; background: #22c55e;\n animation: dg-pulse-dot 2s infinite;\n}\n@keyframes dg-pulse-dot {\n 0%,100% { opacity: 1; } 50% { opacity: .4; }\n}\n.dg-page-hero h1 {\n font-family: 'Outfit', sans-serif; font-size: clamp(40px, 6vw, 72px);\n font-weight: 900; line-height: 1.08; margin: 0 0 24px;\n background: linear-gradient(135deg, #1e293b 30%, #2563eb 60%, #7c3aed 100%);\n -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;\n letter-spacing: -2px; position: relative;\n}\n.dg-page-hero-sub {\n font-size: 18px; color: var(--dg-text-dim); max-width: 640px;\n margin: 0 auto 40px; line-height: 1.7; position: relative;\n}\n.dg-page-hero-actions {\n display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;\n position: relative; margin-bottom: 48px;\n}\n.dg-page-btn-primary {\n display: inline-flex; align-items: center; gap: 8px;\n background: linear-gradient(135deg, var(--dg-primary), var(--dg-accent));\n color: #fff; font-size: 15px; font-weight: 700; padding: 14px 32px;\n border-radius: 12px; text-decoration: none; transition: var(--dg-transition);\n box-shadow: 0 4px 20px rgba(37,99,235,0.25);\n}\n.dg-page-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(37,99,235,0.3); }\n.dg-page-btn-ghost {\n display: inline-flex; align-items: center; gap: 8px;\n background: #fff; border: 1.5px solid var(--dg-border);\n color: var(--dg-text); font-size: 15px; font-weight: 600; padding: 14px 32px;\n border-radius: 12px; text-decoration: none; transition: var(--dg-transition);\n box-shadow: var(--dg-shadow-sm);\n}\n.dg-page-btn-ghost:hover { border-color: var(--dg-primary); color: var(--dg-primary); transform: translateY(-2px); box-shadow: var(--dg-shadow); }\n\n\/* Hero Stats Row *\/\n.dg-page-hero-stats {\n display: flex; gap: 48px; justify-content: center; flex-wrap: wrap;\n position: relative; padding-top: 32px;\n border-top: 1px solid var(--dg-border);\n max-width: 600px; margin: 0 auto;\n}\n.dg-page-hero-stat { text-align: center; }\n.dg-page-hero-stat .num {\n font-family: 'Outfit', sans-serif; font-size: 36px; font-weight: 900;\n background: linear-gradient(135deg, #2563eb, #7c3aed);\n -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;\n}\n.dg-page-hero-stat .lbl { font-size: 12px; color: var(--dg-text-dimmer); text-transform: uppercase; letter-spacing: 1px; font-weight: 600; }\n\n\/* --- Features Grid --- *\/\n.dg-page-features { background: #fff; }\n.dg-page-section-header { text-align: center; margin-bottom: 64px; }\n.dg-page-section-badge {\n display: inline-block; font-size: 11px; font-weight: 800;\n letter-spacing: 2px; text-transform: uppercase; color: var(--dg-primary);\n margin-bottom: 16px;\n}\n.dg-page-section-header h2 {\n font-family: 'Outfit', sans-serif; font-size: clamp(28px, 4vw, 44px);\n font-weight: 800; margin: 0 0 16px; color: var(--dg-text); letter-spacing: -1px;\n}\n.dg-page-section-header p { font-size: 16px; color: var(--dg-text-dim); max-width: 560px; margin: 0 auto; }\n.dg-page-features-grid {\n display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px;\n}\n.dg-page-feature-card {\n background: var(--dg-bg-card); border: 1.5px solid var(--dg-border);\n border-radius: var(--dg-radius); padding: 36px 28px;\n transition: var(--dg-transition); position: relative; overflow: hidden;\n box-shadow: var(--dg-shadow-sm);\n}\n.dg-page-feature-card:hover {\n border-color: rgba(37,99,235,0.25);\n transform: translateY(-4px); box-shadow: var(--dg-shadow-lg);\n}\n.dg-page-feature-card::after {\n content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;\n background: linear-gradient(90deg, var(--dg-primary), var(--dg-accent));\n opacity: 0; transition: var(--dg-transition);\n}\n.dg-page-feature-card:hover::after { opacity: 1; }\n.dg-page-feature-icon {\n width: 48px; height: 48px; border-radius: 12px;\n background: linear-gradient(135deg, rgba(37,99,235,0.08), rgba(124,58,237,0.06));\n display: flex; align-items: center; justify-content: center;\n font-size: 22px; margin-bottom: 20px;\n}\n.dg-page-feature-card h3 {\n font-size: 18px; font-weight: 700; color: var(--dg-text); margin: 0 0 10px;\n}\n.dg-page-feature-card p {\n font-size: 14px; color: var(--dg-text-dim); margin: 0; line-height: 1.7;\n}\n\n\/* --- How it Works --- *\/\n.dg-page-how { background: var(--dg-bg); }\n.dg-page-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 32px; counter-reset: step; }\n.dg-page-step {\n text-align: center; padding: 40px 24px; border-radius: var(--dg-radius);\n background: #fff; border: 1.5px solid var(--dg-border);\n position: relative; counter-increment: step;\n box-shadow: var(--dg-shadow-sm); transition: var(--dg-transition);\n}\n.dg-page-step:hover { transform: translateY(-3px); box-shadow: var(--dg-shadow); }\n.dg-page-step::before {\n content: counter(step, decimal-leading-zero);\n font-family: 'Outfit', sans-serif; font-size: 48px; font-weight: 900;\n background: linear-gradient(135deg, rgba(37,99,235,0.15), rgba(124,58,237,0.1));\n -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;\n display: block; margin-bottom: 16px;\n}\n.dg-page-step h3 { font-size: 17px; font-weight: 700; color: var(--dg-text); margin: 0 0 10px; }\n.dg-page-step p { font-size: 14px; color: var(--dg-text-dim); margin: 0; }\n\n\/* --- Demo Section Wrapper --- *\/\n.dg-page-demo-section {\n background: var(--dg-bg); padding: 80px 0 80px;\n}\n\n\/* --- FAQ Section --- *\/\n.dg-page-faq { background: #fff; }\n.dg-page-faq-grid { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }\n.dg-page-faq-item {\n background: var(--dg-bg); border: 1.5px solid var(--dg-border);\n border-radius: var(--dg-radius-sm); overflow: hidden; transition: var(--dg-transition);\n}\n.dg-page-faq-item:hover { border-color: rgba(37,99,235,0.2); }\n.dg-page-faq-q {\n padding: 20px 24px; cursor: pointer; display: flex; justify-content: space-between;\n align-items: center; font-size: 15px; font-weight: 600; color: var(--dg-text);\n user-select: none; transition: var(--dg-transition);\n}\n.dg-page-faq-q:hover { color: var(--dg-primary); }\n.dg-page-faq-q .arrow {\n font-size: 18px; transition: transform .3s; color: var(--dg-text-dimmer);\n}\n.dg-page-faq-item.open .arrow { transform: rotate(180deg); color: var(--dg-primary); }\n.dg-page-faq-item.open { border-color: rgba(37,99,235,0.2); background: #fff; }\n.dg-page-faq-a {\n max-height: 0; overflow: hidden; transition: max-height .4s cubic-bezier(.4,0,.2,1);\n}\n.dg-page-faq-a-inner {\n padding: 0 24px 20px; font-size: 14px; color: var(--dg-text-dim); line-height: 1.8;\n}\n\n\/* --- CTA Banner --- *\/\n.dg-page-cta-banner {\n background: linear-gradient(135deg, #eef2ff, #ede9fe, #e0f2fe);\n padding: 80px 24px; text-align: center; position: relative; overflow: hidden;\n}\n.dg-page-cta-banner::before {\n content: ''; position: absolute; inset: 0;\n background: radial-gradient(ellipse at center, rgba(37,99,235,0.05), transparent 70%);\n}\n.dg-page-cta-banner h2 {\n font-family: 'Outfit', sans-serif; font-size: clamp(26px,4vw,40px);\n font-weight: 800; color: var(--dg-text); margin: 0 0 16px; position: relative;\n}\n.dg-page-cta-banner p {\n font-size: 16px; color: var(--dg-text-dim); margin: 0 auto 32px;\n max-width: 520px; position: relative;\n}\n\n\/* --- Footer --- *\/\n.dg-page-footer {\n background: var(--dg-bg); border-top: 1px solid var(--dg-border);\n padding: 60px 24px 32px;\n}\n.dg-page-footer-grid {\n max-width: 1200px; margin: 0 auto;\n display: grid; grid-template-columns: 3fr 1fr 1fr; gap: 48px;\n}\n.dg-page-footer-brand p { font-size: 13px; color: var(--dg-text-dimmer); line-height: 1.7; margin: 12px 0 0; }\n.dg-page-footer-col h4 {\n font-size: 12px; font-weight: 800; letter-spacing: 1.5px;\n text-transform: uppercase; color: var(--dg-text-dim); margin: 0 0 16px;\n}\n.dg-page-footer-col a {\n display: block; font-size: 13px; color: var(--dg-text-dimmer);\n text-decoration: none; padding: 4px 0; transition: var(--dg-transition);\n}\n.dg-page-footer-col a:hover { color: var(--dg-primary); }\n.dg-page-footer-bottom {\n max-width: 1200px; margin: 32px auto 0; padding-top: 24px;\n border-top: 1px solid var(--dg-border);\n display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;\n}\n.dg-page-footer-bottom span { font-size: 12px; color: var(--dg-text-dimmer); }\n\n\/* --- Scroll Animations --- *\/\n.dg-reveal {\n opacity: 0; transform: translateY(30px);\n transition: opacity .7s cubic-bezier(.4,0,.2,1), transform .7s cubic-bezier(.4,0,.2,1);\n}\n.dg-reveal.visible { opacity: 1; transform: translateY(0); }\n\n\/* --- Animated grid background (hero) --- *\/\n.dg-page-grid-bg {\n position: absolute; inset: 0; overflow: hidden; pointer-events: none;\n background-image:\n linear-gradient(rgba(37,99,235,0.05) 1px, transparent 1px),\n linear-gradient(90deg, rgba(37,99,235,0.05) 1px, transparent 1px);\n background-size: 60px 60px;\n mask-image: radial-gradient(ellipse 70% 50% at 50% 40%, black, transparent);\n}\n\n\/* --- Floating particles (hero) --- *\/\n.dg-page-particle {\n position: absolute; border-radius: 50%; pointer-events: none;\n background: rgba(37,99,235,0.15); animation: dg-float 6s infinite ease-in-out;\n}\n@keyframes dg-float {\n 0%,100% { transform: translateY(0) scale(1); opacity: .2; }\n 50% { transform: translateY(-20px) scale(1.2); opacity: .4; }\n}\n\n\/* --- Version badge glow --- *\/\n.dg-page-version-glow {\n position: absolute; top: -80px; left: 50%; transform: translateX(-50%);\n width: 400px; height: 400px; border-radius: 50%;\n background: radial-gradient(circle, rgba(37,99,235,0.06), transparent 60%);\n pointer-events: none; z-index: 0;\n}\n\n\/* --- Responsive --- *\/\n@media (max-width: 768px) {\n .dg-page-nav-links a:not(.dg-page-nav-cta) { display: none; }\n .dg-page-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }\n .dg-page-hero-stats { gap: 32px; }\n .dg-page-hero { padding: 140px 20px 80px; }\n}\n@media (max-width: 480px) {\n .dg-page-footer-grid { grid-template-columns: 1fr; }\n}\n<\/style><\/div><\/div>\n<\/div>\n<\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-template-blank.php","meta":{"footnotes":""},"class_list":["post-4","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/divi.apemedia.my\/glide\/wp-json\/wp\/v2\/pages\/4","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/divi.apemedia.my\/glide\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/divi.apemedia.my\/glide\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/divi.apemedia.my\/glide\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/divi.apemedia.my\/glide\/wp-json\/wp\/v2\/comments?post=4"}],"version-history":[{"count":70,"href":"https:\/\/divi.apemedia.my\/glide\/wp-json\/wp\/v2\/pages\/4\/revisions"}],"predecessor-version":[{"id":101,"href":"https:\/\/divi.apemedia.my\/glide\/wp-json\/wp\/v2\/pages\/4\/revisions\/101"}],"wp:attachment":[{"href":"https:\/\/divi.apemedia.my\/glide\/wp-json\/wp\/v2\/media?parent=4"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}