/* Airbnb landing theme — loaded only on /airbnb */ /* IMPORTANT: This stylesheet is always loaded on /airbnb, but styles only activate after the class `.theme-airbnb` is applied to . That allows us to show the main site theme first, then switch to Airbnb. */ /* Smooth transitions when the theme flips */ body{ transition: background 850ms ease, background-color 850ms ease, color 450ms ease; } .header, .btn, .footer{ transition: background 850ms ease, background-color 850ms ease, color 450ms ease, border-color 450ms ease, box-shadow 650ms ease; } body.theme-airbnb, body[data-theme="airbnb"]{ background: radial-gradient(circle at 20% 20%, rgba(255,56,92,.10), transparent 38%), radial-gradient(circle at 85% 10%, rgba(255,56,92,.14), transparent 42%), linear-gradient(180deg, #ffffff, #fff6f8 52%, #ffffff); color:#0b0d12; } /* Remove ALL underlines in Airbnb theme (requested) */ body.theme-airbnb * , body[data-theme="airbnb"] *{ text-decoration: none !important; } body.theme-airbnb .header, body[data-theme="airbnb"] .header{ background:rgba(255,255,255,.75); border-bottom:1px solid rgba(0,0,0,.08); box-shadow:0 10px 30px rgba(0,0,0,.06); } body.theme-airbnb .brand span, body[data-theme="airbnb"] .brand span{ color:#FF385C; } body.theme-airbnb .btn, body[data-theme="airbnb"] .btn{ background:rgba(0,0,0,.04); color:#0b0d12; border-color:rgba(0,0,0,.10); box-shadow:none; } body.theme-airbnb .btn:hover, body[data-theme="airbnb"] .btn:hover{ border-color:rgba(0,0,0,.18); background:rgba(0,0,0,.06); } body.theme-airbnb .btn.primary, body[data-theme="airbnb"] .btn.primary{ background:linear-gradient(140deg, #FF385C, #ff6a84); color:#fff; box-shadow:0 18px 36px rgba(255,56,92,.28); border-color:rgba(255,56,92,.35); } body.theme-airbnb .btn.primary:hover, body[data-theme="airbnb"] .btn.primary:hover{ transform: translateY(-1px); box-shadow:0 22px 44px rgba(255,56,92,.34); } body.theme-airbnb .dropdown-menu, body[data-theme="airbnb"] .dropdown-menu{ background:rgba(255,255,255,.92); border-color:rgba(0,0,0,.10); } body.theme-airbnb .dropdown-link, body[data-theme="airbnb"] .dropdown-link{ color:#0b0d12; } body.theme-airbnb .dropdown-link:hover, body[data-theme="airbnb"] .dropdown-link:hover{ background:rgba(255,56,92,.08); border-color:rgba(255,56,92,.25); } /* requested hover color for Airbnb link */ body.theme-airbnb .dropdown-link[href="/airbnb"]:hover, body[data-theme="airbnb"] .dropdown-link[href="/airbnb"]:hover{ color:#FF385C; } /* Mobile nav drawer: lux.css uses a dark panel; in Airbnb theme we force a light drawer so links stay readable. */ @media (max-width: 900px){ body.theme-airbnb .nav, body[data-theme="airbnb"] .nav{ background:rgba(255,255,255,.96) !important; border:1px solid rgba(0,0,0,.10) !important; box-shadow:0 22px 48px rgba(0,0,0,.18) !important; } body.theme-airbnb .nav .btn, body[data-theme="airbnb"] .nav .btn{ background:rgba(0,0,0,.03) !important; color:#0b0d12 !important; border-color:rgba(0,0,0,.10) !important; } body.theme-airbnb .nav .btn:hover, body[data-theme="airbnb"] .nav .btn:hover{ background:rgba(255,56,92,.10) !important; border-color:rgba(255,56,92,.25) !important; } body.theme-airbnb .nav-toggle, body[data-theme="airbnb"] .nav-toggle{ background:rgba(0,0,0,.04) !important; border-color:rgba(0,0,0,.12) !important; } body.theme-airbnb .nav-toggle span, body[data-theme="airbnb"] .nav-toggle span{ background:#0b0d12 !important; } } /* Cards / sections */ body.theme-airbnb .lux-card, body[data-theme="airbnb"] .lux-card, body.theme-airbnb .panel, body[data-theme="airbnb"] .panel, body.theme-airbnb .card, body[data-theme="airbnb"] .card{ background:rgba(255,255,255,.75); border-color:rgba(0,0,0,.08); } /* Convert any "dark" panels to light panels in Airbnb theme */ body.theme-airbnb .lux-panel.dark, body[data-theme="airbnb"] .lux-panel.dark{ background:rgba(255,255,255,.92); color:#0b0d12; border-color:rgba(0,0,0,.08); } body.theme-airbnb .lux-panel.dark p, body[data-theme="airbnb"] .lux-panel.dark p{ color:rgba(11,13,18,.78); } /* Headings + body text colors on light background */ body.theme-airbnb .section-title, body[data-theme="airbnb"] .section-title{ color:#0b0d12; } body.theme-airbnb .process-title, body[data-theme="airbnb"] .process-title, body.theme-airbnb .lux-h2, body[data-theme="airbnb"] .lux-h2{ color:#0b0d12; } body.theme-airbnb .process-text, body[data-theme="airbnb"] .process-text{ color:rgba(11,13,18,.78); } body.theme-airbnb .section-sub, body[data-theme="airbnb"] .section-sub, body.theme-airbnb .muted, body[data-theme="airbnb"] .muted{ color:rgba(11,13,18,.70); } body.theme-airbnb .section-title, body[data-theme="airbnb"] .section-title{ color:#0b0d12; } body.theme-airbnb .process-title, body[data-theme="airbnb"] .process-title{ color:#0b0d12; } body.theme-airbnb .process-text, body[data-theme="airbnb"] .process-text{ color:rgba(11,13,18,.78); } .airbnb-hero-badge{ display:inline-flex; align-items:center; gap:10px; padding:8px 14px; border:1px solid rgba(255,56,92,.20); border-radius:999px; background:rgba(255,56,92,.07); color:#FF385C; font-weight:700; letter-spacing:.2px; } /* Override dark luxury hero/backgrounds from lux.css */ body.theme-airbnb .lux-hero, body[data-theme="airbnb"] .lux-hero{ background: radial-gradient(circle at 20% 18%, rgba(255,56,92,.20), transparent 46%), radial-gradient(circle at 80% 12%, rgba(255,56,92,.14), transparent 44%), linear-gradient(180deg, #ffffff, #fff6f8 55%, #ffffff); color:#0b0d12; border-bottom:1px solid rgba(0,0,0,.06); } /* Ensure general sections don't retain the dark/blue feel */ body.theme-airbnb .lux-process, body.theme-airbnb .lux-section, body.theme-airbnb .lux-pricing, body.theme-airbnb .lux-faq, body[data-theme="airbnb"] .lux-process, body[data-theme="airbnb"] .lux-section, body[data-theme="airbnb"] .lux-pricing, body[data-theme="airbnb"] .lux-faq{ background: transparent; } body.theme-airbnb .lux-hero .lux-title, body[data-theme="airbnb"] .lux-hero .lux-title{ color:#0b0d12; } body.theme-airbnb .lux-hero .lux-title em, body[data-theme="airbnb"] .lux-hero .lux-title em{ color:#FF385C; } body.theme-airbnb .lux-hero .lux-sub, body[data-theme="airbnb"] .lux-hero .lux-sub{ color:rgba(11,13,18,.78); } /* Make “lux” cards white + premium shadow */ body.theme-airbnb .lux-card, body[data-theme="airbnb"] .lux-card{ background:rgba(255,255,255,.92); border:1px solid rgba(0,0,0,.08); box-shadow:0 18px 46px rgba(0,0,0,.08); } body.theme-airbnb .lux-card h3, body[data-theme="airbnb"] .lux-card h3, body.theme-airbnb .lux-card .lux-kicker, body[data-theme="airbnb"] .lux-card .lux-kicker{ color:#0b0d12; } body.theme-airbnb .lux-card p, body[data-theme="airbnb"] .lux-card p, body.theme-airbnb .lux-card li, body[data-theme="airbnb"] .lux-card li{ color:rgba(11,13,18,.78); } /* Neutral sections on white */ body.theme-airbnb .lux-section, body[data-theme="airbnb"] .lux-section{ background:transparent; color:#0b0d12; } body.theme-airbnb .lux-faq, body[data-theme="airbnb"] .lux-faq{ background:linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.01)); border:1px solid rgba(0,0,0,.06); } /* CTA: Airbnb red with luxury depth */ body.theme-airbnb .lux-cta, body[data-theme="airbnb"] .lux-cta{ background:linear-gradient(140deg, #FF385C, #ff6a84 60%, #ff2d55); color:#fff; border:1px solid rgba(255,56,92,.35); box-shadow:0 26px 70px rgba(255,56,92,.28); } body.theme-airbnb .lux-cta .muted, body[data-theme="airbnb"] .lux-cta .muted{ color:rgba(255,255,255,.86); } /* Contact panel */ body.theme-airbnb .airbnb-contact, body[data-theme="airbnb"] .airbnb-contact{ background:rgba(255,255,255,.94); border:1px solid rgba(0,0,0,.08); border-radius:26px; padding:22px; box-shadow:0 18px 46px rgba(0,0,0,.08); } body.theme-airbnb .airbnb-contact a, body[data-theme="airbnb"] .airbnb-contact a{ color:#FF385C; font-weight:700; } /* Footer: switch to clean Airbnb red/white */ body.theme-airbnb .footer, body[data-theme="airbnb"] .footer{ background: #ffffff; color: #0b0d12; border-top:1px solid rgba(0,0,0,.08); } body.theme-airbnb .footer a, body[data-theme="airbnb"] .footer a{ color: rgba(11,13,18,.78); } body.theme-airbnb .footer a:hover, body[data-theme="airbnb"] .footer a:hover{ color: #FF385C; } body.theme-airbnb .footer .btn.primary, body[data-theme="airbnb"] .footer .btn.primary{ background: linear-gradient(140deg, #FF385C, #ff6a84); border-color: rgba(255,56,92,.35); box-shadow: 0 16px 34px rgba(255,56,92,.22); } body.theme-airbnb .footer-note, body[data-theme="airbnb"] .footer-note, body.theme-airbnb .footer-meta, body[data-theme="airbnb"] .footer-meta{ color: rgba(11,13,18,.66); } /* --- Luxury Airbnb typography --- */ body.theme-airbnb, body[data-theme="airbnb"]{ font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important; } body.theme-airbnb h1, body.theme-airbnb h2, body.theme-airbnb h3, body[data-theme="airbnb"] h1, body[data-theme="airbnb"] h2, body[data-theme="airbnb"] h3{ font-family: 'Playfair Display', Georgia, "Times New Roman", serif !important; letter-spacing: -0.02em; } body.theme-airbnb .eyebrow, body[data-theme="airbnb"] .eyebrow{ letter-spacing: 0.18em; text-transform: uppercase; } /* Ensure brand wordmark looks premium in Airbnb mode */ body.theme-airbnb .brand span, body[data-theme="airbnb"] .brand span{ font-family: 'Playfair Display', Georgia, serif !important; font-weight: 600; } body.theme-airbnb #footerBrandWord, body[data-theme=\"airbnb\"] #footerBrandWord{ color:#FF385C; } /* Ensure dropdown is readable in Airbnb mode */ body.theme-airbnb .dropdown-menu, body[data-theme="airbnb"] .dropdown-menu{ background:#ffffff !important; border-color:rgba(0,0,0,.10) !important; } body.theme-airbnb .dropdown-link, body[data-theme="airbnb"] .dropdown-link{ color:#0b0d12 !important; background:transparent !important; } body.theme-airbnb .dropdown-link:hover, body[data-theme="airbnb"] .dropdown-link:hover{ color:#FF385C !important; background:rgba(255,56,92,.08) !important; border-color:rgba(255,56,92,.22) !important; } /* Fix "transparent" headings + list text inside Airbnb service cards */ body.theme-airbnb .lux-card-title, body[data-theme="airbnb"] .lux-card-title{ color:#0b0d12 !important; opacity:1 !important; } body.theme-airbnb .lux-card-sub, body[data-theme="airbnb"] .lux-card-sub{ color:rgba(11,13,18,.72) !important; opacity:1 !important; } body.theme-airbnb .lux-list, body.theme-airbnb .lux-list li, body[data-theme="airbnb"] .lux-list, body[data-theme="airbnb"] .lux-list li{ color:rgba(11,13,18,.84) !important; opacity:1 !important; } /* Contact page elements (label/input/select/textarea) readability in Airbnb mode */ body.theme-airbnb .label, body[data-theme="airbnb"] .label{ color:#111827 !important; opacity:1 !important; } body.theme-airbnb .sub, body[data-theme="airbnb"] .sub{ color:rgba(11,13,18,.72) !important; opacity:1 !important; } body.theme-airbnb .input, body.theme-airbnb .select, body.theme-airbnb .textarea, body[data-theme="airbnb"] .input, body[data-theme="airbnb"] .select, body[data-theme="airbnb"] .textarea{ background:#ffffff !important; color:#0b0d12 !important; border-color:rgba(0,0,0,.14) !important; } body.theme-airbnb .input::placeholder, body.theme-airbnb .textarea::placeholder, body[data-theme="airbnb"] .input::placeholder, body[data-theme="airbnb"] .textarea::placeholder{ color:rgba(11,13,18,.45) !important; opacity:1 !important; } /* Service chips (used in contact/services picker) must be readable on light Airbnb theme */ body.theme-airbnb .service, body[data-theme="airbnb"] .service{ background: rgba(11,13,18,.03) !important; border-color: rgba(11,13,18,.14) !important; color: rgba(11,13,18,.88) !important; opacity: 1 !important; } body.theme-airbnb .service:hover, body[data-theme="airbnb"] .service:hover{ background: rgba(255,56,92,.08) !important; border-color: rgba(255,56,92,.30) !important; color: #0b0d12 !important; } body.theme-airbnb .service[data-selected="1"], body[data-theme="airbnb"] .service[data-selected="1"]{ background: rgba(255,56,92,.14) !important; border-color: rgba(255,56,92,.42) !important; color: #0b0d12 !important; box-shadow: 0 10px 22px rgba(255,56,92,.14); } /* --- Fix: organize hero benefit list (mobile + desktop) --- */ .theme-airbnb .lux-hero-card .lux-list, body[data-theme="airbnb"] .lux-hero-card .lux-list{ margin-top: 14px; } .theme-airbnb .lux-hero-card .lux-list li, body[data-theme="airbnb"] .lux-hero-card .lux-list li{ display: grid; grid-template-columns: 170px 1fr; column-gap: 16px; row-gap: 2px; align-items: start; padding: 10px 0; } .theme-airbnb .lux-hero-card .lux-list li strong, body[data-theme="airbnb"] .lux-hero-card .lux-list li strong{ display: block; color: #111827; font-weight: 700; } .theme-airbnb .lux-hero-card .lux-list li::before, body[data-theme="airbnb"] .lux-hero-card .lux-list li::before{ /* keep any existing bullet, but ensure it aligns */ margin-top: 6px; } @media (max-width: 640px){ .theme-airbnb .lux-hero-card .lux-list li, body[data-theme="airbnb"] .lux-hero-card .lux-list li{ grid-template-columns: 1fr; row-gap: 6px; padding: 12px 0; } } /* --- Fix: pills in 'Airbnb owners love clarity' (and anywhere on /airbnb) --- */ .theme-airbnb .pill, body[data-theme="airbnb"] .pill{ background: rgba(255,56,92,0.08) !important; border: 1px solid rgba(255,56,92,0.22) !important; color: #111827 !important; opacity: 1 !important; } .theme-airbnb .pill:hover, body[data-theme="airbnb"] .pill:hover{ background: rgba(255,56,92,0.12) !important; border-color: rgba(255,56,92,0.32) !important; } /* Ensure sub/secondary text never fades on light cards */ .theme-airbnb .card .sub, body[data-theme="airbnb"] .card .sub{ color: #374151 !important; opacity: 1 !important; }