/* ------------------------------------------------- 0️⃣ Reset básico ---------------------------------------------------*/ *, *::before, *::after { box-sizing:border-box; margin:0; padding:0; } html { font-size:100%; } body { font-family:Helvetica,Arial,sans-serif; line-height:1.5; } /* ------------------------------------------------- 1️⃣ Header / Nav container ---------------------------------------------------*/ .site-header { background:#fff; border-bottom:1px solid #e5e5e5; box-shadow:0 2px 4px rgba(0,0,0,.05); } .nav-wrapper { max-width:1200px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:0.8rem 1rem; position:relative; flex-wrap:wrap; } /* LOGO */ .logo { font-size:1.4rem; font-weight:700; color:#0066cc; text-decoration:none; } /* ------------------------------------------------- 2️⃣ Botão hambúrguer – só mobile ---------------------------------------------------*/ .nav-toggle { background:none; border:none; cursor:pointer; padding:.4rem; color:#0066cc; display:flex; align-items:center; justify-content:center; } .nav-toggle:focus { outline:2px solid #0066cc; } /* ------------------------------------------------- 3️⃣ MENU (lista de botões estilo btn-primary) ---------------------------------------------------*/ .nav-menu { list-style:none; position:absolute; top:100%; left:0; right:0; background:#fff; border-top:1px solid #e5e5e5; max-height:0; overflow:hidden; transition:max-height .35s ease-out; z-index:10; display:flex; flex-wrap:wrap; gap:.5rem; padding:.5rem 0; justify-content:center; } /* Cada item = botão estilo btn-primary */ .nav-btn { display:inline-block; padding:12px 24px; background:#E98A4A; color:#fff; text-align:center; text-decoration:none; border-radius:6px; font-weight:600; font-size:.95rem; transition:background .2s, transform .15s; box-shadow:0 2px 4px rgba(0,0,0,.1); } .nav-btn:hover, .nav-btn:focus { background:#E2592D; transform:translateY(-2px); box-shadow:0 4px 8px rgba(0,0,0,.15); } /* ------------------------------------------------- 4️⃣ Estado aberto – quando .is-open está no ---------------------------------------------------*/ body.is-open .nav-menu { max-height:900px; } /* Rotaciona o ícone do hambúrguer quando aberto */ body.is-open .nav-toggle svg { transform:rotate(90deg); transition:transform .3s; } /* ------------------------------------------------- 5️⃣ Desktop (≥768px) – botões alinhados lado‑a‑lado ---------------------------------------------------*/ @media (min-width:768px) { .nav-toggle { display:none; } .nav-menu { position:static; display:flex; flex-wrap:wrap; align-items:center; max-height:none; background:none; border:none; margin-left:auto; gap:.5rem; padding:0; justify-content:flex-start; } .nav-btn { padding:10px 20px; background:#E98A4A; color:#fff; border-radius:6px; } .nav-btn:hover, .nav-btn:focus { background:#E2592D; transform:translateY(-2px); } } /* ------------------------------------------------- 6️⃣ Campo de pesquisa ---------------------------------------------------*/ .search-form { display:flex; align-items:center; margin-left:1rem; } .search-input { padding:.5rem .8rem; border:1px solid #ddd; border-radius:4px 0 0 4px; font-size:.9rem; width:180px; outline:none; } .search-input:focus { border-color:#0066cc; } .search-btn { padding:.5rem .8rem; background:#E98A4A; color:#fff; border:none; border-radius:0 4px 4px 0; cursor:pointer; } .search-btn:hover { background:#E2592D; } @media (max-width:767px) { .search-form { width:100%; margin:1rem 0 0 0; order:3; } .search-input { flex:1; width:auto; } }