@import "tailwindcss"; /* All @import rules must precede @plugin/@source — a late @import is invalid * per the CSS spec and lightningcss (Tailwind v4) silently drops it. */ @import "./tours.css"; @plugin "tailwindcss-animate"; @plugin "@tailwindcss/typography"; @source "../node_modules/streamdown/dist/*.js"; @custom-variant dark (&:where(.dark, .dark *)); /* Pushed page/panel content resolves responsive variants against its marked * width container. Everything else — notably body portals and fixed overlays * — keeps normal viewport media queries, so body never becomes a containing * block for fixed positioning. Widths match Tailwind's defaults. */ @custom-variant sm { @media (width >= 40rem) { &:where(:not([data-responsive-container] *)) { @slot; } } @container (width >= 40rem) { &:where([data-responsive-container] *) { @slot; } } } @custom-variant md { @media (width >= 48rem) { &:where(:not([data-responsive-container] *)) { @slot; } } @container (width >= 48rem) { &:where([data-responsive-container] *) { @slot; } } } @custom-variant lg { @media (width >= 64rem) { &:where(:not([data-responsive-container] *)) { @slot; } } @container (width >= 64rem) { &:where([data-responsive-container] *) { @slot; } } } @custom-variant xl { @media (width >= 80rem) { &:where(:not([data-responsive-container] *)) { @slot; } } @container (width >= 80rem) { &:where([data-responsive-container] *) { @slot; } } } @custom-variant 2xl { @media (width >= 96rem) { &:where(:not([data-responsive-container] *)) { @slot; } } @container (width >= 96rem) { &:where([data-responsive-container] *) { @slot; } } } /* Fonts are provided by next/font as CSS variables on ; `inline` avoids * emitting a circular --font-sans: var(--font-sans) declaration on :root. */ @theme inline { --font-sans: var(--font-sans); --font-mono: var(--font-mono); } /* ===== LIGHT THEME (ROOT) ===== */ :root { /* Button Colors */ --bg-button-primary: var(--color-emerald-300); --bg-button-primary-hover: var(--color-teal-200); --bg-button-primary-press: var(--color-emerald-400); --bg-button-secondary: var(--color-slate-950); --bg-button-secondary-press: var(--color-slate-800); --bg-button-tertiary: var(--color-blue-600); --bg-button-tertiary-hover: var(--color-blue-500); --bg-button-tertiary-active: var(--color-indigo-600); --bg-button-disabled: var(--color-neutral-300); /* Radar Map */ --bg-radar-map: #b51c8033; --bg-radar-button: #b51c80; /* Neutral Map */ --bg-neutral-map: var(--color-neutral-300); /* Input Colors */ --bg-input-primary: var(--color-white); --border-input-primary: var(--color-slate-400); --border-input-primary-press: var(--color-slate-700); --border-input-primary-pressed: #a7f3d0; --border-input-primary-fill: var(--color-slate-500); /* Text Colors */ --text-neutral-primary: var(--color-slate-950); --text-neutral-secondary: var(--color-zinc-800); --text-neutral-tertiary: var(--color-zinc-500); --text-error-primary: var(--color-red-600); --text-warning-primary: var(--color-orange-500); --text-success-primary: var(--color-green-600); /* Border Colors */ --border-error-primary: var(--color-red-500); --border-neutral-primary: var(--color-neutral-200); --border-neutral-secondary: var(--color-slate-200); --border-neutral-tertiary: var(--color-slate-300); --border-tag-primary: var(--color-gray-400); --border-data-emphasis: rgba(0, 0, 0, 0.1); /* Background Colors */ --bg-neutral-primary: #fdfdfd; --bg-neutral-secondary: var(--color-white); --bg-neutral-tertiary: #fbfdfd; --bg-tag-primary: var(--color-slate-50); --bg-pass-primary: var(--color-emerald-400); --bg-pass-secondary: var(--color-emerald-50); --bg-warning-primary: var(--color-orange-500); --bg-warning-secondary: var(--color-orange-50); --bg-fail-primary: var(--color-rose-500); --bg-fail-secondary: var(--color-rose-50); /* Data Background Colors */ --bg-data-azure: var(--color-sky-400); --bg-data-kubernetes: var(--color-indigo-600); --bg-data-aws: var(--color-amber-500); --bg-data-gcp: var(--color-red-500); --bg-data-m365: var(--color-green-400); --bg-data-github: var(--color-slate-950); /* Severity Colors */ --bg-data-critical: #ff006a; --bg-data-high: #f77852; --bg-data-medium: #fdd34f; --bg-data-low: #f5f3ce; --bg-data-info: #3c8dff; --bg-data-muted: var(--color-neutral-500); /* Chart Dots */ --chart-dots: var(--color-neutral-200); /* Progress Bar */ --shadow-progress-glow: 0 0 10px var(--bg-button-primary), 0 0 5px var(--bg-button-primary); /* App sidebar */ --bg-sidebar-active: rgba(255, 255, 255, 0.78); --bg-sidebar-hover: rgba(255, 255, 255, 0.55); --bg-sidebar-subitem-active: rgba(16, 185, 129, 0.1); --bg-sidebar-toggle: rgba(255, 255, 255, 0.4); --border-sidebar-active: rgba(15, 23, 42, 0.09); --border-sidebar-hover: rgba(15, 23, 42, 0.06); --border-sidebar-guide: rgba(15, 23, 42, 0.12); --border-sidebar-toggle: rgba(15, 23, 42, 0.08); --sidebar-active-bar: var(--color-emerald-400); --sidebar-active-icon: var(--color-emerald-600); --shadow-sidebar-active: 0 8px 24px rgba(15, 23, 42, 0.06); --gradient-sidebar-halo: radial-gradient( circle, rgba(46, 229, 155, 0.14) 0%, rgba(98, 223, 240, 0.06) 42%, transparent 72% ); /* Lighthouse AI */ --gradient-lighthouse: linear-gradient(96deg, #2ee59b 3.55%, #62dff0 98.85%); /* Cloud feature badge */ --gradient-feature-cloud: linear-gradient( 112deg, rgb(46, 229, 155) 3.5%, rgb(98, 223, 240) 98.8% ); --bg-feature-new: var(--color-emerald-500); --text-feature-new: var(--color-white); } /* ===== DARK THEME ===== * Editorial contrast tweaks: pure-black canvas, pure-white primary text, * and one tier brighter primary border for clearer element separation. */ .dark { /* Button Colors */ --bg-button-primary: var(--color-emerald-300); --bg-button-primary-hover: var(--color-teal-200); --bg-button-primary-press: var(--color-emerald-400); --bg-button-secondary: var(--color-white); --bg-button-secondary-press: var(--color-emerald-100); --bg-button-tertiary: var(--color-blue-300); --bg-button-tertiary-hover: var(--color-blue-400); --bg-button-tertiary-active: var(--color-blue-600); --bg-button-disabled: var(--color-neutral-700); /* Neutral Map */ --bg-neutral-map: var(--color-gray-800); /* Input Colors */ --bg-input-primary: #111111; --border-input-primary: var(--color-zinc-700); --border-input-primary-press: var(--color-zinc-500); --border-input-primary-pressed: #a7f3d0; --border-input-primary-fill: var(--color-zinc-200); /* Text Colors */ --text-neutral-primary: #ffffff; --text-neutral-secondary: var(--color-zinc-200); --text-neutral-tertiary: var(--color-zinc-400); --text-error-primary: var(--color-red-400); --text-warning-primary: var(--color-orange-400); --text-success-primary: var(--color-green-500); /* Border Colors */ --border-error-primary: var(--color-red-400); --border-neutral-primary: var(--color-zinc-700); --border-neutral-secondary: var(--color-zinc-800); --border-neutral-tertiary: var(--color-zinc-700); --border-tag-primary: var(--color-slate-700); --border-data-emphasis: rgba(255, 255, 255, 0.14); /* Background Colors */ --bg-neutral-primary: #000000; --bg-neutral-secondary: var(--color-stone-950); --bg-neutral-tertiary: #121110; --bg-tag-primary: var(--color-slate-950); --bg-pass-primary: var(--color-green-400); --bg-pass-secondary: var(--color-emerald-900); --bg-warning-primary: var(--color-orange-400); --bg-warning-secondary: var(--color-orange-900); --bg-fail-primary: var(--color-rose-500); --bg-fail-secondary: #432232; /* Data Background Colors */ --bg-data-azure: var(--color-sky-400); --bg-data-kubernetes: var(--color-indigo-600); --bg-data-aws: var(--color-amber-500); --bg-data-gcp: var(--color-red-500); --bg-data-m365: var(--color-green-400); --bg-data-github: var(--color-neutral-100); /* Severity Colors */ --bg-data-critical: #ff006a; --bg-data-high: #f77852; --bg-data-medium: #fec94d; --bg-data-low: #fdfbd4; --bg-data-info: #3c8dff; --bg-data-muted: var(--color-neutral-500); /* Chart Dots */ --chart-dots: var(--text-neutral-primary); /* Progress Bar */ --shadow-progress-glow: 0 0 10px var(--bg-button-primary), 0 0 5px var(--bg-button-primary); /* App sidebar */ --bg-sidebar-active: rgba(255, 255, 255, 0.06); --bg-sidebar-hover: rgba(255, 255, 255, 0.045); --bg-sidebar-subitem-active: rgba(46, 229, 155, 0.09); --bg-sidebar-toggle: rgba(255, 255, 255, 0.025); --border-sidebar-active: rgba(255, 255, 255, 0.11); --border-sidebar-hover: rgba(255, 255, 255, 0.07); --border-sidebar-guide: rgba(255, 255, 255, 0.1); --border-sidebar-toggle: rgba(255, 255, 255, 0.08); --sidebar-active-bar: var(--color-emerald-300); --sidebar-active-icon: var(--color-emerald-300); --shadow-sidebar-active: 0 10px 28px rgba(0, 0, 0, 0.22); --gradient-sidebar-halo: radial-gradient( circle, rgba(46, 229, 155, 0.16) 0%, rgba(98, 223, 240, 0.07) 40%, transparent 72% ); } /* ===== TAILWIND THEME MAPPINGS ===== */ @theme { /* Data Background Colors */ --color-bg-data-azure: var(--bg-data-azure); --color-bg-data-kubernetes: var(--bg-data-kubernetes); --color-bg-data-aws: var(--bg-data-aws); --color-bg-data-gcp: var(--bg-data-gcp); --color-bg-data-m365: var(--bg-data-m365); --color-bg-data-github: var(--bg-data-github); --color-bg-data-critical: var(--bg-data-critical); --color-bg-data-high: var(--bg-data-high); --color-bg-data-medium: var(--bg-data-medium); --color-bg-data-low: var(--bg-data-low); --color-bg-data-info: var(--bg-data-info); --color-bg-data-muted: var(--bg-data-muted); /* Button Colors */ --color-button-primary: var(--bg-button-primary); --color-button-primary-hover: var(--bg-button-primary-hover); --color-button-primary-press: var(--bg-button-primary-press); --color-button-secondary: var(--bg-button-secondary); --color-button-secondary-press: var(--bg-button-secondary-press); --color-button-tertiary: var(--bg-button-tertiary); --color-button-tertiary-hover: var(--bg-button-tertiary-hover); --color-button-tertiary-active: var(--bg-button-tertiary-active); --color-button-disabled: var(--bg-button-disabled); /* Input Colors */ --color-bg-input-primary: var(--bg-input-primary); --color-border-input-primary: var(--border-input-primary); --color-border-input-primary-press: var(--border-input-primary-press); --color-border-input-primary-pressed: var(--border-input-primary-pressed); --color-border-input-primary-fill: var(--border-input-primary-fill); /* Neutral Map Colors */ --color-bg-neutral-map: var(--bg-neutral-map); /* Success Colors */ --color-text-success: var(--text-success-primary); /* Border Colors */ --color-border-error: var(--border-error-primary); --color-border-neutral-primary: var(--border-neutral-primary); --color-border-neutral-secondary: var(--border-neutral-secondary); --color-border-neutral-tertiary: var(--border-neutral-tertiary); --color-border-tag: var(--border-tag-primary); --color-border-data-emphasis: var(--border-data-emphasis); /* Text Colors */ --color-text-neutral-primary: var(--text-neutral-primary); --color-text-neutral-secondary: var(--text-neutral-secondary); --color-text-neutral-tertiary: var(--text-neutral-tertiary); --color-text-error-primary: var(--text-error-primary); --color-text-warning-primary: var(--text-warning-primary); --color-text-success-primary: var(--text-success-primary); /* Background Colors */ --color-bg-neutral-primary: var(--bg-neutral-primary); --color-bg-neutral-secondary: var(--bg-neutral-secondary); --color-bg-neutral-tertiary: var(--bg-neutral-tertiary); --color-bg-tag: var(--bg-tag-primary); --color-bg-pass: var(--bg-pass-primary); --color-bg-pass-secondary: var(--bg-pass-secondary); --color-bg-warning: var(--bg-warning-primary); --color-bg-warning-secondary: var(--bg-warning-secondary); --color-bg-fail: var(--bg-fail-primary); --color-bg-fail-secondary: var(--bg-fail-secondary); --color-bg-feature-new: var(--bg-feature-new); --color-text-feature-new: var(--text-feature-new); /* App sidebar */ --color-bg-sidebar-active: var(--bg-sidebar-active); --color-bg-sidebar-hover: var(--bg-sidebar-hover); --color-bg-sidebar-subitem-active: var(--bg-sidebar-subitem-active); --color-bg-sidebar-toggle: var(--bg-sidebar-toggle); --color-border-sidebar-active: var(--border-sidebar-active); --color-border-sidebar-hover: var(--border-sidebar-hover); --color-border-sidebar-guide: var(--border-sidebar-guide); --color-border-sidebar-toggle: var(--border-sidebar-toggle); --color-sidebar-active-bar: var(--sidebar-active-bar); --color-sidebar-active-icon: var(--sidebar-active-icon); /* Shadows */ --shadow-progress-glow: var(--shadow-progress-glow); --shadow-sidebar-active: var(--shadow-sidebar-active); /* Background images */ --background-image-feature-cloud: var(--gradient-feature-cloud); /* Breakpoints */ --breakpoint-3xl: 1920px; /* Animations */ --animate-fade-in: fade-in 200ms ease-out forwards; --animate-collapsible-down: collapsible-down 0.2s ease-out; --animate-collapsible-up: collapsible-up 0.2s ease-out; @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes collapsible-down { from { height: 0; } to { height: var(--radix-collapsible-content-height); } } @keyframes collapsible-up { from { height: var(--radix-collapsible-content-height); } to { height: 0; } } } /* Used from plain CSS (`.animate-download-icon`), so it must always be * emitted — keep it outside @theme. */ @keyframes dropArrow { 0% { transform: translateY(-8px); opacity: 0; } 50% { opacity: 1; } 100% { transform: translateY(0); opacity: 1; } } /* ===== CONTAINER UTILITY ===== */ @utility container { margin-inline: auto; padding-inline: 2rem; } /* ===== COMPONENT LAYER ===== */ @layer components { .app-sidebar-halo { position: absolute; top: -8rem; left: -9rem; width: 26rem; height: 26rem; pointer-events: none; background: var(--gradient-sidebar-halo); filter: blur(28px); } button:not(:disabled), [role="button"]:not(:disabled) { cursor: pointer; } /* Lighthouse chat markdown styles */ .lighthouse-markdown ul, .lighthouse-markdown ol { margin-top: 0.5rem; margin-bottom: 0.5rem; padding-left: 1.5rem; } .lighthouse-markdown li { margin-top: 0.375rem; margin-bottom: 0.375rem; } .lighthouse-markdown li > p { margin-top: 0.25rem; margin-bottom: 0.25rem; } /* Nested list styling - different bullets for different levels */ .lighthouse-markdown > ul { list-style-type: disc !important; } .lighthouse-markdown > ul > li > ul, .lighthouse-markdown ul ul { list-style-type: "◦ " !important; margin-top: 0.25rem; margin-bottom: 0.25rem; } .lighthouse-markdown > ul > li > ul > li > ul, .lighthouse-markdown ul ul ul { list-style-type: "▪ " !important; } .lighthouse-markdown > ul > li > ul > li > ul > li > ul, .lighthouse-markdown ul ul ul ul { list-style-type: "- " !important; } /* Nested lists indentation */ .lighthouse-markdown ul ul, .lighthouse-markdown ol ol, .lighthouse-markdown ul ol, .lighthouse-markdown ol ul { padding-left: 1.25rem; } .lighthouse-markdown h2, .lighthouse-markdown h3, .lighthouse-markdown h4 { margin-top: 1.25rem; margin-bottom: 0.5rem; } .lighthouse-markdown p + ul, .lighthouse-markdown p + ol { margin-top: 0.25rem; } .lighthouse-markdown table { min-width: 100%; width: max-content; } .lighthouse-markdown [data-streamdown="mermaid-block"] { max-width: 100%; min-width: 0; } .lighthouse-markdown [data-streamdown="mermaid-block"] > div:first-child .fixed { padding: 1rem !important; background: transparent !important; backdrop-filter: none !important; } .lighthouse-markdown [data-streamdown="mermaid-block"] > div:first-child .fixed > [role="presentation"] { box-sizing: border-box; width: 100% !important; height: 100% !important; overflow: hidden; border: 1px solid var(--border-neutral-tertiary); border-radius: 0.75rem; background: var(--bg-neutral-tertiary); backdrop-filter: blur(46px); } /* !important beats the inline max-width px that mermaid sets on the svg. Scoped to the inline chart (last child): streamdown renders its fullscreen overlay inside the controls row and sizes it itself. */ .lighthouse-markdown [data-streamdown="mermaid-block"] > div:last-child svg { max-width: 100% !important; height: auto; } /* Streamdown's fullscreen [&>div]:h-full can stretch the floating pan/zoom controls; keep the pills content-sized and inside the chart. */ .lighthouse-markdown [data-streamdown="mermaid-block"] div:has(> div[role="application"]) > div:not([role="application"]) { height: auto !important; } .lighthouse-markdown [data-streamdown="mermaid-block"] > div:last-child > div:not([role="application"]) { bottom: 0 !important; flex-direction: row !important; } .lighthouse-markdown [data-streamdown="mermaid-block"] > div:first-child .fixed [role="presentation"] > div > div:not([role="application"]) { bottom: 3rem !important; } /* Overview banner animated gradient layers */ .overview-banner-gradient { --overview-banner-gradient-primary: var(--bg-button-primary); --overview-banner-gradient-primary-hover: var(--bg-button-primary-hover); --overview-banner-gradient-primary-press: var(--bg-button-primary-press); } .overview-banner-gradient-agents { --overview-banner-gradient-primary: var(--color-violet-400); --overview-banner-gradient-primary-hover: var(--color-fuchsia-300); --overview-banner-gradient-primary-press: var(--color-indigo-500); } .overview-banner-gradient-neutral { background: radial-gradient( circle at center, var(--bg-neutral-tertiary) 0, transparent 50% ) no-repeat; } .overview-banner-gradient-primary { background: radial-gradient( circle at center, var(--overview-banner-gradient-primary) 0, transparent 50% ) no-repeat; } .overview-banner-gradient-primary-hover { background: radial-gradient( circle at center, var(--overview-banner-gradient-primary-hover) 0, transparent 50% ) no-repeat; } .overview-banner-gradient-primary-press { background: radial-gradient( circle at center, var(--overview-banner-gradient-primary-press) 0, transparent 50% ) no-repeat; } } /* ===== UTILITY LAYER ===== */ @layer utilities { /* Screen reader only - visually hidden but accessible */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } /* Hide scrollbar */ .no-scrollbar { scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE and Edge */ } .no-scrollbar::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera */ } /* Minimal scrollbar styles * * The descendant selectors target `.cm-scroller` so that CodeMirror * editors which receive `.minimal-scrollbar` on their `.cm-editor` * wrapper also style their inner scroller (the element that actually * overflows when the editor fills a bounded container). */ .minimal-scrollbar, .minimal-scrollbar .cm-scroller { scrollbar-width: thin; /* Firefox */ scrollbar-color: rgb(203 213 225 / 0.5) transparent; /* thumb and track for Firefox */ } .minimal-scrollbar:hover, .minimal-scrollbar .cm-scroller:hover { scrollbar-color: rgb(148 163 184 / 0.7) transparent; /* darker thumb on hover */ } /* Webkit browsers (Chrome, Safari, Edge) */ .minimal-scrollbar::-webkit-scrollbar, .minimal-scrollbar .cm-scroller::-webkit-scrollbar { width: 6px; } .minimal-scrollbar::-webkit-scrollbar-track, .minimal-scrollbar .cm-scroller::-webkit-scrollbar-track { background: transparent; } .minimal-scrollbar::-webkit-scrollbar-thumb, .minimal-scrollbar .cm-scroller::-webkit-scrollbar-thumb { background-color: rgb(203 213 225 / 0.5); border-radius: 3px; transition: background-color 0.2s ease; } .minimal-scrollbar::-webkit-scrollbar-thumb:hover, .minimal-scrollbar .cm-scroller::-webkit-scrollbar-thumb:hover { background-color: rgb(148 163 184 / 0.7); } /* Dark mode */ .dark .minimal-scrollbar, .dark .minimal-scrollbar .cm-scroller { scrollbar-color: rgb(71 85 105 / 0.5) transparent; } .dark .minimal-scrollbar:hover, .dark .minimal-scrollbar .cm-scroller:hover { scrollbar-color: rgb(100 116 139 / 0.7) transparent; } .dark .minimal-scrollbar::-webkit-scrollbar-thumb, .dark .minimal-scrollbar .cm-scroller::-webkit-scrollbar-thumb { background-color: rgb(71 85 105 / 0.5); } .dark .minimal-scrollbar::-webkit-scrollbar-thumb:hover, .dark .minimal-scrollbar .cm-scroller::-webkit-scrollbar-thumb:hover { background-color: rgb(100 116 139 / 0.7); } /* Download icon animation */ .animate-download-icon polyline, .animate-download-icon line { animation: dropArrow 0.6s ease-out infinite; transform-box: fill-box; transform-origin: center; } } /* ===== BASE LAYER ===== */ @layer base { /* Global base styles */ body { @apply bg-bg-neutral-primary text-text-neutral-primary; } } /* Neutralize the browser's native autofill highlight (Chromium/WebKit paint a forced blue/yellow background on :autofill). box-shadow inset masks it; the long transition stops the native color from flashing before the mask lands. Kept UNLAYERED + !important: the mask is a box-shadow and collides with shadcn's focus:ring (also a box-shadow, in @layer utilities) — a layered rule can't win that, so this sits outside the cascade layers. */ input:autofill, input:autofill:hover, input:autofill:focus, input:autofill:active, input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { -webkit-text-fill-color: var(--text-neutral-secondary) !important; -webkit-box-shadow: 0 0 0 1000px var(--bg-input-primary) inset !important; box-shadow: 0 0 0 1000px var(--bg-input-primary) inset !important; caret-color: var(--text-neutral-secondary); transition: background-color 5000s ease-in-out 0s; } /* Override vaul's injected user-select: none to allow text selection in drawers */ @media (hover: hover) and (pointer: fine) { [data-vaul-drawer][data-vaul-drawer] { user-select: text; } }