Catálogos

<!DOCTYPE html>

<head>

<title>Catálogos · Acesso Minas</title>

<style>

@font-face {

font-family: 'Poppins';

src: local('Poppins');

}

:root {

--navy: #131E30;

--navy-soft: #1c2a44;

--green: #4a8f4a;

--blue: #316EE3;

--paper: #F7F8FA;

--line: #E2E5EA;

--text-muted: #6B7280;

}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {

font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

background: var(--paper);

color: var(--navy);

min-height: 100vh;

display: flex;

flex-direction: column;

position: relative;

overflow-x: hidden;

}

/* Background watermark triangle, echoes the logo mark */

.bg-mark {

position: fixed;

top: -12vw;

right: -10vw;

width: 55vw;

height: 55vw;

pointer-events: none;

opacity: 0.035;

z-index: 0;

}

.bg-mark svg { width: 100%; height: 100%; }

header {

position: relative;

z-index: 2;

display: flex;

align-items: center;

justify-content: space-between;

padding: 28px 6vw;

}

header img { height: 34px; display: block; }

.header-tag {

font-size: 11px;

font-weight: 600;

letter-spacing: 2.5px;

color: var(--green);

text-transform: uppercase;

}

main {

position: relative;

z-index: 2;

flex: 1;

display: flex;

flex-direction: column;

align-items: center;

padding: 4vh 6vw 8vh;

}

.hero {

max-width: 720px;

text-align: center;

margin-bottom: 64px;

}

.eyebrow {

font-size: 11.5px;

font-weight: 700;

letter-spacing: 3px;

color: var(--green);

text-transform: uppercase;

margin-bottom: 14px;

}

h1 {

font-size: clamp(30px, 4.4vw, 46px);

font-weight: 700;

line-height: 1.12;

letter-spacing: -0.5px;

color: var(--navy);

}

h1 span { color: var(--blue); }

.hero p {

margin-top: 18px;

font-size: 16px;

line-height: 1.65;

color: var(--text-muted);

max-width: 520px;

margin-left: auto;

margin-right: auto;

}

.cards {

width: 100%;

max-width: 920px;

display: grid;

grid-template-columns: 1fr 1fr;

gap: 28px;

}

@media (max-width: 720px) {

.cards { grid-template-columns: 1fr; }

}

.card {

position: relative;

background: #ffffff;

border: 1px solid var(--line);

border-radius: 16px;

padding: 40px 32px 32px;

display: flex;

flex-direction: column;

align-items: flex-start;

transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;

}

.card::before {

content: "";

position: absolute;

top: 0; left: 32px;

width: 44px; height: 4px;

background: var(--blue);

border-radius: 0 0 3px 3px;

}

.card.is-ready:hover {

transform: translateY(-4px);

box-shadow: 0 18px 40px rgba(19, 30, 48, 0.10);

border-color: transparent;

}

.card-icon {

width: 52px; height: 52px;

border-radius: 12px;

background: var(--navy);

display: flex;

align-items: center;

justify-content: center;

margin-bottom: 22px;

}

.card-icon svg { width: 26px; height: 26px; }

.card h2 {

font-size: 20px;

font-weight: 700;

color: var(--navy);

margin-bottom: 8px;

}

.card p.desc {

font-size: 13.5px;

line-height: 1.6;

color: var(--text-muted);

margin-bottom: 26px;

}

.btn {

appearance: none;

border: none;

text-decoration: none;

display: inline-flex;

align-items: center;

gap: 9px;

font-family: inherit;

font-size: 13.5px;

font-weight: 600;

padding: 12px 22px;

border-radius: 9px;

cursor: pointer;

transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;

}

.btn:active { transform: scale(0.98); }

.btn:focus-visible {

outline: 2px solid var(--blue);

outline-offset: 2px;

}

.btn-primary {

background: var(--navy);

color: #ffffff;

margin-top: auto;

}

.btn-primary:hover { background: var(--navy-soft); }

.btn-primary svg { width: 15px; height: 15px; }

.btn-disabled {

background: #EEF1F5;

color: #9AA2AE;

margin-top: auto;

cursor: not-allowed;

}

.status-pill {

position: absolute;

top: 24px;

right: 24px;

font-size: 10.5px;

font-weight: 700;

letter-spacing: 0.6px;

text-transform: uppercase;

padding: 5px 10px;

border-radius: 20px;

}

.status-pill.ready { background: rgba(74,143,74,0.12); color: var(--green); }

.status-pill.soon { background: rgba(107,114,128,0.12); color: var(--text-muted); }

footer {

position: relative;

z-index: 2;

text-align: center;

padding: 22px 6vw 30px;

font-size: 11.5px;

color: #9AA2AE;

}

@media (prefers-reduced-motion: reduce) {

* { transition: none !important; scroll-behavior: auto !important; }

}

</style>

</head>

<body>

</svg>

</div>

<span class="header-tag">Central de Downloads</span>

</header>

<main>

<p class="eyebrow">Linha Acessibilidade</p>

<h1>Catálogos <span>Acesso Minas</span></h1>

<p>Escolha o catálogo que você precisa e baixe o PDF completo, sempre atualizado com nossas últimas peças e especificações técnicas.</p>

</div>

<span class="status-pill ready">Disponível</span>

</svg>

</div>

<h2>Catálogo Acessibilidade</h2>

<p class="desc">Pisos táteis, barras de apoio, sinalização em braile, mapas táteis e demais soluções de acessibilidade conforme a NBR 9050.</p>

Baixar PDF

</a>

</div>

<span class="status-pill soon">Em breve</span>

</svg>

</div>

<h2>Catálogo Sinalização</h2>

<p class="desc">Placas, adesivos e sistemas de sinalização visual e viária. Este catálogo está em preparação.</p>

<button class="btn btn-disabled" disabled>Em breve</button>

</div>

</main>

Linha Acessibilidade · Acesso Minas · Belo Horizonte — MG

</footer>

</body>

</html>