/* ============================================================
SANTOROSARIO.COM.BR — PATCH CSS
============================================================
Carregar APÓS estilo.css. No de cada HTML, depois de:
adicione:
Resolve:
1. Site não tinha logo image — agora todas as páginas têm o novo logo
2. Logo bem dimensionado: 220px desktop / 160px mobile
3. Subtítulo latim e ornamento ✦ removidos (logo carrega a marca)
4. Bloco Amazon antigo substituído por caixa-curada elegante
============================================================ */
/* ─── 1. CABEÇALHO: agora tem logo image ─────────────────── */
.cabecalho-logo {
display: inline-block;
line-height: 0;
}
.cabecalho-logo img {
height: 220px;
max-width: 100%;
width: auto;
filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.3));
}
@media (max-width: 767px) {
.cabecalho-logo img {
height: 160px;
}
}
/* Header com padding ajustado para o logo maior */
.cabecalho {
padding: 1.5rem 0 1.75rem !important;
}
/* Ocultar subtítulo latim e ornamento (você pediu remover) */
.subtitulo-site,
.cabecalho::before {
display: none !important;
}
/* ─── 2. CAIXA CURADA — Amazon contextual por página ────── */
.caixa-curada {
margin: 3rem 0 2rem;
padding: 1.8rem 2rem;
background: linear-gradient(135deg, var(--branco-perola) 0%, #f7f1de 100%);
border: 1px solid var(--dourado);
border-left: 4px solid var(--azul-mariano);
border-radius: 4px;
position: relative;
box-shadow: 0 2px 12px rgba(30, 58, 138, 0.06);
}
.caixa-curada::before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 60px;
height: 60px;
background: linear-gradient(135deg, transparent 50%, rgba(201, 164, 73, 0.18) 50%);
pointer-events: none;
}
.caixa-curada-titulo {
font-family: var(--fonte-acento);
font-size: 0.78rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--dourado-escuro);
margin: 0 0 1rem;
padding-bottom: 0.6rem;
border-bottom: 1px dotted var(--dourado);
font-weight: 600;
}
.caixa-curada-livro {
font-family: var(--fonte-titulo);
font-size: 1.35rem;
color: var(--azul-mariano);
margin: 0 0 0.3rem;
letter-spacing: 0.02em;
line-height: 1.3;
}
.caixa-curada-autor {
font-family: var(--fonte-display);
font-style: italic;
font-size: 1.05rem;
color: var(--dourado-escuro);
margin: 0 0 1rem;
}
.caixa-curada-razao {
font-family: var(--fonte-corpo);
font-size: 1rem;
line-height: 1.65;
color: var(--texto);
margin: 0 0 1.5rem;
}
.caixa-curada-cta {
display: inline-block;
padding: 0.85rem 1.8rem;
background: linear-gradient(135deg, var(--azul-mariano) 0%, #142667 100%);
color: var(--branco-perola);
font-family: var(--fonte-acento);
font-size: 0.9rem;
letter-spacing: 0.1em;
text-transform: uppercase;
text-decoration: none;
border: 1px solid var(--dourado);
border-radius: 3px;
font-weight: 600;
transition: all 0.2s ease;
}
.caixa-curada-cta:hover {
background: linear-gradient(135deg, #142667 0%, #0a153f 100%);
color: var(--dourado-claro);
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(30, 58, 138, 0.3);
border-color: var(--dourado-claro);
}
.caixa-curada-disclosure {
font-size: 0.78rem;
color: var(--cinza-suave);
font-style: italic;
margin: 1.2rem 0 0;
line-height: 1.5;
}
@media (max-width: 600px) {
.caixa-curada {
margin: 2rem 0 1.5rem;
padding: 1.4rem 1.2rem;
}
.caixa-curada-livro { font-size: 1.15rem; }
.caixa-curada-autor { font-size: 0.95rem; }
.caixa-curada-cta {
display: block;
text-align: center;
padding: 0.9rem;
}
}
/* ============================================================
SANTOROSARIO.COM.BR — CABEÇALHO AZUL-NOITE PROFUNDO
Para o logo dourado em relevo.
Sem luz radial, sem halo cinza, sem brilho dourado no fundo.
Carregar este patch DEPOIS de estilo.css.
============================================================ */
:root {
--sr-azul-noite: #050b1f;
--sr-azul-noite-2: #07122e;
--sr-azul-menu: #0b2d73;
--sr-dourado: #d7a83f;
--sr-dourado-claro: #fff0b8;
--sr-dourado-escuro: #8f6416;
--sr-perola: #fffaf0;
--azul-mariano: #0b2d73;
--azul-claro: #1d4f9a;
--azul-celeste: #cfd9ee;
--azul-suave: #eef3fb;
--branco-perola: #fffaf0;
--dourado: #d7a83f;
--dourado-claro: #fff0b8;
--dourado-escuro: #8f6416;
}
/* Fundo do corpo: claro e limpo para leitura */
body {
background-color: #eef3fb;
background-image: none !important;
}
/* Cabeçalho sólido, premium e sem aura */
.cabecalho {
position: relative;
overflow: hidden;
isolation: isolate;
text-align: center;
min-height: auto !important;
padding: clamp(1.35rem, 2.2vw, 2.2rem) 1rem clamp(1.35rem, 2.3vw, 2.2rem) !important;
background: linear-gradient(180deg, var(--sr-azul-noite-2) 0%, var(--sr-azul-noite) 100%) !important;
border-bottom: 3px solid var(--sr-dourado);
box-shadow:
inset 0 -1px 0 rgba(255, 240, 184, 0.16),
0 8px 26px rgba(5, 11, 31, 0.20);
}
/* Remove qualquer brilho/ornamento anterior */
.cabecalho::before,
.cabecalho::after,
.subtitulo-site,
.titulo-site {
content: none !important;
display: none !important;
}
/* Centralização estável */
.cabecalho-conteudo {
position: relative;
z-index: 1;
max-width: 1180px;
margin: 0 auto;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
}
.cabecalho-logo {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 0;
padding: 0;
}
/* Remove halo/aura atrás do logo */
.cabecalho-logo::before,
.cabecalho-logo::after {
content: none !important;
display: none !important;
}
/* Logo proporcional no fundo azul-noite */
.cabecalho-logo img,
.cabecalho .custom-logo,
.cabecalho .site-logo img,
.cabecalho .logo img {
display: block;
position: relative;
z-index: 1;
width: min(700px, 86vw) !important;
height: auto !important;
max-width: 100% !important;
max-height: 330px !important;
object-fit: contain;
filter:
drop-shadow(0 2px 2px rgba(255, 240, 184, 0.20))
drop-shadow(0 10px 22px rgba(0, 0, 0, 0.48));
}
/* Menu perolado, discreto e compatível com o topo escuro */
.menu-principal,
nav.menu,
nav[aria-label*="Menu"],
nav[aria-label*="menu"] {
position: sticky;
top: 0;
z-index: 1000;
background: #fffaf0 !important;
border-top: 0;
border-bottom: 2px solid var(--sr-dourado);
box-shadow: 0 3px 14px rgba(5, 11, 31, 0.10);
margin: 0 !important;
padding: 0 !important;
font-family: var(--fonte-acento);
}
nav.menu {
display: block !important;
}
.menu-principal .menu-cabecalho,
.menu .menu-cabecalho {
max-width: 1100px;
margin: 0 auto;
padding: 0.72rem 1.25rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.menu-principal .menu-marca,
.menu .menu-marca,
.menu > a:first-child {
color: var(--sr-azul-menu) !important;
text-decoration: none !important;
font-family: var(--fonte-acento);
font-size: 0.78rem;
line-height: 1;
letter-spacing: 0.13em;
text-transform: uppercase;
font-weight: 700;
}
.menu-principal .menu-toggle,
.menu .menu-toggle,
button.menu-toggle,
#menu-toggle {
appearance: none;
-webkit-appearance: none;
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 0.55rem;
min-height: 38px;
background: transparent !important;
border: 1.5px solid var(--sr-dourado-escuro) !important;
border-radius: 4px;
padding: 0.48rem 0.85rem !important;
color: var(--sr-azul-menu) !important;
cursor: pointer;
font-family: var(--fonte-acento);
font-size: 0.74rem;
letter-spacing: 0.12em;
line-height: 1;
text-transform: uppercase;
font-weight: 700;
}
.menu-principal .menu-toggle:hover,
.menu .menu-toggle:hover,
button.menu-toggle:hover,
#menu-toggle:hover {
background: var(--sr-azul-menu) !important;
color: var(--sr-perola) !important;
border-color: var(--sr-dourado) !important;
}
.menu-icone-grupo {
display: inline-flex;
flex-direction: column;
gap: 4px;
}
.menu-icone {
display: block;
width: 18px;
height: 2px;
background: currentColor;
}
/* Menu fechado por padrão para não aparecer como lista crua */
.menu-principal .menu-lista,
.menu .menu-lista,
nav.menu > ul,
nav.menu-principal > ul {
display: none !important;
list-style: none !important;
max-width: 1100px;
margin: 0 auto !important;
padding: 1rem 1.25rem 1.35rem !important;
background: #fffaf0 !important;
border-top: 1px solid rgba(215, 168, 63, 0.32);
max-height: 70vh;
overflow-y: auto;
}
/* Estados abertos */
.menu-principal .menu-lista.menu-aberto,
.menu .menu-lista.menu-aberto,
.menu-principal .menu-lista.aberto,
.menu .menu-lista.aberto,
.menu-principal.is-open .menu-lista,
.menu.is-open .menu-lista,
.menu-principal[aria-expanded="true"] .menu-lista,
.menu[aria-expanded="true"] .menu-lista,
body.menu-aberto .menu-lista,
body.menu-open .menu-lista {
display: block !important;
}
.menu-principal .menu-lista li,
.menu .menu-lista li,
nav.menu > ul li,
nav.menu-principal > ul li {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
.menu-principal .menu-lista li::marker,
.menu .menu-lista li::marker,
nav.menu > ul li::marker,
nav.menu-principal > ul li::marker {
content: "" !important;
}
.menu-principal .menu-secao,
.menu .menu-secao {
font-family: var(--fonte-acento);
font-size: 0.72rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--sr-dourado-escuro);
margin: 1.1rem 0 0.42rem !important;
padding: 0 0 0.42rem !important;
border-bottom: 1px solid rgba(215, 168, 63, 0.32);
font-weight: 700;
}
.menu-principal .menu-lista a,
.menu .menu-lista a,
nav.menu > ul a,
nav.menu-principal > ul a {
display: block;
padding: 0.52rem 0.72rem;
color: var(--sr-azul-menu) !important;
text-decoration: none !important;
font-family: var(--fonte-display);
font-size: 1rem;
line-height: 1.25;
border-left: 3px solid transparent;
border-radius: 3px;
transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, padding-left 0.18s ease;
}
.menu-principal .menu-lista a:hover,
.menu .menu-lista a:hover,
nav.menu > ul a:hover,
nav.menu-principal > ul a:hover {
background: rgba(215, 168, 63, 0.12);
border-left-color: var(--sr-dourado);
color: var(--sr-azul-noite) !important;
padding-left: 0.95rem;
}
/* Conteúdo harmonizado */
.artigo {
border-color: rgba(215, 168, 63, 0.32);
box-shadow: 0 6px 28px rgba(5, 11, 31, 0.07);
}
h1, h2, h3 {
color: var(--sr-azul-menu);
}
blockquote {
border-left-color: var(--sr-dourado);
}
/* Desktop: menu em colunas apenas quando aberto */
@media (min-width: 900px) {
.menu-principal .menu-lista.menu-aberto,
.menu .menu-lista.menu-aberto,
.menu-principal .menu-lista.aberto,
.menu .menu-lista.aberto,
.menu-principal.is-open .menu-lista,
.menu.is-open .menu-lista,
body.menu-aberto .menu-lista,
body.menu-open .menu-lista {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0 2rem;
}
}
/* Responsivo */
@media (max-width: 767px) {
.cabecalho {
padding: 0.95rem 0.75rem 1.05rem !important;
}
.cabecalho-logo img,
.cabecalho .custom-logo,
.cabecalho .site-logo img,
.cabecalho .logo img {
width: min(410px, 94vw) !important;
max-height: 235px !important;
}
.menu-principal .menu-cabecalho,
.menu .menu-cabecalho {
padding: 0.62rem 0.95rem;
}
}
@media (max-width: 420px) {
.cabecalho-logo img,
.cabecalho .custom-logo,
.cabecalho .site-logo img,
.cabecalho .logo img {
width: min(340px, 95vw) !important;
max-height: 210px !important;
}
}