/* All display/body families used by the six theme families — loaded remotely (the factory loads per-family subsets via ; the DS loads the union). */ /* apna.live factory — one shared stylesheet, six theme families × three tones. Premium pass: glass pill nav, cinematic hero, bento services, stat band, layered tinted depth. Tokens keyed off . Motion: transform/opacity only. Reduced-motion gets a calm path. */ /* ---------- reset ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } /* keep anchored section titles clear of the fixed nav on jump/scroll */ [id] { scroll-margin-top: 5.5rem; } img { max-width: 100%; display: block; } a { color: inherit; } button, input, select, textarea { font: inherit; color: inherit; } /* ---------- base tokens ---------- */ :root { --radius: 16px; --radius-lg: 28px; --radius-sm: 10px; --space-1: .5rem; --space-2: 1rem; --space-3: 1.75rem; --space-4: 3.25rem; --space-5: 6.5rem; --scale: 1.27; /* type scale — matches the locked Care Dental sizing */ --fs-0: 1.02rem; --fs-1: calc(var(--fs-0) * var(--scale)); --fs-2: calc(var(--fs-1) * var(--scale)); --fs-3: calc(var(--fs-2) * var(--scale)); --fs-4: calc(var(--fs-3) * var(--scale)); --fs-5: calc(var(--fs-4) * var(--scale)); --dur: .8s; /* @kind other */ --ease: cubic-bezier(.22, 1, .36, 1); /* @kind other */ } /* ---------- THEME FAMILIES (each a distinct soul; hues per trade) ---------- */ /* A. Salon — "editorial beauty house": aubergine + blush + nude + gold leaf */ [data-theme="salon"] { --surface: #F7EEE8; --surface-2: #FFFFFF; --ink: #341F2C; --ink-soft: #6E5261; --primary: #57324B; --primary-deep: #3B2233; --accent: #B08D57; --support: #E3AFB4; --on-primary: #F9F1EA; --display: "DM Serif Display", Georgia, serif; /* @kind font */ --body: "Archivo", "Helvetica Neue", Arial, sans-serif; /* @kind font */ --display-tracking: .005em; --display-weight: 400; --shadow-tint: 87 50 75; --hero-scrim: linear-gradient(178deg, rgb(46 24 38 / .25) 0%, rgb(46 24 38 / .38) 45%, rgb(38 18 30 / .88) 100%); /* @kind color */ } /* B. Restaurant — "appetite first": warm cream + saffron + chili (light) */ [data-theme="restaurant"] { --surface: #FBF5EA; --surface-2: #FFFFFF; --ink: #33210E; --ink-soft: #7A6248; --primary: #E8A13D; --primary-deep: #8A5A16; --accent: #C2492F; --support: #EFDFC0; --on-primary: #241710; --display: "Fraunces", Georgia, serif; /* @kind font */ --body: "Karla", "Segoe UI", sans-serif; /* @kind font */ --display-tracking: -.01em; --display-weight: 600; --shadow-tint: 92 58 22; --hero-scrim: linear-gradient(178deg, rgb(18 9 5 / .3) 0%, rgb(18 9 5 / .42) 45%, rgb(18 9 5 / .92) 100%); /* @kind color */ } /* C. Clinic — "calm precision": sage + warm off-white + deep teal */ [data-theme="clinic"] { --surface: #FAF9F4; --surface-2: #FFFFFF; --ink: #1F3038; --ink-soft: #5A7079; --primary: #1F5F5B; --primary-deep: #143F3C; --accent: #3E8E7E; --support: #C9DAD2; --on-primary: #F5FAF8; --display: "Albert Sans", "Segoe UI", sans-serif; /* @kind font */ --body: "Albert Sans", "Segoe UI", sans-serif; /* @kind font */ --display-tracking: -.025em; --display-weight: 700; --shadow-tint: 31 95 91; --hero-scrim: linear-gradient(178deg, rgb(14 38 36 / .28) 0%, rgb(14 38 36 / .4) 45%, rgb(12 32 30 / .9) 100%); /* @kind color */ } /* D. Gym — "kinetic": clean light + copper/bronze strength */ [data-theme="gym"] { --surface: #F7F5F1; --surface-2: #FFFFFF; --ink: #1E1A14; --ink-soft: #6B6155; --primary: #B96F2E; --primary-deep: #7A4416; --accent: #E8C05A; --support: #EDE2CF; --on-primary: #FFF8EC; --display: "Anton", "Arial Narrow", sans-serif; /* @kind font */ --body: "Barlow", "Segoe UI", sans-serif; /* @kind font */ --display-tracking: .015em; --display-weight: 400; --radius: 10px; --radius-lg: 18px; --radius-sm: 7px; --shadow-tint: 122 68 22; --hero-scrim: linear-gradient(178deg, rgb(10 11 15 / .35) 0%, rgb(10 11 15 / .45) 45%, rgb(10 11 15 / .95) 100%); /* @kind color */ } /* E. Retail — "product-forward": warm paper + deep ink + brass */ [data-theme="retail"] { --surface: #F8F4EB; --surface-2: #FFFFFF; --ink: #2A241C; --ink-soft: #6E6353; --primary: #7A4A21; --primary-deep: #573312; --accent: #9A6A3F; --support: #A9B49B; --on-primary: #FAF5EC; --display: "Marcellus", "Times New Roman", serif; /* @kind font */ --body: "Mulish", "Segoe UI", sans-serif; /* @kind font */ --display-tracking: .015em; --display-weight: 400; --shadow-tint: 90 58 28; --hero-scrim: linear-gradient(178deg, rgb(35 26 16 / .28) 0%, rgb(35 26 16 / .4) 45%, rgb(30 22 13 / .9) 100%); /* @kind color */ } /* F. Services — "the work is the hero": slate + steel blue + amber proof */ [data-theme="services"], [data-theme="generic"] { --surface: #F3F5F7; --surface-2: #FFFFFF; --ink: #17242F; --ink-soft: #58697A; --primary: #2C6E91; --primary-deep: #1C4C67; --accent: #D9A441; --support: #8FA8B8; --on-primary: #F4F8FA; --display: "Bricolage Grotesque", "Segoe UI", sans-serif; /* @kind font */ --body: "Figtree", "Segoe UI", sans-serif; /* @kind font */ --display-tracking: -.025em; --display-weight: 700; --shadow-tint: 27 76 103; --hero-scrim: linear-gradient(178deg, rgb(12 27 38 / .3) 0%, rgb(12 27 38 / .42) 45%, rgb(10 24 34 / .92) 100%); /* @kind color */ } /* tinted, layered elevation derived per theme */ :root, [data-theme] { --shadow-1: 0 1px 2px rgb(var(--shadow-tint) / .08), 0 6px 20px rgb(var(--shadow-tint) / .09); --shadow-2: 0 2px 6px rgb(var(--shadow-tint) / .10), 0 24px 60px rgb(var(--shadow-tint) / .18); --ring: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); } /* ---------- tone modulation (never quality) ---------- */ [data-tone="budget"] { --scale: 1.26; --dur: .6s; } [data-tone="premium"] { --scale: 1.28; --dur: .95s; } /* ---------- page ---------- */ body { font-family: var(--body); background: var(--surface); color: var(--ink); line-height: 1.65; font-size: var(--fs-0); -webkit-font-smoothing: antialiased; } body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 4; opacity: .045; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); } .container { width: min(1160px, 92vw); margin-inline: auto; } .container.narrow { width: min(780px, 92vw); } .center { text-align: center; } h1, h2, h3, .wordmark { font-family: var(--display); font-weight: var(--display-weight); letter-spacing: var(--display-tracking); line-height: 1.06; } .section { padding-block: var(--space-4); position: relative; } /* section headers: eyebrow pill + big title */ .section-head { margin-bottom: var(--space-4); max-width: 40ch; } .eyebrow { display: inline-flex; align-items: center; gap: .5rem; /* Title Case, not SHOUTING. The tracking drops with it: .16em was set to open up all-caps, and at capitalize it just looks stretched. NOTE capitalize only raises the first letter of each word — it cannot pull "WHAT WE DO" back down, so any label stored in caps keeps shouting and has to be fixed in the data. */ font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: capitalize; color: var(--primary); background: color-mix(in srgb, var(--primary) 9%, transparent); border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent); padding: .38rem 1rem; border-radius: 999px; margin-bottom: 1.1rem; } [data-theme="restaurant"] .eyebrow, [data-theme="gym"] .eyebrow { background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary); } .eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 99px; background: var(--accent); } .section-title { font-size: var(--fs-3); text-wrap: balance; } .section-sub { margin-top: .8rem; color: var(--ink-soft); max-width: 52ch; } /* ---------- floating glass pill nav ---------- */ /* flat full-width nav overlaying the hero (branded deep tint, recolours per scheme) */ .topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 40; width: 100%; display: flex; align-items: center; gap: 1.6rem; padding: .85rem clamp(1.1rem, 4vw, 3rem); border-radius: 0; background: color-mix(in srgb, var(--primary-deep) 82%, transparent); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); border-bottom: 1px solid rgb(255 255 255 / .1); box-shadow: 0 6px 26px rgb(0 0 0 / .16); color: #fff; transition: background .35s var(--ease), box-shadow .35s var(--ease); } .topbar.scrolled { background: color-mix(in srgb, var(--primary-deep) 94%, transparent); } .wordmark { font-size: 1.22rem; text-decoration: none; color: #fff; display: inline-flex; align-items: center; gap: .6rem; } .wm-logo { width: 48px; height: 48px; flex: none; object-fit: contain; filter: drop-shadow(0 2px 5px rgb(0 0 0 / .35)); } .wordmark .wm-accent { color: var(--accent); } [data-theme="gym"] .wordmark .wm-accent { color: var(--primary); } .topnav { display: flex; gap: 1.5rem; margin-left: auto; } .topnav a { text-decoration: none; font-size: .92rem; font-weight: 600; opacity: .85; position: relative; color: #fff; } .topnav a::after { content: ""; position: absolute; left: 0; bottom: -5px; height: 2px; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); } .topnav a:hover::after, .topnav a:focus-visible::after { transform: scaleX(1); } .topnav a:hover { opacity: 1; } /* the page you're on keeps the underline up — same treatment as hover */ .topnav a[aria-current="page"] { opacity: 1; } .topnav a[aria-current="page"]::after { transform: scaleX(1); } .topcta { border-radius: 8px !important; } /* flat nav: squared CTA */ .nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: .5rem .7rem; } .nav-toggle span { display: block; width: 22px; height: 2px; background: #fff; margin: 5px 0; transition: transform .3s var(--ease), opacity .3s; } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; cursor: pointer; border: 0; padding: .78rem 1.7rem; border-radius: 999px; font-weight: 700; font-size: .98rem; line-height: 1.3; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease); will-change: transform; } .btn-lg { padding: 1rem 2.2rem; font-size: 1.05rem; } .btn-primary { background: var(--primary); color: var(--on-primary); box-shadow: 0 4px 14px color-mix(in srgb, var(--primary) 35%, transparent), inset 0 1px 0 rgb(255 255 255 / .18); } .btn-primary:hover, .btn-primary:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 30px color-mix(in srgb, var(--primary) 45%, transparent); } .btn-ghost { background: rgb(255 255 255 / .07); color: inherit; border: 1.5px solid color-mix(in srgb, currentColor 35%, transparent); backdrop-filter: blur(6px); } .btn-ghost:hover, .btn-ghost:focus-visible { transform: translateY(-2px); border-color: currentColor; } :focus-visible { outline: 2.5px solid var(--accent); outline-offset: 3px; border-radius: 4px; } /* ---------- HERO: cinematic full-bleed with floating layers ---------- */ .hero { position: relative; min-height: min(76svh, 760px); display: flex; align-items: flex-end; isolation: isolate; overflow: clip; } .hero-media { position: absolute; inset: 0; z-index: -1; } .hero-media img { width: 100%; height: 100%; object-fit: cover; } .hero-scrim { position: absolute; inset: 0; background: var(--hero-scrim); } .hero-content { width: min(1160px, 92vw); margin-inline: auto; padding: 6.5rem 0 clamp(2rem, 5vh, 3.5rem); color: #fff; position: relative; } .hero-eyebrow { display: inline-flex; align-items: center; gap: .55rem; font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: capitalize; background: rgb(255 255 255 / .12); border: 1px solid rgb(255 255 255 / .22); backdrop-filter: blur(8px); padding: .45rem 1.1rem; border-radius: 999px; margin-bottom: var(--space-3); } .hero-eyebrow .star { color: var(--accent); } [data-theme="gym"] .hero-eyebrow .star { color: var(--primary); } .hero-title { font-size: clamp(2.6rem, 6.5vw, 3.6rem); color: #fff; text-wrap: balance; max-width: 16ch; text-shadow: 0 2px 30px rgb(0 0 0 / .25); } [data-theme="gym"] .hero-title { text-transform: uppercase; max-width: 16ch; } .hero-sub { font-size: clamp(1.05rem, 1.6vw, 1.3rem); margin-top: var(--space-2); max-width: 44ch; color: rgb(255 255 255 / .85); text-wrap: balance; } .hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); } .hero .btn-ghost { color: #fff; } /* floating glass rating card (the layered-depth moment) */ .float-card { position: absolute; right: 0; bottom: clamp(2.5rem, 6vh, 4.5rem); display: flex; flex-direction: column; gap: .35rem; background: rgb(255 255 255 / .1); border: 1px solid rgb(255 255 255 / .22); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); border-radius: var(--radius-lg); padding: 1.3rem 1.7rem; box-shadow: 0 20px 60px rgb(0 0 0 / .3); color: #fff; } .float-card .fc-stars { color: var(--accent); font-size: 1.15rem; letter-spacing: .12em; } [data-theme="gym"] .float-card .fc-stars { color: var(--primary); } .float-card .fc-num { font-family: var(--display); font-size: 2.1rem; line-height: 1; } .float-card .fc-label { font-size: .8rem; opacity: .8; } /* floating service chips over hero */ .hero-chips { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: var(--space-3); } .hero-chips span { font-size: .84rem; font-weight: 600; background: rgb(255 255 255 / .1); border: 1px solid rgb(255 255 255 / .2); backdrop-filter: blur(8px); padding: .42rem 1rem; border-radius: 999px; } .sample-tag { position: absolute; top: 5.4rem; right: 1.2rem; z-index: 2; background: rgb(0 0 0 / .5); color: rgb(255 255 255 / .85); font-size: .7rem; padding: .32rem .8rem; border-radius: 999px; letter-spacing: .03em; border: 1px solid rgb(255 255 255 / .14); backdrop-filter: blur(6px); } .sample-tag.small { top: .6rem; right: .6rem; font-size: .6rem; padding: .18rem .55rem; } /* load orchestration */ .anim-1, .anim-2, .anim-3, .anim-4, .anim-5 { opacity: 0; transform: translateY(30px); animation: rise var(--dur) var(--ease) forwards; } .anim-1 { animation-delay: .12s; } .anim-2 { animation-delay: .28s; } .anim-3 { animation-delay: .46s; } .anim-4 { animation-delay: .64s; } .anim-5 { animation-delay: .85s; } @keyframes rise { to { opacity: 1; transform: none; } } .hero-media img { animation: heroin 1.6s var(--ease); transform-origin: center; } @keyframes heroin { from { transform: scale(1.07); opacity: .6; } to { transform: scale(1); opacity: 1; } } [data-theme="gym"] .hero-media img { animation-duration: .8s; } /* ---------- marquee (salon/gym signature) ---------- */ .marquee { overflow: hidden; padding-block: 1.05rem; background: var(--primary-deep); color: var(--on-primary); } [data-theme="salon"] .marquee { background: var(--primary-deep); color: #F3E3D3; } .marquee-track { display: flex; gap: 2.6rem; white-space: nowrap; width: max-content; animation: scroll 30s linear infinite; font-family: var(--display); text-transform: uppercase; letter-spacing: .16em; font-size: .92rem; } .marquee-dot { color: var(--accent); } @keyframes scroll { to { transform: translateX(-50%); } } /* ---------- about ---------- */ .about-wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--space-4); align-items: start; } .about-text { font-size: var(--fs-1); line-height: 1.6; max-width: 56ch; } .pull-quote { position: relative; background: var(--surface-2); border: var(--ring); border-radius: var(--radius-lg); padding: 2.2rem 2.2rem 1.8rem; box-shadow: var(--shadow-1); } .pull-quote::before { content: "“"; position: absolute; top: -.35em; left: .35em; font-family: var(--display); font-size: 5.5rem; color: var(--accent); opacity: .5; line-height: 1; } .pull-quote p { font-family: var(--display); font-size: var(--fs-1); line-height: 1.35; } .pull-quote cite { display: flex; align-items: center; gap: .6rem; margin-top: 1.2rem; font-style: normal; font-size: .88rem; color: var(--ink-soft); } .avatar { width: 34px; height: 34px; border-radius: 99px; flex: none; display: grid; place-items: center; background: color-mix(in srgb, var(--primary) 16%, transparent); color: var(--primary); font-weight: 800; font-size: .85rem; font-family: var(--body); } [data-theme="restaurant"] .avatar, [data-theme="gym"] .avatar { color: var(--primary); } /* ---------- services: bento grid, featured first card ---------- */ .service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; } .service-card { position: relative; overflow: clip; background: var(--surface-2); border: var(--ring); border-radius: var(--radius-lg); padding: 1.9rem; box-shadow: var(--shadow-1); transition: transform .35s var(--ease), box-shadow .35s var(--ease); display: flex; flex-direction: column; gap: .6rem; } .service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-2); } .service-card .svc-dot { width: 38px; height: 38px; border-radius: 12px; margin-bottom: .5rem; display: grid; place-items: center; font-size: 1.05rem; background: color-mix(in srgb, var(--primary) 10%, transparent); border: 1px solid color-mix(in srgb, var(--primary) 20%, transparent); } .service-card h3 { font-size: 1.28rem; } .service-card p { font-size: .95rem; color: var(--ink-soft); flex: 1; } .price { align-self: flex-start; font-weight: 800; font-size: .85rem; color: var(--primary); background: color-mix(in srgb, var(--primary) 9%, transparent); border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent); padding: .3rem .9rem; border-radius: 999px; } /* featured card: spans 2 cols, brand-color field */ .service-card.featured { grid-column: span 2; grid-row: span 1; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-deep) 100%); color: var(--on-primary); border: 0; box-shadow: 0 20px 50px color-mix(in srgb, var(--primary) 35%, transparent); } .service-card.featured::after { content: ""; position: absolute; right: -70px; top: -70px; width: 240px; height: 240px; border-radius: 99px; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 55%, transparent), transparent 70%); opacity: .55; pointer-events: none; } .service-card.featured h3 { font-size: var(--fs-2); } .service-card.featured p { color: color-mix(in srgb, var(--on-primary) 82%, transparent); } .service-card.featured .price { color: var(--on-primary); background: rgb(255 255 255 / .14); border-color: rgb(255 255 255 / .3); } .service-card.featured .svc-dot { background: rgb(255 255 255 / .13); border-color: rgb(255 255 255 / .25); } /* ---------- catalog (Catalog add-on) ---------- The full catalog is its own page (/catalog/), linked from a "Catalog" nav entry beside the services one; the services section itself is untouched. Category chips filter client-side; with a single group the chips are not rendered. */ /* Standalone sub-pages (catalog, SEO guides) have no hero, so their first section starts directly under the FIXED .topbar and its eyebrow/heading get clipped. Push it clear of the bar — on mobile the bar is a little shorter. */ .subpage main > .section:first-child { padding-top: calc(var(--space-4) + 4.6rem); } @media (max-width: 860px) { .subpage main > .section:first-child { padding-top: calc(var(--space-4) + 3.6rem); } } .cat-crumb { margin-top: .8rem; font-size: .9rem; } .cat-crumb a { color: var(--primary); font-weight: 600; } .cat-crumb a:hover { text-decoration: underline; } .cat-page-cta { margin-top: var(--space-4); padding: 1.4rem 1.5rem; border-radius: var(--radius-lg); background: var(--surface-2); border: var(--ring); display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; justify-content: space-between; } .cat-page-cta b { font-family: var(--display); } .cat-page-cta .btn { white-space: nowrap; } .cat-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: var(--space-3); } .cat-chip { font: inherit; font-size: .87rem; font-weight: 700; cursor: pointer; color: var(--ink-soft); background: var(--surface-2); border: var(--ring); border-radius: 999px; padding: .45rem 1.1rem; transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); } .cat-chip:hover { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 35%, transparent); } .cat-chip.is-on { color: var(--on-primary); background: var(--primary); border-color: var(--primary); } .cat-group[hidden] { display: none; } /* Separator between category blocks in the "All" view. `:not([hidden]) ~ :not([hidden])` means "a visible group with a visible group before it", so a filtered view showing one group never gets a stray rule above it. */ .cat-group:not([hidden]) ~ .cat-group:not([hidden]) { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); } .cat-group-title { font-size: 1.05rem; font-weight: 700; letter-spacing: .02em; text-transform: capitalize; color: var(--ink-soft); margin-bottom: 1.4rem; } .cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; } .cat-card { display: flex; flex-direction: column; overflow: clip; background: var(--surface-2); border: var(--ring); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); transition: transform .35s var(--ease), box-shadow .35s var(--ease); } .cat-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-2); } /* A product shot is usually a tall pouch/jar/box on white, and `cover` in a 4:3 box sliced the top and bottom off it — you could lose the brand name entirely. `contain` keeps the whole product; the tinted ground stops portrait shots reading as a hole in the card. Wide lifestyle photos still fill almost the full width. */ .cat-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: color-mix(in srgb, var(--ink) 4%, var(--surface-2)); } .cat-media img { width: 100%; height: 100%; object-fit: contain; display: block; padding: .5rem; } /* multiple photos: stack them and cross-fade between them via .on */ .cat-media .cat-img { position: absolute; inset: 0; opacity: 0; transition: opacity .3s var(--ease); } .cat-media .cat-img.on { opacity: 1; position: relative; } .cat-dots { position: absolute; left: 0; right: 0; bottom: .6rem; z-index: 2; display: flex; justify-content: center; gap: .35rem; } .cat-dot { width: 8px; height: 8px; padding: 0; border-radius: 50%; cursor: pointer; border: 1px solid rgb(255 255 255 / .85); background: rgb(0 0 0 / .25); transition: background .2s var(--ease), transform .2s var(--ease); } .cat-dot.on { background: #fff; transform: scale(1.25); } .cat-dot:hover { background: rgb(255 255 255 / .7); } /* no photo yet — a tinted field with the family glyph, so the grid stays even */ .cat-media.is-blank { display: grid; place-items: center; background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 12%, transparent), color-mix(in srgb, var(--accent) 14%, transparent)); } .cat-mark { font-size: 1.8rem; opacity: .55; } .cat-tag { position: absolute; top: .7rem; left: .7rem; font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--on-primary); background: color-mix(in srgb, var(--primary-deep) 85%, transparent); padding: .25rem .6rem; border-radius: 999px; } .cat-body { display: flex; flex-direction: column; gap: .45rem; padding: 1.2rem 1.3rem 1.35rem; flex: 1; } .cat-body h4 { font-size: 1.12rem; line-height: 1.3; } .cat-body p { font-size: .92rem; color: var(--ink-soft); flex: 1; } .cat-foot { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-top: .3rem; } .cat-cta { font: inherit; font-size: .85rem; font-weight: 700; color: var(--primary); white-space: nowrap; background: none; border: 0; padding: 0; cursor: pointer; } .cat-cta:hover { text-decoration: underline; } /* ---------- UPI Payments add-on ---------- */ /* Deliberately quieter than the enquiry CTA above it: for most local businesses the conversation still comes first, and a Pay button shouting over "Enquire" would push customers to transact before they've asked the question they came with. */ .cat-pay { display: block; margin-top: .55rem; text-align: center; font-size: .84rem; font-weight: 700; color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, transparent); border: 1px solid color-mix(in srgb, var(--primary) 20%, transparent); border-radius: 10px; padding: .5rem .8rem; text-decoration: none; } .cat-pay:hover { background: color-mix(in srgb, var(--primary) 14%, transparent); } /* The advance sits next to the price as a second pill, so "₹900 · ₹200 advance to book" reads as one fact about the service rather than an upsell bolted on. */ .svc-advance { align-self: flex-start; font-weight: 700; font-size: .76rem; color: var(--accent, var(--primary)); background: color-mix(in srgb, var(--accent, var(--primary)) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent, var(--primary)) 26%, transparent); padding: .22rem .7rem; border-radius: 999px; margin-top: -.15rem; } .service-card.featured .svc-advance { color: var(--on-primary); background: rgb(255 255 255 / .16); border-color: rgb(255 255 255 / .32); } /* Post-submit advance offer under the booking form. */ .form-pay { display: flex; flex-direction: column; gap: .45rem; margin-top: .9rem; } .form-pay .btn { align-self: flex-start; } .form-pay span { font-size: .8rem; color: var(--ink-soft); } /* ---------- storefront: cart, cart sheet, checkout (Catalog add-on) ---------- */ .cat-add { display: block; width: 100%; margin-top: .55rem; font: inherit; font-size: .86rem; font-weight: 800; cursor: pointer; color: var(--on-primary); background: var(--primary); border: 1px solid var(--primary); border-radius: 10px; padding: .55rem .8rem; } .cat-add:hover { background: var(--primary-deep); border-color: var(--primary-deep); } .cat-add.is-in { background: var(--accent, var(--primary)); border-color: var(--accent, var(--primary)); } /* Sticky bar — only rendered once something is in the cart. */ .cart-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: .8rem clamp(1rem, 4vw, 2rem); display: flex; justify-content: center; background: linear-gradient(to top, var(--bg) 55%, transparent); pointer-events: none; } .cart-open { pointer-events: auto; display: flex; align-items: center; gap: .8rem; font: inherit; width: min(30rem, 100%); cursor: pointer; border: 0; border-radius: 999px; padding: .85rem 1.3rem; color: var(--on-primary); background: var(--primary-deep); box-shadow: 0 12px 30px color-mix(in srgb, var(--primary) 40%, transparent); } .cart-open .cb-n { flex: none; min-width: 1.65rem; height: 1.65rem; border-radius: 999px; display: grid; place-items: center; font-weight: 800; font-size: .82rem; background: rgb(255 255 255 / .22); } .cart-open .cb-l { flex: 1; text-align: left; font-weight: 800; font-size: .95rem; } .cart-open .cb-t { font-weight: 800; font-size: 1rem; } .cart-scrim { position: fixed; inset: 0; z-index: 70; background: rgb(0 0 0 / .45); } .cart-sheet { position: fixed; z-index: 80; right: 0; top: 0; bottom: 0; width: min(26rem, 100%); background: var(--surface, #fff); color: var(--ink); display: flex; flex-direction: column; box-shadow: -18px 0 50px rgb(0 0 0 / .25); } @media (max-width: 640px) { /* On a phone a bottom sheet is reachable with a thumb; a full-height side panel is not. */ .cart-sheet { top: auto; left: 0; width: auto; max-height: 92vh; border-radius: 20px 20px 0 0; } } body.cart-on { overflow: hidden; } .cs-head { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.3rem; border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); } .cs-head h3 { flex: 1; margin: 0; font-size: 1.1rem; } .cs-x { font: inherit; font-size: 1.1rem; background: none; border: 0; cursor: pointer; color: var(--ink-soft); } .cs-body { flex: 1; overflow-y: auto; padding: 1.1rem 1.3rem 1.6rem; } .cs-empty { color: var(--ink-soft); font-size: .92rem; } .cs-line { display: flex; align-items: center; gap: .7rem; padding: .65rem 0; border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); } .cl-n { flex: 1; font-size: .92rem; font-weight: 700; line-height: 1.35; } .cl-n span { display: block; font-weight: 400; font-size: .78rem; color: var(--ink-soft); } .cl-q { display: flex; align-items: center; gap: .1rem; flex: none; } .cl-q button { width: 1.8rem; height: 1.8rem; font: inherit; font-size: 1rem; font-weight: 800; cursor: pointer; border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent); background: none; color: var(--ink); border-radius: 8px; } .cl-q b { min-width: 1.7rem; text-align: center; font-size: .92rem; } .cl-t { flex: none; min-width: 3.6rem; text-align: right; font-weight: 800; font-size: .92rem; } .cs-total { display: flex; justify-content: space-between; align-items: baseline; padding: .9rem 0 .2rem; font-size: 1.05rem; } .cs-total b { font-size: 1.25rem; color: var(--primary); } .cs-form { margin-top: 1rem; display: grid; gap: .7rem; } .cs-form label { display: block; font-size: .8rem; font-weight: 700; color: var(--ink-soft); } .cs-form .cs-opt { font-weight: 400; } .cs-form input[type=text], .cs-form input:not([type]), .cs-form textarea { width: 100%; margin-top: .25rem; font: inherit; font-size: .95rem; color: var(--ink); padding: .6rem .75rem; border-radius: 10px; background: var(--bg); border: 1.5px solid color-mix(in srgb, var(--ink) 14%, transparent); } .cs-ful { display: flex; gap: .5rem; } .cs-radio { flex: 1; display: flex; align-items: center; gap: .45rem; cursor: pointer; border: 1.5px solid color-mix(in srgb, var(--ink) 14%, transparent); border-radius: 10px; padding: .55rem .7rem; font-size: .9rem; color: var(--ink); font-weight: 700; } .cs-radio input { accent-color: var(--primary); } .cs-err { min-height: 1.1em; margin: 0; font-size: .85rem; color: #b3402e; } .cs-go { font: inherit; font-size: 1rem; font-weight: 800; cursor: pointer; width: 100%; padding: .9rem; border: 0; border-radius: 12px; color: var(--on-primary); background: var(--primary); } .cs-go:disabled { opacity: .65; cursor: progress; } .cs-fine { margin: 0; font-size: .78rem; line-height: 1.55; color: var(--ink-soft); } /* `hidden` is how every element above is closed, and a display: value beats the browser's default [hidden] rule — without this the "closed" sheet still covers the page and eats taps meant for the catalog behind it. Scoped rather than a global [hidden] override so it can't surprise anything else on the page. */ .cart-bar[hidden], .cart-scrim[hidden], .cart-sheet[hidden], .cs-form[hidden], .cs-total[hidden], .cs-empty[hidden], .cs-form label[hidden] { display: none; } /* ---------- enquiry popup (catalog page) ---------- */ .enq-back { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 1.2rem; background: rgb(0 0 0 / .45); backdrop-filter: blur(3px); } .enq-back[hidden] { display: none; } .enq { position: relative; width: min(440px, 100%); max-height: 90svh; overflow-y: auto; background: var(--surface); border: var(--ring); border-radius: var(--radius-lg); box-shadow: var(--shadow-2); padding: 1.8rem 1.7rem 1.6rem; } .enq h3 { font-family: var(--display); font-size: 1.5rem; margin: .1rem 0 .3rem; } .enq-item { font-weight: 700; color: var(--primary); margin-bottom: 1.1rem; background: color-mix(in srgb, var(--primary) 9%, transparent); border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent); padding: .4rem .9rem; border-radius: 999px; display: inline-block; font-size: .9rem; } .enq-close { position: absolute; top: .8rem; right: .9rem; width: 30px; height: 30px; padding: 0; border-radius: 50%; border: var(--ring); background: var(--surface-2); color: var(--ink-soft); font-size: .8rem; cursor: pointer; line-height: 1; } .enq-close:hover { color: var(--ink); } .enq-form { display: flex; flex-direction: column; gap: .7rem; } .enq-form label { display: flex; flex-direction: column; gap: .3rem; font-size: .85rem; font-weight: 600; } .enq-form .opt { font-weight: 400; color: var(--ink-soft); } .enq-form input, .enq-form textarea { font: inherit; font-size: .95rem; padding: .7rem .9rem; border-radius: var(--radius); border: var(--ring); background: var(--surface-2); color: var(--ink); resize: vertical; } .enq-form input:focus, .enq-form textarea:focus { outline: 2px solid var(--primary); outline-offset: 1px; } .enq-form .btn { margin-top: .3rem; } /* flip cards: the white cards turn over on hover to a brand-colour back with the price + booking nudge. Front/back share one grid cell so the card keeps its natural height. */ .service-card.flip { padding: 0; background: transparent; border: 0; overflow: visible; perspective: 1100px; } .service-card.flip:hover { transform: none; box-shadow: none; } .svc-inner { display: grid; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .65s cubic-bezier(.3, .7, .25, 1); } .service-card.flip:hover .svc-inner, .service-card.flip:focus-within .svc-inner { transform: rotateY(180deg); } .svc-face { grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: var(--radius-lg); padding: 1.9rem; display: flex; flex-direction: column; gap: .6rem; } .svc-front { background: var(--surface-2); border: var(--ring); box-shadow: var(--shadow-1); } .svc-front p { flex: 1; } .svc-back { transform: rotateY(180deg); background: linear-gradient(135deg, var(--primary), var(--primary-deep)); color: #fff; justify-content: center; align-items: flex-start; position: relative; overflow: clip; } .svc-back h3 { color: #fff; } .svc-back .price { color: #fff; background: rgb(255 255 255 / .16); border: 1px solid rgb(255 255 255 / .3); } .svc-back-mark { position: absolute; top: -.6rem; right: .9rem; font-family: var(--display); font-size: 6rem; line-height: 1; color: #fff; opacity: .14; pointer-events: none; } .svc-back-cta { margin-top: .4rem; font-weight: 800; font-size: .95rem; color: #fff; border-bottom: 2px solid color-mix(in srgb, var(--accent) 80%, #fff); padding-bottom: .15rem; transition: letter-spacing .3s var(--ease); } .svc-back-cta:hover { letter-spacing: .03em; } @media (prefers-reduced-motion: reduce) { .svc-inner { transition: none; } .service-card.flip:hover .svc-inner, .service-card.flip:focus-within .svc-inner { transform: none; } } /* ---------- stat band (specialties/trust) ---------- */ .statband { background: linear-gradient(135deg, var(--primary-deep), var(--primary)); color: var(--on-primary); border-radius: var(--radius-lg); padding: clamp(2.2rem, 5vw, 3.6rem) clamp(2.2rem, 5vw, 4rem); position: relative; overflow: clip; box-shadow: 0 24px 70px color-mix(in srgb, var(--primary) 32%, transparent); display: flex; align-items: center; justify-content: space-between; gap: clamp(1.8rem, 5vw, 4rem); flex-wrap: wrap; } .statband::before { content: ""; position: absolute; left: -80px; bottom: -120px; width: 340px; height: 340px; border-radius: 99px; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 60%, transparent), transparent 70%); opacity: .45; pointer-events: none; } .statband::after { content: ""; position: absolute; right: -90px; top: -110px; width: 300px; height: 300px; border-radius: 99px; background: radial-gradient(circle, rgb(255 255 255 / .16), transparent 70%); pointer-events: none; } .trust-strip { display: flex; flex-wrap: wrap; position: relative; flex: 1; gap: 0; min-width: 0; } .trust-item { flex: 1; min-width: 130px; padding-inline: clamp(1.2rem, 3vw, 2.6rem); border-left: 1px solid color-mix(in srgb, var(--on-primary) 22%, transparent); } .trust-item:first-child { border-left: 0; padding-left: 0; } .trust-item p { font-size: .88rem; opacity: .82; margin-top: .35rem; max-width: 18ch; } .trust-num, .trust-suffix { font-family: var(--display); font-size: clamp(2.6rem, 5vw, 4.2rem); line-height: 1; } .trust-suffix { color: var(--accent); } /* right side of the band: turn dead space into a conversion nudge */ .statband-cta { position: relative; flex: none; text-align: center; display: flex; flex-direction: column; gap: .8rem; align-items: center; } .statband-cta .sb-line { font-family: var(--display); font-weight: var(--display-weight); font-size: var(--fs-1); max-width: 14ch; line-height: 1.25; text-wrap: balance; } .statband-cta .sb-btn { background: var(--on-primary); color: var(--primary); box-shadow: 0 10px 28px rgb(0 0 0 / .22); } .statband-cta .sb-btn:hover { transform: translateY(-2px); } @media (max-width: 1020px) { .statband { flex-direction: column; align-items: stretch; } .statband-cta { align-items: flex-start; text-align: left; } .trust-item { min-width: 110px; } } .chips { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem; margin-top: var(--space-3); position: relative; } .chip { background: rgb(255 255 255 / .1); border: 1px solid rgb(255 255 255 / .22); padding: .5rem 1.2rem; border-radius: 999px; font-size: .9rem; font-weight: 600; } /* ---------- gallery: uniform 4/3 grid (matches the locked Care Dental design) ---------- */ /* MASONRY. The grid used to force every photo into a 4:3 landscape tile and crop with object-fit: cover. Most photographs a shop actually sends are portrait phone shots (3:4) — measured on a live site, 6 of 7 gallery images were losing 44% of themselves, top and bottom, including the part with the product in it. Columns let every photo keep its own proportions and crop nothing. The carousel variant (.gal-track) keeps fixed tiles below, because a slider needs uniform ones. */ .gallery-grid { columns: 3; column-gap: var(--space-2); } .gallery-item { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-1); background: color-mix(in srgb, var(--ink) 6%, transparent); } .gallery-grid .gallery-item { break-inside: avoid; -webkit-column-break-inside: avoid; margin-bottom: var(--space-2); display: block; width: 100%; } .gallery-grid .gallery-item img { height: auto; aspect-ratio: auto; } @media (max-width: 900px) { .gallery-grid { columns: 2; } } @media (max-width: 520px) { .gallery-grid { columns: 2; column-gap: .6rem; } } /* the carousel still needs a fixed tile shape */ .gal-track .gallery-item { aspect-ratio: 4/3; } .gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); } .gallery-item:hover img { transform: scale(1.045); } .attribution { position: absolute; bottom: 0; inset-inline: 0; font-size: .62rem; padding: .3rem .7rem; background: rgb(0 0 0 / .55); color: rgb(255 255 255 / .9); backdrop-filter: blur(4px); } /* "Sample image" stamp on AI placeholder tiles (swapped for the owner's real photos) */ .gallery-item.is-sample img { filter: saturate(.96); } .sample-watermark { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-16deg); font-weight: 800; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: rgb(255 255 255 / .92); background: rgb(0 0 0 / .34); padding: .34rem 1rem; border-radius: 6px; border: 1px solid rgb(255 255 255 / .4); backdrop-filter: blur(2px); pointer-events: none; white-space: nowrap; z-index: 2; } /* gallery slider — replaces the grid when there are more than 6 photos. 3×2 page: column-flow stacks 2 rows per column, 3 columns visible = 6 photos. */ .gal-track { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, 1fr); grid-auto-columns: calc((100% - 2 * var(--space-2)) / 3); gap: var(--space-2); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: .4rem; } .gal-track::-webkit-scrollbar { display: none; } .gal-track .gallery-item { scroll-snap-align: start; } .gal-dots { display: flex; gap: .45rem; justify-content: center; margin-top: 1rem; } .gal-dot { width: 8px; height: 8px; border-radius: 999px; border: 0; padding: 0; cursor: pointer; background: color-mix(in srgb, var(--ink) 18%, transparent); transition: width .35s var(--ease), background .35s; } .gal-dot.on { width: 24px; background: var(--primary); } @media (max-width: 900px) { .gal-track { grid-auto-columns: calc((100% - var(--space-2)) / 2); } } /* mobile: keep the 2-row strip (was 1 big image at 82%) so several photos show at once with a peek of the next — swipe horizontally through the rest. */ @media (max-width: 560px) { .gal-track { grid-auto-columns: 45%; } } /* ---------- Instagram (Instagram-only leads) ---------- */ .ig-head .ig-handle { color: var(--primary); text-decoration: none; } .ig-head .ig-handle:hover { text-decoration: underline; } .ig-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-2); margin-bottom: var(--space-3); } .ig-tile { position: relative; aspect-ratio: 1/1; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-1); background: color-mix(in srgb, var(--ink) 6%, transparent); display: block; } .ig-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); } .ig-tile:hover img { transform: scale(1.06); } .ig-overlay { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, rgb(214 41 118 / .55), rgb(150 47 191 / .55)); opacity: 0; transition: opacity .35s var(--ease); } .ig-tile:hover .ig-overlay { opacity: 1; } .ig-cta { text-align: center; } /* ---------- hours ---------- */ .hours-card { background: var(--surface-2); border: var(--ring); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); padding: clamp(1.6rem, 4vw, 2.6rem); } .hours-table { width: 100%; border-collapse: collapse; } .hours-table td { padding: .8rem .4rem; border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); } .hours-table tr:last-child td { border-bottom: 0; } .hours-day { font-weight: 700; text-transform: capitalize; } .hours-table td:last-child { text-align: right; color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; } /* ---------- reviews: featured + grid ---------- */ .review-layout { display: grid; grid-template-columns: 1.15fr .85fr; gap: 1.3rem; } .review-featured { background: var(--surface-2); border: var(--ring); border-radius: var(--radius-lg); box-shadow: var(--shadow-2); padding: clamp(1.8rem, 4vw, 2.8rem); display: flex; flex-direction: column; gap: 1rem; position: relative; overflow: clip; } .review-featured::after { content: ""; position: absolute; right: -60px; bottom: -80px; width: 220px; height: 220px; border-radius: 99px; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 26%, transparent), transparent 70%); pointer-events: none; } .review-featured p { font-family: var(--display); font-size: var(--fs-2); line-height: 1.28; text-wrap: balance; } .review-side { display: flex; flex-direction: column; gap: 1.3rem; } .review-card { background: var(--surface-2); border: var(--ring); border-radius: var(--radius); padding: 1.4rem 1.6rem; box-shadow: var(--shadow-1); display: flex; flex-direction: column; gap: .5rem; flex: 1; transition: transform .3s var(--ease), box-shadow .3s var(--ease); } .review-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); } .stars { color: var(--accent); letter-spacing: .14em; font-size: .95rem; } [data-theme="clinic"] .stars, [data-theme="services"] .stars { color: var(--accent); } .review-card p { font-size: .95rem; flex: 1; color: var(--ink-soft); } .review-card cite, .review-featured cite { font-style: normal; font-size: .85rem; display: flex; align-items: center; gap: .6rem; color: var(--ink-soft); } .g-badge { font-size: .7rem; font-weight: 800; letter-spacing: .06em; opacity: .55; } /* ---------- booking: split card ---------- */ .booking-split { display: grid; grid-template-columns: .9fr 1.1fr; border-radius: var(--radius-lg); overflow: clip; box-shadow: 0 30px 70px -24px color-mix(in srgb, var(--primary-deep) 55%, transparent), var(--shadow-2); border: var(--ring); } .booking-info { /* deep end of the brand gradient + fixed white text: several families' --on-primary is dark and unreadable on the saturated mid-tones */ background: linear-gradient(160deg, color-mix(in srgb, var(--primary) 62%, var(--primary-deep)), var(--primary-deep)); color: #fff; padding: clamp(1.8rem, 4vw, 3rem); display: flex; flex-direction: column; gap: 1rem; position: relative; overflow: clip; } .booking-info::after { content: ""; position: absolute; left: -60px; bottom: -100px; width: 280px; height: 280px; border-radius: 99px; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 55%, transparent), transparent 70%); opacity: .5; pointer-events: none; } .booking-info h3 { font-size: var(--fs-2); color: inherit; } .booking-info p { opacity: .85; font-size: .98rem; } .booking-points { list-style: none; display: flex; flex-direction: column; gap: .7rem; margin-top: .4rem; position: relative; } .booking-points li { display: flex; gap: .7rem; font-size: .95rem; align-items: baseline; } .booking-points li::before { content: "✓"; font-weight: 800; color: rgb(255 255 255 / .95); } /* single centered divider heading — line · text · line — used where two same-background sections should read as one continuous area */ .section.booking { padding-top: var(--space-2); } /* FAQ heading stays on one line (balance was splitting short titles) */ .faq .section-head { max-width: none; } .faq .section-title, .gallery .section-title { text-wrap: nowrap; } @media (max-width: 700px) { .faq .section-title, .gallery .section-title { text-wrap: balance; } } .divider-head { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2rem); margin-bottom: var(--space-3); text-align: center; } .divider-head::before, .divider-head::after { content: ""; flex: 1; height: 1px; background: color-mix(in srgb, var(--ink) 16%, transparent); } .divider-head span { font-family: var(--display); font-weight: var(--display-weight); letter-spacing: var(--display-tracking); font-size: var(--fs-2); color: var(--ink); text-wrap: balance; } /* trust chip + hours line fill the panel's middle instead of dead space */ .booking-trust { margin-top: auto; position: relative; display: flex; align-items: center; gap: .9rem; background: rgb(255 255 255 / .1); border: 1px solid rgb(255 255 255 / .18); border-radius: var(--radius); padding: .95rem 1.15rem; backdrop-filter: blur(6px); color: inherit; text-decoration: none; transition: background .15s, border-color .15s; } a.booking-trust:hover { background: rgb(255 255 255 / .16); border-color: rgb(255 255 255 / .32); } .booking-trust .bt-stars { flex: none; color: var(--accent); letter-spacing: .12em; font-size: 1.05rem; } .booking-trust p { margin: 0; font-size: .92rem; line-height: 1.45; opacity: .95; } .reviews-google-link { color: var(--primary); font-weight: 700; text-decoration: none; white-space: nowrap; } .reviews-google-link:hover { text-decoration: underline; } .booking-hours { display: flex; align-items: center; gap: .6rem; position: relative; font-size: .92rem; opacity: .85; padding-inline: .2rem; } .booking-hours svg { flex: none; opacity: .8; } .booking-hours p { margin: 0; text-transform: capitalize; } .booking-alt { padding-top: 1rem; font-size: .92rem; opacity: .95; position: relative; border-top: 1px solid rgb(255 255 255 / .15); } .booking-alt a { color: inherit; font-weight: 700; } .booking-formwrap { background: var(--surface-2); padding: clamp(1.8rem, 4vw, 3rem); } .booking-form { display: flex; flex-direction: column; gap: 1.1rem; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; } .booking-form label { display: flex; flex-direction: column; gap: .4rem; font-size: .86rem; font-weight: 700; } .booking-form input, .booking-form select, .booking-form textarea { padding: .85rem 1rem; border-radius: var(--radius-sm); border: 1.5px solid color-mix(in srgb, var(--ink) 16%, transparent); background: color-mix(in srgb, var(--surface) 55%, var(--surface-2)); font-weight: 500; transition: border-color .2s, box-shadow .2s; } .booking-form input:focus, .booking-form select:focus, .booking-form textarea:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent); } .hp-field { position: absolute !important; left: -9999px !important; height: 0; width: 0; opacity: 0; } .form-status { min-height: 1.4em; font-weight: 700; } .form-status.ok { color: var(--primary); } .form-status.err { color: #C0392B; } [data-theme="restaurant"] .form-status.ok, [data-theme="gym"] .form-status.ok { color: var(--primary); } /* ---------- contact / map ---------- */ .contact-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 1.3rem; align-items: stretch; } .contact-info { background: var(--surface-2); border: var(--ring); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); padding: clamp(1.8rem, 4vw, 2.6rem); display: flex; flex-direction: column; gap: .4rem; } .contact-addr { font-family: var(--display); font-size: var(--fs-1); line-height: 1.35; margin-bottom: 1rem; max-width: 26ch; } .contact-link { display: flex; align-items: center; gap: .8rem; padding: .8rem 0; text-decoration: none; font-weight: 700; color: inherit; border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); transition: gap .25s var(--ease), color .2s; } .contact-link:last-child { border-bottom: 0; } .contact-link:hover { gap: 1.1rem; color: var(--primary); } .contact-link .cl-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; background: color-mix(in srgb, var(--primary) 10%, transparent); border: 1px solid color-mix(in srgb, var(--primary) 20%, transparent); } .map-card { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; border-radius: var(--radius-lg); overflow: clip; text-decoration: none; text-align: center; background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 60%), radial-gradient(circle at 75% 70%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 55%), var(--surface-2); border: var(--ring); box-shadow: var(--shadow-1); min-height: 300px; transition: transform .3s var(--ease), box-shadow .3s var(--ease); } .map-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); } .map-card::before, .map-card::after { content: ""; position: absolute; border-radius: 99px; border: 1.5px solid color-mix(in srgb, var(--primary) 22%, transparent); } .map-card::before { width: 130px; height: 130px; } .map-card::after { width: 210px; height: 210px; opacity: .5; } .map-pin { font-size: 2rem; position: relative; z-index: 1; } .map-card p { font-weight: 700; font-family: var(--display); font-size: 1.25rem; position: relative; z-index: 1; } .map-hint { font-size: .85rem; color: var(--primary); font-weight: 700; position: relative; z-index: 1; } /* ---------- final CTA band ---------- */ .cta-final { padding-block: var(--space-1) var(--space-4); } .cta-band { position: relative; overflow: clip; text-align: center; border-radius: var(--radius-lg); background: linear-gradient(140deg, var(--primary-deep) 0%, var(--primary) 60%); color: var(--on-primary); padding: clamp(3rem, 8vw, 5.5rem) clamp(1.5rem, 5vw, 4rem); box-shadow: 0 30px 80px color-mix(in srgb, var(--primary) 38%, transparent); } .cta-band::before { content: ""; position: absolute; left: 50%; top: -160px; transform: translateX(-50%); width: 560px; height: 380px; border-radius: 99px; background: radial-gradient(ellipse, color-mix(in srgb, var(--accent) 55%, transparent), transparent 70%); opacity: .5; pointer-events: none; } .cta-title { font-size: clamp(2rem, 5vw, var(--fs-4)); position: relative; text-wrap: balance; } .cta-sub { margin: 1rem auto var(--space-3); opacity: .88; max-width: 44ch; position: relative; } .cta-band .hero-actions { justify-content: center; position: relative; } .cta-band .btn-primary { background: var(--on-primary); color: var(--primary-deep); box-shadow: 0 8px 30px rgb(0 0 0 / .25); } .cta-band .btn-ghost { color: var(--on-primary); } /* ---------- footer: brand + explore + contact + social ---------- */ .footer { position: relative; overflow: clip; background: var(--primary-deep); color: rgb(255 255 255 / .88); padding: clamp(2.6rem, 6vw, 4rem) clamp(1.2rem, 4vw, 3rem); margin-top: var(--space-4); } .footer::before { content: ""; position: absolute; right: -120px; top: -140px; width: 380px; height: 380px; border-radius: 99px; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 40%, transparent), transparent 70%); opacity: .25; pointer-events: none; } .footer-inner { width: min(1160px, 100%); margin-inline: auto; position: relative; display: grid; grid-template-columns: 1.6fr 1fr 1.1fr auto; gap: clamp(1.8rem, 4vw, 3.5rem); align-items: start; } .f-brand .wordmark { font-size: 1.35rem; } .f-brand .wm-logo { width: 56px; height: 56px; } .f-tag { font-size: .95rem; opacity: .75; margin-top: .9rem; max-width: 34ch; line-height: 1.55; } .footer-addr { display: flex; gap: .55rem; align-items: flex-start; font-size: .9rem; opacity: .7; max-width: 36ch; margin-top: .8rem; line-height: 1.5; } .footer-addr svg { flex: none; margin-top: .18em; } .f-col h4 { font-family: var(--body); font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: capitalize; color: rgb(255 255 255 / .55); margin-bottom: 1rem; } .f-col a { display: flex; align-items: center; gap: .55rem; text-decoration: none; font-size: .95rem; font-weight: 600; color: rgb(255 255 255 / .85); padding-block: .32rem; transition: color .2s, transform .2s var(--ease); } .f-col a:hover { color: #fff; transform: translateX(3px); } .f-col a svg { flex: none; opacity: .75; } .f-social-row { display: flex; gap: .6rem; } .f-social-row a { width: 40px; height: 40px; border-radius: 999px; padding: 0; display: grid; place-items: center; background: rgb(255 255 255 / .1); border: 1px solid rgb(255 255 255 / .18); transition: background .25s, transform .25s var(--ease), border-color .25s; } .f-social-row a:hover { background: var(--primary); border-color: var(--primary); transform: translateY(-3px); color: #fff; } @media (max-width: 900px) { .footer-inner { grid-template-columns: 1fr 1fr; } .f-brand { grid-column: 1 / -1; } } .preview-note { width: min(1160px, 100%); margin: var(--space-3) auto 0; padding-top: 1.2rem; border-top: 1px solid rgb(255 255 255 / .12); font-size: .78rem; opacity: .55; } .preview-note a { color: inherit; } /* ---------- premium motion pass (modern-web-design patterns) ---------- */ /* staggered word reveal on the hero title */ .hero-title.split { opacity: 1 !important; animation: none !important; transform: none !important; } .hero-title .hw { display: inline-block; opacity: 0; transform: translateY(.55em) rotate(1.2deg); animation: hw-rise .75s var(--ease) forwards; } @keyframes hw-rise { to { opacity: 1; transform: none; } } /* thin brand progress bar along the top */ .scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; background: linear-gradient(90deg, var(--primary), var(--accent)); transform: scaleX(0); transform-origin: left; pointer-events: none; } /* hero parallax is driven inline by site.js; keep the img GPU-composited */ .hero-media img { will-change: transform; } /* hero "curtain close": hero pins under the page; content slides over it while site.js scrubs a pinch (scale + radius + dim). Transform/opacity only. */ .hero { position: sticky; top: 0; will-change: transform; } .hero-content { z-index: 1; } .hero-dim { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: rgb(7 9 11); opacity: 0; } /* everything after the hero sits in one opaque layer over the pinned hero, so reveal-shift gaps between sections can never flash the hero through */ .page-body { position: relative; z-index: 2; background: var(--surface); } .marquee, .section, .cta-final, .footer, .expiry-marquee { position: relative; z-index: 2; } .section { background: var(--surface); } .cta-final { background: var(--surface); } .footer { margin-top: 0; } /* micro-interactions: satisfying press */ .btn:active, .topcta:active, .rev-arrow:active { transform: scale(.96); } /* image fade-in on load (JS-applied; no-JS pages stay fully visible) */ img.img-fade { opacity: 0; transition: opacity .55s var(--ease); } img.img-fade.loaded { opacity: 1; } /* FX mode: GSAP owns motion — don't compound with CSS fades/zoom */ .fx-on img.img-fade { transition: none; } .fx-on .hero-media img { animation: none; } /* marquee pauses on hover so it can be read */ .marquee:hover .marquee-track, .expiry-marquee:hover .marquee-track { animation-play-state: paused; } /* ---------- floating WhatsApp button ---------- */ .wa-float { position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 45; width: 56px; height: 56px; border-radius: 999px; background: #25D366; display: grid; place-items: center; box-shadow: 0 8px 26px rgb(0 0 0 / .3); transition: transform .25s var(--ease), box-shadow .25s var(--ease); } .wa-float:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 14px 34px rgb(0 0 0 / .35); } body:has(.expiry-marquee) .wa-float { bottom: 3.6rem; } /* floating call button, stacked above WhatsApp */ .call-float { position: fixed; right: 1.2rem; bottom: calc(1.2rem + 68px); z-index: 45; width: 56px; height: 56px; border-radius: 999px; background: var(--primary); color: var(--on-primary); display: grid; place-items: center; box-shadow: 0 8px 26px rgb(0 0 0 / .3); transition: transform .25s var(--ease), box-shadow .25s var(--ease); } .call-float:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 14px 34px rgb(0 0 0 / .35); } body:has(.expiry-marquee) .call-float { bottom: calc(3.6rem + 68px); } @media (max-width: 860px) { .wa-float { width: 50px; height: 50px; bottom: 4.6rem; } body:has(.expiry-marquee) .wa-float { bottom: 7rem; } .call-float { width: 50px; height: 50px; bottom: calc(4.6rem + 62px); } body:has(.expiry-marquee) .call-float { bottom: calc(7rem + 62px); } } /* ---------- gallery lightbox ---------- */ .lightbox { position: fixed; inset: 0; z-index: 60; display: none; align-items: center; justify-content: center; background: rgb(0 0 0 / .88); padding: 2.5rem; cursor: zoom-out; } .lightbox.open { display: flex; } .lightbox img { max-width: 94vw; max-height: 90vh; width: auto; height: auto; border-radius: 10px; box-shadow: 0 30px 90px rgb(0 0 0 / .6); } .lightbox-close { position: absolute; top: 1rem; right: 1.2rem; background: none; border: 0; color: #fff; font-size: 2.4rem; line-height: 1; cursor: pointer; opacity: .8; } .lightbox-close:hover { opacity: 1; } .lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 999px; border: 1px solid rgb(255 255 255 / .35); background: rgb(255 255 255 / .1); color: #fff; font-size: 1.6rem; line-height: 1; display: grid; place-items: center; cursor: pointer; transition: background .25s, transform .25s; } .lightbox-nav:hover { background: rgb(255 255 255 / .22); transform: translateY(-50%) scale(1.06); } .lightbox-nav.prev { left: 1.2rem; } .lightbox-nav.next { right: 1.2rem; } .lightbox-count { position: absolute; bottom: 1.1rem; left: 50%; transform: translateX(-50%); color: rgb(255 255 255 / .85); font-size: .85rem; letter-spacing: .06em; background: rgb(0 0 0 / .4); padding: .3rem .9rem; border-radius: 999px; } @media (max-width: 640px) { .lightbox { padding: 1rem; } .lightbox-nav { width: 42px; height: 42px; } .lightbox-nav.prev { left: .5rem; } .lightbox-nav.next { right: .5rem; } } /* ---------- expiry marquee (free/preview sites only) ---------- */ .expiry-marquee { position: fixed; bottom: 0; left: 0; right: 0; z-index: 35; overflow: hidden; padding-block: .55rem; background: #131313; color: #FFD166; border-top: 1px solid rgb(255 255 255 / .12); font-size: .85rem; font-weight: 600; } .expiry-marquee .marquee-track { animation-duration: 40s; font-family: var(--body); text-transform: none; letter-spacing: 0; display: flex; gap: 2.2rem; white-space: nowrap; width: max-content; } .expiry-marquee a { color: #fff; font-weight: 800; text-decoration: underline; } .expiry-marquee .marquee-dot { color: #FFD166; } body:has(.expiry-marquee) .ctabar { bottom: 3rem; } body:has(.expiry-marquee) .footer { padding-bottom: 5.5rem; } @media (max-width: 860px) { .footer { padding-bottom: 6.5rem; } body:has(.expiry-marquee) .footer { padding-bottom: 9rem; } } /* ---------- sticky CTA bar (mobile) ---------- */ .ctabar { position: fixed; bottom: .8rem; left: 50%; transform: translateX(-50%); z-index: 30; width: min(560px, 94vw); display: flex; border-radius: 999px; overflow: hidden; background: rgb(18 15 18 / .82); backdrop-filter: blur(16px); border: 1px solid rgb(255 255 255 / .16); color: #fff; box-shadow: 0 14px 40px rgb(0 0 0 / .35); } .ctabar a { flex: 1; text-align: center; padding: .9rem .4rem; text-decoration: none; font-size: .85rem; font-weight: 700; } .ctabar-book { background: var(--primary); color: var(--on-primary) !important; } @media (min-width: 860px) { .ctabar { display: none; } } /* ---------- scroll reveals ---------- */ .reveal { opacity: 0; transform: translateY(38px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); } .reveal.in { opacity: 1; transform: none; } .stagger > * { opacity: 0; transform: translateY(26px); transition: opacity .65s var(--ease), transform .65s var(--ease); } .stagger.in > * { opacity: 1; transform: none; } .stagger.in > *:nth-child(1) { transition-delay: 0s; } .stagger.in > *:nth-child(2) { transition-delay: .09s; } .stagger.in > *:nth-child(3) { transition-delay: .18s; } .stagger.in > *:nth-child(4) { transition-delay: .27s; } .stagger.in > *:nth-child(5) { transition-delay: .36s; } .stagger.in > *:nth-child(6) { transition-delay: .45s; } .stagger.in > *:nth-child(n+7) { transition-delay: .54s; } /* ---------- responsive ---------- */ @media (max-width: 1020px) { .service-grid { grid-template-columns: 1fr 1fr; } .cat-grid { grid-template-columns: 1fr 1fr; } .service-card.featured { grid-column: span 2; } .review-layout, .about-wrap { grid-template-columns: 1fr; } } @media (max-width: 860px) { .topnav, .topcta { display: none; } .nav-toggle { display: block; flex: none; margin-left: auto; } .topbar { flex-wrap: wrap; gap: .6rem; } /* keep the hamburger on the wordmark's row — a long name truncates with "…" (flex-basis:0 so it never pushes the toggle onto a second line) */ .wordmark { flex: 1 1 0; min-width: 0; font-size: 1.06rem; } .wordmark .wm-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .topbar.open .topnav { display: flex; flex-direction: column; flex-basis: 100%; padding: .8rem .6rem 1rem; gap: 1rem; } /* stacked menu: a full-width underline reads as a divider, so mark the current item with a leading accent bar instead */ .topbar.open .topnav a[aria-current="page"]::after { transform: none; width: 3px; height: 100%; left: -.6rem; bottom: 0; } .topbar.open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .topbar.open .nav-toggle span:nth-child(2) { opacity: 0; } .topbar.open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .form-row, .contact-grid, .booking-split { grid-template-columns: 1fr; } .service-grid { grid-template-columns: 1fr; } .cat-grid { grid-template-columns: 1fr; } .service-card.featured { grid-column: span 1; } .section { padding-block: var(--space-4); } .hero { min-height: 72svh; } .float-card { position: static; margin-top: var(--space-3); align-self: flex-start; display: inline-flex; } .hero-content { padding-top: 6.5rem; } .footer-links { text-align: left; } } /* ---------- reduced motion: calm path ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .anim-1, .anim-2, .anim-3, .anim-4, .anim-5, .reveal, .stagger > * { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; } .hero-media img { animation: none !important; } .marquee-track { animation: none !important; } * { transition-duration: .01ms !important; animation-duration: .01ms !important; } } /* ---- @apna/ui shim: re-home document-level rules onto .apna-root --------- site.css styles `body` and uses viewport-fixed bars; inside an app the ApnaTheme root carries those instead. Everything else applies unchanged. */ .apna-root { font-family: var(--body); background: var(--surface); color: var(--ink); line-height: 1.65; font-size: var(--fs-0); -webkit-font-smoothing: antialiased; position: relative; } /* grain, scoped to the root instead of the viewport */ .apna-root::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 4; opacity: .045; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); } /* in-flow variants of the fixed bars (GlassNav floating={false}, CtaBar static) */ .apna-root .topbar.topbar--static { position: relative; top: auto; left: auto; transform: none; margin: 1rem auto; } .apna-root .ctabar.ctabar--static { position: relative; bottom: auto; left: auto; transform: none; margin: 1rem auto; display: flex; } /* hero without an image: aurora gradient over a dark-neutral base (matches the factory's generated art — theme color fields, never a loud flat fill) */ .hero-media.hero-media--art { background: radial-gradient(60% 70% at 22% 75%, color-mix(in srgb, var(--accent) 38%, transparent), transparent 70%), radial-gradient(55% 65% at 78% 28%, color-mix(in srgb, var(--support) 40%, transparent), transparent 70%), radial-gradient(50% 60% at 88% 78%, color-mix(in srgb, var(--primary) 42%, transparent), transparent 70%), linear-gradient(135deg, color-mix(in srgb, var(--primary-deep) 60%, #121016), color-mix(in srgb, var(--primary-deep) 30%, #17151c)); } /* animations off (ApnaTheme animate={false}): everything lands in place */ .apna-no-anim .anim-1, .apna-no-anim .anim-2, .apna-no-anim .anim-3, .apna-no-anim .anim-4, .apna-no-anim .anim-5, .apna-no-anim .reveal, .apna-no-anim .stagger > * { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; } .apna-no-anim .hero-media img { animation: none !important; } .apna-no-anim .marquee-track { animation-duration: 0s !important; animation: none !important; } /* ========================================================================== apna.live factory additions on top of the premium design-system bundle - full-width tint BAND sections (services / reviews / faq) - reviews as a horizontal card slider (matches the Care Dental design) - hours "come in today" action panel - FAQ accordion - owner-selectable COLOUR SCHEMES (data-scheme on ) All keyed off the same premium tokens (--primary / --primary-deep / --accent / --support / --on-primary / --surface-2 / --ink). ========================================================================== */ /* ---------- tint band sections (white -> tint -> white rhythm) ---------- */ .section.band { background: color-mix(in srgb, var(--support) 50%, var(--surface)); } .section.band + .section.band { padding-top: 0; } /* ---------- reviews: horizontal card slider ---------- */ /* the slider has its own header row, so the section head shouldn't add a second full-size gap above it */ .reviews .section-head { margin-bottom: var(--space-2); } .reviews-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: var(--space-2); } .reviews-hint { color: var(--ink-soft); font-size: .95rem; } .reviews-arrows { display: flex; gap: .6rem; flex: none; } .rev-arrow { width: 46px; height: 46px; border-radius: 999px; flex: none; border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); background: var(--surface-2); color: var(--ink); font-size: 1.2rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow-1); transition: background .2s, color .2s, border-color .2s, transform .2s; } .rev-arrow:hover, .rev-arrow:focus-visible { background: var(--primary); color: var(--on-primary); border-color: var(--primary); transform: translateY(-1px); } .reviews-slider { display: flex; gap: var(--space-3); overflow-x: auto; scroll-snap-type: x mandatory; padding: .5rem .25rem var(--space-3); margin: 0 -.25rem; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } .reviews-slider::-webkit-scrollbar { display: none; } .review-slide { position: relative; overflow: hidden; scroll-snap-align: start; flex: 0 0 320px; max-width: 320px; background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--primary) 7%, transparent), transparent 55%), var(--surface-2); border: 1px solid color-mix(in srgb, var(--ink) 7%, transparent); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); transition: transform .4s var(--ease), box-shadow .4s var(--ease); } .review-slide:hover { transform: translateY(-6px); box-shadow: var(--shadow-2); } /* brand gradient edge along the top */ .review-slide::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--primary), var(--accent)); } /* oversized decorative quote mark */ .review-slide .rq { position: absolute; top: .4rem; right: 1.1rem; font-family: var(--display); font-size: 6.5rem; line-height: 1; color: var(--primary); opacity: .10; pointer-events: none; user-select: none; transition: transform .5s var(--ease), opacity .5s; } .review-slide:hover .rq { transform: translateY(6px) rotate(-6deg); opacity: .16; } .review-head { display: flex; align-items: center; gap: .7rem; } .review-slide .stars { color: var(--primary); letter-spacing: 2px; font-size: var(--fs-1); display: flex; gap: .1em; } /* stars pop in one-by-one when the card enters */ .review-slide .stars span { display: inline-block; } .review-slide.in .stars span { animation: star-pop .45s var(--ease) backwards; } .review-slide.in .stars span:nth-child(1) { animation-delay: .05s; } .review-slide.in .stars span:nth-child(2) { animation-delay: .13s; } .review-slide.in .stars span:nth-child(3) { animation-delay: .21s; } .review-slide.in .stars span:nth-child(4) { animation-delay: .29s; } .review-slide.in .stars span:nth-child(5) { animation-delay: .37s; } @keyframes star-pop { from { opacity: 0; transform: scale(.3) rotate(-30deg); } to { opacity: 1; transform: none; } } .rating-chip { margin-left: auto; flex: none; background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary); font-weight: 800; font-size: .82rem; padding: .22rem .7rem; border-radius: 999px; } .review-slide p { font-size: var(--fs-1); line-height: 1.6; flex: 1; color: var(--ink); position: relative; } /* long reviews are clamped to 5 lines with an ellipsis; hovering the card (or tabbing into it) reveals the full text */ .review-slide p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; } .review-slide:hover p, .review-slide:focus-within p { -webkit-line-clamp: unset; } .review-slide cite { font-style: normal; display: flex; align-items: center; gap: .7rem; margin-top: var(--space-1); padding-top: var(--space-2); border-top: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); } .review-slide .avatar { width: 44px; height: 44px; font-size: var(--fs-1); font-weight: 800; background: linear-gradient(135deg, var(--primary), var(--primary-deep)); color: #fff; box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 35%, transparent); } .rev-meta { display: flex; flex-direction: column; gap: .12rem; } .rev-name { font-weight: 700; color: var(--ink); font-size: var(--fs-0); text-transform: capitalize; } .rev-meta .g-badge { display: inline-flex; align-items: center; gap: .35rem; color: var(--ink-soft); opacity: 1; font-weight: 600; font-size: .78rem; letter-spacing: 0; } /* pager dots — active dot stretches into a brand pill */ .rev-dots { display: flex; gap: .45rem; justify-content: center; margin-top: .2rem; } .rev-dot { width: 8px; height: 8px; border-radius: 999px; border: 0; padding: 0; cursor: pointer; background: color-mix(in srgb, var(--ink) 18%, transparent); transition: width .35s var(--ease), background .35s; } .rev-dot.on { width: 24px; background: var(--primary); } /* ---------- hours: card + "come in today" action panel ---------- */ /* auto-fit + minmax(min(100%, …)) stacks to one column whenever the row can't fit two ~20rem tracks — responds to real container width, so it works on the phone view AND inside the editor WebView (no viewport media query needed). */ .hours-wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 1.3rem; align-items: stretch; } .hours-wrap > * { min-width: 0; } .hours-cta { background: var(--primary); color: var(--on-primary); border-radius: var(--radius-lg); box-shadow: var(--shadow-2); padding: clamp(1.6rem, 4vw, 2.6rem); display: flex; flex-direction: column; justify-content: center; gap: .9rem; } .hours-cta h3 { font-size: var(--fs-2); color: var(--on-primary); } .hours-cta p { font-size: 1rem; line-height: 1.6; color: color-mix(in srgb, var(--on-primary) 85%, transparent); } .hours-cta-actions { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: .3rem; } .hours-cta-actions a { padding: .72rem 1.4rem; border-radius: 999px; font-weight: 700; font-size: .96rem; text-decoration: none; transition: transform .2s var(--ease); } .hours-cta-actions a:hover { transform: translateY(-2px); } .hours-cta-actions a.solid { background: var(--on-primary); color: var(--primary); box-shadow: var(--shadow-1); } .hours-cta-actions a.outline { border: 1.5px solid color-mix(in srgb, var(--on-primary) 45%, transparent); color: var(--on-primary); } /* ---------- FAQ accordion ---------- */ .faq-list { display: flex; flex-direction: column; gap: .9rem; } .faq-list details { background: var(--surface-2); border: var(--ring); border-radius: var(--radius); padding: 1.15rem 1.5rem; box-shadow: var(--shadow-1); transition: box-shadow .3s var(--ease); } .faq-list details[open] { box-shadow: var(--shadow-2); } .faq-list summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-family: var(--display); font-weight: var(--display-weight); font-size: 1.08rem; color: var(--ink); } .faq-list summary::-webkit-details-marker { display: none; } .faq-plus { flex: none; width: 32px; height: 32px; border-radius: 999px; display: grid; place-items: center; background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); font-weight: 700; font-size: 1.2rem; transition: transform .3s var(--ease), background .3s, color .3s; } .faq-list details[open] .faq-plus { transform: rotate(45deg); background: var(--primary); color: var(--on-primary); } .faq-list details p { margin-top: .8rem; color: var(--ink-soft); max-width: 60ch; line-height: 1.65; } /* ---------- about: text + checklist + photo (the locked 2-col layout) ---------- */ .about-col { align-self: center; } .about-text { font-family: var(--body); font-size: 1.06rem; line-height: 1.7; color: var(--ink-soft); max-width: 52ch; margin-top: var(--space-2); } .checklist { list-style: none; display: grid; gap: .85rem; margin-top: var(--space-3); } .checklist li { display: flex; gap: .7rem; align-items: center; font-size: 1.05rem; color: var(--ink); } .checklist .tick { flex: none; width: 28px; height: 28px; border-radius: 999px; background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary); display: inline-flex; align-items: center; justify-content: center; font-size: .85rem; font-weight: 800; } .about-photo { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-2); aspect-ratio: 4/5; max-height: 560px; } .about-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ========================================================================== SEO / blog pages (add-on) — the detail page + the /blog/ listing. ========================================================================== */ .seo-hero { position: relative; min-height: clamp(170px, 22vw, 250px); display: flex; align-items: flex-end; padding-top: 4.5rem; overflow: hidden; /* Show the page image when it has one; otherwise a cool branded "aurora" mesh + grid that adapts to any colour scheme via --primary/--accent (never blank). */ background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.12) 45%, rgba(0,0,0,.55) 100%), var(--seo-hero, none) center/cover no-repeat, radial-gradient(70% 120% at 12% 8%, color-mix(in srgb, var(--accent) 60%, transparent), transparent 60%), radial-gradient(60% 110% at 88% 15%, color-mix(in srgb, var(--primary) 75%, transparent), transparent 62%), radial-gradient(80% 130% at 70% 110%, color-mix(in srgb, var(--accent) 40%, transparent), transparent 60%), linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px) 0 0 / 100% 42px, linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px) 0 0 / 42px 100%, linear-gradient(135deg, var(--primary-deep) 0%, var(--primary) 55%, var(--primary-deep) 100%); } .seo-form { margin-top: 2.4rem; } .seo-form h2 { font-family: var(--display); font-size: 1.5rem; margin: 0 0 1rem; } .seo-hero-inner { max-width: 820px; margin: 0 auto; width: 100%; padding: 1rem 1.3rem 1.4rem; color: #fff; } .seo-hero .seo-crumb { color: rgba(255,255,255,.85); margin-bottom: .7rem; } .seo-hero .seo-crumb a { color: #fff; text-decoration: none; } .seo-hero h1 { font-family: var(--display); font-size: clamp(1.7rem, 4.2vw, 2.7rem); line-height: 1.12; margin: 0; color: #fff; max-width: 22ch; } .seo-wrap { max-width: 760px; margin: 0 auto; padding: 2.4rem 1.3rem 3.6rem; } .seo-crumb { font-size: .86rem; opacity: .75; margin-bottom: 1rem; } .seo-crumb a { color: var(--primary); text-decoration: none; } .seo-article h2 { font-family: var(--display); font-size: 1.4rem; margin: 2rem 0 .6rem; } .seo-article h3 { font-size: 1.12rem; margin: 1.5rem 0 .5rem; } .seo-article p, .seo-article li { font-size: 1.04rem; line-height: 1.75; opacity: .94; } .seo-article ul { padding-left: 1.2rem; margin: .6rem 0; } .seo-article li { margin: .3rem 0; } .seo-cta { margin-top: 2.4rem; padding: 1.4rem 1.5rem; border-radius: 14px; background: color-mix(in srgb, var(--ink) 4%, transparent); border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; justify-content: space-between; } .seo-cta b { font-family: var(--display); } .seo-cta .btn { white-space: nowrap; } /* /blog/ listing */ .blog-wrap { max-width: 1040px; margin: 0 auto; padding: 2.6rem 1.3rem 4rem; } .blog-head { max-width: 640px; margin: 0 auto 2rem; text-align: center; } .blog-head h1 { font-family: var(--display); font-size: clamp(1.9rem, 4.5vw, 2.8rem); margin: 0 0 .5rem; } .blog-head p { opacity: .8; font-size: 1.02rem; } .blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.4rem; } .blog-card { display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; background: var(--surface); border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); box-shadow: var(--shadow-1); text-decoration: none; color: inherit; transition: transform .15s, box-shadow .15s; } .blog-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); } .blog-card .thumb { aspect-ratio: 16/9; background: var(--primary-deep) center/cover no-repeat; } .blog-card .b-body { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .4rem; } .blog-card .b-kind { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--primary); } .blog-card h3 { font-family: var(--display); font-size: 1.16rem; line-height: 1.25; margin: 0; } .blog-card p { font-size: .92rem; opacity: .82; line-height: 1.55; margin: 0; } .blog-pager { display: flex; justify-content: center; gap: .5rem; margin-top: 2.4rem; } .blog-pager button { min-width: 2.4rem; padding: .5rem .8rem; border-radius: 8px; cursor: pointer; border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); background: var(--surface); color: var(--ink); font-weight: 700; } .blog-pager button.on { background: var(--primary); color: var(--on-primary); border-color: var(--primary); } .blog-pager button[disabled] { opacity: .4; cursor: default; } /* ========================================================================== COLOUR SCHEMES — owner-selectable from the admin panel. data-scheme on overrides only the brand-hue group, so the page surface + typography stay per-family while the accent colour is the owner's pick. Appended last so they win over the [data-theme] family rule. To add a new scheme: copy a line, rename, drop in five hues + a shadow rgb. ========================================================================== */ [data-scheme="teal"] { --primary:#1F5F5B; --primary-deep:#143F3C; --accent:#3E8E7E; --support:#C9DAD2; --on-primary:#F5FAF8; --shadow-tint:31 95 91; } [data-scheme="ocean"] { --primary:#275BA8; --primary-deep:#16345E; --accent:#E0A43A; --support:#CDDEF4; --on-primary:#F2F7FD; --shadow-tint:39 91 168; } [data-scheme="copper"] { --primary:#B96F2E; --primary-deep:#7A4416; --accent:#E8C05A; --support:#F0E0C8; --on-primary:#FFF8EC; --shadow-tint:185 111 46; } [data-scheme="forest"] { --primary:#2F6B46; --primary-deep:#1C4530; --accent:#D7A33F; --support:#D6E7DB; --on-primary:#F1F8F3; --shadow-tint:47 107 70; } [data-scheme="plum"] { --primary:#6A4A86; --primary-deep:#402A56; --accent:#D9A23F; --support:#E5DBF0; --on-primary:#F7F2FB; --shadow-tint:106 74 134; } [data-scheme="slate"] { --primary:#37566B; --primary-deep:#223442; --accent:#C8992F; --support:#D7E1E8; --on-primary:#F3F7FA; --shadow-tint:55 86 107; } /* ========================================================================= OWNER-SELECTABLE LAYOUTS — data-look on Same section DOM as the default "Signature" look, RE-COMPOSED into a different layout. Every section still renders; nothing is added or removed. Appended last so single-class [data-look] rules win by source order. Keep the id list in sync with generate.SITE_THEMES + owner_admin.SITE_THEMES. ========================================================================= */ /* un-pin the cinematic "curtain" hero so re-flowed heroes lay out normally */ [data-look="split"] .hero, [data-look="framed"] .hero, [data-look="minimal"] .hero { position: static; } /* ===================== SPLIT — asymmetric two-column magazine ============ */ [data-look="split"] { --display: "Fraunces", Georgia, serif; --display-weight: 600; --display-tracking: -.02em; --radius: 4px; --radius-lg: 8px; --radius-sm: 3px; } /* nav: opaque bar (hero left panel is dark, so white nav text stays legible) */ [data-look="split"] .topbar { background: var(--primary-deep); backdrop-filter: none; -webkit-backdrop-filter: none; } /* hero: split grid — dark content panel left, photo right */ [data-look="split"] .hero { display: grid; grid-template-columns: 1fr 1fr; min-height: min(74svh, 720px); align-items: stretch; overflow: clip; } [data-look="split"] .hero-media { position: relative; inset: auto; z-index: auto; grid-column: 2; grid-row: 1; } [data-look="split"] .hero-scrim { background: linear-gradient(90deg, var(--primary-deep) 0%, transparent 24%); } [data-look="split"] .hero-content { grid-column: 1; grid-row: 1; width: auto; margin: 0; display: flex; flex-direction: column; justify-content: center; background: var(--primary-deep); padding: 7rem clamp(1.4rem, 4vw, 3.4rem) 3rem; } [data-look="split"] .hero-title { max-width: 18ch; } [data-look="split"] .float-card { display: none; } /* services: strict uniform grid — no bento span, no flip */ [data-look="split"] .service-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } [data-look="split"] .cat-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } [data-look="split"] .service-card.featured { grid-column: auto; } [data-look="split"] .service-card.flip:hover .svc-inner, [data-look="split"] .service-card.flip:focus-within .svc-inner { transform: none; } /* about: mirror the photo to the left */ [data-look="split"] .about-wrap { grid-template-columns: .9fr 1.1fr; } [data-look="split"] .about-col { order: 2; } [data-look="split"] .about-photo { order: 1; } /* rhythm: drop the band tint, separate sections with a hairline rule */ [data-look="split"] .section.band { background: var(--surface); } [data-look="split"] .page-body > .section + .section, [data-look="split"] .page-body > .marquee + .section { border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); } /* about: collapse the two-column split to one column on narrow screens. The base .about-wrap 1-col collapse is overridden by the more-specific [data-look="split"] rule above, so it must be restated here — text first, photo below. */ @media (max-width: 1020px) { [data-look="split"] .about-wrap { grid-template-columns: 1fr; } [data-look="split"] .about-col { order: 1; } [data-look="split"] .about-photo { order: 2; } } @media (max-width: 860px) { [data-look="split"] .hero { grid-template-columns: 1fr; } [data-look="split"] .hero-media { grid-column: 1; grid-row: 2; min-height: 42vh; } [data-look="split"] .hero-content { grid-row: 1; padding-top: 6rem; } } /* ===================== STACK — centered single column, immersive dark ==== */ [data-look="stack"] { --surface: #0E1116; --surface-2: #171B22; --ink: #ECEFF4; --ink-soft: #9AA4B2; --shadow-tint: 0 0 0; --ring: 1px solid rgb(255 255 255 / .09); } /* hero: centered content over the image */ [data-look="stack"] .hero { align-items: center; text-align: center; } [data-look="stack"] .hero-content { display: flex; flex-direction: column; align-items: center; padding-block: 8rem; } [data-look="stack"] .hero-title { max-width: 20ch; } [data-look="stack"] .hero-sub { max-width: 52ch; } [data-look="stack"] .hero-actions, [data-look="stack"] .hero-chips { justify-content: center; } [data-look="stack"] .float-card { display: none; } /* services: one centered column of wide cards, no flip */ [data-look="stack"] .service-grid { grid-template-columns: 1fr; max-width: 760px; margin-inline: auto; } /* stack: one item per row — the photo sits beside the text instead of above it */ [data-look="stack"] .cat-grid { grid-template-columns: 1fr; max-width: 760px; margin-inline: auto; } [data-look="stack"] .cat-card { flex-direction: row; } [data-look="stack"] .cat-media { width: 34%; flex: none; aspect-ratio: auto; } [data-look="stack"] .service-card.featured { grid-column: auto; } [data-look="stack"] .service-card.flip:hover .svc-inner, [data-look="stack"] .service-card.flip:focus-within .svc-inner { transform: none; } /* about: stacked, photo on top, centered */ [data-look="stack"] .about-wrap { grid-template-columns: 1fr; max-width: 760px; margin-inline: auto; text-align: center; } [data-look="stack"] .about-col { order: 2; } [data-look="stack"] .about-photo { order: 1; max-width: 520px; margin-inline: auto; } [data-look="stack"] .about-text { margin-inline: auto; } [data-look="stack"] .checklist { display: inline-block; text-align: left; } /* headings centered */ [data-look="stack"] .section-head { margin-inline: auto; text-align: center; max-width: 60ch; } [data-look="stack"] .eyebrow { justify-content: center; } /* footer: single centered column */ [data-look="stack"] .footer-inner { grid-template-columns: 1fr; text-align: center; justify-items: center; } /* dark surface housekeeping */ [data-look="stack"] body::after { opacity: .02; } [data-look="stack"] .section.band { background: color-mix(in srgb, var(--surface-2) 55%, var(--surface)); } /* DESKTOP. Stack was authored at ONE width: a 760px column, which is right on a phone and reads as a phone on a 1440px screen — a narrow ribbon of content under a full-bleed hero, with products one per row. Same centred, stacked character, given the room it has. Below 1100px nothing here applies and the original holds. */ @media (min-width: 1100px) { [data-look="stack"] .service-grid { grid-template-columns: 1fr 1fr; max-width: 1040px; } [data-look="stack"] .cat-grid, [data-look="stack"] .about-wrap { max-width: 1040px; } /* the column widened; the prose must not follow it — a 1040px line of body text is a worse read than the 760px one it replaced */ [data-look="stack"] .about-text, [data-look="stack"] .section-head { max-width: 62ch; } [data-look="stack"] .about-photo { max-width: 620px; } } /* ===================== FRAMED — rounded floating panels, app-like ======== */ [data-look="framed"] { --radius: 20px; --radius-lg: 30px; --radius-sm: 14px; } /* hero: a rounded top panel flush under the nav (dark image → nav stays legible) */ [data-look="framed"] .hero { margin-inline: clamp(.6rem, 3vw, 2rem); border-radius: 0 0 var(--radius-lg) var(--radius-lg); overflow: clip; } /* every section body becomes a floating rounded panel */ [data-look="framed"] .page-body { padding-inline: clamp(.6rem, 3vw, 2rem); } [data-look="framed"] .section { padding-block: clamp(.7rem, 2vw, 1.2rem); } [data-look="framed"] .section > .container { background: var(--surface-2); border: var(--ring); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); padding: clamp(1.6rem, 4vw, 3rem); } [data-look="framed"] .section.band { background: var(--surface); } /* calmer service cards (no 3-D flip) */ [data-look="framed"] .service-card.flip:hover .svc-inner, [data-look="framed"] .service-card.flip:focus-within .svc-inner { transform: none; } /* ===================== MINIMAL — whitespace + typography, service index == */ [data-look="minimal"] { --display: "Bricolage Grotesque", "Segoe UI", sans-serif; --display-weight: 700; --display-tracking: -.03em; --radius: 3px; --radius-lg: 4px; --radius-sm: 2px; } /* light, typographic nav (this look has a light hero, so the dark bar goes) */ [data-look="minimal"] .topbar { background: color-mix(in srgb, var(--surface) 90%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--ink); border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); box-shadow: none; } [data-look="minimal"] .topbar.scrolled { background: var(--surface); } [data-look="minimal"] .wordmark, [data-look="minimal"] .topnav a { color: var(--ink); } [data-look="minimal"] .nav-toggle span { background: var(--ink); } [data-look="minimal"] .topcta { background: var(--primary); color: var(--on-primary); } /* hero: left-aligned type block + a contained portrait image */ [data-look="minimal"] .hero { min-height: auto; display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; overflow: visible; background: var(--surface); padding: 8rem clamp(1.2rem, 5vw, 3rem) clamp(2rem, 5vw, 4rem); } [data-look="minimal"] .hero-media { position: relative; inset: auto; z-index: auto; grid-column: 2; grid-row: 1; aspect-ratio: 4/5; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-1); } [data-look="minimal"] .hero-scrim { display: none; } [data-look="minimal"] .hero-content { grid-column: 1; grid-row: 1; width: auto; margin: 0; padding: 0; color: var(--ink); } [data-look="minimal"] .hero-title { color: var(--ink); text-shadow: none; font-size: clamp(2.8rem, 6vw, 4.4rem); max-width: 14ch; } [data-look="minimal"] .hero-sub { color: var(--ink-soft); } [data-look="minimal"] .hero-eyebrow { background: none; border: 0; backdrop-filter: none; color: var(--ink-soft); padding-inline: 0; } [data-look="minimal"] .hero-eyebrow .star { color: var(--accent); } [data-look="minimal"] .hero-chips span { background: none; border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent); color: var(--ink-soft); backdrop-filter: none; } [data-look="minimal"] .hero .btn-ghost { color: var(--ink); } [data-look="minimal"] .float-card { display: none; } /* services → a numbered, bordered index (no cards, no shadows, no flip) */ /* minimal: the services list goes borderless/numbered, but the catalog keeps its grid — the photos are the whole point of it — just stripped of chrome. */ [data-look="minimal"] .cat-grid { grid-template-columns: 1fr 1fr; gap: 2rem 1.6rem; } [data-look="minimal"] .cat-card { background: none; border: 0; box-shadow: none; border-radius: 0; } [data-look="minimal"] .cat-card:hover { transform: none; box-shadow: none; } [data-look="minimal"] .cat-media { border-radius: var(--radius); } [data-look="minimal"] .cat-body { padding: .9rem 0 0; } [data-look="minimal"] .service-grid { display: block; counter-reset: svc; } [data-look="minimal"] .service-card, [data-look="minimal"] .svc-front { background: none !important; border: 0; box-shadow: none !important; border-radius: 0; } [data-look="minimal"] .service-card { counter-increment: svc; display: flex; flex-direction: row; align-items: baseline; gap: 1.2rem; padding: 1.3rem 0; transform: none !important; border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); } [data-look="minimal"] .service-card:hover { transform: none !important; box-shadow: none !important; } [data-look="minimal"] .service-card.featured { grid-column: auto; color: var(--ink); } [data-look="minimal"] .service-card.featured::after { display: none; } [data-look="minimal"] .service-card.featured h3, [data-look="minimal"] .service-card.featured p { color: inherit; } [data-look="minimal"] .service-card.flip { padding: 1.3rem 0; perspective: none; } [data-look="minimal"] .service-card.flip:hover .svc-inner, [data-look="minimal"] .service-card.flip:focus-within .svc-inner { transform: none; } [data-look="minimal"] .svc-inner { display: block; } [data-look="minimal"] .svc-back { display: none; } [data-look="minimal"] .svc-front { display: flex; flex-direction: row; align-items: baseline; gap: 1.2rem; padding: 0; } [data-look="minimal"] .svc-dot { display: none; } [data-look="minimal"] .service-card h3 { font-size: 1.4rem; flex: 1; } [data-look="minimal"] .service-card h3::before { content: counter(svc, decimal-leading-zero); margin-right: 1rem; font-size: .82rem; font-variant-numeric: tabular-nums; color: var(--ink-soft); } [data-look="minimal"] .service-card p { color: var(--ink-soft); font-size: .92rem; max-width: 42ch; flex: 2; } [data-look="minimal"] .price { align-self: baseline; } /* rhythm: no bands, no grain, no glow-orbs; light footer */ [data-look="minimal"] .section.band { background: var(--surface); } [data-look="minimal"] body::after { opacity: 0; } [data-look="minimal"] .statband::before, [data-look="minimal"] .statband::after { display: none; } [data-look="minimal"] .footer { background: var(--surface); color: var(--ink); border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); } [data-look="minimal"] .footer::before { display: none; } [data-look="minimal"] .f-col h4 { color: var(--ink-soft); } [data-look="minimal"] .f-col a, [data-look="minimal"] .f-brand .wordmark { color: var(--ink); } [data-look="minimal"] .footer-addr, [data-look="minimal"] .f-tag { color: var(--ink-soft); } [data-look="minimal"] .f-social-row a { background: none; border-color: color-mix(in srgb, var(--ink) 18%, transparent); color: var(--ink); } @media (max-width: 760px) { [data-look="minimal"] .hero { grid-template-columns: 1fr; padding-top: 6.5rem; } [data-look="minimal"] .hero-media { grid-column: 1; grid-row: 1; max-height: 44vh; aspect-ratio: 16/10; } } /* ===================== EDITORIAL — masthead hero, hairline rules, magazine grid = Design language: a broadsheet. A bottom-anchored masthead over the hero image, accent kicker-rules instead of pills, hairline dividers between sections, and an asymmetric services grid with one dominant cell. Sharp corners throughout. Uses only theme tokens (--primary/--accent/--ink/--surface) so it adapts to every scheme + family and keeps light/dark parity. Display = Bricolage Grotesque (always loaded via THEME_FONT_EXTRAS); heavier + tighter than the family default. */ [data-look="editorial"] { --display: "Bricolage Grotesque", "Segoe UI", sans-serif; --display-weight: 800; --display-tracking: -.035em; --radius: 2px; --radius-lg: 3px; --radius-sm: 2px; --edi-rule: 1px solid color-mix(in srgb, var(--ink) 16%, transparent); } /* MASTHEAD HERO: keep the full-bleed image, anchor the type block to the bottom, deepen the lower scrim so the masthead reads. Kicker sits on an accent top-rule. */ [data-look="editorial"] .hero { align-items: flex-end; } [data-look="editorial"] .hero-scrim { background: linear-gradient(0deg, rgb(0 0 0 / .78) 0%, rgb(0 0 0 / .30) 44%, transparent 74%); } [data-look="editorial"] .hero-content { padding-block: 6.5rem clamp(2.2rem, 5vw, 4rem); } [data-look="editorial"] .hero-eyebrow { background: none; border: 0; border-top: 2px solid var(--accent); backdrop-filter: none; border-radius: 0; padding: .7rem 0 0; letter-spacing: .2em; } [data-look="editorial"] .hero-title { font-size: clamp(2.9rem, 8vw, 5.6rem); line-height: .98; max-width: 15ch; margin-top: .5rem; text-shadow: 0 2px 24px rgb(0 0 0 / .35); } [data-look="editorial"] .hero-sub { max-width: 52ch; padding-top: 1.1rem; margin-top: 1.1rem; border-top: 1px solid rgb(255 255 255 / .28); } /* chips become a plain ruled meta row, not glass pills; the rating card is dropped */ [data-look="editorial"] .hero-chips span { background: none; border: 0; border-right: 1px solid rgb(255 255 255 / .3); border-radius: 0; padding: 0 .9rem; backdrop-filter: none; text-transform: uppercase; letter-spacing: .1em; font-size: .74rem; } [data-look="editorial"] .hero-chips span:last-child { border-right: 0; } [data-look="editorial"] .float-card { display: none; } /* MARQUEE as a ruled masthead strip */ [data-look="editorial"] .marquee { border-block: var(--edi-rule); background: var(--surface); text-transform: uppercase; letter-spacing: .12em; } /* SECTION RHYTHM: a hairline over every section + a ruled kicker (no pill) */ [data-look="editorial"] .page-body > .section + .section, [data-look="editorial"] .page-body > .marquee + .section { border-top: var(--edi-rule); } [data-look="editorial"] .section.band { background: var(--surface); } [data-look="editorial"] .section-head { max-width: 62ch; } [data-look="editorial"] .eyebrow { background: none; border: 0; border-top: 2px solid var(--accent); border-radius: 0; /* .2em was tracking for all-caps; on Title Case it reads as stretched */ color: var(--ink-soft); padding: .55rem 0 0; letter-spacing: .08em; } [data-look="editorial"] .eyebrow::before { display: none; } /* SERVICES: asymmetric magazine grid — the featured cell dominates (2×2), the rest are sharp hairline-framed cards. Calm (no 3-D flip). */ [data-look="editorial"] .service-grid { grid-template-columns: repeat(3, 1fr); gap: 1px; background: color-mix(in srgb, var(--ink) 12%, transparent); border: var(--edi-rule); } [data-look="editorial"] .service-card { background: var(--surface); border: 0; border-radius: 0; box-shadow: none; } [data-look="editorial"] .service-card:hover { transform: none; box-shadow: none; background: color-mix(in srgb, var(--primary) 6%, var(--surface)); } /* the dominant cell keeps the brand gradient — real visual variation anchors the grid instead of an all-text bento (a slop tell), and honours "one accent" */ [data-look="editorial"] .service-card.featured { grid-column: span 2; grid-row: span 2; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-deep) 100%); color: var(--on-primary); } [data-look="editorial"] .service-card.featured:hover { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-deep) 100%); } [data-look="editorial"] .service-card.flip { padding: 0; perspective: none; } [data-look="editorial"] .service-card.flip:hover .svc-inner, [data-look="editorial"] .service-card.flip:focus-within .svc-inner { transform: none; } [data-look="editorial"] .svc-back { display: none; } [data-look="editorial"] .svc-front { position: static; } [data-look="editorial"] .cat-card { border-radius: 0; } /* ABOUT: editorial two-column with a drop-cap opening and a rule between columns */ [data-look="editorial"] .about-wrap { gap: clamp(1.5rem, 4vw, 3.2rem); } [data-look="editorial"] .about-col { border-left: var(--edi-rule); padding-left: clamp(1.2rem, 3vw, 2.4rem); } [data-look="editorial"] .about-text:first-of-type::first-letter { float: left; font-family: var(--display); font-weight: 800; font-size: 3.4em; line-height: .8; padding: .04em .12em 0 0; color: var(--primary); } @media (max-width: 760px) { [data-look="editorial"] .service-grid { grid-template-columns: 1fr; } [data-look="editorial"] .service-card.featured { grid-column: auto; grid-row: auto; } [data-look="editorial"] .about-col { border-left: 0; padding-left: 0; } } /* ---------- AI website assistant (lead bot) ---------- */ .lb { position: fixed; left: 1.2rem; bottom: 1.2rem; z-index: 46; font-family: var(--body); } .lb-bubble { width: 56px; height: 56px; border-radius: 999px; border: 0; cursor: pointer; background: var(--primary); color: var(--on-primary); display: grid; place-items: center; box-shadow: 0 8px 26px rgb(0 0 0 / .3); transition: transform .25s var(--ease); } .lb-bubble:hover { transform: translateY(-3px) scale(1.05); } .lb-panel { position: absolute; left: 0; bottom: 70px; width: min(340px, 86vw); display: flex; flex-direction: column; max-height: min(70vh, 520px); background: var(--surface-2); color: var(--ink); border: var(--ring); border-radius: 16px; overflow: hidden; box-shadow: 0 24px 60px rgb(0 0 0 / .28); } /* the class `display:flex` on these would otherwise override [hidden] — so the panel close AND the "hidden until needed" callback form actually stay hidden */ .lb-panel[hidden], .lb-lead[hidden] { display: none; } .lb-head { background: var(--primary-deep); color: #fff; padding: .8rem 1rem; font-weight: 700; display: flex; justify-content: space-between; align-items: center; } .lb-close { background: none; border: 0; color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; } .lb-msgs { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .6rem; font-size: .92rem; } .lb-msg { padding: .55rem .8rem; border-radius: 12px; max-width: 86%; line-height: 1.45; } .lb-msg.bot { background: color-mix(in srgb, var(--primary) 10%, var(--surface-2)); align-self: flex-start; border-bottom-left-radius: 3px; } .lb-msg.me { background: var(--primary); color: var(--on-primary); align-self: flex-end; border-bottom-right-radius: 3px; } .lb-msg.typing { opacity: .55; } .lb-ask, .lb-lead { display: flex; gap: .4rem; padding: .7rem; border-top: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); } .lb-ask input, .lb-lead input { flex: 1; min-width: 0; border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); border-radius: 999px; padding: .55rem .9rem; font: inherit; background: var(--surface); color: var(--ink); } .lb-ask button, .lb-lead button { border: 0; background: var(--primary); color: var(--on-primary); border-radius: 999px; padding: .55rem 1rem; font-weight: 700; cursor: pointer; } .lb-lead { flex-direction: column; align-items: stretch; } .lb-lead p { margin: 0 0 .1rem; font-size: .85rem; color: var(--ink-soft); } .lb-lead input { border-radius: 10px; } .lb-lead button { border-radius: 10px; padding: .6rem; } /* ---- Online Business Score (previews only): a floating pill, bottom-left, that opens a panel. Dark glass with white text like the hero's rating card, so it reads on every look; sits opposite the call/WhatsApp floats and lifts with the expiry marquee. */ .score-fab{position:fixed;left:1.2rem;bottom:1.2rem;z-index:45;display:flex;align-items:center;gap:.6rem; padding:.4rem .95rem .4rem .4rem;border:1px solid rgb(255 255 255 / .14);border-radius:999px;cursor:pointer;font:inherit; color:#fff;background:rgb(14 22 19 / .78);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); box-shadow:0 10px 26px rgb(0 0 0 / .28);transition:transform .2s,box-shadow .2s} .score-fab:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgb(0 0 0 / .35)} .score-ring-wrap{position:relative;width:42px;height:42px;flex:none} .score-ring{width:42px;height:42px;display:block} .score-fab-n{position:absolute;inset:0;display:grid;place-items:center;font-weight:800;font-size:.95rem;line-height:1;font-variant-numeric:tabular-nums} .score-fab-t{font-size:.6rem;line-height:1.1;letter-spacing:.08em;text-transform:uppercase;opacity:.85;text-align:left} body:has(.expiry-marquee) .score-fab{bottom:3.6rem} .score-panel{position:fixed;left:1.2rem;bottom:calc(1.2rem + 66px);z-index:46;width:min(380px,calc(100vw - 2.4rem)); padding:1.1rem 1.2rem 1rem;border-radius:18px;color:#fff;border:1px solid rgb(255 255 255 / .14); background:rgb(14 22 19 / .94);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 22px 60px rgb(0 0 0 / .45)} body:has(.expiry-marquee) .score-panel{bottom:calc(3.6rem + 66px)} .score-panel-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:.8rem} .score-big{font-size:2.4rem;font-weight:800;line-height:1} .score-of{opacity:.6;font-weight:600;margin-left:.15rem} .score-title{font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;opacity:.7;margin-top:.25rem} .score-close{border:0;background:rgb(255 255 255 / .12);color:#fff;width:32px;height:32px;border-radius:999px;font-size:1.2rem;line-height:1;cursor:pointer} .score-bars{list-style:none;margin:0;padding:0;display:grid;gap:.55rem} .score-bars li{display:grid;grid-template-columns:1fr auto;gap:.2rem .6rem;font-size:.84rem;align-items:center} .score-bars em{font-style:normal;opacity:.85;font-variant-numeric:tabular-nums} .score-bars i{grid-column:1/-1;display:block;height:6px;border-radius:99px;background:rgb(255 255 255 / .14);overflow:hidden} .score-bars b{display:block;height:100%;border-radius:99px;background:#E3A92E} .score-next{margin-top:.9rem;display:flex;flex-wrap:wrap;gap:.4rem;font-size:.82rem} .score-next strong{width:100%;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;opacity:.7;font-weight:700} .score-next span{padding:.3rem .65rem;border-radius:999px;background:rgb(255 255 255 / .12)} .score-note{margin:.8rem 0 0;font-size:.7rem;opacity:.6} @media(max-width:640px){ .score-fab{left:.8rem;bottom:.9rem;padding:.35rem .5rem .35rem .35rem;gap:0}.score-fab-t{display:none} body:has(.expiry-marquee) .score-fab{bottom:4.4rem} .score-panel{left:.8rem;right:.8rem;width:auto;bottom:calc(.9rem + 62px)}body:has(.expiry-marquee) .score-panel{bottom:calc(4.4rem + 62px)}} /* ---- Bookings V2 slot picker ---- */ .slot-pick{margin:.2rem 0 .8rem} .slot-pick-title{font-weight:700;margin-bottom:.45rem} .slot-chips{display:flex;flex-wrap:wrap;gap:.45rem} .slot-chip{border:1px solid color-mix(in srgb,currentColor 25%,transparent);background:transparent;color:inherit;border-radius:999px;padding:.45rem .85rem;font:inherit;font-size:.9rem;cursor:pointer} .slot-chip.on{background:var(--accent,#E3A92E);color:#1a1a1a;border-color:var(--accent,#E3A92E);font-weight:700} /* ---- campaign page hero (M10) ---------------------------------------------- One design for every business. A campaign link gets shared into groups and chats where nobody knows whose site it is, so it should not look like six different products depending on which theme the owner picked. Every colour here is a literal on purpose — no theme variables, by design. */ .camp-hero{position:relative;min-height:min(86vh,680px);display:flex;align-items:flex-end; background:#0E1512;color:#fff;overflow:hidden;isolation:isolate} /* No picture (the image service was down when this campaign was made): a deliberate gradient rather than a flat black rectangle that reads as a broken image. */ .camp-hero.no-art{background:radial-gradient(120% 90% at 18% 12%,#1d3b33 0%,#12201c 52%,#0b120f 100%)} .camp-hero-media{position:absolute;inset:0;z-index:0} .camp-hero-media img{width:100%;height:100%;object-fit:cover;display:block} .camp-hero-scrim{position:absolute;inset:0; background:linear-gradient(180deg,rgba(10,16,14,.34) 0%,rgba(10,16,14,.52) 46%,rgba(10,16,14,.93) 100%)} .camp-hero-body{position:relative;z-index:1;width:100%;max-width:62rem; margin:0 auto;padding:clamp(2.4rem,7vw,5rem) clamp(1.2rem,5vw,3rem) clamp(2rem,5vw,3.4rem)} .camp-badge{display:inline-block;background:#E9B84E;color:#14110A;border-radius:999px; padding:.3rem .9rem;font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase} .camp-title{margin:.75rem 0 0;font-size:clamp(2rem,6.4vw,4.1rem);line-height:1.04; font-weight:800;letter-spacing:-.015em;text-wrap:balance;color:#fff} .camp-sub{margin:.7rem 0 0;font-size:clamp(1rem,2.1vw,1.32rem);line-height:1.45; color:rgba(255,255,255,.87);max-width:34rem} .camp-acts{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.5rem} .camp-btn{display:inline-block;border-radius:999px;padding:.82rem 1.7rem;font-weight:700; font-size:1rem;text-decoration:none;transition:transform .18s ease,background .18s ease} .camp-btn:hover{transform:translateY(-1px)} .camp-btn-go{background:#E9B84E;color:#14110A} .camp-btn-go:hover{background:#f3c96a} .camp-btn-ghost{background:rgba(255,255,255,.12);color:#fff; border:1px solid rgba(255,255,255,.34);backdrop-filter:blur(6px)} .camp-btn-ghost:hover{background:rgba(255,255,255,.2)} .camp-note{margin:1.1rem 0 0;font-size:.88rem;color:rgba(255,255,255,.72)} .camp-who{margin:.35rem 0 0;font-size:.88rem;font-weight:600;color:rgba(255,255,255,.82)} @media(max-width:640px){ .camp-hero{min-height:78vh} .camp-btn{width:100%;text-align:center} }