/* CSS RESET & BASE TYPOGRAPHY ----------------------------------*/ html { box-sizing: border-box; font-size: 16px; scroll-behavior: smooth; } *, *::before, *::after { box-sizing: inherit; margin: 0; padding: 0; border: 0; } body { font-family: 'Open Sans', Arial, Helvetica, sans-serif; background-color: #F8F7F3; color: #2E3D25; min-height: 100vh; line-height: 1.65; font-size: 1rem; letter-spacing: 0.02em; overflow-x: hidden; } img, svg { max-width: 100%; height: auto; vertical-align: middle; } button, input, textarea, select { font: inherit; } a { color: inherit; text-decoration: none; transition: color 0.2s; } strong { font-weight: 700; } ul, ol { list-style: none; } table { border-collapse: collapse; width: 100%; } th, td { padding: 10px 12px; } /* NATURE/ORGANIC PALETTE ----------------------------------------*/ :root { --primary: #203D5A; /* dark blue from brand */ --secondary: #77A1C5; /* light blue from brand */ --accent: #FAFAFA; /* very light/white */ --organic-green: #657930; --organic-brown: #A99B87; --earth-cream: #F8F7F3; --earth-tan: #E0DDD2; --deep-forest: #2E3D25; --button-bg: #77A1C5; --button-text: #203D5A; --card-bg: #fff; --testimonial-bg: #F2F6F2; --shadow-md: 0 3px 12px 0 rgba(44,58,37,0.07); --radius-lg: 28px; --radius-md: 18px; --radius-sm: 10px; } /* FONT IMPORTS (for CDN, but ensure these appear in ) */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&family=Open+Sans:wght@400;600;700&display=swap'); h1, h2, h3, h4, h5, h6 { font-family: 'Montserrat', Arial, Helvetica, sans-serif; color: var(--primary); font-weight: 700; margin-bottom: 16px; letter-spacing: 0.01em; } h1 { font-size: 2.25rem; margin-bottom: 20px; line-height: 1.15; } h2 { font-size: 1.5rem; margin-bottom: 18px; } h3 { font-size: 1.2rem; margin-bottom: 12px; } .subheadline { font-family: 'Open Sans', Arial, sans-serif; color: var(--organic-green); font-size: 1.13rem; margin-bottom: 18px; } p, li, td, th { font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-size: 1rem; color: var(--deep-forest); } /* LAYOUT -------------------------------------------------------*/ .container { width: 100%; max-width: 1200px; padding-left: 20px; padding-right: 20px; margin-left: auto; margin-right: auto; } .content-wrapper { display: flex; flex-direction: column; gap: 20px; } .section { margin-bottom: 60px; padding: 40px 20px; background: none; } /* Cards and Grids */ .card-container, .feature-grid, .trip-ideas-grid { display: flex; flex-wrap: wrap; gap: 24px; margin-bottom: 8px; } .card, .feature-grid li, .trip-ideas-grid li { margin-bottom: 20px; position: relative; background: var(--card-bg); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 24px 18px 22px 18px; flex: 1 1 220px; transition: box-shadow 0.16s, transform 0.18s; } .card:hover, .feature-grid li:hover, .trip-ideas-grid li:hover { box-shadow: 0 7px 24px 0 rgba(80,120,63,0.13); transform: translateY(-2px) scale(1.01); } .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; } .text-section { margin: 12px 0 8px 0; } /* SPACING RULES -----------------------------------------------*/ .section > .container { padding: 0; } ul:not(.main-nav):not(.footer-nav):not(.suitability-tags):not(.brand-values), ol:not(.suitability-tags):not(.brand-values) { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; } ul li, ol li { margin-left: 0; position: relative; } ul li:before, ol li:before { display: none; } /* HEADER ------------------------------------------------------*/ header { background: linear-gradient(100deg, var(--earth-cream) 85%, #EAF1E4 100%); border-bottom: 2px solid var(--organic-brown); position: sticky; top: 0; z-index: 100; } header .container { min-height: 74px; } header .content-wrapper { flex-direction: row; align-items: center; justify-content: space-between; gap: 32px; } header img { height: 44px; margin: 8px 0; } .main-nav { display: flex; gap: 24px; align-items: center; } .main-nav a { font-family: 'Montserrat', Arial, sans-serif; font-weight: 600; font-size: 1rem; color: var(--deep-forest); padding: 8px 12px; border-radius: var(--radius-md); transition: background 0.16s, color 0.15s; } .main-nav a:hover, .main-nav a:focus { background: var(--earth-tan); color: var(--organic-green); } .cta-button { display: inline-block; background: var(--organic-green); color: #fff; font-family: 'Montserrat', Arial, sans-serif; font-size: 1.11rem; font-weight: 700; border-radius: 32px; padding: 11px 32px; box-shadow: 0 4px 12px 0 rgba(102,120,63,0.11); letter-spacing: 0.02em; text-align: center; cursor: pointer; outline: none; transition: background 0.17s, transform 0.15s, box-shadow 0.18s; } .cta-button:hover, .cta-button:focus { background: var(--primary); color: #fff; transform: translateY(-1px) scale(1.03); box-shadow: 0 8px 22px rgba(52,86,56,0.13); } /* MOBILE MENU -------------------------------------------------*/ .mobile-menu-toggle { display: none; background: var(--organic-green); color: #fff; font-size: 2.2rem; border-radius: 50%; width: 46px; height: 46px; align-items: center; justify-content: center; position: absolute; right: 20px; top: 17px; z-index: 210; cursor: pointer; border: none; transition: background 0.16s, color 0.12s; } .mobile-menu-toggle:focus, .mobile-menu-toggle:hover { background: var(--primary); color: #FAFAF2; } .mobile-menu { position: fixed; left: 0; top: 0; height: 100vh; width: 100vw; background: rgba(44, 69, 35, 0.98); color: #fff; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 0; padding-top: 36px; padding-left: 24px; z-index: 220; transform: translateX(-100vw); transition: transform 0.35s cubic-bezier(.51,.24,.14,1.07); box-shadow: 0 18px 40px 0 rgba(33, 60, 25, 0.25); visibility: hidden; opacity: 0; } .mobile-menu.active { transform: translateX(0); visibility: visible; opacity: 1; } .mobile-menu-close { background: none; border: none; font-size: 2rem; color: #fff; position: absolute; top: 18px; right: 24px; cursor: pointer; z-index: 223; transition: color 0.16s; } .mobile-menu-close:hover, .mobile-menu-close:focus { color: #BBDD8C; } .mobile-nav { display: flex; flex-direction: column; gap: 24px; margin-top: 26px; width: 100%; } .mobile-nav a { color: #F9FCEA; padding: 14px 0; font-size: 1.15rem; font-family: 'Montserrat', Arial, sans-serif; font-weight: 600; border-radius: var(--radius-md); transition: background 0.17s, color 0.13s; } .mobile-nav a:active, .mobile-nav a:focus, .mobile-nav a:hover { background: #4C7C52; color: #fff; } @media (max-width: 1024px) { .main-nav { gap: 14px; } header .content-wrapper { gap: 12px; } } @media (max-width: 900px) { .main-nav { display: none; } .mobile-menu-toggle { display: flex; } } @media (max-width: 480px) { header img { height: 36px; } } @media (max-width: 768px) { .mobile-menu-toggle { top: 7px; } } /* MAIN CONTENT / SECTIONS --------------------------------------*/ main { min-height: 60vh; } section { border-radius: var(--radius-lg); background: none; margin-bottom: 60px; } .section { background: var(--earth-tan); border-radius: var(--radius-lg); margin-bottom: 60px; padding: 40px 20px; } .text-image-section { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; } @media (max-width: 768px) { .text-image-section { flex-direction: column; align-items: flex-start; } .content-wrapper { gap: 16px; } } .content-wrapper { gap: 24px; } .feature-grid { display: flex; flex-wrap: wrap; gap: 24px; margin-bottom: 14px; } .feature-grid li { background: var(--card-bg); border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: 24px 13px 20px 13px; flex: 1 1 220px; min-width: 210px; max-width: 280px; display: flex; flex-direction: column; align-items: flex-start; gap: 11px; transition: box-shadow 0.13s, transform 0.15s; } .feature-grid li:hover { box-shadow: 0 8px 22px 0 rgba(80, 120, 63, 0.13); transform: translateY(-2px); } .feature-grid img { height: 32px; width: 32px; margin-bottom: 7px; } .service-list { display: flex; flex-direction: column; gap: 24px; } .service-list li { background: var(--earth-tan); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); padding: 20px 15px; margin-bottom: 8px; transition: box-shadow 0.13s; } .service-list li h3 span { font-size: 1rem; font-family: 'Open Sans'; color: var(--organic-green); font-weight: 600; margin-left: 12px; } .brand-values, .suitability-tags { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 16px; } .brand-values li, .suitability-tags li { font-family: 'Open Sans', Arial, sans-serif; font-size: 0.96rem; background: #F1F7F2; border-radius: var(--radius-sm); padding: 7px 17px; color: var(--organic-green); } .trip-ideas-grid { display: flex; flex-wrap: wrap; gap: 24px; margin-bottom: 32px; } .trip-ideas-grid li { background: var(--card-bg); border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: 24px 17px 16px 17px; flex: 1 1 220px; min-width: 210px; max-width: 320px; transition: box-shadow 0.18s; } @media (max-width: 900px) { .feature-grid, .trip-ideas-grid, .card-container, .content-grid { flex-direction: column; gap: 20px; } } /* TABLES ------------------------------------------------------*/ table { width: 100%; margin: 10px 0 22px 0; background: #fff; border-radius: var(--radius-sm); box-shadow: 0 2px 11px rgba(80,110,61,0.04); overflow: hidden; } th { background: var(--organic-brown); color: #fff; font-weight: 600; padding: 12px; } td { background: var(--accent); color: var(--deep-forest); padding: 10px 13px; text-align: center; } tr:nth-child(even) td { background: #F3F4F2; } /* TESTIMONIAL/OPINION CARDS -----------------------------------*/ .testimonial-card { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding: 28px 24px 18px 24px; margin-bottom: 22px; background: var(--testimonial-bg); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); border-left: 5px solid var(--organic-green); } .testimonial-card p { margin: 0; font-size: 1.13rem; color: var(--primary); } .testimonial-card .stars { color: #FFD965; font-size: 1.3rem; letter-spacing: 0.1em; margin-bottom: 0px; } @media (max-width: 600px) { .testimonial-card { padding: 16px 12px 12px 12px; } } /* BUTTONS & LINKS ---------------------------------------------*/ button, .cta-button, .mobile-menu-toggle, .mobile-menu-close { cursor: pointer; outline: none; border: none; font-family: inherit; transition: background 0.18s, color 0.13s, transform 0.16s; } button:focus, .cta-button:focus { outline: 2px solid var(--organic-green); outline-offset: 2px; } /* LINKS UNDER TEXTS -------------------------------------------*/ a { transition: color 0.18s, text-decoration 0.18s; } a:hover, a:focus { color: var(--organic-green); text-decoration: underline; } .footer-nav { display: flex; gap: 22px; flex-wrap: wrap; margin-bottom: 8px; } .footer-nav a { font-size: 0.98rem; color: var(--primary); font-family: 'Open Sans', Arial, sans-serif; } .footer-nav a:hover { color: var(--organic-green); } footer { background: #F6F5F2; padding: 40px 0 18px 0; border-top: 2px solid var(--organic-brown); } footer .container { min-height: 60px; } footer .content-wrapper { flex-direction: column; gap: 12px; align-items: flex-start; } footer p { color: var(--organic-brown); font-size: 0.98rem; } /* CONTACT INFO / THANK YOU -----------------------------------*/ .contact-info { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; } .contact-info a { color: var(--organic-green); font-weight: 600; } /* RESPONSIVE ADJUSTMENTS -------------------------------------*/ @media (max-width: 1024px) { .container { max-width: 97vw; } .content-wrapper { gap: 18px; } .section { padding: 30px 8px; } .main-nav a { font-size: 0.97rem; } } @media (max-width: 820px) { h1 { font-size: 1.55rem; } .footer-nav { gap: 12px; } } @media (max-width: 630px) { .section { padding: 22px 3vw; } h2 { font-size: 1.18rem; } } @media (max-width: 500px) { h1 { font-size: 1.125rem; } .card, .feature-grid li, .trip-ideas-grid li { padding: 15px 8px 12px 10px; font-size: 0.96rem; } .testimonial-card { padding: 10px 6px 10px 10px; } } /* MICRO-INTERACTIONS/ANIMATIONS ------------------------------*/ .cta-button { transition: background 0.14s, color 0.12s, box-shadow 0.14s, transform 0.13s; } .cta-button:active { transform: scale(0.96); } .card, .feature-grid li, .trip-ideas-grid li, .testimonial-card { transition: box-shadow 0.14s, transform 0.13s; } .card:hover, .feature-grid li:hover, .trip-ideas-grid li:hover, .testimonial-card:hover { box-shadow: 0 12px 30px rgba(75,125,100,0.15); transform: translateY(-2px) scale(1.015); } /* COOKIE CONSENT BANNER -------------------------------------*/ .cookie-banner { position: fixed; bottom: 0; left: 0; width: 100vw; display: flex; flex-direction: column; align-items: center; background: var(--earth-tan); color: var(--deep-forest); box-shadow: 0 -2px 20px 0 rgba(60,80,47,0.10); z-index: 3000; padding: 22px 9vw 18px 9vw; transition: transform 0.24s, opacity 0.22s; } .cookie-banner.hidden { transform: translateY(120%); opacity: 0; pointer-events: none; } .cookie-banner .cookie-banner-content { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; max-width: 890px; width: 100%; justify-content: center; } .cookie-banner p { font-size: 1rem; margin-bottom: 0; color: var(--deep-forest); } .cookie-buttons { display: flex; gap: 13px; margin-left: 18px; } .cookie-buttons button { background: var(--organic-green); color: #fff; border-radius: 24px; padding: 7px 22px; font-family: 'Montserrat', Arial, sans-serif; font-size: 1rem; font-weight: 600; border: none; outline: none; transition: background 0.15s, color 0.11s; margin: 0 2px; } .cookie-buttons button:hover, .cookie-buttons button:focus { background: var(--primary); } .cookie-buttons .cookie-settings { background: #E7ECCB; color: var(--deep-forest); border: 1px solid var(--organic-green); } .cookie-buttons .cookie-settings:hover { background: var(--organic-green); color: #fff; } @media (max-width: 640px) { .cookie-banner { padding: 12px 2vw 12px 2vw; } .cookie-banner .cookie-banner-content { flex-direction: column; align-items: flex-start; gap: 14px; } .cookie-buttons { margin-left: 0; } } /* COOKIE MODAL/PREFERENCES -----------------------------------*/ .cookie-modal { position: fixed; left: 50%; top: 50%; background: #fff; color: var(--deep-forest); min-width: 90vw; max-width: 350px; transform: translate(-50%, -55%) scale(1); border-radius: var(--radius-lg); box-shadow: 0 16px 40px 0 rgba(48, 53, 36, 0.28); z-index: 3500; opacity: 1; transition: opacity 0.20s, transform 0.2s; padding: 34px 18px 20px 18px; visibility: visible; display: flex; flex-direction: column; gap: 16px; } .cookie-modal.hidden { opacity: 0; transform: translate(-50%, -52%) scale(0.96); pointer-events: none; visibility: hidden; } .cookie-modal h2 { font-size: 1.13rem; margin-bottom: 10px; font-family: 'Montserrat', Arial, sans-serif; color: var(--primary); } .cookie-modal label { display: flex; align-items: center; gap: 12px; font-size: 1.02rem; } .cookie-modal .modal-actions { display: flex; gap: 14px; margin-top: 8px; justify-content: flex-end; } .cookie-modal button { background: var(--organic-green); color: #fff; border-radius: 20px; padding: 7px 23px; font-family: 'Montserrat', Arial, sans-serif; } .cookie-modal .close-modal { background: none; color: var(--organic-green); font-size: 1rem; font-weight: 700; margin-left: 6px; border: none; cursor: pointer; } /* CHECKBOX/SWITCH DESIGN -------------------------------------*/ .cookie-modal input[type="checkbox"] { appearance: none; width: 36px; height: 20px; background: #E3EDE2; border-radius: 14px; margin-right: 8px; outline: none; transition: background .14s; position: relative; } .cookie-modal input[type="checkbox"]:checked { background: var(--organic-green); } .cookie-modal input[type="checkbox"]:before { content: ''; display: block; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .14s; } .cookie-modal input[type="checkbox"]:checked:before { transform: translateX(16px); } .cookie-modal input[type="checkbox"]:disabled { background: #FAF9F4; opacity: 0.6; cursor: not-allowed; } /* ACCESSIBILITY FOCUS STATES ----------------------------------*/ a:focus-visible, .cta-button:focus-visible, .cookie-modal button:focus-visible { outline: 2px solid #4B8656; outline-offset: 2px; } /* SCROLLBAR STM ------------------------------------------------*/ ::-webkit-scrollbar { width: 8px; background: #EBEEE5; } ::-webkit-scrollbar-thumb { background: #AFBEA3; border-radius: 12px; } /* ORNAMENT ORGANIC SHAPES -------------------------------------*/ .card, .feature-grid li, .testimonial-card, .service-list li, .trip-ideas-grid li { border-radius: var(--radius-lg) var(--radius-md) var(--radius-md) var(--radius-lg) / var(--radius-lg) var(--radius-md) var(--radius-lg) var(--radius-md); } /* END OF FILE ------------------------------------------------*/