Global-2026-07-13
This commit is contained in:
Dekart Deploy Bot
parent
b484d7ca19
commit
a7caf5b935
14
.gitignore
vendored
14
.gitignore
vendored
@ -129,3 +129,17 @@ data/
|
||||
llms.txt
|
||||
test.php
|
||||
.agents/
|
||||
|
||||
# === Audit files — dev-мусор (не в git) ===
|
||||
*.audit.txt
|
||||
spacing.txt
|
||||
typography.txt
|
||||
color-tokens.txt
|
||||
selectors.txt
|
||||
*.audit.md
|
||||
dsg.txt
|
||||
colors.txt
|
||||
components.txt
|
||||
selectors.txt
|
||||
spacing.txt
|
||||
typography.txt
|
||||
|
||||
@ -6,14 +6,14 @@
|
||||
/* ════════════════════════════════════════════ */
|
||||
/* DS-система: токены (из design.txt) */
|
||||
/* ════════════════════════════════════════════ */
|
||||
/* PRIMARY */
|
||||
--color-primary: #7C3AED;
|
||||
--color-primary-dark: #6D28D9;
|
||||
--color-primary-light: #F5F3FF;
|
||||
--color-primary-hover: #D6652E; /* CTA hover — оранж оттенок, как на /otzyvy/ */
|
||||
/* SECONDARY */
|
||||
--color-secondary: #E8753A;
|
||||
--color-secondary-dark: #D6652E;
|
||||
/* PRIMARY — warm blue: trust + professionalism */
|
||||
--color-primary: #2563EB;
|
||||
--color-primary-dark: #1D4ED8;
|
||||
--color-primary-light: #EFF6FF;
|
||||
--color-primary-hover: #1E40AF;
|
||||
/* SECONDARY — amber accent: warmth + urgency for CTA */
|
||||
--color-secondary: #F59E0B;
|
||||
--color-secondary-dark: #D97706;
|
||||
/* ПОВЕРХНОСТИ */
|
||||
--color-bg: #FFFFFF;
|
||||
--color-bg-alt: #F8F4F0;
|
||||
@ -21,19 +21,20 @@
|
||||
/* ТЕКСТ */
|
||||
--color-text: #0F172A;
|
||||
--color-text-muted: #475569;
|
||||
--color-text-light: #94A3B8;
|
||||
--color-text-light: #64748B; /* 4.5:1 on white (WCAG AA) — was #94A3B8 (2.7:1 fail) */
|
||||
--color-text-on-dark: #FFFFFF;
|
||||
/* ГРАНИЦЫ */
|
||||
--color-border: #E2E8F0;
|
||||
--color-border-warm: #E7DECF;
|
||||
/* СТАТУСЫ */
|
||||
--color-success: #059669;
|
||||
--color-warning: #D97706;
|
||||
--color-rating: #F59E0B;
|
||||
--color-success: #059669;
|
||||
--color-warning: #D97706;
|
||||
--color-danger: #DC2626;
|
||||
--color-rating: #F59E0B;
|
||||
--color-accent: #FFD43E; /* акцентный цвет (телефон, бейджи) — как на /otzyvy/ */
|
||||
--color-focus-ring: rgba(124,58,237,0.40);
|
||||
/* ШРИФТЫ */
|
||||
--font-display: "Oswald", "Arial Narrow", sans-serif;
|
||||
--color-focus-ring: rgba(37,99,235,0.40);
|
||||
/* ШРИФТЫ */
|
||||
--font-display: "Plus Jakarta Sans", "Inter", "Oswald", sans-serif;
|
||||
--font-body: "Inter", "Roboto", -apple-system, sans-serif;
|
||||
/* ТИПОГРАФИКА (modular scale 1.25) */
|
||||
--text-h1: 48px; --text-h2: 31px; --text-h3: 25px; --text-h4: 20px;
|
||||
@ -52,11 +53,67 @@
|
||||
/* АНИМАЦИИ */
|
||||
--transition-fast: 200ms ease-out;
|
||||
--transition-base: 300ms ease-out;
|
||||
--focus-ring: 0 0 0 4px var(--color-focus-ring);
|
||||
/* Z-INDEX */
|
||||
--z-index-sticky: 100; --z-index-header: 200; --z-index-fixed: 300;
|
||||
--z-index-overlay: 400; --z-index-modal: 500;
|
||||
}
|
||||
--focus-ring: 0 0 0 4px var(--color-focus-ring);
|
||||
/* Z-INDEX */
|
||||
--z-index-sticky: 100; --z-index-header: 200; --z-index-fixed: 300;
|
||||
--z-index-overlay: 400; --z-index-modal: 500;
|
||||
|
||||
/* ════════════════════════════════════════════ */
|
||||
/* BENTO + CARD — extended design tokens */
|
||||
/* Merged from legacy redesign 2026 :root */
|
||||
/* Only UNIQUE tokens; no duplicates */
|
||||
/* ════════════════════════════════════════════ */
|
||||
/* Accent purple scale (extends --color-primary) */
|
||||
--accent-light: #F5F3FF;
|
||||
--accent-100: #EDE9FE;
|
||||
--accent-200: #DDD6FE;
|
||||
--accent-500: #8B5CF6;
|
||||
--accent-700: #5B21B6;
|
||||
/* Green CTA palette */
|
||||
--green-cta: #059669;
|
||||
--green-hover: #047857;
|
||||
--green-light: #D1FAE5;
|
||||
/* Surface aliases */
|
||||
--bg-soft: #F8FAFC;
|
||||
--bg-bento-alt: #F1F5F9;
|
||||
/* Text alias */
|
||||
--text-tertiary: #94A3B8;
|
||||
/* Extra shadow tier */
|
||||
--shadow-xl: 0 20px 50px rgba(0,0,0,0.15);
|
||||
/* Extra radius tier */
|
||||
--radius-xl: 24px;
|
||||
/* Card component tokens (shared lw-*) */
|
||||
--card-radius: 20px;
|
||||
--card-shadow: 0 2px 16px rgba(0,0,0,0.06);
|
||||
--card-shadow-hover: 0 8px 32px rgba(0,0,0,0.1);
|
||||
|
||||
/* ════════════════════════════════════════════ */
|
||||
/* PAGE-SPECIFIC COLOR TOKENS */
|
||||
/* Used by podgotovka-k-shkole.css */
|
||||
/* ════════════════════════════════════════════ */
|
||||
/* Slate scale */
|
||||
--color-slate-800: #1E293B;
|
||||
--color-slate-700: #334155;
|
||||
--color-slate-300: #CBD5E1;
|
||||
/* Pink scale */
|
||||
--color-pink: #EC4899;
|
||||
--color-pink-dark: #DB2777;
|
||||
--color-pink-light: #F472B6;
|
||||
/* Purple variants */
|
||||
--color-purple-light: #C084FC;
|
||||
/* Emerald variants */
|
||||
--color-emerald-700: #15803D;
|
||||
--color-emerald-800: #166534;
|
||||
/* Green success */
|
||||
--color-green-600: #16A34A;
|
||||
--color-success-light: #F0FDF4;
|
||||
/* Warm accent */
|
||||
--color-orange: #F97316;
|
||||
--color-teal: #14B8A6;
|
||||
/* Indigo (timer background) */
|
||||
--color-indigo-950: #1E1B4B;
|
||||
--color-indigo-900: #312E81;
|
||||
}
|
||||
|
||||
html {
|
||||
height: auto;
|
||||
@ -104,8 +161,8 @@ html {
|
||||
overflow: hidden;
|
||||
background: var(--color-bg-dark);
|
||||
background-image:
|
||||
radial-gradient(ellipse 80% 70% at 20% 40%, rgba(232,117,58,0.08) 0%, transparent 70%),
|
||||
radial-gradient(ellipse 60% 60% at 80% 60%, rgba(59,178,160,0.06) 0%, transparent 70%);
|
||||
radial-gradient(ellipse 80% 70% at 20% 40%, rgba(124,58,237,0.08) 0%, transparent 70%),
|
||||
radial-gradient(ellipse 60% 60% at 80% 60%, rgba(168,85,247,0.06) 0%, transparent 70%);
|
||||
}
|
||||
/* Decorative accent line */
|
||||
.ds-hero::after {
|
||||
@ -118,7 +175,7 @@ html {
|
||||
.ds-hero::before {
|
||||
content: ''; position: absolute; top: -120px; right: -120px;
|
||||
width: 360px; height: 360px; border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(232,117,58,0.06) 0%, transparent 70%);
|
||||
background: radial-gradient(circle, rgba(124,58,237,0.06) 0%, transparent 70%);
|
||||
pointer-events: none;
|
||||
}
|
||||
.ds-hero__inner {
|
||||
@ -194,21 +251,23 @@ html {
|
||||
font-size: 13px; color: rgba(255,255,255,0.65);
|
||||
}
|
||||
/* CTA — цвет primary (фиолетовый) как на /otzyvy/ */
|
||||
.ds-hero__cta-btn {
|
||||
display: inline-flex; align-items: center; gap: 8px;
|
||||
font-family: var(--font-body); font-weight: 600;
|
||||
background: var(--color-primary); color: #fff;
|
||||
border: none; border-radius: 12px; cursor: pointer;
|
||||
text-decoration: none; padding: 16px 40px;
|
||||
font-size: 17px; width: fit-content;
|
||||
box-shadow: 0 4px 16px rgba(232,117,58,0.35);
|
||||
transition: background var(--transition-fast), transform var(--transition-fast),
|
||||
.ds-hero__cta-btn {
|
||||
display: inline-flex; align-items: center; gap: 8px;
|
||||
font-family: var(--font-body); font-weight: 600;
|
||||
background: var(--color-primary); color: #fff;
|
||||
border: none; border-radius: 12px; cursor: pointer;
|
||||
text-decoration: none; padding: 16px 40px;
|
||||
font-size: 17px; width: fit-content;
|
||||
box-shadow: 0 4px 16px rgba(124,58,237,0.35);
|
||||
transition: background var(--transition-fast), transform var(--transition-fast),
|
||||
box-shadow var(--transition-fast);
|
||||
}
|
||||
margin-top: 14px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.ds-hero__cta-btn:hover {
|
||||
background: var(--color-primary-hover);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 24px rgba(232,117,58,0.45);
|
||||
box-shadow: 0 8px 24px rgba(124,58,237,0.45);
|
||||
}
|
||||
.ds-hero__cta-btn:active { transform: translateY(0); }
|
||||
.ds-hero__cta-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
|
||||
@ -230,7 +289,7 @@ html {
|
||||
position: absolute;
|
||||
width: 420px; height: 420px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(232,117,58,0.12) 0%, rgba(59,178,160,0.06) 30%, transparent 65%);
|
||||
background: radial-gradient(circle, rgba(124,58,237,0.12) 0%, rgba(168,85,247,0.06) 30%, transparent 65%);
|
||||
top: 50%; left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
pointer-events: none;
|
||||
@ -239,7 +298,7 @@ html {
|
||||
.ds-hero__photo-frame {
|
||||
position: relative; width: 320px; height: 320px; border-radius: 50%; overflow: hidden;
|
||||
box-shadow:
|
||||
0 20px 60px rgba(232,117,58,0.15),
|
||||
0 20px 60px rgba(124,58,237,0.15),
|
||||
0 8px 24px rgba(0,0,0,0.2),
|
||||
inset 0 0 0 4px rgba(255,255,255,0.6);
|
||||
border: 6px solid rgba(255,255,255,0.8);
|
||||
@ -248,7 +307,7 @@ html {
|
||||
.ds-hero__photo { width: 100%; height: 100%; object-fit: cover; display: block; }
|
||||
.ds-hero__photo-ring {
|
||||
position: absolute; width: 360px; height: 360px; border-radius: 50%;
|
||||
border: 2px solid rgba(232,117,58,0.12);
|
||||
border: 2px solid rgba(124,58,237,0.15);
|
||||
top: 50%; left: 50%; transform: translate(-50%, -50%);
|
||||
pointer-events: none;
|
||||
animation: dsRingPulse 4s ease-in-out infinite;
|
||||
@ -272,9 +331,9 @@ html {
|
||||
}
|
||||
.ds-hero__float--2 {
|
||||
bottom: 22%; left: -24px; animation-delay: 1.2s;
|
||||
background: linear-gradient(135deg, rgba(232,117,58,0.20), rgba(232,117,58,0.08));
|
||||
color: #FFD4B8;
|
||||
border: 1px solid rgba(232,117,58,0.15);
|
||||
background: linear-gradient(135deg, rgba(124,58,237,0.20), rgba(168,85,247,0.08));
|
||||
color: #D8C8FF;
|
||||
border: 1px solid rgba(124,58,237,0.15);
|
||||
}
|
||||
.ds-hero__float--3 {
|
||||
bottom: 4%; right: 6%; animation-delay: 2.4s;
|
||||
@ -294,7 +353,7 @@ html {
|
||||
position: absolute; border-radius: 50%; pointer-events: none; z-index: 1;
|
||||
}
|
||||
.ds-hero__deco--1 {
|
||||
width: 40px; height: 40px; background: rgba(232,117,58,0.12);
|
||||
width: 40px; height: 40px; background: rgba(124,58,237,0.12);
|
||||
top: 12%; left: 2%;
|
||||
animation: dsDecoFloat 6s ease-in-out infinite;
|
||||
}
|
||||
@ -304,7 +363,7 @@ html {
|
||||
animation: dsDecoFloat 8s ease-in-out infinite 1s;
|
||||
}
|
||||
.ds-hero__deco--3 {
|
||||
width: 16px; height: 16px; background: rgba(232,117,58,0.16);
|
||||
width: 16px; height: 16px; background: rgba(124,58,237,0.16);
|
||||
top: 48%; left: -8px;
|
||||
animation: dsDecoFloat 7s ease-in-out infinite 2s;
|
||||
}
|
||||
@ -322,7 +381,7 @@ html {
|
||||
animation: dsSparkleFloat 6s ease-in-out infinite;
|
||||
background: rgba(255,255,255,0.3);
|
||||
}
|
||||
.ds-hero__sparkles .ds-hero__sparkle:nth-child(1) { top: 15%; left: 10%; width: 4px; height: 4px; animation-delay: 0s; background: #E8753A; box-shadow: 0 0 8px rgba(232,117,58,0.4); }
|
||||
.ds-hero__sparkles .ds-hero__sparkle:nth-child(1) { top: 15%; left: 10%; width: 4px; height: 4px; animation-delay: 0s; background: #A855F7; box-shadow: 0 0 8px rgba(168,85,247,0.4); }
|
||||
.ds-hero__sparkles .ds-hero__sparkle:nth-child(2) { top: 30%; right: 18%; width: 6px; height: 6px; animation-delay: 1.2s; }
|
||||
.ds-hero__sparkles .ds-hero__sparkle:nth-child(3) { bottom: 35%; left: 5%; width: 3px; height: 3px; animation-delay: 2s; }
|
||||
.ds-hero__sparkles .ds-hero__sparkle:nth-child(4) { top: 55%; right: 8%; width: 5px; height: 5px; animation-delay: 0.8s; }
|
||||
@ -368,6 +427,7 @@ html {
|
||||
.ds-hero__float--3 { bottom: 2%; right: 5%; font-size: 12px; padding: 6px 14px; }
|
||||
.ds-hero__float--4 { display: none; }
|
||||
.ds-hero__h1 { font-size: 32px; }
|
||||
.ds-hero__cta-btn { margin-top: 16px; }
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.ds-hero__visual { display: none; }
|
||||
@ -381,13 +441,10 @@ html {
|
||||
}
|
||||
.ds-hero__metric-number { font-size: clamp(22px, 6vw, 28px); }
|
||||
.ds-hero__metric-label { font-size: 10px; overflow-wrap: break-word; word-break: break-word; hyphens: auto; }
|
||||
.ds-hero__cta-btn { width: 100%; justify-content: center; }
|
||||
.ds-hero__cta-btn { width: 100%; justify-content: center; margin-top: 20px; }
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
.ds-hero__h1 { font-size: 26px; }
|
||||
}
|
||||
@media (max-width: 375px) {
|
||||
.ds-hero__h1 { font-size: 22px; }
|
||||
.ds-hero__metrics { gap: 6px; }
|
||||
.ds-hero__metric { padding: 10px 8px; }
|
||||
.ds-hero__metric-number { font-size: 20px; }
|
||||
@ -10058,57 +10115,6 @@ footer a:hover,
|
||||
|
||||
/* end mobile= */
|
||||
|
||||
/* ═══════════════════════════════════════════════════
|
||||
🎯 REDESIGN 2026 — Bento Grid + Mobile-First CRO
|
||||
═══════════════════════════════════════════════════ */
|
||||
|
||||
/* ── 1. Новая цветовая палитра ── */
|
||||
:root {
|
||||
--accent: #7C3AED;
|
||||
--accent-hover: #6D28D9;
|
||||
--accent-light: #F5F3FF;
|
||||
--accent-50: #F5F3FF;
|
||||
--accent-100: #EDE9FE;
|
||||
--accent-200: #DDD6FE;
|
||||
--accent-500: #8B5CF6;
|
||||
--accent-700: #5B21B6;
|
||||
|
||||
--green-cta: #059669;
|
||||
--green-hover: #047857;
|
||||
--green-light: #D1FAE5;
|
||||
|
||||
--bg-primary: #FFFFFF;
|
||||
--bg-soft: #F8FAFC;
|
||||
--bg-card: #FFFFFF;
|
||||
--bg-bento-alt: #F1F5F9;
|
||||
|
||||
--text-primary: #0F172A;
|
||||
--text-secondary: #475569;
|
||||
--text-tertiary: #94A3B8;
|
||||
|
||||
--shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
|
||||
--shadow-md: 0 4px 12px rgba(0,0,0,0.08);
|
||||
--shadow-lg: 0 10px 30px rgba(0,0,0,0.1);
|
||||
--shadow-xl: 0 20px 50px rgba(0,0,0,0.15);
|
||||
|
||||
--radius-sm: 8px;
|
||||
--radius-md: 12px;
|
||||
--radius-lg: 16px;
|
||||
--radius-xl: 20px;
|
||||
--radius-pill: 28px;
|
||||
|
||||
/* ── Card component (shared lw-*) ── */
|
||||
--color-primary: #E8753A;
|
||||
--color-bg: #FFFFFF;
|
||||
--color-text-muted: #5A6B6D;
|
||||
--color-text-light: #8A9A9D;
|
||||
--card-radius: 20px;
|
||||
--card-shadow: 0 2px 16px rgba(0,0,0,0.06);
|
||||
--card-shadow-hover: 0 8px 32px rgba(0,0,0,0.1);
|
||||
--transition-fast: 0.2s ease;
|
||||
--transition-normal: 0.3s ease;
|
||||
}
|
||||
|
||||
/* ── 2. Bento Grid System ── */
|
||||
.bento {
|
||||
display: grid;
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -14,7 +14,7 @@ if ( ! defined( 'ABSPATH' ) ) {
|
||||
<div class="bento__full bento-card bento-card--highlight-results section-header--centered">
|
||||
<span class="bento-label bento-label--light">Результаты наших учеников</span>
|
||||
<h2 class="bento-h2 bento-h2--light">К чему мы приводим детей</h2>
|
||||
<p class="bento-p bento-p--light">95% наших выпускников поступают в школы и лицеи Щёлкова без стресса. Первые результаты — через 3 недели.</p>
|
||||
<p class="bento-p">95% наших выпускников поступают в школы и лицеи Щёлкова без стресса. Первые результаты — через 3 недели.</p>
|
||||
<div class="results-grid">
|
||||
<div class="result-item">
|
||||
<span class="result-item__value">95%</span>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user