/* ========================================================================= MOIRE - las cuatro paginas legales ------------------------------------------------------------------------- Nodos 739:338 (privacidad), 745:338 (aviso), 745:2696 (cookies) y 745:2831 (redes). Cada uno trae escritorio (1920) y movil (375); las cuatro paginas comparten maqueta, asi que esta hoja las viste a todas y no hay una regla por documento. LO QUE MIDE EL DISENO, leido del nodo y no a ojo: escritorio (1920) movil (375) margen lateral 229,333 16 aire arriba y abajo 80 40 hueco entre bloques 40 28 titular Bold 40 / normal Bold 24 / 30 letter-spacing 0,8 titulo de seccion Bold 22 / normal Bold 18 / normal cuerpo Regular 16 / 26 Regular 15 / 24 fondo #E9BAB6 idem texto #400F17 idem LOS DOS COLORES YA SON TOKENS DEL PROYECTO y se han comprobado sobre el render del nodo, no supuesto: el fondo es exactamente --c-rosa y el texto --c-burdeos. --c-rosa se habia usado hasta ahora solo para el campo del boletin del pie; aqui pinta paginas enteras. TABLET NO TIENE ARTBOARD y se hace por interpolacion, que es lo que se pidio: "de forma intermedia y listo". Cada medida que cambia entre los dos disenos va en una recta que pasa por el valor de 768 y por el de 1920, topada ahi. No hay un tercer bloque de reglas: un documento de texto no necesita otra composicion, necesita los mismos numeros creciendo. ========================================================================= */ /* EL FONDO VA EN EL BODY, no en el
, por lo mismo que en /about: tiene que llegar al final de la ventana aunque el documento sea corto -la politica de cookies lo es- y pintar la zona de rebote del scroll. En el main quedaria una franja blanca debajo del ultimo parrafo. */ body.legal { background: var(--c-rosa); } /* LA COLUMNA DEL DOCUMENTO. SE PISA EL padding-inline DE .contenedor A PROPOSITO. Esa clase es el contenedor general del sitio y trae clamp(20px, 4.2vw, 80px), que a 1920 da 80; el diseno de estas paginas pide 229,333. No se usa una clase propia porque lo demas que hace .contenedor -el ancho maximo y el centrado- es exactamente lo que hace falta: lo unico que sobra es su margen. Pisarlo aqui deja claro que la diferencia es de estas paginas y no un descuido. 229,333 SE ESCRIBE COMO PORCENTAJE Y NO COMO vw, y la diferencia importa por encima de 1920: .contenedor topa en 1920, asi que un porcentaje deja de crecer con la ventana justo cuando la caja deja de crecer. En vw, a 2560 el margen seria 306 y el texto se estrecharia sin motivo. */ .legal__cuerpo .contenedor { display: flex; flex-direction: column; gap: 28px; /* 28 del artboard de 375 */ padding-block: 40px; /* 40 del artboard de 375 */ padding-inline: 16px; /* 16 del artboard de 375 */ } /* MAYUSCULAS POR CSS Y NO EN EL DATO, igual que el nombre del perfumista en las fichas. En el diseno el titular esta escrito en mayusculas, pero lo que se guarda en el diccionario es el titulo del documento tal y como se escribe -"Politica de privacidad"- porque esa misma cadena se usa en el de la pestana y en los enlaces del pie de cada documento, donde gritar no toca. OJO CON LOS TITULOS DE SECCION: esos NO llevan text-transform. Su caja viene del contenido y en el diseno no es uniforme -la politica de cookies los tiene en mayusculas y la de privacidad en caja normal-, asi que imponerla desde aqui cambiaria uno de los dos documentos. */ .legal__titulo { margin: 0; font-size: 24px; line-height: 30px; font-weight: var(--peso-bold); text-transform: uppercase; } .legal__seccion { margin: 0; font-size: 18px; line-height: normal; font-weight: var(--peso-bold); } .legal__parrafo { margin: 0; font-size: 15px; line-height: 24px; } /* LAS LISTAS NO LLEVAN VINETA, Y ES DEL DISENO. En el nodo de la politica de cookies los puntos -"Cookies propias...", "Cookies de terceros..."- estan dibujados como parrafos sueltos separados por un renglon en blanco, sin marcador ninguno. Se comprobo sobre el render, no se supuso. SE MANTIENE <ul> EN EL MARCADO aunque no se vea como lista. Lo que hay ahi es una enumeracion: un lector de pantalla anuncia "lista de cinco elementos" y permite saltarla entera, y eso no se consigue con cinco parrafos. Quitar la vineta es presentacion; quitar la lista seria perder informacion. */ .legal__lista { margin: 0; padding: 0; list-style: none; font-size: 15px; line-height: 24px; } /* El renglon en blanco entre puntos es el del diseno: una linea de cuerpo, no un margen inventado. Por eso vale el mismo numero que el interlineado. */ .legal__lista li + li { margin-top: 24px; } /* LA FICHA DE DATOS SE VE COMO "Etiqueta: valor" EN UNA LINEA, que es como la dibuja el diseno, pero en el marcado es una <dl> de verdad. Los dos puntos los pone el CSS y no el diccionario: forman parte de como se ve la ficha, no del dato, y asi no hay que acordarse de escribirlos en catorce sitios ni en dos idiomas. EL SALTO DE LINEA DESPUES DE CADA VALOR se hace con un ::after porque <dt> y <dd> van en linea para que el par quepa en un renglon; en bloque, cada uno ocuparia el suyo y la ficha saldria al doble de alto que en el diseno. */ .legal__datos { margin: 0; font-size: 15px; line-height: 24px; } .legal__datos dt, .legal__datos dd { display: inline; margin: 0; font-weight: inherit; } .legal__datos dt::after { content: ": "; } .legal__datos dd::after { content: "\A"; white-space: pre; } /* LOS OTROS TRES DOCUMENTOS, al final de cada pagina. No sale del diseno: es navegacion que estas paginas necesitan y el artboard no resuelve. Se maqueta con lo que ya hay -el mismo cuerpo, el mismo color- para que no parezca de otro sitio, y se separa con una linea fina que es el unico trazo que esta hoja dibuja. */ .legal__otros { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 16px; padding-top: 24px; border-top: 1px solid var(--c-burdeos); font-size: 15px; line-height: 24px; } .legal__otros a { color: inherit; } /* ========================================================================== DE 768 EN ADELANTE -------------------------------------------------------------------------- Todo lo que cambia entre los dos artboards crece en linea recta desde su valor de 768 hasta el de 1920 y ahi topa. La forma es siempre la misma, min(a + b*vw, techo), y las dos constantes salen de resolver la recta por los dos extremos; el comentario de cada regla dice cuales son esos extremos para que se pueda comprobar la cuenta sin rehacerla. ========================================================================== */ @media (min-width: 768px) { /* EL MARGEN LATERAL PASA A SER PROPORCIONAL: 229,333 de 1920 son 11,9444%, que a 768 dan 92 y dejan una columna de 584. Como .contenedor topa en 1920, el porcentaje deja de crecer justo donde deja de crecer la caja. */ .legal__cuerpo .contenedor { gap: min(26.667px + 0.6944vw, 40px); /* 32 a 768 -> 40 a 1920 */ padding-block: min(13.333px + 3.4722vw, 80px); /* 40 a 768 -> 80 a 1920 */ padding-inline: 11.9444%; /* 229,333 de 1920 */ } .legal__titulo { font-size: min(23.333px + 0.8681vw, 40px); /* 30 a 768 -> 40 a 1920 */ line-height: 1.2; letter-spacing: 0.02em; /* 0,8 sobre 40 */ } .legal__seccion { font-size: min(18.667px + 0.1736vw, 22px); /* 20 a 768 -> 22 a 1920 */ } /* EL CUERPO NO INTERPOLA Y ES LA UNICA EXCEPCION: va de 15 a 16, o sea un pixel en todo el recorrido. Una recta para ganar un pixel es una regla que hay que leer y entender cada vez que alguien abra esta hoja, a cambio de una diferencia que no se ve. Salta a 16/26 en el corte. */ .legal__parrafo, .legal__lista, .legal__datos, .legal__otros { font-size: 16px; line-height: 26px; } .legal__lista li + li { margin-top: 26px; } }