UI - МЕЖПРОЕКТНАЯ КОММУНИКАЦИЯ: доработка главной сводки и быстрых проектов

plane-src/apps/web/app/(all)/[workspaceSlug]/(projects)/project-shell-top-toolbar.tsx

@@ -23,7 +23,7 @@ import { useTranslation } from "@plane/i18n";
 import { InboxIcon, PlusIcon, ProjectIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { Tooltip } from "@plane/propel/tooltip";
-import { copyUrlToClipboard, joinUrlPath } from "@plane/utils";
+import { cn, copyUrlToClipboard, joinUrlPath } from "@plane/utils";
 import { TopNavPowerK } from "@/components/navigation";
 import { useCommandPalette } from "@/hooks/store/use-command-palette";
 import { useProject } from "@/hooks/store/use-project";
@@ -246,9 +246,15 @@ export const ProjectShellTopToolbar = observer(function ProjectShellTopToolbar()
       }).sort((a, b) => a.sort_order - b.sort_order),
     [pathname, workspacePreferences, workspaceSlug]
   );
+  const workspaceSlugValue = workspaceSlug?.toString();
+  const isWorkspaceHome = pathname === `/${workspaceSlugValue}` || pathname === `/${workspaceSlugValue}/`;
 
   return (
-    <div className="z-20 w-full flex-shrink-0 px-4 pt-4 pb-3">
+    <div
+      className={cn("z-20 w-full flex-shrink-0 px-4 pt-4 pb-3", {
+        "nodedc-home-top-toolbar": isWorkspaceHome,
+      })}
+    >
       <div className="nodedc-glass-modal flex w-full flex-wrap items-center justify-between gap-4 rounded-[1.6rem] px-4 py-3">
         <div className="flex min-w-0 items-center gap-3">
           <div className="nodedc-toolbar-group relative flex items-center gap-1 overflow-visible">

plane-src/apps/web/ce/components/home/header.tsx

@@ -14,10 +14,11 @@ type HomePageHeaderProps = {
   selectedProject?: THomeProjectData;
   selectedProjectAnalytics?: TProjectAnalyticsCount;
   recents?: TActivityEntityData[];
+  workspaceName?: string;
 };
 
 export function HomePageHeader(props: HomePageHeaderProps) {
-  const { currentUser, selectedProject, selectedProjectAnalytics, recents } = props;
+  const { currentUser, selectedProject, selectedProjectAnalytics, recents, workspaceName } = props;
   const { currentLocale } = useTranslation();
   const { currentTime } = useCurrentTime();
 
@@ -48,6 +49,7 @@ export function HomePageHeader(props: HomePageHeaderProps) {
     { label: "Открытые задачи", value: openIssues.toString(), caption: "в работе" },
     { label: "Касания 7 дней", value: recentTouchpoints.toString(), caption: "recent" },
   ];
+  const workspaceDisplayName = workspaceName?.trim() || "Workspace";
 
   return (
     <section className="nodedc-home-hero">
@@ -57,26 +59,19 @@ export function HomePageHeader(props: HomePageHeaderProps) {
       </div>
 
       <div className="nodedc-home-hero-grid">
-        <div className="nodedc-home-hero-title-cell">
-          <h1>WORKSPACE HOME</h1>
-          <p>
-            {selectedProject
-              ? `${selectedProject.identifier} в фокусе домашней сводки.`
-              : "Выберите проект для фокуса, Ганта и рабочей аналитики."}
-          </p>
-        </div>
-
         <div className="nodedc-home-market-band">
           <div className="min-w-0">
             <div className="text-12 font-semibold text-black/[0.58]">Фокус</div>
             <div className="mt-1 flex min-w-0 items-center gap-3">
               <div className="min-w-0">
-                <div className="truncate text-24 leading-none font-semibold text-black">
+                <div className="truncate text-24 leading-none font-semibold text-black nodedc-home-market-focus-title">
                   {selectedProject?.name ?? "Workspace"}
                 </div>
+                {selectedProject?.identifier && (
                   <div className="mt-1 truncate text-12 font-medium text-black/[0.54]">
-                  {selectedProject?.description || selectedProject?.identifier || "Координационный обзор"}
+                    {selectedProject.identifier}
                   </div>
+                )}
               </div>
             </div>
           </div>
@@ -86,7 +81,7 @@ export function HomePageHeader(props: HomePageHeaderProps) {
               <div key={metric.label} className="min-w-0">
                 <div className="truncate text-12 font-medium text-black/[0.58]">{metric.label}</div>
                 <div className="mt-1 text-[26px] leading-none font-semibold text-black">{metric.value}</div>
-                <div className="mt-2 h-2 overflow-hidden rounded-full bg-black/[0.18]">
+                <div className="nodedc-home-market-progress">
                   <div
                     className="h-full rounded-full bg-black"
                     style={{
@@ -102,6 +97,11 @@ export function HomePageHeader(props: HomePageHeaderProps) {
             ))}
           </div>
         </div>
+
+        <div className="nodedc-home-hero-title-cell">
+          <div className="nodedc-home-hero-title-label">Workspace</div>
+          <h1>{workspaceDisplayName}</h1>
+        </div>
       </div>
     </section>
   );

plane-src/apps/web/core/components/gantt-chart/preview/timeline-preview.tsx

@@ -5,7 +5,7 @@
  */
 
 import { useEffect, useMemo, useRef, useState } from "react";
-import { CalendarDays, Check, Filter, SlidersHorizontal } from "lucide-react";
+import { Check, Filter, SlidersHorizontal, X } from "lucide-react";
 import type { ChartDataType, IGanttBlock } from "@plane/types";
 import { cn } from "@plane/utils";
 import { getItemPositionWidth } from "@/components/gantt-chart/views/helpers";
@@ -249,11 +249,12 @@ const sortPreviewItems = (items: TGanttTimelinePreviewItem[], sortMode: TGanttPr
   });
 
 export function GanttTimelinePreview(props: TGanttTimelinePreviewProps) {
-  const { emptyMessage, isLoading = false, items, locale, subtitle, title } = props;
+  const { emptyMessage, isLoading = false, items, locale } = props;
   const [activeRange, setActiveRange] = useState<TGanttPreviewRange>("Live");
   const [activePanel, setActivePanel] = useState<"filters" | "view" | null>(null);
   const [activeDateFilters, setActiveDateFilters] = useState<TGanttPreviewDateFilter[]>([]);
   const [activeStatusFilters, setActiveStatusFilters] = useState<TGanttPreviewStatusFilter[]>([]);
+  const [selectedPreviewItemId, setSelectedPreviewItemId] = useState<string | null>(null);
   const [showFullTaskName, setShowFullTaskName] = useState(false);
   const [sortMode, setSortMode] = useState<TGanttPreviewSortMode>("target_date_asc");
   const scrollContainerRef = useRef<HTMLDivElement | null>(null);
@@ -329,6 +330,15 @@ export function GanttTimelinePreview(props: TGanttTimelinePreviewProps) {
   const hiddenItemsCount = Math.max(items.length - timeline.blocks.length, 0);
   const activeFilterCount =
     activeDateFilters.length + activeStatusFilters.length + (sortMode === "target_date_asc" ? 0 : 1);
+  const selectedPreviewItem =
+    timeline.blocks.find((item) => item.id === selectedPreviewItemId) ?? timeline.blocks.find((item) => item.id === items[0]?.id);
+  const selectedPreviewItemDate = selectedPreviewItem?.target_date
+    ? getDateFromValue(selectedPreviewItem.target_date)
+    : undefined;
+  const selectedPreviewItemStartDate = selectedPreviewItem?.start_date
+    ? getDateFromValue(selectedPreviewItem.start_date)
+    : undefined;
+  const formatPreviewDate = (date?: Date) => (date ? getShortDateLabel(date, locale) : "Нет");
 
   const toggleStatusFilter = (filterKey: TGanttPreviewStatusFilter) =>
     setActiveStatusFilters((currentFilters) =>
@@ -350,6 +360,13 @@ export function GanttTimelinePreview(props: TGanttTimelinePreviewProps) {
     setSortMode("target_date_asc");
   };
 
+  useEffect(() => {
+    if (!selectedPreviewItemId) return;
+    if (timeline.blocks.some((item) => item.id === selectedPreviewItemId)) return;
+
+    setSelectedPreviewItemId(null);
+  }, [selectedPreviewItemId, timeline.blocks]);
+
   useEffect(() => {
     const scrollElement = scrollContainerRef.current;
     if (!scrollElement || isLoading) return;
@@ -366,28 +383,24 @@ export function GanttTimelinePreview(props: TGanttTimelinePreviewProps) {
   return (
     <section className="nodedc-home-gantt-card">
       <div className="nodedc-home-gantt-toolbar">
-        <div className="flex min-w-0 items-center gap-3">
-          <div className="grid size-10 shrink-0 place-items-center rounded-full bg-black text-[rgb(var(--nodedc-card-active-rgb))]">
-            <CalendarDays className="size-4" />
-          </div>
-          <div className="min-w-0">
-            <div className="text-18 leading-none font-semibold text-primary">{title}</div>
-            {subtitle && <div className="mt-1 truncate text-12 text-secondary">{subtitle}</div>}
-          </div>
-        </div>
+        <div className="nodedc-home-gantt-toolbar-spacer" aria-hidden="true" />
 
-        <div className="flex flex-wrap items-center gap-2">
+        <div className="nodedc-home-gantt-controls">
+          <div className="nodedc-home-gantt-range-group" aria-label="Масштаб Ганта">
             {GANTT_RANGES.map((item) => (
               <button
                 key={item}
                 type="button"
                 aria-pressed={activeRange === item}
-              className={cn("nodedc-home-gantt-chip", { "nodedc-home-gantt-chip-active": activeRange === item })}
+                className={cn("nodedc-home-gantt-range-button", {
+                  "nodedc-home-gantt-range-button-active": activeRange === item,
+                })}
                 onClick={() => setActiveRange(item)}
               >
                 {item}
               </button>
             ))}
+          </div>
           <div className="nodedc-home-gantt-action-group">
             <button
               type="button"
@@ -405,6 +418,7 @@ export function GanttTimelinePreview(props: TGanttTimelinePreviewProps) {
               type="button"
               className={cn("nodedc-home-gantt-round-button", {
                 "nodedc-home-gantt-round-button-active": activeFilterCount > 0 || activePanel === "filters",
+                "nodedc-home-gantt-filter-button-has-count": activeFilterCount > 0,
               })}
               aria-expanded={activePanel === "filters"}
               aria-label="Фильтры задач Ганта"
@@ -412,6 +426,7 @@ export function GanttTimelinePreview(props: TGanttTimelinePreviewProps) {
               onClick={() => setActivePanel((currentPanel) => (currentPanel === "filters" ? null : "filters"))}
             >
               <Filter className="size-4" />
+              {activeFilterCount > 0 && <span className="nodedc-home-gantt-filter-count">{activeFilterCount}</span>}
             </button>
 
             {activePanel === "view" && (
@@ -551,6 +566,38 @@ export function GanttTimelinePreview(props: TGanttTimelinePreviewProps) {
               </div>
             </div>
 
+            {selectedPreviewItemId && selectedPreviewItem && (
+              <div className="nodedc-home-gantt-inspector">
+                <button
+                  type="button"
+                  className="nodedc-home-gantt-inspector-close"
+                  aria-label="Закрыть карточку задачи"
+                  onClick={() => setSelectedPreviewItemId(null)}
+                >
+                  <X className="size-4" />
+                </button>
+                <div className="min-w-0">
+                  <div className="text-[11px] font-semibold tracking-[0.18em] text-white/45 uppercase">
+                    {selectedPreviewItem.identifier}
+                  </div>
+                  <div className="mt-2 text-17 font-semibold leading-snug text-white">{selectedPreviewItem.name}</div>
+                  <div className="mt-4 grid grid-cols-2 gap-2 text-12">
+                    <div className="rounded-[1rem] bg-black/20 px-3 py-2">
+                      <div className="text-white/42">Начало</div>
+                      <div className="mt-1 font-semibold text-white">{formatPreviewDate(selectedPreviewItemStartDate)}</div>
+                    </div>
+                    <div className="rounded-[1rem] bg-black/20 px-3 py-2">
+                      <div className="text-white/42">Срок</div>
+                      <div className="mt-1 font-semibold text-white">{formatPreviewDate(selectedPreviewItemDate)}</div>
+                    </div>
+                  </div>
+                  <div className="mt-3 text-12 leading-5 text-white/58">
+                    Клик по строке или полосе Ганта выбирает задачу без перехода в полную карточку.
+                  </div>
+                </div>
+              </div>
+            )}
+
             <div className="relative z-[1] space-y-3 pt-12">
               {isLoading ? (
                 Array.from({ length: 4 }, (_, index) => (
@@ -560,7 +607,19 @@ export function GanttTimelinePreview(props: TGanttTimelinePreviewProps) {
                 timeline.blocks.map((item) => (
                   <div
                     key={item.id}
-                    className="nodedc-home-gantt-row"
+                    className={cn("nodedc-home-gantt-row", {
+                      "nodedc-home-gantt-row-selected": selectedPreviewItemId === item.id,
+                    })}
+                    role="button"
+                    tabIndex={0}
+                    aria-label={`Показать карточку задачи ${item.name}`}
+                    onClick={() => setSelectedPreviewItemId(item.id)}
+                    onKeyDown={(event) => {
+                      if (event.key !== "Enter" && event.key !== " ") return;
+
+                      event.preventDefault();
+                      setSelectedPreviewItemId(item.id);
+                    }}
                     style={{
                       gridTemplateColumns: `${GANTT_LABEL_COLUMN_WIDTH}px ${timeline.timelineWidth}px`,
                     }}
@@ -579,6 +638,13 @@ export function GanttTimelinePreview(props: TGanttTimelinePreviewProps) {
                     <div className="nodedc-home-gantt-track" style={{ width: `${timeline.timelineWidth}px` }}>
                       <div
                         className={cn("nodedc-home-gantt-bar", `nodedc-home-gantt-bar-${item.tone}`)}
+                        role="button"
+                        tabIndex={-1}
+                        aria-label={`Показать карточку задачи ${item.name}`}
+                        onClick={(event) => {
+                          event.stopPropagation();
+                          setSelectedPreviewItemId(item.id);
+                        }}
                         style={{
                           left: `${item.left}px`,
                           width: `${item.width}px`,

plane-src/apps/web/core/components/home/home-dashboard-widgets.tsx

@@ -15,6 +15,7 @@ import { cn } from "@plane/utils";
 // hooks
 import { useHome } from "@/hooks/store/use-home";
 import { useProject } from "@/hooks/store/use-project";
+import { useWorkspace } from "@/hooks/store/use-workspace";
 // plane web components
 import { HomePageHeader } from "@/plane-web/components/home/header";
 import { ProjectService } from "@/services/project";
@@ -23,7 +24,7 @@ import { WorkspaceService } from "@/services/workspace.service";
 import { HomeCardShell } from "./home-card-shell";
 import { HomeGanttPreview } from "./home-gantt-preview";
 import { HomeRecentIssueDecks } from "./home-recent-issue-decks";
-import { HomeActivityTrendCard, HomeOperationsOverview } from "./home-project-insights";
+import { HomeActivityTrendCard, HomeOperationsCard, HomeRhythmRecentOverview } from "./home-project-insights";
 import { HomeProjectStack } from "./home-project-stack";
 import { aggregateProjectAnalytics, type THomeProjectData } from "./home.utils";
 import { StickiesWidget } from "../stickies/widget";
@@ -81,6 +82,7 @@ export const DashboardWidgets = observer(function DashboardWidgets(props: Dashbo
   const pathname = usePathname();
   // store hooks
   const { toggleWidgetSettings, widgetsMap, showWidgetSettings, loading } = useHome();
+  const { currentWorkspace } = useWorkspace();
   const { loader, joinedProjectIds, getPartialProjectById, fetchProjectAnalyticsCount, getProjectAnalyticsCountById } =
     useProject();
   // plane hooks
@@ -190,21 +192,15 @@ export const DashboardWidgets = observer(function DashboardWidgets(props: Dashbo
   ].filter(Boolean);
 
   return (
-    <div className="relative flex h-full w-full flex-col gap-6">
-      <HomePageHeader
-        currentUser={currentUser}
-        selectedProject={selectedProject}
-        selectedProjectAnalytics={selectedProjectAnalytics}
-        recents={workspaceRecents}
-      />
+    <div className="nodedc-home-dashboard-shell relative flex h-full w-full flex-col">
       <ManageWidgetsModal
         workspaceSlug={workspaceSlugValue}
         isModalOpen={showWidgetSettings}
         handleOnClose={() => toggleWidgetSettings(false)}
       />
 
-      <div className="grid gap-5 xl:grid-cols-[minmax(320px,360px)_minmax(0,1fr)] xl:items-stretch">
-        <div className="min-w-0">
+      <div className="nodedc-home-dashboard-grid grid xl:grid-cols-[minmax(320px,360px)_minmax(0,1fr)] xl:items-stretch">
+        <div className="flex min-w-0">
           <HomeProjectStack
             className="h-full"
             projects={homeProjects}
@@ -215,13 +211,20 @@ export const DashboardWidgets = observer(function DashboardWidgets(props: Dashbo
             onSelectProject={setSelectedProjectId}
           />
         </div>
-        <div className="min-w-0 space-y-5">
+        <div className="nodedc-home-main-column min-w-0">
+          <HomePageHeader
+            currentUser={currentUser}
+            selectedProject={selectedProject}
+            selectedProjectAnalytics={selectedProjectAnalytics}
+            recents={workspaceRecents}
+            workspaceName={currentWorkspace?.name}
+          />
           <HomeGanttPreview
             project={selectedProject}
             analytics={selectedProjectAnalytics}
             workspaceSlug={workspaceSlugValue}
           />
-          <HomeOperationsOverview
+          <HomeRhythmRecentOverview
             project={selectedProject}
             analytics={selectedProjectAnalytics}
             analyticsCollection={analyticsCollection}
@@ -232,6 +235,14 @@ export const DashboardWidgets = observer(function DashboardWidgets(props: Dashbo
         </div>
       </div>
 
+      <div className="nodedc-home-lower-grid grid xl:grid-cols-[minmax(320px,360px)_minmax(0,1fr)]">
+        <HomeOperationsCard
+          project={selectedProject}
+          analytics={selectedProjectAnalytics}
+          analyticsCollection={analyticsCollection}
+          recents={workspaceRecents}
+          locale={currentLocale}
+        />
         <HomeActivityTrendCard
           project={selectedProject}
           analytics={selectedProjectAnalytics}
@@ -239,6 +250,7 @@ export const DashboardWidgets = observer(function DashboardWidgets(props: Dashbo
           recents={workspaceRecents}
           locale={currentLocale}
         />
+      </div>
 
       <HomeRecentIssueDecks project={selectedProject} workspaceSlug={workspaceSlugValue} />
 

plane-src/apps/web/core/components/home/home-project-insights.tsx

@@ -293,52 +293,18 @@ export function HomeActivityTrendCard(props: HomeProjectInsightsProps) {
   );
 }
 
-export function HomeOperationsOverview(props: HomeProjectInsightsProps) {
-  const { recentActivitySlot } = props;
+export function HomeRhythmCard(props: HomeProjectInsightsProps) {
   const {
     completedIssues,
-    completionRate,
     metricCards,
     openIssues,
-    progressRows,
     project,
     recentTouchpoints,
     totalIssues,
   } = useHomeProjectInsightData(props);
 
   return (
-    <section className="grid gap-4 xl:grid-cols-[minmax(0,0.95fr)_minmax(0,0.95fr)_minmax(300px,1.1fr)]">
-      <div className="nodedc-home-subpanel space-y-4 p-5">
-        <div className="flex items-center gap-3">
-          <div className="grid size-11 place-items-center rounded-2xl bg-[rgba(var(--nodedc-accent-rgb),0.14)] text-[rgb(var(--nodedc-accent-rgb))]">
-            <UsersRound className="size-5" />
-          </div>
-          <div>
-            <div className="text-15 font-semibold text-primary">Операционный срез</div>
-            <div className="text-12 text-secondary">Команда, циклы и модули относительно текущего workspace.</div>
-          </div>
-        </div>
-
-        <div className="space-y-4">
-          {progressRows.map((row) => {
-            const percent = row.max > 0 ? Math.max((row.value / row.max) * 100, row.value > 0 ? 10 : 0) : 0;
-
-            return (
-              <div key={row.label} className="space-y-2">
-                <div className="flex items-center justify-between gap-3 text-12">
-                  <span className="text-secondary">{row.label}</span>
-                  <span className="font-semibold text-primary">{row.value}</span>
-                </div>
-                <div className="nodedc-home-focus-track">
-                  <div className="nodedc-home-focus-fill" style={{ width: `${Math.min(percent, 100)}%` }} />
-                </div>
-              </div>
-            );
-          })}
-        </div>
-      </div>
-
-      <div className="nodedc-home-subpanel space-y-4 p-5">
+    <section className="nodedc-home-subpanel nodedc-home-rhythm-card space-y-4 p-5">
       <div className="flex items-center justify-between gap-3">
         <div>
           <div className="text-15 font-semibold text-primary">Ритм исполнения</div>
@@ -397,7 +363,55 @@ export function HomeOperationsOverview(props: HomeProjectInsightsProps) {
         <span className="font-semibold text-primary">{recentTouchpoints}</span>
         <span> недавних касаний.</span>
       </div>
+    </section>
+  );
+}
+
+export function HomeOperationsCard(props: HomeProjectInsightsProps) {
+  const {
+    progressRows,
+  } = useHomeProjectInsightData(props);
+
+  return (
+    <section className="nodedc-home-subpanel nodedc-home-operations-card space-y-4 p-5">
+      <div className="flex items-center gap-3">
+        <div className="grid size-11 place-items-center rounded-2xl bg-[rgba(var(--nodedc-accent-rgb),0.14)] text-[rgb(var(--nodedc-accent-rgb))]">
+          <UsersRound className="size-5" />
         </div>
+        <div>
+          <div className="text-15 font-semibold text-primary">Операционный срез</div>
+          <div className="text-12 text-secondary">Команда, циклы и модули относительно текущего workspace.</div>
+        </div>
+      </div>
+
+      <div className="space-y-4">
+        {progressRows.map((row) => {
+          const percent = row.max > 0 ? Math.max((row.value / row.max) * 100, row.value > 0 ? 10 : 0) : 0;
+
+          return (
+            <div key={row.label} className="space-y-2">
+              <div className="flex items-center justify-between gap-3 text-12">
+                <span className="text-secondary">{row.label}</span>
+                <span className="font-semibold text-primary">{row.value}</span>
+              </div>
+              <div className="nodedc-home-focus-track">
+                <div className="nodedc-home-focus-fill" style={{ width: `${Math.min(percent, 100)}%` }} />
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </section>
+  );
+}
+
+export function HomeRhythmRecentOverview(props: HomeProjectInsightsProps) {
+  const { recentActivitySlot } = props;
+  const { completionRate } = useHomeProjectInsightData(props);
+
+  return (
+    <section className="nodedc-home-ops-recent-grid grid gap-4 xl:grid-cols-[minmax(0,0.95fr)_minmax(320px,1.05fr)]">
+      <HomeRhythmCard {...props} />
 
       <div className="nodedc-home-subpanel p-5">
         {recentActivitySlot ? (
@@ -423,6 +437,15 @@ export function HomeOperationsOverview(props: HomeProjectInsightsProps) {
   );
 }
 
+export function HomeOperationsOverview(props: HomeProjectInsightsProps) {
+  return (
+    <div className="grid gap-4">
+      <HomeRhythmRecentOverview {...props} />
+      <HomeOperationsCard {...props} />
+    </div>
+  );
+}
+
 export function HomeProjectInsights(props: HomeProjectInsightsProps) {
   return (
     <div className="grid gap-5">

plane-src/apps/web/core/components/home/home-project-stack.tsx

@@ -6,6 +6,7 @@
 
 import { FolderOpenDot, Layers3, Search, UsersRound } from "lucide-react";
 import Link from "next/link";
+import { useRouter } from "next/navigation";
 import type { TActivityEntityData, TProjectAnalyticsCount } from "@plane/types";
 import { Logo } from "@plane/propel/emoji-icon-picker";
 import { cn } from "@plane/utils";
@@ -29,6 +30,7 @@ const ACTIVE_CARD_HEIGHT = 248;
 const STACK_OFFSET = 88;
 
 export function HomeProjectStack(props: HomeProjectStackProps) {
+  const router = useRouter();
   const {
     className,
     projects,
@@ -201,7 +203,7 @@ export function HomeProjectStack(props: HomeProjectStackProps) {
         </div>
       )}
 
-      <div className="mt-4 rounded-[24px] bg-black/10 p-4 xl:mt-auto">
+      <div className="nodedc-home-project-quick-section mt-4 rounded-[24px] bg-black/10 p-4 xl:mt-auto">
         <div className="mb-3 flex items-center justify-between gap-3">
           <div>
             <div className="text-13 font-semibold text-primary">Быстрый выбор</div>
@@ -213,45 +215,64 @@ export function HomeProjectStack(props: HomeProjectStackProps) {
           </div>
         </div>
 
-        <div className="flex flex-wrap gap-2">
+        <div className="nodedc-home-project-quick-list">
           {orderedProjects.map((project: THomeProjectData) => {
             const analytics = analyticsMap[project.id];
+            const isActive = project.id === selectedProject?.id;
+
             return (
               <button
                 key={project.id}
                 type="button"
-                className={cn("nodedc-toolbar-pill inline-flex items-center gap-2", {
-                  "!bg-[rgb(var(--nodedc-card-active-rgb))] !text-[rgb(var(--nodedc-on-card-active-rgb))]":
-                    project.id === selectedProject?.id,
-                })}
-                onClick={() => onSelectProject(project.id)}
+                className="nodedc-home-project-quick-button"
+                data-active={isActive}
+                aria-label={
+                  isActive ? `Открыть рабочую область проекта ${project.name}` : `Выбрать проект ${project.name}`
+                }
+                onClick={() => {
+                  if (isActive) {
+                    router.push(`/${workspaceSlug}/projects/${project.id}/issues`);
+                    return;
+                  }
+
+                  onSelectProject(project.id);
+                }}
               >
+                <span className="nodedc-home-project-quick-main">
+                  <span className="nodedc-home-project-quick-logo">
                     <Logo logo={project.logo_props} size={14} />
-                <span>{project.identifier}</span>
-                <span className="text-[11px] opacity-70">{getCompletionRate(analytics)}%</span>
+                  </span>
+                  <span className="truncate">{project.identifier}</span>
+                </span>
+                <span className="nodedc-home-project-quick-metric">
+                  <span className="nodedc-home-project-quick-dot" aria-hidden="true" />
+                  <span>{getCompletionRate(analytics)}%</span>
+                </span>
               </button>
             );
           })}
         </div>
 
         {selectedProject && (
-          <div className="mt-4 grid grid-cols-2 gap-3 rounded-[22px] bg-white/[0.04] p-3 md:grid-cols-3">
-            <div className="rounded-2xl bg-black/10 px-3 py-2">
+          <div className="nodedc-home-project-focus-grid mt-4 grid grid-cols-2 gap-3 md:grid-cols-3">
+            <div className="nodedc-home-project-focus-item px-3 py-2">
               <div className="text-[11px] tracking-[0.18em] text-placeholder uppercase">Фокус</div>
-              <div className="mt-1 text-13 font-semibold text-primary">{selectedProject.identifier}</div>
+              <div className="nodedc-home-project-focus-value mt-1 text-13 font-semibold text-primary">
+                {selectedProject.identifier}
               </div>
-            <div className="rounded-2xl bg-black/10 px-3 py-2">
+            </div>
+            <div className="nodedc-home-project-focus-item px-3 py-2">
               <div className="flex items-center gap-1 text-[11px] tracking-[0.18em] text-placeholder uppercase">
                 <UsersRound className="size-3.5" />
                 <span>Команда</span>
               </div>
-              <div className="mt-1 text-13 font-semibold text-primary">
+              <div className="nodedc-home-project-focus-value mt-1 text-13 font-semibold text-primary">
                 {analyticsMap[selectedProject.id]?.total_members ?? 0}
               </div>
             </div>
-            <div className="rounded-2xl bg-black/10 px-3 py-2">
+            <div className="nodedc-home-project-focus-item px-3 py-2">
               <div className="text-[11px] tracking-[0.18em] text-placeholder uppercase">Контур</div>
-              <div className="mt-1 text-13 font-semibold text-primary">
+              <div className="nodedc-home-project-focus-value mt-1 text-13 font-semibold text-primary">
                 {activityCountByProject[selectedProject.id] ?? 0} касаний
               </div>
             </div>

plane-src/apps/web/core/components/home/root.tsx

@@ -57,8 +57,8 @@ export const WorkspaceHomeView = observer(function WorkspaceHomeView() {
       )}
       <>
         <HomePeekOverviewsRoot />
-        <ContentWrapper className="mx-auto scrollbar-hide gap-6 bg-transparent px-page-x">
-          <div className="nodedc-workspace-page-shell mx-auto w-full max-w-[1480px]">
+        <ContentWrapper className="nodedc-home-route-surface mx-auto scrollbar-hide gap-6 px-page-x">
+          <div className="nodedc-workspace-page-shell nodedc-home-page-shell mx-auto w-full">
             <DashboardWidgets currentUser={currentUser} />
           </div>
         </ContentWrapper>

plane-src/apps/web/core/components/voice-tasker/global-control.tsx

@@ -389,15 +389,15 @@ export function VoiceTaskerGlobalControl({ workspaceSlug }: Props) {
           <button
             type="button"
             className={cn(
-              "shadow-lg pointer-events-auto flex size-11 items-center justify-center rounded-full border-[0.5px] transition",
+              "pointer-events-auto flex size-11 items-center justify-center border-0 bg-transparent p-0 shadow-none outline-none transition",
               isAvailable
-                ? "border-pink-500/40 bg-pink-500 hover:bg-pink-600 text-white"
-                : "cursor-not-allowed border-subtle bg-layer-2 text-tertiary"
+                ? "text-[rgb(var(--nodedc-accent-rgb))] hover:text-[rgb(var(--nodedc-card-active-rgb))]"
+                : "cursor-not-allowed text-tertiary"
             )}
             disabled={!isAvailable}
             onClick={() => setIsOpen(true)}
           >
-            <Mic className="size-5" />
+            <Mic className="size-7" />
           </button>
         </Tooltip>
       </div>

plane-src/apps/web/styles/globals.css

@@ -1790,6 +1790,60 @@
       box-shadow 160ms ease;
   }
 
+  .nodedc-home-route-surface {
+    min-height: 100vh;
+    background: #333333 !important;
+  }
+
+  main:has(.nodedc-home-route-surface) {
+    background: #333333 !important;
+  }
+
+  .nodedc-home-page-shell {
+    max-width: min(1840px, calc(100vw - 5rem));
+  }
+
+  .nodedc-home-top-toolbar > .nodedc-glass-modal {
+    max-width: min(1840px, calc(100vw - 5rem));
+    margin-inline: auto;
+    border: 0 !important;
+    background: transparent !important;
+    padding-inline: 0 !important;
+    box-shadow: none !important;
+    -webkit-backdrop-filter: none !important;
+    backdrop-filter: none !important;
+  }
+
+  .nodedc-home-top-toolbar {
+    padding-inline: 0 !important;
+  }
+
+  .nodedc-home-dashboard-shell {
+    gap: 0.75rem;
+  }
+
+  .nodedc-home-dashboard-grid {
+    align-items: stretch;
+    gap: 0.75rem;
+  }
+
+  .nodedc-home-lower-grid {
+    gap: 0.75rem;
+    align-items: stretch;
+  }
+
+  .nodedc-home-project-panel {
+    margin-top: 1.75rem;
+    height: calc(100% - 1.75rem) !important;
+    min-height: 0;
+  }
+
+  .nodedc-home-main-column {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+
   .nodedc-home-hero {
     position: relative;
     overflow: hidden;
@@ -1797,17 +1851,16 @@
     border: 0 !important;
     outline: none !important;
     border-radius: 1.9rem !important;
-    background:
-      linear-gradient(180deg, rgba(255, 255, 255, 0.028) 0%, rgba(255, 255, 255, 0.008) 100%), rgba(10, 10, 12, 0.74) !important;
-    padding: 1rem;
-    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.022) !important;
-    -webkit-backdrop-filter: blur(28px);
-    backdrop-filter: blur(28px);
+    background: transparent !important;
+    padding: 0;
+    box-shadow: none !important;
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
   }
 
   @media (min-width: 768px) {
     .nodedc-home-hero {
-      padding: 1.2rem;
+      padding: 0;
     }
   }
 
@@ -1817,42 +1870,58 @@
     justify-content: flex-end;
     gap: 0.8rem;
     min-height: 1.75rem;
-    padding: 0.15rem 0.35rem 0.85rem;
+    padding: 0.1rem 0.35rem 0.45rem;
     text-align: right;
   }
 
   .nodedc-home-hero-grid {
+    --nodedc-home-title-width: 13.25rem;
     display: grid;
     min-width: 0;
-    gap: 1rem;
+    position: relative;
+    min-height: 8.55rem;
   }
 
   @media (min-width: 1280px) {
     .nodedc-home-hero-grid {
-      grid-template-columns: minmax(320px, 360px) minmax(0, 1fr);
+      grid-template-columns: minmax(0, 1fr);
       align-items: stretch;
     }
   }
 
   .nodedc-home-hero-title-cell {
+    position: absolute;
+    inset: 0;
+    z-index: 1;
     display: flex;
-    min-height: 8rem;
+    min-height: 8.55rem;
     flex-direction: column;
-    justify-content: flex-end;
+    justify-content: center;
     border-radius: 1.7rem;
-    background: linear-gradient(180deg, rgba(255, 255, 255, 0.022), rgba(255, 255, 255, 0.006)), rgba(0, 0, 0, 0.18);
+    background: #474747 !important;
     padding: 1.25rem;
+    padding-right: max(1.25rem, calc(100% - var(--nodedc-home-title-width)));
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
   }
 
   .nodedc-home-hero-title-cell h1 {
-    max-width: 16rem;
+    max-width: 18rem;
     color: var(--text-color-primary);
-    font-size: clamp(2rem, 3vw, 3.35rem);
+    font-size: clamp(1.05rem, 1.25vw, 1.45rem);
     font-weight: 700;
-    line-height: 0.92;
+    line-height: 1.02;
     letter-spacing: 0;
   }
 
+  .nodedc-home-hero-title-label {
+    margin-bottom: 0.45rem;
+    color: var(--text-color-secondary);
+    font-size: 0.7rem;
+    font-weight: 650;
+    letter-spacing: 0.16em;
+    text-transform: uppercase;
+  }
+
   .nodedc-home-hero-title-cell p {
     margin-top: 0.75rem;
     color: var(--text-color-secondary);
@@ -1886,21 +1955,58 @@
   }
 
   .nodedc-home-market-band {
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: var(--nodedc-home-title-width);
+    z-index: 2;
     display: flex;
+    width: auto;
     min-width: 0;
-    min-height: 8rem;
+    min-height: 8.55rem;
     align-items: flex-end;
-    gap: 1.5rem;
-    border-radius: 1.7rem;
+    gap: 1rem;
+    border-radius: 1.7rem !important;
     background: rgb(var(--nodedc-card-active-rgb)) !important;
-    padding: 1.25rem;
+    padding: 1rem;
     color: rgb(var(--nodedc-on-card-active-rgb));
     box-shadow:
       inset 0 1px 0 rgba(255, 255, 255, 0.42),
       0 18px 42px rgba(0, 0, 0, 0.18) !important;
   }
 
+  .nodedc-home-market-focus-title {
+    line-height: 1.22 !important;
+  }
+
+  .nodedc-home-market-progress {
+    height: 1.05rem;
+    margin-top: 0.5rem;
+    overflow: hidden;
+    border-radius: 999px;
+    background: rgba(0, 0, 0, 0.18);
+  }
+
   @media (max-width: 767px) {
+    .nodedc-home-hero-grid {
+      display: flex;
+      min-height: auto;
+      flex-direction: column;
+      gap: 0.75rem;
+    }
+
+    .nodedc-home-hero-title-cell,
+    .nodedc-home-market-band {
+      position: relative;
+      inset: auto;
+      width: 100%;
+      min-height: 6rem;
+    }
+
+    .nodedc-home-hero-title-cell {
+      padding: 1rem;
+    }
+
     .nodedc-home-market-band {
       flex-direction: column;
       align-items: stretch;
@@ -1913,11 +2019,10 @@
     isolation: isolate;
     min-height: 30rem;
     border-radius: 2rem !important;
-    background:
-      linear-gradient(180deg, rgba(255, 255, 255, 0.026) 0%, rgba(255, 255, 255, 0.008) 100%), rgba(8, 8, 10, 0.78) !important;
-    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02) !important;
-    -webkit-backdrop-filter: blur(28px);
-    backdrop-filter: blur(28px);
+    background: #050506 !important;
+    box-shadow: none !important;
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
   }
 
   .nodedc-home-gantt-toolbar {
@@ -1926,11 +2031,67 @@
     display: flex;
     flex-wrap: wrap;
     align-items: center;
-    justify-content: space-between;
+    justify-content: flex-start;
     gap: 1rem;
     padding: 1.25rem;
   }
 
+  .nodedc-home-gantt-toolbar-spacer {
+    display: none;
+  }
+
+  .nodedc-home-gantt-controls {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 0.65rem;
+  }
+
+  .nodedc-home-gantt-range-group {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.15rem;
+    border-radius: 999px;
+    background: #171718;
+    padding: 0.2rem;
+    box-shadow:
+      inset 0 1px 0 rgba(255, 255, 255, 0.045),
+      0 14px 28px rgba(0, 0, 0, 0.24);
+  }
+
+  .nodedc-home-gantt-range-button {
+    display: inline-flex;
+    height: 2.15rem;
+    min-width: 2.15rem;
+    align-items: center;
+    justify-content: center;
+    border: 0 !important;
+    outline: none !important;
+    border-radius: 999px !important;
+    background: transparent !important;
+    padding-inline: 0.82rem;
+    color: var(--text-color-secondary);
+    font-size: 0.72rem;
+    font-weight: 800;
+    transition:
+      background 160ms ease,
+      color 160ms ease,
+      transform 160ms ease;
+  }
+
+  .nodedc-home-gantt-range-button:hover {
+    color: var(--text-color-primary);
+  }
+
+  .nodedc-home-gantt-range-button-active {
+    background: rgb(var(--nodedc-card-active-rgb)) !important;
+    color: rgb(var(--nodedc-on-card-active-rgb)) !important;
+    box-shadow:
+      inset 0 1px 0 rgba(255, 255, 255, 0.42),
+      0 10px 22px rgba(var(--nodedc-card-active-rgb), 0.18);
+  }
+
   .nodedc-home-gantt-chip {
     display: inline-flex;
     height: 2.35rem;
@@ -1961,10 +2122,34 @@
     border: 0 !important;
     outline: none !important;
     border-radius: 999px !important;
-    background: rgba(0, 0, 0, 0.42) !important;
+    background: #151516 !important;
     color: var(--text-color-primary);
   }
 
+  .nodedc-home-gantt-filter-button-has-count {
+    display: inline-flex !important;
+    width: auto;
+    min-width: 3.85rem;
+    gap: 0.45rem;
+    padding-inline: 0.72rem;
+    background: rgba(0, 0, 0, 0.56) !important;
+    color: var(--text-color-primary) !important;
+  }
+
+  .nodedc-home-gantt-filter-count {
+    display: grid;
+    width: 1.25rem;
+    min-width: 1.25rem;
+    height: 1.25rem;
+    place-items: center;
+    border-radius: 999px;
+    background: rgba(255, 255, 255, 0.96);
+    color: #08080a;
+    font-size: 0.68rem;
+    font-weight: 900;
+    line-height: 1;
+  }
+
   .nodedc-home-gantt-round-button:hover {
     background: rgba(0, 0, 0, 0.58) !important;
   }
@@ -1979,6 +2164,12 @@
     display: inline-flex;
     align-items: center;
     gap: 0.5rem;
+    border-radius: 999px;
+    background: #0f0f10;
+    padding: 0.2rem;
+    box-shadow:
+      inset 0 1px 0 rgba(255, 255, 255, 0.03),
+      0 14px 28px rgba(0, 0, 0, 0.22);
   }
 
   .nodedc-home-gantt-popover {
@@ -2092,7 +2283,7 @@
     margin: 0 1.25rem 1.25rem;
     overflow: hidden;
     border-radius: 1.75rem;
-    background: rgba(0, 0, 0, 0.28);
+    background: #050506;
   }
 
   .nodedc-home-gantt-scroll {
@@ -2121,7 +2312,9 @@
     position: relative;
     min-height: 23.5rem;
     padding: 1rem;
-    background: linear-gradient(180deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 100% 4.2rem;
+    background:
+      linear-gradient(180deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 100% 4.2rem,
+      #050506;
   }
 
   .nodedc-home-gantt-floating {
@@ -2141,6 +2334,48 @@
     backdrop-filter: blur(24px);
   }
 
+  .nodedc-home-gantt-inspector {
+    position: absolute;
+    top: 5.35rem;
+    left: calc(12rem + 2.25rem);
+    z-index: 6;
+    width: min(31rem, calc(100% - 16rem));
+    min-height: 11.5rem;
+    border: 1px solid rgba(255, 255, 255, 0.065);
+    border-radius: 1.65rem;
+    background:
+      linear-gradient(135deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.025) 44%, rgba(255, 255, 255, 0.08)),
+      rgba(34, 34, 38, 0.58);
+    padding: 1rem 1.05rem 1.05rem 3.85rem;
+    box-shadow:
+      0 22px 60px rgba(0, 0, 0, 0.42),
+      inset 0 1px 0 rgba(255, 255, 255, 0.16);
+    -webkit-backdrop-filter: blur(28px) saturate(1.22);
+    backdrop-filter: blur(28px) saturate(1.22);
+  }
+
+  .nodedc-home-gantt-inspector-close {
+    position: absolute;
+    top: 0.72rem;
+    left: 0.72rem;
+    display: grid;
+    width: 2.35rem;
+    min-width: 2.35rem;
+    height: 2.35rem;
+    place-items: center;
+    border: 0 !important;
+    outline: none !important;
+    border-radius: 1.05rem !important;
+    background: rgba(0, 0, 0, 0.44) !important;
+    color: rgba(255, 255, 255, 0.82);
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
+  }
+
+  .nodedc-home-gantt-inspector-close:hover {
+    background: rgba(0, 0, 0, 0.62) !important;
+    color: rgb(var(--nodedc-card-active-rgb));
+  }
+
   .nodedc-home-gantt-grid {
     position: absolute;
     top: 1rem;
@@ -2239,6 +2474,20 @@
     align-items: center;
     gap: 1rem;
     min-height: 3.45rem;
+    cursor: pointer;
+    border-radius: 1.05rem;
+    transition:
+      background 140ms ease,
+      color 140ms ease;
+  }
+
+  .nodedc-home-gantt-row:hover,
+  .nodedc-home-gantt-row-selected {
+    background: rgba(255, 255, 255, 0.035);
+  }
+
+  .nodedc-home-gantt-row-selected .nodedc-home-gantt-row-label {
+    color: rgb(var(--nodedc-card-active-rgb));
   }
 
   .nodedc-home-gantt-row-compact {
@@ -2257,7 +2506,7 @@
     left: 0;
     z-index: 2;
     border-radius: 1rem;
-    background: linear-gradient(90deg, rgba(7, 7, 9, 0.94) 0%, rgba(7, 7, 9, 0.72) 76%, transparent 100%);
+    background: linear-gradient(90deg, #050506 0%, rgba(5, 5, 6, 0.78) 76%, transparent 100%);
     padding: 0.45rem 0.75rem 0.45rem 0;
   }
 
@@ -2275,6 +2524,7 @@
     height: 1.4rem;
     min-width: 2.5rem;
     border-radius: 999px;
+    cursor: pointer;
   }
 
   .nodedc-home-gantt-bar-accent {
@@ -2757,6 +3007,131 @@
     opacity: 0.8;
   }
 
+  .nodedc-home-project-quick-list {
+    display: flex;
+    width: calc(100% + 2rem);
+    margin-inline: -1rem;
+    flex-direction: column;
+    gap: 0;
+    overflow: hidden;
+    border-radius: 1.25rem;
+    background: rgba(8, 8, 10, 0.62);
+  }
+
+  .nodedc-home-project-quick-button {
+    display: flex;
+    width: 100%;
+    min-height: 3.22rem;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.8rem;
+    border: 0 !important;
+    outline: none !important;
+    border-radius: 0 !important;
+    background: rgba(255, 255, 255, 0.028) !important;
+    padding: 0.7rem 0.9rem;
+    color: var(--text-color-primary);
+    font-size: 0.95rem;
+    font-weight: 520;
+    text-align: left;
+    transition:
+      background 160ms ease,
+      color 160ms ease,
+      transform 160ms ease,
+      box-shadow 160ms ease;
+  }
+
+  .nodedc-home-project-quick-button + .nodedc-home-project-quick-button {
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
+  }
+
+  .nodedc-home-project-quick-button:first-child {
+    border-top-left-radius: 1.25rem !important;
+    border-top-right-radius: 1.25rem !important;
+  }
+
+  .nodedc-home-project-quick-button:last-child {
+    border-bottom-right-radius: 1.25rem !important;
+    border-bottom-left-radius: 1.25rem !important;
+  }
+
+  .nodedc-home-project-quick-button:hover {
+    background: rgba(255, 255, 255, 0.08) !important;
+    color: var(--text-color-primary);
+    transform: translateY(-1px);
+  }
+
+  .nodedc-home-project-quick-button[data-active="true"] {
+    background: rgba(255, 255, 255, 0.13) !important;
+    color: var(--text-color-primary);
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09);
+  }
+
+  .nodedc-home-project-quick-main {
+    display: flex;
+    min-width: 0;
+    align-items: center;
+    gap: 0.62rem;
+  }
+
+  .nodedc-home-project-quick-logo {
+    display: grid;
+    width: 1.7rem;
+    min-width: 1.7rem;
+    height: 1.7rem;
+    place-items: center;
+    border-radius: 999px;
+    background: rgba(255, 255, 255, 0.08);
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
+  }
+
+  .nodedc-home-project-quick-button[data-active="true"] .nodedc-home-project-quick-logo {
+    background: rgba(var(--nodedc-card-active-rgb), 0.92);
+    color: #0a0a0b;
+  }
+
+  .nodedc-home-project-quick-metric {
+    display: inline-flex;
+    min-width: max-content;
+    align-items: center;
+    gap: 0.38rem;
+    font-size: 0.72rem;
+    font-weight: 650;
+    opacity: 0.78;
+  }
+
+  .nodedc-home-project-quick-dot {
+    display: block;
+    width: 0.48rem;
+    height: 0.48rem;
+    border-radius: 999px;
+    background: rgba(255, 255, 255, 0.58);
+  }
+
+  .nodedc-home-project-quick-button[data-active="true"] .nodedc-home-project-quick-dot {
+    background: rgb(var(--nodedc-card-active-rgb));
+  }
+
+  .nodedc-home-project-focus-grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    background: transparent !important;
+    padding: 0 !important;
+  }
+
+  .nodedc-home-project-focus-item {
+    min-width: 0;
+    overflow: hidden;
+    border-radius: 0 !important;
+    background: transparent !important;
+    padding-inline: 0.75rem !important;
+  }
+
+  .nodedc-home-project-focus-value {
+    min-width: 0;
+    line-height: 1.2;
+    overflow-wrap: anywhere;
+  }
+
   .nodedc-home-user-card {
     position: relative;
     overflow: hidden;
@@ -3020,6 +3395,14 @@
     box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.01) !important;
   }
 
+  .nodedc-home-operations-card {
+    background:
+      linear-gradient(180deg, rgba(255, 255, 255, 0.022) 0%, rgba(255, 255, 255, 0.006) 100%),
+      rgba(10, 10, 12, 0.68) !important;
+    -webkit-backdrop-filter: blur(28px);
+    backdrop-filter: blur(28px);
+  }
+
   .nodedc-home-soft-badge {
     background: rgba(0, 0, 0, 0.34) !important;
     box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.01) !important;