Skip to Content

Changes for page Sandbox Test Page 3

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

Summary

Details

Page properties
Content
... ... @@ -1,14 +1,21 @@
1 1  {{html clean="false"}}
2 +
2 2  <!--
3 3   ============================================================
4 4   FirstDigital - Learning Center Menu (XWiki fragment)
5 5   ============================================================
7 +
6 6   HOW TO USE
7 7   1. Edit the wiki page in SOURCE / WIKI mode (never WYSIWYG).
8 8   2. Select all existing page content and delete it.
9 9   3. Paste:
12 +
13 + {{html clean="false"}}
10 10   ...everything in this file...
15 + {{/html}}
16 +
11 11   4. Save & View.
18 +
12 12   IMPORTANT
13 13   - This file is a FRAGMENT. It deliberately contains no DOCTYPE
14 14   declaration and no html / head / body elements. Everything is
... ... @@ -27,9 +27,11 @@
27 27  -->
28 28  <style>
29 29  @import url('https://fonts.googleapis.com/css2?family=Host+Grotesk:wght@300;400;600;800&display=swap');
37 +
30 30   /* Safety net: if the wiki ever renders this block twice,
31 31   show only the first copy. */
32 32   .fdm-hub ~ .fdm-hub { display: none !important; }
41 +
33 33   /* ---- FirstDigital brand tokens (Brand Guide 2025, p.11) ---- */
34 34   .fdm-hub {
35 35   --fd-navy: #003366; /* headlines, backgrounds, icons */
... ... @@ -43,7 +43,9 @@
43 43   --fd-white: #ffffff;
44 44   --ms-azure: #0078d4; /* Microsoft's own brand blue */
45 45   }
55 +
46 46   .fdm-hub, .fdm-hub * { box-sizing: border-box; }
57 +
47 47   .fdm-hub {
48 48   font-family: 'Host Grotesk', 'Segoe UI', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
49 49   font-weight: 300;
... ... @@ -54,6 +54,7 @@
54 54   padding: 0 20px 28px;
55 55   -webkit-font-smoothing: antialiased;
56 56   }
68 +
57 57   /* ---- Masthead: full-colour logo on white (Logo Rules, p.10) ---- */
58 58   .fdm-masthead {
59 59   display: flex;
... ... @@ -64,7 +64,9 @@
64 64   padding: 22px 0 18px;
65 65   border-bottom: 1px solid var(--fd-bg-mid);
66 66   }
79 +
67 67   .fdm-masthead img { height: 46px; width: auto; display: block; }
81 +
68 68   .fdm-masthead-label {
69 69   font-size: 12px;
70 70   font-weight: 600;
... ... @@ -73,6 +73,7 @@
73 73   color: var(--fd-secondary);
74 74   white-space: nowrap;
75 75   }
90 +
76 76   /* ---- Hero ---- */
77 77   .fdm-hero {
78 78   position: relative;
... ... @@ -83,6 +83,7 @@
83 83   display: flex;
84 84   align-items: flex-end;
85 85   }
101 +
86 86   .fdm-hero-img {
87 87   position: absolute;
88 88   top: 0; right: 0; bottom: 0; left: 0;
... ... @@ -90,6 +90,7 @@
90 90   object-fit: cover;
91 91   display: block;
92 92   }
109 +
93 93   /* explicit offsets, not the inset shorthand, for wider support */
94 94   .fdm-hero::after {
95 95   content: "";
... ... @@ -100,6 +100,7 @@
100 100   rgba(0,51,102,0.86) 42%,
101 101   rgba(0,51,102,0.30) 100%);
102 102   }
120 +
103 103   .fdm-hero-inner {
104 104   position: relative;
105 105   z-index: 1;
... ... @@ -106,6 +106,7 @@
106 106   padding: 32px 32px 30px;
107 107   max-width: 600px;
108 108   }
127 +
109 109   /* red rule = brand accent motif (Brand Guide p.4) */
110 110   .fdm-rule {
111 111   width: 62px; height: 4px;
... ... @@ -113,6 +113,7 @@
113 113   border: 0;
114 114   margin: 0 0 16px;
115 115   }
135 +
116 116   .fdm-eyebrow {
117 117   font-size: 12px;
118 118   font-weight: 600;
... ... @@ -121,6 +121,7 @@
121 121   color: var(--fd-blue-bright);
122 122   margin-bottom: 9px;
123 123   }
144 +
124 124   .fdm-hero h1 {
125 125   font-size: clamp(26px, 3.6vw, 36px);
126 126   font-weight: 800;
... ... @@ -129,6 +129,7 @@
129 129   color: var(--fd-white);
130 130   margin: 0 0 11px;
131 131   }
153 +
132 132   .fdm-hero p {
133 133   font-size: 15px;
134 134   font-weight: 300;
... ... @@ -137,6 +137,7 @@
137 137   margin: 0;
138 138   max-width: 470px;
139 139   }
162 +
140 140   /* ---- Card grid ---- */
141 141   .fdm-grid {
142 142   display: grid;
... ... @@ -144,6 +144,7 @@
144 144   gap: 22px;
145 145   margin-top: 24px;
146 146   }
170 +
147 147   .fdm-card {
148 148   display: flex;
149 149   flex-direction: column;
... ... @@ -156,15 +156,18 @@
156 156   height: 100%;
157 157   transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
158 158   }
183 +
159 159   .fdm-card:hover {
160 160   transform: translateY(-3px);
161 161   border-color: var(--fd-blue-bright);
162 162   box-shadow: 0 12px 26px rgba(0,51,102,0.14);
163 163   }
189 +
164 164   .fdm-card:focus-visible {
165 165   outline: 3px solid var(--fd-blue-bright);
166 166   outline-offset: 2px;
167 167   }
194 +
168 168   .fdm-media {
169 169   position: relative;
170 170   height: 132px;
... ... @@ -174,11 +174,13 @@
174 174   edge on purpose. The photo is already clipped by object-fit,
175 175   and .fdm-card's own overflow:hidden keeps the rounded corners. */
176 176   }
204 +
177 177   .fdm-media img {
178 178   width: 100%; height: 100%;
179 179   object-fit: cover;
180 180   display: block;
181 181   }
210 +
182 182   .fdm-media::after {
183 183   content: "";
184 184   position: absolute;
... ... @@ -186,6 +186,7 @@
186 186   background: linear-gradient(180deg,
187 187   rgba(0,51,102,0.06) 0%, rgba(0,40,79,0.52) 100%);
188 188   }
218 +
189 189   /* white badge keeps every logo brand-legal over a photo (p.10) */
190 190   .fdm-badge {
191 191   position: absolute;
... ... @@ -202,10 +202,13 @@
202 202   justify-content: center;
203 203   overflow: hidden;
204 204   }
235 +
205 205   .fdm-badge img { object-fit: contain; display: block; }
237 +
206 206   .fdm-logo-webex { width: 74%; height: auto; }
207 207   .fdm-logo-teams { width: 64%; height: auto; }
208 208   .fdm-logo-firstdigital { width: 84%; height: auto; }
241 +
209 209   /* icons: dark-blue stroke, bright-blue accent (Brand Guide p.14) */
210 210   .fdm-badge svg {
211 211   width: 26px; height: 26px;
... ... @@ -215,7 +215,9 @@
215 215   stroke-linecap: round;
216 216   stroke-linejoin: round;
217 217   }
251 +
218 218   .fdm-badge svg .accent { stroke: var(--fd-blue-bright); }
253 +
219 219   .fdm-body {
220 220   padding: 38px 22px 22px;
221 221   display: flex;
... ... @@ -222,6 +222,7 @@
222 222   flex-direction: column;
223 223   flex: 1 1 auto;
224 224   }
260 +
225 225   .fdm-title {
226 226   display: block;
227 227   font-size: 16.5px;
... ... @@ -229,6 +229,7 @@
229 229   line-height: 1.28;
230 230   color: var(--fd-navy);
231 231   }
268 +
232 232   .fdm-sub {
233 233   display: block;
234 234   font-size: 13.5px;
... ... @@ -237,6 +237,7 @@
237 237   color: var(--fd-body);
238 238   margin-top: 5px;
239 239   }
277 +
240 240   .fdm-cta {
241 241   display: flex;
242 242   align-items: center;
... ... @@ -247,6 +247,7 @@
247 247   font-weight: 600;
248 248   color: var(--fd-red);
249 249   }
288 +
250 250   .fdm-cta svg {
251 251   width: 15px; height: 15px;
252 252   fill: none;
... ... @@ -256,7 +256,9 @@
256 256   stroke-linejoin: round;
257 257   transition: transform .2s ease;
258 258   }
298 +
259 259   .fdm-card:hover .fdm-cta svg { transform: translateX(4px); }
300 +
260 260   /* ---- Footer ---- */
261 261   .fdm-footer {
262 262   margin-top: 32px;
... ... @@ -269,20 +269,25 @@
269 269   gap: 14px;
270 270   font-size: 13px;
271 271   }
313 +
272 272   .fdm-footer a {
273 273   font-weight: 600;
274 274   text-decoration: none !important;
275 275   color: var(--fd-blue);
276 276   }
319 +
277 277   .fdm-footer a:hover { text-decoration: underline !important; }
321 +
278 278   .fdm-footer a:focus-visible {
279 279   outline: 2px solid var(--fd-blue-bright);
280 280   outline-offset: 3px;
281 281   }
326 +
282 282   .fdm-brand-first { color: var(--fd-blue); }
283 283   .fdm-brand-second { color: var(--fd-navy); }
284 284   .fdm-azure { color: var(--ms-azure); }
285 285   .fdm-divider { color: var(--fd-bg-mid); font-weight: 300; }
331 +
286 286   @media (max-width: 768px) {
287 287   .fdm-grid { grid-template-columns: 1fr; }
288 288   .fdm-hub { padding: 0 12px 22px; }
... ... @@ -290,17 +290,22 @@
290 290   .fdm-hero { min-height: 220px; }
291 291   .fdm-hero-inner { padding: 24px 22px 22px; }
292 292   }
339 +
293 293   @media (prefers-reduced-motion: reduce) {
294 294   .fdm-card, .fdm-cta svg { transition: none; }
295 295   }
343 +
296 296  </style>
345 +
297 297  <div class="fdm-hub">
347 +
298 298   <div class="fdm-masthead">
299 299   <img src="https://learn.firstdigital.com/bin/download/Main/WebHome/FirstDigital-Logo.png?rev=1.3" alt="FirstDigital">
300 300   <span class="fdm-masthead-label">Fiber &middot; Internet &middot; Cloud &middot; Voice</span>
301 301   </div>
352 +
302 302   <section class="fdm-hero">
303 - <img class="fdm-hero-img" src="PASTE_YOUR_HERO_BASE64_HERE" alt="">
354 + <img class="fdm-hero-img" src="https://learn.firstdigital.com/bin/download/Main/WebHome/ProductDocIMG.jpg?rev=1.3">
304 304   <div class="fdm-hero-inner">
305 305   <hr class="fdm-rule">
306 306   <div class="fdm-eyebrow">Learning Center</div>
... ... @@ -308,10 +308,12 @@
308 308   <p>Guides, answers, and implementation resources for your FirstDigital voice services. Choose a product to get started.</p>
309 309   </div>
310 310   </section>
362 +
311 311   <div class="fdm-grid">
364 +
312 312   <a class="fdm-card" href="https://learn.firstdigital.com/bin/view/CCP/">
313 313   <span class="fdm-media">
314 - <img src="PASTE_YOUR_WEBEX_CARD_BASE64_HERE" alt="">
367 + <img src="https://learn.firstdigital.com/bin/download/Main/WebHome/CloudConnectedCCP.jpg?rev=1.3">
315 315   <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>
316 316   </span>
317 317   <span class="fdm-body">
... ... @@ -320,9 +320,10 @@
320 320   <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>
321 321   </span>
322 322   </a>
376 +
323 323   <a class="fdm-card" href="https://learn.firstdigital.com/bin/view/Teams/">
324 324   <span class="fdm-media">
325 - <img src="PASTE_YOUR_TEAMS_CARD_BASE64_HERE" alt="">
379 + <img src="https://learn.firstdigital.com/bin/download/Main/WebHome/MicrosoftTeamsPeople.jpg?rev=1.3">
326 326   <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>
327 327   </span>
328 328   <span class="fdm-body">
... ... @@ -331,9 +331,10 @@
331 331   <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>
332 332   </span>
333 333   </a>
388 +
334 334   <a class="fdm-card" href="https://learn.firstdigital.com/bin/view/SIP/">
335 335   <span class="fdm-media">
336 - <img src="PASTE_YOUR_SIP_CARD_BASE64_HERE" alt="">
391 + <img src="https://learn.firstdigital.com/bin/download/Main/WebHome/FDSipTrunkPerson.jpg?rev=1.3">
337 337   <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>
338 338   </span>
339 339   <span class="fdm-body">
... ... @@ -342,9 +342,10 @@
342 342   <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>
343 343   </span>
344 344   </a>
400 +
345 345   <a class="fdm-card" href="https://learn.firstdigital.com/bin/view/Support/">
346 346   <span class="fdm-media">
347 - <img src="PASTE_YOUR_SUPPORT_CARD_BASE64_HERE" alt="">
403 + <img src="https://learn.firstdigital.com/bin/download/Main/WebHome/SupportPeople.jpg?rev=1.3">
348 348   <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>
349 349   </span>
350 350   <span class="fdm-body">
... ... @@ -354,10 +354,12 @@
354 354   </span>
355 355   </a>
356 356   </div>
413 +
357 357   <div class="fdm-footer">
358 358   <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>
359 359   <span class="fdm-divider">|</span>
360 360   <a class="fdm-azure" href="https://learn.firstdigital.com/bin/view/Main/?oidc.skipped=false">Microsoft Azure</a>
361 361   </div>
419 +
362 362  </div>
363 363  {{/html}}