/* ========================================================================== landing/_page-static.css — Layout para páginas estáticas interiores Aplica cuando Selectores reales del HTML generado: Nav: header > nav.navigation.is-landing-nav Logo: .navigation-logo img Contenido: #static-page > .container ========================================================================== */ /* ── 1. Nav: estado compacto + fondo oscuro desde el primer pixel ──────── Las páginas interiores no tienen hero → no existe el punto de scroll que el JS usa para añadir la clase .is-scrolled al nav. Sin esa clase, .is-landing-nav:not(.is-scrolled) en _layout.css deja el nav transparente sobre el fondo blanco del artículo — texto invisible. En vez de depender de la clase (que nunca llega aquí), reproducimos las mismas declaraciones que .is-landing-nav.is-scrolled, con los mismos tokens (--landing-bg-dark, --nav-scrolled-py, --nav-logo-scrolled…) para no duplicar valores — solo necesitamos más especificidad que la regla :not(.is-scrolled) de _layout.css (misma "puntuación" de clases, así que sin esto perdería por orden de aparición en el cascade). Añadimos selectores de tipo (body/header/nav) para asegurar que gana siempre, sin recurrir a !important. */ body.body-tenants-page header nav.navigation.is-landing-nav { background-color: var(--landing-bg-dark, #1a1f26); border-bottom: 1px solid var(--landing-border-dark, #374151); box-shadow: 0 2px 12px rgba(0, 0, 0, .4); padding-top: var(--nav-scrolled-py, 0.6rem); padding-bottom: var(--nav-scrolled-py, 0.6rem); /* Sin transición de entrada — ya arranca en estado final */ transition: none; } /* ── 2. Logo: tamaño compacto (el de .is-scrolled) sin animación de entrada ─ */ body.body-tenants-page header nav.navigation.is-landing-nav .navigation-logo img { max-height: var(--nav-logo-scrolled, 55px); filter: none; transition: none; } /* ── 3. Texto e iconos: blancos sobre fondo oscuro ───────────────────────*/ .body-tenants-page header nav.navigation, .body-tenants-page header nav.navigation .nav-link, .body-tenants-page header nav.navigation a { color: var(--landing-nav-text, #ffffff); } .body-tenants-page header nav.navigation .nav-link:hover, .body-tenants-page header nav.navigation a:hover { color: var(--landing-secondary, #e59500); } /* Burger lines — blancas sobre fondo oscuro */ .body-tenants-page .navigation-burger .burger-line { background-color: #ffffff; } /* ── 4. Contenido: padding-top para compensar el nav fijo ──────────────── Usa --nav-height-scrolled (logo 55px + padding 2×0.6rem ≈ 67px) + margen visual */ .body-tenants-page #static-page { padding-top: calc(var(--nav-height-scrolled, 67px) + 2.5rem); min-height: 60vh; } /* ── 5. Tipografía del artículo ──────────────────────────────────────────*/ .body-tenants-page .content-page { font-size: var(--lf-size-body, 1.08rem); line-height: 1.75; color: var(--landing-text-secondary, #374151); padding-bottom: 3.5rem; } .body-tenants-page .content-page h1 { font-family: var(--lf-headline); font-weight: var(--lf-weight-headline, 900); font-size: var(--lf-size-section-title); text-transform: uppercase; color: var(--landing-accent); margin-top: 1.5rem; margin-bottom: 1.5rem; letter-spacing: -.01em; } .body-tenants-page .content-page h2 { font-family: var(--lf-headline); font-weight: var(--lf-weight-headline, 900); font-size: var(--lf-size-block-title); text-transform: uppercase; color: var(--landing-primary); margin: 2.5rem 0 1rem; } .body-tenants-page .content-page h3 { font-family: var(--lf-headline); font-weight: var(--lf-weight-subheadline, 700); font-size: 1.35rem; color: var(--landing-accent); margin: 2rem 0 .75rem; } .body-tenants-page .content-page p { margin-bottom: 1.4rem; } .body-tenants-page .content-page img { max-width: 100%; height: auto; border-radius: var(--landing-radius-sm, 6px); margin: 1rem 0; } .body-tenants-page .content-page a { color: var(--landing-primary); text-decoration: none; border-bottom: 1.5px solid color-mix(in srgb, var(--landing-primary), transparent 60%); padding-bottom: 1px; transition: color var(--lf-transition-fast), border-color var(--lf-transition-fast); } .body-tenants-page .content-page a:hover { color: var(--landing-primary-hover); border-color: var(--landing-primary); } /* ── 6. Breadcrumb ───────────────────────────────────────────────────────*/ .body-tenants-page .breadcrumb { font-size: var(--lf-size-sm, 0.85rem); font-weight: 500; text-transform: uppercase; letter-spacing: .05em; } .body-tenants-page .breadcrumb-item a { color: var(--landing-primary); text-decoration: none; } .body-tenants-page .breadcrumb-item a:hover { color: var(--landing-primary-hover); } .body-tenants-page .breadcrumb-item.active { color: var(--landing-text-secondary, #374151); } .body-tenants-page .breadcrumb-item + .breadcrumb-item::before { color: var(--landing-border-dark, #374151); } /* ── 7. Paginación prev/next ─────────────────────────────────────────────*/ .body-tenants-page .page-nav { border-top: 1px solid var(--landing-border-light, #e5e7eb); padding-top: 1.5rem; } .body-tenants-page .page-nav a { font-size: var(--lf-size-sm, 0.85rem); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--landing-primary); text-decoration: none; display: inline-flex; align-items: center; gap: .5rem; transition: color var(--lf-transition-fast, .15s ease); } .body-tenants-page .page-nav a:hover { color: var(--landing-secondary); }