html { overflow-x: clip; }
/* =========================================================
Inteligentão Investimentos — Portal público V2
Paleta: areia, verde profundo, teal, âmbar, coral e índigo
========================================================= */
:root {
--p-bg: #f5f1e7;
--p-surface: #fffdf8;
--p-surface-2: #f9f5ec;
--p-forest: #102e28;
--p-forest-2: #173d34;
--p-teal: #19786a;
--p-teal-soft: #e0f1eb;
--p-teal-bright: #4dc0ab;
--p-mint: #8fe6d0;
--p-mint-soft: rgba(143, 230, 208, .15);
--p-amber: #c4882d;
--p-amber-soft: #f4e5c8;
--p-coral: #bf5b47;
--p-coral-soft: #f7e3dd;
--p-indigo: #526091;
--p-indigo-soft: #e8eaf5;
--p-sage: #94a58c;
--p-ink: #1c2b26;
--p-ink-soft: #4e6059;
--p-muted: #7d8c83;
--p-line: #e0dbce;
--p-line-dark: rgba(255, 255, 255, .12);
--p-shadow: 0 18px 50px rgba(43, 53, 40, .08);
--p-shadow-lg: 0 30px 80px rgba(20, 42, 34, .18);
--p-radius: 20px;
}
.portal-page {
background: var(--p-bg);
color: var(--p-ink);
overflow-x: clip;
}
.portal-page a {
color: inherit;
}
.portal-container {
width: min(1200px, calc(100% - 48px));
margin-inline: auto;
}
.portal-page main {
overflow: hidden;
}
.portal-page h1,
.portal-page h2,
.portal-page h3,
.portal-page h4 {
font-family: var(--font-display);
color: var(--p-ink);
}
.portal-page ::selection {
color: var(--p-forest);
background: #f1d8a3;
}
/* Header */
.portal-header {
position: sticky;
top: 0;
z-index: 100;
background: rgba(250, 247, 239, .88);
border-bottom: 1px solid transparent;
backdrop-filter: blur(18px);
transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.portal-header.is-scrolled {
background: rgba(250, 247, 239, .97);
border-bottom-color: var(--p-line);
box-shadow: 0 8px 30px rgba(35, 47, 39, .05);
}
.portal-header-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
min-height: 76px;
}
.portal-header .brand-copy strong {
font-size: 19px;
}
.portal-header .brand--dark {
color: var(--p-forest);
}
.portal-nav {
display: flex;
align-items: center;
gap: 28px;
margin-left: auto;
margin-right: 26px;
}
.portal-nav a {
position: relative;
padding: 7px 0;
color: var(--p-ink-soft);
font-size: 12px;
font-weight: 600;
letter-spacing: .005em;
}
.portal-nav a::after {
content: "";
position: absolute;
left: 0;
right: 100%;
bottom: 0;
height: 2px;
border-radius: 2px;
background: var(--p-amber);
transition: right .2s ease;
}
.portal-nav a:hover,
.portal-nav a.is-active {
color: var(--p-forest);
}
.portal-nav a:hover::after,
.portal-nav a.is-active::after {
right: 0;
}
.portal-header-actions {
display: flex;
align-items: center;
gap: 13px;
}
.portal-search-link {
display: inline-grid;
place-items: center;
width: 36px;
height: 36px;
border: 1px solid var(--p-line);
border-radius: 10px;
color: var(--p-ink-soft);
background: rgba(255, 255, 255, .45);
}
.portal-search-link:hover {
color: var(--p-teal);
border-color: #b9d4ca;
background: #fff;
}
.portal-search-link .icon {
width: 16px;
height: 16px;
}
.portal-admin-link {
display: inline-flex;
align-items: center;
gap: 5px;
color: var(--p-muted);
font-size: 10px;
font-weight: 600;
white-space: nowrap;
}
.portal-admin-link:hover {
color: var(--p-forest);
}
.portal-admin-link .icon {
width: 13px;
height: 13px;
}
.portal-header-cta {
background: var(--p-forest) !important;
color: #fff !important;
box-shadow: 0 8px 20px rgba(16, 46, 40, .16) !important;
}
.portal-header-cta:hover {
background: var(--p-teal) !important;
}
.portal-menu-toggle {
display: none;
color: var(--p-forest);
background: #fff;
border-color: var(--p-line);
}
.portal-mobile-nav {
background: var(--p-surface);
border-bottom: 1px solid var(--p-line);
padding: 12px 24px 20px;
}
.portal-mobile-nav a {
color: var(--p-ink-soft);
}
.portal-mobile-nav a:hover {
background: var(--p-surface-2);
color: var(--p-forest);
}
/* Buttons adicionais */
.button--indigo {
color: #fff;
background: linear-gradient(135deg, #5e6ba3, #465382);
box-shadow: 0 12px 28px rgba(82, 96, 145, .22);
}
.button--indigo:hover {
box-shadow: 0 16px 34px rgba(82, 96, 145, .3);
}
.button--amber {
color: #3d2c12;
background: linear-gradient(135deg, #e1b365, #c68a31);
box-shadow: 0 12px 28px rgba(196, 136, 45, .2);
}
.button--amber:hover {
box-shadow: 0 16px 34px rgba(196, 136, 45, .3);
}
.button--forest {
color: #fff;
background: var(--p-forest);
}
.button--forest:hover {
background: var(--p-teal);
}
.portal-text-link {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--p-teal);
font-size: 11px;
font-weight: 700;
}
.portal-text-link .icon {
width: 14px;
height: 14px;
}
.portal-text-link:hover {
gap: 9px;
}
.portal-text-link--dark {
color: var(--p-forest);
}
.portal-eyebrow {
display: inline-flex;
align-items: center;
gap: 7px;
margin-bottom: 13px;
color: var(--p-teal);
font-size: 9px;
font-weight: 750;
letter-spacing: .16em;
text-transform: uppercase;
}
.portal-eyebrow .icon {
width: 13px;
height: 13px;
}
.portal-eyebrow--indigo { color: var(--p-indigo); }
.portal-eyebrow--amber { color: var(--p-amber); }
.portal-eyebrow--teal { color: var(--p-teal); }
.portal-eyebrow--light { color: var(--p-mint); }
.portal-card-label {
display: block;
margin-bottom: 3px;
color: var(--p-muted);
font-size: 7.5px;
font-weight: 750;
letter-spacing: .15em;
text-transform: uppercase;
}
/* Ticker badge */
.ticker-badge {
display: inline-grid;
place-items: center;
min-width: 40px;
height: 34px;
padding: 0 7px;
flex: 0 0 auto;
border-radius: 9px;
font-family: var(--font-display);
font-size: 8.5px;
font-weight: 750;
letter-spacing: -.01em;
color: #fff;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}
.ticker-badge--sm { min-width: 32px; height: 28px; border-radius: 7px; font-size: 7px; padding: 0 5px; }
.ticker-badge--lg { min-width: 50px; height: 42px; border-radius: 11px; font-size: 10px; padding: 0 8px; }
.ticker-badge--logo {
padding: 2px;
background: #fff;
border: 0;
box-shadow: none;
}
.ticker-badge--logo img {
display: block;
width: 72%;
height: 72%;
object-fit: contain;
}
.ticker-badge--sm.ticker-badge--logo {
padding: 1px;
}
.ticker-badge--lg.ticker-badge--logo {
padding: 3px;
}
.ticker-badge--c0 { background: linear-gradient(135deg, #14695d, #3ca893); }
.ticker-badge--c1 { background: linear-gradient(135deg, #9b6422, #d39b49); }
.ticker-badge--c2 { background: linear-gradient(135deg, #a84d3c, #d57a63); }
.ticker-badge--c3 { background: linear-gradient(135deg, #45547e, #7784b4); }
.ticker-badge--c4 { background: linear-gradient(135deg, #536749, #8fa383); }
.ticker-badge--c5 { background: linear-gradient(135deg, #6a5267, #a4839e); }
.ticker-badge--c6 { background: linear-gradient(135deg, #1d596b, #4d8ea1); }
/* Hero */
.portal-hero {
position: relative;
overflow: hidden;
padding: 70px 0 0;
color: #f8f3e7;
background:
radial-gradient(circle at 86% 10%, rgba(203, 145, 53, .16), transparent 32%),
radial-gradient(circle at 12% 82%, rgba(57, 156, 137, .13), transparent 38%),
linear-gradient(145deg, #0c2822 0%, #123b32 58%, #0f2f29 100%);
}
.portal-hero-grid-bg {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
background-size: 58px 58px;
mask-image: linear-gradient(180deg, rgba(0, 0, 0, .7), transparent 88%);
pointer-events: none;
}
.portal-hero-orb {
position: absolute;
border-radius: 50%;
pointer-events: none;
filter: blur(4px);
}
.portal-hero-orb--amber {
width: 380px;
height: 380px;
right: -140px;
top: 80px;
background: radial-gradient(circle, rgba(212, 158, 66, .16), transparent 68%);
}
.portal-hero-orb--teal {
width: 300px;
height: 300px;
left: -170px;
bottom: 110px;
background: radial-gradient(circle, rgba(66, 179, 160, .14), transparent 68%);
}
.portal-hero-grid {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1.04fr .96fr;
align-items: center;
gap: 54px;
padding-bottom: 58px;
}
.portal-kicker {
display: inline-flex;
align-items: center;
gap: 8px;
margin-bottom: 22px;
padding: 7px 12px;
border: 1px solid rgba(143, 230, 208, .26);
border-radius: 999px;
color: #c7f4e9;
background: rgba(255, 255, 255, .04);
font-size: 10px;
font-weight: 550;
letter-spacing: .02em;
}
.portal-hero h1 {
max-width: 690px;
margin-bottom: 20px;
color: #fffaf0;
font-size: clamp(43px, 5vw, 68px);
font-weight: 700;
line-height: 1.03;
letter-spacing: -.052em;
}
.portal-highlight {
color: #edc47d;
}
.portal-hero-lead {
max-width: 570px;
margin-bottom: 27px;
color: rgba(255, 250, 240, .58);
font-size: 15px;
line-height: 1.7;
}
.portal-hero-search {
position: relative;
display: flex;
align-items: center;
gap: 8px;
max-width: 650px;
padding: 6px 6px 6px 14px;
border: 1px solid rgba(255, 255, 255, .18);
border-radius: 13px;
background: rgba(255, 255, 255, .96);
box-shadow: 0 18px 40px rgba(0, 10, 7, .22);
}
.portal-search-icon {
display: flex;
color: #7d8c83;
}
.portal-search-icon .icon {
width: 18px;
height: 18px;
}
.portal-hero-search input {
flex: 1;
min-width: 0;
height: 42px;
padding: 0;
border: 0;
outline: 0;
color: var(--p-ink);
background: transparent;
font-size: 13px;
}
.portal-hero-search input::placeholder {
color: #98a49c;
}
.portal-hero-search .button {
min-height: 42px;
border-radius: 9px;
background: var(--p-forest);
color: #fff;
box-shadow: none;
}
.portal-hero-search .button:hover {
background: var(--p-teal);
}
.portal-quick-filters {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin: 13px 0 29px;
color: rgba(255, 255, 255, .54);
font-size: 10px;
}
.portal-quick-filters a {
padding: 4px 8px;
border: 1px solid rgba(255, 255, 255, .09);
border-radius: 5px;
color: rgba(255, 255, 255, .72);
background: rgba(255, 255, 255, .045);
transition: .16s ease;
}
.portal-quick-filters a:hover {
color: #fff;
border-color: rgba(237, 196, 125, .4);
}
.portal-hero-stats {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0;
max-width: 650px;
padding-top: 22px;
border-top: 1px solid rgba(255, 255, 255, .1);
}
.portal-hero-stats div {
padding-right: 20px;
border-right: 1px solid rgba(255, 255, 255, .09);
}
.portal-hero-stats div:last-child {
border-right: 0;
}
.portal-hero-stats strong {
display: block;
color: #fff6e5;
font-family: var(--font-display);
font-size: 21px;
font-weight: 650;
letter-spacing: -.04em;
}
.portal-hero-stats span {
display: block;
margin-top: 3px;
color: rgba(255, 255, 255, .52);
font-size: 9.5px;
line-height: 1.45;
}
.portal-hero-panel {
position: relative;
}
.hero-ranking-card {
position: relative;
z-index: 2;
padding: 19px 19px 36px;
border: 1px solid rgba(255, 255, 255, .42);
border-radius: 19px;
color: var(--p-ink);
background: rgba(255, 253, 248, .96);
box-shadow: 0 36px 90px rgba(0, 10, 7, .32);
backdrop-filter: blur(16px);
}
.hero-ranking-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
padding-bottom: 14px;
border-bottom: 1px solid var(--p-line);
}
.hero-ranking-head strong {
display: block;
color: var(--p-forest);
font-family: var(--font-display);
font-size: 16px;
letter-spacing: -.03em;
}
.portal-round-link {
display: grid;
place-items: center;
width: 31px;
height: 31px;
border: 1px solid var(--p-line);
border-radius: 8px;
color: var(--p-ink-soft);
transition: .18s ease;
}
.portal-round-link:hover {
color: var(--p-teal);
border-color: #b9d4ca;
background: var(--p-teal-soft);
}
.portal-round-link .icon {
width: 14px;
height: 14px;
}
.hero-ranking-list {
display: flex;
flex-direction: column;
}
.hero-ranking-row {
display: flex;
align-items: center;
gap: 9px;
padding: 9px 2px;
border-bottom: 1px solid #eee9de;
transition: background .15s ease;
}
.hero-ranking-row:hover {
background: #fbf8f1;
}
.hero-rank-number {
width: 18px;
color: #86958b;
font-family: var(--font-display);
font-size: 10px;
font-weight: 700;
text-align: center;
}
.hero-ranking-name {
display: flex;
flex-direction: column;
min-width: 0;
line-height: 1.25;
}
.hero-ranking-name strong {
color: var(--p-forest);
font-size: 11px;
}
.hero-ranking-name span {
overflow: hidden;
color: #6c7d73;
font-size: 8.5px;
text-overflow: ellipsis;
white-space: nowrap;
}
.hero-ranking-metrics {
display: flex;
gap: 8px;
margin-left: auto;
color: #53665c;
font-size: 9.5px;
font-weight: 600;
white-space: nowrap;
}
.hero-score {
min-width: 33px;
padding: 4px 6px;
border-radius: 6px;
color: var(--p-forest);
background: var(--p-amber-soft);
font-family: var(--font-display);
font-size: 11px;
text-align: center;
}
.hero-ranking-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding-top: 13px;
color: var(--p-ink-soft);
font-size: 9.5px;
}
.hero-ranking-foot > span {
display: inline-flex;
align-items: center;
gap: 5px;
}
.hero-ranking-foot a {
display: inline-flex;
align-items: center;
gap: 4px;
color: var(--p-teal);
font-weight: 700;
font-size: 10px;
}
.hero-ranking-foot .icon {
width: 11px;
height: 11px;
}
.hero-floating-note {
position: absolute;
z-index: 3;
display: flex;
align-items: center;
gap: 9px;
padding: 10px 12px;
border: 1px solid rgba(255, 255, 255, .5);
border-radius: 11px;
background: rgba(255, 253, 248, .94);
box-shadow: 0 18px 36px rgba(0, 12, 7, .2);
animation: portalFloat 7s ease-in-out infinite;
}
.hero-floating-note--screener {
left: -28px;
bottom: -21px;
}
.hero-floating-note--source {
right: -16px;
top: -18px;
animation-delay: -3s;
}
.floating-note-icon {
display: grid;
place-items: center;
width: 27px;
height: 27px;
border-radius: 7px;
color: var(--p-teal);
background: var(--p-teal-soft);
}
.floating-note-icon .icon {
width: 14px;
height: 14px;
}
.hero-floating-note div {
display: flex;
flex-direction: column;
line-height: 1.3;
}
.hero-floating-note strong {
color: var(--p-forest);
font-size: 8.5px;
}
.hero-floating-note span {
color: var(--p-muted);
font-size: 7px;
}
@keyframes portalFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
.portal-market-strip {
position: relative;
z-index: 2;
display: flex;
align-items: center;
gap: 28px;
min-height: 66px;
border-top: 1px solid rgba(255, 255, 255, .1);
}
.portal-market-title {
display: inline-flex;
align-items: center;
gap: 7px;
color: rgba(255, 255, 255, .38);
font-size: 8px;
font-weight: 650;
letter-spacing: .13em;
text-transform: uppercase;
white-space: nowrap;
}
.portal-ticker {
display: flex;
align-items: baseline;
gap: 7px;
white-space: nowrap;
}
.portal-ticker > span {
color: rgba(255, 255, 255, .3);
font-size: 8px;
font-weight: 650;
letter-spacing: .05em;
}
.portal-ticker strong {
color: rgba(255, 255, 255, .84);
font-size: 10.5px;
font-weight: 650;
font-variant-numeric: tabular-nums;
}
.portal-ticker small {
font-size: 8.5px;
font-weight: 650;
}
.portal-market-time {
margin-left: auto;
color: rgba(255, 255, 255, .25);
font-size: 8px;
white-space: nowrap;
}
/* Sections */
.portal-section {
position: relative;
padding: 82px 0;
}
.portal-section--screener {
padding-top: 76px;
background: linear-gradient(180deg, #f5f1e7, #f8f4eb);
}
.portal-section--ranking {
color: #f9f4e7;
background:
radial-gradient(circle at 82% 0%, rgba(223, 171, 85, .14), transparent 30%),
linear-gradient(145deg, #102e28, #163a31);
}
.portal-section--ranking h2,
.portal-section--ranking h3 {
color: #fff8e9;
}
.portal-section--portfolio {
background: #eef5f1;
}
.portal-section--cream {
background: #fbf8f1;
}
.portal-section--method {
background: #f5f1e7;
}
.portal-section-heading {
max-width: 760px;
margin-bottom: 34px;
}
.portal-section-heading h2 {
margin-bottom: 12px;
font-size: clamp(30px, 3.5vw, 43px);
letter-spacing: -.045em;
}
.portal-section-heading p {
max-width: 630px;
color: var(--p-ink-soft);
font-size: 13.5px;
line-height: 1.7;
}
.portal-section-heading--split {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 30px;
max-width: none;
}
.portal-section-heading--split > div:first-child {
max-width: 730px;
}
.portal-section--ranking .portal-section-heading p {
color: rgba(255, 255, 255, .48);
}
/* Screener teaser */
.screener-teaser {
display: grid;
grid-template-columns: minmax(0, 1fr) 255px;
border: 1px solid var(--p-line);
border-radius: 18px;
background: var(--p-surface);
box-shadow: var(--p-shadow);
overflow: hidden;
}
.screener-teaser-form {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 11px;
padding: 22px;
}
.teaser-field {
display: flex;
flex-direction: column;
gap: 5px;
}
.teaser-field--wide {
grid-column: span 2;
}
.teaser-field label {
color: var(--p-ink-soft);
font-size: 10.5px;
font-weight: 700;
letter-spacing: .01em;
line-height: 1.35;
}
.teaser-field input[type="text"],
.teaser-field input[type="search"] {
height: 39px;
width: 100%;
padding: 0 11px;
border: 1px solid var(--p-line);
border-radius: 8px;
outline: 0;
background: #fff;
color: var(--p-ink);
font-size: 12px;
}
.teaser-field input:focus {
border-color: #8cbdb0;
box-shadow: 0 0 0 3px rgba(25, 120, 106, .09);
}
.teaser-input {
position: relative;
}
.teaser-input span {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
display: flex;
color: #93a298;
}
.teaser-input .icon {
width: 14px;
height: 14px;
}
.teaser-input input {
padding-left: 31px !important;
}
.teaser-field--check {
grid-column: span 3;
flex-direction: row;
align-items: center;
gap: 14px;
padding-top: 12px;
}
.check-inline {
display: inline-flex;
align-items: center;
gap: 5px;
color: var(--p-ink-soft);
font-size: 10.5px;
font-weight: 500 !important;
cursor: pointer;
}
.check-inline input {
width: 14px;
height: 14px;
accent-color: var(--p-teal);
}
.teaser-submit {
grid-column: span 2;
align-self: end;
min-height: 39px;
border-radius: 8px;
background: var(--p-forest);
color: #fff;
font-size: 11px;
}
.teaser-submit:hover {
background: var(--p-teal);
}
.teaser-side {
display: flex;
flex-direction: column;
justify-content: center;
padding: 22px;
color: #fff7e8;
background:
radial-gradient(circle at 100% 0%, rgba(237, 196, 125, .2), transparent 45%),
var(--p-forest);
}
.teaser-side-label {
color: rgba(255, 255, 255, .58);
font-size: 9.5px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
}
.teaser-side > strong {
margin: 5px 0;
color: #fff8eb;
font-family: var(--font-display);
font-size: 28px;
letter-spacing: -.04em;
line-height: 1.1;
}
.teaser-side p {
color: rgba(255, 255, 255, .6);
font-size: 10.5px;
line-height: 1.6;
}
.teaser-side-pills {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-top: 13px;
}
.teaser-side-pills span {
padding: 5px 7px;
border: 1px solid rgba(255, 255, 255, .14);
border-radius: 5px;
color: rgba(255, 255, 255, .7);
font-size: 9.5px;
line-height: 1.35;
}
.teaser-side-pills b {
color: #edc47d;
}
.teaser-results {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
margin-top: 18px;
}
.teaser-result {
display: flex;
flex-direction: column;
min-width: 0;
padding: 16px;
border: 1px solid var(--p-line);
border-radius: 13px;
background: var(--p-surface);
transition: .2s ease;
}
.teaser-result:hover {
transform: translateY(-3px);
border-color: #c5d9d0;
box-shadow: var(--p-shadow);
}
.teaser-result-top {
display: flex;
align-items: center;
gap: 7px;
margin-bottom: 12px;
}
.teaser-result-sector {
overflow: hidden;
max-width: 125px;
color: var(--p-ink-soft);
font-size: 10.5px;
font-weight: 600;
text-overflow: ellipsis;
white-space: nowrap;
}
.teaser-result-score {
margin-left: auto;
padding: 3px 6px;
border-radius: 5px;
color: #6a4b1b;
background: var(--p-amber-soft);
font-family: var(--font-display);
font-size: 11px;
font-weight: 700;
}
.teaser-result-score small {
font-family: var(--font-body);
font-size: 7.5px;
font-weight: 500;
}
.teaser-result > strong {
color: var(--p-forest);
font-size: 15px;
}
.teaser-result-name {
overflow: hidden;
margin-bottom: 11px;
color: var(--p-muted);
font-size: 9px;
text-overflow: ellipsis;
white-space: nowrap;
}
.teaser-result-metrics {
display: flex;
gap: 10px;
padding-top: 10px;
border-top: 1px solid #eee9df;
}
.teaser-result-metrics span {
display: flex;
flex-direction: column;
gap: 2px;
color: var(--p-muted);
font-size: 8.5px;
}
.teaser-result-metrics b {
color: var(--p-ink-soft);
font-size: 10.5px;
font-variant-numeric: tabular-nums;
}
/* Ranking */
.ranking-head-actions {
display: flex;
align-items: center;
gap: 9px;
flex: 0 0 auto;
}
.ranking-update-pill {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 7px 9px;
border: 1px solid rgba(255, 255, 255, .1);
border-radius: 7px;
color: rgba(255, 255, 255, .46);
font-size: 8px;
}
.ranking-update-pill .icon {
width: 12px;
height: 12px;
}
.podium-grid {
display: grid;
grid-template-columns: 1.15fr 1fr 1fr;
gap: 12px;
align-items: stretch;
}
.podium-card {
position: relative;
display: flex;
flex-direction: column;
padding: 19px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, .1);
border-radius: 15px;
color: #f9f4e7;
background: rgba(255, 255, 255, .045);
transition: .22s ease;
}
.podium-card:hover {
transform: translateY(-3px);
background: rgba(255, 255, 255, .07);
}
.podium-card--gold {
background: linear-gradient(145deg, rgba(221, 175, 92, .21), rgba(255, 255, 255, .04));
border-color: rgba(237, 196, 125, .35);
}
.podium-card--silver {
background: linear-gradient(145deg, rgba(216, 220, 214, .12), rgba(255, 255, 255, .03));
}
.podium-card--bronze {
background: linear-gradient(145deg, rgba(190, 117, 73, .12), rgba(255, 255, 255, .03));
}
.podium-top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
}
.podium-position {
color: #edc47d;
font-family: var(--font-display);
font-size: 22px;
font-weight: 650;
letter-spacing: -.04em;
}
.podium-card--silver .podium-position { color: #d6dcd5; }
.podium-card--bronze .podium-position { color: #d8a17b; }
.podium-score {
color: rgba(255, 255, 255, .65);
font-family: var(--font-display);
font-size: 13px;
}
.podium-score small {
font-family: var(--font-body);
font-size: 7px;
font-weight: 500;
}
.podium-asset {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 19px;
}
.podium-asset > div {
display: flex;
flex-direction: column;
min-width: 0;
}
.podium-asset strong {
color: #fff8e9;
font-size: 14px;
}
.podium-asset span {
overflow: hidden;
color: rgba(255, 255, 255, .58);
font-size: 7.5px;
text-overflow: ellipsis;
white-space: nowrap;
}
.podium-metrics {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
margin-top: auto;
border-top: 1px solid rgba(255, 255, 255, .08);
padding-top: 13px;
}
.podium-metrics div {
display: flex;
flex-direction: column;
gap: 2px;
}
.podium-metrics span {
color: rgba(255, 255, 255, .52);
font-size: 7px;
}
.podium-metrics strong {
color: #f7eeda;
font-size: 11px;
font-variant-numeric: tabular-nums;
}
.podium-change {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 12px;
color: rgba(255, 255, 255, .68);
font-size: 11.5px;
line-height: 1.45;
}
.ranking-note {
display: flex;
align-items: flex-start;
gap: 8px;
margin-top: 18px;
color: rgba(255, 255, 255, .35);
font-size: 8px;
line-height: 1.55;
}
.ranking-note .icon {
width: 14px;
height: 14px;
flex: 0 0 auto;
color: #edc47d;
}
.ranking-note span {
max-width: 900px;
}
/* Portfolio public */
.portfolio-public-badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 6px 9px;
border: 1px solid #c2dbd1;
border-radius: 999px;
color: #3d7c6e;
background: rgba(255, 255, 255, .5);
font-size: 8px;
font-weight: 600;
white-space: nowrap;
}
.portfolio-public-badge .icon {
width: 13px;
height: 13px;
}
.portal-metric-row {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 11px;
margin-bottom: 15px;
}
.portal-metric {
display: flex;
flex-direction: column;
min-height: 116px;
padding: 17px;
border: 1px solid #d5e3dc;
border-radius: 13px;
background: rgba(255, 255, 255, .65);
}
.portal-metric--dark {
color: #fff6e5;
border-color: transparent;
background: var(--p-forest);
}
.portal-metric > span {
color: var(--p-muted);
font-size: 8.5px;
}
.portal-metric--dark > span {
color: rgba(255, 255, 255, .42);
}
.portal-metric strong {
margin: 8px 0 2px;
color: var(--p-forest);
font-family: var(--font-display);
font-size: 23px;
letter-spacing: -.045em;
line-height: 1.1;
font-variant-numeric: tabular-nums;
}
.portal-metric--dark strong {
color: #fff8eb;
}
.portal-metric small {
margin-top: auto;
color: var(--p-muted);
font-size: 7.5px;
}
.portal-metric--dark small {
color: rgba(255, 255, 255, .37);
}
.portfolio-grid-public {
display: grid;
grid-template-columns: minmax(0, 1.55fr) minmax(260px, .75fr);
gap: 14px;
}
.portal-card {
padding: 19px;
border: 1px solid var(--p-line);
border-radius: 15px;
background: var(--p-surface);
box-shadow: var(--p-shadow);
}
.portal-card-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 14px;
margin-bottom: 15px;
}
.portal-card-head h3 {
margin-top: 1px;
color: var(--p-forest);
font-size: 16px;
font-weight: 650;
letter-spacing: -.025em;
}
.public-position-list {
display: flex;
flex-direction: column;
}
.public-position-row {
display: flex;
align-items: center;
gap: 9px;
padding: 9px 0;
border-bottom: 1px solid #efebe1;
}
.public-position-row:last-child {
border-bottom: 0;
}
.public-position-name {
display: flex;
flex-direction: column;
min-width: 0;
width: 175px;
line-height: 1.3;
}
.public-position-name strong {
color: var(--p-forest);
font-size: 9.5px;
}
.public-position-name span {
overflow: hidden;
color: var(--p-muted);
font-size: 7.5px;
text-overflow: ellipsis;
white-space: nowrap;
}
.public-position-value {
display: flex;
flex-direction: column;
margin-left: auto;
text-align: right;
line-height: 1.3;
}
.public-position-value span {
color: var(--p-muted);
font-size: 7px;
}
.public-position-value strong {
color: var(--p-ink-soft);
font-size: 9px;
font-variant-numeric: tabular-nums;
}
.public-position-performance {
width: 48px;
text-align: right;
font-size: 9px;
font-weight: 700;
}
.public-position-allocation {
display: flex;
align-items: center;
gap: 6px;
width: 90px;
margin-left: 7px;
}
.public-position-allocation span {
width: 27px;
color: var(--p-ink-soft);
font-size: 7.5px;
font-weight: 650;
text-align: right;
}
.public-position-allocation .progress {
flex: 1;
height: 4px;
background: #edf0e8;
}
.public-position-allocation .progress i {
display: block;
height: 100%;
border-radius: 4px;
background: var(--p-teal);
}
.public-allocation-card {
display: flex;
flex-direction: column;
}
.public-donut {
width: 155px;
height: 155px;
margin: 1px auto 12px;
border-radius: 50%;
position: relative;
box-shadow: 0 10px 24px rgba(30, 60, 50, .1);
}
.public-donut::after {
content: "";
position: absolute;
inset: 34px;
border-radius: 50%;
background: var(--p-surface);
box-shadow: inset 0 0 0 1px #efebe1;
}
.public-legend {
display: flex;
flex-direction: column;
gap: 5px;
}
.public-legend > div {
display: flex;
align-items: center;
gap: 6px;
font-size: 8px;
}
.public-legend span:nth-child(2) {
color: var(--p-ink-soft);
}
.public-legend strong {
margin-left: auto;
color: var(--p-forest);
font-size: 8px;
}
.legend-dot {
width: 6px;
height: 6px;
border-radius: 2px;
flex: 0 0 auto;
}
.legend-dot--c0 { background: #177d6e; }
.legend-dot--c1 { background: #c9872f; }
.legend-dot--c2 { background: #c35c4a; }
.legend-dot--c3 { background: #59639a; }
.legend-dot--c4 { background: #93a58a; }
.legend-dot--c5 { background: #8d6b87; }
.legend-dot--c6 { background: #4d8ea1; }
.legend-dot--cash { background: #d8d2c4; }
/* Activity / radar */
.public-two-col {
display: grid;
grid-template-columns: 1.15fr .85fr;
gap: 14px;
}
.public-activity-list {
display: flex;
flex-direction: column;
}
.public-activity-row {
display: flex;
align-items: center;
gap: 9px;
padding: 9px 0;
border-top: 1px solid #efebe1;
}
.public-activity-row:first-child {
border-top: 0;
}
.public-activity-row > div:nth-child(2) {
display: flex;
flex-direction: column;
min-width: 0;
line-height: 1.3;
}
.public-activity-row > div:nth-child(2) strong {
color: var(--p-forest);
font-size: 9px;
}
.public-activity-row > div:nth-child(2) span {
color: var(--p-muted);
font-size: 7px;
}
.public-activity-money {
display: flex;
flex-direction: column;
align-items: flex-end;
margin-left: auto;
line-height: 1.3;
text-align: right;
}
.public-activity-money strong {
color: var(--p-ink-soft);
font-size: 8.5px;
font-variant-numeric: tabular-nums;
}
.public-activity-money span {
color: var(--p-muted);
font-size: 7px;
}
.public-activity-pct {
width: 47px;
text-align: right;
font-size: 9px;
font-weight: 700;
}
.public-radar-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.public-radar-row {
padding: 10px;
border: 1px solid #efebe1;
border-radius: 9px;
background: #fbf8f1;
}
.public-radar-head {
display: flex;
align-items: center;
gap: 7px;
}
.public-radar-head strong {
color: var(--p-forest);
font-size: 9.5px;
}
.public-radar-head .badge {
margin-left: auto;
font-size: 8px;
}
.public-radar-prices {
display: flex;
justify-content: space-between;
gap: 10px;
margin-top: 7px;
color: var(--p-muted);
font-size: 7px;
}
.public-radar-prices strong {
color: var(--p-ink-soft);
font-size: 8px;
}
.public-radar-tags {
display: flex;
gap: 4px;
margin-top: 6px;
}
.portal-empty-mini {
display: flex;
flex-direction: column;
align-items: center;
padding: 30px 18px;
text-align: center;
color: var(--p-muted);
}
.portal-empty-mini .icon {
width: 23px;
height: 23px;
margin-bottom: 8px;
color: var(--p-teal);
}
.portal-empty-mini p {
max-width: 280px;
font-size: 9px;
line-height: 1.6;
}
/* Ad */
.portal-home-ad {
display: flex;
align-items: center;
gap: 15px;
margin-top: 14px;
padding: 15px 18px;
border: 1px dashed #cdd8cc;
border-radius: 13px;
background: #f3f6ee;
}
.portal-ad-label {
color: #9aa797;
font-size: 6.5px;
letter-spacing: .12em;
text-transform: uppercase;
writing-mode: vertical-rl;
transform: rotate(180deg);
}
.portal-ad-mark {
display: grid;
place-items: center;
width: 35px;
height: 35px;
border-radius: 9px;
color: var(--p-amber);
background: var(--p-amber-soft);
}
.portal-ad-mark .icon {
width: 17px;
height: 17px;
}
.portal-ad-copy {
display: flex;
flex-direction: column;
flex: 1;
line-height: 1.4;
}
.portal-ad-copy strong {
color: var(--p-forest);
font-size: 10.5px;
}
.portal-ad-copy span {
color: var(--p-muted);
font-size: 8.5px;
}
.portal-home-ad .button {
flex: 0 0 auto;
}
/* Method */
.method-grid {
display: grid;
grid-template-columns: .9fr 1.1fr;
gap: 56px;
align-items: center;
}
.method-intro h2 {
margin-bottom: 14px;
font-size: clamp(32px, 4vw, 46px);
letter-spacing: -.045em;
}
.method-intro p {
max-width: 440px;
margin-bottom: 20px;
color: var(--p-ink-soft);
font-size: 13px;
line-height: 1.7;
}
.method-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 11px;
}
.method-card {
padding: 17px;
border: 1px solid var(--p-line);
border-radius: 13px;
background: var(--p-surface);
}
.method-icon {
display: grid;
place-items: center;
width: 31px;
height: 31px;
margin-bottom: 12px;
border-radius: 8px;
}
.method-icon .icon {
width: 15px;
height: 15px;
}
.method-icon--amber { color: var(--p-amber); background: var(--p-amber-soft); }
.method-icon--teal { color: var(--p-teal); background: var(--p-teal-soft); }
.method-icon--indigo { color: var(--p-indigo); background: var(--p-indigo-soft); }
.method-card strong {
display: block;
margin-bottom: 6px;
color: var(--p-forest);
font-size: 12px;
line-height: 1.3;
}
.method-card p {
color: var(--p-ink-soft);
font-size: 10px;
line-height: 1.6;
}
.method-footnote {
margin-top: 32px;
padding-top: 18px;
border-top: 1px solid var(--p-line);
}
.method-footnote p {
display: flex;
align-items: flex-start;
gap: 7px;
max-width: 1000px;
color: var(--p-muted);
font-size: 8px;
line-height: 1.55;
}
.method-footnote .icon {
width: 14px;
height: 14px;
flex: 0 0 auto;
color: var(--p-teal);
}
/* Footer override */
.portal-page .site-footer {
background: #0c2822;
}
.portal-page .site-footer .brand--dark {
color: #fff;
}
.portal-page .footer-col a {
color: rgba(255, 255, 255, .6);
}
.portal-page .footer-col a:hover {
color: #fff;
}
/* =========================================================
Páginas internas — screener / ranking / ativo
========================================================= */
.portal-page-hero {
position: relative;
padding: 58px 0 44px;
color: #f9f4e7;
background:
radial-gradient(circle at 84% 0%, rgba(222, 171, 86, .14), transparent 34%),
linear-gradient(145deg, #102e28, #173d34);
}
.portal-page-hero .portal-container {
position: relative;
z-index: 2;
}
.portal-breadcrumbs {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 18px;
color: rgba(255, 255, 255, .35);
font-size: 8px;
}
.portal-breadcrumbs a:hover {
color: #edc47d;
}
.portal-breadcrumbs span:last-child {
color: rgba(255, 255, 255, .65);
}
.portal-page-hero h1 {
margin: 0 0 12px;
color: #fff8ea;
font-size: clamp(34px, 4.5vw, 55px);
letter-spacing: -.05em;
}
.portal-page-hero h1 .highlight {
color: #edc47d;
}
.portal-page-hero p {
max-width: 700px;
color: rgba(255, 255, 255, .5);
font-size: 13px;
line-height: 1.7;
}
.page-stats-strip {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 24px;
}
.page-stat-pill {
display: inline-flex;
align-items: baseline;
gap: 6px;
padding: 9px 13px;
border: 1px solid rgba(255, 255, 255, .12);
border-radius: 8px;
color: rgba(255, 255, 255, .66);
background: rgba(255, 255, 255, .045);
font-size: 11px;
line-height: 1.35;
}
.page-stat-pill strong {
color: #f5d493;
font-size: 14px;
font-variant-numeric: tabular-nums;
}
/* Screener page */
.portal-section--screener-page {
padding: 30px 0 70px;
}
.screener-layout {
display: grid;
grid-template-columns: 285px minmax(0, 1fr);
gap: 20px;
align-items: start;
}
.filter-panel {
position: sticky;
top: 96px;
border: 1px solid var(--p-line);
border-radius: 14px;
background: var(--p-surface);
box-shadow: var(--p-shadow);
overflow: hidden;
}
.filter-panel-head {
padding: 16px 17px 13px;
border-bottom: 1px solid #efebe1;
}
.filter-panel-head strong {
display: block;
color: var(--p-forest);
font-family: var(--font-display);
font-size: 14px;
letter-spacing: -.02em;
}
.filter-panel-head span {
color: var(--p-muted);
font-size: 8px;
}
.filter-form {
display: flex;
flex-direction: column;
gap: 13px;
padding: 16px 17px;
}
.filter-group {
display: flex;
flex-direction: column;
gap: 5px;
}
.filter-group > label,
.filter-label {
color: var(--p-ink-soft);
font-size: 10.5px;
font-weight: 700;
line-height: 1.35;
}
.filter-group input,
.filter-group select {
width: 100%;
height: 36px;
padding: 0 9px;
border: 1px solid var(--p-line);
border-radius: 7px;
outline: 0;
color: var(--p-ink);
background: #fff;
font-size: 12px;
}
.filter-group input:focus,
.filter-group select:focus {
border-color: #8cbdb0;
box-shadow: 0 0 0 3px rgba(25, 120, 106, .08);
}
.filter-grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 7px;
}
.filter-segment {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 3px;
padding: 3px;
border: 1px solid var(--p-line);
border-radius: 7px;
background: #f6f2e9;
}
.filter-segment label {
display: flex;
align-items: center;
justify-content: center;
height: 28px;
border-radius: 5px;
color: var(--p-muted);
font-size: 10.5px;
font-weight: 650;
cursor: pointer;
}
.filter-segment input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.filter-segment label:has(input:checked) {
color: var(--p-forest);
background: #fff;
box-shadow: 0 2px 7px rgba(34, 53, 42, .1);
}
.filter-checks {
display: flex;
flex-direction: column;
gap: 7px;
padding-top: 2px;
}
.filter-check {
display: flex;
align-items: center;
gap: 7px;
color: var(--p-ink-soft);
font-size: 10.5px;
line-height: 1.35;
cursor: pointer;
}
.filter-check input {
width: 14px;
height: 14px;
accent-color: var(--p-teal);
}
.filter-actions {
display: flex;
flex-direction: column;
gap: 6px;
margin-top: 3px;
}
.filter-actions .button {
width: 100%;
min-height: 38px;
font-size: 10px;
}
.filter-reset {
text-align: center;
color: var(--p-muted);
font-size: 10px;
}
.filter-reset:hover {
color: var(--p-coral);
}
.filter-note {
padding: 12px 17px 15px;
border-top: 1px solid #efebe1;
color: var(--p-muted);
font-size: 9.5px;
line-height: 1.6;
}
.screener-results {
min-width: 0;
}
.results-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
margin-bottom: 11px;
}
.results-count {
color: var(--p-ink-soft);
font-size: 10px;
}
.results-count strong {
color: var(--p-forest);
font-family: var(--font-display);
font-size: 15px;
}
.results-toolbar-right {
display: flex;
align-items: center;
gap: 8px;
}
.results-toolbar-right label {
color: var(--p-muted);
font-size: 10px;
}
.results-toolbar-right select {
height: 34px;
padding: 0 26px 0 9px;
border: 1px solid var(--p-line);
border-radius: 6px;
color: var(--p-ink-soft);
background: #fff;
font-size: 11px;
}
.active-filters {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-bottom: 11px;
}
.active-filter {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 7px;
border-radius: 5px;
color: #5e6a61;
background: #e9eee6;
font-size: 7.5px;
}
.active-filter a {
color: #8a968c;
}
.screener-table-wrap {
overflow-x: auto;
border: 1px solid var(--p-line);
border-radius: 13px;
background: var(--p-surface);
box-shadow: var(--p-shadow);
}
.screener-table {
width: 100%;
border-collapse: collapse;
font-size: 9.5px;
}
.screener-table th {
padding: 9px 6px;
color: #8f9c93;
background: #f7f3ea;
border-bottom: 1px solid var(--p-line);
font-size: 6.5px;
font-weight: 700;
letter-spacing: .06em;
text-align: right;
text-transform: uppercase;
white-space: normal;
}
.screener-table th:nth-child(1) {
text-align: left;
}
.screener-table td {
padding: 9px 6px;
border-bottom: 1px solid #efebe1;
color: var(--p-ink-soft);
text-align: right;
vertical-align: middle;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.screener-table tbody tr:last-child td {
border-bottom: 0;
}
.screener-table tbody tr:hover {
background: #fcfaf5;
}
.screener-table td:first-child {
text-align: left;
min-width: 155px;
}
.screener-asset {
display: flex;
align-items: center;
gap: 8px;
}
.screener-asset-copy {
display: flex;
flex-direction: column;
min-width: 0;
line-height: 1.3;
}
.screener-asset-copy strong {
color: var(--p-forest);
font-size: 9.5px;
}
.screener-asset-copy span {
overflow: hidden;
max-width: 125px;
color: var(--p-muted);
font-size: 7px;
text-overflow: ellipsis;
white-space: nowrap;
}
.screener-score {
display: inline-block;
min-width: 27px;
padding: 3px 5px;
border-radius: 5px;
color: #6b4b16;
background: var(--p-amber-soft);
font-family: var(--font-display);
font-size: 9px;
font-weight: 700;
}
.screener-pl {
color: var(--p-forest);
font-weight: 650;
}
.screener-change {
font-size: 8px;
font-weight: 650;
}
.screener-loss-badge {
display: inline-block;
padding: 3px 5px;
border-radius: 4px;
color: #47765d;
background: #e3f1e9;
font-size: 7px;
font-weight: 650;
}
.screener-loss-badge--warn {
color: #9d5f33;
background: #f8ead9;
}
.screener-loss-badge--bad {
color: #a3463b;
background: #f7e2de;
}
.pagination-portal {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
margin-top: 14px;
}
.pagination-portal a,
.pagination-portal span {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 6px 9px;
border: 1px solid var(--p-line);
border-radius: 6px;
color: var(--p-ink-soft);
background: var(--p-surface);
font-size: 8px;
}
.pagination-portal a:hover {
color: var(--p-teal);
border-color: #b9d4ca;
}
.pagination-portal .is-disabled {
opacity: .4;
}
.pagination-portal .pagination-info {
border: 0;
background: transparent;
color: var(--p-muted);
}
/* Ranking page */
.portal-section--ranking-page {
padding: 30px 0 70px;
}
.ranking-podium-band {
margin-bottom: 16px;
padding: 18px;
border-radius: 18px;
background:
radial-gradient(circle at 85% 0%, rgba(226, 178, 95, .12), transparent 32%),
linear-gradient(145deg, #102e28, #173d34);
box-shadow: var(--p-shadow-lg);
}
.ranking-podium-band .podium-grid {
margin: 0;
}
.ranking-page-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
margin-bottom: 18px;
padding: 12px 15px;
border: 1px solid var(--p-line);
border-radius: 11px;
background: var(--p-surface);
}
.ranking-page-toolbar p {
max-width: 780px;
color: var(--p-ink-soft);
font-size: 11px;
line-height: 1.55;
}
.ranking-page-toolbar form {
display: flex;
align-items: center;
gap: 7px;
}
.ranking-page-toolbar label {
color: var(--p-ink-soft);
font-size: 10px;
font-weight: 650;
}
.ranking-page-toolbar select {
height: 34px;
padding: 0 26px 0 9px;
border: 1px solid var(--p-line);
border-radius: 6px;
color: var(--p-ink-soft);
background: #fff;
font-size: 11px;
}
.ranking-table-wrap {
border: 1px solid var(--p-line);
border-radius: 13px;
background: var(--p-surface);
box-shadow: var(--p-shadow);
overflow-x: auto;
}
.ranking-table {
width: 100%;
border-collapse: collapse;
font-size: 9.5px;
}
.ranking-table th {
padding: 9px 10px;
color: #8f9c93;
background: #f7f3ea;
border-bottom: 1px solid var(--p-line);
font-size: 7px;
font-weight: 700;
letter-spacing: .08em;
text-align: right;
text-transform: uppercase;
white-space: nowrap;
}
.ranking-table th:nth-child(1),
.ranking-table th:nth-child(2) {
text-align: left;
}
.ranking-table td {
padding: 9px 6px;
border-bottom: 1px solid #efebe1;
color: var(--p-ink-soft);
text-align: right;
vertical-align: middle;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.ranking-table tbody tr:last-child td {
border-bottom: 0;
}
.ranking-table tbody tr:hover {
background: #fcfaf5;
}
.ranking-table td:first-child {
width: 45px;
text-align: left;
}
.ranking-table td:nth-child(2) {
text-align: left;
min-width: 155px;
}
.rank-position {
display: inline-grid;
place-items: center;
width: 24px;
height: 24px;
border-radius: 50%;
color: var(--p-ink-soft);
background: #f0ece2;
font-family: var(--font-display);
font-size: 9px;
font-weight: 700;
}
.rank-position--top {
color: #6d4b16;
background: var(--p-amber-soft);
}
.rank-change {
display: inline-flex;
align-items: center;
gap: 2px;
font-size: 7.5px;
font-weight: 650;
}
.rank-change--up { color: var(--p-teal); }
.rank-change--down { color: var(--p-coral); }
.rank-change--flat { color: var(--p-muted); }
.ranking-method-grid {
display: grid;
grid-template-columns: 1.1fr .9fr;
gap: 24px;
margin-top: 24px;
}
.ranking-method-card {
padding: 22px;
border: 1px solid var(--p-line);
border-radius: 13px;
background: var(--p-surface);
}
.ranking-method-card h3 {
margin-bottom: 9px;
color: var(--p-forest);
font-size: 15px;
}
.ranking-method-card p,
.ranking-method-card li {
color: var(--p-ink-soft);
font-size: 9px;
line-height: 1.7;
}
.ranking-method-card ul {
margin-top: 9px;
padding-left: 16px;
}
.score-breakdown {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 13px;
}
.score-breakdown-row {
display: grid;
grid-template-columns: 110px 1fr 32px;
align-items: center;
gap: 8px;
color: var(--p-ink-soft);
font-size: 8px;
}
.score-breakdown-bar {
height: 5px;
border-radius: 4px;
background: #eee9de;
overflow: hidden;
}
.score-breakdown-bar i {
display: block;
height: 100%;
border-radius: 4px;
background: var(--p-teal);
}
.score-breakdown-row strong {
color: var(--p-forest);
font-size: 8px;
text-align: right;
}
/* Asset detail */
.asset-page-hero {
padding: 46px 0 34px;
}
.asset-hero-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 24px;
}
.asset-identity {
display: flex;
align-items: center;
gap: 13px;
}
.asset-identity h1 {
display: flex;
align-items: center;
gap: 8px;
margin: 0;
color: #fff8ea;
font-size: clamp(31px, 4vw, 44px);
}
.asset-identity p {
margin-top: 4px;
color: rgba(255, 255, 255, .45);
font-size: 10px;
}
.asset-hero-price {
text-align: right;
}
.asset-hero-price strong {
display: block;
color: #fff8ea;
font-family: var(--font-display);
font-size: 28px;
letter-spacing: -.04em;
font-variant-numeric: tabular-nums;
}
.asset-hero-price span {
display: inline-flex;
align-items: center;
gap: 4px;
margin-top: 3px;
font-size: 10px;
font-weight: 650;
}
.asset-hero-meta {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 23px;
}
.asset-meta-tag {
padding: 5px 8px;
border: 1px solid rgba(255, 255, 255, .1);
border-radius: 5px;
color: rgba(255, 255, 255, .5);
background: rgba(255, 255, 255, .03);
font-size: 7.5px;
}
.asset-meta-tag--rank {
color: #f0cb88;
border-color: rgba(240, 203, 136, .25);
background: rgba(240, 203, 136, .07);
}
.asset-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 305px;
gap: 20px;
align-items: start;
padding: 26px 0 65px;
}
.asset-main,
.asset-side {
display: flex;
flex-direction: column;
gap: 14px;
min-width: 0;
}
.asset-metric-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 9px;
}
.asset-metric {
padding: 13px;
border: 1px solid var(--p-line);
border-radius: 11px;
background: var(--p-surface);
}
.asset-metric span {
display: block;
color: var(--p-muted);
font-size: 7.5px;
}
.asset-metric strong {
display: block;
margin: 5px 0 1px;
color: var(--p-forest);
font-family: var(--font-display);
font-size: 16px;
letter-spacing: -.035em;
font-variant-numeric: tabular-nums;
}
.asset-metric small {
color: var(--p-muted);
font-size: 6.5px;
}
.asset-graham-note {
margin: -2px 0 2px;
color: var(--p-muted);
font-size: 7.5px;
line-height: 1.5;
}
.asset-ai-card {
position: relative;
padding: 19px;
overflow: hidden;
border: 1px solid #d9c79e;
border-radius: 14px;
background:
radial-gradient(circle at 100% 0%, rgba(223, 174, 84, .18), transparent 45%),
#fcf6e9;
}
.asset-ai-card::after {
content: "";
position: absolute;
width: 120px;
height: 120px;
right: -50px;
bottom: -60px;
border: 1px solid rgba(196, 136, 45, .2);
border-radius: 50%;
}
.asset-ai-head {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
color: var(--p-amber);
font-size: 7.5px;
font-weight: 750;
letter-spacing: .12em;
text-transform: uppercase;
}
.asset-ai-head .icon {
width: 14px;
height: 14px;
}
.asset-ai-card p {
position: relative;
z-index: 1;
color: #5e5d4c;
font-size: 10px;
line-height: 1.7;
}
.asset-ai-risks {
margin-top: 9px;
padding-top: 9px;
border-top: 1px solid rgba(196, 136, 45, .18);
color: #8b6d3a !important;
font-size: 9px !important;
}
.asset-score-card {
display: flex;
align-items: center;
gap: 14px;
padding: 15px;
border: 1px solid var(--p-line);
border-radius: 12px;
background: var(--p-surface);
}
.asset-score-circle {
display: grid;
place-items: center;
width: 58px;
height: 58px;
flex: 0 0 auto;
border-radius: 50%;
color: #6b4b16;
background: conic-gradient(#c4882d var(--score, 0%), #eee7d8 0);
position: relative;
}
.asset-score-circle::after {
content: "";
position: absolute;
inset: 6px;
border-radius: 50%;
background: var(--p-surface);
}
.asset-score-circle strong {
position: relative;
z-index: 1;
font-family: var(--font-display);
font-size: 17px;
letter-spacing: -.04em;
}
.asset-score-copy h3 {
color: var(--p-forest);
font-size: 13px;
}
.asset-score-copy p {
margin-top: 2px;
color: var(--p-muted);
font-size: 8px;
}
.asset-card {
padding: 18px;
border: 1px solid var(--p-line);
border-radius: 13px;
background: var(--p-surface);
box-shadow: var(--p-shadow);
}
.asset-card-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
margin-bottom: 13px;
}
.asset-card-head h2 {
margin: 0;
color: var(--p-forest);
font-size: 16px;
}
.asset-card-head p {
margin-top: 2px;
color: var(--p-muted);
font-size: 8px;
}
.data-table-portal {
width: 100%;
border-collapse: collapse;
font-size: 8.5px;
}
.data-table-portal th {
padding: 7px 8px;
color: #8f9c93;
border-bottom: 1px solid var(--p-line);
font-size: 6.5px;
font-weight: 700;
letter-spacing: .08em;
text-align: right;
text-transform: uppercase;
white-space: nowrap;
}
.data-table-portal th:first-child {
text-align: left;
}
.data-table-portal td {
padding: 7px 8px;
border-bottom: 1px solid #efebe1;
color: var(--p-ink-soft);
text-align: right;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.data-table-portal td:first-child {
text-align: left;
color: var(--p-forest);
font-weight: 650;
}
.data-table-portal tr:last-child td {
border-bottom: 0;
}
.asset-loss-summary {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 9px;
margin-top: 12px;
}
.loss-card {
padding: 12px;
border-radius: 9px;
background: #f6f3ea;
}
.loss-card span {
display: block;
color: var(--p-muted);
font-size: 7px;
}
.loss-card strong {
display: block;
margin: 3px 0;
color: var(--p-forest);
font-family: var(--font-display);
font-size: 15px;
}
.loss-card small {
color: var(--p-muted);
font-size: 6.5px;
}
.loss-card--good { background: #eaf4ee; }
.loss-card--bad { background: #f9e9e3; }
.chart-box {
position: relative;
height: 150px;
margin-top: 6px;
}
.chart-box svg {
display: block;
width: 100%;
height: 100%;
overflow: visible;
}
.chart-axis {
display: flex;
justify-content: space-between;
margin-top: 4px;
color: #9ba69d;
font-size: 6px;
}
.dividend-summary {
display: flex;
gap: 18px;
margin-bottom: 8px;
}
.dividend-summary div span {
display: block;
color: var(--p-muted);
font-size: 7px;
}
.dividend-summary div strong {
display: block;
color: var(--p-forest);
font-family: var(--font-display);
font-size: 15px;
}
.dividend-bar-list {
display: flex;
flex-direction: column;
gap: 6px;
margin-top: 10px;
}
.dividend-bar-row {
display: grid;
grid-template-columns: 38px 1fr 55px;
align-items: center;
gap: 7px;
font-size: 7.5px;
}
.dividend-bar-row > span:first-child {
color: var(--p-muted);
}
.dividend-bar {
height: 7px;
border-radius: 4px;
background: #efebe1;
overflow: hidden;
}
.dividend-bar i {
display: block;
height: 100%;
border-radius: 4px;
background: linear-gradient(90deg, #d6a95e, #b57d2b);
}
.dividend-bar-row strong {
color: var(--p-ink-soft);
text-align: right;
font-variant-numeric: tabular-nums;
}
.asset-side-card {
padding: 15px;
border: 1px solid var(--p-line);
border-radius: 12px;
background: var(--p-surface);
}
.asset-side-card h3 {
margin-bottom: 9px;
color: var(--p-forest);
font-size: 12px;
}
.asset-info-list {
display: flex;
flex-direction: column;
}
.asset-info-list div {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
padding: 6px 0;
border-bottom: 1px solid #efebe1;
}
.asset-info-list div:last-child {
border-bottom: 0;
}
.asset-info-list span {
color: var(--p-muted);
font-size: 7.5px;
}
.asset-info-list strong {
color: var(--p-ink-soft);
font-size: 8px;
text-align: right;
}
.asset-source-note {
padding: 13px;
border: 1px dashed #d5d0c3;
border-radius: 10px;
color: var(--p-muted);
font-size: 7.5px;
line-height: 1.6;
background: #faf7f0;
}
.similar-list {
display: flex;
flex-direction: column;
gap: 6px;
}
.similar-row {
display: flex;
align-items: center;
gap: 7px;
padding: 7px 0;
border-bottom: 1px solid #efebe1;
}
.similar-row:last-child {
border-bottom: 0;
}
.similar-row > div {
display: flex;
flex-direction: column;
min-width: 0;
}
.similar-row strong {
color: var(--p-forest);
font-size: 8.5px;
}
.similar-row span {
overflow: hidden;
color: var(--p-muted);
font-size: 6.5px;
text-overflow: ellipsis;
white-space: nowrap;
}
.similar-row > b {
margin-left: auto;
color: var(--p-teal);
font-size: 8px;
}
.asset-scenario-note {
margin-top: 12px;
padding-top: 10px;
border-top: 1px solid var(--p-line);
color: var(--p-muted);
font-size: 7px;
line-height: 1.5;
}
/* Ranking comparison bars */
.compare-bars {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 10px;
}
.compare-row {
display: grid;
grid-template-columns: 45px 1fr 45px;
align-items: center;
gap: 7px;
font-size: 7.5px;
}
.compare-row span {
color: var(--p-muted);
}
.compare-row strong {
color: var(--p-ink-soft);
text-align: right;
}
.compare-track {
height: 6px;
border-radius: 4px;
background: #efebe1;
overflow: hidden;
}
.compare-track i {
display: block;
height: 100%;
border-radius: 4px;
background: var(--p-teal);
}
/* Responsive */
@media (max-width: 1120px) {
.portal-hero-grid {
gap: 34px;
}
.portal-nav {
gap: 18px;
margin-right: 14px;
}
.portal-hero h1 {
font-size: 52px;
}
.hero-floating-note--screener {
left: -8px;
}
.hero-floating-note--source {
right: -4px;
}
.screener-teaser-form {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.teaser-field--wide {
grid-column: span 2;
}
.teaser-field--check {
grid-column: span 2;
}
.teaser-submit {
grid-column: span 2;
}
.method-grid {
gap: 34px;
}
.method-cards {
grid-template-columns: 1fr;
}
}
@media (max-width: 1020px) {
.portal-nav {
display: none;
}
.portal-menu-toggle {
display: inline-grid;
}
.portal-header-cta {
display: none;
}
.portal-hero-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.portal-hero-copy {
max-width: 720px;
}
.portal-hero-panel {
width: min(100%, 650px);
justify-self: center;
}
.hero-floating-note--screener {
left: 8px;
}
.hero-floating-note--source {
right: 8px;
}
.screener-teaser {
grid-template-columns: 1fr;
}
.teaser-side {
flex-direction: row;
align-items: center;
gap: 15px;
padding: 15px 22px;
}
.teaser-side > strong {
margin: 0;
font-size: 20px;
}
.teaser-side p {
display: none;
}
.teaser-side-pills {
margin-top: 0;
margin-left: auto;
}
.teaser-results {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.podium-grid {
grid-template-columns: 1fr 1fr;
}
.podium-card--gold {
grid-column: 1 / -1;
}
.portfolio-grid-public {
grid-template-columns: 1fr;
}
.public-two-col {
grid-template-columns: 1fr;
}
.method-grid {
grid-template-columns: 1fr;
gap: 25px;
}
.method-cards {
grid-template-columns: repeat(3, 1fr);
}
.screener-layout {
grid-template-columns: 245px minmax(0, 1fr);
}
.asset-layout {
grid-template-columns: 1fr;
}
.asset-side {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ranking-method-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 760px) {
.portal-container {
width: calc(100% - 30px);
}
.portal-header-inner {
min-height: 68px;
}
.portal-header .brand-copy strong {
font-size: 17px;
}
.portal-admin-link {
display: none;
}
.portal-hero {
padding-top: 40px;
}
.portal-hero h1 {
font-size: 41px;
letter-spacing: -.045em;
}
.portal-hero-lead {
font-size: 13px;
}
.portal-hero-search {
flex-wrap: wrap;
padding: 8px;
}
.portal-hero-search input {
width: calc(100% - 30px);
flex: none;
}
.portal-hero-search .button {
width: 100%;
}
.portal-hero-stats {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 15px 0;
}
.portal-hero-stats div:nth-child(2) {
border-right: 0;
}
.portal-hero-stats div:nth-child(3),
.portal-hero-stats div:nth-child(4) {
padding-top: 10px;
}
.portal-hero-panel {
width: 100%;
}
.hero-floating-note {
display: none;
}
.portal-market-strip {
flex-wrap: wrap;
gap: 10px 20px;
padding: 15px 0;
}
.portal-market-title {
flex-basis: 100%;
}
.portal-market-time {
flex-basis: 100%;
margin-left: 0;
}
.portal-section {
padding: 58px 0;
}
.portal-section-heading--split {
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
.portal-section-heading h2 {
font-size: 30px;
}
.screener-teaser-form {
grid-template-columns: 1fr 1fr;
padding: 16px;
}
.teaser-field--wide,
.teaser-field--check,
.teaser-submit {
grid-column: 1 / -1;
}
.teaser-field--check {
flex-wrap: wrap;
gap: 10px;
}
.teaser-side {
flex-wrap: wrap;
}
.teaser-side-pills {
margin-left: 0;
}
.teaser-results {
grid-template-columns: 1fr;
}
.podium-grid {
grid-template-columns: 1fr;
}
.podium-card--gold {
grid-column: auto;
}
.method-cards {
grid-template-columns: 1fr;
}
.portal-metric-row {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.public-position-row {
flex-wrap: wrap;
}
.public-position-name {
width: calc(100% - 60px);
}
.public-position-value {
margin-left: 41px;
align-items: flex-start;
text-align: left;
}
.public-position-performance {
margin-left: auto;
}
.public-position-allocation {
width: 100%;
margin-left: 41px;
}
.portal-home-ad {
flex-wrap: wrap;
}
.portal-home-ad .button {
width: 100%;
}
.portal-ad-copy {
flex-basis: calc(100% - 60px);
}
.portal-ad-label {
display: none;
}
.screener-layout {
grid-template-columns: 1fr;
}
.filter-panel {
position: static;
}
.filter-form {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.filter-form .filter-group:first-child,
.filter-form .filter-segment,
.filter-form .filter-checks,
.filter-form .filter-actions {
grid-column: 1 / -1;
}
.screener-table {
min-width: 880px;
}
.ranking-table {
min-width: 940px;
}
.results-toolbar {
align-items: flex-start;
flex-direction: column;
gap: 8px;
}
.ranking-podium-band {
margin-bottom: 16px;
padding: 18px;
border-radius: 18px;
background:
radial-gradient(circle at 85% 0%, rgba(226, 178, 95, .12), transparent 32%),
linear-gradient(145deg, #102e28, #173d34);
box-shadow: var(--p-shadow-lg);
}
.ranking-podium-band .podium-grid {
margin: 0;
}
.ranking-page-toolbar {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.asset-hero-top {
flex-direction: column;
gap: 17px;
}
.asset-hero-price {
text-align: left;
}
.asset-metric-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.asset-side {
grid-template-columns: 1fr;
}
.asset-loss-summary {
grid-template-columns: 1fr;
}
}
@media (max-width: 500px) {
.portal-hero h1 {
font-size: 36px;
}
.portal-quick-filters {
font-size: 7.5px;
}
.portal-quick-filters > span {
flex-basis: 100%;
}
.portal-hero-stats strong {
font-size: 18px;
}
.teaser-result-metrics {
gap: 7px;
}
.portal-metric-row {
grid-template-columns: 1fr;
}
.portal-metric {
min-height: 98px;
}
.filter-form {
grid-template-columns: 1fr;
}
.filter-form .filter-group,
.filter-form .filter-segment,
.filter-form .filter-checks,
.filter-form .filter-actions {
grid-column: auto;
}
.asset-identity {
align-items: flex-start;
}
.asset-identity h1 {
font-size: 32px;
}
.chart-box {
height: 120px;
}
.score-breakdown-row {
grid-template-columns: 90px 1fr 30px;
}
}
/* Páginas institucionais simples (anuncie/privacidade) */
.portal-page .simple-header {
background: var(--p-forest);
}
.portal-page .simple-header .brand,
.portal-page .simple-header .brand--light {
color: #fff;
}
.portal-page .simple-header .brand-copy span {
color: rgba(255, 255, 255, .45);
}
.portal-page .simple-header .header-login {
color: rgba(255, 255, 255, .62);
}
.portal-page .simple-header .header-login:hover {
color: #fff;
}
.portal-page .simple-hero h1 {
color: #fff8ea;
}
.portal-page .simple-hero p {
color: rgba(255, 255, 255, .62);
}
.portal-page .simple-hero .eyebrow--light {
color: #e8c98e;
}
.portal-page .simple-hero .button--white {
color: var(--p-forest);
}
.portal-page .simple-page .contact-panel h3 {
color: #fff8ea;
}
.portal-page .simple-page .contact-panel p {
color: rgba(255, 255, 255, .55);
}
.portal-page .simple-page .contact-panel .eyebrow {
color: #e8c98e;
}
.portal-page .legal-hero h1 {
color: #fff8ea;
}
.portal-page .legal-hero p {
color: rgba(255, 255, 255, .62);
}
.portal-page .legal-hero .eyebrow {
color: #e8c98e;
}.portal-page .site-footer .footer-col h4 { color: rgba(237, 196, 125, .78); }
/* Metodologia */
.methodology-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 330px;
gap: 34px;
align-items: start;
}
.methodology-content {
max-width: 790px;
}
.methodology-content section + section {
margin-top: 42px;
padding-top: 34px;
border-top: 1px solid rgba(16, 46, 40, .1);
}
.methodology-content h2 {
margin: 8px 0 14px;
color: var(--p-ink);
font-family: var(--font-display);
font-size: clamp(24px, 2.2vw, 31px);
letter-spacing: -.035em;
line-height: 1.15;
}
.methodology-content p,
.methodology-content li {
color: var(--p-ink-soft);
font-size: 13px;
line-height: 1.85;
}
.methodology-content p + p {
margin-top: 12px;
}
.methodology-formula {
margin: 22px 0;
padding: 22px 24px;
border-radius: 16px;
color: #f5f0e4;
background: linear-gradient(135deg, #102e28, #175247);
box-shadow: 0 12px 30px rgba(16, 46, 40, .12);
}
.methodology-formula span {
display: block;
margin-bottom: 8px;
color: #a8c9bf;
font-size: 8px;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
}
.methodology-formula strong {
display: block;
font-family: var(--font-display);
font-size: clamp(20px, 2vw, 28px);
letter-spacing: -.03em;
}
.methodology-formula small {
display: block;
margin-top: 9px;
color: #b8cec6;
font-size: 10px;
line-height: 1.6;
}
.methodology-formula--light {
color: var(--p-ink);
background: #f7f3ea;
border: 1px solid rgba(16, 46, 40, .08);
box-shadow: none;
}
.methodology-formula--light span {
color: #6b837a;
}
.methodology-formula--light small {
color: var(--p-muted);
}
.methodology-criteria {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin-top: 20px;
}
.methodology-criterion {
position: relative;
min-height: 178px;
padding: 22px;
border: 1px solid rgba(16, 46, 40, .1);
border-radius: 15px;
background: rgba(255, 255, 255, .62);
}
.methodology-criterion h3 {
margin: 12px 0 7px;
color: var(--p-ink);
font-family: var(--font-display);
font-size: 17px;
letter-spacing: -.02em;
}
.methodology-criterion p {
font-size: 11px;
line-height: 1.7;
}
.methodology-weight {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
height: 25px;
padding: 0 8px;
border-radius: 7px;
color: #14695d;
background: #e1f0e8;
font-family: var(--font-display);
font-size: 10px;
font-weight: 800;
}
.methodology-list {
display: grid;
gap: 8px;
margin: 16px 0;
padding: 0;
list-style: none;
}
.methodology-list li {
position: relative;
padding-left: 18px;
}
.methodology-list li::before {
position: absolute;
top: .72em;
left: 0;
width: 6px;
height: 6px;
border-radius: 50%;
background: #1d9180;
content: "";
}
.methodology-side {
position: sticky;
top: 94px;
display: grid;
gap: 12px;
}
.methodology-side-card {
padding: 20px;
border: 1px solid rgba(16, 46, 40, .1);
border-radius: 15px;
background: #fff;
box-shadow: 0 8px 24px rgba(22, 45, 36, .05);
}
.methodology-side-card h3 {
margin: 7px 0 10px;
color: var(--p-ink);
font-family: var(--font-display);
font-size: 18px;
letter-spacing: -.025em;
line-height: 1.2;
}
.methodology-side-card p {
color: var(--p-muted);
font-size: 10px;
line-height: 1.65;
}
.methodology-side-card .button {
margin-top: 14px;
}
.methodology-side-card--dark {
border-color: transparent;
color: #f5f0e4;
background: #102e28;
}
.methodology-side-card--dark h3,
.methodology-side-card--dark p {
color: #f5f0e4;
}
.methodology-side-card--dark p {
color: #b8cec6;
}
.methodology-side-card--dark .portal-card-label {
color: #a8c9bf;
}
.methodology-weight-list {
display: grid;
gap: 10px;
margin: 14px 0;
}
.methodology-weight-row {
display: grid;
grid-template-columns: 74px minmax(0, 1fr) 34px;
gap: 8px;
align-items: center;
color: var(--p-ink-soft);
font-size: 9px;
}
.methodology-weight-track {
height: 5px;
overflow: hidden;
border-radius: 999px;
background: #eef1eb;
}
.methodology-weight-track i {
display: block;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, #1d9180, #72b7a6);
}
.methodology-weight-row strong {
color: var(--p-ink);
font-size: 9px;
text-align: right;
}
.methodology-side-note {
margin-top: 12px;
}
.methodology-side-link {
display: flex;
gap: 9px;
align-items: center;
padding: 10px 0;
color: var(--p-ink-soft);
border-bottom: 1px solid rgba(16, 46, 40, .08);
font-size: 10px;
font-weight: 650;
}
.methodology-side-link:last-child {
border-bottom: 0;
}
.methodology-side-link:hover {
color: #14695d;
}
.methodology-side-link svg {
width: 15px;
height: 15px;
}
@media (max-width: 980px) {
.methodology-layout {
grid-template-columns: 1fr;
}
.methodology-side {
position: static;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.methodology-side-card--dark {
grid-column: span 2;
}
}
@media (max-width: 680px) {
.methodology-criteria,
.methodology-side {
grid-template-columns: 1fr;
}
.methodology-side-card--dark {
grid-column: auto;
}
.methodology-criterion {
min-height: 0;
}
}
.methodology-side-card--dark .button--white {
color: #102e28;
background: #fff;
border-color: transparent;
}
/* Ajuste fino de leitura em telas de notebook */
@media (min-width: 1200px) and (max-width: 1920px) {
html {
zoom: 1.08;
}
}
/* Contraste em verde claro sobre as áreas verdes escuras */
.portal-eyebrow--light .icon {
color: var(--p-mint);
}
.podium-card:hover {
border-color: rgba(143, 230, 208, .4);
}
.podium-change .is-positive {
color: var(--p-mint) !important;
}
.portal-page .site-footer .footer-col h4 {
color: var(--p-mint);
}
.portal-page .site-footer .footer-col a:hover,
.portal-page .site-footer .footer-col a:focus-visible {
color: var(--p-mint);
}
.methodology-side-card--dark .portal-card-label {
color: var(--p-mint);
}
/* Contrastes dos três cards do ranking na home */
.portal-section--ranking .podium-card {
border-color: rgba(143, 230, 208, .3);
background: linear-gradient(155deg, rgba(113, 201, 174, .27), rgba(28, 79, 65, .72) 55%, rgba(16, 46, 40, .9));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 18px 38px rgba(0, 12, 8, .18);
}
.portal-section--ranking .podium-card:hover {
border-color: rgba(143, 230, 208, .46);
background: linear-gradient(155deg, rgba(113, 201, 174, .34), rgba(28, 79, 65, .78) 55%, rgba(16, 46, 40, .92));
}
.portal-section--ranking .podium-card--gold {
border-color: rgba(237, 196, 125, .48);
}
.portal-section--ranking .podium-card--silver {
border-color: rgba(216, 220, 214, .36);
}
.portal-section--ranking .podium-card--bronze {
border-color: rgba(216, 161, 123, .4);
}
/* Contraste reforçado dos cards de ranking na home e na página do ranking */
.portal-section--ranking .podium-card,
.portal-section--ranking-page .podium-card {
border-color: rgba(166, 246, 222, .45);
background: linear-gradient(155deg, rgba(126, 219, 190, .38), rgba(31, 92, 74, .82) 55%, rgba(12, 42, 34, .94));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 0 44px rgba(143, 230, 208, .06), 0 18px 38px rgba(0, 12, 8, .2);
}
.portal-section--ranking .podium-card:hover,
.portal-section--ranking-page .podium-card:hover {
border-color: rgba(166, 246, 222, .62);
background: linear-gradient(155deg, rgba(126, 219, 190, .46), rgba(31, 92, 74, .88) 55%, rgba(12, 42, 34, .96));
}
.portal-section--ranking .podium-card--gold,
.portal-section--ranking-page .podium-card--gold {
border-color: rgba(246, 205, 136, .62);
}
.portal-section--ranking .podium-card--silver,
.portal-section--ranking-page .podium-card--silver {
border-color: rgba(235, 241, 234, .5);
}
.portal-section--ranking .podium-card--bronze,
.portal-section--ranking-page .podium-card--bronze {
border-color: rgba(230, 174, 136, .54);
}
.portal-section--ranking .podium-score,
.portal-section--ranking-page .podium-score {
color: rgba(255, 255, 255, .86);
}
.portal-section--ranking .podium-asset span,
.portal-section--ranking-page .podium-asset span {
color: rgba(232, 255, 247, .76);
}
.portal-section--ranking .podium-metrics,
.portal-section--ranking-page .podium-metrics {
border-top-color: rgba(255, 255, 255, .16);
}
.portal-section--ranking .podium-metrics span,
.portal-section--ranking-page .podium-metrics span {
color: rgba(219, 250, 240, .76);
}
.portal-section--ranking .podium-metrics strong,
.portal-section--ranking-page .podium-metrics strong {
color: #fff8e9;
}
.portal-section--ranking .podium-change,
.portal-section--ranking-page .podium-change {
color: rgba(232, 255, 247, .84);
}
/* Leitura do quadro completo do ranking */
.ranking-table {
font-size: 11px;
}
.ranking-table th {
padding: 10px;
font-size: 9.5px;
letter-spacing: .055em;
}
.ranking-table td {
padding: 10px 6px;
}
.ranking-table .screener-asset-copy strong {
font-size: 11px;
}
.ranking-table .screener-asset-copy span {
max-width: 150px;
font-size: 9px;
}
.ranking-table .screener-score {
font-size: 11px;
}
.ranking-table .screener-loss-badge {
font-size: 8.5px;
}
.ranking-table .rank-position {
width: 27px;
height: 27px;
font-size: 10.5px;
}
.ranking-table .rank-change {
font-size: 9.5px;
}
/* Leitura ampliada da página de ativo */
@media (min-width: 900px) {
body.asset-page main {
zoom: 1.10;
}
}
/* Ajuste tipográfico fino da página de ativo */
body.asset-page .asset-identity p {
font-size: 11px;
}
body.asset-page .asset-meta-tag {
font-size: 9px;
}
body.asset-page .asset-metric span {
font-size: 9.5px;
}
body.asset-page .asset-metric small {
font-size: 8.5px;
}
body.asset-page .asset-graham-note {
font-size: 9px;
}
body.asset-page .asset-ai-head {
font-size: 9px;
}
body.asset-page .asset-ai-card p {
font-size: 11px;
}
body.asset-page .asset-score-copy p {
font-size: 9.5px;
}
body.asset-page .asset-card-head p {
font-size: 9.5px;
}
body.asset-page .asset-info-list span {
font-size: 9px;
}
body.asset-page .asset-info-list strong {
font-size: 9.5px;
}
body.asset-page .asset-source-note {
font-size: 9px;
}
body.asset-page .data-table-portal {
font-size: 10px;
}
body.asset-page .data-table-portal th {
font-size: 8px;
}
/* Leitura da área pública da carteira */
#carteira .portal-card-label,
.public-activity .portal-card-label,
.public-radar .portal-card-label {
font-size: 9px;
}
#carteira .portal-metric > span {
font-size: 10px;
}
#carteira .portal-metric small {
font-size: 9px;
}
#carteira .public-position-name strong {
font-size: 10.5px;
}
#carteira .public-position-name span {
font-size: 9px;
}
#carteira .public-position-value span {
font-size: 8.5px;
}
#carteira .public-position-value strong {
font-size: 10.5px;
}
#carteira .public-position-performance {
font-size: 10px;
}
#carteira .public-position-allocation span {
font-size: 9px;
}
#carteira .public-legend > div,
#carteira .public-legend strong {
font-size: 9.5px;
}
.public-activity-row > div:nth-child(2) strong {
font-size: 10.5px;
}
.public-activity-row > div:nth-child(2) span {
font-size: 8.5px;
}
.public-activity-money strong {
font-size: 10px;
}
.public-activity-money span {
font-size: 8.5px;
}
.public-activity-pct {
font-size: 10px;
}
.public-radar-head strong {
font-size: 10.5px;
}
.public-radar-head .badge {
font-size: 9px;
}
.public-radar-prices {
font-size: 8.5px;
}
.public-radar-prices strong {
font-size: 9.5px;
}
#carteira .portal-eyebrow,
#carteira .portfolio-public-badge {
font-size: 9.5px;
}
#carteira .portal-text-link,
.public-activity .portal-text-link,
.public-radar .portal-text-link {
font-size: 9.5px;
}
/* Leitura confortável no celular */
@media (max-width: 900px) {
html {
-webkit-text-size-adjust: 106%;
text-size-adjust: 106%;
}
}
.portal-hero-copy {
min-width: 0;
}
@media (max-width: 900px) {
.portal-hero-grid {
grid-template-columns: minmax(0, 1fr);
}
}
/* Notebooks com pouca altura: sobe o card do ranking */
@media (min-width: 1024px) and (max-height: 850px) {
.portal-hero-panel {
transform: translateY(-30px);
}
}