/* * Piveth — site-wide theme layer (dark default + light overrides). * * Dark is the original design and is left untouched. When * is set, this file remaps CSS variables, Tailwind utilities, AND baked @apply / * hardcoded hex surfaces (header pills, cards, landing, chat, settings). * Loaded LAST in every so its overrides win. */ :root { color-scheme: dark; } /* ------------------------------------------------------------------ */ /* Light theme tokens */ /* ------------------------------------------------------------------ */ html[data-theme="light"] { color-scheme: light; --pv-bg: #FAF7EF; --pv-bg-base: #F4EFE3; --pv-bg-raised: #FFFFFF; --pv-bg-card: #FFFFFF; --pv-bg-hover: #F0E9D9; --pv-bg-warm: #F6F0E2; --pv-text: #211E17; --pv-text-soft: #3A362D; --pv-text-muted: #6E675A; --pv-gold-text: #7A5A07; --pv-gold-link: #8A6726; --pv-border: rgba(122, 90, 7, 0.28); --pv-border-soft: rgba(122, 90, 7, 0.16); --bg-deep: #FAF7EF; --bg-base: #F4EFE3; --bg-raised: #FFFFFF; --bg-warm: #F6F0E2; --text-soft: #211E17; --text-muted: #6E675A; --border-gold: rgba(122, 90, 7, 0.28); --card-bg: rgba(20, 16, 8, 0.04); --glass: rgba(255, 255, 255, 0.72); --finos-bg: #F4EFE3; --finos-text: #211E17; --rhaov-bg: #F4EFE3; --rhaov-surface: #FFFFFF; --rhaov-raised: #FBF8F1; --rhaov-card: #FFFFFF; --rhaov-border: rgba(122, 90, 7, 0.22); --rhaov-text: #211E17; --rhaov-muted: #6E675A; } html[data-theme="light"] body.landing-page, html[data-theme="light"] .about-page, html[data-theme="light"] .legal-page { background: var(--bg-deep) !important; color: var(--text-soft) !important; } html[data-theme="light"] .about-page { background: var(--bg-deep) !important; } html[data-theme="light"] body.ob-body, html[data-theme="light"] .ob-body { background: radial-gradient(ellipse at 50% -10%, #FFFDF7, #F1EAD9 70%) !important; color: var(--pv-text) !important; } html[data-theme="light"] .legal-doc-title { color: var(--text-soft) !important; } html[data-theme="light"] .legal-doc-meta, html[data-theme="light"] .legal-doc p, html[data-theme="light"] .legal-doc li { color: var(--text-muted) !important; } html[data-theme="light"] .legal-doc h2, html[data-theme="light"] .legal-doc h3 { color: var(--text-soft) !important; } /* ------------------------------------------------------------------ */ /* Tailwind utilities */ /* ------------------------------------------------------------------ */ html[data-theme="light"] body.bg-piveth-deep, html[data-theme="light"] body.bg-piveth-base { background-color: var(--pv-bg) !important; color: var(--pv-text) !important; } html[data-theme="light"] .bg-piveth-deep { background-color: var(--pv-bg) !important; } html[data-theme="light"] .bg-piveth-base { background-color: var(--pv-bg-base) !important; } html[data-theme="light"] .bg-piveth-raised { background-color: var(--pv-bg-raised) !important; } html[data-theme="light"] .bg-piveth-card { background-color: var(--pv-bg-card) !important; } html[data-theme="light"] .bg-piveth-hover { background-color: var(--pv-bg-hover) !important; } html[data-theme="light"] .bg-piveth-warm { background-color: var(--pv-bg-warm) !important; } html[data-theme="light"] [class*="bg-piveth-deep/"], html[data-theme="light"] [class*="bg-piveth-base/"] { background-color: rgba(250, 247, 239, 0.92) !important; } html[data-theme="light"] [class*="bg-piveth-raised/"], html[data-theme="light"] [class*="bg-piveth-card/"] { background-color: rgba(255, 255, 255, 0.94) !important; } /* Keep modal scrims dark enough to read; faint black tints stay subtle */ html[data-theme="light"] .bg-black\/40, html[data-theme="light"] .bg-black\/50, html[data-theme="light"] .bg-black\/60, html[data-theme="light"] .bg-black\/70, html[data-theme="light"] .bg-black\/80 { background-color: rgba(33, 30, 23, 0.45) !important; } html[data-theme="light"] .bg-black\/5, html[data-theme="light"] .bg-black\/10, html[data-theme="light"] .bg-black\/20, html[data-theme="light"] .bg-black\/30 { background-color: rgba(33, 30, 23, 0.08) !important; } html[data-theme="light"] [class*="bg-white/"] { background-color: rgba(20, 16, 8, 0.045) !important; } html[data-theme="light"] .text-white, html[data-theme="light"] .text-stone-50, html[data-theme="light"] .text-stone-100, html[data-theme="light"] .text-stone-200, html[data-theme="light"] .text-soft { color: var(--pv-text) !important; } html[data-theme="light"] .text-stone-300 { color: var(--pv-text-soft) !important; } html[data-theme="light"] .text-stone-400, html[data-theme="light"] .text-stone-500, html[data-theme="light"] .text-stone-600, html[data-theme="light"] .text-muted { color: var(--pv-text-muted) !important; } html[data-theme="light"] .text-gold-50, html[data-theme="light"] .text-gold-100, html[data-theme="light"] .text-gold-200, html[data-theme="light"] .text-gold-light { color: var(--pv-gold-text) !important; } html[data-theme="light"] .text-gold-300, html[data-theme="light"] .text-gold-400 { color: var(--pv-gold-link) !important; } html[data-theme="light"] [class*="border-gold-"] { border-color: var(--pv-border) !important; } html[data-theme="light"] .border-stone-700, html[data-theme="light"] .border-stone-800, html[data-theme="light"] [class*="border-white/"] { border-color: var(--pv-border-soft) !important; } html[data-theme="light"] .divide-gold-400\/10 > :not([hidden]) ~ :not([hidden]) { border-color: var(--pv-border-soft) !important; } html[data-theme="light"] input, html[data-theme="light"] textarea, html[data-theme="light"] select { color: var(--pv-text); } html[data-theme="light"] ::placeholder { color: var(--pv-text-muted) !important; opacity: 0.85; } html[data-theme="light"] .text-piveth-deep { color: #221E12 !important; } html[data-theme="light"] .bg-\[\#0E0C08\] { background-color: var(--pv-bg) !important; } html[data-theme="light"] .shadow-black\/20, html[data-theme="light"] .shadow-black\/30, html[data-theme="light"] .shadow-black\/40, html[data-theme="light"] .shadow-xl { box-shadow: 0 12px 32px rgba(20, 16, 8, 0.1) !important; } /* Gold-on-black logo artwork on cream pages */ html[data-theme="light"] .piveth-logo-img { mix-blend-mode: multiply; } html[data-theme="light"] [fill="#EAE6DA"], html[data-theme="light"] [fill="#eae6da"], html[data-theme="light"] [fill="#F5F5F4"], html[data-theme="light"] [fill="#f5f5f4"] { fill: #211E17 !important; } /* ------------------------------------------------------------------ */ /* App header — baked @apply classes (not remapped by utility rules) */ /* ------------------------------------------------------------------ */ html[data-theme="light"] .header-menu-trigger { background: #ffffff !important; border-color: var(--pv-border) !important; color: var(--pv-text) !important; box-shadow: 0 1px 2px rgba(20, 16, 8, 0.06); } html[data-theme="light"] .header-menu-trigger:hover { background: var(--pv-bg-hover) !important; border-color: var(--pv-gold-link) !important; } html[data-theme="light"] .header-menu-trigger strong, html[data-theme="light"] .header-menu-trigger span, html[data-theme="light"] .header-menu-trigger small, html[data-theme="light"] .header-menu-trigger svg { color: inherit !important; } html[data-theme="light"] .header-menu-trigger strong { color: var(--pv-text) !important; } html[data-theme="light"] .header-menu-trigger small, html[data-theme="light"] .header-menu-trigger svg { color: var(--pv-text-muted) !important; } html[data-theme="light"] .header-dropdown { background: #ffffff !important; border-color: var(--pv-border) !important; color: var(--pv-text) !important; box-shadow: 0 16px 40px rgba(20, 16, 8, 0.14) !important; } html[data-theme="light"] .header-dropdown-item { color: var(--pv-text-soft) !important; } html[data-theme="light"] .header-dropdown-item:hover { background: rgba(138, 103, 38, 0.1) !important; color: var(--pv-gold-text) !important; } html[data-theme="light"] .header-dropdown-item-active { background: rgba(138, 103, 38, 0.12) !important; color: var(--pv-gold-text) !important; } html[data-theme="light"] .header-dropdown-label { color: var(--pv-text-muted) !important; } html[data-theme="light"] .header-dropdown-divider { border-color: var(--pv-border-soft) !important; } html[data-theme="light"] .section-menu-trigger { background: #ffffff !important; background-image: none !important; border-color: var(--pv-border) !important; color: var(--pv-gold-text) !important; box-shadow: 0 1px 2px rgba(20, 16, 8, 0.06); } html[data-theme="light"] .section-menu-trigger:hover { background: var(--pv-bg-hover) !important; border-color: var(--pv-gold-link) !important; color: var(--pv-gold-text) !important; } html[data-theme="light"] .section-menu-trigger span, html[data-theme="light"] .section-menu-trigger svg { color: inherit !important; } html[data-theme="light"] .header-chat-link { background: #ffffff !important; color: var(--pv-gold-text) !important; border-color: var(--pv-border) !important; } html[data-theme="light"] .header-chat-link:hover { background: var(--pv-bg-hover) !important; } html[data-theme="light"] .nav-active { background: rgba(138, 103, 38, 0.12) !important; color: var(--pv-gold-text) !important; border-color: var(--pv-border) !important; } html[data-theme="light"] .sub-nav-link { color: var(--pv-text-muted) !important; } html[data-theme="light"] .sub-nav-link:hover { background: rgba(138, 103, 38, 0.1) !important; color: var(--pv-gold-text) !important; } /* ------------------------------------------------------------------ */ /* Dashboard surfaces with hardcoded dark hexes */ /* ------------------------------------------------------------------ */ html[data-theme="light"] .ai-insight-panel, html[data-theme="light"] .ai-insight-panel-tab { background: #ffffff !important; border-color: var(--pv-border) !important; color: var(--pv-gold-text) !important; box-shadow: 0 8px 24px rgba(20, 16, 8, 0.08); } html[data-theme="light"] .ai-insight-panel__title, html[data-theme="light"] .ai-insight-card__label, html[data-theme="light"] .ai-insight-panel__ask, html[data-theme="light"] .ai-insight-panel-tab { color: var(--pv-gold-text) !important; } html[data-theme="light"] .ai-insight-card { background: var(--pv-bg-warm) !important; border-color: var(--pv-border-soft) !important; } html[data-theme="light"] .ai-insight-card__text, html[data-theme="light"] .ai-insight-panel__hide { color: var(--pv-text-muted) !important; } html[data-theme="light"] .ai-insight-panel__hide { background: var(--pv-bg-hover) !important; border-color: var(--pv-border) !important; } html[data-theme="light"] .ai-insight-panel__hide:hover { color: var(--pv-gold-text) !important; } html[data-theme="light"] .ai-insight-panel__ask { background: rgba(138, 103, 38, 0.08) !important; border-color: var(--pv-border) !important; } html[data-theme="light"] .overview-block__title, html[data-theme="light"] .project-orbit-table tbody td, html[data-theme="light"] .project-orbit-table tbody td:first-child { color: var(--pv-text) !important; } html[data-theme="light"] .overview-block__eyebrow { color: var(--pv-gold-link) !important; } html[data-theme="light"] .project-orbit-table thead th { color: var(--pv-text-muted) !important; } html[data-theme="light"] .project-orbit-table tbody tr:hover, html[data-theme="light"] .project-orbit-mobile-card { background: var(--pv-bg-warm) !important; } html[data-theme="light"] .project-orbit-status { color: var(--pv-gold-text) !important; background: rgba(138, 103, 38, 0.1) !important; } html[data-theme="light"] .budget-table td:first-child, html[data-theme="light"] .budget-table { color: var(--pv-text) !important; } html[data-theme="light"] .budget-table tr.sub-row td:first-child { color: var(--pv-text-muted) !important; } html[data-theme="light"] .pivet-talk-overlay, html[data-theme="light"] .pivet-talk-stage { color: var(--pv-text) !important; } html[data-theme="light"] .pivet-talk-bubble { color: var(--pv-text) !important; } html[data-theme="light"] .pivet-talk-close { color: var(--pv-text-muted) !important; } html[data-theme="light"] .pivet-talk-close:hover { color: var(--pv-gold-text) !important; } html[data-theme="light"] .cal-cell, html[data-theme="light"] .cal-filter-input, html[data-theme="light"] .cal-filter-select, html[data-theme="light"] .cal-totals-table { background: #ffffff !important; color: var(--pv-text) !important; border-color: var(--pv-border-soft) !important; } html[data-theme="light"] .cal-head, html[data-theme="light"] .cal-day-num, html[data-theme="light"] .cal-more { color: var(--pv-text-muted) !important; } html[data-theme="light"] .cockpit-widget { background: var(--pv-bg-card) !important; border-color: var(--pv-border) !important; } html[data-theme="light"] .cockpit-widget-title, html[data-theme="light"] .cockpit-preset-label { color: var(--pv-text) !important; } html[data-theme="light"] .cockpit-kpi-value { color: var(--pv-gold-text) !important; } html[data-theme="light"] .cockpit-kpi-sub, html[data-theme="light"] .cockpit-widget-empty, html[data-theme="light"] .cockpit-widget-loading, html[data-theme="light"] .cockpit-preset-desc { color: var(--pv-text-muted) !important; } html[data-theme="light"] .cockpit-table th { color: var(--pv-text-muted) !important; } html[data-theme="light"] .cockpit-table td { color: var(--pv-text-soft) !important; border-top-color: var(--pv-border-soft) !important; } html[data-theme="light"] #cockpitToolbar, html[data-theme="light"] .cockpit-builder-modal, html[data-theme="light"] .cockpit-preview-modal { background: var(--pv-bg-raised) !important; border-color: var(--pv-border) !important; } html[data-theme="light"] .cockpit-toolbar-btn, html[data-theme="light"] .cockpit-alert-text, html[data-theme="light"] .cockpit-widget-btn { color: var(--pv-text-soft) !important; } html[data-theme="light"] .cockpit-toolbar-btn:hover, html[data-theme="light"] .cockpit-toolbar-btn--active, html[data-theme="light"] .cockpit-alert-label { color: var(--pv-gold-text) !important; } html[data-theme="light"] .voice-orb-wrap { --voice-label: #8A6726; --voice-label-active: #7A5A07; } /* ------------------------------------------------------------------ */ /* Chat */ /* ------------------------------------------------------------------ */ html[data-theme="light"] .session-item .session-preview { color: var(--pv-text) !important; } html[data-theme="light"] .session-item .session-meta { color: var(--pv-text-muted) !important; } html[data-theme="light"] .chat-bubble.assistant { background: #ffffff !important; color: var(--pv-text) !important; border-color: var(--pv-border) !important; } html[data-theme="light"] .chat-bubble.user { color: #221E12 !important; } /* ------------------------------------------------------------------ */ /* Settings */ /* ------------------------------------------------------------------ */ html[data-theme="light"] .settings-nav-item { color: var(--pv-text-muted) !important; } html[data-theme="light"] .settings-nav-item:hover { background: var(--pv-bg-hover) !important; color: var(--pv-text) !important; } html[data-theme="light"] .settings-nav-item-active { background: rgba(138, 103, 38, 0.12) !important; color: var(--pv-gold-text) !important; border-color: var(--pv-border) !important; } html[data-theme="light"] .settings-toggle { background: #E7DFCB !important; } /* ------------------------------------------------------------------ */ /* Landing / about / legal / finos */ /* ------------------------------------------------------------------ */ html[data-theme="light"] .landing-header { background: rgba(250, 247, 239, 0.82) !important; } html[data-theme="light"] .landing-header.scrolled { background: rgba(250, 247, 239, 0.94) !important; border-bottom-color: var(--pv-border) !important; box-shadow: 0 8px 24px rgba(20, 16, 8, 0.06) !important; } html[data-theme="light"] .landing-grain { opacity: 0.018; } html[data-theme="light"] .glass-panel { background: linear-gradient(145deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.55)) !important; } html[data-theme="light"] .metal-card { background: linear-gradient(135deg, #ffffff 0%, #f7f1e4 45%, #ffffff 100%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 16px 40px rgba(20, 16, 8, 0.08) !important; } html[data-theme="light"] .preview-kpi dd, html[data-theme="light"] .preview-kpi dd.neutral, html[data-theme="light"] .preview-row strong, html[data-theme="light"] .preview-feed__text strong { color: var(--pv-text) !important; } html[data-theme="light"] .about-badge, html[data-theme="light"] .about-kicker { color: var(--pv-gold-text) !important; background: rgba(138, 103, 38, 0.08) !important; } html[data-theme="light"] footer, html[data-theme="light"] .landing-page footer { color: var(--pv-text-muted); } /* ------------------------------------------------------------------ */ /* Rhaov */ /* ------------------------------------------------------------------ */ html[data-theme="light"] .rhaov-body { background: var(--rhaov-bg) !important; color: var(--rhaov-text) !important; } /* ------------------------------------------------------------------ */ /* Floating theme toggle */ /* ------------------------------------------------------------------ */ .pv-theme-toggle { position: fixed; left: 1rem; bottom: 1rem; z-index: 2147483000; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; height: 2.75rem; min-width: 2.75rem; padding: 0 0.75rem; border-radius: 9999px; border: 1px solid rgba(212, 175, 55, 0.4); background: rgba(20, 16, 8, 0.72); color: #F4D27A; font-family: 'DM Sans', system-ui, sans-serif; font-size: 0.75rem; font-weight: 600; cursor: pointer; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease; } .pv-theme-toggle:hover { transform: translateY(-1px); } .pv-theme-toggle svg { width: 1.1rem; height: 1.1rem; display: block; } .pv-theme-toggle .pv-theme-label { display: none; } @media (min-width: 640px) { .pv-theme-toggle .pv-theme-label { display: inline; } } html[data-theme="light"] .pv-theme-toggle { border-color: rgba(138, 103, 38, 0.35); background: rgba(255, 255, 255, 0.94); color: #7A5A07; box-shadow: 0 8px 24px rgba(20, 16, 8, 0.12); } .pv-theme-toggle .pv-icon-sun { display: none; } html[data-theme="light"] .pv-theme-toggle .pv-icon-sun { display: block; } html[data-theme="light"] .pv-theme-toggle .pv-icon-moon { display: none; } @media (prefers-reduced-motion: reduce) { .pv-theme-toggle { transition: none; } }