/* ============================================================================= DKT Store — Landing BASE (andamiaje compartido de landings de marca · Fase 2) Mecanismo "A con cara de B": la landing vive en la categoría de producto WooCommerce (diu-andalan / todo-prudence) con plantilla inmersiva por marca. DEC-W070 · v0.8.13. REGLAS: - Se carga SOLO en categorías de marca (enqueue condicional en functions.php). - REUSA los tokens canónicos del Home (tokens.css + dkt-color-tokens.css): --space-*, --ease-out, --fs-*, --dkt-shadow-*, --radius-pill, --dkt-* color. - NO redefine ningún token global. Lo nuevo va en namespace --la-* (en :root, inocuo en el Home porque este archivo no se carga ahí) y los CONTRATOS de marca van scopeados a body.dkt-brand-* (NO a .dkt-brand-* a secas, que el Home usa en hero/puertas) → cero regresión en el Home. - El detalle visual fino de cada marca lo arman los agentes 1 y 2 en landing-andalan.css / landing-prudence.css. Aquí solo lo COMPARTIDO. ============================================================================= */ /* ---------- Tokens premium de landing (namespaced --la-*) ---------- */ :root { /* Escala display dramática del mockup (más grande que --fs-4xl del Home). */ --la-fs-display: clamp(2.5rem, 6vw, 4.6rem); --la-fs-h2: clamp(1.55rem, 3vw, 2.2rem); --la-lead: 1.12rem; /* Layout (reusa el ritmo --space-*; alias semánticos de landing). */ --la-wrap: 1180px; /* ancho de contenido del mockup */ --la-section-y: var(--space-12); /* 96px — ritmo vertical de sección */ --la-gap: var(--space-6); /* 32px */ /* Radios premium (más redondeados que el Home; sin tocar --dkt-radius*). */ --la-radius: 14px; --la-radius-lg: 22px; --la-pill: var(--radius-pill); /* Profundidad: sombras con tinte vino + spread negativo (lift premium). */ --la-shadow-1: 0 1px 2px rgba(95, 14, 57, .07); --la-shadow-2: 0 8px 24px -8px rgba(95, 14, 57, .18); --la-shadow-3: 0 26px 60px -16px rgba(95, 14, 57, .26); /* Motion (reusa --ease-out = cubic-bezier(.16,1,.3,1); añade dur-slow). */ --la-ease: var(--ease-out); --la-dur: 200ms; --la-dur-slow: 280ms; } /* ============================================================================= CONTRATOS DE MARCA — scopeados a body.dkt-brand-* (SOLO la landing) En el Home, .dkt-brand-* aparece en elementos internos (hero/puertas); por eso estos overrides usan body.dkt-brand-* (más específico y a nivel de ), que solo existe en la categoría de marca vía el filtro body_class. ============================================================================= */ /* --- ANDALAN (Cat C · libre de hormonas · voz editorial empoderadora) --- CONTRATO AA: --accent es SOLO fondo de acción (botón) con texto BLANCO encima (#E60073 = 4.55:1 vs blanco). Para TEXTO/enlaces de acento usar --la-accent-ink. */ body.dkt-brand-andalan { --accent: #E60073; /* fondo de botón (texto blanco encima). NO usar como color de texto. */ --la-accent-ink: #C20063; /* fucsia AA para TEXTO/enlaces sobre superficie clara (~6:1 vs blanco) */ --la-brand: #ED0076; /* fucsia núcleo (degradados/fondos de color, NO texto) */ --la-teal: #6DACA4; /* DECORATIVO (fondos/trazos gruesos). NO texto ni iconografía informativa (2.6:1) */ --la-display: 'Fraunces', Georgia, serif; /* serif editorial (itálica = gesto) */ /* Hero arranca en #C20063 (no #ED0076) para que el texto BLANCO pase AA en toda el área (~6:1). */ --la-grad-hero: linear-gradient(150deg, #C20063 0%, #A30055 45%, #5F0E39 100%); --la-surface: var(--dkt-paper); --la-on-surface: var(--dkt-ink); } /* --- PRUDENCE (Cat D · OTC · skin "Neón": negro core + blanco) --- CONTRATO AA: --accent es SOLO fondo de acción (botón) con texto BLANCO encima (#DD0090 = 4.69:1 vs blanco). Para TEXTO/enlaces sobre el negro usar --la-accent-ink. */ body.dkt-brand-prudence { --accent: #DD0090; /* fondo de botón (texto blanco encima). NO usar como color de texto. */ --la-accent-ink: #FF5AB3; /* Rhodamine claro para TEXTO/enlaces sobre el negro core (~5.9:1) */ --la-rhoda: #E50695; /* Rhodamine núcleo (femenino, fondos/acción) */ --la-neon: #8FC400; /* verde neón (sello "brilla en la oscuridad" + glow) */ --la-core: #1F140F; /* negro cálido — color core de marca */ --la-core-2: #2A1E18; /* superficie de tarjetas */ --la-core-3: #160E0A; /* bandas inmersivas / footer */ --la-ash: #C9BFB8; /* texto secundario sobre oscuro (~9.6:1, OK) */ --la-display: 'Montserrat', system-ui, sans-serif; /* geométrica bold (sust. OFL de Futura/Swiss) */ --la-surface: var(--la-core, #1F140F); --la-on-surface: #FFFFFF; } /* ============================================================================= ESTRUCTURA COMPARTIDA (mínima; los agentes 1/2 la refinan por marca) ============================================================================= */ /* Lienzo de la landing: el skin inmersivo se limita al CONTENIDO de la landing, NO al header/footer de Astra (que conservan su estilo). */ .dkt-landing { background: var(--la-surface); color: var(--la-on-surface); } body.dkt-brand-prudence .dkt-landing { background: var(--la-core); color: #fff; } body.dkt-brand-andalan .dkt-landing { background: var(--dkt-paper); color: var(--dkt-ink); } /* Contenedor centrado (la home usa page-builder full-width → cada sección maneja su propio wrap, igual que el mockup). */ .dkt-landing__wrap { max-width: var(--la-wrap); margin-inline: auto; padding-inline: var(--space-5); /* 24px */ } /* Ritmo vertical de sección. */ .dkt-landing__section, .dkt-landing__hero, .dkt-landing__values, .dkt-landing__products { padding-block: var(--la-section-y); } /* Hero compartido. */ .dkt-landing__hero { background: var(--la-grad-hero, transparent); } body.dkt-brand-prudence .dkt-landing__hero { background: var(--la-core-3); } .dkt-landing__title { font-family: var(--la-display); font-size: var(--la-fs-display); line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 var(--space-4); } .dkt-landing__lead { font-size: var(--la-lead); line-height: 1.6; max-width: 46ch; margin: 0 0 var(--space-5); } body.dkt-brand-andalan .dkt-landing__hero, body.dkt-brand-andalan .dkt-landing__hero .dkt-landing__title { color: #fff; } body.dkt-brand-andalan .dkt-landing__hero .dkt-landing__lead { color: rgba(255,255,255,.92); } /* Prudence hero: texto legible sobre el core negro */ body.dkt-brand-prudence .dkt-landing__hero, body.dkt-brand-prudence .dkt-landing__hero .dkt-landing__title { color: #fff; } body.dkt-brand-prudence .dkt-landing__hero .dkt-landing__lead { color: var(--la-ash); } /* #C9BFB8 ≈9.6:1 */ /* Eyebrow legible sobre el hero (NO --accent: sobre el hero de marca no pasa AA como texto). */ body.dkt-brand-andalan .dkt-landing__hero .dkt-eyebrow { color: #FFD3E8; } /* rosa claro sobre fucsia/vino */ body.dkt-brand-prudence .dkt-landing__hero .dkt-eyebrow { color: var(--la-accent-ink); } /* rhodamine claro sobre negro */ /* Marcador visible de PLACEHOLDER PREP (los agentes 1/2 lo eliminan). */ .dkt-landing__badge { display: inline-block; font: 600 var(--fs-xs)/1 var(--dkt-font-titles); letter-spacing: var(--ls-caps); text-transform: uppercase; padding: .5rem .8rem; border-radius: var(--la-pill); background: rgba(255,255,255,.16); color: #fff; } /* Bloque de valores reusado dentro de la landing (skin de marca, no crema). */ .dkt-landing__values .dkt-values__head { text-align: center; } /* Rejilla de productos (carrito WC nativo). WooCommerce pinta ul.products; aquí solo aseguramos aire dentro del wrap de la landing. */ .dkt-landing__products .dkt-section-title { font-family: var(--la-display); font-size: var(--la-fs-h2); margin: 0 0 var(--la-gap); } .dkt-landing__products ul.products { margin-block: 0; } .dkt-landing__empty { opacity: .8; } /* Reveal on-scroll: REUSA el contrato .dkt-reveal/.is-visible del Home (el estado oculto y la animación fade+rise viven en base.css; la clasificadora .dkt-js es global). landing.js (no dkt-reveal.js) lo activa aquí. */ @media (max-width: 768px) { .dkt-landing__wrap { padding-inline: var(--space-4); } /* 16px, sin overflow */ .dkt-landing__hero, .dkt-landing__values, .dkt-landing__products { padding-block: var(--space-10); } /* 64px */ }