:root{ --bg-dark:#0c0c0c; --bg-section:#111111; --accent:#a58375; --accent-light:#c4a594; --white:#ffffff; --line:rgba(255,255,255,0.18); --text-muted:rgba(255,255,255,0.7); --font-display:'Playfair Display', serif; --font-body:'Inter', sans-serif; } *{margin:0;padding:0;box-sizing:border-box;} html{scroll-behavior:smooth;} body{ background:var(--bg-dark); color:var(--white); font-family:var(--font-body); overflow-x:hidden; } img{max-width:100%;display:block;} a{color:inherit;text-decoration:none;} button{font-family:inherit;cursor:pointer;} /* ---------- SMOOTH SCROLL (Lenis) ---------- Lenis tags with these classes at runtime. If the library fails to load or the visitor prefers reduced motion, script.js never instantiates it and the browser's normal scrolling is used automatically. */ html.lenis{height:auto;} .lenis.lenis-smooth{scroll-behavior:auto !important;} .lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain;} .lenis.lenis-stopped{overflow:hidden;} @keyframes fadeUp{ from{opacity:0;transform:translateY(18px);} to{opacity:1;transform:translateY(0);} } @keyframes fadeIn{ from{opacity:0;} to{opacity:1;} } /* Scroll-reveal: elements start hidden, JS adds .is-visible when in view */ .reveal{ opacity:0; transform:translateY(28px); transition:opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1); } .reveal.is-visible{opacity:1;transform:translateY(0);} .reveal-delay-1.is-visible{transition-delay:0.08s;} .reveal-delay-2.is-visible{transition-delay:0.16s;} .reveal-delay-3.is-visible{transition-delay:0.24s;} @media (prefers-reduced-motion: reduce){ *{animation-duration:0.01ms !important;transition-duration:0.01ms !important;} .reveal{opacity:1;transform:none;} } /* ---------- NAVBAR ---------- */ .navbar{ position:fixed; top:0;left:0;right:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:1.5rem clamp(2rem, 9vw, 11rem); background:linear-gradient(to bottom, rgba(0,0,0,0.45), rgba(0,0,0,0)); animation:fadeIn 0.8s ease both; } .logo{ display:flex;align-items:center;gap:0.6rem; font-family:var(--font-display); font-size:1.1rem; letter-spacing:0.5px; } .logo svg{width:38px;height:38px;flex-shrink:0;} .menu-btn{ width:52px;height:52px; border-radius:4px; background:var(--accent); border:1px solid var(--accent); display:flex;align-items:center;justify-content:center; flex-shrink:0; transition:background 0.25s ease, transform 0.25s cubic-bezier(0.34,1.56,0.64,1); } .menu-btn:hover{background:var(--accent-light);transform:scale(1.06);} .menu-btn span{display:block;width:20px;height:2px;background:var(--white);position:relative;} .menu-btn span::before,.menu-btn span::after{ content:'';position:absolute;left:0;width:20px;height:2px;background:var(--white); } .menu-btn span::before{top:-6px;} .menu-btn span::after{top:6px;} /* ---------- NAV SIDEBAR ---------- */ .nav-scrim{ position:fixed;inset:0; background:rgba(0,0,0,0.5); z-index:190; opacity:0; visibility:hidden; transition:opacity 0.3s ease, visibility 0.3s ease; } .nav-scrim.open{opacity:1;visibility:visible;} .nav-overlay{ position:fixed;top:0;right:0;bottom:0; width:min(360px, 82vw); background:#0c0c0c; border-left:1px solid var(--line); z-index:200; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:1.6rem; padding:0 clamp(2rem, 6vw, 3rem); padding-bottom:12rem; transform:translateX(100%); transition:transform 0.4s cubic-bezier(0.16,1,0.3,1); } .nav-overlay.open{transform:translateX(0);} .nav-overlay a{ font-family:var(--font-display); font-size:clamp(1.25rem, 3.2vw, 1.6rem); color:var(--white); position:relative; opacity:0; transform:translateX(12px); transition:opacity 0.35s ease, transform 0.35s ease, color 0.2s ease; } .nav-overlay.open a{opacity:1;transform:translateX(0);} .nav-overlay.open a:nth-child(2){transition-delay:0.05s;} .nav-overlay.open a:nth-child(3){transition-delay:0.1s;} .nav-overlay.open a:nth-child(4){transition-delay:0.15s;} .nav-overlay.open a:nth-child(5){transition-delay:0.2s;} .nav-overlay.open a:nth-child(6){transition-delay:0.25s;} .nav-overlay a::after{ content:'';position:absolute;left:0;bottom:-6px;width:0;height:1px;background:var(--accent-light); transition:width 0.25s ease; } .nav-overlay a:hover::after{width:100%;} .nav-close{ position:absolute;top:1.5rem;left:1.5rem; width:44px;height:44px;border-radius:4px; background:var(--accent);border:1px solid var(--accent); display:flex;align-items:center;justify-content:center; font-size:1.5rem;line-height:1; color:var(--white); transition:background 0.2s ease; } .nav-close:hover{background:var(--accent-light);} /* ---------- HERO ---------- */ .hero{ position:relative; min-height:100vh; display:flex; flex-direction:column; justify-content:center; padding:clamp(6rem, 10vw, 8rem) clamp(2rem, 9vw, 11rem) clamp(6rem, 14vw, 11rem); overflow:hidden; } .hero::before{ content:''; position:absolute; inset:0; background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.35) 45%, rgba(0,0,0,0.55) 100%), url('pool-courtyard.png') center/cover no-repeat; z-index:0; } .hero-content{ position:relative; z-index:1; width:100%; max-width:880px; margin:0 auto; display:flex; flex-direction:column; align-items:center; text-align:center; gap:1.5rem; } .hero h1{ font-family:var(--font-display); font-weight:400; font-size:clamp(2.1rem, 5.5vw, 4rem); line-height:1.1; margin:0; animation:fadeUp 1s cubic-bezier(0.16,1,0.3,1) 0.15s both; } /* ---------- HERO SEARCH (unified card: tag row + input row) ---------- */ .hero-search-bar{ display:flex; flex-direction:row; align-items:stretch; gap:0; width:100%; border-radius:8px; padding:0.6rem; animation:fadeUp 1s cubic-bezier(0.16,1,0.3,1) 0.3s both; } .hero-toggle-group{ display:inline-flex; flex-shrink:0; align-self:stretch; background:var(--white); border:1px solid var(--white); border-right:none; border-radius:6px 0 0 6px; padding:4px; gap:2px; } .hero-toggle-btn{ background:transparent; border:none; color:#6b6b6b; font-family:var(--font-body); font-size:0.85rem; font-weight:600; letter-spacing:0.3px; padding:0.55rem 1.4rem; border-radius:4px; transition:background 0.2s ease, color 0.2s ease; } .hero-toggle-btn:hover{color:#1a1a1a;background:rgba(0,0,0,0.06);} .hero-toggle-btn.active{ background:var(--accent); color:var(--white); box-shadow:0 2px 8px rgba(0,0,0,0.25); } .hero-toggle-btn.active:hover{background:var(--accent-light);color:var(--white);} .hero-search-row{ flex:1; min-width:0; display:flex; flex-wrap:nowrap; align-items:stretch; justify-content:flex-start; } .hero-search-input{ flex:2 1 140px; display:flex; align-items:center; gap:0.5rem; background:var(--white); /* border-radius:3px;*/ padding:0 0.85rem; min-width:110px; } .hero-search-input svg{flex-shrink:0;color:#888;width:15px;height:15px;} .hero-search-input input{ flex:1; border:none; background:transparent; font-family:var(--font-body); font-size:0.85rem; color:#1a1a1a; padding:0.6rem 0; min-width:0; } .hero-search-input input:focus{outline:none;} .hero-search-input input::placeholder{color:#888;} .hero-search-row select{ flex:1 1 100px; min-width:96px; border:none; background:var(--white); color:#1a1a1a; font-family:var(--font-body); font-size:0.83rem; padding:0 0.85rem; -webkit-appearance:none; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a58375' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; padding-right:26px; cursor:pointer; transition:background-color 0.2s ease; } .hero-search-row select:hover{background-color:#f4f2ef;} .hero-search-row select:focus{outline:none;box-shadow:inset 0 0 0 2px var(--accent-light);} .hero-search-btn{ flex:0 1 auto; background:var(--accent); color:var(--white); border:none; /*border-radius:3px; */ padding:0 1.5rem; white-space:nowrap; font-family:var(--font-body); font-weight:600; font-size:0.85rem; display:flex; align-items:center; justify-content:center; transition:background 0.2s ease; } .hero-search-btn:hover{background:var(--accent-light);} .hero-browse-btn{ display:inline-flex; align-items:center; gap:0.4rem; color:rgba(255,255,255,0.75); font-family:var(--font-body); font-size:0.9rem; letter-spacing:0.3px; border-bottom:1px solid rgba(255,255,255,0.3); padding-bottom:2px; transition:color 0.2s ease, border-color 0.2s ease; animation:fadeUp 1s cubic-bezier(0.16,1,0.3,1) 0.45s both; } .hero-browse-btn:hover{ color:var(--white); border-color:var(--accent-light); } @media(max-width:950px){ .hero-search-bar{flex-direction:column;gap:0.6rem;} .hero-toggle-group{ align-self:stretch; width:100%; border-right:1px solid var(--white); border-radius:8px; background:var(--white); box-shadow:0 4px 16px rgba(0,0,0,0.15); } .hero-toggle-btn{ flex:1; padding:0.75rem 1rem; font-size:0.9rem; } .hero-search-row{flex-direction:column;} .hero-search-input,.hero-search-row select,.hero-search-btn{flex:1 1 auto;width:100%;min-width:0;} .hero-search-input input,.hero-search-row select{padding-top:0.7rem;padding-bottom:0.7rem;} .hero-search-btn{padding:0.7rem 1.5rem;} } /* ---------- ABOUT ---------- */ .about{ position:relative; background: linear-gradient(rgba(8,8,8,0.82), rgba(8,8,8,0.82)), url('villa-hero.jpg') center/cover no-repeat; padding:clamp(3.5rem, 8vw, 6.5rem) clamp(2rem, 9vw, 11rem); border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .about-grid{ max-width:1500px; margin:0 auto; display:grid; grid-template-columns:1fr; gap:2.5rem; } @media(min-width:900px){ .about-grid{grid-template-columns:1.1fr 1px 1fr;align-items:start;} } .about-left h2{ font-family:var(--font-display); font-weight:400; font-size:clamp(2rem, 4.5vw, 3.4rem); line-height:1.2; margin-bottom:0.5rem; } .about-left h2 span{display:block;} .about-divider{ display:none; background:var(--line); width:1px; min-width:1px; align-self:stretch; } @media(min-width:900px){.about-divider{display:block;}} .about-right p.lead{ font-family:var(--font-display); font-weight:700; font-size:clamp(1.15rem, 2vw, 1.6rem); line-height:1.5; letter-spacing:0.5px; color:var(--white); margin-bottom:1.75rem; } .about-right p.body{ font-family:var(--font-display); font-size:clamp(1rem, 1.4vw, 1.25rem); line-height:1.75; color:var(--text-muted); letter-spacing:0.3px; } /* ---------- CONTACT ---------- */ .contact{ background:var(--bg-dark); padding:clamp(3.5rem, 8vw, 6.5rem) clamp(2rem, 9vw, 11rem); } .contact-intro{max-width:1500px;margin:0 auto 3rem;} .contact-intro h2{ font-family:var(--font-display); font-weight:400; font-size:clamp(2.1rem, 5.5vw, 4.4rem); line-height:1.15; } .contact-intro .accent-line{color:var(--accent-light);} .contact-intro p{ margin-top:1rem; font-size:clamp(0.95rem, 1.3vw, 1.2rem); color:var(--text-muted); } .contact-grid{ max-width:1500px;margin:0 auto; display:grid; grid-template-columns:1fr; gap:3rem; } @media(min-width:1000px){ .contact-grid{grid-template-columns:1fr 1fr;align-items:stretch;} } .contact-left{ display:flex; flex-direction:column; justify-content:flex-start; gap:2.5rem; } .contact-info{display:flex;flex-direction:column;gap:1.75rem;} .info-block label{ display:block;font-size:0.9rem;color:var(--text-muted);margin-bottom:0.4rem; text-transform:uppercase;letter-spacing:1px; } .info-block .value{ font-family:var(--font-display);font-size:clamp(1.5rem,2.6vw,2.2rem); } .social-icons{display:flex;gap:1rem;margin-top:0.5rem;} .social-icons a{ width:58px;height:58px;border-radius:50%; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.18); display:flex;align-items:center;justify-content:center; transition:background 0.2s ease, transform 0.2s ease; } .social-icons a:hover{background:var(--accent);transform:translateY(-3px);} .social-icons svg{width:26px;height:26px;} .contact-form{ background:var(--bg-dark); color:var(--white); border:1px solid var(--line); border-radius:6px; padding:clamp(1.5rem, 3vw, 2.5rem); display:flex; flex-direction:column; gap:1.25rem; } .form-group label{ display:block;font-size:0.8rem;text-transform:uppercase;letter-spacing:1px; color:var(--text-muted);margin-bottom:0.4rem; } .form-group input,.form-group textarea{ width:100%; border:none; border-bottom:1.5px solid var(--white); background:transparent; font-family:var(--font-body); font-size:1rem; padding:0.6rem 0.2rem; color:var(--white); } .form-group textarea{resize:vertical;min-height:120px;border:1.5px solid var(--white);border-radius:4px;padding:0.75rem;} .form-group input:focus,.form-group textarea:focus{outline:2px solid var(--accent-light);outline-offset:2px;} .form-group input::placeholder,.form-group textarea::placeholder{color:rgba(255,255,255,0.4);} .form-submit{ margin-top:0.5rem; align-self:flex-start; background:var(--accent); color:var(--white); border:none; padding:0.85rem 2.2rem; border-radius:3px; font-family:var(--font-display); font-size:1.05rem; transition:background 0.2s ease; } .form-submit:hover{background:#8d6c5e;} .form-submit:disabled{opacity:0.6;cursor:not-allowed;} .form-status{ font-size:0.9rem; min-height:1.2em; } .form-status.success{color:#9ee6a0;} .form-status.error{color:#f29e96;} /* ---------- FOOTER ---------- */ footer{ background:var(--bg-dark); border-top:1px solid var(--line); padding:clamp(2.5rem, 5vw, 3.5rem) clamp(2rem, 9vw, 11rem) 2rem; } .footer-grid{ max-width:1500px;margin:0 auto; display:flex;flex-wrap:wrap; justify-content:space-between; gap:2.5rem; padding-bottom:2rem; } .footer-brand{display:flex;align-items:center;gap:0.75rem;font-family:var(--font-display);font-size:1.2rem;} .footer-brand svg{width:46px;height:46px;} .footer-links{display:flex;flex-wrap:wrap;gap:2rem;} .footer-links a{ font-size:0.95rem; color:var(--text-muted); position:relative; } .footer-links a:hover{color:var(--white);} .footer-bottom{ max-width:1500px;margin:0 auto; border-top:1px solid var(--line); padding-top:1.5rem; font-size:0.8rem; color:var(--text-muted); display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between; } /* focus visibility */ a:focus-visible, button:focus-visible{outline:2px solid var(--accent-light);outline-offset:3px;} /* ---------- SKELETON LOADERS (shared shimmer, dark theme) ---------- */ @keyframes skeletonShimmer{ 0%{background-position:-135% 0;} 100%{background-position:135% 0;} } .skeleton{ background:linear-gradient(100deg, #161616 30%, #292929 50%, #161616 70%); background-size:250% 100%; animation:skeletonShimmer 1.5s ease-in-out infinite; } .skeleton-line{ display:block; height:0.9rem; border-radius:4px; } .skeleton-line + .skeleton-line{margin-top:0.55rem;} @media(prefers-reduced-motion: reduce){ .skeleton{animation:none;background:#1c1c1c;} }