@press2ai/theme-specialist-glossy 0.6.4 → 0.7.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@press2ai/theme-specialist-glossy",
-  "version": "0.6.4",
+  "version": "0.7.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,16 +57,16 @@ 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 */
+/* Main — no margin-bottom anywhere, only margin-top */
 main {
   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(--g5); }
-main > section { margin-bottom: var(--g6); }
 
-/* Footer — Swiss Design: grid, tight, structured */
+/* Footer */
 body > footer {
+  margin-top: var(--g6);
   border-top: 1px solid var(--line); background: var(--white);
   padding: var(--g5) 0 var(--g4);
 }
@@ -76,7 +76,6 @@ body > footer > small {
 }
 body > footer a { color: var(--ink-2); transition: color var(--ease); }
 body > footer a:hover { color: var(--violet); }
-
 .footer-grid {
   display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--g4);
   max-width: var(--container); margin-inline: auto; padding-inline: var(--pad);
@@ -86,12 +85,8 @@ body > footer a:hover { color: var(--violet); }
   display: block; font-size: var(--t-xs); font-weight: 600; color: var(--ink);
   text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--g2);
 }
-.footer-col p {
-  font-size: var(--t-xs); line-height: 1.6; color: var(--ink-3); margin: 0; max-width: 36ch;
-}
-.footer-col a {
-  display: block; font-size: var(--t-xs); line-height: 2; color: var(--ink-3);
-}
+.footer-col p { font-size: var(--t-xs); line-height: 1.6; color: var(--ink-3); margin: 0; max-width: 36ch; }
+.footer-col a { display: block; font-size: var(--t-xs); line-height: 2; color: var(--ink-3); }
 .footer-col a:hover { color: var(--violet); }
 .footer-meta {
   max-width: var(--container); margin: 0 auto; padding: var(--g3) var(--pad) 0;
@@ -99,11 +94,11 @@ body > footer a:hover { color: var(--violet); }
   font-size: var(--t-xs); color: var(--ink-3); text-align: left;
 }
 
-/* Hero */
+/* Hero — golden ratio: top g6, bottom g5 */
 hgroup {
   position: relative; text-align: center; isolation: isolate; overflow: hidden;
   padding: var(--g6) var(--pad) var(--g5);
-  margin: 0 calc(50% - 50vw) var(--g6) calc(50% - 50vw);
+  margin: 0 calc(50% - 50vw) 0 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%),
@@ -143,10 +138,7 @@ hgroup p { font-size: var(--t-md); line-height: 1.55; color: var(--ink-2); max-w
   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);
 }
-.cta-primary {
-  background: var(--violet); color: var(--white);
-  box-shadow: 0 4px 14px var(--violet-glow);
-}
+.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); }
@@ -172,30 +164,28 @@ form[role="search"] button {
 }
 form[role="search"] button:hover { background: var(--ink); }
 
-/* Stats */
-section[aria-label="Statystyki"] { margin-bottom: var(--g6); }
+/* Stats — margin-top only, visually separated */
+section[aria-label="Statystyki"] { margin-top: var(--g6); padding-top: var(--g5); border-top: 1px solid var(--line); }
 .stat-summary {
   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 {
-  display: flex; justify-content: center; gap: var(--g5);
-  margin: 0 auto; padding: 0;
+  display: flex; justify-content: center; gap: var(--g5); margin: 0 auto; padding: 0;
   border: none; background: none; box-shadow: none;
 }
-section > dl div { text-align: center; }
+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 > dl dt { font-size: var(--t-lg); font-weight: 800; line-height: 1.2; color: var(--violet); }
-section > 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[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; }
 
-/* Category pills */
-nav[aria-label] { display: flex; flex-wrap: wrap; gap: var(--g1); margin-bottom: var(--g4); }
+/* Category pills — margin-top only */
+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);
+  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); }
@@ -203,15 +193,15 @@ nav[aria-label] a:nth-child(5n+3):hover { border-color: var(--rose); color: var(
 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); }
 
-/* How it works — full-bleed band */
-.how-it-works {
-  margin: 0 calc(50% - 50vw) var(--g6) calc(50% - 50vw);
-  padding: var(--g6) var(--pad);
-  background: var(--white);
-  border-top: 1px solid var(--line);
-  border-bottom: 1px solid var(--line);
-}
-.how-it-works > section { max-width: var(--container); margin: 0 auto; }
+/* Full-bleed bands — reusable */
+.band, .band-muted {
+  margin: 0 calc(50% - 50vw) 0 calc(50% - 50vw);
+  padding: var(--g5) var(--pad);
+  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
+}
+.band { background: var(--white); }
+.band-muted { background: var(--bg); }
+.band > *, .band-muted > * { max-width: var(--container); margin-inline: auto; }
 
 /* Steps */
 section:has(> ol) > h2 { text-align: center; margin-bottom: var(--g4); }
@@ -221,8 +211,7 @@ section > ol {
 }
 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);
+  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 {
@@ -238,8 +227,9 @@ section > ol li:nth-child(5n+5)::before { background: var(--sky-s); color: var(-
 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 */
+/* Trainer cards — margin-top only */
 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); }
@@ -265,7 +255,6 @@ 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); }
@@ -279,20 +268,16 @@ 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 */
 .card-cta {
   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);
+  font-size: var(--t-xs); font-weight: 600; color: var(--violet); transition: all var(--ease);
 }
 .card-cta:hover { color: var(--ink); gap: 4px; }
 
 /* Single trainer */
 main > article {
   max-width: var(--w-8); margin: 0 auto; background: var(--card);
-  border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--g5);
-  box-shadow: var(--shadow-md);
+  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); }
@@ -315,7 +300,8 @@ 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); padding: var(--g3) 0; font-size: var(--t-sm); color: var(--ink-3); }
+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);
   border-radius: var(--pill); background: var(--white); border: 1px solid var(--line);
@@ -347,13 +333,12 @@ 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 > dl { gap: var(--g3); }
+  section[aria-label="Statystyki"] > 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); }
   form[role="search"] { height: 40px; }
   form[role="search"] input { font-size: var(--t-xs); }
-  .trust ul { text-align: left; }
-  .how-it-works { padding: var(--g4) var(--pad); }
+  .band, .band-muted { padding: var(--g4) var(--pad); }
   .footer-grid { grid-template-columns: 1fr; gap: var(--g3); }
 }