) --------------- */
.vinyl {
position: relative;
aspect-ratio: 1;
border-radius: 50%;
border: 2px solid var(--rec-disc-edge, #63666E);
background:
radial-gradient(circle, #121113 0 1.5%, transparent 1.6%),
conic-gradient(from 20deg, transparent 0 10%, rgba(222, 228, 140, 0.12) 14%, transparent 20% 60%, rgba(222, 228, 140, 0.1) 64%, transparent 70%),
repeating-radial-gradient(circle, #26252a 0 1px, #0c0b0d 1px 3px);
display: grid;
place-items: center;
overflow: hidden;
}
.vinyl__label {
width: 38%;
aspect-ratio: 1;
object-fit: cover;
border-radius: 50%;
transform: scale(1.04);
clip-path: circle(47%);
}
/* spindle hole on top of the label */
.vinyl::after {
content: "";
position: absolute;
width: 2.2%;
aspect-ratio: 1;
border-radius: 50%;
background: #121113;
}
/* ---- Sleeve ------------------------------------------------------------ */
.record__sleeve {
position: absolute;
inset: 0 auto 0 0;
z-index: 2;
aspect-ratio: 1;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 5%;
background:
radial-gradient(circle, var(--rec-dots) 22%, transparent 24%) 0 0 / 9px 9px,
var(--rec-sleeve);
color: var(--rec-sleeve-ink);
border: 3px solid var(--rec-edge);
box-shadow: var(--rec-shadow);
overflow: hidden;
}
/* ring wear */
.record__sleeve::after {
content: "";
position: absolute;
inset: 6%;
border: 3px solid rgba(18, 17, 19, 0.28);
border-radius: 50%;
}
.record__cat {
font-weight: 700;
font-size: max(0.75rem, 2.3cqw);
letter-spacing: 0.4em;
}
.record__num {
font-family: var(--rec-poster);
font-size: 27cqw;
line-height: 0.78;
color: var(--rec-num);
margin-left: -0.04em;
}
.record__side { font-size: max(0.6rem, 1.1cqw); letter-spacing: 0.2em; }
/* ---- Disc position ----------------------------------------------------- */
/*
--so : scroll-out amount, 0 (inside the sleeve) → 1 (fully out).
Written by assets/js/record-scroll.js; defaults to 1 without it.
--hov-*: the hover nudge, layered on top so hover still works when out.
--spin : extra rotation from scripts (scratching / playing), on the disc.
*/
@property --hov-x { syntax: "
"; inherits: true; initial-value: 0%; }
@property --hov-r { syntax: ""; inherits: true; initial-value: 0deg; }
.record {
--rec-travel: 95%;
transition: --hov-x 0.6s cubic-bezier(.2, .7, .2, 1), --hov-r 0.6s cubic-bezier(.2, .7, .2, 1);
}
.record:hover { --hov-x: 6%; --hov-r: 40deg; }
.record__disc {
position: absolute;
top: 3%;
right: 0;
z-index: 1;
height: 94%;
transform:
translateX(calc((var(--so, 1) - 1) * var(--rec-travel) + var(--hov-x)))
rotate(calc(var(--so, 1) * 220deg + var(--hov-r) + var(--spin, 0deg)));
}
/* ---- Deck: tonearm + playing state (optional) ---------------------------
Add inside .record and
toggle .is-playing on .record (assets/js/v3/lokust.js does this). */
.tonearm {
position: absolute;
z-index: 4;
top: -6%;
right: 3%;
width: 1.2%;
min-width: 5px;
height: 62%;
background: var(--rec-disc-edge);
border-radius: 999px;
transform-origin: 50% 4%;
transform: rotate(-28deg);
transition: transform 0.9s cubic-bezier(.3, .7, .3, 1);
pointer-events: none;
}
.tonearm::before { /* pivot */
content: "";
position: absolute;
top: -0.4rem;
left: 50%;
width: 1.6rem;
aspect-ratio: 1;
border-radius: 50%;
background: var(--rec-disc-edge);
border: 3px solid var(--rec-edge);
transform: translateX(-50%);
}
.tonearm::after { /* head */
content: "";
position: absolute;
bottom: -0.4rem;
left: 50%;
width: 0.9rem;
height: 1.6rem;
background: var(--rec-num);
transform: translateX(-50%) rotate(20deg);
}
.record.is-playing { --so: 1 !important; --hov-x: 8%; --hov-r: 0deg; }
.record.is-playing .tonearm { transform: rotate(8deg); }
.record .stamp { transition: opacity 0.4s, transform 0.4s; }
.record.is-playing .stamp { opacity: 0; transform: rotate(-12deg) scale(0.9); }
.vinyl__label.is-flipping { animation: label-flip 0.6s; }
@keyframes label-flip { 50% { transform: scale(1.04) rotateY(90deg); } }
/* ---- Stamp ------------------------------------------------------------- */
.stamp {
position: absolute;
z-index: 3;
left: 38%;
bottom: -6%;
margin: 0;
padding: 0.3em 0.6em 0.2em;
border: 5px double var(--rec-stamp);
color: var(--rec-stamp);
font-family: var(--rec-poster);
font-size: max(1.3rem, 5cqw);
line-height: 0.95;
text-align: center;
text-transform: uppercase;
transform: rotate(-12deg);
background: rgba(18, 17, 19, 0.6);
}
/* ---- Stacked (narrow columns / phones) --------------------------------- */
@container (max-width: 34rem) {
.record { aspect-ratio: 1 / 1.45; }
.record__sleeve { inset: 0 auto auto 0; width: 88%; height: auto; }
.record__num { font-size: 46cqw; }
.record__cat { font-size: max(0.75rem, 3.6cqw); }
.record { --rec-travel: 62%; }
.record:hover { --hov-x: 4%; }
.record__disc {
top: auto; bottom: 0; right: 0; width: 80%; height: auto;
transform:
translateY(calc((var(--so, 1) - 1) * var(--rec-travel) + var(--hov-x)))
rotate(calc(var(--so, 1) * 220deg + var(--hov-r) + var(--spin, 0deg)));
}
.stamp { left: auto; right: 0; bottom: 30%; font-size: max(1.3rem, 8cqw); }
.tonearm { top: 46%; right: 1%; height: 32%; }
}