/* ============================================================================ LANDING DE VOZ ALLIA — estilos del CONTENIDO (www.allia.com.ar) ---------------------------------------------------------------------------- Acá vive todo lo que NO es el asistente (el asistente trae su CSS adentro del bundle). Cada bloque tiene su título y sus 🔧 PERILLAS comentadas, mismo criterio que styles.css del asistente. Temas: el lleva data-theme="dark" | "light". Las variables de cada tema están juntas acá abajo — para retocar un color, se toca UNA línea. ============================================================================ */ /* ================= VARIABLES POR TEMA ================= */ /* ----- TEMA OSCURO (default) ----- */ [data-theme="dark"] { --bg: #060c21; /* fondo de la página */ --txt: #ffffff; /* títulos */ --parrafo: #e7ebff; /* cuerpo de texto */ --fraunces: #ffffff; /* frase destacada */ --acento: #6d8cff; /* overline + nav (azul suave) */ --linea: #1c2450; /* líneas divisorias */ --cta: #cfd6ff; /* "ACTIVAMOS IDEAS" (texto y flecha, dark) */ } /* ----- TEMA CLARO ----- */ [data-theme="light"] { --bg: #f1f2f9; /* fondo claro (mismo del asistente) */ --txt: #12163a; --parrafo: #3a4160; --fraunces: #12163a; /* frase destacada en el azul oscuro de marca */ --acento: #2e51fa; /* overline + nav en azul pleno */ --linea: #d3d9ea; --cta: #12163a; /* "ACTIVAMOS IDEAS": texto oscuro… */ } /* …y la FLECHA del CTA en azul (pedido): se define aparte, abajo en 5. */ /* toggle de las dos versiones del símbolo del overline */ [data-theme="dark"] .theme-light { display: none; } [data-theme="light"] .theme-dark { display: none; } /* ================= BASE ================= */ * { box-sizing: border-box; } /* 🛡️ overflow-x: clip en el TAMBIÉN (no alcanza con ponerlo solo en body): el es el que scrollea. Si el scroll horizontal queda vivo, la página se hace más ancha que la pantalla y el widget flotante se ancla al viewport ancho, quedando medio afuera en mobile. Mismo criterio que la app de voz (styles.css). */ html, body { margin: 0; height: 100%; overflow-x: clip; } body { background: var(--bg); color: var(--txt); font-family: 'Montserrat', 'Segoe UI', sans-serif; font-weight: 500; -webkit-font-smoothing: antialiased; min-height: 100dvh; overflow-x: clip; /* la trama del asistente desborda a los costados: se recorta sin generar scroll */ transition: background .25s ease, color .25s ease; /* cambio de tema suave */ } /* ============================================================================ 🛡️ BLINDAJE DE COLOR (trampa #8) — NO BORRAR ---------------------------------------------------------------------------- El widget de chat flotante inyecta un `body { ... color:#111 }` global en el cuando monta, y le pisaba el color al contenido (el título quedaba oscuro sobre fondo oscuro). Estas reglas usan selector de CLASE, que le gana en especificidad a ese `body` pelado, monte lo que monte el widget después. Cada texto toma su variable de tema, así siguen respetando dark/light. (El día que se scopee el CSS del widget de raíz, este bloque se puede quitar.) ============================================================================ */ .heading, .heading .l1, .heading .l2 { color: var(--txt); } .body, .body p { color: var(--parrafo); } .body b { color: var(--txt); } .fraunces, .fraunces.col-b { color: var(--fraunces); } .overline { color: var(--acento); } .nav-links, .nav-mobile { color: var(--acento); } .cta { color: var(--cta); } /* ================= 0 · LA PÁGINA ================= */ .page { max-width: 1680px; /* 🔧 PERILLA: ancho máximo del contenido */ margin: 0 auto; padding: clamp(18px, 3.2vw, 46px) clamp(18px, 5vw, 90px); /* 🔧 PERILLA: aire inferior para que el widget flotante no pise la nav */ padding-bottom: clamp(96px, 14vh, 130px); min-height: 100dvh; display: flex; flex-direction: column; } /* el contenido se apoya al fondo; el asistente ocupa la parte superior */ .content { margin-top: auto; padding-top: clamp(20px, 4vh, 50px); position: relative; } /* ================= 1 · PERSONAJE (okidoki) ================= */ .personaje { position: absolute; left: 0; bottom: 100%; /* apoyado sobre el borde superior del contenido */ margin-bottom: -18px; /* 🔧 PERILLA: qué tan "apoyado" queda (negativo = más abajo, pegado al texto; original: clamp(4px, 0.6vh, 12px)) */ width: clamp(220px, 18vw, 285px); /* 🔧 PERILLA: tamaño del personaje (mín 220 para que no se achique tanto antes de ocultarse; original: clamp(180px, 15vw, 285px)) */ height: auto; pointer-events: none; user-select: none; z-index: 1; } /* ================= 2 · GRILLA DEL CONTENIDO ================= 3 columnas en desktop: título | frase Fraunces | párrafos */ .grid { display: grid; grid-template-columns: 1.55fr .7fr 1.2fr; /* 🔧 PERILLA: proporción de las columnas */ column-gap: clamp(26px, 3vw, 54px); } /* ── 2a · overline: rótulo + línea + símbolo ── */ .overline { grid-column: 1; grid-row: 1; display: flex; align-items: center; gap: 16px; /* separación texto↔línea y (junto al margin de .lin) línea↔símbolo */ height: 20px; margin: 0 0 36px; /* 🔧 PERILLA: aire debajo del overline */ font-size: 13px; font-weight: 600; letter-spacing: .14em; color: var(--acento); white-space: nowrap; } .overline .lin { flex: 1; height: 1px; background: var(--linea); /* 🔧 PERILLA: separación línea↔símbolo = 16px (gap) + este margin. Hoy: 16 + 4 = 20px en total. */ margin-right: 4px; } .overline .ov-tri { width: 20px; height: 17px; } /* 🔧 PERILLA: tamaño del símbolo */ /* ── 2b · título principal ── */ .col-a { grid-column: 1; grid-row: 2; min-width: 0; } .heading { margin: 0; font-weight: 400; line-height: 1.05; } .heading .l1 { /* "CONTAME QUE NECESITÁS SOBRE" */ display: block; font-size: clamp(26px, 3vw, 44px); /* 🔧 PERILLA: tamaño línea 1 */ letter-spacing: .01em; } .heading .l2 { /* "IDENTIDAD, DISEÑO WEB, ..." */ display: block; font-size: clamp(25px, 2.9vw, 45px); /* 🔧 PERILLA: tamaño línea 2 */ letter-spacing: .01em; margin-top: .14em; } /* ── 2c · frase destacada (Fraunces itálica) ── */ .col-b { grid-column: 2; grid-row: 2; position: relative; padding-left: clamp(22px, 2vw, 36px); } .fraunces { font-family: 'Fraunces', serif; font-style: italic; font-weight: 500; font-size: clamp(26px, 2.9vw, 46px); /* 🔧 PERILLA: tamaño de la frase */ line-height: 1.18; /* 🔧 PERILLA: interlineado */ margin: 0; color: var(--fraunces); } /* ── 2d · párrafos ── */ .col-c { grid-column: 3; grid-row: 2; position: relative; padding-left: clamp(22px, 2vw, 36px); } /* líneas verticales a la izquierda de las columnas 2 y 3 */ .col-b::before, .col-c::before { content: ""; position: absolute; left: calc(-1 * clamp(13px, 1.5vw, 27px)); top: clamp(6px, 1.5vh, 18px); bottom: clamp(14px, 3vh, 38px); width: 1px; background: var(--linea); } .body p { font-size: clamp(14px, 1.05vw, 16px); /* 🔧 PERILLA: tamaño del cuerpo */ line-height: 1.5; margin: 0 0 16px; color: var(--parrafo); } .body p:last-child { margin-bottom: 0; } .body b { font-weight: 700; color: var(--txt); } /* ================= 5 · NAV INFERIOR + CTA ================= */ .linea-m { display: none; height: 1px; background: var(--linea); } /* solo mobile */ .bottomnav { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: clamp(22px, 4vh, 46px); /* 🔧 PERILLA: aire sobre la nav */ padding-top: 20px; border-top: 1px solid var(--linea); } .nav-links { display: flex; align-items: center; gap: clamp(12px, 1.4vw, 26px); font-size: 13px; font-weight: 600; letter-spacing: .12em; color: var(--acento); } .nav-links .sep { opacity: .4; } .nav-mobile { display: none; } /* solo se muestra en mobile (media query de abajo) */ .cta { display: inline-flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 600; letter-spacing: .12em; color: var(--cta); } /* flecha del CTA — hereda el color del texto en dark… */ .cta .ar { width: 34px; height: 1px; background: currentColor; position: relative; } .cta .ar::after { content: ""; position: absolute; right: 0; top: -3px; width: 6px; height: 6px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); } /* …y en LIGHT va en azul pleno (pedido: flecha #2e51fa) */ [data-theme="light"] .cta .ar { background: #2e51fa; color: #2e51fa; } /* ================= 6 · RESPONSIVE (una columna, reordenado) ================= */ @media (max-width: 1000px) { .personaje { display: none; } .content { padding-top: clamp(40px, 6vh, 70px); } /* 🔧 PERILLA: aire sobre el texto en mobile (el personaje se oculta acá, así que compensamos su espacio) */ .grid { display: flex; flex-direction: column; } .overline { height: auto; margin-bottom: 22px; order: 1; } .col-a { order: 2; } .linea-m.l1 { display: block; order: 3; margin: 22px 0; } .nav-mobile { display: flex; order: 4; flex-wrap: wrap; gap: 12px 22px; font-size: 13px; font-weight: 600; letter-spacing: .12em; color: var(--acento); } .nav-mobile .sep { opacity: .4; } .col-b { order: 5; padding: 26px 0 0; } .col-b::before, .col-c::before { display: none; } .col-b .dk { display: none; } /* en mobile la frase Fraunces fluye sin cortes */ .fraunces { font-size: clamp(30px, 7vw, 44px); } .linea-m.l2 { display: block; order: 6; margin: 26px 0; } .col-c { order: 7; padding: 0; } .bottomnav .nav-links { display: none; } /* la nav va arriba en mobile */ .bottomnav { justify-content: flex-end; } } @media (min-width: 1001px) { .dk { display: inline; } } /* --- Ajusto tamaño del asistente --- */ .chat-fab-btn { width: 80px !important; height: 70px !important; } .chat-fab-btn svg { width: 80px !important; height: 70px !important; }