/* trackmatch component library — the locked aesthetic, reusable. Every component is built to match FILES/SCREENSHOTS OF ORIGINAL UI/. Pages compose these; the results body itself comes from the engine's templates/results.html (reused unchanged). */ /* ---------- layout ---------- */ .tm-shell { max-width: var(--maxw); margin: 0 auto; padding: 40px 20px; } .tm-center { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; min-height: 100svh; text-align: center; padding: 24px; } /* vertically centre a module in the viewport; margin:auto keeps it scroll-safe when the content is taller than the screen (mobile) instead of clipping. */ .tm-vcenter { min-height: 100svh; display: flex; flex-direction: column; padding: 24px 0; } .tm-vcenter > .tm-shell { margin-top: auto; margin-bottom: auto; } .tm-stack { display: flex; flex-direction: column; gap: 12px; } .tm-row-h { display: flex; gap: 12px; align-items: stretch; } .tm-muted { color: var(--grey-3); } .tm-faint { color: var(--grey-4); } .tm-italic { font-style: normal; } /* ---------- wordmark + intro ---------- */ .tm-wordmark { font-style: normal; color: var(--fg); letter-spacing: .5px; text-align: center; } .tm-intro { color: var(--grey-2); text-align: center; max-width: 560px; margin: 0 auto; } .tm-intro b, .tm-intro strong { color: var(--fg); } /* ---------- inputs (recessed / sunken bevel, win98 text-field look) ---------- */ /* data-entry fields keep the mono face (tracklists/urls read + paste better); everything else inherits the win98 UI font from . */ .tm-input, .tm-textarea, .tm-select { font-family: var(--font-mono); } .tm-input, .tm-textarea, .tm-select, .tm-upload { font-size: .95rem; text-transform: lowercase; color: var(--fg); /* transparent "empty space" over the bg animation — only borders + text show */ background: transparent; border: 1px solid var(--line); border-radius: var(--radius-chip); box-shadow: none; padding: 10px 13px; width: 100%; } .tm-input:focus, .tm-textarea:focus, .tm-select:focus { border-color: var(--accent); outline: none; } .tm-textarea { resize: vertical; min-height: 240px; line-height: 1.6; } .tm-textarea::placeholder { font-style: normal; color: var(--grey-3); } /* labelled field (stacked) */ .tm-field { display: flex; flex-direction: column; gap: 6px; } .tm-field > label { color: var(--grey-2); font-size: .9rem; } /* file upload — an outlined "empty space" button (animation shows through) */ .tm-upload { cursor: pointer; text-align: center; color: var(--grey-1); background: transparent; box-shadow: none; display: inline-flex; align-items: center; justify-content: center; min-height: 42px; } .tm-upload input[type="file"] { display: none; } .tm-upload:hover { border-color: var(--accent); color: var(--accent); } .tm-upload:active { transform: translateY(1px); } /* ---------- buttons: the original "empty space" outlined control (transparent fill so the bg animation shows underneath), in the new 8-bit font ---------- */ .tm-btn { font-family: var(--font-ui); font-size: .85rem; text-transform: lowercase; letter-spacing: .01em; cursor: pointer; color: var(--fg); background: transparent; border: 1px solid var(--line); border-radius: var(--radius-chip); box-shadow: none; padding: 10px 20px; white-space: nowrap; /* centre content for both