/* ==================== GLOBAL STYLES ==================== */ /* Google Fonts Import (already in HTML ) */ /* CSS Variables */ :root { --header-height: 4.5rem; /* Colors */ --background-color: #F8F9FA; --text-color: #212529; --text-color-light: #6c757d; --primary-color: #0A2B4C; --primary-color-light: #1a4a7a; --accent-color: #D4A373; --accent-color-hover: #c8935a; --white-color: #FFF; --border-color: #dee2e6; /* Typography */ --body-font: 'Manrope', sans-serif; --heading-font: 'Playfair Display', serif; --h1-font-size: 2.75rem; --h2-font-size: 2rem; --h3-font-size: 1.25rem; --normal-font-size: 1rem; --small-font-size: 0.875rem; /* Z-index */ --z-header: 100; --z-popup: 200; } /* Base */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--body-font); font-size: var(--normal-font-size); background-color: var(--background-color); color: var(--text-color); line-height: 1.6; } h1, h2, h3 { font-family: var(--heading-font); font-weight: 700; color: var(--primary-color); } ul { list-style: none; } a { text-decoration: none; color: inherit; } img { max-width: 100%; height: auto; display: block; } address { font-style: normal; } /* Reusable CSS Classes */ .container { max-width: 1140px; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; } /* ==================== HEADER ==================== */ .header { width: 100%; background-color: var(--background-color); position: fixed; top: 0; left: 0; z-index: var(--z-header); border-bottom: 1px solid var(--border-color); transition: box-shadow 0.3s ease; } .header__container { height: var(--header-height); display: flex; justify-content: space-between; align-items: center; } .header__logo { font-family: var(--heading-font); font-size: 1.5rem; color: var(--primary-color); font-weight: 700; } .nav__list { display: flex; align-items: center; gap: 2rem; } .nav__link { color: var(--text-color); font-weight: 700; transition: color 0.3s ease; } .nav__link:hover { color: var(--accent-color); } .nav__link--button { background-color: var(--accent-color); color: var(--white-color); padding: 0.5rem 1.5rem; border-radius: 50px; transition: background-color 0.3s ease; } .nav__link--button:hover { background-color: var(--accent-color-hover); color: var(--white-color); } .header__burger-button { display: none; /* Hidden on desktop */ background: none; border: none; cursor: pointer; color: var(--primary-color); } /* ==================== FOOTER ==================== */ .footer { background-color: var(--primary-color); color: var(--white-color); padding: 4rem 0 2rem; } .footer__container { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2rem; margin-bottom: 3rem; } .footer__logo { font-family: var(--heading-font); font-size: 1.75rem; color: var(--white-color); font-weight: 700; margin-bottom: 1rem; display: inline-block; } .footer__description { color: var(--border-color); max-width: 300px; } .footer__title { font-size: var(--h3-font-size); color: var(--white-color); margin-bottom: 1rem; font-family: var(--body-font); font-weight: 700; } .footer__list { display: flex; flex-direction: column; gap: 0.75rem; } .footer__link { color: var(--border-color); transition: color 0.3s ease, padding-left 0.3s ease; } .footer__link:hover { color: var(--accent-color); padding-left: 5px; } .footer__list--contacts .footer__item { display: flex; align-items: flex-start; gap: 0.75rem; } .footer__icon { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; } .footer__address { line-height: 1.5; } .footer__copyright { text-align: center; padding-top: 2rem; border-top: 1px solid var(--primary-color-light); color: var(--text-color-light); font-size: var(--small-font-size); } /* ==================== RESPONSIVENESS ==================== */ @media screen and (max-width: 768px) { :root { --h1-font-size: 2rem; --h2-font-size: 1.5rem; } .header__nav { /* Mobile menu styles will be added later */ display: none; } .header__burger-button { display: block; } } /* ... (предыдущие стили без изменений) ... */ /* Reusable CSS Classes */ .container { max-width: 1140px; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; } .button { display: inline-block; padding: 0.8rem 2.5rem; border-radius: 50px; font-weight: 700; font-family: var(--body-font); text-align: center; transition: all 0.3s ease; border: 2px solid transparent; cursor: pointer; } .button--primary { background-color: var(--accent-color); color: var(--white-color); } .button--primary:hover { background-color: var(--accent-color-hover); transform: translateY(-3px); box-shadow: 0 4px 15px rgba(0,0,0,0.1); } /* ... (стили хедера без изменений) ... */ /* ==================== HERO SECTION ==================== */ .hero { padding-top: calc(var(--header-height) + 4rem); padding-bottom: 4rem; background-color: var(--white-color); overflow: hidden; /* To contain AOS animations */ } .hero__container { display: grid; grid-template-columns: 1.1fr 0.9fr; align-items: center; gap: 3rem; } .hero__title { font-size: var(--h1-font-size); line-height: 1.2; margin-bottom: 1.5rem; } .hero__title--accent { color: var(--accent-color); } .hero__description { font-size: var(--h3-font-size); font-family: var(--body-font); font-weight: 400; line-height: 1.5; color: var(--text-color-light); margin-bottom: 2.5rem; max-width: 500px; } .hero__action { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; } .hero__action-note { font-size: var(--small-font-size); color: var(--text-color-light); } .hero__image-wrapper { display: flex; justify-content: center; align-items: center; } .hero__image { width: 100%; max-width: 450px; border-radius: 20px; object-fit: cover; } /* ... (стили футера без изменений) ... */ /* ==================== RESPONSIVENESS ==================== */ @media screen and (max-width: 992px) { .hero__container { grid-template-columns: 1fr; text-align: center; } .hero__content { order: 2; /* Text goes below image on mobile */ } .hero__image-wrapper { order: 1; } .hero__description { margin-left: auto; margin-right: auto; } .hero__action { justify-content: center; } } @media screen and (max-width: 768px) { :root { --h1-font-size: 2rem; --h2-font-size: 1.5rem; } .hero { padding-top: calc(var(--header-height) + 2rem); padding-bottom: 2rem; } .header__nav { /* Mobile menu styles will be added later */ display: none; } .header__burger-button { display: block; } } /* ... (предыдущие стили без изменений) ... */ /* ==================== REUSABLE SECTION STYLES ==================== */ .section { padding: 5rem 0; overflow: hidden; /* Important for AOS animations */ } .section__header { text-align: center; margin-bottom: 3rem; max-width: 700px; margin-left: auto; margin-right: auto; } .section__title { font-size: var(--h2-font-size); margin-bottom: 0.5rem; } .section__subtitle { color: var(--text-color-light); line-height: 1.6; } /* ==================== SERVICES SECTION ==================== */ .services { background-color: var(--background-color); } .services__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; } .service-card { background-color: var(--white-color); padding: 2.5rem 2rem; border-radius: 15px; border: 1px solid var(--border-color); text-align: center; transition: transform 0.3s ease, box-shadow 0.3s ease; } .service-card:hover { transform: translateY(-10px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); } .service-card__icon-wrapper { width: 70px; height: 70px; border-radius: 50%; background-color: var(--primary-color); display: flex; justify-content: center; align-items: center; margin: 0 auto 1.5rem auto; transition: background-color 0.3s ease; } .service-card__icon { width: 32px; height: 32px; color: var(--white-color); transition: color 0.3s ease; } .service-card:hover .service-card__icon-wrapper { background-color: var(--accent-color); } .service-card__title { font-size: var(--h3-font-size); margin-bottom: 0.75rem; color: var(--primary-color); } .service-card__description { color: var(--text-color-light); line-height: 1.7; } /* ... (стили футера и адаптивности без изменений) ... */ /* Добавляем немного адаптивности для секций */ @media screen and (max-width: 768px) { .section { padding: 4rem 0; } /* ... (остальные стили адаптивности) ... */ } /* ... (предыдущие стили без изменений) ... */ /* ==================== CASES SECTION ==================== */ .cases { background-color: var(--white-color); } .cases__tabs-wrapper { background-color: var(--background-color); padding: 1rem; border-radius: 20px; border: 1px solid var(--border-color); } .cases__tabs-nav { display: flex; justify-content: center; background-color: var(--white-color); padding: 0.5rem; border-radius: 15px; margin-bottom: 2rem; box-shadow: 0 4px 15px rgba(0,0,0,0.05); } .cases__tab-button { flex: 1; padding: 1rem 1.5rem; background-color: transparent; border: none; border-radius: 10px; cursor: pointer; font-size: var(--normal-font-size); font-weight: 700; color: var(--text-color-light); transition: all 0.3s ease; white-space: nowrap; } .cases__tab-button:hover { color: var(--primary-color); } .cases__tab-button.is-active { background-color: var(--primary-color); color: var(--white-color); box-shadow: 0 4px 10px rgba(10, 43, 76, 0.2); } .case-content { display: none; /* Hidden by default */ grid-template-columns: 1fr 1.2fr; align-items: center; gap: 3rem; animation: fadeIn 0.5s ease-in-out; } .case-content.is-active { display: grid; /* Shown when active */ } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .case-content__image-wrapper { text-align: center; } .case-content__image { max-width: 100%; border-radius: 15px; } .case-content__title { font-size: var(--h3-font-size); margin-bottom: 1rem; } .case-content__description { color: var(--text-color); margin-bottom: 2rem; } .case-content__stats { display: flex; gap: 2rem; flex-wrap: wrap; padding-top: 1rem; border-top: 1px solid var(--border-color); } .stat { text-align: left; } .stat__value { display: block; font-size: 2rem; font-weight: 700; color: var(--accent-color); line-height: 1.1; } .stat__label { font-size: var(--small-font-size); color: var(--text-color-light); } /* ... (предыдущие стили адаптивности) ... */ /* Адаптивность для Кейсов */ @media screen and (max-width: 992px) { .case-content, .case-content.is-active { grid-template-columns: 1fr; gap: 2rem; } .case-content__image-wrapper { order: -1; /* Image appears first on mobile */ } .case-content__text { text-align: center; } .case-content__stats { justify-content: center; } } @media screen and (max-width: 576px) { .cases__tabs-nav { flex-direction: column; gap: 0.5rem; } .cases__tab-button { width: 100%; } } /* ... (предыдущие стили без изменений) ... */ /* ==================== BLOG SECTION ==================== */ .blog { background-color: var(--background-color); } .blog__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2rem; } .blog-card { background-color: var(--white-color); border-radius: 15px; overflow: hidden; border: 1px solid var(--border-color); display: flex; flex-direction: column; transition: transform 0.3s ease, box-shadow 0.3s ease; } .blog-card:hover { transform: translateY(-8px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); } .blog-card__image-link { display: block; overflow: hidden; } .blog-card__image { width: 100%; height: 220px; object-fit: cover; transition: transform 0.4s ease; } .blog-card:hover .blog-card__image { transform: scale(1.05); } .blog-card__content { padding: 1.5rem; display: flex; flex-direction: column; flex-grow: 1; /* Makes content fill the space */ } .blog-card__category { display: inline-block; margin-bottom: 0.75rem; font-size: var(--small-font-size); font-weight: 700; color: var(--accent-color); text-transform: uppercase; } .blog-card__title { font-size: 1.3rem; font-family: var(--heading-font); line-height: 1.3; margin-bottom: 1rem; } .blog-card__title a { transition: color 0.3s ease; } .blog-card:hover .blog-card__title a { color: var(--accent-color); } .blog-card__excerpt { color: var(--text-color-light); line-height: 1.6; margin-bottom: 1.5rem; flex-grow: 1; /* Pushes footer down */ } .blog-card__footer { display: flex; justify-content: space-between; align-items: center; padding-top: 1rem; border-top: 1px solid var(--border-color); } .blog-card__date { font-size: var(--small-font-size); color: var(--text-color-light); } .blog-card__read-more { font-weight: 700; color: var(--primary-color); display: flex; align-items: center; gap: 0.25rem; transition: color 0.3s ease, gap 0.3s ease; } .blog-card__read-more:hover { color: var(--accent-color); gap: 0.5rem; } .blog-card__arrow { width: 16px; height: 16px; } /* ... (предыдущие стили без изменений) ... */ /* ==================== ABOUT US SECTION ==================== */ .about { background-color: var(--white-color); } .about__container { display: grid; grid-template-columns: 1.1fr 0.9fr; align-items: center; gap: 4rem; } .about__description { color: var(--text-color-light); line-height: 1.7; } .about__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; } .stat-item { background-color: var(--background-color); padding: 2rem; border-radius: 15px; text-align: center; border: 1px solid var(--border-color); } .stat-item__icon { width: 36px; height: 36px; color: var(--accent-color); margin-bottom: 1rem; } .stat-item__number { font-size: 2.5rem; font-family: var(--body-font); font-weight: 700; color: var(--primary-color); line-height: 1.1; } .stat-item__label { color: var(--text-color-light); font-size: var(--small-font-size); } /* ... (остальные стили) ... */ /* Адаптивность для секции "О нас" */ @media screen and (max-width: 992px) { .about__container { grid-template-columns: 1fr; gap: 3rem; } .about__content { text-align: center; } .about__content .section__header { margin-left: auto; margin-right: auto; } } @media screen and (max-width: 576px) { .about__stats { gap: 1rem; } .stat-item { padding: 1.5rem 1rem; } .stat-item__number { font-size: 2rem; } } /* ... (предыдущие стили без изменений) ... */ /* ==================== CONTACT SECTION ==================== */ .contact { background-color: var(--background-color); } .contact__container { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; background-color: var(--white-color); padding: 4rem; border-radius: 20px; border: 1px solid var(--border-color); } .contact__details { list-style: none; margin-top: 2rem; display: flex; flex-direction: column; gap: 1rem; } .contact__details-item { display: flex; align-items: flex-start; gap: 1rem; } .contact__details-icon { flex-shrink: 0; width: 24px; height: 24px; color: var(--accent-color); } .contact__form-wrapper { position: relative; } .contact__form { display: flex; flex-direction: column; gap: 1.5rem; } .form__group { display: flex; flex-direction: column; } .form__label { font-weight: 700; margin-bottom: 0.5rem; font-size: var(--small-font-size); } .form__input { width: 100%; padding: 0.9rem 1.2rem; border: 1px solid var(--border-color); border-radius: 8px; font-size: var(--normal-font-size); font-family: var(--body-font); transition: border-color 0.3s ease, box-shadow 0.3s ease; } .form__input:focus { outline: none; border-color: var(--accent-color); box-shadow: 0 0 0 3px rgba(212, 163, 115, 0.25); } .form__input.has-error { border-color: #dc3545; } .form__group--checkbox { flex-direction: row; align-items: flex-start; gap: 0.75rem; } .form__checkbox-input { margin-top: 4px; width: 1.2em; height: 1.2em; accent-color: var(--primary-color); } .form__checkbox-label { font-size: var(--small-font-size); color: var(--text-color-light); } .form__checkbox-label a { color: var(--primary-color); text-decoration: underline; } .form__button { width: 100%; padding: 1rem; font-size: 1.1rem; } .form__success-message { display: none; /* Hidden by default */ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--white-color); text-align: center; padding: 2rem; border-radius: 8px; flex-direction: column; justify-content: center; align-items: center; animation: fadeIn 0.5s ease; } .form__success-message.is-visible { display: flex; /* Shown via JS */ } /* ... (остальные стили) ... */ /* Адаптивность для секции "Контакты" */ @media screen and (max-width: 992px) { .contact__container { grid-template-columns: 1fr; padding: 2rem; } } /* ... (предыдущие стили без изменений) ... */ /* ==================== COOKIE POPUP ==================== */ .cookie-popup { position: fixed; bottom: 1.5rem; left: 1.5rem; right: 1.5rem; z-index: var(--z-popup); display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; max-width: 600px; margin: 0 auto; padding: 1rem 1.5rem; background-color: var(--white-color); border: 1px solid var(--border-color); border-radius: 15px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1); opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease, transform 0.5s ease; } .cookie-popup.is-visible { opacity: 1; transform: translateY(0); } .cookie-popup.is-hidden { display: none; } .cookie-popup__text { font-size: var(--small-font-size); color: var(--text-color-light); } .cookie-popup__text a { color: var(--primary-color); font-weight: 700; text-decoration: underline; } .cookie-popup__button { padding: 0.6rem 1.2rem; white-space: nowrap; } /* Адаптивность для Cookie Pop-up */ @media screen and (max-width: 576px) { .cookie-popup { flex-direction: column; text-align: center; gap: 1rem; bottom: 1rem; left: 1rem; right: 1rem; } } /* ... (предыдущие стили без изменений) ... */ /* ==================== GENERIC PAGES (PRIVACY, TERMS, ETC.) ==================== */ .pages { padding: calc(var(--header-height) + 4rem) 0 4rem 0; background-color: var(--white-color); line-height: 1.8; } .pages .container { max-width: 800px; /* Narrower container for better readability */ } .pages h1, .pages h2 { font-family: var(--heading-font); color: var(--primary-color); margin-bottom: 1.5rem; } .pages h1 { font-size: var(--h1-font-size); border-bottom: 1px solid var(--border-color); padding-bottom: 1.5rem; margin-bottom: 2rem; } .pages h2 { font-size: var(--h2-font-size); margin-top: 3rem; } .pages p { color: var(--text-color); margin-bottom: 1.5rem; } .pages ul { list-style-type: disc; padding-left: 1.5rem; margin-bottom: 1.5rem; } .pages li { margin-bottom: 0.75rem; padding-left: 0.5rem; } .pages a { color: var(--accent-color); text-decoration: underline; font-weight: 700; transition: color 0.3s ease; } .pages a:hover { color: var(--primary-color); } .pages strong { color: var(--primary-color); font-weight: 700; }