/* Sistema visual da plataforma — tokens únicos, sem framework. */ /* Aurí v2 — identidade redesenhada (navy #09182C + dourado #F7C82B). Paleta reconciliada a partir de duas referências de moodboard com valores levemente diferentes entre si — os tons abaixo são a média matemática das duas, não escolha arbitrária de um lado. Regra dura: o dourado é acento, nunca texto de corpo sobre fundo claro (falha WCAG AA de contraste) — só aparece como texto sobre o navy, ou usa a variante --dourado-escuro sobre claro. */ :root{ --tinta:#0B1526; /* texto principal — muda no tema escuro */ --marca:#09182C; /* navy fixo de identidade — NUNCA muda de tema (botão primário, palco, badges) */ --marca-2:#143055; /* hover do navy fixo — também nunca muda; dobra como "superfície" no tema escuro */ --tinta-2:#143055; /* navy claro: hover e superfícies */ --papel:#EDF1F8; /* fundo da aplicação */ --branco:#FFFFFF; --dourado:#F7C82B; /* acento: bordas, estado ativo, marcador, CTAs */ --dourado-fraco:#FDF3D6; /* fundo de destaque suave */ --dourado-escuro:#7A5A05; /* versão legível para texto sobre claro */ --coral:#EF4444; --erro-fundo:#FDE8E8; --sucesso:#10B981; --sucesso-fundo:#E3F9F0; --cinza:#5A667F; --linha:#D8DEEA; --raio:18px; --nav-h:64px; --escala-fonte:1; } [data-fonte="grande"]{--escala-fonte:1.15} [data-fonte="pequena"]{--escala-fonte:0.9} /* Tema escuro — mesma identidade (navy + dourado), invertendo qual dos dois vira fundo e qual vira texto. O dourado não muda: já nasceu pensado pra funcionar sobre navy (ver nota de contraste acima). */ [data-tema="escuro"]{ --tinta:#EFF2F7; /* agora é o texto claro, não mais o fundo escuro */ --tinta-2:#B9C4DB; /* hover/texto secundário mais claro */ --papel:#060D1C; /* fundo geral — mais escuro que o navy original */ --branco:#143055; /* fundo dos cards — a "superfície" da paleta nova */ --dourado-fraco:#2E2610; /* destaque suave escuro, mesma família do dourado */ --dourado-escuro:#F7C82B; /* no escuro, o dourado puro já é legível — não precisa escurecer */ --coral:#F87171; --erro-fundo:#3D1515; /* fundo de erro escuro — mesma família do coral, sem brilhar no escuro */ --sucesso:#34D399; --sucesso-fundo:#0F2E22; --cinza:#9AA7C2; --linha:#24406B; } *{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%} body{ background:var(--papel);color:var(--tinta); font-family:"Inter",system-ui,-apple-system,Segoe UI,sans-serif; font-size:calc(15px * var(--escala-fonte));line-height:1.55;-webkit-font-smoothing:antialiased; } a{color:var(--tinta);text-decoration:none} a:hover{text-decoration:underline} :focus-visible{outline:2px solid var(--tinta);outline-offset:2px} /* ---------- estrutura ---------- */ .app{min-height:100dvh;display:flex;flex-direction:column} .conteudo{flex:1;width:100%;max-width:1080px;margin:0 auto;padding:18px 16px calc(var(--nav-h) + 28px)} @media(min-width:900px){ .app{flex-direction:row} .conteudo{padding:28px 32px 48px} } /* ---------- marca ---------- */ /* O wordmark "Aurí" é o único lugar que mantém a serifada — é o logo, não um título de UI. Todo o resto do sistema usa Poppins/Inter. */ .marca{display:flex;align-items:center;gap:10px} .marca-sinal{width:34px;height:34px;border-radius:10px;background:var(--marca);display:grid;place-items:center;flex:none;overflow:hidden} .marca-sinal img{width:100%;height:100%;object-fit:cover} .marca-sinal i{width:12px;height:12px;border-radius:50%;background:var(--dourado);box-shadow:0 0 0 4px rgba(247,200,43,.30)} .marca-nome{font-family:"Cormorant Garamond",Georgia,serif;font-weight:700;font-size:21px;letter-spacing:.01em;line-height:1;color:var(--tinta)} .marca-sub{font-family:"Poppins",sans-serif;font-size:10.5px;font-weight:600;color:var(--cinza);letter-spacing:.09em;text-transform:uppercase} /* ---------- topo mobile ---------- */ .topo{display:flex;align-items:center;justify-content:space-between;gap:12px; padding:12px 16px;background:var(--branco);border-bottom:1px solid var(--linha);position:sticky;top:0;z-index:20} .topo-acoes{display:flex;align-items:center;gap:10px;flex:none} .topo-sino{width:36px;height:36px;border-radius:50%;background:var(--papel); display:grid;place-items:center;flex:none} .topo-sino .icone-svg{background:none;padding:0;width:19px;height:19px} .topo-avatar{width:36px;height:36px;border-radius:50%;flex:none;overflow:hidden; display:grid;place-items:center;background:var(--marca)} .topo-avatar img{width:100%;height:100%;object-fit:cover} .topo-avatar span{color:var(--dourado);font-family:"Poppins",sans-serif;font-weight:700;font-size:13px} @media(min-width:900px){.topo{display:none}} /* ---------- navegação ---------- */ .nav{position:fixed;bottom:0;left:0;right:0;height:var(--nav-h);z-index:30; background:var(--branco);border-top:1px solid var(--linha); display:flex;padding-bottom:env(safe-area-inset-bottom); scrollbar-width:thin;scrollbar-color:var(--linha) transparent} .nav::-webkit-scrollbar{width:6px} .nav::-webkit-scrollbar-track{background:transparent} .nav::-webkit-scrollbar-thumb{background:var(--linha);border-radius:999px} .nav::-webkit-scrollbar-thumb:hover{background:var(--cinza)} .nav a,.nav button{font:inherit;flex-direction:column;align-items:center;justify-content:center;gap:3px; font-size:11px;font-weight:600;color:var(--cinza);text-decoration:none; min-height:44px;background:none;border:0;cursor:pointer;padding:0} .nav-primario{display:flex;flex:1} .nav a.ativo{color:var(--tinta)} .nav a.ativo .icone-svg{background:var(--marca);color:var(--dourado)} .icone-svg{width:32px;height:32px;padding:7px;box-sizing:border-box;border-radius:9px; background:var(--papel);transition:background-color .16s,color .16s;flex:none;display:inline-flex} .icone-svg use{stroke:currentColor} /* mobile: só os itens "primário" ficam na barra fixa — o resto mora no painel "Mais", que se abre por cima em vez de espremer a barra toda. */ .nav-secundario,.nav-marca,.nav-rodape,.nav-fechar{display:none} .nav-cortina{display:none} @media(max-width:899px){ .nav-mais-abrir{display:flex;flex:1} } /* painel "Mais" — desliza da direita, cobre a tela, some ao fechar. É o MESMO elemento