Skip to Content

Changes for page Sandbox Test Page 3

Last modified by Jareth Carpenter on 2026/08/20 22:29
From version 48.1
edited by Jareth Carpenter
on 2026/08/17 22:25
Change comment: There is no comment for this version
To version 36.1
edited by Jareth Carpenter
on 2026/08/17 16:34
Change comment: There is no comment for this version

Summary

Details

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