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