/* ============================================================================ TUNERSUITE — ALIENTECH · industrial design system ---------------------------------------------------------------------------- A ground-up theme treatment inspired by Alientech's KESS3 / device hardware: matte black + gunmetal, an industrial lime->yellow accent, green status LEDs, a fine carbon grid, technical typography (Chakra Petch) and monospaced data (JetBrains Mono). It restyles the shared component classes wholesale — this is a DIFFERENT design, not a recolour. Scoped entirely to [data-theme="alientech"] (the layout renders ), so it is inert on every other theme. COLOURS come from the operator's theme_* settings via the palette resolver (--ts-primary / --ts-secondary / --ts-bg-body / …), seeded from config/themes.php on theme select. So the design is fixed but every colour is customisable in Settings Hub. This file hardcodes the TREATMENT, not the hues. ============================================================================ */ @import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap'); /* ---------------------------------------------------------------- fonts --- */ [data-theme="alientech"] { --al-sans: 'Chakra Petch', 'Segoe UI', -apple-system, sans-serif; --al-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --al-grad: linear-gradient(120deg, var(--ts-primary), var(--ts-secondary)); /* text/ink shown ON the accent (lime) — operator-customisable via the theme_on_primary_color setting (injected as --ts-on-primary by the layout); falls back to near-black for the default lime accent. */ --al-ink: var(--ts-on-primary, #0a0d05); --al-line: rgba(var(--ts-primary-rgb), 0.16); --al-line-soft: rgba(var(--ts-primary-rgb), 0.09); /* map the framework font tokens so EVERY component inherits the theme font */ --ts-font: var(--al-sans); --g-sans: var(--al-sans); --g-mono: var(--al-mono); --g-r-sm: 4px; --g-r-md: 7px; --g-r-lg: 9px; --g-r-xl: 12px; --ts-radius: 8px; --ts-radius-md: 8px; --ts-radius-lg: 10px; } [data-theme="alientech"] body, [data-theme="alientech"] .glass-card, [data-theme="alientech"] .card, [data-theme="alientech"] .btn { font-family: var(--al-sans); letter-spacing: 0.005em; } [data-theme="alientech"] body.glass-v2 { --g-text: var(--ts-text-primary); } /* Headings — technical, tight, slightly condensed feel */ [data-theme="alientech"] h1, [data-theme="alientech"] h2, [data-theme="alientech"] h3, [data-theme="alientech"] h4, [data-theme="alientech"] h5, [data-theme="alientech"] h6, [data-theme="alientech"] .h1, [data-theme="alientech"] .h2, [data-theme="alientech"] .h3, [data-theme="alientech"] .h4, [data-theme="alientech"] .h5, [data-theme="alientech"] .h6 { font-family: var(--al-sans); font-weight: 700; letter-spacing: -0.01em; } /* Data / numbers / codes -> monospaced + tabular */ [data-theme="alientech"] .num, [data-theme="alientech"] .ts-stat__num, [data-theme="alientech"] .stat-card .k-v, [data-theme="alientech"] .kpi .k-v, [data-theme="alientech"] .ts-network-hero-stat-value, [data-theme="alientech"] code, [data-theme="alientech"] .badge, [data-theme="alientech"] .ts-status-pill, [data-theme="alientech"] .display-1, [data-theme="alientech"] .display-2, [data-theme="alientech"] .display-3, [data-theme="alientech"] .display-4 { font-family: var(--al-mono) !important; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } /* Small uppercase labels / eyebrows / section headers -> mono tracked */ [data-theme="alientech"] .text-uppercase, [data-theme="alientech"] .nav-section-label, [data-theme="alientech"] .sidebar-label, [data-theme="alientech"] .form-label, [data-theme="alientech"] .table > thead th, [data-theme="alientech"] .ts-table thead th, [data-theme="alientech"] .card-header .text-muted, [data-theme="alientech"] .stat-card .k-l, [data-theme="alientech"] .kpi .k-l { font-family: var(--al-mono) !important; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.72em; } /* -------------------------------------------------------- page backdrop --- */ /* Carbon grid + gunmetal glow (skipped when a photo background is set). */ [data-theme="alientech"] body:not(:has(.ts-app-bg)) { background: linear-gradient(var(--al-line-soft) 1px, transparent 1px) 0 0 / 46px 46px, linear-gradient(90deg, var(--al-line-soft) 1px, transparent 1px) 0 0 / 46px 46px, radial-gradient(1100px 520px at 82% -10%, rgba(var(--ts-primary-rgb), 0.06), transparent 60%), radial-gradient(820px 480px at -8% 12%, rgba(var(--ts-secondary-rgb), 0.05), transparent 55%), var(--ts-bg-body) !important; background-attachment: fixed !important; } /* --------------------------------------------------------------- cards ---- */ /* Hard-edged gunmetal panels with a lime signal rail — NOT frosted glass. */ [data-theme="alientech"] .glass-card, [data-theme="alientech"] .card, [data-theme="alientech"] .ts-card, [data-theme="alientech"] .glass-section { background: linear-gradient(var(--al-line-soft) 1px, transparent 1px) 0 0 / 44px 44px, var(--ts-card-bg) !important; border: 1px solid var(--al-line) !important; border-radius: 10px !important; backdrop-filter: blur(6px) !important; -webkit-backdrop-filter: blur(6px) !important; box-shadow: 0 10px 34px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.03) !important; position: relative; overflow: hidden; } /* (left signal rail removed per operator request — clean left edge everywhere) */ [data-theme="alientech"] .glass-card::before, [data-theme="alientech"] .stat-card::before, [data-theme="alientech"] .kpi::before { content: none; } [data-theme="alientech"] .card-header, [data-theme="alientech"] .glass-card > .card-header { border-bottom: 1px solid var(--al-line) !important; background: rgba(var(--ts-primary-rgb), 0.03) !important; } /* ------------------------------------------------------------- sidebar ---- */ [data-theme="alientech"] .ts-sidebar, [data-theme="alientech"] .sidebar { border-right: 1px solid var(--al-line) !important; background: linear-gradient(var(--al-line-soft) 1px, transparent 1px) 0 0 / 44px 44px, var(--ts-sidebar-bg) !important; } /* nav rows get a status-LED slug on the left */ [data-theme="alientech"] .ts-sidebar .nav-link, [data-theme="alientech"] .sidebar-link { position: relative; border-radius: 7px; font-weight: 500; letter-spacing: 0.01em; } [data-theme="alientech"] .ts-sidebar .nav-link::before, [data-theme="alientech"] .sidebar-link::before { content: ""; position: absolute; left: 3px; top: 50%; width: 5px; height: 5px; border-radius: 50%; transform: translateY(-50%); background: rgba(var(--ts-primary-rgb), 0.25); transition: background 0.15s, box-shadow 0.15s; } [data-theme="alientech"] .ts-sidebar .nav-link:hover::before, [data-theme="alientech"] .sidebar-link:hover::before { background: var(--ts-primary); box-shadow: 0 0 8px var(--ts-primary); } /* active row -> lime gradient + lit LED */ [data-theme="alientech"] .ts-sidebar .nav-link.active, [data-theme="alientech"] .sidebar-link.active, [data-theme="alientech"] .ts-nav-item.active, [data-theme="alientech"] .nav-link.active { background: var(--al-grad) !important; color: var(--al-ink) !important; box-shadow: 0 6px 16px rgba(var(--ts-primary-rgb), 0.22); } [data-theme="alientech"] .ts-sidebar .nav-link.active::before, [data-theme="alientech"] .sidebar-link.active::before { background: var(--al-ink); box-shadow: none; } [data-theme="alientech"] .nav-link.active i, [data-theme="alientech"] .sidebar-link.active i { color: var(--al-ink) !important; } /* --------------------------------------------------------------- navbar --- */ [data-theme="alientech"] .ts-header, [data-theme="alientech"] .navbar, [data-theme="alientech"] .ts-navbar { border-bottom: 1px solid var(--al-line) !important; background: var(--ts-navbar-bg) !important; backdrop-filter: blur(10px) !important; } /* -------------------------------------------------------------- buttons --- */ [data-theme="alientech"] .ts-btn-primary, [data-theme="alientech"] .btn-primary, [data-theme="alientech"] .g-btn-primary, [data-theme="alientech"] .btn.btn-primary { background: var(--al-grad) !important; border: none !important; color: var(--al-ink) !important; font-family: var(--al-sans); font-weight: 700; letter-spacing: 0.02em; border-radius: 8px !important; box-shadow: 0 6px 18px rgba(var(--ts-primary-rgb), 0.22); } [data-theme="alientech"] .ts-btn-primary:hover, [data-theme="alientech"] .btn-primary:hover { filter: brightness(1.07); color: var(--al-ink) !important; } [data-theme="alientech"] .btn-outline-primary, [data-theme="alientech"] .ts-btn-secondary { border: 1px solid var(--al-line) !important; color: var(--ts-primary) !important; border-radius: 8px !important; background: rgba(var(--ts-primary-rgb), 0.05) !important; } /* --------------------------------------------------------------- tables --- */ [data-theme="alientech"] .table, [data-theme="alientech"] .ts-table { border-color: var(--al-line) !important; } [data-theme="alientech"] .table > thead th, [data-theme="alientech"] .ts-table thead th { background: rgba(var(--ts-primary-rgb), 0.05) !important; border-bottom: 1px solid var(--al-line) !important; color: var(--ts-text-primary) !important; } [data-theme="alientech"] .table > tbody td, [data-theme="alientech"] .ts-table tbody td { border-color: var(--al-line-soft) !important; } [data-theme="alientech"] .table-hover > tbody > tr:hover > *, [data-theme="alientech"] .ts-table tbody tr:hover > * { background: rgba(var(--ts-primary-rgb), 0.06) !important; } /* -------------------------------------------------------------- inputs ---- */ [data-theme="alientech"] .form-control, [data-theme="alientech"] .form-select, [data-theme="alientech"] .ts-input, [data-theme="alientech"] .ts-select, [data-theme="alientech"] .g-input { background: rgba(0, 0, 0, 0.22) !important; border: 1px solid var(--al-line) !important; border-radius: 7px !important; color: var(--ts-text-primary) !important; font-family: var(--al-sans); } [data-theme="alientech"] .form-control:focus, [data-theme="alientech"] .form-select:focus, [data-theme="alientech"] .ts-input:focus, [data-theme="alientech"] .ts-select:focus, [data-theme="alientech"] .g-input:focus { border-color: var(--ts-primary) !important; box-shadow: 0 0 0 3px rgba(var(--ts-primary-rgb), 0.20) !important; } /* Native