/* Theme Name: ListingHive Child (TravelVillas Luxury) Theme URI: https://travelvillas.in/ Description: TravelVillas bespoke luxury design proposal matching client approved mockup with real database listings. Author: TravelVillas Author URI: https://travelvillas.in/ Template: listinghive Version: 1.0.0 Text Domain: listinghive-child */ /* ============================================================== TRAVELVILLAS LUXURY THEME STYLING Approved Client Mockup Implementation for ListingHive ============================================================== */ :root { --tv-green: #173f35; --tv-ink: #243a32; --tv-muted: #737970; --tv-line: #e4e7df; --tv-cream: #f6f6ef; --tv-lime: #e4ebbc; --tv-white: #ffffff; --tv-wa: #167843; --tv-wa-hover: #116638; --tv-serif: 'DM Serif Display', Georgia, 'Times New Roman', serif; --tv-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } /* Base Resets & Typography */ body { font-family: var(--tv-sans) !important; color: var(--tv-ink) !important; background-color: #ffffff !important; line-height: 1.6 !important; } h1, h2, h3, h4, .hp-listing__title a, .hp-page__title, .header-logo__name, .entry-title, .elementor-heading-title { font-family: var(--tv-serif) !important; color: var(--tv-ink) !important; font-weight: 400 !important; letter-spacing: -0.5px !important; } h1 { font-size: 46px !important; line-height: 1.15 !important; } h2 { font-size: 36px !important; line-height: 1.2 !important; } h3 { font-size: 24px !important; line-height: 1.3 !important; } /* Top Announcement Utility Bar */ .tv-topline { background-color: var(--tv-green); color: #ffffff; padding: 8px 24px; font-size: 11px; letter-spacing: 0.8px; font-weight: 600; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .tv-topline-inner { max-width: 1320px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; } .tv-topline-link { color: var(--tv-lime) !important; text-decoration: none !important; font-size: 12px !important; font-weight: 500 !important; display: inline-flex; align-items: center; transition: opacity 0.2s ease; } .tv-topline-link:hover { opacity: 0.85; } @media (max-width: 768px) { .tv-topline-inner { flex-direction: column; gap: 4px; text-align: center; } } /* Header & Navigation Styling */ .site-header, .header-navbar { background: #ffffff !important; border-bottom: 1px solid var(--tv-line) !important; } .header-navbar__menu ul li a { font-family: var(--tv-sans) !important; font-weight: 500 !important; font-size: 14px !important; color: var(--tv-ink) !important; transition: color 0.2s ease !important; } .header-navbar__menu ul li a:hover, .header-navbar__menu ul li.current-menu-item > a { color: var(--tv-green) !important; } /* All Buttons (Deep Forest Green) */ .button--primary, button[type="submit"], input[type="submit"], .button, .btn, .btn-primary, .elementor-button, .hp-menu--tabbed .hp-menu__item--current a, .woocommerce a.button.alt, .woocommerce button.button.alt { background-color: var(--tv-green) !important; border-color: var(--tv-green) !important; color: #ffffff !important; border-radius: 7px !important; font-family: var(--tv-sans) !important; font-weight: 600 !important; padding: 12px 24px !important; transition: background-color 0.25s ease, transform 0.2s ease, box-shadow 0.2s ease !important; box-shadow: none !important; } .button--primary:hover, button[type="submit"]:hover, input[type="submit"]:hover, .button:hover, .btn:hover, .elementor-button:hover { background-color: #28564a !important; border-color: #28564a !important; color: #ffffff !important; transform: translateY(-1px) !important; box-shadow: 0 4px 12px rgba(23, 63, 53, 0.15) !important; } /* Secondary / Outline Buttons */ .button--secondary, .btn-outline, .elementor-button.elementor-size-sm { background-color: transparent !important; border: 1px solid #bac6bb !important; color: var(--tv-green) !important; border-radius: 7px !important; font-weight: 600 !important; } .button--secondary:hover, .btn-outline:hover { background-color: var(--tv-cream) !important; border-color: var(--tv-green) !important; } /* ============================================================== HIVEPRESS LISTING CARDS (MOCKUP ACCURACY) ============================================================== */ .hp-listing--view-block { border: none !important; border-radius: 0 !important; overflow: visible !important; background: transparent !important; box-shadow: none !important; transition: none !important; margin-bottom: 24px !important; } .hp-listing--view-block:hover { transform: none !important; box-shadow: none !important; } .hp-listing--view-block .hp-listing__header { border-radius: 10px !important; overflow: hidden !important; position: relative !important; height: 248px !important; background: #e6e9e0 !important; } .hp-listing--view-block .hp-listing__header img { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 10px !important; transition: transform 0.45s ease !important; } .hp-listing--view-block:hover .hp-listing__header img { transform: scale(1.035) !important; } /* Listing Content Area */ .hp-listing--view-block .hp-listing__content { padding: 17px 1px 0 !important; background: transparent !important; } .hp-listing--view-block .hp-listing__title { font-family: var(--tv-sans, 'DM Sans', sans-serif) !important; font-size: 21px !important; font-weight: 600 !important; line-height: 1.25 !important; letter-spacing: -0.5px !important; margin: 0 0 4px !important; } .hp-listing--view-block .hp-listing__title a { color: var(--tv-ink) !important; text-decoration: none !important; transition: color 0.2s ease !important; } .hp-listing--view-block .hp-listing__title a:hover { color: var(--tv-green) !important; } /* Location Tag */ .hp-listing--view-block .hp-listing__location, .hp-listing--view-block .hp-listing__category { font-size: 10px !important; text-transform: uppercase !important; letter-spacing: 1.5px !important; color: #6c7b66 !important; font-weight: 600 !important; margin-bottom: 6px !important; } .hp-listing--view-block .hp-listing__location i { color: var(--tv-green) !important; } /* Attributes / Feature Chips */ .hp-listing--view-block .hp-listing__attributes, .hp-listing--view-block .hp-listing__details { display: flex !important; gap: 8px !important; flex-wrap: wrap !important; margin: 14px 0 0 !important; } .hp-listing--view-block .hp-listing__attribute { font-size: 11px !important; color: #667363 !important; background-color: #ffffff !important; border: 1px solid #e4e8de !important; border-radius: 4px !important; padding: 4px 7px !important; font-weight: 500 !important; } /* Price Box */ .hp-listing--view-block .hp-listing__price { font-size: 21px !important; font-weight: 700 !important; color: var(--tv-ink) !important; border-top: 1px solid #dce2d6 !important; padding-top: 15px !important; margin-top: 15px !important; display: flex !important; align-items: flex-end !important; justify-content: space-between !important; } /* HivePress Filter Sidebar & Search */ .hp-form--listing-filter { background: #ffffff !important; border: 1px solid var(--tv-line) !important; border-radius: 10px !important; padding: 24px !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02) !important; } .hp-field input[type=checkbox]:checked + span::before { background-color: var(--tv-green) !important; border-color: var(--tv-green) !important; } .hp-field--number-range .ui-slider-range { background-color: var(--tv-green) !important; } /* ============================================================== SINGLE LISTING PAGE & WHATSAPP CARD ============================================================== */ .hp-listing--view-page .hp-listing__title { font-size: 38px !important; letter-spacing: -1px !important; margin-bottom: 12px !important; } .hp-listing--view-page .hp-listing__location { font-size: 14px !important; color: #6c7b66 !important; margin-bottom: 24px !important; } /* Luxury WhatsApp Sticky Card */ .tv-whatsapp-card { background: #ffffff; border: 1px solid var(--tv-line); border-radius: 12px; padding: 26px; box-shadow: 0 8px 30px rgba(23, 63, 53, 0.08); margin-bottom: 30px; position: sticky; top: 30px; } .tv-wa-badge { font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px; font-weight: 700; color: #6c7b66; margin-bottom: 6px; } .tv-whatsapp-card h3 { font-size: 26px !important; margin: 0 0 10px 0 !important; } .tv-wa-note { font-size: 13px; color: var(--tv-muted); line-height: 1.5; margin-bottom: 18px; } .tv-wa-price { font-size: 13px; color: var(--tv-muted); padding: 12px 0; border-top: 1px solid var(--tv-line); border-bottom: 1px solid var(--tv-line); margin-bottom: 18px; } .tv-wa-price strong { font-size: 26px; color: var(--tv-green); font-weight: 700; } .tv-btn-whatsapp { background-color: var(--tv-wa) !important; color: #ffffff !important; border-radius: 8px !important; font-size: 14px !important; font-weight: 600 !important; padding: 14px 20px !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; text-decoration: none !important; transition: background-color 0.2s ease, transform 0.15s ease !important; width: 100% !important; box-sizing: border-box !important; } .tv-btn-whatsapp:hover { background-color: var(--tv-wa-hover) !important; color: #ffffff !important; transform: translateY(-1px) !important; } .tv-wa-trust { display: flex; justify-content: space-between; font-size: 11px; color: #6c7b66; margin-top: 14px; } /* Mobile Persistent Sticky Bottom Bar */ .tv-mobile-sticky-bar { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: #ffffff; border-top: 1px solid var(--tv-line); padding: 12px 20px; z-index: 99999; box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.08); align-items: center; justify-content: space-between; } .tv-mobile-sticky-info { display: flex; flex-direction: column; } .tv-mobile-villa { font-family: var(--tv-serif); font-size: 15px; color: var(--tv-ink); font-weight: 600; } .tv-mobile-rate { font-size: 14px; color: var(--tv-green); font-weight: 700; } .tv-mobile-rate small { font-size: 11px; color: var(--tv-muted); font-weight: 400; } .tv-mobile-wa-btn { background: var(--tv-wa); color: #ffffff !important; padding: 10px 18px; border-radius: 6px; font-size: 13px; font-weight: 600; text-decoration: none !important; } @media (max-width: 768px) { .tv-mobile-sticky-bar { display: flex; } body.single-hp_listing { padding-bottom: 75px !important; } } /* ============================================================== FOOTER STYLING ============================================================== */ .site-footer { background: #fafbf7 !important; border-top: 1px solid var(--tv-line) !important; padding: 50px 0 25px !important; margin-top: 60px !important; } .footer-navbar__copyright { font-size: 13px !important; color: var(--tv-muted) !important; } .footer-navbar__menu ul li a { font-size: 13px !important; color: var(--tv-muted) !important; } .footer-navbar__menu ul li a:hover { color: var(--tv-green) !important; } /* ============================================================== HOMEPAGE MOCKUP SECTIONS (DESIGN OVERRIDES) ============================================================== */ .tv-luxury-home { padding-bottom: 60px; } .tv-section { padding: 65px 0; } .tv-soft { background-color: var(--tv-cream); } .tv-section-heading { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 35px; gap: 20px; } .tv-section-heading h2 { font-size: 38px !important; margin: 6px 0 0 0 !important; } .tv-section-heading p { color: var(--tv-muted); font-size: 14px; margin: 6px 0 0 0; } .tv-text-link { color: var(--tv-green) !important; font-weight: 600; font-size: 13px; text-decoration: underline !important; text-underline-offset: 4px; white-space: nowrap; } .tv-eyebrow { text-transform: uppercase; font-size: 11px; font-weight: 700; letter-spacing: 2px; color: #6c7b66; display: block; } /* Hero Section */ .tv-hero-wrap { padding: 0 20px; } .tv-hero { height: 520px; background: var(--tv-green); border-radius: 14px; position: relative; overflow: hidden; color: #ffffff; display: flex; align-items: center; } .tv-hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14, 43, 33, 0.82) 0%, rgba(14, 43, 33, 0.4) 60%, rgba(14, 43, 33, 0.15) 100%); z-index: 1; } .tv-hero-content { position: relative; z-index: 2; padding: 0 40px; max-width: 720px; } /* Hero Section - Mockup Text Color (Fixes grey text defect) */ .hero, .hero-content, .tv-hero, .tv-hero-content { color: #ffffff !important; } .hero .eyebrow, .hero-content .eyebrow, .tv-hero .eyebrow, .tv-hero-content .tv-eyebrow, .tv-hero-content .eyebrow { color: #ffffff !important; opacity: 0.95 !important; margin-bottom: 14px; } .hero h1, .hero-content h1, .tv-hero-title, .tv-hero h1 { font-size: 58px !important; line-height: 1.08 !important; letter-spacing: -1.5px !important; color: #ffffff !important; margin: 0 !important; } .hero h1 em, .hero-content h1 em, .tv-hero-title em, .tv-hero h1 em { font-style: italic !important; color: #e4ebbc !important; } .hero p, .hero-content p, .tv-hero p, .tv-hero-subtitle, .tv-hero-content p { font-size: 16px !important; color: #f0f1e9 !important; line-height: 1.6 !important; margin: 18px 0 28px !important; max-width: 500px !important; } .hero-location, .hero-location span, .tv-hero .hero-location { color: #ffffff !important; } .hero-location small, .tv-hero .hero-location small { color: #e0e7dc !important; } .btn-hero { background: #ffffff !important; color: var(--tv-green) !important; border-color: #ffffff !important; padding: 14px 28px !important; font-size: 15px !important; display: inline-block; text-decoration: none !important; } .btn-hero:hover { background: var(--tv-lime) !important; color: var(--tv-green) !important; } /* Search Box */ .tv-search-wrap { max-width: 1080px; margin: -48px auto 0; position: relative; z-index: 10; padding: 0 20px; } .tv-search-form { display: grid; grid-template-columns: 1.4fr 1fr 1fr auto; background: #ffffff; border: 1px solid var(--tv-line); border-radius: 12px; padding: 14px 16px 14px 24px; box-shadow: 0 14px 38px rgba(20, 47, 32, 0.09); align-items: center; gap: 12px; } .tv-search-field { display: flex; align-items: center; gap: 12px; border-right: 1px solid var(--tv-line); padding-right: 14px; } .tv-search-field:nth-child(3) { border-right: none; } .tv-search-field .icon { width: 20px; height: 20px; color: #6c7b66; flex-shrink: 0; } .tv-field-inner { flex: 1; min-width: 0; } .tv-field-inner label { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 1.4px; font-weight: 700; color: #6c7b66; margin-bottom: 3px; } .tv-field-inner select, .tv-field-inner input { width: 100%; border: none; background: transparent; color: var(--tv-ink); font-size: 14px; padding: 2px 0; outline: none; font-family: var(--tv-sans); } .tv-btn-search { padding: 15px 26px !important; font-size: 14px !important; white-space: nowrap; } /* Trust Strip */ .tv-trust-strip { display: flex; justify-content: center; gap: 45px; padding: 32px 10px 10px; font-size: 13px; color: #667267; flex-wrap: wrap; } .tv-trust-strip span { display: inline-flex; align-items: center; gap: 8px; } .tv-trust-strip .icon { width: 17px; height: 17px; color: var(--tv-green); } /* Destinations Grid */ .tv-destinations-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; } .tv-destination-card { height: 240px; border-radius: 10px; overflow: hidden; position: relative; display: block; text-decoration: none !important; } .tv-dest-img-wrap { width: 100%; height: 100%; position: relative; background: #38534a; } .tv-dest-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .tv-destination-card:hover .tv-dest-img-wrap img { transform: scale(1.05); } .tv-dest-overlay { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(12, 36, 26, 0.8) 0%, rgba(12, 36, 26, 0.1) 60%, transparent 100%); } .tv-dest-info { position: absolute; bottom: 20px; left: 20px; z-index: 2; color: #ffffff; } .tv-dest-info h3 { font-size: 22px !important; color: #ffffff !important; margin: 0 !important; } .tv-dest-info p { font-size: 12px; color: #e6eadd; margin: 3px 0 0 0; } /* Villas Grid */ .tv-villas-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; } .tv-villa-card { border: none; border-radius: 0; overflow: visible; background: transparent; box-shadow: none; transition: none; } .tv-villa-card:hover { transform: none; box-shadow: none; } .tv-villa-photo { height: 248px; overflow: hidden; position: relative; display: block; background: #e6e9e0; border-radius: 10px; } .tv-villa-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; transition: transform 0.45s ease; } .tv-villa-card:hover .tv-villa-photo img { transform: scale(1.035); } .tv-badge { position: absolute; top: 14px; left: 14px; background: #ffffff; color: var(--tv-green); font-size: 10px; font-weight: 600; letter-spacing: 0.2px; padding: 5px 9px; border-radius: 4px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } .tv-villa-body { padding: 17px 1px 0; background: transparent; } .tv-villa-location { font-size: 11px; text-transform: uppercase; letter-spacing: 1.2px; color: #6c7b66; font-weight: 600; margin-bottom: 6px; } .tv-villa-title { font-size: 21px !important; line-height: 1.3 !important; margin: 0 0 10px 0 !important; } .tv-villa-title a { color: var(--tv-ink) !important; text-decoration: none !important; } .tv-villa-title a:hover { color: var(--tv-green) !important; } .tv-villa-features { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; } .tv-villa-features span { font-size: 11px; color: #667363; background-color: var(--tv-cream); border: 1px solid var(--tv-line); border-radius: 4px; padding: 4px 8px; } .tv-villa-price-row { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--tv-line); padding-top: 14px; } .tv-price-tag strong { font-size: 21px; color: var(--tv-ink); font-weight: 700; } .tv-price-tag small { font-size: 12px; color: var(--tv-muted); } .tv-btn-card { font-size: 13px; font-weight: 600; color: var(--tv-green) !important; text-decoration: underline !important; text-underline-offset: 4px; } /* Collections Grid */ .tv-collections-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .tv-collection-card { height: 280px; border-radius: 12px; background: var(--tv-green); position: relative; overflow: hidden; display: flex; align-items: flex-end; padding: 28px; text-decoration: none !important; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06); transition: transform 0.3s ease; } .tv-collection-card:nth-child(2) { background: #24483d; } .tv-collection-card:nth-child(3) { background: #2e5348; } .tv-collection-card:hover { transform: translateY(-4px); } .tv-coll-content h3 { font-size: 26px !important; color: #ffffff !important; margin: 0 0 8px 0 !important; } .tv-coll-content p { font-size: 13px; color: #e2e8dc; margin: 0; line-height: 1.5; } /* Story & Reviews Grid */ .tv-story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; } .tv-step { display: flex; gap: 16px; margin: 22px 0; } .tv-step-num { width: 38px; height: 38px; border-radius: 50%; background: #ffffff; border: 1px solid var(--tv-line); color: var(--tv-green); font-weight: 700; font-size: 13px; display: grid; place-items: center; flex-shrink: 0; } .tv-step strong { display: block; font-size: 15px; color: var(--tv-ink); margin-bottom: 3px; } .tv-step p { font-size: 13px; color: var(--tv-muted); margin: 0; } .tv-reviews-card { background: #ffffff; border: 1px solid var(--tv-line); border-radius: 14px; padding: 34px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04); } .tv-rating-badge { display: inline-block; background: #e6f7eb; color: #167843; padding: 5px 12px; border-radius: 6px; font-weight: 700; font-size: 12px; margin-top: 6px; } .tv-review-item { border-top: 1px solid var(--tv-line); padding-top: 16px; margin-top: 16px; } .tv-review-text { font-style: italic; font-size: 13px; color: #4f584e; line-height: 1.6; margin: 0 0 6px 0; } .tv-reviewer { font-size: 12px; font-weight: 600; color: var(--tv-green); display: block; } /* WhatsApp Banner */ .tv-whatsapp-banner { background: var(--tv-green); color: #ffffff; border-radius: 14px; padding: 45px 50px; display: flex; justify-content: space-between; align-items: center; gap: 30px; margin: 50px 0; } .tv-whatsapp-banner h2 { color: #ffffff !important; font-size: 34px !important; margin: 0 0 8px 0 !important; } .tv-whatsapp-banner p { color: #d5dfd2; font-size: 15px; margin: 0; } .tv-btn-wa-large { background: var(--tv-wa) !important; border-color: var(--tv-wa) !important; color: #ffffff !important; padding: 16px 28px !important; font-size: 15px !important; border-radius: 8px !important; display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; text-decoration: none !important; flex-shrink: 0; } .tv-btn-wa-large:hover { background: var(--tv-wa-hover) !important; border-color: var(--tv-wa-hover) !important; } /* Responsive Breakpoints */ @media (max-width: 1080px) { .tv-destinations-grid { grid-template-columns: repeat(3, 1fr); } .tv-villas-grid { grid-template-columns: repeat(2, 1fr); } .tv-search-form { grid-template-columns: 1fr 1fr; } .tv-btn-search { grid-column: 1 / -1; } } @media (max-width: 768px) { .tv-hero { height: 480px; } .tv-hero-content { padding: 0 20px; } .tv-hero-title { font-size: 38px !important; } .tv-destinations-grid { grid-template-columns: 1fr 1fr; } .tv-villas-grid { grid-template-columns: 1fr; } .tv-collections-grid { grid-template-columns: 1fr; } .tv-story-grid { grid-template-columns: 1fr; } .tv-whatsapp-banner { flex-direction: column; text-align: center; padding: 30px 20px; } .tv-search-form { grid-template-columns: 1fr; padding: 18px; } .tv-search-field { border-right: none; border-bottom: 1px solid var(--tv-line); padding: 10px 0; } } /* ============================================================== IMAGE & CAROUSEL ALIGNMENT ENHANCEMENTS ============================================================== */ /* Hero Image Layering */ .tv-hero { position: relative !important; overflow: hidden !important; height: 520px !important; display: flex !important; align-items: center !important; background-color: var(--tv-green) !important; } .tv-hero-bg-img { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; z-index: 1 !important; } .tv-hero-overlay { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; background: linear-gradient(180deg, rgba(23,63,53,0.7) 0%, rgba(23,63,53,0.82) 100%) !important; z-index: 2 !important; } .tv-hero-content { position: relative !important; z-index: 3 !important; } /* Collections Cards Image Layering */ .tv-collection-card { position: relative !important; height: 280px !important; border-radius: 12px !important; overflow: hidden !important; display: flex !important; align-items: flex-end !important; text-decoration: none !important; background-color: var(--tv-green) !important; } .tv-coll-bg { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; transition: transform 0.5s ease !important; z-index: 1 !important; } .tv-collection-card:hover .tv-coll-bg { transform: scale(1.06) !important; } .tv-coll-overlay { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; background: linear-gradient(180deg, rgba(23,63,53,0.15) 0%, rgba(23,63,53,0.85) 100%) !important; z-index: 2 !important; } .tv-coll-content { position: relative !important; z-index: 3 !important; padding: 24px !important; color: #ffffff !important; } .tv-coll-badge { display: inline-block; background: rgba(228, 235, 188, 0.25); color: var(--tv-lime); border: 1px solid rgba(228, 235, 188, 0.4); font-size: 10px; font-weight: 700; letter-spacing: 1px; padding: 3px 9px; border-radius: 4px; margin-bottom: 8px; text-transform: uppercase; } /* Why TravelVillas Story Image */ .tv-story-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; align-items: center; } .tv-story-photo img { width: 100% !important; height: 420px !important; object-fit: cover !important; border-radius: 14px !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important; display: block !important; } /* HivePress Slider & Card Image Stacking Protection */ .hp-listing--view-block .hp-listing__header { border-radius: 12px 12px 0 0 !important; overflow: hidden !important; position: relative !important; height: 230px !important; background: #eef1ea !important; } .hp-listing--view-block .hp-listing__image { height: 230px !important; overflow: hidden !important; } .hp-listing--view-block .hp-listing__image img { width: 100% !important; height: 230px !important; object-fit: cover !important; display: block !important; } /* Prevent multi-image vertical flash before slick initializes */ .hp-listing--view-block .hp-listing__image:not(.slick-initialized) img:not(:first-child) { display: none !important; } /* Destination Card Image Fix */ .tv-destination-card { position: relative !important; height: 240px !important; border-radius: 12px !important; overflow: hidden !important; display: block !important; } .tv-dest-img-wrap { width: 100% !important; height: 100% !important; position: relative !important; } .tv-dest-img-wrap img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform 0.5s ease !important; } .tv-destination-card:hover .tv-dest-img-wrap img { transform: scale(1.06) !important; } .tv-dest-overlay { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; background: linear-gradient(180deg, rgba(23,63,53,0.1) 0%, rgba(23,63,53,0.85) 100%) !important; z-index: 2 !important; } .tv-dest-info { position: absolute !important; bottom: 0 !important; left: 0 !important; right: 0 !important; padding: 20px !important; color: #ffffff !important; z-index: 3 !important; } /* ============================================================== APPROVED CLIENT MOCKUP: SINGLE VILLA DETAIL PAGE STYLES ============================================================== */ :root{--ink:#243a32;--green:#173f35;--muted:#737970;--line:#e4e7df;--cream:#f6f6ef;--lime:#e4ebbc;--white:#fff;--serif:Georgia,'Times New Roman',serif;--sans:'DM Sans',Arial,sans-serif}*{box-sizing:border-box}body{margin:0;background:#fff;color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.55}button,input,select{font:inherit}button,a,input,select{ -webkit-tap-highlight-color:transparent}button,a{cursor:pointer}button{color:inherit}a{color:inherit;text-decoration:none}button{background:none;border:0}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #a5b968;outline-offset:4px}img{display:block;width:100%;height:100%;object-fit:cover}h1,h2,h3,p{margin:0}h1,h2{font-family:var(--serif);font-weight:400;letter-spacing:-1.7px;line-height:1.12}h1{font-size:60px}h2{font-size:42px}h3{font-weight:600;font-size:21px;line-height:1.4}p{color:var(--muted)}.container{max-width:1320px;margin:auto;padding:0 48px}.icon{width:21px;height:21px;display:inline-block;vertical-align:middle;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}.topline{background:var(--green);color:#fff;text-align:center;font-size:12px;letter-spacing:.7px;padding:8px 15px}.topline span{color:var(--lime);margin-left:12px}.nav{height:91px;display:flex;align-items:center;justify-content:space-between;gap:25px}.logo{display:flex;align-items:center;gap:10px;line-height:1}.logo svg{width:41px;height:44px}.logo strong{font-family:'Manrope',var(--sans);font-size:25px;letter-spacing:-1.2px;font-weight:800}.logo small{display:block;font-size:9px;letter-spacing:3.15px;margin-top:8px;font-weight:500}.nav-links,.nav-actions{display:flex;align-items:center;gap:29px;font-size:14px;font-weight:500}.nav-links a.active{color:var(--green);border-bottom:1px solid var(--green);padding-bottom:4px}.nav-actions{gap:19px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:1px solid var(--green);border-radius:7px;padding:13px 22px;font-weight:600;font-size:14px;background:var(--green);color:white;white-space:nowrap;transition:background .2s,transform .2s}.btn:hover{background:#28564a;transform:translateY(-1px)}.btn.outline{color:var(--green);background:transparent;border-color:#bac6bb}.btn.outline:hover{background:#eef1e8}.btn.light{background:white;color:var(--green);border-color:white}.btn.small{padding:10px 15px}.icon-btn{border:1px solid var(--line);width:39px;height:39px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:white}.menu-toggle{display:none}.hero-wrap{padding:0 24px}.hero{height:548px;position:relative;border-radius:13px;background:#335647;overflow:hidden;color:white;isolation:isolate}.hero>img{position:absolute;z-index:-2;object-position:center 55%}.hero:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(10,33,25,.62),rgba(10,33,25,.07)),linear-gradient(0deg,rgba(5,22,14,.2),transparent)}.hero-content{max-width:1224px;margin:0 auto;padding:86px 40px}.eyebrow{text-transform:uppercase;font-size:11px;font-weight:600;letter-spacing:2.4px;display:block;margin-bottom:20px}.hero h1{font-size:67px;max-width:650px;line-height:1.08;letter-spacing:-2px}.hero h1 em{font-weight:400;color:#e4ebbc}.hero p{color:#f0f1e9;font-size:16px;margin-top:22px;max-width:430px}.hero-location{position:absolute;bottom:40px;right:48px;font-size:13px;display:flex;align-items:center;gap:8px}.hero-location small{display:block;color:#e0e7dc;font-size:11px}.search-wrap{max-width:1065px;margin:-46px auto 0;position:relative;z-index:2;padding:0 20px}.search{display:grid;grid-template-columns:1.3fr 1fr .85fr auto;background:#fff;border-radius:10px;padding:17px 17px 17px 8px;box-shadow:0 12px 38px #142f2014;border:1px solid #e4e6df;align-items:center}.search-field{padding:0 24px;border-right:1px solid var(--line);display:flex;align-items:center;gap:13px;min-width:0}.search-field:nth-child(3){border:0}.field-inner{min-width:0;flex:1}.field-inner label,.field-inner .field-label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:1.4px;font-weight:700;margin-bottom:4px}.field-inner select,.field-inner input{width:100%;border:0;background:transparent;color:var(--muted);font-size:14px;padding:2px 0;outline-offset:2px}.search .btn{padding:17px 25px}.trust-strip{display:flex;justify-content:center;gap:62px;padding:31px 10px 35px;font-size:12px;color:#667267}.trust-strip span{display:flex;align-items:center;gap:8px}.trust-strip .icon{width:17px;height:17px}.section{padding:64px 0}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:30px}.section-heading .eyebrow{color:#6b7c5c;margin-bottom:11px;font-size:10px}.section-heading p{margin-top:13px;font-size:14px}.text-link{font-size:13px;font-weight:600;text-decoration:underline;text-underline-offset:6px;white-space:nowrap}.destinations{display:grid;grid-template-columns:repeat(5,1fr);gap:19px}.destination{height:243px;border-radius:10px;overflow:hidden;position:relative;color:white;text-align:left;background:#38534a}.destination:after,.collection:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#0c241aca,transparent 70%)}.destination img,.collection img{transition:transform .5s}.destination:hover img,.collection:hover img{transform:scale(1.045)}.destination div{position:absolute;bottom:21px;left:20px;z-index:1}.destination h3{font-size:21px;font-family:var(--serif);font-weight:400}.destination p{color:#e6eadd;font-size:12px;margin-top:4px}.soft{background:var(--cream)}.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:27px}.card{min-width:0}.card-photo{height:248px;border-radius:10px;overflow:hidden;position:relative;background:#e6e9e0;display:block}.card-photo img{transition:transform .45s}.card-photo:hover img{transform:scale(1.035)}.tag{display:inline-flex;align-items:center;gap:5px;border-radius:4px;padding:5px 9px;font-size:10px;font-weight:600;letter-spacing:.2px;background:#f6f7ee;color:var(--green)}.card-photo .tag{position:absolute;top:14px;left:14px}.heart{position:absolute;right:14px;top:14px;width:33px;height:33px;border-radius:50%;background:#fffc;display:grid;place-items:center}.heart .icon{width:17px;height:17px}.heart.saved{color:#a7473a;background:white}.heart.saved svg{fill:#a7473a}.card-body{padding:17px 1px 0}.card-location{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:#6c7b66;font-weight:600;margin-bottom:6px}.card-title{display:flex;justify-content:space-between;gap:8px;align-items:center}.card-title h3{font-size:21px;letter-spacing:-.5px}.card-type{font-size:13px;color:var(--muted);margin-top:5px}.card-features{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.card-features span{font-size:11px;color:#667363;background:white;border:1px solid #e4e8de;border-radius:4px;padding:4px 7px}.card-price{display:flex;align-items:end;justify-content:space-between;padding-top:15px;margin-top:15px;border-top:1px solid #dce2d6;font-size:11px;color:var(--muted)}.card-price strong{font-size:21px;color:var(--ink);letter-spacing:-.6px;font-weight:650}.card-price .text-link{font-size:12px;color:var(--green)}.card-price small{display:block;margin-top:3px;font-size:10px}.collections{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:22px}.collection{height:330px;border-radius:10px;overflow:hidden;position:relative;color:white;text-align:left}.collection-copy{position:absolute;left:26px;bottom:25px;z-index:1}.collection h3{font-family:var(--serif);font-size:28px;font-weight:400;line-height:1.15}.collection p{color:#e3e9dd;margin-top:9px;font-size:12px}.story-grid{display:grid;grid-template-columns:.95fr 1fr;gap:80px;align-items:center}.story-photo{height:420px;border-radius:10px;overflow:hidden;position:relative}.story-copy .eyebrow{font-size:10px;color:#74806a}.story-copy h2{font-size:43px;max-width:410px}.story-copy>p{font-size:14px;margin:20px 0;max-width:420px}.reason{display:flex;align-items:start;gap:14px;margin:20px 0}.reason>.icon{color:#65804e;margin-top:4px}.reason strong{font-size:14px;font-weight:600}.reason p{font-size:12px;margin-top:2px}.trip-banner{background:var(--green);color:white;border-radius:11px;padding:45px 48px;display:flex;align-items:center;justify-content:space-between;gap:28px}.trip-banner h2{font-size:35px}.trip-banner p{color:#d5dfd2;font-size:14px;margin-top:11px}.footer{padding:56px 0 21px;margin-top:60px;border-top:1px solid var(--line);background:#fafbf7}.footer-main{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.1fr;gap:45px}.footer p{font-size:12px;max-width:265px;margin-top:19px}.footer h4{font-size:12px;margin:0 0 18px;font-weight:650}.footer a:not(.logo){display:block;font-size:12px;color:#677469;margin:10px 0}.footer-bottom{border-top:1px solid var(--line);margin-top:40px;padding-top:19px;display:flex;justify-content:space-between;font-size:10px;color:#858b80}.page-intro{background:var(--cream);padding:35px 0 30px}.breadcrumb{font-size:11px;color:#7b8377;margin-bottom:22px;display:flex;gap:9px}.page-intro h1{font-size:47px}.page-intro p{margin-top:13px;font-size:14px}.page-intro .search-wrap{margin:26px 0 0;padding:0;max-width:none}.page-intro .search{box-shadow:none}.listing-body{padding-top:29px}.filter-chips{display:flex;align-items:center;gap:10px;padding-bottom:25px;flex-wrap:wrap;border-bottom:1px solid var(--line)}.chip{border:1px solid var(--line);border-radius:7px;display:flex;align-items:center;gap:7px;padding:9px 14px;font-size:12px;background:white}.chip .icon{width:16px;height:16px}.chip.active{border-color:var(--green);color:var(--green);background:#eef3e8}.listing-layout{display:grid;grid-template-columns:224px 1fr;gap:35px;margin-top:30px}.filters{border:1px solid var(--line);border-radius:9px;padding:20px;align-self:start}.filter-title{display:flex;justify-content:space-between;align-items:center}.filter-title strong{font-size:15px}.filter-title button{font-size:10px;text-decoration:underline;color:#66765d}.filter-group{border-top:1px solid var(--line);padding-top:21px;margin-top:21px}.filter-group h4{margin:0 0 13px;font-size:12px}.filter-group label{display:flex;align-items:center;gap:8px;font-size:12px;margin:11px 0;color:#697164}.filter-group input[type=checkbox]{accent-color:var(--green);height:15px;width:15px;margin:0}.filter-group input[type=range]{width:100%;accent-color:var(--green)}.range-values{font-size:10px;display:flex;justify-content:space-between;margin-top:7px}.filter-help{background:var(--cream);padding:19px 14px;border-radius:7px;margin-top:23px}.filter-help p{font-size:11px;margin:7px 0 15px}.filter-help strong{font-size:13px}.filter-help .btn{font-size:11px;width:100%;padding:9px}.results-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:21px;font-size:13px}.results-top p{font-size:11px;margin-top:4px}.results-top select{border:1px solid var(--line);padding:8px 11px;border-radius:5px;font-size:11px;color:var(--ink);background:#fff}.listing-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 25px}.listing-cards .card-photo{height:252px}.listing-cards .card-features span{background:var(--cream)}.end-results{margin:35px auto;text-align:center;font-size:12px;color:var(--muted)}.empty{grid-column:1/-1;padding:65px 15px;text-align:center;background:var(--cream);border-radius:10px}.empty p{margin:12px 0 23px}.detail-top{padding-top:28px}.detail-title{display:flex;align-items:end;justify-content:space-between;margin-bottom:24px}.detail-title h1{font-size:43px;margin-top:9px}.detail-location{font-size:13px;color:#6e7c69;margin-top:10px}.detail-actions{display:flex;gap:10px}.detail-actions button{border:1px solid var(--line);border-radius:6px;padding:9px 13px;font-size:12px;display:flex;gap:7px;align-items:center}.gallery{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:195px 195px;gap:10px;border-radius:11px;overflow:hidden;position:relative}.gallery>button{padding:0;overflow:hidden;background:#e3e9dd}.gallery>button:first-child{grid-row:1/3}.gallery>button img{transition:transform .4s}.gallery>button:hover img{transform:scale(1.04)}.gallery .gallery-all{position:absolute;right:18px;bottom:18px;background:white;border-radius:6px;padding:10px 16px;font-size:12px;display:flex;gap:7px;align-items:center;box-shadow:0 2px 9px #0001}.detail-layout{display:grid;grid-template-columns:minmax(0,1fr) 352px;gap:60px;margin-top:29px;align-items:start}.detail-nav{display:flex;gap:30px;border-bottom:1px solid var(--line);padding:0 0 17px;font-size:12px;position:relative}.detail-nav a:first-child{color:var(--green);font-weight:700}.detail-section{padding:30px 0;border-bottom:1px solid var(--line);scroll-margin-top:25px}.detail-section h2{font-size:29px;letter-spacing:-.6px;margin-bottom:17px}.detail-section p{font-size:14px;line-height:1.8}.property-specs{display:flex;gap:24px;flex-wrap:wrap;margin:0 0 22px;font-size:12px}.property-specs span{display:flex;gap:7px;align-items:center}.property-specs .icon{width:18px;height:18px}.highlights{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:23px 0 0}.highlight{background:var(--cream);border-radius:7px;padding:17px 12px}.highlight .icon{color:#778c5e}.highlight h4{font-size:12px;margin:9px 0 4px}.highlight p{font-size:10px;line-height:1.5}.amenities{display:grid;grid-template-columns:repeat(3,1fr);gap:21px 10px;margin:25px 0}.amenities>span{display:flex;align-items:center;gap:10px;font-size:12px}.amenities .icon{color:#6a7d60}.bedroom-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.bedroom img{height:160px;border-radius:7px}.bedroom h4{font-size:13px;margin:11px 0 3px}.bedroom p{font-size:11px}.location-panel{background:#f1f2e9;border-radius:8px;padding:25px;display:flex;gap:17px;align-items:start}.location-panel h4{font-size:15px;margin:0 0 5px}.location-panel p{font-size:12px}.rules{display:grid;grid-template-columns:1fr 1fr;gap:23px}.rules strong{font-size:13px}.rules p{font-size:12px;margin-top:8px}.booking{position:sticky;top:22px;border:1px solid #dfe4d8;border-radius:11px;padding:25px;box-shadow:0 7px 25px #142d1d08}.booking-eyebrow{font-size:10px;color:#748064;margin-bottom:7px}.booking-price{font-size:31px;font-weight:600;letter-spacing:-1px}.booking-price span{font-size:12px;color:var(--muted);font-weight:400;letter-spacing:0}.booking>p{font-size:10px;margin:4px 0 20px}.booking-dates{display:grid;grid-template-columns:1fr 1fr;border:1px solid #d6ddcf;border-radius:6px;overflow:hidden}.booking-dates label{padding:10px;display:block;min-width:0}.booking-dates label+label{border-left:1px solid #d6ddcf}.booking label>span{font-size:9px;font-weight:700;letter-spacing:1px;display:block;text-transform:uppercase}.booking input,.booking select{border:0;background:white;color:var(--ink);font-size:12px;padding-top:5px;width:100%;min-width:0}.booking-guests{display:block;border:1px solid #d6ddcf;padding:10px;border-radius:6px;margin-top:9px}.booking .btn{width:100%;margin-top:16px}.booking .booking-note{text-align:center;font-size:10px;margin:10px 0 18px}.booking-contact{padding-top:18px;border-top:1px solid var(--line);display:flex;gap:10px;align-items:center;justify-content:center;font-size:11px}.booking-bottom{font-size:10px;margin-top:20px;text-align:center;color:#74816c;display:flex;gap:6px;align-items:center;justify-content:center}.booking-bottom .icon{width:15px;height:15px}.booking-fine{font-size:10px;margin-top:17px;text-align:center;color:var(--muted)}dialog{border:0;border-radius:13px;padding:30px;max-width:600px;width:calc(100% - 32px);box-shadow:0 25px 90px #001b2440;color:var(--ink)}dialog::backdrop{background:#14291fcc;backdrop-filter:blur(4px)}dialog h2{font-size:31px;margin:7px 0 17px}dialog p{font-size:14px;line-height:1.7;margin:12px 0}dialog .close{position:absolute;right:12px;top:12px;background:white;border-radius:50%;padding:6px;z-index:2;display:flex}dialog.gallery-dialog{max-width:1060px;padding:0;overflow:hidden;background:#15291f}dialog.gallery-dialog img{max-height:75vh;object-fit:contain}dialog.gallery-dialog .gallery-caption{display:flex;justify-content:space-between;align-items:center;color:white;padding:13px 20px;font-size:13px}dialog.gallery-dialog .gallery-caption button{color:white;padding:10px}.dialog-form label{display:block;margin:17px 0;font-size:12px}.dialog-form input{display:block;border:1px solid #cbd4c4;padding:12px;border-radius:6px;margin-top:6px;width:100%}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%) translateY(100px);background:var(--green);color:#fff;padding:13px 24px;border-radius:8px;font-size:13px;z-index:20;box-shadow:0 5px 25px #0002;transition:transform .25s;max-width:90vw;text-align:center}#toast.show{transform:translateX(-50%) translateY(0)}.mobile-book{display:none} @media(min-width:1600px){.hero-content{padding-left:0}.hero{height:600px}.hero-content{padding-top:106px}.hero h1{font-size:76px}} @media(max-width:1100px){.container{padding:0 30px}.nav-links{gap:17px}.nav-actions .phone-label{display:none}.hero-content{padding-left:55px}.destinations{gap:12px}.destination{height:225px}.destination div{left:14px}.story-grid{gap:42px}.listing-layout{grid-template-columns:190px 1fr;gap:23px}.filters{padding:16px}.detail-layout{gap:32px;grid-template-columns:minmax(0,1fr) 315px}.detail-nav{gap:18px}.search-field{padding:0 15px}.highlights{grid-template-columns:1fr}.highlight{display:flex;gap:12px;align-items:center}.highlight h4{margin:0}.highlight p{display:none}.hero h1{font-size:61px}} @media(max-width:760px){.container{padding:0 21px}.topline{font-size:10px;padding:7px}.topline span{display:none}.nav{height:77px;gap:10px}.logo strong{font-size:23px}.logo svg{width:34px;height:36px}.logo small{font-size:8px;letter-spacing:2.8px}.nav-links{display:none;position:absolute;top:105px;left:0;right:0;background:white;padding:25px;z-index:10;box-shadow:0 14px 20px #0001}.nav-links.open{display:flex;flex-direction:column;align-items:start;gap:20px}.nav-actions{gap:11px}.nav-actions>.btn{display:none}.nav-actions>.icon-btn{width:34px;height:34px}.menu-toggle{display:flex;padding:5px}.hero-wrap{padding:0 10px}.hero{height:485px;border-radius:9px}.hero-content{padding:52px 25px}.hero .eyebrow{font-size:9px;letter-spacing:1.7px}.hero h1{font-size:46px;letter-spacing:-1.6px}.hero p{font-size:14px;max-width:285px;margin-top:20px}.hero-location{bottom:62px;right:24px;font-size:11px}.hero-location small{font-size:9px}.hero:after{background:linear-gradient(90deg,#10291bb3,#10291b32)}.search-wrap{margin-top:-34px;padding:0 23px}.search{grid-template-columns:1fr 1fr;padding:10px;border-radius:8px;gap:0}.search-field{padding:10px;gap:8px}.search-field:first-child{grid-column:1/3;border-right:0;border-bottom:1px solid var(--line);margin-bottom:4px}.search-field:nth-child(2){border-right:1px solid var(--line)}.search-field:nth-child(3){border:0}.search-field>.icon{width:17px;height:17px}.field-inner label,.field-inner .field-label{font-size:9px}.field-inner input,.field-inner select{font-size:12px}.search>.btn{grid-column:1/3;margin-top:10px;padding:12px}.trust-strip{gap:15px;padding:22px 0 6px;font-size:9px}.trust-strip span{gap:5px}.trust-strip span:nth-child(3){display:none}.trust-strip .icon{width:14px;height:14px}.section{padding:43px 0}.section-heading{margin-bottom:23px;align-items:start}.section-heading h2,h2{font-size:32px;letter-spacing:-1px}.section-heading .eyebrow{font-size:9px}.section-heading p{font-size:12px;max-width:270px}.section-heading .text-link{font-size:10px;margin-top:39px}.destinations{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.destination{height:196px}.destination:last-child{grid-column:1/3;height:160px}.destination div{bottom:16px;left:15px}.destination h3{font-size:23px}.destination p{font-size:10px}.cards{grid-template-columns:1fr;gap:29px}.card-photo{height:258px}.card-title h3{font-size:22px}.card-price{font-size:11px}.collections{grid-template-columns:1fr;gap:15px}.collection{height:230px}.story-grid{grid-template-columns:1fr;gap:30px}.story-photo{height:290px}.story-copy h2{font-size:35px}.story-copy>p{font-size:14px}.story-copy .eyebrow{margin-bottom:12px}.trip-banner{padding:31px 25px;display:block}.trip-banner h2{font-size:31px}.trip-banner p{font-size:12px}.trip-banner .btn{margin-top:22px}.footer{margin-top:30px;padding-top:37px}.footer-main{grid-template-columns:1fr 1fr;gap:30px}.footer-main>div:first-child{grid-column:1/3}.footer-bottom{gap:14px;flex-direction:column;font-size:9px}.page-intro{padding:25px 0}.breadcrumb{font-size:10px;margin-bottom:17px}.page-intro h1{font-size:38px}.page-intro p{font-size:12px}.page-intro .search-wrap{margin-top:22px}.listing-body{padding-top:21px}.filter-chips{gap:8px;padding-bottom:20px}.chip{font-size:10px;padding:8px 10px;gap:5px}.chip .icon{width:14px;height:14px}.listing-layout{display:block;margin-top:22px}.filters{display:none;margin-bottom:24px}.filters.open{display:block}.results-top{font-size:12px;align-items:start}.results-top select{font-size:10px;max-width:150px}.listing-cards{grid-template-columns:1fr}.listing-cards .card-photo{height:270px}.detail-top{padding-top:20px}.detail-title{display:block;margin-bottom:20px}.detail-title h1{font-size:36px}.detail-title .tag{font-size:9px}.detail-location{font-size:11px}.detail-actions{margin-top:15px}.detail-actions button{font-size:10px;padding:7px 10px}.gallery{grid-template-columns:1fr 1fr;grid-template-rows:240px 120px;gap:6px}.gallery>button:first-child{grid-column:1/3;grid-row:auto}.gallery>button:nth-child(4),.gallery>button:nth-child(5){display:none}.gallery .gallery-all{font-size:10px;right:10px;bottom:10px;padding:8px}.detail-layout{display:flex;flex-direction:column;gap:25px;margin-top:22px}.detail-main{width:100%}.detail-nav{gap:0;justify-content:space-between;font-size:10px}.detail-section{padding:27px 0}.detail-section h2{font-size:27px}.detail-section p{font-size:13px}.property-specs{gap:10px 18px;font-size:10px}.property-specs .icon{width:16px;height:16px}.highlights{grid-template-columns:1fr}.amenities{grid-template-columns:1fr 1fr;font-size:11px;gap:20px 10px}.amenities>span{font-size:11px;gap:8px}.bedroom-grid{gap:13px}.bedroom img{height:135px}.bedroom p{font-size:10px}.rules{gap:17px}.rules p{font-size:11px}.booking{position:static;width:100%;margin-bottom:10px}.mobile-book{display:flex;justify-content:space-between;align-items:center;position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--line);padding:12px 21px;z-index:5;font-size:11px}.mobile-book strong{font-size:21px}.mobile-book .btn{padding:11px 20px}.detail-page .footer{padding-bottom:95px}.detail-page #toast{bottom:86px}} @media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}} /* Final readability and gallery refinements */ .section-heading p{font-size:15px}.card-location{font-size:11px}.card-type{font-size:14px}.card-features span{font-size:12px}.card-price{font-size:12px}.card-price small{font-size:11px}.trust-strip{font-size:13px}.destination p{font-size:13px}.collection p{font-size:14px}.reason strong{font-size:15px}.reason p{font-size:14px}.story-copy>p{font-size:15px}.footer h4,.footer a:not(.logo),.footer p{font-size:13px}.filter-title{gap:8px}.filter-title strong{font-size:14px}.filter-group label{font-size:13px}.results-top select{font-size:12px}.detail-layout>aside{position:sticky;top:22px}.booking{position:static}.gallery.single-photo{display:block;height:400px}.gallery.single-photo>button:first-child{width:100%;height:100%}.highlight p{font-size:12px}.booking>p{font-size:12px}.booking .booking-note{font-size:11px}.booking-dates label>span,.booking-guests>span{font-size:10px}.booking input,.booking select{font-size:13px}.booking-contact{width:100%;font-size:12px}.bedroom p{font-size:12px}.bedroom h4{font-size:14px}.detail-nav{font-size:13px}.property-specs{font-size:13px}.amenities>span{font-size:14px}.hero-location{bottom:55px}.card-photo>a{display:block;height:100%}.story-photo img{object-position:70% center}@media(max-width:760px){.detail-layout>aside{position:static;width:100%}.trust-strip{font-size:10px}.section-heading p{font-size:13px}.destination p{font-size:11px}.collection p{font-size:13px}.detail-nav{font-size:11px}.property-specs{font-size:12px}.amenities>span{font-size:12px}.gallery.single-photo{height:320px}.hero-location{bottom:62px}.desktop-break{display:none}} #toast{visibility:hidden;opacity:0}#toast.show{visibility:visible;opacity:1} /* Supplied TravelVillas identity and direct WhatsApp enquiries */ .logo{display:inline-flex;flex-shrink:0}.logo .brand-logo{width:207px;height:73px;object-fit:contain;display:block}.footer .logo .brand-logo{width:215px;height:76px}.whatsapp-invitation{border-top:1px solid var(--line);padding-top:23px;margin-top:20px}.whatsapp-mark{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:#e6f7eb;color:#157744;margin-bottom:14px}.whatsapp-mark .icon{width:23px;height:23px}.whatsapp-invitation h3{font-family:var(--serif);font-size:29px;font-weight:400;line-height:1.2;letter-spacing:-.5px}.whatsapp-invitation p{font-size:14px;line-height:1.7;margin:13px 0 6px}.btn.whatsapp-btn{background:#167843;border-color:#167843;font-size:14px}.btn.whatsapp-btn:hover{background:#116638;border-color:#116638}.whatsapp-panel .booking-note{margin:12px 0 20px;font-size:12px}.whatsapp-panel .booking-bottom{border-top:1px solid var(--line);padding-top:18px;font-size:12px}.footer-main .logo{margin-top:-12px}.mobile-book .whatsapp-btn{font-size:12px;padding:12px 14px;gap:7px}.mobile-book .whatsapp-btn .icon{width:18px;height:18px}@media(max-width:760px){.logo .brand-logo{width:172px;height:61px}.footer .logo .brand-logo{width:200px;height:71px}.whatsapp-panel{padding:25px}.nav{height:77px}} /* Owner and account links */ .topline{padding:0}.utility-bar{display:flex;align-items:center;justify-content:space-between;min-height:35px}.topline .utility-bar>span{color:#fff;margin:0;letter-spacing:.4px}.utility-bar button{color:#e4ebbc;font-size:12px;display:flex;align-items:center;gap:7px;padding:5px 0}.utility-bar .icon{width:15px;height:15px} .tv-luxury-detail { padding-bottom: 60px; } .tv-detail-breadcrumb { font-size: 12px; color: #7b8377; margin-bottom: 22px; display: flex; gap: 9px; flex-wrap: wrap; } .tv-detail-breadcrumb a { color: #7b8377; text-decoration: none; } .tv-detail-breadcrumb a:hover { color: var(--tv-green); } .tv-badge-pill { display: inline-flex; align-items: center; gap: 6px; background: #f6f7ee; color: #173f35; border-radius: 4px; padding: 5px 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.5px; margin-bottom: 10px; } .tv-villa-description-text { font-size: 15px; line-height: 1.8; color: #4f584e; margin-top: 15px; } .tv-gallery-item { display: block; width: 100%; height: 100%; overflow: hidden; position: relative; } .tv-gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .tv-gallery-item:hover img { transform: scale(1.05); } /* ========================================================================== TravelVillas Phase 10: Robust Non-Overlapping Booking Card & Stacking Fix ========================================================================== */ .detail-sidebar { position: sticky; top: 24px; width: 360px; max-width: 100%; flex-shrink: 0; z-index: 10; } .tv-booking-card { position: relative !important; display: flex !important; flex-direction: column !important; background: #FFFFFF !important; border: 1px solid var(--line, #E5E7EB) !important; border-radius: 16px !important; padding: 28px !important; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06) !important; margin-bottom: 24px !important; clear: both !important; box-sizing: border-box !important; width: 100% !important; } .tv-booking-header { margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line, #E5E7EB); } .tv-booking-header .booking-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #64748B; margin-bottom: 6px; } .tv-booking-header .booking-price { font-size: 28px; font-weight: 800; color: #0F172A; line-height: 1.2; } .tv-booking-header .booking-price span { font-size: 14px; font-weight: 400; color: #64748B; } .tv-rate-note { font-size: 12px; color: #64748B; margin-top: 6px; margin-bottom: 0; } .tv-booking-actions { display: flex !important; flex-direction: column !important; gap: 12px !important; margin: 18px 0 !important; width: 100% !important; clear: both !important; } .btn.tv-btn-whatsapp, a.tv-btn-whatsapp { display: flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; width: 100% !important; height: 50px !important; background-color: #00BF63 !important; color: #FFFFFF !important; font-size: 15px !important; font-weight: 700 !important; border-radius: 10px !important; border: none !important; text-decoration: none !important; box-sizing: border-box !important; transition: background-color 0.2s ease, transform 0.1s ease !important; cursor: pointer !important; box-shadow: 0 4px 12px rgba(0, 191, 99, 0.25) !important; } .btn.tv-btn-whatsapp:hover, a.tv-btn-whatsapp:hover { background-color: #009E52 !important; color: #FFFFFF !important; transform: translateY(-1px) !important; } .tv-btn-reply, button.tv-btn-reply, .hp-listing__action.hp-listing__action--message.tv-btn-reply { display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; width: 100% !important; height: 46px !important; background: #F8FAFC !important; color: #1E293B !important; font-size: 14px !important; font-weight: 600 !important; border-radius: 10px !important; border: 1.5px solid #CBD5E1 !important; text-decoration: none !important; box-sizing: border-box !important; margin: 0 !important; cursor: pointer !important; transition: background-color 0.2s ease, border-color 0.2s ease !important; } .tv-btn-reply:hover, button.tv-btn-reply:hover, .hp-listing__action.hp-listing__action--message.tv-btn-reply:hover { background: #F1F5F9 !important; border-color: #94A3B8 !important; color: #0F172A !important; } .tv-booking-trust { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: #475569; font-weight: 500; margin-bottom: 14px; padding-top: 10px; border-top: 1px solid var(--line, #E5E7EB); } .tv-booking-card .booking-bottom { border-top: 1px solid var(--line, #E5E7EB); padding-top: 14px; font-size: 12px; color: #64748B; display: flex; align-items: center; gap: 8px; } .tv-booking-card .booking-bottom a { color: #0F172A; font-weight: 700; text-decoration: none; } /* HivePress native sidebar containment safeguard */ .hp-listing--view-page .hp-page__sidebar, .hp-listing--view-page .sidebar { display: flex !important; flex-direction: column !important; gap: 20px !important; position: sticky !important; top: 24px !important; clear: both !important; } .hp-listing--view-page .hp-listing__actions--primary, .hp-listing--view-page .hp-listing__attributes { position: static !important; float: none !important; clear: both !important; margin: 0 !important; display: flex !important; flex-direction: column !important; gap: 12px !important; width: 100% !important; box-sizing: border-box !important; } .hp-listing--view-page .hp-listing__action--message { width: 100% !important; margin: 0 !important; box-sizing: border-box !important; } /* Responsive & Mobile Sticky Bar */ .tv-mobile-bar { display: none; } @media (max-width: 900px) { .detail-layout { flex-direction: column !important; } .detail-sidebar { width: 100% !important; position: static !important; margin-top: 30px !important; } } @media (max-width: 767px) { body.single-hp_listing, .detail-page-main { padding-bottom: 84px !important; } .tv-mobile-bar { display: flex !important; position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; height: 72px !important; background: #FFFFFF !important; border-top: 1px solid #E2E8F0 !important; padding: 10px 16px !important; z-index: 99999 !important; align-items: center !important; justify-content: space-between !important; box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08) !important; box-sizing: border-box !important; } .tv-mobile-bar .tv-mobile-price { font-size: 13px !important; color: #334155 !important; } .tv-mobile-bar .tv-mobile-price strong { font-size: 18px !important; color: #0F172A !important; display: block !important; } .tv-mobile-bar .tv-mobile-cta { height: 44px !important; padding: 0 16px !important; font-size: 13px !important; border-radius: 8px !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; width: auto !important; } } /* ========================================================================== Child Theme Overrides: Hide Legacy Elementor Black Bar & Legacy Footer (These rules ONLY take effect when ListingHive Child is active!) ========================================================================== */ /* 1. Hide legacy Elementor black bar (hello@travelvillas.in / Twitter) */ .elementor-element-7a2f216, [data-id="7a2f216"], .elementor-location-header [data-id="7a2f216"] { display: none !important; height: 0 !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; visibility: hidden !important; } /* 2. Hide legacy Elementor footer with the background image */ .elementor-location-footer, footer[data-elementor-type="footer"], .elementor-1193 { display: none !important; height: 0 !important; visibility: hidden !important; } /* 3. Luxury Mockup Footer Styling (Matches Screenshot 1 & Fixes Terms/Privacy) */ .footer, .tv-luxury-footer, .site-footer { background-color: #fafbf7 !important; background-image: none !important; color: #677469 !important; padding: 56px 0 24px !important; margin-top: 50px !important; border-top: 1px solid #e4e7df !important; clear: both !important; position: relative !important; } .footer h4, .tv-luxury-footer h4 { color: #243a32 !important; font-size: 13px !important; font-weight: 700 !important; margin-bottom: 18px !important; letter-spacing: 0.3px !important; } .footer p, .tv-luxury-footer p { color: #677469 !important; font-size: 12px !important; line-height: 1.6 !important; } .footer a:not(.logo), .tv-luxury-footer a:not(.logo) { color: #677469 !important; text-decoration: none !important; font-size: 12px !important; transition: color 0.2s ease !important; } .footer a:not(.logo):hover, .tv-luxury-footer a:not(.logo):hover { color: #173f35 !important; } .footer .footer-bottom, .tv-luxury-footer .footer-bottom { border-top: 1px solid #e4e7df !important; margin-top: 40px !important; padding-top: 19px !important; display: flex !important; justify-content: space-between !important; align-items: center !important; font-size: 11px !important; color: #858b80 !important; } .footer-bottom a, .tv-luxury-footer .footer-bottom a { display: inline !important; color: #858b80 !important; text-decoration: none !important; margin: 0 !important; padding: 0 !important; font-size: 11px !important; transition: color 0.2s ease !important; } .footer-bottom a:hover, .tv-luxury-footer .footer-bottom a:hover { color: #173f35 !important; text-decoration: underline !important; } .footer-bottom-links { display: inline-flex !important; align-items: center !important; gap: 8px !important; white-space: nowrap !important; } .footer-sep { display: inline !important; color: #858b80 !important; font-size: 12px !important; line-height: 1 !important; user-select: none !important; } .tv-footer-contact { display: block !important; font-weight: 600 !important; margin-bottom: 6px !important; } @media (max-width: 768px) { .footer-main, .tv-luxury-footer .footer-main { grid-template-columns: 1fr 1fr !important; gap: 30px !important; } .footer-bottom, .tv-luxury-footer .footer-bottom { flex-direction: column !important; gap: 12px !important; text-align: center !important; justify-content: center !important; align-items: center !important; } .footer-bottom-links { display: inline-flex !important; justify-content: center !important; align-items: center !important; gap: 8px !important; flex-wrap: wrap !important; } } @media (max-width: 540px) { .footer-main, .tv-luxury-footer .footer-main { grid-template-columns: 1fr !important; gap: 24px !important; } } /* ========================================================================== TravelVillas Refined Styling: Top Bar, Sticky Header, Dropdowns & Equal Cards ========================================================================== */ /* 1. Top Announcement Bar: WhatsApp Strictly Aligned to the Right */ .topline.tv-topline-bar { background: var(--tv-green, #173f35) !important; color: #ffffff !important; width: 100% !important; padding: 0 !important; margin: 0 !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; } .topline .utility-bar { display: flex !important; flex-direction: row !important; justify-content: space-between !important; align-items: center !important; width: 100% !important; max-width: 1320px !important; margin: 0 auto !important; padding: 0 48px !important; min-height: 38px !important; box-sizing: border-box !important; } .utility-left-text { text-align: left !important; color: #ffffff !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: 0.4px !important; flex: 1 !important; } .utility-wa-link { margin-left: auto !important; display: inline-flex !important; align-items: center !important; gap: 7px !important; color: var(--tv-lime, #e4ebbc) !important; font-size: 12px !important; font-weight: 600 !important; text-decoration: none !important; white-space: nowrap !important; transition: opacity 0.2s ease, transform 0.2s ease !important; } .utility-wa-link:hover { opacity: 0.85 !important; transform: translateY(-1px) !important; color: #ffffff !important; } .utility-wa-link .icon { width: 16px !important; height: 16px !important; vertical-align: middle !important; } @media (max-width: 768px) { .topline .utility-bar { padding: 0 16px !important; min-height: 32px !important; } .utility-left-text { display: none !important; /* Hide left text on small mobile screens to keep WhatsApp CTA prominent */ } .utility-wa-link { margin: 0 auto !important; /* Center on mobile */ font-size: 11px !important; } } /* 2. Sticky Navigation Header */ .tv-header-wrapper { position: -webkit-sticky !important; position: sticky !important; top: 0 !important; z-index: 9999 !important; background: #ffffff !important; border-bottom: 1px solid var(--tv-line, #e4e7df) !important; box-shadow: 0 2px 14px rgba(23, 63, 53, 0.05) !important; transition: box-shadow 0.3s ease !important; } .tv-header-container { padding: 0 48px !important; max-width: 1320px !important; margin: 0 auto !important; box-sizing: border-box !important; } .nav { height: 82px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 20px !important; width: 100% !important; position: relative !important; } /* Brand Logo */ .nav .logo { display: inline-flex !important; align-items: center !important; flex-shrink: 0 !important; text-decoration: none !important; } .nav .brand-logo { width: 190px !important; height: 66px !important; object-fit: contain !important; display: block !important; } /* Topline Announcement Bar - Global */ .topline.tv-topline-bar { background: var(--tv-green, #173f35) !important; color: #ffffff !important; padding: 0 !important; min-height: 35px !important; border: none !important; } .topline.tv-topline-bar .utility-bar { display: flex !important; align-items: center !important; justify-content: space-between !important; min-height: 35px !important; max-width: 1320px !important; margin: 0 auto !important; padding: 0 48px !important; box-sizing: border-box !important; } .utility-left-text { color: #ffffff !important; font-size: 12px !important; letter-spacing: 0.4px !important; font-weight: 400 !important; display: inline-block !important; } .utility-wa-link { color: var(--tv-lime, #e4ebbc) !important; font-size: 12px !important; font-weight: 500 !important; display: inline-flex !important; align-items: center !important; gap: 7px !important; text-decoration: none !important; cursor: pointer !important; transition: opacity 0.2s ease !important; } .utility-wa-link:hover { opacity: 0.85 !important; } .utility-wa-link span { display: inline !important; color: var(--tv-lime, #e4ebbc) !important; font-size: 12px !important; font-weight: 500 !important; } .utility-wa-link .icon { width: 15px !important; height: 15px !important; stroke: currentColor !important; fill: none !important; } /* ------------------------------------------------------------- DESKTOP NAVIGATION (min-width: 992px) Matches client mockup exactly ------------------------------------------------------------- */ @media (min-width: 992px) { .nav-links { display: flex !important; align-items: center !important; gap: 24px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; position: static !important; background: transparent !important; box-shadow: none !important; border: none !important; max-height: none !important; overflow: visible !important; } /* Top-level direct nav links only - protects dropdown items from unwanted inheritance */ #tv-nav-menu > a, .tv-header-wrapper .nav-links > a { font-size: 14px !important; font-weight: 500 !important; color: var(--tv-ink, #243a32) !important; text-decoration: none !important; padding: 8px 0 !important; white-space: nowrap !important; transition: color 0.15s ease !important; display: inline-block !important; } #tv-nav-menu > a:hover, #tv-nav-menu > a.active, .tv-header-wrapper .nav-links > a:hover, .tv-header-wrapper .nav-links > a.active { color: var(--tv-green, #173f35) !important; } #tv-nav-menu > a.active, .tv-header-wrapper .nav-links > a.active { border-bottom: 2px solid var(--tv-green, #173f35) !important; padding-bottom: 6px !important; } /* STRICTLY HIDE MOBILE BUTTONS ON DESKTOP - PREVENTS DUPLICATE SIGN IN */ #tv-nav-menu .mobile-owner-link, #tv-nav-menu .mobile-signin-link, #tv-nav-menu .mobile-logout-link, .tv-header-wrapper .nav-links .mobile-owner-link, .tv-header-wrapper .nav-links .mobile-signin-link, .tv-header-wrapper .nav-links .mobile-logout-link { display: none !important; } /* STRICTLY HIDE HAMBURGER ON DESKTOP */ .menu-toggle { display: none !important; } /* Desktop Destinations & User Dropdowns Container */ .tv-nav-item.tv-nav-dropdown, .tv-nav-item.tv-user-dropdown { position: relative !important; display: inline-flex !important; align-items: center !important; } .tv-dropdown-toggle { display: inline-flex !important; align-items: center !important; gap: 6px !important; cursor: pointer !important; color: var(--tv-ink, #243a32) !important; text-decoration: none !important; font-weight: 500 !important; padding: 8px 0 !important; white-space: nowrap !important; font-size: 14px !important; } .tv-dropdown-toggle:hover, .tv-dropdown-toggle.active { color: var(--tv-green, #173f35) !important; } .tv-dropdown-toggle.active { border-bottom: 2px solid var(--tv-green, #173f35) !important; padding-bottom: 6px !important; } .tv-chevron { transition: transform 0.25s ease !important; } .tv-nav-dropdown:hover .tv-chevron, .tv-nav-dropdown:focus-within .tv-chevron { transform: rotate(180deg) !important; } /* DROPDOWN MENU: STRICT VERTICAL COLUMN (1 DESTINATION PER LINE) */ .tv-dropdown-menu { position: absolute !important; top: 100% !important; left: 0 !important; min-width: 230px !important; background: #ffffff !important; border: 1px solid var(--tv-line, #e4e7df) !important; border-radius: 10px !important; box-shadow: 0 14px 40px rgba(23, 63, 53, 0.12) !important; padding: 8px 0 !important; opacity: 0 !important; visibility: hidden !important; transform: translateY(10px) !important; transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease !important; z-index: 10000 !important; pointer-events: none !important; display: flex !important; flex-direction: column !important; margin-top: 6px !important; max-height: none !important; overflow: visible !important; scrollbar-width: none !important; -ms-overflow-style: none !important; } .tv-dropdown-menu::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; } .tv-nav-dropdown:hover .tv-dropdown-menu, .tv-nav-dropdown:focus-within .tv-dropdown-menu, .tv-user-dropdown:hover .tv-dropdown-menu, .tv-user-dropdown:focus-within .tv-dropdown-menu { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; pointer-events: auto !important; } .tv-user-dropdown .tv-dropdown-menu { right: 0 !important; left: auto !important; min-width: 200px !important; } /* DROPDOWN ITEMS: Clean vertical rows, full width, perfect hover effect */ .tv-dropdown-menu a, .tv-dropdown-menu a.tv-dropdown-item, .tv-dropdown-menu .tv-dropdown-item { display: block !important; width: 100% !important; box-sizing: border-box !important; padding: 10px 22px !important; font-size: 14px !important; font-weight: 500 !important; color: var(--tv-ink, #243a32) !important; text-decoration: none !important; white-space: nowrap !important; text-align: left !important; border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important; border-top: none !important; border-left: none !important; border-right: none !important; background: transparent !important; transition: background-color 0.15s ease, color 0.15s ease, padding-left 0.15s ease !important; } .tv-dropdown-menu a:last-child, .tv-dropdown-menu a.tv-dropdown-item:last-child, .tv-dropdown-menu .tv-dropdown-item:last-child { border-bottom: none !important; } .tv-dropdown-menu a:hover, .tv-dropdown-menu a.tv-dropdown-item:hover, .tv-dropdown-menu .tv-dropdown-item:hover { background-color: var(--tv-cream, #f6f6ef) !important; color: var(--tv-green, #173f35) !important; padding-left: 26px !important; } .tv-dropdown-divider { height: 1px !important; background: var(--tv-line, #e4e7df) !important; margin: 6px 0 !important; } .tv-logout-link { color: #a7473a !important; } /* Desktop Header Actions Matching Mockup Exactly */ .nav-actions { display: flex !important; align-items: center !important; gap: 14px !important; flex-shrink: 0 !important; } .nav-actions > .icon-btn { width: 38px !important; height: 38px !important; border-radius: 50% !important; border: 1px solid var(--tv-line, #e4e7df) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; background: #ffffff !important; color: var(--tv-ink, #243a32) !important; cursor: pointer !important; text-decoration: none !important; transition: all 0.2s ease !important; flex-shrink: 0 !important; } .nav-actions > .icon-btn:hover { background: var(--tv-cream, #f6f6ef) !important; border-color: var(--tv-green, #173f35) !important; color: var(--tv-green, #173f35) !important; transform: translateY(-1px) !important; } .nav-actions > .icon-btn .icon { width: 18px !important; height: 18px !important; } .btn.outline.small.owner-link, .nav-actions > .owner-link, .nav-actions .btn.outline.small.owner-link { background: transparent !important; border: 1px solid var(--tv-green, #173f35) !important; color: var(--tv-green, #173f35) !important; padding: 9px 18px !important; border-radius: 7px !important; font-size: 13px !important; font-weight: 600 !important; text-decoration: none !important; white-space: nowrap !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; transition: all 0.2s ease !important; flex-shrink: 0 !important; } .btn.outline.small.owner-link:hover, .nav-actions > .owner-link:hover, .nav-actions .btn.outline.small.owner-link:hover { background: var(--tv-green, #173f35) !important; color: #ffffff !important; transform: translateY(-1px) !important; } .btn.small.signin-link, .nav-actions > .signin-link, .nav-actions .btn.small.signin-link, .nav-actions > .tv-user-dropdown .tv-user-toggle { background: var(--tv-green, #173f35) !important; border: 1px solid var(--tv-green, #173f35) !important; color: #ffffff !important; padding: 9px 18px !important; border-radius: 7px !important; font-size: 13px !important; font-weight: 600 !important; text-decoration: none !important; white-space: nowrap !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; transition: all 0.2s ease !important; flex-shrink: 0 !important; } .btn.small.signin-link:hover, .nav-actions > .signin-link:hover, .nav-actions .btn.small.signin-link:hover, .nav-actions > .tv-user-dropdown .tv-user-toggle:hover { background: #25584b !important; border-color: #25584b !important; transform: translateY(-1px) !important; } } /* ------------------------------------------------------------- LAPTOP / COMPACT DESKTOP (992px to 1200px) Prevents wrapping and ensures elegant horizontal fit ------------------------------------------------------------- */ @media (min-width: 992px) and (max-width: 1200px) { .tv-header-container { padding: 0 24px !important; } .topline.tv-topline-bar .utility-bar { padding: 0 24px !important; } .nav .brand-logo { width: 160px !important; height: 56px !important; } .nav-links { gap: 15px !important; } .nav-links > a { font-size: 13px !important; } .nav-actions { gap: 10px !important; } .btn.outline.small.owner-link, .nav-actions > .owner-link, .nav-actions .btn.outline.small.owner-link, .btn.small.signin-link, .nav-actions > .signin-link, .nav-actions .btn.small.signin-link { padding: 8px 14px !important; font-size: 12px !important; } } /* ------------------------------------------------------------- TABLET & MOBILE (<= 991px) Unified clean mobile header with drawer & zero overflow ------------------------------------------------------------- */ @media (max-width: 991px) { /* Top Announcement Bar */ .topline.tv-topline-bar { padding: 5px 16px !important; min-height: 32px !important; } .topline.tv-topline-bar .utility-bar { padding: 0 !important; min-height: 28px !important; justify-content: center !important; display: flex !important; align-items: center !important; } .utility-left-text { display: none !important; } .utility-wa-link { margin: 0 auto !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; font-size: 11px !important; font-weight: 600 !important; color: var(--tv-lime, #e4ebbc) !important; text-decoration: none !important; } .utility-wa-link span { display: inline !important; color: var(--tv-lime, #e4ebbc) !important; font-size: 11px !important; font-weight: 600 !important; } .utility-wa-link .icon { width: 14px !important; height: 14px !important; } /* Header Container & Navigation */ .tv-header-container, .tv-header-wrapper .container { padding: 0 16px !important; max-width: 100% !important; box-sizing: border-box !important; } .nav { height: 64px !important; gap: 10px !important; display: flex !important; justify-content: space-between !important; align-items: center !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; position: relative !important; } /* Logo */ .logo, .nav .logo { display: inline-flex !important; align-items: center !important; flex-shrink: 0 !important; max-width: 145px !important; line-height: 1 !important; } .logo .brand-logo, .nav .brand-logo { width: 138px !important; max-width: 138px !important; height: 48px !important; object-fit: contain !important; display: block !important; } /* Right Action Cluster */ .nav-actions { display: flex !important; align-items: center !important; gap: 8px !important; margin-left: auto !important; flex-shrink: 0 !important; } /* STRICTLY HIDE ALL TEXT BUTTONS FROM TOP BAR ON MOBILE/TABLET VIEWPORTS */ .nav-actions > a.owner-link, .nav-actions > a.btn, .nav-actions > .owner-link, .nav-actions > .btn.owner-link, .nav-actions .btn.outline.small.owner-link, .nav-actions > .signin-link, .nav-actions > .btn.signin-link, .nav-actions .btn.small.signin-link, .nav-actions > .tv-user-dropdown { display: none !important; } /* Keep Heart icon clean & compact */ .nav-actions > .icon-btn { display: inline-flex !important; width: 36px !important; height: 36px !important; border-radius: 50% !important; border: 1px solid var(--tv-line, #e4e7df) !important; background: #ffffff !important; color: var(--tv-ink, #243a32) !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; } .nav-actions > .icon-btn .icon { width: 17px !important; height: 17px !important; } /* Mobile Menu Toggle Button */ .menu-toggle { display: inline-flex !important; width: 38px !important; height: 38px !important; border-radius: 8px !important; border: 1px solid var(--tv-line, #e4e7df) !important; background: #ffffff !important; color: var(--tv-ink, #243a32) !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; padding: 0 !important; margin: 0 !important; flex-shrink: 0 !important; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease !important; } .menu-toggle:hover, .menu-toggle:focus, .menu-toggle.active { background: var(--tv-cream, #f6f6ef) !important; border-color: var(--tv-green, #173f35) !important; color: var(--tv-green, #173f35) !important; } .menu-toggle .icon { width: 20px !important; height: 20px !important; stroke-width: 2 !important; pointer-events: none !important; } /* MOBILE NAVIGATION DRAWER - STRICTLY HIDDEN BY DEFAULT, OPENS ONLY ON .open */ #tv-nav-menu, .tv-header-wrapper .nav-links { display: none !important; position: absolute !important; top: 100% !important; left: 0 !important; right: 0 !important; width: 100% !important; background: #ffffff !important; padding: 20px 20px 28px !important; border-bottom: 2px solid var(--tv-line, #e4e7df) !important; box-shadow: 0 16px 36px rgba(0, 0, 0, 0.12) !important; z-index: 9999 !important; flex-direction: column !important; align-items: stretch !important; gap: 6px !important; box-sizing: border-box !important; max-height: 82vh !important; overflow-y: auto !important; } #tv-nav-menu.open, .tv-header-wrapper .nav-links.open { display: flex !important; } #tv-nav-menu a, .tv-header-wrapper .nav-links a { font-size: 15px !important; font-weight: 500 !important; color: var(--tv-ink, #243a32) !important; padding: 10px 0 !important; border-bottom: 1px solid #f2f4ec !important; text-decoration: none !important; display: block !important; text-align: left !important; } #tv-nav-menu a:hover, #tv-nav-menu a.active, .tv-header-wrapper .nav-links a:hover, .tv-header-wrapper .nav-links a.active { color: var(--tv-green, #173f35) !important; } /* Mobile Destinations Accordion */ .tv-nav-dropdown { display: block !important; width: 100% !important; } .tv-dropdown-toggle { display: flex !important; justify-content: space-between !important; align-items: center !important; width: 100% !important; padding: 10px 0 !important; border-bottom: 1px solid #f2f4ec !important; color: var(--tv-ink, #243a32) !important; font-size: 15px !important; font-weight: 500 !important; } .tv-nav-dropdown .tv-dropdown-menu { position: static !important; box-shadow: none !important; border: none !important; padding: 4px 0 6px 14px !important; display: none !important; opacity: 1 !important; visibility: visible !important; transform: none !important; background: #fbfcf8 !important; border-radius: 6px !important; margin-top: 4px !important; max-height: none !important; overflow: visible !important; } .tv-nav-dropdown.open .tv-dropdown-menu { display: flex !important; flex-direction: column !important; } .tv-dropdown-menu a, .tv-dropdown-menu a.tv-dropdown-item, .tv-dropdown-menu .tv-dropdown-item { display: block !important; width: 100% !important; font-size: 14px !important; padding: 8px 10px !important; border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important; color: var(--tv-ink, #243a32) !important; text-align: left !important; } /* Prominent CTA buttons in mobile drawer */ #tv-nav-menu .mobile-owner-link, .tv-header-wrapper .nav-links .mobile-owner-link { display: block !important; background: var(--tv-green, #173f35) !important; color: #ffffff !important; text-align: center !important; padding: 12px 20px !important; border-radius: 8px !important; font-weight: 600 !important; font-size: 14px !important; margin-top: 10px !important; border-bottom: none !important; transition: background 0.2s ease !important; } #tv-nav-menu .mobile-owner-link:hover, .tv-header-wrapper .nav-links .mobile-owner-link:hover { background: #25584b !important; color: #ffffff !important; } #tv-nav-menu .mobile-signin-link, .tv-header-wrapper .nav-links .mobile-signin-link { display: block !important; background: var(--tv-cream, #f6f6ef) !important; color: var(--tv-green, #173f35) !important; border: 1px solid var(--tv-line, #e4e7df) !important; text-align: center !important; padding: 11px 20px !important; border-radius: 8px !important; font-weight: 600 !important; font-size: 14px !important; margin-top: 4px !important; border-bottom: none !important; } #tv-nav-menu .mobile-logout-link, .tv-header-wrapper .nav-links .mobile-logout-link { color: #a7473a !important; font-size: 13px !important; text-align: center !important; border-bottom: none !important; padding: 6px 0 !important; display: block !important; } } /* ------------------------------------------------------------- SMALL SMARTPHONES (<= 480px) Refined spacing and compact logo sizing for small screens ------------------------------------------------------------- */ @media (max-width: 480px) { .tv-header-container, .tv-header-wrapper .container { padding: 0 12px !important; } .logo .brand-logo, .nav .brand-logo { width: 122px !important; max-width: 122px !important; height: 42px !important; } .nav-actions { gap: 6px !important; } .nav-actions > .icon-btn { width: 34px !important; height: 34px !important; } .menu-toggle { width: 36px !important; height: 36px !important; } } @media (max-width: 360px) { .logo .brand-logo, .nav .brand-logo { width: 110px !important; max-width: 110px !important; height: 38px !important; } .nav-actions > .icon-btn { width: 32px !important; height: 32px !important; } .menu-toggle { width: 34px !important; height: 34px !important; } } /* 4. Uniform Card Heights and Clean Luxury Borders */ .cards, .tv-villas-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 24px !important; align-items: stretch !important; } .listing-cards, .tv-related-cards { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 24px !important; align-items: stretch !important; } @media (max-width: 1024px) { .cards, .tv-villas-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 20px !important; } } @media (max-width: 680px) { .cards, .tv-villas-grid, .listing-cards, .tv-related-cards { grid-template-columns: 1fr !important; gap: 20px !important; } } /* Universal Listing Card Enclosure: 1px Line Border, 12px Radius, Equal Height */ .card, .tv-villa-card, .tv-archive-card, .hp-listing--view-block { display: flex !important; flex-direction: column !important; height: 100% !important; width: 100% !important; background: #ffffff !important; border: 1px solid var(--tv-line, #e4e7df) !important; border-radius: 12px !important; overflow: hidden !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important; box-sizing: border-box !important; margin: 0 !important; position: relative !important; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important; } .card:hover, .tv-villa-card:hover, .tv-archive-card:hover, .hp-listing--view-block:hover { transform: translateY(-3px) !important; box-shadow: 0 8px 24px rgba(23, 63, 53, 0.08) !important; border-color: #ccd2c4 !important; } /* Equal Height Photo Container - Flush with 12px top card corners */ .card-photo, .tv-villa-photo, .hp-listing--view-block .hp-listing__header, .hp-listing--view-block .hp-listing__image { height: 230px !important; min-height: 230px !important; max-height: 230px !important; width: 100% !important; position: relative !important; overflow: hidden !important; background: #eef1ea !important; display: block !important; flex-shrink: 0 !important; border-radius: 11px 11px 0 0 !important; border: none !important; box-shadow: none !important; margin: 0 !important; padding: 0 !important; } .card-photo img, .tv-villa-photo img, .hp-listing--view-block .hp-listing__header img, .hp-listing--view-block .hp-listing__image img { width: 100% !important; height: 230px !important; min-height: 230px !important; max-height: 230px !important; object-fit: cover !important; display: block !important; border-radius: 11px 11px 0 0 !important; transition: transform 0.45s ease !important; } .card:hover .card-photo img, .tv-villa-card:hover .tv-villa-photo img, .tv-archive-card:hover .card-photo img, .hp-listing--view-block:hover .hp-listing__image img { transform: scale(1.035) !important; } @media (max-width: 680px) { .card-photo, .tv-villa-photo, .hp-listing--view-block .hp-listing__header, .hp-listing--view-block .hp-listing__image, .card-photo img, .tv-villa-photo img, .hp-listing--view-block .hp-listing__header img, .hp-listing--view-block .hp-listing__image img { height: 210px !important; min-height: 210px !important; max-height: 210px !important; } } /* Card Body: Vertical Flex filling the entire remaining height */ .card-body, .tv-villa-body, .hp-listing--view-block .hp-listing__content { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; padding: 16px 18px 18px !important; background: #ffffff !important; box-sizing: border-box !important; width: 100% !important; } .card-location, .tv-villa-location, .hp-listing--view-block .hp-listing__location, .hp-listing--view-block .hp-listing__category { font-size: 11px !important; letter-spacing: 1.2px !important; text-transform: uppercase !important; color: #6c7b66 !important; font-weight: 600 !important; margin-bottom: 6px !important; flex-shrink: 0 !important; } /* Uniform Title Height: 52px accommodates 2 lines so 1-line and 2-line cards align identically */ .card-title, .tv-villa-title, .hp-listing--view-block .hp-listing__title { margin: 0 0 6px !important; min-height: 52px !important; display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 8px !important; flex-shrink: 0 !important; } .card-title h3, .tv-villa-title a, .hp-listing--view-block .hp-listing__title a { font-family: var(--tv-sans, 'DM Sans', sans-serif) !important; font-size: 20px !important; font-weight: 600 !important; line-height: 1.3 !important; letter-spacing: -0.4px !important; color: var(--tv-ink, #243a32) !important; text-decoration: none !important; transition: color 0.2s ease !important; } .card-title h3:hover, .tv-villa-title a:hover, .hp-listing--view-block .hp-listing__title a:hover { color: var(--tv-green, #173f35) !important; } .card-type, .hp-listing--view-block .hp-listing__details { font-size: 13px !important; color: var(--tv-muted, #737970) !important; margin: 0 0 10px !important; font-weight: 400 !important; flex-shrink: 0 !important; } .card-features, .tv-villa-features, .hp-listing--view-block .hp-listing__attributes { display: flex !important; gap: 6px !important; flex-wrap: wrap !important; margin: 0 0 14px !important; min-height: 28px !important; flex-shrink: 0 !important; } .card-features span, .tv-villa-features span, .hp-listing--view-block .hp-listing__attribute { font-size: 11px !important; color: #667363 !important; background: var(--tv-cream, #f6f6ef) !important; border: 1px solid #e4e8de !important; border-radius: 4px !important; padding: 3px 7px !important; white-space: nowrap !important; display: inline-flex !important; align-items: center !important; gap: 5px !important; } /* Card Price Row Pinned to Bottom with Separator Border */ .card-price, .tv-villa-price-row, .hp-listing--view-block .hp-listing__footer { margin-top: auto !important; padding-top: 14px !important; border-top: 1px solid var(--tv-line, #e4e7df) !important; border-bottom: none !important; border-left: none !important; border-right: none !important; display: flex !important; align-items: flex-end !important; justify-content: space-between !important; background: transparent !important; width: 100% !important; box-sizing: border-box !important; flex-shrink: 0 !important; } .card-price strong, .tv-price-tag strong, .hp-listing--view-block .hp-listing__attribute--price { font-size: 21px !important; color: var(--tv-ink, #243a32) !important; letter-spacing: -0.6px !important; font-weight: 700 !important; background: transparent !important; border: none !important; padding: 0 !important; } .card-price small, .tv-price-tag small { display: block !important; margin-top: 3px !important; font-size: 10px !important; color: var(--tv-muted, #737970) !important; } .card-price .text-link, .tv-btn-card { font-size: 13px !important; font-weight: 600 !important; color: var(--tv-green, #173f35) !important; text-decoration: underline !important; text-underline-offset: 4px !important; white-space: nowrap !important; transition: color 0.2s ease !important; } .card-price .text-link:hover, .tv-btn-card:hover { color: #28564a !important; } /* ============================================================== HIVEPRESS DESTINATIONS, CATEGORY SUB-PAGES & UNIVERSAL CARDS Fully aligned with the approved luxury mockup (OPEN-MOCKUP.html) Guarantees zero overflow, equal height cards, and robust layout ============================================================== */ /* 1. Global Anti-Overflow & Box Sizing Safeguards */ html, body { overflow-x: hidden !important; max-width: 100vw !important; width: 100% !important; position: relative !important; margin: 0 !important; padding: 0 !important; } /* Fix WordPress Admin Bar & Mobile Sticky Header Top Gap */ @media screen and (max-width: 782px) { html { margin-top: 0 !important; } * html body { margin-top: 0 !important; } body.admin-bar .tv-header-wrapper { top: 0 !important; } } @media screen and (min-width: 783px) { body.admin-bar .tv-header-wrapper { top: 32px !important; } } @media (max-width: 991px) { .tv-header-wrapper { top: 0 !important; margin-top: 0 !important; padding-top: 0 !important; position: -webkit-sticky !important; position: sticky !important; } } *, *::before, *::after { box-sizing: border-box !important; } /* 2. Main Page Containers */ .content-area { width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; overflow-x: clip !important; background: transparent !important; } .hp-page { max-width: 1320px !important; margin: 0 auto !important; padding: 32px 24px 60px !important; box-sizing: border-box !important; width: 100% !important; overflow: visible !important; } @media (max-width: 768px) { .hp-page { padding: 20px 16px 48px !important; } } /* 3. Category Header, Title & Parent Theme Margin Reset */ .hp-form--listing-search, .page span[id^=more-]+.hp-form--listing-search, .tax-hp_listing_category .hp-form--listing-search, .tax-hp_listing_category .hp-form--vendor-search { margin-top: 0 !important; margin-bottom: 28px !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } @media only screen and (min-width: 48em) { .tax-hp_listing_category .hp-form--listing-search, .tax-hp_listing_category .hp-form--vendor-search { margin-top: 0 !important; } } @media only screen and (min-width: 75em) { .tax-hp_listing_category .hp-form--listing-search, .tax-hp_listing_category .hp-form--vendor-search { margin-top: 0 !important; } } .tax-hp_listing_category .hp-page__header, .post-type-archive-hp_listing .hp-page__header { margin-bottom: 24px !important; } .hp-page__title { font-family: var(--tv-serif, Georgia, serif) !important; font-size: 38px !important; font-weight: 400 !important; letter-spacing: -0.8px !important; color: var(--tv-ink, #243a32) !important; margin: 0 0 10px 0 !important; line-height: 1.2 !important; } .hp-page__description { font-size: 15px !important; color: var(--tv-muted, #737970) !important; margin-bottom: 24px !important; max-width: 720px !important; line-height: 1.6 !important; } /* 4. Destinations Search Form */ .hp-form--listing-search { display: flex !important; flex-direction: row !important; align-items: center !important; background: #ffffff !important; border: 1px solid var(--tv-line, #e4e7df) !important; border-radius: 12px !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important; padding: 8px 12px !important; margin: 0 0 32px 0 !important; gap: 0 !important; width: 100% !important; box-sizing: border-box !important; } .hp-form--listing-search .hp-form__fields { display: flex !important; flex: 1 1 0 !important; align-items: center !important; margin: 0 !important; padding: 0 !important; min-width: 0 !important; } .hp-form--listing-search .hp-form__field, .hp-form--listing-search .hp-field--search, .hp-form--listing-search .hp-field--location, .hp-form--listing-search .hp-form__field--select { flex: 1 1 0 !important; padding: 8px 16px !important; margin: 0 !important; border-right: 1px solid var(--tv-line, #e4e7df) !important; position: relative !important; min-width: 0 !important; box-sizing: border-box !important; } .hp-form--listing-search .hp-form__field:last-child, .hp-form--listing-search .hp-form__field--select:last-child { border-right: none !important; } .hp-form--listing-search .hp-form__field input, .hp-form--listing-search .hp-form__field select, .hp-form--listing-search .hp-field--search input, .hp-form--listing-search .hp-field--location input, .hp-form--listing-search .hp-form__field--select select { width: 100% !important; height: 44px !important; border: none !important; background: transparent !important; font-family: inherit !important; font-size: 15px !important; color: var(--tv-ink, #243a32) !important; padding: 0 !important; box-shadow: none !important; outline: none !important; } .hp-form--listing-search input::placeholder { color: #9ca3af !important; font-size: 15px !important; } .hp-form--listing-search .hp-form__field--select select { cursor: pointer !important; } .hp-form--listing-search .hp-form__footer { flex: 0 0 auto !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; } .hp-form--listing-search .hp-form__button { height: 46px !important; background: #10b981 !important; color: #ffffff !important; border: none !important; border-radius: 8px !important; padding: 0 32px !important; font-size: 15px !important; font-weight: 600 !important; letter-spacing: 0.3px !important; cursor: pointer !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; transition: background-color 0.2s ease, transform 0.2s ease !important; flex-shrink: 0 !important; margin-left: 8px !important; } .hp-form--listing-search .hp-form__button:hover { background: #059669 !important; transform: translateY(-1px) !important; } @media (max-width: 768px) { .hp-form--listing-search { flex-direction: column !important; align-items: stretch !important; padding: 16px !important; gap: 10px !important; } .hp-form--listing-search .hp-form__fields { flex-direction: column !important; width: 100% !important; } .hp-form--listing-search .hp-form__field, .hp-form--listing-search .hp-field--search, .hp-form--listing-search .hp-field--location, .hp-form--listing-search .hp-form__field--select { width: 100% !important; border-right: none !important; border-bottom: 1px solid var(--tv-line, #e4e7df) !important; padding: 8px 0 !important; } .hp-form--listing-search .hp-form__field:last-child, .hp-form--listing-search .hp-form__field--select:last-child { border-bottom: none !important; } .hp-form--listing-search .hp-form__footer { width: 100% !important; } .hp-form--listing-search .hp-form__button { width: 100% !important; margin-left: 0 !important; margin-top: 6px !important; } } /* 5. Mobile Filter Trigger Button */ .hp-button--listing-filter { display: none !important; } @media (max-width: 900px) { .hp-button--listing-filter { display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; width: 100% !important; height: 48px !important; background: #173f35 !important; color: #ffffff !important; border-radius: 8px !important; font-size: 15px !important; font-weight: 600 !important; margin: 0 0 24px 0 !important; border: none !important; cursor: pointer !important; } .hp-button--listing-filter i { font-size: 16px !important; color: #10b981 !important; } } /* 6. HivePress 2-Column Layout (Sidebar 28% + Content 72%) */ .hp-page > .hp-row, .hp-page__container > .hp-row { display: flex !important; flex-wrap: wrap !important; align-items: stretch !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; overflow: visible !important; } .hp-page__sidebar { flex: 0 0 28% !important; max-width: 28% !important; width: 28% !important; padding-right: 24px !important; padding-left: 0 !important; box-sizing: border-box !important; min-width: 0 !important; align-self: stretch !important; overflow: visible !important; position: relative !important; } .hp-page__content { flex: 0 0 72% !important; max-width: 72% !important; width: 72% !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box !important; min-width: 0 !important; } .hp-page--user-login-page .hp-page__content, .hp-page--user-password-reset-page .hp-page__content, .hp-page--user-edit-settings-page .hp-page__content, .hp-col-sm-offset-4.hp-page__content { flex: 0 0 100% !important; max-width: 460px !important; width: 100% !important; margin: 0 auto !important; } @media (max-width: 900px) { .hp-page > .hp-row, .hp-page__container > .hp-row { margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; max-width: 100% !important; } .hp-page__sidebar { display: none !important; /* Mobile uses popup filter modal */ } .hp-page__content { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; padding: 0 !important; } } /* 7. Sidebar Filter Widget (Sticky while scrolling through listings) */ .hp-widget--listing-filter { background: #ffffff !important; border: 1px solid var(--tv-line, #e4e7df) !important; border-radius: 12px !important; padding: 24px !important; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.03) !important; margin-bottom: 24px !important; box-sizing: border-box !important; position: -webkit-sticky !important; position: sticky !important; top: 95px !important; z-index: 20 !important; } .hp-widget--listing-filter .hp-widget__title, .hp-form--listing-filter .hp-field__label { font-size: 16px !important; font-weight: 700 !important; color: var(--tv-ink, #243a32) !important; margin-bottom: 14px !important; display: block !important; } /* Category list in filter sidebar */ .hp-form--listing-filter ul, .hp-widget--listing-filter ul { list-style: none !important; padding: 0 !important; margin: 0 0 16px 0 !important; } .hp-form--listing-filter ul li, .hp-widget--listing-filter ul li { list-style: none !important; margin: 0 0 8px 0 !important; padding: 0 !important; } .hp-form--listing-filter ul li label, .hp-widget--listing-filter ul li label { display: flex !important; align-items: center !important; gap: 8px !important; font-size: 14px !important; font-weight: 500 !important; color: #374151 !important; cursor: pointer !important; } .hp-form--listing-filter ul li input[type="radio"], .hp-form--listing-filter ul li input[type="checkbox"] { margin: 0 !important; accent-color: #10b981 !important; width: 16px !important; height: 16px !important; cursor: pointer !important; } .hp-field--number-range .hp-field__inputs { display: flex !important; gap: 12px !important; align-items: center !important; margin-bottom: 16px !important; } .hp-field--number-range input[type="number"], .hp-field--number-range input[type="text"] { flex: 1 !important; height: 42px !important; border: 1px solid #d1d5db !important; border-radius: 6px !important; padding: 0 12px !important; font-size: 14px !important; font-weight: 500 !important; color: #374151 !important; background: #f9fafb !important; text-align: center !important; outline: none !important; transition: border-color 0.2s ease !important; } .hp-field--number-range input:focus { border-color: #10b981 !important; background: #ffffff !important; } .hp-field--number-range .ui-slider { height: 6px !important; background: #e5e7eb !important; border: none !important; border-radius: 3px !important; margin: 16px 8px !important; position: relative !important; } .hp-field--number-range .ui-slider-range { background: #10b981 !important; border-radius: 3px !important; position: absolute !important; height: 100% !important; } .hp-field--number-range .ui-slider-handle { width: 20px !important; height: 20px !important; background: #ffffff !important; border: 2px solid #10b981 !important; border-radius: 50% !important; cursor: pointer !important; top: -7px !important; margin-left: -10px !important; position: absolute !important; outline: none !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important; transition: transform 0.15s ease !important; } .hp-field--number-range .ui-slider-handle:hover, .hp-field--number-range .ui-slider-handle:active { transform: scale(1.15) !important; background: #10b981 !important; } .hp-form--listing-filter .hp-form__button, .hp-widget--listing-filter .hp-form__button, .hp-widget--listing-filter .button { width: 100% !important; height: 46px !important; background: #10b981 !important; color: #ffffff !important; font-size: 15px !important; font-weight: 600 !important; letter-spacing: 0.3px !important; border: none !important; border-radius: 6px !important; cursor: pointer !important; margin-top: 16px !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: background-color 0.2s ease, transform 0.2s ease !important; } .hp-form--listing-filter .hp-form__button:hover, .hp-widget--listing-filter .hp-form__button:hover, .hp-widget--listing-filter .button:hover { background: #059669 !important; transform: translateY(-1px) !important; } /* 8. Topbar (Result Count & Sort Dropdown) */ .hp-page__topbar { display: flex !important; align-items: center !important; justify-content: space-between !important; padding-bottom: 16px !important; margin-bottom: 24px !important; border-bottom: 1px solid var(--tv-line, #e4e7df) !important; flex-wrap: wrap !important; gap: 12px !important; } .hp-result-count { font-size: 14px !important; font-weight: 700 !important; color: var(--tv-ink, #243a32) !important; letter-spacing: -0.2px !important; } .hp-form--listing-sort { display: flex !important; align-items: center !important; gap: 8px !important; margin: 0 !important; } .hp-form--listing-sort label { font-size: 13px !important; font-weight: 600 !important; color: #6b7280 !important; margin: 0 !important; } .hp-form--listing-sort .hp-form__field--select select { height: 38px !important; border: 1px solid #d1d5db !important; border-radius: 6px !important; padding: 0 12px !important; background: #ffffff !important; font-size: 13px !important; font-weight: 600 !important; color: #374151 !important; outline: none !important; cursor: pointer !important; } /* Hide hidden inputs in sort form */ .hp-form--listing-sort .hp-field--hidden, .hp-form .hp-field--hidden, .hp-field--hidden { display: none !important; } @media (max-width: 640px) { .hp-page__topbar { flex-direction: column !important; align-items: stretch !important; gap: 12px !important; } .hp-result-count { text-align: left !important; } .hp-form--listing-sort { display: flex !important; justify-content: space-between !important; width: 100% !important; } .hp-form--listing-sort .hp-form__field--select { flex: 1 !important; width: 100% !important; } .hp-form--listing-sort select { width: 100% !important; } } /* 9. Universal HivePress Listings Grid (2 Columns Desktop & Tablet, 1 Column Mobile) */ .hp-listings, .hp-listings.hp-grid, .hp-page__content .hp-listings { display: block !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; clear: both !important; } .hp-listings .hp-row, .hp-listings.hp-grid > .hp-row, .hp-grid > .hp-row, .hp-page__content .hp-listings .hp-row { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; gap: 24px !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; align-items: stretch !important; } .hp-listings .hp-grid__item, .hp-listings .hp-row > .hp-grid__item, .hp-listings.hp-grid > .hp-row > .hp-grid__item, .hp-grid > .hp-row > .hp-grid__item, .hp-page__content .hp-listings .hp-grid__item, .hp-listings [class*="hp-col-"] { flex: 0 0 calc(50% - 12px) !important; max-width: calc(50% - 12px) !important; width: calc(50% - 12px) !important; padding: 0 !important; box-sizing: border-box !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; min-width: 0 !important; /* CRITICAL: Prevents slick slider blowout! */ } @media (max-width: 680px) { .hp-listings .hp-row, .hp-listings.hp-grid > .hp-row, .hp-grid > .hp-row, .hp-page__content .hp-listings .hp-row { gap: 20px !important; margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; max-width: 100% !important; } .hp-listings .hp-grid__item, .hp-listings .hp-row > .hp-grid__item, .hp-listings.hp-grid > .hp-row > .hp-grid__item, .hp-grid > .hp-row > .hp-grid__item, .hp-page__content .hp-listings .hp-grid__item, .hp-listings [class*="hp-col-"] { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; padding: 0 !important; } } /* 10. Universal Luxury Villa Card Enclosure: 1px Line Border, 12px Radius, Equal Height */ .card, .tv-villa-card, .tv-archive-card, .hp-listing--view-block { display: flex !important; flex-direction: column !important; height: 100% !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; background: #ffffff !important; border: 1px solid var(--tv-line, #e4e7df) !important; border-radius: 12px !important; overflow: hidden !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important; box-sizing: border-box !important; margin-bottom: 24px !important; position: relative !important; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important; } .card:hover, .tv-villa-card:hover, .tv-archive-card:hover, .hp-listing--view-block:hover { transform: translateY(-3px) !important; box-shadow: 0 8px 24px rgba(23, 63, 53, 0.08) !important; border-color: #ccd2c4 !important; } /* Card Uniform Photo & Slick Carousel - Flush 11px top corners */ .card-photo, .tv-villa-photo, .hp-listing--view-block .hp-listing__header, .hp-listing--view-block .hp-listing__image { height: 230px !important; min-height: 230px !important; max-height: 230px !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; position: relative !important; overflow: hidden !important; background: #eef1ea !important; display: block !important; flex-shrink: 0 !important; border-radius: 11px 11px 0 0 !important; border: none !important; box-shadow: none !important; margin: 0 !important; padding: 0 !important; } .hp-listing--view-block .slick-slider, .hp-listing--view-block .slick-list { width: 100% !important; max-width: 100% !important; height: 230px !important; min-height: 230px !important; max-height: 230px !important; overflow: hidden !important; position: relative !important; margin: 0 !important; padding: 0 !important; border-radius: 11px 11px 0 0 !important; } /* Ensure .slick-track can hold slides horizontally without breaking math */ .hp-listing--view-block .slick-track { height: 230px !important; min-height: 230px !important; max-height: 230px !important; display: flex !important; align-items: center !important; margin: 0 !important; } .hp-listing--view-block .slick-slide { height: 230px !important; min-height: 230px !important; max-height: 230px !important; overflow: hidden !important; outline: none !important; border-radius: 11px 11px 0 0 !important; } .card-photo img, .tv-villa-photo img, .hp-listing--view-block .hp-listing__header img, .hp-listing--view-block .hp-listing__image img, .hp-listing--view-block .slick-slide img { width: 100% !important; height: 230px !important; min-height: 230px !important; max-height: 230px !important; object-fit: cover !important; display: block !important; border-radius: 11px 11px 0 0 !important; transition: transform 0.45s ease !important; } .card:hover .card-photo img, .tv-villa-card:hover .tv-villa-photo img, .hp-listing--view-block:hover .hp-listing__image img { transform: scale(1.035) !important; } /* Pre-Slick initialization protection: prevents image stacking flash */ .hp-listing--view-block .hp-listing__image:not(.slick-initialized) { height: 230px !important; overflow: hidden !important; position: relative !important; border-radius: 11px 11px 0 0 !important; } .hp-listing--view-block .hp-listing__image:not(.slick-initialized) img:not(:first-child) { display: none !important; } .hp-listing--view-block .hp-listing__image:not(.slick-initialized) img:first-child { display: block !important; width: 100% !important; height: 230px !important; object-fit: cover !important; border-radius: 11px 11px 0 0 !important; } @media (max-width: 680px) { .card-photo, .tv-villa-photo, .hp-listing--view-block .hp-listing__header, .hp-listing--view-block .hp-listing__image, .hp-listing--view-block .slick-slider, .hp-listing--view-block .slick-list, .hp-listing--view-block .slick-slide, .card-photo img, .tv-villa-photo img, .hp-listing--view-block .hp-listing__header img, .hp-listing--view-block .hp-listing__image img, .hp-listing--view-block .slick-slide img { height: 210px !important; min-height: 210px !important; max-height: 210px !important; } } /* Mockup Tag Badge on Photo */ .card-badge, .tag, .card-photo .tag, .hp-listing--view-block .hp-listing__featured-badge { position: absolute !important; top: 14px !important; left: 14px !important; background: #ffffff !important; color: #173f35 !important; padding: 5px 9px !important; border-radius: 4px !important; font-size: 10px !important; font-weight: 600 !important; letter-spacing: 0.2px !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important; border: none !important; z-index: 5 !important; display: inline-flex !important; align-items: center !important; gap: 5px !important; } /* Circular Heart Button on Photo (Favorite Only) */ .heart, .hp-listing--view-block .hp-listing__action--favorite { position: absolute !important; top: 14px !important; right: 14px !important; width: 33px !important; height: 33px !important; border-radius: 50% !important; background: rgba(255, 255, 255, 0.88) !important; backdrop-filter: blur(4px) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border: none !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important; color: #243a32 !important; z-index: 5 !important; cursor: pointer !important; transition: transform 0.2s ease, background-color 0.2s ease !important; } .heart:hover, .hp-listing--view-block .hp-listing__action--favorite:hover { transform: scale(1.08) !important; background: #ffffff !important; color: #173f35 !important; } .heart.saved, .hp-listing--view-block .hp-listing__action--favorite.hp-listing__action--favorited { color: #a7473a !important; background: #ffffff !important; } /* Hide Comment / Message Icon from Listing Cards */ .hp-listing--view-block .hp-listing__action--message, .hp-listing--view-block .hp-listing__action--reply, .hp-listing--view-block a[href*="reply_listing"], .hp-listing--view-block .fa-comment, .hp-listing--view-block .fa-comment-alt, .hp-listing--view-block .fa-comments, .hp-listing--view-block .far.fa-comment, .hp-listing--view-block .fas.fa-comment, .card .hp-listing__action--message, .card .hp-listing__action--reply, .card .fa-comment, .card .fa-comment-alt, .card .fa-comments, .tv-villa-card .hp-listing__action--message, .tv-villa-card .hp-listing__action--reply, .tv-villa-card .fa-comment, .tv-villa-card .fa-comment-alt, .tv-villa-card .fa-comments, .hp-listings .hp-listing__action--message, .hp-listings .hp-listing__action--reply, .hp-grid__item .hp-listing__action--message, .hp-grid__item .hp-listing__action--reply { display: none !important; } .hp-listing--view-block .hp-listing__verified { color: #10b981 !important; font-size: 15px !important; margin-left: 6px !important; vertical-align: middle !important; } /* Card Body Flexbox Alignment - Filling remainder with uniform padding */ .card-body, .tv-villa-body, .hp-listing--view-block .hp-listing__content { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; padding: 16px 18px 18px !important; background: #ffffff !important; box-sizing: border-box !important; min-width: 0 !important; width: 100% !important; } /* Card Location & Category */ .card-location, .tv-villa-location, .hp-listing--view-block .hp-listing__details--primary, .hp-listing--view-block .hp-listing__categories, .hp-listing--view-block .hp-listing__category { margin: 0 0 6px 0 !important; font-size: 11px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 1.2px !important; color: #6c7b66 !important; display: flex !important; align-items: center !important; gap: 6px !important; flex-shrink: 0 !important; } .hp-listing--view-block .hp-listing__category a, .hp-listing--view-block .hp-listing__categories a, .hp-listing--view-block .hp-listing__location a { font-size: 11px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 1.2px !important; color: #6c7b66 !important; text-decoration: none !important; } .hp-listing--view-block .hp-listing__location i { color: #173f35 !important; margin-right: 4px !important; } .hp-listing--view-block .hp-listing__date { display: none !important; } /* Card Title: Uniform 52px min-height ensures horizontal alignment across rows */ .card-title, .tv-villa-title, .hp-listing--view-block .hp-listing__title { margin: 0 0 6px !important; min-height: 52px !important; display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 8px !important; flex-shrink: 0 !important; } .card-title h3, .tv-villa-title a, .hp-listing--view-block .hp-listing__title a { font-family: var(--tv-sans, 'DM Sans', sans-serif) !important; font-size: 20px !important; font-weight: 600 !important; line-height: 1.3 !important; letter-spacing: -0.4px !important; color: var(--tv-ink, #243a32) !important; text-decoration: none !important; transition: color 0.2s ease !important; } .card-title h3:hover, .tv-villa-title a:hover, .hp-listing--view-block .hp-listing__title a:hover { color: #173f35 !important; } /* Card Type Subtitle */ .card-type, .hp-listing--view-block .hp-listing__details { font-size: 13px !important; color: #737970 !important; margin: 0 0 10px !important; font-weight: 400 !important; flex-shrink: 0 !important; } /* Card Attributes / Features Chips (Exact Mockup Border Treatment) */ .card-features, .tv-villa-features, .hp-listing--view-block .hp-listing__attributes { display: flex !important; gap: 6px !important; flex-wrap: wrap !important; margin: 0 0 14px !important; min-height: 28px !important; flex-shrink: 0 !important; } .hp-listing--view-block .hp-listing__attributes--secondary .hp-row { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; margin: 0 !important; width: 100% !important; } .hp-listing--view-block .hp-listing__attributes--secondary .hp-col-lg-6, .hp-listing--view-block .hp-listing__attributes--secondary .hp-col-xs-12 { flex: 0 0 auto !important; max-width: 100% !important; width: auto !important; padding: 0 !important; } .card-features span, .tv-villa-features span, .hp-listing--view-block .hp-listing__attribute { font-size: 11px !important; font-weight: 500 !important; color: #667363 !important; background: var(--tv-cream, #f6f6ef) !important; border: 1px solid #e4e8de !important; border-radius: 4px !important; padding: 3px 7px !important; white-space: nowrap !important; display: inline-flex !important; align-items: center !important; gap: 5px !important; } .hp-listing--view-block .hp-listing__attribute i { color: #173f35 !important; font-size: 11px !important; } /* Card Price Row Pinned to Bottom with Clean Divider Border */ .card-price, .tv-villa-price-row, .hp-listing--view-block .hp-listing__footer { margin-top: auto !important; padding-top: 14px !important; border-top: 1px solid var(--tv-line, #e4e7df) !important; border-bottom: none !important; border-left: none !important; border-right: none !important; display: flex !important; align-items: flex-end !important; justify-content: space-between !important; background: transparent !important; width: 100% !important; box-sizing: border-box !important; flex-shrink: 0 !important; } .card-price strong, .tv-price-tag strong, .hp-listing--view-block .hp-listing__attribute--price { font-size: 21px !important; color: var(--tv-ink, #243a32) !important; letter-spacing: -0.6px !important; font-weight: 700 !important; background: transparent !important; border: none !important; padding: 0 !important; } .card-price small, .tv-price-tag small { display: block !important; margin-top: 3px !important; font-size: 10px !important; color: #737970 !important; } .card-price .text-link, .tv-btn-card, .hp-listing--view-block .hp-listing__footer a:not(.hp-listing__action) { font-size: 13px !important; font-weight: 600 !important; color: var(--tv-green, #173f35) !important; text-decoration: underline !important; text-underline-offset: 4px !important; white-space: nowrap !important; transition: color 0.2s ease !important; } .hp-listing--view-block .hp-listing__actions--primary { display: flex !important; align-items: center !important; gap: 8px !important; } /* 11. Circular Pagination (1 2 ... 24 >) */ .hp-pagination, .navigation.pagination, .woocommerce-pagination { margin: 40px 0 32px !important; display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; clear: both !important; } .hp-pagination .nav-links, .navigation.pagination .nav-links, .woocommerce-pagination .nav-links { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 10px !important; flex-wrap: wrap !important; width: auto !important; position: static !important; background: transparent !important; padding: 0 !important; border: none !important; box-shadow: none !important; max-height: none !important; overflow: visible !important; } .hp-pagination .page-numbers, .navigation.pagination .page-numbers, .woocommerce-pagination .page-numbers { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 42px !important; min-width: 42px !important; max-width: 42px !important; height: 42px !important; padding: 0 !important; margin: 0 !important; border-radius: 50% !important; border: 1px solid var(--tv-line, #e4e7df) !important; background: #ffffff !important; color: var(--tv-ink, #243a32) !important; font-size: 14px !important; font-weight: 600 !important; text-decoration: none !important; text-align: center !important; box-sizing: border-box !important; line-height: 1 !important; transition: all 0.2s ease !important; } .hp-pagination .page-numbers:hover, .navigation.pagination .page-numbers:hover, .woocommerce-pagination .page-numbers:hover { border-color: #10b981 !important; color: #10b981 !important; background: #f0fdf4 !important; transform: translateY(-1px) !important; } .hp-pagination .page-numbers.current, .navigation.pagination .page-numbers.current, .woocommerce-pagination .page-numbers.current { background: #173f35 !important; border-color: #173f35 !important; color: #ffffff !important; box-shadow: 0 2px 8px rgba(23, 63, 53, 0.2) !important; } .hp-pagination .page-numbers.dots, .navigation.pagination .page-numbers.dots, .woocommerce-pagination .page-numbers.dots { border: none !important; background: transparent !important; color: #9ca3af !important; min-width: 20px !important; width: 20px !important; box-shadow: none !important; } @media (max-width: 768px) { .hp-pagination .nav-links, .navigation.pagination .nav-links, .woocommerce-pagination .nav-links { gap: 8px !important; } .hp-pagination .page-numbers, .navigation.pagination .page-numbers, .woocommerce-pagination .page-numbers { width: 38px !important; min-width: 38px !important; max-width: 38px !important; height: 38px !important; font-size: 13px !important; } } @media (max-width: 480px) { .hp-pagination, .navigation.pagination { margin: 28px 0 20px !important; } .hp-pagination .nav-links, .navigation.pagination .nav-links, .woocommerce-pagination .nav-links { gap: 6px !important; } .hp-pagination .page-numbers, .navigation.pagination .page-numbers, .woocommerce-pagination .page-numbers { width: 34px !important; min-width: 34px !important; max-width: 34px !important; height: 34px !important; font-size: 12px !important; } } /* ========================================================================== 12. LUXURY PAGES: ABOUT US, CONTACT US, AUTH & STANDARD PAGES ========================================================================== */ /* Universal Page Container & Breadcrumbs */ .tv-page-container { max-width: 1180px !important; margin: 0 auto !important; padding: 40px 24px 80px !important; box-sizing: border-box !important; } .tv-breadcrumb { display: flex !important; align-items: center !important; gap: 8px !important; font-size: 13px !important; color: #6c7b66 !important; margin-bottom: 24px !important; font-weight: 500 !important; } .tv-breadcrumb a { color: #6c7b66 !important; text-decoration: none !important; transition: color 0.2s ease !important; } .tv-breadcrumb a:hover { color: #173f35 !important; text-decoration: underline !important; } .tv-breadcrumb-sep { color: #9ca3af !important; } .tv-breadcrumb-current { color: var(--tv-ink, #243a32) !important; font-weight: 600 !important; } /* ========================================================================== TOP HERO COVER BANNER (Contact Us & About Us - Old Theme Style) ========================================================================== */ .tv-page-hero-banner { position: relative !important; width: 100% !important; min-height: 340px !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; display: flex !important; align-items: center !important; justify-content: center !important; color: #ffffff !important; box-sizing: border-box !important; overflow: hidden !important; margin-bottom: 0 !important; } .tv-page-hero-banner .tv-hero-overlay { position: absolute !important; inset: 0 !important; background: linear-gradient(180deg, rgba(17, 43, 35, 0.6) 0%, rgba(17, 43, 35, 0.8) 100%) !important; z-index: 1 !important; pointer-events: none !important; } .tv-page-hero-banner .tv-page-hero-content { position: relative !important; z-index: 2 !important; text-align: center !important; color: #ffffff !important; max-width: 820px !important; padding: 48px 24px !important; margin: 0 auto !important; } .tv-page-hero-banner .tv-hero-badge { display: inline-block !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 2.2px !important; text-transform: uppercase !important; color: var(--tv-lime, #dbe6b8) !important; background: rgba(255, 255, 255, 0.14) !important; backdrop-filter: blur(6px) !important; -webkit-backdrop-filter: blur(6px) !important; padding: 6px 16px !important; border-radius: 20px !important; margin-bottom: 14px !important; border: 1px solid rgba(255, 255, 255, 0.22) !important; } .tv-page-hero-banner .tv-hero-heading { font-family: var(--tv-serif, Georgia, serif) !important; font-size: clamp(32px, 4.5vw, 48px) !important; font-weight: 500 !important; color: #ffffff !important; line-height: 1.15 !important; letter-spacing: -0.5px !important; margin: 0 0 12px 0 !important; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45) !important; } .tv-page-hero-banner .tv-hero-sub { font-size: clamp(15px, 1.8vw, 17px) !important; line-height: 1.6 !important; color: #f1f5ee !important; max-width: 680px !important; margin: 0 auto 16px auto !important; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35) !important; } .tv-page-hero-banner .tv-hero-breadcrumb { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; font-size: 13px !important; color: rgba(255, 255, 255, 0.8) !important; margin-top: 4px !important; } .tv-page-hero-banner .tv-hero-breadcrumb a { color: #ffffff !important; text-decoration: underline !important; text-underline-offset: 3px !important; transition: opacity 0.2s ease !important; } .tv-page-hero-banner .tv-hero-breadcrumb a:hover { opacity: 0.85 !important; } .tv-page-hero-banner .tv-hero-breadcrumb span { color: rgba(255, 255, 255, 0.5) !important; } .tv-page-hero-banner .tv-hero-breadcrumb strong { color: #ffffff !important; font-weight: 600 !important; } @media (max-width: 768px) { .tv-page-hero-banner { min-height: 250px !important; } .tv-page-hero-banner .tv-page-hero-content { padding: 36px 18px !important; } .tv-page-hero-banner .tv-hero-heading { font-size: 28px !important; } .tv-page-hero-banner .tv-hero-sub { font-size: 14px !important; } } /* About Us Intro Statement Box */ .tv-about-intro-card { background: #ffffff !important; border: 1px solid var(--tv-line, #e4e7df) !important; border-radius: 14px !important; padding: 32px 36px !important; margin-bottom: 40px !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02) !important; } @media (max-width: 768px) { .tv-about-intro-card { padding: 24px 20px !important; margin-bottom: 28px !important; } } /* Luxury Section Badges & Titles */ .tv-about-badge, .tv-contact-badge, .tv-page-badge, .tv-section-label { display: inline-block !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 1.6px !important; text-transform: uppercase !important; color: #173f35 !important; background: #eef2eb !important; padding: 5px 12px !important; border-radius: 4px !important; margin-bottom: 14px !important; } .tv-about-title, .tv-contact-title, .tv-standard-page-title { font-family: var(--tv-serif, Georgia, serif) !important; font-size: clamp(34px, 4.5vw, 48px) !important; font-weight: 400 !important; color: var(--tv-ink, #243a32) !important; line-height: 1.15 !important; letter-spacing: -1px !important; margin: 0 0 16px 0 !important; } .tv-about-lead, .tv-contact-lead { font-size: 18px !important; line-height: 1.6 !important; color: #374151 !important; max-width: 820px !important; margin: 0 0 16px 0 !important; font-weight: 400 !important; } .tv-about-sublead { font-size: 15px !important; line-height: 1.8 !important; color: #556052 !important; max-width: 860px !important; margin: 0 0 36px 0 !important; } .tv-about-sublead a { color: #173f35 !important; text-decoration: underline !important; text-underline-offset: 3px !important; } /* About Page: Mission & Vision Dual Cards */ .tv-mission-vision-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 24px !important; margin: 40px 0 60px 0 !important; } @media (max-width: 768px) { .tv-mission-vision-grid { grid-template-columns: 1fr !important; gap: 16px !important; } } .tv-luxury-card { background: #ffffff !important; border: 1px solid var(--tv-line, #e4e7df) !important; border-radius: 14px !important; padding: 36px 30px !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important; display: flex !important; flex-direction: column !important; transition: transform 0.25s ease, box-shadow 0.25s ease !important; } .tv-luxury-card:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06) !important; } .tv-card-icon-wrap { width: 56px !important; height: 56px !important; margin-bottom: 20px !important; display: flex !important; align-items: center !important; justify-content: center !important; background: #f4f6f2 !important; border-radius: 12px !important; padding: 8px !important; } .tv-card-icon-wrap img { max-width: 100% !important; max-height: 100% !important; object-fit: contain !important; } .tv-card-title { font-family: var(--tv-serif, Georgia, serif) !important; font-size: 24px !important; font-weight: 500 !important; color: var(--tv-ink, #243a32) !important; margin: 0 0 12px 0 !important; } .tv-card-desc { font-size: 15px !important; line-height: 1.7 !important; color: #4b5563 !important; margin: 0 !important; } /* About Page: Story Section */ .tv-story-section { margin: 60px 0 !important; padding: 48px 0 !important; border-top: 1px solid var(--tv-line, #e4e7df) !important; border-bottom: 1px solid var(--tv-line, #e4e7df) !important; } .tv-story-grid { display: grid !important; grid-template-columns: 1.2fr 1fr !important; gap: 48px !important; align-items: center !important; } @media (max-width: 900px) { .tv-story-grid { grid-template-columns: 1fr !important; gap: 32px !important; } } .tv-story-content p { font-size: 15px !important; line-height: 1.8 !important; color: #374151 !important; margin-bottom: 18px !important; } .tv-story-img-frame { border-radius: 14px !important; overflow: hidden !important; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08) !important; background: #e6e9e0 !important; } .tv-story-img-frame img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } /* About Page: Why Choose Section */ .tv-why-section { margin: 60px 0 !important; } .tv-why-header { margin-bottom: 32px !important; } .tv-section-title { font-family: var(--tv-serif, Georgia, serif) !important; font-size: clamp(28px, 3.5vw, 38px) !important; font-weight: 400 !important; color: var(--tv-ink, #243a32) !important; margin: 8px 0 10px 0 !important; letter-spacing: -0.8px !important; } .tv-section-subtitle { font-size: 16px !important; color: #556052 !important; margin: 0 !important; } .tv-why-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 20px !important; } @media (max-width: 900px) { .tv-why-grid { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 600px) { .tv-why-grid { grid-template-columns: 1fr !important; } } .tv-why-card { background: #ffffff !important; border: 1px solid var(--tv-line, #e4e7df) !important; border-radius: 12px !important; padding: 24px !important; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.02) !important; display: flex !important; flex-direction: column !important; } .tv-why-icon { width: 44px !important; height: 44px !important; border-radius: 10px !important; background: #f0fdf4 !important; display: flex !important; align-items: center !important; justify-content: center !important; margin-bottom: 16px !important; } .tv-why-card h4 { font-family: var(--tv-sans, 'DM Sans', sans-serif) !important; font-size: 16px !important; font-weight: 700 !important; color: var(--tv-ink, #243a32) !important; margin: 0 0 8px 0 !important; } .tv-why-card p { font-size: 14px !important; line-height: 1.6 !important; color: #556052 !important; margin: 0 !important; } /* About Page: Pillars Grid (Travelers & Owners) */ .tv-pillars-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 24px !important; margin: 60px 0 !important; } @media (max-width: 768px) { .tv-pillars-grid { grid-template-columns: 1fr !important; } } .tv-pillar-card { background: #ffffff !important; border: 1px solid var(--tv-line, #e4e7df) !important; border-radius: 12px !important; padding: 36px 32px !important; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.03) !important; display: flex !important; flex-direction: column !important; height: 100% !important; } .tv-pillar-owner { background: #fbfcf9 !important; } .tv-pillar-tag { font-size: 11px !important; font-weight: 700 !important; letter-spacing: 1.5px !important; color: #173f35 !important; margin-bottom: 12px !important; text-transform: uppercase !important; } .tv-pillar-title { font-family: var(--tv-serif, Georgia, serif) !important; font-size: 26px !important; font-weight: 500 !important; color: var(--tv-ink, #243a32) !important; margin: 0 0 12px 0 !important; } .tv-pillar-desc { font-size: 14px !important; line-height: 1.7 !important; color: #556052 !important; margin-bottom: 20px !important; } .tv-pillar-checklist { list-style: none !important; padding: 0 !important; margin: 0 0 28px 0 !important; display: flex !important; flex-direction: column !important; gap: 12px !important; } .tv-pillar-checklist li { display: flex !important; align-items: center !important; gap: 10px !important; font-size: 14px !important; font-weight: 500 !important; color: #374151 !important; } .tv-btn-emerald { display: inline-flex !important; align-items: center !important; justify-content: center !important; height: 46px !important; padding: 0 24px !important; background: #10b981 !important; color: #ffffff !important; border-radius: 8px !important; font-size: 14px !important; font-weight: 600 !important; text-decoration: none !important; transition: background-color 0.2s ease, transform 0.2s ease !important; } .tv-btn-emerald:hover { background: #059669 !important; color: #ffffff !important; transform: translateY(-1px) !important; } .tv-btn-outline-dark { display: inline-flex !important; align-items: center !important; justify-content: center !important; height: 46px !important; padding: 0 24px !important; background: transparent !important; color: #173f35 !important; border: 1px solid #173f35 !important; border-radius: 8px !important; font-size: 14px !important; font-weight: 600 !important; text-decoration: none !important; transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease !important; } .tv-btn-outline-dark:hover { background: #173f35 !important; color: #ffffff !important; transform: translateY(-1px) !important; } /* About Page: Commitment Banner */ .tv-commitment-banner { margin: 60px 0 20px 0 !important; background: #173f35 !important; color: #ffffff !important; border-radius: 16px !important; padding: 48px 36px !important; text-align: center !important; } .tv-commitment-inner { max-width: 720px !important; margin: 0 auto !important; } .tv-label-light { background: rgba(255, 255, 255, 0.15) !important; color: #a7f3d0 !important; } .tv-commitment-title { font-family: var(--tv-serif, Georgia, serif) !important; font-size: clamp(26px, 3.5vw, 36px) !important; font-weight: 400 !important; color: #ffffff !important; line-height: 1.25 !important; margin: 12px 0 16px 0 !important; } .tv-commitment-text { font-size: 16px !important; line-height: 1.8 !important; color: #d1fae5 !important; margin-bottom: 24px !important; } .tv-commitment-signature strong { display: block !important; font-size: 18px !important; letter-spacing: -0.3px !important; color: #ffffff !important; } .tv-commitment-signature span { font-size: 13px !important; color: #9ca3af !important; } /* Contact Page: 2-Column Grid & Compact Balanced Cards */ .tv-contact-page .tv-page-container { max-width: 980px !important; margin: 0 auto !important; padding: 24px 20px 40px !important; } .tv-contact-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 18px !important; margin-top: 10px !important; align-items: start !important; } @media (max-width: 900px) { .tv-contact-page .tv-page-container { padding: 20px 16px 36px !important; } .tv-contact-grid { grid-template-columns: 1fr !important; gap: 16px !important; } } .tv-contact-card, .tv-contact-info-card { background: #ffffff !important; border: 1px solid var(--tv-line, #e4e7df) !important; border-radius: 12px !important; padding: 20px 22px !important; box-shadow: 0 2px 14px rgba(0, 0, 0, 0.03) !important; box-sizing: border-box !important; height: auto !important; min-height: auto !important; flex: 0 1 auto !important; } @media (max-width: 600px) { .tv-contact-card, .tv-contact-info-card { padding: 16px !important; } } .tv-social-card { background: #ffffff !important; border: 1px solid var(--tv-line, #e4e7df) !important; border-radius: 12px !important; padding: 14px 20px !important; box-shadow: 0 2px 14px rgba(0, 0, 0, 0.03) !important; box-sizing: border-box !important; grid-column: 1 / -1 !important; width: 100% !important; margin-top: 2px !important; } @media (max-width: 600px) { .tv-social-card { padding: 14px 16px !important; } } /* Contact Form Column */ .tv-contact-form-column { display: flex !important; flex-direction: column !important; height: auto !important; } .tv-contact-form-column .tv-contact-card { display: flex !important; flex-direction: column !important; height: auto !important; flex: 0 1 auto !important; } .tv-contact-form-column .tv-form-wrapper { display: flex !important; flex-direction: column !important; flex: 0 1 auto !important; } .tv-contact-form-column .tv-luxury-fallback-form, .tv-contact-form-column .wpcf7, .tv-contact-form-column .wpcf7-form, .tv-contact-form-column .contact-form, .tv-contact-page .contact-form { display: flex !important; flex-direction: column !important; flex: 0 1 auto !important; margin: 0 !important; padding: 0 !important; gap: 0 !important; } .tv-contact-page .contact-form br, .tv-contact-page .wpcf7-form br { display: none !important; } /* CF7 inline fields (Name & Email side-by-side) */ .tv-contact-form-column .inline-field, .tv-contact-page .contact-form .inline-field { display: flex !important; flex-direction: row !important; gap: 10px !important; align-items: flex-start !important; margin: 0 0 8px 0 !important; padding: 0 !important; } .tv-contact-form-column .inline-field > span, .tv-contact-page .contact-form .inline-field > span, .tv-contact-page .inline-field > * { flex: 1 1 0 !important; width: 50% !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; margin: 0 !important; padding: 0 !important; } @media (max-width: 600px) { .tv-contact-form-column .inline-field, .tv-contact-page .contact-form .inline-field { flex-direction: column !important; gap: 8px !important; } .tv-contact-form-column .inline-field > span, .tv-contact-page .contact-form .inline-field > span, .tv-contact-page .inline-field > * { width: 100% !important; } } /* Spacing between fields in CF7 and fallback form */ .tv-contact-form-column .wpcf7 form p, .tv-contact-form-column .contact-form p, .tv-contact-page .contact-form p, .tv-contact-form-column .contact-form > span, .tv-contact-form-column .tv-form-group { display: flex !important; flex-direction: column !important; gap: 0 !important; margin: 0 0 8px 0 !important; padding: 0 !important; } .tv-contact-form-column .contact-form > span:last-of-type, .tv-contact-form-column .wpcf7 form p:last-of-type, .tv-contact-form-column .contact-form p:last-child, .tv-contact-page .contact-form p:last-child, .tv-contact-form-column .tv-form-group:last-of-type { margin-bottom: 0 !important; } .tv-contact-form-column label, .tv-contact-form-column .wpcf7 label, .tv-contact-form-column .contact-form label, .tv-contact-page .contact-form label, .tv-contact-form-column .tv-form-group label { display: block !important; font-size: 12px !important; font-weight: 600 !important; color: var(--tv-ink, #243a32) !important; margin: 0 0 3px 0 !important; padding: 0 !important; line-height: 1.25 !important; text-transform: none !important; letter-spacing: normal !important; } .tv-contact-form-column .wpcf7-form-control-wrap, .tv-contact-page .contact-form span { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } .tv-contact-form-column input.wpcf7-form-control.wpcf7-text, .tv-contact-page .contact-form input.wpcf7-form-control.wpcf7-text, .tv-contact-page .contact-form input.wpcf7-text, .tv-contact-page .contact-form input { width: 100% !important; height: 38px !important; min-height: 38px !important; max-height: 38px !important; padding: 6px 11px !important; margin: 0 !important; margin-top: 0 !important; font-size: 13px !important; border-radius: 6px !important; border: 1px solid #d1d5db !important; background: #fafbf9 !important; box-shadow: none !important; box-sizing: border-box !important; } .tv-contact-form-column textarea, .tv-contact-page .contact-form textarea, .tv-contact-page .contact-form textarea.wpcf7-form-control.wpcf7-textarea.wpcf7-validates-as-required, .tv-contact-page .contact-form textarea.wpcf7-form-control.wpcf7-textarea { width: 100% !important; height: 65px !important; min-height: 65px !important; max-height: 85px !important; padding: 7px 11px !important; margin: 0 !important; margin-top: 0 !important; font-size: 13px !important; border-radius: 6px !important; border: 1px solid #d1d5db !important; background: #fafbf9 !important; box-shadow: none !important; box-sizing: border-box !important; resize: vertical !important; } .tv-contact-form-column .tv-btn-submit, .tv-contact-form-column .wpcf7-submit, .tv-contact-form-column button[type="submit"], .tv-contact-form-column input[type="submit"], .tv-contact-form-column .contact-btn, .tv-contact-page button.contact-btn, .tv-contact-page .contact-form button.contact-btn, .tv-contact-page .contact-form input[type="submit"] { width: 100% !important; max-width: 100% !important; height: 40px !important; min-height: 40px !important; padding: 0 18px !important; font-size: 13.5px !important; font-weight: 600 !important; letter-spacing: 0.2px !important; text-transform: none !important; margin: 6px 0 0 0 !important; border-radius: 6px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; background: var(--tv-green, #173f35) !important; color: #ffffff !important; border: none !important; cursor: pointer !important; box-shadow: none !important; transition: all 0.2s ease !important; } .tv-contact-form-column .tv-btn-submit:hover, .tv-contact-form-column .wpcf7-submit:hover, .tv-contact-form-column button[type="submit"]:hover, .tv-contact-form-column input[type="submit"]:hover, .tv-contact-form-column .contact-btn:hover, .tv-contact-page button.contact-btn:hover, .tv-contact-page .contact-form button.contact-btn:hover, .tv-contact-page .contact-form input[type="submit"]:hover { background: #113028 !important; transform: translateY(-1px) !important; box-shadow: 0 3px 10px rgba(23, 63, 53, 0.2) !important; } /* Sidebar Column (Concierge & Support) */ .tv-contact-sidebar-column { display: flex !important; flex-direction: column !important; height: auto !important; } .tv-contact-sidebar-column .tv-contact-info-card { display: flex !important; flex-direction: column !important; justify-content: flex-start !important; height: auto !important; min-height: auto !important; flex: 0 1 auto !important; box-sizing: border-box !important; } .tv-contact-sidebar-column .tv-contact-channels { display: flex !important; flex-direction: column !important; gap: 8px !important; margin-top: 4px !important; padding-top: 0 !important; } @media (max-width: 900px) { .tv-contact-form-column, .tv-contact-form-column .tv-contact-card, .tv-contact-sidebar-column, .tv-contact-sidebar-column .tv-contact-info-card { height: auto !important; } .tv-social-card { grid-column: 1 !important; } } .tv-card-heading { font-family: var(--tv-serif, Georgia, serif) !important; font-size: 19px !important; font-weight: 500 !important; color: var(--tv-ink, #243a32) !important; margin: 0 0 2px 0 !important; line-height: 1.25 !important; } .tv-card-subheading { font-size: 12px !important; color: #556052 !important; margin: 0 0 10px 0 !important; line-height: 1.35 !important; } .tv-info-badge { font-size: 10px !important; font-weight: 700 !important; letter-spacing: 1.1px !important; color: #173f35 !important; background: #eef2eb !important; padding: 3px 7px !important; border-radius: 4px !important; display: inline-block !important; margin-bottom: 6px !important; width: fit-content !important; } .tv-info-title { font-family: var(--tv-serif, Georgia, serif) !important; font-size: 19px !important; font-weight: 500 !important; color: var(--tv-ink, #243a32) !important; margin: 0 0 2px 0 !important; line-height: 1.25 !important; } .tv-info-desc { font-size: 12px !important; line-height: 1.35 !important; color: #556052 !important; margin-bottom: 10px !important; } .tv-channel-item { display: flex !important; align-items: center !important; gap: 10px !important; padding: 8px 12px !important; border: 1px solid var(--tv-line, #e4e7df) !important; border-radius: 8px !important; background: #fbfcf9 !important; text-decoration: none !important; color: inherit !important; transition: all 0.2s ease !important; } .tv-channel-item:hover { border-color: #173f35 !important; background: #f4f7f2 !important; transform: translateX(2px) !important; } .tv-channel-icon { width: 32px !important; height: 32px !important; border-radius: 6px !important; background: #ffffff !important; border: 1px solid #e4e8de !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; } .tv-channel-icon svg { width: 16px !important; height: 16px !important; } .tv-channel-text { display: flex !important; flex-direction: column !important; } .tv-channel-label { font-size: 9.5px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; color: #6c7b66 !important; line-height: 1.2 !important; } .tv-channel-val { font-size: 13px !important; font-weight: 700 !important; color: var(--tv-ink, #243a32) !important; line-height: 1.3 !important; } .tv-channel-whatsapp { display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; background: #25d366 !important; color: #ffffff !important; width: 100% !important; height: 38px !important; border-radius: 6px !important; font-size: 13.5px !important; font-weight: 600 !important; text-decoration: none !important; margin-top: 2px !important; transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important; box-shadow: 0 2px 10px rgba(37, 211, 102, 0.2) !important; } .tv-channel-whatsapp:hover { background: #20bd5a !important; color: #ffffff !important; transform: translateY(-1px) !important; box-shadow: 0 4px 14px rgba(37, 211, 102, 0.3) !important; } .tv-channel-whatsapp svg { width: 17px !important; height: 17px !important; } .tv-social-title { font-size: 14px !important; font-weight: 700 !important; color: var(--tv-ink, #243a32) !important; margin: 0 0 2px 0 !important; } .tv-social-desc { font-size: 11.5px !important; color: #6b7280 !important; margin-bottom: 8px !important; line-height: 1.35 !important; } .tv-social-links { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 8px !important; } @media (max-width: 900px) { .tv-social-links { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; } } @media (max-width: 480px) { .tv-social-links { grid-template-columns: 1fr !important; } } .tv-social-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; height: 34px !important; padding: 0 12px !important; border: 1px solid var(--tv-line, #e4e7df) !important; border-radius: 6px !important; background: #ffffff !important; color: #374151 !important; font-size: 12px !important; font-weight: 600 !important; text-decoration: none !important; transition: all 0.2s ease !important; } .tv-social-btn:hover { border-color: #173f35 !important; color: #173f35 !important; background: #f8faf7 !important; transform: translateY(-1px) !important; } .tv-social-btn svg { width: 14px !important; height: 14px !important; } /* Contact Form 7 & Fallback Inputs */ .wpcf7 form { margin: 0 !important; } .wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"], .wpcf7 input[type="url"], .contact-form input.wpcf7-form-control.wpcf7-text, .contact-form input.wpcf7-text, .wpcf7 textarea, .tv-luxury-fallback-form input, .tv-luxury-fallback-form textarea { width: 100% !important; border: 1px solid #d1d5db !important; border-radius: 6px !important; padding: 6px 11px !important; margin: 0 !important; margin-top: 0 !important; height: 38px !important; min-height: 38px !important; font-size: 13px !important; font-family: inherit !important; color: #1f2937 !important; background: #fafbf9 !important; box-shadow: none !important; outline: none !important; box-sizing: border-box !important; transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important; } .wpcf7 input:focus, .wpcf7 textarea:focus, .contact-form input:focus, .contact-form textarea:focus, .tv-luxury-fallback-form input:focus, .tv-luxury-fallback-form textarea:focus { border-color: #173f35 !important; background: #ffffff !important; box-shadow: 0 0 0 2px rgba(23, 63, 53, 0.1) !important; } .wpcf7 textarea, .tv-luxury-fallback-form textarea, .contact-form textarea.wpcf7-form-control.wpcf7-textarea.wpcf7-validates-as-required, .contact-form textarea.wpcf7-form-control.wpcf7-textarea, .contact-form textarea { height: 65px !important; min-height: 65px !important; max-height: 85px !important; padding: 7px 11px !important; margin: 0 !important; margin-top: 0 !important; resize: vertical !important; } .wpcf7 input[type="submit"], .tv-btn-submit, .contact-btn, button.contact-btn, .contact-form button.contact-btn, .contact-form input[type="submit"] { width: 100% !important; max-width: 100% !important; height: 40px !important; min-height: 40px !important; background: #173f35 !important; color: #ffffff !important; border: none !important; border-radius: 6px !important; padding: 0 18px !important; font-size: 13.5px !important; font-weight: 600 !important; letter-spacing: 0.2px !important; text-transform: none !important; cursor: pointer !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; margin: 6px 0 0 0 !important; box-shadow: none !important; transition: all 0.2s ease !important; } .wpcf7 input[type="submit"]:hover, .tv-btn-submit:hover, .contact-btn:hover, button.contact-btn:hover, .contact-form button.contact-btn:hover, .contact-form input[type="submit"]:hover { background: #113028 !important; transform: translateY(-1px) !important; box-shadow: 0 3px 10px rgba(23, 63, 53, 0.2) !important; } .wpcf7-not-valid-tip { font-size: 11px !important; color: #dc2626 !important; margin-top: 2px !important; } .wpcf7-response-output { border-radius: 6px !important; padding: 8px 12px !important; font-size: 12.5px !important; margin-top: 10px !important; border: 1px solid #10b981 !important; background: #f0fdf4 !important; color: #065f46 !important; } .tv-form-row { display: flex !important; gap: 10px !important; } @media (max-width: 600px) { .tv-form-row { flex-direction: column !important; gap: 0 !important; } } .tv-form-group { flex: 1 !important; margin-bottom: 8px !important; } .tv-form-group label { font-size: 12px !important; font-weight: 600 !important; color: var(--tv-ink, #243a32) !important; display: block !important; margin-bottom: 2px !important; line-height: 1.25 !important; } .tv-form-group label .required { color: #dc2626 !important; } /* ============================================================== MAGAZINES / BLOG ARCHIVE TEMPLATE Matches the luxury aesthetic of TravelVillas ============================================================== */ .tv-magazines-page .tv-page-container { max-width: 1200px !important; margin: 0 auto !important; padding: 44px 24px 72px !important; } .tv-articles-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 28px !important; } @media (max-width: 991px) { .tv-articles-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; } } @media (max-width: 600px) { .tv-articles-grid { grid-template-columns: 1fr !important; gap: 24px !important; } .tv-magazines-page .tv-page-container { padding: 28px 16px 48px !important; } } .tv-article-card { background: #ffffff !important; border: 1px solid var(--tv-line, #e4e7df) !important; border-radius: 14px !important; overflow: hidden !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important; display: flex !important; flex-direction: column !important; transition: transform 0.25s ease, box-shadow 0.25s ease !important; } .tv-article-card:hover { transform: translateY(-3px) !important; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08) !important; } .tv-article-image-wrap { position: relative !important; display: block !important; aspect-ratio: 16 / 10 !important; overflow: hidden !important; background: #e9ecef !important; text-decoration: none !important; } .tv-article-image-wrap img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform 0.4s ease !important; } .tv-article-card:hover .tv-article-image-wrap img { transform: scale(1.04) !important; } .tv-article-cat-badge { position: absolute !important; top: 14px !important; left: 14px !important; background: rgba(23, 63, 53, 0.88) !important; backdrop-filter: blur(4px) !important; -webkit-backdrop-filter: blur(4px) !important; color: #ffffff !important; font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.8px !important; padding: 4px 10px !important; border-radius: 4px !important; z-index: 2 !important; } .tv-article-body { padding: 22px 24px 24px !important; display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; } .tv-article-meta { margin-bottom: 8px !important; font-size: 12.5px !important; color: #6b7280 !important; font-weight: 500 !important; } .tv-article-title { font-family: var(--tv-serif, Georgia, serif) !important; font-size: 20px !important; font-weight: 500 !important; line-height: 1.35 !important; margin: 0 0 10px 0 !important; color: var(--tv-ink, #243a32) !important; } .tv-article-title a { color: inherit !important; text-decoration: none !important; transition: color 0.2s ease !important; } .tv-article-title a:hover { color: #10b981 !important; } .tv-article-excerpt { font-size: 14px !important; line-height: 1.6 !important; color: #556052 !important; margin: 0 0 18px 0 !important; flex: 1 1 auto !important; } .tv-article-footer { margin-top: auto !important; padding-top: 14px !important; border-top: 1px solid #f1f3ee !important; } .tv-article-read-btn { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: 13.5px !important; font-weight: 600 !important; color: var(--tv-green, #173f35) !important; text-decoration: none !important; transition: all 0.2s ease !important; } .tv-article-read-btn:hover { color: #10b981 !important; transform: translateX(3px) !important; } .tv-article-read-btn svg { transition: transform 0.2s ease !important; } .tv-article-read-btn:hover svg { transform: translateX(2px) !important; } .tv-pagination { display: flex !important; justify-content: center !important; align-items: center !important; gap: 8px !important; margin-top: 48px !important; } .tv-pagination .page-numbers { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 40px !important; height: 40px !important; padding: 0 12px !important; border-radius: 8px !important; border: 1px solid var(--tv-line, #e4e7df) !important; background: #ffffff !important; color: #173f35 !important; font-size: 14px !important; font-weight: 600 !important; text-decoration: none !important; transition: all 0.2s ease !important; } .tv-pagination .page-numbers.current { background: #173f35 !important; color: #ffffff !important; border-color: #173f35 !important; } .tv-pagination .page-numbers:not(.current):hover { border-color: #173f35 !important; background: #f8faf7 !important; } .tv-empty-articles { text-align: center !important; padding: 60px 24px !important; background: #ffffff !important; border-radius: 16px !important; border: 1px solid var(--tv-line, #e4e7df) !important; max-width: 600px !important; margin: 0 auto !important; } .tv-empty-articles h3 { font-family: var(--tv-serif, Georgia, serif) !important; font-size: 26px !important; color: #173f35 !important; margin: 0 0 10px 0 !important; } .tv-empty-articles p { font-size: 15px !important; color: #556052 !important; margin: 0 0 20px 0 !important; } /* Sign In & Auth Luxury Styling */ .hp-page--user-login-page .hp-row, .hp-page--user-password-reset-page .hp-row { justify-content: center !important; margin: 40px auto 80px !important; } .hp-page--user-login-page .hp-page__content, .hp-page--user-password-reset-page .hp-page__content, .hp-modal--user-login .hp-modal__content, #user_login_modal .hp-modal__content, #user_register_modal .hp-modal__content, #user_password_modal .hp-modal__content { background: #ffffff !important; border: 1px solid var(--tv-line, #e4e7df) !important; border-radius: 16px !important; padding: 38px 34px !important; box-shadow: 0 10px 32px rgba(0, 0, 0, 0.05) !important; box-sizing: border-box !important; } .hp-page--user-login-page .hp-page__title, .hp-modal--user-login .hp-modal__title, #user_login_modal .hp-modal__title, #user_register_modal .hp-modal__title, #user_password_modal .hp-modal__title { font-family: var(--tv-serif, Georgia, serif) !important; font-size: 28px !important; font-weight: 400 !important; color: var(--tv-ink, #243a32) !important; letter-spacing: -0.5px !important; text-align: center !important; margin: 0 0 20px 0 !important; } .hp-form--user-login, .hp-form--user-register, .hp-form--user-password-request, .hp-form--user-password-reset { display: flex !important; flex-direction: column !important; gap: 14px !important; } .hp-form--user-login .hp-field__label, .hp-form--user-register .hp-field__label, .hp-form--user-password-request .hp-field__label { font-size: 13px !important; font-weight: 600 !important; color: var(--tv-ink, #243a32) !important; margin-bottom: 6px !important; display: block !important; } .hp-form--user-login input[type="text"], .hp-form--user-login input[type="password"], .hp-form--user-login input[type="email"], .hp-form--user-register input[type="text"], .hp-form--user-register input[type="password"], .hp-form--user-register input[type="email"], .hp-form--user-password-request input[type="text"], .hp-form--user-password-request input[type="email"] { width: 100% !important; height: 48px !important; border: 1px solid #d1d5db !important; border-radius: 8px !important; padding: 0 16px !important; font-size: 15px !important; color: #1f2937 !important; background: #fbfbf9 !important; box-shadow: none !important; outline: none !important; transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important; box-sizing: border-box !important; } .hp-form--user-login input:focus, .hp-form--user-register input:focus, .hp-form--user-password-request input:focus { border-color: #10b981 !important; background: #ffffff !important; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12) !important; } .hp-form--user-login .hp-form__button, .hp-form--user-register .hp-form__button, .hp-form--user-password-request .hp-form__button, .hp-form--user-password-reset .hp-form__button { width: 100% !important; height: 48px !important; background: #10b981 !important; color: #ffffff !important; border: none !important; border-radius: 8px !important; font-size: 15px !important; font-weight: 600 !important; letter-spacing: 0.3px !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; margin-top: 10px !important; transition: background-color 0.2s ease, transform 0.2s ease !important; } .hp-form--user-login .hp-form__button:hover, .hp-form--user-register .hp-form__button:hover, .hp-form--user-password-request .hp-form__button:hover { background: #059669 !important; transform: translateY(-1px) !important; } .hp-form--user-login .hp-form__footer, .hp-form--user-register .hp-form__footer, .hp-form--user-password-request .hp-form__footer { text-align: center !important; margin-top: 14px !important; display: flex !important; flex-direction: column !important; gap: 8px !important; align-items: center !important; } .hp-form--user-login .hp-form__footer a, .hp-form--user-register .hp-form__footer a, .hp-form--user-password-request .hp-form__footer a { font-size: 13px !important; color: #173f35 !important; font-weight: 500 !important; text-decoration: underline !important; text-underline-offset: 3px !important; } .hp-form--user-login .hp-form__footer a:hover, .hp-form--user-register .hp-form__footer a:hover { color: #10b981 !important; } .hp-modal.modal, #user_login_modal, #user_register_modal, #user_password_modal { backdrop-filter: blur(4px) !important; background: rgba(17, 34, 28, 0.5) !important; } .hp-modal .hp-modal__dialog, #user_login_modal .modal-dialog, #user_register_modal .modal-dialog, #user_password_modal .modal-dialog { max-width: 440px !important; margin: 60px auto !important; border-radius: 16px !important; } .hp-modal .hp-modal__close, #user_login_modal .close, #user_register_modal .close, #user_password_modal .close { position: absolute !important; top: 18px !important; right: 18px !important; font-size: 24px !important; color: #9ca3af !important; opacity: 0.8 !important; border: none !important; background: transparent !important; cursor: pointer !important; } /* Standard Page Typography & Content */ .tv-standard-page { padding: 40px 0 80px !important; } .tv-standard-page-header { margin-bottom: 32px !important; padding-bottom: 20px !important; border-bottom: 1px solid var(--tv-line, #e4e7df) !important; } .tv-standard-content { font-size: 16px !important; line-height: 1.85 !important; color: #374151 !important; } .tv-standard-content h2 { font-family: var(--tv-serif, Georgia, serif) !important; font-size: 26px !important; font-weight: 500 !important; color: var(--tv-ink, #243a32) !important; margin: 36px 0 16px !important; } .tv-standard-content h3 { font-size: 20px !important; font-weight: 600 !important; color: var(--tv-ink, #243a32) !important; margin: 28px 0 12px !important; } .tv-standard-content p { margin-bottom: 20px !important; } .tv-standard-content ul, .tv-standard-content ol { padding-left: 24px !important; margin-bottom: 24px !important; } .tv-standard-content li { margin-bottom: 8px !important; } .tv-standard-content a { color: #173f35 !important; text-decoration: underline !important; text-underline-offset: 3px !important; font-weight: 500 !important; } .tv-standard-content img { border-radius: 12px !important; max-width: 100% !important; height: auto !important; } /* Suppress legacy duplicate headers or raw breadcrumb SVGs inside page content */ .tv-standard-content > h2:first-child { display: none !important; } @supports selector(:has(*)) { .tv-standard-content > ul:first-of-type:has(svg) { display: none !important; } } /* ============================================================== UNIVERSAL CARD HEIGHT, ALIGNMENT & BORDER SYSTEM Strictly enforces uniform heights and consistent 1px borders & 12px radius across all card types site-wide (Listing, Destination, Category, Collection, Reason) ============================================================== */ /* 1. All Repeated Grid Containers - Equal Height Flex/Grid Stretch */ .cards, .tv-villas-grid, .listing-cards, .tv-related-cards, .hp-listings .hp-row, .destinations, .tv-destinations-grid, .hp-listing-categories .hp-row, .collections, .tv-collections-grid { align-items: stretch !important; } .hp-listings .hp-grid__item, .hp-listings .hp-row > .hp-grid__item, .hp-listings.hp-grid > .hp-row > .hp-grid__item, .hp-grid > .hp-row > .hp-grid__item, .hp-page__content .hp-listings .hp-grid__item, .hp-listing-categories .hp-grid__item, .hp-listing-categories.hp-grid > .hp-row > .hp-grid__item { display: flex !important; flex-direction: column !important; align-items: stretch !important; } /* 2. Universal Listing Cards (Listing, Category, Search Results, Featured) */ .cards .card, .tv-villas-grid .tv-villa-card, .listing-cards .card, .tv-related-cards .card, .hp-listings .hp-listing--view-block, .card, .tv-villa-card, .tv-archive-card, .hp-listing--view-block { display: flex !important; flex-direction: column !important; height: 100% !important; width: 100% !important; box-sizing: border-box !important; background: #ffffff !important; border: 1px solid var(--tv-line, #e4e7df) !important; border-radius: 12px !important; overflow: hidden !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important; position: relative !important; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important; } .cards .card:hover, .tv-villas-grid .tv-villa-card:hover, .listing-cards .card:hover, .tv-related-cards .card:hover, .hp-listings .hp-listing--view-block:hover, .card:hover, .tv-villa-card:hover, .tv-archive-card:hover, .hp-listing--view-block:hover { transform: translateY(-3px) !important; box-shadow: 0 8px 24px rgba(23, 63, 53, 0.08) !important; border-color: #ccd2c4 !important; } /* Photo & Slider: Equal Height 230px, Top corners 11px flush with card border */ .card-photo, .tv-villa-photo, .hp-listing--view-block .hp-listing__header, .hp-listing--view-block .hp-listing__image, .hp-listing--view-block .slick-slider, .hp-listing--view-block .slick-list, .hp-listing--view-block .slick-track, .hp-listing--view-block .slick-slide { height: 230px !important; min-height: 230px !important; max-height: 230px !important; width: 100% !important; box-sizing: border-box !important; border-radius: 11px 11px 0 0 !important; overflow: hidden !important; position: relative !important; margin: 0 !important; padding: 0 !important; flex-shrink: 0 !important; } .card-photo img, .tv-villa-photo img, .hp-listing--view-block .hp-listing__header img, .hp-listing--view-block .hp-listing__image img, .hp-listing--view-block .slick-slide img { width: 100% !important; height: 230px !important; min-height: 230px !important; max-height: 230px !important; object-fit: cover !important; display: block !important; border-radius: 11px 11px 0 0 !important; transition: transform 0.45s ease !important; } /* Card Body Flexbox Filling Height */ .card-body, .tv-villa-body, .hp-listing--view-block .hp-listing__content { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; padding: 16px 18px 18px !important; background: #ffffff !important; box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; } /* Card Title: Uniform 52px min-height (accommodates 2 lines) so features and price align horizontally */ .card-title, .tv-villa-title, .hp-listing--view-block .hp-listing__title { margin: 0 0 6px 0 !important; min-height: 52px !important; display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 8px !important; flex-shrink: 0 !important; } /* Features Chips Container: 28px min-height */ .card-features, .tv-villa-features, .hp-listing--view-block .hp-listing__attributes { display: flex !important; gap: 6px !important; flex-wrap: wrap !important; margin: 0 0 14px 0 !important; min-height: 28px !important; flex-shrink: 0 !important; } /* Card Bottom Action / Price Row: Pinned to bottom with margin-top: auto */ .card-price, .tv-villa-price-row, .hp-listing--view-block .hp-listing__footer { margin-top: auto !important; padding-top: 14px !important; border-top: 1px solid var(--tv-line, #e4e7df) !important; border-bottom: none !important; border-left: none !important; border-right: none !important; display: flex !important; align-items: flex-end !important; justify-content: space-between !important; background: transparent !important; width: 100% !important; box-sizing: border-box !important; flex-shrink: 0 !important; } /* 3. Destination Cards Throughout the Website */ .destinations .destination, .tv-destinations-grid .tv-destination-card, .hp-listing-categories .hp-listing-category--view-block, .destination, .tv-destination-card { height: 240px !important; min-height: 240px !important; max-height: 240px !important; border: 1px solid var(--tv-line, #e4e7df) !important; border-radius: 12px !important; overflow: hidden !important; position: relative !important; display: block !important; background: #38534a !important; box-sizing: border-box !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important; text-decoration: none !important; } .destinations .destination:hover, .tv-destinations-grid .tv-destination-card:hover, .hp-listing-categories .hp-listing-category--view-block:hover, .destination:hover, .tv-destination-card:hover { transform: translateY(-3px) !important; box-shadow: 0 8px 24px rgba(23, 63, 53, 0.08) !important; border-color: #ccd2c4 !important; } .destinations .destination img, .tv-destinations-grid .tv-destination-card img, .hp-listing-categories .hp-listing-category--view-block img, .destination img, .tv-destination-card img, .tv-dest-img-wrap img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; border-radius: 11px !important; transition: transform 0.5s ease !important; } .destinations .destination:hover img, .tv-destinations-grid .tv-destination-card:hover img, .destination:hover img, .tv-destination-card:hover img { transform: scale(1.05) !important; } /* 4. Occasion-based Collection Cards Throughout the Website */ .collections .collection, .tv-collections-grid .tv-collection-card, .collection, .tv-collection-card { height: 280px !important; min-height: 280px !important; max-height: 280px !important; border: 1px solid var(--tv-line, #e4e7df) !important; border-radius: 12px !important; overflow: hidden !important; position: relative !important; display: flex !important; align-items: flex-end !important; box-sizing: border-box !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important; text-decoration: none !important; } .collections .collection:hover, .tv-collections-grid .tv-collection-card:hover, .collection:hover, .tv-collection-card:hover { transform: translateY(-3px) !important; box-shadow: 0 8px 24px rgba(23, 63, 53, 0.08) !important; border-color: #ccd2c4 !important; } .collections .collection img, .tv-collections-grid .tv-collection-card img, .collection img, .tv-collection-card img { width: 100% !important; height: 100% !important; object-fit: cover !important; position: absolute !important; inset: 0 !important; border-radius: 11px !important; transition: transform 0.5s ease !important; } .collections .collection:hover img, .tv-collections-grid .tv-collection-card:hover img, .collection:hover img, .tv-collection-card:hover img { transform: scale(1.05) !important; } /* Collection & Destination Cards - Gradient Overlay & Pure White Typography */ .collection:after, .collections .collection:after, .tv-collection-card:after, .destination:after, .destinations .destination:after { content: '' !important; position: absolute !important; inset: 0 !important; background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(12, 36, 26, 0.85) 100%) !important; z-index: 1 !important; pointer-events: none !important; border-radius: 11px !important; } .collection-copy, .collections .collection .collection-copy, .tv-collection-card .collection-copy { position: absolute !important; left: 24px !important; bottom: 24px !important; right: 24px !important; z-index: 2 !important; color: #ffffff !important; text-align: left !important; pointer-events: none !important; } .collection-copy h3, .collection h3, .collections .collection h3, .tv-collection-card h3, .tv-collections-grid h3 { color: #ffffff !important; font-family: var(--tv-serif, Georgia, serif) !important; font-size: 26px !important; font-weight: 400 !important; letter-spacing: -0.5px !important; line-height: 1.2 !important; margin: 0 0 6px 0 !important; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45) !important; } .collection-copy p, .collection p, .collections .collection p, .tv-collection-card p, .tv-collections-grid p { color: #f0f3eb !important; font-size: 13px !important; font-weight: 400 !important; line-height: 1.4 !important; margin: 0 !important; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35) !important; } .destination div, .destinations .destination div, .tv-destinations-grid .tv-destination-card div { position: absolute !important; left: 20px !important; bottom: 20px !important; right: 20px !important; z-index: 2 !important; color: #ffffff !important; text-align: left !important; pointer-events: none !important; } .destination h3, .destinations .destination h3, .tv-destination-card h3, .tv-destinations-grid h3 { color: #ffffff !important; font-family: var(--tv-serif, Georgia, serif) !important; font-size: 22px !important; font-weight: 400 !important; letter-spacing: -0.4px !important; margin: 0 0 4px 0 !important; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45) !important; } .destination p, .destinations .destination p, .tv-destination-card p, .tv-destinations-grid p { color: #e6eadd !important; font-size: 12px !important; margin: 0 !important; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35) !important; } /* 5. Reason & Highlight Cards */ .reason, .story-copy .reason, .highlight, .highlights .highlight { border: 1px solid var(--tv-line, #e4e7df) !important; border-radius: 12px !important; background: #ffffff !important; padding: 16px 20px !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important; box-sizing: border-box !important; transition: border-color 0.2s ease, box-shadow 0.2s ease !important; } .reason:hover, .story-copy .reason:hover, .highlight:hover { border-color: #ccd2c4 !important; box-shadow: 0 4px 14px rgba(23, 63, 53, 0.06) !important; } /* Bedroom Showcase Cards */ .bedroom-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; align-items: stretch !important; } .bedroom-grid .bedroom { display: flex !important; flex-direction: column !important; height: 100% !important; border: 1px solid var(--tv-line, #e4e7df) !important; border-radius: 12px !important; background: #ffffff !important; overflow: hidden !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important; box-sizing: border-box !important; padding-bottom: 16px !important; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important; } .bedroom-grid .bedroom:hover { transform: translateY(-3px) !important; box-shadow: 0 8px 24px rgba(23, 63, 53, 0.08) !important; border-color: #ccd2c4 !important; } .bedroom-grid .bedroom img { width: 100% !important; height: 175px !important; min-height: 175px !important; max-height: 175px !important; object-fit: cover !important; display: block !important; border-radius: 11px 11px 0 0 !important; } .bedroom-grid .bedroom h4 { font-family: var(--tv-sans, 'DM Sans', sans-serif) !important; font-size: 15px !important; font-weight: 600 !important; color: var(--tv-ink, #243a32) !important; margin: 14px 16px 4px !important; } .bedroom-grid .bedroom p { font-size: 12px !important; color: var(--tv-muted, #737970) !important; margin: 0 16px !important; } /* Secondary & Information Cards Throughout the Website */ .tv-luxury-card, .tv-mission-card, .tv-vision-card, .tv-why-card, .tv-pillar-card, .tv-contact-card, .tv-contact-info-card, .tv-social-card, .tv-reviews-card, .location-panel, .booking { border: 1px solid var(--tv-line, #e4e7df) !important; border-radius: 12px !important; box-sizing: border-box !important; } .tv-why-grid, .tv-pillars-grid, .tv-mission-vision-grid { align-items: stretch !important; } .tv-why-card, .tv-pillar-card, .tv-luxury-card { height: 100% !important; } /* 6. Sticky Sidebar Filters Card (Weekdays Price) */ .hp-widget--listing-filter, .hp-page__sidebar .hp-form--listing-filter, .filters { background: #ffffff !important; border: 1px solid var(--tv-line, #e4e7df) !important; border-radius: 12px !important; padding: 24px !important; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.03) !important; margin-bottom: 24px !important; box-sizing: border-box !important; position: -webkit-sticky !important; position: sticky !important; top: 95px !important; z-index: 20 !important; } /* 7. Responsive Card Heights */ @media (max-width: 1100px) { .destinations .destination, .tv-destinations-grid .tv-destination-card, .destination, .tv-destination-card { height: 225px !important; min-height: 225px !important; max-height: 225px !important; } } @media (max-width: 760px) { .card-photo, .tv-villa-photo, .hp-listing--view-block .hp-listing__header, .hp-listing--view-block .hp-listing__image, .hp-listing--view-block .slick-slider, .hp-listing--view-block .slick-list, .hp-listing--view-block .slick-slide, .card-photo img, .tv-villa-photo img, .hp-listing--view-block .hp-listing__header img, .hp-listing--view-block .hp-listing__image img, .hp-listing--view-block .slick-slide img { height: 210px !important; min-height: 210px !important; max-height: 210px !important; } .destinations .destination, .tv-destinations-grid .tv-destination-card, .destination, .tv-destination-card { height: 196px !important; min-height: 196px !important; max-height: 196px !important; } .destinations .destination:last-child { grid-column: 1 / -1 !important; height: 160px !important; min-height: 160px !important; max-height: 160px !important; } .collections .collection, .tv-collections-grid .tv-collection-card, .collection, .tv-collection-card { height: 230px !important; min-height: 230px !important; max-height: 230px !important; } } /* ============================================================== TARGETED UPDATE 2: REDUCE OVERSIZED CARD DIMENSIONS (#why-us .trip-banner) ============================================================== */ .trip-banner { background: var(--tv-green, #173f35) !important; color: #ffffff !important; border-radius: 12px !important; padding: 30px 38px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 24px !important; max-width: 1000px !important; margin: 28px auto !important; box-sizing: border-box !important; } .trip-banner h2 { color: #ffffff !important; font-family: var(--tv-serif, Georgia, serif) !important; font-size: 26px !important; font-weight: 500 !important; line-height: 1.25 !important; margin: 0 0 6px 0 !important; } .trip-banner p { color: #d1fae5 !important; font-size: 14px !important; line-height: 1.5 !important; margin: 0 !important; } .trip-banner .btn { background: #ffffff !important; color: var(--tv-green, #173f35) !important; border: 1px solid #ffffff !important; padding: 11px 22px !important; font-size: 14px !important; font-weight: 600 !important; border-radius: 8px !important; flex-shrink: 0 !important; white-space: nowrap !important; transition: all 0.2s ease !important; } .trip-banner .btn:hover { background: #f0fdf4 !important; color: #059669 !important; } @media (max-width: 768px) { .trip-banner { padding: 20px 18px !important; flex-direction: column !important; text-align: center !important; gap: 14px !important; margin: 18px 0 !important; border-radius: 10px !important; } .trip-banner h2 { font-size: 20px !important; margin-bottom: 6px !important; } .trip-banner p { font-size: 13px !important; } .trip-banner .btn { width: 100% !important; justify-content: center !important; padding: 10px 18px !important; font-size: 13px !important; } .reason { margin: 14px 0 !important; padding: 14px 16px !important; border-radius: 8px !important; } } /* ============================================================== TARGETED UPDATE 3: COOKIE NOTICE POSITIONING & VISIBILITY (CookieYes / GDPR) ============================================================== */ .cky-btn-revisit-wrapper, .cky-revisit-bottom-left, .cky-revisit-bottom-right, button.cky-btn-revisit-wrapper { z-index: 999999 !important; bottom: 24px !important; right: 20px !important; left: auto !important; transition: bottom 0.25s ease, opacity 0.2s ease !important; visibility: visible !important; opacity: 1 !important; } .cky-consent-container { z-index: 999999 !important; position: fixed !important; } .cky-consent-bar { z-index: 999999 !important; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25) !important; } @media (max-width: 768px) { .cky-btn-revisit-wrapper, .cky-revisit-bottom-left, .cky-revisit-bottom-right, button.cky-btn-revisit-wrapper { bottom: 84px !important; right: 16px !important; left: auto !important; } body.single-hp_listing .cky-btn-revisit-wrapper, body.single-hp_listing .cky-consent-container, body.single-hp_listing .cky-revisit-bottom-left, body.single-hp_listing .cky-revisit-bottom-right { bottom: 84px !important; right: 16px !important; left: auto !important; } /* Elevate floating call & WhatsApp buttons so they never clash with sticky bar or cover the price */ .sticky_section { bottom: 86px !important; left: 16px !important; right: auto !important; padding: 0 !important; z-index: 99999 !important; } body.single-hp_listing .sticky_section, .single-hp_listing .sticky_section { bottom: 86px !important; left: 16px !important; right: auto !important; padding: 0 !important; } .joinchat, .joinchat__button, .tv-floating-call, .quick-call-button, a[href^="tel:"]:not(.tv-channel-item):not(.btn) { bottom: 142px !important; } } @media (max-width: 1000px) { .sticky_section { bottom: 86px !important; left: 16px !important; right: auto !important; padding: 0 !important; z-index: 99999 !important; } body.single-hp_listing .sticky_section, .single-hp_listing .sticky_section { bottom: 86px !important; left: 16px !important; right: auto !important; padding: 0 !important; } } /* ============================================================== TARGETED UPDATE 4: HERO 4 SLIDING IMAGES CAROUSEL ============================================================== */ .hero { position: relative !important; overflow: hidden !important; isolation: isolate !important; } .hero-slider { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; z-index: 1 !important; pointer-events: none !important; } .hero-slide { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; opacity: 0 !important; z-index: 1 !important; transition: opacity 1.2s ease-in-out !important; pointer-events: none !important; } .hero-slide.active { opacity: 1 !important; z-index: 2 !important; pointer-events: auto !important; } .hero-slide img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center 55% !important; display: block !important; } .hero:after { content: '' !important; position: absolute !important; inset: 0 !important; z-index: 2 !important; background: linear-gradient(90deg, rgba(10,33,25,0.65), rgba(10,33,25,0.15)), linear-gradient(0deg, rgba(5,22,14,0.3), transparent) !important; pointer-events: none !important; } .hero-content { position: relative !important; z-index: 3 !important; } .hero-location { display: none !important; } .hero-dots { position: absolute !important; bottom: 22px !important; left: 50% !important; transform: translateX(-50%) !important; z-index: 4 !important; display: flex !important; align-items: center !important; gap: 8px !important; margin: 0 !important; padding: 0 !important; } .hero-dot { width: 10px !important; height: 10px !important; border-radius: 50% !important; background: rgba(255, 255, 255, 0.45) !important; border: 1px solid rgba(255, 255, 255, 0.7) !important; cursor: pointer !important; padding: 0 !important; margin: 0 !important; outline: none !important; transition: background 0.3s ease, transform 0.3s ease, width 0.3s ease !important; } .hero-dot.active { background: #ffffff !important; width: 24px !important; border-radius: 6px !important; border-color: #ffffff !important; } @media (max-width: 768px) { .hero-dots { bottom: 16px !important; } } /* ============================================================== TARGETED FIX: WORDPRESS EMOJI & INLINE ICON PROTECTION Prevents Twemoji SVGs in location / titles from stretching to full card width ============================================================== */ img.emoji, img.wp-smiley, .hp-listing img.emoji, .hp-listing--view-block img.emoji, .hp-listing__content img.emoji, .hp-listing__content img, .hp-listing__details img, .hp-listing__location img, .hp-listing__location img.emoji { display: inline !important; width: 1.15em !important; max-width: 1.15em !important; min-width: 0 !important; height: 1.15em !important; min-height: 0 !important; max-height: 1.15em !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; margin: 0 0.15em 0 0.2em !important; vertical-align: -0.15em !important; background: transparent !important; object-fit: contain !important; transform: none !important; } /* ============================================================== TARGETED FIX: SITE PRELOADER & SPINNER GREEN COLOR ============================================================== */ .site-loader svg stop, .site-loader linearGradient stop { stop-color: #00bf63 !important; } .site-loader svg path { stroke: url(#gradient) !important; }