.page-hero--home {
position: relative;
overflow: hidden;
}
.page-hero--home .page-hero-inner {
position: relative;
z-index: 1;
}
.hero-bg {
position: absolute;
inset: 0;
--hero-1: url('/resource/hero/ext_beach_day');
--hero-2: url('/resource/hero/ext_square_day');
--hero-3: url('/resource/hero/ext_road_day');
--hero-4: url('/resource/hero/ext_island_day');
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .hero-bg {
--hero-1: url('/resource/hero/ext_beach_night');
--hero-2: url('/resource/hero/ext_square_night');
--hero-3: url('/resource/hero/ext_road_night2');
--hero-4: url('/resource/hero/ext_island_night');
}
}
:root[data-theme="dark"] .hero-bg {
--hero-1: url('/resource/hero/ext_beach_night');
--hero-2: url('/resource/hero/ext_square_night');
--hero-3: url('/resource/hero/ext_road_night2');
--hero-4: url('/resource/hero/ext_island_night');
}
@media (max-width: 30em) {
.hero-bg {
--hero-1: url('/resource/hero/ext_beach_day?crop=narrow');
--hero-2: url('/resource/hero/ext_square_day?crop=narrow');
--hero-3: url('/resource/hero/ext_road_day?crop=narrow');
--hero-4: url('/resource/hero/ext_island_day?crop=narrow');
}
}
@media (max-width: 30em) and (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .hero-bg {
--hero-1: url('/resource/hero/ext_beach_night?crop=narrow');
--hero-2: url('/resource/hero/ext_square_night?crop=narrow');
--hero-3: url('/resource/hero/ext_road_night2?crop=narrow');
--hero-4: url('/resource/hero/ext_island_night?crop=narrow');
}
}
@media (max-width: 30em) {
:root[data-theme="dark"] .hero-bg {
--hero-1: url('/resource/hero/ext_beach_night?crop=narrow');
--hero-2: url('/resource/hero/ext_square_night?crop=narrow');
--hero-3: url('/resource/hero/ext_road_night2?crop=narrow');
--hero-4: url('/resource/hero/ext_island_night?crop=narrow');
}
}
.hero-bg-slide {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
opacity: 0;
}
.hero-bg-slide:first-child {
background-image: var(--hero-1);
opacity: 1;
}
.hero-bg.is-live .hero-bg-slide {
animation: hero-fade 32s linear infinite;
}
.hero-bg.is-live .hero-bg-slide:nth-child(1) { animation-delay: -2.56s; }
.hero-bg.is-live .hero-bg-slide:nth-child(2) { background-image: var(--hero-2); animation-delay: 5.44s; }
.hero-bg.is-live .hero-bg-slide:nth-child(3) { background-image: var(--hero-3); animation-delay: 13.44s; }
.hero-bg.is-live .hero-bg-slide:nth-child(4) { background-image: var(--hero-4); animation-delay: 21.44s; }
@keyframes hero-fade {
0% { opacity: 0; }
8% { opacity: 1; }
25% { opacity: 1; }
33% { opacity: 0; }
100% { opacity: 0; }
}
.hero-bg::after {
content: '';
position: absolute;
inset: 0;
background:
linear-gradient(to right,
var(--bg) 0%,
color-mix(in srgb, var(--bg) 60%, transparent) 55%,
color-mix(in srgb, var(--bg) 40%, transparent) 100%),
linear-gradient(to bottom,
color-mix(in srgb, var(--bg) 25%, transparent) 55%,
var(--bg) 100%);
}
.home-contributors {
padding: 40px 48px 48px;
max-width: 760px;
border-top: 1px solid var(--border);
}
@media (max-width: 40em) {
.home-contributors {
padding: 32px 20px 40px;
}
}
.hero-track {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12px;
margin: 28px 0 0;
}
.hero-track-audio {
min-width: 0;
max-width: 100%;
}
.hero-track-play {
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
width: 44px;
height: 44px;
padding: 0;
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius-full);
color: var(--accent);
cursor: pointer;
transition: color 0.15s var(--ease-out), border-color 0.15s var(--ease-out),
background-color 0.15s var(--ease-out);
}
.hero-track-play:hover {
border-color: var(--accent);
background: var(--bg-elevated);
}
.hero-track-play:focus-visible {
outline: var(--focus-ring);
outline-offset: 3px;
}
.hero-track-icon-pause,
.hero-track-play[aria-pressed="true"] .hero-track-icon-play {
display: none;
}
.hero-track-play[aria-pressed="true"] .hero-track-icon-pause {
display: block;
}
.hero-track-play[aria-pressed="true"] {
border-color: var(--accent);
}
.hero-track-name {
margin: 0;
min-width: 0;
line-height: var(--lh-ui);
}
.hero-track-artist {
display: block;
font-size: var(--fs-label);
color: var(--text-soft);
}
.hero-track-title {
display: block;
font-size: var(--fs-ui);
font-weight: 600;
color: var(--text);
}
@media (prefers-reduced-motion: reduce) {
.hero-bg.is-live .hero-bg-slide {
animation: none;
}
.hero-track-play {
transition: none;
}
}