/* ============================================================================= Tipografia base dos documentos legais (.ifix-legal) POR QUE ESTA FOLHA EXISTE Os 15 documentos de /legal/* nao foram escritos para a web: sao colagens de exports de Word e de Google Docs, cada um carregando a tipografia da ferramenta de origem. Medido nos 12 casos do modal (3 documentos x 4 paises), antes desta folha: - familia: "Open-Sans" (com hifen -- familia que NAO existe, e sem pilha de fallback, entao caia no default do browser), "Times New Roman" e "Trebuchet MS", dependendo do arquivo; - entrelinha: `normal` (~1.2) em 11 dos 12, e 22.08px no outro; - medida de linha: `max-width: none` em TODOS -- a 880px de modal dava ~140 caracteres por linha, quase o dobro do limite confortavel de 65-75; - unidades de Word espalhadas pelo corpo: 1115 valores em `pt` e 341 em `in`. O REMEDIO, E POR QUE COM `!important` `!important` aqui nao e' atalho: os exports gravam `font-family`, `font-size` e `line-height` em atributos `style` INLINE, elemento por elemento -- 198 deles so' em terms-pros-AR.jsp, que e' um fragmento de Google Docs sem . Regra de folha nenhuma vence estilo inline sem `!important`. As tres propriedades marcadas sao exatamente essas tres, e nada mais: cor, negrito, sublinhado, alinhamento e tabelas dos documentos continuam valendo. Consequencia assumida: em terms-pros-AR a hierarquia vinha de variacao de `font-size` inline, nao de

..

. Com o tamanho normalizado ela passa a se apoiar em negrito e sublinhado, que os documentos ja' usam. Os outros 14 arquivos tem headings de verdade e ganham a escala abaixo. A folha e' CSS puro e fica fora do gulp, pelo mesmo motivo de app-header.css: e' linkada direto pelos JSPs legais, que nao passam por layout nenhum. E' servida com `?v=${app.static.version}` -- toda mudanca aqui exige o bump daquela chave em WEB-INF/reloadables/generic.properties. A pilha de fontes e' a MESMA de app-header.css de proposito: o documento aparece dentro do modal da barra de aplicacao, e duas familias diferentes na mesma tela e' justamente o que se esta' corrigindo. O iframe e' um documento a parte e nao herda nada do pai, entao cada JSP legal linka a Open Sans do Google Fonts -- a mesma URL dos layouts v2. Nao e' um download a mais na pratica: a pagina que abre o modal acabou de baixar essa folha, entao o iframe acerta o cache. Nao dependemos de a familia estar instalada na maquina: sem a webfont, quem tem Open Sans no sistema veria uma coisa e quem nao tem veria outra, que e' de novo o defeito original. ========================================================================== */ .ifix-legal { /* 16px/1.65: entrelinha dentro da faixa de 1.5-1.75 recomendada para texto corrido longo. 39rem mantem a linha entre 65 e 75 caracteres. */ margin: 0; padding: 24px 16px 48px; background: #ffffff; color: #2b2b2b; /* 13.4:1 sobre branco */ font-size: 16px !important; line-height: 1.65 !important; font-family: "Open Sans", -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important; -webkit-text-size-adjust: 100%; /* iOS nao infla o corpo em landscape */ /* Os documentos citam URLs inteiras dentro do texto -- terms-BR aponta para o PDF em static-u.iguanafix.com, um token de 59 caracteres sem ponto de quebra natural. Sem isto a pagina inteira ganhava rolagem lateral em tela estreita: medido, 387px de conteudo contra 375 de viewport. */ overflow-wrap: break-word; word-break: break-word; } /* Os exports do Google Docs gravam `white-space: pre-wrap` em cada , preservando tabulacoes e quebras de linha do editor. A 375px isso empurrava a linha para fora da tela: medido, 417px de conteudo contra 360 de viewport em termos-profissionais de MX, e 365 contra 360 no de AR. Sao documentos de prosa -- a quebra intencional vem de
e de

, que continuam valendo. 

 e  ficam de fora por seguranca. */
.ifix-legal *:not(pre):not(code) {
  white-space: normal !important;
}

/* A medida em `rem`, e nao em `ch`: `ch` e' relativo ao font-size do PROPRIO elemento,
   entao 68ch num 
 de 28px da' 1089px -- estourava a caixa, o `margin: auto` nao tinha
   folga para centrar e o titulo encostava na esquerda enquanto o paragrafo ficava
   centrado 105px adiante. Medido: h1 em x=16, 
 em x=121 no mesmo documento.
   `rem` sai do , que fica em 16px, entao 39rem = 624px para todo mundo -- os mesmos
   ~68 caracteres do corpo, agora com titulo e texto na mesma coluna. */
.ifix-legal > * {
  max-width: 39rem;
  margin-left: auto;
  margin-right: auto;
}

/* --------------------------------------------------- texto corrido e listas -- */

/* Reset universal, e nao uma lista de tags, porque a primeira tentativa vazou:
   privacy-AR, privacy-MX e terms-MX embrulham o documento INTEIRO numa  de
   layout que carrega o `font-family` inline, e bastou ela ficar de fora da lista para
   a familia errada descer por heranca ate' o ultimo 
. Com `*` nao ha' elemento
   intermediario para esquecer.

   `inherit` (e nao um valor fixo) de proposito: a cadeia toda passa a apontar para o
   que .ifix-legal define no body, entao existe UM lugar para mudar a tipografia. */
.ifix-legal * {
  font-family: inherit !important;
  line-height: inherit !important;
}

/* Os titulos recuperam o tamanho logo abaixo; o resto do documento fica no corpo. */
.ifix-legal *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
  font-size: inherit !important;
}

/* A medida tambem no proprio paragrafo, e nao so' no filho direto do body: em
   privacy-AR/MX e terms-MX o texto mora dentro de uma 
 de layout, e ali o
   `.ifix-legal > *` nao alcanca. */
.ifix-legal p {
  max-width: 39rem;
  margin: 0 auto 1em;
}

.ifix-legal ol,
.ifix-legal ul {
  margin: 0 auto 1em;
  padding-left: 1.6em;
}

/* Lista aninhada nao reabre a margem de bloco: o recuo ja' comunica o nivel. */
.ifix-legal li > ol,
.ifix-legal li > ul {
  margin-bottom: 0.4em;
  max-width: none;
}

.ifix-legal li {
  margin-bottom: 0.4em;
}

/* Modificador opt-in para documento cujo TEXTO ja' traz a propria numeracao.
   Em privacy-BR os 17 
  •  de 
       comecam com "1.", "1.1.", "(a)" escritos a mao --
   medido, 17 de 17 -- entao o marcador automatico do 
         saia em cima: "1. 1.
   Definicoes". Nenhum outro dos 15 documentos usa 
          , e por isso a regra e' opt-in
   em vez de global: um documento futuro com lista de verdade continua numerando. */
.ifix-legal--numeracao-no-texto ol {
  list-style: none;
  padding-left: 1.2em;
}

/* --------------------------------------------------------------- titulos -- */

/* Escala modular 28/22/18/16, o teto baixo de proposito: o documento e' lido
   numa caixa de 880px dentro de um modal, nao numa pagina inteira. */
.ifix-legal h1,
.ifix-legal h2,
.ifix-legal h3,
.ifix-legal h4,
.ifix-legal h5,
.ifix-legal h6 {
  font-family: inherit !important;
  line-height: 1.3 !important;
  color: #1a1a1a;
  font-weight: 600;
  margin: 2em auto 0.6em;
}

.ifix-legal h1 { font-size: 28px !important; margin-top: 0; }
.ifix-legal h2 { font-size: 22px !important; }
.ifix-legal h3 { font-size: 18px !important; }
.ifix-legal h4,
.ifix-legal h5,
.ifix-legal h6 { font-size: 16px !important; }

/* Titulo seguido de titulo nao acumula o espaco de dois blocos. */
.ifix-legal h1 + h2,
.ifix-legal h2 + h3,
.ifix-legal h3 + h4 {
  margin-top: 1em;
}

/* ------------------------------------------------------- links e tabelas -- */

.ifix-legal a {
  color: #3551ad;                      /* mesmo azul da barra de aplicacao */
  text-decoration: underline;
}

.ifix-legal a:hover,
.ifix-legal a:focus {
  color: #24398a;
}

/* Word exporta larguras de tabela em polegadas, que estouram a caixa do modal
   em tela estreita. */
.ifix-legal table {
  width: 100% !important;
  max-width: 39rem;
  margin: 0 auto 1.5em;
  border-collapse: collapse;
}

.ifix-legal td,
.ifix-legal th {
  padding: 8px 10px;
  border: 1px solid #dcdcdc;
  vertical-align: top;
}

.ifix-legal img {
  max-width: 100%;
  height: auto;
}

/* -------------------------------------------------------------- estreito -- */

@media only screen and (max-width: 640px) {
  .ifix-legal {
    padding: 16px 16px 32px;
  }

  /* privacy-BR tem tres quadros de SEIS colunas. O conteudo minimo deles da' 474px, entao
     a 375px a PAGINA INTEIRA ganhava rolagem lateral -- medido, scrollWidth 509 contra
     360 de viewport, e o texto corrido saia da tela junto.

     A rolagem vai para o 
        1.  que embrulha cada quadro, e nao para a 
    •  via
     `display:block`: aquele truque tira o papel de tabela do elemento em parte dos
     leitores de tela, e aqui a tabela e' conteudo de verdade, com cabecalho. Assim so' o
     quadro rola na horizontal; o resto do documento continua numa coluna so'. */
  .ifix-legal li:has(> table) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .ifix-legal table {
    width: auto !important;
    min-width: 100%;
  }

  .ifix-legal h1 { font-size: 24px !important; }
  .ifix-legal h2 { font-size: 20px !important; }
}