/* ========================================================================== SpotMe — Spotify Playlist & Track Sharing Community Theme: Studio Dark Glassmorphism + Spotify Neon Green + Coff&Code Cyber Glow ========================================================================== */ :root { --bg-main: #0c0d14; --bg-card: rgba(22, 24, 38, 0.75); --bg-card-hover: rgba(30, 32, 50, 0.85); --bg-glass: rgba(255, 255, 255, 0.05); --bg-glass-hover: rgba(255, 255, 255, 0.09); --spotify-green: #1db954; --spotify-neon: #1ed760; --spotify-glow: rgba(30, 215, 96, 0.25); --coffee-gold: #e6b17e; --hot-pink: #ff3d7f; --cyber-blue: #38bdf8; --text-main: #f3f4f6; --text-dim: #9ca3af; --text-muted: #6b7280; --border-light: rgba(255, 255, 255, 0.1); --border-active: rgba(30, 215, 96, 0.5); --border-card: rgba(255, 255, 255, 0.08); --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px; --radius-full: 9999px; --shadow-main: 0 10px 30px -10px rgba(0, 0, 0, 0.6); --shadow-glow: 0 0 20px rgba(30, 215, 96, 0.2); } * { box-sizing: border-box; margin: 0; padding: 0; } html { /* No background here or on : whichever paints one would cover the #page-bg layer, which is a positioned child at z-index -1. The layer carries its own opaque colour, so there is nothing to fall back to. */ color-scheme: dark; } body { min-height: 100vh; color: var(--text-main); font-family: "IBM Plex Sans Thai", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; line-height: 1.5; -webkit-font-smoothing: antialiased; } /* Base App Layout */ .app-container { max-width: 1180px; margin: 0 auto; padding: 16px 20px 80px; width: 100%; box-sizing: border-box; } #view-feed-page { width: 100%; max-width: 100%; margin: 0 auto; } #view-profile-page { --pcard-bg: rgba(14, 18, 32, 0.85); --pcard-image: none; --pcard-border: rgba(255, 255, 255, 0.12); --pcard-title: #00f2fe; --pcard-radius: 20px; --pcard-shadow: 0 12px 30px rgba(0, 0, 0, 0.4), 0 0 20px rgba(0, 242, 254, 0.06); } /* ========================================================================== Header & Navbar ========================================================================== */ /* The bar spans the whole screen; the feed below it keeps the .app-container width. It sits outside .app-container in the markup so it can do that without a 100vw trick that would fight the scrollbar. */ .site-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 28px; background: var(--bg-card); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--border-card); box-shadow: var(--shadow-main); position: sticky; top: 0; z-index: 100; width: 100%; box-sizing: border-box; } .brand-group { display: flex; align-items: center; gap: 12px; min-width: 0; text-decoration: none; color: inherit; } .brand-icon { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #181528, #0a0910); border: 1px solid rgba(30, 215, 96, 0.4); box-shadow: 0 0 12px rgba(30, 215, 96, 0.2); } .brand-icon svg { width: 28px; height: 28px; } .brand-titles h1 { font-size: 22px; white-space: nowrap; font-weight: 700; letter-spacing: -0.02em; display: flex; align-items: center; gap: 4px; } .brand-titles h1 span { color: var(--spotify-neon); text-shadow: 0 0 10px rgba(30, 215, 96, 0.4); } .brand-tagline { display: block; font-size: 11.5px; color: var(--text-dim); white-space: nowrap; } .header-actions { display: flex; align-items: center; flex-shrink: 0; gap: 10px; } .btn-profile-chip { display: flex; align-items: center; gap: 8px; padding: 6px 14px; background: var(--bg-glass); border: 1px solid var(--border-light); border-radius: var(--radius-full); color: var(--text-main); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; } .btn-profile-chip:hover { background: var(--bg-glass-hover); border-color: var(--spotify-neon); } .user-chip-avatar { font-size: 16px; } .user-chip-img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; border: 1px solid var(--spotify-neon); } /* ========================================================================== Buttons & Common Components ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; font: inherit; font-size: 14px; font-weight: 600; border-radius: var(--radius-md); border: 1px solid var(--border-light); background: var(--bg-glass); color: var(--text-main); cursor: pointer; transition: all 0.2s ease; text-decoration: none; } .btn:hover:not(:disabled) { background: var(--bg-glass-hover); transform: translateY(-1px); } .btn:active:not(:disabled) { transform: translateY(0); } .btn.primary { background: linear-gradient(135deg, var(--spotify-neon), var(--spotify-green)); color: #05140b; border-color: var(--spotify-neon); box-shadow: 0 4px 15px rgba(30, 215, 96, 0.35); } .btn.primary:hover:not(:disabled) { background: linear-gradient(135deg, #25f06e, #1db954); box-shadow: 0 6px 20px rgba(30, 215, 96, 0.45); } .btn.ghost { background: transparent; border-color: transparent; } .btn.ghost:hover:not(:disabled) { background: var(--bg-glass); } .btn.icon-only { padding: 10px; border-radius: var(--radius-md); } .btn.small { padding: 6px 12px; font-size: 12.5px; } .btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; } /* ========================================================================== Hero Spotlight Card ========================================================================== */ .hero-section { margin-bottom: 28px; } .spotlight-card { background: linear-gradient(135deg, rgba(30, 24, 56, 0.8), rgba(18, 20, 32, 0.85)); backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius-lg); padding: 24px; position: relative; overflow: hidden; box-shadow: var(--shadow-main); } .spotlight-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--hot-pink), var(--spotify-neon), var(--cyber-blue)); } .spotlight-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: rgba(255, 61, 127, 0.15); border: 1px solid rgba(255, 61, 127, 0.35); border-radius: var(--radius-full); font-size: 12px; font-weight: 700; color: #ff6b9d; margin-bottom: 8px; } .spotlight-title { font-size: 20px; font-weight: 700; color: #fff; margin-bottom: 4px; } .spotlight-subtitle { font-size: 13.5px; color: var(--text-dim); margin-bottom: 16px; } .spotlight-player { border-radius: 12px; overflow: hidden; background: #121212; border: 1px solid rgba(255, 255, 255, 0.08); } .spotlight-player iframe { display: block; width: 100%; border-radius: 12px; border: 0; background: #121212; color-scheme: dark; } /* Top Profile of the Week Spotlight Card */ .top-profiles-card { position: relative; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.15); box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6), 0 0 24px rgba(255, 215, 0, 0.1); padding: 20px 22px; } .top-profile-vote-tag { font-size: 11.5px; font-weight: 700; color: #ff9800; background: rgba(255, 152, 0, 0.12); border: 1px solid rgba(255, 152, 0, 0.3); padding: 4px 10px; border-radius: var(--radius-full); } /* --- Story rail: ranked profile rings --------------------------------- */ .story-rail { display: flex; align-items: flex-end; gap: 14px; overflow-x: auto; padding: 8px 2px 4px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.2) transparent; } .story-rail::-webkit-scrollbar { height: 6px; } .story-rail::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); border-radius: var(--radius-full); } .story-ring { flex: 0 0 auto; width: 92px; display: flex; flex-direction: column; align-items: center; gap: 5px; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; font: inherit; } .story-ring-frame { position: relative; display: block; width: 68px; height: 68px; border-radius: 50%; padding: 3px; background: linear-gradient(135deg, var(--hot-pink), var(--cyber-blue)); transition: transform 0.18s ease, box-shadow 0.18s ease; } .story-ring.rank-1 .story-ring-frame { background: linear-gradient(135deg, #ffd700, #ff9800, #ff3d7f); } .story-ring.rank-2 .story-ring-frame { background: linear-gradient(135deg, #e2e8f0, #94a3b8); } .story-ring.rank-3 .story-ring-frame { background: linear-gradient(135deg, #e6b17e, #b45309); } .story-ring:hover .story-ring-frame { transform: translateY(-2px) scale(1.04); } .story-ring.active .story-ring-frame { box-shadow: 0 0 0 2px var(--bg-main), 0 0 0 4px var(--spotify-neon), 0 0 18px var(--spotify-glow); } .story-ring-avatar { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: #16182a; font-size: 28px; } .story-ring-avatar img { width: 100%; height: 100%; object-fit: cover; } .story-ring-rank { position: absolute; right: -2px; bottom: -2px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: var(--radius-full); background: #16182a; border: 1.5px solid rgba(255, 255, 255, 0.18); color: #fff; font-size: 11px; font-weight: 800; line-height: 19px; text-align: center; } .story-ring-name { max-width: 100%; font-size: 11.5px; font-weight: 700; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .story-ring-fives { font-size: 10.5px; font-weight: 700; color: var(--hot-pink); } /* --- Selected profile, shown under the rail --------------------------- */ .btn-open-winner-profile { flex-shrink: 0; padding: 8px 14px; font-size: 12px; font-weight: 700; } .top-profile-anthem-box { background: rgba(0, 0, 0, 0.4); border-radius: 12px; padding: 10px; border: 1px dashed rgba(255, 255, 255, 0.12); } .top-profile-anthem-label { font-size: 11px; font-weight: 600; color: var(--spotify-neon); margin-bottom: 6px; } /* ========================================================================== Inline Post Composer Box (กล่องโพสต์ข้อความหน้าฟีด) ========================================================================== */ .composer-section { margin-bottom: 24px; } .composer-card { background: var(--bg-card); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius-lg); padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow-main); transition: border-color 0.2s ease, box-shadow 0.2s ease; } .composer-card:focus-within { border-color: rgba(30, 215, 96, 0.4); box-shadow: var(--shadow-main), 0 0 20px rgba(30, 215, 96, 0.1); } .composer-top-row { display: flex; align-items: flex-start; gap: 12px; } .composer-user-avatar { width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); border: 1px solid var(--border-light); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; } .composer-inputs { flex: 1; } .composer-textarea { width: 100%; background: transparent; border: none; color: var(--text-main); font: inherit; font-size: 14.5px; resize: none; outline: none; min-height: 48px; line-height: 1.5; } .composer-textarea::placeholder { color: var(--text-muted); } /* Media Fetch Status Indicator */ .media-fetch-status { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: rgba(56, 189, 248, 0.1); border: 1px solid rgba(56, 189, 248, 0.3); border-radius: var(--radius-md); font-size: 12.5px; color: #38bdf8; } .spinner-dot { width: 12px; height: 12px; border: 2px solid #38bdf8; border-top-color: transparent; border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Live Media Preview Card */ .media-preview-container { width: 100%; } .live-preview-card { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--radius-md); position: relative; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-light); animation: fadeIn 0.25s ease; } .live-preview-card.preview-spotify { background: rgba(30, 215, 96, 0.08); border-color: rgba(30, 215, 96, 0.4); } .live-preview-card.preview-youtube { background: rgba(255, 0, 51, 0.08); border-color: rgba(255, 0, 51, 0.4); } .preview-cover { width: 48px; height: 48px; border-radius: 8px; overflow: hidden; flex-shrink: 0; background: #000; display: flex; align-items: center; justify-content: center; } .preview-cover img { width: 100%; height: 100%; object-fit: cover; } .preview-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .preview-badge { font-size: 10px; font-weight: 800; letter-spacing: 0.04em; } .preview-title { font-size: 13.5px; font-weight: 700; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .preview-artist { font-size: 11.5px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .btn-preview-remove { width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); border: none; color: var(--text-dim); font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s ease; } .btn-preview-remove:hover { background: rgba(255, 61, 127, 0.3); color: #fff; } /* Composer Optional Row (Title) */ .composer-optional-row { padding-top: 4px; } .composer-input-sub { width: 100%; padding: 8px 12px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-light); border-radius: var(--radius-sm); color: #fff; font: inherit; font-size: 13px; } .composer-input-sub:focus { outline: none; border-color: var(--spotify-neon); } /* Composer Footer Toolbar */ .composer-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.06); } .composer-tools { display: flex; align-items: center; gap: 8px; } .composer-select { padding: 6px 10px; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--border-light); border-radius: var(--radius-sm); color: var(--text-main); font: inherit; font-size: 12.5px; cursor: pointer; } .composer-select:focus { outline: none; border-color: var(--spotify-neon); } .btn-tool-toggle { padding: 6px 10px; font-size: 12.5px; } .btn-post-submit { padding: 8px 18px; font-size: 13.5px; } @keyframes fadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } /* ========================================================================== Filter Pills & Search Controls Bar ========================================================================== */ .controls-section { margin-bottom: 24px; display: flex; flex-direction: column; gap: 14px; } .mood-filters-wrapper { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; scrollbar-color: var(--border-light) transparent; } .mood-filters-wrapper::-webkit-scrollbar { height: 4px; } .mood-filters-wrapper::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 4px; } .filter-pill { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; background: var(--bg-card); border: 1px solid var(--border-card); border-radius: var(--radius-full); color: var(--text-dim); font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: all 0.2s ease; } .filter-pill:hover { color: var(--text-main); background: var(--bg-card-hover); border-color: var(--border-light); } .filter-pill.active { color: #fff; background: rgba(30, 215, 96, 0.15); border-color: var(--spotify-neon); box-shadow: 0 0 12px rgba(30, 215, 96, 0.25); } .filter-pill span:first-child { font-size: 14px; } /* Feed Toolbar (Search + Sort + Count) */ .feed-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .feed-search-box { flex: 1; min-width: 240px; position: relative; } .feed-search-box input { width: 100%; padding: 10px 14px 10px 36px; background: var(--bg-card); border: 1px solid var(--border-card); border-radius: var(--radius-md); color: var(--text-main); font: inherit; font-size: 13.5px; transition: border-color 0.2s ease; } .feed-search-box input:focus { outline: none; border-color: var(--spotify-neon); box-shadow: 0 0 0 3px rgba(30, 215, 96, 0.15); } .search-icon-inside { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; } .feed-meta-row { display: flex; align-items: center; gap: 10px; } .feed-count-tag { font-size: 12.5px; color: var(--text-muted); font-weight: 600; } .sort-select-box select { padding: 9px 12px; background: var(--bg-card); border: 1px solid var(--border-card); border-radius: var(--radius-md); color: var(--text-main); font: inherit; font-size: 13px; cursor: pointer; } .sort-select-box select:focus { outline: none; border-color: var(--spotify-neon); } /* ========================================================================== Post Feed & Cards (1 Post per Row Timeline Layout) ========================================================================== */ /* Two columns of posts on a wide screen, one column once it gets narrow. Multi-column rather than grid: posts vary a lot in height (a card with a photo against a one-line status), and grid rows would leave a hole beside every short card. Columns pack tight with no gaps. */ .feed-grid { column-count: 2; column-gap: 22px; width: 100%; } .feed-grid > * { break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid; margin-bottom: 22px; } @media (max-width: 900px) { .feed-grid { column-count: 1; } } /* the empty state is a single message, not a card in one column */ .feed-grid > .empty-feed { column-span: all; } .post-card { background: var(--bg-card); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--border-card); border-radius: var(--radius-lg); padding: 18px; display: flex; flex-direction: column; gap: 14px; box-shadow: var(--shadow-main); transition: transform 0.2s ease, border-color 0.2s ease; } .post-card:hover { border-color: rgba(255, 255, 255, 0.15); transform: translateY(-2px); } /* Post Header */ .post-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .post-author-box { display: flex; align-items: center; gap: 10px; } .author-avatar { width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); border: 1px solid var(--border-light); display: flex; align-items: center; justify-content: center; font-size: 18px; } .author-details { display: flex; flex-direction: column; } .author-name-row { display: flex; align-items: center; gap: 6px; } .author-name { font-size: 13.5px; font-weight: 700; color: #fff; } .post-time { font-size: 11px; color: var(--text-muted); } .post-mood-pill { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border-light); border-radius: var(--radius-full); font-size: 11.5px; font-weight: 600; color: var(--mood-col, #1db954); } /* Post Body */ .post-body { display: flex; flex-direction: column; gap: 4px; } .post-title { font-size: 16px; font-weight: 700; color: #fff; line-height: 1.35; } .post-caption { font-size: 13.5px; color: var(--text-dim); line-height: 1.5; white-space: pre-line; } .text-only-post-body { padding: 4px 0 8px; } .large-status-caption { font-size: 16px; font-weight: 500; color: #f1f3f9; line-height: 1.6; } /* Music Track/Playlist Embed Wrapper & Meta Bar */ .media-embed-wrapper { background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius-md); overflow: hidden; display: flex; flex-direction: column; } .media-embed-wrapper.is-youtube { border-color: rgba(255, 0, 51, 0.25); } .media-embed-wrapper.is-spotify { border-color: rgba(30, 215, 96, 0.25); } .media-meta-bar { display: flex; align-items: center; gap: 14px; padding: 14px; } .media-cover-box { position: relative; width: 104px; height: 104px; border-radius: 10px; overflow: hidden; flex-shrink: 0; background: #111; display: flex; align-items: center; justify-content: center; font-size: 30px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5); } .media-cover-img { width: 100%; height: 100%; object-fit: cover; } .media-track-info { flex: 1; min-width: 0; display: flex; flex-direction: column; } .media-badge-type { font-size: 9px; font-weight: 800; letter-spacing: 0.05em; } .media-track-name { margin: 2px 0 0; font-size: 16px; font-weight: 800; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .media-artist-name { margin: 0; font-size: 12.5px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .btn-media-direct { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--radius-sm); text-decoration: none; font-size: 11.5px; font-weight: 600; white-space: nowrap; transition: all 0.2s ease; } .btn-media-direct.spotify { background: rgba(30, 215, 96, 0.12); border: 1px solid rgba(30, 215, 96, 0.25); color: var(--spotify-neon); } .btn-media-direct.spotify:hover { background: rgba(30, 215, 96, 0.25); border-color: var(--spotify-neon); } .btn-media-direct.youtube { background: rgba(255, 0, 51, 0.12); border: 1px solid rgba(255, 0, 51, 0.25); color: #ff4d6d; } .btn-media-direct.youtube:hover { background: rgba(255, 0, 51, 0.25); border-color: #ff0033; } .spotify-iframe-container { width: 100%; line-height: 0; border-radius: 12px; overflow: hidden; background: #121212; } .spotify-iframe-container iframe { display: block; width: 100%; border-radius: 12px; border: 0; background: #121212; color-scheme: dark; } .youtube-iframe-container { width: 100%; aspect-ratio: 16 / 9; max-height: 320px; background: #000; border-radius: 12px; overflow: hidden; } .youtube-iframe-container iframe { width: 100%; height: 100%; border: none; display: block; } /* Post Action Bar */ .post-actions { display: flex; align-items: center; justify-content: space-between; padding-top: 4px; } .reaction-group { display: flex; align-items: center; gap: 6px; } .btn-react { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; background: var(--bg-glass); border: 1px solid var(--border-light); border-radius: var(--radius-full); color: var(--text-dim); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; } .btn-react:hover { background: var(--bg-glass-hover); color: var(--text-main); } .btn-react.active { background: rgba(30, 215, 96, 0.15); border-color: var(--spotify-neon); color: #fff; } .action-meta-group { display: flex; align-items: center; gap: 8px; } .btn-action-icon { display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; background: var(--bg-glass); border: 1px solid var(--border-light); border-radius: var(--radius-md); color: var(--text-dim); font: inherit; font-size: 12.5px; cursor: pointer; transition: all 0.2s ease; } .btn-action-icon:hover { background: var(--bg-glass-hover); color: var(--text-main); } /* Comments Section */ .post-comments-box { background: rgba(0, 0, 0, 0.25); border-radius: var(--radius-md); padding: 12px; display: flex; flex-direction: column; gap: 10px; } .comments-list { display: flex; flex-direction: column; gap: 8px; max-height: 240px; overflow-y: auto; } .no-comments-text { font-size: 12px; color: var(--text-muted); text-align: center; padding: 8px 0; } .comment-item { display: flex; gap: 8px; font-size: 12.5px; } .comment-avatar { font-size: 15px; flex-shrink: 0; } .comment-content { flex: 1; background: rgba(255, 255, 255, 0.04); padding: 6px 10px; border-radius: var(--radius-sm); } .comment-header { display: flex; justify-content: space-between; margin-bottom: 2px; } .comment-author { font-weight: 700; color: #fff; } .comment-time { font-size: 10px; color: var(--text-muted); } .comment-text { color: var(--text-dim); } .comment-form { display: flex; gap: 6px; } .comment-input { flex: 1; padding: 7px 10px; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--border-light); border-radius: var(--radius-sm); color: #fff; font: inherit; font-size: 12.5px; } .comment-input:focus { outline: none; border-color: var(--spotify-neon); } /* Empty Feed State */ .empty-feed { grid-column: 1 / -1; text-align: center; padding: 60px 20px; background: var(--bg-card); border: 1px dashed var(--border-light); border-radius: var(--radius-lg); display: flex; flex-direction: column; align-items: center; gap: 10px; } .empty-icon { font-size: 48px; margin-bottom: 4px; } .empty-feed h3 { font-size: 18px; color: #fff; } .empty-feed p { font-size: 13.5px; color: var(--text-dim); max-width: 360px; margin-bottom: 6px; } /* ========================================================================== Modals & Overlays ========================================================================== */ .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.75); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 999; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; } .modal-overlay.open { opacity: 1; pointer-events: auto; } .modal-content { background: #141322; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: var(--radius-lg); width: 100%; max-width: 540px; max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8); display: flex; flex-direction: column; transform: scale(0.95); transition: transform 0.2s ease; } .modal-overlay.open .modal-content { transform: scale(1); } .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border-light); } .modal-header h3 { font-size: 17px; font-weight: 700; color: #fff; } .modal-close { background: none; border: none; color: var(--text-muted); font-size: 20px; cursor: pointer; padding: 4px; } .modal-close:hover { color: #fff; } .modal-body { padding: 20px; display: flex; flex-direction: column; gap: 16px; } .form-group { display: flex; flex-direction: column; gap: 6px; } .form-group label { font-size: 13px; font-weight: 600; color: var(--text-dim); } .form-input, .form-textarea, .form-select { width: 100%; padding: 10px 14px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border-light); border-radius: var(--radius-md); color: #fff; font: inherit; font-size: 13.5px; transition: border-color 0.2s ease; } .form-textarea { min-height: 80px; resize: vertical; } .form-input:focus, .form-textarea:focus, .form-select:focus { outline: none; border-color: var(--spotify-neon); box-shadow: 0 0 0 3px rgba(30, 215, 96, 0.15); } /* Spotify Search inside Modal */ .spotify-search-wrapper { position: relative; } .search-results-box { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; max-height: 200px; overflow-y: auto; } .search-result-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-card); border-radius: var(--radius-sm); cursor: pointer; transition: background 0.15s ease; } .search-result-item:hover { background: rgba(255, 255, 255, 0.08); } .result-cover { width: 36px; height: 36px; border-radius: 4px; overflow: hidden; flex-shrink: 0; } .result-cover img { width: 100%; height: 100%; object-fit: cover; } .result-info { flex: 1; min-width: 0; } .result-badge { font-size: 8.5px; font-weight: 800; color: var(--spotify-neon); } .result-title { font-size: 12.5px; font-weight: 700; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .result-artist { font-size: 11px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .search-hint { font-size: 12px; color: var(--text-dim); background: rgba(255, 255, 255, 0.03); padding: 10px; border-radius: var(--radius-sm); line-height: 1.4; } /* Selected Track Preview */ .selected-track-box { margin-top: 8px; } .selected-card { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: rgba(30, 215, 96, 0.1); border: 1px solid var(--spotify-neon); border-radius: var(--radius-md); } .selected-cover { width: 44px; height: 44px; border-radius: 6px; overflow: hidden; flex-shrink: 0; } .selected-cover img { width: 100%; height: 100%; object-fit: cover; } .selected-details { flex: 1; min-width: 0; } .selected-badge { font-size: 10px; font-weight: 800; color: var(--spotify-neon); } .selected-name { font-size: 13.5px; font-weight: 700; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .selected-artist { font-size: 11.5px; color: var(--text-dim); } /* Avatar Picker */ .avatar-picker-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; } .avatar-option { aspect-ratio: 1; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border-light); border-radius: var(--radius-sm); font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s ease; } .avatar-option:hover { background: rgba(255, 255, 255, 0.1); } .avatar-option.selected { background: rgba(30, 215, 96, 0.2); border-color: var(--spotify-neon); transform: scale(1.1); } /* Status Messages */ .status-msg { font-size: 12.5px; padding: 8px 12px; border-radius: var(--radius-sm); margin-top: 4px; } .status-msg.info { background: rgba(56, 189, 248, 0.15); color: #38bdf8; } .status-msg.success { background: rgba(30, 215, 96, 0.15); color: #1ed760; } .status-msg.error { background: rgba(239, 68, 68, 0.15); color: #f87171; } /* Toast Notifications */ .spot-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(100px); background: #1e1b33; color: #fff; border: 1px solid var(--spotify-neon); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), 0 0 15px rgba(30, 215, 96, 0.3); padding: 10px 20px; border-radius: var(--radius-full); font-size: 13.5px; font-weight: 600; z-index: 9999; opacity: 0; pointer-events: none; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .spot-toast.show { transform: translateX(-50%) translateY(0); opacity: 1; pointer-events: auto; } .spot-toast.success { border-color: var(--spotify-neon); } .spot-toast.warning { border-color: #fbbf24; } /* Floating Action Button (Mobile) */ .fab-post { display: none; position: fixed; bottom: 20px; right: 20px; width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, var(--spotify-neon), var(--spotify-green)); color: #05140b; border: none; box-shadow: 0 6px 20px rgba(30, 215, 96, 0.5); font-size: 24px; align-items: center; justify-content: center; cursor: pointer; z-index: 90; } @media (max-width: 600px) { .fab-post { display: flex; } .site-header .btn-create-post-main { display: none; } } /* ========================================================================== Narrow screens: keep the header on one tidy line and stop the composer toolbar from wrapping its buttons onto two lines. ========================================================================== */ @media (max-width: 720px) { .site-header { padding: 10px 14px; gap: 8px; } /* the tagline was wrapping to three lines beside the logo */ .brand-tagline { display: none; } .brand-icon { width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0; } .brand-icon svg { width: 22px; height: 22px; } .brand-titles h1 { font-size: 19px; } .header-actions { gap: 6px; } /* icon-only Mood button: the label was breaking across two lines */ .btn-text-hide-sm { display: none; } .btn-daily-mood-trigger { padding: 7px 10px; } .btn-profile-chip { padding: 5px 10px; max-width: 46vw; } .btn-profile-chip .user-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .composer-footer { flex-wrap: wrap; gap: 8px; } .composer-tools { flex: 1 1 100%; gap: 6px; } .composer-mood-wrap { flex: 1 1 auto; min-width: 0; } .composer-select { width: 100%; } .composer-submit-group { flex: 1 1 100%; } .btn-post-submit { width: 100%; justify-content: center; white-space: nowrap; } .btn-tool-toggle { white-space: nowrap; flex-shrink: 0; } } @media (max-width: 460px) { /* six actions on a phone-width card: the IG Story label was the one breaking onto a second line and making the whole row taller */ .btn-text-story { display: none; } .btn-ig-story { padding-left: 10px; padding-right: 10px; } /* author name + badge + mood pill were wrapping across two lines */ .post-author-box { min-width: 0; flex: 1 1 auto; } .author-details { min-width: 0; } .author-name-row { min-width: 0; flex-wrap: nowrap; } .author-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .post-mood-pill { flex-shrink: 0; white-space: nowrap; padding: 4px 8px; } } .hidden { display: none !important; } /* ========================================================================== Spotify OAuth Login & Profile Avatar Styles ========================================================================== */ .user-chip-img { width: 26px !important; height: 26px !important; min-width: 26px !important; min-height: 26px !important; max-width: 26px !important; max-height: 26px !important; border-radius: 50% !important; object-fit: cover !important; display: inline-block !important; border: 1.5px solid var(--spotify-neon) !important; flex-shrink: 0; } .composer-avatar-img { width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; max-width: 40px !important; max-height: 40px !important; border-radius: 50% !important; object-fit: cover !important; display: block !important; border: 2px solid var(--spotify-neon) !important; flex-shrink: 0; } .avatar-photo, .comment-avatar-img, .spotify-user-img, .author-avatar img { width: 100% !important; height: 100% !important; border-radius: 50% !important; object-fit: cover !important; display: block !important; } .author-avatar.has-img, .comment-avatar.has-img { padding: 0; overflow: hidden; border-color: rgba(30, 215, 96, 0.4); } .divider-line { display: flex; align-items: center; text-align: center; color: var(--text-muted); font-size: 12px; margin: 6px 0 10px; } .divider-line::before, .divider-line::after { content: ''; flex: 1; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .divider-line span { padding: 0 10px; } /* Spotify Login Card in Modal */ .spotify-auth-card { margin-bottom: 4px; } .spotify-login-card { background: linear-gradient(135deg, rgba(30, 215, 96, 0.1), rgba(12, 13, 20, 0.6)); border: 1px solid rgba(30, 215, 96, 0.3); border-radius: var(--radius-md); padding: 16px; display: flex; flex-direction: column; gap: 12px; } .spotify-login-info h4 { font-size: 15px; color: #fff; margin-bottom: 4px; } .spotify-login-info p { font-size: 12.5px; color: var(--text-dim); line-height: 1.45; } .btn-spotify-auth { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 12px 18px; background: var(--spotify-green); border: none; border-radius: var(--radius-full); color: #000; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 16px rgba(30, 215, 96, 0.35); transition: all 0.2s ease; } .btn-spotify-auth:hover { background: var(--spotify-neon); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(30, 215, 96, 0.5); } /* Spotify Connected State */ .spotify-connected-card { background: rgba(30, 215, 96, 0.08); border: 1px solid rgba(30, 215, 96, 0.4); border-radius: var(--radius-md); padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; } .spotify-card-header { display: flex; align-items: center; justify-content: space-between; } .spotify-connected-badge { font-size: 12px; font-weight: 700; color: var(--spotify-neon); } .btn-logout-danger { color: #f87171; border-color: rgba(239, 68, 68, 0.25); padding: 4px 8px; font-size: 11.5px; } .btn-logout-danger:hover { background: rgba(239, 68, 68, 0.15); border-color: #f87171; } .spotify-user-meta { display: flex; align-items: center; gap: 14px; } .spotify-user-img-box { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; border: 2px solid var(--spotify-neon); flex-shrink: 0; background: #000; display: flex; align-items: center; justify-content: center; } .spotify-user-details { flex: 1; min-width: 0; } .spotify-display-name { font-size: 15px; font-weight: 700; color: #fff; } .spotify-account-sub { font-size: 11.5px; color: var(--text-dim); margin-top: 1px; } .spotify-profile-link { display: inline-block; font-size: 11.5px; color: var(--spotify-neon); text-decoration: none; margin-top: 4px; } .spotify-profile-link:hover { text-decoration: underline; } /* ========================================================================== Composer Locked State (Require Login) ========================================================================== */ .composer-locked-card { padding: 16px 20px; background: linear-gradient(135deg, rgba(30, 215, 96, 0.08), rgba(15, 17, 26, 0.9)); border: 1px dashed rgba(30, 215, 96, 0.35); border-radius: var(--radius-md); } .composer-locked-content { display: flex; align-items: center; gap: 16px; } .locked-icon-badge { font-size: 28px; width: 48px; height: 48px; border-radius: 50%; background: rgba(30, 215, 96, 0.15); border: 1px solid rgba(30, 215, 96, 0.3); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .locked-text { flex: 1; } .locked-text h4 { font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 2px; } .locked-text p { font-size: 12.5px; color: var(--text-dim); line-height: 1.4; } .btn-composer-login { width: auto; padding: 10px 18px; font-size: 13.5px; flex-shrink: 0; } @media (max-width: 680px) { .composer-locked-content { flex-direction: column; text-align: center; gap: 12px; } .btn-composer-login { width: 100%; } } /* ========================================================================== IG Story Post Action Button ========================================================================== */ .btn-ig-story { color: #ff3d7f !important; border-color: rgba(255, 61, 127, 0.25) !important; gap: 5px; } .btn-ig-story:hover { background: rgba(255, 61, 127, 0.15) !important; border-color: #ff3d7f !important; transform: translateY(-1px); } .btn-text-story { font-size: 12px; font-weight: 700; } /* ========================================================================== Instagram Story Generator Modal ========================================================================== */ .modal-story-dialog { max-width: 540px !important; max-height: 94vh; display: flex; flex-direction: column; } .story-modal-body { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 16px 20px 20px; overflow-y: auto; } /* Style Selector */ .story-style-selector { width: 100%; display: flex; flex-direction: column; gap: 8px; } .style-selector-title { font-size: 12px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; } .story-styles-pills { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .story-custom-note-wrap { width: 100%; } .story-quote-input { width: 100%; padding: 8px 12px; background: rgba(255, 255, 255, 0.05); border: 1px dashed rgba(255, 255, 255, 0.2); border-radius: var(--radius-sm); color: var(--text-main); font-size: 13px; font-family: inherit; outline: none; transition: all 0.2s ease; } .story-quote-input:focus { background: rgba(255, 255, 255, 0.08); border-color: var(--spotify-neon); box-shadow: 0 0 10px rgba(30, 215, 96, 0.2); } .btn-story-style { padding: 8px 4px; font-size: 11.5px; font-weight: 700; font-family: inherit; color: var(--text-muted); background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-light); border-radius: var(--radius-sm); cursor: pointer; white-space: nowrap; text-align: center; transition: all 0.2s ease; } .btn-story-style:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.3); color: var(--text-main); } .btn-story-style.active { background: rgba(30, 215, 96, 0.2); border-color: var(--spotify-neon); color: #fff; box-shadow: 0 0 10px rgba(30, 215, 96, 0.3); } /* Canvas Viewport (Scales 1080x1920 to nice phone aspect-ratio) */ .story-canvas-viewport { width: 100%; max-width: 320px; aspect-ratio: 9 / 16; border-radius: 24px; overflow: hidden; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8), 0 0 20px rgba(30, 215, 96, 0.2); border: 3px solid rgba(255, 255, 255, 0.12); background: #000; display: flex; align-items: center; justify-content: center; } .story-canvas { width: 100%; height: 100%; display: block; } /* Story Actions Footer */ .story-actions-footer { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; } .btn-story-download { font-size: 13.5px; font-weight: 700; } .btn-story-share-ig { background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important; color: #fff !important; border: none !important; font-size: 13.5px; font-weight: 700; box-shadow: 0 4px 15px rgba(220, 39, 67, 0.4); } .btn-story-share-ig:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(220, 39, 67, 0.6); } @media (max-width: 500px) { .story-styles-pills { grid-template-columns: repeat(2, 1fr); } .story-actions-footer { grid-template-columns: 1fr; } } .btn-preview-story { border-color: rgba(220, 39, 67, 0.4) !important; color: #ff5e7e !important; background: rgba(220, 39, 67, 0.08) !important; font-size: 11.5px !important; font-weight: 700 !important; padding: 4px 10px !important; border-radius: 8px !important; white-space: nowrap !important; transition: all 0.2s ease; } .btn-preview-story:hover { background: rgba(220, 39, 67, 0.2) !important; border-color: #ff5e7e !important; color: #fff !important; transform: translateY(-1px); } .btn-story-quick { border-color: rgba(220, 39, 67, 0.35) !important; color: #ff758f !important; background: rgba(220, 39, 67, 0.06) !important; font-size: 11px !important; font-weight: 700 !important; padding: 4px 8px !important; white-space: nowrap !important; border-radius: 6px !important; } .btn-story-quick:hover { background: rgba(220, 39, 67, 0.2) !important; color: #fff !important; border-color: #ff5e7e !important; } .btn-modal-story { border-color: rgba(220, 39, 67, 0.4) !important; color: #ff5e7e !important; background: rgba(220, 39, 67, 0.08) !important; font-weight: 700 !important; } .btn-modal-story:hover { background: rgba(220, 39, 67, 0.22) !important; border-color: #ff5e7e !important; color: #fff !important; } /* ========================================================================== Toppick Spotlight & Matchup Trigger ========================================================================== */ .toppick-card { border-color: rgba(30, 215, 96, 0.45); background: linear-gradient(135deg, rgba(30, 215, 96, 0.12), rgba(12, 13, 20, 0.85)); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 24px rgba(30, 215, 96, 0.15); } .spotlight-header-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; } .toppick-badge { background: linear-gradient(135deg, #ff4500, #ff8c00) !important; color: #fff !important; font-weight: 800; box-shadow: 0 0 14px rgba(255, 69, 0, 0.4); } .btn-matchup-trigger { color: var(--spotify-neon); border-color: rgba(30, 215, 96, 0.35); background: rgba(30, 215, 96, 0.08); } .btn-matchup-trigger:hover { background: rgba(30, 215, 96, 0.2); border-color: var(--spotify-neon); transform: translateY(-1px); } /* ========================================================================== Song Matchup Modal (2 Songs Side-by-Side) ========================================================================== */ .modal-matchup-dialog { max-width: 780px !important; max-height: 94vh; } .matchup-modal-body { padding: 16px 20px 24px; } .matchup-modal-intro { font-size: 13.5px; color: var(--text-dim); text-align: center; margin-bottom: 20px; } .matchup-battle-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center; } .matchup-side { background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 16px; display: flex; flex-direction: column; gap: 12px; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); position: relative; overflow: hidden; } .matchup-side:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.25); transform: translateY(-2px); } .matchup-side.is-winner { border-color: var(--spotify-neon); background: rgba(30, 215, 96, 0.12); box-shadow: 0 0 24px rgba(30, 215, 96, 0.35); transform: scale(1.02); } .matchup-side.is-loser { opacity: 0.55; filter: grayscale(0.4); } .matchup-cover-box { width: 100%; aspect-ratio: 1; border-radius: var(--radius-md); overflow: hidden; position: relative; background: #000; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6); } .matchup-cover { width: 100%; height: 100%; object-fit: cover; display: block; } .matchup-cover-placeholder { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(circle at center, #1a1c29 0%, #0a0b10 100%); padding: 16px; text-align: center; gap: 8px; } .placeholder-vinyl { font-size: 38px; animation: spinSlow 8s linear infinite; filter: drop-shadow(0 0 12px rgba(30, 215, 96, 0.4)); } @keyframes spinSlow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .placeholder-text { font-size: 11.5px; color: var(--text-dim); font-weight: 600; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .matchup-tag { position: absolute; top: 8px; left: 8px; background: rgba(0, 0, 0, 0.75); backdrop-filter: blur(4px); color: #fff; font-size: 10.5px; font-weight: 800; padding: 3px 8px; border-radius: var(--radius-full); border: 1px solid rgba(255, 255, 255, 0.15); } .matchup-track-info { text-align: center; } .matchup-name { font-size: 15px; font-weight: 700; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .matchup-artist { font-size: 12px; color: var(--text-dim); margin-top: 2px; } .matchup-mini-player { border-radius: var(--radius-sm); overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.08); } .matchup-vote-action { margin-top: 4px; } .btn-vote-side { width: 100%; padding: 10px; font-size: 13.5px; font-weight: 700; } /* Matchup Stats on Vote Reveal */ .matchup-stats { text-align: center; padding: 8px; background: rgba(0, 0, 0, 0.4); border-radius: var(--radius-sm); } .stats-pct { font-size: 24px; font-weight: 900; color: var(--spotify-neon); } .stats-votes { font-size: 11.5px; color: var(--text-dim); } /* VS Circle Divider */ .matchup-vs-divider { display: flex; align-items: center; justify-content: center; } .vs-circle { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, #ff0055, #ff5500); color: #fff; font-size: 14px; font-weight: 900; letter-spacing: -0.02em; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 16px rgba(255, 0, 85, 0.6); } /* Post Action Bar in Matchup Modal */ .matchup-post-action { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.1); display: flex; flex-direction: column; align-items: center; gap: 12px; } .matchup-result-msg { font-size: 13.5px; font-weight: 600; color: var(--spotify-neon); } .matchup-buttons-row { display: flex; gap: 10px; justify-content: center; width: 100%; } @media (max-width: 650px) { .matchup-battle-grid { grid-template-columns: 1fr; gap: 12px; } .matchup-vs-divider { transform: rotate(90deg); margin: -4px 0; } .matchup-buttons-row { flex-direction: column; } } /* ========================================================================== Daily Mood Check-in ("Your Mood Today?") Modal Styles ========================================================================== */ .btn-daily-mood-trigger { color: #fbbf24; border-color: rgba(251, 191, 36, 0.3); background: rgba(251, 191, 36, 0.08); } .btn-daily-mood-trigger:hover { background: rgba(251, 191, 36, 0.18); border-color: #fbbf24; } .modal-daily-mood-dialog { max-width: 640px !important; } .daily-mood-body { padding: 16px 20px 24px; } .mood-picker-prompt { font-size: 14px; color: var(--text-dim); text-align: center; margin-bottom: 18px; line-height: 1.5; } .daily-mood-color-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .daily-mood-color-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-light); border-radius: var(--radius-md); cursor: pointer; text-align: left; font: inherit; color: inherit; transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); position: relative; overflow: hidden; } .daily-mood-color-card::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: var(--card-color, var(--spotify-neon)); transition: width 0.2s ease; } .daily-mood-color-card:hover { background: rgba(255, 255, 255, 0.08); border-color: var(--card-color, var(--spotify-neon)); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4); } .daily-mood-color-card:hover::before { width: 6px; } .mood-color-orb { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 0 12px var(--card-color, rgba(30, 215, 96, 0.5)); } .mood-orb-icon { font-size: 18px; } .mood-card-texts { display: flex; flex-direction: column; min-width: 0; } .mood-card-title { font-size: 13.5px; font-weight: 700; color: #fff; } .mood-card-desc { font-size: 11.5px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Step 2: Result Step */ .mood-result-step { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; animation: fadeInPop 0.35s ease; } @keyframes fadeInPop { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } } .mood-result-badge { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; padding: 4px 12px; border-radius: var(--radius-full); border: 1px solid var(--spotify-neon); background: rgba(0, 0, 0, 0.5); margin-bottom: 6px; } .mood-result-header h3 { font-size: 24px; font-weight: 800; color: #fff; } .mood-result-header p { font-size: 13px; color: var(--text-dim); margin-top: 2px; } .mood-recommended-card { width: 100%; background: linear-gradient(135deg, rgba(30, 215, 96, 0.1), rgba(15, 17, 26, 0.9)); border: 1px solid rgba(30, 215, 96, 0.4); border-radius: var(--radius-lg); padding: 16px; text-align: left; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.6); } .recommended-tag { font-size: 11px; font-weight: 800; color: var(--spotify-neon); margin-bottom: 10px; text-transform: uppercase; } .daily-rec-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .daily-rec-cover { width: 48px; height: 48px; border-radius: 8px; overflow: hidden; background: #000; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .daily-rec-cover img { width: 100%; height: 100%; object-fit: cover; } .daily-rec-name { font-size: 14.5px; font-weight: 700; color: #fff; } .daily-rec-artist { font-size: 12px; color: var(--text-dim); } .daily-rec-votes { font-size: 11px; color: #ff9800; font-weight: 600; margin-top: 2px; } .daily-rec-iframe { border-radius: 12px; overflow: hidden; background: #121212; border: 1px solid rgba(255, 255, 255, 0.08); } .daily-rec-iframe iframe { display: block; width: 100%; border-radius: 12px; border: 0; background: #121212; color-scheme: dark; } .mood-result-actions { width: 100%; display: flex; flex-direction: column; gap: 8px; margin-top: 4px; } .btn-apply-mood { width: 100%; padding: 12px; font-size: 14px; font-weight: 700; } .btn-share-mood-story { width: 100%; padding: 10px; font-size: 13.5px; font-weight: 600; color: #ff3d7f; border-color: rgba(255, 61, 127, 0.3); } .btn-share-mood-story:hover { background: rgba(255, 61, 127, 0.15); } .btn-repick { align-self: center; font-size: 12px; } @media (max-width: 540px) { .daily-mood-color-grid { grid-template-columns: 1fr; } } /* ========================================================================== Hi5 Interactive Profile & Customization Studio (Full-Page View) ========================================================================== */ .profile-page-nav-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; padding: 10px 16px; background: rgba(18, 20, 29, 0.75); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius-lg); width: 100%; box-sizing: border-box; } .btn-back-to-feed { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; color: #fff; border-color: rgba(255, 255, 255, 0.2); } .btn-back-to-feed:hover { background: rgba(255, 255, 255, 0.1); border-color: var(--spotify-neon); color: var(--spotify-neon); } /* Hi5 2-Column Profile Layout */ /* Profile card look. A profile may override these on #view-profile-page; the values here are what it looked like before that was possible. */ #view-profile-page { --pcard-bg: rgba(14, 18, 32, 0.85); --pcard-border: rgba(255, 255, 255, 0.12); --pcard-title: #00f2fe; --pcard-radius: 20px; --pcard-shadow: 0 12px 30px rgba(0, 0, 0, 0.4), 0 0 20px rgba(0, 242, 254, 0.06); } .hi5-profile-2col-layout { display: grid; grid-template-columns: 310px 1fr; gap: 20px; width: 100%; max-width: 100%; margin: 0 0 40px 0; align-items: flex-start; box-sizing: border-box; } /* Left Sidebar (ฝั่งซ้าย) */ .hi5-left-sidebar { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 80px; } .hi5-sidebar-card { background-color: var(--pcard-bg); background-image: var(--pcard-image); background-size: cover; background-position: center; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--pcard-border); border-radius: var(--pcard-radius); padding: 20px; box-shadow: var(--pcard-shadow); } .hi5-sidebar-avatar-wrap { display: flex; justify-content: center; margin-bottom: 14px; } .hi5-sidebar-identity { text-align: center; } .hi5-sidebar-identity .hi5-name-wrap { justify-content: center; } .hi5-sidebar-identity .hi5-status-quote-box { margin: 10px auto 0 auto; } .hi5-sidebar-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.08); text-align: center; } .sidebar-stat-item { display: flex; flex-direction: column; align-items: center; } .sidebar-stat-item .stat-num { font-size: 16px; font-weight: 800; color: #fff; } .sidebar-stat-item .stat-lbl { font-size: 11px; font-weight: 600; color: var(--text-muted); } .hi5-card-header { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; } .hi5-card-icon { font-size: 16px; } .hi5-card-title { font-size: 12px; font-weight: 800; color: var(--pcard-title); letter-spacing: 0.8px; } .hi5-anthem-card .hi5-anthem-player { border-radius: 12px; overflow: hidden; background: #000; border: 1px solid rgba(255, 255, 255, 0.1); min-height: 152px; } .hi5-anthem-card .hi5-anthem-player iframe { width: 100%; height: 152px; border: none; display: block; } /* Attached Image in Posts */ .post-attached-image-wrap { margin: 12px 0 6px 0; border-radius: var(--radius-md); overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center; background: #090a10; } .post-attached-image { display: block; width: auto; max-width: 100%; height: auto; max-height: 520px; margin: 0 auto; } .hi5-item-image-wrap { margin-top: 8px; border-radius: var(--radius-md); overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.1); background: #090a10; } .hi5-item-attached-image { display: block; width: auto; max-width: 100%; height: auto; max-height: 420px; margin: 0 auto; } /* Image Attachment preview inside composer */ .attached-image-preview-box { position: relative; margin: 8px 0; display: inline-block; max-width: 180px; border-radius: 8px; overflow: hidden; border: 1px solid rgba(0, 242, 254, 0.4); } .attached-image-preview-box img { width: 100%; height: 110px; object-fit: cover; display: block; } .btn-remove-attached-img { position: absolute; top: 4px; right: 4px; background: rgba(0, 0, 0, 0.75); color: #fff; border: none; border-radius: 50%; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-size: 12px; cursor: pointer; } .file-input-hidden { display: none !important; } /* Custom Background Wallpaper Upload in Profile Studio */ .hi5-custom-bg-upload-box { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; } .custom-bg-thumb-preview { width: 80px; height: 48px; border-radius: 6px; overflow: hidden; border: 1px solid #00f2fe; background-size: cover; background-position: center; box-shadow: 0 0 10px rgba(0, 242, 254, 0.4); } .hi5-quick-action-card { padding: 14px 16px; } .hi5-quick-action-header { font-size: 11.5px; font-weight: 800; color: #00f2fe; letter-spacing: 0.8px; margin-bottom: 8px; text-transform: uppercase; } .hi5-quick-action-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; } .hi5-quick-btn { padding: 6px 10px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius-sm); color: #fff; font-size: 11px; font-weight: 700; cursor: pointer; text-align: center; transition: all 0.2s ease; white-space: nowrap; } .hi5-quick-btn:hover { background: rgba(0, 242, 254, 0.15); border-color: #00f2fe; color: #00f2fe; } /* Top Friends Card (ตารางเพื่อน 8 ช่อง) */ .hi5-friends-card .hi5-card-sub { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--text-muted); } .hi5-top-friends-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .hi5-friend-item { display: flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none; cursor: pointer; background: none; border: 0; padding: 0; font: inherit; color: inherit; } .hi5-friends-empty { grid-column: 1 / -1; text-align: center; padding: 12px 4px; color: var(--text-dim); font-size: 10.5px; line-height: 1.6; } .hi5-friends-empty .empty-icon { font-size: 22px; margin-bottom: 4px; } .hi5-friends-empty p { margin: 0; } .hi5-friend-avatar { width: 48px; height: 48px; border-radius: 8px; overflow: hidden; background: #1e1b2e; border: 1px solid rgba(255, 255, 255, 0.2); display: flex; align-items: center; justify-content: center; font-size: 22px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4); transition: transform 0.2s ease, border-color 0.2s ease; } .hi5-friend-avatar img { width: 100%; height: 100%; object-fit: cover; } .hi5-friend-item:hover .hi5-friend-avatar { transform: scale(1.08); border-color: #00f2fe; box-shadow: 0 0 12px rgba(0, 242, 254, 0.5); } .hi5-friend-name { font-size: 10px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 52px; text-align: center; } .hi5-friend-mood { font-size: 8.5px; font-weight: 700; color: var(--hot-pink); } /* Right Column Content Sections (Specs & About Me) */ .hi5-content-section { padding: 18px 22px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); background: rgba(10, 14, 25, 0.45); } .hi5-section-title-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; padding-bottom: 6px; border-bottom: 1px dashed rgba(255, 255, 255, 0.15); } .hi5-section-title-bar .title-text { font-size: 13px; font-weight: 800; color: #00f2fe; letter-spacing: 0.5px; } .hi5-specs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px 16px; } .spec-item { font-size: 12px; color: var(--text-muted); display: flex; gap: 6px; align-items: baseline; } .spec-label { font-weight: 700; color: rgba(255, 255, 255, 0.6); min-width: 100px; flex-shrink: 0; } .spec-val { color: #fff; font-weight: 600; word-break: break-all; } .spec-val.highlight { color: #ff758c; font-weight: 700; } /* About Me Table */ .hi5-aboutme-table { display: flex; flex-direction: column; gap: 7px; } .about-row { display: flex; align-items: baseline; gap: 8px; font-size: 12px; line-height: 1.5; } .about-label { font-weight: 800; color: #c084fc; min-width: 120px; flex-shrink: 0; } .about-val { color: #e2e8f0; font-weight: 500; } /* Wall Comment Box Header & Warning note */ .hi5-wall-composer-header h4 { margin: 0 0 10px 0; font-size: 13.5px; font-weight: 800; color: #fff; } .hi5-wall-form-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; gap: 12px; flex-wrap: wrap; } .hi5-wall-warning-note { font-size: 10.5px; color: var(--text-muted); font-style: italic; } /* Right Content (ฝั่งขวา) */ .hi5-right-content { background-color: var(--pcard-bg); background-image: var(--pcard-image); background-size: cover; background-position: center; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--pcard-border); border-radius: var(--pcard-radius); box-shadow: var(--pcard-shadow); overflow: hidden; min-width: 0; } .hi5-banner-badge-title { font-size: 11px; font-weight: 800; letter-spacing: 1px; padding: 4px 10px; background: rgba(0, 0, 0, 0.65); backdrop-filter: blur(8px); border: 1px solid rgba(0, 242, 254, 0.4); border-radius: var(--radius-full); color: #00f2fe; } .btn-banner-custom-quick { background: rgba(0, 0, 0, 0.6) !important; backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.25) !important; color: #fff !important; font-size: 11.5px !important; font-weight: 700 !important; border-radius: var(--radius-full) !important; transition: all 0.2s ease; } .btn-banner-custom-quick:hover { background: rgba(0, 242, 254, 0.2) !important; border-color: #00f2fe !important; color: #00f2fe !important; transform: scale(1.04); } @media (max-width: 860px) { .hi5-profile-2col-layout { grid-template-columns: 1fr; } .hi5-left-sidebar { position: static; } } /* Hi5 Skin Banner (16:9 Collage Wallpaper Banner) */ .hi5-skin-banner { position: relative; min-height: 270px; padding: 24px 24px 22px; overflow: hidden; border-bottom: 1px solid rgba(255, 255, 255, 0.12); transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); display: flex; flex-direction: column; justify-content: space-between; } .hi5-banner-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13, 17, 30, 0.25) 0%, rgba(13, 17, 30, 0.92) 100%); pointer-events: none; z-index: 1; } /* Skins Presets with Deep Electric Blues & Glowing Accents */ .skin-electric_blue { background: linear-gradient(135deg, #090e1f 0%, #101c38 45%, #18092a 100%), radial-gradient(circle at 80% 20%, rgba(0, 242, 254, 0.2) 0%, transparent 50%), radial-gradient(circle at 20% 80%, rgba(192, 132, 252, 0.18) 0%, transparent 50%); } .skin-y2k_glitter { background: linear-gradient(135deg, #2b082c 0%, #4a0e4e 40%, #0d1b3e 100%), radial-gradient(circle at 30% 30%, rgba(255, 117, 140, 0.25) 0%, transparent 60%); } .skin-emo_neon { background: linear-gradient(135deg, #07070c 0%, #1f0122 50%, #060a1d 100%), repeating-linear-gradient(45deg, rgba(255, 0, 127, 0.04) 0, rgba(255, 0, 127, 0.04) 12px, transparent 12px, transparent 24px); } .skin-kawaii_pastel { background: linear-gradient(135deg, #2a1130 0%, #3d1c47 50%, #13243f 100%), radial-gradient(circle at 50% 50%, rgba(244, 114, 182, 0.2) 0%, transparent 60%); } .skin-cyber_matrix { background: linear-gradient(135deg, #020b05 0%, #05230e 50%, #031024 100%), linear-gradient(rgba(30, 215, 96, 0.12) 1px, transparent 1px) 0 0 / 22px 22px, linear-gradient(90deg, rgba(30, 215, 96, 0.12) 1px, transparent 1px) 0 0 / 22px 22px; } .skin-retro_arcade { background: linear-gradient(135deg, #1c0b3b 0%, #3a0d5c 50%, #0a1128 100%), radial-gradient(circle, rgba(167, 139, 250, 0.25) 1px, transparent 1px) 0 0 / 18px 18px; } /* Soundwave Audio Spectrum Graphic */ .hi5-soundwave-wrap { position: absolute; bottom: 0; left: 0; right: 0; height: 70px; display: flex; align-items: flex-end; justify-content: center; gap: 6px; opacity: 0.45; pointer-events: none; z-index: 1; padding: 0 20px; } .soundwave-bar { flex: 1; max-width: 14px; height: 20%; border-radius: 4px 4px 0 0; background: var(--wave-col, #00f2fe); animation: soundwaveBounce 1.4s ease-in-out infinite alternate; } .hi5-soundwave-wrap.style-neon_cyan .soundwave-bar { --wave-col: #00f2fe; box-shadow: 0 0 10px rgba(0, 242, 254, 0.6); } .hi5-soundwave-wrap.style-magenta_pulse .soundwave-bar { --wave-col: #ff2a85; box-shadow: 0 0 10px rgba(255, 42, 133, 0.6); } .hi5-soundwave-wrap.style-purple_haze .soundwave-bar { --wave-col: #c084fc; box-shadow: 0 0 10px rgba(192, 132, 252, 0.6); } .hi5-soundwave-wrap.style-matrix_glow .soundwave-bar { --wave-col: #1ed760; box-shadow: 0 0 10px rgba(30, 215, 96, 0.6); } .soundwave-bar:nth-child(2n) { animation-delay: 0.2s; height: 50%; } .soundwave-bar:nth-child(3n) { animation-delay: 0.4s; height: 80%; } .soundwave-bar:nth-child(4n) { animation-delay: 0.1s; height: 35%; } .soundwave-bar:nth-child(5n) { animation-delay: 0.5s; height: 95%; } @keyframes soundwaveBounce { 0% { transform: scaleY(0.2); } 100% { transform: scaleY(1); } } /* Collage Elements Container */ .hi5-collage-elements { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; } /* Polaroid Card */ .collage-polaroid-card { position: absolute; top: 14px; right: 28px; width: 95px; background: #fdfdfd; padding: 6px 6px 14px 6px; border-radius: 4px; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.6), 0 0 15px rgba(255, 255, 255, 0.15); transform: rotate(6deg); transition: transform 0.3s ease; pointer-events: auto; } .collage-polaroid-card:hover { transform: rotate(2deg) scale(1.08); } .polaroid-tape { position: absolute; top: -8px; left: 24px; width: 45px; height: 14px; background: rgba(255, 255, 255, 0.65); backdrop-filter: blur(4px); transform: rotate(-4deg); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); } .polaroid-photo { width: 100%; height: 72px; background: linear-gradient(135deg, #18092a 0%, #301b52 100%); border-radius: 2px; display: flex; align-items: center; justify-content: center; font-size: 24px; overflow: hidden; } .polaroid-caption { display: block; font-size: 9.5px; font-weight: 700; color: #1a1a24; text-align: center; margin-top: 4px; font-family: monospace, sans-serif; } /* Rotating Vinyl Widget */ .collage-vinyl-widget { position: absolute; top: 18px; right: 145px; width: 82px; height: 82px; pointer-events: auto; opacity: 0.85; } .vinyl-disc { width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle, #0a0a0f 30%, #15151e 60%, #000 100%); border: 2px solid rgba(255, 255, 255, 0.15); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.7), 0 0 12px rgba(0, 242, 254, 0.3); display: flex; align-items: center; justify-content: center; animation: vinylSpin 8s linear infinite; } @keyframes vinylSpin { 100% { transform: rotate(360deg); } } .vinyl-center-label { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #ff2a85 0%, #00f2fe 100%); display: flex; align-items: center; justify-content: center; font-size: 6px; font-weight: 900; color: #fff; letter-spacing: 0.5px; box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.5); } /* Floating Stickers Layer */ .hi5-stickers-layer { position: absolute; inset: 0; pointer-events: auto; } .collage-floating-sticker { position: absolute; padding: 5px 12px; border-radius: var(--radius-full); font-size: 11.5px; font-weight: 800; display: inline-flex; align-items: center; gap: 5px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5); backdrop-filter: blur(8px); cursor: default; user-select: none; transition: transform 0.2s ease; animation: stickerFloat 3s ease-in-out infinite alternate; } .collage-floating-sticker:hover { transform: scale(1.15) rotate(0deg) !important; } @keyframes stickerFloat { 0% { transform: translateY(0px) rotate(var(--rot, 0deg)); } 100% { transform: translateY(-5px) rotate(var(--rot, 0deg)); } } /* Floating Lyrics Ribbon */ .hi5-floating-lyrics { position: absolute; bottom: 12px; right: 20px; padding: 6px 14px; background: rgba(13, 17, 30, 0.75); backdrop-filter: blur(12px); border: 1px solid rgba(0, 242, 254, 0.35); border-radius: var(--radius-full); font-size: 11.5px; font-weight: 600; color: #00f2fe; text-shadow: 0 0 10px rgba(0, 242, 254, 0.5); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4); } /* Current Mood Selector Section */ .hi5-current-mood-section { padding: 14px 20px; background: rgba(16, 24, 47, 0.7); border-bottom: 1px solid rgba(255, 255, 255, 0.08); display: flex; flex-direction: column; gap: 10px; } .mood-selector-label { font-size: 12px; font-weight: 800; color: #00f2fe; letter-spacing: 0.8px; text-transform: uppercase; } .hi5-mood-pills-row { display: flex; align-items: center; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; } .hi5-mood-pills-row::-webkit-scrollbar { display: none; } .hi5-mood-pill-btn { padding: 6px 14px; border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); color: var(--text-muted); font-size: 12.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; transition: all 0.2s ease; } .hi5-mood-pill-btn:hover { background: rgba(255, 255, 255, 0.12); color: #fff; border-color: rgba(255, 255, 255, 0.3); transform: translateY(-1px); } .hi5-mood-pill-btn.active { background: rgba(0, 242, 254, 0.18); border-color: #00f2fe; color: #fff; box-shadow: 0 0 15px rgba(0, 242, 254, 0.4); } /* Banner Header Top Bar */ .hi5-banner-top-bar { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .hi5-stats-badges { display: flex; align-items: center; gap: 8px; } .hi5-stat-chip { padding: 4px 10px; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: var(--radius-full); font-size: 11.5px; font-weight: 600; color: #fff; } .hi5-banner-close { background: rgba(0, 0, 0, 0.55) !important; color: #fff !important; border-radius: 50% !important; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; font-size: 18px; cursor: pointer; border: 1px solid rgba(255, 255, 255, 0.2) !important; transition: all 0.2s ease; } .hi5-banner-close:hover { background: rgba(255, 0, 60, 0.8) !important; transform: scale(1.1); } /* Identity Row */ .hi5-identity-row { position: relative; z-index: 2; display: flex; align-items: center; gap: 18px; } /* Avatar Frames */ .hi5-avatar-frame { width: 76px; height: 76px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #111; position: relative; transition: all 0.3s ease; } .hi5-avatar-inner { width: 66px; height: 66px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 34px; background: #1e1b2e; } .hi5-avatar-inner img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Frame Presets */ .frame-neon_cyan { border: 3px solid #00f2fe; box-shadow: 0 0 20px rgba(0, 242, 254, 0.8), inset 0 0 10px rgba(0, 242, 254, 0.5); animation: neonCyanPulse 2s ease-in-out infinite alternate; } @keyframes neonCyanPulse { 0% { box-shadow: 0 0 12px rgba(0, 242, 254, 0.5); } 100% { box-shadow: 0 0 24px rgba(0, 242, 254, 0.9), inset 0 0 8px rgba(0, 242, 254, 0.4); } } .frame-neon_glow { box-shadow: 0 0 16px rgba(255, 42, 133, 0.8), 0 0 4px #ff2a85; border: 3px solid #ff2a85; animation: pulseGlow 2.5s infinite alternate; } @keyframes pulseGlow { 0% { box-shadow: 0 0 10px rgba(255, 42, 133, 0.5); } 100% { box-shadow: 0 0 24px rgba(255, 42, 133, 0.9), 0 0 8px #fff; } } /* Pickers in Customize Studio */ .hi5-stickers-picker-grid, .hi5-soundwaves-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); gap: 10px; margin-top: 8px; } .sticker-pick-item, .soundwave-pick-item { padding: 10px 12px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-md); cursor: pointer; display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: #fff; transition: all 0.2s ease; } .sticker-pick-item:hover, .soundwave-pick-item:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.3); } .sticker-pick-item.active, .soundwave-pick-item.active { background: rgba(0, 242, 254, 0.15); border-color: #00f2fe; color: #00f2fe; box-shadow: 0 0 12px rgba(0, 242, 254, 0.3); } .frame-glitter_gold { border: 3px solid #facc15; box-shadow: 0 0 16px rgba(250, 204, 21, 0.7), 0 0 6px #fff; } .frame-polaroid { border-radius: 8px !important; background: #ffffff !important; padding: 4px 4px 12px 4px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6); transform: rotate(-3deg); } .frame-polaroid .hi5-avatar-inner { border-radius: 4px !important; } .frame-retro_pixel { border-radius: 0 !important; border: 4px solid #a855f7; box-shadow: 4px 4px 0 #ec4899, -4px -4px 0 #06b6d4; } .frame-retro_pixel .hi5-avatar-inner { border-radius: 0 !important; } .frame-clean_circle { border: 2px solid rgba(255, 255, 255, 0.3); } .hi5-identity-text { flex: 1; min-width: 0; } .hi5-name-wrap { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; } .hi5-name-wrap h2 { margin: 0; font-size: 22px; font-weight: 800; color: #fff; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6); } .hi5-badge { padding: 2px 10px; font-size: 11px; font-weight: 700; border-radius: var(--radius-full); background: rgba(30, 215, 96, 0.2); color: var(--spotify-neon); border: 1px solid rgba(30, 215, 96, 0.4); } .hi5-status-quote-box { display: flex; align-items: center; gap: 6px; padding: 6px 12px; background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(10px); border: 1px dashed rgba(255, 255, 255, 0.25); border-radius: var(--radius-md); max-width: fit-content; } .hi5-quote-mood { font-size: 16px; flex-shrink: 0; } .hi5-status-quote-box p { margin: 0; font-size: 12.5px; font-style: italic; color: #e2e8f0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Give Fives Section */ .hi5-fives-section { padding: 12px 24px; background: rgba(255, 255, 255, 0.02); border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .hi5-fives-title { font-size: 12px; font-weight: 700; color: var(--text-dim); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.05em; } .hi5-fives-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; } .btn-five-prop { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6px 4px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-light); border-radius: var(--radius-sm); cursor: pointer; transition: all 0.2s ease; font-family: inherit; user-select: none; } .btn-five-prop:hover { background: rgba(255, 255, 255, 0.12); transform: translateY(-2px) scale(1.04); border-color: rgba(255, 255, 255, 0.3); } .btn-five-prop:active { transform: scale(0.95); } .five-prop-icon { font-size: 18px; margin-bottom: 2px; } .five-prop-label { font-size: 10.5px; font-weight: 700; color: var(--text-main); white-space: nowrap; } .five-prop-count { font-size: 10px; color: var(--text-dim); font-weight: 600; margin-top: 1px; } /* Profile Anthem Player Box */ .hi5-anthem-section { padding: 14px 24px; background: rgba(18, 18, 18, 0.8); border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .hi5-anthem-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .hi5-anthem-icon { font-size: 14px; } .hi5-anthem-label { font-size: 11px; font-weight: 800; color: var(--spotify-neon); letter-spacing: 0.05em; } .hi5-anthem-track-name { font-size: 12px; font-weight: 600; color: #fff; margin-left: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hi5-anthem-player { border-radius: 12px; overflow: hidden; background: #121212; } .hi5-anthem-player iframe { display: block; width: 100%; height: 80px; border: 0; border-radius: 12px; background: #121212; color-scheme: dark; } /* Navigation Tabs */ .hi5-nav-tabs { display: grid; grid-template-columns: repeat(4, 1fr); background: rgba(0, 0, 0, 0.4); border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .hi5-tab-btn { padding: 12px 8px; font-size: 12.5px; font-weight: 700; font-family: inherit; color: var(--text-dim); background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; text-align: center; transition: all 0.2s ease; white-space: nowrap; } .hi5-tab-btn:hover { color: var(--text-main); background: rgba(255, 255, 255, 0.03); } .hi5-tab-btn.active { color: var(--spotify-neon); border-bottom-color: var(--spotify-neon); background: rgba(30, 215, 96, 0.06); } /* Tab Panels */ .hi5-tab-panel { display: none; padding: 20px 24px; } .hi5-tab-panel.active { display: block; } /* Tab 1: Timeline & Status Post */ .hi5-status-post-card { padding: 12px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-md); margin-bottom: 20px; } .hi5-status-input-row { display: flex; align-items: center; gap: 10px; } .status-avatar { font-size: 24px; flex-shrink: 0; } .hi5-status-input-row input { flex: 1; background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: var(--radius-sm); padding: 8px 12px; color: #fff; font-size: 13px; font-family: inherit; outline: none; } .hi5-status-input-row input:focus { border-color: var(--spotify-neon); } .hi5-timeline-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .hi5-timeline-header h4 { margin: 0; font-size: 14px; font-weight: 700; color: var(--text-main); } .hi5-count-tag { font-size: 11px; font-weight: 600; color: var(--text-dim); } .hi5-timeline-list { display: flex; flex-direction: column; gap: 12px; } .hi5-timeline-item { padding: 14px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius-md); display: flex; flex-direction: column; gap: 8px; } .hi5-timeline-item-header { display: flex; align-items: center; justify-content: space-between; } .hi5-item-mood-badge { padding: 2px 8px; font-size: 11px; font-weight: 700; border-radius: var(--radius-full); background: rgba(30, 215, 96, 0.15); color: var(--spotify-neon); } .hi5-item-time { font-size: 11px; color: var(--text-muted); } .hi5-item-caption { font-size: 13.5px; color: #e2e8f0; margin: 0; } /* Tab 2: Testimonials Board */ .hi5-wall-composer { margin-bottom: 20px; padding: 14px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-md); } .hi5-wall-composer h4 { margin: 0 0 8px 0; font-size: 13.5px; font-weight: 700; color: var(--text-main); } .hi5-wall-textarea { width: 100%; font-size: 13px; resize: vertical; } .hi5-testimonials-list { display: flex; flex-direction: column; gap: 10px; } .hi5-testimonial-card { padding: 12px 14px; background: rgba(255, 255, 255, 0.025); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius-md); display: flex; gap: 12px; } .hi5-tm-avatar { font-size: 24px; width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, 0.06); display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; } .hi5-tm-avatar img { width: 100%; height: 100%; object-fit: cover; } .hi5-tm-content { flex: 1; min-width: 0; } .hi5-tm-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; } .hi5-tm-author { font-size: 13px; font-weight: 700; color: #fff; } .hi5-tm-time { font-size: 11px; color: var(--text-muted); } .hi5-tm-text { font-size: 13px; color: #cbd5e1; margin: 0; word-break: break-word; } /* Tab 3: Customize Studio */ .hi5-customize-wrap { display: flex; flex-direction: column; gap: 18px; } .hi5-custom-group { display: flex; flex-direction: column; gap: 8px; } .hi5-custom-label { font-size: 13px; font-weight: 700; color: var(--text-main); } .hi5-skins-picker-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .skin-picker-card { padding: 10px; border-radius: var(--radius-sm); border: 2px solid rgba(255, 255, 255, 0.12); cursor: pointer; transition: all 0.2s ease; position: relative; display: flex; flex-direction: column; gap: 4px; } .skin-picker-card:hover { border-color: rgba(255, 255, 255, 0.4); transform: translateY(-2px); } .skin-picker-card.active { border-color: var(--spotify-neon); box-shadow: 0 0 12px rgba(30, 215, 96, 0.4); } .skin-picker-title { font-size: 12px; font-weight: 700; color: #fff; } .skin-picker-desc { font-size: 10px; color: var(--text-dim); } .hi5-frames-picker-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; } .frame-picker-card { padding: 8px; background: rgba(255, 255, 255, 0.04); border: 2px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius-sm); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; transition: all 0.2s ease; } .frame-picker-card:hover { border-color: rgba(255, 255, 255, 0.4); } .frame-picker-card.active { border-color: var(--spotify-neon); box-shadow: 0 0 10px rgba(30, 215, 96, 0.3); } .frame-picker-card span:first-child { font-size: 20px; } .frame-picker-card span:last-child { font-size: 10.5px; font-weight: 700; color: var(--text-main); text-align: center; } @media (max-width: 600px) { .hi5-fives-grid { grid-template-columns: repeat(3, 1fr); } .hi5-skins-picker-grid { grid-template-columns: 1fr; } .hi5-frames-picker-grid { grid-template-columns: repeat(3, 1fr); } .hi5-nav-tabs { grid-template-columns: repeat(2, 1fr); } } /* ========================================================================== Empty / unfilled states (a profile shows what it has, not invented answers) ========================================================================== */ .spec-val-blank, .hi5-about-val-blank { color: var(--text-muted); } .hi5-anthem-empty, .daily-rec-empty { margin: 0; padding: 14px 10px; text-align: center; color: var(--text-dim); font-size: 11.5px; line-height: 1.7; } .daily-rec-empty .empty-icon { font-size: 26px; margin-bottom: 6px; } .hi5-custom-hint { margin: 2px 0 10px; font-size: 11px; color: var(--text-muted); } .hi5-about-input-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; } .hi5-about-input-cell { display: flex; flex-direction: column; gap: 4px; } .hi5-about-input-label { font-size: 11.5px; color: var(--text-muted); } /* ========================================================================== Page background layer (owner-configurable) ========================================================================== */ #page-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; background-color: var(--bg-main); background-image: radial-gradient(1200px 700px at 15% -10%, rgba(56, 189, 248, 0.18), transparent 60%), radial-gradient(1000px 600px at 85% 10%, rgba(139, 92, 246, 0.20), transparent 60%); background-repeat: no-repeat; background-position: center top; } /* ========================================================================== Profile widgets ========================================================================== */ .hi5-widget-column { display: flex; flex-direction: column; gap: 14px; } .hi5-widget-column:empty { display: none; } /* A widget in the right column is a section of the surrounding card, matching the Profile Details and About Me blocks it sits between. */ .hi5-right-content > .hi5-widget-column { gap: 0; } .widget-section { padding: 18px 22px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .widget-section:last-child { border-bottom: 0; } .widget-card { overflow: hidden; } .widget-blank { margin: 0; padding: 10px 2px; font-size: 11.5px; color: var(--text-muted); } .widget-empty-hint p { margin: 0; font-size: 11.5px; line-height: 1.7; color: var(--text-dim); } .widget-video { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-md); overflow: hidden; background: #000; } .widget-video iframe { width: 100%; height: 100%; border: 0; display: block; } .widget-unmute { margin-top: 8px; width: 100%; padding: 7px 10px; font: inherit; font-size: 12px; font-weight: 700; color: var(--text-main); background: var(--bg-glass); border: 1px solid var(--border-light); border-radius: var(--radius-sm); cursor: pointer; } .widget-unmute:hover { background: var(--bg-glass-hover); border-color: var(--spotify-neon); } .widget-music iframe { display: block; border-radius: 12px; } .widget-gallery { display: grid; gap: 6px; } .widget-gallery.layout-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .widget-gallery.layout-single { grid-template-columns: minmax(0, 1fr); } .widget-gallery-item { padding: 0; border: 1px solid var(--border-light); border-radius: 10px; overflow: hidden; background: #101018; cursor: pointer; aspect-ratio: 1 / 1; } .widget-gallery.layout-single .widget-gallery-item { aspect-ratio: auto; } .widget-gallery.layout-single .widget-gallery-item img { width: auto; max-width: 100%; height: auto; max-height: 420px; margin: 0 auto; } .widget-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; } .widget-gallery-item:hover { border-color: var(--spotify-neon); } .widget-text { margin: 0; font-size: 12.5px; line-height: 1.75; color: var(--text-main); white-space: pre-wrap; overflow-wrap: anywhere; } .widget-links { display: flex; flex-direction: column; gap: 6px; } .widget-link { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--bg-glass); border: 1px solid var(--border-light); color: var(--text-main); font-size: 12px; font-weight: 600; text-decoration: none; overflow-wrap: anywhere; } .widget-link:hover { background: var(--bg-glass-hover); border-color: var(--spotify-neon); } /* Gallery lightbox */ .widget-lightbox { position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(0, 0, 0, 0.88); backdrop-filter: blur(6px); } .widget-lightbox img { max-width: min(92vw, 1100px); max-height: 86vh; border-radius: var(--radius-md); box-shadow: var(--shadow-main); } .widget-lightbox-close, .widget-lightbox-nav { position: absolute; background: rgba(255, 255, 255, 0.1); border: 1px solid var(--border-light); color: #fff; border-radius: var(--radius-full); cursor: pointer; font: inherit; } .widget-lightbox-close { top: 18px; right: 18px; width: 38px; height: 38px; font-size: 16px; } .widget-lightbox-nav { top: 50%; transform: translateY(-50%); width: 44px; height: 44px; font-size: 26px; line-height: 1; } .widget-lightbox-nav.prev { left: 16px; } .widget-lightbox-nav.next { right: 16px; } .widget-lightbox-close:hover, .widget-lightbox-nav:hover { background: rgba(255, 255, 255, 0.2); } /* ========================================================================== Studio: background picker ========================================================================== */ .bg-palette-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; margin-bottom: 12px; } .bg-swatch { display: flex; flex-direction: column; gap: 5px; padding: 0; background: none; border: 0; cursor: pointer; color: inherit; font: inherit; } .bg-swatch-preview { display: block; height: 62px; border-radius: var(--radius-sm); border: 2px solid var(--border-light); transition: border-color 0.15s ease, transform 0.15s ease; } .bg-swatch:hover .bg-swatch-preview { transform: translateY(-2px); } .bg-swatch.active .bg-swatch-preview { border-color: var(--spotify-neon); box-shadow: 0 0 14px var(--spotify-glow); } .bg-swatch-name { font-size: 10.5px; font-weight: 600; color: var(--text-dim); text-align: center; } .bg-swatch.active .bg-swatch-name { color: var(--spotify-neon); } .bg-upload-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; } #bg-use-tile.active { border-color: var(--spotify-neon); color: var(--spotify-neon); } .bg-tile-preview { height: 90px; border-radius: var(--radius-sm); border: 1px dashed var(--border-light); background-repeat: repeat; background-position: center; margin-bottom: 10px; } .bg-tile-settings { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-bottom: 10px; } .bg-setting { display: flex; flex-direction: column; gap: 4px; } .bg-setting label { font-size: 11.5px; color: var(--text-muted); } .bg-dim-row { margin-top: 4px; } .bg-dim-slider { width: 100%; accent-color: var(--spotify-neon); } /* ========================================================================== Studio: widget editor ========================================================================== */ .widget-add-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .widget-add-btn { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: var(--radius-full); background: var(--bg-glass); border: 1px solid var(--border-light); color: var(--text-main); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; } .widget-add-btn:hover { background: var(--bg-glass-hover); border-color: var(--spotify-neon); } .widget-add-icon { font-size: 15px; } .widget-editor-list { display: flex; flex-direction: column; gap: 12px; } .widget-editor-row { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: var(--radius-md); background: rgba(0, 0, 0, 0.28); border: 1px solid var(--border-light); } .widget-editor-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .widget-editor-title { font-size: 12.5px; font-weight: 700; color: var(--text-main); } .widget-editor-tools { display: flex; align-items: center; gap: 6px; } .widget-col-select { padding: 4px 8px; font: inherit; font-size: 11.5px; color: var(--text-main); background: rgba(255, 255, 255, 0.06); border: 1px solid var(--border-light); border-radius: var(--radius-sm); cursor: pointer; } .widget-icon-btn { width: 28px; height: 28px; padding: 0; font-size: 11px; color: var(--text-main); background: var(--bg-glass); border: 1px solid var(--border-light); border-radius: var(--radius-sm); cursor: pointer; } .widget-icon-btn:hover:not(:disabled) { background: var(--bg-glass-hover); border-color: var(--spotify-neon); } .widget-icon-btn:disabled { opacity: 0.35; cursor: not-allowed; } .widget-icon-btn.danger:hover { border-color: var(--hot-pink); color: var(--hot-pink); } .widget-check { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--text-dim); cursor: pointer; } .widget-check input { accent-color: var(--spotify-neon); } .widget-textarea { resize: vertical; min-height: 64px; font-family: inherit; } .widget-search-results { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; } .widget-search-results:empty { display: none; } .widget-search-results .search-result-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px; text-align: left; background: var(--bg-glass); border: 1px solid var(--border-light); border-radius: var(--radius-sm); color: inherit; font: inherit; cursor: pointer; } .widget-search-results .search-result-item:hover { background: var(--bg-glass-hover); border-color: var(--spotify-neon); } .widget-search-results .result-cover { width: 62px; height: 36px; flex-shrink: 0; border-radius: 5px; overflow: hidden; background: #101018; display: flex; align-items: center; justify-content: center; } .widget-search-results .result-cover img { width: 100%; height: 100%; object-fit: cover; } .widget-search-results .result-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .widget-search-results .result-title { font-size: 12px; font-weight: 600; color: var(--text-main); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .widget-search-results .result-artist { font-size: 10.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .widget-picked { display: flex; align-items: center; gap: 8px; padding: 7px; border-radius: var(--radius-sm); background: rgba(30, 215, 96, 0.1); border: 1px solid rgba(30, 215, 96, 0.35); font-size: 11.5px; color: var(--text-main); } .widget-picked img { width: 56px; height: 32px; object-fit: cover; border-radius: 4px; flex-shrink: 0; } .widget-picked span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .widget-picked .btn-preview-remove { margin-left: auto; flex-shrink: 0; } .widget-thumbs { display: flex; flex-wrap: wrap; gap: 6px; } .widget-thumbs:empty { display: none; } .widget-thumb { position: relative; display: block; width: 64px; height: 64px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border-light); } .widget-thumb img { width: 100%; height: 100%; object-fit: cover; } .widget-thumb .btn-preview-remove { position: absolute; top: 2px; right: 2px; } .widget-link-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 6px; margin-bottom: 6px; } @media (max-width: 560px) { .widget-link-row { grid-template-columns: minmax(0, 1fr) auto; } .widget-gallery.layout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Delete control on your own posts: arms on first press, deletes on second */ .btn-delete-post.confirming { background: rgba(255, 61, 127, 0.16); border-color: var(--hot-pink); color: var(--hot-pink); font-size: 11.5px; font-weight: 700; white-space: nowrap; } .btn-delete-post:hover { border-color: var(--hot-pink); color: var(--hot-pink); } /* Note bubble above each ring, like the ones over Instagram chat avatars */ .story-note { position: relative; max-width: 92px; margin-bottom: 4px; padding: 6px 9px; border-radius: 12px; background: rgba(255, 255, 255, 0.94); color: #16182a; font-size: 10px; font-weight: 600; line-height: 1.35; text-align: center; /* three lines then an ellipsis, the way the real ones clip */ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; } .story-note::after, .story-note::before { content: ''; position: absolute; left: 12px; border-radius: 50%; background: rgba(255, 255, 255, 0.94); } .story-note::after { bottom: -5px; width: 6px; height: 6px; } .story-note::before { bottom: -11px; left: 9px; width: 3px; height: 3px; } .story-note-spacer { display: block; height: 10px; } .story-ring:hover .story-note { background: #fff; } @media (max-width: 560px) { .story-ring { width: 84px; } .story-note { max-width: 84px; font-size: 9.5px; } } /* ========================================================================== Floating vinyl player — one iframe, outside everything the app re-renders, so a song keeps playing while you move around the site. ========================================================================== */ .mini-player { position: fixed; right: 20px; bottom: 20px; z-index: 120; width: min(340px, calc(100vw - 40px)); border-radius: 18px; background: rgba(16, 18, 30, 0.92); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid var(--border-card); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.65); overflow: hidden; } .mini-player-bar { display: flex; align-items: center; gap: 12px; padding: 10px 12px; } /* the disc: cover art with grooves over it and a spindle hole punched out */ .mini-player-disc { position: relative; flex-shrink: 0; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%; background: #05060a; cursor: pointer; overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 4px 14px rgba(0, 0, 0, 0.6); } .mini-player-cover { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; } .mini-player-cover.hidden { display: none; } .mini-player-grooves { position: absolute; inset: 0; border-radius: 50%; z-index: 2; pointer-events: none; background: repeating-radial-gradient( circle at 50% 50%, rgba(0, 0, 0, 0.42) 0 1px, rgba(255, 255, 255, 0.05) 1px 3px ); mask-image: radial-gradient(circle at 50% 50%, transparent 0 34%, #000 35%); -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 0 34%, #000 35%); } .mini-player-hole { position: absolute; top: 50%; left: 50%; z-index: 3; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--bg-main); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22); pointer-events: none; } @keyframes mini-player-spin { to { transform: rotate(360deg); } } .mini-player.spinning .mini-player-cover, .mini-player.spinning .mini-player-grooves { animation: mini-player-spin 4s linear infinite; } @media (prefers-reduced-motion: reduce) { .mini-player.spinning .mini-player-cover, .mini-player.spinning .mini-player-grooves { animation: none; } } .mini-player-info { flex: 1; min-width: 0; } .mini-player-title { font-size: 12.5px; font-weight: 700; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mini-player-artist { font-size: 11px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mini-player-close { flex-shrink: 0; width: 28px; height: 28px; padding: 0; border-radius: 50%; background: var(--bg-glass); border: 1px solid var(--border-light); color: var(--text-main); font: inherit; font-size: 12px; cursor: pointer; } .mini-player-close:hover { background: rgba(255, 61, 127, 0.18); border-color: var(--hot-pink); color: var(--hot-pink); } .mini-player-frame { display: none; padding: 0 12px 12px; } .mini-player.expanded .mini-player-frame { display: block; } .mini-player-frame iframe { display: block; border-radius: 12px; } /* the post composer FAB shares this corner on small screens */ body.has-mini-player .fab-post { bottom: 96px; } @media (max-width: 560px) { .mini-player { right: 12px; left: 12px; bottom: 12px; width: auto; } } /* Play control that hands a track to the floating player */ .btn-play-track { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 9px 16px; border-radius: var(--radius-full); background: rgba(30, 215, 96, 0.14); border: 1px solid rgba(30, 215, 96, 0.45); color: var(--spotify-neon); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; } .btn-play-track:hover { background: rgba(30, 215, 96, 0.24); border-color: var(--spotify-neon); } .btn-play-icon { font-size: 11px; } .media-embed-wrapper.is-youtube .btn-play-track { background: rgba(255, 0, 51, 0.14); border-color: rgba(255, 0, 51, 0.45); color: #ff5470; } .media-embed-wrapper.is-youtube .btn-play-track:hover { background: rgba(255, 0, 51, 0.24); border-color: #ff0033; } /* Compact track row in the profile timeline */ .hi5-item-track { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 12px; border-radius: var(--radius-md); background: rgba(0, 0, 0, 0.32); border: 1px solid var(--border-light); } .hi5-item-track-cover { position: relative; width: 88px; height: 88px; border-radius: 10px; overflow: hidden; flex-shrink: 0; background: #111; display: flex; align-items: center; justify-content: center; font-size: 26px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); } .hi5-item-track-cover img { width: 100%; height: 100%; object-fit: cover; } .hi5-item-track-cover .media-play-fab { right: 5px; bottom: 5px; width: 32px; height: 32px; font-size: 11px; } .hi5-item-track-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .hi5-item-track-artist { font-size: 11.5px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hi5-item-track-name { font-size: 14px; font-weight: 700; color: var(--text-main); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hi5-item-track .btn-play-track { align-self: flex-start; margin-top: 6px; padding: 6px 13px; font-size: 11.5px; } /* Drag handle for reordering widgets in the studio */ .widget-drag-handle { flex-shrink: 0; padding: 0 4px; color: var(--text-muted); font-size: 15px; line-height: 1; cursor: grab; user-select: none; /* the browser must not claim the gesture for scrolling */ touch-action: none; } .widget-drag-handle:hover { color: var(--spotify-neon); } .widget-editor-row.dragging { opacity: 0.85; border-color: var(--spotify-neon); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.55); cursor: grabbing; } .widget-editor-row.dragging .widget-drag-handle { cursor: grabbing; color: var(--spotify-neon); } /* The rows must stay hit-testable while dragging: elementFromPoint is how the drag finds what it is hovering over. Pointer capture on the handle already keeps the other rows from receiving the events themselves. */ .widget-editor-list.is-reordering { user-select: none; } /* Play control sitting on the cover art */ .media-play-fab { position: absolute; right: 7px; bottom: 7px; width: 38px; height: 38px; padding: 0 0 0 3px; border: 0; border-radius: 50%; background: var(--spotify-neon); color: #05140b; font-size: 13px; line-height: 1; cursor: pointer; box-shadow: 0 5px 16px rgba(0, 0, 0, 0.6); transition: transform 0.15s ease; } .media-play-fab:hover { transform: scale(1.09); } .media-embed-wrapper.is-youtube .media-play-fab { background: #ff0033; color: #fff; } .media-track-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; } .media-track-actions .btn-play-track { margin-top: 0; padding: 7px 14px; } @media (max-width: 520px) { .media-cover-box { width: 84px; height: 84px; } .media-track-name { font-size: 14px; } .media-play-fab { width: 32px; height: 32px; font-size: 11px; } } /* Status line on your own profile is edited where it is read */ .hi5-status-quote.is-editable { cursor: text; } .hi5-status-quote.is-editable:hover { outline: 1px dashed rgba(255, 255, 255, 0.28); outline-offset: 3px; border-radius: 6px; } .hi5-status-quote-input { width: 100%; padding: 4px 8px; border-radius: 6px; background: rgba(0, 0, 0, 0.45); border: 1px solid var(--spotify-neon); color: var(--text-main); font: inherit; font-style: normal; } .hi5-status-quote-input:focus { outline: none; } /* delete control inside a timeline row */ .hi5-item-delete { margin-left: auto; width: 28px; height: 28px; padding: 0; font-size: 11px; } .hi5-item-delete.confirming { width: auto; padding: 0 10px; } /* ========================================================================== Open-ended reactions (Discord style): only emoji people actually pressed ========================================================================== */ .reaction-group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .btn-react-add { display: inline-flex; align-items: center; gap: 1px; padding: 5px 10px; border-radius: var(--radius-full); background: var(--bg-glass); border: 1px solid var(--border-light); color: var(--text-dim); font: inherit; font-size: 13px; line-height: 1; cursor: pointer; } .btn-react-add:hover { background: var(--bg-glass-hover); border-color: var(--spotify-neon); color: var(--spotify-neon); } .react-add-plus { font-size: 10px; font-weight: 800; } .react-picker { position: absolute; z-index: 500; display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; padding: 8px; border-radius: var(--radius-md); background: rgba(18, 20, 32, 0.97); backdrop-filter: blur(14px); border: 1px solid var(--border-card); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.6); } .react-picker-item { width: 34px; height: 34px; padding: 0; border: 0; border-radius: 8px; background: none; font-size: 17px; line-height: 1; cursor: pointer; } .react-picker-item:hover { background: var(--bg-glass-hover); } /* Briefly flag the control a jump-to link landed on */ @keyframes spotme-attention { 0%, 100% { box-shadow: 0 0 0 0 rgba(30, 215, 96, 0); } 35% { box-shadow: 0 0 0 4px rgba(30, 215, 96, 0.45); } } .attention { animation: spotme-attention 0.9s ease-in-out 2; border-color: var(--spotify-neon) !important; color: var(--spotify-neon) !important; } /* ========================================================================== Username + password account card ========================================================================== */ .account-card { padding: 18px; border-radius: var(--radius-md); background: var(--bg-card); border: 1px solid var(--border-card); } .account-note { margin: 12px 0 0; font-size: 11px; line-height: 1.6; color: var(--text-muted); } .account-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; } .account-badge { font-size: 12px; font-weight: 700; color: var(--spotify-neon); } .account-username { margin: 0; font-size: 18px; font-weight: 800; color: #fff; } /* delete control on a wall comment */ .hi5-tm-delete { margin-left: auto; padding: 2px 7px; border-radius: var(--radius-sm); background: var(--bg-glass); border: 1px solid var(--border-light); color: var(--text-muted); font: inherit; font-size: 10.5px; cursor: pointer; } .hi5-tm-delete:hover { border-color: var(--hot-pink); color: var(--hot-pink); } .hi5-tm-delete.confirming { background: rgba(255, 61, 127, 0.16); border-color: var(--hot-pink); color: var(--hot-pink); font-weight: 700; } /* ========================================================================== Sign in / sign up page ========================================================================== */ .auth-shell { display: flex; justify-content: center; padding: 40px 0 80px; } .auth-card { width: 100%; max-width: 420px; padding: 30px 28px 24px; border-radius: var(--radius-lg); background: var(--bg-card); backdrop-filter: blur(16px); border: 1px solid var(--border-card); box-shadow: var(--shadow-main); text-align: center; } .auth-brand-mark { width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 15px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #181528, #0a0910); border: 1px solid rgba(30, 215, 96, 0.4); box-shadow: 0 0 16px rgba(30, 215, 96, 0.22); } .auth-brand-mark svg { width: 34px; height: 34px; } .auth-card h1 { margin: 0 0 6px; font-size: 24px; font-weight: 800; color: #fff; } .auth-brand p { margin: 0 0 22px; font-size: 12.5px; line-height: 1.6; color: var(--text-dim); } .auth-provider { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 13px 16px; border-radius: var(--radius-full); border: 0; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; } .auth-provider.spotify { background: var(--spotify-neon); color: #05140b; } .auth-provider.spotify:hover { background: #24e96b; } .auth-divider { position: relative; margin: 20px 0 16px; font-size: 11.5px; color: var(--text-muted); } .auth-divider::before, .auth-divider::after { content: ''; position: absolute; top: 50%; width: calc(50% - 26px); height: 1px; background: var(--border-light); } .auth-divider::before { left: 0; } .auth-divider::after { right: 0; } .auth-form { display: flex; flex-direction: column; gap: 5px; text-align: left; } .auth-label { font-size: 11.5px; color: var(--text-muted); } .auth-label:not(:first-child) { margin-top: 8px; } .auth-submit { margin-top: 14px; width: 100%; justify-content: center; padding: 12px; font-size: 14px; } .auth-error { margin: 10px 0 0; padding: 9px 11px; border-radius: var(--radius-sm); background: rgba(255, 61, 127, 0.12); border: 1px solid rgba(255, 61, 127, 0.4); color: #ff87ad; font-size: 11.5px; } .auth-switch { margin: 18px 0 0; font-size: 12.5px; color: var(--text-dim); } .auth-link { padding: 0; background: none; border: 0; color: var(--spotify-neon); font: inherit; font-size: inherit; font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } .auth-fineprint { margin: 16px 0 0; font-size: 11px; line-height: 1.6; color: var(--text-muted); } .auth-back { margin-top: 18px; color: var(--text-dim); font-size: 12px; font-weight: 600; text-decoration: none; } .auth-back:hover { color: var(--text-main); } /* the navbar chip becomes a plain sign-in button for visitors */ .btn-profile-chip.is-signed-out { background: rgba(30, 215, 96, 0.14); border-color: rgba(30, 215, 96, 0.45); color: var(--spotify-neon); font-weight: 700; } .btn-profile-chip.is-signed-out:hover { background: rgba(30, 215, 96, 0.24); border-color: var(--spotify-neon); } /* ========================================================================== Username claim — the URL is shown as it is typed ========================================================================== */ .url-input-group { display: flex; align-items: stretch; border-radius: var(--radius-sm); border: 1px solid var(--border-light); background: rgba(255, 255, 255, 0.05); overflow: hidden; } .url-input-group:focus-within { border-color: var(--spotify-neon); box-shadow: 0 0 0 3px rgba(30, 215, 96, 0.14); } .url-input-prefix { display: flex; align-items: center; padding: 11px 4px 11px 12px; color: var(--text-muted); font-size: 13px; white-space: nowrap; user-select: none; } .url-input-field { flex: 1; min-width: 0; padding: 11px 12px 11px 0; background: none; border: 0; color: var(--text-main); font: inherit; font-size: 13px; font-weight: 700; } .url-input-field:focus { outline: none; } .url-hint { margin: 8px 0 4px; font-size: 11.5px; color: var(--text-muted); overflow-wrap: anywhere; } .url-hint.good { color: var(--spotify-neon); } .url-hint.bad { color: #ff87ad; } #view-username-page .auth-brand-mark { font-size: 26px; } @media (max-width: 420px) { .url-input-prefix { font-size: 11px; padding-left: 10px; } .url-input-field { font-size: 12px; } } /* ========================================================================== GIF picker ========================================================================== */ .gif-picker-backdrop { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0, 0, 0, 0.75); backdrop-filter: blur(6px); } .gif-picker { display: flex; flex-direction: column; width: min(640px, 100%); max-height: min(78vh, 620px); border-radius: var(--radius-lg); background: rgba(18, 20, 32, 0.98); border: 1px solid var(--border-card); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7); overflow: hidden; } .gif-picker-head { display: flex; align-items: center; gap: 8px; padding: 14px; border-bottom: 1px solid var(--border-light); } .gif-picker-head .form-input { flex: 1; min-width: 0; } .gif-picker-close { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--bg-glass); border: 1px solid var(--border-light); color: var(--text-main); font: inherit; cursor: pointer; } .gif-picker-close:hover { background: var(--bg-glass-hover); } /* columns rather than grid: GIFs vary wildly in shape and this packs them */ .gif-grid { flex: 1; overflow-y: auto; padding: 12px; column-count: 3; column-gap: 8px; } .gif-item { display: block; width: 100%; margin: 0 0 8px; padding: 0; border: 1px solid transparent; border-radius: 10px; overflow: hidden; background: #0d0e16; cursor: pointer; break-inside: avoid; } .gif-item img { display: block; width: 100%; height: auto; } .gif-item:hover { border-color: var(--spotify-neon); } .gif-message { column-span: all; margin: 0; padding: 30px 10px; text-align: center; font-size: 12.5px; line-height: 1.7; color: var(--text-dim); } .gif-picker-foot { padding: 10px 14px; border-top: 1px solid var(--border-light); text-align: center; } /* GIPHY's terms require this mark wherever their API is used */ .gif-attribution { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: var(--text-muted); text-decoration: none; } .gif-attribution:hover { color: var(--spotify-neon); } @media (max-width: 520px) { .gif-grid { column-count: 2; } } /* Track picker — same shell as the GIF picker, a list rather than a grid */ .track-picker { max-height: min(70vh, 560px); } .track-results { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 6px; } .track-result { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 10px; border-radius: var(--radius-sm); background: var(--bg-glass); border: 1px solid var(--border-light); color: inherit; font: inherit; text-align: left; cursor: pointer; } .track-result:hover { background: var(--bg-glass-hover); border-color: var(--spotify-neon); } .track-result-cover { flex-shrink: 0; width: 48px; height: 48px; border-radius: 8px; overflow: hidden; background: #101018; display: flex; align-items: center; justify-content: center; font-size: 20px; } .track-result-cover img { width: 100%; height: 100%; object-fit: cover; } .track-result-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .track-result-name { font-size: 13px; font-weight: 700; color: var(--text-main); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .track-result-artist { font-size: 11.5px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .track-result-type { flex-shrink: 0; padding: 3px 8px; border-radius: var(--radius-full); background: rgba(30, 215, 96, 0.12); color: var(--spotify-neon); font-size: 9.5px; font-weight: 800; letter-spacing: 0.05em; } /* Profile photo upload in account settings */ .avatar-upload-row { display: flex; align-items: center; gap: 14px; } .avatar-current { flex-shrink: 0; width: 72px; height: 72px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 30px; background: #16182a; border: 2px solid var(--border-light); } .avatar-current img { width: 100%; height: 100%; object-fit: cover; } .avatar-upload-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .avatar-upload-hint { flex: 1 1 100%; margin: 0; font-size: 11px; color: var(--text-muted); } /* ========================================================================== Navbar profile search ========================================================================== */ .nav-search { position: relative; flex-shrink: 1; min-width: 0; } .nav-search-toggle { display: none; width: 34px; height: 34px; padding: 0; border-radius: 50%; background: var(--bg-glass); border: 1px solid var(--border-light); color: var(--text-main); font-size: 14px; cursor: pointer; } .nav-search-toggle:hover { background: var(--bg-glass-hover); border-color: var(--spotify-neon); } .nav-search-field { display: flex; align-items: center; gap: 7px; width: 210px; padding: 7px 12px; border-radius: var(--radius-full); background: var(--bg-glass); border: 1px solid var(--border-light); } .nav-search-field:focus-within { border-color: var(--spotify-neon); background: var(--bg-glass-hover); } .nav-search-icon { font-size: 12px; opacity: 0.7; } .nav-search-field input { flex: 1; min-width: 0; background: none; border: 0; color: var(--text-main); font: inherit; font-size: 12.5px; } .nav-search-field input:focus { outline: none; } .nav-search-field input::-webkit-search-cancel-button { -webkit-appearance: none; } .nav-search-results { position: absolute; top: calc(100% + 8px); right: 0; z-index: 200; width: min(320px, calc(100vw - 32px)); max-height: 340px; overflow-y: auto; padding: 6px; border-radius: var(--radius-md); background: rgba(18, 20, 32, 0.98); backdrop-filter: blur(14px); border: 1px solid var(--border-card); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6); } .nav-search-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; border: 0; border-radius: var(--radius-sm); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; } .nav-search-item:hover { background: var(--bg-glass-hover); } .nav-search-avatar { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; overflow: hidden; background: #16182a; border: 1px solid var(--border-light); display: flex; align-items: center; justify-content: center; font-size: 15px; } .nav-search-avatar img { width: 100%; height: 100%; object-fit: cover; } .nav-search-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .nav-search-name { font-size: 12.5px; font-weight: 700; color: var(--text-main); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nav-search-handle { font-size: 11px; color: var(--text-muted); } .nav-search-message { margin: 0; padding: 16px 10px; text-align: center; font-size: 12px; color: var(--text-dim); } /* Phone: the bar has no room for a field, so it hides behind the icon and drops down when opened. The panel is pinned to the viewport, not to the toggle — the toggle sits near the left edge, so anchoring to it put the panel off screen. */ @media (max-width: 720px) { .nav-search-toggle { display: block; } .nav-search-field { display: none; position: fixed; top: 64px; left: 12px; right: 12px; width: auto; z-index: 210; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5); } .nav-search.open .nav-search-field { display: flex; } .nav-search.open .nav-search-toggle { border-color: var(--spotify-neon); color: var(--spotify-neon); } .nav-search-results { position: fixed; top: 112px; left: 12px; right: 12px; width: auto; max-height: calc(100vh - 130px); } } /* ========================================================================== Studio: profile card style ========================================================================== */ .card-preset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; margin-bottom: 14px; } .card-preset { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 0; background: none; border: 0; cursor: pointer; color: inherit; font: inherit; } .card-preset-swatch { display: block; width: 100%; height: 46px; border: 2px solid; transition: transform 0.15s ease; } .card-preset-swatch::after { content: 'Aa'; display: block; font-size: 13px; font-weight: 800; line-height: 42px; text-align: center; color: inherit; } .card-preset:hover .card-preset-swatch { transform: translateY(-2px); } .card-preset.active .card-preset-swatch { box-shadow: 0 0 0 2px var(--bg-main), 0 0 0 4px var(--spotify-neon); } .card-preset-name { font-size: 10.5px; font-weight: 600; color: var(--text-dim); text-align: center; } .card-preset.active .card-preset-name { color: var(--spotify-neon); } .card-style-settings { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; } .color-input { width: 100%; height: 38px; padding: 3px; border-radius: var(--radius-sm); border: 1px solid var(--border-light); background: rgba(255, 255, 255, 0.05); cursor: pointer; } /* ========================================================================== Profile menu in the navbar ========================================================================== */ .user-menu { position: relative; } .user-menu-panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 200; min-width: 190px; padding: 6px; border-radius: var(--radius-md); background: rgba(18, 20, 32, 0.98); backdrop-filter: blur(14px); border: 1px solid var(--border-card); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6); } .user-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--text-main); font: inherit; font-size: 13px; font-weight: 600; text-align: left; cursor: pointer; } .user-menu-item:hover { background: var(--bg-glass-hover); } .user-menu-item.danger { color: #ff87ad; } .user-menu-item.danger:hover { background: rgba(255, 61, 127, 0.14); } .user-menu-divider { height: 1px; margin: 5px 8px; background: var(--border-light); } /* ========================================================================== Settings page ========================================================================== */ .settings-shell { max-width: 640px; margin: 0 auto; padding: 30px 0 80px; } .settings-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; } .settings-head h1 { margin: 0; font-size: 22px; font-weight: 800; color: #fff; } .settings-body { padding: 22px; border-radius: var(--radius-lg); background: var(--bg-card); border: 1px solid var(--border-card); box-shadow: var(--shadow-main); } .card-match-btn { width: 100%; justify-content: center; margin-bottom: 12px; } /* The only mark after a name: a small Spotify logo for a Spotify sign-in. */ .spotify-mark { width: 15px; height: 15px; flex-shrink: 0; color: var(--spotify-neon); vertical-align: -2px; } .user-chip-name + .spotify-mark { width: 14px; height: 14px; } #hi5-user-badge { display: inline-flex; align-items: center; padding: 0; background: none; border: 0; } #hi5-user-badge .spotify-mark { width: 19px; height: 19px; } /* Card fill: follow the background, pick a colour, or use a picture */ .card-mode-tabs { display: flex; gap: 6px; margin-bottom: 12px; } .card-mode-tab { flex: 1; padding: 9px 8px; border-radius: var(--radius-sm); background: var(--bg-glass); border: 1px solid var(--border-light); color: var(--text-dim); font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; white-space: nowrap; } .card-mode-tab:hover { background: var(--bg-glass-hover); } .card-mode-tab.active { background: rgba(30, 215, 96, 0.14); border-color: var(--spotify-neon); color: var(--spotify-neon); } .card-image-box { margin-bottom: 12px; } .card-image-preview { height: 90px; margin-bottom: 10px; border-radius: var(--radius-sm); border: 1px dashed var(--border-light); background-size: cover; background-position: center; }