/* ================================================================== KAPAY · Sistema visual de la web nueva ------------------------------------------------------------------ Nacio como hoja de index.html y hoy la comparten las paginas redisenadas: la home y features.html. Las clases llevan prefijo .kh- para no cruzarse con main.css, que sigue vistiendo la barra, el pie y las paginas que aun no se han tocado. Lo que una pagina necesita para entrar en el sistema: `kh-page` en el (tokens, pie en navy, revelado) y las clases .kh-* que use. Lo especifico de cada pagina va en su propia hoja (css/features.css). Direccion visual (02_BRAND/BRAND.md §5): aire generoso, tipografia fuerte, jerarquia clara, decoracion minima, color de marca en dosis pequeñas. Sin titulares en versalitas, sin gradientes, sin sombras de colores, sin iconos de libreria. El naranja sale de --primary (main.css), que ya vale #F58220, el de 02_BRAND/BRAND.md. Antes convivian tres naranjas en la web (#e8821e, #db7521 y este); se unificaron todos al de marca. ================================================================== */ :root{ --kh-ink: #16213E; /* Kapay Navy */ /* Los tres niveles de tinta cumplen 4,5:1 sobre blanco Y sobre la banda gris, que es el peor caso. Antes valian .60/.45/.34 y daban 4,30 / 2,78 / 2,09 — el cuerpo de texto y las etiquetas no llegaban. La jerarquia la siguen dando el tamaño, el peso y el espaciado. */ --kh-ink-80: rgba(22,33,62,0.86); --kh-ink-60: rgba(22,33,62,0.78); /* cuerpo · 7,53:1 */ --kh-ink-45: rgba(22,33,62,0.70); /* apoyo · 5,78:1 */ --kh-ink-34: rgba(22,33,62,0.64); /* etiquetas· 4,63:1 */ --kh-rule: rgba(22,33,62,0.10); --kh-rule-soft:rgba(22,33,62,0.06); --kh-paper: #F7F8FA; --kh-accent: var(--primary); /* #F58220 · el unico naranja: solo relleno */ --kh-sans: 'DM Sans', system-ui, -apple-system, sans-serif; } /* ── Base de la pagina ───────────────────────────────────────────── main.css pone `section{padding:96px 0}`. No hace falta anularlo con un `body.kh-page section{padding:0}`: eso ganaba por especificidad (0,1,1) a las propias bandas (0,1,0) y dejaba el hero pegado a la barra. Cada clase .kh-* pone su padding y ya gana al selector de elemento. */ body.kh-page{ background:#fff; color:var(--kh-ink); font-family:var(--kh-sans); } .kh-wrap{ max-width:1160px; margin:0 auto; padding:0 28px; } .kh-wrap--narrow{ max-width:760px; } .kh-band{ padding:132px 0; } .kh-band--tight{ padding:96px 0; } .kh-band--paper{ background:var(--kh-paper); } .kh-band + .kh-band--paper, .kh-band--paper + .kh-band{ border-top:1px solid var(--kh-rule-soft); } /* ── Tipografia ──────────────────────────────────────────────────── Una sola familia (DM Sans) y una sola escala. Los titulares van en 600, no en 700: a tamaño grande el 700 empieza a gritar. */ .kh-eyebrow{ display:block; font-size:12px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--kh-ink-34); margin-bottom:22px; } .kh-h1{ font-family:var(--kh-sans); font-size:clamp(38px,5.1vw,72px); font-weight:600; letter-spacing:-0.035em; line-height:1.05; color:var(--kh-ink); margin:0; } .kh-h2{ font-family:var(--kh-sans); font-size:clamp(29px,3.5vw,46px); font-weight:600; letter-spacing:-0.03em; line-height:1.14; color:var(--kh-ink); margin:0; } .kh-h3{ font-family:var(--kh-sans); font-size:19px; font-weight:600; letter-spacing:-0.015em; line-height:1.35; color:var(--kh-ink); margin:0; } .kh-lead{ font-size:clamp(17px,1.35vw,20px); font-weight:400; line-height:1.62; color:var(--kh-ink-60); margin:22px 0 0; max-width:56ch; } .kh-body{ font-size:16px; line-height:1.68; color:var(--kh-ink-60); margin:0; } .kh-quiet{ font-size:14px; line-height:1.6; color:var(--kh-ink-34); margin:0; } /* La palabra destacada del titular. Va en navy con un subrayado naranja, no en naranja: el naranja de marca sobre blanco da 2,59:1, y oscurecerlo lo suficiente para que se leyera obligaba a meter un SEGUNDO naranja en pantalla, a un palmo del boton. Como relleno, el trazo mantiene el enfasis y deja un unico naranja en toda la web. Se usa text-decoration y no un pseudoelemento: el subrayado se coloca respecto a la LINEA BASE, que es donde el ojo lo espera. Un pseudo posicionado contra la caja quedaba a 25px de las letras. */ .kh-accent{ color:var(--kh-ink); text-decoration:underline; text-decoration-color:var(--kh-accent); text-decoration-thickness:0.085em; text-underline-offset:0.13em; text-decoration-skip-ink:none; } /* ── Botones ─────────────────────────────────────────────────────── Uno solido de marca y uno de linea. Nada mas. */ .kh-btn{ display:inline-flex; align-items:center; gap:9px; height:50px; padding:0 26px; border-radius:9px; font-family:var(--kh-sans); font-size:16px; font-weight:600; letter-spacing:-0.01em; white-space:nowrap; transition:background .18s, border-color .18s, color .18s; } .kh-btn svg{ display:block; flex-shrink:0; } /* Texto navy, no blanco: blanco sobre #F58220 da 2,59:1 y no llega ni al minimo de texto grande. Navy sobre el mismo naranja da 6,13:1 y deja el color de marca intacto. */ .kh-btn--solid{ background:var(--kh-accent); color:var(--kh-ink); border:1px solid var(--kh-accent); } .kh-btn--solid:hover{ background:var(--primary-dark); border-color:var(--primary-dark); } .kh-btn--line{ background:#fff; color:var(--kh-ink); border:1px solid var(--kh-rule); } .kh-btn--line:hover{ border-color:rgba(22,33,62,0.28); } .kh-btn--ink{ background:var(--kh-ink); color:#fff; border:1px solid var(--kh-ink); } .kh-btn--ink:hover{ background:#0F1930; border-color:#0F1930; } /* Enlace de texto con la flecha que se despega al pasar. */ .kh-link{ display:inline-flex; align-items:center; gap:7px; font-size:16px; font-weight:600; color:var(--kh-ink); letter-spacing:-0.01em; border-bottom:1px solid var(--kh-rule); padding-bottom:3px; transition:border-color .18s; } .kh-link:hover{ border-color:var(--kh-ink); } .kh-link span{ transition:transform .18s; } .kh-link:hover span{ transform:translateX(3px); } /* ── 1 · Hero ────────────────────────────────────────────────────── El titular no se toca con la animacion: la escena empieza vacia y tarda tres segundos en poblarse, asi que arriba siempre hay aire. */ /* La barra es fixed y mide 69px: el padding superior la despeja y deja aire por encima del antetitulo. */ /* El padding inferior deja respirar el borde del lienzo antes de la banda gris: sin el, la escena termina justo en el cambio de fondo. */ .kh-hero{ padding:152px 0 56px; text-align:center; } .kh-hero .kh-h1{ max-width:15ch; margin:0 auto; } .kh-hero .kh-lead{ margin:26px auto 0; text-align:center; max-width:60ch; } .kh-hero-actions{ display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; margin-top:38px; } .kh-hero-note{ display:flex; align-items:center; justify-content:center; gap:10px; margin-top:22px; font-size:13.5px; color:var(--kh-ink-34); } .kh-dot{ width:6px; height:6px; border-radius:6px; background:var(--kh-accent); flex-shrink:0; } /* Lienzo de la animacion: a sangre, sin el margen de .kh-wrap. Cuanto mas ancho, mayor la escala y mas legibles las tarjetas de la escena. Se escala solo (js/kapay-hero.js) y nunca pasa de 1:1, asi que en pantallas muy anchas se queda centrado a 1920px. */ .kh-hero-anim{ margin-top:40px; width:100%; overflow:hidden; } /* ── 2 · El problema ─────────────────────────────────────────────── Filas separadas por filete, sin cajas ni iconos. La lectura es vertical y el ojo no tiene que saltar entre tarjetas. */ .kh-split{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,10fr); gap:80px; align-items:start; } .kh-split--even{ grid-template-columns:repeat(2,minmax(0,1fr)); } .kh-rows{ border-top:1px solid var(--kh-rule); } .kh-row{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.5fr); gap:40px; padding:26px 0; border-bottom:1px solid var(--kh-rule); } .kh-row .kh-h3{ font-size:17px; } /* ── 3 · El flujo (Student → Payment) ──────────────────────────────*/ .kh-flow{ display:flex; align-items:center; flex-wrap:wrap; gap:10px 14px; margin-top:34px; font-size:14px; font-weight:600; letter-spacing:-0.01em; } .kh-flow b{ font-weight:600; color:var(--kh-ink); } .kh-flow i{ font-style:normal; color:var(--kh-ink-34); } /* Lienzos de los paneles de producto (js/kapay-anim.js). */ .kh-panel{ margin-top:56px; } .kh-panel .ka-stage{ max-width:1060px; margin:0 auto; } /* Los mismos pasos en texto, para cuando el panel se oculta. */ .kh-steps{ display:none; list-style:none; counter-reset:kh; margin:44px 0 0; padding:0; } .kh-steps li{ counter-increment:kh; position:relative; padding:20px 0 20px 52px; border-top:1px solid var(--kh-rule); } .kh-steps li:last-child{ border-bottom:1px solid var(--kh-rule); } .kh-steps li::before{ content:counter(kh,decimal-leading-zero); position:absolute; left:0; top:22px; font-size:12px; font-weight:600; letter-spacing:0.08em; color:var(--kh-ink-34); } .kh-steps b{ display:block; font-size:16px; font-weight:600; color:var(--kh-ink); margin-bottom:5px; } .kh-steps i{ font-style:normal; font-size:15px; line-height:1.6; color:var(--kh-ink-60); } /* El mismo tablero en el telefono (js/kapay-mobile.js). En escritorio va a la derecha del texto, debajo del panel grande; en movil, donde el panel grande se oculta, se convierte en la imagen de la seccion. */ .kh-pocket{ display:grid; grid-template-columns:minmax(0,1fr) 390px; gap:72px; align-items:center; margin-top:104px; padding-top:88px; border-top:1px solid var(--kh-rule); } .kh-pocket-t .kh-h2{ font-size:clamp(26px,2.6vw,34px); } .kh-pocket-t .kh-body{ margin-top:20px; max-width:44ch; } .kh-pocket-p{ width:100%; } /* ── 4 · Que hay dentro (los 11 modulos) ─────────────────────────── Empezo siendo once tarjetas con numero, titulo y una frase cada una: once veces el mismo ritmo, lento de leer. Se quitaron las frases (no decian lo que dice el video en diez segundos) y quedan el numero y el nombre, enlazados a YouTube. Se lee de un vistazo y mantiene la numeracion de los modulos dentro de la app: 01 Dashboard a 11. Fluye por columnas (01-04 · 05-08 · 09-11), no por filas: el numero manda y en columna se sigue en orden sin saltar de lado a lado. */ .kh-mods{ display:grid; grid-auto-flow:column; grid-template-rows:repeat(4,auto); grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:56px; border-top:1px solid var(--kh-rule); margin-top:56px; } .kh-mod{ display:flex; align-items:baseline; gap:14px; padding:17px 0; border-bottom:1px solid var(--kh-rule); color:var(--kh-ink); transition:color .16s; } .kh-mod-n{ flex-shrink:0; font-size:12px; font-weight:600; letter-spacing:0.08em; color:var(--kh-ink-34); font-variant-numeric:tabular-nums; transition:color .16s; } .kh-mod-t{ flex:1; font-size:17px; font-weight:500; letter-spacing:-0.015em; } .kh-mod svg{ flex-shrink:0; align-self:center; fill:var(--kh-ink-34); transition:fill .16s, transform .16s; } .kh-mod:hover{ color:var(--kh-ink); } /* Al pasar por encima solo se enciende el play, que es un relleno. El numero se queda en tinta: en naranja seria texto a 12px y 2,59:1. */ .kh-mod:hover .kh-mod-n{ color:var(--kh-ink); } .kh-mod:hover svg{ fill:var(--kh-accent); } .kh-mod:hover svg{ transform:translateX(2px); } .kh-mod:focus-visible{ outline:2px solid var(--kh-accent); outline-offset:3px; border-radius:3px; } .kh-mods-f{ display:flex; flex-wrap:wrap; gap:16px 36px; margin:44px 0 0; } /* ── 5 · De donde sale Kapay ───────────────────────────────────────*/ .kh-facts{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; margin-top:52px; } .kh-fact{ padding:0 36px; border-left:1px solid var(--kh-rule); } .kh-fact:first-child{ padding-left:0; border-left:none; } .kh-fact:last-child{ padding-right:0; } .kh-fact b{ display:block; font-size:clamp(28px,2.6vw,36px); font-weight:600; letter-spacing:-0.03em; color:var(--kh-ink); line-height:1.1; margin-bottom:12px; } /* ── 6 · Puesta en marcha ──────────────────────────────────────────*/ .kh-setup{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; margin-top:56px; } .kh-setup-step{ padding:32px 36px 0 0; border-top:2px solid var(--kh-ink); } .kh-setup-step + .kh-setup-step{ border-top-color:var(--kh-rule); padding-left:36px; } .kh-setup-step:last-child{ padding-right:0; } .kh-setup-n{ display:block; font-size:11.5px; font-weight:600; letter-spacing:0.1em; color:var(--kh-ink-34); margin-bottom:14px; } .kh-setup-step p{ font-size:15px; line-height:1.62; color:var(--kh-ink-60); margin:9px 0 0; } /* ── 7 · Precio ──────────────────────────────────────────────────── Una sola cifra, grande, y las condiciones como lista de filetes. Sin tarjeta, sin badge y sin tabla comparativa: solo hay un plan, asi que una tabla seria un decorado. Las condiciones son las de pricing.html. */ .kh-price{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,0.72fr); gap:80px; align-items:start; } .kh-price-fig{ display:flex; align-items:baseline; gap:4px; margin:0; font-size:clamp(56px,6.4vw,86px); font-weight:600; letter-spacing:-0.045em; line-height:0.94; color:var(--kh-ink); } .kh-price-fig span{ font-size:0.5em; font-weight:500; letter-spacing:-0.02em; } .kh-price-fig i{ font-style:normal; font-size:17px; font-weight:500; letter-spacing:-0.01em; color:var(--kh-ink-45); margin-left:10px; } .kh-price-terms{ list-style:none; margin:34px 0 0; padding:0; border-top:1px solid var(--kh-rule); } .kh-price-terms li{ padding:14px 0; border-bottom:1px solid var(--kh-rule); font-size:15.5px; color:var(--kh-ink-60); } /* ── 8 · FAQ ─────────────────────────────────────────────────────── Reutiliza el acordeon de js/main.js (.faq-item / .faq-q / .open). */ .kh-faq{ border-top:1px solid var(--kh-rule); margin-top:52px; } .kh-faq .faq-item{ border-bottom:1px solid var(--kh-rule); } .kh-faq .faq-q{ display:flex; align-items:center; justify-content:space-between; gap:28px; width:100%; background:none; border:none; cursor:pointer; text-align:left; padding:26px 0; font-family:var(--kh-sans); font-size:17px; font-weight:500; letter-spacing:-0.015em; color:var(--kh-ink); } .kh-faq .faq-q::after{ content:''; flex-shrink:0; width:11px; height:11px; border-right:1.5px solid var(--kh-ink-34); border-bottom:1.5px solid var(--kh-ink-34); transform:rotate(45deg) translate(-3px,-3px); transition:transform .2s; } .kh-faq .faq-item.open .faq-q::after{ transform:rotate(-135deg) translate(-3px,-3px); } .kh-faq .faq-a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .24s ease; } .kh-faq .faq-item.open .faq-a{ grid-template-rows:1fr; } .kh-faq .faq-a > div{ overflow:hidden; } .kh-inline{ color:var(--kh-ink); font-weight:600; border-bottom:2px solid var(--kh-accent); } .kh-inline:hover{ border-bottom-color:var(--kh-ink); } .kh-faq .faq-a p{ font-size:16px; line-height:1.68; color:var(--kh-ink-60); max-width:68ch; margin:0; padding:0 0 28px; } /* ── 9 · Cierre ────────────────────────────────────────────────────*/ .kh-close-band{ background:var(--kh-ink); color:#fff; padding:118px 0; text-align:center; } .kh-close-band .kh-h2{ color:#fff; max-width:18ch; margin:0 auto; } .kh-close-band .kh-lead{ color:rgba(255,255,255,0.68); margin:24px auto 0; text-align:center; max-width:52ch; } .kh-close-band .kh-hero-actions{ margin-top:40px; } .kh-close-band .kh-btn--line{ background:transparent; color:#fff; border-color:rgba(255,255,255,0.22); } .kh-close-band .kh-btn--line:hover{ border-color:rgba(255,255,255,0.5); } .kh-close-band .kh-quiet{ color:rgba(255,255,255,0.62); margin-top:24px; } /* El pie va inmediatamente despues: mismo tono, sin costura visible. Los blancos con alfa sobre navy necesitan >= 0.47 para llegar a 4,5:1; estaban en 0.28 y 0.48. */ body.kh-page .footer{ background:var(--kh-ink); } body.kh-page .footer-inner{ border-bottom-color:rgba(255,255,255,0.10); } body.kh-page .footer-tagline, body.kh-page .footer-col a{ color:rgba(255,255,255,0.62); } body.kh-page .footer-col a:hover{ color:var(--kh-accent); } body.kh-page .footer-bottom p{ color:rgba(255,255,255,0.52); } /* ── Revelado al hacer scroll ────────────────────────────────────── main.css ya define .fade-in; aqui solo se acorta el recorrido, que a 14px se nota menos y encaja mejor con el tono de la pagina. */ body.kh-page .fade-in{ transform:translateY(14px); } /* ================================================================== Responsive ================================================================== */ @media (max-width:1000px){ .kh-split{ grid-template-columns:1fr; gap:44px; } .kh-mods{ grid-template-rows:repeat(6,auto); grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:44px; } .kh-facts, .kh-setup{ grid-template-columns:1fr; } .kh-price{ grid-template-columns:1fr; gap:44px; } .kh-pocket{ grid-template-columns:1fr; gap:48px; justify-items:center; text-align:center; } .kh-pocket-t .kh-body{ margin-left:auto; margin-right:auto; } .kh-pocket-p{ max-width:390px; } .kh-fact{ padding:24px 0; border-left:none; border-top:1px solid var(--kh-rule); } .kh-fact:first-child{ padding-top:0; border-top:none; } .kh-setup-step{ padding:28px 0 0; } .kh-setup-step + .kh-setup-step{ padding-left:0; margin-top:28px; } } /* La escena del hero es radial y reparte cinco tarjetas de ~300px a lo ancho: por debajo de 1080px baja de scale(0.71) y su texto no llega a 9px. Ahi el hero se queda solo con el titular, que es suficiente. Se corta antes que los paneles de producto (860px) porque necesita bastante mas ancho que ellos. */ @media (max-width:1080px){ .kh-hero-anim{ display:none; } .kh-hero{ padding-bottom:104px; } } /* Debajo de 860px los paneles de producto escalan tanto que su texto interior deja de leerse: se cambian por las listas en texto. */ @media (max-width:860px){ .kh-panel{ display:none; } .kh-steps{ display:block; } /* ya no cuelga del panel grande: pasa a abrir la seccion */ .kh-pocket{ margin-top:56px; padding-top:0; border-top:none; } .kh-band{ padding:88px 0; } .kh-band--tight{ padding:72px 0; } .kh-close-band{ padding:88px 0; } .kh-hero{ padding:126px 0 72px; } } @media (max-width:640px){ .kh-wrap{ padding:0 20px; } .kh-mods{ grid-auto-flow:row; grid-template-rows:none; grid-template-columns:1fr; } /* En tactil el enlace tiene que llegar a 44px de alto. */ .kh-mod{ padding:13px 0; } .kh-row{ grid-template-columns:1fr; gap:8px; } .kh-hero-actions{ flex-direction:column; align-items:stretch; } .kh-hero-actions .kh-btn{ justify-content:center; } .kh-flow{ font-size:13px; } } /* ── Sin movimiento si el sistema lo pide ──────────────────────────*/ @media (prefers-reduced-motion:reduce){ body.kh-page .fade-in{ opacity:1; transform:none; } .kh-link span, .kh-btn{ transition:none; } }