From 1695ad504dca6f942bd5e370c733598caef47c0e Mon Sep 17 00:00:00 2001
From: root <root@oyhkwtigrd.local>
Date: Thu, 1 Oct 2026 14:28:00 +0200
Subject: [PATCH] =?UTF-8?q?feat:=20=D0=B4=D0=B5=D0=BC=D0=BE=20=D1=81=D1=82?=
 =?UTF-8?q?=D0=B5=D0=BA=D0=BB=D1=8F=D0=BD=D0=BD=D0=BE=D0=B3=D0=BE=20=D1=81?=
 =?UTF-8?q?=D0=BB=D0=BE=D1=8F=20(.mp-card--glass)=20=D0=BD=D0=B0=20Design?=
 =?UTF-8?q?=20System?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/cases/design-system/index.html    | 22 ++++++++++++++++++++++
 public/en/cases/design-system/index.html | 22 ++++++++++++++++++++++
 src/pages/cases/design-system.en.html    | 22 ++++++++++++++++++++++
 src/pages/cases/design-system.html       | 22 ++++++++++++++++++++++
 4 files changed, 88 insertions(+)

diff --git a/public/cases/design-system/index.html b/public/cases/design-system/index.html
index f0660d9..07be09c 100644
--- a/public/cases/design-system/index.html
+++ b/public/cases/design-system/index.html
@@ -1066,8 +1066,30 @@
               <p class="mp-card__desc">Краткое описание проекта в две-три строки для демо Design System.</p>
             </div>
           </a>
+          <a class="mp-card mp-card--link mp-card--stack-bottom mp-card--glass" href="#components" tabindex="-1" aria-hidden="true" style="margin-top: 1rem">
+            <div class="mp-card__media" aria-hidden="true">
+              <img
+                class="mp-card__image"
+                src="../../assets/shared/placeholder.webp"
+                alt=""
+                width="400"
+                height="225"
+                loading="lazy"
+                decoding="async"
+              />
+            </div>
+            <div class="mp-card__body">
+              <h3 class="mp-card__title">mp-card — стекло снизу</h3>
+              <ul class="mp-card__tags" aria-label="Теги">
+                <li class="mp-card__tag">Демо</li>
+                <li class="mp-card__tag">Glass</li>
+              </ul>
+              <p class="mp-card__desc">Краткое описание проекта в две-три строки для демо Design System.</p>
+            </div>
+          </a>
         </div>
         <p class="sg-label">.mp-card .mp-card--stack-bottom — текст сверху, обложка снизу</p>
+        <p class="sg-label">.mp-card--glass — стеклянный слой (токены .glass-neutral) на нижней трети карточки</p>
 <script>
   (function () {
     function hashStr(s) {
diff --git a/public/en/cases/design-system/index.html b/public/en/cases/design-system/index.html
index 07486b1..78ecc24 100644
--- a/public/en/cases/design-system/index.html
+++ b/public/en/cases/design-system/index.html
@@ -1065,8 +1065,30 @@
               <p class="mp-card__desc">A brief two- or three-line description of the project for the Design System demo.</p>
             </div>
           </a>
+          <a class="mp-card mp-card--link mp-card--stack-bottom mp-card--glass" href="#components" tabindex="-1" aria-hidden="true" style="margin-top: 1rem">
+            <div class="mp-card__media" aria-hidden="true">
+              <img
+                class="mp-card__image"
+                src="../../../assets/shared/placeholder.webp"
+                alt=""
+                width="400"
+                height="225"
+                loading="lazy"
+                decoding="async"
+              />
+            </div>
+            <div class="mp-card__body">
+              <h3 class="mp-card__title">mp-card — glass at bottom</h3>
+              <ul class="mp-card__tags" aria-label="Tags">
+                <li class="mp-card__tag">Demo</li>
+                <li class="mp-card__tag">Glass</li>
+              </ul>
+              <p class="mp-card__desc">Short project description in two or three lines for the Design System demo.</p>
+            </div>
+          </a>
         </div>
         <p class="sg-label">.mp-card .mp-card--stack-bottom — text on top, cover at the bottom</p>
+        <p class="sg-label">.mp-card--glass — glass layer (tokens from .glass-neutral) on the bottom third of the card</p>
 <script>
   (function () {
     function hashStr(s) {
diff --git a/src/pages/cases/design-system.en.html b/src/pages/cases/design-system.en.html
index 0af26d1..c148d7c 100644
--- a/src/pages/cases/design-system.en.html
+++ b/src/pages/cases/design-system.en.html
@@ -746,8 +746,30 @@
               <p class="mp-card__desc">A brief two- or three-line description of the project for the Design System demo.</p>
             </div>
           </a>
+          <a class="mp-card mp-card--link mp-card--stack-bottom mp-card--glass" href="#components" tabindex="-1" aria-hidden="true" style="margin-top: 1rem">
+            <div class="mp-card__media" aria-hidden="true">
+              <img
+                class="mp-card__image"
+                src="{{assetPrefix}}assets/shared/placeholder.webp"
+                alt=""
+                width="400"
+                height="225"
+                loading="lazy"
+                decoding="async"
+              />
+            </div>
+            <div class="mp-card__body">
+              <h3 class="mp-card__title">mp-card — glass at bottom</h3>
+              <ul class="mp-card__tags" aria-label="Tags">
+                <li class="mp-card__tag">Demo</li>
+                <li class="mp-card__tag">Glass</li>
+              </ul>
+              <p class="mp-card__desc">Short project description in two or three lines for the Design System demo.</p>
+            </div>
+          </a>
         </div>
         <p class="sg-label">.mp-card .mp-card--stack-bottom — text on top, cover at the bottom</p>
+        <p class="sg-label">.mp-card--glass — glass layer (tokens from .glass-neutral) on the bottom third of the card</p>
 <script>
   (function () {
     function hashStr(s) {
diff --git a/src/pages/cases/design-system.html b/src/pages/cases/design-system.html
index 8116e0d..759d56b 100644
--- a/src/pages/cases/design-system.html
+++ b/src/pages/cases/design-system.html
@@ -747,8 +747,30 @@
               <p class="mp-card__desc">Краткое описание проекта в две-три строки для демо Design System.</p>
             </div>
           </a>
+          <a class="mp-card mp-card--link mp-card--stack-bottom mp-card--glass" href="#components" tabindex="-1" aria-hidden="true" style="margin-top: 1rem">
+            <div class="mp-card__media" aria-hidden="true">
+              <img
+                class="mp-card__image"
+                src="{{assetPrefix}}assets/shared/placeholder.webp"
+                alt=""
+                width="400"
+                height="225"
+                loading="lazy"
+                decoding="async"
+              />
+            </div>
+            <div class="mp-card__body">
+              <h3 class="mp-card__title">mp-card — стекло снизу</h3>
+              <ul class="mp-card__tags" aria-label="Теги">
+                <li class="mp-card__tag">Демо</li>
+                <li class="mp-card__tag">Glass</li>
+              </ul>
+              <p class="mp-card__desc">Краткое описание проекта в две-три строки для демо Design System.</p>
+            </div>
+          </a>
         </div>
         <p class="sg-label">.mp-card .mp-card--stack-bottom — текст сверху, обложка снизу</p>
+        <p class="sg-label">.mp-card--glass — стеклянный слой (токены .glass-neutral) на нижней трети карточки</p>
 <script>
   (function () {
     function hashStr(s) {