Skip to Content

Wiki source code of

Last modified by Aaron Blackburn on 2026/09/02 15:06
Show last authors
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');
10
11 .fd-home, .fd-home * {
12 box-sizing: border-box;
13 }
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;
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 }
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 }
46
47 .fd-home .hero-inner {
48 max-width: var(--fd-max-w);
49 margin: 0 auto;
50 text-align: center;
51 }
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;
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);
117 }
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);
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);
136 }
137
138 .fd-home .card:hover::before {
139 opacity: 1;
140 }
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);
148 display: flex;
149 align-items: center;
150 justify-content: center;
151 margin-bottom: 24px;
152 transition: all 0.3s ease;
153 }
154
155 .fd-home .card:hover .icon-wrapper {
156 background: var(--fd-navy);
157 border-color: var(--fd-navy);
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;
169 }
170
171 .fd-home .card:hover .icon-wrapper svg {
172 stroke: #ffffff;
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;
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;
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;
238 }
239
240 .fd-home footer .footer-links {
241 display: flex;
242 gap: 20px;
243 }
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 }
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 {{/html}}