/* ========================================================================== Raver Hosting Manager - Dark Theme & Client Portal System ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Onest:wght@400..800&family=Syne:wght@400..800&family=JetBrains+Mono:wght@400;500&display=swap'); /* -------------------------------------------------------------------------- Dos tipografías con oficios distintos. Syne es de exhibición: cuerpos grandes y poco texto. En cuerpo chico, en negrita o en tablas se vuelve difícil —su cero es casi un círculo lleno y un dominio a 26px medía 316px donde había 265—, así que queda para la marca y el hero. Onest es de interfaz (decisión de Roberto, 22/9/2026: Inter se veía muy común; la quería parecida a Innovator Grotesk, que es paga): x grande, formas simples y se lee bien en chico. Antes era Inter. Para probar otra, se cambia --raver-fuente y nada más. -------------------------------------------------------------------------- */ :root { --raver-fuente: 'Onest', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --raver-display: 'Syne', var(--raver-fuente); --raver-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; } /* ========================================================================== Global Site & Theme Dark Theme Normalization ========================================================================== */ html, body, body.elementor-default, body.wp-theme-hello-elementor, #page, .site-main, #content, .page-content, .entry-content { color: var(--tinta-texto) !important; font-family: var(--raver-fuente) !important; -webkit-font-smoothing: antialiased; } /* El negro va solo en el html, que es quien lleva la retícula. Todo lo de adentro queda transparente: si el body o los contenedores del tema se pintan, tapan el fondo y la retícula queda recortada a la altura del contenido. Las clases del tema van nombradas acá aunque parezca redundante: pesan más que un body pelado y, en otra regla, volverían a pintar encima. */ html { background-color: var(--tinta-fondo) !important; } body, body.elementor-default, body.wp-theme-hello-elementor { background-color: transparent !important; background-image: none !important; } #page, .site-main, #content, .page-content, .entry-content { background-color: transparent !important; } /* -------------------------------------------------------------------------- Retícula de fondo, la misma de raver.com.py: líneas de 1px cada 104px, casi invisibles. Da la sensación de plano técnico sin competir con el contenido. Va en el y en un solo elemento: en varios se apilarían retículas desalineadas entre sí, porque el html, el #page y el .entry-content arrancan en orígenes distintos. Fija al viewport para que no aparezcan costuras al desplazar. Estaba en el y quedaba negro por debajo del contenido cuando la ventana era más alta que la página: un fondo fijo igual se pinta solo dentro de la caja de su elemento, y la del body termina donde termina lo que tiene adentro. El body no propaga su fondo al lienzo porque el html ya tiene el suyo. En el html no hay caja que alcance: cubre la ventana entera sin tocar la maquetación, que es lo que haría un min-height (y de paso le agregaría una barra de desplazamiento a quien tenga la barra de WordPress). -------------------------------------------------------------------------- */ html { --raver-grid-color: rgb(var(--tinta-rejilla-rgb) / 0.045); --raver-grid-size: 104px; background-image: linear-gradient(to right, var(--raver-grid-color) 1px, transparent 1px), linear-gradient(to bottom, var(--raver-grid-color) 1px, transparent 1px) !important; background-size: var(--raver-grid-size) var(--raver-grid-size) !important; background-attachment: fixed !important; } /* Universal Button Reset to eliminate theme default borders & colors (e.g. magenta/fuchsia) */ .raver-portal-container button, .raver-global-header-nav button, #raver-fe-modal button, .raver-filter-btn, .raver-btn-action, .raver-btn-secondary, .raver-btn-fe-save, .raver-btn-fe-preview { font-family: var(--raver-fuente) !important; text-transform: none !important; letter-spacing: normal !important; outline: none !important; box-shadow: none !important; text-shadow: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; } /* ========================================================================== Site Header (Hello Elementor & Global Minimal Header) ========================================================================== */ #site-header.site-header, header.site-header { background: rgb(var(--tinta-fondo-rgb) / 0.9) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; border-bottom: 1px solid var(--tinta-borde) !important; position: sticky !important; top: 0 !important; /* Por debajo de la barra de WordPress, que va en 99999. Con el mismo valor ganaba este por ir después en el documento y tapaba el menú del escritorio cuando estás conectado. */ z-index: 9999 !important; padding: 12px 24px !important; transition: all 0.3s ease; } /* -------------------------------------------------------------------------- Sitio con la barra de administración. La barra es fija y ocupa el borde superior, así que un encabezado pegajoso en top:0 se le monta encima. Los altos son los que usa WordPress: 32px en escritorio y 46px en pantallas angostas. Por debajo de 601px la barra deja de ser fija y se va con el scroll, así que ahí el encabezado vuelve a top:0 — si no, quedaría un hueco de 46px flotando apenas se desplaza la página. -------------------------------------------------------------------------- */ body.admin-bar #site-header.site-header, body.admin-bar header.site-header, body.admin-bar .raver-standalone-topbar { top: 32px !important; } @media screen and (max-width: 782px) { body.admin-bar #site-header.site-header, body.admin-bar header.site-header, body.admin-bar .raver-standalone-topbar { top: 46px !important; } } @media screen and (max-width: 600px) { body.admin-bar #site-header.site-header, body.admin-bar header.site-header, body.admin-bar .raver-standalone-topbar { top: 0 !important; } } #site-header .header-inner, header.site-header .header-inner { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; } #site-header .site-branding, header.site-header .site-branding { display: flex; align-items: center; } #site-header .site-title a, header.site-header .site-title a { font-family: var(--raver-display) !important; font-weight: 700 !important; font-size: 19px !important; letter-spacing: 1px !important; /* Syne pide aire, no compresión; en versales, un poco más */ color: var(--tinta-texto-fuerte) !important; text-decoration: none !important; display: inline-flex; align-items: center; gap: 8px; } .raver-lottie-logo { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 32px !important; height: 32px !important; flex-shrink: 0 !important; vertical-align: middle !important; filter: brightness(0) invert(var(--tinta-logo-inv, 1)) !important; } .raver-lottie-logo svg { width: 100% !important; height: 100% !important; display: block !important; filter: brightness(0) invert(var(--tinta-logo-inv, 1)) !important; } .raver-lottie-logo svg path, .raver-lottie-logo svg g, .raver-lottie-logo svg shape, .raver-lottie-logo svg rect, .raver-lottie-logo svg polygon { fill: #ffffff !important; stroke: #ffffff !important; } /* Global Navigation injected into Site Header */ .raver-global-header-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; } .raver-header-nav-btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 3px; font-size: 13.5px; font-weight: 500; color: var(--tinta-suave) !important; background: transparent; border: none; position: relative; transition: color 0.2s ease, background-color 0.2s ease; text-decoration: none !important; cursor: pointer; letter-spacing: 0.2px; } .raver-header-nav-btn svg, .raver-header-nav-btn .lni { flex-shrink: 0; opacity: 0.8; transition: opacity 0.2s ease, transform 0.2s ease; } /* Los SVG traían el tamaño en el atributo; un icono de fuente lo toma del font-size. Es el mismo 15px que tenían. */ .raver-nav-icon { font-size: 15px; } .raver-header-nav-btn::after { content: ''; position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%); width: 0; height: 2px; background: var(--tinta-acento); border-radius: 2px; transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease; opacity: 0; } .raver-header-nav-btn:hover { color: var(--tinta-texto-fuerte) !important; background: rgb(var(--tinta-vela-rgb) / 0.04); } .raver-header-nav-btn:hover svg, .raver-header-nav-btn:hover .lni { opacity: 1; transform: translateY(-1px); } .raver-header-nav-btn:hover::after { width: calc(100% - 20px); opacity: 1; } .raver-header-nav-btn.active { color: var(--tinta-texto-fuerte) !important; font-weight: 600; background: rgb(var(--tinta-acento-rgb) / 0.08); } .raver-header-nav-btn.active svg, .raver-header-nav-btn.active .lni { opacity: 1; color: var(--tinta-acento-claro); } .raver-header-nav-btn.active::after { width: calc(100% - 16px); opacity: 1; box-shadow: 0 0 10px rgb(var(--tinta-acento-rgb) / 0.7); } .raver-header-wa { color: var(--tinta-suave) !important; } .raver-header-wa:hover { color: var(--tinta-ok) !important; background: rgb(var(--tinta-ok-rgb) / 0.06); } .raver-header-wa:hover svg, .raver-header-wa:hover .lni { color: var(--tinta-ok); } .raver-header-wa:hover::after { background: #22c55e; box-shadow: 0 0 8px rgb(var(--tinta-ok-rgb) / 0.6); } .raver-header-logout { color: var(--tinta-suave) !important; } .raver-header-logout:hover { color: var(--tinta-mal) !important; background: rgb(var(--tinta-mal-rgb) / 0.06); } .raver-header-logout:hover svg, .raver-header-logout:hover .lni { color: var(--tinta-mal); } .raver-header-logout:hover::after { background: var(--tinta-mal); box-shadow: 0 0 8px rgb(var(--tinta-mal-rgb) / 0.6); } .raver-header-user-badge { display: inline-flex; align-items: center; gap: 8px; background: rgb(var(--tinta-fondo-rgb) / 0.8); padding: 5px 12px; border-radius: 6px; border: 1px solid var(--tinta-sup); margin-left: 6px; } .raver-header-avatar { width: 22px; height: 22px; border-radius: 50%; background: var(--tinta-acento); color: var(--tinta-sobre-acento); font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; } .raver-header-username { font-size: 12px; font-weight: 600; color: var(--tinta-texto-3); } /* Standalone Topbar (for Canvas pages) */ .raver-standalone-topbar { background: rgb(var(--tinta-fondo-rgb) / 0.9); backdrop-filter: blur(16px); border-bottom: 1px solid var(--tinta-borde); position: sticky; top: 0; /* Mismo motivo que el encabezado del tema: por debajo de la barra de WordPress, que va en 99999. */ z-index: 9999; padding: 12px 24px; } .raver-topbar-inner { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; } /* La otra marca del encabezado (páginas sin el header del tema): mismo tratamiento que .site-title, para que no haya dos pesos según la página. */ .raver-topbar-brand a { color: var(--tinta-texto-fuerte); text-decoration: none; font-family: var(--raver-display); font-size: 19px; font-weight: 700; letter-spacing: 1px; } /* Site Footer */ #site-footer.site-footer, footer.site-footer { background: var(--tinta-hundido) !important; border-top: 1px solid var(--tinta-borde) !important; padding: 24px 20px !important; color: var(--tinta-apagado) !important; } #site-footer .copyright p, footer.site-footer .copyright p { color: var(--tinta-apagado) !important; font-size: 13px !important; margin: 0 !important; text-align: center !important; } /* Elementor Containers Dark Normalization */ .elementor-section, .elementor-container, .e-con, .e-con-inner { background-color: transparent !important; } .home.blog .page-header, .home.blog .page-content article.post { display: none !important; }