/* ========================================================================= caminho.css — O Meu Caminho (#/p/caminho) Release 23.8.0 · SPEC_CAMINHO_COMPOSICAO_FECHADA.md A tela não é uma ilustração com botões por cima: a ilustração É a interface. Foi a exigência da titular e é o que decide quase tudo aqui — não há cartões, não há grelha, não há lista dos nove. A composição está CONGELADA (§B da spec). As percentagens abaixo são derivadas das coordenadas do colo de cada planta e da regra de escala: altura de planta = 46 px numa tela de 420, IGUAL nas nove. Não se mexe numa sem recalcular a partir da âncora medida da peça. Tudo em % e em unidades de contentor (cqw): a composição é a mesma a 390 px e a 1280. ========================================================================= */ /* Release 23.9.3 — a ÂNCORA do território. Era `max-width: 760px`, que com `margin:0 auto` do main centrava a coluna. A Bússola usa 1000px encostado. Medido: o título da Bússola começava em x=333 e o do Caminho em x=403,6 — 70,6 px de SALTO ao mudar de aba, na mesma barra lateral. A pessoa sentia que mudava de sítio, não de assunto. Os 760 existiam para conter a ilustração. Deixam de ser precisos agora que a ilustração se contém a si mesma (ver `.cam-cena { max-width }` abaixo). Os dois territórios passam a partir do mesmo eixo: barra lateral → área de conteúdo → ÂNCORA DO TERRITÓRIO → cabeçalho → arte A âncora é comum; a largura interna de cada território continua sua. */ @media (min-width: 1024px) { #app-shell.patient-mode.caminho-view:not(.no-chrome) main#view { max-width: 1000px; margin-left: 0; margin-right: 0; padding-left: 28px; padding-right: 28px; } } .cam-wrap { position: relative; } /* Mesmo cabeçalho da Bússola: símbolo à esquerda, sobrancelha do território, título em pergunta, lede. Ver .bus-head em bussola.css. */ .cam-head { position: relative; z-index: 2; display: flex; align-items: flex-start; gap: 15px; } .cam-head .sym { width: 56px; height: 56px; flex: 0 0 auto; margin-top: 2px; color: var(--t-caminho-accent); } @media (max-width: 520px) { .cam-head .sym { width: 44px; height: 44px; } } /* 23.9.3 — os papéis. Era 10,5 / 34 / 13,5 px; os dois de fora entram nos degraus (micro e corpo-2). O 34 já estava certo e passa a citar o token. */ .cam-eyebrow { margin: 5px 0 2px; font-size: var(--tf-micro); letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: var(--t-caminho-text); } .cam-title { margin: 0 0 9px; font-family: var(--mec-serif); font-weight: 400; font-size: var(--tf-display-territorial); line-height: 1.1; color: var(--mec-plum); letter-spacing: -.01em; } .cam-lede { margin: 0 0 16px; font-size: var(--tf-corpo-2); line-height: 1.6; color: var(--p-text-muted); max-width: 46ch; } /* ── a paisagem ───────────────────────────────────────────────────────── O fundo é camada PRÓPRIA, com força regulada por --fundo. Um número só. Sem isto a paisagem disputa com os brotos — foi a correção pedida pela titular ao ver a primeira montagem. */ /* 23.9.3 — a cena ganha TETO próprio. Sem `max-width`, a `aspect-ratio` fazia a altura = largura × 1,524. Medido no desktop: coluna de 704 px → cena de 1073 px de altura, numa janela de 730. A ilustração sozinha era 1,47× a altura do ecrã. Era ISTO que dava a sensação de "o Caminho está enorme" — não o título, que são 34 px iguais aos da Bússola. 490 px → 747 px de altura. Escolhido a ver as três (460 / 490 / 520): a 460 a paisagem perde presença, a 520 volta a dominar o território. Não se procura que as nove plantas caibam no ecrã de uma vez: o Caminho é uma paisagem para percorrer, não um painel que tem de caber inteiro. */ .cam-cena { position: relative; width: 100%; max-width: 490px; margin-inline: auto; aspect-ratio: 420/640; border-radius: 20px; overflow: hidden; background: var(--p-bg, #fbf6ec); container-type: inline-size; --fundo: .55; } .cam-cena::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: url(../img/caminho/caminho-fundo.webp) center/cover no-repeat; opacity: var(--fundo); filter: saturate(.92); } .cam-broto { position: absolute; padding: 0; border: 0; background: none; cursor: pointer; transition: opacity .22s; -webkit-tap-highlight-color: transparent; } .cam-broto img { width: 100%; height: 100%; display: block; } /* Centrado no CENTRO da planta (o `ac` de journeyHub.js), não no colo. */ .cam-broto i { position: absolute; transform: translate(-50%, -50%); pointer-events: none; display: block; } /* NÃO HÁ HALO AO TOCAR. Decisão da titular (11/08), depois de o ver renderizado: o dourado a 44% sobre areia dourada não se via, e qualquer versão forte o suficiente para se ver era LUZ — e a luz é o vocabulário próprio do `chamado`, cujo ponto lateral é pintado na peça. Um disco claro grande ao lado de um ponto claro pequeno é a colisão que a §C3 avisava. O que dá o retorno ao tocar é o esmaecer dos outros oito (.escolhendo, abaixo), que é inequívoco e não acrescenta nenhum brilho à tela. Fica só o ANEL, e só para o contexto declarado. A planta mede ~11cqw de altura (46 px em 420, convertidos para largura de contentor); a 12,5cqw o anel quase lhe encostava, a 15cqw envolve-a com folga. */ .cam-broto .anel { width: 15cqw; height: 15cqw; border-radius: 50%; border: .28cqw solid var(--mec-gold, #d9ab52); opacity: 0; transition: opacity .2s; } .cam-broto:focus { outline: none; } .cam-broto:focus-visible { outline: 2px solid var(--t-caminho-accent); outline-offset: 2px; border-radius: 10px; } .cam-broto.declarada .anel { opacity: .85; } /* ── 23.9.3 · o nome da planta sai do `cqw` ───────────────────────────── Era `font-size: 2.85cqw; font-weight: 700` — o TAMANHO DA LETRA amarrado à largura da ilustração. Medido, foi o que se via: cena 704 px → 20,1 px (maior do que a PERGUNTA que o rótulo responde) cena 390 px → 11,1 px cena 360 px → 10,3 px (fora de qualquer degrau de leitura) A mesma linha produzia um rótulo pesado demais no desktop e ilegível no telemóvel, porque o que a governava não era a leitura — era a arte. A regra que fica, e que vale para todo o produto: Texto pertence à escala tipográfica. Composição pertence à geometria responsiva. Portanto o `cqw` continua a mandar em POSIÇÃO (o `margin-top` e os `padding` de encosto abaixo — esses são composição e ficam), e deixa de mandar em TAMANHO. Nem `clamp()` com `cqw` lá dentro: com a cena agora limitada a 490 px, `2.13cqw` daria 10,4 px e o teto de 15 px nunca chegaria a acontecer em ecrã nenhum. O coeficiente tinha sido calculado para uma cena de 704 — a largura que esta mesma release elimina. Fica em dois degraus, e o rótulo passa a declarar o seu papel: é uma AÇÃO (é nele que se toca), não uma pergunta nem uma legenda. desktop → --tf-acao (15 px) ≤700 px → --tf-legenda (13 px), o piso; nunca abaixo disto. O peso desce de 700 para 600 pela mesma razão da 23.9.2: hierarquia pela escala primeiro, peso como reforço. */ /* `min-width: max-content` — 23.9.3. Sem ela, a caixa de um rótulo encostado resolvia-se por shrink-to-fit contra a POSIÇÃO ESTÁTICA do elemento: a 320 px isso dava 97,1 px de caixa para um texto de 113,5, e como a cena tem `overflow:hidden` o nome saía 10 px e era cortado. É `min-width`, não `width`. Com `width: max-content` o valor continuava a ser reduzido para 97,1 — medido, não suposto. O `min-width` é o único que segura o piso da caixa em qualquer das larguras. Medido a 320 / 360 / 390 / 430 / 768 / 1280 px: zero cortes, zero sobreposições, nenhum nome a precisar de segunda linha. */ .cam-rot { position: absolute; min-width: max-content; transform: translate(-50%, 0); margin-top: 2.1cqw; font-size: var(--tf-acao); font-weight: 600; color: var(--p-text, #3f3a52); white-space: nowrap; pointer-events: none; transition: opacity .22s; text-shadow: 0 0 4px #fdfaf3, 0 0 4px #fdfaf3, 0 0 4px #fdfaf3, 0 0 9px #fdfaf3; } @media (max-width: 700px) { .cam-rot { font-size: var(--tf-legenda); } } /* Os nomes das colunas de fora não cabem centrados. Medido: com `translate(-50%)`, "Travessia do Limiar", "Resistência" e "Chamado à Mudança" saíam 4 a 14 px para lá da margem esquerda — e a cena tem `overflow:hidden`, portanto o nome ficava CORTADO. À direita, "Transformação" e "Mundo Atual" encostavam a 0,3 px do bordo. A correção é encostar o nome ao lado por onde ia sair, em vez de o centrar no colo. Nas colunas de fora a planta já está quase na margem, por isso o nome continua debaixo dela. `esq`/`dir` são atribuídos em journeyHub.js a partir do próprio `rx` — assim, se um dia uma coordenada mudar, o lado acompanha sozinho. */ /* 23.9.3 — o encosto passa a ser OFFSET, não padding. A prova obrigatória a 360 px (pedida pela titular, e ainda bem) apanhou o efeito colateral de fixar o rótulo em 13 px: deixando de encolher com a cena, "Os Desafios Reais" passou a sair 2,9 px pela direita — e a cena tem `overflow:hidden`, portanto ficava cortado. A causa não era falta de espaço: a cena a 328 px tinha 320 px livres para um texto de 113,5. Era a forma da caixa. Com `right: 0` mais `padding-right`, o elemento resolve a largura por shrink-to-fit e o padding entra a comer o espaço do texto, que com `white-space: nowrap` transborda. Pondo o afastamento no OFFSET, a caixa fica do tamanho do texto e o afastamento é posição — que é o sítio certo para ele. Visualmente idêntico. Medido depois: zero cortes a 360, 390, 430, 768 e 1280 px, e zero sobreposições. Nenhum nome precisou de segunda linha — estava autorizada, mas não foi precisa. */ .cam-rot.esq { left: 2.2cqw !important; transform: none; } .cam-rot.dir { left: auto !important; right: 2.2cqw; transform: none; } /* Ao tocar, os outros oito esmaecem. Não desaparecem: continuam lá, porque a escolha não fecha portas nenhumas. */ .cam-cena.escolhendo .cam-broto:not(.alvo), .cam-cena.escolhendo .cam-rot:not(.alvo) { opacity: .28; } @media (prefers-reduced-motion: reduce) { .cam-broto, .cam-rot { transition: none; } } /* ── as nove posições, congeladas (§B) ────────────────────────────────── Derivadas: left/top = colo − âncora×escala; width/height = peça×escala. NÃO editar à mão: recalcular a partir de ancoras.json e das coordenadas do colo, senão a regra dos 46 px parte-se em silêncio. */ .cam-c1 { left: 0.896%; top: 5.988%; width: 37.708%; height: 13.095%; } /* travessia 17·18 */ .cam-c2 { left: 33.638%; top: -0.177%; width: 36.395%; height: 11.672%; } /* proposito 49·10 */ .cam-c3 { left: 64.571%; top: 8.307%; width: 37.831%; height: 10.715%; } /* transformacao 81·18 */ .cam-c4 { left: 1.078%; top: 26.848%; width: 37.978%; height: 9.084%; } /* resistencia 17·35 */ .cam-c5 { left: 65.152%; top: 24.573%; width: 37.046%; height: 12.719%; } /* mundo_atual 81·36 */ .cam-c6 { left: 43.047%; top: 39.940%; width: 37.058%; height: 11.651%; } /* mentores 59·51 */ .cam-c7 { left: 1.934%; top: 51.528%; width: 36.376%; height: 11.708%; } /* chamado 17·62 */ .cam-c8 { left: 26.862%; top: 59.573%; width: 40.276%; height: 17.224%; } /* integracao 47·71 */ .cam-c9 { left: 62.667%; top: 56.000%; width: 33.714%; height: 10.812%; } /* provacoes 80·66 */ /* ── convite e repouso ────────────────────────────────────────────────── O estado de repouso da Bússola tem equivalente aqui: enquanto nada for tocado, a tela diz o que é e não pede nada. */ .cam-ask { font-size: var(--tf-pergunta); font-weight: 400; font-family: var(--mec-serif); line-height: 1.45; margin: 0 0 5px; color: var(--p-text); } .cam-ask-sub { font-size: var(--tf-legenda); color: var(--p-text-muted); margin: 0 0 10px; } /* "Ainda não sei" nunca é um botão igual aos outros — é uma saída, e uma saída não se destaca. */ .cam-dunno { text-align: center; margin-top: 16px; } /* PENDENTE 23.9.3 §E-3 — o "Ainda não sei dizer". Como botão o papel é AÇÃO (15 px), mas é deliberadamente discreto: é a saída sem culpa, não a ação principal. A proposta é 15 px + --p-text-muted (discrição por COR, não por tamanho). Fica nos 13,5 px até a titular ver. */ .cam-dunno button { font: inherit; background: none; border: 0; cursor: pointer; font-size: 13.5px; color: var(--p-text-muted); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: #d6cbb0; padding: 8px 10px; } .cam-dunno button:hover { color: var(--mec-plum); } .cam-foot { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; font-size: var(--tf-legenda); color: var(--p-text-soft); } /* ── a gaveta do contexto declarado ───────────────────────────────────── Mesmo lugar que a `.bus-fold` ocupa na Bússola: abre POR BAIXO do instrumento, e não sobre ele. */ .cam-fold { margin-top: 18px; } .cam-fold-name { font-family: var(--mec-serif); font-weight: 400; font-size: var(--tf-titulo); color: var(--mec-plum); margin: 0 0 6px; } .cam-fold-desc { font-size: var(--tf-corpo-2); line-height: 1.6; color: var(--p-text-muted); margin: 0 0 12px; } .cam-fold-invite { font-family: var(--mec-serif); font-size: var(--tf-corpo); line-height: 1.55; color: var(--t-caminho-text); margin: 0 0 4px; } .cam-change { background: none; border: 0; font: inherit; font-size: var(--tf-legenda); cursor: pointer; color: var(--p-text-muted); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #d6cbb0; padding: 6px 0; } .cam-change:hover { color: var(--mec-plum); } /* ── as duas escolhas da folha de reconhecimento ──────────────────────── O "Sim" é o gesto que declara; o "Ainda não sei" é o que se recusa a declarar. Pesos visuais diferentes porque as consequências são diferentes — e nenhuma delas fecha nada. */ /* PENDENTE 23.9.3 §E-2 — se for pergunta dirigida à pessoa vai a --tf-pergunta (17, serifa); se for cabeçalho de folha vai a --tf-corpo-2. Não foi possível abrir a folha: a conta de prova não tem percurso nascido. Fica nos 14,5 px até se ver. */ .cam-sheet-q { font-size: 14.5px; line-height: 1.5; margin: 2px 0 20px; color: var(--p-text); } .cam-b1, .cam-b2 { display: block; width: 100%; font: inherit; font-size: var(--tf-corpo-2); font-weight: 600; padding: 14px 16px; border-radius: 14px; cursor: pointer; margin-bottom: 10px; } .cam-b1 { background: var(--mec-gold, #d9ab52); border: 1px solid #b98d3e; color: #41340f; } .cam-b1:hover { background: #cfa04a; } .cam-b2 { background: transparent; border: 1px solid var(--p-border, #eadfc9); color: var(--p-text-muted); } .cam-b2:hover { color: var(--mec-plum); } /* ── o fio de uma reflexão ─────────────────────────────────────────────── Corrigido depois de a titular ver a tela no telemóvel: *"o já escrevi isso mais escuro luta com o texto em cinza que quase não se vê"* e *"pq existem duas caixas de texto?"*. Medido, tinha razão nas duas: · `.p-reflection-q` estava definida DUAS VEZES no patient.css (l.526 e l.1270). A segunda foi escrita para a reflexão mensal do Plano e, por vir depois, ganhava também aqui: a pergunta saía a 11,5px em #a29dbb — **2,41:1**, quando o mínimo AA é 4,5:1. Por isso as classes deste bloco têm prefixo próprio: `cam-refl-`. Não voltam a colidir com nada. · A resposta guardada usava tinta a 4% e a caixa de escrita a 5%, ambas com o mesmo raio. Uma é memória, a outra é entrada, e eram indistinguíveis. A saída escolhida pela titular: **a resposta deixa de ser caixa** (fica texto em tinta cheia com um traço ao lado, como uma citação) e **a caixa de escrita só aparece quando se pede**. Assim há uma caixa só na tela, e ela significa sempre a mesma coisa: aqui escreve-se. ───────────────────────────────────────────────────────────────────────── */ .cam-refl { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #ece2ce; } .cam-refl:last-child { border-bottom: 0; margin-bottom: 0; } /* A pergunta: serifada, 17px, tinta cheia — 10:1. É um convite, não um rótulo. */ .cam-refl-q { font-family: var(--mec-serif); font-size: var(--tf-pergunta); line-height: 1.35; color: var(--p-text); margin: 0 0 10px; } /* A data é PROVENIÊNCIA, não medida: diz quando foi escrito, não há quanto tempo nem quantas vezes. */ .cam-refl-quando { font-size: var(--tf-legenda); color: var(--p-text-muted); margin: 0 0 4px; } /* O que ela escreveu — o texto mais importante do bloco, e agora o mais forte. */ .cam-refl-resp { font-size: var(--tf-corpo); line-height: 1.6; color: var(--p-text); border-left: 2px solid var(--mec-gold, #d9ab52); padding: 2px 0 2px 14px; margin: 0; white-space: pre-wrap; } .cam-refl-resp.antes { border-left-color: #e3d3ae; color: var(--p-text-muted); font-size: var(--tf-corpo-2); } /* "Escrever de novo" não é um botão igual aos outros: é uma porta, e uma porta fechada não se anuncia. */ .cam-refl-mais { display: inline-block; margin-top: 12px; background: none; border: 0; font: inherit; font-size: var(--tf-corpo-2); font-weight: 600; color: var(--p-gold-deep, #b98d3e); padding: 6px 0; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: #e0cfa4; } .cam-refl-mais:hover { color: var(--mec-plum); } .cam-refl-escrever { display: none; margin-top: 12px; } .cam-refl-escrever.on { display: block; } /* 16px não é estética: abaixo disso o iOS dá zoom ao focar o campo. */ #app-shell.patient-mode .cam-refl-escrever textarea { font-size: var(--tf-campo); min-height: 96px; background: #fff; border: 1.5px solid var(--mec-gold, #d9ab52); border-radius: 14px; padding: 12px 14px; } .cam-refl-guardar { margin-top: 10px; width: 100%; font: inherit; font-size: var(--tf-acao); font-weight: 700; padding: 12px 18px; border-radius: 14px; cursor: pointer; background: var(--mec-gold, #d9ab52); border: 1px solid #b98d3e; color: #41340f; } .cam-refl-guardar:hover { background: #cfa04a; } .cam-refl-guardar:disabled { opacity: .6; cursor: default; } .cam-refl-antes { margin-top: 14px; } .cam-refl-antes summary { cursor: pointer; font-size: var(--tf-legenda); color: var(--p-text-muted); list-style: none; padding: 5px 0; } .cam-refl-antes summary::-webkit-details-marker { display: none; } .cam-refl-antes summary::before { content: "\25B8 "; color: var(--mec-gold, #d9ab52); } .cam-refl-antes[open] summary::before { content: "\25BE "; } .cam-refl-antes summary:hover { color: var(--mec-plum); }