/* ===== Método Cadeira Ativa — tokens globais ===== */ /* Tema claro é o padrão. Alternável pelo botão de tema no Nav (data-theme="dark" na ). */ :root{ --bg:#F8F4E8; --bg-raised:#F1EAD7; /* tom B do ritmo alternado entre dobras de conteúdo. Bege quente, quase marrom. */ --tone-b:#C2A06B; /* fundo das faixas/frases de destaque (Marquee, PullBand, CtaFinal) — terracota queimada, uma cor própria fora da família bege/marrom do resto da página. */ --ribbon-bg:#8A4426; --bg-card:#FFFFFF; --bg-card-2:#FBF7EC; --line:rgba(27,22,14,0.10); --line-strong:rgba(27,22,14,0.20); --ink:#1B160E; --ink-dim:rgba(27,22,14,0.64); --ink-faint:rgba(27,22,14,0.44); /* acento primário — trocável pelo painel de Tweaks */ --accent:#96692A; --accent-1:#6B4A18; --accent-2:#9A6E28; --accent-3:#C9954A; --accent-4:#8A5E1E; /* neutro quente secundário — estados "antes" / de-ênfase */ --bronze:#C2A576; --bronze-dim:rgba(154,122,68,0.35); /* painel "resultado real" — claro no tema claro, escuro no tema escuro (ver override abaixo). Fica com cara de relatório impresso em papel. */ --dash-bg:#FFFFFF; --dash-bg-2:#F8F4E8; --dash-ink:#1B160E; --dash-ink-dim:rgba(27,22,14,0.64); --dash-line:rgba(27,22,14,0.10); --dash-accent:#6B4A18; --grad-gold:linear-gradient(145deg,var(--accent-1),var(--accent-2) 40%,var(--accent-3) 56%,var(--accent-4) 80%); /* rótulos pequenos (eyebrow) precisam de mais contraste que o --accent normal em fundo claro (4,4:1, abaixo do WCAG AA de 4,5:1 pra texto < 18px) */ --eyebrow:var(--accent-1); --serif:'Cormorant Garamond',Georgia,serif; --wordmark:'Marcellus',Georgia,serif; --sans:'Figtree',-apple-system,BlinkMacSystemFont,sans-serif; --maxw:1160px; --radius:20px; --radius-sm:12px; --radius-pill:999px; --gap:24px; --glow-opacity:0.6; --motion-scale:1; } html[data-theme="dark"]{ --bg:#0B0A08; --bg-raised:#111009; --tone-b:#2E2110; /* mesma terracota do tema claro — não escurece, é ela que dá o contraste (fica mais clara/quente que os tons ao redor, em vez de mais escura) */ --ribbon-bg:#9C4E28; --bg-card:#141109; --bg-card-2:#181309; --line:rgba(231,197,110,0.16); --line-strong:rgba(231,197,110,0.30); --ink:#F4EFE3; --ink-dim:rgba(244,239,227,0.62); --ink-faint:rgba(244,239,227,0.42); --accent:#C9A24B; --accent-1:#8A6328; --accent-2:#D8B25C; --accent-3:#F6E3A4; --accent-4:#C9954A; --bronze:#7C5A2E; --bronze-dim:rgba(124,90,46,0.5); --dash-bg:#141109; --dash-bg-2:#181309; --dash-ink:#F4EFE3; --dash-ink-dim:rgba(244,239,227,0.62); --dash-line:rgba(231,197,110,0.16); --dash-accent:#C9A24B; --eyebrow:var(--accent); --glow-opacity:1; } body.effects-off{ --glow-opacity:0; } body.motion-off{ --motion-scale:0; } *{box-sizing:border-box;} html{scroll-behavior:smooth;} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;} } body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased; overflow-x:hidden; transition:background .25s ease, color .25s ease; } a{color:inherit;text-decoration:none;} ul{margin:0;padding:0;list-style:none;} p{margin:0;} img,svg{display:block;max-width:100%;} button{font-family:inherit;border:none;background:none;color:inherit;cursor:pointer;} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px;} .col{max-width:820px;margin:0 auto;} h1,h2,h3{ font-family:var(--serif); font-weight:500; color:var(--ink); margin:0; text-wrap:balance; } p{text-wrap:pretty;} .eyebrow{ font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:0.32em; text-transform:uppercase; color:var(--eyebrow); display:block; } .btn-primary{ display:inline-flex;align-items:center;gap:10px; font-family:var(--sans);font-size:15px;font-weight:600; color:#FBF7EC;background:var(--grad-gold); padding:17px 34px;border-radius:var(--radius-pill); letter-spacing:0.01em; box-shadow:0 16px 34px -16px rgba(150,105,42,calc(0.5 * var(--glow-opacity))); transition:transform .18s cubic-bezier(.22,.9,.3,1), box-shadow .18s ease; } html[data-theme="dark"] .btn-primary{ color:#171310; } .btn-primary:hover{transform:translateY(-2px);} .btn-primary:focus-visible{outline:2px solid var(--accent);outline-offset:4px;} .btn-secondary{ display:inline-flex;align-items:center;gap:8px; font-size:14.5px;font-weight:600;color:var(--ink-dim); padding:16px 6px;border-bottom:1px solid var(--line-strong); transition:color .15s ease,border-color .15s ease; } .btn-secondary:hover{color:var(--ink);border-color:var(--accent);} .btn-secondary:focus-visible{outline:2px solid var(--accent);outline-offset:4px;} .theme-toggle{ width:38px;height:38px;border-radius:50%; display:flex;align-items:center;justify-content:center; border:1px solid var(--line-strong); background:var(--bg-card); color:var(--ink-dim); transition:color .15s ease, transform .2s ease, background .2s ease; flex:none; } .theme-toggle:hover{color:var(--accent);transform:rotate(14deg);} .theme-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:3px;} .theme-toggle svg{width:17px;height:17px;} /* reveal-on-scroll */ .reveal{ opacity:0; transform:translateY(calc(18px * var(--motion-scale))) scale(calc(1 - 0.02 * var(--motion-scale))); transition:opacity .8s cubic-bezier(.16,.8,.24,1), transform .8s cubic-bezier(.16,.8,.24,1); will-change:transform,opacity; } .reveal.is-visible{opacity:1;transform:translateY(0) scale(1);} .placeholder-media{ border:1px dashed var(--line-strong); border-radius:var(--radius); background:var(--bg-card); display:flex;align-items:center;justify-content:center; text-align:center; color:var(--ink-faint); font-size:12.5px; letter-spacing:0.04em; padding:20px; } /* Fallback neutro pra foto que não carregou — sem texto de debug pro visitante final. */ .media-fallback{ width:100%;height:100%; background:var(--grad-gold); opacity:0.5; } .hover-lift{transition:transform .25s cubic-bezier(.16,.8,.24,1), box-shadow .25s ease, border-color .2s ease;} .hover-lift:hover{transform:translateY(calc(-4px * var(--motion-scale)));border-color:var(--line-strong);} @media (max-width:1080px){ .wrap{padding:0 24px;} } @media (max-width:480px){ .wrap{padding:0 18px;} .btn-primary{padding:15px 26px;font-size:14px;} }