/* * V2.1_Frame stylesheet — capa derivada de: * - Frame analysis Cordero (doc 16) * - HURA Design System Ryan (Design_System/HURA_DESIGN_SYSTEM_RYAN.md) * - Análisis 96 templates Skool (animaciones/analisis_templates_skool_claude.md) * - Feedback Ryan al doc 15 (1 loop a la vez, no 4 al mismo tiempo) * - Sistema de flags CSS modular (doc 17 §2) para prototipos lab-* y winner mode * * Aplica: * 1. Tokens HURA del Design System (--hura-*) * 2. Tipografía oficial: Playfair Display (display) + Inter (UI) * NOTA: el agente Skool sugería Instrument Serif, pero mantenemos * Playfair Display por consistencia con V2_Cinematic + Design System * de Ryan. A/B con Instrument Serif queda para iteración posterior. * 3. Tipografía mixta sans + cursiva editorial italic en hero title (Cordero) * 4. Floating proof chip arriba del headline * 5. Eyebrow con dot pulsante * 6. Sidetag rotado 90° * 7. Sistema Liquid Glass completo (.liquid-glass + .liquid-glass-strong) * de Liquid Glass Agency template (Skool) * 8. Gradient border CTAs con mask-composite * * NO TOCAR cinematic.css ni style.css — esto es capa adicional. */ :root { /* ============================================ TOKENS HURA DESIGN SYSTEM (Ryan) ============================================ */ --hura-lagoon-deep: #063F52; --hura-lagoon-foam: #8FD8D2; --hura-sand: #C9A96E; --hura-sunset-gold: #E8B65B; --hura-sunset-warm: #C76F3A; --hura-night: #0D0D0D; --hura-wind: #F5F0EB; --hura-white-warm: #FFF9EE; --hura-radius-sm: 8px; --hura-radius-md: 12px; --hura-radius-lg: 18px; --hura-radius-xl: 28px; --hura-radius-full: 999px; --hura-shadow-soft: 0 12px 32px rgba(0, 0, 0, 0.18); --hura-shadow-lift: 0 24px 60px rgba(0, 0, 0, 0.32); --hura-shadow-cinematic: 0 40px 120px rgba(0, 0, 0, 0.45); --hura-ease-ui: cubic-bezier(0.2, 0.8, 0.2, 1); --hura-ease-out: cubic-bezier(0.22, 1, 0.36, 1); --hura-duration-ui: 200ms; --hura-duration-reveal: 600ms; --hura-duration-cinematic: 1200ms; /* ============================================ TIPOGRAFÍA ============================================ */ --font-display: 'Playfair Display', 'Georgia', serif; --font-ui: 'Inter', system-ui, -apple-system, sans-serif; --tracking-tight: -0.04em; --tracking-tighter-2: -0.075em; --tracking-loose: 0.14em; --tracking-extra-loose: 0.26em; /* ============================================ LIQUID GLASS SYSTEM (de Liquid Glass Agency template) ============================================ */ --glass-bg: rgba(255, 255, 255, 0.08); --glass-bg-strong: rgba(255, 255, 255, 0.14); --glass-bg-dark: rgba(13, 13, 13, 0.55); --glass-border: 1px solid rgba(255, 255, 255, 0.12); --glass-border-strong: 1px solid rgba(255, 255, 255, 0.22); --glass-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.08), 0 8px 24px rgba(0, 0, 0, 0.18); --glass-shadow-strong: inset 0 1px 2px rgba(255, 255, 255, 0.18), 0 16px 48px rgba(0, 0, 0, 0.32); --glass-blur: 12px; --glass-blur-strong: 24px; /* ============================================ FLAGS MODULARES (doc 17 §2) — defaults V2.1 actual Cada prototipo lab-* sobreescribe estos valores via [data-mode="..."] en el ============================================ */ --use-crossfade: 0; /* 0 = off, 1 = full, 0.4 = sutil */ --use-liquid-glass: 0.6; /* nivel de glassmorphism */ --use-cursor: 1; /* 0 = off, 1 = subtle, 2 = strong distortion */ --use-scroll-scrub: 0; /* 0 = off, 1 = activa Um dia em HURA 500vh */ --use-staggered-menu: 0; /* 0 = nav clasico, 1 = overlay fullscreen */ --use-wind-lines: 0; /* 0 = off, 1 = SVG lineas viento */ --motion-speed: 1; /* 1 = default, 1.4 = energico, 0.7 = calmo */ --hero-overlay-tone: lagoon; /* lagoon | sunset | mixed */ } /* Mode: Cinematic Arrival (Doc A Ryan + Doc B Opus §3) */ [data-mode="cinematic"] { --use-crossfade: 1; --use-liquid-glass: 0.6; --use-cursor: 1; --motion-speed: 0.85; --hero-overlay-tone: mixed; } /* Mode: Liquid Glass / Resort Interface (Doc A Ryan + Doc B Opus §4) */ [data-mode="glass"] { --use-crossfade: 0.4; --use-liquid-glass: 1; --use-cursor: 0; --motion-speed: 0.7; --hero-overlay-tone: lagoon; } /* Mode: Kite Energy / Motion Sport (Doc A Ryan + Doc B Opus §5) */ [data-mode="energy"] { --use-crossfade: 0.5; --use-liquid-glass: 0.3; --use-cursor: 2; --use-scroll-scrub: 1; --use-wind-lines: 1; --motion-speed: 1.4; --hero-overlay-tone: sunset; } /* Mode: Winner — la mezcla que Benjamin elija Sospecha Ryan: 70% Cinematic + 25% Glass + 5% Energy Se afina cuando Benjamin decide tras ver los 3 prototipos */ [data-mode="winner"] { --use-crossfade: 1; --use-liquid-glass: 0.85; --use-cursor: 1; --use-scroll-scrub: 0; --motion-speed: 0.85; --hero-overlay-tone: mixed; } /* ============================================ 1. SIDETAG — texto rotado 90° lateral ============================================ */ .hero__sidetag { position: absolute; right: 24px; top: 50%; transform: rotate(90deg) translateX(50%); transform-origin: right center; font-family: var(--font-ui); font-weight: 600; font-size: 11px; letter-spacing: var(--tracking-extra-loose); text-transform: uppercase; color: rgba(245, 240, 235, 0.4); white-space: nowrap; pointer-events: none; z-index: 5; } @media (max-width: 900px) { .hero__sidetag { display: none; } } /* ============================================ 2. PROOF CHIP — flotante arriba del headline ============================================ */ .hero__proof { display: inline-flex; align-items: center; gap: 12px; padding: 8px 16px 8px 8px; margin-bottom: 24px; background: var(--glass-bg-dark); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); border: var(--glass-border); border-radius: var(--hura-radius-full); box-shadow: var(--glass-shadow); animation: proofChipIn 800ms var(--hura-ease-out) 200ms backwards; } .hero__proof-icon { display: inline-block; width: 8px; height: 8px; background: var(--hura-sand); border-radius: 50%; flex-shrink: 0; animation: eyebrowPulse 2s ease-in-out infinite; } .hero__proof-text { font-family: var(--font-ui); font-size: 13px; font-weight: 500; color: rgba(245, 240, 235, 0.92); letter-spacing: 0.01em; } @keyframes proofChipIn { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } } /* ============================================ 3. EYEBROW con dot pulsante ============================================ */ .hero__eyebrow--dot { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-ui); font-weight: 700; font-size: 11px; letter-spacing: var(--tracking-loose); text-transform: uppercase; color: rgba(245, 240, 235, 0.7); } .hero__eyebrow--dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--hura-sand); animation: eyebrowPulse 2s ease-in-out infinite; } @keyframes eyebrowPulse { 0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(201, 169, 110, 0.4); } 50% { opacity: 0.7; transform: scale(1.3); box-shadow: 0 0 0 6px rgba(201, 169, 110, 0); } } @media (prefers-reduced-motion: reduce) { .hero__eyebrow--dot::before { animation: none; } } /* ============================================ 4. HERO TITLE MIXED — sans + Playfair italic editorial ============================================ */ .hero__title--mixed { font-family: var(--font-ui); font-weight: 800; font-size: clamp(3rem, 10vw, 9rem); line-height: 0.92; letter-spacing: var(--tracking-tighter-2); margin: 18px 0 24px; display: flex; flex-direction: column; align-items: center; gap: 6px; } .hero__title-pre { font-family: var(--font-ui); font-weight: 300; font-size: clamp(1.4rem, 3.5vw, 3rem); letter-spacing: var(--tracking-tight); color: rgba(245, 240, 235, 0.85); text-transform: lowercase; } .hero__title-mark { font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: clamp(4rem, 13vw, 11rem); line-height: 0.86; letter-spacing: -0.04em; background: linear-gradient(135deg, var(--hura-wind) 20%, var(--hura-sand) 60%, var(--hura-sunset-warm) 110%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 2px 40px rgba(201, 169, 110, 0.25); } /* fallback si gradient text no soporta */ @supports not ((-webkit-background-clip: text) or (background-clip: text)) { .hero__title-mark { color: var(--hura-sand); background: none; } } /* ============================================ 5. CTA gradient border (mask-composite trick) Patrón Liquid Glass Agency — análisis Skool §6.2 ============================================ */ .btn--frame { position: relative; font-family: var(--font-ui); font-weight: 600; letter-spacing: 0.02em; padding: 14px 28px; border-radius: var(--hura-radius-full); transition: transform 200ms var(--hura-ease-out), box-shadow 300ms var(--hura-ease-out); } .btn--frame:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(201, 169, 110, 0.25); } .btn--frame.btn--ghost { background: var(--glass-bg-dark); color: var(--hura-wind); border: none; position: relative; isolation: isolate; } .btn--frame.btn--ghost::before { content: ''; position: absolute; inset: 0; border-radius: var(--hura-radius-full); padding: 1.5px; background: linear-gradient(135deg, var(--hura-sand) 0%, var(--hura-sunset-warm) 50%, var(--hura-lagoon-deep) 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: -1; } /* ============================================ 6. SCENE NUMERAL — números editoriales tipo "01 02 03" (Cordero pattern + Skool consensus) ============================================ */ .scene__numeral { font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: clamp(3rem, 6vw, 5rem); line-height: 1; letter-spacing: -0.04em; color: var(--hura-sand); display: block; margin-bottom: 16px; } .scene__numeral--accent { background: linear-gradient(135deg, var(--hura-sand) 20%, var(--hura-sunset-warm) 90%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ============================================ 7. HERO CTA ROW — espaciado y stagger ============================================ */ .hero__cta-row { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 32px; } .hero__cta-row .btn { animation: ctaIn 700ms var(--hura-ease-out) backwards; } .hero__cta-row .btn:nth-child(1) { animation-delay: 600ms; } .hero__cta-row .btn:nth-child(2) { animation-delay: 750ms; } @keyframes ctaIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .hero__cta-row .btn { animation: none; } } /* ============================================ 8. LIQUID GLASS SYSTEM — utility classes (Patrón Liquid Glass Agency - 15+ templates Skool) ============================================ */ .liquid-glass { background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); border: var(--glass-border); border-radius: var(--hura-radius-lg); box-shadow: var(--glass-shadow); } .liquid-glass-strong { background: var(--glass-bg-strong); backdrop-filter: blur(var(--glass-blur-strong)); -webkit-backdrop-filter: blur(var(--glass-blur-strong)); border: var(--glass-border-strong); border-radius: var(--hura-radius-xl); box-shadow: var(--glass-shadow-strong); } .liquid-glass--dark { background: var(--glass-bg-dark); } /* Glassmorphic navbar (patrón Velora) — opcional para nav transparente */ .liquid-glass--nav { background: rgba(13, 13, 13, 0.4); backdrop-filter: blur(20px) saturate(120%); -webkit-backdrop-filter: blur(20px) saturate(120%); border-bottom: 1px solid rgba(245, 240, 235, 0.06); } /* Glass card para Villa/Kite/Restaurante */ .liquid-glass--card { background: var(--glass-bg-dark); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(201, 169, 110, 0.18); border-radius: var(--hura-radius-lg); padding: 24px; transition: transform var(--hura-duration-ui) var(--hura-ease-out), border-color var(--hura-duration-ui) var(--hura-ease-out); } .liquid-glass--card:hover { transform: translateY(-2px); border-color: rgba(201, 169, 110, 0.4); } /* ============================================ 9. UM DIA EM HURA — placeholder structure (Técnica Urban Jungle: container 500vh con scroll-scrub) Implementación JS en js/frame-scroll-scrub.js (cuando llegue) ============================================ */ .um-dia { position: relative; height: 500vh; /* container alto para scroll narrative */ background: var(--hura-night); } .um-dia__sticky { position: sticky; top: 0; height: 100vh; width: 100%; overflow: hidden; display: flex; align-items: center; justify-content: center; } .um-dia__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .um-dia__chapter { position: relative; z-index: 2; text-align: center; color: var(--hura-wind); padding: 0 24px; opacity: 0; /* GSAP ScrollTrigger lo controla */ transition: opacity 400ms var(--hura-ease-out); } .um-dia__chapter--active { opacity: 1; } @media (max-width: 900px) { /* Mobile: NO scroll-scrub. Carrusel simple. */ .um-dia { height: auto; } .um-dia__sticky { position: relative; height: auto; padding: 80px 24px; } .um-dia__video { position: relative; height: 60vh; } } /* ============================================ 10. RESPONSIVE / MOBILE ============================================ */ @media (max-width: 768px) { .hero__proof { margin-bottom: 16px; padding: 6px 12px 6px 6px; } .hero__proof-avatar { width: 22px; height: 22px; } .hero__proof-text { font-size: 12px; } .hero__title-pre { font-size: clamp(1.1rem, 4vw, 1.6rem); } .hero__title-mark { font-size: clamp(3rem, 14vw, 5.5rem); } .hero__cta-row .btn { width: 100%; max-width: 320px; } } /* ============================================ 12. FRAME SCENES — Stay / Taste / Life ============================================ */ .frame-scene { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; padding: clamp(80px, 10vw, 140px) clamp(20px, 5vw, 80px); color: var(--hura-wind); } .frame-scene__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .frame-scene__bg picture, .frame-scene__bg video { position: absolute; inset: -10% 0; width: 100%; height: 110%; object-fit: cover; } .frame-scene__overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; } .frame-scene__content { position: relative; z-index: 2; width: 100%; } .frame-scene--stay { background: var(--hura-night); } .frame-scene--taste { background: var(--hura-night); } .frame-scene--life { background: linear-gradient(180deg, var(--hura-night) 0%, #16100a 100%); padding-top: clamp(80px, 10vw, 140px); padding-bottom: clamp(80px, 10vw, 140px); } /* Collage Stay — 4 imágenes */ .frame-collage { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: 200px 200px; gap: 14px; margin-top: 40px; max-width: 1100px; } .frame-collage__item { position: relative; overflow: hidden; border-radius: var(--hura-radius-lg); display: block; transition: transform var(--hura-duration-ui) var(--hura-ease-out); } .frame-collage__item:hover { transform: translateY(-4px) scale(1.02); } .frame-collage__item img { width: 100%; height: 100%; object-fit: cover; } .frame-collage__item:nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 3; } .frame-collage__item:nth-child(2) { grid-column: 3; grid-row: 1; } .frame-collage__item:nth-child(3) { grid-column: 4; grid-row: 1; } .frame-collage__item:nth-child(4) { grid-column: 3 / 5; grid-row: 2; } /* Moments Taste — 3 cards horizontal */ .frame-moments { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; max-width: 1100px; } .frame-moment { padding: 28px 24px; color: var(--hura-wind); } .frame-moment__time { display: inline-block; font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: 1.4rem; color: var(--hura-sunset-gold); margin-bottom: 12px; letter-spacing: -0.02em; } .frame-moment h3 { font-family: var(--font-display); font-size: 1.4rem; margin: 0 0 8px; font-weight: 700; letter-spacing: -0.02em; } .frame-moment p { font-size: 0.92rem; line-height: 1.55; color: rgba(245, 240, 235, 0.78); margin: 0; } /* Life — badges + grid editorial */ .frame-life-badges { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 36px; } .frame-life-badge { display: inline-flex; padding: 8px 16px; background: rgba(245, 240, 235, 0.06); border: 1px solid rgba(201, 169, 110, 0.25); border-radius: var(--hura-radius-full); font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--hura-wind); } .frame-life-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 24px; max-width: 1100px; } .frame-life-img { display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--hura-radius-md); } .frame-life-img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--hura-duration-cinematic) var(--hura-ease-out); } .frame-life-img:hover img { transform: scale(1.04); } /* Book — Foco mockup form */ .frame-book { margin: 36px auto 0; max-width: 720px; padding: 28px; text-align: left; } .frame-book-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .frame-book-field { display: flex; flex-direction: column; gap: 6px; } .frame-book-field label { font-family: var(--font-ui); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hura-sand); } .frame-book-field input, .frame-book-field select { padding: 12px 14px; background: rgba(13, 13, 13, 0.5); border: 1px solid rgba(245, 240, 235, 0.18); border-radius: var(--hura-radius-sm); color: var(--hura-wind); font-family: var(--font-ui); font-size: 14px; transition: border-color var(--hura-duration-ui) var(--hura-ease-out); } .frame-book-field input:focus, .frame-book-field select:focus { outline: none; border-color: var(--hura-sand); } .frame-book-fallback { margin: 16px 0 0; font-size: 13px; color: rgba(245, 240, 235, 0.7); text-align: center; } .frame-book-fallback a { color: var(--hura-sand); font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; } /* Stat numerals editorial */ .stat .scene__numeral { display: block; font-size: clamp(1.6rem, 2.5vw, 2.4rem); margin-bottom: 8px; } /* ============================================ 13. RESPONSIVE FRAME SCENES ============================================ */ @media (max-width: 900px) { .frame-collage { grid-template-columns: repeat(2, 1fr); grid-template-rows: 180px 180px 180px 180px; } .frame-collage__item:nth-child(1) { grid-column: 1 / 3; grid-row: 1; } .frame-collage__item:nth-child(2) { grid-column: 1; grid-row: 2; } .frame-collage__item:nth-child(3) { grid-column: 2; grid-row: 2; } .frame-collage__item:nth-child(4) { grid-column: 1 / 3; grid-row: 3; } .frame-moments { grid-template-columns: 1fr; } .frame-life-grid { grid-template-columns: repeat(2, 1fr); } .frame-book-form { grid-template-columns: 1fr; } } /* ============================================ 14. PERFORMANCE GATES (feedback Ryan §B doc 15) - Hero mobile inicial < 3MB total transfer - Loader máximo 800ms o eliminar - Pin máximo 1.2x en Arrival - prefers-reduced-motion: cero pinning ============================================ */ @media (prefers-reduced-motion: reduce) { .hero__proof, .hero__title-pre, .hero__title-mark, .hero__cta-row .btn { animation: none !important; } .hero__eyebrow--dot::before { animation: none !important; } .um-dia__chapter { opacity: 1 !important; transition: none !important; } }