Исправил стили с клауд
This commit is contained in:
NikDizell
parent
c95f27696b
commit
1d55ab11e6
@ -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;
|
||||
@ -1638,10 +1696,3 @@ body {
|
||||
font-size: 1rem;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.cookie-bottom {
|
||||
max-width: 90%;
|
||||
bottom: 10px;
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user