@press2ai/theme-therapy-soft 1.1.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.
- package/package.json +1 -1
- package/src/styles/_shared.ts +1 -0
- package/src/styles/base.ts +89 -26
- package/src/styles/catalog-grid.ts +4 -7
- package/src/styles/category-nav.ts +6 -7
- package/src/styles/cta.ts +11 -15
- package/src/styles/faq.ts +11 -10
- package/src/styles/forms.ts +3 -19
- package/src/styles/hero.ts +22 -59
- package/src/styles/pagination.ts +6 -9
- package/src/styles/process.ts +14 -28
- package/src/styles/profile-article.ts +16 -15
- package/src/styles/profile-card.ts +21 -47
- package/src/styles/stat-bar.ts +15 -22
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@press2ai/theme-therapy-soft",
|
|
3
|
-
"version": "
|
|
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",
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export const BREAKOUT = `margin-inline: calc(50% - 50vw); padding-inline: var(--pad);`;
|
package/src/styles/base.ts
CHANGED
|
@@ -1,35 +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
|
-
|
|
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
|
-
--
|
|
6
|
-
|
|
7
|
-
--
|
|
8
|
-
--
|
|
9
|
-
--
|
|
10
|
-
--
|
|
11
|
-
--
|
|
12
|
-
--
|
|
13
|
-
|
|
14
|
-
--
|
|
15
|
-
--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;
|
|
16
23
|
--shadow: 0 1px 3px rgba(29,29,70,.06);
|
|
17
24
|
--shadow-md: 0 4px 20px rgba(29,29,70,.08);
|
|
18
25
|
--shadow-up: 0 12px 32px rgba(29,29,70,.12);
|
|
19
26
|
--ease: 200ms cubic-bezier(.4,0,.2,1);
|
|
27
|
+
color-scheme: light;
|
|
20
28
|
}
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
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 --- */
|
|
33
49
|
main { max-width: var(--container); margin-inline: auto; padding-inline: var(--pad); }
|
|
34
|
-
main > * + * { margin-top: var(--
|
|
35
|
-
|
|
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
|
+
}`;
|
|
@@ -1,7 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
}
|
|
4
|
-
|
|
5
|
-
grid-column: 1 / -1; text-align: center; margin-bottom: 0; font-family: var(--font-display);
|
|
6
|
-
}
|
|
7
|
-
@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(--g4); }
|
|
3
|
+
${R} > h2 { grid-column: 1 / -1; text-align: center; }
|
|
4
|
+
@media (max-width: 640px) { ${R} { grid-template-columns: 1fr; } }`;
|
|
@@ -1,9 +1,8 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
}
|
|
4
|
-
main > nav[aria-label] a {
|
|
1
|
+
const R = 'main > nav:has(> a)';
|
|
2
|
+
export const css = `${R} { display: flex; flex-wrap: wrap; gap: var(--g1); justify-content: center; }
|
|
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:
|
|
7
|
-
background: var(--
|
|
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
|
-
|
|
8
|
+
${R} > a:hover { background: var(--accent); color: var(--card); }`;
|
package/src/styles/cta.ts
CHANGED
|
@@ -1,18 +1,14 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
color: rgba(255,255,255,.7); font-size: var(--t-md); max-width: var(--measure);
|
|
11
|
-
margin: 0 auto var(--g5);
|
|
12
|
-
}
|
|
13
|
-
section[aria-label="CTA"] > a {
|
|
1
|
+
import { BREAKOUT } from './_shared.ts';
|
|
2
|
+
const R = 'section[aria-label="CTA"]';
|
|
3
|
+
export const css = `${R} {
|
|
4
|
+
${BREAKOUT} padding-block: var(--g6); text-align: center;
|
|
5
|
+
background: linear-gradient(170deg, var(--navy) 0%, #2a2a5c 100%); color: var(--card);
|
|
6
|
+
}
|
|
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); }
|
|
9
|
+
${R} > a {
|
|
14
10
|
display: inline-flex; align-items: center; height: 56px; padding: 0 var(--g5);
|
|
15
11
|
border-radius: var(--r-btn); background: var(--gold); color: var(--navy);
|
|
16
|
-
font-weight: 600; font-size:
|
|
12
|
+
font-weight: 600; font-size: .9375rem; transition: background var(--ease); text-decoration: none;
|
|
17
13
|
}
|
|
18
|
-
|
|
14
|
+
${R} > a:hover { background: #e5b030; }`;
|
package/src/styles/faq.ts
CHANGED
|
@@ -1,13 +1,14 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
const R = 'main > section:has(> details)';
|
|
2
|
+
export const css = `${R} { max-width: 800px; margin-inline: auto; }
|
|
3
|
+
${R} > h2 { text-align: center; margin-bottom: var(--g5); }
|
|
4
|
+
${R} > details { border-bottom: 1px solid var(--border); }
|
|
5
|
+
${R} > details > summary {
|
|
5
6
|
display: flex; justify-content: space-between; align-items: center;
|
|
6
7
|
padding: var(--g3) 0; cursor: pointer; list-style: none;
|
|
7
|
-
font-size:
|
|
8
|
+
font-size: .9375rem; font-weight: 500; color: var(--fg); transition: color var(--ease);
|
|
8
9
|
}
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
10
|
+
${R} > details > summary::-webkit-details-marker { display: none; }
|
|
11
|
+
${R} > details > summary::after { content: '+'; font-size: 1.5625rem; font-weight: 300; color: var(--accent); }
|
|
12
|
+
${R} > details[open] > summary::after { content: '\\2212'; }
|
|
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
|
-
|
|
3
|
-
|
|
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,67 +1,30 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
color: var(--
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
1
|
+
import { BREAKOUT } from './_shared.ts';
|
|
2
|
+
const R = 'main > hgroup';
|
|
3
|
+
export const css = `${R} {
|
|
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);
|
|
7
|
+
}
|
|
8
|
+
${R} > * { position: relative; max-width: 860px; margin-inline: auto; }
|
|
9
|
+
${R} > p:first-child { display: inline-flex; margin: 0 auto var(--g4); }
|
|
10
|
+
${R} > p:first-child small {
|
|
11
11
|
display: inline-flex; align-items: center; gap: var(--g1);
|
|
12
12
|
background: rgba(255,255,255,.1); backdrop-filter: blur(8px);
|
|
13
13
|
padding: var(--g1) var(--g3); border: 1px solid rgba(255,255,255,.15);
|
|
14
|
-
border-radius:
|
|
15
|
-
letter-spacing: 0.04em;
|
|
16
|
-
}
|
|
17
|
-
hgroup > p:first-child small::before {
|
|
18
|
-
content: ''; width: 6px; height: 6px; border-radius: 50%;
|
|
19
|
-
background: var(--gold); box-shadow: 0 0 0 3px rgba(240,190,55,.3);
|
|
20
|
-
}
|
|
21
|
-
hgroup h1 {
|
|
22
|
-
font-family: var(--font-display); font-weight: 300;
|
|
23
|
-
max-width: 16ch; margin: 0 auto var(--g4); color: var(--white);
|
|
24
|
-
letter-spacing: -0.02em; line-height: 1.1;
|
|
25
|
-
}
|
|
26
|
-
hgroup > p:not(:first-child) {
|
|
27
|
-
font-size: var(--t-md); font-weight: 400; line-height: 1.6;
|
|
28
|
-
color: rgba(255,255,255,.7); max-width: var(--measure);
|
|
29
|
-
margin: 0 auto var(--g5);
|
|
30
|
-
}
|
|
31
|
-
hgroup > nav {
|
|
32
|
-
display: flex; gap: var(--g2); flex-wrap: wrap; justify-content: center;
|
|
33
|
-
margin-top: var(--g4);
|
|
14
|
+
border-radius: var(--pill); font-size: .8125rem; font-weight: 500; color: var(--gold); letter-spacing: .04em;
|
|
34
15
|
}
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
transition: all var(--ease);
|
|
39
|
-
background: rgba(255,255,255,.08); color: var(--white); border: 1px solid rgba(255,255,255,.15);
|
|
40
|
-
}
|
|
41
|
-
hgroup > nav > a:first-child {
|
|
42
|
-
background: var(--gold); color: var(--navy); border-color: transparent;
|
|
43
|
-
font-weight: 600;
|
|
44
|
-
}
|
|
45
|
-
hgroup > nav > a:first-child:hover { background: #e5b030; }
|
|
46
|
-
hgroup > nav > a:not(:first-child):hover { background: rgba(255,255,255,.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); }
|
|
47
19
|
form[role="search"] {
|
|
48
|
-
display: flex; max-width: 520px; height: 56px;
|
|
49
|
-
|
|
50
|
-
border-radius: var(--r-btn); overflow: hidden;
|
|
51
|
-
box-shadow: 0 8px 32px rgba(0,0,0,.2);
|
|
52
|
-
}
|
|
53
|
-
form[role="search"] input {
|
|
54
|
-
flex: 1; min-width: 0; border: none; background: transparent; color: var(--ink);
|
|
55
|
-
padding: 0 var(--g4); font-size: var(--t-sm); font-family: var(--font-sans); outline: none;
|
|
56
|
-
}
|
|
57
|
-
form[role="search"] input::placeholder { color: var(--ink-2); }
|
|
58
|
-
form[role="search"] button {
|
|
59
|
-
flex-shrink: 0; height: 100%; border: none; background: var(--purple); color: var(--white);
|
|
60
|
-
padding: 0 var(--g5); font-size: var(--t-sm); font-weight: 600;
|
|
61
|
-
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);
|
|
62
22
|
}
|
|
63
|
-
form[role="search"]
|
|
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); }
|
|
64
27
|
@media (max-width: 640px) {
|
|
65
|
-
|
|
66
|
-
|
|
28
|
+
${R} { padding-block: var(--g5); }
|
|
29
|
+
form[role="search"] { height: 48px; }
|
|
67
30
|
}`;
|
package/src/styles/pagination.ts
CHANGED
|
@@ -1,11 +1,8 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
}
|
|
5
|
-
main > nav:has(> p) a {
|
|
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: .8125rem; color: var(--fg-muted); }
|
|
3
|
+
${R} a {
|
|
6
4
|
height: 40px; display: inline-flex; align-items: center; padding: 0 var(--g3);
|
|
7
|
-
border-radius: var(--r-btn); background: var(--
|
|
8
|
-
font-size:
|
|
9
|
-
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;
|
|
10
7
|
}
|
|
11
|
-
|
|
8
|
+
${R} a:hover { background: var(--accent); color: var(--card); }`;
|
package/src/styles/process.ts
CHANGED
|
@@ -1,33 +1,19 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
}
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
}
|
|
8
|
-
section[aria-label="Proces"] > p {
|
|
9
|
-
text-align: center; max-width: var(--container); margin: 0 auto var(--g5);
|
|
10
|
-
font-size: var(--t-md); color: var(--ink-2);
|
|
11
|
-
}
|
|
12
|
-
section[aria-label="Proces"] > ol {
|
|
1
|
+
import { BREAKOUT } from './_shared.ts';
|
|
2
|
+
const R = 'main > section:has(> ol)';
|
|
3
|
+
export const css = `${R} { ${BREAKOUT} background: var(--surface); padding-block: var(--g6); }
|
|
4
|
+
${R} > h2 { text-align: center; max-width: var(--container); margin: 0 auto var(--g2); }
|
|
5
|
+
${R} > p { text-align: center; max-width: var(--container); margin: 0 auto var(--g5); font-size: 1.125rem; color: var(--fg-muted); }
|
|
6
|
+
${R} > ol {
|
|
13
7
|
display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
|
14
|
-
gap: var(--g4); max-width: var(--container); margin: 0 auto;
|
|
15
|
-
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;
|
|
16
9
|
}
|
|
17
|
-
|
|
10
|
+
${R} > ol > li {
|
|
18
11
|
counter-increment: step; text-align: center;
|
|
19
|
-
background: var(--
|
|
20
|
-
box-shadow: var(--shadow);
|
|
21
|
-
}
|
|
22
|
-
section[aria-label="Proces"] > ol > li::before {
|
|
23
|
-
content: counter(step, decimal-leading-zero);
|
|
24
|
-
display: block; font-family: var(--font-display); font-size: var(--t-2xl);
|
|
25
|
-
font-weight: 300; color: var(--purple); margin-bottom: var(--g3);
|
|
12
|
+
background: var(--card); border-radius: var(--r-lg); padding: var(--g5) var(--g3); box-shadow: var(--shadow);
|
|
26
13
|
}
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
font-weight:
|
|
14
|
+
${R} > ol > li::before {
|
|
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);
|
|
30
17
|
}
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
}`;
|
|
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; }`;
|
|
@@ -1,17 +1,18 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
1
|
+
const R = 'main > article[itemscope]';
|
|
2
|
+
export const css = `${R} { max-width: 720px; margin-inline: auto; }
|
|
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); }
|
|
14
15
|
@media (max-width: 640px) {
|
|
15
|
-
|
|
16
|
-
|
|
16
|
+
${R} dl { grid-template-columns: 1fr; gap: 2px 0; }
|
|
17
|
+
${R} dt { margin-top: var(--g2); }
|
|
17
18
|
}`;
|
|
@@ -1,47 +1,21 @@
|
|
|
1
|
-
const
|
|
2
|
-
export const css = `${
|
|
3
|
-
background: var(--card); border: 1px solid var(--
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
}
|
|
16
|
-
${
|
|
17
|
-
${
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
}
|
|
21
|
-
${
|
|
22
|
-
${S} h2 a:hover { color: var(--purple); }
|
|
23
|
-
${S} header p { font-size: var(--t-xs); line-height: 1.5; color: var(--ink-2); margin: 0; }
|
|
24
|
-
${S} header p:has([itemprop="address"]) {
|
|
25
|
-
display: inline-flex; align-items: center; gap: 6px; margin-top: 4px;
|
|
26
|
-
}
|
|
27
|
-
${S} header p:has([itemprop="address"])::before {
|
|
28
|
-
content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--purple);
|
|
29
|
-
}
|
|
30
|
-
${S} [itemprop="description"] {
|
|
31
|
-
font-size: var(--t-xs); line-height: 1.6; margin: var(--g2) 0 0; color: var(--ink-2);
|
|
32
|
-
}
|
|
33
|
-
${S} ul {
|
|
34
|
-
list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 4px;
|
|
35
|
-
margin: var(--g2) 0 0;
|
|
36
|
-
}
|
|
37
|
-
${S} ul li {
|
|
38
|
-
background: var(--purple-soft); color: var(--purple-dark);
|
|
39
|
-
padding: 3px var(--g2); border-radius: 999px; font-size: 0.75rem; font-weight: 500;
|
|
40
|
-
}
|
|
41
|
-
${S} > a:last-child {
|
|
42
|
-
display: inline-flex; align-items: center; justify-content: center;
|
|
43
|
-
margin-top: auto; padding-top: var(--g3);
|
|
44
|
-
font-size: var(--t-xs); font-weight: 600; color: var(--purple);
|
|
45
|
-
transition: color var(--ease);
|
|
46
|
-
}
|
|
47
|
-
${S} > a:last-child:hover { color: var(--navy); }`;
|
|
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
|
+
padding: var(--g4); display: flex; flex-direction: column; box-shadow: var(--shadow); transition: all var(--ease);
|
|
5
|
+
}
|
|
6
|
+
${R}:hover { box-shadow: var(--shadow-md); border-color: var(--accent); }
|
|
7
|
+
${R} > div[aria-hidden] {
|
|
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);
|
|
10
|
+
}
|
|
11
|
+
${R} header { margin-bottom: var(--g2); }
|
|
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; }
|
|
16
|
+
${R} header p:has([itemprop="address"]) { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; }
|
|
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); }
|
|
21
|
+
${R} > a:last-child:hover { color: var(--navy); }`;
|
package/src/styles/stat-bar.ts
CHANGED
|
@@ -1,22 +1,15 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
}
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
section[aria-label="Statystyki"] > dl dt {
|
|
17
|
-
font-family: var(--font-display); font-size: var(--t-2xl); font-weight: 300; line-height: 1.1; color: var(--navy);
|
|
18
|
-
}
|
|
19
|
-
section[aria-label="Statystyki"] > dl dd {
|
|
20
|
-
margin: var(--g1) 0 0; font-size: var(--t-xs); color: var(--ink-2); font-weight: 500;
|
|
21
|
-
}
|
|
22
|
-
@media (max-width: 640px) { section[aria-label="Statystyki"] > dl { grid-template-columns: repeat(2, 1fr); } }`;
|
|
1
|
+
import { BREAKOUT } from './_shared.ts';
|
|
2
|
+
const R = 'main > section:has(> dl)';
|
|
3
|
+
export const css = `${R} {
|
|
4
|
+
${BREAKOUT} background: var(--surface); padding-block: var(--g5); border-bottom: 1px solid var(--border);
|
|
5
|
+
}
|
|
6
|
+
${R} > dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--g4); max-width: 800px; margin: 0 auto; }
|
|
7
|
+
${R} > dl div { text-align: center; }
|
|
8
|
+
${R} > dl div > span:has(> svg) {
|
|
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);
|
|
11
|
+
}
|
|
12
|
+
${R} > dl div > span:has(> svg) > svg { width: 22px; height: 22px; }
|
|
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; }
|
|
15
|
+
@media (max-width: 640px) { ${R} > dl { grid-template-columns: repeat(2, 1fr); } }`;
|