@press2ai/theme-therapy-soft 2.0.0 → 2.1.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 (14) hide show
  1. package/package.json +1 -1
  2. package/src/styles/_shared.ts +0 -2
  3. package/src/styles/base.ts +89 -27
  4. package/src/styles/catalog-grid.ts +2 -5
  5. package/src/styles/category-nav.ts +3 -4
  6. package/src/styles/cta.ts +7 -9
  7. package/src/styles/faq.ts +6 -7
  8. package/src/styles/forms.ts +3 -19
  9. package/src/styles/hero.ts +15 -31
  10. package/src/styles/pagination.ts +4 -9
  11. package/src/styles/process.ts +9 -17
  12. package/src/styles/profile-article.ts +12 -13
  13. package/src/styles/profile-card.ts +13 -21
  14. package/src/styles/stat-bar.ts +7 -14
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@press2ai/theme-therapy-soft",
3
- "version": "2.0.0",
3
+ "version": "2.1.0",
4
4
  "description": "Warm sage/beige classless theme for therapy verticals. Crimson Text serif + Inter. Structurally compatible with @press2ai/engine CatalogTheme.",
5
5
  "type": "module",
6
6
  "license": "MIT",
package/src/styles/_shared.ts CHANGED
@@ -1,3 +1 @@
1
1
  export const BREAKOUT = `margin-inline: calc(50% - 50vw); padding-inline: var(--pad);`;
2
- export const BREAKOUT_LIGHT = `${BREAKOUT} background: var(--gray-bg);`;
3
- export const BREAKOUT_DARK = `${BREAKOUT} background: linear-gradient(170deg, var(--navy) 0%, #2a2a5c 100%); color: var(--white);`;
package/src/styles/base.ts CHANGED
@@ -1,36 +1,98 @@
1
1
  export const css = `@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,600;1,9..144,400&family=DM+Sans:wght@400;500;600&display=swap');
2
2
  :root {
3
- --font-sans: 'DM Sans', system-ui, sans-serif;
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
+
11
+ --font: 'DM Sans', system-ui, sans-serif;
4
12
  --font-display: 'Fraunces', Georgia, serif;
5
- --g1: .5rem; --g2: .75rem; --g3: 1rem; --g4: 1.5rem; --g5: 2.5rem; --g6: 4rem; --g7: 6rem;
6
- --t-xs: .8125rem; --t-sm: .9375rem; --t-md: 1.125rem; --t-lg: 1.5625rem; --t-xl: 2.125rem; --t-2xl: 2.5rem; --t-3xl: 3.5rem;
7
- --container: 1200px; --pad: var(--g5);
8
- --section-gap: var(--g5); --block-gap: var(--g3); --card-gap: var(--g4);
9
- --measure: 38rem;
10
- --purple: #a293ff; --purple-soft: #efebff; --purple-dark: #8677e0;
11
- --gold: #f0be37; --gold-soft: #fff5da;
12
- --navy: #1d1d46; --navy-2: #3d3d66;
13
- --gray: #6e7878; --gray-light: #d9e0e1; --gray-bg: #f5f7f7;
14
- --white: #fff;
15
- --bg: var(--white); --card: var(--white); --ink: var(--navy); --ink-2: var(--gray); --line: var(--gray-light);
16
- --r: 8px; --r-lg: 20px; --r-btn: 12px;
13
+ --container: 1200px; --pad: var(--g3);
14
+
15
+ --bg: #fff; --fg: #1d1d46; --fg-muted: #6e7878; --fg-faint: #9aa5a5;
16
+ --border: #d9e0e1; --border-strong: #b8c4c4;
17
+ --surface: #f5f7f7; --card: #fff;
18
+ --accent: #a293ff; --accent-soft: #efebff; --accent-dark: #8677e0;
19
+ --gold: #f0be37;
20
+ --navy: #1d1d46;
21
+
22
+ --r: 8px; --r-lg: 20px; --r-btn: 12px; --pill: 999px;
17
23
  --shadow: 0 1px 3px rgba(29,29,70,.06);
18
24
  --shadow-md: 0 4px 20px rgba(29,29,70,.08);
19
25
  --shadow-up: 0 12px 32px rgba(29,29,70,.12);
20
26
  --ease: 200ms cubic-bezier(.4,0,.2,1);
27
+ color-scheme: light;
21
28
  }
22
- *, *::before, *::after { box-sizing: border-box; margin: 0; }
23
- html { font-size: 16px; -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }
24
- body { font-family: var(--font-sans); color: var(--ink); background: var(--bg); line-height: 1.5; overflow-x: clip; }
25
- h1, h2, h3 { color: var(--ink); font-family: var(--font-display); font-weight: 400; line-height: 1.2; letter-spacing: -.02em; }
26
- h1 { font-size: clamp(var(--t-2xl), 5.5vw, var(--t-3xl)); }
27
- h2 { font-size: clamp(var(--t-lg), 3vw, var(--t-2xl)); }
28
- h3 { font-size: var(--t-md); font-weight: 500; font-family: var(--font-sans); }
29
- p { font-size: var(--t-sm); line-height: 1.6; color: var(--ink-2); max-width: var(--measure); }
30
- a { color: var(--purple); text-decoration: none; transition: color var(--ease); }
31
- a:hover { color: var(--navy); }
32
- small { font-size: var(--t-xs); color: var(--ink-2); }
33
- strong { color: var(--ink); font-weight: 600; }
29
+
30
+ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
31
+ html { font-size: 16px; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }
32
+ body { font-family: var(--font); color: var(--fg); background: var(--bg); line-height: 1.5; overflow-x: clip; }
33
+
34
+ /* --- HEADER --- */
35
+ body > header {
36
+ position: sticky; top: 0; z-index: 50;
37
+ background: rgba(255,255,255,.92); backdrop-filter: blur(16px);
38
+ border-bottom: 1px solid var(--border);
39
+ }
40
+ body > header nav {
41
+ max-width: var(--container); margin-inline: auto; padding-inline: var(--pad);
42
+ height: 72px; display: flex; align-items: center; justify-content: space-between;
43
+ }
44
+ body > header nav a { color: var(--fg-muted); font-size: .8125rem; font-weight: 500; text-decoration: none; transition: color var(--ease); }
45
+ body > header nav a:hover { color: var(--accent); }
46
+ body > header nav a strong { font-family: var(--font-display); font-size: 1.125rem; font-weight: 400; color: var(--fg); }
47
+
48
+ /* --- MAIN --- */
34
49
  main { max-width: var(--container); margin-inline: auto; padding-inline: var(--pad); }
35
- main > * + * { margin-top: var(--section-gap); }
36
- @media (max-width: 640px) { :root { --pad: var(--g3); --section-gap: var(--g4); --block-gap: var(--g2); --card-gap: var(--g3); } }`;
50
+ main > * + * { margin-top: var(--g5); }
51
+
52
+ /* --- HEADINGS --- */
53
+ h1, h2, h3 { text-wrap: balance; color: var(--fg); font-family: var(--font-display); font-weight: 400; line-height: 1.2; letter-spacing: -.02em; }
54
+ h1 { font-size: clamp(2.5rem, 5.5vw, 3.5rem); }
55
+ h2 { font-size: clamp(1.5625rem, 3vw, 2.5rem); }
56
+ h3 { font-size: 1.125rem; font-weight: 500; font-family: var(--font); }
57
+
58
+ /* --- TEXT --- */
59
+ p { font-size: .9375rem; line-height: 1.6; color: var(--fg-muted); max-width: 38rem; text-wrap: pretty; }
60
+ a { color: var(--accent); text-decoration: none; transition: color var(--ease); }
61
+ a:hover { color: var(--navy); }
62
+ small { font-size: .8125rem; color: var(--fg-muted); }
63
+ strong { font-weight: 600; color: var(--fg); }
64
+
65
+ /* --- FORM ELEMENTS --- */
66
+ input, textarea, select { font-family: inherit; font-size: 15px; padding: var(--g2) var(--g3); border: 1px solid var(--border); border-radius: var(--r); background: var(--card); color: var(--fg); outline: none; width: 100%; }
67
+ input::placeholder { color: var(--fg-faint); }
68
+ input:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(162,147,255,.15); }
69
+ label { display: block; font-size: 14px; font-weight: 600; margin-bottom: var(--g1); }
70
+ button, input[type="submit"] { background: var(--gold); color: var(--navy); border: none; border-radius: var(--r-btn); padding: var(--g2) var(--g4); font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer; transition: background var(--ease); }
71
+ button:hover { background: #e5b030; }
72
+
73
+ /* --- FOOTER --- */
74
+ body > footer {
75
+ background: var(--accent); color: var(--card); padding: var(--g5) 0 var(--g4); margin-top: var(--g6);
76
+ }
77
+ body > footer > small {
78
+ display: block; max-width: var(--container); margin-inline: auto; padding-inline: var(--pad);
79
+ color: rgba(255,255,255,.7); font-size: .8125rem;
80
+ }
81
+ body > footer a { color: var(--card); text-decoration: none; transition: opacity var(--ease); }
82
+ body > footer a:hover { opacity: .7; }
83
+ body > footer > small > nav {
84
+ display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--g5);
85
+ margin-bottom: var(--g5); padding-bottom: var(--g5); border-bottom: 1px solid rgba(255,255,255,.15);
86
+ }
87
+ body > footer > small > nav section { all: unset; display: block; }
88
+ body > footer > small > nav strong { display: block; font-size: .8125rem; font-weight: 600; color: var(--card); text-transform: uppercase; letter-spacing: .06em; margin-bottom: var(--g3); }
89
+ body > footer > small > nav p { font-size: .8125rem; line-height: 1.7; color: rgba(255,255,255,.6); margin: 0; max-width: 36ch; }
90
+ body > footer > small > nav a { display: block; font-size: .8125rem; line-height: 2.2; color: rgba(255,255,255,.7); }
91
+ body > footer > small > p { font-size: .8125rem; color: rgba(255,255,255,.5); }
92
+
93
+ /* --- RESPONSIVE --- */
94
+ @media (max-width: 640px) {
95
+ :root { --pad: var(--g2); }
96
+ main > * + * { margin-top: var(--g4); }
97
+ body > footer > small > nav { grid-template-columns: 1fr; gap: var(--g4); }
98
+ }`;
package/src/styles/catalog-grid.ts CHANGED
@@ -1,7 +1,4 @@
1
1
  const R = 'main > section:has(> article[itemscope])';
2
-
3
- export const css = `${R} {
4
- display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--card-gap);
5
- }
6
- ${R} > h2 { grid-column: 1 / -1; text-align: center; margin-bottom: 0; }
2
+ export const css = `${R} { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--g4); }
3
+ ${R} > h2 { grid-column: 1 / -1; text-align: center; }
7
4
  @media (max-width: 640px) { ${R} { grid-template-columns: 1fr; } }`;
package/src/styles/category-nav.ts CHANGED
@@ -1,9 +1,8 @@
1
1
  const R = 'main > nav:has(> a)';
2
-
3
2
  export const css = `${R} { display: flex; flex-wrap: wrap; gap: var(--g1); justify-content: center; }
4
3
  ${R} > a {
5
4
  display: inline-flex; align-items: center; height: 40px; padding: 0 var(--g3);
6
- border-radius: var(--r-btn); font-size: var(--t-xs); font-weight: 500;
7
- background: var(--purple-soft); border: none; color: var(--navy); transition: all var(--ease);
5
+ border-radius: var(--r-btn); font-size: .8125rem; font-weight: 500;
6
+ background: var(--accent-soft); border: none; color: var(--navy); transition: all var(--ease);
8
7
  }
9
- ${R} > a:hover { background: var(--purple); color: var(--white); }`;
8
+ ${R} > a:hover { background: var(--accent); color: var(--card); }`;
package/src/styles/cta.ts CHANGED
@@ -1,16 +1,14 @@
1
- import { BREAKOUT_DARK } from './_shared.ts';
2
-
1
+ import { BREAKOUT } from './_shared.ts';
3
2
  const R = 'section[aria-label="CTA"]';
4
-
5
3
  export const css = `${R} {
6
- ${BREAKOUT_DARK}
7
- padding-block: var(--g6); text-align: center;
4
+ ${BREAKOUT} padding-block: var(--g6); text-align: center;
5
+ background: linear-gradient(170deg, var(--navy) 0%, #2a2a5c 100%); color: var(--card);
8
6
  }
9
- ${R} > h2 { color: var(--white); max-width: 18ch; margin: 0 auto var(--block-gap); }
10
- ${R} > p { color: rgba(255,255,255,.7); font-size: var(--t-md); max-width: var(--measure); margin: 0 auto var(--g5); }
7
+ ${R} > h2 { color: var(--card); max-width: 18ch; margin: 0 auto var(--g3); }
8
+ ${R} > p { color: rgba(255,255,255,.7); font-size: 1.125rem; max-width: 38rem; margin: 0 auto var(--g5); }
11
9
  ${R} > a {
12
10
  display: inline-flex; align-items: center; height: 56px; padding: 0 var(--g5);
13
11
  border-radius: var(--r-btn); background: var(--gold); color: var(--navy);
14
- font-weight: 600; font-size: var(--t-sm); transition: background var(--ease);
12
+ font-weight: 600; font-size: .9375rem; transition: background var(--ease); text-decoration: none;
15
13
  }
16
- ${R} > a:hover { background: #e5b030; color: var(--navy); }`;
14
+ ${R} > a:hover { background: #e5b030; }`;
package/src/styles/faq.ts CHANGED
@@ -1,15 +1,14 @@
1
1
  const R = 'main > section:has(> details)';
2
-
3
2
  export const css = `${R} { max-width: 800px; margin-inline: auto; }
4
3
  ${R} > h2 { text-align: center; margin-bottom: var(--g5); }
5
- ${R} > details { border-bottom: 1px solid var(--line); }
4
+ ${R} > details { border-bottom: 1px solid var(--border); }
6
5
  ${R} > details > summary {
7
6
  display: flex; justify-content: space-between; align-items: center;
8
- padding: var(--block-gap) 0; cursor: pointer; list-style: none;
9
- font-size: var(--t-sm); font-weight: 500; color: var(--ink); transition: color var(--ease);
7
+ padding: var(--g3) 0; cursor: pointer; list-style: none;
8
+ font-size: .9375rem; font-weight: 500; color: var(--fg); transition: color var(--ease);
10
9
  }
11
10
  ${R} > details > summary::-webkit-details-marker { display: none; }
12
- ${R} > details > summary::after { content: '+'; font-size: var(--t-lg); font-weight: 300; color: var(--purple); }
11
+ ${R} > details > summary::after { content: '+'; font-size: 1.5625rem; font-weight: 300; color: var(--accent); }
13
12
  ${R} > details[open] > summary::after { content: '\\2212'; }
14
- ${R} > details > summary:hover { color: var(--purple); }
15
- ${R} > details > div { padding: 0 0 var(--block-gap); font-size: var(--t-sm); line-height: 1.7; color: var(--ink-2); }`;
13
+ ${R} > details > summary:hover { color: var(--accent); }
14
+ ${R} > details > div { padding: 0 0 var(--g3); font-size: .9375rem; line-height: 1.7; color: var(--fg-muted); }`;
package/src/styles/forms.ts CHANGED
@@ -1,20 +1,4 @@
1
- export const css = `form:not([role="search"]) label {
2
- display: block; font-size: var(--t-sm); color: var(--ink-2);
3
- font-weight: 500; margin-bottom: var(--g1);
4
- }
5
- form:not([role="search"]) input[type="text"] {
6
- display: block; width: 100%; margin-top: var(--g1); height: 48px;
7
- padding: 0 var(--g3); background: var(--white); border: 1px solid var(--line);
8
- border-radius: var(--r); color: var(--ink); font-size: var(--t-sm); font-family: var(--font-sans);
9
- transition: border-color var(--ease);
10
- }
11
- form:not([role="search"]) input[type="text"]:focus {
12
- outline: none; border-color: var(--purple); box-shadow: 0 0 0 3px rgba(162,147,255,.15);
13
- }
14
- form:not([role="search"]) button[type="submit"] {
15
- margin-top: var(--g3); height: 48px; padding: 0 var(--g5);
16
- border: none; border-radius: var(--r-btn); background: var(--gold); color: var(--navy);
17
- font-size: var(--t-sm); font-weight: 600; font-family: var(--font-sans);
18
- cursor: pointer; transition: background var(--ease);
19
- }
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); }
20
4
  form:not([role="search"]) button[type="submit"]:hover { background: #e5b030; }`;
package/src/styles/hero.ts CHANGED
@@ -1,11 +1,9 @@
1
- import { BREAKOUT_DARK } from './_shared.ts';
2
-
1
+ import { BREAKOUT } from './_shared.ts';
3
2
  const R = 'main > hgroup';
4
-
5
3
  export const css = `${R} {
6
- ${BREAKOUT_DARK}
7
- position: relative; text-align: center; isolation: isolate;
8
- padding-block: var(--g7) var(--g6);
4
+ ${BREAKOUT} text-align: center; position: relative; isolation: isolate;
5
+ padding-block: var(--g6);
6
+ background: linear-gradient(170deg, var(--navy) 0%, #2a2a5c 40%, #3d2d6b 100%); color: var(--card);
9
7
  }
10
8
  ${R} > * { position: relative; max-width: 860px; margin-inline: auto; }
11
9
  ${R} > p:first-child { display: inline-flex; margin: 0 auto var(--g4); }
@@ -13,34 +11,20 @@ ${R} > p:first-child small {
13
11
  display: inline-flex; align-items: center; gap: var(--g1);
14
12
  background: rgba(255,255,255,.1); backdrop-filter: blur(8px);
15
13
  padding: var(--g1) var(--g3); border: 1px solid rgba(255,255,255,.15);
16
- border-radius: 999px; font-size: var(--t-xs); font-weight: 500; color: var(--gold); letter-spacing: .04em;
17
- }
18
- ${R} > p:first-child small::before {
19
- content: ''; width: 6px; height: 6px; border-radius: 50%;
20
- background: var(--gold); box-shadow: 0 0 0 3px rgba(240,190,55,.3);
21
- }
22
- ${R} h1 { font-weight: 300; max-width: 16ch; margin: 0 auto var(--g4); color: var(--white); line-height: 1.1; }
23
- ${R} > p:not(:first-child) {
24
- font-size: var(--t-md); line-height: 1.6; color: rgba(255,255,255,.7);
25
- max-width: var(--measure); margin: 0 auto var(--g5);
14
+ border-radius: var(--pill); font-size: .8125rem; font-weight: 500; color: var(--gold); letter-spacing: .04em;
26
15
  }
16
+ ${R} > p:first-child small::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px rgba(240,190,55,.3); }
17
+ ${R} h1 { font-weight: 300; max-width: 16ch; margin: 0 auto var(--g4); color: var(--card); line-height: 1.1; }
18
+ ${R} > p:not(:first-child) { font-size: 1.125rem; line-height: 1.6; color: rgba(255,255,255,.7); max-width: 38rem; margin: 0 auto var(--g5); }
27
19
  form[role="search"] {
28
- display: flex; max-width: 520px; height: 56px;
29
- margin: var(--g5) auto 0; background: var(--white);
30
- border-radius: var(--r-btn); overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,.2);
31
- }
32
- form[role="search"] input {
33
- flex: 1; min-width: 0; border: none; background: transparent; color: var(--ink);
34
- padding: 0 var(--g4); font-size: var(--t-sm); font-family: var(--font-sans); outline: none;
35
- }
36
- form[role="search"] input::placeholder { color: var(--ink-2); }
37
- form[role="search"] button {
38
- flex-shrink: 0; height: 100%; border: none; background: var(--purple); color: var(--white);
39
- padding: 0 var(--g5); font-size: var(--t-sm); font-weight: 600;
40
- font-family: var(--font-sans); cursor: pointer; transition: background var(--ease);
20
+ display: flex; max-width: 520px; height: 56px; margin: var(--g5) auto 0;
21
+ background: var(--card); border-radius: var(--r-btn); overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,.2);
41
22
  }
42
- form[role="search"] button:hover { background: var(--purple-dark); }
23
+ form[role="search"] input { flex: 1; min-width: 0; border: none; background: transparent; color: var(--fg); padding: 0 var(--g4); font-size: .9375rem; font-family: var(--font); outline: none; }
24
+ form[role="search"] input::placeholder { color: var(--fg-muted); }
25
+ form[role="search"] button { flex-shrink: 0; height: 100%; border: none; background: var(--accent); color: var(--card); padding: 0 var(--g5); font-size: .9375rem; font-weight: 600; font-family: var(--font); cursor: pointer; border-radius: 0; }
26
+ form[role="search"] button:hover { background: var(--accent-dark); }
43
27
  @media (max-width: 640px) {
44
- ${R} { padding-block: var(--g6) var(--g5); }
28
+ ${R} { padding-block: var(--g5); }
45
29
  form[role="search"] { height: 48px; }
46
30
  }`;
package/src/styles/pagination.ts CHANGED
@@ -1,13 +1,8 @@
1
1
  const R = 'main > nav:has(> p)';
2
-
3
- export const css = `${R} > p {
4
- display: flex; align-items: center; justify-content: center; gap: var(--block-gap);
5
- font-size: var(--t-xs); color: var(--ink-2);
6
- }
2
+ export const css = `${R} > p { display: flex; align-items: center; justify-content: center; gap: var(--g3); font-size: .8125rem; color: var(--fg-muted); }
7
3
  ${R} a {
8
4
  height: 40px; display: inline-flex; align-items: center; padding: 0 var(--g3);
9
- border-radius: var(--r-btn); background: var(--purple-soft);
10
- font-size: var(--t-xs); font-weight: 500; color: var(--navy); border: none;
11
- transition: all var(--ease);
5
+ border-radius: var(--r-btn); background: var(--accent-soft);
6
+ font-size: .8125rem; font-weight: 500; color: var(--navy); border: none; transition: all var(--ease); text-decoration: none;
12
7
  }
13
- ${R} a:hover { background: var(--purple); color: var(--white); }`;
8
+ ${R} a:hover { background: var(--accent); color: var(--card); }`;
package/src/styles/process.ts CHANGED
@@ -1,27 +1,19 @@
1
- import { BREAKOUT_LIGHT } from './_shared.ts';
2
-
1
+ import { BREAKOUT } from './_shared.ts';
3
2
  const R = 'main > section:has(> ol)';
4
-
5
- export const css = `${R} {
6
- ${BREAKOUT_LIGHT}
7
- padding-block: var(--g6);
8
- }
3
+ export const css = `${R} { ${BREAKOUT} background: var(--surface); padding-block: var(--g6); }
9
4
  ${R} > h2 { text-align: center; max-width: var(--container); margin: 0 auto var(--g2); }
10
- ${R} > p { text-align: center; max-width: var(--container); margin: 0 auto var(--g5); font-size: var(--t-md); color: var(--ink-2); }
5
+ ${R} > p { text-align: center; max-width: var(--container); margin: 0 auto var(--g5); font-size: 1.125rem; color: var(--fg-muted); }
11
6
  ${R} > ol {
12
7
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
13
- gap: var(--card-gap); max-width: var(--container); margin: 0 auto;
14
- list-style: none; padding: 0; counter-reset: step;
8
+ gap: var(--g4); max-width: var(--container); margin: 0 auto; list-style: none; counter-reset: step;
15
9
  }
16
10
  ${R} > ol > li {
17
11
  counter-increment: step; text-align: center;
18
- background: var(--white); border-radius: var(--r-lg); padding: var(--g5) var(--g3);
19
- box-shadow: var(--shadow);
12
+ background: var(--card); border-radius: var(--r-lg); padding: var(--g5) var(--g3); box-shadow: var(--shadow);
20
13
  }
21
14
  ${R} > ol > li::before {
22
- content: counter(step, decimal-leading-zero);
23
- display: block; font-family: var(--font-display); font-size: var(--t-2xl);
24
- font-weight: 300; color: var(--purple); margin-bottom: var(--g3);
15
+ content: counter(step, decimal-leading-zero); display: block;
16
+ font-family: var(--font-display); font-size: 2.5rem; font-weight: 300; color: var(--accent); margin-bottom: var(--g3);
25
17
  }
26
- ${R} > ol > li > strong { display: block; font-size: var(--t-sm); font-weight: 600; margin-bottom: var(--g2); }
27
- ${R} > ol > li > span { font-size: var(--t-xs); color: var(--ink-2); line-height: 1.6; }`;
18
+ ${R} > ol > li > strong { display: block; font-size: .9375rem; font-weight: 600; margin-bottom: var(--g2); }
19
+ ${R} > ol > li > span { font-size: .8125rem; color: var(--fg-muted); line-height: 1.6; }`;
package/src/styles/profile-article.ts CHANGED
@@ -1,18 +1,17 @@
1
1
  const R = 'main > article[itemscope]';
2
-
3
2
  export const css = `${R} { max-width: 720px; margin-inline: auto; }
4
- ${R} > header { padding-bottom: var(--g4); margin-bottom: var(--g4); border-bottom: 2px solid var(--purple); }
5
- ${R} > header h1 { font-weight: 400; font-size: clamp(var(--t-xl), 5vw, var(--t-2xl)); letter-spacing: -.02em; line-height: 1.15; margin-bottom: var(--g1); }
6
- ${R} > header p { font-size: var(--t-md); color: var(--purple); margin: 0; font-family: var(--font-display); font-style: italic; }
7
- ${R} address { font-style: normal; font-size: var(--t-sm); color: var(--ink-2); padding: var(--g2) 0; margin-bottom: var(--g4); border-bottom: 1px solid var(--line); }
8
- ${R} section { margin: var(--g5) 0; padding-top: var(--g4); border-top: 1px solid var(--line); }
9
- ${R} section h2 { font-family: var(--font-sans); font-size: var(--t-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--purple); margin: 0 0 var(--block-gap); }
10
- ${R} ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--g1); }
11
- ${R} ul li { font-size: var(--t-xs); font-weight: 500; color: var(--purple-dark); padding: var(--g1) var(--g2); background: var(--purple-soft); border-radius: 999px; }
12
- ${R} dl { display: grid; grid-template-columns: 9rem 1fr; gap: var(--g2) var(--block-gap); }
13
- ${R} dt { font-size: var(--t-xs); color: var(--ink-2); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
14
- ${R} dd { margin: 0; font-size: var(--t-sm); }
15
- ${R} dd a { color: var(--purple); }
3
+ ${R} > header { padding-bottom: var(--g4); margin-bottom: var(--g4); border-bottom: 2px solid var(--accent); }
4
+ ${R} > header h1 { font-weight: 400; font-size: clamp(2.125rem, 5vw, 2.5rem); letter-spacing: -.02em; line-height: 1.15; margin-bottom: var(--g1); }
5
+ ${R} > header p { font-size: 1.125rem; color: var(--accent); margin: 0; font-family: var(--font-display); font-style: italic; }
6
+ ${R} address { font-style: normal; font-size: .9375rem; color: var(--fg-muted); padding: var(--g2) 0; margin-bottom: var(--g4); border-bottom: 1px solid var(--border); }
7
+ ${R} section { margin: var(--g5) 0; padding-top: var(--g4); border-top: 1px solid var(--border); }
8
+ ${R} section h2 { font-family: var(--font); font-size: .8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--accent); margin: 0 0 var(--g3); }
9
+ ${R} ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--g1); }
10
+ ${R} ul li { font-size: .8125rem; font-weight: 500; color: var(--accent-dark); padding: var(--g1) var(--g2); background: var(--accent-soft); border-radius: var(--pill); }
11
+ ${R} dl { display: grid; grid-template-columns: 9rem 1fr; gap: var(--g2) var(--g3); }
12
+ ${R} dt { font-size: .8125rem; color: var(--fg-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
13
+ ${R} dd { margin: 0; font-size: .9375rem; }
14
+ ${R} dd a { color: var(--accent); }
16
15
  @media (max-width: 640px) {
17
16
  ${R} dl { grid-template-columns: 1fr; gap: 2px 0; }
18
17
  ${R} dt { margin-top: var(--g2); }
package/src/styles/profile-card.ts CHANGED
@@ -1,29 +1,21 @@
1
1
  const R = 'main > section:has(> article[itemscope]) > article[itemscope]';
2
-
3
2
  export const css = `${R} {
4
- background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
5
- padding: var(--g4); display: flex; flex-direction: column;
6
- box-shadow: var(--shadow); transition: all var(--ease);
3
+ background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg);
4
+ padding: var(--g4); display: flex; flex-direction: column; box-shadow: var(--shadow); transition: all var(--ease);
7
5
  }
8
- ${R}:hover { box-shadow: var(--shadow-md); border-color: var(--purple); }
6
+ ${R}:hover { box-shadow: var(--shadow-md); border-color: var(--accent); }
9
7
  ${R} > div[aria-hidden] {
10
- width: 56px; height: 56px; border-radius: 50%;
11
- display: flex; align-items: center; justify-content: center;
12
- font-family: var(--font-display); font-size: var(--t-md); font-weight: 400;
13
- color: var(--white); background: var(--purple); margin-bottom: var(--block-gap);
8
+ width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
9
+ font-family: var(--font-display); font-size: 1.125rem; font-weight: 400; color: var(--card); background: var(--accent); margin-bottom: var(--g3);
14
10
  }
15
11
  ${R} header { margin-bottom: var(--g2); }
16
- ${R} h2 { font-family: var(--font-sans); font-size: var(--t-sm); font-weight: 600; line-height: 1.3; margin: 0 0 4px; }
17
- ${R} h2 a { color: var(--ink); }
18
- ${R} h2 a:hover { color: var(--purple); }
19
- ${R} header p { font-size: var(--t-xs); color: var(--ink-2); margin: 0; }
12
+ ${R} h2 { font-family: var(--font); font-size: .9375rem; font-weight: 600; line-height: 1.3; margin: 0 0 4px; }
13
+ ${R} h2 a { color: var(--fg); text-decoration: none; }
14
+ ${R} h2 a:hover { color: var(--accent); }
15
+ ${R} header p { font-size: .8125rem; color: var(--fg-muted); margin: 0; }
20
16
  ${R} header p:has([itemprop="address"]) { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; }
21
- ${R} header p:has([itemprop="address"])::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--purple); }
22
- ${R} [itemprop="description"] { font-size: var(--t-xs); line-height: 1.6; margin: var(--g2) 0 0; color: var(--ink-2); }
23
- ${R} ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; margin: var(--g2) 0 0; }
24
- ${R} ul li { background: var(--purple-soft); color: var(--purple-dark); padding: 3px var(--g2); border-radius: 999px; font-size: .75rem; font-weight: 500; }
25
- ${R} > a:last-child {
26
- display: inline-flex; margin-top: auto; padding-top: var(--block-gap);
27
- font-size: var(--t-xs); font-weight: 600; color: var(--purple); transition: color var(--ease);
28
- }
17
+ ${R} header p:has([itemprop="address"])::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }
18
+ ${R} ul { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; margin: var(--g2) 0 0; }
19
+ ${R} ul li { background: var(--accent-soft); color: var(--accent-dark); padding: 3px var(--g2); border-radius: var(--pill); font-size: .75rem; font-weight: 500; }
20
+ ${R} > a:last-child { display: inline-flex; margin-top: auto; padding-top: var(--g3); font-size: .8125rem; font-weight: 600; color: var(--accent); }
29
21
  ${R} > a:last-child:hover { color: var(--navy); }`;
package/src/styles/stat-bar.ts CHANGED
@@ -1,22 +1,15 @@
1
- import { BREAKOUT_LIGHT } from './_shared.ts';
2
-
1
+ import { BREAKOUT } from './_shared.ts';
3
2
  const R = 'main > section:has(> dl)';
4
-
5
3
  export const css = `${R} {
6
- ${BREAKOUT_LIGHT}
7
- padding-block: var(--g5); border-bottom: 1px solid var(--line);
8
- }
9
- ${R} > dl {
10
- display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
11
- gap: var(--card-gap); max-width: 800px; margin: 0 auto;
4
+ ${BREAKOUT} background: var(--surface); padding-block: var(--g5); border-bottom: 1px solid var(--border);
12
5
  }
6
+ ${R} > dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--g4); max-width: 800px; margin: 0 auto; }
13
7
  ${R} > dl div { text-align: center; }
14
8
  ${R} > dl div > span:has(> svg) {
15
- display: flex; align-items: center; justify-content: center;
16
- width: 48px; height: 48px; margin: 0 auto var(--g2);
17
- background: var(--purple-soft); border-radius: 50%; color: var(--purple);
9
+ display: flex; align-items: center; justify-content: center; width: 48px; height: 48px;
10
+ margin: 0 auto var(--g2); background: var(--accent-soft); border-radius: 50%; color: var(--accent);
18
11
  }
19
12
  ${R} > dl div > span:has(> svg) > svg { width: 22px; height: 22px; }
20
- ${R} > dl dt { font-family: var(--font-display); font-size: var(--t-2xl); font-weight: 300; line-height: 1.1; color: var(--navy); }
21
- ${R} > dl dd { margin: var(--g1) 0 0; font-size: var(--t-xs); color: var(--ink-2); font-weight: 500; }
13
+ ${R} > dl dt { font-family: var(--font-display); font-size: 2.5rem; font-weight: 300; line-height: 1.1; color: var(--navy); }
14
+ ${R} > dl dd { margin: var(--g1) 0 0; font-size: .8125rem; color: var(--fg-muted); font-weight: 500; }
22
15
  @media (max-width: 640px) { ${R} > dl { grid-template-columns: repeat(2, 1fr); } }`;