/* ===================================================================== AIPostoz — PUBLIC SITE DARK SKIN --------------------------------------------------------------------- Flips the whole public landing page to the dark-green "studio" theme used by the app dashboard + hero, WITHOUT editing any section markup. How it works: every home section is built from the same handful of utility classes (bg-white, text-ink, text-sub, border-line, …). This file re-colours just those classes. Layout, spacing and content are untouched — only colours change. LOAD ORDER: include this LAST in , after Tailwind + public.css, so its colours win. Remove the one line to go back to light. ===================================================================== */ /* ---- page base ---- */ body{ background:radial-gradient(120% 72% at 50% -6%,#0F3D24 0%,#0A2115 40%,#06110B 74%,#050907 100%) !important; color:#E8EFEA !important; } /* ---- surfaces: every "white" card → dark glass ---- */ .bg-white, .bg-white\/85,.bg-white\/70,.bg-white\/60,.bg-white\/50, .bg-\[\#FAFBFA\],.bg-\[\#F3F4F6\]{ background-color:rgba(255,255,255,.04) !important; border-color:rgba(255,255,255,.09); } .bg-white\/10{ background-color:rgba(255,255,255,.06) !important; } .bg-white\/5 { background-color:rgba(255,255,255,.04) !important; } /* soft coloured tints behind icons → keep a hint of their colour, on dark */ .bg-\[\#ECFEFF\]{ background-color:rgba(6,182,212,.14) !important; } /* cyan */ .bg-\[\#EEF2FF\]{ background-color:rgba(99,102,241,.16) !important; } /* indigo*/ .bg-\[\#FFF4E5\]{ background-color:rgba(245,158,11,.15) !important; } /* amber */ /* ---- text ---- */ .text-ink { color:#F3F7F5 !important; } .text-sub { color:#9FB0A6 !important; } .text-muted{ color:#6E7C74 !important; } /* ---- brand green reads brighter on dark ---- */ .text-brand-600{ color:#7FE3A6 !important; } .bg-brand-100 { background-color:rgba(34,197,94,.14) !important; } /* ---- lines / dividers ---- */ .border-line{ border-color:rgba(255,255,255,.09) !important; } .bg-line { background-color:rgba(255,255,255,.10) !important; } /* ---- shadows softened for dark ---- */ .shadow-card{ box-shadow:0 8px 24px -12px rgba(0,0,0,.55) !important; } .shadow-soft{ box-shadow:0 18px 50px -18px rgba(0,0,0,.6) !important; } /* ---- form fields on dark ---- */ input,textarea,select{ background-color:rgba(255,255,255,.05) !important; border-color:rgba(255,255,255,.12) !important; color:#fff !important; } input::placeholder,textarea::placeholder{ color:#6E7C74 !important; } /* ---- sticky nav: dark glass ---- */ header.sticky,.sticky.bg-white\/85{ background-color:rgba(10,16,13,.82) !important; border-color:rgba(255,255,255,.08) !important; backdrop-filter:blur(12px); } /* --------------------------------------------------------------------- custom section backgrounds (defined in public.css) — these are white washes that must be flipped so those sections aren't bright on dark. ------------------------------------------------------------------ */ .xp,.cta-aurora{ background:transparent !important; } /* remove the pale-mint light washes (they'd bloom white on dark); the dark body gradient + green blobs carry the mood instead */ .xp-mesh,.cta-aurora-wash,.stats-wash,.cta-glow,.hero-glow, .tools-cta-glow,.ft-glow{ background:none !important; } /* glass panels → dark glass */ .xp-glass{ background:rgba(255,255,255,.05) !important; border-color:rgba(255,255,255,.09) !important; } /* pale-green icon chips → green-on-dark */ .xp-icon-wrap{ background:rgba(34,197,94,.14) !important; color:#7FE3A6 !important; } /* faint grid lines: dark-on-light → light-on-dark so they stay visible */ .xp-grid{ background-image: linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px) !important; } /* keep saturated accent tiles & gradients exactly as designed: bg-[#06B6D4] bg-[#6366F1] bg-[#F59E0B] and bg-gradient-* are NOT overridden on purpose — they're meant to be colourful. */