asdf

src/components/Field.astro

@@ -0,0 +1,62 @@
+---
+/* An abstract colour field with film grain: the picture for an Insights card that has none.
+   Palette and blob positions follow from `seed` (the entry's slug), so a card keeps its field
+   wherever it appears and however the list is sorted or filtered. Slot content sits on the
+   lower edge in paper-coloured type. */
+interface Props { seed: string; class?: string }
+const { seed, class: className } = Astro.props;
+
+/* A base and three blobs per palette, chosen so neighbouring hues sit well together. */
+const palettes = [
+  ['field-plum', 'field-ember', 'field-peach', 'field-rose'],
+  ['field-cobalt', 'field-sky', 'field-lilac', 'field-peach'],
+  ['field-jade', 'field-mint', 'field-sun', 'field-sky'],
+  ['field-violet', 'field-rose', 'field-lilac', 'field-sun'],
+  ['field-ocean', 'logo-cyan', 'field-mint', 'field-ember'],
+  ['field-ember', 'field-sun', 'field-rose', 'field-peach'],
+];
+
+/* FNV-1a, then a small LCG for the positions: stable across builds and machines. */
+let h = 2166136261;
+for (const ch of seed) h = Math.imul(h ^ ch.codePointAt(0)!, 16777619) >>> 0;
+const next = () => (h = (Math.imul(h, 1664525) + 1013904223) >>> 0) / 2 ** 32;
+const [base, ...blobs] = palettes[h % palettes.length];
+const at = (lo: number, hi: number) => Math.round(lo + next() * (hi - lo));
+/* Blobs stay mostly in the upper two thirds, so the type at the bottom keeps a calmer ground. */
+const style = [`--base: var(--${base})`]
+  .concat(blobs.map((c, k) => `--c${k + 1}: var(--${c}); --x${k + 1}: ${at(0, 100)}%; --y${k + 1}: ${at(0, 70)}%`))
+  .join('; ');
+---
+<div class:list={['field', className]} style={style}>
+  <slot />
+</div>
+
+<style>
+  .field {
+    position: relative;
+    isolation: isolate;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    padding: var(--space-5);
+    background-color: var(--base);
+    background-image:
+      var(--field-scrim),
+      radial-gradient(70% 90% at var(--x1) var(--y1), var(--c1), transparent 70%),
+      radial-gradient(60% 80% at var(--x2) var(--y2), var(--c2), transparent 68%),
+      radial-gradient(85% 110% at var(--x3) var(--y3), var(--c3), transparent 72%);
+    color: var(--paper);
+  }
+  /* Film grain, coarser and stronger than on the research cards: the texture is the point. */
+  .field::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    pointer-events: none;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+    mix-blend-mode: overlay;
+    opacity: 0.75;
+  }
+</style>

src/components/home/Insights.astro

@@ -1,6 +1,7 @@
 ---
 import { getFeed } from '../../data/insights';
 import { Picture } from 'astro:assets';
+import Field from '../Field.astro';
 import { localePath, t, type Lang } from '../../i18n/ui';
 interface Props { lang: Lang }
 const { lang } = Astro.props;
@@ -20,9 +21,9 @@ const m = ui.insights.mention;
         <li class="insights__item">
           {item.kind === 'post' ? (
             <a class="insights__card" href={localePath(lang, `/insights/${item.entry.id}`)} lang={item.entry.data.lang !== lang ? item.entry.data.lang : undefined}>
-              <Picture
+              {item.entry.data.cover ? <Picture
                 src={item.entry.data.cover}
-                alt={item.entry.data.coverAlt}
+                alt={item.entry.data.coverAlt!}
                 formats={['avif']}
                 fallbackFormat="webp"
                 widths={[400, 640, 960]}
@@ -30,13 +31,13 @@ const m = ui.insights.mention;
                 loading="lazy"
                 decoding="async"
                 class="insights__img img-doc"
-              />
+              /> : <Field seed={item.entry.id} class="insights__panel"><span aria-hidden="true">{item.entry.data.category}</span></Field>}
               <p class="small muted">{item.entry.data.category}</p>
               <h3 class="h3">{item.entry.data.title}</h3>
             </a>
           ) : (
             <a class="insights__card" href={localePath(lang, `/insights/${item.entry.id}`)} lang={item.entry.data.lang !== lang ? item.entry.data.lang : undefined}>
-              <p class="insights__panel" aria-hidden="true">{item.entry.data.source}</p>
+              <Field seed={item.entry.id} class="insights__panel"><span aria-hidden="true">{item.entry.data.source}</span></Field>
               <p class="small muted">{m.category(item.entry.data.platform)}</p>
               <h3 class="h3">{item.entry.data.title}</h3>
             </a>
@@ -45,7 +46,7 @@ const m = ui.insights.mention;
       ))}
       <li class="insights__item">
         <a class="insights__card insights__card--event" href={ui.insights.event.href} rel="noopener">
-          <p class="insights__event-when">{ui.insights.event.when}</p>
+          <Field seed={ui.insights.event.href} class="insights__panel"><span>{ui.insights.event.when}</span></Field>
           <p class="small muted">{ui.insights.event.category}</p>
           <h3 class="h3">{ui.insights.event.text}</h3>
         </a>
@@ -77,14 +78,10 @@ const m = ui.insights.mention;
   .insights__card:hover h3 { text-decoration: underline; text-decoration-thickness: var(--hairline); text-underline-offset: 0.12em; }
   .insights__img, :global(.insights__img) { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; margin-bottom: var(--space-2); }
   .insights__card h3 { max-width: 18em; }
-  .insights__event-when, .insights__panel {
+  /* No picture: a colour field carries the source (or the event date) in large type. */
-    display: flex;
+  :global(.insights__panel) {
-    align-items: flex-end;
     aspect-ratio: 3 / 2;
-    padding: var(--space-5);
     margin-bottom: var(--space-2);
-    background: var(--paper-deep);
-    color: var(--ink-muted);
     font-size: var(--step-title);
     line-height: var(--leading-title);
     letter-spacing: var(--track-h2);

src/components/home/PartnerLogo.astro

@@ -0,0 +1,35 @@
+---
+/* One partner logo, two states. At rest: an ink silhouette (the image's alpha is the mask), so a
+   logo drawn for a dark ground reads as print on paper. On hover of the surrounding
+   `[data-partner]`: the original colours on night, the ground they were drawn for. */
+interface Props { name: string; src: ImageMetadata; url: string; h: string }
+const { name, src, url, h } = Astro.props;
+---
+<span class="logo" style={`--logo: url(${url}); --logo-h: ${h}; --ratio: ${src.width / src.height};`}>
+  <span class="logo__ink" aria-hidden="true"></span>
+  <img class="logo__original" src={url} alt={name} width={src.width} height={src.height} loading="lazy" decoding="async" />
+</span>
+
+<style>
+  .logo { display: grid; justify-items: start; width: 100%; }
+  /* The set height, or smaller where the column is too narrow for it. */
+  .logo > * { grid-area: 1 / 1; width: min(100%, var(--logo-h) * var(--ratio)); height: auto; aspect-ratio: var(--ratio); }
+  .logo__ink {
+    display: block;
+    background: var(--ink);
+    mask: var(--logo) left center / contain no-repeat;
+    transition: opacity var(--dur-fast) var(--ease);
+  }
+  /* Kept in the layout for its alt text; shown only on hover. */
+  .logo__original {
+    opacity: 0;
+    transition: opacity var(--dur-fast) var(--ease);
+  }
+  @media (hover: hover) {
+    :global([data-partner]:hover) .logo__ink { opacity: 0; }
+    :global([data-partner]:hover) .logo__original { opacity: 1; }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .logo__ink, .logo__original { transition: none; }
+  }
+</style>

src/components/home/Proof.astro

@@ -1,8 +1,22 @@
 ---
+import { getImage } from 'astro:assets';
 import { t, type Lang } from '../../i18n/ui';
+import PartnerLogo from './PartnerLogo.astro';
+import incubator from '../../assets/partners/xg-incubator.webp';
+import aloe from '../../assets/partners/xg-aloe.webp';
+import passau from '../../assets/partners/university-of-passau.webp';
 interface Props { lang: Lang }
 const { lang } = Astro.props;
 const ui = t(lang);
+
+/* The partner logos as on ciphercell.de (see PartnerLogo.astro for the two states). `h` balances
+   optical size: the incubator wordmark is long and thin, the other two carry a mark. */
+const roles = ui.proof.partnerRoles;
+const logos = await Promise.all([
+  { name: 'xG-Incubator', role: roles.incubator, src: incubator, h: 'var(--space-5)' },
+  { name: 'xG-ALOE', role: roles.aloe, src: aloe, h: 'var(--space-7)' },
+  { name: lang === 'de' ? 'Universität Passau' : 'University of Passau', role: roles.passau, src: passau, h: 'var(--space-7)' },
+].map(async (l) => ({ ...l, url: (await getImage({ src: l.src, format: 'webp' })).src })));
 ---
 <section class="section proof" aria-labelledby="proof-title">
   <div class="container grid">
@@ -15,6 +29,34 @@ const ui = t(lang);
         </li>
       ))}
     </ul>
+
+    <div class="partners">
+      <p class="small muted partners__label" id="partners-label">{ui.proof.partners}</p>
+      <ul class="partners__list" role="list" aria-labelledby="partners-label">
+        {logos.map((l) => (
+          <li class="partners__item" data-partner>
+            <PartnerLogo name={l.name} src={l.src} url={l.url} h={l.h} />
+          </li>
+        ))}
+      </ul>
+    </div>
+
+    {/* Variant B, for comparison: one column per partner across the full width, with its role.
+        Keep one of the two and delete the other. */}
+    <div class="partners-b">
+      <p class="small muted" id="partners-b-label">{ui.proof.partners}</p>
+      <ul class="partners-b__list" role="list" aria-labelledby="partners-b-label">
+        {logos.map((l) => (
+          <li class="partners-b__item" data-partner>
+            <PartnerLogo name={l.name} src={l.src} url={l.url} h={l.h} />
+            <p class="partners-b__text">
+              <span class="partners-b__name">{l.name}</span>
+              <span class="small partners-b__role">{l.role}</span>
+            </p>
+          </li>
+        ))}
+      </ul>
+    </div>
   </div>
 </section>
 
@@ -31,9 +73,63 @@ const ui = t(lang);
   .proof__item:last-child { border-bottom: var(--hairline) solid var(--line); }
   .proof__name { font-weight: var(--weight-medium); }
   .proof__body { max-width: 30em; }
+
+  .partners {
+    grid-column: 1 / -1;
+    margin-top: var(--space-9);
+    display: grid;
+    gap: var(--space-5);
+  }
+  .partners__list {
+    display: grid;
+    border-top: var(--hairline) solid var(--line);
+  }
+  .partners__item {
+    display: flex;
+    align-items: center;
+    min-height: var(--space-9);
+    padding: var(--space-5) var(--space-4);
+    border-bottom: var(--hairline) solid var(--line);
+  }
+  /* Hover answers the pointer with the logo's own ground: night, original colours. */
+  [data-partner] { transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
+  @media (hover: hover) {
+    [data-partner]:hover { background-color: var(--night); color: var(--ink-on-night); }
+  }
+  @media (prefers-reduced-motion: reduce) { [data-partner] { transition: none; } }
+
+  /* Variant B */
+  .partners-b {
+    grid-column: 1 / -1;
+    margin-top: var(--space-9);
+    display: grid;
+    gap: var(--space-5);
+  }
+  .partners-b__list { display: grid; border-top: var(--hairline) solid var(--line); }
+  .partners-b__item {
+    display: grid;
+    align-content: space-between;
+    gap: var(--space-7);
+    min-height: calc(var(--space-9) * 2.5);
+    padding: var(--space-6) var(--space-5);
+    border-bottom: var(--hairline) solid var(--line);
+  }
+  .partners-b__text { display: grid; gap: var(--space-1); }
+  .partners-b__name { font-weight: var(--weight-medium); }
+  .partners-b__role { color: var(--ink-muted); transition: color var(--dur-fast) var(--ease); }
+  @media (hover: hover) {
+    .partners-b__item:hover .partners-b__role { color: var(--ink-muted-on-night); }
+  }
+
   @media (min-width: 48rem) {
     .proof__title { grid-column: 1 / span 6; }
     .proof__list { grid-column: 7 / span 6; }
     .proof__item { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); column-gap: var(--gap); }
+    .partners { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
+    .partners__label { grid-column: 1 / span 6; padding-top: var(--space-5); }
+    .partners__list { grid-column: 7 / span 6; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); }
+    .partners-b__list { grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: var(--hairline) solid var(--line); }
+    .partners-b__item { border-bottom: 0; }
+    .partners-b__item + .partners-b__item { border-left: var(--hairline) solid var(--line); }
   }
 </style>

src/content.config.ts

@@ -15,10 +15,12 @@ const insights = defineCollection({
       readingTime: z.number().int().positive(),
       author: z.string(),
       authorRole: z.string(),
-      cover: image(),
+      /* Optional: without a cover the cards show a colour field (src/components/Field.astro)
-      coverAlt: z.string(),
+         and the essay page opens without an image. */
+      cover: image().optional(),
+      coverAlt: z.string().optional(),
       tags: z.array(z.string()).default([]),
-    }),
+    }).refine((d) => !d.cover || d.coverAlt, { message: 'coverAlt is required with a cover', path: ['coverAlt'] }),
 });
 
 /* Mentions: short references to posts elsewhere (LinkedIn first) that CipherCell took part in.

src/pages/_InsightsIndex.astro

@@ -2,6 +2,7 @@
 import { feedType, feedTypes, getFeed } from '../data/insights';
 import { Picture } from 'astro:assets';
 import Base from '../layouts/Base.astro';
+import Field from '../components/Field.astro';
 import { formatDate, localePath, t, type Lang } from '../i18n/ui';
 
 interface Props { lang: Lang }
@@ -45,10 +46,11 @@ const filters = [
         {feed.map((item) => item.kind === 'post' ? (
           <li class="post" data-type={feedType(item)}>
             <a class="post__link" href={localePath(lang, `/insights/${item.entry.id}`)} lang={item.entry.data.lang !== lang ? item.entry.data.lang : undefined}>
+              {item.entry.data.cover ? (
                 <div class="post__media">
                   <Picture
                     src={item.entry.data.cover}
-                  alt={item.entry.data.coverAlt}
+                    alt={item.entry.data.coverAlt!}
                     formats={['avif']}
                     fallbackFormat="webp"
                     widths={[400, 640, 960]}
@@ -58,6 +60,11 @@ const filters = [
                     class="post__img img-doc"
                   />
                 </div>
+              ) : (
+                <Field seed={item.entry.id} class="post__media post__field">
+                  <span class="field__title" aria-hidden="true">{item.entry.data.category}</span>
+                </Field>
+              )}
               <div class="post__text">
                 <p class="small muted post__meta">
                   <span>{item.entry.data.category}</span>
@@ -73,10 +80,10 @@ const filters = [
         ) : (
           <li class="post" data-type={feedType(item)}>
             <a class="post__link" href={localePath(lang, `/insights/${item.entry.id}`)} lang={item.entry.data.lang !== lang ? item.entry.data.lang : undefined}>
-              <div class="post__media mention__panel" aria-hidden="true">
+              <Field seed={item.entry.id} class="post__media post__field">
-                <span class="mention__source">{item.entry.data.source}</span>
+                <span class="field__title" aria-hidden="true">{item.entry.data.source}</span>
-                <span class="mention__platform">{item.entry.data.platform}</span>
+                <span class="field__meta" aria-hidden="true">{item.entry.data.platform}</span>
-              </div>
+              </Field>
               <div class="post__text">
                 <p class="small muted post__meta">
                   <span>{m.category(item.entry.data.platform)}</span>
@@ -141,17 +148,10 @@ const filters = [
   .post__img, :global(.post__img) { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
   .post__text { display: grid; gap: var(--space-4); align-content: start; }
   .post__meta { display: flex; flex-wrap: wrap; gap: var(--space-4); }
-  /* A mention has no cover: a typographic panel names who posted it and where. */
+  /* No cover (every mention, an essay without one): a colour field names who posted it and where. */
-  .mention__panel {
+  :global(.post__field) { aspect-ratio: 3 / 2; gap: var(--space-2); }
-    display: flex;
+  :global(.post__field) .field__title { font-size: var(--step-title); line-height: var(--leading-title); letter-spacing: var(--track-h2); }
-    flex-direction: column;
+  :global(.post__field) .field__meta { font-size: var(--step-small); line-height: var(--leading-small); }
-    justify-content: space-between;
-    aspect-ratio: 3 / 2;
-    padding: var(--space-5);
-    background: var(--paper-deep);
-  }
-  .mention__source { font-size: var(--step-title); line-height: var(--leading-title); letter-spacing: var(--track-h2); color: var(--ink-muted); }
-  .mention__platform { font-size: var(--step-small); line-height: var(--leading-small); color: var(--ink-muted); }
   .mention__summary { max-width: var(--measure); }
   @media (min-width: 48rem) {
     .post__link { grid-template-columns: 5fr 7fr; }

src/pages/_Post.astro

@@ -31,10 +31,10 @@ const d = post.data;
       </div>
     </header>
 
-    <div class="container">
+    {d.cover && <div class="container">
       <Picture
         src={d.cover}
-        alt={d.coverAlt}
+        alt={d.coverAlt!}
         formats={['avif']}
       fallbackFormat="webp"
         widths={[640, 960, 1440, 1920]}
@@ -43,7 +43,7 @@ const d = post.data;
         decoding="async"
         class="post__cover img-doc"
       />
-    </div>
+    </div>}
 
     <div class="section container grid">
       <div class="prose post__body">

src/styles/tokens.css

@@ -29,6 +29,18 @@
   --field-jade:    #3B8C78;
   --field-slate:   #3A4862;
   --field-plum:    #66508E;
+  /* Warmer tones for the Insights card fields (cards without a picture), so the feed reads as
+     colour rather than paper. Fields only, never text or UI. Combined in src/components/Field.astro. */
+  --field-ember:  #DE5B32;
+  --field-peach:  #F2AE84;
+  --field-rose:   #D4547C;
+  --field-violet: #6E4FCF;
+  --field-lilac:  #B7A1EE;
+  --field-sun:    #EFB443;
+  --field-mint:   #86CFB0;
+  --field-sky:    #6AAEE8;
+  /* Darkens the lower edge of a field so paper-coloured type on it holds 3:1 or better. */
+  --field-scrim: linear-gradient(to top, rgb(14 16 15 / 0.55), rgb(14 16 15 / 0) 65%);
 
   /* Signal: the one status tone the brief allows. Used only for a live state (the coming-soon
      page's current phase), at most twice per page. Never for text, links or decoration. */