/* ============================================================ ADS — Ghost Grid architecture All zones are dimensionally allocated but invisible at launch. When monetisation activates, add class 'ads-enabled' to and load ad provider script after GDPR consent. Zero Cumulative Layout Shift guaranteed. ============================================================ */ /* ── Base ad zone ────────────────────────────────────────── */ .ad-zone { /* Visually absent AND dimensionally collapsed until ads enabled */ contain: strict; opacity: 0; pointer-events: none; visibility: hidden; background: transparent; overflow: hidden; flex-shrink: 0; height: 0; /* Transition prevents flash when ads load */ transition: opacity 0.3s ease; } /* ── Zone sizes (IAB standard) ──────────────────────────── */ .ad-zone--banner { width: 100%; max-width: 728px; margin: 0 auto; display: block; } .ad-zone--sidebar-rect { width: 300px; height: 250px; max-width: 100%; } .ad-zone--mobile-inline { width: 100%; height: 100px; max-width: 320px; margin: 0 auto; display: none; /* shown only on mobile */ } .ad-zone--sticky-footer { width: 100%; height: 50px; max-width: 320px; margin: 0 auto; display: none; /* shown only on mobile */ } /* ── Mobile-only zones ──────────────────────────────────── */ @media (max-width: 768px) { .ad-zone--mobile-inline { display: block; } .ad-zone--sticky-footer { display: block; position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 50; } } /* ── Activated state (future — requires GDPR consent) ──── */ .ads-enabled .ad-zone { opacity: 1; pointer-events: auto; visibility: visible; } .ads-enabled .ad-zone--banner { height: 90px; } .ads-enabled .ad-zone--sidebar-rect { height: 250px; } /* When active, show placeholder background for devs to see zones */ .ads-enabled .ad-zone { background: var(--c-ad-placeholder); border: 1px dashed var(--c-border); border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; font-size: var(--text-xs); color: var(--c-text-muted); font-style: italic; } /* ── Banner wrapper (above main content, below header) ──── */ .banner-wrap { width: 100%; padding: 0 var(--sp-6); max-width: 1100px; margin: 0 auto; /* Height always allocated to prevent layout shift */ min-height: 0; transition: min-height 0.3s ease; } .ads-enabled .banner-wrap { min-height: 90px; padding-top: var(--sp-3); } @media (max-width: 768px) { .banner-wrap { display: none; } /* banner not shown mobile — use sticky footer */ }