/* ========================================================================== popunder-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 what the POPUNDER format needs and the text design has no equivalent for: a browser, because the ad is a second tab Every other format can be drawn as a thing sitting on a page. A popunder cannot: it has no visual space of its own, it IS the tab that opens when you click. So S3 is not a mock page with an ad in it — it is a mock BROWSER, and the ad is the tab that appears in it. The hero says the same thing the other way round, with a torch-beam through the publisher's site onto the page hiding behind it. Everything is scoped under `.popunder-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. The device is byte-identical to text-ads' — screen box 990x656 at the same offsets, verified against Screenshot_153 — so every figure is a percentage of that same screen. The open-tab timing and its scale origin are measured off the supplied screen recording, frame by frame; see assets/popunder-ads/js/tab-open.js. ========================================================================== */ .popunder-ads-page { /* THE HERO CARD, AT THE ONE SIZE THE DESIGN DRAWS IT. 600px wide on the 1920 artboard — the export's own natural width, shown 1:1. */ --pu-card-w: clamp(280px, 31.25vw, 600px); /* The mock browser. Surfaces first: the screen it sits on, the page panel inside it, the tab, and the article bars — all measured off the design frame, all a shade apart rather than a step, because a browser at this size is a stack of near-blacks and the design keeps it that way. */ --pu-chrome: #1C1C1C; /* tab pill and page panel (measured 28) */ --pu-bar: #2A2A2C; /* the article's own bars (measured 42) */ --pu-label: rgba(255, 255, 255, 0.92); /* The tab that opens. Its page is the one thing on this device with a colour — everything else is a grey — because the whole point of the section is that a SECOND page arrived. */ --pu-dest: #073686; /* measured off the open-state reference */ --pu-dest-bar: rgba(255, 255, 255, 0.07); /* A shade under the page, which is what makes the tab read as attached to it rather than sitting on it. Measured (1,50,126) against (7,54,134). */ --pu-dest-tab: #01327E; /* The favicon on the open tab. A site the reader has never seen needs a mark of its own, or the tab reads as a second copy of the first. */ --pu-i-fav: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M12 2.6 21 7.3v9.4L12 21.4 3 16.7V7.3z'/%3E%3Cpath d='M3 7.3l9 4.7 9-4.7M12 12v9.4'/%3E%3C/svg%3E"); /* How long the new tab takes to open, and where it grows from. Both are measured, not chosen — see the frame table in tab-open.js. */ --pu-open: 450ms; --pu-open-ease: cubic-bezier(0.16, 1, 0.3, 1); /* THE CURSOR'S TRAVEL, ALSO MEASURED. Tracking the pointer's tip through the recording between t 2.2 and t 4.7, against a screen box of 660x437 in that frame: t 2.20 (46.97%, 59.73%) t 3.00 (45.60%, 47.02%) t 4.00 (44.09%, 36.38%) t 4.40 (43.79%, 35.24%) <- settled, ~0.3s before the click Mostly straight up — 24.7% of the screen's height against 3.3% of its width — slowing into the end rather than stopping dead. It comes to rest on the spot the static design frame puts it, which is what the click has to land on, so the START is that spot plus the travel. */ --pu-move: 2200ms; --pu-move-ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* The click. The dip is short and sharp because a slow press reads as a drag; the ring outlives it so the gesture is still legible after the hand has come back up. */ --pu-press: 130ms; --pu-press-ease: cubic-bezier(0.4, 0, 0.2, 1); --pu-ring: 520ms; --pu-ring-ease: cubic-bezier(0.16, 1, 0.3, 1); /* The browser's furniture, inlined so it costs no requests and takes its colour from here. Shapes only — none of it carries meaning, which is why the whole strip is aria-hidden in the markup. */ --pu-i-ext: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linejoin='round'%3E%3Cpath d='M4 8h4V5a2 2 0 1 1 4 0v3h4a2 2 0 0 1 2 2v4h3a2 2 0 1 1 0 4h-3v3H4z'/%3E%3C/svg%3E"); --pu-i-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v9m0 0 3.5-3.5M12 16l-3.5-3.5'/%3E%3C/svg%3E"); --pu-i-side: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2.5'/%3E%3Cpath d='M9 4v16'/%3E%3C/svg%3E"); --pu-i-more: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Ccircle cx='12' cy='5' r='1.8'/%3E%3Ccircle cx='12' cy='12' r='1.8'/%3E%3Ccircle cx='12' cy='19' r='1.8'/%3E%3C/svg%3E"); /* The pointing hand. Drawn rather than exported because it recolours and scales with the device, and because it is one shape. */ --pu-cursor-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 34' fill='%23fff'%3E%3Cpath d='M11.4 15.2V4.6a2.3 2.3 0 0 1 4.6 0v8.2h1.2v-2a2.1 2.1 0 0 1 4.2 0v2h1.2v-1.3a2.1 2.1 0 0 1 4.2 0v1.3h1.1a2 2 0 0 1 2 2v6.6c0 5-3.4 9.6-9 9.6h-2.2c-4.4 0-6.6-2-8.4-5.2l-4.1-7.3a2.2 2.2 0 0 1 3.5-2.6z'/%3E%3C/svg%3E"); } /* -------------------------------------------------------------------------- S1 — the hero The card is one supplied export: the publisher's site, a torch beam through it, and the popunder's own page showing in the beam. Dashed border included — it is drawn into the file, because the dashes are the design's way of saying "this thing is not really there". -------------------------------------------------------------------------- */ .popunder-ads-page .ta-adcard.pu-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; /* 12px on a 600-wide card, two radii because the box is not square. The artwork carries its own corners; this is only so the bloom follows them. */ border-radius: 2.000% / 3.561%; } .popunder-ads-page .pu-adcard img { display: block; width: 100%; height: auto; } .popunder-ads-page .ta-hero__card-wrap .pu-adcard { width: var(--pu-card-w); } /* --- TWO annotations, not one -------------------------------------------- text-ads has one note, to the right of its card. This hero has two, and they are a pair: one names the trigger and one names the hiding place, and the card sits between them. The shared `.ta-hero__note` keeps its place on the right and only moves to the design's own offsets; the left one is new and mirrors it, arrow included. Offsets are from the card's own edges, measured on the 1920 artboard: right note 67px out and 124px down, left note 55px out and 176px down. */ .popunder-ads-page .ta-hero__note { left: calc(100% + clamp(16px, 3.49vw, 67px)); top: clamp(40px, 6.46vw, 124px); } .popunder-ads-page .ta-hero__note--left { /* Anchored to the card's LEFT edge, so it moves with the card the way the right-hand one does rather than being pinned to the section. */ left: auto; right: calc(100% + clamp(14px, 2.86vw, 55px)); top: clamp(60px, 9.17vw, 176px); /* LEFT-ALIGNED, like its partner, even though it hangs off the card's left edge. Measured on the artboard, its three lines all start on x 426-430 and it is the RIGHT edge that is ragged — so anchoring the box on the right and letting the text run left is the arrangement, not right-aligned text. Set to `right` first, which lined the three lines up on the wrong side and pushed the arrow under the last word. */ text-align: left; } /* EACH NOTE HAS ITS OWN ARROW, and neither is the shared one. text-ads' arrow is a single hook, drawn to come in from the right. These two are supplied and they are different curves, not one curve mirrored: the left note's sweeps right and lifts into an arrowhead at the top (88x25), the right note's falls from the top-right into an arrowhead at the bottom-left (82x42). Flipping one to make the other, which is what this page did first, produced two arrows that pointed correctly and curved wrongly. Offsets are from each note's own text block, measured on the 1920 artboard: the left arrow 83px right and 75px down, the right one 30px left and 66px down. */ .popunder-ads-page .ta-hero__note img { /* NEGATIVE CLAMP, SO THE BOUNDS INVERT. `clamp(min, val, max)` needs min below max, and for a leftward offset the larger magnitude IS the lower number: -30px is the 1920 figure and -15px the floor. Written the other way round the function returns its min and the arrow sat 15px off. */ left: clamp(-30px, -1.56vw, -15px); top: clamp(33px, 3.44vw, 66px); width: clamp(41px, 4.27vw, 82px); } .popunder-ads-page .ta-hero__note--left img { left: clamp(40px, 4.11vw, 79px); top: clamp(38px, 3.91vw, 75px); width: clamp(44px, 4.58vw, 88px); } /* -------------------------------------------------------------------------- S3 — the mock browser Not a page with an ad on it. A browser: one tab, a toolbar, an article, and a cursor waiting to click. What happens when it does is in tab-open.js. -------------------------------------------------------------------------- */ /* The screen is a browser now, so its own children stack: page panel, then the article on it, then the destination page over both, then the chrome, then the cursor on top. */ .popunder-ads-page .ta-device__screen { isolation: isolate; } /* One layer over the screen holding the whole mock, so tab-open.js has a single element to put its state classes on and every child can be positioned in the screen's own percentages. */ .popunder-ads-page .pu-browser { position: absolute; inset: 0; } /* The article sits ON the page panel, so it needs a layer of its own — the panel is z 1 and would otherwise paint over bars that come after it only by document order, which the destination page at z 2 then has to beat anyway. */ .popunder-ads-page .ta-device__bar { z-index: 1; } /* --- the tab strip ------------------------------------------------------- */ /* THE STRIP IS GIVEN A WIDTH, and it has to be. The tabs are sized as a percentage of the SCREEN — 198/990 each — but a percentage width resolves against the parent, and a content-sized flex row is whatever its children happen to be. Left to itself it collapsed to the label's width and the tab came out at 3% instead of 20%. So the strip carries the screen figure and the tabs carry their share of it: 44% holds two 20% tabs with the design's 4% between them. */ .popunder-ads-page .pu-tabs { position: absolute; left: 2.12%; /* x 21 / 990 */ top: 3.05%; /* y 20 / 656 */ width: 40.00%; /* two 20% tabs, and they touch */ z-index: 3; display: flex; align-items: flex-end; } .popunder-ads-page .pu-tab { display: flex; align-items: center; gap: 0.5em; /* 198 x 34 on the 990x656 screen. Width is in screen %, height follows from the type inside it, which is what keeps the label centred at any size. */ width: 50%; /* 20% of the screen, of a 40% strip */ padding: 0.55em 1.1em; font-family: var(--font-body); font-size: clamp(7px, 0.729vw, 14px); line-height: 1.35; white-space: nowrap; color: var(--pu-label); background-color: var(--pu-chrome); /* A browser tab: rounded on top, square where it meets its page. */ border-radius: clamp(4px, 0.417vw, 8px) clamp(4px, 0.417vw, 8px) 0 0; } /* The tab the ad arrives in. It does not exist until the click, and it opens by growing sideways out of the first tab's edge — so it is laid out at zero width with its label clipped, and the script gives it its width. */ .popunder-ads-page .pu-tab__fav { flex: none; width: 1.15em; aspect-ratio: 1; background-color: var(--pu-label); -webkit-mask-image: var(--pu-i-fav); mask-image: var(--pu-i-fav); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } .popunder-ads-page .pu-tab--dest { width: 0; padding-inline: 0; overflow: hidden; background-color: var(--pu-dest-tab); transition: width var(--pu-open) var(--pu-open-ease), padding-inline var(--pu-open) var(--pu-open-ease); } .popunder-ads-page .pu-browser.is-open .pu-tab--dest { width: 50%; padding-inline: 1.1em; } /* --- the toolbar --------------------------------------------------------- */ /* Four glyphs at the top right, 16px on a 990 screen and 40px apart. Drawn as masks rather than so they take a colour from here and cost no requests; the shapes are the browser's own furniture and carry no meaning, which is also why the whole strip is hidden from assistive tech. */ /* Same trap as the tab strip, one level down: a percentage GAP resolves against this row's own width, which is content-sized, so 2.42% came out as a couple of pixels and the four glyphs bunched up. The spacing is 40px on the 1920 artboard between 16px boxes, so the gap is the 24px difference, held in vw where it can only mean one thing. */ .popunder-ads-page .pu-tools { position: absolute; right: 3.43%; /* puts the kebab's centre on the design's 95.76% */ top: 2.29%; /* y 15 / 656 */ z-index: 3; display: flex; align-items: center; gap: clamp(13px, 1.25vw, 24px); } .popunder-ads-page .pu-tools span { width: clamp(9px, 0.833vw, 16px); aspect-ratio: 1; background-color: rgba(255, 255, 255, 0.75); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } /* --- the page panel ------------------------------------------------------ */ .popunder-ads-page .pu-page { position: absolute; left: 2.02%; /* x 20 / 990 */ top: 8.23%; /* y 54 / 656 */ width: 95.96%; /* 950 / 990 */ height: 74.54%; /* 489 / 656 */ z-index: 1; background-color: var(--pu-chrome); border-radius: clamp(4px, 0.417vw, 8px); overflow: hidden; } /* The article, inside the panel. Positions are the shared sheet's bar tops plus the panel's own offset — see the note on $deviceBars in the page. */ /* CENTRED IN THE PANEL, WHICH THE DESIGN FRAME IS NOT. Measured off it pixel by pixel, the article runs x 53..950 inside a panel at 20..969 — 33px of margin on the left against 19px on the right. Nothing else on the page is lopsided and no figure explains it, so it reads as a slip in the frame rather than an intention, and copying it faithfully just moves the slip into the build. The bar keeps its width (898px) and is centred instead: 46px each side of a 990 screen, which is 26px each side inside the panel, and which lands on 4.65% — the same inset the shared sheet uses on every other format page. */ .popunder-ads-page .ta-device__bar { left: 4.65%; /* x 46 / 990 */ width: 90.71%; /* 898 / 990 */ background-color: var(--pu-bar); } /* text-ads' short bar is 313/990 and the design keeps that figure exactly, even though the full bar around it grew — so this is NOT rescaled with it. */ .popunder-ads-page .ta-device__bar--short { width: 31.62%; } /* --- the page the tab opens ---------------------------------------------- */ /* IT GROWS OUT OF ITS OWN TAB, and that is the whole gesture: the reader clicks, a tab appears, and the page unfolds from it. The origin is measured off the recording — solving the box's left and right edges across five frames puts the fixed point at 29.1% of the panel's width and dead on its top edge, which is where the new tab sits. */ .popunder-ads-page .pu-dest { position: absolute; /* THE PUBLISHER'S PANEL, ONE SIZE TALLER. Measured off the open-state reference pixel by pixel: the blue page has the SAME 20px margin as the panel it replaces — left, right, and bottom — and starts on the same 8.23% line. The only difference is where it stops: the panel ends at the last bar, this one runs on down to 20px from the screen's bottom edge, which is what makes it read as a whole window rather than a card. An earlier reading had it flush left and hard to the bottom. It is not — the corners are rounded and there is dark screen all the way round. Repeated here rather than nested in the panel because the article bars are siblings of that panel, not children — they keep the shared sheet's screen-relative tops that way — so the page that has to cover them cannot live inside it either. */ left: 2.02%; /* x 20 / 990 */ top: 8.23%; /* y 54 / 656, the same line the panel starts on */ width: 95.96%; /* 950 / 990, the same 20px margin on both sides */ height: 88.72%; /* 582 / 656, down to 20px off the bottom */ z-index: 2; border-radius: clamp(4px, 0.417vw, 8px); overflow: hidden; background-color: var(--pu-dest); transform: scale(0); transform-origin: 29.1% 0; transition: transform var(--pu-open) var(--pu-open-ease); will-change: transform; } .popunder-ads-page .pu-browser.is-open .pu-dest { transform: scale(1); } /* Its own article, so the new page reads as a page rather than a blue fill. Same bar geometry, drawn from the panel's own coordinates. */ /* The same bars in the same places — the reference has the destination page laid out exactly like the article it replaced — only re-based from the screen's percentages into this box's. Horizontally that is a divide by 0.9808; vertically the page's own top and height do it, in the markup. */ /* The same bar in the same place, re-based from the screen's percentages into this box's. The page has the panel's own 20px margins, so a bar that sits 46px into the screen sits 26px into the page — even on both sides, the same as the article underneath it. */ .popunder-ads-page .pu-dest__bar { position: absolute; left: 2.74%; /* 26 / 950 */ width: 94.53%; /* 898 / 950 */ background-color: var(--pu-dest-bar); border-radius: 6px; } .popunder-ads-page .pu-dest__bar--short { width: 32.95%; } /* 313 / 950 */ /* --- the pointer -------------------------------------------------------- THREE PARTS, AND THE SPLIT IS LOAD-BEARING. `.pu-pointer` carries the position and the travel; the hand and the click ring are its children. They cannot be one element, because the hand is drawn with a `mask` and a mask clips its whole subtree — a ring inside it would come out cut to the shape of a hand. The pointer is part of the picture, not the reader's own. It arrives, it presses, and the tab opens. -------------------------------------------------------------------------- */ /* WHERE IT STARTS, not where it ends. The design frame's cursor position is the CLICK point and lives in the .is-moving rule below; this is that point plus the travel measured off the recording, so the pointer arrives rather than appearing. */ .popunder-ads-page .pu-pointer { position: absolute; left: 50.8%; /* 47.5 + 3.3 */ top: 78.7%; /* 54.0 + 24.7 */ z-index: 4; width: clamp(16px, 1.56vw, 30px); aspect-ratio: 30 / 34; /* `left`/`top` rather than a transform, and deliberately: the travel is measured as a fraction of the SCREEN, and a percentage translate would resolve against the pointer's own 30px box instead. Two properties on one small element for two seconds is a price worth paying to have the number mean what it says. */ transition: left var(--pu-move) var(--pu-move-ease), top var(--pu-move) var(--pu-move-ease); } /* The approach. Held for the rest of the cycle — the pointer does not wander off again once it has clicked. */ .popunder-ads-page .pu-browser.is-moving .pu-pointer { left: 47.5%; /* the design frame's own position */ top: 54.0%; } .popunder-ads-page .pu-pointer__hand { position: absolute; inset: 0; background-color: var(--c-white); -webkit-mask-image: var(--pu-cursor-glyph); mask-image: var(--pu-cursor-glyph); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55)); /* The press pivots on the fingertip, which is what the pointer is pressing WITH — scaling about the centre makes the whole hand shrink instead. */ transform-origin: 37% 9%; transition: transform var(--pu-press) var(--pu-press-ease); } .popunder-ads-page .pu-browser.is-clicking .pu-pointer__hand { transform: scale(0.82); } /* THE CLICK ITSELF, and it is not in the recording. The capture shows the pointer unchanged through the whole thing — the page simply arrives over it. That reads as a page opening on its own, which is the one thing this section must not say: a popunder is triggered BY the click, and the click is the format. So the cue is added rather than copied: a ring at the fingertip, out and gone in 520ms. Anchored on the fingertip, not the box's centre, so it leaves from the point the hand is pressing. */ .popunder-ads-page .pu-pointer__ring { position: absolute; left: 37%; top: 9%; width: 210%; aspect-ratio: 1; margin: -105% 0 0 -105%; border: 2px solid rgba(255, 255, 255, 0.9); border-radius: 50%; opacity: 0; transform: scale(0.2); pointer-events: none; } /* ITS OWN CLASS, AND NOT THE ONE THE HAND USES. The dip lasts 130ms and the ring 520ms, so hanging both on `is-clicking` would cut the ring off a fifth of the way through when the hand came back up. `is-clicked` goes on at the same moment and stays until the loop resets, which is what lets the ring finish over the top of the page opening — exactly as it would on a real click, where the ripple outlives the button press. Run on a class rather than on `:hover`, because there is no pointer here to hover with — the whole gesture is played, not performed. */ .popunder-ads-page .pu-browser.is-clicked .pu-pointer__ring { animation: pu-click-ring var(--pu-ring) var(--pu-ring-ease) forwards; } @keyframes pu-click-ring { 0% { opacity: 0; transform: scale(0.2); } /* The ring is brightest just after it leaves, not at the instant of the press — a ring that starts at full opacity reads as a dot appearing. */ 18% { opacity: 0.85; transform: scale(0.62); } 100% { opacity: 0; transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .popunder-ads-page .pu-tab--dest, .popunder-ads-page .pu-dest, .popunder-ads-page .pu-pointer, .popunder-ads-page .pu-pointer__hand { transition: none; } /* The ring is the one part with nothing to fall back to: it exists only as movement. Under this setting the press alone carries the click. */ .popunder-ads-page .pu-pointer__ring { animation: none; } } /* THE CUT BACK TO THE START. The loop ends by returning to the publisher's site, and running the open backwards to get there would show a tab being un-opened — not a thing that happens, and it reads as the animation rewinding. Held for one reflow by tab-open.js so the return is a cut. */ .popunder-ads-page .pu-browser.is-instant .pu-tab--dest, .popunder-ads-page .pu-browser.is-instant .pu-dest, .popunder-ads-page .pu-browser.is-instant .pu-pointer, .popunder-ads-page .pu-browser.is-instant .pu-pointer__hand { transition: none; }