Skip to Content

Changes for page Sandbox Test Page 3

Last modified by Jareth Carpenter on 2026/08/20 22:29
From version 39.1
edited by Jareth Carpenter
on 2026/08/17 16:46
Change comment: There is no comment for this version
To version 50.1
edited by Jareth Carpenter
on 2026/08/17 22:30
Change comment: There is no comment for this version

Summary

Details

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