/* 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; font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; 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: 38px; height: 38px; border-radius: 10px; flex: none; box-shadow: 0 2px 8px rgb(0 0 0 / .25); } .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; } .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: .14em; text-transform: uppercase; 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); } /* 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) ---------- */ .gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-2); } .gallery-item { position: relative; aspect-ratio: 4/3; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-1); background: color-mix(in srgb, var(--ink) 6%, transparent); } .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); } } @media (max-width: 560px) { .gal-track { grid-template-rows: 1fr; grid-auto-columns: 82%; } } /* ---------- 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; } /* ---------- 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); } .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; } .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-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: .16em; text-transform: uppercase; 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; } .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; margin-left: auto; } .topbar { flex-wrap: wrap; } .topbar.open .topnav { display: flex; flex-direction: column; flex-basis: 100%; padding: .8rem .6rem 1rem; gap: 1rem; } .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; } .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 ---------- */ .hours-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem; align-items: stretch; } .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; } /* ========================================================================== 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; }