/* ══════════════════════════════════════════════════
SealTheBasement.com — Custom CSS para Astra
Pegar en: Apariencia → Personalizar → CSS Adicional
══════════════════════════════════════════════════ */
/* ── Fuentes Google (Barlow Condensed + Barlow) ── */
@import url(‘https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=Barlow:wght@400;500;600&family=Barlow+Semi+Condensed:wght@500;600&display=swap’);
/* ── Tokens de color ── */
:root {
–stb-navy: #1A3B5C;
–stb-navy-deep: #0F2540;
–stb-rust: #C84B1F;
–stb-steel: #4A7FA5;
–stb-bg: #F4F7FA;
–stb-border: #D0DCE8;
–stb-muted: #52697A;
}
/* ── Body & fondo general ── */
body {
background-color: var(–stb-bg);
font-family: ‘Barlow’, sans-serif;
font-size: 16px;
line-height: 1.65;
color: #1A2B38;
}
/* ── Headings ── */
h1, h2, h3, h4, h5, h6,
.ast-blog-single-element .entry-title,
.entry-title {
font-family: ‘Barlow Condensed’, sans-serif;
font-weight: 800;
line-height: 1.1;
letter-spacing: 0.01em;
color: #1A2B38;
}
h1 { font-size: clamp(32px, 5vw, 52px); }
h2 { font-size: clamp(26px, 4vw, 38px); }
h3 { font-size: clamp(20px, 3vw, 26px); }
h4 { font-size: 19px; }
/* ── Header / Navegación ── */
.site-header,
.ast-primary-header-bar {
background-color: var(–stb-navy) !important;
box-shadow: 0 2px 16px rgba(0,0,0,.25);
}
/* Logo texto */
.site-title,
.site-title a,
.ast-site-title-wrap .site-title a {
font-family: ‘Barlow Condensed’, sans-serif !important;
font-size: 22px !important;
font-weight: 800 !important;
color: #ffffff !important;
letter-spacing: 0.02em;
}
.ast-site-description,
.site-description {
font-family: ‘Barlow Semi Condensed’, sans-serif;
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #7FB3D3 !important;
}
/* Menú nav links */
.main-header-menu .menu-item > a,
#ast-hf-menu-1 .menu-item > a {
font-family: ‘Barlow Semi Condensed’, sans-serif !important;
font-size: 14px !important;
font-weight: 600 !important;
color: #C8DCF0 !important;
padding: 8px 14px !important;
transition: color .15s, background .15s;
}
.main-header-menu .menu-item > a:hover,
.main-header-menu .current-menu-item > a {
color: #ffffff !important;
background: rgba(255,255,255,.1) !important;
border-radius: 4px;
}
/* CTA del menú: último item «Cost Estimator» */
.main-header-menu .menu-item:last-child > a {
background: var(–stb-rust) !important;
color: #ffffff !important;
border-radius: 4px !important;
padding: 8px 18px !important;
}
.main-header-menu .menu-item:last-child > a:hover {
background: #E05A28 !important;
}
/* ── Hero / Banner de página inicio ── */
.ast-hero-section,
.wp-block-cover,
.hero-section {
background-color: var(–stb-navy-deep);
color: #ffffff;
}
/* ── Botones ── */
.ast-button,
.wp-block-button__link,
.woocommerce a.button,
button,
input[type=»submit»],
.btn-primary {
font-family: ‘Barlow Semi Condensed’, sans-serif !important;
font-size: 15px !important;
font-weight: 600 !important;
background-color: var(–stb-rust) !important;
color: #ffffff !important;
border: none !important;
border-radius: 6px !important;
padding: 12px 24px !important;
transition: background .15s, transform .1s !important;
cursor: pointer;
}
.ast-button:hover,
.wp-block-button__link:hover,
button:hover,
input[type=»submit»]:hover {
background-color: #E05A28 !important;
transform: translateY(-1px);
}
/* Botón secundario */
.btn-secondary,
.wp-block-button.is-style-outline .wp-block-button__link {
background: transparent !important;
color: var(–stb-navy) !important;
border: 2px solid var(–stb-navy) !important;
}
.btn-secondary:hover {
background: var(–stb-navy) !important;
color: #fff !important;
}
/* ── Links ── */
a { color: var(–stb-rust); text-decoration: none; }
a:hover { color: #E05A28; text-decoration: underline; }
/* ── Cards / Posts en blog/archivo ── */
.ast-article-inner,
.ast-blog-layout-1 .ast-article-post,
.post-page-numbers,
.site-main article {
background: #ffffff;
border: 1px solid var(–stb-border);
border-radius: 10px;
box-shadow: 0 2px 12px rgba(15,37,64,.07);
transition: box-shadow .15s, transform .15s;
overflow: hidden;
}
.ast-article-inner:hover {
box-shadow: 0 6px 24px rgba(15,37,64,.13);
transform: translateY(-3px);
}
/* Título de post en cards */
.ast-blog-single-element h2.entry-title a,
.entry-title a {
color: #1A2B38;
font-family: ‘Barlow Condensed’, sans-serif;
font-weight: 700;
}
.entry-title a:hover { color: var(–stb-rust); text-decoration: none; }
/* Excerpt */
.ast-excerpt, .entry-summary, .entry-content p:first-of-type {
font-size: 15px;
color: var(–stb-muted);
line-height: 1.65;
}
/* ── Meta (fecha, categoría, tiempo lectura) ── */
.ast-blog-meta .posted-on,
.ast-blog-meta .byline,
.entry-meta {
font-family: ‘Barlow Semi Condensed’, sans-serif;
font-size: 12.5px;
color: #8AA0B0;
letter-spacing: 0.04em;
}
.cat-links a,
.entry-meta .cat-links a {
background: var(–stb-navy);
color: #fff !important;
font-family: ‘Barlow Semi Condensed’, sans-serif;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 3px 10px;
border-radius: 3px;
text-decoration: none !important;
}
/* ── Sidebar ── */
.widget-area .widget-title,
.secondary .widget-title {
font-family: ‘Barlow Condensed’, sans-serif;
font-size: 16px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(–stb-navy);
border-bottom: 2px solid var(–stb-rust);
padding-bottom: 8px;
margin-bottom: 14px;
}
/* ── Artículo individual ── */
.single .entry-content h2 {
font-size: clamp(22px, 3.5vw, 30px);
margin-block: 32px 12px;
color: var(–stb-navy);
}
.single .entry-content h3 {
font-size: clamp(18px, 2.5vw, 22px);
margin-block: 24px 10px;
color: #1A2B38;
}
.single .entry-content p {
max-width: 68ch;
font-size: 16.5px;
line-height: 1.75;
margin-bottom: 18px;
}
/* Tabla de contenidos / TOC */
.ez-toc-container,
.rank-math-toc,
.wp-block-table-of-contents {
background: var(–stb-bg);
border: 1px solid var(–stb-border);
border-left: 4px solid var(–stb-navy);
border-radius: 6px;
padding: 20px 24px;
margin-block: 28px;
font-size: 15px;
}
/* Tablas de comparación */
.entry-content table {
width: 100%;
border-collapse: collapse;
font-size: 14.5px;
margin-block: 24px;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 1px 8px rgba(15,37,64,.07);
}
.entry-content table th {
background: var(–stb-navy);
color: #ffffff;
font-family: ‘Barlow Semi Condensed’, sans-serif;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 11px 16px;
text-align: left;
}
.entry-content table td {
padding: 10px 16px;
border-bottom: 1px solid var(–stb-border);
vertical-align: top;
}
.entry-content table tr:nth-child(even) td {
background: #F4F7FA;
}
.entry-content table tr:hover td {
background: #EDF2F7;
}
/* ── Cajas de aviso / «Pro Tip» ── */
.notice-box,
.wp-block-pullquote,
blockquote {
border-left: 4px solid var(–stb-rust);
background: #FFF5F2;
padding: 16px 20px;
border-radius: 0 6px 6px 0;
font-style: normal;
color: #3A1508;
margin-block: 24px;
}
/* ── Footer ── */
.site-footer,
.ast-small-footer {
background-color: var(–stb-navy-deep) !important;
color: #7FB3D3 !important;
border-top: 1px solid rgba(255,255,255,.06);
}
.site-footer a { color: #8AAFC8; }
.site-footer a:hover { color: #ffffff; text-decoration: none; }
.footer-widget-area .widget-title {
color: #ffffff !important;
border-bottom-color: rgba(255,255,255,.1) !important;
font-size: 13px !important;
}
.ast-small-footer .ast-footer-copyright {
font-size: 12.5px;
color: #3A5A70;
}
/* ── Paginación ── */
.ast-pagination a,
.page-numbers a {
background: var(–stb-navy);
color: #fff;
border-radius: 4px;
padding: 6px 14px;
font-family: ‘Barlow Semi Condensed’, sans-serif;
font-weight: 600;
font-size: 14px;
text-decoration: none;
}
.ast-pagination a:hover,
.page-numbers .current {
background: var(–stb-rust) !important;
color: #fff !important;
}
/* ── Responsive ajustes ── */
@media (max-width: 768px) {
.entry-content p { font-size: 16px; }
h1 { font-size: 32px; }
h2 { font-size: 26px; }
}