Extra
/* =========================================================
NABET700 — DEPARTMENTS MODAL SYSTEM
Dark card + blur/dim background (CSS-only)
========================================================= */
/* =========================================================
1) MODAL CARD STYLES (YOUR CARD)
========================================================= */
.n700-dept-modal{
position: fixed;
left: 50%;
top: 52%;
transform: translate(-50%,-50%);
width: min(920px, 92vw);
background: #202020;
color: #ffffff;
border-radius: 0;
border: 1px solid rgba(255,255,255,.08);
box-shadow: 0 35px 100px rgba(0,0,0,.65);
z-index: 99999;
display: none;
transition: transform .25s ease, opacity .25s ease;
}
.n700-dept-modal-inner{
padding: 42px 48px 36px;
}
.n700-dept-modal-title{
font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
font-size: clamp(28px, 2.6vw, 40px);
font-weight: 700;
letter-spacing: .02em;
text-transform: uppercase;
margin: 0 0 22px;
color: #f1f1f1; /* title lighter */
}
.n700-dept-modal-body{
font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
font-size: 18px;
line-height: 1.7;
font-weight: 400;
color: rgba(255,255,255,.86);
}
.n700-dept-modal-close{
position: absolute;
top: 22px;
right: 22px;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 0;
border: 1px solid rgba(255,255,255,.35);
background: transparent;
color: #f1f1f1;
font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
font-size: 26px;
font-weight: 400;
cursor: pointer;
transition: all .2s ease;
}
.n700-dept-modal-close:hover{
background: #ffffff;
color: #000000;
border-color: #ffffff;
}
@media (max-width: 768px){
.n700-dept-modal-inner{ padding: 28px 22px; }
.n700-dept-modal-body{ font-size: 16px; }
}
/* =========================================================
2) BACKGROUND OVERLAY + BLUR (THE FIX)
Works by:
- adding a dark overlay with body::before
- blurring/dimming the site wrapper
========================================================= */
/* --- A) Detect when the modal is open ---
We use :has() (modern browsers) + a few fallbacks.
If your modal uses a class like .is-open when visible,
this will work perfectly too. */
/* When the modal is visible, add overlay */
body:has(.n700-dept-modal[style*="display: block"]),
body:has(.n700-dept-modal.is-open),
html:has(.n700-dept-modal[style*="display: block"]) body,
html:has(.n700-dept-modal.is-open) body{
overflow: hidden; /* prevents scrolling behind modal */
}
/* The overlay itself */
body:has(.n700-dept-modal[style*="display: block"])::before,
body:has(.n700-dept-modal.is-open)::before,
html:has(.n700-dept-modal[style*="display: block"]) body::before,
html:has(.n700-dept-modal.is-open) body::before{
content: "";
position: fixed;
inset: 0;
background: rgba(0,0,0,.72); /* darkness */
z-index: 99998; /* behind modal, above page */
}
/* Blur/dim the page behind */
body:has(.n700-dept-modal[style*="display: block"]) #siteWrapper,
body:has(.n700-dept-modal.is-open) #siteWrapper,
html:has(.n700-dept-modal[style*="display: block"]) body #siteWrapper,
html:has(.n700-dept-modal.is-open) body #siteWrapper{
filter: blur(6px) brightness(.55);
transition: filter .2s ease;
}
/* Some templates use #page or main instead of #siteWrapper */
body:has(.n700-dept-modal[style*="display: block"]) #page,
body:has(.n700-dept-modal.is-open) #page,
body:has(.n700-dept-modal[style*="display: block"]) main,
body:has(.n700-dept-modal.is-open) main{
filter: blur(6px) brightness(.55);
transition: filter .2s ease;
}
/* =========================================================
3) OPTIONAL: If Squarespace uses its own modal classes
(this helps if :has() fails in a specific browser)
========================================================= */
/* Common Squarespace “modal open” body/html classes */
body.sqs-modal-lightbox-open::before,
body.sqs-site-overlay-open::before,
body.sqs-lightbox-open::before{
content: "";
position: fixed;
inset: 0;
background: rgba(0,0,0,.72);
z-index: 99998;
}
body.sqs-modal-lightbox-open #siteWrapper,
body.sqs-site-overlay-open #siteWrapper,
body.sqs-lightbox-open #siteWrapper{
filter: blur(6px) brightness(.55);
transition: filter .2s ease;
}
