Skip to Content

Changes for page

Last modified by Aaron Blackburn on 2026/09/02 15:06
From version 80.2
edited by Aaron Blackburn
on 2026/09/02 15:06
Change comment: There is no comment for this version
To version 38.1
edited by Aaron Blackburn
on 2026/07/22 20:45
Change comment: Deleted image "1784741289632-457.png"

Summary

Details

Page properties
Title
... ... @@ -1,1 +1,1 @@
1 -
1 +Home
Content
... ... @@ -1,341 +1,226 @@
1 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');
2 +<div class="modern-menu-container">
3 + <div class="menu-grid">
4 +
5 + <!-- Card 1: Webex -->
6 + <a href="TARGET_URL_FOR_WEBEX" class="menu-card-link">
7 + <div class="menu-card">
8 + <div class="menu-icon-container">
9 + <!-- Ensure 'Webex-Symbol.jpg' is attached to this page -->
10 + <img src="$xwiki.getURL('current','download','filepath=Webex-Symbol.jpg')" alt="Webex" class="menu-icon webex-logo" />
11 + </div>
12 + <div class="menu-text">
13 + <div class="menu-title">Cloud Connected PSTN (CCP)</div>
14 + <div class="menu-subtitle">Webex Integration</div>
15 + </div>
16 + </div>
17 + </a>
10 10  
11 - .fd-home, .fd-home * {
12 - box-sizing: border-box;
13 - }
19 + <!-- Card 2: MS Teams -->
20 + <a href="TARGET_URL_FOR_TEAMS" class="menu-card-link">
21 + <div class="menu-card">
22 + <div class="menu-icon-container">
23 + <!-- Ensure 'MS teams.webp' is attached to this page -->
24 + <img src="$xwiki.getURL('current','download','filepath=MS teams.webp')" alt="MS Teams" class="menu-icon teams-logo" />
25 + </div>
26 + <div class="menu-text">
27 + <div class="menu-title"><strong>MS Teams</strong></div>
28 + <div class="menu-subtitle">Direct Routing</div>
29 + </div>
30 + </div>
31 + </a>
14 14  
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;
33 + <!-- Card 3: FirstDigital SIP Trunk -->
34 + <a href="TARGET_URL_FOR_SIP" class="menu-card-link">
35 + <div class="menu-card">
36 + <div class="menu-icon-container">
37 + <!-- Ensure 'image_29.png' is attached to this page -->
38 + <img src="$xwiki.getURL('current','download','filepath=image_29.png')" alt="FirstDigital" class="menu-icon firstdigital-logo" />
39 + </div>
40 + <div class="menu-text">
41 + <div class="menu-title"><strong>FirstDigital SIP trunk</strong></div>
42 + <div class="menu-subtitle">Voice Connectivity</div>
43 + </div>
44 + </div>
45 + </a>
27 27  
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 - }
47 + <!-- Card 4: Support -->
48 + <a href="TARGET_URL_FOR_SUPPORT" class="menu-card-link">
49 + <div class="menu-card">
50 + <div class="menu-icon-container icon-only-bg">
51 + <!-- Support Icon (using a clean vector equivalent) -->
52 + <svg class="menu-icon support-icon" viewBox="0 0 24 24" width="24" height="24" stroke="#0060FF" 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>
53 + </div>
54 + <div class="menu-text">
55 + <div class="menu-title"><strong>Support</strong></div>
56 + <div class="menu-subtitle">Knowledge Base & Tickets</div>
57 + </div>
58 + </div>
59 + </a>
34 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);
45 - }
61 + </div>
46 46  
47 - .fd-home .hero-inner {
48 - max-width: var(--fd-max-w);
49 - margin: 0 auto;
50 - text-align: center;
51 - }
63 + <!-- Partner Footer Links -->
64 + <div class="partner-footer">
65 + <a href="https://learn.firstdigital.com/bin/view/Main/?oidc.skipped=true" class="footer-brand">
66 + First<span style="color:#004080;">Digital</span>
67 + </a>
68 + <span class="footer-divider">|</span>
69 + <a href="https://learn.firstdigital.com/bin/view/Main/?oidc.skipped=false" class="footer-brand azure-brand">
70 + Microsoft Azure
71 + </a>
72 + </div>
73 +</div>
52 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;
75 +<style>
76 + /* Container setup */
77 + .modern-menu-container {
78 + max-width: 1000px;
83 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);
80 + padding: 20px;
81 + box-sizing: border-box;
86 86   }
87 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 {
84 + /* CSS Grid Setup: 2 columns, equal width */
85 + .menu-grid {
98 98   display: grid;
99 - grid-template-columns: repeat(3, 1fr);
100 - gap: 28px;
87 + grid-template-columns: repeat(2, 1fr);
88 + gap: 20px;
89 + width: 100%;
101 101   }
102 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;
92 + /* General Reset for links */
93 + .menu-card-link {
114 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);
95 + display: block;
96 + height: 100%;
117 117   }
118 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);
99 + /* Card Styling */
100 + .menu-card {
133 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);
102 + border-radius: 12px;
103 + padding: 20px;
104 + display: flex;
105 + align-items: center;
106 + box-shadow: 0 4px 6px rgba(0,0,0,0.05);
107 + transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
108 + border: 1px solid #eaeaea;
109 + color: #333;
110 + height: 100%; /* Ensures cards in same row stretch to same height */
111 + box-sizing: border-box;
136 136   }
137 137  
138 - .fd-home .card:hover::before {
139 - opacity: 1;
114 + .menu-card-link:hover .menu-card {
115 + transform: translateY(-3px);
116 + box-shadow: 0 6px 12px rgba(0,0,0,0.1);
117 + border-color: #c1c1c1;
140 140   }
141 141  
142 - .fd-home .card .icon-wrapper {
143 - width: 56px;
120 + /* Icon Container: Uniform circle for all icons */
121 + .menu-icon-container {
122 + flex: 0 0 56px; /* Fixed size for icon circle */
144 144   height: 56px;
145 - border-radius: 14px;
146 - background: var(--fd-offwhite);
147 - border: 1px solid var(--fd-lightgrey);
124 + background-color: #f4f6f8; /* Light grey background from original support icon */
125 + border-radius: 50%;
148 148   display: flex;
149 149   align-items: center;
150 150   justify-content: center;
151 - margin-bottom: 24px;
152 - transition: all 0.3s ease;
129 + margin-right: 16px;
130 + overflow: hidden; /* Keeps logos within circle */
131 + border: 1px solid #e0e0e0;
153 153   }
154 -
155 - .fd-home .card:hover .icon-wrapper {
156 - background: var(--fd-navy);
157 - border-color: var(--fd-navy);
133 +
134 + /* Specific Logo Scaling */
135 + .menu-icon {
136 + object-fit: contain;
158 158   }
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;
138 +
139 + /* Webex (Logo is wide, fits best at 85% width) */
140 + .webex-logo {
141 + width: 85%;
142 + height: auto;
169 169   }
170 -
171 - .fd-home .card:hover .icon-wrapper svg {
172 - stroke: #ffffff;
144 +
145 + /* MS Teams (Icon is square, fits best at 75% width) */
146 + .teams-logo {
147 + width: 75%;
148 + height: auto;
173 173   }
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;
150 +
151 + /* FirstDigital (Logo is wide, fits best at 90% width) */
152 + .firstdigital-logo {
153 + width: 90%;
154 + height: auto;
181 181   }
182 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;
157 + /* Support Icon (SVG styling) */
158 + .support-icon {
159 + width: 60%;
160 + height: 60%;
190 190   }
191 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;
163 + /* Text Area */
164 + .menu-text {
165 + flex: 1;
166 + display: flex;
167 + flex-direction: column;
168 + justify-content: center;
202 202   }
203 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;
171 + .menu-title {
172 + font-size: 16px;
173 + line-height: 1.4;
174 + font-weight: 600;
175 + color: #1a1a1a;
211 211   }
212 212  
213 - .fd-home .card:hover .card-cta {
214 - color: var(--fd-sky);
178 + .menu-subtitle {
179 + font-size: 13px;
180 + color: #666;
181 + margin-top: 4px;
182 + font-weight: 400;
215 215   }
216 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;
185 + /* Partner footer adjustments */
186 + .partner-footer {
187 + margin-top: 40px;
188 + padding-top: 20px;
189 + border-top: 1px solid #eee;
232 232   display: flex;
233 - justify-content: space-between;
191 + justify-content: center;
234 234   align-items: center;
235 - border-top: 1px solid var(--fd-lightgrey);
236 - color: var(--fd-grey);
237 - font-size: .85rem;
193 + gap: 15px;
194 + font-family: Arial, sans-serif;
238 238   }
239 239  
240 - .fd-home footer .footer-links {
241 - display: flex;
242 - gap: 20px;
197 + .footer-brand {
198 + font-weight: 700;
199 + font-size: 14px;
200 + color: #0060ff; /* Primary brand blue */
201 + text-decoration: none !important;
243 243   }
244 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;
204 + .azure-brand {
205 + color: #0078d4; /* Azure blue */
250 250   }
251 251  
252 - .fd-home footer a:hover {
253 - color: var(--fd-sky);
254 - text-decoration: underline !important;
208 + .footer-divider {
209 + color: #ccc;
210 + font-weight: 300;
255 255   }
256 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; }
213 + /* Responsive Breakpoints: Mobile */
214 + @media (max-width: 768px) {
215 + .menu-grid {
216 + grid-template-columns: 1fr; /* Stack to 1 column on mobile */
217 + }
218 + .modern-menu-container {
219 + padding: 10px;
220 + }
221 + .menu-card {
222 + padding: 15px;
223 + }
264 264   }
265 265  </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>
341 341  {{/html}}
CloudConnectedCCP.jpg
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.jarethcarpenterfirstdigitalcom
Size
... ... @@ -1,1 +1,0 @@
1 -27.8 KB
Content
FDSipTrunkPerson.jpg
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.jarethcarpenterfirstdigitalcom
Size
... ... @@ -1,1 +1,0 @@
1 -19.0 KB
Content
FirstDigital-Logo.png
Size
... ... @@ -1,1 +1,1 @@
1 -14.5 KB
1 +14.3 KB
Content
MS teams.webp
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.aaronblackburnfirstdigitalcom
Size
... ... @@ -1,1 +1,0 @@
1 -26.7 KB
Content
MicrosoftTeamsPeople.jpg
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.jarethcarpenterfirstdigitalcom
Size
... ... @@ -1,1 +1,0 @@
1 -30.7 KB
Content
SupportPeople.jpg
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.jarethcarpenterfirstdigitalcom
Size
... ... @@ -1,1 +1,0 @@
1 -21.3 KB
Content
Webex-Symbol.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.aaronblackburnfirstdigitalcom
Size
... ... @@ -1,1 +1,0 @@
1 -671.0 KB
Content
1784741189563-764.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.jarethcarpenterfirstdigitalcom
Size
... ... @@ -1,0 +1,1 @@
1 +61.8 KB
Content
1784751495894-847.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.jarethcarpenterfirstdigitalcom
Size
... ... @@ -1,0 +1,1 @@
1 +61.8 KB
Content
MS%20teams.webp
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.aaronblackburnfirstdigitalcom
Size
... ... @@ -1,0 +1,1 @@
1 +20.2 KB
Content
webexbycisco-3d-vertical-color-black-text.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.jarethcarpenterfirstdigitalcom
Size
... ... @@ -1,0 +1,1 @@
1 +61.8 KB
Content