Skip to Content

Changes for page

Last modified by Aaron Blackburn on 2026/09/02 15:06
From version 35.1
edited by Aaron Blackburn
on 2026/07/22 20:35
Change comment: There is no comment for this version
To version 80.2
edited by Aaron Blackburn
on 2026/09/02 15:06
Change comment: There is no comment for this version

Summary

Details

Page properties
Title
... ... @@ -1,1 +1,1 @@
1 -Home
1 +
Content
... ... @@ -1,151 +1,341 @@
1 1  {{html clean="false"}}
2 -<div class="modern-menu-container">
3 - <div class="row">
4 - <!-- Card 1: Webex -->
5 - <a href="TARGET_URL_FOR_WEBEX" class="menu-card-link">
6 - <div class="menu-card">
7 - <div class="menu-icon-container" style="color: #0060ff;">
8 - <svg viewBox="0 0 24 24" width="28" height="28" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
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>
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="menu-card-link">
19 - <div class="menu-card">
20 - <div class="menu-icon-container" style="color: #464775;">
21 - <svg viewBox="0 0 24 24" width="28" height="28" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
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>
11 + .fd-home, .fd-home * {
12 + box-sizing: border-box;
13 + }
29 29  
30 - <!-- Card 3: FirstDigital SIP Trunk -->
31 - <a href="TARGET_URL_FOR_SIP" class="menu-card-link">
32 - <div class="menu-card">
33 - <div class="menu-icon-container" style="color: #004080;">
34 - <svg viewBox="0 0 24 24" width="26" height="26" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></svg>
35 - </div>
36 - <div class="menu-text">
37 - <div class="menu-title"><strong>FirstDigital SIP trunk</strong></div>
38 - <div class="menu-subtitle">Voice Connectivity</div>
39 - </div>
40 - </div>
41 - </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;
42 42  
43 - <!-- Card 4: Support -->
44 - <a href="TARGET_URL_FOR_SUPPORT" class="menu-card-link">
45 - <div class="menu-card">
46 - <div class="menu-icon-container" style="color: #0060ff;">
47 - <svg viewBox="0 0 24 24" width="26" height="26" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
48 - </div>
49 - <div class="menu-text">
50 - <div class="menu-title"><strong>Support</strong></div>
51 - <div class="menu-subtitle">Knowledge Base & Tickets</div>
52 - </div>
53 - </div>
54 - </a>
55 - </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 + }
56 56  
57 - <!-- Partner Footer Links -->
58 - <div class="partner-footer">
59 - <a href="https://learn.firstdigital.com/bin/view/Main/?oidc.skipped=true" class="footer-brand">
60 - First<span style="color:#004080;">Digital</span>
61 - </a>
62 - <span class="footer-divider">|</span>
63 - <a href="https://learn.firstdigital.com/bin/view/Main/?oidc.skipped=false" class="footer-brand azure-brand">
64 - Microsoft Azure
65 - </a>
66 - </div>
67 -</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 + }
68 68  
69 -<style>
70 - .modern-menu-container {
71 - max-width: 960px;
47 + .fd-home .hero-inner {
48 + max-width: var(--fd-max-w);
72 72   margin: 0 auto;
73 - padding: 20px;
50 + text-align: center;
74 74   }
75 - .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 {
76 76   display: grid;
77 - grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
78 - gap: 16px;
79 - margin-bottom: 20px;
99 + grid-template-columns: repeat(3, 1fr);
100 + gap: 28px;
80 80   }
81 - .menu-card-link {
82 - display: block;
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;
83 83   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 {
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;
129 + }
130 +
131 + .fd-home .card:hover {
132 + transform: translateY(-6px);
86 86   background: #ffffff;
87 - border-radius: 12px;
88 - padding: 18px;
89 - display: flex;
90 - align-items: center;
91 - box-shadow: 0 4px 6px rgba(0,0,0,0.04);
92 - transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
93 - border: 1px solid #eaeaea;
94 - color: #333;
95 - height: 100%;
96 - 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);
97 97   }
98 - .menu-card-link:hover .menu-card {
99 - transform: translateY(-3px);
100 - box-shadow: 0 8px 15px rgba(0,0,0,0.08);
101 - border-color: #d0d7de;
137 +
138 + .fd-home .card:hover::before {
139 + opacity: 1;
102 102   }
103 - .menu-icon-container {
104 - flex: 0 0 52px;
105 - height: 52px;
106 - background-color: #f4f6f8;
107 - 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);
108 108   display: flex;
109 109   align-items: center;
110 110   justify-content: center;
111 - margin-right: 16px;
151 + margin-bottom: 24px;
152 + transition: all 0.3s ease;
112 112   }
113 - .menu-text {
114 - flex: 1;
115 - display: flex;
116 - flex-direction: column;
154 +
155 + .fd-home .card:hover .icon-wrapper {
156 + background: var(--fd-navy);
157 + border-color: var(--fd-navy);
117 117   }
118 - .menu-title {
119 - font-size: 15px;
120 - line-height: 1.3;
121 - font-weight: 600;
122 - color: #1f2328;
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;
123 123   }
124 - .menu-subtitle {
125 - font-size: 12px;
126 - color: #656d76;
127 - margin-top: 3px;
170 +
171 + .fd-home .card:hover .icon-wrapper svg {
172 + stroke: #ffffff;
128 128   }
129 - .partner-footer {
130 - margin-top: 30px;
131 - padding-top: 20px;
132 - border-top: 1px solid #eaeaea;
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;
181 + }
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;
190 + }
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;
133 133   display: flex;
134 - justify-content: center;
233 + justify-content: space-between;
135 135   align-items: center;
136 - gap: 15px;
235 + border-top: 1px solid var(--fd-lightgrey);
236 + color: var(--fd-grey);
237 + font-size: .85rem;
137 137   }
138 - .footer-brand {
139 - font-weight: 700;
140 - font-size: 14px;
141 - color: #0060ff;
142 - text-decoration: none !important;
239 +
240 + .fd-home footer .footer-links {
241 + display: flex;
242 + gap: 20px;
143 143   }
144 - .azure-brand {
145 - color: #0078d4;
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;
146 146   }
147 - .footer-divider {
148 - color: #d0d7de;
251 +
252 + .fd-home footer a:hover {
253 + color: var(--fd-sky);
254 + text-decoration: underline !important;
149 149   }
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 + }
150 150  </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>&copy; 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>
151 151  {{/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
FirstDigital-Logo.png
Size
... ... @@ -1,1 +1,1 @@
1 -14.3 KB
1 +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
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