/* STAGE 0: GLOBAL STYLES */ /* Fonts import is in HTML */ :root { --font-primary: 'Manrope', sans-serif; --font-headings: 'Clash Display', sans-serif; --color-bg: #f8f5f2; --color-text: #1e2024; --color-accent: #4a5c6a; --color-muted: #d1d5db; --color-white: #ffffff; --header-height: 80px; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-primary); background-color: var(--color-bg); color: var(--color-text); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-headings); font-weight: 600; line-height: 1.2; } a { color: inherit; text-decoration: none; } ul { list-style: none; } img, svg { max-width: 100%; height: auto; display: block; } button { font-family: inherit; border: none; background: none; cursor: pointer; } .container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 20px; } .button { display: inline-block; padding: 12px 24px; background-color: var(--color-accent); color: var(--color-white); font-weight: 500; border-radius: 8px; transition: background-color 0.3s ease, transform 0.3s ease; } .button:hover { background-color: #3b4a55; transform: translateY(-2px); } .logo { display: flex; align-items: center; gap: 12px; font-family: var(--font-headings); font-size: 20px; font-weight: 600; color: var(--color-text); } /* STAGE 1: HEADER */ .header { height: var(--header-height); background-color: var(--color-bg); position: sticky; top: 0; z-index: 100; border-bottom: 1px solid var(--color-muted); } .header__container { height: 100%; display: flex; justify-content: space-between; align-items: center; } .header__nav { display: none; /* Mobile first */ } .header__nav-list { display: flex; gap: 32px; } .header__nav-link { font-size: 16px; font-weight: 500; position: relative; transition: color 0.3s ease; } .header__nav-link::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background-color: var(--color-accent); transition: width 0.3s ease; } .header__nav-link:hover { color: var(--color-accent); } .header__nav-link:hover::after { width: 100%; } .header__actions { display: flex; align-items: center; gap: 16px; } .header__contact-btn { display: none; /* Mobile first */ } .header__burger-btn { display: block; color: var(--color-text); width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease; } .header__burger-btn:hover { transform: scale(1.1); } .header__burger-btn.active { transform: rotate(90deg); } /* Mobile Menu Overlay */ .header__nav.mobile-open { display: block; position: fixed; top: var(--header-height); left: 0; right: 0; bottom: 0; background-color: var(--color-bg); padding: 40px 20px; z-index: 999; animation: slideDown 0.3s ease-out; } .header__nav.mobile-open .header__nav-list { flex-direction: column; gap: 24px; align-items: center; } .header__nav.mobile-open .header__nav-link { font-size: 24px; font-weight: 600; padding: 16px 0; display: block; text-align: center; width: 100%; border-bottom: 1px solid var(--color-muted); } .header__nav.mobile-open .header__nav-link:hover { background-color: rgba(74, 92, 106, 0.1); border-radius: 8px; } .header__nav.mobile-open .header__nav-link::after { display: none; } /* Mobile Menu Animation */ @keyframes slideDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } /* Body scroll lock when mobile menu is open */ body.mobile-menu-open { overflow: hidden; } /* Header - Desktop Styles */ @media (min-width: 768px) { .header__nav { display: block; } .header__contact-btn { display: inline-block; } .header__burger-btn { display: none; } /* Reset mobile menu styles on desktop */ .header__nav.mobile-open { position: static; background: none; padding: 0; animation: none; } .header__nav.mobile-open .header__nav-list { flex-direction: row; gap: 32px; align-items: center; } .header__nav.mobile-open .header__nav-link { font-size: 16px; font-weight: 500; padding: 0; border-bottom: none; background: none !important; width: auto; text-align: left; } .header__nav.mobile-open .header__nav-link::after { display: block; } } /* STAGE 2: FOOTER */ .footer { background-color: var(--color-white); padding: 60px 0; border-top: 1px solid var(--color-muted); } .footer__container { display: grid; grid-template-columns: 1fr; gap: 40px; } .footer__column:first-child { display: flex; flex-direction: column; gap: 16px; } .footer__copyright { font-size: 14px; color: #6b7280; /* Gray */ } .footer__title { font-size: 18px; margin-bottom: 16px; font-weight: 600; } .footer__list { display: flex; flex-direction: column; gap: 12px; } .footer__link { font-size: 15px; color: #374151; /* Cool Gray */ transition: color 0.3s ease; } .footer__link:hover { color: var(--color-accent); } .footer__list--contacts { gap: 16px; } .footer__list--contacts .footer__link, .footer__address { display: flex; align-items: center; gap: 12px; color: #374151; /* Cool Gray */ } .footer__icon { flex-shrink: 0; width: 20px; height: 20px; } .footer__address { align-items: flex-start; } /* Footer - Desktop Styles */ @media (min-width: 768px) { .footer__container { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .footer__container { grid-template-columns: 1.5fr 1fr 1fr 1.5fr; gap: 30px; } } /* assets/css/style.css */ /* STAGE 3: HERO SECTION */ .hero { padding: 60px 0; overflow: hidden; /* To prevent AOS animations from showing scrollbars */ } .hero__container { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; } .hero__content { text-align: center; } .hero__title { font-size: 3rem; /* 48px */ font-weight: 700; margin-bottom: 16px; color: var(--color-text); } .hero__subtitle { font-size: 1.125rem; /* 18px */ max-width: 600px; margin: 0 auto 32px; color: #374151; /* Cool Gray */ } .hero__visual { display: flex; justify-content: center; } .hero__image { width: 100%; max-width: 500px; height: auto; border-radius: 12px; object-fit: cover; } /* Hero - Desktop Styles */ @media (min-width: 768px) { .hero { padding: 80px 0; } .hero__container { grid-template-columns: 1fr 1fr; gap: 60px; } .hero__content { text-align: left; } .hero__title { font-size: 3.75rem; /* 60px */ } .hero__subtitle { margin: 0 0 32px; } } /* assets/css/style.css */ /* STAGE 3: DIRECTIONS SECTION */ .directions { padding: 60px 0; background-color: var(--color-white); } .directions__header { text-align: center; max-width: 700px; margin: 0 auto 50px; } .directions__title { font-size: 2.5rem; /* 40px */ margin-bottom: 12px; } .directions__subtitle { font-size: 1.125rem; /* 18px */ color: #4b5563; /* Gray */ } .directions__grid { display: grid; grid-template-columns: 1fr; gap: 30px; } .directions__card { background-color: var(--color-bg); padding: 32px; border-radius: 12px; border: 1px solid var(--color-muted); text-align: center; transition: transform 0.3s ease, box-shadow 0.3s ease; } .directions__card:hover { transform: translateY(-8px); box-shadow: 0 10px 20px rgba(30, 32, 36, 0.05); } .directions__card-icon { display: inline-flex; padding: 16px; background-color: var(--color-white); border-radius: 50%; margin-bottom: 20px; color: var(--color-accent); border: 1px solid var(--color-muted); } .directions__card-icon i { width: 32px; height: 32px; } .directions__card-title { font-size: 1.25rem; /* 20px */ margin-bottom: 10px; } .directions__card-text { font-size: 1rem; /* 16px */ color: #4b5563; /* Gray */ line-height: 1.6; } /* Directions - Tablet Styles */ @media (min-width: 576px) { .directions__grid { grid-template-columns: repeat(2, 1fr); } } /* Directions - Desktop Styles */ @media (min-width: 768px) { .directions { padding: 80px 0; } } @media (min-width: 1024px) { .directions__grid { grid-template-columns: repeat(4, 1fr); } } /* assets/css/style.css */ /* STAGE 3: APPROACH SECTION */ .approach { padding: 60px 0; overflow-x: hidden; } .approach__header { text-align: center; max-width: 700px; margin: 0 auto 60px; } .approach__title { font-size: 2.5rem; /* 40px */ margin-bottom: 12px; } .approach__subtitle { font-size: 1.125rem; /* 18px */ color: #4b5563; /* Gray */ } .approach__steps { display: flex; flex-direction: column; gap: 80px; } .approach__step { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; } .approach__step-label { display: inline-block; font-size: 0.875rem; /* 14px */ font-weight: 600; color: var(--color-accent); margin-bottom: 12px; text-transform: uppercase; } .approach__step-title { font-size: 2rem; /* 32px */ margin-bottom: 16px; } .approach__step-text { margin-bottom: 24px; color: #374151; } .approach__step-list { display: flex; flex-direction: column; gap: 12px; } .approach__step-list li { display: flex; align-items: center; gap: 12px; font-weight: 500; } .approach__step-list i { width: 20px; height: 20px; color: var(--color-accent); flex-shrink: 0; } .approach__step-image { width: 100%; border-radius: 12px; object-fit: cover; } /* Approach - Desktop Styles */ @media (min-width: 768px) { .approach { padding: 80px 0; } .approach__step { grid-template-columns: 1fr 1fr; gap: 60px; } .approach__step--reversed .approach__step-visual { order: -1; } } /* assets/css/style.css */ /* STAGE 3: CASES SECTION */ .cases { padding: 60px 0; background-color: var(--color-white); } .cases__header { text-align: center; max-width: 700px; margin: 0 auto 50px; } .cases__title { font-size: 2.5rem; /* 40px */ margin-bottom: 12px; } .cases__subtitle { font-size: 1.125rem; /* 18px */ color: #4b5563; /* Gray */ } .cases__grid { display: grid; grid-template-columns: 1fr; gap: 30px; } .cases__card { background-color: var(--color-bg); border: 1px solid var(--color-muted); border-radius: 12px; padding: 24px; display: flex; flex-direction: column; } .cases__card-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 16px; } .cases__card-title { font-size: 1.25rem; /* 20px */ } .cases__card-tag { font-size: 0.875rem; /* 14px */ font-weight: 500; padding: 4px 12px; background-color: var(--color-white); border: 1px solid var(--color-muted); border-radius: 20px; color: var(--color-accent); } .cases__card-text { flex-grow: 1; margin-bottom: 20px; color: #374151; } .cases__card-result { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--color-text); } .cases__card-result i { width: 20px; height: 20px; color: var(--color-accent); } /* Cases - Desktop Styles */ @media (min-width: 768px) { .cases { padding: 80px 0; } .cases__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .cases__grid { grid-template-columns: repeat(3, 1fr); } } /* assets/css/style.css */ /* STAGE 3: BLOG SECTION */ .blog { padding: 60px 0; } .blog__header { text-align: center; max-width: 700px; margin: 0 auto 50px; } .blog__title { font-size: 2.5rem; /* 40px */ margin-bottom: 12px; } .blog__subtitle { font-size: 1.125rem; /* 18px */ color: #4b5563; /* Gray */ } .blog__grid { display: grid; grid-template-columns: 1fr; gap: 30px; } .blog-card { background-color: var(--color-white); border-radius: 12px; overflow: hidden; border: 1px solid var(--color-muted); 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 20px rgba(30, 32, 36, 0.05); } .blog-card__image-link { display: block; } .blog-card__image { width: 100%; height: 200px; object-fit: cover; } .blog-card__content { padding: 24px; display: flex; flex-direction: column; flex-grow: 1; } .blog-card__meta { font-size: 0.875rem; /* 14px */ color: #6b7280; margin-bottom: 8px; } .blog-card__title { font-size: 1.25rem; /* 20px */ margin-bottom: 12px; line-height: 1.4; } .blog-card__title a:hover { color: var(--color-accent); } .blog-card__excerpt { color: #4b5563; margin-bottom: 20px; flex-grow: 1; } .blog-card__readmore { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--color-accent); align-self: flex-start; } .blog-card__readmore i { width: 16px; height: 16px; transition: transform 0.3s ease; } .blog-card__readmore:hover i { transform: translateX(4px); } /* Blog - Tablet Styles */ @media (min-width: 576px) { .blog__grid { grid-template-columns: repeat(2, 1fr); } } /* Blog - Desktop Styles */ @media (min-width: 768px) { .blog { padding: 80px 0; } } @media (min-width: 1024px) { .blog__grid { grid-template-columns: repeat(3, 1fr); } } /* assets/css/style.css */ /* STAGE 4: CONTACT SECTION */ .contact { padding: 60px 0; background-color: var(--color-white); } .contact__container { display: grid; grid-template-columns: 1fr; gap: 50px; } .contact__title { font-size: 2.5rem; /* 40px */ margin-bottom: 16px; } .contact__text { font-size: 1.125rem; /* 18px */ color: #4b5563; margin-bottom: 32px; } .contact__details { display: flex; flex-direction: column; gap: 16px; } .contact__details a { display: inline-flex; align-items: center; gap: 12px; font-weight: 500; } .contact__details a:hover { color: var(--color-accent); } .contact__details i { width: 22px; height: 22px; color: var(--color-accent); } .contact__form { display: flex; flex-direction: column; gap: 20px; } .contact__form-group { display: flex; flex-direction: column; } .contact__form-label { font-weight: 500; margin-bottom: 8px; font-size: 0.875rem; /* 14px */ } .contact__form-input { width: 100%; padding: 12px 16px; border: 1px solid var(--color-muted); border-radius: 8px; font-size: 1rem; /* 16px */ font-family: var(--font-primary); transition: border-color 0.3s ease, box-shadow 0.3s ease; } .contact__form-input:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(74, 92, 106, 0.1); } .contact__form-group--checkbox { display: flex; align-items: flex-start; gap: 12px; margin-top: 8px; } .contact__form-checkbox { margin-top: 4px; width: 16px; height: 16px; flex-shrink: 0; } .contact__form-checkbox-label { font-size: 0.875rem; /* 14px */ color: #4b5563; } .contact__form-checkbox-label a { text-decoration: underline; color: var(--color-accent); } .contact__form-footer { display: flex; align-items: center; gap: 20px; margin-top: 10px; } .contact__form-button:disabled { background-color: #9ca3af; cursor: not-allowed; transform: none; } .contact__form-success-message { font-weight: 500; color: #059669; /* Green */ display: flex; align-items: center; gap: 8px; } /* Contact - Desktop Styles */ @media (min-width: 768px) { .contact { padding: 80px 0; } } @media (min-width: 1024px) { .contact__container { grid-template-columns: 1fr 1.2fr; gap: 80px; align-items: center; } } /* assets/css/style.css */ /* STAGE 5: COOKIE POP-UP */ .cookie-popup { position: fixed; bottom: 0; left: 0; width: 100%; background-color: var(--color-white); padding: 20px 0; z-index: 200; border-top: 1px solid var(--color-muted); box-shadow: 0 -4px 15px rgba(30, 32, 36, 0.05); transform: translateY(100%); transition: transform 0.5s ease-in-out; } .cookie-popup--show { transform: translateY(0); } .cookie-popup__container { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 16px; text-align: center; } .cookie-popup__text { font-size: 0.875rem; /* 14px */ color: #4b5563; } .cookie-popup__text a { font-weight: 500; color: var(--color-accent); text-decoration: underline; } .cookie-popup__button { padding: 8px 20px; font-size: 0.875rem; /* 14px */ background-color: var(--color-accent); color: var(--color-white); border-radius: 6px; white-space: nowrap; transition: background-color 0.3s ease; } .cookie-popup__button:hover { background-color: #3b4a55; } /* Cookie Pop-up - Desktop Styles */ @media (min-width: 768px) { .cookie-popup__container { flex-direction: row; text-align: left; } } /* STAGE 5: POLICY PAGES STYLES */ .pages { padding: 60px 0; background-color: var(--color-white); } .pages .container { max-width: 800px; /* Optimal width for readability */ } .pages h1 { font-size: 1.5rem; /* 40px */ margin-bottom: 24px; border-bottom: 1px solid var(--color-muted); padding-bottom: 16px; } .pages h2 { font-size: 1.5rem; /* 28px */ margin-top: 40px; margin-bottom: 16px; } .pages p { font-size: 1rem; /* 16px */ line-height: 1.7; margin-bottom: 16px; color: #374151; } .pages ul { list-style-type: disc; padding-left: 20px; margin-bottom: 16px; } .pages li { margin-bottom: 10px; line-height: 1.7; color: #374151; } .pages a { color: var(--color-accent); text-decoration: underline; font-weight: 500; transition: color 0.3s ease; } .pages a:hover { color: #3b4a55; } .pages strong { font-weight: 700; color: var(--color-text); } /* Policy Pages - Desktop Styles */ @media (min-width: 768px) { .pages { padding: 80px 0; } .pages h1 { font-size: 3rem; /* 48px */ } .pages h2 { font-size: 2rem; /* 32px */ } }