/* ---------------------------------------------------------------------------------------- * Prospera — Services catalogue * * A dense, scannable service menu that replaces the photo-card carousel. * Services are grouped by their subcategory; anything without one falls into * "General". Group identity is carried by a single accent colour that appears * in three places only: the filter chip, the group rule, and the card's edge. * * Everything here is namespaced under .svc- so it cannot collide with the * template styles in custom.css. Logical properties keep RTL working. * -------------------------------------------------------------------------------------- */ .svc-catalog { --svc-ink: var(--primary-color, #0d3b66); --svc-muted: var(--text-color, #4a4a4a); --svc-line: rgba(13, 59, 102, 0.1); --svc-surface: #ffffff; --svc-tint: var(--secondary-color, #eef6f5); --svc-accent: var(--accent-color, #2fa8a0); --svc-gap: 14px; --svc-radius: 14px; } /* Group accents, cycled in order. Derived from the brand palette. * * These live on :root rather than on .svc-catalog because a card hands its * group's accent to the detail dialog, and that dialog is appended to — * outside the catalogue, where a token scoped to .svc-catalog would not * resolve and every accented rule would silently fall back to inherited. */ :root { --svc-a1: #2fa8a0; --svc-a2: #0d3b66; --svc-a3: #c08a4e; --svc-a4: #5a8fa8; --svc-a5: #8a7cb0; /* "General" is where uncategorised services land, not a category of its own, so it stays neutral rather than taking a colour from the cycle. */ --svc-neutral: #90a4b2; } /* Every icon in the catalogue is the same stroked arrow. */ .svc-catalog svg { flex: 0 0 auto; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } html[dir='rtl'] .svc-catalog svg { transform: scaleX(-1); } /* ---------------------------------------------------------------- Filter rail */ .svc-rail { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 38px; padding: 0; list-style: none; } .svc-chip { display: inline-flex; align-items: baseline; gap: 8px; padding: 8px 16px; border: 1px solid var(--svc-line); border-radius: 100px; background: var(--svc-surface); font-family: var(--default-font, sans-serif); font-size: 13px; font-weight: 500; line-height: 1.2; color: var(--svc-ink); cursor: pointer; transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease; } .svc-chip__count { font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; opacity: 0.5; } .svc-chip:hover { border-color: var(--svc-accent); } .svc-chip[aria-pressed='true'] { background: var(--svc-accent); border-color: var(--svc-accent); color: #fff; } .svc-chip[aria-pressed='true'] .svc-chip__count { opacity: 0.75; } .svc-chip:focus-visible { outline: 2px solid var(--svc-ink); outline-offset: 2px; } /* ---------------------------------------------------------------- Group */ .svc-group + .svc-group { margin-top: 44px; } .svc-group[hidden] { display: none; } .svc-group__head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; } .svc-group__title { margin: 0; font-family: var(--accent-font, serif); font-size: 24px; font-weight: 500; line-height: 1.2; color: var(--svc-ink); /* Subcategory and service names are the merchant's own words — never re-case them ("3 to 5 HP" must not become "3 To 5 HP"). */ } .svc-group__rule { flex: 1 1 auto; height: 1px; min-width: 20px; background: var(--svc-accent); opacity: 0.35; } .svc-group__count { flex: 0 0 auto; font-family: var(--default-font, sans-serif); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--svc-muted); opacity: 0.7; font-variant-numeric: tabular-nums; } /* ---------------------------------------------------------------- Grid + card */ .svc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: var(--svc-gap); } .svc-card { position: relative; display: flex; flex-direction: column; overflow: hidden; padding: 20px 22px 18px; border: 1px solid var(--svc-line); border-radius: var(--svc-radius); background: var(--svc-surface); /* Cards sit on the mint section on the home page and on white on the services page, so they carry their own edge rather than relying on contrast with whatever is behind them. */ box-shadow: 0 1px 3px rgba(13, 59, 102, 0.05); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease, border-color 0.3s ease; } /* The group accent, carried onto every card in the group. */ .svc-card::before { content: ''; position: absolute; z-index: 2; inset-block: 0; inset-inline-start: 0; width: 3px; background: var(--svc-accent); transform: scaleX(1); transform-origin: left center; transition: width 0.3s ease; } .svc-card:hover, .svc-card:focus-within { transform: translateY(-3px); border-color: transparent; box-shadow: 0 12px 28px rgba(13, 59, 102, 0.12); } .svc-card:hover::before, .svc-card:focus-within::before { width: 5px; } .svc-card__body { position: relative; z-index: 1; display: flex; flex: 1 1 auto; flex-direction: column; gap: 10px; } /* ---------------------------------------------------------------- Card photo */ /* The photo is not in the layout: it waits behind the card and washes in on hover. That keeps every card the same height whether or not the merchant uploaded anything, so the grid never goes ragged. * * The leaf — two opposite corners drawn long, picking up the leaf ornaments * already printed into the page backgrounds — is what you actually see arrive: * the card's white surface stays visible at those two corners. */ .svc-card__media { position: absolute; inset: 6px; z-index: 0; margin: 0; overflow: hidden; border-radius: 34px 8px 34px 8px; background: var(--svc-ink); opacity: 0; pointer-events: none; transition: opacity 0.45s ease; } html[dir='rtl'] .svc-card__media { border-radius: 8px 34px 8px 34px; } .svc-card:hover .svc-card__media, .svc-card:focus-within .svc-card__media { opacity: 1; } .svc-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; /* Drifts back to rest over the length of the hover — the photo settles rather than sitting there. */ transform: scale(1.12); transition: transform 1.6s cubic-bezier(0.22, 1, 0.36, 1); } .svc-card:hover .svc-card__media img, .svc-card:focus-within .svc-card__media img { transform: scale(1); } /* Navy wash, so any photo the merchant uploads still reads as a backdrop and the text stays legible over it. */ .svc-card__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient( 155deg, rgba(13, 59, 102, 0.72) 0%, rgba(13, 59, 102, 0.84) 100% ); } /* "+2" — how many more photos are waiting in the dialog. Top corner, clear of the arrow in the card's footer. */ .svc-card__count { position: absolute; inset-block-start: 12px; inset-inline-end: 14px; z-index: 1; padding: 3px 9px; border-radius: 100px; background: rgba(255, 255, 255, 0.18); font-family: var(--default-font, sans-serif); font-size: 11px; font-weight: 600; line-height: 1.5; color: #fff; font-variant-numeric: tabular-nums; } /* Text inverts for the duration of the reveal. Only cards that have a photo do this — the rest keep the plain lift. */ .svc-card--photo:hover .svc-card__tag, .svc-card--photo:focus-within .svc-card__tag, .svc-card--photo:hover .svc-card__name, .svc-card--photo:focus-within .svc-card__name, .svc-card--photo:hover .svc-card__price, .svc-card--photo:focus-within .svc-card__price { color: #fff; } .svc-card--photo:hover .svc-card__desc, .svc-card--photo:focus-within .svc-card__desc { color: rgba(255, 255, 255, 0.76); } .svc-card--photo:hover .svc-card__foot, .svc-card--photo:focus-within .svc-card__foot { border-top-color: rgba(255, 255, 255, 0.22); } .svc-card--photo:hover .svc-card__go, .svc-card--photo:focus-within .svc-card__go { background: rgba(255, 255, 255, 0.18); color: #fff; } /* Holds the subcategory tag and the match badge on one line. Either can be absent (most cards in the grouped layout carry no tag; the badge only appears for a signed-in, intake-complete client), so this only renders at all when at least one of them does — see services-render.js. */ .svc-card__meta { display: flex; align-items: center; gap: 8px; } /* Names the subcategory on the card, for the flat layout that has no headers. */ .svc-card__tag { font-family: var(--default-font, sans-serif); font-size: 10.5px; font-weight: 600; letter-spacing: 0.09em; line-height: 1.2; text-transform: uppercase; color: var(--svc-accent); transition: color 0.35s ease; } /* The client's tag-match score for this service. Pushed to the far end of .svc-card__meta regardless of whether a tag sits beside it, so it lands in the same spot on every card. Solid fill rather than plain text like the tag -- it needs to read the same over a photo's hover wash as it does on plain white, and a filled pill does that without a separate hover rule. */ .svc-card__match { margin-inline-start: auto; flex: 0 0 auto; padding: 3px 10px; border-radius: 100px; background: var(--svc-accent); font-family: var(--default-font, sans-serif); font-size: 10.5px; font-weight: 700; line-height: 1.5; color: #fff; white-space: nowrap; font-variant-numeric: tabular-nums; } .svc-card[hidden] { display: none; } .svc-card__name { margin: 0; font-family: var(--accent-font, serif); font-size: 17px; font-weight: 500; line-height: 1.35; color: var(--svc-ink); transition: color 0.35s ease; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Whole-card hit area, so the title link covers the card. */ .svc-card__link { color: inherit; text-decoration: none; cursor: pointer; } /* Hand over to the site's custom cursor, but only where there is one. */ @media (hover: hover) and (pointer: fine) { .svc-card__link { cursor: none; } } .svc-card__link::after { content: ''; position: absolute; inset: 0; z-index: 2; } .svc-card__link:focus-visible { outline: none; } .svc-card:focus-within { outline: 2px solid var(--svc-ink); outline-offset: 2px; } .svc-card__desc { margin: 0; font-family: var(--default-font, sans-serif); font-size: 13px; font-weight: 400; line-height: 1.65; color: var(--svc-muted); transition: color 0.35s ease; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .svc-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; /* Pushes the price to the bottom of a stretched card without letting the description grow past its two-line clamp. */ margin-top: auto; padding-top: 12px; border-top: 1px solid var(--svc-line); transition: border-color 0.35s ease; } .svc-card__price { font-family: var(--default-font, sans-serif); font-size: 15px; font-weight: 600; line-height: 1.2; color: var(--svc-ink); font-variant-numeric: tabular-nums; transition: color 0.35s ease; /* Absorbs the free space so the duration and the arrow sit together at the end of the row. An auto margin is consumed before justify-content gets a look in, which is what keeps the duration on the right rather than stranded in the middle of a three-item space-between. */ margin-inline-end: auto; } /* Session length, on the right of the foot beside the arrow. Quieter than the price on purpose: the price is the figure the eye should land on first, and this answers the follow-up question. Kept legible rather than decorative -- the muted ink is the same one the "On request" price uses, which already clears contrast on both the plain and the photo card. */ .svc-card__duration { flex: 0 0 auto; font-family: var(--default-font, sans-serif); font-size: 12px; font-weight: 600; line-height: 1.2; letter-spacing: 0.02em; color: var(--svc-muted); font-variant-numeric: tabular-nums; white-space: nowrap; transition: color 0.35s ease; } .svc-card--photo:hover .svc-card__duration, .svc-card--photo:focus-within .svc-card__duration { color: rgba(255, 255, 255, 0.76); } .svc-card__price--muted { font-size: 12px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--svc-muted); opacity: 0.7; } .svc-card__go { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--svc-tint); color: var(--svc-accent); font-size: 13px; transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease; } .svc-card__go svg { width: 12px; height: 12px; } .svc-card:hover .svc-card__go { background: var(--svc-accent); color: #fff; transform: translateX(3px); } html[dir='rtl'] .svc-card:hover .svc-card__go { transform: translateX(-3px); } /* ---------------------------------------------------------------- Footer actions */ .svc-actions { display: flex; justify-content: center; margin-top: 32px; } .svc-more { display: inline-flex; align-items: center; gap: 10px; padding: 13px 28px; border: 1px solid var(--svc-ink); border-radius: 100px; background: transparent; font-family: var(--default-font, sans-serif); font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: var(--svc-ink); transition: background-color 0.3s ease, color 0.3s ease; } .svc-more:hover, .svc-more:focus-visible { background: var(--svc-ink); color: #fff; } /* ---------------------------------------------------------------- Helper banner */ /* Navy, so the closing note reads the same on the mint home section and the white services page — and so it is clearly not another service card. */ .svc-help { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin-top: 44px; padding: 26px 30px; border-radius: var(--svc-radius); background: var(--svc-ink); } .svc-help__text { flex: 1 1 320px; } .svc-help__title { margin: 0 0 5px; font-family: var(--accent-font, serif); font-size: 21px; font-weight: 500; line-height: 1.3; color: #fff; } .svc-help__body { margin: 0; font-family: var(--default-font, sans-serif); font-size: 13px; line-height: 1.6; color: rgba(255, 255, 255, 0.72); } /* Shared filled pill: the WhatsApp route out of both the banner and the empty state. */ .svc-cta { display: inline-flex; align-items: center; gap: 9px; flex: 0 0 auto; padding: 13px 26px; border-radius: 100px; background: var(--svc-accent); font-family: var(--default-font, sans-serif); font-size: 13px; font-weight: 600; color: #fff; transition: background-color 0.3s ease; } /* Darkened teal rather than navy: this pill sits on a navy banner in one place and on a white panel in the other. */ .svc-cta:hover, .svc-cta:focus-visible { background: #24867f; color: #fff; } /* ---------------------------------------------------------------- Empty state */ .svc-empty { padding: 52px 28px; border: 1px dashed rgba(13, 59, 102, 0.22); border-radius: var(--svc-radius); background: var(--svc-surface); text-align: center; } .svc-empty__title { margin: 0 0 8px; font-family: var(--accent-font, serif); font-size: 22px; font-weight: 500; color: var(--svc-ink); } .svc-empty__body { max-width: 42ch; margin: 0 auto 22px; font-family: var(--default-font, sans-serif); font-size: 14px; line-height: 1.7; color: var(--svc-muted); } /* ---------------------------------------------------------------- Responsive */ @media only screen and (max-width: 767px) { .svc-catalog { --svc-gap: 12px; } /* One row of chips that scrolls rather than a stack four rows deep. */ .svc-rail { flex-wrap: nowrap; overflow-x: auto; margin-inline: -15px; padding-inline: 15px; padding-bottom: 4px; margin-bottom: 28px; scrollbar-width: none; } .svc-rail::-webkit-scrollbar { display: none; } .svc-chip { flex: 0 0 auto; } .svc-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); } .svc-group + .svc-group { margin-top: 34px; } .svc-group__title { font-size: 20px; } .svc-card { padding: 16px 18px 14px; } .svc-help { padding: 22px; } } @media (prefers-reduced-motion: reduce) { .svc-card, .svc-card::before, .svc-card__go, .svc-card__media, .svc-card__media img, .svc-chip, .svc-more, .svc-cta { transition: none; } .svc-card:hover, .svc-card:focus-within { transform: none; } .svc-card:hover .svc-card__go, .svc-card:hover .svc-card__media img, .svc-card:focus-within .svc-card__media img, .svc-card__media img { transform: none; } } /* ---------------------------------------------------------------- Tag filter * * The second rail: what a service is about, rather than which family it sits * in. Multi-select, so several chips can read as pressed at once — which is * why it gets its own block with a legend instead of joining the subcategory * rail, where exactly one chip is ever active. * * Chips reuse .svc-chip wholesale; only the differences live here. * Markup: services-render.js renderTagRail. * ------------------------------------------------------------------------- */ .svc-tags { margin: -14px 0 34px; padding: 16px 18px; border: 1px solid var(--svc-line); border-radius: var(--svc-radius); background: var(--svc-tint); } /* The negative pull above is against the subcategory rail's 38px bottom margin. With only one subcategory that rail is not drawn at all, and the pull would instead drag this block up into whatever precedes the catalogue. */ .svc-tags:first-child { margin-top: 0; } .svc-tags__legend { margin: 0 0 12px; font-family: var(--default-font, sans-serif); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; line-height: 1.2; text-transform: uppercase; color: var(--svc-ink); opacity: 0.6; } .svc-tags__rail { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } /* A pressed tag chip is one of several, so it is outlined rather than filled: five solid accent pills in a row read as one block of colour and stop telling the reader which ones they picked. */ .svc-chip--tag[aria-pressed='true'] { background: var(--svc-surface); border-color: var(--svc-accent); box-shadow: inset 0 0 0 1px var(--svc-accent); color: var(--svc-ink); } .svc-chip--tag[aria-pressed='true'] .svc-chip__count { opacity: 0.55; } /* Text, not a chip: it undoes a choice rather than being one, and a sixth pill in the row would read as a seventh tag. */ .svc-tags__clear { margin-inline-start: 4px; padding: 8px 4px; border: 0; background: none; font-family: var(--default-font, sans-serif); font-size: 12.5px; font-weight: 600; line-height: 1.2; color: var(--svc-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; opacity: 0.65; transition: opacity 0.25s ease; } .svc-tags__clear:hover { opacity: 1; } .svc-tags__clear:focus-visible { outline: 2px solid var(--svc-ink); outline-offset: 2px; border-radius: 4px; } /* --- Tags on a card ------------------------------------------------------- */ /* Sits between the description and the foot. The foot's `margin-top: auto` is what keeps the price on the baseline whether or not this row is here, so a card with tags is not a taller card. */ .svc-card__tags { display: flex; flex-wrap: nowrap; gap: 5px; margin: 10px 0 0; padding: 0; list-style: none; overflow: hidden; } .svc-card__chip { flex: 0 1 auto; min-width: 0; padding: 2.5px 8px; border-radius: 4px; background: rgba(13, 59, 102, 0.06); font-family: var(--default-font, sans-serif); font-size: 10.5px; font-weight: 600; letter-spacing: 0.03em; line-height: 1.5; color: var(--svc-muted); /* One line each: a wrapped chip would push the price out of line with the rest of the row of cards. */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background-color 0.35s ease, color 0.35s ease; } .svc-card__chip--more { flex: 0 0 auto; font-variant-numeric: tabular-nums; opacity: 0.7; } /* Over a photo's hover wash, the same as the description and price do. */ .svc-card--photo:hover .svc-card__chip, .svc-card--photo:focus-within .svc-card__chip { background: rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.82); } /* --- No match ------------------------------------------------------------- */ /* Reuses .svc-empty for the panel; only the reset button is new. */ .svc-nomatch__reset { margin-top: 2px; } @media only screen and (max-width: 767px) { .svc-tags { margin: -8px 0 26px; padding: 14px; } /* One scrolling row, like the subcategory rail above it. Clear scrolls with the chips rather than pinning, so it cannot cover the last of them. */ .svc-tags__rail { flex-wrap: nowrap; overflow-x: auto; margin-inline: -14px; padding-inline: 14px; padding-bottom: 4px; scrollbar-width: none; } .svc-tags__rail::-webkit-scrollbar { display: none; } .svc-tags__clear { flex: 0 0 auto; } } @media (prefers-reduced-motion: reduce) { .svc-card__chip, .svc-tags__clear { transition: none; } } /* Two routes out of the banner rather than one -- see renderHelpBanner in js/services-render.js on why Call and Chat are not interchangeable. The pair wraps as a unit under the text on a narrow screen, which is why it is its own flex container instead of two more children of .svc-help. */ .svc-help__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; flex: 0 0 auto; } /* Call is the outlined one of the pair. Both filled would make the reader choose between two identical-looking buttons; outlined-then-filled reads as "either of these" with the lighter commitment first. */ .svc-cta--call { background: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4); } .svc-cta--call:hover, .svc-cta--call:focus-visible { background: rgba(255, 255, 255, 0.12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.75); } /* Tabular figures so the number does not shimmer against the pill's edge, and a touch quieter than the label it follows. */ .svc-cta__number { font-variant-numeric: tabular-nums lining-nums; opacity: 0.85; } @media only screen and (max-width: 575px) { /* Below this the two pills side by side each get about 130px, which cuts the number in half. Stacked and full width, they stay tappable. */ .svc-help__actions { width: 100%; } .svc-help__actions .svc-cta { flex: 1 1 100%; justify-content: center; } }