/* ============================================================================ Blu Luxury Rentals — luxury theme layer (coastal edition) Soft coastal-blue brand with charcoal text + gold metallic CTA. Loaded LAST in so it refines the per-page styles without touching content, structure, or functionality. All text pairings meet WCAG AA. ========================================================================== */ :root{ --coast:#8fd3d3; /* soft coastal blue — nav & hero surfaces (LIGHT) */ --coast-2:#a8dadc; /* lighter coastal — gradient partner */ --teal:#185e5e; /* deep teal — links / icons / hover on light (AA on cream) */ --teal-badge:#14494a; /* badge background (white text) */ --footer:#123a3c; /* footer background (cream text) */ --gold:#c9a84c; /* metallic accent — primary CTAs (charcoal text) */ --gold-deep:#b8973d; --ink:#14242e; /* charcoal — primary text on light/coastal (AA everywhere) */ --muted:#445563; /* secondary text on cream (AA) */ --cream:#f7f3ec; /* warm white canvas */ --surface:#fffdf9; /* card surface */ --line:rgba(20,36,46,.12); --shadow-sm:0 4px 18px rgba(20,36,46,.07); --shadow-md:0 14px 40px rgba(20,36,46,.12); --shadow-lg:0 26px 70px rgba(20,36,46,.16); --radius:14px; --radius-sm:8px; --serif:'Playfair Display',Georgia,'Times New Roman',serif; --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --maxw:1180px; } /* ---- Base canvas ---------------------------------------------------------- */ html{scroll-behavior:smooth;} body{ background:var(--cream) !important; color:var(--ink) !important; font-family:var(--sans) !important; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; letter-spacing:.005em; } h1,h2,h3,h4, .main-title,.hero-title,.hero-subtitle,.section-title,.amenities-title, .reviews-title,.location-title,.term-title,.blog-title,.footer-title, .property-content h3,.card-content h3,.activity-title,.location-card h3, .tip-card h3,.beach-card h3{ font-family:var(--serif) !important; font-weight:600 !important; letter-spacing:.005em; color:var(--ink); line-height:1.15; } .main-title,.hero-title{font-weight:700 !important;letter-spacing:.01em;line-height:1.08;} p,li,.description,.hero-description,.sub-text,.blog-excerpt,.review-text{color:var(--ink);} a{color:var(--teal);} a:hover{color:var(--ink);} .divider{background:var(--teal) !important;opacity:.85;} /* ---- Navigation (soft coastal, charcoal text) ----------------------------- */ nav,.nav{ background:var(--coast) !important; border:none !important; box-shadow:0 6px 22px rgba(20,36,46,.12) !important; } nav a,.nav a,.nav-item{ color:var(--ink) !important; font-family:var(--sans) !important; font-weight:600 !important; letter-spacing:.06em; text-transform:uppercase; font-size:.82rem !important; } nav a:hover,.nav a:hover,.nav-item:hover,nav a.active,.nav a.active{ color:var(--teal) !important;background:transparent !important;transform:none !important; border:none !important;box-shadow:none !important; } .logo,nav .logo,.nav .logo{ color:var(--ink) !important;font-family:var(--serif) !important;font-weight:700 !important; letter-spacing:.03em !important;text-transform:none !important;font-size:1.25rem !important; } .mobile-nav{background:var(--coast) !important;border-left:3px solid var(--teal) !important;} .mobile-nav a{color:var(--ink) !important;border-color:rgba(20,36,46,.18) !important;font-weight:600 !important;} .mobile-nav a:hover{background:rgba(24,94,94,.12) !important;border-color:var(--teal) !important;color:var(--teal) !important;} .mobile-nav-toggle{background:var(--coast) !important;border:1px solid var(--teal) !important;color:var(--ink) !important;} /* ---- Buttons -------------------------------------------------------------- */ .btn-primary,.book-now-button,.cta,button.btn-primary,a.btn-primary{ background:var(--gold) !important;color:var(--ink) !important;border:1px solid var(--gold) !important; font-family:var(--sans) !important;font-weight:700 !important;letter-spacing:.05em;text-transform:uppercase; font-size:.84rem !important;border-radius:6px !important; box-shadow:0 10px 24px rgba(20,36,46,.14) !important; transition:transform .25s ease,box-shadow .25s ease,background .25s ease !important; } .btn-primary:hover,.book-now-button:hover,.cta:hover,button.btn-primary:hover,a.btn-primary:hover{ background:var(--gold-deep) !important;color:var(--ink) !important;transform:translateY(-2px) !important; box-shadow:0 16px 32px rgba(20,36,46,.2) !important; } .btn-secondary,a.btn-secondary{ background:transparent !important;color:var(--ink) !important;border:1.5px solid var(--ink) !important; font-family:var(--sans) !important;font-weight:600 !important;letter-spacing:.05em;text-transform:uppercase; font-size:.84rem !important;border-radius:6px !important;box-shadow:none !important; transition:transform .25s ease,background .25s ease,color .25s ease !important; } .btn-secondary:hover,a.btn-secondary:hover{background:var(--ink) !important;color:var(--cream) !important;transform:translateY(-2px) !important;} .back-to-top{background:var(--teal) !important;color:#fff !important;border:1px solid var(--teal) !important;box-shadow:var(--shadow-md) !important;} .back-to-top:hover{background:var(--ink) !important;color:#fff !important;} .btn-primary[role="status"]{background:#6b7280 !important;border-color:#6b7280 !important;color:#fff !important;box-shadow:none !important;cursor:default !important;} /* ---- Floating CTA — keep fully on-screen (was getting clipped) ------------ */ .floating-buttons{ position:fixed !important;right:1.25rem !important;bottom:1.25rem !important;left:auto !important; display:flex !important;flex-direction:column !important;align-items:flex-end !important;gap:.6rem !important; max-width:calc(100vw - 2rem);z-index:1000 !important; } .floating-buttons .book-now-button,.floating-buttons a.book-now-button{ font-size:.72rem !important;padding:.7rem 1.1rem !important;letter-spacing:.04em;white-space:nowrap; max-width:calc(100vw - 2.5rem);border-radius:999px !important; } /* ---- Hero (root pages: soft coastal band, charcoal text) ------------------ */ .hero-section{ background:linear-gradient(160deg,var(--coast) 0%,var(--coast-2) 100%) !important; border:none !important;border-radius:var(--radius) !important;box-shadow:var(--shadow-lg) !important; color:var(--ink) !important; } .hero-section .main-title,.hero-section h1,.hero-section .description,.hero-section .hero-description, .hero-section .hero-subtitle,.hero-section p{color:var(--ink) !important;} .hero-section::before{opacity:.35;} /* tone down the decorative pulse on light bg */ .feature-highlight{ background:rgba(255,255,255,.55) !important;color:var(--ink) !important; border:1px solid var(--teal) !important;font-weight:600 !important;letter-spacing:.03em; } /* Blog hero keeps its photo + dark overlay -> its text stays light (untouched bg). */ .hero .hero-title,.hero h1,.hero .meta,.hero p{color:#fff !important;} .hero .category,.category{background:var(--gold) !important;color:var(--ink) !important;font-weight:700 !important;letter-spacing:.08em;} /* ---- Cards ---------------------------------------------------------------- */ .property,.property-card,.card,.location-card,.tip-card,.beach-card, .activity-card,.review-card,.amenity-item,.term-item,.blog-card{ background:var(--surface) !important;border:1px solid var(--line) !important;border-radius:var(--radius) !important; box-shadow:var(--shadow-sm) !important; transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease,border-color .3s ease !important; } .property:hover,.property-card:hover,.card:hover,.location-card:hover,.tip-card:hover, .beach-card:hover,.activity-card:hover,.review-card:hover,.amenity-item:hover, .term-item:hover,.blog-card:hover{ transform:translateY(-6px) !important;box-shadow:var(--shadow-md) !important;border-color:var(--teal) !important; } /* Badges: deep teal fill + white text (10:1) */ .property-badge,.card-badge,.price-tag,.location-highlight,.activity-tag{ background:var(--teal-badge) !important;color:#fff !important;border:none !important;font-weight:600 !important;letter-spacing:.03em; } .booked-overlay{background:rgba(20,36,46,.82) !important;color:#fff !important;letter-spacing:.08em;font-family:var(--sans) !important;} .section-title,.amenities-title,.reviews-title,.location-title{color:var(--ink) !important;} .review-stars,.review-stars i{color:var(--gold-deep) !important;} .amenity-item i,.amenity i,.activity-content i{color:var(--teal) !important;} /* ---- Forms ---------------------------------------------------------------- */ .form-group label{color:var(--ink) !important;font-weight:600 !important;letter-spacing:.02em;} input,select,textarea{font-family:var(--sans) !important;color:var(--ink) !important;border-radius:var(--radius-sm) !important;} input:focus,select:focus,textarea:focus{outline:none !important;border-color:var(--teal) !important;box-shadow:0 0 0 3px rgba(24,94,94,.18) !important;} #paypal-button-container,#paypal-button-container *{background:initial;} /* ---- Video tour section --------------------------------------------------- */ .video-section h2{color:var(--ink) !important;} /* ---- Blog specifics ------------------------------------------------------- */ .container{max-width:var(--maxw);} .blog-category{background:var(--gold) !important;color:var(--ink) !important;font-weight:700 !important;letter-spacing:.06em;} .intro{border-left:3px solid var(--teal) !important;} .outro{background:var(--footer) !important;color:#eef4f0 !important;} .outro a{color:var(--gold) !important;} .related-links{border-top:1px solid var(--line) !important;} .related-links h3{color:var(--ink) !important;} /* ---- Footer (deep teal + cream text) -------------------------------------- */ footer,.footer,.footer-content{background:var(--footer) !important;color:#dfe8e6 !important;border-top:3px solid var(--gold) !important;} footer a,.footer a,.footer-content a{color:var(--gold) !important;} footer a:hover,.footer a:hover{color:#e6cf8a !important;} .footer-title{color:#fff !important;} .copyright{color:#9fb0ad !important;} .contact-item{color:#eef4f0 !important;} .contact-item i{color:var(--gold) !important;} /* ---- De-teal / contrast fixes for legacy accent colors -------------------- */ .section-subtitle{color:var(--muted) !important;} .card-location,.location,.property-content .location{color:var(--muted) !important;font-weight:500 !important;} .card-location i,.card-location .fa-map-marker-alt,.location i,.location-highlight i{color:var(--teal) !important;} .booking-badge{ background:rgba(255,255,255,.6) !important;color:var(--ink) !important;border:1px solid var(--teal) !important; font-weight:600 !important;letter-spacing:.03em; } /* ---- Mobile: stop horizontal overflow from large serif headlines --------- */ html,body{max-width:100%;overflow-x:hidden;} img,video{max-width:100%;} h1,h2,h3,h4,.main-title,.hero-title,.section-title,.amenities-title, .reviews-title,.location-title,.blog-title{overflow-wrap:break-word;word-wrap:break-word;} @media (max-width:600px){ .main-title,.hero-title,.hero h1,.hero-section h1,.hero-section .main-title{font-size:clamp(1.55rem,7vw,2.1rem) !important;line-height:1.14 !important;} h1{font-size:clamp(1.55rem,7vw,2.1rem) !important;} h2,.section-title,.amenities-title,.reviews-title,.location-title{font-size:clamp(1.25rem,5.5vw,1.7rem) !important;} .floating-buttons{right:.75rem !important;bottom:.75rem !important;} } /* ---- Legal / Policies / Terms pages: card panels, sticky TOC, callouts ---- */ .lux-legal .legal-content,.lux-legal .policies-content,.lux-legal .terms-content{max-width:var(--maxw);margin:0 auto;} .lux-legal .section,.lux-legal .policy-section,.lux-legal .term-item{ background:var(--surface) !important;border:1px solid var(--line) !important;border-left:4px solid var(--coast) !important; border-radius:var(--radius) !important;box-shadow:var(--shadow-sm) !important; padding:1.6rem 1.8rem !important;margin-bottom:1.4rem !important; transition:box-shadow .3s ease,transform .3s ease,border-color .3s ease; } .lux-legal .section:hover,.lux-legal .policy-section:hover,.lux-legal .term-item:hover{ box-shadow:var(--shadow-md) !important;border-left-color:var(--gold) !important; } .lux-legal .section h2,.lux-legal .policy-section h2{ font-family:var(--serif) !important;color:var(--ink) !important;font-size:1.4rem !important;font-weight:600 !important; display:flex;align-items:center;gap:.6rem;border:none !important;border-bottom:1px solid var(--line) !important; padding:0 0 .6rem !important;margin-bottom:.9rem !important; } .lux-legal .section h2 i,.lux-legal .policy-section h2 i{color:var(--teal) !important;font-size:1.1rem;} .lux-legal .section h3,.lux-legal .policy-section h3{color:var(--teal) !important;font-family:var(--sans) !important;font-weight:700 !important;letter-spacing:.02em;font-size:.95rem !important;text-transform:uppercase;margin-top:1.1rem;} .lux-legal .term-title{font-family:var(--serif) !important;color:var(--ink) !important;font-size:1.15rem !important;font-weight:600 !important;} .lux-legal .term-number{background:var(--gold) !important;color:var(--ink) !important;} .lux-legal .high-risk-terms{border-left-color:#c0392b !important;} /* Highlight the numbers guests care about (times / fees / deadlines) */ .lux-legal .section strong,.lux-legal .policy-section strong,.lux-legal .term-content strong{ color:var(--ink) !important;font-weight:700 !important; box-shadow:inset 0 -0.42em 0 rgba(201,168,76,.28); } /* Quick-jump TOC — sticky on desktop */ .lux-legal .table-of-contents{ background:var(--surface) !important;border:1px solid var(--line) !important;border-radius:var(--radius) !important; box-shadow:var(--shadow-sm) !important;padding:1.3rem 1.6rem !important;margin:0 0 2rem !important; } .lux-legal .table-of-contents a{color:var(--teal) !important;text-decoration:none;} .lux-legal .table-of-contents a:hover{color:var(--ink) !important;text-decoration:underline;} .lux-legal .table-of-contents li{margin:.35rem 0;} @media(min-width:960px){ .lux-legal .table-of-contents{position:sticky;top:1rem;z-index:5;} } .lux-legal html{scroll-behavior:smooth;} .lux-legal [id]{scroll-margin-top:5rem;} /* ---- Scroll reveal (progressive enhancement; visible if JS off) ----------- */ html.lux-js [data-lux]{opacity:0;transform:translateY(16px);} html.lux-js [data-lux].lux-in{opacity:1;transform:none;transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1);} @media (prefers-reduced-motion:reduce){ *{transition:none !important;scroll-behavior:auto !important;} html.lux-js [data-lux]{opacity:1 !important;transform:none !important;} }