/*! * landing-skin.css — Premium landing system v1 * Tokens, glassmorphism, mesh gradients, 3D effects, scroll reveal. * Vanilla CSS3D, no deps. Companion JS: landing-skin.js * * Usage: * * * (or: blue, green, gold, dark) */ /* ═══════════ TOKENS — CASINUEVO BRAND (azul + naranja) ═══════════ */ .ls-page { --ls-bg: #0a1628; --ls-surface: #ffffff; --ls-text: #0f172a; --ls-text-soft: #475569; --ls-text-muted: #94a3b8; --ls-border: rgba(15,23,42,0.08); --ls-shadow-sm: 0 2px 8px rgba(15,23,42,0.06); --ls-shadow-md: 0 8px 24px rgba(15,23,42,0.10); --ls-shadow-lg: 0 24px 60px rgba(15,23,42,0.18); --ls-shadow-glow: 0 0 60px var(--ls-accent-glow, rgba(249,115,22,0.45)); --ls-radius-sm: 8px; --ls-radius: 14px; --ls-radius-lg: 22px; --ls-radius-xl: 32px; /* Brand Casinuevo: naranja primario + azul secundario */ --ls-accent: #f97316; /* orange-500 brand */ --ls-accent-2: #1877f2; /* azul Casinuevo header */ --ls-accent-3: #fb923c; /* orange-400 highlight */ --ls-accent-glow: rgba(249,115,22,0.45); --ls-grad-primary: linear-gradient(135deg, var(--ls-accent) 0%, var(--ls-accent-2) 100%); --ls-grad-fire: linear-gradient(135deg, #f97316 0%, #fb923c 50%, #fbbf24 100%); --ls-grad-ocean: linear-gradient(135deg, #1877f2 0%, #42a5f5 50%, #0ea5e9 100%); --ls-grad-sunset: linear-gradient(135deg, #1877f2 0%, #f97316 100%); --ls-mesh: radial-gradient(at 20% 0%, rgba(249,115,22,0.45) 0px, transparent 50%), radial-gradient(at 80% 0%, rgba(24,119,242,0.40) 0px, transparent 50%), radial-gradient(at 50% 60%, rgba(251,146,60,0.30) 0px, transparent 50%), radial-gradient(at 10% 100%, rgba(14,165,233,0.30) 0px, transparent 50%); --ls-ease: cubic-bezier(0.4, 0, 0.2, 1); --ls-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); } /* Skins alternativos */ .ls-page[data-skin="violet"] { --ls-accent:#7c3aed; --ls-accent-2:#3b82f6; --ls-accent-glow:rgba(124,58,237,0.45); } .ls-page[data-skin="blue"] { --ls-accent:#0ea5e9; --ls-accent-2:#6366f1; --ls-accent-glow:rgba(14,165,233,0.45); } .ls-page[data-skin="green"] { --ls-accent:#10b981; --ls-accent-2:#0ea5e9; --ls-accent-glow:rgba(16,185,129,0.45); } .ls-page[data-skin="gold"] { --ls-accent:#f59e0b; --ls-accent-2:#ef4444; --ls-accent-glow:rgba(245,158,11,0.45); } .ls-page[data-skin="dark"] { --ls-bg:#0b0d12; --ls-surface:#1e293b; --ls-text:#f1f5f9; --ls-text-soft:#cbd5e1; --ls-text-muted:#64748b; --ls-border:rgba(255,255,255,0.08); } .ls-page { color: var(--ls-text); } /* ═══════════ HERO MESH ═══════════ */ .ls-hero { position: relative; padding: clamp(60px, 10vw, 120px) 20px; background: var(--ls-bg); color: #fff; overflow: hidden; isolation: isolate; } .ls-hero::before { content: ""; position: absolute; inset: -20%; z-index: -2; background: var(--ls-mesh); filter: blur(60px) saturate(1.4); animation: lsMeshDrift 20s ease-in-out infinite alternate; } .ls-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.6) 100%); } @keyframes lsMeshDrift { 0% { transform: translate(0,0) rotate(0deg); } 50% { transform: translate(3%,-2%) rotate(3deg); } 100% { transform: translate(-2%,3%) rotate(-2deg); } } .ls-hero-inner { max-width: 1100px; margin: 0 auto; text-align: center; position: relative; z-index: 1; } .ls-hero h1 { font-size: clamp(36px, 6vw, 64px); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 16px; text-wrap: balance; } .ls-hero h1 .ls-shimmer { background: linear-gradient(90deg, #fff 0%, #fbbf24 25%, #f97316 50%, #fb923c 75%, #fff 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: lsShimmer 3s linear infinite; } @keyframes lsShimmer { 0% { background-position: -100% 0; } 100% { background-position: 200% 0; } } .ls-hero p.ls-lead { font-size: clamp(15px, 2.2vw, 19px); opacity: 0.92; max-width: 680px; margin: 0 auto 36px; line-height: 1.55; text-wrap: pretty; } /* ═══════════ BUTTONS ═══════════ */ .ls-btn { display: inline-flex; align-items: center; gap: 8px; padding: 16px 32px; border-radius: 999px; font-weight: 700; font-size: 15px; text-decoration: none; border: none; cursor: pointer; transition: transform 0.25s var(--ls-ease-spring), box-shadow 0.25s var(--ls-ease); position: relative; isolation: isolate; white-space: nowrap; } .ls-btn:hover { transform: translateY(-2px); } .ls-btn:active { transform: translateY(0); } .ls-btn-primary { background: var(--ls-grad-primary); color: #fff; box-shadow: var(--ls-shadow-glow), 0 8px 24px rgba(0,0,0,0.2); } .ls-btn-primary::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--ls-grad-fire); opacity: 0; transition: opacity 0.3s var(--ls-ease); } .ls-btn-primary:hover::before { opacity: 1; } .ls-btn-glass { background: rgba(255,255,255,0.12); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: #fff; border: 1px solid rgba(255,255,255,0.2); } .ls-btn-glass:hover { background: rgba(255,255,255,0.2); } .ls-btn-light { background: #fff; color: var(--ls-accent); box-shadow: 0 8px 24px rgba(0,0,0,0.15); } /* ═══════════ SECTIONS ═══════════ */ .ls-section { max-width: 1200px; margin: 0 auto; padding: clamp(50px, 8vw, 100px) 20px; } .ls-section-title { font-size: clamp(26px, 4vw, 40px); font-weight: 800; letter-spacing: -0.02em; text-align: center; margin: 0 0 12px; text-wrap: balance; } .ls-section-lead { text-align: center; color: var(--ls-text-soft); font-size: clamp(14px, 1.8vw, 17px); max-width: 640px; margin: 0 auto 48px; line-height: 1.55; } /* ═══════════ GLASS CARDS + TILT ═══════════ */ .ls-card { background: var(--ls-surface); border-radius: var(--ls-radius); padding: 28px; box-shadow: var(--ls-shadow-md); border: 1px solid var(--ls-border); position: relative; transition: transform 0.4s var(--ls-ease), box-shadow 0.4s var(--ls-ease); transform-style: preserve-3d; will-change: transform; } .ls-card:hover { box-shadow: var(--ls-shadow-lg), 0 0 40px var(--ls-accent-glow); } .ls-card-glass { background: rgba(255,255,255,0.06); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); border: 1px solid rgba(255,255,255,0.12); color: #fff; } [data-tilt] { transform: perspective(1000px) rotateX(var(--ls-tx, 0deg)) rotateY(var(--ls-ty, 0deg)) translateZ(0); transition: transform 0.15s linear; } [data-tilt] .ls-card-shine { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: radial-gradient(circle at var(--ls-mx, 50%) var(--ls-my, 50%), rgba(255,255,255,0.18), transparent 50%); opacity: 0; transition: opacity 0.3s var(--ls-ease); mix-blend-mode: overlay; } [data-tilt]:hover .ls-card-shine { opacity: 1; } /* ═══════════ STAT BIG NUMBERS ═══════════ */ .ls-stat { text-align: center; } .ls-stat .ls-num { font-size: clamp(36px, 6vw, 56px); font-weight: 800; background: var(--ls-grad-primary); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; line-height: 1; } .ls-stat .ls-lbl { color: var(--ls-text-soft); font-size: 13px; margin-top: 8px; font-weight: 500; } /* ═══════════ GRID HELPERS ═══════════ */ .ls-grid { display: grid; gap: 20px; } .ls-grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .ls-grid-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .ls-grid-2 { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); } /* ═══════════ SCROLL REVEAL ═══════════ */ [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 0.7s var(--ls-ease), transform 0.7s var(--ls-ease); transition-delay: var(--ls-delay, 0ms); } [data-reveal].is-revealed { opacity: 1; transform: translateY(0); } [data-reveal="zoom"] { transform: scale(0.92); } [data-reveal="zoom"].is-revealed { transform: scale(1); } [data-reveal="left"] { transform: translateX(-32px); } [data-reveal="left"].is-revealed { transform: translateX(0); } [data-reveal="right"] { transform: translateX(32px); } [data-reveal="right"].is-revealed { transform: translateX(0); } /* ═══════════ PARALLAX ═══════════ */ [data-parallax] { transition: transform 0.1s linear; will-change: transform; } /* ═══════════ MARQUEE ═══════════ */ .ls-marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); } .ls-marquee-track { display: flex; gap: 32px; animation: lsMarquee 30s linear infinite; width: max-content; } .ls-marquee:hover .ls-marquee-track { animation-play-state: paused; } @keyframes lsMarquee { to { transform: translateX(-50%); } } /* ═══════════ FLOATING ORBS BG ═══════════ */ .ls-orbs { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; } .ls-orb { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.45; animation: lsFloat 18s ease-in-out infinite; } .ls-orb-1 { width: 420px; height: 420px; top: -80px; left: -80px; background: var(--ls-accent); animation-delay: 0s; } .ls-orb-2 { width: 360px; height: 360px; bottom: -100px; right: -60px; background: var(--ls-accent-2); animation-delay: 4s; } .ls-orb-3 { width: 300px; height: 300px; top: 30%; left: 50%; background: var(--ls-accent-3); animation-delay: 8s; } @keyframes lsFloat { 0%,100% { transform: translate(0,0); } 33% { transform: translate(40px,-30px); } 66% { transform: translate(-30px,40px); } } /* ═══════════ DEVICE 3D MOCKUPS ═══════════ */ .ls-device-stage { perspective: 1400px; perspective-origin: center 40%; display: flex; justify-content: center; align-items: center; gap: 32px; flex-wrap: wrap; padding: 30px 0; } .ls-phone { width: 240px; height: 480px; background: #000; border-radius: 36px; border: 8px solid #1f2937; position: relative; overflow: hidden; box-shadow: 0 40px 80px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(255,255,255,0.05); transform-style: preserve-3d; transition: transform 0.6s var(--ls-ease); } .ls-phone::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 86px; height: 22px; background: #000; border-radius: 0 0 14px 14px; z-index: 5; } .ls-phone:hover { transform: rotateY(-8deg) rotateX(2deg) translateY(-6px); } .ls-phone-stack > .ls-phone:nth-child(1) { transform: rotateY(8deg) translateZ(-40px); } .ls-phone-stack > .ls-phone:nth-child(2) { transform: translateZ(0); z-index: 2; } .ls-phone-stack > .ls-phone:nth-child(3) { transform: rotateY(-8deg) translateZ(-40px); } /* ═══════════ DIVIDERS ═══════════ */ .ls-divider { height: 1px; max-width: 200px; margin: 0 auto; background: linear-gradient(90deg, transparent, var(--ls-border), transparent); } /* ═══════════ NOISE OVERLAY (fine premium grain) ═══════════ */ .ls-noise::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 10; opacity: 0.04; background-image: url("data:image/svg+xml;utf8,"); } /* ═══════════ MOBILE TWEAKS ═══════════ */ @media (max-width: 640px) { .ls-phone { width: 200px; height: 400px; border-radius: 28px; border-width: 6px; } .ls-phone::before { width: 64px; height: 16px; } .ls-phone:hover { transform: none; } .ls-phone-stack > .ls-phone:nth-child(1), .ls-phone-stack > .ls-phone:nth-child(3) { transform: none; } [data-tilt]:hover { transform: none; } } /* ═══════════ REDUCED MOTION ═══════════ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } [data-reveal] { opacity: 1; transform: none; } }