From ce76c093d1042333500de322c17f9a617b2270ee Mon Sep 17 00:00:00 2001 From: NikDizell Date: Sun, 8 Mar 2026 02:48:05 +0300 Subject: [PATCH] =?UTF-8?q?=D0=A1=D0=BE=D0=B1=D1=80=D0=B0=D0=BB=20=D1=81?= =?UTF-8?q?=D1=82=D0=B0=D1=82=D0=B8=D1=87=D0=B5=D1=81=D0=BA=D0=B8=D0=B5=20?= =?UTF-8?q?=D1=84=D0=B0=D0=B9=D0=BB=D1=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- static/programmer/css/styles.css | 183 ++++++++++++++++++++----------- 1 file changed, 117 insertions(+), 66 deletions(-) diff --git a/static/programmer/css/styles.css b/static/programmer/css/styles.css index c44f85a..356160e 100644 --- a/static/programmer/css/styles.css +++ b/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; /* для тёмной темы, но оставим */ - /* --footer-bg: linear-gradient(135deg, var(--text-primary) 0%, #2D3748 100%);*/ + --border-dark: #252A3A; --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; - height: auto !important; +/* + * FIX: Replaced !important overrides with a more specific selector. + * 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; - } } \ No newline at end of file