/* * 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) / #f0f0f0 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: #f0f0f0; /* primary text (Clouded Vision) */ --omg-text-secondary: #c7c7c7; --omg-text-muted: #9c9c9c; /* brightened from Greasy Grey for readability */ --omg-text-faint: #707070; --omg-accent: #f0f0f0; /* 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); } /* Tailwind v4 puts dividers on every child except the last (v3 used the sibling combinator, skipping the first child - using that selector here left the FIRST row's divider light). */ .dark .divide-gray-200 > :not(:last-child), .dark .divide-gray-100 > :not(:last-child) { 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: #f0f0f0; } .dark .text-indigo-700 { color: #f0f0f0; } .dark .text-indigo-800 { color: #f0f0f0; } .dark .hover\:text-indigo-700:hover, .dark .hover\:text-indigo-800:hover { color: #f0f0f0; } .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, stat icon tiles) */ .dark .bg-green-50 { background-color: rgba(16, 185, 129, 0.12); } .dark .bg-green-100 { background-color: rgba(16, 185, 129, 0.15); } .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); } /* Warning (notices, pending badges): dim translucent tint, muted gold text */ .dark .bg-yellow-50 { background-color: rgba(234, 179, 8, 0.08); } .dark .bg-yellow-100 { background-color: rgba(234, 179, 8, 0.14); } .dark .border-yellow-200 { border-color: rgba(234, 179, 8, 0.28); } .dark .text-yellow-400 { color: #a8945a; } .dark .text-yellow-600 { color: #c2ad6e; } .dark .text-yellow-700 { color: #c2ad6e; } .dark .text-yellow-800 { color: #d3c185; } /* 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: #f0f0f0; } .dark .text-blue-700 { color: #f0f0f0; } .dark .text-blue-800 { color: #f0f0f0; } /* 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: #f0f0f0; } .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: #f0f0f0 !important; } .dark .text-black { color: #f0f0f0 !important; } .dark .link-brand { color: #f0f0f0 !important; } .dark .bg-brand-black { background-color: #2b2b2b !important; } .dark .text-brand-yellow { color: #f0f0f0 !important; } .dark .bg-brand-yellow { background-color: #f0f0f0 !important; } .dark .border-brand-yellow { border-color: #434343 !important; } .dark .hover\:text-brand-yellow:hover { color: #f0f0f0 !important; } .dark .hover\:bg-brand-yellow:hover { background-color: #b5b5b5 !important; } .dark .btn-brand, .dark .btn-brand-link { background-color: #f0f0f0 !important; color: #030303 !important; border-color: #f0f0f0 !important; } .dark .btn-brand:hover, .dark .btn-brand-link:hover, .dark .hover\:bg-gray-900:hover { background-color: #b5b5b5 !important; } /* --- DSP filter icons: some DSP logos are black art (YouTube Music, Pandora, SoundCloud) and vanish on dark surfaces. A soft light halo that follows the logo's own silhouette keeps them readable without drawing a box around the colored ones. --- */ .dark [data-controller~="dsp-filter"] img { filter: drop-shadow(0 0 1px rgba(240, 240, 240, 0.6)); } /* ========================================================================== 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; } /* Scroll containers driven by their own controls (carousels) keep native scrolling but hide the bar itself. Declared after the dark scrollbar rules so it wins on equal specificity in both themes. */ .no-scrollbar, .dark .no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; } .no-scrollbar::-webkit-scrollbar, .dark .no-scrollbar::-webkit-scrollbar { display: none; } /* 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: #f0f0f0; border-color: #f0f0f0; 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 #c7c7c7 / border #434343 / mono buttons #f0f0f0 ========================================================================== */ 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: #c7c7c7; } .landing-mono .text-brand-bone { color: #c7c7c7; } .landing-mono .text-brand-bone\/70 { color: #9c9c9c; } .landing-mono .text-brand-bone\/60 { color: #9c9c9c; } .landing-mono .text-brand-slate { color: #9c9c9c; } .landing-mono .text-brand-slate\/50 { color: #9c9c9c; } .landing-mono .hover\:text-brand-ink:hover { color: #c7c7c7; } /* 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: #c7c7c7; } .landing-mono .hover\:bg-brand-amber-deep:hover { background-color: #c7c7c7; } .landing-mono .text-brand-amber-deep { color: #9c9c9c; } .landing-mono .text-brand-line { color: #9c9c9c; } .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; }