/* ══════════════════════════════════════════════════════════════════ BEYOND GROOMING — shared design system Mobile-first. Stripes alternate white / black / burgundy. Accent is always burgundy. Buttons are only ever: black on white · white on black · white on burgundy ══════════════════════════════════════════════════════════════════ */ :root { /* Surfaces */ --w: #ffffff; --off: #f4f2f0; --off2: #e9e6e3; --ink: #0d0d0d; /* black stripe */ --ink-el: #191919; /* raised surface on black */ --ink2: #2b2b2b; --ink3: #565656; --mute: #8c8c8c; /* Burgundy — the accent, everywhere */ --burg: #7B2D3A; /* on white: 9.2:1 — text, buttons, rules */ --burg2: #9B3D4C; /* hover / burgundy stripe */ --burg-dp: #5E1F2A; /* burgundy stripe, deep */ --rose: #E58899; /* on black: 7.0:1 — accent text on dark stripes */ --burg-bg: rgba(123,45,58,.07); --burg-bdr: rgba(123,45,58,.24); --bdr: rgba(0,0,0,.10); --bdrm: rgba(0,0,0,.18); --bdr-d: rgba(255,255,255,.13); /* border on dark */ --bdr-dm: rgba(255,255,255,.26); --ease: cubic-bezier(.4,0,.2,1); --ffd: 'Bebas Neue', Impact, sans-serif; --ffb: 'Inter', system-ui, -apple-system, sans-serif; --nav-h: 60px; --pad: 20px; /* mobile gutter */ } @media (min-width:768px) { :root { --nav-h:68px; --pad:32px } } *,*::before,*::after { box-sizing:border-box; margin:0; padding:0 } /* Horizontal overflow is clipped on ONLY. Do NOT add overflow-x to : per spec a non-visible value on one axis forces the other axis to `auto`, which turns into its own scroll container. Body then sits at full content height with nothing to scroll, and the wheel dies there instead of reaching the real scroller. */ html { scroll-behavior:smooth; overflow-x:hidden; -webkit-text-size-adjust:100% } body { background:var(--w); color:var(--ink); font-family:var(--ffb); font-weight:400; line-height:1.65; -webkit-font-smoothing:antialiased; } body.no-scroll { overflow:hidden } /* Keep scroll chaining contained to the overlays, not the page. */ #drawer, #lbox, #wifiOverlay { overscroll-behavior:contain } img { display:block; max-width:100% } a { color:inherit; text-decoration:none } button { border:0; background:none; font:inherit; cursor:pointer; color:inherit } ul { list-style:none } ::selection { background:var(--burg); color:#fff } :focus-visible { outline:3px solid var(--burg2); outline-offset:2px } .icon { font-family:'Material Symbols Rounded'; font-variation-settings:'FILL' 0,'wght' 300,'GRAD' 0,'opsz' 40; font-style:normal; line-height:1; letter-spacing:normal; text-transform:none; white-space:nowrap; display:inline-block; -webkit-font-smoothing:antialiased; } .icon-f { font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 40 } .container { width:100%; max-width:1180px; margin:0 auto; padding:0 var(--pad) } .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } /* ── STRIPES ─────────────────────────────────────────────────────── */ .sec { padding:64px 0 } @media (min-width:768px) { .sec { padding:96px 0 } } .sec--w { background:var(--w); color:var(--ink) } .sec--off { background:var(--off); color:var(--ink) } .sec--k { background:var(--ink); color:#fff } .sec--burg { background:linear-gradient(160deg,var(--burg) 0%,var(--burg-dp) 100%); color:#fff } .sec--tight { padding:44px 0 } /* ── TYPE ────────────────────────────────────────────────────────── */ .label { display:block; font-size:.66rem; font-weight:700; letter-spacing:.26em; text-transform:uppercase; color:var(--burg); margin-bottom:10px; } .sec--k .label, .sec--burg .label { color:var(--rose) } .sec--burg .label { color:rgba(255,255,255,.75) } h1,h2,h3 { font-family:var(--ffd); font-weight:400; letter-spacing:.03em; line-height:.95 } .h-xl { font-size:clamp(2.9rem,12vw,5.5rem) } .h-lg { font-size:clamp(2.4rem,9vw,4.2rem) } .h-md { font-size:clamp(1.7rem,6vw,2.6rem) } .lede { font-size:1rem; line-height:1.75; color:var(--ink3); max-width:60ch } .sec--k .lede { color:rgba(255,255,255,.62) } .sec--burg .lede { color:rgba(255,255,255,.8) } @media (min-width:768px) { .lede { font-size:1.05rem } } .rule { width:52px; height:3px; background:var(--burg); margin:16px 0 } .sec--k .rule { background:var(--rose) } .sec--burg .rule { background:#fff } /* ── BUTTONS — only 3 forms, all AA ─────────────────────────────── */ .btn { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:50px; padding:14px 26px; font-size:.76rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; border:2px solid transparent; cursor:pointer; text-align:center; transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); -webkit-tap-highlight-color:transparent; } .btn .icon { font-size:1.05rem } .btn--burg { background:var(--burg); color:#fff; border-color:var(--burg) } /* 9.2:1 */ .btn--dark { background:var(--ink); color:#fff; border-color:var(--ink) } .btn--light { background:#fff; color:var(--ink); border-color:#fff } .btn--ghost-d { background:transparent; color:#fff; border-color:rgba(255,255,255,.55) } .btn--ghost-l { background:transparent; color:var(--ink); border-color:var(--ink) } html.mouse .btn--burg:hover { background:var(--burg2); border-color:var(--burg2) } html.mouse .btn--dark:hover { background:var(--burg); border-color:var(--burg) } html.mouse .btn--light:hover { background:var(--burg); color:#fff; border-color:var(--burg) } html.mouse .btn--ghost-d:hover { background:#fff; color:var(--ink); border-color:#fff } html.mouse .btn--ghost-l:hover { background:var(--ink); color:#fff; border-color:var(--ink) } .btn--block { width:100% } @media (min-width:560px) { .btn--block { width:auto } } .btn-row { display:flex; flex-direction:column; gap:10px; margin-top:26px } @media (min-width:560px) { .btn-row { flex-direction:row; flex-wrap:wrap } } /* ── REVEAL ────────────────────────────────────────────────────────── Scoped to html.js (set by an inline script) so that if the site script ever fails to load, content stays visible instead of the whole page rendering blank. */ html.js .reveal { opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease) } html.js .reveal.vis { opacity:1; transform:none } @media (prefers-reduced-motion:reduce) { html.js .reveal, html.js .reveal.vis { opacity:1; transform:none; transition:none } html { scroll-behavior:auto } } /* ══ NAV ══════════════════════════════════════════════════════════ */ #nav { position:fixed; inset:0 0 auto 0; z-index:1000; height:var(--nav-h); background:rgba(255,255,255,.97); backdrop-filter:blur(12px); border-bottom:1px solid var(--bdr); display:flex; align-items:center; transition:background .3s, border-color .3s, box-shadow .3s; } #nav.shadow { box-shadow:0 2px 18px rgba(0,0,0,.08) } /* On the homepage the nav starts transparent over the hero and turns solid on scroll. Declared as the default for .has-hero (not toggled on by JS) so the first paint is already right — otherwise you get a flash of white bar. */ body.has-hero #nav { background:transparent; border-bottom-color:transparent; box-shadow:none } body.has-hero #nav .nav-name, body.has-hero #nav .nav-burger { color:#fff } body.has-hero #nav .nav-links a { color:rgba(255,255,255,.82) } body.has-hero #nav .nav-logo { filter:brightness(0) invert(1) } body.has-hero #nav.scrolled { background:rgba(255,255,255,.97); border-bottom-color:var(--bdr) } body.has-hero #nav.scrolled .nav-name, body.has-hero #nav.scrolled .nav-burger { color:var(--ink) } body.has-hero #nav.scrolled .nav-links a { color:var(--ink3) } body.has-hero #nav.scrolled .nav-logo { filter:none } .nav-in { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; max-width:1180px; margin:0 auto; padding:0 var(--pad); } .nav-brand { display:flex; align-items:center; gap:9px; flex-shrink:0 } /* Horizontal wordmark logo (~9.7:1). Kept short so it fits the mobile bar alongside the Book Now button + burger. */ .nav-logo { height:15px; width:auto; max-width:52vw; display:block; transition:filter .3s } .nav-name { font-family:var(--ffd); font-size:1rem; letter-spacing:.11em; color:var(--ink); white-space:nowrap } @media (min-width:400px) { .nav-logo { height:16px } } @media (min-width:560px) { .nav-logo { height:18px; max-width:none } } @media (min-width:900px) { .nav-logo { height:20px } } .nav-links { display:none } @media (min-width:900px) { .nav-links { display:flex; align-items:center; gap:2px; margin-left:auto; margin-right:14px } .nav-links a { display:flex; align-items:center; height:var(--nav-h); padding:0 14px; font-size:.7rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink3); border-bottom:2px solid transparent; transition:color .2s, border-color .2s; } html.mouse .nav-links a:hover { color:var(--ink); border-bottom-color:var(--burg) } .nav-links a[aria-current="page"] { color:var(--burg); border-bottom-color:var(--burg) } #nav.over-hero .nav-links a[aria-current="page"] { color:#fff; border-bottom-color:#fff } } .nav-right { display:flex; align-items:center; gap:8px; margin-left:auto } @media (min-width:900px) { .nav-right { margin-left:0 } } .nav-book { display:inline-flex; align-items:center; min-height:40px; padding:10px 18px; background:var(--burg); color:#fff; border:2px solid var(--burg); font-size:.68rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; transition:background .2s, border-color .2s; white-space:nowrap; } html.mouse .nav-book:hover { background:var(--burg2); border-color:var(--burg2) } .nav-burger { display:flex; align-items:center; justify-content:center; width:44px; height:44px; margin-right:-10px; color:var(--ink); } .nav-burger .icon { font-size:1.7rem } @media (min-width:900px) { .nav-burger { display:none } } /* Mobile drawer */ #drawer { position:fixed; inset:0; z-index:1200; display:flex; flex-direction:column; background:var(--ink); color:#fff; transform:translateX(100%); transition:transform .32s var(--ease); visibility:hidden; } #drawer.open { transform:none; visibility:visible } .dr-top { display:flex; align-items:center; justify-content:space-between; height:var(--nav-h); padding:0 var(--pad); flex-shrink:0; border-bottom:1px solid var(--bdr-d); } .dr-top .nav-name { color:#fff } .dr-close { display:flex; align-items:center; justify-content:center; width:44px; height:44px; margin-right:-10px; color:#fff } .dr-close .icon { font-size:1.7rem } .dr-links { flex:1; display:flex; flex-direction:column; justify-content:center; padding:0 var(--pad); gap:2px } .dr-links a { font-family:var(--ffd); font-size:2.2rem; letter-spacing:.04em; color:#fff; padding:12px 0; border-bottom:1px solid var(--bdr-d); display:flex; align-items:center; justify-content:space-between; } .dr-links a[aria-current="page"] { color:var(--rose) } .dr-links a .icon { font-size:1.3rem; color:var(--rose) } .dr-foot { padding:var(--pad); padding-bottom:calc(var(--pad) + env(safe-area-inset-bottom)); flex-shrink:0 } .dr-foot .btn { width:100% } .dr-tel { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:14px; font-size:.85rem; color:rgba(255,255,255,.6); } .dr-tel .icon { font-size:1rem; color:var(--rose) } /* ══ HERO ═════════════════════════════════════════════════════════ */ #hero { position:relative; min-height:100svh; overflow:hidden; display:flex; align-items:center; justify-content:center; background:var(--ink); } .h-slides { position:absolute; inset:0; z-index:0 } .h-slide { position:absolute; inset:0; background-size:cover; background-position:center top; opacity:0; z-index:1; filter:blur(4px); transform:scale(1.05); transition:opacity .5s ease; } .h-slide.active { opacity:1; z-index:2 } .h-ov { position:absolute; inset:0; z-index:3; background:linear-gradient(to bottom, rgba(0,0,0,.72) 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,.8) 100%); } .h-cont { position:relative; z-index:4; text-align:center; padding:calc(var(--nav-h) + 24px) var(--pad) 40px; max-width:900px } .h-super { display:block; font-size:.6rem; font-weight:700; letter-spacing:.28em; text-transform:uppercase; color:rgba(255,255,255,.68); margin-bottom:14px; } @media (min-width:560px) { .h-super { font-size:.68rem; letter-spacing:.32em } } .h-title { font-family:var(--ffd); font-size:clamp(3.6rem,19vw,11rem); line-height:.86; letter-spacing:.02em; color:#fff; margin-bottom:16px } .h-title span { display:block } .h-title .burg-word { color:var(--burg2) } .h-tag { font-size:.72rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.72); margin-bottom:30px; } @media (min-width:560px) { .h-tag { font-size:.85rem } } .h-actions { display:flex; flex-direction:column; gap:10px; align-items:stretch } @media (min-width:560px) { .h-actions { flex-direction:row; justify-content:center } } .h-scroll { position:absolute; bottom:22px; left:50%; transform:translateX(-50%); z-index:4; color:rgba(255,255,255,.45); font-size:1.5rem; animation:bob 2s ease-in-out infinite; } @keyframes bob { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(6px)} } @media (prefers-reduced-motion:reduce) { .h-scroll { animation:none } } /* ── PAGE HEADER (subpages) ─────────────────────────────────────── */ .phead { background:var(--ink); color:#fff; padding:calc(var(--nav-h) + 44px) 0 44px; text-align:center } @media (min-width:768px) { .phead { padding:calc(var(--nav-h) + 72px) 0 68px } } .phead .label { color:var(--rose) } .phead h1 { color:#fff } .phead .lede { color:rgba(255,255,255,.6); margin:16px auto 0; text-align:center } /* ══ TEASERS (homepage → subpages) ════════════════════════════════ */ .teaser { display:grid; grid-template-columns:1fr; gap:0; align-items:stretch } @media (min-width:860px) { .teaser { grid-template-columns:1fr 1fr } } .teaser-img { position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--off2) } @media (min-width:860px) { .teaser-img { aspect-ratio:auto; min-height:440px } } .teaser-img img { width:100%; height:100%; object-fit:cover } .teaser-txt { display:flex; flex-direction:column; justify-content:center; padding:44px var(--pad) } @media (min-width:860px) { .teaser-txt { padding:64px 56px } } @media (min-width:860px) { .teaser.rev .teaser-img { order:2 } } .teaser-txt .lede { margin-top:6px } /* ══ PRICE LIST — no boxes, not clickable ═════════════════════════ */ .fee-note { display:flex; align-items:flex-start; gap:12px; background:var(--burg); color:#fff; padding:16px 18px; margin-bottom:36px; border-left:5px solid #fff; } .sec--k .fee-note { border-left-color:var(--rose) } .fee-note .icon { font-size:1.3rem; flex-shrink:0; margin-top:1px } .fee-note strong { display:block; font-size:.9rem; font-weight:700; letter-spacing:.02em; margin-bottom:2px } .fee-note span { font-size:.82rem; color:rgba(255,255,255,.85); line-height:1.5 } .pl-cat { margin-bottom:38px } .pl-cat:last-child { margin-bottom:0 } .pl-cat-hdr { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; padding-bottom:10px; margin-bottom:6px; border-bottom:2px solid var(--burg); } .sec--k .pl-cat-hdr { border-bottom-color:var(--rose) } .pl-cat-hdr h3 { font-size:1.55rem; letter-spacing:.05em; color:var(--burg) } .sec--k .pl-cat-hdr h3 { color:var(--rose) } .pl-avail { margin-left:auto; font-size:.62rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink3); } .sec--k .pl-avail { color:rgba(255,255,255,.55) } .pl-row { display:flex; flex-wrap:wrap; align-items:baseline; gap:10px; padding:13px 0; border-bottom:1px solid var(--bdr); } .sec--k .pl-row { border-bottom-color:var(--bdr-d) } .pl-row:last-child { border-bottom:0 } .pl-name { font-size:.95rem; font-weight:600; color:var(--ink); flex-shrink:0 } .sec--k .pl-name { color:#fff } .pl-dots { flex:1; border-bottom:1px dotted var(--bdrm); min-width:14px; transform:translateY(-4px) } .sec--k .pl-dots { border-bottom-color:rgba(255,255,255,.28) } .pl-dur { font-size:.75rem; color:var(--mute); white-space:nowrap } .pl-price { font-family:var(--ffd); font-size:1.45rem; letter-spacing:.03em; color:var(--burg); white-space:nowrap; min-width:56px; text-align:right; } .sec--k .pl-price { color:var(--rose) } .pl-cond { flex-basis:100%; order:9; font-size:.75rem; color:var(--mute); line-height:1.5; margin-top:-2px } .sec--k .pl-cond { color:rgba(255,255,255,.45) } @media (min-width:900px) { .pl-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 56px } } /* ══ SPECIAL TREATMENTS (Ted Baker style panels) ══════════════════ */ .trt { display:grid; grid-template-columns:1fr; margin-bottom:16px; background:var(--ink-el) } @media (min-width:768px) { .trt { grid-template-columns:1fr 1.25fr; margin-bottom:20px } } .trt:last-child { margin-bottom:0 } .trt-txt { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:12px; padding:36px 24px; color:#fff; order:2; } @media (min-width:768px) { .trt-txt { order:1; padding:48px 36px } } @media (min-width:768px) { .trt.rev .trt-txt { order:2 } } .trt-txt .icon { font-size:1.9rem; color:var(--rose) } .trt-txt h3 { font-size:1.65rem; letter-spacing:.06em; color:#fff } .trt-txt p { font-size:.92rem; color:rgba(255,255,255,.66); line-height:1.6; max-width:34ch } .trt-img { position:relative; aspect-ratio:16/10; overflow:hidden; background:#000; order:1 } @media (min-width:768px) { .trt-img { aspect-ratio:auto; min-height:340px; order:2 } } @media (min-width:768px) { .trt.rev .trt-img { order:1 } } .trt-img img { position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:cover } /* Designed fallback behind the photo — shows if the image isn't in place yet */ .trt-ph { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; background:linear-gradient(150deg,var(--burg) 0%,var(--burg-dp) 100%); color:rgba(255,255,255,.85); } .trt-ph .icon { font-size:2.8rem } .trt-ph span { font-size:.62rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.6) } .trt-tag { display:inline-flex; align-items:center; gap:6px; margin-top:2px; font-size:.64rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--rose); border:1px solid rgba(229,136,153,.4); padding:6px 12px; } /* ══ STATEMENT PANEL (the "Our People" template) ══════════════════ */ .stmt-panel { background:var(--off); border-left:5px solid var(--burg); padding:26px 20px } @media (min-width:768px) { .stmt-panel { padding:44px 42px } } .stmt { font-size:clamp(1.08rem,4.2vw,1.72rem); line-height:1.55; font-weight:300; color:var(--ink3); } .stmt + .stmt { margin-top:20px } .stmt strong { font-weight:700; color:var(--ink) } /* ══ THE TEAM ═════════════════════════════════════════════════════ */ .team-grid { display:grid; grid-template-columns:1fr; gap:24px } @media (min-width:600px) { .team-grid { grid-template-columns:repeat(3,1fr); gap:20px } } .tm { text-align:center } .tm-ph { position:relative; aspect-ratio:3/4; overflow:hidden; margin-bottom:16px; background:linear-gradient(160deg,var(--burg) 0%,var(--burg-dp) 100%); display:flex; align-items:center; justify-content:center; } /* Real photo sits on top of the placeholder; if it 404s the JS drops the and the burgundy monogram placeholder underneath shows through. */ .tm-ph img { position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:cover; object-position:center top } .tm-ph .tm-avatar { width:46%; max-width:120px; color:rgba(255,255,255,.62) } .tm-ph .tm-initial { position:absolute; bottom:12px; right:14px; font-family:var(--ffd); font-size:2.4rem; letter-spacing:.04em; color:rgba(255,255,255,.28); } .tm-name { font-family:var(--ffd); font-size:1.6rem; letter-spacing:.06em; color:var(--ink) } .sec--k .tm-name { color:#fff } .tm-role { display:block; font-size:.62rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--burg); margin:4px 0 8px; } .sec--k .tm-role { color:var(--rose) } .tm-bio { font-size:.86rem; color:var(--ink3); line-height:1.65 } .sec--k .tm-bio { color:rgba(255,255,255,.6) } /* ══ GALLERY GRID — individual, centred ═══════════════════════════ */ .gal-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; max-width:1080px; margin:0 auto; } @media (min-width:640px) { .gal-grid { grid-template-columns:repeat(3,1fr); gap:14px } } @media (min-width:1000px){ .gal-grid { grid-template-columns:repeat(4,1fr); gap:16px } } .gal-cell { position:relative; aspect-ratio:3/4; overflow:hidden; background:var(--off2); border:1px solid var(--bdr); cursor:zoom-in; -webkit-tap-highlight-color:transparent; } .sec--k .gal-cell { border-color:var(--bdr-d); background:var(--ink-el) } .gal-cell img { width:100%; height:100%; object-fit:cover; object-position:center top; transition:transform .5s var(--ease) } html.mouse .gal-cell:hover img { transform:scale(1.06) } /* Lightbox */ #lbox { position:fixed; inset:0; z-index:1500; display:none; background:rgba(0,0,0,.94); align-items:center; justify-content:center; padding:16px; } #lbox.open { display:flex } #lbox img { max-width:100%; max-height:86vh; object-fit:contain } .lb-btn { position:absolute; display:flex; align-items:center; justify-content:center; width:48px; height:48px; color:#fff; background:rgba(255,255,255,.1); border:1px solid var(--bdr-dm); } .lb-btn .icon { font-size:1.6rem } .lb-x { top:calc(env(safe-area-inset-top) + 14px); right:14px } .lb-prev { left:10px; top:50%; margin-top:-24px } .lb-next { right:10px; top:50%; margin-top:-24px } .lb-count { position:absolute; bottom:calc(env(safe-area-inset-bottom) + 18px); left:50%; transform:translateX(-50%); font-size:.75rem; letter-spacing:.12em; color:rgba(255,255,255,.6); } /* ══ REVIEWS ══════════════════════════════════════════════════════ */ .rv-score { display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; margin-bottom:32px; } .rv-stars { display:flex; gap:3px; color:#F5B301 } .rv-stars .icon { font-size:1.35rem; font-variation-settings:'FILL' 1 } .rv-grid { display:grid; grid-template-columns:1fr; gap:14px } @media (min-width:700px) { .rv-grid { grid-template-columns:repeat(3,1fr); gap:18px } } .rv { background:var(--w); border:1px solid var(--bdr); padding:22px 20px; display:flex; flex-direction:column; gap:10px; } .sec--k .rv { background:var(--ink-el); border-color:var(--bdr-d) } .rv-top { display:flex; gap:2px; color:#F5B301 } .rv-top .icon { font-size:1rem; font-variation-settings:'FILL' 1 } .rv-txt { font-size:.9rem; line-height:1.7; color:var(--ink2); flex:1 } .sec--k .rv-txt { color:rgba(255,255,255,.78) } .rv-who { display:flex; align-items:center; gap:9px; margin-top:2px } .rv-av { width:32px; height:32px; flex-shrink:0; border-radius:50%; background:linear-gradient(150deg,var(--burg),var(--burg-dp)); display:flex; align-items:center; justify-content:center; font-size:.8rem; font-weight:700; color:#fff; } .rv-nm { font-size:.82rem; font-weight:600; color:var(--ink) } .sec--k .rv-nm { color:#fff } .rv-dt { font-size:.7rem; color:var(--mute) } /* Fallback shown when no reviews are loaded yet */ .rv-empty { border:1px dashed var(--bdrm); padding:36px 24px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:14px; } .sec--k .rv-empty { border-color:var(--bdr-dm) } .rv-empty > .icon { font-size:2.2rem; color:#F5B301 } /* direct child only — not the button's icon */ .rv-empty p { font-size:.92rem; color:var(--ink3); max-width:44ch } .sec--k .rv-empty p { color:rgba(255,255,255,.6) } /* ══ QUICK ACTIONS ════════════════════════════════════════════════ */ .qa-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px } @media (min-width:720px) { .qa-grid { grid-template-columns:repeat(5,1fr); gap:14px } } .qa { display:flex; flex-direction:column; align-items:center; gap:9px; padding:24px 12px; text-align:center; background:var(--ink-el); border:1px solid var(--bdr-d); transition:transform .25s var(--ease), border-color .25s var(--ease); -webkit-tap-highlight-color:transparent; } html.mouse .qa:hover { transform:translateY(-4px); border-color:var(--qa-c,var(--rose)) } .qa-ic { font-size:1.6rem; color:var(--qa-c,var(--rose)); line-height:1 } .qa-lb { font-size:.68rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:#fff } .qa-sb { font-size:.72rem; color:rgba(255,255,255,.5); line-height:1.45 } .qa-perk { display:block; font-weight:700; color:var(--qa-c,var(--rose)); margin-top:3px } /* ══ FIND / MAP ═══════════════════════════════════════════════════ */ .find-in { display:grid; grid-template-columns:1fr; gap:36px } @media (min-width:880px) { .find-in { grid-template-columns:1fr 1fr; gap:56px; align-items:start } } .hstat { display:inline-flex; align-items:center; gap:8px; margin-bottom:20px; font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; } .hstat::before { content:''; width:8px; height:8px; border-radius:50%; background:currentColor; flex-shrink:0 } .hstat[data-open="true"] { color:#15803d } .hstat[data-open="false"] { color:#b91c1c } .sec--k .hstat[data-open="true"] { color:#4ade80 } .sec--k .hstat[data-open="false"] { color:#f87171 } .find-line { display:flex; align-items:flex-start; gap:12px; margin-bottom:18px } .find-line .icon { color:var(--burg); font-size:1.2rem; flex-shrink:0; margin-top:2px } .sec--k .find-line .icon { color:var(--rose) } .find-line strong { display:block; font-size:.88rem; font-weight:600; margin-bottom:2px } .find-line span, .find-line a { font-size:.86rem; color:var(--ink3); line-height:1.6 } .sec--k .find-line span, .sec--k .find-line a { color:rgba(255,255,255,.62) } .htbl { width:100%; border-collapse:collapse; margin-top:8px } .htbl tr { border-bottom:1px solid var(--bdr) } .sec--k .htbl tr { border-bottom-color:var(--bdr-d) } .htbl td { padding:11px 0; font-size:.84rem; color:var(--ink3) } .sec--k .htbl td { color:rgba(255,255,255,.58) } .htbl td:first-child { width:44%; font-weight:500; color:var(--ink2) } .sec--k .htbl td:first-child { color:rgba(255,255,255,.8) } .htbl td:last-child { text-align:right } .htbl tr.today td:first-child { color:var(--burg); font-weight:700 } .sec--k .htbl tr.today td:first-child { color:var(--rose) } .htbl tr.today td:last-child { color:var(--ink); font-weight:600 } .sec--k .htbl tr.today td:last-child { color:#fff } .find-map { height:320px; border:1px solid var(--bdr); background:var(--off2) } @media (min-width:880px) { .find-map { height:520px } } .sec--k .find-map { border-color:var(--bdr-d) } #map, #mapHome { width:100%; height:100% } .map-wide { height:340px; width:100% } @media (min-width:768px) { .map-wide { height:440px } } .leaflet-container { background:var(--off2); font-family:var(--ffb) !important } .leaflet-popup-content-wrapper { background:#fff !important; color:var(--ink) !important; border-radius:0 !important } .leaflet-popup-tip { background:#fff !important } .leaflet-control-zoom a { background:#fff !important; color:var(--ink2) !important; border-color:var(--bdrm) !important } .leaflet-attribution-flag { display:none !important } .leaflet-popup-content { margin:14px 18px !important } .mmpop h3 { font-family:var(--ffd); font-size:1.2rem; letter-spacing:.05em; color:var(--burg); margin-bottom:4px } .mmpop p { font-size:.8rem; color:var(--ink3); line-height:1.55; margin-bottom:6px } .mmpop a { color:var(--burg); font-size:.78rem; text-decoration:underline; font-weight:600 } .mmshell { position:relative; width:52px; height:52px } .mmring { position:absolute; inset:-8px; border-radius:50%; border:2px solid rgba(123,45,58,.35); animation:pinPing 2s ease-out infinite } .mmring2 { position:absolute; inset:-3px; border-radius:50%; border:1px solid rgba(123,45,58,.2); animation:pinPing 2s ease-out .7s infinite } .mmcore { width:52px; height:52px; border-radius:50%; background:#fff; border:2px solid var(--burg); overflow:hidden; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 10px rgba(0,0,0,.2); } .mmcore img { width:72%; height:72%; object-fit:contain } @keyframes pinPing { 0%{transform:scale(1);opacity:.7} 80%,100%{transform:scale(2.4);opacity:0} } @media (prefers-reduced-motion:reduce) { .mmring,.mmring2 { animation:none } } /* ══ BOOK PAGE ════════════════════════════════════════════════════ */ .bk-steps { display:grid; grid-template-columns:1fr; gap:12px; margin-top:8px } @media (min-width:700px) { .bk-steps { grid-template-columns:repeat(3,1fr); gap:18px } } .bk-step { display:flex; align-items:flex-start; gap:14px; padding:20px 18px; background:var(--ink-el); border:1px solid var(--bdr-d); } .bk-num { font-family:var(--ffd); font-size:1.5rem; line-height:1; color:var(--rose); width:30px; flex-shrink:0; } .bk-step strong { display:block; font-size:.9rem; font-weight:600; color:#fff; margin-bottom:3px } .bk-step span { font-size:.82rem; color:rgba(255,255,255,.55); line-height:1.55 } .bk-pick { display:grid; grid-template-columns:1fr; gap:8px } @media (min-width:600px) { .bk-pick { grid-template-columns:repeat(2,1fr) } } @media (min-width:960px) { .bk-pick { grid-template-columns:repeat(3,1fr) } } .bk-svc { display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:15px 16px; background:var(--w); border:1px solid var(--bdr); transition:border-color .2s, background .2s; -webkit-tap-highlight-color:transparent; } html.mouse .bk-svc:hover { border-color:var(--burg); background:var(--burg-bg) } .bk-svc .icon { color:var(--burg); font-size:1.2rem; flex-shrink:0 } .bk-svc-b { flex:1; min-width:0 } .bk-svc-n { font-size:.9rem; font-weight:600; color:var(--ink) } .bk-svc-d { font-size:.72rem; color:var(--mute) } .bk-svc-p { font-family:var(--ffd); font-size:1.3rem; color:var(--burg); flex-shrink:0 } /* ══ FOOTER ═══════════════════════════════════════════════════════ */ #footer { background:var(--ink); color:#fff; padding:52px 0 28px; border-top:1px solid var(--bdr-d) } .foot-in { display:grid; grid-template-columns:1fr; gap:34px } @media (min-width:700px) { .foot-in { grid-template-columns:1.5fr 1fr 1fr } } .foot-logo { height:34px; width:auto; filter:brightness(0) invert(1); margin-bottom:14px } .foot-desc { font-size:.82rem; color:rgba(255,255,255,.45); line-height:1.75; max-width:300px } .foot-socs { display:flex; gap:8px; margin-top:16px } .fsoc { width:40px; height:40px; border:1px solid var(--bdr-d); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.55); transition:all .2s; } html.mouse .fsoc:hover { border-color:var(--rose); color:#fff } .foot-col h4 { font-size:.6rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.4); margin-bottom:14px; padding-bottom:9px; border-bottom:1px solid var(--bdr-d); } .foot-col li { margin-bottom:10px } .foot-col a, .foot-col span { font-size:.84rem; color:rgba(255,255,255,.45); transition:color .2s } html.mouse .foot-col a:hover { color:#fff } .foot-btm { margin-top:38px; padding-top:20px; border-top:1px solid var(--bdr-d); display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; } @media (min-width:600px) { .foot-btm { flex-direction:row; justify-content:space-between } } .foot-btm p { font-size:.72rem; color:rgba(255,255,255,.3) } /* ══ WIFI GATE ════════════════════════════════════════════════════ */ #wifiOverlay { display:none; position:fixed; inset:0; z-index:1400; background:rgba(0,0,0,.8); backdrop-filter:blur(6px); align-items:center; justify-content:center; padding:16px; } #wifiOverlay.open { display:flex } .wifi-card { background:var(--ink-el); border:1px solid rgba(41,188,194,.25); padding:32px 24px; max-width:400px; width:100%; position:relative; } @media (min-width:480px) { .wifi-card { padding:40px 34px } } .wifi-card h3 { font-family:var(--ffd); font-size:1.9rem; letter-spacing:.05em; color:#29BCC2; margin-bottom:4px } .wifi-sub { font-size:.8rem; color:rgba(255,255,255,.45); margin-bottom:24px } .wifi-field { display:flex; flex-direction:column; gap:6px; margin-bottom:14px } .wifi-field label { font-size:.66rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.5) } .wifi-field input { background:rgba(255,255,255,.06); border:1px solid var(--bdr-d); padding:13px 14px; color:#fff; font-size:1rem; outline:none; transition:border-color .2s; } .wifi-field input:focus { border-color:#29BCC2 } .wifi-btn { width:100%; margin-top:8px; min-height:50px; padding:14px; background:#29BCC2; color:#062023; font-weight:800; font-size:.9rem; letter-spacing:.04em; transition:background .2s; } html.mouse .wifi-btn:hover { background:#3dd9e0 } .wifi-creds { display:none; background:rgba(41,188,194,.08); border:1px solid rgba(41,188,194,.22); padding:20px; margin-top:20px; text-align:center; } .wifi-creds.show { display:block } .wifi-creds p { font-size:.68rem; color:rgba(255,255,255,.5); letter-spacing:.14em; text-transform:uppercase; margin-bottom:6px } .wifi-val { font-family:var(--ffd); font-size:1.7rem; color:#29BCC2; letter-spacing:.1em } .wifi-close { position:absolute; top:10px; right:10px; width:44px; height:44px; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.45); } .wifi-close .icon { font-size:1.5rem } html.mouse .wifi-close:hover { color:#fff } /* ══ TOAST ════════════════════════════════════════════════════════ */ #toast { position:fixed; left:50%; bottom:24px; z-index:1600; transform:translateX(-50%) translateY(90px); background:var(--ink); color:#fff; border:1px solid var(--bdr-dm); padding:13px 22px; font-size:.85rem; transition:transform .35s var(--ease); max-width:calc(100vw - 32px); text-align:center; } #toast.on { transform:translateX(-50%) translateY(0) } /* ══════════════════════════════════════════════════════════════════ BOOKING WIDGET — host-side style overrides only. The widget JS is shared platform-wide and is NOT modified. Owner asked for "only monthly view for booking option": the widget already defaults to the month view, so we simply hide its 1d/2d/3d/Wk/Mo switcher rather than touching the shared script. ══════════════════════════════════════════════════════════════════ */ .wkbw-calviews { display:none !important }