From 4bb6df6f2110d52cacff575742d62303482d25db Mon Sep 17 00:00:00 2001
From: Local Build <build@local.dev>
Date: Mon, 31 Aug 2026 14:33:03 +0200
Subject: [PATCH] feat: neumorphic card component + remove overflow:hidden from
 cards

---
 public/cases/design-system/index.html | 52 ++++++++++++++++
 public/css/main.css                   | 90 +++++++++++++++++++++++++--
 src/pages/cases/design-system.html    | 52 ++++++++++++++++
 3 files changed, 190 insertions(+), 4 deletions(-)

diff --git a/public/cases/design-system/index.html b/public/cases/design-system/index.html
index 48920be..aabbe02 100644
--- a/public/cases/design-system/index.html
+++ b/public/cases/design-system/index.html
@@ -394,6 +394,38 @@
       .case-article.ds-page .contact-grid {
         margin-bottom: 0.25rem;
       }
+
+      .sg-neu-demo {
+        margin-bottom: 0.5rem;
+      }
+
+      .sg-neu-base {
+        position: relative;
+        background: var(--surface);
+        border-radius: var(--radius-card);
+        padding: 2rem;
+        overflow: hidden;
+      }
+
+      .sg-neu-base::after {
+        content: "";
+        position: absolute;
+        inset: 0;
+        border-radius: inherit;
+        background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+        background-size: 128px 128px;
+        opacity: 0.35;
+        mix-blend-mode: overlay;
+        pointer-events: none;
+      }
+
+      .sg-neu-row {
+        display: flex;
+        gap: 1rem;
+        justify-content: center;
+        position: relative;
+        z-index: 1;
+      }
     </style>
     <script>
       (function () {
@@ -1013,6 +1045,26 @@
         </ul>
         <p class="sg-label">.contact-card--link · --action · --brand-*</p>
 
+        <h3>Неуморфная карточка</h3>
+        <p class="section__prose">
+          Стекло-эффект с multiple shadow: три внешних тени (close / medium / far) + четыре внутренних + радиальный блик + шум. Источник — Figma.
+        </p>
+        <div class="sg-neu-demo">
+          <div class="sg-neu-base">
+            <div class="sg-neu-row">
+              <div class="neu-card" style="background: var(--bg-elevated)">
+                <span class="neu-card__title">Neutral</span>
+                <span class="neu-card__meta">--bg-elevated</span>
+              </div>
+              <div class="neu-card" style="color: #fff">
+                <span class="neu-card__title">Accent</span>
+                <span class="neu-card__meta">--accent</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <p class="sg-label">.neu-card на .sg-neu-base</p>
+
         <h3>Секция с фоном</h3>
         <p class="section__prose">
           На главной полоса <code>.section--surface</code> визуально читается через mesh; в кейсах фон страницы
diff --git a/public/css/main.css b/public/css/main.css
index b270bca..d3df6af 100644
--- a/public/css/main.css
+++ b/public/css/main.css
@@ -2865,7 +2865,6 @@ html[data-theme="light"] .hero__portrait-shell {
 
 .exp-card {
   position: relative;
-  overflow: hidden;
   background: var(--surface);
   border: 1px solid var(--line);
   border-radius: var(--radius-card);
@@ -3049,7 +3048,6 @@ html[data-theme="light"] .hero__portrait-shell {
   position: relative;
   display: flex;
   isolation: isolate;
-  overflow: hidden;
   width: 100%;
   min-height: 100%;
   height: 100%;
@@ -3439,7 +3437,6 @@ html[data-theme="light"] .hero__portrait-shell {
   background: color-mix(in srgb, var(--surface) 94%, transparent);
   color: inherit;
   text-decoration: none;
-  overflow: hidden;
   transition: border-color 0.2s ease;
 }
 
@@ -4162,7 +4159,6 @@ html[data-radius="strong"] .skill-task-card__solution {
   background: var(--surface);
   color: inherit;
   text-decoration: none;
-  overflow: hidden;
   isolation: isolate;
   transition: border-color 0.22s ease;
 }
@@ -4352,6 +4348,92 @@ a.contact-card--link:focus-visible {
   outline-offset: 2px;
 }
 
+/* ── Neumorphic / Glass card (Figma) ───────────────────────────────── */
+.neu-card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  width: 202px;
+  height: 103px;
+  padding: 1rem;
+  border-radius: var(--radius-card);
+  background: var(--accent);
+  color: var(--text);
+  overflow: hidden;
+  box-shadow:
+    2px 2px 2px rgba(0, 0, 0, 0.10),
+    4px 8px 8px rgba(0, 0, 0, 0.15),
+    4px 16px 32px rgba(0, 0, 0, 0.25),
+    inset 1px 1px 0 rgba(255, 255, 255, 0.60),
+    inset 2px 2px 2px rgba(255, 255, 255, 0.35),
+    inset 3px 3px 4px rgba(255, 255, 255, 0.15),
+    inset -2px -2px 4px rgba(0, 0, 0, 0.10),
+    inset -1px -1px 0 rgba(0, 0, 0, 0.25);
+  transition: box-shadow 0.28s ease, transform 0.28s ease;
+}
+
+/* Радиальный блик + шум (градиент из Figma) */
+.neu-card::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background:
+    radial-gradient(
+      ellipse at 0% 0%,
+      rgba(255, 255, 255, 0.20) 0%,
+      transparent 100%
+    ),
+    url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+  background-size: auto, 128px 128px;
+  opacity: 0.35;
+  mix-blend-mode: overlay;
+  pointer-events: none;
+}
+
+.neu-card:hover {
+  box-shadow:
+    2px 4px 6px rgba(0, 0, 0, 0.14),
+    6px 12px 16px rgba(0, 0, 0, 0.18),
+    6px 24px 48px rgba(0, 0, 0, 0.28),
+    inset 1px 1px 0 rgba(255, 255, 255, 0.65),
+    inset 2px 2px 2px rgba(255, 255, 255, 0.40),
+    inset 3px 3px 4px rgba(255, 255, 255, 0.18),
+    inset -2px -2px 4px rgba(0, 0, 0, 0.12),
+    inset -1px -1px 0 rgba(0, 0, 0, 0.28);
+  transform: translateY(-3px) scale(1.02);
+}
+
+.neu-card__title {
+  margin: 0;
+  font-family: var(--font-accent);
+  font-size: 0.92rem;
+  font-weight: 700;
+  line-height: 1.2;
+  position: relative;
+  z-index: 1;
+}
+
+.neu-card__meta {
+  margin: 0;
+  font-size: 0.75rem;
+  line-height: 1.3;
+  opacity: 0.7;
+  position: relative;
+  z-index: 1;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .neu-card {
+    transition: none;
+  }
+
+  .neu-card:hover {
+    transform: none;
+  }
+}
+
 .section--footerish {
   padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
 }
diff --git a/src/pages/cases/design-system.html b/src/pages/cases/design-system.html
index dee6f49..19c82b9 100644
--- a/src/pages/cases/design-system.html
+++ b/src/pages/cases/design-system.html
@@ -301,6 +301,38 @@
       .case-article.ds-page .contact-grid {
         margin-bottom: 0.25rem;
       }
+
+      .sg-neu-demo {
+        margin-bottom: 0.5rem;
+      }
+
+      .sg-neu-base {
+        position: relative;
+        background: var(--surface);
+        border-radius: var(--radius-card);
+        padding: 2rem;
+        overflow: hidden;
+      }
+
+      .sg-neu-base::after {
+        content: "";
+        position: absolute;
+        inset: 0;
+        border-radius: inherit;
+        background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+        background-size: 128px 128px;
+        opacity: 0.35;
+        mix-blend-mode: overlay;
+        pointer-events: none;
+      }
+
+      .sg-neu-row {
+        display: flex;
+        gap: 1rem;
+        justify-content: center;
+        position: relative;
+        z-index: 1;
+      }
     </style>
     <script>
       (function () {
@@ -825,6 +857,26 @@
         </ul>
         <p class="sg-label">.contact-card--link · --action · --brand-*</p>
 
+        <h3>Неуморфная карточка</h3>
+        <p class="section__prose">
+          Стекло-эффект с multiple shadow: три внешних тени (close / medium / far) + четыре внутренних + радиальный блик + шум. Источник — Figma.
+        </p>
+        <div class="sg-neu-demo">
+          <div class="sg-neu-base">
+            <div class="sg-neu-row">
+              <div class="neu-card" style="background: var(--bg-elevated)">
+                <span class="neu-card__title">Neutral</span>
+                <span class="neu-card__meta">--bg-elevated</span>
+              </div>
+              <div class="neu-card" style="color: #fff">
+                <span class="neu-card__title">Accent</span>
+                <span class="neu-card__meta">--accent</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <p class="sg-label">.neu-card на .sg-neu-base</p>
+
         <h3>Секция с фоном</h3>
         <p class="section__prose">
           На главной полоса <code>.section--surface</code> визуально читается через mesh; в кейсах фон страницы