/* * Daman.Professionalist — storefront styles (plain CSS; base Flex theme does NOT bundle module SCSS). * Uses theme CSS custom properties so it tracks light/dark + child themes. */ /* ===== Profile page ===== */ .pro-profile { --pro-accent: var(--primary, #2f6fed); margin-bottom: 2rem; } .pro-hero { position: relative; border-radius: 1rem; overflow: hidden; background: linear-gradient(135deg, var(--pro-accent) 0%, color-mix(in srgb, var(--pro-accent) 65%, #000) 100%); color: #fff; padding: 2.25rem 1.75rem 1.5rem; } .pro-hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 85% 15%, rgba(255,255,255,.18), transparent 45%); pointer-events: none; } .pro-hero-inner { position: relative; display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; } .pro-avatar, .pro-avatar-placeholder { width: 124px; height: 124px; border-radius: 50%; object-fit: cover; border: 4px solid rgba(255,255,255,.85); box-shadow: 0 8px 24px rgba(0,0,0,.25); flex: 0 0 auto; background: rgba(255,255,255,.15); } .pro-avatar-placeholder { display: flex; align-items: center; justify-content: center; } .pro-avatar-placeholder i { font-size: 3rem; color: rgba(255,255,255,.9); } .pro-hero-head { min-width: 0; } .pro-hero-name { margin: 0 0 .35rem; font-weight: 700; font-size: clamp(1.4rem, 2.5vw, 2rem); line-height: 1.15; } .pro-profession-chip { display: inline-flex; align-items: center; gap: .4rem; background: rgba(255,255,255,.18); color: #fff; border: 1px solid rgba(255,255,255,.35); padding: .25rem .75rem; border-radius: 2rem; font-size: .85rem; text-decoration: none; transition: background .15s ease; } .pro-profession-chip:hover { background: rgba(255,255,255,.3); color: #fff; } .pro-hero-meta { display: flex; flex-wrap: wrap; gap: .4rem .9rem; margin-top: .65rem; font-size: .9rem; } .pro-hero-meta > span { display: inline-flex; align-items: center; gap: .35rem; opacity: .95; } .pro-availability { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .7rem; border-radius: 2rem; font-size: .8rem; font-weight: 600; } .pro-availability .dot { width: .55rem; height: .55rem; border-radius: 50%; background: currentColor; } .pro-availability.is-available { background: rgba(33,191,115,.2); color: #d6ffe9; } .pro-availability.is-busy { background: rgba(255,193,7,.2); color: #fff3cd; } .pro-availability.is-offline { background: rgba(255,255,255,.15); color: #e9ecef; } .pro-stars { color: #ffc94d; letter-spacing: 1px; } /* Body cards */ .pro-card { border: 1px solid var(--border-color, #e5e7eb); border-radius: .85rem; background: var(--body-bg, #fff); margin-top: 1.25rem; overflow: hidden; } .pro-card-head { padding: .85rem 1.15rem; font-weight: 600; border-bottom: 1px solid var(--border-color, #e5e7eb); display: flex; align-items: center; gap: .5rem; } .pro-card-body { padding: 1.15rem; } .pro-chip-list { display: flex; flex-wrap: wrap; gap: .5rem; } .pro-chip-list a { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .75rem; border-radius: 2rem; border: 1px solid var(--border-color, #e5e7eb); text-decoration: none; font-size: .875rem; color: var(--body-color, inherit); transition: border-color .15s ease, background .15s ease; } .pro-chip-list a:hover { border-color: var(--pro-accent, #2f6fed); background: color-mix(in srgb, var(--pro-accent, #2f6fed) 8%, transparent); } /* Sticky contact card */ .pro-contact-card { position: sticky; top: 1rem; } .pro-contact-head { background: var(--pro-accent, #2f6fed); color: #fff; border-bottom: 0; } .pro-contact-success { text-align: center; padding: 1.5rem .5rem; } .pro-contact-success i { color: var(--success, #21bf73); font-size: 2.5rem; margin-bottom: .5rem; } @media (max-width: 575.98px) { .pro-hero-inner { flex-direction: column; text-align: center; } .pro-hero-meta { justify-content: center; } } /* ===== Profession browse page (cards) ===== */ /* Wider tracks than before (220px) because each card is now a ROW: at 220px the name, the trades and the meta line all had to wrap, which is what made the cards tall in the first place. Fewer, wider, much shorter cards fit more of the directory on a screen than more, narrower, taller ones. */ /* Four across at the top end, and NEVER a squeezed card on the way there. The count is explicit rather than auto-fill — auto-fill picks it from a minimum width and would happily give five slivers on a wide screen. But an explicit count has the opposite failure, which is what shipped first: "four at 992px" is four cards of 170px, because at 992 the rail has just appeared and taken 275px out of the row. So the steps follow the ROOM, not the screen. The dip back to two at 992 is not a mistake: that is the width where the rail stops being a slide-over sheet and starts occupying a column. viewport results column cards 768 ~736 3 x 240 (no rail yet) 992 ~684 2 x 338 (rail appears) 1200 ~893 3 x 291 1500 ~1193 4 x 293 1920 ~1413 4 x 348 (shell caps at 1720) */ .pro-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; } @media (min-width: 900px) { .pro-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 992px) { .pro-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1200px) { .pro-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1440px) { .pro-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* Two per row on a phone is ~185px of card, which is narrower than any of the card's rows were built for. Everything that assumed a comfortable line gets a compact treatment rather than being allowed to overflow: the facts stack, the avatar shrinks, and the CTA drops its icons' company. */ @media (max-width: 575.98px) { .pro-grid { gap: .45rem; } .pro-grid .pro-card-top { padding: .7rem .6rem .45rem; gap: .5rem; } .pro-grid .pro-card-pro .avatar, .pro-grid .pro-card-pro .avatar-ph { inline-size: 44px; block-size: 44px; } .pro-grid .pro-name { font-size: .88rem; } .pro-grid .pro-sub { font-size: .74rem; } .pro-grid .pro-card-pro .pro-stars { font-size: .68rem; } .pro-grid .pro-rate-n { font-size: .78rem; } .pro-grid .pro-rate-c { font-size: .7rem; } .pro-grid .pro-tags { padding: 0 .6rem .5rem; } .pro-grid .pro-tag { font-size: .68rem; padding: .15rem .4rem; } .pro-grid .pro-facts { padding: .5rem .6rem; } .pro-grid .pro-fact-v { font-size: .76rem; } .pro-grid .pro-fact-l { font-size: .68rem; } .pro-grid .pro-card-foot { padding: .5rem .6rem .6rem; gap: .25rem; } .pro-grid .pro-act { inline-size: 32px; block-size: 32px; font-size: .82rem; } .pro-grid .pro-cta { font-size: .75rem; padding-inline: .4rem; min-block-size: 32px; } /* The ribbon is a fixed wedge; on a 185px card it eats a third of the header. */ .pro-grid .pro-ribbon { inline-size: 40px; block-size: 40px; font-size: .6rem; padding-inline-end: 9px; padding-block-start: 5px; } } .pro-pro-card { display: flex; flex-direction: column; align-items: center; text-align: center; border: 1px solid var(--border-color, #e5e7eb); border-radius: .85rem; background: var(--body-bg, #fff); padding: 1.25rem 1rem; text-decoration: none; color: var(--body-color, inherit); transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease; } .pro-pro-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.1); transform: translateY(-3px); border-color: var(--pro-accent, #2f6fed); color: var(--body-color, inherit); } .pro-pro-card .avatar, .pro-pro-card .avatar-ph { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; margin-bottom: .75rem; border: 3px solid var(--body-bg, #fff); box-shadow: 0 2px 8px rgba(0,0,0,.12); background: color-mix(in srgb, var(--pro-accent, #2f6fed) 12%, transparent); display: flex; align-items: center; justify-content: center; } .pro-pro-card .avatar-ph i { font-size: 2rem; color: var(--pro-accent, #2f6fed); } .pro-pro-card .name { font-weight: 600; margin-bottom: .15rem; } .pro-pro-card .area { font-size: .8rem; color: var(--text-muted, #6c757d); } /* Promoted professional card (on category/product pages) */ .pro-promoted { border: 1px solid var(--border-color, #e5e7eb); border-radius: .85rem; background: var(--body-bg, #fff); padding: 1rem; display: flex; align-items: center; gap: .9rem; } .pro-promoted .avatar, .pro-promoted .avatar-ph { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; background: color-mix(in srgb, var(--pro-accent, #2f6fed) 12%, transparent); display: flex; align-items: center; justify-content: center; } .pro-promoted .avatar-ph i { color: var(--pro-accent, #2f6fed); font-size: 1.4rem; } .pro-promoted .name { font-weight: 600; margin: 0; } .pro-promoted .badge-promoted { font-size: .65rem; text-transform: uppercase; letter-spacing: .5px; background: color-mix(in srgb, var(--pro-accent, #2f6fed) 15%, transparent); color: var(--pro-accent, #2f6fed); padding: .1rem .45rem; border-radius: 1rem; } /* ===== Professionals: search box, back link, sub-category drill-down ===== */ .pro-search { max-width: 520px; } .pro-back { display: inline-flex; align-items: center; gap: .25rem; font-size: .85rem; text-decoration: none; color: var(--text-muted, #6c757d); margin-bottom: .25rem; } .pro-back:hover { color: var(--pro-accent, #2f6fed); } .pro-subcats { display: flex; flex-wrap: wrap; gap: .5rem; } .pro-subcat-chip { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid var(--border-color, #e5e7eb); border-radius: 2rem; padding: .35rem .75rem; text-decoration: none; color: var(--body-color, inherit); background: var(--body-bg, #fff); transition: border-color .2s ease, box-shadow .2s ease, color .2s ease; } .pro-subcat-chip:hover { border-color: var(--pro-accent, #2f6fed); color: var(--pro-accent, #2f6fed); box-shadow: 0 2px 8px rgba(0,0,0,.08); } .pro-subcat-chip .chip-img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; } .pro-subcat-chip .chip-name { font-weight: 600; font-size: .85rem; } .pro-subcat-chip .chip-count { font-size: .7rem; line-height: 1; background: color-mix(in srgb, var(--pro-accent, #2f6fed) 14%, transparent); color: var(--pro-accent, #2f6fed); padding: .15rem .4rem; border-radius: 1rem; } /* ============================================================================ Directory: filter rail + professional card (Stage 4) Logical properties throughout — this renders in he/ar (RTL) as often as in en. ========================================================================= */ .pro-filters { position: sticky; top: 1rem; } .pro-filter-group { margin-block-end: 1.25rem; } .pro-filter-head { font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted, #6c757d); margin-block-end: .5rem; } .pro-filter-item { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .4rem .65rem; border-radius: 8px; text-decoration: none; color: var(--body-color, #212529); font-size: .9rem; } .pro-filter-item:hover { background: rgba(0,0,0,.04); text-decoration: none; } .pro-filter-item.is-active { background: var(--primary, #4f46e5); color: #fff; font-weight: 600; } .pro-filter-item.is-active .n { color: #fff; } /* Logical inset, not padding-left: in RTL the sub-items must indent from the right. */ .pro-filter-sub { padding-inline-start: 1.6rem; font-size: .85rem; } .pro-filter-item .n { font-size: .78rem; color: var(--text-muted, #6c757d); font-variant-numeric: tabular-nums; } .pro-sort { display: inline-flex; gap: .25rem; flex-wrap: wrap; } .pro-sort-item { padding: .3rem .7rem; border-radius: 999px; font-size: .82rem; font-weight: 600; text-decoration: none; color: var(--body-color, #212529); border: 1px solid var(--border-color, #e2e2e8); } .pro-sort-item:hover { text-decoration: none; background: rgba(0,0,0,.04); } .pro-sort-item.is-active { background: var(--primary, #4f46e5); border-color: var(--primary, #4f46e5); color: #fff; } /* Browse-by-profession strip on the directory landing page. Horizontally scrollable rather than wrapped to six rows: the taxonomy is a shortcut into the results, not the page's subject. */ .pro-strip-head { font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted, #6c757d); margin-block-end: .5rem; } .pro-strip-items { display: flex; gap: .4rem; flex-wrap: nowrap; overflow-x: auto; padding-block-end: .35rem; scrollbar-width: thin; } .pro-chip { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; padding: .35rem .8rem; border-radius: 999px; font-size: .85rem; font-weight: 600; text-decoration: none; color: var(--body-color, #212529); border: 1px solid var(--border-color, #e2e2e8); background: var(--body-bg, #fff); } .pro-chip:hover { text-decoration: none; background: rgba(0,0,0,.04); } .pro-chip.is-active { background: var(--primary, #4f46e5); border-color: var(--primary, #4f46e5); color: #fff; } .pro-chip .n { font-size: .75rem; color: var(--text-muted, #6c757d); font-variant-numeric: tabular-nums; /* Pinned LTR: a bare number beside RTL text otherwise jumps to the wrong end of the chip. */ direction: ltr; unicode-bidi: isolate; } .pro-chip.is-active .n { color: #fff; } /* ── the filter rail as a phone sheet ──────────────────────────────────────── Desktop keeps the column exactly as it was. Below lg the same markup becomes a sheet that slides in from the leading edge — which is the right edge in Hebrew and Arabic, hence `inset-inline-start` and a logical translate rather than `left` and `translateX(-100%)`. */ .pro-rail-head, .pro-rail-apply, .pro-rail-backdrop { display: none; } .pro-filter-clear { display: inline-flex; align-items: center; font-size: .85rem; font-weight: 600; color: var(--text-muted, #6c757d); text-decoration: none; padding: .35rem .1rem; } .pro-filter-clear:hover { color: var(--primary, #4f46e5); text-decoration: none; } /* Hidden until the script that drives it has run — a button that does nothing is worse than no button, and with JS off the rail is simply a column of links above the results, which works. !important because .btn (one class, later in the cascade if the theme bundle loads after this file) otherwise puts it back on the desktop, where there is nothing for it to open. */ .pro-filter-btn { display: none !important; } /* The toolbar: search + filter + trades, stuck to the top while the results scroll under it. --daman-header-h is published by daman-sticky-header.js; the fallback keeps it usable if the header script has not run. */ .pro-toolbar { margin-block-end: 1rem; } /* Our own visually-hidden. Bootstrap's utility is not reliably in the storefront bundle — the filter button shipped with the word "סינון" rendered next to the icon it was supposed to be replacing. */ .pro-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* position:sticky dies inside an ancestor with overflow:auto/hidden, and the theme's content wrapper sets overflow-y on some pages. clip on ONE axis keeps the horizontal guard without killing sticky. */ .page.pro-profile { overflow: visible; } @media (max-width: 991.98px) { .pro-toolbar { position: sticky; inset-block-start: calc(var(--daman-header-h, 56px) - 1px); z-index: 20; background: var(--body-bg, #fff); padding-block: .5rem; margin-inline: -.75rem; padding-inline: .75rem; box-shadow: 0 6px 12px -12px rgba(0,0,0,.6); } .pro-toolbar .pro-search { max-width: none; } .pro-toolbar .pro-strip-head { display: none; } .pro-toolbar .pro-strip { margin-block-end: 0; } body.pro-has-js .pro-filter-btn { display: inline-flex !important; align-items: center; justify-content: center; position: relative; min-width: 46px; } .pro-filter-count { position: absolute; inset-block-start: -6px; inset-inline-end: -6px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: var(--primary, #4f46e5); color: #fff; font-size: .68rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; direction: ltr; unicode-bidi: isolate; } /* The search button keeps its icon and drops its word — at this width the word was pushing the input down to about eight characters. */ .pro-search-label { display: none; } body.pro-has-js .pro-rail { position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 1045; width: min(86vw, 340px); max-width: 100%; background: var(--body-bg, #fff); overflow-y: auto; padding: 0 1rem 1rem; transform: translateX(-100%); transition: transform .22s ease; box-shadow: 0 0 40px rgba(0,0,0,.18); } [dir="rtl"] body.pro-has-js .pro-rail { transform: translateX(100%); } body.pro-has-js .pro-rail.is-open { transform: translateX(0); } body.pro-has-js .pro-rail-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; position: sticky; inset-block-start: 0; z-index: 1; background: var(--body-bg, #fff); padding-block: .85rem; border-block-end: 1px solid var(--border-color, #e2e2e8); margin-block-end: .75rem; } body.pro-has-js .pro-rail-apply { display: block; position: sticky; inset-block-end: 0; background: var(--body-bg, #fff); padding-block: .75rem; margin-block-start: .5rem; } body.pro-has-js .pro-rail-backdrop { display: block; position: fixed; inset: 0; z-index: 1044; background: rgba(0,0,0,.4); } body.pro-rail-open { overflow: hidden; } /* The sticky desktop rail must not stay sticky inside a scrolling sheet. */ body.pro-has-js .pro-rail .pro-filters { position: static; } } .pro-pager { display: flex; gap: .3rem; flex-wrap: wrap; justify-content: center; margin-block-start: 1.5rem; } .pro-pager-item { min-width: 2.25rem; height: 2.25rem; padding-inline: .5rem; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border-color, #e2e2e8); border-radius: 8px; text-decoration: none; color: var(--body-color, #212529); font-weight: 600; font-size: .9rem; font-variant-numeric: tabular-nums; } .pro-pager-item:hover { text-decoration: none; background: rgba(0,0,0,.04); } .pro-pager-item.is-active { background: var(--primary, #4f46e5); border-color: var(--primary, #4f46e5); color: #fff; } .pro-pager-gap { display: inline-flex; align-items: center; padding-inline: .25rem; color: var(--text-muted, #6c757d); } /* The chevrons are directional glyphs, so they must flip with the page or "next" points backwards. */ [dir="rtl"] .pro-pager-item .fa-chevron-left, [dir="rtl"] .pro-pager-item .fa-chevron-right { transform: scaleX(-1); } /* The trade's price guide, linked from the bottom of a profession page. The guide existed, routed and localized, with NOTHING in the codebase pointing at it — a page reachable only by typing its URL. */ .pro-priceguide-link { display: flex; align-items: center; gap: .5rem; margin-block-start: 1.5rem; padding: .75rem 1rem; border: 1px solid var(--border-color, #e2e2e8); border-radius: 10px; text-decoration: none; color: var(--body-color, #212529); font-weight: 600; background: var(--gray-100, #f8f9fa); } .pro-priceguide-link:hover { text-decoration: none; background: rgba(0,0,0,.04); } .pro-priceguide-link .fa-tags { color: var(--primary, #4f46e5); } .pro-card-pro { position: relative; container-type: inline-size; display: flex; flex-direction: column; border: 1px solid var(--border-color, #e6e8ef); border-radius: 16px; background: var(--body-bg, #fff); overflow: hidden; transition: box-shadow .16s ease, transform .16s ease, border-color .16s ease; /* A grid item's min size is min-content, so one long word inside widens the whole COLUMN and the card's own children hang out over its border. */ min-inline-size: 0; } .pro-card-pro:hover { box-shadow: 0 10px 30px -20px rgba(16, 24, 40, .55); transform: translateY(-2px); border-color: #d7dbe7; } /* Unavailable is DIMMED, never hidden: he is still listed and still contactable. */ .pro-card-pro.is-unavailable { border-color: #fecaca; } .pro-card-pro.is-unavailable .pro-cta { background: #fee2e2; color: #991b1b; } /* ---- promoted: a folded corner, not a chip ---- The chip lived at the end of .pro-meta, a nowrap overflow-hidden row, so on a real card it was clipped to a purple sliver carrying no readable word. The corner is drawn OUTSIDE the content flow and costs the card no width at all. Logical inset so it lands opposite the avatar in both scripts — a physical `left` puts a gold triangle over the man's face in one of the two. */ .pro-ribbon { position: absolute; inset-block-start: 0; inset-inline-end: 0; z-index: 2; inline-size: 54px; block-size: 54px; display: flex; align-items: flex-start; justify-content: flex-end; /* The glyph sits INSIDE the thick part of the wedge. Both offsets are logical and both resolve toward the card's corner, so this needs no direction override: `flex-end` is the left in RTL and the right in LTR, which is where the wedge is in each. Physical values here put the medal half off the gold in one of the two scripts, which is exactly how it first shipped. */ padding-block-start: 8px; padding-inline-end: 13px; color: #fff; font-size: .78rem; text-shadow: 0 1px 1px rgba(120, 53, 15, .35); background: linear-gradient(225deg, #fbbf24 0%, #f59e0b 52%, transparent 52.5%); pointer-events: none; } /* Only the gradient flips — the wedge has to point at the corner it sits in. */ [dir="rtl"] .pro-ribbon { background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 52%, transparent 52.5%); } .pro-offbadge { position: absolute; inset-block-start: .6rem; inset-inline-start: .6rem; z-index: 2; padding: .2rem .5rem; border-radius: 999px; background: #fee2e2; color: #991b1b; font-size: .68rem; font-weight: 800; line-height: 1.4; } /* ---- head: who he is ---- */ .pro-card-top { display: flex; align-items: flex-start; gap: .7rem; padding: .95rem .95rem .6rem; } .pro-av { position: relative; flex: 0 0 auto; display: inline-flex; text-decoration: none; } .pro-card-pro .avatar, .pro-card-pro .avatar-ph { inline-size: 58px; block-size: 58px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--border-color, #e6e8ef); } .pro-card-pro .avatar-ph { display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #eef0f6, #dfe3ee); color: #98a2b3; font-size: 1.3rem; } /* Presence on the face: read before any word on the card, and it costs no line. */ .pro-dot { position: absolute; inset-block-end: 1px; inset-inline-end: 1px; inline-size: 13px; block-size: 13px; border-radius: 50%; border: 2px solid var(--body-bg, #fff); } .pro-dot.is-on { background: #22c55e; } .pro-dot.is-off { background: #9ca3af; } .pro-card-id { min-inline-size: 0; flex: 1 1 auto; } /* Two lines, not one clipped one. Clamped, so one long name cannot drag its whole grid row taller. */ .pro-name { margin: 0; font-size: 1rem; font-weight: 800; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .pro-name a { color: inherit; text-decoration: none; } .pro-name a:hover { color: var(--pro-accent, #4f46e5); text-decoration: none; } .pro-verified { color: #2563eb; font-size: .8em; margin-inline-start: .25rem; } .pro-sub { font-size: .82rem; color: var(--text-muted, #6b7280); margin-block-start: .1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* "4.8 (12)" is digits, a dot and parentheses: in an RTL paragraph the trailing "(12)" jumps to the front unless the run is isolated AND given a direction. Isolate alone is not enough. */ .pro-rate { display: flex; align-items: center; gap: .3rem; margin-block-start: .25rem; flex-wrap: nowrap; white-space: nowrap; unicode-bidi: isolate; direction: ltr; } .pro-card-pro .pro-stars { white-space: nowrap; flex: 0 0 auto; } .pro-card-pro .pro-stars { color: #f59e0b; font-size: .78rem; letter-spacing: .02em; } .pro-rate-n { font-weight: 800; font-size: .84rem; } .pro-rate-c { font-size: .78rem; color: var(--text-muted, #6b7280); } /* ---- trades ---- */ .pro-tags { display: flex; flex-wrap: wrap; gap: .3rem; padding: 0 .95rem .7rem; } .pro-tag { font-size: .74rem; font-weight: 700; padding: .2rem .55rem; border-radius: 8px; background: #eef2ff; color: #4338ca; max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pro-tag-more { background: #f1f2f6; color: var(--text-muted, #6b7280); flex: 0 0 auto; } /* ---- the three facts, given equal weight ---- */ .pro-facts { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: .4rem; padding: .7rem .5rem; border-block-start: 1px solid var(--border-color, #eef0f4); border-block-end: 1px solid var(--border-color, #eef0f4); text-align: center; } .pro-fact { min-inline-size: 0; } .pro-fact-v { display: block; font-size: .84rem; font-weight: 800; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* NO font-weight here. Font Awesome picks the glyph by weight — 900 is Solid, 400 is Regular — and FA Free's Regular set is about 150 icons, so overriding the weight to lighten an icon silently turns most of them into an empty box. `.fa` sets 900; anything more specific than it wins. */ .pro-fact-v i { opacity: .55; margin-inline-end: .25rem; } .pro-fact-l { display: block; font-size: .7rem; color: var(--text-muted, #6b7280); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* A price is a Latin run — symbol then digits — inside a Hebrew card. */ .pro-fact-price { color: var(--pro-accent, #4f46e5); unicode-bidi: isolate; direction: ltr; } /* ---- reaching him ---- */ .pro-card-foot { display: flex; align-items: center; gap: .35rem; padding: .6rem .7rem .7rem; } .pro-act { display: inline-flex; align-items: center; justify-content: center; inline-size: 38px; block-size: 38px; flex: 0 0 auto; border: 1px solid var(--border-color, #e6e8ef); border-radius: 10px; background: var(--body-bg, #fff); color: var(--text-muted, #6b7280); text-decoration: none; cursor: pointer; font-size: .95rem; transition: border-color .15s ease, color .15s ease, background .15s ease; } .pro-act:hover { border-color: var(--pro-accent, #4f46e5); color: var(--pro-accent, #4f46e5); text-decoration: none; } .pro-act--wa:hover { border-color: #25d366; color: #128c4a; background: rgba(37, 211, 102, .08); } .pro-act--save[aria-pressed="true"] { border-color: #4f46e5; color: #4f46e5; background: #eef2ff; } .pro-act--save[aria-pressed="true"] i { font-weight: 900; } /* Inert without the script that drives it, so it does not exist until that script has run. */ .pro-act--save { display: none; } body.pro-has-save .pro-act--save { display: inline-flex; } .pro-cta { flex: 1 1 auto; min-inline-size: 0; display: inline-flex; align-items: center; justify-content: center; min-block-size: 38px; padding: .4rem .7rem; border-radius: 10px; background: #111827; color: #fff; font-weight: 700; font-size: .84rem; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pro-cta:hover { background: #000; color: #fff; text-decoration: none; } /* Below ~320px of CARD the three facts stop fitting side by side and start ellipsising the price itself — "from …" is not a price. Measured against the card, not the viewport: the same 390px phone holds a 360px card in list view and a 185px one at two per row, and only one of those needs the compact form. */ @container (max-width: 320px) { .pro-facts { grid-auto-flow: row; grid-auto-columns: auto; text-align: start; gap: .15rem; padding-inline: .8rem; } .pro-fact { display: flex; align-items: baseline; gap: .35rem; } .pro-fact-v { font-size: .8rem; } .pro-fact-l { font-size: .72rem; } /* The actions and the button stop sharing a line. "View profile" beside three icon buttons in 160px does not shrink — `white-space: nowrap` means it overflows its own button instead, which is the one thing a call-to-action must never do. Icons first, button across the full width under them, which is also how the mock-up lays it out on a narrow card. */ .pro-card-foot { flex-wrap: wrap; } .pro-cta { flex: 1 0 100%; order: 2; } /* The count is the first thing sacrificed when the rating row cannot fit, and "4.7" with no idea how many people said so is the least useful half of it. Shrink the row instead. */ /* One star, not five. Beside a 44px avatar in a 160px card there are about ninety pixels for the whole rating, and five glyphs plus "5.0 (7)" do not fit in ninety pixels — they clip, and what clips is the count, which is the half that says whether the score means anything. A single star reads as "rating" just as well and leaves the numbers room. */ .pro-card-pro .pro-stars i:not(:first-child) { display: none; } .pro-card-pro .pro-stars { font-size: .74rem; } .pro-rate { gap: .25rem; } .pro-rate-n { font-size: .78rem; } .pro-rate-c { font-size: .68rem; } } /* No container-query support: fall back to the viewport, where two-per-row is the tight case. */ @supports not (container-type: inline-size) { @media (max-width: 575.98px) { .pro-facts { grid-auto-flow: row; grid-auto-columns: auto; text-align: start; gap: .15rem; } .pro-fact { display: flex; align-items: baseline; gap: .35rem; } } } /* ============================================================================ Profile page (Stage 5) ========================================================================= */ /* The person behind the business, under the trading name in the hero. NOT --text-muted: that is a dark grey meant for a white page, and the hero is a dark accent gradient with color:#fff — the by-line was legible only if you already knew what it said. A translucent white is the same "quieter than the headline" intent, expressed against the background it actually sits on. */ .pro-hero-biz { font-size: 1rem; color: rgba(255, 255, 255, .85); margin-block-start: .1rem; } .pro-hero-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-block: .5rem; } .pro-rating-inline { unicode-bidi: isolate; direction: ltr; display: inline-flex; gap: .25rem; align-items: center; } .pro-rating-inline .fa-star { color: #f59e0b; } /* Direct routes to the human. */ .pro-actions { display: flex; gap: .5rem; margin-block-end: 1rem; flex-wrap: wrap; } .pro-action { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; flex: 1 1 0; min-height: 44px; padding: .5rem .9rem; border-radius: 10px; font-weight: 600; text-decoration: none; font-size: .92rem; } .pro-action:hover { text-decoration: none; filter: brightness(.96); } .pro-action--call { background: rgba(79,70,229,.10); color: var(--primary, #4f46e5); } .pro-action--wa { background: rgba(37,211,102,.14); color: #128c4a; } .pro-action--msg { background: rgba(0,0,0,.06); color: var(--body-color, #212529); } /* Products as real cards. */ .pro-prod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .6rem; } .pro-prod { display: flex; flex-direction: column; gap: .3rem; padding: .5rem; border: 1px solid var(--border-color, #e2e2e8); border-radius: 10px; text-decoration: none; color: inherit; font-size: .82rem; } .pro-prod:hover { text-decoration: none; color: inherit; box-shadow: 0 6px 18px -14px rgba(0,0,0,.5); } .pro-prod img, .pro-prod .ph { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; } .pro-prod .ph { display: inline-flex; align-items: center; justify-content: center; background: #f1f3f7; color: #98a2b3; font-size: 1.4rem; } .pro-prod .t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .pro-prod .p { font-weight: 700; } /* Mobile sticky action bar. Logical inset so it spans correctly in RTL. */ .pro-stickybar { position: fixed; inset-inline: 0; bottom: 0; z-index: 1030; display: flex; gap: .4rem; padding: .5rem .6rem calc(.5rem + env(safe-area-inset-bottom)); background: var(--body-bg, #fff); border-block-start: 1px solid var(--border-color, #e2e2e8); box-shadow: 0 -6px 20px -16px rgba(0,0,0,.6); } /* The bar covers the end of the page; give the content room so nothing hides behind it. */ @media (max-width: 991.98px) { .pro-profile { padding-block-end: 76px; } } /* ============================================================================ Services & prices (Stage 9) ========================================================================= */ /* A price is an LTR run — currency symbol, digits, en dash — inside a page that is usually RTL. `isolate` alone is NOT enough: the symbol and dash still reorder. It needs an explicit direction. */ .pro-offer-price { unicode-bidi: isolate; direction: ltr; display: inline-block; font-weight: 700; } .pro-offer-list { list-style: none; padding: 0; margin: 0; } .pro-offer-list li { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding-block: .7rem; border-block-start: 1px solid var(--border-color, #eee); } .pro-offer-list li:first-child { border-block-start: none; } .pro-offer-list .o-title { font-weight: 600; } .pro-offer-list .o-desc { font-size: .86rem; color: var(--text-muted, #6c757d); } /* The platform's typical range, muted: context, not a competing claim. */ .pro-offer-list .o-typical { font-size: .78rem; color: var(--text-muted, #6c757d); margin-block-start: .15rem; } .pro-offer-list .o-price { flex: 0 0 auto; text-align: end; white-space: nowrap; } .pro-price-table { border: 1px solid var(--border-color, #e2e2e8); border-radius: 14px; overflow: hidden; } .pro-price-table .row-item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1rem; border-block-start: 1px solid var(--border-color, #eee); } .pro-price-table .row-item:first-child { border-block-start: none; } .pro-price-table .t { font-weight: 600; } .pro-price-table .c { font-size: .8rem; color: var(--primary, #4f46e5); text-decoration: none; } .pro-price-table .p { text-align: end; white-space: nowrap; } .pro-price-table .u { display: block; font-size: .76rem; color: var(--text-muted, #6c757d); } /* Console list of his own priced services. */ .mp-offer-list { list-style: none; padding: 0; margin: 0 0 .75rem; } .mp-offer-list li { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .45rem 0; border-block-end: 1px solid var(--border-color, #eee); } .mp-offer-list .t { font-weight: 600; flex: 1 1 auto; } .mp-offer-list .p { unicode-bidi: isolate; direction: ltr; font-weight: 700; } .mp-offer-list .typ { font-size: .76rem; color: var(--text-muted, #6c757d); } /* ============================================================================ The directory page (2026-08-13) Hero, filter rail, toolbar, grid/list. Every offset logical — this page runs in Hebrew and Arabic far more than in English. ========================================================================= */ .pro-dir { --pro-accent: var(--primary, #4f46e5); color: var(--body-color, #16181d); /* Out of the theme container, which caps the page at about 1256px — four comfortable cards plus a 258px rail need roughly 1400px of row, so inside it "four across" could only ever mean four 237px slivers however wide the screen got. NO compensating padding here. `margin-inline: calc(50% - 50vw)` on its own widens the CONTENT; adding `padding-inline: calc(50vw - 50%)` back is the other recipe — a full-width background with the content still capped — which is what shipped first and changed nothing. */ margin-inline: calc(50% - 50vw); inline-size: 100vw; max-inline-size: 100vw; /* The row width now comes from the viewport, so a horizontal scrollbar would be self-inflicted. */ overflow-x: clip; } /* ---- hero ---- The directory opened on a page title and a search box against the site's own background. This is the screen that has to say what the platform IS in the second before somebody decides to scroll. */ .pro-hero-dir { position: relative; overflow: hidden; background: linear-gradient(135deg, #f5f3ff 0%, #eef2ff 55%, #faf9ff 100%); border-block-end: 1px solid #e9e7fb; padding: 2.2rem 1rem 1rem; margin-block-end: 1.5rem; } .pro-hero-dir-in { display: flex; align-items: center; gap: 1.5rem; max-inline-size: 1720px; margin-inline: auto; } .pro-hero-copy { flex: 1 1 auto; min-inline-size: 0; } .pro-hero-h1 { margin: 0; font-size: clamp(1.6rem, 3.2vw, 2.5rem); font-weight: 800; line-height: 1.15; } .pro-hero-sub { margin: .4rem 0 1.1rem; font-size: clamp(.9rem, 1.4vw, 1.05rem); color: var(--text-muted, #6b7280); } .pro-hero-search { display: flex; align-items: center; gap: .5rem; max-inline-size: 660px; background: #fff; border: 1px solid #e5e3f7; border-radius: 999px; padding: .35rem; box-shadow: 0 10px 30px -22px rgba(79, 70, 229, .5); } .pro-hero-input { flex: 1 1 auto; min-inline-size: 0; border: 0; background: transparent; padding: .5rem .9rem; font-size: .95rem; color: inherit; } .pro-hero-input:focus { outline: 0; } .pro-hero-go { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .45rem; border: 0; border-radius: 999px; background: var(--pro-accent, #4f46e5); color: #fff; font-weight: 700; font-size: .9rem; padding: .6rem 1.3rem; min-block-size: 44px; cursor: pointer; } .pro-hero-go:hover { background: #4338ca; } .pro-hero-art { flex: 0 0 auto; inline-size: 220px; } .pro-hero-art svg { inline-size: 100%; block-size: auto; display: block; } .pro-shortcuts { display: flex; align-items: center; gap: .7rem; max-inline-size: 1720px; margin: 1.3rem auto 0; } .pro-shortcuts-lbl { flex: 0 0 auto; font-size: .82rem; color: var(--text-muted, #6b7280); } .pro-shortcuts-items { display: flex; gap: .4rem; overflow-x: auto; padding-block-end: .3rem; scrollbar-width: thin; } .pro-chip-all { font-weight: 700; } /* ---- layout ---- */ .pro-dir-body { max-inline-size: 1720px; margin-inline: auto; padding-inline: 1rem; } .pro-dir-cols { display: grid; grid-template-columns: 258px minmax(0, 1fr); gap: 1.1rem; align-items: start; } /* ---- toolbar ---- */ .pro-toolbar2 { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; margin-block-end: 1rem; } .pro-count { font-size: .9rem; color: var(--text-muted, #6b7280); } .pro-toolbar2-right { display: flex; align-items: center; gap: .5rem; } .pro-sortbox { display: inline-flex; align-items: center; gap: .4rem; margin: 0; background: #fff; border: 1px solid var(--border-color, #e6e8ef); border-radius: 10px; padding-inline-start: .7rem; min-block-size: 40px; } .pro-sortbox-lbl { font-size: .82rem; color: var(--text-muted, #6b7280); white-space: nowrap; } .pro-sortbox .pro-fselect { border: 0; background: transparent; min-block-size: 38px; padding-inline: .2rem .5rem; } .pro-viewtoggle { display: inline-flex; align-items: center; justify-content: center; inline-size: 40px; block-size: 40px; border: 1px solid var(--border-color, #e6e8ef); border-radius: 10px; background: #fff; color: var(--text-muted, #6b7280); cursor: pointer; } .pro-viewtoggle:hover { color: var(--pro-accent, #4f46e5); border-color: var(--pro-accent, #4f46e5); } /* Useless without the script that drives it. */ .pro-viewtoggle { display: none; } body.pro-has-js .pro-viewtoggle { display: inline-flex; } /* ---- the rail ---- */ .pro-rail-card { background: #fff; border: 1px solid var(--border-color, #e6e8ef); border-radius: 16px; padding: 1rem; position: sticky; inset-block-start: 1rem; } .pro-rail-title { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; font-weight: 800; font-size: 1rem; padding-block-end: .8rem; margin-block-end: .3rem; border-block-end: 1px solid var(--border-color, #eef0f4); } .pro-rail-clear { font-size: .78rem; font-weight: 600; color: var(--pro-accent, #4f46e5); text-decoration: none; } .pro-rail-clear:hover { text-decoration: underline; } .pro-fgroup { padding-block: .85rem; border-block-end: 1px solid var(--border-color, #eef0f4); } .pro-fgroup:last-of-type { border-block-end: 0; } .pro-fhead { font-size: .84rem; font-weight: 700; margin-block-end: .5rem; } .pro-fselect { inline-size: 100%; border: 1px solid var(--border-color, #e6e8ef); border-radius: 9px; background: #fff; padding: .45rem .6rem; min-block-size: 38px; font-size: .85rem; color: inherit; } .pro-flist { list-style: none; margin: .5rem 0 0; padding: 0; } .pro-frow { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .4rem .5rem; border-radius: 8px; font-size: .86rem; color: var(--body-color, #16181d); text-decoration: none; } .pro-frow:hover { background: #f4f5fa; text-decoration: none; } .pro-frow.is-active { background: var(--pro-accent, #4f46e5); color: #fff; font-weight: 700; } .pro-frow.is-sub { padding-inline-start: 1.4rem; font-size: .82rem; } .pro-frow .t { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* A bare count beside Hebrew text lands at the wrong end of the row without both of these. */ .pro-frow .n { flex: 0 0 auto; font-size: .78rem; color: var(--text-muted, #9aa1ae); font-variant-numeric: tabular-nums; unicode-bidi: isolate; direction: ltr; } .pro-frow.is-active .n { color: rgba(255, 255, 255, .85); } .pro-fmore { border: 0; background: transparent; cursor: pointer; color: var(--pro-accent, #4f46e5); font-size: .8rem; font-weight: 700; padding: .35rem .5rem; } .pro-fmore:hover { text-decoration: underline; } /* ---- budget ---- */ .pro-price-in { display: flex; align-items: center; gap: .4rem; } .pro-price-box { flex: 1 1 0; min-inline-size: 0; border: 1px solid var(--border-color, #e6e8ef); border-radius: 9px; padding: .4rem .55rem; min-block-size: 38px; font-size: .85rem; /* An amount is a Latin run even in Hebrew. */ unicode-bidi: isolate; direction: ltr; text-align: start; } .pro-price-dash { color: var(--text-muted, #9aa1ae); } .pro-price-slider { position: relative; block-size: 26px; margin-block-start: .6rem; } .pro-price-track, .pro-price-span { position: absolute; inset-block-start: 11px; block-size: 4px; border-radius: 999px; } .pro-price-track { inset-inline: 0; background: var(--border-color, #e6e8ef); } .pro-price-span { background: var(--pro-accent, #4f46e5); } .pro-price-thumb { position: absolute; inset-inline: 0; inset-block-start: 0; inline-size: 100%; block-size: 26px; margin: 0; background: transparent; appearance: none; -webkit-appearance: none; pointer-events: none; } .pro-price-thumb::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; inline-size: 18px; block-size: 18px; border-radius: 50%; background: #fff; border: 3px solid var(--pro-accent, #4f46e5); cursor: grab; box-shadow: 0 1px 4px rgba(16, 24, 40, .3); } .pro-price-thumb::-moz-range-thumb { pointer-events: auto; inline-size: 18px; block-size: 18px; border-radius: 50%; background: #fff; border: 3px solid var(--pro-accent, #4f46e5); cursor: grab; } /* No JS, no two-thumb behaviour — and a slider that cannot be driven is worse than the two boxes above it, which work on their own. */ .pro-price-slider { display: none; } body.pro-has-js .pro-price-slider { display: block; } /* ---- rating ---- */ .pro-frating { display: flex; flex-direction: column; gap: .1rem; } .pro-frate { display: flex; align-items: center; gap: .45rem; padding: .35rem .5rem; border-radius: 8px; cursor: pointer; margin: 0; font-size: .82rem; color: var(--text-muted, #6b7280); } .pro-frate:hover { background: #f4f5fa; } .pro-frate.is-active { background: #eef2ff; color: #4338ca; font-weight: 700; } .pro-frate input { accent-color: var(--pro-accent, #4f46e5); } .pro-frate-stars { color: #f59e0b; font-size: .78rem; unicode-bidi: isolate; direction: ltr; } /* ---- switches ---- */ .pro-fswitches { display: flex; flex-direction: column; gap: .55rem; } .pro-fswitch { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin: 0; cursor: pointer; font-size: .86rem; } .pro-fswitch input { position: absolute; opacity: 0; pointer-events: none; } .pro-fswitch-ui { flex: 0 0 auto; position: relative; inline-size: 38px; block-size: 22px; border-radius: 999px; background: #dfe2ea; transition: background .16s ease; } .pro-fswitch-ui::after { content: ""; position: absolute; inset-block-start: 3px; inset-inline-start: 3px; inline-size: 16px; block-size: 16px; border-radius: 50%; background: #fff; transition: transform .16s ease; box-shadow: 0 1px 3px rgba(16, 24, 40, .3); } .pro-fswitch input:checked + .pro-fswitch-ui { background: var(--pro-accent, #4f46e5); } /* Logical: the knob has to travel toward the END of the line, which is the left in he/ar. */ .pro-fswitch input:checked + .pro-fswitch-ui::after { transform: translateX(16px); } [dir="rtl"] .pro-fswitch input:checked + .pro-fswitch-ui::after { transform: translateX(-16px); } .pro-fswitch input:focus-visible + .pro-fswitch-ui { outline: 2px solid var(--pro-accent, #4f46e5); outline-offset: 2px; } .pro-fapply { display: block; inline-size: 100%; margin-block-start: 1rem; border: 0; border-radius: 11px; background: var(--pro-accent, #4f46e5); color: #fff; font-weight: 700; font-size: .9rem; min-block-size: 46px; text-align: center; text-decoration: none; line-height: 46px; cursor: pointer; } .pro-fapply:hover { background: #4338ca; color: #fff; text-decoration: none; } .pro-empty-dir { text-align: center; padding: 3rem 1rem; color: var(--text-muted, #6b7280); background: #fff; border: 1px dashed var(--border-color, #e6e8ef); border-radius: 16px; } .pro-empty-dir i { font-size: 2.4rem; opacity: .3; display: block; margin-block-end: .8rem; } .pro-empty-dir .pro-fapply { max-inline-size: 220px; margin-inline: auto; } /* ---- list view ---- The same card, laid on its side. Nothing is hidden and nothing extra is fetched — it is the one choice on this page that should never cost a round trip. */ .pro-grid.is-list { grid-template-columns: 1fr; } @media (min-width: 700px) { .pro-grid.is-list .pro-card-pro { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.6fr) auto; align-items: center; } .pro-grid.is-list .pro-tags { align-self: center; padding-block: 0; } .pro-grid.is-list .pro-facts { border-block: 0; border-inline-start: 1px solid var(--border-color, #eef0f4); grid-column: 2; } .pro-grid.is-list .pro-card-top { grid-row: 1; grid-column: 1; } .pro-grid.is-list .pro-card-foot { grid-column: 3; padding-inline-start: 0; } .pro-grid.is-list .pro-cta { min-inline-size: 130px; } } /* ---- phone ---- */ .pro-rail-head, .pro-rail-backdrop { display: none; } .pro-filter-btn { display: none; } @media (max-width: 991.98px) { .pro-dir-cols { grid-template-columns: minmax(0, 1fr); } .pro-hero-art { display: none; } .pro-hero-dir { padding-block-start: 1.4rem; } body.pro-has-js .pro-filter-btn { display: inline-flex; align-items: center; justify-content: center; position: relative; inline-size: 40px; block-size: 40px; border: 1px solid var(--border-color, #e6e8ef); border-radius: 10px; background: #fff; color: var(--body-color, #16181d); cursor: pointer; } .pro-filter-count { position: absolute; inset-block-start: -6px; inset-inline-end: -6px; min-inline-size: 18px; block-size: 18px; padding: 0 4px; border-radius: 999px; background: var(--pro-accent, #4f46e5); color: #fff; font-size: .68rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; unicode-bidi: isolate; direction: ltr; } body.pro-has-js .pro-rail { position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 1045; inline-size: min(88vw, 350px); background: #fff; overflow-y: auto; padding: 0 .9rem 1rem; transform: translateX(-100%); transition: transform .22s ease; box-shadow: 0 0 40px rgba(16, 24, 40, .18); } [dir="rtl"] body.pro-has-js .pro-rail { transform: translateX(100%); } body.pro-has-js .pro-rail.is-open { transform: translateX(0); } body.pro-has-js .pro-rail-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; position: sticky; inset-block-start: 0; z-index: 1; background: #fff; padding-block: .9rem; border-block-end: 1px solid var(--border-color, #eef0f4); } .pro-rail-x { border: 0; background: transparent; cursor: pointer; font-size: 1.1rem; color: var(--text-muted, #6b7280); padding: .3rem .5rem; } body.pro-has-js .pro-rail-backdrop { display: block; position: fixed; inset: 0; z-index: 1044; background: rgba(0, 0, 0, .4); } body.pro-rail-open { overflow: hidden; } body.pro-has-js .pro-rail .pro-rail-card { position: static; border: 0; padding-inline: 0; } body.pro-has-js .pro-rail .pro-rail-title { display: none; } } /* The product page's specialists block. The grid is the directory's, but it lives inside the theme's own boxed block, so it gets its own step points rather than the directory's — there is no filter rail here stealing a column. */ .pro-grid--pdp { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 768px) { .pro-grid--pdp { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1200px) { .pro-grid--pdp { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .pro-grid--pdp .specialist-grid-item { min-inline-size: 0; display: flex; } .pro-grid--pdp .pro-card-pro { inline-size: 100%; } /* "Ask me" is a button in the CTA's slot, so it needs the button reset the anchor never did. */ .pro-cta { border: 0; cursor: pointer; gap: .4rem; font-family: inherit; } /* ── Reviews block (was an inline