/* ============================================
ARLORA — CSS GLOBAL PARA WORDPRESS + ASTRA
Pegar en: Apariencia > Personalizar > CSS adicional
O en: WP Code plugin
============================================ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Jost:wght@200;300;400;500;600&display=swap');
/* === VARIABLES GLOBALES === */
:root {
--gold: #B8975A;
--gold-light: #D4B483;
--gold-pale: #F0E6D3;
--cream: #FAF7F2;
--dark: #1C1A17;
--warm-gray: #6B6560;
--text: #2E2B27;
--white: #FFFFFF;
--border: rgba(184, 151, 90, 0.2);
--shadow: 0 4px 40px rgba(28, 26, 23, 0.08);
--shadow-hover: 0 12px 60px rgba(28, 26, 23, 0.16);
--radius: 2px;
--font-display: 'Cormorant Garamond', Georgia, serif;
--font-body: 'Jost', sans-serif;
--transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
/* === RESET ASTRA === */
body {
font-family: var(--font-body) !important;
background: var(--cream) !important;
color: var(--text) !important;
font-weight: 300;
line-height: 1.7;
-webkit-font-smoothing: antialiased;
}
/* === HEADER / NAVEGACIÓN === */
#masthead,
.site-header,
.ast-primary-header-bar {
background: rgba(250, 247, 242, 0.96) !important;
backdrop-filter: blur(12px) !important;
border-bottom: 1px solid var(--border) !important;
box-shadow: none !important;
position: sticky !important;
top: 0 !important;
z-index: 9999 !important;
transition: var(--transition) !important;
}
.ast-site-identity .site-title a,
.ast-site-identity .site-title {
font-family: var(--font-display) !important;
font-size: 28px !important;
font-weight: 400 !important;
color: var(--dark) !important;
letter-spacing: 2px !important;
text-decoration: none !important;
}
/* Logo styling */
.custom-logo {
max-height: 50px !important;
}
/* === NAVEGACIÓN PRINCIPAL === */
.main-navigation ul li a,
.ast-main-header-bar-alignment .main-navigation ul li a,
#site-navigation ul li a {
font-family: var(--font-body) !important;
font-size: 11px !important;
font-weight: 500 !important;
letter-spacing: 2.5px !important;
text-transform: uppercase !important;
color: var(--warm-gray) !important;
text-decoration: none !important;
padding: 8px 16px !important;
transition: var(--transition) !important;
position: relative;
}
.main-navigation ul li a::after {
content: '';
position: absolute;
bottom: 0;
left: 16px;
right: 16px;
height: 1px;
background: var(--gold);
transform: scaleX(0);
transition: transform 0.3s ease;
}
.main-navigation ul li a:hover,
.main-navigation ul li.current-menu-item > a {
color: var(--gold) !important;
}
.main-navigation ul li a:hover::after,
.main-navigation ul li.current-menu-item > a::after {
transform: scaleX(1);
}
/* === PÁGINA CONTENT === */
.site-content,
.entry-content,
.ast-container {
max-width: 100% !important;
padding: 0 !important;
}
.entry-content p,
.entry-content h1,
.entry-content h2,
.entry-content h3 {
margin: 0;
padding: 0;
}
/* === BOTONES GLOBALES === */
.arlora-btn {
display: inline-block;
padding: 14px 36px;
background: var(--dark);
color: var(--cream) !important;
font-family: var(--font-body);
font-size: 11px;
font-weight: 500;
letter-spacing: 2.5px;
text-transform: uppercase;
text-decoration: none !important;
border: 1px solid var(--dark);
cursor: pointer;
transition: var(--transition);
border-radius: 0;
}
.arlora-btn:hover {
background: transparent;
color: var(--dark) !important;
}
.arlora-btn-outline {
display: inline-block;
padding: 14px 36px;
background: transparent;
color: var(--dark) !important;
font-family: var(--font-body);
font-size: 11px;
font-weight: 500;
letter-spacing: 2.5px;
text-transform: uppercase;
text-decoration: none !important;
border: 1px solid var(--dark);
cursor: pointer;
transition: var(--transition);
}
.arlora-btn-outline:hover {
background: var(--dark);
color: var(--cream) !important;
}
.arlora-btn-gold {
display: inline-block;
padding: 14px 36px;
background: var(--gold);
color: var(--white) !important;
font-family: var(--font-body);
font-size: 11px;
font-weight: 500;
letter-spacing: 2.5px;
text-transform: uppercase;
text-decoration: none !important;
border: 1px solid var(--gold);
cursor: pointer;
transition: var(--transition);
}
.arlora-btn-gold:hover {
background: transparent;
color: var(--gold) !important;
}
/* === FOOTER === */
.site-footer,
#colophon {
background: var(--dark) !important;
color: rgba(250, 247, 242, 0.6) !important;
padding: 60px 40px 30px !important;
font-family: var(--font-body) !important;
font-size: 12px !important;
letter-spacing: 1px !important;
}
.site-footer a {
color: var(--gold-light) !important;
text-decoration: none !important;
transition: var(--transition) !important;
}
.site-footer a:hover {
color: var(--white) !important;
}
/* === SCROLL BAR === */
::-webkit-scrollbar {
width: 4px;
}
::-webkit-scrollbar-track {
background: var(--cream);
}
::-webkit-scrollbar-thumb {
background: var(--gold);
border-radius: 2px;
}
/* === ANIMACIONES GLOBALES === */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes shimmer {
0% { background-position: -200% center; }
100% { background-position: 200% center; }
}
.animate-in {
animation: fadeInUp 0.8s ease forwards;
}
/* === OCULTAR ELEMENTOS ASTRA NO DESEADOS === */
.ast-breadcrumbs-wrapper,
.post-thumbnail,
.entry-header .entry-title,
.entry-footer,
.ast-author-bio,
.comments-area {
display: none !important;
}
/* Quitar padding extra de Astra en páginas */
.ast-page-builder-template .entry-content,
.page-template-default .entry-content {
padding: 0 !important;
margin: 0 !important;
}
.ast-container,
.entry-content {
max-width: none !important;
}
Ir al contenido