/* ========================================================================== Moostreak — capa de marca Amarillo de marca #FBD708, tomado de moostreak-app/android-native (res/values/colors.xml → brand_yellow, y ui/theme/Color.kt → Accent). Ojo con la especificidad: `data-color-mode` no vive solo en , también en secciones anidadas (main, .lp-Home, .CtaFormControl-container...), y Primer redeclara sus tokens en cada una de esas capas. Por eso los selectores repiten el atributo — `[data-color-mode=dark][data-color-mode=dark]` pesa 0,2,0 y gana al `[data-color-mode=dark]` original en cada nivel. El amarillo siempre se acompaña de texto negro: sobre blanco no alcanza contraste para texto, así que solo se usa como relleno o sobre fondo oscuro. ========================================================================== */ :root:root, [data-color-mode][data-color-mode] { /* Rampa de marca */ --moo-yellow-0: #fffad1; --moo-yellow-1: #fdee8a; --moo-yellow-2: #fce24a; --moo-yellow-3: #fbd708; /* marca */ --moo-yellow-4: #e2c000; --moo-yellow-5: #bda000; --moo-yellow-6: #8f7900; --moo-yellow-7: #665700; --moo-yellow-8: #3d3400; --moo-yellow-9: #1f1c00; /* AccentSurface de la app */ --moo-on-yellow: #000000; /* Acento de marca */ --brand-color-accent-primary: var(--moo-yellow-3); --brand-color-accent-secondary: var(--moo-yellow-1); --brand-color-accent-emphasis: var(--moo-yellow-3); /* Botón primario: relleno amarillo, texto negro */ --brand-button-primary-bgColor-rest: var(--moo-yellow-3); --brand-button-primary-bgColor-hover: var(--moo-yellow-4); --brand-button-primary-bgColor-active: var(--moo-yellow-5); --brand-button-primary-fgColor-rest: var(--moo-on-yellow); --brand-button-primary-fgColor-hover: var(--moo-on-yellow); --brand-button-primary-fgColor-active: var(--moo-on-yellow); --brand-button-primary-borderColor-rest: var(--moo-yellow-3); --brand-button-primary-borderColor-hover: var(--moo-yellow-4); --brand-button-primary-borderColor-active: var(--moo-yellow-5); /* Pestañas, fichas y controles */ --brand-Tabs-item-accent-bgColor-rest: var(--moo-yellow-3); --brand-Tabs-item-accent-fgColor-rest: var(--moo-on-yellow); --brand-Token-bgColor-accent: var(--moo-yellow-3); --brand-Token-fgColor-accent: var(--moo-on-yellow); --brand-Token-bgColor-hover-accent: var(--moo-yellow-4); --brand-control-color-accent: var(--moo-yellow-3); --brand-control-color-focus: var(--moo-yellow-3); --brand-color-focus: var(--moo-yellow-3); /* Realce de las tarjetas de producto */ --brand-tiles-highlightColor: var(--moo-yellow-3); /* Comilla del testimonio (usa la variante "green" del sistema) */ --brand-Testimonial-quoteMarkColor-green: var(--moo-yellow-3); --brand-Testimonial-quoteMarkColor-green-blue-start: var(--moo-yellow-3); --brand-Testimonial-quoteMarkBackground-green: var(--moo-yellow-9); --brand-Testimonial-quote-color-emphasis: var(--moo-yellow-3); } /* --- Sobre fondo oscuro el amarillo brilla: sirve también para enlaces --- */ [data-color-mode="dark"][data-color-mode="dark"] { --brand-color-text-link-rest: var(--moo-yellow-3); --brand-color-text-link-hover: var(--moo-yellow-2); --brand-Link-color-accent: var(--moo-yellow-3); } /* --- Sobre fondo claro se oscurece para que el texto sea legible --- */ [data-color-mode="light"][data-color-mode="light"] { --brand-color-text-link-rest: var(--moo-yellow-7); --brand-color-text-link-hover: var(--moo-yellow-6); --brand-Link-color-accent: var(--moo-yellow-7); --brand-color-accent-primary: var(--moo-yellow-7); --brand-color-accent-emphasis: var(--moo-yellow-7); /* el relleno del botón se mantiene amarillo marca con texto negro */ --brand-button-primary-bgColor-rest: var(--moo-yellow-3); --brand-button-primary-fgColor-rest: var(--moo-on-yellow); } /* Foco visible sobre cualquier fondo */ :focus-visible { outline-color: var(--moo-yellow-3); } /* -------------------------------------------------------------------------- El bloque de "escribe tu correo" del hero y del cierre viene marcado como `data-color-mode="light"` desde el origen: es una isla clara metida en una página oscura. El síntoma visible era el peor posible —el texto que escribe el visitante salía negro sobre fondo oscuro y no se leía—, así que se le devuelve la paleta del resto del sitio en vez de arrastrar dos temas. -------------------------------------------------------------------------- */ .CtaFormControl-container[data-color-mode="light"] { border-color: rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .04); } .CtaFormControl-container[data-color-mode="light"]:focus-within { border-color: rgba(251, 215, 8, .45); box-shadow: 0 0 0 3px rgba(251, 215, 8, .14); } .CtaFormControl-container[data-color-mode="light"] .CtaFormControl-label { color: rgba(255, 255, 255, .62); } .CtaFormControl-container[data-color-mode="light"] .CtaFormControl-input { color: #f0f6fc; background: transparent; } .CtaFormControl-container[data-color-mode="light"] .CtaFormControl-input::placeholder { color: rgba(255, 255, 255, .38); }