/* ========================================================================== native-ads.php — page-specific additions ========================================================================== Loaded AFTER assets/text-ads/css/style.css, which is the shared ad-format design and is not edited from here. That sheet owns every section, token and breakpoint on this page; this one exists only for the one thing the NATIVE format shows that the text design has no equivalent for: the creative itself, and the publisher page it sits in A text ad is a headline, a URL and a description, so text-ads draws it in markup (`.ta-adcard`) and parks it in the top-right of the mock page. A native ad is a picture with a caption, and it lives in the publisher's OWN card grid — which is the entire point of the format, and the reason the S3 tablet here is a different page rather than the same page with a different card in it. Everything is scoped under `.native-ads-page` so including this sheet can never reach text-ads.php. Tokens (--c-*, --font-*) all come from the shared sheet; nothing here re-declares a colour or a face. MEASURED FROM THE DESIGN FRAME (Frame 2126.png, 1679x670). The device in it is byte-identical to text-ads' — screen box 990x656 at the same offsets — so every figure below is a percentage of that same 990x656 screen and drops straight into the coordinate system the shared sheet already uses. ========================================================================== */ .native-ads-page { /* THE CREATIVE, AT THE ONE SIZE THE DESIGN DRAWS IT. 267px wide on the 1920 artboard, which is where 13.906vw comes from. The floor keeps it legible on a phone; the ceiling stops it growing past the artboard's size on a wide monitor, exactly as `.ta-adcard`'s own clamp does. */ --na-creative-w: clamp(190px, 13.906vw, 267px); /* The artwork's own corner, so a box-shadow on the card follows the picture instead of drawing a rectangle behind it. 36px on the 534x598 export — TWO radii, because the box is not square and one percentage would give an ellipse: 36/534 across and 36/598 down. (The file is drawn at 2x the 267x299 it renders at, so the same fractions held before the retina re-export and hold after it.) */ --na-creative-r: 6.742% / 6.020%; /* The publisher page's own cards. #282828 is the caption strip under each one, which is where the placeholder mirrors the real creative's white caption bar — measured off the frame at rgb(40,40,40). */ --na-card-fill: var(--c-surface); --na-card-caption: #282828; } /* -------------------------------------------------------------------------- The creative One element for both call sites — the hero and the S3 card slot — because the flight measures one against the other and any difference between them would show up as a jump on landing. It KEEPS the `.ta-adcard` class. That is not decoration: scroll.js finds the flight's target with `.ta-device .ta-adcard`, and the shared sheet hides that copy while the flight is in the air. Reusing the class is what makes the flight work here with no JavaScript change at all. -------------------------------------------------------------------------- */ .native-ads-page .ta-adcard.na-adcard { /* `.ta-adcard` is a padded white flex column; none of that applies to a picture. Cleared explicitly rather than by writing a competing rule with more specificity, so what this element IS stays readable in one place. */ display: block; padding: 0; gap: 0; background-color: transparent; border-radius: var(--na-creative-r); overflow: hidden; } .native-ads-page .na-adcard img { display: block; width: 100%; height: auto; } /* --- in the hero --------------------------------------------------------- */ .native-ads-page .ta-hero__card-wrap .na-adcard { width: var(--na-creative-w); } /* -------------------------------------------------------------------------- S3 — the mock publisher page Same 990x656 screen as text-ads, two changes to what is on it. 1. THE COPY RUNS THE FULL WIDTH. text-ads' bars stop at 62.42% because its ad card sits in the top-right corner of the page. Nothing sits there here — the ad is down in the card grid — so the article runs the whole content column, 90.51% (896/990) against the same 4.65% left inset. 2. THE THIRD PARAGRAPH GROUP IS A CARD GRID. text-ads has twelve bars in three groups; the frame here keeps the first eight and gives the space below them to the publisher's card row, with the ad in it. -------------------------------------------------------------------------- */ .native-ads-page .ta-device__bar { width: 90.51%; } /* 896 / 990 */ .native-ads-page .ta-device__bar--short { width: 45.86%; } /* 454 / 990, the same 50.67% of the full bar that text-ads' 313/618 is — the ratio is the design's, only the column it is measured against changed. */ /* --- the card row -------------------------------------------------------- */ /* THE ROW IS WIDER THAN THE PAGE IT SITS ON, AND THAT IS THE DESIGN. Five cards at 226px with 14px gutters come to 1174px inside an 896px column, so the first is cut by the column's left edge and the last by its right — the row reads as a strip continuing past both sides, which is what a real publisher grid looks like. `overflow: hidden` here is what does the cutting; the children are positioned in the row's own coordinates and two of them deliberately fall outside it. Measured: visible slivers of 87px on the left and 75px on the right, and 87 + 14 + 226 + 14 + 226 + 14 + 226 + 14 + 75 = 896 exactly. */ .native-ads-page .na-cards { position: absolute; left: 4.65%; /* x 46 / 990 — the article's own inset */ top: 52.44%; /* y 344 / 656 — where text-ads' third group was */ width: 90.51%; /* 896 / 990 */ height: 38.57%; /* 253 / 656 */ overflow: hidden; } /* Every slot, real or placeholder, is the same box. Percentages are of the ROW (896 wide), not the screen: 226/896 across, and the five lefts stepping by 226 + 14 from a start 139px outside the left edge. */ .native-ads-page .na-cards > * { position: absolute; top: 0; width: 25.223%; /* 226 / 896 */ height: 100%; } .native-ads-page .na-cards > *:nth-child(1) { left: -15.513%; } /* -139 / 896 */ .native-ads-page .na-cards > *:nth-child(2) { left: 11.272%; } /* 101 / 896 */ .native-ads-page .na-cards > *:nth-child(3) { left: 38.058%; } /* 341 / 896 */ .native-ads-page .na-cards > *:nth-child(4) { left: 64.844%; } /* 581 / 896 */ .native-ads-page .na-cards > *:nth-child(5) { left: 91.629%; } /* 821 / 896 */ /* The four placeholders. Each is the real creative's shape with the picture taken out: a block, and a lighter strip across the bottom standing in for the caption. Drawn with a gradient rather than a child element so a slot stays one empty tag in the markup — there is nothing in it to describe. */ .native-ads-page .na-card { background-image: linear-gradient( to bottom, var(--na-card-fill) 0, var(--na-card-fill) 89.33%, /* 226 / 253 — where the caption starts */ var(--na-card-caption) 89.33%, var(--na-card-caption) 100% ); border-radius: clamp(8px, 1.04vw, 20px); /* 20px on the 1920 artboard */ } /* The ad slot, and this rule sets NO geometry on purpose. The shared sheet parks text-ads' card in the top-right of the screen with `.ta-device .ta-adcard { left: 68.48%; top: 12.04%; width: 28.05% }`. That is already outscored by the `.na-cards > *` rules above — two classes against three — so the row places this card like any other slot and there is nothing here to undo. Writing `left: auto` here instead was the bug: at four classes it beat the `:nth-child(3)` rule that carries the slot's position, and the ad landed on the row's left edge underneath the first placeholder. Only what the row cannot know belongs in this rule. */ .native-ads-page .ta-device .ta-adcard.na-adcard { padding: 0; border-radius: var(--na-creative-r); } .native-ads-page .ta-device .na-adcard img { width: 100%; height: 100%; /* The slot's 226x253 is a hair taller in proportion than the file's 534x598 (the same 267:299 it renders at), so the picture fills it and loses a sliver rather than letting the caption bar float off the card's bottom edge. */ object-fit: cover; } /* Phones: the row is most of a small screen, so a 226px card scaled down is a thumbnail either way. Nothing to change — the whole device scales as one block and the percentages hold. This note exists so the absence of a breakpoint here reads as a decision rather than an omission. */ /* -------------------------------------------------------------------------- S10 CTA HEADING — two lines, not four -------------------------------------------------------------------------- This page's heading is the longest of the ad-format set: "Reach More Customers With Our" needs 1024px and "Native Advertising Network Today" needs 1086px at the shared sheet's full 64px, and the title box is capped at 1011px so it can stop short of the dashboard art on the panel's right. Both halves therefore wrapped, and the em's `display:block` turned a two-line heading into four. The cap is what has to give, not the box: widening the box past 1011 would run the yellow line under the fan and the dashboard. 58px is the largest size at which the longer half (1086 x 58/64 = 984px) still clears 1011 with room to spare, so both halves sit on one line each. Overriding the token rather than `font-size` is deliberate — only `.ta-cta__title` reads `--fs-cta`, and the <=900px band sets its font-size outright, so this touches the desktop size and nothing else. In practice it only bites above ~1740px, where 3.333vw finally passes 58; every narrower width was already inside the clamp and is untouched. */ .native-ads-page { --fs-cta: clamp(40px, 3.333vw, 58px); } /* -------------------------------------------------------------------------- S10 — the closing CTA title The shared sheet puts the accent on the (text-ads/css/style.css:2165), because on text-ads, banner, popunder and push the whole second line is lime. This page's is not: the reference reads "Reach More Customers" / "With Our Native Advertising" / "Network Today", so the break falls after "Customers" and the accent starts mid-line at "Native" and carries across the wrap. The keeps the break and hands the colour back to the title's white; the inside it carries the accent run. Sampled off the reference: the lit pixels of "Network Today" average (234,251,70), which is --c-accent #E9FD45 through JPEG. Same lime as every other page — only the run it covers changed. -------------------------------------------------------------------------- */ .native-ads-page .ta-cta__title em { color: var(--c-white); } .native-ads-page .ta-cta__title em span { color: var(--c-accent); } /* -------------------------------------------------------------------------- PHONES — the hero creative Same trap interstitial-ads hits, one page over: `--na-creative-w` is `clamp(190px, 13.906vw, 267px)`, and below about 1370px the vw term falls under the floor, so the creative freezes at 190px. Two things break with it. 1. IT STOPS SCALING. The phone reference draws the card 319 wide against a 584 container — 54.6% — and 190px is 33%. 2. IT STOPS BEING CENTRED. text-ads' phone rule is `.ta-hero__card-wrap .ta-adcard { width: 100% }`, so its card fills the wrap and centres with it. The `--na-creative-w` rule is more specific and wins, leaving a 190px card against the left edge of a 366px wrap — 88px left of the screen's centre line, which is what the reference is measured against. So the wrap takes the reference's share and the card fills it again, which puts the centring back where the shared sheet had it. Note that this share is NARROWER than text-ads' 62.6% while interstitial's is wider: that page's creative is a landscape browser window, this one is a portrait card. -------------------------------------------------------------------------- */ @media (max-width: 767px) { /* 319/584 of the container. */ .native-ads-page .ta-hero__card-wrap { width: 54.6%; } /* Beats the unscoped `--na-creative-w` rule at the same specificity, so the shared phone behaviour (fill the wrap) applies here too. */ .native-ads-page .ta-hero__card-wrap .na-adcard { width: 100%; } /* THE NOTE FOLLOWS THE NARROWER WRAP. `left` is a percentage OF THE WRAP, measured against text-ads' 62.6% one; the reference sets this page's note 206px in from the card's left edge, which is 63.6% of a 319 card rather than 58.4%. `bottom` is not restated — the shared 11vw already lands the note 70px above the card top against the reference's 68. */ .native-ads-page .ta-hero__note { left: 63.6%; } /* --- S3: THE FEED ROW BECOMES ONE CARD --------------------------------- On the desktop artboard S3 is a five-slot publisher row with the ad third and the outer two cut by the screen edges — the point being that a native ad wears the same shape as the grid it sits in. A phone has no room for that: at this width each 25.2% slot is about 140px, so the ad reads as a thumbnail and the argument is lost. The phone reference makes the ad the feed: one card at the row's own width (524 across a 583 screen — the 90.51% the row already has), one article block above it, and nothing else. So the placeholders go, the ad takes the whole row, and the row moves up and grows to the card's height. Percentages are of the screen, read off the reference at its own scale: card top 173/800, card height 582/800. */ .native-ads-page .na-cards { top: 21.6%; height: 72.8%; } /* The four empty slots. Nothing to show once the ad is the whole row. */ .native-ads-page .na-card { display: none; } /* Four classes, so this beats the `:nth-child(3)` rule that carries the ad's slot position in the desktop row. */ .native-ads-page .na-cards > .ta-adcard.na-adcard { left: 0; width: 100%; } /* ONE ARTICLE BLOCK, NOT EIGHT. The reference shows a single rounded block above the card and bare screen under it — the eight bars are the desktop article, and below the card there is no room for them anyway. The sibling combinator keeps the first and drops every bar after it, so the kept one stays the block the shared sheet already positions at 10.98%. */ .native-ads-page .ta-device__bar ~ .ta-device__bar { display: none; } }