{"archived":0,"globalCss":null,"mainStage":0,"name":"Newsletter | Pro","stages":[{"__typename":"ScenarioStages","customScript":"","displayTimeOnlyUntilClick":false,"formatContainer":{"__typename":"ScenarioStagesFormatContainer","closeButtonStyle":{"position":"absolute","top":"-3px","right":"0px"},"coverStyle":{"background-color":"black","opacity":"0.6","transition":"opacity .5s"},"iframeStyle":{},"wrapperClose":{"bottom":"-100%","transition":"bottom ease .5s"},"wrapperHidden":{"height":"420px","width":"690px","right":"50%","bottom":"-100%","transform":"translate(50%, 50%)","overflow":"hidden !important"},"wrapperOpen":{"bottom":"50%","transition":"bottom ease .5s"}},"htmlCloseButton":"\n\n<style>\n\n .lines{\n position: absolute;\n display:flex;\n justify-content:center;\n align-items:center;\n top: 1vh;\n right: 10px;\n width: 30px;\n height: 30px;\n cursor: pointer;\n background:transparent;\n border-radius:30px;\n }\n .line{\n position: absolute;\n background:white;\n width: 20px;\n height: 2px;\n border-radius:100px;\n transition: All ease .3s;\n }\n \n .line1{\n transform: rotate(45deg);\n }\n .line2{\n transform: rotate(-45deg);\n }\n @media only screen and (max-width: 650px) {\n \t.perfmaker-sidebar-wrapper {\n height: 85% !important;\n width: 90% !important;\n \t}\n } \n\n</style>\n\n<div class=\"lines perfmaker-close-cross\">\n <div class=\"line1 line\"></div>\n <div class=\"line2 line\"></div>\n</div>","htmlContent":"<style>\n@font-face {\n font-family: \"Normartive\";\n src: url(\"https://img.perfmaker.net/1134/1661951939_NormativePro-Medium.woff\") format(\"woff\");\n} \n \n \n .pm-root{\n height: 90%;\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n \tbackground-color:white;\n }\n \n .container {\n width:100%;\n }\n \n .pm-header{\n width: 100%;\n height: 10vh;\n background-color: #004F9F;\n background-image: url(\"https://img.perfmaker.net/1134/1661951220_logo%20(2).svg\");\n background-size: 15%;\n background-position: center;\n background-repeat: no-repeat;\n }\n .pm-left-container{\n width: 50%;\n height: 100%;\n background-image: url(\"https://img.perfmaker.net/1134/1665562078_PRO.jpg\");\n background-size: cover;\n background-position: left 30%;\n background-repeat: no-repeat;\n }\n .pm-right-container{\n height: 100%;\n width: 50%;\n display: flex;\n flex-direction: column;\n align-items: center;\n }\n .pm-logo{\n \t\theight: calc(35px + 10vh);\n margin-top: 5%;\n }\n .pm-title{\n font-family: 'Normartive';\n text-align: left;\n font-weight: 400;\n color: #004F9F;\n font-weight:bold;\n line-height: 1.2em;\n width: 87.5%;\n font-size: calc(12px + 2vh);\n \tmargin:1.5vh 0;\n text-transform:uppercase;\n }\n .pm-subtitle{\n font-family: \"Normartive\";\n text-align: left;\n font-weight: 300;\n color: black;\n line-height: 1.5em;\n width: 87.5%;\n font-size: calc(12px + 1vh);\n \tmargin:2vh 0;\n }\n .pm-subtitle span{\n \t\tfont-weight: 600;\n }\n .bottom-btn{\n \n \twidth:70%;\n border:none;\n background-color:#004F9F;\n border-radius:4px;\n color:white;\n text-transform:uppercase;\n font-family: \"Normartive\";\n font-size:12px;\n padding:4vh 0;\n margin:2.5vh auto;\n cursor:pointer;\n text-align:center;\n display:block\n }\n \n \n .perfmaker-form {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n width:100%;\n margin-top:2vh;\n }\n .pm-input{\n \twidth:80%;\n height:calc(19px + 5vh);\n\tborder:1px solid #DEDEDE;\n text-align:left;\n outline:none;\n padding-left:3%;\n color:black;\n font-family: \"Normartive\";\n margin-bottom:2vh;\n }\n .input-bloc{\n \tdisplay:flex;\n align-items:center;\n justify-content:space-evenly;\n flex-direction: column;\n width:100%;\n position:relative;\n\n }\n ::placeholder{\n \tfont-family: 'Normartive', sans-serif;\n text-align:left;\n \tcolor:#AEADAD;\n font-size: calc(7px + 1vw);\n \tfont-weight:100;\n }\n .optin{\n \twidth:75%;\n }\n\n .formfield-checkbox{\n \twidth:100%;\n font-size: calc(6px + .5vh);\n\n }\n .pm-checkbox{\n \tcursor:pointer;\n }\n p {\n margin:0;\n padding:0\n \n }\n \n .succes-btn{\n \twidth:70%;\n border:none;\n background-color:#004F9F;\n border-radius:4px;\n color:white;\n text-transform:uppercase;\n font-family: \"Normartive\";\n font-size:12px;\n padding:4vh 0;\n margin:2.5vh auto;\n cursor:pointer;\n text-align:center;\n display:block\n }\n \n .perfmaker-form-success {\n font-family: 'Normartive', sans-serif;\n color: black;\n width: 90%;\n text-align: center;\n padding-top: 11vh;\n}\n .round{\n \tdisplay: flex;\n align-items: center;\n justify-content: center;\n margin-top: 2vh;\n width: 80%;\n margin-left: 10%;\n }\n .conditions{\n \tcolor:black;\n font-family: 'Normartive', sans-serif;\n text-align:left;\n }\n @media only screen and (max-width: 650px) {\n .pm-root{\n \tflex-direction:column;\n }\n .pm-left-container{\n \twidth:100%;\n \theight:32%;\n }\n .pm-right-container{\n \twidth:100%;\n \theight:68%;\n }\n .pm-logo {\n height: 15%;\n margin-top: 5%;\n}\n .pm-title {\n font-family: 'Normartive', sans-serif;\n text-align: left;\n font-weight: 400;\n line-height: 1.4em;\n width: 87.5%;\n font-size: calc(6px + 2.5vh);\n margin: 3vh 0;\n}\n .pm-subtitle {\n font-family: 'Normartive', sans-serif;\n text-align: left;\n font-weight: 300;\n color: black;\n line-height: 1.5em;\n width: 87.5%;\n font-size: calc(7px + 1vh);\n margin: 1vh 0;\n}\n .pm-input{\n \theight:calc(15px + 3vh);\n }\n }\n \n</style>\n\n <div class=\"pm-header\"></div>\n\n<div class=\"pm-root\">\n <div class=\"pm-left-container\"></div>\n <div class=\"pm-right-container\">\n\n <form class=\"perfmaker-form\" data-onsubmit-action=\"FORM\">\n \n <h1 class=\"pm-title\">Inscrivez-vous à notre Newsletter spéciale Professionnelle !</h1>\n <p class=\"pm-subtitle\">Et soyez les premiers informés sur les nouveautés et promotions !</p>\n \n \t\t\t\n\t\t\n<div class=\"input-bloc\">\n <input id=\"prenom\"\n type=\"text\"\n name=\"name\"\n placeholder=\"Votre prénom\"\n class=\"perfmaker-form-field pm-input\"\n data-type=\"name\"\n data-required=\"true\"\n data-error-msg=\"<br/><span style='color:red;font-size:calc(6px + 0.8vh); position:absolute; bottom:2%; left:7%;'>*Merci de remplir avec prénom</span>\" />\n <input id=\"email\"\n type=\"text\"\n name=\"email\"\n placeholder=\"Votre adresse e-mail\"\n class=\"perfmaker-form-field pm-input\"\n data-type=\"email\"\n data-required=\"true\"\n data-error-msg=\"<br/><span style='color:red;font-size:calc(6px + 0.8vh); position:absolute; bottom:2%; left:7%;'>*Votre adresse mail n'est pas valide</span>\" />\n\n \n \n \n </div>\n <div class=\"formfield-checkbox\">\n <div class=\"round\">\n <input \n type=\"checkbox\"\n id=\"optin\"\n name=\"optin\"\n class=\"perfmaker-form-field pm-checkbox\"\n data-required=\"true\"\n data-error-msg=\"<br/><span style='color:red;font-size:calc(6px + 0.8vh); position:absolute; bottom:2%; right:2%;'>*Champs requis</span>\"\n \t\t\t\tid=\"optin\" /><span class=\"conditions\">J’accepte de recevoir les communications commerciales de TopBiz</span>\n <label for=\"optin\"></label>\n \n </div>\n \n</div>\n <button type=\"submit\" value=\"Submit\" class=\"bottom-btn perfmaker-action\">\n Je m'inscris\n </button> \n </form>\n <div class=\"perfmaker-form-success succes\">\n <p class=\"merci2\">Merci ! Vous êtes à présent abonné(e) à la newsletter de TopBiz</p>\n \n \n <button class=\"perfmaker-action succes-btn\" data-onclick=\"CLOSE_BUTTON_CLICK\">\n C'est noté !\n </button>\n </div>\n </div>\n \n </div>","name":"Scène 0 ","notBlocking":true}],"transitions":[[{"__typename":"ScenarioTransitions","actionType":null,"closeBefore":false,"data":null,"nextStage":null}]]}
