/* ════════════════════════════════════════════════════════════════
LocalModels — Discover (people page) — Phase 2.3
Port of designs/styles-discover.css with --lm-* variable mapping.
Loaded globally; rules are scoped to .lm-discover-page.
════════════════════════════════════════════════════════════════ */
/* Strip Sngine page chrome on /people so the discover layout owns the canvas */
html.lm-discover-active body .main-wrapper { padding-top: 0 !important; }
html.lm-discover-active body .main-wrapper > .x_top_posts,
html.lm-discover-active body .main-wrapper > footer { display: none; }
/* Override the profile.css max-width so discover gets full canvas */
html.lm-discover-active .lm-content { max-width: none !important; }
html.lm-discover-active .lm-content-center { max-width: none !important; }
.lm-discover-page {
min-width: 0;
max-width: 1440px;
width: 100%;
/* R20L: center on wide viewports. Was margin:0 which left-anchored the
entire Discover layout on >1440px screens, making filter bar / chips /
empty state visually off-center. No effect on <=1440px screens since
auto margins resolve to 0 when there's no spare space. */
margin: 0 auto;
padding: 0 24px;
font-family: var(--lm-font);
color: var(--lm-text);
box-sizing: border-box;
}
/* ── Sticky filter bar ───────────────────────────────────── */
/* Filter bar lives directly inside .lm-discover-page so it shares the same
horizontal bounds as .dc-grid-wrap below. No negative margins, no extra
padding — the parent's padding: 0 24px provides the gutter. */
.dc-filterbar {
position: sticky; top: 64px; z-index: 50;
background: var(--lm-bg);
border-bottom: 1px solid var(--lm-border);
padding: 12px 0;
margin: 0;
}
html.lm-dark .dc-filterbar { background: var(--lm-bg); }
.dc-filterbar-r9 {
display: flex; align-items: center;
gap: 8px;
flex-wrap: nowrap;
/* No overflow on desktop — the popovers (Location, Availability, Service,
Gender) absolute-position INSIDE their .dc-pop-anchor wrappers and
extend BELOW this row. Any overflow:hidden/clip/auto here would clip
them. Tablet (768-1023px) re-introduces overflow-x:auto via mobile CSS. */
overflow: visible;
}
/* Filter widths — Age & Day rate sliders are LOCKED at 220px each. Location
and Gender are also fixed. Availability and Service Type flex to absorb
remaining space (and shrink at narrower viewports), with sensible mins. */
.dc-fixw { display: inline-flex; min-width: 0; }
.dc-fixw > * { width: 100%; min-width: 0; }
.dc-fixw .dc-filter-btn-r9,
.dc-fixw .dc-filter-loc-primary { width: 100%; }
.dc-fixw-loc { flex: 0 0 200px !important; width: 200px; }
.dc-fixw-avail { flex: 0 1 165px; min-width: 130px; max-width: 165px; }
.dc-fixw-svc { flex: 0 1 165px; min-width: 130px; max-width: 165px; }
.dc-fixw-gender { flex: 0 0 130px !important; width: 130px; }
/* Sliders flex-grow to absorb extra width on wide viewports while
staying within 180–240px. Gender label "All genders" never truncates. */
.dc-filter-slider-age,
.dc-filter-slider-rate { flex: 1 1 200px !important; min-width: 180px; max-width: 240px; width: auto !important; }
/* Filter button labels truncate (NEVER wrap or overflow) */
.dc-filter-btn-r9 .dc-filter-btn-label,
.dc-filter-loc-primary .dc-filter-loc-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ── Filter buttons ──────────────────────────────────────── */
.dc-filter-btn-r9 {
display: inline-flex; align-items: center; justify-content: space-between;
gap: 6px; padding: 8px 12px;
height: 38px;
background: var(--lm-bg);
border: 1px solid var(--lm-border);
border-radius: 8px;
font-size: 12.5px; font-weight: 500;
color: var(--lm-text);
white-space: nowrap;
transition: border-color .12s, background .12s;
cursor: pointer;
font-family: inherit;
text-align: left;
}
.dc-filter-btn-r9:hover { border-color: var(--lm-muted-2); }
.dc-filter-btn-r9.is-active {
background: var(--lm-primary-soft);
border-color: var(--lm-primary);
color: var(--lm-primary-text);
}
.dc-filter-btn-label {
flex: 1; min-width: 0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dc-filter-btn-count {
display: inline-grid; place-items: center;
min-width: 18px; height: 18px;
padding: 0 5px;
background: var(--lm-primary); color: #fff;
border-radius: 9px;
font-size: 10px; font-weight: 700;
font-family: var(--lm-font-mono);
flex-shrink: 0;
}
/* PRIMARY Location filter — visually emphasised */
.dc-filter-loc-primary {
display: inline-flex; align-items: center; gap: 7px;
padding: 8px 12px;
height: 38px;
background: var(--lm-primary-soft);
border: 2px solid var(--lm-primary);
border-radius: 8px;
font-size: 13px; font-weight: 600;
color: var(--lm-primary-strong);
cursor: pointer;
white-space: nowrap;
transition: background .12s, border-color .12s;
font-family: inherit;
}
.dc-filter-loc-primary:hover { border-color: var(--lm-primary-strong); }
.dc-filter-loc-primary.is-on {
background: var(--lm-primary);
border-color: var(--lm-primary);
color: #fff;
}
.dc-filter-loc-primary svg { color: currentColor; flex-shrink: 0; }
.dc-filter-loc-text {
flex: 0 1 auto; min-width: 0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* ── Inline range slider on filter bar (Age + Day rate) ──── */
.dc-filter-slider {
display: inline-flex; flex-direction: column;
justify-content: center;
padding: 4px 12px 6px;
height: 38px;
background: var(--lm-bg);
border: none;
border-radius: 8px;
min-width: 0;
font-family: inherit;
}
.dc-filter-slider.is-active { background: var(--lm-primary-soft); }
/* Slider label — centered, always visible. Format: "AGE 18 – 70+" */
.dc-filter-slider-label {
display: flex;
justify-content: center;
align-items: baseline;
gap: 8px;
margin-bottom: 4px;
font-family: var(--lm-font-mono);
font-size: 10.5px; font-weight: 600;
color: var(--lm-muted);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.dc-filter-slider-label strong {
color: var(--lm-text);
font-weight: 700;
font-family: var(--lm-font-mono);
font-size: 11px;
letter-spacing: 0;
text-transform: none;
}
.dc-filter-slider.is-active .dc-filter-slider-label strong {
color: var(--lm-primary-text);
}
.dc-filter-slider.is-active .dc-filter-slider-label strong { color: var(--lm-primary-text); }
.dc-filter-slider-track-wrap {
position: relative;
height: 22px;
display: flex; align-items: center;
padding: 0 9px; /* leave room for thumb (half of 18px) on each side */
}
.dc-range-track {
position: relative; height: 4px;
width: 100%;
background: var(--lm-border); border-radius: 2px;
cursor: pointer;
}
.dc-range-fill {
position: absolute; top: 0; bottom: 0;
background: var(--lm-primary); border-radius: 2px;
pointer-events: none;
}
.dc-range-thumb {
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 18px; height: 18px;
background: #fff;
border: 2px solid var(--lm-primary);
border-radius: 50%;
cursor: grab;
z-index: 3;
box-shadow: 0 1px 3px rgba(0,0,0,0.15);
transition: width .12s, height .12s, box-shadow .12s;
user-select: none;
touch-action: none;
}
.dc-range-thumb:hover {
width: 22px; height: 22px;
box-shadow: 0 2px 6px rgba(15,111,79,0.30);
}
.dc-range-thumb.is-dragging,
.dc-range-thumb:active {
width: 22px; height: 22px;
box-shadow: 0 2px 8px rgba(15,111,79,0.45);
cursor: grabbing;
}
/* (Slider value tooltips removed — values now render in the centered
.dc-filter-slider-label always-visible above the track.) */
/* ── Filter bar Row 2: result count + chips + sort + more ── */
.dc-filters-row2 {
display: flex; align-items: center; justify-content: space-between;
margin-top: 10px;
gap: 10px;
flex-wrap: nowrap;
}
.dc-filters-row2-left {
display: flex; align-items: center; gap: 12px;
flex: 1; min-width: 0;
flex-wrap: nowrap;
}
.dc-filters-row2-right {
display: flex; align-items: center; gap: 10px;
flex-shrink: 0;
margin-left: 8px;
}
.dc-result-count {
font-size: 13px; color: var(--lm-text); font-weight: 500;
white-space: nowrap; flex-shrink: 0;
}
.dc-result-count strong {
font-family: var(--lm-font-mono);
font-size: 13.5px; font-weight: 700;
color: var(--lm-primary-text);
letter-spacing: -0.01em;
}
/* Active chips */
.dc-chips-inline {
display: flex; flex-wrap: nowrap;
flex: 1; min-width: 0;
gap: 6px;
align-items: center;
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
.dc-chips-inline::-webkit-scrollbar { display: none; width: 0; height: 0; }
.dc-chip {
display: inline-flex; align-items: center; gap: 4px;
padding: 4px 6px 4px 9px;
font-size: 11.5px; font-weight: 500;
background: var(--lm-primary-soft);
border: 1px solid var(--lm-primary-soft-2);
color: var(--lm-primary-text);
border-radius: 16px;
flex-shrink: 0;
font-family: inherit;
cursor: default;
}
.dc-chip-x {
display: inline-grid; place-items: center;
width: 18px; height: 18px;
border-radius: 50%;
margin-left: 2px;
color: var(--lm-primary-text);
background: transparent;
border: 0;
cursor: pointer;
transition: background .12s;
}
.dc-chip-x:hover { background: rgba(15,111,79,0.12); }
.dc-chip-clear-persist {
white-space: nowrap;
flex-shrink: 0;
display: inline-flex; align-items: center; gap: 4px;
padding: 7px 12px;
border-radius: 8px;
background: transparent;
color: var(--lm-muted);
font-size: 12.5px; font-weight: 500;
cursor: pointer;
border: 1px solid var(--lm-border);
font-family: inherit;
/* Fade in/out instead of instant show/hide */
opacity: 1;
transform: translateX(0);
transition: opacity .22s ease, transform .22s ease, color .14s ease, border-color .14s ease;
pointer-events: auto;
}
.dc-chip-clear-persist:hover { color: var(--lm-text); border-color: var(--lm-muted-2); }
/* When hidden via JS (no chips), fade out instead of disappearing instantly. */
.dc-chip-clear-persist[hidden] {
opacity: 0;
transform: translateX(6px);
pointer-events: none;
}
/* Sort dropdown */
.dc-sort-wrap { position: relative; }
.dc-sort {
display: inline-flex; align-items: center; gap: 6px;
padding: 7px 12px; border-radius: 8px;
background: var(--lm-bg); border: 1px solid var(--lm-border);
font-size: 12.5px; font-weight: 500;
cursor: pointer;
font-family: inherit;
color: var(--lm-text);
white-space: nowrap;
}
.dc-sort:hover { border-color: var(--lm-muted-2); }
.dc-sort-label { color: var(--lm-muted); }
.dc-sort-value { color: var(--lm-text); font-weight: 600; }
/* More-filters trigger */
.dc-more-btn {
position: relative;
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 12px;
height: 32px;
background: var(--lm-text); color: #fff;
border-radius: 8px;
border: 0;
font-size: 12.5px; font-weight: 600;
cursor: pointer;
font-family: inherit;
white-space: nowrap;
}
.dc-more-btn:hover { background: #1e293b; }
.dc-more-btn .dc-filter-btn-count { background: #f59e0b; color: #422006; }
/* ── Generic dropdown popover (used for Location, Service Type, Gender, Sort) ──
Filter-bar popovers use position:fixed (set by JS) because the parent
.dc-filterbar-r9 has overflow-x:auto for horizontal scroll on narrow
viewports — that would otherwise clip the popover. The Sort dropdown
in row 2 is unaffected and uses the default absolute positioning. */
.dc-pop {
position: absolute; top: calc(100% + 6px); left: 0;
min-width: 220px;
background: var(--lm-bg);
border: 1px solid var(--lm-border); border-radius: 10px;
box-shadow: 0 16px 40px -8px rgba(15,23,42,0.18), 0 4px 14px -4px rgba(15,23,42,0.10);
padding: 8px;
z-index: 80;
animation: dc-pop-in .14s ease;
}
/* Per-popover widths (absolute positioning still needs explicit widths since
the popover is wider than its trigger button). */
.dc-pop.dc-pop-gender { width: 220px; }
.dc-pop.dc-location-pop { width: 480px; max-width: 480px; }
.dc-pop.dc-cal-pop { width: 620px; }
.dc-pop.dc-pop-categorized { width: 320px; }
/* Right-most filter wrappers anchor the popover's RIGHT edge to the wrapper's
right edge so the popover doesn't overflow the viewport.
Gender is the 4th of 6 (Age + Day rate sliders are to its right) so it
stays left-aligned. Only the two sliders need right-anchoring. */
.dc-filter-slider:nth-last-child(-n+2) > .dc-pop {
left: auto !important;
right: 0 !important;
}
/* Quick Profile — tier badge at top-right corner (replaces X close button).
Uses the SAME .dc-card-tier styling as the cards in the grid for visual
consistency. Position only here; chip styling inherits from existing
.dc-card-tier rules above. */
.dc-qp-tier-corner {
position: absolute;
top: 16px; right: 16px;
z-index: 10;
display: inline-flex;
align-items: center;
}
.dc-qp-tier-corner:empty { display: none; }
.dc-pop-right { left: auto; right: 0; }
.dc-pop[hidden] { display: none; }
@keyframes dc-pop-in {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
.dc-pop-item {
display: flex; align-items: center; gap: 8px;
width: 100%; padding: 7px 10px;
font-size: 12.5px; font-weight: 500;
border-radius: 6px;
text-align: left;
background: transparent;
border: 0;
cursor: pointer;
font-family: inherit;
color: var(--lm-text);
}
.dc-pop-item:hover { background: var(--lm-surface); }
.dc-pop-item.is-selected { background: var(--lm-primary-soft); color: var(--lm-primary-text); }
.dc-pop-check {
width: 16px; height: 16px; flex-shrink: 0;
display: inline-grid; place-items: center;
border-radius: 4px; border: 1.5px solid var(--lm-border);
}
.dc-pop-check.is-checked {
background: var(--lm-primary); border-color: var(--lm-primary);
color: #fff;
}
/* Single-select dropdowns (Sort + Gender) — radio button visual to
communicate "pick one" instead of the checkbox-style square that
reads as multi-select. Scoped by ancestor so other places where
.dc-pop-check is used as an actual checkbox stay unchanged. */
.dc-sort-wrap .dc-pop-check,
.dc-pop-gender .dc-pop-check {
width: 14px; height: 14px;
border-radius: 50%;
border: 1.5px solid var(--lm-muted-2);
background: transparent;
position: relative;
}
.dc-sort-wrap .dc-pop-check.is-checked,
.dc-pop-gender .dc-pop-check.is-checked {
border-color: var(--lm-primary);
background: transparent;
}
/* Inner dot — only on selected state. SVG checkmark in markup is hidden
visually for these two dropdowns since the dot is the indicator. */
.dc-sort-wrap .dc-pop-check.is-checked::after,
.dc-pop-gender .dc-pop-check.is-checked::after {
content: "";
width: 6px; height: 6px;
border-radius: 50%;
background: var(--lm-primary);
}
.dc-sort-wrap .dc-pop-check svg,
.dc-pop-gender .dc-pop-check svg { display: none; }
.dc-pop-divider { height: 1px; background: var(--lm-border-2); margin: 4px 0; }
/* ── Grid wrap ───────────────────────────────────────────── */
.dc-grid-wrap { padding: 22px 0 80px; }
.dc-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
/* Phase H R8: dense flow lets regular 1-col cards backfill the cells
left empty around explicitly-positioned VIP/Elite cards (which use
inline grid-row + grid-column-start to claim a fixed slot). Without
dense, regulars would skip over the gaps and the grid would have
visible holes. With dense + the per-VIP rotation, every row holds
at most one VIP and the regulars wrap neatly around them. */
grid-auto-flow: dense;
}
/* Phase H R8: default fallback for VIP/Elite cards when no inline
style is set (e.g. ajax responses that don't compute rotation, or
regulars marked is-double for any reason). They span 2 columns and
let dense flow place them. The inline style on .is-double from
people.tpl / ajax templates overrides this with a fixed slot. */
.dc-card.is-double {
grid-column: span 2;
}
@media (max-width: 1279px) {
/* 3-col grid (tablet). VIP rotation 1 → 2 → 1 → 2 (col 3 would
overflow span 2 here, so the inline style from the rotation may
yield col 3 — we clamp via override below to col 1 in that case). */
.dc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dc-card.is-double { grid-column: span 2; }
}
@media (max-width: 1023px) {
/* 2-col grid (small tablet). VIP takes the full row alone — the
inline-style grid-column from the rotation is overridden here. */
.dc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dc-card.is-double { grid-column: 1 / -1 !important; grid-row: auto !important; }
}
@media (max-width: 640px) {
/* 1-col grid (mobile). Same full-width treatment. */
.dc-grid { grid-template-columns: 1fr; }
.dc-card.is-double { grid-column: 1 / -1 !important; grid-row: auto !important; }
}
/* ── Phase G — Skeleton + shimmer for photo area ──────────────────────
Card .dc-card-photo starts with .is-loading; lm-discover.js preloads
the underlying image (data-photo-src) and removes the class when ready.
Until then the .dc-card-skeleton overlay paints a shimmering gradient
so the user sees a placeholder instead of an empty rectangle. */
.dc-card-skeleton {
position: absolute;
inset: 0;
background: linear-gradient(
90deg,
var(--lm-surface-2, #f1f5f9) 0%,
var(--lm-surface, #ffffff) 50%,
var(--lm-surface-2, #f1f5f9) 100%
);
background-size: 200% 100%;
animation: lm-shimmer 1.4s linear infinite;
z-index: 1;
opacity: 1;
transition: opacity .25s ease;
pointer-events: none;
}
.dc-card-photo:not(.is-loading) .dc-card-skeleton {
opacity: 0;
}
html[data-lm-theme="dark"] .dc-card-skeleton {
background: linear-gradient(
90deg,
#1c232c 0%,
#232a33 50%,
#1c232c 100%
);
background-size: 200% 100%;
}
@keyframes lm-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* ── Card (standard 1×1) ─────────────────────────────────── */
.dc-card {
position: relative;
display: flex; flex-direction: column;
background: var(--lm-bg);
border: 1px solid var(--lm-border);
border-radius: 12px;
overflow: visible; /* was hidden — let language-flag tooltips escape the card; photo rounds itself below */
transition: transform .14s, box-shadow .14s, border-color .14s;
isolation: isolate;
/* R20T: reserve height so cards with variable body content (some have
bio, some empty stats, some without verified badge) don't cause
neighbours to shift when their populated state differs. Photo
aspect-ratio already reserves photo space; this stabilises the body
section. Tuned to fit a fully populated single card at ~280px width:
photo (~350px) + body + CTAs ≈ 480px. */
min-height: 480px;
}
/* Doubles span 2 columns and use a horizontal photo+info layout — they
end up shorter than singles, so override with a smaller min-height. */
.dc-card.is-double {
min-height: 360px;
}
/* PRO single cards — fixed height. */
/*.dc-card.is-pro { */
/* height: 530px; */
}
/* R20T: fade-in for cards appended via Load More so they don't pop into
place. JS adds .is-new immediately after grid.appendChild, removes it
after the animation completes (lm-discover.js initDiscoverLoadMore). */
@keyframes lmCardFadeIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.dc-card.is-new {
animation: lmCardFadeIn 0.22s ease-out;
}
.dc-card:hover {
transform: translateY(-2px);
box-shadow: var(--lm-shadow-md);
border-color: var(--lm-primary-soft-2);
}
.dc-card-photo {
position: relative;
aspect-ratio: 4 / 5;
height: 270px; /* fixed photo height */
overflow: hidden;
border-radius: 12px 12px 0 0; /* round the top now that .dc-card is overflow:visible */
background: var(--lm-surface);
cursor: pointer;
}
.dc-card-photo .dc-photo-frame {
position: absolute; inset: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
opacity: 0;
transition: opacity .25s ease;
}
.dc-card-photo .dc-photo-frame.is-active { opacity: 1; }
.dc-card-photo a { position: absolute; inset: 0; z-index: 2; }
/* Top-right cluster — bookmark + tier badge */
.dc-card-tr {
position: absolute; top: 10px; right: 10px;
display: inline-flex; align-items: center; gap: 6px;
z-index: 3;
}
.dc-card-tier {
display: inline-flex; align-items: center; gap: 4px;
padding: 4px 8px;
background: rgba(255,255,255,0.95);
border: 1px solid var(--lm-border);
color: var(--lm-text);
border-radius: 6px;
font-size: 10.5px; font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
font-family: var(--lm-font-mono);
box-shadow: 0 1px 4px rgba(15,23,42,0.10);
}
.dc-card-tier.is-pro {
background: var(--lm-primary);
border-color: var(--lm-primary);
color: #fff;
}
.dc-card-tier.is-vip {
background: linear-gradient(135deg, var(--lm-gold-soft), var(--lm-gold-soft-2));
border-color: #d4a93f;
color: #6e4a04;
}
.dc-card-tier.is-elite {
background: linear-gradient(135deg, #1f2937, var(--lm-elite-bg));
border-color: #d4a93f;
color: #f5deb3;
}
.dc-card-tier.is-elite svg { color: #f5deb3; }
.dc-card-tier.is-vip svg { color: #6e4a04; }
.dc-card-tier svg { color: currentColor; }
.dc-card-bookmark {
display: inline-grid; place-items: center;
width: 30px; height: 30px;
background: rgba(255,255,255,0.9);
border: 0;
border-radius: 50%;
color: var(--lm-text);
cursor: pointer;
transition: background .12s, color .12s;
z-index: 4;
box-shadow: 0 1px 4px rgba(15,23,42,0.10);
}
.dc-card-bookmark:hover { background: #fff; color: var(--lm-primary-text); }
.dc-card-bookmark.is-saved { color: var(--lm-primary-text); background: var(--lm-primary-soft); }
.dc-card-cta .dc-card-bookmark {
width: 38px; height: 38px;
border-radius: 7px;
background: var(--lm-bg);
border: 1px solid var(--lm-border);
box-shadow: none;
place-items: center;
padding: 0;
}
.dc-card-cta .dc-card-bookmark:hover {
background: #fff;
color: var(--lm-primary-text);
}
.dc-card-cta .dc-card-bookmark svg { width: 16px; height: 16px; }
.dc-photo-counter {
position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%);
padding: 8px 14px;
background: rgba(15,23,42,0.7);
color: #fff;
border-radius: 999px;
font-size: 13px; font-weight: 600;
backdrop-filter: blur(6px);
pointer-events: none;
z-index: 3;
}
/* Photo dots */
.dc-photo-dots {
position: absolute; bottom: 10px; left: 50%;
transform: translateX(-50%);
display: flex; gap: 4px;
z-index: 4;
opacity: 0;
transition: opacity .2s;
}
.dc-card:hover .dc-photo-dots { opacity: 1; }
/* Discover Card editor: dots ALWAYS visible (not just on hover) so the talent
can see which photo position is shown. /people keeps the hover behaviour. */
.lm-dcard-search .dc-photo-dots { opacity: 1; }
.dc-photo-dot {
width: 16px; height: 3px;
border-radius: 2px;
background: rgba(255,255,255,0.4);
transition: background .2s;
}
.dc-photo-dot.is-active { background: #fff; }
/* Card body */
.dc-card-body {
padding: 12px 14px 14px;
display: flex; flex-direction: column; gap: 4px;
flex: 1;
}
.dc-card-namerow {
display: flex; align-items: baseline; justify-content: space-between;
gap: 8px; min-width: 0;
}
.dc-card-name {
display: flex; align-items: center; gap: 5px;
font-size: 14px; font-weight: 600;
letter-spacing: -0.01em;
color: var(--lm-text);
flex: 1 1 auto; min-width: 0; /* claim available width so the price label can't squeeze the name */
text-decoration: none;
}
/* The rate label (esp. the long "Rates on request") must not shrink the name —
it keeps its natural width and the name takes the rest. */
.dc-card-price { flex: 0 0 auto; }
.dc-card-name-text {
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
min-width: 0;
}
.dc-card-name svg.dc-verified { color: var(--lm-primary); flex-shrink: 0; }
.dc-card-name:hover .dc-card-name-text { color: var(--lm-primary-text); text-decoration: underline; text-underline-offset: 2px; }
.dc-card-loc {
display: flex; align-items: center; gap: 6px;
font-size: 12px; color: var(--lm-muted);
min-width: 0;
}
.dc-card-loc > span {
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Country flag — renders as emoji flag derived from ISO alpha-2 code.
No border-radius / no clipping anywhere; flags render as full rectangles
with their natural ~3:2 aspect ratio. Sngine's emojify wraps emoji in
![]()
with a global border-radius: 50% that turns flags
into circles — we override it here. */
.dc-flag {
display: inline-flex; align-items: center; justify-content: center;
height: 14px; min-width: 18px;
padding: 0;
border-radius: 0;
background: transparent;
font-size: 13px;
line-height: 1;
flex-shrink: 0;
overflow: visible;
font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", system-ui, sans-serif;
}
.dc-flag .emoji,
.dc-flag img,
.dc-flag svg {
border-radius: 0 !important;
overflow: visible !important;
box-shadow: none !important;
background: transparent !important;
height: 14px !important;
width: auto !important;
display: inline-block;
vertical-align: middle;
}
.dc-lang-pill-empty { opacity: 0.45; }
.dc-card-service {
font-size: 12.5px; color: var(--lm-text);
font-weight: 500;
margin-top: 1px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Phase D.1.a — Age inline with language pills (same .dc-card-langs row).
Matches the pill font-size so they read as one fluid line. Tiny ✓ when
KYC verified — small green outline check, distinct from the main verified
pill next to the name. */
.dc-card-age-inline {
display: inline-flex;
align-items: center;
gap: 3px;
font-size: 11px;
font-weight: 600;
color: var(--lm-text);
margin-right: 4px;
white-space: nowrap;
}
html[data-lm-theme="dark"] .dc-card-age-inline { color: var(--lm-text); }
/* Keep legacy .dc-card-age (standalone row) for any other call sites. */
.dc-card-age {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 12.5px;
font-weight: 500;
color: var(--lm-text);
margin-top: 1px;
}
.lm-age-verified-check {
display: inline-flex;
align-items: center;
justify-content: center;
width: 14px;
height: 14px;
color: var(--lm-primary, #0f6f4f);
flex-shrink: 0;
vertical-align: -2px;
margin-left: 6px;
}
html[data-lm-theme="dark"] .lm-age-verified-check { color: #5fcc94; }
.lm-age-verified-check svg { width: 100%; height: 100%; }
/* Double-card variant — same compact size as .dc-card-service for landscape layout. */
.dc-card.is-double .dc-card-age { font-size: 12.5px; margin-top: 0; }
.dc-card-langs {
display: flex; flex-wrap: wrap; gap: 7px; align-items: center;
margin-top: 8px;
/* Keep the meta pills on ONE line. When the age + (up to 3) language flags +
rating don't fit, the rating pill (last child) wraps to a 2nd row which is
clipped away by max-height, so it simply disappears instead of stacking. */
max-height: 28px; overflow: hidden;
}
/* Phase 14.9 — age / languages / rating pills (mirror the casting-card pills). */
.dc-meta-pill {
display: inline-flex; align-items: center; gap: 5px;
padding: 3px 10px; border-radius: 999px;
/* Neutral surface + border, matching the Total Reach block (.dc-reach). */
background: var(--lm-surface, #f8fafc);
color: var(--lm-text);
border: 1px solid var(--lm-border);
font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
html[data-lm-theme="dark"] .dc-meta-pill {
background: var(--lm-surface-2, #1c232c);
border-color: var(--lm-border, #2a3038);
}
/* The cake glyph is bottom-weighted (candles thin on top, body low), so it
reads lower than the number even when the boxes are centered — nudge it up
~1.5px to line the cake body up optically with the digits. */
.dc-meta-pill-ico { width: 13px; height: 13px; flex: none; opacity: .9; transform: translateY(-1.5px); }
/* Tiny verified seal BEFORE the age number when the age is ID-verified. */
.dc-age-vchk { display: inline-flex; align-items: center; width: 11px; height: 11px; flex: none; }
.dc-age-vchk svg { width: 100%; height: 100%; }
/* "LANG" abbreviation leading the language-flags pill. */
.dc-lang-pill-wrap { gap: 6px; }
.dc-lang-tag {
font-family: var(--lm-font-mono, ui-monospace, monospace);
font-size: 9.5px; font-weight: 700; letter-spacing: .06em;
text-transform: uppercase; opacity: .72;
}
.dc-meta-pill .dc-lang-flag { font-size: 14px; line-height: 1; }
.dc-lang-code { font-size: 10px; font-weight: 700; letter-spacing: .04em; }
.dc-rating-pill { font-variant-numeric: tabular-nums; }
.dc-rating-pill .dc-rating-star { font-style: normal; color: #f59e0b; font-size: 12px; line-height: 1; }
.dc-lang-pill {
display: inline-block;
padding: 1.5px 6px;
font-family: var(--lm-font-mono);
font-size: 10px; font-weight: 600;
letter-spacing: 0.04em;
background: var(--lm-surface);
border: 1px solid var(--lm-border);
border-radius: 4px;
color: var(--lm-muted);
}
/* Phase H R13: pill row inline container — used on profile.tpl
Languages row + Quick Profile Personal Characteristics. Adds the
inter-pill gap that flex layout provides. */
.lm-lang-pill-row {
display: inline-flex; flex-wrap: wrap; gap: 4px;
}
.lm-lang-pill-row .dc-lang-pill { font-size: 10.5px; padding: 2px 7px; }
/* Phase 7.6 — flag-emoji variant of the language pill. Used wherever
the language has a known code → country mapping (lm_lang_flag).
Renders the bare emoji at a comfortable size, no pill chrome, no
border-radius (per CLAUDE.md: country-flag emojis stay rectangular). */
.dc-lang-flag {
display: inline-block;
font-size: 15px;
line-height: 1;
vertical-align: middle;
/* no background, no border, no border-radius — flag is its own shape */
}
.lm-lang-pill-row .dc-lang-flag { font-size: 14px; }
.dc-card-langs .dc-lang-flag { font-size: 16px; }
.dc-card-stats {
display: flex; align-items: center; gap: 7px;
margin-top: 6px;
font-size: 11.5px; color: var(--lm-muted);
flex-wrap: wrap;
}
.dc-card-stat-rating {
display: inline-flex; align-items: center; gap: 3px;
font-weight: 600; color: var(--lm-text);
}
.dc-card-stat-rating svg { color: #f59e0b; }
.dc-card-stats .dc-dot-soft {
width: 3px; height: 3px; border-radius: 50%;
background: var(--lm-muted-2);
}
/* ── Inline rating (Phase F) — subtle text right after the language flags.
No pill; a thin separator divides it from the flags. Only rendered when the
talent actually has a rating (the template gates on rating > 0). ── */
.dc-card-rating-inline {
display: inline-flex; align-items: center; gap: 3px;
margin-left: 8px; padding-left: 8px;
border-left: 1px solid var(--lm-border);
font-size: 12px; font-weight: 600; color: var(--lm-text);
font-variant-numeric: tabular-nums;
}
.dc-card-rating-inline .dc-rating-star { font-style: normal; color: #f59e0b; font-size: 12px; line-height: 1; }
/* ── TOTAL REACH block (Phase F) — compact: prominent total + "across N
platforms", then up to 3 active-platform pills on ONE row. Kept short so it
doesn't grow the card. Shared by normal + VIP/ELITE variants. ── */
.dc-reach {
margin-top: 8px;
padding: 8px 10px;
border: 1px solid var(--lm-border);
border-radius: 10px;
background: var(--lm-surface, #f8fafc);
}
.dc-reach-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.dc-reach-headl { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.dc-reach-total { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; color: var(--lm-text); line-height: 1.05; }
.dc-reach-label { font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--lm-muted); margin-top: 1px; }
.dc-reach-across { font-size: 11px; color: var(--lm-muted); white-space: nowrap; flex: none; }
.dc-reach-across strong { color: var(--lm-text); font-weight: 700; }
/* One row only: pills are sorted largest-first; any that don't fit wrap to a
2nd row which is clipped away entirely by max-height (whole pill hidden — no
half-cut pill, no visible second line). Pill height is 23px, so a 25px cap
shows row 1 fully and hides row 2 (which starts ~29px down with the 6px gap). */
.dc-reach-pills { display: flex; align-items: center; gap: 4px; margin-top: 7px; flex-wrap: wrap; max-height: 25px; overflow: hidden; }
.dc-reach-pill {
display: inline-flex; align-items: center; gap: 4px;
padding: 2px 6px; min-width: 0;
border: 1px solid var(--lm-border); border-radius: 999px;
background: var(--lm-bg, #fff);
font-size: 11.5px; font-weight: 600; color: var(--lm-text); white-space: nowrap;
}
.dc-reach-pill-ic { display: inline-flex; align-items: center; color: var(--lm-text); flex: none; }
.dc-reach-pill-n { font-family: var(--lm-font-mono, ui-monospace, monospace); font-size: 11px; }
.dc-reach-pill-v { flex: none; }
/* dark theme */
html[data-lm-theme="dark"] .dc-reach { background: var(--lm-surface-2, #1c232c); border-color: var(--lm-border, #2a3038); }
html[data-lm-theme="dark"] .dc-reach-pill { background: var(--lm-surface, #151b23); border-color: var(--lm-border, #2a3038); }
/* Bio (doubles only) */
.dc-card-bio {
margin: 4px 0 0;
font-size: 12.5px;
color: var(--lm-text);
line-height: 1.45;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Socials */
.dc-card-socials {
display: flex; align-items: center; gap: 8px;
margin-top: 6px;
font-size: 11.5px; color: var(--lm-muted);
flex-wrap: wrap;
}
.dc-social-item {
display: inline-flex; align-items: center; gap: 4px;
white-space: nowrap;
}
.dc-social-icon { display: inline-flex; }
/* Phase 0 (social followers) — verified ✓ after the count. Clean check, no
circle: just a small green tick that reads as "ownership verified". */
.dc-social-item.is-verified .dc-social-count::after {
content: "✓";
margin-left: 3px;
font-weight: 700;
color: var(--lm-primary, #0f6f4f);
}
/* Verified-but-not-yet-fetched count → small pulsing dot ("updating"). */
.dc-social-upd {
display: inline-block; width: 6px; height: 6px; border-radius: 999px;
background: var(--lm-muted, #94a3b8);
animation: dc-social-pulse 1.1s ease-in-out infinite;
}
@keyframes dc-social-pulse { 0%,100% { opacity: 0.35; } 50% { opacity: 1; } }
.dc-social-count {
font-family: var(--lm-font-mono);
font-weight: 600; color: var(--lm-text);
}
.dc-social-total {
margin-left: auto;
font-family: var(--lm-font-mono);
font-size: 15px; font-weight: 700;
color: var(--lm-primary-text);
letter-spacing: -0.01em;
display: inline-flex; align-items: center;
}
.dc-social-total::after {
content: "total";
font-size: 9.5px; font-weight: 600;
color: var(--lm-muted);
margin-left: 4px;
letter-spacing: 0.06em; text-transform: uppercase;
}
/* Price */
.dc-card-price {
font-size: 13px; font-weight: 600;
color: var(--lm-text);
white-space: nowrap;
flex-shrink: 0;
}
.dc-card-price-from {
font-family: var(--lm-font-mono);
font-size: 10.5px; color: var(--lm-muted);
font-weight: 500;
}
.dc-card-price strong {
color: var(--lm-primary-text);
font-family: var(--lm-font-mono);
letter-spacing: -0.02em;
}
/* CTAs */
.dc-card-cta {
display: flex; flex-wrap: nowrap; align-items: center;
gap: 6px; margin-top: auto; padding-top: 10px;
max-width: 100%;
box-sizing: border-box;
}
.dc-card-cta .dc-card-bookmark {
flex: 0 0 auto !important;
}
.dc-btn-primary, .dc-btn-secondary {
display: inline-flex; align-items: center; justify-content: center; gap: 5px;
padding: 8px 10px;
font-size: 12px; font-weight: 600;
border-radius: 7px;
transition: background .12s, border-color .12s, transform .12s;
white-space: nowrap;
min-width: 0;
cursor: pointer;
font-family: inherit;
text-decoration: none;
}
.dc-btn-secondary {
padding-left: 8px;
padding-right: 8px;
background: var(--lm-bg); color: var(--lm-text);
border: 1px solid var(--lm-border);
}
.dc-btn-primary {
background: var(--lm-primary); color: #fff;
border: 1px solid var(--lm-primary);
box-sizing: border-box;
}
.dc-btn-primary:hover { background: var(--lm-primary-strong); color: #fff; }
.dc-btn-secondary:hover { border-color: var(--lm-primary); color: var(--lm-primary-text); }
/* Card CTA ONLY: View Profile (primary) bigger than Preview (secondary).
Scoped to .dc-card-cta so these ratios do NOT leak to the filter popovers
(Availability / Service Apply buttons, etc.). */
.dc-card-cta .dc-btn-secondary { flex: 1 1 0 !important; min-width: 0 !important; max-width: none !important; }
.dc-card-cta .dc-btn-primary { flex: 1.7 1 0 !important; min-width: 0 !important; max-width: none !important; }
/* Guest cards have no bookmark → Preview & View Profile split the row 50/50. */
.dc-card-cta:not(:has(.dc-card-bookmark)) .dc-btn-secondary,
.dc-card-cta:not(:has(.dc-card-bookmark)) .dc-btn-primary {
flex: 1 1 0 !important;
}
/* Small screens: card CTA paddings (ratios from the scoped rule above hold). */
@media (max-width: 520px) {
.dc-card-cta { gap: 6px; padding-top: 8px; max-width: 100%; }
.dc-card-cta .dc-card-bookmark { flex: 0 0 auto !important; }
.dc-card-cta .dc-btn-secondary { padding: 6px 8px; }
.dc-card-cta .dc-btn-primary { padding: 6px 10px; }
}
@media (max-width: 1000px) and (min-width: 521px) {
.dc-card-cta .dc-btn-secondary { padding: 7px 8px; }
.dc-card-cta .dc-btn-primary { padding: 8px 12px; }
}
@media (min-width: 1600px) {
.dc-card-cta .dc-btn-secondary { padding: 8px 12px; }
.dc-card-cta .dc-btn-primary { padding: 8px 12px; }
}
/* ── Double card (VIP / Elite — span 2 cols) ─────────────── */
/* Per design (user-confirmed Sofia M. screenshot):
ROW 1: photo full width, ~16:10 aspect.
ROW 2: info-left (name+price, loc, role, lang pills, bio) | info-right
(FEATURED SERVICES list, stats, socials, CTA buttons). */
.dc-card.is-double {
/* Phase G — grid-column moved to the canonical rule earlier in this
file (uses --vip-column-start / span 2). This block only governs
the INNER 2-column layout (photo above, info-left + info-right
below). The grid-column line was duplicated here and overrode the
rotation, snapping every wide card back to "auto" → all VIPs
left-aligned. */
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto 1fr;
align-items: stretch;
}
.dc-card.is-double .dc-card-photo {
grid-column: 1 / 3;
grid-row: 1 / 2;
/* Phase H R4: clamp photo height to match regular cards (~340px).
Was aspect-ratio:16/10 which gave ~351px at 4-col layout — 11px
taller than singles. The info-grid row underneath uses 1fr so the
full card height stays unchanged; the freed pixels just expand the
info-left + info-right padding/content area below.
min() preserves 16/10 ratio on smaller breakpoints (when 16/10 of
card width is already <340px, e.g. mobile 1-col). */
aspect-ratio: 16 / 10;
max-height: 340px;
min-width: 0;
width: 100%;
object-fit: cover;
}
.dc-card-info-left {
grid-column: 1 / 2;
grid-row: 2 / 3;
min-width: 0;
display: flex; flex-direction: column;
padding: 14px 8px 14px 16px;
gap: 5px;
border-right: 1px solid var(--lm-border-2);
}
.dc-card-info-right {
grid-column: 2 / 3;
grid-row: 2 / 3;
min-width: 0;
display: flex; flex-direction: column;
padding: 14px 16px 14px 16px;
gap: 8px;
}
.dc-card-info-right > .dc-card-cta {
margin-top: auto;
padding-top: 8px;
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 8px;
}
/* Mirror the right column's bottom-pinned CTA: push the reach block to the
bottom of the LEFT column so the socials line up on the same baseline as the
buttons. Without this, when the services column is taller the stretched left
column leaves a gap and the reach block floats up (misaligned).
FALLBACK GUARANTEE: applies to EVERY double-width card (VIP + ELITE, on the
preview AND /people). Descendant selector so it holds even if the reach
partial ever gets wrapped. The reach block must always stick to the bottom. */
.dc-card.is-double .dc-card-info-left .dc-reach { margin-top: auto; }
/* Tighter typography in double card */
.dc-card.is-double .dc-card-name { font-size: 14.5px; }
.dc-card.is-double .dc-card-loc { font-size: 11.5px; margin-top: 0; }
.dc-card.is-double .dc-card-service { font-size: 12.5px; margin-top: 0; font-weight: 600; }
.dc-card.is-double .dc-card-stats { font-size: 11.5px; margin-top: 4px; gap: 5px; }
.dc-card.is-double .dc-card-socials { margin-top: 3px; gap: 7px; }
.dc-card.is-double .dc-card-bio {
font-size: 12px;
/* v2.2m — 4 visible lines for VIP/Elite cards. */
-webkit-line-clamp: 4;
margin-top: 6px;
line-height: 1.45;
}
/* VIP / ELITE cards: clamp the description to 2 lines (not 4). */
.dc-card.is-double.is-vip .dc-card-bio,
.dc-card.is-double.is-elite .dc-card-bio {
-webkit-line-clamp: 4;
}
.dc-card.is-double .dc-card-langs { margin-top: 4px; gap: 3px; }
.dc-card.is-double .dc-lang-pill { font-size: 9.5px; padding: 1px 5px; }
/* Featured services panel (right column inside double) */
.dc-card-feat {
display: flex; flex-direction: column; gap: 4px;
padding-bottom: 8px;
border-bottom: 1px dashed var(--lm-border);
margin-bottom: 4px;
}
.dc-card-feat-title {
font-size: 9.5px; font-weight: 600;
letter-spacing: .08em; text-transform: uppercase;
color: var(--lm-muted);
margin: 0 0 2px;
}
.dc-card-feat-row {
display: flex; align-items: baseline; justify-content: space-between;
gap: 8px;
font-size: 12px;
}
.dc-card-feat-name { color: var(--lm-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-card-feat-price {
/* v2.2m — switched off mono font (was monospace, looked out of place
next to the rest of the card). Sans-serif, tabular numbers only. */
font-family: inherit;
font-weight: 700;
color: var(--lm-primary-text);
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
/* v2.2m — duration unit ("/ day", "/ video", "/ photoshoot") right after
the price. Muted grey + lighter weight so the eye locks on the price
number first. Tight 1px gap — even closer to the price. */
.dc-card-feat-unit {
margin-left: 1px;
font-weight: 500;
font-size: 0.92em;
color: var(--lm-muted, #64748b);
font-family: inherit;
}
/* v2.2m — Inline "Buy content" button for digital_content rows. Compact
icon-only square in the brand teal palette, sits right after the price.
(is-digital align-items override removed — it pushed the price below
the name when the Buy icon was hidden; all rows now baseline-align so
the price sits next to the name like in event rows.) */
/* v2.2m — (stacked-layout experiment reverted — left old inline row.) */
.lm-svc-buy-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 6px;
border: 1px solid var(--lm-client, #00363f);
background: var(--lm-client, #00363f);
color: #fff;
cursor: pointer;
flex: none;
transition: background 120ms, border-color 120ms;
}
.lm-svc-buy-btn:hover {
background: var(--lm-client-strong, #012a31);
border-color: var(--lm-client-strong, #012a31);
}
.lm-svc-buy-btn svg { display: block; }
/* Per-tier card borders */
/* Phase A — explicit !important + 2px so the gold/elite border is clearly
visible at idle (was being washed out by the inset box-shadow). */
.dc-card.is-vip {
border: 2px solid var(--lm-gold, #C6A15B) !important;
box-shadow: 0 0 0 1px rgba(198,161,91,0.25) inset;
}
html[data-lm-theme="dark"] .dc-card.is-vip {
border-color: #C6A15B !important;
box-shadow: 0 0 0 1px rgba(198,161,91,0.45) inset, 0 0 16px rgba(198,161,91,0.20);
}
.dc-card.is-vip:hover { border-color: #b8860b !important; }
.dc-card.is-elite {
border: 2px solid var(--lm-elite-bg) !important;
}
.dc-card.is-elite:hover { border-color: #1e293b !important; }
/* Dark theme — Elite border uses the same gold as VIP (user request: both
premium tiers should read as a single luxury accent in dark mode). The
inset shadow and outer glow mirror the VIP dark treatment for a
consistent halo. */
html[data-lm-theme="dark"] .dc-card.is-elite {
border-color: #C6A15B !important;
box-shadow: 0 0 0 1px rgba(198,161,91,0.45) inset, 0 0 16px rgba(198,161,91,0.20);
}
html[data-lm-theme="dark"] .dc-card.is-elite:hover {
border-color: #b8860b !important;
}
/* ── Tier-colored CTA buttons ─────────────────────────────
VIP and Elite buttons use the EXACT SAME gradient + border + color as
their tier badges, so the button reads as a continuation of the badge.
Applies to .dc-btn-primary and .dc-btn-secondary inside .dc-card.is-vip,
.dc-card.is-elite, .dc-qp.is-vip, .dc-qp.is-elite ancestors, and to any
element marked [data-tier="vip"] or [data-tier="elite"] (used by JS-
rendered service-row buttons). Verified/Pro keep the default green. */
/* VIP PRIMARY — gold gradient + amber border + dark amber text/icon */
.dc-card.is-vip .dc-btn-primary,
.dc-qp.is-vip .dc-btn-primary,
[data-tier="vip"].dc-btn-primary {
background: linear-gradient(135deg, var(--lm-gold-soft), var(--lm-gold-soft-2));
border: 1.5px solid #d4a93f;
color: #6e4a04;
}
.dc-card.is-vip .dc-btn-primary svg,
.dc-qp.is-vip .dc-btn-primary svg,
[data-tier="vip"].dc-btn-primary svg { color: #6e4a04; }
.dc-card.is-vip .dc-btn-primary:hover,
.dc-qp.is-vip .dc-btn-primary:hover,
[data-tier="vip"].dc-btn-primary:hover {
background: linear-gradient(135deg, #fff3b8, #ecd194);
border-color: #b8860b;
color: #6e4a04;
}
/* VIP SECONDARY (e.g. Quick Profile, Buy Content) — WHITE bg + gold border,
BLACK text/icon. Gold-on-white was too low-contrast to read at a glance. */
.dc-card.is-vip .dc-btn-secondary,
.dc-qp.is-vip .dc-btn-secondary,
[data-tier="vip"].dc-btn-secondary {
background: #ffffff;
border: 1.5px solid #d4a93f;
color: #0f172a;
}
.dc-card.is-vip .dc-btn-secondary svg,
.dc-qp.is-vip .dc-btn-secondary svg,
[data-tier="vip"].dc-btn-secondary svg { color: #0f172a; }
.dc-card.is-vip .dc-btn-secondary:hover,
.dc-qp.is-vip .dc-btn-secondary:hover,
[data-tier="vip"].dc-btn-secondary:hover {
background: var(--lm-gold-soft);
border-color: #b8860b;
}
/* Elite PRIMARY — dark navy gradient + gold border + cream text/icon */
.dc-card.is-elite .dc-btn-primary,
.dc-qp.is-elite .dc-btn-primary,
[data-tier="elite"].dc-btn-primary {
background: linear-gradient(135deg, #1f2937, var(--lm-elite-bg));
border: 1.5px solid #d4a93f;
color: #f5deb3;
}
.dc-card.is-elite .dc-btn-primary svg,
.dc-qp.is-elite .dc-btn-primary svg,
[data-tier="elite"].dc-btn-primary svg { color: #f5deb3; }
.dc-card.is-elite .dc-btn-primary:hover,
.dc-qp.is-elite .dc-btn-primary:hover,
[data-tier="elite"].dc-btn-primary:hover {
background: linear-gradient(135deg, #273548, #131c2e);
border-color: #e0b966;
color: #f5deb3;
}
/* Elite SECONDARY (e.g. Quick Profile) — WHITE bg, NAVY border + text.
Gold is a VIP color; Elite secondary uses navy to match its tier identity. */
.dc-card.is-elite .dc-btn-secondary,
.dc-qp.is-elite .dc-btn-secondary,
[data-tier="elite"].dc-btn-secondary {
background: #ffffff;
border: 1.5px solid var(--lm-elite-bg);
color: var(--lm-elite-bg);
}
.dc-card.is-elite .dc-btn-secondary svg,
.dc-qp.is-elite .dc-btn-secondary svg,
[data-tier="elite"].dc-btn-secondary svg { color: var(--lm-elite-bg); }
.dc-card.is-elite .dc-btn-secondary:hover,
.dc-qp.is-elite .dc-btn-secondary:hover,
[data-tier="elite"].dc-btn-secondary:hover {
background: var(--lm-surface-2);
border-color: #1e293b;
}
/* Opt-out: buttons marked .lm-cta-neutral never take a tier color, even
when they live inside a tiered ancestor. Used for QP Close (footer) and
"Buy Content" on digital-content service rows — these are commerce
actions that stay visually neutral regardless of profile tier. */
.dc-card.is-vip .dc-btn-secondary.lm-cta-neutral,
.dc-card.is-elite .dc-btn-secondary.lm-cta-neutral,
.dc-qp.is-vip .dc-btn-secondary.lm-cta-neutral,
.dc-qp.is-elite .dc-btn-secondary.lm-cta-neutral {
background: var(--lm-bg);
border: 1px solid var(--lm-border);
color: var(--lm-text);
}
.dc-card.is-vip .dc-btn-secondary.lm-cta-neutral svg,
.dc-card.is-elite .dc-btn-secondary.lm-cta-neutral svg,
.dc-qp.is-vip .dc-btn-secondary.lm-cta-neutral svg,
.dc-qp.is-elite .dc-btn-secondary.lm-cta-neutral svg { color: var(--lm-text); }
.dc-card.is-vip .dc-btn-secondary.lm-cta-neutral:hover,
.dc-card.is-elite .dc-btn-secondary.lm-cta-neutral:hover,
.dc-qp.is-vip .dc-btn-secondary.lm-cta-neutral:hover,
.dc-qp.is-elite .dc-btn-secondary.lm-cta-neutral:hover {
border-color: var(--lm-muted-2);
color: var(--lm-text);
background: var(--lm-surface);
}
/* ── Empty / Load more ───────────────────────────────────── */
.dc-empty {
grid-column: 1 / -1;
padding: 60px 30px;
text-align: center;
color: var(--lm-muted);
}
.dc-empty-icon {
display: inline-grid; place-items: center;
width: 64px; height: 64px;
margin: 0 auto 14px;
background: var(--lm-surface);
border-radius: 50%;
color: var(--lm-muted-2);
}
.dc-empty h3 { margin: 0 0 6px; font-size: 16px; color: var(--lm-text); }
.dc-empty p { margin: 0 0 16px; font-size: 13px; }
.dc-load-more {
display: flex; justify-content: center;
margin: 28px 0 0;
}
.dc-load-more button {
padding: 11px 24px;
background: var(--lm-bg);
border: 1px solid var(--lm-border);
border-radius: 8px;
font-size: 13px; font-weight: 600;
color: var(--lm-text);
cursor: pointer;
font-family: inherit;
}
.dc-load-more button:hover { border-color: var(--lm-primary); color: var(--lm-primary-text); }
/* VIP-preview empty featured-services placeholder (owner's own preview only). */
.dc-card-feat-ph { display: flex; flex-direction: column; gap: 8px; padding-top: 2px; }
.dc-card-feat-ph-row {
height: 34px; border-radius: 8px;
background: var(--lm-surface-2, #f1f5f9);
border: 1px dashed var(--lm-border, #e5e7eb);
}
.dc-card-feat-ph-text { margin: 6px 0 2px; font-size: 12px; color: var(--lm-muted, #64748b); }
.dc-card-feat-ph-cta {
align-self: flex-start; display: inline-flex; align-items: center;
padding: 7px 14px; border-radius: 8px; font-size: 12.5px; font-weight: 700;
text-decoration: none; color: var(--lm-primary, #0f6f4f);
border: 1px solid var(--lm-primary, #0f6f4f); background: transparent;
pointer-events: auto !important; /* beat .lm-dcard-search .dc-card a {pointer-events:none} */
}
.dc-card-feat-ph-cta:hover { background: var(--lm-primary, #0f6f4f); color: #fff; }
html[data-lm-theme="dark"] .dc-card-feat-ph-row { background: var(--lm-surface-2, #1c232c); }
/* Guest sign-up wall — replaces Load More once a logged-out visitor uses up
their browse allowance. .dc-load-more is a flex row, so this column centres. */
.dc-guest-wall {
display: flex; flex-direction: column; align-items: center; gap: 12px;
text-align: center;
}
.dc-guest-wall-text {
margin: 0; font-size: 14px; font-weight: 600; color: var(--lm-text);
max-width: 360px;
}
.dc-guest-wall-actions { display: flex; align-items: center; gap: 10px; }
.dc-guest-wall-actions .dc-btn-primary,
.dc-guest-wall-actions .dc-btn-secondary { padding: 10px 22px; font-size: 13px; }
/* ── Filter modal (used for Location/Availability/Service Type/Gender drawers) ── */
.dc-modal-scrim {
position: fixed; inset: 0;
background: rgba(15,23,42,0.45);
z-index: 200;
display: none;
place-items: center;
padding: 24px;
animation: dc-fade .18s ease;
}
.dc-modal-scrim.is-open { display: grid; }
@keyframes dc-fade { from { opacity: 0; } to { opacity: 1; } }
.dc-modal {
width: 480px; max-width: calc(100vw - 32px);
max-height: 90vh;
background: var(--lm-bg);
border: 1px solid var(--lm-border);
border-radius: 14px;
box-shadow: 0 24px 60px -12px rgba(15,23,42,0.30);
display: flex; flex-direction: column;
overflow: hidden;
}
.dc-modal-head {
display: flex; align-items: flex-start; justify-content: space-between;
padding: 18px 20px 14px;
border-bottom: 1px solid var(--lm-border-2);
gap: 12px;
}
.dc-modal-head h3 {
margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -0.01em;
color: var(--lm-text);
}
.dc-modal-head p {
margin: 4px 0 0;
font-size: 12.5px;
color: var(--lm-muted);
}
.dc-modal-close {
display: inline-grid; place-items: center;
width: 32px; height: 32px;
background: transparent; border: 0; border-radius: 6px;
color: var(--lm-muted);
cursor: pointer;
flex-shrink: 0;
}
.dc-modal-close:hover { background: var(--lm-surface); color: var(--lm-text); }
.dc-modal-body {
flex: 1; overflow-y: auto;
padding: 16px 20px;
display: flex; flex-direction: column; gap: 12px;
}
.dc-modal-foot {
display: flex; align-items: center; justify-content: space-between;
gap: 12px;
padding: 12px 20px;
background: var(--lm-surface);
border-top: 1px solid var(--lm-border);
}
.dc-modal-foot .dc-clear-link {
/* Phase H R9: visible outlined button (same style as cal/location). */
font-size: 12.5px; font-weight: 600;
color: var(--lm-text);
background: var(--lm-bg);
border: 1px solid var(--lm-border);
cursor: pointer;
padding: 8px 14px;
border-radius: 6px;
font-family: inherit;
}
.dc-modal-foot .dc-clear-link:hover {
background: var(--lm-surface);
border-color: var(--lm-muted-2);
}
.dc-modal-foot .dc-btn-primary { padding: 10px 18px; }
/* Filter chip group inside modal */
.dc-chip-group {
display: flex; flex-wrap: wrap; gap: 6px;
}
.dc-chip-toggle {
padding: 6px 11px;
font-size: 12px; font-weight: 500;
background: var(--lm-bg);
border: 1px solid var(--lm-border);
border-radius: 16px;
color: var(--lm-text);
cursor: pointer;
font-family: inherit;
transition: background .12s, border-color .12s;
}
.dc-chip-toggle:hover { border-color: var(--lm-muted-2); }
.dc-chip-toggle.is-on {
background: var(--lm-primary-soft);
border-color: var(--lm-primary);
color: var(--lm-primary-text);
}
.dc-modal-field { display: flex; flex-direction: column; gap: 6px; }
.dc-modal-field label,
.dc-field-label {
font-family: var(--lm-font-mono);
font-size: 10px; font-weight: 600;
letter-spacing: 0.06em; text-transform: uppercase;
color: var(--lm-muted);
}
.dc-input {
padding: 9px 11px;
font-size: 13px; font-family: var(--lm-font);
border: 1px solid var(--lm-border); border-radius: 7px;
background: var(--lm-bg); color: var(--lm-text);
outline: none;
transition: border-color .12s, box-shadow .12s;
}
.dc-input:focus {
border-color: var(--lm-primary);
box-shadow: 0 0 0 3px var(--lm-primary-soft);
}
/* ── Lightbox (photo carousel, fullscreen) ───────────────── */
.dc-lightbox {
position: fixed; inset: 0;
background: rgba(15,23,42,0.92);
z-index: 400;
display: none;
align-items: center; justify-content: center;
padding: 32px;
}
.dc-lightbox.is-open { display: flex; }
.dc-lightbox-img {
max-width: 90vw; max-height: 86vh;
border-radius: 8px;
box-shadow: 0 24px 60px -12px rgba(0,0,0,0.5);
object-fit: contain;
background: #1e293b;
}
.dc-lightbox-close,
.dc-lightbox-prev,
.dc-lightbox-next {
position: absolute;
display: inline-grid; place-items: center;
width: 44px; height: 44px;
background: rgba(255,255,255,0.10);
border: 1px solid rgba(255,255,255,0.20);
border-radius: 50%;
color: #fff;
cursor: pointer;
transition: background .12s;
}
.dc-lightbox-close:hover,
.dc-lightbox-prev:hover,
.dc-lightbox-next:hover { background: rgba(255,255,255,0.20); }
.dc-lightbox-close { top: 24px; right: 24px; }
.dc-lightbox-prev { left: 24px; top: 50%; transform: translateY(-50%); }
.dc-lightbox-next { right: 24px; top: 50%; transform: translateY(-50%); }
/* ── Dark mode parity ────────────────────────────────────── */
html.lm-dark .dc-filter-btn-r9,
html.lm-dark .dc-filter-slider,
html.lm-dark .dc-sort,
html.lm-dark .dc-card,
html.lm-dark .dc-modal,
html.lm-dark .dc-pop {
background: var(--lm-surface);
border-color: var(--lm-border);
color: var(--lm-text);
}
html.lm-dark .dc-filter-loc-primary {
background: rgba(46,161,111,0.18);
border-color: var(--lm-primary);
color: #6ee7b7;
}
html.lm-dark .dc-filter-loc-primary.is-on {
background: var(--lm-primary);
color: #fff;
}
/* R20z: only the DEFAULT tier chip (no .is-pro/.is-vip/.is-elite) gets
the flat dark-surface treatment in dark mode. Pro/VIP/Elite badges
keep their tier-colored gradients identical to light mode — those
gradients carry the brand identity and must look the same in both
themes. The :not() chain blocks the override on tiered chips. */
html.lm-dark .dc-card-tier:not(.is-pro):not(.is-vip):not(.is-elite),
html[data-lm-theme="dark"] .dc-card-tier:not(.is-pro):not(.is-vip):not(.is-elite) {
background: var(--lm-surface-2);
border-color: var(--lm-border);
color: var(--lm-text);
}
html.lm-dark .dc-card-bookmark { background: rgba(30,41,59,0.85); color: #f1f5f9; }
html.lm-dark .dc-pop-item:hover { background: var(--lm-surface-2); }
html.lm-dark .dc-modal-foot { background: var(--lm-surface-2); border-color: var(--lm-border); }
html.lm-dark .dc-load-more button { background: var(--lm-surface); border-color: var(--lm-border); color: var(--lm-text); }
/* In dark mode, render monochrome platforms (TikTok, X) in white */
html.lm-dark .dc-social-icon[data-platform="tt"],
html.lm-dark .dc-social-icon[data-platform="x"] { color: #f1f5f9 !important; }
/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1100px) {
/* Same as the 1023 rule — 2-col grid; VIP full-width row.
!important needed to override the inline grid-row/grid-column
emitted by people.tpl (which assumes the 4-col desktop layout). */
.dc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dc-card.is-double { grid-column: 1 / -1 !important; grid-row: auto !important; }
}
@media (max-width: 768px) {
/* Mobile is owned by Phase 2.4 — leave layout untouched here. */
}
/* Featured services block on STANDARD cards is mobile-only.
On desktop, hide it (the desktop standard-card design omits Featured Services). */
.dc-card-feat-mobile { display: none; }
/* Short name "First L." is mobile-only. Desktop shows the full name. */
.dc-card-name .dc-name-short { display: none; }
/* ── Compact loader for AJAX filter refresh ──────────────── */
.dc-grid.is-loading { opacity: 0.5; transition: opacity .15s; pointer-events: none; }
/* ════════════════════════════════════════════════════════════════
Filter dropdowns — inline popovers (Phase 2.3 redo)
Positioned absolute beneath their .dc-pop-anchor.
════════════════════════════════════════════════════════════════ */
.dc-pop-anchor { position: relative; }
/* The base .dc-pop is already styled above; add dropdown-specific subclasses. */
/* ── Location popover ────────────────────────────────────── */
.dc-location-pop {
width: 480px; max-width: 480px; max-height: 520px;
padding: 10px;
display: flex; flex-direction: column;
box-sizing: border-box;
}
.dc-location-search {
display: flex; align-items: center; gap: 8px;
padding: 9px 12px;
background: var(--lm-surface);
border: 1px solid var(--lm-border);
border-radius: 8px;
margin-bottom: 8px;
}
.dc-location-search svg { color: var(--lm-muted); flex-shrink: 0; }
.dc-location-search input {
flex: 1; border: 0; background: transparent; outline: none;
font: inherit; font-size: 13px;
color: var(--lm-text);
}
/* Dark theme fixes for the discover popovers:
1) Search field: force the input transparent so it shows the wrapper
background uniformly (a global dark input rule was giving the input
its own darker fill → two-tone vs. the magnifier side). Wrapper colour
itself is left untouched.
2) Footer bar (Clear / +Travelers / Apply) lifted off page-black.
3) Clear buttons lifted off black in every popover. */
html[data-lm-theme="dark"] .dc-location-search input {
background: transparent !important;
}
html[data-lm-theme="dark"] .dc-location-foot {
background: #232b36 !important;
border-top-color: #323c49 !important;
}
html[data-lm-theme="dark"] .dc-clear-link {
/* Clearly-visible neutral button on dark — solid slate, not page-black. */
background: #313b48 !important;
border: 1px solid #4a5666 !important;
color: #ffffff !important;
}
html[data-lm-theme="dark"] .dc-clear-link:hover {
background: #3c4858 !important;
border-color: #5d6b7d !important;
}
/* Selected-cities chip row — single line, horizontally scrollable.
Hidden scrollbar; users scroll/swipe the row to discover more.
min-height fits a 32px chip + 8px top/bottom padding so the bottom
edge never clips. */
.dc-location-selected {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 6px;
padding: 8px 4px;
margin-bottom: 6px;
min-height: 48px;
border-bottom: 1px dashed var(--lm-border-2);
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
.dc-location-selected::-webkit-scrollbar { display: none; height: 0; width: 0; }
/* City chip pill — match the standard active-chip height used in row 2. */
.dc-location-selected .dc-chip,
.dc-location-pop .dc-chip {
flex-shrink: 0;
white-space: nowrap;
display: inline-flex; align-items: center; gap: 4px;
padding: 6px 6px 6px 12px;
min-height: 32px;
border-radius: 16px;
font-size: 13px;
font-weight: 500;
}
.dc-location-worldwide {
display: flex; align-items: center; gap: 8px;
width: 100%;
padding: 10px 10px;
background: transparent; border: 0;
border-radius: 6px;
font: inherit;
font-size: 13px; font-weight: 600;
color: var(--lm-text);
margin-bottom: 6px;
cursor: pointer;
text-align: left;
}
.dc-location-worldwide:hover { background: var(--lm-surface); }
.dc-location-worldwide .dc-location-count {
margin-left: auto;
font-family: var(--lm-font-mono);
font-size: 10.5px; font-weight: 500;
color: var(--lm-muted);
}
.dc-location-list {
flex: 1; overflow-y: auto;
padding-right: 2px;
}
/* ════════════════════════════════════════════════════════════════════
Phase H R12 — Region grouping (Europe / MENA / Asia-Pacific / …).
Each region is a collapsible group above the country list.
- Region header: bold uppercase label + count + chevron + select-all
- Body: hidden by default (except first region from server: is-open)
- Indents inside body so countries read as "child of region"
════════════════════════════════════════════════════════════════════ */
.dc-loc-region {
border-bottom: 1px solid var(--lm-border-2);
padding: 2px 0;
}
.dc-loc-region:last-child { border-bottom: 0; }
.dc-loc-region-head {
/* Phase H R40: soft green wash so the region row visually reads as
a section header distinct from countries below it. Uses the brand
primary-soft variable for theme consistency (matches selected
filter chips). Margin-x:-4 so the wash hugs the popover border. */
display: flex; align-items: center; justify-content: space-between;
gap: 8px;
padding: 10px 12px;
width: 100%;
background: var(--lm-primary-soft);
border-radius: 6px;
}
html[data-lm-theme="dark"] .dc-loc-region-head {
background: rgba(95, 204, 148, 0.10);
}
.dc-loc-region-toggle {
display: inline-flex; align-items: center; gap: 8px;
background: transparent; border: 0; padding: 0;
font: inherit;
color: var(--lm-text);
cursor: pointer;
flex: 1; min-width: 0; text-align: left;
}
.dc-loc-region-toggle-icon {
display: inline-grid; place-items: center;
width: 14px; height: 14px;
color: var(--lm-muted);
/* Chevron rotates from collapsed (▶ pointing right via rotate -90)
to expanded (▼ default). CSS rotate avoids needing two SVGs. */
transform: rotate(-90deg);
transition: transform 0.15s ease;
}
.dc-loc-region.is-open .dc-loc-region-toggle-icon {
transform: rotate(0deg);
}
.dc-loc-region-name {
font-family: var(--lm-font-mono);
font-size: 11px; font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--lm-muted);
}
.dc-loc-region.is-open .dc-loc-region-name {
color: var(--lm-text);
}
.dc-loc-region-head .dc-location-count {
font-family: var(--lm-font-mono);
font-size: 11px; color: var(--lm-muted);
}
.dc-loc-region-body {
/* Indent countries inside a region so the hierarchy reads visually. */
padding-left: 8px;
padding-bottom: 4px;
}
.dc-loc-country { padding: 2px 0; }
.dc-loc-country-head-r10 {
display: flex; align-items: center; justify-content: space-between;
gap: 8px;
padding: 8px 10px;
width: 100%;
}
.dc-loc-country-toggle {
display: inline-flex; align-items: center; gap: 8px;
background: transparent; border: 0; padding: 0;
font: inherit; color: var(--lm-text);
cursor: pointer;
flex: 1; min-width: 0; text-align: left;
}
.dc-loc-country-toggle-icon {
display: inline-grid; place-items: center;
width: 16px; height: 16px;
color: var(--lm-muted);
}
.dc-loc-country-name-text { font-weight: 600; font-size: 13px; }
.dc-loc-country-head-r10 .dc-location-count {
font-family: var(--lm-font-mono);
font-size: 11.5px; color: var(--lm-muted);
}
.dc-loc-select-all {
font-size: 11px; font-weight: 500;
color: var(--lm-primary-text);
background: transparent; border: 0; padding: 4px 8px;
cursor: pointer;
text-decoration: underline;
text-underline-offset: 2px;
flex-shrink: 0;
font-family: inherit;
}
.dc-loc-select-all.is-on { color: var(--lm-primary); }
.dc-loc-cities-flat {
list-style: none; margin: 0;
padding: 4px 12px 8px 36px;
display: flex; flex-direction: column;
gap: 2px;
}
.dc-loc-city {
display: flex; align-items: center; gap: 8px;
width: 100%;
padding: 6px 10px;
background: transparent; border: 0;
border-radius: 6px;
cursor: pointer;
text-align: left;
font: inherit;
font-size: 12.5px;
color: var(--lm-text);
}
.dc-loc-city:hover { background: var(--lm-surface); }
.dc-loc-city.is-on { background: var(--lm-primary-soft); color: var(--lm-primary-text); }
.dc-loc-city-check {
display: inline-grid; place-items: center;
width: 14px; height: 14px;
border: 1.5px solid var(--lm-border);
border-radius: 4px;
flex-shrink: 0;
color: #fff;
}
.dc-loc-city.is-on .dc-loc-city-check {
background: var(--lm-primary); border-color: var(--lm-primary);
}
.dc-loc-city-name { flex: 1; }
.dc-loc-city-count {
color: var(--lm-muted);
font-size: 11.5px;
font-family: var(--lm-font-mono);
}
.dc-loc-city.is-on .dc-loc-city-count { color: var(--lm-primary-text); }
.dc-location-foot {
display: flex; align-items: center; justify-content: space-between;
gap: 12px;
margin: 8px -10px -10px;
padding: 12px 14px;
background: var(--lm-bg);
border-top: 1px solid var(--lm-border-2);
border-radius: 0 0 10px 10px;
}
.dc-location-foot .dc-clear-link {
/* Phase H R9: visible outlined button. Same treatment as the
calendar Clear button for consistency across all popovers. */
background: var(--lm-bg);
border: 1px solid var(--lm-border);
padding: 8px 14px;
font: inherit; font-size: 13px; font-weight: 600;
color: var(--lm-text);
cursor: pointer;
border-radius: 6px;
}
.dc-location-foot .dc-clear-link:hover {
background: var(--lm-surface);
border-color: var(--lm-muted-2);
}
.dc-location-foot .dc-btn-primary {
padding: 10px 20px;
font-size: 13px; font-weight: 600;
}
/* ── Availability calendar popover ───────────────────────── */
.dc-cal-pop {
width: 620px;
min-width: 580px;
padding: 16px 18px;
}
.dc-cal-pop .dc-cal-months { gap: 24px; }
.dc-cal-head {
display: flex; align-items: center; justify-content: space-between;
gap: 12px;
margin-bottom: 10px;
}
.dc-cal-range-display {
font-size: 14px; font-weight: 600;
color: var(--lm-text);
}
.dc-cal-quick { display: inline-flex; gap: 6px; }
.dc-cal-quick button {
padding: 4px 10px;
background: transparent; border: 0;
border-radius: 6px;
font: inherit; font-size: 11.5px; font-weight: 500;
color: var(--lm-primary-text);
cursor: pointer;
}
.dc-cal-quick button:hover { background: var(--lm-primary-soft); }
.dc-cal-nav {
display: flex; align-items: center;
margin-bottom: 6px;
}
.dc-cal-navbtn {
display: inline-grid; place-items: center;
width: 28px; height: 28px;
background: transparent;
border: 1px solid var(--lm-border);
border-radius: 6px;
color: var(--lm-text);
cursor: pointer;
}
.dc-cal-navbtn:hover { background: var(--lm-surface); }
.dc-cal-months {
display: grid; grid-template-columns: 1fr 1fr;
gap: 18px;
}
.dc-cal-monthhead {
font-size: 13px; font-weight: 600; text-align: center;
color: var(--lm-text);
margin-bottom: 6px;
}
.dc-cal-dow {
display: grid; grid-template-columns: repeat(7, 1fr);
font-size: 10.5px; color: var(--lm-muted);
text-transform: uppercase;
font-family: var(--lm-font-mono);
text-align: center;
margin-bottom: 4px;
}
.dc-cal-dow div { padding: 4px 0; }
.dc-cal-grid {
display: grid; grid-template-columns: repeat(7, 1fr);
gap: 2px;
}
.dc-cal-cell {
height: 30px;
display: grid; place-items: center;
background: transparent; border: 0;
border-radius: 6px;
font-size: 12px;
color: var(--lm-text);
cursor: pointer;
font-family: inherit;
}
.dc-cal-cell:hover:not(:disabled):not(.is-empty) { background: var(--lm-surface-2); }
.dc-cal-cell.is-empty { cursor: default; }
.dc-cal-cell.is-past { color: var(--lm-muted); opacity: 0.4; cursor: not-allowed; }
.dc-cal-cell.is-in { background: var(--lm-primary-soft); border-radius: 0; }
.dc-cal-cell.is-start, .dc-cal-cell.is-end {
background: var(--lm-primary); color: #fff; font-weight: 600;
}
.dc-cal-cell.is-start { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.dc-cal-cell.is-end { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.dc-cal-foot {
display: flex; justify-content: space-between; align-items: center;
padding: 12px 0 0;
margin-top: 12px;
border-top: 1px solid var(--lm-border-2);
}
.dc-cal-foot .dc-clear-link {
/* Outlined-grey secondary button. Sized a bit bigger per request. */
background: var(--lm-bg);
border: 1px solid var(--lm-border);
padding: 10px 18px;
font: inherit; font-size: 13px; font-weight: 600;
color: var(--lm-text);
cursor: pointer;
border-radius: 6px;
flex: 0 0 auto;
min-width: 130px;
}
.dc-cal-foot .dc-clear-link:hover {
background: var(--lm-surface);
border-color: var(--lm-muted-2);
}
/* Apply: a defined, smaller width (was spanning the whole row). */
.dc-cal-foot .dc-btn-primary {
flex: 0 0 auto;
min-width: 170px; max-width: 220px;
padding: 10px 20px;
}
/* ── Service Type categorized popover ────────────────────── */
.dc-pop-categorized {
width: 320px;
min-width: 320px;
padding: 0;
display: flex; flex-direction: column;
max-height: 480px;
}
.dc-pop-categorized .dc-pop-item {
padding: 7px 14px;
}
.dc-cat-search {
display: flex; align-items: center; gap: 8px;
padding: 10px 12px;
border-bottom: 1px solid var(--lm-border-2);
color: var(--lm-muted);
}
.dc-cat-search input {
flex: 1; border: 0; outline: 0;
background: transparent;
font: inherit; font-size: 12.5px;
color: var(--lm-text);
}
.dc-cat-list {
flex: 1; overflow-y: auto;
padding: 4px 0;
}
.dc-cat-group { padding: 4px 0; }
.dc-cat-group + .dc-cat-group {
border-top: 1px solid var(--lm-border-2);
margin-top: 4px;
padding-top: 8px;
}
.dc-cat-group-title {
font-family: var(--lm-font-mono);
font-size: 10.5px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.06em;
color: var(--lm-muted);
padding: 6px 14px 4px;
}
.dc-cat-empty {
padding: 14px; text-align: center;
font-size: 12px; color: var(--lm-muted);
}
.dc-cat-foot {
display: flex; justify-content: space-between; align-items: center;
padding: 10px 12px;
border-top: 1px solid var(--lm-border-2);
background: var(--lm-surface);
}
.dc-cat-foot .dc-clear-link {
/* Phase H R9: visible outlined button (matches cal/location/modal). */
background: var(--lm-bg);
border: 1px solid var(--lm-border);
padding: 6px 12px;
font: inherit; font-size: 12.5px; font-weight: 600;
color: var(--lm-text);
cursor: pointer;
border-radius: 6px;
}
.dc-cat-foot .dc-clear-link:hover {
background: var(--lm-surface);
border-color: var(--lm-muted-2);
}
.dc-cat-foot .dc-btn-primary { padding: 8px 16px; font-size: 12.5px; }
/* ── Gender popover ──────────────────────────────────────── */
.dc-pop-gender {
min-width: 180px;
}
/* ── Filters row 2 — sticky Clear-all ─────────────────────
When chips exist, the chip row scrolls horizontally; Clear-all stays
sticky at the right edge with a white-to-transparent gradient fade so
chips fade out softly under it.
Hidden state handled at .dc-chip-clear-persist[hidden] above (opacity
fade, not display:none — keeps element in flow so transition runs). */
.dc-filters-row2-left {
position: relative;
}
/* Gradient fade only when chips exist (i.e. Clear-all visible).
Narrow 40px band right before the button so chips stay readable
until they're nearly under it. */
.dc-filters-row2-left.has-chips::after {
content: "";
position: absolute;
top: 0; right: -2px;
height: 100%;
width: 40px;
background: linear-gradient(to right, rgba(255,255,255,0) 0%, #ffffff 70%, #ffffff 100%);
pointer-events: none;
z-index: 1;
}
html.lm-dark .dc-filters-row2-left.has-chips::after {
background: linear-gradient(to right, rgba(13,17,23,0) 0%, var(--lm-bg) 70%, var(--lm-bg) 100%);
}
.dc-chips-inline {
position: relative;
}
/* Place a sticky Clear-all *inside* the chip row so it pins right when
the chips overflow horizontally. The visible Clear-all in the JSX/spec
sits in the right cluster with Sort/More — that's what we already render. */
/* Dropdown badge (selected count) inside filter button */
.dc-filter-btn-r9.is-active .dc-filter-btn-label {
color: var(--lm-primary-text);
}
/* ── More filters: orange badge ──────────────────────────── */
.dc-more-btn .dc-more-count {
display: inline-grid; place-items: center;
min-width: 18px; height: 18px;
padding: 0 5px;
background: #f59e0b; color: #422006;
border-radius: 9px;
font-size: 10px; font-weight: 700;
font-family: var(--lm-font-mono);
margin-left: 4px;
}
/* ── Filter slider (Age + Day rate) — design parity ──────── */
.dc-filter-slider {
cursor: pointer;
}
.dc-filter-slider-label strong {
font-variant-numeric: tabular-nums;
}
/* Visible track + filled section */
.dc-filter-slider .dc-range-track {
background: var(--lm-border);
height: 4px;
border-radius: 2px;
position: relative;
}
.dc-filter-slider .dc-range-fill {
position: absolute; top: 0; bottom: 0;
background: var(--lm-primary);
border-radius: 2px;
}
/* ── Quick Profile modal ─────────────────────────────────── */
.dc-qp-scrim {
position: fixed; inset: 0;
background: rgba(15,23,42,0.55);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
z-index: 300;
display: none;
place-items: center;
padding: 28px;
animation: dc-fade .2s ease;
}
.dc-qp-scrim.is-open { display: grid; }
.dc-qp {
width: 1140px;
max-width: calc(100vw - 32px);
min-height: 700px;
max-height: 90vh;
background: var(--lm-bg);
border: 1px solid var(--lm-border);
border-radius: 14px;
display: flex; flex-direction: column;
overflow: hidden;
box-shadow: 0 30px 80px -10px rgba(15,23,42,0.45);
animation: dc-pop-in .18s ease;
position: relative;
}
.dc-qp.is-vip { border: 1px solid var(--lm-gold); }
.dc-qp.is-elite { border: 2px solid var(--lm-elite-bg); }
.dc-qp-grid {
display: grid;
grid-template-columns: 320px minmax(0, 1fr) 320px;
flex: 1;
min-height: 0;
}
@media (max-width: 1180px) {
.dc-qp { width: 980px; }
.dc-qp-grid { grid-template-columns: 280px minmax(0, 1fr) 280px; }
}
@media (max-width: 980px) {
.dc-qp { width: 100%; height: 100%; max-height: 100vh; border-radius: 0; border: 0; }
.dc-qp-grid { grid-template-columns: 1fr; overflow-y: auto; }
}
.dc-qp-photo-col {
background: var(--lm-surface-2);
border-right: 1px solid var(--lm-border-2);
position: relative;
display: flex; align-items: stretch;
overflow: hidden;
}
.dc-qp-photo {
position: relative;
width: 100%;
background: var(--lm-surface);
background-size: cover;
background-position: center center;
}
/* R20H: corner actions wrapper — flex container that pins to top-right of
.dc-qp-photo and lays bookmark + tier badge in a row with a fixed gap.
The bookmark always sits to the LEFT of the tier badge (PRO/VIP/Elite
regardless of width). Mobile re-anchors each child via !important. */
.dc-qp-corner-actions {
position: absolute;
top: 14px;
right: 14px;
display: inline-flex;
align-items: center;
gap: 8px;
z-index: 10;
}
.dc-qp-corner-actions .dc-qp-tier-corner,
.dc-qp-corner-actions .dc-qp-bookmark {
position: static;
top: auto;
right: auto;
left: auto;
}
.dc-qp-photo-arrow {
position: absolute; top: 50%;
transform: translateY(-50%);
display: inline-grid; place-items: center;
width: 36px; height: 36px;
background: rgba(0,0,0,0.45);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,0.20);
border-radius: 50%;
color: #ffffff;
cursor: pointer;
box-shadow: 0 2px 8px rgba(15,23,42,0.20);
z-index: 4;
transition: background .12s;
}
.dc-qp-photo-arrow:hover { background: rgba(0,0,0,0.65); }
.dc-qp-photo-prev { left: 12px; }
.dc-qp-photo-next { right: 12px; }
/* Hide arrows when only one photo (JS sets data-lm-multi-photo on #lm-qp) */
.dc-qp[data-lm-multi-photo="0"] .dc-qp-photo-arrow { display: none; }
/* Dot indicators (rebuilt by JS each open).
Pill-shaped background so dots stay visible over any photo. */
.dc-qp-photo-dots {
position: absolute;
bottom: 14px;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
background: rgba(0, 0, 0, 0.45);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border-radius: 999px;
z-index: 5;
pointer-events: none;
}
.dc-qp-photo-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.55);
transition: background .15s, transform .15s;
}
.dc-qp-photo-dot.is-active {
background: #fff;
transform: scale(1.35);
}
.dc-qp-photo .dc-card-tr {
top: 14px; right: 14px;
}
.dc-qp-about-col {
padding: 22px 24px;
overflow-y: auto;
min-width: 0;
border-right: 1px solid var(--lm-border-2);
display: flex; flex-direction: column;
}
/* Identity — 3 distinct lines (name+price | flag·location·role | langs) */
.dc-qp-namerow {
display: flex; justify-content: space-between; align-items: center;
gap: 12px;
margin-bottom: 6px;
}
.dc-qp-name {
display: inline-flex; align-items: center; gap: 6px;
margin: 0;
font-size: 22px; font-weight: 700;
letter-spacing: -0.015em;
color: var(--lm-text);
min-width: 0;
}
/* Verified check reuses the .lm-verified wrapper from the Profile hero
(see profile.tpl:208-212) — same SVG, same green, same 6px gap from name. */
.dc-qp-name .lm-verified { flex-shrink: 0; }
.dc-qp-namerow-left {
display: inline-flex; align-items: center; gap: 8px;
min-width: 0;
}
.dc-qp-namerow-right {
display: inline-flex; align-items: center; gap: 10px;
flex-shrink: 0;
}
.dc-qp-loc {
display: inline-flex; align-items: center; gap: 6px;
font-size: 13px; color: var(--lm-muted);
margin-bottom: 8px;
flex-wrap: wrap;
}
.dc-qp-loc .dc-flag { margin-left: 0; margin-right: 2px; }
.dc-qp-loc-bullet {
color: var(--lm-muted);
margin: 0 8px;
font-size: 14px;
line-height: 1;
}
.dc-qp-price { text-align: right; white-space: nowrap; flex-shrink: 0; }
.dc-qp-price strong {
font-family: var(--lm-font-mono);
font-size: 22px; font-weight: 700;
color: var(--lm-primary-text);
letter-spacing: -0.02em;
margin: 0 4px;
}
.dc-qp-price-from {
font-family: var(--lm-font-mono);
font-size: 11px; color: var(--lm-muted);
font-weight: 500;
}
.dc-qp-langs { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 16px; }
.dc-qp-langs .dc-lang-pill { font-size: 11px; padding: 3px 7px; }
.dc-qp-section { margin-bottom: 16px; }
.dc-qp-section h4 {
margin: 0 0 8px;
font-family: var(--lm-font-mono);
font-size: 10.5px; font-weight: 700;
letter-spacing: 0.08em; text-transform: uppercase;
color: var(--lm-muted);
}
/* About Me grows; Services pinned to bottom of the column. */
.dc-qp-about { flex: 1 1 auto; }
.dc-qp-services { margin-top: auto; margin-bottom: 0; }
.dc-qp-bio { margin: 6px 0 0; font-size: 13px; line-height: 1.55; color: var(--lm-text); }
/* ── Service row — shared layout (cards + Quick Profile + full Profile) ──
Layout per item:
┌─────────────────────────────────────┬────────────┐
│ Service name (bold, 13px) │ €Price │
│ EVENT SERVICE / DIGITAL CONTENT │ [Action] │
└─────────────────────────────────────┴────────────┘
Event-type rows always come BEFORE digital rows (sorted in JS / PHP).
Max 5 rows displayed in the QP modal. */
.lm-service-row .lm-service-info {
display: flex; flex-direction: column; gap: 2px;
min-width: 0; flex: 1;
}
.lm-service-row .lm-service-name {
font-size: 13px; font-weight: 600; color: var(--lm-text);
line-height: 1.3;
}
.lm-service-row .lm-service-type {
display: inline-flex; align-self: flex-start; align-items: center;
padding: 1px 6px;
font-family: var(--lm-font-mono);
font-size: 9px; font-weight: 700;
letter-spacing: 0.06em; text-transform: uppercase;
border-radius: 3px;
}
/* Phase A — unified with .lm-service-kind on profile.tpl. Event = green,
Digital = amber/gold. Same hex in light and dark across:
profile.tpl, _lm_user_card.tpl (Featured), _lm_quick_profile_modal.tpl. */
.lm-service-row .lm-service-type-event,
.lm-service-row .dc-qp-svc-tag:not(.is-content) {
background: var(--lm-primary-soft);
color: var(--lm-primary-text);
border: 1px solid var(--lm-primary-soft-2);
}
.lm-service-row .lm-service-type-digital,
.lm-service-row .dc-qp-svc-tag.is-content {
background: #fff8eb;
color: #92400e;
border: 1px solid #fde9c4;
}
/* v2.2m — Other service-type pill: neutral grey (matches user intent —
not green, since Event already owns the green palette). */
.lm-service-row .lm-service-type-other,
.lm-service-row .dc-qp-svc-tag.is-other {
background: var(--lm-surface, #f8fafc);
color: var(--lm-muted, #64748b);
border: 1px solid var(--lm-border, #e2e8f0);
}
html[data-lm-theme="dark"] .lm-service-row .lm-service-type-event,
html[data-lm-theme="dark"] .lm-service-row .dc-qp-svc-tag:not(.is-content) {
background: rgba(46,161,111,.15);
color: #5fcc94;
border-color: rgba(46,161,111,.40);
}
html[data-lm-theme="dark"] .lm-service-row .lm-service-type-digital,
html[data-lm-theme="dark"] .lm-service-row .dc-qp-svc-tag.is-content {
background: rgba(245,158,11,.14);
color: #fbbf24;
border-color: rgba(245,158,11,.40);
}
.dc-qp-svc-list {
display: flex; flex-direction: column;
border: 1px solid var(--lm-border-2);
border-radius: 10px;
overflow: hidden;
}
/* R20F: 2-row grid so long titles (e.g. "Brand Ambassador — Long-term")
get the full row width and never wrap. Row 2 holds tag + price + button.
.dc-qp-svc-info / .dc-qp-svc-right wrappers use display:contents so their
children participate directly in the row's grid. Mobile rules in
lm-discover-mobile.css (3-row grid with !important) override this. */
.dc-qp-svc-row {
display: grid;
grid-template-columns: auto 1fr auto;
grid-template-areas:
"name name name"
"tag price btn";
align-items: center;
/* Phase A — tighten row gap so title + tag read as one unit. */
gap: 2px 12px;
padding: 12px 14px;
border-bottom: 1px solid var(--lm-border-2);
background: var(--lm-surface);
}
.dc-qp-svc-row:last-child { border-bottom: 0; }
.dc-qp-svc-info { display: contents; }
.dc-qp-svc-tag {
grid-area: tag;
display: inline-flex; align-self: center; justify-self: start; align-items: center;
padding: 2px 7px;
font-family: var(--lm-font-mono);
font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
border-radius: 3px;
}
.dc-qp-svc-tag:not(.is-content) { background: var(--lm-primary-soft); color: var(--lm-primary-text); border: 1px solid var(--lm-primary-soft-2); }
.dc-qp-svc-tag.is-content { background: #fff8eb; color: #92400e; border: 1px solid #fde9c4; }
html[data-lm-theme="dark"] .dc-qp-svc-tag:not(.is-content) { background: rgba(46,161,111,.15); color: #5fcc94; border-color: rgba(46,161,111,.40); }
html[data-lm-theme="dark"] .dc-qp-svc-tag.is-content { background: rgba(245,158,11,.14); color: #fbbf24; border-color: rgba(245,158,11,.40); }
.dc-qp-svc-name {
grid-area: name;
font-size: 13px; font-weight: 600;
color: var(--lm-text);
line-height: 1.3;
min-width: 0;
}
.dc-qp-svc-right { display: contents; }
.dc-qp-svc-price {
grid-area: price;
justify-self: end;
/* v2.2m — sans-serif (was mono). Tabular numbers for alignment. */
font-family: inherit;
font-size: 13px; font-weight: 700;
color: var(--lm-text);
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.dc-qp-svc-unit {
margin-left: 1px;
font-weight: 500;
font-size: 0.92em;
color: var(--lm-muted, #64748b);
}
.dc-qp-svc-btn {
grid-area: btn;
padding: 7px 12px !important;
font-size: 12px !important;
white-space: nowrap;
}
.dc-qp-svc-more {
display: block;
padding: 10px 14px;
font-size: 12px;
font-weight: 600;
color: var(--lm-primary-text);
background: var(--lm-surface);
border-top: 1px solid var(--lm-border-2);
text-align: center;
text-decoration: none;
}
.dc-qp-svc-more:hover { text-decoration: underline; }
/* Tier-specific link color: gold for VIP, navy/black for Elite. */
.dc-qp.is-vip .dc-qp-svc-more { color: #6e4a04; }
.dc-qp.is-elite .dc-qp-svc-more { color: #0f172a; }
/* Dark-mode overrides — the dark amber and navy above are invisible against
the dark surface bg. Use lighter, theme-appropriate accents that read on
--lm-surface. */
html.lm-dark .dc-qp-svc-more,
html[data-lm-theme="dark"] .dc-qp-svc-more {
background: var(--lm-surface-2);
border-top-color: var(--lm-border);
color: var(--lm-primary-text);
}
html.lm-dark .dc-qp.is-vip .dc-qp-svc-more,
html[data-lm-theme="dark"] .dc-qp.is-vip .dc-qp-svc-more {
color: #fde68a;
}
html.lm-dark .dc-qp.is-elite .dc-qp-svc-more,
html[data-lm-theme="dark"] .dc-qp.is-elite .dc-qp-svc-more {
color: #f5deb3;
}
.dc-qp-char-col {
padding: 22px 22px 16px;
background: var(--lm-surface);
display: flex; flex-direction: column;
overflow-y: auto;
min-width: 0;
}
/* Phase A — Quick Profile dark scrollbars (was rendering as default white
light-mode scrollbars on the dark modal). Targets all 3 scrollable cols
in both desktop split layout and mobile single-col fallback. */
.dc-qp-about-col,
.dc-qp-char-col,
.dc-qp-photo-col,
.dc-qp-grid {
scrollbar-width: thin; /* Firefox */
scrollbar-color: var(--lm-border, #cbd5e1) transparent;
}
html[data-lm-theme="dark"] .dc-qp-about-col,
html[data-lm-theme="dark"] .dc-qp-char-col,
html[data-lm-theme="dark"] .dc-qp-photo-col,
html[data-lm-theme="dark"] .dc-qp-grid {
scrollbar-color: #2a3038 transparent;
}
.dc-qp-about-col::-webkit-scrollbar,
.dc-qp-char-col::-webkit-scrollbar,
.dc-qp-photo-col::-webkit-scrollbar,
.dc-qp-grid::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.dc-qp-about-col::-webkit-scrollbar-track,
.dc-qp-char-col::-webkit-scrollbar-track,
.dc-qp-photo-col::-webkit-scrollbar-track,
.dc-qp-grid::-webkit-scrollbar-track {
background: transparent;
}
.dc-qp-about-col::-webkit-scrollbar-thumb,
.dc-qp-char-col::-webkit-scrollbar-thumb,
.dc-qp-photo-col::-webkit-scrollbar-thumb,
.dc-qp-grid::-webkit-scrollbar-thumb {
background: var(--lm-border, #cbd5e1);
border-radius: 8px;
}
.dc-qp-about-col::-webkit-scrollbar-thumb:hover,
.dc-qp-char-col::-webkit-scrollbar-thumb:hover,
.dc-qp-photo-col::-webkit-scrollbar-thumb:hover,
.dc-qp-grid::-webkit-scrollbar-thumb:hover {
background: var(--lm-muted-2, #94a3b8);
}
html[data-lm-theme="dark"] .dc-qp-about-col::-webkit-scrollbar-thumb,
html[data-lm-theme="dark"] .dc-qp-char-col::-webkit-scrollbar-thumb,
html[data-lm-theme="dark"] .dc-qp-photo-col::-webkit-scrollbar-thumb,
html[data-lm-theme="dark"] .dc-qp-grid::-webkit-scrollbar-thumb {
background: #2a3038;
}
html[data-lm-theme="dark"] .dc-qp-about-col::-webkit-scrollbar-thumb:hover,
html[data-lm-theme="dark"] .dc-qp-char-col::-webkit-scrollbar-thumb:hover,
html[data-lm-theme="dark"] .dc-qp-photo-col::-webkit-scrollbar-thumb:hover,
html[data-lm-theme="dark"] .dc-qp-grid::-webkit-scrollbar-thumb:hover {
background: #3d4452;
}
.dc-qp-stats {
display: grid;
grid-template-columns: 1fr 1.3fr; /* col 2 wider so "WOULD BOOK AGAIN" fits one line */
column-gap: 12px;
row-gap: 10px;
padding: 12px 14px;
background: var(--lm-surface-2);
border: 1px solid var(--lm-border-2);
border-radius: 10px;
margin-bottom: 12px;
}
.dc-qp-stat span { white-space: nowrap; }
.dc-qp-stat strong {
display: block;
font-family: var(--lm-font-mono);
font-size: 17px; font-weight: 700;
color: var(--lm-text);
}
.dc-qp-stat span {
font-size: 10.5px; color: var(--lm-muted);
font-family: var(--lm-font-mono);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.dc-qp-socials-block {
display: flex; flex-wrap: wrap; align-items: center;
gap: 8px 10px;
padding: 10px 12px;
background: var(--lm-surface-2);
border: 1px solid var(--lm-border-2);
border-radius: 10px;
font-size: 11.5px;
margin-bottom: 14px;
}
.dc-qp-foot {
display: flex; align-items: center; justify-content: space-between;
gap: 10px;
padding: 14px 22px;
border-top: 1px solid var(--lm-border-2);
background: var(--lm-surface);
flex-shrink: 0;
}
/* Close: compact fixed width (not tiny — ~1.5× of the earlier size). */
.dc-qp-foot .dc-qp-close-btn {
flex: 0 0 auto !important;
width: auto; min-width: 165px; max-width: 200px;
}
/* Right group: square bookmark + a smaller View-full-profile button. */
.dc-qp-foot-actions {
display: flex; align-items: center; gap: 8px;
flex: 0 0 auto;
}
.dc-qp-foot-actions .dc-qp-view-btn {
flex: 0 0 auto !important;
min-width: 200px; max-width: 260px;
}
/* Square Save bookmark — IDENTICAL to the People-card CTA bookmark
(38×38, border-radius 7px, border, bg). */
.dc-qp-foot-bookmark {
flex: 0 0 auto;
width: 38px !important; height: 38px !important;
border-radius: 7px !important;
background: var(--lm-bg) !important;
border: 1px solid var(--lm-border) !important;
box-shadow: none !important;
place-items: center;
padding: 0 !important;
}
.dc-qp-foot-bookmark svg { width: 16px; height: 16px; }
.dc-qp-foot-bookmark:hover { background: #fff !important; color: var(--lm-primary-text) !important; }
.dc-qp-foot-bookmark.is-saved {
color: var(--lm-primary-text) !important;
background: var(--lm-primary-soft) !important;
border-color: var(--lm-primary-soft-2) !important;
}
.dc-qp-close {
position: absolute; top: 16px; right: 16px;
display: inline-grid; place-items: center;
width: 36px; height: 36px;
background: rgba(255,255,255,0.92);
border: 1px solid var(--lm-border);
border-radius: 50%;
color: var(--lm-text);
cursor: pointer;
z-index: 10;
}
.dc-qp-close:hover { background: #fff; }
.dc-qp-char-title {
margin: 0 0 8px;
font-family: var(--lm-font-mono);
font-size: 10px; font-weight: 700;
letter-spacing: 0.08em; text-transform: uppercase;
color: var(--lm-muted);
padding-bottom: 6px;
border-bottom: 1px solid var(--lm-border-2);
white-space: nowrap;
}
/* Personal Characteristics + Measurements rows — label LEFT, value RIGHT,
side-by-side on a single baseline with a thin divider beneath each row. */
.dc-qp-char-list {
display: flex; flex-direction: column;
padding: 2px 12px;
background: var(--lm-surface-2);
border: 1px solid var(--lm-border-2);
border-radius: 8px;
}
.dc-qp-char-row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 12px;
padding: 4px 0;
margin: 0;
border-bottom: 1px solid var(--lm-border-2);
min-width: 0;
}
.dc-qp-char-row:last-child { border-bottom: 0; }
.dc-qp-char-row .k {
font-size: 12.5px;
color: var(--lm-muted);
flex-shrink: 0;
}
.dc-qp-char-row .v {
font-size: 13px; font-weight: 500;
color: var(--lm-text);
text-align: right;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
/* Phase H R13: Languages row contains a pill row — needs to wrap, not
ellipsis-clip. Selector targets the wrapper specifically so other
character rows keep their truncation behaviour. */
.dc-qp-char-row .v .lm-lang-pill-row {
white-space: normal;
justify-content: flex-end;
overflow: visible;
}
.dc-qp-char-row .v:has(> .lm-lang-pill-row) {
white-space: normal;
overflow: visible;
}
/* Measurements — same row pattern, two columns side-by-side. */
.dc-qp-meas-grid {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 16px;
padding: 2px 12px;
background: var(--lm-surface-2);
border: 1px solid var(--lm-border-2);
border-radius: 8px;
}
.dc-qp-meas-row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 8px;
padding: 4px 0;
margin: 0;
border-bottom: 1px solid var(--lm-border-2);
min-width: 0;
}
/* 2-col grid: drop the bottom border on the last full row (last two cells). */
.dc-qp-meas-row:nth-last-child(-n+2) { border-bottom: 0; }
.dc-qp-meas-row .k {
font-size: 12.5px;
color: var(--lm-muted);
flex-shrink: 0;
}
.dc-qp-meas-row .v {
font-size: 13px; font-weight: 500;
color: var(--lm-text);
text-align: right;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
html.lm-dark .dc-qp { background: var(--lm-surface); }
html.lm-dark .dc-qp-char-col,
html.lm-dark .dc-qp-foot { background: var(--lm-surface-2); }
html.lm-dark .dc-qp-stats,
html.lm-dark .dc-qp-socials-block,
html.lm-dark .dc-qp-char-list,
html.lm-dark .dc-qp-meas-grid { background: var(--lm-surface); border-color: var(--lm-border); }
/* ───────────────────────────────────────────────────────────
More Filters slide-over drawer (right-anchored, full-height).
Independent from .dc-modal* — that's used for the centered popups.
─────────────────────────────────────────────────────────── */
.lm-mf-scrim {
position: fixed; inset: 0;
background: rgba(15,23,42,0.45);
z-index: 220;
display: none;
animation: dc-fade .18s ease;
}
.lm-mf-scrim.is-open { display: block; }
.lm-mf-drawer {
position: absolute;
top: 0; right: 0; bottom: 0;
width: 440px; max-width: calc(100vw - 32px);
background: var(--lm-bg);
border-left: 1px solid var(--lm-border);
box-shadow: -16px 0 40px -12px rgba(15,23,42,0.30);
display: flex; flex-direction: column;
font-family: var(--lm-font, var(--lm-font-sans, "Inter", system-ui, -apple-system, sans-serif));
color: var(--lm-text);
animation: lm-mf-slide-in .22s ease;
}
@keyframes lm-mf-slide-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
.lm-mf-head {
display: flex; align-items: flex-start; justify-content: space-between;
padding: 18px 20px 14px;
border-bottom: 1px solid var(--lm-border-2);
gap: 12px;
flex-shrink: 0;
}
.lm-mf-title {
margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -0.01em;
color: var(--lm-text);
}
.lm-mf-result-count {
margin: 4px 0 0;
font-size: 12.5px;
color: var(--lm-muted);
}
.lm-mf-result-count strong { color: var(--lm-text); font-weight: 600; }
.lm-mf-close {
display: inline-grid; place-items: center;
width: 32px; height: 32px;
background: transparent; border: 0; border-radius: 6px;
color: var(--lm-muted); cursor: pointer; flex-shrink: 0;
}
.lm-mf-close:hover { background: var(--lm-surface); color: var(--lm-text); }
.lm-mf-body { flex: 1; overflow-y: auto; }
/* Section header — normalized panel-wide labels: 11px / weight 500 /
letter-spacing 0.14em / muted gray. Same style as .lm-mf-sub-label
below, so headers and sub-labels read with one consistent rhythm. */
.lm-mf-section { border-bottom: 0.5px solid var(--lm-border-2); }
/* Quick filters mini-block — single-row toggles, no header. Sits between
Brands Premium and Talent characteristics. The trailing 0.5px divider
gives clear separation from the next section. */
.lm-mf-quick-block {
padding: 18px;
border-bottom: 0.5px solid var(--lm-border-2);
}
.lm-mf-section-header {
display: flex; align-items: center;
width: 100%;
padding: 16px 18px;
background: transparent; border: 0;
cursor: pointer;
font-family: inherit;
font-size: 11px; font-weight: 500;
letter-spacing: 0.14em; text-transform: uppercase;
color: var(--lm-muted);
text-align: left;
}
.lm-mf-section-header:hover { background: var(--lm-surface-2); }
.lm-mf-section-title { flex: 1; min-width: 0; }
.lm-mf-active-count {
margin-right: 8px;
background: var(--lm-primary);
color: #fff;
border-radius: 10px;
padding: 2px 7px;
font-family: var(--lm-font);
font-size: 10px; font-weight: 700;
letter-spacing: 0;
}
.lm-mf-chevron { transition: transform .15s ease; color: var(--lm-muted); flex-shrink: 0; }
.lm-mf-section-header.is-expanded .lm-mf-chevron { transform: rotate(180deg); }
.lm-mf-section-body { display: none; padding: 0 18px 24px; }
.lm-mf-section-body.is-expanded { display: block; }
/* Field block within a section. Spacing rule: 24px between fields,
12px between a field's sub-label and its controls. */
.lm-mf-field { margin-top: 24px; }
.lm-mf-field:first-child { margin-top: 4px; }
/* Sub-label = the small caps label above each filter group. Same
typographic rhythm as section headers — only the color/letter-spacing
stay identical so the panel scans as one consistent system. */
.lm-mf-sub-label,
.lm-mf-field-label {
font-family: inherit;
font-size: 11px; font-weight: 500;
letter-spacing: 0.14em; text-transform: uppercase;
color: var(--lm-muted);
margin: 0 0 12px;
}
/* Legacy pill group — still used by any leftover .lm-filter-pill markup,
but the panel now uses the variant classes below for new fields. */
.lm-mf-pill-group { display: flex; flex-wrap: wrap; gap: 6px; }
.lm-mf-pill-group.is-short {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
}
.lm-mf-pill-group.is-short .lm-filter-pill { justify-content: center; }
/* ───────────────────────────────────────────────────────────
Filter UI variants — applied per-field based on the data shape.
Group 1: text tokens with · separator → .lm-filter-token
Group 2: 2-col checkbox grid → .lm-filter-checkbox
Group 3: borderless pills → .lm-filter-pill-borderless
All three keep the .dc-chip-toggle hook so existing JS toggles + writes
to the hidden CSV input feeding discoverApplyFilters().
─────────────────────────────────────────────────────────── */
/* Group 1 — short-code tokens (Languages: EN · ES · DE …). Plain text
with no capsule. Active state = darker text + thin underline. */
.lm-filter-token-row {
display: block;
line-height: 2;
font-size: 14px;
color: var(--lm-muted);
}
.lm-filter-token {
display: inline;
padding: 0 0 1px;
margin: 0;
background: transparent !important;
border: 0; border-bottom: 1.5px solid transparent;
border-radius: 0;
box-shadow: none;
font: inherit;
font-weight: 400;
color: var(--lm-muted);
cursor: pointer;
-webkit-appearance: none;
appearance: none;
transition: color .12s, border-color .12s, font-weight .12s;
}
.lm-filter-token:hover {
color: var(--lm-text);
font-weight: 500;
border-bottom-color: var(--lm-text);
background: transparent;
outline: none;
}
.lm-filter-token:focus { outline: none; }
.lm-filter-token:focus-visible {
outline: 2px solid var(--lm-primary);
outline-offset: 2px;
}
.lm-filter-token.is-on {
color: var(--lm-text);
font-weight: 500;
border-bottom-color: var(--lm-text);
}
.lm-filter-token-sep {
color: var(--lm-muted-2);
margin: 0 10px;
user-select: none;
}
/* Forces the next token onto a new line. Inserted every 6 tokens. */
.lm-filter-token-break { display: block; height: 0; }
/* Instant CSS tooltip for language tokens. Replaces the title attribute
(which has a ~500ms native delay). Each token carries data-tooltip
with the full language name; the ::after pseudo-element renders it
as a small dark pill above the code on hover/focus. */
.lm-filter-token[data-tooltip] {
position: relative;
display: inline-block;
}
.lm-filter-token[data-tooltip]::after {
content: attr(data-tooltip);
position: absolute;
left: 50%;
bottom: calc(100% + 6px);
transform: translateX(-50%);
padding: 4px 8px;
background: var(--lm-elite-bg, #0f172a);
color: #fff;
font-size: 11px;
font-weight: 500;
font-family: inherit;
letter-spacing: 0;
text-transform: none;
border-radius: 4px;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 80ms ease;
z-index: 10;
}
.lm-filter-token[data-tooltip]:hover::after,
.lm-filter-token[data-tooltip]:focus-visible::after { opacity: 1; }
/* Phase A — instant dark tooltip on Quick Profile measurement values.
The .v itself has overflow:hidden for ellipsis, so we anchor the
::after on the ROW (.dc-qp-meas-row / .dc-qp-char-row) and trigger it
when hovering the value span. Tooltip text comes from data-tooltip on
the row (mirrored from the inner .v in JS). */
.dc-qp-meas-row,
.dc-qp-char-row {
position: relative;
}
.dc-qp-meas-row .v[data-tooltip],
.dc-qp-char-row .v[data-tooltip] {
cursor: help;
}
.dc-qp-meas-row .v[data-tooltip]:hover ~ .lm-tt-bubble,
.dc-qp-char-row .v[data-tooltip]:hover ~ .lm-tt-bubble {
opacity: 1;
}
/* The bubble — sibling of .v, absolutely positioned within the row,
no overflow constraint so it can extend above the row freely. */
.lm-tt-bubble {
position: absolute;
right: 0;
bottom: calc(100% + 4px);
padding: 5px 9px;
background: var(--lm-elite-bg, #0f172a);
color: #fff;
font-size: 12px;
font-weight: 500;
letter-spacing: 0;
text-transform: none;
border-radius: 5px;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 80ms ease;
z-index: 30;
box-shadow: 0 4px 12px rgba(0,0,0,.35);
}
/* Phase A — Quick Profile empty state for "no services published yet". */
.dc-qp-svc-empty {
padding: 16px 14px;
font-size: 13px;
color: var(--lm-muted, #6b7280);
font-style: italic;
text-align: center;
border: 1px dashed var(--lm-border, #e2e8f0);
border-radius: 8px;
}
html[data-lm-theme="dark"] .dc-qp-svc-empty { border-color: var(--lm-border, #2a3038); color: var(--lm-muted, #8b949e); }
/* Phase A — Discover card "no services" empty state (slim). */
.dc-card-feat-empty {
padding: 8px 0;
font-size: 12px;
color: var(--lm-muted, #6b7280);
font-style: italic;
}
html[data-lm-theme="dark"] .dc-card-feat-empty { color: var(--lm-muted, #8b949e); }
/* Group 2 — 2-col checkbox grid (Ethnicity, Hair color, Industries,
Travel zones). Full row clickable; checkmark fills on select. */
.lm-filter-checkbox-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px 16px;
}
/* The