/* lm-qr-sameday.css — the "QR Same-Day Pay" badge (_lm_qr_sameday_badge.tpl) * and its self-contained tooltip. * * Loaded anywhere a casting card or the casting detail page renders. Kept in its * own file rather than folded into lm-castings-directory.css because the card is * reused on /page and /profile, and the detail page loads a different stylesheet * entirely — one file, one gate, no duplication. * * Colours use only tokens that exist in lm-profile.css (:root + the * html[data-lm-theme="dark"] block, both loaded globally), so dark mode mostly * takes care of itself. The gold bolt has no token, hence --qrsd-bolt. */ .lm-qrsd { --qrsd-bolt: #c6a15b; position: relative; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex: 0 0 20px; margin-left: 6px; vertical-align: middle; color: var(--lm-primary, #0f6f4f); cursor: help; /* the badge is focusable (tap target on touch, keyboard reachable) */ border-radius: 4px; outline-offset: 2px; } .lm-qrsd svg { width: 100%; height: 100%; display: block; } /* ── Tooltip (no-JS fallback) ──────────────────────────────────────── Deliberately NOT the shared .lm-tip: that lives in lm-castings-directory.css and never loads on the casting detail page. Also .lm-tip is white-space:nowrap, which would run this two-clause sentence off the screen. This bubble is absolutely positioned, so ANY clipping ancestor cuts it — .lm-cd-dir-card has overflow:hidden for its rounded cover, and on the brand page's Casting Calls tab it sliced the bubble in half. lm-qr-sameday.js therefore renders a -level position:fixed copy instead and sets html.lm-qrsd-fly, which switches everything below off. Kept for no-JS. */ .lm-qrsd::after { content: attr(data-qrsd-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px); width: max-content; /* Wide enough that the longest sentence ("… this casting pays on the day of the event.", ~60 chars at 12px ≈ 370px of text) lands on two lines, not three. */ max-width: 290px; /* pre-line, not normal: the modal tooltip carries a REAL newline in its attribute (an entity would be double-escaped, exactly like the apostrophe was). Newlines are honoured, everything else still wraps. */ white-space: pre-line; text-align: left; background: #0f172a; color: #fff; /* NOT inherit: the card's price span is monospace, and the bubble inherited it. */ font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 12px; font-weight: 500; line-height: 1.4; letter-spacing: .01em; text-transform: none; padding: 8px 11px; border-radius: 8px; box-shadow: 0 8px 20px -6px rgba(15, 23, 42, .4); opacity: 0; pointer-events: none; transition: opacity .12s ease, transform .12s ease; z-index: 200; } /* :focus (not just :focus-visible) so a TAP on touch devices reveals it — there is no hover on a phone, and this is the surface talents scan on. */ .lm-qrsd:hover::after, .lm-qrsd:focus::after { opacity: 1; transform: translateX(-50%) translateY(0); } /* JS took over: suppress the pseudo-element entirely so the two never stack. content:none (not display/opacity) — nothing is generated, nothing to clip. */ html.lm-qrsd-fly .lm-qrsd::after { content: none; } /* The card clips its overflow; without this the tooltip is guillotined. */ .lm-cd-dir-action-money { overflow: visible; } /* ── Dark ──────────────────────────────────────────────────────────── --lm-primary flips on its own. Lift the gold so it doesn't muddy against the dark card, and soften the tooltip surface. */ html[data-lm-theme="dark"] .lm-qrsd { --qrsd-bolt: #e0c07f; } html[data-lm-theme="dark"] .lm-qrsd::after { background: #1f2937; box-shadow: 0 8px 20px -6px rgba(0, 0, 0, .55); } /* Narrow screens: a 240px bubble centred on a badge near the card edge would overflow the viewport. Pin it to the right instead. */ @media (max-width: 480px) { .lm-qrsd::after { left: auto; right: 0; transform: translateX(0) translateY(4px); max-width: min(240px, calc(100vw - 48px)); } .lm-qrsd:hover::after, .lm-qrsd:focus::after { transform: translateX(0) translateY(0); } } /* ── Booking modal ("Check availability") ──────────────────────────── Third item on the Select-service / Your-offer row. The row is align-items:flex-start (labels top-aligned), so centre the badge against the inputs rather than letting it hang off the labels. Informational only. */ .lm-booking-srow-qrsd { flex: 0 0 auto; /* Bottom-align: both neighbouring columns are label-over-control, so matching the CONTROL's bottom edge is what makes the row read as one line. */ align-self: flex-end; display: flex; align-items: center; } .lm-booking-srow-qrsd .lm-qrsd { margin-left: 0; width: 44px; height: 44px; flex-basis: 44px; } /* The badge sits hard against the modal's right edge, so a centred bubble gets guillotined. Anchor its RIGHT edge to the badge and let it grow leftwards. */ .lm-booking-srow-qrsd .lm-qrsd::after { left: auto; right: 0; transform: translateX(0) translateY(4px); /* wide enough that the short sentence lands on two balanced lines */ max-width: 250px; } .lm-booking-srow-qrsd .lm-qrsd:hover::after, .lm-booking-srow-qrsd .lm-qrsd:focus::after { transform: translateX(0) translateY(0); } /* Stacked layout — the badge would otherwise sit alone on its own line. */ @media (max-width: 480px) { .lm-booking-srow-qrsd { align-self: flex-start; } } /* ── Interactive toggle (booking modal) ────────────────────────────── Same glyph, but the brand can press it: OFF is a muted outline, ON is the green tinted pill. Off by default — silence must never read as a promise. */ button.lm-qrsd-toggle { /* Same box as .lm-offer-row / .lm-cdrop-btn on this row: min-height 44px, 1.5px border, 8px radius. It used to be a 30px square next to 44px fields. */ padding: 0; width: 44px; height: 44px; min-height: 44px; flex-basis: 44px; border: 1.5px solid var(--lm-border, #e2e8f0); border-radius: 8px; background: var(--lm-bg, #fff); /* The glyph is ALWAYS the brand mark: green code, gold bolt. Greying it out for the off-state turned the finder squares into mush at 20px — a QR code needs its contrast to read as one. Off vs on is carried by the BOX, not the icon. */ color: var(--lm-primary, #0f6f4f); cursor: pointer; transition: background .14s ease, border-color .14s ease, box-shadow .14s ease; } /* The base rule is `.lm-qrsd svg { width: 100%; height: 100% }`, which beats the element's width="20" attribute — so inside a 44px button the glyph stretched to fill the whole box. Pin it. */ button.lm-qrsd-toggle svg { width: 20px; height: 20px; flex: none; } button.lm-qrsd-toggle:hover { border-color: var(--lm-primary, #0f6f4f); } button.lm-qrsd-toggle.is-on { background: var(--lm-primary-soft, #f3f8f5); border-color: var(--lm-primary, #0f6f4f); box-shadow: inset 0 0 0 1px var(--lm-primary-soft-2, #dcebe2); } button.lm-qrsd-toggle:focus-visible { outline: 2px solid var(--lm-primary, #0f6f4f); outline-offset: 2px; } /* Dark: the box follows the neighbouring inputs; the glyph stays green + gold. --lm-bg is the PAGE behind the modal, so the button read as a hole punched in the row. .lm-offer-row / .lm-input / .lm-cdrop-btn all sit on --lm-surface-2; this is the same shade, so the whole "Your offer" row is one surface. */ html[data-lm-theme="dark"] button.lm-qrsd-toggle { background: var(--lm-surface-2, #1c232c); border-color: var(--lm-border, #2a3038); --qrsd-bolt: #e0c07f; } html[data-lm-theme="dark"] button.lm-qrsd-toggle.is-on { background: rgba(46, 161, 111, .16); border-color: var(--lm-primary, #2ea16f); } /* ── Booking detail: the promise, once made ──────────────────────────── */ .lm-bs-offer-value .lm-qrsd { vertical-align: middle; } /* ── Pill variant: icon + "QR Same-Day Pay" ────────────────────────── Used wherever there is room to say it out loud — the casting detail budget card, the booking hero, the Request-Sent summary. A bare glyph reads as decoration; the words make it a claim. */ .lm-qrsd.lm-qrsd-pill { width: auto; height: auto; flex-basis: auto; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 999px; background: var(--lm-primary-soft, #f3f8f5); border: 1px solid var(--lm-primary-soft-2, #dcebe2); color: var(--lm-primary, #0f6f4f); vertical-align: middle; } .lm-qrsd.lm-qrsd-pill svg { width: 15px; height: 15px; flex: none; } .lm-qrsd-pill-txt { font-size: 11.5px; font-weight: 700; letter-spacing: .01em; line-height: 1; white-space: nowrap; } html[data-lm-theme="dark"] .lm-qrsd.lm-qrsd-pill { background: rgba(46, 161, 111, .16); border-color: rgba(46, 161, 111, .42); color: #57d08a; } /* ── Casting detail: the budget card is a dark gradient in BOTH themes, so the pill needs its own light-on-dark treatment or it disappears (it did). ── */ .lm-cd-kicker-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .lm-cd-budget-card .lm-qrsd.lm-qrsd-pill, html[data-lm-theme="dark"] .lm-cd-budget-card .lm-qrsd.lm-qrsd-pill { background: rgba(255, 255, 255, .10); border-color: rgba(255, 255, 255, .20); color: #7ee0a8; --qrsd-bolt: #e0c07f; } /* ── Booking hero: the promise sits on the "Your offer" LINE, pushed to the right end of the row, not stacked under the amount. It is now a direct flex child of .lm-bs-offer (a .lm-bs-row: display:flex; align-items:flex-start), so margin-left:auto carries it across to the right; align-self holds it on the label's line. flex-wrap on the row lets it drop to its own right-aligned line only when a narrow card runs out of width. For the talent this is why they took the job — it stays the loud pill, just relocated. ── */ .lm-bs-offer { flex-wrap: wrap; } .lm-bs-offer > .lm-bs-offer-qrsd { margin: 0 0 0 auto; align-self: flex-start; flex-shrink: 0; } /* ── Request-Sent summary row: "… — €500/event — [pill]" ── */ .lm-qrsd-sep { color: var(--lm-muted-2, #94a3b8); margin: 0 2px; } .lm-booking-confirm-v .lm-qrsd.lm-qrsd-pill { margin-left: 0; } /* ── Casting card: the badge sits at the card's LEFT edge, so a centred bubble is guillotined by the viewport / card gutter. Anchor its LEFT edge to the badge and let it grow rightwards. Mirrors the booking modal, which has the opposite problem and opens leftwards. ── */ .lm-cd-dir-am-price .lm-qrsd::after, .lm-cd-dir-lead-price .lm-qrsd::after { left: 0; right: auto; transform: translateX(0) translateY(4px); } .lm-cd-dir-am-price .lm-qrsd:hover::after, .lm-cd-dir-am-price .lm-qrsd:focus::after, .lm-cd-dir-lead-price .lm-qrsd:hover::after, .lm-cd-dir-lead-price .lm-qrsd:focus::after { transform: translateX(0) translateY(0); } /* ── Talent's "My Applications" money box ──────────────────────────── .lm-ta-money-price is a mono, nowrap figure. Make it a flex line so the badge sits beside the number instead of pushing it. */ .lm-ta-money-price { display: inline-flex; align-items: center; gap: 6px; } /* ── Portal bubble (lm-qr-sameday.js) ──────────────────────────────── The real tooltip on every JS-enabled surface. Lives at level, position:fixed, so no card's overflow:hidden can reach it; left/top are written by the script, which clamps the box inside the viewport and flips it below the badge when there is no room above. z-index clears Bootstrap's modal (1055) — the booking modal carries a badge too. Deliberately duplicates the ::after skin rather than sharing it: the pseudo-element inherits from .lm-qrsd (mono price font, text-transform), this element inherits from , so the two need different resets. */ .lm-qrsd-flytip { position: fixed; top: 0; left: 0; z-index: 4000; width: max-content; /* border-box, or the 22px of horizontal padding lands OUTSIDE max-width and a 320px screen overflows by exactly that much. Not inherited — this element is a body child and the page reset may not reach it. */ box-sizing: border-box; max-width: min(240px, calc(100vw - 16px)); /* pre-line: the booking-modal tip carries a real newline. */ white-space: pre-line; text-align: left; background: #0f172a; color: #fff; font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 12px; font-weight: 500; line-height: 1.4; letter-spacing: .01em; text-transform: none; padding: 8px 11px; border-radius: 8px; box-shadow: 0 8px 20px -6px rgba(15, 23, 42, .4); opacity: 0; pointer-events: none; transform: translateY(4px); transition: opacity .12s ease, transform .12s ease; } /* Rises into place from below when it sits above the badge, and drops into place from above when it sits below — the motion follows the anchor. */ .lm-qrsd-flytip.is-below { transform: translateY(-4px); } .lm-qrsd-flytip.is-on { opacity: 1; transform: translateY(0); } /* Toggle badge only (booking modal): lm-qr-sameday.js splits the trailing state word (OFF / ON, AUS / AKTIV …) into .lm-qrsd-flytip-state so it can be coloured by state — red = OFF (no promise made yet), green = ON (promise is live) — and bolded either way. The brand then reads the state without reading the sentence, and watches it flip the instant they press. Both reds/greens are picked to carry on the dark bubble (#0f172a light, #1f2937 dark). */ .lm-qrsd-flytip-state { font-weight: 700; } .lm-qrsd-flytip.state-off .lm-qrsd-flytip-state { color: #f87171; } .lm-qrsd-flytip.state-on .lm-qrsd-flytip-state { color: #6ee7b7; } html[data-lm-theme="dark"] .lm-qrsd-flytip { background: #1f2937; box-shadow: 0 8px 20px -6px rgba(0, 0, 0, .55); } @media (prefers-reduced-motion: reduce) { .lm-qrsd-flytip, .lm-qrsd-flytip.is-below { transition: opacity .12s ease; transform: none; } } /* ── Outline variant: the mechanism is available, no promise was made ── Used on in-person bookings where the brand did NOT opt into QR Same-Day Pay. The glyph stays brand green — a greyed QR turns to mush at this size and, more importantly, the capability is real. Only the fill is dropped, so the promise (filled) and the possibility (outline) never read the same. */ .lm-qrsd.lm-qrsd-pill--available { background: transparent; border-color: var(--lm-border, #e2e8f0); } .lm-qrsd-pill--available .lm-qrsd-pill-txt { color: var(--lm-muted, #64748b); font-weight: 600; } html[data-lm-theme="dark"] .lm-qrsd.lm-qrsd-pill--available { background: transparent; border-color: var(--lm-border, #2a3038); } html[data-lm-theme="dark"] .lm-qrsd-pill--available .lm-qrsd-pill-txt { color: var(--lm-muted, #8b949e); }