Skip to Content

Changes for page Sandbox Test Page 3

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

Summary

Details

Page properties
Content
... ... @@ -10,333 +10,292 @@
10 10  2. Select all existing page content and delete it.
11 11  3. Paste:
12 12  
13 - 4. Save & View.
13 +4. Save & View.
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 - ============================================================
30 --->
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 +============================================================-->
31 31  <style>
32 32  @import url('https://fonts.googleapis.com/css2?family=Host+Grotesk:wght@300;400;600;800&display=swap');
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 -
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 +}
340 340  </style>
341 341  
342 342  <div class="fdm-hub">