Last modified by Aaron Blackburn on 2026/09/02 15:06
Hide last authors
| author | version | line-number | content |
|---|---|---|---|
 |
50.1 | 1 | {{html clean="false"}} |
| |
62.1 | 2 | <!-- |
| |
80.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". | ||
| |
62.1 | 7 | --> |
| 8 | <style> | ||
| |
80.2 | 9 | @import url('https://fonts.googleapis.com/css2?family=Host+Grotesk:wght@300;400;500;600;700;800&display=swap'); |
| |
62.1 | 10 | |
| |
80.2 | 11 | .fd-home, .fd-home * { |
| 12 | box-sizing: border-box; | ||
| 13 | } | ||
| |
62.1 | 14 | |
| |
80.2 | 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; | ||
| |
62.1 | 27 | |
| |
80.2 | 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; | ||
| |
62.1 | 33 | } |
| |
80.2 | 34 | |
| 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); | ||
| |
69.1 | 45 | } |
| |
80.2 | 46 | |
| 47 | .fd-home .hero-inner { | ||
| 48 | max-width: var(--fd-max-w); | ||
| 49 | margin: 0 auto; | ||
| 50 | text-align: center; | ||
| |
70.1 | 51 | } |
| |
62.1 | 52 | |
| |
80.2 | 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 | } | ||
| |
69.1 | 62 | |
| |
80.2 | 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); | ||
| |
70.1 | 71 | } |
| 72 | |||
| |
80.2 | 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 | } | ||
| |
62.1 | 77 | |
| |
80.2 | 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); | ||
| |
62.1 | 86 | } |
| |
80.2 | 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; | ||
| |
62.1 | 95 | } |
| |
80.2 | 96 | |
| 97 | .fd-home .card-grid { | ||
| 98 | display: grid; | ||
| 99 | grid-template-columns: repeat(3, 1fr); | ||
| 100 | gap: 28px; | ||
| |
62.1 | 101 | } |
| |
80.2 | 102 | |
| 103 | /* Frost Glass Cards */ | ||
| 104 | .fd-home .card { | ||
| 105 | position: relative; | ||
| 106 | display: flex; | ||
| 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); | ||
| |
62.1 | 117 | } |
| |
80.2 | 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; | ||
| |
62.1 | 129 | } |
| |
80.2 | 130 | |
| 131 | .fd-home .card:hover { | ||
| 132 | transform: translateY(-6px); | ||
| 133 | background: #ffffff; | ||
| 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); | ||
| |
62.1 | 136 | } |
| |
80.2 | 137 | |
| 138 | .fd-home .card:hover::before { | ||
| 139 | opacity: 1; | ||
| |
62.1 | 140 | } |
| 141 | |||
| |
80.2 | 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); | ||
| 148 | display: flex; | ||
| 149 | align-items: center; | ||
| 150 | justify-content: center; | ||
| 151 | margin-bottom: 24px; | ||
| 152 | transition: all 0.3s ease; | ||
| |
62.1 | 153 | } |
| |
80.2 | 154 | |
| 155 | .fd-home .card:hover .icon-wrapper { | ||
| 156 | background: var(--fd-navy); | ||
| 157 | border-color: var(--fd-navy); | ||
| |
62.1 | 158 | } |
| 159 | |||
| |
80.2 | 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; | ||
| |
62.1 | 169 | } |
| |
80.2 | 170 | |
| 171 | .fd-home .card:hover .icon-wrapper svg { | ||
| 172 | stroke: #ffffff; | ||
| |
62.1 | 173 | } |
| |
80.2 | 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; | ||
| |
62.1 | 181 | } |
| 182 | |||
| |
80.2 | 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; | ||
| |
62.1 | 190 | } |
| 191 | |||
| |
80.2 | 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; | ||
| |
62.1 | 202 | } |
| |
80.2 | 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; | ||
| |
62.1 | 211 | } |
| |
80.2 | 212 | |
| 213 | .fd-home .card:hover .card-cta { | ||
| 214 | color: var(--fd-sky); | ||
| |
62.1 | 215 | } |
| |
80.2 | 216 | |
| 217 | .fd-home .card:hover .card-cta svg { | ||
| 218 | stroke: var(--fd-sky); | ||
| 219 | transform: translateX(4px); | ||
| |
62.1 | 220 | } |
| |
80.2 | 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)); | ||
| |
62.1 | 225 | } |
| |
80.2 | 226 | |
| 227 | /* ---------- FOOTER ---------- */ | ||
| 228 | .fd-home footer { | ||
| 229 | max-width: var(--fd-max-w); | ||
| 230 | margin: 56px auto 0; | ||
| 231 | padding: 24px 16px 0; | ||
| 232 | display: flex; | ||
| 233 | justify-content: space-between; | ||
| 234 | align-items: center; | ||
| 235 | border-top: 1px solid var(--fd-lightgrey); | ||
| 236 | color: var(--fd-grey); | ||
| 237 | font-size: .85rem; | ||
| |
62.1 | 238 | } |
| |
80.2 | 239 | |
| 240 | .fd-home footer .footer-links { | ||
| 241 | display: flex; | ||
| 242 | gap: 20px; | ||
| |
62.1 | 243 | } |
| |
80.2 | 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; | ||
| |
62.1 | 250 | } |
| 251 | |||
| |
80.2 | 252 | .fd-home footer a:hover { |
| 253 | color: var(--fd-sky); | ||
| 254 | text-decoration: underline !important; | ||
| |
62.1 | 255 | } |
| 256 | |||
| |
80.2 | 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; } | ||
| |
62.1 | 264 | } |
| 265 | </style> | ||
| 266 | |||
| 267 | <div class="fd-home"> | ||
| 268 | |||
| |
80.2 | 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> | ||
| |
78.1 | 274 | <p class="sub">Centralized access to network specifications, service configurations, and operational guides.</p> |
| |
62.1 | 275 | </div> |
| 276 | </div> | ||
| 277 | |||
| |
80.2 | 278 | <!-- Main Floating Cards Section --> |
| |
62.1 | 279 | <main> |
| 280 | <div class="card-grid"> | ||
| 281 | |||
| |
80.2 | 282 | <!-- Voice Services --> |
| |
64.1 | 283 | <a class="card" href="https://learn.firstdigital.com/bin/view/FirstDigital%20Product%20Support/"> |
| |
80.2 | 284 | <div class="icon-wrapper"> |
| |
62.1 | 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> | ||
| |
80.2 | 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> | ||
| |
62.1 | 293 | </span> |
| 294 | </a> | ||
| 295 | |||
| |
80.2 | 296 | <!-- Data Services --> |
| 297 | <a class="card highlight-card" href="https://learn.firstdigital.com/bin/view/Data/"> | ||
| 298 | <div class="icon-wrapper"> | ||
| |
62.1 | 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"/> | ||
| |
80.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"/> | ||
| |
62.1 | 304 | </svg> |
| 305 | </div> | ||
| 306 | <h2>Data Services</h2> | ||
| |
78.1 | 307 | <p>Dedicated fiber, MPLS routing, network monitoring, and circuit troubleshooting.</p> |
| |
80.2 | 308 | <span class="card-cta">Access Data Hub |
| 309 | <svg viewBox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6"/></svg> | ||
| |
62.1 | 310 | </span> |
| 311 | </a> | ||
| 312 | |||
| |
80.2 | 313 | <!-- Account Services --> |
| 314 | <a class="card" href="https://learn.firstdigital.com/bin/view/AccountServices/"> | ||
| 315 | <div class="icon-wrapper"> | ||
| |
62.1 | 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> | ||
| |
78.1 | 322 | <p>Billing administration, MACD requests, SLA details, and account escalation pathways.</p> |
| |
80.2 | 323 | <span class="card-cta">Access Account Hub |
| 324 | <svg viewBox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6"/></svg> | ||
| |
62.1 | 325 | </span> |
| 326 | </a> | ||
| 327 | |||
| 328 | </div> | ||
| 329 | </main> | ||
| 330 | |||
| |
80.2 | 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> | ||
| |
76.1 | 339 | |
| |
62.1 | 340 | </div> |
| |
50.1 | 341 | {{/html}} |