/* ============================================================ AURA Design System / Design Tokens Uso: reportes executivos e apresentações em HTML. Importe este arquivo antes de qualquer estilo de página. ============================================================ */ :root { /* ---- Marca: espectro AURA (extraído do logo low-poly) ---- */ --aura-yellow: #FFC72C; --aura-orange: #F08A24; --aura-magenta: #E5337E; --aura-purple: #6A2C9B; --aura-indigo: #1F2C9B; /* azul profundo do logo (#0014a1 família) */ --aura-blue: #1565C0; --aura-cyan: #16A9C9; --aura-green: #4FB05A; /* Gradiente canônico da marca (sentido do logo: amarelo → verde) */ --aura-spectrum: linear-gradient( 100deg, var(--aura-yellow) 0%, var(--aura-orange) 16%, var(--aura-magenta) 33%, var(--aura-purple) 50%, var(--aura-indigo) 66%, var(--aura-cyan) 83%, var(--aura-green) 100% ); --aura-spectrum-soft: linear-gradient( 100deg, rgba(255,199,44,.18), rgba(229,51,126,.18), rgba(106,44,155,.18), rgba(22,169,201,.18) ); /* ---- Superfícies (tema escuro padrão) ---- */ --bg-0: #0B0B0D; /* fundo base */ --bg-1: #131316; /* cartão */ --bg-2: #1B1B20; /* cartão elevado / linhas alternadas */ --bg-3: #26262D; /* borda destacada / hover */ --hairline: rgba(255,255,255,.08); --hairline-strong: rgba(255,255,255,.16); /* ---- Texto ---- Valores calibrados para WCAG 2.1 AA (4,5:1 texto normal, 3:1 texto grande) no ponto mais claro do fundo oficial, ja com o veu de palco aplicado. Nao clareie o veu nem escureca estes tokens sem refazer a conta de contraste. */ --ink-1: #F4F4F6; /* títulos */ --ink-2: #CFCFD8; /* corpo */ --ink-3: #A7A8B4; /* legenda / metadados */ --ink-on-spectrum: #0B0B0D; /* ---- Estado ---- */ --pos: #4FB05A; --neg: #E5485F; --warn: #F0A924; /* ---- Espectro em texto ---- Os hex da paleta acima sao de uso GRAFICO (barra, icone, area de preenchimento). Varios reprovam como texto sobre o fundo escuro. Para texto e numero em destaque, use estas variantes: --aura-cyan #16A9C9 vira --aura-cyan-ink #4FC7E4 --aura-green #4FB05A vira --aura-green-ink #6FD07C --neg #E5485F vira --neg-ink #FF8291 Indigo, roxo e magenta nunca viram texto: ficam abaixo de 2,3:1 em qualquer fundo escuro da marca. */ --aura-cyan-ink: #4FC7E4; --aura-green-ink: #6FD07C; --neg-ink: #FF8291; /* ---- Tipografia ---- */ --font-sans: "Aptos", "Aptos Display", "Segoe UI", system-ui, -apple-system, sans-serif; --font-mono: "Aptos Mono", "Cascadia Code", ui-monospace, "SF Mono", monospace; /* Escala tipográfica (proporção 1.25, major third) */ --fs-display: clamp(2.6rem, 4.5vw, 3.8rem); --fs-h1: clamp(2rem, 3.2vw, 2.6rem); --fs-h2: 1.6rem; --fs-h3: 1.2rem; --fs-body: 1rem; --fs-small: .8125rem; --fs-micro: .6875rem; --lh-tight: 1.12; --lh-body: 1.6; /* ---- Espaço (escala de 4px) ---- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; /* ---- Raios / sombras / movimento ---- Cantos contínuos generosos (squircle-like) e curva de mola da Apple (.32,.72,0,1) para um movimento calmo e premium. */ --r-sm: 12px; --r-md: 18px; --r-lg: 28px; --r-xl: 36px; --r-pill: 999px; --shadow-1: 0 1px 2px rgba(0,0,0,.4); --shadow-2: 0 20px 60px -16px rgba(0,0,0,.6); --ease: cubic-bezier(.32,.72,0,1); --dur: .6s; --maxw: 1100px; /* largura máxima de leitura de texto corrido */ /* ---- Palco do deck (ver deck.css) ---- */ --stage-w: 1280px; --stage-h: 720px; } /* ============================================================ FUNDO PADRÃO AURA: imagem oficial (shutterstock_2461041861). Aplique a classe .aura-bg no . ============================================================ */ .aura-bg { background-color: var(--bg-0); background-image: url("assets/aura-bg.jpg"); background-size: cover; background-position: center; background-attachment: fixed; position: relative; } /* Veu de palco: camada escura CONSTANTE sobre a imagem. Medida: a textura oficial varia 2,09:1 entre suas areas fechadas e suas areas claras, entao o mesmo texto mudava de contraste conforme a posicao em que caia na tela. O veu colapsa essa variacao para 1,31:1 e o contraste deixa de depender de onde o texto esta. A vinheta anterior escurecia so as bordas e deixava o miolo sem protecao, que e onde a textura tem seus pontos mais claros. */ .aura-bg::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgba(9,9,12,.80) 0%, rgba(9,9,12,.70) 45%, rgba(9,9,12,.86) 100%); } .aura-bg > * { position: relative; z-index: 1; } /* ---- Base ---- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-2); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Sem sombra de texto. Ela nao e recurso de acessibilidade: nao e medivel e falha justamente nas areas claras da textura. O contraste vem do veu de palco acima, que e constante e verificavel. */ h1,h2,h3,h4 { color: var(--ink-1); line-height: var(--lh-tight); font-weight: 700; letter-spacing: -.02em; margin: 0; } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); font-weight: 600; } p { margin: 0 0 var(--s-4); } a { color: var(--aura-cyan); text-decoration: none; } strong { color: var(--ink-1); } /* ---- Utilitários de marca ---- */ /* Sem réplica de gradiente em CSS. O espectro da marca vem exclusivamente dos PNGs reais do logo (assets/aura-*-spectrum.png). Para destacar texto, use cor sólida da paleta. */ .aura-gradient-text { color: var(--ink-1); } .aura-rule { /* régua fina neutra */ height: 1px; border: 0; border-radius: var(--r-pill); background: var(--hairline-strong); } .aura-chip { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-micro); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); padding: var(--s-2) var(--s-4); border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-pill); background: rgba(19,19,22,.5); -webkit-backdrop-filter: blur(14px) saturate(130%); backdrop-filter: blur(14px) saturate(130%); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); } .aura-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--aura-cyan); box-shadow: 0 0 0 3px rgba(22,169,201,.18); } /* ---- Palco do logo ---- O espectro tem trechos azul-marinho/roxo que somem na textura escura. .aura-mark-stage cria um halo de luz contido (spotlight, não neon) atrás da marca; o logo ganha uma borda de luz + difusão escura para separar tanto as partes claras quanto as escuras do fundo. */ .aura-mark-stage { position: relative; display: inline-block; } .aura-mark { display: block; /* Sem brilho ao redor. Apenas uma difusão escura sutil para separar o logo da textura. */ filter: drop-shadow(0 6px 22px rgba(0,0,0,.5)); } /* Scroll edge effect (iOS 26): em vez de divisória dura, o conteúdo passa sob uma aresta de blur que desvanece para baixo. */ .scroll-edge { position: fixed; top: 0; left: 0; right: 0; height: 96px; z-index: 20; pointer-events: none; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); -webkit-mask: linear-gradient(180deg, #000 0%, #000 38%, transparent 100%); mask: linear-gradient(180deg, #000 0%, #000 38%, transparent 100%); background: linear-gradient(180deg, rgba(8,8,10,.55), transparent); } /* logo monocromático preto → branco em fundo escuro, sem asset extra */ .aura-logo--on-dark { filter: invert(1) brightness(2.2); } /* ---- Componentes base de reporte ---- Material Liquid Glass (inspirado no HIG / iOS 26): vidro translúcido com vibrancy (saturação+brilho), brilho especular no topo da aresta e sombra difusa ampla. Cantos contínuos generosos. */ .glass, .card, .metrics { position: relative; background: rgba(22,22,26,.52); -webkit-backdrop-filter: blur(28px) saturate(180%) brightness(1.08); backdrop-filter: blur(28px) saturate(180%) brightness(1.08); border: 1px solid rgba(255,255,255,.10); border-radius: var(--r-lg); box-shadow: 0 24px 64px -24px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.14), inset 0 -1px 0 rgba(0,0,0,.25); } /* Sheen especular: fina faixa de luz na aresta superior, como o reflexo do vidro Apple. */ .glass::before, .card::before, .metrics::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 35%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } .card { padding: var(--s-6); } /* Métricas DE-BOXED: sem cartão por número. Agrupadas por hairline + espaço negativo (Rule 4 / anti "3 cartões iguais"). Use no lugar de três .card .kpi lado a lado. */ .metrics { display: grid; grid-template-columns: repeat(3, 1fr); } .metrics > .kpi { padding: var(--s-6) var(--s-6) calc(var(--s-6) + 2px); } .metrics > .kpi + .kpi { border-left: 1px solid var(--hairline); } @media (max-width: 760px) { .metrics { grid-template-columns: 1fr; } .metrics > .kpi + .kpi { border-left: 0; border-top: 1px solid var(--hairline); } } .kpi { display: flex; flex-direction: column; gap: var(--s-3); } /* Hierarquia Apple: peso + cor, não caixa-alta. */ .kpi__label { font-size: var(--fs-small); color: var(--ink-3); font-weight: 500; letter-spacing: 0; } .kpi__value { font-size: var(--fs-display); font-weight: 700; color: var(--ink-1); line-height: .95; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "ss01" 1; letter-spacing: -.03em; } .kpi__delta { font-size: var(--fs-small); font-weight: 600; font-variant-numeric: tabular-nums; } .kpi__delta.is-pos { color: var(--pos); } .kpi__delta.is-neg { color: var(--neg); } /* Movimento contido (MOTION calibrado p/ executivo): revelação em cascata só na entrada. Apenas transform/opacity. Desligado em impressão e p/ quem pede menos movimento. */ @keyframes aura-rise { from { opacity: 0; transform: translateY(22px) scale(.985); } to { opacity: 1; transform: none; } } .reveal--on { animation: aura-rise 1.05s var(--ease) both; animation-delay: calc(var(--i, 0) * 110ms); } @media (prefers-reduced-motion: reduce) { .reveal--on { animation: none; opacity: 1; } } table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); } thead th { text-align: left; color: var(--ink-3); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; font-size: var(--fs-micro); padding: var(--s-3); border-bottom: 1px solid var(--hairline-strong); } tbody td { padding: var(--s-3); border-bottom: 1px solid var(--hairline); color: var(--ink-2); } tbody td { font-variant-numeric: tabular-nums; } tbody tr:last-child td { border-bottom: 0; } @media print { .aura-bg { background: #fff !important; } .aura-bg::before { display: none !important; } body, h1,h2,h3,p,td, .kpi__value { color: #111 !important; text-shadow: none !important; } .card, .metrics { background: #fff !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border-color: #ddd !important; } .metrics > .kpi + .kpi { border-color: #ddd !important; } .card::before, .metrics::before, .glass::before { display: none !important; } .scroll-edge { display: none !important; } .aura-chip { background: none !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; color: #555 !important; border-color: #ccc !important; } .aura-mark { filter: none !important; } .aura-mark-stage::before { display: none !important; } .reveal, .reveal--on { opacity: 1 !important; animation: none !important; } }