/**
* maria.autocavado.pt/assets/css/maria.css
*
* A folha única do portal da MarIA. São duas secções: o lockup de marca com o
* fundo animado, e o assistente de voz que vem a seguir. Vivem no mesmo
* ficheiro por uma razão de desempenho: cada no atrasa o primeiro
* pixel, e esta é uma página só.
*
* O portal tem tokens próprios e não carrega o tokens.css do CMS: a língua
* visual daqui é a da marca MarIA, não a das três superfícies do Pilot.
*/
/* =====================================================================
Tokens de marca: todos os valores parametrizáveis (prontos para BD)
===================================================================== */
:root { /* ds-ok: o portal vive fora do CMS e tem tokens próprios, como os outros portais */
/* Tipografia */
--font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--text-color: #ffffff;
/* Métrica vertical da Inter: distância topo da line box (line-height: 1) até ao topo das maiúsculas, em em */
--font-cap-offset: 0.13623;
/* Wordmark "MarIA": proporções medidas no original de 1200×1200 */
--wordmark-size-ratio: 0.1983; /* 237.9px / 1200px (cap height 173px) */
--wordmark-weight: 700;
--wordmark-tracking: -0.005em;
/* Slogan: o tamanho final é calculado em JS para igualar a largura do wordmark */
--tagline-scale: 0.2089; /* valor inicial: tamanho da marca / tamanho do wordmark */
--tagline-lead-scale: 0.786; /* "powered by" relativo a "Autocávado Pilot" */
--tagline-lead-weight: 300;
--tagline-brand-weight: 700;
--tagline-gap: 0.42em; /* espaço mínimo de cada lado do divisor */
--tagline-offset-ratio: 0.1700; /* baseline do wordmark até ao topo das maiúsculas do slogan */
/* Divisor vertical */
--divider-width: 0.04em;
--divider-height: 1.066em;
--divider-drop: 0.2em; /* quanto desce abaixo da baseline */
/* Entrada do lockup (após o ajuste de alinhamento) */
--lockup-fade-duration: 600ms;
/* Gradiente: blobs radiais ajustados por mínimos quadrados ao original.
x/y/r em % do artboard quadrado; cor no centro, transparente na orla.
Cores limitadas para o gradiente não escurecer quando os blobs se movem */
--gradient-base: #0086f1;
--blob-orange-x: -0.6; --blob-orange-y: 12; --blob-orange-r: 97.8; --blob-orange-color: #ff9817;
--blob-amber-x: -19.2; --blob-amber-y: 76.1; --blob-amber-r: 96.1; --blob-amber-color: #ffaa00;
--blob-green-x: 40.5; --blob-green-y: 88.4; --blob-green-r: 59; --blob-green-color: #50f250;
--blob-blue-x: 87; --blob-blue-y: 8.8; --blob-blue-r: 34.1; --blob-blue-color: #204da1;
--blob-sky-x: 94.3; --blob-sky-y: 111.5; --blob-sky-r: 75.2; --blob-sky-color: #0096f7;
--blob-cyan-x: 72.9; --blob-cyan-y: 49.9; --blob-cyan-r: 59; --blob-cyan-color: #00ffff;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
margin: 0;
height: 100%;
}
/* Scroll sem barra visível e sem "bounce" que revele a cor de fundo */
html {
scrollbar-width: none;
overscroll-behavior: none;
}
html::-webkit-scrollbar {
display: none;
}
body {
background: var(--gradient-base);
color: var(--text-color);
font-family: var(--font-family);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* =====================================================================
Stage: ocupa o viewport; o artboard quadrado é "cover" e centrado
===================================================================== */
.stage {
position: relative;
display: grid;
place-items: center;
/* As linhas juntam-se ao centro em vez de se espalharem pela altura toda:
sem isto, o link do login caía a 371px do lockup, cada um no meio da sua
metade do ecrã, e deixavam de se ler como uma peça só. */
align-content: center;
grid-auto-rows: min-content;
width: 100%;
height: 100vh;
height: 100svh;
overflow: hidden;
container-type: size;
}
/* =====================================================================
Fundo da página: gradiente animado fixo atrás de todas as secções
===================================================================== */
.page-background {
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
/* Container próprio para as unidades cq do gradiente (artboard "cover" do viewport) */
container-type: size;
}
.page-background__gradient {
position: absolute;
inset: 0;
/* Posições derivadas: casa do blob mais o deslocamento em tempo real (definido em JS; 0 sem JS) */
--orange-x: calc(var(--blob-orange-x) + var(--blob-orange-dx, 0));
--orange-y: calc(var(--blob-orange-y) + var(--blob-orange-dy, 0));
--orange-r: calc(var(--blob-orange-r) + var(--blob-orange-dr, 0));
--amber-x: calc(var(--blob-amber-x) + var(--blob-amber-dx, 0));
--amber-y: calc(var(--blob-amber-y) + var(--blob-amber-dy, 0));
--amber-r: calc(var(--blob-amber-r) + var(--blob-amber-dr, 0));
--green-x: calc(var(--blob-green-x) + var(--blob-green-dx, 0));
--green-y: calc(var(--blob-green-y) + var(--blob-green-dy, 0));
--green-r: calc(var(--blob-green-r) + var(--blob-green-dr, 0));
--blue-x: calc(var(--blob-blue-x) + var(--blob-blue-dx, 0));
--blue-y: calc(var(--blob-blue-y) + var(--blob-blue-dy, 0));
--blue-r: calc(var(--blob-blue-r) + var(--blob-blue-dr, 0));
--sky-x: calc(var(--blob-sky-x) + var(--blob-sky-dx, 0));
--sky-y: calc(var(--blob-sky-y) + var(--blob-sky-dy, 0));
--sky-r: calc(var(--blob-sky-r) + var(--blob-sky-dr, 0));
--cyan-x: calc(var(--blob-cyan-x) + var(--blob-cyan-dx, 0));
--cyan-y: calc(var(--blob-cyan-y) + var(--blob-cyan-dy, 0));
--cyan-r: calc(var(--blob-cyan-r) + var(--blob-cyan-dr, 0));
/* 1 unidade de artboard = 1% do lado maior do stage (cover) */
--unit: 1cqmax;
background:
radial-gradient(circle calc(var(--cyan-r) * var(--unit)) /* ds-ok: o fundo E a marca, seis blobs medidos ao original */
at calc(50% + (var(--cyan-x) - 50) * var(--unit)) calc(50% + (var(--cyan-y) - 50) * var(--unit)), /* nat-ok: aritmética, não pausa */
var(--blob-cyan-color), transparent),
radial-gradient(circle calc(var(--sky-r) * var(--unit)) /* ds-ok: o fundo E a marca, seis blobs medidos ao original */
at calc(50% + (var(--sky-x) - 50) * var(--unit)) calc(50% + (var(--sky-y) - 50) * var(--unit)), /* nat-ok: aritmética, não pausa */
var(--blob-sky-color), transparent),
radial-gradient(circle calc(var(--blue-r) * var(--unit)) /* ds-ok: o fundo E a marca, seis blobs medidos ao original */
at calc(50% + (var(--blue-x) - 50) * var(--unit)) calc(50% + (var(--blue-y) - 50) * var(--unit)), /* nat-ok: aritmética, não pausa */
var(--blob-blue-color), transparent),
radial-gradient(circle calc(var(--green-r) * var(--unit)) /* ds-ok: o fundo E a marca, seis blobs medidos ao original */
at calc(50% + (var(--green-x) - 50) * var(--unit)) calc(50% + (var(--green-y) - 50) * var(--unit)), /* nat-ok: aritmética, não pausa */
var(--blob-green-color), transparent),
radial-gradient(circle calc(var(--amber-r) * var(--unit)) /* ds-ok: o fundo E a marca, seis blobs medidos ao original */
at calc(50% + (var(--amber-x) - 50) * var(--unit)) calc(50% + (var(--amber-y) - 50) * var(--unit)), /* nat-ok: aritmética, não pausa */
var(--blob-amber-color), transparent),
radial-gradient(circle calc(var(--orange-r) * var(--unit)) /* ds-ok: o fundo E a marca, seis blobs medidos ao original */
at calc(50% + (var(--orange-x) - 50) * var(--unit)) calc(50% + (var(--orange-y) - 50) * var(--unit)), /* nat-ok: aritmética, não pausa */
var(--blob-orange-color), transparent),
var(--gradient-base);
}
/* Com o link do login no ecrã, ele vai para o RODAPÉ e a marca fica centrada no
que sobra: duas linhas, a de cima a levar o espaço todo. Estavam ambas ao
centro, coladas uma à outra, e o caminho para dentro lia-se como parte do
lockup em vez do que é.
O afastamento vem da margem do próprio link e não de padding no `.stage`: o
padding tirava altura ao container, e é do `100cqmin` dele que sai o tamanho
do wordmark. A marca encolhia nesta página e não na outra. */
.stage:has(.stage-login) {
grid-template-rows: 1fr auto;
align-content: normal;
}
/* Quem não entrou no CMS vê o lockup e este caminho, e mais nada. O tamanho
segue o do slogan, para o conjunto continuar a ser da mesma família. O
sublinhado fica: é um link, e a página não tem outro sítio onde se possa
carregar. */
.stage-login {
margin-block-end: clamp(1.5rem, 5svh, 3rem);
color: var(--text-color);
font-size: clamp(0.9375rem, 1.6cqmin, 1.125rem);
font-weight: 300;
text-align: center;
text-decoration: underline;
text-underline-offset: 0.35em;
text-decoration-thickness: 1px;
transition: text-decoration-thickness 150ms ease-out;
}
.stage-login:hover {
text-decoration-thickness: 2px;
}
.stage-login:focus-visible {
outline: 2px solid var(--text-color);
outline-offset: 6px;
}
/* =====================================================================
Lockup: a largura é definida pela tinta (ink) do wordmark
===================================================================== */
.brand-lockup {
/* Fator que liga e desliga as compensações de side bearing (0 durante a medição) */
--trim-factor: 1;
position: relative;
display: grid;
justify-items: stretch;
margin: 0;
transition: opacity var(--lockup-fade-duration) ease-out;
}
.has-js .brand-lockup:not(.is-fitted) {
opacity: 0;
}
.brand-lockup__wordmark {
margin: 0;
margin-block: calc(var(--font-cap-offset) * -1em);
margin-inline-start: calc(var(--wordmark-trim-start, 0) * var(--trim-factor) * -1em);
margin-inline-end: calc(var(--wordmark-trim-end, 0) * var(--trim-factor) * -1em);
font-size: calc(var(--wordmark-size-ratio) * 100cqmin);
font-weight: var(--wordmark-weight);
letter-spacing: var(--wordmark-tracking);
line-height: 1;
white-space: nowrap;
}
/* Recorte exato cap height até à baseline quando suportado (independente de métricas) */
@supports (text-box: trim-both cap alphabetic) {
.brand-lockup__wordmark {
margin-block: 0;
text-box: trim-both cap alphabetic;
}
}
.brand-lockup__tagline {
display: flex;
align-items: baseline;
justify-content: space-between;
column-gap: var(--tagline-gap);
margin: 0;
margin-block-start: calc(
var(--wordmark-size-ratio) * 100cqmin * var(--tagline-offset-ratio)
- var(--font-cap-offset) * 1em
);
font-size: calc(var(--wordmark-size-ratio) * 100cqmin * var(--tagline-scale));
line-height: 1;
white-space: nowrap;
/* Não contribui para a largura do lockup: herda sempre a largura do wordmark */
contain: inline-size;
}
.brand-lockup__lead {
margin-inline-start: calc(var(--lead-trim-start, 0) * var(--trim-factor) * -1em);
font-size: calc(var(--tagline-lead-scale) * 1em);
font-weight: var(--tagline-lead-weight);
}
.brand-lockup__brand {
margin-inline-end: calc(var(--brand-trim-end, 0) * var(--trim-factor) * -1em);
font-weight: var(--tagline-brand-weight);
}
/* Divisor sem altura no layout (não altera a line box); o traço é desenhado no pseudo-elemento */
.brand-lockup__divider {
position: relative;
flex: none;
width: var(--divider-width);
height: 0;
}
.brand-lockup__divider::before {
content: "";
position: absolute;
inset-inline: 0;
bottom: calc(var(--divider-drop) * -1);
height: var(--divider-height);
background: currentColor;
}
/* Modo de medição: sem compensações e com o slogan na largura natural */
.brand-lockup.is-measuring {
--trim-factor: 0;
justify-items: start;
}
.brand-lockup.is-measuring .brand-lockup__tagline {
contain: none;
justify-content: flex-start;
}
@media (prefers-reduced-motion: reduce) {
.brand-lockup {
transition: none;
}
}
/* =====================================================================
Assistente de voz (MarIA): estilos isolados, reutilizam os tokens de marca
===================================================================== */
/* DESVIO ACEITE, medido a 2026-09-17 e decidido pelo Jorge: este ecrã não
chega aos 100 de acessibilidade do Lighthouse, e não é por descuido.
O texto é branco e o fundo é o gradiente da marca. Quando o blob ciano
(#00ffff) passa por trás da coluna do texto, o contraste real, medido no
pior fotograma e não no primeiro, é este:
saudação 1.76 (a norma pede 3.0, por ser texto grande)
legenda 1.51 (3.0)
sugestões 1.28 (4.5)
estado 1.18 (4.5)
Não é a opacidade dos tokens: branco PURO sobre o azul base já só dá 3.70, e
sobre o ciano dá 1.25. Só havia três saídas, e nenhuma é gratuita: um véu
escuro por trás do texto (apaga o gradiente onde ele mais se vê), escurecer
os blobs claros (deixa de ser a paleta da referência), ou aceitar. Aceitou-se,
porque o fundo É a marca e esta é a v0.1 de um assistente a provar-se.
Quem vier mexer nas cores do gradiente tem aqui a medição para repetir:
o que interessa não é o que o Lighthouse diz no primeiro fotograma. */
:root { /* ds-ok: continuação dos tokens do portal, fora do CMS */
/* Superfície escura derivada do azul da marca */
--voice-surface: color-mix(in oklab, var(--blob-blue-color) 20%, #000000);
--voice-text-strong: var(--text-color);
--voice-text-soft: color-mix(in oklab, var(--text-color) 62%, transparent);
--voice-text-muted: color-mix(in oklab, var(--text-color) 48%, transparent);
--voice-outline: color-mix(in oklab, var(--text-color) 34%, transparent);
/* Tipografia */
--voice-greeting-size: clamp(3rem, min(10vw, 13svh), 10.5rem);
--voice-greeting-weight: 300;
--voice-greeting-tracking: -0.045em;
--voice-transcript-size: clamp(1.25rem, 1rem + 1.1vw, 1.875rem);
--voice-transcript-weight: 300;
--voice-status-size: 0.9375rem;
/* Dimensões */
/* A nuvem cedeu um pouco de tamanho quando os exemplos do que perguntar
entraram no ecrã: são quatro linhas a mais na coluna, e sem isto a
legenda ficava cortada em qualquer ecrã abaixo de 1080px. */
--voice-orb-size: clamp(11rem, min(35vw, 28svh), 22rem);
--voice-primary-size: 4.5rem;
--voice-secondary-size: 3rem;
--voice-icon-size: 1.5rem;
--voice-controls-gap: clamp(2.5rem, 10vw, 5rem);
--voice-legal-gap: 50px;
--voice-legal-size: 0.75rem;
--voice-composer-width: min(28rem, 100%);
--voice-composer-send-size: 2.5rem;
--voice-composer-gap: 0.75rem;
--voice-suggestion-size: 0.875rem;
/* Duas linhas reservadas, e não três: a mensagem de entrada encurtou
quando os exemplos passaram a dizer o que se pode perguntar. */
--voice-transcript-lines: 2;
/* Movimento */
--voice-ease: cubic-bezier(0.22, 1, 0.36, 1);
--voice-reveal-duration: 1100ms;
--voice-word-duration: 260ms;
--voice-ring-duration: 2400ms;
}
@media (max-width: 40rem) {
:root { /* ds-ok: tokens do portal no telemóvel, fora do CMS */
--voice-greeting-size: clamp(3.5rem, 18vw, 6rem);
--voice-transcript-lines: 3;
}
}
.voice-assistant {
position: relative;
display: grid;
/* minmax(0, 1fr) e não 1fr: o mínimo automático de uma linha de grelha é o
min-content dela, e com a caixa de texto aberta era isso que empurrava a
secção para lá dos 100svh, levando os controlos para fora do ecrã. */
grid-template-rows: auto minmax(0, 1fr) auto;
/* Coluna limitada à largura útil: nada empurra a secção para fora do ecrã */
grid-template-columns: minmax(0, 1fr);
justify-items: center;
row-gap: clamp(1rem, 3svh, 2rem);
min-height: 100vh;
min-height: 100svh;
/* O teto é o que faz a linha do meio encolher de facto. Só com `min-height`
a grelha tem altura automática, o `minmax(0, 1fr)` nunca é obrigado a ceder
e a secção crescia até levar os controlos para fora do ecrã. Com teto, quem
passa dos limites é a coluna do meio, que rola. */
max-height: 100vh;
max-height: 100svh;
padding: clamp(2.5rem, 7svh, 5rem) clamp(1.25rem, 5vw, 4rem) clamp(1.5rem, 3svh, 2.5rem);
overflow: hidden;
color: var(--voice-text-strong);
font-family: var(--font-family);
}
/* Saudação: grande, leve e centrada */
.voice-greeting {
margin: 0;
font-size: var(--voice-greeting-size);
font-weight: var(--voice-greeting-weight);
letter-spacing: var(--voice-greeting-tracking);
line-height: 0.95;
text-align: center;
text-wrap: balance;
}
.voice-stage {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: clamp(1rem, 2.5svh, 1.75rem);
width: 100%;
/* Deixa a coluna encolher dentro da linha da grelha em vez de a esticar */
min-height: 0;
/* Quem passa dos limites é esta coluna, nunca a secção: uma legenda comprida
rola aqui dentro, e os controlos ficam onde estão. A barra fica escondida
como a da página.
SEM `overscroll-behavior: contain`, que aqui esteve e travava a página: um
contentor de scroll com `contain` absorve a roda do rato mesmo quando não
tem para onde rolar, e com o cursor em cima do palco a página deixava de
andar. O que a opção evita (a página saltar quando o palco chega ao fim)
não vale o que custa. */
overflow-y: auto;
scrollbar-width: none;
}
.voice-stage::-webkit-scrollbar {
display: none;
}
/* Nada encolhe abaixo do seu conteúdo. Um flex item cede altura quando o espaço
aperta, mas o texto lá dentro não cede com ele: a legenda comprimida saía da
sua caixa e ia escrever por cima do campo de mensagem. O que não couber rola
no palco, que é para isso que ele rola. */
.voice-stage > * {
flex: none;
}
/* Com a caixa de texto aberta o conteúdo do meio cresce 182px, e a secção
passava dos 100svh: os controlos ficavam 143px abaixo do fundo do ecrã a
900px de altura, e 219px a 800px. Era preciso rolar para chegar ao microfone
e ao fechar, logo a seguir a abrir a caixa para escrever.
Quem cede o espaço é a nuvem, que é o que menos falta faz enquanto se
escreve, mais o ar do rodapé e uma linha da legenda. A nuvem não desaparece:
continua a responder ao que a MarIA está a fazer, só que mais pequena. */
.voice-assistant:has(.voice-composer:not([hidden])) {
--voice-orb-size: clamp(4.5rem, min(30vw, 11svh), 9rem);
--voice-greeting-size: clamp(2rem, min(8vw, 6.5svh), 4.5rem);
--voice-legal-gap: 1.25rem;
--voice-transcript-lines: 2;
}
/* O ar entre as peças do palco aperta quando a caixa está aberta. São os 22px
que faltavam para a última pílula caber inteira num ecrã de 800px: cortada a
meio, parecia que a lista continuava e não continuava. */
.voice-assistant:has(.voice-composer:not([hidden])) .voice-stage {
gap: clamp(0.5rem, 1.5svh, 1rem);
}
/* Num ecrã baixo nem a nuvem encolhida cabe com a caixa de texto aberta, e o
que se via era metade dela, cortada pela borda do palco. Sai inteira: o que
ali falta não é a decoração, são os controlos. Volta assim que a caixa fecha,
e o ResizeObserver do canvas repõe-lhe as medidas.
O limiar são 720px porque é aí que a conta fecha: um telemóvel de 667px com a
caixa aberta precisa de 87px que só a nuvem e o espaço dela têm para dar. */
@media (max-height: 45rem) {
.voice-assistant:has(.voice-composer:not([hidden])) .voice-orb {
display: none;
}
}
/* Nuvem animada: apenas linhas brancas em canvas, sem fundo */
.voice-orb {
position: relative;
width: var(--voice-orb-size);
aspect-ratio: 1;
}
.voice-orb__canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.voice-status {
margin: 0;
color: var(--voice-text-soft);
font-size: var(--voice-status-size);
font-weight: var(--voice-transcript-weight);
}
/* Os exemplos do que se pode dizer ao microfone. Não são botões: dizem-se em voz
alta, não se carregam. Por isso são texto, sem borda e sem cursor de mão, e
ficam mais discretos do que as pílulas da caixa de escrever, que essas sim
respondem ao clique. */
.voice-examples {
display: flex;
max-width: 44ch;
flex-wrap: wrap;
justify-content: center;
gap: 0.35rem 1.25rem;
margin: 0;
padding: 0;
list-style: none;
color: var(--voice-text-muted);
font-size: var(--voice-suggestion-size);
font-weight: var(--voice-transcript-weight);
text-align: center;
transition: opacity var(--voice-word-duration) ease-out;
}
.voice-example::before {
content: "“";
}
.voice-example::after {
content: "”";
}
/* Quando ela fala, ouve ou procura, quem manda no ecrã é a legenda. Os exemplos
saem com `visibility` e não com `display`, para não fazerem o resto da coluna
saltar de sítio ao aparecer e desaparecer. */
.voice-assistant:not([data-voice-state="idle"]) .voice-examples {
opacity: 0;
visibility: hidden;
}
/* Com a caixa de escrever aberta saem de vez, e não apenas invisíveis: quem
está a escrever tem as pílulas ali por baixo, e o espaço que os exemplos
ocupavam é o que faltava para a última pílula caber no ecrã. */
.voice-assistant:has(.voice-composer:not([hidden])) .voice-examples {
display: none;
}
/* Num ecrã baixo ficam dois, em vez de quatro. Dois exemplos já dizem o que a
MarIA faz, e a linha que se poupa é a que faltava para a legenda não ficar
cortada em cima do microfone. */
@media (max-height: 45rem) {
.voice-example:nth-child(n + 3) {
display: none;
}
}
.voice-transcript {
max-width: 30ch;
min-height: calc(var(--voice-transcript-lines) * 1.35em);
margin: 0;
font-size: var(--voice-transcript-size);
font-weight: var(--voice-transcript-weight);
line-height: 1.35;
text-align: center;
text-wrap: balance;
transition: opacity var(--voice-word-duration) ease-out;
}
.voice-transcript__word {
color: var(--voice-text-muted);
transition: color var(--voice-word-duration) ease-out;
}
.voice-transcript__word.is-spoken {
color: var(--voice-text-strong);
}
.voice-transcript.is-placeholder .voice-transcript__word {
animation: voice-placeholder 1.6s ease-in-out infinite alternate;
}
.voice-transcript.is-hidden {
opacity: 0;
visibility: hidden;
}
/* Caixa de texto: alternativa escrita ao microfone */
.voice-composer {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
width: var(--voice-composer-width);
}
/* O atributo hidden tem de vencer o display do bloco acima */
.voice-composer[hidden] {
display: none;
}
.voice-composer__form {
display: flex;
align-items: center;
gap: var(--voice-composer-gap);
width: 100%;
}
.voice-composer__input {
flex: 1;
min-width: 0;
padding: 0.5rem 0 0.6rem;
border: 0;
border-bottom: 1px solid var(--voice-outline);
background: transparent;
color: var(--voice-text-strong);
font-family: inherit;
font-size: var(--voice-transcript-size);
font-weight: var(--voice-transcript-weight);
text-align: center;
transition: border-color 200ms ease-out;
}
.voice-composer__input::placeholder {
color: var(--voice-text-muted);
}
/* O foco deste campo é a própria linha, e mais nada: passa a branca e engrossa
até 3px (decisão do Jorge, 2026-09-17). Sem anel à volta, que numa caixa que
já é só uma linha desenhava uma segunda forma por cima da primeira.
A linha engrossa por dentro, com o padding a devolver os 2px que ela ganha:
sem isso o campo saltava dois pixéis para cima ao receber o foco, e com a
caixa a abrir já com o foco lá dentro esse salto via-se. */
.voice-composer__input:focus {
border-bottom-color: var(--voice-text-strong);
/* Os 2px que faltam para os 3 vêm de uma sombra interior, e não de uma borda
mais grossa: a borda ocupa espaço no layout e o campo saltava 2px para cima
ao receber o foco, o que se via porque a caixa abre já com o foco lá dentro. */
box-shadow: inset 0 -2px 0 0 var(--voice-text-strong);
outline: none;
}
.voice-composer__send {
flex: none;
width: var(--voice-composer-send-size);
height: var(--voice-composer-send-size);
}
/* Sugestões do que perguntar, sobre a casa e sobre o CMS. Os 50px de cima são
pedidos (decisão do Jorge, 2026-09-18): separam-nas do campo de escrever o
suficiente para não se lerem como parte dele. */
.voice-composer__suggestions {
display: flex;
max-width: 100%;
flex-wrap: wrap;
justify-content: center;
gap: 0.5rem;
margin: 0;
margin-block-start: 50px;
padding: 0;
list-style: none;
}
.voice-suggestion {
padding: 0.4rem 0.9rem;
border: 1px solid var(--voice-outline);
border-radius: 999px;
background: transparent;
color: var(--voice-text-soft);
font-family: inherit;
font-size: var(--voice-suggestion-size);
font-weight: var(--voice-transcript-weight);
cursor: pointer;
transition: border-color 200ms ease-out, color 200ms ease-out;
}
.voice-suggestion:hover {
border-color: var(--voice-text-strong);
color: var(--voice-text-strong);
}
.voice-suggestion:focus-visible {
outline: 2px solid var(--voice-text-strong);
outline-offset: 3px;
}
/* A mesma pílula, quando é a ligação para a pesquisa que o browser não deixou
abrir sozinha. Sendo um , precisa do que o