{"id":1488,"date":"2026-04-14T16:01:08","date_gmt":"2026-04-14T16:01:08","guid":{"rendered":"https:\/\/njmodels.com\/?page_id=1488"},"modified":"2026-04-28T08:42:16","modified_gmt":"2026-04-28T08:42:16","slug":"creators","status":"publish","type":"page","link":"https:\/\/njmodels.com\/it\/creators\/","title":{"rendered":"Creators"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1488\" class=\"elementor elementor-1488\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b04706d e-con-full e-flex e-con e-parent\" data-id=\"b04706d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-111a30d hide-in-iframe elementor-widget elementor-widget-heading\" data-id=\"111a30d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">CREATORS<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f845097 elementor-widget elementor-widget-text-editor\" data-id=\"f845097\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<blockquote data-path-to-node=\"3\"><p data-path-to-node=\"3,0\"><b data-path-to-node=\"3,0\" data-index-in-node=\"0\">Authenticity. Creativity. Passion.<\/b> Connecting ideas, stories, and brands.<\/p><p data-path-to-node=\"3,1\">We forge dynamic, lasting, and ever-evolving partnerships. We give voice and visibility to<b data-path-to-node=\"3,1\" data-index-in-node=\"59\"> a new generation of creators.<\/b><\/p><\/blockquote><h3 data-path-to-node=\"4\">\u00a0<\/h3>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a4a1cbf elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"a4a1cbf\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n\/* NASCONDIAMO I CONTENITORI ALL'AVVIO *\/\r\nbody.loading-animations #njm-overlay-container,\r\nbody.loading-animations #njm-iframe-wrapper {\r\n    display: none !important;\r\n}\r\n\r\n\/* 1. ROW DEI TRIGGER *\/\r\n.njm-triggers-row {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    width: 100%;\r\n    max-width: 1200px;\r\n    margin: 0 auto;\r\n    padding: 2rem;\r\n}\r\n\r\n.njm-trigger-btn {\r\n    flex: 1; \r\n    font-family: 'Plus Jakarta Sans', sans-serif;\r\n    font-size: clamp(1.5rem, 3vw, 2rem);\r\n    font-weight: 500;\r\n    text-transform: uppercase;\r\n    color: #111;\r\n    letter-spacing: 0.05em;\r\n    cursor: pointer;\r\n    position: relative;\r\n    -webkit-user-select: none;\r\n    user-select: none;\r\n    -webkit-tap-highlight-color: transparent; \r\n    transition: opacity 0.3s ease;\r\n    text-decoration: none; \/* Importante per il link normale *\/\r\n}\r\n\r\n.njm-trigger-btn:nth-child(1) { text-align: left; }\r\n.njm-trigger-btn:nth-child(2) { text-align: center; }\r\n.njm-trigger-btn:nth-child(3) { text-align: right; }\r\n\r\n.njm-trigger-btn span {\r\n    position: relative;\r\n    display: inline-block;\r\n}\r\n\r\n.njm-trigger-btn:hover, .njm-trigger-btn:active { opacity: 0.7; }\r\n\r\n.njm-trigger-btn span::after {\r\n    content: '';\r\n    position: absolute;\r\n    bottom: -4px;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 2px;\r\n    background: currentColor;\r\n    transform: scaleX(0);\r\n    transform-origin: right;\r\n    transition: transform 0.4s ease;\r\n}\r\n.njm-trigger-btn:hover span::after {\r\n    transform: scaleX(1);\r\n    transform-origin: left;\r\n}\r\n\r\n\/* 2. IL CLONE VOLANTE *\/\r\n.njm-flying-clone {\r\n    position: fixed !important;\r\n    z-index: 10005 !important;\r\n    margin: 0 !important;\r\n    padding: 0 !important;\r\n    white-space: nowrap !important;\r\n    pointer-events: none;\r\n    transform-origin: center center;\r\n    -webkit-backface-visibility: hidden; \r\n    backface-visibility: hidden;\r\n}\r\n\r\n\/* 3. OVERLAY BIANCO *\/\r\n#njm-overlay-container {\r\n    position: fixed;\r\n    inset: 0;\r\n    background: #ffffff;\r\n    z-index: 10000;\r\n    pointer-events: none;\r\n    opacity: 0; \r\n    visibility: hidden; \r\n    transition: opacity 0.5s ease, visibility 0.5s ease;\r\n}\r\n#njm-overlay-container.active {\r\n    opacity: 1;\r\n    visibility: visible;\r\n    pointer-events: auto;\r\n}\r\n\r\n\/* 4. WRAPPER DEGLI IFRAME *\/\r\n#njm-iframe-wrapper {\r\n    position: fixed; \r\n    bottom: -100%; \r\n    left: 0;\r\n    width: 100vw;\r\n    height: 75dvh;\r\n    background: transparent;\r\n    transition: bottom 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);\r\n    z-index: 10002;\r\n    visibility: hidden;\r\n}\r\n#njm-iframe-wrapper.active {\r\n    bottom: 0;\r\n    visibility: visible;\r\n}\r\n\r\n#njm-iframe-wrapper iframe {\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    border: none;\r\n    opacity: 0;\r\n    visibility: hidden;\r\n    transition: opacity 0.4s ease, visibility 0.4s ease;\r\n}\r\n\r\n#njm-iframe-wrapper iframe.active-iframe {\r\n    opacity: 1;\r\n    visibility: visible;\r\n    z-index: 2;\r\n}\r\n\r\n\/* 5. TASTI EXTRA *\/\r\n.njm-action-btn {\r\n    position: fixed;\r\n    font-family: 'Plus Jakarta Sans', sans-serif;\r\n    color: #111;\r\n    z-index: 10010;\r\n    opacity: 0;\r\n    pointer-events: none;\r\n    transition: opacity 0.4s ease, transform 0.3s ease;\r\n    cursor: pointer;\r\n    -webkit-tap-highlight-color: transparent;\r\n    text-decoration: none;\r\n}\r\n\r\n#iframe-close { \r\n    top: 3dvh; \r\n    right: 3vw; \r\n    font-size: 2.5rem; \r\n    line-height: 1; \r\n}\r\n#iframe-close:hover { transform: scale(1.1); color: #111; }\r\n\r\n#iframe-home { \r\n    top: calc(3dvh + 10px); \r\n    left: 3vw; \r\n    font-size: 1.2rem; \r\n    text-transform: uppercase; \r\n    letter-spacing: 0.05em; \r\n    font-weight: 400;\r\n}\r\n#iframe-home:hover { opacity: 0.6; color: #111; transform: none; }\r\n\r\n#njm-overlay-container.active ~ .njm-action-btn { opacity: 1; pointer-events: auto; }\r\n\r\nbody.admin-bar #iframe-close { top: calc(3dvh + 32px); }\r\nbody.admin-bar #iframe-home { top: calc(3dvh + 42px); }\r\n\r\n@media (max-width: 768px) {\r\n    .njm-triggers-row { \r\n        flex-direction: row; \r\n        padding: 3rem 1rem; \r\n        gap: 0;\r\n    }\r\n    .njm-trigger-btn { font-size: clamp(0.85rem, 3.5vw, 1.2rem); }\r\n    #njm-iframe-wrapper { height: 85dvh; }\r\n    #iframe-close { top: 1.5rem; right: 1.5rem; font-size: 2rem;}\r\n    #iframe-home { top: 1.8rem; left: 1.5rem; font-size: 1.1rem;}\r\n}\r\n<\/style>\r\n\r\n<!-- \ud83d\udd35 HTML: ROW DEI TRIGGER -->\r\n<div class=\"njm-triggers-row\">\r\n    <!-- Services (Iframe) -->\r\n    <div class=\"njm-trigger-btn\" data-target=\"iframe-services\"><span>SERVICES<\/span><\/div>\r\n    \r\n    <!-- Roster (Link Normale). Trasformato in tag <a>. Usa un href relativo che TranslatePress capisce al volo. Rimosso data-target. -->\r\n    <a href=\"\/roster\/\" class=\"njm-trigger-btn\"><span>ROSTER<\/span><\/a>\r\n    \r\n    <!-- Join Us (Iframe) -->\r\n    <div class=\"njm-trigger-btn\" data-target=\"iframe-join\"><span>JOIN US<\/span><\/div>\r\n<\/div>\r\n\r\n<div id=\"njm-overlay-container\"><\/div>\r\n<div id=\"njm-iframe-wrapper\">\r\n    <!-- Solo Services e Join Us sono stati mantenuti qui -->\r\n    <iframe data-src=\"\/services\/?iframe=true&notransitions=1\" id=\"iframe-services\"><\/iframe>\r\n    <iframe data-src=\"\/join-us\/?iframe=true&notransitions=1\" id=\"iframe-join\"><\/iframe>\r\n<\/div>\r\n\r\n<div class=\"njm-action-btn\" id=\"iframe-close\">\u00d7<\/div>\r\n<a href=\"\/\" class=\"njm-action-btn njm-back\" id=\"iframe-home\">Home<\/a>\r\n\r\n<!-- \ud83d\udd35 SCRIPT JS: ADATTATO PER PRE-CARICAMENTO VELOCE CON TRANSLATEPRESS -->\r\n<script>\r\ndocument.body.classList.remove('loading-animations');\r\n\r\ndocument.addEventListener('DOMContentLoaded', function() {\r\n    \r\n    \/\/ Seleziona solo i trigger che hanno un data-target (quindi esclude il link normale Roster)\r\n    const triggers = document.querySelectorAll('.njm-trigger-btn[data-target]');\r\n    const overlay = document.getElementById('njm-overlay-container');\r\n    const iframeWrapper = document.getElementById('njm-iframe-wrapper');\r\n    const allIframes = document.querySelectorAll('#njm-iframe-wrapper iframe');\r\n    const closeBtn = document.getElementById('iframe-close');\r\n    const homeBtn = document.getElementById('iframe-home');\r\n    \r\n    let activeTrigger = null;\r\n    let flyingClone = null;\r\n    let isPanelOpen = false;\r\n\r\n    \/\/ 1. Rileviamo la lingua corrente dall'URL\r\n    const currentPath = window.location.pathname;\r\n    let langPrefix = '';\r\n    const langMatch = currentPath.match(\/^\\\/([a-z]{2})\\\/\/i);\r\n    if (langMatch) {\r\n        langPrefix = '\/' + langMatch[1]; \r\n    }\r\n\r\n    \/\/ 2. PRE-CARICAMENTO SILENZIOSO per gli iframe rimanenti\r\n    setTimeout(() => {\r\n        allIframes.forEach(ifr => {\r\n            const baseSrc = ifr.getAttribute('data-src');\r\n            ifr.src = langPrefix + baseSrc + \"#TRPLINKPROCESSED\";\r\n        });\r\n    }, 500); \r\n\r\n    function apriPannello(btn) {\r\n        const targetId = btn.getAttribute('data-target');\r\n        const targetIframe = document.getElementById(targetId);\r\n        \r\n        allIframes.forEach(ifr => { ifr.classList.remove('active-iframe'); });\r\n        targetIframe.classList.add('active-iframe');\r\n\r\n        if (activeTrigger && activeTrigger !== btn) {\r\n            activeTrigger.style.opacity = '1';\r\n            if (flyingClone && flyingClone.parentNode) {\r\n                flyingClone.parentNode.removeChild(flyingClone);\r\n            }\r\n        }\r\n        \r\n        activeTrigger = btn;\r\n        isPanelOpen = true;\r\n\r\n        const innerSpan = btn.querySelector('span');\r\n        const rect = innerSpan.getBoundingClientRect();\r\n        const computedStyle = window.getComputedStyle(btn);\r\n        \r\n        flyingClone = document.createElement('div');\r\n        flyingClone.className = 'njm-flying-clone';\r\n        flyingClone.innerText = innerSpan.innerText;\r\n        \r\n        flyingClone.style.fontFamily = computedStyle.fontFamily;\r\n        flyingClone.style.fontSize = computedStyle.fontSize;\r\n        flyingClone.style.fontWeight = computedStyle.fontWeight;\r\n        flyingClone.style.letterSpacing = computedStyle.letterSpacing;\r\n        flyingClone.style.color = '#111'; \r\n        \r\n        flyingClone.style.top = `${rect.top}px`;\r\n        flyingClone.style.left = `${rect.left}px`;\r\n        flyingClone.style.width = `${rect.width}px`;\r\n        flyingClone.style.height = `${rect.height}px`;\r\n        \r\n        flyingClone.style.display = 'flex';\r\n        flyingClone.style.alignItems = 'center';\r\n        flyingClone.style.justifyContent = 'center';\r\n        \r\n        document.body.appendChild(flyingClone);\r\n        \r\n        btn.style.opacity = '0';\r\n        \r\n        const targetX = window.innerWidth \/ 2;\r\n        const targetY = window.innerHeight * 0.12;\r\n        \r\n        const startCenterX = rect.left + (rect.width \/ 2);\r\n        const startCenterY = rect.top + (rect.height \/ 2);\r\n        \r\n        const moveX = targetX - startCenterX;\r\n        const moveY = targetY - startCenterY;\r\n        \r\n        requestAnimationFrame(() => {\r\n            requestAnimationFrame(() => {\r\n                flyingClone.style.transition = 'transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1)';\r\n                const scaleFactor = window.innerWidth < 768 ? 1.2 : 1.4;\r\n                flyingClone.style.transform = `translate(${moveX}px, ${moveY}px) scale(${scaleFactor})`;\r\n            });\r\n        });\r\n\r\n        overlay.classList.add('active');\r\n        iframeWrapper.classList.add('active');\r\n        \r\n        document.body.style.overflow = 'hidden';\r\n        document.body.style.position = 'fixed';\r\n        document.body.style.width = '100%';\r\n    }\r\n\r\n    triggers.forEach(btn => {\r\n        const startEvent = ('ontouchstart' in window) ? 'touchstart' : 'click';\r\n        btn.addEventListener(startEvent, function(e) {\r\n            e.preventDefault();\r\n            apriPannello(btn);\r\n        });\r\n    });\r\n\r\n    function chiudiPannello() {\r\n        if (!isPanelOpen) return;\r\n        isPanelOpen = false;\r\n\r\n        iframeWrapper.classList.remove('active');\r\n        overlay.classList.remove('active');\r\n        \r\n        document.body.style.overflow = '';\r\n        document.body.style.position = '';\r\n        document.body.style.width = '';\r\n        \r\n        if(flyingClone && activeTrigger) {\r\n            const innerSpan = activeTrigger.querySelector('span');\r\n            const rect = innerSpan.getBoundingClientRect();\r\n            flyingClone.style.top = `${rect.top}px`;\r\n            flyingClone.style.left = `${rect.left}px`;\r\n            flyingClone.style.transform = 'translate(0px, 0px) scale(1)';\r\n            \r\n            setTimeout(() => { activeTrigger.style.opacity = '1'; }, 550); \r\n            \r\n            setTimeout(() => {\r\n                if(flyingClone && flyingClone.parentNode) {\r\n                    flyingClone.parentNode.removeChild(flyingClone);\r\n                }\r\n                flyingClone = null;\r\n                activeTrigger = null;\r\n            }, 600);\r\n        }\r\n    }\r\n\r\n    const endEvent = ('ontouchstart' in window) ? 'touchstart' : 'click';\r\n    \r\n    if(closeBtn) {\r\n        closeBtn.addEventListener(endEvent, function(e) {\r\n            e.preventDefault();\r\n            chiudiPannello();\r\n        });\r\n    }\r\n    \r\n    if(homeBtn) {\r\n        homeBtn.addEventListener(endEvent, function(e) {\r\n            e.preventDefault();\r\n            chiudiPannello();\r\n        });\r\n    }\r\n});\r\n<\/script>\t\t\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>CREATORS Authenticity. Creativity. Passion. Connecting ideas, stories, and brands. We forge dynamic, lasting, and ever-evolving partnerships. We give voice and visibility to a new generation of creators. \u00a0 SERVICES ROSTER JOIN US \u00d7 Home<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1488","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/njmodels.com\/it\/wp-json\/wp\/v2\/pages\/1488","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/njmodels.com\/it\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/njmodels.com\/it\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/njmodels.com\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/njmodels.com\/it\/wp-json\/wp\/v2\/comments?post=1488"}],"version-history":[{"count":49,"href":"https:\/\/njmodels.com\/it\/wp-json\/wp\/v2\/pages\/1488\/revisions"}],"predecessor-version":[{"id":1693,"href":"https:\/\/njmodels.com\/it\/wp-json\/wp\/v2\/pages\/1488\/revisions\/1693"}],"wp:attachment":[{"href":"https:\/\/njmodels.com\/it\/wp-json\/wp\/v2\/media?parent=1488"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}