Skip to Content

Wiki source code of Sandbox Test Page 3

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