/* ============================================================ Home Trades — Tailwind utility overrides ------------------------------------------------------------ Existing templates ship hand-written Tailwind utility classes (bg-blue-600, text-gray-900, …). Re-bind those utilities to the active palette so existing markup picks up the new design language without a full rewrite. Loaded LAST in site.css so it wins the cascade. !important is used because the Tailwind CDN injects utilities at runtime; without it the runtime utilities can re-win. Scope: surface-marketing AND surface-app — the variables they reference resolve per surface so a single override picks up the right color. ============================================================ */ body.surface-marketing, body.surface-app { /* Map raw bg to surface bg */ background-color: var(--bg) !important; color: var(--ink-1); font-family: var(--font-sans); } /* Marketing surfaces use 16px body; app uses 14px */ body.surface-marketing { font-size: var(--t-md); } body.surface-app { font-size: var(--t-base); } /* Hero / page titles get the display serif on every surface. h3+ stays in Inter Tight so dense form labels and step titles don't switch fonts mid-flow. */ body.surface-marketing h1, body.surface-marketing h2 { font-family: var(--font-display); font-weight: 500; letter-spacing: var(--tracking-tight); line-height: var(--lh-tight); color: var(--ink-1); } /* ============================================================ Color-utility overrides ============================================================ */ /* ----- Text ----- */ body.surface-marketing .text-gray-900, body.surface-app .text-gray-900, body.surface-marketing .text-blue-900, body.surface-app .text-blue-900 { color: var(--ink-1) !important; } body.surface-marketing .text-gray-800, body.surface-app .text-gray-800, body.surface-marketing .text-gray-700, body.surface-app .text-gray-700 { color: var(--ink-2) !important; } body.surface-marketing .text-gray-600, body.surface-app .text-gray-600, body.surface-marketing .text-gray-500, body.surface-app .text-gray-500 { color: var(--ink-3) !important; } body.surface-marketing .text-gray-400, body.surface-app .text-gray-400, body.surface-marketing .text-gray-300, body.surface-app .text-gray-300 { color: var(--ink-4) !important; } /* Brand text — all blue/indigo shades collapse to brand for visual coherence */ body.surface-marketing .text-blue-300, body.surface-app .text-blue-300, body.surface-marketing .text-blue-400, body.surface-app .text-blue-400, body.surface-marketing .text-blue-500, body.surface-app .text-blue-500, body.surface-marketing .text-blue-600, body.surface-app .text-blue-600, body.surface-marketing .text-blue-700, body.surface-app .text-blue-700, body.surface-marketing .text-blue-800, body.surface-app .text-blue-800, body.surface-marketing .text-blue-900, body.surface-app .text-blue-900, body.surface-marketing .text-indigo-300, body.surface-app .text-indigo-300, body.surface-marketing .text-indigo-400, body.surface-app .text-indigo-400, body.surface-marketing .text-indigo-500, body.surface-app .text-indigo-500, body.surface-marketing .text-indigo-600, body.surface-app .text-indigo-600, body.surface-marketing .text-indigo-700, body.surface-app .text-indigo-700, body.surface-marketing .text-indigo-800, body.surface-app .text-indigo-800, body.surface-marketing .text-indigo-900, body.surface-app .text-indigo-900, body.surface-marketing .dark\:text-blue-200, body.surface-app .dark\:text-blue-200, body.surface-marketing .dark\:text-blue-300, body.surface-app .dark\:text-blue-300, body.surface-marketing .dark\:text-blue-400, body.surface-app .dark\:text-blue-400, body.surface-marketing .dark\:text-indigo-300, body.surface-app .dark\:text-indigo-300 { color: var(--brand) !important; } /* Hover variants */ body.surface-marketing .hover\:text-blue-400:hover, body.surface-app .hover\:text-blue-400:hover, body.surface-marketing .hover\:text-blue-500:hover, body.surface-app .hover\:text-blue-500:hover, body.surface-marketing .hover\:text-blue-600:hover, body.surface-app .hover\:text-blue-600:hover, body.surface-marketing .hover\:text-blue-700:hover, body.surface-app .hover\:text-blue-700:hover, body.surface-marketing .group:hover .group-hover\:text-blue-500, body.surface-app .group:hover .group-hover\:text-blue-500 { color: var(--brand-hover) !important; } /* Semantic text */ body.surface-marketing .text-amber-700, body.surface-app .text-amber-700, body.surface-marketing .text-amber-800, body.surface-app .text-amber-800 { color: var(--warning-ink) !important; } body.surface-marketing .text-red-600, body.surface-app .text-red-600, body.surface-marketing .text-red-700, body.surface-app .text-red-700, body.surface-marketing .text-red-800, body.surface-app .text-red-800 { color: var(--danger-ink) !important; } body.surface-marketing .text-green-600, body.surface-app .text-green-600, body.surface-marketing .text-green-700, body.surface-app .text-green-700, body.surface-marketing .text-green-800, body.surface-app .text-green-800 { color: var(--success-ink) !important; } body.surface-marketing .text-emerald-600,body.surface-app .text-emerald-600 { color: var(--success) !important; } body.surface-marketing .text-white, body.surface-app .text-white { color: #fff !important; } /* ----- Backgrounds ----- */ body.surface-marketing .bg-white, body.surface-app .bg-white { background-color: var(--bg-raised) !important; } body.surface-marketing .bg-gray-50, body.surface-app .bg-gray-50 { background-color: var(--bg) !important; } body.surface-marketing .bg-gray-100, body.surface-app .bg-gray-100, body.surface-marketing .bg-gray-200, body.surface-app .bg-gray-200 { background-color: var(--bg-sunken) !important; } /* Brand bg — all saturated blue/indigo to brand */ body.surface-marketing .bg-blue-500, body.surface-app .bg-blue-500, body.surface-marketing .bg-blue-600, body.surface-app .bg-blue-600, body.surface-marketing .bg-blue-700, body.surface-app .bg-blue-700, body.surface-marketing .bg-blue-800, body.surface-app .bg-blue-800, body.surface-marketing .bg-indigo-500, body.surface-app .bg-indigo-500, body.surface-marketing .bg-indigo-600, body.surface-app .bg-indigo-600, body.surface-marketing .bg-indigo-700, body.surface-app .bg-indigo-700 { background-color: var(--brand) !important; color: #fff !important; } body.surface-marketing .hover\:bg-blue-500:hover, body.surface-app .hover\:bg-blue-500:hover, body.surface-marketing .hover\:bg-blue-600:hover, body.surface-app .hover\:bg-blue-600:hover, body.surface-marketing .hover\:bg-blue-700:hover, body.surface-app .hover\:bg-blue-700:hover, body.surface-marketing .hover\:bg-blue-800:hover, body.surface-app .hover\:bg-blue-800:hover, body.surface-marketing .hover\:bg-indigo-600:hover, body.surface-app .hover\:bg-indigo-600:hover, body.surface-marketing .hover\:bg-indigo-700:hover, body.surface-app .hover\:bg-indigo-700:hover { background-color: var(--brand-hover) !important; } /* Brand-tint bg — light blue/indigo tints */ body.surface-marketing .bg-blue-50, body.surface-app .bg-blue-50, body.surface-marketing .bg-blue-100, body.surface-app .bg-blue-100, body.surface-marketing .bg-indigo-50, body.surface-app .bg-indigo-50, body.surface-marketing .bg-indigo-100, body.surface-app .bg-indigo-100, body.surface-marketing .dark\:bg-blue-900\/20, body.surface-app .dark\:bg-blue-900\/20, body.surface-marketing .dark\:bg-blue-900\/30, body.surface-app .dark\:bg-blue-900\/30, body.surface-marketing .dark\:bg-blue-900\/40, body.surface-app .dark\:bg-blue-900\/40, body.surface-marketing .dark\:bg-indigo-900\/30, body.surface-app .dark\:bg-indigo-900\/30 { background-color: var(--brand-tint) !important; color: var(--brand-ink) !important; } body.surface-marketing .hover\:bg-blue-50:hover, body.surface-app .hover\:bg-blue-50:hover, body.surface-marketing .hover\:bg-blue-100:hover, body.surface-app .hover\:bg-blue-100:hover, body.surface-marketing .hover\:bg-indigo-50:hover, body.surface-app .hover\:bg-indigo-50:hover { background-color: var(--brand-tint) !important; } /* Semantic */ body.surface-marketing .bg-amber-50, body.surface-app .bg-amber-50, body.surface-marketing .bg-amber-100, body.surface-app .bg-amber-100 { background-color: var(--warning-tint) !important; color: var(--warning-ink) !important; } body.surface-marketing .bg-red-50, body.surface-app .bg-red-50, body.surface-marketing .bg-red-100, body.surface-app .bg-red-100 { background-color: var(--danger-tint) !important; color: var(--danger-ink) !important; } body.surface-marketing .bg-green-50, body.surface-app .bg-green-50, body.surface-marketing .bg-green-100, body.surface-app .bg-green-100, body.surface-marketing .bg-emerald-50,body.surface-app .bg-emerald-50 { background-color: var(--success-tint) !important; color: var(--success-ink) !important; } /* ----- Borders ----- */ body.surface-marketing .border-gray-100, body.surface-app .border-gray-100, body.surface-marketing .border-gray-200, body.surface-app .border-gray-200 { border-color: var(--line-1) !important; } body.surface-marketing .border-gray-300, body.surface-app .border-gray-300, body.surface-marketing .border-gray-400, body.surface-app .border-gray-400 { border-color: var(--line-2) !important; } body.surface-marketing .border-blue-200, body.surface-app .border-blue-200, body.surface-marketing .border-blue-300, body.surface-app .border-blue-300, body.surface-marketing .border-blue-400, body.surface-app .border-blue-400, body.surface-marketing .border-blue-500, body.surface-app .border-blue-500, body.surface-marketing .border-blue-600, body.surface-app .border-blue-600, body.surface-marketing .border-blue-700, body.surface-app .border-blue-700, body.surface-marketing .border-blue-800, body.surface-app .border-blue-800, body.surface-marketing .border-indigo-200, body.surface-app .border-indigo-200, body.surface-marketing .border-indigo-300, body.surface-app .border-indigo-300, body.surface-marketing .border-indigo-500, body.surface-app .border-indigo-500, body.surface-marketing .border-indigo-700, body.surface-app .border-indigo-700, body.surface-marketing .dark\:border-blue-700, body.surface-app .dark\:border-blue-700, body.surface-marketing .dark\:border-blue-800, body.surface-app .dark\:border-blue-800, body.surface-marketing .hover\:border-blue-400:hover, body.surface-app .hover\:border-blue-400:hover { border-color: var(--brand) !important; } body.surface-marketing .border-blue-100, body.surface-app .border-blue-100, body.surface-marketing .border-indigo-100, body.surface-app .border-indigo-100 { border-color: var(--brand-tint) !important; } /* Tailwind ring (--tw-ring-color drives ring-* utilities) */ body.surface-marketing .ring-blue-100, body.surface-app .ring-blue-100, body.surface-marketing .ring-blue-200, body.surface-app .ring-blue-200 { --tw-ring-color: var(--brand-tint) !important; } body.surface-marketing .ring-blue-300, body.surface-app .ring-blue-300, body.surface-marketing .ring-blue-400, body.surface-app .ring-blue-400, body.surface-marketing .ring-blue-500, body.surface-app .ring-blue-500, body.surface-marketing .ring-blue-600, body.surface-app .ring-blue-600 { --tw-ring-color: var(--brand) !important; } /* Focus states (inputs, textareas, buttons) */ body.surface-marketing .focus\:border-blue-500:focus, body.surface-app .focus\:border-blue-500:focus, body.surface-marketing .focus\:border-blue-600:focus, body.surface-app .focus\:border-blue-600:focus { border-color: var(--brand) !important; } body.surface-marketing .focus\:ring-blue-500:focus, body.surface-app .focus\:ring-blue-500:focus, body.surface-marketing .focus-visible\:ring-blue-500:focus-visible, body.surface-app .focus-visible\:ring-blue-500:focus-visible { --tw-ring-color: var(--brand) !important; } body.surface-marketing .border-amber-200, body.surface-app .border-amber-200 { border-color: color-mix(in oklab, var(--warning) 25%, white) !important; } body.surface-marketing .border-red-200, body.surface-app .border-red-200, body.surface-marketing .border-red-300, body.surface-app .border-red-300 { border-color: color-mix(in oklab, var(--danger) 25%, white) !important; } body.surface-marketing .border-green-200, body.surface-app .border-green-200, body.surface-marketing .border-green-700, body.surface-app .border-green-700 { border-color: color-mix(in oklab, var(--success) 25%, white) !important; } /* Hover border */ body.surface-marketing .hover\:border-blue-200:hover, body.surface-app .hover\:border-blue-200:hover, body.surface-marketing .hover\:border-blue-300:hover, body.surface-app .hover\:border-blue-300:hover, body.surface-marketing .hover\:border-blue-500:hover, body.surface-app .hover\:border-blue-500:hover { border-color: var(--brand) !important; } /* ----- Hover backgrounds (gray) ----- */ body.surface-marketing .hover\:bg-gray-50:hover, body.surface-app .hover\:bg-gray-50:hover { background-color: var(--bg-tint) !important; } body.surface-marketing .hover\:bg-gray-100:hover, body.surface-app .hover\:bg-gray-100:hover, body.surface-marketing .hover\:bg-gray-200:hover, body.surface-app .hover\:bg-gray-200:hover { background-color: var(--bg-tint) !important; } /* ----- Tailwind opacity variants (slash syntax) — collapse to brand ----- */ /* Text opacity */ body.surface-marketing .text-blue-700\/80, body.surface-app .text-blue-700\/80, body.surface-marketing .dark\:text-blue-300\/80, body.surface-app .dark\:text-blue-300\/80 { color: var(--brand) !important; } /* Bg opacity (light tints + dark mode tints) */ body.surface-marketing .bg-blue-50\/40, body.surface-app .bg-blue-50\/40, body.surface-marketing .bg-blue-50\/50, body.surface-app .bg-blue-50\/50, body.surface-marketing .bg-blue-50\/60, body.surface-app .bg-blue-50\/60, body.surface-marketing .hover\:bg-blue-50\/60:hover, body.surface-app .hover\:bg-blue-50\/60:hover, body.surface-marketing .dark\:bg-blue-900\/10, body.surface-app .dark\:bg-blue-900\/10, body.surface-marketing .dark\:bg-blue-900\/20, body.surface-app .dark\:bg-blue-900\/20, body.surface-marketing .dark\:bg-blue-900\/30, body.surface-app .dark\:bg-blue-900\/30, body.surface-marketing .dark\:bg-blue-900\/40, body.surface-app .dark\:bg-blue-900\/40, body.surface-marketing .dark\:bg-blue-900\/50, body.surface-app .dark\:bg-blue-900\/50, body.surface-marketing .dark\:bg-indigo-900\/10, body.surface-app .dark\:bg-indigo-900\/10, body.surface-marketing .dark\:bg-indigo-900\/30, body.surface-app .dark\:bg-indigo-900\/30, body.surface-marketing .dark\:hover\:bg-blue-900\/20:hover, body.surface-app .dark\:hover\:bg-blue-900\/20:hover, body.surface-marketing .dark\:hover\:bg-blue-900\/50:hover, body.surface-app .dark\:hover\:bg-blue-900\/50:hover { background-color: var(--brand-tint) !important; } /* Ring opacity */ body.surface-marketing .dark\:ring-blue-900\/40, body.surface-app .dark\:ring-blue-900\/40 { --tw-ring-color: var(--brand-tint) !important; } /* ----- Teal → design-system accent (price research / verification feature) ----- */ body.surface-marketing .text-teal-300, body.surface-app .text-teal-300, body.surface-marketing .text-teal-400, body.surface-app .text-teal-400, body.surface-marketing .text-teal-500, body.surface-app .text-teal-500, body.surface-marketing .text-teal-600, body.surface-app .text-teal-600, body.surface-marketing .dark\:text-teal-300, body.surface-app .dark\:text-teal-300, body.surface-marketing .dark\:text-teal-400, body.surface-app .dark\:text-teal-400 { color: var(--accent) !important; } body.surface-marketing .text-teal-700, body.surface-app .text-teal-700, body.surface-marketing .text-teal-800, body.surface-app .text-teal-800, body.surface-marketing .text-teal-900, body.surface-app .text-teal-900 { color: var(--accent-ink) !important; } body.surface-marketing .hover\:text-teal-600:hover, body.surface-app .hover\:text-teal-600:hover, body.surface-marketing .hover\:text-teal-700:hover, body.surface-app .hover\:text-teal-700:hover { color: var(--accent-hover) !important; } body.surface-marketing .bg-teal-50, body.surface-app .bg-teal-50, body.surface-marketing .bg-teal-100, body.surface-app .bg-teal-100, body.surface-marketing .hover\:bg-teal-50:hover, body.surface-app .hover\:bg-teal-50:hover, body.surface-marketing .hover\:bg-teal-100:hover, body.surface-app .hover\:bg-teal-100:hover { background-color: var(--accent-tint) !important; color: var(--accent-ink) !important; } body.surface-marketing .bg-teal-500, body.surface-app .bg-teal-500, body.surface-marketing .bg-teal-600, body.surface-app .bg-teal-600, body.surface-marketing .bg-teal-700, body.surface-app .bg-teal-700 { background-color: var(--accent) !important; color: #fff !important; } body.surface-marketing .border-teal-200, body.surface-app .border-teal-200, body.surface-marketing .border-teal-300, body.surface-app .border-teal-300 { border-color: color-mix(in oklab, var(--accent) 30%, white) !important; } body.surface-marketing .border-teal-400, body.surface-app .border-teal-400, body.surface-marketing .border-teal-500, body.surface-app .border-teal-500, body.surface-marketing .border-teal-700, body.surface-app .border-teal-700, body.surface-marketing .dark\:border-teal-700, body.surface-app .dark\:border-teal-700, body.surface-marketing .hover\:border-teal-400:hover, body.surface-app .hover\:border-teal-400:hover { border-color: var(--accent) !important; } /* ----- Headings inside the hero on landing.html ----- */ body.surface-marketing .text-3xl, body.surface-marketing .text-4xl, body.surface-marketing .md\:text-4xl { font-family: var(--font-display); font-weight: 500; letter-spacing: var(--tracking-tight); line-height: var(--lh-tight); } /* ----- Rounded buttons should match design system radius ----- */ body.surface-marketing .rounded-lg, body.surface-app .rounded-lg { border-radius: var(--r-md) !important; } body.surface-marketing .rounded-xl, body.surface-app .rounded-xl { border-radius: var(--r-lg) !important; } body.surface-marketing .rounded-2xl, body.surface-app .rounded-2xl { border-radius: var(--r-xl) !important; } /* ============================================================ Header / footer / nav refinements ============================================================ */ /* Top nav — the .nav component class handles its own styling; this override catches any legacy

that sneaks through. */ body.surface-marketing > header, body.surface-app > header, body.surface-marketing > nav.nav, body.surface-app > nav.nav { box-shadow: none !important; } body.surface-marketing > footer, body.surface-app > footer { border-top: 1px solid var(--line-1); color: var(--ink-3); } /* Mobile bottom tab bar — match surface */ body.surface-marketing > nav.fixed, body.surface-app > nav.fixed { background: var(--bg-raised) !important; border-top: 1px solid var(--line-1) !important; } /* Disable the dark-mode page background flip — design system is light-only. The dark.bg-slate-900 selectors in base.html still match if the user toggles, but we block their effect. */ .dark body.surface-marketing, .dark body.surface-app { background: var(--bg) !important; color: var(--ink-1) !important; } /* ============================================================ HTMX swap transitions — reusable list-item fade/slide-in ------------------------------------------------------------ Shared keyframes for items inserted by HTMX (proposals list, scope items, line items). Combine .hto-slide-in with the .htmx-added marker HTMX places on freshly swapped nodes: .my-card.htmx-added { animation: hto-slide-in-up .3s ease; } ============================================================ */ @keyframes hto-slide-in-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }