/* ===================== CSS RESET & NORMALIZATION ===================== */ 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, main, 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; } html { scroll-behavior: smooth; } body { line-height: 1.6; background-color: #FFF8F2; color: #483315; font-family: 'Roboto', Arial, sans-serif; min-height: 100vh; } img { max-width: 100%; height: auto; border: 0; } ul, ol { list-style: none; } a { color: inherit; text-decoration: none; transition: color 0.2s; } button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; background: none; border: none; } button { cursor: pointer; } table { border-collapse: collapse; width: 100%; } th, td { padding: 10px 16px; text-align: left; } /* ===================== VINTAGE RETRO DESIGN THEME ===================== */ :root { --primary: #365946; --primary-dark: #2a4636; --secondary: #A36A36; --secondary-dark: #81511d; --accent: #F6EAE5; --cream-bg: #FFF8F2; --paper-bg: #F5E2CD; --brown: #7B5C36; --retro-red: #BF3326; --retro-gold: #FFD392; --retro-blue: #5B7F95; --gray: #868686; --white: #fff; --black: #26221c; } /* Import Google Fonts manually in in production @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700;900&family=Roboto:wght@400;500;700&display=swap'); */ body { font-family: 'Roboto', Arial, sans-serif; background: var(--cream-bg); color: var(--brown); font-size: 16px; letter-spacing: 0.2px; } h1, h2, h3, h4, h5, h6 { font-family: 'Montserrat', Arial, sans-serif; color: var(--primary); font-weight: 700; text-shadow: 1px 1px 0 var(--retro-gold), 0px 2px 2px rgba(54,89,70,0.07); } h1 {font-size: 2.5rem; margin-bottom: 16px;} h2 {font-size: 2rem; margin-bottom: 14px;} h3 {font-size: 1.2rem; margin-bottom: 8px;} h4, h5, h6 {font-size: 1rem; margin-bottom: 6px;} p, li, table, label, input { font-size: 1rem; } strong { font-weight: 700; color: var(--secondary-dark); } .container { max-width: 1080px; margin: 0 auto; padding: 0 20px; } .content-wrapper { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; } .text-section { display: flex; flex-direction: column; gap: 10px; } .section, section { margin-bottom: 60px; padding: 40px 20px; border-radius: 20px; background: var(--paper-bg); box-shadow: 0 2px 20px 0 rgba(54,89,70,0.10), 0 1.5px 6px 0 rgba(163,106,54,0.07); position: relative; } /********* RETRO PATTERNS *********/ section.hero { background: var(--accent); box-shadow: 0 2px 12px 0 rgba(163,106,54,0.13); border: 3px solid var(--retro-gold); border-radius: 34px 34px 18px 18px; margin-bottom: 48px; min-height: 250px; } section.cta { background: var(--retro-gold); border-radius: 20px; border: 2px dashed var(--secondary); text-align: center; } /******* HEADER & NAV *********/ header { background: var(--accent); border-bottom: 4px double var(--secondary); box-shadow: 0 2px 8px 0 rgba(54,89,70,0.09); position: relative; z-index: 100; } header nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; min-height: 60px; padding: 12px 0 8px 0; } header nav img { height: 48px; width: auto; } header nav ul { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; } header nav ul li { margin: 0; } header nav ul li a { font-family: 'Montserrat', Arial, sans-serif; letter-spacing: 1.2px; font-weight: 700; font-size: 1rem; padding: 7px 15px; border-radius: 9px; color: var(--primary-dark); transition: background 0.18s, color 0.18s; } header nav ul li a:hover, header nav ul li a:focus { background: var(--retro-gold); color: var(--retro-red); } .cta-btn { background: var(--secondary); color: var(--white); font-family: 'Montserrat', Arial, sans-serif; font-size: 1.05rem; border: 2px solid var(--primary-dark); border-radius: 12px; padding: 10px 26px 10px 18px; margin-left: 12px; margin-top: 6px; font-weight: 700; box-shadow: 0 2px 12px rgba(163,106,54,0.11); letter-spacing: 1.1px; text-shadow: 0 1px 0 var(--primary-dark); position: relative; transition: background 0.18s, color 0.18s, box-shadow 0.15s; } .cta-btn:hover, .cta-btn:focus { background: var(--primary); color: var(--retro-gold); box-shadow: 0 4px 24px 0 rgba(54,89,70,0.18); } /******* MOBILE NAVIGATION ******/ .mobile-menu-toggle { display: none; background: var(--secondary); color: var(--accent); font-size: 2rem; border-radius: 8px; padding: 8px 14px; border: 2px solid var(--primary-dark); align-self: center; margin-left: auto; transition: background 0.2s, color 0.2s; z-index: 999; } .mobile-menu-toggle:hover, .mobile-menu-toggle:focus {background: var(--retro-red); color: var(--white);} .mobile-menu { position: fixed; top: 0; right: 0; height: 100vh; width: 320px; background: var(--paper-bg); box-shadow: -6px 0 32px rgba(54,89,70,0.12); z-index: 2001; transform: translateX(100%); transition: transform 0.37s cubic-bezier(.4,1.45,.51,1), box-shadow 0.3s; display: flex; flex-direction: column; padding: 36px 14px 14px 30px; gap: 33px; } .mobile-menu.open { transform: translateX(0); box-shadow: -8px 0 42px rgba(54,89,70,0.15); } .mobile-menu-close { align-self: flex-end; background: var(--retro-red); color: var(--white); font-size: 2.2rem; border-radius: 8px; border: 2px solid var(--secondary-dark); padding: 3px 14px; margin-bottom: 12px; transition: background 0.18s, color 0.18s; } .mobile-menu-close:hover, .mobile-menu-close:focus {background: var(--secondary); color: var(--retro-gold);} .mobile-nav { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; } .mobile-nav a { font-family: 'Montserrat', Arial, sans-serif; font-size: 1.15rem; font-weight: 700; color: var(--primary-dark); padding: 11px 7px; min-width: 185px; border-radius: 9px; transition: background 0.16s, color 0.18s; } .mobile-nav a:hover, .mobile-nav a:focus { background: var(--retro-blue); color: var(--accent); } @media (max-width: 1020px) { header nav ul, header nav .cta-btn { display: none; } .mobile-menu-toggle { display: block; } } @media (min-width: 1021px) { .mobile-menu, .mobile-menu-toggle { display: none !important; } } /********* FOOTER *********/ footer { background: var(--accent); border-top: 3.5px double var(--primary-dark); box-shadow: 0 -2px 8px 0 rgba(54,89,70,0.07); padding: 32px 0 18px 0; } footer .content-wrapper { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; justify-content: space-between; } footer nav { display: flex; flex-wrap: wrap; gap: 13px; font-size: 0.96rem; } footer nav a { color: var(--secondary-dark); font-weight: 700; padding: 5px 13px; border-radius: 6px; transition: background 0.19s, color 0.19s; } footer nav a:hover, footer nav a:focus { background: var(--retro-gold); color: var(--primary-dark); } footer p { font-size: 0.89rem; } /********* DEFAULT FLEXBOX SPACING PATTERNS *********/ .section {margin-bottom: 60px; padding: 40px 20px;} .card-container {display: flex; flex-wrap: wrap; gap: 24px;} .card {margin-bottom: 20px; position: relative; background: var(--accent); border-radius: 16px; box-shadow: 0 1.5px 14px 0 rgba(163,106,54,0.13);} .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: var(--accent); border-radius: 15px; margin-bottom: 20px; box-shadow: 0 1.5px 10px 0 rgba(163,106,54,0.13); color: var(--primary-dark);} .feature-item {display: flex; flex-direction: column; align-items: flex-start; gap: 15px;} /************ PAGE SPECIFIC FLEX LAYOUTS ************/ .features ul, .team ul, .services-section ul, .recipes-list ul, .regions-section ul, .regional-tips ul, .best-tips ul, .values ul, .faq-accordion, .service-overview-grid, .country-card-grid { display: flex; flex-wrap: wrap; gap: 20px 32px; margin-top: 9px; } .features ul li, .services-section ul li, .recipes-list ul li, .values ul li, .team ul li, .country-card-grid li, .region-tabs button, .service-overview-grid li { background: var(--accent); border-radius: 13px; box-shadow: 0 1.5px 9px 0 rgba(163,106,54,0.11); padding: 17px 20px; min-width: 250px; margin-bottom: 20px; font-size: 1.05rem; font-family: 'Roboto', Arial, sans-serif; color: var(--primary-dark); transition: box-shadow 0.18s, transform 0.13s; } .features ul li img { height: 28px; margin-right: 12px; vertical-align: middle; display: inline-block; } .features ul li:hover, .team ul li:hover, .service-overview-grid li:hover, .country-card-grid li:hover { box-shadow: 0 4px 22px 0 rgba(163,106,54,0.15); transform: translateY(-4px) scale(1.022); } .region-tabs { display: flex; flex-wrap: wrap; gap: 11px; margin-bottom: 17px; } .region-tabs button { border: 2px solid var(--secondary-dark); background: var(--retro-gold); color: var(--brown); font-family: 'Montserrat', Arial, sans-serif; padding: 7px 19px; border-radius: 10px; margin-bottom: 0; font-weight: 700; font-size: 1.11rem; cursor: pointer; transition: background 0.19s, color 0.19s, border 0.13s; } .region-tabs button:hover, .region-tabs button:focus { background: var(--secondary); color: var(--retro-gold); border-color: var(--primary-dark); } /******* FILTERS & BUTTONS *******/ .filters-section .filters { display: flex; flex-direction: column; gap: 17px; margin-top: 10px; } .filters label { font-weight: 700; color: var(--secondary-dark); font-size: 1.02rem; margin-bottom: 1px; } #search-bar { border: 1.8px solid var(--secondary-dark); border-radius: 8px; background: var(--white); padding: 8px 14px; font-size: 1.07rem; width: 100%; margin-bottom: 7px; outline: none; transition: border 0.19s; } #search-bar:focus { border-color: var(--primary); } .filters button { background: var(--retro-blue); color: var(--white); border: 2px solid var(--secondary-dark); border-radius: 8px; padding: 7px 16px; font-family: 'Montserrat', Arial, sans-serif; font-weight: 700; font-size: 0.97rem; margin-right: 9px; margin-top: 7px; transition: background 0.13s, color 0.13s, border 0.17s; } .filters button:hover, .filters button:focus { background: var(--secondary); color: var(--retro-gold); border-color: var(--primary-dark); } /****** FAQ ACCORDION *******/ .faq-accordion { display: flex; flex-direction: column; gap: 19px; } .faq-accordion div { background: var(--accent); border-radius: 12px; padding: 14px 20px; color: var(--primary-dark); box-shadow: 0 1.5px 10px 0 rgba(163,106,54,0.09); transition: box-shadow 0.20s,transform 0.13s; } .faq-accordion div:hover { box-shadow: 0 4px 17px 0 rgba(163,106,54,0.14); transform: translateY(-2px); } /******* TABLES / PRICING ******/ .pricing table { background: var(--white); border-radius: 15px; overflow: hidden; width: 100%; box-shadow: 0 1.5px 14px 0 rgba(163,106,54,0.09); } .pricing th { background: var(--primary); color: var(--accent); font-size: 1.08rem; font-family: 'Montserrat', Arial, sans-serif; letter-spacing: 0.7px; font-weight: 900; } .pricing td { border-top: 1.5px dotted var(--retro-gold); } .pricing tr:nth-child(even) td { background: var(--paper-bg); } /******* TESTIMONIALS *******/ .testimonials { background: var(--accent); border-radius: 19px; } .testimonial-card { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; background: var(--white); color: var(--primary-dark); border: 2px solid var(--retro-gold); box-shadow: 0 2px 13px 0 rgba(54,89,70,0.12); margin-bottom: 20px; padding: 20px 26px; border-radius: 16px; font-style: italic; } .testimonial-card blockquote { font-size: 1.15rem; font-family: 'Montserrat', Arial, sans-serif; line-height: 1.4; color: var(--secondary-dark); } .testimonial-card p { font-weight: 700; color: var(--primary-dark); font-style: normal; margin-left: 18px; font-size: 1rem; } /****** THANK YOU SECTION ******/ .thank-you-section .cta-btn { margin-top: 24px; display: inline-block; } /****** ADDRESS/CONTACT DETAILS ******/ .contact-details ul, .address-section .text-section { display: flex; flex-direction: column; gap: 14px; } .contact-details a, .address-section a { text-decoration: underline; color: var(--retro-red); transition: color 0.14s; } .contact-details a:hover, .address-section a:hover { color: var(--primary); text-decoration: none; } /******* LEGAL/TEXT-PAGES ******/ .text-section ul, .text-section ol { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; margin-left: 0; } .text-section a { text-decoration: underline; color: var(--secondary-dark); transition: color 0.13s; } .text-section a:hover, .text-section a:focus { color: var(--primary-dark); } /********* MODALS, ANIMATIONS, MICRO-INTERACTIONS *********/ @keyframes slideInUpRetro { from {transform: translateY(90px); opacity: 0;} to {transform: translateY(0); opacity: 1;} } @keyframes slideInDownRetro { from {transform: translateY(-80px);opacity: 0;} to {transform: translateY(0);opacity: 1;} } @keyframes fadeInRetro { from {opacity: 0;} to {opacity: 1;} } /********* COOKIE CONSENT BANNER *******/ .cookie-consent-banner { position: fixed; bottom: 0; left: 0; z-index: 3000; width: 100vw; background: var(--retro-gold); box-shadow: 0 -2px 16px 0 rgba(54,89,70,0.18); color: var(--primary-dark); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 20px 40px; padding: 22px 20px; font-family: 'Roboto', Arial, sans-serif; font-size: 1rem; animation: slideInUpRetro 0.6s cubic-bezier(.51,1.22,.56,1) 0.05s both; box-sizing: border-box; } .cookie-consent-banner p { flex: 1 1 220px; margin-bottom: 0; color: var(--primary-dark); } .cookie-btn { background: var(--primary); color: var(--retro-gold); border: 1.9px solid var(--secondary-dark); border-radius: 7px; padding: 8px 22px; margin-left: 10px; font-size: 1rem; font-weight: 700; font-family: 'Montserrat', Arial, sans-serif; transition: background 0.13s, color 0.13s, border 0.12s; } .cookie-btn:hover, .cookie-btn:focus { background: var(--retro-red); color: var(--retro-gold); border-color: var(--primary); } .cookie-btn-secondary { background: var(--retro-blue); color: var(--white); margin-left: 8px; border: 1.9px solid var(--secondary-dark); } .cookie-btn-secondary:hover, .cookie-btn-secondary:focus { background: var(--primary); color: var(--retro-gold); } .cookie-btn-tertiary { background: transparent; color: var(--primary-dark); margin-left: 8px; border: none; text-decoration: underline; font-weight: 600; } .cookie-btn-tertiary:hover, .cookie-btn-tertiary:focus { color: var(--retro-red); } /********* COOKIE SETTINGS MODAL (hidden by default) ********/ .cookie-modal { position: fixed; left: 50%; top: 50%; z-index: 3500; transform: translate(-50%,-50%) scale(0.97); width: 98vw; max-width: 440px; background: var(--paper-bg); border: 2.8px solid var(--secondary-dark); border-radius: 20px; box-shadow: 0 2px 40px 0 rgba(163,106,54,0.19); padding: 32px 26px; display: flex; flex-direction: column; gap: 18px; animation: fadeInRetro 0.3s cubic-bezier(.38,.85,.53,1) 0.02s both; } .cookie-modal h2 { font-size: 1.31rem; margin-bottom: 8px; } .cookie-modal .cookie-categories { display: flex; flex-direction: column; gap: 15px; margin: 12px 0 12px 0; } .cookie-category { display: flex; align-items: center; gap: 14px; } .cookie-category input[type='checkbox'] { accent-color: var(--primary); width: 20px; height: 20px; border-radius: 6px; border: 2px solid var(--secondary-dark); } .cookie-category span { font-size: 1rem; font-weight: 500; } .cookie-category .category-essential { font-weight: 700; color: var(--secondary-dark); } .cookie-modal .modal-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; margin-top: 10px; } .cookie-modal-close { position: absolute; top: 18px; right: 22px; font-size: 1.9rem; color: var(--retro-red); background: transparent; border: none; cursor: pointer; z-index: 3550; transition: color 0.12s; } .cookie-modal-close:hover {color: var(--secondary-dark);} /******* CARD / GRID LAYOUTS ******/ .country-card-grid, .service-overview-grid { display: flex; flex-wrap: wrap; gap: 24px; } .service-overview-grid li, .country-card-grid li { background: var(--accent); border-radius: 14px; box-shadow: 0 1.5px 10px 0 rgba(163,106,54,0.11); padding: 18px 22px; min-width: 255px; color: var(--primary-dark); margin-bottom: 20px; transition: box-shadow 0.18s, transform 0.13s; } .service-overview-grid li:hover, .country-card-grid li:hover { box-shadow: 0 5px 22px 0 rgba(163,106,54,0.13); transform: translateY(-6px) scale(1.03); } /********** MISC ELEMENTS ************/ blockquote { border-left: 4.7px solid var(--secondary); padding-left: 12px; margin: 8px 0 6px 0; font-style: italic; color: var(--secondary-dark); } /******* RESPONSIVE DESIGN *******/ @media (max-width: 900px) { .container { max-width: 97vw; padding: 0 12px; } .content-wrapper { gap: 18px; } .section, section { padding: 29px 8px; } footer .content-wrapper { flex-direction: column; align-items: flex-start; gap: 14px; } } @media (max-width: 768px) { h1 {font-size: 1.6rem;} h2 {font-size: 1.27rem;} h3 {font-size: 1.09rem;} .container {padding: 0 6px;} section, .section {padding: 17px 2px; margin-bottom: 32px;} .card, .service-overview-grid li, .country-card-grid li, .features ul li, .team ul li { min-width: 90vw; padding: 14px 8px; font-size: 0.99rem; } .content-wrapper, .card-container, .country-card-grid, .service-overview-grid, .features ul, .team ul, .values ul, .faq-accordion, .recipes-list ul, .regions-section ul { flex-direction: column !important; gap: 12px !important; } .testimonial-card {padding: 16px 9px;} .region-tabs {gap: 9px;} .region-tabs button {padding: 5px 10px; font-size: 0.98rem;} .mobile-menu {width: 99vw !important; padding: 30px 7px 9px 14px;} } @media (max-width: 480px) { h1 {font-size: 1.07rem;} h2 {font-size: 0.97rem;} h3 {font-size: 0.95rem;} .cookie-consent-banner { flex-direction: column; gap: 10px; padding: 16px 6px; font-size: 0.97rem; } .cookie-modal {padding: 14px 5px;} } /* Ensure visual separation and avoid element overlap */ .section + .section, section + section {margin-top: 32px;} /***** SUBTLE RETRO EFFECTS *****/ .features ul li, .service-overview-grid li, .country-card-grid li, .testimonial-card { border: 2.4px solid var(--retro-gold); background: repeating-linear-gradient(135deg, #FFF8F2 0px, #FFF8F2 9px, #F5E2CD 13px, #F5E2CD 22px); } /***** SCROLLBAR STYLING *****/ body::-webkit-scrollbar {width: 10px;background:var(--cream-bg);} body::-webkit-scrollbar-thumb {background: var(--retro-gold);border-radius:6px;} body::-webkit-scrollbar-thumb:hover {background: var(--secondary-dark);} /***** MICRO-INTERACTIONS ******/ a, button, .cta-btn, .region-tabs button, .filters button { transition: background 0.17s, color 0.17s, box-shadow 0.18s, border 0.17s, transform 0.12s; } a:focus, button:focus, .cta-btn:focus {outline: 2.2px dashed var(--retro-blue); outline-offset: 2px;} /***** Z-INDEX LAYER MANAGEMENT *****/ header, .mobile-menu, .cookie-modal, .cookie-consent-banner {z-index: 2000;} /***** PRINT IMPROVEMENTS *****/ @media print { header, footer, .mobile-menu, .cookie-consent-banner, .cookie-modal {display: none !important;} section, .section {box-shadow: none !important; border: none !important; background: var(--white)!important;} }