From 22124a36b183c8d9d260ed602007043b3a011e04 Mon Sep 17 00:00:00 2001 From: Dekart Deploy Bot Date: Tue, 7 Jul 2026 12:25:31 +0000 Subject: [PATCH] =?UTF-8?q?=D0=9F=D0=9A=D0=A8=20=D0=B8=20=D0=B4=D0=BE?= =?UTF-8?q?=D1=83=D0=B3=D0=B8=D0=B5=20=D0=BF=D1=80=D0=B0=D0=B2=D0=BA=D0=B8?= =?UTF-8?q?=20(=D0=B5=D1=81=D1=82=D1=8C=20=D0=BE=D1=88=D0=B8=D0=B1=D0=BA?= =?UTF-8?q?=D0=B8)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- wp-content/test-write.tmp | 0 wp-content/themes/dekart/assets/css/main.css | 399 +++ .../dekart/assets/css/podgotovka-k-shkole.css | 1010 ++----- .../themes/dekart/assets/css/reviews-page.css | 5 +- wp-content/themes/dekart/assets/js/add.js | 52 +- wp-content/themes/dekart/footer.php | 85 +- wp-content/themes/dekart/functions.php | 10 +- wp-content/themes/dekart/header.php | 1 + .../dekart/page-podgotovka-k-shkole.php | 205 +- .../themes/dekart/podgotovka-k-shkole.css | 2549 ----------------- 10 files changed, 857 insertions(+), 3459 deletions(-) create mode 100644 wp-content/test-write.tmp delete mode 100644 wp-content/themes/dekart/podgotovka-k-shkole.css diff --git a/wp-content/test-write.tmp b/wp-content/test-write.tmp new file mode 100644 index 0000000..e69de29 diff --git a/wp-content/themes/dekart/assets/css/main.css b/wp-content/themes/dekart/assets/css/main.css index 2bafd70..c0f8fd2 100644 --- a/wp-content/themes/dekart/assets/css/main.css +++ b/wp-content/themes/dekart/assets/css/main.css @@ -2,12 +2,411 @@ --main-color: #BF568E; --main-blue: #006DB7; --main-yellow: #FFD43E; + + /* ════════════════════════════════════════════ */ + /* 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; + /* ПОВЕРХНОСТИ */ + --color-bg: #FFFFFF; + --color-bg-alt: #F8F4F0; + --color-bg-dark: #0F172A; + /* ТЕКСТ */ + --color-text: #0F172A; + --color-text-muted: #475569; + --color-text-light: #94A3B8; + --color-text-on-dark: #FFFFFF; + /* ГРАНИЦЫ */ + --color-border: #E2E8F0; + --color-border-warm: #E7DECF; + /* СТАТУСЫ */ + --color-success: #059669; + --color-warning: #D97706; + --color-rating: #F59E0B; + --color-accent: #FFD43E; /* акцентный цвет (телефон, бейджи) — как на /otzyvy/ */ + --color-focus-ring: rgba(124,58,237,0.40); + /* ШРИФТЫ */ + --font-display: "Oswald", "Arial Narrow", 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; + --text-body-lg: 20px; --text-body: 16px; --text-body-sm: 14px; + --text-caption: 13px; --text-stat: 61px; + /* ОТСТУПЫ (8px-шкала) */ + --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px; + --space-5: 32px; --space-6: 48px; --space-7: 64px; --space-8: 96px; + /* СКРУГЛЕНИЯ */ + --radius-sm: 12px; --radius-md: 20px; --radius-lg: 24px; + --radius-pill: 100px; --radius-photo: 16px; + /* ТЕНИ */ + --shadow-sm: 0 2px 12px rgba(15,23,42,0.06); + --shadow-md: 0 8px 24px rgba(15,23,42,0.10); + --shadow-lg: 0 16px 40px rgba(15,23,42,0.12); + /* АНИМАЦИИ */ + --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; } html { height: auto; } +/* ════════════════════════════════════════════ */ +/* DS-система: контейнер */ +/* ════════════════════════════════════════════ */ +.ds-container { + max-width: 1280px; margin: 0 auto; padding-inline: 16px; +} +@media (min-width: 768px) { .ds-container { padding-inline: 24px; } } +@media (min-width: 1024px) { .ds-container { padding-inline: 32px; } } +.ds-container--narrow { max-width: 960px; } + +/* ════════════════════════════════════════════ */ +/* DS-система: breadcrumbs */ +/* ════════════════════════════════════════════ */ +.ds-breadcrumbs { + display: flex; flex-wrap: wrap; gap: var(--space-1); + font-size: var(--text-body-sm); color: var(--color-text-muted); + padding-block: var(--space-3); max-width: 1280px; margin: 0 auto; + padding-inline: 16px; +} +.ds-breadcrumbs ol { + display: flex; flex-wrap: wrap; gap: var(--space-1); list-style: none; + padding: 0; margin: 0; +} +.ds-breadcrumbs a { color: var(--color-text-muted); text-decoration: none; } +.ds-breadcrumbs a:hover { color: var(--color-primary); } +.ds-breadcrumbs .last_item { color: var(--color-text); font-weight: 600; } +.ds-breadcrumbs li:not(:last-child)::after { + content: "/"; color: var(--color-text-light); margin-left: var(--space-1); +} +@media (min-width: 768px) { .ds-breadcrumbs { padding-inline: 24px; } } +@media (min-width: 1024px) { .ds-breadcrumbs { padding-inline: 32px; } } + +/* ════════════════════════════════════════════ */ +/* DS-система: Hero (тёмный + радиальные град.)*/ +/* Эталон — /otzyvy/ (reviews-hero) */ +/* ════════════════════════════════════════════ */ +.ds-hero { + position: relative; + padding: 60px 0; + 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%); +} +/* Decorative accent line */ +.ds-hero::after { + content: ''; position: absolute; bottom: 0; left: 0; right: 0; + height: 6px; + background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 50%, var(--color-primary) 100%); + opacity: 0.5; +} +/* Accent corner */ +.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%); + pointer-events: none; +} +.ds-hero__inner { + display: flex; flex-direction: row; gap: 40px; + align-items: center; + position: relative; z-index: 1; +} +/* ---- Content ---- */ +.ds-hero__content { + flex: 1; max-width: 600px; min-width: 0; +} +.ds-hero__address { + display: inline-flex; align-items: center; gap: var(--space-2); + padding: 6px 16px; background: rgba(255,255,255,0.12); + color: rgba(255,255,255,0.9); border-radius: var(--radius-pill); + font-size: var(--text-body-sm); font-weight: 600; width: fit-content; + margin-bottom: 14px; +} +.ds-hero__address svg { flex-shrink: 0; width: 16px; height: 16px; } +.ds-hero__h1 { + font-family: var(--font-display); + font-size: clamp(36px, 4.2vw, 52px); + font-weight: 500; + line-height: 1.12; + margin-bottom: 14px; + color: #fff; +} +.ds-hero__subtitle { + font-size: 18px; line-height: 1.55; + color: rgba(255,255,255,0.72); margin-bottom: 28px; + max-width: 500px; +} +/* Metrics — стиль «glass card» как на /otzyvy/ */ +.ds-hero__metrics { + display: flex; gap: 16px; margin-bottom: 32px; + flex-wrap: nowrap; +} +.ds-hero__metric { + background: rgba(255,255,255,0.08); + backdrop-filter: blur(4px); + -webkit-backdrop-filter: blur(4px); + border: 1px solid rgba(255,255,255,0.12); + border-radius: 14px; + padding: 14px 22px; + text-align: center; + min-width: 110px; + transition: background var(--transition-fast), transform var(--transition-fast); +} +.ds-hero__metric:hover { + background: rgba(255,255,255,0.13); + transform: translateY(-2px); +} +.ds-hero__metric-number { + font-family: var(--font-display); + font-size: clamp(28px, 3vw, 34px); + font-weight: 500; + color: var(--color-primary); + display: block; + line-height: 1.1; + margin-bottom: 2px; +} +.ds-hero__metric-label { + font-size: 13px; + color: rgba(255,255,255,0.7); + text-transform: uppercase; + letter-spacing: 0.04em; +} +.ds-hero__rating-badge { + display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; +} +.ds-hero__rating-stars { color: var(--color-rating); font-size: 18px; letter-spacing: 2px; } +.ds-hero__rating-text { + 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), + box-shadow var(--transition-fast); +} +.ds-hero__cta-btn:hover { + background: var(--color-primary-hover); + transform: translateY(-2px); + box-shadow: 0 8px 24px rgba(232,117,58,0.45); +} +.ds-hero__cta-btn:active { transform: translateY(0); } +.ds-hero__cta-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); } +.ds-hero__phone { + margin-top: 10px; font-size: 13px; color: rgba(255,255,255,0.55); +} +.ds-hero__phone a { + color: var(--color-accent); font-weight: 500; text-decoration: underline; + white-space: nowrap; +} +/* ---- Visual ---- */ +.ds-hero__visual { + flex-shrink: 0; position: relative; + width: 380px; height: 420px; + margin-left: auto; margin-right: 20px; + display: flex; align-items: center; justify-content: center; +} +.ds-hero__visual-glow { + 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%); + top: 50%; left: 50%; + transform: translate(-50%, -50%); + pointer-events: none; +} +.ds-hero__photo-wrap { position: relative; z-index: 2; display:flex; align-items:center; justify-content:center; } +.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 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); + animation: dsPhotoFloat 6s ease-in-out infinite; +} +.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); + top: 50%; left: 50%; transform: translate(-50%, -50%); + pointer-events: none; + animation: dsRingPulse 4s ease-in-out infinite; +} +/* Floating badges — цвета как на /otzyvy/ */ +.ds-hero__float { + position: absolute; z-index: 3; + display: flex; align-items: center; gap: var(--space-1); + padding: 10px 20px; + border-radius: var(--radius-pill); + font-size: var(--text-body-sm); font-weight: 600; color: #fff; + white-space: nowrap; backdrop-filter: blur(8px); + animation: dsFloat 5s ease-in-out infinite; +} +.ds-hero__float-icon { font-size: 18px; line-height: 1; } +.ds-hero__float--1 { + top: 4%; right: -8px; animation-delay: 0s; + background: linear-gradient(135deg, rgba(255,255,255,0.15), rgba(255,255,255,0.05)); + color: rgba(255,255,255,0.92); + border: 1px solid rgba(255,255,255,0.12); +} +.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); +} +.ds-hero__float--3 { + bottom: 4%; right: 6%; animation-delay: 2.4s; + background: linear-gradient(135deg, rgba(59,178,160,0.20), rgba(59,178,160,0.08)); + color: #B8E6DF; + border: 1px solid rgba(59,178,160,0.15); +} +.ds-hero__float--4 { + top: 48%; left: -28px; animation-delay: 3.5s; + background: linear-gradient(135deg, rgba(255,215,0,0.20), rgba(255,183,77,0.08)); + color: #FFE0A0; + border: 1px solid rgba(255,215,0,0.15); + font-size: 12px; padding: 8px 16px; +} +/* Decorative shapes */ +.ds-hero__deco { + 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); + top: 12%; left: 2%; + animation: dsDecoFloat 6s ease-in-out infinite; +} +.ds-hero__deco--2 { + width: 24px; height: 24px; background: rgba(59,178,160,0.14); + bottom: 40%; right: -6px; + animation: dsDecoFloat 8s ease-in-out infinite 1s; +} +.ds-hero__deco--3 { + width: 16px; height: 16px; background: rgba(232,117,58,0.16); + top: 48%; left: -8px; + animation: dsDecoFloat 7s ease-in-out infinite 2s; +} +.ds-hero__deco--4 { + width: 10px; height: 10px; background: rgba(59,178,160,0.20); + bottom: 15%; right: -4px; + animation: dsDecoFloat 5s ease-in-out infinite 3s; +} +/* Sparkle particles */ +.ds-hero__sparkles { + position: absolute; inset: 0; pointer-events: none; z-index: 1; +} +.ds-hero__sparkle { + position: absolute; border-radius: 50%; + 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(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; } +.ds-hero__sparkles .ds-hero__sparkle:nth-child(5) { bottom: 12%; left: 20%; width: 4px; height: 4px; animation-delay: 3s; } +/* ─── Hero Animations ─── */ +@keyframes dsPhotoFloat { + 0%, 100% { transform: translateY(0); } + 50% { transform: translateY(-8px); } +} +@keyframes dsRingPulse { + 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; } + 50% { transform: translate(-50%, -50%) scale(1.04); opacity: 0.6; } +} +@keyframes dsFloat { + 0%, 100% { transform: translateY(0); } + 50% { transform: translateY(-10px); } +} +@keyframes dsSparkleFloat { + 0%, 100% { transform: translateY(0) scale(1); opacity: 0.4; } + 50% { transform: translateY(-20px) scale(1.4); opacity: 0.9; } +} +@keyframes dsDecoFloat { + 0%, 100% { transform: translateY(0) scale(1); } + 50% { transform: translateY(-12px) scale(1.1); } +} +/* Hero адаптив — идентично /otzyvy/ */ +@media (max-width: 860px) { + .ds-hero { padding: 40px 0; } + .ds-hero__inner { flex-direction: column; } + .ds-hero__visual { + flex: none; + width: 100%; + max-width: 360px; + height: auto; + min-height: 320px; + margin-left: auto; + margin-right: auto; + } + .ds-hero__photo-frame { width: 260px; height: 260px; border-width: 5px; } + .ds-hero__photo-ring { width: 300px; height: 300px; } + .ds-hero__float--1 { top: 4%; right: 0; font-size: 12px; padding: 6px 14px; } + .ds-hero__float--2 { bottom: 18%; left: -12px; font-size: 12px; padding: 6px 14px; } + .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; } +} +@media (max-width: 768px) { + .ds-hero__visual { display: none; } + .ds-hero__content { max-width: none; } + .ds-hero__metrics { flex-wrap: wrap; gap: 10px; } + .ds-hero__metric { + flex: 0 0 calc(50% - 5px); + max-width: calc(50% - 5px); + min-width: 0; + padding: 12px 10px; + } + .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; } +} +@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; } + .ds-hero__metric-label { font-size: 9px; overflow-wrap: break-word; word-break: break-word; hyphens: auto; } + .ds-hero__cta-btn { padding: 14px 20px; font-size: 15px; } +} +@media (prefers-reduced-motion: reduce) { + .ds-hero__cta-btn, + .ds-hero__photo-frame, + .ds-hero__photo-ring, + .ds-hero__float, + .ds-hero__sparkles .ds-hero__sparkle, + .ds-hero__deco { + transition: none !important; + transform: none !important; + animation: none !important; + } +} + body { color: #000; font-family: Roboto; diff --git a/wp-content/themes/dekart/assets/css/podgotovka-k-shkole.css b/wp-content/themes/dekart/assets/css/podgotovka-k-shkole.css index 0f1e973..5211801 100644 --- a/wp-content/themes/dekart/assets/css/podgotovka-k-shkole.css +++ b/wp-content/themes/dekart/assets/css/podgotovka-k-shkole.css @@ -16,7 +16,17 @@ --slate-600: #475569; --slate-400: #94A3B8; --radius-2026: 24px; +} +/* ─── Guard: prevent horizontal overflow on mobile ─── */ +.page-pksh { + overflow-x: clip; + gap: 0; /* override main's flex gap: 70px — we control spacing via section padding */ +} + +/* ─── DS Hero heading override — long text smaller on desktop ─── */ +.page-pksh .ds-hero__h1 { + font-size: clamp(22px, 3.2vw, 40px); } /* Unified purple design system (was orange in v1). @@ -132,19 +142,19 @@ background: rgba(124, 58, 237, 0.2); gap: 14px; } -.step__num { +.step__icon { flex-shrink: 0; - width: 40px; - height: 40px; - border-radius: 50%; - background: linear-gradient(135deg, #7C3AED, #8B5CF6); - color: #fff; - display: flex; - align-items: center; - justify-content: center; - font-weight: 800; - font-size: 1rem; - box-shadow: 0 3px 10px rgba(124, 58, 237, 0.25); + width: 32px; + height: 32px; + color: var(--accent, #7C3AED); + margin-top: 2px; + filter: drop-shadow(0 1px 3px rgba(124, 58, 237, 0.2)); +} + +.step__icon svg { + width: 24px; + height: 24px; + display: block; } .step strong { @@ -154,7 +164,7 @@ background: rgba(124, 58, 237, 0.2); margin-bottom: 2px; } -.step span:not(.step__num) { +.step span:not(.step__icon) { display: block; font-size: 0.875rem; color: var(--slate-600); @@ -647,36 +657,37 @@ background: rgba(124, 58, 237, 0.2); ═══════════════════════════════════════════════════════════ */ .pksh-anchor-nav { display: flex; - flex-wrap: wrap; + flex-wrap: nowrap; justify-content: center; gap: 10px; - max-width: 900px; - margin: 0 auto; - padding: 48px 16px 56px; + margin: 0; + padding: 0; overflow: visible; + width: 100%; } .pksh-anchor-link { flex-shrink: 0; padding: 14px 28px; border-radius: 100px; - background: #FFFFFF; - color: #475569; + background: #6D28D9; + color: #FFFFFF; font-size: 1rem; - font-weight: 600; + font-weight: 700; text-decoration: none; - border: 1.5px solid #E2E8F0; + border: none; + box-shadow: 0 4px 14px rgba(109, 40, 217, 0.25); transition: all 0.2s ease; white-space: nowrap; + letter-spacing: 0.02em; } .pksh-anchor-link:hover, .pksh-anchor-link:focus-visible { - background: #F5F3FF; - color: #7C3AED; - border-color: #7C3AED; + background: #7C3AED; + color: #FFFFFF; transform: translateY(-2px); - box-shadow: 0 4px 12px rgba(124, 58, 237, 0.15); + box-shadow: 0 6px 20px rgba(109, 40, 217, 0.40); } .pksh-anchor-link--cta { @@ -693,20 +704,7 @@ background: rgba(124, 58, 237, 0.2); box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3); } -@media (max-width: 639px) { - .pksh-anchor-nav { - padding: 32px 16px 40px; - gap: 8px; - justify-content: center; - } - .pksh-anchor-link { - padding: 10px 18px; - font-size: 0.875rem; - min-height: 44px; - display: inline-flex; - align-items: center; - } -} +/* mobile anchor styles moved into @media (max-width: 860px) above */ /* ============================================================ 13. FOMO SCARCITY BADGE @@ -935,14 +933,17 @@ background: rgba(124, 58, 237, 0.2); text-align: center; } -/* ── 21f. Consistent section vertical spacing ── */ -.page-pksh .pksh-section + .pksh-section { - /* Sections already have padding: 80px 0; no extra margin needed */ +/* ── 21f. Consistent section vertical rhythm ── */ +.page-pksh .pksh-section { + padding: 48px 32px; } -.page-pksh .pksh-section + .pksh-anchor-nav, -.page-pksh .pksh-anchor-nav + .pksh-section { - margin-top: 0; + +@media (max-width: 860px) { + .page-pksh .pksh-section { + padding: 32px 16px; + } } +/* (pksh-anchor-nav теперь внутри секции гарантии — отдельный margin не нужен) */ .page-pksh .pksh-section + :not(.pksh-section):not(.pksh-anchor-nav) { /* map, etc. — no extra spacing */ } @@ -1019,11 +1020,12 @@ background: rgba(124, 58, 237, 0.2); ============================================================ */ .guarantee-hero { display: flex; - align-items: center; - gap: 32px; - max-width: 900px; + align-items: stretch; + flex-wrap: wrap; + gap: 20px 32px; + max-width: 1000px; margin: 0 auto; - padding: 32px 24px; + padding: 40px 36px; background: linear-gradient(135deg, #F8F4F0 0%, #F0EBE5 50%, #F8F4F0 100%); border: 2px solid #7C3AED; border-radius: var(--radius-2026, 24px); @@ -1031,44 +1033,45 @@ background: rgba(124, 58, 237, 0.2); .guarantee-hero__shield { flex-shrink: 0; - font-size: 4rem; + font-size: 5rem; line-height: 1; } .guarantee-hero__content { flex: 1; + display: flex; + flex-direction: column; + align-items: flex-start; } .guarantee-hero__text { font-size: 1rem; line-height: 1.6; color: var(--slate-600, #475569); - margin: 0 0 18px; + margin: 0 0 24px; } .guarantee-hero__text strong { color: #6D28D9; } -.guarantee-hero__btn { - padding: 14px 32px; - font-size: 1rem; -} +/* (btn removed — перенесён в anchor nav) */ .guarantee-hero__badges { display: flex; flex-direction: column; align-items: center; + justify-content: center; gap: 12px; flex-shrink: 0; } -@media (max-width: 639px) { +@media (max-width: 860px) { .guarantee-hero { flex-direction: column; text-align: center; - gap: 16px; - padding: 24px 20px; + gap: 20px; + padding: 28px 20px; } .guarantee-hero__badges { flex-direction: row; @@ -1077,6 +1080,25 @@ background: rgba(124, 58, 237, 0.2); .guarantee-hero__shield { font-size: 3rem; } + .guarantee-hero__content { + align-items: center; + } + .guarantee-hero__text { + margin-bottom: 20px; + } + .pksh-anchor-nav { + flex-wrap: wrap; + justify-content: center; + gap: 8px; + margin: 0; + } + .pksh-anchor-link { + padding: 10px 18px; + font-size: 0.875rem; + min-height: 44px; + display: inline-flex; + align-items: center; + } } /* ============================================================ @@ -1088,13 +1110,6 @@ background: rgba(124, 58, 237, 0.2); ============================================================ */ .page-pksh .bento[aria-label="Гарантия"] { background: #FFFFFF; - padding: 32px 32px 48px; -} - -@media (max-width: 860px) { - .page-pksh .bento[aria-label="Гарантия"] { - padding: 24px 16px 32px; - } } /* ============================================================ @@ -1133,12 +1148,6 @@ background: rgba(124, 58, 237, 0.2); margin-top: 8px; } -.micro-commit__disclaimer { - font-size: 0.75rem; - color: #94A3B8; - margin: 8px 0 0; -} - @media (max-width: 639px) { .micro-commit { flex-direction: column; @@ -1429,626 +1438,6 @@ background: rgba(124, 58, 237, 0.2); scroll-margin-top: 100px; } -/* ═══════════════════════════════════════════════════════════ -/* ═══════════════════════════════════════════════════════════ - 39. HERO — PHOTO-LED REDESIGN v4.0 (May 2026) - Psychology: - - Photo of children → oxytocin (caregiver bond, trust) - - Warm golden gradient → safety, happiness, optimism - - Floating badges like ribbons → achievement, social proof - - Decorative frame → premium feel, anchors the photo - - Sparkles → delight, childhood magic - - Bold purple CTA with glow → urgency, premium action - ═══════════════════════════════════════════════════════ */ - -/* ── Hero container ── */ -.page-pksh .hero-pksh { - position: relative; - min-height: 600px; - display: flex; - flex-direction: column; - overflow: hidden; - background: linear-gradient(165deg, - #FFFAF0 0%, - #FFF1E0 20%, - #FFE4C8 40%, - #F3E8FF 70%, - #FEF7E6 100% - ); -} - -/* ── Background layer ── */ -.hero-pksh__bg { - position: absolute; - inset: 0; - z-index: 0; - pointer-events: none; -} - -/* ── Blobs — warmer, more visible, more organic motion ── */ -.hero-pksh__blob { - position: absolute; - border-radius: 50%; - filter: blur(120px); - will-change: transform; -} - -.hero-pksh__blob--1 { - width: 700px; height: 700px; - background: #FFB088; - top: -280px; right: -100px; - opacity: 0.20; - animation: heroBlob1 12s ease-in-out infinite alternate; -} - -.hero-pksh__blob--2 { - width: 520px; height: 520px; - background: #FFC857; - bottom: -200px; left: -120px; - opacity: 0.16; - animation: heroBlob2 14s ease-in-out infinite alternate; -} - -.hero-pksh__blob--3 { - width: 400px; height: 400px; - background: #D4A0E8; - top: 25%; left: 35%; - opacity: 0.13; - animation: heroBlob3 10s ease-in-out infinite alternate; -} - -.hero-pksh__blob--4 { - width: 240px; height: 240px; - background: #FEC8D8; - bottom: 10%; right: 15%; - opacity: 0.12; - animation: heroBlob4 8s ease-in-out infinite alternate; -} - -@keyframes heroBlob1 { - 0% { transform: translate(0, 0) scale(1); } - 100% { transform: translate(-60px, 50px) scale(1.12); } -} -@keyframes heroBlob2 { - 0% { transform: translate(0, 0) scale(1); } - 100% { transform: translate(50px, -40px) scale(1.08); } -} -@keyframes heroBlob3 { - 0% { transform: translate(0, 0) scale(1); opacity: 0.13; } - 100% { transform: translate(30px, 20px) scale(1.2); opacity: 0.20; } -} -@keyframes heroBlob4 { - 0% { transform: translate(0, 0) scale(1); opacity: 0.12; } - 100% { transform: translate(-20px, -15px) scale(1.1); opacity: 0.18; } -} - -/* ── Sparkle particles ── */ -.hero-pksh__sparkle { - position: absolute; - width: 5px; - height: 5px; - border-radius: 50%; - background: #FFD700; - box-shadow: 0 0 6px rgba(255, 215, 0, 0.4); - animation: sparkleFloat 4s ease-in-out infinite; - pointer-events: none; -} - -.hero-pksh__sparkle:nth-child(1) { top: 15%; left: 10%; width: 4px; height: 4px; animation-delay: 0s; background: #D4A0E8; box-shadow: 0 0 8px rgba(212, 160, 232, 0.4); } -.hero-pksh__sparkle:nth-child(2) { top: 30%; right: 18%; width: 6px; height: 6px; animation-delay: 1.2s; } -.hero-pksh__sparkle:nth-child(3) { bottom: 35%; left: 5%; width: 3px; height: 3px; animation-delay: 2s; } -.hero-pksh__sparkle:nth-child(4) { top: 55%; right: 8%; width: 5px; height: 5px; animation-delay: 0.8s; } -.hero-pksh__sparkle:nth-child(5) { bottom: 12%; left: 20%; width: 4px; height: 4px; animation-delay: 3s; } - -@keyframes sparkleFloat { - 0%, 100% { transform: translateY(0) scale(1); opacity: 0.4; } - 50% { transform: translateY(-20px) scale(1.4); opacity: 0.9; } -} - -/* ── Dot pattern ── */ -.hero-pksh__pattern { - position: absolute; - inset: 0; - background-image: radial-gradient(rgba(255, 154, 118, 0.05) 1px, transparent 1px); - background-size: 32px 32px; -} - -/* ── Breadcrumbs ── */ -.hero-pksh__breadcrumbs { - position: relative; - z-index: 2; - padding-top: 24px; -} - -@media (max-width: 860px) { - .hero-pksh__breadcrumbs { - padding-top: 96px; - } -} - -.hero-pksh__breadcrumbs .breadcrumbs a, -.hero-pksh__breadcrumbs .breadcrumbs span { - color: #A0AEC0; - font-weight: 500; -} - -.hero-pksh__breadcrumbs .breadcrumbs a:hover { - color: #7C3AED; -} - -/* ── Main layout grid ── */ -.hero-pksh__layout { - position: relative; - z-index: 1; - flex: 1; - display: grid; - grid-template-columns: 1fr 1fr; - gap: 48px; - max-width: 1280px; - margin: 0 auto; - padding: 28px 32px 48px; - width: 100%; - align-items: center; -} - -/* ── Left column ── */ -.hero-pksh__content { - display: flex; - flex-direction: column; - gap: 16px; -} - -/* ── Address pill ── */ -.hero-pksh__address { - display: inline-flex; - align-items: center; - gap: 8px; - font-family: 'Roboto', sans-serif; - font-size: 14px; - font-weight: 500; - color: #6B7280; - background: rgba(124, 58, 237, 0.06); - backdrop-filter: blur(8px); - -webkit-backdrop-filter: blur(8px); - padding: 8px 18px; - border-radius: 100px; - max-width: fit-content; - border: 1px solid rgba(124, 58, 237, 0.10); - transition: all 0.2s; -} - -.hero-pksh__address:hover { - background: rgba(124, 58, 237, 0.10); - border-color: rgba(124, 58, 237, 0.20); -} - -.hero-pksh__address svg { - width: 16px; height: 16px; - flex-shrink: 0; - color: #7C3AED; -} - -/* ── Headline — solid dark for readability, purple for emotion ── */ -.hero-pksh__title { - font-family: 'Oswald', sans-serif; - font-size: 52px; - font-weight: 700; - line-height: 1.06; - color: #1E293B; - margin: 2px 0; - max-width: 600px; -} - -/* ── Subtitle ── */ -.hero-pksh__subtitle { - font-family: 'Roboto', sans-serif; - font-size: 20px; - font-weight: 400; - line-height: 1.55; - color: #475569; - margin: 0; - max-width: 520px; -} - -/* ── Actions ── */ -.hero-pksh__actions { - display: flex; - flex-direction: column; - gap: 12px; - margin-top: 10px; -} - -/* ── CTA — bold purple with glow ── */ -.hero-pksh__cta { - display: inline-flex; - align-items: center; - justify-content: center; - gap: 10px; - padding: 20px 44px; - font-family: 'Roboto', sans-serif; - font-size: 18px; - font-weight: 700; - color: #fff; - background: linear-gradient(135deg, #7C3AED 0%, #9F6EF0 50%, #B794F4 100%); - border: none; - border-radius: 100px; - cursor: pointer; - transition: transform 0.25s ease, box-shadow 0.25s ease; - box-shadow: 0 8px 32px rgba(124, 58, 237, 0.30), 0 2px 8px rgba(124, 58, 237, 0.15); - max-width: fit-content; - text-transform: none; - letter-spacing: 0.01em; - position: relative; - overflow: hidden; - animation: ctaGlow 3s ease-in-out infinite; -} - -@keyframes ctaGlow { - 0%, 100% { box-shadow: 0 8px 32px rgba(124, 58, 237, 0.30), 0 2px 8px rgba(124, 58, 237, 0.15); } - 50% { box-shadow: 0 12px 48px rgba(124, 58, 237, 0.45), 0 4px 16px rgba(124, 58, 237, 0.25); } -} - -.hero-pksh__cta::after { - content: ''; - position: absolute; - inset: -2px; - border-radius: 102px; - background: linear-gradient(135deg, rgba(255,255,255,0.15), transparent 50%); - pointer-events: none; -} - -.hero-pksh__cta:hover { - transform: translateY(-3px); - box-shadow: 0 14px 40px rgba(124, 58, 237, 0.40), 0 4px 12px rgba(124, 58, 237, 0.20); -} - -.hero-pksh__cta:active { - transform: translateY(-1px); - box-shadow: 0 6px 20px rgba(124, 58, 237, 0.25); -} - -.hero-pksh__cta-arrow { - display: inline-block; - transition: transform 0.2s; - font-size: 20px; - line-height: 1; -} - -.hero-pksh__cta:hover .hero-pksh__cta-arrow { - transform: translateX(4px); -} - -/* ── Scarcity badge ── */ -.hero-pksh__scarcity { - font-family: 'Roboto', sans-serif; - font-size: 14px; - font-weight: 600; - color: #9A3412; - background: #FFF7ED; - padding: 10px 22px; - border-radius: 100px; - max-width: fit-content; - border: 1.5px solid rgba(249, 115, 22, 0.15); - animation: heroScarcityPulse 3s ease-in-out infinite; -} - -.hero-pksh__scarcity strong { - color: #C2410C; - font-weight: 800; -} - -@keyframes heroScarcityPulse { - 0%, 100% { transform: scale(1); background: #FFF7ED; } - 50% { transform: scale(1.02); background: #FFEDD5; } -} - -/* ── Trust bar ── */ -.hero-pksh__trust { - display: flex; - flex-wrap: wrap; - gap: 20px; - margin-top: 8px; -} - -.hero-pksh__trust-item { - display: inline-flex; - align-items: center; - gap: 8px; - font-family: 'Roboto', sans-serif; - font-size: 14px; - color: #64748B; - background: rgba(255,255,255,0.7); - padding: 6px 14px; - border-radius: 100px; - border: 1px solid rgba(0,0,0,0.04); -} - -.hero-pksh__trust-icon { - font-size: 16px; - line-height: 1; -} - -.hero-pksh__trust-label strong { - color: #1E293B; - font-weight: 700; -} - -/* ═══════════════════════════════════════════════════════════ - RIGHT COLUMN: Photo of children + floating badges - Photo is the emotional anchor — triggers oxytocin. - Floating badges provide social proof + curiosity. - Decorative frame makes the photo feel premium. - ═══════════════════════════════════════════════════════ */ - -/* ── Visual column container ── */ -.hero-pksh__visual { - position: relative; - display: flex; - align-items: center; - justify-content: center; - min-height: 480px; -} - -/* ── Purple glow backdrop ── */ -.hero-pksh__visual-glow { - position: absolute; - width: 420px; - height: 420px; - border-radius: 50%; - background: radial-gradient(circle, rgba(124,58,237,0.08) 0%, rgba(168,85,247,0.05) 30%, transparent 65%); - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - pointer-events: none; -} - -/* ── Photo wrapper — contains frame and ring ── */ -.hero-pksh__photo-wrap { - position: relative; - z-index: 2; - display: flex; - align-items: center; - justify-content: center; -} - -/* ── Decorative photo frame ── */ -.hero-pksh__photo-frame { - position: relative; - width: 380px; - height: 380px; - border-radius: 50%; - overflow: hidden; - box-shadow: - 0 20px 60px rgba(124, 58, 237, 0.15), - 0 8px 24px rgba(0, 0, 0, 0.08), - inset 0 0 0 4px rgba(255, 255, 255, 0.6); - border: 6px solid rgba(255, 255, 255, 0.8); - animation: photoFloat 6s ease-in-out infinite; -} - -.hero-pksh__photo { - width: 100%; - height: 100%; - object-fit: cover; - display: block; -} - -@keyframes photoFloat { - 0%, 100% { transform: translateY(0); } - 50% { transform: translateY(-8px); } -} - -/* ── Photo accent ring ── */ -.hero-pksh__photo-ring { - position: absolute; - width: 420px; - height: 420px; - border-radius: 50%; - border: 2px solid rgba(124, 58, 237, 0.08); - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - pointer-events: none; - animation: ringPulse 4s ease-in-out infinite; -} - -@keyframes ringPulse { - 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; } - 50% { transform: translate(-50%, -50%) scale(1.04); opacity: 0.6; } -} - -/* ── Floating badges — ribbon/sticky-note style ── */ -.hero-pksh__float { - position: absolute; - display: flex; - align-items: center; - gap: 8px; - padding: 10px 20px; - border-radius: 100px; - font-family: 'Roboto', sans-serif; - font-size: 13px; - font-weight: 600; - white-space: nowrap; - animation: heroFloat 5s ease-in-out infinite; - z-index: 3; -} - -.hero-pksh__float--1 { - top: 4%; - right: -8px; - animation-delay: 0s; - background: linear-gradient(135deg, rgba(124,58,237,0.12), rgba(168,85,247,0.08)); - color: #6D28D9; - border: 1px solid rgba(124,58,237,0.12); - backdrop-filter: blur(8px); -} - -.hero-pksh__float--2 { - bottom: 22%; - left: -24px; - animation-delay: 1.2s; - background: linear-gradient(135deg, rgba(255,183,77,0.18), rgba(255,154,118,0.10)); - color: #92400E; - border: 1px solid rgba(255,183,77,0.15); - backdrop-filter: blur(8px); -} - -.hero-pksh__float--3 { - bottom: 4%; - right: 6%; - animation-delay: 2.4s; - background: linear-gradient(135deg, rgba(72,187,120,0.15), rgba(104,211,145,0.08)); - color: #276749; - border: 1px solid rgba(72,187,120,0.12); - backdrop-filter: blur(8px); -} - -.hero-pksh__float--4 { - top: 48%; - left: -28px; - animation-delay: 3.5s; - background: linear-gradient(135deg, rgba(255,215,0,0.20), rgba(255,183,77,0.12)); - color: #92400E; - border: 1px solid rgba(255,215,0,0.15); - backdrop-filter: blur(8px); - font-size: 12px; - padding: 8px 16px; -} - -.hero-pksh__float--4 strong { - color: #7C3AED; -} - -.hero-pksh__float-icon { - font-size: 18px; - line-height: 1; -} - -@keyframes heroFloat { - 0%, 100% { transform: translateY(0); } - 50% { transform: translateY(-10px); } -} - -/* ── Decorative shapes ── */ -.hero-pksh__deco { - position: absolute; - border-radius: 50%; - pointer-events: none; - z-index: 1; -} - -.hero-pksh__deco--1 { - width: 40px; height: 40px; - background: rgba(255, 183, 77, 0.15); - top: 12%; - left: 2%; - animation: decoFloat 6s ease-in-out infinite; -} - -.hero-pksh__deco--2 { - width: 24px; height: 24px; - background: rgba(206, 147, 216, 0.18); - bottom: 40%; - right: -6px; - animation: decoFloat 8s ease-in-out infinite 1s; -} - -.hero-pksh__deco--3 { - width: 16px; height: 16px; - background: rgba(255, 154, 118, 0.20); - top: 48%; - left: -8px; - animation: decoFloat 7s ease-in-out infinite 2s; -} - -.hero-pksh__deco--4 { - width: 10px; height: 10px; - background: rgba(212, 160, 232, 0.25); - bottom: 15%; - right: -4px; - animation: decoFloat 5s ease-in-out infinite 3s; -} - -@keyframes decoFloat { - 0%, 100% { transform: translateY(0) scale(1); } - 50% { transform: translateY(-12px) scale(1.1); } -} - -/* ═══════════════════════════════════════════════════════════ - 39b. HERO — Responsive (Tablet) - ═══════════════════════════════════════════════════════ */ -@media (max-width: 1024px) { - .hero-pksh__layout { gap: 36px; padding: 20px 24px 40px; } - .hero-pksh__title { font-size: 40px; } - .hero-pksh__subtitle { font-size: 18px; } - .hero-pksh__photo-frame { width: 300px; height: 300px; } - .hero-pksh__photo-ring { width: 340px; height: 340px; } - .hero-pksh__float--1 { right: 0; } - .hero-pksh__float--2 { left: -16px; } -} - -/* ═══════════════════════════════════════════════════════════ - 39c. HERO — Responsive (Mobile < 860px) - ═══════════════════════════════════════════════════════ */ -@media (max-width: 860px) { - .page-pksh .hero-pksh { min-height: auto; } - .hero-pksh__layout { grid-template-columns: 1fr; gap: 28px; padding: 12px 16px 40px; } - .hero-pksh__content { gap: 14px; align-items: flex-start; } - .hero-pksh__title { font-size: 32px; max-width: 100%; } - .hero-pksh__subtitle { font-size: 17px; max-width: 100%; } - .hero-pksh__address { font-size: 13px; padding: 6px 14px; } - .hero-pksh__cta { width: 100%; max-width: 100%; font-size: 16px; padding: 16px 24px; min-height: 52px; justify-content: center; text-align: center; } - .hero-pksh__actions { width: 100%; } - .hero-pksh__scarcity { width: 100%; max-width: 100%; text-align: center; font-size: 13px; padding: 8px 16px; box-sizing: border-box; } - .hero-pksh__trust { gap: 10px; } - .hero-pksh__trust-item { font-size: 12px; padding: 4px 10px; gap: 6px; } - .hero-pksh__visual { min-height: auto; order: 1; padding: 20px 0 10px; } - .hero-pksh__photo-frame { width: 220px; height: 220px; border-width: 4px; } - .hero-pksh__photo-ring { width: 250px; height: 250px; } - .hero-pksh__float--1 { top: 4%; right: 4px; font-size: 12px; padding: 6px 14px; } - .hero-pksh__float--2 { display: none; } - .hero-pksh__float--3 { display: none; } - .hero-pksh__float--4 { display: none; } - .hero-pksh__deco--1 { display: none; } - .hero-pksh__deco--2 { display: none; } - .hero-pksh__deco--3 { display: none; } - .hero-pksh__deco--4 { display: none; } -} - -/* ═══════════════════════════════════════════════════════════ - 39d. HERO — Small mobile (< 480px) - ═══════════════════════════════════════════════════════ */ -@media (max-width: 480px) { - .hero-pksh__title { font-size: 26px; } - .hero-pksh__subtitle { font-size: 15px; } - .hero-pksh__trust { gap: 8px; } - .hero-pksh__trust-item { font-size: 11px; gap: 4px; } - .hero-pksh__photo-frame { width: 180px; height: 180px; border-width: 3px; } - .hero-pksh__photo-ring { width: 210px; height: 210px; } -} - -/* ═══════════════════════════════════════════════════════════ - 39e. HERO — hide old mobile banner (safety net) - ═══════════════════════════════════════════════════════ */ -.page-pksh .banner__content.mobile { - display: none !important; -} - -/* ═══════════════════════════════════════════════════════════ - 39f. Reduced motion — respect user preference - ═══════════════════════════════════════════════════════ */ -@media (prefers-reduced-motion: reduce) { - .hero-pksh__blob, - .hero-pksh__sparkle, - .hero-pksh__float, - .hero-pksh__deco, - .hero-pksh__photo-frame, - .hero-pksh__photo-ring, - .hero-pksh__scarcity { animation: none !important; } - .hero-pksh__cta, - .hero-pksh__cta-arrow { transition: none !important; } -} -/* ═══════════════════════════════════════════════════════════ 40. SOCIAL PROOF — Premium counters redesign v4.0 Psychology: - White cards with colored tops = achievement ribbons @@ -2061,10 +1450,15 @@ background: rgba(124, 58, 237, 0.2); /* ── Section container warm background ── */ .page-pksh .bento[aria-label="Социальное доказательство"] { background: var(--bg-warm, #F8F4F0); - padding: 40px 32px 48px; position: relative; } +@media (min-width: 861px) { + .page-pksh .bento[aria-label="Социальное доказательство"] { + padding-bottom: 60px; + } +} + /* Subtle background pattern for depth */ .page-pksh .bento[aria-label="Социальное доказательство"]::before { content: ''; @@ -2075,12 +1469,6 @@ background: rgba(124, 58, 237, 0.2); pointer-events: none; } -@media (max-width: 860px) { - .page-pksh .bento[aria-label="Социальное доказательство"] { - padding: 28px 16px 36px; - } -} - /* ── Grid: 4 columns desktop, 2 tablet, 1 mobile ── */ .page-pksh .bento[aria-label="Социальное доказательство"] .social-counters { display: grid; @@ -2101,12 +1489,7 @@ background: rgba(124, 58, 237, 0.2); } } -@media (max-width: 480px) { - .page-pksh .bento[aria-label="Социальное доказательство"] .social-counters { - grid-template-columns: 1fr; - gap: 12px; - } -} +/* Mobile: 2 columns at all sizes (no 1-column breakpoint) */ /* ── Counter card ── */ .page-pksh .bento[aria-label="Социальное доказательство"] .social-counter { @@ -2117,9 +1500,9 @@ background: rgba(124, 58, 237, 0.2); gap: 0; padding: 0; background: #FFFFFF; - border: none; + border: 1px solid #E2D8CC; border-radius: 20px; - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06); overflow: hidden; transition: box-shadow 0.3s ease, transform 0.3s ease; } @@ -2241,16 +1624,9 @@ background: rgba(124, 58, 237, 0.2); SVG ring: slow rotation = calm, not flashy. ============================================================ */ -/* NARROW section — constrained 900px content. White bg */ +/* NARROW section — no background (section bg transparent) */ .page-pksh .bento[aria-label="Скачать чек-лист"] { - background: #FFFFFF; - padding: 40px 32px 48px; -} - -@media (max-width: 860px) { - .page-pksh .bento[aria-label="Скачать чек-лист"] { - padding: 32px 16px 40px; - } + /* transparent — card handles its own bg */ } /* ── Full-width sections: warm #F8F4F0 alternation ── */ @@ -2269,27 +1645,29 @@ background: rgba(124, 58, 237, 0.2); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); } -/* ── Card — white bg with warm border + shadow for depth ── */ +/* ── Card — dark bg, white text, accent button ── */ .page-pksh .bento[aria-label="Скачать чек-лист"] .micro-commit { display: flex; align-items: center; gap: 40px; - max-width: 900px; + max-width: 1000px; margin: 0 auto; - padding: 36px 32px; - background: #FFFFFF; - border: 1.5px solid #DED3C0; + padding: 40px 36px; + background: #0F172A; + border: 1px solid #1E293B; border-radius: 24px; - box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06); + box-shadow: 0 20px 60px rgba(0, 0, 0, 0.30); + text-align: center; + position: relative; } @media (max-width: 860px) { .page-pksh .bento[aria-label="Скачать чек-лист"] .micro-commit { flex-direction: column; text-align: center; - padding: 28px 20px; + padding: 32px 20px; gap: 24px; - border-width: 1px; + box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25); } } @@ -2302,16 +1680,15 @@ background: rgba(124, 58, 237, 0.2); display: flex; align-items: center; justify-content: center; - background: #FFFFFF; - border: 1.5px solid #DED3C0; + background: #1E293B; + border: 1.5px solid #334155; border-radius: 12px; - box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04); + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.20); } @media (max-width: 860px) { .page-pksh .bento[aria-label="Скачать чек-лист"] .micro-commit__visual { - width: 96px; - height: 126px; + display: none; } } @@ -2322,20 +1699,25 @@ background: rgba(124, 58, 237, 0.2); display: block; } -/* ── Content ── */ +/* ── Content — centered now (no form fields) ── */ .page-pksh .bento[aria-label="Скачать чек-лист"] .micro-commit__content { flex: 1; + display: flex; + flex-direction: column; + align-items: center; } -/* ── Tag "Бесплатно" — purple accent (was orange) ── */ +/* ── Tag "Бесплатно" — rating amber (matches hero metrics) ── */ .page-pksh .bento[aria-label="Скачать чек-лист"] .bento-label { - color: #7C3AED; + color: #F59E0B; + font-weight: 700; + letter-spacing: 0.03em; } -/* ── H2 heading — slightly larger for conviction ── */ +/* ── H2 heading — white on dark ── */ .page-pksh .bento[aria-label="Скачать чек-лист"] .bento-h2 { font-size: 1.75rem; - color: #1E293B; + color: #FFFFFF; } @media (max-width: 860px) { @@ -2344,33 +1726,36 @@ background: rgba(124, 58, 237, 0.2); } } -/* ── Description text ── */ +/* ── Description text — light gray on dark ── */ .page-pksh .bento[aria-label="Скачать чек-лист"] .bento-p { font-size: 1rem; - color: #475569; + color: #CBD5E1; line-height: 1.6; } -/* ── CTA button — accent gradient, enhanced sizing ── */ +/* ── Action wrapper — button alone, centered ── */ +.page-pksh .bento[aria-label="Скачать чек-лист"] .micro-commit__action { + display: flex; + justify-content: center; + margin-top: 12px; +} + +/* ── CTA button — bright accent on dark card ── */ .page-pksh .bento[aria-label="Скачать чек-лист"] .micro-commit__btn { - margin-top: 8px; - padding: 16px 36px; - font-size: 1rem; + padding: 16px 40px; + font-size: 1.0625rem; + font-weight: 600; border-radius: 100px; - box-shadow: 0 4px 16px rgba(124, 58, 237, 0.20); + background: linear-gradient(135deg, #7C3AED, #A855F7); + color: #FFFFFF; + border: none; + box-shadow: 0 4px 20px rgba(124, 58, 237, 0.35); transition: transform 0.2s ease, box-shadow 0.2s ease; } .page-pksh .bento[aria-label="Скачать чек-лист"] .micro-commit__btn:hover { transform: translateY(-2px); - box-shadow: 0 8px 24px rgba(124, 58, 237, 0.30); -} - -/* ── Disclaimer — subtle on warm card bg ── */ -.page-pksh .bento[aria-label="Скачать чек-лист"] .micro-commit__disclaimer { - font-size: 0.75rem; - color: #94A3B8; - margin: 8px 0 0; + box-shadow: 0 8px 28px rgba(124, 58, 237, 0.50); } /* ============================================================ @@ -2750,10 +2135,8 @@ background: rgba(124, 58, 237, 0.2); /* Uses background-color (not shorthand) to avoid resetting background-image set in 42d. */ -/* 🔵 WHITE (#FFFFFF) — Checklist (clean card presentation) */ -.page-pksh .bento[aria-label="Скачать чек-лист"] { - background-color: #FFFFFF; -} +/* 🔵 WARM — Checklist card stands out against warm bg */ +/* .page-pksh .bento[aria-label="Скачать чек-лист"] bg set in section 27 override */ /* 🔵 WHITE — Guarantee hero (strong purple border card) */ .page-pksh .bento[aria-label="Гарантия"] { @@ -3025,46 +2408,7 @@ background: rgba(124, 58, 237, 0.2); } } -/* ============================================================ - 53. MICRO-COMMIT — Inline form - ============================================================ */ -.micro-commit__form { - display: flex; - flex-direction: column; - gap: 10px; - margin-top: 12px; -} - -.micro-commit__input { - padding: 14px 18px; - font-size: 1rem; - border: 1.5px solid #DED3C0; - border-radius: 12px; - font-family: inherit; - background: #fff; - transition: border-color 0.2s; - width: 100%; - max-width: 360px; - box-sizing: border-box; -} - -.micro-commit__input:focus { - outline: none; - border-color: #7C3AED; - box-shadow: 0 0 0 3px rgba(124,58,237,0.1); -} - -.micro-commit__form .micro-commit__btn { - margin-top: 4px; -} - -@media (max-width: 639px) { - .micro-commit__input { - max-width: 100%; - } -} - -/* ============================================================ +/* ═══════════════════════════════════════════════════════════ 54. CONTAINER QUERIES — Card components adapt to container Support: Chrome 111+, Safari 17+, Firefox 124+ ============================================================ */ @@ -3107,18 +2451,6 @@ background: rgba(124, 58, 237, 0.2); 55. REDUCED MOTION — Comprehensive preferences ============================================================ */ @media (prefers-reduced-motion: reduce) { - /* Hero animations */ - .hero-pksh__blob, - .hero-pksh__sparkle, - .hero-pksh__float, - .hero-pksh__deco, - .hero-pksh__photo-frame, - .hero-pksh__photo-ring, - .hero-pksh__scarcity, - .hero-pksh__cta { - animation: none !important; - transition: none !important; - } /* Card hover effects */ .program-card, @@ -3151,10 +2483,6 @@ background: rgba(124, 58, 237, 0.2); animation: none !important; } - /* Hero CTA glow */ - .hero-pksh__cta { - animation: none !important; - } /* Ensure elements that depend on scroll-driven animations are static */ *, @@ -3174,3 +2502,69 @@ background: rgba(124, 58, 237, 0.2); scroll-behavior: smooth; } } + +/* ============================================================ + 57. CTA TEST — Бесплатное тестирование перед results + ============================================================ */ +.page-pksh .bento[aria-label="Запись на тестирование"] { + background: var(--bg-warm, #F8F4F0); +} + +.cta-test { + max-width: 800px; + margin: 0 auto; + text-align: center; + padding: 8px 0; +} + +.cta-test__badge { + display: inline-block; + padding: 6px 18px; + background: #F59E0B; + color: #FFFFFF; + font-size: 0.875rem; + font-weight: 700; + border-radius: 100px; + margin-bottom: 16px; + text-transform: uppercase; + letter-spacing: 0.04em; +} + +.cta-test__title { + margin-bottom: 12px; +} + +.cta-test__text { + font-size: 1.0625rem; + line-height: 1.65; + color: var(--slate-600, #475569); + max-width: 680px; + margin: 0 auto 28px; +} + +.cta-test__btn { + padding: 18px 44px; + font-size: 1.125rem; + font-weight: 700; + border-radius: 100px; + box-shadow: 0 6px 24px rgba(124, 58, 237, 0.25); +} + +.cta-test__btn:hover { + transform: translateY(-2px); + box-shadow: 0 10px 32px rgba(124, 58, 237, 0.35); +} + +@media (max-width: 860px) { + .cta-test { + padding: 4px 0; + } + .cta-test__text { + font-size: 1rem; + } + .cta-test__btn { + padding: 16px 32px; + font-size: 1rem; + width: 100%; + } +} diff --git a/wp-content/themes/dekart/assets/css/reviews-page.css b/wp-content/themes/dekart/assets/css/reviews-page.css index cf915b5..b09b38c 100644 --- a/wp-content/themes/dekart/assets/css/reviews-page.css +++ b/wp-content/themes/dekart/assets/css/reviews-page.css @@ -25,7 +25,8 @@ --color-bg: #fff; --color-bg-warm: #F8F4EF; --color-bg-alt: #EEF3EE; - --bg-hero: var(--color-bg-warm); + --color-bg-dark: #0F172A; + --bg-hero: var(--color-bg-dark); --bg-white: var(--color-bg); --bg-mint: var(--color-bg-alt); --accent: #7C3AED; @@ -39,7 +40,7 @@ position: relative; padding: 60px 0; overflow: hidden; - background: var(--color-text); + 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%); diff --git a/wp-content/themes/dekart/assets/js/add.js b/wp-content/themes/dekart/assets/js/add.js index a990b21..56f11c2 100644 --- a/wp-content/themes/dekart/assets/js/add.js +++ b/wp-content/themes/dekart/assets/js/add.js @@ -58,31 +58,19 @@ document.addEventListener("click", function (event) { if (target.classList.contains("btn-write") || target.closest('.btn-write-camp')) { var campBtn = target.closest('.btn-write-camp'); if (campBtn && campBtn.tagName === 'A') event.preventDefault(); - modalRequestForm.style=""; + if (!modalRequestForm) return; + modalRequestForm.classList.add('is-open'); document.querySelector('html').style = "overflow: hidden;"; - // Динамическая загрузка Bitrix24 (иначе не инициализируется в скрытом контейнере) - var container = modalRequestForm.querySelector('.b24-form-container'); - if (container && !container.querySelector('.b24-form')) { - var fForm = modalRequestForm.dataset.b24Form; - var fLoader = modalRequestForm.dataset.b24Loader; - if (fForm && fLoader) { - var s = document.createElement('script'); - s.setAttribute('data-b24-form', fForm); - s.setAttribute('data-skip-moving', 'true'); - s.text = "(function(w,d,u){var s=d.createElement('script');s.async=true;s.src=u+'?'+(Date.now()/180000|0);var h=d.getElementsByTagName('script')[0];h.parentNode.insertBefore(s,h);})(window,document,'" + fLoader + "');"; - container.appendChild(s); - } - } return; } if (target.classList.contains("btn-close-request-form") || target.classList.contains("btn-close-request-form-img")) { - modalRequestForm.style="display: none;"; + modalRequestForm.classList.remove('is-open'); document.querySelector('html').style = ""; return; } // Клик по фону (затемнению) — закрыть модалку if (target === modalRequestForm) { - modalRequestForm.style="display: none;"; + modalRequestForm.classList.remove('is-open'); document.querySelector('html').style = ""; return; } @@ -288,39 +276,7 @@ document.querySelectorAll('.header-menu').forEach(item => { } })(); -/* ── .open-bitrix-form → opens modal form ── */ -document.querySelectorAll('.open-bitrix-form').forEach(btn => { - btn.addEventListener('click', function(e) { - const modal = document.querySelector('.modal-request-form'); - if (modal) { - modal.style = ""; - // Динамическая загрузка Bitrix24 - var container = modal.querySelector('.b24-form-container'); - if (container && !container.querySelector('.b24-form')) { - var fForm = modal.dataset.b24Form; - var fLoader = modal.dataset.b24Loader; - if (fForm && fLoader) { - var s = document.createElement('script'); - s.setAttribute('data-b24-form', fForm); - s.setAttribute('data-skip-moving', 'true'); - s.text = "(function(w,d,u){var s=d.createElement('script');s.async=true;s.src=u+'?'+(Date.now()/180000|0);var h=d.getElementsByTagName('script')[0];h.parentNode.insertBefore(s,h);})(window,document,'" + fLoader + "');"; - container.appendChild(s); - } - } - } - }); -}); -// Закрытие модалки по Escape -document.addEventListener("keydown", function(e) { - if (e.key === "Escape") { - const modal = document.querySelector('.modal-request-form'); - if (modal && modal.style.display !== "none") { - modal.style.display = "none"; - document.querySelector('html').style = ""; - } - } -}); /* ── FAQ Accordion (mystyle-accordion) ── */ document.querySelectorAll('.mystyle-accordion-trigger').forEach(trigger => { diff --git a/wp-content/themes/dekart/footer.php b/wp-content/themes/dekart/footer.php index f1e4944..ba73539 100644 --- a/wp-content/themes/dekart/footer.php +++ b/wp-content/themes/dekart/footer.php @@ -68,22 +68,27 @@ ?> post_meta > theme option +// Приоритет: branch_button_script (Settings API) > theme option $b24_raw = get_option( 'branch_button_script', '' ); - -// Резерв: для страниц с post_meta или theme option (если филиал не настроен) -if ( empty( $b24_raw ) && is_singular() ) { - $b24_raw = carbon_get_post_meta( get_the_ID(), 'pksh_bitrix_script' ); -} if ( empty( $b24_raw ) ) { $b24_raw = carbon_get_theme_option( 'site_bitrix_script' ); } -$b24_params = dekart_parse_b24_script( $b24_raw ); +if ( ! empty( $b24_raw ) ) { + $_b24_form = ''; + $_b24_url = ''; + if ( preg_match( '/data-b24-form="([^"]+)"/', $b24_raw, $_m ) ) { + $_b24_form = $_m[1]; + } + if ( preg_match( "/\\(window,document,'([^']+)'\\)/", $b24_raw, $_m ) ) { + $_b24_url = $_m[1]; + } +} ?> +