/* =========================================================================== VIDA SERVICIOS - Variables de diseno --------------------------------------------------------------------------- Todo el aspecto del sitio (colores, tipografia, espacios, sombras) se controla desde este archivo. Cambiar un color aqui lo cambia en TODO el sitio, sin tener que buscarlo pagina por pagina. La paleta sale del propio logotipo de la empresa: la hoja verde y la gota de agua azul. =========================================================================== */ :root { /* ----------------------------------------------------------------------- COLORES DE MARCA Verde = jardineria y areas verdes | Azul = agua y sistemas de riego ----------------------------------------------------------------------- */ --verde-marca: #2F7D12; /* color principal: la hoja del logo */ --verde-medio: #3B9615; /* variante para degradados */ --verde-claro: #5CB030; /* hover de botones */ --verde-profundo: #1B4D0B; /* titulos sobre fondo claro */ --verde-oscuro: #12330A; /* fondo del pie de pagina */ --verde-lima: #8CC63F; /* acento: nervadura de la hoja */ --verde-lima-suave: #C9E29A; /* subrayados y detalles */ --verde-nieble: #EDF4E4; /* fondos de seccion muy suaves */ --primario-texto: #2F7D12; /* el color, legible sobre fondo blanco */ /* Color del texto que va ENCIMA de cada color de marca. Lo calcula solo el sistema de temas segun el color que elija el administrador, para que nunca quede texto blanco sobre un fondo claro. */ --sobre-primario: #FFFFFF; --sobre-acento: #141A10; --sobre-agua: #FFFFFF; --azul-agua: #1273D6; /* la gota del logo: todo lo de riego */ --agua-texto: #0B4E93; /* el azul, legible sobre fondo blanco */ --azul-profundo: #0B4E93; --aqua: #35C6C0; /* brillo de la gota */ --aqua-suave: #E1F5F4; /* ----------------------------------------------------------------------- NEUTROS ----------------------------------------------------------------------- */ --blanco: #FFFFFF; --hueso: #F8FAF5; /* fondo alterno de secciones */ --gris-borde: #E2E7DC; --gris-suave: #F1F3EE; --gris-medio: #8A9184; /* textos secundarios */ --gris-texto: #2B2B2B; /* cuerpo de texto */ --negro-suave: #151A12; /* ----------------------------------------------------------------------- COLORES DE ESTADO (avisos del panel y formularios) ----------------------------------------------------------------------- */ --exito: #2F7D12; --exito-fondo: #EDF4E4; --error: #C0392B; --error-fondo: #FDEDEB; --aviso: #B8860B; --aviso-fondo: #FDF6E3; --info: #1273D6; --info-fondo: #E8F1FC; /* ----------------------------------------------------------------------- ROLES (se usan en el CSS en lugar del color directo, para poder cambiar la identidad completa tocando solo estas lineas) ----------------------------------------------------------------------- */ --color-fondo: var(--blanco); --color-fondo-alterno: var(--hueso); --color-texto: var(--gris-texto); --color-texto-suave: var(--gris-medio); --color-titulo: var(--verde-profundo); --color-primario: var(--verde-marca); --color-primario-hover: var(--verde-claro); --color-secundario: var(--azul-agua); --color-acento: var(--verde-lima); --color-borde: var(--gris-borde); --color-enlace: var(--primario-texto); /* ----------------------------------------------------------------------- TIPOGRAFIA Fraunces -> titulos. Serif organica, transmite naturaleza y oficio. Source Sans 3 -> textos. Muy legible en pantallas y en telefono. ----------------------------------------------------------------------- */ --fuente-titulos: 'Fraunces', 'Georgia', 'Times New Roman', serif; --fuente-texto: 'Source Sans 3', 'Segoe UI', system-ui, -apple-system, sans-serif; /* Escala tipografica fluida: se adapta sola al ancho de la pantalla, de telefono a monitor grande, sin saltos bruscos. */ --texto-xs: 0.8125rem; /* 13px */ --texto-sm: 0.9375rem; /* 15px */ --texto-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem); /* 16 - 17px */ --texto-md: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); /* 17 - 19px */ --texto-lg: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem); /* 20 - 24px */ --texto-xl: clamp(1.5rem, 1.3rem + 1vw, 2rem); /* 24 - 32px */ --texto-2xl: clamp(1.875rem, 1.5rem + 1.8vw, 2.75rem); /* 30 - 44px */ --texto-3xl: clamp(2.25rem, 1.7rem + 2.6vw, 3.75rem); /* 36 - 60px */ --peso-normal: 400; --peso-medio: 500; --peso-semi: 600; --peso-negrita: 700; --interlineado-titulo: 1.15; --interlineado-texto: 1.7; /* ----------------------------------------------------------------------- ESPACIADO (escala de 4px, para que todo quede alineado) ----------------------------------------------------------------------- */ --esp-1: 0.25rem; --esp-2: 0.5rem; --esp-3: 0.75rem; --esp-4: 1rem; --esp-5: 1.5rem; --esp-6: 2rem; --esp-7: 2.5rem; --esp-8: 3rem; --esp-9: 4rem; --esp-10: 5rem; /* Aire vertical de cada seccion: mas chico en telefono, mas amplio en PC */ --seccion-y: clamp(3.5rem, 2rem + 6vw, 7rem); /* ----------------------------------------------------------------------- MEDIDAS ----------------------------------------------------------------------- */ --ancho-maximo: 1200px; --ancho-lectura: 68ch; /* largo de linea comodo para leer */ --alto-cabecera: 76px; /* ----------------------------------------------------------------------- ESQUINAS Y SOMBRAS ----------------------------------------------------------------------- */ --radio-sm: 6px; --radio-md: 10px; --radio-lg: 16px; --radio-xl: 24px; --radio-full: 999px; --sombra-sm: 0 1px 2px rgba(18, 51, 10, 0.06), 0 2px 6px rgba(18, 51, 10, 0.05); --sombra-md: 0 4px 10px rgba(18, 51, 10, 0.07), 0 12px 28px rgba(18, 51, 10, 0.07); --sombra-lg: 0 10px 20px rgba(18, 51, 10, 0.08), 0 24px 56px rgba(18, 51, 10, 0.10); --sombra-cabecera: 0 1px 0 rgba(18, 51, 10, 0.06), 0 4px 16px rgba(18, 51, 10, 0.05); /* ----------------------------------------------------------------------- TRANSICIONES ----------------------------------------------------------------------- */ --transicion-rapida: 140ms cubic-bezier(0.4, 0, 0.2, 1); --transicion: 220ms cubic-bezier(0.4, 0, 0.2, 1); --transicion-lenta: 400ms cubic-bezier(0.4, 0, 0.2, 1); /* ----------------------------------------------------------------------- CAPAS (para que nada quede tapado por accidente) ----------------------------------------------------------------------- */ --capa-base: 1; --capa-flotante: 10; --capa-cabecera: 100; --capa-menu: 200; --capa-modal: 300; --capa-aviso: 400; } /* --------------------------------------------------------------------------- Quien tenga activado "reducir movimiento" en su sistema no vera animaciones. Es un requisito de accesibilidad. --------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { :root { --transicion-rapida: 0ms; --transicion: 0ms; --transicion-lenta: 0ms; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }