/* ========================================================================== SMILE SPOT – Главен CSS файл Структура: 1. CSS Променливи (цветове, шрифтове, сенки) 2. Base / Reset 3. Навигация + Hamburger меню (мобилно) 4. Hero секция 5. Бутони 6. Общи секции и заглавия 7. За нас 8. Екип (лекарски карти) 9. Услуги и ценоразпис 10. Отзиви (карусел) 11. Преди и след (Before/After слайдер) 12. Форма за въпроси 13. Контакти 14. Модали (записване на час) 15. Footer ========================================================================== */ /* ========================================================================== 1. CSS ПРОМЕНЛИВИ Всички цветове, шрифтове и сенки са дефинирани тук. Променяш ги само на едно място и важи за целия сайт. ========================================================================== */ :root { /* Цветове */ --gold: #FFD700; /* Основен акцент – злато */ --gold-hover: #ffea00; /* По-светло злато при hover */ --dark: #1a1a1a; /* Почти черно – текст върху злато */ --dark-mid: #2b2b2b; /* Заглавия */ --gray: #3a3a3a; /* Навигация и footer */ --text: #333333; /* Основен текст */ --text-light: #555555; /* По-светъл текст (описания) */ --bg: #f5f5f5; /* Фон на страницата */ --white: #ffffff; --border: #efefef; /* Разделители */ /* Форми */ --radius: 16px; --shadow: 0 15px 40px rgba(0,0,0,0.10); --shadow-sm: 0 8px 20px rgba(0,0,0,0.08); /* Шрифтове – заредени от Google Fonts в */ --font-heading: 'Playfair Display', Georgia, serif; --font-body: 'Nunito', Arial, sans-serif; } /* ========================================================================== 2. BASE / RESET ========================================================================== */ * { box-sizing: border-box; } html { scroll-behavior: smooth; /* Плавно скролиране при клик на nav линкове */ } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 1rem; line-height: 1.7; } /* Всички заглавия използват serif шрифта */ h1, h2, h3, h4 { font-family: var(--font-heading); color: var(--dark-mid); } /* ========================================================================== 3. НАВИГАЦИЯ + HAMBURGER МЕНЮ Desktop: хоризонтални линкове. Мобилно (<768px): скрити зад hamburger бутон. ========================================================================== */ .nav { background: var(--gray); padding: 0 20px; display: flex; align-items: center; justify-content: center; position: sticky; /* Остава горе при скролиране */ top: 0; z-index: 100; min-height: 56px; } .nav-links { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; } .nav-links a { color: var(--gold); padding: 8px 12px; text-decoration: none; font-weight: 700; font-family: var(--font-body); font-size: 0.95rem; position: relative; transition: color 0.2s; } /* Анимирана жълта черта под линка при hover */ .nav-links a::after { content: ""; position: absolute; width: 0; height: 3px; left: 0; bottom: 2px; background: var(--gold); transition: width 0.3s ease; border-radius: 2px; } .nav-links a:hover::after { width: 100%; } /* Hamburger бутон – скрит на desktop */ .hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; margin-left: auto; } /* Трите черти */ .hamburger span { display: block; width: 26px; height: 3px; background: var(--gold); border-radius: 3px; transition: all 0.3s ease; } /* Анимация X при отваряне */ .hamburger.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); } .hamburger.open span:nth-child(2) { opacity: 0; } .hamburger.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } /* Мобилна навигация */ @media (max-width: 768px) { .nav { justify-content: flex-end; padding: 0 16px; } .hamburger { display: flex; } /* Менюто пада от горе при добавяне на .open клас от JavaScript */ .nav-links { display: none; position: absolute; top: 56px; left: 0; right: 0; background: var(--gray); flex-direction: column; align-items: center; padding: 16px 0 20px; gap: 0; border-top: 2px solid var(--gold); box-shadow: 0 8px 20px rgba(0,0,0,0.3); } .nav-links.open { display: flex; } .nav-links a { width: 100%; text-align: center; padding: 12px 20px; font-size: 1.05rem; border-bottom: 1px solid rgba(255,215,0,0.1); } .nav-links a:last-child { border-bottom: none; } .nav-links a::after { display: none; } } /* ========================================================================== 4. HERO СЕКЦИЯ Пълноекранен банер с фоново изображение main.jpg. Тъмен overlay за четимост на текста. ========================================================================== */ .hero { background: linear-gradient(rgba(20,20,20,0.65), rgba(20,20,20,0.65)), url(main.jpg) center/cover; min-height: 90vh; display: flex; justify-content: center; align-items: center; text-align: center; padding: 40px 20px; } .hero-content { display: flex; flex-direction: column; align-items: center; gap: 16px; } /* H1 – важно за SEO, също и визуално заглавие */ .hero h1 { font-family: var(--font-heading); color: var(--gold); font-size: 3.5rem; font-weight: 800; margin: 8px 0 0; letter-spacing: 2px; text-shadow: 0 2px 12px rgba(0,0,0,0.4); } .hero p { color: rgba(255,255,255,0.88); font-size: 1.15rem; margin: 0; letter-spacing: 0.5px; } /* Кръгло лого с жълта рамка */ .hero-logo { width: 200px; height: 200px; object-fit: cover; border-radius: 50%; background: white; padding: 10px; box-shadow: 0 10px 40px rgba(0,0,0,0.35); border: 3px solid var(--gold); } @media (max-width: 600px) { .hero h1 { font-size: 2.4rem; } .hero-logo { width: 160px; height: 160px; } } /* ========================================================================== 5. БУТОНИ .yellow-btn – за линкове (hero, карти) .book-btn – за