Skip to Content

Changes for page Sandbox Test Page 3

Last modified by Jareth Carpenter on 2026/08/20 22:29
From version 35.1
edited by Jareth Carpenter
on 2026/08/17 16:33
Change comment: There is no comment for this version
To version 32.1
edited by Jareth Carpenter
on 2026/08/17 16:15
Change comment: There is no comment for this version

Summary

Details

Page properties
Content
... ... @@ -1,298 +1,347 @@
1 1  {{html clean="false"}}
2 +{{html clean="false"}}
3 +
2 2  <!--
3 -============================================================
4 -FirstDigital - Learning Center Menu (XWiki fragment)
5 -============================================================
5 + ============================================================
6 + FirstDigital - Learning Center Menu (XWiki fragment)
7 + ============================================================
6 6  
7 -HOW TO USE
8 -1. Edit the wiki page in SOURCE / WIKI mode (never WYSIWYG).
9 -2. Select all existing page content and delete it.
10 -3. Paste:
9 + HOW TO USE
10 + 1. Edit the wiki page in SOURCE / WIKI mode (never WYSIWYG).
11 + 2. Select all existing page content and delete it.
12 + 3. Paste:
11 11  
12 -4. Save & View.
14 + {{html clean="false"}}
15 + ...everything in this file...
16 + {{/html}}
13 13  
14 -IMPORTANT
15 -- This file is a FRAGMENT. It deliberately contains no DOCTYPE
16 - declaration and no html / head / body elements. Everything is
17 - scoped inside .fdm-hub so it cannot leak into the wiki theme.
18 -- After saving, only ever re-edit this page in SOURCE mode.
19 - Opening it in the WYSIWYG editor and saving can duplicate the
20 - content, because XWiki may expand the macro output into the page
21 - body while also keeping the macro itself.
22 -- All six links are unchanged from your original page, including
23 - the ?oidc.skipped= parameters on the two footer links.
24 -- Product logos still load from your wiki. The five photographs
25 - are embedded (base64) from the Brand Guide 2025, p.13, so they
26 - need no hosting. To swap one for a hosted image instead, replace
27 - that img's src="data:image/jpeg;base64,..." with a URL.
28 -============================================================-->
18 + 4. Save & View.
19 +
20 + IMPORTANT
21 + - This file is a FRAGMENT. It deliberately contains no DOCTYPE
22 + declaration and no html / head / body elements. Everything is
23 + scoped inside .fdm-hub so it cannot leak into the wiki theme.
24 + - After saving, only ever re-edit this page in SOURCE mode.
25 + Opening it in the WYSIWYG editor and saving can duplicate the
26 + content, because XWiki may expand the macro output into the page
27 + body while also keeping the macro itself.
28 + - All six links are unchanged from your original page, including
29 + the ?oidc.skipped= parameters on the two footer links.
30 + - Product logos still load from your wiki. The five photographs
31 + are embedded (base64) from the Brand Guide 2025, p.13, so they
32 + need no hosting. To swap one for a hosted image instead, replace
33 + that img's src="data:image/jpeg;base64,..." with a URL.
34 + ============================================================
35 +-->
29 29  <style>
30 30  @import url('https://fonts.googleapis.com/css2?family=Host+Grotesk:wght@300;400;600;800&display=swap');
31 -/* Safety net: if the wiki ever renders this block twice, show only the first copy. */
32 -.fdm-hub { display: none !important; }
33 -/* ---- FirstDigital brand tokens (Brand Guide 2025, p.11) ---- */
34 -.fdm-hub {
35 - --fd-navy: #003366; /* headlines, backgrounds, icons */
36 - --fd-blue: #307ab2; /* headlines, backgrounds, icons */
37 - --fd-blue-bright: #38b2e3; /* stand-out headlines, icons */
38 - --fd-red: #cf333d; /* accents - use selectively */
39 - --fd-body: #2e404d; /* paragraph text */
40 - --fd-secondary: #8f9499; /* secondary text */
41 - --fd-bg-mid: #dedede; /* backgrounds */
42 - --fd-bg-light: #f0f0f0; /* backgrounds */
43 - --fd-white: #ffffff;
44 - --ms-azure: #0078d4; /* Microsoft's own brand blue */
45 -}
46 -.fdm-hub, .fdm-hub * { box-sizing: border-box; }
47 -.fdm-hub {
48 - font-family: 'Host Grotesk', 'Segoe UI', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
49 - font-weight: 300;
50 - color: var(--fd-body);
51 - background: var(--fd-white);
52 - max-width: 1000px;
53 - margin: 0 auto;
54 - padding: 0 20px 28px;
55 - -webkit-font-smoothing: antialiased;
56 -}
57 -/* ---- Masthead: full-colour logo on white (Logo Rules, p.10) ---- */
58 -.fdm-masthead {
59 - display: flex;
60 - align-items: center;
61 - justify-content: space-between;
62 - gap: 20px;
63 - flex-wrap: wrap;
64 - padding: 22px 0 18px;
65 - border-bottom: 1px solid var(--fd-bg-mid);
66 -}
67 -.fdm-masthead img { height: 46px; width: auto; display: block; }
68 -.fdm-masthead-label {
69 - font-size: 12px;
70 - font-weight: 600;
71 - letter-spacing: 0.16em;
72 - text-transform: uppercase;
73 - color: var(--fd-secondary);
74 - white-space: nowrap;
75 -}
76 -/* ---- Hero ---- */
77 -.fdm-hero {
78 - position: relative;
79 - margin-top: 22px;
80 - border-radius: 6px;
81 - overflow: hidden;
82 - min-height: 250px;
83 - display: flex;
84 - align-items: flex-end;
85 -}
86 -.fdm-hero-img {
87 - position: absolute;
88 - top: 0; right: 0; bottom: 0; left: 0;
89 - width: 100%; height: 100%;
90 - object-fit: cover;
91 - display: block;
92 -}
93 -/* explicit offsets, not the inset shorthand, for wider support */
94 -.fdm-hero::after {
95 - content: "";
96 - position: absolute;
97 - top: 0; right: 0; bottom: 0; left: 0;
98 - background: linear-gradient(100deg,
99 - rgba(0,51,102,0.94) 0%,
100 - rgba(0,51,102,0.86) 42%,
101 - rgba(0,51,102,0.30) 100%);
102 -}
103 -.fdm-hero-inner {
104 - position: relative;
105 - z-index: 1;
106 - padding: 32px 32px 30px;
107 - max-width: 600px;
108 -}
109 -/* red rule = brand accent motif (Brand Guide p.4) */
110 -.fdm-rule {
111 - width: 62px; height: 4px;
112 - background: var(--fd-red);
113 - border: 0;
114 - margin: 0 0 16px;
115 -}
116 -.fdm-eyebrow {
117 - font-size: 12px;
118 - font-weight: 600;
119 - letter-spacing: 0.18em;
120 - text-transform: uppercase;
121 - color: var(--fd-blue-bright);
122 - margin-bottom: 9px;
123 -}
124 -.fdm-hero h1 {
125 - font-size: clamp(26px, 3.6vw, 36px);
126 - font-weight: 800;
127 - line-height: 1.14;
128 - letter-spacing: -0.01em;
129 - color: var(--fd-white);
130 - margin: 0 0 11px;
131 -}
132 -.fdm-hero p {
133 - font-size: 15px;
134 - font-weight: 300;
135 - line-height: 1.6;
136 - color: #dbe6ef;
137 - margin: 0;
138 - max-width: 470px;
139 -}
140 -/* ---- Card grid ---- */
141 -.fdm-grid {
142 - display: grid;
143 - grid-template-columns: repeat(2, 1fr);
144 - gap: 22px;
145 - margin-top: 24px;
146 -}
147 -.fdm-card {
148 - display: flex;
149 - flex-direction: column;
150 - background: var(--fd-white);
151 - border: 1px solid var(--fd-bg-mid);
152 - border-radius: 6px;
153 - overflow: hidden;
154 - text-decoration: none !important;
155 - color: inherit;
156 - height: 100%;
157 - transition: transform .2s ease, box-shadow .2s ease, border-color.2s ease;
158 -}
159 -.fdm-card:hover {
160 - transform: translateY(-3px);
161 - border-color: var(--fd-blue-bright);
162 - box-shadow: 0 12px 26px rgba(0,51,102,0.14);
163 -}
164 -.fdm-card:focus-visible {
165 - outline: 3px solid var(--fd-blue-bright);
166 - outline-offset: 2px;
167 -}
168 -.fdm-media {
169 - position: relative;
170 - height: 132px;
171 - background: var(--fd-bg-light);
172 - flex: 0 0 auto;
173 - /* no overflow:hidden here - the logo badge overhangs the bottom
174 - edge on purpose. The photo is already clipped by object-fit,
175 - and .fdm-card's own overflow:hidden keeps the rounded corners. */
176 -}
177 -.fdm-media img {
178 - width: 100%; height: 100%;
179 - object-fit: cover;
180 - display: block;
181 -}
182 -.fdm-media::after {
183 - content: "";
184 - position: absolute;
185 - top: 0; right: 0; bottom: 0; left: 0;
186 - background: linear-gradient(180deg,
187 - rgba(0,51,102,0.06) 0%, rgba(0,40,79,0.52) 100%);
188 -}
189 -/* white badge keeps every logo brand-legal over a photo (p.10) */
190 -.fdm-badge {
191 - position: absolute;
192 - left: 18px;
193 - bottom: 0;
194 - z-index: 1;
195 - transform: translateY(50%);
196 - width: 58px; height: 58px;
197 - border-radius: 8px;
198 - background: var(--fd-white);
199 - box-shadow: 0 5px 14px rgba(0,0,0,0.18);
200 - display: flex;
201 - align-items: center;
202 - justify-content: center;
203 - overflow: hidden;
204 -}
205 -.fdm-badge img { object-fit: contain; display: block; }
206 -.fdm-logo-webex { width: 74%; height: auto; }
207 -.fdm-logo-teams { width: 64%; height: auto; }
208 -.fdm-logo-firstdigital { width: 84%; height: auto; }
209 -/* icons: dark-blue stroke, bright-blue accent (Brand Guide p.14) */
210 -.fdm-badge svg {
211 - width: 26px; height: 26px;
212 - fill: none;
213 - stroke: var(--fd-navy);
214 - stroke-width: 1.7;
215 - stroke-linecap: round;
216 - stroke-linejoin: round;
217 -}
218 -.fdm-badge svg .accent { stroke: var(--fd-blue-bright); }
219 -.fdm-body {
220 - padding: 38px 22px 22px;
221 - display: flex;
222 - flex-direction: column;
223 - flex: 1 1 auto;
224 -}
225 -.fdm-title {
226 - display: block;
227 - font-size: 16.5px;
228 - font-weight: 800;
229 - line-height: 1.28;
230 - color: var(--fd-navy);
231 -}
232 -.fdm-sub {
233 - display: block;
234 - font-size: 13.5px;
235 - font-weight: 300;
236 - line-height: 1.55;
237 - color: var(--fd-body);
238 - margin-top: 5px;
239 -}
240 -.fdm-cta {
241 - display: flex;
242 - align-items: center;
243 - gap: 7px;
244 - margin-top: auto;
245 - padding-top: 16px;
246 - font-size: 13px;
247 - font-weight: 600;
248 - color: var(--fd-red);
249 -}
250 -.fdm-cta svg {
251 - width: 15px; height: 15px;
252 - fill: none;
253 - stroke: var(--fd-red);
254 - stroke-width: 2;
255 - stroke-linecap: round;
256 - stroke-linejoin: round;
257 - transition: transform .2s ease;
258 -}
259 -.fdm-card:hover .fdm-cta svg { transform: translateX(4px); }
260 -/* ---- Footer ---- */
261 -.fdm-footer {
262 - margin-top: 32px;
263 - padding-top: 18px;
264 - border-top: 1px solid var(--fd-bg-mid);
265 - display: flex;
266 - justify-content: center;
267 - align-items: center;
268 - flex-wrap: wrap;
269 - gap: 14px;
270 - font-size: 13px;
271 -}
272 -.fdm-footer a {
273 - font-weight: 600;
274 - text-decoration: none !important;
275 - color: var(--fd-blue);
276 -}
277 -.fdm-footer a:hover { text-decoration: underline !important; }
278 -.fdm-footer a:focus-visible {
279 - outline: 2px solid var(--fd-blue-bright);
280 - outline-offset: 3px;
281 -}
282 -.fdm-brand-first { color: var(--fd-blue); }
283 -.fdm-brand-second { color: var(--fd-navy); }
284 -.fdm-azure { color: var(--ms-azure); }
285 -.fdm-divider { color: var(--fd-bg-mid); font-weight: 300; }
286 -@media (max-width: 768px) {
287 - .fdm-grid { grid-template-columns: 1fr; }
288 - .fdm-hub { padding: 0 12px 22px; }
289 - .fdm-masthead img { height: 38px; }
290 - .fdm-hero { min-height: 220px; }
291 - .fdm-hero-inner { padding: 24px 22px 22px; }
292 -}
293 -@media (prefers-reduced-motion: reduce) {
294 - .fdm-card, .fdm-cta svg { transition: none; }
295 -}
38 +
39 + /* Safety net: if the wiki ever renders this block twice,
40 + show only the first copy. */
41 + .fdm-hub ~ .fdm-hub { display: none !important; }
42 +
43 + /* ---- FirstDigital brand tokens (Brand Guide 2025, p.11) ---- */
44 + .fdm-hub {
45 + --fd-navy: #003366; /* headlines, backgrounds, icons */
46 + --fd-blue: #307ab2; /* headlines, backgrounds, icons */
47 + --fd-blue-bright: #38b2e3; /* stand-out headlines, icons */
48 + --fd-red: #cf333d; /* accents - use selectively */
49 + --fd-body: #2e404d; /* paragraph text */
50 + --fd-secondary: #8f9499; /* secondary text */
51 + --fd-bg-mid: #dedede; /* backgrounds */
52 + --fd-bg-light: #f0f0f0; /* backgrounds */
53 + --fd-white: #ffffff;
54 + --ms-azure: #0078d4; /* Microsoft's own brand blue */
55 + }
56 +
57 + .fdm-hub, .fdm-hub * { box-sizing: border-box; }
58 +
59 + .fdm-hub {
60 + font-family: 'Host Grotesk', 'Segoe UI', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
61 + font-weight: 300;
62 + color: var(--fd-body);
63 + background: var(--fd-white);
64 + max-width: 1000px;
65 + margin: 0 auto;
66 + padding: 0 20px 28px;
67 + -webkit-font-smoothing: antialiased;
68 + }
69 +
70 + /* ---- Masthead: full-colour logo on white (Logo Rules, p.10) ---- */
71 + .fdm-masthead {
72 + display: flex;
73 + align-items: center;
74 + justify-content: space-between;
75 + gap: 20px;
76 + flex-wrap: wrap;
77 + padding: 22px 0 18px;
78 + border-bottom: 1px solid var(--fd-bg-mid);
79 + }
80 +
81 + .fdm-masthead img { height: 46px; width: auto; display: block; }
82 +
83 + .fdm-masthead-label {
84 + font-size: 12px;
85 + font-weight: 600;
86 + letter-spacing: 0.16em;
87 + text-transform: uppercase;
88 + color: var(--fd-secondary);
89 + white-space: nowrap;
90 + }
91 +
92 + /* ---- Hero ---- */
93 + .fdm-hero {
94 + position: relative;
95 + margin-top: 22px;
96 + border-radius: 6px;
97 + overflow: hidden;
98 + min-height: 250px;
99 + display: flex;
100 + align-items: flex-end;
101 + }
102 +
103 + .fdm-hero-img {
104 + position: absolute;
105 + top: 0; right: 0; bottom: 0; left: 0;
106 + width: 100%; height: 100%;
107 + object-fit: cover;
108 + display: block;
109 + }
110 +
111 + /* explicit offsets, not the inset shorthand, for wider support */
112 + .fdm-hero::after {
113 + content: "";
114 + position: absolute;
115 + top: 0; right: 0; bottom: 0; left: 0;
116 + background: linear-gradient(100deg,
117 + rgba(0,51,102,0.94) 0%,
118 + rgba(0,51,102,0.86) 42%,
119 + rgba(0,51,102,0.30) 100%);
120 + }
121 +
122 + .fdm-hero-inner {
123 + position: relative;
124 + z-index: 1;
125 + padding: 32px 32px 30px;
126 + max-width: 600px;
127 + }
128 +
129 + /* red rule = brand accent motif (Brand Guide p.4) */
130 + .fdm-rule {
131 + width: 62px; height: 4px;
132 + background: var(--fd-red);
133 + border: 0;
134 + margin: 0 0 16px;
135 + }
136 +
137 + .fdm-eyebrow {
138 + font-size: 12px;
139 + font-weight: 600;
140 + letter-spacing: 0.18em;
141 + text-transform: uppercase;
142 + color: var(--fd-blue-bright);
143 + margin-bottom: 9px;
144 + }
145 +
146 + .fdm-hero h1 {
147 + font-size: clamp(26px, 3.6vw, 36px);
148 + font-weight: 800;
149 + line-height: 1.14;
150 + letter-spacing: -0.01em;
151 + color: var(--fd-white);
152 + margin: 0 0 11px;
153 + }
154 +
155 + .fdm-hero p {
156 + font-size: 15px;
157 + font-weight: 300;
158 + line-height: 1.6;
159 + color: #dbe6ef;
160 + margin: 0;
161 + max-width: 470px;
162 + }
163 +
164 + /* ---- Card grid ---- */
165 + .fdm-grid {
166 + display: grid;
167 + grid-template-columns: repeat(2, 1fr);
168 + gap: 22px;
169 + margin-top: 24px;
170 + }
171 +
172 + .fdm-card {
173 + display: flex;
174 + flex-direction: column;
175 + background: var(--fd-white);
176 + border: 1px solid var(--fd-bg-mid);
177 + border-radius: 6px;
178 + overflow: hidden;
179 + text-decoration: none !important;
180 + color: inherit;
181 + height: 100%;
182 + transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
183 + }
184 +
185 + .fdm-card:hover {
186 + transform: translateY(-3px);
187 + border-color: var(--fd-blue-bright);
188 + box-shadow: 0 12px 26px rgba(0,51,102,0.14);
189 + }
190 +
191 + .fdm-card:focus-visible {
192 + outline: 3px solid var(--fd-blue-bright);
193 + outline-offset: 2px;
194 + }
195 +
196 + .fdm-media {
197 + position: relative;
198 + height: 132px;
199 + background: var(--fd-bg-light);
200 + flex: 0 0 auto;
201 + /* no overflow:hidden here - the logo badge overhangs the bottom
202 + edge on purpose. The photo is already clipped by object-fit,
203 + and .fdm-card's own overflow:hidden keeps the rounded corners. */
204 + }
205 +
206 + .fdm-media img {
207 + width: 100%; height: 100%;
208 + object-fit: cover;
209 + display: block;
210 + }
211 +
212 + .fdm-media::after {
213 + content: "";
214 + position: absolute;
215 + top: 0; right: 0; bottom: 0; left: 0;
216 + background: linear-gradient(180deg,
217 + rgba(0,51,102,0.06) 0%, rgba(0,40,79,0.52) 100%);
218 + }
219 +
220 + /* white badge keeps every logo brand-legal over a photo (p.10) */
221 + .fdm-badge {
222 + position: absolute;
223 + left: 18px;
224 + bottom: 0;
225 + z-index: 1;
226 + transform: translateY(50%);
227 + width: 58px; height: 58px;
228 + border-radius: 8px;
229 + background: var(--fd-white);
230 + box-shadow: 0 5px 14px rgba(0,0,0,0.18);
231 + display: flex;
232 + align-items: center;
233 + justify-content: center;
234 + overflow: hidden;
235 + }
236 +
237 + .fdm-badge img { object-fit: contain; display: block; }
238 +
239 + .fdm-logo-webex { width: 74%; height: auto; }
240 + .fdm-logo-teams { width: 64%; height: auto; }
241 + .fdm-logo-firstdigital { width: 84%; height: auto; }
242 +
243 + /* icons: dark-blue stroke, bright-blue accent (Brand Guide p.14) */
244 + .fdm-badge svg {
245 + width: 26px; height: 26px;
246 + fill: none;
247 + stroke: var(--fd-navy);
248 + stroke-width: 1.7;
249 + stroke-linecap: round;
250 + stroke-linejoin: round;
251 + }
252 +
253 + .fdm-badge svg .accent { stroke: var(--fd-blue-bright); }
254 +
255 + .fdm-body {
256 + padding: 38px 22px 22px;
257 + display: flex;
258 + flex-direction: column;
259 + flex: 1 1 auto;
260 + }
261 +
262 + .fdm-title {
263 + display: block;
264 + font-size: 16.5px;
265 + font-weight: 800;
266 + line-height: 1.28;
267 + color: var(--fd-navy);
268 + }
269 +
270 + .fdm-sub {
271 + display: block;
272 + font-size: 13.5px;
273 + font-weight: 300;
274 + line-height: 1.55;
275 + color: var(--fd-body);
276 + margin-top: 5px;
277 + }
278 +
279 + .fdm-cta {
280 + display: flex;
281 + align-items: center;
282 + gap: 7px;
283 + margin-top: auto;
284 + padding-top: 16px;
285 + font-size: 13px;
286 + font-weight: 600;
287 + color: var(--fd-red);
288 + }
289 +
290 + .fdm-cta svg {
291 + width: 15px; height: 15px;
292 + fill: none;
293 + stroke: var(--fd-red);
294 + stroke-width: 2;
295 + stroke-linecap: round;
296 + stroke-linejoin: round;
297 + transition: transform .2s ease;
298 + }
299 +
300 + .fdm-card:hover .fdm-cta svg { transform: translateX(4px); }
301 +
302 + /* ---- Footer ---- */
303 + .fdm-footer {
304 + margin-top: 32px;
305 + padding-top: 18px;
306 + border-top: 1px solid var(--fd-bg-mid);
307 + display: flex;
308 + justify-content: center;
309 + align-items: center;
310 + flex-wrap: wrap;
311 + gap: 14px;
312 + font-size: 13px;
313 + }
314 +
315 + .fdm-footer a {
316 + font-weight: 600;
317 + text-decoration: none !important;
318 + color: var(--fd-blue);
319 + }
320 +
321 + .fdm-footer a:hover { text-decoration: underline !important; }
322 +
323 + .fdm-footer a:focus-visible {
324 + outline: 2px solid var(--fd-blue-bright);
325 + outline-offset: 3px;
326 + }
327 +
328 + .fdm-brand-first { color: var(--fd-blue); }
329 + .fdm-brand-second { color: var(--fd-navy); }
330 + .fdm-azure { color: var(--ms-azure); }
331 + .fdm-divider { color: var(--fd-bg-mid); font-weight: 300; }
332 +
333 + @media (max-width: 768px) {
334 + .fdm-grid { grid-template-columns: 1fr; }
335 + .fdm-hub { padding: 0 12px 22px; }
336 + .fdm-masthead img { height: 38px; }
337 + .fdm-hero { min-height: 220px; }
338 + .fdm-hero-inner { padding: 24px 22px 22px; }
339 + }
340 +
341 + @media (prefers-reduced-motion: reduce) {
342 + .fdm-card, .fdm-cta svg { transition: none; }
343 + }
344 +
296 296  </style>
297 297  
298 298  <div class="fdm-hub">
... ... @@ -371,3 +371,4 @@
371 371  
372 372  </div>
373 373  {{/html}}
423 +{{/html}}