@toybreaker/fiko 0.6.1 → 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 +175 -146
- 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,65 +180,67 @@ svg:not(:root) {
|
|
|
155
180
|
*/
|
|
156
181
|
|
|
157
182
|
details.accordion {
|
|
158
|
-
|
|
183
|
+
border-bottom: var(--borderpx) solid var(--border_color);
|
|
159
184
|
}
|
|
160
185
|
|
|
161
186
|
details.accordion > summary {
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
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);
|
|
172
197
|
}
|
|
173
198
|
|
|
174
|
-
details.accordion > summary::-webkit-details-marker {
|
|
199
|
+
details.accordion > summary::-webkit-details-marker {
|
|
200
|
+
display: none;
|
|
201
|
+
}
|
|
175
202
|
|
|
176
203
|
/* link inside summary — fills flex row, centers text, inherits color */
|
|
177
204
|
details.accordion > summary a {
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
205
|
+
flex: 1;
|
|
206
|
+
display: flex;
|
|
207
|
+
align-items: center;
|
|
208
|
+
color: inherit;
|
|
209
|
+
text-decoration: none;
|
|
183
210
|
}
|
|
184
211
|
|
|
185
212
|
/* chevron — down arrow in currentColor, rotates 180° when open */
|
|
186
213
|
details.accordion > summary::after {
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
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;
|
|
205
232
|
}
|
|
206
233
|
|
|
207
234
|
details.accordion[open] > summary::after {
|
|
208
|
-
|
|
235
|
+
transform: rotate(180deg);
|
|
209
236
|
}
|
|
210
237
|
|
|
211
238
|
details.accordion > summary:hover {
|
|
212
|
-
|
|
239
|
+
background: color-mix(in oklch, currentColor, transparent 94%);
|
|
213
240
|
}
|
|
214
241
|
|
|
215
242
|
details.accordion > :not(summary) {
|
|
216
|
-
|
|
243
|
+
padding: var(--spaceV) var(--spaceH);
|
|
217
244
|
}
|
|
218
245
|
|
|
219
246
|
/* ── ACCORDION DOTTED — dot-leader modifier ─────── */
|
|
@@ -222,13 +249,13 @@ details.accordion > :not(summary) {
|
|
|
222
249
|
*/
|
|
223
250
|
|
|
224
251
|
details.accordion.dotted > summary::before {
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
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;
|
|
232
259
|
}
|
|
233
260
|
|
|
234
261
|
/* ── ACCORDION CHEVRON — SVG arrow marker ────────── */
|
|
@@ -241,39 +268,41 @@ details.accordion.dotted > summary::before {
|
|
|
241
268
|
|
|
242
269
|
details.accordion.accordion_chevron > summary::after,
|
|
243
270
|
details.accordion.accordion_chevron[open] > summary::after {
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
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;
|
|
262
291
|
}
|
|
263
292
|
|
|
264
293
|
details.accordion.accordion_chevron[open] > summary::after {
|
|
265
|
-
|
|
294
|
+
transform: rotate(90deg);
|
|
266
295
|
}
|
|
267
296
|
|
|
268
297
|
/* ── DOT LEADER ─────────────────────────────────── */
|
|
269
298
|
/* Usage: <span class="dots"> between label and value in menus/TOC */
|
|
270
299
|
|
|
271
300
|
.dots {
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
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;
|
|
279
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
|
}
|