Last modified by Aaron Blackburn on 2026/09/02 15:06
From version 31.1
edited by Aaron Blackburn
on 2026/07/22 20:29
on 2026/07/22 20:29
Change comment:
Deleted image "1784741546269-324.png"
To version 80.2
edited by Aaron Blackburn
on 2026/09/02 15:06
on 2026/09/02 15:06
Change comment:
There is no comment for this version
Summary
-
Page properties (2 modified, 0 added, 0 removed)
-
Attachments (1 modified, 6 added, 7 removed)
- 1784741189563-764.png
- 1784741289632-457.png
- 1784751495894-847.png
- 55da30a8-a01a-4c4b-a486-a95baf3bc33b
- FirstDigital-Logo.png
- MS%20teams.webp
- firstdigitalhome_logo
- webexbycisco-3d-vertical-color-black-text.png
- CloudConnectedCCP.jpg
- FDSipTrunkPerson.jpg
- MS teams.webp
- MicrosoftTeamsPeople.jpg
- SupportPeople.jpg
- Webex-Symbol.png
Details
- Page properties
-
- Title
-
... ... @@ -1,1 +1,1 @@ 1 - Home1 + - Content
-
... ... @@ -1,160 +1,341 @@ 1 -{{html}} 2 -<div class="modern-menu-container"> 3 - <div class="row"> 4 - <!-- Card 1: Webex --> 5 - <a href="TARGET_URL_FOR_WEBEX" class="col-xs-12 col-sm-6 menu-card-link"> 6 - <div class="menu-card"> 7 - <div class="menu-icon-container"> 8 - <img src="$xwiki.getURL('Main.WebHome','download','filepath=webexbycisco-3d-vertical-color-black-text.png')" alt="Webex" class="menu-icon webex-icon" /> 9 - </div> 10 - <div class="menu-text"> 11 - <div class="menu-title">Cloud Connected PSTN (CCP)</div> 12 - <div class="menu-subtitle">Webex Integration</div> 13 - </div> 14 - </div> 15 - </a> 1 +{{html clean="false"}} 2 +<!-- 3 + XWiki usage: paste everything in this file into an HTML macro on your main Home page. 4 + 5 + To hide the default "FirstDigital Products Home Page:" page title: 6 + Edit page -> Edit Properties -> Set "Show Title" to "No". 7 +--> 8 +<style> 9 + @import url('https://fonts.googleapis.com/css2?family=Host+Grotesk:wght@300;400;500;600;700;800&display=swap'); 16 16 17 - <!-- Card 2: MS Teams --> 18 - <a href="TARGET_URL_FOR_TEAMS" class="col-xs-12 col-sm-6 menu-card-link"> 19 - <div class="menu-card"> 20 - <div class="menu-icon-container"> 21 - <img src="$xwiki.getURL('Main.WebHome','download','filepath=MS teams.webp')" alt="MS Teams" class="menu-icon teams-icon" /> 22 - </div> 23 - <div class="menu-text"> 24 - <div class="menu-title"><strong>MS Teams</strong></div> 25 - <div class="menu-subtitle">Direct Routing</div> 26 - </div> 27 - </div> 28 - </a> 29 - </div> 11 + .fd-home, .fd-home * { 12 + box-sizing: border-box; 13 + } 30 30 31 - <div class="row"> 32 - <!-- Card 3: FirstDigital --> 33 - <a href="TARGET_URL_FOR_SIP" class="col-xs-12 col-sm-6 menu-card-link"> 34 - <div class="menu-card"> 35 - <div class="menu-icon-container"> 36 - <img src="$xwiki.getURL('Main.WebHome','download','filepath=1784751540742-511.png')" alt="SIP Trunk" class="menu-icon sip-icon" /> 37 - </div> 38 - <div class="menu-text"> 39 - <div class="menu-title"><strong>FirstDigital SIP trunk</strong></div> 40 - <div class="menu-subtitle">Voice Connectivity</div> 41 - </div> 42 - </div> 43 - </a> 15 + .fd-home { 16 + /* FirstDigital Official Color Palette */ 17 + --fd-navy: #003366; 18 + --fd-dark-navy: #001a33; 19 + --fd-blue: #307ab2; 20 + --fd-sky: #38b2e3; 21 + --fd-red: #cf333d; 22 + --fd-slate: #2e404d; 23 + --fd-grey: #8f9499; 24 + --fd-lightgrey: #e2e8f0; 25 + --fd-offwhite: #f8fafc; 26 + --fd-max-w: 1140px; 44 44 45 - <!-- Card 4: Support --> 46 - <a href="TARGET_URL_FOR_SUPPORT" class="col-xs-12 col-sm-6 menu-card-link"> 47 - <div class="menu-card"> 48 - <div class="menu-icon-container"> 49 - <img src="$xwiki.getURL('Main.WebHome','download','filepath=1784751495894-847.png')" alt="Support" class="menu-icon support-icon" /> 50 - </div> 51 - <div class="menu-text"> 52 - <div class="menu-title"><strong>Support</strong></div> 53 - <div class="menu-subtitle">Knowledge Base & Tickets</div> 54 - </div> 55 - </div> 56 - </a> 57 - </div> 28 + display: block; 29 + font-family: 'Host Grotesk', system-ui, -apple-system, sans-serif; 30 + color: var(--fd-slate); 31 + background: #ffffff; 32 + padding-bottom: 40px; 33 + } 58 58 59 - <!-- Partner Footer Links --> 60 - <div class="row partner-footer"> 61 - <div class="col-xs-6 text-center"> 62 - <a href="https://learn.firstdigital.com/bin/view/Main/?oidc.skipped=true"> 63 - <img src="$xwiki.getURL('Main.WebHome','download','filepath=FirstDigital-Logo.png')" alt="FirstDigital" style="max-height:34px;" /> 64 - </a> 65 - </div> 66 - <div class="col-xs-6 text-center"> 67 - <a href="https://learn.firstdigital.com/bin/view/Main/?oidc.skipped=false"> 68 - <img src="$xwiki.getURL('Main.WebHome','download','filepath=Microsoft_Azure-Logo.wine.png')" alt="Azure" style="max-height:50px;" /> 69 - </a> 70 - </div> 71 - </div> 72 -</div> 35 + /* ---------- FULL-WIDTH FIBER BACKDROP STRIP ---------- */ 36 + .fd-home .fiber-strip { 37 + position: relative; 38 + width: 100%; 39 + /* Balanced illumination center with deeper navy density */ 40 + background: radial-gradient(circle at 50% 35%, rgba(13, 71, 128, 0.78) 0%, rgba(0, 51, 102, 0.93) 60%, rgba(0, 26, 51, 0.98) 100%), 41 + url('Fiber Optic Theme.JPG') center/cover no-repeat; 42 + padding: 72px 24px 100px; 43 + border-radius: 24px; 44 + box-shadow: inset 0 0 80px rgba(0, 26, 51, 0.6), 0 20px 40px rgba(0, 51, 102, 0.12); 45 + } 73 73 74 -<style> 75 - .modern-menu-container { 76 - max-width: 960px; 47 + .fd-home .hero-inner { 48 + max-width: var(--fd-max-w); 77 77 margin: 0 auto; 78 - padding:20px;50 + text-align: center; 79 79 } 80 - .modern-menu-container .row { 52 + 53 + .fd-home .hero p.kicker { 54 + color: #5ed2ff; /* Bright cyan contrast */ 55 + font-weight: 800; 56 + font-size: .85rem; 57 + text-transform: uppercase; 58 + letter-spacing: .18em; 59 + margin: 0 0 12px; 60 + text-shadow: 0 2px 10px rgba(0, 26, 51, 0.8); 61 + } 62 + 63 + .fd-home .hero h1 { 64 + color: #ffffff; 65 + font-weight: 800; 66 + font-size: 3.25rem; 67 + margin: 0 0 16px; 68 + letter-spacing: -0.02em; 69 + line-height: 1.1; 70 + text-shadow: 0 3px 12px rgba(0, 26, 51, 0.9), 0 1px 3px rgba(0, 0, 0, 0.8); 71 + } 72 + 73 + .fd-home .hero h1 span { 74 + color: #5ed2ff; 75 + text-shadow: 0 0 20px rgba(56, 178, 227, 0.4), 0 2px 10px rgba(0, 26, 51, 0.9); 76 + } 77 + 78 + .fd-home .hero p.sub { 79 + color: #f8fafc; 80 + font-weight: 400; 81 + font-size: 1.15rem; 82 + max-width: 640px; 83 + margin: 0 auto; 84 + line-height: 1.6; 85 + text-shadow: 0 2px 10px rgba(0, 26, 51, 0.95), 0 1px 2px rgba(0, 0, 0, 0.8); 86 + } 87 + 88 + /* ---------- FLOATING GLASS CARDS OVERLAY ---------- */ 89 + .fd-home main { 90 + max-width: var(--fd-max-w); 91 + margin: -60px auto 0; 92 + padding: 0 16px; 93 + position: relative; 94 + z-index: 2; 95 + } 96 + 97 + .fd-home .card-grid { 98 + display: grid; 99 + grid-template-columns: repeat(3, 1fr); 100 + gap: 28px; 101 + } 102 + 103 + /* Frost Glass Cards */ 104 + .fd-home .card { 105 + position: relative; 81 81 display: flex; 82 - flex-wrap: wrap; 83 - margin-bottom: 20px; 107 + flex-direction: column; 108 + background: rgba(255, 255, 255, 0.95); 109 + backdrop-filter: blur(12px); 110 + -webkit-backdrop-filter: blur(12px); 111 + border: 1px solid rgba(226, 232, 240, 0.9); 112 + border-radius: 20px; 113 + padding: 36px 30px; 114 + text-decoration: none !important; 115 + transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); 116 + box-shadow: 0 10px 30px rgba(0, 30, 60, 0.08); 84 84 } 85 - .menu-card-link { 86 - display: block; 87 - text-decoration: none; 88 - margin-bottom: 15px; 118 + 119 + /* Interactive Hover Accent Top Line */ 120 + .fd-home .card::before { 121 + content: ''; 122 + position: absolute; 123 + top: 0; left: 0; right: 0; 124 + height: 4px; 125 + border-radius: 20px 20px 0 0; 126 + background: linear-gradient(90deg, var(--fd-blue), var(--fd-sky)); 127 + opacity: 0; 128 + transition: opacity 0.3s ease; 89 89 } 90 - .menu-card { 130 + 131 + .fd-home .card:hover { 132 + transform: translateY(-6px); 91 91 background: #ffffff; 92 - border-radius: 12px; 93 - padding: 15px; 94 - display: flex; 95 - align-items: center; 96 - box-shadow: 0 4px 6px rgba(0,0,0,0.1); 97 - transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; 98 - border: 1px solid #e0e0e0; 99 - color: #333; 100 - height: 100%; 101 - box-sizing: border-box; 134 + border-color: var(--fd-sky); 135 + box-shadow: 0 20px 40px rgba(0, 51, 102, 0.12), 0 0 20px rgba(56, 178, 227, 0.15); 102 102 } 103 - .menu-card-link:hover .menu-card {104 - transform:translateY(-5px);105 - box-shadow:0 6px12px rgba(0,0,0,0.15);137 + 138 + .fd-home .card:hover::before { 139 + opacity: 1; 106 106 } 107 - .menu-icon-container { 108 - flex: 0 0 60px; 109 - height: 60px; 110 - background-color: #f8f9fa; 111 - border-radius: 50%; 141 + 142 + .fd-home .card .icon-wrapper { 143 + width: 56px; 144 + height: 56px; 145 + border-radius: 14px; 146 + background: var(--fd-offwhite); 147 + border: 1px solid var(--fd-lightgrey); 112 112 display: flex; 113 113 align-items: center; 114 114 justify-content: center; 115 - margin- right:15px;116 - border:1pxsolid#eaeaea;151 + margin-bottom: 24px; 152 + transition: all 0.3s ease; 117 117 } 118 - .menu-icon {119 - max-width:80%;120 - max-height:80%;121 - object-fit:contain;154 + 155 + .fd-home .card:hover .icon-wrapper { 156 + background: var(--fd-navy); 157 + border-color: var(--fd-navy); 122 122 } 123 - .webex-icon { max-width: 90%; } 124 - .menu-text { 125 - flex: 1; 126 - display: flex; 127 - flex-direction: column; 159 + 160 + .fd-home .card .icon-wrapper svg { 161 + width: 26px; 162 + height: 26px; 163 + stroke: var(--fd-navy); 164 + fill: none; 165 + stroke-width: 1.8; 166 + stroke-linecap: round; 167 + stroke-linejoin: round; 168 + transition: stroke 0.3s ease; 128 128 } 129 - .menu-title { 130 - font-size: 16px; 131 - line-height: 1.4; 132 - font-weight: 600; 170 + 171 + .fd-home .card:hover .icon-wrapper svg { 172 + stroke: #ffffff; 133 133 } 134 - .menu-subtitle { 135 - font-size: 13px; 136 - color: #666; 137 - margin-top: 4px; 174 + 175 + .fd-home .card h2 { 176 + color: var(--fd-navy); 177 + font-weight: 700; 178 + font-size: 1.35rem; 179 + margin: 0 0 10px; 180 + letter-spacing: -0.01em; 138 138 } 139 - .partner-footer { 140 - margin-top: 40px; 141 - padding-top: 20px; 142 - border-top: 1px solid #eee; 143 - justify-content: center; 182 + 183 + .fd-home .card p { 184 + color: var(--fd-slate); 185 + font-weight: 400; 186 + font-size: .95rem; 187 + margin: 0 0 28px; 188 + line-height: 1.6; 189 + flex-grow: 1; 144 144 } 145 - .partner-footer .text-center { 146 - flex: 1; 191 + 192 + .fd-home .card .card-cta { 193 + display: inline-flex; 194 + align-items: center; 195 + gap: 8px; 196 + color: var(--fd-blue); 197 + font-weight: 700; 198 + font-size: .85rem; 199 + text-transform: uppercase; 200 + letter-spacing: .05em; 201 + transition: color 0.2s ease; 202 + } 203 + 204 + .fd-home .card .card-cta svg { 205 + width: 16px; 206 + height: 16px; 207 + stroke: var(--fd-blue); 208 + fill: none; 209 + stroke-width: 2.2; 210 + transition: transform 0.2s ease, stroke 0.2s ease; 211 + } 212 + 213 + .fd-home .card:hover .card-cta { 214 + color: var(--fd-sky); 215 + } 216 + 217 + .fd-home .card:hover .card-cta svg { 218 + stroke: var(--fd-sky); 219 + transform: translateX(4px); 220 + } 221 + 222 + /* Data Services Card Accent Line */ 223 + .fd-home .card.highlight-card::before { 224 + background: linear-gradient(90deg, var(--fd-red), var(--fd-sky)); 225 + } 226 + 227 + /* ---------- FOOTER ---------- */ 228 + .fd-home footer { 229 + max-width: var(--fd-max-w); 230 + margin: 56px auto 0; 231 + padding: 24px 16px 0; 147 147 display: flex; 148 - justify-content: ce nter;233 + justify-content: space-between; 149 149 align-items: center; 235 + border-top: 1px solid var(--fd-lightgrey); 236 + color: var(--fd-grey); 237 + font-size: .85rem; 150 150 } 151 - @media (min-width: 768px) { 152 - .menu-card-link { 153 - flex: 0 0 50%; 154 - max-width: 50%; 155 - padding: 0 10px; 156 - box-sizing: border-box; 157 - } 239 + 240 + .fd-home footer .footer-links { 241 + display: flex; 242 + gap: 20px; 158 158 } 244 + 245 + .fd-home footer a { 246 + color: var(--fd-blue); 247 + text-decoration: none; 248 + font-weight: 600; 249 + transition: color 0.2s ease; 250 + } 251 + 252 + .fd-home footer a:hover { 253 + color: var(--fd-sky); 254 + text-decoration: underline !important; 255 + } 256 + 257 + /* Responsive Adjustments */ 258 + @media (max-width: 900px) { 259 + .fd-home .card-grid { grid-template-columns: 1fr; } 260 + .fd-home .hero h1 { font-size: 2.25rem; } 261 + .fd-home .fiber-strip { padding: 48px 20px 80px; } 262 + .fd-home main { margin-top: -40px; } 263 + .fd-home footer { flex-direction: column; gap: 12px; text-align: center; } 264 + } 159 159 </style> 266 + 267 +<div class="fd-home"> 268 + 269 + <!-- Full-Width Fiber Backdrop Strip --> 270 + <div class="fiber-strip"> 271 + <div class="hero-inner hero"> 272 + <p class="kicker">FirstDigital Technical Documentation</p> 273 + <h1>Product Support <span>Hub</span></h1> 274 + <p class="sub">Centralized access to network specifications, service configurations, and operational guides.</p> 275 + </div> 276 + </div> 277 + 278 + <!-- Main Floating Cards Section --> 279 + <main> 280 + <div class="card-grid"> 281 + 282 + <!-- Voice Services --> 283 + <a class="card" href="https://learn.firstdigital.com/bin/view/FirstDigital%20Product%20Support/"> 284 + <div class="icon-wrapper"> 285 + <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> 286 + <path d="M4 4.5c0-.6.4-1 1-1h2.4c.5 0 .9.3 1 .8l.8 3.2c.1.4 0 .9-.3 1.2l-1.5 1.5c1.1 2.3 3 4.2 5.3 5.3l1.5-1.5c.3-.3.8-.4 1.2-.3l3.2.8c.5.1.8.5.8 1V19c0 .6-.4 1-1 1h-1.5C9.4 20 4 14.6 4 8V4.5Z"/> 287 + </svg> 288 + </div> 289 + <h2>Voice Services</h2> 290 + <p>Hosted cloud PBX, SIP trunking, call routing policies, and UCaaS feature guides.</p> 291 + <span class="card-cta">Access Voice Hub 292 + <svg viewBox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6"/></svg> 293 + </span> 294 + </a> 295 + 296 + <!-- Data Services --> 297 + <a class="card highlight-card" href="https://learn.firstdigital.com/bin/view/Data/"> 298 + <div class="icon-wrapper"> 299 + <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> 300 + <rect x="4" y="4" width="16" height="5" rx="1.2"/> 301 + <rect x="4" y="14" width="16" height="5" rx="1.2"/> 302 + <circle cx="7.5" cy="6.5" r="1" fill="currentColor"/> 303 + <circle cx="7.5" cy="16.5" r="1" fill="currentColor"/> 304 + </svg> 305 + </div> 306 + <h2>Data Services</h2> 307 + <p>Dedicated fiber, MPLS routing, network monitoring, and circuit troubleshooting.</p> 308 + <span class="card-cta">Access Data Hub 309 + <svg viewBox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6"/></svg> 310 + </span> 311 + </a> 312 + 313 + <!-- Account Services --> 314 + <a class="card" href="https://learn.firstdigital.com/bin/view/AccountServices/"> 315 + <div class="icon-wrapper"> 316 + <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> 317 + <circle cx="12" cy="8" r="3.2"/> 318 + <path d="M5 19.5c0-3.6 3.1-6.2 7-6.2s7 2.6 7 6.2"/> 319 + </svg> 320 + </div> 321 + <h2>Account Services</h2> 322 + <p>Billing administration, MACD requests, SLA details, and account escalation pathways.</p> 323 + <span class="card-cta">Access Account Hub 324 + <svg viewBox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6"/></svg> 325 + </span> 326 + </a> 327 + 328 + </div> 329 + </main> 330 + 331 + <!-- Clean Footer --> 332 + <footer> 333 + <div>© FirstDigital. Technical Portal.</div> 334 + <div class="footer-links"> 335 + <a href="https://learn.firstdigital.com/bin/view/Main/?oidc.skipped=true">Wiki Home</a> 336 + <a href="https://learn.firstdigital.com/bin/view/Main/?oidc.skipped=false">Azure Login</a> 337 + </div> 338 + </footer> 339 + 340 +</div> 160 160 {{/html}}
- 1784741189563-764.png
-
- Author
-
... ... @@ -1,1 +1,0 @@ 1 -XWiki.jarethcarpenterfirstdigitalcom - Size
-
... ... @@ -1,1 +1,0 @@ 1 -61.8 KB - Content
- 1784741289632-457.png
-
- Author
-
... ... @@ -1,1 +1,0 @@ 1 -XWiki.jarethcarpenterfirstdigitalcom - Size
-
... ... @@ -1,1 +1,0 @@ 1 -61.8 KB - Content
- 1784751495894-847.png
-
- Author
-
... ... @@ -1,1 +1,0 @@ 1 -XWiki.jarethcarpenterfirstdigitalcom - Size
-
... ... @@ -1,1 +1,0 @@ 1 -61.8 KB - Content
- 55da30a8-a01a-4c4b-a486-a95baf3bc33b
-
- Author
-
... ... @@ -1,1 +1,0 @@ 1 -XWiki.jarethcarpenterfirstdigitalcom - Size
-
... ... @@ -1,1 +1,0 @@ 1 -61.8 KB - Content
- FirstDigital-Logo.png
-
- Size
-
... ... @@ -1,1 +1,1 @@ 1 -14. 3KB1 +14.5 KB - Content
- MS%20teams.webp
-
- Author
-
... ... @@ -1,1 +1,0 @@ 1 -XWiki.aaronblackburnfirstdigitalcom - Size
-
... ... @@ -1,1 +1,0 @@ 1 -20.2 KB - Content
- firstdigitalhome_logo
-
- Author
-
... ... @@ -1,1 +1,0 @@ 1 -XWiki.jarethcarpenterfirstdigitalcom - Size
-
... ... @@ -1,1 +1,0 @@ 1 -61.8 KB - Content
- webexbycisco-3d-vertical-color-black-text.png
-
- Author
-
... ... @@ -1,1 +1,0 @@ 1 -XWiki.jarethcarpenterfirstdigitalcom - Size
-
... ... @@ -1,1 +1,0 @@ 1 -61.8 KB - Content
- CloudConnectedCCP.jpg
-
- Author
-
... ... @@ -1,0 +1,1 @@ 1 +XWiki.jarethcarpenterfirstdigitalcom - Size
-
... ... @@ -1,0 +1,1 @@ 1 +27.8 KB - Content
- FDSipTrunkPerson.jpg
-
- Author
-
... ... @@ -1,0 +1,1 @@ 1 +XWiki.jarethcarpenterfirstdigitalcom - Size
-
... ... @@ -1,0 +1,1 @@ 1 +19.0 KB - Content
- MS teams.webp
-
- Author
-
... ... @@ -1,0 +1,1 @@ 1 +XWiki.aaronblackburnfirstdigitalcom - Size
-
... ... @@ -1,0 +1,1 @@ 1 +26.7 KB - Content
- MicrosoftTeamsPeople.jpg
-
- Author
-
... ... @@ -1,0 +1,1 @@ 1 +XWiki.jarethcarpenterfirstdigitalcom - Size
-
... ... @@ -1,0 +1,1 @@ 1 +30.7 KB - Content
- SupportPeople.jpg
-
- Author
-
... ... @@ -1,0 +1,1 @@ 1 +XWiki.jarethcarpenterfirstdigitalcom - Size
-
... ... @@ -1,0 +1,1 @@ 1 +21.3 KB - Content
- Webex-Symbol.png
-
- Author
-
... ... @@ -1,0 +1,1 @@ 1 +XWiki.aaronblackburnfirstdigitalcom - Size
-
... ... @@ -1,0 +1,1 @@ 1 +671.0 KB - Content