nk_jtb 0.28.1 → 0.28.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/index.html +281 -497
- package/jtb-conversion-notes.md +2 -2
- package/package.json +1 -1
- package/src/base/_auto-spacing.scss +10 -0
- package/src/base/_root.scss +4 -14
- package/src/base/_typography.scss +1 -1
- package/src/components/_button.scss +0 -16
- package/src/maps_and_variables/_colors.scss +0 -4
- package/src/utilities/_backgrounds.scss +0 -14
- package/src/utilities/_border.scss +0 -18
- package/src/utilities/_themes.scss +0 -19
- package/src/utilities/_typography.scss +0 -15
package/index.html
CHANGED
|
@@ -4,572 +4,356 @@
|
|
|
4
4
|
<head>
|
|
5
5
|
<meta charset="UTF-8" />
|
|
6
6
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
7
|
-
<
|
|
7
|
+
<link rel="icon" type="image/svg+xml" href="/images/favicon.svg" />
|
|
8
|
+
<title>NayKel JTB</title>
|
|
8
9
|
</head>
|
|
9
10
|
|
|
10
11
|
<body>
|
|
11
12
|
|
|
12
|
-
<div class="container">
|
|
13
|
-
<div class="flex-1">
|
|
14
|
-
<h2>Broad Aims of the Course</h2>
|
|
15
|
-
<p>The broad aims for this course are:</p>
|
|
16
|
-
<ul>
|
|
17
|
-
<li>Deepen understanding of breast structure and function from embryology through puberty, pregnancy and lactation to support informed, evidence‑based breastfeeding care.</li>
|
|
18
|
-
<li>Review key factors influencing breast growth and development across the lifespan to strengthen clinical assessment and breastfeeding support.</li>
|
|
19
|
-
<li>Explore the endocrine regulation of breast development and lactation to enhance understanding of hormonal influences on breastfeeding physiology.</li>
|
|
20
|
-
</ul>
|
|
21
|
-
</div>
|
|
22
|
-
</div>
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
<div class="container flex gap-3">
|
|
26
|
-
<div class="flex-1">
|
|
27
|
-
<h2 class="my-2">Broad Aims of the Course</h2>
|
|
28
|
-
<p>The broad aims for this course are:</p>
|
|
29
|
-
<ul>
|
|
30
|
-
<li>Deepen understanding of breast structure and function from embryology through puberty, pregnancy and lactation to support informed, evidence‑based breastfeeding care.</li>
|
|
31
|
-
<li>Review key factors influencing breast growth and development across the lifespan to strengthen clinical assessment and breastfeeding support.</li>
|
|
32
|
-
<li>Explore the endocrine regulation of breast development and lactation to enhance understanding of hormonal influences on breastfeeding physiology.</li>
|
|
33
|
-
</ul>
|
|
34
|
-
</div>
|
|
35
|
-
</div>
|
|
36
|
-
|
|
37
|
-
<hr>
|
|
38
|
-
<hr>
|
|
39
|
-
<hr>
|
|
40
|
-
<hr>
|
|
41
|
-
<hr>
|
|
42
|
-
<hr>
|
|
43
|
-
<!-- Price card -->
|
|
44
|
-
<aside class="w-384px">
|
|
45
|
-
<div class="bx rounded-xxl pxy-2">
|
|
46
|
-
<div class="txt-xs tracking-widest uppercase txt-muted">Course fee</div>
|
|
47
|
-
<div class="font-serif txt-3 font-bold lh-none mt-05">
|
|
48
|
-
<sup class="txt-xl">$</sup>110
|
|
49
|
-
<span class="txt-base font-normal txt-muted font-sans">AUD</span>
|
|
50
|
-
</div>
|
|
51
|
-
<div class="txt-sm txt-muted mt-025 mb-1.5">One-time payment · Instant access</div>
|
|
52
|
-
<div wire:key="lw-3804000248-0" wire:snapshot="{"data":{"program":null,"course":[null,{"class":"App\\Models\\Course","key":4,"s":"mdl"}],"isProgram":false,"currentQty":0,"qty":1},"memo":{"id":"DD6tzQ99xuKRAgLie7fu","name":"cart.add-to-cart","path":"courses\/mammary-magnificence-breast-development","method":"GET","release":"a-a-a","children":[],"scripts":[],"assets":[],"errors":[],"locale":"en","islands":[]},"checksum":"829ea9e93d1f8751e07fbb8bd866d8dff86a24c2fd1b7555e7c52430a343755c"}" wire:effects="[]" wire:id="DD6tzQ99xuKRAgLie7fu" wire:name="cart.add-to-cart">
|
|
53
|
-
<!--[if BLOCK]><![endif]--> <button type="button" class="btn primary w-full" wire:click="add" icon="shopping-cart" text="Add Course">
|
|
54
|
-
<!--[if BLOCK]><![endif]--> <svg class="icon order-0" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
|
55
|
-
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 0 0-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 0 0-16.536-1.84M7.5 14.25 5.106 5.272M6 20.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm12.75 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z"></path>
|
|
56
|
-
</svg>
|
|
57
|
-
<!--[if ENDBLOCK]><![endif]-->
|
|
58
|
-
<!--[if BLOCK]><![endif]-->
|
|
59
|
-
Add Course
|
|
60
|
-
<!--[if ENDBLOCK]><![endif]--></button>
|
|
61
|
-
<!--[if ENDBLOCK]><![endif]-->
|
|
62
|
-
</div>
|
|
63
|
-
<hr class="bdr-t bdr-stone-200 mb-1.5">
|
|
64
|
-
<div class="txt-xs tracking-widest uppercase txt-muted mb-1">What's included</div>
|
|
65
|
-
<div class="checklist txt-sm">
|
|
66
|
-
|
|
67
|
-
</div>
|
|
68
|
-
<div class="checklist txt-sm">
|
|
69
|
-
<ul class="txt-sm">
|
|
70
|
-
<li>Flexible online, self-paced delivery</li>
|
|
71
|
-
<li>Downloadable resources included</li>
|
|
72
|
-
<li>Certificate on completion</li>
|
|
73
|
-
</ul>
|
|
74
|
-
</div>
|
|
75
|
-
<div class="checklist txt-sm mt-05">
|
|
76
|
-
<ul class="txt-sm">
|
|
77
|
-
<li>10 Hours of Lactation Education</li>
|
|
78
|
-
</ul>
|
|
79
|
-
</div>
|
|
80
|
-
</div>
|
|
81
|
-
</aside>
|
|
82
|
-
</div>
|
|
83
|
-
<!-- ═══════════════════════════════════════════════════════════════
|
|
84
|
-
EXAMPLE 1: AURORA
|
|
85
|
-
Dark gradient hero with floating blob shapes and swirl decoration
|
|
86
|
-
═══════════════════════════════════════════════════════════════ -->
|
|
87
|
-
|
|
88
|
-
<nav class="navbar bg-slate-900">
|
|
89
|
-
<div class="container">
|
|
90
|
-
<a href="#" class="flex items-center gap-1">
|
|
91
|
-
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" aria-hidden="true">
|
|
92
|
-
<circle cx="14" cy="14" r="14" fill="oklch(60.6% 0.25 292.717deg)" />
|
|
93
|
-
<path d="M8 20 L14 8 L20 20 M10.5 16 H17.5" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" />
|
|
94
|
-
</svg>
|
|
95
|
-
<span class="txt-white font-bold tracking-tight">Luminary</span>
|
|
96
|
-
</a>
|
|
97
|
-
<ul class="menu">
|
|
98
|
-
<li><a href="#" class="txt-gray-400">Features</a></li>
|
|
99
|
-
<li><a href="#" class="txt-gray-400">Pricing</a></li>
|
|
100
|
-
<li><a href="#" class="txt-gray-400">Docs</a></li>
|
|
101
|
-
<li><a href="#" class="txt-gray-400">Blog</a></li>
|
|
102
|
-
</ul>
|
|
103
|
-
<div class="flex gap-1">
|
|
104
|
-
<button class="btn sm">Sign in</button>
|
|
105
|
-
<button class="btn sm primary">Get Started</button>
|
|
106
|
-
</div>
|
|
107
|
-
</div>
|
|
108
|
-
</nav>
|
|
109
|
-
|
|
110
|
-
<div class="ex-hero bg-linear-to-br from-violet-950 to-indigo-900 relative overflow-hidden flex flex-col items-center justify-center pxy-4">
|
|
111
|
-
|
|
112
|
-
<!-- Blob shapes — organic border-radius via local helper -->
|
|
113
|
-
<div class="blob shape-tl absolute wh-30 bg-violet-500 opacity-20"></div>
|
|
114
|
-
<div class="blob-2 shape-br absolute wh-24 bg-indigo-400 opacity-20"></div>
|
|
115
|
-
<div class="rounded-full shape-mid-r absolute wh-16 bg-fuchsia-500 opacity-10"></div>
|
|
116
|
-
<div class="rounded-full shape-mid-l absolute wh-10 bg-sky-400 opacity-10"></div>
|
|
117
|
-
|
|
118
|
-
<!-- SVG swirl -->
|
|
119
|
-
<svg class="swirl-deco absolute opacity-10" width="600" height="600" viewBox="0 0 600 600" fill="none" aria-hidden="true">
|
|
120
|
-
<path d="M300 300 C300 200, 450 200, 450 300 C450 400, 300 400, 300 300 C300 150, 500 150, 500 300 C500 450, 250 500, 200 350 C150 200, 350 100, 450 200" stroke="white" stroke-width="1.5" fill="none" />
|
|
121
|
-
<path d="M300 300 C250 250, 200 300, 200 350 C200 420, 280 450, 350 420 C420 390, 460 320, 430 250 C400 180, 320 160, 260 200 C180 250, 160 360, 220 420 C280 480, 400 460, 450 380" stroke="white" stroke-width="1" fill="none" opacity="0.6" />
|
|
122
|
-
</svg>
|
|
123
|
-
|
|
124
|
-
<!-- Content -->
|
|
125
|
-
<div class="relative tac ex-hero-content">
|
|
126
|
-
<span class="txt-violet-300 txt-sm font-semibold tracking-widest uppercase">Platform · 2025</span>
|
|
127
|
-
<h1 class="txt-white font-black lh-tight txt-4">Build beyond<br>ordinary limits</h1>
|
|
128
|
-
<p class="txt-indigo-200 lead">The design framework that lets you move fast without breaking things. Clean utilities, beautiful defaults, zero compromise.</p>
|
|
129
|
-
<div class="flex justify-center gap-1">
|
|
130
|
-
<button class="btn lg primary">Start for free</button>
|
|
131
|
-
<button class="btn lg">See the docs</button>
|
|
132
|
-
</div>
|
|
133
|
-
</div>
|
|
134
|
-
|
|
135
|
-
<!-- Bottom fade -->
|
|
136
|
-
<div class="absolute bottom-0 left-0 w-full ex-fade-bottom"></div>
|
|
137
|
-
</div>
|
|
138
|
-
|
|
139
|
-
<div class="ex-spacer bg-slate-900"></div>
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
<!-- ═══════════════════════════════════════════════════════════════
|
|
143
|
-
EXAMPLE 2: CLARITY
|
|
144
|
-
Light split hero with geometric shapes on the right
|
|
145
|
-
═══════════════════════════════════════════════════════════════ -->
|
|
146
|
-
|
|
147
|
-
<nav class="navbar bg-white shadow-sm">
|
|
148
|
-
<div class="container">
|
|
149
|
-
<a href="#" class="flex items-center gap-1">
|
|
150
|
-
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true">
|
|
151
|
-
<rect x="2" y="2" width="9" height="9" rx="2" fill="oklch(62.3% 0.214 259.815deg)" />
|
|
152
|
-
<rect x="13" y="2" width="9" height="9" rx="2" fill="oklch(70.2% 0.183 293.541deg)" opacity="0.6" />
|
|
153
|
-
<rect x="2" y="13" width="9" height="9" rx="2" fill="oklch(70.2% 0.183 293.541deg)" opacity="0.6" />
|
|
154
|
-
<rect x="13" y="13" width="9" height="9" rx="2" fill="oklch(62.3% 0.214 259.815deg)" />
|
|
155
|
-
</svg>
|
|
156
|
-
<span class="txt-slate-900 font-bold">Nexus</span>
|
|
157
|
-
</a>
|
|
158
|
-
<ul class="menu">
|
|
159
|
-
<li><a href="#" class="txt-gray-600">Product</a></li>
|
|
160
|
-
<li><a href="#" class="txt-gray-600">Solutions</a></li>
|
|
161
|
-
<li><a href="#" class="txt-gray-600">Enterprise</a></li>
|
|
162
|
-
<li><a href="#" class="txt-gray-600">Pricing</a></li>
|
|
163
|
-
</ul>
|
|
164
|
-
<div class="flex gap-1 items-center">
|
|
165
|
-
<a href="#" class="txt-gray-600 txt-sm">Log in</a>
|
|
166
|
-
<button class="btn sm primary">Book a demo</button>
|
|
167
|
-
</div>
|
|
168
|
-
</div>
|
|
169
|
-
</nav>
|
|
170
|
-
|
|
171
|
-
<div class="ex-hero bg-gray-50 relative overflow-hidden flex items-center">
|
|
172
|
-
<div class="container">
|
|
173
|
-
<div class="grid cols-2 items-center ex-hero-grid-gap">
|
|
174
|
-
|
|
175
|
-
<!-- Left: content -->
|
|
176
|
-
<div>
|
|
177
|
-
<div class="flex items-center gap-05 ex-badge-row">
|
|
178
|
-
<span class="badge primary">New</span>
|
|
179
|
-
<span class="txt-sm txt-gray-600">v3.0 is here — <a href="#" class="txt-primary">read the changelog</a></span>
|
|
180
|
-
</div>
|
|
181
|
-
<h1 class="txt-slate-900 font-black lh-tight txt-3">The platform teams<br>actually love using</h1>
|
|
182
|
-
<p class="lead txt-gray-600">Ship faster with infrastructure that gets out of your way. Built for teams who care about developer experience.</p>
|
|
183
|
-
<div class="flex gap-1 items-center">
|
|
184
|
-
<button class="btn lg primary">Get started free</button>
|
|
185
|
-
<a href="#" class="flex items-center gap-05 txt-gray-600 txt-sm">
|
|
186
|
-
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
|
|
187
|
-
<circle cx="8" cy="8" r="7.5" stroke="currentColor" stroke-width="1" />
|
|
188
|
-
<path d="M6 5.5 L10.5 8 L6 10.5Z" fill="currentColor" />
|
|
189
|
-
</svg>
|
|
190
|
-
Watch 2 min demo
|
|
191
|
-
</a>
|
|
192
|
-
</div>
|
|
193
|
-
<p class="txt-xs txt-muted">No credit card required · 14-day free trial · Cancel anytime</p>
|
|
194
|
-
</div>
|
|
195
|
-
|
|
196
|
-
<!-- Right: geometric decoration -->
|
|
197
|
-
<div class="relative ex-shapes-panel">
|
|
198
|
-
<!-- Background ring -->
|
|
199
|
-
<div class="rounded-full absolute geo-ring bg-blue-50 bdr bdr-blue-200"></div>
|
|
200
|
-
<div class="rounded-full absolute geo-ring-inner bdr-2 bdr-blue-100" style="border-style: dashed;"></div>
|
|
201
|
-
|
|
202
|
-
<!-- Floating cards -->
|
|
203
|
-
<div class="bx shadow-lg absolute geo-card-1 ex-geo-card">
|
|
204
|
-
<div class="flex items-center gap-05">
|
|
205
|
-
<div class="rounded-full wh-2 bg-green-500"></div>
|
|
206
|
-
<span class="txt-sm font-semibold txt-slate-900">Deploy successful</span>
|
|
207
|
-
</div>
|
|
208
|
-
<p class="txt-xs txt-muted">production · 2s ago</p>
|
|
209
|
-
</div>
|
|
210
|
-
|
|
211
|
-
<div class="bx shadow-lg absolute geo-card-2 ex-geo-card">
|
|
212
|
-
<span class="txt-xs txt-muted uppercase tracking-wider font-semibold">Uptime</span>
|
|
213
|
-
<div class="flex items-center gap-05">
|
|
214
|
-
<span class="txt-2 font-black txt-slate-900">99.9%</span>
|
|
215
|
-
</div>
|
|
216
|
-
</div>
|
|
217
|
-
|
|
218
|
-
<div class="bx shadow-lg absolute geo-card-3 ex-geo-card">
|
|
219
|
-
<span class="txt-xs txt-muted uppercase tracking-wider font-semibold">Team members</span>
|
|
220
|
-
<div class="flex items-center">
|
|
221
|
-
<div class="rounded-full wh-2 bg-violet-400 bdr-2 bdr-white" style="margin-inline-start: -0.25rem;"></div>
|
|
222
|
-
<div class="rounded-full wh-2 bg-sky-400 bdr-2 bdr-white" style="margin-inline-start: -0.25rem;"></div>
|
|
223
|
-
<div class="rounded-full wh-2 bg-emerald-400 bdr-2 bdr-white" style="margin-inline-start: -0.25rem;"></div>
|
|
224
|
-
<div class="rounded-full wh-2 bg-rose-400 bdr-2 bdr-white" style="margin-inline-start: -0.25rem;"></div>
|
|
225
|
-
<span class="txt-xs txt-muted mx-0.5">+14 more</span>
|
|
226
|
-
</div>
|
|
227
|
-
</div>
|
|
228
|
-
|
|
229
|
-
<!-- Central shape -->
|
|
230
|
-
<div class="geo-center rounded-xl bg-linear-to-br from-blue-500 to-violet-600 shadow-xl flex flex-col items-center justify-center absolute tac pxy-3">
|
|
231
|
-
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" aria-hidden="true">
|
|
232
|
-
<path d="M24 4 L44 24 L24 44 L4 24Z" fill="white" opacity="0.2" />
|
|
233
|
-
<path d="M24 12 L36 24 L24 36 L12 24Z" fill="white" opacity="0.4" />
|
|
234
|
-
<circle cx="24" cy="24" r="6" fill="white" />
|
|
235
|
-
</svg>
|
|
236
|
-
<span class="txt-white font-bold txt-sm">Nexus Core</span>
|
|
237
|
-
</div>
|
|
238
|
-
|
|
239
|
-
<!-- Swirl SVG -->
|
|
240
|
-
<svg class="geo-swirl absolute opacity-20" width="300" height="300" viewBox="0 0 300 300" fill="none" aria-hidden="true">
|
|
241
|
-
<path d="M150 150 Q200 100 250 150 Q200 200 150 150 Q100 100 50 150 Q100 200 150 150" stroke="oklch(62.3% 0.214 259.815deg)" stroke-width="2" fill="none" />
|
|
242
|
-
<path d="M150 150 Q220 80 290 150 Q220 220 150 150 Q80 80 10 150 Q80 220 150 150" stroke="oklch(62.3% 0.214 259.815deg)" stroke-width="1.5" fill="none" opacity="0.6" />
|
|
243
|
-
<path d="M150 150 Q230 60 310 150" stroke="oklch(70.2% 0.183 293.541deg)" stroke-width="1" fill="none" opacity="0.5" />
|
|
244
|
-
</svg>
|
|
245
|
-
</div>
|
|
246
|
-
</div>
|
|
247
|
-
</div>
|
|
248
|
-
|
|
249
|
-
<!-- Bottom wave -->
|
|
250
|
-
<svg class="wave-bottom" viewBox="0 0 1440 80" fill="none" preserveAspectRatio="none" aria-hidden="true">
|
|
251
|
-
<path d="M0 80 L0 40 Q360 0 720 40 Q1080 80 1440 40 L1440 80Z" fill="white" />
|
|
252
|
-
</svg>
|
|
253
|
-
</div>
|
|
254
|
-
|
|
255
|
-
<div class="ex-spacer bg-white"></div>
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
<!-- ═══════════════════════════════════════════════════════════════
|
|
259
|
-
EXAMPLE 3: DUSK
|
|
260
|
-
Cinematic dark image hero with frosted glass nav and wave divider
|
|
261
|
-
═══════════════════════════════════════════════════════════════ -->
|
|
262
|
-
|
|
263
|
-
<div class="relative">
|
|
264
|
-
<!-- Nav sits inside hero to overlay it -->
|
|
265
|
-
<nav class="navbar-glass navbar absolute top-0 left-0 w-full z-above">
|
|
266
|
-
<div class="container">
|
|
267
|
-
<a href="#" class="flex items-center gap-1">
|
|
268
|
-
<svg width="26" height="26" viewBox="0 0 26 26" fill="none" aria-hidden="true">
|
|
269
|
-
<circle cx="13" cy="13" r="13" fill="white" opacity="0.15" />
|
|
270
|
-
<path d="M7 13 Q13 5 19 13 Q13 21 7 13Z" fill="white" opacity="0.8" />
|
|
271
|
-
<circle cx="13" cy="13" r="3" fill="white" />
|
|
272
|
-
</svg>
|
|
273
|
-
<span class="txt-white font-bold tracking-tight">Arcadia</span>
|
|
274
|
-
</a>
|
|
275
|
-
<ul class="menu">
|
|
276
|
-
<li><a href="#" class="txt-white opacity-80">Work</a></li>
|
|
277
|
-
<li><a href="#" class="txt-white opacity-80">Studio</a></li>
|
|
278
|
-
<li><a href="#" class="txt-white opacity-80">Journal</a></li>
|
|
279
|
-
<li><a href="#" class="txt-white opacity-80">Contact</a></li>
|
|
280
|
-
</ul>
|
|
281
|
-
<button class="btn sm" style="background: rgb(255 255 255 / 15%); border-color: rgb(255 255 255 / 30%); color: white;">
|
|
282
|
-
Start a project
|
|
283
|
-
</button>
|
|
284
|
-
</div>
|
|
285
|
-
</nav>
|
|
286
|
-
|
|
287
|
-
<!-- Hero — gradient stands in for background image -->
|
|
288
|
-
<div class="ex-hero-dusk bg-linear-to-br from-slate-900 to-indigo-950 relative overflow-hidden">
|
|
289
|
-
|
|
290
|
-
<!-- "Photo" texture shapes -->
|
|
291
|
-
<div class="absolute inset-0 overflow-hidden">
|
|
292
|
-
<div class="rounded-full absolute photo-blob-1 bg-violet-800 opacity-30"></div>
|
|
293
|
-
<div class="rounded-full absolute photo-blob-2 bg-blue-900 opacity-40"></div>
|
|
294
|
-
<div class="blob absolute photo-blob-3 bg-indigo-800 opacity-20"></div>
|
|
295
|
-
</div>
|
|
296
|
-
|
|
297
|
-
<!-- Light streaks SVG -->
|
|
298
|
-
<svg class="absolute inset-0 w-full h-full opacity-10" viewBox="0 0 1200 700" preserveAspectRatio="xMidYMid slice" fill="none" aria-hidden="true">
|
|
299
|
-
<line x1="0" y1="700" x2="600" y2="0" stroke="white" stroke-width="1.5" />
|
|
300
|
-
<line x1="200" y1="700" x2="800" y2="0" stroke="white" stroke-width="0.75" />
|
|
301
|
-
<line x1="600" y1="700" x2="1100" y2="0" stroke="white" stroke-width="1" />
|
|
302
|
-
<line x1="900" y1="700" x2="1400" y2="100" stroke="white" stroke-width="0.5" />
|
|
303
|
-
<ellipse cx="700" cy="200" rx="300" ry="150" stroke="white" stroke-width="0.5" />
|
|
304
|
-
</svg>
|
|
305
|
-
|
|
306
|
-
<!-- Swirl overlay -->
|
|
307
|
-
<svg class="absolute swirl-dusk opacity-10" width="800" height="800" viewBox="0 0 800 800" fill="none" aria-hidden="true">
|
|
308
|
-
<path d="M400 400 C400 200, 650 200, 650 400 C650 600, 400 600, 400 400 C400 100, 750 100, 750 400 C750 700, 300 750, 200 500 C100 250, 450 100, 600 250" stroke="white" stroke-width="2" fill="none" />
|
|
309
|
-
<path d="M400 400 C350 350, 250 400, 250 500 C250 620, 370 660, 500 620 C630 580, 680 470, 640 350 C600 230, 470 200, 370 270 C250 360, 220 520, 320 620" stroke="white" stroke-width="1.2" fill="none" opacity="0.5" />
|
|
310
|
-
<circle cx="400" cy="400" r="180" stroke="white" stroke-width="0.5" opacity="0.3" />
|
|
311
|
-
<circle cx="400" cy="400" r="280" stroke="white" stroke-width="0.5" opacity="0.2" />
|
|
312
|
-
</svg>
|
|
313
|
-
|
|
314
|
-
<!-- Content -->
|
|
315
|
-
<div class="container ex-dusk-content relative">
|
|
316
|
-
<div class="ex-dusk-text">
|
|
317
|
-
<span class="txt-indigo-300 txt-sm font-semibold tracking-widest uppercase">Creative Studio</span>
|
|
318
|
-
<h1 class="txt-white font-black lh-tight txt-4">We craft digital<br>experiences that<br><em class="txt-violet-300">endure.</em></h1>
|
|
319
|
-
<p class="txt-indigo-200 lead">Award-winning design and engineering for brands that refuse to be ordinary.</p>
|
|
320
|
-
<div class="flex gap-1">
|
|
321
|
-
<button class="btn lg primary">View our work</button>
|
|
322
|
-
<button class="btn lg" style="background: rgb(255 255 255 / 10%); border-color: rgb(255 255 255 / 20%); color: white;">
|
|
323
|
-
Our process
|
|
324
|
-
</button>
|
|
325
|
-
</div>
|
|
326
|
-
</div>
|
|
327
|
-
</div>
|
|
328
|
-
|
|
329
|
-
<!-- Wave divider -->
|
|
330
|
-
<svg class="wave-bottom" viewBox="0 0 1440 100" fill="none" preserveAspectRatio="none" aria-hidden="true">
|
|
331
|
-
<path d="M0 100 L0 60 Q200 20 400 50 Q600 80 800 40 Q1000 0 1200 30 Q1320 50 1440 20 L1440 100Z" fill="white" opacity="0.05" />
|
|
332
|
-
<path d="M0 100 L0 70 Q300 30 600 60 Q900 90 1200 50 Q1320 35 1440 40 L1440 100Z" fill="white" opacity="0.05" />
|
|
333
|
-
<path d="M0 100 L0 85 Q360 55 720 75 Q1080 95 1440 65 L1440 100Z" fill="rgb(15 23 42)" />
|
|
334
|
-
</svg>
|
|
335
|
-
</div>
|
|
336
|
-
</div>
|
|
337
|
-
|
|
338
|
-
<div class="ex-spacer bg-slate-950"></div>
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
<script type="module" src="/main.js"></script>
|
|
342
|
-
|
|
343
13
|
<style>
|
|
344
|
-
/*
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
================================================================
|
|
348
|
-
|
|
349
|
-
Gaps identified (candidates for JTB additions):
|
|
350
|
-
|
|
351
|
-
1. min-h-{vh-fraction} — only min-h-screen (100vh) in JTB.
|
|
352
|
-
Useful: min-h-80vh, min-h-85vh for hero sections that
|
|
353
|
-
shouldn't consume the full viewport.
|
|
354
|
-
|
|
355
|
-
2. backdrop-filter / blur — utilities commented out in JTB.
|
|
356
|
-
Critical for frosted-glass navbars. Currently relies on
|
|
357
|
-
inline or local CSS.
|
|
14
|
+
/* ============================================================
|
|
15
|
+
Local helpers — JTB gaps documented in jtb-conversion-notes.md
|
|
16
|
+
============================================================ */
|
|
358
17
|
|
|
359
|
-
3. Negative positioning (-top-{n}, -left-{n}) — not generated.
|
|
360
|
-
Needed for off-canvas decorative shapes.
|
|
361
18
|
|
|
362
|
-
4. Organic blob border-radius — JTB has named/scale values but
|
|
363
|
-
no way to express e.g. "60% 40% 30% 70% / 60% 30% 70% 40%".
|
|
364
|
-
Could be solved with a small set of named blob variants.
|
|
365
19
|
|
|
366
|
-
|
|
367
|
-
|
|
20
|
+
/* Bar equalizer — @keyframes grow not in JTB */
|
|
21
|
+
@keyframes grow {
|
|
368
22
|
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
23
|
+
0%,
|
|
24
|
+
100% {
|
|
25
|
+
transform: scaleY(0.4);
|
|
26
|
+
}
|
|
373
27
|
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
*/
|
|
378
|
-
|
|
379
|
-
/* --- Hero sizing ------------------------------------------ */
|
|
380
|
-
.ex-hero {
|
|
381
|
-
min-height: 88vh;
|
|
382
|
-
padding-block: 6rem 4rem;
|
|
28
|
+
50% {
|
|
29
|
+
transform: scaleY(1);
|
|
30
|
+
}
|
|
383
31
|
}
|
|
384
32
|
|
|
385
|
-
.
|
|
386
|
-
|
|
387
|
-
padding-block: 6rem 5rem;
|
|
33
|
+
.bar-row {
|
|
34
|
+
align-items: flex-end;
|
|
388
35
|
}
|
|
389
36
|
|
|
390
|
-
.
|
|
391
|
-
|
|
37
|
+
.bar {
|
|
38
|
+
width: 4px;
|
|
39
|
+
animation: grow 0.9s ease-in-out infinite;
|
|
392
40
|
}
|
|
393
41
|
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
max-width: 44rem;
|
|
42
|
+
.bar:nth-child(2) {
|
|
43
|
+
animation-delay: 0.15s;
|
|
397
44
|
}
|
|
398
45
|
|
|
399
|
-
.
|
|
400
|
-
|
|
46
|
+
.bar:nth-child(3) {
|
|
47
|
+
animation-delay: 0.30s;
|
|
401
48
|
}
|
|
402
49
|
|
|
403
|
-
.
|
|
404
|
-
|
|
50
|
+
.bar:nth-child(4) {
|
|
51
|
+
animation-delay: 0.45s;
|
|
405
52
|
}
|
|
406
53
|
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
height: 6rem;
|
|
410
|
-
background: linear-gradient(to bottom, transparent, rgb(15 10 40 / 60%));
|
|
54
|
+
.bar:nth-child(5) {
|
|
55
|
+
animation-delay: 0.60s;
|
|
411
56
|
}
|
|
412
57
|
|
|
413
|
-
/*
|
|
414
|
-
.
|
|
415
|
-
|
|
58
|
+
/* Pulse / bounce dot stagger — nth-child animation delays */
|
|
59
|
+
.dot-pulse:nth-child(2) {
|
|
60
|
+
animation-delay: 0.20s;
|
|
416
61
|
}
|
|
417
62
|
|
|
418
|
-
.
|
|
419
|
-
|
|
63
|
+
.dot-pulse:nth-child(3) {
|
|
64
|
+
animation-delay: 0.40s;
|
|
420
65
|
}
|
|
421
66
|
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
top: -8rem;
|
|
425
|
-
inset-inline-start: -8rem;
|
|
67
|
+
.dot-bounce:nth-child(2) {
|
|
68
|
+
animation-delay: 0.15s;
|
|
426
69
|
}
|
|
427
70
|
|
|
428
|
-
.
|
|
429
|
-
|
|
430
|
-
inset-inline-end: -6rem;
|
|
71
|
+
.dot-bounce:nth-child(3) {
|
|
72
|
+
animation-delay: 0.30s;
|
|
431
73
|
}
|
|
432
74
|
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
75
|
+
/* Ripple — @keyframes ripple differs from animate-ping (starts from scale 0) */
|
|
76
|
+
@keyframes ripple {
|
|
77
|
+
0% {
|
|
78
|
+
transform: scale(0);
|
|
79
|
+
opacity: 1;
|
|
80
|
+
}
|
|
437
81
|
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
82
|
+
100% {
|
|
83
|
+
transform: scale(2.5);
|
|
84
|
+
opacity: 0;
|
|
85
|
+
}
|
|
441
86
|
}
|
|
442
87
|
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
top: 50%;
|
|
446
|
-
left: 50%;
|
|
447
|
-
transform: translate(-50%, -50%);
|
|
448
|
-
pointer-events: none;
|
|
88
|
+
.ripple {
|
|
89
|
+
animation: ripple 1.6s ease-out infinite;
|
|
449
90
|
}
|
|
450
91
|
|
|
451
|
-
.
|
|
452
|
-
|
|
453
|
-
right: -10%;
|
|
454
|
-
transform: translateY(-50%);
|
|
455
|
-
pointer-events: none;
|
|
92
|
+
.ripple:nth-child(2) {
|
|
93
|
+
animation-delay: 0.8s;
|
|
456
94
|
}
|
|
457
95
|
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
gap: 4rem;
|
|
461
|
-
min-height: 85vh;
|
|
462
|
-
padding-block: 6rem 3rem;
|
|
96
|
+
.ripple-core {
|
|
97
|
+
inset: 30%;
|
|
463
98
|
}
|
|
464
99
|
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
100
|
+
/* Skeleton — @keyframes skeleton not in JTB */
|
|
101
|
+
@keyframes skeleton {
|
|
102
|
+
0% {
|
|
103
|
+
background-position: 200% 0;
|
|
104
|
+
}
|
|
468
105
|
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
top: 50%;
|
|
473
|
-
left: 50%;
|
|
474
|
-
transform: translate(-50%, -50%);
|
|
106
|
+
100% {
|
|
107
|
+
background-position: -200% 0;
|
|
108
|
+
}
|
|
475
109
|
}
|
|
476
110
|
|
|
477
|
-
.
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
left: 50%;
|
|
482
|
-
transform: translate(-50%, -50%);
|
|
111
|
+
.skeleton {
|
|
112
|
+
background: linear-gradient(90deg, oklch(93% 0 0) 25%, oklch(88% 0 0) 50%, oklch(93% 0 0) 75%);
|
|
113
|
+
background-size: 200% 100%;
|
|
114
|
+
animation: skeleton 1.6s linear infinite;
|
|
483
115
|
}
|
|
484
116
|
|
|
485
|
-
.
|
|
486
|
-
width:
|
|
487
|
-
height: 10rem;
|
|
488
|
-
top: 50%;
|
|
489
|
-
left: 50%;
|
|
490
|
-
transform: translate(-50%, -50%);
|
|
117
|
+
.skel-w-55 {
|
|
118
|
+
width: 55%;
|
|
491
119
|
}
|
|
492
120
|
|
|
493
|
-
.
|
|
494
|
-
|
|
121
|
+
.skel-w-65 {
|
|
122
|
+
width: 65%;
|
|
495
123
|
}
|
|
496
124
|
|
|
497
|
-
.
|
|
498
|
-
|
|
499
|
-
left: -2rem;
|
|
125
|
+
.skel-w-80 {
|
|
126
|
+
width: 80%;
|
|
500
127
|
}
|
|
501
128
|
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
129
|
+
/* Progress — @keyframes progress-indeterminate not in JTB */
|
|
130
|
+
@keyframes progress-indeterminate {
|
|
131
|
+
0% {
|
|
132
|
+
left: -40%;
|
|
133
|
+
width: 40%;
|
|
134
|
+
}
|
|
506
135
|
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
136
|
+
100% {
|
|
137
|
+
left: 100%;
|
|
138
|
+
width: 40%;
|
|
139
|
+
}
|
|
510
140
|
}
|
|
511
141
|
|
|
512
|
-
.
|
|
513
|
-
|
|
514
|
-
left: 50%;
|
|
515
|
-
transform: translate(-50%, -50%);
|
|
516
|
-
pointer-events: none;
|
|
142
|
+
.progress-track {
|
|
143
|
+
height: 4px;
|
|
517
144
|
}
|
|
518
145
|
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
height:
|
|
523
|
-
|
|
524
|
-
|
|
146
|
+
.progress-fill {
|
|
147
|
+
position: absolute;
|
|
148
|
+
inset-block-start: 0;
|
|
149
|
+
height: 100%;
|
|
150
|
+
border-radius: 2px;
|
|
151
|
+
animation: progress-indeterminate 1.4s ease-in-out infinite;
|
|
525
152
|
}
|
|
526
153
|
|
|
527
|
-
.
|
|
528
|
-
width:
|
|
529
|
-
height: 30rem;
|
|
530
|
-
bottom: -5rem;
|
|
531
|
-
left: -5rem;
|
|
154
|
+
.progress-fill-65 {
|
|
155
|
+
width: 65%;
|
|
532
156
|
}
|
|
533
157
|
|
|
534
|
-
.photo-blob-3 {
|
|
535
|
-
width: 20rem;
|
|
536
|
-
height: 20rem;
|
|
537
|
-
top: 30%;
|
|
538
|
-
right: 20%;
|
|
539
|
-
}
|
|
540
158
|
|
|
541
|
-
/*
|
|
542
|
-
.
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
159
|
+
/* Icon-only button — btn has no square/icon variant */
|
|
160
|
+
.btn-icon {
|
|
161
|
+
min-width: 0;
|
|
162
|
+
width: 2.25rem;
|
|
163
|
+
height: 2.25rem;
|
|
164
|
+
padding: 0;
|
|
547
165
|
}
|
|
548
166
|
|
|
549
|
-
/*
|
|
550
|
-
|
|
551
|
-
|
|
167
|
+
/* Skeleton avatar — flex-shrink: 0 not available as JTB utility */
|
|
168
|
+
.skel-avatar {
|
|
169
|
+
flex-shrink: 0;
|
|
552
170
|
}
|
|
171
|
+
</style>
|
|
553
172
|
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
173
|
+
<div class="py-1.5 container-md">
|
|
174
|
+
<style>
|
|
175
|
+
|
|
176
|
+
/*SVG arc — @keyframes dash not in JTB animation utilities*/
|
|
177
|
+
@keyframes dash {
|
|
178
|
+
0% {
|
|
179
|
+
stroke-dasharray: 1, 150;
|
|
180
|
+
stroke-dashoffset: 0;
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
50% {
|
|
184
|
+
stroke-dasharray: 90, 150;
|
|
185
|
+
stroke-dashoffset: -35;
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
100% {
|
|
189
|
+
stroke-dasharray: 90, 150;
|
|
190
|
+
stroke-dashoffset: -124;
|
|
191
|
+
}
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
.arc circle {
|
|
195
|
+
fill: none;
|
|
196
|
+
stroke-width: 3;
|
|
197
|
+
stroke-linecap: round;
|
|
198
|
+
animation: dash 1.4s ease-in-out infinite;
|
|
199
|
+
}
|
|
200
|
+
</style>
|
|
201
|
+
|
|
202
|
+
<div class="mb-2.5">
|
|
203
|
+
<h2>SVG arc spinner</h2>
|
|
204
|
+
<div class="bx flex-vac flex-wrap gap-1.5">
|
|
205
|
+
<div class="flex-col flex-vac gap-05">
|
|
206
|
+
<svg class="animate-spin arc wh-2.5 txt-blue-500" viewBox="0 0 36 36">
|
|
207
|
+
<circle cx="18" cy="18" r="14" stroke="currentColor" />
|
|
208
|
+
</svg>
|
|
209
|
+
<span class="txt-xs txt-muted">smooth arc</span>
|
|
210
|
+
</div>
|
|
211
|
+
<div class="flex-col flex-vac gap-05">
|
|
212
|
+
<svg class="animate-spin arc wh-3 txt-emerald-500" viewBox="0 0 48 48">
|
|
213
|
+
<circle cx="24" cy="24" r="18" stroke="currentColor" />
|
|
214
|
+
</svg>
|
|
215
|
+
<span class="txt-xs txt-muted">teal / lg</span>
|
|
216
|
+
</div>
|
|
217
|
+
</div>
|
|
218
|
+
</div>
|
|
219
|
+
|
|
220
|
+
<div class="mb-2.5">
|
|
221
|
+
<h2>Dot indicators</h2>
|
|
222
|
+
<div class="bx flex-vac flex-wrap gap-1.5">
|
|
223
|
+
<div class="flex-col flex-vac gap-05">
|
|
224
|
+
<div class="flex-vac gap-025">
|
|
225
|
+
<div class="wh-05 rounded-full bg-gray-400 animate-pulse dot-pulse"></div>
|
|
226
|
+
<div class="wh-05 rounded-full bg-gray-400 animate-pulse dot-pulse"></div>
|
|
227
|
+
<div class="wh-05 rounded-full bg-gray-400 animate-pulse dot-pulse"></div>
|
|
228
|
+
</div>
|
|
229
|
+
<span class="txt-xs txt-muted">pulse</span>
|
|
230
|
+
</div>
|
|
231
|
+
<div class="flex-col flex-vac gap-05">
|
|
232
|
+
<div class="flex-vac gap-025">
|
|
233
|
+
<div class="wh-05 rounded-full bg-blue-500 animate-pulse dot-pulse"></div>
|
|
234
|
+
<div class="wh-05 rounded-full bg-violet-500 animate-pulse dot-pulse"></div>
|
|
235
|
+
<div class="wh-05 rounded-full bg-emerald-500 animate-pulse dot-pulse"></div>
|
|
236
|
+
</div>
|
|
237
|
+
<span class="txt-xs txt-muted">multicolour</span>
|
|
238
|
+
</div>
|
|
239
|
+
<div class="flex-col flex-vac gap-05">
|
|
240
|
+
<div class="flex-vac gap-025">
|
|
241
|
+
<div class="wh-05 rounded-full bg-blue-500 animate-bounce dot-bounce"></div>
|
|
242
|
+
<div class="wh-05 rounded-full bg-blue-500 animate-bounce dot-bounce"></div>
|
|
243
|
+
<div class="wh-05 rounded-full bg-blue-500 animate-bounce dot-bounce"></div>
|
|
244
|
+
</div>
|
|
245
|
+
<span class="txt-xs txt-muted">bounce</span>
|
|
246
|
+
</div>
|
|
247
|
+
</div>
|
|
248
|
+
</div>
|
|
562
249
|
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
gap
|
|
566
|
-
|
|
250
|
+
<div class="mb-2.5">
|
|
251
|
+
<h2>Bar equaliser</h2>
|
|
252
|
+
<div class="bx flex-vac flex-wrap gap-1.5">
|
|
253
|
+
<div class="flex-col flex-vac gap-05">
|
|
254
|
+
<div class="flex bar-row gap-025">
|
|
255
|
+
<div class="bar h-1.25 rounded-sm bg-blue-500"></div>
|
|
256
|
+
<div class="bar h-1.25 rounded-sm bg-blue-500"></div>
|
|
257
|
+
<div class="bar h-1.25 rounded-sm bg-blue-500"></div>
|
|
258
|
+
<div class="bar h-1.25 rounded-sm bg-blue-500"></div>
|
|
259
|
+
<div class="bar h-1.25 rounded-sm bg-blue-500"></div>
|
|
260
|
+
</div>
|
|
261
|
+
<span class="txt-xs txt-muted">bars</span>
|
|
262
|
+
</div>
|
|
263
|
+
<div class="flex-col flex-vac gap-05">
|
|
264
|
+
<div class="flex bar-row gap-025">
|
|
265
|
+
<div class="bar h-1.25 rounded-sm bg-violet-500"></div>
|
|
266
|
+
<div class="bar h-1.25 rounded-sm bg-violet-500"></div>
|
|
267
|
+
<div class="bar h-1.25 rounded-sm bg-violet-500"></div>
|
|
268
|
+
<div class="bar h-1.25 rounded-sm bg-violet-500"></div>
|
|
269
|
+
<div class="bar h-1.25 rounded-sm bg-violet-500"></div>
|
|
270
|
+
</div>
|
|
271
|
+
<span class="txt-xs txt-muted">purple</span>
|
|
272
|
+
</div>
|
|
273
|
+
</div>
|
|
274
|
+
</div>
|
|
567
275
|
|
|
568
|
-
.
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
276
|
+
<div class="mb-2.5">
|
|
277
|
+
<h2>Ripple</h2>
|
|
278
|
+
<div class="bx flex-vac flex-wrap gap-1.5">
|
|
279
|
+
<div class="flex-col flex-vac gap-05">
|
|
280
|
+
<div class="relative wh-2.5">
|
|
281
|
+
<div class="absolute inset-0 rounded-full bg-blue-400 ripple"></div>
|
|
282
|
+
<div class="absolute inset-0 rounded-full bg-blue-400 ripple"></div>
|
|
283
|
+
<div class="absolute rounded-full bg-blue-500 ripple-core"></div>
|
|
284
|
+
</div>
|
|
285
|
+
<span class="txt-xs txt-muted">ripple pulse</span>
|
|
286
|
+
</div>
|
|
287
|
+
</div>
|
|
288
|
+
</div>
|
|
289
|
+
|
|
290
|
+
<div class="mb-2.5">
|
|
291
|
+
<h2>Progress bar</h2>
|
|
292
|
+
<div class="bx flex-vac flex-wrap gap-1.5">
|
|
293
|
+
<div class="flex-col flex-vac gap-05">
|
|
294
|
+
<div class="relative overflow-hidden w-12 rounded-sm bg-gray-200 progress-track">
|
|
295
|
+
<div class="bg-blue-500 progress-fill"></div>
|
|
296
|
+
</div>
|
|
297
|
+
<span class="txt-xs txt-muted">indeterminate</span>
|
|
298
|
+
</div>
|
|
299
|
+
<div class="flex-col flex-vac gap-05">
|
|
300
|
+
<div class="relative overflow-hidden w-12 rounded-sm bg-gray-200 progress-track">
|
|
301
|
+
<div class="bg-blue-500 rounded-sm progress-fill progress-fill-65"></div>
|
|
302
|
+
</div>
|
|
303
|
+
<span class="txt-xs txt-muted">determinate 65%</span>
|
|
304
|
+
</div>
|
|
305
|
+
</div>
|
|
306
|
+
</div>
|
|
307
|
+
|
|
308
|
+
<div class="mb-2.5">
|
|
309
|
+
<h2>Button spinners</h2>
|
|
310
|
+
<div class="bx flex-vac flex-wrap gap-1.5">
|
|
311
|
+
<button class="btn flex-vac gap-05">
|
|
312
|
+
<div class="spinner btn-spinner"></div>
|
|
313
|
+
Loading
|
|
314
|
+
</button>
|
|
315
|
+
<button class="btn primary flex-vac gap-05">
|
|
316
|
+
<div class="spinner btn-spinner btn-spinner-light"></div>
|
|
317
|
+
Saving
|
|
318
|
+
</button>
|
|
319
|
+
<button class="btn blue flex-vac gap-05">
|
|
320
|
+
<div class="spinner btn-spinner btn-spinner-light"></div>
|
|
321
|
+
Uploading
|
|
322
|
+
</button>
|
|
323
|
+
<button class="btn btn-icon">
|
|
324
|
+
<div class="spinner btn-spinner"></div>
|
|
325
|
+
</button>
|
|
326
|
+
</div>
|
|
327
|
+
</div>
|
|
572
328
|
|
|
329
|
+
<div class="mb-2.5">
|
|
330
|
+
<h2>Skeleton loader</h2>
|
|
331
|
+
<div class="bx flex-vac gap-1">
|
|
332
|
+
<div class="skeleton rounded-full wh-3 skel-avatar"></div>
|
|
333
|
+
<div class="flex-col fg-1 gap-05">
|
|
334
|
+
<div class="skeleton rounded h-05 skel-w-55"></div>
|
|
335
|
+
<div class="skeleton rounded h-05 skel-w-80"></div>
|
|
336
|
+
<div class="skeleton rounded h-05 skel-w-65"></div>
|
|
337
|
+
</div>
|
|
338
|
+
</div>
|
|
339
|
+
</div>
|
|
340
|
+
|
|
341
|
+
<div class="mb-2.5">
|
|
342
|
+
<h2>Page loader</h2>
|
|
343
|
+
<div class="bx flex-col flex-centered gap-1">
|
|
344
|
+
<svg class="animate-spin arc wh-3 txt-blue-500" viewBox="0 0 44 44">
|
|
345
|
+
<circle cx="22" cy="22" r="16" stroke="currentColor" />
|
|
346
|
+
</svg>
|
|
347
|
+
<p class="txt-sm txt-muted">Loading your workspace…</p>
|
|
348
|
+
</div>
|
|
349
|
+
</div>
|
|
350
|
+
|
|
351
|
+
</div>
|
|
352
|
+
|
|
353
|
+
|
|
354
|
+
|
|
355
|
+
|
|
356
|
+
<script type="module" src="/main.js"></script>
|
|
573
357
|
</body>
|
|
574
358
|
|
|
575
359
|
</html>
|
package/jtb-conversion-notes.md
CHANGED
|
@@ -6,7 +6,7 @@ Actionable gaps found during conversion of `loaders_and_spinners.html`.
|
|
|
6
6
|
|
|
7
7
|
| Gap | Detail |
|
|
8
8
|
| ----------------------------------- | ---------------------------------------------------------------------------------------------------------------- |
|
|
9
|
-
| `@keyframes dash` |
|
|
9
|
+
| `@keyframes dash` | SVG arc morphing — stroke-dasharray animates between values. No JTB equivalent. Candidate for `_animation.scss`. |
|
|
10
10
|
| `@keyframes grow` | Vertical scale pulse for bar equalizer. No JTB equivalent. |
|
|
11
11
|
| `@keyframes skeleton` | Gradient sweep shimmer. Very commonly needed. Strong candidate for `_animation.scss`. |
|
|
12
12
|
| `@keyframes progress-indeterminate` | Horizontal bar sweep for indeterminate progress. No JTB equivalent. |
|
|
@@ -24,5 +24,5 @@ Actionable gaps found during conversion of `loaders_and_spinners.html`.
|
|
|
24
24
|
|
|
25
25
|
| Gap | Detail |
|
|
26
26
|
| ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
27
|
-
| Spinner colour theming |
|
|
27
|
+
| Spinner colour theming | `.spinner` hardcodes `#f3f3f3` and `#3498db` — no CSS custom properties for colour. Accent and button-context spinners require local overrides. |
|
|
28
28
|
| Icon-only button | `.btn` has no square/icon variant. A `btn-icon` or `btn xs` pattern would cover `width = height, padding: 0`. |
|
package/package.json
CHANGED
|
@@ -18,6 +18,16 @@ $inline-exclusions: svg, span;
|
|
|
18
18
|
margin-block-start: $base-gap;
|
|
19
19
|
}
|
|
20
20
|
|
|
21
|
+
// Headings connect to text content below — tighter gap than $base-gap
|
|
22
|
+
// Block components (.bx etc) fall back to $base-gap via the general rule
|
|
23
|
+
:where(h1) + :where(p, ul, ol, blockquote) {
|
|
24
|
+
margin-block-start: 1rem;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
:where(h2, h3, h4, h5, h6) + :where(p, ul, ol, blockquote) {
|
|
28
|
+
margin-block-start: 0.75rem;
|
|
29
|
+
}
|
|
30
|
+
|
|
21
31
|
// Reverse pattern - layout elements followed by content elements
|
|
22
32
|
// Catches cases like div + p, section + h1, article + table, etc.
|
|
23
33
|
// We can't add div/section/article to $spacing-targets because that would also
|
package/src/base/_root.scss
CHANGED
|
@@ -2,16 +2,6 @@
|
|
|
2
2
|
@use '../maps_and_variables/colors' as *;
|
|
3
3
|
@use '../maps_and_variables/components' as *;
|
|
4
4
|
@use '../maps_and_variables/typography' as *;
|
|
5
|
-
@use '../functions/color-functions' as *;
|
|
6
|
-
@use 'sass:map';
|
|
7
|
-
|
|
8
|
-
@mixin define-runtime-theme-vars($theme-name, $theme-color) {
|
|
9
|
-
--#{$theme-name}: #{$theme-color};
|
|
10
|
-
--#{$theme-name}-hover: color-mix(in srgb, var(--#{$theme-name}), white 5%);
|
|
11
|
-
--#{$theme-name}-active: color-mix(in srgb, var(--#{$theme-name}), black 5%);
|
|
12
|
-
--#{$theme-name}-border: #{border-contrast($theme-color)};
|
|
13
|
-
--on-#{$theme-name}: #{text-color($theme-color)};
|
|
14
|
-
}
|
|
15
5
|
|
|
16
6
|
:root {
|
|
17
7
|
// create css variables including brand colors
|
|
@@ -47,10 +37,10 @@
|
|
|
47
37
|
--bg-toggle-on: var(--primary);
|
|
48
38
|
--bg-toggle-ball: var(--white);
|
|
49
39
|
|
|
50
|
-
// --
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
}
|
|
40
|
+
// -- Brand Colors --
|
|
41
|
+
--primary: #{$primary};
|
|
42
|
+
--secondary: #{$secondary};
|
|
43
|
+
--accent: #{$accent};
|
|
54
44
|
|
|
55
45
|
// -- Text Colors --
|
|
56
46
|
--text-color: #{$text-color};
|
|
@@ -109,19 +109,3 @@
|
|
|
109
109
|
@include active($color);
|
|
110
110
|
}
|
|
111
111
|
}
|
|
112
|
-
|
|
113
|
-
@each $theme-name in $runtime-theme-colors {
|
|
114
|
-
.#{$button-prefix}.#{$theme-name} {
|
|
115
|
-
&:hover {
|
|
116
|
-
background-color: var(--#{$theme-name}-hover);
|
|
117
|
-
border-color: var(--#{$theme-name}-border);
|
|
118
|
-
color: var(--on-#{$theme-name});
|
|
119
|
-
}
|
|
120
|
-
|
|
121
|
-
&:active {
|
|
122
|
-
background-color: var(--#{$theme-name}-active);
|
|
123
|
-
border-color: var(--#{$theme-name}-border);
|
|
124
|
-
color: var(--on-#{$theme-name});
|
|
125
|
-
}
|
|
126
|
-
}
|
|
127
|
-
}
|
|
@@ -51,10 +51,6 @@ $theme-colors: (
|
|
|
51
51
|
'warning': #ffdd57
|
|
52
52
|
) !default;
|
|
53
53
|
|
|
54
|
-
// Semantic theme names that should remain runtime-swappable via CSS custom
|
|
55
|
-
// properties. Hue and scale colors stay compile-time tokens.
|
|
56
|
-
$runtime-theme-colors: ('primary', 'secondary', 'accent') !default;
|
|
57
|
-
|
|
58
54
|
// based on Tailwind 500 series colors
|
|
59
55
|
$base-colors: (
|
|
60
56
|
'primary': base.$primary,
|
|
@@ -22,18 +22,4 @@ $background-color-properties: (
|
|
|
22
22
|
)
|
|
23
23
|
);
|
|
24
24
|
|
|
25
|
-
$runtime-background-colors: ();
|
|
26
|
-
|
|
27
|
-
@each $theme-name in $runtime-theme-colors {
|
|
28
|
-
$runtime-background-colors: map.set($runtime-background-colors, $theme-name, var(--#{$theme-name}));
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
$runtime-background-color-properties: (
|
|
32
|
-
background-color: (
|
|
33
|
-
prefix: 'bg-',
|
|
34
|
-
values: $runtime-background-colors
|
|
35
|
-
)
|
|
36
|
-
);
|
|
37
|
-
|
|
38
25
|
@include build-classes($background-color-properties, $responsive: false, $with-state: true);
|
|
39
|
-
@include build-classes($runtime-background-color-properties, $responsive: false, $with-state: true);
|
|
@@ -51,23 +51,6 @@ $divider-properties-map: (
|
|
|
51
51
|
)
|
|
52
52
|
) !default;
|
|
53
53
|
|
|
54
|
-
$runtime-border-colors: ();
|
|
55
|
-
|
|
56
|
-
@each $theme-name in $runtime-theme-colors {
|
|
57
|
-
$runtime-border-colors: map.set($runtime-border-colors, $theme-name, var(--#{$theme-name}));
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
$runtime-border-properties-map: (
|
|
61
|
-
border-color: (
|
|
62
|
-
prefix: #{$border-prefix},
|
|
63
|
-
values: $runtime-border-colors
|
|
64
|
-
),
|
|
65
|
-
outline-color: (
|
|
66
|
-
prefix: 'outline-',
|
|
67
|
-
values: $runtime-border-colors
|
|
68
|
-
)
|
|
69
|
-
);
|
|
70
|
-
|
|
71
54
|
.divide-y-gradient > :not(:last-child) {
|
|
72
55
|
border-block-end-width: 3px;
|
|
73
56
|
border-image-slice: 1;
|
|
@@ -85,5 +68,4 @@ $runtime-border-properties-map: (
|
|
|
85
68
|
// Builds
|
|
86
69
|
// ============================================================================
|
|
87
70
|
@include build-classes($border-properties-map, $responsive: true);
|
|
88
|
-
@include build-classes($runtime-border-properties-map, $responsive: true);
|
|
89
71
|
@include build-composite-classes($divider-properties-map, $responsive: true);
|
|
@@ -50,22 +50,3 @@ $themes-map: ();
|
|
|
50
50
|
@each $color, $value in map.merge($base-colors, $theme-colors) {
|
|
51
51
|
@include build-outline-theme('#{$color}-outline', $value);
|
|
52
52
|
}
|
|
53
|
-
|
|
54
|
-
@each $theme-name in $runtime-theme-colors {
|
|
55
|
-
.#{$theme-name} {
|
|
56
|
-
background-color: var(--#{$theme-name});
|
|
57
|
-
border: 1px solid var(--#{$theme-name}-border);
|
|
58
|
-
color: var(--on-#{$theme-name});
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
.#{$theme-name}-outline {
|
|
62
|
-
background-color: transparent;
|
|
63
|
-
border: 1px solid var(--#{$theme-name});
|
|
64
|
-
color: var(--#{$theme-name});
|
|
65
|
-
|
|
66
|
-
&:hover:not(:disabled, .disabled) {
|
|
67
|
-
background-color: var(--#{$theme-name});
|
|
68
|
-
color: var(--on-#{$theme-name});
|
|
69
|
-
}
|
|
70
|
-
}
|
|
71
|
-
}
|
|
@@ -124,23 +124,8 @@ $text-classes-map: (
|
|
|
124
124
|
)
|
|
125
125
|
);
|
|
126
126
|
|
|
127
|
-
$runtime-text-colors: ();
|
|
128
|
-
|
|
129
|
-
@each $theme-name in $runtime-theme-colors {
|
|
130
|
-
$runtime-text-colors: map.set($runtime-text-colors, $theme-name, var(--#{$theme-name}));
|
|
131
|
-
}
|
|
132
|
-
|
|
133
|
-
$runtime-typography-properties-map: (
|
|
134
|
-
color: (
|
|
135
|
-
prefix: '#{$text-prefix}',
|
|
136
|
-
values: $runtime-text-colors,
|
|
137
|
-
states: ('hover', 'focus')
|
|
138
|
-
)
|
|
139
|
-
);
|
|
140
|
-
|
|
141
127
|
// ============================================================================
|
|
142
128
|
// BUILDS
|
|
143
129
|
// ============================================================================
|
|
144
130
|
@include build-classes($typography-properties-map, $responsive: true);
|
|
145
|
-
@include build-classes($runtime-typography-properties-map, $responsive: true);
|
|
146
131
|
@include build-composite-classes($text-classes-map, $responsive: true);
|