/* ============================================================= HORMONA VIDA — BASE DE MARCA Fuente de verdad de tipografias y colores segun "Estilo Base". Se carga la ULTIMA del (ver header.php del tema padre), por eso puede corregir cualquier regla anterior del tema o de los plugins sin necesidad de subir la especificidad a mano. Guia de estilo: Fuentes Cormorant Garamond (editorial: titulares destacados, citas, testimonios) Montserrat (titulares, cuerpo, pies de foto, botones, navegacion) Colores Forest Sage #4A6B58 Muted Sage #7A9E8A Warm Ochre #B8924A Petal Rose #D5A89C Driftwood #C4B5A5 Cream Linen #F5EDE4 Los seis colores de arriba son los unicos de la marca. Las variantes "-tint" / "-deep" que aparecen mas abajo NO son colores nuevos: son el mismo tono aclarado u oscurecido para fondos suaves y estados hover, y estan aqui para que no vuelvan a inventarse verdes o beiges sueltos por el camino. ============================================================= */ :root { /* ── Paleta de marca ─────────────────────────────── */ --hv-forest-sage: #4a6b58; --hv-muted-sage: #7a9e8a; --hv-warm-ochre: #b8924a; --hv-petal-rose: #d5a89c; --hv-driftwood: #c4b5a5; --hv-cream-linen: #f5ede4; /* ── Variantes derivadas (mismo tono, distinta luz) ── */ --hv-forest-deep: #34503f; /* Forest Sage oscurecido: fondos y hover */ --hv-sage-tint: #e8efea; /* Muted Sage al 15%: fondos suaves */ --hv-ochre-tint: #f0e4cd; /* Warm Ochre al 20%: destacados */ --hv-rose-tint: #f0dcd7; /* Petal Rose al 40%: fondos suaves */ --hv-driftwood-tint: #e7e0d8; /* Driftwood al 40%: bordes y separadores */ --hv-cream-deep: #ebe0d3; /* Cream Linen oscurecido: bandas alternas */ /* ── Neutros ─────────────────────────────────────── */ --hv-white: #ffffff; --hv-ink: #1a1a1a; /* texto principal */ --hv-ink-muted: #333333; /* texto secundario */ --hv-ink-soft: #5f5d5a; /* pies de foto, metadatos */ --hv-hairline: #e0e0e0; /* bordes neutros de 1px */ /* ── Tipografias ─────────────────────────────────── */ --hv-font-sans: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --hv-font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; /* ── Alias heredados (hv26-token.css) ────────────── */ --hv-green: var(--hv-forest-sage); --hv-green-dark: var(--hv-forest-deep); --hv-green-light: var(--hv-muted-sage); --hv-text: var(--hv-ink); --hv-text-muted: var(--hv-ink-muted); --hv-text-soft: var(--hv-ink-muted); --hv-text-list: var(--hv-ink-muted); --hv-border: 1px solid var(--hv-forest-sage); --hv-border-light: 1px solid var(--hv-forest-sage); --hv-border-gray: 1px solid var(--hv-hairline); } /* ============================================================= TIPOGRAFIA ============================================================= */ /* Montserrat es la fuente base de todo el sitio. El tema Luxmed * reparte "Rubik" (y "Lora" en los formularios) por sus opciones, * asi que aqui se sustituyen ambas de una vez en lugar de ir * persiguiendo cada regla generada. */ body, button, input, select, optgroup, textarea, .sc_layouts_menu, .sc_layouts_menu_nav, .menu-item, .widget, .post_content, .vc_btn3, .wpcf7-form, .wpcf7-form input, .wpcf7-form select, .wpcf7-form textarea { font-family: var(--hv-font-sans); } /* Los titulares por defecto son Montserrat (autoridad moderna). * El momento editorial se pide de forma explicita con las clases * .font-garamont-* o .hv-serif, no al reves. */ h1, h2, h3, h4, h5, h6, .sc_item_title, .sc_item_subtitle, .widget_title, .widgettitle { font-family: var(--hv-font-sans); } /* Cormorant Garamond: titulares destacados, citas y testimonios. */ .font-garamont-h1, .font-garamont-h2, .font-garamont-h3, .font-garamont-h4, .font-garamont-h5, .font-garamont-h6, .font-garamont-t, .font-garamont-p, .hv-serif, blockquote, blockquote p, .sc_testimonials_item_content, .hv26-tag-card-font, .mlw_qmn_new_question { font-family: var(--hv-font-serif); } /* Laila no forma parte de la marca: donde el tema la pedia, el * papel que cumplia (titulo de acento) lo ocupa Cormorant. */ .sc_icons_item_title span { font-family: var(--hv-font-serif); } /* Cormorant Garamond tiene una altura de x pequena: al mismo * tamano en px se lee bastante mas chico que Montserrat. Se * compensa aqui para que los bloques mixtos no queden desparejos. */ .font-garamont-h1, .font-garamont-h2, .font-garamont-h3, .font-garamont-t, .font-garamont-p, .hv-serif { letter-spacing: 0.005em; } /* ============================================================= COLOR ============================================================= */ body { color: var(--hv-ink); } a { color: var(--hv-forest-sage); } a:hover, a:focus { color: var(--hv-forest-deep); } /* Utilidades de paleta, para no volver a escribir hex a mano en * el contenido de WPBakery. */ .hv-c-forest { color: var(--hv-forest-sage) !important; } .hv-c-sage { color: var(--hv-muted-sage) !important; } .hv-c-ochre { color: var(--hv-warm-ochre) !important; } .hv-c-rose { color: var(--hv-petal-rose) !important; } .hv-c-drift { color: var(--hv-driftwood) !important; } .hv-c-ink { color: var(--hv-ink) !important; } .hv-c-white { color: var(--hv-white) !important; } /* El color de texto de cada fondo no es decorativo: es el unico de los dos * (blanco o tinta) que alcanza el 4.5:1 de la norma AA sobre ese fondo. * Forest Sage y su version oscura piden blanco; los cuatro claros piden * tinta. Sobre Muted Sage el blanco se queda en 2.96:1 y sobre Warm Ochre * en 2.90:1, asi que ahi el texto blanco no es una opcion. */ .hv-bg-forest { background-color: var(--hv-forest-sage) !important; color: var(--hv-white) !important; } /* 5.94:1 */ .hv-bg-deep { background-color: var(--hv-forest-deep) !important; color: var(--hv-white) !important; } /* 8.88:1 */ .hv-bg-sage { background-color: var(--hv-muted-sage) !important; color: var(--hv-ink) !important; } /* 5.87:1 */ .hv-bg-ochre { background-color: var(--hv-warm-ochre) !important; color: var(--hv-ink) !important; } /* 6.01:1 */ .hv-bg-rose { background-color: var(--hv-petal-rose) !important; color: var(--hv-ink) !important; } /* 8.21:1 */ .hv-bg-drift { background-color: var(--hv-driftwood) !important; color: var(--hv-ink) !important; } /* 8.70:1 */ .hv-bg-cream { background-color: var(--hv-cream-linen) !important; color: var(--hv-ink) !important; } /* 15.01:1 */