Referencia de estilos globales

Esta referencia explica cómo funcionan en conjunto las secciones del sistema de diseño y dónde se consumen sus valores.

Paleta compartida

Color palette proporciona Color #1 hasta Color #15. Los campos que reconocen la paleta almacenan una referencia a una de esas entradas, de modo que al sustituir un color se actualiza cada ajuste que todavía apunta a ese número.

Define roles semánticos para los números antes de asignarlos a texto, enlaces, fondos, bordes, botones, cabeceras, formularios o componentes.

Fuentes y tipografía

Fonts proporciona una Safe font y Font Families personalizadas con variantes. General styles elige después las familias del cuerpo y de los títulos, y define:

• Body font size;
• colores del texto principal, de los enlaces y del estado hover de los enlaces;
• margen de párrafo, tamaño, peso, altura de línea e interletrado;
• margen de los títulos y ajustes individuales de H1–H6;
• ajustes de Display 1–4.

Los tamaños de títulos y displays pueden combinar un tamaño base con viewport width relative font-size. Un max font size opcional se aplica a partir del umbral de pantalla grande del tema.

Lienzo de la página

General styles puede usar un fondo de cuerpo sólido, en degradado o con imagen. También proporciona el control de Boxed layout y de bordes de página para estilo, anchura y color de la paleta. Activa Display page border on small screens cuando el borde deba aparecer también por debajo del punto de ruptura de 576px del tema.

Estos controles afectan al lienzo que rodea el contenido de la página. Los fondos de sección y el espaciado local siguen perteneciendo a las filas y columnas de Page Builder.

Personalizar el borde de página fijo con CSS

Las siguientes recetas amplían el estilo Fixed frame. No modifican Padding on body porque ese estilo no renderiza el marco SVG. Añade las declaraciones necesarias bajo Settings → POM Theme → Advanced → Custom CSS.

Cuando Display page border on small screens esté desactivado, envuelve las reglas personalizadas que crean elementos visibles adicionales en el mismo punto de ruptura que usa el marco generado:

@media (min-width: 576px) {
  /* Add the selected page-border recipes here. */
}

El contenedor no es necesario cuando el borde de página y sus efectos personalizados deben aparecer en todas las anchuras del área de visualización.

Reutilizar la geometría del marco configurada

La hoja de estilos generada expone la anchura del marco seleccionada como --pom-page-border-width y el radio interno de la página como --pom-page-border-radius. Small, Medium y Big establecen la anchura en 15px, 25px y 35px, respectivamente. El radio predeterminado es cero, por lo que la apariencia estándar permanece cuadrada.

No anules --pom-page-border-width a menos que la geometría del marco personalizada difiera intencionadamente del ajuste del tema guardado.

Redondear las esquinas internas de la página

Anula el radio para que la superficie interna de la página parezca redondeada mientras la máscara SVG mantiene las cuatro esquinas exteriores del área de visualización rellenas por el marco:

body.web-has-page-border {
  --pom-page-border-radius: 30px;
}

La máscara solo cambia el límite visible. No aplica overflow: hidden a .web-main, de modo que los menús, las decoraciones posicionadas y otros elementos no se recortan de forma inesperada.

Añadir un borde exterior

Esto coloca una línea de dos píxeles contra el borde exterior visible del área de visualización. El desplazamiento negativo mantiene el contorno dentro del área de visualización en lugar de permitir que se recorte fuera de la página:

.web-page-border {
  outline: 2px solid #111111;
  outline-offset: -2px;
}

Añadir un borde interior

Crea una superficie fija y no interactiva en el límite entre el marco y la página. Sigue automáticamente ambas propiedades de geometría generadas:

body.web-has-page-border::before {
  content: "";
  position: fixed;
  z-index: 2001;
  top: var(--pom-page-border-width);
  right: var(--pom-page-border-width);
  bottom: var(--pom-page-border-width);
  left: var(--pom-page-border-width);
  border-radius: var(--pom-page-border-radius);
  outline: 2px solid rgba(0, 0, 0, 0.7);
  pointer-events: none;
}

Hacer que la página flote sobre el marco

Usa una sombra exterior sobre la misma superficie fija para que la sombra caiga dentro del borde de la página. Esta receta puede sustituir la regla de borde interior anterior, o su box-shadow puede añadirse a esa regla cuando se requieran ambos efectos:

body.web-has-page-border::before {
  content: "";
  position: fixed;
  z-index: 2001;
  top: var(--pom-page-border-width);
  right: var(--pom-page-border-width);
  bottom: var(--pom-page-border-width);
  left: var(--pom-page-border-width);
  border-radius: var(--pom-page-border-radius);
  box-shadow:
    0 0 8px rgba(0, 0, 0, 0.25),
    0 0 28px rgba(0, 0, 0, 0.2);
  pointer-events: none;
}

Usar colores de degradado diferentes

El marco generado comienza con el mismo color de paleta en ambos extremos, lo que conserva la apariencia sólida estándar. Anula las dos paradas SVG para introducir un degradado:

.web-page-border .web-page-border-gradient-start {
  stop-color: #ff006e;
  stop-opacity: 1;
}

.web-page-border .web-page-border-gradient-end {
  stop-color: #3a86ff;
  stop-opacity: 0.65;
}

Hacer el degradado diagonal

La primera transformación va desde la esquina superior izquierda hasta la esquina inferior derecha:

#pom-page-border-gradient {
  transform: matrix(1, 0, 1, 1, 0, 0);
  transform-origin: 0 0;
}

Usa la siguiente transformación para la dirección opuesta:

#pom-page-border-gradient {
  transform: matrix(1, 0, -1, 1, 1, 0);
  transform-origin: 0 0;
}

Las coordenadas de degradado SVG como x1, y1, x2 y y2 no son atributos de presentación y, por tanto, no se pueden anular directamente mediante CSS. La propiedad transform de SVG proporciona la orientación controlada por CSS que se usa en estos ejemplos. Consulta la especificación del servidor de pintura de SVG 2.

El contorno exterior permanece rectangular, mientras que las recetas de borde interior y sombra de página siguen el radio configurado. Si un JavaScript personalizado sustituye la abertura de la máscara por una onda u otra ruta irregular, se requieren capas SVG adicionales cuando cada contorno debe seguir exactamente ese contorno modificado.

Botones

Buttons contiene un estilo predeterminado más estilos adicionales repetibles. Cada estilo puede definir colores normal y hover, fondos sólidos o en degradado, anchuras de borde, estilo de borde, radio, sombra, fuente, peso, transformación de texto, altura de línea, interletrado y efectos hover compatibles.

Los estilos adicionales usan un slug duradero y se pueden seleccionar en los controles compatibles del tema, de Page Builder y de los formularios.

Marca, iconos y componentes

Brand proporciona logotipos compartidos, ajustes de identidad, iconos predeterminados de la interfaz y perfiles sociales. Icons añade bibliotecas SVG personalizadas. Components cubre actualmente el alternador opcional de contenido Inner Row y los colores para mensajes de éxito, aviso estándar y error.

Validar el sistema completo

1. Guarda una subsección cada vez.
2. Revísala en Theme preview.
3. Abre páginas públicas representativas sin haber iniciado sesión.
4. Comprueba los estados hover y de foco por teclado de los elementos interactivos.
5. Prueba contenido largo y cada rango responsive que use el diseño.
6. Inspecciona las anulaciones locales antes de volver a cambiar el ajuste global.