card bubble + etiquette

{"archived":0,"globalCss":null,"mainStage":0,"name":"Bank one FR","stages":[{"__typename":"ScenarioStages","customScript":"","displayTimeOnlyUntilClick":null,"formatContainer":{"__typename":"ScenarioStagesFormatContainer","closeButtonStyle":{"position":"absolute","right":"4px","top":"4px"},"coverStyle":{"display":"none"},"iframeStyle":{},"wrapperClose":{"right":"-100%","transition":"right .3s linear"},"wrapperHidden":{"height":"170px","width":"450px","right":"-100%","bottom":"6vh","overflow":"hidden","box-shadow":" rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;"},"wrapperOpen":{"right":"0vw","transition":"all .5s ease","box-shadow":" rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;"}},"htmlCloseButton":"<style>\n .lines{\n position: absolute;\n display:flex;\n justify-content:center;\n align-items:center;\n top: 0;\n right: 0;\n width: 40px;\n height: 40px;\n cursor: pointer;\n background-color: transparent;\n border-radius: 100px;\n }\n .line{\n position: absolute;\n background-color: black;\n width: 20px;\n height: 2px;\n transition: All ease .3s;\n border-radius: 100px;\n }\n \n .line1{\n transform: rotate(45deg);\n }\n .line2{\n transform: rotate(-45deg);\n }\n \n \n @media only screen and (max-width: 600px) {\n .perfmaker-sidebar-wrapper {\n width: 90% !important;\n height: 20% !important;\n bottom: 10vh !important;\n top: unset !important;\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>@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');\n \n @keyframes slide-left {\n 0% {\n transform: translateX(100%);\n \t\t\n }\n 100% {\n transform: translateX(0px);\n }\n}\n @keyframes slide-bottom {\n 0% {\n bottom:-100%;\n \t\topacity:.2\n }\n 100% {\n \tbottom:-15px;\n \t\topacity:1\n }\n}\n @keyframes opacity {\n 0% {\n \n \t\topacity:0;\n }\n 100% {\n \t\n \t\topacity:1;\n }\n}\n .sc-hMqMXs{\n \toverflow:hidden;\n } \n .App>div {\n height: 100vh;\n overflow: hidden;\n}\n .pm-root{\n animation: slide-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;\n display: flex;\n align-items: center;\n justify-content:space-between;\n \t\talign-self:flex-end;\n position:relative;\n flex-direction: row;\n height: 100%;\n background: #fff;\n font-family: 'Roboto Condensed', sans-serif;\n\toverflow:hidden;\n\n }\n .pm-tag{\n \tbackground-color:#cc2a2e;\n color:white;\n writing-mode: tb-rl;\n transform: rotate(-180deg);\n\tmargin:0;\n width:25px;\n padding-top:40px;\n height:100%;\n text-align:left;\n font-family: 'Roboto Condensed', sans-serif;\n font-weight:700;\n display:flex;\n justify-content:flex-start;\n align-items:center;\n cursor:pointer;\n }\n .main-container{\n \twidth:85%;\n overflow:hidden;\n }\n .pm-img{\n \theight:105vh;\n position:absolute;\n bottom:-15px;\n left:6%;\n animation: slide-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;\n animation-delay:.2s;\n }\n .pm-title{\n \tmargin-left:20%;\n text-align:center;\n font-family: 'Roboto Condensed', sans-serif;\n color:#cc2a2e;\n font-weight:600;\n margin-top:0;\n font-size:calc(11px + 2vw);\n animation: opacity 1.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;\n \tanimation-delay:.5s;\n }\n .pm-title span{\n \tcolor:#6c757d;\n }\n .bottom-btn{\n \tbackground-color:#cc2a2e;\n color:white;\n margin-left:33%;\n\n padding:5vh 5vw;\n cursor:pointer;\n animation: opacity 1.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;\n \tanimation-delay:.8s;\n transition:all ease .3s;\n border:1px solid #cc2a2e;\n }\n .bottom-btn:hover{\n \tbackground-color:white;\n color:#cc2a2e;\n }\n \n \n @media \n only screen and (max-width: 600px) {\n .pm-tag{\n \tpadding-top:25px;\n }\n .bottom-btn{\n \tfont-size:7vh;\n }\n .pm-title{\n \tfont-size:11vh;\n }\n }\n \n</style>\n\n<div class=\"pm-root\">\n <p class=\"pm-tag\">LIVRE BLANC</p>\n <div class=\"main-container\">\n <img class=\"pm-img\" src=\"https://img.perfmaker.net/875/1679397573_BankonePerfmakeFR_2-removebg-preview%20(1).png\">\n <p class=\"pm-title\">SOUHAITEZ-VOUS<br> TOUT SAVOIR<br><span>SUR LES PRÊTS IMMOBILIERS&nbsp;?</span></p>\n <button class=\"perfmaker-action bottom-btn\" data-onclick=\"HIDE_SIDEBAR\" data-url=\"https://bit.ly/3YVLRFm\">LISEZ NOTRE LIVRE BLANC </button>\n </div>\n</div>","name":"Scène open","notBlocking":null},{"__typename":"ScenarioStages","customScript":"","displayTimeOnlyUntilClick":null,"formatContainer":{"__typename":"ScenarioStagesFormatContainer","closeButtonStyle":{"position":"absolute","right":"-7px","top":"0px"},"coverStyle":{"display":"none"},"iframeStyle":{},"wrapperClose":{"right":"-100%","transition":"right .3s linear"},"wrapperHidden":{"height":"170px","width":"450px","right":"-100%","bottom":"6vh","overflow":"hidden"},"wrapperOpen":{"right":"0vw","transition":"all .5s ease"}},"htmlCloseButton":"<style>\n .lines{\n position: absolute;\n display:flex;\n justify-content:center;\n align-items:center;\n top: 0;\n right: 0;\n width: 40px;\n height: 40px;\n cursor: pointer;\n background-color: transparent;\n border-radius: 100px;\n }\n .line{\n position: absolute;\n background-color: white;\n width: 14px;\n height: 2px;\n transition: All ease .3s;\n border-radius: 100px;\n }\n \n .line1{\n transform: rotate(45deg);\n }\n .line2{\n transform: rotate(-45deg);\n }\n \n @media only screen and (max-width: 600px) {\n .perfmaker-sidebar-wrapper {\n \t\twidth: 90% !important;\n height: 20% !important;\n bottom: 10vh !important;\n top: unset !important;\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>@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');\n \n @keyframes slide-left {\n 0% {\n transform: translateX(0%);\n }\n 100% {\n transform: translateX(calc(100% - 25px));\n }\n}\n .sc-hMqMXs{\n \toverflow:hidden;\n } \n .App>div {\n height: 100vh;\n overflow: hidden;\n}\n .pm-root{\n animation: slide-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;\n display: flex;\n align-items: center;\n justify-content:space-between;\n flex-direction: row;\n height: 100%;\n background: #fff;\n\n }\n .pm-tag{\n \tbackground-color:#cc2a2e;\n color:white;\n writing-mode: tb-rl;\n transform: rotate(-180deg);\n\tmargin:0;\n width:25px;\n height:100%;\n padding-top:40px;\n font-family: 'Roboto Condensed', sans-serif;\n font-weight:700;\n display:flex;\n justify-content:flex-start;\n align-items:center;\n cursor:pointer;\n }\n .main-container{\n \twidth:85%;\n overflow:hidden;\n }\n .pm-img{\n \theight:105vh;\n position:absolute;\n bottom:-15px;\n left:6%;\n animation: slide-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;\n animation-delay:.2s;\n }\n .pm-title{\n \tmargin-left:20%;\n text-align:center;\n font-family: 'Roboto Condensed', sans-serif;\n color:#cc2a2e;\n font-weight:600;\n margin-top:0;\n font-size:calc(11px + 2vw);\n animation: opacity 1.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;\n \tanimation-delay:.5s;\n }\n .pm-title span{\n \tcolor:#6c757d;\n }\n .bottom-btn{\n \tbackground-color:#cc2a2e;\n color:white;\n margin-left:33%;\n border:none;\n padding:5vh 5vw;\n cursor:pointer;\n animation: opacity 1.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;\n \tanimation-delay:.8s;\n }\n \n \n @media only screen and (max-width: 600px) {\n .pm-tag{\n \tpadding-top:25px;\n }\n }\n \n</style>\n\n<div class=\"pm-root\">\n <p class=\"pm-tag perfmaker-action\" data-onclick=\"NEXT_STAGE\" data-next=\"0\">LIVRE BLANC</p>\n <div class=\"main-container\">\n <img class=\"pm-img\" src=\"https://img.perfmaker.net/875/1679397573_BankonePerfmakeFR_2-removebg-preview%20(1).png\">\n <p class=\"pm-title\">SOUHAITEZ-VOUS<br> TOUT SAVOIR<br><span>SUR LES PRÊTS IMMOBILIERS&nbsp;?</span></p>\n <button class=\"perfmaker-action bottom-btn\" data-onclick=\"HIDE_SIDEBAR\" data-url=\"\">LISEZ NOTRE LIVRE BLANC </button>\n </div>\n</div>","name":"Scène close ","notBlocking":null}],"transitions":[[{"__typename":"ScenarioTransitions","actionType":"CLOSE_BUTTON_TRANSITION","closeBefore":false,"data":null,"nextStage":1}],[{"__typename":"ScenarioTransitions","actionType":"TRANSITION_FROM_PANEL","closeBefore":false,"data":null,"nextStage":0}]]}