/* ============================================================================ Closyss CMS theme layer: "Peach Dawn" surfaces + "Garuda gold" brand. Loaded after Tailwind and after each shell's inline styles, so it remaps the utility classes the templates already use instead of editing every page. Light = (company setup uses html[data-theme]) Dark = anything else: warm charcoal surfaces, gold accents. ========================================================================== */ :root { --g-gold: #F2A51F; --g-orange: #E5731B; --g-ember: #C9471B; --g-deep: #9A3412; --g-ink: #3B2F24; --g-ink-soft: #6B5A4B; --g-peach: #FDF3EA; --g-peach-2: #FAE8D8; --g-cream: #FCFBF8; --g-line: #ECE8DF; --g-grad: linear-gradient(135deg, #F2A51F 0%, #E5731B 55%, #C9471B 100%); --g-grad-hover: linear-gradient(135deg, #E29717 0%, #D2650F 55%, #B23D15 100%); --g-ring: rgba(229, 115, 27, .35); --g-dawn: linear-gradient(180deg, #FDFCFA 0%, #FBFAF6 100%); /* dark */ --g-d-bg: #0F0C09; --g-d-surface: #171310; --g-d-surface-2: #1D1814; --g-d-surface-3: #26201A; --g-d-line: #2E2620; --g-d-line-strong: #3C332B; --g-d-text: #F3E9DC; --g-d-muted: #C8B6A4; --g-d-subtle: #9B8878; --g-d-hover: #221C17; --g-d-hover-2: #2B241E; } /* ── page surfaces ─────────────────────────────────────────────────────── */ html.theme-light:root body[data-shell="portal"] main { background: var(--g-dawn) !important; } body[data-shell] main > [class*="bg-slate-100"], body[data-shell] main > [class*="bg-gray-100"], body[data-shell] main > div > [class*="bg-slate-100"]:first-child { background: transparent !important; } html.theme-light .bg-slate-100, html.theme-light .bg-gray-100 { background-color: #F6F4EF !important; } html.theme-light body[data-shell="portal"] aside, html.theme-light body[data-shell="portal"] header { border-color: var(--g-line) !important; } /* ── primary buttons: the gold gradient ─────────────────────────────────── */ button.bg-slate-900, a.bg-slate-900, label.bg-slate-900, button.bg-black, a.bg-black, .bg-indigo-700, .bg-indigo-600, .bg-indigo-500, .bg-blue-700, .bg-blue-600, .bg-blue-500, .bg-sky-600, .lp-btn-primary, .hm-btn-primary, .ap-btn-primary, .sg-btn-primary, #submitBtn, .tf-btn, .plan.is-selected .plan-cta, .btn-primary { background: var(--g-grad) !important; background-color: var(--g-orange) !important; color: #fff !important; border-color: transparent !important; } button.bg-slate-900:hover, a.bg-slate-900:hover, button.bg-black:hover, a.bg-black:hover, .hover\:bg-black:hover, .hover\:bg-blue-600:hover, .hover\:bg-blue-700:hover, .hover\:bg-indigo-700:hover, .hover\:bg-indigo-800:hover, .bg-indigo-700:hover, .bg-indigo-600:hover, .bg-blue-700:hover, .bg-blue-600:hover, .bg-sky-600:hover, .lp-btn-primary:hover, .hm-btn-primary:hover, .ap-btn-primary:hover, .sg-btn-primary:hover, #submitBtn:hover:not(:disabled), .tf-btn:hover:not(:disabled) { background: var(--g-grad-hover) !important; background-color: var(--g-ember) !important; } #submitBtn:hover:not(:disabled) { box-shadow: 0 14px 28px -12px rgba(201, 71, 27, .8), 0 0 0 3px var(--g-ring) !important; } /* Tailwind gradient buttons (bg-gradient-to-* from-blue-* to-indigo-*) take the gold ramp */ [class*="from-blue-"], [class*="from-indigo-"], [class*="from-sky-"], [class*="from-cyan-"], [class*="from-violet-"] { --tw-gradient-from: #F2A51F !important; } [class*="via-blue-"], [class*="via-indigo-"], [class*="via-sky-"], [class*="via-cyan-"] { --tw-gradient-via: #E5731B !important; } [class*="to-blue-"], [class*="to-indigo-"], [class*="to-sky-"], [class*="to-cyan-"], [class*="to-violet-"], [class*="to-purple-"] { --tw-gradient-to: #C9471B !important; } /* dark surfaces that are not buttons become warm ink (table heads, badges, chips) */ thead.bg-slate-900, tr.bg-slate-900, th.bg-slate-900, span.bg-slate-900, div.bg-slate-900.rounded-full, span.bg-black { background-color: var(--g-ink) !important; } /* ── accent text, borders, rings, soft badges ──────────────────────────── */ .text-blue-600, .text-blue-700, .text-indigo-600, .text-indigo-700, .text-sky-600, .hover\:text-blue-600:hover, .hover\:text-indigo-600:hover { color: var(--g-ember) !important; } .text-blue-400, .text-blue-500, .text-indigo-400, .text-indigo-500, .text-sky-400, .text-sky-500 { color: var(--g-orange) !important; } html:not(.theme-light) .text-blue-400, html:not(.theme-light) .text-blue-500, html:not(.theme-light) .text-indigo-400, html:not(.theme-light) .text-indigo-500, html:not(.theme-light) .text-sky-400, html:not(.theme-light) .text-blue-600, html:not(.theme-light) .text-indigo-600 { color: var(--g-gold) !important; } .border-blue-400, .border-blue-500, .border-blue-600, .border-indigo-400, .border-indigo-500, .hover\:border-blue-500:hover { border-color: var(--g-orange) !important; } .focus\:border-blue-500:focus, .focus\:border-indigo-500:focus, .focus\:border-blue-600:focus { border-color: var(--g-orange) !important; } .focus\:ring-blue-500:focus, .focus\:ring-indigo-500:focus, .focus\:ring-blue-600:focus, .ring-blue-500, .ring-indigo-500 { --tw-ring-color: var(--g-ring) !important; box-shadow: 0 0 0 3px var(--g-ring) !important; } .bg-blue-50, .bg-indigo-50, .bg-sky-50 { background-color: var(--g-peach) !important; } .bg-blue-100, .bg-indigo-100, .bg-sky-100 { background-color: var(--g-peach-2) !important; } html:not(.theme-light) .bg-blue-50, html:not(.theme-light) .bg-indigo-50, html:not(.theme-light) .bg-blue-100, html:not(.theme-light) .bg-indigo-100 { background-color: rgba(242, 165, 31, .16) !important; } input[type="checkbox"], input[type="radio"] { accent-color: var(--g-orange); } ::selection { background: rgba(242, 165, 31, .35); } /* ── navigation (tokens from nav.css) ──────────────────────────────────── */ [data-menu-tree], .qn-home { --nv-accent: var(--g-ember); --nv-active-bg: var(--g-peach); --nv-hover: var(--g-sand); --nv-line: var(--g-line); } #app-subnav { --sn-accent: var(--g-ember); --sn-soft: var(--g-peach); --sn-hover: var(--g-sand); --sn-line: var(--g-line); } html:not(.theme-light) [data-menu-tree], html:not(.theme-light) .qn-home { --nv-text: #E9DCCB; --nv-muted: var(--g-d-muted); --nv-hover: var(--g-d-hover); --nv-active-bg: rgba(242, 165, 31, .16); --nv-accent: var(--g-gold); --nv-line: var(--g-d-line); --nv-chev: #8F7B6A; } html:not(.theme-light) #app-subnav { --sn-bg: var(--g-d-surface); --sn-line: var(--g-d-line); --sn-text: var(--g-d-text); --sn-muted: var(--g-d-muted); --sn-accent: var(--g-gold); --sn-soft: rgba(242, 165, 31, .16); --sn-hover: var(--g-d-hover); --sn-pop: var(--g-d-surface-2); } /* quick search palette */ #qn-input { border-color: var(--g-orange) !important; } #qn-head svg { color: var(--g-ember) !important; } #qn-list li.active { background: var(--g-peach) !important; color: var(--g-ember) !important; } #qn-list li.active .pr { color: var(--g-ember) !important; } /* ── tile view (landing) ───────────────────────────────────────────────── */ body #home { --hm-accent: var(--g-ember); --hm-line: var(--g-line); --hm-soft: var(--g-sand); --hm-soft-2: var(--g-sand-2); background: var(--g-dawn) !important; } #home .hm-tile .box { background: #FFFFFF !important; border-color: rgba(201, 71, 27, .10) !important; } #home .hm-ib.active { color: var(--g-ember) !important; background: var(--g-peach) !important; border-color: rgba(201, 71, 27, .35) !important; } #home .hm-ib:hover { color: var(--g-ember) !important; } .tb-avatar { background: var(--g-grad) !important; } #home .hm-search:hover { border-color: rgba(229, 115, 27, .45) !important; } #home .hm-search kbd { color: var(--g-ink-soft) !important; } #home .sm-link:hover, #home .sm-tg:hover { color: var(--g-ember) !important; } html:not(.theme-light) body #home { --hm-bg: var(--g-d-bg); --hm-surface: var(--g-d-surface); --hm-line: var(--g-d-line); --hm-soft: var(--g-d-hover); --hm-soft-2: var(--g-d-hover-2); --hm-text: var(--g-d-text); --hm-muted: var(--g-d-muted); --hm-accent: var(--g-gold); background: linear-gradient(180deg, #14100D 0%, #0F0C09 100%) !important; } html:not(.theme-light):not([data-theme="light"]) body { background: var(--g-d-bg) !important; } html:not(.theme-light) #home .hm-tile .box { background: #FBF4E8 !important; border-color: rgba(255, 255, 255, .08) !important; } html:not(.theme-light) #home .hm-tile .txt { color: #E9DCCB !important; } html:not(.theme-light) #home .hm-ib.active { background: rgba(242, 165, 31, .18) !important; color: var(--g-gold) !important; border-color: rgba(242, 165, 31, .4) !important; } /* ── Apps page ─────────────────────────────────────────────────────────── */ body #apps-page { --ap-bg: var(--g-cream); --ap-border: var(--g-line); --ap-border-strong: #E2CDB0; --ap-accent: var(--g-ember); --ap-accent-hover: var(--g-deep); --ap-btn: #F6F4EF; --ap-btn-hover: #EDEAE2; --ap-focus: var(--g-orange); --ap-text: var(--g-ink); } html:not(.theme-light) body #apps-page { --ap-bg: var(--g-d-bg); --ap-surface: var(--g-d-surface); --ap-border: var(--g-d-line); --ap-border-strong: var(--g-d-line-strong); --ap-text: var(--g-d-text); --ap-muted: var(--g-d-muted); --ap-subtle: var(--g-d-subtle); --ap-accent: var(--g-orange); --ap-accent-hover: var(--g-gold); --ap-btn: var(--g-d-surface-3); --ap-btn-hover: var(--g-d-hover-2); --ap-btn-text: var(--g-d-text); --ap-focus: var(--g-gold); } body #apps-page .ap-search { border-color: var(--ap-focus) !important; box-shadow: 0 0 0 3px rgba(229, 115, 27, .14) !important; } /* ── activation / subscription popup (subscription_guard.js tokens) ────── */ #sg-overlay { --sg-focus: var(--g-orange); --sg-accent: var(--g-ember); } html:not(.theme-light) #sg-overlay { --sg-surface: var(--g-d-surface); --sg-border: var(--g-d-line); --sg-text: var(--g-d-text); --sg-muted: var(--g-d-muted); --sg-subtle: var(--g-d-subtle); --sg-input-bg: #120E0B; --sg-input-border: var(--g-d-line-strong); --sg-focus: var(--g-gold); --sg-ghost-hover: var(--g-d-hover); } /* ── login page (its accent variables) ─────────────────────────────────── */ :root:has(#login-card) { --sky-deep: var(--g-ember); --sky-mid: var(--g-orange); --sky: var(--g-gold); --sky-soft: rgba(229, 115, 27, .28); --coral: var(--g-ember); --coral-soft: rgba(201, 71, 27, .16); } /* ── company setup wizard (its own tokens, html[data-theme]) ───────────── */ :root { --accent: var(--g-orange); --accent-soft: rgba(229, 115, 27, .14); --void: var(--g-cream); --surface-2: var(--g-sand-soft); --border: var(--g-line); --border-strong: #D8D0C2; --text: var(--g-ink); --text-muted: #5F4E3F; --text-dim: #8A7B6C; --btn-bg: var(--g-ember); --btn-hover: var(--g-deep); --ghost-hover: var(--g-peach); --toggle-bg: #FFFFFF; --shadow: 0 8px 24px -16px rgba(74, 59, 44, .25); } html[data-theme="dark"] { --accent: var(--g-gold); --accent-soft: rgba(242, 165, 31, .18); --void: var(--g-d-bg); --surface: var(--g-d-surface); --surface-2: var(--g-d-surface-2); --border: var(--g-d-line); --border-strong: var(--g-d-line-strong); --text: var(--g-d-text); --text-muted: var(--g-d-muted); --text-dim: var(--g-d-subtle); --btn-bg: var(--g-orange); --btn-hover: var(--g-ember); --ghost-hover: var(--g-d-hover); --input-bg: #120E0B; --input-ro-bg: #171310; --logo-bg: #FBF4E8; --toggle-bg: var(--g-d-surface); --shadow: 0 30px 60px -30px rgba(0, 0, 0, .7); } /* ── portal dark mode: warm charcoal instead of navy ───────────────────── */ html:root:not(.theme-light) { --portal-bg: var(--g-d-bg); --portal-surface: var(--g-d-surface); --portal-surface-2: var(--g-d-surface-2); --portal-surface-3: var(--g-d-surface-3); --portal-border: var(--g-d-line); --portal-border-strong: var(--g-d-line-strong); --portal-text: var(--g-d-text); --portal-text-muted: var(--g-d-muted); --portal-text-subtle: var(--g-d-subtle); --portal-input-bg: #120E0B; --portal-input-border: var(--g-d-line-strong); --portal-input-focus: var(--g-gold); --portal-dark-hover-bg-soft: var(--g-d-hover); --portal-dark-hover-bg-mid: var(--g-d-hover-2); --portal-dark-hover-bg-strong: #342B24; --portal-dark-hover-text: #FBF4E8; --portal-dark-hover-border: #4A3D33; --portal-dark-hover-border-strong: #5C4C40; --portal-dark-hover-blue: var(--g-gold); --portal-dark-hover-emerald-bg: rgba(47, 163, 107, .2); --portal-dark-hover-emerald-text: #8BE0B4; --portal-dark-hover-rose-bg: rgba(201, 71, 27, .22); --portal-dark-hover-rose-text: #FFB59A; } /* ── DVR shell ───────────────────────────────────────────────────────────── Its compiled stylesheet sets these with !important inside Tailwind's `utilities` cascade layer. Important declarations in an earlier layer win, so these overrides live in Tailwind's `theme` layer. */ @layer theme { html:not(.theme-light) body[data-shell="dvr"] { background: var(--g-d-bg) !important; } html:not(.theme-light) body[data-shell="dvr"] .glass-panel { background: rgba(23, 19, 16, .97) !important; border-color: var(--g-d-line) !important; } html:not(.theme-light) body[data-shell="dvr"] .bg-slate-950 { background-color: var(--g-d-bg) !important; } html:not(.theme-light) body[data-shell="dvr"] .bg-slate-900:not(button):not(a) { background-color: var(--g-d-surface) !important; } html:not(.theme-light) body[data-shell="dvr"] .bg-slate-800 { background-color: var(--g-d-surface-2) !important; } html:not(.theme-light) body[data-shell="dvr"] .bg-slate-700 { background-color: var(--g-d-surface-3) !important; } html:not(.theme-light) body[data-shell="dvr"] .hover\:bg-slate-800:hover, html:not(.theme-light) body[data-shell="dvr"] .hover\:bg-slate-700:hover { background-color: var(--g-d-hover-2) !important; } html:not(.theme-light) body[data-shell="dvr"] .border-slate-700, html:not(.theme-light) body[data-shell="dvr"] .border-slate-800, html:not(.theme-light) body[data-shell="dvr"] .border-slate-600, html:not(.theme-light) body[data-shell="dvr"] .divide-slate-700 > * { border-color: var(--g-d-line) !important; } html:not(.theme-light) body[data-shell="dvr"] .text-slate-300 { color: #D9CBB9 !important; } html:not(.theme-light) body[data-shell="dvr"] .text-slate-400 { color: var(--g-d-muted) !important; } html:not(.theme-light) body[data-shell="dvr"] .text-slate-500 { color: var(--g-d-subtle) !important; } html:not(.theme-light) body[data-shell="dvr"] input, html:not(.theme-light) body[data-shell="dvr"] select, html:not(.theme-light) body[data-shell="dvr"] textarea { border-color: var(--g-d-line-strong); } /* light: peach dawn page, white panels with warm lines */ html.theme-light body[data-shell="dvr"] { background: var(--g-dawn) !important; } html.theme-light body[data-shell="dvr"] #main-content .dvr-page-body { background: transparent !important; } html.theme-light body[data-shell="dvr"] .glass-panel, html.theme-light body[data-shell="dvr"] #side-nav, html.theme-light body[data-shell="dvr"] #main-content > header { background: rgba(255, 255, 255, .97) !important; border-color: var(--g-line) !important; box-shadow: 0 10px 24px rgba(74, 59, 44, .08) !important; } html.theme-light body[data-shell="dvr"] .sidebar-link.active { background: var(--g-peach) !important; color: var(--g-ember) !important; } html.theme-light body[data-shell="dvr"] .sidebar-link:hover { color: var(--g-ember) !important; } } /* ── footer: logo + copyright, the same everywhere ─────────────────────── */ .g1-foot { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 8px; font-size: 11px; font-weight: 500; letter-spacing: .01em; text-transform: none; line-height: 1.4; text-align: center; color: #8A7B6C; } .g1-foot img { height: 14px; width: auto; opacity: .85; } html:not(.theme-light) .g1-foot { color: var(--g-d-subtle); } html:not(.theme-light) .g1-foot img { opacity: .7; } /* ── scrollbars, focus outline ─────────────────────────────────────────── */ :focus-visible { outline-color: var(--g-orange); } .custom-scrollbar::-webkit-scrollbar-thumb { background: #E2CDB0; } html:not(.theme-light) .custom-scrollbar::-webkit-scrollbar-thumb { background: var(--g-d-line-strong); } /* ── icons: the small line icons and the Apps cards take the palette ─────── */ [data-menu-tree] svg [stroke="#1A6FC4"], #app-subnav svg [stroke="#1A6FC4"], #qn-list svg [stroke="#1A6FC4"], #home .sm-link svg [stroke="#1A6FC4"], .qn-home svg [stroke="#1A6FC4"] { stroke: var(--g-ember); } [data-menu-tree] svg [fill="#1A6FC4"], #app-subnav svg [fill="#1A6FC4"], #qn-list svg [fill="#1A6FC4"], #home .sm-link svg [fill="#1A6FC4"] { fill: var(--g-ember); } [data-menu-tree] svg [stroke="#F26A2E"], #app-subnav svg [stroke="#F26A2E"], #qn-list svg [stroke="#F26A2E"], #home .sm-link svg [stroke="#F26A2E"], .qn-home svg [stroke="#F26A2E"] { stroke: var(--g-gold); } [data-menu-tree] svg [fill="#F26A2E"], #app-subnav svg [fill="#F26A2E"], #qn-list svg [fill="#F26A2E"], #home .sm-link svg [fill="#F26A2E"], .qn-home svg [fill="#F26A2E"] { fill: var(--g-gold); } html:not(.theme-light) [data-menu-tree] svg [stroke="#1A6FC4"], html:not(.theme-light) #app-subnav svg [stroke="#1A6FC4"], html:not(.theme-light) #home .sm-link svg [stroke="#1A6FC4"], html:not(.theme-light) .qn-home svg [stroke="#1A6FC4"] { stroke: var(--g-gold); } html:not(.theme-light) [data-menu-tree] svg [fill="#1A6FC4"], html:not(.theme-light) #home .sm-link svg [fill="#1A6FC4"] { fill: var(--g-gold); } html:not(.theme-light) [data-menu-tree] svg [stroke="#F26A2E"], html:not(.theme-light) #app-subnav svg [stroke="#F26A2E"], html:not(.theme-light) .qn-home svg [stroke="#F26A2E"] { stroke: var(--g-orange); } /* Apps page cards */ #apps-page .app-icon svg [fill="#875A7B"], #apps-page .ap-card svg [fill="#875A7B"], #apps-page .ap-dialog svg [fill="#875A7B"] { fill: var(--g-ember); } #apps-page .ap-card svg [fill="#00A09D"], #apps-page .ap-dialog svg [fill="#00A09D"] { fill: var(--g-gold); } #apps-page .ap-card svg [fill="#1D6FA6"], #apps-page .ap-dialog svg [fill="#1D6FA6"] { fill: var(--g-orange); } #apps-page .ap-card svg [fill="#F5A623"], #apps-page .ap-dialog svg [fill="#F5A623"] { fill: var(--g-gold); } #apps-page .ap-card svg [fill="#E4405F"], #apps-page .ap-dialog svg [fill="#E4405F"] { fill: var(--g-deep); } #apps-page .ap-card svg [fill="#E9F5F5"], #apps-page .ap-dialog svg [fill="#E9F5F5"] { fill: var(--g-peach); } #apps-page .ap-card svg [stroke="#1D6FA6"], #apps-page .ap-dialog svg [stroke="#1D6FA6"] { stroke: var(--g-orange); } /* ── sand surfaces: tile view + in-app bars (light) ─────────────────────── */ :root { --g-sand: #F6F4EF; --g-sand-2: #F0EDE6; --g-sand-soft: #FEFDFB; --g-sand-line: #ECE8DF; } body #home .hm-bar { background: rgba(254, 253, 251, .96) !important; border-bottom-color: var(--g-sand-line) !important; } body #home .hm-ib, body #home .hm-search { background: var(--g-sand-soft) !important; border-color: var(--g-sand-line) !important; } body #home .hm-search kbd { background: #FFFFFF !important; border-color: var(--g-sand-line) !important; } body #home .hm-tile .box { background: linear-gradient(180deg, #FFFFFF 0%, #FAF8F3 100%) !important; border-color: rgba(201, 71, 27, .12) !important; box-shadow: 0 1px 2px rgba(74, 59, 44, .08), 0 8px 20px rgba(154, 52, 18, .12) !important; } body #home .hm-foot { border-top-color: var(--g-sand-line) !important; } html.theme-light body[data-shell="portal"] header, html.theme-light body[data-shell="portal"] aside { background: #FFFFFF !important; } html.theme-light body[data-shell] #app-subnav { --sn-bg: #FFFFFF; --sn-line: var(--g-sand-line); } html.theme-light .bg-slate-50, html.theme-light .bg-gray-50 { background-color: var(--g-sand-soft) !important; } html.theme-light .border-slate-200, html.theme-light .border-slate-300, html.theme-light .border-gray-200, html.theme-light .border-gray-300, html.theme-light .border-blue-100, html.theme-light .border-blue-200, html.theme-light .border-sky-100, html.theme-light .border-indigo-100 { border-color: var(--g-sand-line) !important; } html.theme-light .divide-slate-200 > * { border-color: var(--g-sand-line) !important; } html.theme-light .text-slate-500 { color: #7C6A58 !important; } /* dark: tile view bar + tiles stay warm */ html:not(.theme-light) body #home .hm-bar { background: rgba(23, 19, 16, .96) !important; border-bottom-color: var(--g-d-line) !important; } html:not(.theme-light) body #home .hm-ib, html:not(.theme-light) body #home .hm-search { background: var(--g-d-surface-3) !important; border-color: var(--g-d-line) !important; color: var(--g-d-text) !important; } html:not(.theme-light) body #home .hm-search kbd { background: #120E0B !important; border-color: var(--g-d-line-strong) !important; color: var(--g-d-muted) !important; } html:not(.theme-light) body #home .hm-tile .box { background: linear-gradient(180deg, #FBF7F0 0%, #EFE7DA 100%) !important; } /* ── DVR shell: light-theme tokens + opacity variants ──────────────────── */ html.theme-light body[data-shell="dvr"], html.theme-light { --lt-surface: rgba(255, 255, 255, .97); --lt-surface-elevated: rgba(255, 255, 255, .995); --lt-surface-soft: rgba(253, 252, 249, .95); --lt-surface-muted: rgba(247, 245, 240, .92); --lt-border: rgba(59, 47, 36, .12); --lt-border-soft: rgba(210, 200, 180, .5); --lt-border-strong: rgba(229, 115, 27, .42); --lt-shadow: 0 12px 26px rgba(74, 59, 44, .10); --lt-shadow-sm: 0 6px 16px rgba(74, 59, 44, .08); --lt-shadow-hover: 0 18px 32px rgba(229, 115, 27, .15); --lt-text-500: #7C6A58; --lt-text-600: #5F4E3F; --lt-text-700: #4A3B2C; --lt-text-800: #3B2F24; --lt-text-900: #2A2019; --lt-text-950: #1A130E; } @layer theme { html.theme-light body[data-shell="dvr"] .glass-panel, html.theme-light body[data-shell="dvr"] #side-nav, html.theme-light body[data-shell="dvr"] #main-content > header { background: rgba(254, 253, 251, .97) !important; } html.theme-light body[data-shell="dvr"] [class*="bg-white/"] { background-color: rgba(255, 253, 249, .8) !important; } html:not(.theme-light) body[data-shell="dvr"] [class*="bg-slate-950/"] { background-color: rgba(15, 12, 9, .75) !important; } html:not(.theme-light) body[data-shell="dvr"] [class*="bg-slate-900/"] { background-color: rgba(23, 19, 16, .78) !important; } html:not(.theme-light) body[data-shell="dvr"] [class*="bg-slate-800/"] { background-color: rgba(29, 24, 20, .78) !important; } html:not(.theme-light) body[data-shell="dvr"] [class*="bg-slate-700/"] { background-color: rgba(38, 32, 26, .75) !important; } html:not(.theme-light) body[data-shell="dvr"] [class*="border-slate-600/"], html:not(.theme-light) body[data-shell="dvr"] [class*="border-slate-700/"], html:not(.theme-light) body[data-shell="dvr"] [class*="border-slate-800/"] { border-color: rgba(60, 51, 43, .7) !important; } html:not(.theme-light) body[data-shell="dvr"] [class*="bg-blue-500/"], html:not(.theme-light) body[data-shell="dvr"] [class*="bg-blue-600/"], html:not(.theme-light) body[data-shell="dvr"] [class*="bg-indigo-500/"], html:not(.theme-light) body[data-shell="dvr"] [class*="bg-sky-500/"] { background-color: rgba(242, 165, 31, .18) !important; } html:not(.theme-light) body[data-shell="dvr"] [class*="border-blue-500/"], html:not(.theme-light) body[data-shell="dvr"] [class*="border-blue-400/"], html:not(.theme-light) body[data-shell="dvr"] [class*="border-sky-500/"], html:not(.theme-light) body[data-shell="dvr"] [class*="border-indigo-500/"] { border-color: rgba(242, 165, 31, .45) !important; } } /* portal dark: opacity variants of the navy utilities */ html:not(.theme-light) body[data-shell="portal"] [class*="bg-slate-900/"], html:not(.theme-light) body[data-shell="portal"] [class*="bg-slate-800/"] { background-color: rgba(29, 24, 20, .8) !important; } html:not(.theme-light) body[data-shell="portal"] [class*="bg-slate-950/"] { background-color: rgba(15, 12, 9, .8) !important; } /* ── light: translucent blue / slate tints used on cards and soft buttons ── */ html.theme-light [class*="bg-blue-50/"], html.theme-light [class*="bg-indigo-50/"], html.theme-light [class*="bg-sky-50/"], html.theme-light [class*="bg-slate-50/"], html.theme-light [class*="bg-slate-100/"], html.theme-light [class*="bg-gray-50/"] { background-color: rgba(253, 252, 249, .85) !important; } html.theme-light [class*="bg-blue-100/"], html.theme-light [class*="bg-blue-200/"], html.theme-light [class*="bg-sky-100/"], html.theme-light [class*="bg-indigo-100/"], html.theme-light .bg-blue-200, html.theme-light .bg-sky-200, html.theme-light .bg-indigo-200 { background-color: rgba(250, 236, 220, .8) !important; } html.theme-light [class*="border-blue-100/"], html.theme-light [class*="border-blue-200/"], html.theme-light [class*="border-blue-300/"], html.theme-light [class*="border-sky-200/"], html.theme-light [class*="border-slate-200/"], html.theme-light [class*="border-slate-300/"], html.theme-light .border-blue-300 { border-color: rgba(236, 232, 223, .95) !important; } html.theme-light [class*="text-blue-"], html.theme-light [class*="text-sky-"] { color: var(--g-ember) !important; } html.theme-light [class*="bg-slate-200/"], html.theme-light .bg-slate-200 { background-color: var(--g-sand) !important; } /* ── light: the DVR stylesheet repaints its dark opacity utilities in blue tints (layered !important); these take them to sand and gold instead ─────── */ @layer theme { html.theme-light body[data-shell] [class*="bg-slate-950/"], html.theme-light body[data-shell] [class*="bg-slate-900/"] { background-color: rgba(255, 255, 255, .92) !important; background-image: none !important; } html.theme-light body[data-shell] [class*="bg-slate-800/"], html.theme-light body[data-shell] [class*="bg-slate-700/"] { background-color: rgba(250, 248, 243, .9) !important; background-image: none !important; } html.theme-light body[data-shell] [class*="border-slate-600/"], html.theme-light body[data-shell] [class*="border-slate-700/"], html.theme-light body[data-shell] [class*="border-slate-800/"] { border-color: rgba(236, 232, 223, .95) !important; } html.theme-light body[data-shell] [class*="bg-blue-600/"], html.theme-light body[data-shell] [class*="bg-blue-500/"], html.theme-light body[data-shell] [class*="bg-blue-400/"], html.theme-light body[data-shell] [class*="bg-sky-500/"], html.theme-light body[data-shell] [class*="bg-indigo-500/"], html.theme-light body[data-shell] [class*="bg-indigo-600/"] { background-color: rgba(242, 165, 31, .16) !important; } html.theme-light body[data-shell] [class*="hover:bg-blue-600/"]:hover, html.theme-light body[data-shell] [class*="hover:bg-blue-500/"]:hover { background-color: rgba(242, 165, 31, .28) !important; } html.theme-light body[data-shell] [class*="border-blue-500/"], html.theme-light body[data-shell] [class*="border-blue-400/"], html.theme-light body[data-shell] [class*="border-sky-500/"], html.theme-light body[data-shell] [class*="border-indigo-500/"] { border-color: rgba(229, 115, 27, .45) !important; } html.theme-light body[data-shell] [class*="text-blue-"], html.theme-light body[data-shell] [class*="text-sky-"], html.theme-light body[data-shell] [class*="text-indigo-"] { color: var(--g-ember) !important; } html.theme-light body[data-shell] [class*="bg-white/"] { background-color: rgba(255, 255, 255, .85) !important; background-image: none !important; } html.theme-light body[data-shell] .bg-slate-900:not(button):not(a):not(label):not(thead):not(tr):not(th):not(span):not(.rounded-full), html.theme-light body[data-shell] .bg-slate-800:not(button):not(a):not(span), html.theme-light body[data-shell] .bg-slate-950:not(button):not(a) { background-color: #FFFFFF !important; background-image: none !important; } /* ── light, portal and DVR shells: the "ink" utilities (bg-slate-900 text-white) become sand surfaces with ink text; only real buttons keep white-on-gradient ── */ html.theme-light body[data-shell] thead.bg-slate-900, html.theme-light body[data-shell] tr.bg-slate-900, html.theme-light body[data-shell] th.bg-slate-900, html.theme-light body[data-shell] thead.bg-slate-800, html.theme-light body[data-shell] tr.bg-slate-800, html.theme-light body[data-shell] th.bg-slate-800, html.theme-light body[data-shell] thead[class*="bg-slate-900/"], html.theme-light body[data-shell] tr[class*="bg-slate-900/"], html.theme-light body[data-shell] th[class*="bg-slate-900/"], html.theme-light body[data-shell] thead[class*="bg-slate-800/"], html.theme-light body[data-shell] tr[class*="bg-slate-800/"], html.theme-light body[data-shell] th[class*="bg-slate-800/"] { background-color: var(--g-sand) !important; color: var(--g-ink) !important; border-color: var(--g-sand-line) !important; } html.theme-light body[data-shell] span.bg-slate-900, html.theme-light body[data-shell] span.bg-black, html.theme-light body[data-shell] span.bg-slate-800, html.theme-light body[data-shell] div.bg-slate-900.rounded-full, html.theme-light body[data-shell] div.bg-slate-900.rounded-2xl, html.theme-light body[data-shell] div.bg-slate-900.rounded-xl { background-color: var(--g-peach) !important; color: var(--g-ember) !important; } html.theme-light body[data-shell] .text-white, html.theme-light body[data-shell] .text-slate-50, html.theme-light body[data-shell] .text-slate-100, html.theme-light body[data-shell] .text-slate-200, html.theme-light body[data-shell] .text-gray-100, html.theme-light body[data-shell] .text-gray-200 { color: var(--g-ink) !important; } html.theme-light body[data-shell] .text-slate-300, html.theme-light body[data-shell] .text-gray-300, html.theme-light body[data-shell] .text-slate-400 { color: #7C6A58 !important; } html.theme-light body[data-shell] span.bg-slate-900.text-white, html.theme-light body[data-shell] span.bg-black.text-white, html.theme-light body[data-shell] span.bg-slate-800.text-white { color: var(--g-ember) !important; } /* real buttons and coloured chips keep white text */ html.theme-light body[data-shell] button.bg-slate-900, html.theme-light body[data-shell] a.bg-slate-900, html.theme-light body[data-shell] label.bg-slate-900, html.theme-light body[data-shell] button.bg-black, html.theme-light body[data-shell] a.bg-black, html.theme-light body[data-shell] button.bg-slate-800, html.theme-light body[data-shell] a.bg-slate-800, html.theme-light body[data-shell] button.bg-slate-900 *, html.theme-light body[data-shell] a.bg-slate-900 *, html.theme-light body[data-shell] label.bg-slate-900 *, html.theme-light body[data-shell] button.bg-black *, html.theme-light body[data-shell] a.bg-black *, html.theme-light body[data-shell] [class*="bg-gradient"].text-white, html.theme-light body[data-shell] [class*="bg-gradient"] .text-white, html.theme-light body[data-shell] [class*="bg-emerald-"].text-white, html.theme-light body[data-shell] [class*="bg-rose-"].text-white, html.theme-light body[data-shell] [class*="bg-red-"].text-white, html.theme-light body[data-shell] [class*="bg-green-"].text-white, html.theme-light body[data-shell] [class*="bg-amber-"].text-white, html.theme-light body[data-shell] [class*="bg-orange-"].text-white, html.theme-light body[data-shell] [class*="bg-blue-"].text-white, html.theme-light body[data-shell] [class*="bg-indigo-"].text-white, html.theme-light body[data-shell] [class*="bg-sky-"].text-white, html.theme-light body[data-shell] [class*="bg-cyan-"].text-white, html.theme-light body[data-shell] [class*="bg-teal-"].text-white, html.theme-light body[data-shell] [class*="bg-violet-"].text-white, html.theme-light body[data-shell] [class*="bg-purple-"].text-white, html.theme-light body[data-shell] [class*="bg-pink-"].text-white, html.theme-light body[data-shell] [class*="bg-fuchsia-"].text-white, html.theme-light body[data-shell] [class*="bg-yellow-"].text-white, html.theme-light body[data-shell] [class*="bg-lime-"].text-white, html.theme-light body[data-shell] [class*="bg-gradient"] *, html.theme-light body[data-shell] .hm-btn-primary, html.theme-light body[data-shell] .ap-btn-primary { color: #FFFFFF !important; } html.theme-light body[data-shell] button.bg-slate-800, html.theme-light body[data-shell] a.bg-slate-800 { background: var(--g-grad) !important; } html.theme-light body[data-shell] .hover\:bg-slate-900:hover, html.theme-light body[data-shell] .hover\:bg-black:hover, html.theme-light body[data-shell] .hover\:bg-slate-800:hover { background: var(--g-grad) !important; background-color: var(--g-orange) !important; color: #FFFFFF !important; border-color: transparent !important; } html.theme-light body[data-shell] .hover\:bg-slate-900:hover *, html.theme-light body[data-shell] .hover\:bg-black:hover *, html.theme-light body[data-shell] .hover\:bg-slate-800:hover * { color: #FFFFFF !important; } html.theme-light body[data-shell] .hover\:bg-slate-100:hover, html.theme-light body[data-shell] .hover\:bg-slate-50:hover, html.theme-light body[data-shell] .hover\:bg-gray-100:hover { background-color: var(--g-sand) !important; } html.theme-light body[data-shell] select, html.theme-light body[data-shell] input:not([type="checkbox"]):not([type="radio"]), html.theme-light body[data-shell] textarea { color: var(--g-ink); } /* light: mid-slate secondary buttons become sand buttons with ink text */ html.theme-light body[data-shell] button.bg-slate-700, html.theme-light body[data-shell] a.bg-slate-700, html.theme-light body[data-shell] button.bg-slate-600, html.theme-light body[data-shell] a.bg-slate-600, html.theme-light body[data-shell] label.bg-slate-700, html.theme-light body[data-shell] label.bg-slate-600 { background-color: var(--g-sand) !important; background-image: none !important; color: var(--g-ink) !important; border: 1px solid var(--g-sand-line) !important; } html.theme-light body[data-shell] button.bg-slate-700 *, html.theme-light body[data-shell] a.bg-slate-700 *, html.theme-light body[data-shell] button.bg-slate-600 *, html.theme-light body[data-shell] a.bg-slate-600 * { color: var(--g-ink) !important; } html.theme-light body[data-shell] .hover\:bg-slate-600:hover, html.theme-light body[data-shell] .hover\:bg-slate-700:hover { background-color: var(--g-sand-2) !important; color: var(--g-ink) !important; } /* dark, portal shell: the same ink utilities become warm surfaces */ html:not(.theme-light) body[data-shell="portal"] thead.bg-slate-900, html:not(.theme-light) body[data-shell="portal"] tr.bg-slate-900, html:not(.theme-light) body[data-shell="portal"] th.bg-slate-900 { background-color: var(--g-d-surface-3) !important; color: var(--g-d-text) !important; border-color: var(--g-d-line-strong) !important; } html:not(.theme-light) body[data-shell="portal"] span.bg-slate-900, html:not(.theme-light) body[data-shell="portal"] span.bg-black { background-color: rgba(242, 165, 31, .18) !important; color: var(--g-gold) !important; } } /* ── Language switcher (lang_switch.js): flag button + list ──────────────── */ .lg-switch { position: relative; display: inline-flex; flex: none; --lg-bg: #f1f5f9; --lg-line: #e2e8f0; --lg-fg: #475569; --lg-accent: #0f172a; --lg-menu: #fff; --lg-hover: #f1f5f9; --lg-sel: #e8f1fb; } html:not(.theme-light) .lg-switch { --lg-bg: #1e293b; --lg-line: #334155; --lg-fg: #cbd5e1; --lg-accent: #fff; --lg-menu: #0f172a; --lg-hover: #1e293b; --lg-sel: rgba(59, 130, 246, .22); } .lg-btn { display: inline-flex; align-items: center; gap: 3px; height: 36px; padding: 0 7px 0 10px; border-radius: 999px; border: 1px solid var(--lg-line); background: var(--lg-bg); color: var(--lg-fg); cursor: pointer; transition: color .15s, border-color .15s; } .lg-btn:hover { color: var(--lg-accent); } .lg-code { display: inline-block; min-width: 24px; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; line-height: 1; flex: none; } .lg-menu .lg-code { min-width: 30px; padding: 3px 5px; border-radius: 6px; background: var(--lg-hover); font-size: 10.5px; text-align: center; } .lg-menu li[aria-selected="true"] .lg-code { background: rgba(0, 0, 0, .06); } .lg-chev { width: 13px; height: 13px; } .lg-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 180px; margin: 0; padding: 6px; list-style: none; background: var(--lg-menu); border: 1px solid var(--lg-line); border-radius: 14px; box-shadow: 0 18px 40px rgba(15, 23, 42, .18); z-index: 90; max-height: min(60vh, 420px); overflow: auto; text-align: left; } .lg-menu[hidden] { display: none; } .lg-menu li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--lg-fg); cursor: pointer; white-space: nowrap; } .lg-menu li:hover { background: var(--lg-hover); color: var(--lg-accent); } .lg-menu li[aria-selected="true"] { background: var(--lg-sel); color: var(--lg-accent); } /* Garuda palette, matching the other icon buttons */ body .lg-switch { --lg-bg: var(--g-sand-soft); --lg-line: var(--g-sand-line); --lg-accent: var(--g-ember); --lg-sel: var(--g-peach); } html:not(.theme-light) body .lg-switch { --lg-bg: var(--g-d-surface-2); --lg-line: var(--g-d-line); --lg-accent: var(--g-gold); --lg-menu: var(--g-d-surface); --lg-hover: var(--g-d-surface-2); --lg-sel: rgba(242, 165, 31, .18); } #home .lg-btn { height: 42px; border-radius: 12px; } /* the Google element stays out of sight; only our menu is visible */ .lg-gte, .goog-te-banner-frame, body > .skiptranslate, #goog-gt-tt, .goog-te-balloon-frame, .goog-tooltip, .goog-tooltip:hover { display: none !important; } body { top: 0 !important; } .goog-text-highlight { background: none !important; box-shadow: none !important; } /* ── Top-bar controls shared by landing, portal and DVR (top_bar.js): customer filter + account menu ── */ .tb-right { display: flex; align-items: center; gap: 10px; margin-left: auto; flex: none; } .tb-cust, .tb-acct { position: relative; display: inline-flex; align-items: center; flex: none; --tb-h: 36px; --tb-r: 999px; --tb-line: var(--g-sand-line, #e2e8f0); --tb-soft: var(--g-sand-soft, #f1f5f9); --tb-surface: #fff; --tb-text: #334155; --tb-muted: #64748b; --tb-accent: var(--g-ember, #0f172a); --tb-sel: var(--g-peach, #e8f1fb); --tb-hover: #f1f5f9; } html:not(.theme-light) .tb-cust, html:not(.theme-light) .tb-acct { --tb-line: var(--g-d-line, #334155); --tb-soft: var(--g-d-surface-2, #1e293b); --tb-surface: var(--g-d-surface, #0f172a); --tb-text: #cbd5e1; --tb-muted: #94a3b8; --tb-accent: var(--g-gold, #fff); --tb-sel: rgba(242, 165, 31, .18); --tb-hover: var(--g-d-surface-2, #1e293b); } #home .tb-cust, #home .tb-acct { --tb-h: 42px; --tb-r: 12px; } .tb-cust-btn { display: inline-flex; align-items: center; gap: 7px; height: var(--tb-h); padding: 0 10px 0 12px; border-radius: var(--tb-r); border: 1px solid var(--tb-line); background: var(--tb-soft); color: var(--tb-text); font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; max-width: 200px; } .tb-cust-btn svg { width: 15px; height: 15px; flex: none; color: var(--tb-muted); } .tb-cust-btn svg.cv { width: 13px; height: 13px; } .tb-cust-btn:hover, .tb-cust.on .tb-cust-btn { color: var(--tb-accent); } .tb-cust.on .tb-cust-btn { background: var(--tb-sel); border-color: rgba(201, 71, 27, .35); } .tb-cust-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tb-cust-menu, .tb-menu { position: absolute; right: 0; top: calc(100% + 8px); margin: 0; padding: 6px; list-style: none; background: var(--tb-surface); border: 1px solid var(--tb-line); border-radius: 14px; box-shadow: 0 18px 40px rgba(15, 23, 42, .18); z-index: 90; text-align: left; } .tb-cust-menu { min-width: 200px; max-width: 320px; max-height: min(60vh, 380px); overflow: auto; } .tb-cust-menu[hidden], .tb-menu[hidden] { display: none; } .tb-cust-menu li { padding: 8px 10px; border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--tb-text); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tb-cust-menu li:hover { background: var(--tb-hover); color: var(--tb-accent); } .tb-cust-menu li[aria-selected="true"] { background: var(--tb-sel); color: var(--tb-accent); } .tb-cust-menu li.empty { color: var(--tb-muted); cursor: default; font-weight: 500; } .tb-avatar { width: var(--tb-h); height: var(--tb-h); padding: 0; border-radius: 999px; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-family: inherit; font-size: 14px; font-weight: 800; text-transform: uppercase; border: 2px solid var(--tb-surface); box-shadow: 0 0 0 1px var(--tb-line); flex: none; cursor: pointer; line-height: 1; } .tb-acct.on .tb-avatar { box-shadow: 0 0 0 3px rgba(229, 115, 27, .35); } .tb-menu { min-width: 210px; } .tb-menu-who { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--tb-line); line-height: 1.2; } .tb-menu-who b { font-size: 13px; font-weight: 700; color: var(--tb-text); } .tb-menu-who small { font-size: 11px; color: var(--tb-muted); } .tb-menu a, .tb-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 9px; background: transparent; color: var(--tb-text); font-family: inherit; font-size: 13px; font-weight: 600; text-decoration: none; text-align: left; cursor: pointer; white-space: nowrap; text-transform: none; letter-spacing: 0; line-height: 1.2; } .tb-menu a:hover, .tb-menu button:hover { background: var(--tb-hover); color: var(--tb-accent); } .tb-menu a.danger:hover { background: #fdecec; color: #b42318; } .tb-menu svg { width: 17px; height: 17px; flex: none; color: var(--tb-muted); } .tb-menu a:hover svg, .tb-menu button:hover svg { color: inherit; } .tb-menu hr { border: 0; border-top: 1px solid var(--tb-line); margin: 4px 0; } /* the theme item names the mode it switches to */ .tb-menu .i-sun, .tb-menu .t-light { display: none; } html:not(.theme-light) .tb-menu .i-sun, html:not(.theme-light) .tb-menu .t-light { display: inline-block; } html:not(.theme-light) .tb-menu .i-moon, html:not(.theme-light) .tb-menu .t-dark { display: none; } @media (max-width: 767px) { .tb-cust { display: none; } } /* ── Fields with an icon sitting on top of them ────────────────────────────── A search box draws its icon as an absolutely positioned element over the field and reserves room for it with a Tailwind padding utility. Several pages then style their own field class with the `padding` shorthand, which resets that reservation, and the placeholder ends up underneath the icon (VAPT-era example: #data-import-page .di-input). This file is the last stylesheet on every page, so these declarations restore the reservation wherever it was asked for. They touch only the side the utility names, and only elements that already carry it. */ input.pl-8, select.pl-8, textarea.pl-8 { padding-left: calc(var(--spacing, .25rem) * 8) !important; } input.pl-9, select.pl-9, textarea.pl-9 { padding-left: calc(var(--spacing, .25rem) * 9) !important; } input.pl-10, select.pl-10, textarea.pl-10 { padding-left: calc(var(--spacing, .25rem) * 10) !important; } input.pl-11, select.pl-11, textarea.pl-11 { padding-left: calc(var(--spacing, .25rem) * 11) !important; } input.pl-12, select.pl-12, textarea.pl-12 { padding-left: calc(var(--spacing, .25rem) * 12) !important; } input.pl-14, select.pl-14, textarea.pl-14 { padding-left: calc(var(--spacing, .25rem) * 14) !important; } input.pr-7, select.pr-7, textarea.pr-7 { padding-right: calc(var(--spacing, .25rem) * 7) !important; } input.pr-8, select.pr-8, textarea.pr-8 { padding-right: calc(var(--spacing, .25rem) * 8) !important; } input.pr-9, select.pr-9, textarea.pr-9 { padding-right: calc(var(--spacing, .25rem) * 9) !important; } input.pr-10, select.pr-10, textarea.pr-10 { padding-right: calc(var(--spacing, .25rem) * 10) !important; } input.pr-11, select.pr-11, textarea.pr-11 { padding-right: calc(var(--spacing, .25rem) * 11) !important; } input.pr-12, select.pr-12, textarea.pr-12 { padding-right: calc(var(--spacing, .25rem) * 12) !important; }