feat: Awwwards transformation Phases 1-6
Phase 1 — Design System: - Glassmorphism tokens (--glass-bg, --glass-border, --blur-glass) - Gradient tokens (--hds-gradient-hero, --hds-gradient-section) - Motion tokens (--ease-spring, --ease-out-expo) - .glass-card component class with hover uplift + mouse-tracking glow - .noise-overlay: SVG feTurbulence texture at 0.025 opacity - Buttons with spring easing, prefers-reduced-motion support Phase 2 — Preloader + Hero: - Preloader.astro: vanilla JS logo fade-in + loading bar + slide-up - Uses sessionStorage to skip on repeat visits - Hero.astro: full-bleed 100dvh, GSAP timeline, glass ring decoration - Parallax floating SVG shapes (sine yoyo animation) - i18n: hero.scrollDown key Phase 3 — 'Por qué elegirnos' Bento Grid: - DifferenceCards.astro: asymmetric 3-column bento grid - Glass cards with mouse-tracking glow (--mouse-x/--mouse-y) - GSAP ScrollTrigger stagger reveal (opacity 0→1, y: 40→0) Phase 4 — Pricing + Process: - planes.astro: 5 visible + 4 in details accordion - Empresarial as hero card, price annual only (no toggle) - ProcessSteps.astro: timeline + ScrollTrigger progress bar Phase 5 — Global Polish: - LenisScroll.astro: smooth scroll (duration 1.2, cubic easing) - GSAP ticker sync, noise overlay in BaseLayout Phase 6 — Deploy: - deploy.sh: auto-detects repo path, auto-builds if stale - Relative paths instead of hardcoded /root/opencode/development
This commit is contained in:
Mauricio López Coria
+148
-12
@@ -20,9 +20,13 @@
|
||||
|
||||
@custom-variant dark (&:where(.dark, .dark *));
|
||||
|
||||
/* ========================================
|
||||
Theme Tokens — Glassmorphism + Organic
|
||||
======================================== */
|
||||
@theme {
|
||||
--color-hds-naranja: #EE7623;
|
||||
--color-hds-naranja-hover: #D8651A;
|
||||
--color-hds-naranja-glow: rgba(238, 118, 35, 0.25);
|
||||
--color-hds-coral: #FA9F5C;
|
||||
--color-hds-durazno: #FFCBA1;
|
||||
--color-hds-tinta: #1A1612;
|
||||
@@ -36,9 +40,14 @@
|
||||
--tracking-eyebrow: 0.25em;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
Design Tokens (CSS custom properties)
|
||||
======================================== */
|
||||
@layer base {
|
||||
:root {
|
||||
color-scheme: light;
|
||||
|
||||
/* Core surface tokens */
|
||||
--hds-bg: #FAF6EE;
|
||||
--hds-bg-soft: #F5EFE3;
|
||||
--hds-bg-section: #FFFFFF;
|
||||
@@ -48,6 +57,25 @@
|
||||
--hds-line: #E8E2D5;
|
||||
--hds-card: #FFFFFF;
|
||||
--hds-card-soft: #FFFFFF;
|
||||
|
||||
/* Glassmorphism system */
|
||||
--glass-bg: rgba(255, 255, 255, 0.45);
|
||||
--glass-bg-hover: rgba(255, 255, 255, 0.65);
|
||||
--glass-border: rgba(255, 255, 255, 0.25);
|
||||
--glass-border-hover: rgba(238, 118, 35, 0.35);
|
||||
--glass-shadow: 0 8px 32px rgba(26, 22, 18, 0.06);
|
||||
--glass-shadow-hover: 0 16px 48px rgba(238, 118, 35, 0.12);
|
||||
--radius-glass: 24px;
|
||||
--blur-glass: 20px;
|
||||
|
||||
/* Gradients */
|
||||
--hds-gradient-hero: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(238, 118, 35, 0.08) 0%, transparent 70%);
|
||||
--hds-gradient-section: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(250, 159, 92, 0.06) 0%, transparent 70%);
|
||||
--hds-gradient-card-glow: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(238, 118, 35, 0.08) 0%, transparent 50%);
|
||||
|
||||
/* Motion */
|
||||
--ease-spring: cubic-bezier(0.16, 1.2, 0.3, 1);
|
||||
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
:root.dark {
|
||||
@@ -61,6 +89,17 @@
|
||||
--hds-line: #3A332C;
|
||||
--hds-card: #2A2520;
|
||||
--hds-card-soft: #221E1A;
|
||||
|
||||
--glass-bg: rgba(42, 37, 32, 0.55);
|
||||
--glass-bg-hover: rgba(42, 37, 32, 0.75);
|
||||
--glass-border: rgba(255, 255, 255, 0.08);
|
||||
--glass-border-hover: rgba(238, 118, 35, 0.3);
|
||||
--glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
|
||||
--glass-shadow-hover: 0 16px 48px rgba(238, 118, 35, 0.15);
|
||||
|
||||
--hds-gradient-hero: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(238, 118, 35, 0.12) 0%, transparent 70%);
|
||||
--hds-gradient-section: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(250, 159, 92, 0.08) 0%, transparent 70%);
|
||||
--hds-gradient-card-glow: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(238, 118, 35, 0.12) 0%, transparent 50%);
|
||||
}
|
||||
|
||||
html {
|
||||
@@ -74,7 +113,7 @@
|
||||
background-color: var(--hds-bg);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
transition: background-color 0.2s ease, color 0.2s ease;
|
||||
transition: background-color 0.3s var(--ease-out-expo), color 0.3s var(--ease-out-expo);
|
||||
}
|
||||
|
||||
h1, h2, h3, h4 {
|
||||
@@ -89,11 +128,84 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
Noise Texture Overlay (global)
|
||||
======================================== */
|
||||
@layer base {
|
||||
.noise-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 9999;
|
||||
pointer-events: none;
|
||||
opacity: 0.025;
|
||||
mix-blend-mode: overlay;
|
||||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
|
||||
background-repeat: repeat;
|
||||
background-size: 256px 256px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
Glass Card System
|
||||
======================================== */
|
||||
@layer components {
|
||||
.font-display { font-family: var(--font-display); }
|
||||
.font-editorial { font-family: var(--font-editorial); }
|
||||
.font-brand { font-family: var(--font-brand); letter-spacing: 0.01em; }
|
||||
|
||||
/* Glass Card */
|
||||
.glass-card {
|
||||
position: relative;
|
||||
background: var(--glass-bg);
|
||||
border: 1px solid var(--glass-border);
|
||||
border-radius: var(--radius-glass);
|
||||
backdrop-filter: blur(var(--blur-glass));
|
||||
-webkit-backdrop-filter: blur(var(--blur-glass));
|
||||
box-shadow: var(--glass-shadow);
|
||||
transition:
|
||||
background 0.3s var(--ease-out-expo),
|
||||
border-color 0.3s var(--ease-out-expo),
|
||||
box-shadow 0.3s var(--ease-out-expo),
|
||||
transform 0.4s var(--ease-spring);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.glass-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
opacity: 0;
|
||||
transition: opacity 0.4s var(--ease-out-expo);
|
||||
background: var(--hds-gradient-card-glow);
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.glass-card:hover {
|
||||
background: var(--glass-bg-hover);
|
||||
border-color: var(--glass-border-hover);
|
||||
box-shadow: var(--glass-shadow-hover);
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
|
||||
.glass-card:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.glass-card > * {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Glass Card — hero variant (spans more, stronger glow) */
|
||||
.glass-card-hero {
|
||||
background: var(--glass-bg-hover);
|
||||
border-color: var(--glass-border-hover);
|
||||
box-shadow: var(--glass-shadow-hover);
|
||||
}
|
||||
|
||||
/* Section eyebrow (unchanged, keep original) */
|
||||
.eyebrow {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
@@ -113,6 +225,7 @@
|
||||
background: var(--color-hds-naranja);
|
||||
}
|
||||
|
||||
/* Buttons with spring easing */
|
||||
.btn-primary {
|
||||
background: var(--color-hds-naranja);
|
||||
color: #FFFFFF;
|
||||
@@ -123,13 +236,18 @@
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-size: 0.95rem;
|
||||
transition: background 0.2s ease, transform 0.2s ease;
|
||||
transition:
|
||||
background 0.2s ease,
|
||||
transform 0.3s var(--ease-spring),
|
||||
box-shadow 0.3s var(--ease-spring);
|
||||
border: 2px solid var(--color-hds-naranja);
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn-primary:hover {
|
||||
background: var(--color-hds-naranja-hover);
|
||||
border-color: var(--color-hds-naranja-hover);
|
||||
transform: scale(1.03);
|
||||
box-shadow: 0 8px 28px rgba(238, 118, 35, 0.3);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
@@ -142,13 +260,16 @@
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-size: 0.95rem;
|
||||
transition: all 0.2s ease;
|
||||
transition:
|
||||
all 0.2s ease,
|
||||
transform 0.3s var(--ease-spring);
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn-secondary:hover {
|
||||
background: var(--hds-fg);
|
||||
color: var(--hds-bg);
|
||||
transform: scale(1.03);
|
||||
}
|
||||
|
||||
.btn-ghost {
|
||||
@@ -158,7 +279,7 @@
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
transition: gap 0.2s ease;
|
||||
transition: gap 0.3s var(--ease-out-expo);
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
@@ -179,6 +300,7 @@
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Legacy service-card (keep reference, deprecate toward glass-card) */
|
||||
.service-card {
|
||||
background: var(--hds-card);
|
||||
border: 1px solid var(--hds-line);
|
||||
@@ -192,6 +314,7 @@
|
||||
box-shadow: 0 12px 32px rgba(238,118,35,0.08);
|
||||
}
|
||||
|
||||
/* Particle grid background */
|
||||
.particle-grid {
|
||||
background-image:
|
||||
linear-gradient(to right, rgba(238,118,35,0.10) 1px, transparent 1px),
|
||||
@@ -221,12 +344,20 @@
|
||||
.skip-link:focus { top: 1rem; }
|
||||
}
|
||||
|
||||
:focus-visible {
|
||||
outline: 2px solid var(--color-hds-naranja);
|
||||
outline-offset: 3px;
|
||||
border-radius: 2px;
|
||||
/* ========================================
|
||||
Focus & A11y
|
||||
======================================== */
|
||||
@layer base {
|
||||
:focus-visible {
|
||||
outline: 2px solid var(--color-hds-naranja);
|
||||
outline-offset: 3px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
Reduced Motion
|
||||
======================================== */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*, *::before, *::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
@@ -235,9 +366,14 @@
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
.reveal { opacity: 1 !important; transform: none !important; }
|
||||
.noise-overlay { display: none; }
|
||||
.glass-card:hover { transform: none; box-shadow: var(--glass-shadow); }
|
||||
.btn-primary:hover, .btn-secondary:hover { transform: none; }
|
||||
}
|
||||
|
||||
/* Scroll reveal animations */
|
||||
/* ========================================
|
||||
Scroll Reveal Animations
|
||||
======================================== */
|
||||
.reveal {
|
||||
opacity: 0;
|
||||
transform: translateY(24px);
|
||||
@@ -269,7 +405,9 @@
|
||||
.stagger.is-visible > *:nth-child(8) { opacity: 1; transform: translateY(0); transition-delay: 0.56s; }
|
||||
.stagger.is-visible > *:nth-child(9) { opacity: 1; transform: translateY(0); transition-delay: 0.64s; }
|
||||
|
||||
/* Float subtle */
|
||||
/* ========================================
|
||||
Keyframes
|
||||
======================================== */
|
||||
@keyframes floaty {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-8px); }
|
||||
@@ -282,7 +420,6 @@
|
||||
animation-delay: 1s;
|
||||
}
|
||||
|
||||
/* Pulse glow */
|
||||
@keyframes pulse-glow {
|
||||
0%, 100% { box-shadow: 0 0 0 0 rgba(238,118,35,0.4); }
|
||||
50% { box-shadow: 0 0 0 12px rgba(238,118,35,0); }
|
||||
@@ -291,7 +428,6 @@
|
||||
animation: pulse-glow 2.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Counter */
|
||||
@keyframes countUp {
|
||||
from { opacity: 0.3; transform: translateY(8px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
|
||||
Reference in New Issue
Block a user