/* ────────────────────────────────────────────────────────────────────────── Homepage theme — scoped to . NOTE: the "home-dark" class name is kept unchanged so home.njk needs no edit. Palette now matches the real Yellow Orchid Escorts site: white/black base, WhatsApp green as the primary accent (internal --bd-gold* names retained but hold green values), brand yellow reserved for --bd-ochre accents. ────────────────────────────────────────────────────────────────────────── */ .home-dark { --bd-bg: #ffffff; --bd-alt: #f2f2f2; /* alt sections / cards */ --bd-card: #ffffff; --bd-line: #e5e5e5; --bd-text: #000000; --bd-heading: #000000; --bd-muted: #4a4a4a; --bd-gold: #25d366; /* WhatsApp green (primary accent) */ --bd-gold-lt: #1da851; /* darker green for hover/emphasis */ --bd-ochre: #ffdc00; /* brand yellow — stars & small accents */ background: var(--bd-bg); color: var(--bd-text); } /* ── FAQ accordion ── */ .bd-faq { max-width: 780px; margin: 0 auto; display: grid; gap: .9rem; } .bd-faq-item { background: var(--bd-card); border: 1px solid var(--bd-line); border-radius: 6px; overflow: hidden; transition: border-color .25s ease, box-shadow .25s ease; } .bd-faq-item[open] { border-color: var(--bd-gold); box-shadow: 0 14px 30px -20px rgba(29,168,81,.3); } .bd-faq-q { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.5rem; cursor: pointer; list-style: none; font-family: var(--font-heading, 'Mohave', sans-serif); font-size: 1.1rem; color: var(--bd-heading); transition: color .25s ease; } .bd-faq-q::-webkit-details-marker { display: none; } .bd-faq-q:hover { color: var(--bd-gold); } .bd-faq-item[open] .bd-faq-q { color: var(--bd-gold-lt); } .bd-faq-icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--bd-line); color: var(--bd-gold); transition: transform .3s ease, background .3s ease, color .3s ease, border-color .3s ease; } .bd-faq-item[open] .bd-faq-icon { transform: rotate(45deg); background: var(--bd-gold); border-color: var(--bd-gold); color: #fff; } .bd-faq-a { padding: 0 1.5rem 1.4rem; } .bd-faq-a p { margin: 0; color: var(--bd-muted); line-height: 1.8; } /* ── Booking steps ── */ .bd-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; max-width: 1000px; margin: 0 auto; position: relative; } /* threading line behind the numbers */ .bd-steps::before { content: ''; position: absolute; top: 2.6rem; left: 12%; right: 12%; height: 1px; background: linear-gradient(90deg, transparent, var(--bd-line) 15%, var(--bd-line) 85%, transparent); } .bd-step { position: relative; text-align: center; padding: 0 1rem; } .bd-step-num { display: inline-flex; align-items: center; justify-content: center; width: 5.2rem; height: 5.2rem; border-radius: 50%; background: var(--bd-alt); border: 1px solid var(--bd-line); font-family: var(--font-heading, 'Mohave', sans-serif); font-size: 1.6rem; color: var(--bd-gold); letter-spacing: .05em; margin-bottom: 1.4rem; position: relative; z-index: 1; transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease, background .3s ease, color .3s ease; } .bd-step:hover .bd-step-num { background: var(--bd-gold); border-color: var(--bd-gold); color: #fff; transform: translateY(-4px); box-shadow: 0 16px 32px -16px rgba(29,168,81,.4); } .bd-step-body h3 { font-family: var(--font-heading, 'Mohave', sans-serif); font-weight: 500; font-size: 1.35rem; color: var(--bd-heading); margin: 0 0 .5rem; } .bd-step-body p { color: var(--bd-muted); line-height: 1.7; max-width: 240px; margin: 0 auto; } @media (max-width: 720px) { .bd-steps { grid-template-columns: 1fr; gap: 2.6rem; } .bd-steps::before { top: 5%; bottom: 5%; left: 50%; right: auto; width: 1px; height: auto; background: linear-gradient(180deg, transparent, var(--bd-line) 15%, var(--bd-line) 85%, transparent); } } .home-dark main { background: var(--bd-bg); } /* ── Shared header / footer on the homepage (inherit the global brand look) ── */ .home-dark .site-header { background: #ffffff; border-bottom: 1px solid var(--bd-line); } .home-dark .site-logo { color: var(--bd-heading); } .home-dark .site-nav a { color: var(--bd-text); } .home-dark .site-nav a:hover { color: var(--bd-gold-lt); } .home-dark .header-contact a { color: var(--bd-gold); border-color: var(--bd-line); } .home-dark .header-contact a:hover { background: var(--bd-gold); color: #fff; } .home-dark .mobile-menu-toggle { color: var(--bd-text); } .home-dark .site-nav { background: var(--bd-bg); } .home-dark .site-footer { background: #f2f2f2; color: #000; border-top: 1px solid var(--bd-line); } .home-dark .site-footer h3 { color: #000; } .home-dark .site-footer a { color: #4a4a4a; } .home-dark .site-footer a:hover { color: var(--bd-gold-lt); } /* ── Hero ── */ .bd-hero { background-color: var(--bd-bg); background-size: cover; background-position: center; text-align: center; padding: 8rem 0 7rem; border-bottom: 1px solid var(--bd-line); } .bd-eyebrow { text-transform: uppercase; letter-spacing: .3em; font-size: .74rem; color: var(--bd-muted); margin-bottom: 1.4rem; } .bd-hero-title { font-family: var(--font-heading, 'Mohave', sans-serif); font-weight: 700; text-transform: uppercase; font-size: clamp(2.8rem, 7vw, 5rem); line-height: 1.02; color: var(--bd-heading); margin: 0 0 .8rem; } .bd-hero-sub { font-family: var(--font-heading, 'Mohave', sans-serif); font-weight: 300; text-transform: uppercase; font-size: clamp(1.2rem, 3vw, 1.7rem); color: var(--bd-muted); margin-bottom: 1.6rem; } .bd-hero-intro { max-width: 620px; margin: 0 auto 2.4rem; color: var(--bd-muted); font-size: 1.05rem; } .bd-hero-cta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } .bd-btn { display: inline-block; padding: 1rem 2rem; border-radius: 999px; font-weight: 500; letter-spacing: .03em; text-decoration: none; transition: all .25s ease; } .bd-btn-gold { background: var(--bd-gold); color: #fff; } .bd-btn-gold:hover { background: var(--bd-gold-lt); color: #fff; transform: translateY(-2px); box-shadow: 0 12px 28px -12px rgba(29,168,81,.5); } .bd-btn-ghost { border: 1px solid var(--bd-gold); color: var(--bd-gold); } .bd-btn-ghost:hover { background: var(--bd-gold); color: #fff; transform: translateY(-2px); } /* ── Sections ── */ .bd-section { padding: 6.5rem 0; } .bd-section-alt { background: var(--bd-alt); border-top: 1px solid var(--bd-line); border-bottom: 1px solid var(--bd-line); } .bd-section-title { font-family: var(--font-heading, 'Mohave', sans-serif); font-weight: 700; text-transform: uppercase; font-size: clamp(1.8rem, 4vw, 2.8rem); text-align: center; color: var(--bd-heading); margin-bottom: 3rem; } .bd-muted { color: var(--bd-muted); } /* ── Masseuse grid ── */ .bd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.6rem; } .bd-card { display: block; text-decoration: none; background: transparent; overflow: hidden; transition: transform .35s ease; } .bd-card:hover .bd-card-img img { transform: scale(1.03); } .bd-card-img { position: relative; aspect-ratio: 3 / 4; overflow: hidden; } .bd-card-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .45s ease, transform .6s ease; } .bd-img-back { opacity: 0; } .bd-card:hover .bd-img-back { opacity: 1; } .bd-card:hover .bd-img-front { opacity: 0; } .bd-card:hover .bd-card-img img { transform: scale(1.04); } .bd-badge { position: absolute; top: .7rem; right: .7rem; z-index: 2; background: rgba(255,255,255,.9); backdrop-filter: blur(4px); color: var(--bd-gold-lt); font-size: .78rem; font-weight: 500; padding: .28rem .6rem; border-radius: 999px; } .bd-badge .star { color: var(--bd-ochre); } .bd-card-name { display: block; text-align: center; padding: 1rem .5rem 0; color: var(--bd-muted); font-family: var(--font-heading, 'Mohave', sans-serif); font-weight: 500; text-transform: uppercase; letter-spacing: .08em; font-size: .95rem; } .bd-card-name::before { content: ''; display: block; width: 32px; height: 1px; background: var(--bd-text); margin: 0 auto .9rem; } .bd-card:hover .bd-card-name { color: var(--bd-gold-lt); } /* ── SEO prose ── */ .bd-prose { max-width: 820px; } .bd-prose-h1 { font-family: var(--font-heading, 'Mohave', sans-serif); font-weight: 700; text-transform: uppercase; font-size: clamp(1.7rem, 4vw, 2.6rem); color: var(--bd-heading); text-align: center; margin-bottom: .4rem; } .bd-prose-sub { text-align: center; color: var(--bd-muted); margin-bottom: 2rem; } .bd-prose h2 { color: var(--bd-heading); font-family: var(--font-heading, 'Mohave', sans-serif); font-weight: 700; text-transform: uppercase; margin: 2rem 0 .8rem; } .bd-prose h3 { color: var(--bd-gold-lt); margin: 1.8rem 0 .6rem; } .bd-prose p { color: var(--bd-muted); margin-bottom: 1.1rem; line-height: 1.85; } .bd-prose strong { color: var(--bd-text); } /* ── Testimonials ── */ .bd-testimonials { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.6rem; max-width: 960px; margin: 0 auto; } .bd-quote { background: var(--bd-card); border: 1px solid var(--bd-line); padding: 2rem; margin: 0; } .bd-stars { color: var(--bd-ochre); letter-spacing: .15em; margin-bottom: 1rem; } .bd-quote blockquote { margin: 0; color: var(--bd-text); line-height: 1.7; } .bd-quote figcaption { margin-top: 1rem; color: var(--bd-muted); font-size: .9rem; } /* ── Incall & Outcall ── */ .bd-locations { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } .bd-location-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin: 1.6rem 0 0; } .bd-location-card { position: relative; display: flex; flex-direction: column; gap: .5rem; padding: 1.4rem 1.5rem 1.3rem; border-radius: 6px; background: linear-gradient(155deg, var(--bd-alt), var(--bd-bg)); border: 1px solid var(--bd-line); text-decoration: none; overflow: hidden; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; } .bd-location-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(155deg, var(--bd-gold), transparent 55%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .25s ease; pointer-events: none; } .bd-location-card:hover { transform: translateY(-4px); border-color: transparent; box-shadow: var(--bd-shadow, 0 14px 30px -16px rgba(29,168,81,.3)); } .bd-location-card:hover::before { opacity: 1; } .bd-location-pin { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: var(--bd-gold); color: #fff; transition: transform .25s ease; } .bd-location-card:hover .bd-location-pin { transform: scale(1.08) rotate(-6deg); } .bd-location-name { font-family: var(--font-heading, 'Mohave', sans-serif); font-size: 1.25rem; color: var(--bd-heading); letter-spacing: .01em; } .bd-location-meta { font-size: .82rem; color: var(--bd-muted); text-transform: uppercase; letter-spacing: .06em; } .bd-location-arrow { position: absolute; top: 1.4rem; right: 1.3rem; color: var(--bd-gold); opacity: 0; transform: translateX(-6px); transition: opacity .25s ease, transform .25s ease; } .bd-location-card:hover .bd-location-arrow { opacity: 1; transform: translateX(0); } .bd-locations-img img { width: 100%; border-radius: 6px; border: 1px solid var(--bd-line); } .bd-locations-single { grid-template-columns: 1fr; } /* ── Nearby: Places to Stay / Eat ── */ .bd-nearby-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } .bd-nearby-panel { position: relative; padding: 2rem 2.2rem; border-radius: 6px; background: linear-gradient(155deg, var(--bd-alt), var(--bd-bg)); border: 1px solid var(--bd-line); overflow: hidden; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; } .bd-nearby-panel::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(155deg, var(--bd-gold), transparent 55%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .25s ease; pointer-events: none; } .bd-nearby-panel:hover { transform: translateY(-4px); border-color: transparent; box-shadow: var(--bd-shadow, 0 14px 30px -16px rgba(29,168,81,.3)); } .bd-nearby-panel:hover::before { opacity: 1; } .bd-nearby-head { display: flex; align-items: center; gap: .85rem; margin-bottom: 1.4rem; } .bd-nearby-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; background: var(--bd-gold); color: #fff; } .bd-nearby-title { font-family: var(--font-heading, 'Mohave', sans-serif); font-size: 1.05rem; letter-spacing: .04em; color: var(--bd-heading); text-transform: uppercase; margin: 0; } .bd-nearby-list { list-style: none; margin: 0; padding: 0; } .bd-nearby-item { display: flex; align-items: center; gap: .7rem; padding: .7rem 0; border-bottom: 1px solid var(--bd-line); color: var(--bd-text); font-size: .98rem; } .bd-nearby-item:last-child { border-bottom: none; } .bd-nearby-item::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--bd-gold); flex-shrink: 0; } /* ── Contact ── */ .bd-contact { background: var(--bd-alt); border-top: 1px solid var(--bd-line); } .bd-contact-line { color: var(--bd-muted); margin-bottom: .6rem; } .bd-contact-line a { color: var(--bd-gold); text-decoration: none; } .bd-contact-line a:hover { color: var(--bd-gold-lt); } @media (max-width: 720px) { .bd-locations { grid-template-columns: 1fr; } .bd-location-grid { grid-template-columns: 1fr; } .bd-nearby-grid { grid-template-columns: 1fr; } .bd-hero { padding: 5.5rem 0 4.5rem; } }