@press2ai/theme-specialist-glossy 0.9.2 → 0.10.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@press2ai/theme-specialist-glossy",
-  "version": "0.9.2",
+  "version": "0.10.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 — each block carries its own margin-top, no position-dependent rules */
+/* Main — systemic gap between blocks, no per-block hacks */
 main {
   max-width: var(--container); margin-inline: auto;
   padding-inline: var(--pad); padding-top: 0; padding-bottom: 0;
 }
-main > h1 { margin-top: var(--g5); }
+main > * + * { margin-top: var(--g5); }
 
 /* Footer */
 body > footer {
@@ -96,7 +96,7 @@ body > footer > small > p {
 hgroup {
   position: relative; text-align: center; isolation: isolate; overflow: hidden;
   padding: var(--g6) var(--pad) var(--g5);
-  margin: 0 calc(50% - 50vw) 0 calc(50% - 50vw);
+  margin-inline: calc(50% - 50vw);
   background:
     radial-gradient(ellipse 70% 50% at 20% 30%, var(--violet-glow) 0%, transparent 60%),
     radial-gradient(ellipse 50% 60% at 80% 20%, rgba(13,148,136,.12) 0%, transparent 55%),
@@ -166,7 +166,6 @@ form[role="search"] button {
 form[role="search"] button:hover { background: var(--ink); }
 
 /* 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);
@@ -185,7 +184,7 @@ section:has(> dl) > dl dt { font-size: var(--t-lg); font-weight: 800; line-heigh
 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 — single accent, no position-dependent colors */
-nav[aria-label] { display: flex; flex-wrap: wrap; gap: var(--g1); margin-top: var(--g5); }
+nav[aria-label] { display: flex; flex-wrap: wrap; gap: var(--g1); }
 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;
@@ -195,7 +194,7 @@ nav[aria-label] a:hover { border-color: var(--violet); color: var(--violet); bac
 
 /* Steps — full-bleed white band */
 section:has(> ol) {
-  margin: 0 calc(50% - 50vw) 0 calc(50% - 50vw);
+  margin-inline: calc(50% - 50vw);
   padding: var(--g5) var(--pad);
   background: var(--white);
   border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
@@ -222,11 +221,10 @@ section > ol li span { font-size: var(--t-xs); line-height: 1.5; color: var(--in
 
 /* 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);
 }
 section:has(> article[itemscope]) > h2 { grid-column: 1 / -1; margin-bottom: var(--g2); }
-section:has(> article[itemscope]) > nav[aria-label] { grid-column: 1 / -1; margin-top: 0; }
+section:has(> article[itemscope]) > nav[aria-label] { grid-column: 1 / -1; margin-bottom: var(--g2); }
 article[itemscope] {
   position: relative; background: var(--card); border: 1px solid var(--line);
   border-radius: var(--r-lg); padding: var(--g3);
@@ -268,7 +266,7 @@ article[itemscope] > a:last-child:hover { color: var(--ink); gap: 4px; }
 
 /* Single trainer */
 main > article {
-  max-width: var(--w-8); margin: var(--g5) auto 0; background: var(--card);
+  max-width: var(--w-8); margin-inline: auto; 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); }
@@ -292,7 +290,6 @@ main > article dd { margin: 0; font-size: var(--t-sm); }
 main > article > footer { margin-top: var(--g4); padding-top: var(--g3); border-top: 1px solid var(--line); text-align: center; }
 
 /* Pagination */
-main > nav { margin-top: var(--g4); }
 main > nav p { display: flex; align-items: center; justify-content: center; gap: var(--g3); font-size: var(--t-sm); color: var(--ink-3); }
 main > nav a {
   height: 32px; display: inline-flex; align-items: center; padding: 0 var(--g2);
@@ -319,7 +316,6 @@ 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) {

package/src/templates/catalog.ts

@@ -55,6 +55,14 @@ export function steps(title: string, items: { title: string; description: string
   return `<section>\n<h2>${esc(title)}</h2>\n<ol>\n${lis}\n</ol>\n</section>`;
 }
 
+export function catalogGrid(p: { title: string; filters?: string; cards: string }): string {
+  return `<section>
+<h2>${esc(p.title)}</h2>
+${p.filters ?? ''}
+${p.cards}
+</section>`;
+}
+
 export function trustBlock(title: string, points: string[]): string {
   const items = points.map(p => `<li>${esc(p)}</li>`).join('\n');
   return `<aside>

package/src/templates/index.ts

@@ -2,5 +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 { catalogHero, catalogGrid, 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.9.2';
+const THEME_VERSION = '0.10.1';
 
 export function layout(props: LayoutProps, body: string): string {
   const {