🎨 UX: Hero контейнер с ограниченной шириной и закругленными краями

smartsoltech/web/templates/web/home_modern.html

@@ -5,6 +5,7 @@
 {% block content %}
 <!-- Hero Section -->
 <section class="hero-modern" id="home">
+    <div class="hero-wrapper">
         {% if hero_banners %}
             <!-- Hero Carousel for Multiple Banners -->
             <div id="heroCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel">
@@ -190,6 +191,7 @@
             </div>
         </div>
     {% endif %}
+    </div>
 </section><!-- Services Preview Section -->
 <section class="section-padding bg-light">
     <div class="container-modern">
@@ -573,11 +575,10 @@
 <style>
 /* CRITICAL Hero Banner Styles - Emergency Fix */
 .hero-modern {
-    padding: 0;
+    padding: 2rem 0;
-    background: #000;
+    background: #f8f9fa;
     position: relative;
     overflow: hidden;
-    min-height: 100vh;
 }
 
 .hero-container {
@@ -587,18 +588,21 @@
     margin: 0 auto;
     border-radius: 20px;
     overflow: hidden;
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.3);
+    height: 70vh;
+    min-height: 500px;
+    max-height: 800px;
 }
 
 .carousel-item {
     position: relative;
-    min-height: 100vh;
+    height: 100%;
 }
 
 .hero-bg {
     position: relative;
     width: 100%;
-    height: 100vh;
+    height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -639,35 +643,40 @@
     z-index: 3;
     color: white;
     text-align: left;
-    padding: 2rem;
+    padding: 3rem;
     width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
 }
 
 .hero-title {
-    font-size: 3.5rem;
+    font-size: 3rem;
     font-weight: 800;
     margin-bottom: 1rem;
     color: white;
+    line-height: 1.2;
 }
 
 .hero-subtitle {
-    font-size: 1.5rem;
+    font-size: 1.3rem;
     margin-bottom: 1rem;
     opacity: 0.9;
 }
 
 .hero-description {
-    font-size: 1.2rem;
+    font-size: 1.1rem;
     margin-bottom: 2rem;
     opacity: 0.8;
+    max-width: 500px;
 }
 
 /* Pill Indicators Styles */
 .carousel-indicators-container {
     position: absolute;
-    top: 50%;
+    bottom: 30px;
     left: 50%;
-    transform: translate(-50%, -50%);
+    transform: translateX(-50%);
     z-index: 4;
     pointer-events: auto;
 }
@@ -739,21 +748,41 @@
     }
 }
 
+/* Container wrapper для центрирования */
+.hero-wrapper {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 1rem;
+}
+
 /* Responsive */
 @media (max-width: 768px) {
     .hero-container {
-        border-radius: 0;
         margin: 0;
+        border-radius: 15px;
+        height: 60vh;
+        min-height: 400px;
+        max-height: 600px;
+    }
+    
+    .hero-content {
+        padding: 2rem 1.5rem;
     }
     
     .hero-title {
-        font-size: 2.5rem;
+        font-size: 2rem;
+    }
+    
+    .hero-subtitle {
+        font-size: 1.1rem;
+    }
+    
+    .hero-description {
+        font-size: 1rem;
     }
     
     .carousel-indicators-container {
         bottom: 20px;
-        top: auto;
-        transform: translateX(-50%);
     }
     
     .pill-indicator {
@@ -761,6 +790,22 @@
         font-size: 10px;
     }
 }
+
+@media (max-width: 576px) {
+    .hero-container {
+        border-radius: 12px;
+        height: 50vh;
+        min-height: 350px;
+    }
+    
+    .hero-content {
+        padding: 1.5rem 1rem;
+    }
+    
+    .hero-title {
+        font-size: 1.8rem;
+    }
+}
 </style>
 {% endblock %}