/* * ═══════════════════════════════════════════════════════════════════ * DAMN — Design System for DeepCut * ═══════════════════════════════════════════════════════════════════ * * Version: 1.0 * Updated: 2026-04-09 * * Fonts (load via Google Fonts before this file): * Bebas Neue — display, headings, buttons, labels * IBM Plex Sans — body text, UI prose * IBM Plex Mono — metadata, eyebrows, monospace elements * * Google Fonts link: * https://fonts.googleapis.com/css2?family=Bebas+Neue&family=IBM+Plex+Mono:ital,wght@0,300;0,400;0,500;1,300&family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;1,300&display=swap * * Usage: * Load this file after Google Fonts in your layout.php . * All tokens are CSS custom properties on :root. * Use var(--token-name) throughout all component CSS. * Never hardcode colors, fonts, or spacing — always use tokens. * * ═══════════════════════════════════════════════════════════════════ */ :root { /* ─── BACKGROUNDS ───────────────────────────────────────────── * Dark-primary. Surfaces layer from darkest to lightest. * --bg is the page background. * --surf is card/panel backgrounds. * --raised is elevated cards, hover states. * --edge is borders and 1px dividers. * --crease is stronger borders, rule weights. * ──────────────────────────────────────────────────────────── */ --bg: #0C0C0C; --surf: #141414; --raised: #1C1C1C; --edge: #282828; --crease: #343434; /* ─── FOREGROUNDS ───────────────────────────────────────────── * --ink is primary text — headlines, values, active labels. * --ink2 is body text and secondary prose. Floor for legibility. * --ink3 matches --ink2 — metadata, mono labels, muted text. * Nothing readable on dark backgrounds goes below #8A8880. * --ink4 is for borders and dividers ONLY — never use for text. * ──────────────────────────────────────────────────────────── */ --ink: #F2F0EC; --ink2: #8A8880; --ink3: #8A8880; --ink4: #343230; /* ─── ACCENT ────────────────────────────────────────────────── * Deep red. Nav border, CTAs, eyebrow markers, active states. * ──────────────────────────────────────────────────────────── */ --red: #C8221E; --red2: #961816; /* ─── STATUS ────────────────────────────────────────────────── * Semantic colors for UI feedback only. * Do NOT use these for emotional registers. * ──────────────────────────────────────────────────────────── */ --success: #22B86A; --warning: #E08A10; --error: #E02828; --info: #2888D8; /* ─── TYPOGRAPHY ────────────────────────────────────────────── * Three fonts, three roles. Never mix roles. * ──────────────────────────────────────────────────────────── */ --font-d: 'Bebas Neue', Impact, sans-serif; /* display */ --font-b: 'IBM Plex Sans', sans-serif; /* body */ --font-m: 'IBM Plex Mono', monospace; /* mono/meta */ /* ─── EASING ────────────────────────────────────────────────── * Standard easing curve for transitions and animations. * ──────────────────────────────────────────────────────────── */ --ease: cubic-bezier(0.16, 1, 0.3, 1); /* ─── SPACING ───────────────────────────────────────────────── * 4px base unit. Use multiples. * ──────────────────────────────────────────────────────────── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; /* ═══════════════════════════════════════════════════════════════ * EMOTIONAL REGISTER PALETTE — A2 * * 33 registers. Hue wheel logic — warm to cool, full circle. * No gray registers. Every register has chromatic identity. * * Hue groups (warm → cool → back to warm): * Reds rage, anger, frustration * Oranges defiance, restlessness * Ambers ambition, pride, humor, bitterness*, anxiety* * Yel-grn celebration, joy, playfulness * Greens resilience, contentment * Teals wonder, relief * Blues confusion, introspection, nostalgia * Blu-pur reverence, longing, yearning * Purples melancholy, grief, desperation, loneliness * Pinks devotion, love, tenderness, sensuality, guilt, numbness* * * * = formerly gray, replaced with chromatic equivalents: * anxiety → sickly yellow-green (uneasy, active) * bitterness → dark soured amber (warm, curdled) * numbness → cold slate blue (emotional distance) * * Usage: var(--reg-{name}) * ═══════════════════════════════════════════════════════════════ */ /* Reds — active aggression */ --reg-rage: #C01820; --reg-anger: #E02828; --reg-frustration: #D43020; /* Oranges — active drive */ --reg-defiance: #E06020; --reg-restlessness: #D06818; /* Ambers — pride, drive, levity */ --reg-ambition: #E8A010; --reg-pride: #D09020; --reg-humor: #E0C010; --reg-bitterness: #8A7230; --reg-anxiety: #9AA020; /* Yellow-greens — euphoria, celebration */ --reg-celebration: #C8D020; --reg-joy: #90D020; --reg-playfulness: #50D040; /* Greens — resolution, ease */ --reg-resilience: #22C060; --reg-contentment: #20A870; /* Teals — wonder, relief */ --reg-wonder: #18B8A0; --reg-relief: #20A8C0; /* Blues — introspection, nostalgia */ --reg-confusion: #2888D8; --reg-introspection: #2060C8; --reg-nostalgia: #3848B8; /* Blue-purples — reverence, longing */ --reg-reverence: #6040C0; --reg-longing: #8840D0; --reg-yearning: #9B30E0; /* Deep purples — grief, desperation, loss */ --reg-melancholy: #A030B8; --reg-grief: #8028A0; --reg-desperation: #7028A8; --reg-loneliness: #B03090; /* Pinks & magentas — love, devotion, relational */ --reg-devotion: #C030A8; --reg-love: #D04090; --reg-tenderness: #E84C8A; --reg-sensuality: #D03060; --reg-guilt: #B02848; --reg-numbness: #5A6880; } /* ═══════════════════════════════════════════════════════════════ * GLOBAL RESETS & BASE STYLES * ═══════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-b); background: var(--bg); color: var(--ink); line-height: 1.6; overflow-x: hidden; min-height: 100vh; } /* Concrete texture overlay — the "grimy" quality */ body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9999; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"); background-size: 300px 300px; mix-blend-mode: overlay; } img, svg, video { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; } /* ═══════════════════════════════════════════════════════════════ * TYPOGRAPHY UTILITIES * ═══════════════════════════════════════════════════════════════ */ /* Eyebrow labels — // PREFIX STYLE */ .eyebrow { font-family: var(--font-m); font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--red); display: flex; align-items: center; gap: 8px; } .eyebrow::before { content: '//'; font-weight: 500; letter-spacing: 0; } .eyebrow--muted { color: var(--ink3); } .eyebrow--muted::before { color: var(--ink3); } /* Display scale — Bebas Neue */ .display-xl { font-family: var(--font-d); font-size: clamp(64px, 10vw, 120px); letter-spacing: 0.03em; line-height: 0.88; color: var(--ink); } .display-lg { font-family: var(--font-d); font-size: clamp(48px, 7vw, 88px); letter-spacing: 0.03em; line-height: 0.9; color: var(--ink); } .display-md { font-family: var(--font-d); font-size: clamp(32px, 5vw, 56px); letter-spacing: 0.04em; line-height: 0.95; color: var(--ink); } .display-sm { font-family: var(--font-d); font-size: 28px; letter-spacing: 0.05em; line-height: 1; color: var(--ink); } .display-xs { font-family: var(--font-d); font-size: 18px; letter-spacing: 0.08em; line-height: 1; color: var(--ink); } /* Outline variants */ .display-outline-xl { font-family: var(--font-d); font-size: clamp(64px, 10vw, 120px); letter-spacing: 0.03em; line-height: 0.88; -webkit-text-stroke: 2px var(--red); color: transparent; } .display-outline-lg { font-family: var(--font-d); font-size: clamp(48px, 7vw, 88px); letter-spacing: 0.03em; line-height: 0.9; -webkit-text-stroke: 2px var(--red); color: transparent; } .display-outline-md { font-family: var(--font-d); font-size: clamp(32px, 5vw, 56px); letter-spacing: 0.04em; line-height: 0.95; -webkit-text-stroke: 1.5px var(--ink); color: transparent; } /* Body scale — IBM Plex Sans */ .body-lg { font-size: 16px; font-weight: 300; color: var(--ink2); line-height: 1.75; } .body-md { font-size: 14px; font-weight: 300; color: var(--ink2); line-height: 1.8; } .body-sm { font-size: 13px; font-weight: 300; color: var(--ink2); line-height: 1.85; } .body-xs { font-size: 12px; font-weight: 300; color: var(--ink2); line-height: 1.8; } /* Mono scale — IBM Plex Mono */ .mono-md { font-family: var(--font-m); font-size: 11px; letter-spacing: 0.1em; color: var(--ink3); } .mono-sm { font-family: var(--font-m); font-size: 9px; letter-spacing: 0.1em; color: var(--ink3); } .mono-xs { font-family: var(--font-m); font-size: 8px; letter-spacing: 0.08em; color: var(--ink3); } /* Pull quote */ .pull-quote { font-family: var(--font-d); font-size: clamp(20px, 3vw, 32px); letter-spacing: 0.04em; line-height: 1.05; color: var(--ink); border-top: 3px solid var(--red); border-bottom: 1px solid var(--edge); padding: 14px 0 12px; } /* ═══════════════════════════════════════════════════════════════ * LAYOUT UTILITIES * ═══════════════════════════════════════════════════════════════ */ .container { max-width: 1100px; margin: 0 auto; padding: 0 var(--space-10); } .container--narrow { max-width: 720px; margin: 0 auto; padding: 0 var(--space-10); } .container--reader { max-width: 680px; margin: 0 auto; padding: 0 var(--space-10); } /* ═══════════════════════════════════════════════════════════════ * NAVIGATION * ═══════════════════════════════════════════════════════════════ */ .nav { height: 52px; display: flex; align-items: stretch; background: var(--bg); border-bottom: 3px solid var(--red); position: sticky; top: 0; z-index: 100; } .nav__brand { display: flex; align-items: center; gap: 2px; padding: 0 20px; border-right: 1px solid var(--edge); flex-shrink: 0; text-decoration: none; } .nav__brand-solid { font-family: var(--font-d); font-size: 14px; letter-spacing: 0.25em; color: var(--ink); } .nav__brand-outline { font-family: var(--font-d); font-size: 14px; letter-spacing: 0.25em; -webkit-text-stroke: 1px rgba(255,255,255,0.22); color: transparent; } .nav__tab { font-family: var(--font-m); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink3); text-decoration: none; display: flex; align-items: center; padding: 0 18px; border-right: 1px solid var(--edge); transition: color 100ms, background 100ms; } .nav__tab:hover { color: var(--ink); } .nav__tab.active { color: var(--ink); background: var(--red); } .nav__end { margin-left: auto; display: flex; align-items: center; padding: 0 16px; gap: 16px; font-family: var(--font-m); font-size: 9px; color: var(--ink3); letter-spacing: 0.08em; } /* Sub-navigation */ .subnav { display: flex; align-items: stretch; background: var(--surf); border-bottom: 1px solid var(--edge); height: 40px; } .subnav__tab { font-family: var(--font-m); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink3); text-decoration: none; display: flex; align-items: center; padding: 0 20px; border-right: 1px solid var(--edge); border-bottom: 2px solid transparent; transition: color 100ms, border-color 100ms; margin-bottom: -1px; } .subnav__tab:hover { color: var(--ink2); } .subnav__tab.active { color: var(--ink); border-bottom-color: var(--red); } /* Breadcrumb */ .breadcrumb { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-m); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink3); } .breadcrumb a { color: var(--ink3); text-decoration: none; transition: color 100ms; } .breadcrumb a:hover { color: var(--ink2); } .breadcrumb__sep { color: var(--ink4); } .breadcrumb__current{ color: var(--ink2); } /* ═══════════════════════════════════════════════════════════════ * BUTTONS * ═══════════════════════════════════════════════════════════════ */ .btn { font-family: var(--font-d); font-size: 14px; letter-spacing: 0.14em; display: inline-flex; align-items: center; gap: var(--space-2); padding: 10px 22px 8px; cursor: pointer; transition: all 100ms; text-decoration: none; border: none; white-space: nowrap; line-height: 1; -webkit-appearance: none; } .btn--primary { color: var(--bg); background: var(--ink); } .btn--primary:hover { background: var(--red); color: var(--ink); } .btn--secondary { color: var(--ink); background: transparent; border: 1px solid var(--crease); } .btn--secondary:hover { border-color: var(--ink); background: var(--raised); } .btn--ghost { color: var(--ink2); background: transparent; } .btn--ghost:hover { color: var(--ink); background: var(--raised); } .btn--destructive { color: var(--error); background: transparent; border: 1px solid var(--error); } .btn--destructive:hover { background: var(--error); color: var(--ink); } .btn--sm { font-size: 11px; padding: 7px 14px 5px; letter-spacing: 0.1em; } /* The flip CTA — signature product moment */ .btn--flip { color: var(--ink); background: transparent; border: 1px solid var(--crease); font-size: 16px; padding: 12px 28px 10px; position: relative; overflow: hidden; transition: border-color 150ms var(--ease); } .btn--flip::after { content: ''; position: absolute; inset: 0; background: var(--red); transform: translateX(-101%); transition: transform 200ms var(--ease); z-index: 0; } .btn--flip:hover { border-color: var(--red); } .btn--flip:hover::after { transform: translateX(0); } .btn--flip span { position: relative; z-index: 1; } /* Icon button */ .btn-icon { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--edge); color: var(--ink3); cursor: pointer; transition: all 100ms; font-size: 14px; padding: 0; } .btn-icon:hover { border-color: var(--ink3); color: var(--ink); } /* ═══════════════════════════════════════════════════════════════ * BADGES * ═══════════════════════════════════════════════════════════════ */ .badge { font-family: var(--font-m); font-size: 8px; letter-spacing: 0.14em; text-transform: uppercase; padding: 4px 10px 3px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; border: 1px solid; } .badge--dot::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0; } /* Status */ .badge--success { color: var(--success); border-color: var(--success); } .badge--warning { color: var(--warning); border-color: var(--warning); } .badge--error { color: var(--error); border-color: var(--error); } .badge--info { color: var(--info); border-color: var(--info); } .badge--muted { color: var(--ink3); border-color: var(--edge); } /* Enrichment */ .badge--enriched { color: var(--success); border-color: rgba(34,184,106,0.3); } .badge--pending { color: var(--warning); border-color: rgba(224,138,16,0.3); } .badge--unavail { color: var(--ink3); border-color: var(--edge); } /* Register badge */ .reg-badge { font-family: var(--font-m); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; padding: 5px 12px 4px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid currentColor; } .reg-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; } /* ═══════════════════════════════════════════════════════════════ * REGISTER COMPONENTS * ═══════════════════════════════════════════════════════════════ */ /* Color bar — full width register distribution */ .color-bar { width: 100%; height: 4px; display: flex; } .color-bar--lg { height: 8px; } .color-bar--xl { height: 12px; } .color-bar__seg { flex: 1; } /* Register cell */ .reg-cell { padding: 20px 16px; position: relative; overflow: hidden; background: var(--surf); } .reg-cell__bg { position: absolute; inset: 0; opacity: 0.12; } .reg-cell__label { font-family: var(--font-m); font-size: 8px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink3); margin-bottom: var(--space-2); position: relative; z-index: 1; } .reg-cell__pct { font-family: var(--font-d); font-size: 28px; letter-spacing: 0.04em; line-height: 1; position: relative; z-index: 1; } .reg-cell__dot { width: 8px; height: 8px; border-radius: 50%; margin-top: var(--space-2); position: relative; z-index: 1; } /* Register bar */ .reg-bar { display: flex; align-items: center; gap: var(--space-3); } .reg-bar__label { font-family: var(--font-m); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink3); width: 96px; flex-shrink: 0; } .reg-bar__track { flex: 1; height: 2px; background: var(--edge); position: relative; } .reg-bar__fill { height: 100%; position: absolute; left: 0; top: 0; } .reg-bar__pct { font-family: var(--font-m); font-size: 9px; color: var(--ink3); width: 32px; text-align: right; flex-shrink: 0; } /* ═══════════════════════════════════════════════════════════════ * CARDS * ═══════════════════════════════════════════════════════════════ */ /* Stat card */ .stat-card { background: var(--surf); padding: var(--space-6) var(--space-5); position: relative; overflow: hidden; } .stat-card::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255,255,255,0.018) 1px, transparent 1px); background-size: 5px 5px; pointer-events: none; } .stat-card__reg { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; } .stat-card__label { font-family: var(--font-m); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink3); margin-bottom: var(--space-3); } .stat-card__value { font-family: var(--font-d); font-size: 48px; letter-spacing: 0.04em; line-height: 1; color: var(--ink); margin-bottom: var(--space-1); } .stat-card__sub { font-size: 12px; font-weight: 300; color: var(--ink3); font-style: italic; } /* Playlist card */ .playlist-card { background: var(--surf); padding: var(--space-5) var(--space-4); border-top: 3px solid transparent; transition: background 120ms; cursor: pointer; display: block; text-decoration: none; } .playlist-card:hover { background: var(--raised); } .playlist-card__cover { width: 52px; height: 52px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin-bottom: var(--space-3); } .playlist-card__name { font-family: var(--font-d); font-size: 15px; letter-spacing: 0.08em; color: var(--ink); line-height: 1.1; margin-bottom: var(--space-1); } .playlist-card__meta { font-family: var(--font-m); font-size: 8px; letter-spacing: 0.12em; color: var(--ink3); text-transform: uppercase; margin-bottom: var(--space-2); } /* Story card */ .story-card { border-left: 4px solid var(--red); padding: var(--space-8) var(--space-8) var(--space-8) var(--space-8); background: var(--surf); position: relative; overflow: hidden; } .story-card::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255,255,255,0.018) 1px, transparent 1px); background-size: 4px 4px; pointer-events: none; } .story-card__period { font-family: var(--font-m); font-size: 9px; letter-spacing: 0.18em; color: var(--ink3); margin-bottom: var(--space-3); } .story-card__title { font-family: var(--font-d); font-size: 26px; letter-spacing: 0.06em; color: var(--ink); margin-bottom: var(--space-3); line-height: 1; } .story-card__body { font-size: 14px; font-weight: 300; color: var(--ink2); line-height: 1.85; font-style: italic; position: relative; z-index: 1; } /* ═══════════════════════════════════════════════════════════════ * STORY READER * ═══════════════════════════════════════════════════════════════ */ .chapter { max-width: 640px; padding: var(--space-12) 0; border-bottom: 1px solid var(--edge); } .chapter__period { font-family: var(--font-m); font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink3); margin-bottom: var(--space-5); display: flex; align-items: center; gap: var(--space-3); } .chapter__period::before { content: ''; width: 24px; height: 1px; background: var(--red); flex-shrink: 0; } .chapter__title { font-family: var(--font-d); font-size: 36px; letter-spacing: 0.05em; line-height: 0.95; color: var(--ink); margin-bottom: var(--space-8); } .chapter__body { font-size: 16px; font-weight: 300; color: var(--ink2); line-height: 1.9; } .chapter__body p + p { margin-top: var(--space-5); } /* Key change marker between chapters */ .key-change { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-5) 0; } .key-change__line { flex: 1; height: 1px; background: var(--edge); } .key-change__label { font-family: var(--font-m); font-size: 8px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink3); display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; } .key-change__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--red); flex-shrink: 0; } /* ═══════════════════════════════════════════════════════════════ * FORMS * ═══════════════════════════════════════════════════════════════ */ .form-group { display: flex; flex-direction: column; gap: var(--space-2); } .form-label { font-family: var(--font-m); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink3); } .input { background: var(--surf); border: 1px solid var(--edge); color: var(--ink); font-family: var(--font-b); font-size: 14px; font-weight: 300; padding: 10px 14px; outline: none; transition: border-color 100ms; width: 100%; border-radius: 0; -webkit-appearance: none; } .input::placeholder { color: var(--ink3); } .input:focus { border-color: var(--ink3); } .input--error { border-color: var(--error); } .select { background: var(--surf); border: 1px solid var(--edge); color: var(--ink); font-family: var(--font-m); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; padding: 10px 32px 10px 14px; outline: none; width: 100%; border-radius: 0; cursor: pointer; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238A8880'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; transition: border-color 100ms; } .select:focus { border-color: var(--ink3); outline: none; } /* Mode card — analysis config */ .mode-card { background: var(--surf); border: 1px solid var(--edge); padding: var(--space-5); cursor: pointer; transition: all 100ms; position: relative; } .mode-card:hover { border-color: var(--crease); background: var(--raised); } .mode-card.selected { border-color: var(--red); } .mode-card.selected::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--red); } .mode-card__title { font-family: var(--font-d); font-size: 16px; letter-spacing: 0.1em; color: var(--ink); margin-bottom: var(--space-1); } .mode-card__desc { font-size: 12px; font-weight: 300; color: var(--ink3); line-height: 1.6; } /* ═══════════════════════════════════════════════════════════════ * FEEDBACK * ═══════════════════════════════════════════════════════════════ */ /* Flash messages */ .flash { display: flex; align-items: flex-start; gap: var(--space-3); padding: 14px 18px; border-left: 3px solid; font-size: 13px; font-weight: 300; line-height: 1.5; } .flash__icon { font-family: var(--font-m); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; flex-shrink: 0; padding-top: 1px; } .flash__title { font-weight: 500; font-size: 13px; margin-bottom: 2px; } .flash__msg { font-size: 12px; font-weight: 300; opacity: 0.8; } .flash--success { background: rgba(34,184,106,0.06); border-color: var(--success); color: var(--success); } .flash--warning { background: rgba(224,138,16,0.06); border-color: var(--warning); color: var(--warning); } .flash--error { background: rgba(224,40,40,0.06); border-color: var(--error); color: var(--error); } .flash--info { background: rgba(40,136,216,0.06); border-color: var(--info); color: var(--info); } /* Progress bar */ .progress-bar { height: 3px; background: var(--edge); position: relative; width: 100%; } .progress-bar__fill { height: 100%; position: absolute; left: 0; top: 0; background: var(--red); transition: width 300ms var(--ease); } .progress-bar--success .progress-bar__fill { background: var(--success); } .progress-label { font-family: var(--font-m); font-size: 9px; letter-spacing: 0.1em; color: var(--ink3); display: flex; justify-content: space-between; margin-top: var(--space-1); } /* Skeleton */ .skeleton { background: var(--surf); position: relative; overflow: hidden; } .skeleton::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.04) 50%, transparent 100%); animation: damn-shimmer 1.5s infinite; } @keyframes damn-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } } /* Spinner */ .spinner { width: 20px; height: 20px; border: 2px solid var(--edge); border-top-color: var(--red); border-radius: 50%; animation: damn-spin 600ms linear infinite; } @keyframes damn-spin { to { transform: rotate(360deg); } } /* Empty state */ .empty-state { padding: var(--space-16) var(--space-10); display: flex; flex-direction: column; align-items: center; text-align: center; background: var(--surf); border: 1px solid var(--edge); } .empty-state__icon { font-family: var(--font-d); font-size: 48px; letter-spacing: 0.1em; -webkit-text-stroke: 1.5px var(--ink3); color: transparent; margin-bottom: var(--space-5); line-height: 1; } .empty-state__title { font-family: var(--font-d); font-size: 22px; letter-spacing: 0.08em; color: var(--ink2); margin-bottom: var(--space-2); } .empty-state__body { font-size: 13px; font-weight: 300; color: var(--ink3); max-width: 340px; line-height: 1.75; margin-bottom: var(--space-8); } /* Pagination */ .pagination { display: flex; align-items: center; gap: 2px; } .page-btn { font-family: var(--font-m); font-size: 9px; letter-spacing: 0.1em; color: var(--ink3); background: transparent; border: 1px solid var(--edge); padding: 7px 12px; cursor: pointer; transition: all 80ms; text-decoration: none; display: flex; align-items: center; } .page-btn:hover { color: var(--ink); border-color: var(--crease); } .page-btn.active { color: var(--ink); background: var(--red); border-color: var(--red); } .page-btn:disabled { opacity: 0.3; cursor: default; pointer-events: none; } .pagination__info { font-family: var(--font-m); font-size: 9px; color: var(--ink3); letter-spacing: 0.08em; margin: 0 var(--space-3); } /* ═══════════════════════════════════════════════════════════════ * DIVIDERS * ═══════════════════════════════════════════════════════════════ */ .divider { width: 100%; height: 1px; background: var(--edge); } .divider--thick { height: 3px; background: var(--red); } /* Groove — double hairline, vinyl reference */ .groove { width: 100%; height: 8px; position: relative; } .groove::before { content: ''; position: absolute; top: 3px; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, var(--crease) 10%, var(--crease) 90%, transparent 100%); } .groove::after { content: ''; position: absolute; top: 5px; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, var(--edge) 10%, var(--edge) 90%, transparent 100%); } /* ═══════════════════════════════════════════════════════════════ * FLIP CTA — signature product moment * ═══════════════════════════════════════════════════════════════ */ .flip-cta { display: flex; align-items: center; background: var(--surf); border: 1px solid var(--edge); overflow: hidden; cursor: pointer; transition: border-color 150ms var(--ease); text-decoration: none; } .flip-cta:hover { border-color: var(--red); } .flip-cta__text { padding: var(--space-5) var(--space-8); border-right: 1px solid var(--edge); flex: 1; } .flip-cta__label { font-family: var(--font-m); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink3); margin-bottom: var(--space-1); } .flip-cta__title { font-family: var(--font-d); font-size: 22px; letter-spacing: 0.08em; color: var(--ink); line-height: 1; } .flip-cta__arrow { width: 64px; display: flex; align-items: center; justify-content: center; font-family: var(--font-d); font-size: 24px; color: var(--red); flex-shrink: 0; transition: transform 150ms var(--ease); } .flip-cta:hover .flip-cta__arrow { transform: translateX(4px); } /* ═══════════════════════════════════════════════════════════════ * TOOLTIP * ═══════════════════════════════════════════════════════════════ */ .tooltip-wrap { position: relative; display: inline-flex; } .tooltip { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: var(--raised); border: 1px solid var(--crease); padding: 6px 12px; white-space: nowrap; font-family: var(--font-m); font-size: 9px; letter-spacing: 0.1em; color: var(--ink2); pointer-events: none; z-index: 100; } .tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--crease); } /* ═══════════════════════════════════════════════════════════════ * MODAL * ═══════════════════════════════════════════════════════════════ */ .modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.75); display: flex; align-items: center; justify-content: center; padding: var(--space-10); z-index: 500; } .modal { background: var(--surf); border: 1px solid var(--crease); border-top: 3px solid var(--red); padding: var(--space-8); max-width: 480px; width: 100%; position: relative; } .modal__title { font-family: var(--font-d); font-size: 24px; letter-spacing: 0.08em; color: var(--ink); margin-bottom: var(--space-3); line-height: 1; } .modal__body { font-size: 14px; font-weight: 300; color: var(--ink2); line-height: 1.75; margin-bottom: var(--space-8); } .modal__actions { display: flex; gap: var(--space-3); } /* ═══════════════════════════════════════════════════════════════ * TRACK LIST * ═══════════════════════════════════════════════════════════════ */ .track-list { display: flex; flex-direction: column; background: var(--edge); gap: 1px; } .track-row { display: grid; grid-template-columns: 32px 40px 1fr 120px 80px 80px 16px; align-items: center; gap: var(--space-3); padding: 10px 16px; background: var(--surf); transition: background 80ms; cursor: pointer; } .track-row:hover { background: var(--raised); } .track-row.unenriched { opacity: 0.55; } .track-row__num { font-family: var(--font-m); font-size: 9px; color: var(--ink3); text-align: right; } .track-row__art { width: 40px; height: 40px; background: var(--edge); flex-shrink: 0; } .track-row__title { font-size: 13px; font-weight: 400; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .track-row__artist { font-family: var(--font-m); font-size: 9px; color: var(--ink3); letter-spacing: 0.06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .track-row__date { font-family: var(--font-m); font-size: 9px; color: var(--ink3); letter-spacing: 0.06em; } .track-row__kw { font-family: var(--font-m); font-size: 8px; color: var(--ink3); letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-style: italic; } .track-row__dur { font-family: var(--font-m); font-size: 9px; color: var(--ink3); text-align: right; } .track-row__reg { width: 8px; height: 8px; border-radius: 50%; margin: 0 auto; } /* ═══════════════════════════════════════════════════════════════ * UTILITY CLASSES * ═══════════════════════════════════════════════════════════════ */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; } .grid-gap-1px { gap: 1px; background: var(--edge); } .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); } .grid-6 { display: grid; grid-template-columns: repeat(6, 1fr); } .dot-texture::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255,255,255,0.022) 1px, transparent 1px); background-size: 5px 5px; pointer-events: none; }