Base CSS

Las variables solas no hacen que una página sea accesible ni se comporte bien —algo tiene que usarlas. La capa de CSS base es un pequeño conjunto fijo de reglas que hace eso: un anillo de foco de teclado que nunca se oculta por accidente, enlaces de ancla que se detienen bajo una cabecera fija, encabezados que siguen sus propias variables, listas que se comportan, y un par de arreglos para cosas que el propio builder hace mal.

Siempre activo

• Foco de teclado. Un anillo de foco en el color, el grosor y la separación que fijes en el panel (More → Base CSS), en cualquier elemento que tenga el foco del teclado. Está escrito para que nunca se pueda quitar en silencio —ni siquiera con un outline: none perdido en otro sitio, la regresión de accesibilidad más común de la web.
• Enlaces de ancla. Desplazarse a un ancla (#section) se detiene con el hueco suficiente bajo tu cabecera fija, según el espacio que fijes en el panel.
• Encabezados y texto. Cada nivel de encabezado sigue su propio tamaño, interlineado y peso; el texto normal sigue su tamaño base.
• [hidden] oculta de verdad. Los builders suelen darle a un elemento display: flex, lo que cancela en silencio el atributo nativo hidden a menos que algo reafirme display: none para él —esta capa lo hace.
• Las imágenes y otros medios nunca se salen de su contenedor; los campos de formulario heredan la fuente del sitio en vez de la del navegador por defecto.

Módulos opcionales

Cada uno es un interruptor en More → Base CSS, encendido o apagado por sitio:

Módulo	Qué hace	Por defecto
Underlined links	Los enlaces dentro de un bloque de texto, sin clase, llevan un subrayado en tu color primario	Encendido
Clipped overflow	Las secciones nunca hacen que la página se desplace hacia los lados (overflow-x: clip, que mantiene funcionando position: sticky —a diferencia de hidden)	Encendido
Styled lists	Una lista sin clase lleva una marca de verificación en tu color primario en vez de una viñeta	Apagado
Branded selection	El texto seleccionado usa tu color primario	Apagado

A diferencia de un color o un tamaño, estos módulos no forman parte de la vista previa en vivo del panel —el panel solo previsualiza variables. Activar uno se nota después de aplicar, en una recarga real del front; la pestaña que ya tenías abierta antes de aplicar no se actualiza sola.

Dónde se escribe

En Bricks, en su propio bloque del CSS personalizado del sitio, entre los marcadores /* fancy-framework:start */ y /* fancy-framework:end */ —todo lo que quede fuera de ese bloque es tuyo, y el plugin nunca lo toca. En Etch, en su propia hoja de estilos global.

Toda regla se escribe con especificidad cero (:where()), así que tu propio CSS siempre le gana, con tres excepciones deliberadas: [hidden] siempre oculta (no hay nada en torno a lo cual diseñar); en un sitio Bricks que haya apagado su propia capa de cascada, las reglas de texto y encabezados usan el selector del elemento sin más, para que sigan ganándole a los estilos a nivel de elemento del propio Bricks; y branded selection, porque ::selection es un pseudo-elemento y :where() no puede envolver uno —se queda con la especificidad más baja que el CSS le permite, pero tu propia regla ::selection, si tienes una, sigue ganando.

El CSS antiguo de la web

Si solías pegar a mano el propio CSS base de fancyframework.com en el CSS personalizado de Bricks o de Etch, aplicar lo quita —pero solo si sigue ahí exactamente como te lo dio el generador. Si lo cambiaste, el plugin lo deja en paz y la revisión avisa de que sigue ahí y puede que anule al nuevo.