alexei.dolgolyov
ec5178142e
- Move colophon (credit/email/source link) from sticky footer into a dedicated About dialog, opened from a new header button - Drop ~64px of bottom container padding now that the footer is gone - Loosen vinyl-stage aspect-ratio (1:1 -> 1:0.85) so the disc no longer leaves a tall empty band below the sleeve - Switch tonearm height: 36% to aspect-ratio: 1 to keep proportions consistent across the new stage ratio - Add about.* / dialog.close i18n keys for EN and RU - Add vinyl-variants-mockup.html as next design reference target
912 lines
33 KiB
HTML
912 lines
33 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Vinyl Variants · Studio Reference</title>
|
|
<link rel="icon" type="image/svg+xml" href="/static/icons/icon.svg">
|
|
|
|
<style>
|
|
/* ───────── Local fonts (re-using main app's woff2 files) ───── */
|
|
@font-face {
|
|
font-family: 'Fraunces';
|
|
font-style: italic;
|
|
font-weight: 300 900;
|
|
font-display: swap;
|
|
src: url('/static/fonts/Fraunces-italic-latin.woff2') format('woff2');
|
|
}
|
|
@font-face {
|
|
font-family: 'Fraunces';
|
|
font-style: normal;
|
|
font-weight: 300 900;
|
|
font-display: swap;
|
|
src: url('/static/fonts/Fraunces-latin.woff2') format('woff2');
|
|
}
|
|
@font-face {
|
|
font-family: 'Geist';
|
|
font-style: normal;
|
|
font-weight: 300 700;
|
|
font-display: swap;
|
|
src: url('/static/fonts/Geist-latin.woff2') format('woff2');
|
|
}
|
|
@font-face {
|
|
font-family: 'Geist Mono';
|
|
font-style: normal;
|
|
font-weight: 300 600;
|
|
font-display: swap;
|
|
src: url('/static/fonts/GeistMono-latin.woff2') format('woff2');
|
|
}
|
|
|
|
/* ───────── Tokens (Studio Reference, dark) ───── */
|
|
:root {
|
|
--bg-deep: #0E0D0B;
|
|
--bg-paper: #18150F;
|
|
--bg-card: #211E18;
|
|
--bg-card-2: #26211A;
|
|
--bg-rule: #2E2820;
|
|
--ink: #F2EBDC;
|
|
--ink-soft: #D6CDB9;
|
|
--ink-mute: #9C937F;
|
|
--ink-faint: #5C5447;
|
|
--ink-ghost: #3A3528;
|
|
--copper: #E08038;
|
|
--copper-hi: #F4A064;
|
|
--copper-lo: #B0561F;
|
|
--copper-glow: rgba(224, 128, 56, 0.35);
|
|
--rule: rgba(242, 235, 220, 0.08);
|
|
--rule-strong: rgba(242, 235, 220, 0.18);
|
|
--serif: 'Fraunces', Georgia, serif;
|
|
--sans: 'Geist', system-ui, sans-serif;
|
|
--mono: 'Geist Mono', ui-monospace, monospace;
|
|
--ease: cubic-bezier(.2, .7, .2, 1);
|
|
--ease-out: cubic-bezier(.16, 1, .3, 1);
|
|
}
|
|
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
|
|
html { background: var(--bg-deep); }
|
|
body {
|
|
font-family: var(--sans);
|
|
background: var(--bg-deep);
|
|
color: var(--ink);
|
|
min-height: 100vh;
|
|
padding: 56px 36px 80px;
|
|
-webkit-font-smoothing: antialiased;
|
|
text-rendering: optimizeLegibility;
|
|
}
|
|
|
|
/* Film grain */
|
|
body::before {
|
|
content: "";
|
|
position: fixed;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
z-index: 9999;
|
|
opacity: 0.05;
|
|
mix-blend-mode: overlay;
|
|
background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.95 0 0 0 0 0.92 0 0 0 0 0.86 0 0 0 0.7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
/* ───────── Page header (editorial) ───── */
|
|
header.page-head {
|
|
max-width: 1320px;
|
|
margin: 0 auto 48px;
|
|
text-align: center;
|
|
}
|
|
.kicker {
|
|
font-family: var(--mono);
|
|
font-size: 10px;
|
|
letter-spacing: 0.32em;
|
|
text-transform: uppercase;
|
|
color: var(--copper);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
margin-bottom: 22px;
|
|
}
|
|
.kicker::before, .kicker::after {
|
|
content: "";
|
|
height: 1px;
|
|
width: 40px;
|
|
background: var(--copper);
|
|
opacity: 0.6;
|
|
}
|
|
h1 {
|
|
font-family: var(--serif);
|
|
font-style: italic;
|
|
font-weight: 400;
|
|
font-size: clamp(36px, 5vw, 56px);
|
|
line-height: 1;
|
|
letter-spacing: -0.02em;
|
|
margin-bottom: 14px;
|
|
font-variation-settings: 'opsz' 144;
|
|
}
|
|
.subtitle {
|
|
font-family: var(--mono);
|
|
font-size: 11px;
|
|
letter-spacing: 0.18em;
|
|
text-transform: uppercase;
|
|
color: var(--ink-mute);
|
|
margin-bottom: 8px;
|
|
}
|
|
.return-link {
|
|
display: inline-block;
|
|
margin-top: 24px;
|
|
font-family: var(--mono);
|
|
font-size: 11px;
|
|
letter-spacing: 0.16em;
|
|
text-transform: uppercase;
|
|
color: var(--ink-faint);
|
|
text-decoration: none;
|
|
border-bottom: 1px solid var(--ink-faint);
|
|
padding-bottom: 2px;
|
|
transition: all 200ms var(--ease);
|
|
}
|
|
.return-link:hover { color: var(--copper); border-color: var(--copper); }
|
|
|
|
/* ───────── Variant grid ───── */
|
|
.grid {
|
|
max-width: 1320px;
|
|
margin: 0 auto;
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
|
|
gap: 56px 40px;
|
|
}
|
|
|
|
article.variant {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.stage {
|
|
position: relative;
|
|
aspect-ratio: 1;
|
|
width: 100%;
|
|
background:
|
|
radial-gradient(ellipse at center, var(--bg-card-2) 0%, var(--bg-deep) 80%);
|
|
border: 1px solid var(--rule);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: visible;
|
|
margin-bottom: 22px;
|
|
}
|
|
|
|
.label-row {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 10px;
|
|
border-bottom: 1px solid var(--rule);
|
|
padding-bottom: 10px;
|
|
margin-bottom: 14px;
|
|
}
|
|
.label-num {
|
|
font-family: var(--mono);
|
|
font-size: 10px;
|
|
letter-spacing: 0.2em;
|
|
color: var(--copper);
|
|
}
|
|
.label-name {
|
|
font-family: var(--serif);
|
|
font-style: italic;
|
|
font-size: 22px;
|
|
font-weight: 400;
|
|
font-variation-settings: 'opsz' 60;
|
|
flex: 1;
|
|
}
|
|
.label-tag {
|
|
font-family: var(--mono);
|
|
font-size: 9px;
|
|
letter-spacing: 0.18em;
|
|
text-transform: uppercase;
|
|
color: var(--ink-faint);
|
|
padding: 3px 8px;
|
|
border: 1px solid var(--rule-strong);
|
|
}
|
|
.tag-css { color: var(--jade, #7AB294); border-color: rgba(122, 178, 148, 0.3); }
|
|
.tag-needs-js { color: var(--copper); border-color: var(--copper-lo); }
|
|
|
|
p.descr {
|
|
font-family: var(--sans);
|
|
font-size: 13px;
|
|
line-height: 1.6;
|
|
color: var(--ink-soft);
|
|
}
|
|
p.descr strong {
|
|
color: var(--ink);
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* ───────── Shared vinyl base ───── */
|
|
.vinyl {
|
|
position: relative;
|
|
width: 86%;
|
|
aspect-ratio: 1;
|
|
border-radius: 50%;
|
|
background:
|
|
radial-gradient(circle at 50% 50%,
|
|
#0a0907 0%, #0a0907 18%,
|
|
#1a1611 18.3%, #0a0907 18.6%,
|
|
#14110c 22%, #0a0907 22.3%,
|
|
#14110c 26%, #0a0907 26.3%,
|
|
#14110c 30%, #0a0907 30.3%,
|
|
#14110c 34%, #0a0907 34.3%,
|
|
#14110c 38%, #0a0907 38.3%,
|
|
#14110c 42%, #0a0907 42.3%,
|
|
#14110c 46%, #0a0907 46.3%,
|
|
#1c1812 47%, #0a0907 100%);
|
|
box-shadow:
|
|
inset 0 0 60px rgba(0, 0, 0, 0.7),
|
|
0 30px 80px rgba(0, 0, 0, 0.6),
|
|
0 6px 20px rgba(0, 0, 0, 0.5);
|
|
animation: spin 14s linear infinite;
|
|
}
|
|
@keyframes spin { to { transform: rotate(360deg); } }
|
|
|
|
.vinyl::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 12%;
|
|
border-radius: 50%;
|
|
background:
|
|
conic-gradient(from 0deg,
|
|
rgba(255,255,255,0.04) 0deg,
|
|
transparent 30deg,
|
|
rgba(255,255,255,0.06) 90deg,
|
|
transparent 150deg,
|
|
rgba(255,255,255,0.03) 210deg,
|
|
transparent 270deg,
|
|
rgba(255,255,255,0.05) 330deg,
|
|
transparent 360deg);
|
|
mix-blend-mode: screen;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.vinyl-label {
|
|
position: absolute;
|
|
inset: 28%;
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
box-shadow:
|
|
inset 0 0 24px rgba(0, 0, 0, 0.4),
|
|
0 0 0 4px var(--bg-deep),
|
|
0 0 0 5px var(--copper-lo);
|
|
background: var(--bg-card);
|
|
z-index: 1;
|
|
}
|
|
.vinyl-label::after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 8%; height: 8%;
|
|
top: 46%; left: 46%;
|
|
border-radius: 50%;
|
|
background: var(--bg-deep);
|
|
box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.1);
|
|
z-index: 3;
|
|
}
|
|
.vinyl-label img,
|
|
.vinyl-label svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
display: block;
|
|
}
|
|
|
|
/* Album art (shared SVG used by every variant) */
|
|
.album-art {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
/* Tonearm (decorative, on every stage so they read as "now playing") */
|
|
.tonearm {
|
|
position: absolute;
|
|
top: -4%;
|
|
right: -2%;
|
|
width: 50%;
|
|
height: 50%;
|
|
pointer-events: none;
|
|
transform-origin: 88% 12%;
|
|
transform: rotate(0deg);
|
|
z-index: 5;
|
|
filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5));
|
|
}
|
|
|
|
/* ════════════════════════════════════════════════════════════════
|
|
ORIGINAL — current shipping look (control)
|
|
════════════════════════════════════════════════════════════════ */
|
|
.v0 .stage { /* nothing extra */ }
|
|
|
|
/* ════════════════════════════════════════════════════════════════
|
|
VARIANT 1 — Sleeve frame
|
|
Vinyl peeks out of a square cardstock sleeve.
|
|
════════════════════════════════════════════════════════════════ */
|
|
.v1 .stage {
|
|
background:
|
|
radial-gradient(ellipse at center, #1a1611 0%, var(--bg-deep) 80%);
|
|
}
|
|
.v1 .sleeve-stage {
|
|
position: relative;
|
|
width: 90%;
|
|
aspect-ratio: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.v1 .sleeve {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 6%;
|
|
width: 70%;
|
|
aspect-ratio: 1;
|
|
background: var(--bg-card-2);
|
|
box-shadow:
|
|
inset 0 0 0 1px rgba(0,0,0,0.4),
|
|
inset 4px 4px 24px rgba(0,0,0,0.35),
|
|
-2px 8px 24px rgba(0,0,0,0.5),
|
|
-4px 16px 40px rgba(0,0,0,0.35);
|
|
z-index: 3;
|
|
/* Casually-placed tilt — like a sleeve set down on a console */
|
|
transform: rotate(-3.2deg);
|
|
transform-origin: 60% 60%;
|
|
/* worn-edge cardstock effect */
|
|
filter: contrast(1.05) brightness(0.97);
|
|
}
|
|
.v1 .sleeve::before {
|
|
/* Cardstock paper grain */
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.10 0 0 0 0 0.08 0 0 0 0 0.06 0 0 0 0.7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
|
|
mix-blend-mode: multiply;
|
|
pointer-events: none;
|
|
opacity: 0.6;
|
|
}
|
|
.v1 .sleeve::after {
|
|
/* Ring-wear: faint circle from the LP rubbing the cardstock */
|
|
content: "";
|
|
position: absolute;
|
|
inset: 6%;
|
|
border-radius: 50%;
|
|
border: 1px solid rgba(0,0,0,0.25);
|
|
box-shadow:
|
|
inset 0 0 12px rgba(0,0,0,0.18),
|
|
inset 0 0 0 1px rgba(255,255,255,0.04);
|
|
pointer-events: none;
|
|
}
|
|
.v1 .sleeve-art {
|
|
position: absolute;
|
|
inset: 6%;
|
|
z-index: 1;
|
|
filter: contrast(0.88) saturate(0.6) brightness(0.88);
|
|
opacity: 0.85;
|
|
}
|
|
.v1 .sleeve-art svg { width: 100%; height: 100%; }
|
|
/* Worn corner notch */
|
|
.v1 .sleeve-corner {
|
|
position: absolute;
|
|
width: 14%;
|
|
height: 14%;
|
|
bottom: -1px;
|
|
right: -1px;
|
|
background: var(--bg-deep);
|
|
clip-path: polygon(100% 0, 100% 100%, 0 100%);
|
|
opacity: 0.7;
|
|
z-index: 4;
|
|
}
|
|
.v1 .vinyl-wrap {
|
|
position: absolute;
|
|
right: -2%;
|
|
top: 16%;
|
|
width: 70%;
|
|
aspect-ratio: 1;
|
|
z-index: 2;
|
|
}
|
|
.v1 .vinyl-wrap .vinyl {
|
|
width: 100%;
|
|
}
|
|
.v1 .vinyl-label {
|
|
/* Smaller label since the disc here is showing; album art lives on sleeve */
|
|
inset: 32%;
|
|
background: #2E2820;
|
|
box-shadow:
|
|
inset 0 0 18px rgba(0,0,0,0.4),
|
|
0 0 0 3px var(--bg-deep),
|
|
0 0 0 4px var(--copper-lo);
|
|
}
|
|
.v1 .vinyl-label::before {
|
|
/* Plain-color label with faux pressing imprint */
|
|
content: "REF · 24";
|
|
position: absolute;
|
|
inset: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-family: var(--mono);
|
|
font-size: 10px;
|
|
letter-spacing: 0.3em;
|
|
color: var(--copper);
|
|
z-index: 2;
|
|
}
|
|
.v1 .tonearm {
|
|
right: -8%;
|
|
top: 8%;
|
|
width: 44%;
|
|
height: 44%;
|
|
}
|
|
|
|
/* ════════════════════════════════════════════════════════════════
|
|
VARIANT 2 — Sheen + paper grain + dead-wax + off-center
|
|
The high-impact variant.
|
|
════════════════════════════════════════════════════════════════ */
|
|
.v2 .vinyl-label {
|
|
/* Slightly off-center spindle for "pressed off-axis" feel */
|
|
inset: 27% 27% 29% 29%;
|
|
}
|
|
.v2 .vinyl-label::after {
|
|
/* Spindle hole offset 1.5% from true center */
|
|
top: 47%;
|
|
left: 47.5%;
|
|
}
|
|
/* Paper grain on the label, multiplied so it sits inside the print */
|
|
.v2 .vinyl-label .label-grain {
|
|
position: absolute;
|
|
inset: 0;
|
|
background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.05 0 0 0 0 0.04 0 0 0 0 0.03 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
|
|
mix-blend-mode: multiply;
|
|
pointer-events: none;
|
|
z-index: 4;
|
|
}
|
|
/* Dead-wax: micro-text engraved between the label and the run-out groove */
|
|
.v2 .dead-wax {
|
|
position: absolute;
|
|
inset: 21%;
|
|
border-radius: 50%;
|
|
z-index: 0;
|
|
pointer-events: none;
|
|
/* Animation OFF the disc — engraving is part of the press, so it does spin with the vinyl */
|
|
animation: spin 14s linear infinite;
|
|
}
|
|
.v2 .dead-wax svg { width: 100%; height: 100%; }
|
|
/* Reflection sweep — fixed in viewer space, not rotating with the disc */
|
|
.v2 .sheen {
|
|
position: absolute;
|
|
inset: 0;
|
|
border-radius: 50%;
|
|
pointer-events: none;
|
|
background:
|
|
conic-gradient(from 110deg,
|
|
transparent 0deg,
|
|
rgba(255, 245, 220, 0) 30deg,
|
|
rgba(255, 245, 220, 0.07) 60deg,
|
|
rgba(255, 245, 220, 0.14) 80deg,
|
|
rgba(255, 245, 220, 0.07) 100deg,
|
|
transparent 140deg,
|
|
transparent 280deg,
|
|
rgba(255, 245, 220, 0.04) 305deg,
|
|
rgba(255, 245, 220, 0.08) 320deg,
|
|
rgba(255, 245, 220, 0.04) 335deg,
|
|
transparent 360deg);
|
|
mix-blend-mode: screen;
|
|
z-index: 4;
|
|
}
|
|
|
|
/* ════════════════════════════════════════════════════════════════
|
|
VARIANT 3 — Tone-graded album art (duotone)
|
|
════════════════════════════════════════════════════════════════ */
|
|
.v3 .vinyl-label .album-art {
|
|
filter:
|
|
saturate(0.35)
|
|
sepia(0.45)
|
|
hue-rotate(345deg)
|
|
brightness(0.85)
|
|
contrast(1.18);
|
|
}
|
|
.v3 .vinyl-label::before {
|
|
/* Subtle copper duotone overlay tints the highlights */
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
background:
|
|
linear-gradient(135deg,
|
|
rgba(224, 128, 56, 0.18) 0%,
|
|
rgba(31, 78, 61, 0.10) 50%,
|
|
rgba(0,0,0,0.18) 100%);
|
|
mix-blend-mode: overlay;
|
|
z-index: 2;
|
|
pointer-events: none;
|
|
}
|
|
.v3 .vinyl-label::after {
|
|
z-index: 4;
|
|
}
|
|
.v3 .vinyl-label .vignette {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: radial-gradient(circle at 50% 45%,
|
|
transparent 35%,
|
|
rgba(0,0,0,0.45) 100%);
|
|
z-index: 3;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* ════════════════════════════════════════════════════════════════
|
|
VARIANT 4 — Sleeve-to-disc reveal animation
|
|
(Hover the card to see the disc slide out)
|
|
════════════════════════════════════════════════════════════════ */
|
|
.v4 .sleeve-stage {
|
|
position: relative;
|
|
width: 90%;
|
|
aspect-ratio: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.v4 .sleeve {
|
|
position: absolute;
|
|
left: 14%;
|
|
top: 12%;
|
|
width: 72%;
|
|
aspect-ratio: 1;
|
|
background: var(--bg-card-2);
|
|
box-shadow:
|
|
inset 0 0 0 1px rgba(0,0,0,0.4),
|
|
-2px 6px 18px rgba(0,0,0,0.5);
|
|
z-index: 4;
|
|
overflow: hidden;
|
|
}
|
|
.v4 .sleeve::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.10 0 0 0 0 0.08 0 0 0 0 0.06 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
|
|
mix-blend-mode: multiply;
|
|
pointer-events: none;
|
|
z-index: 2;
|
|
}
|
|
.v4 .sleeve-art {
|
|
width: 100%; height: 100%;
|
|
filter: contrast(0.92) saturate(0.7) brightness(0.92);
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
.v4 .vinyl-slot {
|
|
position: absolute;
|
|
left: 14%;
|
|
top: 12%;
|
|
width: 72%;
|
|
aspect-ratio: 1;
|
|
z-index: 3;
|
|
transition: transform 1.2s var(--ease-out);
|
|
}
|
|
.v4 .vinyl-slot .vinyl {
|
|
width: 100%;
|
|
animation-play-state: paused;
|
|
transition: animation-play-state 0.4s;
|
|
}
|
|
.v4 .stage:hover .vinyl-slot {
|
|
transform: translateX(46%);
|
|
}
|
|
.v4 .stage:hover .vinyl-slot .vinyl {
|
|
animation-play-state: running;
|
|
}
|
|
.v4 .hover-hint {
|
|
position: absolute;
|
|
bottom: 12px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
font-family: var(--mono);
|
|
font-size: 9px;
|
|
letter-spacing: 0.24em;
|
|
text-transform: uppercase;
|
|
color: var(--ink-faint);
|
|
pointer-events: none;
|
|
z-index: 10;
|
|
}
|
|
.v4 .stage:hover .hover-hint { opacity: 0.4; }
|
|
|
|
/* Note row at top of every variant */
|
|
.note {
|
|
position: absolute;
|
|
top: 12px;
|
|
left: 14px;
|
|
font-family: var(--mono);
|
|
font-size: 9px;
|
|
letter-spacing: 0.2em;
|
|
text-transform: uppercase;
|
|
color: var(--ink-faint);
|
|
z-index: 10;
|
|
}
|
|
|
|
/* ───────── Mobile ───── */
|
|
@media (max-width: 720px) {
|
|
body { padding: 36px 16px 60px; }
|
|
.grid { gap: 36px 20px; grid-template-columns: 1fr; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<header class="page-head">
|
|
<div class="kicker">Studio Reference · Album Art Variants</div>
|
|
<h1>Vinyl Cover Treatments</h1>
|
|
<p class="subtitle">Five renderings of the same disc · Hover variant 04 for the sleeve reveal</p>
|
|
<a class="return-link" href="/">← Return to player</a>
|
|
</header>
|
|
|
|
<div class="grid">
|
|
|
|
<!-- ═════════ ORIGINAL ═════════ -->
|
|
<article class="variant v0">
|
|
<div class="stage">
|
|
<span class="note">As shipping</span>
|
|
<div class="vinyl">
|
|
<div class="vinyl-label">
|
|
<svg viewBox="0 0 400 400" class="album-art" xmlns="http://www.w3.org/2000/svg">
|
|
<defs>
|
|
<linearGradient id="bgA" x1="0" y1="0" x2="1" y2="1">
|
|
<stop offset="0%" stop-color="#1F4E3D"/>
|
|
<stop offset="55%" stop-color="#143E2F"/>
|
|
<stop offset="100%" stop-color="#0a2519"/>
|
|
</linearGradient>
|
|
<radialGradient id="vigA" cx="50%" cy="50%" r="70%">
|
|
<stop offset="55%" stop-color="rgba(0,0,0,0)"/>
|
|
<stop offset="100%" stop-color="rgba(0,0,0,0.55)"/>
|
|
</radialGradient>
|
|
</defs>
|
|
<rect width="400" height="400" fill="url(#bgA)"/>
|
|
<g stroke="#e08038" stroke-width="1" fill="none" opacity="0.55">
|
|
<circle cx="200" cy="200" r="60"/>
|
|
<circle cx="200" cy="200" r="100"/>
|
|
<circle cx="200" cy="200" r="140"/>
|
|
<circle cx="200" cy="200" r="180"/>
|
|
</g>
|
|
<text x="200" y="195" text-anchor="middle" font-family="serif" font-style="italic" fill="#f2ebdc" font-size="34">Reference</text>
|
|
<text x="200" y="225" text-anchor="middle" font-family="monospace" fill="#e08038" font-size="11" letter-spacing="4">VOL · I</text>
|
|
<text x="200" y="368" text-anchor="middle" font-family="monospace" fill="#9c937f" font-size="9" letter-spacing="6" opacity="0.6">STUDIO PRESSING</text>
|
|
<rect width="400" height="400" fill="url(#vigA)"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<svg class="tonearm" viewBox="0 0 200 200" aria-hidden="true">
|
|
<defs>
|
|
<linearGradient id="armGrad0" x1="0" x2="1">
|
|
<stop offset="0" stop-color="#3a3528"/>
|
|
<stop offset="0.5" stop-color="#9C937F"/>
|
|
<stop offset="1" stop-color="#5C5447"/>
|
|
</linearGradient>
|
|
</defs>
|
|
<circle cx="176" cy="24" r="14" fill="#1a1611" stroke="#3A3528" stroke-width="1"/>
|
|
<circle cx="176" cy="24" r="6" fill="#3A3528"/>
|
|
<circle cx="176" cy="24" r="2" fill="#E08038"/>
|
|
<line x1="176" y1="24" x2="64" y2="136" stroke="url(#armGrad0)" stroke-width="3.5" stroke-linecap="round"/>
|
|
<rect x="180" y="14" width="14" height="20" fill="#26211A" stroke="#3A3528"/>
|
|
<rect x="56" y="128" width="22" height="18" rx="2" fill="#26211A" stroke="#3A3528" transform="rotate(-45 67 137)"/>
|
|
<circle cx="62" cy="138" r="3" fill="#E08038" opacity="0.8"/>
|
|
<circle cx="62" cy="138" r="6" fill="none" stroke="#E08038" stroke-width="0.5" opacity="0.4"/>
|
|
</svg>
|
|
</div>
|
|
<div class="label-row">
|
|
<span class="label-num">00</span>
|
|
<span class="label-name">Original</span>
|
|
<span class="label-tag tag-css">control</span>
|
|
</div>
|
|
<p class="descr">Current shipping vinyl: pressed grooves, copper-bordered label rim, full album art on the label. Reference baseline for everything below.</p>
|
|
</article>
|
|
|
|
<!-- ═════════ VARIANT 1 — SLEEVE FRAME ═════════ -->
|
|
<article class="variant v1">
|
|
<div class="stage">
|
|
<span class="note">CSS only</span>
|
|
<div class="sleeve-stage">
|
|
<div class="sleeve">
|
|
<div class="sleeve-art">
|
|
<svg viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
|
|
<defs>
|
|
<linearGradient id="bgB" x1="0" y1="0" x2="1" y2="1">
|
|
<stop offset="0%" stop-color="#1F4E3D"/>
|
|
<stop offset="55%" stop-color="#143E2F"/>
|
|
<stop offset="100%" stop-color="#0a2519"/>
|
|
</linearGradient>
|
|
</defs>
|
|
<rect width="400" height="400" fill="url(#bgB)"/>
|
|
<g stroke="#e08038" stroke-width="1" fill="none" opacity="0.55">
|
|
<circle cx="200" cy="200" r="60"/>
|
|
<circle cx="200" cy="200" r="100"/>
|
|
<circle cx="200" cy="200" r="140"/>
|
|
<circle cx="200" cy="200" r="180"/>
|
|
</g>
|
|
<text x="200" y="195" text-anchor="middle" font-family="serif" font-style="italic" fill="#f2ebdc" font-size="34">Reference</text>
|
|
<text x="200" y="225" text-anchor="middle" font-family="monospace" fill="#e08038" font-size="11" letter-spacing="4">VOL · I</text>
|
|
<text x="200" y="368" text-anchor="middle" font-family="monospace" fill="#9c937f" font-size="9" letter-spacing="6" opacity="0.6">STUDIO PRESSING</text>
|
|
</svg>
|
|
</div>
|
|
<div class="sleeve-corner"></div>
|
|
</div>
|
|
<div class="vinyl-wrap">
|
|
<div class="vinyl">
|
|
<div class="vinyl-label"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<svg class="tonearm" viewBox="0 0 200 200" aria-hidden="true">
|
|
<use href="#armGrad0"/>
|
|
<circle cx="176" cy="24" r="14" fill="#1a1611" stroke="#3A3528" stroke-width="1"/>
|
|
<circle cx="176" cy="24" r="6" fill="#3A3528"/>
|
|
<circle cx="176" cy="24" r="2" fill="#E08038"/>
|
|
<line x1="176" y1="24" x2="80" y2="120" stroke="#9C937F" stroke-width="3.5" stroke-linecap="round"/>
|
|
<rect x="180" y="14" width="14" height="20" fill="#26211A" stroke="#3A3528"/>
|
|
<rect x="72" y="112" width="22" height="18" rx="2" fill="#26211A" stroke="#3A3528" transform="rotate(-45 83 121)"/>
|
|
<circle cx="78" cy="122" r="3" fill="#E08038" opacity="0.8"/>
|
|
</svg>
|
|
</div>
|
|
<div class="label-row">
|
|
<span class="label-num">01</span>
|
|
<span class="label-name">Sleeve Frame</span>
|
|
<span class="label-tag tag-css">CSS only</span>
|
|
</div>
|
|
<p class="descr">Vinyl peeks out of a square cardstock <strong>sleeve</strong> — paper grain, ring-wear circle, worn-corner notch. The album art lives on the sleeve; the disc gets a plain typographic label. Reads instantly as "record on a turntable", not "spinning disc."</p>
|
|
</article>
|
|
|
|
<!-- ═════════ VARIANT 2 — SHEEN + GRAIN + DEAD-WAX ═════════ -->
|
|
<article class="variant v2">
|
|
<div class="stage">
|
|
<span class="note">CSS only · highest ROI</span>
|
|
<div class="vinyl">
|
|
<div class="dead-wax">
|
|
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
|
|
<defs>
|
|
<path id="dwPath" d="M 50,50 m -36,0 a 36,36 0 1,1 72,0 a 36,36 0 1,1 -72,0"/>
|
|
</defs>
|
|
<text font-family="monospace" font-size="2.4" fill="#3a3528" letter-spacing="0.45" opacity="0.85">
|
|
<textPath href="#dwPath">· STUDIO REFERENCE PRESSING · A-SIDE · MASTER LACQUER 24-S · DOLG.AD MASTERED · ½ SPEED</textPath>
|
|
</text>
|
|
</svg>
|
|
</div>
|
|
<div class="vinyl-label">
|
|
<svg viewBox="0 0 400 400" class="album-art" xmlns="http://www.w3.org/2000/svg">
|
|
<defs>
|
|
<linearGradient id="bgC" x1="0" y1="0" x2="1" y2="1">
|
|
<stop offset="0%" stop-color="#1F4E3D"/>
|
|
<stop offset="55%" stop-color="#143E2F"/>
|
|
<stop offset="100%" stop-color="#0a2519"/>
|
|
</linearGradient>
|
|
</defs>
|
|
<rect width="400" height="400" fill="url(#bgC)"/>
|
|
<g stroke="#e08038" stroke-width="1" fill="none" opacity="0.55">
|
|
<circle cx="200" cy="200" r="60"/>
|
|
<circle cx="200" cy="200" r="100"/>
|
|
<circle cx="200" cy="200" r="140"/>
|
|
<circle cx="200" cy="200" r="180"/>
|
|
</g>
|
|
<text x="200" y="195" text-anchor="middle" font-family="serif" font-style="italic" fill="#f2ebdc" font-size="34">Reference</text>
|
|
<text x="200" y="225" text-anchor="middle" font-family="monospace" fill="#e08038" font-size="11" letter-spacing="4">VOL · I</text>
|
|
<text x="200" y="368" text-anchor="middle" font-family="monospace" fill="#9c937f" font-size="9" letter-spacing="6" opacity="0.6">STUDIO PRESSING</text>
|
|
</svg>
|
|
<div class="label-grain"></div>
|
|
</div>
|
|
<div class="sheen"></div>
|
|
</div>
|
|
<svg class="tonearm" viewBox="0 0 200 200" aria-hidden="true">
|
|
<circle cx="176" cy="24" r="14" fill="#1a1611" stroke="#3A3528" stroke-width="1"/>
|
|
<circle cx="176" cy="24" r="6" fill="#3A3528"/>
|
|
<circle cx="176" cy="24" r="2" fill="#E08038"/>
|
|
<line x1="176" y1="24" x2="64" y2="136" stroke="#9C937F" stroke-width="3.5" stroke-linecap="round"/>
|
|
<rect x="180" y="14" width="14" height="20" fill="#26211A" stroke="#3A3528"/>
|
|
<rect x="56" y="128" width="22" height="18" rx="2" fill="#26211A" stroke="#3A3528" transform="rotate(-45 67 137)"/>
|
|
<circle cx="62" cy="138" r="3" fill="#E08038" opacity="0.8"/>
|
|
</svg>
|
|
</div>
|
|
<div class="label-row">
|
|
<span class="label-num">02</span>
|
|
<span class="label-name">Sheen, Grain & Dead-Wax</span>
|
|
<span class="label-tag tag-css">CSS only</span>
|
|
</div>
|
|
<p class="descr">Three layers added to the existing vinyl: a <strong>fixed reflection sweep</strong> (doesn't rotate with the disc — the studio-light look), <strong>paper grain</strong> on the label so the print sits in cardstock, and a <strong>dead-wax engraving</strong> of the master‑lacquer code spinning with the disc. Off-center spindle by 1.5%. Highest visual ROI for the smallest amount of new code.</p>
|
|
</article>
|
|
|
|
<!-- ═════════ VARIANT 3 — TONE-GRADED ═════════ -->
|
|
<article class="variant v3">
|
|
<div class="stage">
|
|
<span class="note">CSS only</span>
|
|
<div class="vinyl">
|
|
<div class="vinyl-label">
|
|
<svg viewBox="0 0 400 400" class="album-art" xmlns="http://www.w3.org/2000/svg">
|
|
<defs>
|
|
<linearGradient id="bgD" x1="0" y1="0" x2="1" y2="1">
|
|
<stop offset="0%" stop-color="#1F4E3D"/>
|
|
<stop offset="55%" stop-color="#143E2F"/>
|
|
<stop offset="100%" stop-color="#0a2519"/>
|
|
</linearGradient>
|
|
</defs>
|
|
<rect width="400" height="400" fill="url(#bgD)"/>
|
|
<g stroke="#e08038" stroke-width="1" fill="none" opacity="0.55">
|
|
<circle cx="200" cy="200" r="60"/>
|
|
<circle cx="200" cy="200" r="100"/>
|
|
<circle cx="200" cy="200" r="140"/>
|
|
<circle cx="200" cy="200" r="180"/>
|
|
</g>
|
|
<text x="200" y="195" text-anchor="middle" font-family="serif" font-style="italic" fill="#f2ebdc" font-size="34">Reference</text>
|
|
<text x="200" y="225" text-anchor="middle" font-family="monospace" fill="#e08038" font-size="11" letter-spacing="4">VOL · I</text>
|
|
<text x="200" y="368" text-anchor="middle" font-family="monospace" fill="#9c937f" font-size="9" letter-spacing="6" opacity="0.6">STUDIO PRESSING</text>
|
|
</svg>
|
|
<div class="vignette"></div>
|
|
</div>
|
|
</div>
|
|
<svg class="tonearm" viewBox="0 0 200 200" aria-hidden="true">
|
|
<circle cx="176" cy="24" r="14" fill="#1a1611" stroke="#3A3528" stroke-width="1"/>
|
|
<circle cx="176" cy="24" r="6" fill="#3A3528"/>
|
|
<circle cx="176" cy="24" r="2" fill="#E08038"/>
|
|
<line x1="176" y1="24" x2="64" y2="136" stroke="#9C937F" stroke-width="3.5" stroke-linecap="round"/>
|
|
<rect x="180" y="14" width="14" height="20" fill="#26211A" stroke="#3A3528"/>
|
|
<rect x="56" y="128" width="22" height="18" rx="2" fill="#26211A" stroke="#3A3528" transform="rotate(-45 67 137)"/>
|
|
<circle cx="62" cy="138" r="3" fill="#E08038" opacity="0.8"/>
|
|
</svg>
|
|
</div>
|
|
<div class="label-row">
|
|
<span class="label-num">03</span>
|
|
<span class="label-name">Tone-Graded Cover</span>
|
|
<span class="label-tag tag-css">CSS only</span>
|
|
</div>
|
|
<p class="descr">Same disc, but the album art on the label is <strong>color-graded</strong> — duotone copper/emerald, deeper saturation drop, vignette around the label rim. Effect: every album cover ends up looking like it came from the same pressing plant, matching the Studio Reference chrome.</p>
|
|
</article>
|
|
|
|
<!-- ═════════ VARIANT 4 — SLEEVE-TO-DISC REVEAL ═════════ -->
|
|
<article class="variant v4">
|
|
<div class="stage">
|
|
<span class="note">CSS hover · JS in production</span>
|
|
<div class="sleeve-stage">
|
|
<div class="sleeve">
|
|
<div class="sleeve-art">
|
|
<svg viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
|
|
<defs>
|
|
<linearGradient id="bgE" x1="0" y1="0" x2="1" y2="1">
|
|
<stop offset="0%" stop-color="#1F4E3D"/>
|
|
<stop offset="55%" stop-color="#143E2F"/>
|
|
<stop offset="100%" stop-color="#0a2519"/>
|
|
</linearGradient>
|
|
</defs>
|
|
<rect width="400" height="400" fill="url(#bgE)"/>
|
|
<g stroke="#e08038" stroke-width="1" fill="none" opacity="0.55">
|
|
<circle cx="200" cy="200" r="60"/>
|
|
<circle cx="200" cy="200" r="100"/>
|
|
<circle cx="200" cy="200" r="140"/>
|
|
<circle cx="200" cy="200" r="180"/>
|
|
</g>
|
|
<text x="200" y="195" text-anchor="middle" font-family="serif" font-style="italic" fill="#f2ebdc" font-size="34">Reference</text>
|
|
<text x="200" y="225" text-anchor="middle" font-family="monospace" fill="#e08038" font-size="11" letter-spacing="4">VOL · I</text>
|
|
<text x="200" y="368" text-anchor="middle" font-family="monospace" fill="#9c937f" font-size="9" letter-spacing="6" opacity="0.6">STUDIO PRESSING</text>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div class="vinyl-slot">
|
|
<div class="vinyl">
|
|
<div class="vinyl-label"></div>
|
|
</div>
|
|
</div>
|
|
<span class="hover-hint">Hover to play</span>
|
|
</div>
|
|
<svg class="tonearm" viewBox="0 0 200 200" aria-hidden="true">
|
|
<circle cx="176" cy="24" r="14" fill="#1a1611" stroke="#3A3528" stroke-width="1"/>
|
|
<circle cx="176" cy="24" r="6" fill="#3A3528"/>
|
|
<circle cx="176" cy="24" r="2" fill="#E08038"/>
|
|
<line x1="176" y1="24" x2="64" y2="136" stroke="#9C937F" stroke-width="3.5" stroke-linecap="round"/>
|
|
<rect x="180" y="14" width="14" height="20" fill="#26211A" stroke="#3A3528"/>
|
|
<rect x="56" y="128" width="22" height="18" rx="2" fill="#26211A" stroke="#3A3528" transform="rotate(-45 67 137)"/>
|
|
<circle cx="62" cy="138" r="3" fill="#E08038" opacity="0.8"/>
|
|
</svg>
|
|
</div>
|
|
<div class="label-row">
|
|
<span class="label-num">04</span>
|
|
<span class="label-name">Sleeve-to-Disc Reveal</span>
|
|
<span class="label-tag tag-needs-js">needs JS</span>
|
|
</div>
|
|
<p class="descr"><strong>Hover this card</strong> — the disc slides out of the sleeve and starts spinning. In production, this would be wired to the play/pause state: paused = tucked-in sleeve view, playing = disc revealed and spinning. Most evocative, also the most code (animation choreography + state coupling).</p>
|
|
</article>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|