* {
box-sizing: border-box;
}
html,
body {
margin: 0;
min-height: 100%;
}
body {
background: #02070b;
color: #ffffff;
font-family:
Arial,
Helvetica,
sans-serif;
}
.wallpaper {
position: fixed;
inset: 0;
z-index: -3;
background:
url("/static/images/metricszilla-wallpaper.png")
center center / cover no-repeat fixed,
radial-gradient(
circle at 50% 20%,
#164b66,
#02070b 70%
);
}
.darkener {
position: fixed;
inset: 0;
z-index: -2;
background:
linear-gradient(
180deg,
rgba(0,0,0,.18),
rgba(0,8,13,.57) 42%,
rgba(0,7,11,.90) 100%
);
}
.page {
width:
min(
1500px,
calc(100% - 32px)
);
margin: auto;
}
.hero {
min-height: 340px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 60px 20px 40px;
}
.brand {
font-size:
clamp(
50px,
8vw,
100px
);
font-weight: 900;
letter-spacing: 3px;
text-shadow:
0 4px 24px #000000;
}
.brand span {
color: #19d6ff;
}
.tagline {
margin-top: 12px;
color: #5be3ff;
font-size: 13px;
font-weight: 800;
letter-spacing: 4px;
text-shadow:
0 2px 5px #000000;
}
.hero p {
max-width: 800px;
margin: 22px auto 0;
color: #d2e1e8;
line-height: 1.65;
font-size: 16px;
text-shadow:
0 2px 5px #000000;
}
.section-title {
display: flex;
gap: 16px;
align-items: center;
margin-bottom: 23px;
color: #4ce1ff;
font-size: 12px;
letter-spacing: 2px;
}
.section-title span {
flex: 1;
height: 1px;
background:
rgba(
71,
218,
255,
.42
);
}
.cards {
display: grid;
grid-template-columns:
repeat(
auto-fit,
minmax(
285px,
1fr
)
);
gap: 18px;
}
.card {
min-height: 320px;
display: flex;
flex-direction: column;
padding: 22px;
border:
1px solid
rgba(
52,
210,
246,
.40
);
border-radius: 12px;
background:
linear-gradient(
145deg,
rgba(
8,
30,
42,
.91
),
rgba(
3,
12,
18,
.95
)
);
backdrop-filter:
blur(7px);
color: white;
text-decoration: none;
box-shadow:
0 14px 38px
rgba(
0,
0,
0,
.40
);
transition:
.18s ease;
}
a.card:hover {
transform:
translateY(-5px);
border-color:
#56e5ff;
box-shadow:
0 17px 45px
rgba(
0,
204,
255,
.14
);
}
.coming {
border-color:
rgba(
187,
105,
255,
.55
);
}
.card-head {
display: flex;
justify-content:
space-between;
align-items: center;
}
.icon {
font-size: 43px;
}
.badge {
padding:
5px 9px;
border:
1px solid
rgba(
70,
244,
169,
.47
);
border-radius: 18px;
color: #4af2aa;
font-size: 9px;
font-weight: 900;
letter-spacing: 1px;
}
.future-badge {
color: #dda2ff;
border-color:
rgba(
221,
162,
255,
.5
);
}
.category {
margin-top: 24px;
color: #4bdbff;
font-size: 9px;
font-weight: 900;
letter-spacing: 1.5px;
}
.card h2 {
margin:
7px 0
4px;
font-size: 25px;
}
.domain {
color: #80a7b6;
font-size: 11px;
}
.card p {
flex: 1;
margin-top: 18px;
color: #b7cbd3;
line-height: 1.6;
font-size: 13px;
}
.launch {
margin-top: 20px;
padding-top: 12px;
border-top:
1px solid
rgba(
75,
166,
196,
.26
);
color: #50ddff;
font-size: 11px;
font-weight: 900;
letter-spacing: 1px;
}
.launch span {
float: right;
font-size: 18px;
}
.coming .launch {
color: #d598f7;
}
.future {
margin:
38px 0;
padding: 28px;
text-align: center;
border:
1px solid
rgba(
51,
193,
229,
.32
);
border-radius: 12px;
background:
rgba(
3,
13,
19,
.82
);
}
.future-title {
color: #51dcff;
font-size: 12px;
font-weight: 900;
letter-spacing: 2px;
}
.future p {
max-width: 820px;
margin:
14px auto
20px;
color: #9cb4bf;
line-height: 1.6;
}
.future-row {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 9px;
}
.future-row span {
padding: 10px 13px;
border:
1px solid
rgba(
78,
168,
195,
.3
);
border-radius: 6px;
color: #cadce3;
font-size: 12px;
}
footer {
display: flex;
justify-content:
space-between;
gap: 20px;
padding:
25px 3px
40px;
border-top:
1px solid
rgba(
65,
166,
195,
.25
);
color: #718b97;
font-size: 11px;
}
footer strong {
color: #4bdcff;
}
@media (
max-width: 650px
) {
.page {
width:
calc(
100% - 18px
);
}
.hero {
min-height: 260px;
}
footer {
flex-direction: column;
}
}
/* =========================================================
METRICSZILLA - BALANCED TOOL CARD LAYOUT
========================================================= */
/*
Desktop:
Cards are allowed to distribute naturally across the full
available width. The final incomplete row is centered so
seven tools look intentional rather than like missing cards.
*/
main,
.tools-grid,
.cards,
.card-grid,
.tool-grid {
justify-content: center;
}
/*
The MetricsZilla tool cards themselves.
Keep the existing visual size but allow the browser to
distribute them evenly.
*/
main > .card,
.tools-grid > .card,
.cards > .card,
.card-grid > .card,
.tool-grid > .card {
flex: 0 1 260px;
}
/*
If the existing container is CSS Grid, override it with a
responsive auto-fit layout. This centers incomplete rows.
*/
main {
display: grid !important;
grid-template-columns:
repeat(
auto-fit,
minmax(230px, 1fr)
) !important;
gap: 14px !important;
justify-content: center !important;
align-items: stretch !important;
}
/*
Prevent the cards from becoming excessively wide on a
partially filled row.
*/
main > .card {
width: 100% !important;
max-width: 275px !important;
justify-self: center !important;
}
/*
For wide displays, keep five cards across when possible.
*/
@media (min-width: 1250px) {
main {
grid-template-columns:
repeat(
5,
minmax(0, 1fr)
) !important;
}
/*
Seven cards means cards 6 and 7 make up the final row.
Put them symmetrically around the center column.
*/
main > .card:nth-child(6) {
grid-column: 2 / 3;
}
main > .card:nth-child(7) {
grid-column: 4 / 5;
}
}
/*
Medium displays.
*/
@media (max-width: 1249px) {
main {
grid-template-columns:
repeat(
3,
minmax(0, 1fr)
) !important;
}
main > .card:nth-child(6),
main > .card:nth-child(7) {
grid-column: auto;
}
}
/*
Tablet.
*/
@media (max-width: 850px) {
main {
grid-template-columns:
repeat(
2,
minmax(0, 1fr)
) !important;
}
}
/*
Phone.
*/
@media (max-width: 560px) {
main {
grid-template-columns:
1fr !important;
}
main > .card {
max-width: none !important;
}
}
/* =========================================================
METRICSZILLA FINAL BALANCED CARD GRID
7 TOOLS = 4 TOP + 3 CENTERED BELOW
========================================================= */
/*
DESKTOP
Use an eight-column internal grid.
Each card spans two columns:
4 cards fill the first row.
The final three cards occupy:
columns 2-3
columns 4-5
columns 6-7
That centers the entire second row perfectly.
*/
@media (min-width: 1100px) {
main {
display: grid !important;
grid-template-columns:
repeat(
8,
minmax(0, 1fr)
) !important;
gap:
14px 14px !important;
width: 100% !important;
align-items:
stretch !important;
justify-content:
center !important;
}
main > .card {
grid-column:
span 2 !important;
width:
auto !important;
max-width:
none !important;
min-width:
0 !important;
justify-self:
stretch !important;
}
/*
SECOND ROW
THREE IDENTICAL CARDS,
CENTERED UNDER THE FOUR ABOVE.
*/
main > .card:nth-child(5) {
grid-column:
2 / span 2 !important;
}
main > .card:nth-child(6) {
grid-column:
4 / span 2 !important;
}
main > .card:nth-child(7) {
grid-column:
6 / span 2 !important;
}
}
/*
MEDIUM DESKTOP / TABLET LANDSCAPE
3 + 3 + 1 CENTERED
*/
@media (
min-width: 760px
)
and (
max-width: 1099px
) {
main {
display: grid !important;
grid-template-columns:
repeat(
6,
minmax(0, 1fr)
) !important;
gap:
12px !important;
}
main > .card {
grid-column:
span 2 !important;
width:
auto !important;
max-width:
none !important;
justify-self:
stretch !important;
}
main > .card:nth-child(5),
main > .card:nth-child(6) {
grid-column:
span 2 !important;
}
main > .card:nth-child(7) {
grid-column:
3 / span 2 !important;
}
}
/*
PHONE / SMALL TABLET
SINGLE CLEAN COLUMN
*/
@media (max-width: 759px) {
main {
display: grid !important;
grid-template-columns:
1fr !important;
gap:
12px !important;
}
main > .card {
grid-column:
auto !important;
width:
100% !important;
max-width:
none !important;
}
}