/* ==========================================================================
MeCusta — folha de estilo compartilhada
Trocar a marca: busque por "MeCusta" no HTML. As cores ficam aqui embaixo.
Fontes (Fraunces / Hanken Grotesk): carregadas via no do
layout (src/layouts/Layout.astro), não mais por @import aqui — @import
dentro do CSS cria uma cadeia de requisição extra (baixa o CSS, só depois
descobre e baixa a fonte). Ver Layout.astro para o
+ equivalente.
========================================================================== */
:root {
/* Paleta — confeitaria sem o clichê do creme + terracota.
Cacau escuro como tinta, framboesa como destaque, verde para "dinheiro". */
--paper: #FBF7F2;
--blush: #F6E9E3;
--blush-2: #F1DDD4;
--ink: #2E2024;
--ink-soft: #6E5C60;
--ink-faint: #9C8B8F;
--rasp: #B5346A;
--rasp-dark: #8A2351;
--rasp-bg: #FBE7EE;
--accent-hover: #8A2351; /* fundo do botão no hover (separado do texto de link) */
--green: #2F6B4F;
--green-dark: #245540;
--green-bg: #E5F0E9;
--line: #E7D8D0;
--line-soft: #F0E5DE;
/* superfícies e apoio (variáveis para o modo escuro trocar) */
--surface: #ffffff; /* "branco" dos cartões */
--on-accent: #ffffff; /* texto sobre a framboesa */
--header-bg: rgba(251, 247, 242, 0.9);
--shadow-1: 0 1px 0 var(--line-soft), 0 18px 40px -28px rgba(46, 32, 36, 0.25);
--shadow-2: 0 18px 50px -34px rgba(46, 32, 36, 0.4);
--seg-ing: #C9A38F;
--seg-emb: #8FB8A2;
--seg-extra: #E08AAE;
--teaser-end: #ffffff; /* fim do gradiente do card premium */
--radius: 14px;
--radius-sm: 9px;
--maxw: 1080px;
--font-display: 'Fraunces', Georgia, serif;
--font-sans: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
}
/* ==========================================================================
Modo escuro — não é inversão: fundo cacau quase-preto (não preto puro),
texto creme (não branco puro), e os acentos clareados + dessaturados para
saltarem no escuro sem "vibrar". As relações de cor são mantidas.
========================================================================== */
:root[data-theme="dark"] {
--paper: #181215; /* fundo carvão-ameixa quente (não preto puro) */
--blush: #211A1E; /* painel de resultado / superfícies suaves */
--blush-2: #2E2429; /* linhas internas */
--ink: #ECE5E2; /* texto principal (creme suave, não branco puro) */
--ink-soft: #B3A6AA;
--ink-faint: #82747A;
--rasp: #C94F80; /* framboesa sólida e sóbria (botões e acentos) */
--rasp-dark: #E6A2C0; /* texto de link/acento: rosa claro p/ ler no escuro */
--rasp-bg: #33202A; /* chips/realces rosados escuros */
--accent-hover: #B14472; /* hover dos botões: um tom mais fundo, texto claro legível */
--green: #4FAE82; /* verde do "dinheiro", refinado */
--green-dark: #63C79A; /* preço/lucro em verde nítido (não neon) */
--green-bg: #1B3126;
--line: #34292E;
--line-soft: #292024;
--surface: #221B1F; /* cartões: superfície escura elevada */
--on-accent: #FBEFF3; /* texto claro sobre a framboesa */
--header-bg: rgba(24, 18, 21, 0.85);
--shadow-1: 0 1px 0 rgba(255,255,255,0.02), 0 18px 40px -28px rgba(0, 0, 0, 0.6);
--shadow-2: 0 18px 50px -34px rgba(0, 0, 0, 0.7);
--seg-ing: #C39A86;
--seg-emb: #6FB194;
--seg-extra: #D084A8;
--teaser-end: #221B1F;
}
/* ==========================================================================
Nicho: Salgaderia — mesma identidade (base quente + acento + verde-dinheiro),
só o acento muda: framboesa -> páprica/terracota (apetitoso, caseiro).
Aplica-se em qualquer página com data-nicho="salgaderia".
========================================================================== */
:root[data-nicho="salgaderia"] {
--rasp: #C05A2A; /* páprica / terracota */
--rasp-dark: #9C4620;
--rasp-bg: #FBE8DD;
--accent-hover: #9C4620;
}
:root[data-theme="dark"][data-nicho="salgaderia"] {
--rasp: #D9743E; /* terracota clareada para o escuro */
--rasp-dark: #ECAF87; /* texto de acento claro, legível no escuro */
--rasp-bg: #3A2417;
--accent-hover: #C0602C;
}
/* Cor da salgaderia "fixa" (não trocada por data-nicho) — mesmos valores do
bloco acima, só que disponível em qualquer página, mesmo quando ela não
está inteira no nicho salgaderia. Usada pelo blog, que mistura artigos de
confeitaria (usa --rasp normal) e salgaderia (usa --salgaderia-accent) na
mesma página de listagem (ArticleCard.astro / CategoryBanner.astro). */
:root {
--salgaderia-accent: #C05A2A;
--salgaderia-accent-dark: #9C4620;
--salgaderia-accent-bg: #FBE8DD;
}
:root[data-theme="dark"] {
--salgaderia-accent: #D9743E;
--salgaderia-accent-dark: #ECAF87;
--salgaderia-accent-bg: #3A2417;
}
/* ==========================================================================
FUNCIONALIDADE DESATIVADA · Container mais largo para o artigo do blog
Motivo:
ArticleLayout.astro usava a prop `wide` do Layout (--maxw: 1240px em vez
de 1080px) achando que o texto corrido, a calculadora e o gráfico de
composição do custo precisavam de mais espaço. Na prática isso deixou o
artigo mais largo que todas as outras páginas do site (blog index,
confeitaria, salgaderia, premium), quebrando a uniformidade pedida.
Como restaurar:
1. Descomente o bloco `:root[data-wide="true"]` abaixo.
2. Em src/layouts/ArticleLayout.astro, adicione de volta `wide` (sem
valor) nas props passadas ao .
==========================================================================
:root[data-wide="true"] {
--maxw: 1240px;
}
========================================================================== */
/* transição suave ao trocar de tema */
body, .calc, .result, .price-hero, .stat, .fornada, .feature, .pricing,
.honesty-note, .upsell-note, .site-header, input, .theme-toggle, .adblock-note {
transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
/* ==========================================================================
Transição entre páginas (View Transitions API nativa do navegador)
Objetivo: ao trocar de nicho pelo menu (Confeitaria <-> Salgaderia, e
qualquer calculadora nova que entrar depois), a sensação deve ser de
continuidade — o header não "pisca", a barra que marca a aba ativa desliza
até a nova posição, o espaço de anúncio não some/pisca, e o resto da
página faz um cross-fade rápido em vez de trocar de golpe.
Como funciona: o navegador tira um "retrato" da página antiga e da nova
e anima a diferença entre elas. Elementos com o mesmo view-transition-name
nas duas páginas são casados e animados como se fossem o mesmo elemento
(é assim que a barrinha ativa "desliza" de uma aba pra outra). Elementos
sem nome entram no cross-fade geral da página (dá conta de textos/cores
que mudam, como o acento framboesa -> terracota).
100% progressivo: navegador sem suporte ignora a regra @view-transition e
navega do jeito de sempre — nada quebra, não precisa de JS nem de fallback.
É a MESMA API que o Astro usa por baixo do recurso de View Transitions
() — ao migrar, dá pra reaproveitar esses mesmos nomes
quase sem alteração, só trocando @view-transition pelo componente do Astro.
Regra para páginas novas (ex.: calculadora de pizza): use as mesmas
classes .site-header / .nav a.nicho.active / .ad-slot--rect / .ad-slot--banner
— a transição funciona automaticamente, sem precisar escrever nada aqui.
========================================================================== */
@view-transition {
navigation: auto;
}
.site-header { view-transition-name: mc-header; }
.nav a.nicho.active::after,
.nav a.nav-blog.active::after { view-transition-name: mc-nav-underline; }
.ad-slot--rect { view-transition-name: mc-ad-rect; }
.ad-slot--banner { view-transition-name: mc-ad-banner; }
/* Curva de easing própria (em vez do "ease" padrão), mais lenta na saída e
rápida na chegada — é o que faz a troca de página parecer uma transição
desenhada, e não um corte brusco. Os grupos com nome (header, sublinhado
do menu, anúncios) se movem rápido: eles normalmente não mudam de
posição/tamanho entre páginas, então uma duração curta evita qualquer
sensação de "atraso" neles enquanto o resto da página ainda cruza. */
::view-transition-group(*) {
animation-duration: .32s;
animation-timing-function: cubic-bezier(.22, 1, .36, 1);
}
::view-transition-group(mc-header),
::view-transition-group(mc-nav-underline),
::view-transition-group(mc-ad-rect),
::view-transition-group(mc-ad-banner) {
animation-duration: .22s;
}
/* Conteúdo sem nome (a página toda, fora dos elementos compartilhados acima)
troca com um cross-fade + leve deslocamento vertical, em vez do cross-fade
plano padrão do navegador — sutil o bastante para não chamar atenção, mas
suficiente para não parecer um "corte" entre uma página e outra. */
::view-transition-old(root) {
animation: mc-page-out .22s cubic-bezier(.4, 0, 1, 1) both;
}
::view-transition-new(root) {
animation: mc-page-in .32s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes mc-page-out {
to { opacity: 0; transform: translateY(-6px); }
}
@keyframes mc-page-in {
from { opacity: 0; transform: translateY(10px); }
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: var(--font-sans);
background: var(--paper);
color: var(--ink);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
font-feature-settings: "tnum" 0;
}
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }
a { color: var(--rasp-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
/* Foco visível padrão (teclado) para links/botões que não têm um estilo de
foco próprio — acessibilidade sem mudar a aparência de quem já tem o seu
(.info-tip, input, etc. continuam com o próprio :focus-visible, que é mais
específico e não é afetado por esta regra genérica). */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
outline: 2px solid var(--rasp);
outline-offset: 2px;
border-radius: 4px;
}
/* ---- Header ------------------------------------------------------------- */
.site-header {
border-bottom: 1px solid var(--line);
background: var(--header-bg);
backdrop-filter: blur(6px);
position: sticky; top: 0; z-index: 50;
}
.site-header .wrap {
display: flex; align-items: center; justify-content: space-between;
height: 66px;
gap: 10px; /* espaço mínimo garantido entre logo e menu — sem isso, em
telas bem estreitas o space-between "zera" e o menu encosta
no logo (ver ajustes de celular mais abaixo). */
}
.brand {
font-family: var(--font-display);
font-weight: 600; font-size: 21px; color: var(--ink);
display: flex; align-items: center; gap: 9px;
}
.brand:hover { text-decoration: none; }
/* ===========================================================================
FUNCIONALIDADE SUBSTITUÍDA · .dot como círculo sólido (cor --rasp)
Motivo: trocado pelo logo de verdade (tigela), que já muda sozinho
conforme tema e nicho — ver as regras de background-image logo abaixo.
Como restaurar: descomente o bloco abaixo e remova as regras de
background-image que vêm depois dele.
---------------------------------------------------------------------------
.brand .dot {
width: 10px; height: 10px; border-radius: 50%;
background: var(--rasp); display: inline-block;
}
=========================================================================== */
/* Logo (tigela) no lugar do antigo ponto sólido — 4 imagens pré-normalizadas
(mesmo canvas/enquadramento) em public/logo/: confeitaria/salgaderia ×
claro/escuro. Troca automática por seletor composto em data-theme +
data-nicho, sem JS — mesmo padrão já usado para as variáveis de cor do
site (ver bloco "Nicho: Salgaderia" no topo deste arquivo). */
.brand .dot {
width: 26px; height: 24px; display: inline-block;
background-image: url('/logo/logo-confeitaria-light.png');
background-size: contain; background-repeat: no-repeat; background-position: center;
}
:root[data-theme="dark"] .brand .dot {
background-image: url('/logo/logo-confeitaria-dark.png');
}
:root[data-nicho="salgaderia"] .brand .dot {
background-image: url('/logo/logo-salgaderia-light.png');
}
:root[data-theme="dark"][data-nicho="salgaderia"] .brand .dot {
background-image: url('/logo/logo-salgaderia-dark.png');
}
.nav { display: flex; align-items: center; gap: 26px; }
.nav a { color: var(--ink-soft); font-weight: 500; font-size: 15px; transition: color .15s ease; }
.nav a:hover { color: var(--ink); text-decoration: none; }
.nav a.nicho, .nav a.nav-blog { position: relative; }
.nav a.nicho.active { color: var(--rasp-dark); font-weight: 600; }
/* Mesma barrinha embaixo da aba ativa, seja um nicho (Confeitaria/Salgaderia)
ou o Blog — para os três terem a mesma sensação de "aba selecionada" e a
barra deslizar suavemente entre qualquer um deles (view-transition-name
mc-nav-underline, ver seção de transição de página mais acima). */
.nav a.nicho.active::after,
.nav a.nav-blog.active::after {
content: ""; position: absolute; left: 0; right: 0; bottom: -21px; height: 2px;
background: var(--rasp); border-radius: 2px;
}
.nav a.nav-cta {
background: var(--rasp); color: var(--on-accent); padding: 9px 16px;
border-radius: 99px; font-size: 14px;
}
.nav a.nav-cta:hover { background: var(--accent-hover); }
/* Link "Blog" no header/footer — mesmo estilo base de .nav a, só com um
espaçamento/divisor sutil para não parecer uma terceira aba de nicho. */
.nav a.nav-blog {
margin-left: 6px; padding-left: 22px;
border-left: 1px solid var(--line);
}
.nav a.nav-blog.active { color: var(--rasp-dark); font-weight: 600; }
@media (max-width: 600px) {
.nav a.nav-blog { margin-left: 0; padding-left: 10px; }
}
/* ---- Menu de nichos (Confeitaria / Salgaderia / ...) ---------------------
Componente reutilizável, pronto para qualquer quantidade de calculadoras.
No PC as abas ficam lado a lado, como sempre (.nicho-nav e .nicho-nav-list
usam display:contents — somem do layout, os viram filhos diretos de
.nav, zero mudança visual). No celular viram um botão único ("Confeitaria
⌄") que abre uma lista vertical sobreposta — assim o header não fica
apertado, não importa se são 2 ou 6 calculadoras. Ver nicho-nav.js.
Uso: