`) ----
Each EPISODE page carries a full TASL attribution inside its description; the
SHOW page carried none, so a listener who subscribes to the show's feed and
never opens an episode saw no licence at all — the half of CC BY-NC-SA
§3(a)(1) that attaches the notice to every public presentation of the adapted
material (`show_license.py`). Fine print by design: it sits under the summary
inside the hero capsule, one per distinct source. Lifted off `--fg-mute`
over the wallpaper for the same reason `.ai-disclaimer` is — a REQUIRED
notice does not get to be the one thing the skin made unreadable. */
.public-ep .show-source {
font-size: 14px; line-height: 1.5; margin: -10px 0 18px;
}
body.ep-skin .public-ep .show-source { color: var(--fg-mute, #b6b6bb); }
/* ══ Landing / marketing pages — the classic Demades skin ════════════════════
Sam, 2026-08-08, on /affiliates: *"it doesn't use the classic demades style
(frosted glass capsules + wallpaper). all demades pages, now and moving
forward, should use this style."*
Every server-rendered `` page (/affiliates, /partners,
/pricing, /business, the signed-out landing, the thanks + episode-unavailable
pages) shipped as flat dark text on `--bg` — the same defect the legal/info
pages had before `body.legal-skin`. This is the third consumer of the shared
`--dm-glass-*` tokens above, so the frost cannot drift from the app's
`data-dm-capsule` or from the legal/episode skins.
Backdrop image: the daily-rotating AI Greek scene, set client-side into
`--dm-backdrop` / `--dm-backdrop-mobile` by `templates._BACKDROP_SKIN_JS`
(GET /api/backdrops/active — an ALREADY-GENERATED rotation, so no page view
can spend image money). Until it resolves — or with JS off — the gradient
fallback below stands in, so the page is never bare.
Guarded by `test_landing_skin.py`: a new `.landing` page that forgets the
body class or the backdrop script fails the gate rather than shipping flat. */
body.landing-skin { background: #0b0d12; }
/* `:not(.dm-mini)` — the persistent cross-page AUDIOBAR is `position:fixed`, and
an unqualified `body. > *` rule out-specifies a bare `.dm-mini` class
selector and drops the bar to the bottom of the document flow. That shipped
live once already (the legal skin, measured at y=2115 on prod 2026-07-26);
both other skins carry the exclusion and so does this one.
z-index 0 on the backdrop (never negative): at a negative z-index the
capsules' backdrop-filter cannot sample the image and blurs the opaque body
background instead — the "black band behind the capsule" bug. */
body.landing-skin > *:not(.dm-mini) { position: relative; z-index: 1; }
body.landing-skin::before {
content: ""; position: fixed; inset: 0; z-index: 0;
background:
linear-gradient(180deg, rgba(11, 13, 18, .42) 0%, rgba(11, 13, 18, .55) 100%),
var(--dm-backdrop, radial-gradient(120% 80% at 50% -10%, #24304a 0%, #141a28 45%, #0b0d12 100%));
background-size: cover; background-position: center; background-repeat: no-repeat;
}
@media (max-width: 640px) {
body.landing-skin::before {
background:
linear-gradient(180deg, rgba(11, 13, 18, .44) 0%, rgba(11, 13, 18, .58) 100%),
var(--dm-backdrop-mobile, var(--dm-backdrop, radial-gradient(120% 80% at 50% -10%, #24304a 0%, #141a28 45%, #0b0d12 100%)));
background-size: cover; background-position: center; background-repeat: no-repeat;
}
}
/* ---- The capsules ----
One capsule per top-level block: the hero header, each ``
(and the affiliate FTC-disclosure note, which is a ``), and the footer.
`.tiers` is excluded because it is a GRID of cards — frosting the grid would
put flat `--bg-elev` boxes on top of a capsule; its `article`s are frosted
individually below, which is what makes the pricing rows read as capsules. */
body.landing-skin .landing > header,
body.landing-skin .landing > section:not(.tiers),
body.landing-skin .landing > .affiliate-disclose,
body.landing-skin .landing > .private,
body.landing-skin .tiers > article {
background: var(--dm-glass-bg);
-webkit-backdrop-filter: var(--dm-glass-blur); backdrop-filter: var(--dm-glass-blur);
border: 1px solid var(--dm-glass-border-color);
border-radius: var(--dm-glass-radius);
box-shadow: var(--dm-glass-shadow);
padding: clamp(1.2rem, 3.4vw, 2rem) clamp(1.1rem, 3.4vw, 1.8rem);
}
/* Flat-page rhythm was 64px gaps between bare text blocks; capsules carry their
own edges, so one uniform gap reads better and the `.why`/`header` margins
from the base sheet are overridden here rather than in the shared rules. */
body.landing-skin .landing > header,
body.landing-skin .landing > section,
body.landing-skin .landing > .affiliate-disclose,
body.landing-skin .landing > .private { margin: 0 0 20px; }
body.landing-skin .landing > header > :first-child,
body.landing-skin .landing > section > :first-child,
body.landing-skin .tiers > article > :first-child { margin-top: 0; }
body.landing-skin .landing > header > :last-child,
body.landing-skin .landing > section > :last-child,
body.landing-skin .tiers > article > :last-child { margin-bottom: 0; }
/* The footer capsule, matching the legal skin's. */
body.landing-skin .site-foot {
max-width: 46rem; margin: 1.5rem auto 2.5rem; padding: 1rem 1.5rem 1.1rem;
border: 1px solid rgba(255, 255, 255, .10); border-radius: 18px;
background: rgba(12, 14, 18, .55);
-webkit-backdrop-filter: blur(14px) saturate(120%); backdrop-filter: blur(14px) saturate(120%);
}
/* Body copy over a scrimmed photo reads dimmer than over the flat `--bg` these
pages used to have — the same one-step lift `body.ep-skin .ep-desc` takes. */
body.landing-skin .landing .tagline { color: var(--fg, #e8e8ea); }
body.landing-skin .landing a:not(.cta) { color: var(--accent-hi); }
body.landing-skin .affiliate-terms-table th,
body.landing-skin .affiliate-terms-table td { border-color: rgba(255, 255, 255, .14); }
/* Accessibility + the no-backdrop-filter fallback: solid capsules, never a
transparent panel with unreadable text behind it. */
@media (prefers-reduced-transparency: reduce) {
body.landing-skin .landing > header,
body.landing-skin .landing > section:not(.tiers),
body.landing-skin .landing > .affiliate-disclose,
body.landing-skin .landing > .private,
body.landing-skin .tiers > article,
body.landing-skin .site-foot {
background: var(--dm-glass-bg-solid);
-webkit-backdrop-filter: none; backdrop-filter: none;
}
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
body.landing-skin .landing > header,
body.landing-skin .landing > section:not(.tiers),
body.landing-skin .landing > .affiliate-disclose,
body.landing-skin .landing > .private,
body.landing-skin .tiers > article,
body.landing-skin .site-foot { background: var(--dm-glass-bg-solid); }
}
/* ---- The hero lockup: mark and wordmark SIDE BY SIDE ----
Sam, 2026-08-08: *"pls put the logo and text logo side by side. rn we have
logo above text logo and they're both massive. pls borrow from how we do it
on the main demades.ai page."* The main site's lockup (`.pub-brand`, and the
app bar's `.brand`) is a horizontal inline-flex of a small rounded mark plus
the wordmark — this is that lockup at hero scale: 56px mark, 40px wordmark
(was a 96px stacked mark over a 56px wordmark). `templates.landing_lockup()`
emits it, so the geometry lives in one place for every landing page. */
.landing-lockup {
display: flex; align-items: center; gap: 16px;
margin: 0 0 22px; flex-wrap: wrap;
}
/* Overrides the stacked `.landing-logo` block above (display:block + 96px +
margin-bottom) for the horizontal lockup only. */
.landing-lockup .landing-logo { width: 56px; height: 56px; margin: 0; border-radius: 14px; }
/* `h1` carries the accessible name; the wordmark inside it is aria-hidden art. */
.landing-lockup h1 { margin: 0; line-height: 1; }
.landing-lockup .dm-wordmark--hero { font-size: 40px; }
@media (max-width: 520px) {
.landing-lockup { gap: 12px; }
.landing-lockup .landing-logo { width: 44px; height: 44px; border-radius: 11px; }
.landing-lockup .dm-wordmark--hero { font-size: 30px; }
}