@press2ai/theme-specialist-glossy 0.10.1 → 0.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@press2ai/theme-specialist-glossy",
-  "version": "0.10.1",
+  "version": "0.11.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",
@@ -35,6 +35,7 @@
     "./ProfileArticle.astro": "./src/components/ProfileArticle.astro",
     "./ProfileCard.astro": "./src/components/ProfileCard.astro",
     "./Hero.astro": "./src/components/Hero.astro",
+    "./styles": "./src/styles/index.ts",
     "./styles/glossy.css": "./src/styles/glossy.css",
     "./schema": "./src/schema.ts",
     "./ai": "./src/ai.ts"

package/src/index.ts

@@ -1,11 +1,3 @@
 export { profileSchema, type Profile } from './schema.ts';
 export { getJsonSchema, getAiManifest, getJsonLd } from './ai.ts';
-// Framework-agnostic templates (Hono, Cloudflare Workers, plain Node):
-//   import { layout, hero, profileCard, profileArticle } from '@press2ai/theme-specialist-glossy/templates';
-//
-// Astro components (thin wrappers over templates):
-//   import Layout from '@press2ai/theme-specialist-glossy/Layout.astro';
-//   import ProfileArticle from '@press2ai/theme-specialist-glossy/ProfileArticle.astro';
-//
-// CSS (classless, works with any framework):
-//   import '@press2ai/theme-specialist-glossy/styles/glossy.css';
+export { composeCss, allCss } from './styles/index.ts';

package/src/styles/base.ts

@@ -0,0 +1,46 @@
+export const css = `@import url('https://rsms.me/inter/inter.css');
+
+:root {
+  --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: #f8f9fb; --card: #ffffff;
+  --ink: #1a1a2e; --ink-2: #4a4a68; --ink-3: #8b8ba3;
+  --line: #e8e8ef; --line-h: #d0d0de;
+  --violet: #7c5cfc; --violet-s: #f3f0ff; --violet-glow: rgba(124,92,252,.18);
+  --teal: #0d9488; --teal-s: #ecfdf5;
+  --rose: #e11d63; --rose-s: #fff1f5;
+  --amber: #d97706; --amber-s: #fffbeb;
+  --sky: #0284c7; --sky-s: #f0f9ff;
+  --r: 16px; --r-lg: 20px; --pill: 999px;
+  --shadow: 0 1px 3px rgba(0,0,0,.04);
+  --shadow-md: 0 4px 16px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04);
+  --shadow-up: 0 8px 24px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.03);
+  --ease: 200ms cubic-bezier(.4,0,.2,1);
+}
+*, *::before, *::after { box-sizing: border-box; margin: 0; }
+html { font-size: 16px; -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }
+body {
+  font-family: var(--font); font-feature-settings: 'cv11', 'ss01';
+  color: var(--ink); background: var(--bg); line-height: 1.6; overflow-x: clip;
+}
+h1, h2, h3 { color: var(--ink); letter-spacing: -0.02em; }
+h1 { font-size: clamp(var(--t-xl), 5vw, var(--t-2xl)); font-weight: 800; line-height: 1.1; letter-spacing: -0.035em; margin-bottom: var(--g3); }
+h2 { font-size: var(--t-lg); font-weight: 700; line-height: 1.25; margin-bottom: var(--g2); }
+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(--g2); 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; }
+main {
+  max-width: var(--container); margin-inline: auto;
+  padding-inline: var(--pad); padding-top: 0; padding-bottom: 0;
+}
+main > * + * { margin-top: var(--g5); }
+@media (max-width: 640px) {
+  :root { --pad: var(--g3); }
+  main { padding: 0 var(--pad) var(--g4); }
+}`;

package/src/styles/catalog-grid.ts

@@ -0,0 +1,8 @@
+export const css = `section:has(> article[itemscope]) {
+  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-bottom: var(--g2); }
+@media (max-width: 640px) {
+  section:has(> article[itemscope]) { grid-template-columns: 1fr; }
+}`;

package/src/styles/category-nav.ts

@@ -0,0 +1,7 @@
+export const css = `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;
+  background: var(--white); border: 1px solid var(--line); color: var(--ink-2); transition: all var(--ease);
+}
+nav[aria-label] a:hover { border-color: var(--violet); color: var(--violet); background: var(--violet-s); }`;

package/src/styles/footer.ts

@@ -0,0 +1,29 @@
+export const css = `body > footer {
+  border-top: 1px solid var(--line); background: var(--white);
+  padding: var(--g5) 0 var(--g4);
+}
+body > footer > small {
+  display: block; max-width: var(--container); margin-inline: auto; padding-inline: var(--pad);
+  color: var(--ink-3); font-size: var(--t-xs);
+}
+body > footer a { color: var(--ink-2); transition: color var(--ease); }
+body > footer a:hover { color: var(--violet); }
+body > footer > small > nav {
+  display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--g4);
+  margin-bottom: var(--g4);
+}
+body > footer > small > nav section { all: unset; display: block; }
+body > footer > small > nav strong {
+  display: block; font-size: var(--t-xs); font-weight: 600; color: var(--ink);
+  text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--g2);
+}
+body > footer > small > nav p { font-size: var(--t-xs); line-height: 1.6; color: var(--ink-3); margin: 0; max-width: 36ch; }
+body > footer > small > nav a { display: block; font-size: var(--t-xs); line-height: 2; color: var(--ink-3); }
+body > footer > small > nav a:hover { color: var(--violet); }
+body > footer > small > p {
+  padding-top: var(--g3); border-top: 1px solid var(--line);
+  font-size: var(--t-xs); color: var(--ink-3); text-align: left;
+}
+@media (max-width: 640px) {
+  body > footer > small > nav { grid-template-columns: 1fr; gap: var(--g3); }
+}`;

package/src/styles/forms.ts

@@ -0,0 +1,15 @@
+export const css = `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: 44px;
+  padding: 0 var(--g3); 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 var(--violet-glow); }
+form:not([role="search"]) button[type="submit"] {
+  margin-top: var(--g3); height: 44px; 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: all var(--ease); box-shadow: 0 4px 14px var(--violet-glow);
+}
+form:not([role="search"]) button[type="submit"]:hover { background: var(--ink); transform: translateY(-1px); }`;

package/src/styles/glossy.css

@@ -287,7 +287,7 @@ main > article ul li {
 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(--g4); 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); font-size: var(--t-sm); color: var(--ink-3); }

package/src/styles/header.ts

@@ -0,0 +1,12 @@
+export const css = `body > header {
+  position: sticky; top: 0; z-index: 50;
+  background: rgba(255,255,255,.82);
+  backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px);
+  border-bottom: 1px solid var(--line);
+}
+body > header nav {
+  max-width: var(--container); margin-inline: auto; padding-inline: var(--pad);
+  height: 48px; 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); }`;

package/src/styles/hero.ts

@@ -0,0 +1,72 @@
+export const css = `hgroup {
+  position: relative; text-align: center; isolation: isolate; overflow: hidden;
+  padding: var(--g6) var(--pad) var(--g5);
+  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%),
+    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(225,29,99,.08) 0%, transparent 50%),
+    linear-gradient(180deg, #fff 0%, var(--bg) 100%);
+  border-bottom: 1px solid var(--line);
+}
+hgroup::before {
+  content: ''; position: absolute; inset: 0;
+  background-image:
+    linear-gradient(rgba(124,92,252,.04) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(124,92,252,.04) 1px, transparent 1px);
+  background-size: 48px 48px;
+  mask-image: radial-gradient(ellipse 60% 50% at 50% 40%, black 0%, transparent 70%);
+  -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 40%, black 0%, transparent 70%);
+  z-index: -1;
+}
+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: var(--g1);
+  background: rgba(255,255,255,.7); backdrop-filter: blur(8px);
+  padding: var(--g1) var(--g2); border: 1px solid var(--line);
+  border-radius: var(--pill); font-size: var(--t-xs); font-weight: 600; color: var(--teal);
+  box-shadow: var(--shadow);
+}
+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,.2); }
+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); }
+hgroup > nav {
+  display: flex; gap: var(--g2); flex-wrap: wrap; justify-content: center;
+  margin-top: var(--g4); margin-bottom: 0;
+}
+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);
+}
+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); }
+form[role="search"] {
+  display: flex; max-width: var(--w-6); height: 48px;
+  margin: var(--g4) auto 0; background: var(--white);
+  border: 1px solid var(--line); border-radius: var(--pill);
+  overflow: hidden; box-shadow: var(--shadow-md); transition: all var(--ease);
+}
+form[role="search"]:focus-within { border-color: var(--violet); box-shadow: 0 4px 16px var(--violet-glow); }
+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;
+  -webkit-appearance: none; appearance: none;
+}
+form[role="search"] input::placeholder { color: var(--ink-3); }
+form[role="search"] button {
+  flex-shrink: 0; height: 100%; 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); }
+@media (max-width: 640px) {
+  hgroup { padding: var(--g5) var(--pad) var(--g4); }
+  form[role="search"] { height: 40px; }
+  form[role="search"] input { font-size: var(--t-xs); }
+}`;

package/src/styles/index.ts

@@ -0,0 +1,34 @@
+import { css as base } from './base.ts';
+import { css as header } from './header.ts';
+import { css as footer } from './footer.ts';
+import { css as hero } from './hero.ts';
+import { css as statBar } from './stat-bar.ts';
+import { css as categoryNav } from './category-nav.ts';
+import { css as steps } from './steps.ts';
+import { css as catalogGrid } from './catalog-grid.ts';
+import { css as profileCard } from './profile-card.ts';
+import { css as profileArticle } from './profile-article.ts';
+import { css as pagination } from './pagination.ts';
+import { css as forms } from './forms.ts';
+
+const components: Record<string, string> = {
+  hero,
+  statBar,
+  categoryNav,
+  steps,
+  catalogGrid,
+  profileCard,
+  profileArticle,
+  pagination,
+  forms,
+};
+
+const layoutCss = base + '\n' + header + '\n' + footer;
+
+export function composeCss(...names: string[]): string {
+  return layoutCss + '\n' + names.map(n => components[n] ?? '').join('\n');
+}
+
+export const allCss = layoutCss + '\n' + Object.values(components).join('\n');
+
+export { base, header, footer, hero, statBar, categoryNav, steps, catalogGrid, profileCard, profileArticle, pagination, forms };

package/src/styles/pagination.ts

@@ -0,0 +1,7 @@
+export const css = `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);
+  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); transform: translateY(-1px); }`;

package/src/styles/profile-article.ts

@@ -0,0 +1,27 @@
+export const css = `main > article {
+  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); }
+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(--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(--g4) 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(--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); }
+@media (max-width: 640px) {
+  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/styles/profile-card.ts

@@ -0,0 +1,35 @@
+export const css = `article[itemscope] {
+  position: relative; background: var(--card); border: 1px solid var(--line);
+  border-radius: var(--r-lg); padding: var(--g3);
+  display: flex; flex-direction: column;
+  box-shadow: var(--shadow); transition: all var(--ease);
+}
+article[itemscope]:hover { transform: translateY(-2px); box-shadow: var(--shadow-up); border-color: var(--line-h); }
+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] 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; }
+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;
+}
+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);
+}
+article[itemscope] > a:last-child:hover { color: var(--ink); gap: 4px; }`;

package/src/styles/stat-bar.ts

@@ -0,0 +1,19 @@
+export const css = `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:has(> dl) > dl {
+  display: flex; justify-content: center; gap: var(--g5); margin: 0 auto; padding: 0;
+  border: none; background: none; box-shadow: none;
+}
+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; }
+@media (max-width: 640px) {
+  section:has(> dl) > dl { gap: var(--g3); }
+}`;

package/src/styles/steps.ts

@@ -0,0 +1,29 @@
+export const css = `section:has(> ol) {
+  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);
+}
+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 auto; counter-reset: steps;
+}
+section > ol li {
+  counter-increment: steps; background: var(--bg); border: 1px solid var(--line);
+  border-radius: var(--r-lg); padding: var(--g4) var(--g3); text-align: center; transition: all var(--ease);
+}
+section > ol li:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
+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 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); }
+@media (max-width: 640px) {
+  section > ol { grid-template-columns: 1fr; }
+  section:has(> ol) { padding: var(--g4) var(--pad); }
+}`;

package/src/templates/layout.ts

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