/* SX Agency CRM — Deep Space / Clear Liquid Glass presentation layer. * V6.1 Visual Pack | Non-functional styling only. * Loaded AFTER the original CSS so working flows and Supabase remain untouched. * Clear white-neutral optical material inspired by user's WWDC25 references. */ :root { --sx-clear-tint: rgba(248,252,255,.105); --sx-clear-tint-strong: rgba(245,251,255,.165); --sx-clear-stroke: rgba(248,251,255,.30); --sx-clear-inner: inset 0 1.25px 0 rgba(255,255,255,.34), inset 0 -1px 0 rgba(230,241,255,.08); --sx-clear-shadow: 0 9px 28px rgba(0,0,0,.20), 0 2px 8px rgba(0,0,0,.09); --sx-clear-blur: blur(24px) saturate(148%) brightness(.90); --sx-clear-sheen: linear-gradient(151deg,rgba(255,255,255,.17),rgba(255,255,255,.08) 30%,rgba(255,255,255,.06) 66%,rgba(255,255,255,.13)); } /* Full viewport backdrop; the supplied file already contains static camera, star flashes and meteors. * No CSS motion or camera transforms are applied to this element. */ html { background:#04070a; } body { background:#04070a url('assets/sx-deep-space-poster.jpg') center center / cover fixed no-repeat; overflow-x:hidden; } .sx-space-background { position:fixed; inset:0; width:100%; height:100%; z-index:0; overflow:hidden; pointer-events:none; isolation:isolate; background:#04070a url('assets/sx-deep-space-poster.jpg') center center / cover no-repeat; } .sx-space-background video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center center; pointer-events:none; } .sx-space-background::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,rgba(0,0,0,.15),rgba(0,0,0,.07) 40%,rgba(0,0,0,.18)), linear-gradient(180deg,rgba(0,0,0,.09),rgba(0,0,0,.13)); } #app { position:relative; z-index:1; min-height:100vh; } #toast { position:fixed; z-index:1400; } .sx-space-layout, .sx-space-layout .main,.sx-space-layout .content { background:transparent; } /* Shared optical surface: floating *clear* glass, not opaque charcoal fills. */ .sx-space-layout .panel, .sx-space-layout .kpi, .sx-space-layout .v3-toolbar, .sx-space-layout .sx-identity, .sx-space-layout .table-scroll, .sx-space-layout .mobile-lead-list, .sx-space-layout .pipe-col, .sx-space-layout .deal-card, .sx-space-layout .ops-panel, .sx-space-layout .rel-panel, .sx-space-layout .rel-shell, .sx-space-layout .li-panel, .sx-space-layout .li-stat, .sx-space-layout .li-safetybar, .sx-space-layout .li-candidate-preview, .sx-space-layout .sx-command-panel, .sx-space-layout .sx-bi-grid > div, .sx-space-layout .sx-bi-score, .sx-space-layout .sx-bi-note { background:var(--sx-clear-sheen); border:1px solid var(--sx-clear-stroke); box-shadow:var(--sx-clear-inner),var(--sx-clear-shadow); -webkit-backdrop-filter:var(--sx-clear-blur); backdrop-filter:var(--sx-clear-blur); color:#f6f8fc; } .sx-space-layout .panel, .sx-space-layout .kpi, .sx-space-layout .li-panel, .sx-space-layout .ops-panel, .sx-space-layout .rel-panel, .sx-space-layout .sx-command-panel { border-radius:22px; } .sx-space-layout .li-panel, .sx-space-layout .sx-command-panel, .sx-space-layout .ops-panel, .sx-space-layout .rel-panel { min-width:0; } .sx-space-layout .table-scroll, .sx-space-layout .mobile-lead-list, .sx-space-layout .pipe-col, .sx-space-layout .deal-card { border-radius:17px; } /* A soft edge sheen adds curvature without adding moving decorative layers. */ .sx-space-layout .panel, .sx-space-layout .kpi, .sx-space-layout .li-panel, .sx-space-layout .ops-panel, .sx-space-layout .rel-panel, .sx-space-layout .sx-command-panel { transition:background .25s ease,border-color .25s ease,box-shadow .25s ease; } @media(hover:hover){ .sx-space-layout .kpi:hover, .sx-space-layout .deal-card:hover, .sx-space-layout .li-candidate-preview:hover { border-color:rgba(255,255,255,.45); background:linear-gradient(148deg,rgba(255,255,255,.205),rgba(255,255,255,.10) 58%,rgba(255,255,255,.12)); box-shadow:var(--sx-clear-inner),0 13px 31px rgba(0,0,0,.24); } } /* Readability for dense data: translucent, lightly frosted, never opaque black. */ .sx-space-layout .table-scroll, .sx-space-layout .sx-command-tablewrap, .sx-space-layout .rel-shell { background:linear-gradient(149deg,rgba(255,255,255,.16),rgba(255,255,255,.09) 75%); border:1px solid rgba(255,255,255,.30); -webkit-backdrop-filter:blur(24px) saturate(135%) brightness(.73); backdrop-filter:blur(24px) saturate(135%) brightness(.73); } .sx-space-layout table th {background:rgba(242,249,255,.095);color:#e1e7ef;} .sx-space-layout table td {background:rgba(9,14,23,.04);color:#f3f6fb;border-color:rgba(250,252,255,.135);} .sx-space-layout table tr:hover td {background:rgba(255,255,255,.13);} .sx-space-layout .sx-command-tablewrap table {background:transparent;} .sx-space-layout .sx-command-tablewrap th {background:rgba(255,255,255,.09);} /* Pipeline columns and leads remain independent drag targets (no added overlay with pointer events). */ .sx-space-layout .pipe-col {background:linear-gradient(145deg,rgba(255,255,255,.16),rgba(255,255,255,.065));} .sx-space-layout .pipe-col.over {border-color:rgba(255,255,255,.77);background:rgba(255,255,255,.22);} .sx-space-layout .deal-card {background:linear-gradient(145deg,rgba(255,255,255,.19),rgba(255,255,255,.085));} /* Sidebar and navigation: translucent with bright but restrained selection. */ .sx-space-layout .sidebar { background:linear-gradient(112deg,rgba(255,255,255,.11),rgba(255,255,255,.065)); border-right:1px solid rgba(255,255,255,.23); box-shadow:inset -1px 0 rgba(255,255,255,.08),3px 0 23px rgba(0,0,0,.11); -webkit-backdrop-filter:blur(29px) saturate(140%) brightness(.72); backdrop-filter:blur(29px) saturate(140%) brightness(.72); } .sx-space-layout .sx-nav button {transition:background .22s ease,border-color .22s ease,transform .22s ease;color:#e5ebf4;} .sx-space-layout .sx-nav button:hover {background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.14);} .sx-space-layout .sx-nav button.active { background:linear-gradient(140deg,rgba(255,255,255,.255),rgba(255,255,255,.12) 80%); border-color:rgba(255,255,255,.44); border-radius:17px; box-shadow:inset 0 1px rgba(255,255,255,.36),0 6px 18px rgba(0,0,0,.15); color:#fff; } .sx-space-layout .sx-identity, .sx-space-layout .sx-global-search-field, .sx-space-layout .sx-bell, .sx-space-layout .sx-top-avatar { background:linear-gradient(153deg,rgba(255,255,255,.185),rgba(255,255,255,.085)); border:1px solid rgba(255,255,255,.34); box-shadow:inset 0 1.3px rgba(255,255,255,.31),0 6px 18px rgba(0,0,0,.16); -webkit-backdrop-filter:blur(20px) saturate(145%) brightness(.76); backdrop-filter:blur(20px) saturate(145%) brightness(.76); } .sx-space-layout .sx-global-search-field {border-radius:100px;} /* Translucent control family: existing listeners, names, form submission untouched. */ .sx-space-layout .btn:not(.btn-primary):not(.btn-danger), .sx-space-layout .glass-filter-trigger, .sx-space-layout .li-glass-trigger, .sx-space-layout .form-glass-trigger, .sx-space-layout .li-button:not(.li-primary), .sx-space-layout .rel-outline, .sx-space-layout .ops-ghost, .sx-space-layout .iconbtn, .sx-space-layout .tag, .sx-space-layout .stage, .sx-space-layout .li-chip, .sx-space-layout .li-tabs, .sx-space-layout .li-tabs button.active { background:linear-gradient(151deg,rgba(255,255,255,.24),rgba(255,255,255,.115) 55%,rgba(255,255,255,.11)); border-color:rgba(255,255,255,.35); box-shadow:inset 0 1px rgba(255,255,255,.31),0 3px 10px rgba(0,0,0,.11); -webkit-backdrop-filter:blur(19px) saturate(146%) brightness(.84); backdrop-filter:blur(19px) saturate(146%) brightness(.84); } .sx-space-layout .glass-filter-trigger, .sx-space-layout .li-glass-trigger, .sx-space-layout .form-glass-trigger {border-radius:17px;} .sx-space-layout .li-glass-trigger::before {background:linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent);} .sx-space-layout .glass-filter-trigger:hover, .sx-space-layout .li-glass-trigger:hover, .sx-space-layout .form-glass-trigger:hover, .sx-space-layout .btn:not(.btn-primary):not(.btn-danger):hover { background:linear-gradient(145deg,rgba(255,255,255,.29),rgba(255,255,255,.13)); border-color:rgba(255,255,255,.57); } .sx-space-layout .glass-filter-menu, .sx-space-layout .li-glass-menu, .sx-space-layout .form-glass-menu, .sx-space-layout .sx-global-results { background:linear-gradient(150deg,rgba(210,222,239,.38),rgba(138,159,187,.23) 48%,rgba(96,118,151,.27)) !important; border:1px solid rgba(255,255,255,.50); box-shadow:inset 0 1.3px rgba(255,255,255,.40),0 19px 41px rgba(0,0,0,.28); -webkit-backdrop-filter:blur(33px) saturate(152%) brightness(.66) !important; backdrop-filter:blur(33px) saturate(152%) brightness(.66) !important; color:#f9fbfe; } /* Portalled menus leave .sx-space-layout: keep exact existing fixed stacking but use glass material. */ .li-glass-menu.li-portaled { background:linear-gradient(150deg,rgba(205,220,239,.40),rgba(91,117,151,.34)) !important; -webkit-backdrop-filter:blur(33px) saturate(150%) brightness(.64) !important; backdrop-filter:blur(33px) saturate(150%) brightness(.64) !important; border-color:rgba(255,255,255,.55); box-shadow:inset 0 1.3px rgba(255,255,255,.40),0 19px 41px rgba(0,0,0,.30); } .sx-space-layout .glass-filter-option:hover, .sx-space-layout .li-glass-option:hover, .sx-space-layout .form-glass-option:hover, .sx-space-layout .glass-filter-option.is-selected, .sx-space-layout .li-glass-option.li-is-selected {background:rgba(255,255,255,.20);} .sx-space-layout input:not([type="checkbox"]):not([type="radio"]), .sx-space-layout select, .sx-space-layout textarea, .sx-space-layout .li-input, .sx-space-layout #li-suburb-custom { background:linear-gradient(160deg,rgba(255,255,255,.155),rgba(255,255,255,.085)); border:1px solid rgba(255,255,255,.33); border-radius:15px; color:#fff; box-shadow:inset 0 1px rgba(255,255,255,.16); -webkit-backdrop-filter:blur(18px) saturate(130%) brightness(.73); backdrop-filter:blur(18px) saturate(130%) brightness(.73); } .sx-space-layout input:focus-visible, .sx-space-layout select:focus-visible, .sx-space-layout textarea:focus-visible, .sx-space-layout button:focus-visible, .sx-space-layout a:focus-visible { outline:2px solid rgba(255,255,255,.93); outline-offset:3px; } .sx-space-layout .sx-global-search-field input, .sx-space-layout .li-native-select {background:transparent;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;} /* Modal: the form itself is glass, while the scrim darkens the underlying work area. */ .modal-backdrop {background:rgba(0,0,0,.45);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);} .sx-space-layout .modal, .modal-backdrop .modal { background:linear-gradient(145deg,rgba(251,252,255,.235),rgba(233,242,255,.115) 48%,rgba(212,230,255,.125)); border:1px solid rgba(255,255,255,.52); border-radius:24px; box-shadow:inset 0 1.3px rgba(255,255,255,.46),0 27px 72px rgba(0,0,0,.50); -webkit-backdrop-filter:blur(32px) saturate(148%) brightness(.62); backdrop-filter:blur(32px) saturate(148%) brightness(.62); } .modal-backdrop .modal :is(label,.muted) {color:#e1e6ee;} /* The login page is also real UI: keep the same login form and no changes to auth logic. */ .auth-art {background:linear-gradient(150deg,rgba(255,255,255,.14),rgba(255,255,255,.05));border-right:1px solid rgba(255,255,255,.26);backdrop-filter:blur(18px) brightness(.66);-webkit-backdrop-filter:blur(18px) brightness(.66);} .auth-panel {background:transparent;} .auth-card {padding:29px;border-radius:24px;border:1px solid rgba(255,255,255,.32);background:linear-gradient(140deg,rgba(255,255,255,.20),rgba(255,255,255,.065));box-shadow:inset 0 1px rgba(255,255,255,.32),0 15px 46px rgba(0,0,0,.24);backdrop-filter:blur(27px) brightness(.78);-webkit-backdrop-filter:blur(27px) brightness(.78);} .auth-card input {background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.32);} /* De-emphasize the galaxy where lists are particularly dense without opaque black boxes. */ .sx-space-layout .li-result, .sx-space-layout .li-prospect, .sx-space-layout .li-priority-row, .sx-space-layout .ops-list-row, .sx-space-layout .rel-company, .sx-space-layout .sx-command-task {border-color:rgba(255,255,255,.19);} .sx-space-layout .li-priority-row:hover, .sx-space-layout .li-prospect:hover, .sx-space-layout .rel-company:hover {background:rgba(255,255,255,.12);} .sx-space-layout .li-idea, .sx-space-layout .sx-eligibility-choice, .sx-space-layout .sx-outreach-compliance {background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.24);} .sx-space-layout .li-warn,.sx-space-layout .ops-error,.sx-space-layout .rel-error {background:rgba(113,39,49,.35);border-color:rgba(255,175,182,.45);} .sx-space-layout .li-success,.sx-space-layout .ops-success {background:rgba(38,98,75,.30);border-color:rgba(173,235,200,.42);} /* Do not flatten primary white CTAs or semantic danger/status indicators. */ .sx-space-layout .btn-primary,.sx-space-layout .li-primary {color:#0b1420;} .sx-space-layout :is(.muted,.li-muted,.kpi-foot,.sx-command-footnote,.li-disclaimer) {color:#d1dae7;} /* Resource-sensitive and accessibility fallbacks. */ @media(max-width:770px) { .sx-space-background video{object-position:center center;} .sx-space-layout .sidebar {background:linear-gradient(126deg,rgba(255,255,255,.14),rgba(255,255,255,.09));-webkit-backdrop-filter:blur(17px) brightness(.65);backdrop-filter:blur(17px) brightness(.65);} .sx-space-layout .panel,.sx-space-layout .kpi,.sx-space-layout .li-panel,.sx-space-layout .ops-panel,.sx-space-layout .rel-panel,.sx-space-layout .sx-command-panel { -webkit-backdrop-filter:blur(16px) saturate(125%) brightness(.75);backdrop-filter:blur(16px) saturate(125%) brightness(.75);border-radius:19px;} .sx-space-layout .glass-filter-menu,.sx-space-layout .li-glass-menu,.li-glass-menu.li-portaled { -webkit-backdrop-filter:blur(18px) brightness(.58)!important;backdrop-filter:blur(18px) brightness(.58)!important;} } @media(prefers-reduced-motion:reduce){ .sx-space-background video{display:none!important;} *,*::before,*::after {scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;} } @media(prefers-reduced-transparency:reduce){ .sx-space-layout :is(.panel,.kpi,.li-panel,.ops-panel,.rel-panel,.sx-command-panel,.table-scroll,.pipe-col,.deal-card,.sidebar,.modal), .modal-backdrop .modal,.auth-card,.auth-art, .sx-space-layout :is(.glass-filter-menu,.li-glass-menu,.form-glass-menu) { background:rgba(25,32,44,.96)!important; -webkit-backdrop-filter:none!important; backdrop-filter:none!important; } } @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) { .sx-space-layout :is(.panel,.kpi,.li-panel,.ops-panel,.rel-panel,.sx-command-panel,.table-scroll,.pipe-col,.deal-card,.sidebar,.modal), .modal-backdrop .modal,.auth-card,.auth-art, .sx-space-layout :is(.glass-filter-menu,.li-glass-menu,.form-glass-menu) { background:rgba(30,37,48,.87)!important; } } /* Keep the global search as ONE continuous lens, not a grey rectangle inside a pill. High specificity required because the general input rule above targets type=search. */ .sx-space-layout .sx-global-search-field input[type="search"] { background:transparent!important; border:0!important; box-shadow:none!important; -webkit-backdrop-filter:none!important; backdrop-filter:none!important; border-radius:0; } .sx-space-layout :is(input,textarea)::placeholder {color:rgba(236,244,253,.67);opacity:1;} .sx-space-layout .sx-global-search-field input[type="search"]::placeholder {color:rgba(239,246,255,.75);} /* ======================================================================= V6.1.1 — TRUE CLARITY FIX (2026-10-24) Corrections: lower optical blur, NO darkening of the backdrop, no stacked smoky nested surfaces. Leaves app/auth/API/layout functionality untouched. ======================================================================= */ :root { --sx-clear-blur: blur(3px) saturate(118%) brightness(1.08); --sx-clear-sheen: linear-gradient(147deg, rgba(255,255,255,.095) 0%, rgba(255,255,255,.038) 22%, rgba(240,248,255,.012) 66%, rgba(255,255,255,.055) 100%); --sx-clear-tint:rgba(250,252,255,.045); --sx-clear-stroke:rgba(247,251,255,.38); --sx-clear-inner:inset 0 1.5px 0 rgba(255,255,255,.36), inset 1px 0 rgba(255,255,255,.08), inset 0 -1px rgba(245,250,255,.06); --sx-clear-shadow:0 12px 30px rgba(0,0,0,.16),0 2px 8px rgba(0,0,0,.11); } /* Stop dark gradients from previous versions and preserve individual stars in the galaxy behind all primary cards and workspaces. */ .sx-space-layout :is(.panel,.kpi,.v3-toolbar,.table-scroll,.mobile-lead-list, .pipe-col,.deal-card,.ops-panel,.rel-panel,.rel-shell,.li-panel,.li-stat, .li-safetybar,.li-candidate-preview,.sx-command-panel,.sx-bi-score, .sx-bi-note), .sx-space-layout .sx-bi-grid > div { background:var(--sx-clear-sheen) !important; background-color:transparent !important; -webkit-backdrop-filter:var(--sx-clear-blur) !important; backdrop-filter:var(--sx-clear-blur) !important; border-color:var(--sx-clear-stroke); box-shadow:var(--sx-clear-inner),var(--sx-clear-shadow); } /* Strongest clarity on dashboard KPI panels and their chart siblings. */ .sx-space-layout :is(.sx-metric,.sx-graph,.sx-priorities,.sx-recent) { background:linear-gradient(140deg, rgba(255,255,255,.087) 0%, rgba(255,255,255,.026) 41%, rgba(255,255,255,.010) 74%, rgba(255,255,255,.052) 100%) !important; -webkit-backdrop-filter:blur(2px) saturate(120%) brightness(1.09) !important; backdrop-filter:blur(2px) saturate(120%) brightness(1.09) !important; } /* Prevent double-layered frosting inside already-clear parent panels. */ .sx-space-layout :is(.panel,.li-panel,.sx-command-panel,.rel-panel,.ops-panel) :is(.table-scroll,.sx-command-tablewrap,.mobile-lead-list,.rel-shell) { background:transparent !important; background-color:transparent !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; box-shadow:none; } .sx-space-layout :is(.sx-command-panel,.panel) table {background:transparent !important;} .sx-space-layout :is(.sx-command-panel,.panel) table :is(th,td) {background-color:transparent;} .sx-space-layout :is(.sx-command-panel,.panel) table thead th {background:rgba(255,255,255,.06);} .sx-space-layout :is(.sx-command-panel,.panel) table tbody tr:hover td {background:rgba(255,255,255,.12);} /* Let the galaxy pass through the sidebar instead of forming a dark wall. */ .sx-space-layout .sidebar { background:linear-gradient(110deg,rgba(245,251,255,.085),rgba(245,251,255,.018)) !important; -webkit-backdrop-filter:blur(7px) saturate(112%) brightness(1.06) !important; backdrop-filter:blur(7px) saturate(112%) brightness(1.06) !important; border-right:1px solid rgba(255,255,255,.34); } .sx-space-layout .sx-nav button.active { background:linear-gradient(139deg,rgba(255,255,255,.24),rgba(255,255,255,.085) 58%,rgba(255,255,255,.04)) !important; border-color:rgba(255,255,255,.53); -webkit-backdrop-filter:blur(6px) brightness(1.08) !important; backdrop-filter:blur(6px) brightness(1.08) !important; } .sx-space-layout .sx-identity, .sx-space-layout .sx-global-search-field, .sx-space-layout .sx-bell, .sx-space-layout .sx-top-avatar { background:linear-gradient(145deg,rgba(255,255,255,.15),rgba(255,255,255,.035)) !important; -webkit-backdrop-filter:blur(5px) brightness(1.10) !important; backdrop-filter:blur(5px) brightness(1.10) !important; } /* Non-primary glass controls must show the environment beneath them. */ .sx-space-layout :is(.glass-filter-trigger,.li-glass-trigger,.form-glass-trigger, .li-tabs,.li-tabs button.active,.li-chip,.tag,.stage,.iconbtn, .li-button:not(.li-primary),.btn:not(.btn-primary):not(.btn-danger), .ops-ghost,.rel-outline) { background:linear-gradient(145deg,rgba(255,255,255,.175),rgba(255,255,255,.047) 60%,rgba(255,255,255,.025)) !important; -webkit-backdrop-filter:blur(5px) saturate(115%) brightness(1.06) !important; backdrop-filter:blur(5px) saturate(115%) brightness(1.06) !important; border-color:rgba(255,255,255,.38); } .sx-space-layout .btn-primary,.sx-space-layout .li-primary {background:#f6f9fc !important;color:#08111b !important;} .sx-space-layout :is(.glass-filter-menu,.li-glass-menu,.form-glass-menu,.sx-global-results), .li-glass-menu.li-portaled { /* Menus need more separation so option labels remain readable. */ background:linear-gradient(150deg,rgba(218,232,248,.24),rgba(175,197,222,.115)) !important; -webkit-backdrop-filter:blur(11px) saturate(135%) brightness(1.03) !important; backdrop-filter:blur(11px) saturate(135%) brightness(1.03) !important; border-color:rgba(255,255,255,.52); } .sx-space-layout :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea,.li-input) { background:linear-gradient(145deg,rgba(255,255,255,.125),rgba(255,255,255,.032)) !important; -webkit-backdrop-filter:blur(4px) brightness(1.08) !important; backdrop-filter:blur(4px) brightness(1.08) !important; border-color:rgba(255,255,255,.38); } .sx-space-layout .sx-global-search-field input[type="search"] { background:transparent!important; -webkit-backdrop-filter:none!important;backdrop-filter:none!important; border:0!important;box-shadow:none!important; } /* The app's modal keeps a soft glass material, not an opaque floating sheet. */ .sx-space-layout .modal,.modal-backdrop .modal { background:linear-gradient(142deg,rgba(250,252,255,.175),rgba(255,255,255,.063) 59%,rgba(255,255,255,.09)) !important; -webkit-backdrop-filter:blur(12px) saturate(122%) brightness(1.04) !important; backdrop-filter:blur(12px) saturate(122%) brightness(1.04) !important; } .auth-art,.auth-card { background:linear-gradient(140deg,rgba(255,255,255,.17),rgba(255,255,255,.045)) !important; -webkit-backdrop-filter:blur(8px) brightness(1.06) !important; backdrop-filter:blur(8px) brightness(1.06) !important; } /* Deliberately preserve contrast on top of bright moving nebulas. */ .sx-space-layout :is(.kpi-value,.company-title,.panel h2,.sx-command-panel h2) { text-shadow:0 1px 7px rgba(0,0,0,.42); } .sx-space-layout :is(.sx-graph,.sx-priorities,.sx-recent) :is(.muted,small) { text-shadow:0 1px 5px rgba(0,0,0,.5); } /* Outer video overlay should not darken the star field behind the glass. */ .sx-space-background::after { background:linear-gradient(180deg,rgba(0,0,0,.018),rgba(0,0,0,.025)); } @media(max-width:770px) { .sx-space-layout .sidebar { background:linear-gradient(125deg,rgba(255,255,255,.125),rgba(255,255,255,.045)) !important; -webkit-backdrop-filter:blur(7px) brightness(1.04) !important; backdrop-filter:blur(7px) brightness(1.04) !important; } .sx-space-layout :is(.panel,.kpi,.li-panel,.ops-panel,.rel-panel,.sx-command-panel) { -webkit-backdrop-filter:blur(3px) saturate(112%) brightness(1.05) !important; backdrop-filter:blur(3px) saturate(112%) brightness(1.05) !important; } } /* Respect users who request less transparency or have no backdrop support. */ @media(prefers-reduced-transparency:reduce) { .sx-space-layout :is(.panel,.kpi,.v3-toolbar,.table-scroll,.mobile-lead-list, .pipe-col,.deal-card,.ops-panel,.rel-panel,.rel-shell,.li-panel,.li-stat, .li-safetybar,.li-candidate-preview,.sx-command-panel,.sx-bi-score,.sx-bi-note,.sidebar), .sx-space-layout .sx-bi-grid > div,.modal-backdrop .modal { background:rgba(21,27,36,.96) !important; -webkit-backdrop-filter:none!important;backdrop-filter:none!important; } } @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) { .sx-space-layout :is(.panel,.kpi,.v3-toolbar,.table-scroll,.mobile-lead-list, .pipe-col,.deal-card,.ops-panel,.rel-panel,.rel-shell,.li-panel,.li-stat, .li-safetybar,.li-candidate-preview,.sx-command-panel,.sx-bi-score,.sx-bi-note,.sidebar), .sx-space-layout .sx-bi-grid > div,.modal-backdrop .modal { background:rgba(26,33,44,.90) !important; } } /* ============================================================================ SX AGENCY CRM — V6.1.2 Precision Liquid Glass Foreground material refinement ONLY. Background video, geometry, app logic, authentication, routing, worker and customer data are untouched. This final cascade intentionally overrides earlier clarity/material experiments. ============================================================================ */ :root { --sx-optic-bg: radial-gradient(ellipse 72% 46% at 8% -19%, rgba(255,255,255,.135), transparent 76%), radial-gradient(ellipse 22% 52% at 99% 10%, rgba(255,255,255,.068), transparent 86%), radial-gradient(ellipse 45% 22% at 57% 115%, rgba(238,247,255,.040), transparent 100%), linear-gradient(177deg, rgba(255,255,255,.108) 0%, rgba(255,255,255,.064) 22%, rgba(252,254,255,.040) 62%, rgba(255,255,255,.034) 100%); --sx-optic-border: rgba(255,255,255,.278); --sx-optic-blur: blur(9px) saturate(123%) brightness(1.025); --sx-optic-shadow: inset 0 1.4px 0 rgba(255,255,255,.51), inset 1px 0 0 rgba(255,255,255,.12), inset -1px 0 0 rgba(223,238,255,.07), inset 0 -1.2px 0 rgba(241,248,255,.14), inset 0 0 21px rgba(247,251,255,.028), 0 12px 32px rgba(0,0,0,.20), 0 2px 7px rgba(0,0,0,.105); --sx-optic-rim: linear-gradient(124deg, rgba(255,255,255,.63) 0%, rgba(255,255,255,.29) 11%, rgba(255,255,255,.04) 31%, rgba(255,255,255,.00) 58%, rgba(255,255,255,.09) 80%, rgba(255,255,255,.29) 99%); } /* Precision-moulded transparent material across existing, functional cards. */ .sx-space-layout :is(.panel,.kpi,.v3-toolbar,.table-scroll,.mobile-lead-list, .pipe-col,.deal-card,.ops-panel,.rel-panel,.rel-shell,.li-panel,.li-stat, .li-safetybar,.li-candidate-preview,.sx-command-panel,.sx-bi-score,.sx-bi-note), .sx-space-layout .sx-bi-grid > div { position:relative; background:var(--sx-optic-bg) !important; background-color:transparent !important; border:1px solid var(--sx-optic-border) !important; box-shadow:var(--sx-optic-shadow) !important; -webkit-backdrop-filter:var(--sx-optic-blur) !important; backdrop-filter:var(--sx-optic-blur) !important; transition:background .24s ease, border-color .24s ease, box-shadow .24s ease !important; transform:none; } .sx-space-layout :is(.panel,.kpi,.li-panel,.ops-panel,.rel-panel,.sx-command-panel,.v3-toolbar) { border-radius:22px; } .sx-space-layout :is(.pipe-col,.deal-card,.table-scroll,.mobile-lead-list) {border-radius:18px;} /* Reflected light in glass thickness (1px inner optical rim, never a neon line). Mask keeps the centre perfectly clear, and click targets pass through. */ .sx-space-layout :is(.panel,.kpi,.v3-toolbar,.pipe-col,.deal-card,.ops-panel, .rel-panel,.li-panel,.li-stat,.sx-command-panel,.sx-bi-score)::after { content:""; display:block; position:absolute; inset:1px; border-radius:inherit; padding:1.25px; border:0; background:var(--sx-optic-rim); -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; z-index:1; opacity:.83; } /* Additional very subtle top and corner lens reflection on the large surfaces. Only near the perimeter: content and charts are never covered. */ .sx-space-layout :is(.panel,.kpi,.li-panel,.sx-command-panel,.ops-panel,.rel-panel)::before { content:""; display:block; pointer-events:none; position:absolute; inset:0; border-radius:inherit; border:0; background: radial-gradient(ellipse 24% 8% at 24% 0%,rgba(255,255,255,.20),transparent 100%), radial-gradient(ellipse 11% 18% at 100% 0%,rgba(255,255,255,.13),transparent 100%), radial-gradient(ellipse 15% 12% at 0% 100%,rgba(255,255,255,.073),transparent 100%); opacity:.78; z-index:0; } /* KPI inherited a disabled :before from legacy code; restore the lens only. */ .sx-space-layout .sx-metric::before{display:block !important;} /* Perimeter is subtle at rest and catches more light on hover, no movement. */ @media(hover:hover) { .sx-space-layout :is(.panel,.kpi,.li-panel,.sx-command-panel,.ops-panel, .rel-panel,.pipe-col,.deal-card,.li-candidate-preview):hover { transform:none !important; border-color:rgba(255,255,255,.395) !important; background: radial-gradient(ellipse 65% 42% at 8% -15%,rgba(255,255,255,.18),transparent 79%), linear-gradient(178deg,rgba(255,255,255,.13),rgba(255,255,255,.050) 58%,rgba(255,255,255,.047)) !important; box-shadow:inset 0 1.5px rgba(255,255,255,.59), inset 1px 0 rgba(255,255,255,.13), inset 0 -1px rgba(255,255,255,.15), 0 13px 34px rgba(0,0,0,.205),0 2px 8px rgba(0,0,0,.11) !important; } .sx-space-layout :is(.panel,.kpi,.li-panel,.sx-command-panel,.ops-panel,.rel-panel,.pipe-col,.deal-card):hover::after {opacity:1;} } /* Prevent the original legacy hover from shifting cards up by one pixel. */ .sx-space-layout .sx-metric:hover {transform:none !important;} /* Legible chart text without covering the glass with a dark sheet. */ .sx-space-layout :is(.sx-graph,.sx-priorities,.sx-recent) { background:var(--sx-optic-bg) !important; -webkit-backdrop-filter:var(--sx-optic-blur) !important; backdrop-filter:var(--sx-optic-blur) !important; } .sx-space-layout :is(.sx-graph,.sx-priorities,.sx-recent) :is(h2,small,.muted) { text-shadow:0 1px 6px rgba(0,0,0,.58); } .sx-space-layout .sx-graph svg text {paint-order:stroke;stroke:rgba(5,9,15,.4);stroke-width:1.3px;} .sx-space-layout .sx-recent-scroll, .sx-space-layout .sx-command-tablewrap, .sx-space-layout .panel .table-scroll, .sx-space-layout .li-panel .table-scroll { background:transparent !important; background-color:transparent !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; border-color:transparent; box-shadow:none !important; } /* Localized readability for tables, not a second frosted slab. */ .sx-space-layout :is(.sx-recent-table,.sx-command-tablewrap table) thead th { background:rgba(220,237,253,.075) !important; color:#e9f0f8; text-shadow:0 1px 5px rgba(0,0,0,.55); } .sx-space-layout :is(.sx-recent-table,.sx-command-tablewrap table) tbody tr { background:linear-gradient(90deg,rgba(2,8,15,.09),rgba(2,8,15,.06)); } .sx-space-layout :is(.sx-recent-table,.sx-command-tablewrap table) tbody td { color:#f2f5fa; text-shadow:0 1px 4px rgba(0,0,0,.58); } .sx-space-layout :is(.sx-recent-table,.sx-command-tablewrap table) tbody tr:hover td { background:rgba(255,255,255,.12) !important; } .sx-space-layout :is(.sx-metric-icon,.sx-row-icon) { border-color:rgba(255,255,255,.31); box-shadow:inset 0 1px rgba(255,255,255,.4),inset 0 0 10px rgba(255,255,255,.07),0 2px 9px rgba(0,0,0,.2); } /* Sidebar belongs to the lens family but retains enough neutral density for text. */ .sx-space-layout .sidebar { background:linear-gradient(103deg,rgba(12,18,26,.38),rgba(17,24,33,.21) 76%,rgba(252,254,255,.055)) !important; border-right:1px solid rgba(251,253,255,.25); box-shadow:inset -1px 0 rgba(255,255,255,.18),4px 0 24px rgba(0,0,0,.16); -webkit-backdrop-filter:blur(13px) saturate(115%) brightness(1.02) !important; backdrop-filter:blur(13px) saturate(115%) brightness(1.02) !important; } .sx-space-layout .sx-nav button { transition:background .25s ease,border-color .25s ease,box-shadow .25s ease,color .25s ease; } .sx-space-layout .sx-nav button.active { background:linear-gradient(158deg,rgba(255,255,255,.26),rgba(255,255,255,.12) 50%,rgba(255,255,255,.075)) !important; border:1px solid rgba(255,255,255,.42); box-shadow:inset 0 1.2px rgba(255,255,255,.52),inset 0 -1px rgba(255,255,255,.09),0 5px 16px rgba(0,0,0,.18); -webkit-backdrop-filter:blur(9px) saturate(120%) !important; backdrop-filter:blur(9px) saturate(120%) !important; transform:none; } .sx-space-layout .sx-nav button:hover {transform:none;} /* Inputs, buttons and dropdowns are small optically denser lenses. */ .sx-space-layout :is(.sx-global-search-field,.sx-identity,.sx-bell,.sx-top-avatar, .glass-filter-trigger,.li-glass-trigger,.form-glass-trigger, .btn:not(.btn-primary):not(.btn-danger),.li-button:not(.li-primary), .tag,.stage,.li-chip,.iconbtn) { background:linear-gradient(158deg,rgba(255,255,255,.18),rgba(255,255,255,.085) 45%,rgba(255,255,255,.045)) !important; border-color:rgba(255,255,255,.31); box-shadow:inset 0 1.3px rgba(255,255,255,.45),inset 0 -1px rgba(255,255,255,.09),0 4px 12px rgba(0,0,0,.15); -webkit-backdrop-filter:blur(10px) saturate(123%) !important; backdrop-filter:blur(10px) saturate(123%) !important; } .sx-space-layout :is(.sx-global-search-field,.sx-identity,.glass-filter-trigger,.li-glass-trigger,.form-glass-trigger) {border-radius:19px;} .sx-space-layout .sx-global-search-field input[type="search"] { background:transparent !important;box-shadow:none !important;border:0 !important; -webkit-backdrop-filter:none !important;backdrop-filter:none !important; } .sx-space-layout :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea,.li-input) { background:linear-gradient(161deg,rgba(255,255,255,.15),rgba(255,255,255,.058)) !important; border-color:rgba(255,255,255,.33); -webkit-backdrop-filter:blur(8px) saturate(117%) !important; backdrop-filter:blur(8px) saturate(117%) !important; } /* Same clear optics on menus and modals; enough blur for legible controls. */ .sx-space-layout :is(.glass-filter-menu,.li-glass-menu,.form-glass-menu,.sx-global-results), .li-glass-menu.li-portaled { background:linear-gradient(161deg,rgba(244,250,255,.23),rgba(221,236,253,.145) 52%,rgba(244,250,255,.10)) !important; border:1px solid rgba(255,255,255,.40); box-shadow:inset 0 1.5px rgba(255,255,255,.40),0 16px 32px rgba(0,0,0,.26); -webkit-backdrop-filter:blur(18px) saturate(132%) !important; backdrop-filter:blur(18px) saturate(132%) !important; } .sx-space-layout .modal,.modal-backdrop .modal { background:radial-gradient(ellipse 88% 40% at 10% -8%,rgba(255,255,255,.13),transparent), linear-gradient(176deg,rgba(255,255,255,.155),rgba(255,255,255,.07) 70%,rgba(255,255,255,.065)) !important; border:1px solid rgba(255,255,255,.39); box-shadow:inset 0 1.6px rgba(255,255,255,.50),inset 0 -1px rgba(255,255,255,.09),0 24px 55px rgba(0,0,0,.40); -webkit-backdrop-filter:blur(17px) saturate(127%) !important; backdrop-filter:blur(17px) saturate(127%) !important; } /* Preserve galaxy and motion exactly: no .sx-space-background rules here. */ @media(max-width:770px) { .sx-space-layout :is(.panel,.kpi,.v3-toolbar,.pipe-col,.deal-card,.ops-panel,.rel-panel,.li-panel,.sx-command-panel) { -webkit-backdrop-filter:blur(6px) saturate(117%) !important; backdrop-filter:blur(6px) saturate(117%) !important; } .sx-space-layout .sidebar { background:linear-gradient(118deg,rgba(15,21,29,.58),rgba(17,23,31,.43)) !important; -webkit-backdrop-filter:blur(9px) saturate(108%) !important; backdrop-filter:blur(9px) saturate(108%) !important; } .sx-space-layout :is(.panel,.kpi,.li-panel,.ops-panel,.rel-panel,.sx-command-panel)::before {opacity:.55;} } @media(prefers-reduced-motion:reduce){ .sx-space-layout :is(.panel,.kpi,.v3-toolbar,.pipe-col,.deal-card,.ops-panel,.rel-panel,.li-panel,.sx-command-panel) { transition:none !important; transform:none !important; } } @media(prefers-reduced-transparency:reduce){ .sx-space-layout :is(.panel,.kpi,.v3-toolbar,.table-scroll,.pipe-col,.deal-card,.ops-panel,.rel-panel,.li-panel,.sx-command-panel,.sidebar), .modal-backdrop .modal {background:rgba(19,28,39,.96)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;} } @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .sx-space-layout :is(.panel,.kpi,.v3-toolbar,.table-scroll,.pipe-col,.deal-card,.ops-panel,.rel-panel,.li-panel,.sx-command-panel,.sidebar), .modal-backdrop .modal {background:rgba(29,38,50,.88)!important;} } /* Final input specificity: the search input is transparent inside one glass pill. */ .sx-space-layout .sx-topbar .sx-global-search-field input[type="search"] { background:transparent !important; background-image:none !important; border:0 !important;box-shadow:none !important; -webkit-backdrop-filter:none !important;backdrop-filter:none !important; padding:0; } /* SVG chart labels remain legible over locally bright nebula regions. */ .sx-space-layout .sx-graph svg text { fill:rgba(230,240,249,.86) !important; paint-order:stroke;stroke:rgba(0,0,0,.36);stroke-width:1px; } /* SX AGENCY V6.1.3 — READABLE FLOATING DROPDOWNS Intentionally scoped to OPEN MENUS. Underlying cards, glass material, galaxy, layout, auth, CRM events and native form values remain unchanged. Near-opaque lens prevents lead rows and bright stars ghosting through option text. */ .sx-space-layout .modal .form-glass-menu, .sx-space-layout .glass-filter-menu, .sx-space-layout .li-glass-menu, .sx-space-layout .sx-global-results, .modal-backdrop .modal .form-glass-menu, .li-glass-menu.li-portaled { background: radial-gradient(ellipse 94% 37% at 17% -13%,rgba(255,255,255,.15),transparent 92%), linear-gradient(158deg,rgba(38,51,66,.97) 0%,rgba(19,28,41,.985) 36%,rgba(10,17,28,.985) 100%) !important; color:#f6f9fd !important; border:1px solid rgba(237,246,255,.46) !important; border-radius:16px; box-shadow: inset 0 1.4px 0 rgba(255,255,255,.33), inset 0 -1px 0 rgba(255,255,255,.065), 0 18px 42px rgba(0,0,0,.45) !important; -webkit-backdrop-filter:blur(18px) saturate(115%) !important; backdrop-filter:blur(18px) saturate(115%) !important; isolation:isolate; } /* Readable labels at rest, not only on hover. Preserve aria-selected and click handlers. */ .sx-space-layout .modal .form-glass-option, .modal-backdrop .modal .form-glass-option, .sx-space-layout .glass-filter-option, .sx-space-layout .li-glass-option, .li-glass-menu.li-portaled .li-glass-option { color:#f3f6fa !important; font-size:13px; font-weight:550; line-height:1.45; min-height:42px; letter-spacing:.005em; text-shadow:0 1px 2px rgba(0,0,0,.22); border-radius:10px; opacity:1 !important; } .sx-space-layout .modal .form-glass-option:hover, .sx-space-layout .modal .form-glass-option:focus-visible, .modal-backdrop .modal .form-glass-option:hover, .modal-backdrop .modal .form-glass-option:focus-visible, .sx-space-layout .glass-filter-option:hover, .sx-space-layout .glass-filter-option:focus-visible, .sx-space-layout .li-glass-option:hover, .sx-space-layout .li-glass-option:focus-visible, .li-glass-menu.li-portaled .li-glass-option:hover, .li-glass-menu.li-portaled .li-glass-option:focus-visible { background:rgba(255,255,255,.17) !important; color:#fff !important; } .sx-space-layout .modal .form-glass-option.is-selected, .modal-backdrop .modal .form-glass-option.is-selected, .sx-space-layout .glass-filter-option.is-selected, .sx-space-layout .li-glass-option.li-is-selected, .li-glass-menu.li-portaled .li-glass-option.li-is-selected { background:linear-gradient(95deg,rgba(255,255,255,.24),rgba(255,255,255,.115)) !important; border-color:rgba(255,255,255,.24) !important; color:#fff !important; font-weight:650; } /* Native fallback