/* ============================================================ aureacruz.adv.br — tema base Fonte única dos tokens, da tipografia e do cabeçalho do site. Carregado por TODAS as páginas, antes do CSS próprio de cada uma. Mudou aqui, mudou no site inteiro. ============================================================ */ :root{ --pattern:url('/assets/pattern.png'); --vinho:#40101F; --vinho-2:#571A2E; --vinho-3:#310C18; --dourado:#C79A67; /* marca: filetes, botões, texto sobre vinho */ --dourado-claro:#DDBB90; --dourado-fundo:#96703F; /* Dourado para TEXTO sobre fundo claro. O dourado da marca dá 2,28:1 sobre o papel — ilegível. Este dá 5,49:1 e passa em AA mesmo em corpo pequeno. Regra: fundo claro usa --dourado-texto; fundo vinho usa --dourado. */ --dourado-texto:#7E5B2E; --nude:#ECE8DF; --nude-claro:#F5F2EB; --marrom:#5C4326; --ink:#2E2226; --branco:#FFFFFF; --texto-suave:#55444B; --texto-claro-suave:#DCD0BF; --linha-clara:#D8CFBC; --linha-escura:rgba(199,154,103,.28); --disp:'Julius Sans One',sans-serif; --sans:'Karla',sans-serif; --acc:'Cormorant Garamond',Georgia,serif; --maxw:1180px; --tr:cubic-bezier(.22,.61,.36,1); } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{ font-family:var(--sans);color:var(--ink);background:var(--nude-claro); line-height:1.65;font-size:17px;-webkit-font-smoothing:antialiased; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} h1,h2,h3{font-weight:400} section{scroll-margin-top:84px} .display{font-family:var(--disp);letter-spacing:.14em;text-transform:uppercase} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px} .eyebrow{ font-family:var(--disp);font-size:.82rem;letter-spacing:.3em;text-transform:uppercase; color:var(--dourado-texto);display:flex;align-items:center;gap:16px;margin-bottom:22px; } .eyebrow::before{content:"";width:44px;height:1px;background:var(--dourado);flex:none} /* sobre vinho o dourado da marca é legível (6,3:1) e é ele que deve aparecer */ .hero .eyebrow,.plano .eyebrow,.contato .eyebrow{color:var(--dourado)} /* ---------- botões ---------- */ .btn{ display:inline-flex;align-items:center;gap:10px;font-family:var(--disp); font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;padding:15px 28px; border:1px solid var(--dourado);color:var(--vinho);background:var(--dourado); transition:all .3s var(--tr); } .btn:hover{background:var(--dourado-claro);border-color:var(--dourado-claro);transform:translateY(-2px)} .btn.ghost{background:transparent;color:var(--dourado)} .btn.ghost:hover{background:rgba(199,154,103,.12)} .btn.sm{padding:11px 20px;font-size:.72rem} /* ============================================================ CABEÇALHO Flutua transparente e vira sólido ao rolar. Páginas que começam em fundo claro pedem , senão a marca dourada sumiria sobre o papel. ============================================================ */ header.site-header{ position:fixed;top:0;left:0;right:0;z-index:100; background:rgba(64,16,31,0); transition:background .4s var(--tr), box-shadow .4s var(--tr); /* Tipografia declarada, não herdada. Sem isto o cabeçalho pega o `font-weight` e o `line-height` do body de cada página — as de leitura longa usam 300/1.75 — e o menu fica mais fino e alguns décimos de pixel mais alto. Peça compartilhada não herda tipografia de quem a hospeda. */ font-weight:400; line-height:1.65; font-style:normal; } header.site-header.solid, body.header-solido header.site-header{ background:var(--vinho);box-shadow:0 2px 24px rgba(30,5,13,.35); } body.header-solido{padding-top:76px} .nav{ display:flex;align-items:center;justify-content:space-between;height:76px; max-width:var(--maxw);margin:0 auto;padding:0 28px; } .brand{display:flex;align-items:center;gap:13px;color:var(--nude)} .brand img{width:38px;height:auto;display:block} .brand-name{ font-family:var(--disp);letter-spacing:.22em;font-size:1rem;line-height:1.2; } .brand-name small{display:block;font-size:.52rem;letter-spacing:.4em;color:var(--dourado-claro)} .nav-links{display:flex;align-items:center;gap:34px;list-style:none} .nav-links a{ font-size:.82rem;letter-spacing:.16em;text-transform:uppercase; color:var(--nude);position:relative;padding:6px 0; } .nav-links a::after{ content:"";position:absolute;left:0;bottom:0;width:0;height:1px; background:var(--dourado);transition:width .3s var(--tr); } .nav-links a:hover::after,.nav-links a[aria-current="page"]::after{width:100%} .nav-links a[aria-current="page"]{color:var(--dourado-claro)} @media(max-width:1150px){ .nav-links{gap:22px} .nav-links a{font-size:.76rem;letter-spacing:.12em} } .burger{ display:none;background:none;border:none;cursor:pointer; width:40px;height:40px;position:relative;z-index:120; } .burger span{display:block;width:24px;height:2px;background:var(--nude);margin:5px auto;transition:.3s var(--tr)} @media(max-width:860px){ .nav-links{ position:fixed;inset:0;background:var(--vinho);flex-direction:column; justify-content:center;gap:36px;transform:translateX(100%); transition:transform .4s var(--tr); } .nav-links.open{transform:none} .nav-links a{font-size:1rem} .burger{display:block} .nav .btn{display:none} body.locked{overflow:hidden} } @media(max-width:720px){ body.header-solido{padding-top:66px} .nav{height:66px;padding:0 22px} .brand img{width:32px} .brand-name{font-size:.86rem} } /* ---------- WhatsApp flutuante ---------- */ .wa-float{ position:fixed;right:26px;bottom:26px;z-index:90;width:58px;height:58px; border-radius:50%;background:var(--dourado);color:var(--vinho); display:flex;align-items:center;justify-content:center; box-shadow:0 12px 28px -8px rgba(30,5,13,.5);transition:transform .3s var(--tr); } .wa-float:hover{transform:scale(1.08)} .wa-float svg{width:26px;height:26px} /* ---------- revelação ao rolar ---------- */ .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--tr),transform .8s var(--tr)} .reveal.in{opacity:1;transform:none} :focus-visible{outline:2px solid var(--dourado);outline-offset:3px} @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important} .reveal{opacity:1;transform:none} }