Skip to Content

Changes for page

Last modified by Chris Workman on 2026/09/18 21:52
From version 24.1
edited by Chris Workman
on 2026/09/18 17:53
Change comment: There is no comment for this version
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,411 +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 - /* 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 a 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>
6 +f
410 410  {{/html}}
411 411  )))
9 +)))