@hale-bopp/valentino-engine 2.4.0 → 2.5.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.
@@ -0,0 +1,400 @@
1
+ /* === VALENTINO FRAMEWORK BASE (Universal) ===
2
+ * Surface remaps, rhythm profiles, typography, grid, utilities.
3
+ * This file is framework-agnostic: no site-specific colors, logos, or layouts.
4
+ * Source of truth: valentino-engine (will move to npm package in v2.5.0).
5
+ */
6
+
7
+ /* --- Resets & Baselines --- */
8
+ * {
9
+ box-sizing: border-box;
10
+ margin: 0;
11
+ padding: 0;
12
+ }
13
+
14
+ body {
15
+ background-color: var(--bg-deep-void);
16
+ color: var(--text-primary);
17
+ font-family: var(--font-family);
18
+ line-height: 1.6;
19
+ overflow-x: hidden;
20
+ min-height: 100vh;
21
+ display: flex;
22
+ flex-direction: column;
23
+ }
24
+
25
+ /* --- Valentino Section Shell --- */
26
+ .valentino-section-shell {
27
+ position: relative;
28
+ padding: var(--valentino-rhythm-shell-padding, clamp(2.5rem, 4vw, 4.5rem)) 0;
29
+ background: var(--valentino-surface-bg, #ffffff);
30
+ color: var(--valentino-surface-text, #0f172a);
31
+ --valentino-rhythm-body-measure: var(--valentino-rhythm-measure-feature);
32
+ --valentino-rhythm-header-measure: var(--valentino-rhythm-measure-feature);
33
+ --valentino-rhythm-cluster-gap: var(--valentino-rhythm-space-block-m);
34
+ }
35
+
36
+ .valentino-section-shell[data-height='screen-sm'] {
37
+ min-height: min(62svh, 720px);
38
+ }
39
+
40
+ .valentino-section-shell[data-height='screen-md'] {
41
+ min-height: min(78svh, 920px);
42
+ }
43
+
44
+ .valentino-section-shell[data-height='screen-full'] {
45
+ min-height: calc(100svh - 92px);
46
+ }
47
+
48
+ /* --- Surface Variants --- */
49
+ .valentino-section-shell[data-surface='default'] {
50
+ --valentino-surface-bg: var(--valentino-surface-default-background);
51
+ --valentino-surface-text: var(--valentino-surface-default-text);
52
+ --valentino-surface-muted: var(--valentino-surface-default-text-muted);
53
+ --valentino-card-bg: var(--valentino-surface-default-card-bg);
54
+ --valentino-card-border: var(--valentino-surface-default-card-border);
55
+ /* Light-surface remaps: dark-themed tokens accessible on white */
56
+ --text-primary: #0f172a;
57
+ --text-secondary: var(--valentino-surface-default-text-muted);
58
+ --text-sovereign-gold: #92400e;
59
+ --accent-neural-cyan: #0b6a82;
60
+ --rgb-neural-cyan: 14, 116, 144;
61
+ --accent-violet: #6d28d9;
62
+ --rgb-violet: 109, 40, 217;
63
+ --code-gold: #92400e;
64
+ --code-cyan: #0b6a82;
65
+ }
66
+
67
+ .valentino-section-shell[data-surface='muted'] {
68
+ --valentino-surface-bg: var(--valentino-surface-muted-background);
69
+ --valentino-surface-text: var(--valentino-surface-muted-text);
70
+ --valentino-surface-muted: var(--valentino-surface-muted-text-muted);
71
+ --valentino-card-bg: var(--valentino-surface-muted-card-bg);
72
+ --valentino-card-border: var(--valentino-surface-muted-card-border);
73
+ --text-primary: #0f172a;
74
+ --text-secondary: var(--valentino-surface-muted-text-muted);
75
+ --text-sovereign-gold: #92400e;
76
+ --accent-neural-cyan: #0b6a82;
77
+ --rgb-neural-cyan: 14, 116, 144;
78
+ --accent-violet: #6d28d9;
79
+ --rgb-violet: 109, 40, 217;
80
+ --code-gold: #92400e;
81
+ --code-cyan: #0b6a82;
82
+ }
83
+
84
+ .valentino-section-shell[data-surface='accent'] {
85
+ --valentino-surface-bg: var(--valentino-surface-accent-background);
86
+ --valentino-surface-text: var(--valentino-surface-accent-text);
87
+ --valentino-surface-muted: var(--valentino-surface-accent-text-muted);
88
+ --valentino-card-bg: var(--valentino-surface-accent-card-bg);
89
+ --valentino-card-border: var(--valentino-surface-accent-card-border);
90
+ --text-primary: #1f2937;
91
+ --text-secondary: var(--valentino-surface-accent-text-muted);
92
+ --text-sovereign-gold: #92400e;
93
+ --accent-neural-cyan: #0b6a82;
94
+ --rgb-neural-cyan: 14, 116, 144;
95
+ --accent-violet: #6d28d9;
96
+ --rgb-violet: 109, 40, 217;
97
+ --code-gold: #92400e;
98
+ --code-cyan: #0b6a82;
99
+ }
100
+
101
+ .valentino-section-shell[data-surface='dark'] {
102
+ --valentino-surface-bg: var(--valentino-surface-dark-background);
103
+ --valentino-surface-text: var(--valentino-surface-dark-text);
104
+ --valentino-surface-muted: var(--valentino-surface-dark-text-muted);
105
+ --valentino-card-bg: var(--valentino-surface-dark-card-bg);
106
+ --valentino-card-border: var(--valentino-surface-dark-card-border);
107
+ }
108
+
109
+ .valentino-section-shell[data-surface='shell-dark'] {
110
+ --valentino-surface-bg: var(--valentino-surface-shell-dark-background);
111
+ --valentino-surface-text: var(--valentino-surface-shell-dark-text);
112
+ --valentino-surface-muted: var(--valentino-surface-shell-dark-text-muted);
113
+ --valentino-card-bg: var(--valentino-surface-shell-dark-card-bg);
114
+ --valentino-card-border: var(--valentino-surface-shell-dark-card-border);
115
+ }
116
+
117
+ .valentino-section-shell[data-surface='reading-light'] {
118
+ --valentino-surface-bg: var(--valentino-surface-reading-light-background);
119
+ --valentino-surface-text: var(--valentino-surface-reading-light-text);
120
+ --valentino-surface-muted: var(--valentino-surface-reading-light-text-muted);
121
+ --valentino-card-bg: var(--valentino-surface-reading-light-card-bg);
122
+ --valentino-card-border: var(--valentino-surface-reading-light-card-border);
123
+ --text-primary: #0f172a;
124
+ --text-secondary: var(--valentino-surface-reading-light-text-muted);
125
+ --text-sovereign-gold: #92400e;
126
+ --accent-neural-cyan: #0b6a82;
127
+ --rgb-neural-cyan: 14, 116, 144;
128
+ --accent-violet: #6d28d9;
129
+ --rgb-violet: 109, 40, 217;
130
+ --code-gold: #92400e;
131
+ --code-cyan: #0b6a82;
132
+ }
133
+
134
+ .valentino-section-shell[data-surface='ops-light'] {
135
+ --valentino-surface-bg: var(--valentino-surface-ops-light-background);
136
+ --valentino-surface-text: var(--valentino-surface-ops-light-text);
137
+ --valentino-surface-muted: var(--valentino-surface-ops-light-text-muted);
138
+ --valentino-card-bg: var(--valentino-surface-ops-light-card-bg);
139
+ --valentino-card-border: var(--valentino-surface-ops-light-card-border);
140
+ --text-primary: #0f172a;
141
+ --text-secondary: var(--valentino-surface-ops-light-text-muted);
142
+ --text-sovereign-gold: #92400e;
143
+ --accent-neural-cyan: #0b6a82;
144
+ --rgb-neural-cyan: 14, 116, 144;
145
+ --accent-violet: #6d28d9;
146
+ --rgb-violet: 109, 40, 217;
147
+ --code-gold: #92400e;
148
+ --code-cyan: #0b6a82;
149
+ }
150
+
151
+ /* --- Rhythm Profiles --- */
152
+ .valentino-section-shell[data-rhythm-profile='hero'] {
153
+ --valentino-rhythm-shell-padding: var(--valentino-rhythm-space-block-xl);
154
+ --valentino-rhythm-body-measure: var(--valentino-rhythm-measure-support);
155
+ --valentino-rhythm-header-measure: var(--valentino-rhythm-measure-compact);
156
+ --valentino-rhythm-cluster-gap: var(--valentino-rhythm-space-block-l);
157
+ }
158
+
159
+ .valentino-section-shell[data-rhythm-profile='transition'] {
160
+ --valentino-rhythm-shell-padding: var(--valentino-rhythm-space-block-l);
161
+ --valentino-rhythm-body-measure: var(--valentino-rhythm-measure-support);
162
+ --valentino-rhythm-header-measure: var(--valentino-rhythm-measure-compact);
163
+ --valentino-rhythm-cluster-gap: var(--valentino-rhythm-space-block-m);
164
+ }
165
+
166
+ .valentino-section-shell[data-rhythm-profile='feature'],
167
+ .valentino-section-shell[data-rhythm-profile='proof'] {
168
+ --valentino-rhythm-shell-padding: var(--valentino-rhythm-space-block-l);
169
+ --valentino-rhythm-body-measure: var(--valentino-rhythm-measure-feature);
170
+ --valentino-rhythm-header-measure: var(--valentino-rhythm-measure-support);
171
+ --valentino-rhythm-cluster-gap: var(--valentino-rhythm-space-block-m);
172
+ }
173
+
174
+ .valentino-section-shell[data-rhythm-profile='metrics'] {
175
+ --valentino-rhythm-shell-padding: var(--valentino-rhythm-space-block-m);
176
+ --valentino-rhythm-body-measure: var(--valentino-rhythm-measure-compact);
177
+ --valentino-rhythm-header-measure: var(--valentino-rhythm-measure-compact);
178
+ --valentino-rhythm-cluster-gap: var(--valentino-rhythm-space-stack-l);
179
+ }
180
+
181
+ .valentino-section-shell[data-rhythm-profile='reading'] {
182
+ --valentino-rhythm-shell-padding: var(--valentino-rhythm-space-block-xl);
183
+ --valentino-rhythm-body-measure: var(--valentino-rhythm-measure-reading);
184
+ --valentino-rhythm-header-measure: var(--valentino-rhythm-measure-support);
185
+ --valentino-rhythm-cluster-gap: var(--valentino-rhythm-space-block-l);
186
+ }
187
+
188
+ .valentino-section-shell[data-rhythm-profile='ops'] {
189
+ --valentino-rhythm-shell-padding: var(--valentino-rhythm-space-block-m);
190
+ --valentino-rhythm-body-measure: var(--valentino-rhythm-measure-ops);
191
+ --valentino-rhythm-header-measure: var(--valentino-rhythm-measure-support);
192
+ --valentino-rhythm-cluster-gap: var(--valentino-rhythm-space-stack-l);
193
+ }
194
+
195
+ /* --- Surface Utility Cascade (generic selectors only) --- */
196
+ .valentino-section-shell h1,
197
+ .valentino-section-shell h2,
198
+ .valentino-section-shell h3,
199
+ .valentino-section-shell h4 {
200
+ color: var(--valentino-surface-text);
201
+ }
202
+
203
+ .valentino-section-shell p {
204
+ color: var(--valentino-surface-muted);
205
+ }
206
+
207
+ /* --- Runtime Loading Guard --- */
208
+ body.runtime-loading #page-root {
209
+ min-height: 80vh;
210
+ }
211
+
212
+ body.runtime-loading #page-root::after {
213
+ content: '';
214
+ display: block;
215
+ height: 160px;
216
+ margin: 2rem auto 0;
217
+ max-width: 900px;
218
+ border-radius: 12px;
219
+ background: linear-gradient(90deg, rgba(15, 30, 45, 0.4), rgba(15, 30, 45, 0.1), rgba(15, 30, 45, 0.4));
220
+ background-size: 200% 100%;
221
+ animation: runtime-sheen 1.4s ease-in-out infinite;
222
+ opacity: 0.6;
223
+ }
224
+
225
+ body.runtime-loading sovereign-footer {
226
+ opacity: 0;
227
+ pointer-events: none;
228
+ }
229
+
230
+ @keyframes runtime-sheen {
231
+ 0% {
232
+ background-position: 0% 50%;
233
+ }
234
+
235
+ 100% {
236
+ background-position: 200% 50%;
237
+ }
238
+ }
239
+
240
+ /* --- Typography Scale (Fluid) --- */
241
+ .h1 {
242
+ font-size: var(--text-step-5);
243
+ line-height: var(--valentino-rhythm-leading-display, 1.1);
244
+ font-weight: 800;
245
+ letter-spacing: -0.02em;
246
+ }
247
+
248
+ .h2 {
249
+ font-size: var(--text-step-4);
250
+ line-height: var(--valentino-rhythm-leading-display, 1.15);
251
+ font-weight: 700;
252
+ letter-spacing: -0.01em;
253
+ }
254
+
255
+ .h3 {
256
+ font-size: var(--text-step-3);
257
+ line-height: var(--valentino-rhythm-leading-display, 1.2);
258
+ font-weight: 600;
259
+ }
260
+
261
+ .h4 {
262
+ font-size: var(--text-step-2);
263
+ line-height: var(--valentino-rhythm-leading-display, 1.3);
264
+ font-weight: 600;
265
+ }
266
+
267
+ .h5 {
268
+ font-size: var(--text-step-1);
269
+ line-height: var(--valentino-rhythm-leading-body, 1.4);
270
+ font-weight: 600;
271
+ }
272
+
273
+ .body-large {
274
+ font-size: var(--text-step-0);
275
+ line-height: var(--valentino-rhythm-leading-body, 1.6);
276
+ }
277
+
278
+ /* --- Utilities --- */
279
+ .text-gold {
280
+ color: var(--text-sovereign-gold);
281
+ }
282
+
283
+ .text-cyan {
284
+ color: var(--accent-neural-cyan);
285
+ }
286
+
287
+ .text-gradient {
288
+ background: linear-gradient(135deg, var(--text-sovereign-gold), var(--accent-neural-cyan), var(--accent-violet));
289
+ -webkit-background-clip: text;
290
+ background-clip: text;
291
+ -webkit-text-fill-color: transparent;
292
+ }
293
+
294
+ .text-violet {
295
+ color: var(--accent-violet);
296
+ }
297
+
298
+ .container {
299
+ max-width: 1200px;
300
+ margin: 0 auto;
301
+ padding: 0 2rem;
302
+ }
303
+
304
+ /* --- Button Base --- */
305
+ .btn {
306
+ display: inline-flex;
307
+ align-items: center;
308
+ justify-content: center;
309
+ padding: 0 1.5rem;
310
+ height: 48px;
311
+ min-width: 140px;
312
+ font-weight: 600;
313
+ text-decoration: none;
314
+ border-radius: 8px;
315
+ transition: all var(--transition-ease);
316
+ cursor: pointer;
317
+ border: 1px solid transparent;
318
+ }
319
+
320
+ /* --- Animation Presets --- */
321
+ .anim-ready { opacity: 0; transition: opacity 0.6s ease, transform 0.6s ease; }
322
+ .anim-ready.anim-visible { opacity: 1; transform: none; }
323
+
324
+ .anim-fade-up { transform: translateY(24px); }
325
+ .anim-fade-in { transform: none; }
326
+ .anim-slide-left { transform: translateX(40px); }
327
+ .anim-slide-right { transform: translateX(-40px); }
328
+ .anim-scale-in { transform: scale(0.95); }
329
+
330
+ @media (prefers-reduced-motion: reduce) {
331
+ .anim-ready { opacity: 1; transform: none; transition: none; }
332
+ }
333
+
334
+ /* --- Grid System --- */
335
+ .row {
336
+ display: flex;
337
+ flex-wrap: wrap;
338
+ gap: 1rem;
339
+ width: 100%;
340
+ }
341
+
342
+ .row.no-gap {
343
+ gap: 0;
344
+ }
345
+
346
+ .row.gap-sm {
347
+ gap: 0.5rem;
348
+ }
349
+
350
+ .row.gap-lg {
351
+ gap: 2rem;
352
+ }
353
+
354
+ .col-12 { flex: 0 0 100%; max-width: 100%; }
355
+ .col-11 { flex: 0 0 calc(91.666% - 0.917rem); max-width: calc(91.666% - 0.917rem); }
356
+ .col-10 { flex: 0 0 calc(83.333% - 0.833rem); max-width: calc(83.333% - 0.833rem); }
357
+ .col-9 { flex: 0 0 calc(75% - 0.75rem); max-width: calc(75% - 0.75rem); }
358
+ .col-8 { flex: 0 0 calc(66.666% - 0.667rem); max-width: calc(66.666% - 0.667rem); }
359
+ .col-7 { flex: 0 0 calc(58.333% - 0.583rem); max-width: calc(58.333% - 0.583rem); }
360
+ .col-6 { flex: 0 0 calc(50% - 0.5rem); max-width: calc(50% - 0.5rem); }
361
+ .col-5 { flex: 0 0 calc(41.666% - 0.417rem); max-width: calc(41.666% - 0.417rem); }
362
+ .col-4 { flex: 0 0 calc(33.333% - 0.667rem); max-width: calc(33.333% - 0.667rem); }
363
+ .col-3 { flex: 0 0 calc(25% - 0.75rem); max-width: calc(25% - 0.75rem); }
364
+ .col-2 { flex: 0 0 calc(16.666% - 0.833rem); max-width: calc(16.666% - 0.833rem); }
365
+ .col-1 { flex: 0 0 calc(8.333% - 0.917rem); max-width: calc(8.333% - 0.917rem); }
366
+
367
+ .col-auto {
368
+ flex: 0 0 auto;
369
+ width: auto;
370
+ }
371
+
372
+ @media (max-width: 768px) {
373
+ .col-6, .col-4, .col-3, .col-2, .col-1,
374
+ .col-5, .col-7, .col-8, .col-9, .col-10, .col-11 {
375
+ flex: 0 0 100%;
376
+ max-width: 100%;
377
+ }
378
+
379
+ .col-md-6 {
380
+ flex: 0 0 calc(50% - 0.5rem);
381
+ max-width: calc(50% - 0.5rem);
382
+ }
383
+
384
+ .col-md-4 {
385
+ flex: 0 0 calc(33.333% - 0.667rem);
386
+ max-width: calc(33.333% - 0.667rem);
387
+ }
388
+
389
+ .col-md-12 {
390
+ flex: 0 0 100%;
391
+ max-width: 100%;
392
+ }
393
+ }
394
+
395
+ @media (max-width: 500px) {
396
+ .col-md-6, .col-md-4 {
397
+ flex: 0 0 100%;
398
+ max-width: 100%;
399
+ }
400
+ }
@@ -0,0 +1,251 @@
1
+ /* === VALENTINO TEMPLATE: Corporate ===
2
+ * For company websites: hero, features, team, pricing, CTA, contact.
3
+ * Import after framework.base.css.
4
+ * Usage: @import '@hale-bopp/valentino-engine/css/framework.corporate.css';
5
+ */
6
+
7
+ /* --- Hero Section --- */
8
+ .valentino-section-shell[data-rhythm-profile='hero'] .hero-headline {
9
+ max-width: var(--valentino-rhythm-header-measure, 36ch);
10
+ margin: 0 auto;
11
+ text-align: center;
12
+ }
13
+
14
+ .valentino-section-shell[data-rhythm-profile='hero'] .hero-lead {
15
+ max-width: var(--valentino-rhythm-body-measure, 52ch);
16
+ margin: 1.5rem auto 0;
17
+ text-align: center;
18
+ font-size: var(--text-step-1, 1.125rem);
19
+ line-height: var(--valentino-rhythm-leading-body, 1.6);
20
+ color: var(--valentino-surface-muted);
21
+ }
22
+
23
+ .valentino-section-shell[data-rhythm-profile='hero'] .hero-actions {
24
+ display: flex;
25
+ gap: 1rem;
26
+ justify-content: center;
27
+ margin-top: 2rem;
28
+ flex-wrap: wrap;
29
+ }
30
+
31
+ /* --- Feature Cards --- */
32
+ .feature-grid {
33
+ display: grid;
34
+ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
35
+ gap: var(--valentino-rhythm-cluster-gap, 1.5rem);
36
+ }
37
+
38
+ .feature-card {
39
+ background: var(--valentino-card-bg, #ffffff);
40
+ border: 1px solid var(--valentino-card-border, rgba(148, 163, 184, 0.2));
41
+ border-radius: 12px;
42
+ padding: 2rem;
43
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
44
+ }
45
+
46
+ .feature-card:hover {
47
+ transform: translateY(-4px);
48
+ box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
49
+ }
50
+
51
+ .feature-card__icon {
52
+ width: 48px;
53
+ height: 48px;
54
+ border-radius: 12px;
55
+ display: inline-flex;
56
+ align-items: center;
57
+ justify-content: center;
58
+ margin-bottom: 1rem;
59
+ background: var(--valentino-surface-bg, #f1f5f9);
60
+ }
61
+
62
+ .feature-card__title {
63
+ font-size: var(--text-step-1, 1.125rem);
64
+ font-weight: 700;
65
+ margin-bottom: 0.5rem;
66
+ color: var(--valentino-surface-text);
67
+ }
68
+
69
+ .feature-card__desc {
70
+ font-size: 1rem;
71
+ line-height: 1.6;
72
+ color: var(--valentino-surface-muted);
73
+ }
74
+
75
+ /* --- Team Section --- */
76
+ .team-grid {
77
+ display: grid;
78
+ grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
79
+ gap: var(--valentino-rhythm-cluster-gap, 1.5rem);
80
+ text-align: center;
81
+ }
82
+
83
+ .team-member__avatar {
84
+ width: 120px;
85
+ height: 120px;
86
+ border-radius: 50%;
87
+ object-fit: cover;
88
+ margin: 0 auto 1rem;
89
+ border: 3px solid var(--valentino-card-border, rgba(148, 163, 184, 0.2));
90
+ }
91
+
92
+ .team-member__name {
93
+ font-size: var(--text-step-1, 1.125rem);
94
+ font-weight: 700;
95
+ color: var(--valentino-surface-text);
96
+ }
97
+
98
+ .team-member__role {
99
+ font-size: 0.9rem;
100
+ color: var(--valentino-surface-muted);
101
+ margin-top: 0.25rem;
102
+ }
103
+
104
+ /* --- Pricing Section --- */
105
+ .pricing-grid {
106
+ display: grid;
107
+ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
108
+ gap: var(--valentino-rhythm-cluster-gap, 1.5rem);
109
+ align-items: start;
110
+ }
111
+
112
+ .pricing-card {
113
+ background: var(--valentino-card-bg, #ffffff);
114
+ border: 1px solid var(--valentino-card-border, rgba(148, 163, 184, 0.2));
115
+ border-radius: 12px;
116
+ padding: 2.5rem 2rem;
117
+ text-align: center;
118
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
119
+ }
120
+
121
+ .pricing-card--featured {
122
+ border-color: var(--accent-neural-cyan, #0ea5e9);
123
+ box-shadow: 0 8px 24px rgba(14, 165, 233, 0.12);
124
+ transform: scale(1.02);
125
+ }
126
+
127
+ .pricing-card__name {
128
+ font-size: var(--text-step-1, 1.125rem);
129
+ font-weight: 700;
130
+ color: var(--valentino-surface-text);
131
+ }
132
+
133
+ .pricing-card__price {
134
+ font-size: var(--text-step-4, 2.5rem);
135
+ font-weight: 800;
136
+ margin: 1rem 0;
137
+ color: var(--valentino-surface-text);
138
+ }
139
+
140
+ .pricing-card__price span {
141
+ font-size: var(--text-step-0, 1rem);
142
+ font-weight: 400;
143
+ color: var(--valentino-surface-muted);
144
+ }
145
+
146
+ .pricing-card__features {
147
+ list-style: none;
148
+ text-align: left;
149
+ margin: 1.5rem 0;
150
+ }
151
+
152
+ .pricing-card__features li {
153
+ padding: 0.5rem 0;
154
+ border-bottom: 1px solid rgba(148, 163, 184, 0.1);
155
+ color: var(--valentino-surface-muted);
156
+ font-size: 0.95rem;
157
+ }
158
+
159
+ .pricing-card__features li::before {
160
+ content: '\2713';
161
+ margin-right: 0.5rem;
162
+ color: var(--accent-neural-cyan, #0ea5e9);
163
+ font-weight: 700;
164
+ }
165
+
166
+ /* --- CTA Banner --- */
167
+ .cta-banner {
168
+ text-align: center;
169
+ max-width: 640px;
170
+ margin: 0 auto;
171
+ }
172
+
173
+ .cta-banner__title {
174
+ font-size: var(--text-step-3, 1.75rem);
175
+ font-weight: 700;
176
+ margin-bottom: 1rem;
177
+ color: var(--valentino-surface-text);
178
+ }
179
+
180
+ .cta-banner__desc {
181
+ font-size: var(--text-step-0, 1rem);
182
+ color: var(--valentino-surface-muted);
183
+ margin-bottom: 2rem;
184
+ line-height: 1.6;
185
+ }
186
+
187
+ /* --- Contact Form --- */
188
+ .contact-form {
189
+ max-width: 560px;
190
+ margin: 0 auto;
191
+ display: flex;
192
+ flex-direction: column;
193
+ gap: 1rem;
194
+ }
195
+
196
+ .contact-form__field {
197
+ display: flex;
198
+ flex-direction: column;
199
+ gap: 0.35rem;
200
+ }
201
+
202
+ .contact-form__label {
203
+ font-size: 0.85rem;
204
+ font-weight: 600;
205
+ color: var(--valentino-surface-text);
206
+ }
207
+
208
+ .contact-form__input,
209
+ .contact-form__textarea {
210
+ padding: 0.75rem 1rem;
211
+ border: 1px solid var(--valentino-card-border, rgba(148, 163, 184, 0.3));
212
+ border-radius: 8px;
213
+ font-size: 1rem;
214
+ font-family: inherit;
215
+ background: var(--valentino-card-bg, #ffffff);
216
+ color: var(--valentino-surface-text);
217
+ transition: border-color 0.15s ease;
218
+ }
219
+
220
+ .contact-form__input:focus,
221
+ .contact-form__textarea:focus {
222
+ outline: none;
223
+ border-color: var(--accent-neural-cyan, #0ea5e9);
224
+ }
225
+
226
+ .contact-form__textarea {
227
+ min-height: 120px;
228
+ resize: vertical;
229
+ }
230
+
231
+ /* --- Responsive (Corporate) --- */
232
+ @media (max-width: 768px) {
233
+ .pricing-card--featured {
234
+ transform: none;
235
+ }
236
+
237
+ .team-grid {
238
+ grid-template-columns: repeat(2, 1fr);
239
+ }
240
+ }
241
+
242
+ @media (max-width: 500px) {
243
+ .team-grid {
244
+ grid-template-columns: 1fr;
245
+ }
246
+
247
+ .valentino-section-shell[data-rhythm-profile='hero'] .hero-actions {
248
+ flex-direction: column;
249
+ align-items: center;
250
+ }
251
+ }
@@ -0,0 +1,281 @@
1
+ /* === VALENTINO TEMPLATE: Landing Page ===
2
+ * Single-scroll conversion funnel: hero → problem → solution → social proof → CTA.
3
+ * Import after framework.base.css.
4
+ * Usage: @import '@hale-bopp/valentino-engine/css/framework.landing.css';
5
+ */
6
+
7
+ /* --- Full-Screen Hero --- */
8
+ .landing-hero {
9
+ display: flex;
10
+ flex-direction: column;
11
+ align-items: center;
12
+ justify-content: center;
13
+ text-align: center;
14
+ min-height: calc(100svh - 80px);
15
+ padding: 2rem;
16
+ }
17
+
18
+ .landing-hero__headline {
19
+ max-width: 18ch;
20
+ font-size: var(--text-step-5, 3rem);
21
+ font-weight: 800;
22
+ line-height: 1.1;
23
+ letter-spacing: -0.02em;
24
+ color: var(--valentino-surface-text);
25
+ }
26
+
27
+ .landing-hero__sub {
28
+ max-width: 42ch;
29
+ margin-top: 1.25rem;
30
+ font-size: var(--text-step-1, 1.25rem);
31
+ line-height: 1.5;
32
+ color: var(--valentino-surface-muted);
33
+ }
34
+
35
+ .landing-hero__cta {
36
+ display: flex;
37
+ gap: 1rem;
38
+ margin-top: 2.5rem;
39
+ flex-wrap: wrap;
40
+ justify-content: center;
41
+ }
42
+
43
+ /* --- Problem / Pain Points --- */
44
+ .pain-grid {
45
+ display: grid;
46
+ grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
47
+ gap: var(--valentino-rhythm-cluster-gap, 1.5rem);
48
+ text-align: center;
49
+ }
50
+
51
+ .pain-card {
52
+ padding: 2rem 1.5rem;
53
+ }
54
+
55
+ .pain-card__icon {
56
+ font-size: 2.5rem;
57
+ margin-bottom: 1rem;
58
+ }
59
+
60
+ .pain-card__title {
61
+ font-size: var(--text-step-1, 1.125rem);
62
+ font-weight: 700;
63
+ color: var(--valentino-surface-text);
64
+ margin-bottom: 0.5rem;
65
+ }
66
+
67
+ .pain-card__desc {
68
+ font-size: 0.95rem;
69
+ line-height: 1.6;
70
+ color: var(--valentino-surface-muted);
71
+ }
72
+
73
+ /* --- Solution (Split Layout) --- */
74
+ .split-section {
75
+ display: grid;
76
+ grid-template-columns: 1fr 1fr;
77
+ gap: 3rem;
78
+ align-items: center;
79
+ }
80
+
81
+ .split-section--reverse {
82
+ direction: rtl;
83
+ }
84
+
85
+ .split-section--reverse > * {
86
+ direction: ltr;
87
+ }
88
+
89
+ .split-section__copy {
90
+ display: flex;
91
+ flex-direction: column;
92
+ gap: 1rem;
93
+ }
94
+
95
+ .split-section__title {
96
+ font-size: var(--text-step-3, 1.75rem);
97
+ font-weight: 700;
98
+ color: var(--valentino-surface-text);
99
+ }
100
+
101
+ .split-section__desc {
102
+ font-size: 1rem;
103
+ line-height: 1.7;
104
+ color: var(--valentino-surface-muted);
105
+ }
106
+
107
+ .split-section__visual {
108
+ border-radius: 12px;
109
+ overflow: hidden;
110
+ }
111
+
112
+ .split-section__visual img {
113
+ width: 100%;
114
+ height: auto;
115
+ display: block;
116
+ }
117
+
118
+ /* --- Social Proof --- */
119
+ .testimonial-grid {
120
+ display: grid;
121
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
122
+ gap: var(--valentino-rhythm-cluster-gap, 1.5rem);
123
+ }
124
+
125
+ .testimonial-card {
126
+ background: var(--valentino-card-bg, #ffffff);
127
+ border: 1px solid var(--valentino-card-border, rgba(148, 163, 184, 0.2));
128
+ border-radius: 12px;
129
+ padding: 2rem;
130
+ }
131
+
132
+ .testimonial-card__quote {
133
+ font-size: 1.05rem;
134
+ line-height: 1.7;
135
+ color: var(--valentino-surface-text);
136
+ font-style: italic;
137
+ margin-bottom: 1.25rem;
138
+ }
139
+
140
+ .testimonial-card__quote::before {
141
+ content: '\201C';
142
+ font-size: 2rem;
143
+ line-height: 0;
144
+ vertical-align: -0.4em;
145
+ margin-right: 0.15em;
146
+ color: var(--accent-neural-cyan, #0ea5e9);
147
+ font-style: normal;
148
+ }
149
+
150
+ .testimonial-card__author {
151
+ display: flex;
152
+ align-items: center;
153
+ gap: 0.75rem;
154
+ }
155
+
156
+ .testimonial-card__avatar {
157
+ width: 40px;
158
+ height: 40px;
159
+ border-radius: 50%;
160
+ object-fit: cover;
161
+ }
162
+
163
+ .testimonial-card__name {
164
+ font-weight: 700;
165
+ font-size: 0.9rem;
166
+ color: var(--valentino-surface-text);
167
+ }
168
+
169
+ .testimonial-card__title {
170
+ font-size: 0.8rem;
171
+ color: var(--valentino-surface-muted);
172
+ }
173
+
174
+ /* --- Logos Bar --- */
175
+ .logos-bar {
176
+ display: flex;
177
+ align-items: center;
178
+ justify-content: center;
179
+ flex-wrap: wrap;
180
+ gap: 2.5rem;
181
+ opacity: 0.6;
182
+ }
183
+
184
+ .logos-bar img {
185
+ height: 32px;
186
+ width: auto;
187
+ filter: grayscale(1);
188
+ transition: filter 0.2s ease, opacity 0.2s ease;
189
+ }
190
+
191
+ .logos-bar img:hover {
192
+ filter: grayscale(0);
193
+ opacity: 1;
194
+ }
195
+
196
+ /* --- Stats Row --- */
197
+ .stats-row {
198
+ display: flex;
199
+ justify-content: center;
200
+ flex-wrap: wrap;
201
+ gap: 3rem;
202
+ text-align: center;
203
+ }
204
+
205
+ .stat-item__value {
206
+ font-size: var(--text-step-4, 2.5rem);
207
+ font-weight: 800;
208
+ color: var(--valentino-surface-text);
209
+ line-height: 1;
210
+ }
211
+
212
+ .stat-item__label {
213
+ font-size: 0.9rem;
214
+ color: var(--valentino-surface-muted);
215
+ margin-top: 0.35rem;
216
+ }
217
+
218
+ /* --- Final CTA (Full-Width) --- */
219
+ .final-cta {
220
+ text-align: center;
221
+ padding: 1rem 0;
222
+ }
223
+
224
+ .final-cta__title {
225
+ font-size: var(--text-step-4, 2.5rem);
226
+ font-weight: 800;
227
+ color: var(--valentino-surface-text);
228
+ max-width: 20ch;
229
+ margin: 0 auto;
230
+ }
231
+
232
+ .final-cta__desc {
233
+ font-size: var(--text-step-0, 1rem);
234
+ color: var(--valentino-surface-muted);
235
+ margin: 1rem auto 2rem;
236
+ max-width: 48ch;
237
+ line-height: 1.6;
238
+ }
239
+
240
+ .final-cta__actions {
241
+ display: flex;
242
+ gap: 1rem;
243
+ justify-content: center;
244
+ flex-wrap: wrap;
245
+ }
246
+
247
+ /* --- Responsive (Landing) --- */
248
+ @media (max-width: 768px) {
249
+ .split-section {
250
+ grid-template-columns: 1fr;
251
+ gap: 2rem;
252
+ }
253
+
254
+ .split-section--reverse {
255
+ direction: ltr;
256
+ }
257
+
258
+ .stats-row {
259
+ gap: 2rem;
260
+ }
261
+ }
262
+
263
+ @media (max-width: 500px) {
264
+ .landing-hero {
265
+ min-height: auto;
266
+ padding: 3rem 1.5rem;
267
+ }
268
+
269
+ .landing-hero__cta {
270
+ flex-direction: column;
271
+ align-items: stretch;
272
+ }
273
+
274
+ .logos-bar {
275
+ gap: 1.5rem;
276
+ }
277
+
278
+ .logos-bar img {
279
+ height: 24px;
280
+ }
281
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hale-bopp/valentino-engine",
3
- "version": "2.4.0",
3
+ "version": "2.5.0",
4
4
  "description": "Antifragile Open Source UI Design Engine — generates Runtime PageSpec JSON, validates accessibility, enforces Design Tokens, and consults GEDI for architectural decisions.",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
@@ -25,13 +25,17 @@
25
25
  "./cockpit-server": {
26
26
  "types": "./dist/cockpit-server.d.ts",
27
27
  "import": "./dist/cockpit-server.js"
28
- }
28
+ },
29
+ "./css/framework.base.css": "./css/framework.base.css",
30
+ "./css/framework.corporate.css": "./css/framework.corporate.css",
31
+ "./css/framework.landing.css": "./css/framework.landing.css"
29
32
  },
30
33
  "bin": {
31
34
  "valentino": "dist/bin/valentino.js"
32
35
  },
33
36
  "files": [
34
37
  "dist",
38
+ "css",
35
39
  "README.md",
36
40
  "LICENSE",
37
41
  "CHANGELOG.md",