. El header de Astra queda oculto vía la clase th-home-public que el filtro body_class añade al (ver inc/helpers.php). Solo afecta a esta pantalla; el resto del sitio mantiene el header de Astra. */ body.th-home-public .ast-site-header, body.th-home-public .site-header, body.th-home-public #masthead { display: none; } /* ---------- Wrapper general de la home ---------- Mobile: ancho máximo 480px (densidad tipo Instagram). Tablet: 720px. Desktop: 1100px. */ .th-home-public { width: 100%; max-width: 480px; margin: 0 auto; padding-bottom: var(--space-12); } @media (min-width: 768px) { .th-home-public { max-width: 720px; } } @media (min-width: 1024px) { .th-home-public { max-width: 1100px; } } /* ===================================================== Header público ===================================================== */ .th-home-public-header { position: sticky; top: 0; z-index: 100; width: 100%; background-color: color-mix(in srgb, var(--color-bg) 85%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--color-border); transition: background-color var(--duration-base) var(--ease); } .th-home-public-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4); max-width: 1100px; margin: 0 auto; } .th-home-public-header__logo { display: inline-flex; align-items: center; text-decoration: none; } .th-home-public-header__logo:hover { text-decoration: none; } /* ---------- Logo bicolor (claro/oscuro) ---------- El header renderiza ambas variantes simultáneamente y el CSS muestra solo la que corresponde al modo activo (clase .dark en ). Así el cambio es instantáneo al togglear el tema, sin recargar ni FOUC. Las clases antiguas .th-home-public-header__logo-emoji, --logo-text y --logo-accent se retiraron porque el logo ya no se compone de texto+emoji sino de imágenes reales. */ .th-logo { height: 88px; width: auto; } @media (min-width: 768px) { .th-logo { height: 112px; } } .th-logo--light { display: block; } .th-logo--dark { display: none; } html.dark .th-logo--light { display: none; } html.dark .th-logo--dark { display: block; } .th-home-public-header__signin { color: var(--color-text-muted); font-size: 0.9375rem; font-weight: 500; text-decoration: none; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); transition: color var(--duration-fast) var(--ease), background-color var(--duration-fast) var(--ease); } .th-home-public-header__signin:hover { color: var(--color-text); background-color: var(--color-surface); text-decoration: none; } /* ---------- Wrapper de acciones del header (idioma + toggle + signin) ---------- */ .th-home-public-header__actions { display: inline-flex; align-items: center; gap: var(--space-3); } /* ---------- Language switcher (Polylang) ---------- */ .th-lang-switcher { display: inline-flex; align-items: center; gap: 2px; } .th-lang-switcher__item { display: inline-flex; align-items: center; gap: 6px; padding: var(--space-2) var(--space-3); font-family: var(--font-sans); font-size: 0.8125rem; font-weight: 600; color: var(--color-text-muted); text-decoration: none; text-transform: uppercase; letter-spacing: 0.05em; border-radius: var(--radius-sm); transition: color var(--duration-fast) var(--ease), background-color var(--duration-fast) var(--ease); } .th-lang-switcher__item:hover { color: var(--color-text); text-decoration: none; } .th-lang-switcher__item.is-active { color: var(--color-brand); font-weight: 700; } .th-lang-switcher__flag { font-size: 1rem; line-height: 1; } /* .th-lang-switcher__code hereda fuente y peso del item. */ /* En pantallas estrechas el switcher de idiomas se oculta para que entren bien logo + toggle + signin. El idioma sigue cambiable desde otros puntos (GTranslate sigue activo en el resto del sitio y Polylang en URLs directas). */ @media (max-width: 480px) { .th-lang-switcher { display: none; } } /* ===================================================== Hero ===================================================== */ .th-home-hero { position: relative; overflow: hidden; isolation: isolate; padding: var(--space-12) var(--space-4) var(--space-8); text-align: center; } @media (min-width: 768px) { .th-home-hero { padding: 5rem var(--space-6) 4rem; } } .th-home-hero__container { position: relative; max-width: 720px; margin: 0 auto; } .th-home-hero__tag { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); background-color: var(--color-brand-soft); border-radius: var(--radius-full); font-size: 0.8125rem; font-weight: 500; color: var(--color-brand); margin-bottom: var(--space-6); } .th-home-hero__pulse { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background-color: var(--color-brand); animation: th-home-pulse 1.5s ease-in-out infinite alternate; } @keyframes th-home-pulse { from { opacity: 0.5; transform: scale(0.85); } to { opacity: 1; transform: scale(1.15); } } @media (prefers-reduced-motion: reduce) { .th-home-hero__pulse { animation: none; } } .th-home-hero__title { font-family: var(--font-sans); font-weight: 700; font-size: 2.25rem; line-height: 1.1; letter-spacing: -0.02em; color: var(--color-text); margin: 0 0 var(--space-5); } @media (min-width: 768px) { .th-home-hero__title { font-size: 3.5rem; } } .th-home-hero__title em { font-family: var(--font-serif); font-style: italic; font-weight: 500; color: var(--color-brand); } .th-home-hero__sub { font-size: 1.0625rem; line-height: 1.55; color: var(--color-text-muted); margin: 0 auto var(--space-8); max-width: 540px; } @media (min-width: 768px) { .th-home-hero__sub { font-size: 1.1875rem; } } .th-home-hero__cta { display: inline-flex; align-items: center; justify-content: center; padding: var(--space-4) var(--space-8); background-color: var(--color-brand); color: #FFFFFF; font-family: var(--font-sans); font-weight: 600; font-size: 1rem; text-decoration: none; border-radius: var(--radius-full); box-shadow: var(--shadow-md); transition: background-color var(--duration-base) var(--ease), transform var(--duration-fast) var(--ease), box-shadow var(--duration-base) var(--ease); } .th-home-hero__cta:hover { background-color: var(--color-brand-hover); color: #FFFFFF; transform: translateY(-1px); box-shadow: var(--shadow-lg); text-decoration: none; } .th-home-hero__cta:active { transform: translateY(0); } .th-home-hero__alt { margin-top: var(--space-5); font-size: 0.9375rem; color: var(--color-text-muted); } .th-home-hero__alt a { color: var(--color-brand); font-weight: 600; margin-left: 0.25rem; } /* ===================================================== Stats strip ===================================================== */ .th-home-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); padding: var(--space-6) var(--space-4); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); text-align: center; } @media (min-width: 768px) { .th-home-stats { padding: var(--space-8) var(--space-6); max-width: 800px; margin: 0 auto; } } .th-home-stats__num { font-family: var(--font-serif); font-size: 3rem; line-height: 1; font-weight: 500; color: var(--color-brand); margin-bottom: var(--space-2); } @media (min-width: 768px) { .th-home-stats__num { font-size: 4rem; } } .th-home-stats__lbl { text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.6875rem; font-weight: 500; color: var(--color-text-muted); } /* ===================================================== Peek feed (sección estrella) ===================================================== */ .th-home-peek { padding: var(--space-10) var(--space-4) var(--space-8); text-align: center; } .th-home-peek__label { display: inline-block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-brand); margin-bottom: var(--space-3); } .th-home-peek__title { font-family: var(--font-sans); font-weight: 700; font-size: 1.875rem; line-height: 1.15; color: var(--color-text); margin: 0 0 var(--space-3); } @media (min-width: 768px) { .th-home-peek__title { font-size: 2.5rem; } } .th-home-peek__sub { color: var(--color-text-muted); font-size: 1rem; margin: 0 auto var(--space-8); max-width: 480px; } .th-home-peek__feed { position: relative; display: flex; flex-direction: column; gap: var(--space-3); max-width: 480px; margin: 0 auto; text-align: left; /* Altura mínima para que el degradado del overlay tenga aire. */ min-height: 340px; } .th-home-peek__post { background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); box-shadow: var(--shadow-sm); } .th-home-peek__post-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); } .th-home-peek__avatar { width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; } .th-home-peek__avatar[data-color="white-wolf"] { background: linear-gradient(135deg, #f0f9ff, #cbd5e1); } .th-home-peek__avatar[data-color="red-fox"] { background: linear-gradient(135deg, #f59e0b, #d97706); } .th-home-peek__name { font-weight: 600; font-size: 0.9375rem; color: var(--color-text); } .th-home-peek__meta { font-size: 0.8125rem; color: var(--color-text-muted); } .th-home-peek__text { font-size: 0.9375rem; line-height: 1.55; color: var(--color-text); } /* Overlay: blur + degradado vertical + máscara que intensifica el difuminado hacia abajo, llevando la mirada al CTA. */ .th-home-peek__overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: var(--space-6) var(--space-4); border-radius: var(--radius-lg); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); background: linear-gradient( 180deg, color-mix(in srgb, var(--color-bg) 0%, transparent) 0%, color-mix(in srgb, var(--color-bg) 60%, transparent) 45%, var(--color-bg) 95% ); -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 1) 55%); mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 1) 55%); } .th-home-peek__cta { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-4) var(--space-6); background-color: var(--color-brand); color: #FFFFFF; border-radius: var(--radius-full); font-weight: 600; font-size: 0.9375rem; text-decoration: none; box-shadow: var(--shadow-md); transition: background-color var(--duration-base) var(--ease), transform var(--duration-fast) var(--ease), box-shadow var(--duration-base) var(--ease); } .th-home-peek__cta:hover { background-color: var(--color-brand-hover); color: #FFFFFF; transform: translateY(-1px); box-shadow: var(--shadow-lg); text-decoration: none; } .th-home-peek__overlay-sub { margin-top: var(--space-3); font-size: 0.8125rem; color: var(--color-text-muted); } /* ===================================================== Features (3 razones) ===================================================== */ .th-home-features { padding: var(--space-10) var(--space-4); display: flex; flex-direction: column; gap: var(--space-6); max-width: 720px; margin: 0 auto; } @media (min-width: 768px) { .th-home-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); max-width: 1100px; padding: var(--space-12) var(--space-6); } } .th-home-features__item { display: flex; gap: var(--space-4); align-items: flex-start; } @media (min-width: 768px) { .th-home-features__item { flex-direction: column; text-align: left; gap: var(--space-3); } } .th-home-features__icon { flex-shrink: 0; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.375rem; background-color: var(--color-brand-soft); color: var(--color-brand); border-radius: 50%; padding: var(--space-3); box-sizing: content-box; } .th-home-features__item h3 { font-family: var(--font-sans); font-weight: 700; font-size: 1.125rem; color: var(--color-text); margin: 0 0 var(--space-2); } .th-home-features__item p { margin: 0; font-size: 0.9375rem; line-height: 1.55; color: var(--color-text-muted); } /* ===================================================== Final CTA ===================================================== */ .th-home-final { position: relative; overflow: hidden; isolation: isolate; margin: var(--space-8) var(--space-4) 0; padding: var(--space-12) var(--space-6); text-align: center; background-color: var(--color-surface); border-radius: var(--radius-xl); } @media (min-width: 768px) { .th-home-final { margin: var(--space-10) auto 0; max-width: 1100px; padding: 5rem var(--space-8); } } .th-home-final__title { font-family: var(--font-sans); font-weight: 700; font-size: 2rem; line-height: 1.15; color: var(--color-text); margin: 0 0 var(--space-4); } @media (min-width: 768px) { .th-home-final__title { font-size: 3rem; } } .th-home-final__title em { font-family: var(--font-serif); font-style: italic; font-weight: 500; color: var(--color-brand); } .th-home-final__sub { font-size: 1rem; color: var(--color-text-muted); margin: 0 auto var(--space-6); max-width: 420px; } .th-home-final__cta { display: inline-flex; align-items: center; justify-content: center; padding: var(--space-4) var(--space-8); background-color: var(--color-brand); color: #FFFFFF; font-weight: 600; font-size: 1rem; text-decoration: none; border-radius: var(--radius-full); box-shadow: var(--shadow-md); transition: background-color var(--duration-base) var(--ease), transform var(--duration-fast) var(--ease), box-shadow var(--duration-base) var(--ease); } .th-home-final__cta:hover { background-color: var(--color-brand-hover); color: #FFFFFF; transform: translateY(-1px); box-shadow: var(--shadow-lg); text-decoration: none; } /* ============================================================ TEMPORAL → coordinado con el bloque TEMPORAL de theme.css ------------------------------------------------------------ El bloque TEMPORAL de theme.css fuerza background-color con !important sobre body Y SUS WRAPPERS estructurales (#page, .site, .site-content, .site-main, main, .ast-container, .entry-content). Para que la marca de agua decorativa que vive en body.th-home-public::before sea visible a través de esos wrappers, los descendientes deben ser transparentes SOLO en home pública. El color de fondo queda aportado por el , que sigue respondiendo a --color-bg. Si más adelante se elimina el bloque TEMPORAL de theme.css y los selectores específicos de cada pantalla pintan sus fondos, este bloque también se elimina. ============================================================ */ .th-home-public #page, .th-home-public .site, .th-home-public .site-content, .th-home-public .site-main, .th-home-public main, .th-home-public .ast-container, .th-home-public .entry-content { background-color: transparent !important; } /* ============================================================ Marca de agua decorativa fija (sólo home pública) ------------------------------------------------------------ Icono de marca (sin letras), centrado en el viewport y fijo durante el scroll. Va sobre body.th-home-public::before: - isolation: isolate en el body crea un stacking context aislado, así z-index: -1 del pseudo queda detrás del contenido del body sin escapar a capas anteriores (header de Astra, theme-toggle flotante, etc). - opacity: 0.05 → marca premium muy sutil, no compite. - pointer-events: none → no intercepta clics ni selección. - clamp() ajusta tamaño según viewport con techos sensatos. ============================================================ */ body.th-home-public { isolation: isolate; } body.th-home-public::before { content: ""; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: clamp(300px, 60vh, 800px); height: clamp(300px, 60vh, 800px); background-image: url('../img/logo-icon.png'); background-size: contain; background-repeat: no-repeat; background-position: center; opacity: 0.05; z-index: -1; pointer-events: none; } @media (max-width: 480px) { body.th-home-public::before { width: clamp(250px, 70vw, 400px); height: clamp(250px, 70vw, 400px); opacity: 0.06; } } /* ============================================================ Plugin overrides — GTranslate oculto en home pública ------------------------------------------------------------ El switcher de idiomas de la home pública lo aporta nuestro header (.th-lang-switcher con Polylang). GTranslate sigue activo en el resto del sitio. Selectores defensivos: el markup de GTranslate cambia entre versiones y modos (dropdown, flags, popup). Cubrimos las variantes habituales con [class*=] / [id*=] para evitar tener que revisarlos en cada actualización del plugin. ============================================================ */ .th-home-public .gtranslate_wrapper, .th-home-public .gt_container-element, .th-home-public [class*="gtranslate"], .th-home-public [id*="gtranslate"], .th-home-public .gt_switcher, .th-home-public .gt_container { display: none !important; }