Skip to Content

Wiki source code of Sandbox Test Page 3

Version 55.2 by Jareth Carpenter on 2026/08/20 16:56
Show last authors
1 {{html clean="false"}}
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 ============================================================
34 -->
35 <style>
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. */
40 .fdm-hub ~ .fdm-hub { display: none !important; }
41
42 /* ---- FirstDigital brand tokens (Brand Guide 2025, p.11) ---- */
43 .fdm-hub {
44 --fd-navy: #003366; /* headlines, backgrounds, icons */
45 --fd-blue: #307ab2; /* headlines, backgrounds, icons */
46 --fd-blue-bright: #38b2e3; /* stand-out headlines, icons */
47 --fd-red: #cf333d; /* accents - use selectively */
48 --fd-body: #2e404d; /* paragraph text */
49 --fd-secondary: #8f9499; /* secondary text */
50 --fd-bg-mid: #dedede; /* backgrounds */
51 --fd-bg-light: #f0f0f0; /* backgrounds */
52 --fd-white: #ffffff;
53 --ms-azure: #0078d4; /* Microsoft's own brand blue */
54 }
55
56 .fdm-hub, .fdm-hub * { box-sizing: border-box; }
57
58 .fdm-hub {
59 font-family: 'Host Grotesk', 'Segoe UI', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
60 font-weight: 300;
61 color: var(--fd-body);
62 background: var(--fd-white);
63 max-width: 1000px;
64 margin: 0 auto;
65 padding: 0 20px 28px;
66 -webkit-font-smoothing: antialiased;
67 }
68
69 /* ---- Masthead: full-colour logo on white (Logo Rules, p.10) ---- */
70 .fdm-masthead {
71 display: flex;
72 align-items: center;
73 justify-content: space-between;
74 gap: 20px;
75 flex-wrap: wrap;
76 padding: 22px 0 18px;
77 border-bottom: 1px solid var(--fd-bg-mid);
78 }
79
80 .fdm-masthead img { height: 46px; width: auto; display: block; }
81
82 .fdm-masthead-label {
83 font-size: 12px;
84 font-weight: 600;
85 letter-spacing: 0.16em;
86 text-transform: uppercase;
87 color: var(--fd-secondary);
88 white-space: nowrap;
89 }
90
91 /* ---- Hero ---- */
92 .fdm-hero {
93 position: relative;
94 margin-top: 22px;
95 border-radius: 6px;
96 overflow: hidden;
97 min-height: 250px;
98 display: flex;
99 align-items: flex-end;
100 }
101
102 .fdm-hero-img {
103 position: absolute;
104 top: 0; right: 0; bottom: 0; left: 0;
105 width: 100%; height: 100%;
106 object-fit: cover;
107 display: block;
108 }
109
110 /* explicit offsets, not the inset shorthand, for wider support */
111 .fdm-hero::after {
112 content: "";
113 position: absolute;
114 top: 0; right: 0; bottom: 0; left: 0;
115 background: linear-gradient(100deg,
116 rgba(0,51,102,0.94) 0%,
117 rgba(0,51,102,0.86) 42%,
118 rgba(0,51,102,0.30) 100%);
119 }
120
121 .fdm-hero-inner {
122 position: relative;
123 z-index: 1;
124 padding: 32px 32px 30px;
125 max-width: 600px;
126 }
127
128 /* red rule = brand accent motif (Brand Guide p.4) */
129 .fdm-rule {
130 width: 62px; height: 4px;
131 background: var(--fd-red);
132 border: 0;
133 margin: 0 0 16px;
134 }
135
136 .fdm-eyebrow {
137 font-size: 12px;
138 font-weight: 600;
139 letter-spacing: 0.18em;
140 text-transform: uppercase;
141 color: var(--fd-blue-bright);
142 margin-bottom: 9px;
143 }
144
145 .fdm-hero h1 {
146 font-size: clamp(26px, 3.6vw, 36px);
147 font-weight: 800;
148 line-height: 1.14;
149 letter-spacing: -0.01em;
150 color: var(--fd-white);
151 margin: 0 0 11px;
152 }
153
154 .fdm-hero p {
155 font-size: 15px;
156 font-weight: 300;
157 line-height: 1.6;
158 color: #dbe6ef;
159 margin: 0;
160 max-width: 470px;
161 }
162
163 /* ---- Card grid ---- */
164 .fdm-grid {
165 display: grid;
166 grid-template-columns: repeat(2, 1fr);
167 gap: 22px;
168 margin-top: 24px;
169 }
170
171 .fdm-card {
172 display: flex;
173 flex-direction: column;
174 background: var(--fd-white);
175 border: 1px solid var(--fd-bg-mid);
176 border-radius: 6px;
177 overflow: hidden;
178 text-decoration: none !important;
179 color: inherit;
180 height: 100%;
181 transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
182 }
183
184 .fdm-card:hover {
185 transform: translateY(-3px);
186 border-color: var(--fd-blue-bright);
187 box-shadow: 0 12px 26px rgba(0,51,102,0.14);
188 }
189
190 .fdm-card:focus-visible {
191 outline: 3px solid var(--fd-blue-bright);
192 outline-offset: 2px;
193 }
194
195 .fdm-media {
196 position: relative;
197 height: 132px;
198 background: var(--fd-bg-light);
199 flex: 0 0 auto;
200 /* no overflow:hidden here - the logo badge overhangs the bottom
201 edge on purpose. The photo is already clipped by object-fit,
202 and .fdm-card's own overflow:hidden keeps the rounded corners. */
203 }
204
205 .fdm-media img {
206 width: 100%; height: 100%;
207 object-fit: cover;
208 display: block;
209 }
210
211 .fdm-media::after {
212 content: "";
213 position: absolute;
214 top: 0; right: 0; bottom: 0; left: 0;
215 background: linear-gradient(180deg,
216 rgba(0,51,102,0.06) 0%, rgba(0,40,79,0.52) 100%);
217 }
218
219 /* white badge keeps every logo brand-legal over a photo (p.10) */
220 .fdm-badge {
221 position: absolute;
222 left: 18px;
223 bottom: 0;
224 z-index: 1;
225 transform: translateY(50%);
226 width: 58px; height: 58px;
227 border-radius: 8px;
228 background: var(--fd-white);
229 box-shadow: 0 5px 14px rgba(0,0,0,0.18);
230 display: flex;
231 align-items: center;
232 justify-content: center;
233 overflow: hidden;
234 }
235
236 .fdm-badge img { object-fit: contain; display: block; }
237
238 .fdm-logo-webex { width: 74%; height: auto; }
239 .fdm-logo-teams { width: 64%; height: auto; }
240 .fdm-logo-firstdigital { width: 84%; height: auto; }
241
242 /* icons: dark-blue stroke, bright-blue accent (Brand Guide p.14) */
243 .fdm-badge svg {
244 width: 26px; height: 26px;
245 fill: none;
246 stroke: var(--fd-navy);
247 stroke-width: 1.7;
248 stroke-linecap: round;
249 stroke-linejoin: round;
250 }
251
252 .fdm-badge svg .accent { stroke: var(--fd-blue-bright); }
253
254 .fdm-body {
255 padding: 38px 22px 22px;
256 display: flex;
257 flex-direction: column;
258 flex: 1 1 auto;
259 }
260
261 .fdm-title {
262 display: block;
263 font-size: 16.5px;
264 font-weight: 800;
265 line-height: 1.28;
266 color: var(--fd-navy);
267 }
268
269 .fdm-sub {
270 display: block;
271 font-size: 13.5px;
272 font-weight: 300;
273 line-height: 1.55;
274 color: var(--fd-body);
275 margin-top: 5px;
276 }
277
278 .fdm-cta {
279 display: flex;
280 align-items: center;
281 gap: 7px;
282 margin-top: auto;
283 padding-top: 16px;
284 font-size: 13px;
285 font-weight: 600;
286 color: var(--fd-red);
287 }
288
289 .fdm-cta svg {
290 width: 15px; height: 15px;
291 fill: none;
292 stroke: var(--fd-red);
293 stroke-width: 2;
294 stroke-linecap: round;
295 stroke-linejoin: round;
296 transition: transform .2s ease;
297 }
298
299 .fdm-card:hover .fdm-cta svg { transform: translateX(4px); }
300
301 /* ---- Footer ---- */
302 .fdm-footer {
303 margin-top: 32px;
304 padding-top: 18px;
305 border-top: 1px solid var(--fd-bg-mid);
306 display: flex;
307 justify-content: center;
308 align-items: center;
309 flex-wrap: wrap;
310 gap: 14px;
311 font-size: 13px;
312 }
313
314 .fdm-footer a {
315 font-weight: 600;
316 text-decoration: none !important;
317 color: var(--fd-blue);
318 }
319
320 .fdm-footer a:hover { text-decoration: underline !important; }
321
322 .fdm-footer a:focus-visible {
323 outline: 2px solid var(--fd-blue-bright);
324 outline-offset: 3px;
325 }
326
327 .fdm-brand-first { color: var(--fd-blue); }
328 .fdm-brand-second { color: var(--fd-navy); }
329 .fdm-azure { color: var(--ms-azure); }
330 .fdm-divider { color: var(--fd-bg-mid); font-weight: 300; }
331
332 @media (max-width: 768px) {
333 .fdm-grid { grid-template-columns: 1fr; }
334 .fdm-hub { padding: 0 12px 22px; }
335 .fdm-masthead img { height: 38px; }
336 .fdm-hero { min-height: 220px; }
337 .fdm-hero-inner { padding: 24px 22px 22px; }
338 }
339
340 @media (prefers-reduced-motion: reduce) {
341 .fdm-card, .fdm-cta svg { transition: none; }
342 }
343
344 </style>
345
346 <div class="fdm-hub">
347
348 <div class="fdm-masthead">
349 <img src="https://learn.firstdigital.com/bin/download/Main/WebHome/FirstDigital-Logo.png?rev=1.3" alt="FirstDigital">
350 <span class="fdm-masthead-label">Fiber &middot; Internet &middot; Cloud &middot; Voice</span>
351 </div>
352
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">
355 <div class="fdm-hero-inner">
356 <hr class="fdm-rule">
357 <div class="fdm-eyebrow">Learning Center</div>
358 <h1>Product Documentation</h1>
359 <p>Guides, answers, and implementation resources for your FirstDigital voice services. Choose a product to get started.</p>
360 </div>
361 </section>
362
363 <div class="fdm-grid">
364
365 <a class="fdm-card" href="https://learn.firstdigital.com/bin/view/CCP/">
366 <span class="fdm-media">
367 <img src="https://learn.firstdigital.com/bin/download/Main/WebHome/CloudConnectedCCP.jpg?rev=1.3">
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 </span>
370 <span class="fdm-body">
371 <span class="fdm-title">Cloud Connected PSTN (CCP)</span>
372 <span class="fdm-sub">Webex integration</span>
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 </span>
375 </a>
376
377 <a class="fdm-card" href="https://learn.firstdigital.com/bin/view/Teams/">
378 <span class="fdm-media">
379 <img src="https://learn.firstdigital.com/bin/download/Main/WebHome/MicrosoftTeamsPeople.jpg?rev=1.3">
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 </span>
382 <span class="fdm-body">
383 <span class="fdm-title">Microsoft Teams</span>
384 <span class="fdm-sub">Direct Routing</span>
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 </span>
387 </a>
388
389 <a class="fdm-card" href="https://learn.firstdigital.com/bin/view/SIP/">
390 <span class="fdm-media">
391 <img src="https://learn.firstdigital.com/bin/download/Main/WebHome/FDSipTrunkPerson.jpg?rev=1.3">
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 </span>
394 <span class="fdm-body">
395 <span class="fdm-title">FirstDigital SIP Trunk</span>
396 <span class="fdm-sub">Voice connectivity</span>
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 </span>
399 </a>
400
401 <a class="fdm-card" href="https://learn.firstdigital.com/bin/view/Support/">
402 <span class="fdm-media">
403 <img src="https://learn.firstdigital.com/bin/download/Main/WebHome/SupportPeople.jpg?rev=1.3">
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 </span>
406 <span class="fdm-body">
407 <span class="fdm-title">Support</span>
408 <span class="fdm-sub">Resources and contact information</span>
409 <span class="fdm-cta">Get support <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 12h15M13 6l6 6-6 6"/></svg></span>
410 </span>
411 </a>
412 </div>
413
414 <div class="fdm-footer">
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 <span class="fdm-divider">|</span>
417 <a class="fdm-azure" href="https://learn.firstdigital.com/bin/view/Main/?oidc.skipped=false">Microsoft Azure</a>
418 </div>
419
420 </div>
421 {{/html}}