@keyframes waveMove1 { 0%{transform:translateX(0)} 50%{transform:translateX(-25%)} 100%{transform:translateX(0)} } @keyframes waveMove2 { 0%{transform:translateX(0)} 50%{transform:translateX(20%)} 100%{transform:translateX(0)} } @keyframes waveMove3 { 0%{transform:translateX(-10%)} 50%{transform:translateX(15%)} 100%{transform:translateX(-10%)} } @keyframes twinkle { 0%,100%{opacity:0.3} 50%{opacity:1} } @keyframes twinkle2 { 0%,100%{opacity:0.5} 50%{opacity:0.2} } @keyframes gentleBob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} } @keyframes fadeIn { from{opacity:0} to{opacity:1} } @keyframes slideInRight { from{transform:translateX(100%)} to{transform:translateX(0)} } @keyframes shimmer { 0%{background-position:200% center} 100%{background-position:-200% center} } *,*::before,*::after { box-sizing:border-box; } body { margin:0; padding:0; background:#fff; font-family:'Exo 2',sans-serif; color:#1c2d4a; overflow-x:hidden; scroll-behavior:smooth; } a { color:#c4854a; } a:hover { color:#a86e35; } ::selection { background:rgba(217,154,96,0.3); } ::-webkit-scrollbar { width:8px; } ::-webkit-scrollbar-track { background:#f5f1ea; } ::-webkit-scrollbar-thumb { background:#d99a60; border-radius:4px; } /* --- Navbar --- */ .navbar { position:fixed; top:0; left:0; right:0; z-index:1000; transition:background 0.4s cubic-bezier(0.4,0,0.2,1), backdrop-filter 0.4s, box-shadow 0.4s, border-color 0.4s; background:transparent; border-bottom:1px solid transparent; } .navbar.scrolled { background:rgba(255,255,255,0.97); backdrop-filter:blur(12px); box-shadow:0 1px 12px rgba(0,0,0,0.08); border-bottom:1px solid rgba(0,0,0,0.04); } .navbar__inner { max-width:1280px; margin:0 auto; padding:0 40px; display:flex; align-items:center; justify-content:space-between; height:72px; } .navbar__logo { display:flex; align-items:center; gap:12px; text-decoration:none; } .navbar__logo img { height:42px; width:auto; transition:filter 0.4s; filter:brightness(10); } .navbar.scrolled .navbar__logo img { filter:none; } .navbar__logo-text { font-family:'Forum',serif; font-weight:700; font-size:22px; letter-spacing:1px; transition:color 0.4s; color:#fff; } .navbar.scrolled .navbar__logo-text { color:#1c2d4a; } .navbar__links { display:flex; align-items:center; gap:32px; } .navbar__links a { text-decoration:none; font-size:14px; font-weight:500; letter-spacing:0.5px; transition:color 0.4s; color:#fff; } .navbar.scrolled .navbar__links a { color:#1c2d4a; } .navbar__links a:hover { color:#d99a60; } .navbar__right { display:flex; align-items:center; gap:20px; } .btn-book { display:flex; align-items:center; gap:8px; padding:10px 24px; background:linear-gradient(135deg,#d99a60,#c4854a); color:#fff; border-radius:8px; font-size:13px; font-weight:600; text-decoration:none; letter-spacing:0.5px; transition:transform 0.2s, box-shadow 0.2s; } .btn-book:hover { transform:translateY(-1px); box-shadow:0 4px 16px rgba(217,154,96,0.4); color:#fff; } .hamburger { display:none; align-items:center; justify-content:center; width:40px; height:40px; background:none; border:none; cursor:pointer; color:#fff; transition:color 0.4s; } .navbar.scrolled .hamburger { color:#1c2d4a; } /* Language dropdown */ .lang-wrap { position:relative; } .lang-btn { display:flex; align-items:center; gap:6px; background:none; border:1px solid rgba(255,255,255,0.3); border-radius:6px; padding:6px 12px; cursor:pointer; font-size:13px; font-weight:600; letter-spacing:0.5px; transition:border-color 0.4s, color 0.4s; color:#fff; font-family:'Exo 2',sans-serif; text-transform:uppercase; } .navbar.scrolled .lang-btn { color:#1c2d4a; border-color:rgba(0,0,0,0.12); } .lang-dropdown { position:absolute; top:calc(100% + 8px); right:0; background:#fff; border-radius:10px; box-shadow:0 8px 32px rgba(0,0,0,0.15); overflow:hidden; min-width:160px; border:1px solid rgba(0,0,0,0.06); display:none; } .lang-dropdown.open { display:block; } .lang-dropdown button { display:flex; align-items:center; width:100%; padding:10px 16px; border:none; background:transparent; cursor:pointer; font-size:14px; font-family:'Exo 2',sans-serif; color:#1c2d4a; text-align:left; } .lang-dropdown button:hover { background:#f5f1ea; } .lang-dropdown button.active { background:#f5f1ea; } /* --- Mobile Menu --- */ .mobile-overlay { position:fixed; inset:0; z-index:999; background:rgba(0,0,0,0.5); animation:fadeIn 0.25s ease; display:none; } .mobile-overlay.open { display:block; } .mobile-menu { position:fixed; top:0; right:0; bottom:0; width:280px; z-index:1001; background:#fff; box-shadow:-4px 0 24px rgba(0,0,0,0.15); display:flex; flex-direction:column; padding:24px 0; transform:translateX(100%); transition:transform 0.3s cubic-bezier(0.4,0,0.2,1); } .mobile-menu.open { transform:translateX(0); } .mobile-menu__header { display:flex; align-items:center; justify-content:space-between; padding:0 24px; margin:0 0 32px; } .mobile-menu__header span { font-family:'Forum',serif; font-weight:700; font-size:20px; color:#1c2d4a; letter-spacing:1px; } .mobile-menu__close { width:36px; height:36px; border:none; background:none; cursor:pointer; color:#1c2d4a; font-size:20px; display:flex; align-items:center; justify-content:center; } .mobile-menu__links a { display:block; padding:14px 24px; font-size:15px; font-weight:500; color:#1c2d4a; text-decoration:none; border-bottom:1px solid rgba(0,0,0,0.05); } .mobile-menu__links a:hover { background:#faf6f0; color:#d99a60; } .mobile-menu__cta { padding:24px; margin-top:auto; } .mobile-menu__cta a { display:flex; align-items:center; justify-content:center; gap:8px; padding:14px 24px; background:linear-gradient(135deg,#d99a60,#c4854a); color:#fff; border-radius:10px; font-size:15px; font-weight:600; text-decoration:none; } /* --- Hero --- */ .hero { position:relative; height:100vh; overflow:hidden; display:flex; align-items:center; justify-content:center; } .hero__bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 40%; transition:opacity 0.8s; } .hero__overlay-gradient { position:absolute; inset:0; z-index:1; background:linear-gradient(to bottom, rgba(10,20,40,0.45) 0%, rgba(10,20,40,0.2) 40%, rgba(10,20,40,0.35) 100%); } .hero__overlay-night { position:absolute; inset:0; z-index:2; background:linear-gradient(180deg, rgb(8,15,35) 0%, rgb(12,22,48) 50%, rgb(15,28,55) 100%); opacity:0; transition:opacity 0.6s; } .hero__stars { position:absolute; inset:0; z-index:3; opacity:0; transition:opacity 0.8s; } .hero__content { position:relative; z-index:10; text-align:center; max-width:800px; padding:0 24px; margin-top:-80px; } .hero__title { font-family:'Forum',serif; font-size:52px; font-weight:600; color:#fff; margin:0 0 20px; line-height:1.15; text-shadow:0 2px 20px rgba(0,0,0,0.3); letter-spacing:0.5px; } .hero__sub { font-size:18px; color:rgba(255,255,255,0.9); margin:0 0 40px; font-weight:300; line-height:1.6; letter-spacing:0.095rem; text-shadow:0 1px 10px rgba(0,0,0,0.2); } .hero__buttons { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; } .hero__btn-primary { display:flex; align-items:center; gap:10px; padding:14px 32px; background:linear-gradient(135deg,#d99a60,#c4854a); color:#fff; border-radius:10px; font-size:15px; font-weight:600; text-decoration:none; letter-spacing:0.5px; transition:transform 0.2s, box-shadow 0.2s; } .hero__btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(217,154,96,0.4); color:#fff; } .hero__btn-secondary { display:flex; align-items:center; gap:10px; padding:14px 32px; background:rgba(255,255,255,0.15); backdrop-filter:blur(10px); color:#fff; border:1px solid rgba(255,255,255,0.3); border-radius:10px; font-size:15px; font-weight:600; text-decoration:none; letter-spacing:0.5px; transition:transform 0.2s, background 0.2s; } .hero__btn-secondary:hover { transform:translateY(-2px); background:rgba(255,255,255,0.25); color:#fff; } .hero__scroll { position:absolute; bottom:32px; left:50%; transform:translateX(-50%); z-index:10; animation:gentleBob 2s ease-in-out infinite; } /* --- Sections --- */ .section { padding:100px 24px; } .section--beige { background:#faf6f0; } .section--white { background:#fff; } .section--dark { background:linear-gradient(135deg,#1c2d4a,#0f1b2e); text-align:center; position:relative; overflow:hidden; } .section__container { max-width:1200px; margin:0 auto; } .section__title { font-family:'Forum',serif; font-size:40px; font-weight:600; color:#1c2d4a; text-align:center; margin:0 0 16px; } .section__subtitle { text-align:center; color:#6b7a8d; font-size:16px; margin:0 0 60px; font-weight:300; } /* --- Features --- */ .features-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:24px; } .feature-card { border-radius:16px; overflow:hidden; position:relative; min-height:220px; display:flex; flex-direction:column; justify-content:flex-end; background-size:cover; background-position:center; transition:transform 0.3s, box-shadow 0.3s; } .feature-card:hover { transform:translateY(-4px); box-shadow:0 12px 40px rgba(28,45,74,0.15); } .feature-card__overlay { position:absolute; inset:0; border-radius:16px; background:linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.05) 100%); } .feature-card__body { position:relative; z-index:1; padding:28px; } .feature-card__body h3 { font-size:18px; font-weight:700; color:#fff; margin:0 0 8px; text-shadow:0 1px 4px rgba(0,0,0,0.3); } .feature-card__body p { font-size:14px; color:rgba(255,255,255,0.85); margin:0; line-height:1.65; font-weight:400; text-shadow:0 1px 3px rgba(0,0,0,0.2); } /* --- Gallery --- */ .gallery-scroll { display:flex; gap:12px; overflow-x:auto; padding:0 40px 20px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:thin; } .gallery-item { flex:0 0 300px; height:220px; border-radius:12px; overflow:hidden; cursor:pointer; scroll-snap-align:start; position:relative; transition:transform 0.3s; } .gallery-item:hover { transform:scale(1.03); } .gallery-item__inner { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:13px; color:#6b7a8d; font-weight:500; letter-spacing:0.5px; } .gallery-item__hover { position:absolute; inset:0; background:linear-gradient(to top,rgba(28,45,74,0.4),transparent); opacity:0; transition:opacity 0.3s; display:flex; align-items:flex-end; padding:16px; } .gallery-item:hover .gallery-item__hover { opacity:1; } .gallery-item__hover span { color:#fff; font-size:13px; font-weight:500; } /* --- Lightbox --- */ .lightbox { position:fixed; inset:0; z-index:2000; background:rgba(0,0,0,0.95); display:none; } .lightbox.open { display:block; } .lightbox__close { position:absolute; top:16px; right:16px; z-index:3; width:44px; height:44px; border:none; border-radius:50%; background:rgba(255,255,255,0.15); color:#fff; font-size:20px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background 0.2s; } .lightbox__close:hover { background:rgba(255,255,255,0.3); } .lightbox__prev, .lightbox__next { position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:48px; height:48px; border:none; border-radius:50%; background:rgba(255,255,255,0.15); color:#fff; font-size:28px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background 0.2s; } .lightbox__prev { left:16px; } .lightbox__next { right:16px; } .lightbox__prev:hover, .lightbox__next:hover { background:rgba(255,255,255,0.3); } .lightbox__content { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:calc(100% - 120px); max-width:900px; text-align:center; cursor:default; } .lightbox__img { width:100%; height:70vh; border-radius:8px; } .lightbox__caption { margin:12px 0 0; color:rgba(255,255,255,0.8); font-size:14px; font-weight:500; } .lightbox__counter { margin:6px 0 0; color:rgba(255,255,255,0.4); font-size:12px; } @media (max-width: 768px) { .lightbox__content { width:calc(100% - 32px); } .lightbox__img { height:50vh; } .lightbox__prev { left:4px; } .lightbox__next { right:4px; } .lightbox__prev, .lightbox__next { width:40px; height:40px; font-size:22px; } .lightbox__close { top:10px; right:10px; width:40px; height:40px; } } /* --- Rooms --- */ .rooms-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(340px, 1fr)); gap:28px; } .room-card { background:#fff; border-radius:20px; overflow:hidden; border:1px solid rgba(0,0,0,0.04); transition:transform 0.3s, box-shadow 0.3s; } .room-card:hover { transform:translateY(-4px); box-shadow:0 16px 48px rgba(28,45,74,0.1); } .room-card__photos { height:240px; position:relative; overflow:hidden; } .room-card__scroll { display:flex; height:100%; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; scroll-behavior:smooth; } .room-card__scroll::-webkit-scrollbar { display:none; } .room-card__slide { flex:0 0 100%; height:100%; background:linear-gradient(135deg,#e8e0d4,#d4cdc2); display:flex; align-items:center; justify-content:center; scroll-snap-align:start; } .room-card__slide-inner { text-align:center; color:#8a7e6e; } .room-card__slide-inner svg { opacity:0.5; } .room-card__slide-inner p { margin:8px 0 0; font-size:12px; font-weight:500; letter-spacing:0.5px; } .room-card__nav-btn { position:absolute; top:50%; transform:translateY(-50%); width:32px; height:32px; border-radius:50%; border:none; background:rgba(255,255,255,0.85); color:#1c2d4a; font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(0,0,0,0.15); transition:background 0.2s; z-index:2; } .room-card__nav-btn:hover { background:#fff; } .room-card__nav-btn--prev { left:8px; } .room-card__nav-btn--next { right:8px; } .room-card__dots { position:absolute; bottom:12px; left:50%; transform:translateX(-50%); display:flex; gap:6px; z-index:2; } .room-card__dot { width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,0.7); } .room-card__badge { position:absolute; top:16px; left:16px; background:linear-gradient(135deg,#d99a60,#c4854a); color:#fff; padding:6px 14px; border-radius:20px; font-size:12px; font-weight:600; letter-spacing:0.5px; } .room-card__body { padding:28px; } .room-card__body h3 { font-size:22px; font-weight:700; color:#1c2d4a; margin:0 0 16px; font-family:'Forum',serif; } .room-card__meta { display:flex; flex-wrap:wrap; gap:12px; margin:0 0 20px; } .room-card__meta-item { display:flex; align-items:center; gap:6px; font-size:13px; color:#6b7a8d; } .room-card__amenities { display:flex; flex-wrap:wrap; gap:8px; } .room-card__amenity { font-size:12px; color:#6b7a8d; background:#f5f1ea; padding:5px 12px; border-radius:20px; font-weight:500; } /* --- Location --- */ .location-grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; } .location__title { font-family:'Forum',serif; font-size:40px; font-weight:600; color:#1c2d4a; margin:0 0 20px; line-height:1.15; } .location__desc { font-size:16px; color:#6b7a8d; line-height:1.7; margin:0 0 36px; font-weight:400; } .location__points { display:flex; flex-direction:column; gap:20px; margin:0 0 36px; } .location__point { display:flex; align-items:flex-start; gap:16px; } .location__point-icon { flex-shrink:0; width:44px; height:44px; background:linear-gradient(135deg,#d99a6022,#e8bf8a33); border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:18px; } .location__point-title { font-size:15px; font-weight:600; color:#1c2d4a; margin:0 0 2px; } .location__point-sub { font-size:13px; color:#6b7a8d; font-weight:400; } .location__point-time { margin-left:auto; flex-shrink:0; font-size:13px; font-weight:600; color:#d99a60; white-space:nowrap; } .location__map-links { display:flex; gap:12px; flex-wrap:wrap; } .location__map-link { display:flex; align-items:center; gap:8px; padding:10px 20px; border:1px solid #e0dcd5; border-radius:8px; font-size:13px; font-weight:600; color:#1c2d4a; text-decoration:none; transition:border-color 0.2s, background 0.2s; } .location__map-link:hover { border-color:#d99a60; background:#faf6f0; color:#1c2d4a; } .location__map-placeholder { border-radius:20px; overflow:hidden; height:28rem; display:flex; align-items:center; justify-content:center; position:relative; border:1px solid #0f1b2e; } /* --- Reviews --- */ .reviews-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:24px; } .review-card { background:#fff; border-radius:16px; padding:32px; border:1px solid rgba(0,0,0,0.04); } .review-card__stars { display:flex; gap:4px; margin:0 0 16px; } .review-card__text { font-size:15px; color:#1c2d4a; line-height:1.7; margin:0 0 20px; font-style:italic; font-weight:400; } .review-card__author { display:flex; align-items:center; gap:12px; } .review-card__avatar { width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,#d99a60,#e8bf8a); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:15px; } .review-card__name { font-size:14px; font-weight:600; color:#1c2d4a; } .review-card__date { font-size:12px; color:#6b7a8d; } /* --- Booking CTA --- */ .cta__stars-bg { position:absolute; inset:0; opacity:0.05; background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="30" r="1" fill="white"/><circle cx="60" cy="15" r="0.5" fill="white"/><circle cx="80" cy="50" r="1.2" fill="white"/><circle cx="35" cy="70" r="0.7" fill="white"/><circle cx="90" cy="85" r="1" fill="white"/></svg>') repeat; background-size:200px; } .cta__inner { max-width:600px; margin:0 auto; position:relative; z-index:1; } .cta__title { font-family:'Forum',serif; font-size:42px; font-weight:600; color:#fff; margin:0 0 16px; line-height:1.2; } .cta__sub { font-size:16px; color:rgba(255,255,255,0.7); margin:0 0 44px; font-weight:300; line-height:1.6; } .cta__buttons { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; } .btn-whatsapp { display:flex; align-items:center; gap:10px; padding:16px 32px; background:#25D366; color:#fff; border-radius:12px; font-size:15px; font-weight:600; text-decoration:none; transition:transform 0.2s, box-shadow 0.2s; } .btn-whatsapp:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(37,211,102,0.3); color:#fff; } .btn-instagram { display:flex; align-items:center; gap:10px; padding:16px 32px; background:linear-gradient(135deg,#833AB4,#E1306C,#F77737); color:#fff; border-radius:12px; font-size:15px; font-weight:600; text-decoration:none; transition:transform 0.2s, box-shadow 0.2s; } .btn-instagram:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(225,48,108,0.3); color:#fff; } /* --- FAQ --- */ .faq-list { display:flex; flex-direction:column; gap:12px; max-width:760px; margin:0 auto; } .faq-item { border:1px solid rgba(0,0,0,0.06); border-radius:12px; overflow:hidden; transition:border-color 0.2s; } .faq-item:hover { border-color:rgba(217,154,96,0.3); } .faq-item__question { width:100%; display:flex; align-items:center; justify-content:space-between; padding:20px 24px; border:none; background:none; cursor:pointer; font-family:'Exo 2',sans-serif; text-align:left; } .faq-item__question span { font-size:15px; font-weight:600; color:#1c2d4a; } .faq-item__question svg { transition:transform 0.3s; flex-shrink:0; margin-left:16px; } .faq-item.open .faq-item__question svg { transform:rotate(180deg); } .faq-item__answer { max-height:0; overflow:hidden; transition:max-height 0.3s ease, padding 0.3s ease; padding:0 24px; } .faq-item.open .faq-item__answer { max-height:300px; padding:0 24px 20px; } .faq-item__answer p { font-size:14px; color:#6b7a8d; line-height:1.7; margin:0; } /* --- Footer --- */ .footer { background:#0f1b2e; padding:60px 24px 0; } .footer__inner { max-width:1200px; margin:0 auto; } .footer__grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:48px; padding:0 0 48px; border-bottom:1px solid rgba(255,255,255,0.08); } .footer__logo { display:flex; align-items:center; gap:12px; margin:0 0 16px; } .footer__logo img { height:36px; width:auto; filter:brightness(1.2); } .footer__logo span { font-family:'Forum',serif; font-weight:700; font-size:20px; color:#e8bf8a; letter-spacing:1px; } .footer__desc { font-size:14px; color:rgba(255,255,255,0.5); line-height:1.7; margin:0; max-width:360px; } .footer__heading { font-size:13px; font-weight:700; color:rgba(255,255,255,0.4); letter-spacing:1px; text-transform:uppercase; margin:0 0 20px; } .footer__links { display:flex; flex-direction:column; gap:12px; } .footer__links a, .footer__address { font-size:14px; color:rgba(255,255,255,0.7); text-decoration:none; transition:color 0.2s; line-height:1.7; display:block; } .footer__links a:hover, .footer__address:hover { color:#d99a60; } .footer__bottom { display:flex; align-items:center; justify-content:space-between; padding:24px 0; } .footer__copy { font-size:13px; color:rgba(255,255,255,0.35); margin:0; } .footer__socials { display:flex; gap:16px; } .footer__socials a { color:rgba(255,255,255,0.35); transition:color 0.2s; } .footer__socials a:hover:first-child { color:#25D366; } .footer__socials a:hover:last-child { color:#E1306C; } /* --- Responsive --- */ @media (max-width: 768px) { .navbar__links { display:none !important; } .btn-book--nav { display:none !important; } .hamburger { display:flex !important; } .hero__title { font-size:32px !important; } .hero__sub { font-size:15px !important; } .hero__buttons { flex-direction:column !important; align-items:center !important; } .hero__buttons a { width:100% !important; max-width:280px !important; justify-content:center !important; } .features-grid { grid-template-columns:1fr !important; } .rooms-grid { grid-template-columns:1fr !important; } .location-grid { grid-template-columns:1fr !important; gap:32px !important; } .reviews-grid { grid-template-columns:1fr !important; } .footer__grid { grid-template-columns:1fr !important; gap:32px !important; } .section { padding:60px 16px !important; } .section__title, .location__title { font-size:28px !important; } .navbar__inner { padding:0 16px !important; } .location__map-placeholder { height: 20rem; } } @media (max-width: 480px) { .hero__title { font-size:26px !important; } .feature-card { min-height:180px !important; } }