.mr30-rate-widget {
--mr30-primary: #00133b;
--mr30-secondary: #1e293b;
--mr30-accent: #004ef8;
--mr30-surface: #f5f7fb;
--mr30-text: #1e293b;
--mr30-font: Inter, sans-serif;
font-family: var(--mr30-font);
color: var(--mr30-text);
}
.mr30-rate-widget[data-color-mode="inherit"] {
--mr30-primary: var(--wp--preset--color--primary, #00133b);
--mr30-secondary: var(--wp--preset--color--secondary, #1e293b);
--mr30-accent: var(--wp--preset--color--accent, #004ef8);
--mr30-surface: var(--wp--preset--color--base, #f5f7fb);
--mr30-text: inherit;
--mr30-font: inherit;
}
.mr30-rate-grid,
.mr30-period-grid,
.mr30-summary-grid {
display: grid;
gap: 20px;
}
.mr30-rate-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mr30-period-grid {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.mr30-summary-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.mr30-insights-stack {
display: grid;
gap: 20px;
}
.mr30-card {
border: 1px solid rgba(15, 23, 42, 0.08);
border-radius: 24px;
padding: 28px;
box-shadow: 0 18px 42px rgba(15, 23, 42, 0.06);
}
.mr30-card--primary,
.mr30-card--hero {
background: linear-gradient(145deg, var(--mr30-primary) 0%, #0f2a63 100%);
color: #fff;
min-height: 360px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.mr30-card--secondary,
.mr30-card--weekly,
.mr30-card--fallback,
.mr30-period-item,
.mr30-stat-chip,
.mr30-market-metric {
background: var(--mr30-surface);
}
.mr30-card-top {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.mr30-eyebrow {
margin: 0 0 10px;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.78);
}
.mr30-eyebrow--dark {
color: rgba(30, 41, 59, 0.62);
}
.mr30-sub-label {
margin: 0;
font-size: 1rem;
font-weight: 600;
color: rgba(255, 255, 255, 0.92);
}
.mr30-rate-value {
margin: 18px 0 6px;
font-size: clamp(3.2rem, 5vw, 4.8rem);
font-weight: 800;
letter-spacing: -0.05em;
line-height: 1;
color: #fff;
}
.mr30-rate-value--hero {
font-size: clamp(3.5rem, 6vw, 5.3rem);
}
.mr30-market-status-wrap {
margin: 0;
}
.mr30-market-pill {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 30px;
padding: 0 12px;
border-radius: 999px;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
background: rgba(255,255,255,0.12);
color: #fff;
border: 1px solid rgba(255,255,255,0.18);
}
.mr30-market-pill--open {
background: rgba(16, 185, 129, 0.18);
border-color: rgba(16, 185, 129, 0.28);
color: #d1fae5;
}
.mr30-market-pill--closed {
background: rgba(239, 68, 68, 0.18);
border-color: rgba(239, 68, 68, 0.28);
color: #fee2e2;
}
.mr30-card-footer {
margin-top: auto;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 14px;
padding-top: 28px;
}
.mr30-disclaimer {
margin: 0;
font-size: 0.82rem;
line-height: 1.55;
color: rgba(255, 255, 255, 0.7);
max-width: 52ch;
}
.mr30-card-heading {
margin: 0;
line-height: 1.15;
}
.mr30-card-heading--dark {
font-size: clamp(1.35rem, 2vw, 1.85rem);
color: var(--mr30-secondary);
}
.mr30-card-copy {
margin: 12px 0 0;
font-size: 0.98rem;
line-height: 1.6;
color: rgba(30, 41, 59, 0.78);
}
.mr30-card-copy--tight {
margin-top: 6px;
}
.mr30-market-metrics {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
margin-top: 22px;
}
.mr30-market-metric,
.mr30-period-item,
.mr30-stat-chip {
border: 1px solid rgba(15, 23, 42, 0.08);
border-radius: 18px;
padding: 16px 18px;
}
.mr30-market-metric {
display: flex;
flex-direction: column;
gap: 8px;
min-height: 104px;
justify-content: center;
}
.mr30-market-metric--full {
grid-column: 1 / -1;
min-height: 92px;
}
.mr30-market-metric-label,
.mr30-period-label,
.mr30-stat-chip-label,
.mr30-weekly-table th {
font-size: 0.88rem;
font-weight: 600;
color: rgba(30, 41, 59, 0.6);
}
.mr30-market-metric-value,
.mr30-period-value,
.mr30-stat-chip-value,
.mr30-weekly-table td {
font-weight: 700;
color: var(--mr30-secondary);
}
.mr30-market-metric-value {
font-size: 1.12rem;
}
.mr30-period-item,
.mr30-stat-chip {
display: flex;
flex-direction: column;
gap: 10px;
}
.mr30-weekly-heading {
margin-bottom: 20px;
}
.mr30-weekly-table-wrap {
padding-top: 8px;
border: 1px solid rgba(15, 23, 42, 0.08);
border-radius: 22px;
overflow: hidden;
background: #fff;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.mr30-weekly-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
}
.mr30-weekly-table thead th {
padding: 18px 22px;
text-align: left;
background: var(--mr30-primary);
color: #fff;
font-size: 0.86rem;
font-weight: 700;
letter-spacing: 0.02em;
}
.mr30-weekly-table thead th:first-child {
border-top-left-radius: 22px;
}
.mr30-weekly-table thead th:last-child {
border-top-right-radius: 22px;
}
.mr30-weekly-table tbody td {
padding: 20px 22px;
text-align: left;
border-bottom: 1px solid rgba(15, 23, 42, 0.08);
background: #fff;
}
.mr30-weekly-table tbody tr:last-child td {
border-bottom: 0;
}
.mr30-weekly-day {
font-size: 1rem;
font-weight: 700;
color: var(--mr30-secondary);
}
.mr30-weekly-value {
font-size: 1rem;
font-weight: 700;
color: var(--mr30-secondary);
}
.mr30-hero-cta {
margin: 0;
}
.mr30-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 46px;
padding: 0 18px;
border-radius: 999px;
background: #fff;
color: var(--mr30-primary);
font-weight: 700;
text-decoration: none;
}
.mr30-mode-market .mr30-move-up { color: #12824a; }
.mr30-mode-market .mr30-move-down { color: #c24130; }
.mr30-mode-consumer .mr30-move-up { color: #c24130; }
.mr30-mode-consumer .mr30-move-down { color: #12824a; }
.mr30-mode-neutral .mr30-move-up,
.mr30-mode-neutral .mr30-move-down,
.mr30-mode-neutral .mr30-move-flat,
.mr30-mode-market .mr30-move-flat,
.mr30-mode-consumer .mr30-move-flat { color: var(--mr30-accent); }
@media (max-width: 980px) {
.mr30-rate-grid,
.mr30-period-grid,
.mr30-summary-grid,
.mr30-market-metrics {
grid-template-columns: 1fr;
}
}