Admin Guide | SOULXIUS

1. Qué archivo sirve para qué

index.htmlTextos visibles, estructura, botones, cards, secciones.

styles.cssColores, tamaños, espaciados, bordes, sombras, dark mode.

i18n.jsTextos en inglés y español.

app.jsBooking, menú móvil, carrusel, dark mode, interacciones.

admin-guide.htmlEsta guía para mantenimiento rápido.

.htaccessSSL, caché, compresión y cabeceras básicas en Hostinger.

robots.txtPermisos de rastreo y enlace al sitemap.

sitemap.xmlMapa SEO con alternates EN/ES.

Consejo: si el cambio es visual, casi siempre empieza en styles.css. Si el cambio es de contenido, empieza en index.html y i18n.js.

2. Paleta aplicada y cómo cambiarla

La web ahora usa una paleta semántica. Eso significa que no debes cambiar colores sueltos por toda la hoja; solo cambias las variables del inicio de styles.css.

Brand
--brand

Brand soft
--brand-soft

Accent gold
--accent

Brand blush
--brand-blush

Text base
--text

:root{
  --brand:#1e4c56;
  --brand-soft:#256b78;
  --brand-pale:#d9cfae;
  --brand-blush:#efe8d9;
  --accent:#c9a24d;
  --text:#172f34;
}

Si cambias colores, cambia también su versión del modo oscuro dentro de :root.dark.

3. Cómo cambiar tamaños de texto

Los tamaños principales también son variables. Eso permite crecer o reducir tipografía sin romper todo el diseño.

:root{
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.45rem;
  --fs-2xl: 2.35rem;
  --fs-3xl: 4.2rem;
}

Para hacer toda la web un poco más grande, sube --fs-base.
Para hacer solo títulos más grandes, ajusta --fs-2xl y --fs-3xl.
La web usa una pila de sistema cercana a Satoshi para evitar descargas innecesarias.

4. Cómo actualizar cards, testimonios y secciones

En index.html cada bloque ya está separado. Busca estas clases:

.serviceCardCards de servicios y beneficios.

.stepPaso 1, 2 y 3 del proceso.

.quoteTestimonios del carrusel.

.microCardDetalles rápidos dentro del booking.

<article class="serviceCard">
  <span class="serviceCard__badge">Nuevo servicio</span>
  <h3>Nombre del servicio</h3>
  <p>Descripción corta y clara.</p>
</article>

Para agregar un nuevo servicio, duplica una card y cambia el texto. Para traducirla, agrega esos textos también en i18n.js.

5. Cómo actualizar el calendario

Abre app.js y busca esta línea:

const BOOKING_URL = "";

Pega ahí tu enlace de Google Appointment Schedule, por ejemplo:

const BOOKING_URL = "https://calendar.google.com/calendar/appointments/schedules/XXXX";

Ese mismo enlace alimenta la sección “Live availability” y también el modal que se abre al tocar “Book”. Si el enlace está vacío, la web invita a contactar sin mostrar errores técnicos.

6. Cómo cambiar textos en inglés y español

La estructura bilingüe vive en i18n.js. Verás dos bloques grandes: en y es.

hero:{
  titleA:"Reconnect",
  titleB:"with your most grounded self"
}

Cuando cambies un texto visible del sitio, actualiza ambas versiones para que el botón de idioma siga funcionando bien.

7. Cómo evitar textos invisibles al cambiar de tema

Este fue uno de los problemas corregidos. Ahora el sitio usa variables semánticas. La regla es:

Nunca pongas colores fijos como #000, #fff o #172f34 en textos dentro de componentes. Usa var(--text), var(--text-soft) o var(--brand).

/* bien */
color: var(--text);

/* bien */
color: var(--text-soft);

/* evita esto */
color: #172f34;

Modo claro y oscuro están definidos en :root y :root.dark.
Si creas un bloque nuevo, copia estilos existentes en vez de inventar un color nuevo.
Revisa siempre botones, links, summaries, labels y textos dentro de cards.

8. Qué puedes personalizar sin romper el sistema

Logo: actualiza las variantes dentro de assets/SVG.
Email y ubicación: sección contacto en index.html.
Hero principal: bloque .hero__copy.
Testimonios: bloque .quote.
Botones: clases .btn--primary y .btn--ghost.
Espaciados generales: variables --space-* y .section en styles.css.

9. Checklist rápido antes de publicar

Pegar el enlace de Google Calendar en app.js.
Actualizar email, ubicación y testimonios reales.
Probar el cambio de idioma.
Probar el modo oscuro.
Revisar móvil y escritorio.
Confirmar dominio final en index.html, robots.txt, sitemap.xml y site.webmanifest.
Subir todo a public_html en Hostinger.

Ver la web Volver arriba

Administra la web sin perder el diseño