/* Clube FII — cores (gerado por novo/scripts/gerar_cores.py — NÃO editar à mão) */ /* ---- primitivas: use só para construir os papéis abaixo ---- */ :root { --cf-wine-50: #FFF4F4; --cf-wine-100: #FFE7E9; --cf-wine-200: #FCD4D8; --cf-wine-300: #F1B5BB; --cf-wine-400: #E0929B; --cf-wine-500: #CD6F7C; --cf-wine-600: #B5475B; --cf-wine-700: #9B133B; --cf-wine-800: #841032; --cf-wine-900: #6E0D2A; --cf-wine-950: #480015; --cf-gray-0: #FFFFFF; --cf-gray-50: #F7F7F7; --cf-gray-100: #EDEDED; --cf-gray-200: #E4E4E4; --cf-gray-300: #CCCCCC; --cf-gray-400: #B5B5B5; --cf-gray-500: #8F8F8F; --cf-gray-600: #717171; --cf-gray-700: #5C5C5C; --cf-gray-800: #494949; --cf-gray-900: #383838; --cf-gray-950: #232323; --cf-gray-1000: #000000; --cf-concrete-50: #F4F7FA; --cf-concrete-100: #E9EEF3; --cf-concrete-200: #D9E1E8; --cf-concrete-300: #BDC9D3; --cf-concrete-400: #9DADBB; --cf-concrete-500: #718698; --cf-concrete-600: #617485; --cf-concrete-700: #4D5E6D; --cf-concrete-800: #3C4B58; --cf-concrete-900: #2D3A45; --cf-concrete-950: #1A242D; --cf-purple-50: #F6F7FA; --cf-purple-100: #ECEDF3; --cf-purple-200: #DDDFE8; --cf-purple-300: #C3C7D5; --cf-purple-400: #A6AABC; --cf-purple-500: #898EA4; --cf-purple-600: #6A708A; --cf-purple-700: #555A77; --cf-purple-800: #414765; --cf-purple-900: #303554; --cf-purple-950: #181C3C; --cf-cream-50: #FFF9E7; --cf-cream-100: #FEF5D8; --cf-cream-200: #F5DEA3; --cf-cream-300: #E8C363; --cf-cream-400: #D1A417; --cf-cream-500: #B08900; --cf-cream-600: #8C6D00; --cf-cream-700: #735800; --cf-cream-800: #5B4600; --cf-cream-900: #473500; --cf-cream-950: #2D2100; --cf-green-50: #ECFCEF; --cf-green-100: #DBF6E0; --cf-green-200: #C3ECCB; --cf-green-300: #99DAA8; --cf-green-400: #65C27F; --cf-green-500: #00A651; --cf-green-600: #008941; --cf-green-700: #006F34; --cf-green-800: #005928; --cf-green-900: #00451E; --cf-green-950: #002C10; --cf-red-50: #FFF4F2; --cf-red-100: #FFE7E3; --cf-red-200: #FFD4CD; --cf-red-300: #FFB0A4; --cf-red-400: #FF7F6E; --cf-red-500: #FF0100; --cf-red-600: #D60100; --cf-red-700: #B00000; --cf-red-800: #8D0000; --cf-red-900: #6F0000; --cf-red-950: #490000; --cf-orange-50: #FFF5ED; --cf-orange-100: #FFE9D8; --cf-orange-200: #FFD7B7; --cf-orange-300: #FFB577; --cf-orange-400: #FF9933; --cf-orange-500: #CE7613; --cf-orange-600: #A65C00; --cf-orange-700: #884A00; --cf-orange-800: #6D3A00; --cf-orange-900: #552C00; --cf-orange-950: #371B00; --cf-blue-50: #EFF8FE; --cf-blue-100: #E0F0FA; --cf-blue-200: #CBE4F3; --cf-blue-300: #A8CDE5; --cf-blue-400: #7EB3D2; --cf-blue-500: #5498BE; --cf-blue-600: #1B7AA7; --cf-blue-700: #06648C; --cf-blue-800: #004F71; --cf-blue-900: #003D58; --cf-blue-950: #002639; --cf-chart-1: #9B133B; --cf-chart-2: #181C3C; --cf-chart-3: #570870; --cf-chart-4: #1B7AA7; --cf-chart-5: #059590; --cf-chart-6: #DDAF22; --cf-chart-7: #CF6118; } /* ---- papéis: é isto que componentes e páginas usam ---- */ :root, [data-theme="light"] { color-scheme: light; --cf-color-text: var(--cf-purple-950); --cf-color-text-secondary: var(--cf-concrete-700); --cf-color-text-tertiary: var(--cf-concrete-600); --cf-color-text-disabled: var(--cf-gray-400); --cf-color-text-inverse: #FFFFFF; --cf-color-text-brand: var(--cf-wine-700); --cf-color-text-link: var(--cf-wine-700); --cf-color-text-link-hover: var(--cf-wine-800); --cf-color-bg-page: #FFFFFF; --cf-color-bg-surface: #FFFFFF; --cf-color-bg-subtle: var(--cf-gray-50); --cf-color-bg-muted: var(--cf-gray-100); --cf-color-bg-highlight: var(--cf-cream-50); --cf-color-bg-selected: var(--cf-cream-100); --cf-color-bg-inverse: var(--cf-purple-950); --cf-color-bg-brand: var(--cf-wine-700); --cf-color-bg-brand-hover: var(--cf-wine-800); --cf-color-bg-brand-pressed: var(--cf-wine-900); --cf-color-bg-brand-subtle: var(--cf-wine-50); --cf-color-bg-conversion: var(--cf-green-600); --cf-color-bg-conversion-hover: var(--cf-green-700); --cf-color-bg-conversion-pressed: var(--cf-green-800); --cf-color-border: var(--cf-gray-200); --cf-color-border-strong: var(--cf-concrete-500); --cf-color-border-focus: var(--cf-wine-700); --cf-color-icon: var(--cf-concrete-500); --cf-color-icon-brand: var(--cf-wine-700); --cf-color-positive-text: var(--cf-green-700); --cf-color-positive-icon: var(--cf-green-600); --cf-color-positive-tint: var(--cf-green-100); --cf-color-positive-on-tint: var(--cf-green-800); --cf-color-positive-fill: var(--cf-green-600); --cf-color-positive-on-fill: #FFFFFF; --cf-color-positive-bg: var(--cf-green-50); --cf-color-positive-border: var(--cf-green-200); --cf-color-negative-text: var(--cf-red-600); --cf-color-negative-icon: var(--cf-red-500); --cf-color-negative-tint: var(--cf-red-100); --cf-color-negative-on-tint: var(--cf-red-800); --cf-color-negative-fill: var(--cf-red-600); --cf-color-negative-on-fill: #FFFFFF; --cf-color-negative-bg: var(--cf-red-50); --cf-color-negative-border: var(--cf-red-200); --cf-color-warning-text: var(--cf-orange-700); --cf-color-warning-icon: var(--cf-orange-600); --cf-color-warning-tint: var(--cf-orange-100); --cf-color-warning-on-tint: var(--cf-orange-800); --cf-color-warning-fill: var(--cf-orange-400); --cf-color-warning-on-fill: var(--cf-purple-950); --cf-color-warning-bg: var(--cf-orange-50); --cf-color-warning-border: var(--cf-orange-200); --cf-color-info-text: var(--cf-blue-700); --cf-color-info-icon: var(--cf-blue-600); --cf-color-info-tint: var(--cf-blue-100); --cf-color-info-on-tint: var(--cf-blue-800); --cf-color-info-fill: var(--cf-blue-600); --cf-color-info-on-fill: #FFFFFF; --cf-color-info-bg: var(--cf-blue-50); --cf-color-info-border: var(--cf-blue-200); --cf-color-overlay: rgba(0, 0, 0, 0.75); --cf-color-chart-1: #9B133B; --cf-color-chart-2: #B78F00; --cf-color-chart-3: #1B7AA7; --cf-color-chart-4: #570870; --cf-color-chart-5: #181C3C; --cf-color-chart-6: #BE5400; --cf-color-chart-7: #3C956F; } /* data-theme vale em qualquer elemento: dá para ter uma seção escura numa página clara */ [data-theme="dark"] { color-scheme: dark; --cf-color-text: var(--cf-gray-50); --cf-color-text-secondary: var(--cf-concrete-400); --cf-color-text-tertiary: var(--cf-concrete-400); --cf-color-text-disabled: var(--cf-concrete-700); --cf-color-text-inverse: var(--cf-purple-950); --cf-color-text-brand: var(--cf-wine-400); --cf-color-text-link: var(--cf-wine-400); --cf-color-text-link-hover: var(--cf-wine-200); --cf-color-bg-page: #0C0E1C; --cf-color-bg-surface: #15182A; --cf-color-bg-subtle: #15182A; --cf-color-bg-muted: #1F2335; --cf-color-bg-highlight: #1F2335; --cf-color-bg-selected: #272B47; --cf-color-bg-inverse: var(--cf-gray-50); --cf-color-bg-brand: var(--cf-wine-700); --cf-color-bg-brand-hover: var(--cf-wine-600); --cf-color-bg-brand-pressed: var(--cf-wine-800); --cf-color-bg-brand-subtle: #3F181E; --cf-color-bg-conversion: var(--cf-green-600); --cf-color-bg-conversion-hover: var(--cf-green-700); --cf-color-bg-conversion-pressed: var(--cf-green-800); --cf-color-border: #313445; --cf-color-border-strong: var(--cf-concrete-500); --cf-color-border-focus: var(--cf-wine-500); --cf-color-icon: var(--cf-concrete-500); --cf-color-icon-brand: var(--cf-wine-500); --cf-color-positive-text: var(--cf-green-400); --cf-color-positive-icon: var(--cf-green-600); --cf-color-positive-tint: #0E3A1D; --cf-color-positive-on-tint: var(--cf-green-200); --cf-color-positive-fill: var(--cf-green-600); --cf-color-positive-on-fill: #FFFFFF; --cf-color-positive-bg: #0F2B17; --cf-color-positive-border: var(--cf-green-800); --cf-color-negative-text: var(--cf-red-400); --cf-color-negative-icon: var(--cf-red-500); --cf-color-negative-tint: #4E211B; --cf-color-negative-on-tint: var(--cf-red-200); --cf-color-negative-fill: var(--cf-red-600); --cf-color-negative-on-fill: #FFFFFF; --cf-color-negative-bg: #391A15; --cf-color-negative-border: var(--cf-red-800); --cf-color-warning-text: var(--cf-orange-400); --cf-color-warning-icon: var(--cf-orange-500); --cf-color-warning-tint: #492602; --cf-color-warning-on-tint: var(--cf-orange-200); --cf-color-warning-fill: var(--cf-orange-400); --cf-color-warning-on-fill: var(--cf-purple-950); --cf-color-warning-bg: #351E08; --cf-color-warning-border: var(--cf-orange-800); --cf-color-info-text: var(--cf-blue-400); --cf-color-info-icon: var(--cf-blue-500); --cf-color-info-tint: #00354C; --cf-color-info-on-tint: var(--cf-blue-200); --cf-color-info-fill: var(--cf-blue-600); --cf-color-info-on-fill: #FFFFFF; --cf-color-info-bg: #052739; --cf-color-info-border: var(--cf-blue-800); --cf-color-overlay: rgba(0, 0, 0, 0.75); --cf-color-chart-1: #D14A65; --cf-color-chart-2: #E2B842; --cf-color-chart-3: #50A9D9; --cf-color-chart-4: #A966C2; --cf-color-chart-5: #C1C8EC; --cf-color-chart-6: #E57431; --cf-color-chart-7: #5AC293; } /* Escuro automático: só nas telas que optarem por */ @media (prefers-color-scheme: dark) { :root[data-theme="auto"] { color-scheme: dark; --cf-color-text: var(--cf-gray-50); --cf-color-text-secondary: var(--cf-concrete-400); --cf-color-text-tertiary: var(--cf-concrete-400); --cf-color-text-disabled: var(--cf-concrete-700); --cf-color-text-inverse: var(--cf-purple-950); --cf-color-text-brand: var(--cf-wine-400); --cf-color-text-link: var(--cf-wine-400); --cf-color-text-link-hover: var(--cf-wine-200); --cf-color-bg-page: #0C0E1C; --cf-color-bg-surface: #15182A; --cf-color-bg-subtle: #15182A; --cf-color-bg-muted: #1F2335; --cf-color-bg-highlight: #1F2335; --cf-color-bg-selected: #272B47; --cf-color-bg-inverse: var(--cf-gray-50); --cf-color-bg-brand: var(--cf-wine-700); --cf-color-bg-brand-hover: var(--cf-wine-600); --cf-color-bg-brand-pressed: var(--cf-wine-800); --cf-color-bg-brand-subtle: #3F181E; --cf-color-bg-conversion: var(--cf-green-600); --cf-color-bg-conversion-hover: var(--cf-green-700); --cf-color-bg-conversion-pressed: var(--cf-green-800); --cf-color-border: #313445; --cf-color-border-strong: var(--cf-concrete-500); --cf-color-border-focus: var(--cf-wine-500); --cf-color-icon: var(--cf-concrete-500); --cf-color-icon-brand: var(--cf-wine-500); --cf-color-positive-text: var(--cf-green-400); --cf-color-positive-icon: var(--cf-green-600); --cf-color-positive-tint: #0E3A1D; --cf-color-positive-on-tint: var(--cf-green-200); --cf-color-positive-fill: var(--cf-green-600); --cf-color-positive-on-fill: #FFFFFF; --cf-color-positive-bg: #0F2B17; --cf-color-positive-border: var(--cf-green-800); --cf-color-negative-text: var(--cf-red-400); --cf-color-negative-icon: var(--cf-red-500); --cf-color-negative-tint: #4E211B; --cf-color-negative-on-tint: var(--cf-red-200); --cf-color-negative-fill: var(--cf-red-600); --cf-color-negative-on-fill: #FFFFFF; --cf-color-negative-bg: #391A15; --cf-color-negative-border: var(--cf-red-800); --cf-color-warning-text: var(--cf-orange-400); --cf-color-warning-icon: var(--cf-orange-500); --cf-color-warning-tint: #492602; --cf-color-warning-on-tint: var(--cf-orange-200); --cf-color-warning-fill: var(--cf-orange-400); --cf-color-warning-on-fill: var(--cf-purple-950); --cf-color-warning-bg: #351E08; --cf-color-warning-border: var(--cf-orange-800); --cf-color-info-text: var(--cf-blue-400); --cf-color-info-icon: var(--cf-blue-500); --cf-color-info-tint: #00354C; --cf-color-info-on-tint: var(--cf-blue-200); --cf-color-info-fill: var(--cf-blue-600); --cf-color-info-on-fill: #FFFFFF; --cf-color-info-bg: #052739; --cf-color-info-border: var(--cf-blue-800); --cf-color-overlay: rgba(0, 0, 0, 0.75); --cf-color-chart-1: #D14A65; --cf-color-chart-2: #E2B842; --cf-color-chart-3: #50A9D9; --cf-color-chart-4: #A966C2; --cf-color-chart-5: #C1C8EC; --cf-color-chart-6: #E57431; --cf-color-chart-7: #5AC293; } } /* Clube FII — tipografia (gerado por novo/scripts/gerar_tipografia.py — NÃO editar à mão) */ :root { --cf-font-sans: 'Klavika', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --cf-font-mono: ui-monospace, 'Cascadia Mono', Consolas, 'Courier New', monospace; --cf-weight-light: 300; --cf-weight-regular: 400; --cf-weight-medium: 500; --cf-weight-bold: 700; --cf-measure: 68ch; /* largura máxima de texto corrido */ --cf-caps-nudge: 0.088em; /* centraliza CAIXA ALTA em controle: some ao padding-top (line-height: 1) */ --cf-caps-nudge-ratio: 0.088; /* o mesmo, sem unidade: calc(tamanho-da-fonte * ratio) quando o em do elemento for outro */ --cf-type-display-size: clamp(2rem, 1.6576rem + 1.5217vw, 2.875rem); --cf-type-display-line: 1.15; --cf-type-display-weight: var(--cf-weight-light); --cf-type-display-tracking: 0.16em; --cf-type-h1-size: clamp(1.75rem, 1.5543rem + 0.8696vw, 2.25rem); --cf-type-h1-line: 1.2; --cf-type-h1-weight: var(--cf-weight-light); --cf-type-h1-tracking: 0.14em; --cf-type-h2-size: clamp(1.375rem, 1.2772rem + 0.4348vw, 1.625rem); --cf-type-h2-line: 1.25; --cf-type-h2-weight: var(--cf-weight-light); --cf-type-h2-tracking: 0.12em; --cf-type-h3-size: clamp(1.25rem, 1.2011rem + 0.2174vw, 1.375rem); --cf-type-h3-line: 1.3; --cf-type-h3-weight: var(--cf-weight-light); --cf-type-h3-tracking: 0.1em; --cf-type-subtitle-lg-size: 1.125rem; --cf-type-subtitle-lg-line: 1.3; --cf-type-subtitle-lg-weight: var(--cf-weight-bold); --cf-type-subtitle-lg-tracking: 0.08em; --cf-type-subtitle-size: 0.875rem; --cf-type-subtitle-line: 1.3; --cf-type-subtitle-weight: var(--cf-weight-bold); --cf-type-subtitle-tracking: 0.1em; --cf-type-label-size: 0.75rem; --cf-type-label-line: 1.35; --cf-type-label-weight: var(--cf-weight-bold); --cf-type-label-tracking: 0.1em; --cf-type-body-lg-size: 1.125rem; --cf-type-body-lg-line: 1.55; --cf-type-body-lg-weight: var(--cf-weight-regular); --cf-type-body-lg-tracking: 0em; --cf-type-body-size: 1rem; --cf-type-body-line: 1.55; --cf-type-body-weight: var(--cf-weight-regular); --cf-type-body-tracking: 0em; --cf-type-body-sm-size: 0.875rem; --cf-type-body-sm-line: 1.45; --cf-type-body-sm-weight: var(--cf-weight-regular); --cf-type-body-sm-tracking: 0em; --cf-type-caption-size: 0.8125rem; --cf-type-caption-line: 1.4; --cf-type-caption-weight: var(--cf-weight-regular); --cf-type-caption-tracking: 0em; --cf-type-number-xl-size: clamp(1.75rem, 1.5543rem + 0.8696vw, 2.25rem); --cf-type-number-xl-line: 1.1; --cf-type-number-xl-weight: var(--cf-weight-light); --cf-type-number-xl-tracking: 0em; --cf-type-number-lg-size: clamp(1.25rem, 1.2011rem + 0.2174vw, 1.375rem); --cf-type-number-lg-line: 1.2; --cf-type-number-lg-weight: var(--cf-weight-regular); --cf-type-number-lg-tracking: 0em; --cf-type-number-size: 0.875rem; --cf-type-number-line: 1.45; --cf-type-number-weight: var(--cf-weight-regular); --cf-type-number-tracking: 0em; } /* Base: corpo padrão, números alinhados, renderização limpa */ body { font-family: var(--cf-font-sans); font-size: var(--cf-type-body-size); line-height: var(--cf-type-body-line); font-weight: var(--cf-weight-regular); font-variant-numeric: lining-nums; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Papéis como classes — componentes podem usar as variáveis direto */ /* Título de página principal / hero (antigo header-large 46) */ .cf-text-display { font-size: var(--cf-type-display-size); line-height: var(--cf-type-display-line); font-weight: var(--cf-type-display-weight); letter-spacing: var(--cf-type-display-tracking); text-transform: uppercase; } /* Título de página (antigo header-medium 36) */ .cf-text-h1 { font-size: var(--cf-type-h1-size); line-height: var(--cf-type-h1-line); font-weight: var(--cf-type-h1-weight); letter-spacing: var(--cf-type-h1-tracking); text-transform: uppercase; } /* Título de seção (antigo header-small 26) */ .cf-text-h2 { font-size: var(--cf-type-h2-size); line-height: var(--cf-type-h2-line); font-weight: var(--cf-type-h2-weight); letter-spacing: var(--cf-type-h2-tracking); text-transform: uppercase; } /* Título de bloco (antigo header-supersmall 22) */ .cf-text-h3 { font-size: var(--cf-type-h3-size); line-height: var(--cf-type-h3-line); font-weight: var(--cf-type-h3-weight); letter-spacing: var(--cf-type-h3-tracking); text-transform: uppercase; } /* Subtítulo forte, título de card (antigo subtitle-large) */ .cf-text-subtitle-lg { font-size: var(--cf-type-subtitle-lg-size); line-height: var(--cf-type-subtitle-lg-line); font-weight: var(--cf-type-subtitle-lg-weight); letter-spacing: var(--cf-type-subtitle-lg-tracking); text-transform: uppercase; } /* Subtítulo, cabeçalho de tabela grande (antigo subtitle-medium) */ .cf-text-subtitle { font-size: var(--cf-type-subtitle-size); line-height: var(--cf-type-subtitle-line); font-weight: var(--cf-type-subtitle-weight); letter-spacing: var(--cf-type-subtitle-tracking); text-transform: uppercase; } /* Rótulo, botão, overline, cabeçalho de tabela (antigo subtitle-small) */ .cf-text-label { font-size: var(--cf-type-label-size); line-height: var(--cf-type-label-line); font-weight: var(--cf-type-label-weight); letter-spacing: var(--cf-type-label-tracking); text-transform: uppercase; } /* Texto de destaque, intro de artigo (antigo body-medium 18/26) */ .cf-text-body-lg { font-size: var(--cf-type-body-lg-size); line-height: var(--cf-type-body-lg-line); font-weight: var(--cf-type-body-lg-weight); letter-spacing: var(--cf-type-body-lg-tracking); } /* Texto corrido padrão — NOVO */ .cf-text-body { font-size: var(--cf-type-body-size); line-height: var(--cf-type-body-line); font-weight: var(--cf-type-body-weight); letter-spacing: var(--cf-type-body-tracking); } /* Interface densa: tabela, formulário, lista — NOVO */ .cf-text-body-sm { font-size: var(--cf-type-body-sm-size); line-height: var(--cf-type-body-sm-line); font-weight: var(--cf-type-body-sm-weight); letter-spacing: var(--cf-type-body-sm-tracking); } /* Legenda, ajuda de campo, disclaimer, metadado (mínimo em caixa baixa) */ .cf-text-caption { font-size: var(--cf-type-caption-size); line-height: var(--cf-type-caption-line); font-weight: var(--cf-type-caption-weight); letter-spacing: var(--cf-type-caption-tracking); } /* Número de destaque (KPI, cotação no topo do fundo) */ .cf-text-number-xl { font-size: var(--cf-type-number-xl-size); line-height: var(--cf-type-number-xl-line); font-weight: var(--cf-type-number-xl-weight); letter-spacing: var(--cf-type-number-xl-tracking); font-variant-numeric: tabular-nums lining-nums; } /* Número em card/resumo */ .cf-text-number-lg { font-size: var(--cf-type-number-lg-size); line-height: var(--cf-type-number-lg-line); font-weight: var(--cf-type-number-lg-weight); letter-spacing: var(--cf-type-number-lg-tracking); font-variant-numeric: tabular-nums lining-nums; } /* Número em tabela (alinhar à direita) */ .cf-text-number { font-size: var(--cf-type-number-size); line-height: var(--cf-type-number-line); font-weight: var(--cf-type-number-weight); letter-spacing: var(--cf-type-number-tracking); font-variant-numeric: tabular-nums lining-nums; } /* Utilitários */ .cf-tnum { font-variant-numeric: tabular-nums lining-nums; } /* Texto em caixa alta centralizado num controle de altura fixa (botão, aba, segmentado) */ .cf-caps-center { line-height: 1; padding-top: var(--cf-caps-nudge); } .cf-prose { max-width: var(--cf-measure); } .cf-prose p + p { margin-top: 1em; } h1, h2, h3, h4 { text-wrap: balance; } p, li { text-wrap: pretty; } /* Clube FII — espaço, grid, camadas, sombras e movimento (gerado por novo/scripts/gerar_espacamento.py — NÃO editar à mão) */ :root { /* escala base 4 */ --cf-space-0: 0rem; --cf-space-2: 0.125rem; --cf-space-4: 0.25rem; --cf-space-8: 0.5rem; --cf-space-12: 0.75rem; --cf-space-16: 1rem; --cf-space-20: 1.25rem; --cf-space-24: 1.5rem; --cf-space-32: 2rem; --cf-space-40: 2.5rem; --cf-space-48: 3rem; --cf-space-64: 4rem; --cf-space-80: 5rem; --cf-space-96: 6rem; --cf-space-128: 8rem; /* papéis de espaço */ --cf-space-gutter: clamp(1rem, 0.6087rem + 1.7391vw, 2rem); /* Margem lateral da página e espaço entre colunas */ --cf-space-section: clamp(3rem, 1.8261rem + 5.2174vw, 6rem); /* Entre seções grandes de uma página */ --cf-space-block: clamp(2rem, 1.6087rem + 1.7391vw, 3rem); /* Entre blocos dentro de uma seção */ --cf-space-stack: var(--cf-space-16); /* Entre elementos empilhados (parágrafos, campos) */ --cf-space-stack-sm: var(--cf-space-8); /* Empilhamento apertado (rótulo + valor) */ --cf-space-inline: var(--cf-space-8); /* Entre itens lado a lado (ícone + texto, botões) */ --cf-space-inset: var(--cf-space-24); /* Padding interno de card/painel */ --cf-space-inset-sm: var(--cf-space-16); /* Padding interno compacto */ --cf-space-cell-x: var(--cf-space-16); /* Padding horizontal de célula de tabela */ --cf-space-cell-y: var(--cf-space-12); /* Padding vertical de célula de tabela */ /* altura de controles (botão, input, select) */ --cf-control-sm: 2rem; --cf-control-md: 2.5rem; --cf-control-lg: 3rem; --cf-target-min: 1.5rem; /* 24px — alvo mínimo WCAG 2.2 (2.5.8) */ /* grid */ --cf-container: 1280px; --cf-container-wide: 1440px; --cf-container-narrow: 768px; --cf-columns: 12; --cf-measure: 68ch; /* camadas */ --cf-z-base: 0; --cf-z-raised: 10; --cf-z-dropdown: 100; --cf-z-sticky: 200; --cf-z-overlay: 300; --cf-z-modal: 400; --cf-z-toast: 500; --cf-z-tooltip: 600; /* bordas — raio é sempre 0 (decisão de marca) */ --cf-radius: 0; --cf-radius-round: 50%; /* só avatar, radio, ponto de status */ --cf-border-hairline: 1px; --cf-border-strong: 2px; --cf-border-accent: 4px; /* sombras — poucas, tingidas com o azul-noite */ --cf-shadow-sticky: 0 2px 8px rgba(24, 28, 60, 0.12); --cf-shadow-popover: 0 4px 16px rgba(24, 28, 60, 0.16); --cf-shadow-modal: 0 16px 48px rgba(24, 28, 60, 0.24); /* movimento */ --cf-motion-duration-fast: 100ms; --cf-motion-duration: 150ms; --cf-motion-duration-slow: 250ms; --cf-motion-duration-drawer: 300ms; --cf-motion-ease: cubic-bezier(0.25, 0.1, 0.25, 1); --cf-motion-ease-out: cubic-bezier(0.23, 1, 0.32, 1); --cf-motion-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); --cf-motion-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); } /* Densidade compacta: ferramentas de dados, CC&C.
*/ [data-density="compact"] { --cf-space-inset: var(--cf-space-16); --cf-space-inset-sm: var(--cf-space-12); --cf-space-cell-x: var(--cf-space-12); --cf-space-cell-y: var(--cf-space-8); --cf-space-stack: var(--cf-space-12); --cf-control-sm: 1.5rem; --cf-control-md: 2rem; --cf-control-lg: 2.5rem; } @media (prefers-reduced-motion: reduce) { /* movimento reduzido = MENOS movimento, não zero: some o deslocamento (slow/drawer), ficam fades e cores curtos */ :root { --cf-motion-duration-fast: 100ms; --cf-motion-duration: 100ms; --cf-motion-duration-slow: 0ms; --cf-motion-duration-drawer: 0ms; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ---------------- layout ---------------- */ /* Breakpoints (mobile-first, min-width): sm 480px, md 768px, lg 1024px, xl 1280px. Variáveis CSS não funcionam dentro de @media — use estes números. Para componentes, prefira @container (o componente se adapta ao espaço que tem, não à tela). */ .cf-container { width: 100%; max-width: calc(var(--cf-container) + 2 * var(--cf-space-gutter)); margin-inline: auto; padding-inline: var(--cf-space-gutter); } .cf-container-wide { max-width: calc(var(--cf-container-wide) + 2 * var(--cf-space-gutter)); } .cf-container-narrow { max-width: calc(var(--cf-container-narrow) + 2 * var(--cf-space-gutter)); } /* Grade: 4 colunas no celular, 8 no tablet, 12 no desktop. Filhos usam .cf-span-N (N da grade de 12). */ .cf-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--cf-space-gutter); row-gap: var(--cf-space-block); } .cf-grid > * { grid-column: 1 / -1; min-width: 0; } @media (min-width: 768px) { .cf-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); } .cf-grid > .cf-span-3 { grid-column: span 2; } .cf-grid > .cf-span-4 { grid-column: span 3; } .cf-grid > .cf-span-6 { grid-column: span 4; } .cf-grid > .cf-span-8 { grid-column: span 5; } } @media (min-width: 1024px) { .cf-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } .cf-grid > .cf-span-1 { grid-column: span 1; } .cf-grid > .cf-span-2 { grid-column: span 2; } .cf-grid > .cf-span-3 { grid-column: span 3; } .cf-grid > .cf-span-4 { grid-column: span 4; } .cf-grid > .cf-span-5 { grid-column: span 5; } .cf-grid > .cf-span-6 { grid-column: span 6; } .cf-grid > .cf-span-7 { grid-column: span 7; } .cf-grid > .cf-span-8 { grid-column: span 8; } .cf-grid > .cf-span-9 { grid-column: span 9; } .cf-grid > .cf-span-10 { grid-column: span 10; } .cf-grid > .cf-span-11 { grid-column: span 11; } .cf-grid > .cf-span-12 { grid-column: span 12; } } /* Empilhar e agrupar — espaço vem do pai (gap), nunca de margin no filho */ .cf-stack { display: flex; flex-direction: column; gap: var(--cf-space-stack); } .cf-stack-sm { display: flex; flex-direction: column; gap: var(--cf-space-stack-sm); } .cf-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cf-space-inline); } .cf-section + .cf-section { margin-top: var(--cf-space-section); } /* Base mínima: o que todo componente assume. */ *, *::before, *::after { box-sizing: border-box; } /* [hidden] sempre esconde — mesmo em componentes que definem display (ex.: .cf-btn é inline-flex) */ [hidden] { display: none !important; } body { margin: 0; background: var(--cf-color-bg-page); color: var(--cf-color-text); } /* Seção com tema próprio (ex.: faixa escura numa página clara): pinta o próprio fundo e redefine a cor do texto — senão o texto herda a cor do tema de fora e some. */ [data-theme]:not(:root) { background-color: var(--cf-color-bg-page); color: var(--cf-color-text); } a { color: var(--cf-color-text-link); text-underline-offset: 0.15em; } a:hover { color: var(--cf-color-text-link-hover); } :focus-visible { outline: var(--cf-border-strong) solid var(--cf-color-border-focus); outline-offset: 2px; } /* Some da tela, continua para leitor de tela */ .cf-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Rolagem interna (menus, popovers, listas, modais, tabelas): fina, RETA e vinho — sem setas, sem trilho. A barra da PÁGINA (html) continua a do navegador: barra fina na página inteira atrapalha quem usa mouse com pouca precisão. Chrome/Edge/Safari: ::-webkit-scrollbar (área de 8px, traço de 4px — fácil de pegar, fino de ver). Firefox: scrollbar-width/scrollbar-color (só ele entra no @supports; no Chrome 121+ esses dois desligariam o ::-webkit-). */ body *::-webkit-scrollbar { width: 8px; height: 8px; background: transparent; } body *::-webkit-scrollbar-track { background: transparent; } body *::-webkit-scrollbar-thumb { background: var(--cf-color-icon-brand); background-clip: content-box; border: 2px solid transparent; border-radius: 0; } body *::-webkit-scrollbar-thumb:hover { background-color: var(--cf-color-text-brand); } body *::-webkit-scrollbar-button, body *::-webkit-scrollbar-corner { display: none; background: transparent; } @supports not selector(::-webkit-scrollbar) { body * { scrollbar-width: thin; scrollbar-color: var(--cf-color-icon-brand) transparent; } } /* Toque: sem atraso de duplo-toque e sem o realce cinza padrão (cada componente já desenha o próprio estado) */ :where(a, button, summary, label, select, [role="tab"], [role="radio"], [role="option"], [tabindex]) { touch-action: manipulation; -webkit-tap-highlight-color: transparent; } /* Desktop: sem o "elástico" da página (no toque fica o padrão — puxar para atualizar) */ @media (pointer: fine) { html { overscroll-behavior: none; } } /* Alto contraste (Windows): box-shadow some — todo foco de teclado vira contorno do sistema */ @media (forced-colors: active) { :focus-visible { outline: 2px solid Highlight !important; outline-offset: 2px; } } /* ========================================================================== Botão — .cf-btn Substitui: .btn-primary, .btn-green, .btn-secondary, .btn-outline-primary, .btn-concrete-outline, .btn-white, .mk-btn, .mk-btn-solo, .mk-link-btn, .fsSubmitButton. Ver planos ← sem data-variant = secundário .cf-btn-label: o texto vai num span para ser centralizado com exatidão (text-box recorta a caixa na altura das maiúsculas). Se faltar, o botao.js envolve o texto sozinho; sem JS, vale a compensação --cf-caps-nudge. data-variant: primary (1 por área — a ação principal) · conversion (verde: SÓ assinar/upgrade/planos — ocupa o lugar do primary naquela área) · secondary (padrão) · ghost (ações de apoio, "Veja mais", barra de ferramentas) · neutral (Cancelar, Voltar) · danger · danger-solid data-size: sm (32px) · md (40px, padrão) · lg (48px — conversão, hero) data-block: ocupa a largura toda data-icon-only: só ícone (quadrado) — exige aria-label Ícone: — SEMPRE à direita: vira a caixa de ícone (assinatura do Clube FII) em botões com fundo/contorno; solto no ghost. .cf-btn-box continua aceito para conteúdo que não seja um da icon font. Estados: :disabled / aria-disabled="true" · aria-busy="true" (processando — ver botao.js) ========================================================================== */ .cf-btn { /* cada variante só troca estas variáveis */ --_bg: transparent; --_fg: var(--cf-color-text-brand); --_bd: var(--cf-color-text-brand); --_bg-hover: var(--cf-color-bg-brand-subtle); --_fg-hover: var(--_fg); --_bd-hover: var(--_bd); --_bg-active: var(--cf-color-bg-brand-subtle); --_box-bg: var(--_bd); /* caixa de ícone = cor do contorno */ --_box-fg: var(--cf-color-bg-page); --_h: var(--cf-control-md); --_px: var(--cf-space-16); --_fs: var(--cf-type-label-size); --_icon: 1rem; --_nudge: calc(var(--_fs) * var(--cf-caps-nudge-ratio)); /* em px do texto do botão, vale em qualquer filho */ display: inline-flex; align-items: center; justify-content: center; gap: var(--cf-space-8); box-sizing: border-box; height: var(--_h); min-width: var(--_h); margin: 0; /* caixa alta centralizada pelas métricas da Klavika */ padding: var(--_nudge) var(--_px) 0; /* contorno desenhado por dentro (sem border): a caixa de ícone ancora em top/bottom/right 0 e nunca desalinha com zoom do navegador (border arredonda em pixel de tela; posição não) */ border: 0; border-radius: 0; box-shadow: inset 0 0 0 var(--cf-border-hairline) var(--_bd); background: var(--_bg); color: var(--_fg); font-family: var(--cf-font-sans); font-size: var(--_fs); font-weight: var(--cf-weight-bold); line-height: 1; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; white-space: nowrap; vertical-align: middle; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; transition: background-color var(--cf-motion-duration) var(--cf-motion-ease), box-shadow var(--cf-motion-duration) var(--cf-motion-ease), color var(--cf-motion-duration) var(--cf-motion-ease), scale var(--cf-motion-duration-fast) var(--cf-motion-ease-out); } .cf-btn:hover { background: var(--_bg-hover); color: var(--_fg-hover); box-shadow: inset 0 0 0 var(--cf-border-hairline) var(--_bd-hover); } .cf-btn:active { background: var(--_bg-active); } /* apertar: encolhe 2% (sutil, físico); nada disso em botão ocupado/desativado nem com movimento reduzido */ .cf-btn:active:not(:disabled, [aria-disabled="true"], [aria-busy="true"]) { scale: 0.98; } @media (prefers-reduced-motion: reduce) { .cf-btn:active { scale: none; } } .cf-btn:focus-visible { outline: var(--cf-border-strong) solid var(--cf-color-border-focus); outline-offset: 2px; } /* Centralização exata da CAIXA ALTA: recorta a caixa do texto em cap-height/baseline e deixa o flex centralizar. Não depende de arredondamento de métrica (em 12px o navegador arredonda ascent/descent e o texto subia ~0,5px). */ .cf-btn-label { display: block; } @supports (text-box: trim-both cap alphabetic) { .cf-btn-label { text-box: trim-both cap alphabetic; } .cf-btn:has(> .cf-btn-label) { --_nudge: 0px; } } /* ---- variantes ---- */ .cf-btn[data-variant="primary"] { --_bg: var(--cf-color-bg-brand); --_fg: #fff; --_bd: var(--cf-color-bg-brand); --_bg-hover: var(--cf-color-bg-brand-hover); --_bd-hover: var(--cf-color-bg-brand-hover); --_bg-active: var(--cf-color-bg-brand-pressed); --_box-bg: var(--cf-color-bg-brand-pressed); /* sempre o tom mais escuro, nos dois temas */ --_box-fg: #fff; } .cf-btn[data-variant="conversion"] { --_bg: var(--cf-color-bg-conversion); --_fg: #fff; --_bd: var(--cf-color-bg-conversion); --_bg-hover: var(--cf-color-bg-conversion-hover); --_bd-hover: var(--cf-color-bg-conversion-hover); --_bg-active: var(--cf-color-bg-conversion-pressed); --_box-bg: var(--cf-color-bg-conversion-pressed); --_box-fg: #fff; } .cf-btn[data-variant="ghost"] { --_bd: transparent; --_bg-hover: var(--cf-color-bg-subtle); --_bg-active: var(--cf-color-bg-muted); --_px: var(--cf-space-12); } .cf-btn[data-variant="neutral"] { --_fg: var(--cf-color-text); --_bd: var(--cf-color-border-strong); --_bg-hover: var(--cf-color-bg-subtle); --_bg-active: var(--cf-color-bg-muted); --_box-bg: var(--cf-color-bg-inverse); --_box-fg: var(--cf-color-text-inverse); } .cf-btn[data-variant="danger"] { --_fg: var(--cf-color-negative-text); --_bd: var(--cf-color-negative-text); --_bg-hover: var(--cf-color-negative-bg); --_bg-active: var(--cf-color-negative-tint); --_box-bg: var(--cf-color-negative-fill); --_box-fg: var(--cf-color-negative-on-fill); } .cf-btn[data-variant="danger-solid"] { --_bg: var(--cf-color-negative-fill); --_fg: var(--cf-color-negative-on-fill); --_bd: var(--cf-color-negative-fill); --_bg-hover: var(--cf-red-700); --_bd-hover: var(--cf-red-700); --_bg-active: var(--cf-red-800); --_box-bg: var(--cf-red-700); } /* ---- tamanhos ---- */ .cf-btn[data-size="sm"] { --_h: var(--cf-control-sm); --_px: var(--cf-space-12); --_icon: 0.875rem; } .cf-btn[data-size="lg"] { --_h: var(--cf-control-lg); --_px: var(--cf-space-24); --_icon: 1.25rem; --_fs: var(--cf-type-subtitle-size); } .cf-btn[data-block] { display: flex; width: 100%; } /* ---- ícones: SEMPRE à direita ---- Com fundo ou contorno (primary, conversion, secondary, neutral, danger…): o ícone vira a caixa, colada na borda — assinatura do Clube FII. No ghost: solto à direita, sem caixa. Só ícone (data-icon-only): centralizado. Basta pôr o em qualquer lugar do botão; a posição vem do CSS. A caixa nunca é clicável à parte. */ .cf-btn > [class^="icon-regular_"], .cf-btn > svg { order: 1; flex: none; font-size: var(--_icon); line-height: 1; margin-top: calc(-1 * var(--_nudge)); /* ícone não leva a compensação da caixa alta */ } .cf-btn > svg { width: 1em; height: 1em; } .cf-btn[data-icon-only] { width: var(--_h); padding: 0; --_nudge: 0px; } /* A caixa é ANCORADA nas bordas do botão (top/bottom/right 0 — o botão não tem border), com largura = altura. Não usar margem negativa + aspect-ratio nem compensar border: com zoom do navegador (110%, 125%…) a borda arredonda em pixel de tela e a caixa vazava 1–2px. Ancorada em 0, usa as mesmas coordenadas do botão. */ .cf-btn { position: relative; } .cf-btn:not([data-variant="ghost"]):not([data-icon-only]):has(> [class^="icon-regular_"], > .cf-btn-box) { /* espaço da caixa + respiro entre texto e caixa */ padding-right: calc(var(--_h) + var(--cf-space-12)); } .cf-btn:not([data-variant="ghost"]):not([data-icon-only]) > [class^="icon-regular_"], .cf-btn-box { position: absolute; top: 0; bottom: 0; right: 0; width: var(--_h); height: auto; /* a altura vem de top/bottom (o ícone tem height: 1em por padrão) */ margin: 0; display: flex; align-items: center; justify-content: center; background: var(--_box-bg); color: var(--_box-fg); font-size: var(--_icon); transition: background-color var(--cf-motion-duration) var(--cf-motion-ease); } /* ---- desabilitado ---- */ .cf-btn:disabled:not([aria-busy="true"]), .cf-btn[aria-disabled="true"]:not([aria-busy="true"]) { --_bg: transparent; --_bg-hover: transparent; --_bg-active: transparent; --_fg: var(--cf-color-text-disabled); --_fg-hover: var(--cf-color-text-disabled); --_bd: var(--cf-color-border); --_bd-hover: var(--cf-color-border); --_box-bg: var(--cf-color-bg-muted); --_box-fg: var(--cf-color-text-disabled); cursor: not-allowed; } .cf-btn:is([data-variant="primary"], [data-variant="conversion"]):disabled:not([aria-busy="true"]), .cf-btn[data-variant="primary"][aria-disabled="true"]:not([aria-busy="true"]), .cf-btn[data-variant="danger-solid"]:disabled:not([aria-busy="true"]) { --_bg: var(--cf-color-bg-muted); --_bg-hover: var(--cf-color-bg-muted); --_bd: var(--cf-color-bg-muted); } .cf-btn[data-variant="ghost"]:is(:disabled, [aria-disabled="true"]):not([aria-busy="true"]) { --_bd: transparent; --_bd-hover: transparent; } a.cf-btn[aria-disabled="true"] { pointer-events: none; } /* ---- processando: símbolo FII com as janelas acendendo + texto no gerúndio ("Salvando…") ---- */ /* processando: o botão mantém a cor normal; a caixa de ícone segue no tom mais escuro com o símbolo dentro (se o botão escurecesse, a caixa sumiria — mesmo tom) */ .cf-btn[aria-busy="true"] { cursor: progress; --_bg-hover: var(--_bg); --_bd-hover: var(--_bd); --_fg-hover: var(--_fg); --_bg-active: var(--_bg); } .cf-btn-carga { display: inline-flex; flex: none; margin-top: calc(-1 * var(--_nudge)); } .cf-btn > .cf-btn-carga { order: 1; } /* sem ícone: texto invisível (a largura não muda) e símbolo grande no centro */ .cf-btn[data-cf-carga-centro] { position: relative; } .cf-btn[data-cf-carga-centro] > .cf-btn-label { visibility: hidden; } .cf-btn[data-cf-carga-centro] > .cf-btn-carga { position: absolute; inset: 0; margin: 0; display: flex; align-items: center; justify-content: center; } .cf-btn[data-cf-carga-centro] > .cf-btn-carga svg { width: auto; height: 1.5em; } .cf-btn [hidden] { display: none !important; } .cf-btn-carga svg { display: block; width: 0.7em; height: 1.1em; overflow: visible; } .cf-btn-carga .cf-fii-f { fill: currentColor; } .cf-btn-carga .cf-fii-b { fill: currentColor; opacity: 0.2; animation: cf-fii-janelas 1.6s ease-in-out infinite; } .cf-btn-carga .cf-fii-b2 { animation-delay: 0.2s; } .cf-btn-carga .cf-fii-b4 { animation-delay: 0.4s; } .cf-btn-carga .cf-fii-b3 { animation-delay: 0.6s; } .cf-btn-box .cf-btn-carga { margin-top: 0; } .cf-btn-box:has(.cf-btn-carga) > [class^="icon-regular_"] { display: none; } @keyframes cf-fii-janelas { 0%, 100% { opacity: 0.2; } 30%, 55% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .cf-btn-carga .cf-fii-b { animation: none; opacity: 1; } } /* ---- grupo de botões ---- */ .cf-btn-group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cf-space-inline); } /* Alto contraste do Windows remove box-shadow: devolve um contorno real para o botão continuar visível */ @media (forced-colors: active) { .cf-btn { border: 1px solid ButtonText; } .cf-btn-box, .cf-btn:not([data-variant="ghost"]):not([data-icon-only]) > [class^="icon-regular_"] { border-left: 1px solid ButtonText; } } /* ========================================================================== Card — .cf-card Substitui: .card, .card-header/.card-body/.card-footer, .card-img-header, .barra-hover, line-diagonal, e os blocos "box" montados à mão nas páginas. Variantes (data-variant): (padrão) contorno fino · "marca" cabeçalho azul-noite com título em caixa alta (assinatura do Legado) · "destaque" filete vinho à esquerda · "sutil" fundo cinza, sem contorno data-clicavel: o card inteiro é um link (o fica no título; hover realça o contorno) .cf-card-midia: imagem 16:9 no topo · .cf-card-kpi: indicador (rótulo, número, variação) Retos. Tabelas dentro do card usam o fundo do card (--cf-table-bg). ========================================================================== */ .cf-card { --cf-table-bg: var(--cf-color-bg-surface); container: cf-card / inline-size; /* o conteúdo se adapta à largura do CARD, não da tela */ position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--cf-color-bg-surface); color: var(--cf-color-text); box-shadow: inset 0 0 0 var(--cf-border-hairline) var(--cf-color-border); transition: box-shadow var(--cf-motion-duration-fast) var(--cf-motion-ease); } .cf-card-cabecalho { display: flex; align-items: center; justify-content: space-between; gap: var(--cf-space-12); padding: var(--cf-space-16) var(--cf-space-inset) 0; } .cf-card-titulo { margin: 0; font-size: var(--cf-type-subtitle-size); line-height: var(--cf-type-subtitle-line); font-weight: var(--cf-type-subtitle-weight); letter-spacing: var(--cf-type-subtitle-tracking); text-transform: uppercase; } .cf-card-cabecalho > a:not(.cf-btn) { font-size: var(--cf-type-body-sm-size); font-weight: var(--cf-weight-medium); white-space: nowrap; } .cf-card-corpo { flex: 1; padding: var(--cf-space-16) var(--cf-space-inset); min-width: 0; } .cf-card-corpo > :first-child { margin-top: 0; } .cf-card-corpo > :last-child { margin-bottom: 0; } .cf-card-rodape { display: flex; align-items: center; justify-content: space-between; gap: var(--cf-space-12); flex-wrap: wrap; padding: var(--cf-space-12) var(--cf-space-inset); border-top: var(--cf-border-hairline) solid var(--cf-color-border); font-size: var(--cf-type-body-sm-size); color: var(--cf-color-text-secondary); } .cf-card-rodape .cf-btn { margin-left: auto; } /* variante "marca": cabeçalho azul-noite (assinatura do Legado) */ .cf-card[data-variant="marca"] > .cf-card-cabecalho { padding: var(--cf-space-12) var(--cf-space-inset); background: var(--cf-color-bg-inverse); color: var(--cf-color-text-inverse); } .cf-card[data-variant="marca"] > .cf-card-cabecalho a:not(.cf-btn) { color: inherit; } [data-theme="dark"] .cf-card[data-variant="marca"] > .cf-card-cabecalho { background: var(--cf-color-bg-muted); color: var(--cf-color-text); } /* variante "destaque": filete vinho à esquerda (dentro do contorno — não mexe no tamanho) */ .cf-card[data-variant="destaque"] { box-shadow: inset 0 0 0 var(--cf-border-hairline) var(--cf-color-border), inset var(--cf-border-accent) 0 0 var(--cf-color-bg-brand); } /* variante "sutil": fundo cinza, sem contorno (blocos de apoio, barras laterais) */ .cf-card[data-variant="sutil"] { --cf-table-bg: var(--cf-color-bg-subtle); background: var(--cf-color-bg-subtle); box-shadow: none; } /* card inteiro clicável: o link real fica no título (acessível); o ::after cobre o card */ .cf-card-link { color: inherit; text-decoration: none; } .cf-card-link::after { content: ""; position: absolute; inset: 0; z-index: 0; } .cf-card[data-clicavel] :is(button, .cf-btn, a:not(.cf-card-link)) { position: relative; z-index: 1; } .cf-card[data-clicavel]:hover { box-shadow: inset 0 0 0 var(--cf-border-hairline) var(--cf-color-text-brand); } .cf-card[data-clicavel][data-variant="destaque"]:hover { box-shadow: inset 0 0 0 var(--cf-border-hairline) var(--cf-color-text-brand), inset var(--cf-border-accent) 0 0 var(--cf-color-bg-brand); } .cf-card[data-clicavel]:hover .cf-card-link { color: var(--cf-color-text-link); } .cf-card:has(.cf-card-link:focus-visible) { outline: var(--cf-border-strong) solid var(--cf-color-border-focus); outline-offset: 2px; } .cf-card-link:focus-visible { outline: none; } /* mídia no topo: 16:9, sem pular durante o carregamento */ .cf-card-midia { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--cf-color-bg-muted); } .cf-card-midia + .cf-card-cabecalho { padding-top: var(--cf-space-16); } /* indicador (KPI) */ .cf-card-kpi { display: flex; flex-direction: column; gap: var(--cf-space-4); } .cf-card-kpi-rotulo { font-size: var(--cf-type-label-size); font-weight: var(--cf-weight-bold); letter-spacing: var(--cf-type-label-tracking); text-transform: uppercase; color: var(--cf-color-text-secondary); } .cf-card-kpi-valor { font-size: var(--cf-type-number-xl-size); line-height: var(--cf-type-number-xl-line); font-weight: var(--cf-type-number-xl-weight); font-variant-numeric: tabular-nums lining-nums; } .cf-card-kpi-nota { font-size: var(--cf-type-caption-size); color: var(--cf-color-text-secondary); font-variant-numeric: tabular-nums; } /* linhas rótulo/valor dentro do card (dados do fundo) */ .cf-card-dados { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0; margin: 0; } .cf-card-dados > dt, .cf-card-dados > dd { padding: var(--cf-space-8) 0; border-bottom: var(--cf-border-hairline) solid var(--cf-color-border); margin: 0; } .cf-card-dados > dt { color: var(--cf-color-text-secondary); font-size: var(--cf-type-body-sm-size); } .cf-card-dados > dd { text-align: right; font-variant-numeric: tabular-nums; font-size: var(--cf-type-body-sm-size); white-space: nowrap; padding-left: var(--cf-space-12); } .cf-card-dados > :nth-last-child(-n+2) { border-bottom: 0; } /* card estreito: rótulo em cima, valor embaixo (valor nunca quebra no meio) */ @container cf-card (max-width: 15rem) { .cf-card-dados { grid-template-columns: 1fr; } .cf-card-dados > dt { border-bottom: 0; padding-bottom: 0; } .cf-card-dados > dd { text-align: left; padding-left: 0; padding-top: 2px; white-space: normal; } .cf-card-dados > dd:last-child { border-bottom: 0; } .cf-card-dados > dt:nth-last-child(2) { border-bottom: 0; } } /* carregando */ .cf-card[aria-busy="true"] .cf-card-corpo > * { visibility: hidden; } .cf-card[aria-busy="true"] .cf-card-corpo { position: relative; } .cf-card[aria-busy="true"] .cf-card-corpo::before { content: ""; position: absolute; inset: var(--cf-space-16) var(--cf-space-inset); background: linear-gradient(var(--cf-color-bg-muted) 0 0.75rem, transparent 0 1.5rem) 0 0 / 70% 1.5rem repeat-y, linear-gradient(90deg, transparent, var(--cf-color-bg-surface) 50%, transparent) 0 0 / 200% 100%; animation: cf-skeleton 1.2s linear infinite; } /* grade de cards: mesma altura por linha */ .cf-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: var(--cf-space-gutter); } @media (forced-colors: active) { .cf-card { border: 1px solid CanvasText; } } /* ========================================================================== Formulário — .cf-field, .cf-input, .cf-select, .cf-textarea, .cf-input-group, .cf-check, .cf-radio, .cf-switch Substitui: inputs soltos com placeholder no lugar de rótulo, .mk-field (CC&C), jQuery UI datepicker (→ nativo), selects sem estilo. Campo completo:
R$

Use vírgula para os centavos.

Informe um valor maior que zero.

← aparece com aria-invalid="true"
Regras: rótulo SEMPRE visível (placeholder é exemplo, nunca rótulo) · marcar o opcional, não o obrigatório · erro = aria-invalid="true" no campo + mensagem ligada por aria-describedby · contorno por box-shadow inset (nunca border) para grupos e botões encaixados não desalinharem no zoom. Tamanho: data-size="sm|lg" no campo ou no grupo; densidade compacta encolhe sozinha. ========================================================================== */ /* ---- o campo (rótulo + controle + dica + erro) ---- */ .cf-field { display: flex; flex-direction: column; gap: var(--cf-space-8); min-width: 0; } .cf-field-label { font-size: var(--cf-type-label-size); line-height: var(--cf-type-label-line); font-weight: var(--cf-type-label-weight); letter-spacing: var(--cf-type-label-tracking); text-transform: uppercase; color: var(--cf-color-text); } .cf-field-optional { font-weight: var(--cf-weight-regular); text-transform: none; letter-spacing: 0; color: var(--cf-color-text-secondary); } .cf-field-hint, .cf-field-error { margin: 0; font-size: var(--cf-type-caption-size); line-height: var(--cf-type-caption-line); color: var(--cf-color-text-secondary); } .cf-field-error { display: none; color: var(--cf-color-negative-text); } .cf-field:has([aria-invalid="true"]) .cf-field-error { display: block; } /* ---- controles de texto ---- */ .cf-input, .cf-select, .cf-textarea { --_h: var(--cf-control-md); --_line: var(--cf-color-border-strong); display: block; box-sizing: border-box; width: 100%; min-width: 0; height: var(--_h); margin: 0; padding: 0 var(--cf-space-12); border: 0; border-radius: 0; background: var(--cf-color-bg-surface); box-shadow: inset 0 0 0 var(--cf-border-hairline) var(--_line); color: var(--cf-color-text); font-family: var(--cf-font-sans); font-size: var(--cf-type-body-size); /* 16px: abaixo disso o iPhone dá zoom ao focar */ line-height: normal; font-variant-numeric: tabular-nums lining-nums; outline: none; appearance: none; -webkit-appearance: none; transition: box-shadow var(--cf-motion-duration-fast) var(--cf-motion-ease), background-color var(--cf-motion-duration-fast) var(--cf-motion-ease); } .cf-input::placeholder, .cf-textarea::placeholder { color: var(--cf-color-text-tertiary); opacity: 1; } .cf-input:hover, .cf-select:hover, .cf-textarea:hover { --_line: var(--cf-color-text-secondary); } /* foco: contorno de 2px por dentro (não mexe no layout) */ .cf-input:focus-visible, .cf-select:focus-visible, .cf-textarea:focus-visible, .cf-input:focus, .cf-textarea:focus { box-shadow: inset 0 0 0 var(--cf-border-strong) var(--cf-color-border-focus); } .cf-input[aria-invalid="true"], .cf-select[aria-invalid="true"], .cf-textarea[aria-invalid="true"] { --_line: var(--cf-color-negative-text); } .cf-input[aria-invalid="true"]:focus, .cf-select[aria-invalid="true"]:focus-visible, .cf-textarea[aria-invalid="true"]:focus { box-shadow: inset 0 0 0 var(--cf-border-strong) var(--cf-color-negative-text); } .cf-input:disabled, .cf-select:disabled, .cf-textarea:disabled { --_line: var(--cf-color-border); background: var(--cf-color-bg-muted); color: var(--cf-color-text-disabled); cursor: not-allowed; } .cf-input:read-only:not(:disabled), .cf-textarea:read-only:not(:disabled) { background: var(--cf-color-bg-subtle); --_line: var(--cf-color-border); } /* tamanhos e densidade */ :is(.cf-input, .cf-select, .cf-input-group)[data-size="sm"], .cf-field[data-size="sm"] :is(.cf-input, .cf-select, .cf-input-group) { --_h: var(--cf-control-sm); font-size: var(--cf-type-body-sm-size); } :is(.cf-input, .cf-select, .cf-input-group)[data-size="lg"], .cf-field[data-size="lg"] :is(.cf-input, .cf-select, .cf-input-group) { --_h: var(--cf-control-lg); } [data-density="compact"] :is(.cf-input, .cf-select, .cf-textarea) { font-size: var(--cf-type-body-sm-size); } /* número e data */ .cf-input[type="number"] { -moz-appearance: textfield; } .cf-input[type="number"]::-webkit-inner-spin-button, .cf-input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .cf-input[type="date"], .cf-input[type="time"], .cf-input[type="datetime-local"], .cf-input[type="month"] { padding-right: var(--cf-space-8); } .cf-input::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.7; } [data-theme="dark"] .cf-input::-webkit-calendar-picker-indicator { filter: invert(1); } .cf-input::-webkit-search-cancel-button { cursor: pointer; } /* ---- seletor ---- (seta desenhada com gradientes em currentColor: acompanha o tema) */ .cf-select { padding-right: calc(var(--cf-space-12) + 1.5em); cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--cf-color-icon) 50%), linear-gradient(135deg, var(--cf-color-icon) 50%, transparent 50%); background-position: right calc(var(--cf-space-12) + 5px) center, right var(--cf-space-12) center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } .cf-select:disabled { background-image: none; } .cf-select option { color: var(--cf-color-text); background: var(--cf-color-bg-surface); } /* ---- área de texto ---- */ .cf-textarea { height: auto; min-height: calc(var(--cf-type-body-size) * 1.5 * 3 + var(--cf-space-12) * 2); padding: var(--cf-space-12); line-height: 1.5; resize: vertical; field-sizing: content; /* cresce com o texto (Chrome 123+); nos outros, resize manual */ max-height: 24rem; } /* ---- grupo: prefixo/sufixo (R$, %) e botão encaixado ---- */ .cf-input-group { --_h: var(--cf-control-md); --_line: var(--cf-color-border-strong); position: relative; display: flex; align-items: stretch; height: var(--_h); background: var(--cf-color-bg-surface); box-shadow: inset 0 0 0 var(--cf-border-hairline) var(--_line); transition: box-shadow var(--cf-motion-duration-fast) var(--cf-motion-ease); } .cf-input-group:hover { --_line: var(--cf-color-text-secondary); } .cf-input-group:has(.cf-input:focus, .cf-select:focus-visible) { box-shadow: inset 0 0 0 var(--cf-border-strong) var(--cf-color-border-focus); } .cf-input-group:has([aria-invalid="true"]) { --_line: var(--cf-color-negative-text); } .cf-input-group:has([aria-invalid="true"]:focus) { box-shadow: inset 0 0 0 var(--cf-border-strong) var(--cf-color-negative-text); } .cf-input-group:has(.cf-input:disabled) { --_line: var(--cf-color-border); background: var(--cf-color-bg-muted); } /* dentro do grupo, quem desenha o contorno é o grupo */ .cf-input-group > .cf-input, .cf-input-group > .cf-select { flex: 1; height: auto; box-shadow: none; background: transparent; } .cf-input-group > .cf-input:focus { box-shadow: none; } /* seletor depois de um campo no mesmo grupo (ex.: prazo + "anos/meses"): linha divisória à esquerda */ .cf-input-group > .cf-select:not(:first-child) { box-shadow: inset var(--cf-border-hairline) 0 0 var(--cf-color-border); flex: 0 0 auto; width: auto; } .cf-input-addon { display: flex; align-items: center; flex: none; padding: 0 var(--cf-space-12); margin: var(--cf-border-hairline); /* fica dentro do contorno do grupo */ background: var(--cf-color-bg-subtle); color: var(--cf-color-text-secondary); font-size: var(--cf-type-body-sm-size); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; user-select: none; } .cf-input-addon:first-child { margin-right: 0; } .cf-input-addon:last-child { margin-left: 0; } /* botão encaixado à direita (busca, enviar): herda a altura do grupo e cobre o contorno daquele lado */ .cf-input-group > .cf-btn { --_h: inherit; /* mesma altura do grupo (sm/md/lg) — só ícone vira quadrado exato */ flex: none; height: auto; align-self: stretch; } /* ---- checkbox, radio, interruptor ---- */ .cf-check, .cf-radio, .cf-switch { display: inline-flex; align-items: flex-start; gap: var(--cf-space-8); min-height: var(--cf-target-min); /* alvo mínimo de 24px */ padding-block: 2px; color: var(--cf-color-text); font-size: var(--cf-type-body-size); line-height: 1.5; cursor: pointer; } [data-density="compact"] :is(.cf-check, .cf-radio, .cf-switch) { font-size: var(--cf-type-body-sm-size); } :is(.cf-check, .cf-radio, .cf-switch) > input { --_line: var(--cf-color-border-strong); flex: none; font: inherit; /* sem isso, 1lh seria a linha do próprio input (fonte do navegador) */ width: 1.25rem; height: 1.25rem; margin: calc((1lh - 1.25rem) / 2) 0 0; /* centraliza com a 1ª linha do texto, mesmo se o texto quebrar */ border: 0; border-radius: 0; background: var(--cf-color-bg-surface) center / 100% 100% no-repeat; box-shadow: inset 0 0 0 var(--cf-border-hairline) var(--_line); appearance: none; -webkit-appearance: none; cursor: pointer; transition: background-color var(--cf-motion-duration-fast) var(--cf-motion-ease), box-shadow var(--cf-motion-duration-fast) var(--cf-motion-ease); } :is(.cf-check, .cf-radio, .cf-switch):hover > input:not(:disabled) { --_line: var(--cf-color-text-secondary); } :is(.cf-check, .cf-radio, .cf-switch) > input:focus-visible { outline: var(--cf-border-strong) solid var(--cf-color-border-focus); outline-offset: 2px; } :is(.cf-check, .cf-radio, .cf-switch):has(> input:disabled) { color: var(--cf-color-text-disabled); cursor: not-allowed; } :is(.cf-check, .cf-radio, .cf-switch) > input:disabled { --_line: var(--cf-color-border); background-color: var(--cf-color-bg-muted); cursor: not-allowed; } :is(.cf-check, .cf-radio) > input[aria-invalid="true"] { --_line: var(--cf-color-negative-text); } /* checkbox: quadrado (reto), marcado = vinho com ✓ branco */ .cf-check > input:checked, .cf-check > input:indeterminate { background-color: var(--cf-color-bg-brand); --_line: var(--cf-color-bg-brand); } .cf-check > input:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 6.8' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E"); } .cf-check > input:indeterminate { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10h10' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E"); } .cf-check > input:disabled:checked { background-color: var(--cf-color-bg-muted); --_line: var(--cf-color-border); filter: grayscale(1) opacity(0.6); } /* radio: um dos poucos círculos do sistema (convenção que o diferencia do checkbox) */ .cf-radio > input { border-radius: var(--cf-radius-round); } .cf-radio > input:checked { --_line: var(--cf-color-bg-brand); background-color: var(--cf-color-bg-brand); box-shadow: inset 0 0 0 var(--cf-border-hairline) var(--_line), inset 0 0 0 0.3125rem var(--cf-color-bg-surface); } /* interruptor: trilho e botão RETOS (assinatura da marca); ligado = vinho */ .cf-switch > input { width: 2.25rem; background-color: var(--cf-color-bg-muted); position: relative; } .cf-switch > input::before { content: ""; position: absolute; top: 3px; left: 3px; width: calc(1.25rem - 6px); height: calc(1.25rem - 6px); background: var(--cf-color-text-secondary); transition: transform var(--cf-motion-duration) var(--cf-motion-ease), background-color var(--cf-motion-duration) var(--cf-motion-ease); } .cf-switch > input:checked { background-color: var(--cf-color-bg-brand); --_line: var(--cf-color-bg-brand); } .cf-switch > input:checked::before { transform: translateX(1rem); background: #fff; } /* ---- grupo de opções ---- */ .cf-fieldset { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--cf-space-8); } .cf-fieldset > legend { padding: 0; margin-bottom: var(--cf-space-4); } .cf-options { display: flex; flex-direction: column; gap: var(--cf-space-4); } .cf-options[data-inline] { flex-direction: row; flex-wrap: wrap; gap: var(--cf-space-4) var(--cf-space-24); } /* Alto contraste do Windows: devolve contornos reais */ @media (forced-colors: active) { .cf-input, .cf-select, .cf-textarea, .cf-input-group, :is(.cf-check, .cf-radio, .cf-switch) > input { border: 1px solid CanvasText; } .cf-input-group > :is(.cf-input, .cf-select) { border: 0; } } /* ========================================================================== Tag — .cf-tag (selos, status, tipo de ativo, variação, filtro removível) Substitui: .badge, .badge-sigla-*, .chip, .tag-intensity, .cf-busca-sigla/.cf-busca-tipo (busca), mk-badge. Novo neutra, tonal Pago tom: brand · positive · negative · warning · info · neutral Atrasado sólida = ênfase alta (raro) FII tipo de ativo (cores fixas por tipo) +0,85% variação (seta + cor; nunca só cor) Ao vivo ponto de status (círculo = exceção permitida) data-size="sm" (18px) · padrão 22px · data-size="lg" (28px) Retas (raio 0). CAIXA ALTA centralizada com text-box (a tag é inline-block, então o recorte se aplica nela mesma, sem span interno); fallback: --cf-caps-nudge. ========================================================================== */ .cf-tag { --_h: 1.375rem; /* 22px */ --_fs: 0.6875rem; /* 11px */ --_bg: var(--cf-color-bg-muted); --_fg: var(--cf-color-text-secondary); display: inline-block; box-sizing: border-box; height: var(--_h); padding: 0 0.5em; margin: 0; border: 0; border-radius: 0; background: var(--_bg); color: var(--_fg); font-family: var(--cf-font-sans); font-size: var(--_fs); font-weight: var(--cf-weight-bold); letter-spacing: 0.06em; text-transform: uppercase; line-height: var(--_h); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; text-decoration: none; font-variant-numeric: tabular-nums lining-nums; } @supports (text-box: trim-both cap alphabetic) { .cf-tag { line-height: 1; text-box: trim-both cap alphabetic; padding-block: calc((var(--_h) - 1cap) / 2); } } @supports not (text-box: trim-both cap alphabetic) { .cf-tag { padding-top: var(--cf-caps-nudge); } } .cf-tag[data-size="sm"] { --_h: 1.125rem; --_fs: 0.625rem; } .cf-tag[data-size="lg"] { --_h: 1.75rem; --_fs: 0.75rem; padding-inline: 0.75em; } /* tons (tonal = padrão) */ .cf-tag[data-tom="brand"] { --_bg: var(--cf-color-bg-brand-subtle); --_fg: var(--cf-color-text-brand); } .cf-tag[data-tom="positive"] { --_bg: var(--cf-color-positive-tint); --_fg: var(--cf-color-positive-on-tint); } .cf-tag[data-tom="negative"] { --_bg: var(--cf-color-negative-tint); --_fg: var(--cf-color-negative-on-tint); } .cf-tag[data-tom="warning"] { --_bg: var(--cf-color-warning-tint); --_fg: var(--cf-color-warning-on-tint); } .cf-tag[data-tom="info"] { --_bg: var(--cf-color-info-tint); --_fg: var(--cf-color-info-on-tint); } .cf-tag[data-tom="neutral"] { --_bg: transparent; --_fg: var(--cf-color-text-secondary); box-shadow: inset 0 0 0 var(--cf-border-hairline) var(--cf-color-border-strong); } /* sólida: ênfase alta */ .cf-tag[data-solida] { --_bg: var(--cf-color-bg-inverse); --_fg: var(--cf-color-text-inverse); } .cf-tag[data-solida][data-tom="brand"] { --_bg: var(--cf-color-bg-brand); --_fg: #fff; } .cf-tag[data-solida][data-tom="positive"] { --_bg: var(--cf-color-positive-fill); --_fg: var(--cf-color-positive-on-fill); } .cf-tag[data-solida][data-tom="negative"] { --_bg: var(--cf-color-negative-fill); --_fg: var(--cf-color-negative-on-fill); } .cf-tag[data-solida][data-tom="warning"] { --_bg: var(--cf-color-warning-fill); --_fg: var(--cf-color-warning-on-fill); } .cf-tag[data-solida][data-tom="info"] { --_bg: var(--cf-color-info-fill); --_fg: var(--cf-color-info-on-fill); } /* tipo de ativo: cada tipo com sua família de cor (escalas do sistema — contraste validado) claro: fundo 100 + texto 800 · escuro: fundo = 700 misturado ao fundo do card + texto 200 */ .cf-tag[data-sigla] { --_c1: var(--cf-gray-100); --_c2: var(--cf-gray-200); --_c7: var(--cf-gray-700); --_c8: var(--cf-gray-800); } .cf-tag[data-sigla="FII"] { --_c1: var(--cf-wine-100); --_c2: var(--cf-wine-200); --_c7: var(--cf-wine-700); --_c8: var(--cf-wine-800); } .cf-tag[data-sigla="FIAGRO"] { --_c1: var(--cf-green-100); --_c2: var(--cf-green-200); --_c7: var(--cf-green-700); --_c8: var(--cf-green-800); } .cf-tag:is([data-sigla="FI-INFRA"], [data-sigla="FI-Infra"]) { --_c1: var(--cf-concrete-100); --_c2: var(--cf-concrete-200); --_c7: var(--cf-concrete-700); --_c8: var(--cf-concrete-800); } .cf-tag[data-sigla="FIP-IE"] { --_c1: var(--cf-purple-100); --_c2: var(--cf-purple-200); --_c7: var(--cf-purple-700); --_c8: var(--cf-purple-800); } .cf-tag:is([data-sigla="CRI"], [data-sigla="CRA"]) { --_c1: var(--cf-orange-100); --_c2: var(--cf-orange-200); --_c7: var(--cf-orange-700); --_c8: var(--cf-orange-800); } .cf-tag[data-sigla="DEB"] { --_c1: var(--cf-cream-100); --_c2: var(--cf-cream-200); --_c7: var(--cf-cream-700); --_c8: var(--cf-cream-800); } .cf-tag:is([data-sigla="BDR"], [data-sigla="REIT"]) { --_c1: var(--cf-blue-100); --_c2: var(--cf-blue-200); --_c7: var(--cf-blue-700); --_c8: var(--cf-blue-800); } .cf-tag[data-sigla] { --_bg: var(--_c1); --_fg: var(--_c8); } [data-theme="dark"] .cf-tag[data-sigla] { --_bg: color-mix(in oklab, var(--_c7) 55%, var(--cf-color-bg-surface)); --_fg: var(--_c2); } /* variação: seta + cor */ .cf-tag[data-trend]::before { display: inline-block; margin-right: 0.35em; font-size: 0.85em; } .cf-tag[data-trend="up"] { --_bg: var(--cf-color-positive-tint); --_fg: var(--cf-color-positive-on-tint); } .cf-tag[data-trend="up"]::before { content: "▲"; content: "▲" / ""; } .cf-tag[data-trend="down"] { --_bg: var(--cf-color-negative-tint); --_fg: var(--cf-color-negative-on-tint); } .cf-tag[data-trend="down"]::before { content: "▼"; content: "▼" / ""; } .cf-tag[data-trend="flat"]::before { content: "–"; content: "–" / ""; } /* ponto de status (pregão aberto, ao vivo, novo) */ .cf-tag[data-ponto]::before { content: ""; display: inline-block; width: 0.55em; height: 0.55em; margin-right: 0.5em; border-radius: var(--cf-radius-round); background: currentColor; vertical-align: 0.1em; } .cf-tag[data-ponto="positive"]::before { background: var(--cf-color-positive-icon); } .cf-tag[data-ponto="negative"]::before { background: var(--cf-color-negative-icon); } .cf-tag[data-ponto="warning"]::before { background: var(--cf-color-warning-icon); } .cf-tag[data-ponto="brand"]::before { background: var(--cf-color-icon-brand); } .cf-tag[data-ponto="ao-vivo"]::before { background: var(--cf-color-negative-icon); animation: cf-tag-pulso 1.6s ease-in-out infinite; } @keyframes cf-tag-pulso { 50% { opacity: 0.3; } } @media (prefers-reduced-motion: reduce) { .cf-tag[data-ponto="ao-vivo"]::before { animation: none; } } /* removível (filtros aplicados): é um botão; o × é desenhado em CSS */ button.cf-tag[data-removivel], a.cf-tag[data-removivel] { --_bg: var(--cf-color-bg-brand-subtle); --_fg: var(--cf-color-text-brand); --_h: var(--cf-control-sm); --_fs: var(--cf-type-body-sm-size); font-weight: var(--cf-weight-regular); letter-spacing: 0; text-transform: none; padding-inline: var(--cf-space-12) var(--cf-space-8); cursor: pointer; text-box: none; line-height: var(--_h); padding-block: 0; } button.cf-tag[data-removivel]::after { content: ""; display: inline-block; width: 0.55em; height: 0.55em; margin-left: var(--cf-space-8); vertical-align: 0.05em; background: linear-gradient(45deg, transparent calc(50% - 0.75px), currentColor calc(50% - 0.75px), currentColor calc(50% + 0.75px), transparent calc(50% + 0.75px)), linear-gradient(-45deg, transparent calc(50% - 0.75px), currentColor calc(50% - 0.75px), currentColor calc(50% + 0.75px), transparent calc(50% + 0.75px)); } button.cf-tag[data-removivel]:hover { --_bg: var(--cf-wine-100); } [data-theme="dark"] button.cf-tag[data-removivel]:hover { --_bg: var(--cf-wine-900); } .cf-tag:is(button, a):focus-visible { outline: var(--cf-border-strong) solid var(--cf-color-border-focus); outline-offset: 2px; } /* grupo */ .cf-tags { display: flex; flex-wrap: wrap; gap: var(--cf-space-8); align-items: center; }