/* ============================================================ App theme — faithful port of the marketing site design system. Loaded LAST so it overrides master.css / Bootstrap / component CSS. Mirrors static/marketing/css/{tokens,base,components}.css (do not edit those — marketing is the source of truth). Restyles visuals only: typography, frames, cards, buttons, forms, effects. Layout/structure is left to master.css. ============================================================ */ :root { --night: #0c0c0c; --dark-bg: #111111; --elevated: #161616; --card: #1c1c1c; --card-2: #181818; --gold: #d4a843; --gold-light: #f0c86a; --text: #f0f0f0; --muted: #888888; --border: rgba(255, 255, 255, 0.09); --border-strong: rgba(255, 255, 255, 0.12); --grad-sig: linear-gradient(135deg, #d4a843, #f0c86a); /* Fonts: defined in templates/partials/_fonts.html (single source of truth) */ --r-sm: 4px; --r-md: 8px; --r-lg: 14px; --r-xl: 20px; --r-pill: 999px; --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 150ms; --dur-normal: 300ms; } /* ---------- Global surface + typography (marketing base.css) ---------- */ html, body { background-color: var(--night) !important; color: var(--text); font-family: var(--font-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body, p, span, div, li, td, th, label, small, .small, input, select, textarea, button, a, .card, .modal-content, .dropdown-menu, .dropdown-content, .nav-link, .navbar-brand, .badge { font-family: var(--font-body); } body { line-height: 1.65; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .card-title, .modal-title, .footer-brand, .footer-heading { font-family: var(--font-display) !important; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; color: var(--text); } a { color: var(--text); transition: color var(--dur-fast); text-decoration: none; } a:hover { color: var(--gold); } .text-muted, small, .small, .text-secondary { color: var(--muted) !important; } /* Eyebrow / label / uppercase accents (marketing base.css .eyebrow) */ .eyebrow, .label, .footer-caption, .footer-heading, .text-uppercase { font-family: var(--font-nav) !important; letter-spacing: 0.12em; text-transform: uppercase; } .eyebrow, .footer-caption { color: var(--gold); font-size: 0.78rem; font-weight: 700; } /* ---------- Starfield background ---------- */ /* login-starfield.js prepends a position:fixed z-index:0 canvas to . Body stays the black backdrop; app content sits above the canvas; the large frames go transparent so stars show through behind solid cards. */ #main-container { position: relative; z-index: 1; } /* ---------- Frames / content shells / panels ---------- */ /* Main frame removed entirely — content sits directly on the starfield. */ .frame, .catalog-main-frame { background-color: transparent !important; background-image: none !important; box-shadow: none !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; } .sidebar-shadow-frame, .header { background-color: transparent !important; background-image: none !important; box-shadow: none !important; border: 0 !important; } #content, .mycontent, .catalog-page-shell, .catalog-main-inner { background-color: transparent !important; background-image: none !important; } hr, .dropdown-divider, .footer-divider { border-color: var(--border) !important; } /* ---------- Navbar (flat, marketing nav) ---------- */ .site-navbar { background: var(--night) !important; background-image: none !important; border-bottom: 1px solid var(--border) !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .site-navbar::before { display: none !important; } .site-navbar .navbar-brand { text-shadow: none !important; color: var(--text) !important; font-family: var(--font-display) !important; font-weight: 800; } .navbar-nav .nav-link, .site-navbar .nav-link { color: var(--muted) !important; letter-spacing: 0.04em; } .navbar-nav .nav-link:hover, .navbar-nav .nav-link:focus, .navbar-nav .nav-link.active, .site-navbar .nav-link:hover { color: var(--text) !important; } .navbar-primary-link { border-radius: var(--r-md); background: transparent !important; } .navbar-primary-link::before, .navbar-primary-link::after { display: none !important; } .site-navbar .navbar-toggler { border-color: var(--border) !important; background: transparent !important; box-shadow: none !important; } .site-navbar .navbar-toggler:focus { box-shadow: 0 0 0 0.18rem rgba(212, 168, 67, 0.25) !important; } /* ---------- Navbar CTA buttons (Refer a Friend, Take a Tour) ---------- */ .navbar-cta-btn { padding: 0.5rem 1.2rem; border: none; border-radius: var(--r-pill); background: var(--text); color: var(--night) !important; font-family: var(--font-display) !important; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.01em; cursor: pointer; transition: opacity var(--dur-fast), transform var(--dur-fast); line-height: 1.4; display: inline-flex; align-items: center; gap: 0.4em; } .navbar-cta-btn:hover { opacity: 0.88; transform: translateY(-1px); color: var(--night) !important; background: var(--text); } .navbar-cta-btn:active { transform: translateY(0); } /* ---------- Navbar search (one flat pill, seamless input) ---------- */ .navbar-search-shell { border: 1px solid var(--border) !important; border-radius: var(--r-pill) !important; background: var(--elevated) !important; background-image: none !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; transition: border-color var(--dur-fast) !important; } .navbar-search-shell:hover, .navbar-search-shell:focus-within { border-color: rgba(255, 255, 255, 0.2) !important; box-shadow: none !important; transform: none !important; } .navbar-search-icon { color: var(--muted) !important; } .navbar-search-input.form-control, .navbar-search-input.form-control:focus { background: transparent !important; background-color: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; color: var(--text) !important; } .navbar-search-input.form-control::placeholder { color: var(--muted) !important; } .navbar-search-btn { border: none !important; border-radius: var(--r-pill) !important; background: var(--text) !important; background-image: none !important; color: var(--night) !important; box-shadow: none !important; font-family: var(--font-display) !important; font-weight: 700; padding: 0.4rem 1rem !important; transition: opacity var(--dur-fast), transform var(--dur-fast) !important; } .navbar-search-btn:hover { background: var(--text) !important; color: var(--night) !important; opacity: 0.88; transform: translateY(-1px); box-shadow: none !important; } .navbar-search-btn:focus-visible { outline: 2px solid rgba(212, 168, 67, 0.45) !important; outline-offset: 2px; } /* ---------- Footer (flat, marketing footer) ---------- */ .site-footer, footer:not(.site-footer) { background: var(--night) !important; background-image: none !important; border-top: 1px solid var(--border) !important; box-shadow: none !important; color: var(--muted) !important; } .footer-shell, .footer-description, .footer-standards li, .footer-copy, .footer-link { color: var(--muted) !important; } .footer-brand, .footer-heading { color: var(--text) !important; } .footer-caption, .footer-standards svg { color: var(--gold) !important; } .footer-link { transition: color var(--dur-fast); } .footer-link:hover { color: var(--gold) !important; } /* ---------- Cards / surfaces (marketing .glass / .glass-strong) ---------- */ .card, .catalog-track-card, .sidebar-card, .promo-pool-item, .list-group-item, .alert { background: var(--card) !important; background-image: none !important; border: 1px solid var(--border) !important; border-radius: var(--r-lg) !important; box-shadow: none !important; color: var(--text); } .card:hover, .catalog-track-card:hover, .sidebar-card:hover, .promo-pool-item:hover { border-color: var(--border-strong) !important; box-shadow: none !important; } .modal-content { background: var(--elevated) !important; background-image: none !important; border: 1px solid var(--border-strong) !important; border-radius: var(--r-xl) !important; box-shadow: none !important; color: var(--text); } .modal-header, .modal-footer { border-color: var(--border) !important; } .card-header, .card-footer { background: transparent !important; border-color: var(--border) !important; } /* Small uppercase card titles = the one gold accent (marketing eyebrow). Numbers, icons and names stay white — graphics are not gold. */ .card-title { color: var(--gold) !important; } .pool-name, .send-track-name { color: var(--text) !important; } .slots-display, .card-icon { color: var(--text) !important; } .list-group-item { border-radius: 0 !important; } .list-group-item.active { background-color: rgba(212, 168, 67, 0.18) !important; border-color: var(--gold) !important; color: var(--text) !important; } /* ---------- Buttons (marketing components.css) ---------- */ .btn, .buttons a, button.btn { border-radius: var(--r-pill) !important; font-family: var(--font-display) !important; font-weight: 700; border: 1px solid transparent; box-shadow: none !important; transition: opacity var(--dur-fast), transform var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast), color var(--dur-fast); } .btn:hover, .buttons a:hover { transform: translateY(-1px); } /* Primary = solid light on black (marketing .btn) */ .btn-primary, .btn-dark, .btn-success, .btn-info { background: var(--text) !important; background-image: none !important; border-color: var(--text) !important; color: var(--night) !important; } .btn-primary:hover:not(:disabled), .btn-dark:hover, .btn-success:hover, .btn-info:hover { background: var(--text) !important; color: var(--night) !important; opacity: 0.88; box-shadow: none !important; } .btn-primary:disabled, .btn-dark:disabled, .btn-success:disabled { background: var(--card) !important; color: var(--muted) !important; border-color: var(--border) !important; opacity: 1; } /* Outline / accent = gold (marketing .btn-outline) */ .btn-outline-primary, .btn-outline-warning, .btn-warning { background: transparent !important; background-image: none !important; border-color: var(--gold) !important; color: var(--gold) !important; } .btn-outline-primary:hover, .btn-outline-warning:hover, .btn-warning:hover:not(:disabled) { background: rgba(212, 168, 67, 0.10) !important; color: var(--gold) !important; } /* Ghost = transparent bordered (marketing .btn-ghost) */ .btn-secondary, .btn-outline-secondary, .btn-light, .btn-outline-light, .btn-link { background: transparent !important; background-image: none !important; border-color: rgba(255, 255, 255, 0.2) !important; color: var(--text) !important; } .btn-secondary:hover, .btn-outline-secondary:hover, .btn-light:hover, .btn-outline-light:hover, .btn-link:hover { border-color: rgba(255, 255, 255, 0.5) !important; background: rgba(255, 255, 255, 0.04) !important; color: var(--text) !important; } /* Destructive stays semantically red, but flat + pill */ .btn-danger, .btn-outline-danger { background: transparent !important; background-image: none !important; border-color: #cc3d52 !important; color: #e8748a !important; } .btn-danger:hover, .btn-outline-danger:hover { background: rgba(204, 61, 82, 0.12) !important; color: #e8748a !important; } .btn-outline-secondary.follow-btn:hover { background-color: #cc3d52 !important; border-color: #cc3d52 !important; color: #fff !important; } .btn-close { filter: invert(1) grayscale(1) brightness(1.4); } /* ---------- Forms ---------- */ .form-control, .form-select, input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="number"], input[type="url"], input[type="tel"], input[type="date"], textarea, select { background-color: var(--elevated) !important; border: 1px solid var(--border) !important; color: var(--text) !important; border-radius: var(--r-md) !important; } .form-control::placeholder, textarea::placeholder { color: var(--muted) !important; } .form-control:focus, .form-select:focus, textarea:focus, input:focus, select:focus { border-color: var(--gold) !important; box-shadow: 0 0 0 0.18rem rgba(212, 168, 67, 0.20) !important; background-color: var(--elevated) !important; color: var(--text) !important; } .input-group-text { background: var(--card) !important; border: 1px solid var(--border) !important; color: var(--muted) !important; } .form-check-input { background-color: var(--elevated); border-color: var(--border-strong); } .form-check-input:checked { background-color: var(--gold); border-color: var(--gold); } /* ---------- Dropdowns ---------- */ .dropdown-content, .dropdown-menu { background-color: var(--elevated) !important; background-image: none !important; border: 1px solid var(--border-strong) !important; border-radius: var(--r-md) !important; box-shadow: none !important; } .dropdown-content a, .dropdown-item { color: var(--text) !important; } .dropdown-content a:hover, .dropdown-item:hover, .dropdown-item:focus { background-color: rgba(255, 255, 255, 0.05) !important; color: var(--text) !important; } /* ---------- Tables ---------- */ .table { color: var(--text); border-color: var(--border); } .table > :not(caption) > * > * { background-color: transparent !important; border-color: var(--border) !important; color: var(--text); } .table thead th { font-family: var(--font-nav); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.78rem; color: var(--muted); } /* ---------- Sidebar accents ---------- */ .selected-track-item, .recent-send-item { border-left-color: var(--gold) !important; } .selected-track-counter { background: rgba(255, 255, 255, 0.08) !important; border: 1px solid var(--border) !important; color: var(--text) !important; box-shadow: none !important; } .promo-pools-list::-webkit-scrollbar-thumb, #artistList::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2) !important; } .promo-pools-list::-webkit-scrollbar-track, #artistList::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05) !important; } /* ---------- Badges / pills ---------- */ .badge { font-family: var(--font-nav) !important; font-weight: 600; letter-spacing: 0.04em; border-radius: var(--r-pill); } .badge.bg-primary, .badge.bg-success, .badge.bg-info { background-color: rgba(212, 168, 67, 0.18) !important; color: var(--gold) !important; } .badge.bg-secondary { background-color: rgba(255, 255, 255, 0.08) !important; color: var(--muted) !important; } /* ---------- Clickable track / artist names ---------- */ .artist-name-link, .artist-name-link:hover, .artist-name-link:focus { color: #f4c430; text-decoration: none; } .track-title-sep { color: inherit; } .track-title-link { color: inherit; text-decoration: none; transition: color var(--dur-fast, 150ms) ease; } .track-title-link:hover, .track-title-link:focus { color: #f4c430; text-decoration: none; } .track-title-plain { color: inherit; text-decoration: none; } /* ---------- Misc ---------- */ .thumbnail { border-radius: var(--r-md); } ::selection { background: rgba(212, 168, 67, 0.3); color: var(--text); }