@layer reset, tokens, base, components, patterns, themes, utilities; @layer tokens { :root { --brand-teal: #47c1bf; --brand-teal-dark: #35a5a3; --brand-teal-light: #e8f8f8; --brand-coral: #eb5a3a; --brand-coral-dark: #c43a2a; --brand-coral-light: #fef0ed; --brand-navy: #2a304b; --brand-navy-light: #3d4566; --brand-navy-dark: #1a1f33; --brand-green: #53bfa3; --brand-green-strong: #22b573; --brand-green-light: #e8f7f3; --brand-green-dark: #2c7a5f; --brand-yellow: #f0b344; --brand-yellow-light: #fbf1d9; --brand-yellow-dark: #8a5a00; --neutral-white: #ffffff; --neutral-bg: #f5f4f0; --neutral-gray-100: #f0efeb; --neutral-gray-200: #e2e0d8; --neutral-gray-400: #9e9b90; --neutral-gray-600: #6b6860; --neutral-gray-800: #3a3833; --neutral-text: #1e1d1a; --dark-surface-bg: #171a21; --dark-bg-base: #1a1f33; --dark-surface: #242933; --dark-border: #383d4d; --dark-text: #f2f2f2; --dark-text-muted: #9ea6b2; --effect-scrim: #000000; --scrim-default: rgba(30, 29, 26, 0.55); --overlay-light-xs: rgba(255, 255, 255, 0.04); --overlay-light-sm: rgba(255, 255, 255, 0.08); --overlay-light-md: rgba(255, 255, 255, 0.12); --overlay-light-lg: rgba(255, 255, 255, 0.18); --overlay-light-xl: rgba(255, 255, 255, 0.24); --overlay-light-2xl: rgba(255, 255, 255, 0.40); --overlay-dark-xs: rgba(0, 0, 0, 0.04); --overlay-dark-sm: rgba(0, 0, 0, 0.08); --overlay-dark-md: rgba(0, 0, 0, 0.12); --overlay-dark-lg: rgba(0, 0, 0, 0.18); --overlay-dark-xl: rgba(0, 0, 0, 0.24); --overlay-dark-2xl: rgba(0, 0, 0, 0.40); --hover-overlay-light: rgba(255, 255, 255, 0.06); --glow-teal-soft: 0 0 0 4px color-mix(in srgb, var(--brand-teal) 22%, transparent); --syntax-keyword: #c084fc; --syntax-string: #86efac; --syntax-number: #fbbf24; --syntax-fn: #7dd3fc; --syntax-comment: var(--neutral-gray-400); --syntax-operator: var(--neutral-white); --scroll-fade-light: linear-gradient(to right, rgba(0, 0, 0, 0.08), transparent); --scroll-fade-dark: linear-gradient(to right, rgba(0, 0, 0, 0.40), transparent); --surface-translucent-light: rgba(255, 255, 255, 0.85); --surface-translucent-dark: rgba(26, 31, 51, 0.85); --backdrop-blur: 8px; --color-bg: var(--neutral-bg); --color-surface: var(--neutral-white); --color-surface-alt: var(--neutral-gray-100); --color-surface-inverted: var(--brand-navy); --color-text: var(--neutral-text); --color-text-muted: var(--neutral-gray-600); --color-text-subtle: var(--neutral-gray-400); --color-text-inverted: var(--neutral-white); --color-border: var(--neutral-gray-200); --color-border-strong: var(--neutral-gray-400); --color-accent: var(--brand-teal); --color-accent-hover: var(--brand-teal-dark); --color-success: var(--brand-green); --color-warning: var(--brand-yellow); --color-danger: var(--brand-coral); --color-info: var(--brand-teal); --color-link: var(--brand-teal); --color-link-hover: var(--brand-teal-dark); --color-interactive: var(--brand-teal); --color-interactive-hover: var(--brand-teal-dark); --gradient-dark-feature: linear-gradient(135deg, var(--dark-bg-base) 0%, var(--brand-navy) 50%, var(--brand-navy-dark) 100%); --gradient-teal-flow: linear-gradient(135deg, var(--brand-teal-dark) 0%, var(--brand-teal) 50%, var(--brand-green) 100%); --gradient-card-clientes: linear-gradient(90deg, rgba(71, 194, 191, 0.40) 0%, rgba(235, 92, 59, 0.30) 100%), #2A304B; } :root { --font-sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-mono: 'DM Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; --font-size-xs: 13px; --font-size-sm: 14px; --font-size-md: 16px; --font-size-lg: 20px; --font-size-xl: 24px; --font-size-2xl: 28px; --font-size-3xl: 32px; --font-size-4xl: 40px; --font-size-5xl: 48px; --font-size-meta: 11px; --font-size-meta-xs: 10px; --font-size-display-xl: clamp(2.5rem, 1.8rem + 3vw, 60px); --font-size-watermark: 80px; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --line-height-tight: 1.10; --line-height-snug: 1.20; --line-height-heading: 1.30; --line-height-label: 1.40; --line-height-body: 1.50; --line-height-relaxed: 1.60; --letter-spacing-tighter: -2px; --letter-spacing-tight: -1px; --letter-spacing-normal: 0; --letter-spacing-wide: 0.5px; --letter-spacing-wider: 0.65px; --letter-spacing-widest: 5px; --letter-spacing-kicker: 1.5px; } .text-display { font-family: var(--font-sans); font-weight: var(--font-weight-bold); font-size: var(--font-size-5xl); line-height: var(--line-height-tight); letter-spacing: var(--letter-spacing-tighter); } .text-h1 { font-family: var(--font-sans); font-weight: var(--font-weight-bold); font-size: var(--font-size-4xl); line-height: var(--line-height-tight); letter-spacing: var(--letter-spacing-tighter); } .text-h2 { font-family: var(--font-sans); font-weight: var(--font-weight-bold); font-size: var(--font-size-3xl); line-height: var(--line-height-snug); letter-spacing: var(--letter-spacing-tight); } .text-h3 { font-family: var(--font-sans); font-weight: var(--font-weight-semibold); font-size: var(--font-size-2xl); line-height: var(--line-height-snug); letter-spacing: var(--letter-spacing-tight); } .text-h4 { font-family: var(--font-sans); font-weight: var(--font-weight-semibold); font-size: var(--font-size-xl); line-height: var(--line-height-heading); letter-spacing: var(--letter-spacing-normal); } .text-h5 { font-family: var(--font-sans); font-weight: var(--font-weight-medium); font-size: var(--font-size-lg); line-height: var(--line-height-label); letter-spacing: var(--letter-spacing-normal); } .text-body-large { font-family: var(--font-sans); font-weight: var(--font-weight-regular); font-size: var(--font-size-lg); line-height: var(--line-height-body); letter-spacing: var(--letter-spacing-normal); } .text-body { font-family: var(--font-sans); font-weight: var(--font-weight-regular); font-size: var(--font-size-md); line-height: var(--line-height-relaxed); letter-spacing: var(--letter-spacing-normal); } .text-body-small { font-family: var(--font-sans); font-weight: var(--font-weight-regular); font-size: var(--font-size-sm); line-height: var(--line-height-relaxed); letter-spacing: var(--letter-spacing-normal); } .text-label { font-family: var(--font-sans); font-weight: var(--font-weight-semibold); font-size: var(--font-size-sm); line-height: var(--line-height-label); letter-spacing: var(--letter-spacing-kicker); text-transform: uppercase; } .text-code { font-family: var(--font-mono); font-weight: var(--font-weight-regular); font-size: var(--font-size-sm); line-height: var(--line-height-body); letter-spacing: var(--letter-spacing-normal); } .text-numeric { font-family: var(--font-mono); font-weight: var(--font-weight-medium); font-size: var(--font-size-md); line-height: var(--line-height-label); letter-spacing: var(--letter-spacing-normal); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "lnum" 1; } h1 { font: var(--font-weight-bold) var(--font-size-4xl)/var(--line-height-tight) var(--font-sans); letter-spacing: var(--letter-spacing-tighter); } h2 { font: var(--font-weight-bold) var(--font-size-3xl)/var(--line-height-snug) var(--font-sans); letter-spacing: var(--letter-spacing-tight); } h3 { font: var(--font-weight-semibold) var(--font-size-2xl)/var(--line-height-snug) var(--font-sans); letter-spacing: var(--letter-spacing-tight); } h4 { font: var(--font-weight-semibold) var(--font-size-xl) /var(--line-height-heading) var(--font-sans); } h5 { font: var(--font-weight-medium) var(--font-size-lg) /var(--line-height-label) var(--font-sans); } h6 { font: var(--font-weight-semibold) var(--font-size-md) /var(--line-height-label) var(--font-sans); } code, kbd, samp, pre { font-family: var(--font-mono); font-size: var(--font-size-xs); } :root { --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; } :root { --radius-none: 0; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --radius-full: 9999px; } :root { --shadow-none: none; --shadow-xs: 0 1px 2px 0 rgba(30, 29, 26, 0.04); --shadow-sm: 0 1px 3px 0 rgba(30, 29, 26, 0.06), 0 1px 2px 0 rgba(30, 29, 26, 0.04); --shadow-md: 0 4px 8px -2px rgba(30, 29, 26, 0.08), 0 2px 4px -1px rgba(30, 29, 26, 0.06); --shadow-lg: 0 12px 24px -4px rgba(30, 29, 26, 0.10), 0 4px 8px -2px rgba(30, 29, 26, 0.06); --shadow-xl: 0 24px 48px -8px rgba(30, 29, 26, 0.14), 0 8px 16px -4px rgba(30, 29, 26, 0.08); --shadow-focus: 0 0 0 3px rgba(71, 193, 191, 0.35); --shadow-focus-danger: 0 0 0 3px rgba(235, 90, 58, 0.35); } :root { --duration-instant: 80ms; --duration-fast: 150ms; --duration-base: 220ms; --duration-slow: 320ms; --duration-slower: 480ms; --ease-linear: linear; --ease-standard: cubic-bezier(0.2, 0.0, 0, 1); --ease-emphasized: cubic-bezier(0.3, 0.0, 0.0, 1); --ease-decelerate: cubic-bezier(0.0, 0.0, 0.2, 1); --ease-accelerate: cubic-bezier(0.4, 0.0, 1.0, 1); --z-base: 1; --z-dropdown: 100; --z-sticky: 200; --z-tooltip: 300; --z-popup: 400; --z-modal: 500; --z-toast: 600; --z-max: 9999; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } } @layer base { *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; } body { min-height: 100vh; line-height: var(--line-height-relaxed, 1.6); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } img, picture, video, canvas, svg { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; color: inherit; } p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } #root, #__next { isolation: isolate; } :focus-visible { outline: 2px solid var(--brand-teal, #47c1bf); outline-offset: 2px; } button:focus-visible, [role="button"]:focus-visible { outline: none; box-shadow: var(--shadow-focus); } ul[role="list"], ol[role="list"] { list-style: none; padding: 0; } table { border-collapse: collapse; border-spacing: 0; } button { background: none; border: 0; padding: 0; cursor: pointer; } a { color: inherit; text-decoration: none; } html { font-family: var(--font-sans); color: var(--color-text); background: var(--color-bg); } body { font-family: var(--font-sans); font-size: var(--font-size-md); line-height: var(--line-height-relaxed); color: var(--color-text); background: var(--color-bg); } ::selection { background: var(--brand-teal); color: var(--neutral-white); } :focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); } @supports (scrollbar-color: auto) { html { scrollbar-color: var(--neutral-gray-400) transparent; scrollbar-width: thin; } } @supports selector(::-webkit-scrollbar) { ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--neutral-gray-400); border-radius: var(--radius-full); border: 2px solid var(--color-bg); } ::-webkit-scrollbar-thumb:hover { background: var(--neutral-gray-600); } } .container { width: 100%; max-width: 1100px; margin-inline: auto; padding-inline: var(--space-6); } .container--narrow { max-width: 720px; } .container--wide { max-width: 1280px; } .container--full { max-width: 1440px; } .stack > * + * { margin-top: var(--stack-gap, var(--space-4)); } .stack-2 > * + * { margin-top: var(--space-2); } .stack-3 > * + * { margin-top: var(--space-3); } .stack-4 > * + * { margin-top: var(--space-4); } .stack-6 > * + * { margin-top: var(--space-6); } .stack-8 > * + * { margin-top: var(--space-8); } .stack-12 > * + * { margin-top: var(--space-12); } .cluster { display: flex; flex-wrap: wrap; gap: var(--cluster-gap, var(--space-3)); align-items: center; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } } @layer components { .luego-logo, .luego-logo-hasta { display: inline-flex; align-items: center; text-decoration: none; color: inherit; line-height: 0; } .luego-logo__img, .luego-logo-hasta__img { display: block; height: 28px; width: auto; max-width: 100%; object-fit: contain; user-select: none; } .luego-logo--md .luego-logo__img, .luego-logo-hasta--md .luego-logo-hasta__img { height: 32px; } .luego-logo--lg .luego-logo__img, .luego-logo-hasta--lg .luego-logo-hasta__img { height: 48px; } .luego-logo--xl .luego-logo__img, .luego-logo-hasta--xl .luego-logo-hasta__img { height: 72px; } .luego-logo--2xl .luego-logo__img, .luego-logo-hasta--2xl .luego-logo-hasta__img { height: 96px; } .luego-logo--3xl .luego-logo__img, .luego-logo-hasta--3xl .luego-logo-hasta__img { height: 128px; } .luego-logo--4xl .luego-logo__img, .luego-logo-hasta--4xl .luego-logo-hasta__img { height: 160px; } .luego-logo:hover, .luego-logo-hasta:hover { opacity: 0.85; } .luego-logo:focus-visible, .luego-logo-hasta:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); } .lang-toggle { display: inline-flex; align-items: center; gap: 2px; padding: 3px; background: var(--neutral-gray-100); border-radius: var(--radius-full); font-family: var(--font-sans); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-wide); text-transform: uppercase; } .lang-toggle__option { appearance: none; border: 1px solid transparent; background: transparent; color: var(--neutral-gray-600); padding: 3px 12px; border-radius: var(--radius-full); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .lang-toggle__flag { display: inline-block; width: 12px; height: 12px; border-radius: 50%; flex: none; } .lang-toggle__flag--br { background: linear-gradient(135deg, #0f8434 0%, #dcbc00 100%); } .lang-toggle__flag--uk { background: linear-gradient(135deg, #0d255a 0%, #a0112a 100%); } .lang-toggle__option:hover { color: var(--brand-navy); } .lang-toggle__option[aria-current="true"] { background: var(--neutral-white); color: var(--brand-navy); box-shadow: var(--shadow-sm); } .lang-toggle__option:focus-visible { outline: none; box-shadow: var(--shadow-focus); } .lang-toggle--dark { background: var(--overlay-light-md); } .lang-toggle--dark .lang-toggle__option { color: rgba(255, 255, 255, 0.45); } .lang-toggle--dark .lang-toggle__option:hover { color: var(--neutral-white); } .lang-toggle--dark .lang-toggle__option[aria-current="true"] { background: rgba(255, 255, 255, 0.14); color: var(--neutral-white); box-shadow: none; border: 1px solid rgba(255, 255, 255, 0.10); } .btn { --btn-bg: var(--brand-teal); --btn-bg-hover: var(--brand-teal-dark); --btn-fg: var(--neutral-white); --btn-border: transparent; --btn-border-hover: transparent; --btn-py: var(--space-3); --btn-px: var(--space-6); --btn-font-size: var(--font-size-sm); --btn-radius: var(--radius-md); --btn-shadow: var(--shadow-none); display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--btn-py) var(--btn-px); font-family: var(--font-sans); font-size: var(--btn-font-size); font-weight: var(--font-weight-semibold); line-height: 1; text-decoration: none; background: var(--btn-bg); color: var(--btn-fg); border: 1px solid var(--btn-border); border-radius: var(--btn-radius); box-shadow: var(--btn-shadow); cursor: pointer; white-space: nowrap; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), transform var(--duration-instant) var(--ease-standard); } .btn:hover { background: var(--btn-bg-hover); border-color: var(--btn-border-hover); } .btn:active { transform: translateY(1px); } .btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); } .btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; pointer-events: none; } .btn-primary { --btn-primary-bg-legacy: var(--brand-teal); --btn-bg: var(--brand-teal-dark); --btn-bg-hover: var(--brand-teal-dark); --btn-fg: var(--neutral-white); } .btn-primary:hover { background: color-mix(in srgb, var(--brand-teal-dark) 88%, var(--neutral-text)); } .btn-secondary { --btn-bg: var(--brand-navy); --btn-bg-hover: var(--brand-navy-light); --btn-fg: var(--neutral-white); } .btn-danger { --btn-danger-bg-legacy: var(--brand-coral); --btn-bg: var(--brand-coral-dark); --btn-bg-hover: var(--brand-coral-dark); --btn-fg: var(--neutral-white); } .btn-danger:hover { background: color-mix(in srgb, var(--brand-coral-dark) 88%, var(--neutral-text)); } .btn-danger:focus-visible { box-shadow: var(--shadow-focus-danger); } .btn-ghost { --btn-bg: transparent; --btn-bg-hover: var(--neutral-gray-100); --btn-fg: var(--brand-navy); --btn-border: var(--neutral-gray-200); --btn-border-hover: var(--neutral-gray-400); } .btn-link { --btn-bg: transparent; --btn-bg-hover: transparent; --btn-fg: var(--brand-teal); --btn-border: transparent; padding-inline: var(--space-2); } .btn-link:hover { color: var(--brand-teal-dark); text-decoration: underline; text-underline-offset: 4px; } .btn-sm { --btn-py: var(--space-2); --btn-px: var(--space-4); --btn-font-size: var(--font-size-xs); } .btn-md { --btn-py: var(--space-3); --btn-px: var(--space-6); --btn-font-size: var(--font-size-sm); } .btn-lg { --btn-py: var(--space-4); --btn-px: var(--space-8); --btn-font-size: var(--font-size-md); } .btn-block { display: flex; width: 100%; } .btn-wrap { white-space: normal; text-align: center; line-height: var(--line-height-label); } .btn-icon { padding-inline: var(--space-3); aspect-ratio: 1; } .btn-icon.btn-sm { padding-inline: var(--space-2); } .btn-icon.btn-lg { padding-inline: var(--space-4); } .btn-ghost--inverse { --btn-bg: transparent; --btn-bg-hover: var(--overlay-light-sm); --btn-fg: var(--neutral-white); --btn-border: var(--overlay-light-lg); --btn-border-hover: var(--overlay-light-xl); } .btn-primary--on-coral { --btn-bg: var(--neutral-white); --btn-bg-hover: var(--neutral-gray-100); --btn-fg: var(--brand-navy); --btn-border: transparent; --btn-border-hover: transparent; } [data-theme="dark"] .btn-secondary { --btn-bg: var(--brand-navy-light); --btn-bg-hover: var(--overlay-light-sm); --btn-fg: var(--neutral-white); } .badge { --badge-bg: var(--neutral-gray-100); --badge-fg: var(--neutral-gray-800); --badge-dot: var(--neutral-gray-400); display: inline-flex; align-items: center; vertical-align: top; gap: var(--space-2); padding: var(--space-1) var(--space-3); font-family: var(--font-sans); font-size: var(--font-size-meta); font-weight: var(--font-weight-semibold); letter-spacing: 0.55px; text-transform: uppercase; background: var(--badge-bg); color: var(--badge-fg); border-radius: var(--radius-full); white-space: nowrap; } .badge::before { content: ""; display: block; width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--badge-dot); flex-shrink: 0; } .badge-no-dot::before { display: none; } .badge-info { --badge-bg: var(--brand-teal-light); --badge-fg: var(--brand-teal-dark); --badge-dot: var(--brand-teal); } .badge-success { --badge-bg: var(--brand-green-light); --badge-fg: var(--brand-green); --badge-dot: var(--brand-green); } .badge-warning { --badge-bg: var(--brand-yellow-light); --badge-fg: var(--brand-navy); --badge-dot: var(--brand-yellow); } .badge-danger { --badge-bg: var(--brand-coral-light); --badge-fg: var(--brand-coral-dark); --badge-dot: var(--brand-coral); } .badge-neutral { --badge-bg: var(--neutral-gray-100); --badge-fg: var(--neutral-gray-800); --badge-dot: var(--neutral-gray-400); } .badge-solid-teal { --badge-bg: var(--brand-teal); --badge-fg: var(--neutral-white); --badge-dot: var(--neutral-white); } .badge-solid-navy { --badge-bg: var(--brand-navy); --badge-fg: var(--neutral-white); --badge-dot: var(--brand-teal); } .badge-sm { font-size: var(--font-size-meta); padding: 2px var(--space-2); } .badge-sm::before { width: 5px; height: 5px; } .badge-xs { font-size: var(--font-size-meta-xs, 10px); padding: 1px var(--space-2); letter-spacing: 0.4px; } .badge-xs::before { width: 4px; height: 4px; } [data-theme="dark"] .badge-neutral { --badge-bg: var(--brand-navy-light); --badge-fg: var(--neutral-gray-200); --badge-dot: var(--neutral-gray-400); } [data-theme="dark"] .badge-info { --badge-bg: color-mix(in srgb, var(--brand-teal) 14%, transparent); --badge-fg: var(--brand-teal-light); --badge-dot: var(--brand-teal); } [data-theme="dark"] .badge-success { --badge-bg: color-mix(in srgb, var(--brand-green) 14%, transparent); --badge-fg: var(--brand-green-light); --badge-dot: var(--brand-green); } [data-theme="dark"] .badge-warning { --badge-bg: color-mix(in srgb, var(--brand-yellow) 18%, transparent); --badge-fg: var(--brand-yellow-light); --badge-dot: var(--brand-yellow); } [data-theme="dark"] .badge-danger { --badge-bg: color-mix(in srgb, var(--brand-coral) 16%, transparent); --badge-fg: var(--brand-coral-light); --badge-dot: var(--brand-coral); } .tag { --tag-fg: var(--neutral-gray-800); --tag-border: var(--neutral-gray-200); --tag-bg: transparent; display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3); font-family: var(--font-sans); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); line-height: var(--line-height-snug); color: var(--tag-fg); background: var(--tag-bg); border: 1px solid var(--tag-border); border-radius: var(--radius-sm); white-space: nowrap; } .tag-sm { padding: 2px var(--space-2); font-size: var(--font-size-xs); } .tag-teal { --tag-fg: var(--brand-teal-dark); --tag-border: var(--brand-teal); --tag-bg: var(--brand-teal-light); } .tag-coral { --tag-fg: var(--brand-coral-dark); --tag-border: var(--brand-coral); --tag-bg: var(--brand-coral-light); } .tag-navy { --tag-fg: var(--brand-navy); --tag-border: var(--brand-navy); --tag-bg: transparent; } .tag-green { --tag-fg: var(--brand-green-dark); --tag-border: var(--brand-green); --tag-bg: var(--brand-green-light); } .tag-warning { --tag-fg: var(--brand-yellow-dark); --tag-border: var(--brand-yellow); --tag-bg: var(--brand-yellow-light); } .tag__close { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-right: -6px; padding: 6px; background: transparent; border: none; border-radius: var(--radius-full); color: currentColor; font-size: var(--font-size-sm); line-height: 1; cursor: pointer; opacity: 0.6; transition: opacity var(--duration-fast) var(--ease-standard); } .tag__close:hover { opacity: 1; } [data-theme="dark"] .tag { --tag-fg: var(--neutral-gray-200); --tag-bg: var(--overlay-light-sm); --tag-border: var(--overlay-light-xl); } [data-theme="dark"] .tag-navy { --tag-fg: var(--neutral-white); --tag-border: var(--overlay-light-2xl); --tag-bg: var(--overlay-light-sm); } .alert { --alert-bg: var(--brand-teal-light); --alert-border: var(--brand-teal); --alert-title: var(--brand-teal-dark); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; column-gap: var(--space-3); row-gap: var(--space-1); padding: var(--space-4) var(--space-5); background: var(--alert-bg); border-left: 4px solid var(--alert-border); border-radius: var(--radius-md); font-family: var(--font-sans); font-size: var(--font-size-sm); line-height: var(--line-height-relaxed); color: var(--neutral-gray-600); } .alert__main { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; grid-column: 1; } .alert > .alert__title { grid-column: 1; min-width: 0; } .alert > .alert__body { grid-column: 1; min-width: 0; } .alert > .alert__close { grid-column: 2; grid-row: 1 / -1; align-self: start; } .alert__title { color: var(--alert-title); font-weight: var(--font-weight-regular); } .alert__body { color: var(--neutral-gray-600); min-width: 0; } .alert__close { flex: none; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: none; background: transparent; border-radius: var(--radius-sm); color: var(--neutral-gray-600); cursor: pointer; margin: -4px -8px -4px 0; transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .alert__close:hover { background: var(--overlay-dark-sm); color: var(--neutral-text); } .alert__close:focus-visible { outline: none; box-shadow: var(--shadow-focus); } .alert__close svg { width: 14px; height: 14px; fill: currentColor; display: block; } .alert-info { --alert-bg: var(--brand-teal-light); --alert-border: var(--brand-teal); --alert-title: var(--brand-teal-dark); } .alert-success { --alert-bg: var(--brand-green-light); --alert-border: var(--brand-green); --alert-title: var(--brand-green); } .alert-warning { --alert-bg: var(--brand-yellow-light); --alert-border: var(--brand-yellow); --alert-title: var(--brand-navy); } .alert-danger { --alert-bg: var(--brand-coral-light); --alert-border: var(--brand-coral-dark); --alert-title: var(--brand-coral-dark); } [data-theme="dark"] .alert__close { color: var(--neutral-gray-200); } [data-theme="dark"] .alert__close:hover { background: var(--hover-overlay-light); color: var(--neutral-white); } [data-theme="dark"] .alert-info { --alert-bg: #2c3a44; --alert-bg: color-mix(in srgb, var(--brand-teal) 12%, var(--dark-surface)); --alert-title: var(--brand-teal-light); } [data-theme="dark"] .alert-success { --alert-bg: #2a3a35; --alert-bg: color-mix(in srgb, var(--brand-green) 12%, var(--dark-surface)); --alert-title: var(--brand-green-light); } [data-theme="dark"] .alert-warning { --alert-bg: #353532; --alert-bg: color-mix(in srgb, var(--brand-yellow) 12%, var(--dark-surface)); --alert-title: var(--brand-yellow-light); } [data-theme="dark"] .alert-danger { --alert-bg: #3a2c2d; --alert-bg: color-mix(in srgb, var(--brand-coral) 12%, var(--dark-surface)); --alert-title: var(--brand-coral-light); } [data-theme="dark"] .alert, [data-theme="dark"] .alert__body { color: var(--neutral-gray-200); } .toast-stack { position: fixed; top: var(--space-6); right: var(--space-6); z-index: var(--z-toast, 1100); display: flex; flex-direction: column; gap: var(--space-3); max-width: 400px; pointer-events: none; } .toast-stack--bottom { top: auto; bottom: var(--space-6); } .toast-stack--center { right: 50%; transform: translateX(50%); } .toast-stack--top-left { right: auto; left: var(--space-6); } .toast-stack--bottom-left { right: auto; left: var(--space-6); top: auto; bottom: var(--space-6); } .toast-stack--bottom-right { top: auto; bottom: var(--space-6); } .toast { --toast-bg: var(--neutral-white); --toast-fg: var(--neutral-text); --toast-accent: var(--brand-navy); display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4); background: var(--toast-bg); color: var(--toast-fg); border: 1px solid var(--neutral-gray-200); border-left: 4px solid var(--toast-accent); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); font-family: var(--font-sans); font-size: var(--font-size-md); pointer-events: auto; animation: toast-in var(--duration-normal) var(--ease-out); } @keyframes toast-in { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } } .toast__icon { display: block; width: 20px; height: 20px; flex: none; color: var(--toast-accent); fill: currentColor; margin-top: 2px; } .toast__icon svg { display: block; width: 100%; height: 100%; fill: currentColor; } .toast__body { flex: 1; min-width: 0; } .toast__title { font-weight: var(--font-weight-semibold); margin-bottom: 2px; } .toast__desc { font-size: var(--font-size-sm); color: var(--neutral-gray-600); line-height: var(--line-height-body); } .toast__close { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: none; padding: 0; margin: -6px -6px -6px 0; background: transparent; border: none; border-radius: var(--radius-sm); color: var(--neutral-gray-400); cursor: pointer; transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .toast__close:hover { background: var(--neutral-gray-100); color: var(--neutral-gray-800); } .toast__close:focus-visible { outline: none; box-shadow: var(--shadow-focus); } .toast__close svg { display: block; width: 14px; height: 14px; fill: currentColor; } .toast-success { --toast-accent: var(--brand-green-strong); } .toast-warning { --toast-accent: var(--brand-yellow); } .toast-danger { --toast-accent: var(--brand-coral); } .toast-info { --toast-accent: var(--brand-teal); } .toast--filled.toast-success { --toast-bg: var(--brand-green-light); } .toast--filled.toast-warning { --toast-bg: var(--brand-yellow-light); } .toast--filled.toast-danger { --toast-bg: var(--brand-coral-light); } .toast--filled.toast-info { --toast-bg: var(--brand-teal-light); } .toast--filled { border-color: transparent; } .toast__action { display: inline-flex; align-items: center; padding: var(--space-1) var(--space-3); background: transparent; border: 1px solid currentColor; border-radius: var(--radius-sm); font-family: inherit; font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--toast-accent); cursor: pointer; white-space: nowrap; transition: background var(--duration-fast) var(--ease-standard); } .toast__action:hover { background: rgba(71, 193, 191, 0.12); } .toast__action:hover { background: color-mix(in srgb, var(--toast-accent) 12%, transparent); } [data-theme="dark"] .toast { --toast-bg: var(--brand-navy); --toast-fg: var(--neutral-white); border-color: var(--overlay-light-md); } [data-theme="dark"] .toast__desc { color: var(--neutral-gray-200); } .card { --card-bg: var(--neutral-white); --card-fg: var(--neutral-text); --card-border: var(--neutral-gray-200); --card-radius: var(--radius-lg); --card-pad: var(--space-6); --card-gap: var(--space-3); --card-shadow: var(--shadow-none); display: flex; flex-direction: column; gap: var(--card-gap); padding: var(--card-pad); background: var(--card-bg); color: var(--card-fg); border: 1px solid var(--card-border); border-radius: var(--card-radius); box-shadow: var(--card-shadow); } .card--elevated { --card-shadow: var(--shadow-md); --card-border: transparent; } .card-elevated { --card-shadow: var(--shadow-md); --card-border: transparent; } .card--accent-top { border-top: 4px solid var(--card-accent, var(--brand-teal)); } .card--accent-left { border-left: 4px solid var(--card-accent, var(--brand-teal)); } .card-hover { transition: box-shadow var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard); } .card-hover:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); } .card__title { font-family: var(--font-sans); font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-heading); color: var(--card-fg); } .card > .text-label { letter-spacing: var(--letter-spacing-normal); } .card__body { font-size: var(--font-size-sm); line-height: var(--line-height-relaxed); color: var(--neutral-gray-600); } .card-accent { border-top: 4px solid var(--card-accent, var(--brand-teal)); } .card-accent-teal { --card-accent: var(--brand-teal); } .card-accent-coral { --card-accent: var(--brand-coral); } .card-accent-green { --card-accent: var(--brand-green); } .card-accent-yellow { --card-accent: var(--brand-yellow); } .card-accent-navy { --card-accent: var(--brand-navy); } .card-metric { --card-pad: var(--space-5); --card-gap: var(--space-2); --card-radius: var(--radius-md); width: 100%; max-width: 220px; padding: 0; overflow: hidden; } .card-metric__strip { width: 100%; height: 4px; background: var(--card-accent, var(--brand-teal)); } .card-metric__body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); } .card-metric__label { font-family: var(--font-sans); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-wider); line-height: var(--line-height-label); color: var(--neutral-gray-600); text-transform: uppercase; } .card-metric__value { font-family: var(--font-sans); font-size: var(--font-size-3xl); font-weight: var(--font-weight-bold); letter-spacing: var(--letter-spacing-tight); line-height: var(--line-height-snug); color: var(--neutral-text); } .card-metric__hint { font-family: var(--font-sans); font-size: var(--font-size-xs); line-height: var(--line-height-relaxed); color: var(--neutral-gray-600); } .card-metric__trend { font-family: var(--font-sans); font-size: var(--font-size-xs); line-height: var(--line-height-relaxed); color: var(--brand-green); } .card-metric__trend.is-down { color: var(--brand-coral); } .card-metric.card-metric-danger { --card-accent: var(--brand-coral); } .card-metric.card-metric-warning { --card-accent: var(--brand-yellow); } .card-metric.card-metric-success { --card-accent: var(--brand-green); } .card-metric.card-metric-info { --card-accent: var(--brand-teal); } .card-dark { --card-bg: var(--brand-navy); --card-fg: var(--neutral-white); --card-border: transparent; --card-pad: var(--space-6); --card-gap: var(--space-3); } .card-dark .card__title { color: var(--neutral-white); } .card-dark .card__body { color: var(--neutral-gray-200); } .card-dark__label { font-family: var(--font-sans); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-wider); line-height: var(--line-height-label); color: var(--brand-teal); text-transform: uppercase; } .input, .textarea, .select { --input-bg: var(--neutral-white); --input-border: var(--neutral-gray-200); --input-border-hover: var(--neutral-gray-400); --input-border-focus: var(--brand-teal); --input-fg: var(--neutral-text); --input-placeholder: var(--neutral-gray-400); display: block; width: 100%; padding: var(--space-3) var(--space-4); font-family: var(--font-sans); font-size: var(--font-size-sm); line-height: var(--line-height-relaxed); color: var(--input-fg); background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--radius-md); transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .input::placeholder, .textarea::placeholder { color: var(--input-placeholder); } .input:hover, .textarea:hover, .select:hover { border-color: var(--input-border-hover); } .input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--input-border-focus); box-shadow: var(--shadow-focus); } .input:disabled, .textarea:disabled, .select:disabled { opacity: 0.6; cursor: not-allowed; background: var(--neutral-gray-100); } .input.is-invalid, .textarea.is-invalid { border-color: var(--brand-coral); } .input.is-invalid:focus, .textarea.is-invalid:focus { box-shadow: var(--shadow-focus-danger); } .input.is-valid, .textarea.is-valid { border-color: var(--brand-green); } .input-sm { padding: var(--space-2) var(--space-3); font-size: var(--font-size-xs); } .input-lg { padding: var(--space-4) var(--space-5); font-size: var(--font-size-md); } .textarea { min-height: 96px; resize: vertical; } .select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%236b6860' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--space-4) center; padding-right: var(--space-10); } .field { display: flex; flex-direction: column; gap: var(--space-2); } .field__label { font-family: var(--font-sans); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--neutral-text); } .field__hint { font-size: var(--font-size-xs); color: var(--neutral-gray-600); line-height: var(--line-height-relaxed); } .field__error { font-size: var(--font-size-xs); color: var(--brand-coral-dark); line-height: var(--line-height-relaxed); display: inline-flex; align-items: center; gap: var(--space-1); } .field:has(.is-invalid) .field__error::before { content: "⚠"; font-size: var(--font-size-sm); line-height: 1; } .field.is-invalid .field__error::before { content: "⚠"; font-size: var(--font-size-sm); line-height: 1; } .field__required { color: var(--brand-coral); margin-left: 2px; } .field-search { position: relative; display: block; } .field-search__icon { position: absolute; top: 50%; left: var(--space-4); width: 18px; height: 18px; transform: translateY(-50%); color: var(--neutral-gray-400); pointer-events: none; } .field-search .input { padding-left: calc(var(--space-4) + 18px + var(--space-3)); } .field-search:focus-within .field-search__icon { color: var(--brand-teal); } [data-theme="dark"] .field__label { color: var(--neutral-white); } [data-theme="dark"] .field__hint { color: var(--neutral-gray-200); } [data-theme="dark"] .field__error { color: var(--brand-coral-light); } .checkbox, .radio { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 24px; font-family: var(--font-sans); font-size: var(--font-size-sm); color: var(--neutral-text); cursor: pointer; user-select: none; } .checkbox input, .radio input { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; flex: none; margin: 0; background: var(--neutral-white); border: 1.5px solid var(--neutral-gray-400); cursor: pointer; display: inline-grid; place-content: center; transition: background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); } .checkbox input { border-radius: var(--radius-sm); } .radio input { border-radius: var(--radius-full); } .checkbox input:hover, .radio input:hover { border-color: var(--brand-teal); } .checkbox input:focus-visible, .radio input:focus-visible { outline: none; box-shadow: var(--shadow-focus); } .checkbox input:checked, .radio input:checked { background: var(--brand-teal); border-color: var(--brand-teal); } .checkbox input:checked::before { content: ""; width: 10px; height: 10px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none'%3E%3Cpath d='M2 5L4.2 7L8 3' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; } .radio input:checked::before { content: ""; width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--neutral-white); } .checkbox input:disabled, .radio input:disabled { opacity: 0.5; cursor: not-allowed; } [data-theme="dark"] .checkbox, [data-theme="dark"] .radio { color: var(--neutral-white); } [data-theme="dark"] .checkbox input, [data-theme="dark"] .radio input { background: var(--brand-navy-light); border-color: var(--overlay-light-xl); } .toggle-switch { display: inline-flex; align-items: center; min-height: 24px; gap: var(--space-3); font-family: var(--font-sans); font-size: var(--font-size-md); color: var(--neutral-text); cursor: pointer; user-select: none; } .toggle-switch__input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } .toggle-switch__track { position: relative; display: inline-block; width: 44px; height: 26px; flex: none; background: var(--neutral-gray-200); border-radius: var(--radius-full); transition: background var(--duration-fast) var(--ease-standard); } .toggle-switch__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; background: var(--neutral-white); border-radius: var(--radius-full); box-shadow: var(--shadow-sm); transition: transform var(--duration-fast) var(--ease-standard); } .toggle-switch__input:checked + .toggle-switch__track { background: var(--brand-teal); } .toggle-switch__input:checked + .toggle-switch__track::after { transform: translateX(18px); } .toggle-switch__input:focus-visible + .toggle-switch__track { box-shadow: var(--shadow-focus); } .toggle-switch__input:disabled + .toggle-switch__track { opacity: 0.5; cursor: not-allowed; } .toggle-switch__label { line-height: 1.3; } .toggle-switch--sm .toggle-switch__track { width: 36px; height: 22px; } .toggle-switch--sm .toggle-switch__track::after { width: 16px; height: 16px; } .toggle-switch--sm .toggle-switch__input:checked + .toggle-switch__track::after { transform: translateX(14px); } [data-theme="dark"] .toggle-switch__track { background: var(--overlay-light-lg); } [data-theme="dark"] .toggle-switch__input:checked + .toggle-switch__track { background: var(--brand-teal); } .modal { position: fixed; inset: 0; height: 100vh; height: 100svh; z-index: var(--z-modal); display: flex; align-items: center; justify-content: center; padding: calc(var(--space-4) + env(safe-area-inset-top, 0px)) calc(var(--space-4) + env(safe-area-inset-right, 0px)) calc(var(--space-4) + env(safe-area-inset-bottom, 0px)) calc(var(--space-4) + env(safe-area-inset-left, 0px)); } .modal[aria-hidden="true"] { display: none; } .modal__backdrop { position: absolute; inset: 0; background: var(--scrim-default); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); cursor: pointer; animation: modal-fade-in var(--duration-base) var(--ease-decelerate); } .modal__dialog { position: relative; display: flex; flex-direction: column; gap: 0; width: 100%; max-width: 480px; max-height: calc(100svh - var(--space-8) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); background: var(--neutral-white); color: var(--neutral-text); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); overflow: hidden; animation: modal-pop-in var(--duration-base) var(--ease-emphasized); } .modal__header { display: flex; align-items: flex-start; gap: var(--space-4); padding: var(--space-6) var(--space-6) var(--space-3); } .modal__title { flex: 1; font-family: var(--font-sans); font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-heading); color: var(--neutral-text); margin: 0; } .modal__subtitle { font-size: var(--font-size-sm); color: var(--neutral-gray-600); line-height: var(--line-height-relaxed); margin-top: var(--space-1); } .modal__close { flex-shrink: 0; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-md); color: var(--neutral-gray-600); font-size: var(--font-size-lg); line-height: 1; transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .modal__close:hover { background: var(--neutral-gray-100); color: var(--neutral-text); } .modal__body { flex: 1; overflow-y: auto; padding: 0 var(--space-6) var(--space-6); font-size: var(--font-size-sm); line-height: var(--line-height-relaxed); color: var(--neutral-gray-800); } .modal__footer { display: flex; gap: var(--space-3); justify-content: flex-end; padding: var(--space-4) var(--space-6); border-top: 1px solid var(--neutral-gray-200); background: var(--neutral-gray-100); } .modal-sm .modal__dialog { max-width: 360px; } .modal-md .modal__dialog { max-width: 480px; } .modal-lg .modal__dialog { max-width: 640px; } .modal-xl .modal__dialog { max-width: 800px; } @keyframes modal-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes modal-pop-in { from { opacity: 0; transform: scale(0.96) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } } .popup { position: absolute; z-index: var(--z-popup); display: flex; flex-direction: column; gap: var(--space-2); min-width: 240px; max-width: 360px; padding: var(--space-4); background: var(--neutral-white); color: var(--neutral-text); border: 1px solid var(--neutral-gray-200); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); font-family: var(--font-sans); font-size: var(--font-size-sm); line-height: var(--line-height-relaxed); } .popup[aria-hidden="true"] { display: none; } .popup__title { font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); color: var(--neutral-text); } .popup__body { color: var(--neutral-gray-600); } .popup__actions { display: flex; gap: var(--space-2); margin-top: var(--space-2); } .popup::before { content: ""; position: absolute; width: 12px; height: 12px; background: inherit; border: inherit; border-right: 0; border-bottom: 0; transform: rotate(45deg); } .popup-top::before { bottom: -7px; left: 24px; transform: rotate(-135deg); } .popup-bottom::before { top: -7px; left: 24px; } .popup-left::before { right: -7px; top: 24px; transform: rotate(-45deg); } .popup-right::before { left: -7px; top: 24px; transform: rotate(135deg); } [data-theme="dark"] .popup { background: var(--brand-navy); color: var(--neutral-white); border-color: var(--overlay-light-md); } [data-theme="dark"] .popup__title { color: var(--neutral-white); } [data-theme="dark"] .popup__body { color: var(--neutral-gray-200); } .tooltip-trigger { position: relative; display: inline-block; cursor: help; border-bottom: 1px dashed var(--neutral-gray-400); } .tooltip-trigger::after { content: attr(data-tooltip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px); padding: var(--space-2) var(--space-3); background: var(--brand-navy); color: var(--neutral-white); font-family: var(--font-sans); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); line-height: var(--line-height-label); max-width: 240px; white-space: normal; text-align: center; border-radius: var(--radius-md); box-shadow: var(--shadow-md); opacity: 0; pointer-events: none; z-index: var(--z-tooltip); transition: opacity var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); } .tooltip-trigger::before { content: ""; position: absolute; bottom: calc(100% + 2px); left: 50%; transform: translateX(-50%); width: 0; height: 0; border: 6px solid transparent; border-top-color: var(--brand-navy); opacity: 0; pointer-events: none; z-index: var(--z-tooltip); transition: opacity var(--duration-fast) var(--ease-standard); } .tooltip-trigger:hover::after, .tooltip-trigger:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); } .tooltip-trigger:hover::before, .tooltip-trigger:focus-visible::before { opacity: 1; } @media (hover: none) { .tooltip-trigger:active::after, .tooltip-trigger:active::before { opacity: 1; transform: translateX(-50%) translateY(0); } } .tooltip { display: inline-flex; align-items: center; padding: var(--space-2) var(--space-3); background: var(--brand-navy); color: var(--neutral-white); font-family: var(--font-sans); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); line-height: var(--line-height-label); border-radius: var(--radius-md); box-shadow: var(--shadow-md); } [data-theme="dark"] .tooltip-trigger { border-bottom-color: var(--neutral-gray-200); } .chatbot-fab, .chatbot-panel { --chatbot-fab-size: 56px; --icon-size-md: 24px; --ring-success-soft: 0 0 0 3px rgba(46, 204, 113, 0.20); --ring-success-soft: 0 0 0 3px color-mix(in srgb, var(--brand-green) 20%, transparent); } .chatbot-fab { position: fixed; right: var(--space-6); bottom: var(--space-6); z-index: var(--z-popup); width: var(--chatbot-fab-size); height: var(--chatbot-fab-size); display: inline-flex; align-items: center; justify-content: center; background: var(--brand-teal); color: var(--neutral-white); border: none; border-radius: var(--radius-full); box-shadow: var(--shadow-lg); cursor: pointer; transition: transform var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard); } .chatbot-fab:hover { background: var(--brand-teal-dark); transform: translateY(-2px); } .chatbot-fab:focus-visible { outline: none; box-shadow: var(--shadow-focus), var(--shadow-lg); } .chatbot-fab__icon { width: var(--icon-size-md); height: var(--icon-size-md); display: block; fill: currentColor; } .chatbot-panel { position: fixed; right: var(--space-6); bottom: calc(var(--space-6) + var(--chatbot-fab-size) + var(--space-5)); z-index: var(--z-popup); width: 360px; max-width: calc(100vw - var(--space-8)); height: 480px; max-height: calc(100vh - var(--space-20)); display: flex; flex-direction: column; background: var(--neutral-white); border: 1px solid var(--neutral-gray-200); border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); overflow: hidden; } .chatbot-panel[aria-hidden="true"] { display: none; } .chatbot-panel__header { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); background: var(--brand-navy); color: var(--neutral-white); } .chatbot-panel__title { flex: 1; font-family: var(--font-sans); font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); line-height: var(--line-height-label); } .chatbot-panel__status { font-size: var(--font-size-xs); color: var(--brand-teal-light); display: inline-flex; align-items: center; gap: var(--space-2); font-weight: var(--font-weight-medium); letter-spacing: var(--letter-spacing-wide); } .chatbot-panel__status::before { content: ""; width: 7px; height: 7px; background: var(--brand-green); border-radius: var(--radius-full); box-shadow: var(--ring-success-soft); } .chatbot-panel__messages { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); background: var(--neutral-bg); } .chatbot-msg { max-width: 80%; padding: var(--space-3) var(--space-4); font-family: var(--font-sans); font-size: var(--font-size-md); line-height: var(--line-height-relaxed); border-radius: var(--radius-lg); } .chatbot-msg-bot { align-self: flex-start; background: var(--neutral-white); color: var(--neutral-text); border: 1px solid var(--neutral-gray-200); border-bottom-left-radius: var(--radius-sm); } .chatbot-msg-user { align-self: flex-end; background: var(--brand-teal); color: var(--neutral-white); border-bottom-right-radius: var(--radius-sm); } .chatbot-quick-replies { align-self: flex-start; display: flex; flex-wrap: wrap; gap: var(--space-2); max-width: 90%; } .chatbot-quick-reply { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) 14px; background: var(--neutral-white); color: var(--brand-teal-dark); font-family: var(--font-sans); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); line-height: var(--line-height-snug); border: 1px solid var(--brand-teal); border-radius: var(--radius-full); cursor: pointer; transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), transform var(--duration-instant) var(--ease-standard); } .chatbot-quick-reply:hover { background: var(--brand-teal); color: var(--neutral-white); } .chatbot-quick-reply:active { transform: translateY(1px); } .chatbot-quick-reply:focus-visible { outline: none; box-shadow: var(--shadow-focus); } .chatbot-panel__composer { display: flex; gap: var(--space-2); padding: var(--space-3) var(--space-4); background: var(--neutral-white); border-top: 1px solid var(--neutral-gray-200); } .chatbot-panel__composer .input { flex: 1; } .chatbot-panel--no-input .chatbot-panel__composer { display: none; } .code-block { --code-bg: var(--dark-bg-base); --code-fg: var(--neutral-white); --code-muted: var(--neutral-gray-400); --code-border: var(--overlay-light-sm); position: relative; display: flex; flex-direction: column; background: var(--code-bg); color: var(--code-fg); border: 1px solid var(--code-border); border-radius: var(--radius-md); overflow: hidden; font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; font-size: var(--font-size-sm); line-height: var(--line-height-relaxed); } .code-block__header { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); background: var(--overlay-light-xs); border-bottom: 1px solid var(--code-border); font-family: var(--font-sans); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-wide); text-transform: uppercase; color: var(--code-muted); } .code-block__lang { display: inline-flex; align-items: center; gap: var(--space-2); } .code-block__lang::before { content: ""; width: 8px; height: 8px; background: var(--brand-teal); border-radius: var(--radius-full); } .code-block__copy { min-width: 28px; min-height: 28px; padding: 7px var(--space-3); margin-left: auto; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); background: transparent; color: var(--code-muted); border: 1px solid var(--code-border); border-radius: var(--radius-sm); font-family: var(--font-sans); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); letter-spacing: 0; text-transform: none; cursor: pointer; transition: color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard); } .code-block__copy:hover { color: var(--code-fg); border-color: var(--overlay-light-lg); background: var(--overlay-light-xs); } .code-block__copy:focus-visible { outline: none; box-shadow: var(--shadow-focus); } .code-block__copy-icon { width: 14px; height: 14px; fill: currentColor; } .code-block:not(:has(.code-block__header)) .code-block__copy { position: absolute; top: var(--space-2); right: var(--space-2); margin-left: 0; } .code-block__pre { margin: 0; padding: var(--space-4) var(--space-5); overflow-x: auto; background: transparent; color: inherit; font-family: inherit; font-size: inherit; line-height: inherit; white-space: pre; tab-size: 2; } .code-block__pre code { font-family: inherit; background: transparent; color: inherit; padding: 0; border-radius: 0; } .code-block .tok-keyword { color: var(--syntax-keyword); } .code-block .tok-string { color: var(--syntax-string); } .code-block .tok-comment { color: var(--syntax-comment); font-style: italic; } .code-block .tok-number { color: var(--syntax-number); } .code-block .tok-fn { color: var(--syntax-fn); } .avatar { --avatar-size: 40px; --avatar-fs: 14px; display: inline-flex; align-items: center; justify-content: center; flex: none; width: var(--avatar-size); height: var(--avatar-size); background: var(--brand-teal); color: var(--neutral-white); font-family: var(--font-sans); font-size: var(--avatar-fs); font-weight: var(--font-weight-semibold); letter-spacing: 0; line-height: 1; border-radius: var(--radius-full); overflow: hidden; user-select: none; } .avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .avatar--square { border-radius: var(--radius-md); } .avatar--xs { --avatar-size: 24px; --avatar-fs: var(--font-size-meta); } .avatar--sm { --avatar-size: 32px; --avatar-fs: 12px; } .avatar--md { --avatar-size: 40px; --avatar-fs: 14px; } .avatar--lg { --avatar-size: 56px; --avatar-fs: 18px; } .avatar--xl { --avatar-size: 80px; --avatar-fs: 24px; } .avatar--coral { background: var(--brand-coral); } .avatar--navy { background: var(--brand-navy); } .avatar--green { background: var(--brand-green); } .avatar-stack { display: inline-flex; align-items: center; } .avatar-stack .avatar { margin-left: -8px; border: 2px solid var(--neutral-white); } .avatar-stack .avatar:first-child { margin-left: 0; } [data-theme="dark"] .avatar-stack .avatar { border-color: var(--brand-navy); } .divider { display: block; width: 100%; height: 1px; background: var(--neutral-gray-200); border: none; margin: var(--space-6) 0; } .divider-vertical { display: inline-block; width: 1px; height: 1em; background: var(--neutral-gray-200); margin: 0 var(--space-3); vertical-align: middle; } .divider-labeled { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-6) 0; font-family: var(--font-sans); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-wide); text-transform: uppercase; color: var(--neutral-gray-600); } .divider-labeled::before, .divider-labeled::after { content: ""; flex: 1; height: 1px; background: var(--neutral-gray-200); } .divider-section { display: flex; align-items: center; gap: var(--space-4); margin: var(--space-8) 0; font-family: var(--font-sans); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-kicker); text-transform: uppercase; color: var(--brand-teal-dark); } .divider-section span { flex: none; padding: var(--space-1) var(--space-3); background: var(--brand-teal-light); border-radius: var(--radius-sm); white-space: nowrap; } .divider-section::after { content: ""; flex: 1; height: 1px; background: var(--neutral-gray-200); } [data-theme="dark"] .divider, [data-theme="dark"] .divider-vertical { background: var(--overlay-light-md); } [data-theme="dark"] .divider-labeled { color: var(--neutral-gray-200); } [data-theme="dark"] .divider-labeled::before, [data-theme="dark"] .divider-labeled::after { background: var(--overlay-light-md); } [data-theme="dark"] .divider-section { color: var(--brand-teal); } [data-theme="dark"] .divider-section span { background: rgba(71, 193, 191, 0.15); } [data-theme="dark"] .divider-section span { background: color-mix(in srgb, var(--brand-teal) 15%, transparent); } [data-theme="dark"] .divider-section::after { background: var(--overlay-light-md); } .skeleton { display: block; background: linear-gradient( 90deg, var(--neutral-gray-100) 0%, var(--neutral-gray-200) 50%, var(--neutral-gray-100) 100% ); background-size: 200% 100%; border-radius: var(--radius-sm); animation: skeleton-shimmer 1.4s ease-in-out infinite; height: 14px; width: 100%; } @keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .skeleton-title { height: 22px; width: 60%; border-radius: var(--radius-sm); } .skeleton-circle { width: 40px; height: 40px; border-radius: var(--radius-full); } .skeleton-rect { height: 120px; border-radius: var(--radius-md); } [data-theme="dark"] .skeleton { background: linear-gradient( 90deg, var(--hover-overlay-light) 0%, var(--overlay-light-md) 50%, var(--hover-overlay-light) 100% ); background-size: 200% 100%; } .tabs { display: flex; align-items: center; font-family: var(--font-sans); gap: 0; } .tabs__item { appearance: none; background: transparent; border: none; padding: var(--space-3) var(--space-4); font-family: inherit; font-size: var(--font-size-md); font-weight: var(--font-weight-medium); color: var(--neutral-gray-600); cursor: pointer; text-decoration: none; transition: color var(--duration-fast) var(--ease-standard); } .tabs__item:hover { color: var(--neutral-text); } .tabs__item:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); } .tabs-underline { border-bottom: 1px solid var(--neutral-gray-200); gap: var(--space-1); } .tabs-underline .tabs__item { position: relative; padding-bottom: calc(var(--space-3) + 2px); } .tabs-underline .tabs__item[aria-selected="true"], .tabs-underline .tabs__item.is-active { color: var(--brand-teal); font-weight: var(--font-weight-bold); } .tabs-underline .tabs__item[aria-selected="true"]::after, .tabs-underline .tabs__item.is-active::after { content: ""; position: absolute; bottom: -1px; left: var(--space-3); right: var(--space-3); height: 2px; background: var(--brand-teal); border-radius: 2px 2px 0 0; } .tabs-pill { display: inline-flex; padding: var(--space-1); background: var(--neutral-gray-100); border-radius: var(--radius-full); gap: 2px; } .tabs-pill .tabs__item { padding: var(--space-2) var(--space-4); border-radius: var(--radius-full); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); } .tabs-pill .tabs__item[aria-selected="true"], .tabs-pill .tabs__item.is-active { background: var(--neutral-white); color: var(--brand-navy); box-shadow: var(--shadow-sm); } [data-theme="dark"] .tabs-underline { border-bottom-color: var(--overlay-light-md); } [data-theme="dark"] .tabs-pill { background: var(--overlay-light-sm); } [data-theme="dark"] .tabs-pill .tabs__item[aria-selected="true"], [data-theme="dark"] .tabs-pill .tabs__item.is-active { background: var(--brand-navy-light); color: var(--neutral-white); } .breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: 0; margin: 0; list-style: none; font-family: var(--font-sans); font-size: var(--font-size-sm); color: var(--neutral-gray-600); } .breadcrumb__item { display: inline-flex; align-items: center; gap: var(--space-2); } .breadcrumb__link { color: var(--neutral-gray-600); text-decoration: none; transition: color var(--duration-fast) var(--ease-standard); } .breadcrumb__link:hover { color: var(--brand-teal); } .breadcrumb__item:not(:last-child)::after { content: ""; display: inline-block; width: 8px; height: 8px; margin-left: var(--space-2); background-color: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z'/%3E%3C/svg%3E") no-repeat center / contain; opacity: 0.5; } .breadcrumb__item--current, .breadcrumb__item[aria-current="page"] { color: var(--brand-navy); font-weight: var(--font-weight-semibold); } .breadcrumb-slash .breadcrumb__item:not(:last-child)::after { content: "/"; width: auto; height: auto; background: none; -webkit-mask: none; mask: none; border: none; transform: none; opacity: 0.6; margin-left: 0; } [data-theme="dark"] .breadcrumb, [data-theme="dark"] .breadcrumb__link { color: var(--neutral-gray-200); } [data-theme="dark"] .breadcrumb__item--current, [data-theme="dark"] .breadcrumb__item[aria-current="page"] { color: var(--neutral-white); } .pagination { display: inline-flex; align-items: center; gap: var(--space-1); padding: 0; margin: 0; list-style: none; font-family: var(--font-sans); } .pagination__item { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 10px; background: transparent; color: var(--neutral-gray-800); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); border: 1px solid transparent; border-radius: var(--radius-md); cursor: pointer; text-decoration: none; transition: background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .pagination__item:hover { background: var(--neutral-gray-100); border-color: var(--neutral-gray-200); } .pagination__item:focus-visible { outline: none; box-shadow: var(--shadow-focus); } .pagination__item[aria-current="page"], .pagination__item.is-active { background: var(--brand-teal); color: var(--neutral-white); border-color: var(--brand-teal); } .pagination__item[aria-current="page"]:hover, .pagination__item.is-active:hover { background: var(--brand-teal-dark); border-color: var(--brand-teal-dark); } .pagination__item[disabled], .pagination__item[aria-disabled="true"] { opacity: 0.4; pointer-events: none; } .pagination__ellipsis { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; color: var(--neutral-gray-400); font-size: var(--font-size-sm); } .pagination--bordered .pagination__item { border-color: var(--neutral-gray-200); } .pagination--bordered .pagination__item:hover { background: var(--neutral-gray-100); border-color: var(--neutral-gray-400); } .pagination--bordered .pagination__item[aria-current="page"], .pagination--bordered .pagination__item.is-active { background: var(--brand-teal); border-color: var(--brand-teal); color: var(--neutral-white); } [data-theme="dark"] .pagination__item { color: var(--neutral-white); } [data-theme="dark"] .pagination__item:hover { background: var(--overlay-light-sm); border-color: var(--overlay-light-lg); } [data-theme="dark"] .pagination--bordered .pagination__item { border-color: var(--overlay-light-lg); } .progress { display: flex; flex-direction: column; gap: var(--space-2); font-family: var(--font-sans); } .progress__head { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--font-size-sm); color: var(--neutral-gray-600); } .progress__label { font-weight: var(--font-weight-medium); color: var(--neutral-text); } .progress__value { font-family: var(--font-mono); font-feature-settings: "tnum" 1; font-variant-numeric: tabular-nums; } .progress-bar { position: relative; width: 100%; height: 8px; background: var(--neutral-gray-100); border-radius: var(--radius-full); overflow: hidden; } :where(.progress-bar__fill) { height: 100%; background: var(--brand-teal); border-radius: var(--radius-full); transition: width var(--duration-normal) var(--ease-standard); } .progress-bar--coral .progress-bar__fill { background: var(--brand-coral); } .progress-bar--navy .progress-bar__fill { background: var(--brand-navy); } .progress-bar--green .progress-bar__fill { background: var(--brand-green); } .progress-bar--warning .progress-bar__fill { background: var(--brand-yellow); } .progress-bar--gradient .progress-bar__fill { background: linear-gradient(90deg, var(--brand-teal), var(--brand-green)); } .progress-bar--indeterminate .progress-bar__fill { width: 30% !important; animation: progress-indet 1.6s ease-in-out infinite; } @keyframes progress-indet { 0% { transform: translateX(-100%); } 100% { transform: translateX(380%); } } [data-theme="dark"] .progress-bar { background: var(--overlay-light-md); } [data-theme="dark"] .progress__head { color: var(--neutral-gray-200); } [data-theme="dark"] .progress__label { color: var(--neutral-white); } .table-wrapper { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--neutral-gray-200); border-radius: var(--radius-md); background: var(--neutral-white); background-image: linear-gradient(to right, var(--neutral-white), var(--neutral-white)), linear-gradient(to right, var(--neutral-white), var(--neutral-white)), var(--scroll-fade-light), linear-gradient(to left, rgba(0, 0, 0, 0.16), transparent); background-position: left center, right center, left center, right center; background-repeat: no-repeat; background-size: 24px 100%, 24px 100%, 24px 100%, 24px 100%; background-attachment: local, local, scroll, scroll; } .table { width: 100%; min-width: 560px; border-collapse: collapse; font-family: var(--font-sans); font-size: var(--font-size-md); color: var(--neutral-text); } .table thead th { background: var(--neutral-gray-100); color: var(--neutral-gray-800); font-weight: var(--font-weight-semibold); font-size: var(--font-size-sm); letter-spacing: var(--letter-spacing-wide); text-transform: uppercase; text-align: left; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--neutral-gray-200); white-space: nowrap; } .table tbody td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--neutral-gray-100); vertical-align: middle; } .table tbody tr:last-child td { border-bottom: none; } .table--compact thead th, .table--compact tbody td { padding: var(--space-2) var(--space-3); } .table--comfortable thead th, .table--comfortable tbody td { padding: var(--space-4) var(--space-5); } .table--zebra tbody tr:nth-child(even) td { background: var(--neutral-bg); } .table--zebra tbody tr:hover td { background: var(--brand-teal-light); } .table--hover tbody tr:hover td { background: var(--brand-teal-light); } .table--bordered td, .table--bordered th { border-right: 1px solid var(--neutral-gray-100); } .table--bordered td:last-child, .table--bordered th:last-child { border-right: none; } .table__num { text-align: right; } .table thead th.table__num { text-align: right; } td.table__num { font-family: var(--font-mono); font-feature-settings: "tnum" 1; font-variant-numeric: tabular-nums; } .table--navy-header thead th { background: var(--brand-navy); color: var(--neutral-white); border-bottom-color: var(--brand-navy-light); letter-spacing: var(--letter-spacing-wider); } .table--navy-header.table--zebra tbody tr:nth-child(even) td { background: var(--neutral-bg); } .table--navy-header.table--zebra tbody tr:hover td { background: var(--brand-teal-light); } .table--backlog thead th { background: var(--brand-navy); color: var(--neutral-white); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-kicker); text-transform: uppercase; border-bottom: none; } .table--backlog tbody tr:hover td { background: var(--neutral-gray-100); } .table__seq { font-family: var(--font-mono); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--neutral-gray-400); width: 40px; white-space: nowrap; } .star-rating { display: inline-flex; gap: 1px; font-size: var(--font-size-md); line-height: 1; vertical-align: middle; } .star--off { color: var(--neutral-gray-200); } .table__stars[data-impact="critical"] .star--on { color: var(--brand-coral); } .table__stars[data-impact="medium"] .star--on { color: var(--brand-yellow); } .table__stars[data-impact="low"] .star--on { color: var(--brand-teal); } .table__stars { white-space: nowrap; } .table__priority { white-space: nowrap; } .table--striped thead th { background: var(--brand-navy); color: var(--neutral-white); font-size: var(--font-size-xs); letter-spacing: var(--letter-spacing-wider); text-transform: uppercase; font-weight: var(--font-weight-semibold); border-bottom: none; } .table--striped tbody tr:nth-child(even) td { background: var(--neutral-bg); } .table--striped tbody tr:hover td { background: var(--brand-teal-light); } .table tbody tr.table__row--accent-teal td { background: var(--brand-teal-light); } .table tbody tr.table__row--accent-coral td { background: var(--brand-coral-light); } .table tbody tr.table__row--accent-yellow td { background: var(--brand-yellow-light); } .table tbody tr.table__row--accent-green td { background: var(--brand-green-light); } .table tbody tr.table__row--accent-teal td:first-child { box-shadow: inset 4px 0 0 var(--brand-teal); } .table tbody tr.table__row--accent-coral td:first-child { box-shadow: inset 4px 0 0 var(--brand-coral); } .table tbody tr.table__row--accent-yellow td:first-child { box-shadow: inset 4px 0 0 var(--brand-yellow); } .table tbody tr.table__row--accent-green td:first-child { box-shadow: inset 4px 0 0 var(--brand-green); } [data-theme="dark"] .table-wrapper { background: var(--brand-navy); border-color: var(--overlay-light-md); background-image: linear-gradient(to right, var(--brand-navy), var(--brand-navy)), linear-gradient(to right, var(--brand-navy), var(--brand-navy)), var(--scroll-fade-dark), linear-gradient(to left, rgba(0, 0, 0, 0.55), transparent); background-size: 24px 100%, 24px 100%, 24px 100%, 24px 100%; } @media (max-width: 480px) { .table--stack-mobile { min-width: 0; } .table--stack-mobile thead { display: none; } .table--stack-mobile tbody tr { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--neutral-gray-200); } .table--stack-mobile tbody td { display: flex; justify-content: space-between; gap: var(--space-3); padding: 0; border: none; } .table--stack-mobile tbody td::before { content: attr(data-label); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-wide); color: var(--neutral-gray-600); text-transform: uppercase; flex: none; } .table--stack-mobile tbody td:empty::before { display: none; } } [data-theme="dark"] .table { color: var(--neutral-white); } [data-theme="dark"] .table thead th { background: var(--brand-navy-light); color: var(--neutral-gray-200); border-bottom-color: var(--overlay-light-md); } [data-theme="dark"] .table tbody td { border-bottom-color: var(--overlay-light-sm); } [data-theme="dark"] .table--zebra tbody tr:nth-child(even) td { background: var(--overlay-light-xs); } [data-theme="dark"] .table--zebra tbody tr:hover td { background: color-mix(in srgb, var(--brand-teal) 16%, transparent); } [data-theme="dark"] .table--hover tbody tr:hover td { background: color-mix(in srgb, var(--brand-teal) 12%, transparent); } [data-theme="dark"] .table--striped tbody tr:hover td { background: color-mix(in srgb, var(--brand-teal) 16%, transparent); } [data-theme="dark"] .star--off { color: var(--overlay-light-lg); } [data-theme="dark"] .table__seq { color: var(--neutral-gray-400); } .user-card { display: flex; align-items: flex-start; gap: var(--space-4); padding: var(--space-5); background: var(--neutral-white); border: 1px solid var(--neutral-gray-200); border-radius: var(--radius-md); font-family: var(--font-sans); } .user-card__body { flex: 1; min-width: 0; } .user-card__name { font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); color: var(--neutral-text); margin-bottom: 2px; line-height: var(--line-height-snug); } .user-card__role { font-size: var(--font-size-sm); color: var(--neutral-gray-600); line-height: var(--line-height-label); } .user-card__meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-top: var(--space-3); font-size: var(--font-size-sm); color: var(--neutral-gray-600); } .user-card__meta-item { display: inline-flex; align-items: center; gap: var(--space-2); } .user-card__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); } .user-card--compact { padding: var(--space-3); gap: var(--space-3); } .user-card--compact .user-card__name { font-size: var(--font-size-sm); } .user-card--compact .user-card__role { font-size: var(--font-size-xs); } [data-theme="dark"] .user-card { background: var(--brand-navy); border-color: var(--overlay-light-md); } [data-theme="dark"] .user-card__name { color: var(--neutral-white); } [data-theme="dark"] .user-card__role, [data-theme="dark"] .user-card__meta { color: var(--neutral-gray-200); } .stat-list { display: grid; gap: 1px; background: var(--neutral-gray-200); border: 1px solid var(--neutral-gray-200); border-radius: var(--radius-md); overflow: hidden; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } .stat { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); background: var(--neutral-white); font-family: var(--font-sans); } .stat__label { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-wide); text-transform: uppercase; color: var(--neutral-gray-600); } .stat__value { font-family: var(--font-mono); font-size: var(--font-size-3xl); font-weight: var(--font-weight-bold); color: var(--neutral-text); line-height: var(--line-height-tight); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "lnum" 1; } .stat__trend { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); } .stat__trend--up { color: var(--brand-green-dark); } .stat__trend--down { color: var(--brand-coral-dark); } .stat__trend--flat { color: var(--neutral-gray-600); } .stat__trend::before { content: ""; display: inline-block; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; } .stat__trend--up::before { border-bottom: 5px solid currentColor; } .stat__trend--down::before { border-top: 5px solid currentColor; } .stat__trend--flat::before { border-bottom: none; border-top: none; height: 2px; width: 8px; background: currentColor; } .stat__hint { font-size: var(--font-size-sm); color: var(--neutral-gray-600); line-height: var(--line-height-label); } [data-theme="dark"] .stat-list { background: var(--overlay-light-md); border-color: var(--overlay-light-md); } [data-theme="dark"] .stat { background: var(--brand-navy); } [data-theme="dark"] .stat__label { color: var(--neutral-gray-200); } [data-theme="dark"] .stat__value { color: var(--neutral-white); } [data-theme="dark"] .stat__hint { color: var(--neutral-gray-200); } .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--space-3); padding: var(--space-12) var(--space-6); font-family: var(--font-sans); color: var(--neutral-text); } .empty-state__icon { width: var(--space-16); height: var(--space-16); display: inline-flex; align-items: center; justify-content: center; background: var(--brand-teal-light); color: var(--brand-teal-dark); border-radius: var(--radius-full); margin-bottom: var(--space-2); } .empty-state__icon svg { width: var(--space-6); height: var(--space-6); fill: currentColor; } .empty-state__title { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); margin: 0; } .empty-state__desc { font-size: var(--font-size-md); color: var(--neutral-gray-600); max-width: 480px; line-height: var(--line-height-body); margin: 0; } .empty-state__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); justify-content: center; } [data-theme="dark"] .empty-state__icon { background: rgba(71, 193, 191, 0.12); background: color-mix(in srgb, var(--brand-teal) 12%, transparent); color: var(--brand-teal-light); } [data-theme="dark"] .empty-state__title { color: var(--neutral-white); } [data-theme="dark"] .empty-state__desc { color: var(--neutral-gray-200); } .card--issue { position: relative; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); background: var(--neutral-white); border: 1px solid var(--neutral-gray-200); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; } .card--issue__watermark { position: absolute; top: var(--space-4); right: var(--space-5); font-family: var(--font-mono); font-size: var(--font-size-watermark); font-weight: var(--font-weight-bold); line-height: 1; color: color-mix(in srgb, var(--neutral-text) 8%, transparent); letter-spacing: var(--letter-spacing-tighter); user-select: none; pointer-events: none; z-index: 0; } .card--issue__header { position: relative; z-index: 1; } .card--issue__title { font-family: var(--font-sans); font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); line-height: var(--line-height-heading); color: var(--neutral-text); margin: 0; position: relative; z-index: 1; } .card--issue__body { font-family: var(--font-sans); font-size: var(--font-size-sm); line-height: var(--line-height-body); color: var(--neutral-gray-600); position: relative; z-index: 1; } .card--issue__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); position: relative; z-index: 1; } .card--issue__list-item { display: flex; align-items: flex-start; gap: var(--space-2); font-family: var(--font-sans); font-size: var(--font-size-sm); color: var(--neutral-gray-800); line-height: var(--line-height-body); } .card--issue__list-item svg { display: block; width: 12px; height: 12px; flex: none; fill: var(--brand-teal); margin-top: 3px; } .card--issue__estimate { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3); background: var(--neutral-gray-100); border-radius: var(--radius-full); font-family: var(--font-sans); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--neutral-gray-600); align-self: flex-start; position: relative; z-index: 1; } .card--issue__estimate svg { display: block; width: 12px; height: 12px; fill: var(--neutral-gray-400); } .badge--outlined-coral { background: transparent; color: var(--brand-coral-dark); border: 1.5px solid var(--brand-coral); } .badge--outlined-teal { background: transparent; color: var(--brand-teal-dark); border: 1.5px solid var(--brand-teal); } .badge--outlined-navy { background: transparent; color: var(--brand-navy-light); border: 1.5px solid var(--brand-navy); } .card--metric-tile { --tile-number-color: var(--brand-teal); display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); background: var(--brand-navy); border: 1px solid var(--overlay-light-sm); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); } .card--metric-tile__number { font-family: var(--font-sans); font-size: var(--font-size-4xl); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); letter-spacing: var(--letter-spacing-tighter); color: var(--tile-number-color); } .card--metric-tile__label { font-family: var(--font-sans); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); letter-spacing: var(--letter-spacing-wide); color: color-mix(in srgb, var(--neutral-white) 45%, transparent); text-transform: uppercase; line-height: var(--line-height-label); } .card--metric-tile__status { display: inline-flex; align-items: center; align-self: flex-start; padding: 3px var(--space-3); border-radius: var(--radius-full); font-family: var(--font-sans); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-wide); margin-top: auto; } .card--metric-tile__status--excellent { background: color-mix(in srgb, var(--brand-teal) 20%, transparent); color: var(--brand-teal); } .card--metric-tile__status--good { background: color-mix(in srgb, var(--brand-green) 20%, transparent); color: var(--brand-green); } .card--metric-tile__status--investigate { background: color-mix(in srgb, var(--brand-coral) 20%, transparent); color: var(--brand-coral); } .card--metric-tile--positive { --tile-number-color: var(--brand-teal); } .card--metric-tile--negative { --tile-number-color: var(--brand-coral); } .card--metric-tile--neutral { --tile-number-color: var(--brand-yellow); } .card--month { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); background: var(--neutral-white); border: 1px solid var(--neutral-gray-200); border-top: 4px solid var(--brand-teal); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .card--month__label { font-family: var(--font-sans); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); letter-spacing: var(--letter-spacing-kicker); text-transform: uppercase; color: var(--brand-teal); line-height: 1; } .card--month__estimate { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-sans); font-size: var(--font-size-xs); color: var(--neutral-gray-400); margin-top: var(--space-1); } .card--month__estimate svg { display: block; width: 12px; height: 12px; fill: currentColor; flex: none; } .card--month__heading { font-family: var(--font-sans); font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); line-height: var(--line-height-heading); color: var(--neutral-text); margin: 0; } .card--month__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); } .card--month__list-item { display: flex; align-items: flex-start; gap: var(--space-2); font-family: var(--font-sans); font-size: var(--font-size-sm); color: var(--neutral-gray-800); line-height: var(--line-height-body); } .card--month__list-item svg { display: block; width: 12px; height: 12px; flex: none; fill: var(--brand-teal); margin-top: 3px; } .card--month__cta { padding: var(--space-3) var(--space-4); background: var(--brand-teal-light); border-radius: var(--radius-md); font-family: var(--font-sans); font-size: var(--font-size-sm); font-style: italic; color: var(--brand-teal-dark); font-weight: var(--font-weight-medium); line-height: var(--line-height-body); margin-top: auto; } .infra-check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-4); } .infra-check-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); background: var(--neutral-white); border: 1px solid var(--neutral-gray-200); border-radius: var(--radius-md); box-shadow: var(--shadow-xs); } .infra-check-item--fail { border-color: var(--brand-coral); border-left-width: 4px; background: var(--brand-coral-light); } .infra-check-item__icon { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-full); flex: none; } .infra-check-item--pass .infra-check-item__icon { background: var(--brand-green-light); } .infra-check-item--fail .infra-check-item__icon { background: var(--brand-coral-light); } .infra-check-item__icon svg { display: block; width: 14px; height: 14px; fill: currentColor; } .infra-check-item--pass .infra-check-item__icon svg { color: var(--brand-green); } .infra-check-item--fail .infra-check-item__icon svg { color: var(--brand-coral); } .infra-check-item__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .infra-check-item__label { font-family: var(--font-sans); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--neutral-text); line-height: var(--line-height-label); } .infra-check-item__sub { font-family: var(--font-sans); font-size: var(--font-size-xs); color: var(--neutral-gray-600); line-height: var(--line-height-label); } [data-theme="dark"] .card--issue { background: var(--brand-navy); border-color: var(--overlay-light-md); } [data-theme="dark"] .card--issue__title { color: var(--neutral-white); } [data-theme="dark"] .card--issue__body { color: var(--neutral-gray-200); } [data-theme="dark"] .card--issue__list-item { color: var(--neutral-gray-200); } [data-theme="dark"] .card--issue__estimate { background: var(--overlay-light-sm); color: var(--neutral-gray-200); } [data-theme="dark"] .card--issue__watermark { color: color-mix(in srgb, var(--neutral-white) 8%, transparent); } [data-theme="dark"] .card--month { background: var(--brand-navy); border-color: var(--overlay-light-md); } [data-theme="dark"] .card--month__heading { color: var(--neutral-white); } [data-theme="dark"] .card--month__list-item { color: var(--neutral-gray-200); } [data-theme="dark"] .card--month__cta { background: color-mix(in srgb, var(--brand-teal) 12%, transparent); color: var(--brand-teal); } [data-theme="dark"] .infra-check-item { background: var(--brand-navy); border-color: var(--overlay-light-md); } [data-theme="dark"] .infra-check-item--fail { background: color-mix(in srgb, var(--brand-coral) 8%, transparent); border-color: var(--brand-coral-dark); } [data-theme="dark"] .infra-check-item__label { color: var(--neutral-white); } [data-theme="dark"] .infra-check-item__sub { color: var(--neutral-gray-200); } .issue-item { --issue-color: var(--neutral-gray-400); display: flex; align-items: flex-start; gap: var(--space-4); padding: var(--space-4) var(--space-5); background: var(--neutral-gray-100); border-left: 4px solid var(--issue-color); border-radius: var(--radius-md); font-family: var(--font-sans); } .issue-item + .issue-item { margin-top: var(--space-2); } .issue-item__marker { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex: none; border-radius: var(--radius-full); background: rgba(107, 104, 96, 0.18); background: color-mix(in srgb, var(--issue-color) 18%, transparent); color: var(--issue-color); font-family: var(--font-mono); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); } .issue-item__marker svg { width: 14px; height: 14px; fill: currentColor; display: block; } .issue-item__body { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; } .issue-item__title { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--neutral-text); line-height: var(--line-height-label); margin: 0; } .issue-item__desc { font-size: var(--font-size-xs); color: var(--neutral-gray-600); line-height: var(--line-height-relaxed); margin: 0; } .issue-item--critical { --issue-color: var(--brand-coral); } .issue-item--warning { --issue-color: var(--brand-yellow); } .issue-item--info { --issue-color: var(--brand-teal); } .issue-item--good { --issue-color: var(--brand-green); } [data-theme="dark"] .issue-item { background: var(--dark-surface); } [data-theme="dark"] .issue-item__title { color: var(--neutral-white); } [data-theme="dark"] .issue-item__desc { color: color-mix(in srgb, var(--neutral-white) 65%, transparent); } .hamburger { --hamburger-fg: var(--neutral-text); --hamburger-bg: transparent; --hamburger-border: var(--neutral-gray-200); --hamburger-fg-hover: var(--brand-teal); display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; background: var(--hamburger-bg); border: 1px solid var(--hamburger-border); border-radius: var(--radius-md); color: var(--hamburger-fg); cursor: pointer; transition: color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard); } .hamburger:hover { color: var(--hamburger-fg-hover); border-color: var(--hamburger-fg-hover); } .hamburger:focus-visible { outline: none; box-shadow: var(--shadow-focus); } .hamburger__icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; color: currentColor; } .hamburger__icon svg { width: 100%; height: 100%; fill: currentColor; display: block; } .hamburger .hamburger__icon--xmark { display: none; } .hamburger.is-open .hamburger__icon--bars { display: none; } .hamburger.is-open .hamburger__icon--xmark { display: inline-flex; } .hamburger--bright { --hamburger-fg: var(--neutral-text); --hamburger-bg: var(--neutral-white); --hamburger-border: var(--neutral-gray-200); --hamburger-fg-hover: var(--brand-teal); } .hamburger--dark { --hamburger-fg: var(--neutral-white); --hamburger-bg: transparent; --hamburger-border: var(--overlay-light-lg); --hamburger-fg-hover: var(--brand-teal); } .hamburger--dark:hover { border-color: var(--brand-teal); background: rgba(71, 193, 191, 0.12); background: color-mix(in srgb, var(--brand-teal) 12%, transparent); } .hamburger--ghost { border-color: transparent; } [data-theme="dark"] .hamburger--bright { --hamburger-fg: var(--neutral-white); --hamburger-bg: var(--hover-overlay-light); --hamburger-border: var(--overlay-light-lg); } .mobile-menu { display: flex; flex-direction: column; gap: 0; padding: var(--space-2) var(--space-4) var(--space-4); background: var(--neutral-white); border-top: 1px solid var(--neutral-gray-100); font-family: var(--font-sans); } .mobile-menu__link { display: flex; align-items: center; padding: var(--space-3) 0; font-size: var(--font-size-md); font-weight: var(--font-weight-medium); color: var(--neutral-text); text-decoration: none; border-bottom: 1px solid var(--neutral-gray-100); transition: color var(--duration-fast) var(--ease-standard); } .mobile-menu__link:hover { color: var(--brand-teal); } .mobile-menu__link.is-active { color: var(--brand-teal); font-weight: var(--font-weight-semibold); } .mobile-menu__link:last-child { border-bottom: none; } .mobile-menu--dark { background: var(--brand-navy); border-top-color: var(--overlay-light-md); } .mobile-menu--dark .mobile-menu__link { color: color-mix(in srgb, var(--neutral-white) 85%, transparent); border-bottom-color: var(--overlay-light-md); } .mobile-menu--dark .mobile-menu__link:hover { color: var(--brand-teal); } .mobile-menu--dark .mobile-menu__link.is-active { color: var(--brand-teal); font-weight: var(--font-weight-semibold); } .mobile-menu__group { border-bottom: 1px solid var(--neutral-gray-100); } .mobile-menu__group[open] { border-bottom-color: var(--neutral-gray-100); } .mobile-menu__group:last-child { border-bottom: none; } .mobile-menu__group-trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: var(--space-3) 0; background: transparent; border: none; font-family: inherit; font-size: var(--font-size-md); font-weight: var(--font-weight-medium); color: var(--neutral-text); text-align: left; cursor: pointer; list-style: none; } .mobile-menu__group-trigger::-webkit-details-marker { display: none; } .mobile-menu__group-chevron { display: inline-flex; align-items: center; justify-content: center; width: 12px; height: 12px; color: var(--neutral-gray-400); transition: transform var(--duration-fast) var(--ease-standard); } .mobile-menu__group-chevron svg { width: 100%; height: 100%; fill: currentColor; display: block; } .mobile-menu__group[open] .mobile-menu__group-chevron { transform: rotate(180deg); color: var(--brand-teal); } .mobile-menu__sublist { display: flex; flex-direction: column; padding-bottom: var(--space-2); } .mobile-menu__subitem { display: flex; align-items: center; padding: var(--space-2) 0 var(--space-2) var(--space-4); font-size: var(--font-size-sm); color: var(--neutral-gray-600); text-decoration: none; border-left: 2px solid var(--neutral-gray-200); margin-left: var(--space-1); } .mobile-menu__subitem:hover { color: var(--brand-teal); border-left-color: var(--brand-teal); } .mobile-menu__subitem.is-active { color: var(--brand-teal); border-left-color: var(--brand-teal); font-weight: var(--font-weight-semibold); } .mobile-menu--dark .mobile-menu__group { border-bottom-color: var(--overlay-light-md); } .mobile-menu--dark .mobile-menu__group-trigger { color: color-mix(in srgb, var(--neutral-white) 85%, transparent); } .mobile-menu--dark .mobile-menu__group-chevron { color: color-mix(in srgb, var(--neutral-white) 50%, transparent); } .mobile-menu--dark .mobile-menu__subitem { color: color-mix(in srgb, var(--neutral-white) 65%, transparent); border-left-color: var(--overlay-light-lg); } .mobile-menu--dark .mobile-menu__subitem:hover, .mobile-menu--dark .mobile-menu__subitem.is-active { color: var(--brand-teal); border-left-color: var(--brand-teal); } [data-theme="dark"] .mobile-menu { background: var(--brand-navy); border-top-color: var(--overlay-light-md); } [data-theme="dark"] .mobile-menu__link { color: color-mix(in srgb, var(--neutral-white) 85%, transparent); border-bottom-color: var(--overlay-light-md); } [data-theme="dark"] .mobile-menu__link:hover, [data-theme="dark"] .mobile-menu__link.is-active { color: var(--brand-teal); } [data-theme="dark"] .mobile-menu__group { border-bottom-color: var(--overlay-light-md); } [data-theme="dark"] .mobile-menu__group-trigger { color: color-mix(in srgb, var(--neutral-white) 85%, transparent); } [data-theme="dark"] .mobile-menu__group-chevron { color: color-mix(in srgb, var(--neutral-white) 50%, transparent); } [data-theme="dark"] .mobile-menu__sublist a, [data-theme="dark"] .mobile-menu__subitem { color: color-mix(in srgb, var(--neutral-white) 65%, transparent); border-left-color: var(--overlay-light-lg); } [data-theme="dark"] .mobile-menu__sublist a:hover, [data-theme="dark"] .mobile-menu__subitem:hover, [data-theme="dark"] .mobile-menu__sublist a.is-active, [data-theme="dark"] .mobile-menu__subitem.is-active { color: var(--brand-teal); border-left-color: var(--brand-teal); } .dropdown { --dropdown-trigger-min: 220px; position: relative; display: inline-block; font-family: var(--font-sans); } .dropdown__trigger { display: inline-flex; align-items: center; gap: var(--space-3); min-width: var(--dropdown-trigger-min); padding: var(--space-2) var(--space-3) var(--space-2) var(--space-4); background: var(--neutral-white); border: 1px solid var(--neutral-gray-200); border-radius: var(--radius-md); color: var(--neutral-text); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); cursor: pointer; list-style: none; user-select: none; transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .dropdown__trigger::-webkit-details-marker { display: none; } .dropdown__trigger:hover { border-color: var(--brand-teal); } .dropdown[open] > .dropdown__trigger { border-color: var(--brand-teal); box-shadow: var(--shadow-focus); } .dropdown__label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dropdown__chevron { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; color: var(--neutral-gray-400); transition: transform var(--duration-fast) var(--ease-standard); } .dropdown__chevron svg { width: 100%; height: 100%; fill: currentColor; display: block; } .dropdown[open] .dropdown__chevron { transform: rotate(180deg); color: var(--brand-teal); } .dropdown__menu { position: absolute; top: calc(100% + var(--space-2)); left: 0; min-width: 100%; z-index: var(--z-dropdown, 100); display: flex; flex-direction: column; padding: var(--space-2); background: var(--neutral-white); border: 1px solid var(--neutral-gray-200); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); max-height: 320px; overflow-y: auto; animation: dropdown-in var(--duration-fast) var(--ease-standard); } .dropdown__menu--right { left: auto; right: 0; } .dropdown__menu--up { top: auto; bottom: calc(100% + var(--space-2)); } @keyframes dropdown-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .dropdown__item { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); background: transparent; border: none; border-radius: var(--radius-sm); font-family: inherit; font-size: var(--font-size-sm); font-weight: var(--font-weight-regular); color: var(--neutral-text); text-align: left; cursor: pointer; white-space: nowrap; transition: background var(--duration-fast) var(--ease-standard); } .dropdown__item:hover { background: var(--neutral-gray-100); } .dropdown__item:focus-visible { outline: none; background: var(--neutral-gray-100); box-shadow: var(--shadow-focus); } .dropdown__item.is-selected { background: var(--brand-teal-light); color: var(--brand-teal-dark); font-weight: var(--font-weight-semibold); } .dropdown__item.is-selected::after { content: ""; margin-left: auto; width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--brand-teal); } .dropdown__item--danger { color: var(--brand-coral-dark); } .dropdown__divider { height: 1px; background: var(--neutral-gray-100); margin: var(--space-1) 0; } .dropdown__group-label { padding: var(--space-2) var(--space-3); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-wider); text-transform: uppercase; color: var(--neutral-gray-400); } [data-theme="dark"] .dropdown__trigger, [data-theme="dark"] .dropdown__menu { background: var(--brand-navy); border-color: var(--overlay-light-lg); color: var(--neutral-white); } [data-theme="dark"] .dropdown__item { color: var(--neutral-white); } [data-theme="dark"] .dropdown__item:hover { background: var(--hover-overlay-light); } [data-theme="dark"] .dropdown__divider { background: var(--overlay-light-md); } [data-theme="dark"] .dropdown__item.is-selected { background: rgba(71, 193, 191, 0.18); background: color-mix(in srgb, var(--brand-teal) 18%, transparent); color: var(--brand-teal-light); } [data-theme="dark"] .dropdown__item.is-selected::after { background: var(--brand-teal-light); } .cookie-banner { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%) translateY(calc(100% + 32px)); z-index: var(--z-toast); display: flex; align-items: center; gap: 12px; white-space: nowrap; width: max-content; max-width: min(640px, calc(100% - 32px)); background: rgba(42, 48, 75, 0.95); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 40px; padding: 10px 20px; opacity: 0; pointer-events: none; transition: opacity 0.35s var(--ease-standard, ease), transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); } .cookie-banner[data-state="visible"] { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; } .cookie-banner[data-state="hidden"] { opacity: 0; transform: translateX(-50%) translateY(calc(100% + 32px)); pointer-events: none; } .cookie-banner__text { margin: 0; font-family: var(--font-sans); font-size: 12px; font-weight: 400; color: rgba(255, 255, 255, 0.82); flex-shrink: 0; } .cookie-banner__link { color: var(--brand-teal); text-decoration: underline; text-decoration-color: rgba(71, 193, 191, 0.4); text-underline-offset: 2px; transition: color var(--duration-fast, 0.15s) var(--ease-standard, ease); } .cookie-banner__link:hover { color: var(--brand-teal-dark); } .cookie-banner__sep { color: rgba(255, 255, 255, 0.25); font-size: 14px; flex-shrink: 0; user-select: none; } .cookie-banner__actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .cookie-banner__btn { font-family: var(--font-sans); font-size: 12px; font-weight: 500; background: none; border: none; cursor: pointer; padding: 0; white-space: nowrap; transition: color 0.15s var(--ease-standard, ease), background 0.15s var(--ease-standard, ease); } .cookie-banner__btn:focus-visible { outline: 2px solid var(--brand-teal); outline-offset: 2px; border-radius: 4px; } .cookie-banner__btn--decline { color: rgba(255, 255, 255, 0.45); padding: 0 2px; } .cookie-banner__btn--decline:hover { color: rgba(255, 255, 255, 0.75); } .cookie-banner__btn--accept { background: rgba(71, 193, 191, 0.15); border-radius: 20px; padding: 4px 12px; color: var(--brand-teal); } .cookie-banner__btn--accept:hover { background: rgba(71, 193, 191, 0.27); } @media (max-width: 480px) { .cookie-banner { border-radius: 20px; max-width: calc(100% - 24px); gap: 8px; padding: 10px 14px; } } @media (prefers-reduced-motion: reduce) { .cookie-banner { transition: none; } } } @layer patterns { .site-nav { display: flex; align-items: center; gap: var(--space-8); width: 100%; padding: var(--space-4) var(--space-6); background: var(--neutral-white); border-bottom: 1px solid var(--neutral-gray-200); font-family: var(--font-sans); } .site-nav__inner { display: flex; align-items: center; gap: var(--space-8); width: 100%; max-width: 1100px; margin-inline: auto; } .site-nav__brand { display: inline-flex; align-items: center; text-decoration: none; color: inherit; flex: none; } .site-nav__brand img { display: block; height: 32px; width: auto; max-width: 200px; flex: none; } .site-nav__brand img.site-nav__brand-img--sm, .site-nav__brand-img--sm { height: 24px; } .site-nav__menu { display: flex; align-items: center; gap: var(--space-6); flex: 1; list-style: none; margin: 0; padding: 0; } .site-nav__link { font-size: var(--font-size-md); font-weight: var(--font-weight-medium); color: var(--neutral-gray-800); text-decoration: none; padding: var(--space-2) var(--space-1); border-radius: var(--radius-sm); font-variation-settings: "wght" 500; transition: font-variation-settings var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .site-nav__link:hover { font-variation-settings: "wght" 600; } .site-nav__link.is-active { color: var(--brand-teal); font-weight: var(--font-weight-semibold); } .site-nav__actions { display: inline-flex; align-items: center; gap: var(--space-3); margin-left: auto; } .site-nav.is-sticky { position: sticky; top: 0; z-index: var(--z-sticky); backdrop-filter: blur(var(--backdrop-blur)); -webkit-backdrop-filter: blur(var(--backdrop-blur)); background: var(--surface-translucent-light); } .site-nav__sep { width: 1px; height: 28px; flex: none; background: var(--neutral-gray-200); } .site-nav--report { background: var(--brand-navy); border-bottom-color: var(--overlay-light-md); padding-block: 0; min-height: 56px; align-items: stretch; } .site-nav--report .site-nav__sep { background: var(--overlay-light-lg); } .site-nav--report .site-nav__report-meta { display: flex; flex-direction: column; gap: 2px; flex: none; } .site-nav--report .site-nav__report-category { font-family: var(--font-sans); font-size: var(--font-size-meta); font-weight: var(--font-weight-bold); letter-spacing: var(--letter-spacing-wider); text-transform: uppercase; color: var(--brand-teal); line-height: 1; } .site-nav--report .site-nav__report-client { font-family: var(--font-sans); font-size: var(--font-size-xs); font-weight: var(--font-weight-regular); color: rgba(255, 255, 255, 0.5); color: color-mix(in srgb, var(--neutral-white) 50%, transparent); line-height: 1; } .site-nav--report .site-nav__report-meta--compact { flex-direction: row; align-items: center; gap: var(--space-2); } .site-nav--report .site-nav__report-meta--compact .site-nav__report-category { font-size: var(--font-size-xs); } .site-nav--report .site-nav__inner { align-items: stretch; } .site-nav--report .site-nav__menu { gap: var(--space-4); align-items: stretch; } .site-nav--report .site-nav__brand { align-self: center; } .site-nav--report .site-nav__report-meta { align-self: center; } .site-nav--report .site-nav__sep { align-self: center; } .site-nav--report .site-nav__actions { align-self: center; } .site-nav--report .site-nav__link { font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); font-variation-settings: "wght" 600; letter-spacing: var(--letter-spacing-wide); text-transform: uppercase; color: color-mix(in srgb, var(--neutral-white) 55%, transparent); padding: 0 var(--space-2); border-radius: 0; border-top: 2px solid transparent; border-bottom: 2px solid transparent; display: flex; align-items: center; height: 100%; transition: color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); } .site-nav--report .site-nav__link:hover { color: var(--neutral-white); border-bottom-color: var(--overlay-light-lg); } .site-nav--report .site-nav__link.is-active { color: var(--neutral-white); font-weight: var(--font-weight-semibold); border-bottom-color: var(--brand-teal); } .site-nav--audit { background: var(--neutral-white); border-bottom-color: var(--neutral-gray-200); padding-block: 0; align-items: stretch; } .site-nav--audit .site-nav__inner { align-items: stretch; } .site-nav--audit .site-nav__sep { align-self: center; } .site-nav--audit .site-nav__audit-name { font-family: var(--font-sans); font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); color: var(--neutral-text); align-self: center; white-space: nowrap; flex: none; } .site-nav--audit .site-nav__report-meta { display: flex; flex-direction: column; gap: 2px; align-self: center; flex: none; } .site-nav--audit .site-nav__report-meta--compact { flex-direction: row; align-items: center; gap: var(--space-2); } .site-nav--audit .site-nav__report-category { font-family: var(--font-sans); font-size: var(--font-size-meta); font-weight: var(--font-weight-bold); letter-spacing: var(--letter-spacing-wider); text-transform: uppercase; color: var(--brand-teal); line-height: 1; } .site-nav--audit .site-nav__report-client { font-family: var(--font-sans); font-size: var(--font-size-xs); font-weight: var(--font-weight-regular); color: var(--neutral-gray-600); line-height: 1; } .site-nav--audit .site-nav__tabs { align-items: stretch; gap: 0; } .site-nav--audit .site-nav__link { font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); letter-spacing: var(--letter-spacing-wide); text-transform: uppercase; color: var(--neutral-gray-600); padding: 0 var(--space-4); border-radius: 0; border-top: 2px solid transparent; border-bottom: 2px solid transparent; display: flex; align-items: center; height: 100%; transition: color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); } .site-nav--audit .site-nav__link:hover { color: var(--neutral-gray-800); font-variation-settings: "wght" 600; border-bottom-color: var(--neutral-gray-200); } .site-nav--audit .site-nav__link.is-active { color: var(--brand-teal); font-weight: var(--font-weight-semibold); border-bottom-color: var(--brand-teal); } .site-nav--titlecase .site-nav__link, .site-nav--titlecase .site-nav__report-category, .site-nav--titlecase .site-nav__audit-name { text-transform: capitalize; letter-spacing: var(--letter-spacing-normal); } .site-nav--titlecase .site-nav__link { font-size: var(--font-size-sm); } .site-nav--titlecase .site-nav__report-category { font-size: var(--font-size-xs); } @media (max-width: 768px) { .site-nav { padding: var(--space-3) var(--space-4); } .site-nav__menu { display: none; } .site-nav__actions { gap: var(--space-2); flex-wrap: wrap; } .site-nav:has(.hamburger) .hamburger { display: inline-flex; } .site-nav__report-client { font-size: var(--font-size-meta); } .site-nav--audit .site-nav__audit-name { font-size: var(--font-size-sm); } .site-nav--audit .site-nav__tabs { display: none; } .site-nav__menu.is-open { display: flex; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; padding: var(--space-2) var(--space-4); background: var(--neutral-white); border-bottom: 1px solid var(--neutral-gray-200); box-shadow: var(--shadow-md); z-index: var(--z-dropdown, 100); } .site-nav__menu.is-open .site-nav__link { width: 100%; padding: var(--space-3) 0; border-bottom: 1px solid var(--neutral-gray-100); height: auto; } .site-nav--report { min-height: auto; } .site-nav--report .site-nav__report-category { font-size: var(--font-size-meta-xs); } } .site-footer { background: var(--brand-navy); color: var(--neutral-gray-200); font-family: var(--font-sans); } .site-footer__inner { max-width: 1100px; margin-inline: auto; padding: var(--space-12) var(--space-6) var(--space-6); display: grid; gap: var(--space-12); grid-template-columns: 2fr repeat(3, 1fr); } @media (max-width: 768px) { .site-footer__inner { grid-template-columns: 1fr 1fr; padding: var(--space-10) var(--space-5) var(--space-5); gap: var(--space-8); } .site-footer__brand { grid-column: 1 / -1; } } .site-footer__brand-logo { display: inline-flex; align-items: center; text-decoration: none; margin-bottom: var(--space-5); } .site-footer__brand-logo img { display: block; height: 120px; width: auto; } @media (max-width: 768px) { .site-footer__brand-logo img { height: 93px; } } .site-footer__brand-name { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); color: var(--neutral-white); letter-spacing: var(--letter-spacing-tight); } .site-footer__brand-pitch { margin-top: var(--space-3); max-width: 320px; font-size: var(--font-size-sm); line-height: var(--line-height-relaxed); color: var(--neutral-gray-200); opacity: 0.8; } .site-footer__col-title { font-family: var(--font-sans); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-kicker); text-transform: uppercase; color: var(--brand-teal); margin-bottom: var(--space-4); } .site-footer__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-3); } .site-footer__link { font-size: var(--font-size-sm); color: var(--neutral-gray-200); text-decoration: none; transition: color var(--duration-fast) var(--ease-standard); } .site-footer__link:hover { color: var(--brand-teal); } .site-footer__bar { border-top: 1px solid var(--brand-navy-light); padding: var(--space-5) var(--space-6); } .site-footer__bar-inner { max-width: 1100px; margin-inline: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); font-size: var(--font-size-xs); color: var(--neutral-gray-200); opacity: 0.7; } .site-footer__legal { margin-top: var(--space-4); max-width: 320px; font-size: var(--font-size-xs); line-height: var(--line-height-relaxed); color: var(--neutral-gray-200); opacity: 0.6; } .site-footer__legal-line { display: block; } .site-footer__cta { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-3) var(--space-5); background: var(--brand-teal); color: var(--neutral-white); font-family: var(--font-sans); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); line-height: 1; border-radius: var(--radius-md); text-decoration: none; white-space: nowrap; transition: background var(--duration-fast) var(--ease-standard); } .site-footer__cta:hover { background: var(--brand-teal-dark); color: var(--neutral-white); } .site-footer__cta:focus-visible { outline: none; box-shadow: var(--shadow-focus); } @media (max-width: 768px) { .site-footer__cta { display: flex; width: 100%; } } [data-theme="dark"] .site-footer { background: var(--brand-navy); color: var(--neutral-gray-200); } [data-theme="dark"] .site-footer__brand-name { color: var(--neutral-white); } [data-theme="dark"] .site-footer__brand-pitch, [data-theme="dark"] .site-footer__legal { color: var(--neutral-gray-200); } [data-theme="dark"] .site-footer__col-title { color: var(--brand-teal); } [data-theme="dark"] .site-footer__link { color: var(--neutral-gray-200); } [data-theme="dark"] .site-footer__link:hover { color: var(--brand-teal); } [data-theme="dark"] .site-footer__bar { border-top-color: var(--overlay-light-md); } [data-theme="dark"] .site-footer__bar-inner { color: var(--neutral-gray-200); } .hero { padding: var(--space-20) var(--space-6); background: var(--neutral-bg); } .hero__inner { max-width: 1100px; margin-inline: auto; display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: var(--space-12); } @media (max-width: 900px) { .hero { padding: var(--space-12) var(--space-5); } .hero__inner { grid-template-columns: 1fr; gap: var(--space-8); } } .hero__kicker { display: inline-flex; align-items: center; gap: var(--space-3); font-family: var(--font-sans); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-kicker); text-transform: uppercase; color: var(--brand-teal); margin-bottom: var(--space-4); } .hero__kicker::before { content: ""; display: block; width: 32px; height: 2px; background: var(--brand-teal); } .hero__headline { font-family: var(--font-sans); font-size: clamp(2.25rem, 1.6rem + 2.4vw, var(--font-size-5xl)); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); letter-spacing: var(--letter-spacing-tighter); color: var(--neutral-text); margin: 0 0 var(--space-4); } .hero__sub { font-family: var(--font-sans); font-size: var(--font-size-md); line-height: var(--line-height-body); color: var(--neutral-gray-600); margin: 0 0 var(--space-8); max-width: 56ch; } .hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); } .hero__visual { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-2xl); overflow: hidden; background: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-navy-light) 100%); box-shadow: var(--shadow-lg); } .hero__visual img { width: 100%; height: 100%; object-fit: cover; } .hero-dark { background: var(--brand-navy); color: var(--neutral-white); } .hero-dark .hero__headline { color: var(--neutral-white); } .hero-dark .hero__sub { color: var(--neutral-gray-200); } .banner { padding: var(--space-6) var(--space-6); background: var(--brand-navy); color: var(--neutral-white); font-family: var(--font-sans); } .banner__inner { max-width: 1100px; margin-inline: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-6); } .banner__copy { display: flex; flex-direction: column; gap: var(--space-1); } .banner__title { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-heading); color: var(--neutral-white); margin: 0; } .banner__sub { font-size: var(--font-size-sm); line-height: var(--line-height-relaxed); color: var(--neutral-gray-200); opacity: 0.9; margin: 0; } .banner__actions { display: inline-flex; align-items: center; gap: var(--space-3); } .banner-teal { background: var(--brand-teal); color: var(--neutral-white); } .banner-teal .banner__sub { color: var(--neutral-white); opacity: 0.9; } .banner-coral { background: var(--brand-coral); color: var(--neutral-white); } .banner-coral .banner__sub { color: var(--neutral-white); opacity: 0.9; } .banner-light { background: var(--brand-teal-light); color: var(--neutral-text); } .banner-light .banner__title { color: var(--brand-teal-dark); } .banner-light .banner__sub { color: var(--neutral-gray-600); } [data-theme="dark"] .banner { background: var(--brand-navy); color: var(--neutral-white); } [data-theme="dark"] .banner__title { color: var(--neutral-white); } [data-theme="dark"] .banner__sub { color: var(--neutral-gray-200); } [data-theme="dark"] .banner-light { background: var(--brand-navy-light); color: var(--neutral-white); } [data-theme="dark"] .banner-light .banner__title { color: var(--brand-teal-light); } [data-theme="dark"] .banner-light .banner__sub { color: var(--neutral-gray-200); } [data-theme="dark"] .banner-teal { background: var(--brand-teal); color: var(--neutral-white); } [data-theme="dark"] .banner-teal .banner__title { color: var(--neutral-white); } [data-theme="dark"] .banner-teal .banner__sub { color: var(--neutral-white); opacity: 0.92; } [data-theme="dark"] .banner-teal .btn-secondary { --btn-bg: var(--brand-navy-dark); --btn-bg-hover: var(--brand-navy); --btn-fg: var(--neutral-white); } [data-theme="dark"] .banner-coral { background: var(--brand-coral); color: var(--neutral-white); } [data-theme="dark"] .banner-coral .banner__title { color: var(--neutral-white); } [data-theme="dark"] .banner-coral .banner__sub { color: var(--neutral-white); opacity: 0.92; } .midbanner { font-family: var(--font-sans); border-radius: var(--radius-2xl); overflow: hidden; position: relative; isolation: isolate; } .midbanner__inner { position: relative; display: flex; width: 100%; } .midbanner__copy { display: flex; flex-direction: column; gap: var(--space-3); } .midbanner__kicker { display: inline-flex; align-items: center; gap: var(--space-3); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-kicker); text-transform: uppercase; color: var(--brand-teal); } .midbanner__title { font-size: clamp(1.75rem, 1.2rem + 2vw, var(--font-size-4xl)); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); letter-spacing: var(--letter-spacing-tight); margin: 0; } .midbanner__sub { font-size: var(--font-size-md); line-height: var(--line-height-body); margin: 0; max-width: 56ch; } .midbanner__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); } .midbanner__visual { background: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-navy-light) 50%, var(--brand-teal) 100%); background-size: cover; background-position: center; } .midbanner--fullbleed { min-height: 380px; background: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-teal-dark) 100%); color: var(--neutral-white); } .midbanner--fullbleed::before { content: ""; position: absolute; inset: 0; background: var(--scrim-default); z-index: 0; } .midbanner--fullbleed .midbanner__inner { position: relative; z-index: 1; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: var(--space-16) var(--space-8); min-height: inherit; } .midbanner--fullbleed .midbanner__copy { align-items: center; max-width: 720px; } .midbanner--fullbleed .midbanner__kicker { color: var(--brand-teal-light); } .midbanner--fullbleed .midbanner__title { color: var(--neutral-white); } .midbanner--fullbleed .midbanner__sub { color: var(--neutral-white); opacity: 0.85; text-align: center; } .midbanner--split { background: var(--neutral-white); border: 1px solid var(--neutral-gray-200); color: var(--neutral-text); min-height: 360px; } .midbanner--split .midbanner__inner { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; min-height: inherit; } .midbanner--split .midbanner__copy { padding: var(--space-12) var(--space-10); justify-content: center; } .midbanner--split .midbanner__visual { min-height: 360px; } @media (max-width: 768px) { .midbanner--split .midbanner__inner { grid-template-columns: 1fr; } .midbanner--split .midbanner__visual { min-height: 240px; order: -1; } .midbanner--split .midbanner__copy { padding: var(--space-8) var(--space-6); } } .midbanner--gradient { min-height: 360px; color: var(--neutral-white); background: linear-gradient(135deg, var(--brand-teal) 0%, var(--brand-coral) 100%); } .midbanner--gradient::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 70% 30%, var(--overlay-light-lg) 0%, transparent 60%), linear-gradient(135deg, color-mix(in srgb, var(--brand-teal) 92%, transparent) 0%, color-mix(in srgb, var(--brand-coral) 88%, transparent) 100%); z-index: 0; } .midbanner--gradient .midbanner__inner { position: relative; z-index: 1; padding: var(--space-12) var(--space-10); align-items: center; min-height: inherit; } .midbanner--gradient .midbanner__copy { max-width: 640px; } .midbanner--gradient .midbanner__kicker { color: var(--neutral-white); } .midbanner--gradient .midbanner__title { color: var(--neutral-white); } .midbanner--gradient .midbanner__sub { color: var(--neutral-white); opacity: 0.95; } .midbanner--compact .midbanner__title, .midbanner__title--compact { font-size: var(--font-size-2xl); } .midbanner--card { background: var(--neutral-white); box-shadow: var(--shadow-lg); color: var(--neutral-text); } .midbanner--card .midbanner__inner { flex-direction: column; } .midbanner--card .midbanner__visual { width: 100%; min-height: 240px; } .midbanner--card .midbanner__bar { display: flex; flex-wrap: wrap; gap: var(--space-6); align-items: center; justify-content: space-between; padding: var(--space-8) var(--space-10); background: var(--neutral-white); } .midbanner--card .midbanner__copy { gap: var(--space-2); flex: 1; min-width: 280px; } @media (max-width: 768px) { .midbanner--card .midbanner__bar { padding: var(--space-6) var(--space-5); } } [data-theme="dark"] .midbanner--split { background: var(--brand-navy); border-color: var(--overlay-light-md); color: var(--neutral-white); } [data-theme="dark"] .midbanner--split .midbanner__title { color: var(--neutral-white); } [data-theme="dark"] .midbanner--split .midbanner__sub { color: var(--neutral-gray-200); } [data-theme="dark"] .midbanner--card { background: var(--brand-navy); color: var(--neutral-white); } [data-theme="dark"] .midbanner--card .midbanner__bar { background: var(--brand-navy); } [data-theme="dark"] .midbanner--card .midbanner__title { color: var(--neutral-white); } [data-theme="dark"] .midbanner--card .midbanner__sub { color: var(--neutral-gray-200); } .sticky-bar { position: sticky; top: 0; z-index: var(--z-sticky); width: 100%; padding: var(--space-3) var(--space-6); background: var(--brand-navy); color: var(--neutral-white); font-family: var(--font-sans); font-size: var(--font-size-sm); text-align: center; } .sticky-bar__inner { max-width: 1100px; margin-inline: auto; display: flex; align-items: center; justify-content: center; gap: var(--space-3); flex-wrap: wrap; } .sticky-bar__badge { display: inline-flex; align-items: center; padding: 2px var(--space-3); background: var(--brand-teal); color: var(--neutral-white); font-size: var(--font-size-meta); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-wider); text-transform: uppercase; border-radius: var(--radius-full); } .sticky-bar__link { color: var(--brand-teal); font-weight: var(--font-weight-semibold); text-decoration: underline; text-underline-offset: 3px; } .sticky-bar__link:hover { color: var(--brand-teal-light); } .sticky-bar__close { margin-left: auto; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); color: var(--neutral-white); opacity: 0.7; transition: opacity var(--duration-fast) var(--ease-standard); } .sticky-bar__close:hover { opacity: 1; } .sticky-bar-teal { background: var(--brand-teal); } .sticky-bar-teal .sticky-bar__badge { background: var(--brand-navy); } .sticky-bar-coral { background: var(--brand-coral); } .sticky-bar-coral .sticky-bar__badge { background: var(--brand-navy); } [data-theme="dark"] .sticky-bar { background: var(--brand-navy); color: var(--neutral-white); border-bottom: 1px solid var(--overlay-light-md); } [data-theme="dark"] .sticky-bar__link { color: var(--brand-teal-light); } [data-theme="dark"] .sticky-bar__link:hover { color: var(--neutral-white); } [data-theme="dark"] .sticky-bar__close { color: var(--neutral-white); } .cover { position: relative; display: flex; flex-direction: column; justify-content: space-between; width: 100%; min-height: 400px; padding: var(--space-12) var(--space-20); background: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-navy-light) 50%, var(--brand-navy) 100%); color: var(--neutral-white); font-family: var(--font-sans); border-radius: var(--radius-2xl); overflow: hidden; isolation: isolate; } .cover::before { content: ""; position: absolute; width: 700px; height: 700px; top: -200px; right: -200px; background: radial-gradient(circle, rgba(71, 193, 191, 0.18) 0%, transparent 70%); background: radial-gradient(circle, color-mix(in srgb, var(--brand-teal) 18%, transparent) 0%, transparent 70%); z-index: -1; } .cover__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-6); } .cover__version { display: inline-flex; align-items: center; padding: var(--space-1) var(--space-3); background: var(--brand-teal); color: var(--neutral-white); font-size: var(--font-size-meta); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-wider); text-transform: uppercase; border-radius: var(--radius-full); } .cover__brand { font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); color: var(--neutral-white); letter-spacing: var(--letter-spacing-tight); } .cover__logo { display: block; height: 48px; width: auto; } .cover__body { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-12); } .cover__kicker { display: inline-flex; align-items: center; gap: var(--space-3); font-size: var(--font-size-meta); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-kicker); text-transform: uppercase; color: var(--brand-teal); } .cover__kicker::before { content: ""; display: block; width: 32px; height: 2px; background: var(--brand-teal); } .cover__title { font-family: var(--font-sans); font-size: var(--font-size-display-xl); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); letter-spacing: var(--letter-spacing-tighter); color: var(--neutral-white); margin: 0; word-break: break-word; overflow-wrap: anywhere; } .cover__title-accent { color: var(--brand-teal); } .cover__subtitle { font-size: var(--font-size-md); line-height: var(--line-height-body); color: var(--neutral-white); opacity: 0.7; margin: 0; word-break: break-word; overflow-wrap: anywhere; } .cover__watermark { position: absolute; top: 50%; right: var(--space-12); transform: translateY(-50%) rotate(-12deg); font-family: var(--font-sans); font-size: clamp(64px, 12vw, 120px); font-weight: var(--font-weight-bold); letter-spacing: var(--letter-spacing-widest); color: color-mix(in srgb, var(--neutral-white) 6%, transparent); pointer-events: none; user-select: none; z-index: 0; } .cover__footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-8); margin-top: var(--space-12); } .cover__footer-divider { width: 1px; height: 32px; background: var(--overlay-light-lg); } .cover__footer-col-title { font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-wider); color: var(--neutral-white); opacity: 0.7; margin-bottom: var(--space-1); } .cover__footer-col-value { font-size: var(--font-size-xs); color: var(--neutral-white); opacity: 0.4; } @media (max-width: 768px) { .cover { padding: var(--space-8) var(--space-5); } .cover__footer { grid-template-columns: 1fr; gap: var(--space-3); } .cover__footer-divider { display: none; } .cover__title { font-size: clamp(1.4rem, 4vw, 2.5rem); } .cover__subtitle { font-size: var(--font-size-sm); } .cover__watermark { font-size: clamp(48px, 16vw, 84px); right: var(--space-5); } } .cover--report .cover__confidential { display: inline-flex; align-items: center; padding: var(--space-2) var(--space-4); background: color-mix(in srgb, var(--brand-teal) 12%, transparent); border: 1px solid var(--brand-teal); border-radius: var(--radius-full); font-family: var(--font-sans); font-size: var(--font-size-meta); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-wider); text-transform: uppercase; color: var(--brand-teal); white-space: nowrap; } .cover__status { --cover-status-color: var(--brand-yellow); display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); background: color-mix(in srgb, var(--cover-status-color) 18%, transparent); border: 1px solid color-mix(in srgb, var(--cover-status-color) 60%, transparent); border-radius: var(--radius-full); font-family: var(--font-sans); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: color-mix(in srgb, var(--neutral-white) 92%, transparent); } .cover__status--inline { margin-top: 0; } .cover--report .cover__status { align-self: flex-start; margin-top: var(--space-5); } .cover__status-icon { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; flex: none; color: var(--cover-status-color); } .cover__status-icon svg { width: 100%; height: 100%; fill: currentColor; display: block; } .cover__status--critical { --cover-status-color: var(--brand-coral); } .cover__status--warning { --cover-status-color: var(--brand-yellow); } .cover__status--ok { --cover-status-color: var(--brand-green-strong); } .cover__status--info { --cover-status-color: var(--brand-teal); } .cover__status--new { --cover-status-color: var(--brand-teal); } .cover--report .cover__footer { grid-template-columns: 1fr auto 1fr auto 1fr; } @media (max-width: 768px) { .cover--report .cover__confidential { display: none; } .cover--report .cover__footer { grid-template-columns: 1fr; } } .carousel { position: relative; overflow: hidden; } .carousel__track { display: flex; gap: var(--space-4); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: var(--space-2); scrollbar-width: none; } .carousel__track::-webkit-scrollbar { display: none; } .carousel__slide { flex: 0 0 auto; scroll-snap-align: start; width: clamp(260px, 33.333% - var(--space-4), 360px); } .carousel__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-full); background: var(--neutral-white); border: 1px solid var(--neutral-gray-200); color: var(--brand-navy); box-shadow: var(--shadow-md); z-index: var(--z-base); transition: background var(--duration-fast) var(--ease-standard); } .carousel__nav:hover { background: var(--brand-teal); color: var(--neutral-white); border-color: var(--brand-teal); } .carousel__nav-prev { left: var(--space-3); } .carousel__nav-next { right: var(--space-3); } .carousel__dots { display: flex; justify-content: center; gap: var(--space-2); margin-top: var(--space-4); } .carousel__dot { width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--neutral-gray-200); transition: background var(--duration-fast) var(--ease-standard), width var(--duration-fast) var(--ease-standard); } .carousel__dot.is-active { width: 24px; background: var(--brand-teal); } [data-theme="dark"] .carousel__nav { background: var(--brand-navy-light); border-color: var(--overlay-light-lg); color: var(--neutral-white); } [data-theme="dark"] .carousel__nav:hover { background: var(--brand-teal); color: var(--neutral-white); border-color: var(--brand-teal); } [data-theme="dark"] .carousel__dot { background: var(--overlay-light-xl); } [data-theme="dark"] .carousel__dot.is-active { background: var(--brand-teal); } .full-bleed { width: 100vw; margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); } .full-bleed--padded { --full-bleed-max: 1100px; --full-bleed-pad: var(--space-8); padding-inline: max( var(--full-bleed-pad), calc((100vw - var(--full-bleed-max)) / 2 + var(--full-bleed-pad)) ); } .full-bleed--inset { width: 100vw; margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); padding-inline: max( var(--space-8), calc((100vw - 1100px) / 2 + var(--space-8)) ); } } @layer themes { [data-theme="light"] { --color-bg: var(--neutral-bg); --color-surface: var(--neutral-white); --color-surface-alt: var(--neutral-gray-100); --color-surface-inverted: var(--brand-navy); --color-text: var(--neutral-text); --color-text-muted: var(--neutral-gray-600); --color-text-subtle: var(--neutral-gray-400); --color-text-inverted: var(--neutral-white); --color-border: var(--neutral-gray-200); --color-border-strong: var(--neutral-gray-400); } [data-theme="light"] body { background: var(--color-bg); color: var(--color-text); } } @layer themes { [data-theme="dark"] { --color-bg: var(--dark-bg-base); --color-surface: var(--brand-navy); --color-surface-alt: var(--brand-navy-light); --color-surface-inverted: var(--neutral-white); --color-text: var(--neutral-white); --color-text-muted: var(--neutral-gray-200); --color-text-subtle: var(--neutral-gray-400); --color-text-inverted: var(--neutral-text); --color-border: rgba(255, 255, 255, 0.12); --color-border-strong: rgba(255, 255, 255, 0.24); --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.30); --shadow-sm: 0 2px 4px 0 rgba(0, 0, 0, 0.35); --shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.40); --shadow-lg: 0 12px 32px -4px rgba(0, 0, 0, 0.50); --shadow-xl: 0 24px 60px -8px rgba(0, 0, 0, 0.60); --shadow-focus: 0 0 0 3px rgba(71, 193, 191, 0.50); } [data-theme="dark"] body { background: var(--color-bg); color: var(--color-text); } [data-theme="dark"] .card { --card-bg: var(--brand-navy); --card-fg: var(--neutral-white); --card-border: rgba(255, 255, 255, 0.12); } [data-theme="dark"] .card-metric { --card-bg: var(--brand-navy); --card-fg: var(--neutral-white); --card-border: rgba(255, 255, 255, 0.12); } [data-theme="dark"] .card-metric__label, [data-theme="dark"] .card-metric__hint { color: var(--neutral-gray-200); } [data-theme="dark"] .card-metric__value { color: var(--neutral-white); } [data-theme="dark"] .input, [data-theme="dark"] .textarea, [data-theme="dark"] .select { --input-bg: var(--brand-navy-light); --input-fg: var(--neutral-white); --input-border: rgba(255, 255, 255, 0.12); --input-border-hover: rgba(255, 255, 255, 0.30); --input-placeholder: var(--neutral-gray-400); } [data-theme="dark"] .btn-ghost { --btn-fg: var(--neutral-white); --btn-border: rgba(255, 255, 255, 0.20); --btn-bg-hover: rgba(255, 255, 255, 0.06); } [data-theme="dark"] .site-nav { background: rgba(26, 31, 51, 0.85); border-bottom-color: rgba(255, 255, 255, 0.12); } [data-theme="dark"] .hero { background: transparent; } [data-theme="dark"] .hero__headline, [data-theme="dark"] .hero__title { color: var(--neutral-white); } [data-theme="dark"] .hero__sub { color: rgba(255, 255, 255, 0.72); } [data-theme="dark"] .site-nav__brand, [data-theme="dark"] .site-nav__link { color: var(--neutral-white); } [data-theme="dark"] .site-nav--audit { background: var(--brand-navy); border-bottom-color: rgba(255, 255, 255, 0.10); } [data-theme="dark"] .site-nav--audit .site-nav__audit-name { color: var(--neutral-white); } [data-theme="dark"] .site-nav--audit .site-nav__link { color: rgba(255, 255, 255, 0.65); } [data-theme="dark"] .site-nav--audit .site-nav__link.is-active { color: var(--brand-teal); } [data-theme="dark"] .site-nav--audit .site-nav__report-client { color: rgba(255, 255, 255, 0.65); } [data-theme="dark"] .site-nav__sep { background: rgba(255, 255, 255, 0.20); } [data-theme="dark"] .modal__dialog { background: var(--brand-navy); color: var(--neutral-white); } [data-theme="dark"] .modal__title { color: var(--neutral-white); } [data-theme="dark"] .modal__subtitle { color: var(--dark-text-muted); } [data-theme="dark"] .modal__body { color: var(--neutral-gray-200); } [data-theme="dark"] .modal__footer { background: var(--brand-navy-light); border-top-color: rgba(255, 255, 255, 0.12); } [data-theme="dark"] .chatbot-panel { background: var(--brand-navy); border-color: rgba(255, 255, 255, 0.12); } [data-theme="dark"] .chatbot-panel__header { background: var(--brand-navy-light); border-bottom: 1px solid rgba(255, 255, 255, 0.08); } [data-theme="dark"] .chatbot-panel__messages { background: var(--brand-navy); } [data-theme="dark"] .chatbot-msg-bot { background: var(--brand-navy-light); color: var(--neutral-white); border-color: rgba(255, 255, 255, 0.10); } [data-theme="dark"] .chatbot-msg-user { background: var(--brand-teal); color: var(--neutral-white); } [data-theme="dark"] .chatbot-panel__composer { background: var(--brand-navy-light); border-top-color: rgba(255, 255, 255, 0.10); } [data-theme="dark"] .chatbot-quick-reply { background: transparent; color: var(--brand-teal-light); border-color: var(--brand-teal); } [data-theme="dark"] .chatbot-quick-reply:hover { background: var(--brand-teal); color: var(--neutral-white); } [data-theme="dark"] .site-nav__brand img, [data-theme="dark"] .dsg-sidebar__brand-img { content: url("/v5/assets/logo/luego-on-navy.svg"); } [data-theme="dark"] .dsg-sidebar__group, [data-theme="dark"] .dsg-sidebar__brand-suffix { color: var(--neutral-gray-200); } }