/* ============================================================ B.E.S.A. Bookings — Template variant CSS Keyed off set by templates.js Each template re-styles: typography, shapes, hero, cards, nav. ============================================================ */ /* ---------- base: template typography + shape vars ---------- */ :root{ --tpl-display:'Playfair Display',serif; --tpl-body:'Inter',sans-serif; --tpl-radius:18px; --tpl-shadow:0 6px 24px rgba(0,0,0,.08); } html[data-tpl] body{font-family:var(--tpl-body)} html[data-tpl] .headline, html[data-tpl] .tag, html[data-tpl] h1, html[data-tpl] h2, html[data-tpl] h3, html[data-tpl] .logo, html[data-tpl] .section-head h3{font-family:var(--tpl-display)} html[data-tpl] .search, html[data-tpl] .cat .ic, html[data-tpl] .hero, html[data-tpl] .svc-card, html[data-tpl] .spec, html[data-tpl] .bk-card{box-shadow:var(--tpl-shadow)} /* landing-page equivalents */ html[data-tpl] .card, html[data-tpl] .hero-img img{box-shadow:var(--tpl-shadow)} html[data-tpl] .hero-img img{border-radius:var(--tpl-radius)} /* ============================================================ 1. GLOW (default) — nothing extra needed ============================================================ */ /* ============================================================ 2. MINIMAL LUXE — editorial: white bg, thin rules, sharp ============================================================ */ html[data-tpl="luxe"]{ --cream:#FFFFFF; --ink:#111111; --charcoal:#444; --stone:#6E6E6E; } html[data-tpl="luxe"] body{letter-spacing:.01em} html[data-tpl="luxe"] .statusbar{background:#fff;border-bottom:1px solid #eee} html[data-tpl="luxe"] .hero{border-radius:0;min-height:150px;background:transparent;box-shadow:none} html[data-tpl="luxe"] .hero .shade{background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.45) 100%)} html[data-tpl="luxe"] .hero .tag{font-size:26px;font-weight:600} html[data-tpl="luxe"] .search{border-radius:0;border:1px solid #e5e5e5;box-shadow:none;background:#fff} html[data-tpl="luxe"] .cat .ic{border-radius:0;box-shadow:none;border:1px solid #eee} html[data-tpl="luxe"] .svc-card, html[data-tpl="luxe"] .spec{border-radius:0;border:1px solid #eee;box-shadow:none} html[data-tpl="luxe"] .card{border-radius:0;border:1px solid #eee;box-shadow:none} html[data-tpl="luxe"] .hero-img img{border-radius:0;box-shadow:none;border:1px solid #eee} html[data-tpl="luxe"] .section-head h3{letter-spacing:.02em} html[data-tpl="luxe"] #nav{background:#fff;border-top:1px solid #eee} html[data-tpl="luxe"] .cta-band{border-radius:0} /* ============================================================ 3. DARK GLAM — dark everything, gold glow accents ============================================================ */ html[data-tpl="dark"]{ --cream:#0E0E12; --ink:#F5F0EA; --charcoal:#B8B0A6; --stone:#7A7368; --white:#1A1A20; --rose-blush:#2A2226; } html[data-tpl="dark"] .statusbar{background:#0E0E12;border-bottom:1px solid #26262E} html[data-tpl="dark"] .search{background:#1A1A20;box-shadow:0 4px 20px rgba(0,0,0,.4)} html[data-tpl="dark"] .cat .ic{background:#1A1A20;box-shadow:0 4px 16px rgba(0,0,0,.4)} html[data-tpl="dark"] .svc-card, html[data-tpl="dark"] .spec{background:#1A1A20;box-shadow:0 8px 30px rgba(0,0,0,.35)} html[data-tpl="dark"] .card{background:#1A1A20;box-shadow:0 8px 30px rgba(0,0,0,.35)} html[data-tpl="dark"] .card .meta, html[data-tpl="dark"] .spec .role{color:#8a8378} html[data-tpl="dark"] #nav{background:#141419;border-top:1px solid #26262E} html[data-tpl="dark"] .bell{background:#1A1A20} html[data-tpl="dark"] .cta-band{background:linear-gradient(120deg,#3d3d3d,#1a1a1a 60%,#0e0e12)} html[data-tpl="dark"] .btn{background:var(--rose-deep);color:#fff} /* ============================================================ 4. BOHO NATURAL — warm cream, organic blobs, soft ============================================================ */ html[data-tpl="boho"]{ --cream:#FAF5EE; --ink:#3E2E23; --charcoal:#6A5647; --stone:#8A7361; --white:#FFFDF9; --rose-blush:#F3E7D8; } html[data-tpl="boho"] body{font-weight:500} html[data-tpl="boho"] .statusbar{background:#FAF5EE} html[data-tpl="boho"] .hero{border-radius:40px 40px 40px 8px} html[data-tpl="boho"] .search{border-radius:999px;box-shadow:0 4px 16px rgba(139,106,66,.10)} html[data-tpl="boho"] .cat .ic{border-radius:36% 64% 55% 45% / 55% 45% 55% 45%} html[data-tpl="boho"] .svc-card{border-radius:24px} html[data-tpl="boho"] .spec{border-radius:999px 24px 24px 999px} html[data-tpl="boho"] .cta-band{border-radius:40px 40px 40px 8px} html[data-tpl="boho"] .btn{border-radius:999px} /* ============================================================ 5. MODERN GRID — sharp tiles, bold type, no shadows ============================================================ */ html[data-tpl="grid"]{ --cream:#F6F6F4; --ink:#0F0F0F; --charcoal:#3E3E3E; --stone:#757575; --white:#fff; --rose-blush:#EFEFED; } html[data-tpl="grid"] .statusbar{background:#F6F6F4;border-bottom:2px solid #111} html[data-tpl="grid"] .headline{font-weight:700;letter-spacing:-.02em} html[data-tpl="grid"] .hero{border-radius:0;min-height:220px} html[data-tpl="grid"] .tag{font-weight:700;letter-spacing:-.01em} html[data-tpl="grid"] .search{border-radius:0;box-shadow:none;border-bottom:2px solid #111} html[data-tpl="grid"] .cat .ic{border-radius:0;box-shadow:none;border:1px solid #ddd} html[data-tpl="grid"] .svc-card{border-radius:0;box-shadow:none;border:1px solid #ddd} html[data-tpl="grid"] .spec{border-radius:0;box-shadow:none;border:1px solid #ddd} html[data-tpl="grid"] #nav{border-top:2px solid #111} html[data-tpl="grid"] .cta-band{border-radius:0} html[data-tpl="grid"] .btn{border-radius:0}