diff --git a/src/data/catalog.ts b/src/data/catalog.ts index 3e85481..7fec5e0 100644 --- a/src/data/catalog.ts +++ b/src/data/catalog.ts @@ -1827,7 +1827,7 @@ import { analytics } from '../data/site'; { name: '--slb-fade', fallback: '200ms', note: 'The crossfade under reduced motion.' }, { name: '--slb-focus', fallback: 'var(--slb-accent)', note: 'Focus ring round the card.' }, { name: '--slb-image-fg', fallback: '#fff', note: 'variant="image": text over the photo and on its tinted back.' }, - { name: '--slb-scrim', fallback: 'linear-gradient(to top, rgb(20 24 40 / 0.45), rgb(20 24 40 / 0.3) 60%, transparent)', note: 'variant="image": behind the front’s title, for 4.5:1 over the photo. Measure it per image and set it on each tile; the fallback is a starting point, not an answer (latlonguas.com’s four photos needed 0.19–0.33).' }, + { name: '--slb-scrim', fallback: 'linear-gradient(to top, rgb(20 24 40 / 0.45), rgb(20 24 40 / 0.3) 60%, transparent)', note: 'variant="image": behind the front’s title, for 4.5:1 over the photo. Measure it per image and set it on each tile; the fallback is a starting point, not an answer (latlonguas.com’s four photos needed 0.19–0.33). On shape="circle" it fills the disc instead, with its own fallback (a radial tint, 0.62 under the centred text, 0.38 at the rim); set a radial gradient or a flat colour there, not a foot gradient.' }, { name: '--slb-image-back-bg', fallback: 'rgb(20 24 40 / 0.86)', note: 'variant="image": the tint that slides in over the photo.' }, { name: '--slb-image-height', fallback: '16rem', note: 'variant="image": the card’s floor.' }, ], diff --git a/src/library/slide-box/SlideBox.astro b/src/library/slide-box/SlideBox.astro index 59fe737..a4cc5e5 100644 --- a/src/library/slide-box/SlideBox.astro +++ b/src/library/slide-box/SlideBox.astro @@ -30,7 +30,10 @@ * * The image variant's scrim. Measure `--slb-scrim` for each photo and set it on that tile; never * reuse one dark value. The fallback (0.45 at the foot) is only a starting point: on - * latlonguas.com four real photos needed 0.19–0.33, and 0.85 buried them. + * latlonguas.com four real photos needed 0.19–0.33, and 0.85 buried them. A circle's text sits + * in the middle of the disc, so its scrim fills the disc instead (the fallback is a radial + * tint, darkest under the text); `--slb-scrim` overrides it there too, as a radial gradient or a + * flat colour, not a foot gradient. * * Sizing. Both panels share one grid cell, so the card is as tall as the taller panel and * neither is cut off; there is no fixed height. The host's grid sets the width. @@ -530,11 +533,13 @@ locals.__slideBoxScript = true; .slb--circle[data-ready].slb--image .slb__front { align-content: center; } + /* The circle's scrim fills the disc, darkest under the centred text. --slb-scrim overrides it + here as well; a circle wants a radial or a flat value, not the foot gradient. */ .slb--circle[data-ready].slb--image .slb__front::after { content: ''; position: absolute; inset: 0; - background: rgb(20 24 40 / 0.35); + background: var(--slb-scrim, radial-gradient(closest-side, rgb(20 24 40 / 0.62) 55%, rgb(20 24 40 / 0.38))); } .slb--circle[data-ready] .slb__front .slb__body { position: relative;