Skip to Content

Changes for page Sandbox Test Page 3

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

Summary

Details

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