From 8cd89e48a22576beadf93ab9adf1d3c9194765bc Mon Sep 17 00:00:00 2001
From: "Andrey K. Choi" <a.choi@smartsoltech.kr>
Date: Tue, 25 Nov 2025 17:48:07 +0900
Subject: [PATCH] Improve career page statistics layout and benefit cards
 visibility

- Changed statistics cards to display in single horizontal row
- Updated career benefit cards with better contrast and readability
- Changed text colors from white to dark gray for better visibility
- Updated icons to blue accent color (#667eea)
- Improved button styling with dark theme and hover effects
- Added proper flexbox layout for statistics section
- Enhanced responsive design for mobile devices
---
 smartsoltech/web/templates/web/career.html | 99 ++++++++++++++--------
 1 file changed, 63 insertions(+), 36 deletions(-)

diff --git a/smartsoltech/web/templates/web/career.html b/smartsoltech/web/templates/web/career.html
index 64142f4..f703332 100644
--- a/smartsoltech/web/templates/web/career.html
+++ b/smartsoltech/web/templates/web/career.html
@@ -15,24 +15,18 @@
                 </p>
                 {% if total_positions > 0 %}
                 <div class="career-stats mt-4">
-                    <div class="row justify-content-center">
-                        <div class="col-auto">
-                            <div class="stat-item stat-item-dark">
-                                <div class="stat-number text-white">{{ total_positions }}</div>
-                                <div class="stat-label text-light">Открытых позиций</div>
-                            </div>
+                    <div class="stats-row d-flex justify-content-center align-items-center flex-wrap">
+                        <div class="stat-item stat-item-dark">
+                            <div class="stat-number text-white">{{ total_positions }}</div>
+                            <div class="stat-label text-light">Открытых позиций</div>
                         </div>
-                        <div class="col-auto">
-                            <div class="stat-item stat-item-dark">
-                                <div class="stat-number text-white">{{ departments|length }}</div>
-                                <div class="stat-label text-light">Отделов</div>
-                            </div>
+                        <div class="stat-item stat-item-dark">
+                            <div class="stat-number text-white">{{ departments|length }}</div>
+                            <div class="stat-label text-light">Отделов</div>
                         </div>
-                        <div class="col-auto">
-                            <div class="stat-item stat-item-dark">
-                                <div class="stat-number text-white">{{ featured_careers|length }}</div>
-                                <div class="stat-label text-light">Топ вакансий</div>
-                            </div>
+                        <div class="stat-item stat-item-dark">
+                            <div class="stat-number text-white">{{ featured_careers|length }}</div>
+                            <div class="stat-label text-light">Топ вакансий</div>
                         </div>
                     </div>
                 </div>
@@ -289,11 +283,11 @@
                     </div>
                 </div>
                 <div class="mt-5">
-                    <a href="{% url 'team' %}" class="btn btn-light btn-lg me-3">
+                    <a href="{% url 'team' %}" class="btn btn-dark btn-lg me-3" style="background: rgba(45, 55, 72, 0.9); border-color: rgba(45, 55, 72, 0.9); backdrop-filter: blur(10px);">
                         <i class="fas fa-users me-2"></i>
                         Наша команда
                     </a>
-                    <a href="{% url 'about' %}" class="btn btn-outline-light btn-lg">
+                    <a href="{% url 'about' %}" class="btn btn-outline-dark btn-lg" style="border-color: rgba(45, 55, 72, 0.8); color: rgba(45, 55, 72, 0.9); backdrop-filter: blur(10px);">
                         <i class="fas fa-info-circle me-2"></i>
                         О компании
                     </a>
@@ -341,14 +335,20 @@
     margin-top: 2rem;
 }
 
+.stats-row {
+    gap: 20px;
+    flex-wrap: wrap;
+}
+
 .stat-item {
     background: rgba(255, 255, 255, 0.1);
     border-radius: 15px;
-    padding: 20px;
-    margin: 0 15px;
+    padding: 20px 25px;
     backdrop-filter: blur(10px);
     border: 1px solid rgba(255, 255, 255, 0.2);
     transition: all 0.3s ease;
+    min-width: 140px;
+    text-align: center;
 }
 
 .stat-item-dark {
@@ -579,10 +579,10 @@
 
 .benefit-item {
     padding: 30px 20px;
-    background: rgba(255, 255, 255, 0.15);
+    background: rgba(255, 255, 255, 0.95);
     border-radius: 20px;
     backdrop-filter: blur(15px);
-    border: 1px solid rgba(255, 255, 255, 0.2);
+    border: 1px solid rgba(255, 255, 255, 0.8);
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
     transition: all 0.4s ease;
     text-align: center;
@@ -605,8 +605,8 @@
 .benefit-item:hover {
     transform: translateY(-10px);
     box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
-    background: rgba(255, 255, 255, 0.25);
-    border-color: rgba(255, 255, 255, 0.4);
+    background: rgba(255, 255, 255, 1);
+    border-color: rgba(102, 126, 234, 0.5);
 }
 
 .benefit-item > * {
@@ -617,42 +617,44 @@
 .benefit-item i {
     font-size: 3rem;
     margin-bottom: 1.5rem;
-    color: #ffffff;
-    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
+    color: #667eea;
+    text-shadow: none;
     transition: all 0.3s ease;
 }
 
 .benefit-item:hover i {
     transform: scale(1.1);
-    color: #f8f9fa;
+    color: #5a67d8;
 }
 
 .benefit-item h5 {
-    color: #ffffff;
+    color: #2d3748;
     margin-bottom: 1rem;
-    font-weight: 600;
-    font-size: 1.25rem;
-    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
+    font-weight: 700;
+    font-size: 1.3rem;
+    text-shadow: none;
     letter-spacing: 0.5px;
 }
 
 .benefit-item p {
-    color: #f8f9fa !important;
-    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
+    color: #4a5568 !important;
+    text-shadow: none;
     font-size: 0.9rem;
     line-height: 1.5;
     margin-bottom: 0;
+    font-weight: 500;
 }
 
 /* Responsive */
 @media (max-width: 768px) {
-    .career-stats .row {
+    .career-stats .stats-row {
         justify-content: center;
+        gap: 15px;
     }
     
     .stat-item {
-        margin: 10px 5px;
-        padding: 15px;
+        padding: 15px 20px;
+        min-width: 120px;
     }
     
     .stat-number {
@@ -699,6 +701,31 @@
         font-size: 0.85rem;
     }
 }
+
+/* Custom button styles */
+.btn-dark.btn-lg {
+    transition: all 0.3s ease;
+    box-shadow: 0 4px 15px rgba(45, 55, 72, 0.3);
+}
+
+.btn-dark.btn-lg:hover {
+    background: rgba(45, 55, 72, 1) !important;
+    border-color: rgba(45, 55, 72, 1) !important;
+    transform: translateY(-2px);
+    box-shadow: 0 8px 25px rgba(45, 55, 72, 0.4);
+}
+
+.btn-outline-dark.btn-lg {
+    transition: all 0.3s ease;
+    box-shadow: 0 4px 15px rgba(45, 55, 72, 0.2);
+}
+
+.btn-outline-dark.btn-lg:hover {
+    background: rgba(45, 55, 72, 0.9) !important;
+    border-color: rgba(45, 55, 72, 0.9) !important;
+    color: white !important;
+    transform: translateY(-2px);
+    box-shadow: 0 8px 25px rgba(45, 55, 72, 0.3);
 }
 </style>
 {% endblock %}