Skip to Content

Wiki source code of

Version 26.1 by Chris Workman on 2026/09/18 21:39
Show last authors
1 (% class="fdm-hub" %)
2 (((
3 {{html clean="false"}}
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 .fdm-eyebrow {
127 font-size: 12px;
128 font-weight: 600;
129 letter-spacing: 0.18em;
130 text-transform: uppercase;
131 color: var(--fd-blue-bright);
132 margin-bottom: 9px;
133 }
134
135 .fdm-hero h1 {
136 font-size: clamp(26px, 3.6vw, 36px);
137 font-weight: 800;
138 line-height: 1.14;
139 letter-spacing: -0.01em;
140 color: var(--fd-white);
141 margin: 0 0 11px;
142 }
143
144 .fdm-hero p {
145 font-size: 15px;
146 font-weight: 300;
147 line-height: 1.6;
148 color: #dbe6ef;
149 margin: 0;
150 max-width: 470px;
151 }
152
153 /* ---- Card grid ---- */
154 .fdm-grid {
155 display: grid;
156 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
157 gap: 22px;
158 margin-top: 24px;
159 }
160
161 .fdm-card {
162 display: flex;
163 flex-direction: column;
164 background: var(--fd-white);
165 border: 1px solid var(--fd-bg-mid);
166 border-radius: 6px;
167 overflow: hidden;
168 text-decoration: none !important;
169 color: inherit;
170 height: 100%;
171 transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
172 }
173
174 .fdm-card:hover {
175 transform: translateY(-3px);
176 border-color: var(--fd-blue-bright);
177 box-shadow: 0 12px 26px rgba(0,51,102,0.14);
178 }
179
180 .fdm-card:focus-visible {
181 outline: 3px solid var(--fd-blue-bright);
182 outline-offset: 2px;
183 }
184
185 .fdm-media {
186 position: relative;
187 height: 132px;
188 background: linear-gradient(135deg, var(--fd-navy) 0%, var(--fd-blue) 100%);
189 flex: 0 0 auto;
190 /* no overflow:hidden here - the logo badge overhangs the bottom
191 edge on purpose. .fdm-card's own overflow:hidden keeps the
192 rounded corners. */
193 }
194
195 /* white badge keeps every logo brand-legal over the gradient (p.10) */
196 .fdm-badge {
197 position: absolute;
198 left: 18px;
199 bottom: 0;
200 z-index: 1;
201 transform: translateY(50%);
202 width: 58px; height: 58px;
203 border-radius: 8px;
204 background: var(--fd-white);
205 box-shadow: 0 5px 14px rgba(0,0,0,0.18);
206 display: flex;
207 align-items: center;
208 justify-content: center;
209 overflow: hidden;
210 }
211
212 .fdm-badge img { object-fit: contain; display: block; }
213
214 .fdm-logo-webex { width: 74%; height: auto; }
215 .fdm-logo-teams { width: 64%; height: auto; }
216 .fdm-logo-firstdigital { width: 84%; height: auto; }
217
218 /* icons: dark-blue stroke, bright-blue accent (Brand Guide p.14) */
219 .fdm-badge svg {
220 width: 26px; height: 26px;
221 fill: none;
222 stroke: var(--fd-navy);
223 stroke-width: 1.7;
224 stroke-linecap: round;
225 stroke-linejoin: round;
226 }
227
228 .fdm-badge svg .accent { stroke: var(--fd-blue-bright); }
229
230 .fdm-body {
231 padding: 38px 22px 22px;
232 display: flex;
233 flex-direction: column;
234 flex: 1 1 auto;
235 }
236
237 .fdm-title {
238 display: block;
239 font-size: 16.5px;
240 font-weight: 800;
241 line-height: 1.28;
242 color: var(--fd-navy);
243 }
244
245 .fdm-sub {
246 display: block;
247 font-size: 13.5px;
248 font-weight: 300;
249 line-height: 1.55;
250 color: var(--fd-body);
251 margin-top: 5px;
252 }
253
254 .fdm-cta {
255 display: flex;
256 align-items: center;
257 gap: 7px;
258 margin-top: auto;
259 padding-top: 16px;
260 font-size: 13px;
261 font-weight: 600;
262 color: var(--fd-red);
263 }
264
265 .fdm-cta svg {
266 width: 15px; height: 15px;
267 fill: none;
268 stroke: var(--fd-red);
269 stroke-width: 2;
270 stroke-linecap: round;
271 stroke-linejoin: round;
272 transition: transform .2s ease;
273 }
274
275 .fdm-card:hover .fdm-cta svg { transform: translateX(4px); }
276
277 /* ---- Footer ---- */
278 .fdm-footer {
279 margin-top: 32px;
280 padding-top: 18px;
281 border-top: 1px solid var(--fd-bg-mid);
282 display: flex;
283 justify-content: center;
284 align-items: center;
285 flex-wrap: wrap;
286 gap: 14px;
287 font-size: 13px;
288 }
289
290 .fdm-footer a {
291 font-weight: 600;
292 text-decoration: none !important;
293 color: var(--fd-blue);
294 }
295
296 .fdm-footer a:hover { text-decoration: underline !important; }
297
298 .fdm-footer a:focus-visible {
299 outline: 2px solid var(--fd-blue-bright);
300 outline-offset: 3px;
301 }
302
303 .fdm-brand-first { color: var(--fd-blue); }
304 .fdm-brand-second { color: var(--fd-navy); }
305 .fdm-azure { color: var(--ms-azure); }
306 .fdm-divider { color: var(--fd-bg-mid); font-weight: 300; }
307
308 @media (max-width: 768px) {
309 .fdm-hub { padding: 0 12px 22px; }
310 .fdm-masthead img { height: 38px; }
311 .fdm-hero { min-height: 220px; }
312 .fdm-hero-inner { padding: 24px 22px 22px; }
313 }
314
315 @media (prefers-reduced-motion: reduce) {
316 .fdm-card, .fdm-cta svg { transition: none; }
317 }
318
319 </style>
320
321 <div class="fdm-hub">
322
323 <div class="fdm-masthead">
324 <img src="https://learn.firstdigital.com/bin/download/Main/WebHome/FirstDigital-Logo.png?rev=1.3" alt="FirstDigital">
325 <span class="fdm-masthead-label">Fiber &middot; Internet &middot; Cloud &middot; Voice</span>
326 </div>
327
328 <section class="fdm-hero">
329 <div class="fdm-hero-inner">
330 <div class="fdm-eyebrow">Learning Center</div>
331 <h1>Product Documentation</h1>
332 <p>Guides, answers, and implementation resources for your FirstDigital voice services. Choose a product to get started.</p>
333 </div>
334 </section>
335
336 <div class="fdm-grid">
337
338 <a class="fdm-card" href="https://learn.firstdigital.com/bin/view/Teams/">
339 <span class="fdm-media">
340 <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>
341 </span>
342 <span class="fdm-body">
343 <span class="fdm-title">Microsoft Teams</span>
344 <span class="fdm-sub">Direct Routing</span>
345 <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>
346 </span>
347 </a>
348
349 <a class="fdm-card" href="https://learn.firstdigital.com/bin/view/CCP/Cloud%20Connect%20PSTN%20%28CCP%29%20Main%20Page/">
350 <span class="fdm-media">
351 <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>
352 </span>
353 <span class="fdm-body">
354 <span class="fdm-title">Cloud Connected PSTN (CCP)</span>
355 <span class="fdm-sub">Webex integration</span>
356 <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>
357 </span>
358 </a>
359
360 <a class="fdm-card" href="https://learn.firstdigital.com/bin/view/Webex/">
361 <span class="fdm-media">
362 <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>
363 </span>
364 <span class="fdm-body">
365 <span class="fdm-title">Webex Calling</span>
366 <span class="fdm-sub">Control Hub &amp; configuration</span>
367 <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>
368 </span>
369 </a>
370
371 <a class="fdm-card" href="https://learn.firstdigital.com/bin/view/CloudPBX/">
372 <span class="fdm-media">
373 <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>
374 </span>
375 <span class="fdm-body">
376 <span class="fdm-title">FirstDigital CloudPBX</span>
377 <span class="fdm-sub">Hosted PBX platform</span>
378 <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>
379 </span>
380 </a>
381
382 <a class="fdm-card" href="https://learn.firstdigital.com/bin/view/SIP/">
383 <span class="fdm-media">
384 <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>
385 </span>
386 <span class="fdm-body">
387 <span class="fdm-title">FirstDigital SIP Trunk</span>
388 <span class="fdm-sub">Voice connectivity</span>
389 <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>
390 </span>
391 </a>
392 </div>
393
394 <div class="fdm-footer">
395 <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>
396 <span class="fdm-divider">|</span>
397 <a class="fdm-azure" href="https://learn.firstdigital.com/bin/view/Main/?oidc.skipped=false">Microsoft Azure</a>
398 </div>
399
400 </div>
401 {{/html}}
402 )))