@micromag/screen-urbania-article 0.3.423 → 0.3.424

package/assets/css/styles.css

@@ -1,2 +1,2 @@
 .micromag-screen-urbania-article-urbania-base-article-container.micromag-screen-urbania-article-urbania-base-article-isVideo .micromag-screen-urbania-article-urbania-base-article-visual,.micromag-screen-urbania-article-urbania-base-article-content,.micromag-screen-urbania-article-urbania-base-article-empty,.micromag-screen-urbania-article-urbania-base-article-footerContainer,.micromag-screen-urbania-article-urbania-base-article-video{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-urbania-article-urbania-base-article-container{height:100%;overflow:hidden;position:relative;width:100%}.micromag-screen-urbania-article-urbania-base-article-disabled.micromag-screen-urbania-article-urbania-base-article-container{overflow:hidden;pointer-events:none}.micromag-screen-urbania-article-urbania-base-article-hidden.micromag-screen-urbania-article-urbania-base-article-container{display:none;visibility:hidden}.micromag-screen-urbania-article-urbania-base-article-placeholder.micromag-screen-urbania-article-urbania-base-article-container .micromag-screen-urbania-article-urbania-base-article-content{padding:6px;position:relative}.micromag-screen-urbania-article-urbania-base-article-empty{border:2px dashed #343434;color:#343434;margin:5px auto}.micromag-screen-urbania-article-urbania-base-article-container.micromag-screen-urbania-article-urbania-base-article-isPlaceholder .micromag-screen-urbania-article-urbania-base-article-articleContent{background-color:transparent;background-color:#2b2b2b;height:35%;margin:5px auto;width:80%}.micromag-screen-urbania-article-urbania-base-article-container.micromag-screen-urbania-article-urbania-base-article-isPlaceholder .micromag-screen-urbania-article-urbania-base-article-visual{-ms-flex-positive:1;flex-grow:1;height:50%;margin:5px auto;position:relative;width:80%}.micromag-screen-urbania-article-urbania-base-article-container.micromag-screen-urbania-article-urbania-base-article-isVideo .micromag-screen-urbania-article-urbania-base-article-articleContent{-ms-flex-positive:1;-ms-flex-pack:end;background-color:transparent;flex-grow:1;justify-content:flex-end;margin-bottom:70px;position:relative}.micromag-screen-urbania-article-urbania-base-article-container.micromag-screen-urbania-article-urbania-base-article-isVideo .micromag-screen-urbania-article-urbania-base-article-articleContent .micromag-screen-urbania-article-urbania-base-article-description,.micromag-screen-urbania-article-urbania-base-article-container.micromag-screen-urbania-article-urbania-base-article-isVideo .micromag-screen-urbania-article-urbania-base-article-articleContent .micromag-screen-urbania-article-urbania-base-article-title{color:#fff;text-shadow:0 0 6px #222}.micromag-screen-urbania-article-urbania-base-article-container.micromag-screen-urbania-article-urbania-base-article-isVideo .micromag-screen-urbania-article-urbania-base-article-articleContent .micromag-screen-urbania-article-urbania-base-article-sponsors{margin-top:0}.micromag-screen-urbania-article-urbania-base-article-container.micromag-screen-urbania-article-urbania-base-article-isVideo .micromag-screen-urbania-article-urbania-base-article-callToAction{position:absolute}.micromag-screen-urbania-article-urbania-base-article-placeholder{background-color:#6c6c6c}.micromag-screen-urbania-article-urbania-base-article-emptyContainer{height:0;margin-bottom:10px;padding-bottom:20%;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);width:100%}.micromag-screen-urbania-article-urbania-base-article-emptyContainer.micromag-screen-urbania-article-urbania-base-article-small{padding-bottom:15%}.micromag-screen-urbania-article-urbania-base-article-empty{margin:0}.micromag-screen-urbania-article-urbania-base-article-background{z-index:1}.micromag-screen-urbania-article-urbania-base-article-content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:100%;width:100%;z-index:2}.micromag-screen-urbania-article-urbania-base-article-articleContent{-ms-flex-align:center;-ms-flex-pack:center;align-items:center;color:#222;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;justify-content:center;text-align:center;width:100%;z-index:3}.micromag-screen-urbania-article-urbania-base-article-articleContent .micromag-screen-urbania-article-urbania-base-article-authors,.micromag-screen-urbania-article-urbania-base-article-articleContent .micromag-screen-urbania-article-urbania-base-article-description,.micromag-screen-urbania-article-urbania-base-article-articleContent .micromag-screen-urbania-article-urbania-base-article-overTitle,.micromag-screen-urbania-article-urbania-base-article-articleContent .micromag-screen-urbania-article-urbania-base-article-title{padding:3px 20px}.micromag-screen-urbania-article-urbania-base-article-articleContent .micromag-screen-urbania-article-urbania-base-article-overTitle{border-bottom:1px solid;font-family:Agrandir Tight;font-size:10px;font-weight:700;margin-bottom:10px;padding:30px 0 2px;text-transform:uppercase}.micromag-screen-urbania-article-urbania-base-article-articleContent .micromag-screen-urbania-article-urbania-base-article-title{font-family:GarageGothic-Bold;font-size:36px;line-height:.88;text-transform:uppercase}.micromag-screen-urbania-article-urbania-base-article-articleContent .micromag-screen-urbania-article-urbania-base-article-description{padding:6px 20px 12px}.micromag-screen-urbania-article-urbania-base-article-articleContent .micromag-screen-urbania-article-urbania-base-article-lede{font-family:Agrandir;line-height:1.1}.micromag-screen-urbania-article-urbania-base-article-articleContent .micromag-screen-urbania-article-urbania-base-article-lede p{font-weight:inherit;margin:0}.micromag-screen-urbania-article-urbania-base-article-articleContent .micromag-screen-urbania-article-urbania-base-article-authors{margin-bottom:6px}.micromag-screen-urbania-article-urbania-base-article-articleContent .micromag-screen-urbania-article-urbania-base-article-authors.micromag-screen-urbania-article-urbania-base-article-isAboveDescription{margin-bottom:0}.micromag-screen-urbania-article-urbania-base-article-articleContent .micromag-screen-urbania-article-urbania-base-article-sponsors{background-color:#ff0;color:#222;display:inline-block;letter-spacing:.04em;line-height:.7;margin-top:auto;padding:2px 10px 4px;width:100%}.micromag-screen-urbania-article-urbania-base-article-articleContent .micromag-screen-urbania-article-urbania-base-article-sponsors p,.micromag-screen-urbania-article-urbania-base-article-articleContent .micromag-screen-urbania-article-urbania-base-article-sponsors span{line-height:.7}.micromag-screen-urbania-article-urbania-base-article-articleContent .micromag-screen-urbania-article-urbania-base-article-sponsor{display:inline;font-family:Agrandir;font-size:9px;font-weight:400;line-height:.7;text-transform:uppercase}.micromag-screen-urbania-article-urbania-base-article-articleContent.micromag-screen-urbania-article-urbania-base-article-quatre95{background-color:#fff}.micromag-screen-urbania-article-urbania-base-article-articleContent.micromag-screen-urbania-article-urbania-base-article-quatre95 .micromag-screen-urbania-article-urbania-base-article-author{color:#5e79ff}.micromag-screen-urbania-article-urbania-base-article-articleContent.micromag-screen-urbania-article-urbania-base-article-quatre95 .micromag-screen-urbania-article-urbania-base-article-sponsors,.micromag-screen-urbania-article-urbania-base-article-articleContent.micromag-screen-urbania-article-urbania-base-article-urbania{background-color:#ff0;color:#222}.micromag-screen-urbania-article-urbania-base-article-articleContent.micromag-screen-urbania-article-urbania-base-article-urbania .micromag-screen-urbania-article-urbania-base-article-author{color:#222}.micromag-screen-urbania-article-urbania-base-article-articleContent.micromag-screen-urbania-article-urbania-base-article-urbania .micromag-screen-urbania-article-urbania-base-article-sponsors{background-color:#222;color:#ff0}.micromag-screen-urbania-article-urbania-base-article-articleContent.micromag-screen-urbania-article-urbania-base-article-dehors{background-color:#00c693;color:#ffeada}.micromag-screen-urbania-article-urbania-base-article-articleContent.micromag-screen-urbania-article-urbania-base-article-dehors .micromag-screen-urbania-article-urbania-base-article-author{color:#ffeada}.micromag-screen-urbania-article-urbania-base-article-articleContent.micromag-screen-urbania-article-urbania-base-article-universities{background-color:#fff;color:#f33}.micromag-screen-urbania-article-urbania-base-article-articleContent.micromag-screen-urbania-article-urbania-base-article-universities .micromag-screen-urbania-article-urbania-base-article-overTitle{color:#222}.micromag-screen-urbania-article-urbania-base-article-visual{height:100%;z-index:2}.micromag-screen-urbania-article-urbania-base-article-footerContainer{z-index:3}.micromag-screen-urbania-article-urbania-base-article-footer{bottom:0;left:0;padding-bottom:5px;position:absolute;right:0;-webkit-transform:translateZ(0);transform:translateZ(0);vertical-align:middle;z-index:10}.micromag-screen-urbania-article-urbania-base-article-footer .micromag-screen-urbania-article-urbania-base-article-arrow{margin-bottom:5px;opacity:.95}.micromag-screen-urbania-article-urbania-base-article-footer .micromag-screen-urbania-article-urbania-base-article-icon{display:inline-block;margin-right:3px;margin-top:-3px;padding:2px}.micromag-screen-urbania-article-urbania-base-article-footer .micromag-screen-urbania-article-urbania-base-article-button{font-family:Agrandir;font-size:16px}.micromag-screen-urbania-article-urbania-base-article-mediaControls{padding:10px 20px 20px}.micromag-screen-urbania-article-urbania-base-article-placeholder{display:block}.micromag-screen-urbania-article-urbania-base-article-header{left:0;position:absolute;top:0;width:100%;z-index:4}.micromag-screen-urbania-article-urbania-base-article-bottom{opacity:0;-webkit-transition:opacity .15s linear;-o-transition:opacity .15s linear;transition:opacity .15s linear}.micromag-screen-urbania-article-urbania-base-article-bottom.micromag-screen-urbania-article-urbania-base-article-visible{opacity:1}.micromag-screen-urbania-article-urbania-base-article-bottom.micromag-screen-urbania-article-urbania-base-article-withGradient{background:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,0)),to(rgba(0,0,0,.4)));background:-o-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.4));background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.4))}.micromag-screen-urbania-article-urbania-base-article-image{height:100%!important;position:relative!important;width:100%!important}.micromag-screen-urbania-article-urbania-base-article-isCurrent .micromag-screen-urbania-article-urbania-base-article-image{-webkit-animation:micromag-screen-urbania-article-urbania-base-article-slowZoom 15s ease-out 1 forwards;animation:micromag-screen-urbania-article-urbania-base-article-slowZoom 15s ease-out 1 forwards}.micromag-screen-urbania-article-urbania-base-article-img{height:100%!important;left:auto!important;-o-object-fit:cover;object-fit:cover;position:relative!important;top:auto!important;width:100%!important}@-webkit-keyframes micromag-screen-urbania-article-urbania-base-article-slowZoom{0%{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(1.2);transform:scale(1.2)}}@keyframes micromag-screen-urbania-article-urbania-base-article-slowZoom{0%{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(1.2);transform:scale(1.2)}}
-.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-iframe{scrollbar-width:none}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-iframe::-webkit-scrollbar{display:none}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-close,.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-interactiveZone{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;color:inherit;cursor:pointer;display:inline-block;font-family:inherit;padding:0;position:relative}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-content,.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-empty,.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-iframeContainer{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-urbania-article-urbania-base-article-card-container{height:100%;overflow:hidden;position:relative;width:100%}.micromag-screen-urbania-article-urbania-base-article-card-disabled.micromag-screen-urbania-article-urbania-base-article-card-container{overflow:hidden;pointer-events:none}.micromag-screen-urbania-article-urbania-base-article-card-hidden.micromag-screen-urbania-article-urbania-base-article-card-container{display:none;visibility:hidden}.micromag-screen-urbania-article-urbania-base-article-card-placeholder.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-content{padding:6px;position:relative}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-empty{border:2px dashed #343434;color:#343434;margin:5px auto}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-background{z-index:1}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:100%;width:100%;z-index:2}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-layout{-ms-flex-align:center;-ms-flex-pack:center;align-items:center;display:-ms-flexbox;display:flex;justify-content:center}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-text{font-family:Agrandir,sans-serif;font-size:1.65em;font-weight:700;padding:0 10px;text-align:center;text-shadow:0 4px 4px rgba(0,0,0,.35);width:100%}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-text p{font-weight:inherit;margin:0}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-iframeContainer{z-index:5}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-iframeContainer.micromag-screen-urbania-article-urbania-base-article-card-isPlaceholder{-ms-flex-item-align:center;align-self:center;background-color:#6c6c6c;border-top-left-radius:1em;border-top-right-radius:1em;height:45%;top:55%;width:95%}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-popupContainer{position:absolute;-webkit-transition:top .4s ease;-o-transition:top .4s ease;transition:top .4s ease}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-popupContainer.micromag-screen-urbania-article-urbania-base-article-card-pulse{-webkit-animation:micromag-screen-urbania-article-urbania-base-article-card-pulse 3s cubic-bezier(.68,-.6,.32,1.6) infinite alternate;animation:micromag-screen-urbania-article-urbania-base-article-card-pulse 3s cubic-bezier(.68,-.6,.32,1.6) infinite alternate;-webkit-animation-delay:1s;animation-delay:1s}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-interactiveZone{position:absolute}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-close{-webkit-animation:micromag-screen-urbania-article-urbania-base-article-card-popIn .2s cubic-bezier(.65,0,.35,1);animation:micromag-screen-urbania-article-urbania-base-article-card-popIn .2s cubic-bezier(.65,0,.35,1);color:#222;-webkit-filter:invert(100%);filter:invert(100%);position:absolute;right:10px;top:10px;z-index:6}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-closeIcon{height:1.5em;width:1.5em}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-iframe{border-top-left-radius:15px;border-top-right-radius:15px;bottom:0;-webkit-box-shadow:0 0 26px rgba(0,0,0,.35);box-shadow:0 0 26px rgba(0,0,0,.35);position:absolute;-webkit-transform:scaleX(.95);-ms-transform:scaleX(.95);transform:scaleX(.95);-webkit-transition:height .4s cubic-bezier(.5,0,.75,0),border-radius .4s cubic-bezier(.5,0,.75,0),-webkit-transform .4s cubic-bezier(.5,0,.75,0);transition:height .4s cubic-bezier(.5,0,.75,0),border-radius .4s cubic-bezier(.5,0,.75,0),-webkit-transform .4s cubic-bezier(.5,0,.75,0);-o-transition:height .4s cubic-bezier(.5,0,.75,0),transform .4s cubic-bezier(.5,0,.75,0),border-radius .4s cubic-bezier(.5,0,.75,0);transition:height .4s cubic-bezier(.5,0,.75,0),transform .4s cubic-bezier(.5,0,.75,0),border-radius .4s cubic-bezier(.5,0,.75,0);transition:height .4s cubic-bezier(.5,0,.75,0),transform .4s cubic-bezier(.5,0,.75,0),border-radius .4s cubic-bezier(.5,0,.75,0),-webkit-transform .4s cubic-bezier(.5,0,.75,0)}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-iframe.micromag-screen-urbania-article-urbania-base-article-card-opened{border-top-left-radius:0;border-top-right-radius:0;-webkit-transform:scaleX(1);-ms-transform:scaleX(1);transform:scaleX(1)}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-empty{border-top-left-radius:2em;border-top-right-radius:2em;height:45%;margin:0;top:55%}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-header{left:0;position:absolute;top:0;width:100%;z-index:4}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-iframeBlocker{bottom:0;display:none;opacity:.5;position:absolute;z-index:4}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-iframeBlocker.micromag-screen-urbania-article-urbania-base-article-card-active{display:block}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-placeholder{background-color:#6c6c6c;border:1px solid #f3f;height:50px;width:50px}@-webkit-keyframes micromag-screen-urbania-article-urbania-base-article-card-popIn{0%{-webkit-transform:scale(.8);transform:scale(.8)}to{-webkit-transform:scale(1);transform:scale(1)}}@keyframes micromag-screen-urbania-article-urbania-base-article-card-popIn{0%{-webkit-transform:scale(.8);transform:scale(.8)}to{-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes micromag-screen-urbania-article-urbania-base-article-card-pulse{0%{-webkit-transform:translateY(0);transform:translateY(0)}50%{-webkit-transform:translateY(2%);transform:translateY(2%)}to{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes micromag-screen-urbania-article-urbania-base-article-card-pulse{0%{-webkit-transform:translateY(0);transform:translateY(0)}50%{-webkit-transform:translateY(2%);transform:translateY(2%)}to{-webkit-transform:translateY(0);transform:translateY(0)}}
+.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-iframe{scrollbar-width:none}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-iframe::-webkit-scrollbar{display:none}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-close,.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-interactiveZone{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;color:inherit;cursor:pointer;display:inline-block;font-family:inherit;padding:0;position:relative}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-content,.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-empty,.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-iframeContainer{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-urbania-article-urbania-base-article-card-container{height:100%;overflow:hidden;position:relative;width:100%}.micromag-screen-urbania-article-urbania-base-article-card-disabled.micromag-screen-urbania-article-urbania-base-article-card-container{overflow:hidden;pointer-events:none}.micromag-screen-urbania-article-urbania-base-article-card-hidden.micromag-screen-urbania-article-urbania-base-article-card-container{display:none;visibility:hidden}.micromag-screen-urbania-article-urbania-base-article-card-placeholder.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-content{padding:6px;position:relative}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-empty{border:2px dashed #343434;color:#343434;margin:5px auto}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-background{z-index:1}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:100%;width:100%;z-index:2}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-layout{-ms-flex-align:center;-ms-flex-pack:center;align-items:center;display:-ms-flexbox;display:flex;justify-content:center}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-text{font-family:Agrandir,sans-serif;font-size:1.65em;font-weight:700;padding:0 10px;text-align:center;text-shadow:0 4px 4px rgba(0,0,0,.35);width:100%}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-text p{font-weight:inherit;margin:0}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-iframeContainer{z-index:5}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-iframeContainer.micromag-screen-urbania-article-urbania-base-article-card-isPlaceholder{-ms-flex-item-align:center;align-self:center;background-color:#6c6c6c;border-top-left-radius:1em;border-top-right-radius:1em;height:45%;top:55%;width:95%}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-popupContainer{position:absolute}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-popupContainerInner{border-top-left-radius:15px;border-top-right-radius:15px;-webkit-box-shadow:0 0 26px rgba(0,0,0,.35);box-shadow:0 0 26px rgba(0,0,0,.35);height:100%;left:50%;overflow:hidden;position:absolute;top:0;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);-webkit-transition:width .2s cubic-bezier(.5,0,.75,0),border-radius .2s cubic-bezier(.5,0,.75,0);-o-transition:width .2s cubic-bezier(.5,0,.75,0),border-radius .2s cubic-bezier(.5,0,.75,0);transition:width .2s cubic-bezier(.5,0,.75,0),border-radius .2s cubic-bezier(.5,0,.75,0);width:calc(100% - 30px)}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-popupContainerInner.micromag-screen-urbania-article-urbania-base-article-card-opened{border-top-left-radius:0;border-top-right-radius:0;width:100%}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-pulse{-webkit-animation:micromag-screen-urbania-article-urbania-base-article-card-pulse 3s cubic-bezier(.68,-.6,.32,1.6) infinite alternate;animation:micromag-screen-urbania-article-urbania-base-article-card-pulse 3s cubic-bezier(.68,-.6,.32,1.6) infinite alternate;-webkit-animation-delay:1s;animation-delay:1s}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-interactiveZone{position:absolute;-ms-touch-action:none;touch-action:none}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-close{-webkit-animation:micromag-screen-urbania-article-urbania-base-article-card-popIn .2s cubic-bezier(.65,0,.35,1);animation:micromag-screen-urbania-article-urbania-base-article-card-popIn .2s cubic-bezier(.65,0,.35,1);color:#222;-webkit-filter:invert(100%);filter:invert(100%);position:absolute;right:10px;top:10px;z-index:6}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-closeIcon{height:1.5em;-webkit-transform:translateZ(0);transform:translateZ(0);width:1.5em}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-iframe{left:50%;position:absolute;top:0;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);z-index:4}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-empty{border-top-left-radius:2em;border-top-right-radius:2em;height:45%;margin:0;top:55%}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-header{left:0;position:absolute;top:0;width:100%;z-index:4}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-iframeBlocker{bottom:0;display:none;position:absolute;z-index:4}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-iframeBlocker.micromag-screen-urbania-article-urbania-base-article-card-active{display:block}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-placeholder{background-color:#6c6c6c;height:50px;width:50px}@-webkit-keyframes micromag-screen-urbania-article-urbania-base-article-card-popIn{0%{-webkit-transform:scale(.8);transform:scale(.8)}to{-webkit-transform:scale(1);transform:scale(1)}}@keyframes micromag-screen-urbania-article-urbania-base-article-card-popIn{0%{-webkit-transform:scale(.8);transform:scale(.8)}to{-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes micromag-screen-urbania-article-urbania-base-article-card-pulse{0%{-webkit-transform:translate(-50%);transform:translate(-50%)}50%{-webkit-transform:translate(-50%,2%);transform:translate(-50%,2%)}to{-webkit-transform:translate(-50%);transform:translate(-50%)}}@keyframes micromag-screen-urbania-article-urbania-base-article-card-pulse{0%{-webkit-transform:translate(-50%);transform:translate(-50%)}50%{-webkit-transform:translate(-50%,2%);transform:translate(-50%,2%)}to{-webkit-transform:translate(-50%);transform:translate(-50%)}}

package/es/index.js

@@ -828,7 +828,7 @@ var definition = {
   }]
 };
 
-var styles = {"container":"micromag-screen-urbania-article-urbania-base-article-card-container","iframe":"micromag-screen-urbania-article-urbania-base-article-card-iframe","close":"micromag-screen-urbania-article-urbania-base-article-card-close","interactiveZone":"micromag-screen-urbania-article-urbania-base-article-card-interactiveZone","empty":"micromag-screen-urbania-article-urbania-base-article-card-empty","iframeContainer":"micromag-screen-urbania-article-urbania-base-article-card-iframeContainer","content":"micromag-screen-urbania-article-urbania-base-article-card-content","disabled":"micromag-screen-urbania-article-urbania-base-article-card-disabled","hidden":"micromag-screen-urbania-article-urbania-base-article-card-hidden","placeholder":"micromag-screen-urbania-article-urbania-base-article-card-placeholder","background":"micromag-screen-urbania-article-urbania-base-article-card-background","layout":"micromag-screen-urbania-article-urbania-base-article-card-layout","text":"micromag-screen-urbania-article-urbania-base-article-card-text","isPlaceholder":"micromag-screen-urbania-article-urbania-base-article-card-isPlaceholder","popupContainer":"micromag-screen-urbania-article-urbania-base-article-card-popupContainer","pulse":"micromag-screen-urbania-article-urbania-base-article-card-pulse","popIn":"micromag-screen-urbania-article-urbania-base-article-card-popIn","closeIcon":"micromag-screen-urbania-article-urbania-base-article-card-closeIcon","opened":"micromag-screen-urbania-article-urbania-base-article-card-opened","header":"micromag-screen-urbania-article-urbania-base-article-card-header","iframeBlocker":"micromag-screen-urbania-article-urbania-base-article-card-iframeBlocker","active":"micromag-screen-urbania-article-urbania-base-article-card-active"};
+var styles = {"container":"micromag-screen-urbania-article-urbania-base-article-card-container","iframe":"micromag-screen-urbania-article-urbania-base-article-card-iframe","close":"micromag-screen-urbania-article-urbania-base-article-card-close","interactiveZone":"micromag-screen-urbania-article-urbania-base-article-card-interactiveZone","empty":"micromag-screen-urbania-article-urbania-base-article-card-empty","iframeContainer":"micromag-screen-urbania-article-urbania-base-article-card-iframeContainer","content":"micromag-screen-urbania-article-urbania-base-article-card-content","disabled":"micromag-screen-urbania-article-urbania-base-article-card-disabled","hidden":"micromag-screen-urbania-article-urbania-base-article-card-hidden","placeholder":"micromag-screen-urbania-article-urbania-base-article-card-placeholder","background":"micromag-screen-urbania-article-urbania-base-article-card-background","layout":"micromag-screen-urbania-article-urbania-base-article-card-layout","text":"micromag-screen-urbania-article-urbania-base-article-card-text","isPlaceholder":"micromag-screen-urbania-article-urbania-base-article-card-isPlaceholder","popupContainer":"micromag-screen-urbania-article-urbania-base-article-card-popupContainer","popupContainerInner":"micromag-screen-urbania-article-urbania-base-article-card-popupContainerInner","opened":"micromag-screen-urbania-article-urbania-base-article-card-opened","pulse":"micromag-screen-urbania-article-urbania-base-article-card-pulse","popIn":"micromag-screen-urbania-article-urbania-base-article-card-popIn","closeIcon":"micromag-screen-urbania-article-urbania-base-article-card-closeIcon","header":"micromag-screen-urbania-article-urbania-base-article-card-header","iframeBlocker":"micromag-screen-urbania-article-urbania-base-article-card-iframeBlocker","active":"micromag-screen-urbania-article-urbania-base-article-card-active"};
 
 var propTypes = {
   hasArticle: PropTypes.bool,
@@ -857,7 +857,7 @@ var defaultProps = {
   className: null
 };
 var UrbaniaArticleCard = function UrbaniaArticleCard(_ref) {
-  var _ref5;
+  var _ref5, _ref7;
   var hasArticle = _ref.hasArticle,
     url = _ref.url,
     title = _ref.title,
@@ -869,6 +869,7 @@ var UrbaniaArticleCard = function UrbaniaArticleCard(_ref) {
     active = _ref.active,
     spacing = _ref.spacing,
     className = _ref.className;
+  var isSafari = navigator.userAgent.match(/safari/i) !== null;
   var finalBackground = background !== null ? background : {
     image: image
   };
@@ -916,40 +917,24 @@ var UrbaniaArticleCard = function UrbaniaArticleCard(_ref) {
   var backgroundPlaying = current && (isView || isEdit) && !iframeOpened;
 
   // iframe animation
-  var hasIframeSlideIn = !isEdit && !isPlaceholder && !isPreview && isBackgroundVideo && backgroundPlaying && !firstInteraction;
-  var hasIframeBounce = !isEdit && !isPlaceholder && !isPreview && !firstInteraction;
+  var hasIframeAnimation = !isEdit && !isPlaceholder && !isPreview && !isStatic && !firstInteraction;
+  var slideInDelay = hasIframeAnimation && isBackgroundVideo && backgroundPlaying;
+  var hasIframeBounce = hasIframeAnimation && current && !iframeOpened;
   var toggleIframe = useCallback(function () {
-    setIframeOpened(!iframeOpened);
-    if (firstInteraction === false) {
-      setFirstInteraction(true);
-    }
-  }, [iframeOpened, firstInteraction, setFirstInteraction, setIframeOpened]);
-  useEffect(function () {
-    var id = null;
-    if (iframeOpened) {
+    var newIframeOpened = !iframeOpened;
+    setIframeOpened(newIframeOpened);
+    if (newIframeOpened) {
       disableInteraction();
-      id = setTimeout(function () {
-        setIframeInteractionEnabled(true);
-      }, 200);
     } else {
       enableInteraction();
-      setIframeInteractionEnabled(false);
-    }
-    return function () {
-      clearTimeout(id);
-    };
-  }, [iframeOpened, setIframeInteractionEnabled]);
-  useEffect(function () {
-    if (!current) {
-      setIframeOpened(false);
     }
-  }, [current]);
+    setFirstInteraction(true);
+  }, [iframeOpened, setFirstInteraction, setIframeOpened, disableInteraction, enableInteraction]);
   var bind = useGesture({
     onDrag: function onDrag(_ref3) {
       var _ref3$movement = _slicedToArray(_ref3.movement, 2),
-        my = _ref3$movement[1],
-        tap = _ref3.tap;
-      if (!iframeOpened && my < 0 || iframeOpened && my > 0 || tap) {
+        my = _ref3$movement[1];
+      if (!iframeOpened && my < 0 || iframeOpened && my > 0) {
         toggleIframe();
       }
     },
@@ -962,35 +947,48 @@ var UrbaniaArticleCard = function UrbaniaArticleCard(_ref) {
     }
   }, {
     drag: {
-      axis: 'y'
+      axis: 'y',
+      filterTaps: true,
+      preventDefault: true
     },
     wheel: {
       axis: 'y'
     }
   });
-  var _useSpring = useSpring(function () {
-      return {
-        from: {
-          y: height * 0.25 + 2
-        },
-        to: {
-          y: 0
-        },
-        delay: hasIframeSlideIn ? 2000 : 0,
-        // onResolve: () => {
-        //     onAnimationEnded(index);
-        // },
-        // config: { tension: 40, friction: 14 },
-        config: {
-          easing: easings.easeInOutElastic,
-          // frequency: 100,
-          duration: hasIframeSlideIn ? 300 : 2000
-        }
-      };
-    }, []),
-    _useSpring2 = _slicedToArray(_useSpring, 2),
-    springStyle = _useSpring2[0];
-    _useSpring2[1];
+  var y = 100;
+  if (current && iframeOpened) {
+    y = 0;
+  } else if (current) {
+    y = 75;
+  }
+  var springStyle = useSpring({
+    from: {
+      y: 100
+    },
+    to: {
+      y: y
+    },
+    onStart: function onStart() {
+      setIframeInteractionEnabled(false);
+    },
+    onResolve: function onResolve() {
+      if (iframeOpened) {
+        setIframeInteractionEnabled(true);
+      }
+    },
+    delay: slideInDelay ? 1500 : 0,
+    config: {
+      // easing: easings.easeInOutElastic,
+      easing: easings.easeInOutSine,
+      duration: y === 100 ? 1000 : 400
+    }
+  });
+  useEffect(function () {
+    if (!current) {
+      setIframeOpened(false);
+      setFirstInteraction(false);
+    }
+  }, [current]);
   return /*#__PURE__*/React.createElement("div", {
     className: classNames([styles.container, (_ref5 = {}, _defineProperty(_ref5, className, className !== null), _defineProperty(_ref5, styles.isCurrent, current), _defineProperty(_ref5, styles.isPlaceholder, isPlaceholder), _ref5)]),
     "data-screen-ready": isStatic || isCapture
@@ -1053,40 +1051,42 @@ var UrbaniaArticleCard = function UrbaniaArticleCard(_ref) {
     emptyClassName: styles.empty,
     isEmpty: !hasUrl || !hasArticle
   }, (!isPreview || !isPlaceholder) && hasArticle ? /*#__PURE__*/React.createElement(animated.div, {
-    className: classNames([styles.popupContainer, _defineProperty({}, styles.pulse, hasIframeBounce)]),
-    style: _objectSpread({
+    className: styles.popupContainer,
+    style: {
       height: height,
       width: width,
-      top: iframeOpened ? 0 : '75%'
-    }, springStyle)
+      transform: springStyle.y.to(function (value) {
+        return "translateY(".concat(value, "%");
+      })
+      // top: iframeOpened ? 0 : '75%',
+      // ...springStyle,
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles.popupContainerInner, (_ref7 = {}, _defineProperty(_ref7, styles.opened, iframeOpened), _defineProperty(_ref7, styles.pulse, hasIframeBounce), _ref7)])
   }, /*#__PURE__*/React.createElement("button", Object.assign({
-    type: "button"
-  }, bind(), {
+    type: "button",
     style: {
-      height: iframeOpened ? '100px' : height,
+      height: iframeInteractionEnabled ? '100px' : height,
       width: width,
-      // position: iframeOpened ? 'absolute' : 'relative',
       zIndex: 5
     },
     onClick: toggleIframe,
     className: styles.interactiveZone
-  })), iframeInteractionEnabled ? /*#__PURE__*/React.createElement(Button, {
+  }, current ? bind() : null)), iframeInteractionEnabled ? /*#__PURE__*/React.createElement(Button, {
     className: styles.close,
     onClick: toggleIframe
   }, /*#__PURE__*/React.createElement(Close, {
     color: "#000",
     className: styles.closeIcon
   })) : null, /*#__PURE__*/React.createElement("iframe", {
-    className: classNames([styles.iframe, _defineProperty({}, styles.opened, iframeOpened)]),
+    className: styles.iframe,
     title: title.body,
     src: url || 'about:blank',
-    scrolling: iframeOpened ? 'yes' : 'no' // @TODO: deprecated, find beter solution
-    ,
+    scrolling: !iframeOpened && !isSafari ? 'no' : 'auto',
     style: {
-      width: width,
+      width: '100%',
       height: height,
-      pointerEvents: iframeInteractionEnabled ? 'auto' : 'none',
-      overflow: iframeOpened ? 'hidden' : null
+      overflow: !iframeOpened ? 'hidden' : 'auto'
     }
   }), /*#__PURE__*/React.createElement("div", {
     className: classNames([styles.iframeBlocker, _defineProperty({}, styles.active, !iframeInteractionEnabled)]),
@@ -1094,7 +1094,7 @@ var UrbaniaArticleCard = function UrbaniaArticleCard(_ref) {
       width: width,
       height: height * 0.25
     }
-  })) : null))));
+  }))) : null))));
 };
 UrbaniaArticleCard.defaultProps = defaultProps;
 UrbaniaArticleCard.propTypes = propTypes;

package/lib/index.js

@@ -852,7 +852,7 @@ var definition = {
   }]
 };
 
-var styles = {"container":"micromag-screen-urbania-article-urbania-base-article-card-container","iframe":"micromag-screen-urbania-article-urbania-base-article-card-iframe","close":"micromag-screen-urbania-article-urbania-base-article-card-close","interactiveZone":"micromag-screen-urbania-article-urbania-base-article-card-interactiveZone","empty":"micromag-screen-urbania-article-urbania-base-article-card-empty","iframeContainer":"micromag-screen-urbania-article-urbania-base-article-card-iframeContainer","content":"micromag-screen-urbania-article-urbania-base-article-card-content","disabled":"micromag-screen-urbania-article-urbania-base-article-card-disabled","hidden":"micromag-screen-urbania-article-urbania-base-article-card-hidden","placeholder":"micromag-screen-urbania-article-urbania-base-article-card-placeholder","background":"micromag-screen-urbania-article-urbania-base-article-card-background","layout":"micromag-screen-urbania-article-urbania-base-article-card-layout","text":"micromag-screen-urbania-article-urbania-base-article-card-text","isPlaceholder":"micromag-screen-urbania-article-urbania-base-article-card-isPlaceholder","popupContainer":"micromag-screen-urbania-article-urbania-base-article-card-popupContainer","pulse":"micromag-screen-urbania-article-urbania-base-article-card-pulse","popIn":"micromag-screen-urbania-article-urbania-base-article-card-popIn","closeIcon":"micromag-screen-urbania-article-urbania-base-article-card-closeIcon","opened":"micromag-screen-urbania-article-urbania-base-article-card-opened","header":"micromag-screen-urbania-article-urbania-base-article-card-header","iframeBlocker":"micromag-screen-urbania-article-urbania-base-article-card-iframeBlocker","active":"micromag-screen-urbania-article-urbania-base-article-card-active"};
+var styles = {"container":"micromag-screen-urbania-article-urbania-base-article-card-container","iframe":"micromag-screen-urbania-article-urbania-base-article-card-iframe","close":"micromag-screen-urbania-article-urbania-base-article-card-close","interactiveZone":"micromag-screen-urbania-article-urbania-base-article-card-interactiveZone","empty":"micromag-screen-urbania-article-urbania-base-article-card-empty","iframeContainer":"micromag-screen-urbania-article-urbania-base-article-card-iframeContainer","content":"micromag-screen-urbania-article-urbania-base-article-card-content","disabled":"micromag-screen-urbania-article-urbania-base-article-card-disabled","hidden":"micromag-screen-urbania-article-urbania-base-article-card-hidden","placeholder":"micromag-screen-urbania-article-urbania-base-article-card-placeholder","background":"micromag-screen-urbania-article-urbania-base-article-card-background","layout":"micromag-screen-urbania-article-urbania-base-article-card-layout","text":"micromag-screen-urbania-article-urbania-base-article-card-text","isPlaceholder":"micromag-screen-urbania-article-urbania-base-article-card-isPlaceholder","popupContainer":"micromag-screen-urbania-article-urbania-base-article-card-popupContainer","popupContainerInner":"micromag-screen-urbania-article-urbania-base-article-card-popupContainerInner","opened":"micromag-screen-urbania-article-urbania-base-article-card-opened","pulse":"micromag-screen-urbania-article-urbania-base-article-card-pulse","popIn":"micromag-screen-urbania-article-urbania-base-article-card-popIn","closeIcon":"micromag-screen-urbania-article-urbania-base-article-card-closeIcon","header":"micromag-screen-urbania-article-urbania-base-article-card-header","iframeBlocker":"micromag-screen-urbania-article-urbania-base-article-card-iframeBlocker","active":"micromag-screen-urbania-article-urbania-base-article-card-active"};
 
 var propTypes = {
   hasArticle: PropTypes__default["default"].bool,
@@ -881,7 +881,7 @@ var defaultProps = {
   className: null
 };
 var UrbaniaArticleCard = function UrbaniaArticleCard(_ref) {
-  var _ref5;
+  var _ref5, _ref7;
   var hasArticle = _ref.hasArticle,
     url = _ref.url,
     title = _ref.title,
@@ -893,6 +893,7 @@ var UrbaniaArticleCard = function UrbaniaArticleCard(_ref) {
     active = _ref.active,
     spacing = _ref.spacing,
     className = _ref.className;
+  var isSafari = navigator.userAgent.match(/safari/i) !== null;
   var finalBackground = background !== null ? background : {
     image: image
   };
@@ -940,40 +941,24 @@ var UrbaniaArticleCard = function UrbaniaArticleCard(_ref) {
   var backgroundPlaying = current && (isView || isEdit) && !iframeOpened;
 
   // iframe animation
-  var hasIframeSlideIn = !isEdit && !isPlaceholder && !isPreview && isBackgroundVideo && backgroundPlaying && !firstInteraction;
-  var hasIframeBounce = !isEdit && !isPlaceholder && !isPreview && !firstInteraction;
+  var hasIframeAnimation = !isEdit && !isPlaceholder && !isPreview && !isStatic && !firstInteraction;
+  var slideInDelay = hasIframeAnimation && isBackgroundVideo && backgroundPlaying;
+  var hasIframeBounce = hasIframeAnimation && current && !iframeOpened;
   var toggleIframe = React.useCallback(function () {
-    setIframeOpened(!iframeOpened);
-    if (firstInteraction === false) {
-      setFirstInteraction(true);
-    }
-  }, [iframeOpened, firstInteraction, setFirstInteraction, setIframeOpened]);
-  React.useEffect(function () {
-    var id = null;
-    if (iframeOpened) {
+    var newIframeOpened = !iframeOpened;
+    setIframeOpened(newIframeOpened);
+    if (newIframeOpened) {
       disableInteraction();
-      id = setTimeout(function () {
-        setIframeInteractionEnabled(true);
-      }, 200);
     } else {
       enableInteraction();
-      setIframeInteractionEnabled(false);
-    }
-    return function () {
-      clearTimeout(id);
-    };
-  }, [iframeOpened, setIframeInteractionEnabled]);
-  React.useEffect(function () {
-    if (!current) {
-      setIframeOpened(false);
     }
-  }, [current]);
+    setFirstInteraction(true);
+  }, [iframeOpened, setFirstInteraction, setIframeOpened, disableInteraction, enableInteraction]);
   var bind = react.useGesture({
     onDrag: function onDrag(_ref3) {
       var _ref3$movement = _slicedToArray__default["default"](_ref3.movement, 2),
-        my = _ref3$movement[1],
-        tap = _ref3.tap;
-      if (!iframeOpened && my < 0 || iframeOpened && my > 0 || tap) {
+        my = _ref3$movement[1];
+      if (!iframeOpened && my < 0 || iframeOpened && my > 0) {
         toggleIframe();
       }
     },
@@ -986,35 +971,48 @@ var UrbaniaArticleCard = function UrbaniaArticleCard(_ref) {
     }
   }, {
     drag: {
-      axis: 'y'
+      axis: 'y',
+      filterTaps: true,
+      preventDefault: true
     },
     wheel: {
       axis: 'y'
     }
   });
-  var _useSpring = web.useSpring(function () {
-      return {
-        from: {
-          y: height * 0.25 + 2
-        },
-        to: {
-          y: 0
-        },
-        delay: hasIframeSlideIn ? 2000 : 0,
-        // onResolve: () => {
-        //     onAnimationEnded(index);
-        // },
-        // config: { tension: 40, friction: 14 },
-        config: {
-          easing: web.easings.easeInOutElastic,
-          // frequency: 100,
-          duration: hasIframeSlideIn ? 300 : 2000
-        }
-      };
-    }, []),
-    _useSpring2 = _slicedToArray__default["default"](_useSpring, 2),
-    springStyle = _useSpring2[0];
-    _useSpring2[1];
+  var y = 100;
+  if (current && iframeOpened) {
+    y = 0;
+  } else if (current) {
+    y = 75;
+  }
+  var springStyle = web.useSpring({
+    from: {
+      y: 100
+    },
+    to: {
+      y: y
+    },
+    onStart: function onStart() {
+      setIframeInteractionEnabled(false);
+    },
+    onResolve: function onResolve() {
+      if (iframeOpened) {
+        setIframeInteractionEnabled(true);
+      }
+    },
+    delay: slideInDelay ? 1500 : 0,
+    config: {
+      // easing: easings.easeInOutElastic,
+      easing: web.easings.easeInOutSine,
+      duration: y === 100 ? 1000 : 400
+    }
+  });
+  React.useEffect(function () {
+    if (!current) {
+      setIframeOpened(false);
+      setFirstInteraction(false);
+    }
+  }, [current]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: classNames__default["default"]([styles.container, (_ref5 = {}, _defineProperty__default["default"](_ref5, className, className !== null), _defineProperty__default["default"](_ref5, styles.isCurrent, current), _defineProperty__default["default"](_ref5, styles.isPlaceholder, isPlaceholder), _ref5)]),
     "data-screen-ready": isStatic || isCapture
@@ -1077,40 +1075,42 @@ var UrbaniaArticleCard = function UrbaniaArticleCard(_ref) {
     emptyClassName: styles.empty,
     isEmpty: !hasUrl || !hasArticle
   }, (!isPreview || !isPlaceholder) && hasArticle ? /*#__PURE__*/React__default["default"].createElement(web.animated.div, {
-    className: classNames__default["default"]([styles.popupContainer, _defineProperty__default["default"]({}, styles.pulse, hasIframeBounce)]),
-    style: _objectSpread__default["default"]({
+    className: styles.popupContainer,
+    style: {
       height: height,
       width: width,
-      top: iframeOpened ? 0 : '75%'
-    }, springStyle)
+      transform: springStyle.y.to(function (value) {
+        return "translateY(".concat(value, "%");
+      })
+      // top: iframeOpened ? 0 : '75%',
+      // ...springStyle,
+    }
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: classNames__default["default"]([styles.popupContainerInner, (_ref7 = {}, _defineProperty__default["default"](_ref7, styles.opened, iframeOpened), _defineProperty__default["default"](_ref7, styles.pulse, hasIframeBounce), _ref7)])
   }, /*#__PURE__*/React__default["default"].createElement("button", Object.assign({
-    type: "button"
-  }, bind(), {
+    type: "button",
     style: {
-      height: iframeOpened ? '100px' : height,
+      height: iframeInteractionEnabled ? '100px' : height,
       width: width,
-      // position: iframeOpened ? 'absolute' : 'relative',
       zIndex: 5
     },
     onClick: toggleIframe,
     className: styles.interactiveZone
-  })), iframeInteractionEnabled ? /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
+  }, current ? bind() : null)), iframeInteractionEnabled ? /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
     className: styles.close,
     onClick: toggleIframe
   }, /*#__PURE__*/React__default["default"].createElement(components.Close, {
     color: "#000",
     className: styles.closeIcon
   })) : null, /*#__PURE__*/React__default["default"].createElement("iframe", {
-    className: classNames__default["default"]([styles.iframe, _defineProperty__default["default"]({}, styles.opened, iframeOpened)]),
+    className: styles.iframe,
     title: title.body,
     src: url || 'about:blank',
-    scrolling: iframeOpened ? 'yes' : 'no' // @TODO: deprecated, find beter solution
-    ,
+    scrolling: !iframeOpened && !isSafari ? 'no' : 'auto',
     style: {
-      width: width,
+      width: '100%',
       height: height,
-      pointerEvents: iframeInteractionEnabled ? 'auto' : 'none',
-      overflow: iframeOpened ? 'hidden' : null
+      overflow: !iframeOpened ? 'hidden' : 'auto'
     }
   }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: classNames__default["default"]([styles.iframeBlocker, _defineProperty__default["default"]({}, styles.active, !iframeInteractionEnabled)]),
@@ -1118,7 +1118,7 @@ var UrbaniaArticleCard = function UrbaniaArticleCard(_ref) {
       width: width,
       height: height * 0.25
     }
-  })) : null))));
+  }))) : null))));
 };
 UrbaniaArticleCard.defaultProps = defaultProps;
 UrbaniaArticleCard.propTypes = propTypes;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-urbania-article",
-    "version": "0.3.423",
+    "version": "0.3.424",
     "private": false,
     "description": "",
     "keywords": [
@@ -79,5 +79,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "c02e69c23fd099d5684bc0b69e02f19825cecfd2"
+    "gitHead": "5f183ee3c0b6a26fb79776796f3b3717a0e57503"
 }