/** * Services listing page — visual reskin. * * ⚠️ PRESENTATION ONLY. No markup, no template, no block config. * * Every selector here hooks onto what the Services listing type (260) already * renders through MyListing's own single-page builder, so the block builder * keeps working: reorder or remove a block in the admin and this skin follows * it. Nothing here adds, removes, or relabels a control — a button that says * "Leave a review" still says "Leave a review", because restyling a control * into looking like a different one is how a page starts lying to people. * * Scoped to `body.type-services` throughout. That class is on the of * every services listing and nothing else, which is what makes this safe to * apply to all of them at once without touching the other listing types. * * Block anatomy every rule below relies on: * div.col-md-12.block-type- * div.element * div.pf-head > div.title-style-1 > i.mi. + h3.title-style-1__heading * div.pf-body */ /* ═══════════════════════════════════════════════════════════════════════════ 0. TOKENS Sampled from the mockup. Primary defers to the site variable so a palette change still reaches this page; the rest are this skin's own. ═══════════════════════════════════════════════════════════════════════════ */ body.type-services { --sk-teal: var(--mfv-primary, #0e7490); --sk-teal-deep: #0b5a6e; --sk-teal-ink: #084a5c; --sk-teal-wash: #e4f1f4; --sk-teal-line: #cfe6ea; --sk-orange: #ef8b32; --sk-orange-dark: #dd7a22; --sk-orange-wash: #fdeedd; --sk-navy: #0c1a22; --sk-pink: #fdeceb; --sk-pink-ink: #d0524e; --sk-cream: #fdf5e6; --sk-cream-line: #f3e4c8; --sk-ink: #16232e; --sk-muted: #6b7d8c; --sk-line: #e6ecf1; --sk-card: #ffffff; --sk-page: #f7f9fa; /* * ⚠️ Matched to the shared skin (mfv-listing-skin.css), not chosen here. * These were 16px / 10px, which made services the one page whose cards were * visibly rounder than every other listing type. The radius is a * site-wide decision, so it follows the shared value. */ --sk-r: 7px; /* card radius */ --sk-r-sm: 6px; /* chip radius */ --sk-shadow: 0 1px 2px rgba(22, 35, 46, .04), 0 8px 24px rgba(22, 35, 46, .05); } body.type-services { background: var(--sk-page); } /* ═══════════════════════════════════════════════════════════════════════════ 1. HERO — see mfv-listing-skin.css The services hero used to be its own thing: a dark teal rounded card floating bottom-left over the cover, with a second, differently-built version for mobile. It is now the shared hero every listing type uses — cover 380px, a vertical wash, the identity in plain white type bottom-left with the emblem inline, and the actions bottom-right. Both blocks (desktop and mobile) were REMOVED rather than overridden: two hero treatments on one cover do not average, they fight, and the loser is whichever the cascade happens to reach second. Recoverable from git. ═══════════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════════ 2. TAB BAR — active tab becomes a filled teal pill ═══════════════════════════════════════════════════════════════════════════ */ body.type-services .profile-header { background: var(--sk-card); border-bottom: 1px solid var(--sk-line); box-shadow: none; } body.type-services .profile-menu > ul { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; padding: 14px 0; } body.type-services .profile-menu > ul > li { float: none; margin: 0; } body.type-services .profile-menu a.listing-tab-toggle { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 20px; border: 0; border-radius: 999px; background: transparent; color: var(--sk-muted) !important; font-size: 14px; font-weight: 600; line-height: 1; transition: background .16s ease, color .16s ease; } body.type-services .profile-menu > ul > li:not(.active) a.listing-tab-toggle:hover { background: var(--sk-teal-wash); color: var(--sk-teal) !important; } body.type-services .profile-menu > ul > li.active a.listing-tab-toggle { background: var(--sk-teal); color: #fff !important; box-shadow: 0 4px 12px rgba(10, 74, 92, .22); } /* The theme draws the active state as an underline; the pill replaces it. */ body.type-services .profile-menu > ul > li.active a.listing-tab-toggle::after, body.type-services .profile-menu > ul > li a.listing-tab-toggle::after { display: none; } body.type-services .profile-menu .mfv-tab-icon { display: inline-flex; font-size: 16px; } body.type-services .profile-menu .items-counter { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: rgba(255, 255, 255, .22); font-size: 11px; font-weight: 700; line-height: 20px; text-align: center; } body.type-services .profile-menu > ul > li:not(.active) .items-counter { background: var(--sk-teal-wash); color: var(--sk-teal); } /* ═══════════════════════════════════════════════════════════════════════════ 3. QUICK ACTIONS — light outlined pills with coloured icons ═══════════════════════════════════════════════════════════════════════════ */ body.type-services .qla-container { padding-top: 20px; } body.type-services .quick-listing-actions > ul { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; } body.type-services .quick-listing-actions > ul > li { float: none; margin: 0; } body.type-services .quick-listing-actions > ul > li > a, body.type-services .quick-listing-actions > ul > li > button { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border: 1px solid var(--sk-line); border-radius: 999px; /* ⚠️ `.quick-listing-actions > ul > li > a` sets background-color to --mfl-primary with !important, which is why these stayed solid teal. */ background: var(--sk-card) !important; color: var(--sk-ink) !important; font-size: 13.5px; font-weight: 600; line-height: 1; box-shadow: 0 1px 2px rgba(22, 35, 46, .04); transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; } /* * ⚠️ White-on-white trap. The theme sets * .quick-listing-actions > ul > li > a > i, * .quick-listing-actions > ul > li > a span { color: #ffffff !important } * because its pills are solid teal. Turning the pill white without matching * that !important leaves a row of blank capsules — the icon and the label are * both still there, painted white on white. */ body.type-services .quick-listing-actions > ul > li > a span, body.type-services .quick-listing-actions > ul > li > button span { color: var(--sk-ink) !important; } body.type-services .quick-listing-actions > ul > li > a:hover, body.type-services .quick-listing-actions > ul > li > button:hover { border-color: var(--sk-teal-line); box-shadow: 0 6px 16px rgba(22, 35, 46, .09); transform: translateY(-1px); } body.type-services .quick-listing-actions i { font-size: 16px; color: var(--sk-teal) !important; } /* Bookmark and Report carry their own meaning, so they carry their own colour. */ body.type-services .quick-listing-actions .mylisting-bookmark-item i { color: var(--sk-orange) !important; } body.type-services .quick-listing-actions > ul > li:last-of-type i { color: var(--sk-pink-ink) !important; } body.type-services .quick-listing-actions .mfv-booking-trigger > a { border-color: transparent; /* The booking module paints this one itself, so it needs the same treatment. */ background: var(--sk-teal) !important; color: #fff !important; } body.type-services .quick-listing-actions .mfv-booking-trigger > a span { color: #fff !important; } body.type-services .quick-listing-actions .mfv-booking-trigger i { color: #fff !important; } /* ═══════════════════════════════════════════════════════════════════════════ 4. OWNER-ONLY CARDS Rendered only for the listing owner and admins, so they are invisible to visitors — but they are the first two things the owner sees, and in the mockup they carry the strongest colour on the page. ═══════════════════════════════════════════════════════════════════════════ */ /* * ⚠️ EVERY ELEMENT IN THE OWNER CONTROLS BAR IS STYLED WITH AN INLINE * `style=""` ATTRIBUTE, so an ordinary rule here loses no matter how specific. * * That mismatch produced a real bug: `color:#fff` won (the inline colour has no * !important) while `background` lost to the inline `background:#fff`, leaving * the "Edit listing" button as white text on a white box — unreadable. Either * both sides of a colour pair carry !important, or neither may. * * Inline values being overridden here: * .mfv-owner-controls background:linear-gradient(#f0fdfa→#eff6ff); border:1px solid #a7f3d0 * .mfv-owner-controls__toggle color:#0f172a * .mfv-owner-controls__hint color:#64748b * .mfv-owner-controls__edit color:#0e7490; background:#fff; border:1px solid #99f6e4 * The CTA tiles keep their own state colours (#ecfdf5/#065f46, #fff7ed/#9a3412): * they are self-contained light cards and stay legible on the dark bar. */ /* ── Completion meter — mint card ── */ body.type-services .mfv-lc { padding: 20px 22px; border: 1px solid var(--sk-teal-line); border-radius: var(--sk-r); background: var(--sk-teal-wash); box-shadow: none; } body.type-services .mfv-lc__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 12px; } body.type-services .mfv-lc__title { font-size: 15.5px; font-weight: 600; color: var(--sk-teal-ink); } body.type-services .mfv-lc__title strong { font-weight: 800; } body.type-services .mfv-lc__note { font-size: 11.5px; color: #7c99a2; } body.type-services .mfv-lc__bar { height: 9px; border-radius: 999px; background: rgba(11, 90, 110, .13); overflow: hidden; } body.type-services .mfv-lc__fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient( 90deg, var(--sk-teal) 0%, #17a2b8 100% ); } body.type-services .mfv-lc__missing { margin: 12px 0 0; font-size: 13px; color: #5d8290; } body.type-services .mfv-lc__btn { display: inline-flex; align-items: center; height: 40px; margin-top: 14px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--sk-teal); color: #fff !important; font-size: 13.5px; font-weight: 600; } body.type-services .mfv-lc__btn:hover { background: var(--sk-teal-deep); } /* ── Owner controls — near-black bar ── */ /* * Light, not black. The near-black slab read as a piece of another site sitting * between the mint completion card above it and the white blocks below — three * different grounds in three consecutive rows. A soft teal tint keeps the * owner-only strip reading as one band, and the CTA tiles inside are white * cards that still separate from it. */ body.type-services .mfv-owner-controls { border: 1px solid var(--sk-teal-line) !important; border-radius: var(--sk-r) !important; background: var(--sk-teal-wash) !important; box-shadow: none !important; } body.type-services .mfv-owner-controls__header { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 16px 20px; } /* ⚠️ Text colours must flip with the ground. These were white for the dark bar; left as-is they would be white on a pale tint — the same white-on-white class of bug the Edit button had. */ body.type-services .mfv-owner-controls__toggle, body.type-services .mfv-owner-controls__toggle strong, body.type-services .mfv-owner-controls__title { color: var(--sk-teal-ink) !important; } body.type-services .mfv-owner-controls__hint { color: #5d8290 !important; } body.type-services .mfv-owner-controls__chevron { color: var(--sk-teal) !important; } body.type-services .mfv-owner-controls__badge { background: #fff !important; border-color: var(--sk-teal-line) !important; color: var(--sk-teal) !important; } body.type-services .mfv-owner-controls__badge i, body.type-services .mfv-owner-controls__badge svg { color: var(--sk-orange); fill: var(--sk-orange); font-size: 17px; } body.type-services .mfv-owner-controls__hint { flex: 1 1 220px; font-size: 12px; color: rgba(255, 255, 255, .58); } body.type-services .mfv-owner-controls__toggle { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 10px; background: rgba(255, 255, 255, .06); color: #fff; font-size: 13px; font-weight: 600; } body.type-services .mfv-owner-controls__toggle:hover { background: rgba(255, 255, 255, .12); } /* ⚠️ background AND border need !important here or the button is white text on the inline white background — the exact unreadable state reported. */ body.type-services .mfv-owner-controls__edit { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 16px !important; border: 1px solid transparent !important; border-radius: 999px !important; background: var(--sk-orange) !important; color: #fff !important; font-size: 12.5px !important; font-weight: 700 !important; white-space: nowrap; } body.type-services .mfv-owner-controls__edit:hover { background: var(--sk-orange-dark) !important; } body.type-services .mfv-owner-controls__tile { border-radius: 12px; } /* ── Booking prompt — dark teal card ── */ body.type-services .mfv-owner-cta-col > * , body.type-services .mfv-owner-cta { border: 0; border-radius: var(--sk-r); background: linear-gradient( 155deg, var(--sk-teal-deep) 0%, var(--sk-teal-ink) 100% ); box-shadow: 0 10px 26px rgba(8, 60, 74, .22); color: #fff; } body.type-services .mfv-owner-cta__eyebrow { display: block; margin-bottom: 8px; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .55); } body.type-services .mfv-owner-cta__title { margin: 0 0 8px; font-size: 16px; font-weight: 700; line-height: 1.35; color: #fff; } body.type-services .mfv-owner-cta__body { font-size: 13px; line-height: 1.6; color: rgba(255, 255, 255, .78); } body.type-services .mfv-owner-cta__quota { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: 11.5px; color: rgba(255, 255, 255, .6); } body.type-services .mfv-owner-cta-col a:not(.mfv-owner-cta__link), body.type-services .mfv-owner-cta a.button, body.type-services .mfv-owner-cta__btn { display: inline-flex; align-items: center; justify-content: center; height: 42px; margin-top: 14px; padding: 0 20px; border-radius: 999px; background: var(--sk-orange); color: #fff !important; font-size: 13.5px; font-weight: 700; } body.type-services .mfv-owner-cta-col a:not(.mfv-owner-cta__link):hover { background: var(--sk-orange-dark); } /* * ⚠️ The booking module prints its OWN `