@charset "utf-8"; /* =========================================================================== Gameta's Bank — folha de estilo única --------------------------------------------------------------------------- 01 fontes 06 seção e cabeçalho 11 formulários 02 tokens 07 botões 12 banco de doadoras 03 reset 08 cartões e grades 13 blog 04 tipografia 09 processo e cadeia 14 rodapé 05 layout 10 blocos de apoio 15 movimento e respostas --------------------------------------------------------------------------- Sistema: uma razão de escala (1,335), três larguras centradas no mesmo eixo, uma grade de cartões, uma proporção de duas colunas, três sombras, três raios. =========================================================================== */ /* 01 · fontes ------------------------------------------------------------- */ @font-face { font-family: 'Nunito'; src: url('../fonts/nunito-latin.woff2') format('woff2'); font-weight: 200 1000; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Nunito Sans'; src: url('../fonts/nunitosans-latin.woff2') format('woff2'); font-weight: 200 1000; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* 02 · tokens ------------------------------------------------------------- */ :root { /* Cor — tirada do logotipo do cliente, não escolhida aqui. O roxo #5A315D é a palavra "Gameta's"; o verde-sálvia #A8B9A5 é "Bank"; e as pétalas da corona radiata trazem malva #9F87A1, sálvia clara #CCD6CA e cinza #A4A5A3. O neutro leva viés violeta para parecer escolhido e não herdado. O sálvia é claro demais para texto pequeno: só entra como superfície e como acento — quem carrega texto é --salvia-texto. */ --tinta: #2A2130; --tinta-72: #565060; --tinta-54: #6E687A; --ameixa: #3A1E3D; --ameixa-fundo: #2C142F; --roxo: #5A315D; --roxo-escuro: #432146; --malva: #9F87A1; --malva-clara: #C9B4CB; /* Segunda cor: o verde-sálvia do "Bank". Entra em tinta de ícone, em superfície e em destaque — nunca como texto pequeno (só o --salvia-texto passa AA). */ --salvia: #A8B9A5; --salvia-texto: #5E7358; --salvia-suave: #EEF2ED; --roxo-suave: #F2ECF3; --membrana: #DCE4DA; --membrana-clara: #EEF2ED; --osso: #FBF9FB; --areia: #F4F0F4; --branco: #fff; --linha: #E5DEE6; /* cor semântica — separada da cor de marca, como manda a boa prática: erro é validação de formulário; aviso é pendência e indisponibilidade */ --erro: #A32B1F; --erro-campo: rgba(163, 43, 31, .09); --aviso: #8A5A16; --aviso-campo: rgba(138, 90, 22, .1); /* Sobre a ameixa o âmbar escuro dá 2,85:1 e some. A pendência precisa ser lida justamente onde o fundo é escuro. */ --aviso-claro: #E8B96A; /* Verde do WhatsApp, escurecido ate o branco passar AA em cima dele. O #25D366 da marca deles da 2,2:1 com texto branco -- no rotulo do botao flutuante isso e texto pequeno ilegivel, nao estilo. */ --zap: #17743C; --zap-escuro: #115C30; /* superfícies e fios */ --campo-roxo: rgba(90, 49, 93, .05); --campo-roxo-forte: rgba(90, 49, 93, .1); --campo-claro: rgba(255, 255, 255, .08); --fio: #E5DEE6; /* fio do cartao: um degrau mais fundo que --fio, para a aresta se ver sobre branco e sobre osso sem virar moldura. */ --fio-cartao: #DFD6E1; --fio-claro: rgba(255, 255, 255, .16); /* tipografia — duas sans. Libre Franklin (linhagem Franklin Gothic) dá o tom institucional dos títulos; IBM Plex Sans, desenhada para engenharia, sustenta o corpo técnico. */ --titulo: 'Nunito', 'Segoe UI', system-ui, -apple-system, sans-serif; --sans: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --micro: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Escala de razão única 1,28, ancorada no corpo de 18px: 48,4 / 37,8 / 29,5 / 23 / 18 / 15,9 / 14 / 12,4. A sans institucional ocupa mais largura que a serifa anterior: o degrau de 62px saiu, e o título de página passou a 48,4. Proibido clamp avulso fora destes tokens. */ --d1: clamp(2.05rem, 1.49rem + 2vw, 3.025rem); --d2: clamp(1.75rem, 1.4rem + 1.25vw, 2.363rem); --d3: clamp(1.5rem, 1.38rem + .43vw, 1.844rem); --d4: 1.4375rem; --d5: 1.125rem; --d5m: .995rem; /* 15,9 — meio-degrau (√1,28): texto de apoio e de cartão */ --d6: .875rem; /* 14 — rótulos, legendas, texto legal */ /* 13 — selos e pastilhas. Era 12,4: passava no contraste mas é o degrau que carrega os "olhos" de secção, em maiúsculas e com tracking, que é a combinação que mais custa a ler em tamanho pequeno. */ --d7: .8125rem; /* ritmo */ --e1: .5rem; --e2: .75rem; --e3: 1rem; --e4: 1.5rem; --e5: 2rem; --e6: 3.75rem; --e7: 5.5rem; /* Altura única de herói em todas as páginas — a medida saiu do herói de doação compartilhada (migalhas + título de 3 linhas + lede de 4 + botões). Quem escrever um título ou lede mais longo estoura esta medida: é para ser sentido, não contornado. */ --h-heroi: 41.375rem; /* Respiro: o capítulo subiu de 7,25rem para 8,5rem e o parágrafo de 5,75 para 6,75. O piso também subiu — no telemóvel era onde as secções mais se encostavam umas nas outras. */ --pad-capitulo: clamp(4.25rem, 7vw, 8.5rem); --pad-paragrafo: clamp(3.25rem, 5.2vw, 6.75rem); /* medida e larguras — três, todas centradas no mesmo eixo. A RÉGUA É DE 1200px (75rem). Era 74rem, e a diferença de 16px não é o ponto: o ponto é que o TEXTO não usava a régua. O cabeçalho de secção vivia em 630px dentro de um trilho de 1184 — metade da largura vazia à direita e o título a quebrar em três linhas. Um título empilhado ao lado de um vazio não é respiro, é desalinho. Daí DUAS medidas, e não uma: --medida corpo corrido (prosa, artigo, respostas do FAQ). Sobe de 35em para 38em — ~78 caracteres por linha, ainda dentro do que se lê sem perder a volta. --medida-larga título e lede de secção. São duas a quatro linhas de tipo grande, não corpo corrido: aí a medida de leitura não protege nada e só empilha. */ --w-lg: 75rem; --w-md: 56rem; --w-sm: 41rem; --medida: 38em; --medida-larga: 52rem; /* grade de cartões — uma só em todo o site */ --col-cartao: 17.5rem; --gap-cartao: 1.25rem; /* duas colunas — uma proporção só */ --duas-colunas: 1.12fr .88fr; /* cantos generosos: a superfície acolhe em vez de recortar */ --r1: 6px; --r2: 16px; --r3: 24px; --r-pill: 999px; --sombra1: 0 2px 8px rgba(42, 33, 48, .05); --sombra2: 0 4px 10px rgba(42, 33, 48, .05), 0 18px 40px -20px rgba(42, 33, 48, .22); --sombra-cartao: 0 1px 2px rgba(42, 33, 48, .04), 0 8px 22px -14px rgba(42, 33, 48, .18); --sombra3: 0 26px 60px -28px rgba(42, 33, 48, .38); --transicao: 260ms cubic-bezier(.22, .61, .36, 1); } /* 03 · reset -------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--branco); color: var(--tinta); font-family: var(--sans); font-size: var(--d5); line-height: 1.65; font-optical-sizing: auto; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; } ul, ol { padding: 0; list-style: none; } img, picture, svg, video { display: block; max-width: 100%; } img { height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } input, select, textarea { font: inherit; color: inherit; } svg { flex: none; } :focus-visible { outline: 2px solid var(--roxo); outline-offset: 3px; border-radius: var(--r1); } .secao--escuro :focus-visible, .rodape :focus-visible { outline-color: var(--malva); } .sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .pular { position: absolute; left: 50%; top: 0; z-index: 200; transform: translate(-50%, -110%); padding: .8rem 1.4rem; background: var(--ameixa); color: var(--branco); border-radius: 0 0 var(--r2) var(--r2); font-size: var(--d6); font-family: var(--micro); } .pular:focus { transform: translate(-50%, 0); } /* 04 · tipografia --------------------------------------------------------- */ h1, h2, h3, h4 { font-family: var(--titulo); font-weight: 800; line-height: 1.18; letter-spacing: -.012em; text-wrap: balance; } h3, h4 { font-weight: 700; letter-spacing: -.006em; } /* Piso da escala: nenhum título pode cair no tamanho padrão do navegador (21,1px), que não pertence à régua. Os componentes sobrescrevem à vontade. */ h1 { font-size: var(--d1); } h2 { font-size: var(--d2); } h3 { font-size: var(--d4); } h4 { font-size: var(--d5); } p { text-wrap: pretty; } strong { font-weight: 600; } /* Rótulo de seção: pastilha tingida. Sem numeração decorativa — a numeração antiga (01 —, 02 —) sugeria uma sequência que não existia. */ .olho, .cabecalho__olho, .cta__olho, .banner__olho { display: inline-block; padding: .4rem .95rem; border-radius: var(--r-pill); background: var(--roxo-suave); font-family: var(--micro); font-size: var(--d7); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--roxo); margin-bottom: var(--e3); } .secao--escuro .cabecalho__olho, .cta__olho, .banner__olho { /* malva sobre a pastilha dá 3,58:1 em corpo 12,4 — sobe para malva-clara */ background: rgba(159, 135, 161, .16); color: var(--malva-clara); } .secao--osso .cabecalho__olho { background: var(--branco); } .destaque { color: var(--roxo); } .secao--escuro .destaque { color: var(--malva); } /* Ligação em texto corrido: sublinhado fino que engorda no hover. */ .prosa a, .rodape__aviso a, .campo label a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; text-decoration-color: rgba(90, 49, 93, .45); transition: text-decoration-color var(--transicao); } .prosa a:hover, .campo label a:hover { text-decoration-color: var(--roxo); } .prosa { max-width: var(--medida); } .prosa > * + * { margin-top: var(--e4); } .prosa h2 { font-size: var(--d3); margin-top: var(--e6); } .prosa h3 { font-size: var(--d4); margin-top: var(--e5); } .prosa ul { display: grid; gap: var(--e2); } .prosa ul li { position: relative; padding-left: 1.4rem; } .prosa ul li::before { content: ''; position: absolute; left: .25rem; top: .72em; width: 6px; height: 6px; border-radius: 50%; background: var(--roxo); opacity: .55; } .prosa ol { display: grid; gap: var(--e2); counter-reset: p; } .prosa ol li { position: relative; padding-left: 1.9rem; counter-increment: p; } .prosa ol li::before { content: counter(p, decimal-leading-zero); position: absolute; left: 0; top: .1em; font-family: var(--micro); font-size: var(--d6); color: var(--roxo); } /* 05 · layout ------------------------------------------------------------- */ .trilho { width: min(100% - 2.5rem, var(--w-lg)); margin-inline: auto; } .trilho--md { width: min(100% - 2.5rem, var(--w-md)); } .trilho--sm { width: min(100% - 2.5rem, var(--w-sm)); } .secao { padding-block: var(--pad-capitulo); position: relative; } .secao--paragrafo { padding-block: var(--pad-paragrafo); } .secao--branco { background: var(--branco); } .secao--osso { background: var(--osso); } .secao--membrana { background: var(--membrana-clara); } .secao--escuro { background: var(--ameixa); color: var(--membrana); } .secao--escuro h1, .secao--escuro h2, .secao--escuro h3 { color: var(--branco); } /* cadência: mesmo fundo seguido = parágrafo, não capítulo */ .secao--branco + .secao--branco, .secao--osso + .secao--osso { padding-top: 0; } /* motivo da marca: a corona radiata como textura das faixas escuras */ .secao--escuro::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 12% 18%, rgba(159, 135, 161, .1), transparent 42%), radial-gradient(circle at 88% 82%, rgba(159, 135, 161, .07), transparent 46%); } .secao--escuro > * { position: relative; } .fluxo-v > * + * { margin-top: var(--e4); } .bloco-flow { margin-top: var(--e6) !important; } .bloco-solto { margin-top: var(--e7) !important; } .duas { display: grid; grid-template-columns: var(--duas-colunas); gap: clamp(2rem, 4vw, 4rem); align-items: start; } .duas--inverso .duas__principal { order: 2; } .duas--centro { align-items: center; } /* Quando uma coluna é muito mais alta que a outra, centrar a curta deixa um vão parado enquanto a alta rola. A curta passa a acompanhar a rolagem — quem decide é o JS, que mede as duas (ver gametas.js, "colunas"). */ .duas--acompanha { align-items: start; } .duas__fixo { position: sticky; top: calc(5.25rem + var(--e4)); } /* 06 · seção e cabeçalho -------------------------------------------------- */ .cabecalho { max-width: var(--medida-larga); } .cabecalho--centro { max-width: 50rem; margin-inline: auto; text-align: center; } .cabecalho__titulo { font-size: var(--d2); } .cabecalho__texto { margin-top: var(--e3); font-size: var(--d4); line-height: 1.5; color: var(--tinta-72); } .secao--escuro .cabecalho__texto { color: var(--malva-clara); } .cabecalho + * { margin-top: var(--e6); } /* cabeçalho do site ------------------------------------------------------- */ .cabecalho-site { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, .92); backdrop-filter: blur(14px); transition: box-shadow var(--transicao), background var(--transicao); } .cabecalho-site.rolou { box-shadow: 0 1px 0 var(--fio), 0 14px 30px -26px rgba(26, 12, 28, .5); } .cabecalho-site__interno { display: flex; align-items: center; gap: var(--e4); min-height: 5.25rem; } /* O logotipo é a arte do cliente, não um lockup remontado em CSS: a altura manda, a largura acompanha. */ .logo { display: flex; align-items: center; flex: none; } .logo__img { height: 34px; width: auto; transition: opacity var(--transicao); } .logo:hover .logo__img { opacity: .82; } .logo--rodape .logo__img { height: 40px; } .menu { margin-left: auto; } .menu__lista { display: flex; align-items: center; gap: .2rem; } .menu__item { position: relative; } .menu__link { display: flex; align-items: center; gap: .3rem; padding: .6rem .7rem; border-radius: var(--r1); font-size: var(--d5m); color: var(--tinta-72); white-space: nowrap; transition: color var(--transicao), background var(--transicao); } .menu__link:hover { color: var(--ameixa); background: var(--campo-roxo); } .menu__link.esta-aqui { color: var(--ameixa); font-weight: 500; } .menu__link.esta-aqui::after { content: ''; position: absolute; left: .7rem; right: .7rem; bottom: .18rem; height: 2px; background: var(--roxo); border-radius: 2px; } .menu__chevron { width: 15px; height: 15px; transform: rotate(90deg); opacity: .6; transition: transform var(--transicao); } .menu__botao[aria-expanded="true"] .menu__chevron { transform: rotate(-90deg); } .menu__selo { margin-left: .4rem; padding: .12rem .42rem; border-radius: var(--r-pill); background: var(--campo-roxo-forte); color: var(--roxo); font-family: var(--micro); font-size: var(--d7); font-weight: 500; letter-spacing: .02em; } .submenu { position: absolute; top: calc(100% + .4rem); left: 50%; transform: translateX(-50%); width: 34rem; padding: 1rem; border-radius: var(--r2); background: var(--branco); box-shadow: var(--sombra2); } .submenu[hidden] { display: none; } .submenu ul { display: grid; grid-template-columns: 1fr 1fr; gap: .15rem; } .submenu a { display: block; padding: .62rem .7rem; border-radius: var(--r1); transition: background var(--transicao); } .submenu a:hover { background: var(--campo-roxo); } .submenu__t { display: block; font-size: var(--d5m); font-weight: 500; color: var(--ameixa); } .submenu__r { display: block; font-size: var(--d6); color: var(--tinta-54); margin-top: .1rem; } .submenu__rodape { margin-top: .7rem; padding: .7rem .7rem 0; border-top: 1px solid var(--fio); } .cabecalho-site__acoes { display: flex; align-items: center; gap: .6rem; flex: none; } .hamburguer { display: none; width: 2.9rem; height: 2.9rem; border-radius: var(--r1); align-items: center; justify-content: center; color: var(--ameixa); } .hamburguer__fechar { display: none; } .hamburguer[aria-expanded="true"] .hamburguer__abrir { display: none; } .hamburguer[aria-expanded="true"] .hamburguer__fechar { display: block; } .movel { display: none; } /* 07 · botões ------------------------------------------------------------- */ .botao { display: inline-flex; align-items: center; gap: .55rem; padding: .95rem 1.5rem; border-radius: var(--r-pill); font-family: var(--micro); font-size: var(--d5m); font-weight: 500; letter-spacing: -.005em; transition: background var(--transicao), color var(--transicao), transform var(--transicao), box-shadow var(--transicao); } .botao__seta { width: 18px; height: 18px; transition: transform var(--transicao); } .botao:hover .botao__seta { transform: translateX(3px); } .botao--principal { background: var(--roxo); color: var(--branco); } .botao--principal:hover { background: var(--roxo-escuro); box-shadow: var(--sombra1); } .botao--secundario { background: var(--campo-roxo-forte); color: var(--roxo-escuro); } .botao--secundario:hover { background: rgba(90, 49, 93, .16); } /* Sobre a ameixa, malva com texto ameixa dá 5,2:1 — passa raspando e, pior, é roxo sobre roxo: sem diferença de matiz, o texto some. Branco sólido com o roxo da marca dá 10,3:1 e é o par que o logotipo já usa. */ .botao--claro { background: var(--branco); color: var(--roxo); } .botao--claro:hover { background: var(--salvia-suave); box-shadow: var(--sombra1); } /* alvo de toque confortável mesmo sem fundo visível */ .botao--texto { padding: .45rem 0; background: none; color: var(--roxo); } .botao--texto .botao__seta { width: 17px; height: 17px; } .botao--texto:hover { color: var(--roxo-escuro); } .secao--escuro .botao--texto, .submenu .botao--texto { color: var(--roxo); } .secao--escuro .botao--texto { color: var(--malva); } .botao--compacto { padding: .68rem 1.15rem; font-size: var(--d5m); } .secao--escuro .botao--secundario, .banner .botao--secundario { background: rgba(255, 255, 255, .12); color: var(--branco); box-shadow: inset 0 0 0 1px var(--fio-claro); } .secao--escuro .botao--secundario:hover, .banner .botao--secundario:hover { background: rgba(255, 255, 255, .2); } .banner .botao--texto { color: var(--malva); } .botoes { display: flex; flex-wrap: wrap; gap: .75rem; } .botoes--centro { justify-content: center; } /* 08 · cartões e grades --------------------------------------------------- */ .grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--col-cartao), 1fr)); gap: var(--gap-cartao); } .grade--2 { grid-template-columns: repeat(2, 1fr); } .grade--3 { grid-template-columns: repeat(3, 1fr); } .grade--4 { grid-template-columns: repeat(4, 1fr); } .cartao { display: flex; flex-direction: column; padding: 2rem 1.75rem 2.1rem; border-radius: var(--r3); background: var(--branco); /* O fio precisa existir. Cartão branco sobre fundo branco com sombra a 5% não tem aresta nenhuma — a grelha lê como texto solto, não como cartões. O fio é o mais suave que ainda se vê (1,4:1) e a sombra dá o levantar. */ border: 1px solid var(--fio-cartao); box-shadow: var(--sombra-cartao); transition: border-color var(--transicao), box-shadow var(--transicao), transform var(--transicao); } .secao--escuro .cartao { background: var(--campo-claro); border-color: var(--fio-claro); box-shadow: none; } /* Ícone em disco tingido — a assinatura visual do site. O disco alterna verde/coral pela posição do cartão na grade, para a grelha não ficar monocromática. */ .cartao__icone { display: grid; place-items: center; flex: none; width: 3.75rem; height: 3.75rem; margin-bottom: 1.15rem; border-radius: 50%; background: var(--roxo-suave); color: var(--roxo); transition: background var(--transicao), color var(--transicao), transform var(--transicao); } .cartao__icone svg { width: 32px; height: 32px; } .grade > *:nth-child(3n+2) .cartao__icone { background: var(--salvia-suave); color: var(--salvia-texto); } .cartao--link:hover .cartao__icone { transform: scale(1.06); } .secao--escuro .cartao__icone { background: rgba(159, 135, 161, .16); color: var(--malva); } .secao--escuro .grade > *:nth-child(3n+2) .cartao__icone { background: rgba(168, 185, 165, .2); color: #CBD8C7; } .cartao__n { font-family: var(--micro); font-size: var(--d6); color: var(--roxo); margin-bottom: .6rem; } .cartao__titulo { font-size: var(--d4); min-height: 2.2em; } .cartao__texto { margin-top: .6rem; font-size: var(--d5m); color: var(--tinta-72); } .secao--escuro .cartao__texto { color: var(--malva-clara); } .cartao__lista { margin-top: .9rem; display: grid; gap: .45rem; font-size: var(--d5m); } .cartao__lista li { display: flex; gap: .6rem; align-items: start; } .cartao__check { flex: none; box-sizing: content-box; width: 13px; height: 13px; padding: 4px; margin-top: .18rem; border-radius: 50%; background: var(--roxo-suave); color: var(--roxo); stroke-width: 2.6; } .secao--escuro .cartao__check { background: rgba(159, 135, 161, .18); color: var(--malva); } .cartao__link { display: inline-flex; align-items: center; gap: .35rem; margin-top: auto; padding-top: 1.1rem; font-family: var(--micro); font-size: var(--d6); font-weight: 500; color: var(--roxo); } .cartao__link svg { width: 16px; height: 16px; transition: transform var(--transicao); } .cartao--link:hover { border-color: var(--roxo); box-shadow: var(--sombra2); transform: translateY(-4px); } .cartao--link:hover .cartao__link svg { transform: translateX(3px); } .secao--escuro .cartao--link:hover { background: rgba(255, 255, 255, .12); border-color: var(--malva); } .secao--escuro .cartao__link { color: var(--malva-clara); } /* cartão de valor: sem caixa, só campo tingido e régua */ .valores { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0; } .valor { padding: 1.6rem 1.5rem 1.6rem 0; } .valor + .valor { border-top: 1px solid var(--fio); } .valor__topo { display: flex; align-items: center; gap: .7rem; } .valor__icone { display: grid; place-items: center; flex: none; width: 3rem; height: 3rem; border-radius: 50%; background: var(--roxo-suave); color: var(--roxo); } .valor:nth-child(2n) .valor__icone { background: var(--salvia-suave); color: var(--salvia-texto); } .valor__titulo { font-size: var(--d4); } .valor__texto { margin-top: .5rem; font-size: var(--d5m); color: var(--tinta-72); max-width: 30em; } /* 09 · processo, fluxo e cadeia ------------------------------------------- */ /* Etapas: disco numerado ligado por um fio contínuo. A numeração aqui é informação — existe uma sequência de verdade — ao contrário dos rótulos de seção, onde ela saiu. */ .etapas { display: grid; gap: 0; position: relative; } .etapas__item { display: grid; grid-template-columns: 3.6rem 1fr; gap: var(--e4); padding-block: 1.5rem; position: relative; } .etapas__marca { position: relative; } /* fio conector entre discos */ .etapas__item:not(:last-child) .etapas__marca::after { content: ''; position: absolute; left: 50%; top: 3.6rem; bottom: -1.5rem; width: 2px; transform: translateX(-50%); background: var(--roxo-suave); } .secao--escuro .etapas__item:not(:last-child) .etapas__marca::after { background: rgba(159, 135, 161, .2); } .etapas__n { display: grid; place-items: center; width: 3.6rem; height: 3.6rem; border-radius: 50%; background: var(--roxo); color: var(--branco); font-family: var(--titulo); font-size: var(--d5); font-weight: 800; line-height: 1; } .secao--escuro .etapas__n { background: var(--malva); color: var(--ameixa-fundo); } .etapas__titulo { font-size: var(--d3); padding-top: .55rem; } .etapas__ator { display: inline-block; margin-top: .6rem; padding: .2rem .7rem; border-radius: var(--r-pill); background: var(--salvia-suave); color: var(--salvia-texto); font-family: var(--micro); font-size: var(--d7); font-weight: 700; } .secao--escuro .etapas__ator { background: rgba(168, 185, 165, .22); color: #CBD8C7; } .etapas__texto { margin-top: .7rem; color: var(--tinta-72); max-width: var(--medida); } .secao--escuro .etapas__texto { color: var(--malva-clara); } /* fluxo agrupado (o diagrama da seção 6 do projeto) */ .fluxo { display: grid; gap: 1.1rem; } .fluxo__faixa { display: grid; grid-template-columns: 15rem 1fr; gap: var(--e4); padding: 1.4rem 1.5rem; border-radius: var(--r2); background: var(--campo-roxo); } .secao--escuro .fluxo__faixa { background: var(--campo-claro); } .fluxo__rotulo h3 { font-size: var(--d4); } .fluxo__rotulo p { margin-top: .3rem; font-size: var(--d5m); color: var(--tinta-72); } .secao--escuro .fluxo__rotulo p { color: var(--malva-clara); } .fluxo__nos { display: flex; flex-wrap: wrap; gap: .5rem; align-content: start; } .fluxo__no { display: inline-flex; align-items: baseline; gap: .45rem; padding: .5rem .85rem; border-radius: var(--r-pill); background: var(--branco); font-size: var(--d5m); } .secao--escuro .fluxo__no { background: rgba(255, 255, 255, .1); } .fluxo__ordem { font-family: var(--micro); font-size: var(--d7); color: var(--roxo); } /* O nó do fluxo tem branco translúcido por cima da ameixa: a superfície sobe para rgb(92,69,94) e o malva cai a 2,6:1. A cor de corpo da seção dá 6,5:1. */ .secao--escuro .fluxo__ordem { color: var(--membrana); } /* cadeia de rastreabilidade: a espinha vertical */ .cadeia { display: grid; position: relative; } /* O trilho e os elos nascem com a cor de fundo claro e são invertidos dentro de .secao--escuro. Ao contrário — como estava — a cadeia numa seção branca ficava com texto malva-clara sobre branco, 1,9:1: ilegível. */ .cadeia::before { content: ''; position: absolute; left: 1.4rem; top: 1.8rem; bottom: 1.8rem; width: 2px; background: linear-gradient(var(--roxo), rgba(90, 49, 93, .18)); } .secao--escuro .cadeia::before { background: linear-gradient(var(--malva), rgba(159, 135, 161, .18)); } .cadeia__elo { display: grid; grid-template-columns: 2.8rem 1fr; gap: var(--e4); padding-block: 1.15rem; } .cadeia__no { position: relative; z-index: 1; display: grid; justify-items: center; gap: .3rem; } .cadeia__icone { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 50%; background: var(--roxo-suave); color: var(--roxo); box-shadow: 0 0 0 6px var(--branco); } .cadeia__icone svg { width: 22px; height: 22px; } .secao--osso .cadeia__icone { box-shadow: 0 0 0 6px var(--osso); } .secao--escuro .cadeia__icone { background: rgba(159, 135, 161, .16); color: var(--malva); box-shadow: 0 0 0 6px var(--ameixa); } .cadeia__ordem { font-family: var(--micro); font-size: var(--d7); color: var(--roxo); opacity: .75; } .secao--escuro .cadeia__ordem { color: var(--malva-clara); opacity: 1; } .cadeia__rotulo { font-size: var(--d4); } .cadeia__texto { margin-top: .25rem; color: var(--tinta-72); max-width: 34em; font-size: var(--d5m); } .secao--escuro .cadeia__texto { color: var(--malva-clara); } /* 10 · blocos de apoio ---------------------------------------------------- */ .figura { position: relative; overflow: hidden; border-radius: var(--r3); } .figura img { width: 100%; height: 100%; object-fit: cover; } .figura--alta { aspect-ratio: 3 / 4; } .figura--larga { aspect-ratio: 16 / 9; } .figura--fita { aspect-ratio: 21 / 9; } .figura--quadrada { aspect-ratio: 1 / 1; } .figura__legenda { margin-top: .7rem; font-family: var(--micro); font-size: var(--d6); color: var(--tinta-54); } .secao--escuro .figura__legenda { color: var(--malva); opacity: .8; } .citacao { position: relative; max-width: 30em; font-family: var(--titulo); font-size: var(--d3); line-height: 1.28; letter-spacing: -.012em; } .citacao p::before { content: '“'; position: absolute; left: -.55em; top: -.08em; color: var(--roxo); opacity: .4; font-size: 1.6em; } .secao--escuro .citacao p::before { color: var(--malva); opacity: .5; } .citacao cite { display: block; margin-top: var(--e3); font-family: var(--micro); font-size: var(--d6); font-style: normal; color: var(--tinta-54); } .secao--escuro .citacao cite { color: var(--malva); } .nota { display: flex; gap: 1rem; align-items: start; padding: 1.35rem 1.5rem; border-radius: var(--r2); background: var(--roxo-suave); font-size: var(--d5m); color: var(--tinta-72); } .secao--escuro .nota { background: var(--campo-claro); color: var(--malva-clara); } .nota__icone { display: grid; place-items: center; flex: none; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--branco); color: var(--roxo); } .secao--escuro .nota__icone { background: rgba(255, 255, 255, .12); color: var(--malva); } .pendente { display: inline-block; padding: .05rem .45rem; border-radius: var(--r1); background: var(--aviso-campo); color: var(--aviso); font-family: var(--micro); font-size: .82em; } .secao--escuro .pendente, .rodape .pendente { background: rgba(232, 185, 106, .16); color: var(--aviso-claro); } .checada { display: grid; gap: .75rem; } .checada--colunas { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: .75rem 1.5rem; } .checada li { display: flex; gap: .7rem; align-items: start; font-size: var(--d5m); } /* marca de verificação em disco: o mesmo vocabulário dos ícones */ .checada__check { flex: none; box-sizing: content-box; width: 15px; height: 15px; padding: 5px; margin-top: .12rem; border-radius: 50%; background: var(--roxo-suave); color: var(--roxo); stroke-width: 2.4; } .secao--escuro .checada__check { background: rgba(159, 135, 161, .18); color: var(--malva); } /* Moldura: bloco de cor deslocado atrás da fotografia. É o recurso que faz a imagem parecer composta e não colada. */ /* isolation cria o contexto de empilhamento: sem ele, o z-index:-1 dos blocos cai atrás do fundo da seção e eles simplesmente não aparecem */ .moldura { position: relative; isolation: isolate; } .moldura::before { content: ''; position: absolute; inset: auto auto -1.35rem -1.35rem; width: 62%; height: 62%; border-radius: var(--r3); background: var(--salvia-suave); z-index: -1; } .moldura::after { content: ''; position: absolute; inset: -1.35rem -1.35rem auto auto; width: 45%; height: 45%; border-radius: var(--r3); background: var(--roxo-suave); z-index: -1; } .moldura .figura { box-shadow: var(--sombra2); } /* selo/pilar horizontal sem caixa */ .pilares { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--e4); } .pilar__t { font-family: var(--titulo); font-size: var(--d4); font-weight: 600; color: var(--branco); display: block; } .secao--branco .pilar__t, .secao--osso .pilar__t { color: var(--ameixa); } .pilar__d { margin-top: .35rem; font-size: var(--d5m); color: var(--malva-clara); } .secao--branco .pilar__d, .secao--osso .pilar__d { color: var(--tinta-72); } .pilar { padding-top: .9rem; border-top: 2px solid var(--malva); } .secao--branco .pilar, .secao--osso .pilar { border-top-color: var(--roxo); } /* faixa de compromisso — negativas */ .negativas { display: grid; gap: 0; } .negativas li { padding: 1rem 0; font-family: var(--titulo); font-size: var(--d3); font-weight: 600; line-height: 1.2; color: var(--branco); letter-spacing: -.014em; } .negativas li + li { border-top: 1px solid var(--fio-claro); } /* acordeão */ .acordeao { border-top: 1px solid var(--fio); } .secao--escuro .acordeao { border-top-color: var(--fio-claro); } .acordeao__item { border-bottom: 1px solid var(--fio); } .secao--escuro .acordeao__item { border-bottom-color: var(--fio-claro); } .acordeao__p { display: flex; align-items: center; justify-content: space-between; gap: var(--e4); padding: 1.25rem 0; cursor: pointer; list-style: none; font-family: var(--titulo); font-size: var(--d4); font-weight: 600; line-height: 1.25; transition: color var(--transicao); } .acordeao__p::-webkit-details-marker { display: none; } .acordeao__p:hover { color: var(--roxo); } .secao--escuro .acordeao__p:hover { color: var(--malva); } .acordeao__sinal { flex: none; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--campo-roxo-forte); color: var(--roxo); transition: transform var(--transicao), background var(--transicao); } .secao--escuro .acordeao__sinal { background: rgba(159, 135, 161, .16); color: var(--malva); } .acordeao__item[open] .acordeao__sinal { transform: rotate(45deg); } .acordeao__r { padding-bottom: 1.4rem; max-width: var(--medida); color: var(--tinta-72); } .secao--escuro .acordeao__r { color: var(--malva-clara); } .acordeao__mais { margin-top: var(--e3); } /* migalhas */ .migalhas { padding-block: 1.1rem; background: var(--osso); } .migalhas ol { display: flex; flex-wrap: wrap; gap: .5rem; font-family: var(--micro); font-size: var(--d6); } .migalhas li { display: flex; gap: .5rem; color: var(--tinta-54); } .migalhas li + li::before { content: '/'; opacity: .45; } .migalhas a { color: var(--tinta-54); } .migalhas a:hover { color: var(--roxo); } .migalhas [aria-current] { color: var(--tinta); } /* CTA */ .cta__interno { text-align: center; } .cta__titulo { font-size: var(--d1); max-width: 24ch; margin-inline: auto; } .cta__texto { margin-top: var(--e3); margin-inline: auto; max-width: 44ch; font-size: var(--d4); line-height: 1.5; color: var(--malva-clara); } .secao--osso .cta__texto, .secao--branco .cta__texto { color: var(--tinta-72); } .cta__interno .botoes { margin-top: var(--e5); } /* A faixa de chamada da home leva o símbolo da marca ao fundo: a corona radiata centrada atrás da mensagem, sangrando por cima e por baixo, com o miolo aberto da marca a emoldurar o texto. Como na seção 02, é ::after — o ::before da faixa escura já carrega a textura em gradiente. */ .cta--marca { overflow: hidden; } .cta--marca > .trilho { position: relative; z-index: 1; } .cta--marca::after { content: ''; position: absolute; z-index: 0; pointer-events: none; left: 50%; top: 50%; right: auto; bottom: auto; translate: -50% -50%; /* maior que a faixa de propósito: as pétalas saem por cima e por baixo e o miolo aberto da marca fica com folga para a mensagem respirar dentro. */ width: min(58rem, 106%); aspect-ratio: 1; background: url(../img/marca-agua.svg) no-repeat center / contain; opacity: .085; } @media (max-width: 700px) { .cta--marca::after { width: min(30rem, 118%); opacity: .07; } } /* 11 · formulários -------------------------------------------------------- */ .form { padding: clamp(1.5rem, 3vw, 2.5rem); border-radius: var(--r3); background: var(--branco); box-shadow: var(--sombra2); } .secao--branco .form { background: var(--osso); box-shadow: none; } .form__titulo { font-size: var(--d3); } .form__texto { margin-top: .6rem; color: var(--tinta-72); font-size: var(--d5m); } .form__campos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem 1.1rem; margin-top: var(--e5); } .form__armadilha { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .campo { display: grid; gap: .38rem; } .campo--total { grid-column: 1 / -1; } .campo label { font-family: var(--micro); font-size: var(--d6); font-weight: 500; color: var(--tinta-72); } .campo__req { color: var(--erro); } .campo input, .campo select, .campo textarea { width: 100%; padding: .8rem .95rem; border-radius: var(--r1); background: var(--branco); border: 1px solid rgba(26, 12, 28, .16); /* 18px: abaixo de 16px o iOS dá zoom no campo ao focar */ font-size: var(--d5); transition: border-color var(--transicao), box-shadow var(--transicao); } .secao--branco .campo input, .secao--branco .campo select, .secao--branco .campo textarea { background: var(--branco); } .campo textarea { resize: vertical; min-height: 7rem; } .campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--roxo); box-shadow: 0 0 0 3px rgba(90, 49, 93, .16); } .campo__dica { font-family: var(--micro); font-size: var(--d6); color: var(--tinta-54); } .campo__erro { font-family: var(--micro); font-size: var(--d6); color: var(--erro); } .campo[data-invalido] input, .campo[data-invalido] select, .campo[data-invalido] textarea { border-color: var(--erro); box-shadow: 0 0 0 3px var(--erro-campo); } .campo--consent { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; gap: .2rem .7rem; margin-top: var(--e4); align-items: start; } .campo--consent input { width: 1.2rem; height: 1.2rem; margin-top: .18rem; accent-color: var(--roxo); } .campo--consent label { font-size: var(--d5m); line-height: 1.55; } .campo--consent .campo__erro { grid-column: 2; } .form__finalidade { margin-top: var(--e3); font-family: var(--micro); font-size: var(--d6); color: var(--tinta-54); max-width: 52ch; } .form__acoes { margin-top: var(--e4); } .form__estado { margin-top: var(--e3); font-size: var(--d5m); color: var(--roxo); } .form__estado:empty { margin: 0; } /* 12 · banco de doadoras (maquete) ---------------------------------------- */ .maquete { position: relative; } .maquete__aviso { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .85rem; border-radius: var(--r-pill); background: var(--aviso-campo); color: var(--aviso); font-family: var(--micro); font-size: var(--d6); font-weight: 500; margin-bottom: var(--e4); } .maquete__palco { position: relative; padding: clamp(1.2rem, 3vw, 2.2rem); border-radius: var(--r3); background: var(--osso); overflow: hidden; } .maquete__palco::after { content: ''; position: absolute; inset: auto 0 0 0; height: 24%; background: linear-gradient(transparent, var(--osso) 92%); pointer-events: none; } .secao--escuro .maquete__palco { background: rgba(255, 255, 255, .05); } .secao--escuro .maquete__palco::after { background: linear-gradient(transparent, var(--ameixa) 92%); } .filtros { display: grid; gap: 1rem; margin-bottom: 1.3rem; } .filtros__topo { display: flex; align-items: center; gap: .5rem; font-family: var(--micro); font-size: var(--d6); font-weight: 500; color: var(--tinta-72); } .filtros__icone { color: var(--roxo); } .filtros__aviso { margin-left: auto; padding: .15rem .5rem; border-radius: var(--r-pill); background: var(--campo-roxo-forte); color: var(--roxo); font-size: var(--d7); } .filtros__grupos { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; } .filtros__rotulo { font-family: var(--micro); font-size: var(--d6); color: var(--tinta-54); } .filtros__pastilhas { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .45rem; } .pastilha { padding: .34rem .7rem; border-radius: var(--r-pill); background: var(--branco); font-size: var(--d6); color: var(--tinta-72); } .pastilha--ativa { background: var(--roxo); color: var(--branco); } .secao--escuro .pastilha { background: rgba(255, 255, 255, .1); color: var(--malva-clara); } .secao--escuro .pastilha--ativa { background: var(--malva); color: var(--ameixa-fundo); } .perfis { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--gap-cartao); } .perfil { display: flex; flex-direction: column; gap: .9rem; padding: 1.2rem; border-radius: var(--r2); background: var(--branco); } .secao--escuro .perfil { background: rgba(255, 255, 255, .08); } .perfil__topo { display: flex; align-items: center; justify-content: space-between; gap: .5rem; } .perfil__codigo { font-family: var(--micro); font-size: var(--d5m); font-weight: 500; color: var(--ameixa); } .secao--escuro .perfil__codigo { color: var(--branco); } .perfil__selo { padding: .18rem .55rem; border-radius: var(--r-pill); font-family: var(--micro); font-size: var(--d7); font-weight: 500; } .perfil__selo--disponivel { background: var(--campo-roxo-forte); color: var(--roxo); } .perfil__selo--reservado { background: var(--aviso-campo); color: var(--aviso); } .perfil__ilustra { display: grid; place-items: center; padding: 1.1rem 0; border-radius: var(--r2); background: var(--membrana-clara); color: var(--roxo); } .secao--escuro .perfil__ilustra { background: rgba(159, 135, 161, .1); color: var(--malva); } .perfil__atributos { display: grid; gap: .4rem; } .perfil__atributo { display: flex; justify-content: space-between; gap: 1rem; font-size: var(--d6); } .perfil__atributo dt { color: var(--tinta-54); } .secao--escuro .perfil__atributo dt { color: var(--malva); opacity: .75; } .perfil__atributo dd { margin: 0; font-weight: 500; color: var(--tinta); text-align: right; } .secao--escuro .perfil__atributo dd { color: var(--branco); } .perfil__rodape { padding-top: .75rem; border-top: 1px solid var(--fio); font-family: var(--micro); font-size: var(--d6); color: var(--tinta-54); } .secao--escuro .perfil__rodape { border-top-color: var(--fio-claro); color: var(--malva); opacity: .8; } /* 13 · blog --------------------------------------------------------------- */ /* A listagem é uma só em três lugares: /blog/, categoria e busca — um recorte que se parece com outra coisa faz o visitante achar que mudou de site. O cartão herda as classes .post* do site estático; o que mudou é que agora traz foto e que o alvo de clique é o link do título esticado por ::after, para o nome do link ser o título e não o cartão inteiro lido em voz alta. */ .secao--blog .blog-barra + * { margin-top: var(--e6); } .secao--blog .post--destaque + .posts, .secao--blog .posts + .paginacao, .secao--blog .posts + .blog-volta { margin-top: var(--e6); } .secao--blog .cabecalho + .posts { margin-top: var(--e5); } .blog-volta { margin-top: var(--e5); } .posts { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: var(--e5); } .post { position: relative; display: flex; flex-direction: column; gap: .75rem; padding-top: 1.1rem; border-top: 2px solid var(--roxo); transition: transform var(--transicao); } .post__corpo { display: flex; flex-direction: column; gap: .75rem; flex: 1; } .post:hover { transform: translateY(-3px); } .post__meta { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; font-family: var(--micro); font-size: var(--d6); color: var(--tinta-54); } .post__cat { color: var(--roxo); font-weight: 500; } .post__titulo { font-size: var(--d3); } .post__titulo a { color: inherit; } .post:hover .post__titulo { color: var(--roxo); } .post__resumo { color: var(--tinta-72); font-size: var(--d5m); } .post__link { margin-top: auto; padding-top: .6rem; font-family: var(--micro); font-size: var(--d6); font-weight: 500; color: var(--roxo); display: inline-flex; align-items: center; gap: .35rem; } .post__link svg { width: 16px; height: 16px; } /* O alvo esticado. Fica no link do título, não num em volta de tudo. */ .post__alvo::after { content: ''; position: absolute; inset: 0; border-radius: var(--r2); } /* Com foto, a régua roxa desce para debaixo dela: por cima da imagem viraria uma moldura, e o cartão perderia a aresta que o identifica. */ .post--foto { border-top: 0; padding-top: 0; gap: 0; } .post--foto .post__corpo { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 2px solid var(--roxo); } .post__foto { display: block; overflow: hidden; border-radius: var(--r2); background: var(--areia); aspect-ratio: 16 / 9; } .post__foto picture { display: block; height: 100%; } /* Três classes de propósito: se um dia esta listagem for parar dentro de um contentor do Elementor, o `.elementor img { height: auto }` dele empata com uma regra de uma classe e ganha por vir depois. */ .post .post__foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 520ms cubic-bezier(.22, .61, .36, 1); } .post:hover .post__foto img { transform: scale(1.035); } /* O primeiro da primeira página ocupa a largura toda. */ .post--destaque { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.25rem, 3vw, 2.5rem); align-items: center; } .post--destaque .post__foto { aspect-ratio: 4 / 3; } .post--destaque .post__corpo { margin-top: 0; } .post--destaque .post__titulo { font-size: var(--d2); } .post--destaque.post--foto .post__corpo { border-top: 0; padding-top: 0; } .post--destaque:not(.post--foto) { display: flex; } /* --- barra: categorias e busca ------------------------------------------- */ .blog-barra { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; } .categorias { display: flex; flex-wrap: wrap; gap: .45rem; } .categorias a { padding: .42rem .9rem; border-radius: var(--r-pill); background: var(--campo-roxo); color: var(--roxo-escuro); font-family: var(--micro); font-size: var(--d6); transition: background var(--transicao), color var(--transicao); } .categorias a:hover, .categorias a[aria-current] { background: var(--roxo); color: var(--branco); } .busca { display: flex; gap: .5rem; align-items: center; padding: .5rem .5rem .5rem 1rem; min-width: 17rem; border: 1px solid var(--fio); border-radius: var(--r-pill); background: var(--branco); box-shadow: var(--sombra1); transition: border-color var(--transicao); } .busca:focus-within { border-color: var(--roxo); } .busca > svg { color: var(--roxo); flex: none; } .busca__campo { flex: 1; min-width: 0; border: 0; background: none; outline: none; font: inherit; font-size: var(--d5m); color: var(--tinta); } .busca__campo::placeholder { color: var(--tinta-54); } .busca__ok { flex: none; border: 0; cursor: pointer; padding: .5rem 1.05rem; border-radius: var(--r-pill); background: var(--roxo); color: var(--branco); font-family: var(--micro); font-size: var(--d6); font-weight: 500; transition: background var(--transicao); } .busca__ok:hover { background: var(--roxo-escuro); } /* --- paginação ------------------------------------------------------------ */ .paginacao ul { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; list-style: none; margin: 0; padding: 0; } .paginacao a, .paginacao span { display: grid; place-items: center; min-width: 2.6rem; height: 2.6rem; padding: 0 .85rem; border: 1px solid var(--fio); border-radius: var(--r-pill); background: var(--branco); font-family: var(--micro); font-size: var(--d6); color: var(--tinta-72); transition: background var(--transicao), color var(--transicao), border-color var(--transicao); } .paginacao a:hover { background: var(--campo-roxo); border-color: var(--roxo); color: var(--roxo); } .paginacao .current { background: var(--roxo); border-color: var(--roxo); color: var(--branco); } .paginacao .dots { background: none; border-color: transparent; } /* --- artigo -------------------------------------------------------------- */ .artigo__meta { margin-bottom: var(--e4); } .artigo__cabecalho { max-width: var(--w-sm); } .artigo__corpo { max-width: var(--medida); } .artigo__corpo > * + * { margin-top: var(--e4); } .artigo__corpo h2 { font-size: var(--d3); margin-top: var(--e6); } .artigo__lede { font-size: var(--d4); line-height: 1.5; color: var(--tinta-72); } .artigo__aviso { max-width: var(--medida); margin-top: var(--e6); } .partilha { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; max-width: var(--medida); margin-top: var(--e5); padding-top: var(--e4); border-top: 1px solid var(--fio); } .partilha__t { font-family: var(--micro); font-size: var(--d6); color: var(--tinta-54); } .partilha ul { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; } .partilha a { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .9rem; border-radius: var(--r-pill); background: var(--campo-roxo); color: var(--roxo-escuro); font-family: var(--micro); font-size: var(--d6); transition: background var(--transicao), color var(--transicao); } .partilha a:hover { background: var(--roxo); color: var(--branco); } .vizinhos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e4); } .vizinhos__lado { display: grid; align-content: start; gap: .3rem; padding: var(--e3) var(--e4); border: 1px solid var(--fio); border-radius: var(--r2); background: var(--osso); transition: background var(--transicao), border-color var(--transicao); } .vizinhos__lado:hover { background: var(--campo-roxo); border-color: var(--roxo); } .vizinhos__lado--prox { text-align: right; } .vizinhos__lado--prox:only-child { grid-column: 2; } .vizinhos__rotulo { font-family: var(--micro); font-size: var(--d6); color: var(--roxo); } .vizinhos__titulo { font-family: var(--titulo); font-size: var(--d5); line-height: 1.35; color: var(--tinta); } /* 14 · rodapé ------------------------------------------------------------- */ .rodape { background: var(--ameixa-fundo); color: var(--membrana); padding-block: var(--pad-paragrafo) 2.5rem; } .rodape__topo { display: grid; grid-template-columns: minmax(16rem, 21rem) 1fr; gap: clamp(2rem, 5vw, 5rem); padding-bottom: var(--e6); } .rodape__legenda { margin-top: var(--e3); font-size: var(--d5m); color: var(--malva-clara); max-width: 26em; } .rodape__canais { margin-top: var(--e4); display: grid; gap: .6rem; font-size: var(--d5m); } .rodape__canais li { display: flex; align-items: center; gap: .6rem; } .rodape__canais svg { color: var(--malva); width: 18px; height: 18px; flex: none; box-sizing: content-box; padding: 9px; border-radius: 50%; background: rgba(159, 135, 161, .14); } .rodape__canais a:hover { color: var(--malva); } .rodape__pendencia { color: var(--malva-clara); } .rodape__menus { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--e5); } .rodape__titulo { font-family: var(--micro); font-size: var(--d6); font-weight: 600; color: var(--malva); margin-bottom: .9rem; } .rodape__menus ul { display: grid; gap: .55rem; font-size: var(--d5m); } .rodape__menus a { display: inline-block; } .rodape__menus a { color: var(--membrana); transition: color var(--transicao); } .rodape__menus a:hover { color: var(--branco); } .rodape__base { padding-top: var(--e4); border-top: 1px solid var(--fio-claro); display: grid; gap: .9rem; } .rodape__aviso { font-size: var(--d6); color: var(--malva-clara); opacity: .85; max-width: 76ch; } .rodape__copy { font-family: var(--micro); font-size: var(--d6); color: var(--malva-clara); opacity: .8; } .rodape__legais { display: flex; flex-wrap: wrap; gap: 1.2rem; font-family: var(--micro); font-size: var(--d6); } .rodape__legais a { color: var(--malva-clara); } .rodape__legais a:hover { color: var(--branco); } /* Crédito de autoria: discreto, mas legível — malva-clara sobre a ameixa-fundo dá 7,6:1, e o link sublinha para não se confundir com texto morto. */ .rodape__autoria { margin-top: .35rem; font-family: var(--micro); font-size: var(--d6); color: var(--malva-clara); opacity: .8; } .rodape__autoria a { color: var(--branco); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .4); text-underline-offset: .18em; transition: text-decoration-color var(--transicao); } .rodape__autoria a:hover { text-decoration-color: var(--branco); } /* 14b · herói e blocos de página ------------------------------------------ */ /* --- banner de topo: foto de largura total, texto à esquerda -------------- */ .banner { position: relative; isolation: isolate; background: var(--ameixa); /* A FOTO SAI DO ECRA NO TELEMOVEL. Medida numa janela de 390px, a imagem do heroi da 417 de largura e o pai dela nao recorta: `documentElement.scrollWidth` ia a 396 e a pagina ganhava 6px de arrasto lateral. O `body { overflow-x: hidden }` do reset tapava o sintoma por propagacao, que e um mecanismo que nem todo navegador movel honra da mesma forma. Quem tem de recortar e o heroi, que e o dono do problema. So da para fazer isto agora: enquanto a `.faixa-apoio` subia por cima do banner com margem negativa, um `overflow: hidden` aqui teria cortado o cartao ao meio. */ overflow: hidden; } .banner__fundo { position: absolute; inset: 0; z-index: -2; overflow: hidden; } /* o é inline por omissão: sem display:block + height:100% a foto assume a altura intrínseca e sobra faixa vazia no fim do banner */ .banner__fundo picture { display: block; width: 100%; height: 100%; } .banner__fundo img { width: 100%; height: 100%; object-fit: cover; } /* E o mesmo outra vez, com mais peso: o Elementor traz `.elementor img { height:auto }`, que EMPATA em especificidade com a regra acima (0-1-1 nas duas) e ganha por vir depois na ordem das folhas. Como todas as páginas do site são Elementor, a foto do herói voltava à altura intrínseca e sobrava uma faixa de ameixa no fundo do banner. */ .elementor .banner__fundo img { height: 100%; } /* Folga vertical para o parallax: a foto é maior que o quadro e desliza dentro dele, em vez de descolar e deixar faixa vazia. */ .js .banner__fundo { --desliza: 0px; } .js .banner__fundo picture { height: 116%; } .js .banner__fundo picture { position: absolute; inset: -8% 0 auto 0; transform: translate3d(0, var(--desliza), 0); will-change: transform; } /* Véu com peso à esquerda: o texto assenta sobre a parte densa e a fotografia respira à direita. Em telas estreitas o véu vira vertical (ver responsivo). */ .banner::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(44, 20, 47, .96) 0%, rgba(44, 20, 47, .9) 34%, rgba(44, 20, 47, .52) 62%, rgba(44, 20, 47, .14) 100%); } /* Variante sem fotografia: o motivo da corona radiata sobre o petróleo. */ .banner--liso::after { background: radial-gradient(120% 130% at 12% 20%, rgba(90, 49, 93, .5), transparent 62%), linear-gradient(90deg, rgba(44, 20, 47, .96), rgba(44, 20, 47, .86)); } .banner--liso .banner__fundo { background-image: radial-gradient(circle, rgba(159, 135, 161, .3) 1.7px, transparent 1.8px); background-size: 24px 24px; mask-image: radial-gradient(circle at 78% 42%, #000 6%, transparent 58%); -webkit-mask-image: radial-gradient(circle at 78% 42%, #000 6%, transparent 58%); } .banner__interno { position: relative; display: flex; align-items: center; min-height: var(--h-heroi); padding-block: clamp(2.75rem, 5vw, 4.25rem); } .banner__texto { max-width: 44rem; color: var(--branco); } .banner__titulo { margin-top: var(--e2); font-size: var(--d1); line-height: 1.12; letter-spacing: -.02em; color: var(--branco); max-width: 24ch; } .banner__lede { margin-top: var(--e4); max-width: 62ch; font-size: var(--d4); line-height: 1.55; color: var(--malva-clara); } .banner__botoes { margin-top: var(--e5); } /* selos do banner da home — fatos da marca, não decoração */ .banner__selos { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; margin-top: var(--e6); padding-top: var(--e4); border-top: 1px solid var(--fio-claro); font-family: var(--micro); font-size: var(--d6); font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--malva); } .banner__selos li { display: flex; align-items: center; gap: .6rem; } .banner__selos li + li::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--malva); opacity: .6; margin-right: 1rem; } /* migalhas dentro do banner */ .banner .migalhas { padding: 0 0 var(--e4); background: none; } .banner .migalhas .trilho { width: auto; } .banner .migalhas li, .banner .migalhas a { color: var(--malva-clara); } .banner .migalhas a:hover { color: var(--branco); } .banner .migalhas [aria-current] { color: var(--branco); } /* Faixa de apoio: os quatro fatos da marca, LOGO ABAIXO do herói. ANTES SUBIA POR CIMA DELE (`margin-top: -3.5rem`), para "desenhar a emenda" entre o banner e o conteúdo. No desktop era um efeito; no telemóvel era um defeito — o herói fica com 920px de altura e o cartão branco entrava 57px dentro dele, tapando o pé da imagem e encostando nos botões. Um cartão que morde o herói só funciona quando o herói tem folga em baixo, e num ecrã estreito ele nunca tem. Agora desce, nos dois tamanhos: o herói acaba onde acaba e a faixa começa depois dele. A emenda passou a ser o espaço, que é o que o resto do site já usa entre secções. */ .faixa-apoio { position: relative; z-index: 2; margin-top: var(--e6); } .faixa-apoio__interno { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--e5); padding: var(--e5) 2.5rem; background: var(--branco); border-radius: var(--r3); box-shadow: var(--sombra2); } .faixa-apoio__item { display: flex; gap: 1rem; align-items: flex-start; } .faixa-apoio__icone { display: grid; place-items: center; flex: none; width: 3.1rem; height: 3.1rem; border-radius: 50%; background: var(--roxo-suave); color: var(--roxo); } .faixa-apoio__item:nth-child(2n) .faixa-apoio__icone { background: var(--salvia-suave); color: var(--salvia-texto); } .faixa-apoio__icone svg { width: 24px; height: 24px; } .faixa-apoio__t { font-family: var(--titulo); font-size: var(--d5); font-weight: 700; color: var(--ameixa); } .faixa-apoio__d { font-size: var(--d5m); color: var(--tinta-72); margin-top: .2rem; line-height: 1.5; } /* pilares empilhados (coluna de apoio do herói/quem somos) */ .pilares--empilhado { grid-template-columns: 1fr; gap: var(--e3); } .pilares--empilhado .pilar { padding-top: .8rem; } .apoio-fixo { position: sticky; top: 7rem; display: grid; gap: var(--e5); } .apoio-fixo__resto { display: grid; gap: var(--e3); justify-items: start; } .apoio-fixo__t { font-family: var(--titulo); font-size: var(--d4); font-weight: 600; color: var(--ameixa); } .apoio-fixo .botao { margin-top: var(--e2); } .grade--compacta { gap: var(--e4) var(--e5); } .eixo { padding-top: .85rem; border-top: 1px solid var(--fio); } .eixo__t { font-family: var(--titulo); font-size: var(--d4); font-weight: 600; color: var(--ameixa); } .eixo__d { margin-top: .3rem; font-size: var(--d5m); color: var(--tinta-72); } .mapa__caixa { display: grid; place-items: center; color: var(--roxo); } .mapa { width: 100%; max-width: 25rem; height: auto; } .helice { position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1; width: min(100%, 24rem); margin-inline: auto; color: var(--roxo); border-radius: 50%; background: radial-gradient(circle, rgba(90, 49, 93, .07), transparent 68%); } .helice::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background-image: radial-gradient(circle, rgba(90, 49, 93, .32) 1.7px, transparent 1.8px); background-size: 20px 20px; mask-image: radial-gradient(circle, transparent 42%, #000 44%, #000 62%, transparent 66%); -webkit-mask-image: radial-gradient(circle, transparent 42%, #000 44%, #000 62%, transparent 66%); } .helice svg { position: relative; width: min(58%, 11rem); height: auto; stroke-width: 1; opacity: .75; } /* faixa de destaque com imagem de fundo */ .faixa-foto { position: relative; overflow: hidden; } .faixa-foto__fundo { position: absolute; inset: 0; } .faixa-foto__fundo img { width: 100%; height: 100%; object-fit: cover; } .faixa-foto::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, var(--ameixa-fundo) 22%, rgba(44, 20, 47, .82) 58%, rgba(44, 20, 47, .45)); } .faixa-foto > .trilho { position: relative; z-index: 1; } /* ficha de contato (página contato) */ .contato-grade { display: grid; grid-template-columns: var(--duas-colunas); gap: clamp(2rem, 4vw, 3.5rem); align-items: start; } .canais { display: grid; gap: var(--e4); } .canal { display: flex; gap: .9rem; align-items: start; } .canal__icone { display: grid; place-items: center; width: 3rem; height: 3rem; flex: none; border-radius: 50%; background: var(--roxo-suave); color: var(--roxo); } .canal__t { font-family: var(--micro); font-size: var(--d6); font-weight: 500; color: var(--tinta-54); } .canal__v { font-size: var(--d5); color: var(--ameixa); } .canal__v a:hover { color: var(--roxo); } /* --- blocos explicativos das páginas internas ---------------------------- */ /* trio vertical com ícone (banco de oócitos) */ .etapa-visual { display: grid; gap: .8rem; } .etapa-visual__item { display: flex; gap: 1rem; align-items: start; padding: 1.1rem 1.25rem; border-radius: var(--r2); background: var(--branco); } .etapa-visual__icone { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; flex: none; border-radius: 50%; background: var(--roxo-suave); color: var(--roxo); } .etapa-visual__item h3 { font-size: var(--d4); } .etapa-visual__item p { margin-top: .25rem; font-size: var(--d5m); color: var(--tinta-72); } /* declaração isolada (gratuidade) — a seção 02 ------------------------------------------------------------------------- É a frase mais delicada do site e não tinha desenho nenhum: texto centrado, espremido a 20ch no meio de uma faixa de 56rem, com metade da largura vazia dos dois lados. Agora ocupa a faixa larga em duas colunas — a frase de um lado, o esclarecimento do outro, separados por um fio — e o símbolo da marca entra atrás em marca d'água. */ .declaracao { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); column-gap: clamp(2.5rem, 5vw, 5rem); align-items: center; text-align: left; } .declaracao__olho { grid-column: 1; grid-row: 1; align-self: end; font-family: var(--micro); font-size: var(--d6); font-weight: 500; color: var(--malva); } .declaracao .declaracao__frase { grid-column: 1; grid-row: 2; margin-top: var(--e4); margin-inline: 0; max-width: 16ch; font-family: var(--titulo); font-size: var(--d1); font-weight: 600; line-height: 1.08; letter-spacing: -.02em; color: var(--branco); text-wrap: balance; } .declaracao .declaracao__corpo { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; margin-inline: 0; max-width: 48ch; padding-left: clamp(2rem, 4vw, 3.25rem); border-left: 1px solid var(--fio-claro); color: var(--malva-clara); text-align: left; } /* A faixa da declaração é a única que sai da largura média: em duas colunas, 56rem volta a apertar. O símbolo mora à direita, atrás do esclarecimento, e é cortado pela borda da faixa de propósito — inteiro viraria um logotipo gigante no meio da página. */ #gratuidade { overflow: hidden; } #gratuidade > .trilho { width: min(100% - 2.5rem, var(--w-lg)); position: relative; z-index: 1; } /* ::after, não ::before: o ::before da faixa escura já carrega a textura da corona radiata, e escrevê-lo de novo aqui apagaria essa textura — pior, o `inset: 0` dele sobrevive ao que não é redeclarado e prende o símbolo à esquerda. Por isso o `left`/`bottom` vão explícitos. */ #gratuidade::after { content: ''; position: absolute; z-index: 0; pointer-events: none; left: auto; bottom: auto; right: clamp(-7rem, -3.5vw, -2rem); top: 50%; translate: 0 -50%; width: min(31rem, 44%); aspect-ratio: 1; background: url(../img/marca-agua.svg) no-repeat center / contain; opacity: .1; } @media (max-width: 900px) { .declaracao { grid-template-columns: 1fr; } .declaracao__olho { grid-row: auto; align-self: auto; } .declaracao .declaracao__frase { grid-column: 1; grid-row: auto; max-width: 20ch; } .declaracao .declaracao__corpo { grid-column: 1; grid-row: auto; margin-top: var(--e5); max-width: 52ch; padding-left: 0; padding-top: var(--e4); border-left: 0; border-top: 1px solid var(--fio-claro); } #gratuidade::after { width: min(22rem, 62%); right: -16%; opacity: .07; } } /* troca doadora × receptora */ .troca { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: center; padding: 1.5rem; border-radius: var(--r2); background: var(--campo-roxo); } .troca__lado { text-align: center; } .troca__lado span { display: block; font-family: var(--micro); font-size: var(--d6); color: var(--roxo); font-weight: 500; } .troca__lado p { margin-top: .35rem; font-family: var(--titulo); font-size: var(--d4); font-weight: 600; color: var(--ameixa); } .troca__meio { color: var(--roxo); opacity: .6; } .troca__nota { margin-top: .9rem; font-family: var(--micro); font-size: var(--d6); color: var(--tinta-54); max-width: 40ch; } .secao--escuro .troca { background: var(--campo-claro); } .secao--escuro .troca__lado p { color: var(--branco); } .secao--escuro .troca__nota { color: var(--malva); opacity: .85; } /* divisão de responsabilidades */ .divisao { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-cartao); } .divisao__lado { padding: 1.5rem; border-radius: var(--r2); background: var(--branco); } .divisao__lado h3 { display: flex; align-items: center; gap: .55rem; font-size: var(--d4); /* altura fixa da faixa: os dois lados alinham a lista mesmo com título de uma ou duas linhas */ min-height: 2.4em; padding-bottom: .9rem; margin-bottom: 1rem; border-bottom: 1px solid var(--fio); } .divisao__lado h3 svg { color: var(--roxo); } /* esquema de duas origens (genética) */ .esquema { display: grid; justify-items: center; gap: .8rem; padding: 1.6rem; border-radius: var(--r2); background: var(--campo-roxo); } .esquema__linha { display: flex; gap: 1rem; } .esquema__no { padding: .6rem 1.1rem; border-radius: var(--r-pill); background: var(--branco); font-family: var(--micro); font-size: var(--d6); color: var(--ameixa); } .esquema__no--b { background: var(--membrana); } .esquema__seta { color: var(--roxo); opacity: .65; } .esquema__resultado { text-align: center; max-width: 24ch; font-family: var(--titulo); font-size: var(--d4); font-weight: 600; color: var(--ameixa); } /* triagem × diagnóstico */ .comparativo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-cartao); } .comparativo__lado { padding: 1.7rem 1.6rem; border-radius: var(--r2); background: var(--branco); } .comparativo__rot { display: inline-block; padding: .22rem .7rem; border-radius: var(--r-pill); background: var(--campo-roxo-forte); color: var(--roxo); font-family: var(--micro); font-size: var(--d7); font-weight: 500; } .comparativo__rot--b { background: var(--aviso-campo); color: var(--aviso); } .comparativo__lado h3 { margin-top: .9rem; font-size: var(--d4); } .comparativo__lado p { margin-top: .6rem; font-size: var(--d5m); color: var(--tinta-72); } /* grupos de controle (segurança) */ .grupo-controle { padding-block: 2rem; } .grupo-controle + .grupo-controle { border-top: 1px solid var(--fio); } .grupo-controle__cabeca { display: flex; gap: 1rem; align-items: start; margin-bottom: 1.4rem; } .grupo-controle__icone { display: grid; place-items: center; width: 3.6rem; height: 3.6rem; flex: none; border-radius: 50%; background: var(--roxo-suave); color: var(--roxo); } .grupo-controle__n { font-family: var(--micro); font-size: var(--d6); color: var(--roxo); } .grupo-controle__cabeca h3 { font-size: var(--d3); margin-top: .1rem; } .grupo-controle__cabeca p { margin-top: .35rem; color: var(--tinta-72); max-width: 46ch; } .grupo-controle__lista { padding-left: 4rem; } /* afunilamento da triagem */ .filtro-visual { display: grid; gap: .5rem; justify-items: start; } .filtro-visual__faixa { padding: .85rem 1.2rem; border-radius: var(--r2); background: var(--branco); font-family: var(--micro); font-size: var(--d5m); color: var(--ameixa); } .filtro-visual__faixa:last-child { background: var(--roxo); color: var(--branco); } /* resumo em fases (como funciona) */ .resumo-fases { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--e4); } .resumo-fase { padding-top: .9rem; border-top: 2px solid var(--roxo); } .resumo-fase__n { font-family: var(--micro); font-size: var(--d6); color: var(--roxo); } .resumo-fase__t { margin-top: .3rem; font-size: var(--d4); } .resumo-fase__d { margin-top: .35rem; font-size: var(--d5m); color: var(--tinta-72); } /* lateral de formulário */ .lateral-forma__t { font-family: var(--titulo); font-size: var(--d4); font-weight: 600; margin-bottom: 1.1rem; } .lateral-forma__nota { margin-top: var(--e4); padding-top: var(--e4); border-top: 1px solid var(--fio); font-family: var(--micro); font-size: var(--d6); color: var(--tinta-54); } .canais-caixa { position: sticky; top: 7rem; } .canais-caixa__nota { margin-top: var(--e5); } /* páginas de estado (obrigado, 404) */ .obrigado__interno { text-align: center; display: grid; justify-items: center; gap: var(--e3); } .obrigado__selo { display: grid; place-items: center; width: 4.5rem; height: 4.5rem; margin-bottom: var(--e2); border-radius: 50%; background: var(--campo-roxo-forte); color: var(--roxo); } .obrigado__titulo { font-size: var(--d1); } .obrigado__texto { max-width: 42ch; font-size: var(--d4); line-height: 1.5; color: var(--tinta-72); } .obrigado__interno .botoes { margin-top: var(--e4); } /* blog */ .blog-barra .busca-fake { min-width: 15rem; } .post--espera { border-top-color: var(--fio); } .post--espera .post__titulo { color: var(--tinta-72); } .post__link--espera { color: var(--tinta-54); } .artigo__aviso { max-width: var(--medida); } /* apoios de topo */ .figura--emoldurada { border: 1px solid var(--fio); } .helice--topo { opacity: .3; } /* aviso de página em preparação */ .em-breve { display: grid; gap: var(--e4); justify-items: start; padding: clamp(1.6rem, 3vw, 2.4rem); border-radius: var(--r3); background: var(--campo-roxo); } .secao--escuro .em-breve { background: var(--campo-claro); } /* 15 · movimento e respostas ---------------------------------------------- */ /* Só esconde quando há JS para revelar — ver o