/** * Sistema visual de Revista Maquinaria. * * Colores: * Óxido #B3361A el rojo del logo, medido sobre el PNG. Solo para acciones. * Acero #1B3A4F azul de chapa pintada: portada, pie, titulares. * Hormigón #EEF0F1 fondos de sección y campos. * Señal #F2B705 el amarillo de obra. Solo insignias de destacado y foco sobre oscuro. * * Tipografía: Archivo (variable). Ancho 100 para leer, 78 para titulares: los catálogos de * maquinaria siempre titularon en grotesca condensada, y ocupa menos alto en móvil. */ :root { --rm-oxido: #b3361a; --rm-oxido-hover: #952a12; --rm-acero: #1b3a4f; --rm-acero-2: #2e5a78; --rm-acero-claro: #dfe7ed; --rm-hormigon: #eef0f1; --rm-linea: #d5dadf; --rm-tinta: #22303c; --rm-gris: #5e6975; --rm-senal: #f2b705; --rm-fuente: "Archivo", "Helvetica Neue", Arial, sans-serif; --rm-titular: 78; /* Los nombres viejos de portada.css apuntan a la paleta nueva: así todo lo que ya estaba construido cambia de color sin tocar regla por regla. */ --rm-azul: var( --rm-acero ); --rm-azul-oscuro: #142c3c; --rm-acento: var( --rm-oxido ); --rm-texto: var( --rm-tinta ); --rm-suave: var( --rm-gris ); --rm-borde: var( --rm-linea ); --rm-fondo: var( --rm-hormigon ); --rm-radio: 4px; } /* ------------------------------------------------------------------------- * Tipografía en todo el sitio * * Tema, Motors, WooCommerce y Elementor declaran cada uno su familia —con clases * como .heading-font que cargan después—, así que una regla en `body` no alcanza. * Se impone sobre los elementos de texto y se excluye todo lo que sea icono: las * fuentes de iconos (Font Awesome, stm-icon, eicons) viven en clases con "fa" o * "icon" y en , que no está en la lista. * ---------------------------------------------------------------------- */ body { font-family: var( --rm-fuente ); color: var( --rm-tinta ); font-feature-settings: "kern"; -webkit-font-smoothing: antialiased; } body :is( h1, h2, h3, h4, h5, h6, p, a, span, li, dt, dd, td, th, label, input, select, textarea, button, div, strong, b, em, small, time, figcaption, blockquote, option, legend, summary, caption ):not( [class*="fa-"] ):not( [class^="fa"] ):not( [class*="icon"] ):not( .dashicons ):not( [class*="eicon"] ) { font-family: var( --rm-fuente ) !important; } body :is( h1, h2, h3, h4, h5, h6, .heading-font ):not( [class*="icon"] ) { font-stretch: 82%; letter-spacing: -0.005em; } /* Precios, horas, años y conteos: cifras de ancho fijo, para que las columnas de números se lean alineadas. */ .rm-tarjeta__precio, .rm-tarjeta__datos, .rm-categoria__conteo, .price, .normal-price, .heading-font .price, .stm-listing-single-price-title, .single-car-prices { font-variant-numeric: tabular-nums; } /* ------------------------------------------------------------------------- * Precio en etiqueta (un solo componente para todas las tarjetas de máquinas) * * Es el diseño que el dueño eligió en «Mis avisos» y pidió llevar a todas las * publicaciones: etiqueta óxido, cifras blancas tabulares y el borde izquierdo inclinado * (23°, el ángulo del ::before de Motors). Blanco sobre óxido da 6,1:1, sobre el mínimo * AA de 4,5:1. * * El filo se recorta con clip-path sobre la propia etiqueta y NO con el ::before de Motors: * ese pseudo-elemento tiene z-index -1 y se pinta detrás del fondo blanco de la tarjeta, * así que en los avisos publicados quedaba tapado y el precio se veía como un rectángulo * (el «cuadro» que el dueño señaló). Con clip-path el filo es parte del mismo elemento: no * depende de ningún contexto de apilamiento, no sobresale de la caja (Similares y las * tarjetas recortan lo que se sale) y se ve igual en el listado, la portada y las fichas. * * Dónde se aplica (la lista de selectores se repite en cada regla de abajo: al sumar un * contexto nuevo hay que agregarlo en todas): * #listings-result .price listado (grilla y lista) y perfil del vendedor * .rm-cuenta … .meta-top .price «Mis avisos» y «Favoritos» * .single-listings .stm-similar-car … «Similares» de la ficha * .stm-car-compare-row .price «Comparar» (hoy no hay botón que lleve ahí) * .rm-tarjeta__precio tarjetas de la portada * Quedan fuera a propósito el precio grande de la ficha (.stm-listing-single-price-title) * y los servicios. * * Especificidad: :is() toma la del argumento más fuerte, así que el `#listings-result` deja * TODA la lista en (1,1,0), también en los contextos que no tienen ese id. Es a propósito: * Motors pinta el precio con selectores de seis clases (`.listing-list-loop … .price * .normal-price .heading-font`) y así se los supera sin !important. A cambio, una hoja que * quiera cambiar algo que el componente fija (relleno, color, tipografía, max-width) necesita * un selector con id o, mejor, las variables --rm-precio-fs (tamaño) y --rm-filo (corte); * lo que el componente no fija (position, margin, top/right, z-index, flex) se pone con * cualquier selector. Cada hoja pone así solo el lugar de la etiqueta. * * Todo va en `em`: la altura de una línea es 1,8 em, así que un filo de 0,76 em (1,8 em × * tan 23°) da siempre el mismo ángulo. Con precio de oferta la etiqueta tiene dos líneas * (precio anterior tachado y precio nuevo) y el filo se alarga para conservarlo. * ---------------------------------------------------------------------- */ :is( #listings-result .price, .rm-cuenta .listing-list-loop .content .meta-top .price, .single-listings .stm-similar-car .stm-price, .stm-car-compare-row .price, .rm-tarjeta__precio ) { --rm-filo: 0.76em; display: block; box-sizing: border-box; float: none; width: fit-content; min-width: 0; max-width: 100%; height: auto; padding: 0.3em 0.6em 0.3em calc( var( --rm-filo ) + 0.55em ); border: 0; border-radius: 4px; background: var( --rm-oxido ); clip-path: polygon( var( --rm-filo ) 0, 100% 0, 100% 100%, 0 100% ); color: #fff; font-size: var( --rm-precio-fs, 19px ); font-stretch: 82%; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: 0; line-height: 1.2; text-align: left; text-decoration: none; text-transform: none; /* En condensado el espacio entre «$» y «CLP» queda casi cerrado y se lee «$1.000.000CLP». */ word-spacing: 0.12em; } /* La punta que dibuja Motors (y el triángulo de Similares) quedaría duplicada. */ :is( #listings-result .price, .rm-cuenta .listing-list-loop .content .meta-top .price, .single-listings .stm-similar-car .stm-price, .stm-car-compare-row .price, .rm-tarjeta__precio )::before, :is( #listings-result .price, .rm-cuenta .listing-list-loop .content .meta-top .price, .single-listings .stm-similar-car .stm-price, .stm-car-compare-row .price, .rm-tarjeta__precio )::after { content: none; display: none; } /* Motors mete el precio en capas (.normal-price › .heading-font) con sus propios rellenos, posiciones y colores: se aplanan para que la etiqueta las trate como un solo texto. */ :is( #listings-result .price, .rm-cuenta .listing-list-loop .content .meta-top .price, .single-listings .stm-similar-car .stm-price, .stm-car-compare-row .price, .rm-tarjeta__precio ) :where( .normal-price, .sale-price, .heading-font ) { position: static; inset: auto; z-index: auto; width: auto; margin: 0; padding: 0; background: none; color: inherit; font-family: inherit; font-size: inherit; font-stretch: inherit; font-weight: inherit; letter-spacing: inherit; line-height: inherit; text-align: inherit; } /* Rótulo opcional del precio («Desde»…): Motors lo pone en 10 px, mayúsculas y a medias de opacidad, que sobre el óxido no se lee. El tamaño tiene un piso de 11 px: dentro del precio anterior de una oferta (que ya va a 0,72 em) el 0,65 em solo daba 8,9 px. */ :is( #listings-result .price, .rm-cuenta .listing-list-loop .content .meta-top .price, .single-listings .stm-similar-car .stm-price, .stm-car-compare-row .price, .rm-tarjeta__precio ) .label-price { position: static; display: inline; max-width: none; margin: 0 0.4em 0 0; font-size: max( 0.65em, 11px ); font-weight: 600; line-height: inherit; text-transform: none; vertical-align: baseline; opacity: 1; } /* Oferta: precio anterior tachado arriba y el vigente abajo. El tachado va a 0,9 de blanco (5,2:1 sobre el óxido, aún sobre AA aunque sea texto chico). */ :is( #listings-result .price, .rm-cuenta .listing-list-loop .content .meta-top .price, .single-listings .stm-similar-car .stm-price, .stm-car-compare-row .price, .rm-tarjeta__precio ) .regular-price { position: static; z-index: auto; display: block; margin: 0; padding: 0; color: rgb( 255 255 255 / 0.9 ); font-size: 0.72em; font-weight: 600; line-height: 1.2; text-align: inherit; text-decoration: line-through; } :is( #listings-result .price, .rm-cuenta .listing-list-loop .content .meta-top .price, .single-listings .stm-similar-car .stm-price, .stm-car-compare-row .price, .rm-tarjeta__precio ).discounted-price { --rm-filo: 1.1em; } /* «Consultar precio»: texto en vez de cifra, un punto más chico. */ .rm-tarjeta__precio--consultar { --rm-precio-fs: 15px; } /* «Comparar»: Motors le da al precio `float: right` y 18 px de margen izquierdo; la etiqueta va a la izquierda, sobre el título, con un respiro debajo. */ .stm-car-compare-row .listing-car-item-meta .car-meta-top .price { margin: 0 0 8px; } /* ------------------------------------------------------------------------- * Foco visible * ---------------------------------------------------------------------- */ :where( a, button, input, select, textarea, summary, [tabindex] ):focus-visible { outline: 3px solid var( --rm-oxido ); outline-offset: 2px; } :where( .rm-hero, .rm-pie ) :where( a, button, input, select, textarea, summary ):focus-visible { outline-color: var( --rm-senal ); } /* ------------------------------------------------------------------------- * Botones propios * * Con `body` delante: el kit de Elementor pinta todo