Skip to Content

Changes for page Sandbox Test Page 3

Last modified by Jareth Carpenter on 2026/08/20 22:29
From version 55.2
edited by Jareth Carpenter
on 2026/08/20 16:56
Change comment: Auto-saved during real-time collaboration
To version 51.1
edited by Jareth Carpenter
on 2026/08/17 22:43
Change comment: There is no comment for this version

Summary

Details

Page properties
Content
... ... @@ -1,21 +1,14 @@
1 1  {{html clean="false"}}
2 -
3 3  <!--
4 4   ============================================================
5 5   FirstDigital - Learning Center Menu (XWiki fragment)
6 6   ============================================================
7 -
8 8   HOW TO USE
9 9   1. Edit the wiki page in SOURCE / WIKI mode (never WYSIWYG).
10 10   2. Select all existing page content and delete it.
11 11   3. Paste:
12 -
13 - {{html clean="false"}}
14 14   ...everything in this file...
15 - {{/html}}
16 -
17 17   4. Save & View.
18 -
19 19   IMPORTANT
20 20   - This file is a FRAGMENT. It deliberately contains no DOCTYPE
21 21   declaration and no html / head / body elements. Everything is
... ... @@ -34,11 +34,9 @@
34 34  -->
35 35  <style>
36 36  @import url('https://fonts.googleapis.com/css2?family=Host+Grotesk:wght@300;400;600;800&display=swap');
37 -
38 38   /* Safety net: if the wiki ever renders this block twice,
39 39   show only the first copy. */
40 40   .fdm-hub ~ .fdm-hub { display: none !important; }
41 -
42 42   /* ---- FirstDigital brand tokens (Brand Guide 2025, p.11) ---- */
43 43   .fdm-hub {
44 44   --fd-navy: #003366; /* headlines, backgrounds, icons */
... ... @@ -52,9 +52,7 @@
52 52   --fd-white: #ffffff;
53 53   --ms-azure: #0078d4; /* Microsoft's own brand blue */
54 54   }
55 -
56 56   .fdm-hub, .fdm-hub * { box-sizing: border-box; }
57 -
58 58   .fdm-hub {
59 59   font-family: 'Host Grotesk', 'Segoe UI', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
60 60   font-weight: 300;
... ... @@ -65,7 +65,6 @@
65 65   padding: 0 20px 28px;
66 66   -webkit-font-smoothing: antialiased;
67 67   }
68 -
69 69   /* ---- Masthead: full-colour logo on white (Logo Rules, p.10) ---- */
70 70   .fdm-masthead {
71 71   display: flex;
... ... @@ -76,9 +76,7 @@
76 76   padding: 22px 0 18px;
77 77   border-bottom: 1px solid var(--fd-bg-mid);
78 78   }
79 -
80 80   .fdm-masthead img { height: 46px; width: auto; display: block; }
81 -
82 82   .fdm-masthead-label {
83 83   font-size: 12px;
84 84   font-weight: 600;
... ... @@ -87,7 +87,6 @@
87 87   color: var(--fd-secondary);
88 88   white-space: nowrap;
89 89   }
90 -
91 91   /* ---- Hero ---- */
92 92   .fdm-hero {
93 93   position: relative;
... ... @@ -98,7 +98,6 @@
98 98   display: flex;
99 99   align-items: flex-end;
100 100   }
101 -
102 102   .fdm-hero-img {
103 103   position: absolute;
104 104   top: 0; right: 0; bottom: 0; left: 0;
... ... @@ -106,7 +106,6 @@
106 106   object-fit: cover;
107 107   display: block;
108 108   }
109 -
110 110   /* explicit offsets, not the inset shorthand, for wider support */
111 111   .fdm-hero::after {
112 112   content: "";
... ... @@ -117,7 +117,6 @@
117 117   rgba(0,51,102,0.86) 42%,
118 118   rgba(0,51,102,0.30) 100%);
119 119   }
120 -
121 121   .fdm-hero-inner {
122 122   position: relative;
123 123   z-index: 1;
... ... @@ -124,7 +124,6 @@
124 124   padding: 32px 32px 30px;
125 125   max-width: 600px;
126 126   }
127 -
128 128   /* red rule = brand accent motif (Brand Guide p.4) */
129 129   .fdm-rule {
130 130   width: 62px; height: 4px;
... ... @@ -132,7 +132,6 @@
132 132   border: 0;
133 133   margin: 0 0 16px;
134 134   }
135 -
136 136   .fdm-eyebrow {
137 137   font-size: 12px;
138 138   font-weight: 600;
... ... @@ -141,7 +141,6 @@
141 141   color: var(--fd-blue-bright);
142 142   margin-bottom: 9px;
143 143   }
144 -
145 145   .fdm-hero h1 {
146 146   font-size: clamp(26px, 3.6vw, 36px);
147 147   font-weight: 800;
... ... @@ -150,7 +150,6 @@
150 150   color: var(--fd-white);
151 151   margin: 0 0 11px;
152 152   }
153 -
154 154   .fdm-hero p {
155 155   font-size: 15px;
156 156   font-weight: 300;
... ... @@ -159,7 +159,6 @@
159 159   margin: 0;
160 160   max-width: 470px;
161 161   }
162 -
163 163   /* ---- Card grid ---- */
164 164   .fdm-grid {
165 165   display: grid;
... ... @@ -167,7 +167,6 @@
167 167   gap: 22px;
168 168   margin-top: 24px;
169 169   }
170 -
171 171   .fdm-card {
172 172   display: flex;
173 173   flex-direction: column;
... ... @@ -180,18 +180,15 @@
180 180   height: 100%;
181 181   transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
182 182   }
183 -
184 184   .fdm-card:hover {
185 185   transform: translateY(-3px);
186 186   border-color: var(--fd-blue-bright);
187 187   box-shadow: 0 12px 26px rgba(0,51,102,0.14);
188 188   }
189 -
190 190   .fdm-card:focus-visible {
191 191   outline: 3px solid var(--fd-blue-bright);
192 192   outline-offset: 2px;
193 193   }
194 -
195 195   .fdm-media {
196 196   position: relative;
197 197   height: 132px;
... ... @@ -201,13 +201,11 @@
201 201   edge on purpose. The photo is already clipped by object-fit,
202 202   and .fdm-card's own overflow:hidden keeps the rounded corners. */
203 203   }
204 -
205 205   .fdm-media img {
206 206   width: 100%; height: 100%;
207 207   object-fit: cover;
208 208   display: block;
209 209   }
210 -
211 211   .fdm-media::after {
212 212   content: "";
213 213   position: absolute;
... ... @@ -215,7 +215,6 @@
215 215   background: linear-gradient(180deg,
216 216   rgba(0,51,102,0.06) 0%, rgba(0,40,79,0.52) 100%);
217 217   }
218 -
219 219   /* white badge keeps every logo brand-legal over a photo (p.10) */
220 220   .fdm-badge {
221 221   position: absolute;
... ... @@ -232,13 +232,10 @@
232 232   justify-content: center;
233 233   overflow: hidden;
234 234   }
235 -
236 236   .fdm-badge img { object-fit: contain; display: block; }
237 -
238 238   .fdm-logo-webex { width: 74%; height: auto; }
239 239   .fdm-logo-teams { width: 64%; height: auto; }
240 240   .fdm-logo-firstdigital { width: 84%; height: auto; }
241 -
242 242   /* icons: dark-blue stroke, bright-blue accent (Brand Guide p.14) */
243 243   .fdm-badge svg {
244 244   width: 26px; height: 26px;
... ... @@ -248,9 +248,7 @@
248 248   stroke-linecap: round;
249 249   stroke-linejoin: round;
250 250   }
251 -
252 252   .fdm-badge svg .accent { stroke: var(--fd-blue-bright); }
253 -
254 254   .fdm-body {
255 255   padding: 38px 22px 22px;
256 256   display: flex;
... ... @@ -257,7 +257,6 @@
257 257   flex-direction: column;
258 258   flex: 1 1 auto;
259 259   }
260 -
261 261   .fdm-title {
262 262   display: block;
263 263   font-size: 16.5px;
... ... @@ -265,7 +265,6 @@
265 265   line-height: 1.28;
266 266   color: var(--fd-navy);
267 267   }
268 -
269 269   .fdm-sub {
270 270   display: block;
271 271   font-size: 13.5px;
... ... @@ -274,7 +274,6 @@
274 274   color: var(--fd-body);
275 275   margin-top: 5px;
276 276   }
277 -
278 278   .fdm-cta {
279 279   display: flex;
280 280   align-items: center;
... ... @@ -285,7 +285,6 @@
285 285   font-weight: 600;
286 286   color: var(--fd-red);
287 287   }
288 -
289 289   .fdm-cta svg {
290 290   width: 15px; height: 15px;
291 291   fill: none;
... ... @@ -295,9 +295,7 @@
295 295   stroke-linejoin: round;
296 296   transition: transform .2s ease;
297 297   }
298 -
299 299   .fdm-card:hover .fdm-cta svg { transform: translateX(4px); }
300 -
301 301   /* ---- Footer ---- */
302 302   .fdm-footer {
303 303   margin-top: 32px;
... ... @@ -310,25 +310,20 @@
310 310   gap: 14px;
311 311   font-size: 13px;
312 312   }
313 -
314 314   .fdm-footer a {
315 315   font-weight: 600;
316 316   text-decoration: none !important;
317 317   color: var(--fd-blue);
318 318   }
319 -
320 320   .fdm-footer a:hover { text-decoration: underline !important; }
321 -
322 322   .fdm-footer a:focus-visible {
323 323   outline: 2px solid var(--fd-blue-bright);
324 324   outline-offset: 3px;
325 325   }
326 -
327 327   .fdm-brand-first { color: var(--fd-blue); }
328 328   .fdm-brand-second { color: var(--fd-navy); }
329 329   .fdm-azure { color: var(--ms-azure); }
330 330   .fdm-divider { color: var(--fd-bg-mid); font-weight: 300; }
331 -
332 332   @media (max-width: 768px) {
333 333   .fdm-grid { grid-template-columns: 1fr; }
334 334   .fdm-hub { padding: 0 12px 22px; }
... ... @@ -336,22 +336,17 @@
336 336   .fdm-hero { min-height: 220px; }
337 337   .fdm-hero-inner { padding: 24px 22px 22px; }
338 338   }
339 -
340 340   @media (prefers-reduced-motion: reduce) {
341 341   .fdm-card, .fdm-cta svg { transition: none; }
342 342   }
343 -
344 344  </style>
345 -
346 346  <div class="fdm-hub">
347 -
348 348   <div class="fdm-masthead">
349 349   <img src="https://learn.firstdigital.com/bin/download/Main/WebHome/FirstDigital-Logo.png?rev=1.3" alt="FirstDigital">
350 350   <span class="fdm-masthead-label">Fiber &middot; Internet &middot; Cloud &middot; Voice</span>
351 351   </div>
352 -
353 353   <section class="fdm-hero">
354 - <img class="fdm-hero-img" src="https://learn.firstdigital.com/bin/download/Main/WebHome/ProductDocIMG.jpg?rev=1.3">
303 + <img class="fdm-hero-img" src="PASTE_YOUR_HERO_BASE64_HERE" alt="">
355 355   <div class="fdm-hero-inner">
356 356   <hr class="fdm-rule">
357 357   <div class="fdm-eyebrow">Learning Center</div>
... ... @@ -359,12 +359,10 @@
359 359   <p>Guides, answers, and implementation resources for your FirstDigital voice services. Choose a product to get started.</p>
360 360   </div>
361 361   </section>
362 -
363 363   <div class="fdm-grid">
364 -
365 365   <a class="fdm-card" href="https://learn.firstdigital.com/bin/view/CCP/">
366 366   <span class="fdm-media">
367 - <img src="https://learn.firstdigital.com/bin/download/Main/WebHome/CloudConnectedCCP.jpg?rev=1.3">
314 + <img src="PASTE_YOUR_WEBEX_CARD_BASE64_HERE" alt="">
368 368   <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>
369 369   </span>
370 370   <span class="fdm-body">
... ... @@ -373,10 +373,9 @@
373 373   <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>
374 374   </span>
375 375   </a>
376 -
377 377   <a class="fdm-card" href="https://learn.firstdigital.com/bin/view/Teams/">
378 378   <span class="fdm-media">
379 - <img src="https://learn.firstdigital.com/bin/download/Main/WebHome/MicrosoftTeamsPeople.jpg?rev=1.3">
325 + <img src="PASTE_YOUR_TEAMS_CARD_BASE64_HERE" alt="">
380 380   <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>
381 381   </span>
382 382   <span class="fdm-body">
... ... @@ -385,10 +385,9 @@
385 385   <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>
386 386   </span>
387 387   </a>
388 -
389 389   <a class="fdm-card" href="https://learn.firstdigital.com/bin/view/SIP/">
390 390   <span class="fdm-media">
391 - <img src="https://learn.firstdigital.com/bin/download/Main/WebHome/FDSipTrunkPerson.jpg?rev=1.3">
336 + <img src="PASTE_YOUR_SIP_CARD_BASE64_HERE" alt="">
392 392   <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>
393 393   </span>
394 394   <span class="fdm-body">
... ... @@ -397,10 +397,9 @@
397 397   <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>
398 398   </span>
399 399   </a>
400 -
401 401   <a class="fdm-card" href="https://learn.firstdigital.com/bin/view/Support/">
402 402   <span class="fdm-media">
403 - <img src="https://learn.firstdigital.com/bin/download/Main/WebHome/SupportPeople.jpg?rev=1.3">
347 + <img src="PASTE_YOUR_SUPPORT_CARD_BASE64_HERE" alt="">
404 404   <span class="fdm-badge"><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path class="accent" d="M9.2 9.3a3 3 0 0 1 5.6 1c0 1.9-2.8 2.4-2.8 4M12 17.4v.01"/></svg></span>
405 405   </span>
406 406   <span class="fdm-body">
... ... @@ -410,12 +410,10 @@
410 410   </span>
411 411   </a>
412 412   </div>
413 -
414 414   <div class="fdm-footer">
415 415   <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>
416 416   <span class="fdm-divider">|</span>
417 417   <a class="fdm-azure" href="https://learn.firstdigital.com/bin/view/Main/?oidc.skipped=false">Microsoft Azure</a>
418 418   </div>
419 -
420 420  </div>
421 421  {{/html}}