<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Fear Gets An Upgrade</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@900&family=Roboto:wght@400&display=swap" rel="stylesheet">
<script>
document.addEventListener('DOMContentLoaded', function() {
const ctaButton = document.querySelector('.cta');
ctaButton.addEventListener('click', function() {
STON.executeWidgetAction({ type: 'CLOSE_WIDGET' });
});
});
</script>
<style>
:root {
--border-red: #C80000;
--title-red: #C80000;
--subtitle-color: #E5E5E5;
--desc-color: #EAEAEA;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: 'Roboto', system-ui, sans-serif;
color: #fff;
}
.popup {
width: 100%;
margin: 0 auto;
position: relative;
overflow: hidden;
}
.popup-inner {
width: 100%;
height: 100vh;
position: relative;
border: 3px solid var(--border-red);
border-radius: 8px;
overflow: hidden;
box-shadow: 0 14px 34px rgba(0,0,0,0.45);
background: #000;
}
.popup-inner::before {
content: "";
position: absolute;
inset: 0;
background: url('https://stonly.com/media/clients/amc/960x560.jpg') center top / cover no-repeat;
filter: saturate(1.05) contrast(1.05) brightness(0.9);
z-index: 0;
}
@media (max-width: 700px) {
.popup-inner::before {
background-image: url('https://stonly.com/media/clients/amc/1x1.jpg');
background-position: center center;
}
}
@media (max-width: 520px) {
.popup-inner {
padding-top: 40px;
}
.popup-inner::before {
background-image: url('https://stonly.com/media/clients/amc/9x16.jpg');
background-position: center center;
}
}
.glows {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
background:
radial-gradient(250px 250px at 0% 0%, rgba(200,0,0,0.6) 0%, rgba(200,0,0,0.35) 38%, rgba(0,0,0,0) 70%),
radial-gradient(400px 300px at 0% 100%, rgba(200,0,0,0.4) 0%, rgba(200,0,0,0.20) 38%, rgba(0,0,0,0) 70%),
radial-gradient(420px 400px at 100% 100%, rgba(200,0,0,0.4) 0%, rgba(200,0,0,0.2) 38%, rgba(0,0,0,0) 70%);
}
.popup-inner > :not(.glows) {
position: relative;
z-index: 2;
}
.hero {
padding: 40px 42px 4px;
text-align: center;
}
.title-img {
max-width: 350px;
width: 100%;
display: block;
margin: 0 auto 6px;
}
.subtitle {
max-width: 400px;
margin: 0 auto;
font-size: 16px;
line-height: 20px;
color: var(--subtitle-color);
}
.features {
padding: 0 40px;
display: flex;
flex-direction: column;
gap: 10px;
align-items: center;
}
.feature {
width: 100%;
max-width: 430px;
display: grid;
grid-template-columns: 84px 1fr;
gap: 8px;
align-items: flex-start;
}
.pill {
width: 84px;
height: 84px;
display: block;
}
.feat-copy {
width: 100%;
padding-top: 14px;
}
.feat-title {
margin: 0;
font-family: 'Archivo', system-ui, sans-serif;
font-weight: 900;
font-size: 17px;
line-height: 24px;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--title-red);
}
.feat-desc {
margin: 0;
font-size: 16px;
line-height: 22px;
color: var(--desc-color);
}
.cta-wrap {
padding: 16px 40px 25px;
display: flex;
justify-content: center;
}
.cta {
width: 100%;
max-width: 375px;
border: none;
border-radius: 8px;
padding: 15px 0;
font-family: 'Archivo', system-ui, sans-serif;
font-weight: 900;
font-size: 15px;
letter-spacing: 0.05em;
color: #fff;
background: #d00000;
cursor: pointer;
}
/* MOBILE BREAKPOINT */
@media (max-width: 640px) {
/* REMOVE RED BORDER ON MOBILE */
.popup-inner {
border: none;
border-radius: 0;
}
.hero {
padding: 40px 24px 12px;
}
.features,
.cta-wrap {
padding-left: 16px;
padding-right: 16px;
}
.feature {
max-width: 100%;
}
.cta {
max-width: 310px;
}
/* MOBILE-ONLY SPACING ABOVE CTA */
.cta-wrap {
padding-top: 30px;
}
}
</style>
</head>
<body>
<div class="popup" role="dialog">
<div class="popup-inner">
<div class="glows" aria-hidden="true"></div>
<div class="hero">
<img
class="title-img"
src="https://www.playlistsociety.fr/res/amc/FearGetsAnUpgrade.png"
alt="Fear Gets An Upgrade"
/>
<p class="subtitle">
Shudder has new features from the crypt! Here’s what’s creeping onto your screen.
</p>
</div>
<section class="features">
<article class="feature">
<img class="pill" src="https://www.playlistsociety.fr/res/amc/Profiles.png" alt="">
<div class="feat-copy">
<h3 class="feat-title">User Profiles</h3>
<p class="feat-desc">
Pick a persona, sync across devices, and personalize your watchlist.
</p>
</div>
</article>
<article class="feature">
<img class="pill" src="https://www.playlistsociety.fr/res/amc/Downloads.png" alt="">
<div class="feat-copy">
<h3 class="feat-title">Offline Downloads</h3>
<p class="feat-desc">
Download the dread and watch anywhere on the go.
</p>
</div>
</article>
<article class="feature">
<img class="pill" src="https://www.playlistsociety.fr/res/amc/Ratings.png" alt="">
<div class="feat-copy">
<h3 class="feat-title">Skull Ratings</h3>
<p class="feat-desc">
Rate your favorite fears with skulls out of five.
</p>
</div>
</article>
</section>
<div class="cta-wrap">
<button class="cta">START EXPLORING</button>
</div>
</div>
</div>
</body>
</html>
