/* ========================================================== РОЖДЕСТВЕНСКИЙ БАННЕР — SL REALTY Подключить в : ========================================================== */ /* Баннер */ #sl-christmas-banner { background: linear-gradient(135deg, #4a7a4c 0%, #5a8f5c 50%, #4a7a4c 100%); min-height: 120px; display: flex; align-items: center; justify-content: center; padding: 15px 40px; position: relative; gap: 40px; font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; box-sizing: border-box; } /* Снежинки на фоне */ #sl-christmas-banner::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='150' viewBox='0 0 200 150'%3E%3Ctext x='30' y='40' text-anchor='middle' font-size='32' fill='%23ffffff' fill-opacity='0.15'%3E%E2%9D%84%3C/text%3E%3Ctext x='170' y='50' text-anchor='middle' font-size='24' fill='%23ffffff' fill-opacity='0.12'%3E%E2%9D%84%3C/text%3E%3Ctext x='100' y='120' text-anchor='middle' font-size='28' fill='%23ffffff' fill-opacity='0.1'%3E%E2%9D%84%3C/text%3E%3Ctext x='60' y='110' text-anchor='middle' font-size='18' fill='%23ffffff' fill-opacity='0.08'%3E%E2%9D%84%3C/text%3E%3Ctext x='150' y='130' text-anchor='middle' font-size='20' fill='%23ffffff' fill-opacity='0.1'%3E%E2%9D%84%3C/text%3E%3C/svg%3E"); background-size: 200px 150px; pointer-events: none; } #sl-christmas-banner * { box-sizing: border-box; } /* Фото */ #sl-christmas-banner .sl-banner-photo { flex-shrink: 0; width: 120px; height: 120px; border: 3px solid rgba(255,255,255,0.3); border-radius: 50%; overflow: hidden; position: relative; z-index: 1; } #sl-christmas-banner .sl-banner-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; } /* Контент */ #sl-christmas-banner .sl-banner-content { position: relative; z-index: 1; text-align: center; } #sl-christmas-banner .sl-banner-headline { font-family: 'Cormorant Garamond', 'Times New Roman', Georgia, serif; font-size: 1.7rem; font-weight: 500; color: #ffffff; line-height: 1.3; margin: 0 0 5px 0; padding: 0; } #sl-christmas-banner .sl-banner-author { font-family: 'Cormorant Garamond', 'Times New Roman', Georgia, serif; font-size: 1.2rem; font-style: italic; color: #e8d5a3; margin: 0; padding: 0; } /* CTA кнопка */ #sl-christmas-banner .sl-banner-cta { position: relative; z-index: 1; } #sl-christmas-banner .sl-banner-cta a, #sl-christmas-banner .sl-banner-btn { display: inline-flex; align-items: center; gap: 10px; background: transparent; color: #ffffff; font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 0.8rem; font-weight: 500; padding: 12px 28px; border: 2px solid #c9a962; text-decoration: none; transition: all 0.3s ease; line-height: 1; } #sl-christmas-banner .sl-banner-cta a.sl-banner-btn:hover { background: #c9a962; color: #2d2d2d; } #sl-christmas-banner .sl-banner-cta-mobile .sl-banner-btn:hover { background: #c9a962; color: #2d2d2d; } #sl-christmas-banner .sl-banner-cta svg { width: 18px; height: 18px; flex-shrink: 0; } /* Кликабельная ссылка-контейнер */ #sl-christmas-banner .sl-banner-inner { display: flex; align-items: center; justify-content: center; gap: 40px; flex: 1; } /* Кликабельные элементы */ #sl-christmas-banner a { text-decoration: none; color: inherit; } #sl-christmas-banner .sl-banner-headline:hover, #sl-christmas-banner .sl-banner-author:hover { text-decoration: underline; text-decoration-color: rgba(255,255,255,0.5); } /* Кнопка закрытия */ #sl-christmas-banner .sl-banner-close { position: absolute; right: 15px; top: 15px; background: none; border: none; cursor: pointer; color: rgba(255,255,255,0.4); transition: color 0.2s; padding: 5px; z-index: 2; line-height: 1; } #sl-christmas-banner .sl-banner-close:hover { color: rgba(255,255,255,0.8); } #sl-christmas-banner .sl-banner-close svg { width: 20px; height: 20px; display: block; } /* Скрытый баннер */ #sl-christmas-banner.sl-hidden { display: none !important; } /* Мобильная кнопка скрыта на десктопе */ #sl-christmas-banner .sl-banner-cta-mobile { display: none; } /* ========================================================== МОБИЛЬНАЯ ВЕРСИЯ - ВАРИАНТ 1: кнопка ПОД текстом ========================================================== */ @media (max-width: 900px) { #sl-christmas-banner { padding: 0; min-height: auto; } #sl-christmas-banner::before { background-size: 150px 110px; } #sl-christmas-banner .sl-banner-inner { flex-direction: row; flex-wrap: nowrap; padding: 10px 45px 10px 12px; gap: 12px; justify-content: flex-start; align-items: center; } #sl-christmas-banner .sl-banner-photo { width: 80px; height: 80px; border-width: 2px; flex-shrink: 0; } #sl-christmas-banner .sl-banner-content { text-align: left; flex: 1; min-width: 0; } #sl-christmas-banner .sl-banner-headline { font-size: 1.1rem; margin-bottom: 2px; line-height: 1.2; } #sl-christmas-banner .sl-banner-author-row { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; } #sl-christmas-banner .sl-banner-author { font-size: 1rem; } #sl-christmas-banner .sl-banner-cta { display: none; } #sl-christmas-banner .sl-banner-cta-mobile { display: inline-flex; } #sl-christmas-banner .sl-banner-cta-mobile .sl-banner-btn { font-size: 0.75rem; padding: 7px 10px; gap: 4px; } #sl-christmas-banner .sl-banner-cta-mobile .sl-banner-btn svg { width: 10px; height: 10px; } #sl-christmas-banner .sl-banner-close { right: 10px; top: 10px; transform: none; padding: 8px; margin: 0; } #sl-christmas-banner .sl-banner-close svg { width: 16px; height: 16px; } }