{"id":14,"date":"2026-10-07T09:05:55","date_gmt":"2026-10-07T09:05:55","guid":{"rendered":"https:\/\/device.ninja\/?page_id=14"},"modified":"2026-10-08T06:53:00","modified_gmt":"2026-10-08T06:53:00","slug":"14-2","status":"publish","type":"page","link":"https:\/\/device.ninja\/","title":{"rendered":"Home"},"content":{"rendered":"\n<style data-wp-block-html=\"css\">\n\/* =====================================================\n   DEVICE NINJA \u2014 SINGLE HERO HOMEPAGE\n   ===================================================== *\/\n\nhtml,\nbody {\n    margin: 0;\n    padding: 0;\n}\n\n.dn-hero {\n    position: relative;\n    width: 100%;\n    min-height: 100vh;\n    overflow: hidden;\n    box-sizing: border-box;\n    color: #fff;\n\n    background:\n        radial-gradient(circle at 8% 75%,\n            rgba(236, 0, 255, 0.18) 0%,\n            transparent 34%),\n\n        radial-gradient(circle at 70% 95%,\n            rgba(130, 32, 255, 0.18) 0%,\n            transparent 38%),\n\n        radial-gradient(circle at 95% 40%,\n            rgba(0, 135, 255, 0.17) 0%,\n            transparent 34%),\n\n        linear-gradient(\n            135deg,\n            #08040e 0%,\n            #080711 50%,\n            #020914 100%\n        );\n\n    font-family:\n        -apple-system,\n        BlinkMacSystemFont,\n        \"Segoe UI\",\n        Arial,\n        sans-serif;\n}\n\n\n\/* =========================\n   HEADER\n   ========================= *\/\n\n.dn-header {\n    width: min(1440px, 90%);\n    height: 125px;\n    margin: 0 auto;\n\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n\n    position: relative;\n    z-index: 10;\n}\n\n\n\/* LOGO *\/\n\n.dn-logo {\n    display: block;\n    line-height: 0;\n}\n\n.dn-logo img {\n    display: block;\n    width: 235px;\n    height: auto;\n}\n\n\n\/* NAVIGATION *\/\n\n.dn-nav {\n    display: flex;\n    align-items: center;\n    gap: 55px;\n}\n\n.dn-nav a {\n    position: relative;\n\n    color: rgba(255,255,255,0.88);\n\n    font-size: 17px;\n    font-weight: 500;\n\n    text-decoration: none;\n\n    transition: color .25s ease;\n}\n\n.dn-nav a:hover,\n.dn-nav a.active {\n    color: #db29ff;\n}\n\n\n\/* active gradient line *\/\n\n.dn-nav a.active::after {\n\n    content: \"\";\n\n    position: absolute;\n\n    left: 0;\n    right: 0;\n    bottom: -12px;\n\n    height: 3px;\n\n    border-radius: 10px;\n\n    background: linear-gradient(\n        90deg,\n        #ef14d9,\n        #8542ff,\n        #079cff\n    );\n}\n\n\n\/* =========================\n   HERO LAYOUT\n   ========================= *\/\n\n.dn-hero-inner {\n\n    width: min(1440px, 90%);\n    margin: 0 auto;\n\n    min-height: calc(100vh - 125px);\n\n    display: grid;\n\n    grid-template-columns:\n        minmax(0, 54%)\n        minmax(0, 46%);\n\n    align-items: center;\n\n    position: relative;\n    z-index: 2;\n}\n\n\n\/* =========================\n   PRODUCT IMAGE\n   ========================= *\/\n\n.dn-product {\n\n    height: 100%;\n\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n\n    position: relative;\n}\n\n.dn-product img {\n\n    width: 105%;\n    max-width: 800px;\n\n    height: auto;\n\n    display: block;\n\n    transform: translateX(-3%);\n\n    filter:\n        drop-shadow(\n            0 35px 65px rgba(0,0,0,.45)\n        );\n}\n\n\n\/* =========================\n   HERO COPY\n   ========================= *\/\n\n.dn-content {\n\n    max-width: 690px;\n\n    padding-left: 25px;\n\n    position: relative;\n    z-index: 5;\n}\n\n\n.dn-title {\n\n    margin: 0;\n\n    font-size: clamp(\n        50px,\n        4.8vw,\n        78px\n    );\n\n    line-height: 1.05;\n\n    letter-spacing: -3px;\n\n    font-weight: 700;\n}\n\n\n.dn-title > span {\n    display: block;\n}\n\n\n\/* PURPLE \/ PINK \/ BLUE TEXT *\/\n\n.dn-gradient-text {\n\n    padding-bottom: 7px;\n\n    background: linear-gradient(\n        90deg,\n        #139dff 0%,\n        #5364ff 37%,\n        #9a34ff 67%,\n        #ef15d6 100%\n    );\n\n    -webkit-background-clip: text;\n    background-clip: text;\n\n    -webkit-text-fill-color: transparent;\n}\n\n\n\/* DESCRIPTION *\/\n\n.dn-description {\n\n    margin: 32px 0 0;\n\n    max-width: 560px;\n\n    color: rgba(255,255,255,.68);\n\n    font-size: 21px;\n\n    line-height: 1.55;\n\n    font-weight: 400;\n}\n\n\n\/* =========================\n   ONLY CTA\n   ========================= *\/\n\n.dn-cta {\n\n    display: inline-flex;\n\n    align-items: center;\n    justify-content: center;\n\n    gap: 20px;\n\n    min-width: 210px;\n\n    margin-top: 40px;\n\n    padding: 18px 34px;\n\n    box-sizing: border-box;\n\n    border-radius: 100px;\n\n    background: linear-gradient(\n        90deg,\n        #e912e0 0%,\n        #8b39ff 48%,\n        #079cff 100%\n    );\n\n    color: #fff !important;\n\n    text-decoration: none !important;\n\n    font-size: 16px;\n\n    font-weight: 700;\n\n    letter-spacing: .4px;\n\n    box-shadow:\n        0 12px 40px\n        rgba(132, 42, 255, .28);\n\n    transition:\n        transform .25s ease,\n        box-shadow .25s ease;\n}\n\n\n.dn-cta:hover {\n\n    transform: translateY(-3px);\n\n    box-shadow:\n        0 16px 50px\n        rgba(132, 42, 255, .45);\n}\n\n\n.dn-arrow {\n\n    font-size: 23px;\n\n    line-height: 1;\n}\n\n\n\/* =========================\n   BACKGROUND GLOWS\n   ========================= *\/\n\n.dn-hero::before {\n\n    content: \"\";\n\n    position: absolute;\n\n    width: 700px;\n    height: 700px;\n\n    left: -400px;\n    bottom: -400px;\n\n    border-radius: 50%;\n\n    background:\n        rgba(228, 0, 255, .14);\n\n    filter: blur(110px);\n\n    pointer-events: none;\n}\n\n\n.dn-hero::after {\n\n    content: \"\";\n\n    position: absolute;\n\n    width: 650px;\n    height: 650px;\n\n    right: -400px;\n    bottom: -350px;\n\n    border-radius: 50%;\n\n    background:\n        rgba(0, 145, 255, .14);\n\n    filter: blur(110px);\n\n    pointer-events: none;\n}\n\n\n\/* =====================================================\n   TABLET\n   ===================================================== *\/\n\n@media (max-width: 1024px) {\n\n    .dn-header {\n\n        height: 105px;\n\n    }\n\n    .dn-logo img {\n\n        width: 195px;\n\n    }\n\n    .dn-nav {\n\n        gap: 30px;\n\n    }\n\n    .dn-hero-inner {\n\n        min-height:\n            calc(100vh - 105px);\n\n        grid-template-columns:\n            50% 50%;\n\n    }\n\n    .dn-product img {\n\n        width: 110%;\n\n    }\n\n    .dn-content {\n\n        padding-left: 20px;\n\n    }\n\n    .dn-title {\n\n        font-size:\n            clamp(43px, 5.5vw, 62px);\n\n        letter-spacing: -2px;\n\n    }\n\n    .dn-description {\n\n        font-size: 18px;\n\n    }\n\n}\n\n\n\/* =====================================================\n   MOBILE\n   ===================================================== *\/\n\n@media (max-width: 767px) {\n\n    .dn-header {\n\n        width: 88%;\n\n        height: 90px;\n\n        justify-content: center;\n\n    }\n\n\n    .dn-logo img {\n\n        width: 175px;\n\n    }\n\n\n    \/* hide nav on mobile for clean one-page site *\/\n\n    .dn-nav {\n\n        display: none;\n\n    }\n\n\n    .dn-hero-inner {\n\n        width: 88%;\n\n        min-height: auto;\n\n        display: flex;\n\n        flex-direction: column;\n\n        padding: 15px 0 65px;\n\n    }\n\n\n    .dn-product {\n\n        width: 100%;\n\n        height: auto;\n\n        justify-content: center;\n\n        order: 1;\n\n    }\n\n\n    .dn-product img {\n\n        width: 108%;\n\n        max-width: 540px;\n\n        transform: none;\n\n    }\n\n\n    .dn-content {\n\n        width: 100%;\n\n        max-width: none;\n\n        box-sizing: border-box;\n\n        padding: 20px 0 0;\n\n        text-align: center;\n\n        order: 2;\n\n    }\n\n\n    .dn-title {\n\n        font-size:\n            clamp(40px, 11vw, 56px);\n\n        line-height: 1.06;\n\n        letter-spacing: -2px;\n\n    }\n\n\n    .dn-description {\n\n        margin: 23px auto 0;\n\n        max-width: 420px;\n\n        font-size: 17px;\n\n        line-height: 1.5;\n\n    }\n\n\n    .dn-cta {\n\n        margin-top: 30px;\n\n        padding: 17px 31px;\n\n    }\n\n}\n\n\n\/* =====================================================\n   SMALL PHONE\n   ===================================================== *\/\n\n@media (max-width: 420px) {\n\n    .dn-logo img {\n\n        width: 155px;\n\n    }\n\n    .dn-title {\n\n        font-size: 38px;\n\n        letter-spacing: -1.4px;\n\n    }\n\n    .dn-description {\n\n        font-size: 16px;\n\n    }\n\n}\n\n\/* =========================================\n   DEVICE NINJA - REMOVE WP PAGE CHROME\n   PAGE ID 14 ONLY\n   ========================================= *\/\n\n\/* Hide WordPress page title *\/\nbody.page-id-14 .wp-block-post-title {\n    display: none !important;\n}\n\n\/* Remove WordPress content width restriction *\/\nbody.page-id-14 .wp-block-post-content {\n    max-width: none !important;\n    width: 100% !important;\n    margin: 0 !important;\n    padding: 0 !important;\n}\n\n\/* Remove margins\/padding around main page *\/\nbody.page-id-14 main,\nbody.page-id-14 .wp-block-group,\nbody.page-id-14 .entry-content {\n    margin-top: 0 !important;\n    margin-bottom: 0 !important;\n}\n\n\/* Make our hero escape any theme content width *\/\nbody.page-id-14 .dn-hero {\n    width: 100vw !important;\n    max-width: none !important;\n\n    position: relative;\n\n    left: 50%;\n    right: 50%;\n\n    margin-left: -50vw !important;\n    margin-right: -50vw !important;\n}\n\n\/* =========================================\n   HIDE WORDPRESS THEME HEADER - PAGE 14 ONLY\n   ========================================= *\/\n\nbody.page-id-14 header.wp-block-template-part,\nbody.page-id-14 .wp-block-template-part header,\nbody.page-id-14 .site-header {\n    display: none !important;\n}\n\n\/* Remove any spacing left by the theme *\/\nbody.page-id-14 .wp-site-blocks {\n    padding-top: 0 !important;\n    padding-bottom: 0 !important;\n}\n\nbody.page-id-14 main {\n    margin-top: 0 !important;\n    padding-top: 0 !important;\n}\n\/* FINAL: remove remaining top gap on Device Ninja homepage *\/\n\nbody.page-id-14,\nbody.page-id-14 .wp-site-blocks,\nbody.page-id-14 main,\nbody.page-id-14 .wp-block-post-content,\nbody.page-id-14 .entry-content {\n    margin-top: 0 !important;\n    padding-top: 0 !important;\n}\n\n\/* Remove block gap added by WP theme *\/\nbody.page-id-14 .wp-site-blocks {\n    gap: 0 !important;\n}\n\nbody.page-id-14 main {\n    block-size: auto;\n}\n\n\/* Make hero start immediately *\/\nbody.page-id-14 .dn-hero {\n    margin-top: 0 !important;\n}\n.dn-logo img {\n    width: 205px;\n    height: auto;\n}\n\/* =========================================\n   HIDE WORDPRESS FOOTER - PAGE 14 ONLY\n   ========================================= *\/\n\nbody.page-id-14 footer.wp-block-template-part,\nbody.page-id-14 .wp-block-template-part footer,\nbody.page-id-14 .site-footer {\n    display: none !important;\n}\n\n\/* Remove footer\/template spacing *\/\nbody.page-id-14 .wp-site-blocks {\n    margin-bottom: 0 !important;\n    padding-bottom: 0 !important;\n    gap: 0 !important;\n}\n\n\/* Make sure nothing follows our hero *\/\nbody.page-id-14 main {\n    margin-bottom: 0 !important;\n    padding-bottom: 0 !important;\n}\n\/* =========================================\n   REMOVE EMPTY WP FOOTER AREA COMPLETELY\n   ========================================= *\/\n\nbody.page-id-14 footer,\nbody.page-id-14 footer.wp-block-template-part,\nbody.page-id-14 .wp-site-blocks > footer,\nbody.page-id-14 .wp-block-template-part:has(footer) {\n    display: none !important;\n    height: 0 !important;\n    min-height: 0 !important;\n    margin: 0 !important;\n    padding: 0 !important;\n}\n\n\/* Remove theme spacing after page content *\/\nbody.page-id-14 main,\nbody.page-id-14 .wp-block-post-content,\nbody.page-id-14 .entry-content,\nbody.page-id-14 .wp-site-blocks {\n    margin-bottom: 0 !important;\n    padding-bottom: 0 !important;\n}\n\n\/* Prevent WP block layout from inserting vertical gaps *\/\nbody.page-id-14 .wp-site-blocks {\n    gap: 0 !important;\n}\n\n\/* Our hero is the entire homepage *\/\nbody.page-id-14 .dn-hero {\n    margin-bottom: 0 !important;\n}\n\/* DEVICE NINJA \u2014 force entire page background dark *\/\n\nhtml,\nbody.page-id-14,\nbody.page-id-14 .wp-site-blocks,\nbody.page-id-14 main {\n    background: #050713 !important;\n}\n\n\/* Remove all spacing after our hero *\/\nbody.page-id-14 .dn-hero {\n    margin-bottom: 0 !important;\n}\n\n\/* Any template parts remaining after main *\/\nbody.page-id-14 main ~ * {\n    display: none !important;\n}\n\/* Hide WordPress theme footer *\/\nfooter.wp-block-template-part,\n.wp-site-blocks > footer {\n    display: none !important;\n    margin: 0 !important;\n    padding: 0 !important;\n}\n\/* REMOVE WORDPRESS THEME FOOTER *\/\nbody.page-id-14 footer.wp-block-template-part {\n    display: none !important;\n}\n<\/style>\n\n<section class=\"dn-hero\">\n\n    <!-- HEADER -->\n    <header class=\"dn-header\">\n\n        <a class=\"dn-logo\" href=\"\/\">\n            <img decoding=\"async\" src=\"https:\/\/device.ninja\/wp-content\/uploads\/2026\/10\/DN-Katana-Device-Ninja-Logo.png\" alt=\"Device Ninja\">\n        <\/a>\n\n        <nav class=\"dn-nav\">\n            <a href=\"#\" class=\"active\">Protect<\/a>\n            <a href=\"#\">Personalize<\/a>\n            <a href=\"#\">Care<\/a>\n        <\/nav>\n\n    <\/header>\n\n\n    <!-- HERO -->\n    <div class=\"dn-hero-inner\">\n\n        <!-- PRODUCT VISUAL -->\n        <div class=\"dn-product\">\n            <img decoding=\"async\" src=\"https:\/\/device.ninja\/wp-content\/uploads\/2026\/10\/Neon-Floating-Screen-Protector-Phone.png\" alt=\"Device Ninja screen protection\">\n        <\/div>\n\n\n        <!-- COPY -->\n        <div class=\"dn-content\">\n\n            <h1 class=\"dn-title\">\n                <span>Invisible Protection.<\/span>\n                <span class=\"dn-gradient-text\">\n                    Unstoppable Clarity.\n                <\/span>\n            <\/h1>\n\n            <p class=\"dn-description\">\n                Premium screen protection,<br>\n                professionally installed at your doorstep.\n            <\/p>\n\n            <a class=\"dn-cta\" href=\"mailto:gaurav@ifixedit.net?subject=Device%20Ninja%20Enquiry\">\n                GET STARTED\n                <span class=\"dn-arrow\">\u2192<\/span>\n            <\/a>\n\n        <\/div>\n\n    <\/div>\n\n<\/section>\n","protected":false},"excerpt":{"rendered":"<p>Protect Personalize Care Invisible Protection. Unstoppable Clarity. Premium screen protection, professionally installed at your doorstep. GET STARTED \u2192<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"blank","meta":{"footnotes":""},"class_list":["post-14","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/device.ninja\/index.php?rest_route=\/wp\/v2\/pages\/14","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/device.ninja\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/device.ninja\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/device.ninja\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/device.ninja\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=14"}],"version-history":[{"count":16,"href":"https:\/\/device.ninja\/index.php?rest_route=\/wp\/v2\/pages\/14\/revisions"}],"predecessor-version":[{"id":43,"href":"https:\/\/device.ninja\/index.php?rest_route=\/wp\/v2\/pages\/14\/revisions\/43"}],"wp:attachment":[{"href":"https:\/\/device.ninja\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=14"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}