From a7caf5b935e99c18490ef44719dba75464d0ca2c Mon Sep 17 00:00:00 2001 From: Dekart Deploy Bot Date: Mon, 13 Jul 2026 11:19:14 +0000 Subject: [PATCH] Global-2026-07-13 --- .gitignore | 14 + wp-content/themes/dekart/assets/css/main.css | 202 +- .../dekart/assets/css/podgotovka-k-shkole.css | 5166 +++++++---------- .../dekart/template-parts/pksh/results.php | 2 +- 4 files changed, 2325 insertions(+), 3059 deletions(-) diff --git a/.gitignore b/.gitignore index 2e63d5f..ee54648 100644 --- a/.gitignore +++ b/.gitignore @@ -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 diff --git a/wp-content/themes/dekart/assets/css/main.css b/wp-content/themes/dekart/assets/css/main.css index a26c2ff..24fb422 100644 --- a/wp-content/themes/dekart/assets/css/main.css +++ b/wp-content/themes/dekart/assets/css/main.css @@ -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; 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 f8412dc..1650b27 100644 --- a/wp-content/themes/dekart/assets/css/podgotovka-k-shkole.css +++ b/wp-content/themes/dekart/assets/css/podgotovka-k-shkole.css @@ -1,3044 +1,2290 @@ -/* ============================================================ - podgotovka-k-shkole.css — v4.0 (Hero Photo-led Redesign 2026) +/* ═══════════════════════════════════════════════════════════ + podgotovka-k-shkole.css — v5.1 (Blue+Amber Redesign 2026) Page-specific styles for "Подготовка к школе" Loaded only via page-podgotovka-k-shkole.php template - ============================================================ */ + ═══════════════════════════════════════════════════════════ */ -/* ============================================================ - 1. DESIGN TOKENS (page-pksh scoped) - ============================================================ */ -.page-pksh { - --bg-deep: #0F172A; - --bg-soft-2026: #F8FAFC; - --bg-warm: #F8F4F0; /* warm cream — primary warm section bg */ - --bg-warm-alt: #F5F0E8; /* warm stone — secondary warm section bg */ - --navy: #0F172A; - --slate-600: #475569; - --slate-400: #94A3B8; - --radius-2026: 24px; -} +@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap'); -/* ─── 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 */ - background: var(--accent-light, #F5F3FF); -} - -/* ─── 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). - --accent defined in main.css :root (#7C3AED). */ - -/* ============================================================ - 2. BANNER — address & scarcity - ============================================================ */ -.banner__address { - font-family: 'Roboto', sans-serif; - font-size: 16px; - color: #fff; - text-align: center; - margin-bottom: 8px; - letter-spacing: 0.02em; -} - -.banner__scarcity { - font-family: 'Roboto', sans-serif; - font-size: 14px; - font-weight: 700; - color: #fff; - text-align: center; - margin: 0 0 10px; - padding: 6px 18px; -background: rgba(124, 58, 237, 0.2); - border-radius: 100px; - backdrop-filter: blur(4px); - display: inline-block; - max-width: fit-content; -} - -.banner__scarcity strong { - color: #C084FC; -} - -.btn-banner--main { - font-size: 16px; - padding: 14px 32px; -} - -@media (max-width: 860px) { - .banner__address { - font-size: 14px; +/* ═══════════════════════════════════════════════════════════ + 1. PAGE-SPECIFIC TOKENS + Only values unique to this page. + All shared tokens live in main.css :root. + ═══════════════════════════════════════════════════════════ */ + .page-pksh { + --pksh-radius-card: var(--radius-lg, 24px); + --pksh-bg-warm: #FFFBEB; + --pksh-bg-warm-alt: #FEF3C7; + --pksh-text-warm: #78350F; + --pksh-bg-soft: #F8FAFC; + --pksh-bg-fomo: color-mix(in oklab, var(--color-secondary), white 70%); + --pksh-border-fomo: color-mix(in oklab, var(--color-secondary), transparent 60%); + --pksh-text-fomo: #78350F; + --pksh-gradient-btn: linear-gradient(135deg, #2563EB 0%, #F59E0B 100%); + --pksh-gradient-btn-hover: linear-gradient(135deg, #1D4ED8 0%, #D97706 100%); + --pksh-gradient-btn-alt: linear-gradient(135deg, #F59E0B 0%, #2563EB 100%); + --pksh-btn-shadow: 0 4px 16px rgba(37,99,235,0.35); + --pksh-btn-shadow-hover: 0 8px 28px rgba(37,99,235,0.45); + /* Bright unified button — emerald green: growth, success, \"зелёный свет\" */ + --pksh-gradient-btn-bright: linear-gradient(135deg, #10B981 0%, #059669 100%); + --pksh-gradient-btn-bright-hover: linear-gradient(135deg, #059669 0%, #047857 100%); + --pksh-btn-shadow-bright: 0 4px 20px rgba(16,185,129,0.40); + --pksh-btn-shadow-bright-hover: 0 8px 32px rgba(16,185,129,0.50); + --pksh-shadow-card: 0 2px 20px color-mix(in oklab, var(--color-text), transparent 93%); + --pksh-shadow-card-hover: 0 12px 40px color-mix(in oklab, var(--color-text), transparent 88%); + --pksh-shadow-lift: 0 6px 24px color-mix(in oklab, var(--color-text), transparent 93%); + --pksh-shadow-lift-hover: 0 8px 32px color-mix(in oklab, var(--color-text), transparent 90%); + --pksh-shadow-sticky: 0 -4px 20px color-mix(in oklab, var(--color-text), transparent 92%); + --pksh-border-warm: #E2E8F0; + --pksh-focus: 0 0 0 3px var(--color-primary); + --pksh-light-bg: color-mix(in oklab, var(--color-primary), white 92%); } - .banner__scarcity { - font-size: 12px; - padding: 4px 14px; - } - .btn-banner--main { - font-size: 14px; - padding: 12px 24px; - width: 100%; - max-width: 320px; - } -} -/* ============================================================ - 3. BENTO LABELS & HEADINGS - ============================================================ */ -.bento-label { - display: inline-block; - font-size: 0.8125rem; - font-weight: 700; - text-transform: uppercase; - letter-spacing: 0.08em; - color: var(--accent, #7C3AED); - margin-bottom: 8px; -} - -.bento-label--light { - color: #F59E0B; -} - -.bento-h2 { - font-size: 1.625rem; - font-weight: 700; - line-height: 1.25; - color: var(--navy); - margin: 0 0 12px; -} - -.bento-h2--light { - color: #fff; -} - -.bento-p { - font-size: 1rem; - line-height: 1.65; - color: var(--slate-600, #475569); - margin: 0 0 20px; -} - -.bento-p--light { - color: rgba(255,255,255,0.65); -} - -/* ── Centered section header (replaces inline style="text-align:center" on bento__full) ── */ -.section-header--centered { - text-align: center; -} - -@media (min-width: 640px) { - .bento-h2 { - font-size: 1.875rem; - } -} - -/* ============================================================ - 4. STEPS-3 — How classes work - ============================================================ */ -.steps-3 { - display: flex; - flex-direction: column; - gap: 16px; - margin-top: 16px; -} - -.step { - display: flex; - align-items: flex-start; - gap: 14px; -} - -.step__icon { - flex-shrink: 0; - 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 { - display: block; - font-size: 0.9375rem; - color: var(--navy); - margin-bottom: 2px; -} - -.step span:not(.step__icon) { - display: block; - font-size: 0.875rem; - color: var(--slate-600); - line-height: 1.4; -} - -/* ============================================================ - 5. OBJECTIONS — Why us cards - ============================================================ */ -/* WHITE cards on warm #F8F4F0 section = bright, contrast resolved. - Warm border + generous shadow replaces lost figure/ground. */ -.bento-card--objections { - background: #FFFFFF; - border: 1.5px solid #EDE8DF; - box-shadow: 0 6px 24px rgba(0, 0, 0, 0.07); -} -.bento-card--objections:hover { - box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); -} - -.objection-list { - display: flex; - flex-direction: column; - gap: 16px; -} - -.objection-item { - display: flex; - gap: 12px; - align-items: flex-start; -} - -.objection-item__icon { - flex-shrink: 0; - width: 32px; - height: 32px; - color: var(--accent, #7C3AED); - margin-top: 2px; - filter: drop-shadow(0 1px 3px rgba(124, 58, 237, 0.2)); -} - -.objection-item strong { - display: block; - font-size: 0.9375rem; - color: var(--navy); - margin-bottom: 2px; -} - -.objection-item p { - font-size: 0.875rem; - color: var(--slate-600); - line-height: 1.45; - margin: 0; -} - -/* ============================================================ - 6. RESULTS GRID — Highlight section - ============================================================ */ -.bento-card--highlight-results { - background: var(--bg-deep); - border-radius: var(--radius-2026); - padding: 32px 24px; -} - -@media (min-width: 640px) { - .bento-card--highlight-results { - padding: 40px 32px; - } -} - -.results-grid { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 0; - margin-top: 8px; -} - -@media (min-width: 640px) { - .results-grid { - grid-template-columns: repeat(4, 1fr); +/* ═══════════════════════════════════════════════════════════ + 2. BASE — typography, section defaults, shared overrides + ═══════════════════════════════════════════════════════════ */ + .page-pksh { + overflow-x: clip; gap: 0; + background: var(--color-bg, #FFFFFF); } -} -.result-item { - text-align: center; - padding: 16px 12px; - position: relative; -} - -@media (min-width: 640px) { - .result-item { - padding: 20px 16px; + /* ── Typography ── */ + .page-pksh .bento-h2 { + font-family: var(--font-display); + font-size: clamp(1.5rem, 2.5vw, 2.25rem); + font-weight: 700; + line-height: 1.2; + color: var(--color-text); + margin: 0 0 12px; + text-wrap: balance; } - .result-item + .result-item::before { + + .page-pksh .bento-h2--light { color: var(--color-text-on-dark); } + + .page-pksh .bento-p { + font-size: clamp(1rem, 1.2vw, 1.0625rem); + line-height: 1.7; + color: var(--color-text-muted); + margin: 0 0 20px; + max-width: 70ch; + text-wrap: pretty; + } + + .page-pksh .bento-p--light { color: color-mix(in oklab, var(--color-text-on-dark), transparent 35%); } + + .page-pksh .bento-label { + display: inline-block; + font-size: 0.8125rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.08em; + color: var(--color-primary); + margin-bottom: var(--space-2, 8px); + } + + .page-pksh .bento-label--light { color: var(--color-rating); } + + .page-pksh .section-header--centered { + text-align: center; + } + .page-pksh .section-header--centered .bento-h2, + .page-pksh .section-header--centered .bento-p { + max-width: none; + margin-left: auto; + margin-right: auto; + } + .page-pksh .section-header--centered .bento-p { + max-width: 70ch; + } + + /* ── Section vertical rhythm ── */ + .page-pksh .pksh-section, + .page-pksh .section-bg:not(.ds-hero):not(.faq-section) { + padding: clamp(48px, 6vw, 80px) clamp(16px, 3vw, 32px); + } + + /* ── Scroll margin for anchor nav ── */ + .page-pksh #how-it-works, + .page-pksh #results, + .page-pksh #programs, + .page-pksh #teachers, + .page-pksh #faq, + .page-pksh #final-cta { + scroll-margin-top: 100px; + } + + /* ── Bento grid fill ── */ + .page-pksh .bento { width: 100%; } + .page-pksh .bento__full, + .page-pksh .bento__half, + .page-pksh .bento__wide { + min-width: 0; + box-sizing: border-box; + } + + /* ── DS Hero heading override ── */ + .page-pksh .ds-hero__h1 { + font-family: var(--font-display); + font-size: clamp(28px, 4vw, 48px); + letter-spacing: -0.01em; + } + + /* ── Hero footnote ── */ + .page-pksh .ds-hero__footnote, + .page-pksh .ds-hero__footnote-link { + font-size: 1.1em; + color: var(--color-primary); + text-decoration: none; + cursor: default; + vertical-align: super; + line-height: 0; + } + .page-pksh .ds-hero__footnote-link { + cursor: pointer; + transition: color var(--transition-fast, 200ms ease-out); + } + .page-pksh .ds-hero__footnote-link:hover { + color: var(--color-primary-hover); + text-decoration: underline; + } + + /* ── Legacy btn-lilac override ── */ + .page-pksh button.btn-lilac, + .page-pksh a.btn-lilac, + .page-pksh .btn-lilac { + background: var(--pksh-gradient-btn-bright); + font-family: var(--font-body, 'Roboto', sans-serif); + font-weight: 700; + text-transform: none; + border-radius: var(--radius-pill, 28px); + border: none; + box-shadow: var(--pksh-btn-shadow-bright); + transition: transform var(--transition-fast, 200ms ease-out), box-shadow var(--transition-fast, 200ms ease-out); + } + .page-pksh .btn-lilac:hover, + .page-pksh .btn-lilac:focus { + background: var(--pksh-gradient-btn-bright-hover); + transform: translateY(-2px); + box-shadow: var(--pksh-btn-shadow-bright-hover); + } + + /* ── Price section (legacy) ── */ + .page-pksh .price .container { + max-width: 1280px; + padding-left: clamp(16px, 3vw, 32px); + padding-right: clamp(16px, 3vw, 32px); + } + + /* ── Mobile: body padding for sticky CTA ── */ + @media (max-width: 860px) { + body { padding-bottom: 76px; } + } + +/* ═══════════════════════════════════════════════════════════ + 3. COMPONENTS + ═══════════════════════════════════════════════════════════ */ + /* ── 3a. BANNER (hero photo-led) ── */ + .page-pksh .banner__address { + display: flex; + align-items: center; + justify-content: center; + gap: 6px; + font-size: clamp(14px, 1.8vw, 16px); + color: var(--color-text-on-dark); + text-align: center; + margin-bottom: 8px; + letter-spacing: 0.02em; + opacity: 0.9; + } + + .page-pksh .banner__scarcity { + display: inline-block; + max-width: fit-content; + margin: 0 auto 10px; + padding: clamp(4px, 0.6vw, 6px) clamp(14px, 2vw, 18px); + font-size: clamp(12px, 1.4vw, 14px); + font-weight: 700; + color: var(--color-text-on-dark); + text-align: center; + border-radius: var(--radius-pill, 100px); + background: color-mix(in oklab, var(--color-primary), transparent 80%); + backdrop-filter: blur(4px); + animation: pksh-pulse-scarcity 2s ease-in-out infinite; + } + .page-pksh .banner__scarcity strong { color: var(--color-purple-light); } + .page-pksh .banner__scarcity:hover { + animation-play-state: paused; + background: color-mix(in oklab, var(--color-primary), transparent 60%); + } + + .page-pksh .banner__guarantee { + display: inline-block; + max-width: fit-content; + margin: 10px 0 0; + padding: clamp(6px, 0.8vw, 8px) clamp(14px, 2vw, 18px); + font-size: clamp(11px, 1.2vw, 13px); + font-weight: 600; + color: var(--color-accent, #FFD43E); + text-align: center; + background: color-mix(in oklab, var(--color-text), transparent 40%); + border: 1px solid color-mix(in oklab, var(--color-accent), transparent 70%); + border-radius: var(--radius-pill, 100px); + backdrop-filter: blur(4px); + } + .page-pksh .banner__guarantee strong { color: var(--color-text-on-dark); } + + .page-pksh .btn-banner--main { + font-size: clamp(14px, 1.6vw, 16px); + padding: clamp(12px, 1.5vw, 14px) clamp(24px, 3vw, 32px); + background: var(--pksh-gradient-btn); + border: none; + color: var(--color-text-on-dark); + font-family: var(--font-body, 'Roboto', sans-serif); + font-weight: 700; + text-transform: none; + letter-spacing: 0; + border-radius: var(--radius-pill, 28px); + cursor: pointer; + box-shadow: var(--pksh-btn-shadow); + transition: transform var(--transition-fast, 200ms ease-out), box-shadow var(--transition-fast, 200ms ease-out); + } + .page-pksh .btn-banner--main:hover { + background: var(--pksh-gradient-btn-hover); + transform: translateY(-2px); + box-shadow: var(--pksh-btn-shadow-hover); + } + .page-pksh .btn-banner--main:focus-visible { + outline: 3px solid var(--color-primary); + outline-offset: 3px; + } + + @media (max-width: 860px) { + .page-pksh .banner { + padding-top: 76px; + margin-top: -76px; + } + .page-pksh .banner__content.mobile .btn-write { + display: block; + width: 100%; + max-width: 320px; + margin: 10px auto 0; + padding: 14px 24px; + font-size: 16px; + border-radius: 32px; + background: var(--pksh-gradient-btn-alt); + border: none; + color: var(--color-text-on-dark); + font-weight: 700; + font-family: var(--font-body, 'Roboto', sans-serif); + cursor: pointer; + transition: opacity var(--transition-fast, 200ms ease-out); + } + .page-pksh .banner__content.mobile .btn-write:hover { opacity: 0.95; } + .page-pksh .banner__content.mobile .btn-write:focus-visible { + outline: 3px solid var(--color-primary); + outline-offset: 3px; + } + .page-pksh .banner__content.mobile { + padding: 16px 20px; + display: flex; + flex-direction: column; + align-items: center; + gap: 2px; + } + .page-pksh .banner__content.mobile .page_title { + font-size: 22px; + line-height: 1.2; + margin: 4px 0; + } + .page-pksh .banner__content.mobile .banner_text { + font-size: 15px; + margin: 4px 0; + } + .page-pksh .banner__content.mobile .banner__scarcity { + display: block; + margin: 8px auto 0; + font-size: 12px; + } + .page-pksh .banner__content.mobile .banner__guarantee { + display: inline-block; + margin: 8px auto 0; + font-size: clamp(0.6875rem, 0.6rem + 0.25vw, 0.8125rem); + } + .page-pksh .banner__content.mobile .banner__address { + font-size: 13px; + margin-bottom: 6px; + opacity: 0.85; + } + } + + /* ── 3b. ANCHOR NAV ── */ + .page-pksh .pksh-anchor-nav { + display: flex; + flex-wrap: nowrap; + justify-content: center; + gap: 10px; + margin: 0; + padding: 0; + overflow: visible; + width: 100%; + } + + .page-pksh .pksh-anchor-link { + flex-shrink: 0; + padding: 14px 28px; + border-radius: var(--radius-pill, 100px); + background: var(--pksh-gradient-btn-bright); + color: var(--color-text-on-dark); + font-size: 1rem; + font-weight: 700; + text-decoration: none; + border: none; + box-shadow: var(--pksh-btn-shadow-bright); + transition: transform var(--transition-fast, 200ms ease-out), box-shadow var(--transition-fast, 200ms ease-out); + white-space: nowrap; + letter-spacing: 0.02em; + } + .page-pksh .pksh-anchor-link:hover, + .page-pksh .pksh-anchor-link:focus-visible { + background: var(--pksh-gradient-btn-bright-hover); + color: var(--color-text-on-dark); + transform: translateY(-2px); + box-shadow: var(--pksh-btn-shadow-bright-hover); + } + .page-pksh .pksh-anchor-link:focus-visible { + outline: 3px solid var(--color-primary); + outline-offset: 3px; + } + + .page-pksh .pksh-anchor-link--cta { + background: var(--pksh-gradient-btn-bright); + border-color: transparent; + box-shadow: var(--pksh-btn-shadow-bright); + } + .page-pksh .pksh-anchor-link--cta:hover, + .page-pksh .pksh-anchor-link--cta:focus-visible { + background: var(--pksh-gradient-btn-bright-hover); + box-shadow: var(--pksh-btn-shadow-bright-hover); + } + + @media (max-width: 860px) { + .page-pksh .pksh-anchor-nav { + flex-wrap: wrap; + justify-content: center; + gap: 8px; + } + .page-pksh .pksh-anchor-link { + padding: 10px 18px; + font-size: 0.875rem; + min-height: 44px; + display: inline-flex; + align-items: center; + } + } + + /* ── 3c. GUARANTEE HERO ── */ + .page-pksh .guarantee-hero { + display: flex; + align-items: stretch; + flex-wrap: wrap; + gap: 20px 32px; + margin: 0 auto; + padding: clamp(28px, 3.5vw, 40px) clamp(20px, 3vw, 36px); + background: linear-gradient(135deg, var(--color-bg-alt) 0%, var(--pksh-bg-warm-alt) 50%, var(--color-bg-alt) 100%); + border: 2px solid var(--color-primary); + border-radius: var(--pksh-radius-card); + } + + .page-pksh .guarantee-hero__shield { + flex-shrink: 0; + font-size: clamp(3rem, 4vw, 5rem); + line-height: 1; + } + + .page-pksh .guarantee-hero__content { + flex: 1; + display: flex; + flex-direction: column; + align-items: flex-start; + } + + .page-pksh .guarantee-hero__text { + font-size: clamp(0.9375rem, 1.1vw, 1rem); + line-height: 1.6; + color: var(--color-text-muted); + margin: 0 0 24px; + } + .page-pksh .guarantee-hero__text strong { color: var(--color-primary-dark); } + + .page-pksh .guarantee-hero__badges { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 12px; + flex-shrink: 0; + } + + .page-pksh .bento[aria-label="Гарантия"] { background: transparent; } + + @media (max-width: 860px) { + .page-pksh .guarantee-hero { + flex-direction: column; + text-align: center; + gap: 20px; + } + .page-pksh .guarantee-hero__badges { + flex-direction: row; + gap: 16px; + } + .page-pksh .guarantee-hero__shield { font-size: 3rem; } + .page-pksh .guarantee-hero__content { align-items: center; } + .page-pksh .guarantee-hero__text { margin-bottom: 20px; } + } + + /* ── 3d. SOCIAL COUNTERS (social proof) ── */ + .page-pksh .bento[aria-label="Социальное доказательство"] { + position: relative; + padding: clamp(32px, 4vw, 48px) clamp(16px, 3vw, 32px) 0; + } + .page-pksh .bento[aria-label="Социальное доказательство"]::before { content: ''; position: absolute; - top: 20%; - left: 0; - width: 1px; - height: 60%; - background: rgba(255,255,255,0.12); + top: 0; + bottom: 0; + left: 50%; + width: 100vw; + transform: translateX(-50%); + background: var(--color-bg-alt); + z-index: -1; + pointer-events: none; } -} - -.result-item__value { - display: block; - font-size: 2.25rem; - font-weight: 800; - color: var(--accent, #7C3AED); - line-height: 1; - margin-bottom: 8px; -} - -@media (min-width: 640px) { - .result-item__value { - font-size: 2.75rem; + .page-pksh .bento[aria-label="Социальное доказательство"]::after { + content: ''; + position: absolute; + inset: 0; + background-image: radial-gradient(color-mix(in oklab, var(--color-primary), transparent 96%) 1px, transparent 1px); + background-size: 24px 24px; + pointer-events: none; } -} -.result-item__desc { - display: block; - font-size: 0.8125rem; - color: rgba(255,255,255,0.65); - line-height: 1.4; - max-width: 180px; - margin: 0 auto; -} - -/* ============================================================ - 7. GUARANTEE Bento Card - ============================================================ */ -/* .bento-card--guarantee moved to .guarantee-block--centered */ - -/* ============================================================ - 8. (removed — FAQ moved to section 44) - ============================================================ */ - -/* ============================================================ - 9. PROGRAMS GRID - ============================================================ */ -/* ============================================================ - 9. PROGRAMS — карточки программ v3 - ============================================================ */ -.programs-grid { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 24px; - margin: 28px 0 0; - align-items: start; -} - -/* ── Карточка ── */ -.prog-card { - display: flex; - flex-direction: column; - border-radius: 24px; - overflow: hidden; - background: #FFFFFF; - box-shadow: 0 2px 20px rgba(0,0,0,0.07); - transition: transform 0.25s ease, box-shadow 0.25s ease; - position: relative; -} - -.prog-card:hover { - transform: translateY(-4px); - box-shadow: 0 12px 40px rgba(0,0,0,0.12); -} - -.prog-card--premium { - border: 2px solid #7C3AED; -} - -/* ── Шапка ── */ -.prog-card__header { - position: relative; - display: flex; - flex-direction: column; - align-items: flex-start; - gap: 8px; - padding: 16px 20px; - min-height: 90px; -} - -.prog-card--base .prog-card__header { - background: linear-gradient(145deg, #7C3AED 0%, #6D28D9 100%); - color: #FFFFFF; -} - -.prog-card--premium .prog-card__header { - background: linear-gradient(145deg, #6D28D9 0%, #5B21B6 100%); - color: #FFFFFF; -} - -/* Бейдж "Первое занятие — бесплатно" */ -.prog-card__header-badge { - display: inline-flex; - padding: 3px 10px; - background: rgba(255,255,255,0.15); - backdrop-filter: blur(4px); - color: #FFFFFF; - font-size: 10px; - font-weight: 600; - letter-spacing: 0.03em; - border-radius: 100px; -} - -/* Бейдж "Популярный выбор" (в потоке, под подзаголовком) */ -.prog-card__popular { - display: inline-flex; - padding: 3px 10px; - background: #F59E0B; - color: #0F172A; - font-size: 10px; - font-weight: 700; - border-radius: 100px; - box-shadow: 0 2px 8px rgba(245,158,11,0.3); - margin-top: 6px; -} - -/* Иконка звезды */ -.prog-card__icon { - font-size: 44px; - line-height: 1; - flex-shrink: 0; -} - -.prog-card__header-row { - display: flex; - align-items: center; - gap: 10px; -} - -.prog-card__name { - font-size: 26px; - font-weight: 700; - color: #FFFFFF; - text-align: left; - line-height: 1.15; - margin-bottom: 3px; - letter-spacing: -0.02em; -} - -.prog-card__subname { - font-size: 11px; - color: rgba(255,255,255,0.65); - text-align: left; - line-height: 1.3; - font-weight: 400; -} - -/* ── Тело карточки ── */ -.prog-card__body { - display: flex; - flex-direction: column; -} - -/* ── Цена ── */ -.prog-card__pricing { - padding: 20px 24px 16px; - border-bottom: 1px solid #E9EDF4; - text-align: left; -} - -.prog-card__price { - font-size: 28px; - font-weight: 800; - color: #0F172A; - line-height: 1; - display: block; -} - -.prog-card__price--premium { - color: #0F172A; -} - -.prog-card__price-period { - font-size: 13px; - font-weight: 400; - color: #64748B; - margin-left: 4px; -} - -.prog-card__price-sub { - font-size: 14px; - font-weight: 600; - color: #7C3AED; - margin-top: 4px; -} - -.prog-card__price-single { - font-size: 12px; - color: #94A3B8; - margin-top: 2px; -} - -.prog-card__urgency { - margin-top: 8px; - font-size: 13px; - font-weight: 600; - color: #DC2626; - display: flex; - align-items: center; - gap: 6px; -} - -.prog-card__urgency::before { - content: ''; - display: inline-block; - width: 8px; - height: 8px; - border-radius: 50%; - background: #DC2626; - flex-shrink: 0; -} - -/* ── Результат ── */ -.prog-card__result { - display: flex; - align-items: center; - gap: 10px; - padding: 12px 24px; - background: #F0FDF4; - font-size: 14px; - line-height: 1.45; - color: #166534; - border-bottom: 1px solid #E9EDF4; - text-align: left; -} - -.prog-card__result-icon { - font-size: 44px; - flex-shrink: 0; - line-height: 1; -} - -.prog-card__result strong { - font-weight: 700; - color: #15803D; -} - -/* ── Блоки ── */ -.prog-card__block { - padding: 16px 24px; - border-bottom: 1px solid #E9EDF4; -} - -.prog-card__block:last-of-type { - border-bottom: none; -} - -.prog-card__block-title { - font-size: 11px; - font-weight: 700; - letter-spacing: 0.06em; - color: #64748B; - text-transform: uppercase; - margin-bottom: 10px; -} - -/* ── Чеклист ── */ -.prog-card__checklist { - list-style: none; - padding: 0; - margin: 0; - display: flex; - flex-direction: column; -} - -.prog-card__checklist li { - display: flex; - align-items: flex-start; - gap: 10px; - padding: 5px 0; - font-size: 14px; - line-height: 1.4; - color: #1E293B; - text-align: left; -} - -.prog-card__checklist li::before { - content: "✓"; - flex-shrink: 0; - width: 18px; - font-size: 14px; - font-weight: 700; - color: #7C3AED; - margin-top: 1px; -} - -.prog-card__checklist--plus { - font-weight: 600; -} - -.prog-card__checklist--plus::before { - color: #F59E0B !important; -} - -/* ── Блок сравнения (премиум) ── */ -.prog-card__compare { - display: flex; - align-items: center; - gap: 10px; - padding: 12px 24px; - margin: 0; - background: #FFF7ED; - font-size: 14px; - line-height: 1.45; - color: #92400E; - border-bottom: 1px solid #E9EDF4; - text-align: left; -} - -.prog-card__compare-icon { - font-size: 44px; - flex-shrink: 0; - line-height: 1; -} - -.prog-card__compare strong { - font-weight: 700; -} - -/* ── Расписание ── */ -.prog-card__schedule-wrap { - padding: 16px 24px; - border-bottom: 1px solid #E9EDF4; -} - -.prog-card__schedule { - display: inline-flex; - align-items: center; - padding: 8px 16px; - background: #F5F3FF; - border-radius: 8px; - font-size: 15px; - font-weight: 600; - color: #7C3AED; -} - -/* ── Структура ── */ -.prog-card__struct-wrap { - padding: 16px 24px; - border-bottom: 1px solid #E9EDF4; - text-align: center; -} - -.prog-card__tags { - display: flex; - flex-wrap: wrap; - gap: 6px; - justify-content: center; -} - -.prog-card__tag { - display: inline-flex; - padding: 5px 12px; - font-size: 13px; - font-weight: 500; - border-radius: 100px; - background: #F5F3FF; - color: #7C3AED; -} - -/* ── Доверие ── */ -.prog-card__trust { - display: flex; - flex-wrap: wrap; - justify-content: center; - gap: 8px 16px; - padding: 12px 24px; - border-bottom: 1px solid #E9EDF4; - font-size: 13px; - color: #64748B; -} - -/* ── Соцдок-во ── */ -.prog-card__social-proof { - display: flex; - justify-content: center; - gap: 24px; - padding: 10px 24px; - border-bottom: 1px solid #E9EDF4; - font-size: 13px; -} - -.prog-card__rating { - font-weight: 600; - color: #1E293B; -} - -.prog-card__rating::before { - content: "★"; - color: #F59E0B; - margin-right: 4px; -} - -.prog-card__graduates { - color: #64748B; -} - -/* ── Кнопка ── */ -.prog-card__btn-wrap { - padding: 16px 24px 4px; -} - -.prog-card__btn { - display: block; - width: 100%; - padding: 14px; - border: none; - border-radius: 14px; - font-family: inherit; - font-size: 16px; - font-weight: 700; - color: #FFFFFF; - cursor: pointer; - text-align: center; - text-decoration: none; - transition: all 0.2s ease; -} - -.prog-card--base .prog-card__btn { - background: #7C3AED; -} - -.prog-card--premium .prog-card__btn { - background: linear-gradient(135deg, #7C3AED, #A855F7); - box-shadow: 0 4px 20px rgba(124,58,237,0.3); -} - -.prog-card__btn:hover { - transform: translateY(-1px); - box-shadow: 0 6px 24px rgba(124,58,237,0.4) !important; -} - -/* ── Футер ── */ -.prog-card__footnote { - text-align: center; - font-size: 12px; - color: #94A3B8; - margin: 6px 24px 16px; -} - -/* ── Адаптив ── */ -@media (max-width: 860px) { - .programs-grid { - gap: 16px; + .page-pksh .bento[aria-label="Социальное доказательство"] .social-counters { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 24px; + margin: 0 auto; + width: 100%; + position: relative; + z-index: 1; } - .prog-card__header { + + .page-pksh .bento[aria-label="Социальное доказательство"] .social-counter { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + background: var(--color-bg); + border: 1px solid var(--pksh-border-warm); + border-radius: 20px; + box-shadow: var(--shadow-sm, 0 2px 12px rgba(15,23,42,0.06)); + overflow: hidden; + transition: box-shadow var(--transition-base, 300ms ease-out), transform var(--transition-base, 300ms ease-out); + } + .page-pksh .bento[aria-label="Социальное доказательство"] .social-counter:hover { + box-shadow: var(--shadow-lg, 0 16px 40px rgba(15,23,42,0.12)); + transform: translateY(-4px); + } + + .page-pksh .bento[aria-label="Социальное доказательство"] .social-counter__top { + width: 100%; + height: 5px; + flex-shrink: 0; + } + .page-pksh .bento[aria-label="Социальное доказательство"] .social-counter:nth-child(1) .social-counter__top { + background: linear-gradient(90deg, var(--color-primary), var(--color-secondary)); + } + .page-pksh .bento[aria-label="Социальное доказательство"] .social-counter:nth-child(2) .social-counter__top { + background: linear-gradient(90deg, var(--color-rating), var(--color-orange)); + } + .page-pksh .bento[aria-label="Социальное доказательство"] .social-counter:nth-child(3) .social-counter__top { + background: linear-gradient(90deg, var(--color-success), color-mix(in oklab, var(--color-success), white 40%)); + } + .page-pksh .bento[aria-label="Социальное доказательство"] .social-counter:nth-child(4) .social-counter__top { + background: linear-gradient(90deg, var(--color-pink), var(--color-pink-light)); + } + + .page-pksh .bento[aria-label="Социальное доказательство"] .social-counter__body { + padding: clamp(18px, 2vw, 24px) clamp(12px, 1.5vw, 16px) clamp(22px, 2.5vw, 26px); + display: flex; + flex-direction: column; + align-items: center; + gap: 10px; + width: 100%; + } + + .page-pksh .bento[aria-label="Социальное доказательство"] .social-counter__icon { + font-size: clamp(24px, 2.5vw, 30px); + width: clamp(48px, 4vw, 56px); + height: clamp(48px, 4vw, 56px); + display: flex; + align-items: center; + justify-content: center; + background: linear-gradient(135deg, color-mix(in oklab, var(--color-primary), transparent 92%), color-mix(in oklab, var(--color-secondary), transparent 95%)); + border-radius: var(--radius-photo, 16px); + transition: transform var(--transition-base, 300ms ease-out), box-shadow var(--transition-base, 300ms ease-out); + } + .page-pksh .social-counter:hover .social-counter__icon { transform: scale(1.08); } + + .page-pksh .bento[aria-label="Социальное доказательство"] .social-counter:nth-child(2) .social-counter__icon { + background: linear-gradient(135deg, rgba(245,158,11,0.12), rgba(249,115,22,0.08)); + } + .page-pksh .bento[aria-label="Социальное доказательство"] .social-counter:nth-child(3) .social-counter__icon { + background: linear-gradient(135deg, rgba(16,185,129,0.10), rgba(52,211,153,0.06)); + } + .page-pksh .bento[aria-label="Социальное доказательство"] .social-counter:nth-child(4) .social-counter__icon { + background: linear-gradient(135deg, rgba(236,72,153,0.10), rgba(244,114,182,0.06)); + } + + .page-pksh .bento[aria-label="Социальное доказательство"] .social-counter__number { + font-family: var(--font-display, 'Oswald', sans-serif); + font-size: clamp(28px, 3vw, 34px); + font-weight: 700; + color: var(--color-text, #1E293B); + line-height: 1; + } + .page-pksh .bento[aria-label="Социальное доказательство"] .social-counter:nth-child(1) .social-counter__number { color: var(--color-primary); } + .page-pksh .bento[aria-label="Социальное доказательство"] .social-counter:nth-child(2) .social-counter__number { color: var(--color-warning); } + .page-pksh .bento[aria-label="Социальное доказательство"] .social-counter:nth-child(3) .social-counter__number { color: var(--color-success); } + .page-pksh .bento[aria-label="Социальное доказательство"] .social-counter:nth-child(4) .social-counter__number { color: var(--color-pink-dark); } + + .page-pksh .bento[aria-label="Социальное доказательство"] .social-counter__label { + font-size: clamp(13px, 1.2vw, 14px); + color: var(--color-text-light); + line-height: 1.35; + } + + @media (max-width: 860px) { + .page-pksh .bento[aria-label="Социальное доказательство"] .social-counters { + grid-template-columns: repeat(2, 1fr); + gap: 14px; + max-width: 500px; + } + } + + /* ── 3e. MICRO-COMMIT (checklist download) ── */ + .page-pksh .bento[aria-label="Скачать чек-лист"] { + background: transparent; + } + + /* Dark backdrop: override bento-card white bg so dark micro-commit + doesn't show a white ring behind it. */ + .page-pksh .bento-card--checklist { + background: var(--color-bg-dark); + } + + .page-pksh .micro-commit { + display: flex; + align-items: center; + gap: clamp(24px, 3vw, 40px); + width: 100%; + padding: clamp(32px, 3vw, 40px) clamp(20px, 3vw, 36px); + background: var(--color-bg-dark); + border: none; + border-radius: var(--pksh-radius-card); + box-shadow: 0 20px 60px color-mix(in oklab, var(--color-text), transparent 70%); + text-align: center; + position: relative; + } + + .page-pksh .micro-commit__content { + flex: 1; + display: flex; + flex-direction: column; + align-items: center; + } + + .page-pksh .bento[aria-label="Скачать чек-лист"] .bento-label { + color: var(--color-rating); + font-weight: 700; + letter-spacing: 0.03em; + } + .page-pksh .bento[aria-label="Скачать чек-лист"] .bento-h2 { + font-size: clamp(1.375rem, 2vw, 1.75rem); + color: var(--color-text-on-dark); + } + .page-pksh .bento[aria-label="Скачать чек-лист"] .bento-p { + font-size: 1rem; + color: var(--color-slate-300); + line-height: 1.6; + } + + .page-pksh .bento[aria-label="Скачать чек-лист"] .micro-commit__action { + display: flex; + justify-content: center; + margin-top: 12px; + } + + .page-pksh .bento[aria-label="Скачать чек-лист"] .micro-commit__btn { + padding: 16px 40px; + font-size: 1.0625rem; + font-weight: 700; + border-radius: var(--radius-pill, 100px); + background: var(--pksh-gradient-btn); + color: var(--color-text-on-dark); + border: none; + box-shadow: var(--pksh-btn-shadow); + cursor: pointer; + transition: transform var(--transition-fast, 200ms ease-out), box-shadow var(--transition-fast, 200ms ease-out); + } + .page-pksh .bento[aria-label="Скачать чек-лист"] .micro-commit__btn:hover { + transform: translateY(-2px); + box-shadow: var(--pksh-btn-shadow-hover); + } + .page-pksh .bento[aria-label="Скачать чек-лист"] .micro-commit__btn:focus-visible { + outline: 3px solid var(--color-primary); + outline-offset: 3px; + } + + .page-pksh .bento[aria-label="Скачать чек-лист"] .micro-commit__visual { + flex-shrink: 0; + width: 130px; + height: 170px; + position: relative; + display: flex; + align-items: center; + justify-content: center; + background: var(--color-slate-800); + border: 1.5px solid var(--color-slate-700); + border-radius: var(--radius-sm, 12px); + box-shadow: 0 4px 16px color-mix(in oklab, var(--color-text), transparent 80%); + } + + /* Fill parent so SVG isn't 0×0 */ + .page-pksh .micro-commit__svg { + width: 100%; + height: 100%; + display: block; + } + + @media (max-width: 860px) { + .page-pksh .micro-commit { + flex-direction: column; + text-align: center; + box-shadow: 0 12px 40px color-mix(in oklab, var(--color-text), transparent 75%); + } + .page-pksh .bento[aria-label="Скачать чек-лист"] .micro-commit__visual { display: none; } + .page-pksh .bento[aria-label="Скачать чек-лист"] .bento-h2 { font-size: 1.375rem; } + } + + /* ── 3f. HOW IT WORKS (steps + objections) ── */ + .page-pksh .steps-3 { + display: flex; + flex-direction: column; + gap: var(--space-3, 16px); + margin-top: var(--space-3, 16px); + } + + .page-pksh .step { + display: flex; + align-items: flex-start; + gap: 14px; + } + + .page-pksh .step__icon { + flex-shrink: 0; + width: 32px; + height: 32px; + color: var(--color-primary); + margin-top: 2px; + filter: drop-shadow(0 1px 3px color-mix(in oklab, var(--color-primary), transparent 80%)); + } + .page-pksh .step__icon svg { + width: 24px; + height: 24px; + display: block; + } + + .page-pksh .step strong { + display: block; + font-size: 0.9375rem; + color: var(--color-text); + margin-bottom: 2px; + } + .page-pksh .step > :not(.step__icon) { + display: block; + font-size: 0.875rem; + color: var(--color-text-muted); + line-height: 1.4; + } + + .page-pksh .objection-list { + display: flex; + flex-direction: column; + gap: var(--space-3, 16px); + } + + .page-pksh .objection-item { + display: flex; + gap: 12px; + align-items: flex-start; + } + + .page-pksh .objection-item__icon { + flex-shrink: 0; + width: 32px; + height: 32px; + color: var(--color-primary); + margin-top: 2px; + filter: drop-shadow(0 1px 3px color-mix(in oklab, var(--color-primary), transparent 80%)); + } + + .page-pksh .objection-item strong { + display: block; + font-size: 0.9375rem; + color: var(--color-text); + margin-bottom: 2px; + } + .page-pksh .objection-item p { + font-size: 0.875rem; + color: var(--color-text-muted); + line-height: 1.45; + max-width: 60ch; + margin: 0; + } + + /* ── Cards on warm bg ── */ + .page-pksh .bento-card--objections, + .page-pksh .bento-card--soft { + background: var(--color-bg); + border: 1.5px solid var(--pksh-border-warm); + box-shadow: var(--pksh-shadow-lift); + border-radius: var(--pksh-radius-card); + } + .page-pksh .bento-card--objections:hover, + .page-pksh .bento-card--soft:hover { + box-shadow: var(--pksh-shadow-lift-hover); + } + + .page-pksh .bento[aria-label="Как проходят занятия"], + .page-pksh .bento#teachers { background: transparent; } + + /* ── 3g. CTA TEST (free testing) ── */ + .page-pksh .bento[aria-label="Запись на тестирование"] { background: transparent; } + + .page-pksh .cta-test { + max-width: 800px; + margin: 0 auto; + text-align: center; + padding: 8px 0; + } + + .page-pksh .cta-test__badge { + display: inline-block; + padding: 6px 18px; + background: var(--color-rating); + color: var(--color-text-on-dark); + font-size: 0.875rem; + font-weight: 700; + border-radius: var(--radius-pill, 100px); + margin-bottom: 16px; + text-transform: uppercase; + letter-spacing: 0.04em; + } + + .page-pksh .cta-test__title { margin-bottom: 12px; } + + .page-pksh .cta-test__text { + font-size: clamp(1rem, 1.1vw, 1.0625rem); + line-height: 1.65; + color: var(--color-text-muted); + max-width: 680px; + margin: 0 auto 28px; + } + + .page-pksh .cta-test__btn { + padding: clamp(16px, 2vw, 18px) clamp(32px, 4vw, 44px); + font-size: clamp(1rem, 1.1vw, 1.125rem); + font-weight: 700; + background: var(--pksh-gradient-btn-bright); + border-radius: var(--radius-pill, 100px); + border: none; + box-shadow: var(--pksh-btn-shadow-bright); + transition: transform var(--transition-fast, 200ms ease-out), box-shadow var(--transition-fast, 200ms ease-out); + } + .page-pksh .cta-test__btn:hover { + transform: translateY(-2px); + box-shadow: var(--pksh-btn-shadow-bright-hover); + } + .page-pksh .cta-test__btn:focus-visible { + outline: 3px solid var(--color-primary); + outline-offset: 3px; + } + + @media (max-width: 860px) { + .page-pksh .cta-test { padding: 4px 0; } + .page-pksh .cta-test__text { font-size: 1rem; } + .page-pksh .cta-test__btn { + width: 100%; + } + } + + /* ── 3h. HONEST TIMER ── */ + .page-pksh .honest-timer { + text-align: center; + margin: 24px 0 16px; + } + .page-pksh .honest-timer__label { + display: block; + font-size: 0.875rem; + color: var(--color-text-light, #64748B); + margin-bottom: 12px; + font-weight: 600; + } + .page-pksh .honest-timer__digits { + display: inline-flex; + align-items: center; + gap: 8px; + } + .page-pksh .honest-timer__unit { + display: flex; + flex-direction: column; + align-items: center; + gap: 4px; + } + .page-pksh .honest-timer__num { + display: block; + min-width: clamp(44px, 5vw, 60px); + padding: clamp(8px, 1vw, 10px) clamp(10px, 1.5vw, 14px); + background: linear-gradient(135deg, var(--color-indigo-950), var(--color-indigo-900)); + color: var(--color-text-on-dark); + font-size: clamp(1.25rem, 1.5vw, 1.5rem); + font-weight: 700; + font-variant-numeric: tabular-nums; + border-radius: clamp(10px, 1vw, 12px); + line-height: 1.2; + text-align: center; + } + .page-pksh .honest-timer__unit-label { + font-size: 0.675rem; + color: var(--color-text-light); + text-transform: uppercase; + letter-spacing: 0.06em; + } + .page-pksh .honest-timer__sep { + font-size: 1.5rem; + font-weight: 700; + color: var(--color-text-light, #CBD5E1); + align-self: center; + line-height: 1; + margin-bottom: 0; + } + + /* ── 3i. RESULTS GRID ── */ + .page-pksh .bento-card--highlight-results { + background: var(--color-bg-dark); + border-radius: var(--pksh-radius-card); + padding: clamp(32px, 4vw, 40px) clamp(24px, 3vw, 32px); + } + .page-pksh .bento-card--highlight-results .bento-p { + color: var(--color-slate-300); + max-width: 70ch; + margin: 0 auto 24px; + } + + .page-pksh .results-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 0; + margin-top: 8px; + } + + .page-pksh .result-item { + text-align: center; + padding: clamp(16px, 2vw, 20px) 12px; + position: relative; + } + + .page-pksh .result-item__value { + display: block; + font-size: clamp(1.75rem, 3vw, 2.75rem); + font-weight: 800; + color: var(--color-slate-300); + line-height: 1; + margin-bottom: 8px; + } + + .page-pksh .result-item__desc { + display: block; + font-size: 0.8125rem; + color: var(--color-slate-300); + line-height: 1.4; + max-width: 180px; + margin: 0 auto; + } + + @media (min-width: 640px) { + .page-pksh .results-grid { grid-template-columns: repeat(4, 1fr); } + .page-pksh .result-item + .result-item::before { + content: ''; + position: absolute; + top: 20%; + left: 0; + width: 1px; + height: 60%; + background: color-mix(in oklab, var(--color-text-on-dark), transparent 88%); + } + } + + /* ── Guarantee Block (standalone) ── */ + .page-pksh .guarantee-block { + text-align: center; + } + .page-pksh .guarantee-block h2.bento-h2 { + color: var(--color-text); + } + .page-pksh .guarantee-block__text { + font-size: clamp(1rem, 1.2vw, 1.125rem); + line-height: 1.7; + color: var(--color-text-muted); + margin: 0 0 20px; + max-width: 70ch; + margin-left: auto; + margin-right: auto; + } + .page-pksh .guarantee-block__text strong { + color: var(--color-primary); + } + .page-pksh .guarantee-block__badge { + display: inline-block; + padding: 8px 20px; + font-size: 0.875rem; + font-weight: 600; + color: var(--color-primary); + background: color-mix(in oklab, var(--color-primary), transparent 85%); + border-radius: var(--radius-pill, 100px); + border: 1px solid color-mix(in oklab, var(--color-primary), transparent 70%); + } + + /* ── 3j. COMPARE TABLE ── */ + .page-pksh .pksh-compare { + width: 100%; + overflow-x: auto; + -webkit-overflow-scrolling: touch; + padding-bottom: 16px; + margin-top: -16px; + } + .bento[aria-label="Сравнение"] .pksh-compare { + grid-column: 1 / -1; + width: 100%; + } + + .page-pksh .pksh-compare__table { + width: 100%; + min-width: 660px; + border-collapse: collapse; + font-size: clamp(0.8125rem, 1vw, 0.9375rem); + line-height: 1.5; + } + + .page-pksh .pksh-compare__table th, + .page-pksh .pksh-compare__table td { + padding: clamp(10px, 1.2vw, 14px) clamp(12px, 1.5vw, 16px); + text-align: left; + vertical-align: top; + border-bottom: 1px solid var(--color-border); + } + + .page-pksh .pksh-compare__table thead th { + font-family: var(--font-display, 'Oswald', sans-serif); + font-weight: 600; + font-size: clamp(0.9375rem, 1.1vw, 1.05rem); + text-transform: uppercase; + letter-spacing: 0.02em; + border-bottom: 2px solid var(--color-text-light); + padding-top: clamp(14px, 1.5vw, 20px); + padding-bottom: clamp(12px, 1.5vw, 16px); + } + + .page-pksh .pksh-compare__label-cell { + font-weight: 600; + color: var(--color-text-muted); + white-space: nowrap; + width: clamp(100px, 12vw, 140px); + } + + .page-pksh .pksh-compare__highlight { + background: var(--accent-light, #F5F3FF); + border-left: 2px solid var(--color-primary); + border-right: 2px solid var(--color-primary); + } + .page-pksh .pksh-compare__table thead .pksh-compare__highlight { + background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)); + color: var(--color-text-on-dark); + border-bottom: none; + } + + .page-pksh .pksh-compare__col-title { display: block; font-size: clamp(1rem, 1.2vw, 1.15rem); } + .page-pksh .pksh-compare__col-badge { + display: inline-block; + font-size: 0.7rem; + font-weight: 500; + text-transform: none; + letter-spacing: normal; + background: color-mix(in oklab, var(--color-text-on-dark), transparent 80%); + padding: 2px 8px; + border-radius: 4px; + margin-top: 4px; + } + + .page-pksh .pksh-compare__yes { color: var(--color-success); font-weight: 700; margin-right: 4px; } + .page-pksh .pksh-compare__no { color: var(--color-danger); font-weight: 700; margin-right: 4px; } + .page-pksh .pksh-compare__draft { + display: inline-block; + font-size: 0.7rem; + font-weight: 500; + color: var(--pksh-text-warm); + background: color-mix(in oklab, var(--color-bg-alt), var(--color-warning) 12%); + padding: 1px 6px; + border-radius: 3px; + margin-right: 4px; + } + + .page-pksh .pksh-compare__footnote { + font-size: 0.8125rem; + color: var(--color-text-light); padding: 12px 16px; - min-height: 80px; + margin: 0; + border-top: 1px solid var(--color-border); + } + + /* ── 3k. PROGRAMS GRID (program cards) ── */ + .page-pksh .programs-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: clamp(16px, 2vw, 24px); + margin: 28px 0 0; + align-items: start; + } + + .page-pksh .prog-card { + display: flex; + flex-direction: column; + border-radius: var(--pksh-radius-card); + overflow: hidden; + background: var(--color-bg); + box-shadow: var(--pksh-shadow-card); + transition: transform 0.25s ease, box-shadow 0.25s ease; + position: relative; + } + .page-pksh .prog-card:hover { + transform: translateY(-4px); + box-shadow: var(--pksh-shadow-card-hover); + } + + .page-pksh .prog-card--premium { border: 2px solid var(--color-primary); } + + .page-pksh .prog-card__header { + position: relative; + display: flex; + flex-direction: column; + align-items: flex-start; + gap: clamp(6px, 0.8vw, 8px); + padding: clamp(12px, 1.5vw, 16px) clamp(16px, 2vw, 20px); + min-height: clamp(80px, 8vw, 90px); + } + + .page-pksh .prog-card--base .prog-card__header { + background: linear-gradient(145deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); + color: var(--color-text-on-dark); + } + .page-pksh .prog-card--premium .prog-card__header { + background: linear-gradient(145deg, var(--color-primary-dark) 0%, var(--color-primary-hover) 100%); + color: var(--color-text-on-dark); + } + + .page-pksh .prog-card__header-badge { + display: inline-flex; + padding: 3px 10px; + background: color-mix(in oklab, var(--color-text-on-dark), transparent 85%); + backdrop-filter: blur(4px); + color: var(--color-text-on-dark); + font-size: clamp(0.625rem, 0.55rem + 0.25vw, 0.75rem); + font-weight: 600; + letter-spacing: 0.03em; + border-radius: var(--radius-pill, 100px); + } + + .page-pksh .prog-card__popular { + display: inline-flex; + padding: 3px 10px; + background: var(--color-rating); + color: var(--color-text); + font-size: clamp(0.625rem, 0.55rem + 0.25vw, 0.75rem); + font-weight: 700; + border-radius: var(--radius-pill, 100px); + box-shadow: 0 2px 8px color-mix(in oklab, var(--color-rating), transparent 70%); + margin-top: 6px; + } + + .page-pksh .prog-card__icon { font-size: 44px; line-height: 1; flex-shrink: 0; } + .page-pksh .prog-card__header-row { + display: flex; + align-items: center; + gap: 10px; + } + .page-pksh .prog-card__name { + font-size: clamp(22px, 2.5vw, 26px); + font-weight: 700; + color: var(--color-text-on-dark); + text-align: left; + line-height: 1.15; + margin-bottom: 3px; + letter-spacing: -0.02em; + text-wrap: balance; + } + .page-pksh .prog-card__subname { + font-size: clamp(0.6875rem, 0.6rem + 0.25vw, 0.8125rem); + color: color-mix(in oklab, var(--color-text-on-dark), transparent 35%); + text-align: left; + line-height: 1.3; + font-weight: 400; + } + + .page-pksh .prog-card__body { display: flex; flex-direction: column; } + + .page-pksh .prog-card__pricing { + padding: clamp(16px, 2vw, 20px) clamp(18px, 2.5vw, 24px) clamp(12px, 1.5vw, 16px); + border-bottom: 1px solid var(--color-border); + text-align: left; + } + .page-pksh .prog-card__price { + font-size: clamp(24px, 2.5vw, 28px); + font-weight: 800; + color: var(--color-text); + line-height: 1; + display: block; + } + .page-pksh .prog-card__price-period { + font-size: 13px; + font-weight: 400; + color: var(--color-text-muted); + margin-left: 4px; + } + .page-pksh .prog-card__price-sub { + font-size: 14px; + font-weight: 600; + color: var(--color-primary); + margin-top: 4px; + } + .page-pksh .prog-card__price-single { + font-size: 12px; + color: var(--color-text-light); + margin-top: 2px; + } + .page-pksh .prog-card__urgency { + margin-top: 8px; + font-size: 13px; + font-weight: 600; + color: var(--color-danger); + display: flex; + align-items: center; gap: 6px; } - .prog-card__name { - font-size: 22px; - } - .prog-card__price { - font-size: 24px; - } - .prog-card__pricing { - padding: 16px 18px 12px; - } - .prog-card__block { - padding: 12px 18px; - } - .prog-card__schedule-wrap, - .prog-card__struct-wrap { - padding: 12px 18px; - } - .prog-card__result { - padding: 10px 18px; - } - .prog-card__trust { - padding: 10px 18px; - } - .prog-card__social-proof { - padding: 8px 18px; - } - .prog-card__btn-wrap { - padding: 12px 18px 2px; - } - .prog-card__footnote { - margin: 4px 18px 12px; - } -} - -@media (max-width: 639px) { - .programs-grid { - display: flex; - gap: 16px; - overflow-x: auto; - scroll-snap-type: x mandatory; - -webkit-overflow-scrolling: touch; - } - .prog-card { + .page-pksh .prog-card__urgency::before { + content: ''; + display: inline-block; + width: 8px; + height: 8px; + border-radius: 50%; + background: var(--color-danger); flex-shrink: 0; - width: calc(100vw - 48px); - max-width: 380px; - scroll-snap-align: start; } -} -/* ── Подсказка о свайпе на мобиле ── */ -.pksh-swipe-hint { - display: none; - align-items: center; - justify-content: center; - flex-wrap: wrap; - gap: 6px 8px; - margin: 16px 0 4px; - font-size: 0.875rem; - color: #7C3AED; - font-weight: 600; - animation: pkshSwipePulse 2s ease-in-out infinite; -} - -.pksh-swipe-hint__arrow { - display: inline-block; - font-size: 1.125rem; - animation: pkshSwipePoint 1.5s ease-in-out infinite; -} - -.pksh-swipe-hint__text { - text-align: center; -} - -@keyframes pkshSwipePoint { - 0%, 100% { transform: translateY(0); } - 50% { transform: translateY(-4px); } -} - -@keyframes pkshSwipePulse { - 0%, 100% { opacity: 0.6; } - 50% { opacity: 1; } -} - -@media (max-width: 768px) { - .pksh-swipe-hint { + .page-pksh .prog-card__result { display: flex; - } -} - -/* ============================================================ - 10. FINAL CTA - ============================================================ */ -.final-cta { - text-align: center; - padding: 24px 0; -} - -.final-cta__text { - font-size: 1rem; - color: var(--slate-600); - line-height: 1.6; - max-width: 540px; - margin: 0 auto 24px; -} - -.final-cta__footnote { - font-size: 0.8125rem; - color: var(--accent, #7C3AED); - font-weight: 600; - margin: 16px 0 0; -} - -.btn-primary--large { - padding: 18px 40px; - font-size: 1.125rem; - min-height: 56px; - border-radius: 32px; -} - -/* ============================================================ - 11. MOBILE OVERRIDES - ============================================================ */ -@media (max-width: 639px) { - .bento-card { - padding: 20px 16px; - border-radius: 20px; - } - - .bento-h2 { - font-size: 1.375rem; - } - - .result-item__value { - font-size: 1.75rem; - } -} - -/* ============================================================ - 11b. MOBILE — Fixed header compensation - Header is 76px fixed at top. Banner must not hide behind it. - ============================================================ */ -@media (max-width: 860px) { - .page-pksh .banner { - padding-top: 76px; - margin-top: -76px; /* fixed header compensation */ - } - .page-pksh .banner__content.mobile { - margin-top: 0; /* ensure no double gap */ - } -} - -/* ============================================================ - 11c. MOBILE — Banner scarcity on mobile wraps nicely - ============================================================ */ -@media (max-width: 639px) { - .banner__scarcity { - font-size: 12px; - padding: 4px 14px; - margin: 8px auto 0; - } - .btn-banner--main { + align-items: center; + gap: 10px; + padding: clamp(10px, 1.2vw, 12px) clamp(18px, 2.5vw, 24px); + background: var(--color-success-light); font-size: 14px; - padding: 12px 24px; - width: 100%; - max-width: 320px; + line-height: 1.45; + color: var(--color-emerald-800); + border-bottom: 1px solid var(--color-border); + text-align: left; } -} + .page-pksh .prog-card__result-icon { font-size: 44px; flex-shrink: 0; line-height: 1; } + .page-pksh .prog-card__result strong { font-weight: 700; color: var(--color-emerald-700); } -/* ============================================================ - 12. ANCHOR NAVIGATION - ============================================================ */ -/* ═══════════════════════════════════════════════════════════════ - ANCHOR NAV — redesigned for desktop 2026-05 + .page-pksh .prog-card__block { + padding: clamp(12px, 1.5vw, 16px) clamp(18px, 2.5vw, 24px); + border-bottom: 1px solid var(--color-border); + } + .page-pksh .prog-card__block:last-of-type { border-bottom: none; } + .page-pksh .prog-card__block-title { + font-size: clamp(0.6875rem, 0.6rem + 0.25vw, 0.8125rem); + font-weight: 700; + letter-spacing: 0.06em; + color: var(--color-text-muted); + text-transform: uppercase; + margin-bottom: 10px; + } - Problem: links were too small (8×18px padding, 14px font), - nav was 1280px wide (no alignment with 900px content axis of - sections 2-4), vertical rhythm was 12px vs section 80px. + .page-pksh .prog-card__checklist { + list-style: none; + padding: 0; + margin: 0; + display: flex; + flex-direction: column; + } + .page-pksh .prog-card__checklist li { + display: flex; + align-items: flex-start; + gap: 10px; + padding: 5px 0; + font-size: 14px; + line-height: 1.4; + color: var(--color-slate-800); + text-align: left; + } + .page-pksh .prog-card__checklist li::before { + content: "✓"; + flex-shrink: 0; + width: 18px; + font-size: 14px; + font-weight: 700; + color: var(--color-primary); + margin-top: 1px; + } + .page-pksh .prog-card__checklist--plus { font-weight: 600; } + .page-pksh .prog-card__checklist--plus::before { color: var(--color-rating); } - Solution: - • Container → 900px (aligns with Social/Micro/Guarantee axis) - • Flex-wrap 2 rows × 3 pills, centered - • Pills → 14×28px padding, 16px font (body-text scale) - • Purple hover with translateY(-2px) + glow shadow - • Vertical padding 48/56px (matches section rhythm) - ═══════════════════════════════════════════════════════════ */ -.pksh-anchor-nav { - display: flex; - flex-wrap: nowrap; - justify-content: center; - gap: 10px; - margin: 0; - padding: 0; - overflow: visible; - width: 100%; -} + .page-pksh .prog-card__compare { + display: flex; + align-items: center; + gap: 10px; + padding: 12px clamp(18px, 2.5vw, 24px); + margin: 0; + background: var(--pksh-bg-warm); + font-size: 14px; + line-height: 1.45; + color: var(--pksh-text-warm); + border-bottom: 1px solid var(--color-border); + text-align: left; + } + .page-pksh .prog-card__compare-icon { font-size: 44px; flex-shrink: 0; line-height: 1; } + .page-pksh .prog-card__compare strong { font-weight: 700; } -.pksh-anchor-link { - flex-shrink: 0; - padding: 14px 28px; - border-radius: 100px; - background: #6D28D9; - color: #FFFFFF; - font-size: 1rem; - font-weight: 700; - text-decoration: none; - 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; -} + .page-pksh .prog-card__schedule-wrap { + padding: clamp(12px, 1.5vw, 16px) clamp(18px, 2.5vw, 24px); + border-bottom: 1px solid var(--color-border); + } + .page-pksh .prog-card__schedule { + display: inline-flex; + align-items: center; + padding: 8px 16px; + background: var(--accent-light, #F5F3FF); + border-radius: var(--space-2, 8px); + font-size: 15px; + font-weight: 600; + color: var(--color-primary); + } -.pksh-anchor-link:hover, -.pksh-anchor-link:focus-visible { - background: #7C3AED; - color: #FFFFFF; - transform: translateY(-2px); - box-shadow: 0 6px 20px rgba(109, 40, 217, 0.40); -} + .page-pksh .prog-card__struct-wrap { + padding: clamp(12px, 1.5vw, 16px) clamp(18px, 2.5vw, 24px); + border-bottom: 1px solid var(--color-border); + text-align: center; + } + .page-pksh .prog-card__tags { + display: flex; + flex-wrap: wrap; + gap: 6px; + justify-content: center; + } + .page-pksh .prog-card__tag { + display: inline-flex; + padding: 5px 12px; + font-size: 13px; + font-weight: 500; + border-radius: var(--radius-pill, 100px); + background: var(--accent-light, #F5F3FF); + color: var(--color-primary); + } -.pksh-anchor-link--cta { - background: linear-gradient(135deg, #7C3AED, #8B5CF6); - color: #fff; - border-color: transparent; -} + .page-pksh .prog-card__trust { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 8px 16px; + padding: clamp(10px, 1.2vw, 12px) clamp(18px, 2.5vw, 24px); + border-bottom: 1px solid var(--color-border); + font-size: 13px; + color: var(--color-text-muted); + } -.pksh-anchor-link--cta:hover, -.pksh-anchor-link--cta:focus-visible { - background: linear-gradient(135deg, #6D28D9, #7C3AED); - color: #fff; - border-color: transparent; - box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3); -} + .page-pksh .prog-card__social-proof { + display: flex; + justify-content: center; + gap: 24px; + padding: clamp(8px, 1vw, 10px) clamp(18px, 2.5vw, 24px); + border-bottom: 1px solid var(--color-border); + font-size: 13px; + } + .page-pksh .prog-card__rating { + font-weight: 600; + color: var(--color-text, #1E293B); + } + .page-pksh .prog-card__rating::before { + content: "★"; + color: var(--color-rating); + margin-right: 4px; + } + .page-pksh .prog-card__graduates { color: var(--color-text-muted); } -/* mobile anchor styles moved into @media (max-width: 860px) above */ + .page-pksh .prog-card__btn-wrap { + padding: clamp(12px, 1.8vw, 16px) clamp(18px, 2.5vw, 24px) 4px; + } + .page-pksh .prog-card__btn { + display: block; + width: 100%; + padding: 14px; + border: none; + border-radius: var(--radius-sm, 12px); + font-family: inherit; + font-size: 16px; + font-weight: 700; + color: var(--color-text-on-dark); + cursor: pointer; + text-align: center; + text-decoration: none; + transition: all var(--transition-fast, 200ms ease-out); + } + .page-pksh .prog-card--base .prog-card__btn { + background: var(--pksh-gradient-btn-bright); + box-shadow: var(--pksh-btn-shadow-bright); + } + .page-pksh .prog-card--premium .prog-card__btn { + background: var(--pksh-gradient-btn-bright); + box-shadow: var(--pksh-btn-shadow-bright); + } + .page-pksh .prog-card__btn:hover { + transform: translateY(-2px); + box-shadow: var(--pksh-btn-shadow-bright-hover); + } + .page-pksh .prog-card__btn:focus-visible { + outline: 3px solid var(--color-primary); + outline-offset: 3px; + } -/* ============================================================ - 13. FOMO SCARCITY BADGE - ============================================================ */ -.pksh-fomo { - display: flex; - align-items: center; - justify-content: center; - gap: 10px; - margin: 16px auto 0; - padding: 10px 24px; - background: linear-gradient(135deg, #F5F0FF, #EDE4FF); - border-radius: 100px; - max-width: fit-content; - border: 1px solid #D4C4F0; -} + .page-pksh .prog-card__footnote { + text-align: center; + font-size: 12px; + color: var(--color-text-light); + margin: 6px clamp(18px, 2.5vw, 24px) clamp(12px, 1.5vw, 16px); + } -.pksh-fomo__dot { - width: 10px; - height: 10px; - border-radius: 50%; - background: var(--accent, #7C3AED); - flex-shrink: 0; - animation: pksh-pulse 2s infinite; -} + @media (max-width: 639px) { + .page-pksh .programs-grid { + display: flex; + gap: 16px; + overflow-x: auto; + scroll-snap-type: x mandatory; + -webkit-overflow-scrolling: touch; + padding-bottom: 20px; + } + .page-pksh .prog-card { + flex-shrink: 0; + width: calc(100vw - 48px); + max-width: 380px; + scroll-snap-align: start; + } + } -@keyframes pksh-pulse { - 0%, 100% { opacity: 1; transform: scale(1); } - 50% { opacity: 0.6; transform: scale(1.3); } -} + /* ── Swipe hint ── */ + .page-pksh .pksh-swipe-hint { + display: none; + align-items: center; + justify-content: center; + flex-wrap: wrap; + gap: 6px 8px; + margin: 16px 0 4px; + font-size: 0.875rem; + color: var(--color-primary); + font-weight: 600; + } + .page-pksh .pksh-swipe-hint__arrow { display: inline-block; font-size: 1.125rem; } + .page-pksh .pksh-swipe-hint__text { text-align: center; } + @media (max-width: 768px) { .page-pksh .pksh-swipe-hint { display: flex; } } -.pksh-fomo__text { - font-size: 0.875rem; - font-weight: 600; - color: #9A3412; -} + /* ── 3l. TEACHERS ── */ + .page-pksh .pksh-section--teachers { + background: var(--color-primary-light, #EFF6FF); + padding-top: clamp(48px, 6vw, 80px); + padding-bottom: clamp(48px, 6vw, 80px); + } + .page-pksh .pksh-section--teachers .bento-h2 { text-align: center; } -/* ============================================================ - 14. MOBILE STICKY CTA — only shown on mobile (< 861px) - ============================================================ */ -.sticky-cta-mobile { + .page-pksh .pksh-teachers__wrapper { + display: flex; + flex-wrap: wrap; + gap: clamp(16px, 2vw, 24px); + justify-content: center; + } + .page-pksh .pksh-teachers__item { + width: calc(33.33% - 18px); + min-width: 280px; + } + + .page-pksh .pksh-teachers__card { + background: var(--color-bg); + border-radius: 20px; + overflow: hidden; + box-shadow: var(--shadow-sm, 0 2px 12px rgba(0,0,0,0.06)); + transition: transform 0.25s ease, box-shadow 0.25s ease; + display: flex; + flex-direction: column; + height: 100%; + } + .page-pksh .pksh-teachers__card:hover { + transform: translateY(-4px); + box-shadow: var(--shadow-md, 0 8px 24px rgba(0,0,0,0.10)); + } + + .page-pksh .pksh-teachers__card-top { + background: linear-gradient(135deg, color-mix(in oklab, var(--color-primary), transparent 95%), color-mix(in oklab, var(--color-secondary), transparent 92%)); + display: flex; + justify-content: center; + padding: clamp(24px, 3vw, 32px) clamp(16px, 2vw, 24px) clamp(16px, 2vw, 20px); + } + + .page-pksh .pksh-teachers__photo { + width: clamp(120px, 12vw, 140px); + height: clamp(120px, 12vw, 140px); + border-radius: 50%; + object-fit: cover; + border: 4px solid var(--color-bg); + box-shadow: 0 4px 16px color-mix(in oklab, var(--color-text), transparent 90%); + } + + .page-pksh .pksh-teachers__card-body { + padding: clamp(14px, 1.8vw, 18px) clamp(18px, 2.5vw, 24px) clamp(20px, 2.5vw, 24px); + display: flex; + flex-direction: column; + gap: 6px; + flex: 1; + } + + .page-pksh .pksh-teachers__name { + font-size: clamp(1rem, 1.2vw, 1.125rem); + font-weight: 700; + line-height: 1.3; + color: var(--color-text); + text-align: center; + margin: 0; + } + .page-pksh .pksh-teachers__subj { + font-size: clamp(0.8125rem, 0.9vw, 0.875rem); + line-height: 1.4; + color: var(--color-primary); + text-align: center; + font-weight: 600; + margin: 0 0 2px; + } + .page-pksh .pksh-teachers__desc { + font-size: 0.825rem; + line-height: 1.5; + color: var(--color-text-muted); + text-align: center; + margin: 0 0 4px; + } + + .page-pksh .pksh-teachers__meta { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 6px; + margin: 4px 0 12px; + } + .page-pksh .pksh-teachers__meta-badge { + display: inline-flex; + padding: 3px 10px; + font-size: 0.72rem; + font-weight: 600; + color: var(--color-primary-dark); + background: var(--accent-light, #F5F3FF); + border-radius: var(--radius-pill, 100px); + white-space: nowrap; + } + .page-pksh .pksh-teachers__meta-exp { + display: inline-flex; + padding: 3px 10px; + font-size: 0.72rem; + font-weight: 600; + color: var(--pksh-text-warm); + background: color-mix(in oklab, var(--color-bg-alt), var(--color-warning) 12%); + border-radius: var(--radius-pill, 100px); + white-space: nowrap; + } + + .page-pksh .pksh-teachers__btn { + display: block; + width: 100%; + padding: 12px; + border: none; + border-radius: var(--radius-sm, 12px); + font-family: inherit; + font-size: 0.9rem; + font-weight: 700; + color: var(--color-text-on-dark); + cursor: pointer; + background: var(--pksh-gradient-btn-bright); + text-align: center; + text-decoration: none; + transition: transform var(--transition-fast, 200ms ease-out), box-shadow var(--transition-fast, 200ms ease-out); + box-shadow: var(--pksh-btn-shadow-bright); + margin-top: auto; + } + .page-pksh .pksh-teachers__btn:hover { + transform: translateY(-2px); + box-shadow: var(--pksh-btn-shadow-bright-hover); + } + .page-pksh .pksh-teachers__btn:focus-visible { + outline: 3px solid var(--color-primary); + outline-offset: 3px; + } + + @media (max-width: 768px) { + .page-pksh .pksh-teachers__item { + width: calc(50% - 12px); + min-width: 0; + } + .page-pksh .pksh-teachers__wrapper { gap: 16px; } + } + + @media (max-width: 639px) { + .page-pksh .pksh-teachers__scroll-x { + overflow-x: auto; + -webkit-overflow-scrolling: touch; + scroll-snap-type: x mandatory; + padding-bottom: 20px; + } + .page-pksh .pksh-teachers__wrapper { + flex-wrap: nowrap; + gap: 16px; + justify-content: flex-start; + padding-bottom: 4px; + } + .page-pksh .pksh-teachers__item { + flex-shrink: 0; + width: calc(100vw - 64px); + max-width: 340px; + scroll-snap-align: start; + min-width: 0; + } + } + + /* override: teachers section container width */ + .page-pksh #teachers .our-teachers .container { + max-width: 100%; + width: 100%; + padding: 20px 24px 40px; + } + .page-pksh .teachers-owl .swiper-slide { + width: auto; + flex: 0 0 236px; + } + .page-pksh .ourteacher_title { + font-size: 0.8125rem; + min-height: 36px; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + padding: 0 4px; + } + + @media (max-width: 639px) { + .page-pksh .our-teachers > .container { + padding-left: 16px; + padding-right: 16px; + } + .page-pksh .teachers-owl-wrapper { padding: 0; } + } + + /* ── 3m. GALLERY ── */ + .page-pksh .pksh-gallery__grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: clamp(14px, 2vw, 20px); + margin: 28px 0 0; + } + + .page-pksh .pksh-gallery__item { + margin: 0; + border-radius: var(--radius-photo, 16px); + overflow: hidden; + background: var(--color-bg); + box-shadow: 0 2px 16px color-mix(in oklab, var(--color-text), transparent 93%); + transition: transform 0.25s ease, box-shadow 0.25s ease; + } + .page-pksh .pksh-gallery__item:hover { + transform: translateY(-4px); + box-shadow: 0 10px 32px color-mix(in oklab, var(--color-text), transparent 88%); + } + + .page-pksh .pksh-gallery__img { + display: block; + width: 100%; + height: auto; + aspect-ratio: 4 / 3; + object-fit: cover; + } + + .page-pksh .pksh-gallery__caption { + display: block; + padding: 12px 16px 14px; + font-size: 0.875rem; + line-height: 1.5; + color: var(--color-text, #334155); + text-align: center; + } + + @media (max-width: 860px) { .page-pksh .pksh-gallery__grid { grid-template-columns: repeat(2, 1fr); } } + @media (max-width: 540px) { .page-pksh .pksh-gallery__grid { grid-template-columns: 1fr; } } + + /* ── 3n. TRUST AUTHORITY ── */ + .page-pksh .trust-authority { + max-width: 1000px; + margin: 0 auto; + text-align: center; + } + + .page-pksh .trust-authority__grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: clamp(16px, 2vw, 24px); + margin-top: 32px; + container-type: inline-size; + container-name: trust-grid; + } + + .page-pksh .trust-authority__item { + background: var(--color-bg); + border-radius: 20px; + padding: clamp(24px, 3vw, 32px) clamp(20px, 2vw, 24px); + text-align: center; + box-shadow: var(--shadow-sm, 0 4px 20px rgba(0,0,0,0.05)); + transition: transform var(--transition-base, 300ms ease-out), box-shadow var(--transition-base, 300ms ease-out); + } + .page-pksh .trust-authority__item:hover { + transform: translateY(-4px); + box-shadow: var(--shadow-lg, 0 12px 36px rgba(0,0,0,0.10)); + } + + .page-pksh .trust-authority__icon { + font-size: 2.5rem; + display: block; + margin-bottom: 16px; + } + .page-pksh .trust-authority__title { + display: block; + font-size: 1.125rem; + font-weight: 700; + color: var(--color-text); + margin-bottom: 8px; + } + .page-pksh .trust-authority__text { + font-size: 0.9375rem; + color: var(--color-text-muted); + line-height: 1.55; + margin: 0 auto; + max-width: 60ch; + } + + @container trust-grid (max-width: 350px) { + .page-pksh .trust-authority__item { padding: 20px 16px; } + } + + @media (max-width: 768px) { + .page-pksh .trust-authority__grid { grid-template-columns: 1fr; gap: 16px; } + } + + /* ── 3o. EXTERNAL REVIEWS ── */ + .page-pksh .external-reviews { + max-width: 1000px; + margin: 0 auto; + text-align: center; + } + + .page-pksh .external-reviews__grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: clamp(12px, 2vw, 20px); + margin-top: 32px; + } + + .page-pksh .external-reviews__card { + display: flex; + flex-direction: column; + align-items: center; + gap: 8px; + padding: 24px 16px; + background: var(--color-bg); + border-radius: var(--radius-photo, 16px); + text-decoration: none; + box-shadow: 0 2px 12px color-mix(in oklab, var(--color-text), transparent 95%); + transition: transform 0.25s ease, box-shadow 0.25s ease; + } + .page-pksh .external-reviews__card:hover { + transform: translateY(-3px); + box-shadow: 0 8px 24px color-mix(in oklab, var(--color-text), transparent 90%); + } + + .page-pksh .external-reviews__icon { + font-size: 1.5rem; + font-weight: 800; + color: var(--color-primary); + width: 48px; + height: 48px; + display: flex; + align-items: center; + justify-content: center; + background: color-mix(in oklab, var(--color-primary), transparent 92%); + border-radius: var(--radius-sm, 12px); + } + + .page-pksh .external-reviews__name { + font-size: 0.9375rem; + font-weight: 600; + color: var(--color-text); + } + + .page-pksh .external-reviews__rating { + font-size: 0.875rem; + color: var(--color-text-muted); + } + + @media (max-width: 768px) { + .page-pksh .external-reviews__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } + } + + /* ── 3p. FINAL CTA ── */ + .page-pksh .final-cta { + text-align: center; + padding: 24px 0; + } + + .page-pksh .final-cta__text { + font-size: 1rem; + color: var(--color-text-muted); + line-height: 1.6; + max-width: 540px; + margin: 0 auto 24px; + } + + .page-pksh .btn-primary--large { + padding: clamp(16px, 2vw, 18px) clamp(32px, 4vw, 40px); + font-size: clamp(1rem, 1.1vw, 1.125rem); + min-height: 56px; + border-radius: 32px; + background: var(--pksh-gradient-btn-bright); + border: none; + box-shadow: var(--pksh-btn-shadow-bright); + transition: transform var(--transition-fast, 200ms ease-out), box-shadow var(--transition-fast, 200ms ease-out); + } + .page-pksh .btn-primary--large:hover, + .page-pksh .btn-primary--large:focus-visible { + background: var(--pksh-gradient-btn-bright-hover); + transform: translateY(-2px); + box-shadow: var(--pksh-btn-shadow-bright-hover); + } + + .page-pksh .final-cta__footnote { + font-size: 0.8125rem; + color: var(--color-primary); + font-weight: 600; + margin: 16px 0 0; + } + + .page-pksh .final-cta__timer { + margin: 20px auto 24px; + text-align: center; + } + .page-pksh .final-cta__timer-label { + display: block; + font-size: 0.875rem; + font-weight: 600; + color: var(--color-primary); + margin-bottom: 12px; + text-transform: uppercase; + letter-spacing: 0.05em; + } + .page-pksh .final-cta__timer-digits { + display: flex; + align-items: center; + justify-content: center; + gap: 8px; + } + .page-pksh .final-cta__timer-unit { + display: flex; + flex-direction: column; + align-items: center; + gap: 4px; + } + .page-pksh .final-cta__timer-num { + font-size: clamp(1.75rem, 2.5vw, 2.5rem); + font-weight: 800; + color: var(--color-text); + line-height: 1; + font-family: var(--font-display, 'Oswald', sans-serif); + min-width: clamp(44px, 5vw, 60px); + text-align: center; + background: var(--pksh-bg-soft); + padding: clamp(6px, 0.8vw, 8px) clamp(8px, 1vw, 12px); + border-radius: var(--radius-sm, 12px); + border: 1px solid var(--color-border); + } + .page-pksh .final-cta__timer-text { + font-size: 0.75rem; + color: var(--color-text-light); + text-transform: uppercase; + letter-spacing: 0.05em; + } + .page-pksh .final-cta__timer-sep { + font-size: 2rem; + font-weight: 700; + color: var(--color-primary); + margin-top: -20px; + } + + #final-cta.bento.pksh-section--alt { + background-color: var(--color-bg-alt); + background-image: radial-gradient(ellipse at 50% 0%, color-mix(in oklab, var(--color-primary), transparent 97.5%) 0%, transparent 60%); + } + + /* Center final-cta content vertically & horizontally inside bento__full */ + .page-pksh #final-cta .bento__full { + width: 100%; + max-width: 700px; + margin: 0 auto; + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + } + + @media (max-width: 480px) { + .page-pksh .final-cta__timer-sep { font-size: 1.5rem; } + } + + /* ── 3q. CONTACTS ── */ + .page-pksh .pksh-contact { + padding: 0; + background: transparent; + box-shadow: none; + } + .page-pksh .pksh-contact__wrapper { + display: flex; + gap: 30px; + align-items: stretch; + } + .page-pksh .pksh-contact__info { + width: 35%; + display: flex; + flex-direction: column; + gap: 8px; + padding: 32px 0; + } + .page-pksh .pksh-contact__subtitle { + font-size: 15px; + font-weight: 700; + line-height: 1.3; + color: var(--color-text-muted, #64748B); + text-transform: uppercase; + letter-spacing: 0.06em; + margin-top: 12px; + } + .page-pksh .pksh-contact__subtitle:first-child { margin-top: 0; } + .page-pksh .pksh-contact__value { + font-size: clamp(17px, 2vw, 22px); + font-weight: 600; + line-height: 1.3; + color: var(--color-primary); + text-decoration: none; + } + .page-pksh .pksh-contact__value:hover { text-decoration: underline; } + + .page-pksh .pksh-contact__social { + display: flex; + flex-wrap: wrap; + gap: 12px; + } + .page-pksh .pksh-contact__social-link { + display: inline-flex; + align-items: center; + font-size: clamp(16px, 1.8vw, 20px); + font-weight: 600; + color: var(--color-primary); + text-decoration: none; + transition: color var(--transition-fast, 200ms ease-out); + position: relative; + } + .page-pksh .pksh-contact__social-link:hover { color: var(--color-primary-hover); } + .page-pksh .pksh-contact__social-link + .pksh-contact__social-link::before { + content: '·'; + margin-right: 12px; + color: var(--color-text-light); + font-weight: 400; + } + + .page-pksh .pksh-contact__logistics { + display: flex; + flex-wrap: wrap; + gap: 8px; + margin: 16px 0 8px; + padding: 16px; + background: var(--color-bg-alt); + border-radius: var(--radius-photo, 16px); + border: 1px solid var(--pksh-border-warm); + } + .page-pksh .pksh-contact__logistics-item { + display: inline-flex; + align-items: center; + gap: 6px; + font-size: 0.875rem; + line-height: 1.45; + color: var(--color-text-muted); + width: 100%; + } + .page-pksh .pksh-contact__logistics-icon { flex-shrink: 0; font-size: 1.125rem; line-height: 1; } + .page-pksh .pksh-contact__logistics-text { flex: 1; } + + .page-pksh .pksh-contact__map { + flex: 1; + border-radius: var(--pksh-radius-card); + overflow: hidden; + min-height: 400px; + box-shadow: 0 4px 20px color-mix(in oklab, var(--color-text), transparent 92%); + } + + @media (max-width: 768px) { + .page-pksh .pksh-contact__wrapper { flex-direction: column-reverse; } + .page-pksh .pksh-contact__info { width: 100%; padding: 0; } + .page-pksh .pksh-contact__map { + min-height: 280px; + margin: 0 -20px; + border-radius: 0; + box-shadow: none; + } + } + + /* ── 3r. STICKY CTA ── */ + .page-pksh .sticky-cta-mobile { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 999; - background: rgba(255,255,255,0.97); + background: color-mix(in oklab, var(--color-bg), transparent 3%); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); - border-top: 1px solid #E2E8F0; + border-top: 1px solid var(--color-border); padding: 12px 16px; - box-shadow: 0 -4px 20px rgba(0,0,0,0.08); - animation: stickyFadeIn 0.3s ease; -} + box-shadow: var(--pksh-shadow-sticky); + } -.sticky-cta-mobile__inner { + .page-pksh .sticky-cta-mobile__inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 500px; margin: 0 auto; -} + } -.sticky-cta-mobile__text { + .page-pksh .sticky-cta-mobile__text { font-size: 0.9375rem; - color: #0F172A; + color: var(--color-text); font-weight: 500; line-height: 1.3; -} + } + .page-pksh .sticky-cta-mobile__text strong { color: var(--color-primary); } -.sticky-cta-mobile__text strong { - color: #7C3AED; -} - -.sticky-cta-mobile__btn { + .page-pksh .sticky-cta-mobile__btn { flex-shrink: 0; padding: 12px 24px; font-size: 0.9375rem; font-weight: 700; border: none; border-radius: 32px; - background: linear-gradient(135deg, #7C3AED, #8B5CF6); - color: #fff; + background: var(--pksh-gradient-btn-bright); + color: var(--color-text-on-dark); cursor: pointer; - font-family: 'Roboto', sans-serif; - transition: opacity 0.15s, transform 0.15s; + font-family: var(--font-body, 'Roboto', sans-serif); + transition: transform var(--transition-fast, 200ms ease-out), box-shadow var(--transition-fast, 200ms ease-out); + box-shadow: var(--pksh-btn-shadow-bright); white-space: nowrap; min-height: 48px; -} - -.sticky-cta-mobile__btn:hover { - opacity: 0.95; - transform: translateY(-1px); -} - -@media (max-width: 860px) { - .sticky-cta-mobile { - display: block; - } - body { - padding-bottom: 76px !important; - } -} - -@media (max-width: 380px) { - .sticky-cta-mobile__text { - font-size: 0.8125rem; - } - .sticky-cta-mobile__btn { - padding: 10px 18px; - font-size: 0.875rem; - } -} - -@media (min-width: 861px) { - .sticky-cta-mobile { - display: none !important; - } -} - -/* ============================================================ - 16. OVERRIDE: Teachers section — constrain on mobile - Swiper overflows viewport at <640px - ============================================================ */ -@media (max-width: 639px) { - .page-pksh .our-teachers .container { - padding-left: 16px !important; - padding-right: 16px !important; } - .page-pksh .teachers-owl-wrapper { - padding: 0 !important; + .page-pksh .sticky-cta-mobile__btn:hover { + transform: translateY(-2px); + box-shadow: var(--pksh-btn-shadow-bright-hover); } -} - -/* ============================================================ - 18. (removed — program-card__btn moved to base styles) - ============================================================ */ - -/* ============================================================ - 19. OVERRIDE: Header btn-lilac — use accent - Legacy header button should match brand - ============================================================ */ -.page-pksh button.btn-lilac, -.page-pksh a.btn-lilac, -.page-pksh .btn-lilac { - background: linear-gradient(135deg, var(--accent, #7C3AED), var(--accent-500, #8B5CF6)); - font-family: 'Roboto', sans-serif; - font-weight: 700; - text-transform: none; - border-radius: var(--radius-pill, 28px); - border: none; -} - -.page-pksh .btn-lilac:hover, -.page-pksh .btn-lilac:focus { - background: linear-gradient(135deg, var(--accent-hover, #6D28D9), var(--accent-700, #5B21B6)); -} - -/* ============================================================ - 15. OVERRIDE: Banner CTA accent - Use accent (purple) for banner CTA to match brand - ============================================================ */ -.page-pksh .btn-banner--main { - background: linear-gradient(135deg, var(--accent, #7C3AED), var(--accent-500, #8B5CF6)); - border: none; - color: #fff; - font-family: 'Roboto', sans-serif; - font-weight: 700; - text-transform: none; - letter-spacing: 0; -} -.page-pksh .btn-banner--main:hover { - background: linear-gradient(135deg, var(--accent-hover, #6D28D9), var(--accent-700, #5B21B6)); -} - -/* ============================================================ - 21. DESKTOP LAYOUT — ширину.всё. - Force ALL bento sections to fill max-width (1280px). - Fix: inline-block-like collapse when content narrower. - ============================================================ */ -.page-pksh .bento { - width: 100%; -} - -/* Inner grid items fill their cells (CSS Grid default is stretch) */ -.page-pksh .bento__full, -.page-pksh .bento__half, -.page-pksh .bento__wide { - min-width: 0; /* prevent grid overflow from long words */ - box-sizing: border-box; -} - -/* ── 21b. Social Counters — center content ── */ -.page-pksh .social-counters { - width: 100%; - display: flex; - justify-content: space-evenly; - align-items: center; - flex-wrap: wrap; - gap: 24px; -} - -.page-pksh .social-counter { - flex: 1 1 180px; - max-width: 280px; - display: flex; - align-items: center; - gap: 14px; -} - -/* ── 21c. Programs grid — fill bento width ── */ -/* programs-grid width:100% moved to base .programs-grid */ -.page-pksh #final-cta .bento__full { - width: 100%; - max-width: 700px; - margin: 0 auto; - display: flex; - flex-direction: column; - align-items: center; - text-align: center; -} - -/* ── 21f. Consistent section vertical rhythm ── */ -.page-pksh .pksh-section { - padding: 48px 32px; -} - -@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 */ -} - -/* ── 21g. Guarantee card ── fill height ── */ -/* (removed — guarantee uses .guarantee-block--centered now) */ - -/* ============================================================ - 22. DESKTOP — program cards keep 3-col (base grid handles it) - Override removed — base .programs-grid already uses 3 columns. - ============================================================ */ - -/* ============================================================ - 23. DESKTOP — teacher cards in bento ── constrain within grid - Teachers.php uses .container with padding:20px 90px which - overflows when bento is 1280px. Reduce padding to grid padding. - ============================================================ */ -.page-pksh #teachers .our-teachers .container { - max-width: 100%; - width: 100%; - padding: 20px 24px 40px; -} - -/* Teacher slides — fix fixed width on desktop */ -.page-pksh .teachers-owl .swiper-slide { - width: auto !important; - flex: 0 0 236px; -} - -/* ============================================================ - 23b. Price section (legacy) — prevent narrow collapse - The price section uses .container with padding, outside bento grid - ============================================================ */ -.page-pksh .price .container { - max-width: 1280px; - padding-left: 32px; - padding-right: 32px; -} - -/* ── Hero footnote (*) ── */ -.page-pksh .ds-hero__footnote, -.page-pksh .ds-hero__footnote-link { - font-size: 1.1em; - color: var(--accent, #7C3AED); - text-decoration: none; - cursor: default; - vertical-align: super; - line-height: 0; -} -.page-pksh .ds-hero__footnote-link { - cursor: pointer; - transition: color 0.2s; -} -.page-pksh .ds-hero__footnote-link:hover { - color: var(--accent-hover, #6D28D9); - text-decoration: underline; -} - -/* ============================================================ - 25. BANNER GUARANTEE MICRO - ============================================================ */ -.banner__guarantee { - font-family: 'Roboto', sans-serif; - font-size: 13px; - font-weight: 600; - color: #FFD43E; - text-align: center; - margin: 10px 0 0; - padding: 8px 18px; - background: rgba(15, 23, 42, 0.6); - border: 1px solid rgba(255, 212, 62, 0.3); - border-radius: 100px; - display: inline-block; - max-width: fit-content; - backdrop-filter: blur(4px); -} - -.banner__guarantee strong { - color: #fff; -} - -@media (max-width: 860px) { - .banner__guarantee { - font-size: 11px; - padding: 6px 14px; - } -} - -/* ============================================================ - 26. GUARANTEE HERO BLOCK (Risk Reversal showcase) - Unified to purple design system: warm neutral card × - purple border/accents. Orange → purple migration. - ============================================================ */ -.guarantee-hero { - display: flex; - align-items: stretch; - flex-wrap: wrap; - gap: 20px 32px; - margin: 0 auto; - padding: 40px 36px; - background: linear-gradient(135deg, #F8F4F0 0%, #F0EBE5 50%, #F8F4F0 100%); - border: 2px solid #7C3AED; - border-radius: var(--radius-2026, 24px); -} - -.guarantee-hero__shield { - flex-shrink: 0; - 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 24px; -} - -.guarantee-hero__text strong { - color: #6D28D9; -} - -/* (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: 860px) { - .guarantee-hero { - flex-direction: column; - text-align: center; - gap: 20px; - padding: 28px 20px; - } - .guarantee-hero__badges { - flex-direction: row; - gap: 16px; - } - .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; - } -} - -/* ============================================================ - 26b. GUARANTEE HERO — section background + spacing override - Base .pksh-section--alt gives cool #F8FAFC — clashes with - warm palette. White keeps the visual rhythm consistent: - gradient → white → warm stone → white → nav - Padding reduced from 80px → 32/48 for 80px gap rhythm. - ============================================================ */ -.page-pksh .bento[aria-label="Гарантия"] { - background: transparent; -} - -/* ============================================================ - 27. MICRO-COMMITMENT (checklist download) - ============================================================ */ -/* micro-commit styles now under .page-pksh .bento[aria-label="Скачать чек-лист"] */ - -.micro-commit__content { - flex: 1; -} - -.micro-commit__visual { - flex-shrink: 0; - width: 120px; - height: 120px; - background: #F5F0FF; - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; -} - -.micro-commit__btn { - padding: 14px 32px; - font-size: 1rem; - margin-top: 8px; -} - -@media (max-width: 639px) { - .micro-commit { - flex-direction: column; - text-align: center; - gap: 20px; - padding: 24px 20px; - } - .micro-commit__visual { - width: 80px; - height: 80px; - } -} - -/* ============================================================ - 28. DESKTOP STICKY CTA - ============================================================ */ -.sticky-cta-desktop { - display: none; - position: fixed; - bottom: 0; - left: 0; - right: 0; - z-index: 999; - background: rgba(255,255,255,0.95); - backdrop-filter: blur(12px); - border-top: 1px solid #E2E8F0; - padding: 12px 32px; - box-shadow: 0 -4px 20px rgba(0,0,0,0.06); - animation: stickyFadeIn 0.3s ease; -} - -@keyframes stickyFadeIn { - from { opacity: 0; transform: translateY(16px); } - to { opacity: 1; transform: translateY(0); } -} - -.sticky-cta-desktop__inner { - max-width: 1280px; - margin: 0 auto; - display: flex; - align-items: center; - justify-content: space-between; - gap: 24px; -} - -.sticky-cta-desktop__info { - display: flex; - align-items: center; - gap: 16px; -} - -.sticky-cta-desktop__badge { - display: inline-block; - padding: 4px 14px; - background: var(--accent, #7C3AED); - color: #fff; - font-size: 0.8125rem; - font-weight: 700; - border-radius: 100px; -} - -.sticky-cta-desktop__text { - font-size: 0.9375rem; - color: var(--navy, #0F172A); - font-weight: 500; -} - -.sticky-cta-desktop__text strong { - color: var(--accent, #7C3AED); -} - -.sticky-cta-desktop__btn { - padding: 14px 32px; - font-size: 1rem; - font-weight: 700; - border: none; - border-radius: 32px; - background: linear-gradient(135deg, var(--accent, #7C3AED), var(--accent-500, #8B5CF6)); - color: #fff; - cursor: pointer; - font-family: 'Roboto', sans-serif; - transition: opacity 0.15s, transform 0.15s; - white-space: nowrap; -} - -.sticky-cta-desktop__btn:hover { - opacity: 0.95; - transform: translateY(-1px); -} - -/* Desktop sticky — show after scrolling past header (~200px) via IntersectionObserver - but default to hidden. Will be shown by JS. */ -@media (min-width: 861px) { - .sticky-cta-desktop { - display: block; - transform: translateY(100%); - transition: transform 0.3s ease; - } - .sticky-cta-desktop.visible { - transform: translateY(0); - } - body { - padding-bottom: 0; - } -} - -/* ============================================================ - 29. TAP TARGET SIZE FIX (Mobile 48px minimum) - ============================================================ */ -@media (max-width: 639px) { - .page-pksh .btn-primary, - .page-pksh .btn-banner--main, - .page-pksh .program-card__btn, - .page-pksh .sticky-cta-btn, - .page-pksh .guarantee-hero__btn, - .page-pksh .micro-commit__btn { - min-height: 48px; - padding-top: 14px; - padding-bottom: 14px; - font-size: 1rem; + .page-pksh .sticky-cta-mobile__btn:focus-visible { + outline: 3px solid var(--color-primary); + outline-offset: 3px; } - /* (FAQ trigger removed — FAQ uses box__accordion now) */ - - /* Social counters — make entire card tappable */ - .page-pksh .social-counter { - min-height: 48px; - } - - /* Final CTA footnote — ensure sufficient height */ - .page-pksh .final-cta__footnote { - padding: 8px 0; - } -} - -/* ============================================================ - 30. SCARCITY ANIMATION & VISUAL WEIGHT - ============================================================ */ -.banner__scarcity { - animation: scarcityPulse 2s ease-in-out infinite; -} - -@keyframes scarcityPulse { - 0%, 100% { transform: scale(1); background: rgba(249, 115, 22, 0.25); } - 50% { transform: scale(1.03); background: rgba(249, 115, 22, 0.35); } -} - -/* Hover on scarcity increases urgency */ -.banner__scarcity:hover { - animation-play-state: paused; - background: rgba(249, 115, 22, 0.4); -} - -/* ============================================================ - 31. BANNER ADDRESS — visual enhancement - ============================================================ */ -.banner__address { - display: flex; - align-items: center; - justify-content: center; - gap: 6px; - opacity: 0.9; -} - -/* ============================================================ - 32. FOMO SCARCITY — make more urgent - Replace pulsing dot with stronger indicator - ============================================================ */ -.pksh-fomo { - cursor: pointer; - transition: transform 0.2s, box-shadow 0.2s; -} - -.pksh-fomo:hover { - transform: scale(1.02); - box-shadow: 0 4px 16px rgba(234, 88, 12, 0.15); -} - -/* ============================================================ - 33. TEACHERS — show experience/credentials - Teacher direction already shows. Style enhancement. - ============================================================ */ -.page-pksh .ourteacher_title { - font-size: 0.8125rem; - min-height: 36px; - display: flex; - align-items: center; - justify-content: center; - text-align: center; - padding: 0 4px; -} - -/* ============================================================ - 34. (removed — 2-col override conflicting with base 3-col grid) - ============================================================ */ - -/* ============================================================ - 36. SCROLL PROGRESS INDICATOR (optional enhancement) - ============================================================ */ -.page-pksh .pksh-scroll-progress { - position: fixed; - top: 0; - left: 0; - height: 3px; - background: linear-gradient(90deg, var(--accent, #7C3AED), #A855F7); - z-index: 10000; - width: 0%; - transition: width 0.1s linear; -} - -/* ============================================================ - 37. MOBILE BANNER OVERRIDE — show CTA inside banner__content - Main.css hides .banner__content .btn-write on mobile. - We moved button INSIDE .banner__content.mobile — unhide. - ============================================================ */ -@media (max-width: 860px) { - .page-pksh .banner__content.mobile .btn-write { - display: block !important; - width: 100%; - max-width: 320px; - margin: 10px auto 0; - padding: 14px 24px; - font-size: 16px; - border-radius: 32px; - background: linear-gradient(135deg, var(--accent, #7C3AED), var(--accent-500, #8B5CF6)); - border: none; - color: #fff; - font-weight: 700; - font-family: 'Roboto', sans-serif; - cursor: pointer; - transition: opacity 0.15s; - } - .page-pksh .banner__content.mobile .btn-write:hover { - opacity: 0.95; - } - - .page-pksh .banner__content.mobile .banner__scarcity { - display: block; - margin: 8px auto 0; - font-size: 12px; - } - - .page-pksh .banner__content.mobile .banner__guarantee { - display: inline-block; - margin: 8px auto 0; - font-size: 11px; - } - - .page-pksh .banner__content.mobile .banner__address { - font-size: 13px; - margin-bottom: 6px; - opacity: 0.85; - } - - /* Mobile banner content — ensure proper spacing for stacked elements */ - .page-pksh .banner__content.mobile { - padding: 16px 20px; - display: flex; - flex-direction: column; - align-items: center; - gap: 2px; - } - - .page-pksh .banner__content.mobile .page_title { - font-size: 22px; - line-height: 1.2; - margin: 4px 0; - } - - .page-pksh .banner__content.mobile .banner_text { - font-size: 15px; - margin: 4px 0; - } -} - -/* ============================================================ - 38. PKSH ANCHOR NAV — scroll offset for fixed header - ============================================================ */ -.page-pksh #how-it-works, -.page-pksh #results, -.page-pksh #programs, -.page-pksh #teachers, -.page-pksh #results, -.page-pksh #programs, -.page-pksh #teachers, -.page-pksh #faq, -.page-pksh #final-cta { - scroll-margin-top: 100px; -} - - 40. SOCIAL PROOF — Premium counters redesign v4.0 - Psychology: - - White cards with colored tops = achievement ribbons - - Subtle background pattern = premium texture - - Gradient numbers = premium, celebratory - - Hover lift = tactile, encourages engagement - - Warm coordinating colors: purple, gold, green, coral - ═══════════════════════════════════════════════════════ */ - -/* ── Section container warm background ── */ -.page-pksh .bento[aria-label="Социальное доказательство"] { - background: var(--bg-warm, #F8F4F0); - position: relative; - padding: 48px 32px 0 !important; -} - -/* Subtle background pattern for depth */ -.page-pksh .bento[aria-label="Социальное доказательство"]::before { - content: ''; - position: absolute; - inset: 0; - background-image: radial-gradient(rgba(124, 58, 237, 0.03) 1px, transparent 1px); - background-size: 24px 24px; - pointer-events: none; -} - -/* ── Grid: 4 columns desktop, 2 tablet, 1 mobile ── */ -.page-pksh .bento[aria-label="Социальное доказательство"] .social-counters { - display: grid; - grid-template-columns: repeat(4, 1fr); - gap: 20px; - margin: 0 auto; - width: 100%; - position: relative; - z-index: 1; -} - -@media (max-width: 860px) { - .page-pksh .bento[aria-label="Социальное доказательство"] .social-counters { - grid-template-columns: repeat(2, 1fr); - gap: 14px; - max-width: 500px; - } -} - -/* Mobile: 2 columns at all sizes (no 1-column breakpoint) */ - -/* ── Counter card ── */ -.page-pksh .bento[aria-label="Социальное доказательство"] .social-counter { - display: flex; - flex-direction: column; - align-items: center; - text-align: center; - gap: 0; - padding: 0; - background: #FFFFFF; - border: 1px solid #E2D8CC; - border-radius: 20px; - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06); - overflow: hidden; - transition: box-shadow 0.3s ease, transform 0.3s ease; -} - -.page-pksh .bento[aria-label="Социальное доказательство"] .social-counter:hover { - box-shadow: 0 16px 40px rgba(0, 0, 0, 0.10); - transform: translateY(-4px); -} - -/* ── Card colored top bar ── */ -.page-pksh .bento[aria-label="Социальное доказательство"] .social-counter__top { - width: 100%; - height: 5px; - flex-shrink: 0; -} - -.page-pksh .bento[aria-label="Социальное доказательство"] .social-counter:nth-child(1) .social-counter__top { - background: linear-gradient(90deg, #7C3AED, #A855F7); -} -.page-pksh .bento[aria-label="Социальное доказательство"] .social-counter:nth-child(2) .social-counter__top { - background: linear-gradient(90deg, #F59E0B, #F97316); -} -.page-pksh .bento[aria-label="Социальное доказательство"] .social-counter:nth-child(3) .social-counter__top { - background: linear-gradient(90deg, #10B981, #34D399); -} -.page-pksh .bento[aria-label="Социальное доказательство"] .social-counter:nth-child(4) .social-counter__top { - background: linear-gradient(90deg, #EC4899, #F472B6); -} - -/* ── Card body ── */ -.page-pksh .bento[aria-label="Социальное доказательство"] .social-counter__body { - padding: 24px 16px 26px; - display: flex; - flex-direction: column; - align-items: center; - gap: 10px; - width: 100%; -} - -/* ── Icon ── */ -.page-pksh .bento[aria-label="Социальное доказательство"] .social-counter__icon { - font-size: 30px; - flex-shrink: 0; - width: 56px; - height: 56px; - display: flex; - align-items: center; - justify-content: center; - background: linear-gradient(135deg, rgba(124,58,237,0.08), rgba(168,85,247,0.05)); - border-radius: 16px; - margin-bottom: 2px; - transition: transform 0.3s ease, box-shadow 0.3s ease; -} - -.social-counter:hover .social-counter__icon { - transform: scale(1.08); -} - -.page-pksh .bento[aria-label="Социальное доказательство"] .social-counter:nth-child(2) .social-counter__icon { - background: linear-gradient(135deg, rgba(245,158,11,0.12), rgba(249,115,22,0.08)); -} -.page-pksh .bento[aria-label="Социальное доказательство"] .social-counter:nth-child(3) .social-counter__icon { - background: linear-gradient(135deg, rgba(16,185,129,0.10), rgba(52,211,153,0.06)); -} -.page-pksh .bento[aria-label="Социальное доказательство"] .social-counter:nth-child(4) .social-counter__icon { - background: linear-gradient(135deg, rgba(236,72,153,0.10), rgba(244,114,182,0.06)); -} - -/* ── Number ── */ -.page-pksh .bento[aria-label="Социальное доказательство"] .social-counter__number { - font-family: 'Oswald', sans-serif; - font-size: 34px; - font-weight: 700; - color: #1E293B; - line-height: 1; -} - -.page-pksh .bento[aria-label="Социальное доказательство"] .social-counter:nth-child(1) .social-counter__number { - color: #7C3AED; -} -.page-pksh .bento[aria-label="Социальное доказательство"] .social-counter:nth-child(2) .social-counter__number { - color: #D97706; -} -.page-pksh .bento[aria-label="Социальное доказательство"] .social-counter:nth-child(3) .social-counter__number { - color: #059669; -} -.page-pksh .bento[aria-label="Социальное доказательство"] .social-counter:nth-child(4) .social-counter__number { - color: #DB2777; -} - -/* ── Label ── */ -.page-pksh .bento[aria-label="Социальное доказательство"] .social-counter__label { - font-family: 'Roboto', sans-serif; - font-size: 14px; - color: #64748B; - line-height: 1.35; -} - -@media (max-width: 860px) { - .page-pksh .bento[aria-label="Социальное доказательство"] .social-counter__icon { - width: 48px; - height: 48px; - font-size: 24px; - } - .page-pksh .bento[aria-label="Социальное доказательство"] .social-counter__number { - font-size: 28px; - } - .page-pksh .bento[aria-label="Социальное доказательство"] .social-counter__body { - padding: 18px 12px 22px; - } - .page-pksh .bento[aria-label="Социальное доказательство"] .social-counter__label { - font-size: 13px; - } -} - 41. MICRO-COMMITMENT — warm section, white card, animated SVG - Unlike social counters (white bg × cream cards), - this section alternates: warm bg × white card. - Creates vertical rhythm and visual distinction. - SVG ring: slow rotation = calm, not flashy. - ============================================================ */ - -/* NARROW section — no background (section bg transparent) */ -.page-pksh .bento[aria-label="Скачать чек-лист"] { - /* transparent — bg on .bento-card--checklist */ -} - -.page-pksh .bento-card--checklist { - background: #0F172A; - border-radius: 24px; - box-shadow: 0 20px 60px rgba(0, 0, 0, 0.30); - text-align: center; -} - -.page-pksh .bento-card--checklist .micro-commit { - display: flex; - align-items: center; - gap: 40px; - padding: 40px 36px; -} - -/* ── Full-width sections: warm #F8F4F0 alternation ── */ -.page-pksh .bento[aria-label="Как проходят занятия"], -.page-pksh .bento#teachers { - background: transparent; -} - -/* ── Section 6 cards: white on warm, with definition ── */ -.page-pksh #how-it-works .bento-card--soft { - background: #FFFFFF; - border: 1.5px solid #EDE8DF; - box-shadow: 0 6px 24px rgba(0, 0, 0, 0.07); -} -.page-pksh #how-it-works .bento-card--soft:hover { - box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); -} - -/* ── Card — dark bg, white text, accent button ── */ -.page-pksh .micro-commit { - display: flex; - align-items: center; - gap: 40px; - width: 100%; - padding: 40px 36px; - background: #0F172A; - border: none; - border-radius: 24px; - box-shadow: 0 20px 60px rgba(0, 0, 0, 0.30); - text-align: center; - position: relative; -} - -@media (max-width: 860px) { - .page-pksh .micro-commit { - flex-direction: column; - text-align: center; - padding: 32px 20px; - gap: 24px; - box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25); - } -} - -/* ── Visual — document preview placeholder (replaces circle+ring) ── */ -.page-pksh .bento[aria-label="Скачать чек-лист"] .micro-commit__visual { - flex-shrink: 0; - width: 130px; - height: 170px; - position: relative; - display: flex; - align-items: center; - justify-content: center; - background: #1E293B; - border: 1.5px solid #334155; - border-radius: 12px; - box-shadow: 0 4px 16px rgba(0, 0, 0, 0.20); -} - -@media (max-width: 860px) { - .page-pksh .bento[aria-label="Скачать чек-лист"] .micro-commit__visual { + .page-pksh .sticky-cta-desktop { display: none; + position: fixed; + bottom: 0; + left: 0; + right: 0; + z-index: 999; + background: color-mix(in oklab, var(--color-bg), transparent 5%); + backdrop-filter: blur(12px); + border-top: 1px solid var(--color-border); + padding: 12px 32px; + box-shadow: var(--pksh-shadow-sticky); } -} -/* ── Checklist illustration SVG fills the visual container ── */ -.page-pksh .micro-commit__svg { - width: 100%; - height: 100%; - display: block; -} - -/* ── 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 "Бесплатно" — rating amber (matches hero metrics) ── */ -.page-pksh .bento[aria-label="Скачать чек-лист"] .bento-label { - color: #F59E0B; - font-weight: 700; - letter-spacing: 0.03em; -} - -/* ── H2 heading — white on dark ── */ -.page-pksh .bento[aria-label="Скачать чек-лист"] .bento-h2 { - font-size: 1.75rem; - color: #FFFFFF; -} - -@media (max-width: 860px) { - .page-pksh .bento[aria-label="Скачать чек-лист"] .bento-h2 { - font-size: 1.375rem; - } -} - -/* ── Description text — light gray on dark ── */ -.page-pksh .bento[aria-label="Скачать чек-лист"] .bento-p { - font-size: 1rem; - color: #CBD5E1; - line-height: 1.6; -} - -/* ── 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 { - padding: 16px 40px; - font-size: 1.0625rem; - font-weight: 600; - border-radius: 100px; - 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 28px rgba(124, 58, 237, 0.50); -} - -/* ── 42. REVIEWS — uses .bento.pksh-section layout (same as teachers) ── */ - -/* ── 43. SHARED MOBILE SCROLLBAR (reviews + programs) ── */ -@media (max-width: 768px) { - /* Reviews — more bottom breathing room */ - .page-pksh .reviews-cards .lw-grid--3 { - padding-bottom: 20px; - } - /* Programs — add spacing for scrollbar (scrollbar-width set in Firefox fallback below) */ - .page-pksh .programs-grid { - padding-bottom: 20px; - } - .page-pksh .programs-grid::-webkit-scrollbar { - display: block; - } -} - -/* All three: styled scrollbar via shared selector */ -/* Note: reviews scrollbar is on .lw-grid--3 (overflow-x:auto), not .lw-scroll-x wrapper */ -.page-pksh .reviews-cards .lw-grid--3::-webkit-scrollbar, -.page-pksh .programs-grid::-webkit-scrollbar, -.page-pksh .pksh-teachers__scroll-x::-webkit-scrollbar { - height: 8px; - background: #f1f5f9; - border-radius: 8px; -} -.page-pksh .reviews-cards .lw-grid--3::-webkit-scrollbar-thumb, -.page-pksh .programs-grid::-webkit-scrollbar-thumb, -.page-pksh .pksh-teachers__scroll-x::-webkit-scrollbar-thumb { - background: linear-gradient(90deg, #7C3AED, #A78BFA); - border-radius: 8px; - border: 2px solid #f1f5f9; /* creates padding effect around thumb */ -} -.page-pksh .reviews-cards .lw-grid--3::-webkit-scrollbar-thumb:hover, -.page-pksh .programs-grid::-webkit-scrollbar-thumb:hover, -.page-pksh .pksh-teachers__scroll-x::-webkit-scrollbar-thumb:hover { - background: linear-gradient(90deg, #6D28D9, #7C3AED); -} -/* Firefox fallback */ -.page-pksh .reviews-cards .lw-grid--3, -.page-pksh .programs-grid, -.page-pksh .pksh-teachers__scroll-x { - scrollbar-width: thin; - scrollbar-color: #7C3AED #f1f5f9; -} - -/* ============================================================ - 44. CONTACTS — как на странице лагеря - ============================================================ */ -.page-pksh .pksh-contact { - padding: 0; - background: transparent; - box-shadow: none; -} -.page-pksh .pksh-contact__wrapper { - display: flex; - gap: 30px; - align-items: stretch; -} -.page-pksh .pksh-contact__info { - width: 35%; - display: flex; - flex-direction: column; - gap: 8px; - padding: 32px 0; -} -.page-pksh .pksh-contact__subtitle { - font-size: 15px; - font-weight: 700; - line-height: 1.3; - color: var(--slate-500, #64748B); - text-transform: uppercase; - letter-spacing: 0.06em; - margin-top: 12px; -} -.page-pksh .pksh-contact__subtitle:first-child { - margin-top: 0; -} -.page-pksh .pksh-contact__value { - font-size: clamp(17px, 2vw, 22px); - font-weight: 600; - line-height: 1.3; - color: var(--accent, #7C3AED); - text-decoration: none; -} -.page-pksh .pksh-contact__value:hover { - text-decoration: underline; -} -.page-pksh .pksh-contact__social { - display: flex; - flex-wrap: wrap; - gap: 12px; -} -.page-pksh .pksh-contact__social-link { - display: inline-flex; - align-items: center; - font-size: clamp(16px, 1.8vw, 20px); - font-weight: 600; - color: var(--accent, #7C3AED); - text-decoration: none; - transition: color 0.2s; - position: relative; -} -.page-pksh .pksh-contact__social-link:hover { - color: var(--accent-hover, #6D28D9); -} -.page-pksh .pksh-contact__social-link + .pksh-contact__social-link::before { - content: '·'; - margin-right: 12px; - color: var(--slate-400, #94A3B8); - font-weight: 400; -} - -/* ── Logistics chips (как добраться) ── */ -.page-pksh .pksh-contact__logistics { - display: flex; - flex-wrap: wrap; - gap: 8px; - margin: 16px 0 8px; - padding: 16px; - background: #F8F4F0; - border-radius: 16px; - border: 1px solid #EDE9E3; -} - -.page-pksh .pksh-contact__logistics-item { - display: inline-flex; - align-items: center; - gap: 6px; - font-size: 0.875rem; - line-height: 1.45; - color: #475569; - width: 100%; -} - -.page-pksh .pksh-contact__logistics-icon { - flex-shrink: 0; - font-size: 1.125rem; - line-height: 1; -} - -.page-pksh .pksh-contact__logistics-text { - flex: 1; -} - -.page-pksh .pksh-contact__map { - flex: 1; - border-radius: 24px; - overflow: hidden; - min-height: 400px; - box-shadow: 0 4px 20px rgba(0,0,0,0.08); -} - -@media (max-width: 768px) { - .page-pksh .pksh-contact__wrapper { - flex-direction: column-reverse; - } - .page-pksh .pksh-contact__info { - width: 100%; - padding: 0; - } - .page-pksh .pksh-contact__map { - min-height: 280px; - margin: 0 -20px; - border-radius: 0; - box-shadow: none; - } -} - -/* ============================================================ - 46. TEACHERS — camp-style cards - ============================================================ */ -.page-pksh .pksh-section--teachers { - background: var(--bg-soft-2026, #F8FAFC); - padding-top: 60px; - padding-bottom: 60px; -} - -.page-pksh .pksh-section--teachers .bento-h2 { - text-align: center; -} - -.pksh-teachers__wrapper { - display: flex; - flex-wrap: wrap; - gap: 24px; - justify-content: center; -} - -.pksh-teachers__item { - width: calc(33.33% - 18px); - min-width: 280px; -} - -.pksh-teachers__card { - background: #fff; - border-radius: 20px; - overflow: hidden; - box-shadow: 0 2px 12px rgba(0,0,0,0.06); - transition: transform 0.25s ease, box-shadow 0.25s ease; - display: flex; - flex-direction: column; - height: 100%; -} - -.pksh-teachers__card:hover { - transform: translateY(-4px); - box-shadow: 0 8px 24px rgba(0,0,0,0.10); -} - -.pksh-teachers__card-top { - background: linear-gradient(135deg, rgba(124, 58, 237, 0.05), rgba(139, 92, 246, 0.08)); - display: flex; - justify-content: center; - padding: 32px 24px 20px; -} - -.pksh-teachers__photo { - width: 140px; - height: 140px; - border-radius: 50%; - object-fit: cover; - border: 4px solid #fff; - box-shadow: 0 4px 16px rgba(0,0,0,0.10); -} - -.pksh-teachers__card-body { - padding: 18px 24px 24px; - display: flex; - flex-direction: column; - gap: 6px; - flex: 1; -} - -.pksh-teachers__name { - font-size: 1.125rem; - font-weight: 700; - line-height: 1.3; - color: var(--navy, #0F172A); - text-align: center; - margin: 0; -} - -.pksh-teachers__subj { - font-size: 0.875rem; - line-height: 1.4; - color: var(--accent, #7C3AED); - text-align: center; - font-weight: 600; - margin: 0 0 2px; -} - -.pksh-teachers__desc { - font-size: 0.825rem; - line-height: 1.5; - color: var(--slate-600, #475569); - text-align: center; - margin: 0 0 4px; -} - -.pksh-teachers__meta { - display: flex; - flex-wrap: wrap; - justify-content: center; - gap: 6px; - margin: 4px 0 12px; -} - -.pksh-teachers__meta-badge { - display: inline-flex; - padding: 3px 10px; - font-size: 0.72rem; - font-weight: 600; - color: #6D28D9; - background: #F5F3FF; - border-radius: 100px; - white-space: nowrap; -} - -.pksh-teachers__meta-exp { - display: inline-flex; - padding: 3px 10px; - font-size: 0.72rem; - font-weight: 600; - color: #92400E; - background: #FEF3C7; - border-radius: 100px; - white-space: nowrap; -} - -.pksh-teachers__btn { - display: block; - width: 100%; - padding: 12px; - border: none; - border-radius: 12px; - font-family: inherit; - font-size: 0.9rem; - font-weight: 700; - color: #fff; - cursor: pointer; - background: linear-gradient(135deg, #7C3AED, #A855F7); - text-align: center; - text-decoration: none; - transition: opacity 0.15s, transform 0.15s, box-shadow 0.15s; - box-shadow: 0 3px 12px rgba(124, 58, 237, 0.2); - margin-top: auto; -} - -.pksh-teachers__btn:hover { - opacity: 0.92; - transform: translateY(-1px); - box-shadow: 0 5px 18px rgba(124, 58, 237, 0.3); -} - -@media (max-width: 768px) { - .page-pksh .pksh-section--teachers { - padding-top: 40px; - padding-bottom: 40px; - } - .pksh-teachers__item { - width: calc(50% - 12px); - min-width: 0; - } - .pksh-teachers__wrapper { - gap: 16px; - } - .pksh-teachers__card-top { - padding: 24px 16px 16px; - } - .pksh-teachers__photo { - width: 120px; - height: 120px; - } - .pksh-teachers__card-body { - padding: 14px 18px 20px; - gap: 6px; - } - .pksh-teachers__name { - font-size: 1rem; - } - .pksh-teachers__subj, - .pksh-teachers__desc { - font-size: 0.8125rem; - } - .pksh-teachers__btn { - padding: 10px; - font-size: 0.85rem; - } -} - -/* ── Teachers: mobile horizontal scroll (≤639px) ── */ -@media (max-width: 639px) { - .pksh-teachers__scroll-x { - overflow-x: auto; - -webkit-overflow-scrolling: touch; - scroll-snap-type: x mandatory; - padding-bottom: 20px; - } - .pksh-teachers__wrapper { - flex-wrap: nowrap; - gap: 16px; - justify-content: flex-start; - padding-bottom: 4px; - } - .pksh-teachers__item { - flex-shrink: 0; - width: calc(100vw - 64px); - max-width: 340px; - scroll-snap-align: start; - min-width: 0; - } -} - -@media (max-width: 480px) { - .pksh-teachers__item { - width: 100%; - max-width: 320px; - } -} - -/* ═══════════════════════════════════════════════════════════ - 42. BACKGROUND — единый фон на .page-pksh - Фон страницы: var(--accent-light, #F5F3FF) — задан на .page-pksh - Hero — свой тёмный фон (data-bg="hero") - FAQ — свой фон через section-bg - Все остальные секции наследуют фон страницы. - ═══════════════════════════════════════════════════ */ - -/* ── 42f. Mobile-responsive final CTA ── */ -@media (max-width: 860px) { - .page-pksh #final-cta.bento.pksh-section--alt { - background-color: var(--bg-warm, #F8F4F0); - background-image: - radial-gradient(ellipse at 50% 0%, rgba(124, 58, 237, 0.025) 0%, transparent 60%); - } -} - -/* ============================================================ - 50. TRUST AUTHORITY — Why Trust Us block - ============================================================ */ -.trust-authority { - max-width: 1000px; + .page-pksh .sticky-cta-desktop__inner { + max-width: 1280px; margin: 0 auto; - text-align: center; -} - -.trust-authority__grid { - display: grid; - grid-template-columns: repeat(3, 1fr); + display: flex; + align-items: center; + justify-content: space-between; gap: 24px; - margin-top: 32px; -} + } -.trust-authority__item { - background: #fff; - border-radius: 20px; - padding: 32px 24px; - text-align: center; - box-shadow: 0 4px 20px rgba(0,0,0,0.05); - transition: transform 0.3s ease, box-shadow 0.3s ease; -} - -.trust-authority__item:hover { - transform: translateY(-4px); - box-shadow: 0 12px 36px rgba(0,0,0,0.10); -} - -.trust-authority__icon { - font-size: 2.5rem; - display: block; - margin-bottom: 16px; -} - -.trust-authority__title { - display: block; - font-size: 1.125rem; - font-weight: 700; - color: #0F172A; - margin-bottom: 8px; -} - -.trust-authority__text { - font-size: 0.9375rem; - color: #475569; - line-height: 1.55; - margin: 0; -} - -@media (max-width: 768px) { - .trust-authority__grid { - grid-template-columns: 1fr; - gap: 16px; - } - .trust-authority__item { - padding: 24px 20px; - } -} - -/* ============================================================ - 51. EXTERNAL REVIEWS — Cross-links - ============================================================ */ -.external-reviews { - max-width: 1000px; - margin: 0 auto; - text-align: center; -} - -.external-reviews__grid { - display: grid; - grid-template-columns: repeat(4, 1fr); - gap: 20px; - margin-top: 32px; -} - -.external-reviews__card { - display: flex; - flex-direction: column; - align-items: center; - gap: 8px; - padding: 24px 16px; - background: #fff; - border-radius: 16px; - text-decoration: none; - box-shadow: 0 2px 12px rgba(0,0,0,0.05); - transition: transform 0.25s ease, box-shadow 0.25s ease; -} - -.external-reviews__card:hover { - transform: translateY(-3px); - box-shadow: 0 8px 24px rgba(0,0,0,0.10); -} - -.external-reviews__icon { - font-size: 1.5rem; - font-weight: 800; - color: #7C3AED; - width: 48px; - height: 48px; + .page-pksh .sticky-cta-desktop__info { display: flex; align-items: center; - justify-content: center; - background: rgba(124,58,237,0.08); - border-radius: 12px; -} - -.external-reviews__name { - font-size: 0.9375rem; - font-weight: 600; - color: #0F172A; -} - -.external-reviews__rating { - font-size: 0.875rem; - color: #475569; -} - -@media (max-width: 768px) { - .external-reviews__grid { - grid-template-columns: repeat(2, 1fr); - gap: 12px; - } -} - -/* ============================================================ - 52. FINAL CTA — Countdown timer - ============================================================ */ -.final-cta__timer { - margin: 20px auto 24px; - text-align: center; -} - -.final-cta__timer-label { - display: block; - font-size: 0.875rem; - font-weight: 600; - color: #7C3AED; - margin-bottom: 12px; - text-transform: uppercase; - letter-spacing: 0.05em; -} - -.final-cta__timer-digits { - display: flex; - align-items: center; - justify-content: center; - gap: 8px; -} - -.final-cta__timer-unit { - display: flex; - flex-direction: column; - align-items: center; - gap: 4px; -} - -.final-cta__timer-num { - font-size: 2.5rem; - font-weight: 800; - color: #0F172A; - line-height: 1; - font-family: 'Oswald', sans-serif; - min-width: 60px; - text-align: center; - background: #F8FAFC; - padding: 8px 12px; - border-radius: 12px; - border: 1px solid #E2E8F0; -} - -.final-cta__timer-text { - font-size: 0.75rem; - color: #94A3B8; - text-transform: uppercase; - letter-spacing: 0.05em; -} - -.final-cta__timer-sep { - font-size: 2rem; - font-weight: 700; - color: #7C3AED; - margin-top: -20px; -} - -@media (max-width: 480px) { - .final-cta__timer-num { - font-size: 1.75rem; - min-width: 44px; - padding: 6px 8px; - } - .final-cta__timer-sep { - font-size: 1.5rem; - } -} - -/* ═══════════════════════════════════════════════════════════ - 54. CONTAINER QUERIES — Card components adapt to container - Support: Chrome 111+, Safari 17+, Firefox 124+ - ============================================================ */ - -/* ── Program cards — container context ── */ -/* ── Trust authority cards — container context ── */ -.page-pksh .trust-authority__grid { - container-type: inline-size; - container-name: trust-grid; -} - -@container trust-grid (max-width: 350px) { - .trust-authority__item { - padding: 20px 16px; - } -} - -/* ============================================================ - 55. REDUCED MOTION — Comprehensive preferences - ============================================================ */ -@media (prefers-reduced-motion: reduce) { - - /* Card hover effects */ - .program-card, - .program-card__btn, - .social-counter, - .trust-authority__item, - .external-reviews__card, - .lw-card { - transition: none !important; - transform: none !important; - } - - .program-card:hover, - .social-counter:hover, - .trust-authority__item:hover, - .external-reviews__card:hover, - .lw-card:hover { - transform: none !important; - } - - /* Sticky elements fade */ - .sticky-cta-desktop, - .sticky-cta-mobile { - animation: none !important; - } - - /* Scarcity pulse */ - .pksh-fomo__dot, - .banner__scarcity { - animation: none !important; - } - - - /* Ensure elements that depend on scroll-driven animations are static */ - *, - *::before, - *::after { - animation-duration: 0.01ms !important; - animation-iteration-count: 1 !important; - scroll-behavior: auto !important; - } -} - -/* ============================================================ - 56. IMPROVED SCROLLBAR STYLING — System-wide - ============================================================ */ -@media (prefers-reduced-motion: no-preference) { - html { - scroll-behavior: smooth; - } -} - -/* ============================================================ - 57. CTA TEST — Бесплатное тестирование перед results - ============================================================ */ -.page-pksh .bento[aria-label="Запись на тестирование"] { - background: transparent; -} - -.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%; - } -} - -/* ── Honest Timer ── */ -.honest-timer { - text-align: center; - margin: 24px 0 16px; -} - -.honest-timer__label { - display: block; - font-size: 0.875rem; - color: var(--slate-500, #64748B); - margin-bottom: 12px; - font-weight: 600; -} - -.honest-timer__digits { - display: inline-flex; - align-items: center; - gap: 8px; -} - -.honest-timer__unit { - display: flex; - flex-direction: column; - align-items: center; - gap: 4px; -} - -.honest-timer__num { - display: block; - min-width: 60px; - padding: 10px 14px; - background: linear-gradient(135deg, #1E1B4B, #312E81); - color: #fff; - font-size: 1.5rem; - font-weight: 700; - font-variant-numeric: tabular-nums; - border-radius: 12px; - line-height: 1.2; - text-align: center; -} - -.honest-timer__unit-label { - font-size: 0.675rem; - color: var(--slate-400, #94A3B8); - text-transform: uppercase; - letter-spacing: 0.06em; -} - -.honest-timer__sep { - font-size: 1.5rem; - font-weight: 700; - color: var(--slate-300, #CBD5E1); - align-self: center; - line-height: 1; - margin-bottom: 0; -} - -@media (max-width: 480px) { - .honest-timer__num { - min-width: 44px; - font-size: 1.25rem; - padding: 8px 10px; - border-radius: 10px; - } - .honest-timer__sep { - font-size: 1.25rem; - } -} - -/* ═══════════════════════════════════════════════════════════ - 44 — COMPARE TABLE (pksh-compare) - Сравнение Декарт vs Репетитор vs Кружок - ═══════════════════════════════════════════════════════════ */ - -.pksh-compare { - width: 100%; - overflow-x: auto; - -webkit-overflow-scrolling: touch; - padding-bottom: 16px; - margin-top: -16px; -} - -/* Fix: stretch full width in CSS Grid (bento = 12-col grid) */ -.bento[aria-label="Сравнение"] .pksh-compare { - grid-column: 1 / -1; - width: 100%; -} - -.pksh-compare::-webkit-scrollbar { height: 6px; } -.pksh-compare::-webkit-scrollbar-thumb { - background: var(--accent, #7C3AED); - border-radius: 8px; -} - -.pksh-compare__table { - width: 100%; - min-width: 660px; - border-collapse: collapse; - font-size: 0.9375rem; - line-height: 1.5; -} - -.pksh-compare__table th, -.pksh-compare__table td { - padding: 14px 16px; - text-align: left; - vertical-align: top; - border-bottom: 1px solid #E2E8F0; -} - -.pksh-compare__table thead th { - font-family: 'Oswald', sans-serif; - font-weight: 600; - font-size: 1.05rem; - text-transform: uppercase; - letter-spacing: 0.02em; - border-bottom: 2px solid #CBD5E1; - padding-top: 20px; - padding-bottom: 16px; -} - -.pksh-compare__label-cell { - font-weight: 600; - color: #475569; - white-space: nowrap; - width: 140px; -} - -/* Highlight column — Декарт */ -.pksh-compare__highlight { - background: var(--accent-light, #F5F3FF); - border-left: 2px solid var(--accent, #7C3AED); - border-right: 2px solid var(--accent, #7C3AED); -} - -.pksh-compare__table thead .pksh-compare__highlight { - background: linear-gradient(135deg, #7C3AED, #6D28D9); - color: #fff; - border-bottom: none; -} - -.pksh-compare__col-title { - display: block; - font-size: 1.15rem; -} - -.pksh-compare__col-badge { - display: inline-block; - font-family: 'Roboto', sans-serif; - font-size: 0.7rem; - font-weight: 500; - text-transform: none; - letter-spacing: normal; - background: rgba(255,255,255,0.2); - padding: 2px 8px; - border-radius: 4px; - margin-top: 4px; -} - -/* Markers */ -.pksh-compare__yes { - color: #16A34A; - font-weight: 700; - margin-right: 4px; -} - -.pksh-compare__no { - color: #DC2626; - font-weight: 700; - margin-right: 4px; -} - -.pksh-compare__draft { - display: inline-block; - font-size: 0.7rem; - font-weight: 500; - color: #92400E; - background: #FEF3C7; - padding: 1px 6px; - border-radius: 3px; - margin-right: 4px; -} - -/* Footnote */ -.pksh-compare__footnote { - font-size: 0.8125rem; - color: #94A3B8; - padding: 12px 16px; - margin: 0; - border-top: 1px solid #E2E8F0; -} - -/* Mobile adjustments */ -@media (max-width: 639px) { - .pksh-compare__table th, - .pksh-compare__table td { - padding: 10px 12px; - font-size: 0.8125rem; - } - .pksh-compare__label-cell { - width: 100px; - font-size: 0.8125rem; - } - .pksh-compare__table thead th { - font-size: 0.9375rem; - padding-top: 14px; - padding-bottom: 12px; - } - .pksh-compare__col-title { - font-size: 1rem; - } -} - -@media (max-width: 380px) { - .pksh-compare__table th, - .pksh-compare__table td { - padding: 8px; - font-size: 0.75rem; - } -} - -/* ============================================================ - 32. PHOTO GALLERY - 3-column grid, cards with rounded corners + shadow. - Если caption пустой — img заполняет всю карточку. - ============================================================ */ -.pksh-gallery__grid { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 20px; - margin: 28px 0 0; -} - -.pksh-gallery__item { - margin: 0; - border-radius: 16px; - overflow: hidden; - background: #fff; - box-shadow: 0 2px 16px rgba(0, 0, 0, 0.07); - transition: transform 0.25s ease, box-shadow 0.25s ease; -} - -.pksh-gallery__item:hover { - transform: translateY(-4px); - box-shadow: 0 10px 32px rgba(0, 0, 0, 0.12); -} - -.pksh-gallery__img { - display: block; - width: 100%; - height: auto; - aspect-ratio: 4 / 3; - object-fit: cover; -} - -.pksh-gallery__caption { - display: block; - padding: 12px 16px 14px; - font-size: 0.875rem; - line-height: 1.5; - color: #334155; - text-align: center; -} - -/* ── Tablet: 2 columns ── */ -@media (max-width: 860px) { - .pksh-gallery__grid { - grid-template-columns: repeat(2, 1fr); gap: 16px; } -} -/* ── Mobile: 1 column ── */ -@media (max-width: 540px) { - .pksh-gallery__grid { - grid-template-columns: 1fr; - gap: 14px; + .page-pksh .sticky-cta-desktop__badge { + display: inline-block; + padding: 4px 14px; + background: var(--color-primary); + color: var(--color-text-on-dark); + font-size: 0.8125rem; + font-weight: 700; + border-radius: var(--radius-pill, 100px); + } + + .page-pksh .sticky-cta-desktop__text { + font-size: 0.9375rem; + color: var(--color-text); + font-weight: 500; + } + .page-pksh .sticky-cta-desktop__text strong { color: var(--color-primary); } + + .page-pksh .sticky-cta-desktop__btn { + padding: 14px 32px; + font-size: 1rem; + font-weight: 700; + border: none; + border-radius: 32px; + background: var(--pksh-gradient-btn-bright); + color: var(--color-text-on-dark); + cursor: pointer; + font-family: var(--font-body, 'Roboto', sans-serif); + transition: transform var(--transition-fast, 200ms ease-out), box-shadow var(--transition-fast, 200ms ease-out); + box-shadow: var(--pksh-btn-shadow-bright); + white-space: nowrap; + } + .page-pksh .sticky-cta-desktop__btn:hover { + transform: translateY(-2px); + box-shadow: var(--pksh-btn-shadow-bright-hover); + } + .page-pksh .sticky-cta-desktop__btn:focus-visible { + outline: 3px solid var(--color-primary); + outline-offset: 3px; + } + + @media (max-width: 860px) { + .page-pksh .sticky-cta-mobile { display: block; } + } + @media (max-width: 380px) { + .page-pksh .sticky-cta-mobile__text { font-size: 0.8125rem; } + .page-pksh .sticky-cta-mobile__btn { padding: 10px 18px; font-size: 0.875rem; } + } + @media (min-width: 861px) { + .page-pksh .sticky-cta-desktop { + display: block; + transform: translateY(100%); + transition: transform var(--transition-base, 300ms ease-out); + } + .page-pksh .sticky-cta-desktop.visible { transform: translateY(0); } + } + + /* ── 3s. FOMO SCARCITY BADGE ── */ + .page-pksh .pksh-fomo { + display: flex; + align-items: center; + justify-content: center; + gap: 10px; + margin: 16px auto 0; + padding: 10px 24px; + background: linear-gradient(135deg, var(--pksh-bg-fomo), color-mix(in oklab, var(--accent-100, #EDE9FE), white 30%)); + border-radius: var(--radius-pill, 100px); + max-width: fit-content; + border: 1px solid var(--pksh-border-fomo); + cursor: pointer; + transition: transform var(--transition-fast, 200ms ease-out), box-shadow var(--transition-fast, 200ms ease-out); + } + .page-pksh .pksh-fomo:hover { + transform: scale(1.02); + box-shadow: 0 4px 16px color-mix(in oklab, var(--color-warning), transparent 85%); + } + + .page-pksh .pksh-fomo__dot { + width: 10px; + height: 10px; + border-radius: 50%; + background: var(--color-primary); + flex-shrink: 0; + } + .page-pksh .pksh-fomo__text { + font-size: 0.875rem; + font-weight: 600; + color: var(--pksh-text-fomo); + } + + /* ── 3t. SCROLL PROGRESS ── */ + .page-pksh .pksh-scroll-progress { + position: fixed; + top: 0; + left: 0; + height: 3px; + background: linear-gradient(90deg, var(--color-primary), var(--color-secondary)); + z-index: 10000; + width: 0%; + transition: width 0.1s linear; + } + + /* ── 3u. MOBILE CARD OVERRIDES ── */ + @media (max-width: 639px) { + .page-pksh .bento-card { + padding: 20px 16px; + border-radius: 20px; + } + .page-pksh .bento-h2 { font-size: 1.375rem; } + } + + /* ── 3v. TAP TARGET SIZE (mobile 48px min) ── */ + @media (max-width: 639px) { + .page-pksh .btn-primary, + .page-pksh .btn-banner--main, + .page-pksh .sticky-cta-btn, + .page-pksh .micro-commit__btn { + min-height: 48px; + padding-top: 14px; + padding-bottom: 14px; + font-size: 1rem; + } + .page-pksh .social-counter { min-height: 48px; } + .page-pksh .final-cta__footnote { padding: 8px 0; } + } + +/* ═══════════════════════════════════════════════════════════ + 4. UTILITIES — animations, helpers, reduced motion + ═══════════════════════════════════════════════════════════ */ + /* ── Animations ── */ + @keyframes pksh-pulse { + 0%, 100% { opacity: 1; transform: scale(1); } + 50% { opacity: 0.6; transform: scale(1.3); } + } + + @keyframes pksh-pulse-scarcity { + 0%, 100% { transform: scale(1); background: color-mix(in oklab, var(--color-primary), transparent 80%); } + 50% { transform: scale(1.03); background: color-mix(in oklab, var(--color-primary), transparent 65%); } + } + + @keyframes stickyFadeIn { + from { opacity: 0; transform: translateY(16px); } + to { opacity: 1; transform: translateY(0); } + } + + .page-pksh .pksh-fomo__dot { animation: pksh-pulse 2s infinite; } + + .page-pksh .sticky-cta-mobile { animation: stickyFadeIn 0.3s ease; } + + /* ── Scrollbar styling ── */ + .page-pksh .reviews-cards .lw-grid--3::-webkit-scrollbar, + .page-pksh .programs-grid::-webkit-scrollbar, + .page-pksh .pksh-teachers__scroll-x::-webkit-scrollbar { + height: 8px; + background: var(--bg-bento-alt, #F1F5F9); + border-radius: 8px; + } + .page-pksh .reviews-cards .lw-grid--3::-webkit-scrollbar-thumb, + .page-pksh .programs-grid::-webkit-scrollbar-thumb, + .page-pksh .pksh-teachers__scroll-x::-webkit-scrollbar-thumb { + background: linear-gradient(90deg, var(--color-primary), var(--color-secondary)); + border-radius: 8px; + border: 2px solid var(--bg-bento-alt, #F1F5F9); + } + .page-pksh .reviews-cards .lw-grid--3::-webkit-scrollbar-thumb:hover, + .page-pksh .programs-grid::-webkit-scrollbar-thumb:hover, + .page-pksh .pksh-teachers__scroll-x::-webkit-scrollbar-thumb:hover { + background: linear-gradient(90deg, var(--color-primary-dark), var(--color-primary)); + } + .page-pksh .reviews-cards .lw-grid--3, + .page-pksh .programs-grid, + .page-pksh .pksh-teachers__scroll-x { + scrollbar-width: thin; + scrollbar-color: var(--color-primary) var(--bg-bento-alt, #F1F5F9); + } + + @media (max-width: 768px) { + .page-pksh .reviews-cards .lw-grid--3 { padding-bottom: 20px; } + .page-pksh .programs-grid { padding-bottom: 20px; } + } + + /* ═══════════════════════════════════════════════════════════ + REDUCED MOTION — comprehensive preferences + ═══════════════════════════════════════════════════════════ */ + @media (prefers-reduced-motion: reduce) { + .page-pksh .prog-card, + .page-pksh .prog-card__btn, + .page-pksh .social-counter, + .page-pksh .trust-authority__item, + .page-pksh .external-reviews__card, + .page-pksh .lw-card { + transition: none; + transform: none; + } + .page-pksh .prog-card:hover, + .page-pksh .social-counter:hover, + .page-pksh .trust-authority__item:hover, + .page-pksh .external-reviews__card:hover, + .page-pksh .lw-card:hover { + transform: none; + } + + .page-pksh .sticky-cta-desktop, + .page-pksh .sticky-cta-mobile { + animation: none; + } + + .page-pksh .pksh-fomo__dot, + .page-pksh .banner__scarcity { + animation: none; + } + + .page-pksh *, + .page-pksh *::before, + .page-pksh *::after { + animation-duration: 0.01ms; + animation-iteration-count: 1; + scroll-behavior: auto; + } + } + + @media (prefers-reduced-motion: no-preference) { + html { scroll-behavior: smooth; } } -} diff --git a/wp-content/themes/dekart/template-parts/pksh/results.php b/wp-content/themes/dekart/template-parts/pksh/results.php index 170a8d4..db7d42d 100644 --- a/wp-content/themes/dekart/template-parts/pksh/results.php +++ b/wp-content/themes/dekart/template-parts/pksh/results.php @@ -14,7 +14,7 @@ if ( ! defined( 'ABSPATH' ) ) {
Результаты наших учеников

К чему мы приводим детей

-

95% наших выпускников поступают в школы и лицеи Щёлкова без стресса. Первые результаты — через 3 недели.

+

95% наших выпускников поступают в школы и лицеи Щёлкова без стресса. Первые результаты — через 3 недели.

95%