/* * Acabamento das duas peças ilustrativas da home: as cenas de "Agentes no * contexto da sua operação" e o diagrama de "Modelos de IA conectados ao * conhecimento da sua empresa". * * Duas partes: o acabamento (cor, sombra, borda) e a escala, mais abaixo. * * A linha que nenhuma das duas cruza é a **posição**. As cenas são compostas * por posicionamento absoluto, com `top` em px e `left`/`width` em %; mexer * nisso daqui quebraria a composição em silêncio, numa largura de tela que * ninguém testou. Tipografia, respiro interno e a altura do palco são seguros * porque os cartões crescem para baixo, e o palco cresce junto. * * O fio condutor é o filete lime no topo de tudo que a IA produziu. Ele já * existia no sistema como marcador; aqui ele passa a dizer, sem legenda, quais * cartões são resultado de IA e quais são o documento de origem. * * Todo seletor aqui e prefixado com .linte-home-v2, que e a classe do da * home. Nao e enfeite: o reference-direction.css e o brand-balance.css escrevem * `.linte-home-v2 .product-scene`, e um `.product-scene` pelado perde para eles * por especificidade. Com o prefixo empata, e vence por ordem de carga -- que e * o que se quer de uma folha de acabamento, sem !important em lugar nenhum. */ /* ------------------------------------------------------------- as cenas -- */ /* * Sombra em duas camadas: uma curta que assenta o cartão e uma longa e macia * que o separa do fundo. Uma sombra só, forte, deixa a cena pesada. */ .linte-home-v2 .mock-card { border-color: #e8e2f0; border-radius: 10px; box-shadow: .linte-home-v2 0 1px 2px rgba(42, 21, 80, .05), 0 14px 30px -18px rgba(42, 21, 80, .28); } /* O que a IA produziu leva o filete lime no topo. O documento de origem não. */ .linte-home-v2 .review-suggestion, .linte-home-v2 .extraction-result, .linte-home-v2 .flow-rule { border-top: 3px solid #c7f04a; } /* A fonte citada leva o filete na lateral: ela é referência, não resultado. */ .linte-home-v2 .source-card { border-left: 3px solid #c7f04a; } /* Os filetes que sugerem o corpo do documento: mais claros e mais finos, para não competirem com o texto que importa. */ .linte-home-v2 .mock-lines i { background: #ece5f7; height: 5px; border-radius: 3px; } /* Rótulos em caixa alta: o tracking é o que os faz parecer rótulo, não texto. */ .linte-home-v2 .clause-example small, .linte-home-v2 .suggested-copy small, .linte-home-v2 .answer-sources > small, .linte-home-v2 .flow-rule small, .linte-home-v2 .document-parties small { letter-spacing: .1em; color: #8b7aa0; } /* A sugestão da IA e a cláusula aprovada: verde pálido, a mesma família do lime, para o olho ligar as duas ao mesmo agente. */ .linte-home-v2 .suggested-copy, .linte-home-v2 .clause-example { background: #f4f8e8; border-radius: 6px; } .linte-home-v2 .clause-example { border-left: 3px solid #c7f04a; } /* Marcas redondas (avatar, ícone de etapa): mesma família em toda cena. */ .linte-home-v2 .mini-avatar, .linte-home-v2 .flow-icon { box-shadow: inset 0 0 0 1px rgba(27, 13, 53, .06); } /* O selo lime de fechamento da cena de criação, com peso de cartão. */ .linte-home-v2 .scene-confirmation { border-radius: 10px; box-shadow: 0 14px 30px -18px rgba(42, 21, 80, .35); } /* A etapa em curso é a única indigo: a sombra reforça que ela está por cima. */ .linte-home-v2 .flow-node.current { box-shadow: 0 12px 26px -16px rgba(27, 13, 53, .55); } /* A etapa que ainda não chegou recua, em vez de competir com a atual. */ .linte-home-v2 .flow-node.waiting { background: #f5f1fb; border-color: #e7e0f2; color: #6f6480; } /* A legenda de dado fictício é nota de rodapé: discreta e alinhada à direita. */ .linte-home-v2 .scene-footnote { color: #9a8fae; letter-spacing: .01em; } /* ---------------------------------------------------------- o diagrama --- */ .linte-home-v2 .foundation-diagram { background: linear-gradient(170deg, #f8f4fd 0%, #f2ebfb 100%); border-color: #e7daf7; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8); } /* O cartão do modelo é o topo da leitura: ganha o mesmo peso dos cartões das cenas, para as duas peças parecerem do mesmo sistema. */ .linte-home-v2 .model-layer { border-color: #e8e2f0; border-radius: 10px; box-shadow: .linte-home-v2 0 1px 2px rgba(42, 21, 80, .05), 0 14px 30px -18px rgba(42, 21, 80, .26); } /* * Os filetes que ligam as camadas: degradê no sentido da leitura, de cima para * baixo. Um filete chapado lê como borda; com o degradê ele lê como percurso, * que é o que a seção afirma. */ .linte-home-v2 .diagram-stem { background: linear-gradient(180deg, #d8c6ef 0%, #a877e0 100%); } .linte-home-v2 .agent-layer > div { border-color: #e2d4f3; border-radius: 8px; box-shadow: 0 6px 14px -10px rgba(42, 21, 80, .3); } .linte-home-v2 .agent-layer span { color: #6c2bea; } /* O bloco da infraestrutura é a base: sombra mais funda, porque tudo se apoia nele, e o interior com um contorno de luz para não ficar chapado. */ .linte-home-v2 .linte-layer { border-radius: 10px; box-shadow: .linte-home-v2 inset 0 1px 0 rgba(255, 255, 255, .18), 0 16px 34px -20px rgba(108, 43, 234, .7); } .linte-home-v2 .context-layer > span { border-radius: 6px; background: rgba(255, 255, 255, .14); } .linte-home-v2 .layer-label { letter-spacing: .14em; color: #8b6b9e; } .linte-home-v2 .team-layer > span { border-radius: 999px; } @media (prefers-reduced-motion: reduce) { /* nada aqui anima; a nota fica para quem for acrescentar algo depois */ } /* --------------------------------------------------- escala das cenas --- */ @media (min-width: 901px) { /* * As cenas nasceram pequenas: tipografia de 8 a 13px num palco de 430px, numa * coluna que valia 1.22 de 2. Lidas na tela, viravam miniatura — e a cena é o * argumento da seção, não uma ilustração de apoio. * * O aumento vem de três lados ao mesmo tempo, porque mexer num só desequilibra: * mais largura para a coluna, mais altura para o palco e a tipografia inteira * um degrau acima. As posições continuam sendo as originais: os cartões são * absolutos, e mexer em `top` aqui quebraria a composição numa largura que * ninguém testou. */ .linte-home-v2 .feature-panel { grid-template-columns: minmax(0, .64fr) minmax(0, 1.36fr); gap: 48px; } /* * 575px, e nao os 508 da primeira tentativa: com a tipografia um degrau acima, * o cartao do documento e a conversa do assistente passaram a bater no fundo do * palco, que tem overflow:hidden e corta sem avisar. */ .linte-home-v2 .product-scene { height: 575px; } /* * A conversa era a unica cena presa pelos quatro lados, e por isso ocupava o * palco inteiro mesmo quando a conversa acabava antes: 120px de branco morto * dentro do cartao, que e pior que vazio no palco -- parece erro de carga. * * Presa so em cima e nos lados, ela passa a ter a altura do conteudo, e o * translate a centra na vertical. A folga vira margem do palco, que e onde * ela se le como respiro. */ .linte-home-v2 .ai-conversation { inset: auto 5%; top: 50%; transform: translateY(-50%); } /* cartões e rótulos comuns a várias cenas */ .linte-home-v2 .mock-card-heading { font-size: 15px } .linte-home-v2 .mock-input { font-size: 12.5px; padding: 11px 12px } .linte-home-v2 .mock-tag { font-size: 9.5px; padding: 5px 8px } .linte-home-v2 .mock-icon { width: 27px; height: 27px; font-size: 19px } .linte-home-v2 .mini-avatar { width: 26px; height: 26px; font-size: 11px } .linte-home-v2 .clause-example small, .linte-home-v2 .suggested-copy small, .linte-home-v2 .answer-sources > small, .linte-home-v2 .flow-rule small, .linte-home-v2 .document-parties small { font-size: 9.5px } /* criar documentos */ .linte-home-v2 .mini-form { padding: 22px 21px } .linte-home-v2 .mini-form label { font-size: 9.5px } /* A minuta entrava inclinada 2°. Fica reta: o resto da cena e ortogonal, e a inclinacao lia como desalinho em vez de intencao. */ .linte-home-v2 .mini-document { padding: 22px 24px; transform: none; } .linte-home-v2 .mock-doc-title { font-size: 22px; margin: 26px 0 18px } .linte-home-v2 .document-parties strong { font-size: 12.5px } .linte-home-v2 .clause-example p { font-size: 12px; line-height: 1.55 } .linte-home-v2 .document-footer { font-size: 9.5px } /* * O selo do padrao aplicado parecia jogado no canto, e a regua explicou por * que: ele comecava em x67 e o formulario em x42, 25px fora de alinhamento, * com 124px de vazio entre os dois. * * Ele e a conclusao do formulario, nao um adesivo no canto do palco: alinha * pela mesma margem esquerda, sobe para logo abaixo dele, e cresce o * suficiente para nao parecer nota de rodape ao lado de cartoes de 350px. */ .linte-home-v2 .scene-confirmation { left: 5%; top: 392px; bottom: auto; gap: 13px; padding: 19px 24px; } .linte-home-v2 .scene-confirmation strong { font-size: 14.5px } .linte-home-v2 .scene-confirmation div > span { font-size: 12px } .linte-home-v2 .confirmation-check { width: 32px; height: 32px; font-size: 14px } /* revisar com IA */ .linte-home-v2 .review-document { min-height: 344px; padding: 25px 27px } .linte-home-v2 .mock-section-title { font-size: 13.5px } .linte-home-v2 .review-clause { font-size: 15px; max-width: 32ch } .linte-home-v2 .review-marker { font-size: 10.5px } .linte-home-v2 .review-suggestion { padding: 20px 22px } .linte-home-v2 .suggestion-heading { font-size: 13px } .linte-home-v2 .review-suggestion > p { font-size: 13px } .linte-home-v2 .suggested-copy p { font-size: 12.5px } .linte-home-v2 .suggestion-footer { font-size: 11px } /* * Conectar etapas. Esta cena foi a que mais sofreu com o palco maior, e as * duas correcoes vieram de medicao, nao de olho: * * - a regra do processo comecava em x522 e o avatar "IA" da segunda etapa * em x545: ela cobria o avatar pela metade, todas as vezes. A trilha * encolhe para 52% e a regra sai de cima dela de vez. * - a trilha terminava em y416 num palco de 575: 159px de vazio embaixo. * Os filetes entre as etapas passam de 15px para 42px e o fluxo ocupa a * altura que tem, em vez de se amontoar no topo. * * Sim, sao mudancas de posicao, que o resto desta folha evita. A diferenca e * que aqui houve regua: um medidor reporta a posicao de cada peca dentro do * palco, e estes numeros saem dele. */ /* * O titulo da cena estava com 13px, menor que os 15px dos titulos dos * cartoes abaixo dele: hierarquia invertida, e por isso parecia apagado * mesmo estando em tinta cheia. Ele passa a ser o maior da cena, que e o * papel dele, e a etiqueta ao lado sai do verde palido para um tom que * aguenta 10,5px sem sumir. */ .linte-home-v2 .flow-title { gap: 11px } .linte-home-v2 .flow-title strong { font-size: 17px; letter-spacing: -.012em; color: #1b0d35; } .linte-home-v2 .flow-title .mock-tag { padding: 6px 10px; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; background: #dcecab; color: #3b491a; } .linte-home-v2 .flow-track { top: 96px; width: 52% } .linte-home-v2 .flow-node { height: 72px; padding: 13px 16px } .linte-home-v2 .flow-node strong { font-size: 13px } .linte-home-v2 .flow-node small { font-size: 10.5px } .linte-home-v2 .flow-state { font-size: 10.5px } .linte-home-v2 .flow-icon { width: 27px; height: 27px; font-size: 11px } .linte-home-v2 .flow-connector { height: 42px } /* A regra alinha pelo centro da etapa que ela explica (a avaliacao do juridico), e um filete curto liga as duas: sem o filete, separada, ela viraria um cartao solto ao lado do fluxo. */ .linte-home-v2 .flow-rule { /* 306 = centro da etapa 3 (y325..397) menos metade da altura do cartao */ top: 306px; right: 4%; width: 31%; padding: 18px 17px; } .linte-home-v2 .flow-rule::before { content: ''; position: absolute; top: 50%; right: 100%; /* 50px encosta na borda direita da etapa, que termina 49px antes daqui */ width: 50px; height: 1px; background: #c5a4e8; } .linte-home-v2 .flow-rule strong { font-size: 12.5px } .linte-home-v2 .flow-rule > span { font-size: 11px } /* * Estruturar dados. As tres pecas terminavam em y401 num palco de 575: 174px * de vazio embaixo, com tudo amontoado no topo. Elas descem, e a ligacao * entre o documento e os dados cresce -- e ali que a folga faz sentido, na * seta que diz "isto saiu daquilo". * * Os numeros centram o conjunto: 78 + 57 + 255 = 390 de conteudo, sobrando * 92 em cima e 93 embaixo. */ .linte-home-v2 .scene-manage .extraction-source { top: 92px } .linte-home-v2 .extraction-connector { top: 178px } /* Os dois cartoes na mesma largura: o documento de origem entrava com 7% de margem e os dados extraidos com 10%, e o degrau fazia parecer que um estava desalinhado com o outro em vez de um ser consequencia do outro. */ .linte-home-v2 .extraction-result { top: 227px; left: 7%; right: 7%; } .linte-home-v2 .extraction-source strong { font-size: 13px } .linte-home-v2 .extraction-source span { font-size: 10.5px } .linte-home-v2 .extraction-heading strong { font-size: 13.5px } .linte-home-v2 .extraction-connector { font-size: 22px } .linte-home-v2 .extraction-result dt { font-size: 11.5px } .linte-home-v2 .extraction-result dd { font-size: 12.5px } .linte-home-v2 .extraction-footer { font-size: 11px } /* consultar com IA */ .linte-home-v2 .ai-conversation { padding: 24px 26px } .linte-home-v2 .conversation-heading { font-size: 14.5px } .linte-home-v2 .user-question { font-size: 13.5px; padding: 13px 16px } .linte-home-v2 .assistant-answer p { font-size: 13.5px; margin-bottom: 10px } .linte-home-v2 .answer-mark { font-size: 22px } .linte-home-v2 .source-card { padding: 13px } .linte-home-v2 .source-card strong { font-size: 12.5px } .linte-home-v2 .source-card div > span { font-size: 10.5px } .linte-home-v2 .other-sources { font-size: 10px } .linte-home-v2 .conversation-input { font-size: 12px; padding: 12px 14px } .linte-home-v2 .conversation-input span { width: 26px; height: 26px; font-size: 15px } .linte-home-v2 .scene-footnote { font-size: 10.5px } /* * Nas telas estreitas a coluna já é uma só e o palco encolhe: aqui o aumento * acima seria estouro, não folga. Estas duas medidas repetem as do sistema, * porque esta folha carrega por último e venceria as originais. */ } /* ------------------------------------------------ escala do diagrama --- */ /* * O diagrama tinha o mesmo problema das cenas, e pior: rotulo de 8px, chip de * 11px. Ele e a peca que sustenta a tese da secao, entao precisa ser lido sem * esforco, nao decifrado. * * Aqui e seguro mexer no tamanho: o diagrama e fluxo normal, empilhado, sem * nenhum posicionamento absoluto. Ele cresce e empurra o que vem embaixo. */ .linte-home-v2 .foundation-layout { grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr); gap: 60px; } .linte-home-v2 .foundation-diagram { padding: 38px 34px; } .linte-home-v2 .model-layer { max-width: 440px; padding: 19px 22px; gap: 16px; } .linte-home-v2 .model-layer strong { font-size: 17px } .linte-home-v2 .model-layer div > span { font-size: 11.5px; margin-top: 5px } .linte-home-v2 .layer-icon { width: 40px; height: 40px; font-size: 28px; } .linte-home-v2 .diagram-stem { height: 28px } .linte-home-v2 .layer-label { font-size: 9.5px; margin-bottom: 13px; } .linte-home-v2 .agent-layer { gap: 12px } .linte-home-v2 .agent-layer > div { padding: 17px 6px } .linte-home-v2 .agent-layer strong { font-size: 13.5px } .linte-home-v2 .agent-layer span { font-size: 19px } .linte-home-v2 .linte-layer { padding: 26px } .linte-home-v2 .linte-layer-heading span { font-size: 10.5px } .linte-home-v2 .linte-layer p { font-size: 13px } .linte-home-v2 .context-layer { gap: 8px; margin-top: 24px; } .linte-home-v2 .context-layer > span { padding: 9px 4px; font-size: 12px; } .linte-home-v2 .team-layer { font-size: 13px; gap: 30px; } .linte-home-v2 .foundation-note { font-size: 11.5px } @media (max-width: 900px) { .linte-home-v2 .foundation-layout { grid-template-columns: 1fr; gap: 34px } .linte-home-v2 .foundation-diagram { padding: 26px 20px } } /* ------------------------------------------------------------- o hero --- */ /* * Fundo branco. Estava num lilás muito claro que vinha do deploy de revisão, e * com ele o campo de formas parecia um cartão colado sobre a página em vez de * parte dela. No branco as três cores do sistema (indigo, lilás e lime) ficam * com o contraste que o sistema previu. * * As duas regras andam juntas: a segunda é a caixa do campo, e o canvas lê a * cor dela para pintar o próprio fundo (ver hero-field.js). Deixar uma branca e * a outra não deixaria uma moldura de cor errada em volta das formas. */ .linte-home-v2 .home-hero, .linte-home-v2 .home-hero-art { background: #ffffff; } /* O poster em SVG é o plano B de quem não tem canvas: ele também precisa do fundo certo, senão pisca lilás antes de o campo assumir. */ .linte-home-v2 .hero-field { background: #ffffff; }