Skip to Content

Changes for page

Last modified by Chris Workman on 2026/09/18 21:52
From version 19.1
edited by Chris Workman
on 2026/09/17 20:42
Change comment: There is no comment for this version
To version 24.2
edited by Chris Workman
on 2026/09/18 17:55
Change comment: Auto-saved during real-time collaboration

Summary

Details

Page properties
Content
... ... @@ -1,7 +1,411 @@
1 1  (% class="fdm-hub" %)
2 2  (((
3 -(% class="fdm-masthead" %)
4 -(((
5 -
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 + /* 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>
341 + <p>Guides, answers, and implementation resources for your FirstDigital voice services. Choose your product to get started.</p>
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>
410 +{{/html}}
6 6  )))
7 -)))