@press2ai/theme-specialist-glossy 0.3.0 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@press2ai/theme-specialist-glossy",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Classless, AI-first theme inspired by Stripe. Framework-agnostic templates (Hono, Astro, raw HTML). Semantic HTML, Schema.org microdata, JSON-LD — built for LLM crawlers.",
   "type": "module",
   "license": "MIT",
@@ -30,6 +30,7 @@
   "exports": {
     ".": "./src/index.ts",
     "./templates": "./src/templates/index.ts",
+    "./catalog": "./src/templates/catalog.ts",
     "./Layout.astro": "./src/components/Layout.astro",
     "./ProfileArticle.astro": "./src/components/ProfileArticle.astro",
     "./ProfileCard.astro": "./src/components/ProfileCard.astro",

package/src/styles/glossy.css

@@ -1,498 +1,271 @@
-/* ============================================================
-   Otwarty Trener — theme: "stripe"
-   Classless. Stylowanie po tagach semantycznych.
-   Inspiracja: Stripe / Revolut — clean, bold, dużo whitespace.
-   ============================================================ */
-
 @import url('https://rsms.me/inter/inter.css');
 
 :root {
-  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-  --font-display: 'Inter', sans-serif;
-
-  --color-bg: #ffffff;
-  --color-bg-soft: #f6f9fc;
-  --color-text: #0a2540;
-  --color-text-soft: #425466;
-  --color-text-muted: #8898aa;
-  --color-border: #e3e8ee;
-  --color-border-strong: #cfd7df;
-
-  --color-accent: #635bff;
-  --color-accent-hover: #4f46e5;
-  --color-accent-soft: #f0f0ff;
-
-  --gradient-hero: linear-gradient(150deg, #f6f9fc 0%, #eef2ff 40%, #ffffff 100%);
-  --gradient-accent: linear-gradient(135deg, #635bff 0%, #00d4ff 100%);
-
-  --radius: 12px;
-  --radius-lg: 20px;
-  --shadow-sm: 0 1px 3px rgba(10, 37, 64, 0.05), 0 1px 2px rgba(10, 37, 64, 0.03);
-  --shadow-md: 0 4px 12px rgba(10, 37, 64, 0.06), 0 2px 4px rgba(10, 37, 64, 0.04);
-  --shadow-lg: 0 12px 32px rgba(10, 37, 64, 0.08), 0 4px 12px rgba(10, 37, 64, 0.04);
-
-  --container: 1100px;
-  --container-prose: 760px;
-  --transition: 180ms cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-* { box-sizing: border-box; }
-
-html {
-  font-size: 16px;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  scroll-behavior: smooth;
-  overflow-x: hidden;
-}
+  --font: 'Inter', system-ui, sans-serif;
+  --g1: 0.5rem; --g2: 0.8125rem; --g3: 1.3125rem; --g4: 2.125rem; --g5: 3.4375rem; --g6: 5.5625rem; --g7: 9rem;
+  --t-xs: 0.8rem; --t-sm: 1rem; --t-md: 1.25rem; --t-lg: 1.563rem; --t-xl: 1.953rem; --t-2xl: 2.441rem;
+  --container: 1080px; --pad: var(--g4);
+  --w-6: 495px; --w-8: 667px; --w-10: 839px; --measure: 38rem;
+  --white: #ffffff; --bg: #fafbfc; --card: #ffffff;
+  --ink: #1a1a2e; --ink-2: #4a4a68; --ink-3: #8b8ba3;
+  --line: #e8e8ef; --line-h: #d0d0de;
+  --violet: #7c5cfc; --violet-s: #f3f0ff;
+  --teal: #0d9488; --teal-s: #ecfdf5;
+  --rose: #e11d63; --rose-s: #fff1f5;
+  --amber: #d97706; --amber-s: #fffbeb;
+  --sky: #0284c7; --sky-s: #f0f9ff;
+  --r: 12px; --r-lg: 16px; --pill: 999px;
+  --shadow: 0 1px 3px rgba(0,0,0,.04);
+  --shadow-up: 0 2px 8px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.02);
+  --ease: 180ms ease;
+}
+
+*, *::before, *::after { box-sizing: border-box; margin: 0; }
+html { font-size: 16px; -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }
 
 body {
-  margin: 0;
+  font-family: var(--font);
+  font-feature-settings: 'cv11', 'ss01';
+  color: var(--ink);
+  background: var(--bg);
+  line-height: 1.5;
   overflow-x: clip;
-  font-family: var(--font-sans);
-  font-feature-settings: 'cv11', 'ss01', 'ss03';
-  color: var(--color-text);
-  background: var(--color-bg);
-  line-height: 1.6;
 }
 
-/* ---------- LAYOUT ---------- */
+h1, h2, h3 { color: var(--ink); letter-spacing: -0.02em; }
+h1 { font-size: clamp(var(--t-xl), 4.5vw, var(--t-2xl)); font-weight: 800; line-height: 1.15; letter-spacing: -0.035em; margin-bottom: var(--g4); }
+h2 { font-size: var(--t-lg); font-weight: 700; line-height: 1.25; margin-bottom: var(--g3); }
+h3 { font-size: var(--t-md); font-weight: 600; line-height: 1.35; margin-bottom: var(--g2); }
+p { font-size: var(--t-sm); line-height: 1.6; color: var(--ink-2); margin-bottom: var(--g3); max-width: var(--measure); }
+a { color: var(--violet); text-decoration: none; transition: color var(--ease); }
+a:hover { color: var(--ink); }
+small { font-size: var(--t-xs); color: var(--ink-3); }
+strong { color: var(--ink); font-weight: 600; }
 
+/* Header */
 body > header {
-  position: sticky;
-  top: 0;
-  z-index: 50;
-  background: rgba(255, 255, 255, 0.85);
-  backdrop-filter: saturate(180%) blur(12px);
-  -webkit-backdrop-filter: saturate(180%) blur(12px);
-  border-bottom: 1px solid var(--color-border);
+  position: sticky; top: 0; z-index: 50;
+  background: rgba(255,255,255,.88);
+  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
+  border-bottom: 1px solid var(--line);
 }
-
 body > header nav {
-  max-width: var(--container);
-  margin: 0 auto;
-  padding: 1rem 1.5rem;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 2rem;
-}
-
-body > header nav a {
-  color: var(--color-text);
-  text-decoration: none;
-  font-weight: 500;
-  font-size: 0.95rem;
-  transition: color var(--transition);
-}
-
-body > header nav a:hover {
-  color: var(--color-accent);
-}
-
-body > header nav a strong {
-  font-size: 1.1rem;
-  font-weight: 700;
-  background: var(--gradient-accent);
-  -webkit-background-clip: text;
-  background-clip: text;
-  color: transparent;
+  max-width: var(--container); margin-inline: auto; padding-inline: var(--pad);
+  height: var(--g5); display: flex; align-items: center; justify-content: space-between;
 }
+body > header nav a { color: var(--ink-2); text-decoration: none; font-size: var(--t-sm); font-weight: 500; }
+body > header nav a strong { font-size: var(--t-md); font-weight: 700; color: var(--ink); }
 
+/* Main */
 main {
-  max-width: var(--container);
-  margin: 0 auto;
-  padding: 3rem 1.5rem 5rem;
-}
-
-body > footer {
-  border-top: 1px solid var(--color-border);
-  background: var(--color-bg-soft);
-  padding: 2.5rem 1.5rem;
-  text-align: center;
-}
-
-body > footer small {
-  color: var(--color-text-muted);
-  font-size: 0.875rem;
-}
-
-body > footer a {
-  color: var(--color-accent);
-  text-decoration: none;
-}
-
-/* ---------- TYPOGRAPHY ---------- */
-
-h1, h2, h3, h4 {
-  font-family: var(--font-display);
-  color: var(--color-text);
-  letter-spacing: -0.02em;
-  line-height: 1.2;
-  margin: 0 0 1rem;
-}
-
-h1 {
-  font-size: clamp(2.25rem, 5vw, 3.5rem);
-  font-weight: 800;
-  letter-spacing: -0.035em;
-}
-
-h2 {
-  font-size: 1.75rem;
-  font-weight: 700;
-  margin-top: 2.5rem;
-}
-
-h3 {
-  font-size: 1.25rem;
-  font-weight: 600;
-}
-
-p {
-  color: var(--color-text-soft);
-  margin: 0 0 1rem;
-}
-
-a {
-  color: var(--color-accent);
-  text-decoration: none;
-  transition: color var(--transition);
-}
-
-a:hover {
-  color: var(--color-accent-hover);
-}
-
-small {
-  color: var(--color-text-muted);
-  font-size: 0.875rem;
-}
-
-strong {
-  color: var(--color-text);
-  font-weight: 600;
+  max-width: var(--container); margin-inline: auto;
+  padding-inline: var(--pad); padding-top: 0; padding-bottom: var(--g6);
 }
+main > h1:first-child, main > article:first-child { margin-top: var(--g6); }
+main > section { margin-bottom: var(--g6); }
 
-/* ---------- HERO (hgroup) — Stripe-style mesh gradient ---------- */
+/* Footer */
+body > footer { border-top: 1px solid var(--line); padding: var(--g5) 0; text-align: center; }
+body > footer small { display: block; max-width: var(--container); margin-inline: auto; padding-inline: var(--pad); color: var(--ink-3); }
+body > footer a { color: var(--violet); }
 
+/* Hero */
 hgroup {
-  position: relative;
-  padding-top: 7rem;
-  padding-bottom: 9rem;
-  padding-left: max(1.5rem, calc((100vw - var(--container)) / 2));
-  padding-right: max(1.5rem, calc((100vw - var(--container)) / 2));
-  margin: -3rem calc(50% - 50vw) 4rem;
-  text-align: left;
-  overflow: hidden;
-  isolation: isolate;
-  background:
-    radial-gradient(ellipse 80% 60% at 15% 20%, rgba(99, 91, 255, 0.18) 0%, transparent 60%),
-    radial-gradient(ellipse 60% 80% at 85% 30%, rgba(0, 212, 255, 0.15) 0%, transparent 55%),
-    radial-gradient(ellipse 70% 50% at 50% 100%, rgba(255, 87, 209, 0.12) 0%, transparent 60%),
-    linear-gradient(180deg, #f6f9fc 0%, #ffffff 100%);
-}
-
-hgroup::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  background-image:
-    linear-gradient(rgba(10, 37, 64, 0.04) 1px, transparent 1px),
-    linear-gradient(90deg, rgba(10, 37, 64, 0.04) 1px, transparent 1px);
-  background-size: 56px 56px;
-  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 0%, transparent 75%);
-  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 0%, transparent 75%);
-  z-index: -1;
-  pointer-events: none;
-}
-
-hgroup::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: -1px;
-  height: 80px;
-  background: linear-gradient(180deg, transparent 0%, #ffffff 100%);
-  pointer-events: none;
-  z-index: -1;
+  position: relative; text-align: center; background: var(--white);
+  padding: var(--g6) var(--pad);
+  margin: 0 calc(50% - 50vw) var(--g6);
+  border-bottom: 1px solid var(--line);
 }
-
-hgroup > * {
-  position: relative;
-}
-
-hgroup > p:first-child {
-  display: inline-flex;
-  margin-bottom: 2rem;
-  padding: 0;
-}
-
+hgroup > * { position: relative; }
+hgroup > p:first-child { display: inline-flex; margin-bottom: var(--g4); padding: 0; }
 hgroup > p:first-child small {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-  background: rgba(255, 255, 255, 0.8);
-  backdrop-filter: blur(8px);
-  border: 1px solid var(--color-border);
-  padding: 0.4rem 0.9rem;
-  border-radius: 999px;
-  color: var(--color-text-soft);
-  font-size: 0.8rem;
-  font-weight: 500;
-  box-shadow: var(--shadow-sm);
-}
-
-hgroup > p:first-child small::before {
-  content: '';
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background: #00d24a;
-  box-shadow: 0 0 0 3px rgba(0, 210, 74, 0.2);
-}
-
-hgroup h1 {
-  font-size: clamp(2.5rem, 6.5vw, 5rem);
-  font-weight: 800;
-  letter-spacing: -0.04em;
-  line-height: 1.05;
-  margin: 0 0 1.5rem;
-  max-width: 900px;
-  background: linear-gradient(135deg, #0a2540 0%, #1a1a4e 40%, #635bff 100%);
-  -webkit-background-clip: text;
-  background-clip: text;
-  color: transparent;
+  display: inline-flex; align-items: center; gap: var(--g1);
+  background: var(--teal-s); padding: var(--g1) var(--g2);
+  border-radius: var(--pill); font-size: var(--t-xs); font-weight: 600; color: var(--teal);
 }
-
-hgroup h1 br { display: block; }
-
-hgroup p {
-  font-size: 1.2rem;
-  line-height: 1.55;
-  color: var(--color-text-soft);
-  max-width: 640px;
-  margin: 0 0 2rem;
-}
-
+hgroup > p:first-child small::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--teal); }
+hgroup h1 { max-width: 16ch; margin: 0 auto var(--g4); color: var(--ink); }
+hgroup p { font-size: var(--t-md); line-height: 1.5; color: var(--ink-2); max-width: var(--measure); margin: 0 auto 0; }
 hgroup > p:last-child {
-  display: flex;
-  gap: 0.75rem;
-  flex-wrap: wrap;
-  margin-top: 2.5rem;
-  margin-bottom: 0;
+  display: flex; gap: var(--g2); flex-wrap: wrap; justify-content: center;
+  margin-top: var(--g5); margin-bottom: 0;
 }
-
 hgroup > p:last-child a {
-  display: inline-flex;
-  align-items: center;
-  padding: 0.85rem 1.5rem;
-  border-radius: 999px;
-  font-weight: 600;
-  font-size: 0.95rem;
-  text-decoration: none;
-  transition: all var(--transition);
-}
-
-hgroup > p:last-child a:first-child {
-  background: var(--color-text);
-  color: white;
-  box-shadow: 0 4px 14px rgba(10, 37, 64, 0.25);
-}
-
-hgroup > p:last-child a:first-child:hover {
-  background: var(--color-accent);
-  transform: translateY(-1px);
-  box-shadow: 0 6px 20px rgba(99, 91, 255, 0.35);
-}
-
-hgroup > p:last-child a:last-child {
-  background: rgba(255, 255, 255, 0.7);
-  backdrop-filter: blur(8px);
-  color: var(--color-text);
-  border: 1px solid var(--color-border);
-}
-
-hgroup > p:last-child a:last-child:hover {
-  background: white;
-  border-color: var(--color-border-strong);
-}
-
-@media (max-width: 640px) {
-  hgroup { padding: 4rem 1.25rem 5rem; }
-  hgroup h1 br { display: none; }
-}
-
-/* ---------- SECTIONS ---------- */
-
-main > section {
-  margin-bottom: 3rem;
-}
-
-main > section > p:first-of-type {
-  font-size: 1.05rem;
-  max-width: var(--container-prose);
-}
-
-/* ---------- TRAINER CARDS (article in section) ---------- */
-
-main > section > article {
-  background: var(--color-bg);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius);
-  padding: 1.75rem 2rem;
-  margin: 1rem 0;
-  box-shadow: var(--shadow-sm);
-  transition: all var(--transition);
-}
-
-main > section > article:hover {
-  border-color: var(--color-border-strong);
-  box-shadow: var(--shadow-md);
-  transform: translateY(-2px);
-}
-
-main > section > article header {
-  margin-bottom: 0.75rem;
-}
-
-main > section > article h2 {
-  margin: 0 0 0.25rem;
-  font-size: 1.35rem;
-  font-weight: 700;
-}
-
-main > section > article h2 a {
-  color: var(--color-text);
-}
-
-main > section > article h2 a:hover {
-  color: var(--color-accent);
-}
-
-main > section > article header p {
-  margin: 0;
-  font-size: 0.9rem;
-  color: var(--color-text-muted);
-}
-
-main > section > article > p {
-  margin: 0.75rem 0 0.5rem;
-  color: var(--color-text-soft);
-}
-
-main > section > article small {
-  display: inline-block;
-  background: var(--color-accent-soft);
-  color: var(--color-accent-hover);
-  padding: 0.25rem 0.75rem;
-  border-radius: 999px;
-  font-size: 0.8rem;
-  font-weight: 500;
-}
-
-/* ---------- TRAINER ARTICLE (single page) ---------- */
-
+  display: inline-flex; align-items: center; height: var(--g5); padding: 0 var(--g4);
+  border-radius: var(--pill); font-weight: 600; font-size: var(--t-sm); transition: all var(--ease);
+}
+hgroup > p:last-child a:first-child { background: var(--violet); color: var(--white); }
+hgroup > p:last-child a:first-child:hover { background: var(--ink); }
+hgroup > p:last-child a:last-child { background: var(--white); color: var(--ink); border: 1px solid var(--line); }
+hgroup > p:last-child a:last-child:hover { border-color: var(--line-h); background: var(--bg); }
+
+/* Search */
+form[role="search"] {
+  display: flex; max-width: var(--w-6); height: var(--g5);
+  margin: var(--g5) auto 0; background: var(--white);
+  border: 1px solid var(--line); border-radius: var(--pill);
+  overflow: hidden; box-shadow: var(--shadow-up); transition: border-color var(--ease);
+}
+form[role="search"]:focus-within { border-color: var(--violet); }
+form[role="search"] input {
+  flex: 1; min-width: 0; border: none; background: transparent; color: var(--ink);
+  padding: 0 var(--g3); font-size: var(--t-sm); font-family: var(--font); outline: none;
+}
+form[role="search"] input::placeholder { color: var(--ink-3); }
+form[role="search"] button {
+  flex-shrink: 0; border: none; background: var(--violet); color: var(--white);
+  padding: 0 var(--g4); font-size: var(--t-sm); font-weight: 600;
+  font-family: var(--font); cursor: pointer; transition: background var(--ease);
+}
+form[role="search"] button:hover { background: var(--ink); }
+
+/* Stats */
+section:has(> dl) { margin-bottom: 0; }
+section > dl {
+  display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: var(--g3);
+  padding: var(--g5) var(--g4); margin: 0 auto var(--g6); max-width: var(--w-6);
+  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
+}
+section > dl div { text-align: center; }
+section > dl dt { font-size: var(--t-xl); font-weight: 800; line-height: 1.2; color: var(--violet); }
+section > dl dd { margin: 0; font-size: var(--t-xs); line-height: 1.5; color: var(--ink-3); font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; }
+
+/* Category pills */
+nav[aria-label] { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--g2); margin-bottom: var(--g6); }
+nav[aria-label] a {
+  display: inline-flex; align-items: center; height: var(--g4); padding: 0 var(--g2);
+  border-radius: var(--pill); font-size: var(--t-xs); font-weight: 500;
+  background: var(--white); border: 1px solid var(--line); color: var(--ink-2); transition: all var(--ease);
+}
+nav[aria-label] a:nth-child(5n+1):hover { border-color: var(--violet); color: var(--violet); background: var(--violet-s); }
+nav[aria-label] a:nth-child(5n+2):hover { border-color: var(--teal); color: var(--teal); background: var(--teal-s); }
+nav[aria-label] a:nth-child(5n+3):hover { border-color: var(--rose); color: var(--rose); background: var(--rose-s); }
+nav[aria-label] a:nth-child(5n+4):hover { border-color: var(--amber); color: var(--amber); background: var(--amber-s); }
+nav[aria-label] a:nth-child(5n+5):hover { border-color: var(--sky); color: var(--sky); background: var(--sky-s); }
+
+/* Steps */
+section:has(> ol) > h2 { text-align: center; }
+section > ol {
+  list-style: none; padding: 0; display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--g3); margin: 0; counter-reset: steps;
+}
+section > ol li {
+  counter-increment: steps; background: var(--white); border: 1px solid var(--line);
+  border-radius: var(--r-lg); padding: var(--g5) var(--g3); text-align: center;
+}
+section > ol li::before {
+  content: counter(steps); display: flex; align-items: center; justify-content: center;
+  width: var(--g5); height: var(--g5); margin: 0 auto var(--g3);
+  border-radius: 50%; font-size: var(--t-md); font-weight: 700;
+}
+section > ol li:nth-child(5n+1)::before { background: var(--violet-s); color: var(--violet); }
+section > ol li:nth-child(5n+2)::before { background: var(--teal-s); color: var(--teal); }
+section > ol li:nth-child(5n+3)::before { background: var(--amber-s); color: var(--amber); }
+section > ol li:nth-child(5n+4)::before { background: var(--rose-s); color: var(--rose); }
+section > ol li:nth-child(5n+5)::before { background: var(--sky-s); color: var(--sky); }
+section > ol li strong { display: block; font-size: var(--t-sm); line-height: 1.5; margin-bottom: var(--g1); color: var(--ink); }
+section > ol li span { font-size: var(--t-xs); line-height: 1.5; color: var(--ink-3); }
+
+/* Trainer cards */
+section:has(> article[itemscope]) {
+  display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--w-6), 1fr)); gap: var(--g3);
+}
+section:has(> article[itemscope]) > h2 { grid-column: 1 / -1; margin-bottom: var(--g4); }
+article[itemscope] {
+  background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--line);
+  border-radius: var(--r-lg); padding: var(--g4) var(--g3);
+  transition: border-color var(--ease), box-shadow var(--ease);
+}
+article[itemscope]:hover { border-color: var(--line-h); box-shadow: var(--shadow-up); }
+article[itemscope]:nth-child(5n+2) { border-left-color: var(--violet); }
+article[itemscope]:nth-child(5n+3) { border-left-color: var(--teal); }
+article[itemscope]:nth-child(5n+4) { border-left-color: var(--rose); }
+article[itemscope]:nth-child(5n+5) { border-left-color: var(--amber); }
+article[itemscope]:nth-child(5n+6) { border-left-color: var(--sky); }
+article[itemscope] header { margin-bottom: var(--g2); }
+article[itemscope] h2 { font-size: var(--t-md); line-height: 1.35; margin: 0 0 var(--g1); }
+article[itemscope] h2 a { color: var(--ink); }
+article[itemscope] h2 a:hover { color: var(--violet); }
+article[itemscope] header p { font-size: var(--t-xs); line-height: 1.5; color: var(--ink-3); margin: 0; }
+article[itemscope] [itemprop="description"] { font-size: var(--t-xs); line-height: 1.5; margin: var(--g1) 0 0; color: var(--ink-2); }
+article[itemscope] [itemprop="jobTitle"],
+article[itemscope] [itemprop="addressLocality"] { color: var(--ink-3); }
+article[itemscope] > p:last-child small {
+  display: inline-block; margin-top: var(--g2); background: var(--violet-s); color: var(--violet);
+  padding: calc(var(--g1) / 2) var(--g1); border-radius: var(--pill); font-size: var(--t-xs); font-weight: 500;
+}
+
+/* Single trainer */
 main > article {
-  max-width: var(--container-prose);
-  margin: 0 auto;
-  background: var(--color-bg);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  padding: 3rem;
-  box-shadow: var(--shadow-md);
-}
-
-main > article > header {
-  border-bottom: 1px solid var(--color-border);
-  padding-bottom: 1.5rem;
-  margin-bottom: 2rem;
+  max-width: var(--w-8); margin: 0 auto; background: var(--card);
+  border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--g5);
 }
-
-main > article > header h1 {
-  margin-bottom: 0.5rem;
-}
-
-main > article > header p {
-  font-size: 1.1rem;
-  color: var(--color-text-muted);
-  margin: 0;
-}
-
+main > article > header { border-bottom: 1px solid var(--line); padding-bottom: var(--g3); margin-bottom: var(--g4); }
+main > article > header h1 { margin-bottom: var(--g2); }
+main > article > header p { font-size: var(--t-md); color: var(--ink-3); margin: 0; }
 main > article address {
-  font-style: normal;
-  display: inline-block;
-  background: var(--color-bg-soft);
-  padding: 0.75rem 1.25rem;
-  border-radius: var(--radius);
-  margin-bottom: 2rem;
-  color: var(--color-text-soft);
-  border: 1px solid var(--color-border);
-}
-
-main > article section {
-  margin: 2rem 0;
-}
-
-main > article section h2 {
-  font-size: 1.1rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: var(--color-text-muted);
-  margin-top: 0;
-  margin-bottom: 1rem;
-}
-
-main > article ul {
-  list-style: none;
-  padding: 0;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5rem;
+  font-style: normal; display: inline-block; background: var(--bg);
+  padding: var(--g1) var(--g2); border-radius: var(--r); margin-bottom: var(--g3);
+  color: var(--ink-2); border: 1px solid var(--line); font-size: var(--t-sm);
 }
-
+main > article section { margin: var(--g5) 0; }
+main > article section h2 { font-size: var(--t-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); margin: 0 0 var(--g2); }
+main > article ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--g1); }
 main > article ul li {
-  background: var(--color-accent-soft);
-  color: var(--color-accent-hover);
-  padding: 0.4rem 0.9rem;
-  border-radius: 999px;
-  font-size: 0.875rem;
-  font-weight: 500;
-}
-
-main > article dl {
-  display: grid;
-  grid-template-columns: max-content 1fr;
-  gap: 0.75rem 1.5rem;
-  margin: 0;
-}
-
-main > article dt {
-  color: var(--color-text-muted);
-  font-size: 0.875rem;
-  font-weight: 500;
-}
-
-main > article dd {
-  margin: 0;
-  color: var(--color-text);
-}
-
-main > article > footer {
-  margin-top: 2.5rem;
-  padding-top: 1.5rem;
-  border-top: 1px solid var(--color-border);
-  text-align: center;
-}
-
-/* ---------- RESPONSIVE ---------- */
-
+  background: var(--violet-s); color: var(--violet);
+  padding: calc(var(--g1) / 2) var(--g2); border-radius: var(--pill); font-size: var(--t-xs); font-weight: 500;
+}
+main > article dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--g1) var(--g3); }
+main > article dt { font-size: var(--t-xs); color: var(--ink-3); font-weight: 500; }
+main > article dd { margin: 0; font-size: var(--t-sm); }
+main > article > footer { margin-top: var(--g5); padding-top: var(--g3); border-top: 1px solid var(--line); text-align: center; }
+
+/* Pagination */
+main > nav p { display: flex; align-items: center; justify-content: center; gap: var(--g3); padding: var(--g4) 0; font-size: var(--t-sm); color: var(--ink-3); }
+main > nav a {
+  height: var(--g4); display: inline-flex; align-items: center; padding: 0 var(--g2);
+  border-radius: var(--pill); background: var(--white); border: 1px solid var(--line);
+  font-size: var(--t-xs); font-weight: 500; transition: all var(--ease);
+}
+main > nav a:hover { border-color: var(--violet); color: var(--violet); }
+
+/* Trust */
+blockquote {
+  margin: var(--g5) auto var(--g6); padding: var(--g5) var(--g4); max-width: var(--w-8);
+  background: var(--teal-s); border: 1px solid rgba(13,148,136,.12);
+  border-radius: var(--r-lg); text-align: center; border-left: none;
+}
+blockquote strong { display: block; font-size: var(--t-md); line-height: 1.35; margin-bottom: var(--g2); color: var(--teal); }
+blockquote p { color: var(--ink-2); margin: 0 auto; font-size: var(--t-sm); }
+
+/* Forms */
+label { display: block; font-size: var(--t-sm); color: var(--ink-2); font-weight: 500; margin-bottom: var(--g1); }
+input[type="text"] {
+  display: block; width: 100%; margin-top: var(--g1); height: var(--g5);
+  padding: 0 var(--g2); background: var(--white); border: 1px solid var(--line);
+  border-radius: var(--r); color: var(--ink); font-size: var(--t-sm); font-family: var(--font);
+  transition: border-color var(--ease);
+}
+input[type="text"]:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px rgba(124,92,252,.08); }
+button[type="submit"] {
+  margin-top: var(--g3); height: var(--g5); padding: 0 var(--g4);
+  border: none; border-radius: var(--pill); background: var(--violet); color: var(--white);
+  font-size: var(--t-sm); font-weight: 600; font-family: var(--font); cursor: pointer;
+  transition: background var(--ease);
+}
+button[type="submit"]:hover { background: var(--ink); }
+
+/* Responsive */
 @media (max-width: 640px) {
-  main { padding: 2rem 1rem 3rem; }
-  hgroup { padding: 2.5rem 1rem 3rem; margin: -2rem -1rem 2rem; }
-  main > article { padding: 1.5rem; }
-  main > article dl { grid-template-columns: 1fr; gap: 0.25rem 0; }
-  main > article dt { margin-top: 0.75rem; }
+  :root { --pad: var(--g3); }
+  main { padding: 0 var(--pad) var(--g5); }
+  hgroup { padding: var(--g5) var(--pad); }
+  section:has(> article[itemscope]) { grid-template-columns: 1fr; }
+  section > ol { grid-template-columns: 1fr; }
+  section > dl { grid-template-columns: 1fr; max-width: var(--w-6); padding: var(--g4); }
+  main > article { padding: var(--g4); }
+  main > article dl { grid-template-columns: 1fr; gap: calc(var(--g1) / 2) 0; }
+  main > article dt { margin-top: var(--g2); }
+  form[role="search"] { height: var(--g4); }
+  form[role="search"] input { font-size: var(--t-xs); }
 }

package/src/templates/catalog.ts

@@ -0,0 +1,63 @@
+import { esc } from './helpers.ts';
+
+export interface CatalogHeroProps {
+  badge?: string;
+  title: string;
+  subtitle?: string;
+  searchAction?: string;
+  searchPlaceholder?: string;
+  searchValue?: string;
+}
+
+export function catalogHero(p: CatalogHeroProps): string {
+  const badge = p.badge ? `<p><small>${esc(p.badge)}</small></p>` : '';
+  const subtitle = p.subtitle ? `<p>${esc(p.subtitle)}</p>` : '';
+  const search = p.searchAction !== undefined ? `<form role="search" action="${esc(p.searchAction ?? '/')}" method="get">
+<input type="text" name="q" placeholder="${esc(p.searchPlaceholder ?? 'Szukaj...')}" value="${esc(p.searchValue ?? '')}" />
+<button type="submit">Szukaj</button>
+</form>` : '';
+  return `<hgroup>
+${badge}
+<h1>${esc(p.title)}</h1>
+${subtitle}
+${search}
+</hgroup>`;
+}
+
+export function statBar(items: { value: string; label: string }[]): string {
+  const divs = items.map(i => `<div><dt>${esc(i.value)}</dt><dd>${esc(i.label)}</dd></div>`).join('\n');
+  return `<section><dl>\n${divs}\n</dl></section>`;
+}
+
+export function categoryNav(items: { href: string; label: string }[], ariaLabel = 'Kategorie'): string {
+  if (!items.length) return '';
+  const links = items.map(i => `<a href="${esc(i.href)}">${esc(i.label)}</a>`).join('');
+  return `<nav aria-label="${esc(ariaLabel)}">${links}</nav>`;
+}
+
+export function steps(title: string, items: { title: string; description: string }[]): string {
+  const lis = items.map(i => `<li><strong>${esc(i.title)}</strong><span>${esc(i.description)}</span></li>`).join('\n');
+  return `<section>\n<h2>${esc(title)}</h2>\n<ol>\n${lis}\n</ol>\n</section>`;
+}
+
+export function trustBlock(title: string, body: string): string {
+  return `<blockquote>\n<strong>${esc(title)}</strong>\n<p>${esc(body)}</p>\n</blockquote>`;
+}
+
+export interface PaginationProps {
+  current: number;
+  total: number;
+  baseHref?: string;
+  extraParams?: string;
+  prevLabel?: string;
+  nextLabel?: string;
+}
+
+export function pagination(p: PaginationProps): string {
+  if (p.total <= 1) return '';
+  const base = p.baseHref ?? '/';
+  const extra = p.extraParams ?? '';
+  const prev = p.current > 1 ? `<a href="${esc(base)}?p=${p.current - 1}${extra}">${esc(p.prevLabel ?? '\u2190 Poprzednia')}</a>` : '';
+  const next = p.current < p.total ? `<a href="${esc(base)}?p=${p.current + 1}${extra}">${esc(p.nextLabel ?? 'Nastepna \u2192')}</a>` : '';
+  return `<nav><p>${prev} Strona ${p.current} z ${p.total} ${next}</p></nav>`;
+}

package/src/templates/index.ts

@@ -2,4 +2,5 @@ export { layout, type LayoutProps } from './layout.ts';
 export { hero } from './hero.ts';
 export { profileCard } from './profile-card.ts';
 export { profileArticle } from './profile-article.ts';
+export { catalogHero, statBar, categoryNav, steps, trustBlock, pagination, type CatalogHeroProps, type PaginationProps } from './catalog.ts';
 export { esc, fullName } from './helpers.ts';

package/src/templates/layout.ts

@@ -12,7 +12,7 @@ export interface LayoutProps {
   footerContent?: string;
 }
 
-const THEME_VERSION = '0.3.0';
+const THEME_VERSION = '0.4.0';
 
 export function layout(props: LayoutProps, body: string): string {
   const {