/* ============================================================================= House ads — the markup HouseAdService.BuildHtml emits. ============================================================================= Global, unscoped, and loaded by BOTH hosts (App.razor's list and the MAUI index.html one). It has to be: the creative is injected with `@((MarkupString)_banner.Html)`, so Blazor stamps no scope attribute on it and a rule in a `.razor.css` file would compile to `.os-house[b-hash]` and match nothing. That is the same reason AdBanner.razor.css reaches the provider markup through `::deep`. ── The colours are DATA, not design ────────────────────────────────────── Every colour here comes from the six custom properties the adapter sets INLINE on the anchor, out of per-creative database columns: --osh-g1 / --osh-g2 background gradient stops --osh-text body/headline colour --osh-accent sub-headline + focus ring --osh-cta-bg CTA pill background --osh-cta-fg CTA pill text Do NOT hard-code a brand colour or assume "white type on a dark brand background": two of the three seeded creatives are LIGHT with dark type, so that assumption produces an unreadable ad. For the same reason there is no `prefers-color-scheme` block — a house creative carries its own palette and must look identical in either app theme, exactly like a third-party banner would. The only theme tokens used are the neutral geometry ones (--os-radius-*, --os-space-*), which exist in both modes. ── Layouts ─────────────────────────────────────────────────────────────── `--block` (default, stacked) · `--wide` (horizontal, leaderboard-shaped slots) · `--sky` (vertical, the 160x600 reader rails). BuildHtml picks one from the requested AdSize; every fluid placement gets `--block`, which degrades gracefully at any width. ── No page may scroll horizontally (AGENTS.md) ─────────────────────────── Hence `max-width: 100%` + `box-sizing: border-box` on the anchor, `min-width: 0` on the flex children that hold text (a flex item's default `min-width: auto` refuses to shrink below its content), and a bounded logo. The logo is the sharp edge: `.ad-banner__image`'s existing `max-width: 100%` rule matches only the IMAGE render kind, so an un-bounded `.os-house__logo` would render at its intrinsic pixel size — several hundred px inside a 160px rail. ============================================================================= */ .os-house { display: flex; box-sizing: border-box; width: 100%; max-width: 100%; /* An ad is one big click target: no underline, and the colour comes from the creative, never from the surrounding link styles. */ text-decoration: none; color: var(--osh-text); background: linear-gradient(135deg, var(--osh-g1), var(--osh-g2)); border-radius: var(--os-radius-md); overflow: hidden; line-height: 1.25; transition: transform 0.15s ease, filter 0.15s ease; } .os-house:hover, .os-house:focus-visible { text-decoration: none; color: var(--osh-text); filter: brightness(1.05); } .os-house:focus-visible { outline: 2px solid var(--osh-accent); outline-offset: 2px; } /* ── Block (default / fluid) ───────────────────────────────────────────── */ .os-house--block { flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--os-space-sm); padding: var(--os-space-md); } /* ── Wide (leaderboard-shaped: 728x90 and friends) ─────────────────────── */ .os-house--wide { flex-direction: row; align-items: center; gap: var(--os-space-md); text-align: start; padding: var(--os-space-sm) var(--os-space-md); } /* ── Sky (the 160x600 reader rails) ────────────────────────────────────── */ .os-house--sky { flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--os-space-md); padding: var(--os-space-md) var(--os-space-sm); height: 100%; } /* ── Logo ──────────────────────────────────────────────────────────────── */ .os-house__logo { display: block; /* flex-shrink stays at its default 1 so a narrow slot squeezes the logo rather than the copy; the max-* pair caps it on a wide one. */ max-width: 100%; height: auto; object-fit: contain; } .os-house--block .os-house__logo { max-height: 40px; } .os-house--wide .os-house__logo { max-height: 36px; /* Bounded on the inline axis too: in a row the logo would otherwise take its intrinsic width and leave the headline nothing. */ max-width: 25%; } .os-house--sky .os-house__logo { max-height: 56px; } /* ── Copy ──────────────────────────────────────────────────────────────── */ .os-house__copy { display: flex; flex-direction: column; gap: 2px; /* Both required: without them this flex item keeps its `min-width: auto` intrinsic width, pushes past the slot, and scrolls the page. */ min-width: 0; overflow-wrap: anywhere; } .os-house--wide .os-house__copy { /* Takes the leftover row, so the CTA sits hard right. */ flex: 1 1 auto; } .os-house__headline { font-weight: 700; font-size: 1rem; color: var(--osh-text); } .os-house--wide .os-house__headline, .os-house--sky .os-house__headline { font-size: 0.95rem; } .os-house__sub { font-size: 0.8125rem; color: var(--osh-accent); opacity: 0.9; } /* ── CTA ───────────────────────────────────────────────────────────────── */ .os-house__cta { display: inline-flex; align-items: center; justify-content: center; align-self: center; /* Never let the pill be the thing that shrinks — it is the affordance. */ flex: 0 0 auto; max-width: 100%; padding: var(--os-space-xs) var(--os-space-md); border-radius: var(--os-radius-full); background: var(--osh-cta-bg); color: var(--osh-cta-fg); font-size: 0.8125rem; font-weight: 600; white-space: nowrap; /* A long CTA in a narrow slot ellipsises rather than widening the anchor. */ overflow: hidden; text-overflow: ellipsis; } @media (prefers-reduced-motion: reduce) { .os-house { transition: none; } }