Sticky Scroll Cue
Tall full-bleed hero with a bouncing scroll indicator at the bottom. Forest emerald on birch with a soft yellow CTA — the cabin / retreat brand aesthetic.
The code
<section class="hs-scc" aria-label="Hero">
<div class="hs-scc-inner">
<span class="hs-scc-eye">— A small place upstate</span>
<h2>Slow Sundays, <em>warm wood,</em> not a single notification.</h2>
<p>Three cabins, two acres, no Wi-Fi, one shared kitchen. Book yourself a real weekend.</p>
<a class="hs-scc-cta" href="#book">Check availability</a>
</div>
<div class="hs-scc-cue" aria-hidden="true">
<span>scroll</span>
<div class="hs-scc-mouse"><span></span></div>
</div>
</section> <section class="hs-scc" aria-label="Hero">
<div class="hs-scc-inner">
<span class="hs-scc-eye">— A small place upstate</span>
<h2>Slow Sundays, <em>warm wood,</em> not a single notification.</h2>
<p>Three cabins, two acres, no Wi-Fi, one shared kitchen. Book yourself a real weekend.</p>
<a class="hs-scc-cta" href="#book">Check availability</a>
</div>
<div class="hs-scc-cue" aria-hidden="true">
<span>scroll</span>
<div class="hs-scc-mouse"><span></span></div>
</div>
</section>.hs-scc {
position: relative;
display: grid; place-items: center;
width: 100%; min-height: 480px;
padding: clamp(28px, 5vw, 64px) clamp(20px, 5vw, 56px) 90px;
background:
radial-gradient(80% 60% at 50% 0%, rgba(38,82,52,0.16), transparent 70%),
#f3eadb;
font-family: 'Inter', system-ui, sans-serif;
color: #1e3a26;
box-sizing: border-box;
}
.hs-scc-inner { max-width: 720px; text-align: center; }
.hs-scc-eye {
display: inline-block;
font-family: 'Cormorant Garamond', Georgia, serif;
font-style: italic; font-size: 16px;
color: #6b8a6f; margin-bottom: 18px;
}
.hs-scc h2 {
margin: 0 0 18px;
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: clamp(34px, 5vw, 56px);
font-weight: 600; letter-spacing: -0.015em; line-height: 1.05;
}
.hs-scc h2 em { color: #b8893a; font-style: italic; }
.hs-scc p { margin: 0 auto 26px; font-size: 16px; line-height: 1.55; color: #5a6b58; max-width: 480px; }
.hs-scc-cta {
display: inline-block; padding: 13px 26px;
background: #f4d35e; color: #1e3a26;
border: 2px solid #1e3a26; border-radius: 0;
text-decoration: none; font-weight: 700; font-size: 14px; letter-spacing: 0.04em;
box-shadow: 4px 4px 0 #1e3a26;
transition: transform 0.15s, box-shadow 0.15s;
}
.hs-scc-cta:hover { transform: translate(2px,2px); box-shadow: 2px 2px 0 #1e3a26; }
.hs-scc-cue {
position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
display: flex; flex-direction: column; align-items: center; gap: 6px;
font-family: 'JetBrains Mono', monospace;
font-size: 10px; letter-spacing: 0.18em; color: #6b8a6f;
text-transform: uppercase;
}
.hs-scc-mouse {
width: 22px; height: 36px;
border: 2px solid #1e3a26; border-radius: 12px;
position: relative;
}
.hs-scc-mouse span {
position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
width: 3px; height: 7px; background: #1e3a26; border-radius: 2px;
animation: hs-scc-bounce 1.4s ease-in-out infinite;
}
@keyframes hs-scc-bounce {
0%, 100% { transform: translate(-50%, 0); opacity: 1; }
50% { transform: translate(-50%, 10px); opacity: 0.4; }
}
@media (prefers-reduced-motion: reduce) {
.hs-scc-mouse span { animation: none; }
.hs-scc-cta { transition: none; }
} .hs-scc {
position: relative;
display: grid; place-items: center;
width: 100%; min-height: 480px;
padding: clamp(28px, 5vw, 64px) clamp(20px, 5vw, 56px) 90px;
background:
radial-gradient(80% 60% at 50% 0%, rgba(38,82,52,0.16), transparent 70%),
#f3eadb;
font-family: 'Inter', system-ui, sans-serif;
color: #1e3a26;
box-sizing: border-box;
}
.hs-scc-inner { max-width: 720px; text-align: center; }
.hs-scc-eye {
display: inline-block;
font-family: 'Cormorant Garamond', Georgia, serif;
font-style: italic; font-size: 16px;
color: #6b8a6f; margin-bottom: 18px;
}
.hs-scc h2 {
margin: 0 0 18px;
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: clamp(34px, 5vw, 56px);
font-weight: 600; letter-spacing: -0.015em; line-height: 1.05;
}
.hs-scc h2 em { color: #b8893a; font-style: italic; }
.hs-scc p { margin: 0 auto 26px; font-size: 16px; line-height: 1.55; color: #5a6b58; max-width: 480px; }
.hs-scc-cta {
display: inline-block; padding: 13px 26px;
background: #f4d35e; color: #1e3a26;
border: 2px solid #1e3a26; border-radius: 0;
text-decoration: none; font-weight: 700; font-size: 14px; letter-spacing: 0.04em;
box-shadow: 4px 4px 0 #1e3a26;
transition: transform 0.15s, box-shadow 0.15s;
}
.hs-scc-cta:hover { transform: translate(2px,2px); box-shadow: 2px 2px 0 #1e3a26; }
.hs-scc-cue {
position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
display: flex; flex-direction: column; align-items: center; gap: 6px;
font-family: 'JetBrains Mono', monospace;
font-size: 10px; letter-spacing: 0.18em; color: #6b8a6f;
text-transform: uppercase;
}
.hs-scc-mouse {
width: 22px; height: 36px;
border: 2px solid #1e3a26; border-radius: 12px;
position: relative;
}
.hs-scc-mouse span {
position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
width: 3px; height: 7px; background: #1e3a26; border-radius: 2px;
animation: hs-scc-bounce 1.4s ease-in-out infinite;
}
@keyframes hs-scc-bounce {
0%, 100% { transform: translate(-50%, 0); opacity: 1; }
50% { transform: translate(-50%, 10px); opacity: 0.4; }
}
@media (prefers-reduced-motion: reduce) {
.hs-scc-mouse span { animation: none; }
.hs-scc-cta { transition: none; }
}