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
on 2026/07/27 20:09
Change comment:
Auto-saved during real-time collaboration
To version 25.1
edited by Chris Workman
on 2026/08/10 20:28
on 2026/08/10 20:28
Change comment:
There is no comment for this version
Summary
-
Page properties (1 modified, 0 added, 0 removed)
Details
- Page properties
-
- Content
-
... ... @@ -1,0 +1,334 @@ 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 23 + 2. Q&A 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 + 273 + <img src="https://learn.firstdigital.com/bin/download/Main/WebHome/FirstDigital-Logo.png?rev=1.3" alt="FirstDigital"> 274 + <span class="fdt-masthead-label">Fiber · Internet · Cloud · Voice</span> 275 + </div> 276 + 277 + <section class="fdt-hero"> 278 + <hr class="fdt-rule"> 279 + <div class="fdt-eyebrow">Microsoft Teams</div> 280 + <h1>Resource Hub</h1> 281 + <p>Everything you need to set up, use, and troubleshoot Microsoft Teams voice and calling — in one place, with local support from a real human.</p> 282 + </section> 283 + 284 + <nav class="fdt-grid" aria-label="Microsoft Teams resources"> 285 + 286 + <a class="fdt-card" href="#"> 287 + <span class="fdt-badge"> 288 + <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> 289 + </span> 290 + <span class="fdt-title">How To’s</span> 291 + <span class="fdt-sub">Step-by-step walkthroughs for everyday Teams tasks — ordering numbers, assigning users, and routing calls.</span> 292 + <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> 293 + </a> 294 + 295 + <a class="fdt-card" href="#"> 296 + <span class="fdt-badge"> 297 + <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> 298 + </span> 299 + <span class="fdt-title">Q&A’s</span> 300 + <span class="fdt-sub">Answers to the questions our support team hears most often about Teams calling and configuration.</span> 301 + <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> 302 + </a> 303 + 304 + <a class="fdt-card" href="#"> 305 + <span class="fdt-badge"> 306 + <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> 307 + </span> 308 + <span class="fdt-title">Implementation Process</span> 309 + <span class="fdt-sub">What to expect from kickoff through go-live, including timelines, milestones, and who to contact at each stage.</span> 310 + <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> 311 + </a> 312 + 313 + <a class="fdt-card" href="#"> 314 + <span class="fdt-badge"> 315 + <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> 316 + </span> 317 + <span class="fdt-title">Helpful Docs</span> 318 + <span class="fdt-sub">Reference material, checklists, and downloadable resources to keep your team moving.</span> 319 + <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> 320 + </a> 321 + 322 + </nav> 323 + 324 + <div class="fdt-footer"> 325 + <span>FirstDigital · Microsoft Teams Resource Hub</span> 326 + <span>Need help? Contact your FirstDigital support team at 801-456-1000 or support@firstdigital.com.</span> 327 + </div> 328 + 329 +</div> 330 +{{/html}} 331 + 332 +---- 333 + 334 +