/* ========================================================================== PEO — estilo.css GLOBAL (fonte única da verdade do design) passeexamedeordem.com.br · blog SEO de silo -------------------------------------------------------------------------- Cores, tipografia, componentes e blocos reutilizáveis por TODOS os artigos. Cada silo define apenas sua cor-assinatura via classe no : .silo-metodo · .silo-fgv · .silo-reprovacao · .silo-disciplinas .silo-exame · .silo-rotina ========================================================================== */ :root{ /* Paleta da marca */ --roxo:#6B4E9E; --roxo-escuro:#4A3570; --teal:#4EA8A0; --coral:#E8736A; --amarelo:#F2B441; --lilas:#B9A5D9; --off-white:#FAF8F4; --creme:#F2EDE4; --tinta:#2A2433; --cinza:#6B6577; --linha:#E6DFD4; /* Cor-assinatura do silo (default = método/roxo; sobrescrita por .silo-*) */ --silo:var(--roxo); --silo-suave:rgba(107,78,158,.10); /* Tipografia */ --display:'Fraunces',Georgia,serif; --corpo:'Manrope',system-ui,-apple-system,sans-serif; --max:720px; --raio:16px; } /* Cor-assinatura por silo --------------------------------------------------- */ .silo-metodo {--silo:var(--roxo); --silo-suave:rgba(107,78,158,.10);} .silo-fgv {--silo:var(--coral); --silo-suave:rgba(232,115,106,.10);} .silo-reprovacao {--silo:var(--teal); --silo-suave:rgba(78,168,160,.12);} .silo-disciplinas {--silo:var(--amarelo); --silo-suave:rgba(242,180,65,.14);} .silo-exame {--silo:var(--lilas); --silo-suave:rgba(185,165,217,.16);} .silo-rotina {--silo:var(--roxo-escuro); --silo-suave:rgba(74,53,112,.10);} /* Base ---------------------------------------------------------------------- */ *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; font-family:var(--corpo); font-size:18px; line-height:1.7; color:var(--tinta); background:var(--off-white); -webkit-font-smoothing:antialiased; } .wrap{max-width:var(--max);margin:0 auto;padding:0 22px} /* Topbar -------------------------------------------------------------------- */ .topbar{ border-bottom:1px solid var(--linha); background:rgba(250,248,244,.9); backdrop-filter:saturate(140%) blur(8px); position:sticky;top:0;z-index:50; } .topbar .wrap{display:flex;align-items:center;gap:14px;height:62px} .brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--tinta);font-weight:800} .brand b{font-family:var(--display);font-weight:600;font-size:1.05rem;letter-spacing:.2px} .topbar nav{margin-left:auto;display:flex;gap:22px} .topbar nav a{color:var(--cinza);text-decoration:none;font-size:.92rem;font-weight:600} .topbar nav a:hover{color:var(--silo)} /* Breadcrumb ---------------------------------------------------------------- */ .crumbs{font-size:.82rem;color:var(--cinza);padding:18px 0 0} .crumbs a{color:var(--cinza);text-decoration:none} .crumbs a:hover{color:var(--silo)} .crumbs span{margin:0 6px;opacity:.5} /* Cabeçalho do artigo ------------------------------------------------------- */ .eyebrow{ display:inline-block;margin:14px 0 10px; font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase; color:var(--silo);background:var(--silo-suave); padding:6px 12px;border-radius:999px; } h1{ font-family:var(--display);font-weight:600; font-size:clamp(2rem,5vw,2.9rem);line-height:1.12; margin:.1em 0 .35em;color:var(--roxo-escuro); letter-spacing:-.01em; } .meta{display:flex;align-items:center;gap:10px;color:var(--cinza);font-size:.86rem;margin-bottom:8px} .meta .dot{width:4px;height:4px;border-radius:50%;background:var(--linha)} .meta a{color:var(--cinza);text-decoration:underline;text-underline-offset:3px} /* Resposta rápida (AEO / featured snippet) ---------------------------------- */ .resposta-rapida{ border:1px solid var(--linha); border-left:5px solid var(--silo); background:#fff;border-radius:var(--raio); padding:20px 22px;margin:26px 0 30px; box-shadow:0 14px 34px -22px rgba(74,53,112,.35); } .resposta-rapida .rr-tag{ font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase; color:var(--silo);margin:0 0 6px; } .resposta-rapida p{margin:0;font-size:1.02rem} /* Índice -------------------------------------------------------------------- */ .indice{ background:var(--creme);border-radius:var(--raio); padding:20px 24px;margin:0 0 36px; } .indice strong{display:block;font-family:var(--display);font-weight:600;font-size:1.05rem;margin-bottom:8px;color:var(--roxo-escuro)} .indice ol{margin:0;padding-left:20px;columns:1} .indice li{margin:4px 0} .indice a{color:var(--tinta);text-decoration:none;border-bottom:1px solid transparent} .indice a:hover{color:var(--silo);border-color:var(--silo)} /* Corpo --------------------------------------------------------------------- */ article h2{ font-family:var(--display);font-weight:600; font-size:clamp(1.45rem,3.4vw,1.9rem);line-height:1.2; margin:46px 0 14px;color:var(--roxo-escuro);scroll-margin-top:80px; } article h3{ font-family:var(--corpo);font-weight:800; font-size:1.18rem;margin:28px 0 8px;color:var(--tinta); } article p{margin:0 0 18px} article a{color:var(--silo);text-decoration:underline;text-underline-offset:3px;font-weight:600} article ul,article ol{margin:0 0 20px;padding-left:24px} article li{margin:8px 0} article strong{color:var(--roxo-escuro)} article blockquote{ margin:24px 0;padding:14px 20px;border-left:4px solid var(--silo); background:var(--silo-suave);border-radius:0 var(--raio) var(--raio) 0; font-style:italic;color:var(--roxo-escuro); } /* Tabela -------------------------------------------------------------------- */ .tabela{overflow-x:auto;margin:24px 0;border-radius:var(--raio);border:1px solid var(--linha)} table{width:100%;border-collapse:collapse;font-size:.94rem;background:#fff} th,td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--linha)} th{background:var(--silo-suave);color:var(--roxo-escuro);font-weight:800;font-size:.82rem;letter-spacing:.04em;text-transform:uppercase} tr:last-child td{border-bottom:none} /* CTAs ---------------------------------------------------------------------- */ .cta{border-radius:var(--raio);padding:26px;margin:34px 0;color:#fff;position:relative;overflow:hidden} .cta::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 120% at 100% 0%,rgba(255,255,255,.18),transparent 60%);pointer-events:none} .cta-mid{background:linear-gradient(135deg,var(--teal),#3c8a83)} .cta-fim{background:linear-gradient(135deg,var(--coral),#cf5a51)} .cta h3{font-family:var(--display);font-weight:600;color:#fff;font-size:1.4rem;margin:0 0 6px} .cta p{color:rgba(255,255,255,.92);margin:0 0 16px;font-size:.98rem} .cta-btn{ display:inline-block;background:#fff;color:var(--roxo-escuro); font-weight:800;text-decoration:none;font-size:.98rem; padding:13px 26px;border-radius:999px;transition:transform .15s ease; } .cta-btn:hover{transform:translateY(-2px)} .cta small{display:block;margin-top:12px;color:rgba(255,255,255,.8);font-size:.8rem} /* FAQ ----------------------------------------------------------------------- */ .faq{margin:40px 0} .faq details{ border:1px solid var(--linha);border-radius:var(--raio); background:#fff;margin:10px 0;padding:0 20px;overflow:hidden; } .faq summary{ list-style:none;cursor:pointer;padding:18px 0; font-weight:800;color:var(--roxo-escuro);font-size:1.04rem; display:flex;justify-content:space-between;align-items:center;gap:12px; } .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";color:var(--silo);font-size:1.5rem;font-weight:400;transition:transform .2s} .faq details[open] summary::after{transform:rotate(45deg)} .faq details p{margin:0 0 18px;color:var(--tinta)} /* Leia também --------------------------------------------------------------- */ .leia{margin:48px 0 10px} .leia > strong{display:block;font-family:var(--display);font-weight:600;font-size:1.3rem;color:var(--roxo-escuro);margin-bottom:16px} .leia-grid{display:grid;gap:14px} .leia-card{ display:block;text-decoration:none;color:var(--tinta); border:1px solid var(--linha);border-radius:var(--raio); padding:16px 20px;background:#fff;transition:border-color .15s,transform .15s; } .leia-card:hover{border-color:var(--silo);transform:translateX(3px)} .leia-card span{display:block;font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--silo);margin-bottom:4px} .leia-card b{font-weight:800;font-size:1.02rem} /* Rodapé / compliance ------------------------------------------------------- */ .compliance{ margin-top:48px;padding:22px 0 10px;border-top:1px solid var(--linha); font-size:.8rem;color:var(--cinza);line-height:1.6; } .compliance strong{color:var(--cinza)} .site-footer{background:var(--roxo-escuro);color:rgba(255,255,255,.82);margin-top:40px;padding:32px 0;font-size:.86rem} .site-footer .wrap{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:center} .site-footer a{color:#fff;text-decoration:none;font-weight:600} /* Responsivo ---------------------------------------------------------------- */ @media(min-width:560px){.indice ol{columns:2;column-gap:30px}.leia-grid{grid-template-columns:1fr 1fr}} @media(max-width:480px){body{font-size:17px}.topbar nav{display:none}} /* ========================================================================== COMPONENTES DE HOME E LISTAGENS (adicionado para index + silos) ========================================================================== */ /* Hero ---------------------------------------------------------------------- */ .hero{padding:64px 0 40px;position:relative;overflow:hidden} .hero::before{ content:"";position:absolute;inset:0;z-index:-1; background: radial-gradient(60% 80% at 15% 0%,rgba(107,78,158,.10),transparent 55%), radial-gradient(50% 70% at 100% 20%,rgba(78,168,160,.10),transparent 55%); } .hero .eyebrow{margin-top:0} .hero h1{font-size:clamp(2.2rem,6vw,3.5rem);max-width:14ch} .hero p.lead{font-size:1.18rem;color:var(--cinza);max-width:54ch;margin:0 0 28px} .hero-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center} .btn-primary{ display:inline-block;background:var(--coral);color:#fff;font-weight:800; text-decoration:none;padding:14px 28px;border-radius:999px; box-shadow:0 14px 30px -14px rgba(232,115,106,.7);transition:transform .15s; } .btn-primary:hover{transform:translateY(-2px)} .btn-ghost{ display:inline-block;color:var(--roxo-escuro);font-weight:800;text-decoration:none; padding:14px 22px;border-radius:999px;border:1.5px solid var(--linha);transition:border-color .15s; } .btn-ghost:hover{border-color:var(--roxo)} /* Faixa de credibilidade ---------------------------------------------------- */ .cred{display:flex;flex-wrap:wrap;gap:26px;padding:22px 0;border-top:1px solid var(--linha);border-bottom:1px solid var(--linha);margin:8px 0 0} .cred div{flex:1;min-width:130px} .cred b{display:block;font-family:var(--display);font-weight:600;font-size:1.7rem;color:var(--roxo-escuro);line-height:1} .cred span{font-size:.82rem;color:var(--cinza)} /* Seções da home ------------------------------------------------------------ */ .section{padding:50px 0} .section h2{font-family:var(--display);font-weight:600;font-size:clamp(1.6rem,4vw,2.2rem);color:var(--roxo-escuro);margin:0 0 6px} .section .sub{color:var(--cinza);margin:0 0 30px;max-width:56ch} /* Grid de silos ------------------------------------------------------------- */ .silos{display:grid;gap:16px} .silo-card{ display:block;text-decoration:none;color:var(--tinta);background:#fff; border:1px solid var(--linha);border-radius:var(--raio);padding:24px; border-top:4px solid var(--c,#6B4E9E);transition:transform .15s,box-shadow .15s; } .silo-card:hover{transform:translateY(-4px);box-shadow:0 22px 40px -26px rgba(74,53,112,.4)} .silo-card .tag{font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--c,#6B4E9E)} .silo-card h3{font-family:var(--display);font-weight:600;font-size:1.25rem;color:var(--roxo-escuro);margin:8px 0 6px} .silo-card p{margin:0;color:var(--cinza);font-size:.94rem} .silo-card.soon{opacity:.62} .silo-card.soon .tag::after{content:" · em breve";color:var(--cinza)} /* Listagem de artigos (página de silo / blog) ------------------------------- */ .post-list{display:grid;gap:14px;margin:6px 0 0} .post-card{ display:block;text-decoration:none;color:var(--tinta);background:#fff; border:1px solid var(--linha);border-radius:var(--raio);padding:20px 22px; transition:border-color .15s,transform .15s; } .post-card:hover{border-color:var(--silo);transform:translateX(3px)} .post-card .tag{font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--silo)} .post-card h3{font-family:var(--corpo);font-weight:800;font-size:1.12rem;color:var(--roxo-escuro);margin:5px 0 5px} .post-card p{margin:0;color:var(--cinza);font-size:.92rem} .post-card.pilar{border-left:4px solid var(--silo)} .empty{color:var(--cinza);font-size:.95rem;background:var(--creme);border-radius:var(--raio);padding:20px 22px} /* Bloco de autoridade (autor) ----------------------------------------------- */ .autor{display:flex;gap:18px;align-items:flex-start;background:var(--creme);border-radius:var(--raio);padding:24px} .autor .av{width:60px;height:60px;border-radius:50%;background:var(--roxo);flex:none;display:grid;place-items:center} .autor h3{margin:0 0 4px;color:var(--roxo-escuro);font-family:var(--display);font-weight:600} .autor p{margin:0;font-size:.92rem;color:var(--cinza)} /* Oferta discreta na home --------------------------------------------------- */ .oferta{background:linear-gradient(135deg,var(--roxo),var(--roxo-escuro));color:#fff;border-radius:var(--raio);padding:34px;text-align:center;position:relative;overflow:hidden} .oferta::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 120% at 100% 0%,rgba(255,255,255,.14),transparent 55%);pointer-events:none} .oferta h2{color:#fff;margin:0 0 8px} .oferta p{color:rgba(255,255,255,.9);max-width:50ch;margin:0 auto 20px} @media(min-width:620px){.silos{grid-template-columns:1fr 1fr}} @media(min-width:900px){.silos{grid-template-columns:repeat(3,1fr)}}