/* ========================================================================== CASA VERDE SERVICES — SISTEMA DE DISEÑO Concepto rector: LA HORA EXACTA "No vendemos limpieza. Vendemos que a las 9:00 tocamos la puerta." Fase 1. Esta hoja es la UNICA fuente de verdad del sistema. Regla dura: a partir de aqui esta prohibido escribir a mano un color, una duracion, un easing, un radio o una medida de espaciado. Indice 1. Color 2. Tipografia 3. Espaciado 4. Rejilla y medidas 5. Movimiento (easing + duracion) 6. Elevacion 7. Forma (radios y el corte) 8. El sello de hora <- detalle firma de marca 9. Utilidades de rejilla 10. Accesibilidad ========================================================================== */ /* -------------------------------------------------------------------------- RESPALDOS CON METRICA CASADA Sin esto, cuando Bricolage termina de descargar el titular se reflowa de 4 lineas a 3 y todo el hero salta hacia arriba. Medido en 4G lento: el CTA se quedaba por debajo del pliegue durante ~4 segundos. Medicion propia (cadena del h1 a 100px): Bricolage wght700/wdth82/opsz96 .... 2176 px Arial Narrow bold .................. 2478 px -> 2176/2478 = 87,8 % Con size-adjust el respaldo ocupa el mismo ancho que la fuente real, asi que el numero de lineas no cambia al hacer el swap y no hay salto de layout. -------------------------------------------------------------------------- */ @font-face { font-family: "Bricolage respaldo"; src: local("Arial Narrow"), local("Liberation Sans Narrow"), local("Helvetica Neue Condensed Bold"), local("Arial"); size-adjust: 87.8%; ascent-override: 92%; descent-override: 24%; line-gap-override: 0%; } @font-face { font-family: "Instrument respaldo"; src: local("Helvetica Neue"), local("Arial"), local("Liberation Sans"); size-adjust: 100%; ascent-override: 95%; descent-override: 25%; line-gap-override: 0%; } :root { /* 1. COLOR ============================================================== El giro del concepto: el verde de marca (#1B4332, fijado por G4) deja de ser fondo y pasa a ser TINTA. El sitio es papel de registro, escrito en verde. */ --tinta: #1B4332; /* ancla de marca. Texto y titulares */ --tinta-alta: #112C20; /* titulares grandes: mas peso optico */ --tinta-baja: #3D6B54; /* apoyos sobre papel */ --papel: #F7F6F2; /* fondo dominante */ --papel-2: #EDEBE3; /* bandas alternas y celdas */ --papel-3: #E3E0D5; /* celdas marcadas, cabeceras de tabla */ --sello: #C4482B; /* EL acento. Oxido de sello. Solo horas, estados "hecho" y el trazo firma. Si aparece decorando, esta mal usado. */ --sello-alto: #A63A20; /* hover / pulsado */ --senal: #2F7D52; /* verde medio. Nacio para el estado "en curso" de la ruta del dia; al retirarse esa tabla quedo libre y ahora marca el hover del CTA del hero. Es el unico verde de la paleta que a la vez cambia lo bastante desde --tinta y deja la flecha blanca por encima de 3:1. */ --grafito: #2A2E2B; /* texto largo. No es negro */ --grafito-2: #55605A; /* secundario */ --linea: rgba(27, 67, 50, .16); /* reticula de 1px */ --linea-fuerte: rgba(27, 67, 50, .38); /* filete del sello */ --linea-sello: rgba(196, 72, 43, .45); /* Inversos: las pocas superficies en tinta plena */ --sobre-tinta: #F2F0E8; --sobre-tinta-baja: #A9BDB1; --seleccion-fondo: var(--tinta); --seleccion-texto: var(--papel); /* 2. TIPOGRAFIA ========================================================= Dos familias. Ni una mas. Bricolage Grotesque: variable en ancho y con terminaciones ligeramente incomodas. Imposible de confundir con una plantilla. Instrument Sans: neutra de verdad para leer parrafos largos. El aire de "registro" NO viene de una tercera familia monoespaciada: viene de tabular-nums + versales con tracking. Decision, no libreria. */ --fam-display: "Bricolage Grotesque", "Bricolage respaldo", "Arial Narrow", system-ui, sans-serif; --fam-texto: "Instrument Sans", "Instrument respaldo", system-ui, -apple-system, sans-serif; /* Escala — 11 pasos. El h1 llega a 104px en desktop. */ --fs-reloj: clamp(4rem, 13vw, 11.25rem); /* 64 -> 180 la hora */ --fs-dato: clamp(3rem, 7vw, 6rem); /* 48 -> 96 cifras crudas */ --fs-d1: clamp(2.75rem, 7vw, 6.5rem); /* 44 -> 104 h1 */ --fs-d2: clamp(2rem, 4.4vw, 4rem); /* 32 -> 64 h2 */ --fs-d3: clamp(1.375rem, 2.2vw, 2rem); /* 22 -> 32 h3 */ --fs-d4: clamp(1.125rem, 1.5vw, 1.375rem); /* 18 -> 22 h4 */ --fs-lead: clamp(1.0625rem, 1.3vw, 1.3125rem); /* 17 -> 21 */ --fs-cuerpo: clamp(1rem, 1vw, 1.0625rem); /* 16 -> 17 */ --fs-sm: 0.9375rem; /* 15 */ --fs-xs: 0.8125rem; /* 13 */ --fs-sello: 0.6875rem; /* 11 versales + tracking */ /* Interlinea */ --lh-reloj: .80; --lh-display: .95; --lh-titulo: 1.04; --lh-lead: 1.42; --lh-cuerpo: 1.62; --lh-corto: 1.25; /* Tracking — negativo fuerte arriba, abierto en versales */ --ls-reloj: -.045em; --ls-display: -.035em; --ls-titulo: -.022em; --ls-cuerpo: 0em; --ls-sello: .18em; /* Pesos */ --pe-ligero: 300; --pe-normal: 400; --pe-medio: 500; --pe-fuerte: 700; --pe-negro: 800; /* Anchos del eje variable de Bricolage */ --an-estrecho: 82; --an-normal: 100; --medida-texto: 65ch; /* ninguna columna de texto es mas ancha */ /* 3. ESPACIADO ========================================================== Fibonacci (razon aurea). No es 8/16/24/32: los saltos de arriba son brutales a proposito, porque la densidad variable es lo que se lee como criterio. */ --s-1: 0.25rem; /* 4 */ --s-2: 0.5rem; /* 8 */ --s-3: 0.8125rem; /* 13 */ --s-4: 1.3125rem; /* 21 */ --s-5: 2.125rem; /* 34 */ --s-6: 3.4375rem; /* 55 */ --s-7: 5.5625rem; /* 89 */ --s-8: 9rem; /* 144 */ --s-9: 14.5625rem; /* 233 */ /* Densidades de seccion. Cinco, para que en la Fase 3 NUNCA se repita el padding entre dos secciones consecutivas. */ --pad-apretado: clamp(1.3125rem, 3vw, 2.125rem); --pad-normal: clamp(2.125rem, 6vw, 3.4375rem); --pad-amplio: clamp(3.4375rem, 9vw, 5.5625rem); --pad-vasto: clamp(5.5625rem, 14vw, 9rem); --pad-abismo: clamp(9rem, 20vw, 14.5625rem); /* 4. REJILLA Y MEDIDAS ================================================== */ --cols: 12; --gutter: clamp(0.8125rem, 2vw, 1.3125rem); --margen: clamp(1.3125rem, 4vw, 3.4375rem); --ancho-max: 1360px; --medida: min(100% - (var(--margen) * 2), var(--ancho-max)); /* El carril izquierdo por donde corre la hora. Define la asimetria estructural del sitio: el contenido nunca esta centrado respecto al viewport, esta centrado respecto a lo que queda a la derecha del riel. */ --riel: clamp(0px, 4vw, 76px); --filete: 1px; /* el grosor de TODA linea del sistema */ /* 5. MOVIMIENTO ========================================================= */ --ease-out-expo: cubic-bezier(.16, 1, .3, 1); --ease-in-out-quart: cubic-bezier(.76, 0, .24, 1); --ease-spring: cubic-bezier(.34, 1.56, .64, 1); --ease-mecanico: cubic-bezier(.2, 0, 0, 1); /* el del reloj: sin rebote */ --ease-salida: cubic-bezier(.5, 0, .9, .3); --dur-ui: 160ms; /* hover, foco, pulsado */ --dur-ui-lento: 280ms; /* acordeon, menu */ --dur-reveal: 620ms; /* entrada de contenido */ --dur-trazo: 900ms; /* la regla que se dibuja */ --dur-cinematic: 1100ms; /* solo hero y seccion firma */ /* 6. ELEVACION ========================================================== Tres capas por nivel, tenidas con el verde de marca. En este concepto la elevacion es CONTACTO sobre papel, no flotacion: sombras cortas y bajas. Nada levita. */ --elev-1: 0 1px 1px rgba(27, 67, 50, .05), 0 2px 4px rgba(27, 67, 50, .05), 0 4px 8px rgba(27, 67, 50, .04); --elev-2: 0 1px 2px rgba(27, 67, 50, .06), 0 6px 12px rgba(27, 67, 50, .06), 0 14px 28px rgba(17, 44, 32, .07); --elev-3: 0 2px 4px rgba(27, 67, 50, .08), 0 12px 24px rgba(27, 67, 50, .08), 0 32px 64px rgba(17, 44, 32, .12); /* El contacto del sello sobre el papel: casi nada, pero se nota */ --elev-sello: 0 1px 0 rgba(27, 67, 50, .10), 0 2px 3px rgba(27, 67, 50, .05), inset 0 1px 0 rgba(255, 255, 255, .50); /* 7. FORMA ============================================================== Decision del concepto: la esquina viva es la norma, no la excepcion. No hay jerarquia de radios porque no hay radios. La jerarquia esta en el CORTE: donde se aplica el chaflan y de que tamano. */ --r-0: 0; /* el valor por defecto de absolutamente todo */ --r-1: 2px; /* unica concesion: campos de formulario, para que el contorno de :focus-visible no se vea astillado */ --corte: 7px; /* el chaflan del sello */ --corte-grande: 14px; /* bloques grandes y fichas de seccion */ /* RUPTURA DELIBERADA #1 (regla del 80/20) -------------------------------- El boton flotante de WhatsApp es el unico elemento redondo del sitio. Motivo: no es una forma de Casa Verde, es una forma prestada de otra plataforma. Fingir que pertenece al sistema seria menos honesto que admitir que es un injerto. Se queda redondo, y por eso se lee como lo que es: una puerta a otra app. Ningun otro elemento puede usar esto. */ --r-ajeno: 999px; /* Los cortes, como clip-path reutilizables */ --corte-tr: polygon( 0 0, calc(100% - var(--corte)) 0, 100% var(--corte), 100% 100%, 0 100%); --corte-bl: polygon( 0 0, 100% 0, 100% 100%, var(--corte) 100%, 0 calc(100% - var(--corte))); --corte-grande-tr: polygon( 0 0, calc(100% - var(--corte-grande)) 0, 100% var(--corte-grande), 100% 100%, 0 100%); } /* 8. EL SELLO DE HORA — DETALLE FIRMA DE MARCA ============================== Una caja de filete de 1px con la esquina superior derecha cortada a 45 grados, con cifras tabulares dentro. Aparece sobre las fotos, en los ladillos, en las cifras, en las zonas y en el footer. Se construye con doble clip-path (fondo = linea, pseudo interior = papel) para que la diagonal TAMBIEN quede dibujada. Un clip-path a secas cortaria el borde y dejaria la diagonal sin filete: eso es lo que delata a un chaflan hecho a la ligera. ========================================================================= */ .sello { position: relative; display: inline-flex; align-items: baseline; gap: var(--s-2); padding: var(--s-2) var(--s-3); background: var(--linea-fuerte); clip-path: var(--corte-tr); font-family: var(--fam-display); font-size: var(--fs-sello); font-weight: var(--pe-medio); letter-spacing: var(--ls-sello); line-height: var(--lh-corto); text-transform: uppercase; font-variant-numeric: tabular-nums; color: var(--tinta); } .sello::before { content: ""; position: absolute; inset: var(--filete); background: var(--papel); clip-path: var(--corte-tr); } .sello > * { position: relative; z-index: 1; } /* La hora dentro del sello: siempre tabular, siempre en color de sello */ .sello .hora { font-variant-numeric: tabular-nums; letter-spacing: 0; color: var(--sello); font-weight: var(--pe-fuerte); } /* Variantes */ .sello--relleno { background: var(--tinta); color: var(--sobre-tinta); } .sello--relleno::before { background: var(--tinta); } .sello--relleno .hora { color: var(--papel); } .sello--acento { background: var(--sello); color: var(--sello); } .sello--acento .hora { color: var(--sello); } .sello--sobre-tinta { background: rgba(242, 240, 232, .45); color: var(--sobre-tinta); } .sello--sobre-tinta::before { background: var(--tinta); } .sello--sobre-tinta .hora { color: var(--papel); } /* Sobre fotografia: el sello se apoya en la esquina, nunca centrado */ .sello--sobre-foto { position: absolute; bottom: var(--s-3); left: var(--s-3); box-shadow: var(--elev-sello); } /* El trazo: la regla de 1px que se dibuja al entrar. El unico movimiento de entrada que lleva todo el sitio fuera del hero y la seccion firma. */ .trazo { display: block; width: 100%; height: var(--filete); background: var(--linea-fuerte); transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--dur-trazo) var(--ease-mecanico); } .trazo.is-visible { transform: scaleX(1); } .trazo--sello { background: var(--sello); } /* 9. UTILIDADES DE REJILLA ================================================== 12 columnas definidas UNA vez, y pensadas para romperse: por eso existe .fuga, que saca cualquier hijo fuera del contenedor sin sacarlo de la rejilla. En la Fase 3 al menos 3 secciones la usan. ========================================================================= */ .rejilla { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--gutter); } .contenedor { width: var(--medida); margin-inline: auto; } /* Contenedor desplazado por el riel del reloj: la asimetria estructural */ .contenedor--riel { width: min(100% - var(--margen) - var(--riel), var(--ancho-max)); margin-left: calc(var(--riel) + var(--margen)); margin-right: var(--margen); } /* Sale del contenedor y llega a los bordes del viewport */ .fuga { width: 100vw; margin-left: calc(50% - 50vw); max-width: none; } /* Se sale por un solo lado: el recurso editorial del concepto */ .fuga--derecha { margin-right: calc(50% - 50vw); } .fuga--izquierda { margin-left: calc(50% - 50vw); } /* 10. ACCESIBILIDAD ========================================================= */ ::selection { background: var(--seleccion-fondo); color: var(--seleccion-texto); } /* G4 fija la paleta en verde bosque + verde menta. El oxido del sello (--sello) era el unico color no verde que quedaba a la vista, y salia justo en el anillo de foco. Pasa a --tinta: 11,2:1 sobre el papel, contra los 2,7:1 que daria el verde menta, que como indicador de foco se queda corto. */ :focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; border-radius: var(--r-0); } @media (prefers-reduced-motion: reduce) { .trazo { transform: none; transition: none; } }