/* ============================================================ pedias-cores.css Carregar DEPOIS de main.css, header.css, home.css e artigos.css ============================================================ */ /* ---------- 1. tokens por base ---------- */ :root { /* padrao atual = azul institucional. Sem a classe no , tudo abaixo renderiza exatamente o que ja esta no ar. */ --pedia-brand: #185FA5; --pedia-hero-dark: #0C447C; --pedia-hero: #185FA5; --pedia-hero-light: #2178C8; --pedia-accent: #97B7D6; --pedia-stop-mid: 60%; --pedia-stop-light: 100%; } /* ---------- 2. as regras ---------- */ /* ---------- home.css ---------- */ /* .hero | antes: var(--blue-dark) */ .hero { background: var(--pedia-hero-dark); } /* .hero::before | antes: brilho teal + brilho roxo + brilho azul. O teal sujava laranja e amarelo; o roxo sumia no roxo. Agora tres brilhos da propria base: um forte no canto inferior direito, um no inferior esquerdo e um leve no topo. O centro fica escuro, que e onde mora o texto; a cor da marca floresce nas bordas. */ .hero::before { background: radial-gradient(ellipse 85% 110% at 100% 92%, color-mix(in srgb, var(--pedia-hero-light) 72%, transparent) 0%, transparent 60%), radial-gradient(ellipse 60% 85% at -5% 100%, color-mix(in srgb, var(--pedia-hero) 60%, transparent) 0%, transparent 58%), radial-gradient(ellipse 95% 55% at 50% -8%, color-mix(in srgb, var(--pedia-hero) 18%, transparent) 0%, transparent 70%); } /* acentos dentro do hero | antes: var(--teal-border) e var(--teal) */ .hero-eyebrow, .hero h1 em { color: var(--pedia-accent); } .hero-eyebrow span { background: var(--pedia-accent); } .hero-search input:focus { border-color: var(--pedia-accent); } .hero-search-btn { background: var(--pedia-hero); } .hero-search-btn:hover { background: var(--pedia-hero-dark); } .hero-search-btn svg { color: #fff; } /* card em destaque | antes: --blue-dark -> --blue -> --teal */ .article-card-hero { background: linear-gradient(135deg, var(--pedia-hero-dark) 0%, var(--pedia-hero) var(--pedia-stop-mid), var(--pedia-hero-light) var(--pedia-stop-light)); } .article-card-hero::before { background: radial-gradient(ellipse at top right, color-mix(in srgb, var(--pedia-hero-light) 28%, transparent), transparent 60%); } .article-card-domain { color: var(--pedia-accent); } /* ultimos azuis soltos da home */ .quick-band-link { color: var(--pedia-hero); } .quick-item:hover { background: var(--pedia-hero-dark); } /* faixa de fornecedores: hoje nao e renderizada em nenhuma home, mas fica tokenizada para nao voltar azul se religarem. */ .vendor-banner { background: linear-gradient(120deg, var(--pedia-hero-dark) 0%, color-mix(in srgb, var(--pedia-hero-dark) 70%, #000) 40%, var(--pedia-hero) 100%); } /* ---------- header.css ---------- */ /* lupa da busca no header branco | antes: var(--blue) / var(--blue-dark) */ .header-search .hero-search-btn { background: var(--pedia-hero); } .header-search .hero-search-btn:hover { background: var(--pedia-hero-dark); } .header-search .hero-search-btn svg { color: #fff; } .header-search .hero-search-input:focus { border-color: var(--pedia-hero); } /* ---------- main.css ---------- */ /* .pedia-hero | faixa do hero de ARTIGO e de DOMINIO */ .pedia-hero { background: linear-gradient(135deg, var(--pedia-hero-dark) 0%, var(--pedia-hero) var(--pedia-stop-mid), var(--pedia-hero-light) var(--pedia-stop-light)); } /* ---------- artigos.css ---------- */ /* .article-hero-index | antes: rgba(0,0,0,0.18). Um preto fixo bastava sobre azul; sobre amarelo e laranja deixava os chips ilegiveis. Agora e o proprio escuro da base, quase opaco. */ .article-hero-index { background: color-mix(in srgb, var(--pedia-hero-dark) 82%, transparent); } .sticky-index { background: var(--pedia-hero-dark); } .reading-progress { background: linear-gradient(90deg, var(--pedia-hero), var(--pedia-hero-light)); }