/* ============================================================ Optivro ISPU — Islamophobia Definition Footer Verbatim from the source `.tk-defblock` kit, scoped under `.oiw-defblock`. Identical block on every page. The diamond mark is CSS-drawn (no SVG). ============================================================ */ .oiw-defblock { background: var(--navy); color: #fff; margin-top: 0; } /* Full-bleed: the source is a full-width navy band, but inside an Elementor BOXED container the widget is capped at the container width. This stretches it edge-to-edge. FRONTEND ONLY — gated on html.oiw-anim, which the plugin adds synchronously only on the real frontend (never in the Elementor editor/preview, per is_elementor_edit()). This is critical: the negative-margin bleed creates horizontal overflow, and in the editor that overflow breaks Elementor's own section hover/select bounding-box (the section becomes un-hoverable and the one above gets selected). With this gate the editor renders the footer fully in-flow at container width — hover/select works normally there — and the bleed applies only where there is no editor to fight (the frontend). `body:not(.elementor-editor-active)` was NOT a reliable editor gate (that class is not dependably on the preview iframe body), which is why the bleed leaked into the editor before. html.oiw-anim is plugin-controlled and exact. For a fully overflow-free full-bleed (no scrollbar edge case at all), place the widget in a FULL-WIDTH Elementor container and turn the switcher off — that is how the page-assembly JSON positions it. */ html.oiw-anim .oiw-defblock.oiw-defblock--bleed { /* Scrollbar-safe stretch: add half the scrollbar width (set on as --oiw-sbw by core.js) so the band spans the CLIENT width, not 100vw. This is why it no longer forces a horizontal scroll even when the page's overflow-x:hidden is only on body (verified on ispu.org: 0px overflow at 900px and 1440px). Falls back to the plain stretch if the var is unset. */ margin-left: calc(50% - 50vw + var(--oiw-sbw, 0px) / 2); margin-right: calc(50% - 50vw + var(--oiw-sbw, 0px) / 2); } .oiw-defblock .tk-defblock-inner { max-width: 1080px; margin: 0 auto; padding: 64px 32px; display: grid; grid-template-columns: auto 1fr; gap: 34px; align-items: start; } .oiw-defblock .tk-defblock-mark { width: 52px; height: 52px; flex-shrink: 0; background: var(--gold); transform: rotate(45deg); border-radius: 8px; position: relative; } .oiw-defblock .tk-defblock-mark::after { content: ''; position: absolute; inset: 13px; border: 2px solid var(--navy); border-radius: 3px; } .oiw-defblock .tk-defblock-eyebrow { display: flex; align-items: center; gap: 10px; font-family: Lato, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; } .oiw-defblock .tk-defblock-eyebrow span { width: 26px; height: 1px; background: var(--gold); } .oiw-defblock h3 { font-family: "OrpheusPro Regular", 'orpheus pro', orpheus, Georgia, serif; font-size: 26px; font-weight: 600; line-height: 1.35; margin: 0 0 14px; color: #fff; } .oiw-defblock h3 em { font-style: italic; color: var(--gold); font-weight: 400; } .oiw-defblock p { /* Body copy — stays on the prior fallback (Orpheus name intentionally NOT led here); only headings/titles use "OrpheusPro Regular". */ font-family: 'orpheus pro', orpheus, Georgia, serif; font-size: 18px; line-height: 1.6; color: rgba(255, 255, 255, .9); margin: 0; max-width: 760px; } .oiw-defblock .tk-defblock-src { font-family: Lato, sans-serif; font-size: 12.5px; letter-spacing: .5px; color: rgba(255, 255, 255, .55); margin-top: 18px; font-style: normal; } @media (max-width: 640px) { .oiw-defblock .tk-defblock-inner { grid-template-columns: 1fr; gap: 20px; padding: 48px 24px; } .oiw-defblock .tk-defblock-mark { width: 42px; height: 42px; } .oiw-defblock h3 { font-size: 22px; } .oiw-defblock p { font-size: 16px; } }