es el unico article y la seccion de cierre es la unica section, asi que las dos eran "la ultima" y el filo aparecia tambien en el medio de la pagina, cortando el texto. */ body.lp > *:has(+ .lp-pie) { border-bottom-left-radius: var(--filo); border-bottom-right-radius: var(--filo); box-shadow: 0 24px 50px rgba(0, 0, 0, .55); } /* ---- y se afina mientras se levanta ---- */ /* La ultima hoja no es papel: es una filmina, que es lo que el producto se llama. Mientras sube y va descubriendo el pie, el borde de abajo se afina y la pintura empieza a pasar por detras, apenas: no se ve la foto, se ve que ALGO hay atras. Es el gesto de levantar una lamina contra la luz, y es lo ultimo que hace la pagina antes de terminar. Tres cosas lo mantienen sutil y legible: - Va de abajo hacia arriba. Lo transparente es el filo, que es lo que se esta levantando; a media hoja ya esta opaca de nuevo, asi que ni el texto del cierre ni el muneco quedan nunca sobre la pintura. - Lo maneja --vela, que landing.js sube de 0 a 1 a medida que el pie se descubre. Con la hoja abajo del todo la lamina es opaca como cualquier otra seccion: el efecto no existe hasta que hay algo que mirar detras. - El filo se desenfoca. Sin eso, por la parte de arriba del pie pasan los enlaces de las columnas y se leian en fantasma a traves de la hoja, que se ve como un error de pintado. Desenfocado, lo que pasa son manchas -el cielo, los arboles, el lago- y eso es justo lo que tiene que pasar. Solo con el pie clavado: si no se clava, detras de la hoja no hay pintura sino el negro del lienzo, y afinarla ahi es transparentar la nada. */ body.pie-fijo > *:has(+ .lp-pie) { --hoja: linear-gradient(to top, rgba(var(--tono-papel), calc(1 - var(--vela, 0) * .18)) 0, rgba(var(--tono-papel), calc(1 - var(--vela, 0) * .06)) 120px, rgba(var(--tono-papel), 1) 280px); } /* El desenfoque va en una capa propia y no en la hoja entera: pedirle al navegador el fondo borroso de una seccion de mil pixeles de alto, en cada cuadro del scroll, para usarlo en los ultimos doscientos, es trabajo tirado. Con z-index negativo queda detras del contenido y encima del fondo de la hoja, que es lo unico que necesita: lo que desenfoca es lo que hay mas abajo, que es el pie. Y la mascara lo apaga hacia arriba, para que el borde de la capa no se marque como una linea cruzando la seccion. La capa existe solo mientras la hoja se esta levantando -la clase la pone landing.js junto con --vela-: un desenfoque de fondo puesto todo el tiempo le pide al navegador que lo recalcule en cada cuadro de toda la pagina, tambien las ocho secciones en las que no se ve. */ body.pie-fijo.levantando > *:has(+ .lp-pie)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 280px; z-index: -1; border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; opacity: var(--vela, 0); -webkit-backdrop-filter: blur(40px); backdrop-filter: blur(40px); -webkit-mask-image: linear-gradient(to top, #000 40%, transparent); mask-image: linear-gradient(to top, #000 40%, transparent); pointer-events: none; } /* El pie se mete por debajo de la ultima seccion, justo lo que mide el radio: sin eso las puntas redondeadas recortan contra el fondo de la pagina, que es del mismo negro que la seccion, y no se ve ningun filo. Con el pie clavado no hace nada, porque un elemento fijo se ubica por su bottom. Y el aire de arriba es casi el doble que antes. El pie es el unico papel blanco del sitio; si el primer titulo aparece apenas cruza el filo, se lee como la seccion que sigue y no como el final de la pagina. */ .lp-pie { margin-top: calc(var(--filo) * -1); padding: min(clamp(84px, 10vw, 140px), 14vh) 0 0; border-top: 1px solid var(--linea); } .lp-pie .cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 30px; max-width: var(--ancho); margin: 0 auto; padding: 0 var(--gutter); } .lp-pie h4 { font-family: var(--serif); font-size: 21px; font-weight: 500; margin-bottom: 18px; } .lp-pie ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 11px; } .lp-pie li a { color: var(--tinta-2); font-size: 15px; } .lp-pie li a:hover { color: var(--tinta); } /* Las dos redes, abajo de los legales. Son pastillas redondas del tamaño de un dedo: el pie es lo ultimo de la pagina y en el telefono es donde uno llega con el pulgar. El fondo del hover sale de --linea-fina y no de --glass-hi porque aca el papel es blanco, y el vidrio del resto del sitio -que es luz sobre negro- sobre blanco no se ve. */ .lp-pie .redes { display: flex; gap: 10px; margin-top: 22px; } .lp-pie .redes a { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--linea); border-radius: 999px; color: var(--tinta-2); transition: color .2s ease, background .2s ease, border-color .2s ease, transform .35s var(--resorte); } .lp-pie .redes a:hover { color: var(--tinta); background: var(--linea-fina); border-color: var(--tinta-3); transform: translateY(-2px); } /* La X es una marca y va rellena; el sobre es un icono nuestro y va de linea, con el mismo grosor que los demas. Por eso el sobre va un pelin mas grande: a igual caja, un dibujo de linea pesa menos que uno macizo. */ .lp-pie .red { display: block; } .lp-pie .red-x { width: 15px; height: 15px; fill: currentColor; stroke: none; } .lp-pie .red-sobre { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } /* La marca grande del final. Ocupa el ancho de la caja, con la F pegada a la palabra como en la portada: es la firma del sitio, y una firma se lee de un golpe o no se lee. El tamano sale de un vw y no de un px fijo, asi que crece con la pagina y siempre termina a la misma distancia del borde. El tope en px es para que en una pantalla muy ancha deje de crecer -a partir de cierto punto ya no se lee como palabra sino como textura- y el piso, para que en un telefono siga siendo un remate y no un titulo mas. */ .pie-marca { container-type: inline-size; max-width: var(--ancho); margin: min(clamp(30px, 5vw, 64px), 6vh) auto 0; padding: 0 var(--gutter); color: var(--tinta); overflow: hidden; user-select: none; } /* El tamano se mide contra la caja y no contra la ventana: con un vw la marca llenaba el ancho en una pantalla y le sobraban diez centimetros en la otra, porque la caja deja de crecer en 1220 y la ventana no. Con cqw la palabra termina SIEMPRE donde termina la columna, en el telefono y en el monitor. El 34.8 sale de medirla: la palabra sola ocupa 2.87 veces el cuerpo. */ /* El cuerpo sale de la variable y no del cqw a secas por una razon sola: si el pie no entra en la ventana deja de clavarse, y entonces la pagina termina scrolleando por encima de su propio filo redondeado. Cuando pasa eso, landing.js escribe --firma con lo justo para que el pie entre. Mientras haya lugar -que es casi siempre- la variable no existe y la palabra sigue terminando exactamente donde termina la columna. */ /* Y el eje optico va clavado. Merriweather trae uno, y el navegador lo mueve solo: por debajo de 144 le ensancha la letra para que se lea de chica. En el monitor la palabra pide 144 y mide los 2.87 cuerpos de siempre; en el telefono el cuerpo cae a 116 y la misma palabra pasaba a medir 3, o sea un 4% mas de ancho del que hay, y el overflow del pie le cortaba la "a". Con el eje quieto la proporcion es una sola en las dos pantallas, que es justo lo que el 34.8 da por sentado. El peso va escrito al lado porque esta linea reemplaza los ejes por los de la fuente y si no se lleva puesto el 500. */ .pie-marca-linea { display: inline-block; font-family: var(--serif); font-weight: 500; font-variation-settings: "opsz" 144, "wght" 500; font-size: var(--firma, 34.8cqw); line-height: .82; letter-spacing: -.045em; white-space: nowrap; } /* ---- el cursor de la marca ---- */ /* La palabra grande no es un remate nada mas: es el camino de vuelta al inicio. Para que se lea como algo en lo que se puede hacer clic sin ponerle una caja ni un subrayado -que a este cuerpo serian una linea de dos centimetros cruzando el pie- lo que cambia es el CURSOR: sobre la marca la flecha del sistema se apaga y en su lugar aparece la misma flecha, pero hecha de vidrio ahumado y del tamano de un objeto. El vidrio va escrito aca y no con los tokens del visor: los de la app estan hechos para el fondo negro y esto vive en la unica isla blanca del sitio. Y es vidrio OSCURO sobre papel blanco, asi que el problema es al reves del de la app: lo que hay que resolver es el tramo en que la flecha pasa por encima de las letras negras de la marca, donde el ahumado se funde con el fondo. Lo resuelven el filo de luz del contorno y la segunda sombra, que es clara: ahi la pieza deja de ser una mancha y pasa a ser un contorno, que es exactamente lo que le pasa a un vidrio oscuro apoyado sobre algo oscuro. */ /* Sin puntero fino no hay hover, asi que no hay nada que reemplazar y la flecha del sistema se queda. Y con reduced-motion tampoco: una pieza que persigue al cursor es justo el movimiento que nadie pidio. El enlace funciona igual en los tres casos. */ @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) { .pie-marca-linea { cursor: none; } } .pie-marca-linea:focus-visible { outline: 2px solid var(--tinta); outline-offset: 10px; border-radius: 6px; } /* Son dos cajas y no una porque son dos movimientos que no se pueden pisar: la de afuera la escribe el JS en cada cuadro para seguir al puntero -sin transicion, la suavidad la pone el propio bucle- y la de adentro es la que crece y se enciende al entrar, con su transicion de siempre. */ .marca-lente { position: fixed; top: 0; left: 0; z-index: 70; /* Es un dibujo que sigue al puntero: el que recibe el clic es el enlace de abajo, asi que no se toca. */ pointer-events: none; will-change: transform; } .lente-flecha { position: absolute; /* La punta del dibujo no cae en la esquina del viewBox: la union redonda le come un par de unidades en diagonal. Y es la PUNTA, no la esquina, la que tiene que quedar sobre el puntero -un cursor que apunta dos pixeles al costado de donde uno cree se nota-, asi que la caja se corre lo que la punta se metio. */ left: -2.6px; top: -.5px; width: 58px; height: auto; /* Nace y crece desde la punta, por lo mismo: con el origen en el medio la pieza salia de abajo a la derecha del puntero y volvia, que se lee como algo que se cayo y se acomodo, no como algo que aparece donde esta la mano. */ transform-origin: 2.6px .5px; /* Una sola sombra, y oscura. Antes habia ademas un pelo de luz pegado al filo: con el pie de papel blanco servia para el tramo en que la flecha cruzaba las letras negras de la marca, donde la sombra oscura no existe y la pieza se quedaba sin borde de un lado. Sobre la foto ese pelo dejo de ser un pelo: contra un fondo oscuro cualquier luz se ve, y lo que se leia alrededor del vidrio era un halo blanco difuso, como si la flecha estuviera encendida. El borde ya lo pone el filo del dibujo, que es medio punto de luz parejo y va adentro de la pieza, no alrededor. */ filter: drop-shadow(0 14px 24px rgba(0, 0, 0, .5)); opacity: 0; transform: scale(.55); transition: opacity .24s var(--ease), transform .42s var(--ease); } .marca-lente.viva .lente-flecha { opacity: 1; transform: scale(1); } /* Mientras el boton esta apretado la pieza se hunde un poco: es la unica respuesta al clic que hay, porque la pagina se va enseguida. */ .marca-lente.apretada .lente-flecha { transform: scale(.9); } /* El trazo grueso es el que redondea: la silueta se dibuja en punta, engorda pareja de los dos lados y las esquinas salen redondas sin dibujarlas. Si se cambia el grosor cambian el tamano Y el redondeo, que van juntos. */ .lente-flecha .cur-cara, .lente-flecha .cur-canto, .lente-flecha .cur-filo { stroke-linejoin: round; stroke-linecap: round; } .lente-flecha .cur-cara { stroke-width: 11; fill: url(#cur-g-cara); stroke: url(#cur-g-cara); } .lente-flecha .cur-canto { stroke-width: 11; fill: url(#cur-g-canto); stroke: url(#cur-g-canto); } /* El filo va DEBAJO de la cara y un pelo mas gordo: lo que se ve de el es el sobrante, medio punto de luz parejo alrededor de toda la pieza. Dibujado encima, sobre la misma silueta, caeria en el MEDIO del trazo y no en el borde, que es donde esta el filo de un material. */ .lente-flecha .cur-filo { stroke-width: 12.4; fill: url(#cur-g-filo); stroke: url(#cur-g-filo); } /* El ahumado nunca llega a opaco: por debajo tienen que verse el papel y las letras. Mas cerrado en la punta -la parte angosta, donde el material se amontona- y mas abierto en el cuerpo. */ .lente-flecha .cur-s-cara-1 { stop-color: #34343c; stop-opacity: .84; } .lente-flecha .cur-s-cara-2 { stop-color: #121215; stop-opacity: .74; } .lente-flecha .cur-s-cara-3 { stop-color: #24242b; stop-opacity: .88; } /* El canto es el corte del material: mas macizo que la cara, porque es espesor y no superficie. */ .lente-flecha .cur-s-canto-1 { stop-color: #17171b; stop-opacity: .96; } .lente-flecha .cur-s-canto-2 { stop-color: #08080a; stop-opacity: .86; } /* Y el filo es luz, no color: entra por arriba a la izquierda como en todo el sitio y se apaga hacia abajo. */ .lente-flecha .cur-s-filo-1 { stop-color: #fff; stop-opacity: .95; } .lente-flecha .cur-s-filo-2 { stop-color: #fff; stop-opacity: .56; } .lente-flecha .cur-s-filo-3 { stop-color: #fff; stop-opacity: .3; } /* La luz del canto izquierdo: la linea donde se corta el material, no un brillo. */ .lente-flecha .cur-luz { fill: none; stroke: #fff; stroke-opacity: .7; stroke-width: 2.4; stroke-linecap: round; } /* La flecha dice que se puede apretar; el rotulo dice a donde va. Llega un pelo despues que ella y desde abajo, asi que se lee como algo que la flecha trae y no como una segunda pieza que aparece al mismo tiempo. */ .lente-rotulo { position: absolute; left: 52px; top: 64px; padding: 5px 11px; border-radius: 999px; background: rgba(17, 17, 19, .84); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 8px 18px rgba(17, 17, 19, .3); color: #f5f5f7; font-size: 12.5px; font-weight: 550; letter-spacing: -.01em; line-height: 1; white-space: nowrap; transform-origin: 0 0; opacity: 0; transform: translateY(6px) scale(.92); transition: opacity .24s .05s var(--ease), transform .42s .05s var(--ease); } .marca-lente.viva .lente-rotulo { opacity: 1; transform: none; } /* La F no va abajo con la palabra grande: ahi eran dos marcas seguidas y se leian como una sola pieza larga. Va arriba, chica, pegada al nombre de la columna, que es el unico lugar del pie donde la marca se presenta. */ /* En el pie la marca va sola, sin el nombre al lado ni enlaces debajo: el logo ya dice de quien es la pagina y repetirlo escrito no agrega nada. Alineada arriba con los titulos de las otras columnas, por eso el alto es el de una linea de h4 y no el del dibujo. */ /* El enlace envuelve al dibujo y nada mas: en bloque tomaria el ancho entero de la columna y se encenderia con el puntero a dos palmos de la F. */ .lp-pie .logo-pie { display: inline-block; } .lp-pie .logo-pie:hover .marca-pie { opacity: 1; } .lp-pie .marca-pie { display: block; /* El 1.16 de proporcion es el del viewBox del simbolo (116x100): si el alto no lo respeta, el dibujo se estira. */ width: 56px; height: 48px; /* El mismo gris que la marca del nav, y por el mismo camino: opacidad sobre la tinta del tema en vez de un gris escrito a mano, asi lo decide el papel y no queda un color suelto que no sigue al modo claro/oscuro. Sobre la foto va bastante mas encendida que cuando el pie era blanco. No es un cambio de criterio: es el mismo gris. Una tinta negra al 12% sobre papel blanco se ve; una tinta blanca al 12% sobre un paisaje que ya tiene nubes y cielo adentro no llega a despegarse del fondo. */ color: var(--tinta); opacity: .3; transition: opacity .2s ease; } /* Va debajo del logo, en la primera columna: alineado a la izquierda como el resto de las columnas. Antes vivia en la ultima linea del pie, empujado a la derecha, y de ahi le quedaba el margin-left auto. */ .lp-pie .copy { margin: 16px 0 0; color: var(--tinta-3); font-size: 14px; /* Las tres lineas van con el mismo aire entre si; sin esto la del medio se abre sola, porque la foto mide mas que la letra. */ line-height: 2; } /* La firma de quien lo hizo, con la cara al lado del arroba. En un sitio sin una sola foto es lo unico que dice que atras hay una persona y no una empresa, y por eso va aca y no en una pagina de "sobre mi" que nadie abre. El enlace se lleva la foto adentro: la cara y el nombre son una sola cosa para el que hace clic, y para el lector de pantalla tambien (la foto va con alt vacio, el nombre ya esta escrito al lado). */ .lp-pie .autor { display: inline-flex; align-items: center; gap: 8px; color: var(--tinta-3); vertical-align: -6px; transition: color .2s ease; } .lp-pie .autor:hover { color: var(--tinta); } /* Redonda y del alto de una linea de texto: es una firma al margen, no una foto de perfil. Mas grande empieza a competir con la marca de arriba, que es lo que tiene que mandar en esa columna. */ .lp-pie .foto-autor { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; } /* ================================================================== blog === */ /* La caja va de borde a borde y lo que centra la columna es el padding, no un max-width. No es un capricho de escritura: estas cajas son hijas directas del , o sea que SON la hoja que se corre por encima del pie, y el fondo opaco que las tapa mide lo que mide la caja. Centradas con max-width, el papel blanco del pie asomaba por los dos costados de la columna en cuanto la ventana era mas ancha que el texto. La medida de adentro queda igual: el padding se abre hasta el borde y despues suma el gutter de siempre. */ .cabecera-pagina { padding: clamp(50px, 7vw, 96px) calc(max(0px, (100% - var(--ancho)) / 2) + var(--gutter)) 0; } .cabecera-pagina .entrada, .franja .entrada { max-width: 620px; margin-top: 22px; color: var(--tinta-2); font-size: 18px; line-height: 1.5; } /* El blog entra por el lema y por nada mas: es la unica pagina del sitio que arriba no tiene que explicar de que se trata, asi que la frase se planta sola en el medio, como la tapa de un cuaderno. Centrado es una decision de esta pagina y por eso va en una clase aparte: el resto de las cabeceras arrancan contra el margen izquierdo, que es donde empieza el texto que viene despues. */ .cabecera-pagina.centrada { text-align: center; } /* Del tamano de cualquier otro h1 del sitio: los 176px de antes estaban medidos para una palabra sola, y una frase a ese cuerpo se lee como un cartel y no como un titulo. No hay font-size aca: el que manda es el de .display, que es el que tienen la portada, novedades y las notas. Lo que si es de esta pagina son los dos renglones. A este cuerpo la frase entra entera en una linea que cruza la pantalla de lado a lado, y una linea asi de larga se lee como un renglon de texto y no como una tapa; partida al medio y centrada vuelve a ser un titulo. El tope va en em y no en pixeles para que lo fije el cuerpo de la letra y no el ancho de la ventana: la frase mide poco menos de 12em en castellano y en ingles, asi que con 8 no le queda mas remedio que bajar, y el pedazo mas largo que puede tocarle a un renglon -"Study has never", 7em- todavia entra sin partirse otra vez. El balance reparte las palabras; el tope las obliga a bajar. Una sola de las dos cosas no alcanza. */ .lp .cabecera-pagina.centrada h1.display { max-width: 8em; margin-inline: auto; text-wrap: balance; } /* La cola de la g necesita que le hagan lugar. Con el interlineado apretado la caja del renglon mide menos que la letra: el trazo baja como un octavo de em por debajo del borde de abajo del titulo, y ahi ya empieza el bloque que sigue, que es opaco -todos los hijos del body lo son, para que no se vea el pie blanco a traves- y viene despues en el marcado. El fondo negro del bloque le pasaba por encima a la cola y la palabra terminaba en un filo recto. Sobre negro no se lee como algo tapado: se lee como una g rota. El relleno va en em y en el titulo, que es quien tiene el tamano que manda: asi el lugar crece con la palabra en cada ancho de ventana. Y solo cuando el titulo esta solo en la cabecera, que es el unico caso en que abajo de el empieza otro bloque; si hay bajada, la cola cae adentro de la misma caja y no la tapa nadie. Diecisiete centesimas y no las trece que pide esta g: la cabecera es la misma para las otras lenguas y para la otra pagina que entra solo con su nombre, y la cola mas larga del serif no es la de la g sino la de la y. Se mide por esa. */ .lp .cabecera-pagina h1.display:last-child { padding-bottom: .17em; } /* El aire contra la cabecera va de padding y no de margen: entre dos hijos del un margen es un hueco sin fondo, y por ese hueco se veia una linea blanca del pie cruzando la pagina de lado a lado. La columna es mas angosta que el resto del sitio: el titulo de una nota va en serif de treinta y pico y a mil doscientos de ancho el renglon se estira tanto que cuesta encontrar donde empieza el que sigue. */ .entradas { display: grid; grid-template-columns: 1fr; padding: clamp(42px, 5vw, 76px) calc(max(0px, (100% - 860px) / 2) + var(--gutter)) 0; } /* Una debajo de la otra y separadas por una raya. Una tarjeta por nota convierte cinco textos en cinco objetos que hay que mirar de a uno; lo que se compara en un blog son los titulos, y para eso tienen que estar en la misma columna, sin marco alrededor y sin nada que los levante del papel. */ .nota { position: relative; /* Dos columnas: a la izquierda la fecha y el titulo, a la derecha la bajada. Una abajo de la otra, la bajada empieza a leerse antes de haber terminado de pensar el titulo, y en una lista lo que se compara son los titulos. Al costado no estorba: el que se detuvo en un titulo la encuentra al lado, y el que no, sigue bajando por una columna de titulos sin nada intercalado. Debajo de los 760 vuelven a apilarse, que es el unico orden que entra. */ display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); column-gap: clamp(28px, 4vw, 56px); align-items: start; padding: 30px 18px 32px; /* El relleno de los costados se compensa con margen negativo: asi el texto sigue empezando donde empieza el titulo de la pagina y lo unico que sobra a los lados es el aire que necesita el fondo del hover para no venir pegado a las palabras. Son 18 y no mas: el gutter mas chico es de 20, y pasarse saca barra horizontal en el telefono. */ margin-inline: -18px; border-radius: 12px; transition: background-color .2s ease; } /* La raya que separa no puede ser un borde del bloque: un borde sigue el radio y se curvaba en las dos puntas, que es justo lo que no tiene que hacer una linea que separa dos filas. Va de pseudoelemento, recta y de punta a punta, y el radio queda solo para el fondo que se enciende al pasar. Absoluto, asi que no entra como item del flex de arriba. */ .nota::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--linea-fina); } /* La primera no lleva raya: la cabecera ya termino arriba y una raya suelta ahi se lee como el borde de una caja que no existe. */ .nota:first-child::before { content: none; } /* Toda la fila es el enlace, asi que toda la fila se enciende: el fondo sube un punto y deja de ser negro. Es lo unico que pasa -no se levanta, no le aparece un borde- porque lo que hay que decir es "esto se puede clickear", no "esto es una tarjeta". */ .nota:hover { background-color: var(--glass-hi); } .nota .meta { grid-column: 1; display: flex; gap: 10px; color: var(--tinta-3); font-size: 13px; } .nota h3 { grid-column: 1; margin: 13px 0 11px; font-family: var(--serif); font-weight: 500; font-size: clamp(25px, 2.7vw, 34px); letter-spacing: -.02em; line-height: 1.13; } /* En la fila del titulo y no en la de la fecha: arranca donde arranca el titulo. Los 13 son los mismos que el margen de arriba del h3, asi que las dos cajas empiezan a la misma altura y la primera linea de la bajada queda un pelo mas abajo que la mayuscula del titulo, que es donde tiene que quedar. */ .nota p { grid-column: 2; grid-row: 2; margin-top: 13px; max-width: 68ch; color: var(--tinta-2); font-size: 16px; line-height: 1.58; } /* En el telefono no hay dos columnas que valgan: la bajada vuelve abajo del titulo, que es de donde salio. */ @media (max-width: 760px) { .nota { grid-template-columns: 1fr; } .nota p { grid-column: 1; grid-row: auto; margin-top: 0; } } /* -------------------------------------------------------- texto largo ----- */ /* Una nota del blog y los terminos son la misma pagina: una columna angosta. La medida la pone la tipografia, no los pixeles: ~68 caracteres es donde el ojo vuelve al renglon siguiente sin perderse. */ /* De borde a borde y centrada con el padding, por lo mismo que la cabecera del blog: es la hoja que tapa al pie. */ .texto { padding: clamp(44px, 6vw, 84px) calc(max(0px, (100% - 700px) / 2) + var(--gutter)) 100px; } /* La fecha y el tiempo de lectura no van arriba del titulo sino al final de la entrada, justo antes del primer subtitulo. Arriba son lo primero que se lee de la nota, y lo primero que se lee de una nota tiene que ser de que se trata; ahi abajo cierran la apertura y quedan a mano en el momento en que uno decide si sigue o no. El aire de abajo lo pone el margen del

que viene despues, que es mas grande y se traga a este. / .texto .meta { display: flex; gap: 10px; margin: 2.6em 0 0; color: var(--tinta-3); font-size: 14px; } .texto h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(36px, 5vw, 56px); line-height: 1.04; letter-spacing: -.024em; } .texto h2 { margin: 2.1em 0 .6em; font-family: var(--serif); font-weight: 500; font-size: 28px; letter-spacing: -.02em; } .texto h3 { margin: 1.8em 0 .5em; font-size: 18px; } .texto p, .texto li { color: var(--tinta-2); font-size: 17.5px; line-height: 1.68; } .texto p { margin: 1.1em 0; } .texto ul, .texto ol { padding-left: 22px; } .texto li { margin: .55em 0; } .texto a { color: var(--tinta); text-decoration: underline; text-underline-offset: 3px; } .texto hr { margin: 3em 0; border: 0; border-top: 1px solid var(--linea); } .texto .guia { margin: 1.6em 0; padding: 22px 26px; border: 1px solid var(--edge); border-left: 2px solid var(--tinta); border-radius: 0 16px 16px 0; background: var(--lamina); box-shadow: var(--canto); } .texto .guia p { margin: 0; font-size: 16.5px; color: var(--tinta); } .texto code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .9em; } / ============================================================== novedades === / / El changelog usa el mismo armazon que "antes, durante y despues" de la portada: .acompana-grid con el indice pegado a la izquierda y los paneles pasando a la derecha. Son las mismas clases a proposito, asi el indice se enciende solo con el observador que ya vive en landing.js y no hay dos maneras de hacer lo mismo dando vueltas por el sitio. Lo que sigue son las diferencias, que son pocas: el indice lleva dos renglones por entrada y los paneles son lista y no dibujo. El aire de arriba no es el de la franja de la portada -que separa dos secciones- sino el que pide un titulo de display: menos que aquel y bastante mas que un parrafo, porque arriba hay setenta y seis pixeles de serif y pegarle la lista lo deja sin respirar. / .novedades { padding-top: clamp(40px, 5vw, 76px); } / Dos renglones por entrada: la fecha, que es por donde se busca en un changelog, y debajo en chico que clase de cambios trajo esa version. / .novedades .pasos-lista a { padding: 15px 0; line-height: 1.3; } .novedades .pasos-lista .cuando { display: block; font-variant-numeric: tabular-nums; } / El renglon de abajo no se enciende junto con el de arriba: encendido le compite a la fecha, que es lo que se vino a buscar. / .novedades .pasos-lista .tipos { display: block; margin-top: 6px; color: var(--tinta-3); font-size: 13px; font-weight: 400; } / La medida del texto la da el grid, no el panel: la columna de la derecha ya viene angosta por el hueco que deja .acompana-grid. / .version h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(23px, 2.4vw, 30px); line-height: 1.16; letter-spacing: -.02em; } / La fecha adentro del panel es la del telefono: en pantalla ancha la dice el indice, y repetirla dos veces a diez centimetros es ruido. / .version .fecha { display: none; color: var(--tinta-3); font-size: 14px; font-variant-numeric: tabular-nums; } .version .resumen { margin-top: 16px; color: var(--tinta-2); font-size: 17px; line-height: 1.6; } / Un enlace en medio del resumen va subrayado, como los de adentro de un parrafo en el resto del sitio: sin el subrayado queda del mismo color que la frase que lo rodea -body.lp a hereda el color- y no se ve que se puede apretar. Es el mismo trato que reciben el del pie del panel de lo que falta y los de las notas. / .version .resumen a { text-decoration: underline; text-underline-offset: 3px; } .version .resumen a:hover { color: var(--tinta); } / El nombre del grupo pesa lo mismo que el renglon que tiene debajo: no es un titulo que compita con el de la version, es el rotulo de la lista. Y se dice una vez por grupo y no una por linea: entre ocho renglones con una pildora cada uno lo que se lee son las pildoras. / .version h3 { margin-top: 30px; font-size: 16.5px; font-weight: 600; letter-spacing: -.012em; } / Bolitas de las de toda la vida, y en gris para que el punto no pese mas que la palabra que tiene al lado. / .cambios, .pendientes { margin: 12px 0 0; padding-left: 19px; display: grid; gap: 7px; color: var(--tinta-2); font-size: 16px; line-height: 1.6; } .cambios li::marker, .pendientes li::marker { color: var(--tinta-3); } / ------------------------------------------------- la puerta al tablero --- / / Lo que falta ya no se cuenta en esta pagina: esta pagina es lo que paso. Lo que queda es la tarjeta que lleva al tablero, colgando del indice. La que se pega ahora es la columna entera y no la lista: la tarjeta tiene que acompanar igual, y una lista pegajosa con una tarjeta suelta debajo se despega en cuanto se empieza a bajar. Por eso hay un div de mas. / .novedades .indice { position: sticky; top: 40px; align-self: start; } .novedades .indice .pasos-lista { position: static; } / Del tamano de la columna y nada mas: no es una invitacion que compita con el changelog, es la puerta de al lado. El titulo en tinta y el resto apagado, y al pasar por encima se aclaran el borde y el fondo, que es todo lo que pasa: una tarjeta entera que se enciende no necesita ademas una flecha que la senale. El borde de arriba de la lista de versiones ya hace de linea divisoria, asi que la tarjeta no necesita una propia: le alcanza el aire. / .carta-tablero { display: block; margin-top: 24px; padding: 16px 17px; border: 1px solid var(--edge); border-radius: 14px; background: var(--lamina); box-shadow: var(--canto); transition: border-color .25s var(--ease), background .25s var(--ease); } .carta-tablero .titulo { display: block; color: var(--tinta); font-size: 15px; font-weight: 550; } .carta-tablero .detalle { display: block; margin-top: 7px; color: var(--tinta-3); font-size: 13px; line-height: 1.45; } .carta-tablero:hover { border-color: var(--edge-hi); background: var(--lamina-hi); } / ============================================================== que sigue === / / Dos listas, una abajo de la otra: lo que falta, que es lo unico que se puede votar y por eso va primero, y lo que ya salio. Empezo siendo tres columnas al lado -con lo que se esta escribiendo en el medio- y no era como se mira: las tres se leian en paralelo cuando en realidad se recorre una y despues, si queda curiosidad, la otra. Y la del medio no se podia ni votar ni usar. ---- el titulo ---- Va centrado, que en el sitio hacen dos paginas: esta y el blog. Pero NO con la clase .centrada de aquella, que ademas de centrar lo lleva a 176 pixeles: ahi el titulo es una palabra sola y es la tapa del cuaderno. Este son cuatro palabras en dos renglones, y a ese tamano el primero no entra en la pantalla. Asi que de .centrada se toma lo unico que hace falta, que es el eje. El corte de renglon lo trae el texto con un
y no lo decide el ancho: la frase se parte donde se la dice en voz alta, y donde cae eso es cosa de cada idioma. / .cabecera-que-sigue { text-align: center; } / La bajada es la de cualquier pagina del sitio -misma clase, mismo tamano- con lo unico que el centrado le agrega: los margenes al medio. Sin eso la caja de 620 pixeles se queda contra el margen izquierdo y el texto sale centrado ADENTRO de ella, o sea a la izquierda del eje del titulo, que es peor que no centrar nada. / .cabecera-que-sigue .entrada { margin-inline: auto; } .cabecera-que-sigue .entrada a { text-decoration: underline; text-underline-offset: 3px; } .cabecera-que-sigue .entrada a:hover { color: var(--tinta); } / Llega despues del titulo, como la bajada de la portada llega despues del suyo: el orden de entrada es el de la lectura. / .lp .cabecera-que-sigue .entrada { --retraso: .18s; } / ---- el tablero ---- / / El aire contra la cabecera es el de cualquier franja del sitio, sin recortar: lo que hay arriba es otra seccion y no el titulo de esta. Y el titulo centrado lo pide ademas por su cuenta: no comparte margen izquierdo con lo que sigue, asi que lo unico que los ata es el aire que tengan en el medio. Las dos listas se separan bastante mas entre si que las tarjetas de adentro de cada una. Con el mismo hueco, el nombre de la segunda lista se lee como una tarjeta mas grande de la primera. / .tablero { display: grid; gap: clamp(50px, 6vw, 84px); } / El nombre de la lista en serif, como los titulos de panel del resto del sitio. Va solo, sin un renglon debajo que explique la regla: donde hay pulgar se vota y donde hay version salio, asi que el tablero ya lo dice. / .fila > h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(22px, 2.2vw, 29px); letter-spacing: -.02em; line-height: 1.15; } / Las tarjetas se reparten a lo ancho, de a tres por renglon. Una sola columna a lo largo de la pagina son ocho pantallas de telefono en un monitor; y en una columna de un tercio de ancho -que es donde vivian cuando esto eran tres listas al lado- cada frase se partia en cinco renglones. Las tres de un renglon miden lo mismo de alto, que es lo que hace el grid si no se le pide otra cosa: tres tarjetas de altos distintos al lado no se leen como un renglon sino como tres cosas sueltas que casualmente empiezan a la misma altura. / .pedidos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 1.2vw, 14px); } / Y el aire va entre el nombre y su lista, no arriba de la lista: la de lo que falta no tiene nombre -lo dice el titulo de la pagina- y ahi arriba no hay nada de lo que separarse. / .fila > h2 + .pedidos { margin-top: 22px; } / Cada pedido es una tarjeta del mismo vidrio que el resto del sitio, pero mas modesta: sin sombra que la levante, porque diez apiladas en una columna angosta se leen como diez cosas flotando. Le alcanza el canto. / .pedido { padding: 16px 17px; border: 1px solid var(--edge); border-radius: 14px; background: var(--lamina); box-shadow: var(--canto); } / Que es arriba y por que hace falta debajo, en dos elementos y no en una frase con un negrita adelante. Pegados en el mismo parrafo, el titulo terminaba a media linea y la explicacion arrancaba ahi mismo: para saber cuales son los ocho pedidos habia que leer los ocho enteros. Separados, la lista se recorre de un barrido. / .pedido .que { display: block; color: var(--tinta); font-size: 15px; font-weight: 600; line-height: 1.5; } .pedido p { margin-top: 5px; color: var(--tinta-2); font-size: 15px; line-height: 1.55; } / Los dos renglones parejos y no uno largo con una palabra colgando debajo. El navegador reparte las palabras entre las lineas que ya iba a usar -no agrega ninguna-, que es lo mismo que se hace con los titulos de la portada. / .pedido .que, .pedido p { text-wrap: balance; } / ---- el pulgar ---- / / Al costado del texto y no debajo: un boton al pie de cada tarjeta empuja todo lo que sigue por algo que ocupa menos que un renglon. A la derecha, que es donde termina de leerse la tarjeta: primero que es, despues por que hace falta y recien ahi el boton. A la izquierda era lo primero que se veia de cada una, o sea que se pedia decidir antes de haber leido. Y no hay ningun 'order' ni 'row-reverse' que lo corra: el boton esta escrito despues del texto en la plantilla, asi que el orden del teclado es el que se ve. Y al medio de lo alto, no pegado al primer renglon: contra el titulo, el pulgar se lee como parte de el y la tarjeta queda pesada de arriba. Se centra sobre el titulo y la descripcion juntos, asi que sigue quedando al medio el dia que un titulo entre en dos renglones. No se dibuja hasta que landing.js sepa cuantos votos tiene cada cosa: un boton que se puede apretar antes de saber el numero que lleva al lado es un boton que contesta con un numero inventado. Sin JavaScript no hay ningun pulgar, y la pagina se lee entera igual. / .vota .pedido { display: flex; align-items: center; gap: clamp(16px, 1.8vw, 26px); } / Lo que el boton tiene al lado, que son dos cosas -el titulo y la descripcion- y no una: sin esta caja, el pulgar se cuela entre las dos. El min-width es lo que deja que el texto se parta en vez de estirar la tarjeta: un item de flex no baja de su ancho de contenido si no se le dice. / .vota .dice { flex: 1; min-width: 0; } .voto { display: none; flex: none; width: 46px; padding: 8px 0 7px; flex-direction: column; align-items: center; gap: 3px; border: 1px solid var(--edge); border-radius: 11px; background: var(--glass-hi); color: var(--tinta-3); cursor: pointer; transition: color .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease); } .tablero.listo .voto { display: flex; } / El mismo dibujo para las dos formas: hueco cuando no votaste y relleno cuando si. Dos iconos -uno vacio y otro lleno- serian dos dibujos que hay que mantener parecidos a mano. / .voto .glifo { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .voto .cuantos { font-size: 12.5px; font-weight: 550; line-height: 1; font-variant-numeric: tabular-nums; } .voto:hover { color: var(--tinta); border-color: var(--edge-hi); background: var(--glass-hi-2); } .voto[aria-pressed="true"] { color: var(--tinta); border-color: var(--tinta); background: var(--glass-hi-2); } .voto[aria-pressed="true"] .glifo { fill: currentColor; } / Mientras el voto esta viajando el boton no acepta otro clic. Apagarlo del todo seria mentir -el voto ya se esta contando-, asi que solo deja de responder. / .voto.esperando { pointer-events: none; } / El salto de cuando entra el voto. Es corto y no se repite: confirma que el clic llego, que es todo lo que un numero que cambia de uno en uno no alcanza a decir. / .voto.salta { animation: pulgar-salta .34s var(--resorte); } @keyframes pulgar-salta { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } } / ---- lo que ya salio ---- / / Estas tarjetas no son de vidrio: son el papel, negro puro, con el borde y nada mas. Lo que ya salio no hay que decidirlo, y con el mismo relleno que las de arriba las trece pesaban lo mismo en la pantalla: la lista larga con los ocho pulgares perdia contra la de abajo, que es la que no pide nada. Vacias por dentro, se leen como lo que son -el respaldo de que esto se cumple- y la mano va sola a las de arriba. Se le saca tambien el canto, que es el filo blanco de arriba: eso es lo que levanta una lamina del papel, y estas estan apoyadas. El borde se queda, porque sin el la tarjeta desaparece y las cinco se leen como una lista suelta de parrafos. / .hecho .pedido { background: var(--papel); box-shadow: none; } / Con la version en que salio y el enlace al renglon de Novedades que lo cuenta. Sin eso, esta lista es una de promesas cumplidas sin manera de comprobarlas; con eso, cada una termina en el changelog. Va arriba del titulo y contra el margen izquierdo: es un rotulo, y un rotulo se lee antes de lo que rotula. Debajo de la descripcion le sumaba un tercer renglon a cada tarjeta para decir cuatro caracteres. / .salio { display: inline-block; margin-bottom: 9px; padding: 4px 11px; border: 1px solid var(--edge); border-radius: 999px; color: var(--tinta-3); font-size: 12px; font-variant-numeric: tabular-nums; transition: color .2s var(--ease), border-color .2s var(--ease); } .salio:hover { color: var(--tinta); border-color: var(--edge-hi); } / =============================================================== descarga === / / La pagina del boton. Es la unica del sitio que no tiene nada que contar: el que llega ya decidio, asi que lo unico que se le debe es el archivo y la frase que evita el error de siempre -abrir la app desde el DMG montado, que en macOS deja la copia en un disco que despues se desmonta-. Todo va centrado y en una sola columna. El resto del sitio arranca contra el margen izquierdo porque ahi empieza el texto que viene despues; aca no viene nada despues, y una columna sola centrada no tiene de donde colgar salvo del medio de la pantalla. / .descarga .ancho { display: grid; justify-items: center; text-align: center; } / El titulo no es el mas grande del sitio -ese es el de la portada- pero si entra solo: no hay bajada arriba ni dibujo al lado, asi que se puede plantar en dos renglones y quedarse ahi. El corte no va a mano como el de la portada: aca la frase cambia de largo con el idioma -"Descarga Filmina para Mac", "Download Filmina for Mac"- y un
escrito en la plantilla parte bien en uno y mal en el otro. Lo reparte el navegador, que es lo que hace balance: dos renglones parejos en vez de uno lleno y "Mac" solo abajo. / .lp .descarga h1.display { font-size: clamp(40px, 6.4vw, 82px); line-height: 1.02; max-width: 15ch; text-wrap: balance; } / La manzana va ADENTRO del titulo, del tamano de la letra y con su mismo color: no es un icono al lado de una palabra, es parte de "para Mac". Va con un pelo de aire a la izquierda y ninguno a la derecha, que es como se escribe la marca de Apple pegada al nombre del sistema. / .descarga .glifo-manzana { width: .8em; height: .8em; margin: 0 .04em 0 .1em; fill: currentColor; stroke: none; vertical-align: -.02em; } .descarga .instruccion { margin-top: 26px; max-width: 46ch; color: var(--tinta-2); font-size: 18px; line-height: 1.55; } .descarga .instruccion b { color: var(--tinta); font-weight: 600; } / ---- la tarjeta del archivo ---- / / La misma lamina de vidrio que las tarjetas del resto del sitio, pero mas ancha de aire: adentro hay un icono, tres renglones y un boton, y lo que hace que se lea como un archivo y no como una ficha mas es el hueco que tiene alrededor. / .caja-descarga { margin-top: 46px; display: grid; justify-items: center; width: min(100%, 380px); padding: 40px 32px 34px; border-radius: 26px; background: var(--lamina); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid var(--edge); box-shadow: var(--sombra-lg), var(--canto); } / El icono de la app, que es el de macOS: el cuadrado redondeado del sistema -22 por ciento del lado, que es lo que da el squircle a esta medida- con la marca adentro, centrada y del ancho justo, que la F de Filmina ya trae su propio aire en el dibujo. El fondo es negro absoluto, el mismo de la pagina y sin una pelicula que lo levante: un icono de macOS es una PIEZA opaca, y lo que dice que ademas es de vidrio no es el relleno sino lo que le pasa por encima. Dos cosas, las dos moviendose despacio: una luz que va y viene por debajo y un brillo que recorre el canto. Quieto, un cuadrado negro con un borde fino es una tarjeta; lo que lo vuelve vidrio es que la luz no se queda donde esta. NO lleva backdrop-filter aunque sea vidrio, por lo mismo que el panel del selector de idioma: la tarjeta que lo contiene ya tiene uno, y un backdrop-filter adentro de otro toma su fondo del de afuera y el navegador termina pintando un rectangulo negro. Con el fondo opaco, ademas, no habria nada que desenfocar. / .icono-app { position: relative; display: grid; place-items: center; width: 108px; height: 108px; border-radius: 24px; background: var(--papel); color: var(--tinta); box-shadow: var(--sombra-lg); overflow: hidden; } / La luz de abajo. Es una mancha blanda mas grande que el icono que se pasea por adentro: en ningun momento se la ve entera ni se le ve un borde, y lo unico que se percibe es que el negro no es parejo y que la parte clara se corre. Va debilisima a proposito -un catorce por ciento en el centro y nada en los bordes- porque el pedido es que el fondo SEA negro; esto no lo aclara, lo hace profundo. El recorrido vuelve exactamente a donde empezo, asi que el ciclo cierra sin salto y no hace falta alternate, que va y viene por el mismo camino y se le nota el ida y vuelta. / .icono-app::before { content: ""; position: absolute; inset: -45%; background: radial-gradient(closest-side, rgba(255, 255, 255, .14), rgba(255, 255, 255, .04) 52%, transparent 74%); animation: luz-icono 15s ease-in-out infinite; pointer-events: none; } @keyframes luz-icono { 0% { transform: translate(-13%, -11%) scale(1); } 33% { transform: translate(11%, -6%) scale(1.14); } 66% { transform: translate(6%, 12%) scale(1.06); } 100% { transform: translate(-13%, -11%) scale(1); } } / El canto. Es un aro de un pixel hecho de dos capas: abajo el borde de siempre, parejo, y encima un arco de luz que da la vuelta. El arco es corto -la sexta parte del perimetro- y con los extremos desvanecidos, para que se lea como el reflejo de una fuente de luz pasando por el filo y no como algo girando adentro del icono. El aro sale de enmascarar un relleno con su propio padding: la mascara pinta dos veces la caja, una hasta el borde y otra hasta el content-box, y se queda con la diferencia. Es la unica forma de tener un borde con degrade conico que siga el radio de las esquinas; con border-image no se puede. Lo que se anima es el angulo del conico y no una rotacion: el icono es un cuadrado, asi que girarlo con transform le giraria tambien las esquinas y el aro se saldria del filo cuatro veces por vuelta. Por eso --giro se registra con @property, que es lo que hace que un angulo se pueda interpolar. Donde no este soportado el angulo se queda en cero: el aro entonces no gira, pero el borde y su brillo en la esquina de arriba siguen ahi. / @property --giro { syntax: ""; inherits: false; initial-value: 0deg; } .icono-app::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: conic-gradient(from var(--giro), transparent 0 56%, rgba(255, 255, 255, .42) 70%, rgba(255, 255, 255, .92) 75%, rgba(255, 255, 255, .42) 80%, transparent 94%), linear-gradient(var(--edge-hi), var(--edge-hi)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: giro-canto 11s linear infinite; pointer-events: none; } @keyframes giro-canto { to { --giro: 360deg; } } / Por encima de la luz: si la mancha le pasa por arriba, la F se ensucia justo cuando el brillo esta mas fuerte. / .icono-app .marca-f { position: relative; width: 52px; height: 45px; } / Con reduced-motion el icono no se apaga, se queda quieto: la luz se detiene donde arranca y el arco del canto, en la esquina de arriba a la izquierda, que es de donde viene la luz en toda la interfaz. Sigue siendo vidrio, pero fotografiado. / @media (prefers-reduced-motion: reduce) { .icono-app::before, .icono-app::after { animation: none; } } .caja-descarga .nombre-app { margin-top: 22px; font-family: var(--serif); font-weight: 500; font-size: 26px; letter-spacing: -.02em; } / Los dos datos del archivo. El de arriba es el que puede impedir la descarga -si el Mac no llega, no hay nada que hacer- y por eso va primero y con la tinta del texto; el de abajo es de quien ya se decidio y quiere saber que esta bajando. El renglon de abajo no se llama .archivo aunque sea lo que es: ese nombre ya es el del PDF que se arrastra en la demo de la portada, y ese si esta suelto -position absolute y una celda del grid-, asi que le caia encima. / .caja-descarga .pide { margin-top: 8px; color: var(--tinta-2); font-size: 15px; } .caja-descarga .linea-archivo { margin-top: 5px; color: var(--tinta-3); font-size: 13.5px; font-variant-numeric: tabular-nums; } .caja-descarga .linea-archivo a { text-decoration: underline; text-underline-offset: 3px; } .caja-descarga .linea-archivo a:hover { color: var(--tinta); } / La flecha que baja, en lugar de la manzana que llevan los botones de las otras paginas. Alla la manzana dice PARA QUE sistema es, que es lo que hace falta saber antes de entrar; aca eso ya lo dijo el titulo dos renglones arriba y la tarjeta otra vez, y lo que queda por decir es que apretar trae un archivo. Es dibujo de linea y no silueta rellena, asi que hay que darle vuelta el fill y el stroke que traen los glifos del boton, que estan escritos para la manzana. / .lp .btn .glifo.bajar { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .caja-descarga .btn { margin-top: 26px; } / ---- cuando la pagina se abre en un telefono ---- / / Lo que la pagina entrega es un DMG, y un DMG en un telefono no es nada: ni se abre, ni se guarda en ningun lado util. Asi que ahi el boton no se muestra "deshabilitado" -un boton apagado sigue pareciendo la accion de la pagina, y uno se queda apretandolo- sino que se va, y en su lugar queda dicho lo unico que hay para hacer: volver a esta direccion desde una Mac. Quien decide no es el ancho de la pantalla sino el aparato, y por eso esto no es un @media: una Mac con la ventana angosta sigue pudiendo bajar el archivo, y una tableta ancha sigue sin poder. El data-aparato lo escribe el script del antes de pintar. Si ese script no corre, nada de esto se activa y queda el boton, que es el estado por defecto del marcado. / html[data-aparato="telefono"] .descarga .solo-mac { display: none; } .desde-la-mac { display: none; } html[data-aparato="telefono"] .desde-la-mac { display: block; margin-top: 24px; width: 100%; padding: 18px 16px 16px; border-radius: 18px; / Punteado y no macizo: el borde entero es el de una tarjeta, y esto no es una tarjeta mas adentro de la tarjeta, es un hueco donde iba el boton. / border: 1px dashed var(--edge-hi); background: var(--glass-hi-2); } / El renglon que reemplaza al boton lleva su mismo cuerpo y su mismo peso: es lo que uno viene a leer en ese lugar de la tarjeta. / .desde-la-mac .titular { font-size: 16.5px; font-weight: 550; letter-spacing: -.012em; / En el ancho de la tarjeta la frase entra en dos renglones, y sin esto el segundo es "Mac" solo. Repartida, corta despues de "pagina". / text-wrap: balance; } / La manzana, aca, va separada de la frase y mas grande que la del titulo: adentro del titulo de arriba esta pegada a "Mac" y del cuerpo de la letra porque es parte de la palabra, y aca no es una letra mas sino la marca del sistema al que se manda a alguien, que es lo que hay que reconocer de un golpe antes de leer el renglon. Pasada del cuerpo de la letra, se baja un pelo para que siga apoyada en la misma linea. / .desde-la-mac .glifo-manzana { width: 1.1em; height: 1.1em; margin: 0 .38em 0 0; vertical-align: -.13em; } / La direccion, con la misma tinta y el mismo cuerpo que el renglon del archivo dos lineas mas arriba: los dos son datos del mismo orden y no hay razon para que uno pese mas que el otro. Se puede partir en cualquier lado, que en una pantalla angosta una direccion sin cortes se lleva puesto el ancho de la tarjeta. / .desde-la-mac .direccion { margin-top: 11px; color: var(--tinta-3); font-size: 13.5px; overflow-wrap: anywhere; } / Los dos parrafos del final van mas angostos que la medida comoda de lectura, y cada uno con la suya: debajo de una tarjeta de 380 son un bloque centrado y lo que los hace bloque es que el renglon se corte donde uno lo esperaria, no donde llegue. Las medidas estan elegidas para que el de arriba caiga en tres renglones y el de abajo en dos, EN LOS DOS IDIOMAS: en castellano el primero tiene diez caracteres mas y el segundo once menos, asi que la misma medida para los dos deja uno de los cuatro casos mal. 40 y 32 caen adentro de los cuatro. Van en ch y no en pixeles porque ch es el ancho de la letra: si algun dia el cuerpo cambia, la cuenta de caracteres por renglon -que es lo unico que decide donde corta- se mantiene. / .descarga .primera-vez { margin-top: 40px; max-width: 40ch; color: var(--tinta-2); font-size: 16px; line-height: 1.6; } / El de abajo son una pregunta y una respuesta, y el corte va entre las dos: el
esta escrito en el texto, uno por idioma, igual que el del titulo del cierre. No se puede dejar a la medida porque la pregunta mide distinto en cada lengua -en castellano entran ademas las dos palabras que abren la respuesta, y la direccion queda sola abajo-, y balance tampoco sirve: parte donde las mitades pesan igual, que en ingles cae en medio de la pregunta. / .descarga .ayuda { margin-top: 18px; max-width: 32ch; color: var(--tinta-3); font-size: 14px; line-height: 1.6; } .descarga .ayuda a { text-decoration: underline; text-underline-offset: 3px; } .descarga .ayuda a:hover { color: var(--tinta); } @media (max-width: 620px) { / En el telefono la tarjeta ocupa el ancho entero y se le saca aire de adentro: con el relleno de escritorio el boton queda a media pantalla de su propio titulo. / .caja-descarga { padding: 32px 22px 28px; } .icono-app { width: 92px; height: 92px; border-radius: 21px; } .icono-app .marca-f { width: 44px; height: 38px; } .descarga .instruccion { font-size: 17px; } } / =================================================== arrastrar y soltar ==== / / La demo de la portada: entra un PDF, se suelta, y de ahi sale la tarjeta. Los cuatro pasos son cuatro poses -no hay un solo keyframe-: landing.js cambia el data-paso y el CSS interpola. Asi cada estado se puede mirar quieto, que es lo unico que hace que una animacion de cuatro tiempos se pueda ajustar sin adivinar. El alto lo fija el contenedor y no cambia entre pasos: si la zona y la tarjeta midieran distinto, la seccion entera daria un salto al soltar. / .demo-soltar { position: relative; display: grid; min-height: 310px; align-items: center; } / Los formatos van ARRIBA y la zona abajo, cada uno en su fila; la zona y el resultado comparten la de abajo porque uno reemplaza al otro. El orden de la grilla no es el del marcado a proposito: leido, primero va la zona -que es la accion- y despues la lista de lo que entra, que es la aclaracion. Mirado es al reves: las cuatro hojas de color son lo unico con color de toda la seccion y funcionan como la entrada, y de ahi la vista baja al recuadro donde hay que soltarlas. Que la fila de arriba diga "esto es lo que se puede traer" y la de abajo "traelo aca" es el sentido en que cae el gesto. / .demo-soltar > .formatos { grid-area: 1 / 1; } .demo-soltar > .zona, .demo-soltar > .resultado { grid-area: 2 / 1; } / Los mismos iconos que muestra la app abajo de su zona de arrastre: la hoja con la esquina doblada, del color del programa, con la sigla adentro. Estan dibujados y no son el logo de cada marca; el color es lo que hace que se reconozcan de un vistazo, y es el unico lugar de la pagina que lo tiene. / .formatos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 22px; / Bastante aire, y a proposito: son dos cosas distintas -lo que se puede traer y el lugar donde se suelta-, no un encabezado con su recuadro. Con poco hueco las cuatro hojas se leen como el titulo de la zona y el gesto deja de tener a donde caer. / margin-bottom: clamp(44px, 4.6vw, 66px); } .formatos .formato { width: 52px; height: 65px; display: block; / El giro tiene que ser sobre el centro del icono. En un . Esos no son contenido: SON la hoja. Cada uno pinta el negro de la pagina y esta un escalon arriba del pie, que esta clavado atras, asi que apagarlo para que llegue apaga tambien su negro y por el hueco aparece el paisaje del pie, que es lo unico que hay debajo. Es el mismo agujero que dejaba un margen entre dos hijos del body, pero del alto del bloque entero: en las novedades y en el blog la cabecera arranca transparente y lo primero que se ve de la pagina es la foto del pie. Asi que la hoja se queda encendida y lo que llega es lo que tiene escrito adentro. El gesto es el mismo -misma curva, mismo largo, mismo retraso-, solo que corrido un escalon hacia adentro. / body.lp > [data-revela] { opacity: 1; } body.lp > [data-revela] > { opacity: 0; } body.lp > [data-revela].visible { animation: none; } body.lp > [data-revela].visible > * { opacity: 1; animation: llegar 1.1s var(--ease) var(--retraso, 0s) backwards; } /* Las partes de una seccion desglosada. Las que estan derechas suben un poco al llegar; las que ya vienen torcidas o corridas -el rayo, los papelitos, las fichas- solo se encienden, porque subirlas les pisaria su transform. Cual es cual lo decide landing.js mirando el transform que cada una tiene: escrito a mano en el marcado se desincroniza el dia que algo se tuerza. / .lp [data-parte] { opacity: 0; } .lp [data-parte].visible { opacity: 1; animation: revelar 1.05s var(--ease) var(--retraso, 0s) backwards; } .lp [data-parte="sube"].visible { animation-name: llegar; } / La portada, al cargar. El orden es el de la lectura: la firma de la esquina, el titulo, y de ahi para abajo. La ventana es la unica que no sigue el paso del texto: tarda medio segundo mas, porque es la pieza grande de la pantalla y una pieza grande que llega al ritmo de un renglon se ve apurada. / .lp [data-entra] { animation: llegar 1.05s var(--ease) var(--retraso, 0s) backwards; } .lp-hero .hero-nav { --retraso: .04s; } .lp-hero h1.display { --retraso: .12s; } .lp-hero .bajada { --retraso: .24s; } .lp-hero .onda { --retraso: .32s; } .lp-hero .acciones { --retraso: .4s; } .lp-hero .ventana-mac { --retraso: .2s; animation-duration: 1.5s; } / Y las paginas que arrancan con su nombre -las novedades, el blog-, que es la portada de esas paginas: entran igual, solas y al cargar. El retraso es mas corto que el del titulo de la portada porque aca arriba no hay nada antes, ni firma ni dock propio; es apenas el respiro que hace que la palabra se lea llegando y no puesta. / .lp .cabecera-pagina h1.display { --retraso: .06s; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .lp [data-revela], .lp [data-parte], .lp [data-entra], body.lp > [data-revela] > { opacity: 1; transform: none; transition: none; animation: none; } /* El arrastre queda: lo maneja la mano. Lo que se va es el rebote de la vuelta, que es movimiento que nadie pidio. / .lp .arrastrable { transition: none; } / El boton se sigue encendiendo y levantando; lo que se va es el brillo que cruza, que es lo unico que se mueve solo. / .lp .btn.primario::after { display: none; } .marco { transition: opacity .3s linear; } .archivo, .cursor { display: none; } .zona { display: none; } .resultado { opacity: 1; transform: none; transition: none; } .app-dock .progreso i { animation: none; width: 42%; } } / ------------------------------------------------------------- responsive - / @media (max-width: 1080px) { .lp-nav .links { display: none; } / Apilado, el texto va primero: el titulo es lo que tiene que leerse antes de decidir si vale la pena mirar la app. / / El padding de arriba crece para dejar pasar el encabezado, que apilado queda justo encima del titulo. / .lp-hero { grid-template-columns: 1fr; padding: clamp(80px, 13vw, 104px) var(--gutter) 60px; } .texto-hero { order: -1; max-width: none; } .escenario { margin-left: calc(var(--gutter) -1); margin-right: calc(var(--gutter) * -1); } .duo { grid-template-columns: 1fr; } .acompana-grid { grid-template-columns: 1fr; } .novedades .pasos-lista { display: none; } .novedades .version .fecha { display: block; margin-top: 7px; } .novedades .version .resumen { margin-top: 18px; } /* Apilada, la columna de la izquierda deja de tener a que pegarse: es la primera fila y despues vienen las versiones. La lista de versiones se esconde -es una tira que se corre y con tres entradas no paga el espacio- pero la tarjeta del tablero se queda, que es el unico enlace a esa pagina que hay en el cuerpo del sitio. El aire que tenia contra la lista pasa a estar debajo, que es donde ahora tiene algo pegado. / .novedades .indice { position: static; } .carta-tablero { margin-top: 0; margin-bottom: clamp(30px, 5vw, 46px); } / Las tarjetas pasan de tres por renglon a dos. Tres en media pantalla son tres columnas de una palabra por renglon, y una lista que no se puede leer no ordena nada. Las dos listas ya venian una abajo de la otra en cualquier ancho, asi que de eso no hay nada que cambiar. / .pedidos { grid-template-columns: repeat(2, 1fr); } / Los tres momentos dejan de ser una columna al costado y pasan a ser una tira que se corre. Sin barra: mide 16 pixeles de alto, que es mas que el subrayado que dice cual momento estas leyendo, y cruzarle una barra gris por debajo lo convierte en el borde de una caja. Lo que esta a la derecha se sabe porque el ultimo momento entra cortado, y ademas landing.js corre la tira sola para dejar a la vista el que se esta leyendo. / .pasos-lista { position: static; display: flex; gap: 18px; overflow-x: auto; scrollbar-width: none; } .pasos-lista::-webkit-scrollbar { display: none; } .pasos-lista a { white-space: nowrap; } / El momento que queda a medias contra el borde se apaga en vez de cortarse. Cortado en seco -«la noche ante|»- se lee como un error de layout; apagado se lee como lo que es, que de ese lado hay mas y que hay que correr la tira. El velo tapa la palabra y su subrayado a la vez, porque recorta la tira entera y no el texto. Se enciende de a un lado por vez y solo si de ese lado queda algo: llegando al final, el ultimo momento tiene que poder leerse entero. Cual es cual lo dice landing.js mirando donde esta parada la tira. / .pasos-lista { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--velo-izq), #000 calc(100% - var(--velo-der)), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 var(--velo-izq), #000 calc(100% - var(--velo-der)), transparent 100%); transition: --velo-izq .25s ease, --velo-der .25s ease; } .pasos-lista.hay-izquierda { --velo-izq: 34px; } .pasos-lista.hay-derecha { --velo-der: 34px; } .planes { grid-template-columns: 1fr; } / Apiladas, la solapa cae justo encima de la tarjeta siguiente: el hueco que ocupa se lo pone la tarjeta de la que cuelga, porque la solapa esta fuera del flujo y no puede pedirlo ella. / .plan.elegido { margin-bottom: 22px; } .lp-pie .cols { grid-template-columns: 1fr 1fr; } } @media (max-width: 760px) { / Y en el telefono las tarjetas del tablero van de a una: dos al lado, con el pulgar comiendose lo suyo, dejan la frase en una palabra por renglon. / .pedidos { grid-template-columns: 1fr; } / Los cuatro links no entran al lado de la marca: en el telefono quedan la marca arriba y los links en el pie, que es donde se los busca. / .hero-nav .links { display: none; } / Sin los links en el medio, la marca y el idioma quedaban pegados uno al lado del otro en la esquina izquierda, leyendose como una sola cosa. La banda pasa a ocupar el ancho entero y cada uno se va a su punta: la firma a la izquierda, el idioma a la derecha, que es donde se lo busca en un telefono y donde llega el pulgar. / .hero-nav { left: var(--gutter); right: var(--gutter); } .hero-nav .idiomas { margin-left: auto; } / El titulo respira. El encabezado va absoluto y no empuja nada, asi que el aire entre la marca y la primera linea es este padding y nada mas: con el de antes -el mismo de una pantalla ancha, donde la banda esta mas arriba- el titulo arrancaba a veinte pixeles de la marca y los dos se leian como un bloque. / .lp-hero { padding-top: clamp(124px, 30vw, 152px); } / Los titulos se reparten los renglones. A este ancho una frase de siete palabras entra en dos y media, y la media es una palabra sola colgando abajo -«Mac.», y debajo empieza la frase que sigue-, que en un cuerpo de titulo se lee como un error de corte y no como un renglon. Balanceado, los renglones quedan del mismo largo y ninguna palabra queda sola; la cantidad de renglones es la misma, asi que ninguna seccion cambia de alto. Donde no esta soportado, corta como cortaba. / .lp .display { text-wrap: balance; } .dupla { grid-template-columns: 1fr; gap: 14px; } .tripa { grid-template-columns: 1fr; gap: 26px; } / El numero de version deja de ser una banda al costado y pasa a ser el encabezado de su propio bloque: apilado, una columna de 200px se come medio telefono para decir «1.4». / / La carpeta vive en el aire que le sobra al titulo, y en el telefono no sobra nada: ahi se le montaba encima. / .carpeta, .candado { display: none; } .lp-pie .cols { grid-template-columns: 1fr; } / En una sola columna los enlaces del pie dejan de apuntarse con una flecha y pasan a apuntarse con un pulgar. El renglon media 19 pixeles de alto y el ancho de sus tres palabras: se erraba. Ahora el area es el renglon entero -de punta a punta de la columna- y se lleva puesto el aire que tenia alrededor, que estaba ahi para separar y no para nada mas. El margen negativo devuelve lo que el relleno agrega, asi que el pie se ve exactamente igual; lo unico que cambia es donde hay que dar. / .lp-pie li a { display: block; padding: 7px 0; margin: -7px 0; } / La app se estira a lo alto y el guion pasa abajo: al lado, a este ancho, la diapositiva quedaba ilegible y es justo lo que hay que ver. / .app { aspect-ratio: auto; padding: 16px; } .app-cuerpo { grid-template-columns: 1fr; gap: 18px; height: auto; } .app-guion { gap: 14px; } .app-top { padding-bottom: 14px; font-size: 12px; } / Apilado, el guion se queda sin la lamina al lado que le diga cuanto mide: el flex: 1 no tiene contra que estirarse y la ventana crece hasta el ultimo parrafo. Ahi deja de ser una ventana -se ve el guion entero, con los cinco parrafos apagados- y ademas landing.js corre la pista para centrar el que suena, asi que abajo queda un palmo de nada. Con el alto escrito vuelve a ser lo que es: un recorte por el que pasa el texto. Crece con el ancho, que es lo que crece la lamina de arriba. / .guion-mock { flex: none; height: clamp(210px, 62vw, 300px); font-size: 14.5px; } .app-dock { font-size: 11.5px; margin-top: 14px; } .app-atajos { font-size: 10.5px; } .diapo { font-size: 9px; } } @media (max-width: 620px) { / En un telefono la pastilla no entra con los dos botones: el que se va es el secundario, porque el que importa es el de descargar. / .lp-nav { padding: 6px 6px 6px 14px; gap: 8px; } .lp h1.display { font-size: clamp(34px, 9.4vw, 52px); } .app-atajos { display: none; } / Las escenas de los tres momentos. En el telefono la diapositiva y lo que suena dejan de ir al lado y pasan una debajo de la otra: al lado, con 340 de ancho, la diapositiva quedaba del tamaño de un sello y es justo lo que hay que ver. El encabezado tambien se parte, que es mejor que apretar el nombre del documento hasta los puntos suspensivos. / .esc-cima { flex-wrap: wrap; gap: 10px; } .esc-par { grid-template-columns: 1fr; gap: 16px; } .escena .suena-dice { min-height: 78px; } .mapa { height: 66px; } .reloj-fila { grid-template-columns: 66px 1fr 50px; gap: 10px; } } / =========================================================== comparativas === / / Las paginas de «Filmina vs X». Son el mismo articulo que una nota del blog -misma columna, misma medida, mismo cuerpo- con tres piezas propias: la miga debajo de la apertura, la tabla del medio y el par de tarjetas del veredicto. Nada mas: lo que se viene a leer aca es texto corrido, y una pagina llena de cajas de colores se lee como un folleto, que es exactamente lo que no queremos que parezca una comparativa escrita por una de las dos partes. / / La miga. No es una navegacion de verdad -el sitio tiene dos niveles- sino la linea que dice donde estas parado cuando entras por buscador y no por la portada. Va DEBAJO de la tarjeta que cierra la apertura, no arriba del titulo. Arriba era lo primero que se leia de la pagina, y lo primero tiene que ser de que se trata: quien entra por buscador ya sabe que hizo clic en un resultado, lo que no sabe es si esta en la pagina que buscaba. Abajo la encuentra el que termino la apertura y quiere subir un nivel, que es el unico momento en que una miga sirve para algo. / .texto .miga { display: flex; flex-wrap: wrap; gap: 8px; margin: 1.6em 0 0; color: var(--tinta-3); font-size: 14px; } .lp .texto .miga a { color: var(--tinta-3); text-decoration: none; } .lp .texto .miga a:hover { color: var(--tinta); } / La bajada: el resumen de la comparativa, en el cuerpo con el que empieza una nota. Va mas grande que el texto y mas chica que el titulo, que es lo que la hace leerse como una entrada y no como el primer parrafo. / .texto .bajada-nota { margin: 22px 0 0; color: var(--tinta-2); font-size: 20px; line-height: 1.5; } / La tabla. Es una de verdad y no tres columnas de divs: lo que se compara son filas, y quien lee con lector de pantalla necesita que cada celda sepa a que fila y a que columna pertenece. Sin fondos ni cebra: la unica linea es la de abajo de cada fila, igual que en el resto del texto largo. El scroll horizontal es para el telefono, donde una tabla de tres columnas no entra y encogerla la vuelve ilegible. / .texto .cuadro { margin: 2.2em 0; overflow-x: auto; } .texto .cuadro table { width: 100%; min-width: 540px; border-collapse: collapse; } .texto .cuadro caption { caption-side: bottom; margin-top: 14px; text-align: left; color: var(--tinta-3); font-size: 14px; line-height: 1.5; } .texto .cuadro th, .texto .cuadro td { padding: 15px 18px 15px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linea-fina); color: var(--tinta-2); font-size: 16px; line-height: 1.5; } .texto .cuadro thead th { border-bottom: 1px solid var(--linea); color: var(--tinta); font-size: 14px; font-weight: 550; } .texto .cuadro tbody th { width: 30%; color: var(--tinta); font-weight: 550; } / La columna propia va en tinta plena. No es un subrayado de vendedor: en una tabla de tres columnas hay que poder volver a la nuestra sin releer el encabezado, y el unico recurso que no ensucia es el contraste. / .texto .cuadro td.nuestra { color: var(--tinta); } / El veredicto: dos tarjetas, una por herramienta, con el icono arriba. Son las unicas cajas de toda la pagina, y estan justo donde alguien que bajo leyendo en diagonal necesita una respuesta corta. / .texto .veredicto { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 2.2em 0; } .texto .veredicto .ico { width: 26px; height: 26px; display: block; margin-bottom: 14px; stroke: var(--tinta); fill: none; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; } .texto .veredicto h3 { margin: 0 0 8px; font-size: 16.5px; } .texto .veredicto p { margin: 0; color: var(--tinta-2); font-size: 15.5px; line-height: 1.55; } / La opinion firmada. Es la misma tarjeta que el resto del sitio y no una caja aparte con comillas gigantes: lo que la separa del texto no es el dibujo, es que arriba dice quien habla. La cara va del tamano de dos lineas, que es lo que hace falta para reconocer a alguien y no mas: esto es una opinion dentro de un articulo, no un testimonio de landing. / .texto .opinion { margin: 2.2em 0; } .texto .opinion p { margin: .9em 0 0; color: var(--tinta-2); font-size: 15.5px; line-height: 1.6; } .texto .opinion .opinion-quien { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; } .texto .opinion-foto { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; } .texto .opinion-nombre { color: var(--tinta); font-weight: 550; } .texto .opinion-arroba { color: var(--tinta-3); text-decoration: none; } .texto .opinion-arroba:hover { color: var(--tinta); } / Las otras comparativas, al pie del articulo. Son tarjetas apiladas y no una lista con vinetas: el que llego hasta aca ya termino de leer, y lo que sigue no es un parrafo mas del texto sino una puerta. Una vineta lo devuelve al cuerpo del articulo; una tarjeta se lee como algo aparte y se puede tocar entera, que es lo que en realidad se quiere hacer con ella. Mismo material que las tarjetas del blog -la lamina, el pelo del canto, el levante al pasar por encima-, porque son la misma cosa: una nota que todavia no leiste. Van una abajo de la otra y no en grilla: son tres, tienen una linea de texto cada una, y en dos columnas quedarian anchas y vacias. / .texto .otras { margin: 1.8em 0 0; padding: 0; list-style: none; display: grid; gap: 12px; } / La tarjeta es el
y no el enlace: el texto viene partido en titulo y bajada desde el diccionario, y el enlace es solo el titulo. Lo que se estira despues para que se pueda tocar toda es el enlace, mas abajo. / .texto .otras li { position: relative; display: grid; gap: 5px; margin: 0; padding: 20px 24px 22px; border: 1px solid var(--edge); border-radius: 18px; background: var(--lamina); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: var(--canto); / El fondo no entra en la transicion: un degrade no se interpola en todos lados y quedaba a medio animar. Lo mismo que en las tarjetas del blog. / transition: border-color .2s ease, box-shadow .3s ease, transform .3s cubic-bezier(.22,1.18,.36,1); } .texto .otras li:hover, .texto .otras li:focus-within { background: var(--lamina-hi); border-color: var(--edge-hi); box-shadow: var(--sombra), var(--canto-hi); transform: translateY(-2px); } .texto .otras a { font-family: var(--serif); font-weight: 500; font-size: 20px; letter-spacing: -.015em; line-height: 1.2; / El subrayado es para los enlaces que van DENTRO de un parrafo, donde hay que distinguirlos de la letra de al lado. Aca se toca la tarjeta entera, asi que subrayar el titulo seria decirlo dos veces. / color: var(--tinta); text-decoration: none; } / El area del enlace es la tarjeta entera: el que quiere ir a la otra comparativa apunta a la tarjeta, no a las tres palabras del titulo. Va de pseudo-elemento y no de un alrededor de todo porque el marcado viene armado del diccionario, y ademas asi el texto de la bajada se sigue pudiendo seleccionar. / .texto .otras a::before { content: ''; position: absolute; inset: 0; } .texto .otras span { color: var(--tinta-2); font-size: 15.5px; line-height: 1.5; } @media (max-width: 620px) { .texto .bajada-nota { font-size: 18px; } .texto .veredicto { grid-template-columns: 1fr; } } / ------------------------------------------------------------------ idiomas / / El selector. Es un
, asi que abre y cierra sin JavaScript: lo unico que agrega el script es cerrarlo cuando clickeas afuera. La pastilla es del alto del boton de al lado y no de su color: al lado de "Descargar" tiene que quedar claro cual de los dos es el que importa. Por eso el globo y dos letras, y no el nombre entero del idioma. / / Las preguntas frecuentes tambien son
, y su estilo -la linea abajo y el mas que gira- alcanza a cualquier details de la pagina. Aca no va ninguno de los dos: esto es una pastilla, no un renglon de una lista. / / El reset va con details.idiomas y con :first-of-type escrito: ".lp details:first-of-type" pone una linea arriba y le gana por especificidad a dos clases sueltas, asi que la pastilla aparecia con una raya encima. / .lp details.idiomas, .lp details.idiomas:first-of-type { border: 0; } .lp .idiomas { position: relative; } .lp .idiomas > summary::after { content: none; } .lp .idiomas > summary { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 13px; border-radius: 999px; font-size: 14px; font-weight: 550; letter-spacing: .01em; color: var(--tinta-2); cursor: pointer; list-style: none; transition: background .2s ease, color .2s ease; } .lp .idiomas > summary:hover, .lp .idiomas[open] > summary { color: var(--tinta); background: var(--glass-hi); } .lp .idiomas > summary .glifo { width: 17px; height: 17px; stroke-linecap: round; stroke-linejoin: round; } / El panel. En el dock de abajo abre HACIA ARRIBA, que es de donde hay lugar; en el nav de la portada, que vive arriba de todo, abre hacia abajo. / .lp .idiomas .menu { position: absolute; right: 0; bottom: calc(100% + 10px); z-index: 70; min-width: 232px; display: flex; flex-direction: column; padding: 6px; border-radius: 18px; / Opaco, y SIN backdrop-filter, aunque todo el resto del cromo sea vidrio. El dock ya tiene backdrop-filter, y un backdrop-filter adentro de otro no se puede dibujar: el de adentro toma su fondo del "backdrop root", que es el de afuera, y el navegador termina pintando un rectangulo negro que rompe la pastilla del dock. Se ve igual en Chrome y en Safari. El color se arma apoyando el mismo vidrio sobre el papel de la pagina, asi que queda del tono que tendria si fuera translucido, pero sin serlo: un panel flotante que deja pasar el texto de atras no se lee, y este tiene dos renglones por fila. Y sigue andando en los dos temas sin escribir un color nuevo. / background: linear-gradient(var(--vidrio-papel-op), var(--vidrio-papel-op)), var(--papel); border: 1px solid var(--edge); box-shadow: var(--sombra-lg), var(--canto); } .lp .hero-nav .idiomas .menu { top: calc(100% + 10px); bottom: auto; left: 0; right: auto; } / En el telefono el selector se va al borde derecho de la banda, asi que el panel tiene que colgar de ahi: anclado a la izquierda se le sale de la pantalla por 120 pixeles y el navegador achica la pagina entera para que entre. Va aca y no en el bloque de arriba porque esta linea es la de al lado, y escrita alla la pisa igual. / @media (max-width: 760px) { .lp .hero-nav .idiomas .menu { left: auto; right: 0; } } .lp .idiomas .menu a { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 10px; padding: 9px 12px; border-radius: 13px; color: var(--tinta); transition: background .18s ease; } .lp .idiomas .menu a:hover { background: var(--glass-hi); } .lp .idiomas .menu .nombre { font-size: 15px; font-weight: 550; letter-spacing: -.01em; } / La region, mas apagada que el idioma: "Español" es lo que se elige y "Argentina" es de cual de los dos. / .lp .idiomas .menu .nombre i { font-style: normal; color: var(--tinta-3); font-weight: 450; } .lp .idiomas .menu .glosa { grid-column: 1; font-size: 13px; color: var(--tinta-3); letter-spacing: 0; } / El tilde ocupa su lugar siempre, tambien cuando no se ve: si apareciera y desapareciera, el renglon se correria al pasar de un idioma a otro. / .lp .idiomas .menu .tilde { grid-column: 2; grid-row: 1 / -1; width: 18px; height: 18px; stroke-linecap: round; stroke-linejoin: round; opacity: 0; color: var(--tinta); } .lp .idiomas .menu a[aria-current] .tilde { opacity: 1; } @media (max-width: 620px) { / En el telefono el dock ya viene justo de ancho: queda el globo solo. / .lp .lp-nav .idiomas > summary { padding: 0 11px; } .lp .lp-nav .idiomas > summary span { display: none; } .lp .idiomas .menu { min-width: 208px; } / Y el panel deja de colgar del globo para colgar del dock. Con el globo de percha, el panel -que abre hacia la izquierda- salia por el borde de la pantalla: el globo esta en el medio de la pastilla y atras suyo no hay 208 pixeles. Sacandole el position al details, el que hace de referencia pasa a ser el dock, que esta fijo y centrado, y el panel apoya su costado derecho contra el de la pastilla. En el monitor no cambia nada: ahi la pastilla es ancha y el globo llega con lugar de sobra. / .lp .lp-nav .idiomas { position: static; } } / ================================================================ el pago === La pagina donde se compra. Casi nada de lo que se ve aca es nuevo: la tarjeta es LA MISMA del bloque de precios -clase .plan, con su vidrio, su precio en serif y su lista de tildes- y no una tarjeta parecida. El que llego hasta aca apreto un boton adentro de una de esas tres, y si se dibujaran por separado, el dia que cambie una la otra se queda igual y el camino se rompe justo donde hay que confiar. Lo unico nuevo es el formulario, que en el resto del sitio no existe: el sitio se lee, esta es la unica pagina donde ademas se escribe. ========================================================================= / .lp .pago .ancho { max-width: 520px; } / La marca, sola y arriba. Es la unica salida de la pagina que no es el boton: aca no estan ni el dock ni el pie, asi que sin esto lo unico que queda para volver es la flecha del navegador. / .lp .logo-pago { display: block; width: fit-content; margin: 0 auto 52px; } .lp .logo-pago .marca-f { display: block; width: 44px; height: 38px; color: var(--tinta); } / El titulo es el mas chico de los display del sitio y el unico centrado con algo abajo: lo que sigue es una tarjeta sola, no una pagina, y a cuerpo de portada un titulo de tres palabras sobre una caja de 520 se lee como un cartel. / .lp .pago h1.display { font-size: clamp(28px, 4.6vw, 42px); text-align: center; } .lp .pago .plan { margin-top: 38px; } .lp .pago .plan h2 { font-size: 17px; } / El precio de lista va al lado y no arriba: en la portada el tachado vive en su propio renglon porque comparte lugar con el cartel del descuento y con la solapa del plazo, y aca no hay ni uno ni la otra. / .lp .pago .precio s { margin-left: 10px; color: var(--tinta-3); font-family: inherit; font-size: .46em; text-decoration-thickness: 1px; } / ---- el formulario ---- / / El campo es la pieza mas importante de la pagina, asi que es lo unico que se dibuja hacia adentro: todo el cromo del sitio es vidrio que sobresale del papel, y un vidrio mas, del mismo canto y la misma sombra que la tarjeta que lo contiene, no se leeria como un lugar donde se escribe. Va hundido: el borde entero, sin luz arriba, y el fondo un pelo mas oscuro que la tarjeta. / .lp .pago-forma { display: grid; margin-top: 6px; } .lp .pago-forma label { font-size: 13.5px; font-weight: 550; color: var(--tinta-2); letter-spacing: -.005em; } .lp .pago-forma input { margin-top: 12px; height: 50px; padding: 0 16px; border: 1px solid var(--edge-hi); border-radius: 13px; background: var(--vidrio-papel); color: var(--tinta); font: inherit; font-size: 16px; / 16px clavados y no heredados de un tamano mas chico: abajo de eso, Safari en el telefono hace zoom solo al tocar el campo y deja la pagina corrida. / letter-spacing: -.005em; transition: border-color .2s var(--ease), background .2s var(--ease); } .lp .pago-forma input::placeholder { color: var(--faint); } .lp .pago-forma input:focus { outline: none; border-color: var(--tinta-3); background: var(--vidrio-papel-op); } / Las seis cifras se escriben espaciadas y en cifras de ancho fijo: es un numero que se compara contra un correo abierto al lado, no una palabra. / .lp .pago-forma .pago-cifras { font-variant-numeric: tabular-nums; font-size: 22px; letter-spacing: .34em; text-align: center; } .lp .pago-ayuda, .lp .pago-dicho { margin: 13px 0 0; color: var(--tinta-3); font-size: 13.5px; line-height: 1.5; } .lp .pago-dicho { margin: 0 0 26px; color: var(--tinta-2); font-size: 14.5px; } .lp .pago-dicho b { color: var(--tinta); font-weight: 600; word-break: break-all; } .lp .pago-forma .btn { width: 100%; margin-top: 26px; } / El rechazo. Es el unico rojo del sitio y aparece arriba del campo, pegado a lo que hay que corregir. Lleva fondo -el resto de la pagina no lleva ninguno- porque tiene que encontrarse sin buscarlo al volver de mandar el formulario. / .lp .pago-mal { margin: 0 0 20px; padding: 12px 14px; border: 1px solid var(--peligro-borde); border-radius: 12px; background: var(--peligro-fondo); color: var(--peligro); font-size: 14px; line-height: 1.5; } .lp .pago-mal a { color: inherit; text-decoration: underline; text-underline-offset: 3px; } / Las dos salidas del que se quedo esperando el codigo. El boton de pedir otro es un boton de verdad -tiene que mandar el correo que ya esta escrito- y se dibuja como el enlace que tiene al lado: son dos opciones del mismo peso y que una fuera un boton y la otra un enlace diria que una importa mas. / .lp .pago-salidas { display: flex; gap: 20px; justify-content: center; margin: 22px 0 0; } .lp .pago-salidas button, .lp .pago-salidas a { padding: 0; border: 0; background: none; color: var(--tinta-3); font: inherit; font-size: 13.5px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--linea); transition: color .2s var(--ease); } .lp .pago-salidas button:hover, .lp .pago-salidas a:hover { color: var(--tinta); } / Quien cobra. Afuera de la tarjeta y en gris: no es una promesa del producto, es el dato que hace falta para que la pagina de Stripe no sorprenda. / .lp .pago-nota { margin: 32px auto 0; max-width: 42ch; text-align: center; color: var(--tinta-3); font-size: 13px; line-height: 1.5; } / ---- la vuelta de Stripe ---- / .lp .pago-hecho { text-align: center; display: grid; justify-items: center; } .lp .pago-hecho h1.display { margin-top: 26px; } .lp .pago-hecho .btn { margin-top: 30px; } / El tilde adentro del circulo verde, que es el unico color que el sitio usa para decir que algo salio bien. Va del tamano de un icono grande y no del de un sello: lo importante de la pantalla es lo que dice abajo, que es donde esta la clave. / .lp .pago-tilde { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: var(--verde-fondo); color: var(--verde); } .lp .pago-tilde svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; } .lp .pago-dice { margin: 18px auto 0; max-width: 46ch; color: var(--tinta-2); font-size: 16.5px; line-height: 1.55; } .lp .pago-letra-chica { margin: 26px auto 0; max-width: 46ch; color: var(--tinta-3); font-size: 13px; line-height: 1.5; } .lp .pago-letra-chica a { text-decoration: underline; text-underline-offset: 3px; } / Los legales, al final y chicos. En una pagina de pago se los busca justo antes de poner la tarjeta, asi que estan; el resto del pie no, porque cada enlace de mas es una puerta para irse. / .lp .pago-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; justify-content: center; margin: 54px 0 0; padding-top: 28px; border-top: 1px solid var(--linea-fina); color: var(--faint); font-size: 12.5px; } .lp .pago-legal a { text-decoration: underline; text-underline-offset: 3px; } .lp .pago-legal a:hover { color: var(--tinta-2); } / Las dos maneras de escribirle a Filmina, la misma receta que en el pie: el circulo de linea, la X maciza porque es una marca ajena y el sobre de trazo porque es un dibujo nuestro. Van en chico -30 y no 38- porque aca comparten renglon con dos enlaces de letra chica y no encabezan una columna. Reemplazan a la frase que decia lo mismo escrito. Al pie de una pagina de pago, "escribinos" es una linea mas que leer; dos marcas que se reconocen de un golpe dicen que hay alguien del otro lado sin ocupar un renglon. / .lp .pago-legal .redes { display: flex; gap: 8px; } .lp .pago-legal .redes a { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--linea); border-radius: 999px; color: var(--tinta-3); text-decoration: none; transition: color .2s ease, background .2s ease, border-color .2s ease, transform .35s var(--resorte); } .lp .pago-legal .redes a:hover { color: var(--tinta); background: var(--linea-fina); border-color: var(--tinta-3); transform: translateY(-2px); } .lp .pago-legal .red { display: block; } .lp .pago-legal .red-x { width: 12px; height: 12px; fill: currentColor; stroke: none; } .lp .pago-legal .red-sobre { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } / El candado del boton. Va del lado izquierdo del texto y macizo salvo el arco, que es lo que hace que se lea como un candado y no como una bolsa: el arco tiene que verse ABIERTO por abajo, apoyado sobre el cuerpo. No hereda el relleno del resto de los glifos, asi que se dibuja con sus propios atributos adentro del simbolo. Se llama pago-candado y no candado porque .candado ya es el dibujo grande de la portada, que esta clavado con position absolute: adentro del boton, esa clase mandaba el icono a la esquina derecha y torcido. / .lp .pago-forma .btn .pago-candado { width: 17px; height: 17px; margin-top: -1px; } @media (max-width: 620px) { .lp .pago .plan { padding: 26px 20px; } .lp .pago-legal { margin-top: 34px; } } / ========================================================= documentacion === Diez paginas de referencia con la barra al costado. Es lo mas parecido que tiene el sitio a una pagina de manual, y aun asi no trae nada nuevo: la prosa es la de .texto -la misma de los legales y del blog-, el cuadro es el de las comparativas y las tarjetas son el mismo vidrio que el dock. Lo unico propio es la grilla de dos columnas y la barra. No hay buscador. Diez paginas se recorren con el ojo, y un buscador que filtra diez titulos es una caja de texto que ocupa mas de lo que resuelve. ========================================================================= / / La grilla va centrada pero el BLOQUE es del ancho de la pagina, y no es un detalle: cada bloque del sitio es opaco y tapa al pie, que esta clavado detras. Con max-width y margin auto, el paisaje del pie se veia por los dos costados de la documentacion. Asi que lo que se centra es el contenido, con el relleno, y el fondo llega hasta los bordes. / .docs { / El aire de abajo, el que separa el ultimo renglon del pie. Es una variable porque lo usan dos: el cuerpo, como relleno, y la barra, como margen. La barra es pegajosa y puede bajar hasta el fondo de su casilla, que es el fondo del cuerpo CON ese relleno: sin el margen seguia bajando despues de que el texto se termino y quedaba mas abajo que el boton del final. Con el margen, las dos frenan en la misma linea. / --docs-fondo: clamp(70px, 8vw, 104px); display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: clamp(30px, 4.5vw, 76px); padding-inline: max(var(--gutter), calc((100% - 1080px) / 2)); } / El cuerpo. .texto centra su columna de 700 en la pagina entera, y aca la columna ya la da la grilla: lo que se le saca es ese centrado, no el ritmo. / .docs .docs-cuerpo { max-width: 44rem; padding: clamp(40px, 5.5vw, 78px) 0 var(--docs-fondo); } .docs .docs-cuerpo .miga { margin: 0 0 1.4em; } .docs .docs-cuerpo h1 { font-size: clamp(32px, 4.2vw, 46px); } / La bajada dice de que es la pagina, en un cuerpo mas grande y en gris: es lo que se lee antes de decidir si esta es la pagina que se buscaba. / .docs .docs-cuerpo .bajada-nota { margin: 20px 0 0; font-size: 19px; } .docs .docs-cuerpo h2 { font-size: 25px; } .docs .docs-cuerpo code { padding: 2px 5px; border-radius: 5px; background: var(--linea-fina); color: var(--tinta); } / ---- la barra ---- / / Pegada arriba, con su propio scroll si no entra. El sitio no tiene barra arriba -el dock esta abajo-, asi que se puede quedar a un suspiro del borde sin pasar por debajo de nada. / .docs-lado { position: sticky; top: clamp(26px, 4vw, 52px); align-self: start; max-height: calc(100dvh - clamp(52px, 8vw, 104px)); margin-bottom: var(--docs-fondo); padding: clamp(40px, 5.5vw, 78px) 0 0; overflow-y: auto; scrollbar-width: none; } .docs-lado::-webkit-scrollbar { display: none; } / El rotulo de la barra solo hace falta cuando la barra dejo de estar al costado y quedo al final, donde nada dice que es. / .docs-lado-titulo { display: none; } .lp .docs-lado h2 { margin: 26px 0 8px; font-family: inherit; font-size: 11.5px; font-weight: 600; letter-spacing: .075em; text-transform: uppercase; color: var(--tinta-3); } .lp .docs-lado h2:first-of-type { margin-top: 0; } .docs-lado ul { margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--linea-fina); } .docs-lado li { margin: 0; } .lp .docs-lado a { display: block; margin-left: -1px; padding: 6px 0 6px 14px; border-left: 1px solid transparent; color: var(--tinta-3); font-size: 14.5px; line-height: 1.4; text-decoration: none; transition: color .2s ease, border-color .2s ease; } .lp .docs-lado a:hover { color: var(--tinta-2); border-left-color: var(--tinta-3); } / Donde estas: la tinta entera y el pelo de linea encendido. No hay pastilla ni fondo, que es lo que hay en el resto del sitio para decir "esto es lo que estas mirando": una linea basta y no arma un bloque de color en el margen. / .lp .docs-lado a.aqui { color: var(--tinta); font-weight: 550; border-left-color: var(--tinta); } / La pastilla del dock, cuando la pagina que se esta viendo es la de la documentacion. Es la misma marca de "estas aca" que la barra de al lado. / .lp-nav .links a.aqui { color: var(--tinta); background: var(--glass-hi); } / ---- las tarjetas de por donde empezar ---- / .docs-fichas { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 1.8em 0; } .lp .docs-ficha { display: block; padding: 18px 20px; border: 1px solid var(--edge); border-radius: 16px; background: var(--lamina); box-shadow: var(--canto); text-decoration: none; transition: background .2s ease, border-color .2s ease, transform .35s var(--resorte); } .lp .docs-ficha:hover { background: var(--lamina-hi); border-color: var(--edge-hi); transform: translateY(-2px); } .lp .docs-ficha b { display: block; margin-bottom: 4px; color: var(--tinta); font-size: 16.5px; font-weight: 550; letter-spacing: -.015em; } .lp .docs-ficha span { display: block; color: var(--tinta-3); font-size: 14.5px; line-height: 1.5; } / ---- escuchar el articulo ---- / / Una barra entre dos pelos de linea, arriba del cuerpo de la nota. Va ahi y no flotando: el que la quiere la busca antes de empezar a leer, y el que no, pasa de largo sin que nada se le mueva por encima. Aparece solo si la nota tiene su m4a generado, asi que lo que se ve aca no es una promesa: el archivo esta. La duracion tambien viene escrita del servidor, medida al sintetizar, y por eso se lee sin bajar un solo byte de audio. / .texto .escuchar { display: flex; align-items: center; gap: 12px; margin: 2.2em 0 0; padding: 14px 0; border-top: 1px solid var(--linea-fina); border-bottom: 1px solid var(--linea-fina); } .lp .escuchar-play { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; border-radius: 999px; background: var(--solido); color: var(--sobre-solido); cursor: pointer; transition: transform .25s cubic-bezier(.22,1.18,.36,1), box-shadow .25s ease; } / El mismo choque que el boton de la portada, y la misma salida. En style.css vive `button:hover:not(:disabled):not(.activo)`, que le pone vidrio a cualquier boton; los :not() valen como clase, asi que pesa (0,3,1) y le ganaba a `.escuchar-play:hover`, que pesa (0,2,0). El circulo blanco se volvia gris oscuro justo al pasarle el mouse por encima, con el triangulo adentro sin contraste contra que dibujarse. Por eso el selector lleva el .texto adelante y el :not(:disabled) atras: con eso pesa (0,4,0) y pasa. Y aun ganando no hay color que cambiar: el boton ya es del blanco mas alto que hay. Asi que el hover crece y se le enciende un halo, que es lo que hace cualquier boton de reproducir cuando lo vas a apretar. El halo va con --linea-fina, que es tinta sobre papel claro y luz sobre papel negro, asi que existe en los dos temas. / .texto .escuchar-play:hover:not(:disabled), .texto .escuchar-play:focus-visible { background: var(--solido); transform: scale(1.07); box-shadow: 0 0 0 8px var(--linea-fina); } .escuchar-play .glifo { width: 17px; height: 17px; fill: currentColor; stroke: none; } / El triangulo esta un pelo corrido a la derecha: centrado por caja se ve corrido a la izquierda, porque el peso de la figura no esta en su centro. / .escuchar-play .glifo-play { margin-left: 2px; } .escuchar-play .glifo-pausa { display: none; } .escuchar[data-estado="sonando"] .glifo-play { display: none; } .escuchar[data-estado="sonando"] .glifo-pausa { display: inline; } .escuchar-rotulo { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tinta); font-size: 15px; font-weight: 500; } .escuchar-raya { flex: none; width: 1px; height: 16px; background: var(--edge); } .escuchar-tiempo { flex: none; color: var(--tinta-3); font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; } / Compartir, contra el otro borde. El margin-left auto lo empuja y de paso deja que el rotulo del medio se coma el espacio que sobre. El padding negativo agranda el area que se puede tocar sin mover el dibujo: en un telefono, un icono de 17 pixeles es un blanco imposible. / .lp .escuchar-compartir { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; margin-right: -14px; padding: 14px; border: 0; background: none; cursor: pointer; color: var(--tinta-3); font-size: 15px; font-weight: 500; transition: color .2s ease; } .lp .escuchar-compartir:hover { color: var(--tinta); } .escuchar-compartir .glifo { width: 17px; height: 17px; flex: none; } / ---- preguntale a la IA ---- / / Cuatro enlaces que abren el asistente con la pregunta ya escrita y la direccion de esta pagina adentro. No hay nada que cargar: es un enlace con la consulta en la query, asi que no depende de que ninguno de los cuatro siga teniendo API el ano que viene. / .docs-ia { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px 20px; margin: 1.8em 0 2.2em; padding: 16px 20px; border: 1px solid var(--edge); border-radius: 18px; background: var(--lamina); box-shadow: var(--canto); } .docs-ia-dicho { color: var(--tinta); font-size: 16.5px; font-weight: 550; letter-spacing: -.015em; } / Sin media query a proposito: cuando el renglon no entra, el wrap del contenedor baja los botones solos, y ahi el space-between deja de separar nada porque en esa linea hay un solo bloque. Queda apilado y a la izquierda, que es lo que hace falta en el telefono. / .docs-ia-opciones { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; } .lp .docs-ia-opcion { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--edge); border-radius: 999px; background: var(--lamina); color: var(--tinta-2); font-size: 14.5px; font-weight: 500; text-decoration: none; white-space: nowrap; transition: background .2s ease, border-color .2s ease, color .2s ease; } .lp .docs-ia-opcion:hover { background: var(--lamina-hi); border-color: var(--edge-hi); color: var(--tinta); } / Sin fill ni stroke aca a proposito: cada simbolo trae el suyo. / .docs-ia-opcion .glifo { width: 16px; height: 16px; flex: none; } / ---- anterior y siguiente ---- / / Las dos tarjetas del final. La de atras queda a la izquierda y la de adelante a la derecha aunque falte una: con una sola, la que hay se queda en su lado y el hueco dice de que lado se termino el camino. / .docs-pasos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 3.4em 0 0; padding-top: 2.2em; border-top: 1px solid var(--linea-fina); } .lp .docs-paso { padding: 14px 18px; border: 1px solid var(--edge); border-radius: 14px; background: var(--lamina); text-align: right; text-decoration: none; grid-column: 2; transition: background .2s ease, border-color .2s ease; } .lp .docs-paso.atras { grid-column: 1; text-align: left; } .lp .docs-paso:hover { background: var(--lamina-hi); border-color: var(--edge-hi); } .lp .docs-paso span { display: block; margin-bottom: 3px; color: var(--tinta-3); font-size: 12.5px; } .lp .docs-paso b { color: var(--tinta); font-size: 15.5px; font-weight: 550; letter-spacing: -.015em; } / ---- sin costado ---- / / Debajo de esto no hay lugar para dos columnas, asi que la barra deja de ser una barra: pasa al final, despues del texto y antes del pie, como el indice de un libro. El que llego a esta pagina vino a leerla; el indice lo quiere despues, no antes. / @media (max-width: 900px) { .docs { grid-template-columns: minmax(0, 1fr); gap: 0; } .docs .docs-cuerpo { order: 1; max-width: none; padding-bottom: 8px; } / El indice, despues del texto. Lo que se mueve es el orden en la grilla y no el marcado: en la pantalla ancha la barra tiene que venir ANTES en el documento, que es donde la espera quien navega con el teclado o con un lector de pantalla. / .docs-lado { order: 2; position: static; max-height: none; padding: 34px 0 0; margin-top: 34px; border-top: 1px solid var(--linea-fina); } / El aire de abajo es el que separa el rotulo del primer grupo de enlaces. Sin el -y hasta ahora no habia ninguno, porque .lp p le ganaba a .docs-lado-titulo y le dejaba el margen en cero-, el "Documentacion" de 24px y el GETTING STARTED de 11.5 que le sigue se leen como un titulo de dos renglones en vez de como un titulo y el indice que empieza debajo. Por eso va con .lp adelante, como las demas reglas de la barra. / .lp .docs-lado-titulo { display: block; margin: 0 0 30px; / Y cruza las dos columnas en vez de quedarse en la primera: adentro de una de ellas, el rotulo empuja para abajo solo a su columna y la otra arranca mas arriba, con el primer grupo de enlaces a la altura del titulo. */ column-span: all; font-family: var(--serif); font-size: 24px; font-weight: 500; letter-spacing: -.02em; color: var(--tinta); } .docs-lado nav { columns: 2; column-gap: 26px; } .lp .docs-lado h2:first-of-type { margin-top: 0; } } @media (max-width: 560px) { .escuchar-compartir span { display: none; } .docs-lado nav { columns: 1; } .docs-pasos { grid-template-columns: 1fr; } .lp .docs-paso, .lp .docs-paso.atras { grid-column: 1; } }