/* ═══ studio-lb — the "8 סגנונות צילום" / "איך זה עובד?" popups ═══════════════ SHARED. Loaded by every page that shows a studio popup (pricing/v3 + the homepage #how studio step) via studio-lb.php. Moved here from pricing/v3/style.css section H on 2026-07-26 so the markup, the labels and the styling live in ONE place — the pricing page's own comment warned its hand-copied version drifts silently. Self-contained port of the app's .dk-consent-lb shell (dkapp.css:606-674) plus the .dkst-what-lb / .dkps-styles-lb modifiers (:8336-8486). The shell markup is built by studio-lb.js — same structure, same classes, one prefix (.pv3-lb) instead of .lightbox so nothing collides with style3.css. Tokens are declared on .pv3-lb itself, not inherited from .pv3: the popup mounts on on pages that have no .pv3 wrapper. Values match pricing/v3/style.css:21-33. ───────────────────────────────────────────────────────────────────────────── */ .pv3-lb{ --pv3-purple:#646CD2; --pv3-purple-20:#646CD220; --pv3-ink:#202630; --pv3-muted:#6F727F; /* Legal disclosures must not be the quietest thing on the page — darker than muted. */ --pv3-legal-ink:#676b7e; --pv3-radius:13px; --pv3-shadow:0 20px 36px #2B2F6433; } .pv3-lb{position:fixed;inset:0;z-index:9999;background:#20263099;display:flex; align-items:center;justify-content:center;opacity:0;transition:opacity .2s ease} .pv3-lb.is-open{opacity:1} .pv3-lb-frame{position:relative;display:flex;flex-direction:column;background:#fff; border-radius:var(--pv3-radius);width:auto;height:auto;max-width:580px; max-height:calc(100dvh - 24px);margin:12px auto;overflow:hidden;box-shadow:var(--pv3-shadow); /* zoom in on open / out on close — .dkps-in in the app (dkapp.css:8416) */ opacity:0;transform:scale(.88);transform-origin:center;transition:opacity .2s ease,transform .2s ease} .pv3-lb.is-open .pv3-lb-frame{opacity:1;transform:none} .pv3-lb-content{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch; padding:46px 22px 18px;text-align:right} /* both buttons on ONE row at every width (dkapp.css:8426) */ .pv3-lb-controls{flex:0 0 auto;display:flex;flex-direction:row;justify-content:center; align-items:stretch;gap:12px;padding:14px 18px;border-top:1px solid #2B2F6417;background:#fff} .pv3-lb-controls .btn a{height:100%;box-sizing:border-box} /* visible ✕ — the app's 38px disc (dkapp.css:625) */ .pv3-lb-close{position:absolute;top:8px;left:8px;width:38px;height:38px;z-index:3} .pv3-lb-close a{display:block;position:relative;width:38px;height:38px;border-radius:100px; background:#ffffffE6;box-shadow:0 2px 8px #2B2F6433} .pv3-lb-close a::before,.pv3-lb-close a::after{content:'';position:absolute;top:18px; inset-inline-start:11px;width:16px;height:2px;background:#202630;border-radius:2px} .pv3-lb-close a::before{transform:rotate(45deg)} .pv3-lb-close a::after{transform:rotate(-45deg)} .pv3-lb .dk-lb-title{font-size:1.15em;font-weight:700;line-height:1.3;color:var(--pv3-ink);margin:0 0 10px} .pv3-lb .pv3-lb-content p{font-size:.9em;line-height:1.55;color:var(--pv3-ink);margin:0 0 8px} .pv3-lb .pv3-lb-content p.dk-lb-muted{color:var(--pv3-muted);font-size:.82em} /* MANDATORY AI disclosure, wherever the popup renders it. Legible and boxed — it must never be the quietest thing beside the image it qualifies. The extra specificity beats the shell's own `p` rule when the before/after pair is reused inside the popup. */ .pv3-lb .pv3-lb-content p.dk-ba-note,.pv3-lb .pv3-lb-content p.pv3-ai-note{ font-size:.78em;line-height:1.45em;color:var(--pv3-legal-ink); text-align:center;margin:12px 0 0;background:#fff;border-radius:var(--pv3-radius); padding:9px 10px} /* "איך זה עובד?" — dkStudioWhatLb (dkapp.css:8348). pricing/v3 only; the homepage step IS the explainer, so it wires openStyles alone. */ .pv3-lb .dkst-what-bullets{margin:6px 0 0;padding:0;list-style:none;font-size:.9em;line-height:1.55} /* list-style on the LI too: on pricing the popup lives inside .entry-content, whose global li rule paints a disc that would sit beside the ✓ (style3.css). */ .pv3-lb .dkst-what-bullets li{position:relative;padding-inline-start:24px;margin-bottom:2px;list-style:none} .pv3-lb .dkst-what-bullets li::before{content:"✓";position:absolute;inset-inline-start:0; color:var(--pv3-purple);font-weight:900} .pv3-lb .dkst-ast{color:#EF6E54;font-weight:700} /* the consent scope is the one thing a buyer must not miss — legal ink, legal size. */ .pv3-lb p.dkst-what-note{margin:8px 0 12px;font-size:.78em;line-height:1.45em;color:var(--pv3-legal-ink)} .pv3-lb .dkst-what-chip{margin:14px 0 6px;font-size:.85em;font-weight:700;color:var(--pv3-ink)} .pv3-lb.dkst-what-lb .dk-lb-ba{max-width:420px} /* the 8 templates as a supporting STRIP, not a hero (dkapp.css:8366) */ .pv3-lb .dkst-what-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:5px; max-width:520px;margin-inline:auto} .pv3-lb .dkst-tile{cursor:pointer;display:block;padding:0;border:0;background:none} .pv3-lb .dkst-tile img{display:block;width:100%;aspect-ratio:2/3;object-fit:cover; object-position:center top;border-radius:7px;box-shadow:0 3px 9px #2B2F642E} /* the strip's own disclosure. Legible, but NOT a second white card: the pair's boxed note sits a few lines above and two stacked panels would push the CTA under the fold on a phone. */ .pv3-lb .pv3-lb-content p.pv3-ai-note.is-plain{max-width:520px;margin:8px auto 0;background:none; box-shadow:none;padding:0} .pv3-lb .pv3-lb-content p.pv3-ai-note{margin-left:auto;margin-right:auto} /* "8 סגנונות צילום" — dkStudioStylesLb (dkapp.css:8440). Read-only: nothing is selectable here, the style is picked after purchase. */ .pv3-lb .opt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:14px} .pv3-lb .opt-tile{position:relative;background:#fff;border-radius:var(--pv3-radius); box-shadow:0 3px 10px #2B2F6433;padding:0;overflow:hidden;text-align:center;cursor:default} .pv3-lb .ma-tile-img{aspect-ratio:2/3;background:#f0f1f7 center top/cover no-repeat} .pv3-lb .opt-tile .ol{display:block;padding:8px 8px 10px;font-weight:700;font-size:14px; color:var(--pv3-ink);min-height:2.6em;box-sizing:border-box;line-height:1.25} .pv3-lb .dkps-styles-grid,.pv3-lb .dkps-subs-grid{margin-top:12px} .pv3-lb .dkps-styles-grid + .pv3-ai-note,.pv3-lb .dkps-subs-grid + .pv3-ai-note{max-width:660px;margin-inline:auto} .pv3-lb .dkps-styles-grid .opt-tile{cursor:pointer} /* the whole style card drills in */ /* The magnifier — the app's disc button (dkapp.css:8478), at the top LEFT of the card (in this RTL context inset-inline-end resolves to the left). White icon masked onto purple. */ .pv3-lb .ma-tile-img{position:relative} .pv3-lb .dk-sub-zoom{position:absolute;top:8px;inset-inline-end:8px;z-index:3; width:30px;height:30px;padding:0;border:0;border-radius:50%;cursor:pointer; background:var(--pv3-purple);box-shadow:0 3px 10px #2B2F6440} .pv3-lb .dk-sub-zoom::after{content:'';position:absolute;inset:0;background:#fff; -webkit-mask:url(images/icons-magnify.svg) no-repeat center/16px; mask:url(images/icons-magnify.svg) no-repeat center/16px} .pv3-lb .dk-sub-zoom:hover{background:var(--pv3-ink)} /* Detail view: the chosen style shrunk to the start of the line (the RIGHT, in RTL), with חזרה beside it. The thumb is the SAME card — photo + its own name label — only smaller, so the label shrinks with it (dkapp.css:8486). */ .pv3-lb .dk-lb-h{font-size:.95em;font-weight:700;color:var(--pv3-ink);margin:14px 0 4px} .pv3-lb .dkps-detail-head{display:flex;align-items:center;gap:14px;margin:12px 0 4px} .pv3-lb .dkps-detail-thumb{width:67px;flex:0 0 auto;cursor:pointer} /* clicking it = חזרה */ .pv3-lb .dkps-detail-thumb .ol{font-size:10px;padding:4px 4px 6px;min-height:0;line-height:1.2} /* side by side: חזרה first, so in RTL לסגנון הבא lands to its left */ .pv3-lb .dkps-detail-links{display:flex;align-items:center;gap:40px} .pv3-lb .dkps-back{color:var(--pv3-purple);font-weight:700;text-decoration:underline} .pv3-lb .dkps-next{color:var(--pv3-purple);font-weight:400;text-decoration:underline} @media (min-width:769px){ /* the gallery is a gallery — the photos are the product, so it takes the room it can (dkapp.css:8412). The cards are HEIGHT-driven: --dkps-img is what is left of the box after its chrome, split between the two rows, and the column width is 2/3 of it so the 2:3 ratio holds. The second term is the WIDTH ceiling for the same card. */ .pv3-lb.dkps-styles-lb .pv3-lb-frame{width:92%;max-width:940px;height:94dvh;max-height:94dvh;margin:0} .pv3-lb .dkps-styles-grid{ --dkps-img:min(calc((94dvh - 350px)/2),calc((min(92vw,940px) - 92px)*3/8)); grid-template-columns:repeat(4,calc(var(--dkps-img)*2/3));justify-content:center} .pv3-lb .dkps-styles-grid .ma-tile-img{height:var(--dkps-img)} /* the 6 variations stay WIDTH-driven — one row always fits, so there is nothing to solve */ .pv3-lb .dkps-subs-grid{grid-template-columns:repeat(3,1fr)} } @media (min-width:1100px){ .pv3-lb .dkps-subs-grid{grid-template-columns:repeat(6,1fr)} } @media only screen and (max-width:768px){ /* full-bleed-ish sheet, and the two popups share one phone box (dkapp.css:8402) */ .pv3-lb .pv3-lb-frame{width:95%;max-width:95%;height:90dvh;max-height:90dvh;margin:0} .pv3-lb .pv3-lb-content{padding:46px 16px 16px} /* 4×2, width-capped, or the strip becomes a hero again (dkapp.css:8380) */ .pv3-lb .dkst-what-grid{grid-template-columns:repeat(4,1fr);gap:6px;max-width:300px} .pv3-lb.dkst-what-lb .dk-lb-ba{max-width:none} .pv3-lb .dkps-styles-grid{grid-template-columns:repeat(2,1fr)} }