Исправил стили с клауд

programmer/static/programmer/css/styles.css

@@ -28,8 +28,22 @@
     --radius-md: 12px;
     --radius-lg: 16px;
     --radius-xl: 20px;
-    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+
-    --transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+    /*
+     * FIX: Replaced "all" with explicit properties.
+     * "transition: all" animates every CSS property on every change,
+     * including expensive layout properties. Explicit properties are
+     * cheaper for the browser compositor.
+     */
+    --transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+                  box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+                  border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+                  color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+                  background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+                  opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    --transition-slow: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
+                       box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1),
+                       border-color 0.5s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 /* Светлая тема (по умолчанию) */
@@ -40,11 +54,11 @@ body {
     --bg-primary: #FFFFFF;
     --bg-secondary: #F7FAFC;
     --bg-tertiary: #EDF2F7;
-    --bg-card: #FFFFFF;  /* в светлой теме карты светлые */
+    --bg-card: #FFFFFF;
+    --bg-header: rgba(255, 255, 255, 0.88);   /* FIX: semi-transparent for backdrop-filter */
     --border-light: #E2E8F0;
     --border-medium: #CBD5E0;
-    --border-dark: #252A3A;  /* для тёмной темы, но оставим */
+    --border-dark: #252A3A;
-    /* --footer-bg: linear-gradient(135deg, var(--text-primary) 0%, #2D3748 100%);*/
     --footer-bg: linear-gradient(135deg, #F7FAFC 0%, #E2E8F0 100%);
     --mobile-menu-bg: #FFFFFF;
     --mobile-menu-text: #1A1F36;
@@ -60,6 +74,7 @@ body.theme-dark {
     --bg-secondary: #151925;
     --bg-tertiary: #0F131F;
     --bg-card: #222738;
+    --bg-header: rgba(26, 31, 46, 0.88);      /* FIX: semi-transparent for backdrop-filter */
     --border-light: #2D3447;
     --border-medium: #3A4158;
     --border-dark: #252A3A;
@@ -92,8 +107,12 @@ body {
 
 /* ===== HEADER ===== */
 .header {
-    background: rgba(var(--bg-primary-rgb), 0.95); /* если нужно, но пока так */
+    /*
-    background: var(--bg-primary);
+     * FIX: Removed dead rgba(var(--bg-primary-rgb), 0.95) line — that variable
+     * was never defined. Now using --bg-header which is semi-transparent,
+     * making backdrop-filter: blur() actually visible.
+     */
+    background: var(--bg-header);
     border-bottom: 1px solid var(--border-dark);
     box-shadow: var(--shadow-lg);
     position: sticky;
@@ -147,7 +166,7 @@ body {
     flex-wrap: wrap;
 }
 
- .nav-actions {
+.nav-actions {
     display: flex;
     align-items: center;
     gap: 1rem;
@@ -204,13 +223,12 @@ body {
 .telegram-btn:hover {
     transform: translateY(-2px);
     box-shadow: var(--shadow-lg);
-    background: var(--gradient-primary);
 }
 
 /* ===== HERO ===== */
 .hero-section {
     text-align: center;
-    padding: 2rem 0 2rem;
+    padding: 2rem 0;
     margin-bottom: 3rem;
     position: relative;
 }
@@ -236,7 +254,10 @@ body {
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
-    text-shadow: 0 4px 20px rgba(255, 107, 0, 0.3);
+    /*
+     * FIX: Removed text-shadow. When -webkit-text-fill-color is transparent,
+     * text-shadow has nothing to attach to and renders nothing.
+     */
 }
 
 .hero-subtitle {
@@ -437,8 +458,12 @@ body {
     background: var(--bg-card);
     border-radius: var(--radius-xl);
     box-shadow: var(--shadow-lg);
-    border-left: 4px solid var(--primary);
+    /*
+     * FIX: border shorthand must come BEFORE border-left, otherwise
+     * the shorthand resets border-left and the orange accent disappears.
+     */
     border: 1px solid var(--border-light);
+    border-left: 4px solid var(--primary);
 }
 
 .about-section h3 {
@@ -486,10 +511,10 @@ body {
 
 .skill-category li {
     padding: 0.5rem 0;
+    padding-left: 1.5rem;
     color: var(--text-secondary);
     border-bottom: 1px solid var(--border-dark);
     position: relative;
-    padding-left: 1.5rem;
 }
 
 .skill-category li:before {
@@ -518,9 +543,13 @@ body {
     background: var(--bg-card);
     border-radius: var(--radius-xl);
     box-shadow: var(--shadow-lg);
-    border-left: 4px solid var(--secondary);
     transition: var(--transition);
+    /*
+     * FIX: Same border-left override bug. border shorthand first,
+     * then border-left so the blue accent is actually rendered.
+     */
     border: 1px solid var(--border-light);
+    border-left: 4px solid var(--secondary);
 }
 
 .competence-item:hover {
@@ -621,7 +650,6 @@ body {
     font-weight: 600;
 }
 
-/* Стили для страницы отзывов */
 .recall-item {
     display: flex;
     flex-direction: column;
@@ -701,7 +729,7 @@ body {
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
-    text-shadow: 0 4px 20px rgba(255, 107, 0, 0.3);
+    /* FIX: Removed text-shadow — has no effect when fill is transparent */
 }
 
 .page-subtitle {
@@ -716,7 +744,7 @@ body {
 .footer {
     background: var(--footer-bg);
     color: var(--text-primary);
-    padding: 1rem 0 0rem;
+    padding: 1rem 0 0;
     margin-top: 3rem;
     position: relative;
     border-top: 1px solid var(--border-dark);
@@ -773,7 +801,14 @@ body {
 }
 
 /* ===== ANIMATIONS ===== */
-@keyframes fadeInUp {
+/*
+ * FIX: Renamed keyframes to be unambiguous:
+ *   fadeInUp  → kf-fade-in-up  (used by .fade-in utility)
+ *   fadeIn    → kf-modal-fade  (used by .modal)
+ *   slideIn   → kf-modal-slide (used by .modal-content)
+ * Previously "fadeIn" and "fadeInUp" were easily confused.
+ */
+@keyframes kf-fade-in-up {
     from {
         opacity: 0;
         transform: translateY(40px);
@@ -795,8 +830,29 @@ body {
     100% { background-position: 0% 50%; }
 }
 
+@keyframes kf-modal-fade {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+@keyframes kf-modal-slide {
+    from {
+        opacity: 0;
+        transform: translateY(-50px) scale(0.9);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
+}
+
+@keyframes slideUpFade {
+    from { opacity: 0; transform: translate(-50%, 20px); }
+    to { opacity: 1; transform: translate(-50%, 0); }
+}
+
 .fade-in {
-    animation: fadeInUp 0.8s ease-out;
+    animation: kf-fade-in-up 0.8s ease-out;
 }
 
 .float {
@@ -833,12 +889,18 @@ body {
     border: 1px solid var(--border-light);
     margin-bottom: 2rem;
     position: relative;
-    overflow: visible !important;
+    overflow: visible;
 }
 
-.content-card img {
+/*
-    max-width: 100% !important;
+ * FIX: Replaced !important overrides with a more specific selector.
-    height: auto !important;
+ * This targets CKEditor-generated img tags without the need for !important,
+ * resolving the underlying specificity conflict cleanly.
+ */
+.content-card img,
+.content-card .ck-content img {
+    max-width: 100%;
+    height: auto;
 }
 
 .content-card figure.image {
@@ -918,26 +980,30 @@ body {
     line-height: 1.5;
 }
 
-/* ===== MODAL ENHANCEMENTS ===== */
+/* ===== MODAL ===== */
 .modal {
     display: none;
     position: fixed;
-    z-index: 1000;
+    /*
+     * FIX: z-index raised to 1100 to sit above the mobile menu (1000).
+     * Previously both were 1000, causing stacking conflicts when
+     * a modal opened while the mobile menu was open.
+     */
+    z-index: 1100;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(15, 19, 31, 0.95);
     backdrop-filter: blur(10px);
-    animation: fadeIn 0.3s ease;
+    animation: kf-modal-fade 0.3s ease;
 }
-
 .modal-content {
     background: var(--bg-card);
     margin: 2% auto;
     border-radius: var(--radius-xl);
     box-shadow: var(--shadow-xl);
-    animation: slideIn 0.3s ease;
+    animation: kf-modal-slide 0.3s ease;
     position: relative;
     max-width: 100%;
     max-height: 90vh;
@@ -991,7 +1057,6 @@ body {
     transform: rotate(90deg);
 }
 
-/* Стили для модального окна с изображением */
 .modal-image {
     max-width: 90vw;
     max-height: 80vh;
@@ -1001,7 +1066,7 @@ body {
     margin: 0 auto;
     border-radius: var(--radius-md);
     box-shadow: var(--shadow-xl);
-    transition: all 0.3s ease;
+    transition: var(--transition);
 }
 
 .modal-content.image-modal {
@@ -1020,22 +1085,6 @@ body {
     background: transparent;
 }
 
-@keyframes fadeIn {
-    from { opacity: 0; }
-    to { opacity: 1; }
-}
-
-@keyframes slideIn {
-    from {
-        opacity: 0;
-        transform: translateY(-50px) scale(0.9);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0) scale(1);
-    }
-}
-
 /* ===== SOLUTION PAGE STYLES ===== */
 .solution-accordion {
     margin: 2rem 0;
@@ -1133,7 +1182,7 @@ body {
     border: 1px solid var(--border-light);
 }
 
-/* ===== THEME SWITCHER STYLES ===== */
+/* ===== THEME SWITCHER ===== */
 .theme-switcher {
     display: flex;
     align-items: center;
@@ -1153,7 +1202,8 @@ body {
     border: 2px solid var(--border-light);
     border-radius: 25px;
     cursor: pointer;
-    transition: all 0.3s ease;
+    /* FIX: replaced hardcoded "all 0.3s ease" with design token */
+    transition: var(--transition);
     padding: 2px;
     box-shadow: var(--shadow-sm);
 }
@@ -1169,7 +1219,8 @@ body {
     height: 24px;
     background: var(--primary);
     border-radius: 50%;
-    transition: all 0.3s ease;
+    /* FIX: replaced hardcoded "all 0.3s ease" with design token */
+    transition: var(--transition);
     left: 2px;
     z-index: 2;
 }
@@ -1182,7 +1233,8 @@ body {
 .theme-icon {
     position: absolute;
     font-size: 12px;
-    transition: all 0.3s ease;
+    /* FIX: replaced hardcoded "all 0.3s ease" with design token */
+    transition: var(--transition);
     z-index: 1;
 }
 
@@ -1216,7 +1268,8 @@ body {
     cursor: pointer;
     padding: 0.5rem;
     border-radius: 4px;
-    transition: all 0.3s ease;
+    /* FIX: replaced hardcoded "all 0.3s ease" with design token */
+    transition: var(--transition);
 }
 
 .mobile-menu-btn:hover {
@@ -1242,7 +1295,10 @@ body {
     height: 100%;
     background: var(--mobile-menu-bg);
     box-shadow: -5px 0 15px rgba(0, 0, 0, 0.3);
-    transition: right 0.3s ease;
+    /* FIX: replaced hardcoded "right 0.3s ease" — keep explicit here since
+       we're only transitioning the right property, which is intentional */
+    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    /* FIX: z-index kept at 1000, below modal (1100) */
     z-index: 1000;
     overflow-y: auto;
     padding: 2rem 1.5rem;
@@ -1273,7 +1329,8 @@ body {
     cursor: pointer;
     padding: 0.5rem;
     border-radius: 4px;
-    transition: all 0.3s ease;
+    /* FIX: replaced hardcoded "all 0.3s ease" with design token */
+    transition: var(--transition);
 }
 
 .mobile-menu-close:hover {
@@ -1295,7 +1352,8 @@ body {
     color: var(--mobile-menu-text);
     text-decoration: none;
     border-radius: 8px;
-    transition: all 0.3s ease;
+    /* FIX: replaced hardcoded "all 0.3s ease" with design token */
+    transition: var(--transition);
     font-weight: 500;
 }
 
@@ -1577,6 +1635,11 @@ body {
     .modal-body.image-modal-body {
         padding: 0.5rem;
     }
+
+    .cookie-bottom {
+        max-width: 90%;
+        bottom: 10px;
+    }
 }
 
 @media (min-width: 769px) {
@@ -1604,11 +1667,6 @@ body {
     animation: slideUpFade 0.3s ease;
 }
 
-@keyframes slideUpFade {
-    from { opacity: 0; transform: translate(-50%, 20px); }
-    to { opacity: 1; transform: translate(-50%, 0); }
-}
-
 .cookie-bottom-content {
     padding: 1.5rem;
     text-align: center;
@@ -1637,11 +1695,4 @@ body {
     padding: 0.75rem;
     font-size: 1rem;
     border-radius: 8px;
-}
-
-@media (max-width: 480px) {
-    .cookie-bottom {
-        max-width: 90%;
-        bottom: 10px;
-    }
 }