/* ---------------------------------------------------- CSS RESET & BASELINE ---------------------------------------------------- */ 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.6; color: #2F4858; background: #fff; } ol, ul { list-style: none; } a { color: inherit; text-decoration: none; transition: color 0.2s; } img { max-width: 100%; height: auto; vertical-align: middle; } button, input, select, textarea { font-family: inherit; font-size: inherit; box-sizing: border-box; } /* Remove blue background on button active on mobile */ input:focus, textarea:focus, select:focus, button:focus { outline: none; } /* ---------------------------------------------------- VARIABLE FONTS & BRAND COLORS ---------------------------------------------------- */ :root { --color-primary: #2F4858; --color-secondary: #8EB1C7; --color-accent: #F6E9D7; --color-bg: #fff; --color-bg-light: #FCFAF8; --color-muted: #D8D8D8; --color-dark: #1c2730; --color-text: #2F4858; --color-grey: #f3f3f3; --color-card: #FCFAF8; --color-link: #2F4858; --color-link-hover: #8EB1C7; --shadow-soft: 0 2px 24px rgba(47,72,88,0.10); --shadow-elevated: 0 6px 32px 0 rgba(47,72,88,0.14); --border-radius: 14px; --font-display: 'Montserrat', Georgia, serif; --font-body: 'Open Sans', serif; --font-serif: Georgia, 'Times New Roman', Times, serif; --font-sans: 'Open Sans', Arial, sans-serif; } /* Google Fonts Import (Put in in real use) */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&family=Open+Sans:wght@400;600&display=swap'); /* ---------------------------------------------------- TYPOGRAPHY – Elegant Classic ---------------------------------------------------- */ body { font-family: var(--font-body); font-size: 16px; background: var(--color-bg-light); color: var(--color-text); letter-spacing: 0.02em; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); color: var(--color-primary); font-weight: 700; margin-bottom: 16px; line-height: 1.18; letter-spacing: 0.01em; } h1 { font-size: 2.25rem; margin-bottom: 20px; } h2 { font-size: 1.5rem; margin-bottom: 16px; } h3 { font-size: 1.17rem; margin-bottom: 10px; } p, ul li, ol li { font-size: 1rem; margin-bottom: 12px; color: var(--color-text); } strong { font-weight: 700; font-family: var(--font-display); } .text-section h1, .text-section h2, .text-section h3 { color: var(--color-dark); } .price { color: var(--color-secondary); font-weight: 600; font-family: var(--font-display); font-size: 1rem; } /* ---------------------------------------------------- GENERIC LAYOUT: Containers & Wrappers ---------------------------------------------------- */ .container { width: 100%; max-width: 1020px; margin: 0 auto; padding: 0 20px; } .content-wrapper { width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; align-items: flex-start; } .section { margin-bottom: 60px; padding: 40px 20px; background: transparent; } .card-container { display: flex; flex-wrap: wrap; gap: 24px; } .card { background: var(--color-card); border-radius: var(--border-radius); box-shadow: var(--shadow-soft); margin-bottom: 20px; position: relative; padding: 28px 24px; min-width: 260px; flex: 1 1 300px; display: flex; flex-direction: column; gap: 16px; } .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; flex-direction: column; align-items: flex-start; gap: 16px; padding: 20px 24px; background: #fff; border-radius: var(--border-radius); margin-bottom: 20px; box-shadow: 0 1px 12px 0 rgba(47,72,88,0.10); border: 1px solid var(--color-muted); max-width: 610px; color: var(--color-primary); } .guest-rating-summary { margin-top: 16px; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--color-primary); } .feature-item { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; margin-bottom: 20px; } .text-section { background: #fff; border-radius: var(--border-radius); box-shadow: var(--shadow-soft); padding: 32px 24px; } /* ---------------------------------------------------- TABLES & LISTS ---------------------------------------------------- */ table { width: 100%; border-collapse: collapse; background: #fff; font-family: var(--font-sans); margin-bottom: 24px; border-radius: var(--border-radius); overflow: hidden; box-shadow: var(--shadow-soft); } th, td { padding: 16px; text-align: left; } th { background: var(--color-secondary); color: #fff; font-weight: 700; font-size: 1rem; } tbody tr { border-bottom: 1px solid var(--color-muted); } tbody tr:last-child { border-bottom: none; } td { color: var(--color-primary); font-size: 1rem; } ul, ol { padding-left: 0; } ul li, ol li { margin-bottom: 12px; display: flex; align-items: center; gap: 10px; } ul li img, ol li img { width: 28px; height: 28px; margin-right: 8px; flex-shrink: 0; } ol { list-style: none; counter-reset: elegant-num; } ol li { position: relative; } ol li::before { counter-increment: elegant-num; content: counter(elegant-num) ". "; color: var(--color-secondary); font-family: var(--font-display); font-size: 1.06em; margin-right: 6px; font-weight: 600; } /* ---------------------------------------------------- HEADER & NAVIGATION ---------------------------------------------------- */ header { background: #fff; box-shadow: 0 2px 24px rgba(47,72,88,0.06); position: relative; z-index: 99; } header nav { display: flex; justify-content: space-between; align-items: center; padding: 18px 0 18px 0; position: relative; } header nav a img { height: 44px; width: auto; margin-right: 20px; } header nav ul { display: flex; flex-direction: row; gap: 24px; align-items: center; } header nav ul li { list-style: none; } header nav ul li a { font-family: var(--font-display); font-size: 1rem; letter-spacing: 0.01em; color: var(--color-primary); font-weight: 600; padding: 6px 10px; transition: color 0.2s, background 0.2s; border-radius: 6px; } header nav ul li a:hover, header nav ul li a:focus { background: var(--color-accent); color: var(--color-secondary); } header .btn-primary { margin-left: 20px; } /* ---------------------------------------------------- BUTTONS ---------------------------------------------------- */ .btn-primary { display: inline-block; font-family: var(--font-display); font-weight: 700; font-size: 1rem; padding: 13px 36px; background: var(--color-primary); color: #fff; border: none; border-radius: var(--border-radius); box-shadow: var(--shadow-soft); cursor: pointer; transition: background 0.2s, box-shadow 0.2s, transform 0.14s; position: relative; text-align: center; letter-spacing: 0.01em; } .btn-primary:hover, .btn-primary:focus { background: var(--color-secondary); color: var(--color-primary); transform: translateY(-2px) scale(1.02); box-shadow: 0 4px 28px 0 rgba(47, 72, 88, 0.12); } .btn-secondary { display: inline-block; font-family: var(--font-display); font-weight: 600; font-size: 1rem; padding: 13px 30px; background: var(--color-secondary); color: #fff; border: none; border-radius: var(--border-radius); box-shadow: var(--shadow-soft); cursor: pointer; transition: background 0.2s, box-shadow 0.2s, transform 0.14s; margin-right: 12px; } .btn-secondary:hover, .btn-secondary:focus { background: var(--color-primary); color: var(--color-accent); } .btn-link { border: none; background: transparent; color: var(--color-secondary); font-family: var(--font-display); font-weight: 600; font-size: 1rem; cursor: pointer; text-decoration: underline; padding: 0 10px; transition: color 0.18s; } .btn-link:hover, .btn-link:focus { color: var(--color-primary); } /* ---------------------------------------------------- MOBILE NAVIGATION (BURGER MENU) ---------------------------------------------------- */ .mobile-menu-toggle { display: none; position: absolute; top: 22px; right: 20px; background: var(--color-primary); color: #fff; width: 44px; height: 44px; border: none; border-radius: 50%; font-size: 1.78rem; z-index: 120; cursor: pointer; box-shadow: var(--shadow-soft); align-items: center; justify-content: center; transition: background 0.18s, box-shadow 0.15s; } .mobile-menu-toggle:hover, .mobile-menu-toggle:focus { background: var(--color-secondary); } .mobile-menu { position: fixed; top: 0; left: 0; height: 100vh; width: 100vw; z-index: 1800; background: rgba(47,72,88,0.71); display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-end; opacity: 0; pointer-events: none; transform: translateX(-100%); transition: transform 0.34s cubic-bezier(.5,.1,.23,1), opacity 0.18s; } .mobile-menu.open { opacity: 1; pointer-events: auto; transform: translateX(0); } .mobile-menu-close { margin: 32px 28px 16px 0; font-size: 2.33rem; background: #fff; color: var(--color-primary); border: none; border-radius: 50%; width: 46px; height: 46px; box-shadow: var(--shadow-soft); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.15s, color 0.18s; } .mobile-menu-close:hover, .mobile-menu-close:focus { background: var(--color-secondary); color: #fff; } .mobile-nav { width: 100vw; display: flex; flex-direction: column; gap: 22px; padding: 16px 38px 36px 38px; background: #fff; box-shadow: 0 10px 40px rgba(47,72,88,0.14); border-top-left-radius: var(--border-radius); border-bottom-left-radius: var(--border-radius); align-items: flex-start; } .mobile-nav a { font-family: var(--font-display); font-size: 1.13rem; font-weight: 700; color: var(--color-primary); padding: 10px 0; width: 100%; text-align: left; border-radius: 8px; transition: background 0.21s, color 0.16s; } .mobile-nav a:hover, .mobile-nav a:focus { background: var(--color-accent); color: var(--color-secondary); } @media (max-width: 1020px) { .container { max-width: 98vw; padding: 0 6vw; } } @media (max-width: 900px) { header nav ul { gap: 18px; } .container { padding: 0 10px; } .section { padding: 36px 8px; } } @media (max-width: 820px) { header nav ul { gap: 14px; } } @media (max-width: 860px) { header nav ul, header .btn-primary { display: none; } .mobile-menu-toggle { display: flex; } } /* ---------------------------------------------------- FOOTER ---------------------------------------------------- */ footer { background: #fff; box-shadow: 0 -2px 14px rgba(47,72,88,0.09); } footer section { margin-bottom: 0; padding: 40px 0 20px 0; } .footer-contact, .footer-links { margin-top: 20px; } .footer-contact p, .footer-links a { font-size: 1rem; color: var(--color-primary); } footer nav { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 10px; align-items: flex-start; } footer nav a { color: var(--color-secondary); font-family: var(--font-display); font-size: 1rem; font-weight: 600; padding: 4px 0; transition: color 0.2s; } footer nav a:hover { color: var(--color-primary); text-decoration: underline; } .footer-links { display: flex; flex-wrap: wrap; gap: 16px; font-size: 0.97rem; } .footer-links a { color: var(--color-secondary); transition: color 0.18s; } .footer-links a:hover { color: var(--color-primary); } /* ---------------------------------------------------- LINKS & INTERACTIONS ---------------------------------------------------- */ a { color: var(--color-link); text-decoration: none; transition: color 0.16s; } a:hover, a:focus { color: var(--color-link-hover); text-decoration: underline; } /* ---------------------------------------------------- CARDS & ELEMENTS ---------------------------------------------------- */ .card { box-shadow: var(--shadow-soft); border-radius: var(--border-radius); background: #fff; border: 1px solid var(--color-muted); margin-bottom: 20px; transition: box-shadow 0.16s, transform 0.13s; } .card:hover { box-shadow: var(--shadow-elevated); transform: translateY(-3px) scale(1.01); } /* Features with icons */ ul li img { margin-right: 10px; width: 26px; height: 26px; display: block; } /* ---------------------------------------------------- TESTIMONIALS / OPINIONS ---------------------------------------------------- */ .testimonial-card { background: #fff; color: var(--color-primary); border-radius: var(--border-radius); box-shadow: var(--shadow-soft); border: 1px solid var(--color-muted); margin-bottom: 20px; max-width: 640px; transition: box-shadow 0.19s, transform 0.14s; } .testimonial-card:hover { box-shadow: var(--shadow-elevated); transform: translateY(-1px) scale(1.01); } .testimonial-card span { font-family: var(--font-display); font-size: 0.98rem; color: var(--color-secondary); margin-left: 6px; font-weight: 600; } .testimonial-card p { font-style: italic; font-size: 1.10rem; color: var(--color-primary); margin-bottom: 2px; } /* ---------------------------------------------------- COOKIE CONSENT BANNER ---------------------------------------------------- */ .cookie-banner { position: fixed; bottom: 0; left: 0; width: 100vw; z-index: 2000; background: #fff9f0; border-top: 1.5px solid var(--color-muted); box-shadow: 0 -2px 18px rgba(47,72,88,0.15); display: flex; flex-direction: row; align-items: center; justify-content: center; padding: 22px 10vw 20px 10vw; gap: 24px; font-family: var(--font-body); font-size: 1rem; transition: transform 0.32s cubic-bezier(.83,.14,.38,.87), opacity 0.2s; opacity: 1; transform: translateY(0); } .cookie-banner.hide { opacity: 0; pointer-events: none; transform: translateY(100%); } .cookie-banner p { margin: 0; color: var(--color-primary); font-size: 1rem; } .cookie-banner .btn-primary, .cookie-banner .btn-secondary, .cookie-banner .btn-link { margin: 0 8px 0 0; font-size: 0.98rem; min-width: 122px; } /* Cookie Settings Modal */ .cookie-modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 4000; background: rgba(47,72,88,0.16); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.19s; } .cookie-modal-overlay.open { opacity: 1; pointer-events: auto; } .cookie-modal { background: #fff; border-radius: var(--border-radius); box-shadow: var(--shadow-elevated); padding: 28px 28px 24px 28px; width: 99vw; max-width: 400px; display: flex; flex-direction: column; gap: 22px; z-index: 4400; animation: cookie-modal-fade-in 0.34s cubic-bezier(.4,.64,.24,1); } @keyframes cookie-modal-fade-in { from { opacity: 0; transform: translateY(26px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } } .cookie-modal h3 { font-family: var(--font-display); font-size: 1.16rem; font-weight: 700; margin-bottom: 6px; color: var(--color-primary); } .cookie-modal .cookie-category { display: flex; flex-direction: row; align-items: center; gap: 12px; margin: 8px 0; } .cookie-modal label { font-family: var(--font-body); color: var(--color-primary); font-size: 1rem; } .cookie-modal input[type="checkbox"]:checked { accent-color: var(--color-secondary); } .cookie-modal .cookie-modal-actions { display: flex; gap: 16px; margin-top: 18px; } .cookie-modal .btn-primary, .cookie-modal .btn-secondary { font-size: 0.98rem; min-width: 110px; } /* ---------------------------------------------------- RESPONSIVE LAYOUT (Flex Only!) ---------------------------------------------------- */ @media (max-width: 768px) { h1 { font-size: 1.55rem; } h2 { font-size: 1.17rem; } .section, .content-wrapper, .text-section, .card, .testimonial-card { padding: 18px 6px; } .container { padding: 0 3vw; } .card-container, .content-grid { flex-direction: column; gap: 18px; align-items: stretch; } .testimonials { flex-direction: column; gap: 14px; } .text-image-section { flex-direction: column; gap: 22px; align-items: center; } .guest-rating-summary { font-size: 0.97rem; } .mobile-menu-toggle { top: 10px; right: 14px; } .footer-links, footer nav { flex-direction: column; gap: 8px; align-items: flex-start; } .cookie-banner { flex-direction: column; align-items: flex-start; padding: 15px 10px 12px 10px; gap: 10px; font-size: 0.98rem; } } @media (max-width: 540px) { h1, h2 { font-size: 1.13rem; } .card, .testimonial-card, .cookie-modal { padding: 12px 5px; } .cookie-modal { width: 99vw; min-width: unset; } .content-wrapper, .text-section { padding: 8px 0; } } /* ---------------------------------------------------- ANIMATIONS & HOVERS ---------------------------------------------------- */ .btn-primary, .btn-secondary, .btn-link { transition: background 0.19s, color 0.19s, box-shadow 0.19s, transform 0.13s; } .card, .testimonial-card { transition: box-shadow 0.19s, transform 0.13s; } .card:active, .testimonial-card:active { transform: scale(0.99); } /* ---------------------------------------------------- MISC: Focus, Accessibility, Shadows ---------------------------------------------------- */ *:focus-visible { outline: 2px solid var(--color-secondary); } /* Spacing Correction Section Styles (CRITICAL!) */ .section { margin-bottom: 60px; padding: 40px 20px; } .card-container { display: flex; flex-wrap: wrap; gap: 24px; } .card { margin-bottom: 20px; position: relative; } .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; } .feature-item { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; } /* Prevent absolute cards and add min margin between all cards */ .card, .testimonial-card, .text-section { margin-bottom: 20px; } /* Z-index layering for fixed elements */ .mobile-menu, .cookie-banner, .cookie-modal-overlay { z-index: 3000; } /* Hide scroll on mobile menu open */ body.mobile-menu-open { overflow: hidden; } /* ---------------------------------------------------- PRINT STYLES (Minimal) ---------------------------------------------------- */ @media print { nav, .btn-primary, .btn-secondary, .mobile-menu-toggle, .mobile-menu, .cookie-banner, .cookie-modal, footer { display: none !important; } }