:root { /* REME: cream page, deep-green ink, antique-gold accent. Sampled from the logo itself -- the wordmark green is #182B26 and the arc gold #A1916E, so these are the brand's own colours rather than an approximation. The gold is darkened to #8F6F2E as TEXT so it clears 4.5:1 on cream; the lighter --gold-soft is for fills and rules only, never for type. */ --bg: #FAF6EE; --panel: #FFFFFF; --panel-2: #F2EADC; --border: #E2D9C8; --text: #17261F; --muted: #5C6A61; --accent: #22453A; --accent-strong: #153026; --on-accent: #FAF6EE; --gold: #8F6F2E; --gold-soft: #C9A86A; --nav-bg: rgba(250, 246, 238, .93); --overlay-bg: rgba(250, 246, 238, .975); --danger: #A32A20; --danger-border: #E8C6C1; --success: #1C7A46; --hero-accent: #E2C68A; --hero-on-accent: #101A16; --hero-brightness: .92; --hero-scrim: linear-gradient(to bottom, rgba(16,30,24,.52) 0%, rgba(16,30,24,.60) 45%, rgba(16,30,24,.86) 100%); --shadow-sm: 0 2px 10px rgba(23,38,31,.07); --shadow-md: 0 10px 30px rgba(23,38,31,.13); } /* Dark + gold, tuned to the Saloon Hanna hero photograph. Opt-in. */ :root[data-theme="dark"] { /* The same brand after dark: the greens lighten so they can carry text, the gold warms. --accent has to work as TYPE on --bg here, which is why it is a pale sage rather than the logo's near-black green. */ --bg: #101A16; --panel: #17241E; --panel-2: #1E2F27; --border: #2C4036; --text: #EDF2ED; --muted: #97A79D; --accent: #84C3A6; --accent-strong: #A2D8BF; --on-accent: #0D1611; --gold: #D9BC80; --gold-soft: #8A7343; --nav-bg: rgba(16, 26, 22, .93); --overlay-bg: rgba(16, 26, 22, .975); --danger: #FF9A92; --danger-border: #6a2a2a; --success: #25d366; /* the tick glyph, not the WhatsApp brand fill */ --hero-accent: #d4a24c; --hero-on-accent: #14120f; --hero-brightness: .55; --hero-scrim: linear-gradient(to bottom, rgba(20,18,15,.55) 0%, rgba(20,18,15,.35) 45%, rgba(20,18,15,.90) 100%); --shadow-sm: 0 2px 10px rgba(0,0,0,.35); --shadow-md: 0 8px 26px rgba(0,0,0,.45); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); } /* The scrolling element is , not — declared on body it did nothing, which is why in-page links jumped. */ html { scroll-behavior: smooth; } body { font-family: 'Assistant', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; line-height: 1.5; } /* Keep the sticky nav from covering the heading we scroll to */ #about, #gallery, #products, #contact { scroll-margin-top: 68px; } img { max-width: 100%; display: block; } a { color: var(--accent); text-decoration: none; } /* Navigation */ nav { position: sticky; top: 0; z-index: 20; background: var(--nav-bg); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); padding: 12px 18px; display: flex; align-items: center; justify-content: space-between; gap: 10px; } .nav-toggle { background: transparent; border: 0; color: var(--accent); font-size: 26px; cursor: pointer; padding: 4px 10px; line-height: 1; font-weight: 900; } .nav-wa { display: inline-flex; align-items: center; gap: 6px; color: #082515; font-weight: 800; text-decoration: none; font-size: 13px; padding: 8px 14px; border-radius: 999px; background: #25d366; box-shadow: var(--shadow-sm); transition: transform .1s, filter .1s; } .nav-wa:hover { filter: brightness(1.05); transform: translateY(-1px); } /* Inline WhatsApp glyph — inherits currentColor so it works on any button */ .wa-icon { width: 1.1em; height: 1.1em; flex-shrink: 0; display: block; } .wa-icon path { fill: currentColor; } .nav-theme { background: transparent; border: 1px solid var(--border); color: var(--accent); width: 34px; height: 34px; border-radius: 8px; flex: none; font-size: 15px; line-height: 1; cursor: pointer; padding: 0; display: inline-flex; align-items: center; justify-content: center; transition: background .12s, border-color .12s, color .12s; } .nav-theme:hover { background: var(--panel-2); border-color: var(--accent); } /* Fullscreen menu overlay */ .menu-overlay { position: fixed; inset: 0; z-index: 30; background: var(--overlay-bg); backdrop-filter: blur(10px); display: none; align-items: center; justify-content: center; animation: fadeIn .18s ease-out; } .menu-overlay.show { display: flex; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .menu-close { position: absolute; top: 20px; inset-inline-end: 20px; background: transparent; border: 0; color: var(--text); font-size: 32px; cursor: pointer; font-weight: 900; line-height: 1; transition: color .12s; } .menu-close:hover { color: var(--accent); } .menu-links { display: flex; flex-direction: column; align-items: center; gap: 4px; } .menu-links a { display: block; padding: 16px 28px; color: var(--text); font-size: 28px; font-weight: 900; letter-spacing: -.4px; text-decoration: none; transition: color .12s; } .menu-links a:hover { color: var(--accent); } .menu-links .menu-wa { margin-top: 20px; background: #25d366; color: #082515; padding: 12px 26px; border-radius: 4px; font-size: 15px; letter-spacing: 1px; text-transform: uppercase; box-shadow: var(--shadow-sm); transition: filter .12s, transform .1s; display: inline-flex; align-items: center; gap: 8px; } .menu-links .menu-wa:hover { color: #082515; filter: brightness(1.05); transform: translateY(-1px); } /* Hero */ .hero { position: relative; min-height: 88vh; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; background-color: var(--on-accent); } .hero .bg-image { position: absolute; inset: 0; background-size: cover; /* Horizontal focal point. `cover` on a tall mobile hero crops the sides hard, so centring cuts off anyone standing off-centre. Overridden from site settings (heroFocusX). */ background-position: 25% center; filter: brightness(var(--hero-brightness)); } .hero-overlay { position: absolute; inset: 0; background: var(--hero-scrim); } .hero.no-image { min-height: auto; padding: 90px 20px 70px; background-color: var(--bg); background-image: radial-gradient(ellipse at 20% 40%, rgba(212,162,76,.14), transparent 55%), radial-gradient(ellipse at 80% 60%, rgba(212,162,76,.10), transparent 55%); } .hero.no-image .bg-image, .hero.no-image .hero-overlay { display: none; } /* In dark mode the hero and the page below it are near enough the same colour that they merge. On cream they meet at a hard line, so fade the last stretch — well below the buttons — into the page. */ :root:not([data-theme="dark"]) .hero:not(.no-image)::after { content: ''; position: absolute; inset-inline: 0; bottom: 0; height: 96px; background: linear-gradient(to bottom, transparent, var(--bg)); pointer-events: none; z-index: 0; } .hero-content { position: relative; z-index: 1; padding: 0 20px; max-width: 720px; } /* ── Phones: whole photo, text back on top of it ────────────────────────── The source is square and the hero is tall, so `cover` threw away about half the image width — the half holding the sign. The photo is now contained in a square at the top so all of it shows, and the text sits over its lower third, below the wordmark (which ends at 48% of the frame) and well clear of his face. The hero runs a little past the photo so the buttons have somewhere dark to sit; the fade to the page happens beneath them, not behind them. Desktop is unaffected — a wide hero crops vertically, so the wordmark was never cut there. */ @media (max-width: 700px) { .hero:not(.no-image) { min-height: 0; aspect-ratio: 1 / 1.16; display: flex; align-items: flex-end; justify-content: center; padding: 0 0 52px; background-color: #14120f; overflow: hidden; } .hero:not(.no-image) .bg-image { position: absolute; inset: 0 0 auto 0; aspect-ratio: 1 / 1; background-size: contain; background-position: center top; background-repeat: no-repeat; } .hero:not(.no-image) .hero-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(20,18,15,.06) 0%, rgba(20,18,15,0) 30%, rgba(20,18,15,.55) 46%, rgba(20,18,15,.88) 62%, rgba(20,18,15,.94) 91%, var(--bg) 100%); } /* The section fade is part of the scrim now */ :root:not([data-theme="dark"]) .hero:not(.no-image)::after { display: none; } .hero:not(.no-image) .hero-content { padding-top: 0; } /* The photograph's own sign reads "saloon hanna" at full size here, so our wordmark is redundant. Visually hidden rather than removed: the document keeps its h1 for screen readers and search engines. */ .hero:not(.no-image) h1 { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .hero:not(.no-image) p { font-size: 16.5px; margin: 12px auto 22px; } .hero:not(.no-image) .eyebrow { margin-bottom: 10px; } } .hero .eyebrow { font-size: 13px; font-weight: 800; letter-spacing: 4px; text-transform: uppercase; color: var(--hero-accent); margin-bottom: 22px; display: inline-flex; align-items: center; gap: 12px; text-shadow: 0 1px 8px rgba(0,0,0,.55); } .hero .eyebrow::before, .hero .eyebrow::after { content: ''; display: inline-block; width: 32px; height: 2px; background: var(--hero-accent); } .hero h1 { margin: 0; font-size: 72px; font-weight: 900; letter-spacing: -2.5px; line-height: 1; color: #f7f4ee; /* The gold sign in the photograph sits directly behind the wordmark; the shadow is what separates one from the other. */ text-shadow: 0 2px 14px rgba(0,0,0,.5); } .hero.no-image h1 { color: var(--text); } .hero h1 .accent { color: var(--hero-accent); } .hero p { margin: 24px auto 34px; color: rgba(247,244,238,.9); font-size: 19px; max-width: 520px; line-height: 1.6; text-shadow: 0 1px 8px rgba(0,0,0,.5); } .hero.no-image p { color: var(--muted); } .hero .cta-row { display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; } .hero .cta { display: inline-block; padding: 16px 32px; border-radius: 4px; background: var(--hero-accent); color: var(--hero-on-accent); font-weight: 900; font-size: 14.5px; letter-spacing: 1.2px; transition: background .12s, transform .1s, border-color .12s; text-transform: uppercase; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.35); border: 2px solid var(--hero-accent); } .hero .cta:hover { filter: brightness(1.06); } .hero .cta.secondary { background: transparent; color: var(--hero-accent); box-shadow: none; text-shadow: 0 1px 6px rgba(0,0,0,.5); } .hero .cta.secondary:hover { background: var(--hero-accent); color: var(--hero-on-accent); text-shadow: none; } .hero.no-image .cta { background: var(--accent); color: var(--on-accent); box-shadow: none; border-color: var(--accent); } .hero.no-image .cta:hover { background: var(--accent-strong); border-color: var(--accent-strong); } .hero.no-image .cta.secondary { background: transparent; color: var(--accent); } .hero.no-image .cta.secondary:hover { background: var(--accent); color: var(--on-accent); } .hero .cta:active { transform: scale(.97); } @media (max-width: 600px) { /* Shorter hero on phones: a tall block crops a wide/square photo severely, so this both shows more of the image and keeps the subject in frame. */ .hero { min-height: 72vh; } .hero.no-image { padding: 60px 20px 48px; } .hero h1 { font-size: 46px; } .hero p { font-size: 16px; } .menu-links a { font-size: 24px; padding: 14px 24px; } } /* Section */ section { padding: 80px 20px; max-width: 1100px; margin: 0 auto; } section h2 { font-size: 36px; font-weight: 900; margin: 0 0 8px; letter-spacing: -.6px; color: var(--text); } section h2::after { content: ''; display: block; width: 42px; height: 3px; background: var(--accent); margin-top: 12px; margin-inline-start: 0; } section .sub { color: var(--muted); margin: 20px 0 32px; font-size: 15px; } #about h2, #about .sub { text-align: center; } #about h2::after { margin-inline: auto; } /* About */ #about .about-text { max-width: 640px; margin: 0 auto; font-size: 18px; color: var(--text); line-height: 1.7; text-align: center; } #about .info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 36px; } .info-card { background: var(--panel); border: 0; border-radius: 6px; padding: 22px; text-align: start; box-shadow: var(--shadow-sm); transition: transform .15s, box-shadow .15s; } .info-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .info-card .label { color: var(--accent); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 10px; } .info-card .value { font-size: 15.5px; line-height: 1.55; color: var(--text); } .info-card .value div { margin-bottom: 3px; } .info-card .value a { color: var(--text); border-bottom: 1px dotted var(--accent); text-decoration: none; } .info-card .value a:hover { color: var(--accent); } .nav-buttons { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; } .nav-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; text-decoration: none; transition: transform .1s, filter .1s; } .nav-btn:hover { transform: translateY(-1px); filter: brightness(1.1); } .nav-btn.google { background: #4285f4; color: white; } .nav-btn.waze { background: #33ccff; color: #003b5c; } /* Gallery */ .gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; } .gallery-item { aspect-ratio: 1; background: var(--panel-2); border-radius: 6px; overflow: hidden; position: relative; cursor: pointer; box-shadow: var(--shadow-sm); } .gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; } .gallery-item:hover img { transform: scale(1.06); } .gallery-item .placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--panel-2), #d9d0bc); color: var(--muted); font-size: 36px; } .gallery-item .caption { position: absolute; inset-inline-start: 0; inset-block-end: 0; padding: 12px 14px; font-size: 13px; font-weight: 700; background: linear-gradient(to top, rgba(26,24,21,.85), transparent); color: #f7f4ee; width: 100%; letter-spacing: .3px; } /* Product category tabs — deliberately large; they are the main way customers navigate the catalogue, so they must not read as chrome. */ .prod-tabs { display: flex; gap: 12px; flex-wrap: wrap; margin: 0 0 34px; } .prod-tab { background: var(--panel); color: var(--text); border: 2px solid var(--border); border-radius: 999px; padding: 15px 38px; cursor: pointer; font-family: inherit; font-size: 18px; font-weight: 900; letter-spacing: -.2px; box-shadow: var(--shadow-sm); transition: color .14s, border-color .14s, background .14s, transform .1s; } .prod-tab:hover { color: var(--accent); border-color: var(--accent); transform: translateY(-2px); } .prod-tab:active { transform: scale(.97); } .prod-tab.active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); box-shadow: 0 4px 16px rgba(212,162,76,.32); } @media (max-width: 600px) { .prod-tabs { gap: 9px; margin-bottom: 26px; } .prod-tab { padding: 13px 26px; font-size: 16px; flex: 1 1 auto; text-align: center; } } /* Products / Market */ .products-grid { /* Two per row on phones: 11 products one-per-row was ~4400px of scrolling */ display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } @media (min-width: 700px) { .products-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; } } .product { background: var(--panel); border: 0; border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); transition: transform .15s, box-shadow .15s; } .product:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .product .image { /* Portrait crop framed on the product itself — at half width a full scene shot renders the bottle too small to identify. The whole uncropped photo is still one tap away in the lightbox. */ aspect-ratio: 3 / 4; background: var(--panel-2); display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 40px; } .product .image img { width: 100%; height: 100%; object-fit: cover; } .product .image.zoomable { cursor: zoom-in; position: relative; } .product .image.zoomable::after { content: '⤢'; position: absolute; inset-block-end: 8px; inset-inline-end: 8px; background: rgba(20,18,15,.72); color: var(--accent); width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; pointer-events: none; opacity: 0; transition: opacity .15s; } .product:hover .image.zoomable::after { opacity: 1; } @media (hover: none) { .product .image.zoomable::after { opacity: 1; } } /* Result dialog — replaces the native alert for booking outcomes */ .result-bg { position: fixed; inset: 0; z-index: 300; background: rgba(10,9,7,.86); backdrop-filter: blur(3px); display: none; align-items: center; justify-content: center; padding: 22px; animation: fadeIn .16s ease-out; } .result-bg.show { display: flex; } .result-box { background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 30px 26px 24px; max-width: 380px; width: 100%; text-align: center; box-shadow: 0 18px 60px rgba(0,0,0,.55); animation: resultIn .26s cubic-bezier(.2,.9,.3,1.2); } @keyframes resultIn { from { opacity: 0; transform: scale(.88) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } } .result-box .mark { width: 62px; height: 62px; border-radius: 50%; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; font-size: 32px; font-weight: 900; line-height: 1; } .result-box.ok .mark { background: rgba(37,211,102,.16); color: var(--success); border: 2px solid rgba(37,211,102,.45); } .result-box.err .mark { background: rgba(224,93,93,.14); color: var(--danger); border: 2px solid rgba(224,93,93,.45); } .result-box h3 { margin: 0 0 8px; font-size: 22px; font-weight: 900; letter-spacing: -.3px; color: var(--text); } .result-box .detail { color: var(--muted); font-size: 14.5px; line-height: 1.55; } .result-box .detail strong { color: var(--accent); font-weight: 800; } .result-box .ok-btn { margin-top: 22px; width: 100%; border: 0; border-radius: 6px; padding: 14px 20px; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; background: var(--accent); color: var(--on-accent); } .result-box.err .ok-btn { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); } /* Full-photo lightbox */ .lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(10,9,7,.95); display: none; align-items: center; justify-content: center; padding: 20px; animation: fadeIn .16s ease-out; } .lightbox.show { display: flex; } .lightbox img { max-width: 100%; max-height: 88vh; object-fit: contain; border-radius: 6px; box-shadow: 0 10px 50px rgba(0,0,0,.6); } .lightbox .lb-close { position: absolute; top: 16px; inset-inline-end: 18px; background: transparent; border: 0; color: var(--accent); font-size: 34px; font-weight: 900; line-height: 1; cursor: pointer; padding: 6px 12px; } .lightbox .lb-caption { position: absolute; inset-block-end: 18px; inset-inline: 0; text-align: center; color: #f2ede3; font-size: 14px; font-weight: 700; padding: 0 20px; text-shadow: 0 1px 6px rgba(0,0,0,.8); } .product .body { padding: 13px 14px 14px; display: flex; flex-direction: column; gap: 4px; flex: 1; } .product .brand { color: var(--accent); font-size: 10.5px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; } .product .name { font-size: 14.5px; font-weight: 800; color: var(--text); letter-spacing: -.2px; line-height: 1.3; } .product .desc { color: var(--muted); font-size: 12.5px; flex: 1; line-height: 1.45; margin-top: 2px; /* Clamp in the grid — full text lives in the lightbox caption */ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .product .buy { display: block; width: 100%; margin-top: 12px; text-align: center; background: transparent; color: var(--accent); border: 1px solid var(--accent); padding: 10px 12px; border-radius: 4px; cursor: pointer; font-size: 12.5px; font-weight: 800; letter-spacing: .8px; transition: background .12s, color .12s; text-transform: uppercase; text-decoration: none; } .product .buy:hover { background: var(--accent); color: var(--on-accent); } @media (min-width: 700px) { .product .body { padding: 18px; } .product .name { font-size: 16px; } .product .desc { font-size: 13.5px; } } /* Footer */ footer { text-align: center; padding: 60px 20px 44px; color: var(--muted); font-size: 13px; border-top: 1px solid var(--border); margin-top: 60px; background: var(--panel); } footer .wa-link { display: inline-flex; align-items: center; gap: 8px; margin-block-start: 14px; background: #25d366; color: #082515; padding: 12px 22px; border-radius: 4px; font-weight: 800; font-size: 14px; text-transform: uppercase; letter-spacing: .5px; box-shadow: var(--shadow-sm); transition: transform .1s; } footer .wa-link:hover { transform: translateY(-1px); } /* Booking (authenticated) */ #booking { padding: 48px 20px 0; max-width: 1100px; margin: 0 auto; scroll-margin-top: 68px; } /* Brief outline pulse so it is obvious where the hero button landed you */ @keyframes cardFlash { 0%, 100% { border-color: var(--border); box-shadow: var(--shadow-sm); } 30% { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(212,162,76,.18); } } .booking-card.flash { animation: cardFlash 1.1s ease-out; } .booking-card { background: var(--panel); border: 0; border-inline-start: 4px solid var(--accent); border-radius: 6px; padding: 28px; box-shadow: var(--shadow-sm); } .booking-card.locked { text-align: center; border-inline-start: 0; } .booking-card .greet { color: var(--muted); font-size: 12px; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 1.5px; font-weight: 700; } .booking-card .greet .phone { color: var(--accent); font-weight: 800; } /* Greeting row: identity on one side, sign-out on the other */ .booking-card .greet-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; } .booking-card .signout { background: transparent; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 6px 14px; cursor: pointer; font-size: 12.5px; font-weight: 700; font-family: inherit; white-space: nowrap; transition: color .12s, border-color .12s; } .booking-card .signout:hover { color: var(--danger); border-color: var(--danger-border); } /* WhatsApp keeps its own brand green — it is a WhatsApp button and should look like one. The SMS button uses the site's accent instead. */ .signin-wa { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; background: #25d366; color: #082515; border: 0; padding: 15px 20px; border-radius: 8px; cursor: pointer; font-size: 15.5px; font-weight: 800; font-family: inherit; text-decoration: none; box-shadow: var(--shadow-sm); transition: filter .12s, transform .1s; } .signin-wa:hover { filter: brightness(1.05); transform: translateY(-1px); } .signin-wa .wa-icon { width: 1.2em; height: 1.2em; } /* Beside WhatsApp it is the alternative, so it drops to an outline. Alone — as it was while the account was disabled — it fills and carries the page. */ .signin-primary.secondary { margin-top: 10px; background: transparent; color: var(--accent); border: 1px solid var(--accent); } .signin-primary { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; background: var(--accent); color: var(--on-accent); border: 0; padding: 15px 20px; border-radius: 8px; cursor: pointer; font-size: 15.5px; font-weight: 800; font-family: inherit; text-decoration: none; box-shadow: var(--shadow-sm); transition: filter .12s, transform .1s; } .signin-primary:hover { filter: brightness(1.08); transform: translateY(-1px); } .name-field { margin: 14px 0 4px; text-align: start; } .name-field label { display: block; font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 6px; } .name-field label span { font-weight: 400; color: var(--muted); } .name-field input { width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); color: var(--text); font-size: 15px; font-family: inherit; } .name-field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); } .signin-sms { display: block; margin: 10px auto 0; background: transparent; color: var(--muted); border: 0; cursor: pointer; font-family: inherit; font-size: 13px; text-decoration: underline; padding: 4px; } .signin-sms:hover { color: var(--accent); } .booking-card h2 { margin: 0 0 18px; font-size: 26px; font-weight: 900; letter-spacing: -.4px; color: var(--text); } .booking-card .rsv-list { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-direction: column; gap: 10px; } .booking-card .rsv-list li { background: var(--bg); padding: 14px 16px; border-radius: 4px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-inline-start: 2px solid var(--accent); } .booking-card .rsv-list .when { display: flex; flex-direction: column; } .booking-card .rsv-list .when .date { font-weight: 800; font-size: 15px; color: var(--text); } .booking-card .rsv-list .when .time { color: var(--muted); font-size: 13px; margin-top: 2px; } .booking-card .rsv-list .cancel { background: transparent; color: var(--muted); border: 1px solid var(--border); padding: 6px 12px; border-radius: 999px; cursor: pointer; font-size: 13px; transition: color .12s, border-color .12s; } .booking-card .rsv-list .cancel:hover { color: var(--danger); border-color: var(--danger-border); } .booking-card .actions { display: flex; gap: 8px; flex-wrap: wrap; } .book-btn { background: var(--accent); color: var(--on-accent); border: 0; padding: 13px 26px; border-radius: 4px; font-weight: 800; font-size: 13px; cursor: pointer; transition: background .12s, transform .1s; text-transform: uppercase; letter-spacing: 1px; } .book-btn:hover { background: var(--accent); } .book-btn:active { transform: scale(.97); } .empty-rsvs { color: var(--muted); font-size: 14px; margin-bottom: 14px; } /* What an approved customer has left to book with, above "book" */ .booking-card .bal { margin: 2px 0 18px; } .booking-card .bal-title { font-weight: 800; font-size: 15px; color: var(--text); } .booking-card .bal-sub { color: var(--muted); font-size: 12.5px; margin-top: 2px; } .booking-card .bal-list { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-direction: column; gap: 8px; } .booking-card .bal-list li { background: var(--bg); padding: 11px 16px; border-radius: 4px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-inline-start: 2px solid var(--gold-soft); } .booking-card .bal-list .name { font-weight: 700; font-size: 14.5px; color: var(--text); min-width: 0; } .booking-card .bal-list .n { flex: none; min-width: 34px; text-align: center; padding: 3px 10px; border-radius: 999px; background: var(--panel-2); color: var(--gold); font-weight: 800; font-size: 14px; } .booking-card .bal-list li.zero .n { color: var(--muted); } .booking-card .bal-note { color: var(--muted); font-size: 12.5px; margin-top: 8px; } .booking-card.locked .lock-icon { font-size: 32px; opacity: .5; margin-bottom: 8px; } .booking-card.locked p { color: var(--muted); margin: 8px 0 14px; font-size: 14px; } /* Booking is a dedicated page (not a modal) */ #bookView { display: none; background: var(--bg); } body.on-book-page #bookView { display: block; } body.on-book-page > .hero, body.on-book-page > #booking, body.on-book-page > #about, body.on-book-page > #gallery, body.on-book-page > #products, body.on-book-page > footer { display: none !important; } .book-page { max-width: 560px; margin: 0 auto; padding: 20px 18px 60px; animation: pageFadeIn .22s ease-out; } @keyframes pageFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* Back link and page title share one line — the booking steps need the vertical room more than the header does. */ .page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--border); } .page-back { background: transparent; color: var(--muted); border: 0; padding: 0; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; transition: color .12s; } .page-back:hover { color: var(--accent); } .page-back .chev { font-size: 18px; line-height: 1; transform: translateY(-1px); } .page-title { margin: 0; font-size: 20px; font-weight: 900; letter-spacing: -.4px; } .page-sub { color: var(--muted); font-size: 14px; margin: 0 0 24px; } /* Legacy alias — some class references still target these on the book page */ .book-modal h3 { margin: 0 0 8px; font-size: 20px; } .book-modal .sub { color: var(--muted); font-size: 13px; margin-bottom: 16px; } /* Day-pill picker */ .picker-title { margin: 0 0 6px; font-size: 22px; font-weight: 900; color: var(--text); letter-spacing: -.3px; } .picker-sub { color: var(--muted); font-size: 13px; margin: 0 0 20px; } .week-nav { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; } .week-nav .arrow { background: var(--panel); color: var(--text); border: 1px solid var(--border); width: 40px; height: 40px; border-radius: 8px; cursor: pointer; font-size: 20px; font-weight: 900; display: inline-flex; align-items: center; justify-content: center; transition: background .12s; box-shadow: var(--shadow-sm); line-height: 1; } .week-nav .arrow:hover:not(:disabled) { background: var(--panel-2); } .week-nav .arrow:disabled { opacity: .3; cursor: not-allowed; box-shadow: none; } .week-nav .month-name { flex: 1; text-align: center; font-weight: 800; font-size: 17px; color: var(--text); letter-spacing: -.2px; } .day-pills { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 22px 0 24px; } @keyframes pillsSlideForward { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: translateX(0); } } @keyframes pillsSlideBack { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } } .day-pills.anim-forward { animation: pillsSlideForward .22s ease-out; } .day-pills.anim-back { animation: pillsSlideBack .22s ease-out; } .week-nav .arrow:active:not(:disabled) { transform: scale(.92); } .day-pill { display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; } .day-pill .wl-badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--accent); color: var(--on-accent); font-size: 8.5px; font-weight: 700; letter-spacing: .3px; padding: 2px 5px; border-radius: 3px; white-space: nowrap; } .day-pill .circle { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--panel); color: var(--text); border: 1px solid var(--border); font-weight: 700; font-size: 15px; transition: background .12s, color .12s, border-color .12s, transform .1s; } .day-pill .weekday { color: var(--muted); font-size: 11px; font-weight: 600; } .day-pill.disabled { pointer-events: none; } .day-pill.disabled .circle { opacity: .3; } .day-pill.disabled .weekday { opacity: .3; } .day-pill.available .circle { cursor: pointer; } .day-pill.available:hover .circle { background: var(--panel-2); } .day-pill.selected .circle { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } /* Waitlist-only day: outlined rather than solid, so it reads as "nothing free, but you can ask" instead of "bookable". */ .day-pill.wl-only .circle { border-style: dashed; color: var(--muted); } .day-pill.wl-only.selected .circle { color: var(--on-accent); border-style: solid; } .day-pill.selected .weekday { color: var(--text); font-weight: 800; } .slots-heading { color: var(--text); font-weight: 800; font-size: 15px; margin: 0 0 12px; letter-spacing: -.2px; } .slots-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 8px; } .slot-btn { display: block; width: 100%; background: var(--panel); color: var(--text); border: 1px solid var(--border); padding: 14px 12px; border-radius: 10px; font-size: 15.5px; font-weight: 700; text-align: center; cursor: pointer; transition: background .12s, border-color .12s, transform .1s; font-family: inherit; letter-spacing: -.2px; } .slot-btn:hover { background: var(--panel-2); border-color: var(--accent); } .slot-btn:active { transform: scale(.99); } /* Already booked, or inside an interval the barber blocked. Shown rather than omitted so a busy day reads as busy instead of empty. */ .slot-btn.taken { background: var(--panel-2); color: var(--muted); border-style: dashed; text-decoration: line-through; cursor: not-allowed; font-weight: 600; } .slot-btn.taken:hover { background: var(--panel-2); border-color: var(--border); } /* The chosen hour stays visible in the list rather than the list vanishing */ .slot-btn.selected { background: var(--accent); color: var(--on-accent); border-color: var(--accent); font-weight: 900; box-shadow: 0 3px 12px rgba(212,162,76,.3); } .confirm-box { animation: confirmIn .18s ease-out; } @keyframes confirmIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .slots-empty { color: var(--muted); text-align: center; padding: 20px 0; font-size: 14px; grid-column: 1 / -1; } .waitlist-cta { display: block; text-align: center; padding: 14px 0 6px; margin-top: 8px; color: var(--accent); font-size: 14px; font-weight: 700; cursor: pointer; text-decoration: none; border-top: 1px solid var(--border); } .waitlist-cta:hover { color: var(--accent-strong); } .waitlist-cta.disabled { color: var(--muted); pointer-events: none; font-weight: 500; } .confirm-box { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; } .confirm-box .summary { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; font-size: 14px; } .confirm-box .summary .when { font-weight: 800; color: var(--accent-strong); font-size: 15px; } .confirm-box .btn-row { display: flex; gap: 8px; } .confirm-box .btn-primary { flex: 1; width: 100%; min-width: 0; background: var(--accent); color: var(--on-accent); border: 0; padding: 13px 20px; border-radius: 4px; font-weight: 800; font-size: 14px; cursor: pointer; transition: background .12s, transform .1s; text-transform: uppercase; letter-spacing: .8px; } .confirm-box .btn-primary:hover { background: var(--accent); } .confirm-box .btn-primary:active { transform: scale(.97); } .confirm-box .btn-back { background: transparent; color: var(--muted); border: 1px solid var(--border); padding: 12px 16px; border-radius: 999px; cursor: pointer; font-size: 13.5px; } .confirm-box .btn-back:hover { color: var(--text); } .cal-legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11.5px; color: var(--muted); margin-top: 12px; } .cal-legend .dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-inline-end: 4px; vertical-align: middle; } .cal-legend .dot.open { background: rgba(212,162,76,.5); } .cal-legend .dot.full { background: rgba(224,151,60,.4); } .cal-legend .dot.closed { background: var(--panel-2); } .book-modal .close { background: transparent; color: var(--muted); border: 1px solid var(--border); padding: 10px 20px; border-radius: 999px; cursor: pointer; margin-top: 8px; width: 100%; font-size: 14px; } /* SMS login on the booking page */ .sms-login { background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; margin-top: 10px; } .sms-login .lead { font-size: 13.5px; color: var(--muted); margin-bottom: 10px; line-height: 1.45; } .sms-login .row { display: flex; gap: 8px; } .sms-login input { flex: 1; min-width: 0; padding: 12px 14px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); font-size: 16px; font-family: inherit; outline: 0; text-align: start; } .sms-login input:focus { border-color: var(--accent); } .sms-login input.code { font-family: monospace; letter-spacing: 4px; font-weight: 700; } .sms-login button { background: var(--accent); color: var(--on-accent); border: 0; border-radius: 8px; padding: 12px 20px; font-weight: 800; font-size: 14px; cursor: pointer; font-family: inherit; white-space: nowrap; } .sms-login button:disabled { opacity: .5; cursor: not-allowed; } .sms-login .msg { font-size: 13px; margin-top: 9px; } .sms-login .msg.err { color: var(--danger); } .sms-login .msg.ok { color: var(--accent); } .sms-login .back { background: transparent; color: var(--muted); border: 0; padding: 8px 0 0; font-size: 13px; cursor: pointer; font-family: inherit; text-decoration: underline; } /* Service picker — full-size cards on the first step */ .svc-cards { display: flex; flex-direction: column; gap: 10px; margin: 18px 0 12px; } .svc-card-btn { background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 12px; padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; font-family: inherit; box-shadow: var(--shadow-sm); transition: background .12s, border-color .12s, transform .1s; text-align: start; } .svc-card-btn:hover { border-color: var(--accent); background: var(--panel-2); } .svc-card-btn:active { transform: scale(.98); } .svc-card-btn .name { font-size: 17px; font-weight: 800; letter-spacing: -.2px; } .svc-card-btn .pick { color: var(--accent); font-size: 13.5px; font-weight: 800; white-space: nowrap; transition: transform .12s; } .svc-card-btn:hover .pick { transform: translateX(-3px); } /* Party size, revealed inside the service card when that service is picked */ .svc-kids { background: var(--panel-2); border: 1px solid var(--accent); border-top: 0; border-radius: 0 0 12px 12px; padding: 14px 20px 16px; margin: -10px 0 10px; animation: confirmIn .18s ease-out; } .svc-kids label { display: block; font-size: 13.5px; font-weight: 700; margin-bottom: 9px; } .svc-kids select { width: 100%; padding: 13px 14px; border-radius: 8px; font-size: 16px; border: 1px solid var(--border); background: var(--panel); color: var(--text); font-family: inherit; } .svc-kids select:focus { border-color: var(--accent); outline: 0; } .svc-kids .note { color: var(--muted); font-size: 12.5px; margin-top: 8px; } .svc-card-btn.picking { border-color: var(--accent); border-radius: 12px 12px 0 0; } /* Back-to-services chip on step 2 */ .back-svc-btn { background: transparent; color: var(--muted); border: 0; padding: 0 0 10px; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; transition: color .12s; } .back-svc-btn:hover { color: var(--accent); } .back-svc-btn .chev { font-size: 16px; line-height: 1; transform: translateY(-1px); } .back-svc-btn .svc-label { color: var(--text); background: var(--panel-2); border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; font-weight: 700; } /* ── 4-step wizard chrome ─────────────────────────────────────────────── */ .step-head { text-align: center; margin: 0 0 18px; } .step-head .count { color: var(--muted); font-size: 12.5px; font-weight: 700; margin-bottom: 9px; } /* Progress reads left-to-right even on this RTL page: 1 is always the leftmost dot, matching how people read a numbered progress bar. */ .step-dots { display: flex; direction: ltr; align-items: center; justify-content: center; } .step-dots .dot { width: 26px; height: 26px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 800; line-height: 1; background: var(--panel); color: var(--muted); border: 1px solid var(--border); transition: background .18s, color .18s, border-color .18s; } .step-dots .dot.done { background: rgba(212,162,76,.16); color: var(--accent); border-color: var(--accent); } .step-dots .dot.now { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } .step-dots .bar { width: 32px; height: 2px; background: var(--border); flex: none; transition: background .18s; } .step-dots .bar.done { background: var(--accent); } .step-content .picker-title { font-size: 19px; margin-bottom: 3px; } .step-content .picker-sub { font-size: 12.5px; margin-bottom: 18px; } /* Day list beneath the week strip (step 2) */ .list-label { color: var(--muted); font-size: 12.5px; font-weight: 700; margin: 24px 0 10px; } .day-list { display: flex; flex-direction: column; gap: 8px; } .day-row { display: flex; align-items: center; gap: 12px; width: 100%; background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 12px; padding: 13px 14px; cursor: pointer; font-family: inherit; text-align: start; transition: border-color .12s, background .12s, transform .1s; } .day-row:hover { background: var(--panel-2); border-color: var(--accent); } .day-row:active { transform: scale(.995); } .day-row.selected { border-color: var(--accent); background: var(--panel-2); } .day-row .radio { width: 20px; height: 20px; border-radius: 50%; flex: none; border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--on-accent); font-size: 11px; font-weight: 900; line-height: 1; transition: background .12s, border-color .12s; } .day-row.selected .radio { background: var(--accent); border-color: var(--accent); } .day-row .txt { flex: 1; min-width: 0; } .day-row .txt .l1 { display: block; font-size: 15px; font-weight: 800; letter-spacing: -.2px; } .day-row .txt .l2 { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; } .day-row .tag { flex: none; font-size: 10.5px; font-weight: 800; color: var(--accent); border: 1px dashed var(--accent); border-radius: 4px; padding: 3px 6px; white-space: nowrap; } /* Chosen-date bar at the top of step 3 */ .chosen-bar { display: flex; align-items: center; gap: 11px; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-bottom: 24px; } .chosen-bar .ic { font-size: 17px; line-height: 1; flex: none; } .chosen-bar .val { flex: 1; min-width: 0; font-weight: 800; font-size: 14.5px; letter-spacing: -.2px; } .chosen-bar .change { background: transparent; border: 0; color: var(--accent); cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 800; white-space: nowrap; display: inline-flex; align-items: center; gap: 3px; padding: 0; } .chosen-bar .change:hover { color: var(--accent-strong); } /* Morning / afternoon groups (step 3) */ .slot-group + .slot-group { border-top: 1px solid var(--border); margin-top: 18px; padding-top: 18px; } .slot-group .gh { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 13px; font-weight: 800; margin-bottom: 11px; } .slot-group .gh .ic { font-size: 14px; } /* Review card (step 4) */ .review-hero { text-align: center; margin-bottom: 22px; } .review-hero .ic { font-size: 38px; line-height: 1; } .review-hero h3 { margin: 12px 0 6px; font-size: 21px; font-weight: 900; letter-spacing: -.3px; } .review-hero p { color: var(--muted); font-size: 13.5px; margin: 0; } .review-card { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 0 16px; margin-bottom: 14px; } .review-card .r { display: flex; align-items: center; gap: 12px; padding: 15px 0; } .review-card .r + .r { border-top: 1px solid var(--border); } .review-card .r .ic { font-size: 15px; width: 20px; text-align: center; flex: none; } .review-card .r .k { color: var(--muted); font-size: 13.5px; flex: none; } .review-card .r .v { flex: 1; text-align: end; font-weight: 800; font-size: 15px; letter-spacing: -.2px; } .review-note { display: flex; gap: 9px; align-items: flex-start; background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 11px 13px; color: var(--muted); font-size: 12.5px; line-height: 1.5; margin-bottom: 14px; } .review-note .ic { flex: none; } /* Advance / retreat buttons shared by steps 2-4 */ .step-next.wa { background: #25d366; color: #082515; } .step-next.wa:hover { background: #1fbe5c; } .step-next { width: 100%; background: var(--accent); color: var(--on-accent); border: 0; padding: 15px 20px; border-radius: 4px; font-weight: 800; font-size: 14.5px; cursor: pointer; font-family: inherit; margin-top: 20px; text-transform: uppercase; letter-spacing: .8px; transition: background .12s, transform .1s, opacity .12s; } .step-next:active:not(:disabled) { transform: scale(.99); } .step-next:disabled { opacity: .32; cursor: not-allowed; } .step-prev { width: 100%; background: transparent; color: var(--muted); border: 1px solid var(--border); border-radius: 4px; padding: 13px 20px; font-size: 13.5px; font-weight: 700; cursor: pointer; font-family: inherit; margin-top: 8px; transition: color .12s, border-color .12s; } .step-prev:hover { color: var(--text); border-color: var(--accent); } /* Step-swap animation */ @keyframes stepInRight { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: translateX(0); } } @keyframes stepInLeft { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: translateX(0); } } .step-content.anim-right { animation: stepInRight .22s ease-out; } .step-content.anim-left { animation: stepInLeft .22s ease-out; } /* ══════════════════════════════════════════════════════════════════════ REME — brand layer. Everything above is the booking application's own furniture, restyled through the tokens. Everything below is this centre's public site. ══════════════════════════════════════════════════════════════════════ */ /* Both languages are right-to-left, so switching never flips the layout — only the typeface changes. Hebrew gets Frank Ruhl Libre over Assistant; Arabic gets Amiri over Tajawal. Naming both in one stack would let the browser render Hebrew glyphs from an Arabic face and vice versa, which is how you get a page where half the headings have the wrong texture. */ :root:lang(he) { --font-body: 'Assistant'; --font-display: 'Frank Ruhl Libre'; } :root:lang(ar) { --font-body: 'Tajawal'; --font-display: 'Amiri'; } body { font-family: var(--font-body), -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; } h1, h2, h3, .brand b, .hero h1, .page-title { font-family: var(--font-display), Georgia, serif; font-weight: 700; letter-spacing: 0; } .sprite { position: absolute; width: 0; height: 0; overflow: hidden; } svg use { fill: currentColor; } /* ── Nav ──────────────────────────────────────────────────────────────── */ nav .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); } nav .brand img { width: 38px; height: 38px; border-radius: 50%; flex: none; } .brand-text { display: flex; flex-direction: column; line-height: 1.1; } .brand-text b { font-size: 19px; letter-spacing: 1.5px; } .brand-text i { font-style: normal; font-size: 10.5px; color: var(--muted); letter-spacing: .2px; } .nav-actions { display: flex; align-items: center; gap: 8px; } .nav-lang { background: transparent; border: 1px solid var(--border); color: var(--text); border-radius: 999px; padding: 6px 13px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: .15s; } .nav-lang:hover { border-color: var(--accent); color: var(--accent); } /* ── Hero ─────────────────────────────────────────────────────────────── */ .hero-logo { width: 96px; height: 96px; border-radius: 50%; margin: 0 auto 18px; display: block; box-shadow: 0 8px 30px rgba(0,0,0,.34); } .hero h1 { letter-spacing: 6px; font-size: clamp(38px, 9vw, 62px); } .hero .eyebrow { letter-spacing: 2px; } .hero-values { position: relative; z-index: 2; display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 30px; padding: 0 16px 30px; } .hero-values span { display: inline-flex; align-items: center; gap: 7px; color: #EDE6D6; font-size: 14px; } .hero-values svg { width: 17px; height: 17px; color: var(--hero-accent); } .hero-values em { font-style: normal; } .hero.no-image .hero-values span { color: var(--muted); } .hero.no-image .hero-values svg { color: var(--gold); } /* ── Sections ─────────────────────────────────────────────────────────── */ .section { max-width: 1080px; margin: 0 auto; padding: 72px 20px; } .section > h2 { text-align: center; font-size: clamp(25px, 4.4vw, 34px); margin: 0 0 6px; color: var(--text); } .section > .sub { text-align: center; color: var(--muted); margin-bottom: 40px; font-size: 15.5px; } /* A hairline gold rule under every section heading — the one piece of the logo's gold that appears throughout, so the accent reads as deliberate. */ .section > h2::after { content: ''; display: block; width: 52px; height: 2px; margin: 14px auto 0; background: linear-gradient(to left, transparent, var(--gold-soft), transparent); } .band { max-width: none; background: var(--panel-2); } .band > h2, .band > .sub, .band > ol, .band > ul { max-width: 1080px; margin-inline: auto; } /* ── Treatment cards ──────────────────────────────────────────────────── */ .tx-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 26px; } .tx-card { background: var(--panel); border: 1px solid var(--border); border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; transition: transform .18s, box-shadow .18s; } .tx-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .tx-media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--panel-2); } .tx-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .tx-body { padding: 22px 22px 20px; display: flex; flex-direction: column; flex: 1; } .tx-kicker { color: var(--gold); font-size: 12.5px; font-weight: 700; letter-spacing: .4px; } .tx-body h3 { margin: 6px 0 10px; font-size: 22px; color: var(--text); } .tx-body p { margin: 0 0 18px; color: var(--muted); line-height: 1.75; font-size: 15px; } /* The treatment's explanation from הגדרות אתר: paragraphs, and the lines written as "• point" as a list with gold dots. */ .tx-text { margin-bottom: 18px; } .tx-text p { margin: 0 0 10px; } .tx-text > :last-child { margin-bottom: 0; } .tx-text strong { color: var(--text); } .tx-points { list-style: none; margin: 0 0 10px; padding: 0; } .tx-points li { position: relative; padding-inline-start: 18px; color: var(--muted); line-height: 1.75; font-size: 15px; } .tx-points li::before { content: ''; position: absolute; inset-inline-start: 3px; top: .72em; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-soft); } .tx-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .chip { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13.5px; } .chip svg { width: 15px; height: 15px; color: var(--gold); } .chip em { font-style: normal; } .cta.small { padding: 10px 20px; font-size: 14px; } .cta.ghost { background: transparent; border: 1px solid currentColor; } /* ── How it works ─────────────────────────────────────────────────────── */ .steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; max-width: 700px; } .steps li { display: flex; align-items: center; gap: 16px; background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 15px 18px; } .steps .n { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: 15px; } .steps p { margin: 0; color: var(--text); font-size: 15.5px; line-height: 1.6; } /* ── Benefit rows ─────────────────────────────────────────────────────── */ .ben-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; } .ben { display: flex; gap: 15px; align-items: flex-start; background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 20px; } .ben-i { flex: none; width: 42px; height: 42px; padding: 10px; border-radius: 12px; background: var(--panel-2); color: var(--accent); box-sizing: border-box; } .ben h4 { margin: 2px 0 5px; font-size: 16px; color: var(--text); font-weight: 700; } .ben p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.6; } /* ── Hydrogen pills ───────────────────────────────────────────────────── */ .h2-band { background: var(--accent); } .h2-band > h2 { color: var(--on-accent); } .h2-band > h2::after { background: linear-gradient(to left, transparent, var(--hero-accent), transparent); } .pill-grid { list-style: none; padding: 0 20px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 14px; } .pill-grid li { display: flex; align-items: center; gap: 13px; padding: 16px 18px; border-radius: 14px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); color: var(--on-accent); font-size: 15px; line-height: 1.5; } .pill-grid svg { flex: none; width: 21px; height: 21px; color: var(--hero-accent); } :root[data-theme="dark"] .pill-grid li { background: rgba(0,0,0,.18); border-color: rgba(0,0,0,.3); } /* ── Who / facts ──────────────────────────────────────────────────────── */ .two-col { display: grid; grid-template-columns: 1.15fr .85fr; gap: 42px; align-items: start; } .two-col h2 { text-align: start; font-size: clamp(23px, 4vw, 30px); margin: 0 0 20px; } .two-col h2::after { margin-inline: 0; } .check { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 12px; } .check li { position: relative; padding-inline-start: 30px; color: var(--text); line-height: 1.65; font-size: 15.5px; } .check li::before { content: '✓'; position: absolute; inset-inline-start: 0; top: 0; color: var(--gold); font-weight: 700; } .about-text { color: var(--muted); line-height: 1.8; margin: 0; } .facts { display: grid; gap: 12px; } .fact { display: flex; align-items: center; gap: 12px; background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; color: var(--text); font-size: 15px; } .fact svg { flex: none; width: 20px; height: 20px; color: var(--gold); } /* ── Contact ──────────────────────────────────────────────────────────── */ footer#contact { background: var(--panel-2); border-top: 1px solid var(--border); padding: 0; margin-top: 0; } .contact-card { max-width: 660px; margin: 0 auto; padding: 66px 20px 46px; text-align: center; } .contact-logo { width: 74px; height: 74px; border-radius: 50%; margin-bottom: 18px; } .contact-card h2 { font-size: clamp(22px, 4vw, 29px); margin: 0 0 8px; color: var(--text); } .contact-card > p { color: var(--muted); margin: 0 0 26px; font-size: 15.5px; } .contact-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 26px; } .contact-meta { display: flex; gap: 26px; justify-content: center; flex-wrap: wrap; color: var(--muted); font-size: 14.5px; } .contact-meta a, .contact-meta > span { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); text-decoration: none; } .contact-meta a:hover { color: var(--accent); } .contact-meta svg { width: 16px; height: 16px; color: var(--gold); } .legal { border-top: 1px solid var(--border); padding: 22px 20px 30px; text-align: center; color: var(--muted); font-size: 12.5px; } .disclaimer { max-width: 640px; margin: 0 auto 10px; line-height: 1.65; opacity: .9; } /* ── Narrow screens ───────────────────────────────────────────────────── */ @media (max-width: 760px) { .section { padding: 52px 16px; } .two-col { grid-template-columns: 1fr; gap: 30px; } .hero-logo { width: 78px; height: 78px; } .brand-text i { display: none; } .nav-lang { padding: 5px 10px; font-size: 12px; } .hero-values { gap: 8px 18px; font-size: 13px; } .contact-card { padding: 48px 16px 36px; } } /* ── Hero, for THIS photograph ──────────────────────────────────────────── The inherited rules were cut for the barber's square portrait, which had his sign in the middle and a face that text had to stay clear of. Ours is a tall shot of the chamber with the centre's own wordmark already on the wall behind it — so the crop, the height and the amount of brand we add on top all want different answers. Chiefly: the photo IS the logo. A wordmark on the wall, a logo badge in the nav and a third lockup in the hero is the same mark three times, so the hero keeps the typographic one and drops the badge. */ .hero-logo { display: none; } .hero:not(.no-image) { min-height: 68vh; max-height: 760px; aspect-ratio: auto; align-items: center; padding: 0; } .hero:not(.no-image) .bg-image { position: absolute; inset: 0; background-size: cover; background-position: 62% center; /* the chamber, not the empty wall */ background-repeat: no-repeat; filter: brightness(var(--hero-brightness)); } .hero:not(.no-image) .hero-overlay { position: absolute; inset: 0; background: var(--hero-scrim); } .hero .hero-content { position: relative; z-index: 2; } @media (max-width: 700px) { /* Our source is 3:4, not square, so `contain` would letterbox it. Cover, and keep the crop on the chamber. The h1 stays visible here: unlike the barber's sign, the wall wordmark is small in this frame once cropped. */ .hero:not(.no-image) { min-height: 76vh; max-height: none; padding: 0; align-items: flex-end; } .hero:not(.no-image) .bg-image { inset: 0; aspect-ratio: auto; background-size: cover; background-position: 60% center; } .hero:not(.no-image) .hero-overlay { background: linear-gradient(to bottom, rgba(16,30,24,.30) 0%, rgba(16,30,24,.38) 40%, rgba(16,30,24,.80) 78%, rgba(16,30,24,.92) 100%); } .hero:not(.no-image) h1 { position: static; width: auto; height: auto; margin: 0; clip-path: none; overflow: visible; } .hero .hero-content { padding-bottom: 26px; } } /* ── Buttons outside the hero ───────────────────────────────────────────── The inherited sheet only ever styles `.hero .cta`, because the barber's page had its buttons nowhere else. Every CTA on a treatment card and in the contact block was therefore rendering as bare text. */ .cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 28px; border-radius: 999px; background: var(--accent); color: var(--on-accent); border: 1px solid var(--accent); font-weight: 700; font-size: 15px; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s, border-color .15s, transform .12s; } .cta:hover { background: var(--accent-strong); border-color: var(--accent-strong); transform: translateY(-1px); } .cta:active { transform: scale(.98); } .cta.secondary { background: transparent; color: var(--accent); } .cta.secondary:hover { background: var(--accent); color: var(--on-accent); } .cta.ghost { background: transparent; color: var(--accent); border-color: var(--border); } .cta.ghost:hover { background: var(--panel-2); color: var(--accent); border-color: var(--accent); } /* The hero sits on a photograph and keeps its own high-contrast treatment; these only restore the pill shape so the two sets read as one family. */ .hero .cta { border-radius: 999px; text-transform: none; letter-spacing: .3px; font-weight: 700; } /* WhatsApp: the platform's own green against a cream-and-forest page is the one colour on the site nobody chose. Keep the icon recognisable, let the button belong. */ footer .wa-link, .contact-row .wa-link { background: transparent; color: var(--accent); border: 1px solid var(--accent); border-radius: 999px; padding: 13px 28px; font-weight: 700; font-size: 15px; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; } footer .wa-link:hover, .contact-row .wa-link:hover { background: var(--accent); color: var(--on-accent); } /* ── Hero values strip ──────────────────────────────────────────────────── `.hero` is a centred flex row, so this sat BESIDE the title block instead of under it. Taking it out of the flow puts it back at the foot of the photograph, where it reads as a caption rather than a column. */ .hero { position: relative; } .hero-values { position: absolute; inset-inline: 0; bottom: 0; padding: 0 16px 26px; margin: 0; } @media (max-width: 700px) { .hero-values { position: static; padding: 0 16px 22px; } .hero .hero-content { padding-bottom: 8px; } } /* The ghost button inherits --accent, which is a near-black green. On the cream page that is correct; on the hero photograph it was invisible. */ .hero .cta.ghost { color: #F3EEE2; border-color: rgba(243,238,226,.55); background: transparent; box-shadow: none; text-shadow: 0 1px 6px rgba(0,0,0,.45); } .hero .cta.ghost:hover { background: rgba(243,238,226,.14); border-color: #F3EEE2; color: #fff; } .hero .cta.secondary { box-shadow: none; } /* The nav's WhatsApp pill is the platform green, which is the one colour on this page nobody picked. Same treatment as the contact button: keep the glyph, drop the shout. */ nav .nav-wa { background: transparent; color: var(--accent); border: 1px solid var(--border); border-radius: 999px; padding: 6px 14px; font-weight: 700; font-size: 13px; box-shadow: none; } nav .nav-wa:hover { background: var(--accent); color: var(--on-accent); border-color: var(--accent); filter: none; transform: none; } .menu-links .menu-wa { background: var(--accent); color: var(--on-accent); } .menu-links .menu-wa:hover { background: var(--accent-strong); color: var(--on-accent); filter: none; } /* This photograph is 3:4 and the hero is wide, so `cover` scales it to fill the WIDTH exactly -- there is no horizontal slack, and background-position X does nothing. Only Y can choose the band. 60% drops the cropped "…YOU" fragment of the wall slogan and centres the chamber. (site-data's heroFocusX sets X only, so it is deliberately unset; setting it would overwrite this from JavaScript and silently do nothing useful.) */ .hero:not(.no-image) .bg-image { background-position: 50% 60%; } @media (max-width: 700px) { .hero:not(.no-image) .bg-image { background-position: 50% 52%; } } /* ── Times behind a sign-in ─────────────────────────────────────────────── The timetable is for customers. Anonymous visitors get this instead of the calendar — an invitation, not an error. */ .locked-times { text-align: center; padding: 34px 20px; border: 1px solid var(--border); border-radius: 16px; background: var(--panel); } .locked-times .ic { font-size: 30px; margin-bottom: 10px; opacity: .75; } .locked-times h3 { margin: 0 0 8px; font-size: 19px; color: var(--text); } .locked-times p { margin: 0 auto 20px; max-width: 360px; color: var(--muted); font-size: 14.5px; line-height: 1.65; } .locked-actions { display: flex; flex-direction: column; gap: 9px; align-items: center; } .locked-actions > * { width: 100%; max-width: 300px; box-sizing: border-box; } /* The sign-in buttons inherited WhatsApp's own green, which is the one colour on this page nobody chose — same treatment as the nav and contact buttons already got. The glyph stays recognisable; the fill belongs. */ .locked-actions .signin-wa, .book-page .signin-wa { background: var(--accent); color: var(--on-accent); border: 1px solid var(--accent); border-radius: 999px; padding: 13px 24px; font-weight: 700; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; } .locked-actions .signin-wa:hover, .book-page .signin-wa:hover { background: var(--accent-strong); border-color: var(--accent-strong); filter: none; } .locked-actions .signin-primary, .book-page .signin-primary { background: transparent; color: var(--accent); border: 1px solid var(--accent); border-radius: 999px; padding: 13px 24px; font-weight: 700; font-size: 15px; cursor: pointer; } .locked-actions .signin-primary:hover, .book-page .signin-primary:hover { background: var(--accent); color: var(--on-accent); } /* A per-visit price beside the treatment name — the intro visit is paid for, the package treatments are not priced per session. */ .svc-card-btn .svc-price { margin-inline-start: 8px; padding: 2px 8px; border-radius: 999px; background: var(--panel-2); color: var(--gold); font-size: 12.5px; font-weight: 700; } /* An approved customer's balance takes the price's place: same pill */ .svc-card-btn .svc-bal { margin-inline-start: 8px; padding: 2px 8px; border-radius: 999px; white-space: nowrap; background: var(--panel-2); color: var(--gold); font-size: 12.5px; font-weight: 700; } .svc-card-btn .svc-bal.zero { color: var(--muted); }