/* ────────────────────────────────────────────────────────────────────────── Homepage theme — scoped to . NOTE: the "home-dark" class name is kept unchanged so home.njk needs no edit, but the palette is now the LIGHT "candlelit jade" theme (warm rice-paper + deep emerald). Internal --bd-gold* variable names are retained for the same reason; they now hold jade values. ────────────────────────────────────────────────────────────────────────── */ .home-dark { --bd-bg: #f6f3ec; /* warm rice-paper */ --bd-alt: #ffffff; /* alt sections / cards */ --bd-card: #ffffff; --bd-line: #e4ddce; --bd-text: #33302a; /* warm ink */ --bd-heading: #201d18; --bd-muted: #7c766a; --bd-gold: #1f6f57; /* jade (primary accent) */ --bd-gold-lt: #164a3b; /* darker jade for hover/emphasis */ --bd-ochre: #b08947; /* quiet warm secondary — stars only */ background: var(--bd-bg); color: var(--bd-text); } .home-dark main { background: var(--bd-bg); } /* ── Shared header / footer on the homepage ── */ .home-dark .site-header { background: rgba(246, 243, 236, 0.86); 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); } .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: #201d18; color: #d8d2c6; border-top: 1px solid var(--bd-line); } .home-dark .site-footer h3 { color: #fff; } .home-dark .site-footer a { color: #9a9384; } .home-dark .site-footer a:hover { color: var(--bd-gold); } /* ── 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-gold); margin-bottom: 1.4rem; } .bd-hero-title { font-family: var(--font-heading, 'Shippori Mincho', serif); font-weight: 600; font-size: clamp(2.8rem, 7vw, 5rem); line-height: 1.05; color: var(--bd-heading); margin: 0 0 .8rem; } .bd-hero-sub { font-family: var(--font-heading, 'Shippori Mincho', serif); font-style: italic; font-weight: 400; font-size: clamp(1.2rem, 3vw, 1.7rem); color: var(--bd-gold); 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(31,111,87,.6); } .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, 'Shippori Mincho', serif); font-weight: 500; font-size: clamp(2rem, 4vw, 3rem); 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: var(--bd-card); border: 1px solid var(--bd-line); border-radius: 16px; overflow: hidden; transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease; } .bd-card:hover { transform: translateY(-6px); border-color: var(--bd-gold); box-shadow: 0 22px 44px -22px rgba(31,111,87,.4); } .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; color: var(--bd-heading); font-family: var(--font-heading, 'Shippori Mincho', serif); font-size: 1.2rem; } .bd-card:hover .bd-card-name { color: var(--bd-gold); } /* ── SEO prose ── */ .bd-prose { max-width: 820px; } .bd-prose-h1 { font-family: var(--font-heading, 'Shippori Mincho', serif); font-weight: 500; font-size: clamp(1.9rem, 4vw, 2.8rem); color: var(--bd-heading); text-align: center; margin-bottom: .4rem; } .bd-prose-sub { text-align: center; color: var(--bd-gold); margin-bottom: 2rem; font-style: italic; } .bd-prose h2 { color: var(--bd-heading); font-family: var(--font-heading, 'Shippori Mincho', serif); font-weight: 500; 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); border-radius: 16px; 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); 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: 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: 14px; 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(31,111,87,.35)); } .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, 'Shippori Mincho', 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: 18px; border: 1px solid var(--bd-line); } .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); 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-hero { padding: 5.5rem 0 4.5rem; } }