From f01e1a146ac9009f556d2111ae298a9d12d8b419 Mon Sep 17 00:00:00 2001 From: Francisco Solla Date: Mon, 28 Sep 2026 09:20:18 -0300 Subject: [PATCH] =?UTF-8?q?docs(S5):=20construtor=20fluido=20do=20kit=20na?= =?UTF-8?q?=20home=20(substitui=20o=20wizard=20em=20p=C3=A1gina)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- DESIGN.md | 2 + docs/campanha/redesign-site-publico.md | 82 +- .../2026-09-28-redesign-site-publico-s1.md | 2 +- docs/plans/kit-apoiador-home-ui-design.html | 1133 +++++++++++++ docs/plans/kit-apoiador-wizard-ui-design.html | 1480 ----------------- .../site-publico-campanha-home-ui-design.html | 537 +++++- 6 files changed, 1711 insertions(+), 1525 deletions(-) create mode 100644 docs/plans/kit-apoiador-home-ui-design.html delete mode 100644 docs/plans/kit-apoiador-wizard-ui-design.html diff --git a/DESIGN.md b/DESIGN.md index a1d827fb..087f520d 100644 --- a/DESIGN.md +++ b/DESIGN.md @@ -294,6 +294,8 @@ This file is the living owner of Teqo's visual decisions — a working document, **Public campaign home as editorial evidence (S1, 2026-09-28).** The campaign home uses a mobilization→evidence rhythm: brand-red opening and final participation frame the page; cream/white reading chapters carry principles, dated work and trajectory. Principles are long-form chapters paired with documentary photography (sticky on desktop, inline on mobile/reduced motion), never an equal-card grid. Developed public-work cases use a source-visible two-era record that separates institutional sphere, date and delivery phase. Yellow remains an orientation/focus/source signal, not a competing CTA; on a red field the primary CTA may be white with dark-red ink, while light fields use the canonical red/white action. This pattern replaces the old repeated-card campaign page because it gives authentic photography room, makes attribution auditable and preserves one dominant action in every color context. +**Embedded support-kit builder (S5, 2026-09-28).** Personalization on the public campaign home is one continuous, progressively disclosed section inside `#cards`, not a numbered wizard or a separate funnel. Name begins the live preview; optional photo and dobradinha appear as inline invitations; a kit tray accumulates only valid pieces and never covers content or focus. Desktop pairs a sticky live preview with the scrolling controls; mobile keeps previews and the tray inline. The full `/cards` studio remains the owner of the six models and deep links. This keeps the action inside the home’s editorial rhythm, reduces modal/context switching, and makes optional inputs feel additive instead of required. + How rules change: - **Decide, then update the owner.** When a better pattern wins — anti-slop review (`design-taste-frontend` / `gpt-taste`), a reference study (`awesome-design-md`), a redesign pass (`redesign-existing-projects`), or implementation judgment — update this file in the **same change** and say why. A pattern that only lives in code or in an agent's head is drift, not design. diff --git a/docs/campanha/redesign-site-publico.md b/docs/campanha/redesign-site-publico.md index 5af5039c..b3664fac 100644 --- a/docs/campanha/redesign-site-publico.md +++ b/docs/campanha/redesign-site-publico.md @@ -29,53 +29,53 @@ intocados; nada de superfície pública nova que viole o período eleitoral. Legenda de ação: **R** = redesenhar; **P** = preservar (só contrato/estilo mínimo); **E** = endpoint não visual (preserve-only); **G** = adição gateada. -| # | Rota / feature | Dono atual (código) | Fatia | Ação | Critério de aceite | -| --- | ----------------------------------------- | ---------------------------------------------------------- | ----- | ---- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| 1 | `/` | `(frontend)/(home)/page.tsx` + `layout.tsx` | S1 | R | Composição completa aprovada no artefato; seções identidade→princípios→trabalho→trajetória→conteúdo→participação; CTA primário único; vazio/erro/recusa desenhados; assinatura com reduced-motion | -| 2 | Shell de campanha (header/footer/nav) | `CampaignPageHeader`, `CampaignLogoLink`, `CampaignFooter` | S1 | R | Um só shell para home/conteúdos/jingles/fotos; alvos ≥44px; identificação eleitoral intacta; "Fotos" condicional preservada | -| 3 | `/conteudos` | `conteudos/(catalog)/page.tsx` | S2 | R | Lista/filtros/estados redesenhados; canonical `/conteudos`; `noindex` com 0 peças; skeletons preservados | -| 4 | `/conteudos/[slug]` | `conteudos/[slug]/page.tsx` | S2 | R | Detalhe + player + share redesenhados; 404 uniforme; OG `video.other`/`article` | -| 5 | `/conteudos/[slug]/midia` | `conteudos/[slug]/midia/route.ts` | S2 | E | Range/streaming, `?download=1` `jorge-solla-1313-.`, evento anônimo — intocados | -| 6 | `/conteudos/[slug]/frame` | `conteudos/[slug]/frame/route.ts` | S2 | E | Geração/espera do still dentro do orçamento — intocada | -| 7 | `/corte/[id]` | `corte/[id]/page.tsx` + `corte/layout.tsx` | S2 | R | `noindex` sempre; crédito de origem; 404 uniforme; share kit preservado | -| 8 | `/jingles` | `jingles/page.tsx` | S2 | R | Player/reprodução/download `jorge-solla-1313-.mp3`; vazio honesto; áudio nunca autoplay | -| 9 | `/midia` (referida no brief) | = itens 5/6 (endpoints de mídia) | S2 | E | Registrada como endpoint; não há página `/midia` no app | -| 10 | `/artigos` | `artigos/page.tsx` | S3 | R | Landing editorial restilizada; imagem do destaque corrigida; sem chrome de campanha | -| 11 | `/[type]` | `[type]/page.tsx` (`[type]/layout.tsx`) | S3 | R | Listagem por tipo restilizada; canonical; `generateStaticParams`/`dynamicParams` preservados | -| 12 | `/[type]/[category]` | `[type]/[category]/page.tsx` | S3 | R | Listagem de categoria restilizada; separação editorial mantida | -| 13 | `/[type]/[category]/[slug]` | `[type]/[category]/[slug]/page.tsx` | S3 | R | Artigo: JSON-LD `Article`, OG, redirect canônico, ISR `posts` — preservados | -| 14 | ShareLink `/[type]` (direct/announcement) | `[type]/page.tsx` branch + `components/shareLink/*` | S3 | R | Redirecionamento instantâneo e página de anúncio restilizadas; poll 30s e OG preservados | -| 15 | `/api/share-link/[slug]/live` | `api/share-link/[slug]/live/route.ts` | S3 | E | `{target}` nunca 5xx, `no-store` — intocado | -| 16 | `/[type]/evento.ics` | `[type]/evento.ics/route.ts` | S3 | P | Saída `.ics`, nome do arquivo e `Cache-Control` intocados | -| 17 | `/privacidade` | `privacidade/page.tsx` | S4 | R | Texto legal intacto; restilo editorial; 404 se `!published` | -| 18 | `/mandato-no-whatsapp` | `mandato-no-whatsapp/page.tsx` | S4 | R | Fluxo/form preservados; Consent `whatsapp-inscricao` fail-closed; ≥16px inputs | -| 19 | `/abaixo-assinado/[id]` | `abaixo-assinado/[id]/page.tsx` | S4 | R | Assinatura transacional/consent intactos; **bug 500 em id inexistente corrigido (404)**; JSON-LD/pixel preservados | -| 20 | Newsletter da home | `CampaignNewsletterSection` + `submitCampaignNewsletter` | S1/S4 | R | Consent `campanha-novidades` fail-closed; pixel Lead preservado; estado de recusa desenhado | -| 21 | `/cards` (estúdio) | `(home)/cards/page.tsx` + `components/cards/*` | S5 | R | 6 modelos reais; `?model=` válido; `#cards` da home; nomes de arquivo e telemetria anônima preservados | -| 22 | Wizard kit completo (extensão) | `CardsStudio`/`CardComposer` (dono) | S5 | R | Passos nome→foto→dobradinha→kit; nunca gera arte incompleta; foto nunca sai do browser; back/forward na sessão; sem persistência silenciosa | -| 23 | `/fotos` (C233) | `fotos/page.tsx` + `components/fotos/*` | S6 | R | Redesenho preserva o contrato C233 (só `approved`; kill switch `photoAlbum.published`; canal de remoção; vazio honesto) — **aberta por decisão de 28/09/2026** | -| 24 | `/fotos/encontre` (C234) | `fotos/encontre/page.tsx` + `api/fotos/selfie` | S7 | R | Redesenho preserva o contrato C234 (`selfieSearchEnabled` fail-closed; Consent por chave; sem score/nome; on-device) — **aberta por decisão de 28/09/2026** | -| 25 | `/api/revalidate` | `api/revalidate/route.ts` | — | P | Allowlist de tags intocada | -| 26 | `/api/content-events` | `api/content-events/route.ts` | S2 | P | Beacon anônimo: schema, rate-limit, catálogos — intocados | -| 27 | `/api/social-feed/sync` | `api/social-feed/sync/route.ts` | — | P | Auth admin + same-origin — intocado | -| 28 | Metadados raiz/robots/OG | `(frontend)/layout.tsx`, `robots.ts`, `lib/seo` | S1 | P | Fallbacks e noindex de staging preservados | -| 29 | `hidden`/`isPostVisible` | `src/utilities/posts.ts` | S3 | P | Falha fechada; remoção sem deploy — intocados | +| # | Rota / feature | Dono atual (código) | Fatia | Ação | Critério de aceite | +| --- | ------------------------------------------- | ---------------------------------------------------------- | ----- | ---- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| 1 | `/` | `(frontend)/(home)/page.tsx` + `layout.tsx` | S1 | R | Composição completa aprovada no artefato; seções identidade→princípios→trabalho→trajetória→conteúdo→participação; CTA primário único; vazio/erro/recusa desenhados; assinatura com reduced-motion | +| 2 | Shell de campanha (header/footer/nav) | `CampaignPageHeader`, `CampaignLogoLink`, `CampaignFooter` | S1 | R | Um só shell para home/conteúdos/jingles/fotos; alvos ≥44px; identificação eleitoral intacta; "Fotos" condicional preservada | +| 3 | `/conteudos` | `conteudos/(catalog)/page.tsx` | S2 | R | Lista/filtros/estados redesenhados; canonical `/conteudos`; `noindex` com 0 peças; skeletons preservados | +| 4 | `/conteudos/[slug]` | `conteudos/[slug]/page.tsx` | S2 | R | Detalhe + player + share redesenhados; 404 uniforme; OG `video.other`/`article` | +| 5 | `/conteudos/[slug]/midia` | `conteudos/[slug]/midia/route.ts` | S2 | E | Range/streaming, `?download=1` `jorge-solla-1313-.`, evento anônimo — intocados | +| 6 | `/conteudos/[slug]/frame` | `conteudos/[slug]/frame/route.ts` | S2 | E | Geração/espera do still dentro do orçamento — intocada | +| 7 | `/corte/[id]` | `corte/[id]/page.tsx` + `corte/layout.tsx` | S2 | R | `noindex` sempre; crédito de origem; 404 uniforme; share kit preservado | +| 8 | `/jingles` | `jingles/page.tsx` | S2 | R | Player/reprodução/download `jorge-solla-1313-.mp3`; vazio honesto; áudio nunca autoplay | +| 9 | `/midia` (referida no brief) | = itens 5/6 (endpoints de mídia) | S2 | E | Registrada como endpoint; não há página `/midia` no app | +| 10 | `/artigos` | `artigos/page.tsx` | S3 | R | Landing editorial restilizada; imagem do destaque corrigida; sem chrome de campanha | +| 11 | `/[type]` | `[type]/page.tsx` (`[type]/layout.tsx`) | S3 | R | Listagem por tipo restilizada; canonical; `generateStaticParams`/`dynamicParams` preservados | +| 12 | `/[type]/[category]` | `[type]/[category]/page.tsx` | S3 | R | Listagem de categoria restilizada; separação editorial mantida | +| 13 | `/[type]/[category]/[slug]` | `[type]/[category]/[slug]/page.tsx` | S3 | R | Artigo: JSON-LD `Article`, OG, redirect canônico, ISR `posts` — preservados | +| 14 | ShareLink `/[type]` (direct/announcement) | `[type]/page.tsx` branch + `components/shareLink/*` | S3 | R | Redirecionamento instantâneo e página de anúncio restilizadas; poll 30s e OG preservados | +| 15 | `/api/share-link/[slug]/live` | `api/share-link/[slug]/live/route.ts` | S3 | E | `{target}` nunca 5xx, `no-store` — intocado | +| 16 | `/[type]/evento.ics` | `[type]/evento.ics/route.ts` | S3 | P | Saída `.ics`, nome do arquivo e `Cache-Control` intocados | +| 17 | `/privacidade` | `privacidade/page.tsx` | S4 | R | Texto legal intacto; restilo editorial; 404 se `!published` | +| 18 | `/mandato-no-whatsapp` | `mandato-no-whatsapp/page.tsx` | S4 | R | Fluxo/form preservados; Consent `whatsapp-inscricao` fail-closed; ≥16px inputs | +| 19 | `/abaixo-assinado/[id]` | `abaixo-assinado/[id]/page.tsx` | S4 | R | Assinatura transacional/consent intactos; **bug 500 em id inexistente corrigido (404)**; JSON-LD/pixel preservados | +| 20 | Newsletter da home | `CampaignNewsletterSection` + `submitCampaignNewsletter` | S1/S4 | R | Consent `campanha-novidades` fail-closed; pixel Lead preservado; estado de recusa desenhado | +| 21 | `/cards` (estúdio) | `(home)/cards/page.tsx` + `components/cards/*` | S5 | R | 6 modelos reais; `?model=` válido; `#cards` da home; nomes de arquivo e telemetria anônima preservados | +| 22 | Construtor fluido do kit na home (extensão) | `CardsStudio`/`CardComposer` (dono) | S5 | R | Uma superfície contínua e progressiva na seção `#cards` da home (sem wizard/passos): prévia viva, foto e dobradinha como convites inline, bandeja só com peças válidas, downloads individual/kit; foto nunca sai do browser; `?model=` e `/cards` preservados; sem persistência silenciosa | +| 23 | `/fotos` (C233) | `fotos/page.tsx` + `components/fotos/*` | S6 | R | Redesenho preserva o contrato C233 (só `approved`; kill switch `photoAlbum.published`; canal de remoção; vazio honesto) — **aberta por decisão de 28/09/2026** | +| 24 | `/fotos/encontre` (C234) | `fotos/encontre/page.tsx` + `api/fotos/selfie` | S7 | R | Redesenho preserva o contrato C234 (`selfieSearchEnabled` fail-closed; Consent por chave; sem score/nome; on-device) — **aberta por decisão de 28/09/2026** | +| 25 | `/api/revalidate` | `api/revalidate/route.ts` | — | P | Allowlist de tags intocada | +| 26 | `/api/content-events` | `api/content-events/route.ts` | S2 | P | Beacon anônimo: schema, rate-limit, catálogos — intocados | +| 27 | `/api/social-feed/sync` | `api/social-feed/sync/route.ts` | — | P | Auth admin + same-origin — intocado | +| 28 | Metadados raiz/robots/OG | `(frontend)/layout.tsx`, `robots.ts`, `lib/seo` | S1 | P | Fallbacks e noindex de staging preservados | +| 29 | `hidden`/`isPostVisible` | `src/utilities/posts.ts` | S3 | P | Falha fechada; remoção sem deploy — intocados | Nenhuma rota da lista do programa fica sem dono. `/midia` e `/frame` são endpoints de mídia da Central (itens 5/6), não páginas. ## 3. Fatias -| Fatia | Escopo | Depende | Appetite | Design | -| ------ | ----------------------------------------------------------------------------- | ------------------------- | -------- | ------------------------------------------- | -| **S0** | Auditoria, matriz, plano, 1º pacote de design | — | — | campanha home+shell | -| **S1** | Shell de campanha + home (itens 1–2, 20) | S0 | M | `site-publico-campanha-home-ui-design.html` | -| **S2** | Central de Conteúdos, cortes, mídia embutida, jingles (3–9, 26) | S1 (shell) | M | artefato próprio por superfície | -| **S3** | Editorial: artigos, listas, artigo, share-links, `.ics` (10–16, 29) | S0 | M | artefato próprio | -| **S4** | Participação: WhatsApp, abaixo-assinado, privacidade, polish de forms (17–20) | S1 | S/M | artefato próprio | -| **S5** | Wizard do kit de apoio (21–22) | S1 | M | artefato próprio (estende `/cards`) | -| **S6** | Álbum público C233 (23) — aberto (decisão de 28/09/2026) | S3 (editorial) | S | artefato C233 aprovado (base) | -| **S7** | Selfie C234 (24) — aberto (decisão de 28/09/2026) | S6 + ops (flag + Consent) | — | artefato C234 aprovado (base) | +| Fatia | Escopo | Depende | Appetite | Design | +| ------ | ----------------------------------------------------------------------------- | ------------------------- | -------- | -------------------------------------------------------------------------- | +| **S0** | Auditoria, matriz, plano, 1º pacote de design | — | — | campanha home+shell | +| **S1** | Shell de campanha + home (itens 1–2, 20) | S0 | M | `site-publico-campanha-home-ui-design.html` | +| **S2** | Central de Conteúdos, cortes, mídia embutida, jingles (3–9, 26) | S1 (shell) | M | artefato próprio por superfície | +| **S3** | Editorial: artigos, listas, artigo, share-links, `.ics` (10–16, 29) | S0 | M | artefato próprio | +| **S4** | Participação: WhatsApp, abaixo-assinado, privacidade, polish de forms (17–20) | S1 | S/M | artefato próprio | +| **S5** | Construtor fluido do kit de apoio na home (21–22) | S1 | M | artefato próprio (seção `#cards`; estúdio `/cards` segue dono dos modelos) | +| **S6** | Álbum público C233 (23) — aberto (decisão de 28/09/2026) | S3 (editorial) | S | artefato C233 aprovado (base) | +| **S7** | Selfie C234 (24) — aberto (decisão de 28/09/2026) | S6 + ops (flag + Consent) | — | artefato C234 aprovado (base) | O núcleo (S1–S5) não depende de S6/S7; bloqueio de uma adição gateada não para o resto. Cada fatia exige: reconciliação factual dos claims que publica, diff --git a/docs/changelog/2026-09-28-redesign-site-publico-s1.md b/docs/changelog/2026-09-28-redesign-site-publico-s1.md index 1c9711bf..bde08dfd 100644 --- a/docs/changelog/2026-09-28-redesign-site-publico-s1.md +++ b/docs/changelog/2026-09-28-redesign-site-publico-s1.md @@ -1 +1 @@ -**S1 — Redesign das superfícies públicas: auditoria, matriz de cobertura e artefato hi-fi da home de campanha (2026-09-28):** primeira entrega do programa de redesign do site público (`docs/campanha/redesign-site-publico.md`), **docs-only e sem implementação** — ela abre o gate visual. O plano de programa registra o diagnóstico da auditoria live (1280/390), a **matriz de cobertura** de todas as rotas públicas das duas vertentes (campanha: `/`, shell, `/conteudos`, `/[slug]`, mídia/frame, `/corte/[id]`, `/jingles`; editorial: `/artigos`, `/[type]`, `/[type]/[category]`, `/[type]/[category]/[slug]`, share-links, `.ics`; participação: `/mandato-no-whatsapp`, `/abaixo-assinado/[id]`, `/privacidade`; extensões C233/C234), as 8 fatias com dependências e aceite, os contratos públicos preservados e a **reconciliação factual registrada em 28/09/2026**: por decisão da coordenação, "Criou o SAMU 192" e "Criou o Brasil Sorridente" ficam aprovados (liderou o piloto municipal e a nacionalização; liderou a implementação), "Mais votado do PT-BA em 2022" está correto no recorte partidário (com o escopo explícito), "DIAP entre os 40 melhores" confirmado, e 3.333/1.031 seguem como no ar com rechecagem antes do go-live; C233/C234 são **superfícies abertas e implementadas** (S6/S7 de redesenho, não adição gateada). O artefato hi-fi `docs/plans/site-publico-campanha-home-ui-design.html` (designer `openai/gpt-5.6-sol`) apresenta a home completa em 1280/390 com a direção "vermelho abre, papel explica": hero de mobilização com H1 "Mais Saúde, Mais Futuro", micro-provas aprovadas, prova social numérica, princípios como capítulos com fotografia própria por capítulo (crossfade 1:1 no desktop, inline no mobile/reduced-motion), a seção "por que essa eleição importa", o caso **SAMU na Bahia** como ficha de evidência em duas eras (gestão estadual 2007–2010 · entregue; governo federal 2025 · autorizado, com fonte), trajetória datada por esfera, board de atualizações (posts + YouTube + Instagram com snapshot/lazy), zona de mídia com rádio/vídeo sob ação do usuário e fail-closed, participação com um CTA primário e formulário de 3 campos, e os quatro estados críticos (board vazio, descoberta fail-closed, consentimento recusado, fallback de mídia); **três decisões visuais** documentadas no artefato e o porquê registrado em `DESIGN.md` §7. A faixa de jingles da home nasceu no tier degradado numa primeira passada (a cota do frontier esgotou no meio do lote) e foi **certificada pelo `openai/gpt-5.6-sol`** na passada seguinte, com as marcações `DEGRADED` removidas. O mesmo lote entregou o artefato da fatia S5 — `docs/plans/kit-apoiador-wizard-ui-design.html` — com o wizard do kit de apoio (passos nome → foto de perfil → dobradinha → kit completo, mais a descoberta de selfie C234 só quando disponível), sobre o estúdio `/cards` existente sem duplicar o renderer: peças inválidas nunca entram no download, foto nunca sai do aparelho, `?model=`/`#cards` preservados, com kit vazio/parcial/cheio, erros recuperáveis (arquivo, cutout, nome longo, busca sem resultado), foco/teclado/reduced-motion e a ação de baixar o kit com o transporte em lote deixado como decisão de implementação. Riscos públicos abertos no plano: `/abaixo-assinado/` responde 500 em produção (deveria 404) e imagem de destaque quebrada em `/artigos`. Copy da home reconciliado em deck de voz (`solla-comunicacao`, untracked). PR em rascunho: aguarda aprovação humana do artefato antes de qualquer implementação. +**S1 — Redesign das superfícies públicas: auditoria, matriz de cobertura e artefato hi-fi da home de campanha (2026-09-28):** primeira entrega do programa de redesign do site público (`docs/campanha/redesign-site-publico.md`), **docs-only e sem implementação** — ela abre o gate visual. O plano de programa registra o diagnóstico da auditoria live (1280/390), a **matriz de cobertura** de todas as rotas públicas das duas vertentes (campanha: `/`, shell, `/conteudos`, `/[slug]`, mídia/frame, `/corte/[id]`, `/jingles`; editorial: `/artigos`, `/[type]`, `/[type]/[category]`, `/[type]/[category]/[slug]`, share-links, `.ics`; participação: `/mandato-no-whatsapp`, `/abaixo-assinado/[id]`, `/privacidade`; extensões C233/C234), as 8 fatias com dependências e aceite, os contratos públicos preservados e a **reconciliação factual registrada em 28/09/2026**: por decisão da coordenação, "Criou o SAMU 192" e "Criou o Brasil Sorridente" ficam aprovados (liderou o piloto municipal e a nacionalização; liderou a implementação), "Mais votado do PT-BA em 2022" está correto no recorte partidário (com o escopo explícito), "DIAP entre os 40 melhores" confirmado, e 3.333/1.031 seguem como no ar com rechecagem antes do go-live; C233/C234 são **superfícies abertas e implementadas** (S6/S7 de redesenho, não adição gateada). O artefato hi-fi `docs/plans/site-publico-campanha-home-ui-design.html` (designer `openai/gpt-5.6-sol`) apresenta a home completa em 1280/390 com a direção "vermelho abre, papel explica": hero de mobilização com H1 "Mais Saúde, Mais Futuro", micro-provas aprovadas, prova social numérica, princípios como capítulos com fotografia própria por capítulo (crossfade 1:1 no desktop, inline no mobile/reduced-motion), a seção "por que essa eleição importa", o caso **SAMU na Bahia** como ficha de evidência em duas eras (gestão estadual 2007–2010 · entregue; governo federal 2025 · autorizado, com fonte), trajetória datada por esfera, board de atualizações (posts + YouTube + Instagram com snapshot/lazy), zona de mídia com rádio/vídeo sob ação do usuário e fail-closed, participação com um CTA primário e formulário de 3 campos, e os quatro estados críticos (board vazio, descoberta fail-closed, consentimento recusado, fallback de mídia); **três decisões visuais** documentadas no artefato e o porquê registrado em `DESIGN.md` §7. A faixa de jingles da home nasceu no tier degradado numa primeira passada (a cota do frontier esgotou no meio do lote) e foi **certificada pelo `openai/gpt-5.6-sol`** na passada seguinte, com as marcações `DEGRADED` removidas. O mesmo lote entregou o artefato da fatia S5 — `docs/plans/kit-apoiador-home-ui-design.html` — com o **construtor fluido do kit de apoio dentro da home** (seção `#cards`, no ritmo editorial): uma superfície contínua e progressiva, sem wizard/passos, em que o nome inicia a prévia viva, foto e dobradinha aparecem como convites inline opcionais e a bandeja acumula só as peças válidas (downloads individual e do kit), com os 6 modelos do estúdio preservados em `/cards` e `?model=`/âncora `#cards` mantidos; a Seção `#cards` do artefato da home foi atualizada para essa composição. O artefato anterior de wizard em página separada foi **removido antes de qualquer aprovação** (superseded, sem twin). Estados cobertos: nome vazio/inválido, foto adicionada/reenquadrada, dobradinha, erros recuperáveis (arquivo, cutout, busca vazia), bandeja vazia/parcial/completa, foco/teclado/`prefers-reduced-motion` e o convite de selfie C234 como ação separada; o transporte do "Baixar kit" fica como decisão de implementação. Riscos públicos abertos no plano: `/abaixo-assinado/` responde 500 em produção (deveria 404) e imagem de destaque quebrada em `/artigos`. Copy da home reconciliado em deck de voz (`solla-comunicacao`, untracked). PR em rascunho: aguarda aprovação humana do artefato antes de qualquer implementação. diff --git a/docs/plans/kit-apoiador-home-ui-design.html b/docs/plans/kit-apoiador-home-ui-design.html new file mode 100644 index 00000000..b8850e66 --- /dev/null +++ b/docs/plans/kit-apoiador-home-ui-design.html @@ -0,0 +1,1133 @@ + + + + + + + Design S5 — Construtor fluido do kit na home + + + + + + + +
Design tier: openai/gpt-5.6-sol · frontier · gate humano obrigatório
+
+

S5 · seção #cards da home

+

Começa com um nome.
Vira um kit.

+

+ Construtor contínuo dentro da home: prévia viva, convites opcionais e bandeja incremental. + Sem passos numerados, página paralela ou modal obrigatório. +

+
+
+ 01 +

Fica no fluxo da home

+

+ A seção nasce entre conteúdo e participação. A pessoa não troca de contexto para + começar. +

+
+
+ 02 +

Opcional parece opcional

+

+ Foto e dobradinha surgem como convites inline, não como campos pendentes de um + formulário longo. +

+
+
+ 03 +

Validade é visível

+

+ A bandeja cresce só com peças prontas; arte incompleta nunca é mascarada por um CTA. +

+
+
+

+ † Pendente de revisão de voz: microcopy nova da seção. Literais do deck, + privacidade e erros existentes aparecem sem marca. +

+
+ +
+
+

Cena 01 · Seção completa desktop · 1280 px

+

No contexto da home; prévia sticky à esquerda, controles contínuos à direita.

+
+
+
↑ Faixa anterior: jingles e conteúdo da campanha
+
+
+

Faça parte

+

Mostre que você está com Solla

+

+ Escolha um modelo, coloque seu nome ou sua foto e baixe seu card. Compartilhe com sua + gente e fortaleça nossa caminhada. +

+
+
+ +
+
+

Comece pelo seu nome†

+

+ O texto usa caixa alta, redução e até 2 linhas. Se não couber com leitura segura, + nenhuma peça é criada. +

+ +

+ Seu nome e sua foto são processados apenas no seu aparelho e não são enviados para + nós. +

+
+
+

Quer sua foto?†

+
+
+ Foto adicionada†Arraste para reenquadrar ou use direção e zoom. +
+ +
+

Sua foto fica neste aparelho e não é enviada para nós.

+
+
+

Quer sua dobradinha?†

+

Escolha entre 53 estaduais. A arte de time e a colinha mudam juntas.

+
Julio Pinheiro 13999 · Trocar
+

+ A escolha é processada neste aparelho. Nenhum nome, foto ou cadastro é solicitado. +

+
+
+

Sua bandeja†

+

Só peças válidas aparecem aqui.

+
+
+ Card com seu nomePronto +
+
+ Moldura quadradaPronta +
+
+ Moldura verticalPronta +
+
+ Time de vocêPronto +
+
+ Time do estadualPronto +
+
+ Minha colinhaPronta +
+
+
+
+ 6 peças prontas† +

card-jorge-solla-<id>.png · telemetria anônima

+
+ +
+ Ver todos os modelos e o estúdio completo +
+
+
+
+
↓ Próxima seção: participação e WhatsApp
+
+
+ +
+
+

Cena 02 · Seção mobile · 390 px

+

Prévia e bandeja inline; nada fixo cobre conteúdo ou foco.

+
+
+
↑ Jingles
+
+
+

Faça parte

+

Mostre que você está com Solla

+

+ Escolha um modelo, coloque seu nome ou sua foto e baixe seu card. Compartilhe com sua + gente e fortaleça nossa caminhada. +

+
+
+ +
+
+

Comece pelo seu nome†

+ +

+ Seu nome e sua foto são processados apenas no seu aparelho e não são enviados para + nós. +

+
+
+

Quer sua foto?†

+
+
+ Foto opcional†Recorte e ajuste no aparelho. +
+ +
+

Sua foto fica neste aparelho e não é enviada para nós.

+
+
+

Quer sua dobradinha?†

+
+
53 estaduaisBusca por nome e teclado.
+ +
+
+
+

Sua bandeja†

+
+
+ NomePronto +
+
+ 2 perfisProntos +
+
+ TimePronto +
+
+ ColinhaPronta +
+
+
+
+ 6 peças prontas† +

Sem arte incompleta.

+
+ +
+ Ver todos os modelos e o estúdio completo +
+
+
+
+
↓ Participação
+
+
+ +
+
+

Cena 03 · Estados de interação e erros

+

Divulgação progressiva com recuperação local.

+
+
+
+ Nome vazio +

A bandeja começa vazia

+

+ O campo está disponível; nenhuma peça é tratada como pronta e “Baixar kit” permanece + bloqueado. +

+
+ Seu nome +

Comece digitando como você é chamado.†

+
+ +
+
+ Digitando · inválido +

Encurte o nome

+

A prévia tenta caixa alta, redução e 2 linhas antes de falhar.

+
+ Não foi possível encaixar esse nome no card. +

Use um nome mais curto, como você é chamado.

+
+ +
+
+ Foto adicionada +

Prévia viva e reenquadrável

+

+ Recorte local, zoom, direção e harmonização têm controles equivalentes para toque e + teclado. +

+
+ Prévia do Time de você com foto +
+
+
+ Dobradinha escolhida +

Julio Pinheiro · 13999

+

+ As prévias “Time do estadual” e “Minha colinha” atualizam juntas. Trocar mantém nome e + foto da sessão. +

+
+ Prévia da dobradinha +
+
+
+ Arquivo inválido +

Não foi possível usar esta foto

+
+ Escolha outra imagem e tente novamente. +

Sua foto fica neste aparelho e não é enviada para nós.

+
+ +
+
+ Recorte indisponível +

Seu navegador está bloqueando o recorte de fundo.

+

+ Ative os recursos necessários para este site, tente outro navegador ou siga sem foto. +

+ +
+
+ Busca sem resultado +

Nenhum estadual encontrado.

+
+ Buscar estadual +

“nome inexistente”

+

Nenhum estadual encontrado.

+
+ +
+
+
+ +
+
+

Cena 04 · Bandeja vazia → parcial → completa

+

Somente peças válidas; individual e kit convivem sem prometer transporte.

+
+
+
+ 0 +

Bandeja vazia

+

Nome ausente ou inválido.

+
    +
  • Nome aguarda
    • +
  • Foto opcional
    • +
  • Dobradinha opcional
    • +
+ +
+
+ 4 +

Bandeja parcial

+

Nome e foto válidos; dobradinha pulada.

+
    +
  • Card com nome pronto
    • +
  • 2 molduras prontas
    • +
  • Time de você pronto
    • +
  • Estadual e colinha não incluídos
    • +
+ +
+
+ 6 +

Bandeja completa

+

Nome, foto e estadual válidos.

+
    +
  • Card com nome pronto
    • +
  • 2 molduras prontas
    • +
  • Time de você pronto
    • +
  • Time do estadual pronto
    • +
  • Minha colinha pronta
    • +
+ +
+
+
+ +
+
+

Cena 05 · Foco, teclado, movimento reduzido e selfie

+

Alternativas equivalentes e consentimentos separados.

+
+
+
+

Encontrar fotos é outra ação†

+

+ O convite só aparece quando C234 estiver disponível. A foto usada no card não autoriza + busca por selfie nem é reaproveitada silenciosamente. +

+
+ Quer encontrar suas fotos da campanha?† +

Comece uma ação separada, com explicação e consentimento próprios.

+ Conhecer a busca por selfie† +
+
+
+

Teclado, foco e movimento reduzido

+
    +
  • Nome inválido mantém foco no campo e anuncia o erro inline.
    • +
  • ↑ ↓ e Enter operam o seletor; Escape fecha e devolve o foco.
    • +
  • Arraste da foto tem botões de direção e zoom equivalentes.
    • +
  • + prefers-reduced-motion: sem transições; prévias e bandeja permanecem + inline. +
    • +
+
+ Foco visível

+
+
+
+
+ +
+

+ NEEDS ASSET: foto do visitante é conteúdo da sessão, não ativo versionado. + Masters e exemplos oficiais vêm de public/cards/. +

+

+ Decisão pendente: o transporte de “Baixar kit”. O design fixa ação e + seleção válida; não escolhe ZIP. +

+

+ Contratos preservados: #cards, `/cards`, + ?model=<id>, card-jorge-solla-<id>.png e telemetria + anônima abertura|download. +

+
+ + diff --git a/docs/plans/kit-apoiador-wizard-ui-design.html b/docs/plans/kit-apoiador-wizard-ui-design.html deleted file mode 100644 index 037294e1..00000000 --- a/docs/plans/kit-apoiador-wizard-ui-design.html +++ /dev/null @@ -1,1480 +0,0 @@ - - - - - - - Design S5 — Wizard do kit de apoiador - - - - - - - -
Design tier: openai/gpt-5.6-sol · frontier · gate humano obrigatório
-
-

S5 · novo caminho sobre o estúdio existente

-

Um kit inteiro.
Uma sessão só.

-

- O wizard reúne nome, foto e dobradinha sem criar outro renderer. Cada peça continua - obedecendo às regras do modelo original; o kit só leva o que está válido. -

-
-
- 01 -

É uma entrada a mais

-

- A galeria de 6 modelos, ?model=<id> e #cards continuam - intactos. O wizard não substitui o compositor compartilhado. -

-
-
- 02 -

Privado por padrão

-

- Nome, foto, recorte e escolha ficam na sessão e no aparelho. Voltar preserva o trabalho; - recarregar e outra sessão ficam fora do escopo. -

-
-
- 03 -

Só baixa o que está pronto

-

- Nome longo, foto inválida e dobradinha incompleta nunca viram arte cortada ou peça - vazia. -

-
-
-

- † Pendente de revisão de voz: o símbolo marca microcopy nova do wizard. - Literais existentes do estúdio e do deck aparecem sem marca. -

-
- -
-
-

Cena 01 · Fluxo completo desktop · 1280 px

-

Quatro passos visíveis, um CTA primário por passo e as 6 peças válidas no fim.

-
-
-
- Jorge SollaVoltar aos modelos -
-
-
-

Faça parte

-

Monte seu kit de apoio†

-

- Escolha um modelo, coloque seu nome ou sua foto e baixe seu card. Compartilhe com sua - gente e fortaleça nossa caminhada. -

-
- -
- -
-
-
-
- Prévia do card com nomeMARIA
DO CARMOPrévia em tempo real -
-
-
- Passo 1 de 4 · obrigatório para peças com nome -

Como você é chamado?

-

- O nome aparece em caixa alta, encolhe quando necessário e pode ocupar 2 linhas. - Nunca é cortado em silêncio. -

-
- -

- Use seu primeiro nome ou o nome pelo qual as pessoas conhecem você. -

-
-

- Seu nome e sua foto são processados apenas no seu aparelho e não são enviados para - nós. -

-
- Sair do passo a passo† -
-
-
- -
-
-
- Prévia do card Time de vocêRecorte no aparelho -
-
-
- Passo 2 de 4 · opcional -

Escolha sua foto de perfil†

-

Para um recorte melhor, escolha uma foto nítida, de frente e com fundo simples.

-
-
- Sua foto de busto -

O recorte e o enquadramento acontecem no seu aparelho.

-
- -
-
-
- Zoom -
-
-
- Harmonizar cores -

- Ajusta o brilho e as cores da sua foto para combinar com as fotos do card. -

-
-
-

Sua foto fica neste aparelho e não é enviada para nós.

-
- -
- -
-
-
-
- -
-
-
- Prévia da dobradinha com deputado estadual53 opções reais -
-
-
- Passo 3 de 4 · opcional -

Escolha sua dobradinha†

-

- O estadual escolhido entra apenas nas peças que usam dobradinha. A colinha recebe - nome e 5 dígitos; o card usa a arte oficial correspondente. -

-
-
- -
-
53 estaduais · use ↑ ↓ e Enter para escolher
-
- -
-
-

- A escolha é processada neste aparelho. Nenhum nome, foto ou cadastro é solicitado. -

-
- -
- -
-
-
-
- -
-
-
- Prévia da colinha personalizadaKit pronto -
-
-
- Passo 4 de 4 · somente peças válidas -

Seu kit está pronto para compartilhar†

-

- Revise as peças. Você pode baixar uma por vez ou iniciar a ação do kit completo. -

-
-
- Card com nomeCard com seu nomePronto -
-
- Moldura quadradaMoldura quadradaPronta -
-
- Moldura verticalMoldura verticalPronta -
-
- Time de vocêTime de vocêPronto -
-
- Time do estadualTime do estadualPronto -
-
- Minha colinhaMinha colinhaPronta -
-
-
-
- 6 de 6 peças prontas† -

Arquivos individuais mantêm card-jorge-solla-<id>.png.

-
- -
-

- A forma de empacotar o kit é decisão de implementação. Este gate fixa a ação, a - hierarquia e a seleção somente de peças válidas. Os eventos - abertura|download continuam com telemetria anônima. -

-
- -
-
-
-
-
-
- -
-
-

Cena 02 · Fluxo completo mobile · 390 px

-

Drawer em fluxo, trabalho preservado ao voltar e CTA único no rodapé de cada passo.

-
-
-
- Jorge SollaModelos -
-
-
-
- 1 de 4 · Nome -

Como você é chamado?

-
-
-
- Prévia do card com nomeMARIA
DO CARMO -
-
- -
-

- Seu nome e sua foto são processados apenas no seu aparelho e não são enviados para - nós. -

-
- -
-
-
-
-
- 2 de 4 · Foto opcional -

Escolha sua foto†

-
-
-
- Prévia do Time de você -
-
-
- Sua foto de busto -

Foto nítida, de frente e com fundo simples.

-
- -
-

Sua foto fica neste aparelho e não é enviada para nós.

-
- -
- -
-
-
-
- 3 de 4 · Dobradinha opcional -

Escolha seu estadual†

-
-
-
-
- -
-
53 estaduais · use ↑ ↓ e Enter
-
- -
-
-

- A escolha é processada neste aparelho. Nenhum nome, foto ou cadastro é solicitado. -

-
- -
-
-
-
-
- 4 de 4 · Kit -

6 peças prontas†

-
-
-
-
- NomePronto -
-
- PerfilPronto -
-
- TimePronto -
-
- ColinhaPronta -
-
- -

Somente peças válidas entram na ação do kit.

-
-
-
-
-
- -
-
-

Cena 03 · Erros recuperáveis

-

Arquivo inválido, recorte indisponível, nome longo e busca sem resultado.

-
-
-
- Arquivo inválido -

Não foi possível usar esta foto

-

O trabalho anterior continua na sessão; o erro fica junto da escolha de arquivo.

-
- Escolha outra imagem e tente novamente. -

Sua foto fica neste aparelho e não é enviada para nós.

-
- -
-
- Recorte indisponível -

Seu navegador está bloqueando o recorte de fundo.

-

- O recorte roda no seu aparelho e precisa de recursos que alguns navegadores com proteção - avançada desligam. -

-
- Você pode tentar de novo -

Ative os recursos para este site ou abra a página em outro navegador.

-
- -
-
- Nome muito longo -

Encurte o nome

-

- O sistema tentou caixa alta, redução e 2 linhas. Como ainda não coube com leitura - segura, nenhuma arte é gerada. -

-
- Não foi possível encaixar esse nome no card. -

Use um nome mais curto, como você é chamado.

-
- -
-
- Busca · zero resultado -

Nenhum estadual encontrado.

-

- A busca ignora acentos e maiúsculas. Teclado continua no campo; Escape fecha e devolve o - foco ao gatilho. -

-
- Buscar estadual
“nome inexistente”

Nenhum estadual - encontrado. -
- -
-
-
- -
-
-

Cena 04 · Kit vazio, parcial e cheio

-

O download nunca inclui arte incompleta.

-
-
-
- 0 -

Kit vazio

-

Nome ausente ou inválido. A ação principal permanece bloqueada.

-
    -
  • Card com nome aguarda nome
    • -
  • Peças com foto aguardam foto
    • -
  • Dobradinhas aguardam estadual
    • -
- -
-
- 4 -

Kit parcial

-

Nome e foto válidos; dobradinha foi pulada. Só 4 peças entram.

-
    -
  • Card com nome pronto
    • -
  • 2 molduras prontas
    • -
  • Time de você pronto
    • -
  • Time do estadual não incluído
    • -
  • Minha colinha não incluída
    • -
- -
-
- 6 -

Kit completo

-

Nome, foto e estadual válidos. Todas as peças estão disponíveis.

-
    -
  • Card com nome pronto
    • -
  • 2 molduras prontas
    • -
  • Time de você pronto
    • -
  • Time do estadual pronto
    • -
  • Minha colinha pronta
    • -
- -
-
-
- -
-
-

Cena 05 · Selfie opcional, foco e movimento reduzido

-

Consentimentos separados, teclado completo e nenhuma dependência de animação.

-
-
-
-

Encontrar fotos é outra ação†

-

- Esta descoberta só aparece quando C234 estiver disponível. A foto enviada para criar o - card não autoriza busca por selfie nem é reaproveitada silenciosamente. -

-
- Quer encontrar suas fotos da campanha?† -

Comece uma busca separada, com explicação e consentimento próprios.

- Conhecer a busca por selfie† -
-

Se C234 estiver indisponível, este bloco inteiro não renderiza.

-
-
-

Teclado, foco e movimento reduzido

-
    -
  • Enter seleciona estadual; ↑ ↓ navegam; Escape fecha e devolve foco.
    • -
  • Arraste da foto tem botões de direção e controle de zoom equivalentes.
    • -
  • Ao voltar, foco retorna ao controle que abriu o passo.
    • -
  • Erros são anunciados inline e o foco retorna ao campo que precisa de correção.
    • -
  • - prefers-reduced-motion: sem rolagem suave, entradas ou transições; a - ordem e o conteúdo não mudam. -
    • -
-
-

Foco visível

- -
-
-
-
- -
-

- NEEDS ASSET: a foto do visitante nas prévias é conteúdo da sessão, não - ativo de campanha. Todo o restante usa apenas os masters e exemplos oficiais existentes em - public/cards/. -

-

- Decisão pendente: mecanismo de “baixar o kit” — o artefato fixa a ação e o - conjunto válido, não escolhe ZIP, múltiplos downloads ou outro transporte. -

-

- Voz: toda string marcada com † passa por solla-comunicacao na - implementação. Literais de privacidade e erros existentes permanecem intactos. -

-
- - diff --git a/docs/plans/site-publico-campanha-home-ui-design.html b/docs/plans/site-publico-campanha-home-ui-design.html index ff876b3c..ebef4cb9 100644 --- a/docs/plans/site-publico-campanha-home-ui-design.html +++ b/docs/plans/site-publico-campanha-home-ui-design.html @@ -23,6 +23,7 @@ --ink: #221713; --muted: #705f58; --line: rgb(71 19 14 / 18%); + --field: rgb(71 19 14 / 26%); --blue: #184e92; --red-bright: #e4102f; --green: #009647; @@ -1116,6 +1117,264 @@ line-height: 1.5; } + .home-kit-builder { + padding: 112px 72px 126px; + background: var(--campaign-cream); + border-top: 1px solid var(--line); + } + .voice-mark { + color: #9b6500; + font-size: 0.7em; + vertical-align: super; + } + .home-kit-builder > header { + max-width: 780px; + } + .home-kit-builder > header h2 { + margin: 0; + font: 760 3.45rem/0.98 var(--font-display); + letter-spacing: -0.052em; + } + .home-kit-builder > header > p:last-child { + max-width: 650px; + margin: 22px 0 0; + color: var(--muted); + font-size: 0.9rem; + line-height: 1.65; + } + .home-builder-layout { + display: grid; + grid-template-columns: 42% 58%; + gap: 1px; + margin-top: 62px; + background: var(--line); + border: 1px solid var(--line); + } + .home-builder-preview { + position: relative; + padding: 38px; + background: var(--pt-red-dark); + color: white; + } + .home-builder-preview-inner { + position: sticky; + top: 24px; + } + .home-card-live { + position: relative; + width: 232px; + aspect-ratio: 3 / 4; + margin: 0 auto; + overflow: hidden; + border-radius: 10px; + box-shadow: 0 22px 52px rgb(0 0 0 / 30%); + } + .home-card-live img { + width: 100%; + height: 100%; + object-fit: cover; + } + .home-card-name { + position: absolute; + top: 30%; + left: 20%; + max-width: 65%; + color: #ffec01; + font: 850 1.05rem/0.95 var(--font-display); + text-transform: uppercase; + } + .home-live-label { + margin: 22px 0 0; + color: rgb(255 255 255 / 65%); + font-size: 0.66rem; + text-align: center; + } + .home-kit-mini { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 8px; + margin-top: 24px; + } + .home-kit-mini div { + min-height: 66px; + padding: 9px; + background: rgb(255 255 255 / 9%); + border: 1px solid rgb(255 255 255 / 14%); + color: rgb(255 255 255 / 62%); + font-size: 0.58rem; + line-height: 1.35; + } + .home-kit-mini div.ready { + color: white; + border-color: rgb(255 230 7 / 60%); + } + .home-builder-controls { + padding: 36px 42px 42px; + background: white; + } + .home-control-block { + padding: 28px 0; + border-top: 1px solid var(--line); + } + .home-control-block:first-child { + padding-top: 0; + border-top: 0; + } + .home-control-block h3 { + margin: 0; + font: 730 1.35rem/1.08 var(--font-display); + } + .home-control-block > p { + margin: 8px 0 0; + color: var(--muted); + font-size: 0.72rem; + line-height: 1.55; + } + .home-control-block label { + display: block; + margin-top: 18px; + font-size: 0.72rem; + font-weight: 750; + } + .home-control-block input { + width: 100%; + min-height: 48px; + margin-top: 8px; + padding: 0 13px; + border: 1px solid var(--field); + border-radius: 8px; + background: white; + color: var(--ink); + font-size: 1rem; + } + .home-inline-invite { + display: flex; + align-items: center; + justify-content: space-between; + gap: 16px; + margin-top: 16px; + padding: 16px; + background: var(--campaign-surface); + border: 1px dashed var(--field); + } + .home-inline-invite strong { + display: block; + font-size: 0.76rem; + } + .home-inline-invite span { + display: block; + margin-top: 4px; + color: var(--muted); + font-size: 0.65rem; + } + .home-inline-invite button, + .home-builder-download, + .home-piece-download { + min-height: 44px; + display: inline-flex; + align-items: center; + justify-content: center; + border-radius: 8px; + font-weight: 760; + } + .home-inline-invite button { + flex: 0 0 auto; + padding: 0 14px; + border: 1px solid var(--line); + background: white; + color: var(--pt-red); + font-size: 0.7rem; + } + .home-picker-selected { + display: flex; + min-height: 48px; + align-items: center; + margin-top: 14px; + padding: 0 13px; + border: 1px solid var(--field); + border-radius: 8px; + background: white; + font-size: 0.72rem; + font-weight: 700; + } + .home-picker-selected span { + margin-left: auto; + color: var(--muted); + font-size: 0.64rem; + } + .home-privacy { + margin: 13px 0 0; + color: var(--muted); + font-size: 0.64rem; + line-height: 1.5; + } + .home-tray { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 10px; + margin-top: 18px; + } + .home-tray article { + min-height: 108px; + padding: 12px; + background: var(--cream); + border: 1px solid var(--line); + } + .home-tray strong { + display: block; + font-size: 0.66rem; + line-height: 1.25; + } + .home-tray span { + display: block; + margin-top: 7px; + color: var(--green); + font-size: 0.6rem; + font-weight: 700; + } + .home-piece-download { + margin-top: 7px; + border: 0; + background: transparent; + color: var(--pt-red); + font-size: 0.62rem; + } + .home-tray-footer { + display: flex; + align-items: center; + justify-content: space-between; + gap: 14px; + margin-top: 14px; + padding: 15px; + background: var(--pt-red-dark); + color: white; + } + .home-tray-footer strong { + font: 740 0.86rem/1.2 var(--font-display); + } + .home-tray-footer p { + margin: 4px 0 0; + color: rgb(255 255 255 / 62%); + font-size: 0.59rem; + } + .home-builder-download { + padding: 0 16px; + border: 0; + background: white; + color: var(--pt-red-dark); + font-size: 0.7rem; + } + .home-studio-link { + min-height: 44px; + display: inline-flex; + align-items: center; + margin-top: 22px; + color: var(--pt-red); + font-size: 0.72rem; + font-weight: 750; + text-underline-offset: 4px; + } + .participation { display: grid; grid-template-columns: 42% 58%; @@ -1603,6 +1862,45 @@ .mobile .jingles-note { padding-right: 20px; } + .mobile .home-kit-builder { + padding: 82px 20px 90px; + } + .mobile .home-kit-builder > header h2 { + font-size: 2.5rem; + } + .mobile .home-builder-layout { + display: block; + margin-top: 42px; + } + .mobile .home-builder-preview { + padding: 28px 18px; + } + .mobile .home-builder-preview-inner { + position: static; + } + .mobile .home-card-live { + width: 176px; + } + .mobile .home-builder-controls { + padding: 28px 18px 32px; + } + .mobile .home-inline-invite { + align-items: flex-start; + flex-direction: column; + } + .mobile .home-inline-invite button { + width: 100%; + } + .mobile .home-tray { + grid-template-columns: 1fr 1fr; + } + .mobile .home-tray-footer { + align-items: stretch; + flex-direction: column; + } + .mobile .home-builder-download { + width: 100%; + } .mobile .participation { display: block; } @@ -2506,7 +2804,7 @@ As primeiras peças estão a caminho. Enquanto isso, faça seu card e mostre que você está com Solla.

- Fazer meu card + Fazer meu card @@ -2642,6 +2940,128 @@

+
+
+

Faça parte

+

Mostre que você está com Solla

+

+ Escolha um modelo, coloque seu nome ou sua foto e baixe seu card. Compartilhe com + sua gente e fortaleça nossa caminhada. +

+
+
+ +
+
+

Comece pelo seu nome†

+

+ O texto se ajusta em caixa alta e até 2 linhas. Se não couber com leitura + segura, nenhuma peça incompleta é criada. +

+ + +

+ Seu nome e sua foto são processados apenas no seu aparelho e não são enviados + para nós. +

+
+
+

Quer sua foto?†

+

+ Opcional. O recorte, o enquadramento e a harmonização acontecem no aparelho. +

+
+
+ Foto adicionada†Arraste para reenquadrar ou use os controles de direção e zoom. +
+ +
+

Sua foto fica neste aparelho e não é enviada para nós.

+
+
+

Quer sua dobradinha?†

+

+ Opcional. Escolha entre 53 estaduais; a arte de time e a colinha usam a opção + selecionada. +

+
Julio Pinheiro 13999 · Trocar
+

+ A escolha é processada neste aparelho. Nenhum nome, foto ou cadastro é + solicitado. +

+
+
+

Sua bandeja†

+

Só peças válidas aparecem aqui. Baixe uma por vez ou use a ação do kit.

+
+
+ Card com seu nomePronto +
+
+ Moldura quadradaPronta +
+
+ Moldura verticalPronta +
+
+ Time de vocêPronto +
+
+ Time do estadualPronto +
+
+ Minha colinhaPronta +
+
+
+
+ 6 peças prontas† +

+ Arquivos individuais: card-jorge-solla-<id>.png · telemetria anônima. +

+
+ +
+ Ver todos os modelos e o estúdio completo +
+
+
+
+
- Fazer meu card + Fazer meu card @@ -3285,6 +3705,117 @@

+
+
+

Faça parte

+

Mostre que você está com Solla

+

+ Escolha um modelo, coloque seu nome ou sua foto e baixe seu card. Compartilhe com + sua gente e fortaleça nossa caminhada. +

+
+
+ +
+
+

Comece pelo seu nome†

+

O card muda enquanto você digita.

+ +

+ Seu nome e sua foto são processados apenas no seu aparelho e não são enviados + para nós. +

+
+
+

Quer sua foto?†

+
+
+ Foto opcional†Recorte e ajuste no aparelho. +
+ +
+

Sua foto fica neste aparelho e não é enviada para nós.

+
+
+

Quer sua dobradinha?†

+
+
+ 53 estaduaisBusca por nome e navegação por teclado. +
+ +
+

+ A escolha é processada neste aparelho. Nenhum nome, foto ou cadastro é + solicitado. +

+
+
+

Sua bandeja†

+

Só peças válidas aparecem aqui.

+
+
+ Card com nomePronto +
+
+ 2 perfisProntos +
+
+ TimePronto +
+
+ ColinhaPronta +
+
+
+
+ 6 peças prontas† +

Sem arte incompleta.

+
+ +
+ Ver todos os modelos e o estúdio completo +
+
+
+
+

Apoie e acompanhe

@@ -3467,7 +3998,7 @@ “As primeiras peças estão a caminho. Enquanto isso, faça seu card e mostre que você está com Solla.”
- Fazer meu card + Fazer meu card
Descoberta fail-closed