/* ============================================================================= piel.css - Sassy Nail. Modelo CITA CON HORARIO, formato «LA VITRINA». Es el primero del Estudio que NO abre con una fotografia a pantalla completa. Abre con una DECISION: el abanico de fichas, en el sitio donde los otros cinco ponen la puerta. Un negocio de cita no se visita, se ELIGE, y la composicion dice lo mismo que el negocio. Consecuencia practica, y no es menor: **este prototipo no necesita laminas de heroe**. Dos imagenes menos que los cinco anteriores. Y es el primero que NO usa un display serif. Los cinco anteriores si: Gumba's Bodoni Moda + Instrument Sans calida oscura S&S Tire Archivo + IBM Plex Sans fria oscura Keystone Newsreader + Public Sans calida clara Impression Instrument Serif + DM Sans fria clara Ruby's Fraunces + Karla calida oscura Sassy SYNE + Figtree PAPEL CALIDO, TINTA FRIA ← esta El cuadro calida/fria x clara/oscura estaba agotado, asi que el contraste de temperatura se metio DENTRO de la paleta: papel calido, tinta fria. ⚠️ Y no es rosa pastel a proposito. `ui-ux-pro-max` lo propone para «beauty»; es la plantilla por defecto de todos los salones del Bay Area y ya se rechazo una vez, en `impression`. Contrastes medidos ANTES de escribir una linea: tinta #171A2B sobre papel #F0EDE8 -> 14,75:1 cobalto #2440A8 texto sobre papel -> 7,58:1 cobalto #8FA3F0 texto sobre tinta -> 7,11:1 papel #F0EDE8 sobre cobalto #2C4BC4 -> 6,18:1 apagado #575C6E sobre papel -> 5,69:1 apagado #9AA0B4 sobre tinta -> 6,61:1 ⚠️ NINGUN azul pasa 4,5 en los dos sentidos. El mas cercano, #5C78E8, da 3,39 sobre papel y 4,35 sobre tinta. Las tres tintas de acento no son una precaucion aqui: son obligatorias. Misma leccion que destapo S&S. ========================================================================== */ /* Syne es un grotesco de DISPLAY, no un texto: se usa grande y con poco interletrado negativo. Figtree para el cuerpo, que se aparta. */ @font-face{ font-family:"Syne"; src:url(../fonts/syne-latin.woff2) format("woff2"); font-weight:600 800; font-style:normal; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC, U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:"Figtree"; src:url(../fonts/figtree-latin.woff2) format("woff2"); font-weight:400 600; font-style:normal; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC, U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } :root{ --display:"Syne",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif; --text:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif; --c-ink:#171A2B; /* azul-tinta muy oscuro, no negro */ --c-paper:#F0EDE8; /* porcelana CALIDA */ --c-surface:#20243A; --c-deep:#101223; /* Las TRES tintas del acento. Ver la advertencia de la cabecera. */ --c-accent:#2C4BC4; /* decorativo: fondos de pastilla, sellos, rayas */ --c-accent-oscuro:#2440A8; /* TEXTO sobre papel -> 7,58 */ --c-accent-claro:#8FA3F0; /* TEXTO sobre tinta -> 7,11 */ --on-accent:#F0EDE8; /* TEXTO sobre el acento -> 6,18 */ --c-muted-on-light:#575C6E; /* 5,69 sobre papel */ --c-muted-on-dark:#9AA0B4; /* 6,61 sobre tinta */ --c-paper-15:rgba(240,237,232,.17); --c-paper-25:rgba(240,237,232,.28); --c-ink-15:rgba(23,26,43,.15); --sobre-foto-soft:#D8DAE4; --mapa-fondo:#E7E2DA; } /* -- la vitrina -------------------------------------------------------- La banda va en tinta para que el color de las fichas -que es el producto del negocio- sea lo unico que brilla en la pantalla. */ .vitrina{ --vitrina-fondo:var(--c-ink); --vitrina-ficha:var(--c-surface); --vitrina-ink:var(--c-paper); --vitrina-soft:var(--c-muted-on-dark); --vitrina-accent:var(--c-accent-claro); --vitrina-punto:rgba(240,237,232,.26); --vitrina-flecha-bg:var(--c-surface); --vitrina-flecha-ink:var(--c-paper); --vitrina-sombra:0 1.2em 3em rgba(6,8,18,.55); --vitrina-sombra-centro:0 2em 4.6em rgba(6,8,18,.72), 0 0 2.4em rgba(44,75,196,.28); /* ⚠️ El sello es SOLIDO y con el acento detras, no texto atenuado sobre la foto. Medido sobre el componente de referencia: blanco al 90% arriba de la ficha, donde el velo solo llega a .34, daba 1,28:1 sobre una foto clara. Asi el par es siempre #F0EDE8 sobre #2C4BC4 -> 6,18, mande la foto lo que mande. */ --vitrina-sello-bg:var(--c-accent); --vitrina-sello-ink:var(--on-accent); } .vitrina__sello{font-family:var(--text); font-weight:600; text-transform:uppercase} /* ⚠️ EN ESTE FORMATO EL TITULAR NO ES EL HEROE: LA VITRINA LO ES. Con el h1 a la escala editorial del resto del Estudio (--t5, que es lo que hace que Gumba's o Keystone parezcan caros) el abanico nacia CORTADO por el doblez, tanto a 1440 como a 390. Y un abanico cortado no se lee como un abanico: se lee como una tarjeta con dos manchas al lado. La banda tambien pierde el padding-block de --s8: la vitrina necesita ese alto para ella. Medido con mirar-movil.mjs a los dos anchos. */ .vitrina.banda{padding-block:var(--s6)} .vitrina .vitrina__cab h1{font-size:var(--t3); line-height:.96; max-width:16ch; margin-inline:auto} .vitrina__ficha h3{font-family:var(--display); font-weight:700; font-size:var(--t1); line-height:1.06; letter-spacing:-.02em; margin:0} .vitrina__desc{font-family:var(--text); font-size:var(--t-1); line-height:1.42; color:var(--fg-soft)} .vitrina__dura{font-family:var(--text); font-size:var(--t-1); letter-spacing:.16em; text-transform:uppercase; color:var(--c-accent-claro); margin:0} /* -- tipografia general ------------------------------------------------- */ body{font-family:var(--text)} h1,h2,h3,.ceja{font-family:var(--display)} h1,h2{font-weight:800; letter-spacing:-.035em; line-height:.94} h3{font-weight:700; letter-spacing:-.02em} .ceja{font-weight:600; text-transform:uppercase; letter-spacing:.22em; font-size:var(--t-1); color:var(--c-accent-t)} /* -- el horario, que es la pieza que vende este rubro -------------------- */ .horario{list-style:none; margin:var(--s5) 0 0; padding:0; display:grid; gap:0; max-width:32em} .horario li{display:flex; justify-content:space-between; gap:var(--s4); padding:var(--s3) 0; border-top:1px solid var(--hairline)} .horario li:last-child{border-bottom:1px solid var(--hairline)} .horario b{font-family:var(--text); font-weight:600} .horario span{color:var(--fg-soft)} /* El dia cerrado NO se esconde: es el dato que mas vale de los siete. */ .horario li.cerrado b,.horario li.cerrado span{color:var(--c-accent-t); font-weight:600} /* -- el recuadro de lo que solo tiene el negocio ------------------------- */ .confirmar{border:1px solid var(--c-accent); border-radius:var(--r-md); padding:var(--s5); background:color-mix(in srgb, var(--c-accent) 7%, transparent)} .confirmar h3{font-size:var(--t1); margin:0 0 var(--s3)} .confirmar ul{margin:var(--s3) 0 0; padding-left:1.1em} .confirmar li{margin-bottom:var(--s2); color:var(--fg-soft)} .aviso{color:var(--c-accent-t)} /* -- el telefono -------------------------------------------------------- ⚠️ En «La vitrina» el titular NO puede quedarse con media pantalla. Todo el formato consiste en que lo primero que ves sea la ELECCION; con el h1 a --t4 (57px a 390) el abanico nacia por debajo del doblez y la pagina se convertia en un cartel con un carrusel escondido debajo. Medido con mirar-movil.mjs, que renderiza a 390 de verdad. */ @media (max-width:760px){ .vitrina .vitrina__cab h1{font-size:var(--t2); line-height:.98} .vitrina__cab{margin-bottom:var(--s4)} .vitrina .ceja{font-size:.72em; letter-spacing:.18em} .vitrina__mando{margin-top:var(--s4)} .vitrina__ficha h3{font-size:var(--t0)} } /* Las flechas se van a los LADOS del abanico en escritorio, y abajo solo quedan los puntos. No es estetica: la fila de flechas se comia 80px de alto y era justo lo que hacia que la ficha central llegara cortada por el doblez a 1440x820. Ademas es donde el pulgar y el raton las buscan. En el telefono se quedan abajo, porque ahi se pasa con el dedo. */ @media (min-width:761px){ /* ⚠️ LA ALTURA DE LA FICHA DESCUENTA EL CROMADO, NO SE ADIVINA. El motor la acota a 74svh, que en una pantalla de 820 de alto deja la ficha acabando a 781px: por debajo pasa la barra fija de «Book», que vive a 743. Resultado: la pastilla imprimida encima de la descripcion de la ficha central. Es la misma clase de fallo que la barra fija transparente (regla 12): un elemento fijo tapando contenido. 25em son barra + titular + puntos + el hueco de la pastilla. ⚠️ Y LLEVA SUELO (21em), que lo destapo la tarjeta social. En una ventana baja -1200x630 al hacer el og, y tambien un portatil a 1440x700 o un telefono en horizontal- `100svh - 25em` deja la ficha en 230px y el texto se sale por abajo: el nombre del servicio salia partido a la mitad. Descontar cromado sin poner suelo cambia un fallo por otro. */ .js .vitrina__mesa{--v-alto:max(21em, min(calc(min(20.5em,74vw) / var(--v-prop)), calc(100svh - 25em)))} /* Y las flechas se ven: sobre la foto de una vecina, un circulo sin borde definido desaparece. */ .vitrina__flecha{border:1px solid var(--c-paper-25); background:color-mix(in srgb, var(--c-ink) 78%, transparent); backdrop-filter:blur(6px)} .vitrina__mando{position:static; margin-top:var(--s4)} .vitrina__flecha{position:absolute; top:50%; z-index:40; width:3.2em; height:3.2em; transform:translateY(-50%)} .vitrina__flecha[data-atras]{left:var(--canal)} .vitrina__flecha[data-alante]{right:var(--canal)} .vitrina__flecha:hover{transform:translateY(-50%) scale(1.08)} /* La pastilla flotante vive fijada abajo al centro, que es EXACTAMENTE donde cae el texto de la ficha central. Se le deja su sitio. */ .vitrina.banda{padding-bottom:var(--s7)} }