astralkit 0.3.0 → 0.3.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.
Files changed (24) hide show
  1. package/CHANGELOG.md +44 -0
  2. package/LICENSE +34 -34
  3. package/README.md +71 -58
  4. package/astralkit-theme-v4.css +618 -612
  5. package/astralkit-theme.css +618 -610
  6. package/astralkit-utilities.css +543 -543
  7. package/lib/utils.js +28 -28
  8. package/package.json +53 -45
  9. package/palettes.css +299 -299
  10. package/primitives/accounts.css +435 -435
  11. package/primitives/animations.css +136 -136
  12. package/primitives/avatar.css +410 -410
  13. package/primitives/badges.css +231 -231
  14. package/primitives/effects.css +388 -388
  15. package/primitives/focus.css +25 -25
  16. package/primitives/forms.css +2155 -2155
  17. package/primitives/icons.css +90 -90
  18. package/primitives/layout.css +217 -217
  19. package/primitives/mobile.css +557 -557
  20. package/primitives/navigation.css +1057 -1057
  21. package/primitives/sidebar.css +1819 -1819
  22. package/primitives/typography.css +324 -324
  23. package/tailwind.cjs +416 -416
  24. package/tailwind.js +491 -491
package/primitives/typography.css CHANGED
@@ -1,324 +1,324 @@
1
-
2
-
3
- /* Typography primitives -- heading, body, caption, UI chrome text presets */
4
-
5
-
6
-
7
- /* -- Numeric typography --
8
- Tabular figures for aligned numbers in tables, stats, dashboards. */
9
- .ak-tabular-nums {
10
- font-variant-numeric: tabular-nums;
11
- }
12
-
13
- /* -- Heading Presets --
14
- Composite heading styles. Usage: <h1 class="ak-h1"> */
15
- .ak-h1 {
16
- text-rendering: optimizeLegibility;
17
- font-size: var(--text-ak-5xl);
18
- line-height: var(--leading-ak-tight);
19
- letter-spacing: var(--tracking-ak-tighter);
20
- font-weight: 700;
21
- color: var(--color-ak-text);
22
- }
23
- .ak-h2 {
24
- text-rendering: optimizeLegibility;
25
- font-size: var(--text-ak-4xl);
26
- line-height: var(--leading-ak-tight);
27
- letter-spacing: var(--tracking-ak-tight);
28
- font-weight: 700;
29
- color: var(--color-ak-text);
30
- }
31
- .ak-h3 {
32
- text-rendering: optimizeLegibility;
33
- font-size: var(--text-ak-3xl);
34
- line-height: var(--leading-ak-snug);
35
- letter-spacing: var(--tracking-ak-tight);
36
- font-weight: 600;
37
- color: var(--color-ak-text);
38
- }
39
- .ak-h4 {
40
- text-rendering: optimizeLegibility;
41
- font-size: var(--text-ak-2xl);
42
- line-height: var(--leading-ak-snug);
43
- letter-spacing: var(--tracking-ak-normal);
44
- font-weight: 600;
45
- color: var(--color-ak-text);
46
- }
47
- .ak-h5 {
48
- text-rendering: optimizeLegibility;
49
- font-size: var(--text-ak-xl);
50
- line-height: var(--leading-ak-snug);
51
- letter-spacing: var(--tracking-ak-normal);
52
- font-weight: 600;
53
- color: var(--color-ak-text);
54
- }
55
- .ak-h6 {
56
- text-rendering: optimizeLegibility;
57
- font-size: var(--text-ak-lg);
58
- line-height: var(--leading-ak-snug);
59
- letter-spacing: var(--tracking-ak-normal);
60
- font-weight: 600;
61
- color: var(--color-ak-text);
62
- }
63
-
64
- /* -- Body / Caption Presets -- */
65
- .ak-body {
66
- font-size: var(--text-ak-base);
67
- line-height: var(--leading-ak-relaxed);
68
- color: var(--color-ak-text);
69
- }
70
- .ak-body-secondary {
71
- font-size: var(--text-ak-base);
72
- line-height: var(--leading-ak-relaxed);
73
- color: var(--color-ak-text-secondary);
74
- }
75
- .ak-small {
76
- font-size: var(--text-ak-sm);
77
- line-height: var(--leading-ak-normal);
78
- color: var(--color-ak-text-secondary);
79
- }
80
- .ak-caption {
81
- font-size: var(--text-ak-xs);
82
- line-height: var(--leading-ak-normal);
83
- color: var(--color-ak-text-secondary);
84
- }
85
- .ak-label {
86
- font-size: var(--text-ak-xs);
87
- line-height: var(--leading-ak-normal);
88
- font-weight: 600;
89
- letter-spacing: var(--tracking-ak-wider);
90
- text-transform: uppercase;
91
- color: var(--color-ak-text-secondary);
92
- }
93
-
94
- /* -- Sized Label Scale --
95
- All uppercase with wide tracking. Use for section labels,
96
- table headers, badge text, form group titles at various sizes. */
97
-
98
- /* Structural labels — higher weight, for nav section dividers
99
- and other labels that MUST announce hierarchy boundaries.
100
- Use when label sits ABOVE items that would otherwise outweigh it. */
101
- .ak-label-structural {
102
- font-size: var(--text-ak-xs);
103
- line-height: var(--leading-ak-snug);
104
- font-weight: 700;
105
- letter-spacing: normal;
106
- text-transform: uppercase;
107
- color: var(--color-ak-text-secondary);
108
- }
109
- .ak-label-xs {
110
- font-size: var(--text-ak-xs);
111
- line-height: var(--leading-ak-snug);
112
- font-weight: 600;
113
- letter-spacing: var(--tracking-ak-widest);
114
- text-transform: uppercase;
115
- color: var(--color-ak-text-secondary);
116
- }
117
- .ak-label-sm {
118
- font-size: var(--text-ak-xs);
119
- line-height: var(--leading-ak-normal);
120
- font-weight: 600;
121
- letter-spacing: var(--tracking-ak-wider);
122
- text-transform: uppercase;
123
- color: var(--color-ak-text-secondary);
124
- }
125
- .ak-label-md {
126
- font-size: var(--text-ak-sm);
127
- line-height: var(--leading-ak-snug);
128
- font-weight: 600;
129
- letter-spacing: var(--tracking-ak-wider);
130
- text-transform: uppercase;
131
- color: var(--color-ak-text-secondary);
132
- }
133
- .ak-label-lg {
134
- font-size: var(--text-ak-base);
135
- line-height: var(--leading-ak-snug);
136
- font-weight: 600;
137
- letter-spacing: var(--tracking-ak-wider);
138
- text-transform: uppercase;
139
- color: var(--color-ak-text-secondary);
140
- }
141
- .ak-label-xl {
142
- font-size: var(--text-ak-lg);
143
- line-height: var(--leading-ak-snug);
144
- font-weight: 600;
145
- letter-spacing: var(--tracking-ak-wider);
146
- text-transform: uppercase;
147
- color: var(--color-ak-text-secondary);
148
- }
149
- .ak-label-2xl {
150
- font-size: var(--text-ak-xl);
151
- line-height: var(--leading-ak-snug);
152
- font-weight: 600;
153
- letter-spacing: var(--tracking-ak-section);
154
- text-transform: uppercase;
155
- color: var(--color-ak-text-secondary);
156
- }
157
-
158
- /* -- UI Chrome Typography Presets --
159
- For shell, nav, panels, forms -- NOT document content. */
160
- .ak-overline {
161
- font-size: var(--text-ak-xs);
162
- font-weight: 600;
163
- line-height: 1;
164
- letter-spacing: 0.08em;
165
- text-transform: uppercase;
166
- color: var(--color-ak-text-secondary);
167
- }
168
- .ak-form-label {
169
- font-size: var(--text-ak-base);
170
- font-weight: 600;
171
- line-height: 1.25;
172
- color: var(--color-ak-text);
173
- }
174
- .ak-helper {
175
- font-size: var(--text-ak-sm);
176
- font-weight: 400;
177
- line-height: 1.429;
178
- color: var(--color-ak-text-secondary);
179
- }
180
- .ak-ui-body {
181
- font-size: var(--text-ak-base);
182
- font-weight: 500;
183
- line-height: 1.5;
184
- color: var(--color-ak-text-secondary);
185
- }
186
- .ak-nav-label-text {
187
- font-size: var(--text-ak-base);
188
- font-weight: 600;
189
- line-height: 1;
190
- color: var(--color-ak-text);
191
- }
192
- .ak-card-title {
193
- font-size: var(--text-ak-lg);
194
- font-weight: 600;
195
- line-height: 1.333;
196
- letter-spacing: -0.01em;
197
- color: var(--color-ak-text);
198
- }
199
- .ak-panel-title {
200
- font-size: var(--text-ak-xl);
201
- font-weight: 600;
202
- line-height: 1.4;
203
- letter-spacing: -0.01em;
204
- color: var(--color-ak-text);
205
- }
206
- .ak-page-title {
207
- font-size: var(--text-ak-2xl);
208
- font-weight: 600;
209
- line-height: 1.333;
210
- letter-spacing: -0.015em;
211
- color: var(--color-ak-text);
212
- }
213
- .ak-avatar-text {
214
- font-size: var(--text-ak-base);
215
- font-weight: 700;
216
- line-height: 1;
217
- letter-spacing: var(--tracking-ak-normal);
218
- }
219
-
220
- /* -- Interactive Control Text Presets --
221
- For buttons, inputs, labels inside controls (checkbox, radio, switch).
222
- These are the canonical control text sizes per the AstralKit typography rules. */
223
- .ak-input-text {
224
- font-size: var(--text-ak-base);
225
- font-weight: 400;
226
- line-height: 1.5;
227
- color: var(--color-ak-text);
228
- }
229
- .ak-button-text-sm {
230
- font-size: var(--text-ak-sm);
231
- font-weight: 600;
232
- line-height: 1.143;
233
- letter-spacing: 0;
234
- }
235
- .ak-button-text-md {
236
- font-size: var(--text-ak-base);
237
- font-weight: 600;
238
- line-height: 1.5;
239
- letter-spacing: 0;
240
- }
241
- .ak-button-text-lg {
242
- font-size: var(--text-ak-lg);
243
- font-weight: 600;
244
- line-height: 1.333;
245
- letter-spacing: -0.005em;
246
- }
247
- .ak-label-control {
248
- font-size: var(--text-ak-base);
249
- font-weight: 400;
250
- line-height: 1.5;
251
- color: var(--color-ak-text);
252
- }
253
-
254
- /* -- Dashboard KPI Presets --
255
- For hero stat numbers on dashboards and analytics. */
256
- .ak-kpi {
257
- font-size: var(--text-ak-fl-5xl);
258
- font-weight: 700;
259
- line-height: var(--leading-ak-tight);
260
- letter-spacing: var(--tracking-ak-tighter);
261
- font-variant-numeric: tabular-nums;
262
- color: var(--color-ak-text);
263
- }
264
- .ak-kpi-sm {
265
- font-size: var(--text-ak-fl-3xl);
266
- font-weight: 700;
267
- line-height: var(--leading-ak-tight);
268
- letter-spacing: var(--tracking-ak-tight);
269
- font-variant-numeric: tabular-nums;
270
- color: var(--color-ak-text);
271
- }
272
-
273
- /* -- Display Presets --
274
- For hero marketing headings. Uses fluid display tokens
275
- for dramatic viewport scaling. Very tight line height. */
276
- .ak-display-sm {
277
- font-size: var(--text-ak-display-3xl);
278
- line-height: var(--leading-ak-tighter);
279
- letter-spacing: -0.03em;
280
- font-weight: 700;
281
- text-rendering: optimizeLegibility;
282
- color: var(--color-ak-text);
283
- }
284
- .ak-display-md {
285
- font-size: var(--text-ak-display-5xl);
286
- line-height: var(--leading-ak-tighter);
287
- letter-spacing: -0.04em;
288
- font-weight: 700;
289
- text-rendering: optimizeLegibility;
290
- color: var(--color-ak-text);
291
- }
292
- .ak-display-lg {
293
- font-size: var(--text-ak-display-7xl);
294
- line-height: var(--leading-ak-none);
295
- letter-spacing: -0.05em;
296
- font-weight: 700;
297
- text-rendering: optimizeLegibility;
298
- color: var(--color-ak-text);
299
- }
300
-
301
- /* Panel section headings — add letter-spacing, keep original font-size */
302
- [data-ak-panel] h3.text-ak-base.font-bold {
303
- letter-spacing: var(--tracking-ak-section);
304
- }
305
- .ak-logo-text {
306
- font-size: var(--size-ak-icon-lg);
307
- font-weight: 700;
308
- line-height: 1;
309
- }
310
-
311
- /* Screen reader only */
312
- .ak-sr-only {
313
- position: absolute;
314
- width: 1px;
315
- height: 1px;
316
- padding: 0;
317
- margin: -1px;
318
- overflow: hidden;
319
- clip: rect(0, 0, 0, 0);
320
- white-space: nowrap;
321
- border-width: 0;
322
- }
323
-
324
-
1
+
2
+
3
+ /* Typography primitives -- heading, body, caption, UI chrome text presets */
4
+
5
+
6
+
7
+ /* -- Numeric typography --
8
+ Tabular figures for aligned numbers in tables, stats, dashboards. */
9
+ .ak-tabular-nums {
10
+ font-variant-numeric: tabular-nums;
11
+ }
12
+
13
+ /* -- Heading Presets --
14
+ Composite heading styles. Usage: <h1 class="ak-h1"> */
15
+ .ak-h1 {
16
+ text-rendering: optimizeLegibility;
17
+ font-size: var(--text-ak-5xl);
18
+ line-height: var(--leading-ak-tight);
19
+ letter-spacing: var(--tracking-ak-tighter);
20
+ font-weight: 700;
21
+ color: var(--color-ak-text);
22
+ }
23
+ .ak-h2 {
24
+ text-rendering: optimizeLegibility;
25
+ font-size: var(--text-ak-4xl);
26
+ line-height: var(--leading-ak-tight);
27
+ letter-spacing: var(--tracking-ak-tight);
28
+ font-weight: 700;
29
+ color: var(--color-ak-text);
30
+ }
31
+ .ak-h3 {
32
+ text-rendering: optimizeLegibility;
33
+ font-size: var(--text-ak-3xl);
34
+ line-height: var(--leading-ak-snug);
35
+ letter-spacing: var(--tracking-ak-tight);
36
+ font-weight: 600;
37
+ color: var(--color-ak-text);
38
+ }
39
+ .ak-h4 {
40
+ text-rendering: optimizeLegibility;
41
+ font-size: var(--text-ak-2xl);
42
+ line-height: var(--leading-ak-snug);
43
+ letter-spacing: var(--tracking-ak-normal);
44
+ font-weight: 600;
45
+ color: var(--color-ak-text);
46
+ }
47
+ .ak-h5 {
48
+ text-rendering: optimizeLegibility;
49
+ font-size: var(--text-ak-xl);
50
+ line-height: var(--leading-ak-snug);
51
+ letter-spacing: var(--tracking-ak-normal);
52
+ font-weight: 600;
53
+ color: var(--color-ak-text);
54
+ }
55
+ .ak-h6 {
56
+ text-rendering: optimizeLegibility;
57
+ font-size: var(--text-ak-lg);
58
+ line-height: var(--leading-ak-snug);
59
+ letter-spacing: var(--tracking-ak-normal);
60
+ font-weight: 600;
61
+ color: var(--color-ak-text);
62
+ }
63
+
64
+ /* -- Body / Caption Presets -- */
65
+ .ak-body {
66
+ font-size: var(--text-ak-base);
67
+ line-height: var(--leading-ak-relaxed);
68
+ color: var(--color-ak-text);
69
+ }
70
+ .ak-body-secondary {
71
+ font-size: var(--text-ak-base);
72
+ line-height: var(--leading-ak-relaxed);
73
+ color: var(--color-ak-text-secondary);
74
+ }
75
+ .ak-small {
76
+ font-size: var(--text-ak-sm);
77
+ line-height: var(--leading-ak-normal);
78
+ color: var(--color-ak-text-secondary);
79
+ }
80
+ .ak-caption {
81
+ font-size: var(--text-ak-xs);
82
+ line-height: var(--leading-ak-normal);
83
+ color: var(--color-ak-text-secondary);
84
+ }
85
+ .ak-label {
86
+ font-size: var(--text-ak-xs);
87
+ line-height: var(--leading-ak-normal);
88
+ font-weight: 600;
89
+ letter-spacing: var(--tracking-ak-wider);
90
+ text-transform: uppercase;
91
+ color: var(--color-ak-text-secondary);
92
+ }
93
+
94
+ /* -- Sized Label Scale --
95
+ All uppercase with wide tracking. Use for section labels,
96
+ table headers, badge text, form group titles at various sizes. */
97
+
98
+ /* Structural labels — higher weight, for nav section dividers
99
+ and other labels that MUST announce hierarchy boundaries.
100
+ Use when label sits ABOVE items that would otherwise outweigh it. */
101
+ .ak-label-structural {
102
+ font-size: var(--text-ak-xs);
103
+ line-height: var(--leading-ak-snug);
104
+ font-weight: 700;
105
+ letter-spacing: normal;
106
+ text-transform: uppercase;
107
+ color: var(--color-ak-text-secondary);
108
+ }
109
+ .ak-label-xs {
110
+ font-size: var(--text-ak-xs);
111
+ line-height: var(--leading-ak-snug);
112
+ font-weight: 600;
113
+ letter-spacing: var(--tracking-ak-widest);
114
+ text-transform: uppercase;
115
+ color: var(--color-ak-text-secondary);
116
+ }
117
+ .ak-label-sm {
118
+ font-size: var(--text-ak-xs);
119
+ line-height: var(--leading-ak-normal);
120
+ font-weight: 600;
121
+ letter-spacing: var(--tracking-ak-wider);
122
+ text-transform: uppercase;
123
+ color: var(--color-ak-text-secondary);
124
+ }
125
+ .ak-label-md {
126
+ font-size: var(--text-ak-sm);
127
+ line-height: var(--leading-ak-snug);
128
+ font-weight: 600;
129
+ letter-spacing: var(--tracking-ak-wider);
130
+ text-transform: uppercase;
131
+ color: var(--color-ak-text-secondary);
132
+ }
133
+ .ak-label-lg {
134
+ font-size: var(--text-ak-base);
135
+ line-height: var(--leading-ak-snug);
136
+ font-weight: 600;
137
+ letter-spacing: var(--tracking-ak-wider);
138
+ text-transform: uppercase;
139
+ color: var(--color-ak-text-secondary);
140
+ }
141
+ .ak-label-xl {
142
+ font-size: var(--text-ak-lg);
143
+ line-height: var(--leading-ak-snug);
144
+ font-weight: 600;
145
+ letter-spacing: var(--tracking-ak-wider);
146
+ text-transform: uppercase;
147
+ color: var(--color-ak-text-secondary);
148
+ }
149
+ .ak-label-2xl {
150
+ font-size: var(--text-ak-xl);
151
+ line-height: var(--leading-ak-snug);
152
+ font-weight: 600;
153
+ letter-spacing: var(--tracking-ak-section);
154
+ text-transform: uppercase;
155
+ color: var(--color-ak-text-secondary);
156
+ }
157
+
158
+ /* -- UI Chrome Typography Presets --
159
+ For shell, nav, panels, forms -- NOT document content. */
160
+ .ak-overline {
161
+ font-size: var(--text-ak-xs);
162
+ font-weight: 600;
163
+ line-height: 1;
164
+ letter-spacing: 0.08em;
165
+ text-transform: uppercase;
166
+ color: var(--color-ak-text-secondary);
167
+ }
168
+ .ak-form-label {
169
+ font-size: var(--text-ak-base);
170
+ font-weight: 600;
171
+ line-height: 1.25;
172
+ color: var(--color-ak-text);
173
+ }
174
+ .ak-helper {
175
+ font-size: var(--text-ak-sm);
176
+ font-weight: 400;
177
+ line-height: 1.429;
178
+ color: var(--color-ak-text-secondary);
179
+ }
180
+ .ak-ui-body {
181
+ font-size: var(--text-ak-base);
182
+ font-weight: 500;
183
+ line-height: 1.5;
184
+ color: var(--color-ak-text-secondary);
185
+ }
186
+ .ak-nav-label-text {
187
+ font-size: var(--text-ak-base);
188
+ font-weight: 600;
189
+ line-height: 1;
190
+ color: var(--color-ak-text);
191
+ }
192
+ .ak-card-title {
193
+ font-size: var(--text-ak-lg);
194
+ font-weight: 600;
195
+ line-height: 1.333;
196
+ letter-spacing: -0.01em;
197
+ color: var(--color-ak-text);
198
+ }
199
+ .ak-panel-title {
200
+ font-size: var(--text-ak-xl);
201
+ font-weight: 600;
202
+ line-height: 1.4;
203
+ letter-spacing: -0.01em;
204
+ color: var(--color-ak-text);
205
+ }
206
+ .ak-page-title {
207
+ font-size: var(--text-ak-2xl);
208
+ font-weight: 600;
209
+ line-height: 1.333;
210
+ letter-spacing: -0.015em;
211
+ color: var(--color-ak-text);
212
+ }
213
+ .ak-avatar-text {
214
+ font-size: var(--text-ak-base);
215
+ font-weight: 700;
216
+ line-height: 1;
217
+ letter-spacing: var(--tracking-ak-normal);
218
+ }
219
+
220
+ /* -- Interactive Control Text Presets --
221
+ For buttons, inputs, labels inside controls (checkbox, radio, switch).
222
+ These are the canonical control text sizes per the AstralKit typography rules. */
223
+ .ak-input-text {
224
+ font-size: var(--text-ak-base);
225
+ font-weight: 400;
226
+ line-height: 1.5;
227
+ color: var(--color-ak-text);
228
+ }
229
+ .ak-button-text-sm {
230
+ font-size: var(--text-ak-sm);
231
+ font-weight: 600;
232
+ line-height: 1.143;
233
+ letter-spacing: 0;
234
+ }
235
+ .ak-button-text-md {
236
+ font-size: var(--text-ak-base);
237
+ font-weight: 600;
238
+ line-height: 1.5;
239
+ letter-spacing: 0;
240
+ }
241
+ .ak-button-text-lg {
242
+ font-size: var(--text-ak-lg);
243
+ font-weight: 600;
244
+ line-height: 1.333;
245
+ letter-spacing: -0.005em;
246
+ }
247
+ .ak-label-control {
248
+ font-size: var(--text-ak-base);
249
+ font-weight: 400;
250
+ line-height: 1.5;
251
+ color: var(--color-ak-text);
252
+ }
253
+
254
+ /* -- Dashboard KPI Presets --
255
+ For hero stat numbers on dashboards and analytics. */
256
+ .ak-kpi {
257
+ font-size: var(--text-ak-fl-5xl);
258
+ font-weight: 700;
259
+ line-height: var(--leading-ak-tight);
260
+ letter-spacing: var(--tracking-ak-tighter);
261
+ font-variant-numeric: tabular-nums;
262
+ color: var(--color-ak-text);
263
+ }
264
+ .ak-kpi-sm {
265
+ font-size: var(--text-ak-fl-3xl);
266
+ font-weight: 700;
267
+ line-height: var(--leading-ak-tight);
268
+ letter-spacing: var(--tracking-ak-tight);
269
+ font-variant-numeric: tabular-nums;
270
+ color: var(--color-ak-text);
271
+ }
272
+
273
+ /* -- Display Presets --
274
+ For hero marketing headings. Uses fluid display tokens
275
+ for dramatic viewport scaling. Very tight line height. */
276
+ .ak-display-sm {
277
+ font-size: var(--text-ak-display-3xl);
278
+ line-height: var(--leading-ak-tighter);
279
+ letter-spacing: -0.03em;
280
+ font-weight: 700;
281
+ text-rendering: optimizeLegibility;
282
+ color: var(--color-ak-text);
283
+ }
284
+ .ak-display-md {
285
+ font-size: var(--text-ak-display-5xl);
286
+ line-height: var(--leading-ak-tighter);
287
+ letter-spacing: -0.04em;
288
+ font-weight: 700;
289
+ text-rendering: optimizeLegibility;
290
+ color: var(--color-ak-text);
291
+ }
292
+ .ak-display-lg {
293
+ font-size: var(--text-ak-display-7xl);
294
+ line-height: var(--leading-ak-none);
295
+ letter-spacing: -0.05em;
296
+ font-weight: 700;
297
+ text-rendering: optimizeLegibility;
298
+ color: var(--color-ak-text);
299
+ }
300
+
301
+ /* Panel section headings — add letter-spacing, keep original font-size */
302
+ [data-ak-panel] h3.text-ak-base.font-bold {
303
+ letter-spacing: var(--tracking-ak-section);
304
+ }
305
+ .ak-logo-text {
306
+ font-size: var(--size-ak-icon-lg);
307
+ font-weight: 700;
308
+ line-height: 1;
309
+ }
310
+
311
+ /* Screen reader only */
312
+ .ak-sr-only {
313
+ position: absolute;
314
+ width: 1px;
315
+ height: 1px;
316
+ padding: 0;
317
+ margin: -1px;
318
+ overflow: hidden;
319
+ clip: rect(0, 0, 0, 0);
320
+ white-space: nowrap;
321
+ border-width: 0;
322
+ }
323
+
324
+