@toybreaker/fiko 0.6.0 → 0.6.2
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/omg/3base.css +72 -49
- package/omg/5components.css +186 -141
- package/package.json +1 -1
- package/template/branding/palette.css +15 -12
package/omg/3base.css
CHANGED
|
@@ -2,102 +2,125 @@
|
|
|
2
2
|
/* 3base.css — element defaults */
|
|
3
3
|
|
|
4
4
|
body {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
5
|
+
font-family: var(--font_family);
|
|
6
|
+
font-size: var(--font_size);
|
|
7
|
+
line-height: var(--line_height);
|
|
8
|
+
background: var(--surface);
|
|
9
|
+
color: var(--text);
|
|
10
|
+
text-rendering: optimizeLegibility;
|
|
11
|
+
-webkit-font-smoothing: antialiased;
|
|
12
12
|
}
|
|
13
13
|
|
|
14
14
|
:focus-visible {
|
|
15
|
-
|
|
16
|
-
|
|
15
|
+
outline: 2px solid var(--focus_color, var(--primary));
|
|
16
|
+
outline-offset: 2px;
|
|
17
17
|
}
|
|
18
18
|
|
|
19
19
|
/* minimum tap target for accessibility */
|
|
20
20
|
a {
|
|
21
|
-
|
|
21
|
+
min-height: var(--tap_size);
|
|
22
22
|
}
|
|
23
23
|
|
|
24
24
|
img,
|
|
25
25
|
video {
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
26
|
+
width: 100%;
|
|
27
|
+
height: 100%;
|
|
28
|
+
object-fit: cover;
|
|
29
29
|
}
|
|
30
30
|
|
|
31
31
|
/* ── BODY STRUCTURE ─────────────────────────────── */
|
|
32
32
|
|
|
33
33
|
body {
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
34
|
+
width: 100%;
|
|
35
|
+
margin: 0;
|
|
36
|
+
padding: 0;
|
|
37
|
+
font-weight: var(--weight_light);
|
|
38
38
|
}
|
|
39
39
|
|
|
40
40
|
body > header,
|
|
41
41
|
body > main,
|
|
42
42
|
body > footer {
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
43
|
+
width: 100%;
|
|
44
|
+
margin-inline: auto;
|
|
45
|
+
line-height: var(--line_height);
|
|
46
46
|
}
|
|
47
47
|
|
|
48
48
|
/* ── TYPOGRAPHY ELEMENTS ────────────────────────── */
|
|
49
49
|
|
|
50
|
-
strong {
|
|
50
|
+
strong {
|
|
51
|
+
font-weight: var(--weight_bold);
|
|
52
|
+
}
|
|
51
53
|
|
|
52
54
|
p {
|
|
53
|
-
|
|
54
|
-
|
|
55
|
+
padding-block: var(--spaceV);
|
|
56
|
+
line-height: 1.5;
|
|
55
57
|
}
|
|
56
58
|
|
|
57
|
-
h1,
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
59
|
+
h1,
|
|
60
|
+
h2,
|
|
61
|
+
h3,
|
|
62
|
+
h4,
|
|
63
|
+
h5,
|
|
64
|
+
h6 {
|
|
65
|
+
user-select: none;
|
|
66
|
+
line-height: 1.5;
|
|
67
|
+
font-family: var(--font_family);
|
|
68
|
+
font-weight: var(--weight_light);
|
|
62
69
|
}
|
|
63
70
|
|
|
64
71
|
/* ── HR ─────────────────────────────────────────── */
|
|
65
72
|
|
|
66
73
|
hr {
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
74
|
+
border: 0 none;
|
|
75
|
+
border-top: 0.5px solid currentColor;
|
|
76
|
+
opacity: 0.5;
|
|
70
77
|
}
|
|
71
78
|
|
|
72
79
|
/* ── BLOCKQUOTE ─────────────────────────────────── */
|
|
73
80
|
|
|
74
81
|
blockquote {
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
+
display: block;
|
|
83
|
+
margin: calc(var(--spaceV) * 8) calc(var(--spaceH) * 4);
|
|
84
|
+
padding: var(--spaceV) calc(var(--spaceH) * 4);
|
|
85
|
+
border-left: 4px solid currentColor;
|
|
86
|
+
line-height: 1.2;
|
|
87
|
+
font-size: 120%;
|
|
88
|
+
font-style: italic;
|
|
82
89
|
}
|
|
83
90
|
|
|
84
91
|
cite {
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
92
|
+
display: block;
|
|
93
|
+
padding-top: var(--spaceV);
|
|
94
|
+
font-size: 77%;
|
|
95
|
+
text-transform: capitalize;
|
|
89
96
|
}
|
|
90
97
|
|
|
91
98
|
/* ── LISTS ──────────────────────────────────────── */
|
|
92
99
|
|
|
93
|
-
ol,
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
100
|
+
ol,
|
|
101
|
+
ul {
|
|
102
|
+
list-style: none;
|
|
103
|
+
padding: 0;
|
|
104
|
+
margin: 0;
|
|
97
105
|
}
|
|
98
106
|
|
|
99
107
|
/* ── LANGUAGE SWITCHING ─────────────────────────── */
|
|
100
108
|
|
|
101
|
-
[lang="en"] {
|
|
102
|
-
|
|
103
|
-
|
|
109
|
+
[lang="en"] {
|
|
110
|
+
.lang_it,
|
|
111
|
+
.lang_id {
|
|
112
|
+
display: none;
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
[lang="it"] {
|
|
116
|
+
.lang_en,
|
|
117
|
+
.lang_id {
|
|
118
|
+
display: none;
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
[lang="id"] {
|
|
122
|
+
.lang_it,
|
|
123
|
+
.lang_en {
|
|
124
|
+
display: none;
|
|
125
|
+
}
|
|
126
|
+
}
|
package/omg/5components.css
CHANGED
|
@@ -7,57 +7,57 @@ button,
|
|
|
7
7
|
input[type="button"],
|
|
8
8
|
input[type="reset"],
|
|
9
9
|
[role="button"] {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
10
|
+
height: var(--tap_size);
|
|
11
|
+
padding-inline: var(--spaceH);
|
|
12
|
+
border: var(--borderpx) solid var(--border_color, currentColor);
|
|
13
|
+
border-radius: var(--radius);
|
|
14
|
+
outline: none;
|
|
15
|
+
background-color: transparent;
|
|
16
|
+
color: inherit;
|
|
17
|
+
font-size: var(--font_size);
|
|
18
|
+
font-weight: var(--weight_bold);
|
|
19
|
+
text-align: center;
|
|
20
|
+
cursor: pointer;
|
|
21
|
+
transition:
|
|
22
|
+
background-color var(--transition),
|
|
23
|
+
border-color var(--transition),
|
|
24
|
+
color var(--transition),
|
|
25
|
+
box-shadow var(--transition);
|
|
26
|
+
user-select: none;
|
|
27
27
|
}
|
|
28
28
|
|
|
29
29
|
/* BUTTON CLASS — wraps a <button> inside an <a> */
|
|
30
30
|
.button {
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
31
|
+
border: none;
|
|
32
|
+
border-radius: var(--radius);
|
|
33
|
+
cursor: pointer;
|
|
34
|
+
color: var(--text);
|
|
35
|
+
display: inline-flex;
|
|
36
|
+
font-weight: var(--weight_bold);
|
|
37
|
+
gap: var(--spaceV) var(--spaceH);
|
|
38
|
+
padding: calc(var(--spaceV) / 3) calc(var(--spaceH) / 3);
|
|
39
|
+
transition: transform 0.2s var(--ease_out);
|
|
40
|
+
user-select: none;
|
|
41
41
|
}
|
|
42
42
|
|
|
43
43
|
.button:hover,
|
|
44
44
|
button:hover {
|
|
45
|
-
|
|
45
|
+
transform: translateY(3px);
|
|
46
46
|
}
|
|
47
47
|
|
|
48
48
|
/* LINK defaults */
|
|
49
49
|
a:not(.underline),
|
|
50
50
|
[role="link"] {
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
51
|
+
outline: none;
|
|
52
|
+
background-color: transparent;
|
|
53
|
+
color: var(--text);
|
|
54
|
+
text-decoration: var(--text_decoration);
|
|
55
|
+
transition:
|
|
56
|
+
background-color var(--transition),
|
|
57
|
+
color var(--transition),
|
|
58
|
+
text-decoration var(--transition),
|
|
59
|
+
box-shadow var(--transition);
|
|
60
|
+
user-select: none;
|
|
61
61
|
}
|
|
62
62
|
|
|
63
63
|
/* button inside link — reset decoration, inherit color from context */
|
|
@@ -66,86 +66,111 @@ a [role="button"],
|
|
|
66
66
|
a input[type="submit"],
|
|
67
67
|
a input[type="button"],
|
|
68
68
|
a input[type="reset"] {
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
69
|
+
color: inherit;
|
|
70
|
+
text-decoration: none;
|
|
71
|
+
user-select: none;
|
|
72
72
|
}
|
|
73
73
|
|
|
74
74
|
/* CTA BUTTON — filled, primary action */
|
|
75
75
|
.button_cta button {
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
76
|
+
background-color: var(--cta);
|
|
77
|
+
border-color: var(--cta);
|
|
78
|
+
color: var(--cta_text);
|
|
79
79
|
}
|
|
80
80
|
.button_cta:hover button {
|
|
81
|
-
|
|
82
|
-
|
|
81
|
+
background-color: var(--cta_hover);
|
|
82
|
+
border-color: var(--cta_hover);
|
|
83
83
|
}
|
|
84
84
|
|
|
85
85
|
/* SVG overflow fix */
|
|
86
86
|
svg:not(:root) {
|
|
87
|
-
|
|
87
|
+
overflow: hidden;
|
|
88
88
|
}
|
|
89
89
|
|
|
90
90
|
/* STICKY HEADER */
|
|
91
91
|
.controls {
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
92
|
+
height: var(--sticky_header_height);
|
|
93
|
+
min-height: var(--sticky_header_height);
|
|
94
|
+
max-height: var(--sticky_header_height);
|
|
95
|
+
user-select: none;
|
|
96
96
|
}
|
|
97
97
|
.controls.sticky {
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
98
|
+
position: sticky;
|
|
99
|
+
top: 0;
|
|
100
|
+
z-index: 20;
|
|
101
101
|
}
|
|
102
102
|
|
|
103
103
|
/* ── HEADING SCALE ──────────────────────────────── */
|
|
104
104
|
|
|
105
|
-
.h1,
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
105
|
+
.h1,
|
|
106
|
+
.h2,
|
|
107
|
+
.h3,
|
|
108
|
+
.h4,
|
|
109
|
+
.h5,
|
|
110
|
+
.h6 {
|
|
111
|
+
user-select: none !important;
|
|
112
|
+
line-height: 1.2 !important;
|
|
113
|
+
font-family: var(--font_family) !important;
|
|
114
|
+
}
|
|
115
|
+
.h1 {
|
|
116
|
+
font-size: calc(var(--font_size) * 2.5) !important;
|
|
117
|
+
font-weight: var(--weight_light) !important;
|
|
118
|
+
}
|
|
119
|
+
.h2 {
|
|
120
|
+
font-size: calc(var(--font_size) * 2) !important;
|
|
121
|
+
font-weight: var(--weight_light) !important;
|
|
122
|
+
}
|
|
123
|
+
.h3 {
|
|
124
|
+
font-size: calc(var(--font_size) * 1.75) !important;
|
|
125
|
+
font-weight: var(--weight_thin) !important;
|
|
126
|
+
}
|
|
127
|
+
.h4 {
|
|
128
|
+
font-size: calc(var(--font_size) * 1.5) !important;
|
|
129
|
+
font-weight: var(--weight_thin) !important;
|
|
130
|
+
}
|
|
131
|
+
.h5 {
|
|
132
|
+
font-size: calc(var(--font_size) * 1.25) !important;
|
|
133
|
+
font-weight: var(--weight_thin) !important;
|
|
134
|
+
}
|
|
135
|
+
.h6 {
|
|
136
|
+
font-size: calc(var(--font_size) * 1) !important;
|
|
137
|
+
font-weight: var(--weight_light) !important;
|
|
109
138
|
}
|
|
110
|
-
.h1 { font-size: calc(var(--font_size) * 2.5) !important; font-weight: var(--weight_light) !important; }
|
|
111
|
-
.h2 { font-size: calc(var(--font_size) * 2.0) !important; font-weight: var(--weight_light) !important; }
|
|
112
|
-
.h3 { font-size: calc(var(--font_size) * 1.75) !important; font-weight: var(--weight_thin) !important; }
|
|
113
|
-
.h4 { font-size: calc(var(--font_size) * 1.5) !important; font-weight: var(--weight_thin) !important; }
|
|
114
|
-
.h5 { font-size: calc(var(--font_size) * 1.25) !important; font-weight: var(--weight_thin) !important; }
|
|
115
|
-
.h6 { font-size: calc(var(--font_size) * 1.0) !important; font-weight: var(--weight_light) !important; }
|
|
116
139
|
|
|
117
140
|
/* ── TEXT UTILITIES ─────────────────────────────── */
|
|
118
141
|
|
|
119
142
|
.dim {
|
|
120
|
-
|
|
121
|
-
|
|
143
|
+
color: var(--text);
|
|
144
|
+
font-size: calc(var(--font_size) * 0.95);
|
|
122
145
|
}
|
|
123
146
|
|
|
124
147
|
.underline {
|
|
125
|
-
|
|
126
|
-
|
|
148
|
+
text-decoration: underline;
|
|
149
|
+
text-underline-offset: 3px;
|
|
127
150
|
}
|
|
128
151
|
|
|
129
152
|
.prose {
|
|
130
|
-
|
|
131
|
-
|
|
153
|
+
max-width: 66ch;
|
|
154
|
+
margin-inline: auto;
|
|
132
155
|
}
|
|
133
156
|
|
|
134
157
|
.typewriter {
|
|
135
|
-
|
|
158
|
+
font-family: var(--font_serif);
|
|
136
159
|
}
|
|
137
160
|
|
|
138
|
-
.cat {
|
|
161
|
+
.cat {
|
|
162
|
+
text-transform: capitalize;
|
|
163
|
+
}
|
|
139
164
|
|
|
140
165
|
/* ── LAYOUT UTILITIES ───────────────────────────── */
|
|
141
166
|
|
|
142
167
|
.maximise {
|
|
143
|
-
|
|
144
|
-
|
|
168
|
+
margin-left: var(--maximise);
|
|
169
|
+
margin-right: var(--maximise);
|
|
145
170
|
}
|
|
146
171
|
|
|
147
172
|
.clipped_circle {
|
|
148
|
-
|
|
173
|
+
clip-path: circle(50px at center);
|
|
149
174
|
}
|
|
150
175
|
|
|
151
176
|
/* ── ACCORDION ──────────────────────────────────── */
|
|
@@ -155,109 +180,129 @@ svg:not(:root) {
|
|
|
155
180
|
*/
|
|
156
181
|
|
|
157
182
|
details.accordion {
|
|
158
|
-
|
|
159
|
-
border-radius: var(--radius);
|
|
160
|
-
overflow: hidden;
|
|
161
|
-
}
|
|
162
|
-
|
|
163
|
-
details.accordion + details.accordion {
|
|
164
|
-
margin-top: calc(var(--spaceV) * 0.5);
|
|
183
|
+
border-bottom: var(--borderpx) solid var(--border_color);
|
|
165
184
|
}
|
|
166
185
|
|
|
167
186
|
details.accordion > summary {
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
transition: background-color var(--transition);
|
|
187
|
+
display: flex;
|
|
188
|
+
flex-direction: row;
|
|
189
|
+
align-items: center;
|
|
190
|
+
padding: var(--spaceV) var(--spaceH);
|
|
191
|
+
cursor: pointer;
|
|
192
|
+
list-style: none;
|
|
193
|
+
font-weight: var(--weight_regular);
|
|
194
|
+
user-select: none;
|
|
195
|
+
min-height: unset;
|
|
196
|
+
transition: background-color var(--transition);
|
|
179
197
|
}
|
|
180
198
|
|
|
181
|
-
details.accordion > summary::-webkit-details-marker {
|
|
199
|
+
details.accordion > summary::-webkit-details-marker {
|
|
200
|
+
display: none;
|
|
201
|
+
}
|
|
182
202
|
|
|
183
203
|
/* link inside summary — fills flex row, centers text, inherits color */
|
|
184
204
|
details.accordion > summary a {
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
205
|
+
flex: 1;
|
|
206
|
+
display: flex;
|
|
207
|
+
align-items: center;
|
|
208
|
+
color: inherit;
|
|
209
|
+
text-decoration: none;
|
|
190
210
|
}
|
|
191
211
|
|
|
212
|
+
/* chevron — down arrow in currentColor, rotates 180° when open */
|
|
192
213
|
details.accordion > summary::after {
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
214
|
+
content: "";
|
|
215
|
+
display: block;
|
|
216
|
+
width: 1.25em;
|
|
217
|
+
height: 1.25em;
|
|
218
|
+
flex-shrink: 0;
|
|
219
|
+
background-color: currentColor;
|
|
220
|
+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9L12 15L18 9'/%3E%3C/svg%3E");
|
|
221
|
+
-webkit-mask-size: contain;
|
|
222
|
+
-webkit-mask-repeat: no-repeat;
|
|
223
|
+
-webkit-mask-position: center;
|
|
224
|
+
mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9L12 15L18 9'/%3E%3C/svg%3E");
|
|
225
|
+
mask-size: contain;
|
|
226
|
+
mask-repeat: no-repeat;
|
|
227
|
+
mask-position: center;
|
|
228
|
+
transform: rotate(0deg);
|
|
229
|
+
transition: transform var(--transition);
|
|
230
|
+
order: 2;
|
|
231
|
+
margin-left: auto;
|
|
204
232
|
}
|
|
205
233
|
|
|
206
234
|
details.accordion[open] > summary::after {
|
|
207
|
-
|
|
235
|
+
transform: rotate(180deg);
|
|
208
236
|
}
|
|
209
237
|
|
|
210
238
|
details.accordion > summary:hover {
|
|
211
|
-
|
|
239
|
+
background: color-mix(in oklch, currentColor, transparent 94%);
|
|
212
240
|
}
|
|
213
241
|
|
|
214
242
|
details.accordion > :not(summary) {
|
|
215
|
-
|
|
243
|
+
padding: var(--spaceV) var(--spaceH);
|
|
244
|
+
}
|
|
245
|
+
|
|
246
|
+
/* ── ACCORDION DOTTED — dot-leader modifier ─────── */
|
|
247
|
+
/* Usage: <details class="accordion dotted">
|
|
248
|
+
* Adds a dotted leader between the label and the chevron.
|
|
249
|
+
*/
|
|
250
|
+
|
|
251
|
+
details.accordion.dotted > summary::before {
|
|
252
|
+
content: "";
|
|
253
|
+
flex: 1;
|
|
254
|
+
border-bottom: var(--borderpx) dotted currentColor;
|
|
255
|
+
margin-inline: 0.5rem;
|
|
256
|
+
align-self: center;
|
|
257
|
+
opacity: 0.3;
|
|
258
|
+
order: 1;
|
|
216
259
|
}
|
|
217
260
|
|
|
218
261
|
/* ── ACCORDION CHEVRON — SVG arrow marker ────────── */
|
|
219
262
|
/* Modifier: <details class="accordion accordion_chevron">
|
|
220
|
-
*
|
|
263
|
+
* Overrides default down-chevron with a right-pointing SVG arrow.
|
|
221
264
|
* Closed: → pointing right. Open: rotated 90° pointing down.
|
|
222
265
|
* Composable: stack with other modifiers for full editorial style.
|
|
223
|
-
* Color
|
|
266
|
+
* Color: currentColor by default; override with CSS custom property.
|
|
224
267
|
*/
|
|
225
268
|
|
|
226
269
|
details.accordion.accordion_chevron > summary::after,
|
|
227
270
|
details.accordion.accordion_chevron[open] > summary::after {
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
271
|
+
content: "";
|
|
272
|
+
display: block;
|
|
273
|
+
width: 1.25em;
|
|
274
|
+
height: 1.25em;
|
|
275
|
+
flex-shrink: 0;
|
|
276
|
+
background-color: currentColor;
|
|
277
|
+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 6L15 12L9 18'/%3E%3C/svg%3E");
|
|
278
|
+
-webkit-mask-size: contain;
|
|
279
|
+
-webkit-mask-repeat: no-repeat;
|
|
280
|
+
-webkit-mask-position: center;
|
|
281
|
+
mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 6L15 12L9 18'/%3E%3C/svg%3E");
|
|
282
|
+
mask-size: contain;
|
|
283
|
+
mask-repeat: no-repeat;
|
|
284
|
+
mask-position: center;
|
|
285
|
+
transform: rotate(0deg);
|
|
286
|
+
transition:
|
|
287
|
+
transform 200ms ease,
|
|
288
|
+
background-color var(--transition);
|
|
289
|
+
line-height: 1;
|
|
290
|
+
font-size: 1em;
|
|
246
291
|
}
|
|
247
292
|
|
|
248
293
|
details.accordion.accordion_chevron[open] > summary::after {
|
|
249
|
-
|
|
294
|
+
transform: rotate(90deg);
|
|
250
295
|
}
|
|
251
296
|
|
|
252
297
|
/* ── DOT LEADER ─────────────────────────────────── */
|
|
253
298
|
/* Usage: <span class="dots"> between label and value in menus/TOC */
|
|
254
299
|
|
|
255
300
|
.dots {
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
301
|
+
flex: 8;
|
|
302
|
+
border-bottom: var(--borderpx) dotted currentColor;
|
|
303
|
+
margin: 0 0 0 8px;
|
|
304
|
+
height: var(--borderpx);
|
|
305
|
+
position: relative;
|
|
306
|
+
top: 0;
|
|
307
|
+
opacity: 0.25;
|
|
263
308
|
}
|
package/package.json
CHANGED
|
@@ -11,25 +11,28 @@
|
|
|
11
11
|
*/
|
|
12
12
|
|
|
13
13
|
:root {
|
|
14
|
-
|
|
15
|
-
|
|
14
|
+
/* ── LIGHT OVERRIDE (optional) ──────────────────── */
|
|
15
|
+
/* Uncomment and set if your brand uses a tinted surface instead of neutral white:
|
|
16
16
|
* --light: oklch(0.84 0.028 74); ← warm sand example
|
|
17
17
|
*/
|
|
18
18
|
|
|
19
|
-
|
|
20
|
-
|
|
19
|
+
/* ── BRAND COLOR ────────────────────────────────── */
|
|
20
|
+
/* Change the hue (0–360) to match your brand.
|
|
21
21
|
* red oklch(0.55 0.22 20) · orange oklch(0.55 0.19 40)
|
|
22
22
|
* green oklch(0.45 0.18 145) · blue oklch(0.50 0.20 250)
|
|
23
23
|
*/
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
24
|
+
--brand: oklch(0.55 0.19 28); /* ← change me */
|
|
25
|
+
--brand_lighter: oklch(from var(--brand) calc(l + 0.08) c h);
|
|
26
|
+
--brand_darker: oklch(from var(--brand) calc(l - 0.18) c h);
|
|
27
|
+
--brand_invert: oklch(
|
|
28
|
+
from var(--brand) l c calc(h + 180)
|
|
29
|
+
); /* complementary — auto-updates with --brand */
|
|
30
|
+
--brandT75: color-mix(in oklch, var(--brand), transparent 75%);
|
|
31
|
+
--brandT50: color-mix(in oklch, var(--brand), transparent 50%);
|
|
32
|
+
--brandT25: color-mix(in oklch, var(--brand), transparent 25%);
|
|
30
33
|
|
|
31
|
-
|
|
32
|
-
|
|
34
|
+
/* ── PAGE SURFACES ──────────────────────────────── */
|
|
35
|
+
/* Add named surfaces for sections, e.g.:
|
|
33
36
|
* --surface_hero: oklch(0.92 0.02 28);
|
|
34
37
|
*/
|
|
35
38
|
}
|