Skip to Content

Changes for page Sandbox Test Page 3

Last modified by Jareth Carpenter on 2026/08/20 22:29
From version 66.2
edited by Jareth Carpenter
on 2026/08/20 22:10
Change comment: Auto-saved during real-time collaboration
To version 52.1
edited by Jareth Carpenter
on 2026/08/17 22:47
Change comment: There is no comment for this version

Summary

Details

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