Sandbox Test Page 3

@import url('https://fonts.googleapis.com/css2?family=Host+Grotesk:wght@300;400;500;600;700;800&family=Poppins:wght@300;400;500;600;700;800&display=swap');

21

22

.fd-home, .fd-home *{ box-sizing:border-box; }

.fd-home{

--fd-navy:#003366;

--fd-blue:#307ab2;

--fd-sky:#38b2e3;

--fd-red:#cf333d;

--fd-slate:#2e404d;

--fd-grey:#8f9499;

--fd-lightgrey:#dedede;

32

--fd-offwhite:#f0f0f0;

--fd-max-w:1040px;

display:block;

font-family:'Host Grotesk','Poppins','Segoe UI',system-ui,sans-serif;

37

color:var(--fd-slate);

background:#ffffff;

font-weight:300;

line-height:1.6;

}

/* ---- Footer ---- */

.fdm-footer {

margin-top: 32px;

padding-top: 18px;

border-top: 1px solid var(--fd-bg-mid);

47

display: flex;

48

justify-content: left;

align-items: center;

flex-wrap: wrap;

gap: 14px;

font-size: 13px;

}

.fdm-footer a {

font-weight: 600;

text-decoration: none !important;

57

color: var(--fd-blue);

58

}

59

60

.fdm-footer a:hover { text-decoration: underline !important; }

61

62

.fdm-footer a:focus-visible {

63

outline: 2px solid var(--fd-blue-bright);

outline-offset: 3px;

}

.fd-home a{ color:var(--fd-blue); }

68

69

/* ---------- HERO ---------- */

70

.fd-home .hero{

71

position:relative;

72

background:var(--fd-navy);

73

overflow:hidden;

74

padding:56px 32px 68px;

75

text-align:center;

76

}

77

.fd-home .hero-inner{

78

max-width:var(--fd-max-w);

margin:0 auto;

position:relative;

z-index:2;

}

.fd-home .hero .logo{

height:36px;

margin:0 auto 28px;

display:block;

}

.fd-home .hero p.kicker{

89

color:var(--fd-sky);

90

font-weight:700;

91

text-transform:uppercase;

92

letter-spacing:.08em;

font-size:.8rem;

margin:0 0 10px;

}

.fd-home .hero h1{

color:#ffffff;

font-weight:800;

font-size:2.5rem;

margin:0 0 14px;

letter-spacing:-0.01em;

102

}

103

.fd-home .hero p.sub{

color:#dbe9f4;

font-weight:300;

font-size:1.05rem;

max-width:520px;

margin:0 auto;

}

.fd-home .wave{

position:absolute;

top:0; right:0; bottom:0;

width:70%;

z-index:1;

pointer-events:none;

}

/* ---------- SEARCH-LIKE UTILITY STRIP (optional quick note) ---------- */

119

.fd-home .utility-strip{

120

background:var(--fd-offwhite);

121

border-bottom:1px solid var(--fd-lightgrey);

padding:14px 32px;

text-align:center;

}

.fd-home .utility-strip p{

126

margin:0;

127

font-size:.85rem;

128

color:var(--fd-grey);

font-weight:500;

}

/* ---------- CARD GRID ---------- */

133

.fd-home main{

134

max-width:var(--fd-max-w);

135

margin:0 auto;

136

padding:56px 32px 24px;

137

}

138

.fd-home .section-label{

139

color:var(--fd-navy);

font-weight:800;

font-size:1.15rem;

margin:0 0 6px;

}

.fd-home .section-rule{

145

width:56px;

146

height:4px;

147

background:var(--fd-red);

border:none;

border-radius:2px;

margin:0 0 32px;

}

.fd-home .card-grid{

display:grid;

grid-template-columns:repeat(3, 1fr);

gap:24px;

}

.fd-home .card{

display:flex;

flex-direction:column;

162

background:#ffffff;

163

border:1px solid var(--fd-lightgrey);

164

border-radius:14px;

165

padding:32px 28px;

166

text-decoration:none;

167

transition:box-shadow .18s ease, border-color .18s ease, transform .18s ease;

168

}

169

.fd-home .card:hover{

170

box-shadow:0 12px 28px rgba(0,51,102,.12);

171

border-color:var(--fd-sky);

172

transform:translateY(-2px);

173

}

174

.fd-home .card .icon-badge{

width:56px;

height:56px;

border-radius:50%;

background:var(--fd-offwhite);

179

display:flex;

180

align-items:center;

181

justify-content:center;

182

margin-bottom:20px;

183

}

184

.fd-home .card .icon-badge svg{

185

width:28px;

186

height:28px;

187

stroke:var(--fd-navy);

188

fill:none;

189

stroke-width:1.8;

190

stroke-linecap:round;

191

stroke-linejoin:round;

192

}

193

.fd-home .card .icon-badge svg .fill-accent{

fill:var(--fd-sky);

stroke:none;

}

.fd-home .card h2{

color:var(--fd-navy);

font-weight:800;

font-size:1.25rem;

margin:0 0 8px;

letter-spacing:-0.005em;

203

}

204

.fd-home .card p{

205

color:var(--fd-slate);

font-weight:300;

font-size:.92rem;

margin:0 0 20px;

flex-grow:1;

}

.fd-home .card .card-cta{

display:inline-flex;

align-items:center;

gap:6px;

color:var(--fd-blue);

216

font-weight:700;

217

font-size:.85rem;

218

text-transform:uppercase;

219

letter-spacing:.03em;

220

}

221

.fd-home .card .card-cta svg{

222

width:14px;

223

height:14px;

224

stroke:var(--fd-blue);

225

fill:none;

226

stroke-width:2.2;

227

transition:transform .18s ease;

228

}

229

.fd-home .card:hover .card-cta svg{ transform:translateX(3px); }

230

231

.fd-home footer{

232

max-width:var(--fd-max-w);

233

margin:0 auto;

234

padding:32px 32px 48px;

display:flex;

align-items:center;

gap:12px;

color:var(--fd-grey);

239

font-size:.8rem;

240

border-top:1px solid var(--fd-lightgrey);

241

margin-top:24px;

242

}

243

.fd-home footer img{ height:18px; opacity:.8; }

244

245

@media (max-width:820px){

246

.fd-home .card-grid{ grid-template-columns:1fr; }

247

.fd-home .hero h1{ font-size:2rem; }

248

.fd-home main{ padding:40px 20px 8px; }

249

.fd-home .hero{ padding:44px 20px 56px; }

}

</style>

</svg>

<p class="kicker">FirstDigital Wiki</p>

264

<h1>Welcome Home</h1>

265

<p class="sub">Your starting point for guides, policies, and support resources across Voice, Data, and Account services.</p>

</div>

</div>

<p>Looking for something specific? Use the search bar above, or jump into one of the sections below.</p>

</div>

<main>

<p class="section-label">Browse by Service</p>

</svg>

</div>

<h2>Voice Services</h2>

286

<p>Hosted voice, unified communications, calling features, and CNAM/caller ID guidance.</p>

287

<span class="card-cta">View guides

</span>

</a>

</svg>

</div>

<h2>Data Services</h2>

302

<p>Fiber internet, Ethernet, dedicated connectivity, and network reliability resources.</p>

303

<span class="card-cta">View guides

</span>

</a>

</svg>

</div>

<h2>Account Services</h2>

316

<p>Billing, support requests, account changes, and general customer service resources.</p>

317

<span class="card-cta">View guides

</span>

</a>

</div>

</main>

<span>FirstDigital · Wiki</span>

</a>

<a href="https://learn.firstdigital.com/bin/view/Main/?oidc.skipped=true"><span class="fdm-brand-first">First</span><span class="fdm-brand-second">Digital</span></a>

334

335

<a class="fdm-azure" href="https://learn.firstdigital.com/bin/view/Main/?oidc.skipped=false">Microsoft Azure</a>

336

</footer>

337

</div>

338

Wiki source code of Sandbox Test Page 3