@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap'); /* Theme font: KLab = Sora, KEO = Roboto. data-theme is on so this applies before any other CSS. */ :root[data-theme="k-labs"] { --font-family: 'Sora', sans-serif; --theme-accent-brand: hsl(23, 90%, 54%); --theme-primary: hsl(0, 0%, 0%); --theme-background: hsl(0, 0%, 100%); --theme-foreground: hsl(0, 0%, 0%); --theme-navbar-bg: rgba(255, 255, 255, 0.7); --theme-sidebar-bg: rgba(255, 255, 255, 0.98); --theme-button-primary: hsl(23, 90%, 54%); --theme-logout-bg: transparent; } :root[data-theme="k-labs"] body { font-family: 'Sora', sans-serif !important; } :root[data-theme="keo-legacy"] { --font-family: 'Roboto', sans-serif; --keo-font-h1-size: clamp(2rem, 1.8rem + 0.9vw, 2.75rem); --keo-font-h1-weight: 700; --keo-font-h2-size: clamp(1.5rem, 1.35rem + 0.5vw, 2rem); --keo-font-h2-weight: 700; --keo-font-h3-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.5rem); --keo-font-h3-weight: 700; --keo-font-title-weight: 500; --keo-font-body-size: 1rem; --keo-font-body-weight: 400; --keo-font-caption-size: 0.8125rem; --keo-font-caption-weight: 400; --theme-accent-brand: #3DD88A; --theme-primary: #284D64; --theme-background: #ffffff; --theme-foreground: #284D64; --theme-navbar-bg: #284D64; --theme-sidebar-bg: #ffffff; --theme-button-primary: #3DD88A; --theme-logout-bg: #E62E17; --accent-brand-h: 149.81; --accent-brand-s: 66.52%; --accent-brand-l: 54.31%; --background: 112.5 23.53% 98%; --foreground: 203 42.86% 27.45%; --surface: 0 0% 100%; --secondary: 112 20% 95%; --accent: 149 34% 92%; --border: 203 24% 84%; --ring: 149.81 66.52% 54.31%; --sidebar-bg: 112.5 23.53% 98%; --sidebar-accent: 149 34% 92%; --destructive: 6.67 81.82% 49.61%; --warning: 34.78 81.82% 49.61%; --success: 149.81 66.52% 54.31%; --color-primary: #284D64; --color-primary-dark: #203d50; --color-primary-light: #3d637d; --color-secondary: #3DD88A; --color-secondary-dark: #28bf72; --color-secondary-light: #6fe4a6; --color-text-primary: #284D64; --color-text-secondary: #5d7281; --color-text-light: #83939d; --color-bg-light: #EBF2EA; --color-bg-dark: #284D64; --color-success: #3DD88A; --color-error: #E62E17; --color-warning: #E68F17; --color-logout: #E62E17; --focus-ring-brand: rgba(61, 216, 138, 0.24); --focus-ring-strong: rgba(40, 77, 100, 0.22); --button-primary-bg: var(--keo-gradient); --button-primary-hover: linear-gradient(135deg, #1f4155 0%, #34c67e 100%); --button-primary-text: #ffffff; --button-primary-shadow: 0 14px 28px rgba(40, 77, 100, 0.2); --button-secondary-bg: rgba(40, 77, 100, 0.08); --button-secondary-hover: rgba(40, 77, 100, 0.14); --button-secondary-text: #284D64; --button-outline-border: rgba(40, 77, 100, 0.22); --button-outline-hover: rgba(61, 216, 138, 0.08); --button-ghost-hover: rgba(40, 77, 100, 0.08); --button-danger-bg: #E62E17; --button-danger-hover: #cf2914; --button-danger-text: #ffffff; --button-brand-bg: #3DD88A; --button-brand-hover: #33c47d; --button-brand-text: #16384a; --button-brand-outline-bg: rgba(61, 216, 138, 0.1); --button-brand-outline-border: rgba(61, 216, 138, 0.32); --button-brand-outline-text: #238356; --card-bg: #ffffff; --card-border: rgba(40, 77, 100, 0.14); --card-shadow: 0 16px 30px rgba(40, 77, 100, 0.08); --page-header-border: rgba(40, 77, 100, 0.12); --page-header-icon: #284D64; --data-card-bg: #ffffff; --data-card-border: rgba(40, 77, 100, 0.14); --data-card-shadow: 0 12px 22px rgba(40, 77, 100, 0.08); --data-card-label: #5d7281; --data-card-value: #284D64; --calculator-brand: #3DD88A; --calculator-brand-strong: #284D64; --calculator-brand-hover: #33c47d; --calculator-brand-contrast: #ffffff; --calculator-surface: #ffffff; --calculator-surface-soft: #EBF2EA; --calculator-surface-muted: #f4f8f3; --calculator-panel: #ffffff; --calculator-panel-soft: #f7faf7; --calculator-panel-elevated: #ffffff; --calculator-panel-border: rgba(40, 77, 100, 0.12); --calculator-panel-border-strong: rgba(40, 77, 100, 0.18); --calculator-text: #49606f; --calculator-text-strong: #284D64; --calculator-text-muted: #6b7f8d; --calculator-shadow: 0 22px 40px rgba(40, 77, 100, 0.1); --calculator-soft-shadow: 0 12px 24px rgba(40, 77, 100, 0.09); --calculator-table-shell-bg: #ffffff; --calculator-table-header-bg: #284D64; --calculator-table-header-text: #ffffff; --calculator-table-cell-bg: #ffffff; --calculator-table-cell-bg-alt: #f6faf7; --calculator-table-border: rgba(40, 77, 100, 0.1); --calculator-table-hover: rgba(61, 216, 138, 0.08); --calculator-table-text: #284D64; --calculator-table-shadow: 0 16px 26px rgba(40, 77, 100, 0.08); --calculator-input-bg: #ffffff; --calculator-input-border: rgba(40, 77, 100, 0.18); --calculator-input-border-hover: rgba(40, 77, 100, 0.28); --calculator-input-focus: rgba(61, 216, 138, 0.18); --calculator-input-text: #284D64; --calculator-input-placeholder: #8ca0aa; --calculator-danger: #E62E17; --calculator-danger-soft: #fff1ef; --calculator-success: #3DD88A; --calculator-success-soft: #edf9f2; --calculator-warning: #E68F17; --calculator-warning-soft: #fff6e8; --calculator-risk-bg: linear-gradient(135deg, #fff2f0 0%, #ffffff 100%); --calculator-risk-border: rgba(230, 46, 23, 0.22); --calculator-risk-text: #a62b1b; --calculator-safe-bg: linear-gradient(135deg, #edf9f2 0%, #ffffff 100%); --calculator-safe-border: rgba(61, 216, 138, 0.2); --calculator-safe-text: #284D64; --calculator-highlight-bg: rgba(61, 216, 138, 0.12); --calculator-highlight-border: rgba(61, 216, 138, 0.36); --calculator-loader: #3DD88A; --calculator-status-info-gradient: linear-gradient(135deg, rgba(40, 77, 100, 0.08) 0%, #ffffff 100%); --calculator-status-info-border: #284D64; --calculator-status-success-gradient: linear-gradient(135deg, rgba(61, 216, 138, 0.12) 0%, #ffffff 100%); --calculator-status-success-border: #3DD88A; --calculator-status-warning-gradient: linear-gradient(135deg, rgba(230, 143, 23, 0.16) 0%, #ffffff 100%); --calculator-status-warning-border: #E68F17; /* Calculator headings for keo-legacy: Roboto + brand green */ --calculator-title-color: #3DD88A; --calculator-title-font-family: 'Roboto', sans-serif; } :root[data-theme="keo-legacy"] body { font-family: 'Roboto', sans-serif !important; } .theme-navbar[data-theme="k-labs"] { backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); border: 1px solid rgba(0, 0, 0, 0.2); } .theme-navbar[data-theme="keo-legacy"] { background-color: #284D64 !important; backdrop-filter: none; -webkit-backdrop-filter: none; } .theme-button-primary[data-theme="k-labs"] { background-color: var(--theme-button-primary); color: white; border: none; } .theme-button-primary[data-theme="keo-legacy"] { background-color: var(--theme-button-primary); color: white; border: 2px transparent solid; } .theme-logout-button[data-theme="keo-legacy"] { background: #E62E17 !important; color: white !important; border-radius: 20px !important; padding: 8px 16px !important; } /* Loading colors for keo-legacy theme */ [data-theme="keo-legacy"] { --loader-color: #3DD88A !important; --mantine-color-orange-filled: #3DD88A !important; --mantine-color-orange-6: #3DD88A !important; --mantine-color-orange-7: #33c47d !important; --mantine-primary-color-filled: #3DD88A !important; } /* Only apply to loading overlay SVGs, not all SVGs */ [data-theme="keo-legacy"] .custom-loading-overlay svg, [data-theme="keo-legacy"] .custom-loading-overlay-container svg, [data-theme="keo-legacy"] .custom-loading-overlay svg *, [data-theme="keo-legacy"] .custom-loading-overlay-container svg * { color: #3DD88A !important; fill: #3DD88A !important; stroke: #3DD88A !important; } [data-theme="keo-legacy"] .mantine-Loader-root, [data-theme="keo-legacy"] [class*="mantine-Loader"] { color: #3DD88A !important; --loader-color: #3DD88A !important; --mantine-color-orange-filled: #3DD88A !important; } /* Only Mantine Loader SVGs, not chart SVGs */ [data-theme="keo-legacy"] .mantine-Loader-root svg, [data-theme="keo-legacy"] [class*="mantine-Loader"] svg { color: #3DD88A !important; fill: #3DD88A !important; stroke: #3DD88A !important; } /* Sidebar loading spinner for keo-legacy */ [data-theme="keo-legacy"] .sidebar__nav-link--loading::after { border-color: #3DD88A !important; border-top-color: transparent !important; } /* ── Universal chart grid @container main-content: 1 col (default) → 2 cols @ 1024 → up to 3 cols @ 1920. repeat(auto-fit, …) inside each tier so empty tracks collapse (e.g. 2 charts fill row). */ .app-chart-grid { --chart-grid-gap: 24px; display: grid; grid-template-columns: 1fr; gap: var(--chart-grid-gap); width: 100%; min-width: 0; box-sizing: border-box; } .app-chart-grid > * { min-width: 0; max-width: 100%; overflow: hidden; } .app-chart-grid .js-plotly-plot, .app-chart-grid .plotly-graph-div { min-width: 0; max-width: 100%; overflow: hidden; } @container main-content (min-width: 1280px) { .app-chart-grid { grid-template-columns: repeat( auto-fit, minmax( min(100%, max(280px, calc((100% - 24px) / 2))), 1fr ) ); } } @container main-content (min-width: 1920px) { .app-chart-grid { grid-template-columns: repeat( auto-fit, minmax( min(100%, max(280px, calc((100% - 48px) / 3))), 1fr ) ); } /* --max-2: still cap at 2 columns per row (do not jump to 3-col tier) */ .app-chart-grid.app-chart-grid--max-2 { grid-template-columns: repeat( auto-fit, minmax( min(100%, max(280px, calc((100% - 24px) / 2))), 1fr ) ); } } /* Shared chart flex layout: default behaves like max-3 (1 -> 2 -> 3 columns across tiers). */ .app-chart-flex { --app-chart-flex-gap: 24px; display: flex; flex-wrap: wrap; gap: var(--app-chart-flex-gap); width: 100%; min-width: 0; } .app-chart-flex-item { flex: 1 1 100%; min-width: 0; max-width: 100%; } .app-chart-flex > * { flex: 1 1 100%; min-width: 0; max-width: 100%; } @container main-content (min-width: 1024px) { .app-chart-flex > *, .app-chart-flex > .app-chart-flex-item, .app-chart-flex.app-chart-flex-max-2 > *, .app-chart-flex.app-chart-flex-max-2 > .app-chart-flex-item, .app-chart-flex.app-chart-flex-max-3 > *, .app-chart-flex.app-chart-flex-max-3 > .app-chart-flex-item { flex-basis: calc((100% - var(--app-chart-flex-gap)) / 2); } } @container main-content (min-width: 1920px) { .app-chart-flex > *, .app-chart-flex > .app-chart-flex-item, .app-chart-flex.app-chart-flex-max-3 > *, .app-chart-flex.app-chart-flex-max-3 > .app-chart-flex-item { flex-basis: calc((100% - (2 * var(--app-chart-flex-gap))) / 3); } .app-chart-flex.app-chart-flex-max-2 > *, .app-chart-flex.app-chart-flex-max-2 > .app-chart-flex-item { flex-basis: calc((100% - var(--app-chart-flex-gap)) / 2); } } .app-chart-flex.app-chart-flex-max-1 > *, .app-chart-flex.app-chart-flex-max-1 > .app-chart-flex-item { flex-basis: 100%; } @container main-content (max-width: 1279px) { .app-chart-flex > *, .app-chart-flex > .app-chart-flex-item, .app-chart-flex.app-chart-flex-max-2 > *, .app-chart-flex.app-chart-flex-max-2 > .app-chart-flex-item, .app-chart-flex.app-chart-flex-max-3 > *, .app-chart-flex.app-chart-flex-max-3 > .app-chart-flex-item { flex-basis: 100%; } } /* Comparative Analysis sections: always a single column */ .benchmarks-chart-single { display: block; width: 100%; min-width: 0; max-width: 100%; overflow: hidden; } /* Benchmarks RFC page header separator */ .global-benchmarks__header { border-bottom: 1px solid var(--theme-accent-brand); } /* Global SAT page header separator (mirrors benchmarks) */ .global-sat__header { border-bottom: 1px solid var(--theme-accent-brand); } /* Individual benchmarks: make accordion wrapper look like plain layout */ .benchmarks-accordion-wrapper { box-shadow: none !important; border: none !important; background: transparent !important; padding: 0 !important; } /* Remove inner CardContent padding when using wrapper */ .benchmarks-accordion-wrapper .p-6, .benchmarks-accordion-wrapper .p-6.pt-0 { padding: 0 !important; } /* Individual benchmarks: tab bar — spacing from filters / to KPI block; stacks when main area is narrow */ .benchmarks-segmented-row { width: fit-content; max-width: 100%; min-width: 0; margin-top: 2.5rem; margin-bottom: 2rem; } @container main-content (max-width: 900px) { .benchmarks-segmented-row { width: 100%; } } @media (max-width: 900px) { .benchmarks-segmented-row { width: 100%; } } /* Individual benchmarks: KPI DataCards — max 3 columns, responsive (see home workflow grid) */ .benchmarks-kpi-grid { display: grid; grid-template-columns: 1fr; gap: 12px; width: 100%; min-width: 0; align-items: stretch; margin-bottom: 3rem; } .benchmarks-kpi-grid > * { min-width: 0; } @container main-content (min-width: 576px) { .benchmarks-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @container main-content (min-width: 992px) { .benchmarks-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .benchmarks-kpi-grid__empty { grid-column: 1 / -1; } /* ── Filter sections & Cards: prevent overflow on small screens ── */ #content-segmentation, #content-main-sat, #content-main-calculator, #content-global-sat, #content-global-benchmark { min-width: 0; max-width: 100%; } /* Cards and filter containers - allow shrinking */ #content-segmentation .rounded-app-radius, #content-main-sat .rounded-app-radius, #content-main-calculator .rounded-app-radius, #content-global-sat .rounded-app-radius, #content-global-benchmark .rounded-app-radius { min-width: 0; max-width: 100%; } /* Filter rows with flex layout - prevent overflow on small viewports */ .charts-filter-row { min-width: 0; max-width: 100%; } @media (max-width: 640px) { .charts-filter-row > * { min-width: 0 !important; flex: 1 1 100% !important; } } /* Override fixed widths on small screens - prevent page overflow */ @media (max-width: 768px) { #content-main-sat, #content-main-calculator { width: 100%; max-width: 100%; } #content-segmentation { width: 100%; max-width: 100%; } } /* Flex children in filter cards - allow shrink on small viewports */ @media (max-width: 640px) { #content-segmentation div[style*="180px"], #content-segmentation div[style*="min-width"], #content-main-sat div[style*="min-width"], #content-main-calculator div[style*="min-width"], #content-global-sat div[style*="min-width"], #content-global-benchmark div[style*="min-width"] { min-width: 0 !important; } } /* Pagination active state for keo-legacy */ [data-theme="keo-legacy"] .custom-pagination .mantine-Pagination-control[data-active] { background-color: #284D64 !important; color: white !important; } /* Button accent-brand variant for keo-legacy - use red for primary actions */ [data-theme="keo-legacy"] .custom-button-accent-brand, [data-theme="keo-legacy"] button.custom-button-accent-brand, [data-theme="keo-legacy"] a.custom-button-accent-brand { background-color: #3DD88A !important; color: #16384a !important; } [data-theme="keo-legacy"] .custom-button-accent-brand:hover:not(:disabled) { background-color: #33c47d !important; opacity: 1 !important; } /* Button accent-brand-outline variant for keo-legacy */ [data-theme="keo-legacy"] .custom-button-accent-brand-outline, [data-theme="keo-legacy"] button.custom-button-accent-brand-outline, [data-theme="keo-legacy"] a.custom-button-accent-brand-outline { border: 1px solid rgba(61, 216, 138, 0.32) !important; background-color: rgba(61, 216, 138, 0.08) !important; color: #238356 !important; } [data-theme="keo-legacy"] .custom-button-accent-brand-outline:hover:not(:disabled) { background-color: rgba(61, 216, 138, 0.14) !important; } /* Select dropdown items for keo-legacy */ [data-theme="keo-legacy"] .mantine-Select-item[data-selected], [data-theme="keo-legacy"] .mantine-Select-item[data-hovered] { background-color: rgba(61, 216, 138, 0.1) !important; color: #284D64 !important; } /* MultiSelect values for keo-legacy */ [data-theme="keo-legacy"] .mantine-MultiSelect-value { background-color: rgba(61, 216, 138, 0.12) !important; color: #284D64 !important; } [data-theme="keo-legacy"] .mantine-MultiSelect-valueRemove { color: #284D64 !important; } /* Slider theming */ /* KLab: use orange logo as thumb image */ [data-theme="k-labs"] .custom-slider-ui .mantine-Slider-thumb { background-color: transparent !important; background-image: url("/static/images/k-lab-logo-orange.png") !important; background-size: contain !important; background-repeat: no-repeat !important; background-position: center center !important; } /* KEO-legacy: use KEO Capital vertical gradient logo as thumb image */ [data-theme="keo-legacy"] .custom-slider-ui .mantine-Slider-bar { background-color: #3DD88A !important; } [data-theme="keo-legacy"] .custom-slider-ui .mantine-Slider-thumb { background-color: transparent !important; background-image: url("/static/images/keo-capital-vertical-short-gradient-bg.svg") !important; background-size: contain !important; background-repeat: no-repeat !important; background-position: center center !important; border-radius: 999px !important; } /* Switch for keo-legacy */ [data-theme="keo-legacy"] .custom-switch-brand[data-checked="true"] .mantine-Switch-track, [data-theme="keo-legacy"] .custom-switch-brand input[type="checkbox"]:checked ~ .mantine-Switch-track { background-color: #3DD88A !important; } /* Radio buttons for keo-legacy */ [data-theme="keo-legacy"] .custom-radio-group input[type="radio"], [data-theme="keo-legacy"] .custom-radio-group input[type="radio"]:checked { border-color: #3DD88A !important; } [data-theme="keo-legacy"] .custom-radio-group svg { fill: #3DD88A !important; stroke: #3DD88A !important; color: #3DD88A !important; } /* Checkbox for keo-legacy */ [data-theme="keo-legacy"] .custom-checkbox .mantine-Checkbox-input { background-color: transparent !important; border-color: #3DD88A !important; box-shadow: none !important; } [data-theme="keo-legacy"] .custom-checkbox .mantine-Checkbox-input:checked, [data-theme="keo-legacy"] .custom-checkbox .mantine-Checkbox-input[aria-checked="true"] { background-color: #3DD88A !important; border-color: #3DD88A !important; background-image: none !important; box-shadow: none !important; } [data-theme="keo-legacy"] .custom-checkbox .mantine-Checkbox-icon svg { fill: white !important; } [data-theme="keo-legacy"] input[type="checkbox"]:checked::after { background-color: transparent !important; content: "" !important; } /* Links in data entry table for keo-legacy */ [data-theme="keo-legacy"] .data-entry-files-table__link, [data-theme="keo-legacy"] .data-entry-files-table__link:hover, [data-theme="keo-legacy"] .data-entry-files-table__link i { color: #284D64 !important; } /* Burger button color for keo-legacy - white on dark blue navbar */ [data-theme="keo-legacy"] #sidebar-toggle-mobile, [data-theme="keo-legacy"] #sidebar-toggle-desktop { color: white !important; } /* Hover states for burger in keo-legacy */ [data-theme="keo-legacy"] #sidebar-toggle-mobile:hover { background-color: rgba(255, 255, 255, 0.1) !important; } [data-theme="keo-legacy"] #sidebar-toggle-mobile:active { background-color: rgba(255, 255, 255, 0.15) !important; } /* ── Language Selector — Shared (both themes) ── */ /* Pill-shaped trigger */ .language-selector .mantine-Select-input { border-radius: 8px !important; height: 36px !important; min-height: 36px !important; padding-left: 36px !important; padding-right: 28px !important; font-size: 13px !important; font-weight: 500 !important; line-height: 1.2 !important; font-family: inherit !important; cursor: pointer !important; display: flex !important; align-items: center !important; transition: background-color 0.15s ease, border-color 0.15s ease !important; } /* Language code inside input */ .language-selector .mantine-Select-section[data-position="left"] { width: 36px !important; pointer-events: none !important; } .language-selector .language-code-label { display: inline-flex !important; align-items: center !important; justify-content: flex-start !important; font-size: 13px !important; /* match dropdown text */ font-weight: 500 !important; /* match dropdown text */ line-height: 1.2 !important; text-transform: uppercase !important; letter-spacing: normal !important; color: hsl(var(--foreground)) !important; /* same color as dropdown code */ width: auto !important; height: auto !important; border-radius: 0 !important; } .language-selector .mantine-Select-section[data-position="left"] svg { width: 16px !important; height: 16px !important; } /* Chevron */ .language-selector .mantine-Select-section[data-position="right"] svg { width: 14px !important; height: 14px !important; opacity: 0.6; } /* Dropdown panel — portaled at body level, targeted via classNames prop */ .lang-dropdown { border-radius: 8px !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08) !important; border: 1px solid hsl(var(--border)) !important; padding: 4px !important; margin-top: 4px !important; overflow: hidden !important; background: white !important; } /* Dropdown option items — "[CODE] Language" with right-aligned check */ .lang-option { border-radius: 8px !important; padding: 8px 32px 8px 12px !important; /* extra right padding for checkmark */ font-size: 13px !important; /* match trigger text size */ font-weight: 500 !important; /* match trigger text weight */ line-height: 1.2 !important; font-family: inherit !important; position: relative !important; transition: background-color 0.1s ease !important; color: hsl(var(--foreground)) !important; text-align: left !important; display: flex !important; align-items: center !important; gap: 6px !important; } /* Language code badge before label text in dropdown list (aligned with SUPPORTED_LANGUAGES order) */ .lang-dropdown .lang-option:nth-child(1)::before, .lang-dropdown .lang-option:nth-child(2)::before, .lang-dropdown .lang-option:nth-child(3)::before { display: inline-block !important; margin-right: 6px !important; font-weight: 500 !important; font-size: 13px !important; letter-spacing: normal !important; color: hsl(var(--foreground)) !important; /* match trigger text color */ } .lang-dropdown .lang-option:nth-child(1)::before { content: 'EN' !important; } .lang-dropdown .lang-option:nth-child(2)::before { content: 'ES' !important; } .lang-dropdown .lang-option:nth-child(3)::before { content: 'PT' !important; } /* Custom checkmark icon on the far right (CSS-drawn, not text) */ .lang-option::after { content: '' !important; position: absolute !important; right: 10px !important; top: 50% !important; transform: translateY(-50%) rotate(45deg) !important; width: 7px !important; height: 12px !important; border-right: 2px solid hsl(var(--accent-brand)) !important; border-bottom: 2px solid hsl(var(--accent-brand)) !important; opacity: 0; transition: opacity 0.1s ease !important; } .lang-option[data-checked]::after, .lang-option[data-combobox-selected]::after { opacity: 1; } /* Hide Mantine's default checkmark icon inside options so only our icon shows */ .lang-option svg { display: none !important; } /* Hover state */ .lang-option:hover { background-color: hsl(var(--accent) / 0.5) !important; } /* Selected state keeps the same background as hover */ .lang-option[data-checked], .lang-option[data-combobox-selected] { background-color: hsl(var(--accent) / 0.5) !important; } /* ── Language Dropdown — k-labs: glassmorphism panel ── */ [data-theme="k-labs"] .lang-dropdown { background: rgba(255, 255, 255, 0.85) !important; backdrop-filter: blur(16px) saturate(180%) !important; -webkit-backdrop-filter: blur(16px) saturate(180%) !important; border: 1px solid rgba(0, 0, 0, 0.1) !important; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04) !important; } /* ── Language Selector — k-labs: transparent, glassmorphism-aligned ── */ [data-theme="k-labs"] .language-selector .mantine-Select-input { background-color: transparent; border: 1px solid rgba(0, 0, 0, 0.08); color: hsl(var(--foreground)); } [data-theme="k-labs"] .language-selector .mantine-Select-input:hover { background-color: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.15); } [data-theme="k-labs"] .language-selector .mantine-Select-input:focus, [data-theme="k-labs"] .language-selector .mantine-Select-input[aria-expanded="true"] { background-color: rgba(0, 0, 0, 0.04); border-color: hsl(var(--accent-brand) / 0.4); box-shadow: 0 0 0 2px hsl(var(--accent-brand) / 0.1); } [data-theme="k-labs"] .language-selector .mantine-Select-section[data-position="left"] svg { color: hsl(var(--foreground) / 0.6); } [data-theme="k-labs"] .language-selector .mantine-Select-input:hover ~ .mantine-Select-section[data-position="left"] svg, [data-theme="k-labs"] .language-selector:hover .mantine-Select-section[data-position="left"] svg { color: hsl(var(--foreground) / 0.85); } [data-theme="k-labs"] .language-selector .mantine-Select-section[data-position="right"] svg { color: hsl(var(--foreground) / 0.35); } /* ── Language Selector — keo-legacy: dark navy navbar ── */ [data-theme="keo-legacy"] .language-selector .mantine-Select-input { background-color: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.25); color: white; } [data-theme="keo-legacy"] .language-selector .mantine-Select-input:hover { background-color: rgba(255, 255, 255, 0.2); } [data-theme="keo-legacy"] .language-selector .mantine-Select-section[data-position="left"] svg { color: white; } [data-theme="keo-legacy"] .language-selector .mantine-Select-section[data-position="right"] svg { color: rgba(255, 255, 255, 0.7); } /* Navbar breadcrumb links: black with orange hover (k-labs), white with green hover (keo-legacy) */ .navbar-breadcrumbs-wrapper a { text-decoration: underline !important; transition: color 0.2s ease; } [data-theme="k-labs"] .navbar-breadcrumbs-wrapper a { color: #000 !important; } [data-theme="k-labs"] .navbar-breadcrumbs-wrapper a:hover { color: hsl(var(--accent-brand)) !important; } [data-theme="keo-legacy"] .navbar-breadcrumbs-wrapper a { color: rgba(255, 255, 255, 0.95) !important; } [data-theme="keo-legacy"] .navbar-breadcrumbs-wrapper a:hover { color: var(--theme-accent-brand) !important; }