/* =============================================================== RESET & BASE TYPOGRAPHY ================================================================== */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; box-sizing: border-box; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1.5; font-family: 'Lato', Arial, Helvetica, sans-serif; background: #fffaf5; color: #35495e; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { max-width: 100%; height: auto; display: block; } a { text-decoration: none; color: inherit; outline: none; } ul, ol { padding-left: 1.2em; } button, input, select, textarea { font-family: inherit; font-size: 1rem; color: inherit; appearance: none; background: none; border: none; outline: none; box-sizing: border-box; } /* =============== FONTS (Google Fonts must be linked in in prod) ================== */ @import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Montserrat:wght@700;800&display=swap'); h1, h2, h3, h4, h5, h6 { font-family: 'Montserrat', 'Arial Rounded MT Bold', Arial, sans-serif; letter-spacing: -0.015em; color: #35495e; margin-bottom: 18px; } h1 { font-size: 2.25rem; font-weight: 800; margin-bottom: 20px; } h2 { font-size: 1.6rem; font-weight: 700; } h3 { font-size: 1.18rem; font-weight: 700; } h4, h5, h6 { font-size: 1rem; font-weight: 700; } p, li, blockquote, dd { font-family: 'Lato', Arial, Helvetica, sans-serif; font-size: 1rem; font-weight: 400; margin-bottom: 16px; color: #35495e; } blockquote { font-style: italic; color: #3d5630; background: #f3efe9; border-left: 4px solid #9cc3af; padding: 14px 22px 14px 20px; } .subheadline { font-size: 1.175rem; color: #677870; margin-bottom: 26px; } .cta-note { font-size: 1rem; color: #568265; margin-top: 14px; margin-bottom: 0; } /************************************* CONTAINER & SECTION SPACING (FLEX!) **************************************/ .container { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 16px; box-sizing: border-box; } .section { margin-bottom: 60px; padding: 40px 20px; background: #fffaf5; border-radius: 22px; } .content-wrapper { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; } /* Main page headline with CTA btn */ .content-wrapper > .cta-btn { align-self: flex-start; margin-top: 14px; } /************************** ORGANIC + FLEX LAYOUTS ***************************/ .card-container, .service-list, .team-list, .pricing-cards, .testimonial-list, .content-grid, .card-grid { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 12px; } .card { margin-bottom: 20px; background: #f5f3eb; border-radius: 18px; box-shadow: 0 1.5px 8px 0 rgba(53,73,94,0.07), 0 1.5px 4px 0 rgba(156,195,175,0.11); position: relative; display: flex; flex-direction: column; min-width: 240px; flex: 1 1 300px; padding: 28px 24px; transition: box-shadow 0.18s, transform 0.18s; } .card:hover, .service-card:hover, .pricing-card:hover, .team-card:hover { box-shadow: 0 4px 16px 0 rgba(53,73,94,0.17), 0 3px 14px 0 rgba(156,195,175,0.20); transform: translateY(-4px); } .card-content { display: flex; flex-direction: column; justify-content: center; gap: 12px; } .content-grid { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; } .text-image-section { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; } .testimonial-card { display: flex; align-items: center; gap: 20px; padding: 20px; background: #fff; border-radius: 16px 32px 18px 24px / 26px 12px 22px 30px; margin-bottom: 20px; box-shadow: 0 1.5px 8px 0 rgba(53,73,94,0.08); transition: box-shadow 0.19s, transform 0.19s; } .testimonial-card:hover { box-shadow: 0 4px 20px 0 rgba(53,73,94,0.18); transform: translateY(-2px) scale(1.01); } .feature-item { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; margin-bottom: 20px; } .service-list { display: flex; flex-wrap: wrap; gap: 24px; margin-bottom: 0; } .service-card { background: #f5f3eb; border-radius: 20px 20px 22px 18px/18px 28px 22px 16px; box-shadow: 0 1.5px 8px 0 rgba(53,73,94,0.07); flex: 1 1 280px; display: flex; flex-direction: column; align-items: flex-start; padding: 26px 20px 22px; margin-bottom: 20px; min-width: 220px; transition: box-shadow 0.2s, transform 0.17s; position: relative; border-left: 6px solid #9cc3af; } .service-card img { align-self: flex-start; width: 38px; height: 38px; margin-bottom: 14px; border-radius: 12px; background: #e0e8dc; object-fit: contain; padding: 6px; } .service-card h3 { font-size: 1.14rem; margin-bottom: 10px; } .service-price { font-weight: 700; color: #427d47; margin-top: 8px; font-size: 1rem; letter-spacing: 0.01em; } .team-list { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 15px; } .team-card { background: #eeede7; border-radius: 20px 19px 24px 18px/26px 20px 22px 14px; box-shadow: 0 1.5px 8px 0 rgba(53,73,94,0.045); flex: 1 1 240px; display: flex; flex-direction: column; align-items: flex-start; padding: 18px 18px 14px; margin-bottom: 20px; min-width: 200px; transition: box-shadow 0.16s, transform 0.16s; border-left: 5px solid #a3c6b7; } .pricing-cards { display: flex; flex-wrap: wrap; gap: 24px; margin-bottom: 20px; } .pricing-card { background: #f7f6f3; border-radius: 22px 14px 21px 18px/25px 25px 19px 16px; box-shadow: 0 1.5px 8px 0 rgba(53,73,94,0.07); flex: 1 1 220px; min-width: 200px; padding: 20px 18px 14px; display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 20px; transition: box-shadow 0.18s, transform 0.15s; } .pricing-card .price { color: #427d47; font-weight: 700; margin-top: 12px; font-size: 1.28rem; letter-spacing: 0.03em; } .pricing-highlight { color: #527c5e; font-weight: 600; margin-top: 8px; margin-bottom: 10px; letter-spacing: 0.01em; } /***************************************** HEADER & NAV (flex w/ burger mobile menu!) ******************************************/ header { width: 100%; background: #f1efe8; box-shadow: 0 2px 10px 0 rgba(53,73,94,0.05); z-index: 99; position: relative; } header .container { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 10px; padding-bottom: 10px; } .logo img { height: 46px; width: auto; display: block; } nav { display: flex; align-items: center; gap: 22px; } nav a, .footer-menu a { color: #35495e; font-family: 'Montserrat', Arial, sans-serif; font-weight: 600; font-size: 1.07rem; padding: 7px 13px; border-radius: 10px; transition: background 0.14s, color 0.13s; } nav a:hover, .footer-menu a:hover { background: #dbeadb; color: #2a533e; } .cta-btn { background: #9cc3af; color: #35495e; font-family: 'Montserrat', Arial, sans-serif; font-weight: 700; font-size: 1.07rem; border: none; border-radius: 20px 20px 22px 18px/18px 28px 22px 16px; box-shadow: 0 2px 16px 0 rgba(156,195,175,0.10); padding: 13px 28px; cursor: pointer; margin-left: 13px; transition: background 0.18s, color 0.16s, box-shadow 0.16s; display: inline-block; } .cta-btn:hover, .cta-btn:focus { background: #7ba389; color: #fff; box-shadow: 0 6px 24px 0 rgba(80,96,90,0.08); } /********************** MOBILE NAVIGATION ***********************/ .mobile-menu-toggle { display: none; background: #9cc3af; color: #35495e; font-size: 2.1rem; border: none; padding: 7px 14px 7px 12px; border-radius: 18px; cursor: pointer; margin-left: 16px; transition: background 0.16s; z-index: 1200; } .mobile-menu-toggle:focus, .mobile-menu-toggle:hover { background: #527c5e; color: #fff; } .mobile-menu { position: fixed; top: 0; right: 0; left: 0; height: 100vh; width: 100vw; background: rgba(240,244,239,0.95); box-shadow: 0 6px 32px 0 rgba(53,73,94,0.18); transform: translateX(100%); transition: transform 0.29s cubic-bezier(0.765,0.045,0.23,1); z-index: 1200; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; padding: 0 0 0 0; } .mobile-menu.open { transform: translateX(0); } .mobile-menu-close { align-self: flex-end; font-size: 2.3rem; margin: 18px 22px 12px 0; background: none; color: #35495e; border: none; cursor: pointer; transition: color 0.17s; } .mobile-menu-close:hover, .mobile-menu-close:focus { color: #527c5e; } .mobile-nav { display: flex; flex-direction: column; align-items: flex-start; width: 100%; gap: 12px; padding-left: 32px; margin-top: 5px; } .mobile-nav a { color: #3a5f3a; font-family: 'Montserrat', Arial, sans-serif; font-size: 1.16rem; font-weight: 700; padding: 14px 0 14px 0; border-radius: 12px; width: 100%; display: block; transition: background 0.13s, color 0.13s; } .mobile-nav a:focus, .mobile-nav a:hover { background: #c3dac3; color: #315038; } /******************************************* MAIN: LISTS, DL, TABLES etc. ********************************************/ ul li, ol li, dl dt, dl dd { margin-bottom: 7.5px; } ul li { position: relative; } ul li > strong { color: #427d47; font-weight: 600; } .colors-green-list ul li:before, .section ul li:before { content: ''; display: inline-block; width: 9px; height: 9px; margin-right: 7px; background: #a8c9b2; border-radius: 60% 40% 70% 30% / 47% 41% 63% 53%; vertical-align: middle; } .section ul li img { width: 36px; height: 36px; margin-right: 9px; vertical-align: middle; background: #e8efe3; border-radius: 10px; padding: 2px; display: inline-block; } .section ul li span { vertical-align: middle; } dt { font-weight: 700; color: #2d4e32; margin-top: 16px; } dd { margin-left: 0; } /* Pricing Table */ .pricing-table { width: 100%; border-collapse: separate; border-spacing: 0; background: #f7f6f3; box-shadow: 0 1px 7px 0 rgba(53,73,94,0.06); border-radius: 18px; overflow: hidden; margin-bottom: 24px; } .pricing-table th, .pricing-table td { padding: 16px 14px; font-size: 1rem; text-align: left; } .pricing-table th { background: #e0e8dc; color: #35495e; font-family: 'Montserrat', Arial, sans-serif; font-weight: 700; } .pricing-table tbody tr { background: #f7f6f3; border-bottom: 1px solid #e7e9e1; } .pricing-table tbody tr:last-child { border-bottom: none; } .pricing-table td { color: #35495e; } /****************** FOOTER *******************/ footer { background: #f0f4ef; padding: 44px 0 16px 0; border-top-left-radius: 38px 18px; border-top-right-radius: 62px 32px; box-shadow: 0 -2px 16px 0 rgba(53,73,94,0.08); } footer .container { display: flex; flex-direction: column; gap: 22px; } .footer-menu { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 10px; } .footer-menu a { font-size: 1rem; padding: 6px 12px; } .contact-details { display: flex; flex-wrap: wrap; gap: 20px; font-size: 1rem; color: #2a533e; align-items: flex-start; } .contact-details p { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; margin-right: 16px; } .contact-details img { width: 17px; height: 17px; opacity: 0.8; } .legal-disclaimer { margin-top: 16px; color: #9a9586; font-size: 0.935rem; font-style: italic; text-align: left; } /***************** MAP PLACEHOLDER ******************/ .map-placeholder { background: #e0e8dc; border-radius: 14px; width: 100%; max-width: 380px; min-height: 130px; display: flex; align-items: center; justify-content: center; margin: 18px 0; } /************************* TESTIMONIALS **************************/ .testimonial-card blockquote { color: #2d4e32; font-size: 1.06rem; font-style: italic; line-height: 1.7; margin-bottom: 8px; background: none; border-left: none; padding: 0; } .testimonial-author { color: #6b8358; font-size: 0.99rem; font-weight: 700; } /***************** COOKIES BANNER *******************/ .cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2500; background: #426952; color: #fff; padding: 20px; font-size: 1rem; box-shadow: 0 -2px 22px 0 rgba(53,73,94,0.19); display: flex; flex-direction: column; gap: 14px; align-items: flex-start; transition: transform 0.26s cubic-bezier(0.77,0,0.18,1), opacity 0.19s; } .cookie-banner.hide { transform: translateY(100%); opacity: 0; pointer-events: none; } .cookie-banner .cookie-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 7px; } .cookie-banner button { font-family: 'Montserrat', Arial, sans-serif; font-size: 1rem; font-weight: 700; border-radius: 12px; border: none; padding: 9px 16px; cursor: pointer; transition: background 0.15s, color 0.15s; margin-right: 8px; } .cookie-banner .accept-btn { background: #9cc3af; color: #35495e; } .cookie-banner .accept-btn:hover { background: #619b7d; color: #fff; } .cookie-banner .reject-btn { background: #e9e5d9; color: #35495e; } .cookie-banner .reject-btn:hover { background: #dad8cc; color: #556252; } .cookie-banner .settings-btn { background: #fff; color: #426952; border: 1.5px solid #7ba389; } .cookie-banner .settings-btn:hover { background: #7ba389; color: #fff; } /************************** COOKIE MODAL ***************************/ .cookie-modal { position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 9999; background: rgba(47,66,54,0.35); display: flex; align-items: center; justify-content: center; pointer-events: auto; opacity: 1; transition: opacity 0.22s cubic-bezier(0.66, 0.04, 0.15, 0.99); } .cookie-modal.hide { opacity: 0; pointer-events: none; } .cookie-modal-content { background: #f5f3eb; color: #314738; border-radius: 24px; padding: 32px 26px 24px; max-width: 370px; width: 95%; box-shadow: 0 3px 54px 0 rgba(53,73,94,0.09); display: flex; flex-direction: column; gap: 18px; position: relative; margin: 0 auto; } .cookie-modal-content h3 { font-family: 'Montserrat', Arial, sans-serif; font-size: 1.19rem; } .cookie-category { display: flex; flex-direction: column; gap: 7px; margin-bottom: 8px; } .cookie-category label { display: flex; align-items: center; gap: 8px; color: #314738; font-size: 1rem; font-weight: 600; } .cookie-toggle { width: 36px; height: 20px; border-radius: 20px; background: #cde3d1; position: relative; transition: background 0.18s; margin-left: 5px; } .cookie-toggle[data-checked="true"] { background: #8cc08f; } .cookie-toggle::after { content: ""; display: block; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; background: #fff; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,0.06); transition: left 0.19s cubic-bezier(0.67,0,0.26,1); } .cookie-toggle[data-checked="true"]::after { left: 18px; } .cookie-modal-close { position: absolute; top: 16px; right: 16px; background: none; color: #2a533e; font-size: 1.75rem; border: none; cursor: pointer; transition: color 0.17s; z-index: 2; } .cookie-modal-close:hover { color: #6e9a72; } .cookie-modal-actions { display: flex; gap: 14px; margin-top: 10px; } .cookie-modal-actions button { font-family: 'Montserrat', Arial, sans-serif; font-size: 1rem; border-radius: 14px; border: none; padding: 8px 18px; font-weight: bold; cursor: pointer; transition: background 0.14s; } .cookie-modal-actions .save-btn { background: #9cc3af; color: #35495e; } .cookie-modal-actions .save-btn:hover { background: #7ba389; color: #fff; } .cookie-modal-actions .cancel-btn { background: #eeede7; color: #2a533e; border: 1.5px solid #9cc3af; } .cookie-modal-actions .cancel-btn:hover { background: #427d47; color:#fff; } /************************ UTILITIES *************************/ .gap-top { margin-top: 34px; } .gap-bottom { margin-bottom: 34px; } /************************* RESPONSIVE BREAKPOINTS **************************/ @media (max-width: 1200px) { .container { padding-left: 10px; padding-right: 10px; } .service-list, .team-list, .pricing-cards { gap: 18px; } } @media (max-width: 1020px) { nav, header .container { gap: 10px; } .contact-details, .footer-menu { gap: 10px; } } @media (max-width: 900px) { .container { max-width: 98vw; } .service-list, .team-list, .pricing-cards, .content-grid { gap: 14px; } .footer-menu { gap: 8px; } } @media (max-width: 768px) { h1 { font-size: 1.55rem; } h2 { font-size: 1.19rem; } header .container { flex-direction: row; gap: 5px; } nav { display: none; } .cta-btn { margin-left: 5px; font-size: 0.99rem; padding: 10px 18px; } .mobile-menu-toggle { display: block; } .section { padding: 30px 7px; margin-bottom: 35px; } .card-container, .service-list, .team-list, .pricing-cards, .content-grid { gap: 9px; } .testimonial-card, .team-card, .service-card, .pricing-card, .card { min-width: 0; padding: 14px 9px 12px; font-size: 0.99rem; } .testimonial-card, .team-card, .service-card { margin-bottom: 14px; } .content-wrapper { gap: 14px; } .text-image-section { flex-direction: column; gap: 18px; align-items: flex-start; } .card-content, .feature-item { gap: 7px; } footer .container, .footer-menu, .contact-details { gap: 10px; } .footer-menu { flex-direction: column; gap: 4px; } } @media (max-width: 540px) { .section { padding: 18px 3px; margin-bottom: 21px; } .container { padding: 3px; } .logo img { height: 38px; } .cta-btn { font-size: 0.93rem; padding: 9px 10px; } h1, h2 { margin-bottom: 9px; } h1 { font-size: 1.15rem; } .testimonial-card, .team-card, .service-card, .pricing-card, .card { font-size: 0.95rem; padding: 9px 5px 8px; } .pricing-table th, .pricing-table td { padding: 9px 5px; font-size: 0.98rem; } } /*********************** ACCESSIBLE FOCUS ************************/ a:focus, .cta-btn:focus, .mobile-menu-close:focus, .cookie-banner button:focus, .cookie-modal-close:focus, .cookie-modal-actions button:focus { outline: 2.5px dashed #9cc3af; outline-offset: 2px; } /******************************* MICRO-ANIMATIONS & INTERACTION ********************************/ a, .cta-btn, .card, .service-card, .team-card, .pricing-card, .mobile-menu-toggle, .mobile-menu-close, .footer-menu a, nav a, .cookie-banner button, .cookie-modal-actions button { transition: background 0.13s, color 0.13s, box-shadow 0.17s, transform 0.16s; } /* END OF STYLE.CSS */