/* ============================================================ Kim's Beauty — shared stylesheet Theming is token-driven: [data-branch] on sets the palette + type. Layout/components below stay identical across hub, VIP and Garden so the two branches feel related but not identical (each keeps its own accent + display face). ============================================================ */ :root{ /* Hub (neutral, shown before a branch is chosen) */ --bg: #14120F; --bg-soft: #EFE8DB; --surface: #FFFFFF; --ink: #1B1815; --ink-soft: #5C5650; --accent: #B08D4F; --accent-ink: #14120F; --line: #E2D9C7; --display-font: 'Manrope', sans-serif; --body-font: 'Manrope', sans-serif; --radius: 3px; --max: 1180px; } html[data-branch="vip"]{ --bg: #0B0B0C; --bg-soft: #F6F1E4; --surface: #FFFFFF; --ink: #17140E; --ink-soft: #61584A; --accent: #CD9D53; --accent-ink: #0B0B0C; --line: #E4D9BC; --display-font: 'Cormorant Garamond', serif; --body-font: 'Manrope', sans-serif; } html[data-branch="garden"]{ --bg: #2E1533; --bg-soft: #FBEFF5; --surface: #FFFFFF; --ink: #2A1A28; --ink-soft: #745A6E; --accent: #BC10C6; --accent-ink: #FFFFFF; --line: #F0D3E4; --display-font: 'Fraunces', serif; --body-font: 'Nunito Sans', sans-serif; } *{ margin:0; padding:0; box-sizing:border-box; } :root{ box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px); } html{ scroll-padding-top:72px; -webkit-text-size-adjust:100%; } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } ul{ list-style:none; } button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; } input, textarea{ font-family:inherit; font-size:1rem; } body{ font-family:var(--body-font); color:var(--ink); background:var(--surface); line-height:1.55; -webkit-font-smoothing:antialiased; } h1,h2,h3,h4{ font-family:var(--display-font); font-weight:600; line-height:1.15; color:var(--ink); } h1{ font-size:clamp(2.1rem, 6vw, 3.4rem); font-weight:500; } h2{ font-size:clamp(1.5rem, 4vw, 2.2rem); } h3{ font-size:1.2rem; } p{ max-width:38em; } .container{ max-width:var(--max); margin:0 auto; padding:0 20px; } :focus-visible{ outline:2px solid var(--accent); outline-offset:2px; } /* ---------- Header ---------- */ .site-header{ position:sticky; top:0; z-index:40; background:var(--surface); border-bottom:1px solid var(--line); padding-top:env(safe-area-inset-top,0px); } .header-row{ max-width:var(--max); margin:0 auto; padding:14px 20px; display:flex; align-items:center; justify-content:space-between; gap:12px; } .brand{ display:flex; align-items:center; gap:10px; font-family:var(--display-font); font-size:1.15rem; font-weight:600; } .brand img{ height:38px; width:38px; border-radius:50%; object-fit:cover; } .branch-pill{ display:flex; align-items:center; gap:6px; border:1px solid var(--line); border-radius:999px; padding:6px 12px; font-size:.82rem; color:var(--ink-soft); background:var(--bg-soft); } .branch-pill svg{ width:12px; height:12px; transition:transform .18s; } .branch-pill[aria-expanded="true"] svg{ transform:rotate(180deg); } .branch-switch{ position:absolute; right:20px; top:100%; margin-top:6px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 12px 28px rgba(0,0,0,.14); min-width:220px; overflow:hidden; z-index:50; } .branch-switch a{ display:flex; align-items:center; gap:10px; padding:12px 14px; font-size:.92rem; } .branch-switch a:hover, .branch-switch a:focus-visible{ background:var(--bg-soft); } .branch-switch img{ height:26px; width:26px; border-radius:50%; object-fit:cover; } .branch-switch[hidden]{ display:none; } .nav-links{ display:flex; gap:26px; font-size:.95rem; } .nav-links a{ padding:4px 0; border-bottom:2px solid transparent; } .nav-links a[aria-current="page"], .nav-links a:hover{ border-color:var(--accent); } .nav-toggle{ display:none; width:40px; height:40px; align-items:center; justify-content:center; position:relative; z-index:52; } .nav-toggle span, .nav-toggle::before, .nav-toggle::after{ content:''; display:block; width:22px; height:2px; background:var(--ink); transition:transform .2s, opacity .2s; position:absolute; } .nav-toggle::before{ transform:translateY(-7px); } .nav-toggle span{ margin:0; } .nav-toggle::after{ transform:translateY(7px); } .nav-toggle[aria-expanded="true"]::before{ transform:translateY(0) rotate(45deg); } .nav-toggle[aria-expanded="true"] span{ opacity:0; } .nav-toggle[aria-expanded="true"]::after{ transform:translateY(0) rotate(-45deg); } .nav-backdrop{ display:none; position:fixed; inset:0; z-index:39; background:rgba(0,0,0,.4); opacity:0; transition:opacity .2s; } .nav-backdrop.open{ display:block; opacity:1; } @media (max-width:860px){ .nav-links{ position:fixed; inset:0 0 0 auto; width:78%; max-width:320px; z-index:40; background:var(--surface); flex-direction:column; gap:0; padding:90px 24px 24px; transform:translateX(100%); transition:transform .25s ease; box-shadow:-12px 0 30px rgba(0,0,0,.18); } .nav-links.open{ transform:translateX(0); } .nav-links a{ padding:14px 0; border-bottom:1px solid var(--line); width:100%; } .nav-toggle{ display:flex; flex-direction:column; } } /* ---------- Buttons ---------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:13px 22px; border-radius:var(--radius); font-weight:600; font-size:.95rem; transition:transform .15s, opacity .15s; } .btn-primary{ background:var(--accent); color:var(--accent-ink); } .btn-primary:hover{ opacity:.9; } .btn-outline{ border:1.5px solid var(--ink); color:var(--ink); } .btn-ghost{ border:1.5px solid var(--line); color:var(--ink-soft); } .btn-block{ width:100%; } .btn:active{ transform:scale(.98); } /* ---------- Hero ---------- */ .hero{ background:var(--bg); color:#fff; padding:76px 0 64px; } html[data-branch="garden"] .hero{ color:#fff; } .hero .container{ max-width:820px; } .hero p.lede{ color:rgba(255,255,255,.78); font-size:1.08rem; margin-top:14px; } .hero h1, .hero h2{ color:#fff; } .hero-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:26px; } /* ---------- Guided selector ---------- */ .guided{ background:var(--bg-soft); padding:34px 0; } .guided-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-top:16px; } @media (max-width:760px){ .guided-grid{ grid-template-columns:repeat(2,1fr); } } .guided-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px 10px; text-align:center; font-weight:600; font-size:.92rem; } .guided-card:hover, .guided-card:focus-visible{ border-color:var(--accent); } .guided-card .emoji{ font-size:1.6rem; display:block; margin-bottom:6px; } /* ---------- Section rhythm ---------- */ .section{ padding:56px 0; } .section-head{ max-width:600px; margin-bottom:28px; } .section-head p{ color:var(--ink-soft); margin-top:8px; } .section-alt{ background:var(--bg-soft); } /* ---------- Category accordion (Book page) ---------- */ .category{ border:1px solid var(--line); border-radius:var(--radius); margin-bottom:12px; overflow:hidden; } .category-head{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 18px; background:var(--surface); text-align:left; } .category-head:hover{ background:var(--bg-soft); } .category-name{ display:flex; align-items:center; gap:10px; font-weight:600; font-family:var(--display-font); font-size:1.05rem; } .category-count{ font-size:.8rem; color:var(--ink-soft); background:var(--bg-soft); padding:3px 9px; border-radius:999px; } .category-selected-badge{ font-size:.78rem; font-weight:700; color:var(--accent-ink); background:var(--accent); padding:3px 9px; border-radius:999px; display:none; } .category-selected-badge.show{ display:inline-block; } .category-chev{ width:14px; height:14px; transition:transform .2s; flex-shrink:0; } .category[data-open="true"] .category-chev{ transform:rotate(180deg); } .category-body{ display:none; padding:6px 18px 18px; border-top:1px solid var(--line); } .category[data-open="true"] .category-body{ display:block; } .group-label{ font-size:.85rem; text-transform:none; color:var(--ink-soft); margin:16px 0 8px; font-weight:600; } .group-label:first-child{ margin-top:14px; } .service-row{ display:flex; align-items:flex-start; gap:12px; padding:10px 4px; border-bottom:1px solid var(--line); } .service-row:last-child{ border-bottom:none; } .service-row input[type="checkbox"]{ width:20px; height:20px; margin-top:2px; accent-color:var(--accent); flex-shrink:0; } .service-row label{ font-size:.96rem; } .category-actions{ display:flex; gap:10px; flex-wrap:wrap; margin:14px 0 6px; } .category-actions .btn{ padding:9px 16px; font-size:.85rem; } .menu-search{ margin-bottom:18px; } .menu-search input{ width:100%; padding:13px 16px; border:1.5px solid var(--line); border-radius:var(--radius); font-size:.98rem; } .menu-search input:focus{ border-color:var(--accent); outline:none; } /* ---------- Selection bar ---------- */ #selection-bar{ position:fixed; left:0; right:0; bottom:0; z-index:45; background:var(--surface); border-top:1px solid var(--line); box-shadow:0 -8px 24px rgba(0,0,0,.12); padding:14px 16px calc(14px + env(safe-area-inset-bottom,0px)); transform:translateY(100%); transition:transform .25s ease; max-height:70vh; display:flex; flex-direction:column; } #selection-bar.open{ transform:translateY(0); } .selection-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; } .selection-head strong{ font-family:var(--display-font); font-size:1.05rem; } .selection-list{ overflow-y:auto; margin-bottom:12px; } .selection-item{ display:flex; align-items:center; justify-content:space-between; padding:7px 0; font-size:.92rem; border-bottom:1px solid var(--line); } .selection-item button{ color:var(--ink-soft); font-size:1.1rem; line-height:1; padding:2px 6px; } .selection-collapse{ background:transparent; } @media (min-width:900px){ #selection-bar{ left:auto; right:24px; bottom:24px; width:320px; border-radius:var(--radius); border:1px solid var(--line); transform:translateY(120%); } #selection-bar.open{ transform:translateY(0); } } .selection-fab{ position:fixed; left:0; right:0; bottom:0; z-index:44; background:var(--accent); color:var(--accent-ink); padding:14px 20px calc(14px + env(safe-area-inset-bottom,0px)); font-weight:700; font-size:.95rem; box-shadow:0 -6px 20px rgba(0,0,0,.2); display:none; align-items:center; justify-content:space-between; gap:12px; } .selection-fab.show{ display:flex; } .selection-fab .fab-arrow{ font-size:1.1rem; } /* ---------- Booking confirm panel ---------- */ #confirm-panel{ position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:60; display:none; align-items:flex-end; justify-content:center; } #confirm-panel.open{ display:flex; } .confirm-sheet{ background:var(--surface); width:100%; max-width:480px; border-radius:16px 16px 0 0; padding:26px 22px calc(26px + env(safe-area-inset-bottom,0px)); max-height:82vh; overflow-y:auto; } @media (min-width:640px){ .confirm-sheet{ border-radius:var(--radius); margin-bottom:6vh; } } .confirm-sheet h3{ margin-bottom:4px; } .confirm-list{ margin:14px 0; padding:14px; background:var(--bg-soft); border-radius:var(--radius); font-size:.92rem; } .confirm-list li{ padding:3px 0; } .confirm-note{ font-size:.85rem; color:var(--ink-soft); margin-bottom:16px; } /* ---------- Calendar ---------- */ .cal{ border:1px solid var(--line); border-radius:var(--radius); padding:14px; margin:14px 0; } .cal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; font-weight:600; } .cal-head button{ padding:4px 10px; font-size:1rem; } .cal-head button:disabled{ opacity:.25; cursor:not-allowed; } .cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; text-align:center; font-size:.82rem; } .cal-grid .dow{ color:var(--ink-soft); font-weight:600; padding:4px 0; } .cal-day{ padding:8px 0; border-radius:6px; } .cal-day[data-state="past"]{ color:var(--line); } .cal-day[data-state="open"]{ cursor:pointer; } .cal-day[data-state="open"]:hover{ background:var(--bg-soft); } .cal-day[data-state="selected"]{ background:var(--accent); color:var(--accent-ink); font-weight:700; } /* ---------- Time picker ---------- */ .time-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; } @media (max-width:420px){ .time-grid{ grid-template-columns:repeat(3,1fr); } } .time-chip{ border:1px solid var(--line); border-radius:var(--radius); padding:9px 4px; text-align:center; font-size:.85rem; } .time-chip[data-state="open"]{ cursor:pointer; } .time-chip[data-state="open"]:hover{ background:var(--bg-soft); } .time-chip[data-state="past"]{ color:var(--line); text-decoration:line-through; cursor:not-allowed; } .time-chip[data-state="selected"]{ background:var(--accent); color:var(--accent-ink); font-weight:700; border-color:var(--accent); } /* ---------- Sticky WhatsApp ---------- */ #wa-float{ position:fixed; right:16px; bottom:16px; z-index:46; width:56px; height:56px; border-radius:50%; background:#25D366; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 20px rgba(0,0,0,.3); } #wa-float svg{ width:28px; height:28px; fill:#fff; } #wa-bubble{ position:fixed; right:80px; bottom:24px; z-index:46; max-width:220px; background:#fff; color:#1B1815; border-radius:10px; padding:10px 13px; font-size:.85rem; box-shadow:0 8px 20px rgba(0,0,0,.18); transition:opacity .3s, transform .3s; } #wa-bubble[hidden]{ display:none; } #selection-bar.open ~ #wa-float{ display:none; } @media (min-width:900px){ #wa-float, #wa-bubble{ right:28px; } } .selection-fab.show ~ #wa-float{ bottom:88px; } body.has-sticky-bar{ padding-bottom:70px; } /* ---------- Gallery ---------- */ .gal-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; } @media (max-width:700px){ .gal-grid{ grid-template-columns:repeat(2,1fr); } } .gal-grid figure{ aspect-ratio:1; border-radius:var(--radius); overflow:hidden; background:var(--bg-soft); } .gal-grid img.real{ width:100%; height:100%; object-fit:cover; } .gal-placeholder{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:var(--ink-soft); font-size:.78rem; text-align:center; padding:10px; } /* ---------- FAQ ---------- */ .faq-item{ border-bottom:1px solid var(--line); } .faq-q{ width:100%; display:flex; justify-content:space-between; align-items:center; padding:18px 4px; text-align:left; font-weight:600; } .faq-a{ display:none; padding:0 4px 18px; color:var(--ink-soft); max-width:60em; } .faq-item[data-open="true"] .faq-a{ display:block; } .faq-item[data-open="true"] .faq-chev{ transform:rotate(180deg); } .faq-chev{ transition:transform .2s; } /* ---------- Cards (locations, reviews) ---------- */ .card{ border:1px solid var(--line); border-radius:var(--radius); padding:22px; background:var(--surface); } .branch-cards{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:8px; } @media (max-width:760px){ .branch-cards{ grid-template-columns:1fr; } } .branch-card{ border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--surface); } .branch-card .photo{ aspect-ratio:16/10; background:var(--bg-soft); display:flex; align-items:center; justify-content:center; } .branch-card .photo img.real{ width:100%; height:100%; object-fit:cover; } .branch-card .body{ padding:20px; } .branch-card .body p{ color:var(--ink-soft); font-size:.92rem; margin:6px 0 14px; } .info-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:20px; } @media (max-width:760px){ .info-grid{ grid-template-columns:1fr; } } .info-block dt{ font-size:.8rem; color:var(--ink-soft); margin-top:14px; } .info-block dd{ font-size:1rem; } .map-embed{ margin:20px 0; border-radius:var(--radius); overflow:hidden; } .map-embed iframe{ width:100%; height:340px; border:0; display:block; } /* ---------- Footer ---------- */ .site-footer{ background:var(--bg); color:rgba(255,255,255,.86); padding:48px 0 30px; } .footer-grid{ display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:32px; } @media (max-width:760px){ .footer-grid{ grid-template-columns:1fr; gap:26px; } } .site-footer h4{ color:#fff; font-size:.95rem; margin-bottom:12px; } .site-footer a, .site-footer address{ color:rgba(255,255,255,.72); font-size:.9rem; font-style:normal; display:block; margin-bottom:8px; } .site-footer a:hover{ color:#fff; } .foot-social{ display:flex; gap:12px; margin-top:6px; } .foot-social a{ width:36px; height:36px; border:1px solid rgba(255,255,255,.25); border-radius:50%; display:flex; align-items:center; justify-content:center; } .foot-social svg{ width:16px; height:16px; fill:currentColor; } .foot-bottom{ margin-top:34px; padding-top:20px; border-top:1px solid rgba(255,255,255,.15); font-size:.8rem; color:rgba(255,255,255,.55); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; } /* ---------- Photo slots (shows the brand mark quietly until a real photo is dropped in) ---------- */ .photo-slot{ position:relative; overflow:hidden; background:var(--bg-soft); } .photo-slot img.real{ width:100%; height:100%; object-fit:cover; } .photo-slot .fallback{ position:absolute; inset:0; display:none; align-items:center; justify-content:center; } .photo-slot.missing img.real{ display:none; } .photo-slot.missing .fallback{ display:flex; } .photo-slot .fallback img{ width:34%; max-width:90px; height:auto; object-fit:contain; opacity:.5; } /* ---------- Utility ---------- */ .visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); } .center{ text-align:center; } .mt-lg{ margin-top:32px; } [hidden]{ display:none !important; } @media (prefers-reduced-motion: reduce){ *{ transition:none !important; animation:none !important; } }