@micromag/screen-urbania-article 0.3.417 → 0.3.420

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{-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-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)}}
+.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 4s cubic-bezier(.34,1.56,.64,1) infinite alternate;animation:micromag-screen-urbania-article-urbania-base-article-card-pulse 4s cubic-bezier(.34,1.56,.64,1) infinite alternate;-webkit-animation-delay:2s;animation-delay:2s}.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)}}

package/es/index.js

@@ -20,6 +20,7 @@ import Heading from '@micromag/element-heading';
 import Text from '@micromag/element-text';
 import UrbaniaAuthor from '@micromag/element-urbania-author';
 import Visual from '@micromag/element-visual';
+import { useSpring, easings, animated } from '@react-spring/web';
 import { useGesture } from '@use-gesture/react';
 import Button from '@micromag/element-button';
 import Layout from '@micromag/element-layout';
@@ -827,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","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","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","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 propTypes = {
   hasArticle: PropTypes.bool,
@@ -856,7 +857,7 @@ var defaultProps = {
   className: null
 };
 var UrbaniaArticleCard = function UrbaniaArticleCard(_ref) {
-  var _ref4;
+  var _ref5;
   var hasArticle = _ref.hasArticle,
     url = _ref.url,
     title = _ref.title,
@@ -871,6 +872,10 @@ var UrbaniaArticleCard = function UrbaniaArticleCard(_ref) {
   var finalBackground = background !== null ? background : {
     image: image
   };
+  var _ref2 = finalBackground || {},
+    _ref2$video = _ref2.video,
+    backgroundVideo = _ref2$video === void 0 ? null : _ref2$video;
+  var isBackgroundVideo = backgroundVideo !== null;
   var _useScreenSize = useScreenSize(),
     width = _useScreenSize.width,
     height = _useScreenSize.height,
@@ -893,8 +898,6 @@ var UrbaniaArticleCard = function UrbaniaArticleCard(_ref) {
   var hasUrl = url !== null && url.length > 0;
   var hasHeader = isHeaderFilled(header);
   var hasText = isTextFilled(text);
-  var mediaShouldLoad = current || active;
-  var backgroundPlaying = current && (isView || isEdit);
 
   // iframe interaction
   var _useState = useState(false),
@@ -905,9 +908,22 @@ var UrbaniaArticleCard = function UrbaniaArticleCard(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     iframeInteractionEnabled = _useState4[0],
     setIframeInteractionEnabled = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    firstInteraction = _useState6[0],
+    setFirstInteraction = _useState6[1];
+  var mediaShouldLoad = current || active;
+  var backgroundPlaying = current && (isView || isEdit) && !iframeOpened;
+
+  // iframe animation
+  var hasIframeSlideIn = !isEdit && !isPlaceholder && isBackgroundVideo && backgroundPlaying && !firstInteraction;
+  var hasIframeBounce = !isEdit && !isPlaceholder && !firstInteraction;
   var toggleIframe = useCallback(function () {
     setIframeOpened(!iframeOpened);
-  }, [iframeOpened, setIframeOpened]);
+    if (firstInteraction === false) {
+      setFirstInteraction(true);
+    }
+  }, [iframeOpened, firstInteraction, setFirstInteraction, setIframeOpened]);
   useEffect(function () {
     var id = null;
     if (iframeOpened) {
@@ -929,17 +945,17 @@ var UrbaniaArticleCard = function UrbaniaArticleCard(_ref) {
     }
   }, [current]);
   var bind = useGesture({
-    onDrag: function onDrag(_ref2) {
-      var _ref2$movement = _slicedToArray(_ref2.movement, 2),
-        my = _ref2$movement[1],
-        tap = _ref2.tap;
+    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) {
         toggleIframe();
       }
     },
-    onWheel: function onWheel(_ref3) {
-      var _ref3$movement = _slicedToArray(_ref3.movement, 2),
-        my = _ref3$movement[1];
+    onWheel: function onWheel(_ref4) {
+      var _ref4$movement = _slicedToArray(_ref4.movement, 2),
+        my = _ref4$movement[1];
       if (!iframeOpened && my > 0 || iframeOpened && my < 0) {
         toggleIframe();
       }
@@ -952,8 +968,32 @@ var UrbaniaArticleCard = function UrbaniaArticleCard(_ref) {
       axis: 'y'
     }
   });
+  var _useSpring = useSpring(function () {
+      return {
+        from: {
+          y: height * 0.25 + 5
+        },
+        to: {
+          y: 0
+        },
+        // delay: hasIframeSlideIn ? 100 : 0,
+        loop: hasIframeSlideIn,
+        // onResolve: () => {
+        //     onAnimationEnded(index);
+        // },
+        // config: { mass: 1, tension: 140, friction: 14 },
+        config: {
+          easing: easings.easeInOutElastic,
+          // frequency: 100,
+          duration: hasIframeSlideIn ? 300 : 2000
+        }
+      };
+    }, []),
+    _useSpring2 = _slicedToArray(_useSpring, 2),
+    springStyle = _useSpring2[0];
+    _useSpring2[1];
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.container, (_ref4 = {}, _defineProperty(_ref4, className, className !== null), _defineProperty(_ref4, styles.isCurrent, current), _defineProperty(_ref4, styles.isPlaceholder, isPlaceholder), _ref4)]),
+    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
   }, /*#__PURE__*/React.createElement(Background, {
     className: styles.background,
@@ -1013,14 +1053,23 @@ var UrbaniaArticleCard = function UrbaniaArticleCard(_ref) {
     }),
     emptyClassName: styles.empty,
     isEmpty: !hasUrl || !hasArticle
-  }, (!isPreview || !isPlaceholder) && hasArticle ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", Object.assign({}, bind(), {
+  }, (!isPreview || !isPlaceholder) && hasArticle ? /*#__PURE__*/React.createElement(animated.div, {
+    className: classNames([styles.popupContainer, _defineProperty({}, styles.pulse, hasIframeBounce)]),
+    style: _objectSpread({
+      height: height,
+      width: width,
+      top: iframeOpened ? 0 : '75%'
+    }, springStyle)
+  }, /*#__PURE__*/React.createElement("button", Object.assign({
+    type: "button"
+  }, bind(), {
     style: {
       height: iframeOpened ? '100px' : height,
       width: width,
-      position: iframeOpened ? 'absolute' : 'relative',
-      // zIndex: iframeOpened ? 5 : 'auto',
+      // position: iframeOpened ? 'absolute' : 'relative',
       zIndex: 5
     },
+    onClick: toggleIframe,
     className: styles.interactiveZone
   })), iframeInteractionEnabled ? /*#__PURE__*/React.createElement(Button, {
     className: styles.close,
@@ -1030,12 +1079,15 @@ var UrbaniaArticleCard = function UrbaniaArticleCard(_ref) {
     className: styles.closeIcon
   })) : null, /*#__PURE__*/React.createElement("iframe", {
     className: classNames([styles.iframe, _defineProperty({}, styles.opened, iframeOpened)]),
-    title: title,
+    title: title.body,
     src: url || 'about:blank',
+    scrolling: iframeOpened ? 'yes' : 'no' // @TODO: deprecated, find beter solution
+    ,
     style: {
       width: width,
-      height: iframeOpened ? height : height * 0.25,
-      pointerEvents: iframeInteractionEnabled ? 'auto' : 'none'
+      height: height,
+      pointerEvents: iframeInteractionEnabled ? 'auto' : 'none',
+      overflow: iframeOpened ? 'hidden' : null
     }
   }), /*#__PURE__*/React.createElement("div", {
     className: classNames([styles.iframeBlocker, _defineProperty({}, styles.active, !iframeInteractionEnabled)]),
@@ -1045,8 +1097,8 @@ var UrbaniaArticleCard = function UrbaniaArticleCard(_ref) {
     }
   })) : null))));
 };
-UrbaniaArticleCard.propTypes = propTypes;
 UrbaniaArticleCard.defaultProps = defaultProps;
+UrbaniaArticleCard.propTypes = propTypes;
 var UrbaniaBaseArticleCard = /*#__PURE__*/React.memo(UrbaniaArticleCard);
 
 /* eslint-disable react/jsx-props-no-spreading */

package/lib/index.js

@@ -24,6 +24,7 @@ var Heading = require('@micromag/element-heading');
 var Text = require('@micromag/element-text');
 var UrbaniaAuthor = require('@micromag/element-urbania-author');
 var Visual = require('@micromag/element-visual');
+var web = require('@react-spring/web');
 var react = require('@use-gesture/react');
 var Button = require('@micromag/element-button');
 var Layout = require('@micromag/element-layout');
@@ -851,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","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","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","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 propTypes = {
   hasArticle: PropTypes__default["default"].bool,
@@ -880,7 +881,7 @@ var defaultProps = {
   className: null
 };
 var UrbaniaArticleCard = function UrbaniaArticleCard(_ref) {
-  var _ref4;
+  var _ref5;
   var hasArticle = _ref.hasArticle,
     url = _ref.url,
     title = _ref.title,
@@ -895,6 +896,10 @@ var UrbaniaArticleCard = function UrbaniaArticleCard(_ref) {
   var finalBackground = background !== null ? background : {
     image: image
   };
+  var _ref2 = finalBackground || {},
+    _ref2$video = _ref2.video,
+    backgroundVideo = _ref2$video === void 0 ? null : _ref2$video;
+  var isBackgroundVideo = backgroundVideo !== null;
   var _useScreenSize = contexts.useScreenSize(),
     width = _useScreenSize.width,
     height = _useScreenSize.height,
@@ -917,8 +922,6 @@ var UrbaniaArticleCard = function UrbaniaArticleCard(_ref) {
   var hasUrl = url !== null && url.length > 0;
   var hasHeader = utils.isHeaderFilled(header);
   var hasText = utils.isTextFilled(text);
-  var mediaShouldLoad = current || active;
-  var backgroundPlaying = current && (isView || isEdit);
 
   // iframe interaction
   var _useState = React.useState(false),
@@ -929,9 +932,22 @@ var UrbaniaArticleCard = function UrbaniaArticleCard(_ref) {
     _useState4 = _slicedToArray__default["default"](_useState3, 2),
     iframeInteractionEnabled = _useState4[0],
     setIframeInteractionEnabled = _useState4[1];
+  var _useState5 = React.useState(false),
+    _useState6 = _slicedToArray__default["default"](_useState5, 2),
+    firstInteraction = _useState6[0],
+    setFirstInteraction = _useState6[1];
+  var mediaShouldLoad = current || active;
+  var backgroundPlaying = current && (isView || isEdit) && !iframeOpened;
+
+  // iframe animation
+  var hasIframeSlideIn = !isEdit && !isPlaceholder && isBackgroundVideo && backgroundPlaying && !firstInteraction;
+  var hasIframeBounce = !isEdit && !isPlaceholder && !firstInteraction;
   var toggleIframe = React.useCallback(function () {
     setIframeOpened(!iframeOpened);
-  }, [iframeOpened, setIframeOpened]);
+    if (firstInteraction === false) {
+      setFirstInteraction(true);
+    }
+  }, [iframeOpened, firstInteraction, setFirstInteraction, setIframeOpened]);
   React.useEffect(function () {
     var id = null;
     if (iframeOpened) {
@@ -953,17 +969,17 @@ var UrbaniaArticleCard = function UrbaniaArticleCard(_ref) {
     }
   }, [current]);
   var bind = react.useGesture({
-    onDrag: function onDrag(_ref2) {
-      var _ref2$movement = _slicedToArray__default["default"](_ref2.movement, 2),
-        my = _ref2$movement[1],
-        tap = _ref2.tap;
+    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) {
         toggleIframe();
       }
     },
-    onWheel: function onWheel(_ref3) {
-      var _ref3$movement = _slicedToArray__default["default"](_ref3.movement, 2),
-        my = _ref3$movement[1];
+    onWheel: function onWheel(_ref4) {
+      var _ref4$movement = _slicedToArray__default["default"](_ref4.movement, 2),
+        my = _ref4$movement[1];
       if (!iframeOpened && my > 0 || iframeOpened && my < 0) {
         toggleIframe();
       }
@@ -976,8 +992,32 @@ var UrbaniaArticleCard = function UrbaniaArticleCard(_ref) {
       axis: 'y'
     }
   });
+  var _useSpring = web.useSpring(function () {
+      return {
+        from: {
+          y: height * 0.25 + 5
+        },
+        to: {
+          y: 0
+        },
+        // delay: hasIframeSlideIn ? 100 : 0,
+        loop: hasIframeSlideIn,
+        // onResolve: () => {
+        //     onAnimationEnded(index);
+        // },
+        // config: { mass: 1, tension: 140, friction: 14 },
+        config: {
+          easing: web.easings.easeInOutElastic,
+          // frequency: 100,
+          duration: hasIframeSlideIn ? 300 : 2000
+        }
+      };
+    }, []),
+    _useSpring2 = _slicedToArray__default["default"](_useSpring, 2),
+    springStyle = _useSpring2[0];
+    _useSpring2[1];
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles.container, (_ref4 = {}, _defineProperty__default["default"](_ref4, className, className !== null), _defineProperty__default["default"](_ref4, styles.isCurrent, current), _defineProperty__default["default"](_ref4, styles.isPlaceholder, isPlaceholder), _ref4)]),
+    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
   }, /*#__PURE__*/React__default["default"].createElement(Background__default["default"], {
     className: styles.background,
@@ -1037,14 +1077,23 @@ var UrbaniaArticleCard = function UrbaniaArticleCard(_ref) {
     }),
     emptyClassName: styles.empty,
     isEmpty: !hasUrl || !hasArticle
-  }, (!isPreview || !isPlaceholder) && hasArticle ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", Object.assign({}, bind(), {
+  }, (!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"]({
+      height: height,
+      width: width,
+      top: iframeOpened ? 0 : '75%'
+    }, springStyle)
+  }, /*#__PURE__*/React__default["default"].createElement("button", Object.assign({
+    type: "button"
+  }, bind(), {
     style: {
       height: iframeOpened ? '100px' : height,
       width: width,
-      position: iframeOpened ? 'absolute' : 'relative',
-      // zIndex: iframeOpened ? 5 : 'auto',
+      // position: iframeOpened ? 'absolute' : 'relative',
       zIndex: 5
     },
+    onClick: toggleIframe,
     className: styles.interactiveZone
   })), iframeInteractionEnabled ? /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
     className: styles.close,
@@ -1054,12 +1103,15 @@ var UrbaniaArticleCard = function UrbaniaArticleCard(_ref) {
     className: styles.closeIcon
   })) : null, /*#__PURE__*/React__default["default"].createElement("iframe", {
     className: classNames__default["default"]([styles.iframe, _defineProperty__default["default"]({}, styles.opened, iframeOpened)]),
-    title: title,
+    title: title.body,
     src: url || 'about:blank',
+    scrolling: iframeOpened ? 'yes' : 'no' // @TODO: deprecated, find beter solution
+    ,
     style: {
       width: width,
-      height: iframeOpened ? height : height * 0.25,
-      pointerEvents: iframeInteractionEnabled ? 'auto' : 'none'
+      height: height,
+      pointerEvents: iframeInteractionEnabled ? 'auto' : 'none',
+      overflow: iframeOpened ? 'hidden' : null
     }
   }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: classNames__default["default"]([styles.iframeBlocker, _defineProperty__default["default"]({}, styles.active, !iframeInteractionEnabled)]),
@@ -1069,8 +1121,8 @@ var UrbaniaArticleCard = function UrbaniaArticleCard(_ref) {
     }
   })) : null))));
 };
-UrbaniaArticleCard.propTypes = propTypes;
 UrbaniaArticleCard.defaultProps = defaultProps;
+UrbaniaArticleCard.propTypes = propTypes;
 var UrbaniaBaseArticleCard = /*#__PURE__*/React__default["default"].memo(UrbaniaArticleCard);
 
 /* eslint-disable react/jsx-props-no-spreading */

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-urbania-article",
-    "version": "0.3.417",
+    "version": "0.3.420",
     "private": false,
     "description": "",
     "keywords": [
@@ -52,21 +52,22 @@
         "@babel/runtime": "^7.13.10",
         "@folklore/fetch": "^0.1.17",
         "@folklore/size": "^0.1.20",
-        "@micromag/core": "^0.3.417",
-        "@micromag/element-background": "^0.3.417",
-        "@micromag/element-button": "^0.3.417",
-        "@micromag/element-closed-captions": "^0.3.417",
-        "@micromag/element-container": "^0.3.417",
-        "@micromag/element-footer": "^0.3.417",
-        "@micromag/element-header": "^0.3.417",
-        "@micromag/element-heading": "^0.3.417",
-        "@micromag/element-image": "^0.3.417",
-        "@micromag/element-layout": "^0.3.417",
-        "@micromag/element-text": "^0.3.417",
-        "@micromag/element-urbania-author": "^0.3.417",
-        "@micromag/element-video": "^0.3.417",
-        "@micromag/element-visual": "^0.3.417",
-        "@micromag/transforms": "^0.3.417",
+        "@micromag/core": "^0.3.420",
+        "@micromag/element-background": "^0.3.420",
+        "@micromag/element-button": "^0.3.420",
+        "@micromag/element-closed-captions": "^0.3.420",
+        "@micromag/element-container": "^0.3.420",
+        "@micromag/element-footer": "^0.3.420",
+        "@micromag/element-header": "^0.3.420",
+        "@micromag/element-heading": "^0.3.420",
+        "@micromag/element-image": "^0.3.420",
+        "@micromag/element-layout": "^0.3.420",
+        "@micromag/element-text": "^0.3.420",
+        "@micromag/element-urbania-author": "^0.3.420",
+        "@micromag/element-video": "^0.3.420",
+        "@micromag/element-visual": "^0.3.420",
+        "@micromag/transforms": "^0.3.420",
+        "@react-spring/web": "^9.6.1",
         "@use-gesture/react": "^10.2.4",
         "classnames": "^2.2.6",
         "lodash": "^4.17.21",
@@ -78,5 +79,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "5a0113a6eaafea5c33a6beece8ad581519f490bb"
+    "gitHead": "5b0f037a41c3bca07a5bce8f0dce205242f7ad17"
 }