Skip to Content

Changes for page MS Teams Home Page:

Last modified by Chris Workman on 2026/08/21 22:35
From version 18.2
edited by Chris Workman
on 2026/07/27 20:09
Change comment: Auto-saved during real-time collaboration
To version 21.2
edited by Chris Workman
on 2026/07/27 21:08
Change comment: Auto-saved during real-time collaboration

Summary

Details

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