Skip to Content

Changes for page Sandbox Test Page 3

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

Summary

Details

Page properties
Content
... ... @@ -1,347 +1,298 @@
1 1  {{html clean="false"}}
2 -{{html clean="false"}}
3 -
4 4  <!--
5 - ============================================================
6 - FirstDigital - Learning Center Menu (XWiki fragment)
7 - ============================================================
3 +============================================================
4 +FirstDigital - Learning Center Menu (XWiki fragment)
5 +============================================================
8 8  
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:
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:
13 13  
14 - {{html clean="false"}}
15 - ...everything in this file...
16 - {{/html}}
12 +4. Save & View.
17 17  
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 --->
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 +============================================================-->
36 36  <style>
37 37  @import url('https://fonts.googleapis.com/css2?family=Host+Grotesk:wght@300;400;600;800&display=swap');
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 -
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 +}
345 345  </style>
346 346  
347 347  <div class="fdm-hub">
... ... @@ -420,4 +420,3 @@
420 420  
421 421  </div>
422 422  {{/html}}
423 -{{/html}}