Skip to Content
Version 1.1 by Chris Workman on 2026/08/21 19:57
Show last authors
1 {{html clean="false"}}
2 <!--
3 ============================================================
4 FirstDigital - Cloud Connected PSTN (CCP) Resource Hub (XWiki fragment)
5 No photographs. Text, brand colour and icons only.
6 Built to match the Microsoft Teams Resource Hub page (fdt-hub) --
7 same layout, same four cards, same brand system, new topic.
8 ============================================================
9
10 HOW TO USE
11 1. Edit the wiki page in SOURCE / WIKI mode (never WYSIWYG).
12 2. Select all existing page content and delete it.
13 3. Paste:
14
15 {{html clean="false"}}
16 ...everything in this file...
17 {{/html}}
18
19 4. Save & View.
20
21 ------------------------------------------------------------
22 FOUR LINKS NEED YOUR URLS - search this file for href="#"
23 ------------------------------------------------------------
24 1. How To's
25 2. Q&A's
26 3. Implementation Process
27 4. Helpful Docs
28
29 Note: as with the Teams hub, the "Implementation Process" card is
30 very likely the onboarding page (Thank you for choosing FirstDigital
31 Telecom / Steps in the process). Point card 3 at that page rather
32 than duplicating the content.
33
34 ------------------------------------------------------------
35 NOTES
36 - This file is a FRAGMENT: no DOCTYPE declaration and no
37 html / head / body elements. Everything is scoped inside
38 .fdccp-hub so it cannot leak into the wiki theme.
39 - After saving, only ever re-edit this page in SOURCE mode.
40 The WYSIWYG editor can duplicate html-macro content.
41 - Class names use the "fdccp-" prefix, so this page cannot clash
42 with the menu page ("fdm-"), the onboarding page ("fdo-"), or the
43 Microsoft Teams Resource Hub ("fdt-") even if more than one of
44 them ever appears on the same page.
45 - The only external asset is your logo, loaded from your wiki.
46 Nothing is embedded, so this file is small.
47 ============================================================
48 -->
49 <style>
50 @import url('https://fonts.googleapis.com/css2?family=Host+Grotesk:wght@300;400;600;800&display=swap');
51
52 /* Safety net: if the wiki ever renders this block twice,
53 show only the first copy. */
54 .fdccp-hub ~ .fdccp-hub { display: none !important; }
55
56 /* ---- FirstDigital brand tokens (Brand Guide 2025, p.11) ---- */
57 .fdccp-hub {
58 --fd-navy: #003366; /* headlines, backgrounds, icons */
59 --fd-blue: #307ab2; /* headlines, backgrounds, icons */
60 --fd-blue-bright: #38b2e3; /* stand-out headlines, icons */
61 --fd-red: #cf333d; /* accents - use selectively */
62 --fd-body: #2e404d; /* paragraph text */
63 --fd-secondary: #8f9499; /* secondary text */
64 --fd-bg-mid: #dedede; /* backgrounds */
65 --fd-bg-light: #f0f0f0; /* backgrounds */
66 --fd-ice: #e3f1f8;
67 --fd-white: #ffffff;
68 }
69
70 .fdccp-hub, .fdccp-hub * { box-sizing: border-box; }
71
72 .fdccp-hub {
73 font-family: 'Host Grotesk', 'Segoe UI', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
74 font-weight: 300;
75 color: var(--fd-body);
76 background: var(--fd-white);
77 max-width: 1000px;
78 margin: 0 auto;
79 padding: 0 20px 30px;
80 -webkit-font-smoothing: antialiased;
81 }
82
83 /* ---- Masthead: full-colour logo on white (Logo Rules, p.10) ---- */
84 .fdccp-masthead {
85 display: flex;
86 align-items: center;
87 justify-content: space-between;
88 gap: 20px;
89 flex-wrap: wrap;
90 padding: 22px 0 18px;
91 border-bottom: 1px solid var(--fd-bg-mid);
92 }
93
94 .fdccp-masthead img { height: 46px; width: auto; display: block; }
95
96 .fdccp-masthead-label {
97 font-size: 12px;
98 font-weight: 600;
99 letter-spacing: 0.16em;
100 text-transform: uppercase;
101 color: var(--fd-secondary);
102 white-space: nowrap;
103 }
104
105 /* ---- Hero: flat brand colour, no imagery ---- */
106 .fdccp-hero {
107 margin-top: 22px;
108 border-radius: 6px;
109 padding: 34px 34px 32px;
110 background: linear-gradient(100deg,
111 var(--fd-navy) 0%,
112 var(--fd-navy) 56%,
113 var(--fd-blue) 100%);
114 }
115
116 /* red rule = brand accent motif (Brand Guide p.4) */
117 .fdccp-rule {
118 width: 62px; height: 4px;
119 background: var(--fd-red);
120 border: 0;
121 margin: 0 0 16px;
122 }
123
124 .fdccp-eyebrow {
125 font-size: 16px;
126 font-weight: 600;
127 letter-spacing: 0.18em;
128 text-transform: uppercase;
129 color: var(--fd-blue-bright);
130 margin-bottom: 9px;
131 }
132
133 .fdccp-hero h1 {
134 font-size: clamp(26px, 3.6vw, 36px);
135 font-weight: 800;
136 line-height: 1.14;
137 letter-spacing: -0.01em;
138 color: var(--fd-white);
139 margin: 0 0 12px;
140 }
141
142 .fdccp-hero p {
143 font-size: 15.5px;
144 font-weight: 300;
145 line-height: 1.62;
146 color: #dbe6ef;
147 margin: 0;
148 max-width: 560px;
149 }
150
151 /* ---- Card grid ---- */
152 .fdccp-grid {
153 display: grid;
154 grid-template-columns: repeat(2, 1fr);
155 gap: 22px;
156 margin-top: 24px;
157 }
158
159 .fdccp-card {
160 display: flex;
161 flex-direction: column;
162 background: var(--fd-white);
163 border: 1px solid var(--fd-bg-mid);
164 border-radius: 6px;
165 padding: 24px 24px 22px;
166 height: 100%;
167 text-decoration: none !important;
168 color: inherit;
169 transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
170 }
171
172 .fdccp-card:hover {
173 transform: translateY(-3px);
174 border-color: var(--fd-blue-bright);
175 box-shadow: 0 12px 26px rgba(0,51,102,0.14);
176 }
177
178 .fdccp-card:focus-visible {
179 outline: 3px solid var(--fd-blue-bright);
180 outline-offset: 2px;
181 }
182
183 .fdccp-badge {
184 width: 52px; height: 52px;
185 border-radius: 8px;
186 background: var(--fd-ice);
187 display: flex;
188 align-items: center;
189 justify-content: center;
190 margin-bottom: 16px;
191 flex: 0 0 auto;
192 }
193
194 /* icons: dark-blue stroke, bright-blue accent (Brand Guide p.14) */
195 .fdccp-badge svg {
196 width: 25px; height: 25px;
197 fill: none;
198 stroke: var(--fd-navy);
199 stroke-width: 1.7;
200 stroke-linecap: round;
201 stroke-linejoin: round;
202 }
203
204 .fdccp-badge svg .accent { stroke: var(--fd-blue-bright); }
205
206 .fdccp-title {
207 display: block;
208 font-size: 17.5px;
209 font-weight: 800;
210 line-height: 1.26;
211 color: var(--fd-navy);
212 }
213
214 .fdccp-sub {
215 display: block;
216 font-size: 14px;
217 font-weight: 300;
218 line-height: 1.6;
219 color: var(--fd-body);
220 margin-top: 7px;
221 }
222
223 .fdccp-cta {
224 display: flex;
225 align-items: center;
226 gap: 7px;
227 margin-top: auto;
228 padding-top: 18px;
229 font-size: 13px;
230 font-weight: 600;
231 color: var(--fd-red);
232 }
233
234 .fdccp-cta svg {
235 width: 15px; height: 15px;
236 fill: none;
237 stroke: var(--fd-red);
238 stroke-width: 2;
239 stroke-linecap: round;
240 stroke-linejoin: round;
241 transition: transform .2s ease;
242 }
243
244 .fdccp-card:hover .fdccp-cta svg { transform: translateX(4px); }
245
246 /* ---- Footer ---- */
247 .fdccp-footer {
248 margin-top: 30px;
249 padding-top: 18px;
250 border-top: 1px solid var(--fd-bg-mid);
251 display: flex;
252 justify-content: space-between;
253 gap: 16px;
254 flex-wrap: wrap;
255 font-size: 12.5px;
256 color: var(--fd-secondary);
257 }
258
259 @media (max-width: 720px) {
260 .fdccp-grid { grid-template-columns: 1fr; }
261 .fdccp-hub { padding: 0 12px 24px; }
262 .fdccp-masthead img { height: 38px; }
263 .fdccp-hero { padding: 26px 22px 24px; }
264 .fdccp-footer { justify-content: flex-start; }
265 }
266
267 @media (prefers-reduced-motion: reduce) {
268 .fdccp-card, .fdccp-cta svg { transition: none; }
269 }
270 </style>
271
272 <div class="fdccp-hub">
273
274 <div class="fdccp-masthead">
275 <img src="https://learn.firstdigital.com/bin/download/Main/WebHome/FirstDigital-Logo.png?rev=1.3" alt="FirstDigital">
276 <span class="fdccp-masthead-label">Fiber &middot; Internet &middot; Cloud &middot; Voice</span>
277 </div>
278
279 <section class="fdccp-hero">
280 <hr class="fdccp-rule">
281 <div class="fdccp-eyebrow">Cloud Connected PSTN</div>
282 <h1>Resource Hub</h1>
283 <p>Everything you need to set up, use, and troubleshoot your Cloud Connected PSTN service &mdash; in one place, with local support from a real human.</p>
284 </section>
285
286 <nav class="fdccp-grid" aria-label="Cloud Connected PSTN resources">
287
288 <a class="fdccp-card" href="#">
289 <span class="fdccp-badge">
290 <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 18h6M10 21h4"/><path class="accent" d="M12 3a6 6 0 0 0-4 10.5c.6.6 1 1.4 1 2.5h6c0-1.1.4-1.9 1-2.5A6 6 0 0 0 12 3z"/></svg>
291 </span>
292 <span class="fdccp-title">How To&rsquo;s</span>
293 <span class="fdccp-sub">Step-by-step walkthroughs for common Cloud Connected PSTN tasks &mdash; provisioning numbers, configuring routing, and managing your service.</span>
294 <span class="fdccp-cta">Browse guides <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 12h15M13 6l6 6-6 6"/></svg></span>
295 </a>
296
297 <a class="fdccp-card" href="#">
298 <span class="fdccp-badge">
299 <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 12a8 8 0 1 1 3.5 6.6L4 20l1.4-3.5A7.96 7.96 0 0 1 4 12z"/><path class="accent" d="M12 16.5v.01M12 13.6c0-1.9 2-1.9 2-3.6a2 2 0 0 0-4 0"/></svg>
300 </span>
301 <span class="fdccp-title">Q&amp;A&rsquo;s</span>
302 <span class="fdccp-sub">Answers to the questions our support team hears most often about Cloud Connected PSTN service and configuration.</span>
303 <span class="fdccp-cta">See answers <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 12h15M13 6l6 6-6 6"/></svg></span>
304 </a>
305
306 <a class="fdccp-card" href="#">
307 <span class="fdccp-badge">
308 <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 6h16M4 12h9M4 18h16"/><path class="accent" d="M16 9l3 3-3 3"/></svg>
309 </span>
310 <span class="fdccp-title">Implementation Process</span>
311 <span class="fdccp-sub">What to expect from kickoff through go-live, including timelines, milestones, and who to contact at each stage.</span>
312 <span class="fdccp-cta">View process <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 12h15M13 6l6 6-6 6"/></svg></span>
313 </a>
314
315 <a class="fdccp-card" href="#">
316 <span class="fdccp-badge">
317 <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 3h7l5 5v13a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z"/><path d="M14 3v5h5"/><path class="accent" d="M9.5 13.5h5M9.5 17h5"/></svg>
318 </span>
319 <span class="fdccp-title">Helpful Docs</span>
320 <span class="fdccp-sub">Reference material, checklists, and downloadable resources to keep your team moving.</span>
321 <span class="fdccp-cta">Open docs <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 12h15M13 6l6 6-6 6"/></svg></span>
322 </a>
323
324 </nav>
325
326 <div class="fdccp-footer">
327 <span>FirstDigital &middot; Cloud Connected PSTN Resource Hub</span>
328 <span>Need help? Contact your FirstDigital support team at 801-456-1000 or support@firstdigital.com.</span>
329 </div>
330
331 </div>
332 {{/html}}