/*! * TLV2 — presets.css (Gate D3) * Contrato: SOLO variables y toggles (sin selectores de componentes). * Ámbitos: .preset--*, body.tl-cta-overlay-* * Nota: Se usa !important en custom properties de overlays CTA para ganar a landing. */ /* ========================= 1) Presets de tema (ejemplos) ========================= */ /* Modo oscuro – ejemplo de roles de superficie y tipografía */ .preset--dark{ --role-surface-base: oklch(0.14 0 0); --role-surface-section: oklch(0.18 0 0); --role-surface-card: oklch(0.22 0 0); --role-heading-color: oklch(0.98 0 0); --role-body-color: oklch(0.92 0 0); --role-muted-color: oklch(0.70 0 0); --role-border-color: oklch(0.30 0 0); /* CTA contraste en dark (ejemplo) */ --role-cta-surface: oklch(0.72 0.14 215); --role-cta-fg: oklch(0.16 0.02 215); --role-cta-border: color-mix(in oklch, var(--role-cta-surface) 85%, black); } /* Alto contraste – ejemplo de ajuste de texto/bordes */ .preset--hc{ --role-heading-color: oklch(0.10 0 0); --role-body-color: oklch(0.12 0 0); --role-muted-color: oklch(0.20 0 0); --role-border-color: oklch(0.25 0 0); } /* ========================================== 2) Toggles de overlay CTA (desktop/mobile) ========================================== Reglas: - SOLO definen custom properties (no estilos directos de .cta). - Incluyen !important para ganar a cualquier set posterior en la landing. - El mapeo .cta ← vars se hace en components-map.css (no aquí). */ /* === TLV2: CTA overlay toggles (desktop/mobile) — fuente única, sin @media === */ body.tl-cta-overlay-desktop--gradient{ --role-cta-overlay-desktop: linear-gradient(180deg, oklch(0.70 0.10 210 / 0.22) 0%, oklch(0.70 0.10 210 / 0.00) 100% ) !important; } body.tl-cta-overlay-desktop--none{ --role-cta-overlay-desktop: none !important; } body.tl-cta-overlay-mobile--gradient{ --role-cta-overlay-mobile: linear-gradient(180deg, oklch(0.70 0.10 210 / 0.22) 0%, oklch(0.70 0.10 210 / 0.00) 100% ) !important; } body.tl-cta-overlay-mobile--none{ --role-cta-overlay-mobile: none !important; } /* ========================================================================== */ /* TL-V2 — presets.css */ /* Overlays de CTA y presets combinables (solo variables; sin componentes) */ /* ========================================================================== */ /* Overlays de CTA (mapear toggles → roles) */ body.tl-cta-overlay-desktop--gradient { --role-cta-overlay-desktop: var(--overlay-gradient-desktop); } body.tl-cta-overlay-desktop--none { --role-cta-overlay-desktop: none; } body.tl-cta-overlay-mobile--gradient { --role-cta-overlay-mobile: var(--overlay-gradient-mobile); } body.tl-cta-overlay-mobile--none { --role-cta-overlay-mobile: none; } /* Presets combinables por (solo variables; sin tocar .cta) */ body.preset--cta-desktop-gradient { --role-cta-overlay-desktop: var(--overlay-gradient-desktop); } body.preset--cta-mobile-solid { --role-cta-overlay-mobile: none; } /* Nota: - Estas clases NO deben definir estilos de .cta. - Solo mueven variables de roles; .cta se pinta en components-map.css. */