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 5211801..ea3d304 100644 --- a/wp-content/themes/dekart/assets/css/podgotovka-k-shkole.css +++ b/wp-content/themes/dekart/assets/css/podgotovka-k-shkole.css @@ -287,119 +287,142 @@ background: rgba(124, 58, 237, 0.2); /* ============================================================ 9. PROGRAMS GRID ============================================================ */ +/* ============================================================ + 9. PROGRAMS — redesigned 2-column cards + ============================================================ */ .programs-grid { display: grid; - grid-template-columns: repeat(3, 1fr); + grid-template-columns: 1fr 1fr; gap: 24px; - margin: 28px 0 20px; + margin: 28px 0 0; + align-items: stretch; } -/* ── Card container ── */ -.program-card { +/* ── Card base ── */ +.prog-card { display: flex; flex-direction: column; - border-radius: 20px; + border-radius: 24px; overflow: hidden; - background: #fff; - box-shadow: 0 4px 24px rgba(0,0,0,0.07); + background: #FFFFFF; + box-shadow: 0 4px 24px rgba(0, 0, 0, 0.07); transition: transform 0.25s ease, box-shadow 0.25s ease; + position: relative; } -.program-card:hover { - transform: translateY(-6px); - box-shadow: 0 16px 40px rgba(0,0,0,0.12); +.prog-card:hover { + transform: translateY(-4px); + box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12); } +/* ── Premium card highlight ── */ +.prog-card--premium { + border: 2px solid #7C3AED; + box-shadow: 0 4px 28px rgba(124, 58, 237, 0.12); +} + +.prog-card--premium:hover { + box-shadow: 0 12px 44px rgba(124, 58, 237, 0.20); +} + +/* ── Badge "Популярный выбор" ── */ +.prog-card__badge { + position: absolute; + top: 16px; + right: 16px; + z-index: 2; + display: inline-flex; + padding: 5px 12px; + background: #F59E0B; + color: #0F172A; + font-size: 0.68rem; + font-weight: 800; + border-radius: 100px; + letter-spacing: 0.01em; + box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3); + white-space: nowrap; + gap: 0; +} + +/* (badge-icon and badge-desc removed — now inline) */ + /* ── Header ── */ -.program-card__header { - padding: 20px 24px; - background: linear-gradient(135deg, var(--accent, #7C3AED), #A855F7); - color: #fff; +.prog-card__header { + padding: 16px 24px 20px; display: flex; - align-items: center; - gap: 12px; + flex-direction: column; + align-items: flex-start; + gap: 8px; + position: relative; } -.program-card__icon { - font-size: 1.6rem; +.prog-card__header-row { + display: flex; + align-items: center; + gap: 14px; + width: 100%; +} + +.prog-card--base .prog-card__header { + background: linear-gradient(135deg, #7C3AED, #A855F7); + color: #FFFFFF; +} + +.prog-card--premium .prog-card__header { + background: linear-gradient(135deg, #6D28D9, #7C3AED); + color: #FFFFFF; +} + +.prog-card__icon { flex-shrink: 0; - width: 44px; - height: 44px; + width: 48px; + height: 48px; display: flex; align-items: center; justify-content: center; - background: rgba(255,255,255,0.18); - border-radius: 12px; + background: rgba(255, 255, 255, 0.18); + border-radius: 14px; + font-size: 1.4rem; } -.program-card__title { - margin: 0; +.prog-card__icon--double { + font-size: 1rem; + letter-spacing: -2px; +} + +.prog-card__name { font-size: 1.1rem; font-weight: 700; - color: #fff; line-height: 1.25; } +.prog-card__subname { + font-size: 0.85rem; + opacity: 0.85; + margin-top: 2px; +} + /* ── Body ── */ -.program-card__body { - padding: 24px; +.prog-card__body { + padding: 20px 24px 24px; flex-grow: 1; display: flex; flex-direction: column; - gap: 18px; + gap: 16px; } -/* ── Shared label ── */ -.program-card__label { - display: block; - font-size: 0.8rem; +/* ── Block ── */ +.prog-card__block-title { + font-size: 0.75rem; font-weight: 700; text-transform: uppercase; - letter-spacing: 0.04em; + letter-spacing: 0.05em; color: #64748B; - margin-bottom: 4px; -} - -/* ── Intensity ── */ -.program-card__intensity { - font-size: 0.95rem; - color: #334155; - background: #F8FAFC; - padding: 10px 14px; - border-radius: 10px; - border-left: 3px solid var(--accent, #7C3AED); -} - -/* ── Schedule ── */ -.program-card__schedule ul { - list-style: none; - padding: 0; - margin: 0; -} - -.program-card__schedule li { - position: relative; - padding-left: 18px; - margin-bottom: 4px; - font-size: 0.9rem; - color: #475569; - line-height: 1.5; -} - -.program-card__schedule li::before { - content: "•"; - position: absolute; - left: 4px; - color: var(--accent, #7C3AED); - font-weight: 700; -} - -/* ── Lesson structure timeline ── */ -.program-card__structure .program-card__label { margin-bottom: 8px; } -.program-card__timeline { +/* ── Checklist ── */ +.prog-card__checklist { list-style: none; padding: 0; margin: 0; @@ -408,154 +431,247 @@ background: rgba(124, 58, 237, 0.2); gap: 6px; } -.program-card__timeline-item { - display: flex; - align-items: center; - gap: 10px; - padding: 6px 10px; - background: #F8FAFC; - border-radius: 8px; +.prog-card__checklist li { + position: relative; + padding-left: 22px; + font-size: 0.9rem; + color: #475569; + line-height: 1.45; } -.program-card__timeline-badge { +.prog-card__checklist li::before { + content: "✓"; + position: absolute; + left: 0; + color: #7C3AED; + font-weight: 800; + font-size: 0.85rem; +} + +.prog-card__checklist--plus { + font-weight: 600; + color: #1E293B; +} + +.prog-card__checklist--plus::before { + color: #F59E0B !important; +} + +/* ── Schedule ── */ +.prog-card__schedule { + font-size: 0.95rem; + font-weight: 600; + color: #1E293B; + background: #F8FAFC; + padding: 10px 14px; + border-radius: 10px; + border-left: 3px solid #7C3AED; +} + +/* ── Tags (structure) ── */ +.prog-card__tags { + display: flex; + flex-wrap: wrap; + gap: 6px; +} + +.prog-card__tag { display: inline-flex; - align-items: center; - justify-content: center; - min-width: 60px; - padding: 2px 8px; - font-size: 0.72rem; - font-weight: 700; - color: #fff; - background: var(--accent, #7C3AED); - border-radius: 6px; + padding: 5px 12px; + font-size: 0.8rem; + font-weight: 600; + color: #7C3AED; + background: #F5F3FF; + border-radius: 100px; white-space: nowrap; } -.program-card__timeline-name { - font-size: 0.88rem; - color: #334155; - line-height: 1.35; +/* ── Trust row ── */ +.prog-card__trust { + display: flex; + flex-wrap: wrap; + gap: 8px 16px; + padding: 12px 14px; + background: #FAFAFE; + border-radius: 12px; + font-size: 0.85rem; + color: #64748B; } -/* ── Includes (✅ list) ── */ -.program-card__includes ul { - list-style: none; - padding: 0; - margin: 0; -} - -.program-card__includes li { - position: relative; - padding-left: 20px; +/* ── Pricing — now at top of body ── */ +.prog-card__pricing { + padding: 0 0 12px; + border-bottom: 1px solid #E9EDF4; margin-bottom: 4px; - font-size: 0.88rem; - color: #475569; - line-height: 1.5; } -.program-card__includes li::before { - content: "✅"; - position: absolute; - left: 0; - font-size: 0.7rem; -} - -/* ── Pricing block ── */ -.program-card__pricing { - margin-top: auto; - padding-top: 14px; - border-top: 1px solid #E9EDF4; - display: flex; - flex-direction: column; - gap: 4px; -} - -.program-card__price-main { - display: flex; - align-items: baseline; - gap: 8px; -} - -.program-card__price-value { - font-size: 1.5rem; +.prog-card__price { + font-size: 1.6rem; font-weight: 800; color: #0F172A; line-height: 1.1; } -.program-card__price-period { - font-size: 0.8rem; +.prog-card__price--premium { + color: #6D28D9; +} + +.prog-card__price-period { + font-size: 0.85rem; + font-weight: 400; color: #64748B; } -.program-card__price-single { - font-size: 0.8rem; - color: #94A3B8; +.prog-card__price-sub { + font-size: 0.82rem; + color: #10B981; + font-weight: 600; + margin-top: 2px; } -/* ── CTA button ── */ -.program-card__btn { +.prog-card__price-single { + font-size: 0.78rem; + color: #94A3B8; + margin-top: 4px; +} + +.prog-card__urgency { + font-size: 0.8rem; + font-weight: 700; + color: #F59E0B; + margin-top: 6px; +} + +/* ── Result promise ── */ +.prog-card__result { + display: flex; + align-items: center; + gap: 10px; + padding: 10px 14px; + background: #F0FDF4; + border-radius: 12px; + border-left: 3px solid #10B981; + font-size: 0.9rem; + color: #166534; + line-height: 1.4; +} + +.prog-card__result-icon { + font-size: 1.2rem; + flex-shrink: 0; +} + +/* ── Header badge "Первое занятие — бесплатно" ── */ +.prog-card__header-badge { + flex-shrink: 0; + display: inline-flex; + padding: 4px 10px; + background: rgba(255, 255, 255, 0.22); + color: #FFFFFF; + font-size: 0.68rem; + font-weight: 700; + border-radius: 100px; + letter-spacing: 0.02em; + white-space: nowrap; +} + +/* ── Compare block (premium only) ── */ +.prog-card__compare { + display: flex; + align-items: center; + gap: 10px; + padding: 10px 14px; + background: #F5F3FF; + border-radius: 12px; + border-left: 3px solid #7C3AED; + font-size: 0.85rem; + color: #4C1D95; + line-height: 1.4; +} + +.prog-card__compare-icon { + font-size: 1.1rem; + flex-shrink: 0; +} +.prog-card__social-proof { + display: flex; + flex-wrap: wrap; + gap: 6px 16px; + font-size: 0.82rem; + color: #64748B; +} + +/* ── Button ── */ +.prog-card__btn { display: block; width: 100%; - padding: 12px; + padding: 14px; border: none; - border-radius: 12px; + border-radius: 14px; font-family: inherit; font-size: 1rem; font-weight: 700; color: #fff; cursor: pointer; - background: var(--accent, #7C3AED); + 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 4px 16px rgba(124, 58, 237, 0.25); } -.program-card__btn:hover { - opacity: 0.9; - transform: translateY(-1px); - box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3); +.prog-card__btn:hover { + opacity: 0.92; + transform: translateY(-2px); + box-shadow: 0 6px 24px rgba(124, 58, 237, 0.35); } -/* ── Programs grid responsive ── */ +.prog-card__footnote { + text-align: center; + font-size: 0.8rem; + color: #94A3B8; + margin-top: 8px; +} + +/* ── Responsive ── */ @media (max-width: 860px) { .programs-grid { - grid-template-columns: repeat(2, 1fr); - } -} -@media (max-width: 639px) { - .programs-grid { - grid-template-columns: 1fr; - } -} - -.programs-note { - text-align: center; - padding: 16px 0 0; - font-size: 0.925rem; - color: var(--slate-600); -} - -.programs-note__link { - color: var(--accent, #7C3AED); - font-weight: 700; - text-decoration: underline; - text-underline-offset: 2px; -} - -@media (max-width: 639px) { - .programs-grid { - grid-template-columns: 1fr; + grid-template-columns: 1fr 1fr; gap: 16px; } - .program-card__header { - padding: 14px 16px; + .prog-card__header { + padding: 14px 18px 16px; + gap: 6px; } - .program-card__title { + .prog-card--premium .prog-card__header { + padding: 14px 18px 16px; + } + .prog-card__body { + padding: 16px 18px 18px; + gap: 14px; + } + .prog-card__checklist li { + font-size: 0.85rem; + } + .prog-card__price { + font-size: 1.35rem; + } + .prog-card__btn { + padding: 12px; font-size: 0.95rem; } - .program-card__body { - padding: 16px; +} + +@media (max-width: 639px) { + .programs-grid { + grid-template-columns: 1fr; + gap: 20px; + } + .prog-card__badge { + top: 12px; + right: 12px; + font-size: 0.6rem; + padding: 4px 10px; } } diff --git a/wp-content/themes/dekart/page-podgotovka-k-shkole.php b/wp-content/themes/dekart/page-podgotovka-k-shkole.php index 941e5ab..d805c41 100644 --- a/wp-content/themes/dekart/page-podgotovka-k-shkole.php +++ b/wp-content/themes/dekart/page-podgotovka-k-shkole.php @@ -437,130 +437,166 @@ $opt_social_raw = get_option( 'branch_social' ) ?: carbon_get_post_meta( $post_ Группы до 8 человек — каждому ребёнку уделяем внимание.
Заполните программы в админке → Настройки Подготовки к школе → Программы
+ +Первое пробное занятие — бесплатно. При покупке абонемента на месяц — скидка 10%. - Записаться на бесплатное пробное
-