Skip to Content

Changes for page Sandbox Test Page 3

Last modified by Jareth Carpenter on 2026/08/20 22:29
From version 52.1
edited by Jareth Carpenter
on 2026/08/17 22:47
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,10 +1,44 @@
1 1  {{html clean="false"}}
2 -<!-- Here is where the FirstDigital guid goes
2 +
3 +<!--
4 + ============================================================
5 + FirstDigital - Learning Center Menu (XWiki fragment)
6 + ============================================================
7 +
8 + HOW TO USE
9 + 1. Edit the wiki page in SOURCE / WIKI mode (never WYSIWYG).
10 + 2. Select all existing page content and delete it.
11 + 3. Paste:
12 +
13 + {{html clean="false"}}
14 + ...everything in this file...
15 + {{/html}}
16 +
17 + 4. Save & View.
18 +
19 + IMPORTANT
20 + - This file is a FRAGMENT. It deliberately contains no DOCTYPE
21 + declaration and no html / head / body elements. Everything is
22 + scoped inside .fdm-hub so it cannot leak into the wiki theme.
23 + - After saving, only ever re-edit this page in SOURCE mode.
24 + Opening it in the WYSIWYG editor and saving can duplicate the
25 + content, because XWiki may expand the macro output into the page
26 + body while also keeping the macro itself.
27 + - All six links are unchanged from your original page, including
28 + the ?oidc.skipped= parameters on the two footer links.
29 + - Product logos still load from your wiki. The five photographs
30 + are embedded (base64) from the Brand Guide 2025, p.13, so they
31 + need no hosting. To swap one for a hosted image instead, replace
32 + that img's src="data:image/jpeg;base64,..." with a URL.
33 + ============================================================
3 3  -->
4 4  <style>
5 - @import url('https://fonts.googleapies/css2?family=Host+Grotesk:wght@300;400;600800&display=swap');
6 - /* Saftey net comment */
36 +@import url('https://fonts.googleapis.com/css2?family=Host+Grotesk:wght@300;400;600;800&display=swap');
37 +
38 + /* Safety net: if the wiki ever renders this block twice,
39 + show only the first copy. */
7 7   .fdm-hub ~ .fdm-hub { display: none !important; }
41 +
8 8   /* ---- FirstDigital brand tokens (Brand Guide 2025, p.11) ---- */
9 9   .fdm-hub {
10 10   --fd-navy: #003366; /* headlines, backgrounds, icons */
... ... @@ -18,7 +18,9 @@
18 18   --fd-white: #ffffff;
19 19   --ms-azure: #0078d4; /* Microsoft's own brand blue */
20 20   }
55 +
21 21   .fdm-hub, .fdm-hub * { box-sizing: border-box; }
57 +
22 22   .fdm-hub {
23 23   font-family: 'Host Grotesk', 'Segoe UI', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
24 24   font-weight: 300;
... ... @@ -29,6 +29,7 @@
29 29   padding: 0 20px 28px;
30 30   -webkit-font-smoothing: antialiased;
31 31   }
68 +
32 32   /* ---- Masthead: full-colour logo on white (Logo Rules, p.10) ---- */
33 33   .fdm-masthead {
34 34   display: flex;
... ... @@ -39,7 +39,9 @@
39 39   padding: 22px 0 18px;
40 40   border-bottom: 1px solid var(--fd-bg-mid);
41 41   }
79 +
42 42   .fdm-masthead img { height: 46px; width: auto; display: block; }
81 +
43 43   .fdm-masthead-label {
44 44   font-size: 12px;
45 45   font-weight: 600;
... ... @@ -48,6 +48,7 @@
48 48   color: var(--fd-secondary);
49 49   white-space: nowrap;
50 50   }
90 +
51 51   /* ---- Hero ---- */
52 52   .fdm-hero {
53 53   position: relative;
... ... @@ -58,6 +58,7 @@
58 58   display: flex;
59 59   align-items: flex-end;
60 60   }
101 +
61 61   .fdm-hero-img {
62 62   position: absolute;
63 63   top: 0; right: 0; bottom: 0; left: 0;
... ... @@ -65,6 +65,7 @@
65 65   object-fit: cover;
66 66   display: block;
67 67   }
109 +
68 68   /* explicit offsets, not the inset shorthand, for wider support */
69 69   .fdm-hero::after {
70 70   content: "";
... ... @@ -75,6 +75,7 @@
75 75   rgba(0,51,102,0.86) 42%,
76 76   rgba(0,51,102,0.30) 100%);
77 77   }
120 +
78 78   .fdm-hero-inner {
79 79   position: relative;
80 80   z-index: 1;
... ... @@ -81,6 +81,7 @@
81 81   padding: 32px 32px 30px;
82 82   max-width: 600px;
83 83   }
127 +
84 84   /* red rule = brand accent motif (Brand Guide p.4) */
85 85   .fdm-rule {
86 86   width: 62px; height: 4px;
... ... @@ -88,6 +88,7 @@
88 88   border: 0;
89 89   margin: 0 0 16px;
90 90   }
135 +
91 91   .fdm-eyebrow {
92 92   font-size: 12px;
93 93   font-weight: 600;
... ... @@ -96,6 +96,7 @@
96 96   color: var(--fd-blue-bright);
97 97   margin-bottom: 9px;
98 98   }
144 +
99 99   .fdm-hero h1 {
100 100   font-size: clamp(26px, 3.6vw, 36px);
101 101   font-weight: 800;
... ... @@ -104,6 +104,7 @@
104 104   color: var(--fd-white);
105 105   margin: 0 0 11px;
106 106   }
153 +
107 107   .fdm-hero p {
108 108   font-size: 15px;
109 109   font-weight: 300;
... ... @@ -112,6 +112,7 @@
112 112   margin: 0;
113 113   max-width: 470px;
114 114   }
162 +
115 115   /* ---- Card grid ---- */
116 116   .fdm-grid {
117 117   display: grid;
... ... @@ -119,6 +119,7 @@
119 119   gap: 22px;
120 120   margin-top: 24px;
121 121   }
170 +
122 122   .fdm-card {
123 123   display: flex;
124 124   flex-direction: column;
... ... @@ -131,15 +131,18 @@
131 131   height: 100%;
132 132   transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
133 133   }
183 +
134 134   .fdm-card:hover {
135 135   transform: translateY(-3px);
136 136   border-color: var(--fd-blue-bright);
137 137   box-shadow: 0 12px 26px rgba(0,51,102,0.14);
138 138   }
189 +
139 139   .fdm-card:focus-visible {
140 140   outline: 3px solid var(--fd-blue-bright);
141 141   outline-offset: 2px;
142 142   }
194 +
143 143   .fdm-media {
144 144   position: relative;
145 145   height: 132px;
... ... @@ -149,11 +149,13 @@
149 149   edge on purpose. The photo is already clipped by object-fit,
150 150   and .fdm-card's own overflow:hidden keeps the rounded corners. */
151 151   }
204 +
152 152   .fdm-media img {
153 153   width: 100%; height: 100%;
154 154   object-fit: cover;
155 155   display: block;
156 156   }
210 +
157 157   .fdm-media::after {
158 158   content: "";
159 159   position: absolute;
... ... @@ -161,6 +161,7 @@
161 161   background: linear-gradient(180deg,
162 162   rgba(0,51,102,0.06) 0%, rgba(0,40,79,0.52) 100%);
163 163   }
218 +
164 164   /* white badge keeps every logo brand-legal over a photo (p.10) */
165 165   .fdm-badge {
166 166   position: absolute;
... ... @@ -177,10 +177,13 @@
177 177   justify-content: center;
178 178   overflow: hidden;
179 179   }
235 +
180 180   .fdm-badge img { object-fit: contain; display: block; }
237 +
181 181   .fdm-logo-webex { width: 74%; height: auto; }
182 182   .fdm-logo-teams { width: 64%; height: auto; }
183 183   .fdm-logo-firstdigital { width: 84%; height: auto; }
241 +
184 184   /* icons: dark-blue stroke, bright-blue accent (Brand Guide p.14) */
185 185   .fdm-badge svg {
186 186   width: 26px; height: 26px;
... ... @@ -190,7 +190,9 @@
190 190   stroke-linecap: round;
191 191   stroke-linejoin: round;
192 192   }
251 +
193 193   .fdm-badge svg .accent { stroke: var(--fd-blue-bright); }
253 +
194 194   .fdm-body {
195 195   padding: 38px 22px 22px;
196 196   display: flex;
... ... @@ -197,6 +197,7 @@
197 197   flex-direction: column;
198 198   flex: 1 1 auto;
199 199   }
260 +
200 200   .fdm-title {
201 201   display: block;
202 202   font-size: 16.5px;
... ... @@ -204,6 +204,7 @@
204 204   line-height: 1.28;
205 205   color: var(--fd-navy);
206 206   }
268 +
207 207   .fdm-sub {
208 208   display: block;
209 209   font-size: 13.5px;
... ... @@ -212,6 +212,7 @@
212 212   color: var(--fd-body);
213 213   margin-top: 5px;
214 214   }
277 +
215 215   .fdm-cta {
216 216   display: flex;
217 217   align-items: center;
... ... @@ -222,6 +222,7 @@
222 222   font-weight: 600;
223 223   color: var(--fd-red);
224 224   }
288 +
225 225   .fdm-cta svg {
226 226   width: 15px; height: 15px;
227 227   fill: none;
... ... @@ -231,7 +231,9 @@
231 231   stroke-linejoin: round;
232 232   transition: transform .2s ease;
233 233   }
298 +
234 234   .fdm-card:hover .fdm-cta svg { transform: translateX(4px); }
300 +
235 235   /* ---- Footer ---- */
236 236   .fdm-footer {
237 237   margin-top: 32px;
... ... @@ -244,20 +244,25 @@
244 244   gap: 14px;
245 245   font-size: 13px;
246 246   }
313 +
247 247   .fdm-footer a {
248 248   font-weight: 600;
249 249   text-decoration: none !important;
250 250   color: var(--fd-blue);
251 251   }
319 +
252 252   .fdm-footer a:hover { text-decoration: underline !important; }
321 +
253 253   .fdm-footer a:focus-visible {
254 254   outline: 2px solid var(--fd-blue-bright);
255 255   outline-offset: 3px;
256 256   }
326 +
257 257   .fdm-brand-first { color: var(--fd-blue); }
258 258   .fdm-brand-second { color: var(--fd-navy); }
259 259   .fdm-azure { color: var(--ms-azure); }
260 260   .fdm-divider { color: var(--fd-bg-mid); font-weight: 300; }
331 +
261 261   @media (max-width: 768px) {
262 262   .fdm-grid { grid-template-columns: 1fr; }
263 263   .fdm-hub { padding: 0 12px 22px; }
... ... @@ -265,17 +265,22 @@
265 265   .fdm-hero { min-height: 220px; }
266 266   .fdm-hero-inner { padding: 24px 22px 22px; }
267 267   }
339 +
268 268   @media (prefers-reduced-motion: reduce) {
269 269   .fdm-card, .fdm-cta svg { transition: none; }
270 270   }
271 - </style>
343 +
344 +</style>
345 +
272 272  <div class="fdm-hub">
347 +
273 273   <div class="fdm-masthead">
274 274   <img src="https://learn.firstdigital.com/bin/download/Main/WebHome/FirstDigital-Logo.png?rev=1.3" alt="FirstDigital">
275 275   <span class="fdm-masthead-label">Fiber &middot; Internet &middot; Cloud &middot; Voice</span>
276 276   </div>
352 +
277 277   <section class="fdm-hero">
278 - <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">
279 279   <div class="fdm-hero-inner">
280 280   <hr class="fdm-rule">
281 281   <div class="fdm-eyebrow">Learning Center</div>
... ... @@ -283,10 +283,12 @@
283 283   <p>Guides, answers, and implementation resources for your FirstDigital voice services. Choose a product to get started.</p>
284 284   </div>
285 285   </section>
362 +
286 286   <div class="fdm-grid">
364 +
287 287   <a class="fdm-card" href="https://learn.firstdigital.com/bin/view/CCP/">
288 288   <span class="fdm-media">
289 - <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">
290 290   <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>
291 291   </span>
292 292   <span class="fdm-body">
... ... @@ -295,9 +295,10 @@
295 295   <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>
296 296   </span>
297 297   </a>
376 +
298 298   <a class="fdm-card" href="https://learn.firstdigital.com/bin/view/Teams/">
299 299   <span class="fdm-media">
300 - <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">
301 301   <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>
302 302   </span>
303 303   <span class="fdm-body">
... ... @@ -306,9 +306,10 @@
306 306   <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>
307 307   </span>
308 308   </a>
388 +
309 309   <a class="fdm-card" href="https://learn.firstdigital.com/bin/view/SIP/">
310 310   <span class="fdm-media">
311 - <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">
312 312   <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>
313 313   </span>
314 314   <span class="fdm-body">
... ... @@ -317,9 +317,10 @@
317 317   <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>
318 318   </span>
319 319   </a>
400 +
320 320   <a class="fdm-card" href="https://learn.firstdigital.com/bin/view/Support/">
321 321   <span class="fdm-media">
322 - <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">
323 323   <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>
324 324   </span>
325 325   <span class="fdm-body">
... ... @@ -329,10 +329,12 @@
329 329   </span>
330 330   </a>
331 331   </div>
413 +
332 332   <div class="fdm-footer">
333 333   <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>
334 334   <span class="fdm-divider">|</span>
335 335   <a class="fdm-azure" href="https://learn.firstdigital.com/bin/view/Main/?oidc.skipped=false">Microsoft Azure</a>
336 336   </div>
419 +
337 337  </div>
338 338  {{/html}}