@gemboss/website-ui 0.9.0 → 0.11.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/CHANGELOG.md +109 -0
- package/README.md +2 -2
- package/bin/lib/check.mjs +6 -2
- package/css/base.css +2 -1
- package/css/effects.css +1 -1
- package/css/footer.css +74 -58
- package/css/header.css +347 -115
- package/css/tokens.css +24 -5
- package/demo/article.html +58 -70
- package/demo/blog.html +58 -70
- package/demo/brand-profiles.html +57 -27
- package/demo/footer.html +59 -71
- package/demo/forms.html +58 -70
- package/demo/header.html +58 -108
- package/demo/index.html +58 -70
- package/demo/spotlight.html +58 -71
- package/demo/theme-example.html +1 -1
- package/docs/components.md +31 -21
- package/docs/markup-contract.md +53 -22
- package/js/website.js +285 -42
- package/js/website.mjs +319 -47
- package/package.json +1 -1
- package/system.json +23 -8
- package/templates/footer.html +11 -9
- package/templates/header.html +47 -24
- package/templates/page.html +54 -20
- package/website.css +449 -181
- package/website.min.css +1 -1
package/css/header.css
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
/* header: announcement, a flat 64px bar with one hairline, mega menu, mobile menu
|
|
1
|
+
/* header: announcement, a flat 64px bar with one hairline, mega menu, mobile menu up to 1080px.
|
|
2
2
|
Not a floating pill: no radius, no blur, no shadow on the bar. Nothing tucks under it. A brand may choose the one
|
|
3
|
-
other shape, .gw-header--float (an inset card from
|
|
3
|
+
other shape, .gw-header--float (an inset card from 1081px, at the end of this file). */
|
|
4
4
|
.gw-announce {
|
|
5
5
|
padding: 8px var(--gw-gutter);
|
|
6
6
|
border-bottom: 1px solid var(--gw-line);
|
|
@@ -20,47 +20,54 @@
|
|
|
20
20
|
background: var(--gw-surface);
|
|
21
21
|
}
|
|
22
22
|
.gw-header.is-scrolled { border-bottom-color: var(--gw-line-strong); }
|
|
23
|
-
|
|
23
|
+
/* the bar is 12px wider than the page's wrap with 24px inside, as gemboss.ai draws it (1132px; its content starts
|
|
24
|
+
18px in from the page's), 6px inside up to 640px. Its own width, whatever order the stylesheets load in: a bar that
|
|
25
|
+
also carries .gw-wrap (0.10.0 markup) still takes this one. */
|
|
26
|
+
.gw-header__bar { display: flex; align-items: center; gap: 32px; height: var(--gw-header-height); }
|
|
27
|
+
.gw-header > .gw-header__bar { width: min(100% - 32px, var(--gw-wrap) + 12px); margin-inline: auto; padding-inline: 24px; }
|
|
28
|
+
@media (max-width: 640px) { .gw-header > .gw-header__bar { padding-inline: 6px; } }
|
|
24
29
|
|
|
25
30
|
.gw-brand {
|
|
26
31
|
display: inline-flex;
|
|
27
32
|
align-items: center;
|
|
28
33
|
gap: 8px;
|
|
29
34
|
flex: none;
|
|
30
|
-
min-height: 44px;
|
|
31
35
|
color: var(--gw-ink);
|
|
32
36
|
font-size: 18px;
|
|
33
37
|
font-weight: 700;
|
|
34
38
|
letter-spacing: -0.01em;
|
|
39
|
+
line-height: 1.6;
|
|
35
40
|
white-space: nowrap;
|
|
36
41
|
}
|
|
37
|
-
|
|
38
|
-
.gw-
|
|
42
|
+
/* the mark: 34px, its corners clipped at 8px, as gemboss.ai (0.11.0; was 26px); a 44px row up to 768px */
|
|
43
|
+
.gw-brand__mark { flex: none; width: 34px; height: 34px; border-radius: var(--gw-radius-8); }
|
|
44
|
+
@media (max-width: 768px) { .gw-brand { min-height: 44px; } }
|
|
45
|
+
.gw-brand__name { line-height: inherit; }
|
|
39
46
|
|
|
40
47
|
/* desktop nav */
|
|
41
|
-
.gw-nav { display: none; }
|
|
48
|
+
.gw-nav { display: none; margin-left: 6px; }
|
|
42
49
|
.gw-nav__list { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
|
|
43
50
|
.gw-nav__trigger,
|
|
44
51
|
.gw-nav__link {
|
|
45
52
|
display: inline-flex;
|
|
46
53
|
align-items: center;
|
|
47
54
|
gap: 6px;
|
|
48
|
-
|
|
49
|
-
padding: 0 12px;
|
|
55
|
+
padding: 8px 12px;
|
|
50
56
|
border: 0;
|
|
51
57
|
border-radius: var(--gw-radius-action);
|
|
52
58
|
background: transparent;
|
|
53
59
|
color: var(--gw-ink-2);
|
|
54
60
|
font-size: 14px;
|
|
55
61
|
font-weight: 500;
|
|
56
|
-
line-height: 1.
|
|
62
|
+
line-height: 1.6;
|
|
57
63
|
white-space: nowrap;
|
|
58
64
|
cursor: pointer;
|
|
59
65
|
}
|
|
60
66
|
.gw-nav__trigger:hover,
|
|
61
67
|
.gw-nav__link:hover,
|
|
62
68
|
.gw-nav__item.is-open > .gw-nav__trigger { background: var(--gw-bg-soft); color: var(--gw-ink); }
|
|
63
|
-
/* the chevron:
|
|
69
|
+
/* the chevron: gemboss.ai's own 24px path (2.6 stroke, square ends) at 12px and 55%, drawn as a mask so it takes
|
|
70
|
+
currentColor */
|
|
64
71
|
.gw-nav__trigger::after,
|
|
65
72
|
.gw-mobile-menu__group > summary::after {
|
|
66
73
|
content: "";
|
|
@@ -68,97 +75,281 @@
|
|
|
68
75
|
width: 12px;
|
|
69
76
|
height: 12px;
|
|
70
77
|
background: currentColor;
|
|
71
|
-
opacity: 0.
|
|
72
|
-
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23000' stroke-width='2.6'
|
|
73
|
-
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23000' stroke-width='2.6'
|
|
78
|
+
opacity: 0.55;
|
|
79
|
+
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23000' stroke-width='2.6'/%3E%3C/svg%3E") center / 12px no-repeat;
|
|
80
|
+
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23000' stroke-width='2.6'/%3E%3C/svg%3E") center / 12px no-repeat;
|
|
74
81
|
transition: transform 0.18s var(--gw-ease);
|
|
75
82
|
}
|
|
76
83
|
.gw-nav__trigger[aria-expanded="true"]::after,
|
|
77
84
|
.gw-mobile-menu__group[open] > summary::after { transform: rotate(180deg); }
|
|
78
|
-
.
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
}
|
|
85
|
+
/* the menu's own words are drawn 0.005em tighter (a text action in the bar keeps its tracking); the page you are on,
|
|
86
|
+
or the section it belongs to (aria-current on the section's name), is named in the accent's strong ink, weight 600,
|
|
87
|
+
as gemboss.ai (0.11.0; was ink with an underline) */
|
|
88
|
+
.gw-nav .gw-nav__trigger,
|
|
89
|
+
.gw-nav .gw-nav__link { letter-spacing: -0.005em; }
|
|
90
|
+
.gw-nav__link[aria-current="page"],
|
|
91
|
+
.gw-nav__trigger[aria-current] { color: var(--gw-accent-strong); font-weight: 600; }
|
|
86
92
|
|
|
87
|
-
/* mega menu:
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
93
|
+
/* mega menu (0.11.0): gemboss.ai's own, 1:1 (Chris 26/10/2026). A section's name is a link to its page that opens its
|
|
94
|
+
panel: after the pointer rests 200ms, at once from the keyboard, ArrowDown steps into the first row. From 1081px the
|
|
95
|
+
script draws ONE surface (.gw-mega-surface) that morphs to the open panel's size and place, the panels crossfade on
|
|
96
|
+
it, clipped to its outline while it moves, a caret points at the open name, a pill glides under the hovered name and
|
|
97
|
+
a highlight under the hovered row, and the preview pane follows the row. The page behind dims and blurs (.gw-scrim).
|
|
98
|
+
A panel: .gw-mega__body (columns of rows, then an aside of pictures) and an optional .gw-mega__foot strip. Its width
|
|
99
|
+
and its aside's width are the markup's (--gw-mega-w, --gw-mega-pv; 1000 and 320 when it says nothing), its columns
|
|
100
|
+
too (--gw-mega-cols, 3). Without the script the panels stay hidden and every name is still its page's link. */
|
|
101
|
+
.gw-header { --gw-mega-ease: cubic-bezier(0.25, 1, 0.5, 1); --gw-mega-t: 0.36s; --gw-mega-glide: 0.26s; }
|
|
102
|
+
.gw-nav__item { display: flex; }
|
|
103
|
+
/* gemboss.ai's chevron is an inline 12px SVG after the name (.gw-nav__chev); a name without one keeps the drawn mask */
|
|
104
|
+
.gw-nav__chev { flex: none; opacity: 0.55; transition: transform 0.18s; }
|
|
105
|
+
.gw-nav__trigger:has(> .gw-nav__chev)::after { content: none; }
|
|
106
|
+
.gw-nav__trigger[aria-expanded="true"] > .gw-nav__chev { transform: rotate(180deg); }
|
|
107
|
+
.gw-mega-surface,
|
|
108
|
+
.gw-mega-caret,
|
|
109
|
+
.gw-nav__pill,
|
|
110
|
+
.gw-mega__hl { display: none; }
|
|
111
|
+
.gw-scrim {
|
|
112
|
+
position: fixed;
|
|
113
|
+
inset: 0;
|
|
114
|
+
z-index: 40;
|
|
115
|
+
pointer-events: none;
|
|
116
|
+
opacity: 0;
|
|
117
|
+
background: var(--gw-scrim);
|
|
118
|
+
-webkit-backdrop-filter: blur(4px);
|
|
119
|
+
backdrop-filter: blur(4px);
|
|
120
|
+
transition: opacity 0.24s;
|
|
121
|
+
}
|
|
122
|
+
.gw-scrim.is-on { opacity: 1; }
|
|
123
|
+
/* a link in a panel sets its words at 16px, weight 500, 0.005em tighter, as gemboss.ai; its parts size themselves and
|
|
124
|
+
inherit the rest (a row's line is weight 500, its tracking the 16px one) */
|
|
125
|
+
.gw-mega a { font-size: 16px; font-weight: 500; letter-spacing: -0.005em; }
|
|
126
|
+
.gw-mega__link b { display: block; }
|
|
127
|
+
.gw-mega__link i { display: block; font-style: normal; }
|
|
128
|
+
@media (min-width: 1081px) {
|
|
129
|
+
.gw-header.has-mega .gw-nav__trigger,
|
|
130
|
+
.gw-header.has-mega .gw-nav__link { position: relative; z-index: 1; background: none; }
|
|
131
|
+
.gw-header.has-mega .gw-nav__trigger:hover,
|
|
132
|
+
.gw-header.has-mega .gw-nav__link:hover,
|
|
133
|
+
.gw-header.has-mega .gw-nav__item:hover > .gw-nav__trigger,
|
|
134
|
+
.gw-header.has-mega .gw-nav__item:focus-within > .gw-nav__trigger { background: none; color: var(--gw-ink); }
|
|
135
|
+
.gw-header.has-mega .gw-nav__chev { transform: none; transition: transform 0.2s var(--gw-mega-ease); }
|
|
136
|
+
.gw-header.has-mega .gw-nav__trigger[aria-expanded="true"] > .gw-nav__chev { transform: rotate(180deg); }
|
|
137
|
+
.gw-nav__pill {
|
|
138
|
+
display: block;
|
|
139
|
+
position: absolute;
|
|
140
|
+
left: 0;
|
|
141
|
+
top: 0;
|
|
142
|
+
z-index: 0;
|
|
143
|
+
width: 0;
|
|
144
|
+
height: 0;
|
|
145
|
+
border-radius: var(--gw-radius-action);
|
|
146
|
+
pointer-events: none;
|
|
147
|
+
opacity: 0;
|
|
148
|
+
background: color-mix(in srgb, var(--gw-ink) 6%, transparent);
|
|
149
|
+
transition: translate var(--gw-mega-glide) var(--gw-mega-ease), width var(--gw-mega-glide) var(--gw-mega-ease), opacity 0.2s ease;
|
|
150
|
+
}
|
|
151
|
+
.gw-nav__pill.is-on { opacity: 1; }
|
|
152
|
+
.gw-mega-surface {
|
|
153
|
+
display: block;
|
|
154
|
+
position: absolute;
|
|
155
|
+
left: 0;
|
|
156
|
+
top: var(--gw-mega-top, 73px);
|
|
157
|
+
z-index: 88;
|
|
158
|
+
width: 0;
|
|
159
|
+
height: 0;
|
|
160
|
+
pointer-events: none;
|
|
161
|
+
border: 1px solid var(--gw-line);
|
|
162
|
+
border-radius: var(--gw-radius-popover);
|
|
163
|
+
background: var(--gw-surface);
|
|
164
|
+
box-shadow: var(--gw-shadow-raised);
|
|
165
|
+
opacity: 0;
|
|
166
|
+
translate: 0 -6px;
|
|
167
|
+
transition: opacity 0.22s ease, translate var(--gw-mega-t) var(--gw-mega-ease), left var(--gw-mega-t) var(--gw-mega-ease), width var(--gw-mega-t) var(--gw-mega-ease), height var(--gw-mega-t) var(--gw-mega-ease);
|
|
168
|
+
}
|
|
169
|
+
.gw-mega-caret {
|
|
170
|
+
display: block;
|
|
171
|
+
position: absolute;
|
|
172
|
+
left: 0;
|
|
173
|
+
top: calc(var(--gw-mega-top, 73px) - 5px);
|
|
174
|
+
z-index: 89;
|
|
175
|
+
width: 12px;
|
|
176
|
+
height: 12px;
|
|
177
|
+
pointer-events: none;
|
|
178
|
+
border-top: 1px solid var(--gw-line);
|
|
179
|
+
border-left: 1px solid var(--gw-line);
|
|
180
|
+
border-radius: var(--gw-radius-2) 0 0 0;
|
|
181
|
+
background: var(--gw-surface);
|
|
182
|
+
rotate: 45deg;
|
|
183
|
+
opacity: 0;
|
|
184
|
+
transition: opacity 0.22s ease, translate var(--gw-mega-t) var(--gw-mega-ease);
|
|
185
|
+
}
|
|
186
|
+
.gw-header.is-mega-open .gw-mega-surface,
|
|
187
|
+
.gw-header.is-mega-open .gw-mega-caret { opacity: 1; }
|
|
188
|
+
.gw-header.has-mega .gw-mega {
|
|
189
|
+
position: absolute;
|
|
190
|
+
top: var(--gw-mega-top, 73px);
|
|
191
|
+
left: 0;
|
|
192
|
+
z-index: 90;
|
|
193
|
+
width: var(--gw-mega-w, 1000px);
|
|
194
|
+
max-width: calc(100vw - 48px);
|
|
195
|
+
border-radius: var(--gw-radius-popover);
|
|
196
|
+
opacity: 0;
|
|
197
|
+
visibility: hidden;
|
|
198
|
+
pointer-events: none;
|
|
199
|
+
translate: 0 -6px;
|
|
200
|
+
transition: opacity 0.14s ease, translate var(--gw-mega-t) var(--gw-mega-ease), clip-path var(--gw-mega-t) var(--gw-mega-ease), visibility 0s linear var(--gw-mega-t);
|
|
201
|
+
}
|
|
202
|
+
.gw-header.has-mega.is-mega-open .gw-mega { translate: 0 0; }
|
|
203
|
+
.gw-header.has-mega.is-mega-open .gw-nav__item.is-open > .gw-mega {
|
|
204
|
+
opacity: 1;
|
|
205
|
+
visibility: visible;
|
|
206
|
+
pointer-events: auto;
|
|
207
|
+
transition: opacity 0.24s var(--gw-mega-ease) 0.05s, translate var(--gw-mega-t) var(--gw-mega-ease), clip-path var(--gw-mega-t) var(--gw-mega-ease), visibility 0s;
|
|
208
|
+
}
|
|
209
|
+
.gw-mega__body,
|
|
210
|
+
.gw-mega__foot { translate: var(--gw-mega-dx, 0px) 0; transition: translate var(--gw-mega-t) var(--gw-mega-ease); }
|
|
211
|
+
.gw-mega__body { display: grid; grid-template-columns: minmax(0, 1fr) var(--gw-mega-pv, 320px); gap: 16px; padding: 12px; }
|
|
212
|
+
.gw-mega__body:not(:has(> .gw-mega__aside)) { grid-template-columns: minmax(0, 1fr); }
|
|
213
|
+
.gw-mega__grid { position: relative; display: grid; grid-template-columns: repeat(var(--gw-mega-cols, 3), minmax(0, 1fr)); gap: 0 12px; padding: 12px 0 0; align-content: start; }
|
|
214
|
+
.gw-mega__col { display: flex; flex-direction: column; gap: 2px; }
|
|
215
|
+
.gw-mega__heading { position: relative; z-index: 1; margin: 0; padding: 0 12px 8px; color: var(--gw-muted); font-size: 12px; font-weight: 500; line-height: 16px; }
|
|
216
|
+
.gw-mega__link { position: relative; z-index: 1; display: block; padding: 12px; border-radius: var(--gw-radius-action); color: var(--gw-ink); }
|
|
217
|
+
.gw-mega__link:focus-visible { outline: 2px solid var(--gw-accent); outline-offset: -2px; }
|
|
218
|
+
.gw-mega__link b { color: var(--gw-ink); font-size: 14px; font-weight: 500; letter-spacing: 0; line-height: 20px; }
|
|
219
|
+
.gw-mega__link i { margin-top: 2px; color: var(--gw-muted); font-size: 13px; line-height: 18px; }
|
|
220
|
+
.gw-mega__link > .gw-mega__icon,
|
|
221
|
+
.gw-mega__link > img { display: none; }
|
|
222
|
+
.gw-mega__hl {
|
|
223
|
+
display: block;
|
|
224
|
+
position: absolute;
|
|
225
|
+
left: 0;
|
|
226
|
+
top: 0;
|
|
227
|
+
z-index: 0;
|
|
228
|
+
width: 0;
|
|
229
|
+
height: 0;
|
|
230
|
+
border-radius: var(--gw-radius-action);
|
|
231
|
+
pointer-events: none;
|
|
232
|
+
opacity: 0;
|
|
233
|
+
background: color-mix(in srgb, var(--gw-ink) 5%, transparent);
|
|
234
|
+
transition: translate var(--gw-mega-glide) var(--gw-mega-ease), width var(--gw-mega-glide) var(--gw-mega-ease), height var(--gw-mega-glide) var(--gw-mega-ease), opacity 0.2s ease;
|
|
235
|
+
}
|
|
236
|
+
.gw-mega__hl.is-on { opacity: 1; }
|
|
237
|
+
/* the aside: one card shows at a time, the panel's own (in the markup) or a row's preview (from its <template>) */
|
|
238
|
+
.gw-mega__aside { position: relative; display: block; min-height: 296px; border-radius: var(--gw-radius-card); overflow: hidden; }
|
|
239
|
+
.gw-mega__card {
|
|
240
|
+
position: absolute;
|
|
241
|
+
inset: 0;
|
|
242
|
+
display: flex;
|
|
243
|
+
flex-direction: column;
|
|
244
|
+
gap: 12px;
|
|
245
|
+
padding: 0 0 4px;
|
|
246
|
+
color: var(--gw-ink);
|
|
247
|
+
opacity: 0;
|
|
248
|
+
pointer-events: none;
|
|
249
|
+
transition: opacity 0.24s ease;
|
|
250
|
+
}
|
|
251
|
+
.gw-mega__card[aria-hidden="true"] { visibility: hidden; transition: opacity 0.24s ease, visibility 0s linear 0.24s; }
|
|
252
|
+
.gw-mega__card.is-on { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.28s ease, visibility 0s; }
|
|
253
|
+
.gw-mega__card:focus-visible { border-radius: var(--gw-radius-card); outline: 2px solid var(--gw-accent); outline-offset: -2px; }
|
|
254
|
+
.gw-mega__foot {
|
|
255
|
+
display: flex;
|
|
256
|
+
align-items: center;
|
|
257
|
+
justify-content: space-between;
|
|
258
|
+
gap: 16px;
|
|
259
|
+
padding: 16px 24px;
|
|
260
|
+
border-top: 1px solid var(--gw-line);
|
|
261
|
+
font-size: 13px;
|
|
262
|
+
}
|
|
263
|
+
.gw-mega__foot-start,
|
|
264
|
+
.gw-mega__foot-end { display: flex; align-items: center; gap: 24px; }
|
|
265
|
+
.gw-mega__foot a { color: var(--gw-muted); font-size: 13px; font-weight: 500; transition: color 0.15s; }
|
|
266
|
+
.gw-mega__foot a:hover { color: var(--gw-ink); }
|
|
267
|
+
.gw-mega__foot a.gw-mega__cta { color: var(--gw-ink); font-weight: 600; }
|
|
268
|
+
}
|
|
269
|
+
/* the Stage under a card's picture: a deep iris ground lit from two corners, in the desktop pane a faint dot grid
|
|
270
|
+
fading out to the lower left. What sits on it (a page, a screen, a photo, a drawing) is the site's: it lifts objects with --gw-shadow-lift. */
|
|
271
|
+
.gw-mega__art {
|
|
272
|
+
--gw-lift: var(--gw-shadow-lift);
|
|
273
|
+
position: relative;
|
|
274
|
+
display: block;
|
|
275
|
+
overflow: hidden;
|
|
276
|
+
border-radius: var(--gw-radius-card);
|
|
277
|
+
background:
|
|
278
|
+
radial-gradient(130% 90% at 100% 0%, var(--gw-stage-glow), transparent 55%),
|
|
279
|
+
radial-gradient(90% 80% at 0% 100%, var(--gw-stage-glow-2), transparent 60%),
|
|
280
|
+
linear-gradient(160deg, var(--gw-stage-top), var(--gw-stage-bottom));
|
|
281
|
+
color: var(--gw-stage-ink);
|
|
102
282
|
}
|
|
103
|
-
|
|
104
|
-
.gw-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
283
|
+
/* the dots: in the desktop pane only (a phone level's card has none, as gemboss.ai) */
|
|
284
|
+
.gw-mega__aside .gw-mega__art::before {
|
|
285
|
+
content: "";
|
|
286
|
+
position: absolute;
|
|
287
|
+
inset: 0;
|
|
288
|
+
pointer-events: none;
|
|
289
|
+
background-image: radial-gradient(var(--gw-stage-dot) 1px, transparent 1.5px);
|
|
290
|
+
background-size: 16px 16px;
|
|
291
|
+
-webkit-mask-image: linear-gradient(170deg, #000, transparent 70%);
|
|
292
|
+
mask-image: linear-gradient(170deg, #000, transparent 70%);
|
|
293
|
+
}
|
|
294
|
+
/* what sits on the Stage stacks above its dots; a site's own position for it wins (no specificity here) */
|
|
295
|
+
:where(.gw-mega__art > *) { position: relative; }
|
|
296
|
+
/* a picture straight on the Stage (an <img> child) fills it, like a photo (gemboss.ai draws its team and its lounge so) */
|
|
297
|
+
:where(.gw-mega__art) > img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
|
|
298
|
+
/* in the desktop pane the picture fills what the words leave (its parts size to it: a size container) */
|
|
299
|
+
.gw-mega__aside .gw-mega__art { flex: 1 1 auto; min-height: 0; container-type: size; }
|
|
300
|
+
.gw-mega__card-text { display: block; padding: 0 4px; }
|
|
301
|
+
.gw-mega__card-text b { display: flex; align-items: center; gap: 8px; color: var(--gw-ink); font-size: 14px; font-weight: 600; line-height: 20px; }
|
|
302
|
+
.gw-mega__card-text i { display: block; margin-top: 2px; color: var(--gw-muted); font-size: 13px; font-style: normal; line-height: 18px; }
|
|
303
|
+
/* a level of the phone menu ends with its panel's own card, as gemboss.ai: 24px above, the picture on the Stage as
|
|
304
|
+
tall as what it holds, 16px inside; the words under it */
|
|
305
|
+
.gw-mobile-menu .gw-mega__card { display: flex; flex-direction: column; gap: 12px; margin: 24px 0 8px; color: var(--gw-ink); }
|
|
306
|
+
.gw-mobile-menu .gw-mega__art { display: flex; padding: 16px; }
|
|
307
|
+
.gw-mobile-menu .gw-mega__card-text b { display: block; line-height: 1.6; }
|
|
308
|
+
.gw-mobile-menu .gw-mega__card-text i { margin-top: 4px; }
|
|
309
|
+
/* a row's picture instead of an icon (gemboss.ai's Solutions): 48 by 32, one hairline, 6px corners */
|
|
310
|
+
.gw-mobile-menu__link > img { display: block; flex: none; width: 48px; height: 32px; border: 1px solid var(--gw-line); border-radius: var(--gw-radius-6); object-fit: cover; }
|
|
311
|
+
.gw-mega__go { color: var(--gw-accent-strong); font-weight: 500; }
|
|
312
|
+
.gw-mega__card-text > .gw-mega__go { display: block; margin-top: 8px; font-size: 13px; }
|
|
313
|
+
.gw-mega__card-text b > .gw-mega__go { margin-left: auto; transition: translate 0.2s var(--gw-mega-ease); }
|
|
314
|
+
.gw-mega__card:hover b > .gw-mega__go { translate: 4px 0; }
|
|
315
|
+
.gw-mega__new {
|
|
316
|
+
display: inline-flex;
|
|
317
|
+
align-items: center;
|
|
318
|
+
height: 20px;
|
|
319
|
+
margin-right: 6px;
|
|
320
|
+
padding: 0 6px;
|
|
321
|
+
border-radius: var(--gw-radius-6);
|
|
322
|
+
background: var(--gw-accent-soft);
|
|
323
|
+
color: var(--gw-accent-strong);
|
|
324
|
+
font-size: 11px;
|
|
325
|
+
font-weight: 600;
|
|
119
326
|
}
|
|
120
|
-
|
|
121
|
-
.gw-
|
|
122
|
-
.gw-
|
|
123
|
-
.gw-
|
|
124
|
-
.gw-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
327
|
+
@media (prefers-reduced-motion: reduce) {
|
|
328
|
+
.gw-scrim,
|
|
329
|
+
.gw-nav__pill,
|
|
330
|
+
.gw-mega-surface,
|
|
331
|
+
.gw-mega-caret,
|
|
332
|
+
.gw-mega__hl,
|
|
333
|
+
.gw-mega__go,
|
|
334
|
+
.gw-header.has-mega .gw-mega,
|
|
335
|
+
.gw-header.has-mega.is-mega-open .gw-nav__item.is-open > .gw-mega,
|
|
336
|
+
.gw-mega__body,
|
|
337
|
+
.gw-mega__foot,
|
|
338
|
+
.gw-mega__card,
|
|
339
|
+
.gw-mega__card.is-on { transition: none; }
|
|
340
|
+
.gw-mega-surface,
|
|
341
|
+
.gw-header.has-mega .gw-mega { translate: 0 0; }
|
|
133
342
|
}
|
|
134
|
-
.gw-mega__icon svg { width: 16px; height: 16px; }
|
|
135
|
-
.gw-mega__link:hover .gw-mega__icon { border-color: var(--gw-accent-soft); background: var(--gw-accent-soft); color: var(--gw-accent-strong); }
|
|
136
|
-
/* the feature card is the Stage (the house illustration recipe, Chris 22/10/2026): a night ground lit with the accent
|
|
137
|
-
from two corners, white words. An illustration may light itself, so its glows are gradients, not chrome shadows. */
|
|
138
|
-
.gw-mega__feature {
|
|
139
|
-
display: flex;
|
|
140
|
-
flex-direction: column;
|
|
141
|
-
justify-content: flex-end;
|
|
142
|
-
gap: 4px;
|
|
143
|
-
min-height: 216px;
|
|
144
|
-
padding: 24px;
|
|
145
|
-
border-radius: var(--gw-radius-panel);
|
|
146
|
-
background:
|
|
147
|
-
radial-gradient(360px 260px at 12% 112%, color-mix(in srgb, var(--gw-accent) 78%, transparent), transparent 62%),
|
|
148
|
-
radial-gradient(300px 220px at 92% -14%, color-mix(in srgb, var(--gw-wash-violet) 44%, transparent), transparent 70%),
|
|
149
|
-
var(--gw-night);
|
|
150
|
-
color: var(--gw-on-night);
|
|
151
|
-
}
|
|
152
|
-
.gw-mega__feature b { font-size: 18px; font-weight: 650; line-height: 1.25; }
|
|
153
|
-
.gw-mega__feature i { color: var(--gw-on-night); font-size: 13px; font-style: normal; line-height: 1.5; opacity: 0.9; }
|
|
154
|
-
.gw-mega__feature .gw-link--arrow { margin-top: 16px; color: var(--gw-on-night); font-size: 13px; font-weight: 600; }
|
|
155
343
|
|
|
156
344
|
/* actions on the right */
|
|
157
|
-
.gw-
|
|
158
|
-
.
|
|
159
|
-
|
|
160
|
-
.gw-
|
|
161
|
-
.gw-
|
|
345
|
+
/* Sign in and a second text action (.gw-header__link, Book a demo on gemboss.ai) read like the menu's words; the
|
|
346
|
+
primary button sits 8px further out. Sign in shows from 1081px, the second action from 1181px (the first thing to
|
|
347
|
+
go when the bar gets tight), the button from 561px. */
|
|
348
|
+
.gw-header__actions { display: flex; align-items: center; gap: 4px; margin-left: auto; }
|
|
349
|
+
.gw-header__signin,
|
|
350
|
+
.gw-header__link { display: none; }
|
|
351
|
+
.gw-header__actions > .gw-btn { display: none; margin-left: 8px; line-height: 1.6; }
|
|
352
|
+
.gw-theme-toggle {
|
|
162
353
|
display: inline-flex;
|
|
163
354
|
align-items: center;
|
|
164
355
|
justify-content: center;
|
|
@@ -171,10 +362,25 @@
|
|
|
171
362
|
background: transparent;
|
|
172
363
|
color: var(--gw-ink);
|
|
173
364
|
}
|
|
174
|
-
.gw-theme-toggle:hover
|
|
175
|
-
.gw-menu-toggle:hover { background: var(--gw-bg-soft); }
|
|
365
|
+
.gw-theme-toggle:hover { background: var(--gw-bg-soft); }
|
|
176
366
|
.gw-theme-toggle svg,
|
|
177
367
|
.gw-menu-toggle svg { width: 20px; height: 20px; }
|
|
368
|
+
/* the menu button: a 42px square with one strong hairline on the surface, the card radius of the site's profile (12,
|
|
369
|
+
20 in soft), its hairline ink while the menu is open, as gemboss.ai (0.11.0) */
|
|
370
|
+
.gw-menu-toggle {
|
|
371
|
+
display: inline-flex;
|
|
372
|
+
align-items: center;
|
|
373
|
+
justify-content: center;
|
|
374
|
+
flex: none;
|
|
375
|
+
width: 42px;
|
|
376
|
+
height: 42px;
|
|
377
|
+
padding: 0;
|
|
378
|
+
border: 1px solid var(--gw-line-strong);
|
|
379
|
+
border-radius: var(--gw-radius-card);
|
|
380
|
+
background: var(--gw-surface);
|
|
381
|
+
color: var(--gw-ink);
|
|
382
|
+
}
|
|
383
|
+
.gw-menu-toggle[aria-expanded="true"] { border-color: var(--gw-ink); }
|
|
178
384
|
.gw-menu-toggle[aria-expanded="true"] .gw-menu-toggle__open,
|
|
179
385
|
.gw-menu-toggle:not([aria-expanded="true"]) .gw-menu-toggle__close { display: none; }
|
|
180
386
|
|
|
@@ -209,18 +415,16 @@ html.is-menu-open .gw-header { position: fixed; top: 0; left: 0; right: 0; }
|
|
|
209
415
|
.gw-mobile-menu__group > summary::-webkit-details-marker { display: none; }
|
|
210
416
|
.gw-mobile-menu__list { margin: 0; padding: 8px 0 16px; list-style: none; }
|
|
211
417
|
.gw-mobile-menu__link { display: flex; align-items: center; min-height: 44px; color: var(--gw-ink-2); font-size: 16px; }
|
|
212
|
-
.gw-mobile-menu__link[aria-current="page"],
|
|
213
|
-
.gw-mobile-menu__top[aria-current="page"] { color: var(--gw-accent-strong); font-weight: 600; }
|
|
214
418
|
.gw-mobile-menu__actions { display: grid; gap: 8px; margin-top: 24px; }
|
|
215
419
|
|
|
216
|
-
@media (min-width:
|
|
420
|
+
@media (min-width: 561px) {
|
|
217
421
|
.gw-header__actions > .gw-btn:not(.gw-btn--secondary) { display: inline-flex; }
|
|
218
422
|
}
|
|
219
|
-
@media (min-width:
|
|
423
|
+
@media (min-width: 1181px) {
|
|
424
|
+
.gw-header__link,
|
|
220
425
|
.gw-header__actions > .gw-btn--secondary { display: inline-flex; }
|
|
221
426
|
}
|
|
222
|
-
@media (min-width:
|
|
223
|
-
.gw-header__bar { gap: 32px; }
|
|
427
|
+
@media (min-width: 1081px) {
|
|
224
428
|
.gw-nav { display: block; }
|
|
225
429
|
.gw-header__signin { display: inline-flex; }
|
|
226
430
|
.gw-menu-toggle, .gw-mobile-menu { display: none !important; }
|
|
@@ -232,12 +436,12 @@ html.is-menu-open .gw-header { position: fixed; top: 0; left: 0; right: 0; }
|
|
|
232
436
|
}
|
|
233
437
|
|
|
234
438
|
/* floating header (0.3.0), a brand's header profile: <header class="gw-header gw-header--float">. The same bar, mega
|
|
235
|
-
menu and script, drawn from
|
|
439
|
+
menu and script, drawn from 1081px as an inset card: the panel radius of the site's profile (16, 24 in soft), the
|
|
236
440
|
surface at 85% over a 10px blur, one hairline, the raised shadow, a 16px gap above it and when it sticks. It is
|
|
237
441
|
wrap + 2 x 24px + its border wide, so the bar's content lines up with the page's from 1170px. Below 1080px it is
|
|
238
442
|
the flat bar, so the phone menu is unchanged. Solid for a visitor who asks for less transparency, and where the
|
|
239
443
|
browser cannot blur. No other floating or blurred header: it is a profile, not a style to copy. */
|
|
240
|
-
@media (min-width:
|
|
444
|
+
@media (min-width: 1081px) {
|
|
241
445
|
.gw-header--float {
|
|
242
446
|
top: var(--gw-header-gap);
|
|
243
447
|
width: min(100% - 32px, var(--gw-wrap) + 50px);
|
|
@@ -255,7 +459,7 @@ html.is-menu-open .gw-header { position: fixed; top: 0; left: 0; right: 0; }
|
|
|
255
459
|
/* an anchor lands below the card, not under it */
|
|
256
460
|
:root:has(.gw-header--float) [id] { scroll-margin-top: calc(var(--gw-header-height) + var(--gw-header-gap) + 18px); }
|
|
257
461
|
}
|
|
258
|
-
@media (min-width:
|
|
462
|
+
@media (min-width: 1081px) and (prefers-reduced-transparency: reduce) {
|
|
259
463
|
.gw-header--float { background: var(--gw-surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
|
|
260
464
|
}
|
|
261
465
|
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
|
|
@@ -272,8 +476,11 @@ html.is-menu-open .gw-header { position: fixed; top: 0; left: 0; right: 0; }
|
|
|
272
476
|
stays at the bottom of the sheet while the list scrolls (the sheet has no bottom padding, so nothing peeks out under
|
|
273
477
|
the bar; nor sideways while a level slides in). Without the script the groups are the 0.7.0 <details> that open in
|
|
274
478
|
place, their chevron pointing down. */
|
|
275
|
-
.gw-mobile-menu[data-gw-menu="drill"] { display: flex; flex-direction: column; overflow-x: hidden; padding-bottom: 0; }
|
|
276
|
-
.
|
|
479
|
+
.gw-mobile-menu[data-gw-menu="drill"] { display: flex; flex-direction: column; overflow-x: hidden; padding-bottom: 0; line-height: 1.6; }
|
|
480
|
+
/* gemboss.ai's sheet (0.11.0, 1:1): 24px in from both edges, whatever the page's wrap; every link in it set at 18px,
|
|
481
|
+
weight 500, 0.005em tighter, its parts sizing themselves (a row's line keeps the 18px tracking) */
|
|
482
|
+
.gw-mobile-menu[data-gw-menu="drill"] > nav { display: flex; flex: 1 0 auto; flex-direction: column; width: auto; margin-inline: 0; padding-inline: 24px; }
|
|
483
|
+
.gw-mobile-menu[data-gw-menu="drill"] a { font-size: 18px; font-weight: 500; letter-spacing: -0.005em; }
|
|
277
484
|
.gw-mobile-menu[data-gw-menu="drill"] .gw-mobile-menu__group > summary,
|
|
278
485
|
.gw-mobile-menu[data-gw-menu="drill"] .gw-mobile-menu__top { min-height: 64px; font-size: 24px; letter-spacing: -0.01em; }
|
|
279
486
|
.gw-mobile-menu[data-gw-menu="drill"] .gw-mobile-menu__group > summary::after { width: 20px; height: 20px; -webkit-mask-size: 20px; mask-size: 20px; }
|
|
@@ -286,10 +493,10 @@ html.is-menu-open .gw-header { position: fixed; top: 0; left: 0; right: 0; }
|
|
|
286
493
|
color: var(--gw-ink);
|
|
287
494
|
font-weight: 500;
|
|
288
495
|
}
|
|
289
|
-
.gw-mobile-menu[data-gw-menu="drill"] .gw-mobile-menu__link b { display: block; font-size: 16px; font-weight: 500; line-height: 20px; }
|
|
496
|
+
.gw-mobile-menu[data-gw-menu="drill"] .gw-mobile-menu__link b { display: block; font-size: 16px; font-weight: 500; letter-spacing: -0.005em; line-height: 20px; }
|
|
290
497
|
.gw-mobile-menu[data-gw-menu="drill"] .gw-mobile-menu__link i { display: block; margin-top: 2px; color: var(--gw-muted); font-size: 13px; font-style: normal; line-height: 18px; }
|
|
291
498
|
/* a level's optional parts: a muted heading over a run of links, a 32px icon tile before a link's words */
|
|
292
|
-
.gw-mobile-menu__heading { padding: 16px 0 8px; color: var(--gw-muted); font-size: 12px; font-weight: 500; line-height: 1.
|
|
499
|
+
.gw-mobile-menu__heading { padding: 16px 0 8px; color: var(--gw-muted); font-size: 12px; font-weight: 500; line-height: 1.6; }
|
|
293
500
|
.gw-mobile-menu__icon {
|
|
294
501
|
display: grid;
|
|
295
502
|
place-items: center;
|
|
@@ -301,9 +508,19 @@ html.is-menu-open .gw-header { position: fixed; top: 0; left: 0; right: 0; }
|
|
|
301
508
|
color: var(--gw-muted);
|
|
302
509
|
}
|
|
303
510
|
.gw-mobile-menu__icon svg { width: 16px; height: 16px; }
|
|
511
|
+
/* a row under the pointer or the keyboard (gemboss.ai's, 0.11.0): the soft ground in 8px corners, 2px to the right,
|
|
512
|
+
its icon tile in the accent and 1px up; only the colours ease (0.15s) */
|
|
513
|
+
.gw-mobile-menu[data-gw-menu="drill"] .gw-mobile-menu__list .gw-mobile-menu__link { border-radius: var(--gw-radius-action); transition: background 0.15s; }
|
|
514
|
+
.gw-mobile-menu[data-gw-menu="drill"] .gw-mobile-menu__list .gw-mobile-menu__link:hover { background: var(--gw-bg-soft); transform: translateX(2px); }
|
|
515
|
+
.gw-mobile-menu[data-gw-menu="drill"] .gw-mobile-menu__list .gw-mobile-menu__link:focus-visible { background: var(--gw-bg-soft); }
|
|
516
|
+
.gw-mobile-menu__icon { background: var(--gw-surface); transition: color 0.15s, border-color 0.15s, background 0.15s, transform 0.15s; }
|
|
517
|
+
.gw-mobile-menu__link:is(:hover, :focus-visible) .gw-mobile-menu__icon { border-color: color-mix(in srgb, var(--gw-accent) 32%, var(--gw-line)); background: var(--gw-accent-soft); color: var(--gw-accent-strong); }
|
|
518
|
+
.gw-mobile-menu__link:hover .gw-mobile-menu__icon { transform: translateY(-1px); }
|
|
304
519
|
/* a level's last link, to the section's own page: its row opens the level instead of going there */
|
|
305
|
-
.gw-mobile-menu__all { display: flex; align-items: center;
|
|
306
|
-
.gw-mobile-menu__all
|
|
520
|
+
.gw-mobile-menu__all { display: flex; align-items: center; min-height: 56px; color: var(--gw-accent-strong); font-size: 16px; font-weight: 500; }
|
|
521
|
+
.gw-mobile-menu[data-gw-menu="drill"] .gw-mobile-menu__all { font-size: 16px; }
|
|
522
|
+
/* the arrow follows the words after a space, as gemboss.ai writes "All of Product →" (0.11.0) */
|
|
523
|
+
.gw-mobile-menu__all::after { content: "\00a0\2192"; }
|
|
307
524
|
/* the action bar: what is not a button (Sign in, the language) on the first line, the last one on the right; the
|
|
308
525
|
buttons side by side under it (gw-btn--lg: 48px, as gemboss.ai) */
|
|
309
526
|
.gw-mobile-menu[data-gw-menu="drill"] .gw-mobile-menu__actions {
|
|
@@ -312,7 +529,7 @@ html.is-menu-open .gw-header { position: fixed; top: 0; left: 0; right: 0; }
|
|
|
312
529
|
z-index: 1;
|
|
313
530
|
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
|
314
531
|
align-items: center;
|
|
315
|
-
gap: 8px
|
|
532
|
+
gap: 8px;
|
|
316
533
|
margin-top: auto;
|
|
317
534
|
padding-block: 12px calc(12px + env(safe-area-inset-bottom));
|
|
318
535
|
border-top: 1px solid var(--gw-line);
|
|
@@ -321,7 +538,10 @@ html.is-menu-open .gw-header { position: fixed; top: 0; left: 0; right: 0; }
|
|
|
321
538
|
.gw-mobile-menu[data-gw-menu="drill"] .gw-mobile-menu__actions > .gw-btn { grid-row: 2; }
|
|
322
539
|
.gw-mobile-menu[data-gw-menu="drill"] .gw-mobile-menu__actions > :not(.gw-btn) { grid-row: 1; }
|
|
323
540
|
.gw-mobile-menu[data-gw-menu="drill"] .gw-mobile-menu__actions > :not(.gw-btn):last-child { grid-column: 2; justify-self: end; }
|
|
324
|
-
.gw-mobile-menu[data-gw-menu="drill"] .gw-mobile-menu__actions > .gw-mobile-menu__link { color: var(--gw-ink); font-weight: 500; }
|
|
541
|
+
.gw-mobile-menu[data-gw-menu="drill"] .gw-mobile-menu__actions > .gw-mobile-menu__link { color: var(--gw-ink); font-size: 16px; font-weight: 500; }
|
|
542
|
+
/* a quieter link in the bar, before Sign in (gemboss.ai: What's new on the changelog) */
|
|
543
|
+
.gw-mobile-menu[data-gw-menu="drill"] .gw-mobile-menu__actions > .gw-mobile-menu__link--muted { color: var(--gw-muted); }
|
|
544
|
+
.gw-mobile-menu[data-gw-menu="drill"] .gw-mobile-menu__actions > .gw-btn { padding: 0 16px; font-size: 16px; line-height: 1.6; }
|
|
325
545
|
|
|
326
546
|
/* Wired (.is-drill, set by website.js): a group's row points right and opens its level, which shows alone
|
|
327
547
|
(.is-drilled) under its head: Back on the left, the level's title in the middle. The sheet starts where the header
|
|
@@ -353,7 +573,7 @@ html.is-menu-open .gw-header:has(> .gw-mobile-menu.is-drill) { position: sticky;
|
|
|
353
573
|
background: transparent;
|
|
354
574
|
color: var(--gw-muted);
|
|
355
575
|
font-size: 16px;
|
|
356
|
-
line-height: 1.
|
|
576
|
+
line-height: 1.6;
|
|
357
577
|
}
|
|
358
578
|
.gw-mobile-menu__back:hover { color: var(--gw-ink); }
|
|
359
579
|
.gw-mobile-menu__back::before {
|
|
@@ -365,7 +585,7 @@ html.is-menu-open .gw-header:has(> .gw-mobile-menu.is-drill) { position: sticky;
|
|
|
365
585
|
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 18l-6-6 6-6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
|
|
366
586
|
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 18l-6-6 6-6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
|
|
367
587
|
}
|
|
368
|
-
.gw-mobile-menu__title { color: var(--gw-ink); font-size: 16px; font-weight: 600; letter-spacing: 0; line-height: 1.
|
|
588
|
+
.gw-mobile-menu__title { color: var(--gw-ink); font-size: 16px; font-weight: 600; letter-spacing: 0; line-height: 1.6; text-align: center; }
|
|
369
589
|
/* a level slides in from the right, the top level back in from the left; under reduced motion they just switch */
|
|
370
590
|
@media (prefers-reduced-motion: no-preference) {
|
|
371
591
|
.gw-mobile-menu.is-drilled .gw-mobile-menu__group[open] { animation: gw-drill-in 0.24s var(--gw-ease); }
|
|
@@ -377,7 +597,7 @@ html.is-menu-open .gw-header:has(> .gw-mobile-menu.is-drill) { position: sticky;
|
|
|
377
597
|
/* The language switcher: <div class="gw-lang" data-gw-lang hidden>, a ghost button with the globe and the current
|
|
378
598
|
language's short code, and its list of the other languages, a small popover card (the card radius of the site's
|
|
379
599
|
profile, one hairline, the raised shadow). website.js fills the list from the page's <link rel="alternate" hreflang>
|
|
380
|
-
and takes `hidden` away when there is another language. In the header's actions it shows from
|
|
600
|
+
and takes `hidden` away when there is another language. In the header's actions it shows from 1081px, where the nav
|
|
381
601
|
is; below that a second one sits in the mobile menu's action bar, and its list opens upward. */
|
|
382
602
|
.gw-lang { position: relative; flex: none; }
|
|
383
603
|
.gw-header__actions > .gw-lang { display: none; }
|
|
@@ -434,6 +654,18 @@ html.is-menu-open .gw-header:has(> .gw-mobile-menu.is-drill) { position: sticky;
|
|
|
434
654
|
@media (max-width: 768px), (pointer: coarse) {
|
|
435
655
|
.gw-lang__btn, .gw-lang__link { min-height: var(--gw-tap-min); }
|
|
436
656
|
}
|
|
437
|
-
@media (min-width:
|
|
657
|
+
@media (min-width: 1081px) {
|
|
438
658
|
.gw-header__actions > .gw-lang { display: block; }
|
|
439
659
|
}
|
|
660
|
+
|
|
661
|
+
/* ---- 0.10.0: the theme toggle's two icons ---------------------------------------------------------------------------
|
|
662
|
+
A toggle may hold two icons: .gw-theme-toggle__moon, shown in light, and .gw-theme-toggle__sun, shown in dark, as
|
|
663
|
+
gemboss.ai draws them. The theme in force picks one: data-theme on <html>, else the system's. A toggle with one plain
|
|
664
|
+
<svg> stays as it is. */
|
|
665
|
+
.gw-theme-toggle__sun { display: none; }
|
|
666
|
+
:root[data-theme="dark"] .gw-theme-toggle__sun { display: block; }
|
|
667
|
+
:root[data-theme="dark"] .gw-theme-toggle__moon { display: none; }
|
|
668
|
+
@media (prefers-color-scheme: dark) {
|
|
669
|
+
:root:not([data-theme="light"]) .gw-theme-toggle__sun { display: block; }
|
|
670
|
+
:root:not([data-theme="light"]) .gw-theme-toggle__moon { display: none; }
|
|
671
|
+
}
|