Skip to Content

Changes for page Sandbox Test Page 3

Last modified by Jareth Carpenter on 2026/08/20 22:29
From version 34.1
edited by Jareth Carpenter
on 2026/08/17 16:26
Change comment: There is no comment for this version
To version 49.1
edited by Jareth Carpenter
on 2026/08/17 22:28
Change comment: There is no comment for this version

Summary

Details

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