@jjlmoya/utils-science 1.53.0 → 1.55.0

package/src/layouts/ProductionCategoryPage.astro

@@ -0,0 +1,184 @@
+---
+import ProductionPage from "./ProductionPage.astro";
+import { Icon } from "astro-icon/components";
+import { SEORenderer } from "@jjlmoya/utils-shared";
+import ProductionBreadcrumb from "../components/ProductionBreadcrumb.astro";
+import type { KnownLocale, CategoryLocaleContent } from "../types";
+import { getCategoryPath } from "../mfe/routes";
+import { getCategoryUi } from "../mfe/category-ui";
+
+interface CategoryTool { id: string; icon: string; title: string; description: string; href: string; }
+interface Props { locale: KnownLocale; category: CategoryLocaleContent; tools: CategoryTool[]; alternates: { language: KnownLocale; url: string }[]; image?: string | undefined; }
+const { locale, category, tools, alternates, image } = Astro.props;
+const publicPath = getCategoryPath(locale, category.slug);
+const ui = getCategoryUi(locale);
+---
+
+<ProductionPage title={category.title} description={category.description} {locale} {publicPath} {alternates} {image}>
+  <div class="category-production">
+    <div class="category-production-inner">
+      <ProductionBreadcrumb locale={locale} currentTitle={category.title} />
+      <header class="category-header-production">
+        <h1>{category.title}</h1><p>{category.description}</p>
+      </header>
+      <div class="category-tools-grid">
+        {tools.map((tool, index) => (
+          <a href={tool.href} class="category-tool-card">
+            <span class="category-tool-index">{String(index + 1).padStart(2, "0")}</span>
+            <div class="category-tool-icon"><Icon name={tool.icon} /></div>
+            <h2>{tool.title}</h2><p>{tool.description}</p>
+            <span class="category-tool-cta">{ui.useTool} <span aria-hidden="true">→</span></span>
+          </a>
+        ))}
+      </div>
+      <section class="category-seo-production"><SEORenderer content={{ locale, sections: category.seo }} /></section>
+    </div>
+  </div>
+</ProductionPage>
+
+<style>
+  .category-production {
+    min-height: 100vh;
+    overflow-x: clip;
+    background: radial-gradient(ellipse at top, var(--primary-10), var(--bg-surface) 50%, var(--bg-main));
+  }
+
+  .category-production-inner {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: var(--space-xl) var(--space-md) var(--space-4xl);
+  }
+
+  .category-header-production {
+    margin-bottom: var(--space-xl);
+    text-align: center;
+  }
+
+  .category-header-production h1 {
+    margin: 0;
+    color: var(--text-main);
+    font-size: clamp(3.5rem, 9vw, 7rem);
+    font-weight: 900;
+    letter-spacing: -0.06em;
+    line-height: 0.95;
+    text-transform: lowercase;
+  }
+
+  .category-header-production p {
+    max-width: 48rem;
+    margin: 1rem auto 0;
+    color: var(--text-muted);
+    font-size: 1.25rem;
+    line-height: 1.6;
+  }
+
+  .category-tools-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: var(--space-lg);
+    margin-bottom: var(--space-4xl);
+  }
+
+  .category-tool-card {
+    position: relative;
+    display: flex;
+    overflow: hidden;
+    min-height: 230px;
+    flex-direction: column;
+    padding: var(--space-lg);
+    border: 1px solid color-mix(in srgb, var(--science-accent) 18%, var(--border-base));
+    border-radius: 1.25rem;
+    background: linear-gradient(145deg, var(--bg-surface), color-mix(in srgb, var(--science-accent) 4%, var(--bg-surface)));
+    color: inherit;
+    text-decoration: none;
+    box-shadow: 0 1rem 2rem color-mix(in srgb, var(--shadow-base, #000) 35%, transparent);
+    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
+  }
+
+  .category-tool-card:hover,
+  .category-tool-card:focus-visible {
+    border-color: var(--science-accent);
+    box-shadow: 0 1.25rem 2.5rem color-mix(in srgb, var(--science-accent) 18%, transparent);
+    transform: translateY(-4px);
+  }
+
+  .category-tool-card:focus-visible {
+    outline: 3px solid color-mix(in srgb, var(--science-accent) 55%, transparent);
+    outline-offset: 4px;
+  }
+
+  .category-tool-card::after {
+    position: absolute;
+    right: -2rem;
+    bottom: -3rem;
+    width: 9rem;
+    height: 9rem;
+    border-radius: 50%;
+    background: color-mix(in srgb, var(--science-accent) 10%, transparent);
+    content: "";
+    pointer-events: none;
+  }
+
+  .category-tool-icon {
+    position: relative;
+    z-index: 1;
+    display: grid;
+    width: 3.25rem;
+    height: 3.25rem;
+    place-items: center;
+    margin-bottom: var(--space-md);
+    border: 1px solid color-mix(in srgb, var(--science-accent) 28%, transparent);
+    border-radius: 1rem;
+    background: color-mix(in srgb, var(--science-accent) 12%, var(--bg-surface));
+    color: var(--science-accent);
+    font-size: 1.6rem;
+  }
+
+  .category-tool-index {
+    position: absolute;
+    top: var(--space-md);
+    right: var(--space-lg);
+    color: var(--text-dimmed, var(--text-muted));
+    font-family: ui-monospace, SFMono-Regular, monospace;
+    font-size: 0.72rem;
+    letter-spacing: 0.12em;
+  }
+
+  .category-tool-card h2,
+  .category-tool-card p,
+  .category-tool-cta {
+    position: relative;
+    z-index: 1;
+  }
+
+  .category-tool-card h2 {
+    margin: 0 0 0.5rem;
+    color: var(--text-main);
+    font-size: 1.25rem;
+  }
+
+  .category-tool-card p {
+    margin: 0;
+    color: var(--text-muted);
+    line-height: 1.55;
+  }
+
+  .category-tool-cta {
+    margin-top: auto;
+    padding-top: var(--space-md);
+    color: var(--science-accent);
+    font-weight: 700;
+  }
+
+  .category-seo-production {
+    max-width: 56rem;
+    margin: 0 auto;
+    font-size: 1.125rem;
+    line-height: 1.75;
+  }
+
+  @media (width <= 768px) {
+    .category-production-inner { padding: var(--space-lg) var(--space-sm) var(--space-3xl); }
+    .category-tools-grid { grid-template-columns: 1fr; }
+  }
+</style>

package/src/layouts/ProductionPage.astro

@@ -0,0 +1,218 @@
+---
+import Footer from "@jjlmoya/identity/footer";
+import Header from "@jjlmoya/identity/header";
+import LanguageSheet from "@jjlmoya/identity/language-sheet";
+import LanguageTrigger from "@jjlmoya/identity/language-trigger";
+import ThemeBoot from "@jjlmoya/identity/theme-boot";
+import { getSiteNavigation } from "@jjlmoya/identity/navigation";
+import "@jjlmoya/identity/styles.css";
+import "@jjlmoya/utils-shared/theme.css";
+import "@jjlmoya/utils-shared/styles/jjlmoya-shared.css";
+import { HEADER_UI } from "../i18n/header-ui";
+import { LANGUAGE_LOCALES, LANGUAGE_NAMES, type Language } from "../i18n/languages";
+import { LANGUAGE_UI } from "../i18n/language-ui";
+import { getBrand } from "../identity/brands";
+import { getBrandAssetPath } from "../mfe/assets";
+
+interface AlternateLink { language: Language; url: string; }
+interface Props {
+    title: string;
+    description: string;
+    locale: Language;
+    image?: string | undefined;
+    toolCss?: string | undefined;
+    publicPath: string;
+    manifestPath?: string | undefined;
+    alternates: readonly AlternateLink[];
+}
+
+const { title, description, locale, image, toolCss, publicPath, manifestPath, alternates } = Astro.props;
+const brand = getBrand(locale);
+const brandFavicon = getBrandAssetPath(brand, "favicon");
+const brandSizedFavicon = getBrandAssetPath(brand, "faviconSized");
+const brandAppleTouchIcon = getBrandAssetPath(brand, "appleTouchIcon");
+const origin = brand === "jjlmoya" ? "https://www.jjlmoya.es" : "https://www.gamebob.dev";
+const canonical = new URL(publicPath, origin).href;
+const socialImage = image ? new URL(image, canonical).href : undefined;
+const languageUi = LANGUAGE_UI[locale];
+const absoluteUrl = (language: Language, url: string): string => {
+    if (import.meta.env.DEV) return new URL(url, "http://localhost:4324").pathname;
+    return new URL(
+        url,
+        language === "es" ? "https://www.jjlmoya.es" : "https://www.gamebob.dev",
+    ).href;
+};
+const languageLinks = alternates.map(({ language, url }) => ({
+    code: language,
+    name: LANGUAGE_NAMES[language],
+    href: absoluteUrl(language, url),
+    current: language === locale,
+}));
+const homeUrl = brand === "jjlmoya" ? "https://www.jjlmoya.es/" : `https://www.gamebob.dev/${locale}/`;
+const openGraphLocale = LANGUAGE_LOCALES[locale].replace("-", "_");
+const xDefaultUrl = alternates.find(({ language }) => language === "en")?.url ?? canonical;
+---
+
+<!doctype html>
+<html lang={locale} data-brand={brand}>
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <ThemeBoot defaultTheme={brand === "gamebob" ? "theme-dark" : "theme-system"} />
+        <title>{title}</title>
+        <meta name="title" content={title} />
+        <meta name="description" content={description} />
+        <meta name="author" content="jjlmoya" />
+        <meta name="robots" content="index, follow, max-image-preview:large" />
+        <meta name="referrer" content="strict-origin-when-cross-origin" />
+        <link rel="icon" type="image/x-icon" href={brandFavicon} />
+        <link rel="icon" type="image/webp" sizes={brand === "jjlmoya" ? "32x32" : "48x48"} href={brandSizedFavicon} />
+        <link rel="apple-touch-icon" href={brandAppleTouchIcon} />
+        {manifestPath && <link rel="manifest" href={manifestPath} />}
+        <link rel="canonical" href={canonical} />
+        {alternates.map(({ language, url }) => <link rel="alternate" hreflang={language} href={absoluteUrl(language, url)} />)}
+        <link rel="alternate" hreflang="x-default" href={absoluteUrl("en", xDefaultUrl)} />
+        {toolCss && <link rel="stylesheet" href={toolCss} />}
+        <meta property="og:type" content="website" />
+        <meta property="og:url" content={canonical} />
+        <meta property="og:title" content={title} />
+        <meta property="og:description" content={description} />
+        <meta property="og:site_name" content={brand === "jjlmoya" ? "jjlmoya" : "GameBob Studio"} />
+        <meta property="og:locale" content={openGraphLocale} />
+        {socialImage && <meta property="og:image" content={socialImage} />}
+        {socialImage && <meta property="og:image:secure_url" content={socialImage} />}
+        {socialImage && <meta property="og:image:type" content="image/webp" />}
+        {socialImage && <meta property="og:image:width" content="1200" />}
+        {socialImage && <meta property="og:image:height" content="630" />}
+        {socialImage && <meta property="og:image:alt" content={description} />}
+        <meta name="twitter:card" content={socialImage ? "summary_large_image" : "summary"} />
+        <meta name="twitter:url" content={canonical} />
+        <meta name="twitter:title" content={title} />
+        <meta name="twitter:description" content={description} />
+        {socialImage && <meta name="twitter:image" content={socialImage} />}
+        <script is:inline type="application/ld+json" set:html={JSON.stringify({
+            "@context": "https://schema.org",
+            "@type": "WebPage",
+            url: canonical,
+            name: title,
+            description,
+            inLanguage: LANGUAGE_LOCALES[locale],
+        })} />
+        <script>
+            import { installEcosystemTracking } from "@jjlmoya/tracking";
+            installEcosystemTracking();
+        </script>
+        <slot name="head" />
+    </head>
+    <body class="production-page">
+        <Header
+            class="utilities-site-header"
+            identity={brand}
+            {homeUrl}
+            navigation={getSiteNavigation({ language: locale, activeSection: "utilities" })}
+            labels={HEADER_UI[locale]}
+        >
+            <LanguageTrigger slot="desktop-actions" label={languageUi.change} />
+            <LanguageTrigger slot="mobile-actions" label={languageUi.change} />
+        </Header>
+        <LanguageSheet links={languageLinks} title={languageUi.select} closeLabel={languageUi.close} />
+        <main><slot /></main>
+        <Footer class="utilities-site-footer" identity={brand} language={locale} />
+    </body>
+</html>
+
+<style is:global>
+    :root {
+        --science-accent: #10b981;
+        --science-accent-strong: #0d9488;
+        --color-brand-blue: #1ddabc;
+        --color-brand-dark: #000;
+        --color-brand-white: #fff;
+        --color-primary: var(--color-brand-blue);
+        --color-primary-rgb: 29, 218, 188;
+        --space-2xs: 0.125rem;
+        --space-xs: 0.25rem;
+        --space-sm: 0.5rem;
+        --space-base: 0.75rem;
+        --space-md: 1rem;
+        --space-md-lg: 1.25rem;
+        --space-lg: 1.5rem;
+        --space-xl: 2rem;
+        --space-1-5xl: 2.5rem;
+        --space-2xl: 3rem;
+        --space-3xl: 4rem;
+        --space-4xl: 6rem;
+        --space-3-5xl: 5rem;
+        --radius-base: 0.5rem;
+        --radius-lg: 1rem;
+        --radius-2xl: 2rem;
+        --radius-full: 9999px;
+        --font-family: inter, system-ui, sans-serif;
+        --font-weight-bold: 800;
+        --color-white: #fff;
+    }
+
+    :root,
+    .theme-light {
+        --bg-main: #f0f4f8;
+        --bg-page: #f0f4f8;
+        --bg-surface: #fff;
+        --bg-muted: #f1f5f9;
+        --text-main: #000;
+        --text-base: #000;
+        --text-muted: #4a5568;
+        --text-dimmed: #64748b;
+        --border-base: #e2e8f0;
+        --border-color: #e2e8f0;
+        --glass-bg: rgba(0, 0, 0, 0.05);
+        --glass-border: rgba(0, 0, 0, 0.1);
+        --shadow-base: rgba(0, 0, 0, 0.05);
+        --shadow-hover: rgba(0, 0, 0, 0.1);
+        --primary: var(--color-primary);
+        --primary-10: rgba(29, 218, 188, 0.1);
+    }
+
+    .theme-dark {
+        --bg-main: #000;
+        --bg-page: #000;
+        --bg-surface: #0f172a;
+        --bg-muted: #1e293b;
+        --text-main: #fff;
+        --text-base: #fff;
+        --text-muted: #94a3b8;
+        --text-dimmed: #64748b;
+        --border-base: #1e293b;
+        --border-color: #1e293b;
+        --glass-bg: rgba(255, 255, 255, 0.03);
+        --glass-border: rgba(255, 255, 255, 0.08);
+        --shadow-base: rgba(0, 0, 0, 0.3);
+        --shadow-hover: rgba(0, 0, 0, 0.4);
+        --primary: var(--color-primary);
+        --primary-10: rgba(29, 218, 188, 0.1);
+    }
+
+    *, *::before, *::after {
+        box-sizing: border-box;
+    }
+
+    html {
+        background: var(--bg-main);
+        color: var(--text-main);
+        scroll-behavior: smooth;
+    }
+
+    body.production-page {
+        min-width: 320px;
+        min-height: 100vh;
+        margin: 0;
+        padding-top: 4.5rem;
+        background: var(--bg-main);
+        color: var(--text-main);
+        font-family: var(--font-family, Inter, system-ui, sans-serif);
+    }
+
+    body.production-page main {
+        width: 100%;
+        min-height: 100vh;
+    }
+</style>

package/src/layouts/ProductionUtilityPage.astro

@@ -0,0 +1,283 @@
+---
+import ProductionPage from "./ProductionPage.astro";
+import { FAQSection, UtilityHeader } from "@jjlmoya/utils-shared";
+import { Icon } from "astro-icon/components";
+import ProductionBreadcrumb from "../components/ProductionBreadcrumb.astro";
+import ProductionWidget from "../components/ProductionWidget.astro";
+import ProductionStructuredData from "../components/ProductionStructuredData.astro";
+import type { KnownLocale, ToolLocaleContent } from "../types";
+import { getCategoryUi } from "../mfe/category-ui";
+import { getCategoryPath, getUtilityPath } from "../mfe/routes";
+import { getUtilityCssPath, TABLETOP_ASSET_VERSION } from "../mfe/assets";
+import type { AstroComponentFactory } from "astro/runtime/server/index.js";
+
+interface RelatedTool { title: string; description: string; href: string; icon: string; }
+interface Props { locale: KnownLocale; content: ToolLocaleContent; englishSlug: string; categoryTitle: string; categorySlug: string; categoryHref: string; relatedTools: RelatedTool[]; Component: AstroComponentFactory; SEOComponent: AstroComponentFactory; BibliographyComponent: AstroComponentFactory; alternates: { language: KnownLocale; url: string }[]; image?: string | undefined; }
+const { locale, content, englishSlug, categoryTitle, categorySlug, categoryHref, relatedTools, Component, SEOComponent, BibliographyComponent, alternates, image } = Astro.props;
+const words = content.title.split(/\s+/).filter(Boolean);
+const titleHighlight = words[0] ?? content.title;
+const titleBase = words.slice(1).join(" ");
+const publicPath = getUtilityPath(locale, categorySlug, content.slug);
+const publicCategoryPath = getCategoryPath(locale, categorySlug);
+const ui = getCategoryUi(locale);
+---
+
+<ProductionPage title={content.title} description={content.description} {locale} {publicPath} manifestPath={`${publicPath}manifest.json?version=${TABLETOP_ASSET_VERSION}`} {alternates} {image} toolCss={getUtilityCssPath(englishSlug)}>
+  <div class="utility-production">
+    <div class="utility-production-inner">
+      <ProductionBreadcrumb locale={locale} categoryTitle={categoryTitle} categoryHref={categoryHref || publicCategoryPath} currentTitle={content.title} />
+      <UtilityHeader titleHighlight={titleHighlight} titleBase={titleBase} description={content.description} gradientFrom="#10b981" gradientTo="#0d9488" />
+      <section class="utility-tool-production"><Component ui={content.ui} locale={locale} /></section>
+      <div class="utility-zoom-production" aria-label={ui.zoomControls}>
+        <span class="utility-zoom-label">{ui.zoom}</span>
+        <div class="utility-zoom-controls"><button type="button" data-zoom="out" aria-label={ui.zoomOut}>−</button><button type="button" data-zoom="reset" aria-label={ui.resetZoom}>100%</button><button type="button" data-zoom="in" aria-label={ui.zoomIn}>+</button></div>
+      </div>
+      <ProductionWidget locale={locale} slug={content.slug} />
+      {content.faq.length > 0 && <section class="utility-section-production"><FAQSection items={content.faq} /></section>}
+      <Fragment slot="head">
+        <ProductionStructuredData locale={locale} {content} {publicPath} categoryTitle={categoryTitle} categoryHref={categoryHref || publicCategoryPath} />
+      </Fragment>
+      <section class="utility-section-production"><SEOComponent locale={locale} /></section>
+      {content.bibliography.length > 0 && <section class="utility-section-production"><BibliographyComponent locale={locale} /></section>}
+      {relatedTools.length > 0 && <section class="utility-related-production" aria-labelledby="related-tools-title"><div class="utility-related-heading"><span class="utility-related-eyebrow">{ui.relatedEyebrow}</span><h2 id="related-tools-title">{ui.moreToolsIn} {categoryTitle}</h2></div><div class="utility-related-grid">{relatedTools.map((tool, index) => <a href={tool.href} class="utility-related-card"><span class="utility-related-index">{String(index + 1).padStart(2, "0")}</span><span class="utility-related-icon"><Icon name={tool.icon} /></span><h3>{tool.title}</h3><p>{tool.description}</p><span class="utility-related-cta">{ui.openTool} <Icon name="mdi:arrow-top-right" /></span></a>)}</div></section>}
+    </div>
+  </div>
+</ProductionPage>
+
+<script>
+  const isWidget = new URLSearchParams(window.location.search).get("widget") === "true";
+  const page = document.querySelector<HTMLElement>(".utility-production");
+  const container = document.querySelector<HTMLElement>(".utility-tool-production");
+  const zoomButton = document.querySelector<HTMLButtonElement>('[data-zoom="reset"]');
+  const storedZoom = isWidget ? 1 : Number(localStorage.getItem("gamebob-utility-zoom") ?? 1);
+  let zoom = Number.isFinite(storedZoom) ? Math.min(1.5, Math.max(0.75, storedZoom)) : 1;
+  const applyZoom = () => {
+    if (container) container.style.zoom = String(zoom);
+    if (zoomButton) zoomButton.textContent = `${Math.round(zoom * 100)}%`;
+  };
+  document.querySelector('[data-zoom="out"]')?.addEventListener("click", () => { zoom = Math.max(0.75, zoom - 0.1); applyZoom(); localStorage.setItem("gamebob-utility-zoom", String(zoom)); });
+  document.querySelector('[data-zoom="in"]')?.addEventListener("click", () => { zoom = Math.min(1.5, zoom + 0.1); applyZoom(); localStorage.setItem("gamebob-utility-zoom", String(zoom)); });
+  document.querySelector('[data-zoom="reset"]')?.addEventListener("click", () => { zoom = 1; applyZoom(); localStorage.removeItem("gamebob-utility-zoom"); });
+  if (isWidget) {
+    document.body.classList.add("utility-widget-body");
+    if (page) {
+      page.classList.add("utility-widget-mode");
+    }
+  }
+  applyZoom();
+</script>
+
+<style>
+  .utility-production {
+    min-height: 100vh;
+    overflow-x: clip;
+    background: radial-gradient(ellipse at top, var(--primary-10), var(--bg-surface) 50%, var(--bg-main));
+  }
+
+  .utility-production.utility-widget-mode {
+    min-height: auto;
+    background: transparent;
+  }
+
+  .utility-production.utility-widget-mode .utility-production-inner {
+    max-width: none;
+    padding: 0;
+  }
+
+  .utility-production.utility-widget-mode .utility-tool-production {
+    margin-top: 0;
+  }
+
+  .utility-production.utility-widget-mode .utility-production-inner > :not(.utility-tool-production) {
+    display: none;
+  }
+
+  :global(body.utility-widget-body) {
+    margin: 0;
+    padding-top: 0;
+    background: transparent;
+  }
+
+  :global(body.utility-widget-body > :not(main)) {
+    display: none;
+  }
+
+  :global(body.utility-widget-body main), :global(body.utility-widget-body main .utility-production), :global(body.utility-widget-body main .utility-production-inner) {
+    min-height: auto;
+  }
+
+  .utility-production-inner {
+    max-width: 72rem;
+    margin: 0 auto;
+    padding: var(--space-xl) var(--space-lg) var(--space-4xl);
+  }
+
+  .utility-tool-production {
+    width: 100%;
+    margin-top: var(--space-2xl);
+  }
+
+  .utility-zoom-production {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.75rem;
+    margin: var(--space-xl) auto 0;
+    color: var(--text-muted);
+    font-size: 0.8rem;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+  }
+
+  .utility-zoom-controls {
+    display: inline-flex;
+    overflow: hidden;
+    border: 1px solid var(--border-base);
+    border-radius: 0.75rem;
+    background: color-mix(in srgb, var(--bg-surface) 90%, transparent);
+    box-shadow: 0 0.5rem 1.5rem color-mix(in srgb, var(--shadow-base, #000) 35%, transparent);
+  }
+
+  .utility-zoom-production button {
+    min-width: 2.5rem;
+    border: 0;
+    border-right: 1px solid var(--border-base);
+    padding: 0.5rem 0.75rem;
+    background: transparent;
+    color: var(--text-main);
+    cursor: pointer;
+    font-size: 1rem;
+  }
+  .utility-zoom-production button:last-child { border-right: 0; }
+
+  .utility-zoom-production button:hover,
+  .utility-zoom-production button:focus-visible {
+    background: color-mix(in srgb, var(--science-accent) 12%, transparent);
+    color: var(--science-accent);
+  }
+
+  .utility-section-production, .utility-related-production {
+    max-width: 56rem;
+    margin: var(--space-4xl) auto 0;
+  }
+
+  .utility-section-production {
+    font-size: 1.125rem;
+    line-height: 1.75;
+  }
+
+  .utility-related-heading {
+    margin-bottom: var(--space-lg);
+    text-align: center;
+  }
+
+  .utility-related-eyebrow {
+    display: block;
+    margin-bottom: 0.45rem;
+    color: var(--science-accent);
+    font-size: 0.75rem;
+    font-weight: 800;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+  }
+
+  .utility-related-production h2 {
+    margin: 0;
+    color: var(--text-main);
+    font-size: clamp(1.75rem, 4vw, 2.5rem);
+  }
+
+  .utility-related-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 1rem;
+  }
+
+  .utility-related-card {
+    position: relative;
+    display: flex;
+    min-height: 238px;
+    flex-direction: column;
+    overflow: hidden;
+    padding: 1.25rem;
+    border: 1px solid color-mix(in srgb, var(--science-accent) 18%, var(--border-base));
+    border-radius: 1rem;
+    background: linear-gradient(145deg, var(--bg-surface), color-mix(in srgb, var(--science-accent) 4%, var(--bg-surface)));
+    color: inherit;
+    text-decoration: none;
+    box-shadow: 0 0.75rem 1.75rem color-mix(in srgb, var(--shadow-base, #000) 30%, transparent);
+    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
+  }
+
+  .utility-related-card:hover,
+  .utility-related-card:focus-visible {
+    border-color: var(--science-accent);
+    box-shadow: 0 1rem 2rem color-mix(in srgb, var(--science-accent) 16%, transparent);
+    transform: translateY(-3px);
+  }
+
+  .utility-related-card:focus-visible {
+    outline: 3px solid color-mix(in srgb, var(--science-accent) 55%, transparent);
+    outline-offset: 3px;
+  }
+
+  .utility-related-index {
+    position: absolute;
+    top: 1.25rem;
+    right: 1.25rem;
+    color: var(--text-dimmed, var(--text-muted));
+    font-family: ui-monospace, SFMono-Regular, monospace;
+    font-size: 0.7rem;
+    letter-spacing: 0.12em;
+  }
+
+  .utility-related-icon {
+    display: grid;
+    width: 2.75rem;
+    height: 2.75rem;
+    place-items: center;
+    margin-bottom: 1rem;
+    border: 1px solid color-mix(in srgb, var(--science-accent) 28%, transparent);
+    border-radius: 0.8rem;
+    background: color-mix(in srgb, var(--science-accent) 12%, var(--bg-surface));
+    color: var(--science-accent);
+    font-size: 1.35rem;
+  }
+
+  .utility-related-card h3 {
+    margin: 0 0 0.5rem;
+    color: var(--text-main);
+    font-size: 1rem;
+  }
+
+  .utility-related-card p {
+    margin: 0 0 1rem;
+    color: var(--text-muted);
+    font-size: 0.9rem;
+    line-height: 1.5;
+  }
+
+  .utility-related-cta {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+    margin-top: auto;
+    color: var(--science-accent);
+    font-size: 0.75rem;
+    font-weight: 800;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+  }
+
+  .utility-related-cta svg {
+    width: 1rem;
+    height: 1rem;
+    transition: transform 0.2s ease;
+  }
+  .utility-related-card:hover .utility-related-cta svg { transform: translate(2px, -2px); }
+
+  @media (width <= 640px) {
+    .utility-production-inner { padding: var(--space-lg) var(--space-sm) var(--space-3xl); }
+  }
+</style>