/* Escriptorium — capa de marca sobre Penpot. * * Se sirve en /marca/escriptum.css (ver nginx-escriptum.conf) y se inyecta en el con * un sub_filter, sin tocar el bundle ni el index.html del contenedor. * * REGLA DE ORO: aquí solo va lo COSMÉTICO y lo que esconde enlaces a sitios de Penpot. * Nada que cambie el comportamiento del editor. Si algo necesita más que CSS, no va aquí: * va al plan, y probablemente signifique que hace falta un fork (y entonces no merece la pena). * * Frágil por naturaleza: los nombres de clase de Penpot pueden cambiar en cualquier versión. * Cuando eso pase, lo que se rompe es la marca, nunca la herramienta — el editor sigue * funcionando con su aspecto original. Ese es el trato. */ :root { /* Paleta 0.3 de DESIGN.md. La fuente de verdad sigue siendo ese documento. */ --escriptum-granate: #531313; --escriptum-pino: #1a3427; --escriptum-salvia: #bbc4b3; --escriptum-brasa: #a8562b; --escriptum-crema: #e9e7d8; } /* ── El logotipo ───────────────────────────────────────────────────────────── * Penpot no sirve el logo como fichero: lo compila dentro de un SVG que va * incrustado en el index.html, y lo pinta con . Sustituir el * fichero no sirve de nada. Lo que sí funciona sin tocar nada: tapar el símbolo y poner * nuestra imagen de fondo encima. */ /* Los dos selectores tienen que apuntar AL MISMO elemento, o se esconde el logo de Penpot y * no aparece el nuestro: un hueco en blanco, que es peor que no tocar nada. Penpot pinta * `` y NO le pone clase, así que `svg[class*=logo]` no * casaba con nada mientras que `use[href*=penpot-logo]` sí. `:has()` arregla el desajuste. */ /* `href` y `xlink:href`, los dos: Penpot compila el SVG y, según la versión, puede pintar * uno u otro. Con solo `href`, si el marcado real llevara `xlink:href` el selector no casaría * con NADA — y no habría síntoma: se queda el logo de Penpot, tan tranquilo. */ svg:has(use[href*='penpot-logo']) use, svg:has(use[*|href*='penpot-logo']) use { opacity: 0; } svg:has(use[href*='penpot-logo']), svg:has(use[*|href*='penpot-logo']) { /* EL MONOGRAMA, no el wordmark. El hueco del logo en Penpot es pequeño y **de qué * proporción es no está verificado**; el wordmark completo sale a ~5,5:1 y, con `contain` en * una caja casi cuadrada, se queda en una brizna de cinco píxeles de alto: ilegible, y peor * que no tocar nada. El monograma es 1:1 y aguanta cualquier hueco. * * Si al aplicarlo se ve que el hueco ES ancho, cambia esta línea a * `escriptum-wordmark.svg` — el fichero está al lado y dice «ESCRIPTORIVM» entero. */ background-image: url('/marca/escriptum-logo.svg'); background-repeat: no-repeat; background-position: center; background-size: contain; } /* ── Enlaces a la casa de Penpot ───────────────────────────────────────────── * Centro de ayuda, comunidad, PenpotHub, el canal de YouTube y los términos son literales * en el código: sin fork no se pueden reescribir, pero sí esconder. Se esconden porque * mandan a soporte de un producto que, para el equipo, no existe. */ a[href*='penpot.app'], a[href*='community.penpot.app'], a[href*='help.penpot.app'], a[href*='youtube.com/c/Penpot'] { display: none !important; } /* ── Acentos de marca ──────────────────────────────────────────────────────── * Deliberadamente pocos. Repintar un editor entero por CSS es una promesa que no se puede * mantener entre versiones: se tocan el botón principal y poco más. */ /* `button[class*=btn-primary]` es real (Penpot usa módulos CSS, así que la clase generada * contiene el nombre). El selector de la pantalla de login que había aquí * (`.main_ui_auth__auth-form`) no existe en 2.17: se ha quitado. */ button[class*='btn-primary'] { background-color: var(--escriptum-granate) !important; border-color: var(--escriptum-granate) !important; }