/* ============================================================ MULTI-LOOK TOKEN SYSTEM -- Editorial Luxury / Spatial OS / Chromatic Switch by setting data-look="editorial|spatial|chromatic" on . Everything below is scoped under [data-look="..."] and consumed via --lk-* custom properties. No JS reload required to switch. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;1,9..144,500&family=Space+Grotesk:wght@400;500;700&family=Unbounded:wght@400;600;800&family=Inter:wght@400;500;600;700&family=Spline+Sans+Mono:wght@400;500&family=JetBrains+Mono:wght@400;500;600&display=swap'); /* ---------- LOOK 1: EDITORIAL LUXURY ---------- */ [data-look="editorial"]{ --lk-font-display:'Fraunces',serif; --lk-font-body:'Inter',sans-serif; --lk-font-mono:'Spline Sans Mono',monospace; --lk-canvas:#F6F3EC; --lk-surface:#FCFAF5; --lk-surface-2:#FFFFFF; --lk-text-1:#16150F; --lk-text-2:#5B584C; --lk-text-3:#8E8A7A; --lk-line:#E3DDCC; --lk-line-2:#CFC8B2; --lk-accent:#A8842C; --lk-accent-soft:#F3ECDA; --lk-green:#1E5741; --lk-green-soft:#E7EFE7; --lk-red:#9E3B2E; --lk-red-soft:#F4E6E1; --lk-amber:#A8842C; --lk-amber-soft:#F3ECDA; --lk-radius:4px; --lk-radius-sm:2px; --lk-radius-lg:6px; --lk-border-w:1px; --lk-shadow:none; --lk-nav-mode:top; } /* ---------- LOOK 2: SPATIAL OS (default) ---------- */ [data-look="spatial"]{ --lk-font-display:'Space Grotesk',sans-serif; --lk-font-body:'Inter',sans-serif; --lk-font-mono:'JetBrains Mono',monospace; --lk-canvas:#E8EAF2; --lk-surface:rgba(255,255,255,.62); --lk-surface-2:rgba(255,255,255,.85); --lk-text-1:#1B1D29; --lk-text-2:#5D6274; --lk-text-3:#9BA0B4; --lk-line:rgba(255,255,255,.85); --lk-line-2:rgba(27,29,41,.08); --lk-accent:#6E56CF; --lk-accent-soft:rgba(110,86,207,.12); --lk-green:#0EA36B; --lk-green-soft:rgba(14,163,107,.12); --lk-red:#E5484D; --lk-red-soft:rgba(229,72,77,.12); --lk-amber:#D9930D; --lk-amber-soft:rgba(217,147,13,.14); --lk-radius:24px; --lk-radius-sm:14px; --lk-radius-lg:26px; --lk-border-w:1px; --lk-shadow:0 18px 44px rgba(27,29,41,.10); --lk-nav-mode:dock; } /* ---------- LOOK 4: CHROMATIC ---------- */ [data-look="chromatic"]{ --lk-font-display:'Unbounded',sans-serif; --lk-font-body:'Inter',sans-serif; --lk-font-mono:'JetBrains Mono',monospace; --lk-canvas:#030304; --lk-surface:rgba(255,255,255,.03); --lk-surface-2:rgba(255,255,255,.05); --lk-text-1:#F2F3F7; --lk-text-2:#8D93A8; --lk-text-3:#4E5468; --lk-line:rgba(255,255,255,.08); --lk-line-2:rgba(255,255,255,.14); --lk-accent:#7C4DFF; --lk-accent-soft:rgba(124,77,255,.14); --lk-green:#00FFA3; --lk-green-soft:rgba(0,255,163,.12); --lk-red:#FF4D6D; --lk-red-soft:rgba(255,77,109,.12); --lk-amber:#FFD166; --lk-amber-soft:rgba(255,209,102,.12); --lk-radius:24px; --lk-radius-sm:14px; --lk-radius-lg:26px; --lk-border-w:1px; --lk-shadow:0 0 0 1px rgba(255,255,255,.06); --lk-holo:conic-gradient(from 210deg,#FF71CE,#7C4DFF,#00E5FF,#00FFA3,#FFD166,#FF71CE); --lk-nav-mode:pill; } /* ---------- global legacy-token remap ---------- The original dark-theme design system (style.css) hardcodes colors into CSS custom properties like --tile/--border/--border-strong/--text/--muted that most components (.kn-tab, .kn-row, .stat-tile, buttons, etc.) still consume directly. Only a handful of selectors got bespoke [data-look] !important overrides so far, which is why whole regions of the UI (e.g. the broker segmented control's own container background, and its sibling number-input borders) stayed on the old near-white-on-dark values and went invisible against the light Editorial/Spatial canvases: --tile and --border-strong renders as rgba(255,255,255,.045-.15), which is indistinguishable from a white/near-white surface. Remapping the legacy tokens themselves to the active look's own palette fixes this class of bug everywhere at once instead of patching one component at a time. --lk-line-2 is deliberately used for --tile/ --border/--border-strong (not --lk-line) because for the light looks --lk-line is itself near-white (meant as a hairline against a *darker* canvas), whereas --lk-line-2 is a tinted, genuinely visible value in all three looks. */ [data-look]{ --bg-elev:var(--lk-surface); --bg-elev-solid:var(--lk-surface-2); --card:var(--lk-surface); --card-solid:var(--lk-surface-2); --tile:var(--lk-line-2); --border:var(--lk-line-2); --border-strong:var(--lk-line-2); --text:var(--lk-text-1); --muted:var(--lk-text-2); --muted-2:var(--lk-text-3); --accent:var(--lk-accent); --accent-2:var(--lk-accent); --green:var(--lk-green); --red:var(--lk-red); --amber:var(--lk-amber); } /* ---------- base application: shell + typography ---------- */ [data-look] body{background:var(--lk-canvas);color:var(--lk-text-1);font-family:var(--lk-font-body);transition:background .3s ease,color .3s ease} [data-look] .sidebar-brand span:last-child, [data-look] .brand-txt, [data-look] .page-header-title, [data-look] .section-title, [data-look] h1,[data-look] h2{font-family:var(--lk-font-display)} [data-look] .mono,[data-look] .pnl-card-value,[data-look] .ut-pnl-val,[data-look] .kpi-value{font-family:var(--lk-font-mono);font-variant-numeric:tabular-nums} [data-look="chromatic"] .page-header-title{background:linear-gradient(90deg,#FF71CE,#7C4DFF,#00E5FF);-webkit-background-clip:text;background-clip:text;color:transparent} /* ---------- Spatial OS: animated mesh background ---------- */ [data-look="spatial"] body{position:relative;overflow-x:hidden} [data-look="spatial"] body::before{ content:'';position:fixed;inset:-10%;z-index:-2;pointer-events:none; background: radial-gradient(38% 32% at 18% 22%, rgba(110,86,207,.28), transparent 70%), radial-gradient(34% 30% at 82% 18%, rgba(229,72,146,.22), transparent 70%), radial-gradient(40% 34% at 55% 82%, rgba(14,163,107,.20), transparent 70%); filter:blur(60px); animation:lkMeshDrift 30s ease-in-out infinite alternate; } @keyframes lkMeshDrift{0%{transform:translate(0,0) scale(1)}100%{transform:translate(3%,-4%) scale(1.08)}} /* ---------- Chromatic: nebula + starfield ---------- */ [data-look="chromatic"] body{position:relative;overflow-x:hidden} [data-look="chromatic"] body::before{ content:'';position:fixed;inset:-10%;z-index:-2;pointer-events:none; background: radial-gradient(30% 26% at 20% 25%, rgba(124,77,255,.20), transparent 70%), radial-gradient(28% 24% at 80% 20%, rgba(0,229,255,.16), transparent 70%), radial-gradient(32% 28% at 50% 85%, rgba(0,255,163,.12), transparent 70%); filter:blur(70px); animation:lkMeshDrift 34s ease-in-out infinite alternate; } [data-look="chromatic"] body::after{ content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5; background-image:radial-gradient(rgba(255,255,255,.35) 1px, transparent 1px); background-size:44px 44px; } /* ---------- Editorial: hairline ledger feel ---------- */ [data-look="editorial"] .card,[data-look="editorial"] .panel,[data-look="editorial"] .pnl-card, [data-look="editorial"] .user-tile,[data-look="editorial"] .s-card,[data-look="editorial"] .stat-tile{ border-radius:var(--lk-radius) !important;box-shadow:none !important; } [data-look="editorial"] .kpi-card,[data-look="editorial"] .stat-tile{border-bottom:1px solid var(--lk-line) !important} [data-look="editorial"] .kpi-label,[data-look="editorial"] .pnl-card-label,[data-look="editorial"] .nav-section-label{ text-transform:uppercase;letter-spacing:.2em;font-size:10px;font-weight:600; } /* ---------- primitive re-skin: cards / tiles / badges (works across pages already using these classes) ---------- */ [data-look] .card,[data-look] .panel,[data-look] .pnl-card,[data-look] .user-tile, [data-look] .s-card,[data-look] .detail-panel,[data-look] .tile-skeleton{ background:var(--lk-surface) !important; border:var(--lk-border-w) solid var(--lk-line) !important; border-radius:var(--lk-radius) !important; color:var(--lk-text-1); box-shadow:var(--lk-shadow); backdrop-filter:var(--lk-blur,none); } [data-look="spatial"] .card,[data-look="spatial"] .panel,[data-look="spatial"] .pnl-card, [data-look="spatial"] .user-tile,[data-look="spatial"] .s-card,[data-look="spatial"] .detail-panel{ backdrop-filter:blur(24px) saturate(150%);-webkit-backdrop-filter:blur(24px) saturate(150%); } [data-look="chromatic"] .card,[data-look="chromatic"] .panel,[data-look="chromatic"] .pnl-card, [data-look="chromatic"] .user-tile,[data-look="chromatic"] .s-card,[data-look="chromatic"] .detail-panel{ backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px); } [data-look] .stat-tile,[data-look] .pnl-card-value,[data-look] .kpi-value{color:var(--lk-text-1)} [data-look] .muted,[data-look] .pnl-card-sub,[data-look] .ut-joined,[data-look] .kpi-card-sub, [data-look] .page-header-sub,[data-look] .detail-panel-meta{color:var(--lk-text-2) !important} [data-look] .muted-2,[data-look] .ut-pnl-label,[data-look] .pnl-card-label{color:var(--lk-text-3) !important} [data-look] .profit,[data-look] .ut-pnl-val.profit,[data-look] .pnl-card-value.profit{color:var(--lk-green) !important} [data-look] .loss,[data-look] .ut-pnl-val.loss,[data-look] .pnl-card-value.loss{color:var(--lk-red) !important} [data-look] .ut-strat-chip.on{background:var(--lk-green-soft) !important;color:var(--lk-green) !important} [data-look] .ut-strat-chip.off{background:var(--lk-line-2) !important;color:var(--lk-text-3) !important} [data-look] .tf-chip.green,[data-look] .status-tag.active,[data-look] .badge.running{background:var(--lk-green-soft) !important;color:var(--lk-green) !important} [data-look] .tf-chip.red{background:var(--lk-red-soft) !important;color:var(--lk-red) !important} /* buttons */ [data-look] .date-apply-btn,[data-look] .start,[data-look] button.primary,[data-look] .btn-primary{ background:var(--lk-accent) !important;color:#fff !important;border:none !important;border-radius:var(--lk-radius-sm) !important; } [data-look="chromatic"] .date-apply-btn,[data-look="chromatic"] .start,[data-look="chromatic"] .btn-primary{ background:linear-gradient(90deg,#00E5FF,#00FFA3) !important;color:#031014 !important; box-shadow:0 0 18px rgba(0,229,255,.35); } [data-look] .date-filter-chip.active,[data-look] .filter-chip.active{ background:var(--lk-accent-soft) !important;color:var(--lk-accent) !important;border-color:var(--lk-accent) !important; } /* ---------- footer ---------- */ [data-look] .site-footer{border-color:var(--lk-line) !important;color:var(--lk-text-3) !important} [data-look] .site-footer-brand{color:var(--lk-text-2) !important} /* ============================================================ NAV SHELLS -- three structural variants, all present in DOM, shown/hidden purely via [data-look] so switching is instant. ============================================================ */ .lk-shell-editorial,.lk-shell-spatial-dock,.lk-shell-spatial-cmdbar,.lk-shell-chromatic{display:none} /* --- Editorial: top horizontal bar, gold underline on active --- */ [data-look="editorial"] .sidebar{display:none !important} [data-look="editorial"] .lk-shell-editorial{ display:flex;align-items:center;justify-content:space-between;gap:20px; padding:18px 28px;background:var(--lk-surface-2);border-bottom:1px solid var(--lk-line); position:sticky;top:0;z-index:60; } [data-look="editorial"] .lk-ed-brand{font-family:var(--lk-font-display);font-size:19px;font-weight:600;letter-spacing:-.01em;color:var(--lk-text-1)} [data-look="editorial"] .lk-ed-nav{display:flex;gap:22px;min-width:0;flex-wrap:nowrap} [data-look="editorial"] .lk-ed-nav a{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--lk-text-2);text-decoration:none;padding-bottom:6px;border-bottom:2px solid transparent;white-space:nowrap;flex-shrink:0} [data-look="editorial"] .lk-ed-nav a.active{color:var(--lk-text-1);border-color:var(--lk-accent)} [data-look="editorial"] .nav-more-btn-editorial{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--lk-text-2);padding-bottom:6px;border-bottom:2px solid transparent} [data-look="editorial"] .nav-more-wrap-editorial.has-active .nav-more-btn-editorial{color:var(--lk-text-1);border-color:var(--lk-accent)} [data-look="editorial"] .nav-more-btn-editorial svg{stroke:currentColor} [data-look="editorial"] .nav-more-panel-editorial{top:100%;right:0;margin-top:10px;background:var(--lk-surface-2);border-color:var(--lk-line)} [data-look="editorial"] .nav-more-panel-editorial .nav-more-panel-item{color:var(--lk-text-1);text-transform:none;letter-spacing:normal;font-size:13px;font-weight:500} [data-look="editorial"] .nav-more-panel-editorial .nav-more-panel-item:hover{background:var(--lk-line-2)} [data-look="editorial"] .nav-more-panel-editorial .nav-more-panel-item.active{color:var(--lk-accent);font-weight:700} [data-look="editorial"] .bottom-nav{display:none !important} [data-look="editorial"] .main .content{max-width:1080px;margin:0 auto;padding:32px 28px 60px} @media (max-width:760px){ [data-look="editorial"] .lk-ed-nav{display:none} [data-look="editorial"] .lk-ed-hamburger{display:grid !important} } /* --- Spatial: top command bar + floating bottom dock --- */ [data-look="spatial"] .sidebar{display:none !important} [data-look="spatial"] .lk-shell-spatial-cmdbar{ display:flex;align-items:center;justify-content:space-between;gap:14px; padding:14px 22px;margin:14px 14px 0;border-radius:var(--lk-radius-lg); background:var(--lk-surface-2);border:1px solid var(--lk-line); backdrop-filter:blur(24px) saturate(150%);-webkit-backdrop-filter:blur(24px) saturate(150%); position:sticky;top:14px;z-index:60;box-shadow:var(--lk-shadow); } [data-look="spatial"] .lk-sp-brand{font-family:var(--lk-font-display);font-weight:700;font-size:16px;color:var(--lk-text-1)} [data-look="spatial"] .lk-sp-search{flex:1;max-width:340px;font-size:12.5px;color:var(--lk-text-3); background:rgba(255,255,255,.5);border:1px solid var(--lk-line);border-radius:12px;padding:8px 14px} [data-look="spatial"] .main .content{max-width:1160px;margin:0 auto;padding:20px 20px 110px} [data-look="spatial"] .bottom-nav{display:none !important} [data-look="spatial"] .lk-shell-spatial-dock{ display:flex;gap:4px;position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:70; background:rgba(255,255,255,.7);border:1px solid var(--lk-line);border-radius:22px;padding:8px; backdrop-filter:blur(24px) saturate(150%);-webkit-backdrop-filter:blur(24px) saturate(150%); box-shadow:var(--lk-shadow); max-width:96vw;flex-wrap:nowrap; } [data-look="spatial"] .lk-sp-dock-item{ display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 12px;border-radius:16px; color:var(--lk-text-2);text-decoration:none;font-size:9.5px;font-weight:600;transition:transform .15s,background .15s; flex-shrink:0;white-space:nowrap; } [data-look="spatial"] .lk-sp-dock-item:hover{transform:translateY(-3px) scale(1.06)} [data-look="spatial"] .lk-sp-dock-item.active{background:var(--lk-text-1);color:#fff} [data-look="spatial"] .lk-sp-dock-item svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8} [data-look="spatial"] .nav-more-btn-spatial{flex-direction:column;align-items:center;gap:2px;padding:8px 12px;border-radius:16px;color:var(--lk-text-2);font-size:9.5px;font-weight:600} [data-look="spatial"] .nav-more-wrap-spatial.has-active .nav-more-btn-spatial{background:var(--lk-text-1);color:#fff} [data-look="spatial"] .nav-more-btn-spatial svg{stroke:currentColor;width:19px;height:19px} [data-look="spatial"] .nav-more-panel-spatial{bottom:100%;right:0;margin-bottom:12px;background:var(--lk-surface-2);border-color:var(--lk-line)} [data-look="spatial"] .nav-more-panel-spatial .nav-more-panel-item{color:var(--lk-text-1);display:flex;align-items:center;gap:9px;font-weight:600} [data-look="spatial"] .nav-more-panel-spatial .nav-more-panel-item svg{width:16px;height:16px;stroke:currentColor;fill:none;flex-shrink:0} [data-look="spatial"] .nav-more-panel-spatial .nav-more-panel-item:hover{background:var(--lk-line-2)} [data-look="spatial"] .nav-more-panel-spatial .nav-more-panel-item.active{color:var(--lk-accent)} /* --- Chromatic: floating pill nav, top --- */ [data-look="chromatic"] .sidebar{display:none !important} [data-look="chromatic"] .lk-shell-chromatic{ display:flex;align-items:center;gap:4px;position:sticky;top:14px;z-index:60; max-width:96vw;margin:14px auto 0;padding:6px;border-radius:999px; background:rgba(255,255,255,.04);border:1px solid var(--lk-line);backdrop-filter:blur(18px); flex-wrap:nowrap; } [data-look="chromatic"] .lk-ch-item{padding:9px 16px;border-radius:999px;font-size:12.5px;font-weight:500;color:var(--lk-text-2);text-decoration:none;white-space:nowrap;flex-shrink:0} [data-look="chromatic"] .lk-ch-item.active{background:linear-gradient(90deg,#00E5FF,#00FFA3);color:#031014;font-weight:600} [data-look="chromatic"] .nav-more-btn-chromatic{padding:9px 16px;border-radius:999px;font-size:12.5px;font-weight:500;color:var(--lk-text-2)} [data-look="chromatic"] .nav-more-wrap-chromatic.has-active .nav-more-btn-chromatic{background:linear-gradient(90deg,#00E5FF,#00FFA3);color:#031014;font-weight:600} [data-look="chromatic"] .nav-more-btn-chromatic svg{stroke:currentColor} [data-look="chromatic"] .nav-more-panel-chromatic{top:100%;right:0;margin-top:10px;background:var(--lk-surface-2);border-color:var(--lk-line)} [data-look="chromatic"] .nav-more-panel-chromatic .nav-more-panel-item{color:var(--lk-text-1);font-size:13px;font-weight:500} [data-look="chromatic"] .nav-more-panel-chromatic .nav-more-panel-item:hover{background:var(--lk-line-2)} [data-look="chromatic"] .nav-more-panel-chromatic .nav-more-panel-item.active{color:var(--lk-accent);font-weight:700} [data-look="chromatic"] .bottom-nav{display:none !important} [data-look="chromatic"] .main .content{max-width:1160px;margin:0 auto;padding:24px 20px 60px} /* BUG FIX: the 3 rules above hide #navDrawer (.sidebar) UNCONDITIONALLY for editorial/spatial/chromatic, because those looks render their own nav shells on desktop instead of the sidebar. But the mobile fallback nav for all 3 looks (topbar hamburger, and the bottom-nav "More" button on editorial/chromatic) both open that exact #navDrawer as a slide-in panel -- with it force-hidden, clicking either button only ever showed the dark overlay with nothing on top of it (looked like the tap did nothing). Re-enable the drawer below the same 900px breakpoint the desktop nav shells already use, so it behaves exactly like it does on the default look. */ @media (max-width:899px){ [data-look="editorial"] .sidebar, [data-look="spatial"] .sidebar, [data-look="chromatic"] .sidebar{display:flex !important} } /* mobile fallbacks: editorial hamburger + chromatic bottom sheet trigger reuse existing hamburger-btn/topbar */ [data-look="editorial"] .topbar,[data-look="chromatic"] .topbar{display:none} @media (max-width:899px){ [data-look="editorial"] .lk-shell-editorial,[data-look="chromatic"] .lk-shell-chromatic{display:none} [data-look="editorial"] .topbar,[data-look="chromatic"] .topbar{display:flex !important} [data-look="editorial"] .bottom-nav,[data-look="chromatic"] .bottom-nav{display:flex !important} [data-look="spatial"] .lk-shell-spatial-dock{bottom:14px;padding:6px} [data-look="spatial"] .lk-sp-dock-item{padding:7px 10px} } [data-look="editorial"] .topbar .hamburger-btn svg,[data-look="chromatic"] .topbar .hamburger-btn svg{stroke:var(--lk-text-1)} [data-look] .topbar,[data-look] .bottom-nav{background:var(--lk-surface-2);border-color:var(--lk-line)} [data-look] .bottom-nav a,[data-look] .bottom-nav-more{color:var(--lk-text-3)} [data-look] .bottom-nav a.active,[data-look] .bottom-nav-more.active{color:var(--lk-accent)} [data-look] .bottom-nav a svg,[data-look] .bottom-nav-more svg{stroke:currentColor} [data-look] .nav-more-panel{background:var(--lk-surface-2) !important;border-color:var(--lk-line) !important;box-shadow:var(--lk-shadow,0 20px 50px rgba(0,0,0,.25)) !important} @media (prefers-reduced-motion: reduce){ [data-look="spatial"] body::before,[data-look="chromatic"] body::before{animation:none} } /* profile-menu repositioned near the top-right avatar for the 3 new shells (it's anchored bottom-left by default for the legacy sidebar layout, which is hidden in these looks) */ [data-look] #profileMenu{left:auto !important;right:14px !important;bottom:auto !important;top:66px !important; transform:translateY(-6px) scale(.97);} [data-look] #profileMenu.open{transform:translateY(0) scale(1)} @media (max-width:899px){ [data-look="editorial"] #profileMenu,[data-look="chromatic"] #profileMenu{top:auto !important;bottom:calc(84px + var(--safe-b)) !important;left:14px !important;right:14px !important} } .look-swatch{cursor:pointer;border:1.5px solid var(--border);border-radius:14px;padding:10px;transition:.15s} .look-swatch:hover{border-color:var(--border-strong)} .look-swatch.picked{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)} .look-swatch-preview{border-radius:10px;overflow:hidden;padding-bottom:10px;margin-bottom:10px} .look-swatch-name{font-size:13px;font-weight:700;color:var(--text)} .look-swatch-desc{font-size:11px;color:var(--muted);margin-top:2px} /* profile-menu adapts to the active look too (was hardcoded dark) */ [data-look] #profileMenu{background:var(--lk-surface-2) !important;border:1px solid var(--lk-line) !important; box-shadow:var(--lk-shadow,0 20px 50px rgba(0,0,0,.25)) !important;backdrop-filter:blur(20px)} [data-look] #profileMenu a{color:var(--lk-text-1) !important} [data-look] #profileMenu a:hover{background:var(--lk-line-2) !important} [data-look] .pm-look-label{color:var(--lk-text-2) !important} /* per-look hover treatment for strategy cards / panels -- the "primitive density" difference */ [data-look="spatial"] .s-card,[data-look="spatial"] .card{transition:transform .2s cubic-bezier(.2,0,0,1),box-shadow .2s} [data-look="spatial"] .s-card:hover,[data-look="spatial"] .card:hover{transform:translateY(-3px);box-shadow:0 22px 50px rgba(27,29,41,.14)} [data-look="chromatic"] .s-card,[data-look="chromatic"] .card{position:relative;transition:border-color .25s} [data-look="chromatic"] .s-card::before,[data-look="chromatic"] .card::before{ content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1px; background:var(--lk-holo);opacity:0;transition:opacity .25s;pointer-events:none; -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask-composite:exclude; } [data-look="chromatic"] .s-card:hover::before,[data-look="chromatic"] .card:hover::before{opacity:.7} [data-look="editorial"] .s-card,[data-look="editorial"] .card{transition:border-color .3s ease-out} [data-look="editorial"] .s-card:hover,[data-look="editorial"] .card:hover{border-color:var(--lk-accent) !important} /* ---------- universal button contrast safety net ---------- Any