corrections based on the feedback

Author: amaksimovv

docs/index.en.md

@@ -8,10 +8,6 @@ hide:
 ---
 
 <div class="hero">
-  <div class="blobs" aria-hidden="true">
-    <div class="blob"></div>
-    <div class="blob"></div>
-  </div>
 
   <div class="hero-content">
     <h1>CodeScoring Documentation</h1>

docs/index.md

@@ -8,10 +8,6 @@ hide:
 ---
 
 <div class="hero">
-  <div class="blobs" aria-hidden="true">
-    <div class="blob"></div>
-    <div class="blob"></div>
-  </div>
 
   <div class="hero-content">
     <h1>Документация CodeScoring</h1>

docs/stylesheets/home.css

@@ -1,5 +1,16 @@
 @import url('https://fonts.googleapis.com/css2?family=Play:wght@400;700&display=swap');
 
+/* ====== Home hero ====== */
+/* Layout variables scoped to home page */
+body.is-home {
+  --cs-hero-pad-top: 5.5rem;
+  --cs-hero-pad-x: clamp(1.5rem, 6vw, 8rem);
+  --cs-hero-pad-left: 150px;
+  --cs-hero-pad-bottom: 0.75rem;
+  background: #1c1c1f;
+}
+
+/* Hero container */
 .hero {
   position: relative;
   width: 100vw;
@@ -10,72 +21,59 @@
   display: flex;
   align-items: flex-start;
   justify-content: flex-start;
-  padding: 3rem clamp(1.5rem, 6vw, 8rem) 2.5rem clamp(1.5rem, 6vw, 8rem);
+  padding: var(--cs-hero-pad-top) var(--cs-hero-pad-x) var(--cs-hero-pad-bottom) var(--cs-hero-pad-left);
   font-family: "Play", "Arial Narrow", Arial, sans-serif;
 
   overflow: visible;
   color: #ffffff;
   z-index: 0;
 }
 
-body.is-home .hero {
-  padding: 5.5rem clamp(1.5rem, 6vw, 8rem) 0.75rem 150px !important;
-}
-
-@media (max-width: 1200px) {
-  body.is-home .hero {
-    padding: 4rem clamp(1.5rem, 6vw, 5rem) 0.75rem clamp(1.5rem, 4vw, 72px) !important;
-  }
-}
-
-/* контейнер для блобов — фиксированный фон */
-.blobs {
+/* Page-level background blobs for home only */
+body.is-home::before,
+body.is-home::after {
+  content: "";
   position: fixed;
-  top: var(--md-header-height, 56px);
-  bottom: var(--md-footer-height, 56px);
-  left: 0;
-  right: 0;
   z-index: -1;
   pointer-events: none;
-  overflow: hidden;
-  background: #1c1c1f;
+  border-radius: 50%;
+  filter: blur(120px);
+  opacity: 0.9;
+  width: 740px;
+  height: 740px;
 }
 
-/* единый, мягкий радиальный blob */
-.blob {
-  position: absolute;
-  width: 720px;
-  height: 720px;
-  border-radius: 50%;
+body.is-home::before {
+  left: -8vw;
+  top: 12vh;
   background: radial-gradient(circle at 30% 30%,
-                rgba(255,61,108,0.9) 0%,
-                rgba(255,61,108,0.35) 42%,
-                rgba(255,61,108,0.05) 66%,
-                rgba(255,61,108,0) 100%);
-  filter: blur(90px);
-  opacity: 0.95;
-  transform: translate3d(0,0,0) scale(1);
-  will-change: transform;
-  animation: blobMove 10s linear infinite;
+    rgba(255,61,108,0.9) 0%,
+    rgba(255,61,108,0.35) 42%,
+    rgba(255,61,108,0.05) 66%,
+    rgba(255,61,108,0) 100%);
+  animation: blobMove 12s linear infinite;
 }
 
-/* второй blob */
-.blob:nth-of-type(2) {
-  width: 900px;
-  height: 900px;
-  left: 55%;
-  top: 45%;
+body.is-home::after {
+  right: -12vw;
+  top: 40vh;
   background: radial-gradient(circle at 50% 45%,
-                rgba(255,61,108,0.8) 0%,
-                rgba(255,61,108,0.22) 38%,
-                rgba(255,61,108,0.02) 70%,
-                rgba(255,61,108,0) 100%);
-  filter: blur(140px);
-  opacity: 0.8;
-  animation: blobMoveAlt 15s linear infinite reverse;
+    rgba(255,61,108,0.8) 0%,
+    rgba(255,61,108,0.22) 38%,
+    rgba(255,61,108,0.02) 70%,
+    rgba(255,61,108,0) 100%);
+  animation: blobMoveAlt 16s linear infinite reverse;
+}
+
+@media (max-width: 1200px) {
+  body.is-home {
+    --cs-hero-pad-top: 4rem;
+    --cs-hero-pad-x: clamp(1.5rem, 6vw, 5rem);
+    --cs-hero-pad-left: clamp(1.5rem, 4vw, 72px);
+  }
 }
 
-/* Контент поверх блобов */
+/* Контент поверх фона */
 body.is-home .hero-content {
   width: 100%;
   max-width: 1200px;
@@ -200,7 +198,7 @@ body.is-home .md-top {
 
 @media (min-width: 1400px) {
   .hero {
-    padding-top: 4rem;
+    padding-top: var(--cs-hero-pad-top);
   }
 
   .hero-content {
@@ -212,12 +210,6 @@ body.is-home .md-top {
   }
 }
 
-@media (min-width: 1200px) {
-  body.is-home .hero-content {
-    margin-left: 0 !important;
-  }
-}
-
 /* ====== мобильная адаптация ====== */
 /* Убрать тень и границу от хэдера и табов на мобильке */
 @media (max-width: 720px) {

overrides/main.html

@@ -46,6 +46,7 @@
     {{ super() }}
     <script>
         (function() {
+            // Inline header tabs for desktop. Keeps default tabs on mobile.
             const minWidth = 960;
             const root = document.documentElement;
             let headerTabs = null;