/** * Advertising — zone presentation. * * NEUTRAL NAMING. Every selector in this file is rg-spot*. EasyList's generic * cosmetic rules hide elements whose class or id carries ad/ads/advert/banner/ * sponsor/promo or a size string, on every site, first-party units included — * so a single well-meant `.ad-slot` here would blank the unit for roughly a * third of news readers while the origin counted a delivered impression. * * ----------------------------------------------------------------------------- * THIS FILE KNOWS NO HEIGHTS * ----------------------------------------------------------------------------- * Reserved heights arrive per container as --rg-spot-hm / --rg-spot-hd, written * inline by Ramgavar_Spots_Render::container_html() from the tallest creative * that render actually embedded at each breakpoint. That is deliberate: a * stylesheet carrying its own copy of eight zones' heights would drift from the * registry silently the first time a size changed, and a fixed per-zone height * would reserve the zone's CEILING — 250px on every mobile zone, because the * universal 300x250 is accepted everywhere — rather than the artwork on the * page. The inline min-height also means the box is reserved before this * stylesheet arrives: it is enqueued conditionally, therefore late, therefore * printed in the footer, and a reservation that lands after first paint * reserves nothing. * * ----------------------------------------------------------------------------- * THE BREAKPOINT * ----------------------------------------------------------------------------- * 841px mirrors Ramgavar_Spots_Render::BREAKPOINT_PX, which in turn mirrors * Fox's own desktop switch (`min-width: 841px`), so the spot box changes size * at the same moment the page around it does. CSS cannot read a PHP constant, * so the number genuinely lives in two files; spot.js reads it from the * server-written data-rg-bpx attribute and hardcodes nothing. * * ----------------------------------------------------------------------------- * ONE PALETTE, LIGHT * ----------------------------------------------------------------------------- * There is deliberately no prefers-color-scheme block. The paper renders light * in both editions and does not respond to the reader's system theme, so a dark * rule here would lift the label to a pale grey ON THE PAPER'S OWN IVORY the * moment a reader's OS was set to dark — an unreadable disclosure, which is * worse than no styling at all. */ /* ----------------------------------------------------------------------------- * Container * -------------------------------------------------------------------------- */ .rg-spot { /* No min-height any more: the FRAME reserves the box, from an aspect ratio rather than a pixel height, so the reservation is correct at every width instead of only at the one the numbers were written for. See class-render.php's $style block. */ display: block; box-sizing: border-box; width: 100%; margin: 1.75rem auto; padding: 0; text-align: center; /* Isolate the unit's layout from the article around it: nothing inside a creative can reflow the page body. */ contain: layout style; } /* ----------------------------------------------------------------------------- * The disclosure label * * Small and quiet, but it is a disclosure and not decoration: #595959 on the * paper's ivory clears 4.5:1 comfortably, which is the normal-text threshold, * not the large-text one. Do not lighten it to make the unit tidier. * * No text-transform. The Registry authors both labels in capitals already, and * uppercasing Armenian that is already uppercase risks nothing useful while * uppercasing is exactly the kind of transform that surprises a script it was * not designed for. * -------------------------------------------------------------------------- */ .rg-spot__label { display: block; margin: 0 0 0.4rem; /* --ram-font-body is composed in PHP by ramgavar_compose_font_stacks() with the Armenian face inserted BEFORE the generic. The fallback repeats that shape: Latin first, Armenian appended after it, generic LAST. Appending Armenian after `sans-serif` would make it unreachable — a generic matches every codepoint, so font matching never walks past one. */ font-family: var( --ram-font-body, "Noto Sans", "Noto Sans Armenian", sans-serif ); font-size: 11px; line-height: 1.4; font-weight: 400; letter-spacing: 0.09em; color: #595959; /* The label must stay selectable and readable at any zoom; it is never clipped to make the box neater. */ white-space: normal; } /* ----------------------------------------------------------------------------- * Frame * -------------------------------------------------------------------------- */ .rg-spot__frame { display: flex; align-items: center; justify-content: center; /* * THE FRAME IS THE RESERVATION, and it is fluid. * * `width: min(100%, cap)` fills the column it is given — 1230px at the * masthead, 660px inside an article, 265px in a rail — UP TO THE UNIT'S * NOMINAL WIDTH, past which it would be showing an advertiser's artwork * larger than the size they bought. Narrower columns still shrink it, which * is what keeps a 345px square inside a 265px rail. `aspect-ratio` then derives the height from that width at * layout time, before the image downloads. * * Both values come from class-render.php as inline custom properties, so * this stylesheet knows no sizes and cannot drift from the registry. The * fallbacks are deliberately inert (`auto` reserves nothing) rather than * a guessed shape: a container that lost its inline properties should * collapse honestly, not hold room for a size it is not showing. */ width: min( 100%, var( --rg-spot-mwm, 100% ) ); aspect-ratio: var( --rg-spot-arm, auto ); margin: 0 auto; overflow: hidden; } @media ( min-width: 841px ) { .rg-spot__frame { width: min( 100%, var( --rg-spot-mwd, 100% ) ); aspect-ratio: var( --rg-spot-ard, auto ); } } /* ----------------------------------------------------------------------------- * Creatives * * Every creative is in the markup; exactly one is shown. There are THREE states, * and knowing which one a box is in is the difference between reading this file * as the authority and reading it as the floor. * * 1. NO SCRIPT AT ALL. The lead creative for the current breakpoint is revealed * by these rules alone. That is the progressive-enhancement guarantee, and it * is why a reader with the scripts blocked still sees an advertisement and * the advertiser still gets the placement. * * 2. spot-boot.js HAS RUN — the ordinary case, decided before first paint. It * writes `display` INLINE on every item and sets data-rg-on. Inline styles * beat every rule below, deliberately: this stylesheet is enqueued * conditionally, therefore late, therefore printed in the FOOTER, so at the * moment the boot runs none of these rules exist yet. A class write would * have decided nothing until the stylesheet landed, which is the same * "arrives after first paint" problem the aspect-ratio reservation is * written inline to avoid. * * 3. spot.js HAS RUN. It writes the same inline `display` and the same * data-rg-on, so it can take a box back from the boot on a breakpoint change * rather than setting a class the boot's inline style would overrule. * * The data-rg-on rules below are therefore no longer the mechanism in states 2 * and 3 — they are the agreeing second opinion, three class-level selectors * deep so they still win against the lead rules on specificity alone. Keep them: * they are what state 1 is made of, and they are what a box looks like if the * inline styles are ever stripped by a sanitiser. * * DO NOT add `!important` to anything in this section. It would beat the inline * `display` and pin every box to its lead creative, which reads as "rotation * stopped working" and bills one advertiser for the whole zone. * -------------------------------------------------------------------------- */ .rg-spot__item { display: none; max-width: 100%; line-height: 0; /* kills the inline-image descender gap inside the frame */ } @media ( max-width: 840px ) { .rg-spot__item--lead-mobile { display: inline-block; } } @media ( min-width: 841px ) { .rg-spot__item--lead-desktop { display: inline-block; } } .rg-spot[data-rg-on="1"] .rg-spot__item { display: none; } .rg-spot[data-rg-on="1"] .rg-spot__item--on { display: inline-block; } .rg-spot__item { /* The shown item fills the frame, so the image can too. Without this the inline-block would shrink-wrap the image at its intrinsic size and the frame's reserved box would show around it — the dead space this whole arrangement exists to prevent. */ width: 100%; height: 100%; } .rg-spot__item img { display: block; /* * FILLS THE FRAME. The frame already carries this creative's own aspect * ratio, so there is nothing to distort — width and height at 100% simply * scale the artwork to the column, up or down. A 770x90 strip becomes * 1230x144 in the masthead band and 360x42 on a telephone, which is * precisely what asbarez.com does with the same file. * * `object-fit: contain` is a belt-and-braces guard, not a crop: if a * creative ever reaches the page with a ratio other than its frame's — a * hand-edited meta row, a size renamed in the registry without the artwork * being re-fitted — it letterboxes rather than stretching a face sideways. */ width: 100%; height: 100%; object-fit: contain; margin: 0 auto; border: 0; } /* An unlinked creative (no click token yet) is a , and must sit exactly where the would. */ .rg-spot__item, .rg-spot__item:hover, .rg-spot__item:focus { text-decoration: none; border: 0; box-shadow: none; } .rg-spot__item:focus-visible { /* Keyboard focus must remain obvious; the parent theme's link styles are suppressed above, so the outline is restored explicitly. */ outline: 2px solid #595959; outline-offset: 2px; } /* ----------------------------------------------------------------------------- * Per-zone frame widths — REMOVED 2026-08-19 * * There were three rules here capping the frame at 970px, 728px and 300px by * zone. They were written when a zone accepted a LIST of sizes and the cap had * to cover the widest of them; both halves of that are gone. The cap now comes * from the creative actually embedded, as `--rg-spot-mwd` / `--rg-spot-mwm` * written by class-render.php, so it can never disagree with the registry — * which the hardcoded numbers here silently did the moment the zone map * changed. * * If a zone ever needs to be narrower than its creative allows, that is a * THEME decision and belongs in the theme's own column, not here. * -------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * Reduced motion * * This file animates nothing. The rule is still worth its four lines because * the PARENT theme applies transitions and hover transforms to images inside * links, and those would otherwise inherit onto a creative — motion a reader * asked their operating system not to show them. * -------------------------------------------------------------------------- */ @media ( prefers-reduced-motion: reduce ) { .rg-spot, .rg-spot * { transition: none !important; animation: none !important; } }