.ss-dia {
position: relative;
min-height: 480px;
font-family: 'Inter', system-ui, sans-serif;
background: #0e0e10;
color: #fff;
border-radius: 0; overflow: hidden;
isolation: isolate;
}
.ss-dia-orange {
position: absolute; inset: 0;
background: linear-gradient(135deg, #ff5e1a 0%, #ff8a00 60%, #ffaa44 100%);
clip-path: polygon(0 0, 56% 0, 32% 100%, 0 100%);
display: flex; align-items: center; justify-content: center;
}
.ss-dia-orange::before {
content: ''; position: absolute; inset: 0;
background:
repeating-linear-gradient(60deg, transparent 0 30px, rgba(0,0,0,0.04) 30px 31px);
}
.ss-dia-num {
font-family: 'Helvetica Neue', sans-serif;
font-weight: 900;
font-size: clamp(120px, 18vw, 240px);
line-height: 0.85;
color: #0e0e10;
letter-spacing: -0.05em;
transform: translateX(-22%) translateY(-4%);
text-shadow: 0 6px 0 rgba(0,0,0,0.06);
font-style: italic;
}
.ss-dia-black {
position: absolute; right: 0; top: 0; bottom: 0;
width: 56%;
padding: 48px 44px;
display: flex; flex-direction: column; gap: 18px;
z-index: 2;
}
.ss-dia-issue {
font-family: 'Courier New', monospace;
font-size: 11px; font-weight: 700;
letter-spacing: 0.3em;
color: #ff8a00;
}
.ss-dia-black h2 {
margin: 0;
font-family: 'Helvetica Neue', sans-serif;
font-size: clamp(40px, 6.5vw, 84px);
font-weight: 900;
line-height: 0.9;
color: #fff;
letter-spacing: -0.03em;
text-transform: uppercase;
}
.ss-dia-italic {
font-style: italic;
font-weight: 300;
color: #ff8a00;
text-transform: lowercase;
font-family: 'Cormorant Garamond', serif;
}
.ss-dia-black p {
margin: 0;
font-size: 15px;
line-height: 1.55;
color: #b8b6b0;
max-width: 380px;
}
.ss-dia-list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ss-dia-list li {
display: flex; align-items: baseline; gap: 14px;
font-family: 'Inter', sans-serif;
font-size: 15px;
color: #fff;
padding: 10px 0;
border-top: 1px solid rgba(255,255,255,0.1);
}
.ss-dia-list span {
font-family: 'Courier New', monospace;
font-size: 11px; font-weight: 700;
letter-spacing: 0.16em;
color: #ff8a00;
}
.ss-dia-cta {
margin-top: auto;
align-self: flex-start;
padding: 14px 26px;
background: #ff5e1a;
color: #0e0e10;
border: 0;
font-family: 'Inter', sans-serif;
font-size: 13px; font-weight: 800;
letter-spacing: 0.06em; text-transform: uppercase;
cursor: pointer;
transition: background 0.16s, transform 0.12s;
}
.ss-dia-cta:hover { background: #ff8a00; }
.ss-dia-cta:active { transform: translateY(1px); }
@media (max-width: 720px) {
.ss-dia { min-height: 580px; }
.ss-dia-orange { clip-path: polygon(0 0, 100% 0, 100% 38%, 0 50%); }
.ss-dia-num { transform: translateX(0) translateY(-10%); font-size: 120px; }
.ss-dia-black { width: 100%; top: 50%; padding-top: 36px; }
} <section class="ss-dia" aria-label="Sport magazine cover">
<div class="ss-dia-orange" aria-hidden="true">
<span class="ss-dia-num">47</span>
</div>
<div class="ss-dia-black">
<span class="ss-dia-issue">ISSUE 47 · MAY</span>
<h2>FASTER<br/><span class="ss-dia-italic">than</span><br/>YESTERDAY.</h2>
<p>Inside: how four runners broke their personal records by changing one thing.</p>
<ul class="ss-dia-list">
<li><span>01</span> The 6am rule</li>
<li><span>02</span> Negative splits</li>
<li><span>03</span> Track over road</li>
</ul>
<button type="button" class="ss-dia-cta">Read inside →</button>
</div>
</section> Live preview Edit any tab — preview updates live Ready