/** * Tainacan layout overrides for the Pro theme. * * Styles search, filters, sorting, and Select2 components. * Uses design tokens (--mais-color-*, --mais-font-*, --mais-spacing-*) from . */ /* Altura unificada dos campos (inputs, selects, composite) — fonte única */ :root { --mais-tainacan-field-height: 3em; } /* --- Base --- */ .tainacan-search-input-wrapper, .tainacan-sorting-wrapper, .tainacan-sorting-container, .tainacan-filters-wrapper, .tainacan-input-group, .select2-container--default { font-family: var(--mais-font-headline-family) !important; color: var(--mais-color-blue); } .tainacan-sorting-wrapper label, .tainacan-sorting-container .tainacan-sorting-label, .tainacan-filters-wrapper label { font-size: 1em; font-weight: 600; display: none; } .tainacan-sorting-form, .tainacan-filters-form { display: flex; flex-direction: column; gap: 1em; } /* --- Formulário de Busca Principal --- */ .tainacan-search-form-wrapper, .tainacan-search-form { width: 100%; } .tainacan-search-form { margin: 0; } .tainacan-search-input-wrapper, .tainacan-search-form .tainacan-input-group { box-sizing: border-box; display: flex; align-items: center; height: var(--mais-tainacan-field-height); border: 2px solid var(--mais-color-blue); border-radius: var(--mais-radius-pill); overflow: hidden; } .tainacan-search-input, .tainacan-search-field { flex: 1; border: none; padding: 0 1.5em; background: transparent; height: 100%; font-family: var(--mais-font-headline-family); font-size: 1em; color: var(--mais-color-blue); } .tainacan-search-input::placeholder, .tainacan-search-field::placeholder { color: var(--mais-color-blue); } /* Suprime o botão de limpar nativo do browser em */ .tainacan-search-input::-webkit-search-cancel-button, .tainacan-search-field::-webkit-search-cancel-button, .tainacan-search-input::-webkit-search-decoration, .tainacan-search-field::-webkit-search-decoration { -webkit-appearance: none; appearance: none; } .tainacan-search-input:focus, .tainacan-search-input:focus-visible, .tainacan-search-field:focus, .tainacan-search-field:focus-visible { outline: none; } .tainacan-search-clear, .tainacan-search-submit { background: transparent; display: flex; justify-content: center; align-items: center; } .tainacan-search-clear { padding: 0.5em; } .tainacan-search-submit { padding: 0.5em 1em 0.5em 0.875em; } .tainacan-search-clear img, .tainacan-search-submit img { width: 1.25em; } /* --- Ícones Font Awesome no botão de busca --- */ .tainacan-search-submit .fa-magnifying-glass, .tainacan-search-submit .fa-xmark { font-size: 1.125em; color: var(--mais-color-blue); transition: color 0.2s; line-height: 1; } .tainacan-search-submit:hover .fa-magnifying-glass, .tainacan-search-submit:hover .fa-xmark { color: var(--mais-color-pink); } /* Estado padrão: mostra lupa, esconde X */ .tainacan-search-submit .fa-xmark { display: none; } /* Estado ativo (input com valor): mostra X, esconde lupa */ .tainacan-search-submit.has-value .fa-magnifying-glass { display: none; } .tainacan-search-submit.has-value .fa-xmark { display: inline-block; } /* --- Campos Base (inputs e selects nativos) --- */ .tainacan-filters-wrapper select, .tainacan-sorting-wrapper select, .tainacan-sorting-container select, .tainacan-sorting-container .tainacan-sorting-select, .tainacan-filters-wrapper input[type="text"], .tainacan-filters-wrapper input[type="number"]:not(.tainacan-numeric-interval-min):not(.tainacan-numeric-interval-max) { box-sizing: border-box; background-color: transparent !important; color: var(--mais-color-blue); font-family: var(--mais-font-headline-family); font-size: 1em; height: var(--mais-tainacan-field-height); width: 100%; padding: 0 var(--mais-spacing-md); border: 2px solid var(--mais-color-blue); border-radius: 1.5em !important; } .tainacan-filters-wrapper input[type="text"]::placeholder, .tainacan-filters-wrapper input[type="number"]::placeholder { color: var(--mais-color-blue); } .tainacan-filters-wrapper input[type="number"] { text-align: center; } .tainacan-filters-wrapper input:focus, .tainacan-filters-wrapper select:focus, .tainacan-sorting-wrapper select:focus, .tainacan-sorting-container select:focus, .tainacan-sorting-container .tainacan-sorting-select:focus { outline: none; } /* Evita o flash da lista nativa dos multiselects até o Select2 assumir. */ html.js .tainacan-filters-wrapper select[multiple], html.js .tainacan-filters-wrapper select[data-multiple="true"] { visibility: hidden; } .tainacan-filter-field, .tainacan-sorting-container { position: relative; } /* Select nativo de ordenação (fallback quando Select2 não carrega) — seta customizada */ .tainacan-sorting-container .tainacan-sorting-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='%23006699'%3E%3Cpath d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75em center; background-size: 0.6em; padding-right: 2.25em; } /* --- Intervalo Numérico (Ano de nascimento, etc.) --- */ .tainacan-filter-numeric-interval, .tainacan-numeric-interval-inputs { display: flex; align-items: center; gap: 0.5em; } .tainacan-filter-numeric-interval input, .tainacan-numeric-interval-inputs input { flex: 1; min-width: 0; } .tainacan-filter-numeric-interval span, .tainacan-numeric-interval-inputs .tainacan-numeric-interval-sep { font-size: 1em; font-family: var(--mais-font-headline-family); font-weight: 500; line-height: 1; color: var(--mais-color-blue); flex-shrink: 0; } /* Input composto: aparência de um único campo com placeholder unificado */ .tainacan-numeric-interval-composite { position: relative; width: 100%; height: var(--mais-tainacan-field-height); box-sizing: border-box; padding: 0 var(--mais-spacing-md); border: 2px solid var(--mais-color-blue); border-radius: 1.5em; background-color: transparent; display: flex; align-items: center; justify-content: flex-start; overflow: hidden; } /* Row interno: flex row com elementos alinhados à base (independente do alinhamento do composite) */ .tainacan-numeric-interval-row { display: flex; flex-direction: row; align-items: baseline; gap: 0.5em; flex: 1; min-width: 0; } .tainacan-numeric-interval-composite input { border: none !important; border-radius: 0 !important; background: transparent !important; padding: 0 !important; height: auto !important; line-height: 1; width: auto !important; text-align: left !important; box-shadow: none !important; color: var(--mais-color-blue); font-family: var(--mais-font-headline-family); font-size: 1em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Largura baseada no conteúdo: placeholder inicial e valor digitado (máx. 4 dígitos) */ .tainacan-numeric-interval-composite .tainacan-numeric-interval-min, .tainacan-numeric-interval-composite .tainacan-numeric-interval-max { flex: 0 0 auto; field-sizing: content; min-inline-size: 4ch; max-inline-size: 9ch; } /* Fallback para navegadores sem field-sizing (Chrome 123+, Safari 26.2+) */ @supports not (field-sizing: content) { .tainacan-numeric-interval-composite .tainacan-numeric-interval-min, .tainacan-numeric-interval-composite .tainacan-numeric-interval-max { width: 8ch; } } .tainacan-numeric-interval-composite input:focus { outline: none; box-shadow: none !important; } /* Placeholder unificado quando ambos vazios e sem foco */ .tainacan-numeric-interval-composite:has(.tainacan-numeric-interval-min:placeholder-shown):has(.tainacan-numeric-interval-max:placeholder-shown):not(:focus-within)::before { content: attr(data-placeholder); position: absolute; left: var(--mais-spacing-md); top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--mais-color-blue); font-family: var(--mais-font-headline-family); font-size: 1em; max-width: calc(100% - var(--mais-spacing-md) * 2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Esconde placeholders individuais quando o overlay está visível */ .tainacan-numeric-interval-composite:has(.tainacan-numeric-interval-min:placeholder-shown):has(.tainacan-numeric-interval-max:placeholder-shown):not(:focus-within) input::placeholder { color: transparent; } /* Mostra "até" apenas quando há foco ou valor em algum input */ .tainacan-numeric-interval-composite:has(.tainacan-numeric-interval-min:placeholder-shown):has(.tainacan-numeric-interval-max:placeholder-shown):not(:focus-within) .tainacan-numeric-interval-sep { display: none; } /* Esconde setas dos inputs number */ .tainacan-filters-wrapper input[type="number"]::-webkit-outer-spin-button, .tainacan-filters-wrapper input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .tainacan-filters-wrapper input[type="number"] { -moz-appearance: textfield; } /* --- Select2 Single (Filtros) --- */ .tainacan-filters-wrapper .select2-container--default .select2-selection--single { box-sizing: border-box; background-color: transparent; font-family: var(--mais-font-headline-family); font-size: 1em; height: var(--mais-tainacan-field-height); width: 100%; padding: 0 var(--mais-spacing-md); border: 2px solid var(--mais-color-blue); border-radius: 1.5em !important; display: flex; align-items: center; } .tainacan-filters-wrapper .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--mais-color-blue) !important; font-family: var(--mais-font-headline-family) !important; padding-left: 0; padding-right: 0; line-height: normal; } .tainacan-filters-wrapper .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--mais-color-blue) !important; } .tainacan-filters-wrapper .select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; right: 0.5em; } /* --- Select2 Single (Ordenação) --- */ .tainacan-sorting-wrapper .select2-container--default .select2-selection--single { box-sizing: border-box; background-color: transparent; font-family: var(--mais-font-headline-family); font-size: 1em; height: var(--mais-tainacan-field-height); width: 100%; padding: 0 var(--mais-spacing-md); border: 2px solid var(--mais-color-blue); border-radius: 1.5em !important; display: flex; align-items: center; } .tainacan-sorting-wrapper .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--mais-color-blue) !important; font-family: var(--mais-font-headline-family) !important; padding-left: 0; padding-right: 0; line-height: normal; } .tainacan-sorting-wrapper .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--mais-color-blue) !important; } .tainacan-sorting-wrapper .select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; right: 0.5em; } /* --- Select2 Multiple --- */ .tainacan-filters-wrapper .select2-container--default .select2-selection--multiple { box-sizing: border-box; background-color: transparent; font-family: var(--mais-font-headline-family); font-size: 1em; min-height: var(--mais-tainacan-field-height); height: auto; width: 100%; padding: 0.5em var(--mais-spacing-md); border: 2px solid var(--mais-color-blue); border-radius: 1.5em !important; display: flex; align-items: center; overflow: visible; } .select2-container--default .select2-selection--multiple .select2-selection__rendered { display: flex; flex-wrap: wrap; gap: 0.25em; padding: 0; align-items: center; width: 100%; color: var(--mais-color-blue) !important; } .select2-container--default .select2-selection--multiple .select2-selection__rendered .select2-selection__placeholder { padding: 0; margin: 0; line-height: 1.4; color: var(--mais-color-blue) !important; } .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field::placeholder { color: var(--mais-color-blue) !important; } .select2-container--default .select2-selection--multiple .select2-selection__choice { display: inline-flex; align-items: center; max-width: 100%; margin: 0; padding: 0.15em 0.45em; background-color: var(--mais-color-blue); color: #fff; border: none; border-radius: 1em; font-size: 0.78em; line-height: 1.4; cursor: default; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: #fff; margin-right: 0.25em; flex-shrink: 0; } .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover { color: #fff; background: transparent; } .select2-container--default .select2-selection--multiple .select2-search--inline { display: flex; align-items: center; margin: 0; } .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field { margin: 0; height: auto; min-height: 0; line-height: 1.4; color: var(--mais-color-blue) !important; font-family: var(--mais-font-headline-family) !important; } /* --- Select2 campo de busca no dropdown (single e multi-select com search) --- */ .select2-container--default .select2-search--dropdown { padding: 0.5em 0.75em; } .select2-container--default .select2-search--dropdown .select2-search__field { width: 100%; padding: 0.35em 0.6em; border: 1px solid var(--mais-color-blue); border-radius: var(--mais-radius-pill); color: var(--mais-color-blue); font-family: var(--mais-font-headline-family); font-size: 1em; outline: none; } /* --- Select2 Dropdown --- */ .select2-container--default .select2-dropdown { background-color: white; border: none; box-shadow: 0 0 1em rgba(0, 0, 0, 0.25); border-radius: 1em; margin-top: 0.25em; overflow: hidden; } .select2-dropdown .select2-results { position: relative; } .select2-dropdown .select2-results__options, .select2-dropdown .select2-results__options--nested { display: flex; flex-direction: column; gap: 0.5em; margin: 0; padding: 0.75em 0.35em 0.75em 0.5em; box-sizing: border-box; max-height: 16rem; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: rgba(0, 43, 162, 0.4) transparent; } .select2-container--default .select2-results::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5em; pointer-events: none; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.9)); } .select2-dropdown .select2-results__options::-webkit-scrollbar, .select2-dropdown .select2-results__options--nested::-webkit-scrollbar { width: 0.35em; height: 0.35em; } .select2-dropdown .select2-results__options::-webkit-scrollbar-track, .select2-dropdown .select2-results__options--nested::-webkit-scrollbar-track { background: transparent; } .select2-dropdown .select2-results__options::-webkit-scrollbar-thumb, .select2-dropdown .select2-results__options--nested::-webkit-scrollbar-thumb { background: rgba(0, 43, 162, 0.4); border-radius: 999px; } .select2-dropdown .select2-results__options::-webkit-scrollbar-thumb:hover, .select2-dropdown .select2-results__options--nested::-webkit-scrollbar-thumb:hover { background: rgba(0, 43, 162, 0.55); } .select2-dropdown .select2-results__options::-webkit-scrollbar-button, .select2-dropdown .select2-results__options::-webkit-scrollbar-button:single-button, .select2-dropdown .select2-results__options::-webkit-scrollbar-button:vertical:decrement, .select2-dropdown .select2-results__options::-webkit-scrollbar-button:vertical:increment, .select2-dropdown .select2-results__options--nested::-webkit-scrollbar-button, .select2-dropdown .select2-results__options--nested::-webkit-scrollbar-button:single-button, .select2-dropdown .select2-results__options--nested::-webkit-scrollbar-button:vertical:decrement, .select2-dropdown .select2-results__options--nested::-webkit-scrollbar-button:vertical:increment { display: none; width: 0; height: 0; } .select2-container--default .select2-results__option { display: block; padding: 0.5em 0.75em; white-space: normal; word-break: break-word; color: var(--mais-color-blue) !important; font-family: var(--mais-font-headline-family) !important; } .select2-container--default .select2-results__option[aria-selected="true"] { border-radius: 0.75em; background-color: rgba(0, 43, 162, 0.08); } .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: var(--mais-color-blue); color: white !important; border-radius: 0.75em; } /* --- Select2 Botão Limpar Filtro --- */ .tainacan-select2-clear { display: inline-flex; align-items: center; gap: 0.25em; margin-top: 0.5em; padding: 0; padding-left: 1.375em; background: transparent; border: none; color: var(--mais-color-blue); font-family: var(--mais-font-headline-family); font-size: 0.75em; cursor: pointer; opacity: 0.8; transition: opacity 0.2s; } .tainacan-select2-clear:hover { opacity: 1; } .tainacan-select2-clear-icon { font-size: 1.25em; line-height: 1; } /* --- Autocomplete Botão Limpar Filtro --- */ .tainacan-autocomplete-clear { display: inline-flex; align-items: center; gap: 0.25em; margin-top: 0.5em; padding: 0; padding-left: 1.375em; background: transparent; border: none; color: var(--mais-color-blue); font-family: var(--mais-font-headline-family); font-size: 0.75em; cursor: pointer; opacity: 0.8; transition: opacity 0.2s; } .tainacan-autocomplete-clear:hover { opacity: 1; } .tainacan-autocomplete-clear-icon { font-size: 1.25em; line-height: 1; } /* --- Botões Aplicar --- */ /* * Scale container: sets the base font-size so the button inside scales via em, * matching the em-cascade pattern used by Cornerstone button atoms. */ .tainacan-filters-actions { display: flex; flex-direction: column; gap: 0.75em; font-size: var(--mais-font-size-sm, 0.875rem); } .tainacan-sorting-submit, .tainacan-filters-submit { display: inline-flex; align-items: center; justify-content: center; width: 100%; box-sizing: border-box; /* Typography — inherits scale from parent container */ font-family: var(--mais-font-headline-family); font-size: 1em; font-weight: 400; line-height: var(--mais-line-height-snug, 1.375); text-align: center; text-transform: uppercase; letter-spacing: 0.05em; /* Padding em em units — scales with container font-size */ padding: 0.625em 1.5em; /* Colors */ background-color: var(--mais-color-blue); color: var(--mais-color-cream) !important; /* Shape — matches Cornerstone x-anchor-button */ border: 2px solid var(--mais-color-blue); border-radius: var(--mais-radius-pill); cursor: pointer; transition: background-color 0.2s, color 0.2s, border-color 0.2s; } .tainacan-sorting-submit:hover, .tainacan-filters-submit:hover { background-color: var(--mais-color-pink); border-color: var(--mais-color-pink); } /* Botão Limpar (secundário — estilo outlined, igual ao x-anchor-button secundário do Cornerstone) */ .tainacan-filters-clear { display: inline-flex; align-items: center; justify-content: center; width: 100%; box-sizing: border-box; /* Typography — herda escala do container pai */ font-family: var(--mais-font-headline-family); font-size: 1em; font-weight: 400; line-height: var(--mais-line-height-snug, 1.375); text-align: center; text-transform: uppercase; letter-spacing: 0.05em; text-decoration: none; padding: 0.625em 1.5em; /* Colors — outlined: fundo transparente, borda e texto azul */ background-color: transparent; color: var(--mais-color-blue) !important; border: 2px solid var(--mais-color-blue); border-radius: var(--mais-radius-pill); cursor: pointer; transition: background-color 0.2s, color 0.2s, border-color 0.2s; } .tainacan-filters-clear:hover { background-color: var(--mais-color-blue); color: var(--mais-color-cream) !important; } .tainacan-autocomplete-dropdown li { cursor: pointer; } .tainacan-autocomplete-dropdown li:hover { color: var(--mais-color-pink); } /* Acervo single: keep the category dot in sync with the linked term hover state. */ .e830-e15:hover > .e830-e16, .e830-e15:focus-within > .e830-e16 { border-color: var(--mais-color-pink); }