Skip to Content

Changes for page

Last modified by Chris Workman on 2026/09/18 21:52
From version 26.1
edited by Chris Workman
on 2026/09/18 21:39
Change comment: Upload new image "STIR-SHAKEN-Diagram.jpg", version 1.1
To version 23.1
edited by Chris Workman
on 2026/09/18 17:53
Change comment: There is no comment for this version

Summary

Details

Page properties
Content
... ... @@ -1,402 +1,9 @@
1 1  (% class="fdm-hub" %)
2 2  (((
3 +(% class="fdm-masthead" %)
4 +(((
3 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>
6 +f
401 401  {{/html}}
402 402  )))
9 +)))
STIR-SHAKEN-Diagram.jpg
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.chrisworkmanfirstdigitalcom
Size
... ... @@ -1,1 +1,0 @@
1 -1.7 MB
Content