/** * Seat the Party — legacy slate/indigo utility pages (help, blog, legal) * remapped to brand tokens. Scope with class `marketing-brand-skin` on . */ body.marketing-brand-skin { background-color: #f7f4f0 !important; color: #1c1a22; font-family: "DM Sans", system-ui, sans-serif; -webkit-font-smoothing: antialiased; } body.marketing-brand-skin h1, body.marketing-brand-skin h2 { font-family: "Playfair Display", Georgia, serif; } body.marketing-brand-skin h3 { font-family: "Playfair Display", Georgia, serif; } /* ——— Tailwind slate ——— */ body.marketing-brand-skin .bg-slate-50 { background-color: #f7f4f0 !important; } body.marketing-brand-skin .bg-slate-900 { background-color: #1c1a22 !important; } body.marketing-brand-skin .bg-slate-100 { background-color: #f5ecd7 !important; } body.marketing-brand-skin .text-slate-300 { color: #c5ddd5 !important; } body.marketing-brand-skin .text-slate-400 { color: #9e9aaa !important; } body.marketing-brand-skin .text-slate-500 { color: #9e9aaa !important; } body.marketing-brand-skin .text-slate-600 { color: #3d3847 !important; } body.marketing-brand-skin .text-slate-700, body.marketing-brand-skin .text-slate-800, body.marketing-brand-skin .text-slate-900 { color: #1c1a22 !important; } body.marketing-brand-skin .border-slate-200 { border-color: rgba(201, 150, 60, 0.15) !important; } body.marketing-brand-skin .border-slate-700 { border-color: rgba(255, 255, 255, 0.1) !important; } body.marketing-brand-skin .hover\:bg-slate-800:hover { background-color: rgba(255, 255, 255, 0.08) !important; } /* ——— Tailwind indigo ——— */ body.marketing-brand-skin .bg-indigo-600 { background-color: #a84b66 !important; } body.marketing-brand-skin .bg-indigo-600\/20 { background-color: rgba(168, 75, 102, 0.2) !important; } body.marketing-brand-skin .text-indigo-300 { color: #f2c4c4 !important; } body.marketing-brand-skin .hover\:text-indigo-300:hover { color: #f2c4c4 !important; } body.marketing-brand-skin .text-indigo-600, body.marketing-brand-skin .hover\:text-indigo-600:hover { color: #a84b66 !important; } body.marketing-brand-skin .text-indigo-800 { color: #a84b66 !important; } body.marketing-brand-skin .text-indigo-700, body.marketing-brand-skin .hover\:text-indigo-700:hover { color: #a84b66 !important; } body.marketing-brand-skin .bg-indigo-50 { background-color: #fbf0f0 !important; } body.marketing-brand-skin .border-indigo-100 { border-color: #f2c4c4 !important; } body.marketing-brand-skin .hover\:bg-indigo-700:hover { background-color: #8a3d54 !important; } /* ——— Tailwind gray (nav, footer) ——— */ body.marketing-brand-skin .bg-gray-900 { background-color: #1c1a22 !important; } body.marketing-brand-skin .text-gray-300 { color: #c5ddd5 !important; } body.marketing-brand-skin .text-gray-400 { color: rgba(197, 221, 213, 0.85) !important; } body.marketing-brand-skin .text-gray-600 { color: #3d3847 !important; } body.marketing-brand-skin .text-gray-900 { color: #1c1a22 !important; } body.marketing-brand-skin .border-gray-100 { border-color: rgba(201, 150, 60, 0.12) !important; } body.marketing-brand-skin .border-gray-800 { border-color: rgba(255, 255, 255, 0.1) !important; } /* Callout boxes (was amber) → champagne / gold */ body.marketing-brand-skin .bg-amber-50 { background-color: #f5ecd7 !important; } body.marketing-brand-skin .border-amber-200 { border-color: #edd99a !important; } body.marketing-brand-skin .text-amber-800 { color: #8a6329 !important; } /* Blog / legal headers */ body.marketing-brand-skin .bg-white { background-color: #fffefb !important; } body.marketing-brand-skin .bg-white\/95 { background-color: rgba(247, 244, 240, 0.95) !important; } /* Help: code blocks */ body.marketing-brand-skin .prose pre { background-color: #1c1a22 !important; color: #c5ddd5 !important; } /* Legal section dividers */ body.marketing-brand-skin .legal-section + .legal-section { border-top-color: rgba(201, 150, 60, 0.2) !important; } /* Help / dark footer link hovers → blush */ body.marketing-brand-skin footer .hover\:text-white:hover { color: #f2c4c4 !important; } /* ——— Blog article (how-to) overrides ——— */ body.marketing-brand-skin .article-body h2 { color: #1c1a22 !important; border-top-color: rgba(201, 150, 60, 0.2) !important; font-family: "Playfair Display", Georgia, serif !important; } body.marketing-brand-skin .article-body h3 { color: #1c1a22 !important; font-family: "Playfair Display", Georgia, serif !important; } body.marketing-brand-skin .article-body p, body.marketing-brand-skin .article-body ul, body.marketing-brand-skin .article-body ol { color: #3d3847 !important; } body.marketing-brand-skin .article-body a { color: #a84b66 !important; } body.marketing-brand-skin .article-body strong { color: #1c1a22 !important; } body.marketing-brand-skin .tip-box { background: #fbf0f0 !important; border-color: #f2c4c4 !important; border-left-color: #a84b66 !important; color: #a84b66 !important; } body.marketing-brand-skin .win-box { background: rgba(197, 221, 213, 0.35) !important; border-color: #7a9e8e !important; border-left-color: #4a7065 !important; color: #4a7065 !important; } body.marketing-brand-skin .win-box strong { color: #1c1a22 !important; } body.marketing-brand-skin .screenshot-box { background: #f7f4f0 !important; border-color: rgba(201, 150, 60, 0.2) !important; } body.marketing-brand-skin .screenshot-box img { border-color: rgba(201, 150, 60, 0.2) !important; } body.marketing-brand-skin .post-header-meta { color: #9e9aaa !important; } body.marketing-brand-skin .post-header-meta .post-header-tag { background-color: #fbf0f0 !important; color: #a84b66 !important; } body.marketing-brand-skin .post-header h1 { color: #1c1a22 !important; font-family: "Playfair Display", Georgia, serif !important; } body.marketing-brand-skin .post-header .lead-quote { border-left-color: #a84b66 !important; } body.marketing-brand-skin .post-header a { color: #a84b66 !important; } body.marketing-brand-skin .post-header .lead, body.marketing-brand-skin .post-header .lead-intro { color: #3d3847 !important; } /* Help Center (/help/*): flex row + large screenshot dimensions can force horizontal scroll on narrow viewports; allow main to shrink and scale media. */ body.marketing-brand-skin > div.flex { min-width: 0; } body.marketing-brand-skin > div.flex > main.flex-1 { min-width: 0; } body.marketing-brand-skin > div.flex > main.flex-1 .max-w-4xl { min-width: 0; } body.marketing-brand-skin > div.flex > main.flex-1 img, body.marketing-brand-skin > div.flex > main.flex-1 video { max-width: 100%; height: auto; } /* Help Center: wide comparison tables — contain scroll inside the column, not the viewport */ body.marketing-brand-skin > div.flex > main.flex-1 .overflow-x-auto { min-width: 0; max-width: 100%; -webkit-overflow-scrolling: touch; } body.marketing-brand-skin > div.flex > main.flex-1 .overflow-x-auto table { width: max-content; min-width: 100%; }