feat: демо стеклянного слоя (.mp-card--glass) на Design System

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) {

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) {

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) {

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) {