:root{ --juicy-accent:#e62a88; --juicy-accent-2:#c0196c; --juicy-bg:#ffffff; --juicy-text:#111; --juicy-muted:#6b7280; } .juicy-nn-gallery-wrap{ width:100%; max-width:1080px; margin:14px auto 26px auto; padding:0 12px; } .juicy-nn-gallery-head{ display:flex; flex-direction:column; gap:2px; margin:6px 0 12px 0; } .juicy-nn-gallery-title{ font-size:20px; font-weight:800; color:var(--juicy-text); letter-spacing:-0.02em; } .juicy-gallery-access-chip{ margin-top:4px; display:inline-flex; align-items:center; padding:6px 10px; border-radius:999px; font-size:12px; font-weight:600; background:rgba(26,127,55,0.10); color:#1a7f37; border:1px solid rgba(26,127,55,0.18); width:max-content; } .juicy-nn-gallery-sub{ font-size:14px; color:var(--juicy-muted); } .juicy-nn-gallery-grid{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; } @media (min-width: 768px){ .juicy-nn-gallery-grid{ grid-template-columns:repeat(4, minmax(0, 1fr)); gap:12px; } } .juicy-nn-gal-card{ background:var(--juicy-bg); border:1px solid rgba(0,0,0,0.08); border-radius:16px; overflow:hidden; box-shadow:0 10px 22px rgba(0,0,0,0.08); cursor:pointer; text-align:left; padding:0; } .juicy-nn-gal-imgwrap{ position:relative; width:100%; aspect-ratio: 1 / 1; overflow:hidden; background:#f3f4f6; } .juicy-nn-gal-img{ width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.01); transition:transform .18s ease, filter .18s ease; } /* 🔒 Global blur rule aligned with NN Map: unlock adds class on */ body:not(.juicy-has-access) .juicy-nn-gal-img, body:not(.juicy-has-access) .juicy-nn-gal-pop-img{ /* Slightly stronger blur (still readable thumbnails) */ filter: blur(6px) brightness(0.95) saturate(0.96); } body.juicy-has-access .juicy-nn-gal-img, body.juicy-has-access .juicy-nn-gal-pop-img{ filter:none; transform:none; } .juicy-nn-gal-overlay{ position:absolute; inset:auto 10px 10px 10px; display:flex; align-items:flex-end; justify-content:space-between; gap:8px; pointer-events:none; } .juicy-nn-gal-pill{ background:rgba(17,17,17,0.72); color:#fff; font-size:12px; font-weight:700; padding:7px 10px; border-radius:999px; line-height:1; } .juicy-nn-gal-pill.is-locked{ background:rgba(232,42,136,0.88); } .juicy-nn-gal-meta{ padding:10px 12px 12px 12px; } .juicy-nn-gal-country{ font-size:13px; font-weight:800; color:#111; margin:0; } .juicy-nn-gal-city{ font-size:13px; color:var(--juicy-muted); margin:2px 0 0 0; } /* Footer */ .juicy-nn-gallery-foot{ display:flex; flex-direction:column; align-items:center; gap:10px; margin-top:14px; } .juicy-nn-gallery-more{ border:0; border-radius:14px; padding:12px 16px; cursor:pointer; font-size:15px; font-weight:800; color:#fff; width:min(340px, 92%); background:linear-gradient(180deg, var(--juicy-accent) 0%, var(--juicy-accent-2) 100%); } .juicy-nn-gallery-more:disabled{ opacity:.6; cursor:not-allowed; } .juicy-nn-gallery-status{ font-size:13px; color:var(--juicy-muted); } /* Modal popup */ .juicy-nn-gal-modal{ position:fixed; inset:0; z-index:999999; display:none; opacity:0; transition: opacity .16s ease; } .juicy-nn-gal-modal.is-open{display:block; opacity:1;} .juicy-nn-gal-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,0.55); opacity:0; transition: opacity .16s ease; } .juicy-nn-gal-modal.is-open .juicy-nn-gal-backdrop{ opacity:1; } .juicy-nn-gal-panel{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(.98); width:min(520px, calc(100% - 22px)); max-height:calc(100% - 22px); background:#fff; border-radius:18px; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,0.35); opacity:0; transition: transform .16s ease, opacity .16s ease; } .juicy-nn-gal-modal.is-open .juicy-nn-gal-panel{ opacity:1; transform:translate(-50%,-50%) scale(1); } .juicy-nn-gal-close{ position:absolute; right:10px; top:10px; width:40px; height:40px; border-radius:999px; border:0; background:rgba(255,255,255,0.92); color:#111; cursor:pointer; font-size:22px; line-height:40px; z-index:2; box-shadow:0 10px 22px rgba(0,0,0,0.18); } .juicy-nn-gal-close:hover{ background:#fff; } .juicy-nn-gal-body{ display:flex; flex-direction:column; } /* Scroll container so tall images aren't cropped */ .juicy-nn-gal-imgscroll{ width:100%; max-height:62vh; overflow:auto; background:#f3f4f6; } .juicy-nn-gal-pop-img{ width:100%; height:auto; object-fit:contain; display:block; background:#f3f4f6; } @media (prefers-reduced-motion: reduce){ .juicy-nn-gal-modal, .juicy-nn-gal-backdrop, .juicy-nn-gal-panel{ transition:none !important; } } .juicy-nn-gal-pop-meta{ padding:12px 14px 14px 14px; } .juicy-nn-gal-pop-title{ font-size:16px; font-weight:900; color:#111; margin:0; } .juicy-nn-gal-pop-sub{ font-size:13px; color:var(--juicy-muted); margin-top:3px; } .juicy-nn-gal-pop-msg{ margin-top:10px; font-size:13px; color:#111; } .juicy-nn-gal-pop-actions{ display:flex; gap:10px; margin-top:12px; } .juicy-nn-gal-btn{ border:0; border-radius:14px; padding:12px 14px; cursor:pointer; font-size:15px; font-weight:900; flex:1; } .juicy-nn-gal-btn.primary{ color:#fff; background:linear-gradient(180deg, var(--juicy-accent) 0%, var(--juicy-accent-2) 100%); } .juicy-nn-gal-btn.ghost{ background:#fff; color:var(--juicy-accent-2); border:2px solid var(--juicy-accent); } .juicy-nn-gal-name{ font-size:13px; font-weight:800; color:var(--juicy-text); margin:0 0 2px 0; } .juicy-nn-gal-pop-name{ margin:6px 0 0 0; font-size:14px; font-weight:800; color:var(--juicy-text); }