/* ============================================================ drop-chrome.css Visual bridge between the Drop SPA's Tailwind utilities and the www site's tokenised card styles. Loaded after style-home-figma.css so these declarations win the cascade. The internal upload UI keeps its existing React/Tailwind structure but renders with www's exact surface palette, border radius, blur, and accent colours. ============================================================ */ /* ---------- Card / surface backgrounds ---------- */ /* Drop's `.bg-phenom-dark` (#1a1a1a) → www `.card`-equivalent surface */ .bg-phenom-dark { background: rgba(15, 18, 22, 0.7) !important; backdrop-filter: blur(8px) saturate(120%); -webkit-backdrop-filter: blur(8px) saturate(120%); border: 0.5px solid rgba(56, 62, 70, 0.8); } /* Drop's `.bg-phenom-surface` (#151515) → www input/recessed surface */ .bg-phenom-surface { background: rgba(10, 14, 20, 0.65) !important; border: 1px solid rgba(56, 62, 70, 0.8); } /* Body bg — already set inline on , this is just a backstop */ .bg-phenom-pure { background: #060606 !important; } /* ---------- Border radius — www uses 4px, Drop used 12px ---------- */ .rounded-phenom { border-radius: 4px !important; } /* ---------- Accent colours — re-route to www tokens ---------- */ .bg-phenom-red { background: var(--color-primary-red, #c3271c) !important; } .bg-phenom-red-dark { background: var(--color-primary-red-hover, #851c15) !important; } .text-phenom-red { color: var(--color-primary-red, #c3271c) !important; } .border-phenom-red { border-color: var(--color-primary-red, #c3271c) !important; } .bg-phenom-cyan { background: var(--color-primary-cyan500, #A5E3E8) !important; } .text-phenom-cyan { color: var(--color-primary-cyan500, #A5E3E8) !important; } .border-phenom-cyan { border-color: var(--color-primary-cyan500, #A5E3E8) !important; } /* Greys — match www's #aab1be neutral and the subtle border value */ .text-phenom-gray { color: #aab1be !important; } .bg-phenom-gray { background: #aab1be !important; } .border-phenom-gray { border-color: rgba(56, 62, 70, 0.8) !important; } /* ---------- Typography — Drop content should pick up www fonts ---------- */ #root, #root .bg-phenom-dark, #root .bg-phenom-surface { font-family: var(--font-family-primary, 'Roboto Mono', monospace); } /* Headings inside the SPA pick up the Oswald hero font when explicitly wrapped (Drop uses `

`, `

` rarely; this lifts where present). */ #root h1, #root h2 { font-family: var(--font-family-hero, 'Oswald', sans-serif); letter-spacing: -0.5px; } /* ---------- Hover/focus ---------- */ .bg-phenom-red:hover { background: var(--color-primary-red-hover, #851c15) !important; }