Skip to Content

Changes for page Sandbox Test Page 3

Last modified by Jareth Carpenter on 2026/08/20 22:29
From version 66.2
edited by Jareth Carpenter
on 2026/08/20 22:10
Change comment: Auto-saved during real-time collaboration
To version 55.2
edited by Jareth Carpenter
on 2026/08/20 16:56
Change comment: Auto-saved during real-time collaboration

Summary

Details

Page properties
Content
... ... @@ -1,8 +1,421 @@
1 -Jareth has been using this a testing area
1 +{{html clean="false"}}
2 2  
3 +<!--
4 + ============================================================
5 + FirstDigital - Learning Center Menu (XWiki fragment)
6 + ============================================================
3 3  
4 -{{html clean="false"}}
5 -<div> This is in a div </div>
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:
6 6  
7 -<img src="https://learn.firstdigital.com/bin/download/Main/WebHome/CloudConnectedCCP.jpg?rev=1.3">
13 + {{html clean="false"}}
14 + ...everything in this file...
15 + {{/html}}
16 +
17 + 4. Save & View.
18 +
19 + IMPORTANT
20 + - This file is a FRAGMENT. It deliberately contains no DOCTYPE
21 + declaration and no html / head / body elements. Everything is
22 + scoped inside .fdm-hub so it cannot leak into the wiki theme.
23 + - After saving, only ever re-edit this page in SOURCE mode.
24 + Opening it in the WYSIWYG editor and saving can duplicate the
25 + content, because XWiki may expand the macro output into the page
26 + body while also keeping the macro itself.
27 + - All six links are unchanged from your original page, including
28 + the ?oidc.skipped= parameters on the two footer links.
29 + - Product logos still load from your wiki. The five photographs
30 + are embedded (base64) from the Brand Guide 2025, p.13, so they
31 + need no hosting. To swap one for a hosted image instead, replace
32 + that img's src="data:image/jpeg;base64,..." with a URL.
33 + ============================================================
34 +-->
35 +<style>
36 +@import url('https://fonts.googleapis.com/css2?family=Host+Grotesk:wght@300;400;600;800&display=swap');
37 +
38 + /* Safety net: if the wiki ever renders this block twice,
39 + show only the first copy. */
40 + .fdm-hub ~ .fdm-hub { display: none !important; }
41 +
42 + /* ---- FirstDigital brand tokens (Brand Guide 2025, p.11) ---- */
43 + .fdm-hub {
44 + --fd-navy: #003366; /* headlines, backgrounds, icons */
45 + --fd-blue: #307ab2; /* headlines, backgrounds, icons */
46 + --fd-blue-bright: #38b2e3; /* stand-out headlines, icons */
47 + --fd-red: #cf333d; /* accents - use selectively */
48 + --fd-body: #2e404d; /* paragraph text */
49 + --fd-secondary: #8f9499; /* secondary text */
50 + --fd-bg-mid: #dedede; /* backgrounds */
51 + --fd-bg-light: #f0f0f0; /* backgrounds */
52 + --fd-white: #ffffff;
53 + --ms-azure: #0078d4; /* Microsoft's own brand blue */
54 + }
55 +
56 + .fdm-hub, .fdm-hub * { box-sizing: border-box; }
57 +
58 + .fdm-hub {
59 + font-family: 'Host Grotesk', 'Segoe UI', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
60 + font-weight: 300;
61 + color: var(--fd-body);
62 + background: var(--fd-white);
63 + max-width: 1000px;
64 + margin: 0 auto;
65 + padding: 0 20px 28px;
66 + -webkit-font-smoothing: antialiased;
67 + }
68 +
69 + /* ---- Masthead: full-colour logo on white (Logo Rules, p.10) ---- */
70 + .fdm-masthead {
71 + display: flex;
72 + align-items: center;
73 + justify-content: space-between;
74 + gap: 20px;
75 + flex-wrap: wrap;
76 + padding: 22px 0 18px;
77 + border-bottom: 1px solid var(--fd-bg-mid);
78 + }
79 +
80 + .fdm-masthead img { height: 46px; width: auto; display: block; }
81 +
82 + .fdm-masthead-label {
83 + font-size: 12px;
84 + font-weight: 600;
85 + letter-spacing: 0.16em;
86 + text-transform: uppercase;
87 + color: var(--fd-secondary);
88 + white-space: nowrap;
89 + }
90 +
91 + /* ---- Hero ---- */
92 + .fdm-hero {
93 + position: relative;
94 + margin-top: 22px;
95 + border-radius: 6px;
96 + overflow: hidden;
97 + min-height: 250px;
98 + display: flex;
99 + align-items: flex-end;
100 + }
101 +
102 + .fdm-hero-img {
103 + position: absolute;
104 + top: 0; right: 0; bottom: 0; left: 0;
105 + width: 100%; height: 100%;
106 + object-fit: cover;
107 + display: block;
108 + }
109 +
110 + /* explicit offsets, not the inset shorthand, for wider support */
111 + .fdm-hero::after {
112 + content: "";
113 + position: absolute;
114 + top: 0; right: 0; bottom: 0; left: 0;
115 + background: linear-gradient(100deg,
116 + rgba(0,51,102,0.94) 0%,
117 + rgba(0,51,102,0.86) 42%,
118 + rgba(0,51,102,0.30) 100%);
119 + }
120 +
121 + .fdm-hero-inner {
122 + position: relative;
123 + z-index: 1;
124 + padding: 32px 32px 30px;
125 + max-width: 600px;
126 + }
127 +
128 + /* red rule = brand accent motif (Brand Guide p.4) */
129 + .fdm-rule {
130 + width: 62px; height: 4px;
131 + background: var(--fd-red);
132 + border: 0;
133 + margin: 0 0 16px;
134 + }
135 +
136 + .fdm-eyebrow {
137 + font-size: 12px;
138 + font-weight: 600;
139 + letter-spacing: 0.18em;
140 + text-transform: uppercase;
141 + color: var(--fd-blue-bright);
142 + margin-bottom: 9px;
143 + }
144 +
145 + .fdm-hero h1 {
146 + font-size: clamp(26px, 3.6vw, 36px);
147 + font-weight: 800;
148 + line-height: 1.14;
149 + letter-spacing: -0.01em;
150 + color: var(--fd-white);
151 + margin: 0 0 11px;
152 + }
153 +
154 + .fdm-hero p {
155 + font-size: 15px;
156 + font-weight: 300;
157 + line-height: 1.6;
158 + color: #dbe6ef;
159 + margin: 0;
160 + max-width: 470px;
161 + }
162 +
163 + /* ---- Card grid ---- */
164 + .fdm-grid {
165 + display: grid;
166 + grid-template-columns: repeat(2, 1fr);
167 + gap: 22px;
168 + margin-top: 24px;
169 + }
170 +
171 + .fdm-card {
172 + display: flex;
173 + flex-direction: column;
174 + background: var(--fd-white);
175 + border: 1px solid var(--fd-bg-mid);
176 + border-radius: 6px;
177 + overflow: hidden;
178 + text-decoration: none !important;
179 + color: inherit;
180 + height: 100%;
181 + transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
182 + }
183 +
184 + .fdm-card:hover {
185 + transform: translateY(-3px);
186 + border-color: var(--fd-blue-bright);
187 + box-shadow: 0 12px 26px rgba(0,51,102,0.14);
188 + }
189 +
190 + .fdm-card:focus-visible {
191 + outline: 3px solid var(--fd-blue-bright);
192 + outline-offset: 2px;
193 + }
194 +
195 + .fdm-media {
196 + position: relative;
197 + height: 132px;
198 + background: var(--fd-bg-light);
199 + flex: 0 0 auto;
200 + /* no overflow:hidden here - the logo badge overhangs the bottom
201 + edge on purpose. The photo is already clipped by object-fit,
202 + and .fdm-card's own overflow:hidden keeps the rounded corners. */
203 + }
204 +
205 + .fdm-media img {
206 + width: 100%; height: 100%;
207 + object-fit: cover;
208 + display: block;
209 + }
210 +
211 + .fdm-media::after {
212 + content: "";
213 + position: absolute;
214 + top: 0; right: 0; bottom: 0; left: 0;
215 + background: linear-gradient(180deg,
216 + rgba(0,51,102,0.06) 0%, rgba(0,40,79,0.52) 100%);
217 + }
218 +
219 + /* white badge keeps every logo brand-legal over a photo (p.10) */
220 + .fdm-badge {
221 + position: absolute;
222 + left: 18px;
223 + bottom: 0;
224 + z-index: 1;
225 + transform: translateY(50%);
226 + width: 58px; height: 58px;
227 + border-radius: 8px;
228 + background: var(--fd-white);
229 + box-shadow: 0 5px 14px rgba(0,0,0,0.18);
230 + display: flex;
231 + align-items: center;
232 + justify-content: center;
233 + overflow: hidden;
234 + }
235 +
236 + .fdm-badge img { object-fit: contain; display: block; }
237 +
238 + .fdm-logo-webex { width: 74%; height: auto; }
239 + .fdm-logo-teams { width: 64%; height: auto; }
240 + .fdm-logo-firstdigital { width: 84%; height: auto; }
241 +
242 + /* icons: dark-blue stroke, bright-blue accent (Brand Guide p.14) */
243 + .fdm-badge svg {
244 + width: 26px; height: 26px;
245 + fill: none;
246 + stroke: var(--fd-navy);
247 + stroke-width: 1.7;
248 + stroke-linecap: round;
249 + stroke-linejoin: round;
250 + }
251 +
252 + .fdm-badge svg .accent { stroke: var(--fd-blue-bright); }
253 +
254 + .fdm-body {
255 + padding: 38px 22px 22px;
256 + display: flex;
257 + flex-direction: column;
258 + flex: 1 1 auto;
259 + }
260 +
261 + .fdm-title {
262 + display: block;
263 + font-size: 16.5px;
264 + font-weight: 800;
265 + line-height: 1.28;
266 + color: var(--fd-navy);
267 + }
268 +
269 + .fdm-sub {
270 + display: block;
271 + font-size: 13.5px;
272 + font-weight: 300;
273 + line-height: 1.55;
274 + color: var(--fd-body);
275 + margin-top: 5px;
276 + }
277 +
278 + .fdm-cta {
279 + display: flex;
280 + align-items: center;
281 + gap: 7px;
282 + margin-top: auto;
283 + padding-top: 16px;
284 + font-size: 13px;
285 + font-weight: 600;
286 + color: var(--fd-red);
287 + }
288 +
289 + .fdm-cta svg {
290 + width: 15px; height: 15px;
291 + fill: none;
292 + stroke: var(--fd-red);
293 + stroke-width: 2;
294 + stroke-linecap: round;
295 + stroke-linejoin: round;
296 + transition: transform .2s ease;
297 + }
298 +
299 + .fdm-card:hover .fdm-cta svg { transform: translateX(4px); }
300 +
301 + /* ---- Footer ---- */
302 + .fdm-footer {
303 + margin-top: 32px;
304 + padding-top: 18px;
305 + border-top: 1px solid var(--fd-bg-mid);
306 + display: flex;
307 + justify-content: center;
308 + align-items: center;
309 + flex-wrap: wrap;
310 + gap: 14px;
311 + font-size: 13px;
312 + }
313 +
314 + .fdm-footer a {
315 + font-weight: 600;
316 + text-decoration: none !important;
317 + color: var(--fd-blue);
318 + }
319 +
320 + .fdm-footer a:hover { text-decoration: underline !important; }
321 +
322 + .fdm-footer a:focus-visible {
323 + outline: 2px solid var(--fd-blue-bright);
324 + outline-offset: 3px;
325 + }
326 +
327 + .fdm-brand-first { color: var(--fd-blue); }
328 + .fdm-brand-second { color: var(--fd-navy); }
329 + .fdm-azure { color: var(--ms-azure); }
330 + .fdm-divider { color: var(--fd-bg-mid); font-weight: 300; }
331 +
332 + @media (max-width: 768px) {
333 + .fdm-grid { grid-template-columns: 1fr; }
334 + .fdm-hub { padding: 0 12px 22px; }
335 + .fdm-masthead img { height: 38px; }
336 + .fdm-hero { min-height: 220px; }
337 + .fdm-hero-inner { padding: 24px 22px 22px; }
338 + }
339 +
340 + @media (prefers-reduced-motion: reduce) {
341 + .fdm-card, .fdm-cta svg { transition: none; }
342 + }
343 +
344 +</style>
345 +
346 +<div class="fdm-hub">
347 +
348 + <div class="fdm-masthead">
349 + <img src="https://learn.firstdigital.com/bin/download/Main/WebHome/FirstDigital-Logo.png?rev=1.3" alt="FirstDigital">
350 + <span class="fdm-masthead-label">Fiber &middot; Internet &middot; Cloud &middot; Voice</span>
351 + </div>
352 +
353 + <section class="fdm-hero">
354 + <img class="fdm-hero-img" src="https://learn.firstdigital.com/bin/download/Main/WebHome/ProductDocIMG.jpg?rev=1.3">
355 + <div class="fdm-hero-inner">
356 + <hr class="fdm-rule">
357 + <div class="fdm-eyebrow">Learning Center</div>
358 + <h1>Product Documentation</h1>
359 + <p>Guides, answers, and implementation resources for your FirstDigital voice services. Choose a product to get started.</p>
360 + </div>
361 + </section>
362 +
363 + <div class="fdm-grid">
364 +
365 + <a class="fdm-card" href="https://learn.firstdigital.com/bin/view/CCP/">
366 + <span class="fdm-media">
367 + <img src="https://learn.firstdigital.com/bin/download/Main/WebHome/CloudConnectedCCP.jpg?rev=1.3">
368 + <span class="fdm-badge"><img class="fdm-logo-webex" src="https://learn.firstdigital.com/bin/download/Main/WebHome/Webex-Symbol.png?rev=1.1" alt="Webex"></span>
369 + </span>
370 + <span class="fdm-body">
371 + <span class="fdm-title">Cloud Connected PSTN (CCP)</span>
372 + <span class="fdm-sub">Webex integration</span>
373 + <span class="fdm-cta">Open CCP docs <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 12h15M13 6l6 6-6 6"/></svg></span>
374 + </span>
375 + </a>
376 +
377 + <a class="fdm-card" href="https://learn.firstdigital.com/bin/view/Teams/">
378 + <span class="fdm-media">
379 + <img src="https://learn.firstdigital.com/bin/download/Main/WebHome/MicrosoftTeamsPeople.jpg?rev=1.3">
380 + <span class="fdm-badge"><img class="fdm-logo-teams" src="https://learn.firstdigital.com/bin/download/Main/WebHome/MS%20teams.webp?rev=1.1" alt="Microsoft Teams"></span>
381 + </span>
382 + <span class="fdm-body">
383 + <span class="fdm-title">Microsoft Teams</span>
384 + <span class="fdm-sub">Direct Routing</span>
385 + <span class="fdm-cta">Open Teams docs <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 12h15M13 6l6 6-6 6"/></svg></span>
386 + </span>
387 + </a>
388 +
389 + <a class="fdm-card" href="https://learn.firstdigital.com/bin/view/SIP/">
390 + <span class="fdm-media">
391 + <img src="https://learn.firstdigital.com/bin/download/Main/WebHome/FDSipTrunkPerson.jpg?rev=1.3">
392 + <span class="fdm-badge"><img class="fdm-logo-firstdigital" src="https://learn.firstdigital.com/bin/download/Main/WebHome/FirstDigital-Logo.png?rev=1.3" alt="FirstDigital"></span>
393 + </span>
394 + <span class="fdm-body">
395 + <span class="fdm-title">FirstDigital SIP Trunk</span>
396 + <span class="fdm-sub">Voice connectivity</span>
397 + <span class="fdm-cta">Open SIP docs <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 12h15M13 6l6 6-6 6"/></svg></span>
398 + </span>
399 + </a>
400 +
401 + <a class="fdm-card" href="https://learn.firstdigital.com/bin/view/Support/">
402 + <span class="fdm-media">
403 + <img src="https://learn.firstdigital.com/bin/download/Main/WebHome/SupportPeople.jpg?rev=1.3">
404 + <span class="fdm-badge"><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path class="accent" d="M9.2 9.3a3 3 0 0 1 5.6 1c0 1.9-2.8 2.4-2.8 4M12 17.4v.01"/></svg></span>
405 + </span>
406 + <span class="fdm-body">
407 + <span class="fdm-title">Support</span>
408 + <span class="fdm-sub">Resources and contact information</span>
409 + <span class="fdm-cta">Get support <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 12h15M13 6l6 6-6 6"/></svg></span>
410 + </span>
411 + </a>
412 + </div>
413 +
414 + <div class="fdm-footer">
415 + <a href="https://learn.firstdigital.com/bin/view/Main/?oidc.skipped=true"><span class="fdm-brand-first">First</span><span class="fdm-brand-second">Digital</span></a>
416 + <span class="fdm-divider">|</span>
417 + <a class="fdm-azure" href="https://learn.firstdigital.com/bin/view/Main/?oidc.skipped=false">Microsoft Azure</a>
418 + </div>
419 +
420 +</div>
8 8  {{/html}}