/* ============================================================================ TOKENS.CSS — El único archivo que necesitas tocar para re-marcar el template ============================================================================ Sistema de diseño inspirado en clay.com (su design system interno se llama "loam"). Todo aquí son variables CSS: cambia un valor y se propaga a todo el sitio. ORDEN DE LECTURA: 1. Paleta cruda (swatches) → los colores de la iglesia 2. Tokens semánticos → qué color usa cada cosa 3. Tipografía → familias + escala fluida 4. Layout y espaciado → contenedor, secciones, grid 5. Componentes → botones, cards, inputs, header 6. Movimiento → duraciones y curvas de animación ========================================================================== */ :root { /* ========================================================================== 1. PALETA CRUDA (swatches) — colores de Iglesia Visión de Amor -------------------------------------------------------------------------- Tres familias activas, tomadas de iglesiavisiondeamor.com: · Coral #FF5B5B → la marca (el corazón del logo) · Azul #2196F3 → informativo (eventos, enlaces de apoyo) · Verde #10B981 → confirmaciones y vida Los tintes 100/200 del coral son literales de su web (#FFF5F5, #FFD0D0). Escala 100 (más claro) → 500 (más oscuro). El 300 es el tono "vivo" para formas y acentos; el 400 es el accesible para texto sobre claro. Las familias marcadas como RESERVA no se usan en ninguna sección: quedan por si algún día hace falta más gama, pero no las metas en el diseño sin necesidad — la identidad de la iglesia es coral + neutros cálidos. ====================================================================== */ /* Oat — neutrales (fondos, texto, bordes) */ --oat-100: #fefdfb; /* fondo principal, casi blanco cálido */ --oat-200: #f4f3f0; /* fondo alterno / superficies elevadas */ --oat-300: #d1cdc7; /* bordes, divisores */ --oat-400: #7b7974; /* gris de marca (ver nota en --color-text-muted) */ --oat-500: #1b1a18; /* texto principal, botón primario. Negro CÁLIDO, no #000: sobre el fondo hueso el negro puro vibra. */ /* Coral — LA familia de marca (el corazón del logo iVA). Ocupa el hueco del antiguo azul de la plantilla: todo lo que era "acento" es coral. 100/200 son literales de su web; 400/500 derivados para contraste. */ --blueberry-100: #fff5f5; --blueberry-200: #ffd0d0; --blueberry-300: #ff5b5b; --blueberry-400: #c8323b; --blueberry-500: #3d0a0d; /* Verde — el verde de confirmación de su web (#10B981). Conserva el nombre "lime" para no tocar reglas que ya lo consumen. */ --lime-100: #ecfdf5; --lime-200: #a7f3d0; --lime-300: #10b981; --lime-400: #047857; --lime-500: #06301f; /* Lemon — dorado cálido. Se usa solo como acento puntual sobre foto (el enlace-eyebrow del hero) y en la barra de anuncio. */ --lemon-100: #fefae8; --lemon-200: #fae188; --lemon-300: #fcbe11; --lemon-400: #9e5801; --lemon-500: #372100; /* Tangerine — RESERVA (sin uso en las secciones actuales) */ --tangerine-100: #fff3ed; --tangerine-200: #fcc9aa; --tangerine-300: #ff7614; --tangerine-400: #b53c09; --tangerine-500: #371005; /* Pomegranate — RESERVA (sin uso en las secciones actuales) */ --pomegranate-100: #fff1f2; --pomegranate-200: #fcbabe; --pomegranate-300: #fb4450; --pomegranate-400: #c22e3d; --pomegranate-500: #390307; /* Dragonfruit — RESERVA (sin uso en las secciones actuales) */ --dragonfruit-100: #fff0fa; --dragonfruit-200: #f8b9e3; --dragonfruit-300: #ff70d1; --dragonfruit-400: #cc089e; --dragonfruit-500: #45012e; /* Azul — el azul informativo de su web (#2196F3 / #1976D2 / #E3F2FD). Conserva el nombre "slushie" para no tocar reglas que ya lo consumen. */ --slushie-100: #e3f2fd; --slushie-200: #90caf9; --slushie-300: #2196f3; --slushie-400: #1976d2; --slushie-500: #0d2a4a; /* Ube — RESERVA (sin uso en las secciones actuales) */ --ube-100: #f5f3ff; --ube-200: #c8bbfb; --ube-300: #a07bf9; --ube-400: #6d4cd6; --ube-500: #160038; /* ========================================================================== 2. TOKENS SEMÁNTICOS -------------------------------------------------------------------------- Nunca uses un swatch directo en el CSS de componentes: usa estos. Así el modo oscuro y los re-brandings funcionan solos. ====================================================================== */ --color-bg: var(--oat-100); /* lienzo de la página */ --color-bg-subtle: var(--oat-200); /* secciones alternas */ --color-surface: #ffffff; /* cards por encima del lienzo */ --color-surface-sunk: var(--oat-200); /* inputs, code blocks */ --color-text: var(--oat-500); /* titulares y copy principal */ /* NO es --oat-400: ese gris de marca da 4.27:1 sobre el fondo, por debajo del 4.5:1 que exige WCAG AA. Este tono da 4.90:1 y es indistinguible. El swatch de marca se conserva intacto para formas e ilustraciones. */ --color-text-muted: #6b6964; /* subtítulos, captions, footer */ --color-text-invert: var(--oat-100); /* texto sobre fondos oscuros */ --color-border: var(--oat-300); /* borde por defecto (1px) */ --color-border-strong: var(--oat-500); /* borde de énfasis */ --color-accent: var(--blueberry-400); /* acción/enlace */ --color-accent-hover: var(--blueberry-300); /* coral vivo */ --color-accent-soft: var(--blueberry-100); /* fondo de badge/acento */ /* Colores de apoyo con nombre semántico (los de su web) */ --color-info: var(--slushie-400); /* azul informativo */ --color-success: var(--lime-400); /* verde de confirmación */ --color-focus: var(--blueberry-400); /* anillo de foco accesible */ --color-overlay: color-mix(in srgb, var(--oat-500) 55%, transparent); /* ========================================================================== 3. TIPOGRAFÍA -------------------------------------------------------------------------- Clay usa fuentes con licencia comercial: · Roobert → titulares y UI (grotesca geométrica) · Roobert Mono → eyebrows y datos · Canela → serif editorial ocasional El template declara esos nombres PRIMERO: si compras/instalas la licencia, el sitio los toma automáticamente. Si no, cae en las alternativas libres (Inter Tight / JetBrains Mono / Instrument Serif) que replican el ritmo. Para cambiar de fuente: edita solo --font-sans / --font-mono / --font-serif. ====================================================================== */ --font-sans: "Roobert", "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --font-mono: "Roobert Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --font-serif: "Canela", "Instrument Serif", Georgia, "Times New Roman", serif; /* --- Escala fluida ------------------------------------------------------ Interpolación lineal entre 320px (20rem) y 1440px (90rem) de viewport, exactamente el rango que usa Clay. Fórmula: clamp(MIN, MIN + (MAX-MIN) * (100vw - 20rem) / 70, MAX) Cambiar un tamaño = cambiar sus dos extremos. No hay media queries de por medio: el tipo escala de forma continua. -------------------------------------------------------------------- */ /* h1–h3 siguen la escala grande que Clay usa en su home (no la escala base de su librería): titulares muy grandes y con interlineado 1. Es la decisión tipográfica que más define el look. */ --text-h1: clamp(2.8rem, calc(2.8rem + 2.70 * (100vw - 20rem) / 70), 5.5rem); --text-h2: clamp(2.5rem, calc(2.5rem + 2.00 * (100vw - 20rem) / 70), 4.5rem); --text-h3: clamp(2.0rem, calc(2.0rem + 1.00 * (100vw - 20rem) / 70), 3.0rem); --text-h4: clamp(1.3rem, calc(1.3rem + 0.20 * (100vw - 20rem) / 70), 1.5rem); --text-h5: clamp(1.1rem, calc(1.1rem + 0.10 * (100vw - 20rem) / 70), 1.2rem); --text-h6: clamp(0.9rem, calc(0.9rem + 0.10 * (100vw - 20rem) / 70), 1.0rem); --text-lg: clamp(1.125rem, calc(1.125rem + 0.125 * (100vw - 20rem) / 70), 1.25rem); --text-md: 1rem; --text-sm: 0.875rem; --text-xs: 0.8rem; --text-eyebrow: clamp(0.7rem, calc(0.7rem + 0.10 * (100vw - 20rem) / 70), 0.8rem); /* Pesos, interlineado y tracking (los titulares de Clay van muy cerrados) */ --weight-regular: 400; --weight-medium: 500; --weight-semibold:600; --leading-h1: 1; --leading-h2: 1; /* titulares como bloque compacto, no como párrafo */ --leading-h3: 1; --leading-h4: 1.4; --leading-body: 1.4; /* el cuerpo de Clay es más apretado de lo habitual */ --tracking-display: -0.04em; /* h1–h3: el sello visual de Clay */ --tracking-normal: 0em; --tracking-eyebrow: 0.1em; /* mono + mayúsculas + separado */ /* ========================================================================== 4. LAYOUT Y ESPACIADO ====================================================================== */ /* 1280px. Ojo: NO es lo mismo que el 90rem del rango fluido de la tipografía — ese es el viewport donde el tipo deja de crecer. */ --container-max: 80rem; --container-pad: clamp(1.25rem, calc(1.25rem + 1.25 * (100vw - 20rem) / 70), 2.5rem); --grid-gap: clamp(1.25rem, calc(1.25rem + 1.25 * (100vw - 20rem) / 70), 2.5rem); /* Padding vertical de sección: 3rem en móvil → 6rem en desktop */ --section-pad: clamp(3rem, calc(3rem + 3 * (100vw - 20rem) / 70), 6rem); --section-pad-lg: calc(var(--section-pad) * 1.5); --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; --header-height: 4rem; /* alto de la barra sticky */ --announce-height: 2.5rem; /* ========================================================================== 5. COMPONENTES ====================================================================== */ --radius-sm: 0.375rem; --radius-md: 0.5rem; /* botones — valor exacto de Clay */ --radius-lg: 0.75rem; --radius-xl: 1rem; /* cards grandes */ --radius-2xl: 1.5rem; /* paneles de producto */ --radius-pill: 999px; --btn-pad-y: 0.7em; /* Clay usa em para que escale con el font-size */ --btn-pad-x: 1em; --btn-font-size: 1rem; --btn-weight: var(--weight-medium); --btn-radius: var(--radius-md); --card-pad: clamp(1rem, calc(1rem + 0.5 * (100vw - 20rem) / 70), 1.5rem); --card-radius: 1.125rem; /* valor exacto de las cards de Clay */ --border-thin: 1px solid var(--color-border); /* Borde de dos tonos de las cards de Clay: luz arriba, sombra abajo, sin bordes laterales. Da relieve sin sombra proyectada. */ --card-edge-top: rgba(255, 255, 255, 0.9); --card-edge-bottom: rgba(123, 121, 116, 0.15); /* Sombras suaves: Clay es un diseño muy plano, la profundidad viene del borde y del color, no de sombras fuertes. Úsalas con moderación. */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06); --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.10); --shadow-pop: 0 24px 70px rgba(0, 0, 0, 0.14); /* ========================================================================== 6. MOVIMIENTO -------------------------------------------------------------------------- Una sola fuente de verdad para todas las animaciones. Si el sitio se siente lento, baja --dur-*; si se siente brusco, sube --ease-out. ====================================================================== */ --dur-instant: 0.12s; --dur-fast: 0.2s; --dur-base: 0.35s; --dur-slow: 0.6s; --dur-slower: 0.9s; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* entradas (expo-out) */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* transiciones de estado */ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* micro-rebote en hover */ --reveal-distance: 24px; /* cuánto sube un elemento al aparecer */ --reveal-stagger: 80ms; /* retraso entre hermanos en cascada */ --marquee-duration: 40s; /* velocidad del carrusel de logos */ /* Desplazamiento del contenido fijo superior: header + barra de anuncio. main.js lo reduce a solo el header cuando el anuncio se cierra. */ --nav-offset: calc(var(--header-height) + var(--announce-height)); } /* ============================================================================ MODO OSCURO — DESACTIVADO ---------------------------------------------------------------------------- El sitio es solo modo claro por decisión de la iglesia. Aquí vivían los overrides de `prefers-color-scheme: dark` y `[data-theme="dark"]`. Si algún día se reactiva, hay que devolver: este bloque, el script anti-parpadeo del , el botón .theme-toggle, initTheme() en main.js y la variante blanca del logo (assets/img/logo-iva-blanco.png, que sigue en el repo). Ver docs/PENDIENTES.md ========================================================================== */