/* ==========================================================================
GutEase — secoes da landing page
Ordem e fundo em specs/site.md §6 e design.md §1.1.
========================================================================== */
/* --------------------------------------------------------------------------
1. ANNOUNCEMENT BAR
-------------------------------------------------------------------------- */
.announce {
background: var(--forest-900);
color: var(--text-hi-inv);
text-align: center;
font-size: var(--fs-small);
padding: var(--sp-2) var(--gutter);
}
/* --------------------------------------------------------------------------
2. HEADER (sem ancoras, sem carrinho, sem busca — D85)
-------------------------------------------------------------------------- */
.header {
position: sticky; top: 0;
z-index: var(--z-header);
background: transparent;
border-bottom: 1px solid transparent;
transition: background var(--dur-card) ease-out,
box-shadow var(--dur-card) ease-out,
border-color var(--dur-card) ease-out;
}
.header[data-scrolled="true"] {
background: var(--cream-50);
/* SEM fio embaixo (D191). A sombra ja separa o header da pagina, e o fio
quase preto atravessando a tela inteira era o contorno mais visivel do
site — aparecia em toda rolagem, em qualquer secao. */
box-shadow: var(--shadow-sm);
}
.header__inner {
/* 64px no celular: 8px a menos multiplicados por tudo que vem depois. */
min-height: 64px;
display: grid;
grid-template-columns: 44px 1fr 44px;
align-items: center;
/* 8px, nao 12px: sao 8px a mais para a coluna do meio, e e exatamente o que
faz a tagline caber em UMA linha a 360px, a largura de Android mais comum
depois da de 393 (D135). O wordmark continua com mais de 30px de folga
ate o botao de menu. */
gap: var(--sp-2);
}
.header__brand { text-align: center; text-decoration: none; color: var(--text-hi); }
.header__wordmark {
display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
font-family: var(--font-display);
font-weight: 600;
font-size: 1.625rem;
line-height: 1.1;
/* Tracking de -0.005em, nao -0.015em: a Playfair e Didone, e o aperto
encostava as serifas finas umas nas outras, borrando o vao entre letras.
Nao e mudanca de corpo — o corpo continua 26px (D135). */
letter-spacing: -0.005em;
}
/* O botao tem 44px de alvo e o icone 24px, entao o icone ficava a 30px da
borda enquanto o resto da pagina alinha em 20px. A margem negativa puxa a
caixa para fora da coluna do grid e alinha o icone ao gutter, sem encolher
o alvo de toque e sem mover o wordmark, que continua centrado no 1fr. */
.header__inner > [data-menu-button] { margin-inline-start: -10px; }
/* A folha usava --olive-500 #829400, que da **2.88:1** sobre o creme. E a cor
decorativa da embalagem, e design.md 5 ja dizia que em tamanho de interface
o icone tem de usar --olive-600 — este ficou de fora na construcao. A 22px,
colada no wordmark, ela era a coisa mais apagada do header (D135). */
.header__wordmark svg { width: 22px; height: 22px; color: var(--olive-600); }
/* Tagline: 10px e tracking de 0.18em faziam duas coisas ruins ao mesmo tempo
(D135). Primeiro, 10px esta abaixo do piso de 12px que design.md 3.7 fixa
por causa do publico de 30 a 60 (site.md 2). Segundo, o tracking largo
inchava a frase para 186px numa coluna de 201px, entao ela QUEBRAVA em duas
linhas com "you" sozinho na segunda — e era isso que empurrava o header de
64 para 82px. Corpo maior com tracking menor cabe em uma linha e ainda
devolve os 18px de altura. */
.header__tagline {
display: block;
font-size: var(--fs-caption); /* 12px, o piso do projeto */
font-weight: 500;
letter-spacing: 0.04em;
line-height: 1.3;
text-transform: uppercase;
/* Mesma cor do wordmark. Em --text-low a frase dava 5.24:1 contra os 9.04:1
do nome logo acima: lado a lado, a diferenca de peso otico lia como se a
frase estivesse mais transparente que o resto (D135). */
color: var(--text-hi); /* 9.04:1, era 5.24:1 */
margin-top: 2px;
text-wrap: balance; /* se faltar largura, divide parelho */
}
/* --------------------------------------------------------------------------
3. HERO
-------------------------------------------------------------------------- */
.hero { padding-block: var(--sp-4) var(--section-y); }
/* Ordem no mobile: galeria -> painel de compra -> titulo e bullets (D104).
O painel sobe porque o slide 1 ja carrega a proposta em imagem. O titulo
em HTML continua na pagina, logo abaixo do CTA.
A ordem do DOM nao muda - so a colocacao no grid -, e nada dentro de
.hero__intro e focavel, entao a ordem de foco e de leitura seguem
coerentes (WCAG 2.4.3).
min-width:0 nos filhos: sem isso o conteudo intrinseco impede a coluna de
encolher e a pagina ganha scroll horizontal em telas estreitas (D97). */
.hero__grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--sp-4);
}
.hero__grid > * { min-width: 0; }
.hero__media { grid-row: 1; }
.hero__panel { grid-row: 2; }
.hero__intro { grid-row: 3; }
.hero__eyebrow { margin-bottom: var(--sp-3); }
.hero__sub { margin-top: var(--sp-4); }
.hero__bullets { margin-top: var(--sp-6); display: grid; gap: var(--sp-3); }
.hero__bullets li {
display: grid; grid-template-columns: 22px 1fr; gap: var(--sp-3);
align-items: start;
font-size: var(--fs-body);
color: var(--text-mid);
}
.hero__bullets svg { width: 20px; height: 20px; color: var(--olive-600); margin-top: 3px; }
/* Desktop volta as duas colunas de design.md secao 13: galeria a esquerda
ocupando as duas linhas, texto acima do painel a direita. */
@media (min-width: 900px) {
.hero__grid {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
column-gap: var(--sp-10);
row-gap: var(--sp-6);
align-items: start;
}
.hero__media { grid-column: 1; grid-row: 1 / span 2; }
.hero__intro { grid-column: 2; grid-row: 1; }
.hero__panel { grid-column: 2; grid-row: 2; }
.header__inner { min-height: var(--header-h); }
}
/* --------------------------------------------------------------------------
4. MARQUEE
-------------------------------------------------------------------------- */
.marquee {
background: var(--paper);
border-block: 1px solid var(--mute); /* era quase preto — D191 */
overflow: hidden;
padding-block: var(--sp-4);
}
.marquee__inner { display: flex; width: max-content; animation: marquee 40s linear infinite; }
.marquee:hover .marquee__inner,
.marquee:focus-within .marquee__inner { animation-play-state: paused; }
.marquee[data-static="true"] .marquee__inner { animation: none; }
.marquee ul { display: flex; align-items: center; }
.marquee li {
display: flex; align-items: center; gap: var(--sp-4);
padding-inline: var(--sp-5);
font-family: var(--font-display);
font-size: 1.25rem;
font-weight: 500;
color: var(--text-hi);
white-space: nowrap;
}
.marquee li::after {
content: ''; width: 6px; height: 6px; border-radius: var(--r-full);
background: var(--olive-500);
}
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* --------------------------------------------------------------------------
5. TRUST STRIP (numeros de rotulo, nunca selos — D86)
-------------------------------------------------------------------------- */
.trust { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); text-align: center; }
.trust__num { font-family: var(--font-display); font-weight: 600;
font-size: clamp(1.75rem, 4vw, 2.25rem); line-height: 1;
font-variant-numeric: tabular-nums; }
.trust__label { font-size: var(--fs-small); color: var(--text-mid); margin-top: var(--sp-2); }
@media (min-width: 600px) { .trust { grid-template-columns: repeat(4, 1fr); } }
/* --------------------------------------------------------------------------
BLOCO DE TEXTO + IMAGEM (zigue-zague no desktop)
-------------------------------------------------------------------------- */
.split { display: grid; gap: var(--sp-7); align-items: center; }
.split__media img { width: 100%; height: auto; border-radius: var(--r-xl); }
@media (min-width: 900px) {
.split { grid-template-columns: 1fr 1fr; gap: var(--sp-10); }
.split--reverse .split__media { order: 2; }
}
/* --------------------------------------------------------------------------
6. PILARES (What GutEase Supports — D137)
Os tres icones sao os do rotulo, vetorizados da arte plana (D29). Ficam em
disco oliva claro, como os passos da rotina, para que as duas secoes leiam
como a mesma familia.
-------------------------------------------------------------------------- */
/* Cabecalho centralizado, como nos mockups (D151). `design.md` 3.7 permite:
"Centralizado so em cabecalho de secao curto, de ate duas linhas" — e aqui
titulo e subtitulo tem duas linhas cada. Os cards continuam alinhados a
esquerda; centralizar bloco longo de texto continua proibido. */
/* Cabecalho de secao centralizado (design.md 3.7: so em cabecalho curto).
ANTES era `.sec-head > * { max-width: 28ch }` — UM numero so, servindo o
titulo e o subtitulo. Nao funciona, porque `ch` acompanha o corpo da fonte:
28ch valia 616px no h2 de 44px e 280px no lead de 20px. Ou seja, o titulo
ficava praticamente sem limite e o subtitulo ficava estrangulado, quebrando
em tres linhas onde caberia em duas. Cada um passa a ter a sua medida, e a
do texto sai em `rem` de proposito, para nao encolher quando o corpo cresce
(D158). */
.sec-head { text-align: center; }
.sec-head > * { margin-inline: auto; }
/* 26ch e o valor que design.md 3.7 fixa para H2 */
.sec-head h2 { max-width: 26ch; }
/* medida de leitura do subtitulo + o respiro de design.md 6 (titulo -> subtitulo) */
.sec-head > p { max-width: 30rem; margin-top: var(--sp-4); }
.pillars { display: grid; gap: var(--sp-2); }
.pillar {
display: grid;
grid-template-columns: 85px 1fr;
/* 12px, nao 16: com o icone a 84px o nome mais longo ("Digestive Comfort")
quebrava em duas linhas, e no mockup ele cabe em uma. */
gap: var(--sp-3);
align-items: center;
/* Branco puro, nao --paper: com a paleta de D162 o --paper virou oliva
palido, e sobre a secao --cream-100 ele separaria a 1.09. O branco
separa a 1.19 e faz o card saltar. */
background: var(--white);
/* Sem borda: no mockup o card e superficie limpa, separada do fundo so
pela sombra. A borda de design.md 9 deixava o card "recortado" (D149). */
border-radius: var(--r-lg);
padding: var(--sp-4);
box-shadow: var(--shadow-md);
}
/* Icone grande de proposito. A 32px num circulo de 64 ele lia como
decoracao de interface; na embalagem os tres sao marcas grandes, e
design.md 5 ja previa `>=32px decorativo, como na embalagem`. A 40px num
circulo de 76 eles voltam a ter presenca de marca. */
/* GUARDA, hoje sem uso: a secao dos pilares e --cream-100 (D161), entao o
card branco ja contrasta. Esta regra existe para o dia em que alguem puser
os pilares numa secao branca — ali o card sumiria, restando so a sombra, e
design.md 9 e explicito: "card e fundo nunca tem o mesmo tom".
NAO APAGAR sem antes conferir em que fundo os pilares estao. */
/* Card dentro de seccao BRANCA (design.md 9: "card e fundo nunca tem o mesmo
tom"). O `.pillar` ja precisava disso; `.card` e `.facts` passaram a
precisar quando a seccao do rotulo entrou como o primeiro cartao branco da
pagina (D189). Os tres sao --paper #FFFFFF e sumiriam ali — e a OITAVA
aparicao da mesma armadilha, depois de D160, D161, D162b, D172b, D173b,
D187 e a propria D169b.
Regra que decorre, ja escrita em D172b: quando o valor de um token de
superficie muda, varra quem o usa como FUNDO DE CARD — e depois varra o
que esta DENTRO desse card (D173b). */
.bg-paper .pillar,
.bg-paper .card,
.bg-paper .facts { background: var(--cream-50); }
.pillar__icon {
width: 85px; height: 85px;
display: grid; place-items: center;
background: var(--olive-100);
border-radius: var(--r-full);
color: var(--olive-600);
}
/* Os tres icones sao PNG do cliente usados como MASCARA, nao como imagem
(D147). O alfa do arquivo define a forma; a cor vem do `background`, entao
o icone continua respondendo ao verde do projeto — se um dia a paleta
mudar, eles mudam junto. Como ![]()
a cor ficaria congelada no arquivo.
120px de origem para 40px de exibicao: nitido em tela 3x, 5 a 6 KB cada. */
.pillar__icon::after {
content: '';
/* 46px de DESENHO, nao de caixa (D150). Os PNG do cliente vinham com
margem transparente diferente em cada um — 62%, 68% e 76% de tinta —,
entao a mesma caixa de 52px dava tres desenhos de 32, 35 e 40px. Os
arquivos foram recortados na caixa da tinta, e agora a medida bate com
o que se ve. O circulo fica em 85px, como o mockup; o desenho dentro
dele vai a 56px (66%) a pedido do cliente — acima dos 54% do mockup,
porque so o desenho cresce, nao a caixa. */
width: 56px; height: 56px;
/* Verde escuro, nao oliva (D149). No mockup do cliente os tres desenhos
sao quase o verde do wordmark; em --olive-600 eles puxavam para o
amarelado e era a diferenca mais visivel entre a nossa secao e a dele.
--forest-900 e cor de marca, 9.04:1 sobre o creme. Ajusta design.md 5,
que mandava --olive-600 em tamanho de interface. */
background: var(--forest-900);
-webkit-mask: var(--ic) center / contain no-repeat;
mask: var(--ic) center / contain no-repeat;
}
.pillar__icon[data-ic="comfort"] { --ic: url("../img/icons/pillar-comfort.png"); }
.pillar__icon[data-ic="regularity"] { --ic: url("../img/icons/pillar-regularity.png"); }
.pillar__icon[data-ic="balance"] { --ic: url("../img/icons/pillar-balance.png"); }
/* 1.375rem e nao --fs-h3 (24px): o nome e rotulo de card, nao titulo de
secao, e a 24px ele empurrava a frase de apoio para duas linhas. */
.pillar__name { font-family: var(--font-display); font-weight: 800;
font-size: 1.25rem; line-height: 1.15; }
.pillar__body { font-size: var(--fs-body); color: var(--text-mid); margin-top: var(--sp-1); }
@media (min-width: 900px) {
.pillars { grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.pillar { grid-template-columns: 1fr; text-align: center; justify-items: center;
padding: var(--sp-6) var(--sp-5); gap: var(--sp-4); align-content: start; }
}
/* --------------------------------------------------------------------------
7. A SIMPLE DAILY ROUTINE (icones, nao fotos — D94)
Duas colunas ja no celular, como o mockup: os quatro cards sao curtos e em
coluna unica empurrariam o resto da pagina para baixo sem necessidade.
-------------------------------------------------------------------------- */
.routine { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
.routine__card {
min-width: 0;
/* Branco com contorno, nao --cream-50 (D172). O card foi desenhado quando
--cream-50 era o CREME e a secao era branca; com a paleta de D163 o
--cream-50 virou o proprio fundo da pagina, entao num fundo de secao
estes quatro cards ficariam invisiveis. O branco separa 1.08 e o contorno
faz o resto — o mesmo tratamento das fotos de ingrediente. */
background: var(--white);
border-radius: var(--r-lg);
padding: var(--sp-5) var(--sp-4);
text-align: center;
box-shadow: var(--shadow-md);
}
.routine__icon {
width: 56px; height: 56px;
display: grid; place-items: center;
margin-inline: auto;
background: var(--olive-100);
border-radius: var(--r-full);
color: var(--olive-600);
}
.routine__icon svg { width: 28px; height: 28px; }
.routine__title { font-weight: 600; font-size: var(--fs-h4); margin-top: var(--sp-3); }
.routine__body { font-size: var(--fs-small); color: var(--text-mid); margin-top: var(--sp-2); }
@media (min-width: 900px) {
.routine { grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
}
/* --------------------------------------------------------------------------
8. INGREDIENTES COM "LEARN MORE" (D137)
Card fechado: foto quadrada a esquerda, identificacao a direita, botao de
expandir embaixo. O painel usa o mesmo mecanismo do acordeao do FAQ
(.acc__panel / .acc__inner), entao nao ha altura chutada em lugar nenhum.
`min-width: 0` no card e obrigatorio: sem ele o nome longo do ingrediente
define a largura minima do grid e estoura a viewport a 320px (D97).
-------------------------------------------------------------------------- */
.ings { display: grid; gap: var(--sp-3); }
.ing {
min-width: 0;
/* Igual ao .pillar (D175): branco, SEM borda, separado do fundo so
pela sombra. */
background: var(--white);
border-radius: var(--r-lg);
padding: var(--sp-4);
box-shadow: var(--shadow-md);
}
.ing__head { display: grid; grid-template-columns: 84px 1fr; gap: var(--sp-4); align-items: center; }
/* Tile verde por tras da foto (D176), no mesmo papel que o circulo
--olive-100 tem atras do icone dos pilares: dar ARESTA sem contorno.
Ele precisa ser MAIOR que a foto, nao ficar atras dela — a foto e
fotografia com fundo proprio quase branco e cobriria qualquer cor posta
embaixo. Os 12px de folga sao a moldura que aparece. */
.ing__tile {
width: 84px; height: 84px;
display: grid; place-items: center;
background: var(--olive-100);
border-radius: var(--r-md);
}
.ing__id { min-width: 0; }
.ing__photo {
width: 72px; height: 72px;
aspect-ratio: 1 / 1; object-fit: cover;
border-radius: var(--r-md);
}
.ing__name { font-weight: 600; font-size: var(--fs-h4); line-height: 1.2; }
.ing__amount { font-size: var(--fs-small); font-weight: 600; color: var(--olive-700);
margin-top: 2px; font-variant-numeric: tabular-nums; }
.ing__short { font-size: var(--fs-small); color: var(--text-mid); margin-top: var(--sp-1); }
/* Botao de expandir. 44px de alvo, e o mais largo possivel: o dedo acerta em
qualquer ponto da linha, nao so no "+". */
.ing__more {
width: 100%;
margin-top: var(--sp-3);
display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
min-height: 44px;
padding: 0 var(--sp-3);
background: var(--olive-100);
border-radius: var(--r-md);
font-family: var(--font-text);
font-weight: 600;
font-size: var(--fs-small);
color: var(--olive-700);
cursor: pointer;
transition: background var(--dur-fast) ease-out,
transform var(--dur-press) ease-out;
}
.ing__more:hover { background: #D2ECD2; } /* separa 1.15 do base — D197 */
.ing__more:active { transform: scale(.98); }
.ing__plus {
flex: none; width: 18px; height: 18px; color: var(--olive-700);
transition: transform var(--dur-base) var(--ease-panel);
}
.ing__more[aria-expanded="true"] .ing__plus { transform: rotate(45deg); }
/* O painel herda .acc__panel; aqui so o espacamento interno muda, porque o
do FAQ tem padding-bottom pensado para item com borda inferior. */
.ing__panel .acc__inner > * { padding-bottom: 0; max-width: none; }
.ing__detail { padding-top: var(--sp-4); }
.ing__detail p { font-size: var(--fs-small); color: var(--text-mid); }
.ing__detail p + .ing__h { margin-top: var(--sp-4); }
.ing__h { font-weight: 600; font-size: var(--fs-small); color: var(--text-hi);
margin-bottom: var(--sp-1); }
@media (min-width: 600px) {
.ings { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
}
@media (min-width: 900px) {
.ings { grid-template-columns: repeat(3, 1fr); }
.ing__head { grid-template-columns: 1fr; text-align: center; justify-items: center; }
/* No desktop o conjunto vira circulo, como o icone dos pilares. */
.ing__tile { width: 138px; height: 138px; border-radius: var(--r-full); }
.ing__photo { width: 120px; height: 120px; border-radius: var(--r-full); }
}
/* --------------------------------------------------------------------------
10. KIWI LIME (bloco escuro)
-------------------------------------------------------------------------- */
.flavor__media img { width: 100%; height: auto; border-radius: var(--r-xl); }
/* --------------------------------------------------------------------------
12. DEPOIMENTOS (D138)
Esteira arrastavel com scroll-snap NATIVO — sem uma linha de JavaScript.
No celular isso da inercia de verdade, que nenhum arrasto em JS iguala; no
desktop da barra de rolagem e shift+roda; no teclado a regiao e focavel e
as setas rolam. Tres comportamentos de graca.
Nao rola sozinha, de proposito: design.md 12.3 proibe loop infinito fora do
marquee, auto-play de carrossel e elemento que se move enquanto o usuario
le. Depoimento e feito para ser lido.
-------------------------------------------------------------------------- */
/* Aviso de rascunho, no padrao das cinco paginas de apoio (D101). Some junto
com os [[A DEFINIR]] quando o conteudo real entrar. */
.draft-note {
background: #FBF3E2;
border: 1px solid var(--warn);
border-radius: var(--r-md);
padding: var(--sp-3) var(--sp-4);
margin-bottom: var(--sp-5);
font-size: var(--fs-small);
color: var(--text-hi);
max-width: var(--measure);
}
/* Flex, nao grid. Com `grid-auto-flow: column` + `grid-auto-columns:
minmax(0, 82%)` o minimo da trilha e ZERO, entao o grid encolhe as seis
colunas para caber na viewport em vez de estourar para o lado: medido, os
cards saiam com 50px de largura. `flex: 0 0 82%` nao negocia — e o mesmo
padrao que o trilho da galeria ja usa. */
.quotes {
display: flex;
gap: var(--sp-3);
overflow-x: auto;
overscroll-behavior-x: contain; /* nao "vaza" o gesto para a pagina */
scroll-snap-type: x mandatory;
/* respiro nas pontas: sem isto o primeiro e o ultimo card ficam colados na
borda da tela e parecem cortados */
padding: var(--sp-1) var(--gutter);
margin-inline: calc(var(--gutter) * -1);
scroll-padding-inline: var(--gutter);
/* a barra de rolagem nativa suja o desenho no desktop; o alvo continua
sendo o arrasto, a roda e o teclado */
scrollbar-width: none;
}
.quotes::-webkit-scrollbar { display: none; }
.quotes:focus-visible { outline: 2px solid var(--olive-700); outline-offset: 3px; }
.quote {
flex: 0 0 82%;
scroll-snap-align: start;
min-width: 0;
display: flex;
flex-direction: column;
background: var(--paper);
box-shadow: var(--shadow-md); /* sem contorno — D191 */
border-radius: var(--r-lg);
padding: var(--sp-5);
box-shadow: var(--shadow-sm);
}
.quote__text {
font-size: var(--fs-body);
color: var(--text-hi);
text-wrap: pretty;
}
/* o autor gruda no rodape do card, entao cards de alturas diferentes
continuam alinhados por baixo */
.quote__who {
margin-top: auto;
padding-top: var(--sp-4);
font-size: var(--fs-small);
font-weight: 600;
color: var(--text-mid);
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--sp-2);
}
.quote__badge {
background: var(--olive-100);
color: var(--olive-700);
border-radius: var(--r-full);
padding: 3px 10px;
font-size: var(--fs-caption);
font-weight: 600;
}
.quote__media { margin-bottom: var(--sp-4); }
.quote__media img,
.quote__video {
width: 100%;
height: auto;
border-radius: var(--r-md);
background: var(--cream-100);
display: block;
}
/* video vertical de celular: trava a proporcao para o card nao pular de
altura enquanto o poster nao chega */
.quote__video { aspect-ratio: 9 / 16; object-fit: cover; }
.quote__media img { aspect-ratio: 1 / 1; object-fit: cover; }
@media (min-width: 600px) { .quote { flex-basis: 46%; } }
@media (min-width: 900px) {
.quotes { gap: var(--sp-5); }
.quote { flex-basis: 31%; }
}
/* --------------------------------------------------------------------------
9. SELOS DE QUALIDADE (rascunho — D139)
O desenho fica pronto para quando os documentos chegarem. Enquanto os
rotulos forem [[A DEFINIR]], a fileira grita que esta incompleta, que e
exatamente o que se quer: ninguem publica isso sem perceber.
-------------------------------------------------------------------------- */
.seals {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--sp-3);
margin-top: var(--sp-5);
}
.seal {
min-width: 0;
display: grid;
justify-items: center;
gap: var(--sp-2);
background: var(--cream-50);
border-radius: var(--r-lg);
padding: var(--sp-4) var(--sp-3);
text-align: center;
}
.seal__icon {
width: 48px; height: 48px;
display: grid; place-items: center;
background: var(--olive-100);
border-radius: var(--r-full);
color: var(--olive-600);
}
.seal__icon svg { width: 24px; height: 24px; }
.seal__label { font-size: var(--fs-small); font-weight: 600; color: var(--text-hi); }
@media (min-width: 600px) { .seals { grid-template-columns: repeat(4, 1fr); } }
/* --------------------------------------------------------------------------
13. COMPARATIVO EM DOIS CARDS (D137)
Empilhados no celular, lado a lado no desktop. O card do GutEase usa
--olive-100, o mesmo destaque leve que o card de quantidade selecionado; o
da categoria usa cinza-creme, mais recuado, sem parecer acusacao.
-------------------------------------------------------------------------- */
/* TABELA PAREADA (D182). Duas colunas lado a lado, cada linha um criterio com
a resposta dos dois lados alinhada. `table-layout: fixed` e o que garante as
duas colunas iguais mesmo com textos de comprimentos diferentes.
`border-spacing` com valores diferentes nos eixos: 8px separando as colunas,
3px entre linhas — as celulas quase se tocam na vertical, como no
referencial, sem virar bloco solido. */
.vs {
width: 100%;
table-layout: fixed;
border-collapse: separate;
border-spacing: var(--sp-2) 3px;
}
.vs__colhead {
width: 50%;
vertical-align: bottom;
padding-bottom: var(--sp-3);
font-weight: inherit;
}
/* 150px e o teto real: a coluna mede ~161px a 393. O formato de duas colunas
tem imagem pequena por construcao — foi o que se trocou pelo pareamento. */
.vs__shot { width: min(150px, 100%); height: auto; display: block; margin-inline: auto; }
/* Mesma voz dos titulos da ROTINA — "1 Scoop", "30 Servings", "Kiwi Lime" —
que sao Inter 600 a 18px, e nao Playfair (D184).
E aqui o pedido do cliente coincide com o spec: design.md 3.4 poe Playfair
em H1/H2/H3 e manda TABELA usar Inter. Este `.vs__head` e ``, entao
estar em Playfair era o desvio, nao o contrario. */
.vs__head {
display: block;
margin-top: var(--sp-2);
font-family: var(--font-text);
font-weight: 600;
font-size: var(--fs-h4);
line-height: 1.3;
text-wrap: balance;
}
.vs__cell {
vertical-align: middle;
text-align: center;
padding: var(--sp-4) var(--sp-2);
font-size: var(--fs-small);
}
.vs__cell svg {
width: 22px; height: 22px;
border-radius: var(--r-full);
padding: 3px;
box-sizing: border-box;
display: block;
margin: 0 auto var(--sp-2);
}
/* Verde claro contra cinza, e nao a coluna preta do referencial: preto ali
criaria um QUARTO bloco escuro, e a pagina ja encostou no teto de tres
(design.md 1.1). O contraste de "escolhido contra comum" sobrevive. */
.vs__cell--us { background: var(--olive-100); }
.vs__cell--us svg { background: var(--forest-900); color: #fff; } /* 5.04:1 */
.vs__cell--other { background: var(--mute); }
.vs__cell--other svg { background: var(--text-low); color: #fff; } /* 6.90:1 */
.vs__cell--other span { color: var(--text-mid); }
/* Cantos so nas pontas da coluna, para as cinco linhas lerem como um bloco. */
.vs tbody tr:first-child .vs__cell {
border-start-start-radius: var(--r-lg); border-start-end-radius: var(--r-lg);
}
.vs tbody tr:last-child .vs__cell {
border-end-start-radius: var(--r-lg); border-end-end-radius: var(--r-lg);
}
.vs__closer {
margin-top: var(--sp-7);
background: var(--forest-900);
color: var(--on-forest);
border-radius: var(--r-xl);
padding: var(--sp-6) var(--sp-5);
font-family: var(--font-display);
font-weight: 600;
font-size: var(--fs-h3);
line-height: 1.2;
text-align: center;
text-wrap: balance;
}
@media (min-width: 900px) {
.vs { grid-template-columns: 1fr 1fr; gap: var(--sp-5); align-items: start; }
}
/* --------------------------------------------------------------------------
14. "STILL HAVE QUESTIONS?" (fim do FAQ)
-------------------------------------------------------------------------- */
.helpdesk {
margin-top: var(--sp-7);
display: grid;
justify-items: center;
gap: var(--sp-2);
background: var(--olive-100);
border-radius: var(--r-xl);
padding: var(--sp-6) var(--sp-5);
text-align: center;
}
.helpdesk__icon {
width: 56px; height: 56px;
display: grid; place-items: center;
background: var(--paper);
border-radius: var(--r-full);
color: var(--olive-600);
margin-bottom: var(--sp-2);
}
.helpdesk__icon svg { width: 26px; height: 26px; }
.helpdesk__title {
font-family: var(--font-display);
font-weight: 600;
font-size: var(--fs-h3);
line-height: 1.15;
}
.helpdesk__body { font-size: var(--fs-body); color: var(--text-mid); }
.helpdesk .btn { margin-top: var(--sp-3); }
/* --------------------------------------------------------------------------
15. FINAL CTA
-------------------------------------------------------------------------- */
.final { display: grid; gap: var(--sp-7); align-items: center; text-align: center; }
.final__media img { width: 100%; max-width: 420px; margin-inline: auto;
height: auto; border-radius: var(--r-xl); }
@media (min-width: 900px) {
.final { grid-template-columns: 1fr 1fr; text-align: left; }
.final .t-h2, .final p { margin-inline: 0; }
}
/* --------------------------------------------------------------------------
16. FOOTER
-------------------------------------------------------------------------- */
/* O rodape REDEFINE os tokens invertidos no proprio escopo (D166). Isso e de
proposito e conserta tudo que esta dentro dele de uma vez — inclusive os
`style=` inline do HTML que apontam para --text-mid-inv. Sem isso o texto
secundario do rodape viraria PRETO sobre verde escuro, porque no resto da
pagina os tokens -inv passaram a ser pretos para funcionar sobre o #228B22. */
/* GRADIENTE (D188) — o primeiro do projeto fora do marcador de destaque.
O cliente autorizou degrade e nao sabia onde; este e o lugar escolhido, e
a escolha tem criterio: e a maior area de cor chapada da pagina, fica no
fecho, e NAO tem nenhuma superficie colorida por cima que possa perder a
aresta — que foi o motivo de o gradiente nao ter ido para a secao de
ofertas, onde `.details` e o card selecionado sao --olive-100 e sumiriam.
MESMO MATIZ, 120 graus nos dois pontos: nao entra cor nova, so
luminosidade. Por isso nao e o "gradiente saturado de borda a borda" que
R14 rejeitou nem o "blob colorido" de design.md 15 — e profundidade numa
cor que ja esta na pagina.
O TOPO FOI ESCOLHIDO MEDINDO, nao no olho. A escada de texto do rodape
(D166c) tem tres niveis, e o limite e o mais fraco deles, o acento:
topo separacao branco secundario acento
#175817 1.21 8.59 6.99 5.67 <- escolhido
#1A6E1A 1.63 6.38 5.20 4.21 <- acento REPROVA
#1F801F 2.07 5.04 4.11 3.33 <- dois reprovam
Ou seja, o degrade so podia subir ate aqui. Um passo a mais e o acento cai
abaixo de 4.5 — e o acento e justamente o link do rodape.
`background-color` fica declarado ANTES como reserva: navegador que ignore
o gradiente cai no verde chapado de sempre, nao em transparente. */
.footer { background-color: var(--forest-deep);
/* Degrade refeito no matiz 67 do oliva do pote (D195). O limite
continua sendo o elo mais fraco, que e o acento — a cor do link:
topo #455000 ... branco 8.75 | secundario 6.35 | acento 5.00
base #3A4400 ... branco 10.46 | secundario 7.59 | acento 5.98
Um passo mais claro que #455000 e o acento cai abaixo de 4.5. */
background-image: linear-gradient(to bottom, #0A5A0A 0%, var(--forest-deep) 62%);
--text-hi-inv: #FFFFFF; /* 13.00:1 na base, 8.47 no topo */
--text-mid-inv: #D7EED7; /* 10.58:1 na base, 6.90 no topo */
--accent-inv: #9BE39B; /* 8.58:1 na base, 5.59 no topo */
color: var(--text-hi-inv);
padding-block: var(--sp-9) var(--sp-7); }
.footer__grid { display: grid; gap: var(--sp-7); }
.footer__brandline { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; }
.footer h2 { font-family: var(--font-text); font-weight: 600;
font-size: var(--fs-label); letter-spacing: var(--tr-label);
text-transform: uppercase; color: var(--text-mid-inv); margin-bottom: var(--sp-3); }
.footer ul { display: grid; }
/* Alvo de toque generoso: o publico tem 30 a 60 anos e boa parte usa oculos
para perto. 18px de altura passa no minimo da AA, mas nao ajuda ninguem. */
.footer a { display: inline-flex; align-items: center; min-height: 40px;
padding-block: var(--sp-1);
color: var(--text-hi-inv); text-decoration: none; font-size: var(--fs-small); }
.footer a:hover { color: var(--accent-inv); text-decoration: underline;
text-underline-offset: 4px; }
/* disclaimer FDA em bloco com borda (specs/site.md §3.2) */
.disclaimer {
margin-top: var(--sp-8);
border: 1px solid rgba(255, 255, 255, .34);
border-radius: var(--r-md);
padding: var(--sp-5);
font-size: var(--fs-small);
color: var(--text-mid-inv);
max-width: var(--measure);
}
.footer__legal { margin-top: var(--sp-7); padding-top: var(--sp-5);
border-top: 1px solid rgba(255, 255, 255, .20);
font-size: var(--fs-caption); color: var(--text-mid-inv);
display: grid; gap: var(--sp-2); }
@media (min-width: 600px) { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--sp-8); } }
/* --------------------------------------------------------------------------
Espaco para a sticky bar nao cobrir o rodape no mobile
-------------------------------------------------------------------------- */
@media (max-width: 899px) {
body { padding-bottom: calc(var(--stickybar-h) + env(safe-area-inset-bottom)); }
}
/* --------------------------------------------------------------------------
PAGINAS DE APOIO (texto puro)
-------------------------------------------------------------------------- */
.legal { padding-block: var(--section-y); }
.legal h1 { margin-bottom: var(--sp-5); }
.legal h2 { font-size: var(--fs-h3); margin-top: var(--sp-8); margin-bottom: var(--sp-3); }
.legal p, .legal li { color: var(--text-mid); max-width: var(--measure); }
.legal p + p { margin-top: var(--sp-4); }
.legal ul { margin-top: var(--sp-3); display: grid; gap: var(--sp-2); }
.legal li { padding-left: var(--sp-5); position: relative; }
.legal li::before { content: ''; position: absolute; left: var(--sp-2); top: 10px;
width: 5px; height: 5px; border-radius: var(--r-full);
background: var(--olive-600); }
/* --------------------------------------------------------------------------
5. FAIXA DE ESTILO DE VIDA (D154, em movimento desde D155)
Nove fotos numa esteira que anda sozinha e obedece ao dedo. Sao imagens
ilustrativas: nao ha nome nem citacao associada a nenhuma delas, e nao
pode haver — ver o comentario no HTML.
A mecanica esta em assets/js/esteira.js, e o motivo de ela poder se mexer
quando o resto da pagina nao pode esta em D155.
-------------------------------------------------------------------------- */
.esteira {
/* design.md 6: subtitulo -> conteudo e --sp-7. Estava em --sp-6, o que
colava a faixa no texto e fazia o bloco de cabecalho parecer parte dela. */
margin-top: var(--sp-7);
overflow-x: auto;
overflow-y: hidden;
/* o arrasto horizontal nao pode virar "voltar pagina" no navegador de app */
overscroll-behavior-x: contain;
/* a barra e ruido numa faixa decorativa; o corte na margem e o cursor de
mao ja dizem que da para puxar — a marquee dos pilares tambem nao tem */
scrollbar-width: none;
-ms-overflow-style: none;
cursor: grab;
-webkit-user-select: none;
user-select: none;
}
.esteira::-webkit-scrollbar { display: none; }
.esteira[data-agarrado] { cursor: grabbing; }
.esteira__pista { display: flex; width: max-content; }
.esteira__lista {
display: flex;
gap: var(--sp-2);
/* mantem o respiro na emenda entre a lista e a copia */
padding-inline-end: var(--sp-2);
margin: 0;
list-style: none;
}
.esteira__item {
flex: 0 0 auto;
/* ~2,2 retratos visiveis a 393px, que e o enquadramento da referencia:
a foto cortada na margem e o que diz que a faixa continua */
width: clamp(160px, 46vw, 260px);
}
.esteira__item img {
display: block;
width: 100%; height: auto;
aspect-ratio: 3 / 4;
object-fit: cover;
border-radius: var(--r-md);
/* o arrasto tem que pegar a FAIXA; sem isto o mouse comeca a arrastar a
imagem como se fosse um arquivo, e o gesto morre no primeiro pixel */
pointer-events: none;
-webkit-user-drag: none;
}
/* Movimento reduzido: a faixa nao anda sozinha e volta a ser exatamente o
que D138b tinha aprovado — arrasto com encaixe nativo (design.md §12.4). */
.esteira[data-estatico="true"] { scroll-snap-type: x mandatory; }
.esteira[data-estatico="true"] .esteira__item { scroll-snap-align: center; }
@media (min-width: 600px) {
.esteira__lista { gap: var(--sp-3); padding-inline-end: var(--sp-3); }
}
/* --------------------------------------------------------------------------
EVERYTHING ON THE LABEL (D189/D190)
-------------------------------------------------------------------------- */
/* A foto carrega o proprio fundo (#EEECE8), que separa 1,18 do cartao branco.
E por isso que ela nao leva contorno nem tile: o pote e branco e a secao e
um cartao branco, entao sem esse fundo ele sumiria (P08). */
.label__shot {
display: block;
width: min(200px, 58%);
height: auto;
margin: var(--sp-6) auto 0;
border-radius: var(--r-md); /* design.md 9: imagem dentro de card usa --r-md */
}
@media (min-width: 900px) { .label__shot { width: 240px; } }
|