@press2ai/theme-therapy-soft 0.3.0 → 1.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.
- package/package.json +1 -1
- package/src/styles/base.ts +19 -52
- package/src/styles/catalog-grid.ts +3 -10
- package/src/styles/category-nav.ts +4 -5
- package/src/styles/faq.ts +6 -18
- package/src/styles/pagination.ts +3 -3
- package/src/styles/profile-article.ts +15 -47
- package/src/styles/stat-bar.ts +3 -10
- package/src/templates/helpers.ts +1 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@press2ai/theme-therapy-soft",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "1.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/base.ts
CHANGED
|
@@ -1,34 +1,17 @@
|
|
|
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
|
-
|
|
3
2
|
:root {
|
|
4
|
-
--font-sans: 'DM Sans', system-ui,
|
|
3
|
+
--font-sans: 'DM Sans', system-ui, sans-serif;
|
|
5
4
|
--font-display: 'Fraunces', Georgia, serif;
|
|
6
|
-
|
|
7
|
-
--
|
|
8
|
-
--
|
|
9
|
-
--container: 1200px; --pad: var(--g5);
|
|
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); --gap: var(--g5);
|
|
10
8
|
--measure: 38rem;
|
|
11
|
-
|
|
12
|
-
--
|
|
13
|
-
--
|
|
14
|
-
--
|
|
15
|
-
--
|
|
16
|
-
--
|
|
17
|
-
--navy: #1d1d46;
|
|
18
|
-
--navy-2: #3d3d66;
|
|
19
|
-
--gray: #6e7878;
|
|
20
|
-
--gray-light: #d9e0e1;
|
|
21
|
-
--gray-bg: #f5f7f7;
|
|
22
|
-
--teal-soft: #ecf6f5;
|
|
23
|
-
--peach-soft: #fff6f1;
|
|
24
|
-
--white: #ffffff;
|
|
25
|
-
|
|
26
|
-
--bg: var(--white);
|
|
27
|
-
--card: var(--white);
|
|
28
|
-
--ink: var(--navy);
|
|
29
|
-
--ink-2: var(--gray);
|
|
30
|
-
--line: var(--gray-light);
|
|
31
|
-
|
|
9
|
+
--purple: #a293ff; --purple-soft: #efebff; --purple-dark: #8677e0;
|
|
10
|
+
--gold: #f0be37; --gold-soft: #fff5da;
|
|
11
|
+
--navy: #1d1d46; --navy-2: #3d3d66;
|
|
12
|
+
--gray: #6e7878; --gray-light: #d9e0e1; --gray-bg: #f5f7f7;
|
|
13
|
+
--white: #fff;
|
|
14
|
+
--bg: var(--white); --card: var(--white); --ink: var(--navy); --ink-2: var(--gray); --line: var(--gray-light);
|
|
32
15
|
--r: 8px; --r-lg: 20px; --r-btn: 12px;
|
|
33
16
|
--shadow: 0 1px 3px rgba(29,29,70,.06);
|
|
34
17
|
--shadow-md: 0 4px 20px rgba(29,29,70,.08);
|
|
@@ -37,32 +20,16 @@ export const css = `@import url('https://fonts.googleapis.com/css2?family=Fraunc
|
|
|
37
20
|
}
|
|
38
21
|
*, *::before, *::after { box-sizing: border-box; margin: 0; }
|
|
39
22
|
html { font-size: 16px; -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }
|
|
40
|
-
body {
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
line-height: 1.2; letter-spacing: -0.02em;
|
|
47
|
-
}
|
|
48
|
-
h1 { font-size: clamp(var(--t-2xl), 5.5vw, var(--t-3xl)); margin-bottom: var(--g4); }
|
|
49
|
-
h2 { font-size: clamp(var(--t-lg), 3vw, var(--t-2xl)); margin-bottom: var(--g3); }
|
|
50
|
-
h3 { font-size: var(--t-md); font-weight: 500; font-family: var(--font-sans); margin-bottom: var(--g2); }
|
|
51
|
-
p { font-size: var(--t-sm); line-height: 1.6; color: var(--ink-2); margin-bottom: var(--g2); max-width: var(--measure); }
|
|
23
|
+
body { font-family: var(--font-sans); color: var(--ink); background: var(--bg); line-height: 1.5; overflow-x: clip; }
|
|
24
|
+
h1, h2, h3 { color: var(--ink); font-family: var(--font-display); font-weight: 400; line-height: 1.2; letter-spacing: -.02em; }
|
|
25
|
+
h1 { font-size: clamp(var(--t-2xl), 5.5vw, var(--t-3xl)); }
|
|
26
|
+
h2 { font-size: clamp(var(--t-lg), 3vw, var(--t-2xl)); }
|
|
27
|
+
h3 { font-size: var(--t-md); font-weight: 500; font-family: var(--font-sans); }
|
|
28
|
+
p { font-size: var(--t-sm); line-height: 1.6; color: var(--ink-2); max-width: var(--measure); }
|
|
52
29
|
a { color: var(--purple); text-decoration: none; transition: color var(--ease); }
|
|
53
30
|
a:hover { color: var(--navy); }
|
|
54
31
|
small { font-size: var(--t-xs); color: var(--ink-2); }
|
|
55
32
|
strong { color: var(--ink); font-weight: 600; }
|
|
56
|
-
main {
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
}
|
|
60
|
-
main:not(:has(> section, > article, > div, > nav)) {
|
|
61
|
-
padding-top: var(--g6); padding-bottom: var(--g6);
|
|
62
|
-
}
|
|
63
|
-
main > * + * { margin-top: var(--g6); }
|
|
64
|
-
@media (max-width: 640px) {
|
|
65
|
-
:root { --pad: var(--g3); }
|
|
66
|
-
main { padding: 0 var(--pad) var(--g4); }
|
|
67
|
-
main > * + * { margin-top: var(--g5); }
|
|
68
|
-
}`;
|
|
33
|
+
main { max-width: var(--container); margin-inline: auto; padding-inline: var(--pad); }
|
|
34
|
+
main > * + * { margin-top: var(--gap); }
|
|
35
|
+
@media (max-width: 640px) { :root { --pad: var(--g3); --gap: var(--g4); } }`;
|
|
@@ -1,14 +1,7 @@
|
|
|
1
1
|
export const css = `section:has(> article[itemscope]) {
|
|
2
|
-
display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
|
3
|
-
gap: var(--g4);
|
|
2
|
+
display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--g4);
|
|
4
3
|
}
|
|
5
4
|
section:has(> article[itemscope]) > h2 {
|
|
6
|
-
grid-column: 1 / -1; text-align: center; margin-bottom: var(--
|
|
7
|
-
font-family: var(--font-display);
|
|
5
|
+
grid-column: 1 / -1; text-align: center; margin-bottom: 0; font-family: var(--font-display);
|
|
8
6
|
}
|
|
9
|
-
section:has(> article[itemscope])
|
|
10
|
-
grid-column: 1 / -1; margin-bottom: var(--g3); justify-content: center;
|
|
11
|
-
}
|
|
12
|
-
@media (max-width: 640px) {
|
|
13
|
-
section:has(> article[itemscope]) { grid-template-columns: 1fr; }
|
|
14
|
-
}`;
|
|
7
|
+
@media (max-width: 640px) { section:has(> article[itemscope]) { grid-template-columns: 1fr; } }`;
|
|
@@ -1,10 +1,9 @@
|
|
|
1
|
-
export const css = `nav[aria-label] {
|
|
1
|
+
export const css = `main > nav[aria-label] {
|
|
2
2
|
display: flex; flex-wrap: wrap; gap: var(--g1); justify-content: center;
|
|
3
3
|
}
|
|
4
|
-
nav[aria-label] a {
|
|
4
|
+
main > nav[aria-label] a {
|
|
5
5
|
display: inline-flex; align-items: center; height: 40px; padding: 0 var(--g3);
|
|
6
6
|
border-radius: var(--r-btn); font-size: var(--t-xs); font-weight: 500;
|
|
7
|
-
background: var(--purple-soft); border: none; color: var(--navy);
|
|
8
|
-
transition: all var(--ease);
|
|
7
|
+
background: var(--purple-soft); border: none; color: var(--navy); transition: all var(--ease);
|
|
9
8
|
}
|
|
10
|
-
nav[aria-label] a:hover { background: var(--purple); color: var(--white); }`;
|
|
9
|
+
main > nav[aria-label] a:hover { background: var(--purple); color: var(--white); }`;
|
package/src/styles/faq.ts
CHANGED
|
@@ -1,25 +1,13 @@
|
|
|
1
|
-
export const css = `section[aria-label="FAQ"] {
|
|
2
|
-
max-width: 800px; margin: var(--g6) auto;
|
|
3
|
-
}
|
|
1
|
+
export const css = `section[aria-label="FAQ"] { max-width: 800px; margin-inline: auto; }
|
|
4
2
|
section[aria-label="FAQ"] > h2 { text-align: center; margin-bottom: var(--g5); }
|
|
5
|
-
section[aria-label="FAQ"] details {
|
|
6
|
-
border-bottom: 1px solid var(--line); overflow: hidden;
|
|
7
|
-
}
|
|
3
|
+
section[aria-label="FAQ"] details { border-bottom: 1px solid var(--line); }
|
|
8
4
|
section[aria-label="FAQ"] details > summary {
|
|
9
5
|
display: flex; justify-content: space-between; align-items: center;
|
|
10
6
|
padding: var(--g3) 0; cursor: pointer; list-style: none;
|
|
11
|
-
font-
|
|
12
|
-
color: var(--ink); transition: color var(--ease);
|
|
7
|
+
font-size: var(--t-sm); font-weight: 500; color: var(--ink); transition: color var(--ease);
|
|
13
8
|
}
|
|
14
9
|
section[aria-label="FAQ"] details > summary::-webkit-details-marker { display: none; }
|
|
15
|
-
section[aria-label="FAQ"] details > summary::after {
|
|
16
|
-
|
|
17
|
-
transition: transform var(--ease);
|
|
18
|
-
}
|
|
19
|
-
section[aria-label="FAQ"] details[open] > summary::after {
|
|
20
|
-
content: '−';
|
|
21
|
-
}
|
|
10
|
+
section[aria-label="FAQ"] details > summary::after { content: '+'; font-size: var(--t-lg); font-weight: 300; color: var(--purple); transition: transform var(--ease); }
|
|
11
|
+
section[aria-label="FAQ"] details[open] > summary::after { content: '−'; }
|
|
22
12
|
section[aria-label="FAQ"] details > summary:hover { color: var(--purple); }
|
|
23
|
-
section[aria-label="FAQ"] details > div {
|
|
24
|
-
padding: 0 0 var(--g3); font-size: var(--t-sm); line-height: 1.7; color: var(--ink-2);
|
|
25
|
-
}`;
|
|
13
|
+
section[aria-label="FAQ"] details > div { padding: 0 0 var(--g3); font-size: var(--t-sm); line-height: 1.7; color: var(--ink-2); }`;
|
package/src/styles/pagination.ts
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
export const css = `main > nav p {
|
|
1
|
+
export const css = `main > nav:has(> p) p {
|
|
2
2
|
display: flex; align-items: center; justify-content: center; gap: var(--g3);
|
|
3
3
|
font-size: var(--t-xs); color: var(--ink-2);
|
|
4
4
|
}
|
|
5
|
-
main > nav a {
|
|
5
|
+
main > nav:has(> p) a {
|
|
6
6
|
height: 40px; display: inline-flex; align-items: center; padding: 0 var(--g3);
|
|
7
7
|
border-radius: var(--r-btn); background: var(--purple-soft);
|
|
8
8
|
font-size: var(--t-xs); font-weight: 500; color: var(--navy); border: none;
|
|
9
9
|
transition: all var(--ease);
|
|
10
10
|
}
|
|
11
|
-
main > nav a:hover { background: var(--purple); color: var(--white); }`;
|
|
11
|
+
main > nav:has(> p) a:hover { background: var(--purple); color: var(--white); }`;
|
|
@@ -1,49 +1,17 @@
|
|
|
1
|
-
export const css = `main > article {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
}
|
|
5
|
-
main > article
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
}
|
|
9
|
-
main > article
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
}
|
|
14
|
-
main > article > header p {
|
|
15
|
-
font-size: var(--t-md); color: var(--purple); margin: 0;
|
|
16
|
-
font-family: var(--font-display); font-style: italic;
|
|
17
|
-
}
|
|
18
|
-
main > article address {
|
|
19
|
-
font-style: normal; font-size: var(--t-sm); color: var(--ink-2);
|
|
20
|
-
padding: var(--g2) 0; margin-bottom: var(--g4); border-bottom: 1px solid var(--line);
|
|
21
|
-
}
|
|
22
|
-
main > article section {
|
|
23
|
-
margin: var(--g5) 0; padding-top: var(--g4); border-top: 1px solid var(--line);
|
|
24
|
-
}
|
|
25
|
-
main > article section h2 {
|
|
26
|
-
font-family: var(--font-sans); font-size: var(--t-xs); font-weight: 600;
|
|
27
|
-
text-transform: uppercase; letter-spacing: 0.1em; color: var(--purple);
|
|
28
|
-
margin: 0 0 var(--g3);
|
|
29
|
-
}
|
|
30
|
-
main > article ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--g1); }
|
|
31
|
-
main > article ul li {
|
|
32
|
-
font-size: var(--t-xs); font-weight: 500; color: var(--purple-dark);
|
|
33
|
-
padding: var(--g1) var(--g2); background: var(--purple-soft); border-radius: 999px;
|
|
34
|
-
}
|
|
35
|
-
main > article dl {
|
|
36
|
-
display: grid; grid-template-columns: 9rem 1fr; gap: var(--g2) var(--g3);
|
|
37
|
-
}
|
|
38
|
-
main > article dt {
|
|
39
|
-
font-size: var(--t-xs); color: var(--ink-2); font-weight: 600;
|
|
40
|
-
text-transform: uppercase; letter-spacing: 0.06em;
|
|
41
|
-
}
|
|
42
|
-
main > article dd { margin: 0; font-size: var(--t-sm); }
|
|
43
|
-
main > article dd a { color: var(--purple); }
|
|
44
|
-
main > article dd a:hover { color: var(--navy); }
|
|
1
|
+
export const css = `main > article[itemscope] { max-width: 720px; margin-inline: auto; }
|
|
2
|
+
main > article[itemscope] > header { padding-bottom: var(--g4); margin-bottom: var(--g4); border-bottom: 2px solid var(--purple); }
|
|
3
|
+
main > article[itemscope] > header h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(var(--t-xl), 5vw, var(--t-2xl)); letter-spacing: -.02em; line-height: 1.15; margin-bottom: var(--g1); }
|
|
4
|
+
main > article[itemscope] > header p { font-size: var(--t-md); color: var(--purple); margin: 0; font-family: var(--font-display); font-style: italic; }
|
|
5
|
+
main > article[itemscope] 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); }
|
|
6
|
+
main > article[itemscope] section { margin: var(--g5) 0; padding-top: var(--g4); border-top: 1px solid var(--line); }
|
|
7
|
+
main > article[itemscope] 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(--g3); }
|
|
8
|
+
main > article[itemscope] ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--g1); }
|
|
9
|
+
main > article[itemscope] 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; }
|
|
10
|
+
main > article[itemscope] dl { display: grid; grid-template-columns: 9rem 1fr; gap: var(--g2) var(--g3); }
|
|
11
|
+
main > article[itemscope] dt { font-size: var(--t-xs); color: var(--ink-2); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
|
|
12
|
+
main > article[itemscope] dd { margin: 0; font-size: var(--t-sm); }
|
|
13
|
+
main > article[itemscope] dd a { color: var(--purple); }
|
|
45
14
|
@media (max-width: 640px) {
|
|
46
|
-
main > article {
|
|
47
|
-
main > article
|
|
48
|
-
main > article dt { margin-top: var(--g2); }
|
|
15
|
+
main > article[itemscope] dl { grid-template-columns: 1fr; gap: 2px 0; }
|
|
16
|
+
main > article[itemscope] dt { margin-top: var(--g2); }
|
|
49
17
|
}`;
|
package/src/styles/stat-bar.ts
CHANGED
|
@@ -2,13 +2,9 @@ export const css = `section[aria-label="Statystyki"] {
|
|
|
2
2
|
margin-inline: calc(50% - 50vw); padding: var(--g5) var(--pad);
|
|
3
3
|
background: var(--gray-bg); border-bottom: 1px solid var(--line);
|
|
4
4
|
}
|
|
5
|
-
section[aria-label="Statystyki"] > p {
|
|
6
|
-
text-align: center; font-family: var(--font-display); font-style: italic;
|
|
7
|
-
font-size: var(--t-md); color: var(--ink); margin: 0 auto var(--g4); max-width: var(--measure);
|
|
8
|
-
}
|
|
9
5
|
section[aria-label="Statystyki"] > dl {
|
|
10
6
|
display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
|
|
11
|
-
gap: var(--g4); max-width: 800px; margin: 0 auto;
|
|
7
|
+
gap: var(--g4); max-width: 800px; margin: 0 auto;
|
|
12
8
|
}
|
|
13
9
|
section[aria-label="Statystyki"] > dl div { text-align: center; }
|
|
14
10
|
section[aria-label="Statystyki"] > dl div > span:has(> svg) {
|
|
@@ -18,12 +14,9 @@ section[aria-label="Statystyki"] > dl div > span:has(> svg) {
|
|
|
18
14
|
}
|
|
19
15
|
section[aria-label="Statystyki"] > dl div > span:has(> svg) > svg { width: 22px; height: 22px; }
|
|
20
16
|
section[aria-label="Statystyki"] > dl dt {
|
|
21
|
-
font-family: var(--font-display); font-size: var(--t-2xl); font-weight: 300;
|
|
22
|
-
line-height: 1.1; color: var(--navy);
|
|
17
|
+
font-family: var(--font-display); font-size: var(--t-2xl); font-weight: 300; line-height: 1.1; color: var(--navy);
|
|
23
18
|
}
|
|
24
19
|
section[aria-label="Statystyki"] > dl dd {
|
|
25
20
|
margin: var(--g1) 0 0; font-size: var(--t-xs); color: var(--ink-2); font-weight: 500;
|
|
26
21
|
}
|
|
27
|
-
@media (max-width: 640px) {
|
|
28
|
-
section[aria-label="Statystyki"] > dl { grid-template-columns: repeat(2, 1fr); }
|
|
29
|
-
}`;
|
|
22
|
+
@media (max-width: 640px) { section[aria-label="Statystyki"] > dl { grid-template-columns: repeat(2, 1fr); } }`;
|
package/src/templates/helpers.ts
CHANGED