/* SAUCENZAUBER SCANDINAVIAN CLEAN CSS - FLEXBOX ONLY */ /* ============================= CSS RESET & BASE STYLES ============================= */ 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; vertical-align: baseline; font-size: 100%; font: inherit; box-sizing: border-box; } html { font-size: 16px; min-height: 100%; background: #F7F3EE; } body { font-family: 'Roboto', Arial, Helvetica, sans-serif; color: #222; background: #F7F3EE; line-height: 1.6; min-height: 100vh; } img, picture, video, canvas, svg { display: inline-block; max-width: 100%; height: auto; } a { color: #356822; text-decoration: none; transition: color 0.18s; } a:hover, a:focus { color: #B64B1A; outline: none; } ul,ol { margin-left: 1.3em; } strong,b { font-weight: bold; } /* Font faces (Google Fonts should be imported in your HTML tag) */ /* ============================= TYPOGRAPHY ============================= */ h1, .h1 { font-family: 'Montserrat', Arial, Helvetica, sans-serif; font-size: 2.5rem; font-weight: 700; margin-bottom: 20px; color: #356822; } h2, .h2 { font-family: 'Montserrat', Arial, Helvetica, sans-serif; font-size: 2rem; font-weight: 600; margin-bottom: 16px; color: #356822; } h3, .h3 { font-family: 'Montserrat', Arial, Helvetica, sans-serif; font-size: 1.3rem; font-weight: 500; margin-bottom: 10px; color: #444; } h4, .h4 { font-family: 'Montserrat', Arial, Helvetica, sans-serif; font-size: 1.1rem; font-weight: 500; margin-bottom: 8px; } p { font-size: 1rem; margin-bottom: 12px; } .section { margin-bottom: 60px; padding: 40px 20px; } .container { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 14px; box-sizing: border-box; } /* ============================= HEADER & MAIN NAVIGATION ============================= */ header { background: #fff; box-shadow: 0 2px 8px 0 rgba(35,40,20,0.05); position: sticky; top: 0; z-index: 40; width: 100%; } header .container { display: flex; align-items: center; justify-content: space-between; padding: 18px 14px 18px 14px; } .logo img { height: 44px; } nav.main-nav { display: flex; align-items: center; gap: 26px; } nav.main-nav a { font-family: 'Montserrat', Arial, Helvetica, sans-serif; font-size: 1rem; font-weight: 500; color: #356822; padding: 6px 10px; border-radius: 7px; transition: background 0.15s, color 0.15s; } nav.main-nav a:hover, nav.main-nav a:focus { background: #F7F3EE; color: #B64B1A; } .mobile-menu-toggle { display: none; background: none; border: none; font-size: 2rem; line-height: 1; color: #356822; cursor: pointer; padding: 6px 10px; border-radius: 7px; transition: background 0.15s; } .mobile-menu-toggle:focus, .mobile-menu-toggle:hover { background: #e4e7e0; } /* Mobile menu overlay */ .mobile-menu { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(247,243,238,0.97); z-index: 100; transform: translateX(100%); transition: transform 0.35s cubic-bezier(.4,0,.2,1); display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; padding-top: 38px; padding-left: 24px; padding-right: 24px; } .mobile-menu.active { transform: translateX(0); } .mobile-menu-close { position: absolute; top: 22px; right: 36px; background: none; border: none; font-size: 2.1rem; color: #356822; cursor: pointer; padding: 6px; border-radius: 6px; z-index: 101; } .mobile-menu-close:focus, .mobile-menu-close:hover { background: #e4e7e0; } nav.mobile-nav { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; margin-top: 35px; } nav.mobile-nav a { font-family: 'Montserrat', Arial, Helvetica, sans-serif; font-size: 1.15rem; font-weight: 500; color: #356822; padding: 10px 0 10px 4px; border-radius: 7px; transition: background 0.15s, color 0.15s; } nav.mobile-nav a:focus, nav.mobile-nav a:hover { background: #e4e7e0; color: #B64B1A; } /* ============================= HERO & CALL TO ACTION ============================= */ .hero { background: #fff; border-radius: 0 0 22px 22px; box-shadow: 0 10px 28px 0 rgba(60,80,45,0.06); margin-bottom: 48px; padding-top: 36px; padding-bottom: 36px; } .hero .container { display: flex; flex-direction: column; align-items: flex-start; } .hero .content-wrapper { max-width: 530px; gap: 14px; } .cta, .cta.primary { display: inline-block; font-family: 'Montserrat', Arial, Helvetica, sans-serif; font-size: 1.13rem; font-weight: 600; border-radius: 8px; padding: 12px 34px; margin-top: 12px; transition: background 0.19s, color 0.19s, box-shadow 0.22s; cursor: pointer; border: none; background: #356822; color: #fff; box-shadow: 0 2px 8px 0 rgba(60,80,45,0.09); text-align: center; letter-spacing: 0.02em; } .cta.primary:focus, .cta.primary:hover, .cta:focus, .cta:hover { background: #B64B1A; color: #fff; } .cta:not(.primary) { background: #e7eed7; color: #356822; border: 1px solid #c4d3b2; margin-top: 10px; } .cta:not(.primary):focus, .cta:not(.primary):hover { background: #356822; color: #fff; } /* ============================= FLEXBOX CARDS AND GRID SECTIONS ============================= */ .card-container, .feature-grid, .seasonal-grid, .team-bios, .recipe-card-grid, .highlight-cards, .tips-grid { display: flex; flex-wrap: wrap; gap: 24px; justify-content: flex-start; } .card, .feature-grid > div, .team-member, .recipe-card, .highlight-card, .tips-grid > div { background: #fff; border-radius: 14px; box-shadow: 0 2px 12px 0 rgba(60,80,45,0.07); padding: 28px 26px 22px 26px; margin-bottom: 20px; position: relative; flex: 1 1 240px; min-width: 230px; transition: transform 0.16s, box-shadow 0.16s; } .card:hover, .feature-grid > div:hover, .team-member:hover, .recipe-card:hover, .highlight-card:hover, .tips-grid > div:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 6px 28px 0 rgba(60,80,45,0.16); } .feature-grid { gap: 24px; flex-wrap: wrap; margin-top: 30px; } .feature-grid > div { flex: 1 1 220px; min-width: 210px; align-items: flex-start; display: flex; flex-direction: column; gap: 15px; } .team-bios { gap: 24px; } .team-member { min-width: 200px; flex: 1 1 220px; display: flex; flex-direction: column; gap: 10px; text-align: left; background: #fafaf7; } .recipes-list .recipe-card-grid { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 24px; } .recipe-card { flex: 1 1 220px; min-width: 215px; } .highlight-cards { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 10px; } .highlight-card { flex: 1 1 300px; min-width: 240px; } .tips-grid { gap: 18px; } .tips-grid > div { flex: 1 1 185px; min-width: 185px; } /* ============================= LISTS, BADGES, TAGS, FILTERS ============================= */ .highlight-list { list-style: none; margin: 14px 0 18px 0; padding: 0; display: flex; flex-direction: column; gap: 16px; } .seasonal-badge { display: inline-block; background: #356822; color: #fff; font-family: 'Montserrat', Arial, Helvetica, sans-serif; font-size: 0.98rem; font-weight: 500; padding: 3px 12px; border-radius: 16px; margin-right: 12px; vertical-align: middle; } .filter-bar { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: center; background: #fff; border-radius: 12px; box-shadow: 0 2px 8px 0 rgba(60,80,45,0.07); padding: 20px 18px; margin: 14px 0 0 0; } .filter-bar input[type="text"] { padding: 7px 14px; font-size: 1rem; border: 1px solid #c4d3b2; border-radius: 8px; outline: none; font-family: 'Roboto', Arial, Helvetica, sans-serif; width: 215px; transition: border-color 0.15s; } .filter-bar input[type="text"]:focus { border-color: #356822; } .filter-tags, .ingredient-filters, .difficulty-selector { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .tag { display: inline-block; background: #e7eed7; color: #356822; font-family: 'Montserrat', Arial, Helvetica, sans-serif; font-size: 0.93rem; font-weight: 500; border-radius: 10px; padding: 2.7px 13px; margin-right: 2px; margin-bottom: 2px; vertical-align: middle; cursor: pointer; transition: background 0.14s, color 0.14s; } .tag:hover, .tag.selected { background: #356822; color: #fff; } .filter-bar strong { color: #444; font-weight: 600; margin-right: 8px; } /* ============================= TESTIMONIALS, REVIEWS ============================= */ .testimonials { background: #f3f9f2; border-radius: 12px; margin-bottom: 48px; } .testimonial-card { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; border-radius: 10px; background: #fff; box-shadow: 0 2px 14px 0 rgba(60,80,45,0.07); padding: 20px 18px 18px 22px; margin-bottom: 20px; } .testimonial-card p { color: #2c2b2a; font-size: 1.13rem; margin-bottom: 6px; } .testimonial-meta { font-size: 0.99rem; color: #888; font-family: 'Montserrat', Arial, Helvetica, sans-serif; font-style: italic; margin-left: 2px; } /* ============================= NEWSLETTER & NEWSLETTER SIGNUP ============================= */ .newsletter, .newsletter-signup { background: #f3f9f2; border-radius: 12px; padding: 34px 18px; margin-bottom: 26px; box-shadow: 0 2px 8px 0 rgba(60,80,45,0.04); text-align: left; } .newsletter-signup p { font-family: 'Montserrat', Arial, Helvetica, sans-serif; } /* ============================= ABOUT, TEAM, VALUE CARDS ============================= */ .brand-values ul { list-style: none; padding-left: 0; display: flex; flex-direction: column; gap: 14px; } .brand-values li { font-size: 1.08rem; color: #356822; font-family: 'Roboto', Arial, Helvetica, sans-serif; background: #e7eed7; border-radius: 8px; padding: 12px 14px; } /* ============================= CONTACT, FAQ, THANK YOU ============================= */ .contact-methods { list-style: none; padding: 0; margin-bottom: 26px; display: flex; flex-direction: column; gap: 10px; } .contact-methods li, .footer-contact span { display: flex; align-items: center; gap: 7px; color: #222; font-size: 1rem; } .map-placeholder { background: #f9f8f7; border: 1px dashed #c4d3b2; border-radius: 8px; padding: 25px 16px; text-align: center; color: #888; font-size: 1rem; } .faq-accordion { list-style: none; padding-left: 0; display: flex; flex-direction: column; gap: 18px; } .faq-accordion h3 { font-size: 1.08rem; margin-bottom: 7px; color: #356822; } .faq-accordion p { font-size: 1rem; } .navigation-links a { color: #356822; font-family: 'Montserrat', Arial, Helvetica, sans-serif; } .navigation-links a:hover { color: #B64B1A; text-decoration: underline; } /* ============================= LEGAL, HOW TO, ETC. ============================= */ .legal ul, .howto-guides { margin-left: 1.5em; margin-bottom: 16px; } .legal ul li, .howto-guides li { margin-bottom: 7px; } .legal strong { color: #356822; font-weight: 600; } /* ============================= FOOTER ============================= */ footer { background: #fff; box-shadow: 0 -2px 12px 0 rgba(60,80,45,0.03); padding: 38px 0 18px 0; } footer .container { display: flex; flex-direction: column; gap: 0; } footer .content-wrapper { display: flex; flex-wrap: wrap; gap: 34px 54px; align-items: flex-start; justify-content: space-between; } .footer-brand { display: flex; align-items: center; gap: 10px; font-family: 'Montserrat', Arial, Helvetica, sans-serif; font-size: 1rem; color: #356822; margin-bottom: 8px; } .footer-brand img { height: 34px; } .footer-links { display: flex; flex-direction: column; gap: 8px; min-width: 160px; } .footer-links a { color: #356822; font-family: 'Montserrat', Arial, Helvetica, sans-serif; font-size: 1rem; transition: color 0.15s; } .footer-links a:hover { color: #B64B1A; } .footer-contact { color: #222; font-size: 0.99rem; margin-bottom: 8px; min-width: 220px; } .footer-contact img { height: 18px; margin-right: 4px; } .footer-social { display: flex; align-items: center; gap: 13px; } .footer-social a img { height: 22px; transition: filter 0.18s; } .footer-social a:hover img { filter: brightness(0.7) sepia(0.3) hue-rotate(-30deg); } /* ============================= COOKIE BANNER AND MODAL ============================= */ .cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; background: #fff; border-top: 1.5px solid #c4d3b2; box-shadow: 0 -2px 12px 0 rgba(60,80,45,0.07); display: flex; align-items: center; justify-content: center; z-index: 2000; padding: 22px 14px 18px 14px; min-height: 60px; gap: 22px; animation: cookie-show 0.37s cubic-bezier(.38,1.2,.51,1) 1; } @keyframes cookie-show { from { transform: translateY(60px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .cookie-banner-message { font-size: 1rem; color: #2c2b2a; max-width: 600px; } .cookie-banner-actions { display: flex; gap: 16px; flex-wrap: wrap; } .cookie-btn { font-family: 'Montserrat', Arial, Helvetica, sans-serif; font-size: 1rem; font-weight: 500; border-radius: 7px; padding: 8px 18px; border: none; cursor: pointer; transition: background 0.15s, color 0.15s, box-shadow 0.18s; box-shadow: 0 1px 4px rgba(100,110,70,0.07); background: #e7eed7; color: #222; } .cookie-btn.accept { background: #356822; color: #fff; } .cookie-btn.reject { background: #B64B1A; color: #fff; } .cookie-btn.settings { background: #fff; color: #356822; border: 1px solid #c4d3b2; } .cookie-btn:focus, .cookie-btn:hover { box-shadow: 0 3px 12px rgba(100,110,70,0.11); background: #f7f3ee; color: #356822; } .cookie-btn.accept:focus, .cookie-btn.accept:hover { background: #215114; } .cookie-btn.reject:focus, .cookie-btn.reject:hover { background: #8d3711; } .cookie-modal-overlay { position: fixed; left: 0; top: 0; right: 0; bottom: 0; background: rgba(80,80,70,0.42); display: flex; align-items: center; justify-content: center; z-index: 3000; animation: cookie-modal-fade .24s ease-in; } @keyframes cookie-modal-fade { from { opacity: 0; } to { opacity: 1; } } .cookie-modal { background: #fff; border-radius: 12px; box-shadow: 0 8px 36px 0 rgba(60,60,50,0.22); max-width: 415px; width: 95vw; padding: 32px 24px 24px 24px; display: flex; flex-direction: column; gap: 22px; animation: cookie-modal-show .37s cubic-bezier(.44,1.5,.58,1); } @keyframes cookie-modal-show { from { transform: scale(.93); opacity: 0; } to { transform: scale(1); opacity: 1; } } .cookie-modal h2 { font-size: 1.45rem; color: #356822; font-family: 'Montserrat', Arial, Helvetica, sans-serif; margin-bottom: 6px; } .cookie-modal .modal-section { margin-bottom: 16px; display: flex; align-items: center; gap: 11px; } .cookie-toggle { appearance: none; width: 38px; height: 18px; background: #e7eed7; border-radius: 9px; position: relative; cursor: pointer; outline: none; border: 1px solid #c4d3b2; display: inline-block; transition: background 0.16s; } .cookie-toggle:checked { background: #356822; } .cookie-toggle:disabled { opacity: .55; cursor: not-allowed; } .cookie-toggle:before { content: ''; position: absolute; left: 3px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.08); transition: left 0.16s; } .cookie-toggle:checked:before { left: 21px; } .cookie-modal-actions { display: flex; gap: 18px; justify-content: flex-end; margin-top: 16px; } .cookie-modal .modal-label { font-size: 1.05rem; color: #222; font-family: 'Roboto', Arial, Helvetica, sans-serif; } .cookie-modal .modal-label.essential { color: #B64B1A; font-weight: 600; font-style: italic; } /* ============================= RESPONSIVE STYLES ============================= */ @media (max-width: 1100px) { .container { max-width: 96vw; } } @media (max-width: 980px) { .footer .content-wrapper, .card-container, .feature-grid, .highlight-cards, .seasonal-grid, .team-bios, .recipe-card-grid, .tips-grid { flex-wrap: wrap; gap: 14px 16px; } } @media (max-width: 900px) { footer .content-wrapper { gap: 12px 24px; } } @media (max-width: 768px) { header .container { flex-direction: row; gap: 0; padding: 14px 10px 14px 10px; } .main-nav { display: none; } .mobile-menu-toggle { display: block; } .section { padding: 28px 9px; } .content-wrapper { gap: 14px; } .feature-grid, .card-container, .seasonal-grid, .team-bios, .recipe-card-grid, .highlight-cards, .tips-grid { flex-direction: column; gap: 16px; } .feature-grid > div, .card, .team-member, .recipe-card, .highlight-card, .tips-grid > div { min-width: 0; width: 100%; flex: 1 1 99%; padding: 21px 12px 14px 12px; } .branding-section { flex-direction: column; align-items: flex-start; gap: 12px; } .footer-contact, .footer-links, .footer-brand, .footer-social { margin-bottom: 14px; } .footer .content-wrapper { gap: 16px; flex-direction: column; align-items: flex-start; } nav.mobile-nav { gap: 13px; margin-top: 20px; } } /* Stack text and images vertically on mobile */ .text-image-section { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; } @media (max-width: 768px) { .text-image-section { flex-direction: column; gap: 12px; align-items: stretch; } } /* Utility to prevent breaks/overlaps */ .section, .card, .feature-grid > div, .testimonial-card, .team-member, .highlight-card, .recipe-card { margin-bottom: 20px; } /* ============================= MICRO-INTERACTIONS & EFFECTS ============================= */ .card, .feature-grid > div, .team-member, .recipe-card, .highlight-card, .tips-grid > div, .testimonial-card { transition: box-shadow 0.18s, transform 0.16s; } .card:active, .feature-grid > div:active, .team-member:active, .recipe-card:active, .highlight-card:active, .testimonial-card:active { transform: scale(.98); } a.quick-view-link { font-size: 0.98rem; font-family: 'Montserrat', Arial, Helvetica, sans-serif; color: #B64B1A; text-decoration: underline; margin-top: 4px; } a.quick-view-link:hover { color: #356822; } /* Subtle shadow on focus for accessibility */ *:focus-visible { outline: 2px solid #356822; outline-offset: 2px; } /* ============================= CUSTOM SCROLLBAR (Modern Browsers) ============================= */ ::-webkit-scrollbar { width: 9px; background: #e7eed7; border-radius: 6px; } ::-webkit-scrollbar-thumb { background: #c4d3b2; border-radius: 6px; } /* ============================= END - SAUCENZAUBER CSS ============================= */