Registro del concepto
Fecha del registro: 31 de mayo de 2026. La tecnología y las capturas describen el prototipo según quedó documentado en esta fecha. Cualquier observación de rendimiento corresponde al mismo registro puntual. No se implica que exista una implementación actual para un cliente.
Sterling & Partners es un sitio web de calidad portfolio para una firma de abogados que canaliza la gravedad y refinamiento de una práctica legal de primer nivel. El sistema de diseño se ancla en azul marino oscuro y dorado champán, una paleta que comunica autoridad sin frialdad y lujo sin exceso. Cada sección, desde el hero con sus contadores animados hasta las tarjetas de áreas de práctica con revelación de imagen, construye sobre un lenguaje visual consistente de titulares serif, acentos dorados cálidos y movimiento contenido.
Construido completamente en HTML, CSS y JavaScript puro sin paso de compilación, el sitio demuestra que una experiencia pulida de nivel Awwwards no requiere un framework. Intersection Observer maneja las revelaciones activadas por scroll, GSAP impulsa las animaciones del hero y contadores, y la experiencia móvil incluye una barra de navegación inferior estilo app nativa con retroalimentación háptica en dispositivos compatibles.
Demo en Vivo: https://sterlingandpartner.apalaugonzalez.com/
Características Principales
Hero con Estadísticas Animadas
- Hero de viewport completo con servicio de imágenes responsivo (recorte móvil vía <picture>)
- Contadores flotantes (35+ años, 5,000+ casos, 98% satisfacción) que incrementan al hacer scroll con duración y easing personalizables
- Indicador de scroll con línea animada que pulsa para invitar a la exploración
- Gradiente de overlay oscuro para legibilidad de texto sobre fotografía
Áreas de Práctica con Revelación de Imagen
- Seis tarjetas de áreas de práctica (Corporativo, Familiar, Bienes Raíces, Propiedad Intelectual, Defensa Penal, Inmigración) con revelación de imagen al pasar el cursor
- Cada tarjeta presenta una imagen representativa que se recorta desde el lateral al hacer hover, proporcionando contexto visual sin saturar el diseño
- Diseño limpio de tarjetas con bordes de acento dorado, iconos de encabezado y enlaces "Más información" con flechas animadas
- Sección de abogados con cuatro tarjetas de perfil detalladas
- Cada tarjeta incluye retrato, nombre, título, especialidades y una breve biografía
- El estado hover revela una línea de acento dorado y elevación sutil
- Grilla responsiva que se adapta de 4 columnas en desktop a apilada en móvil
Testimonios con Carrusel Auto-Avanzante
- Carrusel de testimonios con avance automático cada 5 segundos
- Cada diapositiva incluye un ícono de cita dorado, texto del testimonio, nombre del cliente y tipo de caso
- Transiciones suaves de fundido cruzado entre diapositivas
- Navegación manual mediante indicadores de puntos, deslizamiento en móvil
Formulario de Contacto y Consulta
- Formulario de contacto con selector de tema desplegable (Consulta General, Consulta Legal, Facturación, Carreras)
- Campos de área de práctica, nombre, correo, teléfono y mensaje con validación en tiempo real
- Retroalimentación de envío de formulario con estado de carga y confirmación de éxito
- Barra lateral de contacto con teléfono, correo, horario de oficina y dirección
- Diseño optimizado para móvil: formulario se apila verticalmente, información de contacto se mueve arriba
- Menú overlay de pantalla completa con animaciones escalonadas de enlaces
- Toggle de hamburger a X con transición CSS
- Barra de navegación inferior persistente en móvil con secciones clave (Inicio, Práctica, Abogados, Contacto)
- Modal sheet inferior para opciones de contacto (llamar, correo, direcciones)
- Retroalimentación háptica en interacciones de navegación vía navigator.vibrate()
- Cormorant Garamond (500, 600, 700, variantes itálicas) para todos los titulares de display, títulos de sección y citas en bloque
- Pila de sans-serif del sistema para cuerpo de texto, navegación, botones y etiquetas
- Jerarquía deliberada de tamaños: título hero a 72px, títulos de sección a 48px, cuerpo a 16px
- Azul Marino Oscuro: #0A1628 (fondos primarios, overlay hero, alternancia de secciones)
- Azul Marino Claro: #111D30 (superficies de tarjetas, estados hover)
- Dorado Champán: #C9A96E (bordes de acento, etiquetas, enlaces, números de estadísticas, highlights hover)
- Dorado Claro: #E8D5B5 (oro secundario para acentos sutiles)
- Blanco: #FFFFFF (texto sobre fondos oscuros, texto de tarjetas)
- Atenuado: #8899AA (texto secundario, etiquetas)
- Acento de borde izquierdo dorado en tarjetas de práctica y elementos de características
- Contenedores de imagen redondeados con elevación de sombra sutil
- Botón primario: relleno dorado con texto oscuro, hover aclara el dorado
- Botón secundario: contorno dorado con texto dorado, hover rellena dorado
- Etiqueta de sección: mayúsculas, con tracking, dorado, antes de cada título de sección
- HTML5 puro con elementos semánticos (<header>, <main>, <section>, <article>, <footer>) y etiquetas ARIA
- CSS3 puro con custom properties para el sistema de tokens de diseño, CSS Grid y Flexbox para layouts, y @keyframes para micro-animaciones
- JavaScript puro (ES modules) con Intersection Observer para revelaciones de scroll y detección de características
- GSAP + ScrollTrigger para secuencia de entrada del hero, animaciones de contadores de estadísticas y revelaciones escalonadas de tarjetas
- Intersection Observer API para animaciones de sección activadas por scroll (fade-in, slide-up, revelaciones image-clip)
- Lenis para scrolling suave basado en momentum
- Transiciones y keyframes CSS para estados hover, interacciones de botones y overlay del menú móvil
- CSS mobile-first con breakpoints en 768px (tablet) y 1024px (desktop)
- Layout consciente de safe-area usando env(safe-area-inset-*) para dispositivos con notch
- prefers-reduced-motion deshabilita animaciones GSAP, Lenis smooth scroll y animaciones CSS para usuarios que prefieren movimiento reducido
- -webkit-overflow-scrolling: touch en contenedores scrollables para momentum nativo en iOS
sterling-partner/
├── index.html # Punto de entrada single-page con todas las secciones
├── css/
│ ├── main.css # Tokens de diseño, layout, componentes, secciones
│ ├── animations.css # @keyframes, clases de scroll reveal, utilidades de transición
│ └── responsive.css # Breakpoints mobile-first y ajustes de safe-area
├── js/
│ ├── main.js # Navegación, efectos de scroll, menú móvil, tab bar, formularios, hápticos
│ └── animations.js # Intersection Observer para revelaciones y orquestación de animaciones
└── assets/
└── images/ # Imágenes WebP para hero, áreas de práctica, abogados, oficina, testimonios
- HTML semántico en todo el sitio: <header>, <nav>, <main>, <section>, <article>, <footer>
- Etiquetas ARIA en navegación, toggle del menú móvil y regiones interactivas
- Enlace de saltar al contenido como primer elemento enfocable
- Navegación por teclado para el menú móvil (Escape para cerrar), carrusel de testimonios (flechas) y formulario de contacto
- Indicadores de foco con estilo consistente de contorno dorado
- Texto alt en todas las imágenes de contenido; iconos SVG decorativos marcados con aria-hidden="true"
- Soporte de movimiento reducido vía media query prefers-reduced-motion
- Todas las imágenes entregadas en formato WebP con loading="lazy" y decoding="async"
- La imagen hero usa loading="eager" y fetchpriority="high" con <picture> para el recorte móvil
- Sin paso de compilación ni overhead de runtime de framework
- Custom properties CSS para theming eliminan declaraciones de estilo redundantes
- Intersection Observer reemplaza listeners de eventos de scroll para animaciones de revelación
Desafío: Autoridad Legal sin Rigidez
Desafío: Página Única Multi-Sección con Identidades Distintas
Desafío: Experiencia Móvil de App Nativa sin Framework
Desafío: Tarjetas de Áreas de Práctica con Riqueza Visual
