/* ═══════════════════════════════════════════════════ front-page.css — стили для шаблона front-page.php Hero использует ds-hero из main.css (как /podgotovka-k-shkole/) ═══════════════════════════════════════════════════ */ /* ---- Блок "Наши услуги" (блоки-карточки) ---- */ .advantages__block-item { border-width: 2px; border-style: solid; } .advantages__block-item--school { border-color: #A05A95; } .advantages__block-item--preschool { border-color: #F682A5; } .advantages__block-item--afterschool { border-color: #FEDF6F; } .advantages__block-item--exam { border-color: #F9A474; } .advantages__block-item--camp { border-color: #C9DA8F; } .advantages__block-item--clubs { border-color: #B8CEDC; } /* ---- Информационный блок ---- */ .info__block--compact { padding-bottom: 0; margin-top: 40px; } .info__block-content_text--full { max-width: 100%; } /* ---- Выделение учебного года ---- */ .ds-hero__year { color: #60A5FA; font-weight: 800; white-space: nowrap; text-shadow: 0 0 6px rgba(96, 165, 250, 0.3); } /* ---- Анимированные звёзды рейтинга ---- */ .ds-hero__rating-stars { display: inline-flex; gap: 3px; vertical-align: middle; } .ds-star { display: inline-flex; opacity: 0; transform: scale(0.3); animation: ds-star-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } .ds-star svg { display: block; width: 18px; height: 18px; color: var(--color-rating, #F59E0B); filter: drop-shadow(0 0 0 transparent); transition: filter 0.3s; } /* Анимация появления + сияние */ @keyframes ds-star-pop { 0% { opacity: 0; transform: scale(0.3) rotate(-15deg); } 50% { opacity: 1; transform: scale(1.25); } 70% { opacity: 1; transform: scale(0.95); } 85% { opacity: 1; transform: scale(1.05); } 100% { opacity: 1; transform: scale(1); } } @keyframes ds-star-shine { 0% { filter: drop-shadow(0 0 0 rgba(245, 158, 11, 0)); } 40% { filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.8)) drop-shadow(0 0 20px rgba(245, 158, 11, 0.3)); } 100% { filter: drop-shadow(0 0 0 rgba(245, 158, 11, 0)); } } /* Задержки для каждой звезды */ .ds-star--1 { animation-delay: 0.2s; } .ds-star--2 { animation-delay: 0.5s; } .ds-star--3 { animation-delay: 0.8s; } .ds-star--4 { animation-delay: 1.1s; } .ds-star--5 { animation-delay: 1.4s; } /* Сияние — догоняется после появления */ .ds-star--1 svg { animation: ds-star-shine 0.7s ease-out 0.5s forwards; } .ds-star--2 svg { animation: ds-star-shine 0.7s ease-out 0.8s forwards; } .ds-star--3 svg { animation: ds-star-shine 0.7s ease-out 1.1s forwards; } .ds-star--4 svg { animation: ds-star-shine 0.7s ease-out 1.4s forwards; } .ds-star--5 svg { animation: ds-star-shine 0.7s ease-out 1.7s forwards; } /* ---- Hero assurance (risk reversal + urgency) ---- */ .ds-hero__assurance { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: 12px; margin-bottom: 8px; } .ds-hero__assurance-item { font-size: 13px; color: rgba(255, 255, 255, 0.65); display: inline-flex; align-items: center; gap: 4px; } .ds-hero__assurance-item::before { content: '✓'; color: #4ADE80; font-weight: 700; font-size: 11px; } /* ---- CTA-блок (бесплатная экскурсия) ---- */ .cta-block { background: linear-gradient(90deg, #fdf6ff 0%, #f5e8f5 100%); padding: 60px 0; border-top: 2px solid #A05A95; border-bottom: 2px solid #A05A95; margin: 40px 0; text-align: center; } .cta-wrapper { max-width: 900px; margin: 0 auto; } .cta-wrapper .page_h2 { margin-bottom: 20px; line-height: 1.3; } .cta-wrapper p { font-size: 1.2rem; color: #444; margin-bottom: 30px; } .cta-wrapper .btn-page { margin: 0 auto; display: block; padding: 18px 45px; font-size: 1.3rem; box-shadow: 0 4px 15px rgba(160, 90, 149, .3); }