Styles for By The Numbers showcase cards
Style By The Numbers wikitable showcase cards
Line 1,011: Line 1,011:
}
}


/* By The Numbers showcase hub */
/* By The Numbers showcase hub (v3 — wikitable cards) */
.btn-showcase {
.mw-parser-output table.wikitable.rb-numbers-table {
margin: 1em 0 1.25em 0;
width: 100%;
margin: 1em 0 0.75em 0;
border-collapse: separate;
border-spacing: 0.55em;
border: none;
background: transparent;
}
}
.btn-stat-grid {
.mw-parser-output table.wikitable.rb-numbers-table > tr > th,
display: grid;
.mw-parser-output table.wikitable.rb-numbers-table > * > tr > th,
grid-template-columns: repeat(auto-fit, minmax(11.5em, 1fr));
.mw-parser-output table.wikitable.rb-numbers-table > tr > td,
gap: 0.75em;
.mw-parser-output table.wikitable.rb-numbers-table > * > tr > td {
}
width: 25%;
.btn-stat {
vertical-align: top;
text-align: center;
background: #f7f4ee;
background: #f7f4ee;
border: 1px solid #c3b7a4;
border: 1px solid #c3b7a4;
border-top: 3px solid #3f4a3c;
border-top: 3px solid #3f4a3c;
padding: 0.85em 0.9em 0.95em;
padding: 0.75em 0.65em;
text-align: center;
}
.mw-parser-output table.wikitable.rb-numbers-table > tr > th,
.mw-parser-output table.wikitable.rb-numbers-table > * > tr > th {
font-weight: 700;
font-size: 1em;
color: inherit;
background: #f7f4ee;
}
}
.btn-stat-num {
.mw-parser-output .rb-numbers-stat-num {
font-size: 2.05em;
display: block;
font-size: 2.1em;
font-weight: 700;
font-weight: 700;
line-height: 1.1;
line-height: 1.1;
Line 1,034: Line 1,047:
letter-spacing: -0.02em;
letter-spacing: -0.02em;
}
}
.btn-stat-label {
.mw-parser-output .rb-numbers-stat-note {
margin-top: 0.35em;
display: block;
font-size: 95%;
font-weight: 600;
line-height: 1.3;
}
.btn-stat-note {
margin-top: 0.3em;
font-size: 84%;
font-size: 84%;
line-height: 1.35;
line-height: 1.35;
color: #555;
color: #555;
font-weight: 400;
}
.mw-parser-output table.wikitable.rb-numbers-links {
width: 100%;
margin: 0.75em 0 1em 0;
border-collapse: separate;
border-spacing: 0.55em;
border: none;
background: transparent;
}
.mw-parser-output table.wikitable.rb-numbers-links > tr > td,
.mw-parser-output table.wikitable.rb-numbers-links > * > tr > td {
width: 33%;
vertical-align: top;
background: #f7f4ee;
border: 1px solid #c3b7a4;
border-top: 3px solid #3f4a3c;
padding: 0.75em 0.85em;
}
.mw-parser-output table.wikitable.rb-numbers-links small {
display: block;
margin-top: 0.35em;
color: #444;
line-height: 1.35;
}
}
/* Legacy div-card classes (v1/v2) */
.rb-numbers-showcase,
.btn-showcase { margin: 1em 0 1.25em 0; }
.rb-numbers-stat-grid,
.rb-numbers-link-grid,
.btn-stat-grid,
.btn-link-grid {
.btn-link-grid {
display: grid;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(14em, 1fr));
grid-template-columns: repeat(auto-fit, minmax(12em, 1fr));
gap: 0.65em;
gap: 0.85em;
margin: 0.75em 0 1em 0;
}
}
.rb-numbers-stat,
.rb-numbers-link-card,
.btn-stat,
.btn-link-card {
.btn-link-card {
background: #faf8f4;
background: #f7f4ee;
border: 1px solid #d4cbb8;
border: 1px solid #c3b7a4;
padding: 0.7em 0.85em;
border-top: 3px solid #3f4a3c;
line-height: 1.35;
padding: 0.9em 1em 1em;
box-sizing: border-box;
}
}
.btn-link-card > a {
.rb-numbers-stat,
font-weight: 600;
.btn-stat { text-align: center; }
}
.btn-stat-num {
.btn-link-desc {
font-size: 2.15em;
margin-top: 0.25em;
font-weight: 700;
font-size: 88%;
line-height: 1.1;
color: #555;
color: #3f4a3c;
}
}
.btn-stat-label,
.rb-numbers-stat-label { margin-top: 0.4em; font-size: 95%; font-weight: 600; line-height: 1.3; }
.btn-stat-note { margin-top: 0.35em; font-size: 84%; line-height: 1.35; color: #555; }
.btn-link-grid,
.rb-numbers-link-grid { margin: 0.75em 0 1em 0; }
.btn-link-card > a,
.rb-numbers-link-card > a { font-weight: 600; }
.btn-link-desc,
.rb-numbers-link-desc { margin-top: 0.35em; font-size: 90%; color: #444; }