Skip to Content

Changes for page Sandbox Test Page 3

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

Summary

Details

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