/* ============================================================================= DKT Store — Base (Sub-fase 1.0) Aplica la fundación tipográfica + accesibilidad base. NO estiliza secciones. Especificidad baja a propósito (selectores de elemento) para que header/hero puedan sobreescribir sin pelear (frontend-design §7). ============================================================================= */ /* ---------- Cuerpo: Inter, ritmo cómodo ---------- */ body { font-family: var(--dkt-font-body); font-size: var(--fs-base); line-height: var(--lh-body); color: var(--dkt-ink); background-color: var(--dkt-white); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* ── Guardas de regresión (v0.4.1) — la FUNDACIÓN posee estos defaults ────── Antes vivían solo en dkt-style.css (legacy). Si esa capa no gana/carga, un default de Astra se filtraba (fondo azul del Customizer, logo gigante). Aquí quedan con !important para que no dependan del legacy. Estilo final del header = tarea DEC-W052. */ html, body { background-color: var(--dkt-white) !important; } .custom-logo, .site-logo-img img, .ast-site-identity .site-logo-img img { max-height: 60px !important; width: auto !important; height: auto !important; } /* ---------- Títulos: Poppins, ajustado ---------- */ h1, h2, h3, h4, h5, h6, .dkt-display { font-family: var(--dkt-font-titles); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); color: var(--dkt-vino); font-weight: 600; } /* Escala aplicada (afinable por componente) */ h1, .dkt-display { font-size: var(--fs-4xl); font-weight: 700; } h2 { font-size: var(--fs-3xl); } h3 { font-size: var(--fs-2xl); } h4 { font-size: var(--fs-xl); } h5 { font-size: var(--fs-lg); } h6 { font-size: var(--fs-base); letter-spacing: var(--ls-wide); text-transform: uppercase; } p { margin: 0 0 var(--space-4); } /* ---------- Eyebrow (kicker de sección) ---------- */ .dkt-eyebrow { font-family: var(--dkt-font-titles); font-weight: 600; font-size: var(--fs-sm); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--accent); } /* ---------- Foco visible accesible (AA) — global ---------- */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--dkt-magenta); outline-offset: 2px; border-radius: 2px; } /* ---------- Reduced motion (refuerzo) ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ---------- Reveal al scroll (Sub-fase 1.4 · Objetivo #1 · DEC-W059) ---------- Fade + rise al entrar al viewport. SOLO transform/opacity (sin reflow). Estado por defecto VISIBLE: se oculta únicamente con .dkt-js (clasificadora inline en ) → sin JS el contenido se ve. El IntersectionObserver añade .is-visible (ver assets/js/dkt-reveal.js). */ .dkt-js .dkt-reveal { opacity: 0; transform: translateY(12px); transition: opacity 240ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1); } .dkt-js .dkt-reveal.is-visible { opacity: 1; transform: none; } /* Reduced motion: el guard global anula la transición, pero hay que forzar el estado VISIBLE (el guard no toca el opacity:0 inicial). Sin esto, reduced-motion sin reveal dejaría el contenido oculto. */ @media (prefers-reduced-motion: reduce) { .dkt-js .dkt-reveal, .dkt-js .dkt-reveal.is-visible { opacity: 1; transform: none; transition: none; } } /* ---------- Reveal por ELEMENTO (Home Premium v3.2) ---------- Variante escalonada del contrato .dkt-reveal (mismo dkt-reveal.js, misma clasificadora .dkt-js): 0.7s, rise 26px y delays del mockup (.rv/data-d). ADITIVO: los landings no usan estas clases. En el markup va SIEMPRE junto a .dkt-reveal ("dkt-reveal dkt-reveal--el dkt-reveal--d1"). */ .dkt-js .dkt-reveal.dkt-reveal--el { transform: translateY(26px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); } .dkt-js .dkt-reveal--d1 { transition-delay: 0.08s; } .dkt-js .dkt-reveal--d2 { transition-delay: 0.16s; } .dkt-js .dkt-reveal--d3 { transition-delay: 0.24s; } .dkt-js .dkt-reveal--d4 { transition-delay: 0.32s; } @media (prefers-reduced-motion: reduce) { /* Especificidad (0,3,0) supera al forzado de arriba (0,2,0) → repetirlo aquí. */ .dkt-js .dkt-reveal.dkt-reveal--el, .dkt-js .dkt-reveal.dkt-reveal--el.is-visible { opacity: 1; transform: none; transition: none; } .dkt-js .dkt-reveal--d1, .dkt-js .dkt-reveal--d2, .dkt-js .dkt-reveal--d3, .dkt-js .dkt-reveal--d4 { transition-delay: 0s; } }