From 6d66e4cf121ca7a75d74471d18297acb313b5485 Mon Sep 17 00:00:00 2001
From: root <root@oyhkwtigrd.local>
Date: Thu, 17 Sep 2026 22:37:22 +0200
Subject: [PATCH] feat(mp-card): color portfolio card tags with deterministic
 pastel palette (constant per content)

---
 public/cases/design-system/index.html         | 22 ++++++++++++++++
 .../cases/template-elements-demo/index.html   | 26 ++++++++++++++++++-
 public/en/cases/design-system/index.html      | 22 ++++++++++++++++
 .../cases/template-elements-demo/index.html   | 24 +++++++++++++++++
 public/en/index.html                          | 24 +++++++++++++++++
 public/index.html                             | 26 ++++++++++++++++++-
 src/pages/cases/design-system.en.html         | 22 ++++++++++++++++
 src/pages/cases/design-system.html            | 22 ++++++++++++++++
 src/partials/projects-section-mp.en.html      | 24 +++++++++++++++++
 src/partials/projects-section-mp.html         | 26 ++++++++++++++++++-
 10 files changed, 235 insertions(+), 3 deletions(-)

diff --git a/public/cases/design-system/index.html b/public/cases/design-system/index.html
index ede01ae..9afb447 100644
--- a/public/cases/design-system/index.html
+++ b/public/cases/design-system/index.html
@@ -937,6 +937,28 @@
           </a>
         </div>
         <p class="sg-label">.mp-card .mp-card--stack-bottom — текст сверху, обложка снизу</p>
+<script>
+  (function () {
+    var PALETTE = [
+      '#F3D9D9', '#E5EAD9', '#DCE7F0', '#E9E1EE',
+      '#F1E7D7', '#DCEFE8', '#F4DFE1', '#E3E5F0'
+    ];
+    function hashStr(s) {
+      var h = 0;
+      for (var i = 0; i < s.length; i++) { h = (h * 31 + s.charCodeAt(i)) >>> 0; }
+      return h;
+    }
+    function colorTags(root) {
+      var tags = root.querySelectorAll('.mp-card--stack-bottom .mp-card__tag');
+      for (var i = 0; i < tags.length; i++) {
+        var t = tags[i];
+        var key = (t.textContent || '').trim().toLowerCase();
+        t.style.backgroundColor = PALETTE[hashStr(key) % PALETTE.length];
+      }
+    }
+    colorTags(document);
+  })();
+</script>
 
         <h3>Заглушка при загрузке изображений</h3>
         <p class="section__prose">
diff --git a/public/cases/template-elements-demo/index.html b/public/cases/template-elements-demo/index.html
index 5e4e7f6..1b87f14 100644
--- a/public/cases/template-elements-demo/index.html
+++ b/public/cases/template-elements-demo/index.html
@@ -853,7 +853,31 @@
             </li>
           </ol>
         </div>
-      </section><section hidden class="section section--surface" aria-hidden="true">
+      </section>
+<script>
+  (function () {
+    // Пастельная («постельная») палитра тегов портфолио.
+    // Цвет детерминирован по тексту тега — один и тот же текст всегда один цвет.
+    var PALETTE = [
+      '#F3D9D9', '#E5EAD9', '#DCE7F0', '#E9E1EE',
+      '#F1E7D7', '#DCEFE8', '#F4DFE1', '#E3E5F0'
+    ];
+    function hashStr(s) {
+      var h = 0;
+      for (var i = 0; i < s.length; i++) { h = (h * 31 + s.charCodeAt(i)) >>> 0; }
+      return h;
+    }
+    function colorTags(root) {
+      var tags = root.querySelectorAll('.mp-card--stack-bottom .mp-card__tag');
+      for (var i = 0; i < tags.length; i++) {
+        var t = tags[i];
+        var key = (t.textContent || '').trim().toLowerCase();
+        t.style.backgroundColor = PALETTE[hashStr(key) % PALETTE.length];
+      }
+    }
+    colorTags(document);
+  })();
+</script><section hidden class="section section--surface" aria-hidden="true">
         <div class="section__inner">
           <div class="projects__heading">
             <h2 class="section__title projects__title">Портфолио</h2>
diff --git a/public/en/cases/design-system/index.html b/public/en/cases/design-system/index.html
index df685f5..9237e46 100644
--- a/public/en/cases/design-system/index.html
+++ b/public/en/cases/design-system/index.html
@@ -936,6 +936,28 @@
           </a>
         </div>
         <p class="sg-label">.mp-card .mp-card--stack-bottom — text on top, cover at the bottom</p>
+<script>
+  (function () {
+    var PALETTE = [
+      '#F3D9D9', '#E5EAD9', '#DCE7F0', '#E9E1EE',
+      '#F1E7D7', '#DCEFE8', '#F4DFE1', '#E3E5F0'
+    ];
+    function hashStr(s) {
+      var h = 0;
+      for (var i = 0; i < s.length; i++) { h = (h * 31 + s.charCodeAt(i)) >>> 0; }
+      return h;
+    }
+    function colorTags(root) {
+      var tags = root.querySelectorAll('.mp-card--stack-bottom .mp-card__tag');
+      for (var i = 0; i < tags.length; i++) {
+        var t = tags[i];
+        var key = (t.textContent || '').trim().toLowerCase();
+        t.style.backgroundColor = PALETTE[hashStr(key) % PALETTE.length];
+      }
+    }
+    colorTags(document);
+  })();
+</script>
 
         <h3>Placeholder while images are loading</h3>
         <p class="section__prose">
diff --git a/public/en/cases/template-elements-demo/index.html b/public/en/cases/template-elements-demo/index.html
index ac88770..94cc644 100644
--- a/public/en/cases/template-elements-demo/index.html
+++ b/public/en/cases/template-elements-demo/index.html
@@ -854,6 +854,30 @@
           </ol>
         </div>
       </section>
+<script>
+  (function () {
+    // Пастельная («постельная») палитра тегов портфолио.
+    // Цвет детерминирован по тексту тега — один и тот же текст всегда один цвет.
+    var PALETTE = [
+      '#F3D9D9', '#E5EAD9', '#DCE7F0', '#E9E1EE',
+      '#F1E7D7', '#DCEFE8', '#F4DFE1', '#E3E5F0'
+    ];
+    function hashStr(s) {
+      var h = 0;
+      for (var i = 0; i < s.length; i++) { h = (h * 31 + s.charCodeAt(i)) >>> 0; }
+      return h;
+    }
+    function colorTags(root) {
+      var tags = root.querySelectorAll('.mp-card--stack-bottom .mp-card__tag');
+      for (var i = 0; i < tags.length; i++) {
+        var t = tags[i];
+        var key = (t.textContent || '').trim().toLowerCase();
+        t.style.backgroundColor = PALETTE[hashStr(key) % PALETTE.length];
+      }
+    }
+    colorTags(document);
+  })();
+</script>
 <section hidden class="section section--surface" aria-hidden="true">
         <div class="section__inner">
           <div class="projects__heading">
diff --git a/public/en/index.html b/public/en/index.html
index d759fed..c00522a 100644
--- a/public/en/index.html
+++ b/public/en/index.html
@@ -465,6 +465,30 @@
           </ol>
         </div>
       </section>
+<script>
+  (function () {
+    // Пастельная («постельная») палитра тегов портфолио.
+    // Цвет детерминирован по тексту тега — один и тот же текст всегда один цвет.
+    var PALETTE = [
+      '#F3D9D9', '#E5EAD9', '#DCE7F0', '#E9E1EE',
+      '#F1E7D7', '#DCEFE8', '#F4DFE1', '#E3E5F0'
+    ];
+    function hashStr(s) {
+      var h = 0;
+      for (var i = 0; i < s.length; i++) { h = (h * 31 + s.charCodeAt(i)) >>> 0; }
+      return h;
+    }
+    function colorTags(root) {
+      var tags = root.querySelectorAll('.mp-card--stack-bottom .mp-card__tag');
+      for (var i = 0; i < tags.length; i++) {
+        var t = tags[i];
+        var key = (t.textContent || '').trim().toLowerCase();
+        t.style.backgroundColor = PALETTE[hashStr(key) % PALETTE.length];
+      }
+    }
+    colorTags(document);
+  })();
+</script>
 <section hidden class="section section--surface" aria-hidden="true">
         <div class="section__inner">
           <div class="projects__heading">
diff --git a/public/index.html b/public/index.html
index 32eac37..230abc4 100644
--- a/public/index.html
+++ b/public/index.html
@@ -464,7 +464,31 @@
             </li>
           </ol>
         </div>
-      </section><section hidden class="section section--surface" aria-hidden="true">
+      </section>
+<script>
+  (function () {
+    // Пастельная («постельная») палитра тегов портфолио.
+    // Цвет детерминирован по тексту тега — один и тот же текст всегда один цвет.
+    var PALETTE = [
+      '#F3D9D9', '#E5EAD9', '#DCE7F0', '#E9E1EE',
+      '#F1E7D7', '#DCEFE8', '#F4DFE1', '#E3E5F0'
+    ];
+    function hashStr(s) {
+      var h = 0;
+      for (var i = 0; i < s.length; i++) { h = (h * 31 + s.charCodeAt(i)) >>> 0; }
+      return h;
+    }
+    function colorTags(root) {
+      var tags = root.querySelectorAll('.mp-card--stack-bottom .mp-card__tag');
+      for (var i = 0; i < tags.length; i++) {
+        var t = tags[i];
+        var key = (t.textContent || '').trim().toLowerCase();
+        t.style.backgroundColor = PALETTE[hashStr(key) % PALETTE.length];
+      }
+    }
+    colorTags(document);
+  })();
+</script><section hidden class="section section--surface" aria-hidden="true">
         <div class="section__inner">
           <div class="projects__heading">
             <h2 class="section__title projects__title">Портфолио</h2>
diff --git a/src/pages/cases/design-system.en.html b/src/pages/cases/design-system.en.html
index a6d006e..89343b2 100644
--- a/src/pages/cases/design-system.en.html
+++ b/src/pages/cases/design-system.en.html
@@ -748,6 +748,28 @@
           </a>
         </div>
         <p class="sg-label">.mp-card .mp-card--stack-bottom — text on top, cover at the bottom</p>
+<script>
+  (function () {
+    var PALETTE = [
+      '#F3D9D9', '#E5EAD9', '#DCE7F0', '#E9E1EE',
+      '#F1E7D7', '#DCEFE8', '#F4DFE1', '#E3E5F0'
+    ];
+    function hashStr(s) {
+      var h = 0;
+      for (var i = 0; i < s.length; i++) { h = (h * 31 + s.charCodeAt(i)) >>> 0; }
+      return h;
+    }
+    function colorTags(root) {
+      var tags = root.querySelectorAll('.mp-card--stack-bottom .mp-card__tag');
+      for (var i = 0; i < tags.length; i++) {
+        var t = tags[i];
+        var key = (t.textContent || '').trim().toLowerCase();
+        t.style.backgroundColor = PALETTE[hashStr(key) % PALETTE.length];
+      }
+    }
+    colorTags(document);
+  })();
+</script>
 
         <h3>Placeholder while images are loading</h3>
         <p class="section__prose">
diff --git a/src/pages/cases/design-system.html b/src/pages/cases/design-system.html
index b21627d..b76bbba 100644
--- a/src/pages/cases/design-system.html
+++ b/src/pages/cases/design-system.html
@@ -749,6 +749,28 @@
           </a>
         </div>
         <p class="sg-label">.mp-card .mp-card--stack-bottom — текст сверху, обложка снизу</p>
+<script>
+  (function () {
+    var PALETTE = [
+      '#F3D9D9', '#E5EAD9', '#DCE7F0', '#E9E1EE',
+      '#F1E7D7', '#DCEFE8', '#F4DFE1', '#E3E5F0'
+    ];
+    function hashStr(s) {
+      var h = 0;
+      for (var i = 0; i < s.length; i++) { h = (h * 31 + s.charCodeAt(i)) >>> 0; }
+      return h;
+    }
+    function colorTags(root) {
+      var tags = root.querySelectorAll('.mp-card--stack-bottom .mp-card__tag');
+      for (var i = 0; i < tags.length; i++) {
+        var t = tags[i];
+        var key = (t.textContent || '').trim().toLowerCase();
+        t.style.backgroundColor = PALETTE[hashStr(key) % PALETTE.length];
+      }
+    }
+    colorTags(document);
+  })();
+</script>
 
         <h3>Заглушка при загрузке изображений</h3>
         <p class="section__prose">
diff --git a/src/partials/projects-section-mp.en.html b/src/partials/projects-section-mp.en.html
index 3179ef1..a4b1df3 100644
--- a/src/partials/projects-section-mp.en.html
+++ b/src/partials/projects-section-mp.en.html
@@ -165,3 +165,27 @@
           </ol>
         </div>
       </section>
+<script>
+  (function () {
+    // Пастельная («постельная») палитра тегов портфолио.
+    // Цвет детерминирован по тексту тега — один и тот же текст всегда один цвет.
+    var PALETTE = [
+      '#F3D9D9', '#E5EAD9', '#DCE7F0', '#E9E1EE',
+      '#F1E7D7', '#DCEFE8', '#F4DFE1', '#E3E5F0'
+    ];
+    function hashStr(s) {
+      var h = 0;
+      for (var i = 0; i < s.length; i++) { h = (h * 31 + s.charCodeAt(i)) >>> 0; }
+      return h;
+    }
+    function colorTags(root) {
+      var tags = root.querySelectorAll('.mp-card--stack-bottom .mp-card__tag');
+      for (var i = 0; i < tags.length; i++) {
+        var t = tags[i];
+        var key = (t.textContent || '').trim().toLowerCase();
+        t.style.backgroundColor = PALETTE[hashStr(key) % PALETTE.length];
+      }
+    }
+    colorTags(document);
+  })();
+</script>
diff --git a/src/partials/projects-section-mp.html b/src/partials/projects-section-mp.html
index 9648ef5..3f1de0e 100644
--- a/src/partials/projects-section-mp.html
+++ b/src/partials/projects-section-mp.html
@@ -164,4 +164,28 @@
             </li>
           </ol>
         </div>
-      </section>
\ No newline at end of file
+      </section>
+<script>
+  (function () {
+    // Пастельная («постельная») палитра тегов портфолио.
+    // Цвет детерминирован по тексту тега — один и тот же текст всегда один цвет.
+    var PALETTE = [
+      '#F3D9D9', '#E5EAD9', '#DCE7F0', '#E9E1EE',
+      '#F1E7D7', '#DCEFE8', '#F4DFE1', '#E3E5F0'
+    ];
+    function hashStr(s) {
+      var h = 0;
+      for (var i = 0; i < s.length; i++) { h = (h * 31 + s.charCodeAt(i)) >>> 0; }
+      return h;
+    }
+    function colorTags(root) {
+      var tags = root.querySelectorAll('.mp-card--stack-bottom .mp-card__tag');
+      for (var i = 0; i < tags.length; i++) {
+        var t = tags[i];
+        var key = (t.textContent || '').trim().toLowerCase();
+        t.style.backgroundColor = PALETTE[hashStr(key) % PALETTE.length];
+      }
+    }
+    colorTags(document);
+  })();
+</script>
\ No newline at end of file