@charset "UTF-8"; /* ========================================================================= Aurimar — Estamparia de Metais | 2026 Estrutura em pixel conforme layout2_site_Aurimar_26 (base 1440 / conteúdo 1200) ========================================================================= */ /* ---------------------------------------------------------------- fontes */ @font-face{font-family:"Manrope";src:url("../fonts/Manrope-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:"Manrope";src:url("../fonts/Manrope-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:"Manrope";src:url("../fonts/Manrope-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap} /* A frase do banner usa a Museo 900 hospedada aqui mesmo. Se o navegador não conseguir carregá-la, entra a Parkinsans 600 do Google Fonts (link no ). A faixa de pesos evita que o navegador simule negrito na Museo. */ @font-face{font-family:"Museo 900";src:url("../fonts/Museo900-Regular.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap} /* ---------------------------------------------------------------- tokens */ :root{ --azul-1:#6b7c85; --azul-2:#006f9e; --bege-1:#f7f4ed; --bege-2:#e7d2a8; --bege-3:#beac8b; --marrom:#363125; --gutter:24px; --wrap:1248px; /* 1200px de conteúdo + 24px de respiro de cada lado */ --r-card:12px; --r-btn:10px; --r-pill:13px; --r-img:14px; --sans:"Manrope","Segoe UI",Helvetica,Arial,sans-serif; --display:"Museo 900","Parkinsans","Manrope","Segoe UI",Helvetica,Arial,sans-serif; } /* ------------------------------------------------------------------ base */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} html.sem-rolagem-suave{scroll-behavior:auto} body{ margin:0; background:var(--bege-1); color:var(--marrom); font-family:var(--sans); font-size:20px; line-height:38px; font-weight:400; overflow-x:hidden; -webkit-font-smoothing:antialiased; } img,svg{display:block;max-width:100%} a{color:inherit} button{font:inherit;color:inherit;margin:0} h1,h2,h3,p,ul,figure{margin:0} ul{padding:0;list-style:none} :focus-visible{outline:3px solid var(--azul-2);outline-offset:3px;border-radius:4px} .wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)} .sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; } .pular-para-conteudo{ position:absolute;left:-9999px;top:0;z-index:99; background:var(--marrom);color:var(--bege-1); padding:12px 20px;border-radius:0 0 var(--r-btn) 0; font-size:16px;line-height:1;text-decoration:none; } .pular-para-conteudo:focus{left:0} /* ---------------------------------------------------------------- header */ .topo{position:relative;z-index:5;background:var(--bege-1)} .topo__barra{display:flex;align-items:center;justify-content:space-between;height:75px} /* aba diagonal com cantos arredondados sob o logo */ .topo__aba{ position:absolute;left:50%;top:75px; width:440px;height:37px; transform:translateX(-50%); pointer-events:none; color:var(--bege-1); } .topo__logo{ position:absolute;left:50%;top:23px; width:225px;height:70px; transform:translateX(-50%); z-index:2; } .topo__logo img,.topo__logo svg{width:225px;height:70px} .btn-catalogo{ display:inline-flex;align-items:center;justify-content:center; width:160px;height:26px; border:3px solid var(--bege-3);border-radius:var(--r-pill); background:var(--bege-1);color:var(--marrom); font-size:13px;line-height:1;font-weight:700; text-decoration:none;white-space:nowrap; transition:background-color .18s ease,border-color .18s ease; } .btn-catalogo:hover,.btn-catalogo:focus-visible,.btn-catalogo:active{ background:var(--bege-2);border-color:var(--bege-2); } .topo__contato{display:flex;align-items:center;gap:14px;font-size:13px;line-height:1} .topo__contato .sep{opacity:.7} .topo__tel{white-space:nowrap;font-weight:400;color:var(--marrom)} .topo__tel strong{font-weight:700} .insta{display:block;width:25px;height:25px;position:relative} .insta img,.insta svg{width:25px;height:25px;transition:opacity .18s ease} .insta .hover{position:absolute;inset:0;opacity:0} .insta:hover .hover,.insta:focus-visible .hover{opacity:1} .insta:hover .base,.insta:focus-visible .base{opacity:0} /* ------------------------------------------------------------------ hero */ .hero{ position:relative; height:515px; overflow:hidden; background:var(--azul-1); display:flex;justify-content:center;align-items:flex-start; } .hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center} .hero__frase{ position:relative; padding:127px 24px 0; max-width:1000px; font-family:var(--display);font-weight:600; font-size:68px;line-height:70px; color:var(--bege-1);text-align:center; text-shadow:0 2px 20px rgba(0,0,0,.38); } /* -------------------------------------------------------- menu principal */ .menu{position:relative;z-index:3;margin-top:-160px} .menu__lista{display:grid;grid-template-columns:repeat(7,1fr);gap:13.33px} .menu__link{ display:flex;flex-direction:column;align-items:center; height:220px;padding:0 8px; border-radius:var(--r-card); background:var(--azul-1);color:var(--bege-1); text-decoration:none; transition:background-color .18s ease,color .18s ease; } .menu__link:hover{background:var(--azul-2)} .menu__link:active{background:var(--bege-1);color:var(--azul-1)} .menu__link[aria-current="page"]{background:var(--bege-1);color:var(--azul-1)} .menu__icone{ height:158px;display:flex;align-items:flex-end;justify-content:center; overflow:hidden; /* nada escapa da area reservada */ pointer-events:none; /* o icone nunca intercepta o clique do card */ } .menu__icone img,.menu__icone svg{ flex:0 0 auto; /* o flex nao estica nem encolhe o icone */ max-width:100%; transform-origin:bottom center;/* a reducao ancora na base, como no layout */ } .menu__nome{margin-top:10px;font-size:18px;line-height:21px;font-weight:500;text-align:center} /* -------------------------------------------------------------- conteúdo */ /* o bloco de conteúdo vai de y=650 (fim dos cards) a y=1894 (topo do rodapé), mantendo o rodapé sempre na mesma linha do layout, com 0, 1 ou 2 sub-menus */ .conteudo{padding-top:43px;padding-bottom:55px;min-height:1244px} .conteudo--f0{padding-top:101px} /* ---------------------------------------------------- filtros / sub-menu */ .filtros{margin-bottom:58px} .filtros__linha{display:flex;flex-wrap:wrap;justify-content:center;gap:12px} .filtros__linha + .filtros__linha{margin-top:11px} .filtro-btn{ display:inline-flex;align-items:center;justify-content:center;text-align:center; width:291px;height:63px;padding:0 14px; border:3px solid var(--bege-3);border-radius:var(--r-btn); background:var(--bege-1);color:var(--marrom); font-size:17px;line-height:21px;font-weight:400; cursor:pointer; transition:background-color .18s ease,border-color .18s ease; } .filtro-btn:hover{background:var(--bege-2);border-color:var(--bege-2)} .filtro-btn[aria-selected="true"]{background:var(--bege-2);border-color:var(--bege-2);font-weight:700} /* --------------------------------------------------------------- produto */ .variante[hidden]{display:none} .produto{display:grid;grid-template-columns:585px 600px;gap:15px;align-items:start} .produto__titulo{ font-size:50px;line-height:1.24;font-weight:400; /* 62/50 */ letter-spacing:-.03em;color:var(--marrom); max-width:595px; /* compensa a diferença de entrelinha entre o InDesign e o navegador */ margin-top:-7px;padding-bottom:7px; } .produto__titulo:focus{outline:none} .acabamentos{display:flex;flex-wrap:wrap;gap:18px;margin-top:27px} .acabamento-btn{ display:inline-flex;align-items:center;justify-content:center; min-width:127px;height:44px;padding:0 18px; border:3px solid var(--bege-3);border-radius:var(--r-btn); background:var(--bege-1);color:var(--marrom); font-size:13px;line-height:1;font-weight:700;letter-spacing:.06em; cursor:pointer;white-space:nowrap; transition:background-color .18s ease,border-color .18s ease; } .acabamento-btn:hover{background:var(--bege-2);border-color:var(--bege-2)} .acabamento-btn[aria-pressed="true"]{background:var(--bege-2);border-color:var(--bege-2)} .acabamento-nota{margin-top:27px} .produto__desc{margin-top:33px;max-width:560px} .produto__specs{margin-top:38px;max-width:560px} .produto__specs p{margin:0} .produto__specs .grupo + .grupo{margin-top:38px} .produto__modelos{margin-top:7px;width:464px;max-width:100%} .produto__modelos img{width:100%;height:auto;border-radius:var(--r-img);background:#fff} .produto__figura{position:relative;width:600px;height:900px} .produto__foto{ width:600px;height:600px;object-fit:cover; border-radius:var(--r-img);background:var(--bege-3); } .produto__tecnico{ position:absolute;left:125px;top:550px; width:350px;height:350px;object-fit:contain; background:#fff;border-radius:16px; } /* ---------------------------------------------------------- sobre/contato */ .sobre{display:grid;grid-template-columns:585px 600px;gap:15px;align-items:start} .sobre__titulo{font-size:50px;line-height:1.24;font-weight:400;letter-spacing:-.03em;max-width:595px;margin-top:-7px;padding-bottom:7px} .sobre__texto{margin-top:33px;max-width:525px} .sobre__texto p + p{margin-top:38px} .sobre__contato{margin-top:24px;font-size:20px;line-height:31px} .sobre__contato p + p{margin-top:31px} .sobre__contato a{text-decoration:none} .sobre__contato a:hover{text-decoration:underline} .sobre__contato strong{font-weight:700} .sobre__galeria{margin-top:47px;display:grid;grid-template-columns:repeat(2,1fr);gap:14px} .sobre__galeria img{width:100%;height:248px;object-fit:cover;border-radius:var(--r-img)} .sobre__galeria .full{grid-column:1 / -1} /* ---------------------------------------------------------------- rodapé */ .rodape{ background:var(--azul-1);color:var(--bege-1); font-size:16px;line-height:25px; min-height:320px; padding:50px 0 40px; } .rodape__grade{display:grid;grid-template-columns:415px 518px 267px;align-items:end} .rodape strong{font-weight:700} .rodape a{text-decoration:none} .rodape a:hover{text-decoration:underline} .rodape__logo{margin-top:1px;width:225px} .rodape__logo img,.rodape__logo svg{width:225px;height:70px} .rodape__endereco{margin-top:56px;font-style:normal} .rodape__contato{margin-top:2px} .rodape__bloco + .rodape__bloco{margin-top:25px} .rodape__lateral{font-size:14px;line-height:22px} .rodape__insta{margin-top:11px;width:25px;height:25px} .rodape__copy{margin-top:42px} .rodape__credito{margin-top:25px} .rodape__credito a{text-decoration:underline} /* ============================================================= responsivo */ @media (max-width:1247px){ .produto,.sobre{grid-template-columns:minmax(0,1fr) 600px;gap:24px} .sobre__titulo{max-width:none} .rodape__grade{grid-template-columns:1fr 1fr 1fr;gap:24px;align-items:start} .rodape__logo,.rodape__logo img,.rodape__logo svg{width:200px} .rodape__logo img,.rodape__logo svg{height:62px} } @media (max-width:1100px){ .quebra{display:none} /* fora do desktop o card ativo não encosta no conteúdo: ganha contorno */ .menu__link[aria-current="page"]{box-shadow:inset 0 0 0 2px var(--bege-3)} .menu{margin-top:-120px} .menu__lista{grid-template-columns:repeat(4,1fr);gap:12px} .menu__link{height:180px} .menu__icone{height:120px} .menu__icone img,.menu__icone svg{transform:scale(.70)} .conteudo,.conteudo--f0{padding-top:48px;min-height:0} .produto,.sobre{grid-template-columns:minmax(0,1fr);gap:40px} .produto__figura{width:100%;max-width:600px;height:auto;padding-bottom:300px} .produto__foto{width:100%;height:auto;aspect-ratio:1/1} .produto__tecnico{left:50%;top:auto;bottom:0;transform:translateX(-50%)} .hero{height:420px} .hero__frase{padding-top:70px;font-size:46px;line-height:50px} } @media (max-width:820px){ body{font-size:18px;line-height:32px} .filtro-btn{width:calc(50% - 6px);min-width:0;height:auto;min-height:56px;padding:10px 12px;font-size:15px;line-height:19px} .produto__titulo,.sobre__titulo{font-size:36px;line-height:1.24;max-width:none} .produto__desc,.produto__specs,.sobre__texto{max-width:none} .produto__specs .grupo + .grupo{margin-top:24px} .sobre__texto p + p{margin-top:24px} .sobre__contato{font-size:18px;line-height:28px} .sobre__contato p + p{margin-top:24px} .sobre__galeria img{height:200px} .rodape__grade{grid-template-columns:1fr;gap:36px;align-items:start} .rodape__endereco{margin-top:24px} .rodape__copy{margin-top:24px} .rodape{padding:40px 0} } /* abaixo de 700px o logo ganha uma linha só dele, evitando sobreposição */ @media (max-width:700px){ .topo__barra{ flex-wrap:wrap;height:auto;row-gap:14px; padding-top:16px;padding-bottom:14px; } .topo__logo{ position:static;transform:none;order:-1; width:100%;height:auto;display:flex;justify-content:center; } .topo__logo img,.topo__logo svg{width:170px;height:53px} .topo__aba{display:none} } @media (max-width:640px){ :root{--gutter:18px} .topo__logo img,.topo__logo svg{width:150px;height:47px} .btn-catalogo{width:132px;font-size:11px} .topo__contato{gap:10px} .topo__tel{font-size:11px} .hero{height:340px} .hero__frase{padding-top:52px;font-size:34px;line-height:38px} .menu{margin-top:-90px} .menu__lista{grid-template-columns:repeat(2,1fr);gap:10px} .menu__link{height:150px} .menu__icone{height:92px} .menu__icone img,.menu__icone svg{transform:scale(.53)} .menu__nome{font-size:15px;line-height:18px} .filtro-btn{width:100%} .acabamentos{gap:12px} .produto__titulo,.sobre__titulo{font-size:30px;line-height:1.24} .produto__figura{padding-bottom:220px} .produto__tecnico{width:260px;height:260px} .produto__modelos{width:100%} .sobre__galeria{grid-template-columns:1fr} .sobre__galeria .full{grid-column:auto} .sobre__galeria img{height:170px} } /* ------------------------------------------------------------- impressão */ @media print{ .topo__aba,.menu,.hero__img,.filtros,.pular-para-conteudo{display:none} body{background:#fff;color:#000} .variante[hidden]{display:block!important} } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important} }