/* Kirava · comunidad, invitaciones, páginas de cuenta y el aviso de portada. * * ESTA HOJA SE ESCRIBE CONTRA EL MARCADO QUE HAY, NO AL REVÉS. * --------------------------------------------------------------------------- * Las plantillas y este fichero se escribieron por separado y acabaron con dos * juegos de nombres distintos para las mismas cosas: el CSS existía y no se * aplicaba a nada. Aquí manda el HTML. Si alguna regla de abajo no encuentra su * clase en templates/community.php, templates/invite.php o las páginas de * cuenta, sobra — no se «arregla» tocando la plantilla. * * LO QUE NO SE REPITE * --------------------------------------------------------------------------- * La tarjeta de persona (pcard, pc-id, pc-name, pc-handle, pc-bio, pc-stats) y * la caja de vault (vcard y su interior) ya están en content.css, y Comunidad * las reutiliza tal cual. Aquí solo van los AJUSTES que hacen falta porque en * esta página el marcado cambia de forma: la tarjeta pasó de a
. * * MODO OSCURO: tokens.css no tiene `prefers-color-scheme` —declara * `color-scheme: light` y punto—, así que aquí tampoco hay. Poner un bloque * oscuro solo en esta hoja dejaría estas cuatro páginas en negro y las otras * treinta en claro, que es peor que no tenerlo. Todo va con las variables de * tokens.css: el día que allí se añada el tema oscuro, esto se pinta solo. */ @layer components { /* --- El cuarto círculo de la barra ---------------------------------------- Comunidad. Solo el COLOR: el tamaño, el redondeo, el borde y la transición salen de `.top-circle`, en topbar.css, que es la geometría que comparten los cuatro controles de la barra. La clase la pone templates/partials/topbar.php —`top-circle circle-link`—, así que no se toca aunque no aparezca en ninguna de las plantillas de esta hoja: el enlace vive en la barra, que sale en todas las páginas. Que esté aquí y no en topbar.css tiene una consecuencia buena: si algún día esta hoja se cargara solo en /community, el círculo se seguiría viendo bien en todas las páginas y lo único que se perdería sería el resalte de «estás aquí» — que solo aparece justamente en /community. */ .circle-link:hover { color: var(--ink); } .circle-link.is-on { border-color: var(--primary); background: var(--primary-wash); color: var(--primary-ink); } /* --- El aviso de la portada ----------------------------------------------- A ancho completo, debajo de la barra, y con los cuatro colores de la marca. NO USA `--brand-gradient`. Ese degradado está calibrado para un botón estrecho —naranja plano hasta el 18 %, amarillo desde el 84 %, inclinado 96° para que no salga recto— y el propio tokens.css avisa de que estirado a lo ancho parece una barra de progreso. Aquí los cuatro colores entran de otras dos maneras: un lavado del 9 % de fondo, que casi no se ve, y un filo de 3 px arriba donde sí van a plena saturación. Y no puede chillar más que eso: debajo hay doscientas cartas, que es a lo que se viene. Un aviso que compite con ellas es un aviso que estorba. */ .home-banner { position: relative; width: 100%; border-bottom: 1px solid var(--line-soft); /* Reserva para quien no tenga `color-mix`: liso y a otra cosa. */ background: var(--surface-2); background: linear-gradient(100deg, color-mix(in oklab, var(--brand-orange) 9%, var(--surface)) 0%, color-mix(in oklab, var(--brand-green) 9%, var(--surface)) 36%, color-mix(in oklab, var(--brand-blue) 9%, var(--surface)) 68%, color-mix(in oklab, var(--brand-yellow) 11%, var(--surface)) 100%); } /* El filo. Va en oklab por lo mismo que el botón principal: mezclando naranja y verde en sRGB se pasa por el marrón y la banda sale con una mancha turbia en medio. La primera declaración es la reserva de siempre. */ .home-banner::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--brand-orange), var(--brand-green), var(--brand-blue), var(--brand-yellow)); background: linear-gradient(90deg in oklab, var(--brand-orange), var(--brand-green), var(--brand-blue), var(--brand-yellow)); } /* La banda es de ancho completo pero el contenido no: se alinea con el de la página, que es lo que hace `main` con --wrap. */ .hb-in { position: relative; max-width: var(--wrap); margin-inline: auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-6); padding: var(--sp-5); /* Hueco reservado para el aspa: si no, el título se le mete debajo. */ padding-inline-end: calc(var(--sp-5) + 44px); } .hb-text { flex: 1 1 20rem; min-width: 0; } .hb-title { font-size: clamp(1.05rem, 2.6vw, 1.3rem); line-height: 1.25; letter-spacing: -.02em; } .hb-lead { margin-top: var(--sp-1); max-width: 58ch; font-size: .92rem; color: var(--ink-2); } .hb-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-4); } .hb-alt { font-size: .88rem; font-weight: 600; color: var(--primary-ink); text-decoration: underline; text-underline-offset: 3px; } .hb-alt:hover { color: var(--ink); } /* 44 px de lado aunque el aspa mida 16: un botón de cerrar que pide puntería se pulsa tres veces o ninguna, y en un móvil siempre es lo segundo. */ .hb-close { position: absolute; top: var(--sp-2); inset-inline-end: var(--sp-2); width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: var(--ink-3); transition: background var(--dur-fast), color var(--dur-fast); } .hb-close:hover { background: var(--surface-3); color: var(--ink); } /* --- Comunidad: la frase bajo el buscador --------------------------------- Sube pegada a la caja de búsqueda —`.people-search` deja --sp-5 debajo y de ahí se le quitan --sp-4— porque explica ESA caja: separada, se lee como una advertencia suelta de la página. */ .cm-hint { margin-top: calc(var(--sp-4) * -1); margin-bottom: var(--sp-5); max-width: 60ch; font-size: .82rem; color: var(--ink-3); } /* --- Comunidad: las pestañas ---------------------------------------------- CUIDADO CON `is-on`. En el buscador esa clase significa «filtro puesto» —`.langpill.is-on`, `.menu-item.is-on`—. Aquí significa otra cosa: «esta es la pestaña en la que estás». Se deja el mismo nombre a sabiendas, porque `is-on` ya es el nombre de «encendido» en todo el proyecto y tener dos convenios sería peor que tener uno ambiguo. Lo que no se puede hacer nunca es escribir una regla para `is-on` a secas: todas van con su clase delante. Son enlaces, no botones, así que hay que darles el aspecto de pestaña a mano: sin esto son tres palabras seguidas en una línea. */ .cm-tabs { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); margin-bottom: var(--sp-5); border-bottom: 1px solid var(--line); } .cm-tab { padding: var(--sp-2) var(--sp-1) var(--sp-3); /* Baja 1 px para que su subrayado tape la línea del grupo y no quede doble. */ margin-bottom: -1px; border-bottom: 2px solid transparent; font-size: .92rem; font-weight: 600; color: var(--ink-2); white-space: nowrap; transition: color var(--dur-fast), border-color var(--dur-fast); } .cm-tab:hover { color: var(--ink); border-bottom-color: var(--line); } .cm-tab.is-on { color: var(--primary-ink); border-bottom-color: var(--primary); } /* --- Comunidad: el orden -------------------------------------------------- Mismo aspecto que las pastillas de idioma de una carta (`.lang-tab`, en content.css): son la misma clase de control —elegir uno de tres— y en el mismo sitio se ven dos formas distintas de lo mismo es ruido. */ .cm-sort { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-4); } .cm-sort-label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); } .cm-sort-link { padding: var(--sp-1) var(--sp-3); border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: .8rem; color: var(--ink-2); white-space: nowrap; transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast); } .cm-sort-link:hover { border-color: var(--ink-3); color: var(--ink); } .cm-sort-link.is-on { border-color: var(--primary); background: var(--primary-wash); color: var(--primary-ink); font-weight: 650; } /* --- Comunidad: ajustes de la tarjeta de persona -------------------------- La tarjeta entera vive en content.css y se comparte con /people y con la lista de conexiones. Aquí NO se vuelve a escribir: solo se corrige lo que cambia porque en esta página el marcado es distinto. EL SELECTOR LLEVA LA ETIQUETA A PROPÓSITO. En /people y en conexiones la tarjeta es ``; en Comunidad es `
`, porque dentro hay un formulario y un botón dentro de un enlace no es HTML válido. Esa etiqueta es lo único que las distingue —la clase es la misma y la rejilla también—, así que colgar de `article` deja /people intacto sin inventar clases nuevas en el marcado. */ /* La tarjeta ya no navega: solo navega su nombre. El levantarse al pasar por encima se escribió cuando la tarjeta ENTERA era el enlace; ahora promete un clic que no existe y manda al ratón a un sitio donde no pasa nada. */ article.pcard:hover { transform: none; box-shadow: var(--shadow-1); } /* Las filas reparten el hueco sobrante entre ellas en vez de estirarse. Con el estirado de serie, en una tarjeta sin biografía el botón de seguir se queda flotando a media altura; así cae abajo del todo en todas las de la fila. */ article.pcard { align-content: space-between; } /* La biografía pasó de a

y los contadores de a

. El reset ya deja los

a cero, pero la tarjeta depende de ello y eso no se ve desde content.css: se fija aquí y se acabó la sorpresa. */ article.pcard .pc-bio, article.pcard .pc-stats { margin: 0; } /* El nombre pasó de a y es el único enlace de la tarjeta. El reset ya le quita color y subrayado a todo ; se repite porque cualquier regla de componente para pisaría al reset y este enlace no puede cambiar de color por sorpresa. Lo que sí hace falta es el subrayado al pasar por encima: sin él nada dice que se pueda pulsar. */ a.pc-name { color: inherit; text-decoration: none; } a.pc-name:hover { color: var(--primary-ink); text-decoration: underline; text-underline-offset: 2px; } /* El pie de la tarjeta: el formulario de seguir, o el aviso de que falta confirmar el correo. Ocupa las DOS columnas: la tarjeta es una rejilla de `auto minmax(0, 1fr)` y sin esto cae en la primera, que mide lo que el disco del avatar, y el botón sale espachurrado. */ .pc-act { grid-column: 1 / -1; min-width: 0; margin: 0; padding-top: var(--sp-1); } /* El sitio del botón no se esconde cuando no se puede seguir: se dice por qué no está. Apagado y pequeño, que es un aviso, no una acción. */ .cm-verify { font-size: .76rem; line-height: 1.45; color: var(--ink-3); } /* --- Seguir --------------------------------------------------------------- El marcado ya trae `btn btn-quiet`, así que la forma de botón viene dada y aquí solo se cambia el color y el redondeo. Los dos estados tienen que verse distintos de un vistazo, porque el botón es a la vez el estado y la acción. Sin seguir: relleno, es una invitación. Siguiendo (`is-on`): apagado, ya no hay nada que ofrecer. Y al pasar por encima del apagado se pone en rojo, que es lo que va a pasar si se pulsa. Un «Dejar de seguir» que parece un botón normal se pulsa sin querer creyendo que sigue siendo «Seguir». Los tres colores de ese estado son los mismos literales de `.btn-danger` en content.css: tokens.css no tiene un color de peligro, y esto imita a ese botón a propósito. */ .cm-follow { width: 100%; border-radius: 999px; padding-inline: var(--sp-4); border-color: var(--primary); background: var(--primary-wash); color: var(--primary-ink); font-size: .84rem; font-weight: 650; white-space: nowrap; transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast); } .cm-follow:hover { border-color: var(--primary-ink); color: var(--primary-ink); } .cm-follow.is-on { border-color: var(--line); background: var(--surface); color: var(--ink-2); font-weight: 600; } .cm-follow.is-on:hover { border-color: #d9534f; background: #fdecec; color: #b8322e; } /* --- Comunidad: colecciones de otros -------------------------------------- La caja del vault se reutiliza entera desde content.css y el autor y el corazón van FUERA, como hermanos: la caja es un y meterle otro enlace o un formulario dentro sería marcado inválido. La envoltura es hija directa de `.vault-grid`, así que hereda la altura de la fila. Con `1fr auto` la caja se estira y el pie se queda abajo, de modo que todos los pies de una fila caen a la misma altura. El `min-width: 0` es obligatorio: la caja de dentro lo tiene, pero si la envoltura no lo lleva un nombre largo ensancha la columna y a 360 px la página se va de lado. */ .vcard-box { display: grid; grid-template-rows: 1fr auto; gap: var(--sp-2); min-width: 0; } .vc-foot { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; /* Un pelo de sangría para que no quede pegado al filo de la caja de arriba. */ padding-inline: var(--sp-1); } .vc-author { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-num); font-size: .74rem; color: var(--ink-3); } .vc-author:hover { color: var(--primary-ink); text-decoration: underline; text-underline-offset: 2px; } /* El formulario no pinta nada: solo envuelve al botón para poder mandar el POST. Que no crezca ni se lleve el hueco del nombre. */ .vc-like { flex: none; margin: 0; } /* --- Me gusta ------------------------------------------------------------- EL CORAZÓN ES UN CARÁCTER, no un SVG: `♥` viene siempre relleno y no hay versión hueca que valga en todas las fuentes. Así que el estado no se cuenta con el relleno sino con el COLOR y el fondo, que además es lo que se ve de lejos. El `aria-pressed` de la plantilla es quien lo dice de verdad. Y va en el naranja de la marca, no en un rojo inventado: tokens.css no tiene un color de «me gusta», y meter uno a pelo aquí crearía un color que no existe en ningún otro sitio de la web. Es un