/* * PWA del carnet — hoja de estilo. Consume los tokens compartidos de * /shared/css/tokens.css; aquí no se define ni un color suelto. * Mobile-first: la pantalla del carnet se enseña a un comerciante con el * móvil en la mano, así que el QR manda y todo lo demás cede espacio. */ /* La base —el reset, la tipografía y el fondo— vive en /shared/css/portal.css, que cargan las tres páginas. Aquí solo lo que es propio del carnet. */ /* * El recorte de la pantalla —el relleno de `env(safe-area-inset-*)` en el * cuerpo— vive en shared/css/tokens.css, que lo cargan TODAS las páginas. * Estuvo aquí, o sea solo en la shell, y la zona de gestión se dibujaba por * debajo del reloj. */ .vista { display: none; } .vista--activa { display: block; } /* ── Aviso de conectividad ───────────────────────────────────────────── */ /* * ── LES COBERTES: L'ARRENCADA I LA FALTA DE XARXA ─────────────────────── * * Substitueixen `.avis`, la tira vermella del peu que deia «Cal connexió per * mostrar el carnet». Idea de David: una capa al mig amb la marca, que a * l'arrencada dona la benvinguda i sense xarxa explica què s'espera. * * z-index 40: per damunt de tot el que hi ha (contingut 10 · full 19 · barra * 20 · modal 30). És l'única cosa del projecte que ha de tapar un modal — si * no hi ha xarxa, tampoc funciona el que hi hagi obert a sobre. */ .coberta { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--afa-espai-5); padding: var(--afa-espai-6); } .coberta__marca { width: 15rem; max-width: 70%; height: auto; display: block; } /* * L'SPINNER DE L'ARRENCADA — i el retard és tota la decisió. * * Dues animacions sobre el mateix element: una que gira per sempre i una que * el fa aparèixer als 400 ms amb `both`, o sigui que abans d'això està a * opacitat 0. Sense JavaScript, perquè una coberta que depèn d'un script és * una app que es queda en blanc el dia que el script falli — que és la mateixa * raó que ja està escrita a la shell per a la coberta sencera. * * Amb moviment reduït la regla global de `tokens.css` apaga les dues: queda * un anell quiet i visible de seguida, que és el que toca. */ .coberta__spin { width: 2.125rem; height: 2.125rem; border-radius: 50%; border: 3px solid var(--afa-calid-100); border-top-color: var(--afa-accent); animation: coberta-gira .85s linear infinite, coberta-apareix .3s ease .4s both; } @keyframes coberta-gira { to { transform: rotate(360deg); } } @keyframes coberta-apareix { from { opacity: 0; } to { opacity: 1; } } .coberta__text { margin: 0; font-size: var(--afa-mida-s); font-weight: var(--afa-pes-fort); color: var(--afa-text-suau); text-align: center; } /* * L'ARRENCADA. Opaca i NOMÉS dins de la PWA: en una pestanya del navegador, * una benvinguda a pantalla completa cada vegada que es carrega la pàgina * seria una nosa. `display-mode: standalone` és la mateixa senyal que llegeix * `AFA.instalada()`, però aquí en CSS, que és el que permet que marxi sense * que cap script hi participi. * * El fons és EXACTAMENT el `background_color` del manifest: el sistema pinta * la seva pantalla d'arrencada amb aquest color i la icona a sobre, i si els * dos no coincidissin es veuria el salt d'una a l'altra. */ .coberta--arrenca { display: none; background: #FBF8F3; } /* * ── QUANT DURA, I PER QUÈ AQUEST NÚMERO ───────────────────────────────── * * 1,5 s: 0,9 quieta i 0,6 de fosa. Va començar a 0,7 i David va dir que «ni * se ve», i tenia raó per un motiu que no es veu des d'aquí: **a l'iPhone no * som la primera pantalla**. El sistema en pinta una de seva mentre carrega * la WebView —la icona damunt del `background_color`— i la nostra animació * arrenca quan la pàgina es pinta, que pot ser mentre aquella encara tapa. * O sigui que dels 0,7 se'n veien els últims. * * EL QUE COSTA, dit clar: és temps abans del carnet. Ara bé, el carnet no * està llest abans —el token es demana mentre això es veu— i la coberta * només surt en un arrencada EN FRED: si iOS només tenia l'app suspesa, * restaura la pàgina sense recarregar i aquí no passa res. Al mostrador, que * és on el temps costa de veritat, l'app sol estar viva. * * És un sol número. Si es fa llarg, es baixa aquí i enlloc més. */ @media (display-mode: standalone) { .coberta--arrenca { display: flex; animation: afa-arrenca 1.5s ease-in forwards; } } /* * `visibility` a més d'`opacity`, i `forwards` perquè l'últim fotograma es * quedi: amb `opacity: 0` tot sol, la capa seguiria per damunt de la pantalla * interceptant els tocs. I amb `prefers-reduced-motion` la durada baixa a * 0,01 ms per la regla global de `tokens.css`, o sigui que l'animació acaba * igualment i la capa desapareix — que és el comportament correcte, no un * efecte secundari. */ @keyframes afa-arrenca { 0%, 60% { opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; } } /* * LA FALTA DE XARXA. Translúcida a posta: es veu que l'app segueix sent * l'app i que això és un estat, no una pantalla d'error. I no marxa sola — * la treu `ambConnexio()` quan una petició de veritat torna a funcionar. */ .coberta--xarxa { /* * El velo vive en `tokens.css` y no escrito aquí, y en `rgba` y no con * `color-mix()`: es la regla que ya está anotada allí — `color-mix` pide * navegadores recientes y, si no se entiende, la declaración se cae ENTERA * y la capa se queda transparente. Aquí eso sería el carnet visible detrás * de un texto que dice que no hay conexión. */ background: var(--afa-vel-clar); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } /* ── Entrada ─────────────────────────────────────────────────────────── */ .login { max-width: 24rem; margin: 0 auto; padding: var(--afa-espai-7) var(--afa-espai-5); text-align: center; } /* * ── LA MARCA DE L'ENTRADA ──────────────────────────────────────────────── * * EL BANNER, NO LA ICONA. Aquí hi havia la icona quadrada de l'app amb el nom * escrit a sota, i eren dues coses que deien el mateix: el banner ja porta * «AFA EL CIM» i l'eslògan dins del dibuix. Decisió de David. * * I abans d'això hi va haver una icona que es veia com una taca, que és el que * va portar fins aquí: el crema de la targeta (#EAE3D7) contra el fons de * l'app (#FBF6EE) dóna **1,19:1** —o sigui res— així que l'única cosa que la * dibuixava era la `box-shadow` que li posàvem al CSS, i a sobre amb un * `border-radius` propi damunt d'un PNG que ja porta les seves cantonades. El * contorn que es veia no era el de la icona: era el del rectangle del CSS. * * Amb el banner el problema desapareix sol: no té fons. Val la pena deixar-ho * escrit perquè la temptació de tornar-hi a posar una caixa vindrà de l'aspecte * «buit» que fa una marca sense contorn, i aquí el buit és la solució. * * L'AMPLADA MANA I L'ALÇADA SURT DE LA PROPORCIÓ (`height: auto`): el fitxer * és 768x176 i el dia que canviï de mides no s'ha de deformar. 15rem és més * gran que els 14,25 de la capçalera —aquí és el protagonista, allà és una * xapa— i amb `max-width: 100%` encongeix en un mòbil de 320 en comptes de * desbordar. */ .login__marca { margin: 0 0 var(--afa-espai-5); } .login__banner { /* * 22,5rem = els 15 d'abans + un 50%, que és el que va demanar David: «se ve * muy pequeño para una landing». Aquí la marca no és una xapa de capçalera, * és el reclam de la pàgina. * * ON TOPA, perquè la xifra no s'aconsegueix sencera a tot arreu i val més * saber-ho: `max-width: 100%` la reté a l'amplada de la columna. En un mòbil * de 375 la columna en dóna 327 (375 menys el coixí de `.login`) i en * escriptori 352 (la primera columna de la graella és `minmax(0, 22rem)`). * O sigui que creix un 47% a l'escriptori i un 36% al mòbil, i el que la * frena no és aquest número sinó el coixí. Es podria guanyar la resta * traient-li el coixí al logotip amb marges negatius, i llavors la marca * tocaria els caires de la pantalla: no és millor, és una altra cosa. */ width: 22.5rem; max-width: 100%; height: auto; display: block; margin: 0 auto; } /* * ── LA TRIA DE L'ENTRADA ──────────────────────────────────────────────── * * Dos botons i una frase. No porta caixa ni vora: el que hi ha a la pantalla * és el logotip i una decisió, i qualsevol contorn hi afegeix una peça que no * separa res del que té a sobre —el fons ja és el de la pàgina. * * El buit de sota és el que hi havia entre el títol i el formulari, així que * la pàgina no salta quan es passa d'una cosa a l'altra. */ .tria { display: flex; flex-direction: column; gap: var(--afa-espai-3); margin: 0 0 var(--afa-espai-6); } .tria__ajuda { margin: 0 0 var(--afa-espai-2); font-size: var(--afa-mida-s); color: var(--afa-text-suau); line-height: 1.5; } .login__titol { font-size: var(--afa-mida-m); font-weight: var(--afa-pes-normal); color: var(--afa-text-suau); margin: 0 0 var(--afa-espai-6); } .login__oblidada { margin: var(--afa-espai-4) 0 0; text-align: center; font-size: var(--afa-mida-s); } /* Eran --afa-muted y --afa-esp-m, que NO existen en tokens.css. Una variable inexistente no da error: invalida la declaración al calcular el valor y la propiedad se hereda, así que el enlace salía del color del texto y el margen se quedaba en cero. Un fallo que no se ve hasta que se compara. */ .login__oblidada a { color: var(--afa-text-suau); } .login__ajuda { color: var(--afa-text-suau); font-size: var(--afa-mida-s); margin: 0 0 var(--afa-espai-4); text-align: center; } .login__form { text-align: left; } .camp { display: block; margin-bottom: var(--afa-espai-4); } .camp__etiqueta { display: block; font-size: var(--afa-mida-xs); font-weight: var(--afa-pes-fort); text-transform: uppercase; letter-spacing: .06em; color: var(--afa-text-suau); margin-bottom: var(--afa-espai-2); } .camp__input { width: 100%; min-height: var(--afa-tap-min); padding: var(--afa-espai-3); font-family: inherit; font-size: var(--afa-mida-m); color: var(--afa-text); background: var(--afa-blanc); border: 2px solid var(--afa-vora); border-radius: var(--afa-radi-s); } .camp__input:focus-visible { outline: 3px solid var(--afa-accent); outline-offset: 1px; border-color: var(--afa-primari); } .boto { font-family: inherit; font-size: var(--afa-mida-m); font-weight: var(--afa-pes-fort); min-height: var(--afa-tap-min); padding: var(--afa-espai-3) var(--afa-espai-5); border: 0; border-radius: var(--afa-radi-s); cursor: pointer; } .boto:focus-visible { outline: 3px solid var(--afa-accent); outline-offset: 2px; } .boto[disabled] { opacity: .6; cursor: default; } /* * ── QUÈ VOL DIR `--primari`, QUE NO ÉS «el botó important» ─────────────── * * És **l'acció d'un FORMULARI**: per això ocupa tot l'ample i porta marge a * dalt. Allà és correcte —hi ha un sol camí endavant i el polze l'ha de trobar * sense apuntar— i és el que fan «Entrar», «Crea el compte» o «Entra a la * família». * * NO ÉS per a una acció solta enmig d'una pantalla. Posar-l'hi la converteix * en una barra de caire a caire, que és el que va passar amb «Afegir membre» a * «La meva família» i el que David va haver d'assenyalar dues vegades el * mateix dia — la primera va ser la caixa del QR. * * QUÈ FER LLAVORS: mirar on va l'acció abans de buscar-li una classe. Aquella * va acabar sent la icona de la cantonada de la capçalera (`.pagina__accio`, * a portal.css), i amb això va desaparèixer el problema i també el * `.boto--accio` que s'havia escrit per resoldre'l — va viure un dia i no el * fa servir ningú, així que se'n va. Una classe que no pinta res és un * comentari que menteix esperant torn. */ .boto--primari { display: block; width: 100%; background: var(--afa-primari); color: var(--afa-primari-text); margin-top: var(--afa-espai-5); } .boto--text { background: none; color: var(--afa-primari); text-decoration: underline; padding: var(--afa-espai-2); } /* ── Notas y avisos ────────────────────────────────────────────────────── Sin franja lateral: marca circular con el mismo lenguaje de símbolos que el validador (✓ / ✗ / !) y fondo teñido. El símbolo va en un pseudoelemento para no tener que tocar el HTML ni el JavaScript que escribe estos textos. */ /* * OJO: `.nota` es un flex y su marca circular es el `::before`, así que TODO * el contenido tiene que ir en UN SOLO hijo. Con varios (un ``, un * `
` y un texto, por ejemplo) cada uno se convierte en un elemento flex * hermano y el mensaje sale en columnas — y el `
` no salva nada, porque * dentro de un flex no hay línea que romper. */ .nota { display: flex; align-items: flex-start; gap: var(--afa-espai-3); padding: var(--afa-espai-3) var(--afa-espai-4); border-radius: var(--afa-radi-m); font-size: var(--afa-mida-s); line-height: 1.5; text-align: left; } .nota::before { content: '!'; flex: 0 0 auto; width: 1.5rem; height: 1.5rem; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: var(--afa-mida-s); font-weight: var(--afa-pes-molt); line-height: 1; } .nota--error { background: var(--afa-vermell-050); color: var(--afa-vermell-600); font-weight: var(--afa-pes-fort); } .nota--error::before { content: '✕'; background: var(--afa-vermell-600); color: var(--afa-blanc); } /* * `.nota--ok` se retiró en la limpieza del 7 de septiembre por estar sin usar, * y volvió al día siguiente con la pantalla de contraseña nueva. No fue un * error retirarla —entonces no la usaba nadie— pero deja la lección: en un * proyecto vivo, "código muerto" a veces solo significa "todavía no". */ .nota--ok { background: var(--afa-verd-050); color: var(--afa-text); } .nota--ok::before { content: '\2713'; background: var(--afa-verd-600); color: var(--afa-blanc); } .nota--avis { background: var(--afa-taronja-050); color: var(--afa-text); } .nota--avis::before { background: var(--afa-taronja-500); color: var(--afa-blau-900); } .error { background: var(--afa-vermell-050); color: var(--afa-vermell-600); padding: var(--afa-espai-3); border-radius: var(--afa-radi-m); font-size: var(--afa-mida-s); font-weight: var(--afa-pes-fort); margin: var(--afa-espai-4) 0 0; } /* ── Cabecera de la app ────────────────────────────────────────────────── * * `.capcalera` YA NO SE DEFINE AQUÍ: vive en /shared/css/portal.css y en * ningún otro sitio. Estaba escrita dos veces —aquí y en registre.css—, con * reglas parecidas y no iguales, que es exactamente la trampa que este * proyecto tiene nombrada: duplicar presentación cuesta trabajo, duplicarla * mal hace que el proyecto parezca dos proyectos. Hay prueba en * bin/proves/carnet.php de que solo hay una definición. */ /* ── Carnet ──────────────────────────────────────────────────────────── */ /* * `text-align: left` i no `center`. La targeta anterior anava centrada i el * `text-align` es va quedar aquí quan va arribar la credencial del disseny, * que és alineada a l'esquerra; es corregia 1.900 línies més avall, en un * segon bloc amb el mateix nom. Ara és una sola declaració. */ .carnet { max-width: 26rem; margin: 0 auto; padding: var(--afa-espai-4); text-align: left; } /* ── La credencial ─────────────────────────────────────────────────────── * * La tarjeta que ve la familia. Fondo claro y opaco por obligación técnica, * no estética: encima va un QR que tiene que leerse con la cámara de otro * móvil, así que ni degradados ni transparencias por debajo. * * overflow: hidden es lo que recorta los tres ángulos de color contra el * redondeo de las esquinas. Sin eso asoman por fuera de la tarjeta. */ .credencial { position: relative; overflow: hidden; background: var(--afa-marina); color: var(--afa-blanc); border: 0; border-radius: 1.5rem; /* 24px, el del disseny */ box-shadow: var(--afa-ombra-2); padding: var(--afa-espai-4); /* * L'angle taronja és l'únic que queda dels tres: els dos de baix eren blaus * sobre blanc i aquí serien invisibles. El relleno inferior de 2,75rem que * reservava el seu forat va marxar amb ells, i això és el que deia el segon * bloc que hi havia més avall amb aquest mateix nom. */ --angle-sup: 4.625rem; /* los 74px del diseño */ --angle-sup-color: var(--afa-taronja-viu); --angle-dre-color: transparent; --angle-esq-color: transparent; } /* * Ángulos de color. Son el motivo de la casa: la misma diagonal del * triángulo del logotipo, repetida en las esquinas. * * El de abajo a la izquierda es azul medio, no rojo como en la referencia * impresa: en esta pantalla el rojo quiere decir CADUCAT y no puede aparecer * de adorno junto a un carnet vigente. * * Van detrás del contenido (z-index 0 contra 1) y ninguna fila de datos cae * encima de ellos: de eso se encarga el relleno inferior de la tarjeta. */ /* * Las medidas y los colores de la tarjeta son los VALORES POR DEFECTO del * componente `.angle` de portal.css, así que aquí no hay que decir nada: la * credencial es el sitio donde nacieron y quien los cambie los cambia para * ella. El portal declara los suyos con las mismas variables. */ /* * ── AQUÍ HI HAVIA EL LOGOTIP I EL TÍTOL DE LA TARGETA ─────────────────── * * `.credencial .marca` —el lockup dins de la targeta, amb el filet taronja— i * `.credencial__titol`, el «Carnet de família sòcia». El disseny 2A se'ls va * endur ja fa dies: el logotip puja a la capçalera i l'antetítol («CARNET DE * SOCI · 2026-2027») diu el que deia el títol. També se'n va la parella de * `bin/contrast.php` que mesurava el taronja del títol sobre blanc, que era * l'única pareja del projecte que demanava «text gran» — i ja no hi ha cap * text al qual exigir-li-ho. * * El `z-index: 1` que els aixecava per damunt dels angles es queda per a la * caixa del QR, que sí que hi és. */ .credencial .carnet__marc { position: relative; z-index: 1; } /* * LA CINTA DEL CURSO se esconde cuando el carnet está caducado: el curso se * deduce de la fecha de vigencia, y esa fecha tampoco se muestra. Anunciar * "Curs 2026-2027" al lado de un CADUCAT es contradecirse. * * Su ASPECTO es `.cinta`, definido en portal.css y compartido con el resumen * de escritorio: eran las mismas ocho declaraciones y el resumen enseñaba el * curso como texto plano, o sea el mismo dato dicho de dos maneras. Aquí no * queda ninguna, y el marcado lleva las dos clases porque `credencial__curs` * sigue diciendo QUÉ es dentro de la tarjeta. */ /* * El marco del QR es el semáforo: verde vigente, rojo caducado. Nunca * comunica solo con color — el distintivo VÀLID / CADUCAT va siempre arriba. * * 15rem de ancho máximo no es una cifra estética, y es lo único de esta * tarjeta que no se puede encoger más. Con el token de 64 caracteres el QR * sale de 41 módulos, 45 contando la zona de silencio: a este tamaño cada * módulo ocupa unos 4,7 px de pantalla, que es lo que necesita la cámara de * un comercio a un palmo de distancia. En la referencia impresa el QR era un * adorno de esquina; a ese tamaño, en un móvil, deja de leerse. */ .carnet__marc { box-sizing: border-box; /* 15rem es el tamaño de FUERA */ width: 100%; max-width: 15rem; margin: 0 auto var(--afa-espai-3); background: var(--afa-blanc); border: 6px solid var(--afa-gris-300); border-radius: var(--afa-radi-m); padding: var(--afa-espai-2); transition: border-color .2s ease; } .carnet__marc--valid { border-color: var(--afa-verd-600); } .carnet__marc--caducat { border-color: var(--afa-vermell-600); } /* * Sin carnet: el marco NO se pinta de ningún color de semáforo. * * Verde y rojo son un veredicto sobre una credencial, y aquí no hay * credencial sobre la que dar veredicto. Con el borde rojo, el previo se * seguiría leyendo como «te lo han denegado», que es justo lo que se está * corrigiendo. Se marca con un borde discontinuo, que es el lenguaje de «esto * es un hueco todavía por llenar» y no el de un estado. */ .carnet__marc--sense { border-style: dashed; border-color: var(--afa-gris-300); background: var(--afa-crema); } /* ── EL TABLERO: lo que ocupa el hueco del QR cuando no hay carnet ──────── * * NO ES UN QR Y NO PUEDE PARECERLO. Ni siquiera se pone un código que lleve a * una página de «pendiente»: un cuadrado que se parece a un código invita a * que alguien lo escanee en un mostrador, y deja al comercio esperando una * respuesta que no va a llegar. Esto tiene que comunicar «todavía no hay * código» ANTES de que nadie levante el móvil. * * Por eso las casillas son de 2rem y no de 4 px. Un módulo de QR mide aquí * unos 4,7 px, así que estas son SEIS VECES más grandes; y no hay patrones de * posicionamiento en tres esquinas, que es lo que un lector busca primero. * Ninguna cámara va a intentar leer esto. */ .tauler { position: relative; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; padding: var(--afa-espai-3); } .tauler__dibuix { position: absolute; inset: 0; border-radius: var(--afa-radi-s); /* Dos degradados cruzados hacen el tablero sin ninguna imagen: cero peticiones, y escala a cualquier tamaño sin pixelarse. */ background-color: var(--afa-blanc); background-image: linear-gradient(45deg, var(--afa-gris-100) 25%, transparent 25%, transparent 75%, var(--afa-gris-100) 75%), linear-gradient(45deg, var(--afa-gris-100) 25%, transparent 25%, transparent 75%, var(--afa-gris-100) 75%); background-size: 4rem 4rem; background-position: 0 0, 2rem 2rem; } /* * La etiqueta va sobre fondo opaco y no sobre el tablero: encima de las * casillas el contraste dependería de qué casilla le toque detrás, que es * justo la clase de medición que no se puede hacer. Sobre gris-100 el texto * en azul 900 da 13,65:1, y la pareja está en bin/contrast.php. */ .tauler__etiqueta { position: relative; /* Blanco con borde y no gris: el tablero ES gris claro sobre blanco, así que una etiqueta gris se funde con media casilla sí y media no, y se ve un recorte raro en el borde. Con el borde puesto, la etiqueta se lee como lo que es —una nota puesta encima— sobre las dos casillas. */ background: var(--afa-blanc); border: 1px solid var(--afa-vora); box-shadow: var(--afa-ombra-1); color: var(--afa-blau-900); font-size: var(--afa-mida-xs); font-weight: var(--afa-pes-fort); line-height: 1.35; text-align: center; border-radius: var(--afa-radi-s); padding: var(--afa-espai-2) var(--afa-espai-3); } /* La explicación completa, debajo de la tarjeta. `.nota` ya trae la marca circular con el símbolo del validador, así que no hace falta nada más. */ .carnet__sense { margin: 0 0 var(--afa-espai-4); text-align: left; } .carnet__qr { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; } /* El QR se dibuja en canvas: negro sobre blanco, sin filtros ni sombras que puedan estropear la lectura de la cámara del comercio. El ancho exacto lo fija app.js en píxeles para que cada módulo caiga sobre un número entero de píxeles físicos; aquí solo se impide que desborde si ese cálculo no ha llegado a ejecutarse. */ .carnet__qr canvas { max-width: 100%; height: auto; display: block; image-rendering: pixelated; } .carnet__carregant { color: var(--afa-text-suau); font-size: var(--afa-mida-s); } /* * Distintivo de estado. El fondo y el símbolo viven en las variantes, no en * la clase base: mientras no hay veredicto el elemento está vacío, y una * píldora de color vacía en medio de la tarjeta es exactamente el (!) suelto * que ya nos pasó una vez. */ .carnet__estat { font-size: var(--afa-mida-xs); font-weight: var(--afa-pes-molt); letter-spacing: .06em; } .carnet__estat--valid, .carnet__estat--caducat, .carnet__estat--sense { display: inline-flex; align-items: center; gap: var(--afa-espai-1); padding: 0.25rem 0.6rem 0.25rem 0.3rem; border-radius: 999px; } /* Marca circular con el mismo lenguaje de símbolos que el validador. El color nunca va solo: lleva símbolo y peso tipográfico. */ .carnet__estat--valid::before, .carnet__estat--caducat::before, .carnet__estat--sense::before { flex: 0 0 auto; width: 1.125rem; height: 1.125rem; border-radius: 50%; display: grid; place-items: center; font-size: 0.75rem; line-height: 1; color: var(--afa-blanc); } .carnet__estat--valid { color: var(--afa-verd-600); background: var(--afa-verd-050); } .carnet__estat--valid::before { content: '\2713'; /* ✓ */ background: var(--afa-verd-600); } .carnet__estat--caducat { color: var(--afa-vermell-600); background: var(--afa-vermell-050); } .carnet__estat--caducat::before { content: '\2717'; /* ✗ */ background: var(--afa-vermell-600); } /* * PENDENT: ni verde ni rojo, porque no hay veredicto. * * Usa el tercer símbolo del validador, el «!», que es el que este proyecto ya * emplea para «esto hay que mirarlo» y no para «esto está mal». El fondo es * gris y no naranja a propósito: el naranja sobre blanco da 3,00:1 y esta * pastilla es texto pequeño, así que incumpliría AA — el mismo error que ya * se evitó en «Els meus usos». Sobre gris-100, el azul 900 da 13,65:1. */ .carnet__estat--sense { color: var(--afa-blau-900); background: var(--afa-gris-100); } .carnet__estat--sense::before { content: '!'; background: var(--afa-blau-700); font-weight: var(--afa-pes-molt); } /* * ── LA CREDENCIAL, DISEÑO 2A (15 de septiembre) ────────────────────────── * * Portado del código fuente del handoff de Claude Design, no de las capturas: * los valores son los suyos, uno a uno. * * TODO LO QUE SE ESCRIBE SOBRE EL AZUL ESTÁ MEDIDO: * blanco ............... 12,02:1 el nombre y los valores * --afa-blau-200 ........ 5,58:1 las etiquetas, a 9,5px * --afa-taronja-300 ..... 5,22:1 el antetítulo y el codi * * Y la vuelta de tuerca que esto resuelve: el naranja de marca sobre blanco da * 2,83:1 —por eso el título de la tarjeta vieja tuvo que subir de cuerpo en * agosto— y sobre este azul cualquiera de los dos naranjas pasa de sobra. El * fondo oscuro no es solo estética: es lo que libera el color de la casa. */ /* ── El antetítulo y el nombre ─────────────────────────────────────────── */ .credencial__tipus { position: relative; z-index: 1; margin: 0; color: var(--afa-taronja-300); font-size: 0.594rem; /* 9,5px */ font-weight: var(--afa-pes-molt); letter-spacing: .14em; text-transform: uppercase; } .credencial__nom { position: relative; z-index: 1; margin: 3px 0 0; color: var(--afa-blanc); font-size: 1.0625rem; /* 17px */ font-weight: var(--afa-pes-molt); letter-spacing: -.012em; /* Un nombre largo no puede empujar al ángulo ni partir la tarjeta. */ overflow-wrap: anywhere; } /* ── El QR, en su caja blanca ──────────────────────────────────────────── */ .credencial .carnet__marc { position: relative; z-index: 1; max-width: none; /* 2A lo lleva a todo el ancho */ margin: 15px 0 0; background: var(--afa-blanc); border: 0; border-radius: 1rem; /* 16px */ padding: 13px; } /* * EL BORDE DE SEMÁFORO SE VA DE AQUÍ. Era un aro verde o rojo alrededor del * QR, y en 2A el veredicto lo lleva la pastilla del pie. Dos sitios diciendo * lo mismo es uno de más — y el aro de color alrededor de un código reduce su * zona de silencio, que es justo lo que una cámara necesita. */ .credencial .carnet__marc--valid, .credencial .carnet__marc--caducat { border: 0; } .credencial .carnet__marc--sense { background: rgba(255, 255, 255, .08); border: 1px dashed rgba(255, 255, 255, .35); } /* ── Las dos columnas ──────────────────────────────────────────────────── */ .credencial__graella { position: relative; z-index: 1; margin-top: 15px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .credencial__camp { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .credencial__et { color: var(--afa-blau-200); /* 5,58:1 */ font-size: 0.594rem; /* 9,5px */ letter-spacing: .08em; text-transform: uppercase; } .credencial__val { color: var(--afa-blanc); /* 12,02:1 */ font-size: 0.875rem; /* 14px */ font-weight: var(--afa-pes-molt); } /* El número de socia se dice EN VOZ ALTA por teléfono: monoespaciada. */ .credencial__val--mono { font-family: var(--afa-mono); } /* ── El pie: el codi y el veredicto, juntos ────────────────────────────── */ .credencial__peu { position: relative; z-index: 1; margin-top: 13px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .16); display: flex; align-items: center; justify-content: space-between; gap: 8px; } .credencial__camp--codi { flex: 1 1 auto; } .credencial .codi { background: none; border: 0; padding: 0; text-align: left; /* * SOLO EL CÓDIGO ES TOCABLE, no toda la fila. `.credencial__camp` es una * columna flexible, así que el botón se BLOQUIFICA y ocupa todo el ancho: * tocando el hueco vacío de la derecha también se copiaba. Con * `align-self: start` el botón mide lo que mide el código. */ align-self: start; color: var(--afa-taronja-300); /* 5,22:1 */ font-family: var(--afa-mono); font-size: 0.75rem; /* 12px */ font-weight: var(--afa-pes-molt); cursor: pointer; } /* ── La pastilla del veredicto ─────────────────────────────────────────── */ /* * ── LA PASTILLA TÉ L'AMPLADA DE LA DATA, I NO LA DEL SEU TEXT ─────────── * * Decisió de David del 20 de setembre de 2026, i el número no és inventat: * **«30/08/2026» ocupa 89,92 px** amb el cos i el pes de `.credencial__val`, * mesurat al navegador contra el que serveix el servidor. Són els 5,29rem * d'aquí sota, sobre l'arrel de 17px. * * Amb això la pastilla i la data queden UNA SOTA L'ALTRA i comparteixen el * caire dret. L'amplada deixa de ser un número triat i passa a ser una * alineació, que és el que fa que no sembli una càpsula estirada. * * ── I PER QUÈ FIXA I NO UN MÍNIM ──────────────────────────────────────── * * Perquè els tres estats han de mesurar el mateix: si «CADUCAT» fos més ample * que «VÀLID», el caire dret ballaria segons com estigui la quota, que és * justament el dia que la família mira la targeta amb atenció. * * Hi caben tots tres, mesurat: CADUCAT demana 73,9px i li queden 8 a cada * costat. El dia que algú vulgui un text més llarg, aquí es trencarà — i * s'ha de trencar aquí i no a la pantalla d'algú: hi ha prova que ho afirma. */ .credencial .carnet__estat { flex: none; border-radius: 999px; /* * Sense farciment lateral: l'amplada ja està donada i el text va centrat. * Amb farciment, el text es descentraria respecte de la càpsula el dia que * la paraula canviï de llargada. */ width: 5.29rem; /* 89,92px: el que ocupa «30/08/2026» */ padding: 5px 0; display: inline-flex; align-items: center; justify-content: center; text-align: center; font-size: 0.875rem; /* el mateix cos que la validesa */ font-weight: var(--afa-pes-molt); letter-spacing: .08em; } .credencial .carnet__estat--valid { background: var(--afa-verd-valid); color: var(--afa-blanc); } .credencial .carnet__estat--caducat { background: var(--afa-vermell-600); color: var(--afa-blanc); } .credencial .carnet__estat--sense { background: rgba(255,255,255,.14); color: var(--afa-blanc); } /* ── La versión, ya fuera de la tarjeta ────────────────────────────────── */ .credencial__versio { position: static; margin: var(--afa-espai-2) 0 0; text-align: right; color: var(--afa-calid-600); /* desviación medida: 4,51:1 */ font-family: var(--afa-mono); font-size: 0.594rem; letter-spacing: .02em; -webkit-text-stroke: 0; } /* * El código de descuento es UNA FILA MÁS. * * Decisión de David, y tenía razón: misma tipografía, mismo tamaño y misma * estructura que el titular, el número de socia y la validez. La cohesión de * la tarjeta manda sobre cualquier ganancia de legibilidad del código. * * Mi primera versión lo puso en monoespaciada y con las letras separadas "para * que se lea mejor". Dos problemas: rompía la unidad visual de la tarjeta, y era * ANCHO — diecisiete caracteres monoespaciados más la etiqueta no caben en * 375px, así que el código se partía en dos y hubo que darle una fila propia. * En proporcional cabe de sobra en una línea: el arreglo de David resuelve las * dos cosas a la vez. * * Y la legibilidad no se pierde donde importaba: el alfabeto ya excluye la I, * la L, la O y la U precisamente para que no haga falta una tipografía especial * que distinga el 1 de la l ni el 0 de la O. * * Lo único que lo distingue de un valor normal es el subrayado punteado, que es * la pista de que se puede tocar para copiar: una señal de comportamiento, no * un cambio de tipografía. */ .codi { font-family: inherit; font-size: var(--afa-mida-s); font-weight: var(--afa-pes-fort); color: var(--afa-blau-900); letter-spacing: normal; display: inline; border: 0; padding: 0; background: none; cursor: pointer; border-bottom: 1px dotted var(--afa-vora); transition: color .2s ease, border-color .2s ease; } /* * ── EL CÓDIGO QUE «DESAPARECÍA»: ERA ESTE `:hover` ─────────────────────── * * David: «cuando "Copiat" se desvanece, el código desaparece y no se ve». No * desaparecía: se quedaba pintado a **1,03:1**. * * `--afa-primari` es `--afa-blau-700` (#1B3A5C) y la credencial es * `--afa-marina` (#16385A). Son el mismo azul. Esta regla se escribió cuando * la tarjeta era CLARA, y el diseño 2A la volvió marina sin que nadie la * repasara — la tercera vez que un color del carnet blanco se queda pintando * sobre el carnet oscuro, después del enlace de la cabecera. * * Y por eso solo se veía DESPUÉS de tocar: `.codi:hover` (0,2,0) llega * después de `.credencial .codi` (0,2,0) en este mismo fichero, así que gana; * y **en una pantalla táctil el `:hover` se queda pegado** tras el toque hasta * que tocas otra cosa. Tocar para copiar equivalía a apagar el código. * * `@media (hover: hover)` es el arreglo de fondo y vale para todo el * proyecto: un aparato sin ratón NO entra nunca en este bloque, así que * ningún `:hover` se le puede quedar clavado. Dentro de la tarjeta, además, * el color de realce es uno que se ve sobre marino. */ @media (hover: hover) { .codi:hover { color: var(--afa-primari); border-bottom-color: var(--afa-primari); } /* * EL REALCE ACLARA, no cambia de familia. `--afa-taronja-500` sobre la * marina da **4,00:1** —medido, y la puerta lo rechazó— así que va el 200, * que es el mismo naranja lavado y llega a 8,60. Con ratón, lo único que * tiene que decir es «esto se puede tocar». */ .credencial .codi:hover { color: var(--afa-taronja-200); border-bottom-color: currentColor; } } .codi:focus-visible { outline: 2px solid var(--afa-accent); outline-offset: 3px; } /* * ── LA CONFIRMACIÓN DE COPIADO ─────────────────────────────────────────── * * Tres cosas medidas, y las tres estaban mal en la tarjeta del carnet: * * 1. `display: block` dentro de un botón `inline` AÑADE UNA LÍNEA: el botón * pasaba de 15 a 31 px al tocar el código, así que el pie de la credencial * crecía y la píldora del veredicto saltaba de sitio. Ahora va en línea y * `:empty` la retira del todo cuando no dice nada — sin eso, un hueco * vacío sigue ocupando su margen. * * 2. `--afa-verd-600` sobre la credencial marina da **2,26:1**. O sea que la * palabra «Copiat» era casi invisible justo donde más se toca el código. * En la tarjeta va `--afa-verd-300` (6,86:1); fuera, sobre blanco, el 600 * sigue siendo el correcto. * * 3. `.codi--copiat` (0,1,0) nunca ganaba a `.credencial .codi` (0,2,0), así * que el código tampoco se teñía. Se retira el cambio de color del BOTÓN: * la señal es la palabra, que es la que funciona sin color — y así no hay * dos reglas peleándose por el mismo píxel. */ .codi--copiat { border-bottom-color: currentColor; } .codi__estat { display: inline; margin-left: .45em; font-size: var(--afa-mida-xs); font-weight: var(--afa-pes-fort); color: var(--afa-verd-600); } .codi__estat:empty { display: none; } .credencial .codi__estat { color: var(--afa-verd-300); } /* 6,86:1 */ /* * SI NO CABE, EL CÓDIGO PARTE POR UN GUION, y eso hoy no lo escribe ninguna * regla: es el comportamiento por defecto del navegador, que ya trata el guion * como una oportunidad de corte. Hubo una línea que lo forzaba * (`overflow-wrap: normal`) mientras el código vivía en una celda de rejilla * con `min-width: 0`, donde el defecto no bastaba; con la credencial de 2A esa * celda desapareció. Queda escrito porque la regla que importa es la de al * lado: **nunca se recorta ni se rompe por la mitad de un grupo**. En un móvil * de 320 es mejor "AFA67-" / "BZ3QS-M9Q97" que perder dos caracteres. */ /* * ── AQUÍ HI HAVIA LA CAMPANA I LA HAMBURGUESA DE LA CAPÇALERA ─────────── * * `.icona`, el seu objectiu tàctil de 44x44, i `.icona__comptador`, el número * que anava damunt de la campana. El disseny 2A se'ls va endur: «Avisos» és * una pestanya de la barra amb el seu punt, i el que obria la hamburguesa ara * el obre la pestanya «Compte». Feia dies que no els pintava ningú. */ /* ── Menú desplegable ────────────────────────────────────────────────────── */ /* * EL FULL DEL COMPTE — antes era el desplegable de la hamburguesa. * * Cambia de sitio porque cambió su disparador: colgaba de un botón de la * esquina superior derecha y ahora lo abre la pestaña «Compte» de la barra * inferior. Un panel que se abre arriba desde un botón de abajo obliga a * cruzar la pantalla con la vista y deja el dedo tapando justo lo que se * acaba de abrir. * * Sube DESDE LA BARRA y se queda al alcance del pulgar, que es la idea entera * de 2A: «res tapa el carnet, els xips s'aixequen des de baix». */ .menu { position: fixed; /* * ── ACABA DONDE EMPIEZA LA BARRA, NO EN EL SUELO ────────────────────── * * Esto estaba en `bottom: 0` con un relleno inferior de la altura de la * barra, con la idea de «dejarla libre». No la dejaba: el relleno aparta el * CONTENIDO, pero el fondo blanco de la hoja se pinta igual y la hoja está * por encima (z-index 21 contra 20). O sea que al abrir «Compte» la barra * desaparecía debajo de un rectángulo blanco — lo vio David. * * Ahora la hoja termina donde empieza la barra, que además es lo que dice * el diseño 3B: las píldoras se LEVANTAN desde la barra, no la tapan. * * El atajo primero y la medida frágil en su longhand aparte, la regla de * siempre: si Safari no parsea `env()` dentro de un `calc()`, lo peor que * pasa es que la hoja se quede en la altura de la barra sin el recorte. */ inset: auto 0 0 0; /* * ── LA BARRA PINTA POR ENCIMA, Y ASÍ NO HACE FALTA SABER CUÁNTO MIDE ── * * El intento anterior levantaba la hoja `--afa-barra-alt` sobre el suelo, y * quedaba flotando: esa variable son los 5,25 rem de HUECO que antes hacía * sitio a la barra fija, no su altura real. Cualquier número escrito aquí * sería un número que hay que acordarse de cambiar el día que la barra * cambie de cuerpo — y ya sabemos cómo acaba eso. * * Así que la hoja sube desde el suelo y **la barra se pinta encima** (20 * contra 19). Lo que queda a la vista es exactamente la barra, sin que nadie * mida nada, y el relleno inferior mantiene el CONTENIDO de la hoja por * encima de ella. Es lo que la versión original pretendía; lo que tenía mal * era el orden de apilado. * * Y de paso la barra sigue siendo tocable con la hoja abierta: tocar otra * pestaña cierra el full y navega, que es lo que uno espera. */ z-index: 19; background: var(--afa-blanc); border: 0; border-top: 1px solid var(--afa-calid-100); border-radius: var(--afa-radi-l) var(--afa-radi-l) 0 0; box-shadow: 0 -12px 34px rgba(16, 36, 58, .18); /* El atajo primero y la medida frágil en su longhand aparte, la de siempre. */ padding: var(--afa-espai-4) var(--afa-espai-3) 5.25rem; padding-bottom: calc(5.25rem + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: var(--afa-espai-1); max-height: 80vh; overflow-y: auto; } @media (min-width: 64rem) { /* En escritorio no hay barra inferior: vuelve a ser el desplegable de antes. */ .menu { position: absolute; inset: 100% var(--afa-espai-3) auto auto; min-width: 12rem; border: 1px solid var(--afa-vora); border-radius: var(--afa-radi-m); box-shadow: var(--afa-ombra-2); padding: var(--afa-espai-2); max-height: none; } } /* * ── L'ENCAPÇALAMENT DE GRUP D'AQUEST FULL TAMPOC HI ÉS JA ──────────────── * * `.menu__grup` i la píndola del rol `.menu__rol` vestien els títols «El meu * carnet» i «Gestió» del full del «Compte». Des que la barra es va quedar * «Gestió», el full no pot tenir mai dos grups, així que el títol era un * títol solitari damunt d'una sola llista i `menuOpcions()` ha deixat * d'escriure'l. El lateral d'escriptori té els seus (`.lateral__grup`), que * allà sí que separen dues coses. */ /* * Las opciones son ahora ENLACES además de botones (las secciones vienen de * `Disseny::menuOpcions()`), y un `` de bloque con `min-height` deja el * texto pegado arriba mientras un `