/* ==============================================================
modern.css — Skin de modernização CONSERVADORA (Fase 1)
SULTINTAS / Moutil — site público (layout column2.php)
--------------------------------------------------------------
Aditivo. Carregado por ÚLTIMO no (depois do bloco inline).
NÃO altera o tema; só refina tipografia, espaçamento, raios,
sombras e micro-interações.
🟢 IDENTIDADE: verde Moutil #3ea22b é INTOCÁVEL.
(só é usado aqui como tinta de sombra/foco, nunca substituído)
Reverter: apagar este ficheiro + as 2 linhas em column2.php.
============================================================== */
/* Fonte: Manrope (Google Fonts, via em column2.php).
Fallback: Open Sans local → stack de sistema. */
:root {
--moutil-green: #3ea22b;
--moutil-green-dark: #287a18;
--font-modern: 'Manrope', 'open_sans', -apple-system, BlinkMacSystemFont,
'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
/* ---------------------------------------------------------------
1. Tipografia base — Manrope + mais legibilidade
--------------------------------------------------------------- */
html { scroll-behavior: smooth; }
body {
font-family: var(--font-modern) !important;
font-size: 15px; /* era 14px — sopro de respiração */
line-height: 1.7; /* era 24px (~1.71) */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* Herdeiros que o tema declara com font-family próprio */
h1, h2, h3, h4, h5, h6,
.btn, button, input, textarea, select,
.navbar, .nav, .form-control,
p, a, li, span, label, blockquote {
font-family: var(--font-modern) !important;
}
p { margin-bottom: 18px; } /* mais respiração entre parágrafos */
/* Títulos: Manrope encorpada, letter-spacing moderno (era +1px) */
h1, h2, h3, h4, h5, h6 {
letter-spacing: -0.4px;
font-weight: 700;
}
h1, h2 { font-weight: 800; } /* Manrope ExtraBold — friendly-bold */
/* ---------------------------------------------------------------
2. Botões — mais arredondados, convidativos, com micro-lift
(mantém cor, padding e uppercase do tema)
--------------------------------------------------------------- */
.btn {
border-radius: 8px !important;
font-weight: 600;
letter-spacing: 0.4px;
transition: all 0.25s ease-in-out !important;
will-change: transform;
}
.btn:hover,
.btn:focus {
transform: translateY(-2px);
box-shadow: 0 8px 18px -6px rgba(0, 0, 0, 0.22);
}
.btn:active {
transform: translateY(0);
box-shadow: 0 3px 8px -4px rgba(0, 0, 0, 0.22);
}
/* Botão verde (CTA da marca): sombra com tinta verde — sem mudar o verde */
.btn-green:hover,
.btn-green:focus {
box-shadow: 0 8px 20px -6px rgba(62, 162, 43, 0.5);
}
/* ---------------------------------------------------------------
3. Cards / painéis — cantos suaves + sombra subtil
🛡️ PRESERVAÇÃO DOS ÍCONES DE CATEGORIA (home):
a secção de categorias usa .list-icon-box / .list-icon-content /
.img-wrapper / .img-caption / .zoomer. NENHUM é tocado aqui.
→ ícones ficam no tamanho/posição
originais; layout em xadrez e zoom da imagem 100% intactos.
--------------------------------------------------------------- */
.panel,
.thumbnail,
.well,
.boxed-wrapper,
.categoria_main {
border-radius: 10px !important;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.panel,
.thumbnail,
.well,
.boxed-wrapper {
box-shadow: 0 6px 22px -10px rgba(0, 0, 0, 0.18);
border: none;
}
/* Imagens só dentro de cartões Bootstrap genéricos
(NÃO toca em .img-wrapper das categorias/portfólio) */
.thumbnail img,
.panel > img {
overflow: hidden;
}
/* ---------------------------------------------------------------
4. Micro-interações — só cartões-link de subcategoria
(.categoria_main = texto
, sem ícones)
--------------------------------------------------------------- */
.categoria_main {
cursor: pointer;
}
.categoria_main:hover {
transform: translateY(-5px);
box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.22);
}
/* Links: transição suave (o tema já tem 0.3s; reforça consistência) */
a {
transition: color 0.25s ease-in-out, opacity 0.25s ease-in-out;
}
/* ---------------------------------------------------------------
5. Formulários — campos mais suaves + foco verde da marca
--------------------------------------------------------------- */
.form-control {
border-radius: 8px !important;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-control:focus {
border-color: var(--moutil-green) !important;
box-shadow: 0 0 0 3px rgba(62, 162, 43, 0.15) !important;
}
/* ---------------------------------------------------------------
6. Painéis acordeão (FAQ) — herdam o raio mais suave
(o cabeçalho verde #3ea22b do bloco inline mantém-se)
--------------------------------------------------------------- */
.panel-group .panel,
.panel-group .panel .panel-heading,
.panel-group .panel .panel-heading .panel-title,
.panel-group .panel .panel-heading .panel-title a {
border-radius: 10px !important;
}