/* ========================================================================== Riba HUB — folha de estilo única Baseada no Guia Visual Riba v0.1 (paleta, tipografia e elementos gráficos). Sumário 01. Tokens da marca 02. Reset e base 03. Tipografia e elementos gráficos (linha de trajeto) 04. Fundo futurista (canvas + malha + auroras) 05. Cabeçalho e navegação 06. Botões e chips 07. Cards e grades 08. Hero da Home 09. Busca global 10. Páginas internas (BI, chamados, benefícios, ferramentas) 11. Login 12. Rodapé, erros e utilitários 13. Responsivo e acessibilidade ========================================================================== */ /* ------------------------------------------------- 01. Tokens da marca --- */ :root { /* Cores principais do guia */ --riba-laranja: #ff8f1f; --riba-offwhite: #f5f0ed; --riba-preto: #000000; /* Cores de apoio do guia */ --riba-teal: #115e67; --riba-terra: #a64214; --riba-areia: #bfad7d; /* Derivadas para interface (não substituem a paleta, apenas modulam) */ --bg-0: #070707; --bg-1: #0d0d0e; --bg-2: #141416; --superficie: rgba(245, 240, 237, 0.045); --superficie-forte: rgba(245, 240, 237, 0.08); --borda: rgba(245, 240, 237, 0.12); --borda-forte: rgba(245, 240, 237, 0.22); --texto: #f5f0ed; --texto-suave: rgba(245, 240, 237, 0.66); --texto-fraco: rgba(245, 240, 237, 0.42); --laranja-brilho: rgba(255, 143, 31, 0.35); --teal-brilho: rgba(17, 94, 103, 0.55); /* Laranja da marca em dois papéis: preenchimento (sempre o HEX exato do guia) e texto (escurecido no tema claro, onde o laranja puro não teria contraste suficiente sobre fundo branco). */ --laranja-cheio: #ff8f1f; /* Véus e superfícies translúcidas, isoladas para o tema poder trocá-las. */ --veu-topo: rgba(7, 7, 7, 0.72); --veu-menu: rgba(13, 13, 14, 0.96); --veu-modal: rgba(4, 4, 4, 0.82); --veu-caixa: rgba(13, 13, 14, 0.97); --veu-stat: rgba(7, 7, 7, 0.42); --veu-login: rgba(7, 7, 7, 0.7); --grade-linha: rgba(245, 240, 237, 0.045); --grao-opacidade: 0.035; --malha-opacidade: 0.62; --aurora-laranja: rgba(255, 143, 31, 0.16); --aurora-teal: rgba(17, 94, 103, 0.28); --aurora-terra: rgba(166, 66, 20, 0.14); --ms-fundo: #f5f0ed; --ms-texto: #1b1b1b; /* Texto dos chips coloridos: precisa de tom próprio em cada tema para manter contraste legível sobre o fundo translúcido. */ --chip-teal-texto: #7fd4dd; --chip-areia-texto: #bfad7d; --esquema: dark; /* Tipografia — Favorit Pro / Artegra Sans são licenciadas. Space Grotesk e Inter são as substitutas livres mais próximas. Para usar as fontes oficiais, veja o README (seção Tipografia). */ --fonte-titulo: "Favorit Pro", "Artegra Sans Extended", "Space Grotesk", "Segoe UI", system-ui, sans-serif; --fonte-texto: "Favorit STD Lyning", "Inter", "Segoe UI", system-ui, sans-serif; /* Ritmo */ --raio: 18px; --raio-sm: 12px; --raio-lg: 28px; --gap: clamp(16px, 2vw, 24px); --container: 1240px; --header-h: 76px; --transicao: 280ms cubic-bezier(0.22, 1, 0.36, 1); --sombra: 0 24px 60px -28px rgba(0, 0, 0, 0.9); --sombra-laranja: 0 24px 70px -30px rgba(255, 143, 31, 0.55); } /* Tema claro — redefine apenas tokens, nunca componentes. Ativado pelo atributo data-tema="claro" no , que o usuário escolhe no cabeçalho. */ :root[data-tema="claro"] { --bg-0: #faf7f4; --bg-1: #ffffff; --bg-2: #f2ece6; --superficie: rgba(26, 22, 19, 0.035); --superficie-forte: rgba(26, 22, 19, 0.06); --borda: rgba(26, 22, 19, 0.14); --borda-forte: rgba(26, 22, 19, 0.26); --texto: #1a1613; --texto-suave: rgba(26, 22, 19, 0.72); --texto-fraco: rgba(26, 22, 19, 0.5); --riba-laranja: #b3610b; --riba-teal: #0f5158; --veu-topo: rgba(250, 247, 244, 0.82); --veu-menu: rgba(255, 255, 255, 0.98); --veu-modal: rgba(60, 50, 42, 0.4); --veu-caixa: rgba(255, 255, 255, 0.99); --veu-stat: rgba(255, 255, 255, 0.72); --veu-login: rgba(250, 247, 244, 0.86); --grade-linha: rgba(26, 22, 19, 0.05); --grao-opacidade: 0.02; --malha-opacidade: 0.3; --aurora-laranja: rgba(255, 143, 31, 0.14); --aurora-teal: rgba(17, 94, 103, 0.1); --aurora-terra: rgba(166, 66, 20, 0.07); --ms-fundo: #1a1613; --ms-texto: #f5f0ed; --chip-teal-texto: #0b4a52; --chip-areia-texto: #6b5a2b; --sombra: 0 18px 44px -24px rgba(60, 45, 30, 0.4); --sombra-laranja: 0 18px 50px -26px rgba(255, 143, 31, 0.5); --esquema: light; } /* --------------------------------------------------- 02. Reset e base --- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; /* Impede que o cabeçalho fixo cubra o alvo de uma âncora (#id do card). */ scroll-padding-top: calc(var(--header-h) + 20px); } body { margin: 0; min-height: 100vh; color-scheme: var(--esquema); background: var(--bg-0); color: var(--texto); font-family: var(--fonte-texto); font-size: 15px; line-height: 1.6; letter-spacing: 0.005em; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; } ::selection { background: var(--laranja-cheio); color: var(--riba-preto); } /* Barra de rolagem discreta, no tom da marca */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--bg-0); } ::-webkit-scrollbar-thumb { background: rgba(255, 143, 31, 0.28); border-radius: 99px; border: 3px solid var(--bg-0); } ::-webkit-scrollbar-thumb:hover { background: rgba(255, 143, 31, 0.5); } .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(18px, 4vw, 40px); } /* ------------------------ 03. Tipografia e elementos gráficos da marca --- */ h1, h2, h3, h4 { font-family: var(--fonte-titulo); font-weight: 500; line-height: 1.08; letter-spacing: -0.025em; margin: 0; } h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); } h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); } h3 { font-size: 1.15rem; letter-spacing: -0.015em; } p { margin: 0 0 1em; } .olho { font-family: var(--fonte-titulo); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--riba-laranja); display: inline-flex; align-items: center; gap: 12px; } /* Traço curto que aparece nas margens do guia visual */ .olho::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: 0.8; } /* "Linha de trajeto": elemento gráfico central da marca — um sublinhado que vira canto, como o traçado de uma rua no mapa. */ .trajeto { position: relative; display: inline-block; padding-bottom: 0.12em; } .trajeto::after { content: ""; position: absolute; left: 0; right: -0.18em; bottom: 0; height: 3px; background: var(--laranja-cheio); transform-origin: left; animation: tracar 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.25s backwards; } .trajeto::before { content: ""; position: absolute; right: -0.18em; bottom: 0; width: 3px; height: 0.42em; background: var(--laranja-cheio); animation: subir 0.5s cubic-bezier(0.22, 1, 0.36, 1) 1.15s backwards; } @keyframes tracar { from { transform: scaleX(0); } } @keyframes subir { from { height: 0; } } .destaque-laranja { color: var(--riba-laranja); } /* Logotipo oficial em SVG (app/templates/_logo.html), com fill=currentColor: uma única forma serve os dois temas e a versão sobre laranja. A barra do "i" vem do arquivo original da marca, não de um desenho aproximado. */ .logo { display: inline-flex; align-items: center; color: var(--texto); line-height: 0; } .logo-marca { display: block; width: auto; height: 21px; flex: none; } .logo--laranja { color: var(--riba-laranja); } .logo--grande .logo-marca { height: clamp(32px, 4.6vw, 44px); } /* Ícones: traço de 2px, cantos abertos — como definido no guia (grid 32x32) */ .ic { width: 24px; height: 24px; stroke: currentColor; stroke-width: 2; stroke-linecap: square; stroke-linejoin: miter; fill: none; flex: none; } .ic--g { width: 32px; height: 32px; } .ic--p { width: 18px; height: 18px; } /* -------------------------------------------- 04. Fundo futurista ------- */ .fundo { position: fixed; inset: 0; z-index: -2; overflow: hidden; background: radial-gradient(1200px 700px at 78% -8%, var(--aurora-laranja), transparent 60%), radial-gradient(900px 600px at 8% 8%, var(--aurora-teal), transparent 62%), radial-gradient(800px 800px at 50% 110%, var(--aurora-terra), transparent 60%), var(--bg-0); } #malha { position: absolute; inset: 0; width: 100%; height: 100%; opacity: var(--malha-opacidade); /* Concentra a malha no topo, deixando o miolo da página limpo para leitura. */ mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.45) 52%, transparent 90%); -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.45) 52%, transparent 90%); } /* Grade de ruas em perspectiva */ .fundo::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--grade-linha) 1px, transparent 1px), linear-gradient(90deg, var(--grade-linha) 1px, transparent 1px); background-size: 68px 68px; mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 20%, transparent 78%); -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 20%, transparent 78%); } /* Ruído sutil para tirar o aspecto "plástico" dos gradientes */ .grao { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: var(--grao-opacidade); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ---------------------------------------- 05. Cabeçalho e navegação ----- */ .topo { position: sticky; top: 0; z-index: 60; height: var(--header-h); display: flex; align-items: center; background: var(--veu-topo); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); border-bottom: 1px solid var(--borda); } .topo__inner { display: flex; align-items: center; gap: clamp(14px, 2.5vw, 32px); width: 100%; } .topo__marca { display: flex; align-items: center; gap: 12px; flex: none; } .topo__marca .selo { font-family: var(--fonte-titulo); font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--riba-laranja); border: 1px solid rgba(255, 143, 31, 0.4); border-radius: 99px; padding: 3px 9px; line-height: 1; } .nav { display: flex; align-items: center; gap: 4px; margin-left: auto; } .nav a { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 99px; font-size: 0.86rem; font-weight: 500; color: var(--texto-suave); transition: color var(--transicao), background var(--transicao); white-space: nowrap; } .nav a:hover { color: var(--texto); background: var(--superficie); } .nav a.ativo { color: var(--riba-preto); background: var(--laranja-cheio); } .nav a.ativo .ic { stroke: var(--riba-preto); } .topo__acoes { display: flex; align-items: center; gap: 10px; flex: none; } .btn-busca { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--borda); background: var(--superficie); color: var(--texto-suave); font-size: 0.84rem; transition: var(--transicao); } .btn-busca:hover { border-color: rgba(255, 143, 31, 0.55); color: var(--texto); } /* Seletor de tema: mostra o ícone da ação, não o do estado atual. */ .btn-tema { width: 40px; height: 40px; border-radius: 99px; border: 1px solid var(--borda); background: var(--superficie); color: var(--texto-suave); display: grid; place-items: center; flex: none; transition: var(--transicao); } .btn-tema:hover { border-color: rgba(255, 143, 31, 0.55); color: var(--texto); } .btn-tema .ic { grid-area: 1 / 1; } .btn-tema [data-icone="lua"] { display: none; } :root[data-tema="claro"] .btn-tema [data-icone="sol"] { display: none; } :root[data-tema="claro"] .btn-tema [data-icone="lua"] { display: block; } .btn-busca kbd { font-family: var(--fonte-texto); font-size: 0.68rem; border: 1px solid var(--borda); border-radius: 6px; padding: 2px 6px; color: var(--texto-fraco); } /* Perfil */ .perfil { position: relative; } .perfil__botao { display: flex; align-items: center; gap: 10px; padding: 5px 6px 5px 5px; border-radius: 99px; border: 1px solid var(--borda); background: var(--superficie); color: var(--texto); transition: var(--transicao); } .perfil__botao:hover { border-color: rgba(255, 143, 31, 0.5); } .avatar { width: 30px; height: 30px; border-radius: 99px; display: grid; place-items: center; font-family: var(--fonte-titulo); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; color: var(--riba-preto); background: linear-gradient(140deg, var(--laranja-cheio), #ffc07a); flex: none; } .perfil__nome { font-size: 0.82rem; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .menu { position: absolute; right: 0; top: calc(100% + 10px); width: 264px; padding: 8px; border-radius: var(--raio); border: 1px solid var(--borda); background: var(--veu-menu); backdrop-filter: blur(20px); box-shadow: var(--sombra); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: var(--transicao); } .menu[data-aberto="true"] { opacity: 1; visibility: visible; transform: translateY(0); } .menu__cabeca { padding: 12px 12px 14px; border-bottom: 1px solid var(--borda); margin-bottom: 6px; } .menu__cabeca strong { display: block; font-size: 0.9rem; } .menu__cabeca span { font-size: 0.78rem; color: var(--texto-fraco); word-break: break-all; } .menu a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--raio-sm); font-size: 0.86rem; color: var(--texto-suave); transition: var(--transicao); } .menu a:hover { background: var(--superficie); color: var(--texto); } .menu-mobile { display: none; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--borda); background: var(--superficie); color: var(--texto); place-items: center; } /* --------------------------------------------- 06. Botões e chips ------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 48px; padding: 0 24px; border-radius: 99px; border: 1px solid transparent; font-family: var(--fonte-titulo); font-size: 0.92rem; font-weight: 500; letter-spacing: -0.01em; transition: var(--transicao); position: relative; overflow: hidden; } .btn--primario { background: var(--laranja-cheio); color: var(--riba-preto); box-shadow: var(--sombra-laranja); } .btn--primario:hover { transform: translateY(-2px); box-shadow: 0 28px 60px -24px rgba(255, 143, 31, 0.75); } .btn--primario .ic { stroke: var(--riba-preto); } .btn--vazado { border-color: var(--borda-forte); color: var(--texto); background: var(--superficie); } .btn--vazado:hover { border-color: var(--riba-laranja); color: var(--riba-laranja); transform: translateY(-2px); } .btn--bloco { width: 100%; } .btn--ms { background: var(--ms-fundo); color: var(--ms-texto); height: 54px; font-size: 0.98rem; } .btn--ms:hover { transform: translateY(-2px); box-shadow: 0 26px 60px -28px rgba(245, 240, 237, 0.6); } .chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 99px; border: 1px solid var(--borda); background: var(--superficie); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--texto-suave); white-space: nowrap; } .chip--laranja { border-color: rgba(255, 143, 31, 0.42); background: rgba(255, 143, 31, 0.12); color: var(--riba-laranja); } .chip--teal { border-color: rgba(17, 94, 103, 0.6); background: rgba(17, 94, 103, 0.22); color: var(--chip-teal-texto); } .chip--areia { border-color: rgba(191, 173, 125, 0.45); background: rgba(191, 173, 125, 0.14); color: var(--chip-areia-texto); } .chip--terra { border-color: rgba(166, 66, 20, 0.5); background: rgba(166, 66, 20, 0.18); color: #e08a5f; } /* Filtros de categoria */ .filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; } .filtro { padding: 8px 16px; border-radius: 99px; border: 1px solid var(--borda); background: transparent; color: var(--texto-suave); font-size: 0.82rem; transition: var(--transicao); } .filtro:hover { border-color: var(--borda-forte); color: var(--texto); } .filtro[aria-pressed="true"] { background: var(--laranja-cheio); border-color: var(--laranja-cheio); color: var(--riba-preto); font-weight: 500; } /* ------------------------------------------- 07. Cards e grades --------- */ .grade { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(288px, 1fr)); } .grade--2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); } .grade--4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } .card { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 24px; border-radius: var(--raio); border: 1px solid var(--borda); background: linear-gradient(160deg, var(--superficie-forte), rgba(245, 240, 237, 0.02)); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); overflow: hidden; transition: transform var(--transicao), border-color var(--transicao), box-shadow var(--transicao); transform-style: preserve-3d; } /* Brilho que segue o cursor (posição vem do JS via --mx/--my) */ .card::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; background: radial-gradient( 380px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 143, 31, 0.16), transparent 62% ); opacity: 0; transition: opacity var(--transicao); pointer-events: none; } .card:hover { transform: translateY(-5px); border-color: rgba(255, 143, 31, 0.45); box-shadow: var(--sombra); } .card:hover::before { opacity: 1; } /* Canto de trajeto no card, ecoando o elemento gráfico da marca */ .card::after { content: ""; position: absolute; top: 0; left: 24px; width: 34px; height: 2px; background: var(--laranja-cheio); transform: scaleX(0); transform-origin: left; transition: transform var(--transicao); } .card:hover::after { transform: scaleX(1); } .card__topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .card__icone { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; color: var(--riba-laranja); background: rgba(255, 143, 31, 0.1); border: 1px solid rgba(255, 143, 31, 0.24); flex: none; transition: var(--transicao); } .card:hover .card__icone { background: rgba(255, 143, 31, 0.18); transform: scale(1.05) rotate(-3deg); } .card__icone--teal { color: #7fd4dd; background: rgba(17, 94, 103, 0.22); border-color: rgba(17, 94, 103, 0.5); } .card__icone--areia { color: var(--riba-areia); background: rgba(191, 173, 125, 0.14); border-color: rgba(191, 173, 125, 0.35); } .card h3 { margin: 0; } .card__desc { font-size: 0.88rem; color: var(--texto-suave); margin: 0; flex: 1; } .card__meta { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; } .card__rodape { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; margin-top: auto; border-top: 1px solid var(--borda); font-size: 0.78rem; color: var(--texto-fraco); } .card__abrir { display: inline-flex; align-items: center; gap: 7px; color: var(--riba-laranja); font-weight: 500; font-size: 0.82rem; } .card__abrir .ic { transition: transform var(--transicao); } .card:hover .card__abrir .ic { transform: translate(3px, -3px); } .card--link { cursor: pointer; } /* Card compacto (links rápidos) */ .atalho { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--raio-sm); border: 1px solid var(--borda); background: var(--superficie); transition: var(--transicao); } .atalho:hover { border-color: rgba(255, 143, 31, 0.5); background: rgba(255, 143, 31, 0.07); transform: translateX(4px); } .atalho span { font-size: 0.9rem; font-weight: 500; } .atalho .ic:first-child { color: var(--riba-laranja); } .atalho .ic:last-child { margin-left: auto; color: var(--texto-fraco); } /* ------------------------------------------------- 08. Hero da Home ----- */ .hero { position: relative; padding: clamp(56px, 9vw, 110px) 0 clamp(40px, 6vw, 72px); } .hero__grade { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: center; } .hero h1 { margin: 22px 0 20px; font-size: clamp(2.4rem, 4.8vw, 3.9rem); text-wrap: balance; } .hero__sub { font-size: clamp(0.98rem, 1.5vw, 1.12rem); color: var(--texto-suave); max-width: 54ch; margin-bottom: 32px; } .hero__acoes { display: flex; flex-wrap: wrap; gap: 12px; } /* Painel de números */ .painel-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 22px; border-radius: var(--raio-lg); border: 1px solid var(--borda); background: linear-gradient(150deg, rgba(245, 240, 237, 0.07), rgba(17, 94, 103, 0.12)); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: var(--sombra); } .stat { padding: 18px; border-radius: var(--raio); background: var(--veu-stat); border: 1px solid var(--borda); } .stat__num { font-family: var(--fonte-titulo); font-size: clamp(2rem, 4vw, 2.7rem); font-weight: 500; line-height: 1; letter-spacing: -0.04em; color: var(--riba-laranja); } .stat__rot { display: block; margin-top: 8px; font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--texto-fraco); } /* Faixa de aviso */ .aviso { display: flex; align-items: flex-start; gap: 14px; padding: 16px 20px; border-radius: var(--raio); border: 1px solid rgba(17, 94, 103, 0.5); background: rgba(17, 94, 103, 0.16); font-size: 0.88rem; color: var(--texto-suave); } .aviso .ic { color: #7fd4dd; margin-top: 2px; } .aviso strong { color: var(--texto); } /* Seções */ .secao { padding: clamp(40px, 6vw, 72px) 0; } .secao__cabeca { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 32px; } .secao__cabeca h2 { margin-top: 14px; } .secao__cabeca p { color: var(--texto-suave); max-width: 58ch; margin: 10px 0 0; font-size: 0.94rem; } .link-secao { display: inline-flex; align-items: center; gap: 8px; color: var(--riba-laranja); font-size: 0.88rem; font-weight: 500; transition: gap var(--transicao); } .link-secao:hover { gap: 13px; } /* ------------------------------------------------ 09. Busca global ------ */ .busca { position: fixed; inset: 0; z-index: 200; display: none; padding: clamp(60px, 12vh, 140px) 20px 40px; background: var(--veu-modal); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .busca[data-aberto="true"] { display: block; animation: aparecer 200ms ease; } @keyframes aparecer { from { opacity: 0; } } .busca__caixa { width: min(680px, 100%); margin-inline: auto; border-radius: var(--raio-lg); border: 1px solid var(--borda-forte); background: var(--veu-caixa); box-shadow: var(--sombra); overflow: hidden; } .busca__campo { display: flex; align-items: center; gap: 14px; padding: 20px 24px; border-bottom: 1px solid var(--borda); } .busca__campo .ic { color: var(--riba-laranja); } .busca__campo input { flex: 1; border: none; background: transparent; color: var(--texto); font-family: var(--fonte-titulo); font-size: 1.18rem; outline: none; } .busca__campo input::placeholder { color: var(--texto-fraco); } /* O "x" nativo do input[type=search] vem azul no Chrome — neutraliza. */ .busca__campo input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; cursor: pointer; background: currentColor; opacity: 0.45; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 5l14 14M19 5L5 19' stroke='%23000' stroke-width='2.5' fill='none'/%3E%3C/svg%3E") center/contain no-repeat; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 5l14 14M19 5L5 19' stroke='%23000' stroke-width='2.5' fill='none'/%3E%3C/svg%3E") center/contain no-repeat; } .busca__campo input::-webkit-search-cancel-button:hover { opacity: 1; } .busca__resultados { max-height: min(52vh, 460px); overflow-y: auto; padding: 8px; } .resultado { display: flex; align-items: center; gap: 14px; padding: 13px 16px; border-radius: var(--raio-sm); transition: background var(--transicao); } .resultado:hover, .resultado.selecionado { background: var(--superficie-forte); } .resultado .ic { color: var(--riba-laranja); } .resultado__txt strong { display: block; font-size: 0.92rem; font-weight: 500; } .resultado__txt span { font-size: 0.79rem; color: var(--texto-fraco); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .resultado .chip { margin-left: auto; } .busca__vazio { padding: 34px 24px; text-align: center; color: var(--texto-fraco); font-size: 0.88rem; } /* ------------------------------------- 10. Páginas internas ------------- */ .pagina-cabeca { padding: clamp(40px, 6vw, 72px) 0 clamp(24px, 3vw, 40px); border-bottom: 1px solid var(--borda); margin-bottom: clamp(30px, 4vw, 48px); } .pagina-cabeca h1 { font-size: clamp(2.1rem, 4.5vw, 3.4rem); margin: 18px 0 16px; } .pagina-cabeca p { color: var(--texto-suave); max-width: 66ch; font-size: 1rem; margin: 0; } .grupo { margin-bottom: clamp(36px, 5vw, 56px); } .grupo__titulo { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; } .grupo__titulo h2 { font-size: 1.3rem; } .grupo__titulo::after { content: ""; flex: 1; height: 1px; background: var(--borda); } .grupo__contagem { font-size: 0.76rem; color: var(--texto-fraco); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; flex: none; } /* Tabela de SLA */ .tabela-wrap { overflow-x: auto; border-radius: var(--raio); border: 1px solid var(--borda); background: var(--superficie); } table.sla { width: 100%; border-collapse: collapse; min-width: 620px; font-size: 0.88rem; } table.sla th, table.sla td { padding: 15px 18px; text-align: left; border-bottom: 1px solid var(--borda); } table.sla th { font-family: var(--fonte-titulo); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--texto-fraco); font-weight: 500; } table.sla tr:last-child td { border-bottom: none; } table.sla td:first-child { font-weight: 500; } .pri { display: inline-flex; align-items: center; gap: 8px; } .pri::before { content: ""; width: 8px; height: 8px; border-radius: 99px; background: currentColor; box-shadow: 0 0 12px currentColor; } .pri--critico { color: #ff5a3d; } .pri--alto { color: var(--riba-laranja); } .pri--medio { color: var(--riba-areia); } .pri--baixo { color: #7fd4dd; } /* Acordeão de FAQ */ .faq details { border: 1px solid var(--borda); border-radius: var(--raio-sm); background: var(--superficie); margin-bottom: 10px; overflow: hidden; } .faq summary { padding: 17px 20px; cursor: pointer; font-weight: 500; font-size: 0.94rem; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; transition: color var(--transicao); } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; font-family: var(--fonte-titulo); font-size: 1.4rem; line-height: 1; color: var(--riba-laranja); transition: transform var(--transicao); flex: none; } .faq details[open] summary::after { transform: rotate(45deg); } .faq summary:hover { color: var(--riba-laranja); } .faq p { padding: 0 20px 18px; margin: 0; color: var(--texto-suave); font-size: 0.9rem; } /* Lista de exemplos dentro dos cards de categoria */ .exemplos { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; } .exemplos li { position: relative; padding-left: 18px; font-size: 0.82rem; color: var(--texto-fraco); } .exemplos li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 9px; height: 1px; background: var(--laranja-cheio); } /* Bloco de benefício */ .beneficio-tag { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: var(--raio-sm); background: rgba(255, 143, 31, 0.12); border: 1px dashed rgba(255, 143, 31, 0.45); color: var(--riba-laranja); font-family: var(--fonte-titulo); font-size: 0.92rem; font-weight: 500; } .como-usar { font-size: 0.82rem; color: var(--texto-fraco); border-left: 2px solid var(--borda); padding-left: 14px; margin: 0; } /* ------------------------------------------------------ 11. Login ------- */ .login { min-height: 100vh; display: grid; grid-template-columns: 1fr minmax(420px, 480px); } .login__arte { position: relative; padding: clamp(40px, 6vw, 72px); display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; border-right: 1px solid var(--borda); } .login__frase { font-family: var(--fonte-titulo); font-size: clamp(2.2rem, 4.4vw, 3.6rem); font-weight: 500; line-height: 1.06; letter-spacing: -0.035em; max-width: 15ch; } .login__marcas { display: flex; gap: 8px; } .login__marcas i { width: 46px; height: 6px; border-radius: 99px; display: block; } .login__painel { display: flex; flex-direction: column; justify-content: center; padding: clamp(32px, 5vw, 60px); background: var(--veu-login); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } .login__painel h1 { font-size: clamp(1.8rem, 3vw, 2.4rem); margin: 20px 0 12px; } .login__painel > p { color: var(--texto-suave); font-size: 0.95rem; margin-bottom: 32px; } .login__nota { display: flex; gap: 12px; align-items: flex-start; margin-top: 26px; padding: 15px 17px; border-radius: var(--raio-sm); border: 1px solid var(--borda); background: var(--superficie); font-size: 0.82rem; color: var(--texto-fraco); } .login__nota .ic { color: var(--riba-laranja); margin-top: 1px; } .separador { display: flex; align-items: center; gap: 14px; margin: 26px 0; color: var(--texto-fraco); font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; } .separador::before, .separador::after { content: ""; flex: 1; height: 1px; background: var(--borda); } /* Mensagens flash */ .flash { display: flex; align-items: flex-start; gap: 12px; padding: 14px 17px; border-radius: var(--raio-sm); margin-bottom: 18px; font-size: 0.87rem; border: 1px solid; } .flash--erro { border-color: rgba(255, 90, 61, 0.5); background: rgba(255, 90, 61, 0.13); color: #ffb3a3; } .flash--info { border-color: rgba(17, 94, 103, 0.6); background: rgba(17, 94, 103, 0.2); color: #9fe0e8; } /* ------------------------------- 12. Rodapé, erros e utilitários -------- */ .rodape { margin-top: clamp(48px, 8vw, 96px); padding: 40px 0 32px; border-top: 1px solid var(--borda); } .rodape__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 0.8rem; color: var(--texto-fraco); } .rodape__links { display: flex; gap: 22px; flex-wrap: wrap; } .rodape__links a:hover { color: var(--riba-laranja); } .pagina-erro { min-height: 78vh; display: grid; place-items: center; text-align: center; padding: 60px 20px; } .pagina-erro .codigo { font-family: var(--fonte-titulo); font-size: clamp(6rem, 20vw, 12rem); font-weight: 500; line-height: 0.85; letter-spacing: -0.06em; color: transparent; -webkit-text-stroke: 2px rgba(255, 143, 31, 0.45); } .pagina-erro p { color: var(--texto-suave); max-width: 46ch; margin: 16px auto 32px; } .vazio { padding: 48px 24px; text-align: center; border: 1px dashed var(--borda); border-radius: var(--raio); color: var(--texto-fraco); font-size: 0.9rem; } .sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .pular { position: absolute; left: -9999px; z-index: 999; } .pular:focus { left: 16px; top: 16px; padding: 10px 18px; background: var(--laranja-cheio); color: var(--riba-preto); border-radius: 99px; } /* Entrada suave dos elementos ao rolar */ [data-revelar] { opacity: 0; transform: translateY(22px); transition: opacity 700ms ease, transform 700ms cubic-bezier(0.22, 1, 0.36, 1); } [data-revelar].visivel { opacity: 1; transform: none; } /* --------------------------------- 13. Responsivo e acessibilidade ------ */ @media (max-width: 1080px) { .hero__grade { grid-template-columns: 1fr; } .nav a span { display: none; } .nav a { padding: 9px 11px; } } @media (max-width: 860px) { .login { grid-template-columns: 1fr; } .login__arte { display: none; } .login__painel { min-height: 100vh; } .perfil__nome { display: none; } .btn-busca span, .btn-busca kbd { display: none; } .btn-busca { width: 40px; justify-content: center; padding: 0; } } @media (max-width: 720px) { :root { --header-h: 66px; } .menu-mobile { display: grid; } .nav { position: fixed; inset: var(--header-h) 0 auto 0; flex-direction: column; align-items: stretch; gap: 4px; padding: 14px; background: rgba(10, 10, 11, 0.98); backdrop-filter: blur(20px); border-bottom: 1px solid var(--borda); transform: translateY(-120%); transition: transform var(--transicao); margin-left: 0; } .nav[data-aberto="true"] { transform: none; } .nav a { padding: 14px 16px; border-radius: var(--raio-sm); font-size: 0.95rem; } .nav a span { display: inline; } .painel-stats { grid-template-columns: repeat(2, 1fr); padding: 14px; } .stat { padding: 14px; } .topo__marca .selo { display: none; } .secao__cabeca { align-items: flex-start; } /* Títulos longos precisam de folga na margem direita em telas estreitas. */ .hero h1 { font-size: clamp(2rem, 8.4vw, 2.6rem); } .hero__acoes .btn { width: 100%; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } [data-revelar] { opacity: 1; transform: none; } #malha { display: none; } } :focus-visible { outline: 2px solid var(--laranja-cheio); outline-offset: 3px; border-radius: 4px; } @media print { .fundo, .grao, .topo, .rodape, .busca { display: none !important; } body { background: #fff; color: #000; } .card { border: 1px solid #ccc; background: #fff; } } /* ========================================================================== 14. Hub 3D — grafismo da Home Logo da Riba ao centro, serviços orbitando e ligados por raios. Construído com transformações 3D do próprio CSS (sem biblioteca): o palco inclina conforme o ponteiro e o anel gira devagar; cada ícone contra-gira para permanecer de pé. Em telas sem ponteiro, só o giro lento permanece. ========================================================================== */ .hub3d { --raio: clamp(88px, 24vw, 142px); --disco: clamp(88px, 24vw, 116px); --rx: 16deg; --ry: -18deg; position: relative; width: 100%; max-width: 440px; aspect-ratio: 1 / 1; margin-inline: auto; perspective: 1100px; } .hub3d__palco { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1); } .hub3d:hover .hub3d__palco { transition-duration: 120ms; } /* Órbitas: elipses achatadas que dão o plano da cena */ .hub3d__orbita { position: absolute; left: 50%; top: 50%; border-radius: 50%; border: 1px solid var(--borda); transform: translate(-50%, -50%) rotateX(76deg); } .hub3d__orbita--1 { width: 56%; height: 56%; } .hub3d__orbita--2 { width: 84%; height: 84%; border-style: dashed; opacity: 0.7; } /* Anel que carrega os serviços */ .hub3d__anel { position: absolute; inset: 0; transform-style: preserve-3d; animation: hub-orbitar 46s linear infinite; } .hub3d__raio { position: absolute; left: 50%; top: 50%; /* O raio começa na borda do disco central, não no meio dele: assim a linha nunca aparece por cima da marca. */ width: calc(var(--raio) - var(--disco) / 2 - 26px); height: 2px; margin-top: -1px; transform-origin: 0 50%; transform: rotate(var(--a)) translateX(calc(var(--disco) / 2 - 4px)) translateZ(10px); background: linear-gradient(90deg, rgba(255, 143, 31, 0.5), rgba(255, 143, 31, 0.07)); } .hub3d__no { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px; border-radius: 17px; display: grid; place-items: center; border: 1px solid var(--borda-forte); background: var(--superficie-forte); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--riba-laranja); transform: rotate(var(--a)) translateX(var(--raio)) rotate(calc(-1 * var(--a))) translateZ(22px); transition: border-color var(--transicao), box-shadow var(--transicao); } .hub3d:hover .hub3d__no { border-color: rgba(255, 143, 31, 0.55); box-shadow: 0 10px 26px -14px rgba(255, 143, 31, 0.7); } /* Contra-giro: mantém o pictograma de pé enquanto o anel roda */ .hub3d__face { display: grid; place-items: center; animation: hub-contra 46s linear infinite; } .hub3d__centro { position: absolute; left: 50%; top: 50%; width: var(--disco); height: var(--disco); transform: translate(-50%, -50%) translateZ(48px); border-radius: 50%; display: grid; place-items: center; /* Camada opaca embaixo: sem ela os raios apareceriam através do disco. */ background: radial-gradient(circle at 34% 28%, rgba(255, 143, 31, 0.26), rgba(255, 143, 31, 0) 70%), var(--bg-1); border: 1px solid rgba(255, 143, 31, 0.45); box-shadow: 0 0 0 10px rgba(255, 143, 31, 0.05), var(--sombra-laranja); } .hub3d__centro .logo-marca { height: clamp(20px, 5.4vw, 26px); color: var(--riba-laranja); } .hub3d__legenda { position: absolute; left: 0; right: 0; bottom: -6px; text-align: center; font-family: var(--fonte-titulo); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--texto-fraco); } @keyframes hub-orbitar { to { transform: rotate(360deg); } } @keyframes hub-contra { to { transform: rotate(-360deg); } } /* ========================================================================== 15. Arquivos úteis e Blog ========================================================================== */ /* Duas colunas largas: o par nome + descrição precisa de linha inteira. */ .grade--arquivos { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); } @media (max-width: 900px) { .grade--arquivos { grid-template-columns: 1fr; } } .arquivo { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: var(--raio); border: 1px solid var(--borda); background: var(--superficie); transition: var(--transicao); } a.arquivo:hover { border-color: rgba(255, 143, 31, 0.5); background: rgba(255, 143, 31, 0.06); transform: translateY(-3px); } .arquivo__icone { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; flex: none; color: var(--riba-laranja); background: rgba(255, 143, 31, 0.1); border: 1px solid rgba(255, 143, 31, 0.24); } .arquivo__txt { min-width: 0; flex: 1; } .arquivo__txt strong { display: block; font-size: 0.95rem; font-weight: 500; } .arquivo__txt span { font-size: 0.82rem; color: var(--texto-fraco); } .arquivo__fim { flex: none; color: var(--texto-fraco); } .arquivo--breve { opacity: 0.72; } .grade--blog { grid-template-columns: repeat(auto-fit, minmax(460px, 1fr)); } @media (max-width: 900px) { .grade--blog { grid-template-columns: 1fr; } } .post { display: flex; flex-direction: column; gap: 12px; padding: 22px; border-radius: var(--raio); border: 1px solid var(--borda); background: var(--superficie); transition: var(--transicao); } .post:hover { border-color: rgba(255, 143, 31, 0.45); transform: translateY(-4px); } .post__olho { font-family: var(--fonte-titulo); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--riba-laranja); } .post h3 { font-size: 1.05rem; line-height: 1.25; text-wrap: balance; } .post__fim { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 8px; font-size: 0.82rem; font-weight: 500; color: var(--riba-laranja); } .post:hover .post__fim .ic { transform: translate(3px, -3px); } .post__fim .ic { transition: transform var(--transicao); } /* Redes sociais no rodapé */ .rodape__redes { display: flex; gap: 8px; } .rodape__redes a { width: 36px; height: 36px; border-radius: 99px; border: 1px solid var(--borda); display: grid; place-items: center; color: var(--texto-suave); transition: var(--transicao); } .rodape__redes a:hover { border-color: var(--laranja-cheio); color: var(--riba-laranja); transform: translateY(-2px); } /* ========================================================================== 16. Refinamentos para telas pequenas ========================================================================== */ @media (hover: none) { /* Sem ponteiro não há inclinação nem brilho que siga o cursor: o grafismo mantém apenas o giro, e os cards dispensam o efeito de hover. */ .hub3d__palco { transform: rotateX(14deg) rotateY(0deg); } .card:hover { transform: none; } } @media (max-width: 720px) { .hub3d { max-width: 320px; } .hub3d__no { width: 50px; height: 50px; margin: -25px; border-radius: 15px; } .arquivo { padding: 15px 16px; gap: 13px; } .post { padding: 18px; } .rodape__inner { flex-direction: column; align-items: flex-start; gap: 16px; } .rodape__links { gap: 14px 18px; } .secao__cabeca { margin-bottom: 22px; } .pagina-cabeca p { font-size: 0.95rem; } .grupo__titulo { flex-wrap: wrap; gap: 8px 14px; } .grupo__titulo::after { display: none; } .card { padding: 20px 18px; } .card__icone { width: 46px; height: 46px; border-radius: 13px; } .btn { height: 46px; padding: 0 20px; } .filtros { gap: 7px; margin-bottom: 22px; } .filtro { padding: 7px 13px; font-size: 0.8rem; } } @media (max-width: 560px) { /* Em telas estreitas o selo "Em breve" espremia o texto em duas palavras por linha: vira grade de duas colunas e o selo desce para a segunda. */ .arquivo { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px 13px; } .arquivo__icone { width: 40px; height: 40px; border-radius: 12px; } .arquivo__fim { grid-column: 2; justify-self: start; } } @media (max-width: 420px) { :root { --gap: 13px; } .container { padding-inline: 16px; } .hub3d { max-width: 286px; } .hub3d__no { width: 46px; height: 46px; margin: -23px; } .hub3d__no .ic--p { width: 16px; height: 16px; } .topo__marca .logo-marca { height: 18px; } .grade, .grade--2, .grade--4 { grid-template-columns: 1fr; } .card__rodape { flex-direction: column; align-items: flex-start; gap: 8px; } .fatos { gap: 10px 18px; } .busca { padding-top: 60px; } .busca__campo { padding: 16px 18px; } .busca__campo input { font-size: 1rem; } .login__painel { padding: 28px 20px; } } @media (prefers-reduced-motion: reduce) { .hub3d__anel, .hub3d__face { animation: none !important; } } /* ========================================================================== 17. Área do comercial — cards sem link ainda e catálogo de produtos ========================================================================== */ /* Card de item já cadastrado mas ainda sem endereço: mostra o conteúdo, deixa claro que não é clicável e não finge ser um link. */ .card--breve { opacity: 0.74; border-style: dashed; } .card--breve:hover { transform: none; } .grupo__nota { margin: -8px 0 20px; max-width: 62ch; color: var(--texto-suave); font-size: 0.92rem; } /* Mantém a linha decorativa entre o título e o link "ver todos". */ .grupo__titulo .link-secao { order: 2; flex: none; } .grupo__titulo::after { order: 1; } .catalogo .card__icone { color: var(--riba-laranja); } /* ========================================================================== 18. Cabeçalho com seis itens de navegação A aba Comercial fez o topo ficar mais largo que o container: aqui ele ganha um pouco mais de largura e vai apertando na ordem certa — primeiro o atalho de teclado, depois o espaçamento, e só então os rótulos dos links. ========================================================================== */ .topo__inner { max-width: 1400px; } @media (max-width: 1460px) { .btn-busca kbd { display: none; } .nav { gap: 2px; } .nav a { padding: 9px 10px; } .perfil__nome { max-width: 118px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } @media (max-width: 1200px) { .nav a span { display: none; } .nav a { padding: 9px 11px; } } /* ========================================================================== 19. Marca no login em telas pequenas O painel de arte (que carrega o logotipo) some abaixo de 860px, então a marca reaparece centralizada no topo do painel de entrada. ========================================================================== */ .login__marca { display: none; } @media (max-width: 860px) { .login__marca { display: block; margin: 0 auto 34px; width: max-content; color: var(--riba-laranja); } .login__marca .logo-marca { height: 34px; display: block; } .login__painel { justify-content: flex-start; padding-top: max(40px, env(safe-area-inset-top)); } }