Skip to Content

Wiki source code of

Version 24.2 by Chris Workman on 2026/09/18 17:55
Hide last authors
Chris Workman 18.1 1 (% class="fdm-hub" %)
2 (((
Chris Workman 20.1 3 {{html clean="false"}}
Chris Workman 24.1 4 <!--
5 ============================================================
6 FirstDigital - Learning Center Menu (XWiki fragment)
7 ============================================================
8
9 HOW TO USE
10 1. Edit the wiki page in SOURCE / WIKI mode (never WYSIWYG).
11 2. Select all existing page content and delete it.
12 3. Paste:
13
14 {{html clean="false"}}
15 ...everything in this file...
16 {{/html}}
17
18 4. Save & View.
19
20 IMPORTANT
21 - This file is a FRAGMENT. It deliberately contains no DOCTYPE
22 declaration and no html / head / body elements. Everything is
23 scoped inside .fdm-hub so it cannot leak into the wiki theme.
24 - After saving, only ever re-edit this page in SOURCE mode.
25 Opening it in the WYSIWYG editor and saving can duplicate the
26 content, because XWiki may expand the macro output into the page
27 body while also keeping the macro itself.
28 - All embedded stock photography has been removed (the hero image
29 and the CCP / Teams / SIP Trunk card photos). Every card now uses
30 the same brand-gradient panel behind its logo badge, the same
31 style CloudPBX and Webex already used. This drops the page's
32 size dramatically since it no longer carries any base64 images.
33 To bring a photo back on any card, add an <img> inside its
34 .fdm-media the way the badge <img> is already written.
35 - Card order is now: Microsoft Teams, Cloud Connected PSTN (CCP),
36 Webex Calling, FirstDigital CloudPBX, FirstDigital SIP Trunk.
37 Teams leads the list, the two Webex-branded products (CCP and
38 Webex Calling) sit next to each other, and SIP Trunk is last.
39 - The Support card remains removed. CloudPBX and Webex still have
40 PLACEHOLDER hrefs (https://learn.firstdigital.com/bin/view/CloudPBX/
41 and .../Webex/) - update them to the real wiki locations before
42 publishing.
43 - The footer's two links, including the ?oidc.skipped= parameters,
44 are unchanged from your original page.
45 - The page container scales its width with the viewport (max-width
46 1600px, side padding fluid) and the card grid reflows its column
47 count automatically as the window widens or narrows.
48 ============================================================
49 -->
50 <style>
51 @import url('https://fonts.googleapis.com/css2?family=Host+Grotesk:wght@300;400;600;800&display=swap');
52
53 /* Safety net: if the wiki ever renders this block twice,
54 show only the first copy. */
55 .fdm-hub ~ .fdm-hub { display: none !important; }
56
57 /* ---- FirstDigital brand tokens (Brand Guide 2025, p.11) ---- */
58 .fdm-hub {
59 --fd-navy: #003366; /* headlines, backgrounds, icons */
60 --fd-blue: #307ab2; /* headlines, backgrounds, icons */
61 --fd-blue-bright: #38b2e3; /* stand-out headlines, icons */
62 --fd-red: #cf333d; /* accents - use selectively */
63 --fd-body: #2e404d; /* paragraph text */
64 --fd-secondary: #8f9499; /* secondary text */
65 --fd-bg-mid: #dedede; /* backgrounds */
66 --fd-bg-light: #f0f0f0; /* backgrounds */
67 --fd-white: #ffffff;
68 --ms-azure: #0078d4; /* Microsoft's own brand blue */
69 }
70
71 .fdm-hub, .fdm-hub * { box-sizing: border-box; }
72
73 .fdm-hub {
74 font-family: 'Host Grotesk', 'Segoe UI', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
75 font-weight: 300;
76 color: var(--fd-body);
77 background: var(--fd-white);
78 max-width: 1600px;
79 margin: 0 auto;
80 padding: 0 clamp(16px, 4vw, 56px) 28px;
81 width: 100%;
82 -webkit-font-smoothing: antialiased;
83 }
84
85 /* ---- Masthead: full-colour logo on white (Logo Rules, p.10) ---- */
86 .fdm-masthead {
87 display: flex;
88 align-items: center;
89 justify-content: space-between;
90 gap: 20px;
91 flex-wrap: wrap;
92 padding: 22px 0 18px;
93 border-bottom: 1px solid var(--fd-bg-mid);
94 }
95
96 .fdm-masthead img { height: 46px; width: auto; display: block; }
97
98 .fdm-masthead-label {
99 font-size: 12px;
100 font-weight: 600;
101 letter-spacing: 0.16em;
102 text-transform: uppercase;
103 color: var(--fd-secondary);
104 white-space: nowrap;
105 }
106
107 /* ---- Hero (brand-gradient panel, no photo) ---- */
108 .fdm-hero {
109 position: relative;
110 margin-top: 22px;
111 border-radius: 6px;
112 overflow: hidden;
113 min-height: 250px;
114 display: flex;
115 align-items: flex-end;
116 background: linear-gradient(120deg, var(--fd-navy) 0%, var(--fd-blue) 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(auto-fit, minmax(250px, 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: linear-gradient(135deg, var(--fd-navy) 0%, var(--fd-blue) 100%);
197 flex: 0 0 auto;
198 /* no overflow:hidden here - the logo badge overhangs the bottom
199 edge on purpose. .fdm-card's own overflow:hidden keeps the
200 rounded corners. */
201 }
202
203 /* white badge keeps every logo brand-legal over the gradient (p.10) */
204 .fdm-badge {
205 position: absolute;
206 left: 18px;
207 bottom: 0;
208 z-index: 1;
209 transform: translateY(50%);
210 width: 58px; height: 58px;
211 border-radius: 8px;
212 background: var(--fd-white);
213 box-shadow: 0 5px 14px rgba(0,0,0,0.18);
214 display: flex;
215 align-items: center;
216 justify-content: center;
217 overflow: hidden;
218 }
219
220 .fdm-badge img { object-fit: contain; display: block; }
221
222 .fdm-logo-webex { width: 74%; height: auto; }
223 .fdm-logo-teams { width: 64%; height: auto; }
224 .fdm-logo-firstdigital { width: 84%; height: auto; }
225
226 /* icons: dark-blue stroke, bright-blue accent (Brand Guide p.14) */
227 .fdm-badge svg {
228 width: 26px; height: 26px;
229 fill: none;
230 stroke: var(--fd-navy);
231 stroke-width: 1.7;
232 stroke-linecap: round;
233 stroke-linejoin: round;
234 }
235
236 .fdm-badge svg .accent { stroke: var(--fd-blue-bright); }
237
238 .fdm-body {
239 padding: 38px 22px 22px;
240 display: flex;
241 flex-direction: column;
242 flex: 1 1 auto;
243 }
244
245 .fdm-title {
246 display: block;
247 font-size: 16.5px;
248 font-weight: 800;
249 line-height: 1.28;
250 color: var(--fd-navy);
251 }
252
253 .fdm-sub {
254 display: block;
255 font-size: 13.5px;
256 font-weight: 300;
257 line-height: 1.55;
258 color: var(--fd-body);
259 margin-top: 5px;
260 }
261
262 .fdm-cta {
263 display: flex;
264 align-items: center;
265 gap: 7px;
266 margin-top: auto;
267 padding-top: 16px;
268 font-size: 13px;
269 font-weight: 600;
270 color: var(--fd-red);
271 }
272
273 .fdm-cta svg {
274 width: 15px; height: 15px;
275 fill: none;
276 stroke: var(--fd-red);
277 stroke-width: 2;
278 stroke-linecap: round;
279 stroke-linejoin: round;
280 transition: transform .2s ease;
281 }
282
283 .fdm-card:hover .fdm-cta svg { transform: translateX(4px); }
284
285 /* ---- Footer ---- */
286 .fdm-footer {
287 margin-top: 32px;
288 padding-top: 18px;
289 border-top: 1px solid var(--fd-bg-mid);
290 display: flex;
291 justify-content: center;
292 align-items: center;
293 flex-wrap: wrap;
294 gap: 14px;
295 font-size: 13px;
296 }
297
298 .fdm-footer a {
299 font-weight: 600;
300 text-decoration: none !important;
301 color: var(--fd-blue);
302 }
303
304 .fdm-footer a:hover { text-decoration: underline !important; }
305
306 .fdm-footer a:focus-visible {
307 outline: 2px solid var(--fd-blue-bright);
308 outline-offset: 3px;
309 }
310
311 .fdm-brand-first { color: var(--fd-blue); }
312 .fdm-brand-second { color: var(--fd-navy); }
313 .fdm-azure { color: var(--ms-azure); }
314 .fdm-divider { color: var(--fd-bg-mid); font-weight: 300; }
315
316 @media (max-width: 768px) {
317 .fdm-hub { padding: 0 12px 22px; }
318 .fdm-masthead img { height: 38px; }
319 .fdm-hero { min-height: 220px; }
320 .fdm-hero-inner { padding: 24px 22px 22px; }
321 }
322
323 @media (prefers-reduced-motion: reduce) {
324 .fdm-card, .fdm-cta svg { transition: none; }
325 }
326
327 </style>
328
329 <div class="fdm-hub">
330
331 <div class="fdm-masthead">
332 <img src="https://learn.firstdigital.com/bin/download/Main/WebHome/FirstDigital-Logo.png?rev=1.3" alt="FirstDigital">
333 <span class="fdm-masthead-label">Fiber &middot; Internet &middot; Cloud &middot; Voice</span>
334 </div>
335
336 <section class="fdm-hero">
337 <div class="fdm-hero-inner">
338 <hr class="fdm-rule">
339 <div class="fdm-eyebrow">Learning Center</div>
340 <h1>Product Documentation</h1>
Chris Workman 24.2 341 <p>Guides, answers, and implementation resources for your FirstDigital voice services. Choose your product to get started.</p>
Chris Workman 24.1 342 </div>
343 </section>
344
345 <div class="fdm-grid">
346
347 <a class="fdm-card" href="https://learn.firstdigital.com/bin/view/Teams/">
348 <span class="fdm-media">
349 <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>
350 </span>
351 <span class="fdm-body">
352 <span class="fdm-title">Microsoft Teams</span>
353 <span class="fdm-sub">Direct Routing</span>
354 <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>
355 </span>
356 </a>
357
358 <a class="fdm-card" href="https://learn.firstdigital.com/bin/view/CCP/Cloud%20Connect%20PSTN%20%28CCP%29%20Main%20Page/">
359 <span class="fdm-media">
360 <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>
361 </span>
362 <span class="fdm-body">
363 <span class="fdm-title">Cloud Connected PSTN (CCP)</span>
364 <span class="fdm-sub">Webex integration</span>
365 <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>
366 </span>
367 </a>
368
369 <a class="fdm-card" href="https://learn.firstdigital.com/bin/view/Webex/">
370 <span class="fdm-media">
371 <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>
372 </span>
373 <span class="fdm-body">
374 <span class="fdm-title">Webex Calling</span>
375 <span class="fdm-sub">Control Hub &amp; configuration</span>
376 <span class="fdm-cta">Open Webex docs <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 12h15M13 6l6 6-6 6"/></svg></span>
377 </span>
378 </a>
379
380 <a class="fdm-card" href="https://learn.firstdigital.com/bin/view/CloudPBX/">
381 <span class="fdm-media">
382 <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>
383 </span>
384 <span class="fdm-body">
385 <span class="fdm-title">FirstDigital CloudPBX</span>
386 <span class="fdm-sub">Hosted PBX platform</span>
387 <span class="fdm-cta">Open CloudPBX docs <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 12h15M13 6l6 6-6 6"/></svg></span>
388 </span>
389 </a>
390
391 <a class="fdm-card" href="https://learn.firstdigital.com/bin/view/SIP/">
392 <span class="fdm-media">
393 <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>
394 </span>
395 <span class="fdm-body">
396 <span class="fdm-title">FirstDigital SIP Trunk</span>
397 <span class="fdm-sub">Voice connectivity</span>
398 <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>
399 </span>
400 </a>
401 </div>
402
403 <div class="fdm-footer">
404 <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>
405 <span class="fdm-divider">|</span>
406 <a class="fdm-azure" href="https://learn.firstdigital.com/bin/view/Main/?oidc.skipped=false">Microsoft Azure</a>
407 </div>
408
409 </div>
Chris Workman 20.1 410 {{/html}}
Chris Workman 18.1 411 )))