NABET 700-M UNIFOR 2019-03-11 NABET 700-M UNIFOR 2019-03-11

International Day for the Elimination of Racial Discrimination

Together, we have the power to inspire inclusion and eradicate discrimination in our communities and workplaces!

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; }

International Day for the Elimination of Racial Discrimination

NABET 700-M Unifor