/* * Overland Music Group - Main Stylesheet * Combines brand colors and DSP logo sprites */ /* ========================================================================== Brand Colors ========================================================================== */ /* Yellow brand color: #fddd10 */ .text-brand-yellow { color: #fddd10 !important; } .bg-brand-yellow { background-color: #fddd10 !important; } .border-brand-yellow { border-color: #fddd10 !important; } .hover\:text-brand-yellow:hover { color: #fddd10 !important; } .hover\:bg-brand-yellow:hover { background-color: #fddd10 !important; } /* Black brand color for consistency */ .text-brand-black { color: #000000 !important; } .bg-brand-black { background-color: #000000 !important; } .border-brand-black { border-color: #000000 !important; } .hover\:bg-brand-black:hover { background-color: #000000 !important; } /* Utility class for gray-900 (very dark hover state) */ .hover\:bg-gray-900:hover { background-color: #111827 !important; } /* Common button combinations */ .btn-brand { background-color: #000000 !important; color: #fddd10 !important; border: 2px solid #fddd10 !important; } .btn-brand:hover { background-color: #111827 !important; } /* Landing page specific combinations */ .btn-brand-link { background-color: #000000; color: #fddd10; border: 2px solid #fddd10; } .btn-brand-link:hover { background-color: #111827; } /* Link styles - black links */ .link-brand { color: #000000 !important; } .link-brand:hover { text-decoration: underline; } /* ========================================================================== Dark Theme (permanent, single theme) -------------------------------------------------------------------------- Applied globally via in the application layout. This is a plain-CSS override layer: it loads after Tailwind and is unlayered, so it wins the cascade over Tailwind's utilities regardless of source order. Only the shared application layout carries the `dark` class. The public landing page renders its own (no dark class), so it is unaffected, and mailer layouts are separate too, so emails stay light. Strategy: remap the generic surface/text/border utilities the app already uses (bg-white, gray scale, brand-ink/slate/bone) and soften the light accent tints (indigo/green/red/blue/purple -50/-100) so they read on dark. Coloured buttons (bg-indigo-600, bg-green-600, bg-brand-amber) and text-white are intentionally left alone. ========================================================================== */ .dark { /* Cool graphite mono palette (applied site-wide): #030303 Armor Wash (base) / #141414 Sooty (surface) / #2b2b2b Shoe Wax (elevated) / #434343 Black Suede (border) / #828383 Greasy Grey (muted) / #d1d1d1 Clouded Vision (bright). No accent color: buttons are light gray. */ --omg-base: #030303; /* page background (Armor Wash) */ --omg-surface: #141414; /* cards / nav / dropdowns / modals (Sooty) */ --omg-surface-2: #2b2b2b; /* elevated, hover, table stripes, inputs (Shoe Wax) */ --omg-border: #434343; /* default borders / dividers (Black Suede) */ --omg-border-strong: #828383; /* Greasy Grey */ --omg-text: #d1d1d1; /* primary text (Clouded Vision) */ --omg-text-secondary: #a9a9a9; --omg-text-muted: #828383; /* Greasy Grey */ --omg-text-faint: #5f5f5f; --omg-accent: #d1d1d1; /* mono: light gray stands in for the accent */ --omg-accent-deep: #b5b5b5; /* accent hover */ } html.dark { background-color: var(--omg-base); color-scheme: dark; } .dark body { background-color: var(--omg-base); color: var(--omg-text); } /* --- Surfaces --- */ .dark .bg-white { background-color: var(--omg-surface); } .dark .bg-gray-50 { background-color: var(--omg-base); } .dark .bg-gray-100 { background-color: var(--omg-surface-2); } .dark .bg-gray-200 { background-color: var(--omg-border); } .dark .bg-brand-bone { background-color: var(--omg-base); } /* Hover surfaces */ .dark .hover\:bg-gray-50:hover { background-color: var(--omg-surface-2); } .dark .hover\:bg-gray-100:hover { background-color: var(--omg-surface-2); } /* --- Text --- */ .dark .text-gray-900 { color: var(--omg-text); } .dark .text-gray-800 { color: var(--omg-text); } .dark .text-gray-700 { color: var(--omg-text-secondary); } .dark .text-gray-600 { color: var(--omg-text-secondary); } .dark .text-gray-500 { color: var(--omg-text-muted); } .dark .text-gray-400 { color: var(--omg-text-faint); } .dark .text-brand-ink { color: var(--omg-text); } .dark .text-brand-slate { color: var(--omg-text-secondary); } .dark .text-brand-slate\/50 { color: var(--omg-text-muted); } .dark .hover\:text-brand-ink:hover { color: var(--omg-text); } /* Hover text */ .dark .hover\:text-gray-900:hover { color: var(--omg-text); } .dark .hover\:text-gray-700:hover { color: var(--omg-text-secondary); } .dark .hover\:text-gray-500:hover { color: var(--omg-text-secondary); } /* --- Borders / dividers --- */ .dark .border-gray-100 { border-color: var(--omg-border); } .dark .border-gray-200 { border-color: var(--omg-border); } .dark .border-gray-300 { border-color: var(--omg-border-strong); } .dark .border-brand-line { border-color: var(--omg-border-strong); } .dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--omg-border); } .dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: var(--omg-border); } /* --- Form fields --- */ .dark .placeholder-gray-400::placeholder { color: var(--omg-text-faint); } .dark input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]), .dark textarea, .dark select { color: var(--omg-text); } .dark input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):-webkit-autofill { -webkit-text-fill-color: var(--omg-text); -webkit-box-shadow: 0 0 0 1000px var(--omg-surface-2) inset; } /* --- Elevation for floating panels (dropdowns/modals) on dark --- */ .dark .shadow-lg { box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.6), 0 8px 10px -6px rgba(0, 0, 0, 0.5); } .dark .shadow-xl { box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.7); } /* --- Accent tints: soften the light -50/-100 chips so they read on dark --- */ /* Primary accent (indigo). Straw is reserved for buttons and focus states; links, active nav, and tints stay neutral to keep the palette tight. */ .dark .bg-indigo-600 { background-color: var(--omg-accent); color: #030303; } .dark .hover\:bg-indigo-700:hover { background-color: var(--omg-accent-deep); } .dark .bg-indigo-50 { background-color: rgba(255, 255, 255, 0.06); } .dark .bg-indigo-100 { background-color: rgba(255, 255, 255, 0.10); } .dark .text-indigo-600 { color: #d1d1d1; } .dark .text-indigo-700 { color: #d1d1d1; } .dark .text-indigo-800 { color: #d1d1d1; } .dark .hover\:text-indigo-700:hover, .dark .hover\:text-indigo-800:hover { color: #d1d1d1; } .dark .ring-indigo-500, .dark .focus\:ring-indigo-500:focus { --tw-ring-color: rgba(209, 209, 209, 0.45); } .dark .focus\:border-indigo-500:focus { border-color: var(--omg-accent); } /* Brand amber (auth submit buttons, focus rings) -> Straw Yellow */ .dark .bg-brand-amber { background-color: var(--omg-accent); } .dark .bg-brand-amber.text-brand-ink { color: #030303; } .dark .hover\:bg-brand-amber-deep:hover { background-color: var(--omg-accent-deep); } .dark .text-brand-amber, .dark .text-brand-amber-deep { color: var(--omg-accent); } .dark .focus\:ring-brand-amber\/60:focus { --tw-ring-color: rgba(209, 209, 209, 0.45); } .dark .focus\:border-brand-amber:focus { border-color: var(--omg-accent); } /* Success (flash notices) */ .dark .bg-green-50 { background-color: rgba(16, 185, 129, 0.12); } .dark .border-green-200 { border-color: rgba(16, 185, 129, 0.32); } .dark .text-green-600 { color: #6ee7b7; } .dark .text-green-700 { color: #6ee7b7; } /* Danger (flash alerts, destructive actions) */ .dark .bg-red-50 { background-color: rgba(239, 68, 68, 0.12); } .dark .bg-red-100 { background-color: rgba(239, 68, 68, 0.20); } .dark .border-red-200 { border-color: rgba(239, 68, 68, 0.32); } .dark .text-red-600 { color: #f87171; } .dark .text-red-700 { color: #fca5a5; } .dark .text-red-800 { color: #fca5a5; } .dark .hover\:bg-red-50:hover { background-color: rgba(239, 68, 68, 0.16); } /* Info / admin badge: neutral, no blue and no extra accent colors */ .dark .bg-blue-50 { background-color: rgba(255, 255, 255, 0.06); } .dark .bg-blue-100 { background-color: rgba(255, 255, 255, 0.10); } .dark .text-blue-600 { color: #d1d1d1; } .dark .text-blue-700 { color: #d1d1d1; } .dark .text-blue-800 { color: #d1d1d1; } /* Purple (impersonation): neutral */ .dark .bg-purple-50 { background-color: rgba(255, 255, 255, 0.06); } .dark .bg-purple-100 { background-color: rgba(255, 255, 255, 0.10); } .dark .text-purple-600 { color: #d1d1d1; } .dark .hover\:bg-purple-50:hover { background-color: rgba(255, 255, 255, 0.10); } /* --- Legacy brand classes (defined above with !important): remap for dark. These set black text / yellow accents that vanish on dark surfaces (prospect welcome, registrations, invitations, OTP, prospect requests). --- */ .dark .text-brand-black { color: #d1d1d1 !important; } .dark .text-black { color: #d1d1d1 !important; } .dark .link-brand { color: #d1d1d1 !important; } .dark .bg-brand-black { background-color: #2b2b2b !important; } .dark .text-brand-yellow { color: #d1d1d1 !important; } .dark .bg-brand-yellow { background-color: #d1d1d1 !important; } .dark .border-brand-yellow { border-color: #434343 !important; } .dark .hover\:text-brand-yellow:hover { color: #d1d1d1 !important; } .dark .hover\:bg-brand-yellow:hover { background-color: #b5b5b5 !important; } .dark .btn-brand, .dark .btn-brand-link { background-color: #d1d1d1 !important; color: #030303 !important; border-color: #d1d1d1 !important; } .dark .btn-brand:hover, .dark .btn-brand-link:hover, .dark .hover\:bg-gray-900:hover { background-color: #b5b5b5 !important; } /* ========================================================================== Corona-inspired polish ========================================================================== */ /* Crisper type + smooth scrolling feel */ .dark body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .dark ::selection { background-color: rgba(255, 255, 255, 0.18); color: #fff; } /* Thin dark scrollbars */ .dark * { scrollbar-color: #434343 var(--omg-base); scrollbar-width: thin; } .dark ::-webkit-scrollbar { width: 10px; height: 10px; } .dark ::-webkit-scrollbar-track { background: var(--omg-base); } .dark ::-webkit-scrollbar-thumb { background: #434343; border-radius: 8px; border: 2px solid var(--omg-base); } .dark ::-webkit-scrollbar-thumb:hover { background: #828383; } /* Elevated cards: give the previously-invisible light shadows real depth */ .dark .shadow-sm { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.40); } .dark .shadow { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45); } .dark .shadow-md { box-shadow: 0 6px 16px rgba(0, 0, 0, 0.50); } /* Defined topbar (nav sits on bg-white -> surface; add a hairline + lift) */ .dark nav.bg-white { border-bottom: 1px solid var(--omg-border); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); } /* Corona-style filled form fields */ .dark input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]), .dark textarea, .dark select { background-color: var(--omg-surface-2); border-color: var(--omg-border-strong); } .dark input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):focus, .dark textarea:focus, .dark select:focus { background-color: var(--omg-surface-2); } /* --- Tom Select (genre/artist pickers) --- */ .dark .ts-control, .dark .ts-wrapper.single .ts-control, .dark .ts-wrapper.multi .ts-control { background-color: var(--omg-surface-2) !important; border-color: var(--omg-border-strong) !important; color: var(--omg-text) !important; box-shadow: none !important; } .dark .ts-control input, .dark .ts-control input::placeholder { color: var(--omg-text) !important; } .dark .ts-control .item { background-color: rgba(255, 255, 255, 0.10) !important; color: var(--omg-text) !important; border-color: transparent !important; } .dark .ts-dropdown { background-color: var(--omg-surface) !important; border-color: var(--omg-border-strong) !important; color: var(--omg-text) !important; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6) !important; } .dark .ts-dropdown .option { color: var(--omg-text-secondary); } .dark .ts-dropdown .option:hover, .dark .ts-dropdown .create:hover { background-color: var(--omg-surface-2) !important; } .dark .ts-dropdown .option.active, .dark .ts-dropdown .active { background-color: rgba(255, 255, 255, 0.10) !important; color: var(--omg-text) !important; } .dark .ts-dropdown .optgroup-header { background-color: var(--omg-surface) !important; color: var(--omg-text-muted) !important; } /* --- Flatpickr (date pickers) --- */ .dark .flatpickr-calendar { background: var(--omg-surface); color: var(--omg-text); border: 1px solid var(--omg-border-strong); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6); } .dark .flatpickr-calendar.arrowTop:before { border-bottom-color: var(--omg-border-strong); } .dark .flatpickr-calendar.arrowTop:after { border-bottom-color: var(--omg-surface); } .dark .flatpickr-calendar.arrowBottom:before { border-top-color: var(--omg-border-strong); } .dark .flatpickr-calendar.arrowBottom:after { border-top-color: var(--omg-surface); } .dark .flatpickr-months .flatpickr-month, .dark .flatpickr-current-month, .dark .flatpickr-current-month input.cur-year, .dark .flatpickr-monthDropdown-months { color: var(--omg-text); fill: var(--omg-text); } .dark .flatpickr-monthDropdown-months option { background: var(--omg-surface); } .dark .flatpickr-weekday { color: var(--omg-text-muted); } .dark .flatpickr-day { color: var(--omg-text-secondary); } .dark .flatpickr-day:hover, .dark .flatpickr-day:focus { background: var(--omg-surface-2); border-color: var(--omg-surface-2); } .dark .flatpickr-day.today { border-color: var(--omg-border-strong); } .dark .flatpickr-day.selected, .dark .flatpickr-day.selected:hover { background: #d1d1d1; border-color: #d1d1d1; color: #030303; } .dark .flatpickr-day.flatpickr-disabled, .dark .flatpickr-day.prevMonthDay, .dark .flatpickr-day.nextMonthDay { color: var(--omg-text-faint); } .dark .flatpickr-months .flatpickr-prev-month svg, .dark .flatpickr-months .flatpickr-next-month svg { fill: var(--omg-text-secondary); } .dark .flatpickr-months .flatpickr-prev-month:hover svg, .dark .flatpickr-months .flatpickr-next-month:hover svg { fill: var(--omg-text); } .dark .numInputWrapper span.arrowUp, .dark .numInputWrapper span.arrowDown { border-color: var(--omg-border); } .dark span.flatpickr-weekday { background: transparent; } /* ========================================================================== Landing page - monochrome charcoal palette -------------------------------------------------------------------------- Scoped to . The public landing page renders its own document (no `dark` class) and uses brand tokens, so it needs its own mapping to the same palette: bg #030303 / surface #141414 / text #a9a9a9 / border #434343 / mono buttons #d1d1d1 ========================================================================== */ html.landing-mono { background-color: #030303; } /* Surfaces: mirror the app's system (base #030303 Armor Wash, surface #141414 Sooty, nested #2b2b2b Shoe Wax) so sections lift ABOVE the base like the rest of the app, never dip darker than it. */ .landing-mono .bg-brand-bone { background-color: #030303; } /* page base (Armor Wash) */ .landing-mono .bg-white { background-color: #141414; } /* lifted bands / cards (Sooty) */ .landing-mono .bg-brand-ink { background-color: #141414; } /* dark bands + footer -> same surface */ .landing-mono .bg-brand-bone\/40 { background-color: #2b2b2b; } /* nested feature cards */ .landing-mono .bg-brand-ink\/80 { background-color: #434343; } /* Text */ .landing-mono .text-brand-ink { color: #a9a9a9; } .landing-mono .text-brand-bone { color: #a9a9a9; } .landing-mono .text-brand-bone\/70 { color: #828383; } .landing-mono .text-brand-bone\/60 { color: #828383; } .landing-mono .text-brand-slate { color: #828383; } .landing-mono .text-brand-slate\/50 { color: #828383; } .landing-mono .hover\:text-brand-ink:hover { color: #a9a9a9; } /* Accent tokens kept neutral: light gray belongs to .lp-btn primary buttons only. bg-brand-amber here is just the language-switcher active underline. */ .landing-mono .bg-brand-amber { background-color: #a9a9a9; } .landing-mono .hover\:bg-brand-amber-deep:hover { background-color: #a9a9a9; } .landing-mono .text-brand-amber-deep { color: #828383; } .landing-mono .text-brand-line { color: #828383; } .landing-mono .border-brand-amber { border-color: #434343; } .landing-mono .bg-brand-amber.text-brand-ink { color: #030303; } /* Borders / dividers */ .landing-mono .border-brand-line { border-color: #434343; } .landing-mono .border-brand-line\/60 { border-color: rgba(67, 67, 67, 0.6); } .landing-mono .bg-brand-line { background-color: #434343; } .landing-mono .border-brand-ink\/20 { border-color: rgba(209, 209, 209, 0.22); } .landing-mono .hover\:border-brand-ink\/50:hover { border-color: rgba(209, 209, 209, 0.5); } /* ========================================================================== DSP Logo Sprites ========================================================================== */ .dsp-item-logo { width: 32px; height: 32px; background-image: url("/assets/dsps/dsp-logos-v2-486b23b0.png"); background-size: 352px 352px; background-repeat: no-repeat; background-position: center center; padding: 0; margin: 0; display: inline-block; border-radius: 6px; flex-shrink: 0; } /* Retina display support */ @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .dsp-item-logo { background-image: url("/assets/dsps/dsp-logos-v2@2x-e76a0b17.png"); } } @media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 288dpi) { .dsp-item-logo { background-image: url("/assets/dsps/dsp-logos-v2@3x-1b9e098b.png"); } } /* DSP Logo Positions */ .dsp-item-logo-nuuday { background-position: 0px 0px; } .dsp-item-logo-sevendigital { background-position: -32px -96px; } .dsp-item-logo-eighttrack { background-position: -32px 0px; } .dsp-item-logo-amazon { background-position: -64px 0px; } .dsp-item-logo-amazondod { background-position: -64px 0px; } .dsp-item-logo-amie { background-position: -64px -96px; } .dsp-item-logo-audiblemagic { background-position: -96px 0px; } .dsp-item-logo-beatport { background-position: -96px -96px; } .dsp-item-logo-deezer { background-position: -128px 0px; } .dsp-item-logo-emusic { background-position: -128px -96px; } .dsp-item-logo-eos { background-position: -160px 0px; } .dsp-item-logo-googlemusic { background-position: -160px -96px; } .dsp-item-logo-omnifone { background-position: 0px -32px; } .dsp-item-logo-iheartradio { background-position: 0px -128px; } .dsp-item-logo-imusica { background-position: -32px -32px; } .dsp-item-logo-itunes { background-position: -32px -128px; } .dsp-item-logo-itunestransporter { background-position: -32px -128px; } .dsp-item-logo-juno { background-position: -64px -128px; } .dsp-item-logo-kanjian { background-position: -64px -32px; } .dsp-item-logo-kkbox { background-position: -96px -128px; } .dsp-item-logo-medianet { background-position: -96px -32px; } .dsp-item-logo-nokia { background-position: -128px -128px; } .dsp-item-logo-rdio { background-position: -128px -32px; } .dsp-item-logo-pandora { background-position: -128px -32px; } .dsp-item-logo-pcmusic { background-position: -128px -160px; } .dsp-item-logo-napster { background-position: -160px -32px; } .dsp-item-logo-saavn { background-position: -192px -32px; } .dsp-item-logo-shazam { background-position: 0px -160px; } .dsp-item-logo-simfy { background-position: 0px -64px; } .dsp-item-logo-slacker { background-position: -192px 0px; } .dsp-item-logo-soundcloud { background-position: -32px -160px; } .dsp-item-logo-spotify { background-position: -32px -64px; } .dsp-item-logo-spotifyplaylist { background-position: -32px -64px; } .dsp-item-logo-tidal { background-position: -64px -64px; } .dsp-item-logo-vervelife { background-position: -64px -160px; } .dsp-item-logo-vidzone { background-position: -96px -64px; } .dsp-item-logo-wasabeat { background-position: -96px -160px; } .dsp-item-logo-xboxmusic { background-position: -128px -64px; } .dsp-item-logo-youtube { background-position: -160px -64px; } .dsp-item-logo-youtubemusic { background-position: -160px -64px; } .dsp-item-logo-youtubepublishing { background-position: -160px -64px; } .dsp-item-logo-zvook { background-position: 0px -96px; } .dsp-item-logo-metapop { background-position: -192px -128px; } .dsp-item-logo-soundexchange { background-position: -192px -160px; } .dsp-item-logo-peloton { background-position: -160px -160px; } .dsp-item-logo-linemusic { background-position: -192px -96px; } .dsp-item-logo-umamusic { background-position: -192px -64px; } .dsp-item-logo-awa { background-position: -32px -192px; } .dsp-item-logo-touchtunes { background-position: -64px -192px; } .dsp-item-logo-netease { background-position: -96px -192px; } .dsp-item-logo-alibaba { background-position: -128px -192px; } .dsp-item-logo-facebookmusic { background-position: -160px -192px; } .dsp-item-logo-facebookfingerprinting { background-position: -160px -192px; } .dsp-item-logo-rxmusic { background-position: -192px -192px; } .dsp-item-logo-audiomack { background-position: 0px -224px; } .dsp-item-logo-leeway { background-position: -32px -224px; } .dsp-item-logo-yandex { background-position: -64px -224px; } .dsp-item-logo-tencent { background-position: -96px -224px; } .dsp-item-logo-tiktok { background-position: -128px -224px; } .dsp-item-logo-boomplay { background-position: -160px -224px; } .dsp-item-logo-jaxsta { background-position: -192px -224px; } .dsp-item-logo-mixcloud { background-position: -224px 0px; } .dsp-item-logo-anghami { background-position: -224px -32px; } .dsp-item-logo-hungama { background-position: -224px -64px; } .dsp-item-logo-pretzel { background-position: -224px -96px; } .dsp-item-logo-bleep { background-position: -224px -128px; } .dsp-item-logo-bugs { background-position: -224px -160px; } .dsp-item-logo-dubstoresound { background-position: -256px -32px; } .dsp-item-logo-fizy { background-position: -256px -64px; } .dsp-item-logo-groovefox { background-position: -256px 0px; } .dsp-item-logo-hardstyle { background-position: -224px -192px; } .dsp-item-logo-joox { background-position: -224px -224px; } .dsp-item-logo-kuackmedia { background-position: -256px -96px; } .dsp-item-logo-moraqualitas { background-position: -256px -128px; } .dsp-item-logo-navermusic { background-position: -256px -160px; } .dsp-item-logo-nightlifemusic { background-position: -256px -192px; } .dsp-item-logo-stellarentertainment { background-position: 0px -256px; } .dsp-item-logo-timitalia { background-position: -32px -256px; } .dsp-item-logo-trackdrip { background-position: -64px -256px; } .dsp-item-logo-beatsource { background-position: -96px -256px; } .dsp-item-logo-dreamuscompany { background-position: -128px -256px; } .dsp-item-logo-geniemusic { background-position: -160px -256px; } .dsp-item-logo-soundmouse { background-position: -192px -256px; } .dsp-item-logo-applemusic { background-position: -224px -256px; } .dsp-item-logo-amazonmusic { background-position: -256px -256px; } .dsp-item-logo-resso { background-position: -32px 0px; } .dsp-item-logo-downtown { background-position: 0px -288px; } .dsp-item-logo-adaptr { background-position: -32px -288px; } .dsp-item-logo-lyricfind { background-position: -64px -288px; } .dsp-item-logo-tribecast { background-position: -96px -288px; } .dsp-item-logo-vevo { background-position: -128px -288px; } .dsp-item-logo-bmat { background-position: -160px -288px; } .dsp-item-logo-clicknclear { background-position: -192px -288px; } .dsp-item-logo-moodagent { background-position: -224px -288px; } .dsp-item-logo-zingmp3 { background-position: -256px -288px; } .dsp-item-logo-qobuz { background-position: -288px 0px; } .dsp-item-logo-moodmedia { background-position: -288px -32px; } .dsp-item-logo-gogopix { background-position: -288px -64px; } .dsp-item-logo-labocinalatina { background-position: -288px -96px; } .dsp-item-logo-trebel { background-position: -288px -128px; } .dsp-item-logo-kuaishou { background-position: -288px -160px; } .dsp-item-logo-supernatural { background-position: -288px -192px; } .dsp-item-logo-hookmusic { background-position: -288px -224px; } .dsp-item-logo-lissen { background-position: -288px -256px; } .dsp-item-logo-audius { background-position: -288px -288px; } .dsp-item-logo-idagio { background-position: -320px 0px; } .dsp-item-logo-mdundo { background-position: -320px -32px; }