@press2ai/theme-specialist-glossy 1.0.0 → 3.0.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.
- package/package.json +1 -1
- package/src/ai.ts +1 -1
- package/src/styles/_shared.ts +1 -0
- package/src/styles/base.ts +91 -25
- package/src/styles/catalog-grid.ts +4 -5
- package/src/styles/category-nav.ts +6 -5
- package/src/styles/forms.ts +4 -15
- package/src/styles/hero.ts +26 -42
- package/src/styles/pagination.ts +6 -5
- package/src/styles/profile-article.ts +17 -16
- package/src/styles/profile-card.ts +18 -27
- package/src/styles/stat-bar.ts +9 -10
- package/src/styles/steps.ts +18 -21
- package/src/templates/layout.ts +1 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@press2ai/theme-specialist-glossy",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "3.0.0",
|
|
4
4
|
"description": "Classless, AI-first glossy theme. 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/ai.ts
CHANGED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export const BREAKOUT = `margin-inline: calc(50% - 50vw); padding-inline: var(--pad);`;
|
package/src/styles/base.ts
CHANGED
|
@@ -1,34 +1,100 @@
|
|
|
1
1
|
export const css = `@import url('https://rsms.me/inter/inter.css');
|
|
2
2
|
:root {
|
|
3
|
+
/* Fibonacci scale — golden ratio ×1.618. Podmień na swoje. */
|
|
4
|
+
--g1: .5rem; /* 8px */
|
|
5
|
+
--g2: .8125rem; /* 13px */
|
|
6
|
+
--g3: 1.3125rem; /* 21px */
|
|
7
|
+
--g4: 2.125rem; /* 34px */
|
|
8
|
+
--g5: 3.4375rem; /* 55px */
|
|
9
|
+
--g6: 5.5625rem; /* 89px */
|
|
10
|
+
|
|
3
11
|
--font: 'Inter', system-ui, sans-serif;
|
|
4
|
-
--
|
|
5
|
-
|
|
6
|
-
--
|
|
7
|
-
--
|
|
8
|
-
--
|
|
9
|
-
--
|
|
10
|
-
--
|
|
11
|
-
|
|
12
|
-
--
|
|
13
|
-
--rose: #e11d63; --amber: #d97706; --sky: #0284c7;
|
|
14
|
-
--r: 16px; --r-lg: 20px; --pill: 999px;
|
|
12
|
+
--container: 1080px; --pad: var(--g3);
|
|
13
|
+
|
|
14
|
+
--bg: #f8f9fb; --fg: #1a1a2e; --fg-muted: #4a4a68; --fg-faint: #8b8ba3;
|
|
15
|
+
--border: #e8e8ef; --border-strong: #d0d0de;
|
|
16
|
+
--surface: #fff; --card: #fff;
|
|
17
|
+
--accent: #7c5cfc; --accent-soft: #f3f0ff; --accent-glow: rgba(124,92,252,.18);
|
|
18
|
+
--teal: #0d9488;
|
|
19
|
+
|
|
20
|
+
--r: 8px; --r-lg: 16px; --pill: 999px;
|
|
15
21
|
--shadow: 0 1px 3px rgba(0,0,0,.04);
|
|
16
22
|
--shadow-md: 0 4px 16px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04);
|
|
17
23
|
--shadow-up: 0 8px 24px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.03);
|
|
18
24
|
--ease: 200ms cubic-bezier(.4,0,.2,1);
|
|
25
|
+
color-scheme: light;
|
|
19
26
|
}
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
27
|
+
|
|
28
|
+
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
29
|
+
html { font-size: 16px; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }
|
|
30
|
+
body {
|
|
31
|
+
font-family: var(--font); font-feature-settings: 'cv11', 'ss01';
|
|
32
|
+
color: var(--fg); background: var(--bg); line-height: 1.6; overflow-x: clip;
|
|
33
|
+
letter-spacing: -.011em;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
/* --- HEADER --- */
|
|
37
|
+
body > header {
|
|
38
|
+
position: sticky; top: 0; z-index: 50;
|
|
39
|
+
background: rgba(255,255,255,.82); backdrop-filter: saturate(180%) blur(16px);
|
|
40
|
+
border-bottom: 1px solid var(--border);
|
|
41
|
+
}
|
|
42
|
+
body > header nav {
|
|
43
|
+
max-width: var(--container); margin-inline: auto; padding-inline: var(--pad);
|
|
44
|
+
height: 48px; display: flex; align-items: center; justify-content: space-between;
|
|
45
|
+
}
|
|
46
|
+
body > header nav a { color: var(--fg-muted); font-size: 13px; font-weight: 500; text-decoration: none; }
|
|
47
|
+
body > header nav a strong { font-size: 1rem; font-weight: 700; color: var(--fg); }
|
|
48
|
+
|
|
49
|
+
/* --- MAIN (container) --- */
|
|
32
50
|
main { max-width: var(--container); margin-inline: auto; padding-inline: var(--pad); }
|
|
33
|
-
main > * + * { margin-top: var(--
|
|
34
|
-
|
|
51
|
+
main > * + * { margin-top: var(--g5); }
|
|
52
|
+
|
|
53
|
+
/* --- HEADINGS --- */
|
|
54
|
+
h1, h2, h3 { text-wrap: balance; color: var(--fg); letter-spacing: -.02em; }
|
|
55
|
+
h1 { font-size: clamp(1.953rem, 5vw, 2.441rem); font-weight: 800; line-height: 1.1; letter-spacing: -.035em; }
|
|
56
|
+
h2 { font-size: 1.563rem; font-weight: 700; line-height: 1.25; }
|
|
57
|
+
h3 { font-size: 1.25rem; font-weight: 600; line-height: 1.35; }
|
|
58
|
+
|
|
59
|
+
/* --- TEXT --- */
|
|
60
|
+
p { font-size: 1rem; line-height: 1.6; color: var(--fg-muted); max-width: 38rem; text-wrap: pretty; }
|
|
61
|
+
a { color: var(--accent); text-decoration: none; transition: color var(--ease); }
|
|
62
|
+
a:hover { color: var(--fg); }
|
|
63
|
+
small { font-size: .8rem; color: var(--fg-faint); }
|
|
64
|
+
strong { font-weight: 600; color: var(--fg); }
|
|
65
|
+
mark { background: transparent; background-image: linear-gradient(120deg, var(--accent-soft), var(--accent-soft)); background-repeat: no-repeat; background-size: 100% 40%; background-position: 0 85%; padding: 0 2px; }
|
|
66
|
+
|
|
67
|
+
/* --- FORM ELEMENTS --- */
|
|
68
|
+
input, textarea, select { font-family: inherit; font-size: 15px; padding: var(--g2) var(--g3); border: 1px solid var(--border-strong); border-radius: var(--r); background: var(--surface); color: var(--fg); outline: none; width: 100%; }
|
|
69
|
+
input::placeholder, textarea::placeholder { color: var(--fg-faint); }
|
|
70
|
+
input:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
|
|
71
|
+
label { display: block; font-size: 14px; font-weight: 600; margin-bottom: var(--g1); }
|
|
72
|
+
button, input[type="submit"] { background: var(--accent); color: var(--surface); border: none; border-radius: var(--pill); padding: var(--g2) var(--g4); font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer; transition: all var(--ease); }
|
|
73
|
+
button:hover, input[type="submit"]:hover { opacity: .85; }
|
|
74
|
+
|
|
75
|
+
/* --- FOOTER --- */
|
|
76
|
+
body > footer {
|
|
77
|
+
border-top: 1px solid var(--border); background: var(--surface);
|
|
78
|
+
padding: var(--g5) 0 var(--g4); margin-top: var(--g6);
|
|
79
|
+
}
|
|
80
|
+
body > footer > small {
|
|
81
|
+
display: block; max-width: var(--container); margin-inline: auto; padding-inline: var(--pad);
|
|
82
|
+
color: var(--fg-faint); font-size: .8rem;
|
|
83
|
+
}
|
|
84
|
+
body > footer a { color: var(--fg-muted); transition: color var(--ease); text-decoration: none; }
|
|
85
|
+
body > footer a:hover { color: var(--accent); }
|
|
86
|
+
body > footer > small > nav {
|
|
87
|
+
display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--g4); margin-bottom: var(--g4);
|
|
88
|
+
}
|
|
89
|
+
body > footer > small > nav section { all: unset; display: block; }
|
|
90
|
+
body > footer > small > nav strong { display: block; font-size: .8rem; font-weight: 600; color: var(--fg); text-transform: uppercase; letter-spacing: .06em; margin-bottom: var(--g2); }
|
|
91
|
+
body > footer > small > nav p { font-size: .8rem; line-height: 1.6; color: var(--fg-faint); margin: 0; max-width: 36ch; }
|
|
92
|
+
body > footer > small > nav a { display: block; font-size: .8rem; line-height: 2; }
|
|
93
|
+
body > footer > small > p { padding-top: var(--g3); border-top: 1px solid var(--border); }
|
|
94
|
+
|
|
95
|
+
/* --- RESPONSIVE --- */
|
|
96
|
+
@media (max-width: 640px) {
|
|
97
|
+
:root { --pad: var(--g2); }
|
|
98
|
+
main > * + * { margin-top: var(--g4); }
|
|
99
|
+
body > footer > small > nav { grid-template-columns: 1fr; gap: var(--g3); }
|
|
100
|
+
}`;
|
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
}
|
|
4
|
-
|
|
5
|
-
@media (max-width: 640px) { section:has(> article[itemscope]) { grid-template-columns: 1fr; } }`;
|
|
1
|
+
const R = 'main > section:has(> article[itemscope])';
|
|
2
|
+
export const css = `${R} { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--g3); }
|
|
3
|
+
${R} > h2 { grid-column: 1 / -1; }
|
|
4
|
+
@media (max-width: 640px) { ${R} { grid-template-columns: 1fr; } }`;
|
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
const R = 'main > nav:has(> a)';
|
|
2
|
+
export const css = `${R} { display: flex; flex-wrap: wrap; gap: var(--g1); }
|
|
3
|
+
${R} > a {
|
|
3
4
|
display: inline-flex; align-items: center; height: 32px; padding: 0 var(--g2);
|
|
4
|
-
border-radius: var(--pill); font-size:
|
|
5
|
-
background: var(--
|
|
5
|
+
border-radius: var(--pill); font-size: .8rem; font-weight: 500;
|
|
6
|
+
background: var(--surface); border: 1px solid var(--border); color: var(--fg-muted); transition: all var(--ease);
|
|
6
7
|
}
|
|
7
|
-
|
|
8
|
+
${R} > a:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }`;
|
package/src/styles/forms.ts
CHANGED
|
@@ -1,15 +1,4 @@
|
|
|
1
|
-
export const css = `form:not([role="search"]) label {
|
|
2
|
-
form:not([role="search"]) input[type="text"] {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
border-radius: var(--r); color: var(--ink); font-size: var(--t-sm); font-family: var(--font);
|
|
6
|
-
transition: border-color var(--ease);
|
|
7
|
-
}
|
|
8
|
-
form:not([role="search"]) input[type="text"]:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px var(--violet-glow); }
|
|
9
|
-
form:not([role="search"]) button[type="submit"] {
|
|
10
|
-
margin-top: var(--g3); height: 44px; padding: 0 var(--g4);
|
|
11
|
-
border: none; border-radius: var(--pill); background: var(--violet); color: var(--white);
|
|
12
|
-
font-size: var(--t-sm); font-weight: 600; font-family: var(--font); cursor: pointer;
|
|
13
|
-
transition: all var(--ease); box-shadow: 0 4px 14px var(--violet-glow);
|
|
14
|
-
}
|
|
15
|
-
form:not([role="search"]) button[type="submit"]:hover { background: var(--ink); transform: translateY(-1px); }`;
|
|
1
|
+
export const css = `form:not([role="search"]) label { margin-bottom: var(--g1); }
|
|
2
|
+
form:not([role="search"]) input[type="text"] { display: block; width: 100%; margin-top: var(--g1); }
|
|
3
|
+
form:not([role="search"]) button[type="submit"] { margin-top: var(--g3); box-shadow: 0 4px 14px var(--accent-glow); }
|
|
4
|
+
form:not([role="search"]) button[type="submit"]:hover { transform: translateY(-1px); }`;
|
package/src/styles/hero.ts
CHANGED
|
@@ -1,54 +1,38 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
radial-gradient(ellipse 60% 40% at 50% 100%, rgba(225,29,99,.08) 0%, transparent 50%),
|
|
9
|
-
linear-gradient(180deg, #fff 0%, var(--bg) 100%);
|
|
10
|
-
border-bottom: 1px solid var(--line);
|
|
1
|
+
import { BREAKOUT } from './_shared.ts';
|
|
2
|
+
const R = 'main > hgroup';
|
|
3
|
+
export const css = `${R} {
|
|
4
|
+
${BREAKOUT} text-align: center; overflow: hidden; position: relative; isolation: isolate;
|
|
5
|
+
padding-block: var(--g6) var(--g5);
|
|
6
|
+
background: radial-gradient(ellipse 70% 50% at 20% 30%, var(--accent-glow) 0%, transparent 60%), radial-gradient(ellipse 50% 60% at 80% 20%, rgba(13,148,136,.12) 0%, transparent 55%), linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
|
|
7
|
+
border-bottom: 1px solid var(--border);
|
|
11
8
|
}
|
|
12
|
-
|
|
9
|
+
${R}::before {
|
|
13
10
|
content: ''; position: absolute; inset: 0;
|
|
14
|
-
background-image:
|
|
15
|
-
|
|
16
|
-
linear-gradient(90deg, rgba(124,92,252,.04) 1px, transparent 1px);
|
|
17
|
-
background-size: 48px 48px;
|
|
18
|
-
mask-image: radial-gradient(ellipse 60% 50% at 50% 40%, black 0%, transparent 70%);
|
|
19
|
-
z-index: -1;
|
|
11
|
+
background-image: linear-gradient(rgba(124,92,252,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(124,92,252,.04) 1px, transparent 1px);
|
|
12
|
+
background-size: 48px 48px; mask-image: radial-gradient(ellipse 60% 50% at 50% 40%, black 0%, transparent 70%); z-index: -1;
|
|
20
13
|
}
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
14
|
+
${R} > * { position: relative; }
|
|
15
|
+
${R} > p:first-child { display: inline-flex; margin-bottom: var(--g4); }
|
|
16
|
+
${R} > p:first-child small {
|
|
24
17
|
display: inline-flex; align-items: center; gap: var(--g1);
|
|
25
18
|
background: rgba(255,255,255,.7); backdrop-filter: blur(8px);
|
|
26
|
-
padding: var(--g1) var(--g2); border: 1px solid var(--
|
|
27
|
-
|
|
19
|
+
padding: var(--g1) var(--g2); border: 1px solid var(--border); border-radius: var(--pill);
|
|
20
|
+
font-weight: 600; color: var(--teal); box-shadow: var(--shadow);
|
|
28
21
|
}
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
22
|
+
${R} > 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); }
|
|
23
|
+
${R} h1 { max-width: 18ch; margin: 0 auto var(--g3); }
|
|
24
|
+
${R} p { font-size: 1.25rem; line-height: 1.55; max-width: 38rem; margin: 0 auto var(--g3); }
|
|
32
25
|
form[role="search"] {
|
|
33
|
-
display: flex; max-width: 495px; height: 48px;
|
|
34
|
-
|
|
35
|
-
border: 1px solid var(--line); border-radius: var(--pill);
|
|
26
|
+
display: flex; max-width: 495px; height: 48px; margin: var(--g4) auto 0;
|
|
27
|
+
background: var(--surface); border: 1px solid var(--border); border-radius: var(--pill);
|
|
36
28
|
overflow: hidden; box-shadow: var(--shadow-md); transition: all var(--ease);
|
|
37
29
|
}
|
|
38
|
-
form[role="search"]:focus-within { border-color: var(--
|
|
39
|
-
form[role="search"] input {
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
}
|
|
43
|
-
form[role="search"] input::placeholder { color: var(--ink-3); }
|
|
44
|
-
form[role="search"] button {
|
|
45
|
-
flex-shrink: 0; height: 100%; border: none; background: var(--violet); color: var(--white);
|
|
46
|
-
padding: 0 var(--g4); font-size: var(--t-sm); font-weight: 600;
|
|
47
|
-
font-family: var(--font); cursor: pointer; transition: background var(--ease);
|
|
48
|
-
}
|
|
49
|
-
form[role="search"] button:hover { background: var(--ink); }
|
|
30
|
+
form[role="search"]:focus-within { border-color: var(--accent); box-shadow: 0 4px 16px var(--accent-glow); }
|
|
31
|
+
form[role="search"] input { flex: 1; min-width: 0; border: none; background: transparent; color: var(--fg); padding: 0 var(--g3); font-size: 1rem; font-family: var(--font); outline: none; }
|
|
32
|
+
form[role="search"] input::placeholder { color: var(--fg-faint); }
|
|
33
|
+
form[role="search"] button { flex-shrink: 0; height: 100%; border: none; background: var(--accent); color: var(--surface); padding: 0 var(--g4); font-size: 1rem; font-weight: 600; font-family: var(--font); cursor: pointer; border-radius: 0; }
|
|
34
|
+
form[role="search"] button:hover { opacity: .85; }
|
|
50
35
|
@media (max-width: 640px) {
|
|
51
|
-
|
|
36
|
+
${R} { padding-block: var(--g5) var(--g4); }
|
|
52
37
|
form[role="search"] { height: 40px; }
|
|
53
|
-
form[role="search"] input { font-size: var(--t-xs); }
|
|
54
38
|
}`;
|
package/src/styles/pagination.ts
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
const R = 'main > nav:has(> p)';
|
|
2
|
+
export const css = `${R} > p { display: flex; align-items: center; justify-content: center; gap: var(--g3); font-size: 1rem; color: var(--fg-faint); }
|
|
3
|
+
${R} a {
|
|
3
4
|
height: 32px; display: inline-flex; align-items: center; padding: 0 var(--g2);
|
|
4
|
-
border-radius: var(--pill); background: var(--
|
|
5
|
-
font-size:
|
|
5
|
+
border-radius: var(--pill); background: var(--surface); border: 1px solid var(--border);
|
|
6
|
+
font-size: .8rem; font-weight: 500; transition: all var(--ease); text-decoration: none;
|
|
6
7
|
}
|
|
7
|
-
|
|
8
|
+
${R} a:hover { border-color: var(--accent); color: var(--accent); }`;
|
|
@@ -1,18 +1,19 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
1
|
+
const R = 'main > article[itemscope]';
|
|
2
|
+
export const css = `${R} { max-width: 667px; }
|
|
3
|
+
${R} > header { padding-bottom: var(--g4); margin-bottom: var(--g4); border-bottom: 2px solid var(--fg); }
|
|
4
|
+
${R} > header h1 { font-size: 2.441rem; font-weight: 800; letter-spacing: -.04em; line-height: 1.05; margin-bottom: var(--g1); }
|
|
5
|
+
${R} > header p { font-size: 1.25rem; color: var(--fg-muted); margin: 0; }
|
|
6
|
+
${R} > header small { display: block; margin-top: var(--g1); font-size: .8rem; color: var(--teal); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
|
|
7
|
+
${R} address { font-style: normal; font-size: 1rem; color: var(--fg-muted); padding: var(--g2) 0; margin-bottom: var(--g3); border-bottom: 1px solid var(--border); }
|
|
8
|
+
${R} section { margin: var(--g4) 0; padding-top: var(--g3); border-top: 1px solid var(--border); }
|
|
9
|
+
${R} section h2 { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; margin: 0 0 var(--g2); }
|
|
10
|
+
${R} ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--g1); }
|
|
11
|
+
${R} ul li { font-size: .8rem; font-weight: 500; color: var(--fg-muted); }
|
|
12
|
+
${R} ul li:not(:last-child)::after { content: ','; }
|
|
13
|
+
${R} dl { display: grid; grid-template-columns: 8rem 1fr; gap: var(--g1) var(--g3); }
|
|
14
|
+
${R} dt { font-size: .8rem; color: var(--fg-faint); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
|
|
15
|
+
${R} dd { margin: 0; font-size: 1rem; }
|
|
15
16
|
@media (max-width: 640px) {
|
|
16
|
-
|
|
17
|
-
|
|
17
|
+
${R} dl { grid-template-columns: 1fr; gap: 2px 0; }
|
|
18
|
+
${R} dt { margin-top: var(--g2); }
|
|
18
19
|
}`;
|
|
@@ -1,31 +1,22 @@
|
|
|
1
|
-
const
|
|
2
|
-
export const css = `${
|
|
3
|
-
background: var(--card); border: 1px solid var(--
|
|
1
|
+
const R = 'main > section:has(> article[itemscope]) > article[itemscope]';
|
|
2
|
+
export const css = `${R} {
|
|
3
|
+
background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg);
|
|
4
4
|
padding: var(--g3); display: flex; flex-direction: column;
|
|
5
5
|
box-shadow: var(--shadow); transition: all var(--ease);
|
|
6
6
|
}
|
|
7
|
-
${
|
|
8
|
-
${
|
|
9
|
-
width: 40px; height: 40px; border-radius: 50%;
|
|
10
|
-
|
|
11
|
-
font-size: var(--t-xs); font-weight: 700; color: var(--white);
|
|
12
|
-
margin-bottom: var(--g2); background: var(--violet);
|
|
7
|
+
${R}:hover { transform: translateY(-2px); box-shadow: var(--shadow-up); border-color: var(--border-strong); }
|
|
8
|
+
${R} > div[aria-hidden] {
|
|
9
|
+
width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
|
|
10
|
+
font-size: .8rem; font-weight: 700; color: var(--surface); background: var(--accent); margin-bottom: var(--g2);
|
|
13
11
|
}
|
|
14
|
-
${
|
|
15
|
-
${
|
|
16
|
-
${
|
|
17
|
-
${
|
|
18
|
-
${
|
|
19
|
-
${
|
|
20
|
-
${
|
|
21
|
-
${
|
|
22
|
-
${
|
|
23
|
-
${
|
|
24
|
-
|
|
25
|
-
padding: 1px var(--g1); border-radius: var(--pill); font-size: .7rem; font-weight: 500;
|
|
26
|
-
}
|
|
27
|
-
${S} > a:last-child {
|
|
28
|
-
display: inline-flex; margin-top: auto; padding-top: var(--g2);
|
|
29
|
-
font-size: var(--t-xs); font-weight: 600; color: var(--violet); transition: all var(--ease);
|
|
30
|
-
}
|
|
31
|
-
${S} > a:last-child:hover { color: var(--ink); }`;
|
|
12
|
+
${R} header { margin-bottom: var(--g1); }
|
|
13
|
+
${R} h2 { font-size: 1rem; font-weight: 600; line-height: 1.3; margin: 0 0 2px; }
|
|
14
|
+
${R} h2 a { color: var(--fg); text-decoration: none; }
|
|
15
|
+
${R} h2 a:hover { color: var(--accent); }
|
|
16
|
+
${R} header p { font-size: .8rem; color: var(--fg-faint); margin: 0; }
|
|
17
|
+
${R} header p:has([itemprop="address"]) { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; }
|
|
18
|
+
${R} header p:has([itemprop="address"])::before { content: ''; width: 3px; height: 3px; border-radius: 50%; background: var(--fg-faint); }
|
|
19
|
+
${R} ul { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; margin-top: var(--g1); }
|
|
20
|
+
${R} ul li { background: var(--accent-soft); color: var(--accent); padding: 1px var(--g1); border-radius: var(--pill); font-size: .7rem; font-weight: 500; }
|
|
21
|
+
${R} > a:last-child { display: inline-flex; margin-top: auto; padding-top: var(--g2); font-size: .8rem; font-weight: 600; color: var(--accent); }
|
|
22
|
+
${R} > a:last-child:hover { color: var(--fg); }`;
|
package/src/styles/stat-bar.ts
CHANGED
|
@@ -1,12 +1,11 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
}
|
|
4
|
-
|
|
5
|
-
section:has(> dl) > dl div > span:has(> svg) {
|
|
1
|
+
const R = 'main > section:has(> dl)';
|
|
2
|
+
export const css = `${R} > dl { display: flex; justify-content: center; gap: var(--g5); }
|
|
3
|
+
${R} > dl div { text-align: center; }
|
|
4
|
+
${R} > dl div > span:has(> svg) {
|
|
6
5
|
display: flex; align-items: center; justify-content: center; width: 36px; height: 36px;
|
|
7
|
-
margin: 0 auto var(--g1); background: var(--
|
|
6
|
+
margin: 0 auto var(--g1); background: var(--accent-soft); border-radius: 50%; color: var(--accent);
|
|
8
7
|
}
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
@media (max-width: 640px) {
|
|
8
|
+
${R} > dl div > span:has(> svg) > svg { width: 18px; height: 18px; }
|
|
9
|
+
${R} > dl dt { font-size: 1.563rem; font-weight: 800; line-height: 1.2; color: var(--accent); }
|
|
10
|
+
${R} > dl dd { margin: 2px 0 0; font-size: .8rem; color: var(--fg-faint); font-weight: 500; text-transform: uppercase; letter-spacing: .06em; }
|
|
11
|
+
@media (max-width: 640px) { ${R} > dl { gap: var(--g3); } }`;
|
package/src/styles/steps.ts
CHANGED
|
@@ -1,27 +1,24 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
import { BREAKOUT } from './_shared.ts';
|
|
2
|
+
const R = 'main > section:has(> ol)';
|
|
3
|
+
export const css = `${R} {
|
|
4
|
+
${BREAKOUT} background: var(--surface); padding-block: var(--g5);
|
|
5
|
+
border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
|
|
4
6
|
}
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
list-style: none;
|
|
8
|
-
display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--g3);
|
|
9
|
-
counter-reset: steps;
|
|
7
|
+
${R} > h2 { text-align: center; margin-bottom: var(--g4); }
|
|
8
|
+
${R} > ol {
|
|
9
|
+
list-style: none; margin: 0 auto; max-width: var(--container);
|
|
10
|
+
display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--g3); counter-reset: steps;
|
|
10
11
|
}
|
|
11
|
-
|
|
12
|
-
counter-increment: steps; background: var(--bg); border: 1px solid var(--
|
|
12
|
+
${R} > ol > li {
|
|
13
|
+
counter-increment: steps; background: var(--bg); border: 1px solid var(--border);
|
|
13
14
|
border-radius: var(--r-lg); padding: var(--g4) var(--g3); text-align: center; transition: all var(--ease);
|
|
14
15
|
}
|
|
15
|
-
|
|
16
|
-
|
|
16
|
+
${R} > ol > li:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
|
|
17
|
+
${R} > ol > li::before {
|
|
17
18
|
content: counter(steps); display: flex; align-items: center; justify-content: center;
|
|
18
|
-
width: 40px; height: 40px; margin: 0 auto var(--g2);
|
|
19
|
-
|
|
20
|
-
background: var(--violet-s); color: var(--violet);
|
|
19
|
+
width: 40px; height: 40px; margin: 0 auto var(--g2); border-radius: 50%;
|
|
20
|
+
font-size: 1rem; font-weight: 700; background: var(--accent-soft); color: var(--accent);
|
|
21
21
|
}
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
@media (max-width: 640px) {
|
|
25
|
-
section > ol { grid-template-columns: 1fr; }
|
|
26
|
-
section:has(> ol) { padding: var(--g4) var(--pad); }
|
|
27
|
-
}`;
|
|
22
|
+
${R} > ol > li strong { display: block; font-size: 1rem; margin-bottom: 4px; }
|
|
23
|
+
${R} > ol > li span { font-size: .8rem; line-height: 1.5; color: var(--fg-faint); }
|
|
24
|
+
@media (max-width: 640px) { ${R} > ol { grid-template-columns: 1fr; } }`;
|