@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap'); /* ═══════════════════════════════════════════════════════════════ TRANSPARENCIA TOTAL — style.css Sistema de diseño unificado para las 3 vistas: index, partido, político USO DE COLORES POR PARTIDO: Cada página de partido o político debe incluir en su : Los colores oficiales son: PP #1D4ED8 (azul) PSOE #DC2626 (rojo) VOX #65A30D (verde) Podemos #7C3AED (morado) Junts #F5A623 (naranja) Casa Real #6B7280 (gris) ═══════════════════════════════════════════════════════════════ */ /* ─── IMPORTS ─── */ @import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap'); /* ─── RESET ─── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } /* ─── TOKENS: MODO OSCURO (por defecto) ─── */ :root { /* Color de partido — se sobreescribe por página */ --party: #888888; --party-dim: #88888820; --party-mid: #88888550; /* Fondo */ --bg: #0c0c0e; --bg-card: #141416; --bg-card2: #1a1a1e; --bg-hover: #202026; --bg-header: #0f0f12; /* Bordes */ --border: #2a2a30; --border-hi: #3a3a42; /* Texto */ --text: #e4e4e8; --text-2: #9090a0; --text-3: #606070; --text-inv: #ffffff; /* Acento destructivo (dinero) */ --red: #ff4a4a; --red-dim: #ff4a4a20; --yellow: #f59e0b; --green: #22c55e; /* Tipografía */ --font-display: 'Inter', sans-serif; --font-body: 'DM Sans', sans-serif; /* Espacios */ --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 18px; /* Transición global */ --trans: 0.2s ease; } /* ─── TOKENS: MODO CLARO ─── */ html.light { --bg: #f4f3ef; --bg-card: #ffffff; --bg-card2: #ebe9e3; --bg-hover: #e4e2dc; --bg-header: #eeecea; --border: #d8d6d0; --border-hi: #c8c6c0; --text: #1a1a20; --text-2: #525260; --text-3: #909098; --text-inv: #ffffff; --red: #cc1010; --red-dim: #cc101015; --yellow: #b45309; } /* ─── BASE ─── */ body { font-family: var(--font-body); background: var(--bg); color: var(--text); line-height: 1.65; min-height: 100vh; transition: background var(--trans), color var(--trans); } /* ─── LAYOUT ─── */ .container { max-width: 860px; margin: 0 auto; padding: 0 20px; } .container-lg { max-width: 960px; margin: 0 auto; padding: 0 20px; } .container-sm { max-width: 680px; margin: 0 auto; padding: 0 20px; } /* ─── TIPOGRAFÍA ─── */ h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.2; } .tt-site-name { font-family: var(--font-display); font-weight: 800; font-size: 0.85rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-3); text-decoration: none; } .tt-site-name:hover { color: var(--text-2); } /* ─── TOPBAR (todas las páginas excepto index) ─── */ .tt-topbar { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--border); background: var(--bg-header); position: sticky; top: 0; z-index: 100; backdrop-filter: blur(12px); } .tt-topbar-left { display: flex; align-items: center; gap: 18px; } .tt-back { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); text-decoration: none; font-size: 0.88rem; font-weight: 500; transition: color var(--trans); } .tt-back:hover { color: var(--text); } .tt-back::before { content: '←'; } /* ─── THEME TOGGLE ─── */ .tt-theme-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg-card2); color: var(--text-2); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1rem; transition: all var(--trans); flex-shrink: 0; } .tt-theme-btn:hover { border-color: var(--border-hi); color: var(--text); background: var(--bg-hover); } /* ─── NAV PARTIDO (breadcrumb en página de político) ─── */ .tt-party-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 20px; background: var(--party-dim); border: 1px solid var(--party-mid); color: var(--party); font-size: 0.82rem; font-weight: 600; text-decoration: none; transition: all var(--trans); } .tt-party-pill:hover { background: var(--party-mid); } /* ─── ═══ COMPONENTES INDEX ═══ ─── */ /* Hero total */ .tt-hero { text-align: center; padding: 60px 20px 40px; } .tt-hero-title { font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; color: var(--text); letter-spacing: -0.03em; } .tt-hero-sub { color: var(--text-2); font-size: 1rem; max-width: 580px; margin: 12px auto 0; line-height: 1.7; } .tt-hero-quote { font-size: 0.88rem; color: var(--text-3); font-style: italic; margin-top: 10px; } /* Badge total dinero */ .tt-total-badge { display: inline-block; margin-top: 28px; padding: 20px 36px; border-radius: var(--r-xl); background: linear-gradient(135deg, var(--bg-card2), var(--bg-card)); border: 1px solid var(--border); position: relative; overflow: hidden; } .tt-total-badge::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, #1D4ED815, #DC262615); pointer-events: none; } .tt-total-num { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 2.8rem); font-weight: 400; color: var(--red); display: block; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; } .tt-total-sub { font-size: 0.83rem; color: var(--text-3); margin-top: 4px; } /* Sección título */ .tt-section-title { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; color: var(--text); margin: 40px 0 16px; display: flex; align-items: center; gap: 10px; } .tt-section-title::after { content: ''; flex: 1; height: 1px; background: var(--border); } /* Grid TOP 5 */ .tt-top5 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 580px) { .tt-top5 { grid-template-columns: 1fr; } } /* Card TOP 5 */ .tt-pol-card { display: grid; grid-template-columns: 30px 1fr; grid-template-rows: auto auto auto auto; gap: 3px 10px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 14px 16px; text-decoration: none; color: inherit; transition: background var(--trans), border-color var(--trans), transform var(--trans); position: relative; overflow: hidden; } .tt-pol-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--party, #555); opacity: 0.7; transition: opacity var(--trans); } .tt-pol-card:hover { background: var(--bg-hover); border-color: var(--border-hi); transform: translateY(-1px); } .tt-pol-card:hover::before { opacity: 1; } .tt-pol-rank { grid-row: 1 / 3; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 1.2rem; font-weight: 800; color: var(--text-3); } .tt-pol-name { font-family: var(--font-display); font-size: 0.95rem; font-weight: 700; align-self: end; color: var(--text); } .tt-pol-tag { font-size: 0.74rem; color: var(--text-3); grid-column: 2; } .tt-pol-amount { grid-column: 1 / -1; font-family: var(--font-display); font-size: 1.35rem; font-weight: 500; color: var(--red); text-align: right; margin-top: 4px; font-variant-numeric: tabular-nums; } .tt-pol-case { grid-column: 1 / -1; font-size: 0.75rem; color: var(--text-3); } /* Cards partidos (podium) */ .tt-party-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin-top: 4px; } .tt-party-card { display: flex; flex-direction: column; gap: 6px; padding: 18px 16px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); text-decoration: none; color: inherit; transition: background var(--trans), border-color var(--trans), transform var(--trans); position: relative; } .tt-party-card:hover { background: var(--bg-hover); border-color: var(--border-hi); transform: translateY(-2px); } .tt-party-name { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; color: var(--text); } .tt-party-total { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; font-variant-numeric: tabular-nums; } .tt-party-count { font-size: 0.75rem; color: var(--text-3); } .tt-party-bar { height: 3px; background: var(--border); border-radius: 2px; margin-top: 4px; overflow: hidden; } .tt-party-bar-fill { height: 100%; border-radius: 2px; transition: width 0.6s ease; } /* ─── ═══ COMPONENTES PÁGINA PARTIDO ═══ ─── */ /* Header partido */ .tt-party-header { padding: 48px 20px 36px; text-align: center; border-bottom: 1px solid var(--border); background: linear-gradient(180deg, var(--party-dim) 0%, transparent 100%); position: relative; } .tt-party-header::before { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 60px; height: 3px; background: var(--party); border-radius: 2px; } .tt-party-logo { font-size: 2.8rem; margin-bottom: 10px; } .tt-party-header-name { font-family: var(--font-display); font-size: clamp(1.8rem, 4vw, 2.4rem); font-weight: 800; color: var(--text); letter-spacing: -0.03em; } .tt-party-header-total { font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2rem); font-weight: 800; color: var(--party); margin: 10px 0 6px; } .tt-party-header-count { font-size: 0.85rem; color: var(--text-3); } /* Lista miembros */ .tt-member-list { display: flex; flex-direction: column; gap: 8px; padding: 24px 0 40px; } .tt-member-row { display: grid; grid-template-columns: 32px 1fr 1fr 100px; grid-template-rows: auto auto; gap: 4px 10px; align-items: center; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px 16px; text-decoration: none; color: inherit; transition: background var(--trans), border-color var(--trans); position: relative; overflow: hidden; } .tt-member-row::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--party); opacity: 0; transition: opacity var(--trans); } .tt-member-row:hover { background: var(--bg-hover); border-color: var(--border-hi); } .tt-member-row:hover::before { opacity: 1; } .tt-member-rank { font-family: var(--font-display); font-size: 0.85rem; font-weight: 700; color: var(--text-3); text-align: center; grid-row: 1 / 3; } .tt-member-name { font-weight: 600; font-size: 0.95rem; color: var(--text); } .tt-member-title { font-size: 0.75rem; color: var(--text-3); grid-column: 2; } .tt-member-amount { font-family: var(--font-display); font-weight: 500; font-size: 1rem; color: var(--party); text-align: right; grid-row: 1; font-variant-numeric: tabular-nums; } .tt-member-case { font-size: 0.74rem; color: var(--text-3); grid-column: 2 / 4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tt-member-bar-wrap { grid-column: 1 / -1; height: 2px; background: var(--border); border-radius: 1px; overflow: hidden; margin-top: 2px; } .tt-member-bar { height: 100%; background: var(--party); border-radius: 1px; opacity: 0.7; } @media (max-width: 580px) { .tt-member-row { grid-template-columns: 28px 1fr 80px; } } /* ─── ═══ COMPONENTES PÁGINA POLÍTICO ═══ ─── */ /* Hero político */ .tt-pol-hero { padding: 40px 20px 32px; text-align: center; background: linear-gradient(180deg, var(--party-dim) 0%, transparent 100%); position: relative; } .tt-pol-hero::before { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 48px; height: 3px; background: var(--party); border-radius: 2px; } .tt-pol-hero-name { font-family: var(--font-display); font-size: clamp(1.8rem, 4vw, 2.4rem); font-weight: 800; color: var(--text); letter-spacing: -0.03em; } .tt-pol-hero-title { font-size: 0.9rem; color: var(--text-2); margin: 6px 0 16px; } .tt-pol-hero-amount { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 2.8rem); font-weight: 400; color: var(--text); letter-spacing: 0.02em; margin: 12px 0; font-variant-numeric: tabular-nums; } .tt-status-badge { display: inline-block; padding: 5px 16px; border-radius: 20px; font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; background: rgba(0,0,0,0.25); border: 1px solid var(--party-mid); color: var(--yellow); margin-top: 8px; } html.light .tt-status-badge { background: var(--bg-card2); color: var(--yellow); } /* Sección con borde de partido */ .tt-section { margin: 32px 0; } .tt-section-h { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; color: var(--text); margin-bottom: 16px; padding-bottom: 10px; border-bottom: 2px solid var(--party); display: flex; align-items: center; gap: 10px; } .tt-section-h3 { font-family: var(--font-display); font-size: 1rem; font-weight: 600; color: var(--party); margin: 20px 0 10px; } /* Card genérica */ .tt-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 22px; margin-bottom: 14px; } .tt-card-title { font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--party); margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); } /* Tabla */ .tt-table-wrap { overflow-x: auto; margin: 12px 0; } table { width: 100%; border-collapse: collapse; font-size: 0.9rem; } th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--border); } th { font-family: var(--font-display); font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--party); background: var(--bg-card2); } tr:hover td { background: var(--bg-hover); } .tt-total-row td { font-weight: 700; color: var(--party); border-top: 2px solid var(--party-mid); } /* Total box */ .tt-total-box { background: var(--party-dim); border: 1px solid var(--party-mid); border-radius: var(--r-lg); padding: 22px; margin: 14px 0; text-align: center; } .tt-total-box .label { font-size: 0.85rem; color: var(--text-2); } .tt-total-box .value { font-family: var(--font-display); font-size: 2rem; font-weight: 800; color: var(--party); margin: 6px 0 4px; } .tt-total-box .sub { font-size: 0.8rem; color: var(--text-3); } /* Cifras clave grid */ .tt-kf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; margin: 12px 0; } .tt-kf-item { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md); padding: 14px 12px; text-align: center; } .tt-kf-label { font-size: 0.75rem; color: var(--text-3); margin-bottom: 6px; line-height: 1.3; } .tt-kf-value { font-family: var(--font-display); font-size: 1.2rem; font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums; } .tt-kf-value.party { color: var(--party); } .tt-kf-value.red { color: var(--red); } /* ─── KEY FIGURES GRID (mazon_dana) ─── */ .key-figures-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; } @media (max-width: 580px) { .key-figures-grid { grid-template-columns: 1fr 1fr; } } .key-figure { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md); padding: 14px; text-align: center; } .kf-label { font-size: 0.75rem; color: var(--text-3); margin-bottom: 6px; line-height: 1.3; } .kf-value { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; color: var(--text); } .kf-value.blue { color: var(--blue, #3B82F6); } /* Blockquote */ blockquote { background: var(--bg-card2); border-left: 3px solid var(--party); border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: 12px 16px; margin: 12px 0; color: var(--text-2); font-style: italic; font-size: 0.9rem; } /* Cronología */ .tt-chrono { list-style: none; padding: 0; margin: 0; } .tt-chrono-item { display: flex; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--border); } .tt-chrono-item:last-child { border-bottom: none; } .tt-chrono-date { font-family: var(--font-display); font-weight: 600; color: var(--yellow); font-size: 0.82rem; min-width: 100px; padding-top: 2px; } .tt-chrono-event { color: var(--text-2); font-size: 0.88rem; line-height: 1.5; flex: 1; } /* Fuentes */ .tt-sources { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 20px; margin-top: 8px; } .tt-sources a { display: block; color: var(--party); text-decoration: none; padding: 7px 0; font-size: 0.88rem; border-bottom: 1px solid var(--border); transition: color var(--trans); } .tt-sources a:last-child { border-bottom: none; } .tt-sources a:hover { color: var(--text); text-decoration: underline; } /* Disclaimer */ .tt-disclaimer { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md); padding: 14px 18px; font-size: 0.82rem; color: var(--text-3); margin: 16px 0; line-height: 1.6; } /* Botón volver */ .tt-btn-back { display: inline-flex; align-items: center; gap: 8px; background: var(--party-dim); border: 1px solid var(--party-mid); color: var(--party); padding: 10px 22px; border-radius: var(--r-md); text-decoration: none; font-weight: 600; font-size: 0.9rem; transition: all var(--trans); } .tt-btn-back:hover { background: var(--party-mid); color: var(--text); } .tt-btn-back::before { content: '←'; } /* ─── COLORES DE IMPORTE ─── */ .amt-red { color: var(--red) !important; font-weight: 600; } .amt-party { color: var(--party) !important; font-weight: 600; } .amt-warn { color: var(--yellow) !important; font-weight: 600; } .highlight { color: var(--party); font-weight: 600; } /* ─── REFRESH STATE ─── */ #refresh-state { font-size: 0.75rem; color: var(--text-3); margin-top: 6px; } /* ─── FOOTER ─── */ .tt-footer { border-top: 1px solid var(--border); padding: 28px 20px; margin-top: 40px; text-align: center; font-size: 0.82rem; color: var(--text-3); } .tt-footer a { color: var(--text-2); text-decoration: none; } .tt-footer a:hover { color: var(--text); } /* ─── UTILIDADES ─── */ .text-center { text-align: center; } .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mb-2 { margin-bottom: 16px; } ul, ol { padding-left: 20px; margin: 8px 0; } li { margin: 4px 0; } strong { font-weight: 700; } /* ─── ANIMACIÓN DE ENTRADA ─── */ @keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .fade-up { animation: fadeUp 0.4s ease both; } .fade-up-1 { animation-delay: 0.05s; } .fade-up-2 { animation-delay: 0.10s; } .fade-up-3 { animation-delay: 0.15s; } .fade-up-4 { animation-delay: 0.20s; } .fade-up-5 { animation-delay: 0.25s; } /* ─── NAVEGACION INTERNA (SECCIONES) ─── */ .tt-section-nav { padding: 18px 0; margin-top: 32px; margin-bottom: 28px; border-top: 1px solid var(--border); border-bottom: 2px solid var(--party-mid); background: linear-gradient(90deg, var(--party-dim) 0%, transparent 50%, var(--party-dim) 100%); } .tt-section-nav .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; } .tt-section-nav a { display: inline-block; padding: 7px 18px; border-radius: 20px; background: var(--party-dim); color: var(--party); font-size: 0.82rem; font-weight: 600; text-decoration: none; transition: all 0.2s; border: 1px solid var(--party-mid); } .tt-section-nav a:hover { background: var(--party); color: #fff; border-color: var(--party); } .tt-section-nav a:active { transform: scale(0.96); } /* ─── EMPTY STATE ─── */ .tt-empty { text-align: center; padding: 30px; color: var(--text-3); font-size: 0.9rem; } /* ═══════════════════════════════════════════ MEJORAS VISUALES INDEX (2026-05-23) ═══════════════════════════════════════════ */ /* Tagline destacada en rojo */ .tt-hero-tagline { font-size: 1.05rem; font-weight: 600; color: var(--red); margin-top: 16px; line-height: 1.5; max-width: 500px; margin-left: auto; margin-right: auto; } /* Total badge más impactante */ .tt-total-badge { display: inline-block; margin-top: 32px; padding: 24px 44px; border-radius: 20px; background: linear-gradient(135deg, var(--bg-card2), var(--bg-card)); border: 1px solid var(--border); position: relative; overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,0.3); } html.light .tt-total-badge { box-shadow: 0 8px 32px rgba(0,0,0,0.08); } .tt-total-badge::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, #1D4ED815, #DC262615); pointer-events: none; } .tt-total-badge::after { content: ''; position: absolute; inset: -1px; border-radius: 20px; background: linear-gradient(135deg, #1D4ED840, #DC262640); z-index: -1; opacity: 0.3; } .tt-total-num { font-family: var(--font-display); font-size: clamp(2.2rem, 6vw, 3.2rem); font-weight: 400; color: var(--red); display: block; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; text-shadow: 0 0 40px rgba(255,74,74,0.15); } .tt-total-sub { font-size: 0.85rem; color: var(--text-3); margin-top: 6px; letter-spacing: 0.05em; } /* Refresh state más discreto */ #refresh-state { font-size: 0.72rem; color: var(--text-3); margin-top: 6px; opacity: 0.7; } /* Cartas Top 5 con medallas */ .tt-pol-card { display: grid; grid-template-columns: 36px 1fr; grid-template-rows: auto auto auto auto; gap: 3px 10px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 14px 16px; text-decoration: none; color: inherit; transition: background var(--trans), border-color var(--trans), transform var(--trans), box-shadow var(--trans); position: relative; overflow: hidden; } .tt-pol-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--party, #555); opacity: 0.7; transition: opacity var(--trans); } .tt-pol-card:hover { background: var(--bg-hover); border-color: var(--border-hi); transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,0.2); } .tt-pol-card:hover::before { opacity: 1; } .tt-pol-rank { grid-row: 1 / 3; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 1.3rem; font-weight: 800; color: var(--text-3); } /* Medallas para top 3 */ .tt-pol-card:nth-child(1) .tt-pol-rank::before { content: '🥇'; font-size: 1.4rem; } .tt-pol-card:nth-child(2) .tt-pol-rank::before { content: '🥈'; font-size: 1.4rem; } .tt-pol-card:nth-child(3) .tt-pol-rank::before { content: '🥉'; font-size: 1.4rem; } /* Ocultar el número cuando se muestra medalla */ .tt-pol-card:nth-child(-n+3) .tt-pol-rank { font-size: 0; } .tt-pol-name { font-family: var(--font-display); font-size: 0.95rem; font-weight: 700; align-self: end; color: var(--text); } .tt-pol-tag { font-size: 0.74rem; color: var(--text-3); grid-column: 2; } .tt-pol-amount { grid-column: 1 / -1; font-family: var(--font-display); font-size: 1.35rem; font-weight: 500; color: var(--red); text-align: right; margin-top: 4px; font-variant-numeric: tabular-nums; } .tt-pol-case { grid-column: 1 / -1; font-size: 0.75rem; color: var(--text-3); } /* KO-FI */ .tt-kofi { text-align: center; padding: 2rem 1rem; } .tt-kofi-text { margin: 0 0 0.75rem 0; font-size: 0.95rem; opacity: 0.8; } .tt-kofi-btn { display: inline-block; padding: 0.6rem 1.8rem; background: #333; color: #fff; text-decoration: none; border-radius: 6px; font-size: 0.95rem; transition: background 0.2s; } .tt-kofi-btn:hover { background: #555; } .light .tt-kofi-btn { background: #555; color: #fff; } .light .tt-kofi-btn:hover { background: #333; } /* KO-FI button */ .tt-btn-kofi { display: inline-block; padding: 0.6rem 1.8rem; margin-left: 0.75rem; background: #333; color: #fff; text-decoration: none; border-radius: 6px; font-size: 0.95rem; transition: background 0.2s; } .tt-btn-kofi:hover { background: #555; } .light .tt-btn-kofi { background: #555; color: #fff; } .light .tt-btn-kofi:hover { background: #333; }