@guardian/mobile-apps-article-templates/ArticleTemplates/assets/css/interactive.css

Templates for articles on both iOS and Android next-gen apps

html{font-size:62.5%;font-family:"Guardian Text Egyptian Web",Georgia,serif}body{font-size:1.7em;line-height:1.5em}body[data-fullscreen-interactive]{margin:0}body[data-fullscreen-interactive] a{text-decoration:none}@media(prefers-color-scheme: dark){body[data-fullscreen-interactive].offline{background:#1a1a1a !important;color:#dcdcdc !important}body[data-fullscreen-interactive].offline .element-atom,body[data-fullscreen-interactive].offline .interactive-atom{background:#1a1a1a !important;color:#dcdcdc !important}}.interactive--offline{background-color:#f6f6f6;text-align:center;padding:1px 0;font-family:"Guardian Text Sans Web",sans-serif;-webkit-text-size-adjust:none;color:#767676;clear:both;margin:0}@media all and (max-width: 40.62em){.interactive--offline{font-size:1.6rem;line-height:2.2rem}}@media all and (min-width: 40.63em){.interactive--offline{font-size:1.6rem;line-height:2.2rem}}body:not([data-fullscreen-interactive]) .interactive--offline{margin:0 -12px !important}body[data-fullscreen-interactive] .interactive--offline{-webkit-text-size-adjust:none}@media all and (max-width: 40.62em){body[data-fullscreen-interactive] .interactive--offline{font-size:2.24rem;line-height:3.08rem}}@media all and (min-width: 40.63em){body[data-fullscreen-interactive] .interactive--offline{font-size:2.24rem;line-height:3.08rem}}.interactive--offline:before{content:"Sorry, we are unable to display\athis content as you have\ano internet connection.\aPlease try again.";display:flex;align-items:center;justify-content:center;margin:3em}.interactive--offline *{display:none}.interactive--offline .interactive--offline--icon{display:inline-block;margin-top:1em;margin-bottom:3.5em;color:#767676;font-family:"Guardian Icons",Georgia,serif;-webkit-tap-highlight-color:rgba(0,0,0,0)}.interactive--offline .interactive--offline--icon:after{display:inline-block;padding:7px 10px 13px;font-size:1.5em}.interactive--offline .interactive--offline--icon.interactive--offline--icon--reload:after{content:"";border:1px solid #767676;border-radius:50%}.interactive--offline .interactive--offline--icon.interactive--offline--icon--reload:active{color:#fff}.interactive--offline .interactive--offline--icon.interactive--offline--icon--reload:active:after{border:1px solid #fff}.interactive--offline .interactive--offline--icon.interactive--offline--icon--loading{display:none;-webkit-animation:fadeIn;-webkit-animation-direction:alternate;-webkit-animation-iteration-count:infinite;-webkit-animation-duration:1s}.interactive--offline .interactive--offline--icon.interactive--offline--icon--loading:after{content:"";padding:7px 10px 15px}.interactive--offline.interactive--loading .interactive--offline--icon--reload{display:none}.interactive--offline.interactive--loading .interactive--offline--icon--loading{display:block}@-webkit-keyframes fadeIn{from{opacity:0}to{opacity:1}}.element-interactive .nav_wrapper.element{display:none}body[data-fullscreen-interactive] .element-interactive .nav_wrapper.element{display:initial}