Hi there
The Web Stories plugin loads a specific CSS file, https://cdn.ampproject.org/amp-story-player-v0.css, to ensure stories are displayed correctly upon clicking. On your site this file is not being loaded. The absence causes this issue.
This might be because of a performance optimization plugin you are using on your site, or it could also be because of your theme. I definitely see that the Slickstream plugin is causing some appearance issues.
To address this issue, you could try finding the culprit by deactivating other plugins to see if the issue still persists. Or, the easy way, just manually add the CSS from that file to your site via Customizer -> Custom CSS. Add the following:
amp-story-player{position:relative;display:block}.i-amphtml-story-player-shadow-root-intermediary{width:100%;height:100%}amp-story-player a:first-of-type{width:100%;height:100%;background:var(--story-player-poster,#d3d3d3);background-size:100% 100%;display:block}amp-story-player.i-amphtml-story-player-loaded a{display:none}amp-story-player:after{content:" ";position:absolute;box-sizing:border-box;top:calc(50% - 32px);left:calc(50% - 32px);width:64px;height:64px;border-radius:50%;border-color:#fff transparent;border-style:solid;border-width:6px;filter:drop-shadow(0px 1px 3px rgba(0,0,0,0.25));animation-name:i-amphtml-story-player-spinner;animation-duration:4400ms;animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-iteration-count:infinite}@keyframes i-amphtml-story-player-spinner{12.5%{transform:rotate(135deg)}25%{transform:rotate(270deg)}37.5%{transform:rotate(405deg)}50%{transform:rotate(540deg)}62.5%{transform:rotate(675deg)}75%{transform:rotate(810deg)}87.5%{transform:rotate(945deg)}to{transform:rotate(1080deg)}}.i-amphtml-story-player-loaded:after{visibility:hidden}
I also see the Slickstream search button still appearing when clicking on a story. To remove it, add the following CSS as well:
.web-stories-lightbox-open slick-heartbeat { display: none; }
Hope that helps!
