/*
* FCM — Football Club Media
* Master CSS Migration Draft v1.0 — Table Tokens
*
* SOURCE: RMFCID production CSS baseline
* PURPOSE: namespace migration + safe consolidation preparation
* STATUS: DRAFT — DO NOT LOAD LIVE YET
*/
:root {
/* -----------------------------------------------------
FCM CLUB IDENTITY
----------------------------------------------------- */
--club-primary: #041F3A;
--club-secondary: #0A4E9F;
--club-light: #F9F9F9;
/* -----------------------------------------------------
FCM UI TOKENS
Aliases preserve the current visual system.
No component currently depends on these aliases yet.
----------------------------------------------------- */
--fcm-primary: var(--club-primary);
--fcm-secondary: var(--club-secondary);
--fcm-light: var(--club-light);
--fcm-text: #172B4D;
--fcm-muted: #7A869A;
--fcm-surface: #FFFFFF;
--fcm-surface-soft: #F7F9FC;
--fcm-surface-hover: #EEF4FB;
--fcm-surface-total: #F1F5F9;
--fcm-border: #E5E7EB;
--fcm-border-strong: #CBD5E1;
--fcm-radius: 8px;
--fcm-radius-small: 7px;
--fcm-transition-fast: 0.18s ease;
--fcm-transition-normal: 0.20s ease;
}
/*
=========================================================
FCM — MASTER FOUNDATION
Pass 3 — Token Layer
Purpose:
- establish reusable club identity + UI tokens
- preserve current production values exactly
- prepare future component migration to variables
IMPORTANT:
Component rules remain unchanged in this pass.
=========================================================
*/
/*
=========================================================
FCM — MASTER TABLE SYSTEM
Token Migration — Pass 4
Master CSS v4.0 — CLEAN
Includes: Player Profile + Transfer Table
=========================================================
TABLE TYPES
---------------------------------------------------------
.rmfc-table--profile
.rmfc-table--player
.rmfc-table--goalkeeper
.rmfc-table--honors
.rmfc-table--awards
FINAL ALIGNMENT
---------------------------------------------------------
Profile header = center
Profile body = left
Player/GK season = center
Player/GK competition= left
Player/GK statistics = center
Honors/Awards title = left
Honors/Awards year = center
This version consolidates the tested v2.0 + Parts 1–5
without changing the established visual system.
=========================================================
*/
/* =====================================================
1. GLOBAL FOUNDATION
===================================================== */
.rmfc-table {
width: 100%;
max-width: 100%;
margin: 24px 0;
padding: 0;
box-sizing: border-box;
overflow: visible;
}
.rmfc-table,
.rmfc-table *,
.rmfc-table *::before,
.rmfc-table *::after {
box-sizing: border-box;
}
/* =====================================================
2. GLOBAL TABLE
===================================================== */
.rmfc-table table {
width: 100%;
max-width: 100%;
margin: 0;
border-collapse: separate;
border-spacing: 0;
table-layout: auto;
background: var(--fcm-surface);
color: var(--fcm-text);
border: 1px solid var(--fcm-border);
border-radius: 8px;
overflow: hidden;
font-size: 14px;
line-height: 1.45;
}
/* =====================================================
3. GLOBAL HEADER
===================================================== */
.rmfc-table thead {
background: var(--fcm-primary);
}
.rmfc-table thead th {
position: relative;
padding: 13px 12px;
background: var(--fcm-primary);
color: var(--fcm-light);
border: 0;
border-bottom: 3px solid var(--fcm-secondary);
font-size: 13px;
font-weight: 600;
line-height: 1.2;
text-align: center !important;
vertical-align: middle;
white-space: nowrap;
overflow: visible;
}
.rmfc-table thead th:first-child {
border-top-left-radius: 8px;
}
.rmfc-table thead th:last-child {
border-top-right-radius: 8px;
}
/* =====================================================
4. GLOBAL BODY
===================================================== */
.rmfc-table tbody td {
padding: 11px 12px;
background: var(--fcm-surface);
color: var(--fcm-text);
border: 0;
border-bottom: 1px solid var(--fcm-border);
font-size: 14px;
line-height: 1.45;
vertical-align: middle;
overflow: visible;
}
.rmfc-table tbody tr:nth-child(even) td {
background: var(--fcm-surface-soft);
}
.rmfc-table tbody tr:hover td {
background: var(--fcm-surface-hover);
}
.rmfc-table tbody tr:last-child td {
border-bottom: 0;
}
/* =====================================================
5. PROFILE
===================================================== */
.rmfc-table--profile table {
table-layout: auto;
}
.rmfc-table--profile thead th:first-child {
width: 32%;
}
.rmfc-table--profile thead th:last-child {
width: 68%;
}
.rmfc-table--profile tbody td:first-child {
width: 32%;
text-align: left !important;
font-weight: 600;
white-space: normal;
overflow-wrap: break-word;
word-break: normal;
}
.rmfc-table--profile tbody td:last-child {
width: 68%;
text-align: left !important;
font-weight: 500;
white-space: normal;
overflow-wrap: break-word;
word-break: normal;
}
/* =====================================================
6. PLAYER + GOALKEEPER STATISTICS
===================================================== */
.rmfc-table--player table,
.rmfc-table--goalkeeper table {
width: 100%;
max-width: 100%;
table-layout: auto;
}
/* Season */
.rmfc-table--player thead th:first-child,
.rmfc-table--player tbody td:first-child,
.rmfc-table--goalkeeper thead th:first-child,
.rmfc-table--goalkeeper tbody td:first-child {
width: 90px;
text-align: center !important;
font-weight: 500;
white-space: nowrap;
}
.rmfc-table--player tbody td:first-child:empty {
width: 90px;
}
/* Competition */
.rmfc-table--player tbody td:nth-child(2),
.rmfc-table--goalkeeper tbody td:nth-child(2) {
min-width: 180px;
text-align: left !important;
white-space: normal;
overflow-wrap: break-word;
word-break: normal;
}
/* Statistics */
.rmfc-table--player tbody td:nth-child(n + 3),
.rmfc-table--goalkeeper tbody td:nth-child(n + 3) {
text-align: center !important;
white-space: nowrap;
font-weight: 500;
}
/* Total row */
.rmfc-table tbody tr.rmfc-total td {
background: var(--fcm-surface-total);
border-top: 2px solid var(--fcm-border-strong);
border-bottom: 0;
font-weight: 600;
}
.rmfc-table tbody tr.rmfc-total:hover td {
background: var(--fcm-surface-total);
}
.rmfc-table--player tbody tr.rmfc-total td:first-child,
.rmfc-table--goalkeeper tbody tr.rmfc-total td:first-child {
color: var(--fcm-primary);
font-weight: 700;
text-align: left !important;
}
.rmfc-table--player tbody tr.rmfc-total td:not(:first-child),
.rmfc-table--goalkeeper tbody tr.rmfc-total td:not(:first-child) {
text-align: center !important;
}
/* =====================================================
7. STAT ICONS
===================================================== */
.rmfc-stat-icon {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
margin: 0 auto;
padding: 0;
cursor: default;
outline: none;
vertical-align: middle;
text-decoration: none !important;
}
.rmfc-stat-icon svg {
display: block;
width: 17px;
height: 17px;
margin: 0;
padding: 0;
fill: none;
stroke: var(--fcm-light);
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.rmfc-assist-icon {
color: var(--fcm-light);
font-size: 14px;
font-weight: 700;
line-height: 1;
font-family: inherit;
}
/* =====================================================
8. CARD ICONS
Supports both established class variants.
===================================================== */
.rmfc-card-icon,
.rmfc-yellow-card-icon,
.rmfc-red-card-icon {
display: inline-flex;
align-items: center;
justify-content: center;
vertical-align: middle;
}
.rmfc-card-icon {
width: 16px;
height: 22px;
}
.rmfc-card-icon svg {
width: 11px;
height: 17px;
}
.rmfc-yellow-card-icon {
width: 16px;
height: 22px;
}
.rmfc-red-card-icon {
width: 16px;
height: 22px;
}
.rmfc-yellow-card-icon svg,
.rmfc-red-card-icon svg {
width: 11px;
height: 17px;
}
.rmfc-yellow-card svg rect,
.rmfc-yellow-card-icon svg rect {
fill: #F2C94C;
stroke: none;
}
.rmfc-red-card svg rect,
.rmfc-red-card-icon svg rect {
fill: #E5484D;
stroke: none;
}
/* =====================================================
9. TOOLTIP
===================================================== */
.rmfc-table--player table,
.rmfc-table--player thead,
.rmfc-table--player thead tr,
.rmfc-table--player thead th {
overflow: visible;
}
.rmfc-stat-icon::after {
content: attr(data-tooltip);
position: absolute;
z-index: 99999;
top: calc(100% + 10px);
left: 50%;
width: max-content;
max-width: 220px;
padding: 6px 9px;
background: var(--fcm-primary);
color: var(--fcm-light);
border: 0;
border-radius: 5px;
font-family: inherit;
font-size: 12px;
font-weight: 500;
line-height: 1.2;
text-align: center;
white-space: nowrap;
transform: translateX(-50%) translateY(-3px);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
opacity 0.15s ease,
transform 0.15s ease,
visibility 0.15s ease;
}
.rmfc-stat-icon::before {
content: "";
position: absolute;
z-index: 99998;
top: calc(100% + 6px);
left: 50%;
width: 7px;
height: 7px;
background: var(--fcm-primary);
transform: translateX(-50%) rotate(45deg);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
opacity 0.15s ease,
visibility 0.15s ease;
}
.rmfc-stat-icon:hover::after,
.rmfc-stat-icon:hover::before,
.rmfc-stat-icon:focus::after,
.rmfc-stat-icon:focus::before {
opacity: 1;
visibility: visible;
}
.rmfc-stat-icon:hover::after,
.rmfc-stat-icon:focus::after {
transform: translateX(-50%) translateY(0);
}
/* Right-edge tooltip */
.rmfc-table--player thead th:last-child .rmfc-stat-icon::after {
left: auto;
right: -6px;
transform: translateY(-3px);
}
.rmfc-table--player thead th:last-child .rmfc-stat-icon::before {
left: auto;
right: 5px;
transform: rotate(45deg);
}
.rmfc-table--player thead th:last-child .rmfc-stat-icon:hover::after,
.rmfc-table--player thead th:last-child .rmfc-stat-icon:focus::after {
transform: translateY(0);
}
/* Keyboard focus */
.rmfc-stat-icon:focus {
outline: none;
}
.rmfc-stat-icon:focus-visible {
outline: 2px solid var(--fcm-secondary);
outline-offset: 2px;
border-radius: 3px;
}
/* =====================================================
10. HONORS / ACHIEVEMENTS
===================================================== */
.rmfc-table--honors table,
.rmfc-table--awards table {
table-layout: auto;
}
.rmfc-table--honors thead th:first-child,
.rmfc-table--awards thead th:first-child,
.rmfc-table--honors tbody td:first-child,
.rmfc-table--awards tbody td:first-child {
width: auto;
text-align: left !important;
font-weight: 500;
white-space: normal;
overflow-wrap: break-word;
word-break: normal;
}
.rmfc-table--honors thead th:last-child,
.rmfc-table--honors tbody td:last-child {
width: 180px;
text-align: center !important;
}
.rmfc-table--honors tbody td:last-child {
font-weight: 500;
white-space: normal;
}
.rmfc-table--awards thead th:last-child,
.rmfc-table--awards tbody td:last-child {
width: 190px;
text-align: center !important;
}
/* =====================================================
11. TABLET <= 900px
===================================================== */
@media (max-width: 900px) {
.rmfc-table table {
font-size: 13px;
}
.rmfc-table thead th {
padding: 11px 8px;
font-size: 12px;
}
.rmfc-table tbody td {
padding: 10px 8px;
font-size: 13px;
}
/* Profile */
.rmfc-table--profile thead th:first-child,
.rmfc-table--profile tbody td:first-child {
width: 34%;
}
.rmfc-table--profile thead th:last-child,
.rmfc-table--profile tbody td:last-child {
width: 66%;
}
/* Player / GK */
.rmfc-table--player tbody td:first-child,
.rmfc-table--goalkeeper tbody td:first-child {
width: 75px;
}
.rmfc-table--player tbody td:nth-child(2),
.rmfc-table--goalkeeper tbody td:nth-child(2) {
min-width: 160px;
}
/* Icons */
.rmfc-stat-icon {
width: 20px;
height: 20px;
}
.rmfc-stat-icon svg {
width: 16px;
height: 16px;
}
/* Honors / Awards */
.rmfc-table--honors thead th:last-child,
.rmfc-table--honors tbody td:last-child {
width: 160px;
}
.rmfc-table--awards thead th:last-child,
.rmfc-table--awards tbody td:last-child {
width: 165px;
}
}
/* =====================================================
12. MOBILE <= 600px
===================================================== */
@media (max-width: 600px) {
.rmfc-table {
width: 100%;
max-width: 100%;
margin: 20px 0;
}
.rmfc-table table {
width: 100%;
max-width: 100%;
font-size: 13px;
border-radius: 7px;
}
.rmfc-table thead th {
padding: 10px 6px;
font-size: 12px;
}
.rmfc-table tbody td {
padding: 10px 6px;
font-size: 13px;
}
/* Profile */
.rmfc-table--profile thead th:first-child,
.rmfc-table--profile tbody td:first-child {
width: 38%;
}
.rmfc-table--profile thead th:last-child,
.rmfc-table--profile tbody td:last-child {
width: 62%;
}
/* Player / GK */
.rmfc-table--player tbody td:first-child,
.rmfc-table--goalkeeper tbody td:first-child {
width: 65px;
}
.rmfc-table--player tbody td:nth-child(2),
.rmfc-table--goalkeeper tbody td:nth-child(2) {
min-width: 130px;
}
/* Honors / Awards */
.rmfc-table--honors thead th:last-child,
.rmfc-table--honors tbody td:last-child,
.rmfc-table--awards thead th:last-child,
.rmfc-table--awards tbody td:last-child {
width: 135px;
}
/* Icons */
.rmfc-stat-icon {
width: 19px;
height: 19px;
}
.rmfc-stat-icon svg {
width: 15px;
height: 15px;
}
.rmfc-card-icon,
.rmfc-yellow-card-icon,
.rmfc-red-card-icon {
width: 15px;
height: 20px;
}
.rmfc-card-icon svg,
.rmfc-yellow-card-icon svg,
.rmfc-red-card-icon svg {
width: 10px;
height: 16px;
}
}
/* =====================================================
13. SMALL MOBILE <= 449px
===================================================== */
@media (max-width: 449px) {
.rmfc-table {
width: 100%;
max-width: 100%;
margin-left: 0;
margin-right: 0;
}
.rmfc-table table {
width: 100%;
max-width: 100%;
table-layout: auto;
font-size: 12px;
}
.rmfc-table thead th {
padding: 8px 4px;
font-size: 11px;
line-height: 1.2;
white-space: nowrap;
overflow: visible;
text-overflow: clip;
}
.rmfc-table tbody td {
padding: 8px 4px;
font-size: 12px;
line-height: 1.35;
overflow: visible;
text-overflow: clip;
}
/* Profile */
.rmfc-table--profile thead th:first-child,
.rmfc-table--profile tbody td:first-child {
width: 40%;
}
.rmfc-table--profile thead th:last-child,
.rmfc-table--profile tbody td:last-child {
width: 60%;
}
/* Player / GK season */
.rmfc-table--player tbody td:first-child,
.rmfc-table--goalkeeper tbody td:first-child {
width: auto;
min-width: 58px;
white-space: nowrap;
text-align: center !important;
}
/* Player / GK competition */
.rmfc-table--player tbody td:nth-child(2),
.rmfc-table--goalkeeper tbody td:nth-child(2) {
width: auto;
min-width: 105px;
white-space: normal;
overflow-wrap: normal;
word-break: normal;
text-align: left !important;
}
/* Statistics */
.rmfc-table--player tbody td:nth-child(n + 3),
.rmfc-table--goalkeeper tbody td:nth-child(n + 3) {
width: auto;
min-width: 30px;
padding-left: 3px;
padding-right: 3px;
text-align: center !important;
white-space: nowrap;
}
/* Icons */
.rmfc-stat-icon {
width: 18px;
height: 18px;
}
.rmfc-stat-icon svg {
width: 14px;
height: 14px;
}
.rmfc-assist-icon {
font-size: 12px;
}
.rmfc-card-icon,
.rmfc-yellow-card-icon,
.rmfc-red-card-icon {
width: 14px;
height: 19px;
}
.rmfc-card-icon svg,
.rmfc-yellow-card-icon svg,
.rmfc-red-card-icon svg {
width: 9px;
height: 15px;
}
/* Tooltip */
.rmfc-stat-icon::after {
font-size: 11px;
padding: 5px 7px;
}
/* Honors / Awards */
.rmfc-table--honors thead th:last-child,
.rmfc-table--honors tbody td:last-child,
.rmfc-table--awards thead th:last-child,
.rmfc-table--awards tbody td:last-child {
width: 115px;
min-width: 115px;
text-align: center !important;
}
}
/* =====================================================
14. EXTRA SMALL <= 380px
===================================================== */
@media (max-width: 380px) {
.rmfc-table table {
font-size: 12px;
}
.rmfc-table thead th {
padding: 7px 3px;
font-size: 11px;
}
.rmfc-table tbody td {
padding: 7px 3px;
font-size: 12px;
}
/* Profile */
.rmfc-table--profile thead th:first-child,
.rmfc-table--profile tbody td:first-child {
width: 42%;
}
.rmfc-table--profile thead th:last-child,
.rmfc-table--profile tbody td:last-child {
width: 58%;
}
/* Player / GK */
.rmfc-table--player tbody td:first-child,
.rmfc-table--goalkeeper tbody td:first-child {
min-width: 58px;
white-space: nowrap;
text-align: center !important;
}
.rmfc-table--player tbody td:nth-child(2),
.rmfc-table--goalkeeper tbody td:nth-child(2) {
min-width: 100px;
white-space: normal;
overflow-wrap: normal;
word-break: normal;
text-align: left !important;
}
.rmfc-table--player tbody td:nth-child(n + 3),
.rmfc-table--goalkeeper tbody td:nth-child(n + 3) {
min-width: 29px;
padding-left: 2px;
padding-right: 2px;
text-align: center !important;
}
/* Icons */
.rmfc-stat-icon {
width: 17px;
height: 17px;
}
.rmfc-stat-icon svg {
width: 13px;
height: 13px;
}
.rmfc-card-icon,
.rmfc-yellow-card-icon,
.rmfc-red-card-icon {
width: 13px;
height: 18px;
}
.rmfc-card-icon svg,
.rmfc-yellow-card-icon svg,
.rmfc-red-card-icon svg {
width: 8px;
height: 14px;
}
/* Honors / Awards */
.rmfc-table--honors thead th:last-child,
.rmfc-table--honors tbody td:last-child,
.rmfc-table--awards thead th:last-child,
.rmfc-table--awards tbody td:last-child {
width: 105px;
min-width: 105px;
text-align: center !important;
}
}
/* =====================================================
15. VERY SMALL <= 340px
Keep table width within viewport.
No forced max-content overflow.
===================================================== */
@media (max-width: 340px) {
.rmfc-table {
max-width: 100%;
overflow: visible;
}
.rmfc-table table {
width: 100%;
min-width: 0;
max-width: 100%;
}
.rmfc-table--player table,
.rmfc-table--goalkeeper table {
width: 100%;
min-width: 0;
max-width: 100%;
}
}
/* =====================================================
17. TRANSFER TABLE — BASE / DESKTOP
===================================================== */
.rmfc-table--transfer {
width: 100%;
max-width: 100%;
margin: 24px 0;
padding: 0;
box-sizing: border-box;
}
.rmfc-table--transfer table {
width: 100%;
max-width: 100%;
min-width: 0;
margin: 0;
border-collapse: separate;
border-spacing: 0;
table-layout: auto;
background: var(--fcm-surface);
color: var(--fcm-text);
border: 1px solid var(--fcm-border);
border-radius: 8px;
overflow: hidden;
font-size: 14px;
line-height: 1.45;
}
.rmfc-table--transfer thead {
background: var(--fcm-primary);
}
.rmfc-table--transfer thead th {
position: relative;
padding: 12px 8px;
background: var(--fcm-primary);
color: var(--fcm-light);
border: 0;
border-bottom: 3px solid var(--fcm-secondary);
font-size: 13px;
font-weight: 600;
line-height: 1.2;
text-align: center !important;
vertical-align: middle;
white-space: normal;
overflow: visible;
}
.rmfc-table--transfer tbody td {
padding: 11px 8px;
width: auto;
min-width: 0;
max-width: none;
background: var(--fcm-surface);
color: var(--fcm-text);
border: 0;
border-bottom: 1px solid var(--fcm-border);
font-size: 14px;
line-height: 1.45;
vertical-align: middle;
overflow-wrap: break-word;
word-break: normal;
box-sizing: border-box;
}
.rmfc-table--transfer tbody tr:nth-child(even) td {
background: var(--fcm-surface-soft);
}
.rmfc-table--transfer tbody tr:hover td {
background: var(--fcm-surface-hover);
}
.rmfc-table--transfer tbody tr:last-child td {
border-bottom: 0;
}
.rmfc-table--transfer tbody td:first-child {
text-align: left;
font-weight: 600;
}
.rmfc-table--transfer tbody td:nth-child(2) {
text-align: center;
white-space: normal;
}
.rmfc-table--transfer tbody td:nth-child(3) {
text-align: left;
}
.rmfc-table--transfer tbody td:nth-child(4) {
text-align: center;
white-space: nowrap;
}
.rmfc-table--transfer tbody td:nth-child(5) {
text-align: right;
}
.rmfc-table--transfer tbody td:nth-child(6) {
text-align: right;
}
/* Outgoing table: sixth column is Catatan. */
.rmfc-table--transfer tbody td:nth-child(6):last-child {
text-align: left;
}
/* Incoming table: seventh column is Catatan. */
.rmfc-table--transfer tbody td:nth-child(7) {
text-align: left;
}
/* =====================================================
17A. TRANSFER PLAYER LINKS — DESKTOP
===================================================== */
.rmfc-table--transfer tbody td:first-child a,
.rmfc-table--transfer tbody td:first-child a:visited {
color: var(--fcm-text) !important;
background: transparent !important;
background-color: transparent !important;
font-weight: 600 !important;
text-decoration: none !important;
-webkit-text-fill-color: var(--fcm-text) !important;
}
.rmfc-table--transfer tbody td:first-child a:hover {
color: var(--fcm-secondary) !important;
background: transparent !important;
background-color: transparent !important;
font-weight: 600 !important;
text-decoration: none !important;
-webkit-text-fill-color: var(--fcm-secondary) !important;
}
.rmfc-table--transfer tbody td:first-child a:active {
color: var(--fcm-text) !important;
background: transparent !important;
background-color: transparent !important;
text-decoration: none !important;
-webkit-text-fill-color: var(--fcm-text) !important;
}
.rmfc-table--transfer tbody td:first-child a:focus,
.rmfc-table--transfer tbody td:first-child a:focus-visible {
color: var(--fcm-secondary) !important;
background: transparent !important;
background-color: transparent !important;
text-decoration: none !important;
-webkit-text-fill-color: var(--fcm-secondary) !important;
outline: 2px solid var(--fcm-secondary) !important;
outline-offset: 2px;
border-radius: 2px;
}
/* =====================================================
18. TRANSFER STATUS BADGES
===================================================== */
.rmfc-transfer-status {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 25px;
padding: 4px 8px;
border-radius: 5px;
font-size: 12px;
font-weight: 600;
line-height: 1.1;
white-space: nowrap;
}
.rmfc-transfer-status--buy,
.rmfc-transfer-status--loan {
background: var(--fcm-surface-hover);
color: var(--fcm-secondary);
border: 1px solid #CFE0F8;
}
.rmfc-transfer-status--free,
.rmfc-transfer-status--sell,
.rmfc-transfer-status--contract {
background: var(--fcm-surface-total);
color: var(--fcm-primary);
border: 1px solid #E2E8F0;
}
/* =====================================================
19. TRANSFER RESPONSIVE CARD <= 700px
===================================================== */
@media (max-width: 700px) {
.rmfc-table--transfer {
width: 100%;
max-width: 100%;
margin: 20px 0;
}
.rmfc-table--transfer table {
width: 100%;
max-width: 100%;
border: 0;
border-radius: 0;
background: transparent;
table-layout: auto;
}
.rmfc-table--transfer thead {
display: none;
}
.rmfc-table--transfer tbody {
display: block;
width: 100%;
}
.rmfc-table--transfer tbody tr {
display: block;
width: 100%;
margin: 0 0 14px;
padding: 0;
background: var(--fcm-surface);
border: 1px solid var(--fcm-border);
border-radius: 8px;
overflow: hidden;
box-sizing: border-box;
}
.rmfc-table--transfer tbody td {
display: grid;
grid-template-columns: 42% minmax(0, 58%);
width: 100%;
min-width: 0;
max-width: 100%;
margin: 0;
padding: 9px 12px;
background: var(--fcm-surface) !important;
color: var(--fcm-text) !important;
border: 0;
border-bottom: 1px solid var(--fcm-border);
font-size: 14px;
line-height: 1.45;
text-align: left !important;
vertical-align: middle;
box-sizing: border-box;
overflow-wrap: break-word;
word-break: normal;
}
.rmfc-table--transfer tbody td::before {
content: attr(data-label);
display: block;
padding-right: 10px;
color: var(--fcm-primary) !important;
font-size: 12px;
font-weight: 600;
line-height: 1.35;
text-align: left;
}
.rmfc-table--transfer tbody td > * {
min-width: 0;
max-width: 100%;
}
/* -------------------------------------------------
19A. CARD HEADER / PLAYER NAME
------------------------------------------------- */
.rmfc-table--transfer tbody tr > td:first-child {
display: block !important;
width: 100% !important;
min-width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 13px 12px !important;
background: var(--fcm-primary) !important;
background-color: var(--fcm-primary) !important;
color: var(--fcm-light) !important;
font-size: 16px !important;
font-weight: 700 !important;
line-height: 1.35 !important;
border: 0 !important;
border-bottom: 3px solid var(--fcm-secondary) !important;
text-align: left !important;
box-sizing: border-box;
}
.rmfc-table--transfer tbody tr > td:first-child::before {
display: none !important;
content: none !important;
}
/* -------------------------------------------------
19B. PLAYER LINK INSIDE CARD HEADER
------------------------------------------------- */
.rmfc-table--transfer tbody tr > td:first-child > a,
.rmfc-table--transfer tbody tr > td:first-child > a:link,
.rmfc-table--transfer tbody tr > td:first-child > a:visited,
.rmfc-table--transfer tbody tr > td:first-child > a:hover,
.rmfc-table--transfer tbody tr > td:first-child > a:active {
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
color: var(--fcm-light) !important;
background: transparent !important;
background-color: transparent !important;
font-size: 16px !important;
font-weight: 700 !important;
line-height: 1.35 !important;
text-decoration: none !important;
text-decoration-line: none !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
-webkit-text-fill-color: var(--fcm-light) !important;
opacity: 1 !important;
}
/* -------------------------------------------------
19C. PLAYER LINK — FOCUS
------------------------------------------------- */
.rmfc-table--transfer tbody tr > td:first-child > a:focus,
.rmfc-table--transfer tbody tr > td:first-child > a:focus-visible {
color: var(--fcm-light) !important;
background: transparent !important;
background-color: transparent !important;
text-decoration: none !important;
text-decoration-line: none !important;
-webkit-text-fill-color: var(--fcm-light) !important;
outline: 2px solid var(--fcm-light) !important;
outline-offset: 3px;
border-radius: 2px;
}
/* -------------------------------------------------
19D. PREVENT THEME LINK HIGHLIGHT
------------------------------------------------- */
.rmfc-table--transfer tbody tr > td:first-child > a::before,
.rmfc-table--transfer tbody tr > td:first-child > a::after {
background: transparent !important;
background-color: transparent !important;
box-shadow: none !important;
}
/* -------------------------------------------------
19E. OTHER CARD CONTENT
------------------------------------------------- */
.rmfc-table--transfer tbody td:nth-child(4) {
white-space: normal;
}
.rmfc-table--transfer .rmfc-transfer-status {
justify-self: start;
min-height: 25px;
padding: 4px 8px;
font-size: 12px;
border-radius: 5px;
}
.rmfc-table--transfer tbody td:last-child {
border-bottom: 0;
}
.rmfc-table--transfer tbody tr:last-child {
margin-bottom: 0;
}
.rmfc-table--transfer tbody tr:hover td {
background: inherit !important;
}
/* Keep player header navy even when the row is hovered. */
.rmfc-table--transfer tbody tr:hover > td:first-child {
background: var(--fcm-primary) !important;
background-color: var(--fcm-primary) !important;
color: var(--fcm-light) !important;
}
.rmfc-table--transfer tbody tr:hover > td:first-child > a {
color: var(--fcm-light) !important;
background: transparent !important;
background-color: transparent !important;
-webkit-text-fill-color: var(--fcm-light) !important;
}
}
/* =====================================================
20. TRANSFER SMALL MOBILE <= 449px
===================================================== */
@media (max-width: 449px) {
.rmfc-table--transfer tbody td {
grid-template-columns: 40% minmax(0, 60%);
padding: 9px 10px;
font-size: 13px;
}
.rmfc-table--transfer tbody td::before {
font-size: 11px;
}
.rmfc-table--transfer tbody td:first-child {
padding: 12px 10px !important;
font-size: 15px !important;
}
.rmfc-table--transfer tbody tr > td:first-child > a {
font-size: 15px !important;
line-height: 1.35 !important;
}
}
/* =====================================================
21. TRANSFER EXTRA SMALL <= 380px
===================================================== */
@media (max-width: 380px) {
.rmfc-table--transfer tbody td {
grid-template-columns: 38% minmax(0, 62%);
padding: 8px 9px;
}
.rmfc-table--transfer tbody td:first-child {
padding: 11px 9px !important;
font-size: 15px !important;
}
.rmfc-table--transfer tbody tr > td:first-child > a {
font-size: 15px !important;
line-height: 1.35 !important;
}
}
/* =====================================================
22. MASTER ACCESSIBILITY / REDUCED MOTION
===================================================== */
/* =========================================================
FCM — STANDINGS TABLE SYSTEM
Version: Clean v2.0
Class:
.rmfc-table
.rmfc-table--standings
Structure:
Pos | Klub | Main | M | S | K | GM | GK | SG | Poin
Mobile:
Pos | Klub | Main | M | S | K | Poin
========================================================= */
/* =========================================================
01. TABLE FOUNDATION
========================================================= */
.rmfc-table--standings {
width: 100%;
max-width: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
}
.rmfc-table--standings *,
.rmfc-table--standings *::before,
.rmfc-table--standings *::after {
box-sizing: border-box;
}
.rmfc-table--standings table {
width: 100%;
max-width: 100%;
margin: 0;
padding: 0;
border-collapse: separate;
border-spacing: 0;
table-layout: fixed;
overflow: hidden;
font-family: inherit;
font-size: 14px;
line-height: 1.4;
color: var(--fcm-primary);
background: var(--fcm-surface);
border: 1px solid var(--fcm-border);
border-radius: 8px;
}
/* =========================================================
02. DESKTOP COLUMN WIDTH
========================================================= */
.rmfc-table--standings th:nth-child(1),
.rmfc-table--standings td:nth-child(1) {
width: 6%;
}
.rmfc-table--standings th:nth-child(2),
.rmfc-table--standings td:nth-child(2) {
width: 35%;
}
.rmfc-table--standings th:nth-child(3),
.rmfc-table--standings td:nth-child(3) {
width: 8%;
}
.rmfc-table--standings th:nth-child(4),
.rmfc-table--standings td:nth-child(4),
.rmfc-table--standings th:nth-child(5),
.rmfc-table--standings td:nth-child(5),
.rmfc-table--standings th:nth-child(6),
.rmfc-table--standings td:nth-child(6) {
width: 6.5%;
}
.rmfc-table--standings th:nth-child(7),
.rmfc-table--standings td:nth-child(7),
.rmfc-table--standings th:nth-child(8),
.rmfc-table--standings td:nth-child(8),
.rmfc-table--standings th:nth-child(9),
.rmfc-table--standings td:nth-child(9) {
width: 7%;
}
.rmfc-table--standings th:nth-child(10),
.rmfc-table--standings td:nth-child(10) {
width: 8%;
}
/* =========================================================
03. HEADER
========================================================= */
.rmfc-table--standings thead th {
padding: 11px 8px;
background: var(--fcm-primary);
color: var(--fcm-light);
font-size: 13px;
font-weight: 700;
line-height: 1.2;
text-align: center;
vertical-align: middle;
border: 0;
border-bottom: 3px solid var(--fcm-secondary);
white-space: nowrap;
}
.rmfc-table--standings thead th:first-child {
border-top-left-radius: 7px;
}
.rmfc-table--standings thead th:last-child {
border-top-right-radius: 7px;
}
/* =========================================================
04. BODY
========================================================= */
.rmfc-table--standings tbody td {
padding: 10px 8px;
background: var(--fcm-surface);
border: 0;
border-bottom: 1px solid var(--fcm-border);
vertical-align: middle;
font-size: 14px;
font-weight: 500;
text-align: center;
white-space: nowrap;
}
/* Zebra */
.rmfc-table--standings tbody tr:nth-child(even) td {
background: var(--fcm-surface-soft);
}
/* Hover */
.rmfc-table--standings tbody tr:hover td {
background: var(--fcm-surface-hover);
}
/* Last row */
.rmfc-table--standings tbody tr:last-child td {
border-bottom: 0;
}
/* =========================================================
05. POSITION
========================================================= */
.rmfc-table--standings tbody td:first-child {
text-align: center;
font-weight: 600;
}
/* =========================================================
06. CLUB CELL
========================================================= */
/*
* IMPORTANT:
* .rmfc-standings-team adalah | .
*
* Jangan menggunakan display:flex pada | ,
* karena dapat merusak table-cell layout.
*/
.rmfc-table--standings td.rmfc-standings-team {
display: table-cell !important;
padding-left: 10px;
padding-right: 10px;
text-align: left;
vertical-align: middle;
white-space: nowrap;
overflow: hidden;
}
/* =========================================================
07. CLUB LOGO
========================================================= */
.rmfc-table--standings .rmfc-standings-team-logo {
display: inline-block;
width: 24px;
height: 24px;
margin: 0 8px 0 0;
padding: 0;
vertical-align: middle;
object-fit: contain;
flex: none;
}
/* =========================================================
08. CLUB NAME
========================================================= */
.rmfc-table--standings .rmfc-standings-team-name {
display: inline-block;
max-width: calc(100% - 36px);
min-width: 0;
vertical-align: middle;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 600;
color: var(--fcm-primary);
}
/* =========================================================
09. POINTS
========================================================= */
.rmfc-table--standings td.rmfc-standings-points {
color: var(--fcm-primary);
font-weight: 700;
}
.rmfc-table--standings
td.rmfc-standings-points strong {
font-weight: 700;
}
/* =========================================================
10. REAL MADRID HIGHLIGHT
========================================================= */
.rmfc-table--standings
tbody tr.rmfc-standings-row--club td {
background: var(--fcm-surface-hover);
}
.rmfc-table--standings
tbody tr.rmfc-standings-row--club:hover td {
background: #E7F0FB;
}
/* Left blue accent */
.rmfc-table--standings
tbody tr.rmfc-standings-row--club td:first-child {
border-left: 4px solid var(--fcm-secondary);
padding-left: 6px;
font-weight: 700;
}
/* Real Madrid name */
.rmfc-table--standings
tbody tr.rmfc-standings-row--club
.rmfc-standings-team-name {
font-weight: 700;
}
/* =========================================================
11. ATTRIBUTION
========================================================= */
.rmfc-standings-attribution {
margin: 8px 0 0;
font-size: 11px;
line-height: 1.4;
color: #64748B;
text-align: right;
}
/* =========================================================
12. TABLET
========================================================= */
@media (max-width: 900px) {
.rmfc-table--standings table {
font-size: 13px;
}
.rmfc-table--standings thead th {
padding: 10px 6px;
font-size: 12px;
}
.rmfc-table--standings tbody td {
padding: 9px 6px;
font-size: 13px;
}
.rmfc-table--standings td.rmfc-standings-team {
padding-left: 8px;
padding-right: 8px;
}
.rmfc-table--standings .rmfc-standings-team-logo {
width: 23px;
height: 23px;
margin-right: 7px;
}
.rmfc-table--standings .rmfc-standings-team-name {
max-width: calc(100% - 34px);
}
}
/* =========================================================
13. MOBILE — 700px
========================================================= */
@media (max-width: 700px) {
/*
* Mobile keeps the ranking-table format.
*
* Visible:
* Pos | Klub | Main | M | S | K | Poin
*
* Hidden:
* GM | GK | SG
*/
.rmfc-table--standings
th:nth-child(7),
.rmfc-table--standings
td:nth-child(7),
.rmfc-table--standings
th:nth-child(8),
.rmfc-table--standings
td:nth-child(8),
.rmfc-table--standings
th:nth-child(9),
.rmfc-table--standings
td:nth-child(9) {
display: none;
}
/*
* Column distribution:
*
* Pos 8%
* Klub 40%
* Main 11%
* M 9%
* S 9%
* K 9%
* Poin 14%
*
* Total = 100%
*/
.rmfc-table--standings
th:nth-child(1),
.rmfc-table--standings
td:nth-child(1) {
width: 8%;
}
.rmfc-table--standings
th:nth-child(2),
.rmfc-table--standings
td:nth-child(2) {
width: 40%;
}
.rmfc-table--standings
th:nth-child(3),
.rmfc-table--standings
td:nth-child(3) {
width: 11%;
}
.rmfc-table--standings
th:nth-child(4),
.rmfc-table--standings
td:nth-child(4),
.rmfc-table--standings
th:nth-child(5),
.rmfc-table--standings
td:nth-child(5),
.rmfc-table--standings
th:nth-child(6),
.rmfc-table--standings
td:nth-child(6) {
width: 9%;
}
.rmfc-table--standings
th:nth-child(10),
.rmfc-table--standings
td:nth-child(10) {
width: 14%;
}
/*
* Header
*/
.rmfc-table--standings thead th {
padding: 9px 3px;
font-size: 11px;
}
/*
* Body
*/
.rmfc-table--standings tbody td {
padding: 9px 3px;
font-size: 12.5px;
}
/*
* Club
*/
.rmfc-table--standings td.rmfc-standings-team {
display: table-cell !important;
padding-left: 7px;
padding-right: 5px;
white-space: nowrap;
}
/*
* Logo
*/
.rmfc-table--standings .rmfc-standings-team-logo {
width: 22px;
height: 22px;
margin-right: 6px;
}
/*
* Name
*/
.rmfc-table--standings .rmfc-standings-team-name {
max-width: calc(100% - 32px);
font-size: 12.5px;
}
/*
* Points
*/
.rmfc-table--standings td.rmfc-standings-points {
font-size: 13px;
font-weight: 700;
}
/*
* Attribution
*/
.rmfc-standings-attribution {
margin-top: 7px;
font-size: 10px;
}
}
/* =========================================================
14. SMALL MOBILE — 449px
========================================================= */
@media (max-width: 449px) {
.rmfc-table--standings thead th {
padding: 8px 2px;
font-size: 10.5px;
}
.rmfc-table--standings tbody td {
padding: 8px 2px;
font-size: 12px;
}
.rmfc-table--standings td.rmfc-standings-team {
padding-left: 6px;
padding-right: 4px;
}
.rmfc-table--standings .rmfc-standings-team-logo {
width: 21px;
height: 21px;
margin-right: 5px;
}
.rmfc-table--standings .rmfc-standings-team-name {
max-width: calc(100% - 30px);
font-size: 12px;
}
.rmfc-table--standings td {
overflow: hidden;
}
}
/* =========================================================
15. EXTRA SMALL — 380px
========================================================= */
@media (max-width: 380px) {
.rmfc-table--standings thead th {
padding: 8px 2px;
font-size: 10px;
}
.rmfc-table--standings tbody td {
padding: 8px 2px;
font-size: 11.5px;
}
.rmfc-table--standings td.rmfc-standings-team {
padding-left: 5px;
padding-right: 3px;
}
.rmfc-table--standings .rmfc-standings-team-logo {
width: 20px;
height: 20px;
margin-right: 4px;
}
.rmfc-table--standings .rmfc-standings-team-name {
max-width: calc(100% - 28px);
font-size: 11.5px;
}
.rmfc-table--standings td.rmfc-standings-points {
font-size: 12.5px;
}
}
/* =========================================================
16. VERY SMALL — 340px
========================================================= */
@media (max-width: 340px) {
.rmfc-table--standings thead th {
padding: 7px 1px;
font-size: 9.5px;
}
.rmfc-table--standings tbody td {
padding: 7px 1px;
font-size: 11px;
}
.rmfc-table--standings td.rmfc-standings-team {
padding-left: 4px;
padding-right: 2px;
}
.rmfc-table--standings .rmfc-standings-team-logo {
width: 19px;
height: 19px;
margin-right: 3px;
}
.rmfc-table--standings .rmfc-standings-team-name {
max-width: calc(100% - 25px);
font-size: 11px;
}
.rmfc-table--standings td.rmfc-standings-points {
font-size: 12px;
}
}
/* =========================================================
FCM — SQUAD & LEADERSHIP TABLE SYSTEM
STEP 3 — MASTER CSS
========================================================= */
/* =========================================================
01. SQUAD TABLE — FOUNDATION
========================================================= */
.rmfc-table--squad {
width: 100%;
margin: 0 0 24px;
}
.rmfc-table--squad table {
width: 100%;
table-layout: fixed;
border-collapse: separate;
border-spacing: 0;
overflow: hidden;
background: var(--fcm-surface);
border: 1px solid var(--fcm-border);
border-radius: 8px;
}
/* =========================================================
02. COLUMN WIDTHS
========================================================= */
.rmfc-table--squad th:nth-child(1),
.rmfc-table--squad td:nth-child(1) {
width: 46%;
}
.rmfc-table--squad th:nth-child(2),
.rmfc-table--squad td:nth-child(2) {
width: 12%;
}
.rmfc-table--squad th:nth-child(3),
.rmfc-table--squad td:nth-child(3) {
width: 12%;
}
.rmfc-table--squad th:nth-child(4),
.rmfc-table--squad td:nth-child(4) {
width: 30%;
}
/* =========================================================
03. HEADER
========================================================= */
.rmfc-table--squad thead th {
background: var(--fcm-primary) !important;
color: var(--fcm-light) !important;
text-align: center !important;
font-weight: 700;
font-size: 14px;
line-height: 1.35;
padding: 11px 12px;
border: 0 !important;
border-bottom: 3px solid var(--fcm-secondary) !important;
vertical-align: middle;
}
/* =========================================================
04. BODY
========================================================= */
.rmfc-table--squad tbody td {
background: var(--fcm-surface);
color: var(--fcm-text);
font-size: 14px;
line-height: 1.45;
padding: 10px 12px;
border: 0 !important;
border-bottom: 1px solid var(--fcm-border) !important;
vertical-align: middle;
}
.rmfc-table--squad tbody tr:nth-child(even) td {
background: var(--fcm-surface-soft);
}
.rmfc-table--squad tbody tr:hover td {
background: var(--fcm-surface-hover);
}
.rmfc-table--squad tbody tr:last-child td {
border-bottom: 0 !important;
}
/* =========================================================
05. BODY ALIGNMENT
========================================================= */
.rmfc-table--squad tbody td:first-child {
text-align: left !important;
}
.rmfc-table--squad tbody td:nth-child(2) {
text-align: center !important;
white-space: nowrap;
}
.rmfc-table--squad tbody td:nth-child(3) {
text-align: center !important;
font-weight: 700;
white-space: nowrap;
}
.rmfc-table--squad tbody td:nth-child(4) {
text-align: left !important;
}
/* =========================================================
06. PLAYER NAME LINKS
========================================================= */
.rmfc-table--squad tbody td:first-child a {
color: var(--fcm-text);
font-weight: 600;
text-decoration: none;
transition: color var(--fcm-transition-fast);
}
.rmfc-table--squad tbody td:first-child a:hover {
color: var(--fcm-secondary);
}
.rmfc-table--squad tbody td:first-child a:focus-visible {
color: var(--fcm-secondary);
outline: 2px solid var(--fcm-secondary);
outline-offset: 2px;
border-radius: 2px;
}
/* =========================================================
07. COUNTRY / FLAG
========================================================= */
.rmfc-country {
display: inline-flex;
align-items: center;
gap: 7px;
min-width: 0;
white-space: nowrap;
}
.rmfc-country-flag {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 22px;
min-width: 22px;
line-height: 1;
font-size: 17px;
}
.rmfc-country-name {
display: inline;
}
/* =========================================================
08. LEADERSHIP TABLE
========================================================= */
.rmfc-table--leadership {
width: 100%;
margin: 0 0 24px;
}
.rmfc-table--leadership table {
width: 100%;
table-layout: fixed;
border-collapse: separate;
border-spacing: 0;
overflow: hidden;
background: var(--fcm-surface);
border: 1px solid var(--fcm-border);
border-radius: 8px;
}
.rmfc-table--leadership th:first-child,
.rmfc-table--leadership td:first-child {
width: 55%;
}
.rmfc-table--leadership th:last-child,
.rmfc-table--leadership td:last-child {
width: 45%;
}
/* Leadership header */
.rmfc-table--leadership thead th {
background: var(--fcm-primary) !important;
color: var(--fcm-light) !important;
text-align: center !important;
font-weight: 700;
font-size: 14px;
line-height: 1.35;
padding: 11px 12px;
border: 0 !important;
border-bottom: 3px solid var(--fcm-secondary) !important;
vertical-align: middle;
}
/* Leadership body */
.rmfc-table--leadership tbody td {
background: var(--fcm-surface);
color: var(--fcm-text);
font-size: 14px;
line-height: 1.45;
padding: 10px 12px;
border: 0 !important;
border-bottom: 1px solid var(--fcm-border) !important;
vertical-align: middle;
}
.rmfc-table--leadership tbody tr:nth-child(even) td {
background: var(--fcm-surface-soft);
}
.rmfc-table--leadership tbody tr:hover td {
background: var(--fcm-surface-hover);
}
.rmfc-table--leadership tbody tr:last-child td {
border-bottom: 0 !important;
}
/* Leadership alignment */
.rmfc-table--leadership tbody td:first-child,
.rmfc-table--leadership tbody td:last-child {
text-align: left !important;
}
/* Leadership player links */
.rmfc-table--leadership tbody td:first-child a {
color: var(--fcm-text);
font-weight: 600;
text-decoration: none;
transition: color var(--fcm-transition-fast);
}
.rmfc-table--leadership tbody td:first-child a:hover {
color: var(--fcm-secondary);
}
.rmfc-table--leadership tbody td:first-child a:focus-visible {
color: var(--fcm-secondary);
outline: 2px solid var(--fcm-secondary);
outline-offset: 2px;
border-radius: 2px;
}
/* =========================================================
09. TABLET
========================================================= */
@media (max-width: 900px) {
.rmfc-table--squad thead th,
.rmfc-table--leadership thead th {
font-size: 13px;
padding: 10px 10px;
}
.rmfc-table--squad tbody td,
.rmfc-table--leadership tbody td {
font-size: 13px;
padding: 9px 10px;
}
.rmfc-country {
gap: 6px;
}
.rmfc-country-flag {
width: 20px;
min-width: 20px;
font-size: 16px;
}
}
/* =========================================================
10. MOBILE
========================================================= */
@media (max-width: 600px) {
.rmfc-table--squad table,
.rmfc-table--leadership table {
border-radius: 7px;
}
.rmfc-table--squad thead th,
.rmfc-table--leadership thead th {
font-size: 13px;
padding: 9px 8px;
}
.rmfc-table--squad tbody td,
.rmfc-table--leadership tbody td {
font-size: 13px;
padding: 9px 8px;
}
.rmfc-country {
gap: 5px;
}
.rmfc-country-flag {
width: 19px;
min-width: 19px;
font-size: 15px;
}
}
/* =========================================================
11. SMALL MOBILE
========================================================= */
@media (max-width: 449px) {
.rmfc-table--squad thead th,
.rmfc-table--leadership thead th {
font-size: 12px;
padding: 8px 6px;
}
.rmfc-table--squad tbody td,
.rmfc-table--leadership tbody td {
font-size: 12px;
padding: 8px 6px;
}
.rmfc-table--squad th:nth-child(1),
.rmfc-table--squad td:nth-child(1) {
width: 43%;
}
.rmfc-table--squad th:nth-child(2),
.rmfc-table--squad td:nth-child(2) {
width: 13%;
}
.rmfc-table--squad th:nth-child(3),
.rmfc-table--squad td:nth-child(3) {
width: 12%;
}
.rmfc-table--squad th:nth-child(4),
.rmfc-table--squad td:nth-child(4) {
width: 32%;
}
.rmfc-country {
gap: 4px;
}
.rmfc-country-flag {
width: 18px;
min-width: 18px;
font-size: 14px;
}
}
/* =========================================================
12. EXTRA SMALL
========================================================= */
@media (max-width: 380px) {
.rmfc-table--squad thead th,
.rmfc-table--leadership thead th {
font-size: 11.5px;
padding: 7px 5px;
}
.rmfc-table--squad tbody td,
.rmfc-table--leadership tbody td {
font-size: 11.5px;
padding: 7px 5px;
}
.rmfc-country {
gap: 4px;
}
.rmfc-country-flag {
width: 17px;
min-width: 17px;
font-size: 13px;
}
}
/* =========================================================
FCM — PLAYER SALARY TABLE
Version 1.1 CLEAN FINAL
========================================================= */
/* ---------------------------------------------------------
01. WRAPPER
--------------------------------------------------------- */
.rmfc-table--salary {
width: 100% !important;
max-width: 100% !important;
margin: 24px 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
/* ---------------------------------------------------------
02. TABLE FOUNDATION
--------------------------------------------------------- */
.rmfc-table--salary table {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
table-layout: fixed !important;
border-collapse: collapse !important;
border-spacing: 0 !important;
background: var(--fcm-surface) !important;
border: 1px solid var(--fcm-border) !important;
border-radius: 8px !important;
overflow: hidden !important;
font-family: inherit !important;
font-size: 14px !important;
line-height: 1.45 !important;
}
/* ---------------------------------------------------------
03. COLUMN WIDTH
--------------------------------------------------------- */
.rmfc-table--salary col:nth-child(1) {
width: 17% !important;
}
.rmfc-table--salary col:nth-child(2) {
width: 39% !important;
}
.rmfc-table--salary col:nth-child(3) {
width: 22% !important;
}
.rmfc-table--salary col:nth-child(4) {
width: 22% !important;
}
/* ---------------------------------------------------------
04. HEADER
--------------------------------------------------------- */
.rmfc-table--salary thead {
background: var(--fcm-primary) !important;
color: var(--fcm-light) !important;
}
/* Full blue line below the complete header */
.rmfc-table--salary thead > tr:last-child {
border-bottom: 3px solid var(--fcm-secondary) !important;
}
.rmfc-table--salary thead th {
background: var(--fcm-primary) !important;
color: var(--fcm-light) !important;
border: 0 !important;
border-radius: 0 !important;
padding: 11px 10px !important;
text-align: center !important;
vertical-align: middle !important;
font-family: inherit !important;
font-size: 13px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
white-space: nowrap !important;
}
/* ---------------------------------------------------------
05. BODY
--------------------------------------------------------- */
.rmfc-table--salary tbody td {
background: var(--fcm-surface) !important;
border: 0 !important;
border-bottom: 1px solid var(--fcm-border) !important;
padding: 10px 10px !important;
color: var(--fcm-text) !important;
font-family: inherit !important;
font-size: 14px !important;
font-weight: 500 !important;
line-height: 1.45 !important;
vertical-align: middle !important;
}
/* Zebra */
.rmfc-table--salary tbody tr:nth-child(even) td {
background: var(--fcm-surface-soft) !important;
}
/* Hover */
.rmfc-table--salary tbody tr:hover td {
background: var(--fcm-surface-hover) !important;
}
/* Last row */
.rmfc-table--salary tbody tr:last-child td {
border-bottom: 0 !important;
}
/* ---------------------------------------------------------
06. POSITION
--------------------------------------------------------- */
.rmfc-table--salary tbody td:first-child {
text-align: center !important;
vertical-align: middle !important;
font-weight: 600 !important;
color: var(--fcm-text) !important;
}
/* ---------------------------------------------------------
07. PLAYER NAME
--------------------------------------------------------- */
.rmfc-table--salary tbody td:nth-child(2) {
text-align: left !important;
vertical-align: middle !important;
color: var(--fcm-text) !important;
font-weight: 600 !important;
}
/* Player link */
.rmfc-table--salary a.rmfc-salary-player,
.rmfc-table--salary a.rmfc-salary-player:link,
.rmfc-table--salary a.rmfc-salary-player:visited {
display: block !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
text-align: left !important;
color: var(--fcm-text) !important;
-webkit-text-fill-color: var(--fcm-text) !important;
font-family: inherit !important;
font-size: inherit !important;
font-weight: 600 !important;
line-height: inherit !important;
text-decoration: none !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
/* Player link hover */
.rmfc-table--salary a.rmfc-salary-player:hover {
color: var(--fcm-secondary) !important;
-webkit-text-fill-color: var(--fcm-secondary) !important;
text-decoration: none !important;
}
/* Player link keyboard focus */
.rmfc-table--salary a.rmfc-salary-player:focus,
.rmfc-table--salary a.rmfc-salary-player:focus-visible {
color: var(--fcm-secondary) !important;
-webkit-text-fill-color: var(--fcm-secondary) !important;
text-decoration: none !important;
outline: 2px solid var(--fcm-secondary) !important;
outline-offset: 2px !important;
}
/* ---------------------------------------------------------
08. SALARY VALUES
--------------------------------------------------------- */
.rmfc-table--salary tbody td:nth-child(3),
.rmfc-table--salary tbody td:nth-child(4) {
text-align: right !important;
vertical-align: middle !important;
color: var(--fcm-text) !important;
-webkit-text-fill-color: var(--fcm-text) !important;
font-weight: 500 !important;
white-space: nowrap !important;
}
/* ---------------------------------------------------------
09. THEME INTERFERENCE RESET
--------------------------------------------------------- */
.rmfc-table--salary td p,
.rmfc-table--salary td div,
.rmfc-table--salary td span {
margin: 0 !important;
}
/* Keep player cell contents left-aligned */
.rmfc-table--salary tbody td:nth-child(2) p,
.rmfc-table--salary tbody td:nth-child(2) div,
.rmfc-table--salary tbody td:nth-child(2) span {
text-align: left !important;
}
/* ---------------------------------------------------------
10. TABLET
--------------------------------------------------------- */
@media (max-width: 900px) {
.rmfc-table--salary table {
font-size: 13px !important;
}
.rmfc-table--salary thead th {
padding: 10px 8px !important;
font-size: 12.5px !important;
}
.rmfc-table--salary tbody td {
padding: 9px 8px !important;
font-size: 13px !important;
}
}
/* ---------------------------------------------------------
11. MOBILE
--------------------------------------------------------- */
@media (max-width: 600px) {
.rmfc-table--salary {
margin: 18px 0 !important;
}
.rmfc-table--salary table {
font-size: 12.5px !important;
border-radius: 7px !important;
}
/* Mobile column proportions */
.rmfc-table--salary col:nth-child(1) {
width: 16% !important;
}
.rmfc-table--salary col:nth-child(2) {
width: 38% !important;
}
.rmfc-table--salary col:nth-child(3) {
width: 23% !important;
}
.rmfc-table--salary col:nth-child(4) {
width: 23% !important;
}
.rmfc-table--salary thead th {
padding: 9px 6px !important;
font-size: 11.5px !important;
}
.rmfc-table--salary tbody td {
padding: 9px 6px !important;
font-size: 12.5px !important;
}
/* Allow salary values to wrap on narrow screens */
.rmfc-table--salary tbody td:nth-child(3),
.rmfc-table--salary tbody td:nth-child(4) {
white-space: normal !important;
overflow-wrap: anywhere !important;
}
}
/* ---------------------------------------------------------
12. SMALL MOBILE
--------------------------------------------------------- */
@media (max-width: 449px) {
.rmfc-table--salary col:nth-child(1) {
width: 16% !important;
}
.rmfc-table--salary col:nth-child(2) {
width: 36% !important;
}
.rmfc-table--salary col:nth-child(3) {
width: 24% !important;
}
.rmfc-table--salary col:nth-child(4) {
width: 24% !important;
}
.rmfc-table--salary thead th {
padding: 8px 5px !important;
font-size: 10.5px !important;
}
.rmfc-table--salary tbody td {
padding: 8px 5px !important;
font-size: 12px !important;
}
}
/* ---------------------------------------------------------
13. EXTRA SMALL
--------------------------------------------------------- */
@media (max-width: 380px) {
.rmfc-table--salary col:nth-child(1) {
width: 15% !important;
}
.rmfc-table--salary col:nth-child(2) {
width: 37% !important;
}
.rmfc-table--salary col:nth-child(3) {
width: 24% !important;
}
.rmfc-table--salary col:nth-child(4) {
width: 24% !important;
}
.rmfc-table--salary thead th {
font-size: 10px !important;
}
.rmfc-table--salary tbody td {
font-size: 11.5px !important;
}
}
/* =========================================================
FCM MATCH SYSTEM
CSS CLEAN v1.2
========================================================= */
/* =========================================================
1. MATCH WRAPPER
========================================================= */
.rmfc-matches {
width: 100%;
margin: 0;
padding: 0;
}
/* =========================================================
2. MONTH SECTION
========================================================= */
.rmfc-match-month {
width: 100%;
margin: 0 0 10px;
padding: 0;
background: transparent;
border: 0;
}
/* =========================================================
3. MONTH TITLE
========================================================= */
.rmfc-match-month__title {
display: block;
width: 100%;
box-sizing: border-box;
margin: 0 0 10px;
padding: 9px 13px;
background: #041F3A;
border-bottom: 3px solid #0A4E9F;
border-radius: 7px;
color: #F9F9F9;
font-size: 18px;
font-weight: 700;
line-height: 1.3;
}
/* =========================================================
4. MATCH LIST
========================================================= */
.rmfc-match-list {
display: flex;
flex-direction: column;
width: 100%;
margin: 0;
padding: 0;
gap: 10px;
background: transparent;
border: 0;
list-style: none;
}
/* =========================================================
5. MATCH CARD
========================================================= */
.rmfc-match {
display: block;
width: 100%;
box-sizing: border-box;
margin: 0;
padding: 14px 16px;
background: #FFFFFF;
border: 1px solid #E5E7EB;
border-radius: 8px;
color: #172B4D;
overflow: hidden;
transition:
background-color 0.15s ease,
border-color 0.15s ease;
}
.rmfc-match:hover {
background: #EEF4FB;
}
/* =========================================================
6. TOP ROW
Date + Status
========================================================= */
.rmfc-match__top {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
min-width: 0;
margin: 0 0 10px;
gap: 12px;
}
/* Date */
.rmfc-match__date {
flex: 1 1 auto;
min-width: 0;
color: #172B4D;
font-size: 12px;
font-weight: 600;
line-height: 1.3;
}
/* =========================================================
7. STATUS
========================================================= */
.rmfc-match__status {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 24px;
padding: 4px 10px;
border-radius: 5px;
font-size: 11px;
font-weight: 700;
line-height: 1.2;
white-space: nowrap;
}
/* Finished */
.rmfc-match-status--finished {
background: #DCFCE7;
color: #166534;
}
/* Upcoming */
.rmfc-match-status--upcoming {
background: #EEF4FB;
color: #0A4E9F;
}
/* Live */
.rmfc-match-status--live {
background: #FEF3C7;
color: #92400E;
}
/* Postponed */
.rmfc-match-status--postponed {
background: #FEF3C7;
color: #92400E;
}
/* Cancelled */
.rmfc-match-status--cancelled {
background: #FEE2E2;
color: #991B1B;
}
/* =========================================================
8. MAIN MATCH
Home | Center | Away
========================================================= */
.rmfc-match__main {
display: grid;
grid-template-columns:
minmax(0, 1fr)
180px
minmax(0, 1fr);
align-items: center;
gap: 16px;
width: 100%;
}
/* =========================================================
9. TEAM
========================================================= */
.rmfc-match__team {
display: flex;
align-items: center;
min-width: 0;
gap: 9px;
color: #172B4D;
font-size: 14px;
font-weight: 600;
line-height: 1.35;
}
/* Home */
.rmfc-match__team--home {
justify-content: flex-end;
text-align: right;
}
/* Away */
.rmfc-match__team--away {
justify-content: flex-start;
text-align: left;
}
/* Team name */
.rmfc-match__team-name {
min-width: 0;
}
/* =========================================================
10. CREST
========================================================= */
.rmfc-match__crest {
display: block;
flex: 0 0 auto;
width: 38px;
height: 38px;
object-fit: contain;
}
/* =========================================================
11. MATCH CENTER
========================================================= */
.rmfc-match__center {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-width: 0;
text-align: center;
}
/* =========================================================
12. COMPETITION
========================================================= */
.rmfc-match__competition {
width: 100%;
min-width: 0;
margin: 0 0 7px;
padding: 0;
color: #0A4E9F;
font-size: 12px;
font-weight: 600;
line-height: 1.3;
text-align: center;
white-space: nowrap;
}
/* =========================================================
13. SCORE
========================================================= */
.rmfc-match__score {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 100px;
min-height: 48px;
box-sizing: border-box;
padding: 0 12px;
background: #F1F5F9;
border-radius: 7px;
color: #172B4D;
font-size: 20px;
font-weight: 800;
line-height: 1;
}
/* Score number */
.rmfc-match__score-number {
display: inline-block;
line-height: 1;
}
/* Score separator */
.rmfc-match__score-separator {
display: inline-block;
margin: 0 7px;
color: #64748B;
font-weight: 700;
}
/* =========================================================
14. KICKOFF
========================================================= */
.rmfc-match__kickoff {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 100px;
min-height: 48px;
box-sizing: border-box;
padding: 0 12px;
background: #F1F5F9;
border-radius: 7px;
color: #172B4D;
font-size: 18px;
font-weight: 800;
line-height: 1;
}
/* =========================================================
15. MATCH REPORT
========================================================= */
.rmfc-match__report {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
margin-top: 8px;
padding: 0;
text-align: center;
}
.rmfc-match__report-link {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
color: #0A4E9F !important;
font-size: 11px;
font-weight: 700;
line-height: 1.3;
text-decoration: none !important;
white-space: nowrap;
}
.rmfc-match__report-link:hover {
color: #041F3A !important;
}
.rmfc-match__report-link:focus-visible {
outline: 2px solid #0A4E9F;
outline-offset: 3px;
border-radius: 3px;
}
/* =========================================================
16. VENUE
========================================================= */
.rmfc-match__venue {
margin-top: 10px;
padding-top: 8px;
border-top: 1px solid #E5E7EB;
color: #64748B;
font-size: 11px;
font-weight: 500;
line-height: 1.4;
text-align: center;
}
/* =========================================================
17. TABLET
========================================================= */
@media (max-width: 900px) {
.rmfc-match {
padding: 13px 14px;
}
.rmfc-match__main {
grid-template-columns:
minmax(0, 1fr)
160px
minmax(0, 1fr);
gap: 12px;
}
.rmfc-match__team {
font-size: 13px;
}
.rmfc-match__crest {
width: 34px;
height: 34px;
}
.rmfc-match__score {
min-width: 94px;
min-height: 46px;
font-size: 19px;
}
.rmfc-match__kickoff {
min-width: 94px;
min-height: 46px;
font-size: 17px;
}
}
/* =========================================================
18. MOBILE
========================================================= */
@media (max-width: 600px) {
.rmfc-match {
padding: 12px;
border-radius: 7px;
}
.rmfc-match__top {
margin-bottom: 9px;
}
.rmfc-match__date {
font-size: 12px;
}
.rmfc-match__status {
min-height: 22px;
padding: 3px 8px;
font-size: 10px;
}
.rmfc-match__main {
grid-template-columns:
minmax(0, 1fr)
130px
minmax(0, 1fr);
gap: 8px;
}
.rmfc-match__team {
gap: 6px;
font-size: 12px;
line-height: 1.3;
}
.rmfc-match__crest {
width: 32px;
height: 32px;
}
.rmfc-match__competition {
margin-bottom: 6px;
font-size: 11px;
}
.rmfc-match__score {
min-width: 88px;
min-height: 42px;
padding: 0 9px;
font-size: 18px;
}
.rmfc-match__score-separator {
margin: 0 6px;
}
.rmfc-match__kickoff {
min-width: 88px;
min-height: 42px;
padding: 0 9px;
font-size: 16px;
}
.rmfc-match__report {
margin-top: 7px;
}
.rmfc-match__report-link {
font-size: 10px;
}
.rmfc-match__venue {
margin-top: 8px;
padding-top: 7px;
font-size: 10px;
}
}
/* =========================================================
19. SMALL MOBILE
========================================================= */
@media (max-width: 449px) {
.rmfc-match-month__title {
margin-bottom: 9px;
padding: 8px 11px;
font-size: 16px;
}
.rmfc-match {
padding: 11px 10px;
}
.rmfc-match__main {
grid-template-columns:
minmax(0, 1fr)
105px
minmax(0, 1fr);
gap: 6px;
}
.rmfc-match__team {
font-size: 11px;
}
.rmfc-match__crest {
width: 29px;
height: 29px;
}
.rmfc-match__competition {
font-size: 10px;
}
.rmfc-match__score {
min-width: 82px;
min-height: 40px;
font-size: 17px;
}
.rmfc-match__score-separator {
margin: 0 5px;
}
.rmfc-match__kickoff {
min-width: 82px;
min-height: 40px;
font-size: 15px;
}
.rmfc-match__report-link {
font-size: 10px;
}
}
/* =========================================================
20. EXTRA SMALL MOBILE
========================================================= */
@media (max-width: 380px) {
.rmfc-match {
padding: 10px 9px;
}
.rmfc-match__top {
gap: 8px;
}
.rmfc-match__date {
font-size: 11px;
}
.rmfc-match__status {
padding: 3px 7px;
font-size: 9px;
}
.rmfc-match__main {
grid-template-columns:
minmax(0, 1fr)
96px
minmax(0, 1fr);
gap: 4px;
}
.rmfc-match__team {
gap: 5px;
font-size: 10px;
}
.rmfc-match__crest {
width: 27px;
height: 27px;
}
.rmfc-match__competition {
font-size: 9px;
}
.rmfc-match__score {
min-width: 76px;
min-height: 38px;
padding: 0 7px;
font-size: 16px;
}
.rmfc-match__score-separator {
margin: 0 4px;
}
.rmfc-match__kickoff {
min-width: 76px;
min-height: 38px;
padding: 0 7px;
font-size: 14px;
}
.rmfc-match__report-link {
font-size: 9px;
}
}
/* =========================================================
FCM — COMPETITION TABS
Version 1.4
Pass 3F — Token Migration
Desktop: Centered
Mobile: Wrap
========================================================= */
.rmfc-competition-tabs {
display: flex;
align-items: flex-end;
justify-content: center;
width: 100%;
max-width: 100%;
min-width: 0;
margin: 0 0 18px;
padding: 0 0 0;
gap: 8px;
border-bottom: 3px solid var(--fcm-secondary);
box-sizing: border-box;
}
/* =========================================================
TAB BASE
========================================================= */
.rmfc-competition-tab {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 1 auto;
min-height: 42px;
padding: 9px 17px;
background: var(--fcm-primary);
color: var(--fcm-light);
border: 1px solid var(--fcm-primary);
border-radius: 6px 6px 0 0;
font-family: inherit;
font-size: 14px;
font-weight: 600;
line-height: 1.2;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
box-sizing: border-box;
transition:
background-color var(--fcm-transition-fast),
color var(--fcm-transition-fast),
border-color var(--fcm-transition-fast);
}
/* =========================================================
ACTIVE
========================================================= */
.rmfc-competition-tab.is-active {
background: var(--fcm-secondary);
color: var(--fcm-light);
border-color: var(--fcm-secondary);
}
/* =========================================================
HOVER
========================================================= */
.rmfc-competition-tab:not(.is-active):hover {
background: var(--fcm-secondary);
color: var(--fcm-light);
border-color: var(--fcm-secondary);
}
/* =========================================================
FOCUS
========================================================= */
.rmfc-competition-tab:focus-visible {
outline: 2px solid var(--fcm-secondary);
outline-offset: 2px;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 900px) {
.rmfc-competition-tabs {
gap: 7px;
}
.rmfc-competition-tab {
padding: 8px 14px;
font-size: 13px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 600px) {
.rmfc-competition-tabs {
justify-content: center;
flex-wrap: wrap;
gap: 7px;
margin-bottom: 16px;
padding: 0 4px 7px;
overflow: visible;
}
.rmfc-competition-tab {
flex: 0 1 auto;
min-height: 40px;
padding: 8px 13px;
font-size: 13px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 449px) {
.rmfc-competition-tabs {
gap: 6px;
padding-left: 3px;
padding-right: 3px;
}
.rmfc-competition-tab {
min-height: 39px;
padding: 8px 11px;
font-size: 12px;
}
}
/* =========================================================
VERY SMALL MOBILE
========================================================= */
@media (max-width: 380px) {
.rmfc-competition-tabs {
gap: 6px;
}
.rmfc-competition-tab {
padding: 7px 10px;
font-size: 12px;
}
}
/* =========================================================
FCM — HONORS / TROPHY SYSTEM
Version 1.0
========================================================= */
.rmfc-honors {
width: 100%;
max-width: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* HEADER
--------------------------------------------------------- */
.rmfc-honors__header {
margin: 0 0 28px;
}
.rmfc-honors__header h2 {
margin: 0 0 8px;
}
.rmfc-honors__header p {
margin: 0;
color: #172B4D;
line-height: 1.6;
}
/* GROUP
--------------------------------------------------------- */
.rmfc-honors__group {
margin: 0 0 32px;
}
.rmfc-honors__group > h3 {
margin: 0 0 14px;
padding: 0 0 8px;
color: #041F3A;
border-bottom: 3px solid #0A4E9F;
}
/* GRID
--------------------------------------------------------- */
.rmfc-honors__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
width: 100%;
}
/* CARD
--------------------------------------------------------- */
.rmfc-honor-card {
display: flex;
flex-direction: column;
min-width: 0;
padding: 18px;
background: #FFFFFF;
border: 1px solid #E5E7EB;
border-radius: 8px;
box-sizing: border-box;
transition:
border-color 0.18s ease,
box-shadow 0.18s ease,
transform 0.18s ease;
}
.rmfc-honor-card:hover {
border-color: #0A4E9F;
box-shadow: 0 4px 14px rgba(4, 31, 58, 0.08);
transform: translateY(-1px);
}
/* FEATURED
--------------------------------------------------------- */
.rmfc-honor-card--featured {
border-color: #0A4E9F;
}
/* LABEL
--------------------------------------------------------- */
.rmfc-honor-card__label {
margin: 0 0 10px;
color: #041F3A;
font-size: 14px;
font-weight: 700;
line-height: 1.35;
}
/* COUNT
--------------------------------------------------------- */
.rmfc-honor-card__count {
margin: 0;
color: #0A4E9F;
font-size: 36px;
font-weight: 800;
line-height: 1;
}
/* TITLE
--------------------------------------------------------- */
.rmfc-honor-card__title {
margin: 5px 0 14px;
color: #172B4D;
font-size: 12px;
font-weight: 700;
line-height: 1;
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* DETAILS
--------------------------------------------------------- */
.rmfc-honor-card__details {
margin-top: auto;
padding-top: 12px;
border-top: 1px solid #E5E7EB;
}
.rmfc-honor-card__details summary {
color: #0A4E9F;
font-size: 13px;
font-weight: 700;
cursor: pointer;
}
.rmfc-honor-card__details p {
margin: 12px 0 0;
color: #172B4D;
font-size: 13px;
line-height: 1.7;
}
/* MINOR TROPHIES
--------------------------------------------------------- */
.rmfc-honors__minor {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.rmfc-honors__minor-item {
display: flex;
align-items: center;
justify-content: space-between;
min-width: 0;
padding: 12px 14px;
background: #F7F9FC;
border: 1px solid #E5E7EB;
border-radius: 7px;
color: #172B4D;
font-size: 14px;
line-height: 1.4;
}
.rmfc-honors__minor-item strong {
flex: 0 0 auto;
margin-left: 12px;
color: #0A4E9F;
font-size: 16px;
font-weight: 800;
}
/* FOCUS
--------------------------------------------------------- */
.rmfc-honor-card__details summary:focus-visible {
outline: 2px solid #0A4E9F;
outline-offset: 3px;
}
/* TABLET
--------------------------------------------------------- */
@media (max-width: 900px) {
.rmfc-honors__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.rmfc-honor-card {
padding: 16px;
}
.rmfc-honor-card__count {
font-size: 32px;
}
}
/* MOBILE
--------------------------------------------------------- */
@media (max-width: 600px) {
.rmfc-honors__header {
margin-bottom: 22px;
}
.rmfc-honors__group {
margin-bottom: 26px;
}
.rmfc-honors__grid {
grid-template-columns: 1fr;
gap: 10px;
}
.rmfc-honor-card {
padding: 16px;
}
.rmfc-honor-card__count {
font-size: 34px;
}
.rmfc-honors__minor {
grid-template-columns: 1fr;
}
}
/* SMALL MOBILE
--------------------------------------------------------- */
@media (max-width: 449px) {
.rmfc-honors__group > h3 {
font-size: 20px;
}
.rmfc-honor-card {
padding: 14px;
}
.rmfc-honor-card__label {
font-size: 13px;
}
.rmfc-honor-card__count {
font-size: 32px;
}
.rmfc-honor-card__details p {
font-size: 12px;
line-height: 1.65;
}
.rmfc-honors__minor-item {
font-size: 13px;
}
}
/* =========================================================
FCM — Additional CSS
Production v1.0
========================================================= */
/* =========================================================
01. GLOBAL SITE CONTAINER
========================================================= */
.gmr-box-layout #site-container {
max-width: 1140px !important;
margin-left: auto;
margin-right: auto;
}
.top-header > .container {
width: 100%;
max-width: 1140px !important;
}
/* =========================================================
02. HEADER / LOGO
========================================================= */
.gmr-logo {
float: none;
width: 100%;
margin-top: 10px;
margin-bottom: 12px;
text-align: center;
}
/* =========================================================
03. MAIN NAVIGATION
========================================================= */
.gmr-menuwrap {
background-color: #041F3A;
border-radius: 10px;
}
.gmr-mainmenu {
line-height: 1.2;
}
.gmr-mainmenu #primary-menu {
display: flex;
align-items: stretch;
margin: 0;
padding: 0;
}
.gmr-mainmenu #primary-menu > li {
display: flex;
align-items: stretch;
}
.gmr-mainmenu #primary-menu > li > a {
display: flex;
align-items: center;
min-height: 100%;
padding: 11px 18px;
box-sizing: border-box;
color: #F9F9F9;
font-family: "Nunito", "Helvetica Neue", sans-serif;
font-size: 14px;
font-weight: 600;
line-height: 1.2;
}
.gmr-mainmenu #primary-menu > li:hover > a,
.gmr-mainmenu #primary-menu .current-menu-item > a,
.gmr-mainmenu #primary-menu .current-menu-ancestor > a,
.gmr-mainmenu #primary-menu .current_page_item > a,
.gmr-mainmenu #primary-menu .current_page_ancestor > a {
background-color: #0A4E9F;
border-radius: 10px;
color: #F9F9F9;
}
/* =========================================================
04. NAVIGATION SEARCH
========================================================= */
.gmr-mainmenu #primary-menu > li.gmr-search {
position: relative;
margin-left: auto;
}
.gmr-mainmenu #primary-menu > li.gmr-search > form {
margin: 0;
}
.gmr-mainmenu .search-trigger {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 44px;
}
.gmr-mainmenu .search-trigger .gmr-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
color: #F9F9F9;
text-decoration: none;
}
.gmr-mainmenu #primary-menu > li.gmr-close-btn {
display: none !important;
}
.gmr-mainmenu .gmr-searchform {
position: relative;
margin: 0;
}
.gmr-mainmenu .gmr-searchform input[type="text"] {
width: 0;
height: 44px;
padding: 0;
border: 0;
opacity: 0;
visibility: hidden;
box-sizing: border-box;
transition:
width 0.2s ease,
opacity 0.2s ease,
padding 0.2s ease;
}
.gmr-mainmenu .gmr-searchform.search-active input[type="text"],
.gmr-mainmenu .gmr-searchform:focus-within input[type="text"] {
width: 220px;
padding: 0 12px;
background: #FFFFFF;
color: #041F3A;
border: 0;
outline: none;
opacity: 1;
visibility: visible;
}
.gmr-mainmenu .search-trigger .icon_close {
display: none;
}
.gmr-mainmenu .gmr-searchform.search-active .icon_close {
display: inline-flex;
}
.gmr-mainmenu .gmr-searchform.search-active .icon_search {
display: none;
}
/* =========================================================
05. SIDEBAR WIDGET TITLES
Pass 3C — Token Migration
========================================================= */
#secondary .widget_block {
margin-bottom: 20px;
}
#secondary .widget_block .wp-block-heading {
display: block;
width: 100%;
margin: 0 0 9px;
padding: 8px 14px;
background: var(--fcm-secondary);
color: var(--fcm-light);
border-radius: 8px;
font-family: "Nunito", "Helvetica Neue", sans-serif;
font-size: 16px;
font-weight: 700;
line-height: 1.3;
text-align: center;
box-sizing: border-box;
}
/* =========================================================
06. POPULAR POSTS
Pass 3C — Token Migration
========================================================= */
.fcm-popular-posts {
width: 100%;
margin: 0;
padding: 0;
}
.fcm-popular-posts__list {
display: flex;
flex-direction: column;
gap: 12px;
}
.fcm-popular-posts__item {
display: flex;
align-items: flex-start;
gap: 10px;
margin: 0;
padding: 9px;
background: var(--fcm-surface-soft);
border-radius: 7px;
box-sizing: border-box;
}
.fcm-popular-posts__thumb {
display: block;
flex: 0 0 86px;
width: 86px;
height: 60px;
overflow: hidden;
border-radius: 6px;
background: var(--fcm-surface-total);
}
.fcm-popular-posts__image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.fcm-popular-posts__placeholder {
display: block;
width: 100%;
height: 100%;
background: var(--fcm-surface-total);
}
.fcm-popular-posts__content {
min-width: 0;
flex: 1 1 auto;
}
.fcm-popular-posts__title {
display: -webkit-box;
overflow: hidden;
color: var(--fcm-text);
font-family: "Nunito", "Helvetica Neue", sans-serif;
font-size: 13px;
font-weight: 700;
line-height: 1.35;
text-decoration: none;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.fcm-popular-posts__title:hover {
color: var(--fcm-secondary);
}
.fcm-popular-posts__meta {
margin-top: 5px;
color: var(--fcm-muted);
font-size: 10.5px;
font-weight: 400;
line-height: 1.25;
}
.fcm-popular-posts__meta strong {
color: var(--fcm-text);
font-weight: 700;
}
.fcm-popular-posts__empty {
margin: 0;
color: var(--fcm-muted);
font-size: 13px;
}
/* =========================================================
07. CONTENT CONTAINER ALIGNMENT
========================================================= */
@media (min-width: 768px) {
#content.gmr-content,
.gmr-content {
width: 100% !important;
max-width: 1140px !important;
margin-left: auto !important;
margin-right: auto !important;
box-sizing: border-box;
}
#content.gmr-content > .container,
.gmr-content > .container {
width: 100% !important;
max-width: 1140px !important;
margin-left: auto !important;
margin-right: auto !important;
box-sizing: border-box;
}
}
/* =========================================================
08. FEATURED GRID
Pass 3B — Token Migration
========================================================= */
.fcm-home-featured-wrap {
width: 100%;
max-width: 100%;
margin: 0 0 24px;
box-sizing: border-box;
}
.fcm-featured-grid {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
grid-template-rows: 174px 174px 180px;
grid-template-areas:
"hero hero hero hero side1 side1"
"hero hero hero hero side2 side2"
"bottom1 bottom1 bottom1 bottom2 bottom2 bottom2";
gap: 12px;
width: 100%;
max-width: 100%;
margin: 0;
box-sizing: border-box;
}
.fcm-featured-card {
position: relative;
min-width: 0;
overflow: hidden;
background-color: var(--fcm-primary);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
border-radius: 8px;
box-sizing: border-box;
transition: transform var(--fcm-transition-normal);
}
.fcm-featured-card--1 {
grid-area: hero;
}
.fcm-featured-card--2 {
grid-area: side1;
}
.fcm-featured-card--3 {
grid-area: side2;
}
.fcm-featured-card--4 {
grid-area: bottom1;
}
.fcm-featured-card--5 {
grid-area: bottom2;
}
.fcm-featured-card__link {
display: block;
width: 100%;
height: 100%;
color: inherit;
text-decoration: none;
}
.fcm-featured-card__overlay {
display: flex;
align-items: flex-end;
width: 100%;
height: 100%;
min-height: inherit;
background:
linear-gradient(
to top,
rgba(4, 31, 58, 0.96) 0%,
rgba(4, 31, 58, 0.72) 34%,
rgba(4, 31, 58, 0.18) 72%,
rgba(4, 31, 58, 0) 100%
);
box-sizing: border-box;
}
.fcm-featured-card__content {
width: 100%;
padding: 18px;
box-sizing: border-box;
}
.fcm-featured-card__title {
margin: 0;
color: var(--fcm-light);
font-family: "Nunito", "Helvetica Neue", sans-serif;
font-size: 17px;
font-weight: 800;
line-height: 1.25;
transition: color var(--fcm-transition-fast);
}
.fcm-featured-card--1 .fcm-featured-card__title {
font-size: 25px;
line-height: 1.22;
}
.fcm-featured-card__meta {
margin-top: 7px;
color: rgba(249, 249, 249, 0.78);
font-size: 10.5px;
font-weight: 400;
line-height: 1.25;
}
.fcm-featured-card__meta strong {
color: var(--fcm-light);
font-weight: 700;
}
.fcm-featured-card:hover {
transform: translateY(-1px);
}
.fcm-featured-card:hover .fcm-featured-card__title {
color: var(--fcm-surface);
}
/* =========================================================
FCM — Featured Grid Desktop Alignment
Approved visual baseline
========================================================= */
@media (min-width: 768px) {
.fcm-home-featured-wrap {
width: calc(100% - 40px) !important;
max-width: calc(100% - 40px) !important;
margin-left: 20px !important;
margin-right: 20px !important;
box-sizing: border-box;
}
.fcm-featured-grid {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
}
/* =========================================================
09. LATEST NEWS
========================================================= */
.fcm-section-heading {
display: flex;
align-items: center;
gap: 14px;
width: 100%;
margin: 0 0 18px;
}
.fcm-section-heading h2 {
flex: 0 0 auto;
margin: 0;
padding: 0;
color: var(--fcm-primary);
font-family: "Nunito", "Helvetica Neue", sans-serif;
font-size: 23px;
font-weight: 800;
line-height: 1.25;
}
.fcm-section-heading span {
flex: 1 1 auto;
height: 3px;
background: var(--fcm-secondary);
border-radius: 3px;
}
.fcm-latest-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 14px;
width: 100%;
}
.fcm-latest-lead {
grid-column: 1;
grid-row: 1 / span 3;
min-width: 0;
overflow: hidden;
background: var(--fcm-surface-soft);
border-radius: 8px;
}
.fcm-latest-lead__image {
display: block;
width: 100%;
aspect-ratio: 16 / 10;
overflow: hidden;
background: var(--fcm-border);
}
.fcm-latest-lead__image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.fcm-latest-lead__content {
padding: 15px 16px 16px;
}
.fcm-latest-lead__title {
margin: 0;
font-family: "Nunito", "Helvetica Neue", sans-serif;
font-size: 21px;
font-weight: 800;
line-height: 1.25;
}
.fcm-latest-lead__title a {
color: var(--fcm-primary);
text-decoration: none;
transition: color var(--fcm-transition-fast);
}
.fcm-latest-lead__title a:hover {
color: var(--fcm-secondary);
}
.fcm-latest-lead__excerpt {
margin-top: 9px;
color: #4B5563;
font-size: 13px;
font-weight: 400;
line-height: 1.55;
}
.fcm-latest-compact {
display: flex;
align-items: stretch;
min-width: 0;
min-height: 94px;
overflow: hidden;
background: var(--fcm-surface-soft);
border-radius: 8px;
}
.fcm-latest-compact__image {
flex: 0 0 125px;
width: 125px;
overflow: hidden;
background: var(--fcm-border);
}
.fcm-latest-compact__image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.fcm-latest-compact__content {
display: flex;
flex: 1 1 auto;
min-width: 0;
flex-direction: column;
justify-content: space-between;
padding: 11px 13px;
}
.fcm-latest-compact__title,
.fcm-latest-horizontal__title {
margin: 0;
font-family: "Nunito", "Helvetica Neue", sans-serif;
font-size: 15px;
font-weight: 800;
line-height: 1.28;
}
.fcm-latest-compact__title a,
.fcm-latest-horizontal__title a {
color: var(--fcm-primary);
text-decoration: none;
transition: color var(--fcm-transition-fast);
}
.fcm-latest-compact__title a:hover,
.fcm-latest-horizontal__title a:hover {
color: var(--fcm-secondary);
}
.fcm-latest-meta {
margin-top: 7px;
color: var(--fcm-muted);
font-size: 10.5px;
font-weight: 400;
line-height: 1.25;
}
.fcm-latest-meta strong {
color: var(--fcm-text);
font-weight: 700;
}
.fcm-latest-horizontal {
display: flex;
align-items: stretch;
min-width: 0;
min-height: 92px;
overflow: hidden;
background: var(--fcm-surface-soft);
border-radius: 8px;
}
.fcm-latest-horizontal__image {
flex: 0 0 115px;
width: 115px;
overflow: hidden;
background: var(--fcm-border);
}
.fcm-latest-horizontal__image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.fcm-latest-horizontal__content {
display: flex;
flex: 1 1 auto;
min-width: 0;
flex-direction: column;
justify-content: space-between;
padding: 10px 12px;
}
/* =========================================================
10. PAGINATION
Pass 3B — Token Migration
========================================================= */
.fcm-latest-pagination {
margin: 24px 0 0;
text-align: center;
}
.fcm-latest-pagination ul {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
margin: 0;
padding: 0;
list-style: none;
}
.fcm-latest-pagination li {
margin: 0;
padding: 0;
}
.fcm-latest-pagination a,
.fcm-latest-pagination span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 34px;
min-height: 34px;
padding: 6px 10px;
border-radius: 6px;
box-sizing: border-box;
font-size: 13px;
font-weight: 600;
line-height: 1;
text-decoration: none;
}
.fcm-latest-pagination a {
background: var(--fcm-primary);
color: var(--fcm-light);
}
.fcm-latest-pagination a:hover {
background: var(--fcm-secondary);
color: var(--fcm-light);
}
.fcm-latest-pagination .current {
background: var(--fcm-secondary);
color: var(--fcm-light);
}
/* =========================================================
11. ARTICLE META
Pass 3D — Token Migration
========================================================= */
.entry-header {
border-bottom: none !important;
}
.entry-footer {
border-top: none !important;
}
.fcm-post-meta {
display: block !important;
width: 100%;
height: auto !important;
min-height: 0 !important;
margin: 10px 0 0 !important;
padding: 5px 12px !important;
background: var(--fcm-surface-soft);
border: 1px solid var(--fcm-border);
border-radius: 8px;
box-sizing: border-box;
text-align: center;
}
.fcm-post-meta__top,
.fcm-post-meta__bottom {
display: flex !important;
align-items: center;
justify-content: center;
flex-wrap: wrap;
width: 100%;
height: auto !important;
min-height: 0 !important;
padding: 0 !important;
box-sizing: border-box;
}
.fcm-post-meta__top {
gap: 8px;
margin: 0 !important;
line-height: 1.3;
}
.fcm-post-meta__bottom {
gap: 8px;
margin: 3px 0 0 !important;
line-height: 1.2;
}
.fcm-post-meta .byline,
.fcm-post-meta .posted-on,
.fcm-post-meta .cat-links,
.fcm-post-meta .tags-links {
display: inline-flex !important;
align-items: center;
flex-wrap: wrap;
width: auto;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
color: var(--fcm-text);
font-size: 12px;
font-weight: 700;
line-height: 1.3;
}
.fcm-post-meta__top .byline,
.fcm-post-meta__top .posted-on {
gap: 4px;
}
.fcm-post-meta__bottom .cat-links,
.fcm-post-meta__bottom .tags-links {
gap: 6px;
}
.fcm-post-meta .byline a,
.fcm-post-meta .posted-on time.entry-date {
display: inline !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
color: var(--fcm-primary);
font-size: 12px;
font-weight: 700;
line-height: inherit;
text-decoration: none;
}
.fcm-post-meta .cat-links a,
.fcm-post-meta .tags-links a {
display: inline-block !important;
margin: 0 !important;
padding: 3px 8px !important;
background: var(--fcm-secondary);
border: 1px solid var(--fcm-secondary);
border-radius: 6px;
color: var(--fcm-light);
font-size: 11.5px;
font-weight: 600;
line-height: 1.2;
text-decoration: none;
box-sizing: border-box;
transition:
background-color var(--fcm-transition-fast),
border-color var(--fcm-transition-fast);
}
.fcm-post-meta .cat-links a:hover,
.fcm-post-meta .tags-links a:hover {
background: var(--fcm-primary);
border-color: var(--fcm-primary);
color: var(--fcm-light);
}
/* =========================================================
12. POST NAVIGATION
Pass 3D — Token Migration
========================================================= */
.entry-footer .post-navigation {
display: block !important;
width: 100% !important;
margin: 24px 0 0 !important;
padding: 14px 0 0 !important;
border-top: 1px solid var(--fcm-border) !important;
box-sizing: border-box;
}
.entry-footer .post-navigation .screen-reader-text {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.entry-footer .post-navigation .nav-links {
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
gap: 14px !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box;
}
.entry-footer .post-navigation .nav-previous,
.entry-footer .post-navigation .nav-next {
display: block !important;
float: none !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
margin: 0 !important;
padding: 12px 14px !important;
background: var(--fcm-surface-soft);
border: 1px solid var(--fcm-border);
border-radius: 8px;
box-sizing: border-box;
}
.entry-footer .post-navigation .nav-previous {
text-align: left;
}
.entry-footer .post-navigation .nav-next {
text-align: right;
}
.entry-footer .post-navigation .nav-previous > a,
.entry-footer .post-navigation .nav-next > a {
display: block !important;
width: 100%;
margin: 0 !important;
padding: 0 !important;
color: var(--fcm-secondary);
font-size: 13px;
font-weight: 600;
line-height: 1.4;
text-decoration: none;
box-sizing: border-box;
}
.entry-footer .post-navigation .nav-previous > a > span,
.entry-footer .post-navigation .nav-next > a > span {
display: block !important;
margin: 0 0 5px !important;
padding: 0 !important;
color: var(--fcm-text);
font-family: "Nunito", "Helvetica Neue", sans-serif;
font-size: 11px;
font-weight: 700;
line-height: 1.3;
}
.entry-footer .post-navigation .nav-previous:hover,
.entry-footer .post-navigation .nav-next:hover {
background: var(--fcm-surface-hover);
border-color: var(--fcm-secondary);
}
.entry-footer .post-navigation .nav-previous > a:hover,
.entry-footer .post-navigation .nav-next > a:hover {
color: var(--fcm-primary);
}
/* =========================================================
13. SIDEBAR MATCH INFO
Pass 3F — Token Migration
========================================================= */
.fcm-match-info {
width: 100%;
margin: 0;
padding: 0;
background: var(--fcm-surface-soft);
border: 1px solid var(--fcm-border);
border-radius: 8px;
overflow: hidden;
box-sizing: border-box;
}
.fcm-match-info__section {
width: 100%;
margin: 0;
padding: 12px 10px;
box-sizing: border-box;
}
.fcm-match-info__section--result {
border-top: 1px solid var(--fcm-border);
}
.fcm-match-info__label {
margin: 0 0 10px;
color: var(--fcm-primary);
font-family: "Nunito", "Helvetica Neue", sans-serif;
font-size: 12px;
font-weight: 800;
line-height: 1.3;
text-align: center;
}
.fcm-match-info__teams {
display: grid;
grid-template-columns: minmax(0, 1fr) 26px minmax(0, 1fr);
align-items: center;
width: 100%;
gap: 4px;
box-sizing: border-box;
}
.fcm-match-info__team {
display: flex;
flex-direction: column;
align-items: center;
min-width: 0;
color: var(--fcm-primary);
font-size: 11px;
font-weight: 700;
line-height: 1.25;
text-align: center;
}
.fcm-match-info__crest {
display: block;
width: 38px;
height: 38px;
margin: 0 auto 5px;
object-fit: contain;
}
.fcm-match-info__versus {
color: var(--fcm-muted);
font-family: "Nunito", "Helvetica Neue", sans-serif;
font-size: 9px;
font-weight: 800;
line-height: 1;
text-align: center;
}
.fcm-match-info__competition {
margin: 8px 0 0;
color: var(--fcm-muted);
font-size: 10px;
font-weight: 500;
line-height: 1.25;
text-align: center;
}
.fcm-match-info__datetime {
margin: 2px 0 0;
color: var(--fcm-text);
font-size: 10.5px;
font-weight: 700;
line-height: 1.25;
text-align: center;
}
.fcm-match-info__result {
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
align-items: center;
width: 100%;
gap: 5px;
box-sizing: border-box;
}
.fcm-match-info__result-team {
display: flex;
flex-direction: column;
align-items: center;
min-width: 0;
color: var(--fcm-primary);
font-size: 10.5px;
font-weight: 700;
line-height: 1.25;
text-align: center;
}
.fcm-match-info__result .fcm-match-info__crest {
width: 32px;
height: 32px;
margin-bottom: 4px;
}
.fcm-match-info__score {
display: flex;
align-items: center;
justify-content: center;
gap: 3px;
min-width: 42px;
color: var(--fcm-primary);
font-family: "Nunito", "Helvetica Neue", sans-serif;
font-size: 17px;
font-weight: 800;
line-height: 1;
white-space: nowrap;
}
.fcm-match-info__score span:nth-child(2) {
color: var(--fcm-muted);
font-size: 13px;
font-weight: 600;
}
.fcm-match-info__link {
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
width: 100%;
margin: 0;
padding: 8px 10px;
background: var(--fcm-primary);
color: var(--fcm-light);
font-size: 10.5px;
font-weight: 700;
line-height: 1.25;
text-align: center;
text-decoration: none;
box-sizing: border-box;
transition:
background-color var(--fcm-transition-fast),
color var(--fcm-transition-fast);
}
.fcm-match-info__link:hover {
background: var(--fcm-secondary);
color: var(--fcm-light);
}
/* =========================================================
14. FOOTER
Pass 3E — Token Migration
========================================================= */
#footer-container {
width: 1140px !important;
max-width: 1140px !important;
margin-left: auto !important;
margin-right: auto !important;
box-sizing: border-box;
}
#footer-container .gmr-bgstripes {
display: none;
}
#footer-container #colophon {
width: 100% !important;
max-width: 100% !important;
margin: 0 auto;
padding: 0;
background: var(--fcm-primary);
border-top: 3px solid var(--fcm-secondary);
box-sizing: border-box;
}
#footer-container #colophon > .container {
width: 100%;
max-width: 1140px !important;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
}
#footer-container .site-info {
width: 100%;
max-width: 100%;
padding: 8px 20px 16px !important;
color: var(--fcm-light);
font-size: 12px;
font-weight: 500;
line-height: 1.5;
text-align: center;
box-sizing: border-box;
}
#footer-container .site-info a {
color: var(--fcm-light);
text-decoration: none;
}
#footer-container .site-info a:hover {
color: var(--fcm-secondary);
}
#footer-container .site-info .sep {
color: rgba(249, 249, 249, 0.55);
}
/* =========================================================
15. SOCIAL FOOTER
Pass 3E — Token Migration
========================================================= */
.fcm-social-footer-wrap {
width: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
}
.fcm-social-footer {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
margin: 0;
padding: 10px 20px 0;
box-sizing: border-box;
}
.fcm-social-footer__links {
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
}
.fcm-social-footer__link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 50%;
background: rgba(249, 249, 249, 0.10);
color: var(--fcm-light);
text-decoration: none;
box-sizing: border-box;
transition:
background-color var(--fcm-transition-fast),
color var(--fcm-transition-fast),
transform var(--fcm-transition-fast);
}
.fcm-social-footer__link svg {
display: block;
width: 17px;
height: 17px;
fill: currentColor;
stroke: none;
}
.fcm-social-footer__link--instagram svg {
fill: none;
stroke: currentColor;
stroke-width: 1.8;
}
.fcm-social-footer__link:hover {
background: var(--fcm-secondary);
color: var(--fcm-light);
transform: translateY(-1px);
}
.fcm-social-footer__link:focus-visible {
outline: 2px solid var(--fcm-secondary);
outline-offset: 3px;
}
/* =========================================================
16. TABLET
========================================================= */
@media (max-width: 900px) {
.fcm-featured-grid {
grid-template-rows: 155px 155px 160px;
gap: 10px;
}
.fcm-featured-card__content {
padding: 15px;
}
.fcm-featured-card__title {
font-size: 15px;
}
.fcm-featured-card--1 .fcm-featured-card__title {
font-size: 22px;
}
.fcm-section-heading h2 {
font-size: 21px;
}
.fcm-latest-grid {
gap: 11px;
}
.fcm-latest-lead__title {
font-size: 19px;
}
.fcm-latest-compact__image {
flex-basis: 105px;
width: 105px;
}
.fcm-latest-compact__title,
.fcm-latest-horizontal__title {
font-size: 14px;
}
.fcm-latest-horizontal__image {
flex-basis: 105px;
width: 105px;
}
}
/* =========================================================
17. MOBILE — GENERAL
========================================================= */
@media (max-width: 767px) {
html,
body {
width: 100%;
max-width: 100%;
overflow-x: hidden !important;
}
#site-container,
.site-container,
.container,
.gmr-content,
#content,
#content.gmr-content {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box;
}
#primary,
#secondary {
float: none !important;
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
box-sizing: border-box;
}
#primary {
margin-bottom: 24px !important;
}
#secondary {
clear: both !important;
margin-top: 24px !important;
}
.fcm-home-featured-wrap {
width: calc(100% - 20px) !important;
max-width: calc(100% - 20px) !important;
margin-left: 10px !important;
margin-right: 10px !important;
box-sizing: border-box;
}
.fcm-featured-grid {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
box-sizing: border-box;
}
.fcm-latest-news,
.fcm-latest-grid {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box;
}
#secondary .widget_block,
#secondary .fcm-popular-posts {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
box-sizing: border-box;
}
#footer-container {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
box-sizing: border-box;
}
#footer-container #colophon {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
box-sizing: border-box;
}
#footer-container #colophon > .container {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
box-sizing: border-box;
}
}
/* =========================================================
18. MOBILE — 600px
========================================================= */
@media (max-width: 600px) {
.fcm-popular-posts__thumb {
flex-basis: 90px;
width: 90px;
height: 62px;
}
.fcm-popular-posts__title {
font-size: 13px;
}
.fcm-featured-grid {
grid-template-columns: 1fr;
grid-template-rows: none;
grid-template-areas:
"hero"
"side1"
"side2"
"bottom1"
"bottom2";
gap: 10px;
}
.fcm-featured-card--1,
.fcm-featured-card--2,
.fcm-featured-card--3,
.fcm-featured-card--4,
.fcm-featured-card--5 {
min-height: 230px;
}
.fcm-featured-card__content {
padding: 14px;
}
.fcm-featured-card__title {
font-size: 16px;
}
.fcm-featured-card--1 .fcm-featured-card__title {
font-size: 21px;
}
.fcm-section-heading {
gap: 10px;
margin-bottom: 14px;
}
.fcm-section-heading h2 {
font-size: 19px;
}
.fcm-section-heading span {
height: 2px;
}
.fcm-latest-grid {
grid-template-columns: 1fr;
gap: 10px;
}
.fcm-latest-lead {
grid-column: auto;
grid-row: auto;
}
.fcm-latest-lead__title {
font-size: 19px;
}
.fcm-latest-compact,
.fcm-latest-horizontal {
min-height: 88px;
}
.fcm-latest-compact__image,
.fcm-latest-horizontal__image {
flex-basis: 100px;
width: 100px;
}
.fcm-post-meta {
margin-top: 9px !important;
padding: 5px 9px !important;
}
.fcm-post-meta__top {
gap: 6px;
}
.fcm-post-meta__bottom {
gap: 6px;
margin-top: 3px !important;
}
.fcm-post-meta__bottom .cat-links,
.fcm-post-meta__bottom .tags-links {
gap: 5px;
}
.fcm-post-meta .byline,
.fcm-post-meta .posted-on,
.fcm-post-meta .cat-links,
.fcm-post-meta .tags-links {
font-size: 11px;
}
.fcm-post-meta .byline a,
.fcm-post-meta .posted-on time.entry-date {
font-size: 11px;
}
.fcm-post-meta .cat-links a,
.fcm-post-meta .tags-links a {
padding: 3px 7px !important;
font-size: 10.5px;
}
.entry-footer .post-navigation {
margin-top: 20px !important;
padding-top: 12px !important;
}
.entry-footer .post-navigation .nav-links {
grid-template-columns: 1fr !important;
gap: 9px !important;
}
.entry-footer .post-navigation .nav-previous,
.entry-footer .post-navigation .nav-next {
width: 100% !important;
padding: 11px 12px !important;
text-align: left;
}
.entry-footer .post-navigation .nav-previous > a,
.entry-footer .post-navigation .nav-next > a {
font-size: 12px;
}
.fcm-match-info__section {
padding: 12px 10px;
}
.fcm-match-info__crest {
width: 34px;
height: 34px;
}
.fcm-match-info__result .fcm-match-info__crest {
width: 30px;
height: 30px;
}
.fcm-match-info__team {
font-size: 10.5px;
}
.fcm-match-info__result-team {
font-size: 10px;
}
#footer-container .site-info {
padding-top: 8px !important;
padding-bottom: 16px !important;
}
.fcm-social-footer {
padding-top: 8px;
}
.fcm-social-footer__links {
gap: 8px;
}
.fcm-social-footer__link {
width: 32px;
height: 32px;
}
.fcm-social-footer__link svg {
width: 16px;
height: 16px;
}
}
/* =========================================================
19. MOBILE — 449px
========================================================= */
@media (max-width: 449px) {
.fcm-featured-card--1,
.fcm-featured-card--2,
.fcm-featured-card--3,
.fcm-featured-card--4,
.fcm-featured-card--5 {
min-height: 215px;
}
.fcm-featured-card--1 .fcm-featured-card__title {
font-size: 19px;
}
.fcm-featured-card__title {
font-size: 15px;
}
.fcm-featured-card__meta {
font-size: 10px;
}
.fcm-latest-lead__content {
padding: 13px 14px 14px;
}
.fcm-latest-lead__title {
font-size: 18px;
}
.fcm-latest-lead__excerpt {
font-size: 12.5px;
}
.fcm-latest-compact__image,
.fcm-latest-horizontal__image {
flex-basis: 90px;
width: 90px;
}
.fcm-latest-compact__content,
.fcm-latest-horizontal__content {
padding: 9px 10px;
}
.fcm-latest-compact__title,
.fcm-latest-horizontal__title {
font-size: 13px;
}
.fcm-latest-meta {
font-size: 10px;
}
}
/* =========================================================
FCM — ACCESSIBILITY / REDUCED MOTION
Consolidated from table-system local overrides.
========================================================= */
@media (prefers-reduced-motion: reduce) {
.rmfc-stat-icon::before,
.rmfc-stat-icon::after,
.rmfc-table--transfer *,
.rmfc-table--transfer *::before,
.rmfc-table--transfer *::after,
.rmfc-table--standings,
.rmfc-table--standings *,
.rmfc-table--salary *,
.rmfc-table--salary *::before,
.rmfc-table--salary *::after,
.rmfc-table--squad tbody td:first-child a,
.rmfc-table--leadership tbody td:first-child a {
transition: none !important;
animation: none !important;
}
.rmfc-table--standings,
.rmfc-table--standings * {
scroll-behavior: auto !important;
}
}
/* =========================================================
FCM — Article Share
========================================================= */
.article-share-buttons {
width: 100%;
margin: 0 0 18px;
}
.article-share-buttons .a2a_kit {
width: 100%;
display: flex !important;
align-items: stretch;
gap: 0;
line-height: 22px !important;
}
.article-share-buttons .a2a_kit > a {
flex: 1 1 0;
min-width: 0;
margin: 0 !important;
text-align: center;
}
.article-share-buttons .a2a_kit .a2a_svg {
margin: 0 auto;
}
.article-share-buttons .a2a_kit .a2a_label {
display: none;
}
@media (max-width: 600px) {
.article-share-buttons {
margin-bottom: 16px;
}
.article-share-buttons .a2a_kit > a {
min-height: 32px;
}
} |