/** * Ad boxes. * * The two reserve heights come from the settings and are written inline on each * box as --ifc-ad-m and --ifc-ad-d, because they are the one value that has to * be right before any CSS or script has loaded - that is the whole point of * reserving the space. They differ per side of the breakpoint because the two * sides show different Adsterra units at different fixed heights. */ /* * Nothing until the reader has agreed. * * The gate that matters is in ads.js, which requests nothing from Adsterra * without consent; this is the cosmetic half of it. A reader who declines would * otherwise get a labelled gap wherever an ad would have been, which is worse * than not reserving the space at all. The class is put on by an inline * script in the head, so a reader who consented on an earlier visit never sees * the boxes appear. */ .ifc-ad { display: none; } html.ifc-ads-ok .ifc-ad, .ifc-ad--preview { display: block; margin: 2.5rem auto; max-width: 100%; overflow: hidden; text-align: center; } .ifc-ad__label { color: #6b7783; display: block; font-size: 0.6875rem; letter-spacing: 0.08em; margin-bottom: 0.35rem; text-transform: uppercase; } /* Held open before the ad arrives, at the height that side will actually be. */ .ifc-ad__unit { min-height: var(--ifc-ad-m, 0px); } /* Must match IfCalc_Ads_Render::BREAKPOINT and BREAKPOINT in ads.js. */ @media (min-width: 768px) { .ifc-ad__unit { min-height: var(--ifc-ad-d, 0px); } } /* * Every banner runs in a frame of its own so that two of them on a page cannot * overwrite each other's settings. Adsterra banners are a fixed size, so the * frame is given that size and centred rather than stretched. */ .ifc-ad__frame { border: 0; display: block; margin: 0 auto; max-width: 100%; } /* Full-bleed sections put the ad on a tinted ground; keep it on white. */ .ifc-ad--header, .ifc-ad--footer { margin: 1.5rem auto; } /* Preview mode: what an administrator sees where an ad would be. */ .ifc-ad__preview { align-items: center; background: repeating-linear-gradient(135deg, #f6f7f7, #f6f7f7 10px, #eef0f1 10px, #eef0f1 20px); border: 1px dashed #b9bfc5; border-radius: 6px; color: #50575e; display: flex; flex-direction: column; font-size: 0.8125rem; gap: 0.25rem; justify-content: center; min-height: inherit; padding: 1rem; } .ifc-ad__preview span { color: #7c848b; font-size: 0.75rem; } @media print { .ifc-ad { display: none; } }