Skip to Content

Wiki source code of Sandbox Test Page 3

Version 52.1 by Jareth Carpenter on 2026/08/17 22:47
Show last authors
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>
338 {{/html}}