/* ============================================================ FORM-BASE.CSS — Shared Design System for Eventoclic Forms All 3 forms import this file to share the same layout engine, font variables, and visual tokens. ============================================================ */ /* ---------- 1. CSS CUSTOM PROPERTIES (Design Tokens) ---------- */ :root { /* Brand Colors */ --color-brand: #F43F5E; --color-brand-light: #FFE4E6; --color-brand-dark: #BE123C; /* Surface & Text */ --color-bg-body: #F8FAFC; --color-text-dark: #0F172A; --color-text-muted: #64748B; /* Form Box */ --bg-box: rgba(255, 255, 255, 0.92); --backdrop-box: blur(20px); --border-box: 1px solid rgba(255, 255, 255, 0.8); --radius-box: 2rem; --shadow-box: 0 25px 50px -12px rgba(0, 0, 0, 0.1); --box-max-width: 560px; --box-padding: 3rem; /* Typography — override these via JS from editor */ --font-title: 'Playfair Display', serif; --font-subtitle: 'Montserrat', sans-serif; --font-body: 'Plus Jakarta Sans', sans-serif; /* Image & Layout */ --bg-image: none; --img-fit: cover; --img-position: center; --overlay-opacity: 0.5; --overlay-color: 0, 0, 0; } /* ---------- 2. BODY & GLOBAL RESET ---------- */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; padding: 0; min-height: 100vh; font-family: var(--font-body); color: var(--color-text-dark); background-color: var(--color-bg-body); overflow-x: hidden; } /* ---------- 3. TYPOGRAPHY VARIABLES — THE FIX ---------- */ /* Every heading consumes the CSS variable so editor changes reflect instantly */ h1, h2, h3, .font-title { font-family: var(--font-title) !important; } .font-subtitle { font-family: var(--font-subtitle) !important; } /* Body text, inputs, buttons use body font */ p, label, input, select, textarea, button, .font-body { font-family: var(--font-body) !important; } /* ---------- 4. LAYOUT WRAPPER FOUNDATION ---------- */ .layout-wrapper { width: 100%; min-height: 100vh; display: flex; align-items: center; justify-content: center; position: relative; transition: all 0.5s ease; } .layout-bg-overlay { position: absolute; inset: 0; z-index: 0; transition: all 0.5s ease; } .layout-image-container { position: absolute; inset: 0; z-index: 0; background-image: var(--bg-image, none); background-size: var(--img-fit, cover); background-position: var(--img-position, center); background-repeat: no-repeat; transition: all 0.5s ease; display: none; /* hidden by default, shown per layout */ } /* The form box — each form uses its own class name but we expose these common props via the variables. Each form's CSS handles the class. */ .form-box-base { position: relative; z-index: 10; width: 100%; max-width: var(--box-max-width, 560px); padding: var(--box-padding, 3rem); background: var(--bg-box); backdrop-filter: var(--backdrop-box); -webkit-backdrop-filter: var(--backdrop-box); border: var(--border-box); border-radius: var(--radius-box); box-shadow: var(--shadow-box); transition: all 0.5s ease; } /* ================================================================ 5. THE 10 LAYOUT SYSTEM Applied via: Works with .glass-container (formulario-personalizado), .glass-card (formulario-sencillo-rediseño), #form-container / #formulario (formulario-sencillo) We target all possible form wrapper class names. ================================================================ */ /* Aliases — all 3 form containers respond to the same layout rules */ .glass-container, .glass-card, #form-container { position: relative; z-index: 10; transition: all 0.5s ease; } /* ---- Layout 1: CENTRADO CLÁSICO — Fondo blur completo, caja centrada ---- */ body[data-layout="layout-classic"] .layout-wrapper { align-items: center; justify-content: center; padding: 2rem; } body[data-layout="layout-classic"] .layout-bg-overlay { background-image: var(--bg-image, none); background-size: cover; background-position: var(--img-position, center); filter: blur(18px) brightness(calc(1 - var(--overlay-opacity, 0.5))); transform: scale(1.08); } body[data-layout="layout-classic"] .layout-image-container { display: none; } body[data-layout="layout-classic"] .glass-container, body[data-layout="layout-classic"] .glass-card, body[data-layout="layout-classic"] #form-container { max-width: var(--box-max-width, 560px); margin: auto; } /* ---- Layout 2: DIVIDIDO — Imagen fija izquierda, formulario derecha ---- */ body[data-layout="layout-split-left"] .layout-wrapper { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; padding: 0; align-items: stretch; } body[data-layout="layout-split-left"] .layout-bg-overlay { display: none; } body[data-layout="layout-split-left"] .layout-image-container { display: block; position: relative; /* override inset */ top: unset; left: unset; right: unset; bottom: unset; width: 100%; height: 100vh; background-size: var(--img-fit, cover); background-position: var(--img-position, center); order: -1; } body[data-layout="layout-split-left"] .glass-container, body[data-layout="layout-split-left"] .glass-card, body[data-layout="layout-split-left"] #form-container { max-width: 100%; width: 100%; margin: 0; padding: var(--box-padding, 3rem) 5%; display: flex; flex-direction: column; justify-content: center; align-items: center; /* Centra el form verticalmente */ border-radius: 0 !important; border-top: none !important; border-bottom: none !important; border-right: none !important; box-shadow: none !important; min-height: 100vh; max-height: none !important; } /* El contenido interno de la caja en split nunca pasa del tamaño especificado en el editor */ body[data-layout="layout-split-left"] .glass-container>*, body[data-layout="layout-split-left"] .glass-card>*, body[data-layout="layout-split-left"] #form-container>* { width: 100%; max-width: var(--box-max-width, 560px); } /* ---- Layout 3: DIVIDIDO — Imagen fija derecha, formulario izquierda ---- */ body[data-layout="layout-split-right"] .layout-wrapper { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; padding: 0; align-items: stretch; } body[data-layout="layout-split-right"] .layout-bg-overlay { display: none; } body[data-layout="layout-split-right"] .layout-image-container { display: block; position: relative; top: unset; left: unset; right: unset; bottom: unset; width: 100%; height: 100vh; background-size: var(--img-fit, cover); background-position: var(--img-position, center); order: 2; } body[data-layout="layout-split-right"] .glass-container, body[data-layout="layout-split-right"] .glass-card, body[data-layout="layout-split-right"] #form-container { max-width: 100%; width: 100%; margin: 0; padding: var(--box-padding, 3rem) 5%; display: flex; flex-direction: column; justify-content: center; align-items: center; /* Centra el form verticalmente */ order: 1; border-radius: 0 !important; border-top: none !important; border-bottom: none !important; border-left: none !important; box-shadow: none !important; min-height: 100vh; max-height: none !important; } /* El contenido interno de la caja en split nunca pasa del tamaño especificado en el editor */ body[data-layout="layout-split-right"] .glass-container>*, body[data-layout="layout-split-right"] .glass-card>*, body[data-layout="layout-split-right"] #form-container>* { width: 100%; max-width: var(--box-max-width, 560px); } /* ---- Layout 4: TARJETA HORIZONTAL — Card wide con imagen izquierda ---- */ body[data-layout="layout-card-horizontal"] .layout-wrapper { background: var(--color-bg-body); padding: 2rem; align-items: center; justify-content: center; } body[data-layout="layout-card-horizontal"] .layout-bg-overlay { display: none; } body[data-layout="layout-card-horizontal"] .layout-image-container { display: none; } body[data-layout="layout-card-horizontal"] .glass-container, body[data-layout="layout-card-horizontal"] .glass-card, body[data-layout="layout-card-horizontal"] #form-container { max-width: 900px; width: 100%; margin: auto; padding: 0; display: flex; flex-direction: row; overflow: hidden; border-radius: var(--radius-box, 2rem); } /* Pseudo-element creates the image column */ body[data-layout="layout-card-horizontal"] .glass-container::before, body[data-layout="layout-card-horizontal"] .glass-card::before, body[data-layout="layout-card-horizontal"] #form-container::before { content: ""; display: block; flex: 0 0 45%; background-image: var(--bg-image, none); background-size: var(--img-fit, cover); background-position: var(--img-position, center); min-height: 400px; } /* The inner form element gets the remaining space */ body[data-layout="layout-card-horizontal"] .glass-container>form, body[data-layout="layout-card-horizontal"] .glass-card>form, body[data-layout="layout-card-horizontal"] #form-container>form { flex: 1; padding: 3rem; overflow-y: auto; } /* ---- Layout 5: FLOTANTE IZQUIERDA — Imagen fondo, card a la izquierda ---- */ body[data-layout="layout-float-left"] .layout-bg-overlay { background-image: var(--bg-image, none); background-size: var(--img-fit, cover); background-position: var(--img-position, center); } body[data-layout="layout-float-left"] .layout-bg-overlay::after { content: ""; position: absolute; inset: 0; background: rgba(var(--overlay-color, 0, 0, 0), var(--overlay-opacity, 0.3)); } body[data-layout="layout-float-left"] .layout-image-container { display: none; } body[data-layout="layout-float-left"] .layout-wrapper { justify-content: flex-start; padding-left: clamp(1rem, 8vw, 8rem); align-items: center; padding-top: 2rem; padding-bottom: 2rem; } body[data-layout="layout-float-left"] .glass-container, body[data-layout="layout-float-left"] .glass-card, body[data-layout="layout-float-left"] #form-container { max-width: var(--box-max-width, 500px); margin: 0; } /* ---- Layout 6: FLOTANTE DERECHA — Imagen fondo, card a la derecha ---- */ body[data-layout="layout-float-right"] .layout-bg-overlay { background-image: var(--bg-image, none); background-size: var(--img-fit, cover); background-position: var(--img-position, center); } body[data-layout="layout-float-right"] .layout-bg-overlay::after { content: ""; position: absolute; inset: 0; background: rgba(var(--overlay-color, 0, 0, 0), var(--overlay-opacity, 0.3)); } body[data-layout="layout-float-right"] .layout-image-container { display: none; } body[data-layout="layout-float-right"] .layout-wrapper { justify-content: flex-end; padding-right: clamp(1rem, 8vw, 8rem); align-items: center; padding-top: 2rem; padding-bottom: 2rem; } body[data-layout="layout-float-right"] .glass-container, body[data-layout="layout-float-right"] .glass-card, body[data-layout="layout-float-right"] #form-container { max-width: var(--box-max-width, 500px); margin: 0; } /* ---- Layout 7: GRADIENT FADE — Imagen arriba, fade a color, form abajo ---- */ body[data-layout="layout-gradient-blur"] .layout-bg-overlay { background-image: var(--bg-image, none); background-size: var(--img-fit, cover); background-position: var(--img-position, top); } body[data-layout="layout-gradient-blur"] .layout-image-container { display: block; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 0%, transparent 40%, var(--color-bg-body) 75%, var(--color-bg-body) 100%); z-index: 1; /* override child bg-image */ background-image: none !important; } body[data-layout="layout-gradient-blur"] .layout-wrapper { align-items: flex-end; padding: 0 2rem 4rem; } body[data-layout="layout-gradient-blur"] .glass-container, body[data-layout="layout-gradient-blur"] .glass-card, body[data-layout="layout-gradient-blur"] #form-container { max-width: var(--box-max-width, 580px); margin: 0 auto; z-index: 2; } /* ---- Layout 8: MINIMALISTA PURO — Sin imagen, color plano ---- */ body[data-layout="layout-pure-minimal"] .layout-bg-overlay { background-color: var(--color-bg-body); background-image: none; } body[data-layout="layout-pure-minimal"] .layout-image-container { display: none; } body[data-layout="layout-pure-minimal"] .layout-wrapper { align-items: center; justify-content: center; padding: 2rem; } body[data-layout="layout-pure-minimal"] .glass-container, body[data-layout="layout-pure-minimal"] .glass-card, body[data-layout="layout-pure-minimal"] #form-container { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: none !important; box-shadow: none !important; max-width: var(--box-max-width, 580px); margin: auto; } /* ---- Layout 9: PÓSTER VERTICAL — Imagen arriba, form debajo en la misma card ---- */ body[data-layout="layout-poster-vertical"] .layout-wrapper { background: #0F172A; padding: 2rem; align-items: center; justify-content: center; } body[data-layout="layout-poster-vertical"] .layout-bg-overlay { display: none; } body[data-layout="layout-poster-vertical"] .layout-image-container { display: none; } body[data-layout="layout-poster-vertical"] .glass-container, body[data-layout="layout-poster-vertical"] .glass-card, body[data-layout="layout-poster-vertical"] #form-container { max-width: 460px; width: 100%; margin: auto; padding: 0; overflow: hidden; border-radius: 2rem; border: none !important; box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.6) !important; display: flex; flex-direction: column; } /* Top image panel */ body[data-layout="layout-poster-vertical"] .glass-container::before, body[data-layout="layout-poster-vertical"] .glass-card::before, body[data-layout="layout-poster-vertical"] #form-container::before { content: ""; display: block; width: 100%; height: 38vh; min-height: 200px; background-image: var(--bg-image, none); background-size: var(--img-fit, cover); background-position: var(--img-position, center); flex-shrink: 0; } /* Bottom form area */ body[data-layout="layout-poster-vertical"] .glass-container>form, body[data-layout="layout-poster-vertical"] .glass-card>form, body[data-layout="layout-poster-vertical"] #form-container>form { background: var(--bg-box, #fff); padding: 2.5rem; flex: 1; } /* ---- Layout 10: ASIMÉTRICO — Imagen redondeada izquierda, card superpuesta ---- */ body[data-layout="layout-asymmetric"] .layout-wrapper { background: var(--color-bg-body); padding: 3rem 5%; align-items: center; justify-content: flex-end; } body[data-layout="layout-asymmetric"] .layout-bg-overlay { display: none; } body[data-layout="layout-asymmetric"] .layout-image-container { display: block; position: absolute; left: 5%; top: 6%; bottom: 6%; width: 52%; border-radius: 2rem; box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.2); background-size: var(--img-fit, cover); background-position: var(--img-position, center); background-image: var(--bg-image, none); z-index: 1; } body[data-layout="layout-asymmetric"] .glass-container, body[data-layout="layout-asymmetric"] .glass-card, body[data-layout="layout-asymmetric"] #form-container { max-width: var(--box-max-width, 520px); margin-left: -8%; z-index: 2; } /* ================================================================ 6. RESPONSIVE — Mobile overrides for all layouts ================================================================ */ @media (max-width: 768px) { /* SPLIT layouts → stack vertically */ body[data-layout^="layout-split-"] .layout-wrapper { grid-template-columns: 1fr !important; grid-template-rows: 260px 1fr !important; } body[data-layout^="layout-split-"] .layout-image-container { height: 100% !important; position: relative !important; top: unset !important; left: unset !important; right: unset !important; bottom: unset !important; order: -1 !important; width: 100% !important; } body[data-layout^="layout-split-"] .glass-container, body[data-layout^="layout-split-"] .glass-card, body[data-layout^="layout-split-"] #form-container { width: 100% !important; max-width: 100% !important; border-radius: 2rem 2rem 0 0 !important; margin-top: -2rem !important; padding: 2rem 1.5rem !important; box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.08) !important; } /* CARD HORIZONTAL → stack */ body[data-layout="layout-card-horizontal"] .glass-container, body[data-layout="layout-card-horizontal"] .glass-card, body[data-layout="layout-card-horizontal"] #form-container { flex-direction: column !important; } body[data-layout="layout-card-horizontal"] .glass-container::before, body[data-layout="layout-card-horizontal"] .glass-card::before, body[data-layout="layout-card-horizontal"] #form-container::before { flex: none !important; height: 220px !important; min-height: unset !important; } body[data-layout="layout-card-horizontal"] .glass-container>form, body[data-layout="layout-card-horizontal"] .glass-card>form, body[data-layout="layout-card-horizontal"] #form-container>form { padding: 1.75rem 1.5rem !important; } /* FLOAT layouts → center on mobile */ body[data-layout^="layout-float-"] .layout-wrapper { justify-content: center !important; padding-left: 1rem !important; padding-right: 1rem !important; } body[data-layout^="layout-float-"] .glass-container, body[data-layout^="layout-float-"] .glass-card, body[data-layout^="layout-float-"] #form-container { margin: auto !important; max-width: 100% !important; } /* GRADIENT BLUR → normal padding */ body[data-layout="layout-gradient-blur"] .layout-wrapper { padding: 0 1rem 2rem !important; } /* POSTER VERTICAL → smaller image */ body[data-layout="layout-poster-vertical"] .glass-container::before, body[data-layout="layout-poster-vertical"] .glass-card::before, body[data-layout="layout-poster-vertical"] #form-container::before { height: 28vh !important; } /* ASYMMETRIC → stack */ body[data-layout="layout-asymmetric"] .layout-wrapper { flex-direction: column !important; padding: 1rem !important; justify-content: center !important; align-items: center !important; } body[data-layout="layout-asymmetric"] .layout-image-container { position: relative !important; width: 100% !important; height: 220px !important; left: 0 !important; top: 0 !important; bottom: unset !important; border-radius: 1.5rem !important; margin-bottom: -2rem !important; } body[data-layout="layout-asymmetric"] .glass-container, body[data-layout="layout-asymmetric"] .glass-card, body[data-layout="layout-asymmetric"] #form-container { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; border-radius: 1.5rem !important; } } /* Ensure layout-wrapper covers full height in all cases */ body, html { height: 100%; }