/* * ============================================================ * NULL REFERENCE RECORDS — Design System + Landing Styles * ============================================================ * Three-theme architecture: * [data-theme="nullreferencerecords"] — label (default) * [data-theme="everypreciousfailure"] — synthwave / space ambient * [data-theme="muchneededrest"] — bouncy / chill * * Usage: * ← label / split-panel state * ← artist expanded state * * All three themes share the structural tokens in :root. * Only color tokens change per theme. * ============================================================ */ /* ============================================================ SHARED STRUCTURAL TOKENS These never change across themes. ============================================================ */ :root { /* -- Typography -- */ --font-display: 'Outfit', sans-serif; --font-body: 'DM Sans', sans-serif; --font-mono: 'Space Mono', monospace; /* Type scale */ --text-xs: 11px; --text-sm: 13px; --text-base: 15px; --text-lg: 18px; --text-xl: 22px; --text-2xl: 28px; --text-3xl: 36px; --text-4xl: 48px; --text-5xl: 64px; /* Font weights */ --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Line heights */ --leading-tight: 1.2; --leading-snug: 1.35; --leading-normal: 1.5; --leading-relaxed: 1.65; --leading-loose: 1.8; /* Letter spacing */ --tracking-tight: -0.03em; --tracking-normal: 0em; --tracking-wide: 0.05em; --tracking-wider: 0.1em; --tracking-widest: 0.2em; /* -- Spacing scale (4px base) -- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; /* -- Border radius -- */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-2xl: 32px; --radius-full: 9999px; /* -- Transitions -- */ --ease-out: cubic-bezier(0.0, 0, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --duration-fast: 120ms; --duration-base: 200ms; --duration-slow: 350ms; /* -- Z-index scale -- */ --z-base: 0; --z-raised: 10; --z-overlay: 100; --z-modal: 200; --z-toast: 300; /* -- Header chrome (dark default, overridden in warm theme) -- */ --color-header-bg: rgba(14, 14, 16, 0.88); --color-header-border: rgba(255, 255, 255, 0.06); } /* ============================================================ THEME: NULL REFERENCE RECORDS The structural void. Cool neutral zinc. Default theme — applied to for split-panel state. ============================================================ */ [data-theme="nullreferencerecords"], :root { /* Backgrounds */ --color-bg: #0E0E10; --color-surface: #18181B; --color-surface-2: #222226; --color-surface-3: #2A2A2F; /* Borders */ --color-border: #2E2E33; --color-border-muted: #222226; --color-border-strong: #444449; /* Text */ --color-text: #E4E4E7; --color-text-muted: #A1A1AA; --color-text-dim: #636369; --color-text-inverse: #0E0E10; /* Accent (neutral — the label recedes) */ --color-accent: #71717A; --color-accent-hover: #A1A1AA; --color-accent-subtle: #2E2E33; /* Interactive states */ --color-focus-ring: rgba(161, 161, 170, 0.4); /* Semantic */ --color-success: #4ADE80; --color-warning: #FACC15; --color-error: #F87171; --color-info: #60A5FA; /* Glow / FX — none at label level */ --glow-primary: none; --glow-secondary: none; } /* ============================================================ THEME: EVERY PRECIOUS FAILURE Retrowave / space ambient. Neon on deep space. Applied to when the everypreciousfailure panel is open. ============================================================ */ [data-theme="everypreciousfailure"] { /* Backgrounds */ --color-bg: #0A0A1A; --color-surface: #12122A; --color-surface-2: #1A1A38; --color-surface-3: #1E1E40; /* Borders */ --color-border: rgba(179, 71, 217, 0.2); --color-border-muted: rgba(179, 71, 217, 0.1); --color-border-strong: rgba(255, 45, 120, 0.3); /* Text */ --color-text: #E8E0F0; --color-text-muted: #8B7FA6; --color-text-dim: #4E4665; --color-text-inverse: #0A0A1A; /* Accent — neon pink primary, cyan secondary */ --color-accent: #FF2D78; --color-accent-hover: #FF5594; --color-accent-subtle: rgba(255, 45, 120, 0.1); --color-accent-2: #00F0FF; --color-accent-2-hover: #4DF5FF; --color-accent-2-subtle: rgba(0, 240, 255, 0.08); --color-accent-3: #B347D9; /* Interactive states */ --color-focus-ring: rgba(0, 240, 255, 0.35); /* Semantic */ --color-success: #4ADE80; --color-warning: #FACC15; --color-error: #FF2D78; --color-info: #00F0FF; /* Glow / FX */ --glow-primary: 0 0 24px rgba(255, 45, 120, 0.25), 0 0 48px rgba(255, 45, 120, 0.1); --glow-secondary: 0 0 24px rgba(0, 240, 255, 0.2), 0 0 48px rgba(0, 240, 255, 0.08); --glow-ambient: radial-gradient(ellipse at 30% 80%, rgba(255, 45, 120, 0.06) 0%, transparent 50%), radial-gradient(ellipse at 70% 20%, rgba(0, 240, 255, 0.05) 0%, transparent 50%); } /* ============================================================ THEME: MUCH NEEDED REST Bouncy / chill. Warm organic light. Applied to when the muchneededrest panel is open. ============================================================ */ [data-theme="muchneededrest"] { /* Backgrounds */ --color-bg: #FFF8F0; --color-surface: #FEF2E6; --color-surface-2: #F5E6D3; --color-surface-3: #EDD9C0; /* Borders */ --color-border: #E8D5C0; --color-border-muted: #F0E4D4; --color-border-strong: #D4B99A; /* Text */ --color-text: #3D2E22; --color-text-muted: #8A7262; --color-text-dim: #B8A090; --color-text-inverse: #FFF8F0; /* Accent — warm coral primary, supporting palette */ --color-accent: #E8735A; --color-accent-hover: #D45E44; --color-accent-subtle: rgba(232, 115, 90, 0.12); --color-accent-2: #7BAF8E; --color-accent-2-hover: #5E9A74; --color-accent-2-subtle: rgba(123, 175, 142, 0.12); --color-accent-3: #89B8D4; --color-accent-4: #B8A5D4; --color-accent-5: #F4A77A; /* Interactive states */ --color-focus-ring: rgba(232, 115, 90, 0.35); /* Semantic */ --color-success: #7BAF8E; --color-warning: #F4A77A; --color-error: #E8735A; --color-info: #89B8D4; /* Glow / FX — none, warmth comes from color not light */ --glow-primary: none; --glow-secondary: none; /* Header chrome — warm override */ --color-header-bg: rgba(255, 248, 240, 0.92); --color-header-border: rgba(0, 0, 0, 0.07); } /* ============================================================ BASE ELEMENT STYLES Applied globally; tokens resolve per active theme. ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; height: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body { height: 100%; overflow: hidden; font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--weight-regular); line-height: var(--leading-relaxed); color: var(--color-text); background-color: var(--color-bg); } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: var(--weight-semibold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--color-text); } h1 { font-size: var(--text-5xl); font-weight: var(--weight-light); } h2 { font-size: var(--text-4xl); font-weight: var(--weight-light); } h3 { font-size: var(--text-3xl); } h4 { font-size: var(--text-2xl); } h5 { font-size: var(--text-xl); } h6 { font-size: var(--text-lg); } p { color: var(--color-text-muted); line-height: var(--leading-relaxed); max-width: 65ch; } a { color: var(--color-accent); text-decoration: none; transition: color var(--duration-fast) var(--ease-out); } a:hover { color: var(--color-accent-hover); } .text-display { font-family: var(--font-display); } .text-mono { font-family: var(--font-mono); font-size: var(--text-sm); letter-spacing: var(--tracking-wider); } .text-label { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-text-dim); } .text-muted { color: var(--color-text-muted); } .text-dim { color: var(--color-text-dim); } .text-accent { color: var(--color-accent); } /* ============================================================ LAYOUT ============================================================ */ .container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--space-6); } .container--narrow { max-width: 720px; margin-inline: auto; padding-inline: var(--space-6); } .grid { display: grid; gap: var(--space-5); } .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } .grid--auto { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .flex { display: flex; } .flex-center { display: flex; align-items: center; justify-content: center; } .flex-between { display: flex; align-items: center; justify-content: space-between; } .gap-1 { gap: var(--space-1); } .gap-2 { gap: var(--space-2); } .gap-3 { gap: var(--space-3); } .gap-4 { gap: var(--space-4); } .gap-5 { gap: var(--space-5); } /* ============================================================ COMPONENTS ============================================================ */ /* -- Button -- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 12px 28px; border: 1px solid transparent; border-radius: var(--radius-full); font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--weight-medium); letter-spacing: var(--tracking-wide); cursor: pointer; text-decoration: none; transition: all var(--duration-base) var(--ease-out); white-space: nowrap; user-select: none; } .btn:active { transform: scale(0.97); } .btn:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; } .btn--primary { background: var(--color-accent); color: var(--color-text-inverse); box-shadow: var(--glow-primary); } .btn--primary:hover { background: var(--color-accent-hover); } .btn--secondary { background: transparent; color: var(--color-text-muted); border-color: var(--color-border); } .btn--secondary:hover { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border-strong); } .btn--accent2 { background: transparent; color: var(--color-accent-2, var(--color-accent)); border-color: var(--color-accent-2, var(--color-accent)); } .btn--accent2:hover { background: var(--color-accent-2-subtle, var(--color-accent-subtle)); } .btn--sm { padding: 8px 18px; font-size: var(--text-xs); } .btn--lg { padding: 16px 40px; font-size: var(--text-base); } /* -- Card -- */ .card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5) var(--space-6); transition: border-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out); } .card:hover { border-color: var(--color-border-strong); } .card--raised { background: var(--color-surface-2); } .card--accent { border-color: var(--color-accent); box-shadow: var(--glow-primary); } [data-theme="everypreciousfailure"] .card { background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-surface-2) 100%); } /* -- Release card -- */ .release-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; transition: border-color var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out); cursor: pointer; } .release-card:hover { border-color: var(--color-accent); transform: translateY(-2px); box-shadow: var(--glow-primary); } [data-theme="everypreciousfailure"] .release-card:hover { box-shadow: 0 0 24px rgba(255, 45, 120, 0.2); } .release-card__art { width: 100%; aspect-ratio: 1 / 1; background: var(--color-surface-2); display: flex; align-items: center; justify-content: center; overflow: hidden; } .release-card__art img { width: 100%; height: 100%; object-fit: cover; } .release-card__body { padding: var(--space-3) var(--space-4); } .release-card__title { font-family: var(--font-display); font-size: var(--text-base); font-weight: var(--weight-medium); color: var(--color-text); margin-bottom: var(--space-1); } .release-card__artist { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wider); color: var(--color-accent); } .release-card__meta { font-size: var(--text-xs); color: var(--color-text-dim); margin-top: var(--space-1); } /* -- Tag / pill -- */ .tag { display: inline-flex; align-items: center; padding: 4px 14px; border-radius: var(--radius-full); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wider); text-transform: uppercase; border: 1px solid var(--color-border); background: var(--color-surface-2); color: var(--color-text-muted); } .tag--accent { background: var(--color-accent-subtle); border-color: var(--color-accent); color: var(--color-accent); } /* -- Input -- */ .input { width: 100%; padding: 11px 16px; background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-md); font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-text); outline: none; transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); appearance: none; } .input::placeholder { color: var(--color-text-dim); } .input:hover { border-color: var(--color-border-strong); } .input:focus { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-focus-ring); } /* -- Nav -- */ .nav { display: flex; align-items: center; gap: var(--space-6); padding: var(--space-4) 0; } .nav__logo { font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--color-text); text-decoration: none; } .nav__links { display: flex; align-items: center; gap: var(--space-5); list-style: none; } .nav__link { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-text-dim); text-decoration: none; transition: color var(--duration-fast) var(--ease-out); } .nav__link:hover, .nav__link--active { color: var(--color-text); } .nav__link--accent { color: var(--color-accent); } /* -- Section divider -- */ .divider { width: 100%; height: 1px; background: var(--color-border); margin: var(--space-7) 0; } /* -- Streaming platforms row -- */ .platforms { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; } .platform-link { display: inline-flex; align-items: center; gap: var(--space-2); padding: 8px 16px; border: 1px solid var(--color-border); border-radius: var(--radius-full); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); color: var(--color-text-muted); text-decoration: none; transition: all var(--duration-fast) var(--ease-out); } .platform-link:hover { border-color: var(--color-accent); color: var(--color-text); background: var(--color-accent-subtle); } /* -- Hero -- */ .hero { padding: var(--space-9) 0 var(--space-8); position: relative; } [data-theme="everypreciousfailure"] .hero::before { content: ''; position: absolute; inset: 0; background: var(--glow-ambient); pointer-events: none; } .hero__eyebrow { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-accent); margin-bottom: var(--space-3); } .hero__title { font-family: var(--font-display); font-size: clamp(var(--text-4xl), 6vw, var(--text-5xl)); font-weight: var(--weight-light); letter-spacing: var(--tracking-tight); color: var(--color-text); line-height: var(--leading-tight); margin-bottom: var(--space-5); } [data-theme="everypreciousfailure"] .hero__title { color: var(--color-accent); text-shadow: var(--glow-primary); } .hero__sub { font-size: var(--text-lg); color: var(--color-text-muted); max-width: 52ch; line-height: var(--leading-relaxed); margin-bottom: var(--space-6); } .hero__actions { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; } [data-theme="everypreciousfailure"] .btn--primary { box-shadow: 0 0 20px rgba(255, 45, 120, 0.3), 0 0 40px rgba(255, 45, 120, 0.1); } [data-theme="everypreciousfailure"] .btn--primary:hover { box-shadow: 0 0 28px rgba(255, 45, 120, 0.45), 0 0 56px rgba(255, 45, 120, 0.15); } /* ============================================================ LANDING PAGE LAYOUT ============================================================ */ /* -- Header -- */ .header { position: fixed; top: 0; left: 0; right: 0; height: 60px; display: flex; align-items: center; justify-content: space-between; padding: 0 32px; z-index: 600; border-bottom: 1px solid var(--color-header-border); background: var(--color-header-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: background var(--duration-slow) var(--ease-in-out), border-color var(--duration-slow) var(--ease-in-out); } .header__logo { font-family: var(--font-display); font-size: 15px; font-weight: 500; letter-spacing: -0.01em; color: var(--color-text); text-decoration: none; cursor: pointer; transition: color var(--duration-base) var(--ease-out); } .header__nav { display: flex; align-items: center; gap: 32px; list-style: none; } .header__nav a { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-text-dim); text-decoration: none; transition: color var(--duration-fast) var(--ease-out); cursor: pointer; } .header__nav a:hover, .header__nav a.active { color: var(--color-text); } /* -- Pages / SPA shell -- */ .pages { position: fixed; inset: 0; top: 60px; } .page { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity var(--duration-slow) var(--ease-out); } .page--active { opacity: 1; pointer-events: auto; } /* ── Artists page ── */ .split { display: grid; grid-template-columns: 1fr 1fr; width: 100%; height: 100%; } .panel--everypreciousfailure { grid-column: 1; } .panel--muchneededrest { grid-column: 2; } .panel { position: relative; overflow: hidden; cursor: pointer; will-change: left, top, width, height; } /* Every Precious Failure panel — deep space ambient gradient */ .panel--everypreciousfailure { background: radial-gradient(ellipse at 12% 92%, rgba(255, 0, 80, 0.55) 0%, rgba(180, 0, 100, 0.2) 20%, transparent 42%), radial-gradient(ellipse at 88% 8%, rgba(0, 220, 255, 0.45) 0%, rgba(0, 120, 200, 0.15) 20%, transparent 42%), radial-gradient(ellipse at 50% 50%, rgba(90, 0, 140, 0.25) 0%, transparent 65%), linear-gradient(175deg, #060010 0%, #0C0020 45%, #110008 100%); } /* Much Needed Rest panel — warm cream */ .panel--muchneededrest { background-color: #FDF5EB; border-left: 1px solid #DFC9AE; } /* EPF scanlines texture */ .panel--everypreciousfailure .panel__bg { position: absolute; inset: 0; pointer-events: none; z-index: 1; background: repeating-linear-gradient( 0deg, transparent, transparent 3px, rgba(0, 0, 0, 0.07) 3px, rgba(0, 0, 0, 0.07) 4px ); } /* EPF neon right-edge divider — separates the two split panels */ .panel--everypreciousfailure::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 2px; z-index: 5; background: linear-gradient(to bottom, transparent 0%, #FF2D78 20%, #fff 50%, #00F0FF 80%, transparent 100%); box-shadow: 0 0 6px #FF2D78, 0 0 18px rgba(255, 45, 120, 0.6), 0 0 4px #00F0FF, 0 0 14px rgba(0, 240, 255, 0.4); pointer-events: none; transition: opacity 0.4s; } /* MNR warm vignette */ .panel--muchneededrest::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1; background: radial-gradient(ellipse at 50% 110%, rgba(232, 115, 90, 0.1) 0%, transparent 55%), radial-gradient(ellipse at 50% -10%, rgba(244, 167, 122, 0.08) 0%, transparent 55%); } /* Open state — panel is full-screen; hide the neon divider */ .panel--open::after { opacity: 0; } .panel--open { cursor: default; } /* Panel content */ .panel__content { position: absolute; inset: 0; z-index: 2; overflow: hidden; display: flex; flex-direction: column; align-items: center; } .panel--open .panel__content { overflow-y: auto; overflow-x: hidden; } .panel__hero { flex-shrink: 0; width: 100%; min-height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 48px; max-width: 560px; text-align: center; margin: 0 auto; } .panel__art-thumb { width: 140px; height: 140px; border-radius: 12px; overflow: hidden; margin: 0 auto 32px; flex-shrink: 0; } .panel__art-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .panel--everypreciousfailure .panel__art-thumb { border: 1px solid rgba(255, 45, 120, 0.3); box-shadow: 0 0 24px rgba(255, 45, 120, 0.25); } .panel--muchneededrest .panel__art-thumb { border: 1px solid rgba(232, 115, 90, 0.2); box-shadow: 0 4px 24px rgba(61, 46, 34, 0.1); } /* Expanded-only section — hidden until panel opens */ .panel__more { width: 100%; flex-shrink: 0; opacity: 0; pointer-events: none; transition: opacity var(--duration-slow) var(--ease-out); padding: 8px 48px 96px; } .panel--open .panel__more { opacity: 1; pointer-events: auto; } /* Panel typography */ .panel__eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 20px; } .panel--everypreciousfailure .panel__eyebrow { color: #00F0FF; text-shadow: 0 0 4px rgba(255, 255, 255, 0.7), 0 0 10px #00F0FF, 0 0 22px rgba(0, 240, 255, 0.8), 0 0 48px rgba(0, 200, 255, 0.35); } .panel--muchneededrest .panel__eyebrow { color: #E8735A; } .panel__title { font-family: var(--font-display); font-weight: 300; letter-spacing: -0.03em; line-height: 1.1; margin-bottom: 20px; font-size: clamp(36px, 4.2vw, 58px); } .panel--everypreciousfailure .panel__title { color: #FF5090; text-shadow: 0 0 2px rgba(255, 255, 255, 0.9), 0 0 6px rgba(255, 255, 255, 0.5), 0 0 12px #FF2D78, 0 0 28px #FF2D78, 0 0 56px rgba(200, 40, 210, 0.65), 0 0 90px rgba(140, 20, 180, 0.35), 0 0 130px rgba(0, 240, 255, 0.1); } .panel--muchneededrest .panel__title { color: #2E1F15; text-shadow: 0 2px 32px rgba(232, 115, 90, 0.12); } .panel__sub { font-family: var(--font-body); font-size: 15px; line-height: 1.65; margin: 0 auto 28px; } .panel--everypreciousfailure .panel__sub { color: #8870AA; max-width: 38ch; } .panel--muchneededrest .panel__sub { color: #7A6454; max-width: 38ch; } .panel__tags { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-bottom: 28px; } .panel--everypreciousfailure .panel__tags .tag { border-color: rgba(0, 240, 255, 0.35); color: rgba(0, 240, 255, 0.85); background: rgba(0, 240, 255, 0.04); text-shadow: 0 0 4px rgba(255, 255, 255, 0.5), 0 0 10px rgba(0, 240, 255, 0.9), 0 0 22px rgba(0, 240, 255, 0.4); } .panel--muchneededrest .panel__tags .tag { border-color: rgba(232, 115, 90, 0.3); color: #A07060; background: rgba(232, 115, 90, 0.06); } .panel__actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; } /* More section (expanded content below the fold) */ .more-divider { height: 1px; margin: 40px 0 36px; } .panel--everypreciousfailure .more-divider { background: rgba(179, 71, 217, 0.2); } .panel--muchneededrest .more-divider { background: #E8D5C0; } .more-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 18px; } .panel--everypreciousfailure .more-label { color: #4E4665; } .panel--muchneededrest .more-label { color: #B8A090; } .platforms-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 40px; } .releases-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 48px; } .bio-card { max-width: 520px; margin-bottom: 48px; padding: 24px 28px; border-radius: var(--radius-lg); border: 1px solid; } .art-img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; } .art-placeholder { display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; border-radius: 8px; aspect-ratio: 1/1; background: #1A1A30; color: #444; } /* Panel animation classes (set by app.js during transitions) */ .panel--detached { position: fixed !important; z-index: 400; cursor: default; } .panel--growing { transition: left 0.58s cubic-bezier(0.4, 0, 0.15, 1), top 0.58s cubic-bezier(0.4, 0, 0.15, 1), width 0.58s cubic-bezier(0.4, 0, 0.15, 1), height 0.58s cubic-bezier(0.4, 0, 0.15, 1); } /* ── Releases page ── */ .releases-page { height: 100%; overflow-y: auto; background: #0E0E10; padding: 56px 0 96px; } .releases-page__title { font-family: var(--font-display); font-size: clamp(36px, 5vw, 64px); font-weight: 300; letter-spacing: -0.03em; color: #E4E4E7; margin-bottom: 20px; } .releases-page__filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 48px; } .filter-btn { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; padding: 6px 16px; border-radius: 9999px; border: 1px solid #2E2E33; background: none; color: #636369; cursor: pointer; transition: all 0.15s; } .filter-btn:hover { color: #E4E4E7; border-color: #444449; } .filter-btn.active { color: #E4E4E7; border-color: #71717A; background: #18181B; } .releases-full-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; } .release-item .release-card { border-color: #2E2E33; background: #18181B; transition: border-color 0.2s, transform 0.2s; } .release-item .release-card:hover { border-color: #444449; transform: translateY(-2px); } /* ── About page ── */ .about-page { height: 100%; overflow-y: auto; background: #0E0E10; padding: 56px 0 96px; } .about-eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: #636369; margin-bottom: 24px; } .about-title { font-family: var(--font-display); font-size: clamp(36px, 5vw, 64px); font-weight: 300; letter-spacing: -0.03em; color: #E4E4E7; line-height: 1.1; margin-bottom: 40px; } .about-body p { font-family: var(--font-body); font-size: 17px; line-height: 1.75; color: #A1A1AA; margin-bottom: 24px; max-width: 65ch; } .about-divider { height: 1px; background: #2E2E33; margin: 48px 0; } .about-section-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: #636369; margin-bottom: 24px; } .about-roster { display: flex; flex-direction: column; gap: 16px; } .about-artist { display: flex; align-items: flex-start; gap: 20px; padding: 24px; border: 1px solid #2E2E33; border-radius: var(--radius-lg); background: #18181B; cursor: pointer; transition: border-color 0.2s; } .about-artist:hover { border-color: #444449; } .about-artist__thumb { width: 56px; height: 56px; border-radius: 8px; flex-shrink: 0; overflow: hidden; } .about-artist__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .about-artist__name { font-family: var(--font-display); font-size: 18px; font-weight: 500; color: #E4E4E7; margin-bottom: 4px; } .about-artist__genre { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: #636369; margin-bottom: 8px; } .about-artist__bio { font-family: var(--font-body); font-size: 14px; color: #71717A; line-height: 1.6; } .about-contact { margin-top: 48px; } .about-contact-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: #636369; margin-bottom: 14px; } .about-contact a { font-family: var(--font-display); font-size: 22px; font-weight: 300; color: #71717A; text-decoration: none; transition: color 0.2s; } .about-contact a:hover { color: #E4E4E7; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 768px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } .container, .container--narrow { padding-inline: var(--space-4); } h1 { font-size: var(--text-3xl); } h2 { font-size: var(--text-2xl); } } @media (max-width: 680px) { .split { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; } .panel--everypreciousfailure { grid-column: 1; grid-row: 1; } .panel--muchneededrest { grid-column: 1; grid-row: 2; border-left: none; border-top: 1px solid #E8D5C0; } .releases-grid, .releases-full-grid { grid-template-columns: 1fr 1fr; } .panel__hero, .panel__more { padding-left: 24px; padding-right: 24px; } } @media (max-width: 480px) { .header { padding: 0 16px; } .header__nav { gap: 16px; } .nav__links { display: none; } .hero { padding: var(--space-7) 0 var(--space-6); } }