/* =================================================================== ROGÉRIO LINS 20200 — estilo do site Cores e fontes conforme o brandbook oficial. =================================================================== */ /* ---------- fontes da marca ---------- Garet (Spacetype), família licenciada, em woff2 para carregar rápido. Raleway vem do Google Fonts, declarada no de cada página. */ @font-face{ font-family:"Garet"; src:url("/fonts/garet-regular.woff2") format("woff2"); font-weight:400; font-display:swap; } @font-face{ font-family:"Garet"; src:url("/fonts/garet-bold.woff2") format("woff2"); font-weight:700; font-display:swap; } @font-face{ font-family:"Garet"; src:url("/fonts/garet-black.woff2") format("woff2"); font-weight:900; font-display:swap; } @font-face{ font-family:"Garet Fat"; src:url("/fonts/garet-fat.woff2") format("woff2"); font-weight:400; font-display:swap; } :root{ /* paleta oficial */ --roxo:#54009A; --roxo-vivo:#8116E0; --verde:#63FD4C; /* apoio */ --roxo-escuro:#3B006D; --branco:#FFFFFF; --cinza:#F4F1F8; --texto:#2A1240; --texto-claro:#DCC9F2; } *{box-sizing:border-box;margin:0;padding:0} body{ background:var(--branco); color:var(--texto); font-family:"Raleway",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased; } h1,h2,h3,.titulo{ font-family:"Garet Fat","Garet",Impact,sans-serif; font-weight:400; line-height:1.02; letter-spacing:-.01em; } /* padrão oficial do brandbook: mapas estilizados de SP em duas tonalidades. textura.png é um bloco extraído da arte original e repete sem emenda. */ .textura{ background-color:var(--roxo-vivo); background-image:url("/img/textura.png"); background-repeat:repeat; background-size:154px auto; } /* ---------- cabeçalho ---------- */ .topo{ position:sticky; top:0; z-index:50; background:var(--roxo); box-shadow:0 2px 18px rgba(59,0,109,.28); } .topo-inner{ max-width:1200px; margin:0 auto; padding:14px clamp(18px,4vw,40px); display:flex; align-items:center; justify-content:space-between; gap:24px; } .marca{display:block;flex:none;line-height:0} .marca img{ height:clamp(46px,5vw,62px); width:auto; display:block; } .menu{display:flex;align-items:center;gap:clamp(14px,2vw,32px);list-style:none} .menu a{ position:relative; display:inline-block; font-family:"Garet","Raleway",sans-serif; font-weight:700; font-size:clamp(13px,1.1vw,15px); letter-spacing:.12em; text-transform:uppercase; color:var(--branco); text-decoration:none; padding:8px 0; } .menu a::after{ content:""; position:absolute; left:0;bottom:2px; width:100%;height:3px; background:var(--verde); transform:scaleX(0); transform-origin:left; transition:transform .25s cubic-bezier(.2,.8,.25,1); } .menu a:hover::after, .menu a:focus-visible::after, .menu a[aria-current="page"]::after{transform:scaleX(1)} /* ---------- faixa verde ---------- */ .faixa{ background:var(--verde); color:var(--roxo); text-align:center; padding:11px 20px; font-family:"Garet","Raleway",sans-serif; font-weight:700; font-size:clamp(13px,1.2vw,15px); letter-spacing:.16em; text-transform:uppercase; } /* ---------- banner ---------- */ .banner{display:block;line-height:0;background:var(--roxo-vivo)} .banner img{width:100%;height:auto;display:block} /* ---------- blocos gerais ---------- */ .secao{padding:clamp(46px,7vw,88px) clamp(20px,5vw,40px)} .centro{max-width:1100px;margin:0 auto} .estreito{max-width:760px;margin:0 auto} .chapeu{ display:flex; align-items:center; gap:12px; margin-bottom:16px; font-family:"Garet","Raleway",sans-serif; font-weight:700; font-size:14px; letter-spacing:.24em; text-transform:uppercase; color:var(--roxo-vivo); } .chapeu::before{ content:""; width:32px;height:4px; background:var(--verde); flex:none; } h1{font-size:clamp(32px,5.4vw,64px)} h2{font-size:clamp(26px,3.8vw,46px)} .secao p{margin-bottom:1.25em} .secao p:last-child{margin-bottom:0} /* ---------- rodapé ---------- */ .rodape{ background:var(--roxo); color:var(--branco); padding:clamp(38px,6vw,64px) clamp(20px,5vw,40px) 28px; } .rodape-inner{ max-width:1100px; margin:0 auto; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:28px; } .rodape img{height:70px;width:auto;display:block} .rodape .contato-rapido{font-size:16px;color:var(--texto-claro)} .rodape .contato-rapido a{color:var(--verde);text-decoration:none} .rodape .contato-rapido a:hover{text-decoration:underline} .rodape-base{ max-width:1100px; margin:26px auto 0; padding-top:20px; border-top:1px solid rgba(255,255,255,.16); font-size:14px; color:var(--texto-claro); text-align:center; } /* ---------- redes ---------- */ .redes{display:flex;gap:12px;flex-wrap:wrap} .redes a{ display:flex; align-items:center; justify-content:center; width:46px;height:46px; border-radius:50%; background:rgba(255,255,255,.12); color:var(--branco); transition:background .22s ease,transform .22s ease; } .redes a:hover{background:var(--verde);color:var(--roxo);transform:translateY(-3px)} .redes svg{width:20px;height:20px;fill:currentColor} @media (max-width:820px){ .topo-inner{flex-direction:column;align-items:flex-start;gap:12px} .menu{flex-wrap:wrap;gap:14px 18px} .rodape-inner{flex-direction:column;align-items:flex-start;text-align:left} }