markup.html · 116 linhas · 6,1 KB
<!-- ==========================================================================
ENTREGÁVEIS EM PASTAS — o que o cliente leva para casa
Prefixo: dos-
Requer: core (tokens, base, motion.css, motion.js) + este estilo.css e
este script.js (opcional: só vira as páginas do guia)
O serviço intangível vira objeto. À esquerda, uma pasta por documento
que o cliente recebe — o nome, quantas páginas tem, e do que ele trata.
À direita, o guia que acompanha tudo, aberto numa página, com um botão
que vira para a seguinte. A pergunta que a dobra responde é a que o
cliente não faz em voz alta: "no fim, o que eu tenho na mão?".
AS PASTAS SÃO DESENHADAS EM CSS, sem imagem: o corpo e a aba, com o
tipo do arquivo escrito nela. E ficam PARADAS — nada se abre ou se move
no hover (CLAUDE.md §6). O original abria a pasta sob o ponteiro.
O GUIA VIRA A PÁGINA NO CLIQUE, que é gesto pedido. Sem JavaScript fica
na primeira página (as outras nascem [hidden]) e o botão não aparece:
botão que não faz nada é pior que botão nenhum.
========================================================================== -->
<section class="sec-paper sec-pad dos" data-dos>
<div class="wrap">
<div class="dos-topo">
<div>
<span class="eyebrow" data-rv>O que você recebe</span>
<h2 class="sec-title ttl">Tudo por escrito, <em>num lugar só</em></h2>
</div>
<p class="sec-lead dos-lead" data-rv data-d="1">Todo trabalho termina do mesmo jeito: documentos que você consegue ler, assinados e guardados, com o guia que explica cada um.</p>
</div>
<div class="dos-grade">
<ul class="dos-pastas" role="list">
<li class="dos-pasta" data-rv>
<span class="dos-desenho" aria-hidden="true"><span class="dos-selo">PDF</span></span>
<h3 class="dos-nome">Política de investimento</h3>
<p class="dos-qtd">12 páginas</p>
<p class="dos-temas">Perfil · Limites · Revisão anual</p>
</li>
<li class="dos-pasta" data-rv data-d="1">
<span class="dos-desenho" aria-hidden="true"><span class="dos-selo">PDF</span></span>
<h3 class="dos-nome">Mapa sucessório</h3>
<p class="dos-qtd">8 páginas</p>
<p class="dos-temas">Herdeiros · Bens · Três cenários</p>
</li>
<li class="dos-pasta" data-rv data-d="2">
<span class="dos-desenho" aria-hidden="true"><span class="dos-selo">PDF</span></span>
<h3 class="dos-nome">Relatório consolidado</h3>
<p class="dos-qtd">Todo trimestre</p>
<p class="dos-temas">Instituições · Custos · Liquidez</p>
</li>
<li class="dos-pasta" data-rv data-d="3">
<span class="dos-desenho" aria-hidden="true"><span class="dos-selo">PDF</span></span>
<h3 class="dos-nome">Parecer tributário</h3>
<p class="dos-qtd">6 páginas</p>
<p class="dos-temas">Imposto de renda · Exterior · Holding</p>
</li>
</ul>
<div class="dos-guia-slot" data-rv data-d="2">
<div class="dos-guia" data-dos-guia>
<div class="dos-guia-topo">
<span class="dos-guia-rot">
<svg width="15" height="15" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linejoin="round" aria-hidden="true"><path d="M8 3.5C6.5 2.5 4.5 2 2 2v10.5c2.5 0 4.5.5 6 1.5 1.5-1 3.5-1.5 6-1.5V2c-2.5 0-4.5.5-6 1.5zM8 3.5V14"/></svg>
O guia do cliente
</span>
<span class="dos-guia-conta" data-dos-conta aria-hidden="true">01 / 05</span>
</div>
<div class="dos-paginas" aria-live="polite">
<article class="dos-pagina">
<span class="dos-pagina-n">Página 1</span>
<h4 class="dos-pagina-t">Sua política, em uma página</h4>
<p class="dos-pagina-p">O que pode e o que não pode entrar na carteira, e por quê.</p>
<span class="dos-linhas" aria-hidden="true"></span>
</article>
<article class="dos-pagina" hidden>
<span class="dos-pagina-n">Página 2</span>
<h4 class="dos-pagina-t">Como ler o relatório</h4>
<p class="dos-pagina-p">Onde está cada número, e qual deles merece a sua atenção.</p>
<span class="dos-linhas" aria-hidden="true"></span>
</article>
<article class="dos-pagina" hidden>
<span class="dos-pagina-n">Página 3</span>
<h4 class="dos-pagina-t">O que muda na sucessão</h4>
<p class="dos-pagina-p">Os três cenários do mapa, lado a lado, sem jargão.</p>
<span class="dos-linhas" aria-hidden="true"></span>
</article>
<article class="dos-pagina" hidden>
<span class="dos-pagina-n">Página 4</span>
<h4 class="dos-pagina-t">Quando rebalanceamos</h4>
<p class="dos-pagina-p">O gatilho de cada ajuste, escrito antes de ele acontecer.</p>
<span class="dos-linhas" aria-hidden="true"></span>
</article>
<article class="dos-pagina" hidden>
<span class="dos-pagina-n">Página 5</span>
<h4 class="dos-pagina-t">Com quem falar</h4>
<p class="dos-pagina-p">Seu sócio responsável, o suplente e o canal de urgência.</p>
<span class="dos-linhas" aria-hidden="true"></span>
</article>
</div>
<p class="dos-guia-apoio">Cada cliente sai com o guia impresso: trinta páginas em português claro sobre tudo o que foi entregue.</p>
<button class="dos-virar" type="button" data-dos-virar hidden>Virar a página
<svg width="13" height="13" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2 7H12M8 3L12 7L8 11"/></svg>
</button>
</div>
</div>
</div>
<p class="nota dos-nota" data-rv>Os originais assinados ficam com você; as cópias digitais ficam no portal do cliente.</p>
</div>
</section>
estilo.css · 144 linhas · 6,0 KB
/* ==========================================================================
ENTREGÁVEIS EM PASTAS — dos-
Uma pasta por documento entregue, e o guia que vira a página no clique.
Tokens usados: --bg --fg --fg-2 --fg-muted --rule --rule-2 --accent-ink
--accent --dark --light --display --radius-media
--radius-pill --ease
========================================================================== */
.dos-topo{
display:grid;grid-template-columns:minmax(0,1fr) minmax(0,34ch);
gap:24px 48px;align-items:end;
}
.dos-lead{margin-top:0}
.dos-grade{
display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
gap:clamp(14px,1.6vw,20px);
margin-top:clamp(34px,5vh,52px);
}
/* ---------------------------------------------------------------- as pastas */
.dos-pastas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.6vw,20px)}
.dos-pasta{
display:grid;align-content:start;gap:6px;
padding:clamp(20px,2vw,26px);
border:1px solid var(--rule);border-radius:var(--radius-media);
background:color-mix(in srgb,var(--fg) 3%,var(--bg));
}
/* A PASTA DESENHADA: a aba é o ::before e o corpo é a própria caixa. O
tipo do arquivo (.dos-selo) mora DENTRO da aba, no canto de cima à
esquerda, que é onde uma pasta de verdade leva a etiqueta. Tudo derivado
de --fg e --bg, então a pasta segue o escopo. Parada: nada abre no hover
(§6).
Não há folhas aparecendo por cima. Houve, num ::after — e sem conteúdo
nenhum, o retângulo claro no meio da aba lia como defeito de desenho, não
como papel. Tirado em 2026-09-29, a pedido do dono. */
.dos-desenho{
position:relative;display:block;
block-size:clamp(96px,9vw,124px);margin:26px 0 16px;
border:1px solid var(--rule-2);border-radius:max(6px,var(--radius-media));
background:color-mix(in srgb,var(--fg) 7%,var(--bg));
}
/* 26px de altura, 24 acima do corpo e 2 por cima da borda dele: é o que
apaga o filete do corpo debaixo da aba. */
.dos-desenho::before{
content:"";position:absolute;inset-block-start:-24px;inset-inline-start:-1px;
inline-size:34%;min-inline-size:64px;block-size:26px;
border:1px solid var(--rule-2);border-block-end:0;
border-radius:max(6px,var(--radius-media)) max(6px,var(--radius-media)) 0 0;
background:color-mix(in srgb,var(--fg) 7%,var(--bg));
}
.dos-selo{
position:absolute;inset-block-start:-20px;inset-inline-start:10px;z-index:1;
font-family:var(--display);font-weight:700;font-size:9.5px;line-height:1;letter-spacing:.12em;
color:var(--bg);background:var(--fg);
border-radius:var(--radius-pill);padding:4px 8px;
}
.dos-nome{
font-family:var(--display);font-weight:700;
font-size:clamp(18px,1.6vw,21px);line-height:1.2;letter-spacing:-.015em;color:var(--fg);
}
.dos-qtd{font-size:13.5px;color:var(--fg-2)}
.dos-temas{
margin-top:10px;padding-top:12px;border-top:1px solid var(--rule);
font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-muted);
}
/* ---------------------------------------------------------------- o guia */
.dos-guia-slot{display:flex}
.dos-guia{
flex:1;display:grid;align-content:center;gap:18px;
padding:clamp(24px,2.6vw,34px);
border:1px solid var(--rule);border-radius:var(--radius-media);
background:color-mix(in srgb,var(--fg) 5%,var(--bg));
}
.dos-guia-topo{display:flex;align-items:center;justify-content:space-between;gap:12px}
.dos-guia-rot{
display:inline-flex;align-items:center;gap:9px;
font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-2);
}
.dos-guia-conta{font-size:11px;letter-spacing:.12em;color:var(--fg-muted);font-variant-numeric:tabular-nums}
/* A página: um cartão de papel sobre o cartão do guia. A tinta dela é a do
escopo claro, SEMPRE — papel é papel, mesmo numa dobra escura. Por isso
ela lê --light e --dark, e não --bg/--fg. */
.dos-paginas{display:grid}
.dos-pagina{
grid-area:1 / 1;
display:grid;gap:8px;align-content:start;
min-block-size:190px;
padding:clamp(20px,2.2vw,28px);
border-radius:max(4px,var(--radius-media));
background:var(--light);color:var(--dark);
box-shadow:0 18px 40px -18px rgba(var(--dark-rgb),.35);
}
.dos-pagina[hidden]{display:none}
.dos-pagina.is-entrando{animation:dosPagina .55s var(--ease)}
@keyframes dosPagina{
from{opacity:0;filter:blur(8px)}
to{opacity:1;filter:blur(0)}
}
@media(prefers-reduced-motion:reduce){
.dos-pagina.is-entrando{animation:none}
}
.dos-pagina-n{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:color-mix(in srgb,var(--dark) 55%,var(--light))}
.dos-pagina-t{
font-family:var(--display);font-weight:700;
font-size:clamp(20px,1.9vw,26px);line-height:1.15;letter-spacing:-.02em;
}
.dos-pagina-p{font-size:14px;line-height:1.55;color:color-mix(in srgb,var(--dark) 75%,var(--light))}
/* As linhas de texto de mentira: decoração, fora da árvore de acessibilidade. */
.dos-linhas{
display:block;block-size:34px;margin-top:6px;
background:
linear-gradient(color-mix(in srgb,var(--dark) 12%,var(--light)) 0 0) 0 0 / 92% 4px no-repeat,
linear-gradient(color-mix(in srgb,var(--dark) 12%,var(--light)) 0 0) 0 10px / 78% 4px no-repeat,
linear-gradient(color-mix(in srgb,var(--dark) 12%,var(--light)) 0 0) 0 20px / 86% 4px no-repeat,
linear-gradient(color-mix(in srgb,var(--dark) 12%,var(--light)) 0 0) 0 30px / 54% 4px no-repeat;
}
.dos-guia-apoio{font-size:14px;line-height:1.6;color:var(--fg-2)}
.dos-virar{
justify-self:start;display:inline-flex;align-items:center;gap:10px;
font-family:var(--display);font-weight:700;font-size:10.5px;letter-spacing:.12em;
text-transform:uppercase;color:var(--fg);
background:none;border:1px solid var(--rule-2);border-radius:var(--radius-pill);
padding:10px 16px;cursor:pointer;transition:border-color .25s,color .25s;
}
.dos-virar:hover{border-color:var(--accent-ink,var(--accent));color:var(--accent-ink,var(--accent))}
.dos-virar[hidden]{display:none}
.dos-nota{margin-top:20px}
@media(max-width:960px){
.dos-topo{grid-template-columns:1fr}
.dos-grade{grid-template-columns:1fr}
}
@media(max-width:520px){
.dos-pastas{grid-template-columns:1fr}
}
script.js · 41 linhas · 1,8 KB
/* ==========================================================================
ENTREGÁVEIS EM PASTAS — dos-
Um trabalho só: virar a página do guia no clique do botão.
Sem JavaScript o guia fica na primeira página (as outras nascem [hidden])
e o botão não aparece — ele também nasce [hidden] e só este script o
mostra. A página nova entra com fusão e desfoque (nada entra seco, §5);
com movimento reduzido, troca direto. A região das páginas é aria-live,
então o leitor de tela lê a página nova sem o foco sair do botão.
========================================================================== */
(function () {
var raizes = document.querySelectorAll('[data-dos]');
if (!raizes.length) return; // guard: sem o componente, saída silenciosa
[].forEach.call(raizes, function (raiz) {
var paginas = [].slice.call(raiz.querySelectorAll('.dos-pagina'));
var botao = raiz.querySelector('[data-dos-virar]');
var conta = raiz.querySelector('[data-dos-conta]');
if (!botao || paginas.length < 2) return;
var atual = 0, n = paginas.length;
function dois(x) { return (x < 10 ? '0' : '') + x; }
botao.addEventListener('click', function () {
paginas[atual].hidden = true;
paginas[atual].classList.remove('is-entrando');
atual = (atual + 1) % n;
paginas[atual].hidden = false;
if (!(window.LIB && LIB.reduce)) {
// reflow entre tirar e pôr a classe: sem isto, a animação da mesma
// página não recomeça numa segunda volta do guia
paginas[atual].classList.remove('is-entrando');
void paginas[atual].offsetWidth;
paginas[atual].classList.add('is-entrando');
}
if (conta) conta.textContent = dois(atual + 1) + ' / ' + dois(n);
});
botao.hidden = false;
});
})();