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 67.1
edited by Jareth Carpenter
on 2026/08/20 22:11
Change comment: There is no comment for this version

Summary

Details

Page properties
Content
... ... @@ -1,363 +1,8 @@
1 +Jareth has been using this a testing area
2 +
3 +
1 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>
5 +<div> This is in a div </div>
6 +
7 +<img src="https://learn.firstdigital.com/bin/download/Sandbox/WebHome/XWikiLogo.png?rev=1.3">
363 363  {{/html}}