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 31.1
edited by Jareth Carpenter
on 2026/08/17 16:13
Change comment: There is no comment for this version

Summary

Details

Page properties
Content
... ... @@ -1,304 +1,358 @@
1 +Click on **"Edit"** and modify the contents of this page, then click on **"Save & View"** to see how they look like on your page!
2 +
3 += Here's some dummy text to show you what the page looks like =
4 +
5 +Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
6 +
7 +
8 +I am going to use this for checking edits to the main page before saving
9 +
10 +
1 1  {{html clean="false"}}
12 +{{ html clean="false" }}
2 2  <!--
3 -============================================================
4 -FirstDigital - Learning Center Menu (XWiki fragment)
5 -============================================================
14 + ============================================================
15 + FirstDigital - Learning Center Menu (XWiki fragment)
16 + ============================================================
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:
18 + HOW TO USE
19 + 1. Edit the wiki page in SOURCE / WIKI mode (never WYSIWYG).
20 + 2. Select all existing page content and delete it.
21 + 3. Paste:
11 11  
12 12   {{html clean="false"}}
13 13   ...everything in this file...
14 14   {{/html}}
15 15  
16 -4. Save & View.
27 + 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 -============================================================-->
29 + IMPORTANT
30 + - This file is a FRAGMENT. It deliberately contains no DOCTYPE
31 + declaration and no html / head / body elements. Everything is
32 + scoped inside .fdm-hub so it cannot leak into the wiki theme.
33 + - After saving, only ever re-edit this page in SOURCE mode.
34 + Opening it in the WYSIWYG editor and saving can duplicate the
35 + content, because XWiki may expand the macro output into the page
36 + body while also keeping the macro itself.
37 + - All six links are unchanged from your original page, including
38 + the ?oidc.skipped= parameters on the two footer links.
39 + - Product logos still load from your wiki. The five photographs
40 + are embedded (base64) from the Brand Guide 2025, p.13, so they
41 + need no hosting. To swap one for a hosted image instead, replace
42 + that img's src="data:image/jpeg;base64,..." with a URL.
43 + ============================================================
44 +-->
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 -}
300 -</style>
301 301  
48 + /* Safety net: if the wiki ever renders this block twice,
49 + show only the first copy. */
50 + .fdm-hub ~ .fdm-hub { display: none !important; }
51 +
52 + /* ---- FirstDigital brand tokens (Brand Guide 2025, p.11) ---- */
53 + .fdm-hub {
54 + --fd-navy: #003366; /* headlines, backgrounds, icons */
55 + --fd-blue: #307ab2; /* headlines, backgrounds, icons */
56 + --fd-blue-bright: #38b2e3; /* stand-out headlines, icons */
57 + --fd-red: #cf333d; /* accents - use selectively */
58 + --fd-body: #2e404d; /* paragraph text */
59 + --fd-secondary: #8f9499; /* secondary text */
60 + --fd-bg-mid: #dedede; /* backgrounds */
61 + --fd-bg-light: #f0f0f0; /* backgrounds */
62 + --fd-white: #ffffff;
63 + --ms-azure: #0078d4; /* Microsoft's own brand blue */
64 + }
65 +
66 + .fdm-hub, .fdm-hub * { box-sizing: border-box; }
67 +
68 + .fdm-hub {
69 + font-family: 'Host Grotesk', 'Segoe UI', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
70 + font-weight: 300;
71 + color: var(--fd-body);
72 + background: var(--fd-white);
73 + max-width: 1000px;
74 + margin: 0 auto;
75 + padding: 0 20px 28px;
76 + -webkit-font-smoothing: antialiased;
77 + }
78 +
79 + /* ---- Masthead: full-colour logo on white (Logo Rules, p.10) ---- */
80 + .fdm-masthead {
81 + display: flex;
82 + align-items: center;
83 + justify-content: space-between;
84 + gap: 20px;
85 + flex-wrap: wrap;
86 + padding: 22px 0 18px;
87 + border-bottom: 1px solid var(--fd-bg-mid);
88 + }
89 +
90 + .fdm-masthead img { height: 46px; width: auto; display: block; }
91 +
92 + .fdm-masthead-label {
93 + font-size: 12px;
94 + font-weight: 600;
95 + letter-spacing: 0.16em;
96 + text-transform: uppercase;
97 + color: var(--fd-secondary);
98 + white-space: nowrap;
99 + }
100 +
101 + /* ---- Hero ---- */
102 + .fdm-hero {
103 + position: relative;
104 + margin-top: 22px;
105 + border-radius: 6px;
106 + overflow: hidden;
107 + min-height: 250px;
108 + display: flex;
109 + align-items: flex-end;
110 + }
111 +
112 + .fdm-hero-img {
113 + position: absolute;
114 + top: 0; right: 0; bottom: 0; left: 0;
115 + width: 100%; height: 100%;
116 + object-fit: cover;
117 + display: block;
118 + }
119 +
120 + /* explicit offsets, not the inset shorthand, for wider support */
121 + .fdm-hero::after {
122 + content: "";
123 + position: absolute;
124 + top: 0; right: 0; bottom: 0; left: 0;
125 + background: linear-gradient(100deg,
126 + rgba(0,51,102,0.94) 0%,
127 + rgba(0,51,102,0.86) 42%,
128 + rgba(0,51,102,0.30) 100%);
129 + }
130 +
131 + .fdm-hero-inner {
132 + position: relative;
133 + z-index: 1;
134 + padding: 32px 32px 30px;
135 + max-width: 600px;
136 + }
137 +
138 + /* red rule = brand accent motif (Brand Guide p.4) */
139 + .fdm-rule {
140 + width: 62px; height: 4px;
141 + background: var(--fd-red);
142 + border: 0;
143 + margin: 0 0 16px;
144 + }
145 +
146 + .fdm-eyebrow {
147 + font-size: 12px;
148 + font-weight: 600;
149 + letter-spacing: 0.18em;
150 + text-transform: uppercase;
151 + color: var(--fd-blue-bright);
152 + margin-bottom: 9px;
153 + }
154 +
155 + .fdm-hero h1 {
156 + font-size: clamp(26px, 3.6vw, 36px);
157 + font-weight: 800;
158 + line-height: 1.14;
159 + letter-spacing: -0.01em;
160 + color: var(--fd-white);
161 + margin: 0 0 11px;
162 + }
163 +
164 + .fdm-hero p {
165 + font-size: 15px;
166 + font-weight: 300;
167 + line-height: 1.6;
168 + color: #dbe6ef;
169 + margin: 0;
170 + max-width: 470px;
171 + }
172 +
173 + /* ---- Card grid ---- */
174 + .fdm-grid {
175 + display: grid;
176 + grid-template-columns: repeat(2, 1fr);
177 + gap: 22px;
178 + margin-top: 24px;
179 + }
180 +
181 + .fdm-card {
182 + display: flex;
183 + flex-direction: column;
184 + background: var(--fd-white);
185 + border: 1px solid var(--fd-bg-mid);
186 + border-radius: 6px;
187 + overflow: hidden;
188 + text-decoration: none !important;
189 + color: inherit;
190 + height: 100%;
191 + transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
192 + }
193 +
194 + .fdm-card:hover {
195 + transform: translateY(-3px);
196 + border-color: var(--fd-blue-bright);
197 + box-shadow: 0 12px 26px rgba(0,51,102,0.14);
198 + }
199 +
200 + .fdm-card:focus-visible {
201 + outline: 3px solid var(--fd-blue-bright);
202 + outline-offset: 2px;
203 + }
204 +
205 + .fdm-media {
206 + position: relative;
207 + height: 132px;
208 + background: var(--fd-bg-light);
209 + flex: 0 0 auto;
210 + /* no overflow:hidden here - the logo badge overhangs the bottom
211 + edge on purpose. The photo is already clipped by object-fit,
212 + and .fdm-card's own overflow:hidden keeps the rounded corners. */
213 + }
214 +
215 + .fdm-media img {
216 + width: 100%; height: 100%;
217 + object-fit: cover;
218 + display: block;
219 + }
220 +
221 + .fdm-media::after {
222 + content: "";
223 + position: absolute;
224 + top: 0; right: 0; bottom: 0; left: 0;
225 + background: linear-gradient(180deg,
226 + rgba(0,51,102,0.06) 0%, rgba(0,40,79,0.52) 100%);
227 + }
228 +
229 + /* white badge keeps every logo brand-legal over a photo (p.10) */
230 + .fdm-badge {
231 + position: absolute;
232 + left: 18px;
233 + bottom: 0;
234 + z-index: 1;
235 + transform: translateY(50%);
236 + width: 58px; height: 58px;
237 + border-radius: 8px;
238 + background: var(--fd-white);
239 + box-shadow: 0 5px 14px rgba(0,0,0,0.18);
240 + display: flex;
241 + align-items: center;
242 + justify-content: center;
243 + overflow: hidden;
244 + }
245 +
246 + .fdm-badge img { object-fit: contain; display: block; }
247 +
248 + .fdm-logo-webex { width: 74%; height: auto; }
249 + .fdm-logo-teams { width: 64%; height: auto; }
250 + .fdm-logo-firstdigital { width: 84%; height: auto; }
251 +
252 + /* icons: dark-blue stroke, bright-blue accent (Brand Guide p.14) */
253 + .fdm-badge svg {
254 + width: 26px; height: 26px;
255 + fill: none;
256 + stroke: var(--fd-navy);
257 + stroke-width: 1.7;
258 + stroke-linecap: round;
259 + stroke-linejoin: round;
260 + }
261 +
262 + .fdm-badge svg .accent { stroke: var(--fd-blue-bright); }
263 +
264 + .fdm-body {
265 + padding: 38px 22px 22px;
266 + display: flex;
267 + flex-direction: column;
268 + flex: 1 1 auto;
269 + }
270 +
271 + .fdm-title {
272 + display: block;
273 + font-size: 16.5px;
274 + font-weight: 800;
275 + line-height: 1.28;
276 + color: var(--fd-navy);
277 + }
278 +
279 + .fdm-sub {
280 + display: block;
281 + font-size: 13.5px;
282 + font-weight: 300;
283 + line-height: 1.55;
284 + color: var(--fd-body);
285 + margin-top: 5px;
286 + }
287 +
288 + .fdm-cta {
289 + display: flex;
290 + align-items: center;
291 + gap: 7px;
292 + margin-top: auto;
293 + padding-top: 16px;
294 + font-size: 13px;
295 + font-weight: 600;
296 + color: var(--fd-red);
297 + }
298 +
299 + .fdm-cta svg {
300 + width: 15px; height: 15px;
301 + fill: none;
302 + stroke: var(--fd-red);
303 + stroke-width: 2;
304 + stroke-linecap: round;
305 + stroke-linejoin: round;
306 + transition: transform .2s ease;
307 + }
308 +
309 + .fdm-card:hover .fdm-cta svg { transform: translateX(4px); }
310 +
311 + /* ---- Footer ---- */
312 + .fdm-footer {
313 + margin-top: 32px;
314 + padding-top: 18px;
315 + border-top: 1px solid var(--fd-bg-mid);
316 + display: flex;
317 + justify-content: center;
318 + align-items: center;
319 + flex-wrap: wrap;
320 + gap: 14px;
321 + font-size: 13px;
322 + }
323 +
324 + .fdm-footer a {
325 + font-weight: 600;
326 + text-decoration: none !important;
327 + color: var(--fd-blue);
328 + }
329 +
330 + .fdm-footer a:hover { text-decoration: underline !important; }
331 +
332 + .fdm-footer a:focus-visible {
333 + outline: 2px solid var(--fd-blue-bright);
334 + outline-offset: 3px;
335 + }
336 +
337 + .fdm-brand-first { color: var(--fd-blue); }
338 + .fdm-brand-second { color: var(--fd-navy); }
339 + .fdm-azure { color: var(--ms-azure); }
340 + .fdm-divider { color: var(--fd-bg-mid); font-weight: 300; }
341 +
342 + @media (max-width: 768px) {
343 + .fdm-grid { grid-template-columns: 1fr; }
344 + .fdm-hub { padding: 0 12px 22px; }
345 + .fdm-masthead img { height: 38px; }
346 + .fdm-hero { min-height: 220px; }
347 + .fdm-hero-inner { padding: 24px 22px 22px; }
348 + }
349 +
350 + @media (prefers-reduced-motion: reduce) {
351 + .fdm-card, .fdm-cta svg { transition: none; }
352 + }
353 +
354 +<style>
355 +
302 302  <div class="fdm-hub">
303 303  
304 304   <div class="fdm-masthead">
... ... @@ -374,4 +374,5 @@
374 374   </div>
375 375  
376 376  </div>
431 +{{html}}
377 377  {{/html}}