/* ========================================================================== Metis Khemis / MetisPro — Peacock-Luxe Brand Overlay -------------------------------------------------------------------------- Redefines the shadcn/ui CSS variables used by the compiled Promptineer SPA. Does not change any functionality — only design tokens, fonts, surface colors, and a handful of subtle brand touches. Loaded AFTER /assets/index-*.css so these values win. ========================================================================== */ /* --- 1. Core token overrides ------------------------------------------- */ :root, .dark, html.dark, [data-theme="dark"] { /* Deep midnight background — the peacock's night sky */ --background: 226 71% 5%; /* #050a1a */ --foreground: 40 33% 96%; /* soft ivory text */ --card: 226 55% 8%; /* #0a1129 */ --card-foreground: 40 33% 96%; --card-border: 174 76% 42% / .18; /* teal edge glow */ --popover: 226 55% 9%; --popover-foreground: 40 33% 96%; --popover-border: 174 76% 42% / .18; --border: 174 30% 28% / .35; /* teal-tinted border */ --input: 226 40% 14%; --ring: 174 76% 42%; /* teal focus ring */ /* PRIMARY = peacock teal */ --primary: 174 76% 42%; /* #14b8a6 */ --primary-foreground: 226 71% 5%; --primary-border: 174 76% 42%; /* SECONDARY = deep midnight surface */ --secondary: 226 45% 12%; --secondary-foreground: 40 33% 96%; --secondary-border: 174 30% 28% / .4; /* ACCENT = royal gold */ --accent: 41 62% 58%; /* #d4a851 */ --accent-foreground: 226 71% 5%; --accent-border: 41 62% 58%; --muted: 226 35% 14%; --muted-foreground: 40 15% 68%; --muted-border: 174 30% 28% / .3; --destructive: 350 84% 60%; --destructive-foreground: 40 33% 96%; --destructive-border: 350 84% 60%; /* SIDEBAR */ --sidebar: 226 60% 6%; --sidebar-foreground: 40 33% 96%; --sidebar-border: 174 30% 28% / .35; --sidebar-primary: 174 76% 42%; --sidebar-primary-foreground: 226 71% 5%; --sidebar-primary-border: 174 76% 42%; --sidebar-accent: 226 45% 12%; --sidebar-accent-foreground: 40 33% 96%; --sidebar-accent-border: 174 30% 28% / .4; --sidebar-ring: 174 76% 42%; /* CHARTS — peacock/gold spectrum */ --chart-1: 174 76% 42%; /* teal */ --chart-2: 41 62% 58%; /* gold */ --chart-3: 175 72% 70%; /* cyan mist */ --chart-4: 43 78% 71%; /* pale gold */ --chart-5: 280 65% 55%; /* orchid violet accent */ /* TYPOGRAPHY — Cormorant display italic, Inter body */ --font-display: "Cormorant Garamond", "Cabinet Grotesk", Georgia, serif; --font-serif: "Cormorant Garamond", Georgia, serif; --font-sans: "Inter", "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; /* SHADOWS — slightly cooler and richer */ --shadow-2xs: 0 1px 2px hsl(226 71% 2% / .35); --shadow-xs: 0 1px 3px hsl(226 71% 2% / .45); --shadow-sm: 0 2px 6px hsl(226 71% 2% / .5); --shadow: 0 6px 16px hsl(226 71% 2% / .55); --shadow-md: 0 10px 24px hsl(226 71% 2% / .6); --shadow-lg: 0 14px 40px hsl(226 71% 2% / .65); --shadow-xl: 0 20px 60px hsl(226 71% 2% / .7); --shadow-2xl: 0 28px 80px hsl(226 71% 2% / .8); /* CORNERS — slightly softer, luxe */ --radius: .75rem; /* Elevation tokens (used by the button system) */ --button-outline: hsl(174 76% 42% / .35); --badge-outline: hsl(174 76% 42% / .35); --opaque-button-border-intensity: 6; --elevate-1: hsl(174 76% 42% / .06); --elevate-2: hsl(174 76% 42% / .12); } /* --- 2. Global page paint --------------------------------------------- */ html, body { background: hsl(226 71% 5%) !important; color: hsl(40 33% 96%); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body::before { /* subtle peacock aurora — sits behind everything, no interaction impact */ content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(1200px 700px at 15% 0%, hsl(174 76% 42% / .10), transparent 60%), radial-gradient(900px 700px at 85% 100%, hsl(41 62% 58% / .07), transparent 65%), radial-gradient(700px 500px at 50% 60%, hsl(280 65% 55% / .05), transparent 70%); } #root { position: relative; z-index: 1; } /* --- 3. Display type — headings feel editorial ------------------------ */ h1, h2, h3, [class*="text-4xl"], [class*="text-5xl"], [class*="text-6xl"], [class*="text-3xl"] { font-family: var(--font-display); font-weight: 500; letter-spacing: -.01em; } h1 em, h2 em, h3 em, h1 i, h2 i, h3 i { font-style: italic; color: hsl(174 76% 55%); font-weight: 400; } /* --- 4. Buttons — teal primary, gold "book a call" ------------------- */ button[data-variant="default"], .bg-primary, [class*="bg-primary"]:not([class*="hover:bg-primary"]) { background: linear-gradient(135deg, hsl(174 76% 42%), hsl(174 76% 48%)) !important; color: hsl(226 71% 5%) !important; box-shadow: 0 8px 24px hsl(174 76% 42% / .28), inset 0 1px 0 hsl(174 76% 70% / .4); border: 1px solid hsl(174 76% 42% / .6); } button[data-variant="default"]:hover, .bg-primary:hover, [class*="hover:bg-primary"]:hover { filter: brightness(1.08); box-shadow: 0 10px 30px hsl(174 76% 42% / .38), inset 0 1px 0 hsl(174 76% 70% / .5); } /* Gold accent button — for "Book Strategy Call" style CTAs */ .btn-gold, [data-brand="gold"] { background: linear-gradient(135deg, hsl(41 62% 58%), hsl(41 62% 66%)) !important; color: hsl(226 71% 5%) !important; box-shadow: 0 8px 24px hsl(41 62% 58% / .28), inset 0 1px 0 hsl(41 82% 75% / .5); border: 1px solid hsl(41 62% 58% / .7); } /* --- 5. Cards — dark glass with teal edge ---------------------------- */ .bg-card, [class*="bg-card"], [data-radix-popper-content-wrapper] > *, [role="dialog"] { background: hsl(226 55% 8% / .85) !important; backdrop-filter: blur(10px); border: 1px solid hsl(174 76% 42% / .18) !important; box-shadow: var(--shadow-md); } /* --- 6. Links + inline accents --------------------------------------- */ a { color: hsl(174 76% 55%); text-underline-offset: 3px; } a:hover { color: hsl(174 76% 70%); } ::selection { background: hsl(174 76% 42% / .35); color: hsl(40 33% 96%); } /* --- 7. Scrollbar (webkit) ------------------------------------------- */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: hsl(226 55% 7%); } ::-webkit-scrollbar-thumb { background: linear-gradient(hsl(174 76% 42% / .5), hsl(174 76% 32% / .5)); border-radius: 999px; border: 2px solid hsl(226 55% 7%); } /* --- 8. Loading fallback (visible before React mounts) --------------- */ #root > div[style*="Loading application"], #root > div:first-child:not(:has(*)) { background: hsl(226 71% 5%) !important; } /* --- 9. Brand seal — subtle peacock watermark on hero routes only ---- */ /* The React SPA sets data-page on the body/root for some routes. If it doesn't, this is a safe no-op. */ [data-page="landing"] main::before, main[data-hero="true"]::before { content: ""; position: absolute; right: -80px; top: -40px; width: 620px; height: 620px; background: url("/brand/peacock-hero.png") no-repeat center/contain; opacity: .22; pointer-events: none; filter: saturate(1.1); z-index: 0; } /* --- 9b. Neutralize Tailwind violet/purple utility classes ----------- The compiled bundle uses bg-violet-500, text-purple-400, etc. as hardcoded classes. Rewrite them to the peacock palette so no purple ever paints. */ [class~="bg-violet-100"], [class~="bg-purple-100"] { background-color: hsl(174 76% 42% / .12) !important; } [class~="bg-violet-300"], [class~="bg-purple-300"] { background-color: hsl(174 76% 55%) !important; } [class~="bg-violet-400"], [class~="bg-purple-400"] { background-color: hsl(174 76% 48%) !important; } [class~="bg-violet-500"], [class~="bg-purple-500"] { background-color: hsl(174 76% 42%) !important; } [class~="bg-violet-600"], [class~="bg-purple-600"] { background-color: hsl(174 76% 34%) !important; } [class~="text-violet-100"], [class~="text-purple-100"] { color: hsl(174 76% 90%) !important; } [class~="text-violet-300"], [class~="text-purple-300"] { color: hsl(174 76% 70%) !important; } [class~="text-violet-400"], [class~="text-purple-400"] { color: hsl(174 76% 55%) !important; } [class~="text-violet-500"], [class~="text-purple-500"] { color: hsl(174 76% 42%) !important; } [class~="text-violet-600"], [class~="text-purple-600"] { color: hsl(174 76% 34%) !important; } [class~="border-violet-300"], [class~="border-purple-300"] { border-color: hsl(174 76% 55%) !important; } [class~="border-violet-400"], [class~="border-purple-400"] { border-color: hsl(174 76% 48%) !important; } [class~="border-violet-500"], [class~="border-purple-500"] { border-color: hsl(174 76% 42%) !important; } [class~="from-violet-500"], [class~="from-purple-500"] { --tw-gradient-from: hsl(174 76% 42%) !important; } [class~="to-violet-500"], [class~="to-purple-500"] { --tw-gradient-to: hsl(174 76% 42%) !important; } [class~="via-violet-500"], [class~="via-purple-500"] { --tw-gradient-via: hsl(174 76% 42%) !important; } [class~="from-violet-400"], [class~="from-purple-400"] { --tw-gradient-from: hsl(174 76% 48%) !important; } [class~="to-violet-400"], [class~="to-purple-400"] { --tw-gradient-to: hsl(174 76% 48%) !important; } [class~="from-violet-600"], [class~="from-purple-600"] { --tw-gradient-from: hsl(41 62% 58%) !important; } [class~="to-violet-600"], [class~="to-purple-600"] { --tw-gradient-to: hsl(41 62% 58%) !important; } [class~="ring-violet-500"], [class~="ring-purple-500"] { --tw-ring-color: hsl(174 76% 42%) !important; } [class~="fill-violet-500"], [class~="fill-purple-500"] { fill: hsl(174 76% 42%) !important; } [class~="stroke-violet-500"], [class~="stroke-purple-500"] { stroke: hsl(174 76% 42%) !important; } /* --- 9c. Fix 404 / NotFound page -------------------------------------- Compiled 404 uses bg-gray-50 / text-gray-900 / text-gray-600 which fights the dark theme. Bring it back to peacock-navy. */ .min-h-screen[class~="bg-gray-50"] { background: hsl(226 71% 5%) !important; } [class~="bg-gray-50"] > * [class~="text-gray-900"], [class~="bg-gray-50"] [class~="text-gray-900"] { color: hsl(40 33% 96%) !important; } [class~="bg-gray-50"] [class~="text-gray-600"] { color: hsl(40 15% 68%) !important; } /* --- 9d. Fix mobile hero overflow ------------------------------------- Landing hero H1/paragraph clipped at 375px. Enforce padding + word-break. */ @media (max-width: 640px) { main h1, main p, section h1, section p, header h1 { padding-inline: 1rem; max-width: 100%; word-break: break-word; overflow-wrap: anywhere; } main, section { overflow-x: hidden; } } /* --- 10. Prometheus flame — small footer mark ------------------------ */ .metis-powered { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .7rem; border: 1px solid hsl(24 82% 54% / .35); border-radius: 999px; color: hsl(24 82% 60%); font-size: .8rem; background: hsl(24 82% 54% / .06); } .metis-powered::before { content: ""; width: 10px; height: 10px; background: radial-gradient(circle, hsl(24 82% 65%), hsl(14 82% 45%)); border-radius: 50%; box-shadow: 0 0 8px hsl(24 82% 55% / .8); } /* --- 9e. 404 alert icon: recolor red/teal -> peacock gold ---------- Original bundle used text-red-500. My 404 rewrite patched it to text-primary (teal), which then flowed through the app's theme. Target the specific lucide icon class + its container to force gold. */ svg[class~="text-red-500"], svg[class~="text-red-400"], svg[class~="text-red-600"], svg.lucide-circle-alert, svg[class~="lucide-circle-alert"] { color: hsl(41 62% 58%) !important; stroke: hsl(41 62% 58%) !important; } svg[class~="text-red-500"] *, svg[class~="text-red-400"] *, svg[class~="text-red-600"] *, svg.lucide-circle-alert *, svg[class~="lucide-circle-alert"] * { stroke: hsl(41 62% 58%) !important; } [class~="text-red-500"]:not(svg) svg, [class~="text-red-400"]:not(svg) svg, [class~="text-red-600"]:not(svg) svg { color: hsl(41 62% 58%) !important; stroke: hsl(41 62% 58%) !important; } /* --- 9f. CONTRAST FIX (v2, precision) ------------------------------- Overlay v1 used spec hex #14b8a6 in its selector predicates, but the live app renders --primary as rgb(26,188,172) via HSL tokens, so the attribute selectors never matched. v2 uses the DOM's actual attribute hooks (data-testid) plus exact class combinations discovered via DOM inspection. Match specificity is bumped so the app's own utility colors lose without needing !important on every property. */ /* Pro pricing card (homepage) — data-testid is the only stable hook */ [data-testid="pricing-pro"] { color: hsl(226 71% 5%) !important; } [data-testid="pricing-pro"] *:not(button):not(button *), [data-testid="pricing-pro"] svg[class*="text-primary"], [data-testid="pricing-pro"] svg[class*="text-primary"] *, [data-testid="pricing-pro"] .text-primary, [data-testid="pricing-pro"] [class~="text-primary"], [data-testid="pricing-pro"] [class~="text-muted-foreground"] { color: hsl(226 71% 5%) !important; stroke: hsl(226 71% 5%) !important; } [data-testid="pricing-pro"] [class~="text-muted-foreground"] { color: hsl(226 71% 5% / .72) !important; } /* Featured CTA button flips to navy fill, ivory text */ [data-testid="pricing-cta-pro"] { background: hsl(226 71% 5%) !important; background-image: none !important; color: hsl(40 60% 90%) !important; border-color: hsl(226 71% 5%) !important; box-shadow: 0 8px 24px hsl(226 71% 5% / .35) !important; } [data-testid="pricing-cta-pro"] * { color: hsl(40 60% 90%) !important; stroke: hsl(40 60% 90%) !important; } /* --- 9g. Gold "Most Popular" badge --------------------------------- Homepage badge: absolute -top-3 above pricing-pro card. Match by text content is impossible in CSS, but we can match by structure: any bg-primary + absolute + -top-3 element preceding pricing-pro. The pricing-pro card's previous sibling is the badge. */ [data-testid="pricing-pro"] ~ *, /* not reliable, fallback */ [data-testid="pricing-pro"] + * { /* placeholder — real match below */ } /* Robust: any bg-primary element that is absolutely positioned with -top-3 IS the popular badge (only place that combo appears). */ [class~="bg-primary"][class~="absolute"][class~="-top-3"], [class~="bg-primary"][class~="absolute"][class*="top-"][class~="text-white"] { background: linear-gradient(135deg, hsl(41 62% 58%), hsl(41 62% 66%)) !important; background-image: linear-gradient(135deg, hsl(41 62% 58%), hsl(41 62% 66%)) !important; color: hsl(226 71% 5%) !important; box-shadow: 0 8px 24px hsl(41 62% 58% / .35), inset 0 1px 0 hsl(41 82% 75% / .6) !important; border-color: hsl(41 62% 58% / .7) !important; } /* Step numbers 01/02/03 -------------------------------------------- Real DOM:
01
The circle is bg-primary/10 (translucent teal on navy) — visually it's NOT a solid teal fill; it's a soft teal wash. The numerals in text-primary read low-contrast against it. Fix: make the circle a solid teal fill AND flip the numerals to navy — a clean, high- contrast reversal. */ [class~="rounded-full"][class~="bg-primary/10"][class~="border-primary/20"], [class~="rounded-full"][class~="bg-primary/10"][class*="w-14"], [class~="rounded-full"][class*="bg-primary/1"] { background-color: hsl(174 76% 42%) !important; border-color: hsl(174 76% 42%) !important; box-shadow: 0 8px 24px hsl(174 76% 42% / .28) !important; } [class~="rounded-full"][class*="bg-primary/1"] .text-primary, [class~="rounded-full"][class*="bg-primary/1"] [class~="text-primary"], [class~="rounded-full"][class*="bg-primary/1"] span { color: hsl(226 71% 5%) !important; } /* --- 9h. Kill leftover Tailwind blue-500 default ring color. -------- */ :root { --tw-ring-color: hsl(174 76% 42% / .5) !important; } /* --- 9i. Force hero H1 phrase "Live in Minutes." to wrap as one line at all viewports so the gradient text never orphan-wraps. --------- */ @media (min-width: 1200px) { section:first-of-type h1 { white-space: normal; } section:first-of-type h1 > span:last-child { display: inline-block; white-space: nowrap; } } /* --- 9j. Login page: vertically center the form column. ------------- */ [class~="min-h-screen"][class~="grid-cols-2"] > :first-child, form[class~="space-y-4"]:not(:has(input[type="file"])), [data-page="login"] > :first-child { display: flex !important; flex-direction: column; justify-content: center; } /* --- 9k. Table / feed grays on standalone dashboard: warm-muted only. /live.html isn't touched by this file (different origin/render), but guard the React app's tables/feed against the same drift. */ [class~="text-gray-400"], [class~="text-gray-500"] { color: hsl(40 12% 58%) !important; } [class~="text-gray-600"], [class~="text-gray-700"] { color: hsl(40 15% 68%) !important; } /* --- 9m. Footer link normalization v2 ------------------------------- Buttons and anchors in the footer share identical classes ("hover:text-foreground transition-colors"), yet inherits a teal link color while