/* ======================================================================== * Tessera Theme * ------------------------------------------------------------------------ * A standalone visual theme layered on top of the upstream helpdesk * engine via CSS custom property overrides + targeted component polish. * No source modifications — this file is loaded via a tag that * host nginx injects into the SPA shell block. * * Upgrade-clean: override the variables the upstream already defines, * never restructure layouts or touch component IDs. When upstream ships * new variables, this file only needs additive changes. * * Layering order: * 1. @font-face for Inter (self-hosted from /theme/fonts/) * 2. Root CSS variable overrides (light mode) * 3. Dark-mode overrides under [data-theme="dark"] * 4. Typography resets (font-family, weights) * 5. Component polish (buttons, cards, inputs, sidebar accents) * * Colors derived from the Tessera logo: * - Primary blue #1565c0 (headset) * - Primary hover #0d47a1 * - Secondary blue #2196f3 (lighter ticket fill) * - Accent orange #ff9800 (checkmark) * - Success green #2e7d32 * - Danger red #c62828 * - Warning amber #f57c00 * ======================================================================== */ /* --- Inter webfont (SIL OFL 1.1) --- */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("/theme/fonts/Inter-Regular.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("/theme/fonts/Inter-Medium.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("/theme/fonts/Inter-SemiBold.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("/theme/fonts/Inter-Bold.woff2") format("woff2"); } /* ============================================================ * 1. COLOR PALETTE — light mode (default) * Override the upstream CSS custom properties with Tessera brand. * ============================================================ */ :root { /* --- Tessera brand scale --- */ --tessera-brand-50: #e3f2fd; --tessera-brand-100: #bbdefb; --tessera-brand-200: #90caf9; --tessera-brand-300: #64b5f6; --tessera-brand-400: #42a5f5; --tessera-brand-500: #2196f3; --tessera-brand-600: #1e88e5; --tessera-brand-700: #1976d2; --tessera-brand-800: #1565c0; /* primary — matches logo headset */ --tessera-brand-900: #0d47a1; --tessera-accent: #ff9800; /* orange checkmark */ --tessera-accent-hover: #f57c00; --tessera-success: #2e7d32; --tessera-danger: #c62828; --tessera-warning: #f57c00; /* --- Slate neutral scale --- */ --tessera-slate-50: #f8fafc; --tessera-slate-100: #f1f5f9; --tessera-slate-200: #e2e8f0; --tessera-slate-300: #cbd5e1; --tessera-slate-400: #94a3b8; --tessera-slate-500: #64748b; --tessera-slate-600: #475569; --tessera-slate-700: #334155; --tessera-slate-800: #1e293b; --tessera-slate-900: #0f172a; /* --- Override upstream theme variables (light mode) --- */ --background-primary: #ffffff; --background-primary-alt: var(--tessera-slate-50); --background-secondary: var(--tessera-slate-50); --background-secondary-hover: var(--tessera-slate-100); --background-tertiary: var(--tessera-slate-100); --background-quaternary: var(--tessera-slate-200); --background-quaternary-alt: var(--tessera-slate-100); --background-active: var(--tessera-brand-50); --background-highlight: var(--tessera-brand-50); --background-modifier-hover: var(--tessera-slate-100); --background-modifier-accent: rgba(21, 101, 192, 0.10); --background-modifier-accent-dark: rgba(21, 101, 192, 0.18); --background-modifier-accent-light: rgba(21, 101, 192, 0.05); --background-modifier-border: var(--tessera-slate-200); --background-modifier-lighter: var(--tessera-slate-50); --background-popover: #ffffff; --background-article-customer: var(--tessera-brand-50); --background-article-customer-meta: var(--tessera-brand-100); --background-article-meta: var(--tessera-slate-100); --fullscreen-background: var(--tessera-slate-50); --text-normal: var(--tessera-slate-900); --text-muted: var(--tessera-slate-500); --text-faint: var(--tessera-slate-400); --text-inverted: #ffffff; --fullscreen-text: var(--tessera-slate-900); --fullscreen-text-muted: var(--tessera-slate-500); --fullscreen-text-link: var(--tessera-brand-800); --header-primary: var(--tessera-slate-900); --header-secondary: var(--tessera-slate-700); --border: var(--tessera-slate-200); --border-alt: var(--tessera-slate-300); --border-internal: var(--tessera-slate-200); --border-internal-stripe: var(--tessera-slate-100); --border-highlight: var(--tessera-brand-800); --border-article-customer: var(--tessera-brand-200); --border-article-customer-selected: var(--tessera-brand-800); --borderless: transparent; --elevation-stroke: var(--tessera-slate-200); --elevation-low: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04); --elevation-high: 0 10px 25px rgba(15, 23, 42, 0.08), 0 4px 10px rgba(15, 23, 42, 0.04); --highlight: var(--tessera-brand-800); --active: var(--tessera-brand-800); --create: var(--tessera-success); --good-color: var(--tessera-success); --bad-color: var(--tessera-danger); --danger: var(--tessera-danger); --danger-color: var(--tessera-danger); --ghost-color: var(--tessera-slate-400); --button-background: var(--tessera-slate-100); --button-background-active: var(--tessera-slate-200); --button-active: var(--tessera-brand-800); --button-active-active: var(--tessera-brand-900); --button-action-color: var(--tessera-brand-800); --button-primary-background: var(--tessera-brand-800); --button-primary-background-active: var(--tessera-brand-900); --button-primary-text: #ffffff; --ai-assist-blue: var(--tessera-brand-500); --ai-assist-pink: #ec407a; --backdrop-clue-start: var(--tessera-brand-800); --backdrop-clue-end: var(--tessera-brand-500); /* Tessera-specific additions (not in upstream) */ --tessera-radius-sm: 8px; --tessera-radius-md: 12px; --tessera-radius-lg: 16px; --tessera-radius-xl: 20px; --tessera-focus-ring: 0 0 0 4px rgba(21, 101, 192, 0.18); --tessera-sidebar-accent: var(--tessera-brand-800); /* Multi-layer shadow system — softer, more natural depth */ --tessera-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04); --tessera-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04); --tessera-shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.07), 0 2px 4px -1px rgba(15, 23, 42, 0.04); --tessera-shadow-lg: 0 12px 20px -6px rgba(15, 23, 42, 0.10), 0 4px 8px -2px rgba(15, 23, 42, 0.06), 0 0 0 1px rgba(15, 23, 42, 0.03); --tessera-shadow-xl: 0 24px 48px -12px rgba(15, 23, 42, 0.18), 0 8px 16px -4px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(15, 23, 42, 0.04); --tessera-shadow-primary: 0 6px 16px -4px rgba(21, 101, 192, 0.28), 0 2px 6px -1px rgba(21, 101, 192, 0.15); --tessera-shadow-primary-hover: 0 10px 24px -6px rgba(21, 101, 192, 0.38), 0 4px 10px -2px rgba(21, 101, 192, 0.22); /* Button gradient — subtle linear shift for the primary action */ --tessera-gradient-primary: linear-gradient(180deg, #1e88e5 0%, #1565c0 100%); --tessera-gradient-primary-hover: linear-gradient(180deg, #1976d2 0%, #0d47a1 100%); /* Transition timing functions */ --tessera-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --tessera-ease-in-out: cubic-bezier(0.7, 0, 0.3, 1); } /* ============================================================ * 2. COLOR PALETTE — dark mode * ============================================================ */ html[data-theme="dark"], [data-theme="dark"] :root, [data-theme="dark"] { --background-primary: #0f172a; --background-primary-alt: #111b2e; --background-secondary: #1e293b; --background-secondary-hover: #273549; --background-tertiary: #1e293b; --background-quaternary: #273549; --background-quaternary-alt: #1e293b; --background-active: #1e3a5f; --background-highlight: #1e3a5f; --background-modifier-hover: #273549; --background-modifier-accent: rgba(33, 150, 243, 0.16); --background-modifier-accent-dark: rgba(33, 150, 243, 0.25); --background-modifier-accent-light: rgba(33, 150, 243, 0.08); --background-modifier-border: #334155; --background-modifier-lighter: #1e293b; --background-popover: #1e293b; --background-article-customer: #1e3a5f; --background-article-customer-meta: #274777; --background-article-meta: #273549; --fullscreen-background: #0f172a; --text-normal: #f1f5f9; --text-muted: #94a3b8; --text-faint: #64748b; --text-inverted: #0f172a; --fullscreen-text: #f1f5f9; --fullscreen-text-muted: #94a3b8; --fullscreen-text-link: #64b5f6; --header-primary: #f1f5f9; --header-secondary: #cbd5e1; --border: #334155; --border-alt: #475569; --border-internal: #334155; --border-internal-stripe: #273549; --border-highlight: #64b5f6; --border-article-customer: #1976d2; --border-article-customer-selected: #64b5f6; --elevation-stroke: #334155; --elevation-low: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.25); --elevation-high: 0 10px 30px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3); --highlight: #64b5f6; --active: #64b5f6; --button-active: #64b5f6; --button-active-active: #42a5f5; --button-action-color: #64b5f6; --button-primary-background: #1976d2; --button-primary-background-active: #1565c0; --button-background: #273549; --button-background-active: #334155; --tessera-focus-ring: 0 0 0 4px rgba(100, 181, 246, 0.22); --tessera-sidebar-accent: #64b5f6; /* Shadow system for dark mode — deeper ambient shadow, no need for fake border */ --tessera-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3); --tessera-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.35); --tessera-shadow-md: 0 6px 12px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.3); --tessera-shadow-lg: 0 16px 32px rgba(0, 0, 0, 0.55), 0 6px 12px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.04); --tessera-shadow-xl: 0 32px 64px rgba(0, 0, 0, 0.6), 0 12px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.06); --tessera-shadow-primary: 0 6px 20px -4px rgba(33, 150, 243, 0.45), 0 2px 8px -1px rgba(33, 150, 243, 0.25); --tessera-shadow-primary-hover: 0 10px 28px -4px rgba(33, 150, 243, 0.55), 0 4px 12px -2px rgba(33, 150, 243, 0.35); --tessera-gradient-primary: linear-gradient(180deg, #1976d2 0%, #0d47a1 100%); --tessera-gradient-primary-hover: linear-gradient(180deg, #2196f3 0%, #1565c0 100%); } /* ============================================================ * 3. TYPOGRAPHY — swap Fira Sans for Inter, upstream-wide * ============================================================ */ html, body, input, textarea, select, button, .search input[type="search"], .js-search, .ticket-title, .ticket-title-update, .page-header, .sidebar, .navigation, .content, .modal-dialog, .popover, .tooltip, .tooltip-inner, .dropdown, .form-control, .text-editor, .tabsSidebar, .main { font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; /* Inter stylistic sets: cv11 = single-story a, ss01 = cleaner dollar, ss03 = curved lowercase l, cv05 = curved j, tnum = tabular numerals */ font-feature-settings: "cv11", "ss01", "ss03", "cv05"; } /* Tabular numerals for everywhere numbers matter: ticket IDs, dates, stats */ .ticket-number, .ticket-title-update, .dashboard .stats-box, .dashboard .stats, .table td, .time, .date, time, code, .badge, .activity-counter, .ticketState, .user-popover .data, .number { font-variant-numeric: tabular-nums; font-feature-settings: "tnum", "cv11", "ss01"; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .page-header-title, .ticket-title, .modal-title, .hero-unit h1, .hero-unit h2 { font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-weight: 600; letter-spacing: -0.015em; color: var(--header-primary); } /* Big headings get a touch more tightness — Inter looks best at ≈-0.02em */ h1, .h1, .page-header-title { letter-spacing: -0.022em; font-weight: 700; } code, pre, kbd, samp, .codeblock { font-family: "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important; font-feature-settings: normal; } /* ============================================================ * 4. COMPONENT POLISH * ============================================================ */ /* --- Buttons --- */ .btn { border-radius: var(--tessera-radius-sm) !important; font-weight: 500 !important; letter-spacing: 0.005em; padding-inline: 16px; transition: background 180ms var(--tessera-ease-out), border-color 180ms var(--tessera-ease-out), box-shadow 180ms var(--tessera-ease-out), transform 120ms var(--tessera-ease-out); will-change: transform, box-shadow; } .btn:hover { box-shadow: var(--tessera-shadow-sm); transform: translateY(-1px); } .btn:active { transform: translateY(0); box-shadow: var(--tessera-shadow-xs); } .btn:focus-visible { outline: none; box-shadow: var(--tessera-focus-ring), var(--tessera-shadow-sm); } .btn--primary, .btn--success { background: var(--tessera-gradient-primary) !important; color: var(--button-primary-text) !important; border-color: transparent !important; box-shadow: var(--tessera-shadow-primary); } .btn--primary:hover, .btn--success:hover { background: var(--tessera-gradient-primary-hover) !important; border-color: transparent !important; box-shadow: var(--tessera-shadow-primary-hover); } .btn--primary:active, .btn--success:active { background: var(--tessera-gradient-primary-hover) !important; box-shadow: var(--tessera-shadow-primary), inset 0 1px 3px rgba(0, 0, 0, 0.15); } .btn--danger { background: linear-gradient(180deg, #e53935 0%, #c62828 100%) !important; border-color: transparent !important; color: #ffffff !important; box-shadow: 0 6px 16px -4px rgba(198, 40, 40, 0.28), 0 2px 6px -1px rgba(198, 40, 40, 0.15); } .btn--danger:hover { background: linear-gradient(180deg, #d32f2f 0%, #b71c1c 100%) !important; box-shadow: 0 10px 24px -6px rgba(198, 40, 40, 0.38), 0 4px 10px -2px rgba(198, 40, 40, 0.22); } /* --- Form inputs — branded focus ring --- */ .form-control, input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="url"], textarea, select { border-radius: var(--tessera-radius-md) !important; border-color: var(--border) !important; transition: border-color 150ms ease, box-shadow 150ms ease; } .form-control:focus, input:focus, textarea:focus, select:focus { border-color: var(--tessera-brand-800) !important; box-shadow: var(--tessera-focus-ring) !important; outline: none !important; } /* --- Cards / modals — elevation + glass backdrop blur --- */ .modal-content, .popover, .dropdown-menu, .hero-unit { border-radius: var(--tessera-radius-lg) !important; box-shadow: var(--tessera-shadow-xl) !important; border: 1px solid var(--elevation-stroke) !important; background: var(--background-primary) !important; } .tooltip-inner { border-radius: var(--tessera-radius-sm) !important; box-shadow: var(--tessera-shadow-lg) !important; font-weight: 500; padding: 6px 10px; } /* Modal backdrop — soft tint + blur for a modern glass effect */ .modal-backdrop, .modal.fade .modal-backdrop, .modal-backdrop.fade.in { background: rgba(15, 23, 42, 0.45) !important; backdrop-filter: blur(6px) saturate(120%); -webkit-backdrop-filter: blur(6px) saturate(120%); opacity: 1 !important; } .modal-dialog { animation: tessera-modal-in 220ms var(--tessera-ease-out); } @keyframes tessera-modal-in { from { opacity: 0; transform: translateY(8px) scale(0.985); } to { opacity: 1; transform: translateY(0) scale(1); } } .ticket-zoom .article-view .article, .ticketOverview .table tr, .overview .table td, .dashboard .stats-box { border-radius: var(--tessera-radius-md); } /* --- Sidebar navigation accent --- */ .navigation { background: radial-gradient(circle at 0% 0%, rgba(21, 101, 192, 0.06) 0%, transparent 40%), linear-gradient( 180deg, var(--background-secondary) 0%, var(--background-tertiary) 100%) !important; border-right: 1px solid var(--border) !important; backdrop-filter: saturate(1.1); } .navigation .tasks .task, .navigation .main-navigation .nav-tab, .navigation .nav-tab--search { transition: background 180ms var(--tessera-ease-out), box-shadow 180ms var(--tessera-ease-out), color 180ms var(--tessera-ease-out); position: relative; } .navigation .tasks .task.is-active, .navigation .nav-tab--search.is-active, .navigation .main-navigation .nav-tab.is-active { background-color: var(--background-active) !important; color: var(--text-normal) !important; box-shadow: inset 3px 0 0 var(--tessera-sidebar-accent), inset 0 0 20px -4px rgba(21, 101, 192, 0.06); } .navigation .tasks .task.is-active::before, .navigation .main-navigation .nav-tab.is-active::before { content: ""; position: absolute; left: 0; top: 20%; bottom: 20%; width: 3px; background: var(--tessera-sidebar-accent); border-radius: 0 2px 2px 0; box-shadow: 0 0 12px rgba(21, 101, 192, 0.6); } .navigation .tasks .task:hover:not(.is-active), .navigation .main-navigation .nav-tab:hover:not(.is-active) { background-color: var(--background-modifier-hover) !important; } /* --- Avatars — subtle brand ring --- */ .avatar, .user-popover .avatar { box-shadow: 0 0 0 2px var(--background-primary), 0 0 0 3px var(--border); transition: box-shadow 150ms ease; } .user-popover:hover .avatar, .avatar:hover { box-shadow: 0 0 0 2px var(--background-primary), 0 0 0 3px var(--tessera-brand-800); } /* --- Tables (ticket overview, reports, admin) --- */ .table { border-collapse: separate; border-spacing: 0; } .table th { font-weight: 600; color: var(--text-muted); letter-spacing: 0.02em; text-transform: uppercase; font-size: 11px; border-bottom: 1px solid var(--border) !important; background: var(--background-secondary); } .table tbody tr:hover { background: var(--background-modifier-hover); } /* --- Ticket state badges / labels --- */ .label, .ticketState, .tag { border-radius: var(--tessera-radius-sm) !important; font-weight: 500; font-size: 11px; letter-spacing: 0.02em; } /* --- Login screen polish ------------------------------------------ * TESSERA's upstream login CSS assumes a white-ish hero-unit on a * dark fullscreen backdrop, so its stock text colors don't always * track our --text-normal variable. Force explicit high-contrast * colors on every text descendant so the welcome message, labels, * links, and inputs are always readable in both light and dark mode. * -----------------------------------------------------------------*/ .login.fullscreen { background: radial-gradient(circle at 0% 0%, rgba(21, 101, 192, 0.10) 0%, transparent 45%), radial-gradient(circle at 100% 100%, rgba(33, 150, 243, 0.08) 0%, transparent 50%), var(--fullscreen-background) !important; color: var(--text-normal) !important; } .login.fullscreen .fullscreen-center, .login.fullscreen .fullscreen-body { color: var(--text-normal) !important; } .login.fullscreen .hero-unit { border-radius: var(--tessera-radius-xl) !important; box-shadow: var(--tessera-shadow-xl) !important; padding: 40px 36px 32px 36px !important; background: var(--background-primary) !important; color: var(--text-normal) !important; border: 1px solid var(--elevation-stroke); backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); } /* Force readable text on everything inside the login card */ .login.fullscreen .hero-unit, .login.fullscreen .hero-unit p, .login.fullscreen .hero-unit label, .login.fullscreen .hero-unit h1, .login.fullscreen .hero-unit h2, .login.fullscreen .hero-unit h3, .login.fullscreen .hero-unit span, .login.fullscreen .hero-unit div { color: var(--text-normal) !important; } /* Muted text (helper/hint lines) — one shade lighter */ .login.fullscreen .hero-unit p, .login.fullscreen .hero-unit small, .login.fullscreen .hero-unit .hint, .login.fullscreen .hero-unit .help-block, .login.fullscreen p, .login.fullscreen .fullscreen-body > p { color: var(--text-muted) !important; letter-spacing: -0.005em; } /* Links — brand blue, brighter in dark mode for contrast */ .login.fullscreen a, .login.fullscreen .hero-unit a, .login.fullscreen .js-forgot-password, .login.fullscreen .js-signup { color: var(--tessera-brand-800) !important; text-decoration: none; font-weight: 500; } .login.fullscreen a:hover, .login.fullscreen .hero-unit a:hover { color: var(--tessera-brand-900) !important; text-decoration: underline; } html[data-theme="dark"] .login.fullscreen a, html[data-theme="dark"] .login.fullscreen .hero-unit a { color: #64b5f6 !important; } html[data-theme="dark"] .login.fullscreen a:hover, html[data-theme="dark"] .login.fullscreen .hero-unit a:hover { color: #90caf9 !important; } /* Form inputs — explicit background + text so they aren't transparent on the card */ .login.fullscreen .hero-unit .form-control, .login.fullscreen .hero-unit input[type="text"], .login.fullscreen .hero-unit input[type="email"], .login.fullscreen .hero-unit input[type="password"], .login.fullscreen .hero-unit input[type="tel"], .login.fullscreen .hero-unit textarea { background: var(--background-primary-alt) !important; color: var(--text-normal) !important; border: 1px solid var(--border) !important; } .login.fullscreen .hero-unit .form-control::placeholder, .login.fullscreen .hero-unit input::placeholder { color: var(--text-faint) !important; opacity: 1; } /* Welcome/maintenance message alert — high-contrast regardless of alert variant */ .login.fullscreen .alert, .login.fullscreen .alert--success, .login.fullscreen .alert--danger, .login.fullscreen .hero-unit.alert, .login.fullscreen .hero-unit .alert, .login.fullscreen .hero-unit .alert--success, .login.fullscreen .js-maintenanceLogin, .login.fullscreen .js-maintenanceMode { color: var(--text-normal) !important; background: var(--background-secondary) !important; border: 1px solid var(--border) !important; border-radius: var(--tessera-radius-md) !important; padding: 14px 18px !important; box-shadow: var(--tessera-shadow-xs); } .login.fullscreen .alert--success, .login.fullscreen .js-maintenanceLogin { border-left: 3px solid var(--tessera-success) !important; } .login.fullscreen .alert--danger, .login.fullscreen .js-maintenanceMode { border-left: 3px solid var(--tessera-danger) !important; background: rgba(198, 40, 40, 0.06) !important; } /* Logo + button sizing */ .login .company-logo { max-width: 220px; margin: 0 auto 22px auto; display: block; filter: drop-shadow(0 8px 16px rgba(21, 101, 192, 0.12)); transition: transform 400ms var(--tessera-ease-out); } .login.fullscreen .hero-unit:hover .company-logo { transform: scale(1.02); } .login .hero-unit .js-login { padding-block: 10px; font-size: 15px; } .login.fullscreen .hero-unit .btn--primary { width: 100%; font-size: 15px; padding-block: 12px; } /* --- Dashboard widget cards — elevated, responsive to hover --- */ .dashboard .stats-box, .dashboard .channel-stats, .dashboard .stats { border-radius: var(--tessera-radius-md); border: 1px solid var(--border); background: var(--background-primary); box-shadow: var(--tessera-shadow-sm); transition: box-shadow 240ms var(--tessera-ease-out), transform 240ms var(--tessera-ease-out), border-color 240ms var(--tessera-ease-out); overflow: hidden; position: relative; } .dashboard .stats-box::before, .dashboard .channel-stats::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--tessera-gradient-primary); opacity: 0; transition: opacity 240ms var(--tessera-ease-out); } .dashboard .stats-box:hover, .dashboard .channel-stats:hover { box-shadow: var(--tessera-shadow-lg); transform: translateY(-2px); border-color: var(--tessera-brand-200); } .dashboard .stats-box:hover::before, .dashboard .channel-stats:hover::before { opacity: 1; } /* --- Ticket article cards --- */ .article-view .article { border-radius: var(--tessera-radius-md) !important; box-shadow: var(--elevation-low); border: 1px solid var(--border-article-customer); } /* --- Scrollbars (WebKit) — on-brand --- */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--background-secondary); } ::-webkit-scrollbar-thumb { background: var(--tessera-slate-300); border-radius: 10px; border: 2px solid var(--background-secondary); } ::-webkit-scrollbar-thumb:hover { background: var(--tessera-brand-800); } /* --- Search bar polish --- */ .search .search-holder { border-radius: var(--tessera-radius-md) !important; border: 1px solid var(--border) !important; transition: border-color 150ms ease, box-shadow 150ms ease; } .search.focused .search-holder { border-color: var(--tessera-brand-800) !important; box-shadow: var(--tessera-focus-ring) !important; } /* --- Selection color --- */ ::selection { background: var(--background-modifier-accent-dark); color: var(--text-normal); } /* --- Splash screen (before the SPA mounts) — keep the pulse from the * nginx-injected inline style, but ensure the background matches --- */ .splash { background: var(--background-primary) !important; } .splash-title { color: var(--text-muted) !important; font-weight: 500; letter-spacing: 0.02em; }