/* InvesteHub global design foundation. */ /* Fontes (Inter, JetBrains Mono, Space Grotesk) sao carregadas via no de cada pagina, com preconnect + display=swap. Nao usar @import aqui: um @import no topo do CSS bloqueia a renderizacao ate ser descoberto e buscado em serie, atrasando o LCP em toda pagina que carrega este arquivo. */ /* Fontes de fallback com metricas ajustadas (size-adjust/ascent/descent) para aproximar a caixa do texto da fonte de fallback local da fonte real (Inter), reduzindo o layout shift (CLS) quando a webfont termina de carregar e troca via font-display: swap. Valores de metrica publicos conhecidos para Inter. */ @font-face { font-family: "Inter Fallback"; src: local("Arial"); ascent-override: 90.44%; descent-override: 22.52%; line-gap-override: 0%; size-adjust: 107.12%; } *, *::before, *::after { box-sizing: border-box; } :root { --bg: #f8fafc; --card: #ffffff; --card-2: #f1f5f9; --surface: var(--card); --surface-soft: var(--card-2); --surface-strong: #ecfdf5; --text: #0f172a; --muted: #64748b; --line: rgba(15, 23, 42, .08); --line-2: rgba(15, 23, 42, .13); --green: #0f9f76; --green-2: #0d8b68; --green-dark: var(--green-2); --green-soft: rgba(15, 159, 118, .10); --blue: #2563eb; --blue-soft: rgba(37, 99, 235, .10); --warning: #9a6a14; --warning-soft: rgba(154, 106, 20, .12); --danger: #c94860; --danger-soft: rgba(201, 72, 96, .10); --shadow: 0 18px 48px -28px rgba(15, 23, 42, .22); --shadow-soft: 0 4px 20px rgba(0, 0, 0, .05); --shadow-lift: 0 18px 42px -26px rgba(15, 23, 42, .26); --glass: rgba(255, 255, 255, .82); --glass-strong: rgba(255, 255, 255, .94); --overlay: rgba(11, 15, 25, .64); --radius: 16px; --radius-sm: 12px; --max: 1240px; --max-wide: 1320px; --tool-content-max: 1240px; --tool-panel-radius: 16px; --tool-card-min-height: 220px; --font-body: Inter, "Inter Fallback", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-numeric: "JetBrains Mono", "Space Grotesk", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } body.dark { --bg: #0b0f17; --card: #111827; --card-2: #1f2937; --surface: var(--card); --surface-soft: var(--card-2); --surface-strong: #064e3b; --text: #e2e8f0; --muted: #94a3b8; --line: rgba(226, 232, 240, .08); --line-2: rgba(226, 232, 240, .14); --green: #10b981; --green-2: #34d399; --green-dark: var(--green); --green-soft: rgba(16, 185, 129, .14); --blue: #60a5fa; --blue-soft: rgba(96, 165, 250, .13); --warning: #ffd27a; --warning-soft: rgba(255, 210, 122, .12); --danger: #ff7d96; --danger-soft: rgba(255, 125, 150, .12); --shadow: none; --shadow-soft: inset 0 1px 0 rgba(255, 255, 255, .04); --shadow-lift: inset 0 1px 0 rgba(255, 255, 255, .06), 0 18px 44px -34px rgba(0, 0, 0, .86); --glass: rgba(17, 24, 39, .78); --glass-strong: rgba(17, 24, 39, .94); --overlay: rgba(2, 6, 23, .78); } html { scroll-behavior: smooth; } body { min-height: 100vh; color: var(--text); background: radial-gradient(circle at top left, rgba(15, 159, 118, .13), transparent 28%), radial-gradient(circle at top right, rgba(15, 159, 118, .07), transparent 34%), var(--bg); font-family: var(--font-body); } body.theme-changing, body.theme-changing * { transition: background-color .35s ease, background .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease, filter .35s ease !important; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; } button { cursor: pointer; -webkit-tap-highlight-color: transparent; } img, svg, canvas { max-width: 100%; } .container { width: 100%; max-width: var(--max-wide); margin-left: auto; margin-right: auto; } main { min-width: 0; } .section, .tool-shell, .article-shell, .panel, .content-panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--glass); box-shadow: var(--shadow-soft); backdrop-filter: blur(14px); } .primary-btn, .secondary-btn, .danger-btn, .ghost-btn, .footer-btn, .tool-card a, .content-link, .resource-card a, .directory-actions a, .inline-links a, .home-note-links a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 16px; border-radius: 999px; border: 1px solid transparent; font-weight: 850; line-height: 1.15; text-align: center; text-decoration: none; transition: transform .3s cubic-bezier(.4, 0, .2, 1), border-color .3s cubic-bezier(.4, 0, .2, 1), background .3s cubic-bezier(.4, 0, .2, 1), color .3s cubic-bezier(.4, 0, .2, 1), box-shadow .3s cubic-bezier(.4, 0, .2, 1); } .primary-btn, .tool-card a, .content-link { background: var(--green); color: #fff; box-shadow: 0 10px 24px -14px color-mix(in srgb, var(--green) 72%, #000); } .primary-btn:hover, .tool-card a:hover, .content-link:hover { background: var(--green-2); } .secondary-btn, .ghost-btn, .footer-btn, .resource-card a, .directory-actions a, .inline-links a, .home-note-links a { border-color: var(--line); background: var(--card); color: var(--text); } .secondary-btn:hover, .ghost-btn:hover, .footer-btn:hover, .resource-card a:hover, .directory-actions a:hover, .inline-links a:hover, .home-note-links a:hover { border-color: color-mix(in srgb, var(--green) 34%, var(--line)); } .danger-btn { background: color-mix(in srgb, var(--danger) 12%, var(--card)); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 28%, var(--line)); } .primary-btn:hover, .secondary-btn:hover, .danger-btn:hover, .ghost-btn:hover, .footer-btn:hover, .feature-main:hover, .resource-card:hover, .content-card:hover, .directory-card:hover, .mobile-item:hover { transform: translateY(-2px); } .primary-btn:active, .secondary-btn:active, .danger-btn:active, .ghost-btn:active, .footer-btn:active, .tool-card a:active, .resource-card a:active, .mobile-item:active { transform: translateY(0) scale(.98); } .primary-btn:focus-visible, .secondary-btn:focus-visible, .danger-btn:focus-visible, .ghost-btn:focus-visible, .footer-btn:focus-visible, .mobile-menu-btn:focus-visible, .theme-btn:focus-visible, .close-btn:focus-visible, .mobile-item:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid color-mix(in srgb, var(--green) 42%, transparent); outline-offset: 3px; } .tool-card, .feature-main, .resource-card, .content-card, .directory-card, .metric-card, .result-card, .example-card, .scenario-card, .form-panel, .summary-tile, .about-card, .side-card, .principle-card, .transparency-card, .responsibility-item, .seo-method-card, .seo-support-card, .editorial-deep-card, .editorial-value-card, .faq-item { min-width: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--glass); box-shadow: var(--shadow-soft); backdrop-filter: blur(14px); transition: transform .3s cubic-bezier(.4, 0, .2, 1), border-color .3s cubic-bezier(.4, 0, .2, 1), box-shadow .3s cubic-bezier(.4, 0, .2, 1), background .3s cubic-bezier(.4, 0, .2, 1); } .tool-card:hover, .feature-main:hover, .resource-card:hover, .content-card:hover, .directory-card:hover, .metric-card:hover, .result-card:hover, .example-card:hover, .scenario-card:hover, .form-panel:hover, .summary-tile:hover, .about-card:hover, .side-card:hover, .principle-card:hover, .transparency-card:hover, .responsibility-item:hover, .seo-method-card:hover, .seo-support-card:hover, .editorial-deep-card:hover, .editorial-value-card:hover, .faq-item:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--green) 28%, var(--line)); box-shadow: var(--shadow-lift); } body.dark .tool-card:hover, body.dark .feature-main:hover, body.dark .resource-card:hover, body.dark .content-card:hover, body.dark .directory-card:hover, body.dark .metric-card:hover, body.dark .result-card:hover, body.dark .example-card:hover, body.dark .scenario-card:hover, body.dark .form-panel:hover, body.dark .summary-tile:hover, body.dark .about-card:hover, body.dark .side-card:hover, body.dark .principle-card:hover, body.dark .transparency-card:hover, body.dark .responsibility-item:hover, body.dark .seo-method-card:hover, body.dark .seo-support-card:hover, body.dark .editorial-deep-card:hover, body.dark .editorial-value-card:hover, body.dark .faq-item:hover { border-color: rgba(255, 255, 255, .075); box-shadow: var(--shadow-lift); } body.dark .section, body.dark .tool-shell, body.dark .article-shell, body.dark .panel, body.dark .content-panel, body.dark .tool-card, body.dark .feature-main, body.dark .resource-card, body.dark .content-card, body.dark .directory-card, body.dark .metric-card, body.dark .result-card, body.dark .example-card, body.dark .scenario-card, body.dark .form-panel, body.dark .summary-tile, body.dark .about-card, body.dark .side-card, body.dark .principle-card, body.dark .transparency-card, body.dark .responsibility-item, body.dark .seo-method-card, body.dark .seo-support-card, body.dark .editorial-deep-card, body.dark .editorial-value-card, body.dark .faq-item { border-color: rgba(255, 255, 255, .055); background: var(--glass); box-shadow: var(--shadow-soft); } .mini-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: var(--green-soft); color: var(--green); font-size: .82rem; font-weight: 950; flex: 0 0 auto; box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 34%, transparent); transition: background .3s cubic-bezier(.4, 0, .2, 1), color .3s cubic-bezier(.4, 0, .2, 1), transform .3s cubic-bezier(.4, 0, .2, 1), box-shadow .3s cubic-bezier(.4, 0, .2, 1); } .mini-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; } .mini-icon[data-icon-ready="true"] { font-size: 0; } .tool-card:hover .mini-icon, .example-card:hover .mini-icon, .metric-card:hover .mini-icon, .resource-card:hover .mini-icon, .content-card:hover .mini-icon, .mobile-item:hover .mini-icon { transform: scale(1.06); background: color-mix(in srgb, var(--green) 18%, var(--green-soft)); } h1, .metric-card strong, .example-card strong, .scenario-card strong, .result-card strong, .summary-tile strong, .total-value, .result-value, .chart-value, .portfolio-total, #previewTotal, #totalQuantity, #totalInvested, #averagePrice, #assetCount, #lowestInvestment, #bestMonthlyYield, #targetIncomeSummary, #finalAmount, #totalContributed, #totalInterest, #totalReturn, #portfolioTotal, #targetTotal, #largestAdjustment, #balanceLabel { font-family: var(--font-numeric); font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.01em; } input, select, textarea { min-width: 0; color: var(--text); } input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--muted) 78%, transparent); } .site-footer { color: var(--muted); } .footer-actions { display: flex; flex-wrap: wrap; gap: 10px; } .back-to-top { position: fixed; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); z-index: 90; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; max-width: calc(100vw - 32px); padding: 10px 15px; border: 1px solid color-mix(in srgb, var(--green) 34%, var(--line)); border-radius: 999px; background: color-mix(in srgb, var(--green) 92%, #0f172a); color: #fff; box-shadow: 0 18px 42px -20px color-mix(in srgb, var(--green) 72%, #000); font-weight: 900; line-height: 1; opacity: 0; pointer-events: none; transform: translateY(12px) scale(.98); visibility: hidden; transition: opacity .25s cubic-bezier(.4, 0, .2, 1), transform .25s cubic-bezier(.4, 0, .2, 1), visibility .25s cubic-bezier(.4, 0, .2, 1), border-color .25s cubic-bezier(.4, 0, .2, 1), background .25s cubic-bezier(.4, 0, .2, 1), box-shadow .25s cubic-bezier(.4, 0, .2, 1); } .back-to-top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); visibility: visible; } .back-to-top:hover { background: var(--green-2); box-shadow: var(--shadow-lift); transform: translateY(-3px) scale(1.02); } .back-to-top:active { transform: translateY(0) scale(.96); } .back-to-top:focus-visible { outline: 3px solid color-mix(in srgb, var(--green) 42%, transparent); outline-offset: 3px; } .back-to-top-icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 999px; background: rgba(255, 255, 255, .18); font-size: 1rem; line-height: 1; } .back-to-top-label { white-space: nowrap; } body.dark .back-to-top { border-color: rgba(255, 255, 255, .075); background: color-mix(in srgb, var(--green) 82%, var(--card)); box-shadow: var(--shadow-lift); } body.tool-focus-page .hero { display: block !important; grid-template-columns: 1fr !important; gap: 0 !important; width: min(100%, 980px) !important; max-width: 980px !important; margin: 0 auto 12px !important; padding: clamp(10px, 1.8vw, 18px) 10px clamp(8px, 1.3vw, 12px) !important; text-align: center !important; min-height: 0 !important; } body.tool-focus-page main { margin-top: 12px !important; } body.tool-focus-page .hero h1 { max-width: 780px !important; margin: 0 auto 8px !important; font-size: clamp(1.95rem, 3.35vw, 3.15rem) !important; line-height: 1.03 !important; letter-spacing: -.045em !important; } body.tool-focus-page .hero p { display: -webkit-box !important; max-width: 780px !important; margin: 0 auto !important; overflow: hidden !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; font-size: clamp(.9rem, 1.2vw, 1rem) !important; line-height: 1.5 !important; } body.tool-focus-page .hero .eyebrow, body.tool-focus-page .hero > .eyebrow { margin-bottom: 8px !important; } body.tool-focus-page .hero-actions { display: none !important; } body.tool-focus-page .hero-panel { display: none !important; } body.tool-focus-page .calculator, body.tool-focus-page .simulator, body.tool-focus-page .rebalance-panel, body.tool-focus-page .tool-shell { margin-top: 10px !important; margin-bottom: 14px !important; scroll-margin-top: 92px !important; } main :where(section[id], article[id], .editorial-section[id], .article-section[id]) { scroll-margin-top: 112px; } body.tool-focus-page .tool-learning-hub { width: 100%; max-width: var(--tool-content-max, 1240px); margin: 14px auto 16px; display: grid; gap: 10px; } body.tool-focus-page .tool-learning-disclosure { border: 1px solid var(--line); border-radius: 18px; background: var(--card); box-shadow: var(--shadow-soft); overflow: hidden; } body.tool-focus-page .tool-learning-disclosure summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 58px; padding: 14px 16px; color: var(--text); cursor: pointer; list-style: none; transition: background .2s ease, color .2s ease; } body.tool-focus-page .tool-learning-disclosure summary::-webkit-details-marker { display: none; } body.tool-focus-page .tool-learning-arrow { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 32px; width: 32px; height: 32px; border-radius: 999px; background: var(--green-soft); transition: transform .22s cubic-bezier(.4, 0, .2, 1), background .22s ease; } body.tool-focus-page .tool-learning-arrow::before { content: ""; width: 9px; height: 9px; border-right: 3px solid var(--green); border-bottom: 3px solid var(--green); border-radius: 2px; transform: translateY(-2px) rotate(45deg); transition: transform .22s cubic-bezier(.4, 0, .2, 1); } body.tool-focus-page .tool-learning-disclosure[open] summary { border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--green-soft) 58%, var(--card)); } body.tool-focus-page .tool-learning-disclosure[open] .tool-learning-arrow { background: color-mix(in srgb, var(--green) 18%, var(--green-soft)); } body.tool-focus-page .tool-learning-disclosure[open] .tool-learning-arrow::before { transform: translateY(2px) rotate(225deg); } body.tool-focus-page .tool-learning-disclosure strong { display: block; font-size: 1rem; letter-spacing: -.02em; } body.tool-focus-page .tool-learning-disclosure small { display: block; margin-top: 3px; color: var(--muted); font-size: .84rem; line-height: 1.35; } body.tool-focus-page .tool-learning-content { padding: 14px 16px 16px; } body.tool-focus-page .tool-learning-content > section { max-width: none !important; margin: 0 0 12px !important; box-shadow: none !important; } body.tool-focus-page .tool-learning-content > section:last-child { margin-bottom: 0 !important; } body.tool-focus-page .tool-learning-content .content-section, body.tool-focus-page .tool-learning-content .editorial-section, body.tool-focus-page .tool-learning-content .seo-support-section, body.tool-focus-page .tool-learning-content .editorial-deep-section, body.tool-focus-page .tool-learning-content .editorial-value-section, body.tool-focus-page .tool-learning-content .read-more-section, body.tool-focus-page .tool-learning-content .solutions-section, body.tool-focus-page .tool-learning-content .tools-section, body.tool-focus-page .tool-learning-content .faq-section, body.tool-focus-page .tool-learning-content .section { padding: 16px !important; border-radius: 18px !important; } body.tool-focus-page .tool-learning-content h2 { font-size: clamp(1.08rem, 1.7vw, 1.45rem) !important; line-height: 1.15 !important; } body.tool-focus-page .tool-learning-content p { font-size: .92rem !important; line-height: 1.6 !important; } body.tool-focus-page .tool-learning-content .thin-grid, body.tool-focus-page .tool-learning-content .info-grid, body.tool-focus-page .tool-learning-content .seo-support-grid, body.tool-focus-page .tool-learning-content .editorial-deep-grid, body.tool-focus-page .tool-learning-content .editorial-value-grid, body.tool-focus-page .tool-learning-content .tools-grid, body.tool-focus-page .tool-learning-content .solutions-grid, body.tool-focus-page .tool-learning-content .content-grid, body.tool-focus-page .tool-learning-content .faq-grid { gap: 10px !important; } body.editorial-focus-page main { margin-top: 12px !important; } body.editorial-focus-page .hero { width: min(100%, 1120px) !important; max-width: 1120px !important; min-height: 0 !important; margin: 0 auto 14px !important; padding: 28px 18px 24px !important; align-items: center !important; } body.editorial-focus-page .hero h1 { max-width: 860px !important; margin-bottom: 10px !important; font-size: 2.85rem !important; line-height: 1.04 !important; letter-spacing: 0 !important; } body.editorial-focus-page .hero p { display: -webkit-box !important; max-width: 780px !important; overflow: hidden !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 3 !important; font-size: 1rem !important; line-height: 1.55 !important; } body.editorial-focus-page .hero-actions { margin-top: 16px !important; } body.editorial-focus-page .hero-panel, body.editorial-focus-page .hero-visual { min-height: 0 !important; } body.editorial-focus-page main > .review-strip { margin-top: 0 !important; margin-bottom: 12px !important; } body.editorial-focus-page main > :where(.article-section, .article-shell, .editorial-section, .about-section, .legal-page, .section, .example-section):not(.page-learning-hub) { max-width: 1120px !important; margin-top: 12px !important; margin-bottom: 12px !important; } body.editorial-focus-page :where(.article-section, .example-section, .content-section, .about-section, .legal-page, .editorial-section, .article-shell) { border-color: color-mix(in srgb, var(--green) 12%, var(--line)) !important; } body.editorial-focus-page :where(.article-section, .example-section, .content-section, .about-section, .legal-page, .article-content) p, body.editorial-focus-page :where(.article-section, .example-section, .content-section, .about-section, .legal-page, .article-content) li { max-width: 78ch; line-height: 1.72; } body.editorial-focus-page :where(.article-section, .example-section, .content-section, .about-section, .legal-page, .article-content) h2 { margin-top: 0; margin-bottom: 12px; line-height: 1.12; letter-spacing: 0; } body.editorial-focus-page :where(.article-section, .example-section, .content-section, .about-section, .legal-page, .article-content) h3 { margin-top: 18px; margin-bottom: 8px; line-height: 1.18; } body.editorial-focus-page :where(.category-list, .directory-grid, .resources-grid, .content-grid, .tools-grid) { gap: 10px !important; } body.editorial-focus-page :where(.category-panel, .directory-card, .resource-card, .content-card, .tool-card, .faq-card, .principle-card, .editorial-value-card, .editorial-deep-card, .seo-trust-card) { gap: 10px !important; padding: 16px !important; border-radius: 18px !important; } body.editorial-focus-page :where(.category-panel, .directory-card, .resource-card, .content-card, .tool-card, .faq-card, .principle-card, .editorial-value-card, .editorial-deep-card, .seo-trust-card) p { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.55 !important; } body.editorial-focus-page :where(.category-links, .directory-actions, .resource-actions, .inline-links) { display: flex !important; flex-wrap: nowrap !important; gap: 8px !important; max-width: 100% !important; margin-top: 4px !important; padding-bottom: 2px !important; overflow-x: auto !important; scrollbar-width: none; } body.editorial-focus-page :where(.category-links, .directory-actions, .resource-actions, .inline-links)::-webkit-scrollbar { display: none; } body.editorial-focus-page :where(.category-links, .directory-actions, .resource-actions, .inline-links) a { flex: 0 0 auto !important; min-height: 36px !important; padding: 8px 11px !important; white-space: nowrap !important; font-size: .84rem !important; } body.editorial-focus-page .primary-reading-disclosure { margin-top: 14px; border: 1px solid var(--line); border-radius: 16px; background: color-mix(in srgb, var(--green-soft) 28%, var(--card)); overflow: hidden; } body.editorial-focus-page .primary-reading-disclosure summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 54px; padding: 12px 14px; color: var(--text); cursor: pointer; list-style: none; } body.editorial-focus-page .primary-reading-disclosure summary::-webkit-details-marker { display: none; } body.editorial-focus-page .primary-reading-disclosure strong { display: block; font-size: .98rem; letter-spacing: 0; } body.editorial-focus-page .primary-reading-disclosure small { display: block; margin-top: 2px; color: var(--muted); font-size: .8rem; line-height: 1.35; } body.editorial-focus-page .primary-reading-disclosure[open] summary { border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--green-soft) 48%, var(--card)); } body.editorial-focus-page .primary-reading-disclosure[open] .page-learning-arrow { background: color-mix(in srgb, var(--green) 18%, var(--green-soft)); } body.editorial-focus-page .primary-reading-disclosure[open] .page-learning-arrow::before { transform: translateY(2px) rotate(225deg); } body.editorial-focus-page .primary-reading-content { display: grid; gap: 12px; padding: 14px; } body.editorial-focus-page .primary-reading-content > * { margin-top: 0 !important; margin-bottom: 0 !important; } body.editorial-focus-page .page-learning-hub { width: 100%; max-width: 1120px; margin: 14px auto 18px; display: grid; gap: 10px; } body.editorial-focus-page .page-learning-disclosure { border: 1px solid var(--line); border-radius: 18px; background: var(--card); box-shadow: var(--shadow-soft); overflow: hidden; } body.editorial-focus-page .page-learning-disclosure summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 58px; padding: 14px 16px; color: var(--text); cursor: pointer; list-style: none; transition: background .2s ease, color .2s ease; } body.editorial-focus-page .page-learning-disclosure summary::-webkit-details-marker { display: none; } body.editorial-focus-page .page-learning-arrow { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 32px; width: 32px; height: 32px; border-radius: 999px; background: var(--green-soft); transition: transform .22s cubic-bezier(.4, 0, .2, 1), background .22s ease; } body.editorial-focus-page .page-learning-arrow::before { content: ""; width: 9px; height: 9px; border-right: 3px solid var(--green); border-bottom: 3px solid var(--green); border-radius: 2px; transform: translateY(-2px) rotate(45deg); transition: transform .22s cubic-bezier(.4, 0, .2, 1); } body.editorial-focus-page .page-learning-disclosure[open] summary { border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--green-soft) 58%, var(--card)); } body.editorial-focus-page .page-learning-disclosure[open] .page-learning-arrow { background: color-mix(in srgb, var(--green) 18%, var(--green-soft)); } body.editorial-focus-page .page-learning-disclosure[open] .page-learning-arrow::before { transform: translateY(2px) rotate(225deg); } body.editorial-focus-page .page-learning-disclosure strong { display: block; font-size: 1rem; letter-spacing: 0; } body.editorial-focus-page .page-learning-disclosure small { display: block; margin-top: 3px; color: var(--muted); font-size: .84rem; line-height: 1.35; } body.editorial-focus-page .page-learning-content { padding: 14px 16px 16px; } body.editorial-focus-page .page-learning-content > section, body.editorial-focus-page .page-learning-content > article { max-width: none !important; margin: 0 0 12px !important; box-shadow: none !important; } body.editorial-focus-page .page-learning-content > section:last-child, body.editorial-focus-page .page-learning-content > article:last-child { margin-bottom: 0 !important; } body.editorial-focus-page .page-learning-content :where(.article-section, .example-section, .content-section, .editorial-section, .about-section, .seo-support-section, .editorial-deep-section, .editorial-value-section, .read-more-section, .solutions-section, .tools-section, .faq-section, .note-section, .section) { padding: 16px !important; border-radius: 18px !important; } body.editorial-focus-page .page-learning-content h2 { font-size: 1.35rem !important; line-height: 1.15 !important; } body.editorial-focus-page .page-learning-content p { font-size: .93rem !important; line-height: 1.62 !important; } body.editorial-focus-page .page-learning-content :where(.thin-grid, .info-grid, .seo-support-grid, .editorial-deep-grid, .editorial-value-grid, .tools-grid, .solutions-grid, .content-grid, .faq-grid, .example-grid) { gap: 10px !important; } body.dark.editorial-focus-page .page-learning-disclosure { border-color: rgba(255, 255, 255, .06); box-shadow: none; } .disclaimer, .site-disclaimer, .educational-disclaimer { color: var(--muted); } .disclaimer strong, .site-disclaimer strong, .educational-disclaimer strong { color: var(--text); } .ad-slot, .ad-space { border: 1px dashed color-mix(in srgb, var(--green) 30%, var(--line)); border-radius: var(--radius); background: color-mix(in srgb, var(--green-soft) 64%, transparent); color: var(--muted); } .mobile-menu-backdrop { background: var(--overlay); } .mobile-panel { border: 1px solid var(--line); background: var(--card); color: var(--text); box-shadow: 0 24px 60px rgba(0, 0, 0, .22); } .mobile-list { display: grid; gap: 10px; } .mobile-item { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; min-height: 58px; padding: 12px; border: 1px solid var(--line); border-radius: 18px; background: var(--card-2); transition: transform .18s ease, border-color .18s ease, background .18s ease; } .mobile-item strong { color: var(--text); } .mobile-item small { display: block; margin-top: 2px; color: var(--muted); line-height: 1.4; } .mobile-item:hover { border-color: color-mix(in srgb, var(--green) 30%, var(--line)); background: color-mix(in srgb, var(--green-soft) 38%, var(--card-2)); } @media (max-width: 760px) { body.tool-focus-page { padding: 8px; } body.tool-focus-page .hero { margin-bottom: 8px !important; padding: 10px 6px 8px !important; } body.tool-focus-page .hero h1 { font-size: clamp(1.85rem, 10vw, 2.55rem) !important; letter-spacing: -.045em !important; } body.tool-focus-page .hero p { font-size: .9rem !important; line-height: 1.45 !important; } body.tool-focus-page .hero-actions { display: none !important; } body.tool-focus-page .calculator, body.tool-focus-page .simulator, body.tool-focus-page .rebalance-panel, body.tool-focus-page .tool-shell { margin-top: 8px !important; padding: 16px !important; border-radius: 22px !important; } body.tool-focus-page .tool-learning-hub { margin-top: 10px; gap: 8px; } body.tool-focus-page .tool-learning-disclosure { border-radius: 16px; } body.tool-focus-page .tool-learning-disclosure summary { min-height: 54px; padding: 12px 14px; } body.tool-focus-page .tool-learning-disclosure small { font-size: .78rem; } body.tool-focus-page .tool-learning-content { padding: 12px; } body.editorial-focus-page { padding: 8px; } body.editorial-focus-page main { margin-top: 10px !important; } body.editorial-focus-page .hero { display: block !important; margin-bottom: 10px !important; padding: 14px 6px 10px !important; text-align: left !important; } body.editorial-focus-page .hero h1 { font-size: 2.1rem !important; line-height: 1.05 !important; letter-spacing: 0 !important; } body.editorial-focus-page .hero p { -webkit-line-clamp: 3 !important; font-size: .92rem !important; line-height: 1.48 !important; } body.editorial-focus-page .hero-panel, body.editorial-focus-page .hero-visual { display: none !important; } body.editorial-focus-page main > :where(.article-section, .article-shell, .editorial-section, .about-section, .legal-page, .section, .example-section):not(.page-learning-hub) { margin-top: 10px !important; margin-bottom: 10px !important; padding: 16px !important; border-radius: 20px !important; } body.editorial-focus-page .category-list { display: flex !important; grid-template-columns: none !important; gap: 10px !important; margin-right: -8px !important; padding-right: 8px !important; padding-bottom: 4px !important; overflow-x: auto !important; scroll-snap-type: x mandatory; scrollbar-width: none; } body.editorial-focus-page .category-list::-webkit-scrollbar { display: none; } body.editorial-focus-page .category-panel { flex: 0 0 min(86%, 330px) !important; scroll-snap-align: start; } body.editorial-focus-page .page-learning-hub { margin-top: 10px; gap: 8px; } body.editorial-focus-page .page-learning-disclosure { border-radius: 16px; } body.editorial-focus-page .page-learning-disclosure summary { min-height: 54px; padding: 12px 14px; } body.editorial-focus-page .page-learning-disclosure small { font-size: .78rem; } body.editorial-focus-page .page-learning-content { padding: 12px; } .primary-btn, .secondary-btn, .danger-btn, .ghost-btn { width: 100%; } .tool-card, .feature-main, .resource-card, .content-card, .directory-card, .metric-card, .result-card { border-radius: 20px; } .footer-actions { justify-content: flex-start !important; flex-wrap: nowrap !important; gap: 8px !important; width: 100% !important; max-width: 100% !important; overflow-x: auto !important; overflow-y: hidden !important; padding: 2px 2px 10px !important; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .footer-actions::-webkit-scrollbar { display: none; } .site-footer { margin-top: 20px !important; margin-bottom: 10px !important; padding: 12px 0 0 !important; text-align: left !important; } .footer-top { padding-bottom: 10px !important; margin-bottom: 10px !important; } .footer-brand { max-width: none !important; margin: 0 0 10px !important; } .footer-brand strong { margin-bottom: 4px !important; font-size: 1rem !important; } .footer-brand p { display: -webkit-box !important; margin: 0 !important; overflow: hidden !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; font-size: .82rem !important; line-height: 1.45 !important; } .footer-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; min-height: 48px !important; min-width: auto !important; padding: 8px 12px !important; border: 1px solid var(--line) !important; border-radius: 999px !important; background: var(--card-2) !important; font-size: .82rem !important; line-height: 1 !important; scroll-snap-align: start; white-space: nowrap !important; } .disclaimer { padding-bottom: 0 !important; } .disclaimer p { display: -webkit-box !important; overflow: hidden !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 3 !important; font-size: .78rem !important; line-height: 1.45 !important; } .back-to-top { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); min-height: 42px; padding: 9px 12px; font-size: .86rem; } } /* FinTech premium polish layer. Keep near the end so legacy page CSS becomes visually consistent. */ :root { --bg: #f8fafc !important; --card: #ffffff !important; --card-2: #f1f5f9 !important; --surface: #ffffff !important; --surface-soft: #f1f5f9 !important; --surface-strong: #ecfdf5 !important; --text: #0f172a !important; --muted: #64748b !important; --line: rgba(15, 23, 42, .08) !important; --line-2: rgba(15, 23, 42, .13) !important; --green: #0f9f76 !important; --green-2: #0b8d68 !important; --green-dark: #0b8d68 !important; --green-soft: rgba(15, 159, 118, .08) !important; --blue: #2563eb !important; --blue-soft: rgba(37, 99, 235, .08) !important; --warning: #9a6a14 !important; --warning-soft: rgba(154, 106, 20, .10) !important; --danger: #c94860 !important; --danger-soft: rgba(201, 72, 96, .10) !important; --shadow: 0 18px 48px -28px rgba(15, 23, 42, .22) !important; --shadow-soft: 0 4px 20px rgba(0, 0, 0, .05) !important; --shadow-lift: 0 18px 42px -26px rgba(15, 23, 42, .26) !important; --glass: rgba(255, 255, 255, .82) !important; --glass-strong: rgba(255, 255, 255, .94) !important; --overlay: rgba(11, 15, 25, .64) !important; --font-body: Inter, "Inter Fallback", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; --font-numeric: "JetBrains Mono", "Space Grotesk", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important; } body.dark { --bg: #0b0f17 !important; --card: #111827 !important; --card-2: #1f2937 !important; --surface: #111827 !important; --surface-soft: #1f2937 !important; --surface-strong: #064e3b !important; --text: #e2e8f0 !important; --muted: #94a3b8 !important; --line: rgba(226, 232, 240, .08) !important; --line-2: rgba(226, 232, 240, .14) !important; --green: #10b981 !important; --green-2: #34d399 !important; --green-dark: #10b981 !important; --green-soft: rgba(16, 185, 129, .12) !important; --blue: #60a5fa !important; --blue-soft: rgba(96, 165, 250, .12) !important; --warning: #ffd27a !important; --warning-soft: rgba(255, 210, 122, .12) !important; --danger: #ff7d96 !important; --danger-soft: rgba(255, 125, 150, .12) !important; --shadow: none !important; --shadow-soft: none !important; --shadow-lift: inset 0 1px 0 rgba(255, 255, 255, .06) !important; --glass: rgba(17, 24, 39, .78) !important; --glass-strong: rgba(17, 24, 39, .94) !important; --overlay: rgba(2, 6, 23, .78) !important; } body { background: var(--bg) !important; letter-spacing: 0; } body :where(h1, h2, h3, h4, h5, h6, p, a, button, label, summary, small, strong, span, li) { letter-spacing: 0 !important; } body .container { isolation: isolate; } body .topbar, body .site-header { position: sticky !important; top: 12px !important; z-index: 1000 !important; border: 1px solid color-mix(in srgb, var(--line) 78%, transparent) !important; background: color-mix(in srgb, var(--glass-strong) 88%, transparent) !important; box-shadow: 0 14px 34px -28px rgba(15, 23, 42, .34) !important; backdrop-filter: blur(12px) saturate(1.18) !important; -webkit-backdrop-filter: blur(12px) saturate(1.18) !important; } body.dark .topbar, body.dark .site-header { border-color: rgba(255, 255, 255, .06) !important; background: rgba(17, 24, 39, .76) !important; box-shadow: none !important; } a, button, summary, .primary-btn, .secondary-btn, .danger-btn, .ghost-btn, .footer-btn, .theme-btn, .mobile-menu-btn, .mobile-item, .tool-card, .feature-main, .resource-card, .content-card, .directory-card, .metric-card, .result-card, .example-card, .scenario-card, .form-panel, .summary-tile, .about-card, .side-card, .principle-card, .transparency-card, .responsibility-item, .seo-method-card, .seo-support-card, .editorial-deep-card, .editorial-value-card, .faq-item, .page-learning-disclosure, .tool-learning-disclosure, .primary-reading-disclosure { transition: all .2s ease !important; } :where( input[type="number"], input[inputmode="numeric"], input[inputmode="decimal"], input[data-currency], input[data-percent], table, th, td, output, .metric-card, .metric-card strong, .metric-card span, .result-card, .result-card strong, .summary-tile, .summary-tile strong, .example-card strong, .scenario-card strong, .formula-box, .total-value, .result-value, .chart-value, .bar-value, .calendar-value, .calendar-amount, .history-value, .ticker, .mock-card strong, .mock-main-card strong, .dashboard-mock strong, #entryTotal, #totalQuantity, #totalInvested, #averagePrice, #finalValue, #totalContributed, #interestValue, #totalReturn, #targetIncomeResult, #portfolioTotal, #balanceLabel ) { font-family: var(--font-numeric) !important; font-variant-numeric: tabular-nums lining-nums; } .primary-btn, .tool-card a, .content-link { background: var(--green) !important; color: #fff !important; box-shadow: 0 12px 28px -22px color-mix(in srgb, var(--green) 70%, #000) !important; } .primary-btn:hover, .tool-card a:hover, .content-link:hover { background: var(--green-2) !important; box-shadow: 0 16px 34px -24px color-mix(in srgb, var(--green) 78%, #000) !important; } .secondary-btn, .ghost-btn, .footer-btn, .resource-card a, .directory-actions a, .inline-links a, .home-note-links a, .category-links a { border-color: var(--line) !important; background: color-mix(in srgb, var(--card) 92%, transparent) !important; color: var(--text) !important; box-shadow: none !important; } .secondary-btn:hover, .ghost-btn:hover, .footer-btn:hover, .resource-card a:hover, .directory-actions a:hover, .inline-links a:hover, .home-note-links a:hover, .category-links a:hover { border-color: color-mix(in srgb, var(--green) 24%, var(--line)) !important; background: color-mix(in srgb, var(--green-soft) 34%, var(--card)) !important; } .section, .tool-shell, .article-shell, .panel, .content-panel, .tool-card, .feature-main, .resource-card, .content-card, .directory-card, .metric-card, .result-card, .example-card, .scenario-card, .form-panel, .summary-tile, .about-card, .side-card, .principle-card, .transparency-card, .responsibility-item, .seo-method-card, .seo-support-card, .editorial-deep-card, .editorial-value-card, .faq-item, .page-learning-disclosure, .tool-learning-disclosure, .primary-reading-disclosure { border: 1px solid color-mix(in srgb, var(--line) 82%, transparent) !important; border-radius: 18px !important; background: color-mix(in srgb, var(--card) 92%, transparent) !important; box-shadow: var(--shadow-soft) !important; } body.dark :where( .section, .tool-shell, .article-shell, .panel, .content-panel, .tool-card, .feature-main, .resource-card, .content-card, .directory-card, .metric-card, .result-card, .example-card, .scenario-card, .form-panel, .summary-tile, .about-card, .side-card, .principle-card, .transparency-card, .responsibility-item, .seo-method-card, .seo-support-card, .editorial-deep-card, .editorial-value-card, .faq-item, .page-learning-disclosure, .tool-learning-disclosure, .primary-reading-disclosure ) { border-color: rgba(255, 255, 255, .055) !important; background: color-mix(in srgb, var(--card) 90%, transparent) !important; box-shadow: none !important; } :where(.tool-card, .feature-main, .resource-card, .content-card, .directory-card, .metric-card, .result-card, .example-card, .scenario-card, .form-panel, .summary-tile, .about-card, .side-card, .principle-card, .transparency-card, .responsibility-item, .seo-method-card, .seo-support-card, .editorial-deep-card, .editorial-value-card, .faq-item):hover { transform: translateY(-3px) !important; border-color: color-mix(in srgb, var(--green) 18%, var(--line)) !important; box-shadow: 0 14px 38px -26px rgba(15, 23, 42, .26) !important; } body.dark :where(.tool-card, .feature-main, .resource-card, .content-card, .directory-card, .metric-card, .result-card, .example-card, .scenario-card, .form-panel, .summary-tile, .about-card, .side-card, .principle-card, .transparency-card, .responsibility-item, .seo-method-card, .seo-support-card, .editorial-deep-card, .editorial-value-card, .faq-item):hover { border-color: rgba(16, 185, 129, .24) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06) !important; } body.editorial-focus-page main > :where(.article-section, .article-shell, .editorial-section, .about-section, .legal-page, .section, .example-section, .content-section):not(.page-learning-hub) { margin-top: 48px !important; margin-bottom: 48px !important; padding: 4px 0 !important; border-color: transparent !important; background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; } body.editorial-focus-page main > .review-strip + :where(.article-section, .article-shell, .editorial-section, .about-section, .legal-page, .section, .example-section, .content-section) { margin-top: 28px !important; } body.editorial-focus-page .page-learning-hub, body.tool-focus-page .tool-learning-hub { margin-top: 32px !important; margin-bottom: 48px !important; } body.editorial-focus-page .page-learning-content > section, body.tool-focus-page .tool-learning-content > section { border-color: transparent !important; background: transparent !important; } body.editorial-focus-page .primary-reading-disclosure, body.editorial-focus-page .page-learning-disclosure, body.tool-focus-page .tool-learning-disclosure { background: color-mix(in srgb, var(--card) 96%, transparent) !important; } body.editorial-focus-page .primary-reading-disclosure[open] summary, body.editorial-focus-page .page-learning-disclosure[open] summary, body.tool-focus-page .tool-learning-disclosure[open] summary { background: color-mix(in srgb, var(--green-soft) 24%, var(--card)) !important; } .mini-icon { background: color-mix(in srgb, var(--green-soft) 58%, var(--card)) !important; color: var(--green) !important; box-shadow: none !important; } .metric-card, .result-card, .summary-tile, .mock-main-card { background: linear-gradient(180deg, color-mix(in srgb, var(--card) 96%, transparent), color-mix(in srgb, var(--card-2) 46%, var(--card))) !important; } .metric-card strong, .result-card strong, .summary-tile strong, .mock-main-card strong { color: var(--text) !important; } .metric-card.is-positive strong, .result-card.is-positive strong, .summary-tile.is-positive strong, .positive, [data-status="positive"] { color: var(--green) !important; } table { border-collapse: separate; border-spacing: 0; } th, td { border-color: var(--line) !important; } @media (max-width: 760px) { body .topbar, body .site-header { top: 8px !important; box-shadow: 0 10px 26px -22px rgba(15, 23, 42, .32) !important; } body.editorial-focus-page main > :where(.article-section, .article-shell, .editorial-section, .about-section, .legal-page, .section, .example-section, .content-section):not(.page-learning-hub) { margin-top: 32px !important; margin-bottom: 32px !important; padding: 2px 0 !important; } body.editorial-focus-page .page-learning-hub, body.tool-focus-page .tool-learning-hub { margin-top: 22px !important; margin-bottom: 32px !important; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } .tool-card:hover, .feature-main:hover, .resource-card:hover, .content-card:hover, .directory-card:hover, .metric-card:hover, .result-card:hover, .example-card:hover, .scenario-card:hover, .form-panel:hover, .summary-tile:hover, .mobile-item:hover { transform: none; } } /* InvesteHub executive design system layer. */ body { background: radial-gradient(circle at 12% -10%, color-mix(in srgb, var(--green) 10%, transparent), transparent 30%), linear-gradient(180deg, color-mix(in srgb, var(--bg) 90%, #ffffff), var(--bg)) !important; font-family: var(--font-body) !important; } body.dark { background: radial-gradient(circle at 12% -10%, rgba(16, 185, 129, .13), transparent 32%), linear-gradient(180deg, #0b0f17, #090d14 72%) !important; } :where(h1, h2, h3, h4, h5, h6, .hero h1, .article-hero h1, .section-head h2, .editorial-head h2) { font-family: var(--font-body) !important; font-variant-numeric: normal !important; } :where( input, select, textarea, table, th, td, time, output, code, kbd, .metric-card strong, .metric-card span, .summary-card strong, .summary-card span, .summary-tile strong, .summary-tile span, .result-card strong, .result-value, .total-value, .chart-value, .history-value, .calendar-day span, .formula-box, .formula-box strong, .home-tool-metric strong, .preview-metric strong, .preview-spotlight strong, .mock-card strong, .mock-main-card strong ) { font-family: var(--font-numeric) !important; font-variant-numeric: tabular-nums lining-nums !important; } .eyebrow { width: fit-content !important; min-height: 24px !important; padding: 5px 10px !important; border: 1px solid color-mix(in srgb, var(--green) 18%, var(--line)) !important; border-radius: 999px !important; background: color-mix(in srgb, var(--green-soft) 45%, transparent) !important; color: color-mix(in srgb, var(--green) 88%, var(--text)) !important; box-shadow: none !important; font-size: .68rem !important; font-weight: 850 !important; line-height: 1.1 !important; letter-spacing: .02em !important; } .mini-icon { width: 32px !important; height: 32px !important; min-width: 32px !important; margin-bottom: 8px !important; border: 1px solid color-mix(in srgb, var(--green) 14%, transparent) !important; border-radius: 10px !important; background: color-mix(in srgb, var(--green-soft) 38%, transparent) !important; color: var(--green) !important; box-shadow: none !important; font-size: .66rem !important; opacity: .86; } .mini-icon svg { width: 18px !important; height: 18px !important; } :where( .section, .editorial-section, .editorial-deep-section, .editorial-value-section, .seo-trust-section, .seo-support-section, .seo-method-section, .faq-section, .note-section, .tools-section, .article-shell, .article-section, .example-section, .content-section, .about-section, .legal-page ) { box-shadow: none !important; } :where( .tool-card, .feature-main, .resource-card, .content-card, .directory-card, .category-panel, .metric-card, .result-card, .example-card, .scenario-card, .form-panel, .summary-tile, .about-card, .side-card, .principle-card, .transparency-card, .responsibility-item, .seo-trust-card, .seo-method-card, .seo-support-card, .editorial-deep-card, .editorial-value-card, .faq-item, .formula-box, .dashboard-mock, .mock-card, .mock-main-card ) { border-color: color-mix(in srgb, var(--line) 76%, transparent) !important; box-shadow: 0 4px 20px rgba(0, 0, 0, .03) !important; } body.dark :where( .tool-card, .feature-main, .resource-card, .content-card, .directory-card, .category-panel, .metric-card, .result-card, .example-card, .scenario-card, .form-panel, .summary-tile, .about-card, .side-card, .principle-card, .transparency-card, .responsibility-item, .seo-trust-card, .seo-method-card, .seo-support-card, .editorial-deep-card, .editorial-value-card, .faq-item, .formula-box, .dashboard-mock, .mock-card, .mock-main-card ) { border-color: rgba(255, 255, 255, .055) !important; box-shadow: none !important; } body .topbar, body .site-header { background: color-mix(in srgb, var(--glass-strong) 82%, transparent) !important; backdrop-filter: blur(12px) saturate(1.14) !important; -webkit-backdrop-filter: blur(12px) saturate(1.14) !important; } :where(.article-content, .article-body) { width: min(100%, 768px) !important; max-width: 768px !important; margin-right: auto !important; margin-left: auto !important; } body.editorial-focus-page :where(.article-section, .example-section) { width: min(100%, 768px) !important; max-width: 768px !important; margin-right: auto !important; margin-left: auto !important; } body.editorial-focus-page :where(.article-section, .example-section, .article-content) :where(p, li) { max-width: 70ch !important; font-size: clamp(.98rem, 1.1vw, 1.05rem) !important; line-height: 1.76 !important; } .formula-box { position: relative !important; overflow: hidden !important; padding: 20px 20px 20px 24px !important; border: 1px solid color-mix(in srgb, var(--green) 18%, var(--line)) !important; border-left: 4px solid var(--green) !important; border-radius: 14px !important; background: linear-gradient(90deg, color-mix(in srgb, var(--green-soft) 54%, transparent), transparent 76%), color-mix(in srgb, var(--card) 96%, transparent) !important; } body.dark .formula-box { background: linear-gradient(90deg, rgba(16, 185, 129, .12), transparent 76%), color-mix(in srgb, var(--card) 92%, transparent) !important; } .faq-item, .faq-section details { border-radius: 14px !important; overflow: hidden !important; } .faq-item summary, .faq-section details summary { min-height: 56px !important; padding: 15px 17px !important; cursor: pointer !important; list-style: none !important; } .faq-item summary::-webkit-details-marker, .faq-section details summary::-webkit-details-marker { display: none !important; } .faq-item summary::after, .faq-section details summary::after { content: "" !important; width: 9px !important; height: 9px !important; border-right: 2px solid var(--green) !important; border-bottom: 2px solid var(--green) !important; transform: rotate(45deg) !important; transition: transform .2s ease !important; } .faq-item[open] summary::after, .faq-section details[open] summary::after { transform: rotate(225deg) !important; } @media (min-width: 900px) { main > :where(.section, .editorial-section, .editorial-deep-section, .editorial-value-section, .seo-trust-section, .seo-support-section, .faq-section, .article-section, .example-section, .content-section, .about-section, .legal-page) { margin-top: 56px !important; margin-bottom: 56px !important; } } @media (max-width: 760px) { .mini-icon { width: 28px !important; height: 28px !important; min-width: 28px !important; border-radius: 9px !important; } body.editorial-focus-page :where(.article-section, .example-section, .article-content) :where(p, li) { max-width: none !important; font-size: .96rem !important; } :where(.hero h1, .article-hero h1, body.editorial-focus-page .hero h1, body.tool-focus-page .hero h1) { font-size: clamp(2.05rem, 9.5vw, 2.55rem) !important; line-height: 1.05 !important; } } /* InvesteHub minimalist cleanup layer. Removes decorative IA-looking badges/cards while preserving calculator panels. */ .mini-icon, .mini-icon[data-icon-ready="true"], :where(.tool-card, .resource-card, .example-card, .faq-card, .content-card, .directory-card, .category-panel, .seo-trust-card, .seo-method-card, .seo-support-card, .editorial-deep-card, .editorial-value-card, .read-more-card, .quick-item, .benefit-item, .objective-row, .content-group, .trust-card, .faq-item, .faq-section details) .mini-icon { display: none !important; } .eyebrow { display: block !important; width: auto !important; min-height: 0 !important; margin: 0 0 12px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: color-mix(in srgb, var(--muted) 88%, var(--text)) !important; font-family: var(--font-body) !important; font-size: 12px !important; font-weight: 800 !important; line-height: 1.25 !important; letter-spacing: .1em !important; text-transform: uppercase !important; } :where(.editorial-head.center, .section-head.center, .single-hero, .article-hero, .faq-section, .seo-trust-section, .seo-method-section, .editorial-deep-head, .editorial-value-section, .solutions-head, .home-value-head) { text-align: left !important; } :where(.editorial-head.center, .section-head.center, .single-hero, .article-hero, .faq-section, .seo-trust-section, .seo-method-section, .editorial-deep-head, .editorial-value-section, .solutions-head, .home-value-head) :where(h1, h2, h3, p) { margin-left: 0 !important; margin-right: 0 !important; text-align: left !important; } :where( .resource-card, .tool-card, .example-card, .faq-card, .content-card, .directory-card, .category-panel, .seo-trust-card, .seo-method-card, .seo-support-card, .editorial-deep-card, .editorial-value-card, .read-more-card, .quick-item, .benefit-item, .objective-row, .content-group, .trust-card ) { border: 0 !important; border-bottom: 1px solid color-mix(in srgb, var(--line) 72%, transparent) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; transform: none !important; } :where( .resource-card, .tool-card, .example-card, .faq-card, .content-card, .directory-card, .category-panel, .seo-trust-card, .seo-method-card, .seo-support-card, .editorial-deep-card, .editorial-value-card, .read-more-card, .quick-item, .benefit-item, .objective-row, .content-group, .trust-card ):hover { border-color: color-mix(in srgb, var(--green) 24%, var(--line)) !important; background: transparent !important; box-shadow: none !important; transform: none !important; } :where(.faq-item, .faq-section details) { border: 0 !important; border-bottom: 1px solid color-mix(in srgb, var(--line) 72%, transparent) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } :where(.faq-item[open], .faq-section details[open]) { border-color: color-mix(in srgb, var(--green) 28%, var(--line)) !important; background: transparent !important; } :where(.faq-item summary, .faq-section details summary) { padding-right: 0 !important; padding-left: 0 !important; } :where(.faq-item > p, .faq-section details > p) { padding-right: 0 !important; padding-left: 0 !important; } :where(.tools-showcase, .directory-grid, .category-list, .category-resource-grid, .seo-trust-grid, .seo-method-grid, .editorial-deep-grid, .editorial-value-grid, .content-grid, .resources-grid, .trust-grid, .faq-grid, .text-link-list, .objectives-grid) { gap: clamp(24px, 3vw, 48px) !important; } :where(.resource-card h3, .tool-card h3, .example-card h3, .faq-card h3, .content-card h3, .directory-card h3, .category-panel h3, .seo-trust-card h3, .seo-method-card h3, .seo-support-card h3, .editorial-deep-card h3, .editorial-value-card h3) { margin-top: 0 !important; } :where(.resource-card p, .tool-card p, .example-card p, .faq-card p, .content-card p, .directory-card p, .category-panel p, .seo-trust-card p, .seo-method-card p, .seo-support-card p, .editorial-deep-card p, .editorial-value-card p) { text-align: left !important; } body.home-page .text-topic, body.content-directory-page .category-panel, body.tools-directory-page .directory-card { border-bottom: 1px solid color-mix(in srgb, var(--line) 72%, transparent) !important; } body.home-page .home-tool-module { background: linear-gradient(180deg, color-mix(in srgb, var(--green-soft) 12%, transparent), transparent 72%), transparent !important; } body.dark :where( .resource-card, .tool-card, .example-card, .faq-card, .content-card, .directory-card, .category-panel, .seo-trust-card, .seo-method-card, .seo-support-card, .editorial-deep-card, .editorial-value-card, .read-more-card, .quick-item, .benefit-item, .objective-row, .content-group, .trust-card, .faq-item, .faq-section details ) { background: transparent !important; box-shadow: none !important; } /* Minimalist page-level cleanup. Keep calculators as panels, but remove "card for everything" from editorial/navigation areas. */ :where( .editorial-section.soft, .tool-map-section, .seo-trust-section, .seo-method-section, .seo-support-section, .editorial-deep-section, .editorial-value-section, .faq-section, .ih-related-tools ) { border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } :where( .editorial-section.soft, .tool-map-section, .seo-trust-section, .seo-method-section, .seo-support-section, .editorial-deep-section, .editorial-value-section, .faq-section ) { padding-left: 0 !important; padding-right: 0 !important; } :where( .feature-main, .home-tool-module, .ih-related-card, .tool-map-row, .text-topic, .category-hero-card, .learning-flow, .example-step, .principle-card, .transparency-card, .responsibility-item, .about-card, .side-card ) { border: 0 !important; border-bottom: 1px solid color-mix(in srgb, var(--line) 72%, transparent) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; transform: none !important; } :where( .feature-main, .home-tool-module, .ih-related-card, .tool-map-row, .text-topic, .category-hero-card, .learning-flow, .example-step, .principle-card, .transparency-card, .responsibility-item, .about-card, .side-card ):hover { border-color: color-mix(in srgb, var(--green) 22%, var(--line)) !important; background: transparent !important; box-shadow: none !important; transform: none !important; } body.home-page :where(#ferramentas.editorial-section, #conteudos.editorial-section), body.ih-page-home :where(#ferramentas.editorial-section, #conteudos.editorial-section), body.tools-directory-page :where(.editorial-section.soft, .tool-map-section) { border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; padding-left: 0 !important; padding-right: 0 !important; } body.tools-directory-page .directory-card, body.ih-page-tools .directory-grid.ih-tools-showcase .directory-card { border: 0 !important; border-bottom: 1px solid color-mix(in srgb, var(--line) 72%, transparent) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } body.home-page .text-topic, body.ih-page-home #conteudos .text-topic { padding-left: 0 !important; padding-right: 0 !important; border: 0 !important; border-bottom: 1px solid color-mix(in srgb, var(--line) 72%, transparent) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } body.tool-focus-page .hero, body.tool-focus-page .hero :where(h1, p), body.tool-focus-page .single-hero, body.tool-focus-page .single-hero :where(h1, p) { margin-left: 0 !important; margin-right: 0 !important; text-align: left !important; } body.tool-focus-page .hero-actions { justify-content: flex-start !important; } /* Related tools carousel: intentionally highlighted as a clear navigation panel. */ body .ih-related-tools { margin-top: 22px !important; margin-bottom: 28px !important; padding: clamp(18px, 2.3vw, 28px) !important; border: 1px solid color-mix(in srgb, var(--green) 18%, var(--line)) !important; border-radius: 24px !important; background: radial-gradient(circle at 14% 10%, color-mix(in srgb, var(--green) 11%, transparent), transparent 34%), linear-gradient(135deg, color-mix(in srgb, var(--card-2, var(--surface-soft)) 92%, transparent), color-mix(in srgb, var(--card, var(--surface)) 98%, transparent)) !important; box-shadow: 0 22px 60px -44px color-mix(in srgb, var(--green) 40%, #000) !important; } body.dark .ih-related-tools { border-color: rgba(16, 185, 129, .18) !important; background: radial-gradient(circle at 14% 8%, rgba(16, 185, 129, .10), transparent 34%), linear-gradient(135deg, rgba(17, 24, 39, .96), rgba(11, 15, 25, .98)) !important; box-shadow: 0 24px 70px -52px rgba(0, 0, 0, .9) !important; } body .ih-related-card { min-height: var(--tool-card-min-height, 240px) !important; position: relative; overflow: hidden; display: flex !important; flex-direction: column; justify-content: center; gap: 18px; padding: clamp(22px, 3vw, 34px) !important; border: 1px solid color-mix(in srgb, var(--green) 16%, var(--line)) !important; border-radius: 22px !important; background: linear-gradient(145deg, color-mix(in srgb, var(--green-soft) 28%, transparent), transparent 46%), color-mix(in srgb, var(--card) 94%, var(--card-2, var(--surface-soft))) !important; box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent), 0 18px 44px -36px rgba(0, 0, 0, .42) !important; } body .ih-related-card::after { content: ""; position: absolute; top: 24px; right: 24px; bottom: 24px; width: min(30%, 300px); border: 1px solid color-mix(in srgb, var(--green) 20%, var(--line)); border-radius: 18px; background: linear-gradient(180deg, color-mix(in srgb, var(--green) 30%, transparent) 0 12%, transparent 12% 24%), linear-gradient(90deg, color-mix(in srgb, var(--green) 18%, transparent) 0 18%, transparent 18% 30%), linear-gradient(135deg, color-mix(in srgb, var(--green) 12%, transparent), transparent 58%); opacity: .52; pointer-events: none; } body .ih-related-card > div { position: relative; z-index: 1; } body .ih-related-card > div:first-child { display: block !important; max-width: min(760px, calc(100% - 340px)); } body .ih-related-card .mini-icon { display: none !important; } body .ih-related-card h3 { margin: 0 0 10px !important; } body .ih-related-card p { margin: 0 !important; max-width: 780px; } body.dark .ih-related-card { border-color: rgba(255, 255, 255, .09) !important; background: linear-gradient(145deg, rgba(16, 185, 129, .10), transparent 48%), rgba(17, 24, 39, .86) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 20px 58px -48px rgba(0, 0, 0, .86) !important; } body.dark .ih-related-card::after { border-color: rgba(16, 185, 129, .18); background: linear-gradient(180deg, rgba(16, 185, 129, .26) 0 12%, transparent 12% 24%), linear-gradient(90deg, rgba(16, 185, 129, .16) 0 18%, transparent 18% 30%), linear-gradient(135deg, rgba(16, 185, 129, .12), transparent 58%); opacity: .56; } @media (max-width: 760px) { body .ih-related-card::after { display: none; } body .ih-related-card > div:first-child { max-width: 100%; } }