elements are positioned via fixed margin-left + width — we reset both to stack vertically. - #pinnedTopRight holds the desktop side-nav; we hide it and reveal it via a CSS-only hamburger (#nav-toggle checkbox + label). ──────────────────────────────────────────────────────────────────────── */ /* The hamburger label and checkbox are injected into by walker.py. They sit hidden on desktop and only become visible inside the @media block below. The :checked state pairs with body:has(...) to show the nav. */ #nav-toggle, #nav-toggle-btn { display: none; } @media (max-width: 980px) { /* ── 1. Kill the centred desktop column ─────────────────────────────── */ :root { --site-width: 100% !important; } body:not(.device-mobile-optimized) .PFkO7r, body:not(.device-mobile-optimized) .vlM3HR { margin-left: 0 !important; width: 100% !important; } /* The page-section content wrappers are absolute-positioned inside their parent and were sized to 980px. Make them fill instead. */ .HT5ybB, [class*="Container"][class*="SPY_vo"] { width: 100% !important; max-width: 100% !important; left: 0 !important; overflow-x: clip; } /* Wix lays out per-page sections as a single-column grid with each component stamped to grid-area: 1/1/2/2 (same cell, stacked via absolute positioning). Unlock the grid into flex-flow rows so each component gets its own row instead of layering. */ main [data-mesh-id*="inlineContent"], main [data-mesh-id*="gridContainer"] { display: flex !important; flex-direction: column !important; gap: 12px !important; grid-template-columns: 1fr !important; grid-template-rows: auto !important; height: auto !important; min-height: 0 !important; } main [data-mesh-id*="inlineContent"] > *, main [data-mesh-id*="gridContainer"] > * { grid-area: auto !important; grid-row: auto !important; grid-column: auto !important; } /* ── 2. Stack columns: reset per-component margin-left + width ─────── Every Wix richtext / image / button component is wrapped in a div carrying `comp-` as a class and (usually) an id of the same form. Inline-flatten them on mobile. The `:not(#_)` is a specificity hack — it matches everything but bumps the selector specificity to beat Wix's per-component `#comp-XYZ { width: 520px }` rules. Without it, `!important` alone loses to higher-specificity ID selectors. */ main [id^="comp-"]:not([id$="-pinned-layer"]):not(#_), main [class*="MMl86N"]:not(#_), main [class*="MazNVa"]:not(#_) { position: relative !important; left: auto !important; right: auto !important; top: auto !important; margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; grid-area: auto !important; grid-row: auto !important; grid-column: auto !important; } /* Add breathing room between stacked items */ main [id^="comp-"]:not([id$="-pinned-layer"]) { margin-top: 12px !important; margin-bottom: 12px !important; } /* Images: render at natural size, capped at container width. Stops small logos (Amsterdam 198px wide, 21-19 132px wide) being scaled up to 311px wide and blurry. Wix's .MW5IWV / .Tj01hh / .BI8PVQ force width:100% on desktop — we undo that and centre instead. */ main img, main [class*="MW5IWV"], main [class*="Tj01hh"], main [class*="BI8PVQ"] { width: auto !important; max-width: 100% !important; height: auto !important; margin: 0 auto !important; display: block !important; } /* Video: drive height off width + aspect-ratio. Wix's Playable wrapper chain (.VideoPlayer*__playerContainer / *__root / .T7h78h / .IiHgII) all set height:100%, which cascades to zero when our mobile reset removes the great-grandparent's fixed pixel height. preload="none" means the video has no intrinsic size to fall back on, so it collapses to 0×0. aspect-ratio gives it a stable height anchor. */ main video[src] { width: 100% !important; height: auto !important; aspect-ratio: 16 / 9; max-height: 70vh; display: block !important; } main [class*="VideoPlayer"][class*="__playerContainer"], main [class*="VideoPlayer"][class*="__root"], main [class*="T7h78h"], main [class*="IiHgII"] { height: auto !important; min-height: 0 !important; position: relative !important; /* break the absolute chain */ overflow: visible !important; /* .T7h78h has overflow:hidden — clips the video to its 0px height */ } /* The IiHgII layer sets inset:0 to fill its absolute-positioned parent. On mobile we're laying out in normal flow, so unset those offsets. */ main [class*="IiHgII"] { position: relative !important; top: auto !important; bottom: auto !important; left: auto !important; right: auto !important; } /* Edge padding around the page so text doesn't kiss the screen. overflow-x:hidden clips any straggler element that resists the width reset above. */ #PAGES_CONTAINER, [data-mesh-id$="inlineContent"] { padding-left: 16px !important; padding-right: 16px !important; box-sizing: border-box !important; overflow-x: clip !important; } /* Cap *everything* inside main at 100% of its parent and allow flex children to shrink (Wix nests flex containers whose anonymous child divs are stamped with fixed pixel widths — they'd otherwise overflow the viewport even when the form component itself is 100%-wide). */ main *:not(#_) { max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } /* Inputs explicitly width:100% so they fill the form column. */ main form, main form input, main form textarea, main form select, main form button { width: 100% !important; } /* Footer copyright lives at #pinnedBottomRight, which is a child of #masterPage (a single-cell grid where every pinned-* element overlays the page on desktop). On mobile we flip masterPage to block so children flow in DOM order — header, main, pinnedBottomRight, footer — and unpin the copyright wrapper so it lands at the natural bottom of the content. */ #masterPage { display: block !important; grid-template-columns: none !important; grid-template-rows: none !important; height: auto !important; } #pinnedBottomRight, #pinnedBottomRight .big2ZD, #pinnedBottomRight [id$="-pinned-layer"] { position: static !important; display: block !important; height: auto !important; width: 100% !important; margin: 0 !important; } #pinnedBottomRight { padding: 24px 16px !important; text-align: center !important; } #comp-k6666o4d { position: static !important; justify-self: center !important; align-self: auto !important; margin: 0 auto !important; text-align: center !important; width: 100% !important; } /* ── 3. Logo top-left, smaller — pin the *logo specifically*, not its grouping wrapper. On the homepage Wix nested an accent bubble inside the same `pagePinnedTopLeft-*` container; pinning the whole wrapper would drag the bubble into the top-left too. */ [id^="pagePinnedTopLeft-"] { position: static !important; width: auto !important; height: auto !important; margin: 0 !important; } [id$="-pinned-layer"]:has(img[alt*="Logo"]) { position: fixed !important; top: 12px !important; left: 12px !important; width: 64px !important; height: 64px !important; z-index: 99997 !important; margin: 0 !important; } [id$="-pinned-layer"]:has(img[alt*="Logo"]) img { width: 64px !important; height: 64px !important; object-fit: contain !important; } /* ── 4b. Homepage red bubbles ────────────────────────────────────────── The four "Neoliberalism / climate / workers / corporations" stat bubbles each sit inside their own fixed-position `*-pinned-layer` wrapper. On desktop they're scattered across the canvas; on mobile we want them in a centred vertical cluster (close to the desktop feel, just stacked). Un-pin the wrappers so they flow, then size each bubble to a consistent disc that fits phones. */ /* Two `:not(#_)` traps bump specificity to (2,2,0)=220, which beats both Wix's per-component #comp-XYZ rules (100) and my universal `main *:not(#_)` max-width:100% rule (101). */ [id^="comp-k666z"][id$="-pinned-layer"]:not(#_):not(#__) { position: relative !important; display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; height: auto !important; margin: 0 !important; pointer-events: auto !important; } [id^="comp-k666z"]:not([id$="-pinned-layer"]):not(#_):not(#__) { width: 280px !important; max-width: 80vw !important; height: 280px !important; max-height: 80vw !important; margin: -8px auto !important; /* slight overlap, cluster feel */ position: relative !important; top: 0 !important; left: 0 !important; display: block !important; } /* Bubble image fills its component (override the natural-size rule I set earlier for partner logos, since here we DO want fill). */ [id^="comp-k666z"]:not(#_):not(#__) img { width: 100% !important; height: 100% !important; object-fit: contain !important; } /* The first bubble's pinned-layer parent chain is narrower than the page (Wix sized it for a small accent bubble on desktop). Force a centred 280px box, with top clearance for the pinned logo. */ [id^="comp-k666z"]:first-of-type, #comp-k666zrfd-pinned-layer:not(#_):not(#__) { width: 280px !important; max-width: 280px !important; margin: 88px auto 0 !important; } /* ── 5. Hide desktop side-nav, replace with hamburger ───────────────── */ #pinnedTopRight { display: none !important; } /* Hamburger button — top right */ #nav-toggle-btn { display: flex !important; align-items: center; justify-content: center; position: fixed; top: 12px; right: 12px; width: 44px; height: 44px; background: rgba(0, 0, 0, 0.7); color: #fff; border-radius: 6px; cursor: pointer; z-index: 99999; font: 26px/1 system-ui, sans-serif; user-select: none; -webkit-tap-highlight-color: transparent; } #nav-toggle-btn::before { content: "☰"; } #nav-toggle:checked + #nav-toggle-btn::before { content: "✕"; font-size: 22px; } /* When the checkbox is on, reveal the nav as a full-screen overlay. */ body:has(#nav-toggle:checked) #pinnedTopRight { display: flex !important; align-items: center; justify-content: center; position: fixed !important; inset: 0 !important; margin: 0 !important; padding: 60px 20px !important; background: rgba(0, 0, 0, 0.95) !important; z-index: 99998 !important; overflow: auto; } body:has(#nav-toggle:checked) #pinnedTopRight .big2ZD { position: static !important; display: block !important; width: 100% !important; max-width: 320px !important; height: auto !important; } body:has(#nav-toggle:checked) #pinnedTopRight nav, body:has(#nav-toggle:checked) #pinnedTopRight [id^="comp-k620kwgt"] { position: static !important; width: 100% !important; margin: 0 !important; } body:has(#nav-toggle:checked) #pinnedTopRight ul, body:has(#nav-toggle:checked) #pinnedTopRight li { display: block !important; width: 100% !important; } body:has(#nav-toggle:checked) #pinnedTopRight a { font-size: 20px !important; padding: 14px !important; } }