/** * CP Fund Calculator — Styles * NovaTools Hub | cp-fund-calculator.css * Full light/dark mode support via Tailwind dark: class on */ /* ─── Hero ─────────────────────────────────────────────────────────────────── */ .cpf-hero { position: relative; overflow: hidden; background: linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%); border-bottom: 1px solid #e0e7ff; padding: 4rem 0 3.5rem; text-align: center; } .dark .cpf-hero { background: linear-gradient(180deg, #0f172a 0%, #1e1b4b 100%); border-bottom-color: #312e81; } .cpf-hero__glow { position: absolute; top: -50%; left: 50%; transform: translateX(-50%); width: 600px; height: 400px; background: radial-gradient(ellipse, rgba(99,102,241,0.15) 0%, transparent 70%); pointer-events: none; z-index: 0; } .dark .cpf-hero__glow { background: radial-gradient(ellipse, rgba(129,140,248,0.12) 0%, transparent 70%); } .cpf-hero__inner { position: relative; z-index: 1; max-width: 740px; margin: 0 auto; padding: 0 1rem; } .cpf-hero__badge { display: inline-flex; align-items: center; gap: 0.5rem; background: #eef2ff; border: 1px solid #c7d2fe; border-radius: 9999px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; padding: 0.4rem 1rem; margin-bottom: 1.25rem; text-transform: uppercase; color: #4338ca; animation: cpfHeroFadeDown 0.4s ease-out both; } .dark .cpf-hero__badge { background: rgba(99,102,241,0.15); border-color: rgba(129,140,248,0.3); color: #a5b4fc; } .cpf-hero__badge-dot { width: 7px; height: 7px; border-radius: 50%; background: #10b981; box-shadow: 0 0 6px rgba(16,185,129,0.5); animation: cpfDotPulse 2s ease-in-out infinite; } .dark .cpf-hero__badge-dot { background: #34d399; box-shadow: 0 0 8px rgba(52,211,153,0.5); } @keyframes cpfDotPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.8); } } .cpf-hero__title { font-size: clamp(2.25rem, 5vw, 3.5rem); font-weight: 800; line-height: 1.1; margin: 0 0 1rem; letter-spacing: -0.025em; background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #6366f1 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: cpfHeroFadeUp 0.5s ease-out 0.1s both; } .dark .cpf-hero__title { background: linear-gradient(135deg, #818cf8 0%, #a78bfa 50%, #c4b5fd 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .cpf-hero__subtitle { font-size: 1.05rem; color: #475569; margin: 0 0 1.5rem; line-height: 1.65; max-width: 580px; margin-left: auto; margin-right: auto; animation: cpfHeroFadeUp 0.5s ease-out 0.2s both; } .dark .cpf-hero__subtitle { color: #94a3b8; } .cpf-hero__features { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem 1.25rem; animation: cpfHeroFadeUp 0.5s ease-out 0.35s both; } .cpf-hero__feature { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.82rem; color: #334155; font-weight: 500; } .dark .cpf-hero__feature { color: #cbd5e1; } .cpf-hero__feature-check { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: #ecfdf5; color: #059669; flex-shrink: 0; } .dark .cpf-hero__feature-check { background: rgba(5,150,105,0.15); color: #34d399; } @keyframes cpfHeroFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } @keyframes cpfHeroFadeDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } /* ─── Layout ────────────────────────────────────────────────────────────────── */ .cpf-layout { display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: start; min-width: 0; } @media (min-width: 1024px) { .cpf-layout { grid-template-columns: 440px 1fr; } } /* ─── Panels ────────────────────────────────────────────────────────────────── */ .cpf-panel { background: #fff; border: 1px solid #e2e8f0; border-radius: 1rem; padding: 1.75rem; box-shadow: 0 4px 24px rgba(79,70,229,0.07); transition: box-shadow 0.2s; min-width: 0; } .dark .cpf-panel { background: #1e293b; border-color: #334155; box-shadow: 0 4px 24px rgba(0,0,0,0.3); } .cpf-panel:hover { box-shadow: 0 8px 36px rgba(79,70,229,0.11); } .dark .cpf-panel:hover { box-shadow: 0 8px 36px rgba(0,0,0,0.4); } .cpf-panel__title { font-size: 1.3rem; font-weight: 700; color: #0f172a; margin: 0 0 1.25rem; } .dark .cpf-panel__title { color: #f1f5f9; } /* ─── Form ──────────────────────────────────────────────────────────────────── */ .cpf-form { display: flex; flex-direction: column; gap: 1.1rem; } .cpf-fieldset { border: 1px solid #e2e8f0; border-radius: 0.75rem; padding: 0 1rem 1rem; background: #f8fafc; display: flex; flex-direction: column; gap: 1.1rem; } .dark .cpf-fieldset { border-color: #334155; background: #0f172a; } .cpf-fieldset__legend { font-size: 0.72rem; font-weight: 700; color: #4f46e5; text-transform: uppercase; letter-spacing: 0.08em; padding: 0.3rem 0.85rem; background: #fff; border: 1px solid #e2e8f0; border-radius: 9999px; margin-bottom: 0.2rem; margin-left: -0.25rem; } .dark .cpf-fieldset__legend { color: #818cf8; background: #1e293b; border-color: #334155; } .cpf-field { display: flex; flex-direction: column; gap: 0.4rem; } .cpf-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; min-width: 0; } .cpf-field-row > .cpf-field { min-width: 0; } .cpf-field-row--dates { gap: 1rem; } .cpf-field-row--rates .cpf-label { align-items: flex-start; min-height: 2.2rem; } @media (max-width: 640px) { .cpf-field-row { grid-template-columns: 1fr; } } .cpf-label { font-size: 0.85rem; font-weight: 600; color: #374151; display: flex; align-items: center; gap: 0.35rem; } .dark .cpf-label { color: #cbd5e1; } .cpf-input, .cpf-select { width: 100%; min-height: 2.9rem; padding: 0.65rem 0.875rem; border: 1.5px solid #cbd5e1; border-radius: 0.5rem; font-size: 0.9rem; color: #1e293b; background: #f8fafc; transition: border-color 0.18s, box-shadow 0.18s; outline: none; appearance: none; } .dark .cpf-input, .dark .cpf-select { background: #0f172a; border-color: #475569; color: #f1f5f9; } .cpf-input:focus, .cpf-select:focus { border-color: #4f46e5; box-shadow: 0 0 0 3px rgba(79,70,229,0.15); } .dark .cpf-input:focus, .dark .cpf-select:focus { border-color: #818cf8; box-shadow: 0 0 0 3px rgba(129,140,248,0.2); } .cpf-input-group { position: relative; } .cpf-input-prefix { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: #6b7280; font-size: 0.9rem; pointer-events: none; } .dark .cpf-input-prefix { color: #94a3b8; } .cpf-input--prefixed { padding-left: 2rem; } .cpf-field-hint { font-size: 0.78rem; color: #334155; background: #f0f4ff; border-radius: 0.375rem; padding: 0.35rem 0.6rem; border-left: 3px solid #4f46e5; } .dark .cpf-field-hint { background: #1e2d4a; color: #cbd5e1; border-left-color: #818cf8; } .cpf-flash { animation: cpfHighlight 0.6s ease-out; } @keyframes cpfHighlight { 0% { background-color: #c7d2fe; color: #1e1b4b; transform: scale(1.01); } 100% { background-color: #f0f4ff; color: #334155; transform: scale(1); } } .dark .cpf-flash { animation: cpfHighlightDark 0.6s ease-out; } @keyframes cpfHighlightDark { 0% { background-color: #3730a3; color: #e0e7ff; transform: scale(1.01); } 100% { background-color: #1e2d4a; color: #cbd5e1; transform: scale(1); } } .cpf-field-error { font-size: 0.78rem; color: #dc2626; } .dark .cpf-field-error { color: #f87171; } /* Checkbox */ .cpf-field--checkbox { flex-direction: row; align-items: center; } .cpf-checkbox-label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.875rem; color: #374151; } .dark .cpf-checkbox-label { color: #cbd5e1; } .cpf-checkbox { width: 1rem; height: 1rem; accent-color: #4f46e5; } /* ─── Advanced collapsible ───────────────────────────────────────────────────── */ .cpf-advanced { border: 1.5px solid #e2e8f0; border-radius: 0.625rem; overflow: hidden; } .dark .cpf-advanced { border-color: #334155; } .cpf-advanced__toggle { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; cursor: pointer; font-size: 0.875rem; font-weight: 600; color: #4f46e5; background: #f5f3ff; user-select: none; list-style: none; } .dark .cpf-advanced__toggle { background: #1e2040; color: #818cf8; } .cpf-advanced__toggle::-webkit-details-marker { display: none; } .cpf-advanced__chevron { transition: transform 0.2s; } details[open] .cpf-advanced__chevron { transform: rotate(180deg); } .cpf-advanced__body { padding: 1rem; display: flex; flex-direction: column; gap: 1rem; background: #fafafa; border-top: 1px solid #e2e8f0; } .dark .cpf-advanced__body { background: #131c2e; border-top-color: #334155; } /* ─── Slider ─────────────────────────────────────────────────────────────────── */ .cpf-slider-wrap { display: flex; flex-direction: column; gap: 0.3rem; } .cpf-slider { -webkit-appearance: none; width: 100%; height: 6px; border-radius: 9999px; background: linear-gradient(to right, #4f46e5, #7c3aed); outline: none; cursor: pointer; } .cpf-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid #4f46e5; box-shadow: 0 1px 4px rgba(0,0,0,0.2); transition: border-color 0.2s; } .cpf-slider::-webkit-slider-thumb:hover { border-color: #7c3aed; } .cpf-slider-labels { display: flex; justify-content: space-between; font-size: 0.72rem; color: #6b7280; } .dark .cpf-slider-labels { color: #94a3b8; } .cpf-slider-value { font-weight: 600; color: #4f46e5; } .dark .cpf-slider-value { color: #818cf8; } /* ─── CTA Row ────────────────────────────────────────────────────────────────── */ .cpf-cta-row { display: flex; gap: 0.75rem; padding-top: 0.5rem; } /* ─── Buttons ────────────────────────────────────────────────────────────────── */ .cpf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.7rem 1.25rem; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 600; cursor: pointer; transition: all 0.2s; border: none; text-decoration: none; } .cpf-btn--primary { background: linear-gradient(135deg, #4f46e5, #7c3aed); color: #fff; flex: 1; box-shadow: 0 4px 14px rgba(79,70,229,0.3); } .cpf-btn--primary:hover { box-shadow: 0 6px 20px rgba(79,70,229,0.45); transform: translateY(-1px); } .cpf-btn--outline { background: transparent; border: 1.5px solid #cbd5e1; color: #374151; padding: 0.7rem 1.1rem; } .dark .cpf-btn--outline { border-color: #475569; color: #cbd5e1; } .cpf-btn--outline:hover { border-color: #4f46e5; color: #4f46e5; background: #f0f4ff; } .dark .cpf-btn--outline:hover { background: #1e2040; } .cpf-btn--secondary { background: #f8fafc; border: 1.5px solid #e2e8f0; color: #374151; font-size: 0.82rem; } .dark .cpf-btn--secondary { background: #1e293b; border-color: #334155; color: #cbd5e1; } .cpf-btn--secondary:hover { background: #f0f4ff; border-color: #4f46e5; color: #4f46e5; } .dark .cpf-btn--secondary:hover { background: #1e2040; } /* ─── Spinner ────────────────────────────────────────────────────────────────── */ .cpf-spinner { width: 14px; height: 14px; border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff; border-radius: 50%; animation: cpfSpin 0.7s linear infinite; display: inline-block; } .cpf-spinner.hidden { display: none; } @keyframes cpfSpin { to { transform: rotate(360deg); } } /* ─── Empty State ────────────────────────────────────────────────────────────── */ .cpf-empty { text-align: center; padding: 3rem 1rem; color: #64748b; } .dark .cpf-empty { color: #94a3b8; } .cpf-empty__icon { font-size: 3rem; margin-bottom: 1rem; opacity: 0.4; } /* ─── Metric Cards ───────────────────────────────────────────────────────────── */ .cpf-metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; margin-bottom: 1.25rem; min-width: 0; } @media (max-width: 420px) { .cpf-metrics { grid-template-columns: 1fr; } } @media (min-width: 640px) { .cpf-metrics { grid-template-columns: repeat(4, 1fr); } } .cpf-metric { border-radius: 0.875rem; padding: 1.1rem 1rem; border: 1px solid transparent; position: relative; overflow: hidden; transition: transform 0.2s, box-shadow 0.2s; display: flex; flex-direction: column; min-height: 150px; } .cpf-metric:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.1); } .cpf-metric__icon { font-size: 1.5rem; margin-bottom: 0.6rem; line-height: 1; } .cpf-metric__label { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.7; margin-bottom: auto; line-height: 1.4; } .cpf-metric__value { font-size: 1.2rem; font-weight: 800; line-height: 1.2; margin-top: 0.4rem; } .cpf-metric__sub { font-size: 0.7rem; opacity: 0.6; margin-top: 0.25rem; } .cpf-metric--emerald { background: linear-gradient(135deg, #d1fae5, #a7f3d0); color: #065f46; border-color: #6ee7b7; } .dark .cpf-metric--emerald { background: linear-gradient(135deg, #064e3b, #065f46); color: #6ee7b7; border-color: #047857; } .cpf-metric--purple { background: linear-gradient(135deg, #ede9fe, #ddd6fe); color: #5b21b6; border-color: #c4b5fd; } .dark .cpf-metric--purple { background: linear-gradient(135deg, #3b1f6b, #4c1d95); color: #c4b5fd; border-color: #7c3aed; } .cpf-metric--indigo { background: linear-gradient(135deg, #e0e7ff, #c7d2fe); color: #3730a3; border-color: #a5b4fc; } .dark .cpf-metric--indigo { background: linear-gradient(135deg, #1e2040, #1e1b4b); color: #a5b4fc; border-color: #4f46e5; } .cpf-metric--featured { box-shadow: 0 4px 16px rgba(79,70,229,0.2); } .cpf-metric--amber { background: linear-gradient(135deg, #fef3c7, #fde68a); color: #78350f; border-color: #fcd34d; } .dark .cpf-metric--amber { background: linear-gradient(135deg, #4b2a07, #78350f); color: #fcd34d; border-color: #d97706; } /* ─── Annuity Card ───────────────────────────────────────────────────────────── */ .cpf-annuity-card { background: linear-gradient(135deg, #4f46e5, #7c3aed); border-radius: 1rem; margin-bottom: 1.25rem; color: #fff; box-shadow: 0 8px 32px rgba(79,70,229,0.35); min-width: 0; } .cpf-annuity-card__inner { padding: 1.75rem; display: flex; flex-direction: column; gap: 1.25rem; } .cpf-annuity-card__title { font-size: 1.05rem; font-weight: 700; } .cpf-annuity-card__subtitle { font-size: 0.78rem; opacity: 0.8; margin-top: 0.2rem; } .cpf-annuity-card__amount { font-size: 2.2rem; font-weight: 900; line-height: 1; } .cpf-annuity-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; border-top: 1px solid rgba(255,255,255,0.2); padding-top: 1rem; } @media (max-width: 480px) { .cpf-annuity-stats { grid-template-columns: 1fr 1fr; } } .cpf-annuity-stat__label { font-size: 0.72rem; opacity: 0.7; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.3rem; } .cpf-annuity-stat__value { font-size: 0.95rem; font-weight: 700; } /* ─── Tax Panel ──────────────────────────────────────────────────────────────── */ .cpf-tax-panel { background: #fff7ed; border: 1.5px solid #fbbf24; border-radius: 0.875rem; margin-bottom: 1.25rem; overflow: hidden; } .dark .cpf-tax-panel { background: #3a2107; border-color: #d97706; } .cpf-tax-panel__banner { padding: 0.75rem 1rem; background: #fef3c7; font-size: 0.83rem; color: #78350f; border-bottom: 1px solid #fbbf24; } .dark .cpf-tax-panel__banner { background: #451a03; color: #fde68a; border-color: #d97706; } .cpf-tax-grid { padding: 1rem; display: flex; flex-direction: column; gap: 0.6rem; } .cpf-tax-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.875rem; color: #374151; padding: 0.4rem 0; border-bottom: 1px solid #fde68a; } .dark .cpf-tax-row { color: #cbd5e1; border-bottom-color: #4b2a07; } .cpf-tax-row:last-child { border-bottom: none; } .cpf-tax-row--excess { color: #dc2626; font-weight: 600; } .dark .cpf-tax-row--excess { color: #f87171; } .cpf-tax-row--net { color: #059669; font-weight: 700; font-size: 0.95rem; } .dark .cpf-tax-row--net { color: #34d399; } .cpf-tax-note { font-size: 0.75rem; color: #6b7280; padding-top: 0.4rem; } .dark .cpf-tax-note { color: #94a3b8; } /* ─── Compare Panel ──────────────────────────────────────────────────────────── */ .cpf-compare-panel { background: #fff; border: 1.5px solid #e2e8f0; border-radius: 0.875rem; margin-bottom: 1.25rem; overflow: hidden; padding: 1.25rem; } .dark .cpf-compare-panel { background: #1e293b; border-color: #334155; } .cpf-section-title { font-size: 1rem; font-weight: 700; margin: 0 0 0.875rem; color: #0f172a; } .dark .cpf-section-title { color: #f1f5f9; } .cpf-compare-header, .cpf-compare-row { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 0.5rem; font-size: 0.8rem; padding: 0.5rem 0; border-bottom: 1px solid #f1f5f9; align-items: center; } .dark .cpf-compare-header, .dark .cpf-compare-row { border-color: #1e293b; } .cpf-compare-header { font-weight: 700; color: #475569; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; } .dark .cpf-compare-header { color: #94a3b8; } .cpf-compare-col { text-align: right; } .cpf-compare-metric { color: #374151; font-size: 0.8rem; } .dark .cpf-compare-metric { color: #cbd5e1; } .cpf-compare-delta { text-align: right; font-weight: 700; } .cpf-compare-delta--pos { color: #059669; } .dark .cpf-compare-delta--pos { color: #34d399; } .cpf-compare-delta--neg { color: #dc2626; } .dark .cpf-compare-delta--neg { color: #f87171; } /* ─── Card ───────────────────────────────────────────────────────────────────── */ .cpf-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 0.875rem; padding: 1.25rem; margin-bottom: 1.25rem; } .dark .cpf-card { background: #1e293b; border-color: #334155; } .cpf-card__title { font-size: 1rem; font-weight: 700; color: #0f172a; margin: 0 0 0.5rem; } .dark .cpf-card__title { color: #f1f5f9; } .cpf-card__note { margin: 0 0 0.85rem; color: #64748b; font-size: 0.82rem; line-height: 1.5; } .dark .cpf-card__note { color: #94a3b8; } /* ─── Chart ──────────────────────────────────────────────────────────────────── */ .cpf-chart-wrap { position: relative; height: 280px; width: 100%; overflow: hidden; } /* ─── Table ──────────────────────────────────────────────────────────────────── */ .cpf-table-wrap { overflow-x: auto; max-height: 360px; overflow-y: auto; border-radius: 0.65rem; border: 1px solid #e2e8f0; background: #fff; -webkit-overflow-scrolling: touch; } .dark .cpf-table-wrap { background: #0f172a; border-color: #334155; } /* Custom Mac-style scrollbar */ .cpf-table-wrap::-webkit-scrollbar { width: 6px; height: 6px; } .cpf-table-wrap::-webkit-scrollbar-track { background: transparent; margin: 0.5rem; } .cpf-table-wrap::-webkit-scrollbar-thumb { background: rgba(100, 116, 139, 0.25); border-radius: 10px; } .cpf-table-wrap:hover::-webkit-scrollbar-thumb { background: rgba(100, 116, 139, 0.5); } .dark .cpf-table-wrap::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.2); } .dark .cpf-table-wrap:hover::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.4); } .cpf-table { min-width: 1040px; width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: 0.875rem; font-variant-numeric: tabular-nums; } .cpf-table__head th { position: sticky; top: 0; z-index: 2; background: #f8fafc; padding: 0.85rem 1rem; text-align: right; font-weight: 700; color: #1e293b; line-height: 1.3; border-bottom: 2px solid #e2e8f0; box-shadow: inset 0 -1px 0 #e2e8f0; } .dark .cpf-table__head th { background: #1e293b; color: #f1f5f9; border-bottom-color: #334155; box-shadow: inset 0 -1px 0 #334155; } .cpf-table__head th:first-child { left: 0; z-index: 3; text-align: left; width: 5.5rem; } .cpf-table__head th:nth-child(2) { width: 4.5rem; text-align: center; } .cpf-table__head th:nth-child(n+3) { width: 10.5rem; } .cpf-table td { padding: 0.75rem 1rem; text-align: right; color: #334155; border-bottom: 1px solid #f1f5f9; white-space: nowrap; vertical-align: middle; } .cpf-table td:nth-child(2) { text-align: center; } .dark .cpf-table td { color: #cbd5e1; border-bottom-color: #1e293b; } .cpf-table th:last-child, .cpf-table td:last-child { padding-right: 1.5rem; } .cpf-table td:first-child { position: sticky; left: 0; z-index: 1; text-align: left; font-weight: 600; } .cpf-table__row--even, .cpf-table__row--even td:first-child { background: #fafafa; } .cpf-table__row--odd, .cpf-table__row--odd td:first-child { background: #ffffff; } .dark .cpf-table__row--even, .dark .cpf-table__row--even td:first-child { background: #0f172a; } .dark .cpf-table__row--odd, .dark .cpf-table__row--odd td:first-child { background: #1e293b; } .cpf-table tbody tr:hover, .cpf-table tbody tr:hover td:first-child { background: #f0fdf4; } .dark .cpf-table tbody tr:hover, .dark .cpf-table tbody tr:hover td:first-child { background: #1e2040; } .cpf-table__small { color: #64748b; font-weight: 500; } .dark .cpf-table__small { color: #94a3b8; } .cpf-table__amount { font-weight: 500; letter-spacing: -0.01em; } .cpf-table__marker { display: inline-flex; align-items: center; justify-content: center; width: 1rem; height: 1rem; margin-left: 0.25rem; border-radius: 999px; background: #dcfce7; color: #15803d; font-family: inherit; font-size: 0.68rem; font-weight: 800; vertical-align: 0.05rem; } .dark .cpf-table__marker { background: rgba(34,197,94,0.16); color: #86efac; } .cpf-table__fund { color: #4338ca; font-weight: 700; font-size: 0.95rem; } .dark .cpf-table__fund { color: #818cf8; } /* ─── Action Buttons Row ─────────────────────────────────────────────────────── */ .cpf-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1.25rem; } /* ─── Info Box ───────────────────────────────────────────────────────────────── */ .cpf-info-box { background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 0.75rem; padding: 1.1rem 1.25rem; font-size: 0.82rem; color: #1e40af; line-height: 1.6; } .dark .cpf-info-box { background: rgba(30,64,175,0.12); border-color: #1d4ed8; color: #93c5fd; } .cpf-info-box h4 { font-weight: 700; margin: 0 0 0.5rem; font-size: 0.9rem; } .cpf-info-box p { margin: 0.3rem 0; } .cpf-info-box code { background: rgba(79,70,229,0.1); border-radius: 0.25rem; padding: 0.1em 0.4em; font-size: 0.85em; } .dark .cpf-info-box code { background: rgba(129,140,248,0.15); } .cpf-info-box__sources { margin-top: 0.75rem; padding-top: 0.6rem; border-top: 1px solid #bfdbfe; font-size: 0.78rem; } .dark .cpf-info-box__sources { border-color: #1d4ed8; } .cpf-info-box a { color: #2563eb; text-decoration: underline; } .dark .cpf-info-box a { color: #60a5fa; } /* ─── Tooltips ───────────────────────────────────────────────────────────────── */ .cpf-tooltip-trigger { cursor: help; color: #6b7280; font-size: 0.8em; vertical-align: middle; } .dark .cpf-tooltip-trigger { color: #94a3b8; } .cpf-tooltip { display: none; position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: #1e293b; color: #f1f5f9; font-size: 0.72rem; padding: 0.5rem 0.75rem; border-radius: 0.375rem; width: 220px; text-align: left; pointer-events: none; z-index: 50; line-height: 1.4; box-shadow: 0 4px 12px rgba(0,0,0,0.2); } .cpf-tooltip--visible { display: block; } /* ─── Utility ────────────────────────────────────────────────────────────────── */