/** * ============================================================ * L-LEDS — DESIGN TOKENS GLOBALES (Fase 1 rev.2 — Paleta Oficial) * Archivo : ll-tokens.css * Prefijo : --ll- (evita colisiones con Elementor / WooCommerce) * * CÓMO USAR: * - Incluir ANTES que cualquier hoja de Elementor. * - En Elementor → Theme Builder: pegar este en el * via "Custom Code" (antes de ). * - En Antigravity: importar en el entry-point principal. * * PALETA OFICIAL L-LEDS (rev.2 — integrada en Fase 3): * #7DDA00 Verde LED Vibrante → Primary / CTAs * #C2F000 Verde Neón / Lima → Hover / Acentos * #1B4000 Verde Bosque → Surface / Tarjetas * #050A00 Negro Ónix / Abisal → Base / Body * #F2F5F0 Blanco Plata → Texto principal * * JUSTIFICACIÓN UX: * El verde LED (λ ≈ 520 nm) es la longitud de onda de mayor * sensibilidad del ojo humano → máximo contraste perceptual * sobre fondo casi-negro (#050A00). El Lima (#C2F000) activa * la zona de acción (CTAs, hovers) sin perder coherencia con * el verde vibrante. El Verde Bosque (#1B4000) genera profundidad * sin salir de la familia cromática de la marca. * ============================================================ */ /* ─── GOOGLE FONTS (Outfit — sin dependencia pesada) ───────── */ @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap'); /* ═══════════════════════════════════════════════════════════ :ROOT — DESIGN TOKENS ═══════════════════════════════════════════════════════════ */ :root { /* ── 1. PALETA DE COLOR OFICIAL L-LEDS ───────────────────── Actualizada en Fase 3 con valores de identidad de marca. ─────────────────────────────────────────────────────────── */ /* ── Fondos (familia verde oscura — Dark Mode nativo) ─────── */ --ll-color-bg-base : #050A00; /* Negro Ónix/Verde Abisal — body */ --ll-color-bg-surface : #1B4000; /* Verde Bosque — tarjetas, modales */ --ll-color-bg-elevated : #243300; /* +luminosidad del bosque — dropdowns */ --ll-color-bg-overlay : rgba(5, 10, 0, 0.90); /* overlay semitransparente */ /* ── Primary: Verde LED Vibrante ──────────────────────────── */ /* λ ≈ 520 nm — pico de sensibilidad del ojo humano. */ /* Máximo contraste WCAG AA sobre #050A00 (ratio ~7.8:1). */ --ll-color-primary : #7DDA00; /* Verde LED Vibrante — CTAs */ --ll-color-primary-hover : #C2F000; /* Verde Neón/Lima — hover / acciones */ --ll-color-primary-muted : rgba(125, 218, 0, 0.15); /* fondo de badges y glows */ --ll-color-primary-glow : 0 0 20px rgba(125, 218, 0, 0.40), 0 0 40px rgba(194, 240, 0, 0.15); /* efecto glow LED bicolor */ /* ── Secondary: Verde Neón/Lima directo ──────────────────── */ --ll-color-secondary : #C2F000; /* Verde Neón/Lima — acento secundario */ --ll-color-secondary-hover : #D4FF1A; /* +luminosidad del Lima */ /* ── Semánticos de estado ────────────────────────────────── */ --ll-color-success : #7DDA00; /* reutiliza primary (verde = éxito en este contexto) */ --ll-color-warning : #F59E0B; --ll-color-error : #EF4444; --ll-color-info : #38BDF8; /* ── Tipografía (Blanco Plata sobre fondos verdes oscuros) ── */ --ll-color-text-primary : #F2F5F0; /* Blanco Plata — cuerpo y headings */ --ll-color-text-light : #F2F5F0; /* alias de text-primary (Fase 4 ref.) */ --ll-color-text-secondary : #A3B89A; /* verde-gris apagado — subtítulos */ --ll-color-text-muted : #4A6040; /* verde bosque claro — inactivos */ --ll-color-text-inverted : #050A00; /* Negro Ónix — texto SOBRE botón verde */ /* ── Panel off-canvas (alias semántico Fase 4) ───────────── */ --ll-color-bg-panel : #1B4000; /* = bg-surface — fondo del panel lateral */ /* ── Bordes (ajustados a la familia verde) ───────────────── */ --ll-color-border : rgba(125, 218, 0, 0.10); --ll-color-border-strong : rgba(125, 218, 0, 0.22); --ll-color-border-accent : rgba(194, 240, 0, 0.45); /* ── Alias semántico para el Loader (Fase 5 ref.) ─────────── */ --ll-color-bg-dark : #050A00; /* = bg-base — fondo del loader SPA */ /* ── 2. TIPOGRAFÍA ──────────────────────────────────────── */ --ll-font-sans : 'Outfit', system-ui, -apple-system, sans-serif; --ll-font-mono : 'Courier New', Courier, monospace; /* precios, métricas */ /* Escala modular (1.25× — Major Third) */ --ll-text-xs : 0.64rem; /* 10.24px — legal, etiquetas finas */ --ll-text-sm : 0.80rem; /* 12.80px — labels, captions */ --ll-text-base : 1.00rem; /* 16px — párrafo base */ --ll-text-md : 1.25rem; /* 20px — lead / intro */ --ll-text-lg : 1.563rem; /* 25px — subtítulos sección */ --ll-text-xl : 1.953rem; /* 31px — títulos de sección */ --ll-text-2xl : 2.441rem; /* 39px — H2 hero */ --ll-text-3xl : 3.052rem; /* 49px — H1 hero */ /* Pesos */ --ll-font-light : 300; --ll-font-regular : 400; --ll-font-medium : 500; --ll-font-semibold : 600; --ll-font-bold : 700; --ll-font-extrabold: 800; /* Interlineado */ --ll-leading-tight : 1.2; --ll-leading-normal : 1.6; --ll-leading-loose : 1.85; /* Letter-spacing */ --ll-tracking-wide : 0.05em; --ll-tracking-widest : 0.12em; /* capslock / categorías */ --ll-tracking-tight : -0.02em; /* títulos grandes */ /* ── 3. ESPACIADO BASE (escala rem) ─────────────────────── */ /* Ratio 4px base → garantiza alineación con grillas de 4/8px */ --ll-space-1 : 0.25rem; /* 4px */ --ll-space-2 : 0.50rem; /* 8px */ --ll-space-3 : 0.75rem; /* 12px */ --ll-space-4 : 1.00rem; /* 16px */ --ll-space-5 : 1.25rem; /* 20px */ --ll-space-6 : 1.50rem; /* 24px */ --ll-space-8 : 2.00rem; /* 32px */ --ll-space-10 : 2.50rem; /* 40px */ --ll-space-12 : 3.00rem; /* 48px */ --ll-space-16 : 4.00rem; /* 64px */ --ll-space-20 : 5.00rem; /* 80px */ --ll-space-24 : 6.00rem; /* 96px */ /* Contenedor máximo */ --ll-container-max : 1280px; --ll-container-pad : var(--ll-space-6); /* padding lateral páginas */ /* ── 4. RADIOS DE BORDE ─────────────────────────────────── */ --ll-radius-sm : 4px; --ll-radius-md : 8px; --ll-radius-lg : 12px; --ll-radius-xl : 16px; --ll-radius-2xl : 24px; --ll-radius-full : 9999px; /* pills / avatares */ /* ── 5. SOMBRAS ─────────────────────────────────────────── */ --ll-shadow-sm : 0 1px 3px rgba(0, 0, 0, 0.5); --ll-shadow-md : 0 4px 12px rgba(0, 0, 0, 0.6); --ll-shadow-lg : 0 8px 32px rgba(0, 0, 0, 0.70); --ll-shadow-xl : 0 16px 48px rgba(0, 0, 0, 0.80); /* Sombra de acento (efecto glow LED verde — bicolor) */ --ll-shadow-led : 0 0 24px rgba(125, 218, 0, 0.30), 0 0 48px rgba(194, 240, 0, 0.12); /* ── 6. TRANSICIONES (micro-animaciones) ────────────────── */ --ll-transition-fast : 150ms ease; --ll-transition-base : 250ms ease; --ll-transition-slow : 400ms cubic-bezier(0.4, 0, 0.2, 1); --ll-transition-spring : 350ms cubic-bezier(0.34, 1.56, 0.64, 1); --ll-transition-page : 500ms cubic-bezier(0.4, 0, 0.2, 1); /* SPA page transition */ /* ── 7. Z-INDEX (capas predecibles) ─────────────────────── */ --ll-z-base : 0; --ll-z-content : 10; --ll-z-dropdown: 100; --ll-z-sticky : 200; --ll-z-header : 300; --ll-z-modal : 400; --ll-z-toast : 500; --ll-z-loader : 9999; /* Global Loader SPA — siempre en la capa superior */ } /* ═══════════════════════════════════════════════════════════ RESET MÍNIMO COMPATIBLE (no rompe Elementor) ═══════════════════════════════════════════════════════════ */ /* Solo afecta elementos que Elementor no controla directamente */ *, *::before, *::after { box-sizing: border-box; } html { font-size: 16px; /* base rem */ scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { background-color : var(--ll-color-bg-base); /* #050A00 Negro Ónix */ color : var(--ll-color-text-primary); /* #F2F5F0 Blanco Plata */ font-family : var(--ll-font-sans); font-size : var(--ll-text-base); line-height : var(--ll-leading-normal); font-weight : var(--ll-font-regular); } /* ═══════════════════════════════════════════════════════════ UTILIDADES ATÓMICAS GLOBALES (compatibles con Elementor) Prefijadas con .ll- para aislamiento de clase. ═══════════════════════════════════════════════════════════ */ /* Contenedor centrado de ancho máximo */ .ll-container { max-width : var(--ll-container-max); margin-inline: auto; padding-inline: var(--ll-container-pad); width : 100%; } /* Botón CTA primario (Verde LED Vibrante) */ .ll-btn-primary { display : inline-flex; align-items : center; gap : var(--ll-space-2); background : var(--ll-color-primary); /* #7DDA00 Verde LED */ color : var(--ll-color-text-inverted); /* #050A00 Negro Ónix */ font-family : var(--ll-font-sans); font-size : var(--ll-text-base); font-weight : var(--ll-font-semibold); padding : var(--ll-space-3) var(--ll-space-6); border-radius : var(--ll-radius-full); border : none; cursor : pointer; text-decoration : none; letter-spacing : var(--ll-tracking-wide); transition : background var(--ll-transition-base), transform var(--ll-transition-spring), box-shadow var(--ll-transition-base); } .ll-btn-primary:hover, .ll-btn-primary:focus-visible { background : var(--ll-color-primary-hover); /* #C2F000 Verde Neón */ box-shadow : var(--ll-shadow-led); transform : translateY(-2px); } /* Botón secundario (outline — Verde LED) */ .ll-btn-outline { display : inline-flex; align-items : center; gap : var(--ll-space-2); background : transparent; color : var(--ll-color-primary); /* #7DDA00 */ font-family : var(--ll-font-sans); font-size : var(--ll-text-base); font-weight : var(--ll-font-medium); padding : var(--ll-space-3) var(--ll-space-6); border-radius : var(--ll-radius-full); border : 1.5px solid var(--ll-color-border-accent); cursor : pointer; text-decoration : none; transition : all var(--ll-transition-base); } .ll-btn-outline:hover { background : var(--ll-color-primary-muted); border-color : var(--ll-color-primary-hover); /* #C2F000 Lima */ color : var(--ll-color-primary-hover); } /* Animación de entrada (scroll reveal) — aceleración GPU */ .ll-fade-in { opacity : 0; transform : translateY(20px); transition: opacity var(--ll-transition-slow), transform var(--ll-transition-slow); } .ll-fade-in.is-visible { opacity : 1; transform : translateY(0); }