@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"); /* ##################################################################### МИРАНДИС — КАРТА GLOBAL CSS Версия структуры: 22.09.2026 ##################################################################### БЛОК A — СТРАНИЦЫ КОНКРЕТНЫХ ШКОЛЬНЫХ ТУРОВ ------------------------------------------------------------ #mirandis-tour-wrapper A1. Базовые настройки A2. Позиционирование A3. Flex / Grid A4. Размеры A5. Отступы A6. Типографика A7. Цвета / фоны / рамки / тени A8. Таймлайн и программа тура A9. Аккордеон A10. Карусель и Lightbox A11. Кнопки A12. Карточки тарифов A13. Преимущества A14. Адаптив БЛОК B — FAQ КОНКРЕТНЫХ ТУРОВ ------------------------------------------------------------ .mira-faq-* БЛОК C — ИНТЕРАКТИВНЫЙ ТАРИФ ------------------------------------------------------------ .price-animate .group-option .optimal-badge .savings-bar БЛОК D — ОБЩИЙ БЕЛЫЙ ФОН + ЗАЩИТА ИКОНОК ------------------------------------------------------------ FINAL PATCH БЛОК E — ПОСАДОЧНЫЕ СТРАНИЦЫ НАПРАВЛЕНИЙ ------------------------------------------------------------ .mira-direction-breadcrumbs .mira-direction-hero .mira-direction-seo .mira-direction-faq-* ВАЖНО: • Блоки A–D — для страниц КОНКРЕТНЫХ туров. • Блок E — для посадочных страниц НАПРАВЛЕНИЙ. • Не смешивать .mira-faq-* и .mira-direction-faq-*. • Font Awesome подключается один раз в самом верху этого файла. • Montserrat отдельно внутри HTML-блоков не подключаем. ##################################################################### */ /* ##################################################################### БЛОК A. СТРАНИЦЫ КОНКРЕТНЫХ ШКОЛЬНЫХ ТУРОВ ##################################################################### */ /* ===================================================================== ШКОЛЬНЫЕ ТУРЫ — #mirandis-tour-wrapper ===================================================================== */ /* === БАЗОВЫЕ НАСТРОЙКИ === */ #mirandis-tour-wrapper { font-family: 'Montserrat', sans-serif !important; color: #543311 !important; background-color: #ffffff !important; line-height: 1.5 !important; box-sizing: border-box; -webkit-font-smoothing: antialiased; } #mirandis-tour-wrapper *, #mirandis-tour-wrapper *::before, #mirandis-tour-wrapper *::after { box-sizing: border-box; } #mirandis-tour-wrapper h1, #mirandis-tour-wrapper h2, #mirandis-tour-wrapper h3, #mirandis-tour-wrapper h4, #mirandis-tour-wrapper p, #mirandis-tour-wrapper ul, #mirandis-tour-wrapper li { margin: 0; padding: 0; font-family: 'Montserrat', sans-serif !important; color: inherit !important; list-style: none; } #mirandis-tour-wrapper a { text-decoration: none !important; } #mirandis-tour-wrapper img { max-width: 100%; height: auto; display: block; } /* === ПОЗИЦИОНИРОВАНИЕ === */ #mirandis-tour-wrapper .relative { position: relative; } #mirandis-tour-wrapper .absolute { position: absolute; } #mirandis-tour-wrapper .inset-0 { top: 0; right: 0; bottom: 0; left: 0; } #mirandis-tour-wrapper .top-0 { top: 0; } #mirandis-tour-wrapper .right-0 { right: 0; } #mirandis-tour-wrapper .z-10 { z-index: 10; } #mirandis-tour-wrapper .z-20 { z-index: 20; } #mirandis-tour-wrapper .overflow-hidden { overflow: hidden; } /* === FLEXBOX И GRID === */ #mirandis-tour-wrapper .flex { display: flex; } #mirandis-tour-wrapper .grid { display: grid; } #mirandis-tour-wrapper .block { display: block; } #mirandis-tour-wrapper .inline-flex { display: inline-flex; } #mirandis-tour-wrapper .flex-col { flex-direction: column; } #mirandis-tour-wrapper .items-center { align-items: center; } #mirandis-tour-wrapper .items-start { align-items: flex-start; } #mirandis-tour-wrapper .items-baseline { align-items: baseline; } #mirandis-tour-wrapper .justify-center { justify-content: center; } #mirandis-tour-wrapper .justify-between { justify-content: space-between; } #mirandis-tour-wrapper .shrink-0, #mirandis-tour-wrapper .flex-shrink-0 { flex-shrink: 0; } #mirandis-tour-wrapper .flex-grow { flex-grow: 1; } #mirandis-tour-wrapper .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } #mirandis-tour-wrapper .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } #mirandis-tour-wrapper .grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* === РАЗМЕРЫ === */ #mirandis-tour-wrapper .w-full { width: 100%; } #mirandis-tour-wrapper .w-max { width: max-content; } #mirandis-tour-wrapper .w-6 { width: 1.5rem; } #mirandis-tour-wrapper .w-14 { width: 3.5rem; } #mirandis-tour-wrapper .w-16 { width: 4rem; } #mirandis-tour-wrapper .w-40 { width: 10rem; } #mirandis-tour-wrapper .h-full { height: 100%; } #mirandis-tour-wrapper .h-1\.5 { height: 0.375rem; } #mirandis-tour-wrapper .h-2 { height: 0.5rem; } #mirandis-tour-wrapper .h-12 { height: 3rem; } #mirandis-tour-wrapper .h-16 { height: 4rem; } #mirandis-tour-wrapper .h-\[350px\] { height: 350px; } #mirandis-tour-wrapper .max-w-2xl { max-width: 42rem; } #mirandis-tour-wrapper .max-w-3xl { max-width: 48rem; } #mirandis-tour-wrapper .max-w-4xl { max-width: 56rem; } #mirandis-tour-wrapper .max-w-5xl { max-width: 64rem; } #mirandis-tour-wrapper .max-w-6xl { max-width: 72rem; } #mirandis-tour-wrapper .max-w-7xl { max-width: 80rem; } /* === ОТСТУПЫ === */ #mirandis-tour-wrapper .mx-auto { margin-left: auto; margin-right: auto; } #mirandis-tour-wrapper .mt-1 { margin-top: 0.25rem; } #mirandis-tour-wrapper .mt-auto { margin-top: auto; } #mirandis-tour-wrapper .mt-12 { margin-top: 3rem; } #mirandis-tour-wrapper .mt-16 { margin-top: 4rem; } #mirandis-tour-wrapper .mb-1 { margin-bottom: 0.25rem; } #mirandis-tour-wrapper .mb-2 { margin-bottom: 0.5rem; } #mirandis-tour-wrapper .mb-3 { margin-bottom: 0.75rem; } #mirandis-tour-wrapper .mb-4 { margin-bottom: 1rem; } #mirandis-tour-wrapper .mb-6 { margin-bottom: 1.5rem; } #mirandis-tour-wrapper .mb-8 { margin-bottom: 2rem; } #mirandis-tour-wrapper .mb-12 { margin-bottom: 3rem; } #mirandis-tour-wrapper .ml-1 { margin-left: 0.25rem; } #mirandis-tour-wrapper .p-5 { padding: 1.25rem; } #mirandis-tour-wrapper .p-6 { padding: 1.5rem; } #mirandis-tour-wrapper .p-8 { padding: 2rem; } #mirandis-tour-wrapper .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; } #mirandis-tour-wrapper .px-4 { padding-left: 1rem; padding-right: 1rem; } #mirandis-tour-wrapper .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; } #mirandis-tour-wrapper .px-8 { padding-left: 2rem; padding-right: 2rem; } #mirandis-tour-wrapper .px-10 { padding-left: 2.5rem; padding-right: 2.5rem; } #mirandis-tour-wrapper .py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; } #mirandis-tour-wrapper .py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; } #mirandis-tour-wrapper .py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; } #mirandis-tour-wrapper .py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; } #mirandis-tour-wrapper .py-8 { padding-top: 2rem; padding-bottom: 2rem; } #mirandis-tour-wrapper .py-12 { padding-top: 3rem; padding-bottom: 3rem; } #mirandis-tour-wrapper .py-16 { padding-top: 4rem; padding-bottom: 4rem; } #mirandis-tour-wrapper .py-20 { padding-top: 5rem; padding-bottom: 5rem; } #mirandis-tour-wrapper .pt-6 { padding-top: 1.5rem; } #mirandis-tour-wrapper .pt-8 { padding-top: 2rem; } #mirandis-tour-wrapper .pb-6 { padding-bottom: 1.5rem; } #mirandis-tour-wrapper .pb-12 { padding-bottom: 3rem; } #mirandis-tour-wrapper .pl-10 { padding-left: 2.5rem; } #mirandis-tour-wrapper .gap-2 { gap: 0.5rem; } #mirandis-tour-wrapper .gap-3 { gap: 0.75rem; } #mirandis-tour-wrapper .gap-4 { gap: 1rem; } #mirandis-tour-wrapper .gap-6 { gap: 1.5rem; } #mirandis-tour-wrapper .gap-8 { gap: 2rem; } #mirandis-tour-wrapper .gap-12 { gap: 3rem; } #mirandis-tour-wrapper .space-y-2 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.5rem; } #mirandis-tour-wrapper .space-y-3 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.75rem; } #mirandis-tour-wrapper .space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem; } #mirandis-tour-wrapper .space-y-6 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.5rem; } /* === ТИПОГРАФИКА === */ #mirandis-tour-wrapper .text-center { text-align: center; } #mirandis-tour-wrapper .text-left { text-align: left; } #mirandis-tour-wrapper .text-xs { font-size: 0.75rem; line-height: 1rem; } #mirandis-tour-wrapper .text-sm { font-size: 0.875rem; line-height: 1.25rem; } #mirandis-tour-wrapper .text-base { font-size: 1rem; line-height: 1.5rem; } #mirandis-tour-wrapper .text-lg { font-size: 1.125rem; line-height: 1.75rem; } #mirandis-tour-wrapper .text-xl { font-size: 1.25rem; line-height: 1.75rem; } #mirandis-tour-wrapper .text-2xl { font-size: 1.5rem; line-height: 2rem; } #mirandis-tour-wrapper .text-3xl { font-size: 1.875rem; line-height: 2.25rem; } #mirandis-tour-wrapper .text-4xl { font-size: 2.25rem; line-height: 2.5rem; } #mirandis-tour-wrapper .text-5xl { font-size: 3rem; line-height: 1; } #mirandis-tour-wrapper .text-6xl { font-size: 3.75rem; line-height: 1; } #mirandis-tour-wrapper .font-medium { font-weight: 500; } #mirandis-tour-wrapper .font-semibold { font-weight: 600; } #mirandis-tour-wrapper .font-bold { font-weight: 700; } #mirandis-tour-wrapper .font-extrabold { font-weight: 800; } #mirandis-tour-wrapper .uppercase { text-transform: uppercase; } #mirandis-tour-wrapper .tracking-wide { letter-spacing: 0.025em; } #mirandis-tour-wrapper .tracking-wider { letter-spacing: 0.05em; } #mirandis-tour-wrapper .leading-tight { line-height: 1.25; } #mirandis-tour-wrapper .leading-snug { line-height: 1.375; } #mirandis-tour-wrapper .leading-relaxed { line-height: 1.625; } #mirandis-tour-wrapper .whitespace-nowrap { white-space: nowrap; } #mirandis-tour-wrapper p.text-sm { font-size: 15px !important; } /* === ЦВЕТА ТЕКСТА === */ #mirandis-tour-wrapper .text-brand-text { color: #543311 !important; } #mirandis-tour-wrapper .text-brand-btn { color: #587B30 !important; } #mirandis-tour-wrapper .text-brand-bg { color: #ffffff !important; } #mirandis-tour-wrapper .text-brand-text\/40 { color: rgba(84, 51, 17, 0.4) !important; } #mirandis-tour-wrapper .text-brand-text\/50 { color: rgba(84, 51, 17, 0.5) !important; } #mirandis-tour-wrapper .text-brand-text\/60 { color: rgba(84, 51, 17, 0.6) !important; } #mirandis-tour-wrapper .text-\[\#8a4e1e\] { color: #8a4e1e !important; } #mirandis-tour-wrapper .text-white { color: #ffffff !important; } /* === ФОНЫ === */ #mirandis-tour-wrapper .bg-brand-btn { background-color: #587B30; } #mirandis-tour-wrapper .bg-brand-btn\/5 { background-color: rgba(88, 123, 48, 0.05); } #mirandis-tour-wrapper .bg-brand-btn\/10 { background-color: rgba(88, 123, 48, 0.1); } #mirandis-tour-wrapper .bg-brand-btn\/15 { background-color: rgba(88, 123, 48, 0.15); } #mirandis-tour-wrapper .bg-brand-bg { background-color: #ffffff; } #mirandis-tour-wrapper .bg-accordion-body { background-color: #ffffff !important; } #mirandis-tour-wrapper .bg-brand-accent { background-color: #e8eedf; } #mirandis-tour-wrapper .bg-brand-accent\/20 { background-color: rgba(232, 238, 223, 0.2); } #mirandis-tour-wrapper .bg-brand-accent\/30 { background-color: rgba(232, 238, 223, 0.3); } #mirandis-tour-wrapper .bg-brand-accent\/50 { background-color: rgba(232, 238, 223, 0.5); } #mirandis-tour-wrapper .bg-brand-text\/80 { background-color: rgba(84, 51, 17, 0.8); } #mirandis-tour-wrapper .bg-white { background-color: #ffffff; } #mirandis-tour-wrapper .bg-transparent { background-color: transparent; } #mirandis-tour-wrapper .bg-yellow-400 { background-color: #facc15; } #mirandis-tour-wrapper .bg-orange-50\/50 { background-color: rgba(255, 247, 237, 0.5); } #mirandis-tour-wrapper .bg-white\/10 { background-color: rgba(255, 255, 255, 0.1); } #mirandis-tour-wrapper .bg-\[\#FAF9F4\] { background-color: #FAF9F4; } /* === СКРУГЛЕНИЯ === */ #mirandis-tour-wrapper .rounded-md { border-radius: 0.5rem; } #mirandis-tour-wrapper .rounded-lg { border-radius: 0.75rem; } #mirandis-tour-wrapper .rounded-xl { border-radius: 1.25rem; } #mirandis-tour-wrapper .rounded-2xl { border-radius: 1.5rem; } #mirandis-tour-wrapper .rounded-3xl { border-radius: 1.75rem; } #mirandis-tour-wrapper .rounded-full { border-radius: 9999px; } #mirandis-tour-wrapper .rounded-bl-lg { border-bottom-left-radius: 0.75rem; } /* === РАМКИ === */ #mirandis-tour-wrapper .border { border-width: 1px; border-style: solid; } #mirandis-tour-wrapper .border-2 { border-width: 2px; border-style: solid; } #mirandis-tour-wrapper .border-t { border-top-width: 1px; border-style: solid; } #mirandis-tour-wrapper .border-b { border-bottom-width: 1px; border-bottom-style: solid; } #mirandis-tour-wrapper .border-l { border-left-width: 1px; border-style: solid; } #mirandis-tour-wrapper .border-transparent { border-color: transparent; } #mirandis-tour-wrapper .border-brand-btn\/20 { border-color: rgba(88, 123, 48, 0.2); } #mirandis-tour-wrapper .border-brand-btn\/30 { border-color: rgba(88, 123, 48, 0.3); } #mirandis-tour-wrapper .border-brand-text\/5 { border-color: rgba(84, 51, 17, 0.05); } #mirandis-tour-wrapper .border-brand-text\/10 { border-color: rgba(88, 123, 48, 0.08); } #mirandis-tour-wrapper .border-brand-accent { border-color: #e8eedf; } #mirandis-tour-wrapper .border-brand-accent\/40 { border-color: rgba(232, 238, 223, 0.4); } #mirandis-tour-wrapper .border-brand-accent\/50 { border-color: rgba(232, 238, 223, 0.5); } #mirandis-tour-wrapper .border-brand-accent\/60 { border-color: rgba(232, 238, 223, 0.6); } #mirandis-tour-wrapper .border-orange-100 { border-color: #ffedd5; } #mirandis-tour-wrapper .border-white\/20 { border-color: rgba(255, 255, 255, 0.2); } /* === ТЕНИ === */ #mirandis-tour-wrapper .shadow-sm { box-shadow: 0 2px 8px rgba(88, 123, 48, 0.12); } #mirandis-tour-wrapper .shadow-md { box-shadow: 0 4px 16px rgba(0,0,0,0.06); } #mirandis-tour-wrapper .shadow-lg { box-shadow: 0 8px 24px rgba(0,0,0,0.06); } #mirandis-tour-wrapper .shadow-xl { box-shadow: 0 4px 32px rgba(0,0,0,0.06); } #mirandis-tour-wrapper .shadow-2xl { box-shadow: 0 12px 40px rgba(0,0,0,0.1); } /* === ЭФФЕКТЫ === */ #mirandis-tour-wrapper .opacity-70 { opacity: 0.7 !important; } #mirandis-tour-wrapper .opacity-80 { opacity: 0.8 !important; } #mirandis-tour-wrapper .opacity-90 { opacity: 0.9 !important; } #mirandis-tour-wrapper .object-cover { object-fit: cover; } #mirandis-tour-wrapper .backdrop-blur-sm { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } #mirandis-tour-wrapper .transition { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } #mirandis-tour-wrapper .duration-300 { transition-duration: 300ms; } #mirandis-tour-wrapper .hover\:-translate-y-1:hover { transform: translateY(-4px); } #mirandis-tour-wrapper .hover\:shadow-md:hover { box-shadow: 0 6px 28px rgba(0,0,0,0.08); } /* === АНИМАЦИЯ === */ @keyframes mtw-fadeInUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } /* === ТАЙМЛАЙН === */ #mirandis-tour-wrapper .before\:absolute::before { content: ''; position: absolute; } #mirandis-tour-wrapper .before\:top-0::before { top: 0; } #mirandis-tour-wrapper .before\:bottom-0::before { bottom: 0; } #mirandis-tour-wrapper .before\:left-\[11px\]::before { left: 16px; } #mirandis-tour-wrapper .before\:w-0\.5::before { width: 2px; } #mirandis-tour-wrapper .before\:bg-gradient-to-b::before { background: linear-gradient(to bottom, transparent, rgba(88, 123, 48, 0.2), rgba(88, 123, 48, 0.2), transparent); border-radius: 2px; } @media (max-width: 768px) { #mirandis-tour-wrapper .before\:left-\[11px\]::before { left: 12px; } } /* === ИКОНКИ ТАЙМЛАЙНА === */ #mirandis-tour-wrapper .accordion-content li > div:first-child { width: 32px !important; height: 32px !important; background: #fff !important; border: 2px solid rgba(88, 123, 48, 0.15) !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; margin: 0 !important; flex-shrink: 0 !important; transition: border-color 0.3s, background 0.3s; position: relative; z-index: 2; } #mirandis-tour-wrapper .accordion-content li:hover > div:first-child { border-color: #587B30 !important; background: rgba(88, 123, 48, 0.06) !important; } #mirandis-tour-wrapper .accordion-content li > div:first-child > i { font-size: 13px !important; width: auto !important; } #mirandis-tour-wrapper .accordion-content li > div:last-child span.block { font-size: 16px; font-weight: 700; color: #543311 !important; line-height: 1.4; } #mirandis-tour-wrapper .accordion-content li > div:last-child p { font-size: 13px !important; color: #543311 !important; line-height: 1.65 !important; } #mirandis-tour-wrapper .accordion-content .p-6 { background: linear-gradient(180deg, rgba(88,123,48,0.02) 0%, transparent 100%); } /* === АККОРДЕОН === */ #mirandis-tour-wrapper .accordion-content { transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease; max-height: 0; opacity: 0; overflow: hidden; } #mirandis-tour-wrapper .accordion-content.open { max-height: 6000px; opacity: 1; transition: max-height 0.55s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease; } #mirandis-tour-wrapper .accordion-icon { transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); font-size: 14px; } #mirandis-tour-wrapper .open .accordion-icon { transform: rotate(180deg); } #mirandis-tour-wrapper button.accordion-header { border: none !important; outline: none !important; background: transparent !important; box-shadow: none !important; -webkit-appearance: none !important; appearance: none !important; color: #543311 !important; transition: background 0.2s ease; padding: 24px 28px !important; } #mirandis-tour-wrapper button.accordion-header:hover { background: rgba(88, 123, 48, 0.03) !important; } #mirandis-tour-wrapper .accordion-header .bg-brand-btn { box-shadow: 0 2px 8px rgba(88, 123, 48, 0.25); border-radius: 12px; } /* === КАРУСЕЛЬ === */ #mirandis-tour-wrapper .bg-slider img { transition: opacity 1.5s ease-in-out; opacity: 0; z-index: 1; cursor: zoom-in; } #mirandis-tour-wrapper .bg-slider img.active { opacity: 1; z-index: 2; } /* === СТРЕЛКИ КАРУСЕЛИ === */ #mirandis-tour-wrapper .bg-slider .slider-arrow { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.25); color: #ffffff; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; cursor: pointer; z-index: 10; opacity: 0; transition: opacity 0.3s ease, background 0.3s ease; user-select: none; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } #mirandis-tour-wrapper .bg-slider:hover .slider-arrow { opacity: 1; } #mirandis-tour-wrapper .bg-slider .slider-arrow:hover { background: rgba(0,0,0,0.45); } #mirandis-tour-wrapper .bg-slider .slider-arrow-prev { left: 14px; } #mirandis-tour-wrapper .bg-slider .slider-arrow-next { right: 14px; } #mirandis-tour-wrapper .bg-slider .slider-dots { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 10; } #mirandis-tour-wrapper .bg-slider .slider-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.5); cursor: pointer; transition: background 0.3s, transform 0.3s; } #mirandis-tour-wrapper .bg-slider .slider-dot.active { background: #ffffff; transform: scale(1.3); } /* === КНОПКИ === */ #mirandis-tour-wrapper .btn-solid-safe, #mirandis-tour-wrapper a.btn-solid-safe { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; padding: 16px 36px !important; border-radius: 14px !important; background-color: #587B30 !important; color: #ffffff !important; border: none !important; cursor: pointer !important; font-family: 'Montserrat', sans-serif !important; font-weight: 600 !important; font-size: 15px !important; text-decoration: none !important; transition: all 0.3s ease !important; box-sizing: border-box !important; box-shadow: 0 4px 16px rgba(88, 123, 48, 0.25) !important; } #mirandis-tour-wrapper .btn-solid-safe:hover, #mirandis-tour-wrapper a.btn-solid-safe:hover { background-color: #4a6828 !important; color: #ffffff !important; transform: translateY(-2px) !important; box-shadow: 0 6px 24px rgba(88, 123, 48, 0.3) !important; } #mirandis-tour-wrapper .btn-outline-safe, #mirandis-tour-wrapper a.btn-outline-safe { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; padding: 14px 34px !important; border-radius: 14px !important; background-color: transparent !important; color: #543311 !important; border: 2px solid #543311 !important; cursor: pointer !important; font-family: 'Montserrat', sans-serif !important; font-weight: 600 !important; font-size: 15px !important; text-decoration: none !important; transition: all 0.3s ease !important; box-sizing: border-box !important; } #mirandis-tour-wrapper .btn-outline-safe:hover, #mirandis-tour-wrapper a.btn-outline-safe:hover { background-color: #543311 !important; color: #ffffff !important; transform: translateY(-2px) !important; } #mirandis-tour-wrapper .btn-tariff-accent { display: block !important; width: 100% !important; text-align: center !important; background-color: #e8eedf !important; color: #543311 !important; font-weight: 600 !important; padding: 16px 24px !important; border-radius: 14px !important; border: 1px solid rgba(88, 123, 48, 0.2) !important; transition: all 0.3s ease !important; margin-top: auto !important; font-size: 15px !important; text-decoration: none !important; box-sizing: border-box !important; } #mirandis-tour-wrapper .btn-tariff-accent:hover { background-color: #587B30 !important; color: #ffffff !important; transform: translateY(-2px) !important; } #mirandis-tour-wrapper .btn-tariff-primary { display: block !important; width: 100% !important; text-align: center !important; background-color: #ffffff !important; color: #587B30 !important; font-weight: 700 !important; padding: 16px 24px !important; border-radius: 14px !important; border: none !important; box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important; transition: all 0.3s ease !important; margin-top: auto !important; font-size: 15px !important; text-decoration: none !important; box-sizing: border-box !important; } #mirandis-tour-wrapper .btn-tariff-primary:hover { background-color: #f3f4f6 !important; transform: translateY(-2px) !important; } /* === КАРТОЧКИ ТАРИФОВ === */ #mirandis-tour-wrapper .tariff-card-glass { background: rgba(255,255,255,0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.8); box-shadow: 0 2px 16px rgba(0,0,0,0.04); border-radius: 20px; padding: 2rem; display: flex; flex-direction: column; transition: all 0.4s cubic-bezier(0.23,1,0.32,1); position: relative; overflow: hidden; } #mirandis-tour-wrapper .tariff-card-glass:hover { transform: translateY(-6px); box-shadow: 0 12px 36px rgba(69,94,38,0.1); border-color: rgba(69,94,38,0.15); background: rgba(255,255,255,0.95); } #mirandis-tour-wrapper .tariff-card-featured { background: linear-gradient(135deg, rgba(69,94,38,0.92) 0%, rgba(106,141,61,0.92) 100%); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.2); box-shadow: 0 12px 40px rgba(69,94,38,0.25); border-radius: 20px; padding: 2rem; display: flex; flex-direction: column; position: relative; overflow: hidden; transform: scale(1.05); z-index: 10; transition: all 0.4s cubic-bezier(0.23,1,0.32,1); } #mirandis-tour-wrapper .tariff-card-featured:hover { transform: scale(1.05) translateY(-6px); box-shadow: 0 20px 50px rgba(69,94,38,0.35); } #mirandis-tour-wrapper .tariff-price-box { background: rgba(232,238,223,0.5); border-radius: 16px; padding: 1.5rem; display: flex; flex-direction: column; align-items: center; justify-content: center; margin-bottom: 1.5rem; border: 1px solid rgba(88,123,48,0.1); } #mirandis-tour-wrapper .tariff-price-box-featured { background: rgba(255,255,255,0.12); backdrop-filter: blur(8px); border-radius: 16px; padding: 1.5rem; display: flex; flex-direction: column; align-items: center; justify-content: center; margin-bottom: 1.5rem; border: 1px solid rgba(255,255,255,0.2); } #mirandis-tour-wrapper .tariff-badge { position: absolute; top: 0; right: 0; background: #facc15; color: #543311; font-size: 11px; font-weight: 800; padding: 6px 16px; border-bottom-left-radius: 16px; letter-spacing: 0.05em; text-transform: uppercase; } #mirandis-tour-wrapper .tariff-card-shadow { box-shadow: 0 8px 40px rgba(84,51,17,0.08); } #mirandis-tour-wrapper .tariff-gradient-header { background: linear-gradient(to bottom, #faf9f6, #ffffff); } /* === КАРТОЧКИ ПРЕИМУЩЕСТВ === */ #mirandis-tour-wrapper .w-14.h-14.bg-brand-accent.rounded-full { background: rgba(88,123,48,0.08) !important; width: 52px !important; height: 52px !important; transition: background 0.3s; } #mirandis-tour-wrapper .w-14.h-14.bg-brand-accent.rounded-full i { font-size: 22px; } /* === ЛАЙТБОКС === */ #mtw-lightbox { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.92); z-index: 99999; align-items: center; justify-content: center; } #mtw-lightbox.open { display: flex; } #mtw-lightbox img { max-width: 92vw; max-height: 88vh; object-fit: contain; border-radius: 12px; user-select: none; } #mtw-lightbox-close { position: fixed; top: 16px; right: 20px; color: #fff; font-size: 36px; cursor: pointer; line-height: 1; z-index: 100000; opacity: 0.85; } #mtw-lightbox-close:hover { opacity: 1; } #mtw-lightbox-prev, #mtw-lightbox-next { position: fixed; top: 50%; transform: translateY(-50%); color: #fff; font-size: 42px; cursor: pointer; opacity: 0.7; z-index: 100000; padding: 12px; user-select: none; } #mtw-lightbox-prev:hover, #mtw-lightbox-next:hover { opacity: 1; } #mtw-lightbox-prev { left: 12px; } #mtw-lightbox-next { right: 12px; } #mtw-lightbox-counter { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,0.7); font-size: 14px; font-family: 'Montserrat', sans-serif; } /* === АДАПТИВНОСТЬ === */ @media (min-width: 640px) { #mirandis-tour-wrapper .sm\:mx-8 { margin-left: 2rem; margin-right: 2rem; } #mirandis-tour-wrapper .sm\:h-\[450px\] { height: 450px; } #mirandis-tour-wrapper .sm\:w-auto { width: auto; } #mirandis-tour-wrapper .sm\:flex-row { flex-direction: row; } #mirandis-tour-wrapper .sm\:flex-wrap { flex-wrap: wrap; } #mirandis-tour-wrapper .sm\:p-4 { padding: 1rem; } #mirandis-tour-wrapper .sm\:p-8 { padding: 2rem; } #mirandis-tour-wrapper .sm\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; } #mirandis-tour-wrapper .sm\:px-10 { padding-left: 2.5rem; padding-right: 2.5rem; } #mirandis-tour-wrapper .sm\:gap-3 { gap: 0.75rem; } #mirandis-tour-wrapper .sm\:text-left { text-align: left; } #mirandis-tour-wrapper .sm\:text-2xl { font-size: 1.5rem; line-height: 2rem; } #mirandis-tour-wrapper .sm\:text-6xl { font-size: 3.75rem; line-height: 1; } #mirandis-tour-wrapper .sm\:py-20 { padding-top: 5rem; padding-bottom: 5rem; } } @media (min-width: 768px) { #mirandis-tour-wrapper .md\:w-1\/2 { width: 50%; } #mirandis-tour-wrapper .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } #mirandis-tour-wrapper .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } #mirandis-tour-wrapper .md\:flex-row { flex-direction: row; } #mirandis-tour-wrapper .md\:border-l { border-left-width: 1px; } #mirandis-tour-wrapper .md\:px-12 { padding-left: 3rem; padding-right: 3rem; } #mirandis-tour-wrapper .md\:pl-8 { padding-left: 2rem; } #mirandis-tour-wrapper .md\:pl-10 { padding-left: 2.5rem; } #mirandis-tour-wrapper .md\:pl-22 { padding-left: 5.5rem; } #mirandis-tour-wrapper .md\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; } #mirandis-tour-wrapper .md\:text-5xl { font-size: 3rem; line-height: 1; } } @media (min-width: 1024px) { #mirandis-tour-wrapper .lg\:mx-auto { margin-left: auto; margin-right: auto; } #mirandis-tour-wrapper .lg\:h-\[550px\] { height: 550px; } #mirandis-tour-wrapper .lg\:w-1\/2 { width: 50%; } #mirandis-tour-wrapper .lg\:scale-105 { transform: scale(1.05); } #mirandis-tour-wrapper .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } #mirandis-tour-wrapper .lg\:flex-row { flex-direction: row; } #mirandis-tour-wrapper .lg\:gap-8 { gap: 2rem; } #mirandis-tour-wrapper .lg\:px-8 { padding-left: 2rem; padding-right: 2rem; } #mirandis-tour-wrapper .lg\:p-8 { padding: 2rem; } #mirandis-tour-wrapper .lg\:py-24 { padding-top: 6rem; padding-bottom: 6rem; } #mirandis-tour-wrapper .lg\:pt-0 { padding-top: 0; } #mirandis-tour-wrapper .lg\:text-6xl { font-size: 3.75rem; line-height: 1; } } @media (max-width: 768px) { #mirandis-tour-wrapper .tariff-card-featured { transform: none; } #mirandis-tour-wrapper .tariff-card-featured:hover { transform: translateY(-6px); } #mirandis-tour-wrapper button.accordion-header { padding: 18px 20px !important; } #mirandis-tour-wrapper .accordion-header .bg-brand-btn { height: 36px; border-radius: 10px; } #mirandis-tour-wrapper .accordion-content li > div:first-child { width: 24px !important; height: 24px !important; } #mirandis-tour-wrapper .accordion-content li > div:first-child > i { font-size: 10px !important; } } /* ##################################################################### БЛОК B. FAQ СТРАНИЦ КОНКРЕТНЫХ ТУРОВ ##################################################################### */ /* ===================================================================== FAQ — .mira-faq-* ===================================================================== */ .mira-faq-container { max-width: 56rem; margin: 0 auto; padding: 5rem 1rem; font-family: 'Montserrat', sans-serif; } .mira-faq-title { font-size: 2rem; font-weight: 700; color: #543311; text-align: center; margin-bottom: 3rem; line-height: 1.25; } .mira-faq-item { background: #ffffff; border-radius: 1rem; border: 1px solid rgba(232, 238, 223, 0.8); margin-bottom: 0.75rem; overflow: hidden; box-shadow: 0 2px 8px rgba(88, 123, 48, 0.06); transition: box-shadow 0.3s ease; } .mira-faq-item:hover { box-shadow: 0 4px 16px rgba(88, 123, 48, 0.1); } .mira-faq-header { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 1.5rem; cursor: pointer; gap: 1rem; } .mira-faq-question { font-weight: 600; font-size: 1rem; color: #543311; line-height: 1.4; font-family: 'Montserrat', sans-serif; } .mira-faq-icon-wrapper { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: rgba(88, 123, 48, 0.1); display: flex; align-items: center; justify-content: center; transition: background 0.3s ease, transform 0.3s ease; } .mira-faq-item.active .mira-faq-icon-wrapper { background: #587B30; transform: rotate(45deg); } .mira-faq-icon { width: 12px; height: 12px; position: relative; } .mira-faq-icon::before, .mira-faq-icon::after { content: ''; position: absolute; background: #587B30; border-radius: 2px; transition: background 0.3s ease; } .mira-faq-icon::before { width: 12px; height: 2px; top: 5px; left: 0; } .mira-faq-icon::after { width: 2px; height: 12px; top: 0; left: 5px; } .mira-faq-item.active .mira-faq-icon::before, .mira-faq-item.active .mira-faq-icon::after { background: #ffffff; } .mira-faq-content { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; } .mira-faq-item.active .mira-faq-content { max-height: 600px; } .mira-faq-text { padding: 0 1.5rem 1.5rem 1.5rem; font-size: 0.9rem; color: #543311; opacity: 0.85; line-height: 1.7; font-family: 'Montserrat', sans-serif; } .mira-faq-text ul { margin-top: 0.5rem; padding-left: 1.2rem; list-style: disc; } .mira-faq-text ul li { margin-bottom: 0.35rem; list-style: disc; } /* ##################################################################### БЛОК C. ИНТЕРАКТИВНЫЙ ТАРИФ ##################################################################### */ /* ===================================================================== ИНТЕРАКТИВНЫЙ ТАРИФ ===================================================================== */ .price-animate { transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important; } .price-animate.changing { transform: scale(0.85) translateY(8px) !important; opacity: 0 !important; } .group-option { transition: all 0.3s ease !important; cursor: pointer !important; position: relative !important; background: rgba(88, 123, 48, 0.06) !important; border-radius: 14px !important; } .group-option:hover { background: rgba(88, 123, 48, 0.12) !important; } .group-option.active { background: rgba(88, 123, 48, 0.18) !important; } .group-option > div:first-child { font-size: 1.75rem !important; line-height: 1 !important; margin-bottom: 6px !important; } .group-option > div:first-child span { font-size: 1rem !important; } .group-option > div:last-child { font-size: 12px !important; } .optimal-badge { position: absolute !important; top: -16px !important; left: 50% !important; transform: translateX(-50%) scale(0) !important; background: #617A43 !important; color: white !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: 1px !important; text-transform: uppercase !important; padding: 3px 12px !important; border-radius: 50px !important; white-space: nowrap !important; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important; z-index: 5 !important; } .group-option.optimal .optimal-badge { transform: translateX(-50%) scale(1) !important; } .savings-bar { transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) !important; } @media (max-width: 639px) { .optimal-badge { top: -16px !important; font-size: 8px !important; padding: 2px 8px !important; } .group-option > div:first-child { font-size: 1.35rem !important; } .group-option > div:first-child span { font-size: 0.85rem !important; } .group-option > div:last-child { font-size: 10px !important; } } /* ##################################################################### БЛОК D. ОБЩИЙ БЕЛЫЙ ФОН + ЗАЩИТА ИКОНОК ##################################################################### */ /* ===================================================================== FINAL PATCH: ЕДИНЫЙ БЕЛЫЙ ФОН САЙТА + ВСЕ ИКОНКИ ===================================================================== */ html, body, .t-body, #allrecords, .t-records { background: #ffffff !important; background-color: #ffffff !important; } /* Внешние Tilda-record тоже белые — без цветных полос между блоками */ body #allrecords > .t-rec { background-color: #ffffff !important; } /* Все основные секции школьных туров имеют единый белый фон */ #mirandis-tour-wrapper, #mirandis-tour-wrapper header, #mirandis-tour-wrapper section { background-color: #ffffff !important; } /* Фоновые utility-классы страницы */ #mirandis-tour-wrapper .bg-brand-bg { background-color: #ffffff !important; } /* Внутренние карточки и тело аккордеона */ #mirandis-tour-wrapper .bg-accordion-body { background-color: #ffffff !important; } /* Карточка «Что входит» остаётся слегка кремовой как отдельный элемент */ #mirandis-tour-wrapper .bg-\[\#FAF9F4\] { background-color: #FAF9F4 !important; } /* Footer сливается с белым фоном страницы */ body #t-footer, body #t-footer .t-rec, body #allrecords > .t-rec:last-child { background: #ffffff !important; background-color: #ffffff !important; border-top: 0 !important; box-shadow: none !important; } /* Кружки преимуществ и таймлайна */ #mirandis-tour-wrapper .w-14.h-14.rounded-full, #mirandis-tour-wrapper .w-14.h-14.bg-brand-accent.rounded-full, #mirandis-tour-wrapper .accordion-content li > div:first-child { color: #587B30 !important; opacity: 1 !important; visibility: visible !important; } #mirandis-tour-wrapper .w-14.h-14.rounded-full, #mirandis-tour-wrapper .w-14.h-14.bg-brand-accent.rounded-full { width: 52px !important; height: 52px !important; background: rgba(88, 123, 48, 0.08) !important; border: 1px solid rgba(88, 123, 48, 0.14) !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* Inline SVG — не глушим fill, чтобы не убить заполненные иконки */ #mirandis-tour-wrapper svg { opacity: 1 !important; visibility: visible !important; } #mirandis-tour-wrapper .w-14.h-14.rounded-full svg, #mirandis-tour-wrapper .w-14.h-14.bg-brand-accent.rounded-full svg, #mirandis-tour-wrapper .accordion-content li > div:first-child svg { display: block !important; width: 22px !important; height: 22px !important; min-width: 22px !important; min-height: 22px !important; color: #587B30 !important; stroke: #587B30 !important; opacity: 1 !important; visibility: visible !important; } #mirandis-tour-wrapper .w-14.h-14.rounded-full svg [stroke], #mirandis-tour-wrapper .w-14.h-14.bg-brand-accent.rounded-full svg [stroke], #mirandis-tour-wrapper .accordion-content li > div:first-child svg [stroke] { stroke: #587B30 !important; } #mirandis-tour-wrapper .w-14.h-14.rounded-full svg [fill]:not([fill="none"]), #mirandis-tour-wrapper .w-14.h-14.bg-brand-accent.rounded-full svg [fill]:not([fill="none"]), #mirandis-tour-wrapper .accordion-content li > div:first-child svg [fill]:not([fill="none"]) { fill: #587B30 !important; } #mirandis-tour-wrapper .w-14.h-14.rounded-full svg [fill="none"], #mirandis-tour-wrapper .w-14.h-14.bg-brand-accent.rounded-full svg [fill="none"], #mirandis-tour-wrapper .accordion-content li > div:first-child svg [fill="none"] { fill: none !important; } /* Font Awesome — работает после подключения полного FA CSS через @import или */ #mirandis-tour-wrapper .fa, #mirandis-tour-wrapper .fas, #mirandis-tour-wrapper .fa-solid, #mirandis-tour-wrapper i.fa, #mirandis-tour-wrapper i.fas, #mirandis-tour-wrapper i.fa-solid, #mirandis-tour-wrapper .accordion-content li > div:first-child > i { font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; font-style: normal !important; display: inline-block !important; color: #587B30 !important; opacity: 1 !important; visibility: visible !important; line-height: 1 !important; } #mirandis-tour-wrapper .fa::before, #mirandis-tour-wrapper .fas::before, #mirandis-tour-wrapper .fa-solid::before, #mirandis-tour-wrapper i.fa::before, #mirandis-tour-wrapper i.fas::before, #mirandis-tour-wrapper i.fa-solid::before { display: inline-block !important; color: #587B30 !important; opacity: 1 !important; visibility: visible !important; } /* Если в старом HTML у пункта таймлайна вообще нет иконки, показываем аккуратную точку вместо пустого круга */ #mirandis-tour-wrapper .accordion-content li > div:first-child:empty::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #587B30; display: block; } /* ##################################################################### БЛОК E. ПОСАДОЧНЫЕ СТРАНИЦЫ ШКОЛЬНЫХ ТУРОВ ПО НАПРАВЛЕНИЯМ ##################################################################### НАЗНАЧЕНИЕ: Краснодар / Санкт-Петербург / Казань / Волгоград / Дагестан / Нижний Новгород и другие страницы формата: /shkolnye-tury/[napravlenie] ЕДИНАЯ СТРУКТУРА СТРАНИЦЫ: E1. Хлебные крошки E2. Hero ↓ #programs + Tilda Store-каталог ↓ E3. SEO-блок E4. FAQ ↓ Footer ЭТАЛОН ВИЗУАЛА: посадочная страница Санкт-Петербурга. В ЭТИХ СТИЛЯХ НЕТ: - тарифов конкретного тура; - программы по дням; - карусели конкретного тура; - блоков «Что входит»; - стилей 7-блочной страницы конкретного тура. Это отдельный слой CSS только для ПОСАДОЧНЫХ НАПРАВЛЕНИЙ. ##################################################################### */ /* ===================================================================== E1. ПОСАДОЧНЫЕ НАПРАВЛЕНИЯ — ХЛЕБНЫЕ КРОШКИ --------------------------------------------------------------------- ЭТАЛОН: посадочная страница Санкт-Петербурга. HTML:
...
ВАЖНО: - внутренние размеры и адаптив взяты из СПБ; - внешний отступ от фиксированной шапки задаём здесь централизованно; - стили не затрагивают хлебные крошки страниц конкретных туров. ===================================================================== */ .mira-direction-breadcrumbs { width: 100%; padding-top: 120px; padding-bottom: 30px; box-sizing: border-box; background: transparent; } /* === КОНТЕЙНЕР КРОШЕК === */ .mira-direction-breadcrumbs .mira-breadcrumbs-wrapper { max-width: 1400px; /* Ширина как у главного экрана */ margin: 0 auto; padding: 20px 20px 0 20px; /* Отступы по бокам и сверху */ box-sizing: border-box; font-family: 'Montserrat', Arial, sans-serif; } /* === ОСНОВНЫЕ СТИЛИ === */ .mira-direction-breadcrumbs .mira-breadcrumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; font-size: 15px; /* Базовый размер шрифта на ПК */ font-weight: 500; width: 100%; list-style: none; } .mira-direction-breadcrumbs .mira-breadcrumb-link { display: inline-flex; align-items: center; gap: 6px; color: #617A43 !important; /* Фирменный зеленый */ text-decoration: none !important; transition: color 0.2s ease; } .mira-direction-breadcrumbs .mira-breadcrumb-link:hover { color: #543311 !important; /* Коричневый при наведении */ } .mira-direction-breadcrumbs .mira-breadcrumb-link svg { width: 14px; height: 14px; } .mira-direction-breadcrumbs .mira-breadcrumb-sep { color: #543311; opacity: 0.4; display: flex; align-items: center; } .mira-direction-breadcrumbs .mira-breadcrumb-sep svg { width: 12px; height: 12px; } .mira-direction-breadcrumbs .mira-breadcrumb-current { color: #543311; font-weight: 600; opacity: 0.9; cursor: default; } /* === АДАПТИВНОСТЬ ДЛЯ ПЛАНШЕТОВ И МОБИЛОК === */ @media (max-width: 960px) { .mira-direction-breadcrumbs .mira-breadcrumbs { font-size: 12px !important; /* Уменьшаем шрифт на телефонах */ gap: 6px; } .mira-direction-breadcrumbs .mira-breadcrumb-link svg { width: 13px !important; height: 13px !important; } .mira-direction-breadcrumbs .mira-breadcrumb-sep svg { width: 10px !important; height: 10px !important; } } /* ===================================================================== E2. ПОСАДОЧНЫЕ НАПРАВЛЕНИЯ — HERO — ЭТАЛОН 1:1 --------------------------------------------------------------------- ВАЖНО: этот раздел собран ИЗ РАБОЧЕГО HERO-КОДА, присланного 22.09.2026. Размеры, отступы, grid, фото, кнопки и media-query не переосмысляются. Почему селекторы начинаются с #mirandis-tour-wrapper: базовый Global CSS уже содержит правила вида #mirandis-tour-wrapper h1/p/img. Если использовать только .mira-direction-hero, базовые правила получают более высокий приоритет и меняют отступы/высоту изображений. Такое поведение и вызвало визуальную разницу с эталоном СПБ. HTML-корень Hero:
...
===================================================================== */ /* ЭТАЛОН HERO НАПРАВЛЕНИЙ: точные значения рабочего блока Краснодар/СПБ. */ #mirandis-tour-wrapper .mira-direction-hero { --mira-green: #587b30; --mira-brown: #543311; --mira-line: #e5ded6; width: 100%; padding: 18px 0 24px; margin: 0; background: #fff !important; color: var(--mira-brown); font-family: Arial, sans-serif; -webkit-text-size-adjust: 100%; } #mirandis-tour-wrapper .mira-direction-hero, #mirandis-tour-wrapper .mira-direction-hero *, #mirandis-tour-wrapper .mira-direction-hero *::before, #mirandis-tour-wrapper .mira-direction-hero *::after { box-sizing: border-box; } #mirandis-tour-wrapper .mira-direction-hero .mira-container { width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 24px; } #mirandis-tour-wrapper .mira-direction-hero .mira-main { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); align-items: center; gap: clamp(28px, 4vw, 64px); } #mirandis-tour-wrapper .mira-direction-hero .mira-col-left, #mirandis-tour-wrapper .mira-direction-hero .mira-col-right { min-width: 0; } #mirandis-tour-wrapper .mira-direction-hero .mira-col-left { display: flex; flex-direction: column; align-items: flex-start; } #mirandis-tour-wrapper .mira-direction-hero svg { flex: 0 0 auto; display: block; } #mirandis-tour-wrapper .mira-direction-hero .mira-status { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; margin: 0 0 16px; padding: 7px 12px; border: 1px solid var(--mira-line); border-radius: 12px; background: #fff; font-size: 14px; font-weight: 600; line-height: 1.35; } #mirandis-tour-wrapper .mira-direction-hero .mira-status svg { width: 20px; height: 20px; color: var(--mira-green); } #mirandis-tour-wrapper .mira-direction-hero .mira-status span span { color: #827466; font-weight: 400; } #mirandis-tour-wrapper .mira-direction-hero .mira-h1 { margin: 0 0 16px; padding: 0; color: var(--mira-brown); font-family: inherit; font-size: clamp(36px, 2.7vw, 46px); font-weight: 700; line-height: 1.1; letter-spacing: -.6px; } #mirandis-tour-wrapper .mira-direction-hero .mira-h1 span { display: block; } #mirandis-tour-wrapper .mira-direction-hero .mira-h1 .mira-h1-sub { margin-top: 8px; color: #796044; font-size: clamp(20px, 1.4vw, 24px); font-weight: 600; line-height: 1.3; letter-spacing: 0; } #mirandis-tour-wrapper .mira-direction-hero .mira-desc { max-width: 620px; margin: 0 0 18px; padding: 0; color: #796044; font-size: 17px; line-height: 1.5; } #mirandis-tour-wrapper .mira-direction-hero .mira-desc strong { color: var(--mira-brown); font-weight: 700; } #mirandis-tour-wrapper .mira-direction-hero .mira-btns-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; max-width: 510px; margin: 0 0 10px; } #mirandis-tour-wrapper .mira-direction-hero .mira-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; min-height: 48px; padding: 11px 18px; border: 1px solid transparent; border-radius: 12px; font-family: inherit; font-size: 16px; font-weight: 700; line-height: 1.3; text-align: center; text-decoration: none !important; transition: background-color .18s ease, border-color .18s ease; } #mirandis-tour-wrapper .mira-direction-hero .mira-btn-primary { background: var(--mira-green); color: #fff !important; } #mirandis-tour-wrapper .mira-direction-hero .mira-btn-secondary { background: #fff; color: var(--mira-brown) !important; border-color: #cfc3b6; } #mirandis-tour-wrapper .mira-direction-hero .mira-btn-secondary svg { color: var(--mira-green); } #mirandis-tour-wrapper .mira-direction-hero .mira-widget { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; max-width: 510px; min-height: 60px; margin: 0; padding: 10px 14px; border: 1px solid var(--mira-line); border-radius: 12px; background: #fff; color: var(--mira-brown) !important; text-decoration: none !important; transition: border-color .18s ease; } #mirandis-tour-wrapper .mira-direction-hero .mira-widget-left { display: flex; align-items: center; gap: 12px; min-width: 0; } #mirandis-tour-wrapper .mira-direction-hero .mira-widget-icon { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; border: 1px solid #e8e5e1; border-radius: 10px; background: #fff; color: var(--mira-green); } #mirandis-tour-wrapper .mira-direction-hero .mira-widget-icon svg { width: 22px; height: 22px; } #mirandis-tour-wrapper .mira-direction-hero .mira-widget-text h4 { margin: 0 0 3px; padding: 0; color: var(--mira-brown); font: 700 16px/1.25 Arial, sans-serif; } #mirandis-tour-wrapper .mira-direction-hero .mira-widget-text p { margin: 0; padding: 0; color: #796044; font-size: 14px; line-height: 1.3; } #mirandis-tour-wrapper .mira-direction-hero .mira-widget-arrow { color: var(--mira-green); } /* Преимущества слева: две колонки по четыре пункта, КП ниже. */ #mirandis-tour-wrapper .mira-direction-hero .mira-bottom { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; width: 100%; max-width: 560px; gap: 20px; margin-top: 20px; padding: 0; border: 0; } #mirandis-tour-wrapper .mira-direction-hero .mira-features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; margin: 0; } #mirandis-tour-wrapper .mira-direction-hero .mira-feature { display: flex; align-items: center; gap: 8px; min-width: 0; } #mirandis-tour-wrapper .mira-direction-hero .mira-feature-icon { display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 28px; border-radius: 6px; color: var(--mira-green); background: #f0f2ed; } #mirandis-tour-wrapper .mira-direction-hero .mira-feature-text { color: var(--mira-brown); font-size: 15px; font-weight: 700; line-height: 1.3; } #mirandis-tour-wrapper .mira-direction-hero .mira-btn-dl { justify-self: start; white-space: nowrap; } /* Высота фото зависит от окна и места, занятого блоками выше. */ #mirandis-tour-wrapper .mira-direction-hero .mira-col-right { position: relative; height: clamp(360px, calc(100vh - var(--mira-space-before, 180px) - 44px), 610px); height: clamp(360px, calc(100svh - var(--mira-space-before, 180px) - 44px), 610px); } #mirandis-tour-wrapper .mira-direction-hero .mira-img-main { position: absolute; inset: 0 0 0 auto; width: 84%; border-radius: 24px; overflow: hidden; background: #fff; box-shadow: 0 14px 32px -20px rgba(41, 32, 23, .35); } #mirandis-tour-wrapper .mira-direction-hero .mira-img-main img, #mirandis-tour-wrapper .mira-direction-hero .mira-img-small img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; } #mirandis-tour-wrapper .mira-direction-hero .mira-img-small { position: absolute; z-index: 1; left: 0; top: 30%; width: 39%; max-width: 220px; aspect-ratio: 1; overflow: hidden; border: 6px solid #fff; border-radius: 22px; background: #fff; box-shadow: 0 16px 28px -18px rgba(41, 32, 23, .45); } #mirandis-tour-wrapper .mira-direction-hero .mira-badge { position: absolute; z-index: 2; right: 14px; bottom: 14px; left: 14px; padding: 12px 16px; border-radius: 14px; background: rgba(255, 255, 255, .97); } #mirandis-tour-wrapper .mira-direction-hero .mira-badge h5 { margin: 0 0 4px; padding: 0; color: var(--mira-brown); font: 700 17px/1.2 Arial, sans-serif; } #mirandis-tour-wrapper .mira-direction-hero .mira-badge p { margin: 0; padding: 0; color: #796044; font-size: 14px; line-height: 1.35; } #mirandis-tour-wrapper .mira-direction-hero a:focus-visible { outline: 3px solid var(--mira-green); outline-offset: 4px; } @media (hover: hover) { #mirandis-tour-wrapper .mira-direction-hero .mira-btn-primary:hover { background: #455e26; } #mirandis-tour-wrapper .mira-direction-hero .mira-btn-secondary:hover { background: #f7f7f7; border-color: var(--mira-brown); } #mirandis-tour-wrapper .mira-direction-hero .mira-widget:hover { border-color: var(--mira-green); } } /* Компактный вариант для ноутбуков, без обрезки содержимого. */ @media (min-width: 981px) and (max-height: 800px) { #mirandis-tour-wrapper .mira-direction-hero { padding-top: 6px; padding-bottom: 10px; } #mirandis-tour-wrapper .mira-direction-hero .mira-status { margin-bottom: 8px; padding-top: 5px; padding-bottom: 5px; } #mirandis-tour-wrapper .mira-direction-hero .mira-h1 { font-size: 32px; margin-bottom: 10px; } #mirandis-tour-wrapper .mira-direction-hero .mira-h1 > span:not(.mira-h1-sub) { display: inline; } #mirandis-tour-wrapper .mira-direction-hero .mira-h1 .mira-h1-sub { font-size: 20px; margin-top: 4px; } #mirandis-tour-wrapper .mira-direction-hero .mira-desc { font-size: 16px; line-height: 1.4; margin-bottom: 10px; } #mirandis-tour-wrapper .mira-direction-hero .mira-btns-row { margin-bottom: 8px; } #mirandis-tour-wrapper .mira-direction-hero .mira-btn { min-height: 44px; padding-top: 10px; padding-bottom: 10px; } #mirandis-tour-wrapper .mira-direction-hero .mira-widget { min-height: 52px; padding-top: 7px; padding-bottom: 7px; } #mirandis-tour-wrapper .mira-direction-hero .mira-bottom { margin-top: 12px; gap: 14px; } #mirandis-tour-wrapper .mira-direction-hero .mira-features { row-gap: 8px; } #mirandis-tour-wrapper .mira-direction-hero .mira-feature-icon { width: 26px; height: 26px; flex-basis: 26px; } #mirandis-tour-wrapper .mira-direction-hero .mira-feature-text { font-size: 14px; } } @media (min-width: 981px) and (max-width: 1150px) { #mirandis-tour-wrapper .mira-direction-hero .mira-main { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 24px; } #mirandis-tour-wrapper .mira-direction-hero .mira-bottom { gap: 16px; } #mirandis-tour-wrapper .mira-direction-hero .mira-features { gap: 8px 10px; } #mirandis-tour-wrapper .mira-direction-hero .mira-feature { gap: 5px; } #mirandis-tour-wrapper .mira-direction-hero .mira-btn-dl { padding-right: 12px; padding-left: 12px; } } @media (max-width: 980px) { #mirandis-tour-wrapper .mira-direction-hero { padding: 12px 0 28px; } #mirandis-tour-wrapper .mira-direction-hero .mira-main { grid-template-columns: minmax(0, 1fr); gap: 24px; } #mirandis-tour-wrapper .mira-direction-hero .mira-col-left { max-width: 720px; width: 100%; } #mirandis-tour-wrapper .mira-direction-hero .mira-h1 { font-size: 36px; } #mirandis-tour-wrapper .mira-direction-hero .mira-desc { max-width: 680px; } #mirandis-tour-wrapper .mira-direction-hero .mira-col-right { width: 100%; max-width: 660px; height: 380px; margin: 0 auto; } #mirandis-tour-wrapper .mira-direction-hero .mira-bottom { grid-template-columns: minmax(0, 1fr); gap: 18px; } #mirandis-tour-wrapper .mira-direction-hero .mira-features { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; } #mirandis-tour-wrapper .mira-direction-hero .mira-btn-dl { justify-self: start; } } @media (max-width: 600px) { #mirandis-tour-wrapper .mira-direction-hero { padding-top: 8px; } #mirandis-tour-wrapper .mira-direction-hero .mira-container { padding-right: 18px; padding-left: 18px; } #mirandis-tour-wrapper .mira-direction-hero .mira-status { padding: 7px 10px; margin-bottom: 14px; } #mirandis-tour-wrapper .mira-direction-hero .mira-status span span { display: block; } #mirandis-tour-wrapper .mira-direction-hero .mira-status .mira-status-divider { display: none; } #mirandis-tour-wrapper .mira-direction-hero .mira-h1 { font-size: clamp(26px, 7.1vw, 34px); line-height: 1.12; letter-spacing: -.4px; margin-bottom: 14px; } #mirandis-tour-wrapper .mira-direction-hero .mira-h1 .mira-h1-sub { font-size: 18px; line-height: 1.3; } #mirandis-tour-wrapper .mira-direction-hero .mira-desc { font-size: 16px; line-height: 1.45; margin-bottom: 16px; } #mirandis-tour-wrapper .mira-direction-hero .mira-btns-row { gap: 8px; max-width: none; } #mirandis-tour-wrapper .mira-direction-hero .mira-btn { min-height: 46px; padding: 11px 9px; font-size: 14px; gap: 6px; } #mirandis-tour-wrapper .mira-direction-hero .mira-btn svg { width: 18px; height: 18px; } #mirandis-tour-wrapper .mira-direction-hero .mira-widget { max-width: none; padding: 10px 12px; } #mirandis-tour-wrapper .mira-direction-hero .mira-widget-left { gap: 10px; } #mirandis-tour-wrapper .mira-direction-hero .mira-widget-text h4 { font-size: 15px; } #mirandis-tour-wrapper .mira-direction-hero .mira-widget-text p { font-size: 14px; } #mirandis-tour-wrapper .mira-direction-hero .mira-col-right { height: 320px; } #mirandis-tour-wrapper .mira-direction-hero .mira-img-main { width: 86%; border-radius: 20px; } #mirandis-tour-wrapper .mira-direction-hero .mira-img-small { top: 20%; width: 43%; border-width: 4px; border-radius: 18px; } #mirandis-tour-wrapper .mira-direction-hero .mira-badge { left: 10px; right: 10px; bottom: 10px; padding: 10px 12px; border-radius: 12px; } #mirandis-tour-wrapper .mira-direction-hero .mira-badge h5 { font-size: 16px; } #mirandis-tour-wrapper .mira-direction-hero .mira-features { gap: 12px 14px; } #mirandis-tour-wrapper .mira-direction-hero .mira-feature { align-items: flex-start; gap: 6px; } #mirandis-tour-wrapper .mira-direction-hero .mira-feature-icon { height: 20px; width: 20px; flex-basis: 20px; } #mirandis-tour-wrapper .mira-direction-hero .mira-feature-text { font-size: 14px; } #mirandis-tour-wrapper .mira-direction-hero .mira-btn-dl { justify-self: start; padding-right: 18px; padding-left: 18px; } } @media (max-width: 359px) { #mirandis-tour-wrapper .mira-direction-hero .mira-btns-row { grid-template-columns: minmax(0, 1fr); } #mirandis-tour-wrapper .mira-direction-hero .mira-features { grid-template-columns: minmax(0, 1fr); } } @media (prefers-reduced-motion: reduce) { #mirandis-tour-wrapper .mira-direction-hero a { transition: none; } } /* Убираем внешние отступы только у T123, содержащего этот hero. */ .t-rec.mira-direction-hero-record { padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; background: #fff !important; } /* ===================================================================== E3. ПОСАДОЧНЫЕ НАПРАВЛЕНИЯ — SEO-БЛОК --------------------------------------------------------------------- ЭТАЛОН: «Особенности организации школьных туров в Санкт-Петербург». HTML:
...
ВАЖНО: - визуал и адаптив сохранены от СПБ; - CSS-переменные локальные и не влияют на остальной сайт; - тексты и внутренние ссылки всегда уникальны для направления. ===================================================================== */ /* Переменные цветов (замена Tailwind Theme) */ .mira-direction-seo { --brand-text: #543311; --brand-btn: #587B30; --brand-btn-hover: #4a6828; --brand-bg: #fcfbf9; --brand-accent: #e8eedf; --brand-accent-50: rgba(232, 238, 223, 0.5); /* #e8eedf с прозрачностью 50% */ --brand-accent-20: rgba(232, 238, 223, 0.2); /* #e8eedf с прозрачностью 20% */ } /* Базовая изоляция стилей от влияния глобальных классов Тильды */ .mira-direction-seo { font-family: 'Montserrat', sans-serif !important; color: var(--brand-text) !important; background-color: transparent !important; line-height: 1.5 !important; box-sizing: border-box; } .mira-direction-seo *, .mira-direction-seo *::before, .mira-direction-seo *::after { box-sizing: inherit; } .mira-direction-seo h2, .mira-direction-seo p { margin: 0; padding: 0; font-family: 'Montserrat', sans-serif !important; color: inherit; } /* Нативные стили (замена Tailwind Utility Classes) */ .mira-direction-seo .seo-section { padding-top: 4rem; padding-bottom: 4rem; max-width: 1400px; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; } .mira-direction-seo .seo-container { background-color: #ffffff !important; border-radius: 1.5rem !important; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1) !important; padding: 2rem; border: 1px solid var(--brand-accent-50) !important; position: relative; overflow: hidden; } .mira-direction-seo .seo-bg-icon { position: absolute; top: -1.5rem; right: -1.5rem; color: var(--brand-accent) !important; opacity: 0.3 !important; font-size: 8rem !important; line-height: 1; pointer-events: none; } .mira-direction-seo .seo-content { position: relative; z-index: 10; } .mira-direction-seo .seo-title { font-size: 1.5rem !important; line-height: 2rem !important; font-weight: 700 !important; margin-bottom: 1.5rem !important; color: var(--brand-text) !important; } .mira-direction-seo .seo-text-block { color: var(--brand-text) !important; line-height: 1.625 !important; font-size: 15px !important; } .mira-direction-seo .seo-text-block > p + p { margin-top: 1rem !important; } .mira-direction-seo .seo-link { color: var(--brand-btn) !important; font-weight: 600 !important; text-decoration: none !important; transition: color 150ms ease-in-out; } .mira-direction-seo .seo-link:hover { color: var(--brand-btn-hover) !important; text-decoration: underline !important; text-underline-offset: 4px !important; } .mira-direction-seo .seo-info-box { margin-top: 2rem !important; background-color: var(--brand-accent-20) !important; padding: 1.25rem !important; border-radius: 0.75rem !important; border: 1px solid var(--brand-accent) !important; display: flex; align-items: flex-start; gap: 1rem; } .mira-direction-seo .seo-info-icon { color: var(--brand-btn) !important; font-size: 1.5rem !important; line-height: 2rem !important; margin-top: 0.25rem !important; flex-shrink: 0; } .mira-direction-seo .seo-info-text { font-weight: 500 !important; font-size: 0.875rem !important; line-height: 1.25rem !important; } /* Адаптивность (Медиазапросы) */ @media (min-width: 640px) { .mira-direction-seo .seo-section { padding-left: 1.5rem; padding-right: 1.5rem; } .mira-direction-seo .seo-text-block { font-size: 1rem !important; line-height: 1.5rem !important; } .mira-direction-seo .seo-info-text { font-size: 1rem !important; line-height: 1.5rem !important; } } @media (min-width: 768px) { .mira-direction-seo .seo-container { padding: 3rem; } .mira-direction-seo .seo-title { font-size: 1.875rem !important; line-height: 2.25rem !important; } } @media (min-width: 1024px) { .mira-direction-seo .seo-section { padding-left: 2rem; padding-right: 2rem; } } /* ===================================================================== E4. ПОСАДОЧНЫЕ НАПРАВЛЕНИЯ — FAQ --------------------------------------------------------------------- ЭТАЛОН: FAQ посадочной Санкт-Петербурга. КЛАССЫ: .mira-direction-faq-container .mira-direction-faq-title .mira-direction-faq-item .mira-direction-faq-header .mira-direction-faq-question .mira-direction-faq-icon-wrapper .mira-direction-faq-icon .mira-direction-faq-content .mira-direction-faq-text .mira-direction-btn-faq ВАЖНО: отдельный префикс нужен специально, чтобы не конфликтовать с FAQ страниц конкретных туров (.mira-faq-*). ===================================================================== */ /* Основные настройки контейнера */ .mira-direction-faq-container { max-width: 1400px; /* Увеличили ширину до 1400px */ margin: 60px auto; font-family: 'Montserrat', sans-serif; color: #543311; padding: 0 20px; } .mira-direction-faq-title { text-align: center; font-size: 36px; font-weight: 700; margin-bottom: 50px; color: #543311; line-height: 1.2; } /* Стили элементов аккордеона */ .mira-direction-faq-item { background: #fff; border-radius: 16px; margin-bottom: 20px; overflow: hidden; transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); /* Мягкая "тильдовская" тень */ border: 1px solid transparent; } .mira-direction-faq-item:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08); } .mira-direction-faq-item.active { border-color: rgba(88, 123, 48, 0.3); /* Легкий зеленый акцент у открытой вкладки */ } .mira-direction-faq-header { padding: 25px 30px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; user-select: none; } .mira-direction-faq-question { font-size: 20px; font-weight: 600; color: #543311; padding-right: 20px; line-height: 1.4; transition: color 0.3s ease; } .mira-direction-faq-item:hover .mira-direction-faq-question { color: #587B30; /* Вопрос подсвечивается зеленым при наведении */ } /* Иконка-кружок с плюсом */ .mira-direction-faq-icon-wrapper { min-width: 44px; height: 44px; border-radius: 50%; background-color: rgba(88, 123, 48, 0.08); /* Светло-зеленый фон кружка */ display: flex; justify-content: center; align-items: center; transition: all 0.3s ease; } .mira-direction-faq-item:hover .mira-direction-faq-icon-wrapper { background-color: rgba(88, 123, 48, 0.15); } .mira-direction-faq-icon { width: 16px; height: 16px; position: relative; transition: transform 0.4s ease; } .mira-direction-faq-icon::before, .mira-direction-faq-icon::after { content: ''; position: absolute; background-color: #587B30; border-radius: 2px; transition: all 0.4s ease; } .mira-direction-faq-icon::before { width: 100%; height: 2px; top: 50%; left: 0; transform: translateY(-50%); } .mira-direction-faq-icon::after { width: 2px; height: 100%; left: 50%; top: 0; transform: translateX(-50%); } /* Анимация крестика */ .mira-direction-faq-item.active .mira-direction-faq-icon { transform: rotate(135deg); } .mira-direction-faq-item.active .mira-direction-faq-icon-wrapper { background-color: #587B30; } .mira-direction-faq-item.active .mira-direction-faq-icon::before, .mira-direction-faq-item.active .mira-direction-faq-icon::after { background-color: #fff; } /* Контент */ .mira-direction-faq-content { max-height: 0; overflow: hidden; transition: max-height 0.5s cubic-bezier(0, 1, 0, 1); background-color: #fff; } .mira-direction-faq-item.active .mira-direction-faq-content { max-height: 1000px; transition: max-height 1s ease-in-out; } .mira-direction-faq-text { padding: 0 30px 30px 30px; line-height: 1.6; font-size: 16px; color: #543311; opacity: 0; transform: translateY(-10px); transition: opacity 0.4s ease, transform 0.4s ease; } .mira-direction-faq-item.active .mira-direction-faq-text { opacity: 1; transform: translateY(0); transition-delay: 0.1s; } .mira-direction-faq-text ul { margin-top: 10px; padding-left: 25px; /* Увеличили отступ для маркеров */ list-style-type: disc !important; /* Принудительно включаем маркеры */ } .mira-direction-faq-text li { margin-bottom: 8px; display: list-item !important; /* Принудительно задаем поведение элемента списка */ } .mira-direction-faq-text b { color: #543311; font-weight: 700; } /* Кнопка в стиле Тильды */ .mira-direction-btn-faq { display: inline-block; margin-top: 20px; padding: 16px 32px; background-color: #587B30; color: #fff !important; text-decoration: none; border-radius: 40px; font-weight: 600; font-size: 15px; letter-spacing: 0.5px; transition: all 0.3s; box-shadow: 0 4px 15px rgba(88, 123, 48, 0.3); } .mira-direction-btn-faq:hover { background-color: #4a6828; /* Немного затемняем зеленый при наведении */ transform: translateY(-2px); box-shadow: 0 6px 20px rgba(88, 123, 48, 0.4); } /* Адаптивность для телефонов */ @media screen and (max-width: 640px) { .mira-direction-faq-container { margin: 40px auto; padding: 0 15px; } .mira-direction-faq-title { font-size: 28px; margin-bottom: 30px; } .mira-direction-faq-header { padding: 20px; } .mira-direction-faq-question { font-size: 18px; } .mira-direction-faq-text { padding: 0 20px 25px 20px; font-size: 15px; } .mira-direction-btn-faq { width: 100%; text-align: center; box-sizing: border-box; } } /* ===================================================================== E5. ТЕХНИЧЕСКАЯ ИЗОЛЯЦИЯ ПОСАДОЧНЫХ НАПРАВЛЕНИЙ --------------------------------------------------------------------- Эти правила помогают компонентам не наследовать лишнюю геометрию от Tilda и других блоков сайта. ===================================================================== */ .mira-direction-breadcrumbs, .mira-direction-hero, .mira-direction-seo, .mira-direction-faq-container { box-sizing: border-box; } .mira-direction-breadcrumbs *, .mira-direction-breadcrumbs *::before, .mira-direction-breadcrumbs *::after, .mira-direction-hero *, .mira-direction-hero *::before, .mira-direction-hero *::after, .mira-direction-seo *, .mira-direction-seo *::before, .mira-direction-seo *::after, .mira-direction-faq-container *, .mira-direction-faq-container *::before, .mira-direction-faq-container *::after { box-sizing: inherit; } /* T123, содержащий Hero направления: класс добавляется JS последнего блока или задаётся вручную. */ .t-rec.mira-direction-hero-record { padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; background: #ffffff !important; } /* ##################################################################### КОНЕЦ БЛОКА E — ПОСАДОЧНЫЕ НАПРАВЛЕНИЯ ##################################################################### */