/* ============================================================ tokens.css — base de diseño Proyecto: Relevamiento y cotización de limpieza Dirección estética: "AZULEJO" (registrada, no repetir) ------------------------------------------------------------ Copiado de la base del skill. Lo único editado es el bloque "POR PROYECTO" + el bloque de superficie del azulejo (11). ============================================================ */ /* ------------------------------------------------------------ 1. POR PROYECTO ------------------------------------------------------------ */ :root { /* Hue único que gobierna TODA la paleta. 195 = agua / cian verdoso. Es el color del vidrio limpio y del azulejo de baño: el rubro puesto en un número. */ --h: 195; /* Chroma del acento: sobrio, el acento tiene que ocupar <5% */ --c-acento: 0.13; /* Clash Display (Fontshare) para display, Supreme para texto, JetBrains Mono para datos. Ninguna de la lista prohibida. */ --f-display: "Clash Display", "Trebuchet MS", sans-serif; --f-texto: "Supreme", system-ui, sans-serif; --f-mono: "JetBrains Mono", ui-monospace, monospace; /* Azulejo = junta a escuadra. Radio 0. */ --radio: 0px; /* Grano base. En esta app el grano es "la mugre": lo modula --mugre. */ --grano-base: 0.05; --grano: calc(var(--grano-base) * (0.22 + 0.78 * var(--mugre, 1))); } /* ------------------------------------------------------------ 2. COLOR — derivado del hue. Ningún neutro es gris puro. ------------------------------------------------------------ */ :root { --acento: oklch(58% var(--c-acento) var(--h)); --acento-suave: oklch(72% calc(var(--c-acento) * 0.5) var(--h)); /* MEDIDO, no estimado: el acento a 58% da 3,53:1 contra la porcelana y no llega a AA para texto chico. Este es el mismo tono bajado a 46% (5,4:1) y es el que se usa cuando el acento ES texto, o cuando es el relleno de un botón con texto claro encima. El de arriba queda para barras, bordes y la pasada del secador, donde no hay que leer nada. */ --acento-texto: oklch(46% var(--c-acento) var(--h)); --fondo: oklch(97% 0.010 var(--h)); /* porcelana */ --fondo-alt: oklch(93.5% 0.016 var(--h)); /* junta / bandeja */ --texto: oklch(21% 0.020 var(--h)); /* tinta gris-azulada */ --texto-suave: oklch(21% 0.020 var(--h) / 0.70); /* Hairlines — reemplazan a las sombras */ --linea: oklch(21% 0.02 var(--h) / 0.12); --linea-fuerte: oklch(21% 0.02 var(--h) / 0.28); /* Señales. Un solo hue de acento + dos semánticas mínimas. */ --ok: oklch(52% 0.12 165); --alerta: oklch(52% 0.16 42); } /* Variante oscura: — subsuelos y turno noche */ :root[data-tema="oscuro"] { --fondo: oklch(17% 0.015 var(--h)); --fondo-alt: oklch(22% 0.020 var(--h)); --texto: oklch(94% 0.010 var(--h)); --texto-suave: oklch(94% 0.010 var(--h) / 0.62); --linea: oklch(94% 0.01 var(--h) / 0.14); --linea-fuerte: oklch(94% 0.01 var(--h) / 0.30); --acento: oklch(74% var(--c-acento) var(--h)); --acento-texto: oklch(80% var(--c-acento) var(--h)); /* en oscuro hay que SUBIRlo, no bajarlo */ --ok: oklch(74% 0.12 165); --alerta: oklch(72% 0.15 42); } /* ------------------------------------------------------------ 3. TIPOGRAFÍA — contraste alto de escala (>=5:1 display/body) ------------------------------------------------------------ */ :root { --t-display: clamp(2.75rem, 9vw, 7.5rem); --t-h1: clamp(2rem, 5vw, 3.5rem); --t-h2: clamp(1.5rem, 3vw, 2.25rem); --t-h3: 1.25rem; --t-body: 1.0625rem; /* 17px lee mejor que 16 */ --t-small: 0.875rem; --t-label: 0.75rem; --tr-display: -0.035em; --tr-titulo: -0.02em; --tr-label: 0.14em; } /* ------------------------------------------------------------ 4. ESPACIO ------------------------------------------------------------ */ :root { --s-seccion: clamp(5rem, 12vw, 12rem); --s-borde: clamp(1.25rem, 5vw, 4rem); --ancho-angosto: 42rem; --ancho-normal: 72rem; --ancho-amplio: 88rem; } /* ------------------------------------------------------------ 5. MOVIMIENTO ------------------------------------------------------------ */ :root { --ease-suave: cubic-bezier(0.16, 1, 0.3, 1); --ease-entrada: cubic-bezier(0.32, 0.72, 0, 1); --dur-rapida: 180ms; --dur-media: 420ms; --dur-lenta: 900ms; } /* ------------------------------------------------------------ 6. BASE ------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--fondo); color: var(--texto); font-family: var(--f-texto); font-size: var(--t-body); line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 500; line-height: 1.05; letter-spacing: var(--tr-titulo); text-wrap: balance; margin: 0; } p { max-width: 62ch; text-wrap: pretty; margin: 0 0 1.2em; } a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; } img, video, svg { max-width: 100%; height: auto; display: block; } :focus-visible { outline: 2px solid var(--acento-texto); outline-offset: 2px; } ::selection { background: var(--acento); color: var(--fondo); } /* ------------------------------------------------------------ 7. PATRONES ------------------------------------------------------------ */ .display { font-family: var(--f-display); font-size: var(--t-display); line-height: 0.95; letter-spacing: var(--tr-display); text-wrap: balance; } .etiqueta { font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--texto-suave); } .linea { border: 1px solid var(--linea); } .linea-top { border-top: 1px solid var(--linea); } .reveal { opacity: 0; transform: translateY(1.5rem); transition: opacity var(--dur-media) var(--ease-suave) calc(var(--i, 0) * 70ms), transform var(--dur-media) var(--ease-suave) calc(var(--i, 0) * 70ms); } .reveal.visible { opacity: 1; transform: none; } /* ------------------------------------------------------------ 8. GRANO — acá NO es decoración: es la mugre de la superficie. Se apaga sola a medida que el relevamiento se completa (--mugre). ------------------------------------------------------------ */ body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 90; opacity: var(--grano); transition: opacity var(--dur-lenta) var(--ease-suave); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); } /* ------------------------------------------------------------ 9. ACCESIBILIDAD ------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .reveal { opacity: 1; transform: none; } } /* ------------------------------------------------------------ 11. SUPERFICIE DE AZULEJO ← el signature move de este proyecto ------------------------------------------------------------ La junta del azulejo se dibuja con dos repeating-linear-gradient (hairlines reales, no sombras). Su opacidad la maneja --mugre: 1 = superficie sucia (relevamiento vacío) · 0 = impecable. Va en tokens porque es la piel del proyecto, no un componente. ------------------------------------------------------------ */ :root { --azulejo: 76px; } .superficie { position: relative; isolation: isolate; } .superficie::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; /* La junta es SUSTRATO, no grilla: si compite con el texto, deja de leerse la ficha. Techo bajo a propósito — lo que se percibe es el cambio (de texturada a lisa), no la línea en sí. */ opacity: calc(0.06 + 0.26 * var(--mugre, 1)); transition: opacity var(--dur-lenta) var(--ease-suave); background-image: repeating-linear-gradient(to right, var(--linea) 0 1px, transparent 1px var(--azulejo)), repeating-linear-gradient(to bottom, var(--linea) 0 1px, transparent 1px var(--azulejo)); /* la junta se desvanece hacia el pie, para que el texto respire */ mask-image: linear-gradient(to bottom, oklch(0% 0 0) 0%, oklch(0% 0 0) 45%, transparent 100%); }