@press2ai/theme-specialist-glossy 0.8.3 → 0.9.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@press2ai/theme-specialist-glossy",
-  "version": "0.8.3",
+  "version": "0.9.1",
   "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",

package/src/styles/glossy.css

@@ -57,12 +57,12 @@ body > header nav {
 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 — no margin-bottom anywhere, only margin-top */
+/* Main — each block carries its own margin-top, no position-dependent rules */
 main {
   max-width: var(--container); margin-inline: auto;
-  padding-inline: var(--pad); padding-top: 0; padding-bottom: var(--g6);
+  padding-inline: var(--pad); padding-top: 0; padding-bottom: 0;
 }
-main > h1:first-child, main > article:first-child { margin-top: var(--g5); }
+main > h1 { margin-top: var(--g5); }
 
 /* Footer */
 body > footer {
@@ -92,7 +92,7 @@ body > footer > small > p {
   font-size: var(--t-xs); color: var(--ink-3); text-align: left;
 }
 
-/* Hero — golden ratio: top g6, bottom g5 */
+/* Hero */
 hgroup {
   position: relative; text-align: center; isolation: isolate; overflow: hidden;
   padding: var(--g6) var(--pad) var(--g5);
@@ -127,19 +127,22 @@ hgroup > p:first-child small::before { content: ''; width: 6px; height: 6px; bor
 hgroup h1 { max-width: 18ch; margin: 0 auto var(--g4); color: var(--ink); }
 hgroup p { font-size: var(--t-md); line-height: 1.55; color: var(--ink-2); max-width: var(--measure); margin: 0 auto var(--g4); }
 
-/* Hero CTAs */
-.hero-ctas {
+/* Hero CTAs — <nav> inside hgroup, first link primary, rest secondary */
+hgroup > nav {
   display: flex; gap: var(--g2); flex-wrap: wrap; justify-content: center;
   margin-top: var(--g4); margin-bottom: 0;
 }
-.cta-primary, .cta-secondary {
+hgroup > nav > a {
   display: inline-flex; align-items: center; height: 44px; padding: 0 var(--g4);
   border-radius: var(--pill); font-weight: 600; font-size: var(--t-sm); transition: all var(--ease);
+  background: var(--white); color: var(--ink); border: 1px solid var(--line);
 }
-.cta-primary { background: var(--violet); color: var(--white); box-shadow: 0 4px 14px var(--violet-glow); }
-.cta-primary:hover { background: var(--ink); color: var(--white); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(26,26,46,.2); }
-.cta-secondary { background: var(--white); color: var(--ink); border: 1px solid var(--line); }
-.cta-secondary:hover { border-color: var(--line-h); background: var(--bg); }
+hgroup > nav > a:first-child {
+  background: var(--violet); color: var(--white); border-color: transparent;
+  box-shadow: 0 4px 14px var(--violet-glow);
+}
+hgroup > nav > a:first-child:hover { background: var(--ink); color: var(--white); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(26,26,46,.2); }
+hgroup > nav > a:not(:first-child):hover { border-color: var(--line-h); background: var(--bg); }
 
 /* Search */
 form[role="search"] {
@@ -162,34 +165,33 @@ form[role="search"] button {
 }
 form[role="search"] button:hover { background: var(--ink); }
 
-/* Stats — margin-top only, visually separated */
-section[aria-label="Statystyki"] { margin-top: var(--g6); }
-.stat-summary {
+/* Stats — structural selector, no hardcoded aria-label */
+section:has(> dl) { margin-top: var(--g6); }
+section:has(> dl) > p {
   text-align: center; font-size: var(--t-md); font-weight: 500; line-height: 1.55;
   color: var(--ink); margin: 0 auto var(--g4); max-width: var(--measure);
 }
-section[aria-label="Statystyki"] > dl {
+section:has(> dl) > dl {
   display: flex; justify-content: center; gap: var(--g5); margin: 0 auto; padding: 0;
   border: none; background: none; box-shadow: none;
 }
-section[aria-label="Statystyki"] > dl div { text-align: center; }
-.stat-icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin: 0 auto var(--g1); background: var(--violet-s); border-radius: 50%; color: var(--violet); }
-.stat-icon svg { width: 18px; height: 18px; }
-section[aria-label="Statystyki"] > dl dt { font-size: var(--t-lg); font-weight: 800; line-height: 1.2; color: var(--violet); }
-section[aria-label="Statystyki"] > dl dd { margin: 2px 0 0; font-size: var(--t-xs); line-height: 1.4; color: var(--ink-3); font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; }
+section:has(> dl) > dl div { text-align: center; }
+section:has(> dl) > dl div > span:has(> svg) {
+  display: flex; align-items: center; justify-content: center; width: 36px; height: 36px;
+  margin: 0 auto var(--g1); background: var(--violet-s); border-radius: 50%; color: var(--violet);
+}
+section:has(> dl) > dl div > span:has(> svg) > svg { width: 18px; height: 18px; }
+section:has(> dl) > dl dt { font-size: var(--t-lg); font-weight: 800; line-height: 1.2; color: var(--violet); }
+section:has(> dl) > dl dd { margin: 2px 0 0; font-size: var(--t-xs); line-height: 1.4; color: var(--ink-3); font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; }
 
-/* Category pills — margin-top only */
+/* Category pills — single accent, no position-dependent colors */
 nav[aria-label] { display: flex; flex-wrap: wrap; gap: var(--g1); margin-top: var(--g5); }
 nav[aria-label] a {
   display: inline-flex; align-items: center; height: 32px; 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); }
+nav[aria-label] a:hover { border-color: var(--violet); color: var(--violet); background: var(--violet-s); }
 
 /* Steps — full-bleed white band */
 section:has(> ol) {
@@ -202,7 +204,7 @@ section:has(> ol) > * { max-width: var(--container); margin-inline: auto; }
 section:has(> ol) > h2 { text-align: center; margin-bottom: var(--g4); }
 section > ol {
   list-style: none; padding: 0; display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--g3); margin: 0; counter-reset: steps;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--g3); margin: 0 auto; counter-reset: steps;
 }
 section > ol li {
   counter-increment: steps; background: var(--bg); border: 1px solid var(--line);
@@ -213,16 +215,12 @@ section > ol li::before {
   content: counter(steps); display: flex; align-items: center; justify-content: center;
   width: 40px; height: 40px; margin: 0 auto var(--g2);
   border-radius: 50%; font-size: var(--t-sm); font-weight: 700;
+  background: var(--violet-s); color: var(--violet);
 }
-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.4; margin-bottom: 4px; color: var(--ink); }
 section > ol li span { font-size: var(--t-xs); line-height: 1.5; color: var(--ink-3); }
 
-/* Trainer cards — margin-top only */
+/* Trainer cards — no position-dependent colors */
 section:has(> article[itemscope]) {
   margin-top: var(--g6);
   display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--g3);
@@ -236,42 +234,40 @@ article[itemscope] {
 }
 article[itemscope]:hover { transform: translateY(-2px); box-shadow: var(--shadow-up); border-color: var(--line-h); }
 
-/* Card avatar */
-.card-avatar {
+/* Card avatar — single accent color, position-independent */
+article[itemscope] > div[aria-hidden] {
   width: 40px; height: 40px; border-radius: 50%;
   display: flex; align-items: center; justify-content: center;
   font-size: var(--t-xs); font-weight: 700; color: var(--white);
   margin-bottom: var(--g2); flex-shrink: 0;
+  background: var(--violet);
 }
-article[itemscope]:nth-child(5n+2) .card-avatar { background: var(--violet); }
-article[itemscope]:nth-child(5n+3) .card-avatar { background: var(--teal); }
-article[itemscope]:nth-child(5n+4) .card-avatar { background: var(--rose); }
-article[itemscope]:nth-child(5n+5) .card-avatar { background: var(--amber); }
-article[itemscope]:nth-child(5n+6) .card-avatar { background: var(--sky); }
-article[itemscope]:nth-child(5n+1) .card-avatar,
-article[itemscope]:first-child .card-avatar { background: var(--violet); }
 article[itemscope] header { margin-bottom: var(--g1); }
 article[itemscope] h2 { font-size: var(--t-sm); font-weight: 600; line-height: 1.3; margin: 0 0 2px; }
 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.4; color: var(--ink-3); margin: 0; }
-.card-city { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; color: var(--ink-3); font-size: var(--t-xs); }
-.card-city::before { content: ''; display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: var(--ink-3); }
+article[itemscope] header p:has([itemprop="address"]) {
+  display: inline-flex; align-items: center; gap: 4px; margin-top: 2px;
+}
+article[itemscope] header p:has([itemprop="address"])::before {
+  content: ''; display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: var(--ink-3);
+}
 article[itemscope] [itemprop="description"] { font-size: var(--t-xs); line-height: 1.5; margin: var(--g1) 0 0; color: var(--ink-2); }
 article[itemscope] ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; margin-top: var(--g1); }
 article[itemscope] ul li {
   background: var(--violet-s); color: var(--violet);
   padding: 1px var(--g1); border-radius: var(--pill); font-size: 0.7rem; font-weight: 500;
 }
-.card-cta {
+article[itemscope] > a:last-child {
   display: inline-flex; align-items: center; margin-top: auto; padding-top: var(--g2);
   font-size: var(--t-xs); font-weight: 600; color: var(--violet); transition: all var(--ease);
 }
-.card-cta:hover { color: var(--ink); gap: 4px; }
+article[itemscope] > a:last-child:hover { color: var(--ink); gap: 4px; }
 
 /* Single trainer */
 main > article {
-  max-width: var(--w-8); margin: 0 auto; background: var(--card);
+  max-width: var(--w-8); margin: var(--g5) auto 0; background: var(--card);
   border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--g5); box-shadow: var(--shadow-md);
 }
 main > article > header { border-bottom: 1px solid var(--line); padding-bottom: var(--g3); margin-bottom: var(--g4); }
@@ -321,6 +317,9 @@ form:not([role="search"]) button[type="submit"] {
 }
 form:not([role="search"]) button[type="submit"]:hover { background: var(--ink); transform: translateY(-1px); }
 
+/* Trust block */
+aside:has(> ul) { margin-top: var(--g5); }
+
 /* Responsive */
 @media (max-width: 640px) {
   :root { --pad: var(--g3); }
@@ -328,7 +327,7 @@ form:not([role="search"]) button[type="submit"]:hover { background: var(--ink);
   hgroup { padding: var(--g5) var(--pad) var(--g4); }
   section:has(> article[itemscope]) { grid-template-columns: 1fr; }
   section > ol { grid-template-columns: 1fr; }
-  section[aria-label="Statystyki"] > dl { gap: var(--g3); }
+  section:has(> dl) > dl { gap: var(--g3); }
   main > article { padding: var(--g3); }
   main > article dl { grid-template-columns: 1fr; gap: calc(var(--g1) / 2) 0; }
   main > article dt { margin-top: var(--g2); }

package/src/templates/catalog.ts

@@ -17,9 +17,9 @@ export function catalogHero(p: CatalogHeroProps): string {
 <input type="search" name="q" placeholder="${esc(p.searchPlaceholder ?? 'Szukaj...')}" value="${esc(p.searchValue ?? '')}" />
 <button type="submit">Szukaj</button>
 </form>` : '';
-  const ctas = p.ctas?.length ? `<p class="hero-ctas">${p.ctas.map(
-    (c, i) => `<a href="${esc(c.href)}" class="${i === 0 ? 'cta-primary' : 'cta-secondary'}">${esc(c.label)}</a>`
-  ).join('\n')}</p>` : '';
+  const ctas = p.ctas?.length ? `<nav>${p.ctas.map(
+    c => `<a href="${esc(c.href)}">${esc(c.label)}</a>`
+  ).join('\n')}</nav>` : '';
   return `<hgroup>
 ${badge}
 <h1>${p.title}</h1>
@@ -37,10 +37,10 @@ const STAT_ICONS: Record<string, string> = {
 
 export function statBar(items: { value: string; label: string; icon?: string }[], summary?: string): string {
   const divs = items.map(i => {
-    const icon = i.icon && STAT_ICONS[i.icon] ? `<span class="stat-icon">${STAT_ICONS[i.icon]}</span>` : '';
+    const icon = i.icon && STAT_ICONS[i.icon] ? `<span>${STAT_ICONS[i.icon]}</span>` : '';
     return `<div>${icon}<dt>${esc(i.value)}</dt><dd>${esc(i.label)}</dd></div>`;
   }).join('\n');
-  const summaryP = summary ? `<p class="stat-summary">${esc(summary)}</p>` : '';
+  const summaryP = summary ? `<p>${esc(summary)}</p>` : '';
   return `<section aria-label="Statystyki">${summaryP}<dl aria-hidden="true">\n${divs}\n</dl></section>`;
 }
 
@@ -57,7 +57,7 @@ export function steps(title: string, items: { title: string; description: string
 
 export function trustBlock(title: string, points: string[]): string {
   const items = points.map(p => `<li>${esc(p)}</li>`).join('\n');
-  return `<aside class="trust">
+  return `<aside>
 <strong>${esc(title)}</strong>
 <ul>${items}</ul>
 </aside>`;

package/src/templates/hero.ts

@@ -11,7 +11,7 @@ export function hero(p: Profile): string {
   const ctas: string[] = [];
   if (p.email) ctas.push(`<a href="mailto:${esc(p.email)}">Napisz wiadomość</a>`);
   if (p.phone) ctas.push(`<a href="tel:${esc(p.phone.replace(/\s/g, ''))}">Zadzwoń</a>`);
-  const ctaBlock = ctas.length ? `<p>${ctas.join('\n')}</p>` : '';
+  const ctaBlock = ctas.length ? `<nav>${ctas.join('\n')}</nav>` : '';
 
   return `<hgroup>
 ${badge}

package/src/templates/layout.ts

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

package/src/templates/profile-card.ts

@@ -14,14 +14,14 @@ export function profileCard(p: Profile, href: string): string {
     : '';
 
   return `<article itemscope itemtype="https://schema.org/Person">
-<div class="card-avatar" aria-hidden="true">${initials}</div>
+<div aria-hidden="true">${initials}</div>
 <header>
 <h2><a href="${esc(href)}" itemprop="url"><span itemprop="name">${esc(name)}</span></a></h2>
 <p><span itemprop="jobTitle">${esc(p.jobTitle)}</span></p>
-${city ? `<p class="card-city">${city}</p>` : ''}
+${city ? `<p>${city}</p>` : ''}
 </header>
 ${bio}
 ${specs}
-<a href="${esc(href)}" class="card-cta">Zobacz profil &rarr;</a>
+<a href="${esc(href)}">Zobacz profil &rarr;</a>
 </article>`;
 }