/* =========================================================================== EL TEMA =========================================================================== Hasta aquí, una marca era UN COLOR y todo daba por hecho que encima iba texto blanco. Esta hoja conecta las piezas del tema (ver src/brand.js) con los sitios que las usan, y de paso tapa las FUGAS: los azules escritos a mano que no seguían a la marca. El servidor incrusta las variables en :root antes de que corra el JavaScript. Lo que no sea `--brand-blue` / `--primary` / `--secondary` es nombre nuevo: --fondo --tinta-fondo --papel --superficie --tinta --acento --sombra --herraje ------------------------------------------------------------------------- ESTA HOJA NO CAMBIA CÓMO SE VE LA APP ------------------------------------------------------------------------- Con los temas de hoy (que no traen `tema`, así que todo se deduce de `color`), cada regla de aquí pinta EXACTAMENTE el mismo valor que estaba escrito a mano antes. Es un cambio de fontanería, no de aspecto: hay una prueba que compara pixel a pixel contra el commit anterior. Lo que se gana es que un tema claro —fondo crema, letra oscura, herraje de latón— pase a ser cuestión de rellenar `tema` en src/brand.js. ======================================================================== */ /* --------------------------------------------------------------------------- Los dos herrajes --------------------------------------------------------------------------- No son colores sino degradados de ocho paradas, así que viven aquí enteros y src/brand.js solo escoge cuál con `--herraje: var(--herraje-plata)`. La plata sale de muestrear el PNG original (ver marco.css). El latón es el mismo cilindro con la paleta corrida a oro viejo. */ :root { --herraje-plata: linear-gradient(to bottom, rgba(255, 255, 255, 0) 68%, rgba(150, 152, 190, 0.26) 80%, rgba(118, 122, 164, 0.56) 91%, rgba(150, 158, 205, 0.28) 100%), linear-gradient(to right, #C9C7D2 0%, #FDFDFD 5%, #FCFCFD 42%, #F3F2FB 52%, #E3E6F9 64%, #D3D8EE 76%, #DCE2F8 93%, #A9ABC2 100%); --herraje-laton: linear-gradient(to bottom, rgba(255, 255, 255, 0) 66%, rgba(90, 62, 20, 0.34) 82%, rgba(60, 40, 10, 0.62) 93%, rgba(190, 150, 80, 0.35) 100%), linear-gradient(to right, #6E5320 0%, #E8C878 8%, #FBEFC9 26%, #E3BE6E 52%, #B58B3C 74%, #D9B064 90%, #6B4F1E 100%); } /* --------------------------------------------------------------------------- Fondo y superficie: hasta hoy eran el mismo color, y por eso styles.css pinta el body con --brand-blue. Son cosas distintas: el fondo es la pantalla, la superficie es la página de dentro del calendario. En un tema claro el fondo es crema y la superficie verde salvia. ------------------------------------------------------------------------ */ body { background: var(--fondo); } /* El agujero de la argolla deja ver el FONDO a través del papel, no la superficie. Con los temas de hoy da igual porque son el mismo color. */ .argolla::before { background: var(--fondo); } /* El papel del calendario. Antes era #FAFAFC escrito en tres sitios. */ .calendar-top::before, .calendar-bottom::before { background: var(--papel); } .calendar-mid::before { background: linear-gradient(to right, var(--papel) 0 4.44%, var(--superficie) 4.44% 95.2%, var(--papel) 95.2% 100%); } /* El herraje. */ .argolla::after { background: var(--herraje); } /* --------------------------------------------------------------------------- Tinta ------------------------------------------------------------------------ */ /* Encima del FONDO va la cabecera, y nada más. Conserva su opacidad de siempre (la leyenda iba al 92%). */ .hero h1 { color: rgb(var(--tinta-fondo)); } .hero .subtitle { color: rgb(var(--tinta-fondo) / 0.92); opacity: 1; } /* Encima de la SUPERFICIE va todo lo de dentro del calendario. En las hojas nuevas (handle.css, negocio.css, mi.css) ya está puesto directamente con `rgb(var(--tinta) / …)`, respetando la opacidad de cada uno. Aquí solo van los que viven en las hojas COPIADAS de Días que Cuentan, que no se tocan: son los que nuestras páginas usan de verdad. */ .calendar-dialog .step-prompt, .calendar-dialog .cal-month, .calendar-dialog .cal-selected { color: rgb(var(--tinta)); } .welcome-option { color: rgb(var(--tinta)); } .welcome-option i { opacity: 0.9; } /* --------------------------------------------------------------------------- Las fugas --------------------------------------------------------------------------- Azules que estaban escritos a mano y no seguían a la marca. Con los temas de hoy pintan el mismo color de siempre; con un tema claro, dejan de cantar. ------------------------------------------------------------------------ */ /* FUGA 1 — El logo. Era un cuadro blanco con las tijeras en --brand-blue, así que en un tema crema se quedaba blanco nuclear con tijeras azules. `--logo` y `--papel` son dos blancos DISTINTOS: el logo es blanco puro y el papel del calendario es #FAFAFC. Se intentó usar `--papel` para los dos y la comparación pixel a pixel lo cazó. ------------------------------------------------------------------------- EL DIBUJO DE CADA MARCA ------------------------------------------------------------------------- Hasta aquí las tres marcas se anunciaban con las MISMAS tijeras de peluquería —un SVG provisional—, así que Barbas y Garras salían con el logo de Flecos. Ahora cada una trae el suyo: un fleco, una barba, unas uñas. El PNG no se pinta: se usa de MÁSCARA sobre `--acento`, igual que la palomita de más abajo. El arte es trazo negro sobre transparente, y negro fijo se perdería en un tema oscuro (el cuadro del logo es `--logo`, que en Barbas es casi negro). De plantilla, el trazo lo pone el tema. El tamaño no es a ojo. El arte viene de la capa de dibujo del juego de iconos, donde el trazo ocupa el 43% del ancho del cuadro y el resto es el margen que pide Android (medido, los tres iguales). Un 158% de máscara lo deja en el ~68% del logo: un pelo más que las tijeras que había antes (55%), porque estas son de línea fina y a 86 px se veían tímidas. El ALTO sí cambia de una marca a otra, y es del dibujo: el de Garras es una mano tumbada, más ancha que alta. Sale igual de ancho que los otros dos y más bajo, que es lo correcto. */ .hero .logo { display: block; /* es un : sin esto ignora el tamaño */ position: relative; background: var(--logo); } .hero .logo::before { content: ""; position: absolute; inset: 0; background: var(--acento); /* El respaldo del `var()` no es un adorno. Sin él, un servidor que no incruste `--marca-icono` —uno viejo que se quedó corriendo, o una marca nueva a medio poner— deja la máscara inválida, y entonces esto NO se queda en blanco: pinta un CUADRO MACIZO del color del acento encima del logo. Pasó. Con un degradado transparente de respaldo, lo peor que puede salir es un cuadro vacío, que es un fallo que se entiende. */ -webkit-mask: var(--marca-icono, linear-gradient(transparent, transparent)) center / 158% no-repeat; mask: var(--marca-icono, linear-gradient(transparent, transparent)) center / 158% no-repeat; } /* FUGA 2 — Las sombras. Eran un azul marino fijo (rgba(6,26,82,…)); sobre crema se veían azuladas. OJO con las opacidades: cada sombra lleva la suya (0.60 y 0.35 en la cabecera, 0.26 en el calendario) y hay que respetarlas una por una. Por eso el token es la TERNA RGB y el alfa se pone aquí: si el token trajera el alfa dentro, las tres se aplanarían en una y el look cambiaría. */ .hero { filter: drop-shadow(0 6px 8px rgb(var(--sombra) / 0.60)) drop-shadow(0 22px 30px rgb(var(--sombra) / 0.35)); } .calendar-dialog { filter: drop-shadow(0 18px 32px rgb(var(--sombra) / 0.26)); } /* FUGA 3 — La sombra del botón principal. Salió al aplicar la maqueta de verdad: es un azul marino propio (0 35 130), distinto al de las demás sombras, y sobre un fondo cálido se veía frío. Cada capa conserva su opacidad, igual que con --sombra. */ .btn-primary { box-shadow: 0 18px 28px rgb(var(--sombra-accion) / 0.28), 0 8px 12px rgb(var(--sombra-accion) / 0.18), inset 0 1px 2px rgba(255, 255, 255, 0.55); } /* `--acento` es un hex, no una terna, así que aquí no sirve `rgb(… / .25)`: se mezcla con transparente, que da el mismo resultado. OJO: esto SÍ cambia algo. La sombra de pulsado estaba escrita con el azul de Flecos (rgba(47,107,255,.25)), así que en Barbas el botón daba un destello AZUL sobre verde. Ahora cada marca destella con el suyo. Es el único cambio visible de todo este paso, y solo dura lo que dura el dedo encima. */ .btn-primary:active { box-shadow: 0 6px 12px color-mix(in srgb, var(--acento) 25%, transparent); } /* FUGA 4 — El texto del hueco elegido, que se pintaba con --brand-blue (la superficie) sobre blanco. Va con el acento, que es lo que se lee sobre blanco. */ .hora-btn:active { color: var(--acento); } /* FUGA 5 — La palomita de la esquina. * * Era check.png: un disco AZUL con aro blanco, y ese azul no cambiaba nunca. * En la hoja de familias se veía clarísimo — una palomita azul celeste sobre * una página crema, negra o ciruela. Chillaba en las tres. * * Redibujada en CSS con el mismo método que el marco del calendario: se midió * el PNG (388x388, disco exterior de radio 180, disco de color de radio 133, * o sea un aro del 24% del radio) y se reconstruyó. * * .palomita el aro claro y el disco de color, en un radial-gradient * .palomita::after el gancho, dos bordes de una caja girada -45° * * ESTO SÍ CAMBIA CÓMO SE VE, y a propósito: en Flecos el azul pasa del * #1347FF horneado al de la marca, y en Barbas deja de ser azul. */ .calendar-dialog::after { content: none; } /* fuera el PNG */ .palomita { position: absolute; bottom: -16px; right: -14px; width: 28%; aspect-ratio: 1 / 1; z-index: 3; pointer-events: none; /* Contenedor propio: sin esto, el `cqw` del grosor del gancho se mediría contra el calendario entero y el trazo salía tres veces más gordo. */ container-type: inline-size; /* El aro, con su bisel: claro arriba-izquierda, sombreado abajo-derecha. Es un degradado recto y la máscara de abajo lo recorta en círculo. */ background: linear-gradient(148deg, #FDFDFE 0%, #F2F0F5 46%, #D6D4DD 100%); /* El disco exterior mide el 92.8% de la caja (180 de 194 en el PNG). */ -webkit-mask: radial-gradient(circle closest-side at 50% 50%, #000 0 92.8%, transparent 92.8%); mask: radial-gradient(circle closest-side at 50% 50%, #000 0 92.8%, transparent 92.8%); filter: drop-shadow(0 2px 7px rgb(var(--sombra) / 0.34)); } /* El disco de color. 133 de radio sobre 194 de media caja = 68.6% del ancho, o sea un margen del 15.7% por lado. */ .palomita::before { content: ""; position: absolute; inset: 15.7%; border-radius: 50%; background: var(--acento); /* Un pelo de sombra arriba: el aro proyecta sobre el disco hundido. */ box-shadow: inset 0 2cqw 3cqw rgb(0 0 0 / 0.18); } /* El gancho: una caja girada con solo dos bordes. Las medidas salen del PNG: brazo largo 173, brazo corto 88, grosor 34, sobre 388 de ancho. */ .palomita::after { content: ""; position: absolute; left: 50%; top: 45%; width: 42%; height: 21%; border-left: 9.5cqw solid #fff; border-bottom: 9.5cqw solid #fff; /* Las puntas del PNG son redondeadas. */ border-radius: 0 0 0 3cqw; transform: translate(-50%, -50%) rotate(-45deg); } /* FUGA 4 — El texto del hueco elegido, que se pintaba con --brand-blue (la superficie) sobre blanco. Va con el acento, que es lo que se lee sobre blanco. */ .hora-btn:active { color: var(--acento); } /* FUGA 5 — La palomita de la esquina. * * Era check.png: un disco AZUL con aro blanco, y ese azul no cambiaba nunca. * En la hoja de familias se veía clarísimo — una palomita azul celeste sobre * una página crema, negra o ciruela. Chillaba en las tres. * * Redibujada en CSS con el mismo método que el marco del calendario: se midió * el PNG (388x388, disco exterior de radio 180, disco de color de radio 133, * o sea un aro del 24% del radio) y se reconstruyó. * * .palomita el aro claro y el disco de color, en un radial-gradient * .palomita::after el gancho, dos bordes de una caja girada -45° * * ESTO SÍ CAMBIA CÓMO SE VE, y a propósito: en Flecos el azul pasa del * #1347FF horneado al de la marca, y en Barbas deja de ser azul. */ .calendar-dialog::after { content: none; } /* fuera el PNG */ .palomita { position: absolute; bottom: -16px; right: -14px; width: 28%; aspect-ratio: 1 / 1; z-index: 3; pointer-events: none; /* Contenedor propio: sin esto, el `cqw` del grosor del gancho se mediría contra el calendario entero y el trazo salía tres veces más gordo. */ container-type: inline-size; /* De dentro afuera: disco de color, aro claro, y nada. `closest-side` es lo que hace que el 100% sea el BORDE de la caja; por omisión es farthest-corner y el aro se derramaba por las esquinas. */ background: radial-gradient(circle closest-side at 50% 50%, var(--acento) 0 68.6%, #EDEBF0 68.6% 92.8%, transparent 92.8% 100%); filter: drop-shadow(0 2px 7px rgb(var(--sombra) / 0.34)); } /* El gancho: una caja girada con solo dos bordes. Las medidas salen del PNG: brazo largo 173, brazo corto 88, grosor 34, sobre 388 de ancho. */ .palomita::after { content: ""; position: absolute; left: 50%; top: 46%; width: 44.6%; height: 22.7%; border-left: 8.8cqw solid #fff; border-bottom: 8.8cqw solid #fff; border-radius: 2px; transform: translate(-50%, -50%) rotate(-45deg); }