/* ────────────────────────────────────────────────────────────────────────── Dark homepage theme — scoped to so the rest of the (light) CMS is unaffected. Mirrors the live bluedragonmassage.com homepage. ────────────────────────────────────────────────────────────────────────── */ .home-dark { --bd-bg: #0a0a0c; --bd-alt: #121217; --bd-card: #17171c; --bd-line: #26262d; --bd-text: #e9e9ec; --bd-muted: #a2a2ac; --bd-gold: #c9a24b; --bd-gold-lt: #e8cd86; background: var(--bd-bg); color: var(--bd-text); } .home-dark main { background: var(--bd-bg); } /* ── Shared header / footer go dark on the homepage ── */ .home-dark .site-header { background: rgba(10, 10, 12, .92); border-bottom: 1px solid var(--bd-line); } .home-dark .site-logo { color: var(--bd-gold-lt); } .home-dark .site-nav a { color: var(--bd-text); } .home-dark .site-nav a:hover { color: var(--bd-gold); } .home-dark .header-contact a { color: var(--bd-gold); } .home-dark .mobile-menu-toggle { color: var(--bd-text); } .home-dark .site-nav { background: var(--bd-bg); } .home-dark .site-footer { background: #060608; color: var(--bd-text); border-top: 1px solid var(--bd-line); } .home-dark .site-footer h3 { color: var(--bd-gold-lt); } .home-dark .site-footer a { color: var(--bd-muted); } .home-dark .site-footer a:hover { color: var(--bd-gold); } /* ── Hero ── */ .bd-hero { background-color: #0a0a0c; background-size: cover; background-position: center; text-align: center; padding: 7rem 0 6rem; border-bottom: 1px solid var(--bd-line); } .bd-eyebrow { text-transform: uppercase; letter-spacing: .28em; font-size: .78rem; color: var(--bd-gold); margin-bottom: 1.1rem; } .bd-hero-title { font-family: var(--font-heading, 'Playfair Display', serif); font-size: clamp(2.6rem, 7vw, 4.6rem); line-height: 1.05; color: #fff; margin: 0 0 .6rem; } .bd-hero-sub { font-family: var(--font-heading, 'Playfair Display', serif); font-style: italic; font-size: clamp(1.2rem, 3vw, 1.7rem); color: var(--bd-gold-lt); margin-bottom: 1.6rem; } .bd-hero-intro { max-width: 680px; margin: 0 auto 2.2rem; 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: .9rem 1.9rem; border-radius: 999px; font-weight: 600; letter-spacing: .02em; text-decoration: none; transition: all .25s ease; } .bd-btn-gold { background: var(--bd-gold); color: #15110a; } .bd-btn-gold:hover { background: var(--bd-gold-lt); transform: translateY(-2px); } .bd-btn-ghost { border: 1px solid var(--bd-gold); color: var(--bd-gold-lt); } .bd-btn-ghost:hover { background: rgba(201,162,75,.12); transform: translateY(-2px); } /* ── Sections ── */ .bd-section { padding: 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, 'Playfair Display', serif); font-size: clamp(1.8rem, 4vw, 2.6rem); text-align: center; color: #fff; margin-bottom: 2.6rem; } .bd-muted { color: var(--bd-muted); } /* ── Masseuse grid ── */ .bd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1.4rem; } .bd-card { display: block; text-decoration: none; background: var(--bd-card); border: 1px solid var(--bd-line); border-radius: 12px; overflow: hidden; transition: transform .25s ease, border-color .25s ease; } .bd-card:hover { transform: translateY(-4px); border-color: var(--bd-gold); } .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: .6rem; right: .6rem; z-index: 2; background: rgba(10,10,12,.82); color: var(--bd-gold-lt); font-size: .78rem; font-weight: 600; padding: .25rem .55rem; border-radius: 999px; } .bd-badge .star { color: var(--bd-gold); } .bd-card-name { display: block; text-align: center; padding: .85rem .5rem; color: var(--bd-text); font-family: var(--font-heading, 'Playfair Display', serif); font-size: 1.15rem; } .bd-card:hover .bd-card-name { color: var(--bd-gold-lt); } /* ── SEO prose ── */ .bd-prose { max-width: 880px; } .bd-prose-h1 { font-family: var(--font-heading, 'Playfair Display', serif); font-size: clamp(1.9rem, 4vw, 2.8rem); color: #fff; text-align: center; margin-bottom: .4rem; } .bd-prose-sub { text-align: center; color: var(--bd-gold-lt); margin-bottom: 2rem; font-style: italic; } .bd-prose h2 { color: var(--bd-gold-lt); font-family: var(--font-heading, 'Playfair Display', serif); 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.8; } .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); border-radius: 12px; padding: 2rem; margin: 0; } .bd-stars { color: var(--bd-gold); letter-spacing: .15em; margin-bottom: 1rem; } .bd-quote blockquote { margin: 0; color: var(--bd-text); font-style: italic; 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: 3rem; align-items: center; } .bd-location-list { list-style: none; padding: 0; margin: 1.4rem 0 0; columns: 2; } .bd-location-list li { margin-bottom: .7rem; } .bd-location-list a { color: var(--bd-gold-lt); text-decoration: none; } .bd-location-list a:hover { color: var(--bd-gold); text-decoration: underline; } .bd-locations-img img { width: 100%; border-radius: 12px; border: 1px solid var(--bd-line); } /* When no locations image is set, the list spans the full width instead of leaving an empty column */ .bd-locations-single { grid-template-columns: 1fr; } /* ── 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-lt); text-decoration: none; } .bd-contact-line a:hover { color: var(--bd-gold); } @media (max-width: 720px) { .bd-locations { grid-template-columns: 1fr; } .bd-location-list { columns: 1; } .bd-hero { padding: 5rem 0 4rem; } }