daniel-c-harvey
72 lines
1.8 KiB
CSS
72 lines
1.8 KiB
CSS
.hero-stat-row {
|
|
display: flex;
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
.hero-stat {
|
|
flex: 1;
|
|
background: rgba(250, 250, 248, 0.04);
|
|
border: 1px solid rgba(250, 250, 248, 0.08);
|
|
padding: 1.2rem;
|
|
}
|
|
|
|
.hero-stat-num {
|
|
font-family: var(--deepdrft-font-display);
|
|
font-size: 2rem;
|
|
font-weight: 300;
|
|
color: var(--deepdrft-white);
|
|
line-height: 1;
|
|
}
|
|
|
|
.hero-stat-label {
|
|
font-family: var(--deepdrft-font-mono);
|
|
font-size: 0.58rem;
|
|
letter-spacing: 0.2em;
|
|
color: rgba(250, 250, 248, 0.4);
|
|
text-transform: uppercase;
|
|
margin-top: 0.4rem;
|
|
}
|
|
|
|
/* Studio Cuts per-ReleaseType breakdown — mono caption rows below the label, reusing the label's
|
|
palette so the card reads as one block. */
|
|
.hero-stat-breakdown {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.1rem;
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
.hero-stat-breakdown-item {
|
|
font-family: var(--deepdrft-font-mono);
|
|
font-size: 0.58rem;
|
|
letter-spacing: 0.12em;
|
|
color: rgba(250, 250, 248, 0.55);
|
|
}
|
|
|
|
/* Mixes runtime sub-figure — sits under the label, slightly brighter than the label caption. */
|
|
.hero-stat-sub {
|
|
font-family: var(--deepdrft-font-mono);
|
|
font-size: 0.58rem;
|
|
letter-spacing: 0.12em;
|
|
color: rgba(250, 250, 248, 0.55);
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
/* Plays placeholder — a light 90s visitor-counter / odometer embellishment over the existing
|
|
numeric treatment: monospace digits, boxed and tracked out like a mechanical counter. */
|
|
.hero-stat-odometer {
|
|
font-family: var(--deepdrft-font-mono);
|
|
letter-spacing: 0.18em;
|
|
background: rgba(0, 0, 0, 0.35);
|
|
border: 1px solid rgba(250, 250, 248, 0.12);
|
|
padding: 0.1rem 0.35rem;
|
|
display: inline-block;
|
|
}
|
|
|
|
@media (max-width: 599px) {
|
|
.hero-stat-row {
|
|
flex-direction: column;
|
|
gap: 0.75rem;
|
|
}
|
|
}
|