@press2ai/theme-specialist-glossy 0.6.4 → 0.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/package.json +1 -1
  2. package/src/styles/glossy.css +28 -44
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@press2ai/theme-specialist-glossy",
3
- "version": "0.6.4",
3
+ "version": "0.7.0",
4
4
  "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.",
5
5
  "type": "module",
6
6
  "license": "MIT",
package/src/styles/glossy.css CHANGED
@@ -57,16 +57,16 @@ body > header nav {
57
57
  body > header nav a { color: var(--ink-2); text-decoration: none; font-size: var(--t-sm); font-weight: 500; }
58
58
  body > header nav a strong { font-size: var(--t-md); font-weight: 700; color: var(--ink); }
59
59
 
60
- /* Main */
60
+ /* Main — no margin-bottom anywhere, only margin-top */
61
61
  main {
62
62
  max-width: var(--container); margin-inline: auto;
63
63
  padding-inline: var(--pad); padding-top: 0; padding-bottom: var(--g6);
64
64
  }
65
65
  main > h1:first-child, main > article:first-child { margin-top: var(--g5); }
66
- main > section { margin-bottom: var(--g6); }
67
66
 
68
- /* Footer — Swiss Design: grid, tight, structured */
67
+ /* Footer */
69
68
  body > footer {
69
+ margin-top: var(--g6);
70
70
  border-top: 1px solid var(--line); background: var(--white);
71
71
  padding: var(--g5) 0 var(--g4);
72
72
  }
@@ -76,7 +76,6 @@ body > footer > small {
76
76
  }
77
77
  body > footer a { color: var(--ink-2); transition: color var(--ease); }
78
78
  body > footer a:hover { color: var(--violet); }
79
-
80
79
  .footer-grid {
81
80
  display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--g4);
82
81
  max-width: var(--container); margin-inline: auto; padding-inline: var(--pad);
@@ -86,12 +85,8 @@ body > footer a:hover { color: var(--violet); }
86
85
  display: block; font-size: var(--t-xs); font-weight: 600; color: var(--ink);
87
86
  text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--g2);
88
87
  }
89
- .footer-col p {
90
- font-size: var(--t-xs); line-height: 1.6; color: var(--ink-3); margin: 0; max-width: 36ch;
91
- }
92
- .footer-col a {
93
- display: block; font-size: var(--t-xs); line-height: 2; color: var(--ink-3);
94
- }
88
+ .footer-col p { font-size: var(--t-xs); line-height: 1.6; color: var(--ink-3); margin: 0; max-width: 36ch; }
89
+ .footer-col a { display: block; font-size: var(--t-xs); line-height: 2; color: var(--ink-3); }
95
90
  .footer-col a:hover { color: var(--violet); }
96
91
  .footer-meta {
97
92
  max-width: var(--container); margin: 0 auto; padding: var(--g3) var(--pad) 0;
@@ -99,11 +94,11 @@ body > footer a:hover { color: var(--violet); }
99
94
  font-size: var(--t-xs); color: var(--ink-3); text-align: left;
100
95
  }
101
96
 
102
- /* Hero */
97
+ /* Hero — golden ratio: top g6, bottom g5 */
103
98
  hgroup {
104
99
  position: relative; text-align: center; isolation: isolate; overflow: hidden;
105
100
  padding: var(--g6) var(--pad) var(--g5);
106
- margin: 0 calc(50% - 50vw) var(--g6) calc(50% - 50vw);
101
+ margin: 0 calc(50% - 50vw) 0 calc(50% - 50vw);
107
102
  background:
108
103
  radial-gradient(ellipse 70% 50% at 20% 30%, var(--violet-glow) 0%, transparent 60%),
109
104
  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
143
138
  display: inline-flex; align-items: center; height: 44px; padding: 0 var(--g4);
144
139
  border-radius: var(--pill); font-weight: 600; font-size: var(--t-sm); transition: all var(--ease);
145
140
  }
146
- .cta-primary {
147
- background: var(--violet); color: var(--white);
148
- box-shadow: 0 4px 14px var(--violet-glow);
149
- }
141
+ .cta-primary { background: var(--violet); color: var(--white); box-shadow: 0 4px 14px var(--violet-glow); }
150
142
  .cta-primary:hover { background: var(--ink); color: var(--white); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(26,26,46,.2); }
151
143
  .cta-secondary { background: var(--white); color: var(--ink); border: 1px solid var(--line); }
152
144
  .cta-secondary:hover { border-color: var(--line-h); background: var(--bg); }
@@ -172,30 +164,28 @@ form[role="search"] button {
172
164
  }
173
165
  form[role="search"] button:hover { background: var(--ink); }
174
166
 
175
- /* Stats */
176
- section[aria-label="Statystyki"] { margin-bottom: var(--g6); }
167
+ /* Stats — margin-top only */
168
+ section[aria-label="Statystyki"] { margin-top: var(--g6); }
177
169
  .stat-summary {
178
170
  text-align: center; font-size: var(--t-md); font-weight: 500; line-height: 1.55;
179
171
  color: var(--ink); margin: 0 auto var(--g4); max-width: var(--measure);
180
172
  }
181
173
  section[aria-label="Statystyki"] > dl {
182
- display: flex; justify-content: center; gap: var(--g5);
183
- margin: 0 auto; padding: 0;
174
+ display: flex; justify-content: center; gap: var(--g5); margin: 0 auto; padding: 0;
184
175
  border: none; background: none; box-shadow: none;
185
176
  }
186
- section > dl div { text-align: center; }
177
+ section[aria-label="Statystyki"] > dl div { text-align: center; }
187
178
  .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); }
188
179
  .stat-icon svg { width: 18px; height: 18px; }
189
- section > dl dt { font-size: var(--t-lg); font-weight: 800; line-height: 1.2; color: var(--violet); }
190
- 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; }
180
+ section[aria-label="Statystyki"] > dl dt { font-size: var(--t-lg); font-weight: 800; line-height: 1.2; color: var(--violet); }
181
+ 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; }
191
182
 
192
- /* Category pills */
193
- nav[aria-label] { display: flex; flex-wrap: wrap; gap: var(--g1); margin-bottom: var(--g4); }
183
+ /* Category pills — margin-top only */
184
+ nav[aria-label] { display: flex; flex-wrap: wrap; gap: var(--g1); margin-top: var(--g5); }
194
185
  nav[aria-label] a {
195
186
  display: inline-flex; align-items: center; height: 32px; padding: 0 var(--g2);
196
187
  border-radius: var(--pill); font-size: var(--t-xs); font-weight: 500;
197
- background: var(--white); border: 1px solid var(--line); color: var(--ink-2);
198
- transition: all var(--ease);
188
+ background: var(--white); border: 1px solid var(--line); color: var(--ink-2); transition: all var(--ease);
199
189
  }
200
190
  nav[aria-label] a:nth-child(5n+1):hover { border-color: var(--violet); color: var(--violet); background: var(--violet-s); }
201
191
  nav[aria-label] a:nth-child(5n+2):hover { border-color: var(--teal); color: var(--teal); background: var(--teal-s); }
@@ -203,13 +193,12 @@ nav[aria-label] a:nth-child(5n+3):hover { border-color: var(--rose); color: var(
203
193
  nav[aria-label] a:nth-child(5n+4):hover { border-color: var(--amber); color: var(--amber); background: var(--amber-s); }
204
194
  nav[aria-label] a:nth-child(5n+5):hover { border-color: var(--sky); color: var(--sky); background: var(--sky-s); }
205
195
 
206
- /* How it works — full-bleed band */
196
+ /* How it works — full-bleed, margin-top only */
207
197
  .how-it-works {
208
- margin: 0 calc(50% - 50vw) var(--g6) calc(50% - 50vw);
198
+ margin: var(--g6) calc(50% - 50vw) 0 calc(50% - 50vw);
209
199
  padding: var(--g6) var(--pad);
210
200
  background: var(--white);
211
- border-top: 1px solid var(--line);
212
- border-bottom: 1px solid var(--line);
201
+ border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
213
202
  }
214
203
  .how-it-works > section { max-width: var(--container); margin: 0 auto; }
215
204
 
@@ -221,8 +210,7 @@ section > ol {
221
210
  }
222
211
  section > ol li {
223
212
  counter-increment: steps; background: var(--bg); border: 1px solid var(--line);
224
- border-radius: var(--r-lg); padding: var(--g4) var(--g3); text-align: center;
225
- transition: all var(--ease);
213
+ border-radius: var(--r-lg); padding: var(--g4) var(--g3); text-align: center; transition: all var(--ease);
226
214
  }
227
215
  section > ol li:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
228
216
  section > ol li::before {
@@ -238,8 +226,9 @@ section > ol li:nth-child(5n+5)::before { background: var(--sky-s); color: var(-
238
226
  section > ol li strong { display: block; font-size: var(--t-sm); line-height: 1.4; margin-bottom: 4px; color: var(--ink); }
239
227
  section > ol li span { font-size: var(--t-xs); line-height: 1.5; color: var(--ink-3); }
240
228
 
241
- /* Trainer cards */
229
+ /* Trainer cards — margin-top only */
242
230
  section:has(> article[itemscope]) {
231
+ margin-top: var(--g6);
243
232
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--g3);
244
233
  }
245
234
  section:has(> article[itemscope]) > h2 { grid-column: 1 / -1; margin-bottom: var(--g2); }
@@ -265,7 +254,6 @@ article[itemscope]:nth-child(5n+5) .card-avatar { background: var(--amber); }
265
254
  article[itemscope]:nth-child(5n+6) .card-avatar { background: var(--sky); }
266
255
  article[itemscope]:nth-child(5n+1) .card-avatar,
267
256
  article[itemscope]:first-child .card-avatar { background: var(--violet); }
268
-
269
257
  article[itemscope] header { margin-bottom: var(--g1); }
270
258
  article[itemscope] h2 { font-size: var(--t-sm); font-weight: 600; line-height: 1.3; margin: 0 0 2px; }
271
259
  article[itemscope] h2 a { color: var(--ink); }
@@ -279,20 +267,16 @@ article[itemscope] ul li {
279
267
  background: var(--violet-s); color: var(--violet);
280
268
  padding: 1px var(--g1); border-radius: var(--pill); font-size: 0.7rem; font-weight: 500;
281
269
  }
282
-
283
- /* Card CTA */
284
270
  .card-cta {
285
271
  display: inline-flex; align-items: center; margin-top: auto; padding-top: var(--g2);
286
- font-size: var(--t-xs); font-weight: 600; color: var(--violet);
287
- transition: all var(--ease);
272
+ font-size: var(--t-xs); font-weight: 600; color: var(--violet); transition: all var(--ease);
288
273
  }
289
274
  .card-cta:hover { color: var(--ink); gap: 4px; }
290
275
 
291
276
  /* Single trainer */
292
277
  main > article {
293
278
  max-width: var(--w-8); margin: 0 auto; background: var(--card);
294
- border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--g5);
295
- box-shadow: var(--shadow-md);
279
+ border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--g5); box-shadow: var(--shadow-md);
296
280
  }
297
281
  main > article > header { border-bottom: 1px solid var(--line); padding-bottom: var(--g3); margin-bottom: var(--g4); }
298
282
  main > article > header h1 { margin-bottom: var(--g2); }
@@ -315,7 +299,8 @@ main > article dd { margin: 0; font-size: var(--t-sm); }
315
299
  main > article > footer { margin-top: var(--g4); padding-top: var(--g3); border-top: 1px solid var(--line); text-align: center; }
316
300
 
317
301
  /* Pagination */
318
- 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); }
302
+ main > nav { margin-top: var(--g4); }
303
+ main > nav p { display: flex; align-items: center; justify-content: center; gap: var(--g3); font-size: var(--t-sm); color: var(--ink-3); }
319
304
  main > nav a {
320
305
  height: 32px; display: inline-flex; align-items: center; padding: 0 var(--g2);
321
306
  border-radius: var(--pill); background: var(--white); border: 1px solid var(--line);
@@ -347,13 +332,12 @@ form:not([role="search"]) button[type="submit"]:hover { background: var(--ink);
347
332
  hgroup { padding: var(--g5) var(--pad) var(--g4); }
348
333
  section:has(> article[itemscope]) { grid-template-columns: 1fr; }
349
334
  section > ol { grid-template-columns: 1fr; }
350
- section > dl { gap: var(--g3); }
335
+ section[aria-label="Statystyki"] > dl { gap: var(--g3); }
351
336
  main > article { padding: var(--g3); }
352
337
  main > article dl { grid-template-columns: 1fr; gap: calc(var(--g1) / 2) 0; }
353
338
  main > article dt { margin-top: var(--g2); }
354
339
  form[role="search"] { height: 40px; }
355
340
  form[role="search"] input { font-size: var(--t-xs); }
356
- .trust ul { text-align: left; }
357
341
  .how-it-works { padding: var(--g4) var(--pad); }
358
342
  .footer-grid { grid-template-columns: 1fr; gap: var(--g3); }
359
343
  }