/* * ═══════════════════════════════════════════════════════════════════ * DAMN — Design System for DeepCut * ═══════════════════════════════════════════════════════════════════ * * Version: 4.0 * Updated: 2026-04-10 * * 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. * * Class naming: flat hyphen (e.g. .btn-primary, .stat-card-reg). * No BEM double-underscore or double-hyphen modifiers. * * ═══════════════════════════════════════════════════════════════════ */ :root { /* Backgrounds */ --bg: #0C0C0C; --surf: #141414; --raised: #1C1C1C; --edge: #282828; --crease: #343434; /* Foregrounds */ --ink: #F2F0EC; --ink2: #8A8880; /* body text floor — nothing readable goes below this */ --ink3: #8A8880; /* metadata, labels — lifted to match ink2 */ --ink4: #343230; /* borders and dividers only — never use for text */ /* Accent */ --red: #C8221E; --red2: #961816; /* ─── EMOTIONAL REGISTERS — FULL PALETTE A2 ─────────────── Hue wheel logic: warm reds → oranges → ambers → yellow-greens → greens → teals → blues → blue-purples → deep purples → pinks/magentas. No grays — every register is chromatic. ─────────────────────────────────────────────────────── */ /* 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 + difficult replacements */ --reg-ambition: #E8A010; --reg-pride: #D09020; --reg-humor: #E0C010; --reg-bitterness: #8A7230; /* dark soured amber */ --reg-anxiety: #9AA020; /* sickly yellow-green */ /* 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; /* cold slate blue — emotional distance */ /* Status */ --success: #22B86A; --warning: #E08A10; --error: #E02828; --info: #1E8ED8; /* Typography */ --font-d: 'Bebas Neue', Impact, sans-serif; --font-b: 'IBM Plex Sans', sans-serif; --font-m: 'IBM Plex Mono', monospace; /* Easing */ --ease: cubic-bezier(0.16,1,0.3,1); } * { box-sizing: border-box; margin: 0; padding: 0; } a { color: inherit; text-decoration: none; } body { font-family: var(--font-b); background: var(--bg); color: var(--ink); line-height: 1.6; overflow-x: hidden; } /* Concrete texture overlay */ body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 999; 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; } /* ─── NAVIGATION ──────────────────────────────────────────── */ .nav { height: 52px; display: flex; align-items: stretch; background: var(--bg); border-bottom: 3px solid var(--red); } .nav-brand { display: flex; align-items: center; gap: 2px; padding: 0 20px; border-right: 1px solid var(--edge); flex-shrink: 0; } .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; cursor: pointer; } .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; font-family: var(--font-m); font-size: 9px; color: var(--ink3); letter-spacing: 0.08em; gap: 16px; } /* Sub-navigation — tabs */ .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; cursor: pointer; 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: 8px; font-family: var(--font-m); font-size: 9px; letter-spacing: 0.1em; color: var(--ink3); text-transform: uppercase; } .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); } /* Chapter sidebar nav */ .chapter-nav { display: flex; flex-direction: column; gap: 0; } .chapter-nav-item { display: flex; align-items: flex-start; gap: 12px; padding: 10px 16px; text-decoration: none; border-left: 2px solid transparent; transition: all 80ms; cursor: pointer; } .chapter-nav-item:hover { background: var(--raised); border-left-color: var(--edge); } .chapter-nav-item.active { background: var(--raised); border-left-color: var(--red); } .chapter-nav-num { font-family: var(--font-m); font-size: 8px; letter-spacing: 0.1em; color: var(--ink3); flex-shrink: 0; padding-top: 2px; } .chapter-nav-title { font-family: var(--font-d); font-size: 12px; letter-spacing: 0.08em; color: var(--ink2); line-height: 1.2; } .chapter-nav-item.active .chapter-nav-title { color: var(--ink); } .chapter-nav-period { font-family: var(--font-m); font-size: 8px; color: var(--ink3); letter-spacing: 0.06em; margin-top: 2px; } /* ─── TYPOGRAPHY ──────────────────────────────────────────── */ .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-xl { font-family: var(--font-d); font-size: 96px; letter-spacing: 0.03em; line-height: 0.88; color: var(--ink); } .display-lg { font-family: var(--font-d); font-size: 64px; letter-spacing: 0.03em; line-height: 0.9; color: var(--ink); } .display-md { font-family: var(--font-d); font-size: 40px; letter-spacing: 0.04em; line-height: 0.95; color: var(--ink); } .display-sm { font-family: var(--font-d); font-size: 24px; letter-spacing: 0.06em; 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); } .display-outline-xl { font-family: var(--font-d); font-size: 96px; 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: 64px; letter-spacing: 0.03em; line-height: 0.9; -webkit-text-stroke: 2px var(--red); color: transparent; } .display-outline-ink { font-family: var(--font-d); font-size: 40px; letter-spacing: 0.04em; -webkit-text-stroke: 1.5px var(--ink); color: transparent; } .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-italic { font-style: italic; } .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-text { font-family: var(--font-d); font-size: 28px; 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; } /* ─── BUTTONS ─────────────────────────────────────────────── */ .btn { font-family: var(--font-d); font-size: 14px; letter-spacing: 0.14em; display: inline-flex; align-items: center; gap: 8px; padding: 10px 22px 8px; cursor: pointer; transition: all 100ms; text-decoration: none; border: none; white-space: nowrap; line-height: 1; } .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; border: 1px solid 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-flip { color: var(--ink); background: transparent; border: 1px solid var(--crease); font-size: 16px; padding: 12px 28px 10px; position: relative; overflow: hidden; transition: all 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; } .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); } .btn-sm { font-size: 11px; padding: 7px 14px 5px; letter-spacing: 0.1em; } /* ─── 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; } .badge-outline { border: 1px solid; background: transparent; } .badge-filled { border: 1px solid transparent; } .badge-dot::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0; } /* Status badges */ .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 badges */ .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 badges */ .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; } .reg-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; } /* ─── REGISTER COMPONENTS ─────────────────────────────────── */ /* Color bar — full width register split */ .color-bar { width: 100%; height: 4px; display: flex; } .color-bar-seg { flex: 1; } .color-bar-lg { height: 8px; } /* Register cells — card treatment */ .reg-grid-6 { display: grid; grid-template-columns: repeat(6,1fr); gap: 1px; background: var(--edge); } .reg-grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--edge); } .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: 8px; 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: 8px; position: relative; z-index: 1; } /* Register bars — horizontal fill */ .reg-bar { display: flex; align-items: center; gap: 12px; } .reg-bar-label { font-family: var(--font-m); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink3); width: 84px; 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; } /* ─── STAT CARDS ──────────────────────────────────────────── */ .stat-card { background: var(--surf); padding: 24px 20px; 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: 10px; } .stat-card-value { font-family: var(--font-d); font-size: 48px; letter-spacing: 0.04em; line-height: 1; color: var(--ink); margin-bottom: 4px; } .stat-card-sub { font-size: 12px; font-weight: 300; color: var(--ink3); font-style: italic; } /* ─── TRACK ROW ───────────────────────────────────────────── */ .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 40px; align-items: center; gap: 12px; padding: 10px 16px; background: var(--surf); transition: background 80ms; cursor: pointer; } .track-row:hover { background: var(--raised); } .track-row.unenriched { opacity: 0.6; } .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; position: relative; overflow: hidden; } .track-row-art-img { width: 100%; height: 100%; object-fit: cover; } .track-row-art-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .track-row-info { overflow: hidden; } .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-keywords { 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-duration { font-family: var(--font-m); font-size: 9px; color: var(--ink3); text-align: right; } .track-row-register { width: 8px; height: 8px; border-radius: 50%; margin: 0 auto; } /* Track list header */ .track-list-header { display: grid; grid-template-columns: 32px 40px 1fr 120px 80px 80px 40px; align-items: center; gap: 12px; padding: 8px 16px; background: var(--bg); border-bottom: 1px solid var(--edge); } .track-list-header-cell { font-family: var(--font-m); font-size: 8px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink3); } /* ─── PLAYLIST CARD ───────────────────────────────────────── */ .playlist-card { background: var(--surf); padding: 20px 18px; border-top: 3px solid transparent; transition: background 120ms; cursor: pointer; position: relative; overflow: hidden; } .playlist-card:hover { background: var(--raised); } .playlist-card-cover { width: 52px; height: 52px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin-bottom: 14px; } .playlist-card-cover-q { } .playlist-card-name { font-family: var(--font-d); font-size: 15px; letter-spacing: 0.08em; color: var(--ink); line-height: 1.1; margin-bottom: 4px; } .playlist-card-meta { font-family: var(--font-m); font-size: 8px; letter-spacing: 0.12em; color: var(--ink3); text-transform: uppercase; margin-bottom: 8px; } .playlist-card-analysis { } /* ─── STORY CARD ──────────────────────────────────────────── */ .story-card { border-left: 4px solid var(--red); padding: 28px 28px 28px 32px; 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-period { font-family: var(--font-m); font-size: 9px; letter-spacing: 0.18em; color: var(--ink3); margin-bottom: 10px; } .story-title { font-family: var(--font-d); font-size: 26px; letter-spacing: 0.06em; color: var(--ink); margin-bottom: 14px; line-height: 1; } .story-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 */ .chapter { max-width: 640px; padding: 48px 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: 20px; display: flex; align-items: center; gap: 12px; } .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: 28px; } .chapter-body { font-size: 16px; font-weight: 300; color: var(--ink2); line-height: 1.9; } .chapter-body p + p { margin-top: 20px; } /* Key change marker */ .key-change { display: flex; align-items: center; gap: 16px; padding: 20px 0; margin: 8px 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: 8px; flex-shrink: 0; } .key-change-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--red); flex-shrink: 0; } /* ─── PROGRESS / LOADING ──────────────────────────────────── */ .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: 6px; } /* 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: shimmer 1.5s infinite; } @keyframes 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: spin 600ms linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ─── EMPTY STATES ────────────────────────────────────────── */ .empty-state { padding: 64px 40px; 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: 20px; line-height: 1; } .empty-state-title { font-family: var(--font-d); font-size: 22px; letter-spacing: 0.08em; color: var(--ink2); margin-bottom: 10px; } .empty-state-body { font-size: 13px; font-weight: 300; color: var(--ink3); max-width: 340px; line-height: 1.75; margin-bottom: 28px; } /* ─── NOTIFICATIONS ───────────────────────────────────────── */ .flash { display: flex; align-items: flex-start; gap: 12px; 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-body { flex: 1; } .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(30,142,216,0.06); border-color: var(--info); color: var(--info); } /* ─── FORMS ───────────────────────────────────────────────── */ .form-group { display: flex; flex-direction: column; gap: 8px; } .form-label { font-family: var(--font-m); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink3); } .form-sublabel { font-size: 11px; font-weight: 300; color: var(--ink3); margin-top: -4px; } .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:focus-visible { outline: none; } .input-error { border-color: var(--error); } .input-error:focus { 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 14px; outline: none; transition: border-color 100ms; 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='%23484644'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 32px; } .select:focus { border-color: var(--ink3); outline: none; } /* Mode card — analysis config */ .mode-card { background: var(--surf); border: 1px solid var(--edge); padding: 20px; 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: 6px; } .mode-card-desc { font-size: 12px; font-weight: 300; color: var(--ink3); line-height: 1.6; } /* ─── 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; } .pagination-info { font-family: var(--font-m); font-size: 9px; color: var(--ink3); letter-spacing: 0.08em; margin: 0 12px; } /* ─── MODAL ───────────────────────────────────────────────── */ .modal-backdrop { background: rgba(0,0,0,0.75); display: flex; align-items: center; justify-content: center; padding: 40px; } .modal { background: var(--surf); border: 1px solid var(--crease); border-top: 3px solid var(--red); padding: 32px; 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: 12px; line-height: 1; } .modal-body { font-size: 14px; font-weight: 300; color: var(--ink2); line-height: 1.75; margin-bottom: 28px; } .modal-actions { display: flex; gap: 10px; } /* ─── 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); } /* ─── SECTION DIVIDERS ────────────────────────────────────── */ .divider { width: 100%; height: 1px; background: var(--edge); } .divider-thick { height: 3px; background: var(--red); } .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%); } /* ─── HERO / PANELS ───────────────────────────────────────── */ .panel-split { display: grid; grid-template-columns: 1fr 1fr; min-height: 280px; border-bottom: 1px solid var(--edge); } .panel-left { padding: 48px 40px; border-right: 1px solid var(--edge); } .panel-right { padding: 48px 40px; position: relative; overflow: hidden; } .panel-right::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255,255,255,0.025) 1px, transparent 1px); background-size: 5px 5px; pointer-events: none; } /* Flip CTA */ .flip-cta { display: flex; align-items: center; gap: 0; background: var(--surf); border: 1px solid var(--edge); overflow: hidden; cursor: pointer; transition: border-color 150ms; } .flip-cta:hover { border-color: var(--red); } .flip-cta-text { padding: 20px 28px; 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: 6px; } .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); } /* ═══════════════════════════════════════════════════════════════ APP EXTENSIONS — not in v4 component library, carried forward ═══════════════════════════════════════════════════════════════ */ /* ─── COLOR BAR XL ────────────────────────────────────────── */ /* 12px — hero moments, full-width section dividers */ .color-bar-xl { height: 12px; } /* ─── FLASH MUTED ─────────────────────────────────────────── */ .flash-muted { background: rgba(255,255,255,0.02); border-color: var(--edge); color: var(--ink3); } /* ─── EMPTY STATE EXTENSIONS ──────────────────────────────── */ .empty-state-section { margin-top: 24px; } .empty-state-spacious { min-height: 320px; justify-content: center; } .empty-state-kicker { font-family: var(--font-m); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink3); } .empty-state-meta { font-family: var(--font-m); font-size: 10px; letter-spacing: 0.08em; color: var(--ink3); } .empty-state-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 12px; } /* ─── LOADING STATE ───────────────────────────────────────── */ .loading-state { background: var(--surf); border: 1px solid var(--edge); border-left: 4px solid var(--red); padding: 32px 32px 28px; } .loading-state-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .loading-state-title { font-family: var(--font-d); font-size: 19px; letter-spacing: 0.08em; color: var(--ink); } .loading-state-body { font-size: 14px; line-height: 1.7; color: var(--ink2); margin: 0; } .loading-state-meta { font-family: var(--font-m); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink3); margin-top: 16px; }