.workbench { --workbench-capability-bg-image: url("../../personal-workbench-card-glass-capability.webp"); --workbench-panel-bg-image: url("../../personal-workbench-card-glass-panel.webp"); --workbench-capability-tile-size: 384px 384px; --workbench-panel-tile-size: 512px 512px; --workbench-glass-base: linear-gradient(135deg, rgba(255, 255, 255, 0.76) 0%, rgba(255, 255, 255, 0.62) 54%, rgba(255, 255, 255, 0.7) 100%); --workbench-glass-theme-tint: linear-gradient(135deg, rgba(var(--theme-primary-rgb, 58, 124, 165), 0.075) 0%, rgba(var(--theme-primary-rgb, 58, 124, 165), 0.022) 58%, rgba(var(--theme-primary-rgb, 58, 124, 165), 0.052) 100%); --workbench-glass-highlight: linear-gradient(120deg, rgba(255, 255, 255, 0.5) 0%, transparent 16%, transparent 82%, rgba(255, 255, 255, 0.22) 100%); --workbench-glass-noise-opacity: 0.012; --workbench-glass-blur: blur(18px) saturate(1.28); } .capability-card { position: relative; isolation: isolate; background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(12px) saturate(150%); -webkit-backdrop-filter: blur(12px) saturate(150%); border: 1px solid rgba(var(--theme-primary-rgb, 58, 124, 165), 0.28); border-left: 3px solid color-mix(in srgb, var(--capability-color) 60%, rgba(var(--theme-primary-rgb, 58, 124, 165), 0.8)); box-shadow: 0 12px 28px rgba(15, 23, 42, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.96); } .capability-card::before, .capability-card::after, .workbench-card::before, .workbench-card::after { mix-blend-mode: soft-light; opacity: var(--workbench-glass-noise-opacity); } .capability-card::after { border: 1px solid rgba(255, 255, 255, 0.38); border-left: 0; border-radius: inherit; background: var(--workbench-glass-highlight); opacity: 0.58; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58), inset 0 -1px 0 rgba(var(--theme-primary-rgb, 58, 124, 165), 0.06); transition: opacity 180ms var(--ease); } .capability-icon, .capability-copy, .capability-arrow { position: relative; z-index: 1; } .capability-icon { --workbench-list-icon-size: 40px; --workbench-list-icon-art-size: 23px; } .workbench-card { position: relative; isolation: isolate; background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(12px) saturate(150%); -webkit-backdrop-filter: blur(12px) saturate(150%); border: 1px solid rgba(var(--theme-primary-rgb, 58, 124, 165), 0.28); box-shadow: 0 12px 28px rgba(15, 23, 42, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.96); } .workbench-card::before, .workbench-card::after { display: none !important; } .workbench-card > * { position: relative; z-index: 1; } .progress-row { position: relative; border-top: 0; background: transparent; box-shadow: inset 0 1px 0 rgba(var(--theme-primary-rgb, 58, 124, 165), 0.1); } .progress-row:first-child { box-shadow: none; } .progress-row:hover { background: linear-gradient(180deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.18)), rgba(var(--theme-primary-rgb, 58, 124, 165), 0.035); box-shadow: inset 0 1px 0 rgba(var(--theme-primary-rgb, 58, 124, 165), 0.14); } .capability-card:hover, .workbench-card:hover { border-color: rgba(var(--theme-primary-rgb, 58, 124, 165), 0.4); box-shadow: 0 16px 36px rgba(15, 23, 42, 0.06), inset 0 1px 0 rgba(255, 255, 255, 1); } .capability-card:hover { transform: translateY(-1px); }