/* ============================================================ AudioVerse — Glossy / Glass design system ------------------------------------------------------------ Shared across every surface: buttons, cards, inputs, panels. Dark variants key off the `.dark` class on (the app's own theme toggle), independent of Tailwind's dark: utilities. ============================================================ */ /* ---------- keyframes (also backfills animate-fade-in, animate-fade-in-fast and animate-slide-up-fast, which the markup already uses but were never defined) ---------- */ @keyframes av-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes av-fade-in-fast { from { opacity: 0; } to { opacity: 1; } } @keyframes av-slide-up-fast { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } } @keyframes av-pop-in { 0% { opacity: 0; transform: scale(0.94); } 100% { opacity: 1; transform: scale(1); } } @keyframes av-shimmer { from { background-position: -400px 0; } to { background-position: 400px 0; } } @keyframes av-sheen { from { transform: translateX(-100%); } to { transform: translateX(100%); } } @keyframes av-float-slow { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -18px, 0); } } .animate-fade-in { animation: av-fade-in 0.5s ease both; } .animate-fade-in-fast { animation: av-fade-in-fast 0.25s ease both; } .animate-slide-up-fast { animation: av-slide-up-fast 0.32s cubic-bezier(0.16, 1, 0.3, 1) both; } .animate-pop-in { animation: av-pop-in 0.25s cubic-bezier(0.16, 1, 0.3, 1) both; } /* ---------- primary glossy button (amber) ---------- */ .btn-glossy { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-weight: 600; color: #fff; background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 55%, #dd8a06 100%); border: 1px solid #b45309; border-radius: 0.75rem; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -2px 4px rgba(120, 53, 15, 0.25), 0 1px 2px rgba(0, 0, 0, 0.12), 0 8px 18px -6px rgba(245, 158, 11, 0.5); text-shadow: 0 1px 1px rgba(120, 53, 15, 0.35); cursor: pointer; transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease; } .btn-glossy:hover:not(:disabled) { filter: brightness(1.07); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -2px 4px rgba(120, 53, 15, 0.25), 0 2px 4px rgba(0, 0, 0, 0.12), 0 12px 24px -6px rgba(245, 158, 11, 0.6); } .btn-glossy:active:not(:disabled) { transform: translateY(0); box-shadow: inset 0 2px 6px rgba(120, 53, 15, 0.35), 0 1px 2px rgba(0, 0, 0, 0.1); } .btn-glossy:focus-visible { outline: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 0 0 3px rgba(245, 158, 11, 0.4), 0 8px 18px -6px rgba(245, 158, 11, 0.5); } .btn-glossy:disabled { opacity: 0.5; cursor: not-allowed; filter: saturate(0.6); transform: none; } /* ---------- secondary glossy button (neutral) ---------- */ .btn-glossy-secondary { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-weight: 500; color: #334155; background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%); border: 1px solid #cbd5e1; border-radius: 0.75rem; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 2px rgba(15, 23, 42, 0.08), 0 4px 12px -4px rgba(15, 23, 42, 0.15); cursor: pointer; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; } .dark .btn-glossy-secondary { color: #e2e8f0; background: linear-gradient(180deg, #3b4a63 0%, #263349 100%); border-color: #475569; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 12px -4px rgba(0, 0, 0, 0.4); } .btn-glossy-secondary:hover:not(:disabled) { transform: translateY(-1px); border-color: #f59e0b; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 2px 4px rgba(15, 23, 42, 0.08), 0 8px 18px -6px rgba(245, 158, 11, 0.35); } .dark .btn-glossy-secondary:hover:not(:disabled) { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 2px 4px rgba(0, 0, 0, 0.3), 0 8px 18px -6px rgba(245, 158, 11, 0.4); } .btn-glossy-secondary:active:not(:disabled) { transform: translateY(0); box-shadow: inset 0 2px 5px rgba(15, 23, 42, 0.12); } .btn-glossy-secondary:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.35); } .btn-glossy-secondary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } /* ---------- danger glossy button (red) ---------- */ .btn-glossy-danger { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-weight: 500; color: #b91c1c; background: linear-gradient(180deg, #fef2f2 0%, #fee2e2 100%); border: 1px solid rgba(239, 68, 68, 0.4); border-radius: 0.75rem; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 2px rgba(15, 23, 42, 0.08); cursor: pointer; transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease; } .dark .btn-glossy-danger { color: #fca5a5; background: linear-gradient(180deg, rgba(127, 29, 29, 0.5) 0%, rgba(69, 10, 10, 0.5) 100%); border-color: rgba(239, 68, 68, 0.35); } .btn-glossy-danger:hover:not(:disabled) { transform: translateY(-1px); background: linear-gradient(180deg, #fee2e2 0%, #fecaca 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 6px 14px -6px rgba(239, 68, 68, 0.5); } .btn-glossy-danger:active:not(:disabled) { transform: translateY(0); box-shadow: inset 0 2px 5px rgba(127, 29, 29, 0.25); } .btn-glossy-danger:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.3); } /* ---------- glossy card ---------- */ .card-gloss { background: linear-gradient(180deg, #ffffff 0%, #fafaf9 100%); border: 1px solid rgba(15, 23, 42, 0.08); border-radius: 1rem; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 1px 2px rgba(15, 23, 42, 0.05), 0 12px 32px -14px rgba(15, 23, 42, 0.22); transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease; } .dark .card-gloss { background: linear-gradient(180deg, rgba(51, 65, 85, 0.55) 0%, rgba(30, 41, 59, 0.6) 100%); border-color: rgba(148, 163, 184, 0.16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 1px 2px rgba(0, 0, 0, 0.3), 0 14px 34px -14px rgba(0, 0, 0, 0.55); } .card-gloss.interactive:hover { transform: translateY(-3px); border-color: rgba(245, 158, 11, 0.4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 2px 4px rgba(15, 23, 42, 0.06), 0 20px 44px -14px rgba(245, 158, 11, 0.28); } .dark .card-gloss.interactive:hover { border-color: rgba(245, 158, 11, 0.45); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 2px 4px rgba(0, 0, 0, 0.3), 0 20px 44px -14px rgba(245, 158, 11, 0.32); } /* ---------- glass panel ---------- */ .glass { backdrop-filter: blur(16px) saturate(1.25); -webkit-backdrop-filter: blur(16px) saturate(1.25); background: rgba(255, 255, 255, 0.62); border: 1px solid rgba(255, 255, 255, 0.55); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 14px 36px -14px rgba(15, 23, 42, 0.28); } .dark .glass { background: rgba(15, 23, 42, 0.55); border-color: rgba(148, 163, 184, 0.2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 14px 36px -14px rgba(0, 0, 0, 0.6); } /* ---------- glossy input ---------- */ .input-gloss { background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); border: 1px solid #d6d3d1; border-radius: 0.6rem; box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.07), 0 1px 0 rgba(255, 255, 255, 0.7); transition: border-color 0.18s ease, box-shadow 0.18s ease; } .dark .input-gloss { background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%); border-color: #475569; color: #e2e8f0; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(255, 255, 255, 0.04); } .input-gloss::placeholder { color: #a8a29e; } .dark .input-gloss::placeholder { color: #64748b; } .input-gloss:focus { outline: none; border-color: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.28), inset 0 1px 3px rgba(15, 23, 42, 0.06); } .input-gloss:hover:not(:focus) { border-color: #f59e0b; } /* ---------- glossy progress fill (with travelling sheen) ---------- */ .progress-gloss { position: relative; overflow: hidden; background: linear-gradient(180deg, #fcd34d 0%, #f59e0b 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55); } .progress-gloss::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.55) 50%, transparent 80%); animation: av-sheen 1.6s linear infinite; } /* ---------- shimmer skeleton ---------- */ .skeleton-shimmer { background: linear-gradient(90deg, rgba(15, 23, 42, 0.06) 25%, rgba(15, 23, 42, 0.12) 50%, rgba(15, 23, 42, 0.06) 75%); background-size: 800px 100%; animation: av-shimmer 1.4s linear infinite; } .dark .skeleton-shimmer { background: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 25%, rgba(255, 255, 255, 0.11) 50%, rgba(255, 255, 255, 0.05) 75%); background-size: 800px 100%; } /* ---------- ambient page glow (fixed, behind content) ---------- */ .ambient-glow { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .ambient-glow::before { content: ""; position: absolute; top: -22vmax; left: 50%; transform: translateX(-50%); width: 95vmax; height: 62vmax; background: radial-gradient(closest-side, rgba(245, 158, 11, 0.13), transparent 70%); } .dark .ambient-glow::before { background: radial-gradient(closest-side, rgba(245, 158, 11, 0.09), transparent 70%); } .ambient-glow::after { content: ""; position: absolute; bottom: -25vmax; right: -12vmax; width: 70vmax; height: 55vmax; background: radial-gradient(closest-side, rgba(45, 212, 191, 0.07), transparent 70%); animation: av-float-slow 14s ease-in-out infinite; } .dark .ambient-glow::after { background: radial-gradient(closest-side, rgba(45, 212, 191, 0.05), transparent 70%); } /* ---------- glass panel, amber-tinted (deterministic: defined after .glass so it always wins the tie) ---------- */ .glass-amber { background: linear-gradient(120deg, rgba(251, 191, 36, 0.16), rgba(249, 115, 22, 0.10)), rgba(255, 255, 255, 0.55); border-color: rgba(245, 158, 11, 0.35); } .dark .glass-amber { background: linear-gradient(120deg, rgba(251, 191, 36, 0.10), rgba(249, 115, 22, 0.07)), rgba(15, 23, 42, 0.5); border-color: rgba(245, 158, 11, 0.3); } /* ---------- dashed glass dropzone (self-contained: no Tailwind border/background utilities on the same element) ---------- */ .dropzone-gloss { background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(250, 250, 249, 0.42)); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 2px dashed #d6d3d1; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 10px 30px -14px rgba(15, 23, 42, 0.18); transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, transform 0.2s ease; } .dark .dropzone-gloss { background: linear-gradient(180deg, rgba(30, 41, 59, 0.6), rgba(15, 23, 42, 0.42)); border-color: #475569; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 30px -14px rgba(0, 0, 0, 0.5); } .dropzone-gloss:hover { border-color: #fbbf24; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 0 0 6px rgba(245, 158, 11, 0.12), 0 18px 44px -14px rgba(245, 158, 11, 0.35); } .dropzone-gloss.is-dragging { border-color: #f59e0b; background: rgba(245, 158, 11, 0.08); box-shadow: 0 0 0 6px rgba(245, 158, 11, 0.16), 0 18px 44px -14px rgba(245, 158, 11, 0.4); transform: scale(1.01); } /* ---------- lyric part tints (beat .card-gloss deterministically) ---------- */ .card-gloss.tint-amber { border-color: rgba(245, 158, 11, 0.45); background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(245, 158, 11, 0.08)); } .dark .card-gloss.tint-amber { border-color: rgba(245, 158, 11, 0.4); background: linear-gradient(180deg, rgba(245, 158, 11, 0.1), rgba(245, 158, 11, 0.03)); } .card-gloss.tint-purple { border-color: rgba(168, 85, 247, 0.45); background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(168, 85, 247, 0.08)); } .dark .card-gloss.tint-purple { border-color: rgba(168, 85, 247, 0.4); background: linear-gradient(180deg, rgba(168, 85, 247, 0.1), rgba(168, 85, 247, 0.03)); } .card-gloss.tint-teal { border-color: rgba(45, 212, 191, 0.45); background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(45, 212, 191, 0.08)); } .dark .card-gloss.tint-teal { border-color: rgba(45, 212, 191, 0.4); background: linear-gradient(180deg, rgba(45, 212, 191, 0.1), rgba(45, 212, 191, 0.03)); } .card-gloss.tint-neutral { border-color: rgba(120, 113, 108, 0.35); } .dark .card-gloss.tint-neutral { border-color: rgba(100, 116, 139, 0.45); } /* ---------- base polish ---------- */ html { scroll-behavior: smooth; } body { font-family: 'Inter', system-ui, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: rgba(245, 158, 11, 0.32); } :focus-visible { outline: 2px solid rgba(245, 158, 11, 0.6); outline-offset: 2px; } /* slim, theme-aware scrollbar */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #d6d3d1, #a8a29e); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; } .dark ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #475569, #334155); border: 2px solid transparent; background-clip: content-box; border-radius: 8px; } /* respect reduced motion */ @media (prefers-reduced-motion: reduce) { .btn-glossy, .btn-glossy-secondary, .btn-glossy-danger, .card-gloss, .input-gloss { transition: none; } .animate-fade-in, .animate-fade-in-fast, .animate-slide-up-fast, .animate-pop-in, .skeleton-shimmer, .progress-gloss::after, .ambient-glow::after { animation: none; } }